/* ============================================================
   UNTRAILED - assets/css/untrailed.css
   Design system voor untrailed.com (Hello Elementor child).
   Bron: untrailed.com.docs/analyse/untrailed-design-system.css
   Regels: geen kleur buiten :root; alle randen 1px var(--u-line);
   hoeken 4px (knoppen 6px); kaart-hover border-color var(--u-orange).
   Secties 1-11 = DS-CSS (eindstand cascade). Secties 12-15 = aanvullingen
   voor WordPress, Elementor en WooCommerce.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* -- grondtonen -- */
  --u-ink:            #2E0A03;   /* cacao: tekst, kop, voet, donkere vlakken */
  --u-ink-hover:      #3A1509;   /* hover van cacaoknoppen */
  --u-white:          #FFFFFF;   /* kaarten en vlakken */
  --u-cream:          #FFF9F2;   /* paginakleur en rustvlak */
  --u-sand:           #F1E3D3;   /* rustpunten, promotegels */
  --u-sand-2:         #F7EEE3;   /* uitleg, filters, formulieren, actieve keuze */
  --u-sand-3:         #FFFBF6;   /* achtergrond van productfoto's */
  --u-sand-4:         #FFFDF9;   /* huidig item in een reeks */
  --u-line:           #E6D3BC;   /* randen en haarlijnen */
  --u-line-soft:      #F3E9DB;   /* haarlijn binnen een blok */
  --u-muted:          #7E5B49;   /* bijschriften en labels */
  --u-muted-2:        #5C3A29;   /* servicebalk */
  --u-muted-3:        #B39A85;   /* uitgeschakeld, zachte hoverrand */

  /* -- betekenis -- */
  --u-orange:         #A34900;   /* actie-oranje: links, accenten, actieve keuze */
  --u-orange-hover:   #8F4000;
  --u-orange-soft:    var(--u-sand-2);
  --u-yellow:         #FFC116;   /* zongeel: kopjes in de voet, hover op donker */
  --u-yellow-hover:   #FFD24D;
  --u-good:           #1E6B37;   /* voorraad, vinkjes, de koopknop */
  --u-good-hover:     #155229;
  --u-good-soft:      #E8F3EC;
  --u-good-on-dark:   #8FD3A6;
  --u-deal:           #8A2E12;   /* korting en acties, altijd wit erop */
  --u-deal-soft:      #F7E4DC;
  --u-warn:           #7A4A00;
  --u-warn-soft:      #FBEFD6;
  --u-flash:          #FFF3D6;   /* korte markering na een filterwijziging */

  /* -- merkbezit: beeldmerk en hoogstens een groot vlak per pagina.
        Nooit op een knop, nooit achter tekst. Tekst erop is cacao. -- */
  --u-brand-amber:    #F5910D;
  --u-brand-orange:   #EF7100;
  --u-brand-gradient: linear-gradient(135deg,
                        var(--u-yellow) 0%, var(--u-brand-amber) 52%,
                        var(--u-brand-orange) 100%);
  --u-hatch:          repeating-linear-gradient(135deg,
                        #FCF6EE 0 10px, #F8EFE4 10px 20px);   /* "foto volgt" */

  /* -- op cacao -- */
  --u-on-dark-1:      rgba(255,255,255,.92);
  --u-on-dark-2:      rgba(255,255,255,.80);
  --u-on-dark-3:      rgba(255,255,255,.62);
  --u-on-dark-4:      rgba(255,255,255,.40);
  --u-on-dark-line:   rgba(255,255,255,.20);
  --u-on-dark-vlak:   rgba(255,255,255,.07);
  --u-on-dark-vlak-2: rgba(255,255,255,.14);
  --u-overlay:        rgba(46,10,3,.45);
  --u-on-light-knop:  rgba(255,255,255,.94);   /* galerijpijl op de foto */

  /* -- letter -- */
  --u-font:   'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --u-w-normaal:400; --u-w-medium:500; --u-w-label:600; --u-w-kop:700; --u-w-zwaar:800;

  --u-t-xs:  11.5px;  --u-t-s:   12.5px;  --u-t-m:   13.5px;  --u-t-l:   15px;
  --u-t-xl:  17px;    --u-t-2xl: 20px;    --u-t-3xl: 24px;    --u-t-4xl: 30px;
  --u-t-h1:   clamp(30px, 4vw,   44px);
  --u-t-h2:   clamp(22px, 3vw,   34px);
  --u-t-h3:   clamp(18px, 2.2vw, 24px);
  --u-t-hero: clamp(28px, 3.6vw, 42px);

  --u-lh-strak:1.1; --u-lh-kop:1.25; --u-lh-tekst:1.6; --u-lh-lang:1.65;
  --u-ls-kop:-0.02em; --u-ls-logo:-0.03em; --u-ls-label:.08em; --u-ls-caps:.1em;

  /* -- ruimte, 4px-raster -- */
  --u-s-1:4px;   --u-s-2:8px;   --u-s-3:12px;  --u-s-4:16px;  --u-s-5:20px;
  --u-s-6:24px;  --u-s-7:28px;  --u-s-8:32px;  --u-s-9:40px;  --u-s-10:48px;
  --u-s-11:56px; --u-s-12:64px; --u-s-13:80px;

  /* -- vorm -- */
  --u-r-vlak:4px;      /* kaarten, vlakken, velden */
  --u-r-knop:6px;      /* knoppen */
  --u-r-mini:2px;      /* balkjes en streepjes */
  --u-r-pil:999px;     /* echte pillen */
  --u-r-rond:50%;      /* ronde iconen */

  /* -- schaduw: alleen lade, koopbalk, menu en losstaand productbeeld -- */
  --u-sh-kaart:  0 1px 3px rgba(46,10,3,.18);
  --u-sh-menu:   0 20px 50px rgba(46,10,3,.14);
  --u-sh-lade:  -8px 0 40px rgba(46,10,3,.12);
  --u-sh-balk:   0 -4px 20px rgba(46,10,3,.08);
  --u-sh-product: drop-shadow(0 12px 22px rgba(46,10,3,.28));

  /* -- maat en gedrag -- */
  --u-wrap:1180px;  --u-wrap-pad:32px;  --u-tekstkolom:70ch;
  --u-nav-h:64px;   --u-raak:44px;      /* minimale raakhoogte */
  --u-overgang:.15s ease;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--u-white);color:var(--u-ink);overflow-x:hidden;max-width:100%}
