/* ============================================================
   BuitenStek — warm/natuurlijk/premium (hout · groen · crème)
   Tokens: één set voor de hele site (OPERATOR-SMAAK §6)
   ============================================================ */
:root{
  --bg:#faf7f1;            /* crème */
  --surface:#ffffff;
  --sand:#f1ead9;          /* licht zand voor banden */
  --ink:#26211a;
  --muted:#6d6355;
  --green:#2e5339;         /* diepgroen — merkkleur */
  --green-dark:#22402c;
  --green-ink:#183120;
  --terra:#c2622e;         /* terracotta — decoratief accent (logo, iconen) */
  --terra-cta:#b0521f;     /* CTA-variant: wit-op-terra >= 4.5:1 (WCAG AA, schouw 18-07) */
  --terra-dark:#a84f22;
  --line:#e6ddcc;
  --star:#e8a33d;
  --ok:#2f7d4f;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 2px 14px rgba(70,52,24,.09);
  --shadow-lift:0 8px 26px rgba(70,52,24,.14);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Public Sans',system-ui,sans-serif;
  --maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--ink);font-size:17px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-display);color:var(--green-ink);line-height:1.18;font-weight:700}
h1{font-size:clamp(1.9rem,4vw,2.9rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
h3{font-size:1.15rem}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
section{padding:44px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.section-head p{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:1rem;padding:13px 26px;border-radius:999px;border:0;cursor:pointer;transition:background .15s,transform .15s;white-space:nowrap}
.btn-primary{background:var(--terra-cta);color:#fff}
.btn-primary:hover{background:var(--terra-dark);text-decoration:none}
.btn-secondary{background:var(--green);color:#fff}
.btn-secondary:hover{background:var(--green-dark);text-decoration:none}
.btn-ghost{background:transparent;color:var(--green);border:2px solid var(--green)}
.btn-ghost:hover{background:var(--green);color:#fff;text-decoration:none}
.btn-sm{padding:9px 18px;font-size:.92rem}

/* ---------- topbar ---------- */
.topbar{background:var(--green-ink);color:#f4efe3;font-size:.85rem}
.topbar .wrap{display:flex;justify-content:center;gap:34px;padding:7px 20px}
.topbar span{display:inline-flex;align-items:center;gap:7px}
.topbar svg{width:15px;height:15px;fill:var(--terra);flex:0 0 auto}

/* ---------- header ---------- */
.site-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60}
.header-main{display:flex;align-items:center;gap:26px;padding:14px 20px;max-width:var(--maxw);margin:0 auto}
.logo{font-family:var(--font-display);font-size:1.55rem;font-weight:700;color:var(--green-ink);white-space:nowrap}
.logo b{color:var(--terra);font-weight:700}
.logo:hover{text-decoration:none;filter:drop-shadow(0 0 6px rgba(194,98,46,.45))}
.search{flex:1;display:flex;max-width:520px}
.search input{flex:1;border:2px solid var(--line);border-right:0;border-radius:999px 0 0 999px;padding:10px 18px;font:inherit;font-size:.95rem;background:var(--bg);color:var(--ink);min-width:0}
.search input:focus{outline:none;border-color:var(--green)}
.search button{border:0;background:var(--green);color:#fff;border-radius:0 999px 999px 0;padding:0 20px;cursor:pointer}
.search button svg{width:17px;height:17px;fill:#fff}
.header-actions{display:flex;align-items:center;gap:18px;margin-left:auto}
.header-actions a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.75rem;color:var(--ink);position:relative}
.header-actions svg{width:23px;height:23px;fill:var(--green-ink)}
.cart-count{position:absolute;top:-5px;right:2px;background:var(--terra-cta);color:#fff;font-size:.68rem;font-weight:700;min-width:17px;height:17px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ---------- nav + mega ---------- */
.mainnav{background:var(--green);position:relative}
.mainnav>ul{max-width:var(--maxw);margin:0 auto;padding:0 20px;display:flex;list-style:none;gap:4px}
.mainnav>ul>li>a{display:block;color:#f2eee2;font-weight:600;font-size:.95rem;padding:12px 15px}
.mainnav>ul>li>a:hover{background:var(--green-dark);text-decoration:none}
.mainnav li{position:static}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:3px solid var(--green);box-shadow:var(--shadow-lift);z-index:70}
.mainnav li:hover .mega,.mainnav li:focus-within .mega{display:block}
.mega-inner{max-width:var(--maxw);margin:0 auto;padding:26px 20px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.mega h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.mega ul{list-style:none}
.mega ul a{display:block;padding:5px 0;color:var(--ink);font-size:.95rem}
.mega ul a:hover{color:var(--terra)}
.mega .mega-visual img{width:100%;height:150px;object-fit:cover;border-radius:var(--radius-sm)}
.mega .mega-visual span{display:block;margin-top:8px;font-weight:600;font-size:.9rem}

/* ---------- hero (drieluik) ---------- */
.hero{padding:26px 0}
.hero-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:16px;min-height:440px}
.hero-main{grid-row:1/3;position:relative;border-radius:var(--radius);overflow:hidden;display:flex;align-items:flex-end;min-height:440px}
/* Bewegende hero: crossfade + Ken Burns.
   Harde regels: ALLEEN opacity en transform (GPU-composited, geen layout-property ->
   geen reflow, geen CLS). De foto's staan absoluut in .hero-bg binnen een .hero-main
   met vaste min-height, dus ze reserveren hun ruimte al voor het laden.
   Ken Burns draait ALLEEN op de zichtbare foto (.actief) en herstart doordat de class
   opnieuw wordt gezet; de verborgen foto's animeren niet en kosten dus niets. */
.hero-main .hero-bg{position:absolute;inset:0;overflow:hidden;background:#22301f}
.hero-main .hero-bg img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  opacity:0;transform:scale(1.04);
  transition:opacity 1.6s cubic-bezier(.4,0,.2,1);
  will-change:opacity,transform;backface-visibility:hidden}
.hero-main .hero-bg img.actief{opacity:1;animation:kenburns 9s ease-out forwards}
/* Per foto een eigen ankerpunt -> elke wissel voelt als een andere camerabeweging
   in plaats van drie keer dezelfde zoom. */
.hero-main .hero-bg picture:nth-child(1) img{transform-origin:38% 68%}
.hero-main .hero-bg picture:nth-child(2) img{transform-origin:65% 40%}
.hero-main .hero-bg picture:nth-child(3) img{transform-origin:50% 30%}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.13)}}
/* Warme premium-gloed onder de tekst: puur een gradient-laag, geen filter/blend
   (die zouden de compositing-laag duur maken). */
.hero-main::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 95% at 10% 92%,rgba(146,86,32,.34),rgba(146,86,32,0) 58%)}
.hero-main::after{content:"";position:absolute;inset:0;background:linear-gradient(15deg,rgba(20,32,22,.78) 22%,rgba(20,32,22,.12) 62%)}
/* prefers-reduced-motion: HARD uit. Geen keyframes, geen crossfade-transitie, geen
   transform. js/site.js start dan bovendien geen interval, dus de eerste foto blijft
   gewoon staan -- een stilstaande hero, niet een hero die hard doorspringt. */
@media (prefers-reduced-motion:reduce){
  .hero-main .hero-bg img,
  .hero-main .hero-bg img.actief{animation:none !important;transition:none !important;transform:none !important;will-change:auto}
}
.hero-content{position:relative;z-index:2;padding:34px;color:#fff;max-width:560px}
.hero-content h1{color:#fff;margin-bottom:10px}
.hero-content p{font-size:1.08rem;margin-bottom:20px;color:#efe9da}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-trust{display:flex;gap:18px;margin-top:18px;font-size:.85rem;color:#e4ddc9;flex-wrap:wrap}
.hero-trust span{display:inline-flex;gap:6px;align-items:center}
.hero-trust svg{width:14px;height:14px;fill:var(--star)}
.hero-side{position:relative;border-radius:var(--radius);overflow:hidden;display:flex;align-items:flex-end;min-height:200px}
.hero-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-side::after{content:"";position:absolute;inset:0;background:linear-gradient(10deg,rgba(20,32,22,.72) 8%,transparent 55%)}
.hero-side span{position:relative;z-index:2;color:#fff;font-weight:700;padding:16px;font-size:1.02rem}
.hero-side:hover{text-decoration:none;box-shadow:var(--shadow-lift)}

/* ---------- USP-band ---------- */
.uspband{background:var(--sand);padding:14px 0}
.uspband .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.uspband span{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600}
.uspband svg{width:19px;height:19px;fill:var(--green)}

/* ---------- categorie-rij (borderless) ---------- */
.catrow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.catrow a{text-align:center;color:var(--ink)}
.catrow a:hover{text-decoration:none;color:var(--terra)}
.catrow .catimg{background:var(--surface);border-radius:var(--radius);height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--shadow)}
.catrow img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.catrow span{display:block;margin-top:9px;font-weight:600;font-size:.92rem}

/* ---------- product cards (smaakregels 23:05) ---------- */
.prodgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.prodrail{display:grid;grid-auto-flow:column;grid-auto-columns:calc(25% - 12px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
.prodrail::-webkit-scrollbar{display:none}
.prodrail .card{scroll-snap-align:start}
.railwrap{position:relative}
.railbtn{position:absolute;top:38%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--green-ink)}
.railbtn.prev{left:-8px}.railbtn.next{right:-8px}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s;position:relative;color:var(--ink)}
.card:hover{box-shadow:var(--shadow-lift);text-decoration:none}
.card .cardimg{aspect-ratio:1/1;background:#fff;position:relative;overflow:hidden}
.card .cardimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.card .badge{position:absolute;top:10px;left:10px;background:var(--ok);color:#fff;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;z-index:2}
.card .badge.sale{background:#c0392b}
.card .cardbody{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.card h3{font-family:var(--font-body);font-size:.98rem;font-weight:600;color:var(--ink);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;margin-bottom:6px}
.card .stars{color:var(--star);font-size:.85rem;margin-bottom:8px}
.card .priceblock{margin-top:auto}
.card .price{font-size:1.35rem;font-weight:800;color:var(--green-ink)}
.card .price .was{font-size:.9rem;font-weight:400;color:var(--muted);text-decoration:line-through;margin-left:8px}
.card .klarna{font-size:.8rem;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Klarna-pill op de kaart (A10): compacte badge in de stijl van de footer-chips -
   afgeronde vorm, lichte Klarna-tint, klein logo + korte tekst die niet meer afkapt
   (de oude regel liep dood op "In 3x betalen met" + ellipsis). inline-flex + w-fit,
   dus hij is zo breed als zijn inhoud, niet de hele kaart. */
.card .klarna-pill{display:inline-flex;width:fit-content;max-width:100%;margin-top:6px;
  padding:3px 9px;border-radius:999px;background:#ffe0ec;color:#7a1f3d;font-size:.72rem;
  font-weight:600;white-space:nowrap;overflow:visible}
.card .klarna-pill b{font-weight:800}
.card .klarna-pill .klogo{height:11px;margin-right:5px}
.klarna .klogo{height:12px;width:auto;vertical-align:-1px;margin-right:5px;display:inline-block;flex:0 0 auto}
.buybox .klarna .klogo{height:15px}
.card .delivery{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--ok);margin-top:6px}
.card .delivery svg{width:13px;height:13px;fill:var(--ok)}

/* ---------- schuine breker ---------- */
.breaker{background:var(--green-ink);color:#f2ecdc;transform:skewY(-2deg);margin:38px 0;padding:0}
.breaker>.wrap{transform:skewY(2deg);display:flex;justify-content:space-around;gap:26px;padding:38px 20px;flex-wrap:wrap;text-align:center}
.breaker b{display:block;font-family:var(--font-display);font-size:2rem;color:#fff}
.breaker span{font-size:.92rem;color:#cfc7ae}

/* ---------- kieswijzer / features ---------- */
.featgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.featcard{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;color:var(--ink)}
.featcard:hover{box-shadow:var(--shadow-lift);text-decoration:none}
.featcard svg{width:34px;height:34px;fill:var(--terra);margin-bottom:12px}
.featcard h3{margin-bottom:8px}
.featcard p{font-size:.92rem;color:var(--muted)}

/* ---------- reviews slider ---------- */
.reviews{background:var(--sand)}
.revrail{display:grid;grid-auto-flow:column;grid-auto-columns:calc(33.34% - 11px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
.revrail::-webkit-scrollbar{display:none}
.revcard{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;scroll-snap-align:start}
.revcard .stars{color:var(--star);margin-bottom:8px}
.revcard p{font-size:.95rem;margin-bottom:12px}
.revcard .revwho{display:flex;align-items:center;gap:10px;font-size:.85rem}
.revcard .revwho img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.revcard .revwho b{display:block}
.revcard .revprod{color:var(--muted)}
.revcard .revjaar{color:var(--muted)}
.revcard .revprod{display:inline-block;margin-top:4px;font-size:.85rem;text-decoration:none}
.revcard .revprod:hover{color:var(--green)}

/* Trustpilot-stijl sterren: gevulde blokjes, TP-groen. Alleen bij ECHTE ratings. */
.tp-stars{display:inline-flex;gap:2px;vertical-align:middle}
.tp-stars .tpst{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:#dcdce6;color:#fff;font-size:13px;font-style:normal;border-radius:2px}
.tp-stars .tpst.vol{background:#00b67a}
.tp-score{font-size:.95rem;display:inline-flex;align-items:center;gap:8px}
.rev-bron{font-size:.85rem;color:var(--muted);margin:-6px 0 14px}
.rev-bron a{color:inherit}

/* Kaart/PDP-sterren: outline-ster grijs, gevuld in merk-ster-kleur */
.stars .st{font-style:normal;color:#d8d2c8}
.stars .st.vol{color:var(--star)}
a.stars{text-decoration:none}
a.stars:hover span{text-decoration:underline}

/* Cookiebanner (meet-laag; verschijnt alleen als BS_MEET.gtmId gezet is).
   position:fixed = 0 CLS; knoppen gelijkwaardig; leesbaar >=16px. */
#bs-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;max-width:560px;margin:0 auto;background:var(--surface);border-radius:var(--radius);box-shadow:0 8px 30px rgba(0,0,0,.18);padding:18px 20px}
#bs-consent p{font-size:1rem;margin-bottom:12px}
.bs-consent-knoppen{display:flex;gap:10px;flex-wrap:wrap}
.bs-consent-knoppen .btn{min-height:44px}

/* ---------- longread + faq ---------- */
.longread{max-width:820px}
.longread h2{margin:26px 0 10px}
.longread p{margin-bottom:14px;color:#3c352b}
.faq details{background:var(--surface);border-radius:var(--radius-sm);box-shadow:var(--shadow);margin-bottom:10px;padding:0 18px}
.faq summary{font-weight:700;padding:15px 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--terra)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:15px;color:var(--muted)}
.faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;align-items:start}

/* ---------- footer ---------- */
.site-footer{background:var(--green-ink);color:#d8d1bc;margin-top:50px}
/* padding-shorthand hield links/rechts op 0 en overschreef daarmee de 20px van .wrap
   (het element draagt beide classes) - op mobiel plakte de footertekst tegen de schermrand. */
.footgrid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px;padding:46px 20px 30px}
/* h3 (was h4, a11y heading-order 19-07) maar visueel exact het oude kopje:
   body-font, niet het display-serif dat de globale h3 erft */
.site-footer h3{color:#fff;font-size:.95rem;margin-bottom:14px;font-family:var(--font-body);font-weight:700}
.site-footer ul{list-style:none}
.site-footer ul a{display:block;color:#cfc7ae;padding:4px 0;font-size:.92rem}
.site-footer ul a:hover{color:#fff}
.footer-logo{font-family:var(--font-display);font-size:1.5rem;color:#fff;font-weight:700}
.footer-logo b{color:var(--terra);font-style:italic}
.footer-tag{margin:10px 0 16px;font-size:.92rem}
/* a11y (Lighthouse link-in-text-block, 19-07): links in lopende tekst niet
   alleen op kleur laten leunen */
.longread a,.infopage a,.faq a,.formnote a,.rev-bron a{text-decoration:underline}
/* netwerk-/partnerlinks (eis 8, 19-07): bescheiden strook, natuurlijke anchors */
.footpartners{border-top:1px solid rgba(255,255,255,.14);padding:14px 0}
.footpartners .wrap{display:flex;gap:2px 26px;flex-wrap:wrap;align-items:baseline}
.footpartners b{color:#fff;font-size:.875rem;font-weight:700;margin-right:2px}
.footpartners a{color:#cfc7ae;font-size:.875rem;padding:4px 0}
.footpartners a:hover{color:#fff}
.chipband{border-top:1px solid rgba(255,255,255,.14);padding:16px 0}
.chipband .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center}
/* Betaal-lockups: uniforme card-assets (RideParts-footer = de norm, gemeten 24px hoog).
   Geen per-merk hoogte-uitzonderingen meer — de cards dragen hun eigen visuele massa. */
.chipband img{display:block;height:24px;width:auto;margin:10px 0}
.chipband img[alt="DHL"]{height:15px;margin:14.5px 0}
.chipband img[alt="PostNL"]{height:28px;margin:8px 0}
.copy{border-top:1px solid rgba(255,255,255,.14);padding:14px 0;font-size:.82rem;text-align:center;color:#a89f86}

/* ---------- PLP / PDP / cart basics ---------- */
.crumbs{font-size:.85rem;color:var(--muted);padding:16px 0 0}
.crumbs a{color:var(--muted)}
.plp{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}
.filters{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;position:sticky;top:130px}
.filters h4{margin:14px 0 8px;font-size:.9rem}
.filters label{display:flex;gap:8px;font-size:.9rem;padding:3px 0;align-items:center;color:var(--ink)}
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:start;padding:30px 0}
.pdp-gallery .mainimg{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:1/1;position:relative;overflow:hidden}
.pdp-gallery .mainimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.pdp-thumbs{display:flex;gap:10px;margin-top:12px}
.pdp-thumbs button{width:72px;height:72px;border-radius:var(--radius-sm);border:2px solid var(--line);background:#fff;overflow:hidden;cursor:pointer;position:relative}
.pdp-thumbs button.actief{border-color:var(--green)}
.pdp-thumbs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.buybox{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
.buybox .price{font-size:2rem;font-weight:800;color:var(--green-ink)}
.buybox .klarna{color:var(--ink);font-size:.9rem;margin:4px 0 14px}
.buybox .klarna b{font-weight:600}
/* logo inline naast de tekst (RP-norm); de globale img{display:block}-reset
   duwde hem anders op een eigen regel (gezien in schouw 19-07) */
.buybox .klarna img{display:inline-block}
.buybox .delivery{display:flex;gap:8px;align-items:center;color:var(--ok);font-weight:600;margin-bottom:16px}
.paychips{display:flex;gap:20px;align-items:center;margin-top:18px;flex-wrap:wrap}
.paychips img{height:24px;width:auto}
.qty{display:flex;align-items:center;gap:0;border:2px solid var(--line);border-radius:999px;width:fit-content;margin-bottom:14px}
.qty button{width:38px;height:38px;border:0;background:none;font-size:1.2rem;cursor:pointer;color:var(--green-ink)}
.qty input{width:44px;text-align:center;border:0;font:inherit;font-weight:700;background:none}

/* ---------- mobiel ---------- */
.mobnav-toggle{display:none}
@media(max-width:1023px){
  .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .featgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catrow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footgrid{grid-template-columns:1fr 1fr}
  .plp{grid-template-columns:1fr}
  .filters{position:static}
  .pdp{grid-template-columns:1fr}
  .mega-inner{grid-template-columns:1fr 1fr}
}
/* tablet-range (768-999): 8 nav-items passen niet (~950px nodig) -> nav scrolt
   intern i.p.v. de pagina te verbreden (overflow-vondst QA 19-07 op 768) */
@media(max-width:999px){
  .mainnav>ul{overflow-x:auto;scrollbar-width:none}
  .mainnav>ul::-webkit-scrollbar{display:none}
  .mainnav>ul>li>a{white-space:nowrap}
}
@media(max-width:767px){
  body{font-size:16px}
  section{padding:30px 0}
  .topbar .wrap{gap:10px;font-size:.72rem;overflow:hidden;white-space:nowrap;padding:7px 10px}
  .topbar span:nth-child(n+3){display:none}
  .topbar svg{width:12px;height:12px}
  /* Sticky-nav-hoogte op mobiel ≤15% vh (QA 21-07: 173px was 21,3%): alleen de
     header-main-rij (logo+zoek+winkelwagen) pinnen, de categorie-nav mee laten scrollen. */
  /* CORRECTIE 21-07 (gemeten, niet aangenomen): `position:static` op de ouder maakte het
     sticky kind nutteloos - een sticky element plakt alleen zolang zijn OUDER in beeld is,
     en die was maar 157px hoog. Na 800px scroll stond de header op top:-719 = buiten beeld.
     Nu plakt de header zelf en klapt de categorie-nav weg zodra je scrollt, zodat alleen
     de header-main-rij gepind blijft en de hoogte-eis (<=15% vh) gehaald blijft. */
  .site-header{position:sticky;top:0;z-index:60}
  .header-main{gap:8px;flex-wrap:wrap;padding:6px 14px;z-index:60;background:var(--surface);box-shadow:0 1px 0 var(--line)}
  html.bs-scrolled .site-header .mainnav{display:none}
  .search{order:3;flex-basis:100%;max-width:none}
  .header-main .search input{padding-top:8px;padding-bottom:8px}
  .mainnav>ul{overflow-x:auto;scrollbar-width:none}
  .mainnav>ul::-webkit-scrollbar{display:none}
  .mainnav>ul>li>a{white-space:nowrap;padding:11px 12px;font-size:.88rem}
  .mega{display:none!important}
  .hero{padding:14px 0}
  .hero-grid{grid-template-columns:1fr;grid-template-rows:auto;min-height:0}
  .hero-main{min-height:300px}
  .hero-content{padding:22px}
  .hero-side{display:none}
  .prodrail{grid-auto-columns:calc(50% - 8px)}
  .revrail{grid-auto-columns:calc(85% - 8px)}
  .railbtn{display:none}
  .catrow{display:grid;grid-auto-flow:column;grid-auto-columns:calc(40% - 10px);overflow-x:auto;scrollbar-width:none}
  .catrow span:not(.catimg){font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .catrow::-webkit-scrollbar{display:none}
  .catrow .catimg{height:92px}
  .faqgrid{grid-template-columns:1fr}
  .breaker>.wrap{gap:16px;padding:28px 14px}
  .breaker b{font-size:1.4rem}
  /* Footer mobiel: 2 kolommen naast elkaar i.p.v. één lange kolom (operator 21-07).
     Het merkblok houdt de volle breedte - dat leest als kop, niet als kolom; de drie
     linkkolommen komen 2-op-2 en halveren de footer-hoogte. */
  .footgrid{grid-template-columns:1fr 1fr;gap:18px 16px}
  .footgrid>div:first-child{grid-column:1 / -1}
  /* Drie linkkolommen in een 2-koloms grid laat er altijd een als wees achter (Contact
     stond alleen in rij 3 met een leeg vak ernaast). Contact krijgt daarom de volle
     breedte als afsluitend blok, met zijn links naast elkaar i.p.v. onder elkaar. */
  .footgrid>div:last-child{grid-column:1 / -1}
  .footgrid>div:last-child ul{display:flex;flex-wrap:wrap;gap:0 20px}
  .card .price{font-size:1.22rem}
}

/* ============================================================
   Schouw-fixes 18-07 (Sage): tap-targets >= 44px + leesbare
   fonts op mobiel (schouw 14-07: 21-28 targets < 44px, 10-27
   teksten < 14px per pagina). Alleen ergonomie, geen redesign.
   ============================================================ */
.logo{display:inline-flex;align-items:center;min-height:44px}
.section-head a{display:inline-flex;align-items:center;min-height:44px}
.crumbs a{display:inline-block;padding:12px 6px;margin-left:-6px}
@media(max-width:767px){
  .topbar .wrap{font-size:.875rem}
  .header-actions a{font-size:.875rem}
  .mainnav>ul>li>a{display:flex;align-items:center;min-height:44px;padding:11px 12px}
  .site-footer ul a{display:flex;align-items:center;min-height:44px;padding:2px 0}
  .btn-sm{min-height:44px}
  .card .badge{font-size:.875rem}
  .card .stars{font-size:.875rem}
  .card .klarna{font-size:.875rem}
  .card .delivery{font-size:.875rem}
  .hero-trust{font-size:.875rem}
  .crumbs{font-size:.875rem}
  .catrow span:not(.catimg){font-size:.875rem}
  .breaker span{font-size:.875rem}
}
@media(max-width:767px){
  .site-footer p,.site-footer span,.site-footer li,.site-footer .copy{font-size:.875rem!important}
}

/* Winkelwagen-bevestiging (operator 21-07): schuift van BOVEN in, onder de header.
   Bewust niet onderaan: daar zit de cookiebanner (z-index 1000) en die dekte de oude
   toast volledig af bij een eerste bezoek. z-index 950 = boven de pagina, onder consent. */
.cart-pop{position:fixed;top:12px;left:50%;transform:translate(-50%,-140%);z-index:950;
  width:min(420px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.22);padding:14px;
  transition:transform .22s ease,opacity .22s ease;opacity:0}
.cart-pop.open{transform:translate(-50%,0);opacity:1}
.cart-pop-in{display:flex;align-items:center;gap:12px}
.cart-pop-in img{width:54px;height:54px;object-fit:contain;border-radius:8px;flex:0 0 auto;background:#fff}
.cart-pop-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cart-pop-txt b{color:var(--green-ink);font-size:.98rem}
.cart-pop-txt span{font-size:.88rem;color:#5c5a52;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cart-pop-x{margin-left:auto;flex:0 0 auto;background:none;border:0;font-size:1.5rem;line-height:1;
  color:#7a7870;cursor:pointer;width:44px;height:44px}
.cart-pop-act{display:flex;gap:10px;margin-top:12px}
.cart-pop-act .btn{flex:1;padding:12px 14px;font-size:.95rem;min-height:44px}
@media(max-width:767px){
  .cart-pop{top:8px;padding:12px}
  .cart-pop-act{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  .cart-pop{transition:opacity .01s}
}

/* WhatsApp-knop (sprint-eis 21-07): floating, boven de sticky buybar; alleen zichtbaar als
   js/site.js een bevestigd nummer heeft (BS_WA_NUMMER) - anders niet in de DOM. */
.wa-fab{position:fixed;right:16px;bottom:88px;z-index:65;width:52px;height:52px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.28);transition:transform .15s ease}
.wa-fab:hover{transform:scale(1.06)}
@media(max-width:767px){.wa-fab{width:50px;height:50px;right:14px;bottom:84px}}