/* Energie Morgen — de merklaag over de vormgeving van de funnel.
 *
 * Staat als LAATSTE in de cascade, na alle andere bladen. Alles wat vorm is (maten,
 * verhoudingen, rasters, kleuren) blijft uit de gemeten bladen komen; hier staat alleen
 * wat het merk bepaalt.
 *
 * De huisletter is TT Commons Pro — dezelfde als op de rest van energiemorgen.nl. De
 * referentie gebruikt een commercieel gelicentieerde letter die wij niet meesturen; zonder
 * deze laag viel de funnel terug op Arial en klopte de typografie nergens.
 */

@font-face { font-family: "TT Commons Pro"; src: url("/fonts/TTCommonsPro-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "TT Commons Pro"; src: url("/fonts/TTCommonsPro-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "TT Commons Pro"; src: url("/fonts/TTCommonsPro-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "TT Commons Pro"; src: url("/fonts/TTCommonsPro-DemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "TT Commons Pro"; src: url("/fonts/TTCommonsPro-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "TT Commons Pro"; src: url("/fonts/TTCommonsPro-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --font-family-body: "TT Commons Pro", Helvetica, Arial, sans-serif;
  --font-family-primary: "TT Commons Pro", Helvetica, Arial, sans-serif;
  --font-family-heading: "TT Commons Pro", Helvetica, Arial, sans-serif;
  --font-family-text: "TT Commons Pro", Helvetica, Arial, sans-serif;
}

/* De styled-components-regels zetten de familie hard in hun eigen regel, niet via de
 * variabele hierboven. Eén brede regel is daarom de enige manier om ze allemaal te
 * bereiken; hij raakt alleen de letterkeuze, niets anders. */
*,
*::before,
*::after {
  font-family: "TT Commons Pro", Helvetica, Arial, sans-serif !important;
}

/* ── Het accent van de funnel ─────────────────────────────────────────────────────────
 *
 * NIET `--color-primary`. Die staat in dit thema op #00a56f — groen — en dat is de kleur van
 * de rest van de site, niet van de funnel. De funnel accentueert in koraal; dat was te zien
 * doordat de gekozen dag in de kalender groen oplichtte tussen koraalrode koppen.
 *
 * De waarde is gemeten aan de accent-span in een vraagkop (`h3 span[class*="iEsyeg"]`,
 * rgb(251, 96, 88)). Verandert de referentie zijn accent, dan meldt
 * tools/screener/probes/accent.mjs dat.
 */
:root { --em-funnel-accent: rgb(251, 96, 88); }

/* ── Fase 2: het aanbod ────────────────────────────────────────────────────────────────
 *
 * Fase 1 leent zijn vormgeving volledig uit de vastlegging: elke klasse daar hoort bij een
 * regel die van de referentie komt. Voor fase 2 bestaat die vastlegging niet — het aanbod
 * staat achter de postcodestap, en daar is bewust niet voorbij gemeten.
 *
 * Eerst is geprobeerd de antwoordkaart van fase 1 te hergebruiken. Dat hield geen stand: die
 * kaart is gebouwd rond een illustratie, met een prijs die er absoluut overheen zweeft. Zonder
 * illustratie schoof de merknaam onder het prijsplaatje en bleven de kaarten leeg en te hoog.
 *
 * Deze regels staan er dus bij, en alleen voor het aanbod. Ze gebruiken dezelfde kleuren,
 * radii en letters als de rest — maar ze zijn ontworpen, niet gemeten, en dat verschil hoort
 * zichtbaar te blijven.
 */
[data-aanbod] {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  height: 100%;
  text-align: left;
}
[data-aanbod-merk] {
  font-weight: 700;
}
[data-aanbod-prijs] {
  font-weight: 700;
}
[data-aanbod-uitleg] {
  color: color-mix(in srgb, currentColor 70%, transparent);
}
[data-aanbod-pakket] {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}
[data-aanbod-knoppen] {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: auto;
}
/* De gekozen kaart. Alleen een rand: een vulkleur zou botsen met de kaartstijl van fase 1. */
[data-gekozen="true"] {
  outline: 2px solid var(--em-funnel-accent);
  outline-offset: -1px;
}

/* ── Fase 3 en 4 ───────────────────────────────────────────────────────────────────────
 *
 * Net als het aanbod: niet gemeten. De referentie zet deze twee schermen achter een echte
 * aanvraag in zijn eigen systeem, en die grens is niet overgestoken — er is dus geen
 * vastlegging om tegen te vergelijken.
 *
 * De invoervelden zelf zijn wél gemeten (die komen van de vraag over de stroomprijs, met
 * dezelfde Carbon-klassen). Wat hier staat is alleen de indeling eromheen.
 */
/* Eén veld per rij, net als in het gemeten formulier van de referentie. Twee kolommen zijn
 * geprobeerd: in de smalle kolom waar dit formulier in staat werden de velden daar te krap,
 * en buiten die kolom liepen ze over de volle paginabreedte en staken ze buiten de kaart. */

[data-veldfout] {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: #b4271f;
}
[data-adres] { font-weight: 600; }

/* ── De kalender ───────────────────────────────────────────────────────────────────────
 *
 * Maten van de referentie: een grijs blok om de hele maand, dagvakken van 69 × 86 px met
 * een rand van 0,667 px in #9DB0C5 en een radius van 8 px, en de maandknoppen als twee
 * ronde knopjes rechtsonder. Onze eerste versie had kleine vierkante vakjes zonder blok en
 * pijltjes naast de maandnaam — herkenbaar als kalender, maar niet als de hunne.
 */
[data-kalender] {
  position: relative;
  /* Het grijze blok staat bij hen ÍN de witte kaart met een marge eromheen, niet van rand
     tot rand. Zonder die marge loopt het grijs tegen de kaartrand aan en lijkt de kaart in
     tweeën gedeeld. */
  margin: 0 1.5rem 1.5rem;
  padding: 1.5rem 1.25rem 4.5rem;
  background: var(--color-base-200, #f0f3f6);
  border-radius: 8px;
}
[data-kalender-kop] { display: flex; justify-content: center; margin-bottom: 1.25rem; }
/* Geen `capitalize`: maandnamen zijn in het Nederlands kleine letters. */
[data-kalender-kop] h5 { margin: 0; font-size: 1.25rem; font-weight: 700; }
[data-kalender-raster] {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.5rem;
}
[data-kalender-weekdag] {
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-bottom: 0.5rem;
  color: color-mix(in srgb, var(--color-base-content, #2d3d4d) 65%, transparent);
}
[data-kalender-dag] {
  position: relative;
  min-height: 5.375rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.5rem 0.625rem;
  border: 0.667px solid #9db0c5;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  color: var(--color-base-content, #2d3d4d);
  overflow: hidden;
}
[data-kalender-dag]:hover:not(:disabled) { border-color: var(--color-primary, #00a56f); }
/* Niet-beschikbare dagen: gevuld met hetzelfde grijs als het blok, zoals bij hen. Weglaten
   zou de kalender laten verspringen en de indruk geven dat er dagen ontbreken. */
[data-kalender-dag]:disabled {
  background: #e6e9ec;
  border-color: #dfe4ea;
  color: color-mix(in srgb, var(--color-base-content, #2d3d4d) 55%, transparent);
  cursor: not-allowed;
}
/* De vroegste dag waarop we kunnen: groen opschrift met een groene balk onderaan het vak. */
[data-kalender-dag][data-vroegste="ja"] { color: var(--color-primary, #00a56f); }
[data-kalender-dag][data-vroegste="ja"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: var(--color-primary, #00a56f);
}
[data-kalender-dag][aria-pressed="true"] {
  background: var(--color-primary, #00a56f);
  border-color: var(--color-primary, #00a56f);
  color: #fff;
  font-weight: 600;
}
[data-kalender-dag][aria-pressed="true"]::after { display: none; }
[data-kalender-leeg] { min-height: 5.375rem; }

[data-kalender-maandknoppen] {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  display: flex;
  gap: 0.75rem;
}
[data-maandknop] {
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #9db0c5; border-radius: 50%;
  background: #fff; cursor: pointer;
  color: var(--color-base-content, #2d3d4d);
}
[data-maandknop]:disabled { opacity: 0.4; cursor: not-allowed; }
[data-maandknop]:hover:not(:disabled) { border-color: var(--color-base-content, #2d3d4d); }

/* Op een telefoon passen zeven vakken van 69 px niet naast elkaar; daar worden ze lager en
   staan de maandknoppen midden onder het raster. */
@media (max-width: 767px) {
  [data-kalender] { padding: 1.25rem 0.75rem 4.5rem; }
  [data-kalender-raster] { gap: 0.25rem; }
  [data-kalender-dag], [data-kalender-leeg] { min-height: 3rem; }
  [data-kalender-dag] { padding: 0.375rem; justify-content: center; font-size: 0.9375rem; }
  [data-kalender-maandknoppen] { left: 0; right: 0; justify-content: center; }
}

/* ── Ochtend of middag ─────────────────────────────────────────────────────────────── */
[data-dagdelen] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  max-width: 26rem;
  margin: 0 auto 1.5rem;
}
[data-dagdelen] h5 { flex: 1 0 100%; margin: 0; }
[data-dagdeel] {
  flex: 1 1 10rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 0.5rem;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
[data-dagdeel][aria-pressed="true"] {
  border-color: var(--em-funnel-accent);
  outline: 1px solid var(--em-funnel-accent);
}
[data-dagdeel-label] { font-weight: 700; }
[data-dagdeel-tijd] { font-size: 0.8125rem; opacity: 0.7; }

[data-fout] { color: #b4271f; font-weight: 600; }

/* ── De knoppenrij van fase 2, 3 en 4 ───────────────────────────────────────────────────
 *
 * De primaire actie stond op `eFndZC`, de TEKSTLINK-variant van hun knopcomponent:
 * transparant, onderstreept, zonder padding en zonder hoogte. Zo zag "Kies dit merk",
 * "Verder naar de datum" en "Aanvraag versturen" eruit als een zin in plaats van als een
 * knop, terwijl fase 1 en de hero van /v2 de gevulde groene knop (`gtHqAO`) gebruiken.
 * Die staat nu overal op de primaire actie; `eFndZC` blijft voor Terug, Meer weten en
 * Overslaan.
 *
 * Hun `LinksContainer` is een kolom zonder tussenruimte — met een echte knop erin plakken
 * knop en link tegen elkaar. Vandaar deze twee regels, en verder niets.
 */
/* Alleen in fase 2 en 3 — NIET in fase 1. Die schermen zijn pixel-voor-pixel tegen de
   referentie gemeten (`tools/screener/poort.mjs`), en een extra tussenruimte in hun
   knoppenrij zou die meting laten afwijken zonder dat er iets beter van wordt. */
#aanbod [class*="LinksContainer"],
#checkout [class*="LinksContainer"] {
  gap: 0.75rem;
  align-items: center;
}

/* ── De checkout: fase 3 als één pagina met secties ──────────────────────────────────────
 *
 * Gemeten bij de referentie op 29-08-2026 (`tools/screener/probes/doorloop-batterij.mjs`):
 * hun `/checkout/order-summary` is GEEN reeks losse schermen maar één pagina met secties
 * onder elkaar — overzicht, datum, monteur, adres, betaling — waarvan er telkens één open
 * staat. Een afgeronde sectie wordt één regel met "Edit"; rechts staat een orderoverzicht
 * dat meescrolt. Die opbouw staat hieronder; de maten zijn van ons, want hun kaartklassen
 * horen bij een pagina met een satellietkaart eronder die wij niet hebben.
 */
[data-checkout] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  text-align: left;
}
@media (min-width: 66rem) {
  [data-checkout] { grid-template-columns: minmax(0, 1fr) 20rem; gap: 2rem; }
}
[data-checkout-secties] { display: flex; flex-direction: column; gap: 1rem; }
[data-checkout-secties] > h3 { text-align: center; margin-bottom: 0.5rem; }

[data-checkout-sectie] {
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  background: #fff;
  padding: 1.25rem 1.5rem;
}
[data-checkout-sectie][data-stand="wacht"] { opacity: 0.55; }
[data-checkout-sectie][data-stand="open"] { box-shadow: 0 2px 12px rgba(0, 27, 39, 0.08); }
[data-sectie-kop] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
[data-sectie-kop] h5 { margin: 0; }
[data-sectie-samenvatting] {
  margin: 0.35rem 0 0;
  font-family: "TT Commons Pro", Helvetica, Arial, sans-serif;
  color: rgb(45, 61, 77);
}
[data-sectie-inhoud] { margin-top: 1rem; }
[data-sectie-knoppen] { margin-top: 1.25rem; display: flex; flex-direction: column; align-items: stretch; }
/* De doorknop van de referentie loopt over de volle breedte van de sectie (gemeten: 70px
   hoog, volle kaartbreedte). Daarom hier geen inline-knop maar een blok. */
[data-sectie-knoppen] .styles__DefaultButton-sc-51d82680-0 { width: 100%; }

[data-aanbod-regel] { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
[data-aanbod-naam] { font-weight: 700; font-size: 1.125rem; }
[data-aanbod-bedrag] { font-weight: 700; font-size: 1.125rem; color: var(--em-funnel-accent); }
[data-inbegrepen] { margin: 0.75rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
[data-inbegrepen] li { position: relative; padding-left: 1.4rem; }
/* Het vinkje van hun eigen lijstjes: een haakje, geen bolletje. */
[data-inbegrepen] li::before {
  content: "";
  position: absolute; left: 0; top: 0.45em;
  width: 0.7rem; height: 0.35rem;
  border-left: 2px solid var(--color-primary, #00a56f);
  border-bottom: 2px solid var(--color-primary, #00a56f);
  transform: rotate(-45deg);
}

[data-checkout-overzicht] { position: sticky; top: 5.5rem; }
[data-overzicht-kaart] {
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  background: #fff;
  padding: 1.25rem;
}
[data-overzicht-titel] { margin: 0; font-size: 0.875rem; color: rgb(103, 115, 127); }
[data-overzicht-bedrag] { margin: 0.15rem 0 0.9rem; font-size: 1.5rem; font-weight: 700; }
[data-overzicht-lijst] { margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
[data-overzicht-lijst] > div { display: flex; flex-direction: column; }
[data-overzicht-lijst] dt { font-size: 0.8125rem; color: rgb(103, 115, 127); }
[data-overzicht-lijst] dd { margin: 0; font-weight: 600; }
[data-overzicht-voet] {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  color: rgb(103, 115, 127);
  border-top: 1px solid #e0e0e0;
  padding-top: 0.75rem;
}
[data-adresregel] { margin-top: 0.5rem; }

/* De secties lezen van links naar rechts, niet gecentreerd: hun checkout doet dat ook, en
   een formulier met gecentreerde toelichtingen leest als een poster. De koppen van de funnel
   zelf blijven wél gecentreerd — die staan buiten de secties. */
[data-checkout-sectie] p,
[data-checkout-sectie] label,
[data-checkout-sectie] [data-adres] { text-align: left; }
[data-checkout-sectie] [data-sectie-inhoud] > p:first-child { margin-top: 0; }
/* De invoervelden vullen de sectie; de smalle kolom van de referentie hoort bij een
   schermvullende vraag, niet bij een sectie in een kaart. */
[data-checkout-sectie] .cds--col-lg-6,
[data-checkout-sectie] [class*="cds--offset-lg"] { max-width: 100%; flex: 0 0 100%; margin-left: 0; padding: 0; }
[data-checkout-sectie] .cds--grid { padding: 0; margin: 0; max-width: none; }
[data-checkout-sectie] .cds--row { margin: 0; }
/* De toelichting boven de velden komt uit een component dat op een schermvullende vraag
   gecentreerd staat met een eigen maximumbreedte. In een sectie ziet dat eruit als een
   ingesprongen alinea naast de velden; hier loopt hij gewoon mee. */
[data-checkout-sectie] [data-sectie-inhoud] > p { margin: 0 0 1rem; max-width: none; width: 100%; }

/* ── Fase 2 in de indeling van hun /your-options ─────────────────────────────────────────
 *
 * Gemeten op 29-08-2026: hun aanbod is GEEN rij van drie smalle kaarten maar een lijst van
 * brede kaarten onder elkaar, met links de naam en wat erbij zit, en rechts een prijsvak met
 * de gevulde keuzeknop eronder. Dat leest van boven naar beneden en laat ruimte voor de
 * regels die er echt toe doen.
 */
/* De kaartrij van fase 1 is gemaakt voor smalle antwoordkaarten naast elkaar: hun wikkel
   staat op een vaste 20rem breed en minimaal 21,25rem hoog, en de rij zelf op wrap+center.
   Voor een lijst van brede aanbodkaarten moet dat alle drie los. */
[data-aanbod-lijst] { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 1rem; width: 100%; margin: 0; }
[data-aanbod-lijst] > * { width: 100%; max-width: none; min-height: 0; margin: 0; }
[data-aanbod-lijst] > * > [data-testid^="aanbod--"] { width: 100%; height: auto; }
[data-aanbod] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.5rem;
  width: 100%;
  text-align: left;
}
@media (min-width: 60rem) {
  [data-aanbod] { grid-template-columns: minmax(0, 1fr) 16rem; align-items: start; }
}
[data-aanbod-tekst] { display: flex; flex-direction: column; gap: 0.5rem; }
[data-aanbod-prijsvak] {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-top: 1px solid #e0e0e0;
  padding-top: 1rem;
}
@media (min-width: 60rem) {
  [data-aanbod-prijsvak] { border-top: 0; border-left: 1px solid #e0e0e0; padding: 0 0 0 1.5rem; }
}
[data-aanbod-prijslabel] { font-size: 0.8125rem; color: rgb(103, 115, 127); }
[data-aanbod-pakket] li { padding-left: 1.4rem; position: relative; }
[data-aanbod-pakket] li::before {
  content: "";
  position: absolute; left: 0; top: 0.45em;
  width: 0.7rem; height: 0.35rem;
  border-left: 2px solid var(--color-primary, #00a56f);
  border-bottom: 2px solid var(--color-primary, #00a56f);
  transform: rotate(-45deg);
}
[data-aanbod-knoppen] { flex-direction: column; align-items: stretch; margin-top: 0.75rem; }
[data-aanbod-knoppen] .styles__DefaultButton-sc-51d82680-0 { width: 100%; }
/* Alles in een aanbodkaart leest van links naar rechts; de gecentreerde uitleg kwam van de
   vraagkop-opmaak eromheen. */
[data-aanbod] span, [data-aanbod] li, [data-aanbod] p { text-align: left; }

/* ── Het aanbevelingsscherm ─────────────────────────────────────────────────────────────
 *
 * De referentie zet tussen de vragen en het aanbod één scherm met de geadviseerde maat:
 * eerst wat bij je woning past, dan pas wat het kost. Deze regels zijn van ons — het scherm
 * bestaat bij hen wel, maar valt buiten de vastlegging (het staat achter de postcodestap).
 */
[data-aanbeveling] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin: 1.5rem auto 0;
  padding: 1.5rem;
  max-width: 26rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  background: #fff;
}
[data-aanbeveling-maat] {
  font-family: "TT Commons Pro", Helvetica, Arial, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary, #00a56f);
}
[data-aanbeveling-bij] { font-size: 0.9375rem; color: rgb(103, 115, 127); text-align: center; }
[data-aanbeveling-uitleg] { margin-top: 0.35rem; }
[data-aanname] { font-size: 0.875rem; }

/* ── Fase 2: de resultatenlijst met specificaties ───────────────────────────────────────
 *
 * De vorm komt uit de specificatie van 786 (doorloop 23-08-2026): brede kaarten onder
 * elkaar, links de naam met de specificaties, rechts de besparing, het bedrag en de
 * keuzeknop. Wat er staat komt uit onze eigen bronnen; de opmaak is van ons, want dit
 * scherm staat achter de postcodestap en is niet pixelgemeten.
 */
[data-aanbod-balk] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin: 0.5rem 0 1.25rem;
}
[data-aanbod-balk] button { text-decoration: none; }
[data-aanbod-uitleg] { display: inline; }

[data-aanbod-lijst] > article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  background: #fff;
  text-align: left;
  position: relative;
}
@media (min-width: 60rem) {
  [data-aanbod-lijst] > article { grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; }
}
[data-aanbod-lijst] > article[data-gekozen="true"] {
  outline: 2px solid var(--em-funnel-accent);
  outline-offset: -1px;
}
[data-product-badge] {
  position: absolute;
  top: -0.6rem;
  left: 1.5rem;
  background: var(--em-funnel-accent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 0.25rem;
}
[data-product-tekst] { display: flex; flex-direction: column; gap: 0.5rem; }
[data-product-naam] { margin: 0; }
[data-product-tagline] { margin: 0; color: rgb(103, 115, 127); }
[data-product-specs] { margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.35rem; }
[data-product-specs] > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid #f0f0f0; padding-bottom: 0.35rem; }
[data-product-specs] dt { color: rgb(103, 115, 127); font-size: 0.9375rem; }
[data-product-specs] dd { margin: 0; font-weight: 600; text-align: right; }
[data-product-inbegrepen] { align-self: flex-start; }

[data-product-prijsvak] {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border-top: 1px solid #e0e0e0;
  padding-top: 1rem;
}
@media (min-width: 60rem) {
  [data-product-prijsvak] { border-top: 0; border-left: 1px solid #e0e0e0; padding: 0 0 0 1.5rem; }
}
[data-product-besparinglabel], [data-product-prijslabel] { font-size: 0.8125rem; color: rgb(103, 115, 127); }
[data-product-besparing] { font-size: 1.25rem; font-weight: 700; color: var(--color-primary, #00a56f); }
[data-product-prijslabel] { margin-top: 0.6rem; }
[data-product-prijs] { font-size: 1.25rem; font-weight: 700; color: var(--em-funnel-accent); }
[data-product-knoppen] { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.9rem; }
[data-product-knoppen] .styles__DefaultButton-sc-51d82680-0 { width: 100%; }

/* ── De sorteer- en filterpanelen ──────────────────────────────────────────────────── */
[data-paneel-keuzes] { display: flex; flex-direction: column; gap: 0.5rem; text-align: left; }
[data-paneel-kopje] { margin: 0.75rem 0 0; font-weight: 700; }
[data-keuze] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d1d1d1;
  border-radius: 0.25rem;
  background: #fff;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
[data-keuze][aria-pressed="true"] {
  border-color: var(--em-funnel-accent);
  box-shadow: inset 0 0 0 1px var(--em-funnel-accent);
  font-weight: 700;
}

/* ── Het bodemblad ──────────────────────────────────────────────────────────────────────
 *
 * Dezelfde lade als het zijpaneel, alleen van onderen. De referentie gebruikt die vorm voor
 * de uitleg bij een antwoord en voor "laat een voorbeeld zien"; op een telefoon is een blad
 * van onderen te bedienen met de duim, een lade van rechts niet.
 *
 * Alleen opmaak: geen extra element, geen gewijzigde klassenaam, dus de meting van fase 1
 * blijft geldig.
 */
[data-blad="onder"] .styles__SideDrawerInner-sc-aaf027f0-2 {
  align-items: flex-end;
  justify-content: center;
}
[data-blad="onder"] .styles__SideDrawerContent-sc-aaf027f0-3 {
  flex: 0 0 auto;
  width: 100%;
  max-width: 46rem;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 0.75rem 0.75rem 0 0;
  /* DICHT staat het blad buiten beeld. Zonder deze regel bleef het op zijn plek staan: een
     wit vlak van 736 x 960 px midden op het scherm, dat alles eronder onzichtbaar maakte —
     op 1440 verdween daardoor alles rechts van x = 345 (gemeten 29-08-2026 op het aanbod en
     de checkout). De lade van rechts heeft dat probleem niet: die staat dicht al buiten
     beeld door de translateX uit hun eigen stylesheet, en die mag ik dus niet overschrijven. */
  transform: translateY(100%);
  visibility: hidden;
}
[data-blad="onder"][data-open="ja"] .styles__SideDrawerContent-sc-aaf027f0-3 {
  transform: translateY(0);
  visibility: visible;
}

/* Het informatie-knopje op de MOBIELE kaart opent het bodemblad; op brede schermen blijft
   het decoratie, want daar staat de uitleg al onder de kaart (zie Kaart.tsx). */
.styles__MobileContainer-sc-ad0d9cef-2 { cursor: pointer; }

/* Een DICHTE lade mag geen klikken opvangen.
 *
 * Gemeten op 29-08-2026: de dichte lade staat wel degelijk over de pagina heen —
 * `document.elementFromPoint` op een antwoordkaart gaf de `SideDrawerContent` van de dichte
 * lade terug, niet de kaart. Bij de referentie viel dat niet op omdat het informatie-knopje
 * daar toch al niet aanklikbaar was; bij ons opent het knopje nu een venster, en dan blijkt
 * de dichte lade in de weg te liggen. Met meerdere laden in de boom (hulp, advies, uitleg
 * bij een antwoord) wordt dat alleen maar erger.
 *
 * `pointer-events` telt niet mee in de 39 stijleigenschappen van de pixelvergelijking. */
[data-open="nee"] { pointer-events: none; }
/* De inhoud van de lade zet `pointer-events: all` in hun eigen stylesheet, en dat wint van
   overerving — vandaar deze twee expliciet. */
[data-open="nee"] .styles__SideDrawerContent-sc-aaf027f0-3,
[data-open="nee"] .styles__SideDrawerBackground-sc-aaf027f0-1 { pointer-events: none; }
[data-open="ja"] { pointer-events: auto; }

/* Het "Select"-lint onderaan een antwoordkaart is decoratie: het licht op bij zweven. Het
   ligt wél over de rechteronderhoek, en dus over het informatie-knopje. Bij de referentie
   viel dat niet op (het knopje was daar niet aanklikbaar); bij ons ving het lint de klik. */
.styles__FlairText-sc-143ea173-5 { pointer-events: none; }

/* ── Het prijsoverzicht in de checkout ─────────────────────────────────────────────────
 *
 * Bij de referentie staat er één regel met een bedrag en veertien met "Included". Bij ons
 * hetzelfde patroon, met wat wij echt leveren.
 */
[data-prijsregels] { margin: 0.75rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
[data-prijsregels] li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f0f0f0;
}
[data-prijsregels] li:last-child { border-bottom: 0; }
[data-regel-waarde] { font-weight: 600; color: var(--color-primary, #00a56f); white-space: nowrap; font-size: 0.875rem; }

/* ── De grijze achtergrond van de funnel ───────────────────────────────────────────────
 *
 * Hun pagina staat op #f0f3f6 met witte kaarten en een schaduw eronder. Bij ons was alles
 * wit, en daarmee viel het onderscheid tussen kaart en pagina volledig weg — de kaarten
 * hadden hun schaduw wél, maar wit op wit zie je die niet.
 *
 * De oorzaak zat in de opbouw van `styled.css`, niet in een component. Dat blad is de
 * VERENIGING van alle vastleggingen, en hun globale stijl staat er daardoor twee keer in:
 *
 *     html body { background-color: rgb(240, 243, 246); ... }   ← uit de aanbodvastlegging
 *     html body { background-color: rgb(255, 255, 255); ... }   ← uit de checkoutvastlegging
 *
 * Bij hen zijn dat twee momenten (op de checkout ligt de satellietfoto eroverheen en zetten
 * ze het doek wit); bij ons staan ze in één blad, en dan wint de laatste. Eén regel maakte
 * zo de hele funnel wit. Hier zetten we hem terug; de satellietfoto is een eigen element en
 * ligt er gewoon overheen waar hij hoort.
 */
html body { background-color: var(--color-base-200, #f0f3f6); }

/* De uitklapregel in het mandje: teken en tekst naast elkaar, met dezelfde tussenruimte als
   de referentie. Hun knopwikkel is een flexrij zonder gat; het teken zou anders tegen de
   tekst aan plakken. */
[data-toggle-inbegrepen] .styles__ButtonTextContainer-sc-51d82680-1 { display: inline-flex; align-items: center; gap: 0.5rem; }
[data-inbegrepen-toggle] { display: flex; justify-content: center; padding: 0.75rem 0 0.25rem; }
/* Bij hen scheidt een doorgetrokken lijn de uitklapregel van de "wat zit erbij"-link
   eronder; de regels erboven staan met een stippellijn uit elkaar. */
[data-inbegrepen-toggle] + .boobFl { border-top: 1px solid #cfd7e0; padding-top: 0.75rem; }

/* ── Het aanbevelingsvenster ───────────────────────────────────────────────────────────
 *
 * De maten komen van hun venster: een kaart van 900 px in twee helften, links wit met de
 * tekst en rechts lichtgrijs met de foto. Achter de kaart ligt het aanbod, vervaagd en
 * gedimd — dat is wat het een LAAG maakt in plaats van weer een tussenscherm.
 */
[data-aanbeveling-venster] { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
[data-aanbeveling-doek] { position: absolute; inset: 0; background: rgba(45, 61, 77, 0.32); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
[data-aanbeveling-kaart] {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(900px, 100%);
  max-height: calc(100vh - 3rem);
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
  box-shadow: rgba(45, 61, 77, 0.24) 0 24px 60px 0;
}
[data-aanbeveling-tekst] { padding: 2.5rem 2rem; display: flex; flex-direction: column; overflow-y: auto; }
[data-aanbeveling-kop] {
  margin: 0 0 1.5rem;
  font-family: var(--font-family-primary), var(--font-family-body), sans-serif;
  font-size: 1.5rem; line-height: 1.25; font-weight: 700; color: var(--color-base-content, #2d3d4d);
}
[data-aanbeveling-maatvak] {
  display: flex; flex-direction: column; align-items: center; gap: 0.125rem;
  padding: 1.25rem 1rem; margin-bottom: 1.5rem;
  background: var(--color-base-200, #f0f3f6); border-radius: 4px;
}
[data-aanbeveling-maat] { font-size: 2rem; font-weight: 700; line-height: 1.15; color: var(--color-base-content, #2d3d4d); }
[data-aanbeveling-bij] { font-size: 1rem; color: var(--color-base-content, #2d3d4d); }
[data-aanbeveling-uitleg-tekst], [data-aanbeveling-aanname] { margin: 0 0 1rem; font-size: 1rem; line-height: 1.5; color: var(--color-base-content, #2d3d4d); }
[data-aanbeveling-aanname] { opacity: 0.75; font-size: 0.9375rem; }
[data-aanbeveling-knop] {
  margin-top: auto; width: 100%; padding: 0.875rem 1rem; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--color-primary, #00a56f); color: #fff; font-size: 1rem; font-weight: 500;
  font-family: var(--font-family-primary), var(--font-family-body), sans-serif;
}
[data-aanbeveling-knop]:hover { filter: brightness(0.95); }
[data-aanbeveling-uitleg] {
  margin-top: 0.875rem; background: none; border: 0; padding: 0; cursor: pointer; align-self: center;
  color: var(--color-secondary, #fb6058); text-decoration: underline; font-size: 0.9375rem;
}
[data-aanbeveling-beeld] { display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
[data-aanbeveling-beeld] img { max-width: 100%; max-height: 26rem; object-fit: contain; }

/* Op een telefoon past de tweede helft er niet naast; daar staat de foto bovenaan, precies
   zoals hun venster op mobiel doet. */
@media (max-width: 767px) {
  [data-aanbeveling-kaart] { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  [data-aanbeveling-beeld] { order: -1; padding: 1rem; }
  [data-aanbeveling-beeld] img { max-height: 11rem; }
  [data-aanbeveling-tekst] { padding: 1.5rem 1.25rem 1.75rem; }
  [data-aanbeveling-kop] { font-size: 1.25rem; }
}

/* ── De laadring ───────────────────────────────────────────────────────────────────────
 *
 * Eén vorm voor de hele funnel: een ring die ronddraait, standaard in de huiskleur
 * (koraal) en in het wit binnen een gevulde knop. Tot 31-08-2026 gebeurde er bij het
 * wachten helemaal niets zichtbaars — je klikte, en het scherm bleef staan tot het antwoord
 * binnen was.
 *
 * `currentColor` doet het werk: de ring erft de kleur van de tekst ernaast, dus in een
 * groene knop met witte letters is hij vanzelf wit.
 */
[data-ring] {
  display: inline-block;
  width: 1.125em;
  height: 1.125em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: em-ring 0.7s linear infinite;
  vertical-align: -0.2em;
}
[data-ring="koraal"] { color: var(--color-secondary, #fb6058); }
[data-ring="groot"] { width: 2.25rem; height: 2.25rem; border-width: 3px; }
@keyframes em-ring { to { transform: rotate(360deg); } }
/* Wie liever geen beweging ziet, krijgt een rustige puls in plaats van een draaiing. */
@media (prefers-reduced-motion: reduce) {
  [data-ring] { animation: em-puls 1.2s ease-in-out infinite; }
  @keyframes em-puls { 50% { opacity: 0.35; } }
}

/* Een knop die aan het laden is: ring en tekst naast elkaar, en niet meer aanklikbaar. */
[data-laadt="ja"] .styles__ButtonTextContainer-sc-51d82680-1,
[data-laadt="ja"] > span { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; }
[data-laadt="ja"] { cursor: progress; }

/* Het scherm dat over de funnel valt zolang er iets onderweg is. */
[data-laadscherm] {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem;
  background: rgba(240, 243, 246, 0.72);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
[data-laadscherm] p { margin: 0; color: var(--color-base-content, #2d3d4d); font-size: 1rem; }

/* ── Het open- en dichtvouwen van een checkoutsectie ───────────────────────────────────
 *
 * Eén element met een gemeten hoogte, net als hun `AnimatedDiv`. De overloop staat dicht
 * zolang de hoogte in beweging is en gaat pas open als hij op `auto` staat — anders steekt
 * de maandkiezer van de kalender uit de kaart terwijl die nog groeit. Dat is de "kleine
 * vertraging voor de overloop"; hij zit in de component, niet in dit blad.
 */
[data-vouw] { overflow: hidden; transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1); }
[data-vouw="open"][style*="auto"] { overflow: visible; }
/* Dicht: geen muis- of toetsenbordbereik. `visibility` mag pas ná de beweging, anders
   verdwijnt de inhoud met een klap terwijl het vak nog dichtvouwt — vandaar de vertraging,
   die precies zo lang is als de overgang. */
[data-vouw="dicht"] { pointer-events: none; visibility: hidden; transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.32s; }
@media (prefers-reduced-motion: reduce) { [data-vouw] { transition: none; } }

/* ── De "Bekijk"/"Wijzig"-link op een dichte checkoutkaart ─────────────────────────────
 *
 * Die stond er wel, maar was onzichtbaar. Beide sjablonen — de open én de dichte sectie —
 * kwamen uit een vastlegging waarin de knop verborgen was, en droegen dus allebei de klasse
 * `ijkMSk` (`visibility: hidden`). Op hun eigen schermen staat er op elke dichte kaart
 * rechtsboven "View" of "Edit"; bij ons stond er niets en kon je alleen vooruit.
 *
 * De open sectie houdt hem verborgen (die knop is `disabled`), precies zoals bij hen.
 */
section [data-testid="edit-button"]:not([disabled]) { visibility: visible; }

/* De regel en het voorbehoud onder de kalender, in hun vorm: gecentreerde hulptekst en een
   blauw omlijnd blok met de kleine lettertjes over de afspraak. */
[data-kalender-hulp] { text-align: center; margin: 1rem 1.5rem 0; }
[data-kalender-hulp] a { color: var(--color-secondary, #fb6058); text-decoration: underline; }
[data-kalender-voorbehoud] {
  margin: 1.25rem 1.5rem 0;
  padding: 1rem 1.25rem;
  border: 1px solid #cfe3f5;
  border-radius: 8px;
  background: #f7fbff;
}
[data-kalender-voorbehoud] p { margin: 0; text-align: center; font-size: 0.9375rem; line-height: 1.5; color: var(--color-base-content, #2d3d4d); }

/* ── Het blad met onze erkenningen ─────────────────────────────────────────────────────
 *
 * Hun blad is in tweeën: links de tekst met drie punten, rechts hun keurmerk groot op een
 * lichtgrijs vlak. Dezelfde verdeling, met onze punten en ons merk.
 */
[data-keurmerken] { display: grid; grid-template-columns: 1fr 0.85fr; gap: 2rem; align-items: stretch; }
[data-keurmerken-intro] { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.5; }
[data-keurmerken-lijst] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
[data-keurmerken-lijst] li {
  display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: start;
  padding: 1rem 0; border-top: 1px dashed #cfd7e0;
}
[data-keurmerken-lijst] li:first-child { border-top: 0; padding-top: 0; }
[data-keurmerken-lijst] [data-keurmerk-tegel] {
  display: flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: 6px; padding: 0.375rem;
}
[data-keurmerk-tegel="donker"] { background: var(--color-base-content, #2d3d4d); }
[data-keurmerken-lijst] img { max-width: 100%; max-height: 100%; height: auto; object-fit: contain; }
[data-keurmerken-lijst] strong { display: block; margin-bottom: 0.25rem; font-size: 1rem; }
[data-keurmerken-lijst] p { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: color-mix(in srgb, var(--color-base-content, #2d3d4d) 82%, transparent); }
[data-keurmerken-slot] { margin: 1.25rem 0 0; font-size: 0.9375rem; }
[data-keurmerken-slot] a { color: var(--color-secondary, #fb6058); text-decoration: underline; }
[data-keurmerken-merk] {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
  background: var(--color-base-200, #f0f3f6); border-radius: 8px; padding: 2rem 1.5rem;
}
[data-keurmerken-merk] img { width: min(14rem, 70%); height: auto; }
[data-keurmerken-merk] span { font-weight: 600; color: var(--color-base-content, #2d3d4d); }
@media (max-width: 767px) {
  [data-keurmerken] { grid-template-columns: 1fr; gap: 1.25rem; }
  [data-keurmerken-merk] { order: -1; padding: 1.25rem; }
  [data-keurmerken-merk] img { width: 10rem; }
}

/* ── De voettekst van de funnel ────────────────────────────────────────────────────────
 *
 * Hun voet draagt links het woordmerk boven de juridische regel, daaronder de sociale
 * kanalen als ronde knoppen, en rechts de keurmerken. Onze voet had alleen tekst.
 */
[data-voet-merk] { height: 2rem; width: auto; }
[data-voet-kanalen] { display: flex; gap: 0.625rem; margin-top: 1.25rem; }
[data-voet-kanaal] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid #cfd7e0; color: var(--color-base-content, #2d3d4d);
}
[data-voet-kanaal]:hover { border-color: var(--color-base-content, #2d3d4d); }
[data-voet-keurmerken] { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
[data-voet-keurmerk] { height: 2.5rem; width: auto; object-fit: contain; }
/* Het InstallQ-merk is wit; op de witte voet krijgt het dezelfde donkere tegel als in het
   keurmerkenblad. */
[data-voet-keurmerken] img[alt="InstallQ"] {
  background: var(--color-base-content, #2d3d4d);
  border-radius: 4px; padding: 0.25rem 0.375rem; box-sizing: content-box;
}

/* ── De monteurkaarten met wisselaar ───────────────────────────────────────────────────
 *
 * Hun rij van drie kaarten van 284 px, met de actieve scherp (`gYDSEV`) en de andere
 * vervaagd (`fidosD`) — dat komt uit hun eigen stylesheet. Daaronder de pijlen, de
 * bolletjes en de beoordeling die bij de actieve kaart hoort.
 */
[data-monteurs] .keen-slider { justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
[data-monteurs] .styles__GenericInstallerCardWrapper-sc-35a07c45-0 { min-width: 284px; max-width: 284px; }
[data-monteurs] .styles__GenericInstallerCardItem-sc-35a07c45-1 {
  width: 100%; border: 0; padding: 0; cursor: pointer; position: relative;
}
[data-monteurs] .Image__Container-sc-314f4345-0 { position: absolute; inset: 0; display: block; }
[data-monteurs] .Image__Container-sc-314f4345-0 img {
  width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block;
}
[data-monteur-knoppen] { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
[data-monteur-pijl] {
  width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #cfd7e0; border-radius: 50%; background: #fff; cursor: pointer;
  color: var(--color-base-content, #2d3d4d);
}
[data-monteur-pijl]:disabled { opacity: 0.35; cursor: not-allowed; }
[data-monteur-bolletjes] { display: flex; gap: 0.5rem; }
[data-monteur-bolletjes] span { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #cfd7e0; }
[data-monteur-bolletjes] span[data-aan="ja"] { background: var(--color-primary, #00a56f); }
[data-monteur-oordeel] { margin: 1.25rem auto 0; max-width: 42rem; text-align: center; }
[data-monteur-oordeel] blockquote { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.55; color: var(--color-base-content, #2d3d4d); }
[data-monteur-oordeel] figcaption { font-size: 0.9375rem; color: color-mix(in srgb, var(--color-base-content, #2d3d4d) 70%, transparent); }
@media (max-width: 767px) {
  [data-monteurs] .styles__GenericInstallerCardWrapper-sc-35a07c45-0 { min-width: 0; max-width: none; flex: 1 1 0; }
  [data-monteurs] .kXArMX { height: 12rem; padding: 0 0.25rem; }
}

/* De tweede ingang naar het keurmerkblad, in de monteursectie. Dezelfde koraalonderstreepte
   tekstknop als hun links. */
[data-monteur-keurmerklink] { text-align: center; margin: 1rem 0 0; }
[data-monteur-keurmerklink] button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--color-secondary, #fb6058); text-decoration: underline;
}

/* ── Reviewbadge (configurator): dezelfde groene sterrenrij als de reviewbalk op de site ──
 * Niet klikbaar. Maten en kleuren gelijk aan `.em-reviewsbalk` in de v2-documenten; in de
 * funnel zonder de padding, want de wikkel van de referentie is 1,5 rem hoog. */
.em-reviewsbalk { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; height: 100%; padding: 0; font-family: var(--font-family-body); font-size: 14.5px; line-height: 1.2; color: #4b5b68; }
.em-reviewsbalk strong { color: #161616; font-size: 16px; font-weight: 700; }
.em-sterren { display: inline-flex; gap: 3px; vertical-align: middle; }
.em-ster { width: 22px; height: 22px; background: #00b67a; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; }
.em-ster svg { width: 16px; height: 16px; display: block; }

/* ── Beeld in de pakketkaarten ("Wat er nu in je pakket zit") ──────────────────────────
 * Het sjabloon zet `object-fit: fill` op deze beelden: het vak is 408x163 en het beeld werd
 * daar plat in getrokken. Een staande foto werd zo een streep — de batterijkaart leek een
 * leeg wit vlak. De bronnen zijn nu op precies deze verhouding gesneden; `cover` is het
 * vangnet voor de smallere vakken op tablet en mobiel. */
[data-testid="solar-proposal-featured-item"] img { object-fit: cover !important; }

/* ══════════════════════════════════════════════════════════════════════════════════════
 * De Meta-funnel (/thuisbatterij/meta-funnel)
 *
 * Alleen de blokken die de offertefunnel niet heeft: het advies, de tijdsloten, de
 * voetnoot onder het leadmoment en de teamfoto op het slotscherm. De vragen, de kaarten,
 * de kopbalk en de kalender komen uit dezelfde regels als hierboven; die staan hier dus
 * niet nog een keer.
 *
 * De accentkleur is de huiskleur: koraal (#fb6058). Als gradient loopt hij naar een
 * dieper koraal, niet naar amber — de oranje-naar-gele variant van de advertentiepagina's
 * is er op verzoek van 786 (10-09-2026) uit, omdat het geel naast de koraalkleurige kopbalk
 * als een tweede merk las. Eén kleur, met diepte.
 * ══════════════════════════════════════════════════════════════════════════════════════ */

:root { --em-meta-gradient: linear-gradient(135deg, #fb6058, #d8453c); }

/* ── Scherm 8: het advies ──────────────────────────────────────────────────────────── */

/*
 * De productfoto staat BOVEN de kaart, op de doorzichtige paginaachtergrond — niet erin.
 * Het is een uitgesneden product; in een wit vak ziet niemand dat het uitgesneden is, en
 * het duwde de kop en het getal een half scherm naar beneden. Erboven staat hij vrij en
 * begint de kaart meteen met waar het om gaat (786, 10-09-2026).
 *
 * `object-fit: contain`, want `cover` zou de batterij aan de randen afsnijden.
 */
[data-advies-beeld] {
  display: flex;
  justify-content: center;
  /*
   * De kopbalk zweeft vast bovenaan. De vraagvakken houden daar 120 px voor vrij via hun
   * eigen bovenmarge; dit beeld staat ERVOOR in de stroom en had die marge niet, dus de
   * bovenkant van de batterij verdween achter de balk. Gemeten 10-09-2026.
   */
  padding: 7.5rem 1.5rem 0;
}
/*
 * En de kaart eronder mag zijn eigen 120 px bovenmarge kwijt: die is er om de kopbalk te
 * ontwijken, en dat doet het beeld nu al. Anders staat er een half scherm lucht tussen de
 * batterij en het getal.
 */
[data-em-funnel="meta"] [data-advies-beeld] + div [class*="QuestionAndAnswerContainer"] {
  margin-top: 1.5rem;
}
[data-advies-beeld] img {
  width: auto;
  height: 17rem;
  max-width: 100%;
  object-fit: contain;
  /* Een uitgesneden product zonder vlak eronder zweeft; een zachte schaduw zet hem neer. */
  filter: drop-shadow(0 14px 22px rgba(29, 29, 29, 0.16));
}
@media (max-width: 47.9375rem) {
  [data-advies-beeld] img { height: 14.5rem; }
}

/* Het grote getal. De gradient zit op de tekst zelf; `background-clip` met een terugval op
   de volle koraalkleur, want een browser die dat niet kent zou anders een onzichtbaar
   getal tonen. */
[data-advies-getal] {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0.25rem;
}
/* Het grote getal in de volle huiskleur. Een gradient over vier tekens leest als een
   verloop dat halverwege van kleur verschiet; die hoort op een vlak, niet op cijfers. */
[data-advies-getal] strong {
  font-size: clamp(3rem, 14vw, 4.5rem);
  line-height: 1;
  font-weight: 700;
  color: var(--em-funnel-accent);
}
[data-advies-getal] span {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--em-funnel-accent);
}

/* De vier redenen. Links uitgelijnd binnen de smalle kolom: een opsomming die gecentreerd
   staat leest als een gedicht en niet als een lijst. */
[data-advies-usps] { text-align: left; margin: 0 0 1.5rem; }

/* ── Scherm 8: de tijdsloten ───────────────────────────────────────────────────────── */

[data-tijdsloten] {
  max-width: 26rem;
  margin: 0 auto 1.5rem;
}
[data-tijdsloten] h5 { margin: 0 0 0.75rem; }
[data-tijdslot-raster] {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}
[data-tijdslot] {
  padding: 0.6rem 0.25rem;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 0.5rem;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
[data-tijdslot]:hover { border-color: var(--em-funnel-accent); }
[data-tijdslot][aria-pressed="true"] {
  border-color: var(--em-funnel-accent);
  outline: 1px solid var(--em-funnel-accent);
  font-weight: 700;
}
@media (max-width: 47.9375rem) {
  [data-tijdslot-raster] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Scherm 7: de voetnoot onder de knop ───────────────────────────────────────────── */

[data-lead-voetnoot] { margin-top: 0.75rem; }
[data-lead-voetnoot] p { margin: 0; }

/* ── Het slotscherm: de teamfoto ───────────────────────────────────────────────────── */

[data-adviseur] { margin-top: 2rem; }
[data-adviseur] img {
  width: 100%;
  height: 12rem;
  object-fit: cover;
  border-radius: 0.75rem;
  display: block;
}
[data-adviseur] p { margin: 0.75rem 0 0; }

/* ── De accentkleur van de Meta-funnel ──────────────────────────────────────────────────
 *
 * Alleen binnen dit document (`data-em-funnel="meta"` op <html>, gezet door
 * src/screener/route.ts). De offertefunnel houdt zijn groene knop; die hoort bij hoe die
 * pagina nu draait en die verandering hoort niet in deze taak thuis.
 *
 * De opdracht voor deze funnel noemt de gradient van oranje naar geel als accent. Dat is de
 * gradient die de advertentiepagina's van de site al voeren, koraal naar amber, en die
 * hoort op de plek waar de bezoeker klikt: de primaire knop. De kopbalk blijft koraal —
 * een gradient in een balk van 44 pixels leest als een verloop dat iets kapot is. */

/* De knop van de referentie loopt over de volle breedte van de kaart. Met een vlakke kleur
   valt dat niet op; met een gradient wordt het een balk van 1361 pixels die het scherm in
   tweeën hakt. Vandaar dezelfde maximale breedte als de formulierkolom eronder. */
[data-em-funnel="meta"] .styles__DefaultButton-sc-51d82680-0.gtHqAO {
  max-width: 26rem;
  margin-inline: auto;
  border-radius: 0.5rem;
}
[data-em-funnel="meta"] .styles__DefaultButton-sc-51d82680-0.gtHqAO:not(:disabled) {
  background: var(--em-meta-gradient);
  border-color: transparent;
  color: #fff;
}
[data-em-funnel="meta"] .styles__DefaultButton-sc-51d82680-0.gtHqAO:not(:disabled):hover {
  filter: brightness(0.96);
}
/* De dag die je kunt kiezen en de dag die je gekozen hebt volgen dezelfde huiskleur als de
   rest van de funnel; groen zou hier het derde accent zijn. */
[data-em-funnel="meta"] { --color-primary: #fb6058; }

/* ── Het slotscherm: de persoonlijke kortingscode ───────────────────────────────────────
 * De gestreepte rand is dezelfde vorm als de coupon in de bevestigingsmail
 * (`src/lib/offerteConfirmationEmail.ts`), zodat de klant hem op het scherm en in zijn
 * inbox als hetzelfde ding herkent. Monospace met ruime letterafstand: een code die je
 * moet voorlezen aan de telefoon mag geen twijfel laten over welk teken je ziet. */
[data-actiecode] {
  margin: 0 0 2rem;
  text-align: center;
}
[data-actiecode-kop] {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--em-funnel-accent);
}
[data-actiecode-code] {
  margin: 0.75rem 0;
  padding: 0.9rem 0.75rem;
  border: 2px dashed var(--color-base-content, #2d3d4d);
  border-radius: 0.75rem;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(1.75rem, 9vw, 2.375rem);
  font-weight: 900;
  letter-spacing: 0.2em;
  /* De letterafstand zit ook achter het laatste teken; die duwt de code uit het midden. */
  text-indent: 0.2em;
  color: var(--color-base-content, #2d3d4d);
}

/* ── Scherm 8: wat we hebben ingevuld omdat de bezoeker het niet wist ───────────────────
 * Zichtbaar en niet weggeklapt: een gemiddelde dat voor iemands eigen cijfer doorgaat, is
 * precies wat een adviesgesprek later laat ontsporen. Wel rustiger dan de rest — het is
 * een voetnoot bij het advies, geen tweede boodschap. */
[data-advies-aannames] {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--em-funnel-accent) 7%, transparent);
  text-align: left;
}
[data-advies-aannames] p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-base-content, #2d3d4d);
}
[data-advies-aannames] p + p { margin-top: 0.5rem; }

/* ── Scherm 8: het moment dat de bezoeker al heeft doorgegeven ──────────────────────────
 * Groen en dicht in plaats van de kalender. Iemand die via de mailknop terugkomt op een
 * aanvraag waar al een dag bij staat, moet zien dat hij klaar is — niet opnieuw kunnen
 * kiezen, want de planner heeft de oude afspraak al in zijn agenda staan. Het groen is
 * hetzelfde als van de WhatsApp-knop verderop in dit bestand, zodat er niet een derde
 * kleur bij komt. */
[data-afspraak-vast] {
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid #25d366;
  background: color-mix(in srgb, #25d366 10%, #fff);
  text-align: left;
}
[data-afspraak-vast-kop] {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #157a3c;
}
[data-afspraak-vast-moment] {
  margin: 0.35rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0f5f2e;
}
[data-afspraak-vast-uitleg] {
  margin: 0.55rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-base-content, #2d3d4d);
}

/* ══════════════════════════════════════════════════════════════════════════════════════
 * De Meta-funnel op mobiel (10-09-2026, keuzes van 786)
 *
 * De kopbalk van de referentie stapelt op smal scherm "Stap 1 van 4" bóven "Je woning",
 * met het woordmerk ernaast. Drie dingen in een balk van 48 pixels hoog: de teksten worden
 * piepklein en het merk staat er als postzegel bij. Op deze funnel dus: de twee regels
 * naast elkaar op één regel, het merk uit de balk, en het merk groot onder aan het scherm.
 *
 * De grens ligt op 64rem — dat is waar de vastgelegde markup zelf van de mobiele naar de
 * brede kopbalk schakelt (`lg:hidden` op de gestapelde tekst).
 * ══════════════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 63.9375rem) {
  /*
   * De twee regels naast elkaar, met de teller LINKS en het fase-label ertussenin.
   *
   * De wikkel neemt de hele ruimte tussen het merkvak en het vraagteken; de teller houdt
   * zijn eigen breedte en het label krijgt de rest en centreert zich daarin. Zo staat "Je
   * verbruik" precies tussen "Stap 2 van 4" en het vraagteken, ook als de fasenaam langer
   * of korter wordt (786, 10-09-2026).
   *
   * `:has()` omdat de wikkel alleen een gegenereerde klassenaam draagt; de testid van de
   * teller is het enige stabiele handvat.
   */
  [data-em-funnel="meta"] div:has(> [data-testid="mobile-step-counter-screening"]) {
    flex: 1;
    flex-direction: row;
    align-items: baseline;
    gap: 0.35rem;
    width: auto;
    min-width: 0;
    white-space: nowrap;
  }
  [data-em-funnel="meta"] [data-testid="mobile-step-counter-screening"] { flex: none; }
  [data-em-funnel="meta"] [data-testid="mobile-step-label-screening"] {
    flex: 1;
    text-align: center;
  }
  /* De teller wordt de bijzin, het label de kop. Zonder dit staan ze even zwaar naast
     elkaar en leest de balk als twee losse mededelingen.
     
     En groter: de vastgelegde maat is 12 px, gekozen voor een balk waar ook nog een
     woordmerk in stond. Dat merk is eruit, dus de tekst mag de ruimte hebben. */
  [data-em-funnel="meta"] [data-testid="mobile-step-counter-screening"] {
    font-size: 0.9375rem;
    line-height: 1.2;
    opacity: 0.85;
  }
  [data-em-funnel="meta"] [data-testid="mobile-step-label-screening"] {
    font-size: 1.125rem;
    line-height: 1.2;
    font-weight: 700;
  }

  /*
   * De koraalpil vult op mobiel altijd de hele balk.
   *
   * Op brede schermen groeit hij mee met de fase, en dat klopt daar: je ziet alle vier de
   * fases naast elkaar. Op mobiel staat er één fase tegelijk, dus een half gevulde pil zegt
   * niets. Erger nog: op het slotscherm rekende hij zichzelf terug naar 17 px, omdat de
   * fase-elementen waar hij zich op meet daar verborgen zijn — een witte balk op het enige
   * scherm waar alles goed ging. Gemeten 10-09-2026.
   */
  [data-em-funnel="meta"] .bg-zuno-nav {
    width: 100% !important;
    --progress-from: 100%;
    --progress-to: 100%;
  }

  /* Het merk uit de balk. Het staat hieronder groot terug. */
  [data-em-funnel="meta"] a[class*="logolink"] { display: none; }
}

/* Het woordmerk groot onder aan het scherm, in plaats van de voettekst. Alleen mobiel:
   op een breed scherm staat het al in de kopbalk en zou het er twee keer staan. */
[data-em-voetmerk] { display: none; }
@media (max-width: 63.9375rem) {
  [data-em-voetmerk] {
    display: flex;
    justify-content: center;
    /* Dicht op de kaarten: het is de afzender onder het blok, geen aparte sectie. */
    padding: 1rem 1.5rem 2.5rem;
  }
  [data-em-voetmerk] img {
    width: 60%;
    max-width: 15rem;
    height: auto;
    /* Rustig aanwezig: het is een afzender, geen tweede boodschap. */
    opacity: 0.85;
  }
}

/* ── De sluitknop van de lade ────────────────────────────────────────────────────────
 * De ronde kruisknop rechtsboven in het zijpaneel staat op `kucCTQ`: de groene knop van de
 * referentie (#00a56f). Dat groen is in deze funnel het derde accent naast koraal en de
 * kopbalk. Alleen hier omgezet; de offertefunnel houdt zijn eigen kleuren. */
[data-em-funnel="meta"] .styles__DefaultButton-sc-51d82680-0.kucCTQ {
  background: var(--em-funnel-accent);
}

/* ── De WhatsApp-knop op het slotscherm ─────────────────────────────────────────────── */

/*
 * WhatsApp-groen, altijd — ook waar de rest van de funnel koraal is. Dat is geen
 * uitzondering op de huisstijl maar de reden dat de knop werkt: die kleur betekent één
 * ding, en een koraalkleurige WhatsApp-knop leest als "nog een knop van dit bedrijf"
 * (786, 10-09-2026). Zwaarder dan de gradient-regel hierboven, dus na die regel.
 */
/*
 * Let op de knopklasse in de selector: zonder die extra klasse verliest deze regel het van
 * de gradient hierboven (die is even specifiek maar staat eerder én zet een
 * background-IMAGE, wat een kale `background-color` niet wegpoetst). Gemeten: de knop bleef
 * koraal. Vandaar ook `background-image: none`.
 */
[data-em-funnel="meta"] .styles__DefaultButton-sc-51d82680-0[data-whatsapp-knop],
[data-em-funnel="meta"] .styles__DefaultButton-sc-51d82680-0[data-whatsapp-knop]:not(:disabled) {
  background-color: #25d366;
  background-image: none;
  border-color: transparent;
  color: #fff;
}
[data-em-funnel="meta"] .styles__DefaultButton-sc-51d82680-0[data-whatsapp-knop]:hover {
  background-color: #1fb855;
}
[data-whatsapp-knop] .styles__ButtonTextContainer-sc-51d82680-1 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── De terugknop onder het vraagvak ────────────────────────────────────────────────────
 * De pijl stond linksboven in de kopbalk: buiten de duimzone, en op een telefoon vlak naast
 * de plek waar je scrollt. Hij staat nu rechtsonder tegen de rechterrand van het vraagvak,
 * waar de hand al is en waar de knoppen van deze funnel toch al staan. */

/*
 * De paginaschil van de referentie krijgt een vaste HOOGTE mee (een schermhoogte min de
 * kopbalk), niet alleen een minimum. Alles wat erna komt begint dus onder de vouw: eerst
 * verdween de terugknop daarin, daarna hing het woordmerk een kwart scherm onder de kaarten.
 * De schil is doorzichtig — het grijs komt van `body` — dus hoogte én minimum mogen eraf en
 * laat de inhoud zelf bepalen hoe lang de pagina is.
 */
/*
 * `flex: none` is de echte oplossing: `#__next` is een flexkolom van een schermhoogte en de
 * schil staat op `flex: 1 1 0%`, dus hij rekt zich uit tot de onderkant van het scherm —
 * ongeacht wat er in zit. Alles wat erna komt begon daardoor pas een kwart scherm onder de
 * kaarten. De minimumhoogte eraf halen alleen was niet genoeg; dat was ik eerst vergeten.
 */
[data-em-funnel="meta"] [class*="StyledPageBackground"] {
  min-height: 0;
  height: auto;
  flex: none;
}

[data-vorige-rij] {
  display: flex;
  justify-content: flex-end;
  /* Binnen het vak, dus alleen lucht boven de knop. De 32 px onder het vak komt van de
     schil van de referentie en blijft staan. */
  margin: 1.25rem 1.5rem 0;
}
[data-vorige-rij] > * > * > * {
  display: flex;
  justify-content: flex-end;
}
[data-vorige] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* Ruim aanraakvlak: 44 pixels hoog is de ondergrens waaronder een knop op een telefoon
     gaat missen. De tekst is kleiner dan het vlak eromheen; dat is met opzet. */
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--em-funnel-accent);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--em-funnel-accent);
}
[data-vorige]:hover { background: color-mix(in srgb, var(--em-funnel-accent) 8%, #fff); }
[data-vorige] svg { flex: none; }

/* ── Ruimer aanraken ────────────────────────────────────────────────────────────────────
 * Niet de knoppen groter maken — die zijn al fors — maar de twee die het NIET zijn: de
 * overslaan-knop en de tekstlinks staan als kale tekst van 22 pixels hoog tussen de rest.
 * Op een telefoon is dat de helft van wat je nodig hebt om betrouwbaar te raken. */
@media (max-width: 63.9375rem) {
  [data-em-funnel="meta"] .styles__DefaultButton-sc-51d82680-0.eFndZC {
    min-height: 2.75rem;
    padding-inline: 0.75rem;
  }
  /* En de tijdsloten: vier op een rij van 390 px is 80 px per slot, hoog genoeg maar krap
     naast elkaar. Drie op een rij geeft ze de ruimte die ze nodig hebben. */
  [data-em-funnel="meta"] [data-tijdslot] { min-height: 2.75rem; }
}


/* ── Het venster bij "Weet ik niet" ─────────────────────────────────────────────────────
 * Van onderen, tot de inhoud reikt — niet schermvullend. De vraag erachter blijft in beeld,
 * licht vervaagd: je ziet waar je zo weer terugkomt. Sluiten doe je met het koraalkleurige
 * kruisje rechtsboven in het blad; er staat met opzet geen knop onder, want er valt niets
 * te bevestigen. Zie de kop van `metafunnel/melding.ts`. */

[data-em-funnel="meta"] .styles__SideDrawerBackground-sc-aaf027f0-1 {
  background: rgba(45, 61, 77, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
[data-em-funnel="meta"] [data-blad="onder"] .styles__SideDrawerContent-sc-aaf027f0-3 {
  /* Het blad hoort om de tekst te sluiten. De opvulling van de referentie is gemaakt voor
     een lade die het hele scherm hoog is; hier bleef daardoor een kwart scherm wit onder
     drie regels tekst staan. Ruim genoeg om te lezen, niet meer dan dat. */
  max-height: 60vh;
  height: auto;
  padding: 1.5rem 1.5rem 2rem;
}


/* ── Mila in het hulppaneel ─────────────────────────────────────────────────────────────
 * Een gezicht boven de appknop. Rond en klein: het is een afzender, geen portret. */
[data-hulp-persoon] {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 1.25rem;
}
[data-hulp-persoon] img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
[data-hulp-naam] { margin: 0; font-weight: 700; font-size: 1.0625rem; }
[data-hulp-rol] { margin: 0.1rem 0 0; font-size: 0.875rem; opacity: 0.75; }

/* ── Icoon naast het invoerveld (zonnepanelen, bewoners) ───────────────────────────────
 * De twee vragen waar je zelf een aantal invult krijgen een icoon links en het veld
 * rechts, zodat in één oogopslag duidelijk is waar het getal over gaat. Alleen deze
 * funnel zet een icoon; zonder icoon verandert er niets aan het veld. */
[data-met-icoon] {
  display: flex;
  align-items: center;
  gap: 1rem;
}
[data-met-icoon] > .cds--form-item { flex: 1; min-width: 0; }
[data-invoer-icoon] {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  /* Het icoon staat op ooghoogte met het VELD, niet met het label erboven. */
  margin-top: 1.25rem;
}
@media (max-width: 47.9375rem) {
  [data-invoer-icoon] { width: 3.5rem; height: 3.5rem; }
  [data-met-icoon] { gap: 0.75rem; }
}

/* ── Beeld in de checkout: mandregel en de kaart "Je aanvraag" ─────────────────────────
 * Deze twee vakken zijn 60x60 en het sjabloon zet er GEEN object-fit op. De
 * next/image-legacy-stijl op de <img> (`width:0;height:0;min-width:100%;max-width:100%;
 * min-height:100%;max-height:100%`) dwingt hem exact 60x60, waarna de browser terugvalt op
 * de standaard `object-fit: fill`. Gevolg: em-alphaess-cutout.webp is 800x1491 (0,537) en
 * werd 86% horizontaal uitgerekt; em-installatie-01/02.webp (800x1067) 33% (786, 11-09-2026).
 *
 * `contain` en niet `cover`: dit zijn productuitsneden en installatiefoto's op een staande
 * verhouding. Met `cover` zou een 60x60-uitsnede het midden van de batterij pakken en is het
 * product niet meer te herkennen; met `contain` past hij heel in het vakje.
 *
 * De reparatie hoort hier en niet in het sjabloon: checkoutMarkup.ts is gegenereerd door
 * tools/screener/checkout.mjs ("niet met de hand aanpassen"). Zelfde aanpak als de patch op
 * de pakketkaarten hierboven. */
[class*="Image__Container"][style*="height: 60px"] img { object-fit: contain !important; }