body{font-family:var(--u-font);font-size:16px;line-height:var(--u-lh-tekst);
  -webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button,input,select,textarea{font-family:inherit}

/* zichtbare toetsenbordfocus voor alles wat bedienbaar is */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--u-orange);outline-offset:2px;border-radius:var(--u-r-mini)}
.u-op-donker a:focus-visible,.u-op-donker button:focus-visible{outline-color:var(--u-yellow)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- 3. TYPOGRAFIE ---------- */
h1,h2,h3,h4{font-family:var(--u-font);line-height:var(--u-lh-strak);letter-spacing:var(--u-ls-kop)}
h1{font-size:var(--u-t-h1);font-weight:var(--u-w-zwaar)}
h2{font-size:var(--u-t-h2);font-weight:var(--u-w-zwaar)}
h3{font-size:var(--u-t-h3);font-weight:var(--u-w-kop);line-height:var(--u-lh-kop)}
h4{font-size:var(--u-t-xl);font-weight:var(--u-w-kop);line-height:var(--u-lh-kop)}
p{color:var(--u-muted);line-height:var(--u-lh-lang)}
strong,b{color:var(--u-ink);font-weight:var(--u-w-label)}

.u-label{font-size:var(--u-t-xs);font-weight:var(--u-w-kop);letter-spacing:var(--u-ls-caps);
  text-transform:uppercase;color:var(--u-muted)}
.u-label--actie{color:var(--u-orange)}
.u-label--geel {color:var(--u-yellow)}
.u-getal{font-variant-numeric:tabular-nums}
.u-lead{font-size:var(--u-t-xl);line-height:1.55;color:var(--u-ink);max-width:52ch}
.u-klein{font-size:var(--u-t-s);color:var(--u-muted)}

/* ---------- 4. HULPKLASSEN ---------- */
.wrap{max-width:var(--u-wrap);margin-inline:auto;padding-inline:var(--u-s-4)}
@media(min-width:760px){.wrap{padding-inline:var(--u-s-5)}}
@media(min-width:900px){.wrap{padding-inline:var(--u-wrap-pad)}}

.section{padding-block:var(--u-s-9)}
@media(min-width:900px){.section{padding-block:var(--u-s-13)}}
.section-sm{padding-block:var(--u-s-7)}
@media(min-width:900px){.section-sm{padding-block:var(--u-s-11)}}
.section-title{margin-bottom:var(--u-s-2)}
.section-sub{font-size:var(--u-t-l);color:var(--u-muted);margin-top:var(--u-s-2);max-width:560px}

.divider{border:none;border-top:1px solid var(--u-line);margin:0}
.u-op-donker{background:var(--u-ink);color:var(--u-white)}
.u-op-donker p{color:var(--u-on-dark-2)}
.u-op-donker h1,.u-op-donker h2,.u-op-donker h3{color:var(--u-white)}
.u-vlak      {background:var(--u-sand-2);border:1px solid var(--u-line);border-radius:var(--u-r-vlak)}
.u-vlak-rust {background:var(--u-sand);border:1px solid var(--u-line);border-radius:var(--u-r-vlak)}
.u-merkvlak  {background:var(--u-brand-gradient);color:var(--u-ink)}
.u-geen-foto {background:var(--u-hatch)}
.visueel-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

.crumb{padding-block:var(--u-s-4);font-size:13px;color:var(--u-muted)}
.crumb a{color:var(--u-muted)}
.crumb a:hover{color:var(--u-ink)}
.crumb .sep{margin-inline:var(--u-s-2);opacity:.4}

/* ---------- 5. KNOPPEN ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--u-s-2);
  min-height:var(--u-raak);padding:0 var(--u-s-6);border:1.5px solid transparent;
  border-radius:var(--u-r-knop);font-family:var(--u-font);font-size:var(--u-t-l);
  font-weight:var(--u-w-kop);line-height:1;text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:background var(--u-overgang),border-color var(--u-overgang),
  color var(--u-overgang)}
.btn--groot{min-height:52px;padding-inline:var(--u-s-8)}
.btn--vol  {width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* koopknop: groen, bewuste afwijking van het design system */
.btn--koop{background:var(--u-good);color:var(--u-white)}
.btn--koop:hover{background:var(--u-good-hover);color:var(--u-white)}

/* cacao: tweede plaats naast de koopknop */
.btn--ink{background:var(--u-ink);color:var(--u-white)}
.btn--ink:hover{background:var(--u-ink-hover);color:var(--u-white)}

/* actie-oranje: keuzehulp, toevoegen aan een lijst */
.btn--actie{background:var(--u-orange);color:var(--u-white)}
.btn--actie:hover{background:var(--u-orange-hover);color:var(--u-white)}

/* zongeel: alleen op cacao */
.btn--geel{background:var(--u-yellow);color:var(--u-ink)}
.btn--geel:hover{background:var(--u-yellow-hover);color:var(--u-ink)}

/* rustig: rand, geen vlak */
.btn--rand{background:var(--u-white);color:var(--u-ink);border-color:var(--u-line)}
.btn--rand:hover{border-color:var(--u-ink);background:var(--u-cream)}
.btn--rand-sterk{background:var(--u-white);color:var(--u-ink);border-color:var(--u-ink)}
.btn--rand-sterk:hover{background:var(--u-ink);color:var(--u-white)}

/* tekstknop */
.btn--tekst{background:none;border-color:transparent;padding-inline:0;
  color:var(--u-orange);text-decoration:underline}
.btn--tekst:hover{color:var(--u-orange-hover)}

/* vierkant icoon, bijv. verlanglijst */
.btn--icoon{width:52px;min-height:52px;padding:0;background:var(--u-white);
  border-color:var(--u-line);border-radius:var(--u-r-vlak)}
.btn--icoon:hover{border-color:var(--u-ink)}
.btn--icoon.is-on svg{fill:var(--u-orange);stroke:var(--u-orange)}

/* rond, bijv. plus in de winkelwagenlade */
.btn--rond{width:30px;min-height:30px;padding:0;border-radius:var(--u-r-rond);
  background:var(--u-orange);color:var(--u-white);font-size:22px;line-height:1}
.btn--rond:hover{background:var(--u-orange-hover)}

/* uitklapknop op mobiel (filters, snelfilters, menu) */
.btn--uitklap{width:100%;justify-content:space-between;min-height:52px;
  padding-inline:var(--u-s-4);background:var(--u-white);color:var(--u-ink);
  border-color:var(--u-line);border-radius:var(--u-r-vlak)}
.btn--uitklap[aria-expanded="true"]{border-color:var(--u-orange)}
.btn--uitklap .teken{font-size:var(--u-t-2xl);font-weight:var(--u-w-normaal);
  color:var(--u-orange);line-height:1}

/* aantal-kiezer */
.qty{display:flex;align-items:center;border:1.5px solid var(--u-line);
  border-radius:var(--u-r-vlak);overflow:hidden;background:var(--u-white)}
.qty button{background:none;border:none;width:44px;height:52px;font-size:18px;
  cursor:pointer;color:var(--u-ink)}
.qty input{width:44px;height:52px;border:none;text-align:center;font-weight:var(--u-w-kop);
  font-size:16px;background:transparent;outline:none}

/* segmentkeuze (maat, model) */
.seg{display:inline-flex;gap:6px}
.seg-knop{padding:5px var(--u-s-3);border:1.5px solid var(--u-line);
  border-radius:var(--u-r-vlak);background:var(--u-white);font-size:12px;
  font-weight:var(--u-w-kop);cursor:pointer;transition:all var(--u-overgang)}
.seg-knop:hover{border-color:var(--u-ink)}
.seg-knop[aria-current="true"],.seg-knop.is-on{background:var(--u-ink);color:var(--u-white);
  border-color:var(--u-ink)}

/* ---------- 6. FORMULIER ---------- */
.veld{display:block;margin-bottom:var(--u-s-4)}
.veld > span,.veld-label{display:block;font-size:var(--u-t-xs);font-weight:var(--u-w-kop);
  letter-spacing:.06em;text-transform:uppercase;color:var(--u-muted);margin-bottom:6px}
.invoer,input[type=text],input[type=email],input[type=number],input[type=search],
select,textarea{width:100%;min-height:var(--u-raak);font-family:inherit;font-size:var(--u-t-l);
  color:var(--u-ink);background:var(--u-white);border:1px solid var(--u-line);
  border-radius:var(--u-r-vlak);padding:11px 13px}
textarea{resize:vertical;min-height:96px}
.invoer:focus,input:focus,select:focus,textarea:focus{outline:2px solid var(--u-orange);
  outline-offset:-1px;border-color:transparent}
.veld-hint{font-size:var(--u-t-s);color:var(--u-muted);margin-top:6px}

.vink{display:flex;align-items:center;gap:10px;min-height:40px;margin:0;
  font-size:14px;line-height:1.3;cursor:pointer}
.vink input{width:16px;height:16px;flex:none;accent-color:var(--u-orange);margin:0}
.vink .aantal{margin-left:auto;font-size:13px;color:var(--u-muted);font-variant-numeric:tabular-nums}
.vink + .vink{border-top:1px solid var(--u-line-soft)}
.vink--uit{opacity:.45;cursor:not-allowed}

.filter-blok{background:var(--u-white);border:1px solid var(--u-line);
  border-radius:var(--u-r-vlak);padding:var(--u-s-4);margin-bottom:10px}
.filter-blok h3{font-size:13px;font-weight:var(--u-w-zwaar);letter-spacing:.02em;margin:0 0 6px}
.filter-blok--nadruk{background:var(--u-sand-2)}
.filter-flits{animation:u-flits 1s ease}
@keyframes u-flits{0%{background:var(--u-flash)}100%{background:transparent}}

/* voortgang / meer laden */
.balk{width:220px;height:3px;background:var(--u-line);border-radius:var(--u-r-vlak);overflow:hidden}
.balk > span{display:block;height:100%;background:var(--u-orange)}

/* ---------- 7. BADGES EN CHIPS ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--u-t-xs);
  font-weight:var(--u-w-kop);letter-spacing:.02em;border-radius:var(--u-r-vlak);padding:5px 10px}
.badge--keuze{background:var(--u-ink);color:var(--u-white)}
.badge--actie{background:var(--u-deal);color:var(--u-white)}
.badge--zacht{background:var(--u-sand-2);color:var(--u-orange);text-transform:uppercase;
  letter-spacing:var(--u-ls-label);font-size:11px;padding:3px 8px}
.badge--op-foto{position:absolute;top:12px;left:12px;z-index:2;box-shadow:var(--u-sh-kaart)}

.status{align-self:flex-start;font-size:12px;font-weight:var(--u-w-kop);
  border-radius:var(--u-r-vlak);padding:4px 10px}
.status--ja {color:var(--u-good-hover);background:var(--u-good-soft)}
.status--nee{color:var(--u-deal);       background:var(--u-deal-soft)}
.status--let{color:var(--u-warn);       background:var(--u-warn-soft)}

.voorraad{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  font-weight:var(--u-w-label);color:var(--u-good)}
.voorraad::before{content:"";width:7px;height:7px;border-radius:var(--u-r-rond);
  background:var(--u-good);animation:u-pols 2s infinite}
@keyframes u-pols{0%,100%{box-shadow:0 0 0 3px rgba(30,107,55,.16)}
                   50%   {box-shadow:0 0 0 5px rgba(30,107,55,.08)}}

.chip{display:inline-flex;align-items:center;gap:8px;min-height:var(--u-raak);
  padding:0 var(--u-s-4);font-family:inherit;font-size:14px;font-weight:var(--u-w-label);
  color:var(--u-ink);text-decoration:none;background:var(--u-white);
  border:1px solid var(--u-line);border-radius:var(--u-r-vlak);cursor:pointer;
  transition:border-color var(--u-overgang),color var(--u-overgang),background var(--u-overgang)}
.chip:hover{border-color:var(--u-orange);color:var(--u-orange)}
.chip .num{font-size:var(--u-t-s);color:var(--u-muted);font-weight:var(--u-w-label);
  font-variant-numeric:tabular-nums}
.chip:hover .num{color:var(--u-orange)}
.chip[aria-current="true"],.chip.is-on{border-color:var(--u-orange);border-width:1.5px;
  background:var(--u-sand-2)}
.chip--deal{border-color:var(--u-deal);color:var(--u-deal)}
.chip--deal .num{color:var(--u-deal)}
.chip--wis{border:none;background:none;color:var(--u-orange);text-decoration:underline;
  padding-inline:0}
.chip-rij{display:flex;flex-wrap:wrap;align-items:center;gap:var(--u-s-2)}
.chip-scheiding{width:1px;height:26px;background:var(--u-line);margin-inline:var(--u-s-1)}

/* ---------- 8. KAARTEN ---------- */
.kaart{display:flex;flex-direction:column;gap:var(--u-s-1);text-decoration:none;
  color:var(--u-ink);background:var(--u-white);border:1px solid var(--u-line);
  border-radius:var(--u-r-vlak);overflow:hidden;transition:border-color var(--u-overgang)}
.kaart:hover{border-color:var(--u-orange)}
.kaart--pad{padding:var(--u-s-4)}

/* productkaart */
.pkaart{position:relative;display:flex;flex-direction:column;gap:var(--u-s-1);
  text-decoration:none;color:var(--u-ink);background:var(--u-white);
  border:1px solid var(--u-line);border-radius:var(--u-r-vlak);overflow:hidden;
  transition:border-color var(--u-overgang)}
.pkaart:hover{border-color:var(--u-orange)}
.pkaart-beeld{position:relative;aspect-ratio:1/1;display:flex;align-items:center;
  justify-content:center;background:var(--u-sand-3);border-bottom:1px solid var(--u-line);
  padding:18px;overflow:hidden}
.pkaart-beeld img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pkaart-beeld--leeg{background:var(--u-hatch)}
.pkaart-beeld--leeg .geen-foto{font-size:12px;color:var(--u-muted);letter-spacing:.02em}
.pkaart > :not(.pkaart-beeld){padding-inline:var(--u-s-4)}
.pkaart-merk    {padding-top:var(--u-s-4);font-size:12px;color:var(--u-muted);
                 font-weight:var(--u-w-label)}
.pkaart-naam    {font-size:var(--u-t-l);font-weight:var(--u-w-kop);line-height:1.3;
                 min-height:2.6em;display:flex;align-items:flex-start}
.pkaart-spec    {font-size:var(--u-t-s);color:var(--u-muted);font-variant-numeric:tabular-nums}
.pkaart-voorraad{margin-top:6px;font-size:var(--u-t-s);color:var(--u-good);
                 font-weight:var(--u-w-label)}
.pkaart-prijs   {margin-top:auto;padding-block:var(--u-s-3) var(--u-s-4);display:flex;
                 align-items:baseline;flex-wrap:wrap;gap:6px}
.pkaart-prijs b {font-size:var(--u-t-2xl);font-weight:var(--u-w-zwaar);
                 font-variant-numeric:tabular-nums}
.pkaart-prijs s {font-size:13px;color:var(--u-muted)}
.pkaart-korting {font-size:var(--u-t-s);font-weight:var(--u-w-kop);color:var(--u-deal)}

/* rasters */
.raster{display:grid;gap:var(--u-s-3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px) {.raster--3{grid-template-columns:repeat(3,minmax(0,1fr))}
                         .raster--4{grid-template-columns:repeat(3,minmax(0,1fr))}
                         .raster--6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1080px){.raster--4{grid-template-columns:repeat(4,minmax(0,1fr))}
                         .raster--5{grid-template-columns:repeat(5,minmax(0,1fr))}
                         .raster--6{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---------- 9. KOP ---------- */
.announce-bar{background:var(--u-cream);border-bottom:1px solid var(--u-line)}
.announce-inner{display:flex;justify-content:space-between;align-items:center;
  max-width:var(--u-wrap);margin-inline:auto;padding:8px var(--u-wrap-pad);
  font-size:var(--u-t-s);color:var(--u-muted-2);gap:var(--u-s-4)}
.announce-inner strong{color:var(--u-orange);font-weight:var(--u-w-label)}
@media(max-width:900px){
  .announce-inner{justify-content:center;gap:0;padding:6px var(--u-s-4);font-size:var(--u-t-xs)}
  .announce-inner > span{display:none;text-align:center;width:100%}
  .announce-inner > span.is-on{display:block}
}

.nav{position:sticky;top:0;z-index:60;background:var(--u-ink)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;
  height:var(--u-nav-h);max-width:var(--u-wrap);margin-inline:auto;padding-inline:var(--u-s-4)}
@media(min-width:900px){.nav-inner{padding-inline:var(--u-wrap-pad)}}
.nav-left{display:flex;align-items:center;gap:var(--u-s-3)}
@media(min-width:900px){.nav-left{gap:var(--u-s-8)}}
.logo{display:flex;align-items:center;gap:9px;font-weight:var(--u-w-kop);font-size:23px;
  letter-spacing:var(--u-ls-logo);color:var(--u-white);text-transform:lowercase;flex-shrink:0}
.logo em{color:var(--u-orange);font-style:normal}
.nav-links{display:flex;align-items:center;font-size:14px;color:var(--u-white)}
.nav-links a{color:var(--u-white);transition:color var(--u-overgang)}
.nav-item{position:relative;height:var(--u-nav-h);display:flex;align-items:center}
.nav-links > a,.nav-item > a{padding-inline:var(--u-s-3);height:var(--u-nav-h);
  display:flex;align-items:center;gap:var(--u-s-1)}
.nav-links > a:hover,.nav-item:hover > a{color:var(--u-yellow)}
.nav-chevron{width:10px;height:10px;opacity:.6;flex-shrink:0;transition:transform .2s}
.nav-item:hover .nav-chevron{transform:rotate(180deg);opacity:1}
.nav-actions{display:flex;gap:var(--u-s-2);align-items:center}
.nav-icon{position:relative;background:none;border:none;cursor:pointer;color:var(--u-white);
  padding:var(--u-s-2);display:flex;align-items:center;transition:color var(--u-overgang)}
.nav-icon:hover{color:var(--u-yellow)}
.nav-badge{position:absolute;top:3px;right:3px;background:var(--u-orange);color:var(--u-white);
  font-size:9px;font-weight:var(--u-w-kop);width:15px;height:15px;border-radius:var(--u-r-rond);
  display:flex;align-items:center;justify-content:center;line-height:1}

/* megamenu vanaf 900px */
.mega-menu{display:none}
@media(min-width:900px){
  .mega-menu{display:block;position:absolute;top:var(--u-nav-h);left:-20px;min-width:780px;
    background:var(--u-white);border:1px solid var(--u-line);
    border-radius:0 0 var(--u-r-vlak) var(--u-r-vlak);box-shadow:var(--u-sh-menu);
    opacity:0;visibility:hidden;pointer-events:none;z-index:100;
    transition:opacity .18s,visibility .18s}
  .nav-item:hover .mega-menu,.nav-item:focus-within .mega-menu{opacity:1;visibility:visible;
    pointer-events:auto}
  .mega-inner{display:grid;grid-template-columns:repeat(4,1fr)}
  .mega-col{padding:var(--u-s-5) 18px;border-right:1px solid var(--u-line)}
  .mega-col:last-child{border-right:none}
}
.mega-col-img{aspect-ratio:4/3;border-radius:var(--u-r-vlak);overflow:hidden;
  background:var(--u-ink);margin-bottom:var(--u-s-3)}
.mega-col-img img{width:100%;height:100%;object-fit:contain;padding:var(--u-s-2)}
.mega-col-title{font-size:12px;font-weight:var(--u-w-kop);letter-spacing:.09em;
  text-transform:uppercase;color:var(--u-muted);margin-bottom:var(--u-s-2)}
.mega-div{height:1px;background:var(--u-line);margin-bottom:10px}
.mega-links{display:flex;flex-direction:column;gap:6px}
.mega-links a{font-size:12px;color:var(--u-orange);line-height:1.4}
.mega-links a:hover{text-decoration:underline}
.mega-help{display:inline-block;margin-top:var(--u-s-3);font-size:13px;
  font-weight:var(--u-w-label);color:var(--u-orange)}
.mega-help:hover{text-decoration:underline}

/* mobiel menu tot 900px */
.nav-menu-knop{display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:var(--u-raak);height:var(--u-raak);padding-inline:10px;background:transparent;
  border:none;cursor:pointer;order:-1}
.nav-menu-streep{display:block;height:2px;background:var(--u-white);border-radius:var(--u-r-mini);
  transition:transform .18s ease,opacity .18s ease}
.nav-menu-knop[aria-expanded="true"] .nav-menu-streep:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-menu-knop[aria-expanded="true"] .nav-menu-streep:nth-child(2){opacity:0}
.nav-menu-knop[aria-expanded="true"] .nav-menu-streep:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-menu-knop:focus-visible{outline:2px solid var(--u-yellow);outline-offset:-2px}
@media(max-width:899.98px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;z-index:60;
    flex-direction:column;align-items:stretch;background:var(--u-ink);
    border-top:1px solid var(--u-on-dark-line);padding:6px var(--u-s-4) 18px;
    max-height:76vh;overflow-y:auto}
  .nav-links.is-open{display:flex}
  .nav-links > a,.nav-item{height:auto;width:100%;display:block}
  .nav-links > a,.nav-item > a{height:auto;padding:15px 2px;width:100%;
    justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12)}
  .nav-item.is-open > a{color:var(--u-yellow)}
  .nav-item.is-open .nav-chevron{transform:rotate(180deg)}
  .nav-item.is-open .mega-menu{display:block;position:static;min-width:0;background:transparent;
    border:none;box-shadow:none;padding:0;opacity:1;visibility:visible;pointer-events:auto}
  .mega-inner{grid-template-columns:1fr;gap:var(--u-s-3);padding:var(--u-s-3) 0 var(--u-s-4)}
  .mega-col{padding:0;border:none}
  .mega-col-title{color:var(--u-on-dark-3)}
  .mega-div{background:var(--u-on-dark-vlak-2)}
  .mega-links a{color:var(--u-white);padding-block:9px;display:block}
  .mega-help{color:var(--u-yellow)}
  .mega-col-img{display:none}
}
@media(min-width:900px){.nav-menu-knop{display:none}}

/* ---------- 10. VOET ---------- */
.site-voet{background:var(--u-ink);color:var(--u-white);padding:var(--u-s-11) 0 var(--u-s-7);
  font-size:14px}
.foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--u-s-7);margin-bottom:var(--u-s-9)}
@media(min-width:900px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--u-s-9)}}
.foot-logo{display:flex;align-items:center;gap:9px;font-weight:var(--u-w-kop);font-size:23px;
  letter-spacing:var(--u-ls-logo);text-transform:lowercase;margin-bottom:var(--u-s-3)}
.foot-logo em{color:var(--u-orange);font-style:normal}
.foot-desc{font-size:14px;color:var(--u-white);line-height:1.55;max-width:280px}
.site-voet h5,.site-voet .voet-kop{font-size:var(--u-t-xs);text-transform:uppercase;letter-spacing:var(--u-ls-caps);
  color:var(--u-yellow);font-weight:var(--u-w-label);margin-bottom:var(--u-s-3)}
.site-voet ul{display:flex;flex-direction:column;gap:9px}
.site-voet ul a{font-size:14px;color:var(--u-white)}
.site-voet ul a:hover{color:var(--u-yellow);text-decoration:underline}
.foot-strook{padding-block:var(--u-s-6);border-top:1px solid var(--u-on-dark-line)}
.foot-strook p{font-size:var(--u-t-m);color:var(--u-on-dark-2);max-width:46ch;line-height:1.5}
.foot-bottom{border-top:1px solid var(--u-on-dark-line);padding-top:var(--u-s-6);display:flex;
  justify-content:space-between;font-size:var(--u-t-s);color:var(--u-on-dark-2);
  flex-wrap:wrap;gap:var(--u-s-2)}

