/*
 * Aanvullingen op solis.css.
 *
 * `solis.css` is de stylesheet van de goedgekeurde mock-up en blijft
 * ongewijzigd, zodat hij regel voor regel met de bron te vergelijken blijft.
 * Alles wat WordPress nodig heeft en de mock-up niet kende, staat hier.
 * Houd dit bestand kort: groeit het, dan is dat een teken dat de markup van een
 * blok afwijkt van de mock-up en dáár de oplossing ligt.
 */

/* stylelint-disable no-descending-specificity -- Dit bestand corrigeert
   solis.css en staat er per definitie achter: de volgorde is hier de bedoeling
   en niet een ongeluk. Sorteren op specificiteit zou de regels losmaken van de
   uitleg waarom ze er staan. */

/* WordPress zet zijn eigen uitlijnklassen op blokken. De mock-up regelde de
   breedte met .shell; deze twee regels laten ze samenwerken. */
.wp-block-group.alignfull > :where(:not(.alignfull)) {
	max-width: var(--shell);
	margin-inline: auto;
}

/* `--shell` in solis.css is `min(1240px, 100% - 48px)`: de kolom houdt zelf
   al 24px aan weerszijden vrij. WordPress geeft zijn inhoudscontainers
   diezelfde marge nog een keer, waardoor een .shell daarbinnen 48px te smal
   werd — op het modellenoverzicht een kaart van 385 in plaats van 409px.
   Binnen zo'n container telt die marge dus niet nog eens mee. Het maximum is
   hetzelfde als in solis.css; die stylesheet blijft byte-identiek aan de
   mock-up en kan er geen eigen variabele voor krijgen. */

/* Geen directe-kindselector: een blok zet zijn eigen omhulsel om de shell heen,
   en dan zou de regel er net naast grijpen. */
.has-global-padding .shell {
	width: min(1240px, 100%);
}

/* En die marge is niet overal even breed: onder 1000px gaat `--shell` van 48
   naar 40px totaal. De zijmarge van WordPress moet dezelfde knik maken, anders
   is de kolom daaronder 8px smaller dan in de mock-up. WordPress schrijft die
   marge zowel als variabele als met een vaste waarde weg, dus beide mee. */