.brief-form{display:flex;gap:var(--u-s-2)}
.brief-form input{flex:1;min-width:0;border-color:transparent}
.brief-form input:focus{outline:2px solid var(--u-yellow);outline-offset:1px}

.merk-pil{display:inline-flex;align-items:center;min-height:var(--u-raak);font-size:13px;
  font-weight:var(--u-w-label);color:var(--u-white);border:1px solid rgba(255,255,255,.32);
  border-radius:var(--u-r-pil);padding:0 15px}
.foot-merken{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wm{display:inline-flex;align-items:center;justify-content:center;min-height:var(--u-raak);
  padding-inline:18px;color:var(--u-white);text-decoration:none;background:var(--u-on-dark-vlak);
  border:1px solid rgba(255,255,255,.26);border-radius:var(--u-r-vlak)}
.wm:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.5)}
.wm--hyckes   {font-weight:700;font-size:14px;letter-spacing:.22em;text-transform:uppercase}
.wm--brunner  {font-weight:800;font-size:17px;letter-spacing:-.03em}
.wm--dometic  {font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.wm--alpicool {font-weight:700;font-size:16px;letter-spacing:.02em}
.wm--mobicool {font-weight:500;font-size:16px;letter-spacing:.14em;text-transform:lowercase}
.wm--mestic   {font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.wm--westfield{font-weight:500;font-size:15px;letter-spacing:.2em;text-transform:uppercase}

/* ---------- 11. TABS, FAQ, PROSE ---------- */
.tabs-strip{display:flex;gap:2px;border-bottom:1px solid var(--u-line);
  overflow-x:auto;scrollbar-width:none}
.tabs-strip::-webkit-scrollbar{display:none}
.tab{appearance:none;border:1px solid transparent;border-bottom:none;background:transparent;
  font-family:var(--u-font);font-size:var(--u-t-l);font-weight:var(--u-w-medium);
  color:var(--u-muted);padding:var(--u-s-3) var(--u-s-4);border-radius:var(--u-r-vlak) var(--u-r-vlak) 0 0;
  cursor:pointer;white-space:nowrap;margin-bottom:-1px;
  transition:color var(--u-overgang),background var(--u-overgang)}
@media(min-width:760px){.tab{padding:var(--u-s-3) var(--u-s-5)}}
.tab:hover{color:var(--u-ink)}
.tab[aria-selected="true"],.tab.is-on{background:var(--u-white);border-color:var(--u-line);
  border-bottom-color:var(--u-white);color:var(--u-ink);font-weight:var(--u-w-kop)}
.tab:focus-visible{outline:2px solid var(--u-orange);outline-offset:-3px}
.tab-panel{display:none;background:var(--u-white);border:1px solid var(--u-line);
  border-top:none;border-radius:0 0 var(--u-r-vlak) var(--u-r-vlak);padding:18px var(--u-s-3)}
@media(min-width:760px){.tab-panel{padding:var(--u-s-7) var(--u-s-7)}}
.tab-panel.is-on{display:block}

.faq{border-top:1px solid var(--u-line)}
.faq details{border-bottom:1px solid var(--u-line)}
.faq details:last-child{border-bottom:none}
.faq summary{padding-block:var(--u-s-5);cursor:pointer;font-weight:var(--u-w-kop);
  font-size:16px;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:var(--u-s-5);user-select:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;font-weight:var(--u-w-normaal);
  color:var(--u-muted);flex-shrink:0}
.faq details[open] summary::after{content:'−'}
.faq .ans{padding:0 0 var(--u-s-5);font-size:var(--u-t-l);line-height:var(--u-lh-tekst);
  color:var(--u-muted);max-width:680px}
.faq .ans strong{color:var(--u-ink);font-weight:var(--u-w-label)}

.prose{max-width:var(--u-tekstkolom)}
.prose--breed{max-width:74ch}
.prose p{margin:0 0 var(--u-s-3);font-size:var(--u-t-l);line-height:var(--u-lh-lang);
  color:var(--u-ink)}
.prose h2{font-size:var(--u-t-3xl);font-weight:var(--u-w-zwaar);margin:0 0 var(--u-s-3)}
.prose h3{font-size:18px;font-weight:var(--u-w-zwaar);margin:var(--u-s-6) 0 var(--u-s-2)}
.prose a{color:var(--u-orange);font-weight:var(--u-w-medium)}
.prose a:hover{text-decoration:underline}

/* ---------- 12. PAGINA EN WORDPRESS ---------- */
/* Bouwdocument §2: paginakleur is crème; kaarten en vlakken zijn wit. */
html,body{background:var(--u-cream)}
/* Hello Elementor reset.css zet een systeemletter op body; het design system wint. */
body,button,input,select,textarea,.elementor,.elementor *{font-family:var(--u-font)}
/* skip-link van Hello Elementor in huisstijl */
.skip-link{position:absolute;left:-9999px;top:auto;z-index:1000;background:var(--u-ink);
  color:var(--u-white);padding:var(--u-s-3) var(--u-s-4);border-radius:var(--u-r-vlak)}
.skip-link:focus{left:var(--u-s-4);top:var(--u-s-4)}
/* screen-reader-tekst (WP-conventie), gelijk aan .visueel-verborgen */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
/* getallen: nooit monospace, wel tabellair */
.num,.u-getal,.price,.woocommerce-Price-amount{font-variant-numeric:tabular-nums}

/* ---------- 13. ELEMENTOR ---------- */
/* Widgets erven de DS-typografie; kleuren komen uit Global Colors, die gelijk zijn aan de tokens. */
.elementor-widget-container p{color:var(--u-muted);line-height:var(--u-lh-lang)}
.elementor-widget-container p:last-child{margin-bottom:0}
.elementor-heading-title{font-family:var(--u-font);line-height:var(--u-lh-strak);
  letter-spacing:var(--u-ls-kop)}
.elementor-widget-container a:not([class*="btn"]){color:inherit}
/* container 1180px met 32px padding (20px onder 600px), prompt §4 */
.e-con.wrap,.e-con.u-wrap{--content-width:var(--u-wrap);max-width:calc(var(--u-wrap) + 2 * var(--u-wrap-pad));
  margin-inline:auto;padding-inline:var(--u-wrap-pad)}
@media(max-width:600px){.e-con.wrap,.e-con.u-wrap{padding-inline:var(--u-s-5)}}
/* Elementor-knop krijgt de DS-knop als basis; variant via een CSS-class op de widget */
.elementor-button{border-radius:var(--u-r-knop);font-family:var(--u-font);
  font-weight:var(--u-w-kop);font-size:var(--u-t-l);min-height:var(--u-raak);
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 var(--u-s-6);line-height:1;
  transition:background var(--u-overgang),border-color var(--u-overgang),color var(--u-overgang)}
.btn--koop .elementor-button{background:var(--u-good);color:var(--u-white)}
.btn--koop .elementor-button:hover{background:var(--u-good-hover);color:var(--u-white)}
.btn--ink .elementor-button{background:var(--u-ink);color:var(--u-white)}
.btn--ink .elementor-button:hover{background:var(--u-ink-hover);color:var(--u-white)}
.btn--actie .elementor-button{background:var(--u-orange);color:var(--u-white)}
.btn--actie .elementor-button:hover{background:var(--u-orange-hover);color:var(--u-white)}
.btn--geel .elementor-button{background:var(--u-yellow);color:var(--u-ink)}
.btn--geel .elementor-button:hover{background:var(--u-yellow-hover);color:var(--u-ink)}
.btn--rand .elementor-button{background:var(--u-white);color:var(--u-ink);
  border:1.5px solid var(--u-line)}
.btn--rand .elementor-button:hover{border-color:var(--u-ink);background:var(--u-cream);color:var(--u-ink)}
.btn--rand-sterk .elementor-button{background:var(--u-white);color:var(--u-ink);
  border:1.5px solid var(--u-ink)}
.btn--rand-sterk .elementor-button:hover{background:var(--u-ink);color:var(--u-white)}

/* ---------- 14. WOOCOMMERCE-BASIS ---------- */
/* Minimaal; fase 7 bouwt de productpagina uit. Geen kleur buiten tokens. */
.woocommerce .button,.woocommerce button.button,.woocommerce a.button,
.woocommerce input.button,.wc-block-components-button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--u-s-2);
  min-height:var(--u-raak);padding:0 var(--u-s-6);border:1.5px solid transparent;
  border-radius:var(--u-r-knop);font-family:var(--u-font);font-size:var(--u-t-l);
  font-weight:var(--u-w-kop);line-height:1;cursor:pointer;
  background:var(--u-ink);color:var(--u-white);text-decoration:none}
.woocommerce .button:hover,.woocommerce button.button:hover,.woocommerce a.button:hover,
.woocommerce input.button:hover,.wc-block-components-button:hover{
  background:var(--u-ink-hover);color:var(--u-white)}
.woocommerce button.button.alt,.woocommerce .single_add_to_cart_button,
.woocommerce a.button.alt,.woocommerce .checkout-button,
.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button{
  background:var(--u-good);color:var(--u-white)}
.woocommerce button.button.alt:hover,.woocommerce .single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,.woocommerce .checkout-button:hover,
.wc-block-cart__submit-button:hover,.wc-block-components-checkout-place-order-button:hover{
  background:var(--u-good-hover);color:var(--u-white)}
.woocommerce .button:disabled,.woocommerce button.button:disabled{opacity:.45;cursor:not-allowed}
.woocommerce .price,.woocommerce-Price-amount{color:var(--u-ink);font-weight:var(--u-w-kop)}
.woocommerce del,.woocommerce .price del,.price s{color:var(--u-muted);font-weight:var(--u-w-normaal);
  text-decoration:line-through}
.woocommerce ins{text-decoration:none}
.woocommerce .stock.in-stock{color:var(--u-good);font-weight:var(--u-w-label)}
.woocommerce .stock.out-of-stock{color:var(--u-deal);font-weight:var(--u-w-label)}
.woocommerce .onsale{background:var(--u-deal);color:var(--u-white);border-radius:var(--u-r-vlak);
  font-size:var(--u-t-xs);font-weight:var(--u-w-kop);padding:5px 10px;min-height:0;min-width:0;
  line-height:1.2}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.woocommerce-input-wrapper .input-text{
  min-height:var(--u-raak);border:1px solid var(--u-line);border-radius:var(--u-r-vlak);
  padding:11px 13px;font-size:var(--u-t-l);color:var(--u-ink);background:var(--u-white)}
.woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{outline:2px solid var(--u-orange);outline-offset:-1px;
  border-color:transparent}
.woocommerce-message,.woocommerce-info,.woocommerce-error{border:1px solid var(--u-line);
  border-radius:var(--u-r-vlak);background:var(--u-sand-2);color:var(--u-ink);
  border-top-color:var(--u-line)}
.woocommerce-message{background:var(--u-good-soft)}
.woocommerce-error{background:var(--u-deal-soft)}
.woocommerce table.shop_table{border:1px solid var(--u-line);border-radius:var(--u-r-vlak);
  border-collapse:separate}
.woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:var(--u-line-soft)}

/* ---------- 15. AANVULLENDE DS-COMPONENTEN (in rapport-css als ontbrekend gemeld) ---------- */
/* alternatievenkaart: "Niet helemaal wat je zoekt?" */
.alt-card{display:flex;flex-direction:column;gap:var(--u-s-1);text-decoration:none;
  color:var(--u-ink);background:var(--u-white);border:1px solid var(--u-line);
  border-radius:var(--u-r-vlak);padding:var(--u-s-4);transition:border-color var(--u-overgang)}
.alt-card:hover{border-color:var(--u-orange)}
.alt-card.is-current{background:var(--u-sand-4);border-color:var(--u-ink);cursor:default}
.alt-card.is-current:hover{border-color:var(--u-ink)}
.alt-img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:var(--u-sand-3);border-radius:var(--u-r-vlak);padding:var(--u-s-3);
  margin-bottom:var(--u-s-2);overflow:hidden}
.alt-img img{max-width:100%;max-height:100%;object-fit:contain}
.alt-why{font-size:var(--u-t-xs);font-weight:var(--u-w-kop);letter-spacing:var(--u-ls-label);
  text-transform:uppercase;color:var(--u-orange)}
.alt-brand{font-size:12px;color:var(--u-muted);font-weight:var(--u-w-label)}
.alt-name{font-size:var(--u-t-l);font-weight:var(--u-w-kop);line-height:1.3}
.alt-spec{font-size:var(--u-t-s);color:var(--u-muted);font-variant-numeric:tabular-nums}
.alt-price{margin-top:auto;padding-top:var(--u-s-2);font-size:var(--u-t-xl);
  font-weight:var(--u-w-zwaar);font-variant-numeric:tabular-nums}
.alt-card--all{align-items:center;justify-content:center;text-align:center;
  background:var(--u-sand-2);color:var(--u-orange);font-weight:var(--u-w-kop)}

/* terugvalmelding bij een variantwissel: "De 75 L is er alleen met twee zones." */
.pick-note{margin-top:var(--u-s-2);padding:var(--u-s-2) var(--u-s-3);font-size:var(--u-t-m);
  color:var(--u-warn);background:var(--u-warn-soft);border-radius:var(--u-r-vlak)}
.pick-note:empty{display:none}

/* "foto volgt": arceervlak als component */
.foto-volgt{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  background:var(--u-hatch);border:1px solid var(--u-line);border-radius:var(--u-r-vlak);
  font-size:12px;color:var(--u-muted);letter-spacing:.02em}

/* ---------- 16. KOP EN VOET: aanvullingen op secties 9 en 10 ---------- */
/* logo als afbeelding (beeldmerk + wit woordmerk) */
.logo .logo-img,.foot-logo .logo-img{display:block;height:32px;width:auto}
.foot-logo .logo-img{height:36px}
.foot-logo{margin-bottom:var(--u-s-3)}
.nav-link-simple{padding-inline:var(--u-s-3);height:var(--u-nav-h);display:flex;align-items:center;white-space:nowrap;
  color:var(--u-white);transition:color var(--u-overgang)}
.nav-link-simple:hover{color:var(--u-yellow)}
.nav-links a[aria-current="page"]{color:var(--u-yellow)}
.nav-links > .nav-sluit{display:none}
/* hamburger is een link (werkt zonder JS); als knop gestyled */
a.nav-menu-knop{text-decoration:none}
/* zoekveld: <details> werkt zonder JS */
.nav-zoek{position:relative}
.nav-zoek summary{list-style:none;min-width:var(--u-raak);min-height:var(--u-raak);justify-content:center}
.nav-zoek summary::-webkit-details-marker{display:none}
.nav-zoek[open] summary{color:var(--u-yellow)}
.nav-zoek-form{position:absolute;right:0;top:calc(100% + 6px);z-index:70;display:flex;gap:var(--u-s-2);
  width:min(92vw,360px);padding:var(--u-s-3);background:var(--u-white);border:1px solid var(--u-line);
  border-radius:var(--u-r-vlak);box-shadow:var(--u-sh-menu)}