@media (max-width: 1000px) {

	:root {
		--wp--style--root--padding-left: 20px;
		--wp--style--root--padding-right: 20px;
	}

	.has-global-padding {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* De mock-up sloot op de dealerpagina een kaart van Google in. Dat is een
   verzoek naar een derde partij bij het laden van de pagina en dus een
   toestemmingsvraag; zie 11.2 van het migratieplan. Er staat nu een kaart uit
   eigen data, en zonder die data een tekening.

   De tekening is een staand vlak in een liggende kolom en krijgt daarom de
   `map-wrap` van de homepage om zich heen. De sectie houdt de hoogte van de
   ingesloten kaart die hier stond: 590px, waarvan 2 × 48px marge van die wrap.
   Er blijft dus 494px voor de tekening over, en dat is bij de verhouding uit
   solis.css een breedte van 425px.

   Begrenzen op de breedte en niet op de hoogte, want anders houdt het vlak
   zijn 485px en laat de SVG er balken naast — en dan staan de markers niet
   meer op hun plaats, want die zijn een percentage van het kaartvlak. */
.dealer-map-zoom {
	overflow: hidden;
}

.region-map .dealer-map-zoom {
	max-width: 425px;
}

/* En de lucht eromheen. De rekensom hierboven gaat uit van 2 × 48px marge van
   de `map-wrap`, maar die zet er zeventig neer en dat stond nergens
   rechtgezet: de sectie werd 634 pixels in plaats van de 590 van de kaart die
   er stond. */
.region-map {
	padding: 48px;
}

/* Schaal, middelpunt en verschuiving komen per dealer uit render.php: vergroten
   rond de vestiging, en dan opschuiven tot die zo dicht mogelijk bij het midden
   staat zonder dat de rand van de tekening in beeld komt. De tekening en de
   puntenlaag krijgen exact dezelfde bewerking, anders lopen ze uiteen. */
.dealer-map-zoom .dealer-map-base,
.dealer-map-zoom .dealer-map-points {
	transform: translate(var(--pan-x, 0), var(--pan-y, 0)) scale(var(--zoom, 1));
	transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}

/* Het stipje mag niet meeschalen: het is een markering, geen kaartelement.
   De tegenschaal houdt hem overal even groot. */
.dealer-map-zoom .dealer-point {
	transform: scale(calc(1 / var(--zoom, 1)));
}

/* Staat er een gerenderde kaart uit de eigen OpenStreetMap-data, dan is dat
   gewoon een afbeelding. De vestiging staat in het midden van die render, dus
   de marker staat vast op het midden in plaats van op een coördinaat.

   Het beeld vult de hele kaartkolom, zoals de ingesloten kaart in de mock-up
   dat deed. Absoluut binnen `.region-map`, want die kolom krijgt zijn hoogte
   uit solis.css en verandert mee op de breekpunten: 590, 440 en 360px. Een
   figuur met `height: 100%` zou daar niets van meekrijgen, want die hoogte is
   een minimum en geen vaste maat. */
.region-map-render {
	position: relative;
	overflow: hidden;
}

.dealer-map-render {
	position: absolute;
	inset: 0;
	margin: 0;
}

.dealer-map-render img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dealer-map-render .dealer-point {
	left: 50%;
	top: 50%;
}

/* De bronvermelding is bij ODbL een voorwaarde en geen beleefdheid. Ze staat
   in de HTML en niet in het beeld: zo blijft ze leesbaar voor een schermlezer
   en hoeft er niets opnieuw gerenderd te worden als de tekst verandert. */
.dealer-map-render figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 3px 7px;
	background: rgba(247, 245, 241, 0.82);
	color: var(--muted);
	font: 400 10px/1.4 Inter, Arial, sans-serif;
}

/* :any-link en niet kaal `a`: zonder die pseudo-klasse weegt deze regel lichter
   dan de taalwisselaar hierboven, en dan klaagt stylelint terecht dat een
   latere regel minder specifiek is dan een eerdere. */
.dealer-map-render figcaption a:any-link {
	color: inherit;
}

/* De kaart op de homepage vult haar vlak van rand tot rand. In de mock-up was
   het een gestileerde tekening die met een slagschaduw in een crèmekleurig vlak
   zweefde; met een echte kaart is die rand een grijze baan om het beeld heen,
   en op 413 pixels breed is een kaart van de Benelux niet te lezen.

   Het beeld wordt tot het vlak uitgerekt en niet bijgesneden. Dat is met opzet:
   de stipjes staan in procenten van datzelfde vlak, dus beeld en stip rekken
   even veel mee en blijven bij elkaar staan. Bijsnijden zou het beeld wél
   verschuiven en de stippen niet. `make benelux-kaart` rendert op de
   verhouding van dit vlak, dus op een breed scherm valt er niets te rekken.
   Zelfde regel als bij Thaler. */
.home-map-wrap {
	padding: 0;
}

.home-map-wrap .dealer-map {
	width: 100%;
	max-width: none;
	height: 100%;
	aspect-ratio: auto;
}

.home-map-wrap img {
	filter: none;
}

/* WordPress zet standaard 24px tussen de blokken op het hoogste niveau. De
   mock-up regelt zijn eigen ritme met .section en met de hero die tegen de
   bovenkant aan ligt; die extra marge schoof alles precies 24px omlaag. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Datzelfde speelt binnen een sectie: WordPress zet tussen twee blokken in een
   groep 24px, terwijl solis.css de verticale ritmiek daar zelf bepaalt. De
   verhaalsectie werd er 48px hoger van en de intro 15px.

   Deze regel is bewust zwak: één klasse, dus een regel uit solis.css die een
   element wél een marge geeft — `.story-panel p` bijvoorbeeld — wint hiervan.
   Alleen wat in de mock-up geen marge heeft, verliest die van WordPress. */
.intro-grid > * + *,
.story-panel > * + *,
.story > * + * {
	margin-block-start: 0;
}

/* Hetzelfde speelt in de rasters die uit de mock-up komen: tekst en formulier
   staan daar naast elkaar in een grid, en de 24px die WordPress tussen twee
   blokken zet duwt het formulier omlaag — een sectie werd er 23px hoger van.
   Ieder raster uit de mock-up draagt de klasse `shell`, dus die ene regel dekt
   ze allemaal. */
.wp-block-group.shell > * + * {
	margin-block-start: 0;
}

/* De mock-up zette `is-active` op een aangevinkte keuze met JavaScript, bij
   iedere klik. Hier komt die klasse van de server en klopt hij pas ná het
   versturen: je vinkte iets aan en zag niets veranderen. Deze regels laten de
   opmaak meelopen met het vinkje zelf, dus meteen bij de klik en zonder
   JavaScript. Ze zeggen precies wat `is-active` in solis.css zegt. */
.compare-pick:has(input:checked) > span {
	border-color: var(--green-dark);
	background: rgba(215, 25, 32, 0.1);
}

/* De gewichten die de opmaak vraagt maar die niet als bestand bestaan.
   Op een modelpagina staan 148 elementen op Inter 700, drie op Manrope 900 en
   één op Bebas Neue 600 — gemeten met getComputedStyle, niet aangenomen. Van
   die drie is er geen bestand: Inter houdt op bij 600, Manrope bij 800 en Bebas
   heeft maar één gewicht.

   Wat de browser nu doet is het naastliggende gewicht pakken. Dat ziet er goed
   uit — nagemeten: dezelfde tekst op 600 en op 700 is exact even breed, dus er
   wordt niets nagebootst — maar het staat nergens vast. Zet iemand ooit een
   bestand inter-700 in de map en hangt daar een @font-face aan, dan verandert
   de halve modelpagina van uiterlijk zonder dat er een regel opmaak is
   aangeraakt.

   Daarom staat het hier wél vast: het bestand dat er is, wordt expliciet
   aangewezen voor het gewicht dat gevraagd wordt. De weergave blijft precies
   zoals de goedgekeurde mock-up hem laat zien — daar draait dezelfde opmaak op
   dezelfde bestanden — en een toevoeging later kan niets meer stilzwijgend
   omgooien. */

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/inter-600-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Inter;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/inter-600-latinext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(../fonts/manrope-800-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: Manrope;
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url(../fonts/manrope-800-latinext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url(../fonts/bebas-neue-400-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url(../fonts/bebas-neue-400-latinext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* De afsluitende rand onder de laatste sectie van een pagina.

   `solis.css` schrijft dat als `main > .warranty-section:last-child` en zo
   voort: een donkere slotsectie krijgt vierentwintig pixels crème mee, zodat
   hij niet tegen de donkerblauwe voet aan plakt. In de mock-up staan die
   secties rechtstreeks in `main`.

   Een redactionele pagina in WordPress niet: die staat in de `entry-content`
   van het post-content-blok, en dat omhulsel is niet weg te laten zonder de
   pagina onbewerkbaar te maken. De regel greep daar dus nergens op aan en de
   informatiepagina eindigde vierentwintig pixels te kort, pal tegen de voet.

   Dezelfde vijf selectoren, één niveau dieper. */
:is(.entry-content) > .dealer-contact-section:last-child,
:is(.entry-content) > .warranty-section:last-child,
:is(.entry-content) > .warranty-check:last-child,
:is(.entry-content) > .s75-final-cta:last-child,
:is(.entry-content) > .page-hero:last-child {
	border-bottom: 24px solid var(--cream);
	box-shadow: inset 0 -6px 0 var(--green);
}

/* De machinefoto in de actie. `solis.css` geeft `.actie-machine` geen marge
   en leunt daarmee op wat de browser een `<figure>` vanzelf geeft: 1em boven
   en onder, 40px links en rechts. Dat is daar geen vergetelheid —
   `.actie-accessoire` en `.config-lightbox figure` krijgen wél een
   `margin: 0`, dus waar de opsteller de marge niet wilde staat het er.

   WordPress zet `:where(figure) { margin: 0 0 1em }` neer en haalt die
   zijmarges dus weg. De foto werd daardoor 508 pixels breed in plaats van
   428. Dit is de enige `<figure>` op de hele site waar dat verschil maakt;
   nagemeten over vijftien paginaparen. */
.actie-machine {
	margin: 1em 40px;
}

/* De markering bij voorbeeldtekst. Opzettelijk lelijk: dit hoort op te vallen
   en niet mee te vloeien met het ontwerp. Zolang deze ergens op de site staat,
   faalt `make voorbeeld-check`. */
.solis-voorbeeld {
	display: inline-block;
	margin-left: 10px;
	padding: 2px 8px;
	border: 1px dashed #8c5806;
	border-radius: 2px;
	background: #faf1df;
	color: #8c5806;
	font: 700 11px/1.5 Manrope, Arial, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* De strook met levertijd, financiering en inruil, en het blok over de
   importeur. Ze lenen het rooster van de contactpagina; wat hier staat is
   alleen de ruimte eromheen. */

.solis-importeur h2 {
	max-width: 22ch;
	margin: 14px 0 16px;
}

.solis-importeur > .shell > p {
	max-width: 62ch;
	margin: 0 0 32px;
	color: var(--muted);
}

/* De knop naar de dealers, en de regel over wat er wél rechtstreeks kan. */
.solis-importeur-weg {
	margin: 0 0 22px;
}

.solis-importeur-rechtstreeks {
	max-width: 62ch;
	margin: 0;
	color: var(--muted);
}

.solis-importeur-feiten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 28px 32px;
	margin: 0;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}

.solis-importeur-feiten div {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.solis-importeur-feiten dt {
	color: var(--green-dark);
	font: 700 12px/1.4 Manrope, Arial, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.solis-importeur-feiten dd {
	margin: 0;
	font-size: 16px;
}

/* Een zichtbare focusrand in de voet. solis.css geeft er een aan de knoppen
   en de hoofdnavigatie, maar niet aan de links in de voet; die kregen de rand
   van de browser zelf — `auto 1px rgb(16,16,16)`, bijna zwart op een
   antracieten vlak. Met het toetsenbord zag je dus niet waar je stond.

   `currentColor` en geen vaste kleur: de rand neemt de kleur van de tekst zelf
   over, en die is per definitie leesbaar op het vlak eronder. Dezelfde regel
   werkt daarmee ook als de voet ooit licht wordt. */
.site-footer a:focus-visible {
	outline: 2px solid currentcolor;
	outline-offset: 3px;
	border-radius: 1px;
}

/* De kleine letters in de voet stonden in wit, en de menulinks erboven in
   #d4dee7. Daarmee riep de bedrijfsinformatie harder dan de navigatie — in de
   mock-up viel dat niet op, want daar stond er één zin; hier staan de
   statutaire naam, het adres, de nummers en een servicezin onder elkaar.

   De volgorde is nu: kolomkop wit, links #d4dee7, kleine letters #aebdca, de
   garantieregel het zwakst. Vier stappen die aflopen in plaats van door elkaar
   heen. #aebdca haalt 7,5:1 op deze achtergrond, dus leesbaar blijft het. */
.contact-column small {
	color: #aebdca;
}

/* De servicezin is geen adresgegeven en hoort niet tegen de nummers aan te
   plakken. */
.contact-column small + small {
	display: block;
	margin-top: 12px;
}

/* De koppen van de voetkolommen staan als h2 in de markup in plaats van als h3
   — anders springt de koppenstructuur op een korte pagina van niveau 1 naar 3.
   solis.css kent alleen `.footer-column h3`, dus de opmaak wordt hier
   herhaald; hij is letterlijk dezelfde. */
.footer-column h2 {
	margin: 0 0 22px;
	font: 400 17px/1.2 "Bebas Neue", Impact, Arial, sans-serif;
	text-transform: uppercase;
}

/* De drie links onderin de voet — de credit en de twee beleidspagina's — waren
   16 pixels hoog. Dat is de hoogte van de regel zelf: er zit geen ruimte om de
   tekst, dus het tikdoel is precies de letters. Onder de 24 pixels is dat op
   een telefoon een kwestie van mikken. De regel eromheen heeft hoogte genoeg,
   dus dit kost niets aan opmaak. */
.footer-legal a {
	display: inline-block;
	padding: 4px 0;
	min-height: 24px;
}

/* Deze plek stond vol met een tweede letterondergrens, negen selectoren lang,
   naast die hierboven. Zeven ervan zeiden hetzelfde als de hoofdlijst maar
   losser — `.contact-route-grid article span` in plaats van `> span` — en die
   twee overige wezen iets aan dat in de mock-up nooit te klein was:
   `.about-numbers span` staat daar op 13 pixels en `.service-choice-grid
   article > span` op 14.

   Losser is hier niet onschuldig. `article span` raakt óók het pijltje in een
   knop of tekstlink binnen zo'n article, en dat pijltje erft de veertien
   pixels van de link. De regel verkleinde het naar twaalf: iedere knop en
   iedere tekstlink in die roosters was twee pixels smaller dan in de mock-up,
   en `.about-numbers` en `.service-choice-grid` verloren bovendien een pixel
   letter waar niets aan mankeerde.

   Wat er werkelijk onder de twaalf zat staat in de lijst hierboven, met de
   selectoren van de mock-up zelf. */

/* Het telefoonnummer in de servicebalk, in het mobiele menu en in de voet. De
   mock-up kende ze niet — daar stond nergens een nummer — dus er is ook geen
   opmaak voor. Deze regels laten ze meelopen met wat er al staat. */
.utility-phone {
	margin-right: 14px;
	font-weight: 600;
}

/* Onderin het uitgeklapte menu, achter een scheidingslijn. Boven de duizend
   pixels staat het nummer in de servicebalk en hoort dit blok weg; eronder
   verdwijnt die balk en is dit de enige plek waar het staat. */
.site-nav-contact {
	display: none;
}

@media (max-width: 1000px) {

	.site-nav-contact {
		display: block;
		width: 100%;
		margin-top: 18px;
		padding-top: 18px;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
	}

	/* Een tikdoel en geen muisdoel: 44 pixels hoog is de ondergrens die
	   comfortabel te raken is. */
	.site-nav-contact .utility-phone {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		margin-right: 0;
	}
}

.contact-column .footer-phone span {
	font-size: 18px;
	font-weight: 700;
}

/* De kop staat doorzichtig over de hero en wordt pas donker zodra je scrolt.
   Op een donkere hero gaat dat goed. Op de modelpagina staat de machine op een
   lichte studioachtergrond, en daar verdween de navigatie: wit op bijna-wit,
   gemeten op 1,16:1 voor de taalknoppen en 1,36:1 voor "Informatie" — met
   `make contrast-check`, dat de pixels achter de letters afleest in plaats van
   de kleur uit de CSS.

   De sluier hoort in de hero en niet in de kopbalk. Dat is niet willekeurig:
   de kopbalk staat op z-index 50 en zou met een eigen verloop óók over de
   aanhef eronder heen liggen — geprobeerd, en "SOLIS 3448" verdween erachter.
   De hero heeft al een sluierlaag met twee verlopen, van links en van onder;
   hier komt er één van boven bij, precies waar de kopbalk zweeft. De inhoud
   van de hero staat op z-index 2 en blijft er dus bovenop. */
:is(.hero-shade, .series-hero-shade, .information-hero-shade)::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 220px;
	background: linear-gradient(180deg, rgba(24, 24, 24, 0.88) 0%, rgba(24, 24, 24, 0.6) 45%, rgba(24, 24, 24, 0) 100%);
	pointer-events: none;
}

/*
 * De fotostrook op de modelpagina.
 *
 * De mock-up kent hem niet: die had één foto per machine. Solis levert er vier
 * tot veertien, en die horen op de pagina te staan waar iemand een machine
 * uitzoekt. De vormgeving leunt op wat er al is — dezelfde kolom, dezelfde
 * kopstijl, en het venster van de configurator.
 */
.model-photos {
	padding: 4rem 0;
	background: var(--sand, #f5f3f0);
}

.model-photos h2 {
	margin: 0 0 2rem;
}

.model-photos-strip {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.model-photos-strip a[data-solis-foto] {
	display: block;
	overflow: hidden;
	background: #fff;
	border-radius: 2px;
	aspect-ratio: 4 / 3;
}

.model-photos-strip img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.25s ease;
}

.model-photos-strip a[data-solis-foto]:hover img,
.model-photos-strip a[data-solis-foto]:focus-visible img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {

	.model-photos-strip img {
		transition: none;
	}

	.model-photos-strip a[data-solis-foto]:hover img,
	.model-photos-strip a[data-solis-foto]:focus-visible img {
		transform: none;
	}
}

/*
 * Twee regels stonden hier die de afstand tot de zwevende sitekop per pagina
 * bijstelden: 130 pixels extra op de modelpagina en 170 op /de/ en /fr/, waar
 * de meldingsbalk de kop een regel hoger maakt. Ze hoorden bij een hero die
 * zijn inhoud onderaan uitlijnde, en die is er niet meer: iedere hero begint nu
 * op 190 pixels vanaf de bovenkant (zie solis.css), zodat de titel op elke
 * pagina op dezelfde hoogte staat. Die 190 houdt ook de hoogste kopbalk — 154
 * pixels met meldingsbalk — er ruim onder.
 */

/*
 * Een sluier bovenaan het kopbeeld van een pagina, nu de kop erover zweeft.
 *
 * Dezelfde ingreep als eerder bij de hero van de homepage en de modelpagina, om
 * dezelfde reden: de navigatie is wit, en op de dealerpagina staat rechtsboven
 * een lichte lucht. Het verloop van deze heroes komt van links en van onderen —
 * precies niet waar de kopbalk hangt.
 *
 * `.page-hero::after` staat in solis.css bewust op `none`; dit is de enige
 * plek waar dat wordt teruggedraaid, en alleen voor de bovenrand.
 */
:is(.page-hero, .information-hero)::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0 0 auto;
	height: 220px;
	background: linear-gradient(180deg, rgba(24, 24, 24, 0.88) 0%, rgba(24, 24, 24, 0.6) 45%, rgba(24, 24, 24, 0) 100%);
	pointer-events: none;
}

:is(.page-hero, .information-hero) > .shell {
	position: relative;
	z-index: 2;
}

/* Niets onder de 12 pixels.
 *
 * De mock-up zakt op tweeënvijftig plekken naar 9, 10 of 11 pixels: de
 * vermogenlabels in de modellenstrip, de vanafprijzen, de bandenkaarten, de
 * kleine letters bij de garantie en de voetnoot onder de S75. Die maten staan
 * niet in een media query — op een telefoon zijn ze even klein als op een
 * scherm, en 9 pixels leest nergens.
 *
 * Alles gaat naar minimaal 12. Eén uitzondering de andere kant op: het
 * vermogen op een tab van de modellencarrousel gaat naar 13. Dat is het enige
 * cijfer op die knop dat een bezoeker echt vergelijkt.
 *
 * Deze regels staan hier en niet in solis.css, omdat dat bestand byte voor byte
 * de goedgekeurde mock-up blijft. Wat het aan hoogte kost tegenover de mock-up
 * staat in de README onder "Waar de vormgeving bewust afwijkt".
 *
 * Waarom een vlakke selectorlijst genoeg is: wordpress.css laadt ná solis.css,
 * dus bij gelijke specificiteit wint deze regel — ook van een regel die daar in
 * een media query staat, want @media telt niet mee in de specificiteit. */
.series-specs article.world-spec small,
.dealer-badge,
.partner-category,
.warranty-condition-grid article > span,
.series-keyfacts span,
.series-offer span,
.series-offer small,
.s75-keyfacts span,
.s75-offer-inner > div:first-child > span,
.s75-offer-inner small,
.s75-footnote,
.s75-version-image > span,
.kh-answer span,
.kh-card-visual > span,
.model-tile-badge,
.model-tile-price span,
.actie-stamp span,
.model-price span,
.model-carousel-tabs button,
.dealer-map-tip span,
.contact-route-grid article > span,
.contact-action-list small,
.about-pillar-grid article > span,
.dealer-place,
.tire-section-heading .eyebrow,
.tire-card-image > span,
.tire-grid small,
.tractor-tire-title span,
.tire-advice div span,
.series-specs span,
.series-source-note > span,
.s75-keyfacts small,
.s75-stage-label,
.s75-feature-image figcaption,
.s75-loader-points span,
.s75-transmission-choice span,
.s75-lead-promise strong,
.config-product > span,
.config-total small,
.kh-specs dt,
.kh-price span,
.keuzehulp-help-points li > span,
.demo-followup-flag,
.kh-step-option em,
.kh-answers-label,
.kh-answer b,
.compare-table tbody th small,
.acties-table thead th,
.acties-save small,
.footer-note small,
.model-tile-price small {
	font-size: 12px;
}

/* Het vermogen op de tab van de carrousel: 13 in plaats van 9. */
.model-carousel-tabs .tab-power {
	font-size: 13px;
}

/* De contactkaart is de kaartuitsnede van de importeur (zie Content::importer_map)
   in plaats van de ingesloten Google-kaart uit de mock-up. `.dealer-map-render`
   vult zijn vlak absoluut, dus het kader moet het referentievlak zijn; de hoogte
   van 270px komt uit solis.css. */
.contact-map {
	position: relative;
}