.nav-zoek-form .invoer{flex:1;min-width:0}
.nav-icon{min-width:var(--u-raak);min-height:var(--u-raak);justify-content:center}
/* mobiel menu zonder JS: :target opent, sluitlink sluit; met JS regelt .is-open het */
@media(max-width:899.98px){
  .nav-links:target{display:flex}
  .nav-links:target > .nav-sluit{display:block;align-self:flex-end;padding:var(--u-s-3) var(--u-s-1);color:var(--u-on-dark-3);
    font-size:var(--u-t-s)}
  .js .nav-links > .nav-sluit{display:none}
  /* zonder JS staan alle megamenu-kolommen uitgeklapt als platte lijst */
  .no-js .nav-item .mega-menu{display:block;position:static;min-width:0;background:transparent;border:none;
    box-shadow:none;padding:0;opacity:1;visibility:visible;pointer-events:auto}
  .no-js .nav-item .nav-chevron{display:none}
  .mega-help::after{content:""}
  .mega-help{margin-bottom:var(--u-s-4)}
}
@media(min-width:900px){
  .nav-item:focus-within .nav-chevron{transform:rotate(180deg);opacity:1}
  .nav-item:focus-within > a{color:var(--u-yellow)}
}
/* voet: blokken uit het prototype (rapport-homepage §8.4) */
.site-voet .foot-lijst{display:flex;flex-direction:column;gap:9px;list-style:none;margin:0;padding:0}
.foot-brief{display:grid;gap:var(--u-s-4);align-items:center;padding:26px 0;border-top:1px solid var(--u-on-dark-line)}
@media(min-width:820px){.foot-brief{grid-template-columns:1fr 420px;gap:var(--u-s-9)}}
.foot-brief h5,.foot-brief .voet-kop{margin-bottom:6px}
.foot-brief p{font-size:var(--u-t-m);color:var(--u-on-dark-2);margin:0;max-width:46ch;line-height:1.5}
.brief-form .btn{min-height:var(--u-raak)}
.brief-form[aria-disabled="true"]{opacity:.55}
.foot-dealer{display:grid;gap:14px;padding:26px 0;border-top:1px solid var(--u-on-dark-line)}
.foot-dealer-kop,.foot-betalen-kop{font-size:var(--u-t-xs);font-weight:var(--u-w-kop);
  letter-spacing:var(--u-ls-caps);text-transform:uppercase;color:var(--u-yellow)}
.foot-betalen{display:flex;flex-wrap:wrap;align-items:center;gap:var(--u-s-2);padding:22px 0;
  border-top:1px solid var(--u-on-dark-line)}
.foot-betalen-kop{margin-right:var(--u-s-2)}
.wm-logo{max-height:22px;width:auto}


/* ---------- 17. GEDEELDE BLOKONDERDELEN (fase 4; rapport-homepage blokken 7–15, rapport-categorie §5–8) ---------- */
/* sectiekop met rechterlink */
.res-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:18px}
.res-link{font-size:var(--u-t-m);font-weight:var(--u-w-kop);color:var(--u-orange);white-space:nowrap}
.res-link:hover{text-decoration:underline}
/* productkaart: aanvullingen op sectie 8 */
.pkaart-rang{position:absolute;top:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;background:var(--u-ink);color:var(--u-white);font-size:13px;font-weight:var(--u-w-zwaar);
  border-radius:var(--u-r-vlak) 0 var(--u-r-vlak) 0}
.pkaart-rang ~ .badge--op-foto{left:38px}
.pkaart--uitgelicht .pkaart-beeld{aspect-ratio:4/3;padding:12px}
.pkaart--uitgelicht .pkaart-naam{min-height:2.4em;font-size:14.5px}
.pkaart--uitgelicht .pkaart-merk{padding-top:12px}
.pkaart--uitgelicht .pkaart-spec,.pkaart--uitgelicht .pkaart-voorraad{font-size:12px}
.pkaart--uitgelicht .pkaart-prijs{padding-block:10px 12px}
.pkaart--uitgelicht .pkaart-prijs b{font-size:var(--u-t-xl)}
.pkaart--toplijst{padding:14px;gap:3px}
.pkaart--toplijst .pkaart-beeld{border:none;border-radius:var(--u-r-vlak);padding:10px;margin-bottom:8px}
.pkaart--toplijst > :not(.pkaart-beeld){padding-inline:0}
.pkaart--toplijst .pkaart-merk{padding-top:0;font-size:var(--u-t-xs)}
.pkaart--toplijst .pkaart-naam{font-size:14px;min-height:0;line-height:1.25}
.pkaart--toplijst .pkaart-spec{font-size:12px}
.pkaart--toplijst .pkaart-prijs{padding-block:8px 0}
.pkaart--toplijst .pkaart-prijs b{font-size:16px}
/* categorietegels */
.cats{display:grid;gap:var(--u-s-3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1080px){.cats--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cats--6{grid-template-columns:repeat(6,minmax(0,1fr))}}
.cat-tegel{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--u-ink);
  background:var(--u-white);border:1px solid var(--u-line);border-radius:var(--u-r-vlak);padding:var(--u-s-4);
  transition:border-color var(--u-overgang)}
.cat-tegel:hover{border-color:var(--u-orange)}
.cat-tegel-beeld{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--u-sand-3);
  border-radius:var(--u-r-vlak);margin-bottom:6px;overflow:hidden}
.cat-tegel-beeld img{max-width:86%;max-height:86%;width:auto;height:auto;object-fit:contain}
.cat-tegel-beeld--leeg{background:var(--u-hatch)}
.cat-tegel-naam{font-size:var(--u-t-l);font-weight:var(--u-w-kop);line-height:1.25}
.cat-tegel-aantal{font-size:var(--u-t-s);color:var(--u-muted)}
/* advieskaarten */
.advies{display:grid;gap:var(--u-s-3);grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.advies{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.advies{grid-template-columns:repeat(4,minmax(0,1fr))}}
.advies-kaart{display:flex;flex-direction:column;gap:var(--u-s-2);text-decoration:none;color:var(--u-ink);
  background:var(--u-sand-2);border:1px solid var(--u-line);border-radius:var(--u-r-vlak);padding:var(--u-s-5);
  transition:border-color var(--u-overgang)}
.advies-kaart:hover{border-color:var(--u-orange)}
.advies-label{font-size:11px;font-weight:var(--u-w-kop);letter-spacing:.09em;text-transform:uppercase;color:var(--u-orange)}
.advies-kaart h3{font-size:16.5px;font-weight:var(--u-w-zwaar);line-height:1.25;margin:0}
.advies-kaart p{font-size:var(--u-t-m);line-height:1.5;color:var(--u-muted);margin:0}
.advies-kaart .lees{margin-top:auto;padding-top:var(--u-s-3);font-size:var(--u-t-m);font-weight:var(--u-w-kop);color:var(--u-orange)}
/* merkband */
.merkband{display:grid;gap:var(--u-s-4);background:var(--u-ink);border-radius:var(--u-r-vlak);padding:26px 28px}
@media(min-width:900px){.merkband{grid-template-columns:240px minmax(0,1fr);gap:36px;align-items:center}}
.merkband h2{font-size:19px;font-weight:var(--u-w-zwaar);color:var(--u-white);margin:0 0 6px}
.merkband p{font-size:var(--u-t-m);line-height:1.5;color:var(--u-on-dark-2);margin:0}
/* keuzehulpblok */
.kh-blok{display:grid;gap:var(--u-s-6);background:var(--u-ink);color:var(--u-white);border-radius:var(--u-r-vlak);padding:30px}
@media(min-width:820px){.kh-blok{grid-template-columns:minmax(0,1fr) 320px;gap:44px;align-items:center}}
.kh-blok h2{font-size:26px;font-weight:var(--u-w-zwaar);margin:var(--u-s-2) 0 10px;color:var(--u-white)}
.kh-blok p{font-size:var(--u-t-l);line-height:var(--u-lh-tekst);color:var(--u-on-dark-2);margin:0 0 18px;max-width:52ch}
.kh-label{font-size:var(--u-t-xs);font-weight:var(--u-w-kop);letter-spacing:var(--u-ls-caps);text-transform:uppercase;color:var(--u-yellow)}
.kh-blok .btn{min-height:48px}
.kh-stappen{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kh-stappen li{display:flex;align-items:center;gap:var(--u-s-3);font-size:14px;color:var(--u-on-dark-1)}
.kh-stappen span{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;
  border-radius:var(--u-r-rond);background:var(--u-on-dark-vlak-2);font-size:13px;font-weight:var(--u-w-kop)}
/* vraagformulier: experts (zand) en vraagblok (in de tab) */
.experts{display:grid;gap:26px;padding:26px}
@media(min-width:860px){.experts{grid-template-columns:minmax(0,1fr) 380px;gap:44px;align-items:center}}
.experts h2{font-size:var(--u-t-3xl);font-weight:var(--u-w-zwaar);margin:0 0 var(--u-s-2)}
.experts p.vraag-lead,.vraagblok p.vraag-lead{font-size:var(--u-t-l);line-height:var(--u-lh-tekst);color:var(--u-ink);max-width:52ch;margin:0}
.vraagblok{display:grid;gap:26px}
@media(min-width:820px){.vraagblok{grid-template-columns:minmax(0,1fr) 380px;gap:44px}}
.vraagblok h3{font-size:19px;font-weight:var(--u-w-zwaar);margin:0 0 var(--u-s-2)}
.vraag-usp{list-style:none;margin:var(--u-s-3) 0 0;padding:0;display:grid;gap:6px;font-size:var(--u-t-m);color:var(--u-muted)}
.vraag-usp a{color:var(--u-orange);font-weight:var(--u-w-label)}
.vraagblok .vraag-form{background:var(--u-cream);border:1px solid var(--u-line);border-radius:var(--u-r-vlak);padding:var(--u-s-5)}
.vraag-klein{font-size:var(--u-t-s);color:var(--u-muted);margin:10px 0 0}
.vraag-klein a{color:var(--u-orange)}
/* Gravity Forms in DS-stijl (thema-CSS van GF staat uit) */
.gform_wrapper .gform_fields{display:grid;gap:var(--u-s-4);list-style:none;margin:0;padding:0}
.gform_wrapper .gfield_label{display:block;font-size:var(--u-t-xs);font-weight:var(--u-w-kop);letter-spacing:.06em;
  text-transform:uppercase;color:var(--u-muted);margin-bottom:6px}
.gform_wrapper .gfield_required{color:var(--u-orange);margin-left:2px}
.gform_wrapper .ginput_container input:not([type=checkbox]):not([type=radio]),.gform_wrapper .ginput_container textarea,
.gform_wrapper .ginput_container select{width:100%;min-height:var(--u-raak);font-family:inherit;font-size:var(--u-t-l);color:var(--u-ink);
  background:var(--u-white);border:1px solid var(--u-line);border-radius:var(--u-r-vlak);padding:11px 13px}
.gform_wrapper .ginput_container textarea{min-height:96px;resize:vertical}
.gform_wrapper .gfield_description{font-size:var(--u-t-s);color:var(--u-muted);margin-top:6px}
.gform_wrapper .gfield_validation_message,.gform_wrapper .validation_error{font-size:var(--u-t-s);color:var(--u-deal);margin-top:6px}
.gform_wrapper .gfield_error .ginput_container input,.gform_wrapper .gfield_error .ginput_container textarea{border-color:var(--u-deal)}
.gform_wrapper .gform_footer{margin-top:var(--u-s-4)}
.gform_wrapper .gform_required_legend,.gform_wrapper .gfield--type-honeypot{display:none}
.gform_confirmation_message{font-size:var(--u-t-l);color:var(--u-good-hover);background:var(--u-good-soft);
  border-radius:var(--u-r-vlak);padding:var(--u-s-4)}

.badge{white-space:nowrap}


/* ---------- 18. HOMEPAGE-BLOKKEN (fase 5; rapport-homepage §4, blokken 5–11) ---------- */
/* dividers tussen secties (prototype: <hr class="divider">) */
.u-divider{border-top:1px solid var(--u-line)}
.e-con.section-sm{padding-block:var(--u-s-11)}
/* hero: verloop op het geheel, vlak links transparant, crèmepaneel rechts met 1px lijn */
.hero2{display:grid;border-radius:var(--u-r-vlak);overflow:hidden;margin:18px 0 12px;
  background:var(--u-brand-gradient);color:var(--u-ink)}
@media(min-width:900px){.hero2{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}}
@media(min-width:1200px){.hero2{grid-template-columns:minmax(0,1.85fr) minmax(0,1fr)}}
.hero2-vlak{position:relative;background:transparent;padding:24px 20px 18px;display:flex;flex-direction:column;
  justify-content:space-between;gap:18px;min-height:260px}
@media(min-width:900px){.hero2-vlak{padding:30px 30px 22px;min-height:360px}}
.hero2-kortingen{display:flex;gap:10px}
.hk{display:flex;flex-direction:column;align-items:center;justify-content:center;width:66px;height:66px;
  border-radius:var(--u-r-rond);background:var(--u-ink);color:var(--u-white);font-size:10.5px;
  font-weight:var(--u-w-kop);line-height:1.1;text-transform:uppercase;letter-spacing:.04em}
.hk b{font-size:17px;font-weight:var(--u-w-zwaar);letter-spacing:-.02em;color:var(--u-white)}
.hero2-spullen{display:flex;align-items:flex-end;justify-content:center;gap:14px;flex:1;min-height:0}
.hero2-spullen img{max-height:200px;max-width:31%;width:auto;height:auto;min-width:0;flex:0 1 auto;object-fit:contain;filter:var(--u-sh-product)}
@media(min-width:900px){.hero2-spullen img{max-height:250px}}
.hero2-merken{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.wmo{font-size:12px;color:var(--u-ink);opacity:.9}
.hero2-paneel{position:relative;background:var(--u-cream);color:var(--u-ink);padding:28px 26px 30px;
  display:flex;flex-direction:column;justify-content:center}
@media(min-width:900px){.hero2-paneel{padding:40px 38px;border-left:1px solid var(--u-line)}}
.hero2-kicker{font-size:var(--u-t-xs);font-weight:var(--u-w-kop);letter-spacing:.12em;text-transform:uppercase;
  color:var(--u-deal);margin-bottom:var(--u-s-3)}
.hero2-kop{font-size:clamp(28px,2.9vw,38px);font-weight:var(--u-w-zwaar);line-height:1.03;letter-spacing:-.025em;
  margin:0 0 14px;color:var(--u-ink)}
.hero2-zin{font-size:var(--u-t-l);line-height:1.55;color:var(--u-muted-2);margin:0 0 22px;max-width:38ch}
.hero2-knop{align-self:flex-start;min-height:48px;padding-inline:26px}
.hero2-tot{margin-top:14px;font-size:var(--u-t-s);color:var(--u-muted)}
/* promotegels */
.promo3{display:grid;gap:var(--u-s-3);grid-template-columns:1fr;margin-bottom:26px}
@media(min-width:760px){.promo3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.promo{display:grid;grid-template-columns:minmax(0,1fr) 92px;align-items:center;gap:14px;min-height:150px;
  padding:var(--u-s-5);text-decoration:none;color:var(--u-ink);background:var(--u-sand);border:1px solid var(--u-line);
  border-radius:var(--u-r-vlak);transition:border-color var(--u-overgang)}
@media(min-width:1080px){.promo{grid-template-columns:minmax(0,1fr) 112px}}
@media(max-width:520px){.promo{grid-template-columns:minmax(0,1fr) 76px;gap:10px}.promo-beeld img{max-height:86px}}
.promo:hover{border-color:var(--u-orange)}
.promo-tekst{display:flex;flex-direction:column;justify-content:space-between;gap:var(--u-s-4);height:100%}
.promo-kop{font-size:21px;font-weight:var(--u-w-zwaar);line-height:1.15;letter-spacing:-.015em}
.promo-knop{align-self:flex-start;min-height:42px;padding-inline:18px;font-size:14px}
.promo-beeld{display:flex;align-items:center;justify-content:center;height:100%}
.promo-beeld img{max-width:100%;max-height:118px;width:auto;height:auto;object-fit:contain;filter:var(--u-sh-product)}
.promo--vlak{border-color:transparent}
.promo--vlak:hover{border-color:var(--u-ink)}
.promo--vlak .promo-kop{color:var(--u-ink)}
/* introstrook met de H1 */
.intro{display:grid;gap:18px;padding:var(--u-s-2) 0 30px;border-bottom:1px solid var(--u-line);margin-bottom:34px}
@media(min-width:900px){.intro{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--u-s-10)}}
.intro h1{font-size:clamp(22px,2.4vw,30px);font-weight:var(--u-w-zwaar);line-height:1.15;margin:0 0 var(--u-s-2);max-width:22ch}
.intro p{font-size:15.5px;line-height:var(--u-lh-tekst);color:var(--u-ink);margin:0;max-width:64ch}
.intro-cijfers{display:flex;gap:28px}
.intro-cijfers div{display:flex;flex-direction:column}
.intro-cijfers span{font-size:var(--u-t-3xl);font-weight:var(--u-w-zwaar);line-height:1}
.intro-cijfers small{font-size:var(--u-t-s);color:var(--u-muted);margin-top:3px}
/* situaties */
.situaties{display:grid;gap:var(--u-s-3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:1000px){.situaties{grid-template-columns:repeat(4,minmax(0,1fr))}}
.situatie{display:flex;flex-direction:column;text-decoration:none;color:var(--u-ink);background:var(--u-white);
  border:1px solid var(--u-line);border-radius:var(--u-r-vlak);overflow:hidden;transition:border-color var(--u-overgang)}
.situatie:hover{border-color:var(--u-orange)}
.situatie-beeld{display:block;aspect-ratio:5/3;background:var(--u-sand-2);overflow:hidden}
.situatie-beeld img{width:100%;height:100%;object-fit:cover}
.situatie-naam{font-size:var(--u-t-xl);font-weight:var(--u-w-zwaar);padding:14px 16px 0}
.situatie-sub{font-size:13px;color:var(--u-muted);padding:4px 16px 16px;line-height:1.45}
/* wat wij beloven */
.belofte{display:grid;gap:var(--u-s-3);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.belofte{grid-template-columns:repeat(3,minmax(0,1fr))}}
.belofte-item{position:relative;background:var(--u-sand-2);border:1px solid var(--u-line);border-radius:var(--u-r-vlak);
  padding:24px 22px 22px;overflow:hidden}
.belofte-item::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--u-brand-gradient)}
.belofte-item h3{font-size:16px;font-weight:var(--u-w-zwaar);margin:0 0 var(--u-s-2)}
.belofte-item p{font-size:var(--u-t-m);line-height:1.55;color:var(--u-ink);opacity:.78;margin:0}
.belofte-item b{color:var(--u-ink);font-weight:var(--u-w-label);opacity:1}
.belofte-item a{color:var(--u-orange);font-weight:var(--u-w-kop)}
/* bundels */
.bundels{display:grid;gap:var(--u-s-3);grid-template-columns:1fr}
@media(min-width:820px){.bundels{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bundel{display:flex;flex-direction:column;text-decoration:none;color:var(--u-ink);background:var(--u-white);
  border:1px solid var(--u-line);border-radius:var(--u-r-vlak);padding:18px;transition:border-color var(--u-overgang)}
.bundel:hover{border-color:var(--u-orange)}
.bundel-beelden{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--u-s-2);margin-bottom:14px}
.bundel-beeld{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:var(--u-sand-3);
  border-radius:var(--u-r-vlak);padding:10px;overflow:hidden}
.bundel-beeld img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.bundel-beeld--leeg span{font-size:var(--u-t-xs);color:var(--u-muted)}
.bundel-plus{font-size:19px;font-weight:var(--u-w-zwaar);color:var(--u-muted)}
.bundel-naam{font-size:16px;font-weight:var(--u-w-zwaar);line-height:1.25;margin-bottom:6px}
.bundel-uitleg{font-size:var(--u-t-m);line-height:1.5;color:var(--u-muted)}
.bundel-prijs{margin-top:auto;padding-top:14px;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}
.bundel-prijs b{font-size:19px;font-weight:var(--u-w-zwaar)}
.bundel-prijs s{font-size:13px;color:var(--u-muted)}
.bundel-tot{margin-top:4px}
/* reviewstrook (pas zichtbaar vanaf de drempel) */
.reviewstrook{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--u-s-3);padding:var(--u-s-4) var(--u-s-5)}
.reviewstrook-score{font-size:var(--u-t-4xl);font-weight:var(--u-w-zwaar)}

@media(max-width:520px){.hero2-spullen{gap:8px}.hero2-spullen img{max-width:30%}}


/* ---------- 19. CATEGORIEARCHIEF EN FILTERS (fase 6; rapport-categorie) ---------- */
.archief .crumb{padding-block:var(--u-s-4)}
/* categoriekop */
.cat-hero{display:grid;border:1px solid var(--u-line);border-radius:var(--u-r-vlak);overflow:hidden;background:var(--u-white);margin:18px 0 20px}
@media(min-width:900px){.cat-hero:not(.cat-hero--zonder-beeld){grid-template-columns:minmax(0,1fr) 40%;align-items:stretch}}
.cat-hero-tekst{padding:22px 20px 20px}
@media(min-width:900px){.cat-hero-tekst{padding:26px 22px 24px}}
@media(min-width:1000px){.cat-hero-tekst{padding:34px 34px 30px}}
.cat-hero h1{font-size:clamp(30px,4vw,44px);margin:0 0 var(--u-s-3)}
.cat-lead{font-size:16px;line-height:1.55;color:var(--u-ink);max-width:52ch;margin:0 0 var(--u-s-5)}
@media(min-width:900px){.cat-lead{font-size:17.5px}}
.cat-lead--2{font-size:var(--u-t-l);line-height:var(--u-lh-tekst);color:var(--u-muted);max-width:56ch;margin:0 0 18px}
@media(max-width:1000px){.cat-lead--2{display:none}}
.cat-hero-cijfers{display:flex;flex-wrap:wrap;gap:26px;padding-top:var(--u-s-4);border-top:1px solid var(--u-line)}
.cat-hero-cijfers div{display:flex;flex-direction:column}
.cat-hero-cijfers span{font-size:22px;font-weight:var(--u-w-zwaar);line-height:1}
.cat-hero-cijfers small{font-size:var(--u-t-s);color:var(--u-muted);margin-top:3px}
.cat-hero-beeld{position:relative;min-height:230px;background:var(--u-sand-2)}
.cat-hero-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-hero-beeld--logo img{object-fit:contain;padding:var(--u-s-8)}
.techniek-regels{display:grid;gap:var(--u-s-3);margin:0 0 var(--u-s-5)}
.techniek-regels dt{font-size:var(--u-t-xs);font-weight:var(--u-w-kop);letter-spacing:var(--u-ls-label);text-transform:uppercase;color:var(--u-muted)}
.techniek-regels dd{margin:2px 0 0;font-size:var(--u-t-l);line-height:1.55}
.techniek-regels .techniek-min{background:var(--u-sand-2);border-left:2px solid var(--u-orange);padding:10px 12px;border-radius:0 var(--u-r-vlak) var(--u-r-vlak) 0}
/* snelfilters */
.snel-knop{margin-bottom:var(--u-s-3)}
@media(min-width:1000px){.snel-knop{display:none}}
.snel{display:grid;gap:var(--u-s-2);padding:0 0 6px}
@media(max-width:999.98px){.snel{display:none}.snel:target,.snel.is-open{display:grid}}
.snel-rij{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.snel-kop{min-width:104px;font-size:var(--u-t-xs);font-weight:var(--u-w-kop);letter-spacing:.09em;text-transform:uppercase;color:var(--u-muted)}
@media(max-width:640px){.snel-kop{min-width:100%}}
/* resultaten: filterkolom + raster */
#resultaten{padding-top:22px}
.res-lijf{display:grid;gap:var(--u-s-6)}
@media(min-width:1000px){.res-lijf{grid-template-columns:250px minmax(0,1fr);gap:var(--u-s-8)}}
.filters-knop{margin-bottom:0}
@media(min-width:1000px){.filters-knop{display:none}}
@media(max-width:999.98px){.filters{display:none}.filters:target,.filters.is-open{display:block;margin-bottom:14px}}
.filter-blok--past{padding:var(--u-s-4)}
.past-veld{display:block;font-size:13px;font-weight:var(--u-w-label);color:var(--u-ink);margin:0 0 var(--u-s-3)}
.past-veld .veld{display:flex;align-items:center;gap:var(--u-s-2);margin:6px 0 0}
.past-veld .veld .invoer{width:96px}
.past-veld select{margin-top:6px}
.filter-hint{font-size:var(--u-t-s);color:var(--u-muted);margin:0 0 var(--u-s-3)}
.js .past-knop{display:none}
.vink-box{width:16px;height:16px;flex:none;border:1.5px solid var(--u-muted-3);border-radius:3px;background:var(--u-white);position:relative}
.vink.checked .vink-box{background:var(--u-orange);border-color:var(--u-orange)}
.vink.checked .vink-box::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--u-white);border-width:0 2px 2px 0;transform:rotate(45deg)}
a.vink{text-decoration:none;color:var(--u-ink)}
a.vink:hover .vink-label{color:var(--u-orange)}
.vink-label{flex:1}
.res-rechts{min-width:0}
.res-kop .sorteer{display:flex;align-items:center;gap:var(--u-s-2);font-size:var(--u-t-s);color:var(--u-muted)}
.res-kop .sorteer select,.res-kop .untrailed-sort-select{width:auto;min-height:var(--u-raak);font-size:14px;padding:11px 12px}
.sorteer-form{display:flex;align-items:center;gap:var(--u-s-2)}
.js .sorteer-knop{display:none}
.chips{margin:var(--u-s-2) 0 var(--u-s-4);min-height:var(--u-raak)}
.chips-kop{font-size:var(--u-t-s);color:var(--u-muted);margin-right:var(--u-s-1)}
.chip--actief{border-color:var(--u-orange);border-width:1.5px}
.chip--actief span{font-size:16px;color:var(--u-orange)}
.chip--actief:hover{background:var(--u-sand-2)}
.js .filter-flits{animation:u-flits 1s ease}
.leeg-voorbeeld{margin-top:22px;font-size:var(--u-t-m);line-height:1.55;color:var(--u-ink);border-style:dashed;padding:14px 16px}
.leeg-voorbeeld a{color:var(--u-orange);font-weight:var(--u-w-label)}
.meer{display:grid;justify-items:center;gap:10px;margin-top:var(--u-s-7)}
.meer-telling{font-size:var(--u-t-m);color:var(--u-muted);margin:0}
.meer-telling b{color:var(--u-ink)}
.knop-tonen{min-height:48px;padding-inline:28px}
.js .paginering{display:none}
.paginering .woocommerce-pagination ul{display:flex;justify-content:center;gap:6px;list-style:none;margin:var(--u-s-6) 0 0;padding:0;border:none}
.paginering .woocommerce-pagination li{border:none}
.paginering .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:var(--u-raak);min-height:var(--u-raak);padding:0 var(--u-s-3);border:1px solid var(--u-line);border-radius:var(--u-r-vlak);background:var(--u-white);color:var(--u-ink);font-weight:var(--u-w-label);text-decoration:none}
.paginering .page-numbers.current{background:var(--u-ink);color:var(--u-white);border-color:var(--u-ink)}
.paginering a.page-numbers:hover{border-color:var(--u-orange)}
.pkaart-past{margin-top:6px}
.pkaart .pkaart-past .status{display:inline-block}
/* maatkaarten */
.maten{display:grid;gap:var(--u-s-3);grid-template-columns:1fr}
@media(min-width:700px){.maten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1040px){.maten{grid-template-columns:repeat(4,minmax(0,1fr))}}
.maat{padding:18px;gap:var(--u-s-1)}
.maat-kop{font-size:var(--u-t-xl);font-weight:var(--u-w-zwaar)}
.maat-liters{font-size:13px;font-weight:var(--u-w-kop);color:var(--u-orange)}
.maat-lijst{list-style:none;margin:var(--u-s-2) 0 0;padding:0;display:grid;gap:4px;font-size:var(--u-t-m);color:var(--u-ink)}
.maat-lijst li{padding-left:14px;position:relative}
.maat-lijst li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:var(--u-r-rond);background:var(--u-orange)}
.maat-voor{margin-top:14px;padding-top:12px;border-top:1px solid var(--u-line);font-size:13px;color:var(--u-muted)}
.maat-aanname{margin:14px 0 0;font-size:13px;color:var(--u-muted)}
/* techniekvergelijking */
.techniek-rij{display:grid;gap:var(--u-s-3);grid-template-columns:1fr}
@media(min-width:760px){.techniek-rij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.techniek-rij{grid-template-columns:repeat(4,minmax(0,1fr))}}
.techniek{padding:var(--u-s-5);gap:var(--u-s-2)}
.techniek h3{font-size:19px;font-weight:var(--u-w-zwaar);margin:0}
.techniek-wat{font-size:14px;line-height:1.55;color:var(--u-ink);margin:0}
.techniek-plus{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px}
.techniek-plus li{padding-left:18px;position:relative}
.techniek-plus li::before{content:"\2713";position:absolute;left:0;color:var(--u-good);font-weight:var(--u-w-kop)}
.techniek-min{font-size:var(--u-t-m);line-height:1.5;background:var(--u-sand-2);border-left:2px solid var(--u-orange);padding:10px 12px;margin:0;color:var(--u-ink)}
.techniek-cta{margin-top:auto;padding-top:var(--u-s-2);font-size:var(--u-t-m)}
/* categorietekst en merkzin */
.categorie-tekst h2{font-size:26px;margin:0 0 var(--u-s-3)}
.categorie-tekst > p{font-size:var(--u-t-l);line-height:1.65;color:var(--u-ink);max-width:70ch;margin:0 0 var(--u-s-6)}
.tekst-kolommen{display:grid;gap:26px 44px}
@media(min-width:1000px){.tekst-kolommen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tekstblok{padding-top:18px;border-top:1px solid var(--u-line)}
.tekstblok h3{font-size:17px;font-weight:var(--u-w-zwaar);margin:0 0 var(--u-s-2)}
.tekstblok p{font-size:var(--u-t-l);line-height:1.65;color:var(--u-ink);max-width:none;margin:0 0 var(--u-s-3)}
.categorie-tekst a{color:var(--u-orange);font-weight:var(--u-w-medium)}
.merkzin{font-size:14px;color:var(--u-muted);line-height:1.7;margin:0}
.merkzin a{color:var(--u-orange);font-weight:var(--u-w-label)}
.merkzin a:hover{text-decoration:underline}
.merkzin-alle{margin-left:6px}
/* FacetWP: geen eigen opmaak nodig; laadtoestand */
.facetwp-template.is-loading{opacity:.6;transition:opacity var(--u-overgang)}

/* FacetWP-basisopmaak uit: onze vink-box is het vinkje */
.facetwp-facet .facetwp-checkbox{background:none;padding-left:0}
.facetwp-facet .facetwp-checkbox.checked{background:none}
.facetwp-facet{margin-bottom:0}

/* ---------- 20. PRODUCTPAGINA (fase 7; rapport-product §2–§7) ---------- */
/* hero: galerij + koopblok */
.product-pagina .hero{display:grid;grid-template-columns:1fr;gap:var(--u-s-9);padding:var(--u-s-4) 0 var(--u-s-11);align-items:start}
@media(min-width:900px){.product-pagina .hero{grid-template-columns:1fr 1fr;gap:var(--u-s-12);padding-bottom:var(--u-s-13)}}
/* galerij */
.gallery{position:relative}
@media(min-width:900px){.gallery{position:sticky;top:calc(var(--u-nav-h) + var(--u-s-4))}}
.gallery-wrap{position:relative}
.gallery-main{aspect-ratio:5/4;border-radius:var(--u-r-vlak);overflow:hidden;background:var(--u-sand-3);
  display:flex;align-items:center;justify-content:center}
@media(min-width:760px){.gallery-main{aspect-ratio:1/1}}
.gallery-main img{width:100%;height:100%;object-fit:contain;display:block;padding:10px;transition:transform .3s ease}
@media(min-width:760px){.gallery-main img{padding:var(--u-s-4)}}
@media(hover:hover){.gallery-main:hover img{transform:scale(1.04)}}
.gallery-main.foto-volgt{aspect-ratio:5/4;font-size:12px;color:var(--u-muted);background:var(--u-hatch)}
.gallery-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--u-on-light-knop);
  border:none;border-radius:var(--u-r-rond);width:44px;height:44px;cursor:pointer;display:flex;align-items:center;
  justify-content:center;z-index:2;box-shadow:var(--u-sh-kaart);color:var(--u-ink);opacity:1;transition:opacity var(--u-overgang)}
.gallery-nav[hidden]{display:none}
.gallery-nav.prev{left:12px}.gallery-nav.next{right:12px}
@media(min-width:760px) and (hover:hover){.gallery-nav{opacity:0;width:38px;height:38px}
  .gallery-wrap:hover .gallery-nav,.gallery-wrap:focus-within .gallery-nav{opacity:1}}
.gallery-nav:hover{background:var(--u-white)}
.gallery-wrap::after{content:attr(data-teller);position:absolute;right:10px;bottom:10px;background:var(--u-overlay);
  color:var(--u-white);font-size:var(--u-t-xs);font-weight:var(--u-w-label);padding:3px 8px;border-radius:var(--u-r-vlak);
  font-variant-numeric:tabular-nums;pointer-events:none}
.gallery-wrap[data-teller=""]::after{display:none}
@media(min-width:760px){.gallery-wrap::after{display:none}}
.gallery-thumbs{display:flex;gap:var(--u-s-2);margin-top:var(--u-s-2);padding-bottom:6px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gallery-thumbs::-webkit-scrollbar{display:none}
.thumb{flex:0 0 62px;width:62px;height:62px;scroll-snap-align:start;border-radius:var(--u-r-vlak);overflow:hidden;
  border:2px solid transparent;background:var(--u-sand-3);display:block;cursor:pointer;transition:border-color var(--u-overgang)}
.thumb img{width:100%;height:100%;object-fit:contain;padding:6px;display:block}
.thumb.active,.thumb[aria-current="true"]{border-color:var(--u-ink)}
.thumb:hover{border-color:var(--u-muted)}
.thumb:focus-visible{outline:2px solid var(--u-orange);outline-offset:2px}
@media(min-width:760px){.gallery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--u-s-2);margin-top:10px;
  overflow:visible;padding-bottom:0}.thumb{width:100%;height:auto;aspect-ratio:1;flex:none}}
.naar-alt{margin:14px 0 0;font-size:14px;color:var(--u-muted)}
.naar-alt a{color:var(--u-orange);font-weight:var(--u-w-label)}
/* koopblok */
.buy{display:flex;flex-direction:column;gap:var(--u-s-6)}
.buy .cart{display:flex;flex-direction:column;gap:var(--u-s-6)}
.product-label{display:inline-block;font-size:12px;font-weight:var(--u-w-label);letter-spacing:var(--u-ls-label);
  text-transform:uppercase;color:var(--u-orange);margin-bottom:10px;text-decoration:none}
.product-label:hover{text-decoration:underline}
.product-titel{margin:0}
.product-sub{font-size:16px;color:var(--u-muted);margin:var(--u-s-3) 0 0;line-height:1.5;max-width:460px}
.star-row{display:flex;align-items:center;gap:var(--u-s-2);font-size:14px;color:var(--u-muted);margin-top:10px}
.stars{color:var(--u-orange);letter-spacing:2px;font-size:13px}
.star-row a{color:var(--u-muted);text-decoration:underline}
.stock-badge{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:var(--u-w-label);color:var(--u-good);margin-top:var(--u-s-3)}
.stock-dot{width:7px;height:7px;border-radius:var(--u-r-rond);background:var(--u-good);animation:stock-pulse 2s infinite}
.stock-badge--uit{color:var(--u-deal)}
.stock-badge--uit .stock-dot{background:var(--u-deal);animation:none}
@keyframes stock-pulse{0%,100%{box-shadow:0 0 0 3px var(--u-good-soft)}50%{box-shadow:0 0 0 5px var(--u-cream)}}
@media(prefers-reduced-motion:reduce){.stock-dot{animation:none}.gallery-main img{transition:none}}
/* modelkiezer */
.picker-label{font-size:13px;font-weight:var(--u-w-label);color:var(--u-ink);margin-bottom:var(--u-s-2)}
.picker-label span{color:var(--u-muted);font-weight:var(--u-w-normaal)}
.picker-label a{color:var(--u-muted);text-decoration:underline}
.picker-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--u-s-2)}
.picker-row[hidden]{display:none}
.pick{border:1.5px solid var(--u-line);border-radius:var(--u-r-vlak);padding:var(--u-s-3) 10px;min-height:var(--u-raak);
  cursor:pointer;text-align:left;background:var(--u-white);color:var(--u-ink);text-decoration:none;display:flex;
  flex-direction:column;gap:2px;position:relative;transition:border-color var(--u-overgang),background var(--u-overgang)}
.pick:hover{border-color:var(--u-orange)}
.pick.on,.pick[aria-current="true"]{border-color:var(--u-orange);background:var(--u-orange-soft)}
.pick--uit{color:var(--u-muted)}
.pick--uit .info{color:var(--u-deal)}
.pick .sz{font-weight:var(--u-w-kop);font-size:15px}
.pick .info{font-size:var(--u-t-xs);color:var(--u-muted)}
.pick .pr{font-size:13px;font-weight:var(--u-w-label);margin-top:var(--u-s-1)}
.pick:focus-visible{outline:2px solid var(--u-orange);outline-offset:2px}
.zone-explain{display:grid;grid-template-columns:1fr 1fr;gap:var(--u-s-2);margin-top:10px}
.zone-block{border-radius:var(--u-r-vlak);padding:11px 13px;min-height:var(--u-raak);border:1.5px solid var(--u-line);
  background:var(--u-white);text-decoration:none;color:inherit;display:block;cursor:pointer;user-select:none;
  transition:border-color var(--u-overgang),background var(--u-overgang)}
.zone-block .zone-name{display:block;font-size:12px;font-weight:var(--u-w-kop);letter-spacing:.04em;text-transform:uppercase;
  color:var(--u-muted);margin-bottom:var(--u-s-1)}
.zone-block .zone-desc{display:block;font-size:var(--u-t-s);color:var(--u-muted);line-height:1.45}
.zone-block:not(.active):hover{border-color:var(--u-orange)}
.zone-block.active,.zone-block[aria-current="true"]{border-color:var(--u-orange);background:var(--u-orange-soft)}
.zone-block.active .zone-name{color:var(--u-orange)}
.zone-block:focus-visible{outline:2px solid var(--u-orange);outline-offset:2px}
.picker .pick-note{border-left:2px solid var(--u-orange);border-radius:0 var(--u-r-vlak) var(--u-r-vlak) 0;
  background:var(--u-sand-2);color:var(--u-ink);font-size:13px;padding:var(--u-s-2) var(--u-s-3);margin:10px 0 0}
/* prijs */
.price-block{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price{font-weight:var(--u-w-zwaar);font-size:38px;letter-spacing:var(--u-ls-kop);line-height:1}
.price-was{font-size:18px;color:var(--u-muted);text-decoration:line-through;font-weight:var(--u-w-normaal)}
.price-save{font-size:13px;font-weight:var(--u-w-label);color:var(--u-orange)}
.price-was[hidden],.price-save[hidden]{display:none}
.price-sub{font-size:13px;color:var(--u-muted);margin-top:var(--u-s-1)}
/* koopargumenten, knoppenrij, geruststellingen */
.benefits{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.benefit{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--u-ink);line-height:1.5}
.benefit strong{font-weight:var(--u-w-kop)}
.benefit-check{width:18px;height:18px;flex-shrink:0;margin-top:2px}
.cta-row{display:flex;gap:10px}
.cta-row .btn-add{flex:1;border-radius:var(--u-r-vlak)}
.cart.is-bezig .btn-add{opacity:.6;pointer-events:none}
.qty input[type=number]{-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.trust-row{list-style:none;margin:0;padding:var(--u-s-1) 0 0;display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--u-muted)}
.trust-item{display:flex;align-items:center;gap:6px}
.trust-item svg{color:var(--u-muted);flex-shrink:0}
/* accessoires */
.upsell{border:1.5px solid var(--u-line);border-radius:var(--u-r-vlak);overflow:hidden}
.upsell-head{font-size:11px;font-weight:var(--u-w-kop);text-transform:uppercase;letter-spacing:var(--u-ls-label);
  color:var(--u-muted);padding:9px 14px;background:var(--u-sand-3);border-bottom:1px solid var(--u-line)}
.upsell-item{display:flex;align-items:center;gap:var(--u-s-3);padding:11px 14px;min-height:var(--u-raak);cursor:pointer;
  border-bottom:1px solid var(--u-line);transition:background var(--u-overgang)}
.upsell-item:last-child{border-bottom:none}
.upsell-item:hover{background:var(--u-sand-3)}
.upsell-check{width:18px;height:18px;accent-color:var(--u-ink);flex-shrink:0;cursor:pointer;margin:0}
.upsell-thumb{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--u-sand-3);border-radius:var(--u-r-vlak);overflow:hidden}
.upsell-thumb img{width:100%;height:100%;object-fit:contain;padding:2px}
.upsell-info{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.upsell-name{font-size:13px;font-weight:var(--u-w-label);color:var(--u-ink)}
.upsell-sub{font-size:var(--u-t-xs);color:var(--u-muted)}
.upsell-price{font-size:var(--u-t-m);font-weight:var(--u-w-kop);color:var(--u-ink);white-space:nowrap}
/* tabbladen: zonder JS alle panelen open met een kop; met JS een tablist */
.product-pagina .tabs{margin-top:6px}
.tab-panel-kop{font-size:var(--u-t-xl);margin:0 0 var(--u-s-4)}
.js .tab-panel-kop{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.no-js .tabs-strip{display:none}
.no-js .tab-panel{display:block;border-top:1px solid var(--u-line);border-radius:var(--u-r-vlak);margin-bottom:var(--u-s-4)}
.tab-panel:focus-visible{outline:2px solid var(--u-orange);outline-offset:-2px}
.vraag-kop{font-size:19px;font-weight:var(--u-w-zwaar);margin:0 0 var(--u-s-4)}
.vraag-scheiding{height:1px;background:var(--u-line);margin:30px 0 26px}
/* specificaties */
.specs-grid{display:grid;grid-template-columns:1fr;border:1px solid var(--u-line);border-radius:var(--u-r-vlak);overflow:hidden}
@media(min-width:760px){.specs-grid{grid-template-columns:1fr 1fr}}
.spec-col{padding:var(--u-s-5) var(--u-s-4);border-bottom:1px solid var(--u-line)}
.spec-col:last-child{border-bottom:none}
@media(min-width:760px){.spec-col{padding:var(--u-s-7) var(--u-s-8);border-bottom:none}
  .spec-col:first-child{border-right:1px solid var(--u-line)}}
.spec-kop{font-size:13px;font-weight:var(--u-w-label);text-transform:uppercase;letter-spacing:var(--u-ls-label);
  color:var(--u-muted);margin:0 0 var(--u-s-5);line-height:1.3}
.spec-lijst{margin:0}
.spec-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--u-s-4);padding:10px 0;
  border-bottom:1px solid var(--u-line);font-size:14.5px}
.spec-row:last-child{border-bottom:none}
.spec-k{color:var(--u-muted)}
.spec-v{font-weight:var(--u-w-label);margin:0;text-align:right}
/* in de doos */
.inbox-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:700px){.inbox-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.inbox-grid{grid-template-columns:repeat(6,1fr)}}
.inbox-item{display:flex;flex-direction:column;gap:2px;padding:var(--u-s-3);background:var(--u-sand-3);border-radius:var(--u-r-vlak)}
.inbox-name{font-size:13px;font-weight:var(--u-w-label)}
.inbox-desc{font-size:12px;color:var(--u-muted)}
/* capaciteit-vertaald en stroom-en-accu */
.capacity{background:var(--u-sand-3);border-radius:var(--u-r-vlak);padding:var(--u-s-7);display:grid;grid-template-columns:1fr;
  gap:var(--u-s-7);align-items:center;margin-top:var(--u-s-6)}
@media(min-width:820px){.capacity{grid-template-columns:1fr 1fr;gap:var(--u-s-10);padding:var(--u-s-9) var(--u-s-10)}}
.capacity--stroom{grid-template-columns:1fr;gap:var(--u-s-4)}
@media(min-width:820px){.capacity--stroom{grid-template-columns:1fr}}
.capacity h3{margin:var(--u-s-3) 0 var(--u-s-2)}
.cap-badge{font-size:11px;font-weight:var(--u-w-kop);letter-spacing:var(--u-ls-label);text-transform:uppercase;color:var(--u-orange)}
.cap-aanname{margin:0 0 var(--u-s-5);color:var(--u-muted);font-size:var(--u-t-l)}
.cap-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--u-s-5)}
.capacity--stroom .cap-stats{margin-top:0;max-width:480px}
.cap-stat{background:var(--u-white);border-radius:var(--u-r-vlak);padding:14px 16px}
.cap-stat-num{font-weight:var(--u-w-zwaar);font-size:32px;color:var(--u-orange);line-height:1}
.cap-stat-unit{font-size:12px;color:var(--u-muted);margin-top:3px}
.cap-rows{display:flex;flex-direction:column;gap:10px}
.cap-row{background:var(--u-white);border-radius:var(--u-r-vlak);padding:var(--u-s-3) 14px;display:flex;align-items:center;gap:var(--u-s-3)}
.cap-row-label{font-size:13px;font-weight:var(--u-w-label);width:110px;flex-shrink:0}
.cap-bar{flex:1;display:flex;flex-wrap:wrap;gap:2.5px;align-content:flex-start}
.cap-sq{width:10px;height:10px;background:var(--u-orange);border-radius:var(--u-r-mini);flex-shrink:0}
.cap-row-count{font-weight:var(--u-w-kop);font-size:15px;min-width:28px;text-align:right;flex-shrink:0}
/* alternatieven (aanvulling op sectie 15) */
.alt-row{display:grid;gap:var(--u-s-3);grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--u-s-6)}
@media(min-width:760px){.alt-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1060px){.alt-row{grid-template-columns:repeat(5,minmax(0,1fr))}}
.alt-card{transition:border-color var(--u-overgang),transform var(--u-overgang)}
a.alt-card:hover{border-color:var(--u-muted-3);transform:translateY(-2px)}
.alt-why{align-self:flex-start;background:var(--u-sand-2);border-radius:var(--u-r-pil);padding:4px 10px;
  letter-spacing:.05em;margin-bottom:var(--u-s-1)}
.alt-card.is-current{border-color:var(--u-orange)}
.alt-card.is-current .alt-why{background:var(--u-orange);color:var(--u-white)}
.alt-card--all{align-items:flex-start;justify-content:center;text-align:left;border-style:dashed;color:var(--u-ink)}
.alt-all-num{font-size:38px;font-weight:var(--u-w-zwaar);line-height:1}
.alt-all-txt{font-size:var(--u-t-m);color:var(--u-muted);margin-top:6px;font-weight:var(--u-w-normaal)}
.alt-all-cta{margin-top:14px;font-size:var(--u-t-m);font-weight:var(--u-w-kop);color:var(--u-orange)}
.alt-img .geen-foto{font-size:12px;color:var(--u-muted)}
/* serie-vergelijking */
.model-grid{display:grid;grid-template-columns:1fr;gap:2px;background:var(--u-line);border:1px solid var(--u-line);
  border-radius:var(--u-r-vlak);overflow:hidden;margin-top:var(--u-s-9)}
@media(min-width:820px){.model-grid--2{grid-template-columns:repeat(2,1fr)}.model-grid--3{grid-template-columns:repeat(3,1fr)}
  .model-grid--4{grid-template-columns:repeat(4,1fr)}}
.model-col{background:var(--u-white);padding:var(--u-s-7) var(--u-s-6);display:flex;flex-direction:column;gap:var(--u-s-4);position:relative}
.model-col.highlight{background:var(--u-ink);color:var(--u-white)}
.model-keuze{position:absolute;top:14px;right:14px;background:var(--u-orange);color:var(--u-white);font-size:10px;
  font-weight:var(--u-w-kop);padding:3px 8px;border-radius:var(--u-r-vlak);letter-spacing:.04em}
.model-img{aspect-ratio:4/3;border-radius:var(--u-r-vlak);overflow:hidden;background:var(--u-sand-3)}
.model-img img{width:100%;height:100%;object-fit:contain;padding:var(--u-s-3)}
.model-name{font-weight:var(--u-w-zwaar);font-size:18px}
.model-tagline{font-size:13px;color:var(--u-muted);line-height:1.45;margin:0}
.highlight .model-tagline{color:var(--u-on-dark-3)}
.pro-sizes{display:flex;gap:6px;margin:0;flex-wrap:wrap}
.pro-sz{min-height:var(--u-raak);display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.highlight .pro-sz{border-color:var(--u-on-dark-line);background:var(--u-on-dark-vlak);color:var(--u-on-dark-2)}
.highlight .pro-sz:hover{border-color:var(--u-on-dark-3)}
.highlight .pro-sz.is-on,.highlight .pro-sz[aria-current="true"]{background:var(--u-orange);border-color:var(--u-orange);color:var(--u-white)}
.model-specs{display:flex;flex-direction:column;gap:6px;margin:0}
.model-spec-row{display:flex;justify-content:space-between;gap:var(--u-s-3);font-size:13px;padding:6px 0;border-bottom:1px solid var(--u-line)}
.model-spec-row:last-child{border-bottom:none}
.model-spec-row .sk{color:var(--u-muted)}
.model-spec-row .sv{font-weight:var(--u-w-label);margin:0;text-align:right}
.highlight .model-spec-row{border-color:var(--u-on-dark-vlak-2)}
.highlight .model-spec-row .sk{color:var(--u-on-dark-3)}
.highlight .model-spec-row .sv{color:var(--u-white)}
.check-yes{color:var(--u-good)}
.check-no{color:var(--u-muted)}
.highlight .check-yes{color:var(--u-good-on-dark)}
.highlight .check-no{color:var(--u-on-dark-4)}
.model-cta{display:block;text-align:center;border:1.5px solid var(--u-line);border-radius:var(--u-r-knop);padding:12px 10px;
  min-height:var(--u-raak);font-size:var(--u-t-m);font-weight:var(--u-w-label);margin-top:auto;text-decoration:none;color:inherit;
  transition:border-color var(--u-overgang),background var(--u-overgang)}
.model-cta:hover{border-color:var(--u-ink);background:var(--u-sand-3)}
.model-cta.primary{background:var(--u-orange);color:var(--u-white);border-color:var(--u-orange)}
.model-cta.primary:hover{background:var(--u-orange-hover);border-color:var(--u-orange-hover)}
/* uitleg */
.feat-row{display:grid;grid-template-columns:1fr;gap:var(--u-s-7);align-items:center;padding:var(--u-s-9) 0;border-top:1px solid var(--u-line)}
.feat-row--eerste{border-top:none;padding-top:var(--u-s-6)}
@media(min-width:820px){.feat-row{grid-template-columns:1fr 1fr;gap:var(--u-s-13);padding:var(--u-s-12) 0}
  .feat-row.flip{direction:rtl}.feat-row.flip > *{direction:ltr}}
.feat-img{aspect-ratio:4/3;border-radius:var(--u-r-vlak);overflow:hidden;background:var(--u-sand-2)}
.feat-img img{width:100%;height:100%;object-fit:cover;display:block}
.feat-img.foto-volgt{aspect-ratio:4/3}
.feat-text{display:flex;flex-direction:column;gap:var(--u-s-4)}
.feat-badge{font-size:12px;font-weight:var(--u-w-label);letter-spacing:var(--u-ls-label);text-transform:uppercase;color:var(--u-orange)}
.feat-text h3{font-size:clamp(20px,2.5vw,28px);margin:0}
.feat-text p{font-size:var(--u-t-l);max-width:440px;margin:0;color:var(--u-muted)}
.feat-detail{list-style:none;margin:var(--u-s-1) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--u-s-2)}
.feat-detail-row{display:flex;align-items:center;gap:10px;font-size:var(--u-t-m)}
.feat-detail-row svg{flex-shrink:0;color:var(--u-orange)}
/* reviews */
.rev-header{display:grid;grid-template-columns:1fr;gap:var(--u-s-6);align-items:start;margin-top:var(--u-s-6)}
@media(min-width:700px){.rev-header{grid-template-columns:200px 1fr;gap:var(--u-s-10)}}
.rev-score{font-weight:var(--u-w-zwaar);font-size:56px;line-height:1;letter-spacing:-0.03em}
.rev-header .stars{font-size:16px}
.rev-meta{font-size:13px;color:var(--u-muted);margin-top:6px}
.rev-bars{display:flex;flex-direction:column;gap:6px;margin-top:var(--u-s-4)}
.rev-bar-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--u-muted)}
.rev-bar-row .lbl{width:24px}
.rev-bar-row .bar{flex:1;height:5px;background:var(--u-line);border-radius:3px;overflow:hidden}
.rev-bar-row .bar i{display:block;height:100%;background:var(--u-orange);border-radius:3px}
.rev-list{display:flex;flex-direction:column;margin-top:var(--u-s-9);border-top:1px solid var(--u-line)}
.rev{padding:var(--u-s-6) 0;border-bottom:1px solid var(--u-line)}
.rev-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--u-s-3);font-size:13px;color:var(--u-muted);margin-bottom:6px}
.rev-name{font-weight:var(--u-w-label);color:var(--u-ink)}
.rev-stars{color:var(--u-orange);font-size:12px;letter-spacing:2px;margin-bottom:var(--u-s-2)}
.rev p{font-size:var(--u-t-l);color:var(--u-ink);line-height:1.55;margin:0 0 var(--u-s-2)}
.rev-wacht{font-size:var(--u-t-s);color:var(--u-warn)}
.review-form{margin-top:var(--u-s-9);max-width:560px}
.review-form label{display:block;font-size:12px;font-weight:var(--u-w-kop);letter-spacing:.06em;text-transform:uppercase;color:var(--u-muted);margin:0 0 6px}
.review-form p,.review-form .comment-form-rating{margin:0 0 var(--u-s-4)}
/* afsluiting */
.final{background:var(--u-sand-3);border-radius:var(--u-r-vlak);padding:36px 28px;display:grid;grid-template-columns:1fr;
  gap:var(--u-s-9);align-items:center;margin:var(--u-s-11) 0 var(--u-s-13)}
@media(min-width:720px){.final{grid-template-columns:1fr auto;padding:var(--u-s-11) var(--u-s-10)}}
.final h2{margin:0 0 10px}
.final p{font-size:var(--u-t-l);max-width:480px;margin:0;color:var(--u-muted)}
.final-actions{display:flex;flex-direction:column;gap:var(--u-s-3);align-items:flex-start}
@media(min-width:720px){.final-actions{align-items:flex-end}}
.final-price{font-weight:var(--u-w-zwaar);font-size:36px;letter-spacing:var(--u-ls-kop);line-height:1}
.final-price small{font-size:16px;color:var(--u-muted);text-decoration:line-through;font-weight:var(--u-w-normaal);margin-left:var(--u-s-2)}
.final-price small[hidden]{display:none}
.final .btn-final{border-radius:var(--u-r-vlak)}
/* meeschuivende koopbalk: alleen mobiel */
.sticky-atc{display:none}
@media(max-width:900px){
  .js .sticky-atc{position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--u-white);border-top:1px solid var(--u-line);
    padding:10px var(--u-s-5);display:flex;align-items:center;justify-content:space-between;gap:var(--u-s-4);
    box-shadow:var(--u-sh-balk);transform:translateY(110%);transition:transform .3s ease}
  .js .sticky-atc.visible{transform:translateY(0)}
}
.sticky-atc-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.sticky-atc-name{font-weight:var(--u-w-kop);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky-atc-price{font-size:13px;color:var(--u-muted)}
.sticky-atc-btn{flex-shrink:0;padding-inline:var(--u-s-7)}
@media(prefers-reduced-motion:reduce){.sticky-atc{transition:none}}
/* winkelwagenlade */
.cart-overlay{position:fixed;inset:0;background:var(--u-overlay);z-index:300;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.cart-overlay[hidden]{display:none}
.cart-overlay.open{opacity:1;visibility:visible}
.cart-panel{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);background:var(--u-white);z-index:301;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
  box-shadow:var(--u-sh-lade);outline:none}
.cart-overlay.open .cart-panel{transform:translateX(0)}
@media(prefers-reduced-motion:reduce){.cart-overlay,.cart-panel{transition:none}}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:var(--u-s-5) var(--u-s-6);border-bottom:1px solid var(--u-line);flex-shrink:0}
.cart-head h2{font-weight:var(--u-w-kop);font-size:17px;margin:0}
.cart-close{background:none;border:none;cursor:pointer;color:var(--u-muted);display:flex;align-items:center;justify-content:center;
  width:var(--u-raak);height:var(--u-raak);border-radius:var(--u-r-vlak);transition:color var(--u-overgang)}
.cart-close:hover{color:var(--u-ink)}
#untrailed-lade-inhoud{display:flex;flex-direction:column;flex:1;min-height:0}
.cart-items{flex:1;overflow-y:auto;padding:var(--u-s-5) var(--u-s-6);display:flex;flex-direction:column;gap:var(--u-s-4)}
.cart-melding{background:var(--u-deal-soft);color:var(--u-deal);padding:10px 12px;border-radius:var(--u-r-vlak);font-size:var(--u-t-m);margin:0}
.cart-leeg{color:var(--u-muted);margin:0}
.cart-item{display:flex;gap:14px;align-items:flex-start}
.cart-item-img{width:72px;height:72px;flex-shrink:0;border-radius:var(--u-r-vlak);background:var(--u-sand-3);overflow:hidden;display:block}
.cart-item-img img{width:100%;height:100%;object-fit:contain;padding:6px}
.cart-item-body{flex:1;min-width:0;display:flex;flex-direction:column}
.cart-item-name{font-size:14px;font-weight:var(--u-w-label);color:var(--u-ink);line-height:1.35}
.cart-item-meta{font-size:12px;color:var(--u-muted);margin-top:2px}
.cart-item-price{font-weight:var(--u-w-kop);font-size:15px;margin-top:5px}
.cart-item-remove{background:none;border:none;cursor:pointer;color:var(--u-muted);font-size:20px;line-height:1;
  width:var(--u-raak);height:var(--u-raak);display:flex;align-items:center;justify-content:center;flex-shrink:0;
  align-self:center;text-decoration:none;transition:color var(--u-overgang)}
.cart-item-remove:hover{color:var(--u-ink)}
.cart-suggestions{padding:14px var(--u-s-6) 18px;background:var(--u-sand-3);border-top:1px solid var(--u-line);flex-shrink:0}
.cart-sugg-title{font-size:11px;font-weight:var(--u-w-kop);text-transform:uppercase;letter-spacing:var(--u-ls-label);color:var(--u-muted);margin-bottom:10px}
.cart-sugg-item{display:flex;align-items:center;gap:10px;padding:var(--u-s-2) 0;border-bottom:1px solid var(--u-line)}
.cart-sugg-item:last-child{border-bottom:none}
.cart-sugg-img{width:48px;height:48px;flex-shrink:0;border-radius:var(--u-r-vlak);background:var(--u-white);overflow:hidden;display:block}
.cart-sugg-img img{width:100%;height:100%;object-fit:contain;padding:4px}
.cart-sugg-body{flex:1;min-width:0;display:flex;flex-direction:column}
.cart-sugg-name{font-size:13px;font-weight:var(--u-w-label);color:var(--u-ink)}
.cart-sugg-meta{font-size:11px;color:var(--u-muted);margin-top:1px}
.cart-sugg-price{font-weight:var(--u-w-kop);font-size:13px;color:var(--u-ink);margin-top:2px}
.cart-sugg-add{width:var(--u-raak);min-height:var(--u-raak);text-decoration:none}
.cart-divider{height:1px;background:var(--u-line);flex-shrink:0}
.cart-footer{padding:var(--u-s-5) var(--u-s-6);flex-shrink:0}
.cart-subtotal{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--u-s-4)}
.cart-subtotal-label{font-size:14px;color:var(--u-muted)}
.cart-subtotal-val{font-weight:var(--u-w-zwaar);font-size:24px}
.cart-cta-row{display:flex;gap:10px}
.cart-cta-row .btn{flex:1;min-height:48px;padding-inline:var(--u-s-3);font-size:14px}
/* fase 8: modules maatlijn, montage, compatibiliteit */
.maatlijst{margin:0;display:grid;gap:0;max-width:560px}
.maatlijst-rij{display:flex;justify-content:space-between;gap:var(--u-s-4);padding:10px 0;border-bottom:1px solid var(--u-line);font-size:14.5px}
.maatlijst-rij:last-child{border-bottom:none}
.maatlijst dt{color:var(--u-muted)}
.maatlijst dd{margin:0;font-weight:var(--u-w-label);text-align:right}
.montage-tekst{margin-top:var(--u-s-4)}
#compatibiliteit .raster{margin-top:var(--u-s-6)}

/* ---------- 21. LANDING (coming-soon tot de livegang) ---------- */
.landing-body{background:var(--u-cream)}
.landing-kop{background:var(--u-ink);padding:var(--u-s-4) 0}
.landing-logo{display:inline-flex;align-items:center}
.landing-hero{padding:var(--u-s-10) 0 var(--u-s-8);max-width:820px}
.landing-eyebrow{display:inline-block;font-size:12px;font-weight:var(--u-w-label);letter-spacing:var(--u-ls-label);
  text-transform:uppercase;color:var(--u-orange);margin-bottom:10px}
.landing-hero h1{margin:0 0 var(--u-s-4)}
.landing-zin{font-size:var(--u-t-xl);line-height:var(--u-lh-tekst);color:var(--u-muted-2);margin:0}
.landing-sectie{padding:var(--u-s-7) 0}
.landing-sectie h2{margin:0 0 var(--u-s-2)}
.landing-sub{font-size:var(--u-t-l);color:var(--u-muted);margin:0 0 var(--u-s-5);max-width:560px}
/* merkentegels */
.landing-merken{display:grid;grid-template-columns:1fr;gap:var(--u-s-4);margin-top:var(--u-s-5)}
@media(min-width:760px){.landing-merken{grid-template-columns:1fr 1fr}}
.landing-merk{display:flex;flex-direction:column;gap:var(--u-s-1);background:var(--u-white);border:1px solid var(--u-line);
  border-radius:var(--u-r-vlak);padding:var(--u-s-6);text-decoration:none;color:var(--u-ink);
  transition:border-color var(--u-overgang),transform var(--u-overgang)}
.landing-merk:hover{border-color:var(--u-orange);transform:translateY(-2px)}
.landing-merk-beeld{display:flex;align-items:center;justify-content:center;aspect-ratio:2/1;background:var(--u-sand-3);
  border-radius:var(--u-r-vlak);margin-bottom:var(--u-s-4);overflow:hidden}
.landing-merk-beeld img{max-width:70%;max-height:90%;object-fit:contain}
.landing-merk--donker{background:var(--u-ink);color:var(--u-white);border-color:var(--u-ink)}
.landing-merk--donker:hover{border-color:var(--u-orange)}
.landing-merk--donker .landing-merk-beeld{background:var(--u-on-dark-vlak)}
.landing-merk-beeld--logo img{max-width:78%;max-height:38%;object-fit:contain}
.landing-merk--donker .landing-merk-zin{color:var(--u-on-dark-2)}
.landing-merk-titel{font-size:var(--u-t-xl);font-weight:var(--u-w-zwaar)}
.landing-merk-zin{font-size:var(--u-t-l);color:var(--u-muted);line-height:var(--u-lh-tekst)}
.landing-merk-cta{margin-top:var(--u-s-3);font-size:var(--u-t-m);font-weight:var(--u-w-kop);color:var(--u-orange)}
/* kanaaltegels */
.landing-kanalen{display:grid;grid-template-columns:1fr;gap:var(--u-s-3);margin-top:var(--u-s-5)}
@media(min-width:600px){.landing-kanalen{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.landing-kanalen{grid-template-columns:repeat(4,1fr)}}
.landing-kanaal{display:flex;flex-direction:column;gap:var(--u-s-1);background:var(--u-white);border:1px solid var(--u-line);
  border-radius:var(--u-r-vlak);padding:var(--u-s-5);min-height:var(--u-raak);text-decoration:none;color:var(--u-ink);
  transition:border-color var(--u-overgang),transform var(--u-overgang)}
.landing-kanaal:hover{border-color:var(--u-orange);transform:translateY(-2px)}
.landing-kanaal-naam{font-size:var(--u-t-xl);font-weight:var(--u-w-zwaar)}
.landing-kanaal-zin{font-size:var(--u-t-m);color:var(--u-muted);line-height:1.45}
.landing-kanaal-cta{margin-top:auto;padding-top:var(--u-s-3);font-size:var(--u-t-m);font-weight:var(--u-w-kop);color:var(--u-orange)}
/* beloften */
.landing-beloften{list-style:none;margin:var(--u-s-4) 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:var(--u-s-3)}
@media(min-width:760px){.landing-beloften{grid-template-columns:1fr 1fr}}
.landing-beloften li{display:flex;align-items:flex-start;gap:10px;font-size:var(--u-t-l);color:var(--u-ink)}
.landing-beloften svg{flex-shrink:0;margin-top:2px}
/* voet */
.landing-voet{background:var(--u-ink);color:var(--u-on-dark-2);margin-top:var(--u-s-10);padding:var(--u-s-6) 0}
.landing-voet .wrap{display:flex;justify-content:space-between;gap:var(--u-s-4);flex-wrap:wrap;font-size:var(--u-t-m)}
.landing-voet a{color:var(--u-white);text-decoration:underline}
/* landing: FAQ en bedrijfsvoet (SEO-analyse 2026-08-31) */
.landing-vragen{display:grid;grid-template-columns:1fr;gap:var(--u-s-5);margin-top:var(--u-s-5)}
@media(min-width:760px){.landing-vragen{grid-template-columns:1fr 1fr;gap:var(--u-s-6) var(--u-s-9)}}
.landing-vraag h3{font-size:var(--u-t-xl);margin:0 0 var(--u-s-1)}
.landing-vraag p{margin:0;font-size:var(--u-t-l);line-height:var(--u-lh-tekst);color:var(--u-muted-2)}
.landing-voet-bedrijf{border-bottom:1px solid var(--u-on-dark-line);padding-bottom:var(--u-s-4);margin-bottom:var(--u-s-4)}
.landing-voet-naam{font-weight:var(--u-w-kop);color:var(--u-white)}
.landing-taal{justify-content:flex-start;align-items:center;gap:10px;margin-top:var(--u-s-4);padding-top:var(--u-s-4);
  border-top:1px solid var(--u-on-dark-line)}
.landing-taal a{text-decoration:none;color:var(--u-on-dark-2)}
.landing-taal a:hover{color:var(--u-white);text-decoration:underline}
.landing-taal a[aria-current="page"]{color:var(--u-white);font-weight:var(--u-w-kop)}
/* landing in Elementor: tegel-hulpklassen voor containers (Geavanceerd → CSS-klassen) */
.landing main .e-con{--content-width:calc(var(--u-wrap) - 2 * var(--u-wrap-pad))}
/* zijruimte op de secties: kit-padding is 0 en Elementor bewaart links/rechts 0 — zonder dit valt alles op
   mobiel tegen de schermrand; !important omdat Elementors element-CSS specifieker is */
.landing main .elementor > .e-con{padding-left:var(--u-s-4) !important;padding-right:var(--u-s-4) !important}
@media(min-width:900px){.landing main .elementor > .e-con{padding-left:var(--u-wrap-pad) !important;padding-right:var(--u-wrap-pad) !important}}
.el-tegel{background:var(--u-white);border:1px solid var(--u-line);border-radius:var(--u-r-vlak);
  transition:border-color var(--u-overgang),transform var(--u-overgang)}
.el-tegel:hover{border-color:var(--u-orange);transform:translateY(-2px)}
.el-tegel a{text-decoration:none}
.el-beeldvlak{background:var(--u-sand-3);border-radius:var(--u-r-vlak)}
.el-eyebrow .elementor-heading-title{font-size:12px;font-weight:var(--u-w-label);letter-spacing:var(--u-ls-label);
  text-transform:uppercase;color:var(--u-orange)}
.el-cta .elementor-heading-title{font-size:var(--u-t-m);font-weight:var(--u-w-kop);color:var(--u-orange)}
.landing .e-n-accordion-item-title{font-family:var(--u-font)}
/* landing in Elementor: rijen en tegels (breedtes via het thema; Elementor bewaart alleen de inhoud) */
.el-rij > .e-con-inner{display:flex;flex-wrap:wrap;gap:16px;align-items:stretch}
.el-rij > .e-con-inner > .e-con{margin:0}
.el-rij-2 > .e-con-inner > .e-con{width:calc(50% - 8px)}
.el-rij-4 > .e-con-inner > .e-con{width:calc(25% - 12px)}
@media(max-width:1000px){.el-rij-4 > .e-con-inner > .e-con{width:calc(50% - 8px)}}
@media(max-width:640px){.el-rij-2 > .e-con-inner > .e-con,.el-rij-4 > .e-con-inner > .e-con{width:100%}}
.landing .elementor-icon-list-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--u-s-2)}
.landing .elementor-icon-list-item{display:flex;align-items:flex-start;gap:10px;font-size:var(--u-t-l)}
.landing .elementor-icon-list-icon{flex:none;display:inline-flex}
.landing .elementor-icon-list-icon svg,.landing .e-font-icon-svg{width:18px;height:18px;fill:var(--u-orange)}
.landing .elementor-accordion .elementor-tab-title{font-family:var(--u-font);font-weight:var(--u-w-kop);
  padding:var(--u-s-4) 0;border-bottom:1px solid var(--u-line);cursor:pointer;display:flex;gap:10px;align-items:center}
.landing .elementor-accordion .elementor-tab-title a{color:inherit;text-decoration:none}
.landing .elementor-accordion .elementor-accordion-icon{color:var(--u-orange);flex:none}
.landing .elementor-accordion .elementor-accordion-icon svg{width:14px;height:14px;fill:currentColor}
.landing .elementor-accordion .elementor-tab-content{padding:var(--u-s-3) 0 var(--u-s-4);color:var(--u-muted-2);
  border-bottom:1px solid var(--u-line)}
.landing .elementor-widget:not(:last-child){margin-bottom:var(--u-s-3)}
/* landing: FAQ-accordeon (Elementor-markup, gedrag via untrailed.js; zonder JS staat alles open) */
.js .landing .elementor-accordion .elementor-tab-content{display:none}
.js .landing .elementor-accordion .elementor-tab-title[aria-expanded="true"]+.elementor-tab-content{display:block}
.landing .elementor-accordion .elementor-accordion-icon-opened{display:none}
.landing .elementor-accordion .elementor-tab-title[aria-expanded="true"] .elementor-accordion-icon-opened{display:inline-flex}
.landing .elementor-accordion .elementor-tab-title[aria-expanded="true"] .elementor-accordion-icon-closed{display:none}
.landing .elementor-accordion .elementor-tab-title{margin:0}
.landing .elementor-accordion .elementor-accordion-title{cursor:pointer}
.landing .el-cta{margin-top:auto}
.landing .el-cta .elementor-widget-container{margin-bottom:0}
/* landing: merk-tegel flip — voorkant logo, bij hover/focus draait het beeldvlak naar de productfoto.
   Beide beelden staan absoluut in .el-flip en draaien onafhankelijk (werkt met én zonder .e-con-inner). */
.landing .el-tegel--merk .el-flip{position:relative;width:100%;min-height:190px;perspective:1100px;
  margin-bottom:var(--u-s-3)}
.landing .el-tegel--merk .el-flip .elementor-widget-image{position:absolute;inset:0;width:100%;margin:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .55s ease;transform:rotateY(0)}
.landing .el-tegel--merk .el-flip .elementor-widget-image:last-of-type{transform:rotateY(-180deg)}
.landing .el-tegel--merk:hover .el-flip .elementor-widget-image:first-of-type,
.landing .el-tegel--merk:focus-within .el-flip .elementor-widget-image:first-of-type{transform:rotateY(180deg)}
.landing .el-tegel--merk:hover .el-flip .elementor-widget-image:last-of-type,
.landing .el-tegel--merk:focus-within .el-flip .elementor-widget-image:last-of-type{transform:rotateY(0)}
.landing .el-tegel--merk .el-flip .elementor-widget-image .elementor-widget-container{height:100%}
.landing .el-tegel--merk .el-flip .elementor-widget-image:first-of-type img{max-height:96px}
/* de productfoto's staan op wit; geef de achterkant hetzelfde wit zodat er geen vlak-in-vlak ontstaat */
.landing .el-tegel--merk .el-flip .elementor-widget-image:last-of-type .elementor-widget-container{background:var(--u-white)}
@media (prefers-reduced-motion: reduce){
  .landing .el-tegel--merk .el-flip .elementor-widget-image{transition:none}
}
/* landing: merk-tegels (Hyckes/Brunner) — beeld gecentreerd in een vast beeldvlak */
.landing .el-tegel--merk .elementor-widget-image{width:100%;margin-bottom:var(--u-s-3)}
.landing .el-tegel--merk .elementor-widget-image .elementor-widget-container{display:flex;align-items:center;
  justify-content:center;min-height:190px;background:var(--u-sand-3);border-radius:var(--u-r-vlak);padding:var(--u-s-4)}
.landing .el-tegel--merk .elementor-widget-image img{max-height:160px;width:auto;max-width:100%}
/* landing: platformtegels — logo bovenin op vaste hoogte, twee merk-cta's onder elkaar */
.landing .el-logo{width:100%;margin-bottom:var(--u-s-2)}
.landing .el-logo .elementor-widget-container{display:flex;align-items:center;min-height:44px}
.landing .el-logo img{max-height:40px;width:auto;max-width:150px;object-fit:contain;object-position:left center}
.landing .el-cta--tweede{margin-top:0}
.landing .elementor-widget.el-cta:not(:last-child){margin-bottom:var(--u-s-1)}