/* ============================================================
   VoltDelen redesign.css — site-brede nieuwe stijl (fase A, 2026-07-03)
   Bron: goedgekeurde homepage voltdelen-home-varianten/voltdelen-nieuw.html.
   Laadt NA app.css/premium.css/commerce.css als override-laag.
   Shell-classes die botsen met oude site-css zijn geprefixt met rd-
   (rd-mega*, rd-mnav*, rd-mnc*, rd-btn*, rd-brand, rd-hero, rd-stat*,
    rd-tp-*, rd-ig-handle/-follow, rd-ph). Bewust GEDEELD met oude css
   (globale unify): :root-tokens, h1-h4 (condensed uppercase), .wrap,
   .kicker, .section, .usp-bar, .faq-*, .seo-longread, .foot-h, .skip.
   ============================================================ */
/* ============================================================
   VoltDelen — DEFINITIEVE homepage v3 (recept uit 15 varianten
   + feedbackronde 3): glass-menubalk · compact mega-menu ·
   klantenservice-paneel + WhatsApp · strakke cards zonder chip ·
   klikbare merkenslider · TP-reviewsectie met databron ·
   FAQ 10 vragen 2-koloms · longread · kale footer-chips
   ============================================================ */

/* ---------- fonts (lokaal, variable) ---------- */
@font-face{
  font-family:"Saira";
  src:url("/assets/fonts/saira-latin-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Saira Condensed";
  src:url("/assets/fonts/saira-cond-latin-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --accent:#00BA84;          /* dé accentkleur */
  --accent-down:#E84C12;
  --accent-deep:#C0420C;     /* zelfde hue, AA-veilig voor kleine tekst op wit */
  --accent-tint:#FFF1EA;
  --on-accent:#1A0E07;       /* donkere tekst op accent-knoppen (AA) */
  --ink:#15171A;
  --ink-2:#3E444B;
  --muted:#5B6472;
  --line:#E5E8ED;
  --line-strong:#D5D9DD;
  --soft:#F5F6F8;
  --white:#FFFFFF;
  --ok:#177A43;
  --ok-tint:#E4F4EB;
  --low:#8A5B00;
  --low-tint:#FBF1DC;
  --order-ink:#45505E;
  --order-tint:#EEF1F5;
  --dark-2:#1D2024;
  --on-dark-muted:#B9BEC4;
  --radius:16px;
  --radius-s:10px;
  --shadow-sm:0 1px 2px rgba(21,23,26,.05);
  --shadow-md:0 10px 24px -8px rgba(21,23,26,.16);
  --wrap:1240px;
  --slant:2.6deg;            /* schuine breker-balk (v8) */
  --font-head:"Saira Condensed","Saira",system-ui,Arial,sans-serif;
  --font-body:"Saira",system-ui,"Segoe UI",Arial,sans-serif;
}

/* ---------- reset & basis ---------- */
:where(.usp-bar,.header,.rd-mnav,.rd-mnav-backdrop,.footer,.rd-page,.rd-mega-panel){box-sizing:border-box;margin:0;padding:0}
:where(.usp-bar,.header,.rd-mnav,.footer,.rd-page,.rd-mega-panel) :where(*,*::before,*::after){box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  font-family:var(--font-body);color:var(--ink);background:var(--white);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:where(.usp-bar,.header,.rd-mnav,.footer,.rd-page) ul{list-style:none}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.06;text-transform:uppercase;letter-spacing:.01em}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
[id]{scroll-margin-top:126px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:300;border-radius:0 0 8px 0;font-weight:600}
.skip:focus{left:0}

/* ---------- knoppen: één schaal ---------- */
.rd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:48px;padding:0 24px;border-radius:var(--radius-s);
  font-family:var(--font-head);font-size:19px;font-weight:700;
  text-transform:uppercase;letter-spacing:.045em;white-space:nowrap;
  transition:transform .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease;
}
.rd-btn:active{transform:translateY(1px)}
.rd-btn-primary{background:var(--accent);color:var(--on-accent)}
.rd-btn-primary:hover{background:var(--accent-down)}
.rd-btn-ghost-light{border:2px solid rgba(255,255,255,.85);color:#fff}
.rd-btn-ghost-light:hover{background:rgba(255,255,255,.14)}
.rd-btn-dark{background:var(--ink);color:#fff}
.rd-btn-dark:hover{background:#000}

.arrowlink{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:15px;color:var(--accent-deep);
}
.arrowlink .ar{transition:transform .15s ease;display:inline-block}
.arrowlink:hover .ar{transform:translateX(4px)}
.arrowlink:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- sectie-ritme ---------- */
.section{padding:64px 0}
.section--soft{background:var(--soft)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}
.kicker{display:block;color:var(--accent-deep);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;font-family:var(--font-body)}
.sechead h2{font-size:clamp(26px,3vw,36px);font-weight:800}
.sechead .sub{color:var(--muted);font-size:15px;margin-top:6px;max-width:60ch}
.sechead .arrowlink{margin-bottom:4px;flex-shrink:0}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.rv-in{opacity:1;transform:none}

/* ============ 1 · USP-BAR (zwarte announcement-bar met oranje iconen, zoals live) ============ */
.usp-bar{background:var(--ink);color:#E7EAEE;font-size:13px;border-bottom:1px solid rgba(255,255,255,.07)}
.usp-bar .wrap{display:flex;gap:10px 30px;align-items:center;justify-content:center;flex-wrap:wrap;min-height:38px;padding-block:7px}
.usp-bar span{display:inline-flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
.usp-bar strong{color:#fff;font-weight:700}
.usp-bar svg{width:16px;height:16px;color:var(--accent);flex:none}
/* WhatsApp als zichtbaar kanaal in de topbar */
.usp-wa{display:inline-flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap;color:#E7EAEE;min-height:24px}
.usp-wa svg{color:#25D366}
.usp-wa:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ============ 2 · HEADER (v2-logo + zoekveld + acties) ============ */
.header{background:var(--white);position:sticky;top:0;z-index:120;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm)}
.header.is-scrolled{box-shadow:0 1px 0 var(--line),0 8px 28px rgba(21,23,26,.08)}
.header-main{display:flex;align-items:center;gap:22px;padding:13px 0}
.rd-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
/* logo-glow zoals live: subtiele oranje drop-shadow, sterker on hover */
.rd-brand img{width:34px;height:34px;filter:drop-shadow(0 2px 7px rgba(0,186,132,.30));transition:filter .25s ease,transform .25s ease}
.rd-brand:hover img{filter:drop-shadow(0 3px 13px rgba(0,186,132,.60));transform:translateY(-1px)}
.rd-brand b{font-size:20.5px;font-weight:650;letter-spacing:-.015em;line-height:1;font-family:var(--font-body)}
.rd-brand b span{color:var(--accent-deep);transition:color .25s ease}
.rd-brand:hover b span{color:var(--accent)}
.search{flex:1;display:flex;min-width:0;max-width:640px}
.search input{
  flex:1;min-width:0;height:46px;border:1.5px solid var(--line-strong);border-right:0;border-radius:10px 0 0 10px;
  padding:0 16px;font:inherit;font-size:14.5px;color:var(--ink);background:#FAFBFC;
}
.search input::placeholder{color:#8A93A1}
.search input:focus{outline:none;border-color:var(--ink);background:#fff}
.search button{
  width:52px;height:46px;background:var(--accent);border-radius:0 10px 10px 0;
  display:grid;place-items:center;color:var(--on-accent);transition:background .15s;
}
.search button:hover{background:var(--accent-down)}
.header-acts{display:flex;gap:6px;margin-left:auto;flex-shrink:0}
.h-act{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;border-radius:8px;font-size:11px;font-weight:600;color:var(--ink-2)}
.h-act:hover{background:#F1F3F6}
.h-act svg{width:21px;height:21px}
/* hamburger — alleen mobiel (≤900px), opent het drawer-menu */
.nav-toggle{display:none;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink)}
.nav-toggle svg{width:20px;height:20px}

/* ============ 2B · MOBIEL DRAWER-MENU (slide-in van links, patroon van live voltdelen.nl) ============ */
.rd-mnav-backdrop{position:fixed;inset:0;z-index:190;background:rgba(20,22,30,.45);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
body.rd-mnav-open .rd-mnav-backdrop{opacity:1;visibility:visible}
.rd-mnav{
  position:fixed;top:0;left:0;z-index:200;height:100dvh;width:min(360px,88vw);
  background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;
  transform:translateX(-100%);visibility:hidden;
  transition:transform .32s cubic-bezier(.22,.7,.3,1),visibility .32s;
}
body.rd-mnav-open .rd-mnav{transform:none;visibility:visible}
body.rd-mnav-open{overflow:hidden}
.rd-mnav-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--line);flex:none}
.rd-mnav-head .rd-brand img{width:30px;height:30px}
.rd-mnav-head .rd-brand b{font-size:18.5px}
.rd-mnav-x{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:var(--ink);flex:none}
.rd-mnav-x:hover{background:var(--soft)}
.rd-mnav-x svg{width:20px;height:20px}
.rd-mnav-scroll{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px 12px 28px;flex:1}
.rd-mnav-h{font-family:var(--font-head);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:18px 8px 6px}
.rd-mnc{display:flex;align-items:center;gap:12px;min-height:52px;padding:4px 8px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink)}
.rd-mnc:hover{background:var(--soft)}
.rd-mnc-ph{width:42px;height:42px;flex:none;background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;display:grid;place-items:center}
.rd-mnc-ph img{width:100%;height:100%;object-fit:contain;padding:4px}
.rd-mnc-ph svg{width:20px;height:20px}
.rd-mnc-ph.ic-tint{background:var(--accent-tint);border-color:#FFDDCB;color:var(--accent-deep)}
.rd-mnc small{margin-left:auto;color:#98A0AC;font-size:11.5px}
.rd-mnav-links a{display:flex;align-items:center;gap:11px;min-height:46px;padding:4px 8px;border-radius:10px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.rd-mnav-links a:hover{background:var(--soft);color:var(--ink)}
.rd-mnav-links svg{width:17px;height:17px;color:var(--accent);flex:none}
.rd-mnav-links svg.wa{color:#25D366}

/* ============ 3 · CATEGORIEËNMENUBALK + MEGA-MENU (v6, op live-niveau) ============ */
.navrow{border-top:1px solid var(--line);background:var(--white);position:relative}
/* glass-menubalk (expliciete operator-wens): semi-transparant wit + blur; solide wit is de fallback */
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
  .header{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4)}
  .navrow{background:rgba(255,255,255,.72)}
}
@supports not ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
  .header,.navrow{background:var(--white)}
}
.navrow .wrap{display:flex;align-items:stretch;gap:4px}
.rd-mega{position:static;flex-shrink:0}
.rd-mega-btn{display:flex;align-items:center;gap:8px;padding:0 16px;height:44px;font-weight:700;font-size:14px;background:var(--ink);color:#fff;border-radius:0 0 10px 10px}
.rd-mega-btn svg{width:15px;height:15px}
.rd-mega-btn:hover{background:#000}
/* volle-breedte panel onder de menubalk, zoals live */
.rd-mega-panel{
  position:absolute;top:100%;left:0;right:0;z-index:130;
  background:#fff;border-bottom:1px solid var(--line);border-top:1px solid var(--line);
  box-shadow:0 30px 50px -18px rgba(21,23,26,.28);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.rd-mega:hover .rd-mega-panel,.rd-mega:focus-within .rd-mega-panel,.rd-mega.open .rd-mega-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.rd-mega-inner{display:grid;grid-template-columns:minmax(0,1fr) 264px 188px;gap:26px;padding-block:20px 16px;align-items:start}
.rd-mega-h{font-family:var(--font-head);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
/* uniforme menu-rijen: elk item hetzelfde vierkante beeldvak (46px, contain) + label
   verticaal gecentreerd op één lijn; vaste rij-hoogte 58px in ALLE kolommen — grid-strak */
.rd-mega-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px}
.rd-mega-col{display:flex;flex-direction:column;gap:2px}
.rd-mega-item{display:flex;align-items:center;gap:12px;min-height:58px;padding:5px 8px;border-radius:10px;border:1px solid transparent;transition:background .15s,border-color .15s}
.rd-mega-item:hover{background:var(--soft);border-color:var(--line)}
.rd-mega-item .thumb{width:46px;height:46px;flex:none;background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;display:grid;place-items:center}
.rd-mega-item .thumb img{width:100%;height:100%;object-fit:contain;padding:5px;transition:transform .22s ease}
.rd-mega-item:hover .thumb img{transform:scale(1.07)}
.rd-mega-item .thumb svg{width:22px;height:22px}
.rd-mega-item .thumb--ic{background:var(--accent-tint);border-color:#FFDDCB;color:var(--accent-deep)}
.rd-mega-item b{font-size:13.5px;font-weight:700;line-height:1.25;color:var(--ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-mega-item:hover b{color:var(--accent-deep)}
.rd-mega-item small{margin-left:auto;flex:none;color:#98A0AC;font-size:11.5px}
.quicklinks{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.quicklinks::-webkit-scrollbar{display:none}
.quicklinks a{display:flex;align-items:center;padding:0 13px;height:44px;font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;border-bottom:2px solid transparent}
.quicklinks a:hover{color:var(--ink);border-bottom-color:var(--accent)}

/* ============ 4 · DRIELUIK-HERO (v3) ============ */
.rd-hero{padding:16px 0 0}
.rd-hero .wrap{display:grid;grid-template-columns:1fr 384px;gap:16px}
.hero-main{
  position:relative;border-radius:var(--radius);overflow:hidden;min-height:520px;
  display:flex;align-items:flex-end;background:#2A2D31;
}
/* operator-still: 152% hoogte + top-anker toont de studioscène en verbergt de ingebakken tegelband onderin */
.hero-main>img{position:absolute;left:0;top:0;width:100%;height:152%;object-fit:cover;object-position:50% 0}
.hero-main::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(76deg,rgba(15,16,18,.90) 0%,rgba(15,16,18,.60) 42%,rgba(15,16,18,.04) 72%);
}
.hero-copy{position:relative;z-index:2;color:#fff;padding:44px;max-width:600px}
.hero-copy .kicker{color:#FFB08A;margin-bottom:12px}
.hero-copy .kicker .nw{white-space:nowrap}
.hero-copy h1{font-size:clamp(38px,4.6vw,60px);font-weight:800;line-height:.98}
.hero-copy h1 .hl{color:var(--accent)}
.hero-copy p{margin:16px 0 26px;font-size:16.5px;line-height:1.6;color:#E8EAEC;max-width:46ch}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hero-trust{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:24px;font-size:13.5px;font-weight:600;color:#E8EAEC}
/* hero-vinkjes in het zachte live-groen (#7ee0a8, .hero-assure-patroon van de live site) */
.hero-trust svg{width:15px;height:15px;color:#7EE0A8;flex:none}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust i{width:3px;height:3px;border-radius:99px;background:rgba(255,255,255,.5)}

/* ============ 4B · MERK & TYPE-FINDER (model-finder zoals live, in nieuwe stijl) ============ */
.finder{padding:16px 0 0}
.finder-card{background:var(--ink);border-radius:var(--radius);padding:22px 26px;display:flex;align-items:center;gap:16px 26px;flex-wrap:wrap;color:#fff;box-shadow:var(--shadow-md)}
.finder-tx{min-width:230px}
.finder-tx h2{font-size:clamp(20px,2.2vw,26px);font-weight:800;color:#fff}
.finder-tx p{font-size:13.5px;color:#B9BEC4;margin-top:3px}
.finder-form{display:flex;gap:10px;flex-wrap:wrap;flex:1;justify-content:flex-end;min-width:0}
.finder-form select{
  height:48px;min-width:186px;flex:1 1 186px;max-width:250px;padding:0 38px 0 14px;
  border-radius:var(--radius-s);border:1.5px solid rgba(255,255,255,.30);
  background:#232629 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px;
  color:#fff;font:inherit;font-size:14.5px;font-weight:600;appearance:none;-webkit-appearance:none;cursor:pointer;
}
.finder-form select:hover{border-color:rgba(255,255,255,.55)}
.finder-form select:disabled{opacity:.45;cursor:default}
/* native dropdown-lijst: altijd donkere tekst op wit (voorkomt wit-op-wit op Windows) */
.finder-form select option{color:var(--ink);background:#fff}
.finder-form .rd-btn{flex:none}
/* filterregel boven de rails na een zoekactie */
.finder-bar{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;background:var(--accent-tint);border:1px solid #FFDDCB;border-radius:12px;padding:10px 16px;margin:10px 0 2px;font-size:14px;color:var(--ink)}
.finder-bar .fb-count{color:var(--muted);font-size:13px}
.finder-bar .arrowlink{margin-left:auto}
.finder-clear{font-size:13px;font-weight:700;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;padding:10px 4px;flex:none}
.finder-clear:hover{color:var(--ink)}
.pcard.fit-dim{opacity:.30;filter:saturate(.55)}

.hero-side{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.flank{position:relative;border-radius:var(--radius);overflow:hidden;min-height:200px}
.flank--cat{display:flex;align-items:flex-end;background:#2A2D31}
.flank--cat>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* scrim iets steviger: ook op líchte stills blijft de tekst AA-leesbaar */
.flank--cat::after{content:"";position:absolute;inset:0;background:linear-gradient(10deg,rgba(15,16,18,.92) 0%,rgba(15,16,18,.66) 46%,rgba(15,16,18,.05) 92%)}
.flank--cat .fc-copy{position:relative;z-index:2;color:#fff;padding:22px}
.fc-tag{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#BFF2E0;display:block;margin-bottom:6px;font-family:var(--font-body)}
.flank--cat h3{font-size:26px;font-weight:800;margin-bottom:4px}
.flank--cat p{font-size:13.5px;color:#D9DCDF;margin-bottom:10px}
.flank--cat .arrowlink{color:#fff;font-size:14px}
.flank--cat .arrowlink:hover{color:#FFB08A}
.flank:hover>img{transform:scale(1.03)}
.flank>img{transition:transform .5s ease}

/* klantenservice-paneel (v3): medewerkers-foto + directe kanalen */
.flank--service{display:flex;align-items:flex-end;background:#2A2D31}
.flank--service>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 28%}
.flank--service::after{content:"";position:absolute;inset:0;background:linear-gradient(8deg,rgba(15,16,18,.94) 0%,rgba(15,16,18,.70) 46%,rgba(15,16,18,.08) 94%)}
.fs-copy{position:relative;z-index:2;color:#fff;padding:18px 22px 20px;width:100%}
.flank--service h3{font-size:24px;font-weight:800;margin-bottom:7px}
.fs-lines{display:grid;gap:1px}
.fs-line{display:flex;align-items:center;gap:9px;min-height:31px;font-size:13.5px;font-weight:600;color:#E3E6E9;width:fit-content}
.fs-line svg{width:16px;height:16px;color:var(--accent);flex:none}
.fs-line svg.wa{color:#25D366}
.fs-line:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ============ 5 · MINI-CATEGORIEËN (v5 groter + v12 strak + v15 borderless/snap) ============ */
.catrow-sec{padding:52px 0 10px}
.catrow{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
.catcard{text-align:center;border-radius:14px;transition:transform .18s ease}
/* foto's niet afsnijden: contain op wit vlak met subtiele 1px-outline, alle 8 gelijk */
.catcard .rd-ph{
  aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.catcard .rd-ph img{width:100%;height:100%;object-fit:contain;padding:9%}
.catcard:hover .rd-ph{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.catcard b{display:block;margin-top:10px;font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
@media (max-width:1000px){
  .catrow{display:flex;gap:14px;overflow-x:auto;padding:4px 4px 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .catrow::-webkit-scrollbar{display:none}
  .catcard{scroll-snap-align:start;flex:0 0 auto;width:128px}
}

/* ============ 6 · PRODUCT-RAILS (v6) + cards (v5/v9/v14-klein) ============ */
.rails{padding:34px 0 26px}
.rail{padding:20px 0 4px}
.rail-head{display:flex;align-items:baseline;gap:12px;margin-bottom:11px}
.rail-head h2{font-size:23px;font-weight:800;letter-spacing:.015em}
.rail-count{font-size:12.5px;color:var(--muted);font-weight:600}
.rail-tools{margin-left:auto;display:flex;align-items:center;gap:14px}
.rail-all{font-size:13.5px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.rail-all svg{width:14px;height:14px;color:var(--accent)}
.rail-all:hover{text-decoration:underline}
.rail-nav{display:flex;gap:6px}
.rail-btn{
  width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line-strong);
  display:grid;place-items:center;color:var(--ink);transition:border-color .15s,box-shadow .15s,opacity .15s;
}
.rail-btn svg{width:16px;height:16px}
.rail-btn:hover:not(:disabled){border-color:var(--ink);box-shadow:var(--shadow-md)}
.rail-btn:disabled{opacity:.32;cursor:default}
.rail-track{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding:2px 2px 14px;
}
.rail-track::-webkit-scrollbar{display:none}
.rail-track .pcard{flex:0 0 212px;scroll-snap-align:start}

.pcard{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 11px 12px;display:flex;flex-direction:column;
  transition:box-shadow .18s,border-color .18s,transform .18s;box-shadow:var(--shadow-sm);
}
.pcard:hover{box-shadow:var(--shadow-md);border-color:#C7CDD6;transform:translateY(-3px)}
.p-img{aspect-ratio:1/1;display:grid;place-items:center;background:#fff;border-radius:8px;overflow:hidden}
.p-img img{width:93%;height:93%;object-fit:contain}
.p-title{
  font-size:14.5px;font-weight:600;line-height:1.35;margin-top:7px;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;
}
.pcard:hover .p-title{color:var(--accent-deep)}
.p-fit{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* eerlijke verzend-microregel (v3) — vervangt de FitCheck-chip; korte variant op smalle kaarten */
.p-ship{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:12px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.p-ship svg{width:12px;height:12px;color:var(--ok);flex:none}
.p-ship .ps-s{display:none}
/* vaste slot-layout: prijs + voorraad-badge onderaan gepind, geen witruimte-gat */
.p-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.p-price{font-family:var(--font-head);font-weight:800;font-size:20px;letter-spacing:.01em;white-space:nowrap}
/* voorraad-badge (v14, kleiner) */
.stock-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.stock-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.stock-ok{background:var(--ok-tint);color:var(--ok)}
.stock-low{background:var(--low-tint);color:var(--low)}
.stock-order{background:var(--order-tint);color:var(--order-ink)}

/* ============ 7 · SCHUINE ZWARTE BREKER-BALK (v8) ============ */
.breaker{padding:clamp(34px,4.5vw,64px) 0}
.rd-stats-band{
  background:var(--ink);color:#fff;transform:skewY(calc(var(--slant) * -1));
  transform-origin:left;
}
.stats-inner{transform:skewY(var(--slant))}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:26px 0}
.rd-stat{text-align:center;padding:10px 20px;border-left:1px solid rgba(255,255,255,.14)}
.rd-stat:first-child{border-left:0}
.rd-stat b{
  display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(30px,3.4vw,44px);
  line-height:1;letter-spacing:.01em;
}
.rd-stat b i{font-style:normal;color:var(--accent)}
.rd-stat span{display:block;font-size:13.5px;letter-spacing:.12em;text-transform:uppercase;color:#B9BEC4;margin-top:6px;font-weight:600}

/* ============ 8 · KIESWIJZERS (v11) ============ */
.wizards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
.wizard{
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:22px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.wizard:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.wizard .w-ic{
  width:44px;height:44px;border-radius:12px;background:var(--accent-tint);color:var(--accent-deep);
  display:flex;align-items:center;justify-content:center;
}
.wizard h3{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:17px;font-weight:700;line-height:1.25}
.wizard p{color:var(--muted);font-size:14px;line-height:1.5}
.wizard .w-link{
  margin-top:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:700;color:var(--accent-deep);
}
.wizard:hover .w-link svg{transform:translateX(3px)}
.wizard .w-link svg{transition:transform .15s ease}

/* ============ 9 · BESTSELLERS-GRID ============ */
.bestgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ============ 10 · SPECIALIST (v4-concept, nieuw strak) ============ */
.spec{background:var(--white);border-top:1px solid var(--line)}
.spec-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:center}
.spec-photo{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:1/1}
.spec-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.spec-chip{
  position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;
  /* alpha .82 -> .92: de chip ligt als donkere pil OVER een foto (witte tekst is dus prima
     leesbaar), maar de schouw-runner telt een achtergrond pas als "vast" bij alpha >= .9 en
     hallucineerde anders wit-op-wit (vals-rood). .92 laat de foto nog subtiel doorschemeren en
     laat de checker de échte donkere achtergrond meten. Schouw 15-07. */
  background:rgba(21,23,26,.92);color:#fff;font-size:13px;font-weight:600;
  padding:9px 14px;border-radius:999px;backdrop-filter:blur(3px);
}
.spec-chip svg{width:15px;height:15px;color:var(--accent);flex:none}
.spec-copy h2{font-size:clamp(28px,3.2vw,40px);font-weight:800;margin-top:10px}
.spec-copy .lead{color:var(--ink-2);font-size:16.5px;max-width:56ch;margin-top:12px}
.zeker{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;margin-top:30px}
.zeker article{display:flex;gap:14px;align-items:flex-start}
.zeker .icbox{
  width:44px;height:44px;border-radius:12px;background:var(--accent-tint);color:var(--accent-deep);
  display:grid;place-items:center;flex:none;
}
.zeker .icbox svg{width:21px;height:21px}
.zeker h3{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:15.5px;font-weight:700;line-height:1.3}
.zeker p{font-size:14px;color:var(--muted);margin-top:3px;line-height:1.5}
.spec-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:32px}
.spec-note{font-size:13.5px;color:var(--muted)}

/* ============ 10B · OPERATOR-BANNER (kant-en-klaar beeld, géén tekst eroverheen) ============ */
.opbanner{padding:0 0 58px}
.opbanner a{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease}
.opbanner a:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.opbanner .frame{aspect-ratio:2.65/1;position:relative;background:#EDEFF2}
.opbanner .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 38%}

/* ============ 10C · ASSORTIMENT-STRIP (F13/F14, 21-07)
   Was: nep-"Instagram"-grid met AI-fatbikefoto's. Nu: echte productfoto's uit het eigen
   assortiment (wit vlak, foto groot in het vak), mobiel als swipe-slider. ============ */
.ig-sec{padding-top:0}
.ig-side{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.ig-note{font-size:14.5px;color:var(--muted);max-width:44ch;margin:0}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ig-tile{
  position:relative;display:block;border-radius:12px;overflow:hidden;
  background:var(--white);border:1px solid var(--line);
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.ig-tile:hover,.ig-tile:focus-visible{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--line-strong)}
/* height:auto is hier NIET optioneel: het <img> heeft height="600" als attribuut en die
   presentational hint zet de hoogte hard, waardoor aspect-ratio genegeerd wordt (gemeten:
   148x600 i.p.v. 148x148). Met height:auto pakt aspect-ratio wel. */
.ig-tile img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  padding:5%;background:var(--white);transition:transform .35s ease;
}
.ig-tile:hover img,.ig-tile:focus-visible img{transform:scale(1.04)}
.ig-cap{
  display:block;padding:0 12px 11px;font-size:12.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);text-align:center;
}

/* ============ 11B · TRUSTPILOT (review-sectie op JS-databron in <head>) ============ */
.tp-sec{background:var(--white)}
.tp-head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:26px}
.tp-head h2{font-size:clamp(24px,2.8vw,34px);font-weight:800}
.tp-head .rd-tp-logo{height:28px;width:auto}
.rd-tp-score{display:flex;flex-direction:column;align-items:center;gap:8px}
.rd-tp-score p{font-size:14.5px;color:var(--ink-2)}
.rd-tp-score b{font-weight:800;color:var(--ink)}
/* Trustpilot-sterrenbalk: groene blokjes met witte ster */
.rd-tp-stars{display:flex;gap:3px}
.tp-star{width:24px;height:24px;background:#DCDCE6;display:grid;place-items:center}
.tp-star svg{width:15px;height:15px;fill:#fff;display:block}
.tp-star.on{background:#00B67A}
.rd-tp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1020px;margin:0 auto}
.tp-review{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm)}
.tp-review .tp-star{width:20px;height:20px}
.tp-review .tp-star svg{width:12.5px;height:12.5px}
.tp-review h3{font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:15.5px;font-weight:700;line-height:1.3}
.tp-review p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.tp-review footer{margin-top:auto;padding-top:4px;font-size:12.5px;color:var(--muted)}
.tp-review footer b{color:var(--ink-2);font-weight:600}
.tp-more{display:flex;justify-content:center;margin-top:22px}
/* eerlijke "net begonnen"-variant (actief zolang TRUSTPILOT.active=false) */
.rd-tp-card{
  max-width:660px;margin:0 auto;text-align:center;background:#fff;
  border:1px solid var(--line);border-top:3px solid #00B67A;border-radius:var(--radius);
  padding:clamp(26px,4vw,40px) clamp(22px,4vw,52px);box-shadow:var(--shadow-sm);
}
.rd-tp-card h3{font-family:var(--font-head);font-size:clamp(22px,2.4vw,29px);font-weight:800}
.rd-tp-card>p{color:var(--ink-2);font-size:15.5px;line-height:1.6;max-width:52ch;margin:12px auto 22px}
.rd-btn-tp{background:#00B67A;color:#06281B}
.rd-btn-tp:hover{background:#00A56E}
.tp-note{font-size:13px;color:var(--muted);margin-top:14px}

/* ============ 11C · FAQ (accordion, 2-koloms op desktop) ============ */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;align-items:start}
.faq-col{display:grid;gap:12px;min-width:0}
.faq-item{border:1px solid var(--line);border-radius:12px;background:#fff;transition:border-color .15s ease}
.faq-item[open]{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;
  list-style:none;padding:15px 18px;min-height:52px;font-size:15.5px;font-weight:700;color:var(--ink);
  border-radius:12px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent-deep)}
.faq-item summary::after{
  content:"+";flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--soft);color:var(--ink);font-size:17px;font-weight:600;line-height:1;
  transition:transform .2s ease,background .2s ease,color .2s ease;
}
.faq-item[open] summary::after{content:"–";background:var(--accent-tint);color:var(--accent-deep)}
.faq-a{padding:0 18px 17px;font-size:14.5px;line-height:1.65;color:var(--ink-2);max-width:70ch}
.faq-a a{color:var(--accent-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.faq-a a:hover{color:var(--accent-down)}

/* ============ 11D · SEO-LONGREAD (koopgids) ============ */
.seo-longread{background:var(--soft);border-top:1px solid var(--line);padding:clamp(44px,6vw,64px) 0}
.seo-longread .prose{max-width:820px}
.seo-longread h2{font-size:clamp(24px,2.8vw,32px);font-weight:800;margin-bottom:14px}
.seo-longread h3{font-size:17px;font-weight:800;letter-spacing:.03em;margin:26px 0 8px}
.seo-longread p{font-size:15px;line-height:1.7;color:var(--ink-2);max-width:76ch}
.seo-longread a{color:var(--accent-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.seo-longread a:hover{color:var(--accent-down)}

/* ============ 11 · MERKENSLIDER IN KLEUR (v7/v8/v10) ============ */
.brands{background:var(--soft);border-block:1px solid var(--line);padding:44px 0 48px}
.brands .blabel{
  text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:26px;
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
/* ECHT infinite: 2 identieke sets in één track, -50% = exact de breedte van set 1
   (identieke sets, naadloze gap via padding-right per set — geen zichtbare sprong/reset) */
.mq-track{display:flex;width:max-content;animation:mq 60s linear infinite;will-change:transform}
.mq-set{display:flex;align-items:center;gap:clamp(26px,3vw,40px);padding-right:clamp(26px,3vw,40px);flex:none}
/* hover-pauze bewust NIET (OPERATOR-SMAAK punt 5, 03-07): de band loopt door met de muis erop. */
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Woordmerken: borderless op één visuele massa, subtiele lift + volle inkt on hover. */
.mq-logo{
  display:grid;place-items:center;flex:none;border-radius:10px;padding:6px 10px;
  transition:transform .18s ease,opacity .18s ease;opacity:.85;
}
.mq-logo:hover,.mq-logo:focus-visible{transform:translateY(-3px);opacity:1}
.mq-logo:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
/* De SVG's hebben een strakke viewBox (vaste hoogte, breedte volgt de naam), dus width:auto
   geeft per merk de natuurlijke breedte — geen lege ruimte binnen het beeldvak. */
.mq-track img{height:30px;width:auto;display:block}
.brands-cta{margin-top:20px;display:flex;justify-content:center}

/* ============ 12 · FOOTER (v4 donker + scheef logo · v12 contact · v13 chips-band) ============ */
.footer{background:var(--ink);color:#EDEEF0}
.foot-top{
  display:grid;grid-template-columns:minmax(220px,1.4fr) repeat(4,1fr);
  gap:clamp(24px,3.5vw,44px);padding:clamp(44px,6vw,64px) 0 40px;
}
.f-logo{display:flex;align-items:center;gap:11px}
.f-logo svg{width:42px;height:42px;border-radius:11px;flex:none}
.f-word{
  font-family:var(--font-head);font-style:italic;font-weight:800;font-size:27px;
  letter-spacing:.015em;line-height:1;text-transform:uppercase;color:#fff;
  transform:translateY(-1px);
}
.f-word em{font-style:italic;color:var(--accent)}
.foot-brand p{color:#B9BEC6;font-size:14.5px;max-width:34ch;margin-top:14px}
.foot-fit{
  margin-top:18px;display:inline-flex;align-items:center;gap:9px;
  color:#fff;font-weight:700;font-size:14.5px;
  border:1.5px solid rgba(255,255,255,.35);border-radius:10px;padding:10px 15px;
  transition:border-color .15s,background .15s;
}
.foot-fit:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.foot-fit svg{width:17px;height:17px;color:var(--accent)}
.foot-h{
  font-family:var(--font-head);font-weight:700;text-transform:uppercase;font-size:15px;
  letter-spacing:.12em;color:#fff;margin-bottom:15px;
}
.foot-col ul{display:grid;gap:9px}
.foot-col a{color:#C4C9CF;font-size:14.5px;transition:color .14s}
.foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-contact li{display:flex;gap:9px;align-items:baseline;color:#C4C9CF;font-size:14.5px}
.foot-contact b{color:#fff;font-weight:600;flex:none}
.foot-contact a{color:#C4C9CF}
.foot-contact a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-wa{display:inline-flex;align-items:center;gap:7px}
.foot-wa svg{width:15px;height:15px;color:#25D366;flex:none;align-self:center}
/* chips-band op eigen donkerdere strook (v13) — uitgesneden lockups, GEEN dragers */
.chips-row{background:#101215;border-top:1px solid rgba(255,255,255,.12);padding:24px 0}
.chips-row .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.chips-row p{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#B9BEC6}
.chips{display:flex;align-items:center;gap:12px 22px;flex-wrap:wrap}
.chips img{height:28px;width:auto;display:block}
/* merken zonder officiële darkmode-lockup: minimale lichte behandeling (witte weergave) */
.chips img.chip-inv{filter:brightness(0) invert(1);opacity:.92}
.chip-sep{width:1px;height:22px;background:rgba(255,255,255,.22);margin:0 2px}
/* eerlijke regel onder de strip zolang online afrekenen uitstaat (_shell/betaalstrip.py) */
.chips-row .chips-note{flex:1 0 100%;order:3;margin:2px 0 0;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:#9AA1AA}
.chips-row .chips-note a{color:#33D9A6;text-decoration:underline;text-underline-offset:3px}
.foot-bottom{
  background:#101215;border-top:1px solid rgba(255,255,255,.12);padding:20px 0;
}
.foot-bottom .wrap{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between;font-size:13.5px;color:#B9BEC6}
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:20px}
.foot-bottom a{color:#C4C9CF}
.foot-bottom a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* Bedrijfsgegevens-colofon (legal-infra 20-07, bron data/legal.json via tools/legal_sweep.py).
   Wettelijk verplichte handelsinformatie (ACM / art. 6:230m BW): eigen regel over de volle
   breedte, direct boven de partnersites-regel. Iets lichter dan de body-tekst maar bewust
   leesbaar (contrast #A7AEB7 op #101215 = 7.3:1, ruim boven WCAG AA). */
.foot-company{flex:1 0 100%;margin:6px 0 0;font-size:12.5px;color:#A7AEB7}
.foot-company a{color:#C4C9CF;text-decoration:underline;text-underline-offset:3px}
.foot-company a:hover{color:#fff}
/* partnersites-regel (netwerk-links, 19-07) — bescheiden onder de juridische nav */
.foot-partners{flex:1 0 100%;margin:2px 0 0;font-size:12.5px;color:#9AA1AA}
.foot-partners a{color:#B9BEC6;text-decoration:underline;text-underline-offset:3px}
.foot-partners a:hover{color:#fff}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  /* Zonder animatie moet de band een NETTE, volledig zichtbare wrap worden.
     `flex:none` op .mq-set liet de rij doorlopen buiten .marquee (overflow:hidden) —
     gemeten: 18 woordmerken, maar alleen het middelste stuk in beeld. */
  .mq-track{animation:none;width:auto;justify-content:center;max-width:100%}
  .mq-set{flex:1 1 auto;flex-wrap:wrap;justify-content:center;padding-right:0;row-gap:14px}
  .mq-set--dup{display:none}
  .marquee{overflow:visible;-webkit-mask-image:none;mask-image:none;padding-inline:16px}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .rd-hero .wrap{grid-template-columns:1fr 340px}
  .wizards{grid-template-columns:repeat(2,1fr)}
  .bestgrid{grid-template-columns:repeat(3,1fr)}
  .rd-mega-inner{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.85fr)}
  .rd-mega-cats{grid-template-columns:1fr}
}
@media (max-width:960px){
  .rd-hero .wrap{grid-template-columns:1fr}
  .hero-main{min-height:440px}
  .hero-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .flank{min-height:230px}
  .spec-grid{grid-template-columns:1fr;gap:30px}
  .spec-photo{max-width:560px}
  .foot-top{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .header{position:static}
  .header-main{flex-wrap:wrap;gap:10px 14px;padding:10px 0}
  .search{order:3;flex-basis:100%;max-width:none}
  .h-act span{display:none}
  .h-act{padding:11px;min-height:44px}
  /* mobiel: categorieënbalk dicht — hamburger + drawer-menu nemen het over (zoals live) */
  .navrow{display:none}
  .nav-toggle{display:grid}
  .finder-card{flex-direction:column;align-items:stretch;padding:20px}
  .finder-form{flex-direction:column;justify-content:flex-start}
  .finder-form select{max-width:none;width:100%}
  .finder-form .rd-btn{width:100%}
  .finder-bar .arrowlink{margin-left:0}
  .stats-grid{grid-template-columns:1fr 1fr;row-gap:20px}
  .rd-stat:nth-child(3){border-left:0}
  .faq-grid{grid-template-columns:1fr}
  .rd-tp-grid{grid-template-columns:1fr;max-width:560px}
}
@media (max-width:680px){
  .usp-bar span:nth-child(3){display:none}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .section{padding:48px 0}
  .catrow-sec{padding:38px 0 6px}
  .rd-hero{padding-top:12px}
  .hero-main{min-height:420px}
  .hero-main>img{object-position:46% 0}
  .hero-copy{padding:26px 20px}
  .hero-copy p{font-size:15px}
  .hero-side{grid-template-columns:1fr}
  .flank--cat{min-height:210px}
  .flank--service{min-height:230px}
  /* F14 · assortiment-strip als swipe-slider op mobiel.
     overscroll-behavior-x:contain -> de horizontale veeg lekt niet naar de pagina/history;
     touch-action:pan-x pan-y laat de browser de richting vergrendelen, zodat een VERTICALE
     veeg over de strip gewoon de pagina scrollt (dat was de echte klacht bij RideParts).
     Compact gehouden: 1 rij van ~168px i.p.v. 4 rijen van 2 (was 916px hoog). */
  .ig-grid{
    display:flex;grid-template-columns:none;gap:10px;
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;overscroll-behavior-y:auto;
    touch-action:pan-x pan-y;
    scroll-snap-type:x proximity;scroll-padding-left:16px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    /* volle-breedte-rij binnen .wrap, zonder horizontale pagina-overflow */
    margin-inline:-16px;padding:2px 16px 8px;
  }
  .ig-grid::-webkit-scrollbar{display:none}
  .ig-tile{flex:0 0 150px;scroll-snap-align:start}
  /* merkenband compacter op mobiel: meer woordmerken tegelijk in beeld */
  .mq-track img{height:24px}
  .mq-logo{padding:10px}          /* tap-target >= 44px hoog op een bewegende band */
  .mq-set{gap:26px;padding-right:26px}
  .brands{padding:34px 0 36px}
  .sechead{flex-direction:column;align-items:flex-start;gap:8px}
  .rail-head h2{font-size:20px}
  .rail-all span{display:none}
  .rail-all{min-height:44px;display:inline-flex;align-items:center}
  .rail-btn{width:44px;height:44px}
  .rail-track .pcard{flex-basis:178px}
  .p-ship .ps-l{display:none}
  .p-ship .ps-s{display:inline}
  .bestgrid{grid-template-columns:1fr 1fr;gap:10px}
  .wizards{grid-template-columns:1fr}
  .zeker{grid-template-columns:1fr}
  .rd-btn{padding:0 18px;font-size:18px}
  .hero-ctas .rd-btn{flex:1}
  .opbanner .frame{aspect-ratio:3/2}
  .opbanner .frame img{object-position:50% 50%}
  .foot-top{grid-template-columns:1fr}
  .chips-row .wrap{justify-content:center}
}
@media (max-width:430px){
  .usp-bar span:nth-child(2){display:none}
  /* op smal mobiel alleen de kern-USP; WhatsApp zit al in header + menu + klantenservice */
  .usp-bar .usp-wa{display:none}
  .usp-bar .wrap{justify-content:center}
}

/* ---------- compat/unify-laag bovenop bestaande site-css ---------- */
/* knoppen site-breed in de nieuwe typografie (maten blijven van commerce.css) */
.btn{font-family:var(--font-head);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
/* cart-badge in de nieuwe header (app.js vult [data-cart-count]) */
.h-act{position:relative}
.h-act .pill{position:absolute;top:0;right:8px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:11px;font-weight:700;border-radius:999px;border:2px solid #fff;line-height:1}
/* nieuwsbrief-band (prefoot) rustig laten aansluiten op de nieuwe stijl */
.prefoot h2{font-family:var(--font-head)}
/* legacy: app.js injecteert op elke pagina nog een oud drawer-menu (#mnav + backdrop);
   de nieuwe shell gebruikt rd-mnav — oude injectie hard uit (anders dubbele, verborgen nav)
   (JS-guard op rdHeader staat nu óók in app.js; dit is de riem bij de bretels) */
#mnav,[data-mnav-close]{display:none!important}
/* i18n-taalknop (i18n.js) netjes in de nieuwe header-acts */
.header-acts .lang-switch{position:relative;display:flex;align-items:center}
.header-acts .lang-btn{display:flex;flex-direction:column;align-items:center;gap:2px;width:auto;height:auto;padding:6px 10px;border-radius:8px;font-size:11px;font-weight:600;color:var(--ink-2)}
.header-acts .lang-btn:hover{background:#F1F3F6}
.header-acts .lang-globe{width:21px;height:21px}
.header-acts .lang-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:140;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-md);padding:6px;min-width:176px;display:grid;gap:2px}
.header-acts .lang-menu[hidden]{display:none}
.header-acts .lang-opt{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink);text-align:left}
.header-acts .lang-opt:hover{background:var(--soft)}
.header-acts .lang-opt.is-active{background:var(--accent-tint);color:var(--accent-deep)}

/* ============ COOKIEBANNER (conversie-pass 2026-07-07 · netjes, accepteren/weigeren) ============ */
.ck-banner{position:fixed;left:0;right:0;bottom:0;z-index:1200;background:var(--dark,#121417);color:#fff;box-shadow:0 -8px 30px rgba(0,0,0,.28);transform:translateY(100%);transition:transform .26s cubic-bezier(.22,.61,.36,1)}
.ck-banner.is-in{transform:translateY(0)}
.ck-in{max-width:var(--maxw,1280px);margin-inline:auto;padding:.85rem clamp(1rem,4vw,2rem);display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.ck-txt{margin:0;font-size:.9rem;line-height:1.5;color:#e7eaee;flex:1;min-width:240px}
.ck-txt a{color:var(--accent,#00BA84);text-decoration:underline;font-weight:600}
.ck-btns{display:flex;gap:.6rem;flex-wrap:wrap;margin-left:auto}
.ck-btn{min-height:44px;padding:0 1.15rem;border-radius:10px;font-weight:700;font-size:.88rem;border:1.5px solid transparent;cursor:pointer;white-space:nowrap}
.ck-dec{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.ck-dec:hover{border-color:rgba(255,255,255,.6)}
/* CONTRAST-FIX (schouw 15-07): witte tekst op teal #00BA84 = 2,51:1, zakt onder WCAG AA (4,5).
   De site heeft hiervoor al een token: --on-accent (#1A0E07, "donkere tekst op accent-knoppen (AA)"),
   die de zoek- en primary-knoppen ook gebruiken. Donker op teal = ~8,4:1. */
.ck-acc{background:var(--accent,#00BA84);color:#1A0E07}
.ck-acc:hover{filter:brightness(1.06)}
@media (max-width:560px){.ck-btns{width:100%}.ck-btn{flex:1}}

/* ============================================================================
   A11Y-SCHOUW 15-07 (Janus) — laatste override-laag, na app/premium/commerce.css.
   Twee openstaande schouw-fails op 390px wegnemen:
     1. kleine_fonts_mobiel — geen tekst < 14px op mobiel
     2. tap_targets_mobiel  — geen raakvlak < 24x24 (WCAG 2.2 AA, 2.5.8)
   Plus 1 contrast-fix die geen mobiel-scope heeft (checkout-wordmark).
   Lat tap-targets = 24px (AA), NIET 44px: 24-44 is comfort-advies, geen fail.
   ============================================================================ */

/* CONTRAST: checkout-header-wordmark "DELEN". checkout.html zet inline
   `.brand b{color:var(--accent)}` = teal #00BA84 op wit = 2,51:1 (grote vette tekst,
   eis 3,0 -> fail). De rest van de site kleurt de wordmark met --accent-deep (#C0420C,
   ~5,5:1). redesign.css laadt NA de inline-style; `.co-head .brand b` (0,2,1) wint. */
.co-head .brand b{color:var(--accent-deep,#C0420C)}

@media (max-width:760px){
  /* ---- 1. FONT-VLOER 14px op mobiel -------------------------------------
     De twee token-systemen (app.css --fs-xs=11,8px/--fs-sm=13,5px @390 én de losse
     rem-waarden in commerce/redesign) drijven de microtekst. Vloer optrekken; de
     desktoptypografie blijft ongemoeid (deze regels staan in @media max-width:760px). */
  :root{
    --fs-xs:max(14px,.875rem);
    --fs-sm:max(14px,.9rem);
  }
  /* commerce/PLP/PDP-kaarten + losse rem-labels onder 14px @390. Selectors met genoeg
     soortelijkheid om de bestaande regels te verslaan (bv. .card .body .eyebrow = 0,3,0). */
  .p-fit,.ps-s,.stock-pill,.quick-add span,.buy-usp,.b-price,
  .buy-trust span,.pdp-trust span,.bundle-row label b,.bundle-row label span,
  .btn--sm,.spec-chip,
  .card .eyebrow,.card .body .eyebrow,
  .pdp-specs td,.specs td,.pdp-specs th,.specs td:first-child,.pdp-specs td:first-child,
  .foot-bottom,.foot-bottom p,
  /* shell/redesign micro-tekst (echte class-namen, geverifieerd in de bron) */
  .kicker,.rd-stat span,.fs-line,.rail-count,.usp-on,.usp-on strong,
  .fc-tag,.fc-copy p,.secure,.f-toggle span,
  .rail-all,.spec-note,.finder-tx p,.brands .blabel,
  .chips-row p,.chips-row .chips-note,.chips-row .chips-note a,
  .tp-review footer,.tp-review footer b,.tp-review footer time,
  .footer nav a,.crumbs a,.crumbs span{
    font-size:max(14px,.9rem);
  }

  /* ---- 2. TAP-TARGETS >= 24x24 ------------------------------------------
     Inline links: padding-block telt mee in de border-box (die de runner/WCAG meet)
     en geeft op een inline element GEEN reflow — line-height zou hier niet helpen. */
  .footer li>a,.footer nav a,.foot-wa,.foot-col a,.foot-contact a,
  .crumbs a,.chips-row .chips-note a,.ck-txt a,
  .faq-a a,.arrowlink,.lnk,.rail-all,.pdp-tp-invite a{
    display:inline-block;padding-block:4px;min-height:24px;
  }
  /* herroepingsknop (footer, uit js) — button.hr-link wint op 0,1,1 */
  button.hr-link{min-height:24px}
  /* bundel-checkbox: het LABEL is de tap-target (runner meet 'label'); was 206x20 */
  .bundle-row label{min-height:24px;display:flex;align-items:center}
}

/* Klarna "3x"-badge in productkaarten (eis 10, recept RideParts; injectie: js/redesign.js) */
.rd-pay3{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden}
.rd-pay3 img{height:13px;width:auto;display:block;border-radius:2px}
.card .rd-pay3{margin:2px 0 0}
/* Rail-kaart (.pcard): .p-foot is een space-between flex-rij met prijs + voorraadpil.
   De Klarna-pill wappert naar een eigen volle regel eronder (klarna-badge.js). */
.pcard .rd-pay3{flex-basis:100%;margin:2px 0 0}
.pcard .rd-pay3--gespreid{color:var(--muted)}


/* ==========================================================================
   FIXRONDE A2C — 21-07 (operator-punten VoltDelen). Deze laag staat bewust
   ACHTERAAN in redesign.css: redesign.css is de laatst geladen stylesheet, dus
   hier corrigeren we app.css/commerce.css zonder die (door meerdere shops
   gedeelde) bestanden te hoeken. Elk blok noemt het gemeten probleem.
   ========================================================================== */

/* --- A2C-2 · STAPELVOLGORDE: header prikte dwars door de cart-overlay -------
   Gemeten 21-07 op 1440px: .header z-index 120 (redesign.css) stond BOVEN
   .drawer z-index 95 en .drawer-backdrop z-index 90 (app.css). Bij "in mandje"
   liep de witte header dus dwars over de open winkelwagen heen en bleef het
   zoekveld klikbaar (elementFromPoint op het midden van de header gaf #nav-q
   terwijl de drawer open was). Zelfde defect gold voor .modal (z-index 100).
   Eén schaal, van laag naar hoog: sticky-atc 70 < header 120 < mega 130 <
   lang-menu 140 < mobiel menu 190/200 < CART 210/220 < modal 240 < toast 260
   < cookiebanner 1200 (die moet altijd bovenop kunnen). */
.drawer-backdrop{z-index:210}
.drawer{z-index:220}
.modal{z-index:240}
.toast{z-index:260}

/* --- A2C-1/3 · PRIJSWEERGAVE ----------------------------------------------
   3) "prijs staat onder het euroteken": op de PDP kreeg .buy-price .now een
   krappe flex-breedte (gemeten 60px bij een tekstbreedte van ~78px), waardoor
   "€ 7,70" op de spatie afbrak: € op regel 1, 7,70 op regel 2 (gemeten hoogte
   61px = 2 regels). nowrap houdt teken en bedrag altijd op één regel.
   1) "prijzen lijnen niet uit": in de kaartvoet staat de prijs bottom-aligned;
   kaarten mét Klarna-3x-badge werden 40px hoog, kaarten zonder badge 24px, dus
   het bedrag sprong 16px omhoog/omlaag tussen kaarten in dezelfde rij (gemeten
   c/banden.html: prijs-top 326 vs 342). Een vaste minimumhoogte zet het bedrag
   in elke kaart op dezelfde regel — de badge vult de gereserveerde ruimte. */
.price .now,.buy-price .now,.card .price .now,.sticky-atc .price .now{white-space:nowrap}
.card .price{min-height:40px;justify-content:flex-start}

/* --- A2C-4 · UPSELLS: "vaak samen gekocht" mét productfoto -----------------
   De bundel was een kale checkbox-lijst zonder beeld (operator: "rare
   toestand"). Nu: vierkante productfoto op wit (smaakprofiel punt 3), titel,
   prijs, en de hele rij is de tap-target. Injectie: js/premium.js. */
.bundle{border-radius:var(--r-lg)}
.bundle-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.bundle-head .b-sub{font-size:13px;font-weight:500;color:var(--muted)}
.bundle-row{align-items:center;gap:.7rem;padding:.6rem .7rem}
.bundle-row .b-thumb{flex:none;width:52px;height:52px;border-radius:10px;background:#fff;
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.bundle-row .b-thumb img{width:100%;height:100%;object-fit:contain;display:block;padding:3px}
.bundle-row label{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;line-height:1.35}
.bundle-row label b{font-weight:600;display:block;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bundle-row .b-cat{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.bundle-row .b-price{font-weight:700;color:var(--ink);white-space:nowrap}
.bundle-foot{display:flex;align-items:baseline;gap:.5rem 1rem;flex-wrap:wrap;margin-top:.75rem;
  padding-top:.7rem;border-top:1px solid var(--line)}
.bundle-foot .b-total{font-weight:700}

/* --- A2C-7 · BETAALICONEN: één stijl over de hele site ---------------------
   De footer toonde uitgesneden lockups op 28px (de norm uit OPERATOR-SMAAK
   punt 6), maar de checkout zette dezelfde methodes in witte pill-cards met
   rand + schaduw op 26px — precies de "pill-mix" die het smaakprofiel verbiedt.
   Checkout volgt nu de footer: losse lockups, gelijke hoogte, gelijke witruimte. */
.co-paytrust .co-chip{background:none;border:0;box-shadow:none;padding:0;height:auto}
.co-paytrust .co-chip img{height:28px;width:auto;border-radius:4px}
.co-paytrust{gap:.7rem 1rem}

/* --- A2C-6 · MOBIEL: het finder-vak was 66% van het scherm -----------------
   Gemeten 390x844: sectie "Vind onderdelen voor jouw e-bike" = 559px hoog.
   Oorzaak: .finder-form select heeft flex:1 1 186px; in de mobiele kolom-flex
   werkt die basis op de HOOGTE, dus elke select werd ~190px hoog. */
@media (max-width:900px){
  .finder{padding-top:10px}
  .finder-card{padding:16px;gap:12px}
  .finder-tx h2{font-size:19px}
  .finder-form{gap:8px}
  .finder-form select{flex:0 0 auto;height:46px;min-width:0}
  .finder-form .rd-btn{height:46px;min-height:46px}
}

/* --- A2C-9 · MOBIEL: footer in 2 kolommen ---------------------------------
   Stond op één lange kolom (gemeten footerhoogte 2367px op 390px breed). */
@media (max-width:640px){
  /* padding-BLOCK, geen shorthand: .foot-top deelt de class .wrap en die levert de
     zijmarge. Met `padding:34px 0 28px` nam deze (laatste) regel die zijmarge weg en
     liep de footer tot tegen de schermrand — gemeten 21-07: kolommen 186px op 390px. */
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;
    padding-block:34px 28px}
  .foot-brand{grid-column:1 / -1}
  .foot-col .foot-h{margin-bottom:10px}
  .foot-col ul{gap:7px}
  .foot-col a,.foot-contact li{font-size:13.5px}
  .foot-contact li{flex-wrap:wrap;gap:4px}
}

/* --- A2C-8 · ZWEVENDE WHATSAPP-KNOP ---------------------------------------
   Vloot-patroon: rechtsonder, op elke pagina, boven de sticky koopbalk maar
   onder de cart-overlay en de cookiebanner. .wa-fab-basis staat al in
   commerce.css; hier alleen plaatsing/veiligheid. Injectie: js/whatsapp-fab.js. */
.wa-fab{z-index:150}
.wa-fab:focus-visible{outline:3px solid #0b3d2c;outline-offset:3px}
body.heeft-sticky-atc .wa-fab{bottom:calc(18px + var(--atc-h,0px))}
@media (max-width:760px){
  .wa-fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:12px 15px}
  .wa-fab .wa-tip{display:none}
  body.heeft-sticky-atc .wa-fab{bottom:calc(14px + var(--atc-h,0px) + env(safe-area-inset-bottom,0px))}
}

/* --- A2C-c · STICKY HEADER OOK OP MOBIEL (Atlas-aanvulling 21-07) -----------
   Voormeting: desktop 1440 is de header écht sticky (position:sticky, top:0, na
   scroll naar y=1200 blijft rect.top exact 0 — geen schijn-sticky à la
   top:-719px). Op mobiel stond in de ≤900px-media `position:static`, en dan
   scrollde de balk volledig weg: gemeten rect.top -1153 op y=1200, dus zoekveld,
   menu en winkelwagen waren onderweg onbereikbaar.
   Nu ook mobiel sticky, in dezelfde stijl: witte balk, dezelfde z-index-laag
   (120: onder mega/menu/cart-overlay), en scroll-padding zodat een anker-sprong
   niet ónder de balk uitkomt. */
@media (max-width:900px){
  .header{position:sticky;top:0}
  html{scroll-padding-top:104px}
}
/* GEEN hoogte-tweak op .header-main: die deelt de class .wrap, dus een
   `padding`-shorthand wist de zijmarge en het zoekveld liep tot tegen de
   schermrand (gemeten: 0px 16px -> 7px 0px, header 101px -> 115px). Zelfde
   val als bij .foot-top hierboven. De balk blijft dus exact zo hoog als hij
   was — alleen niet langer weggescrold. */

/* ==========================================================================
   FIXRONDE A2D — 21-07 (VoltDelen ronde 2, F15-schouw). Zelfde plek en zelfde
   afspraak als het A2C-blok hierboven: laatste laag, elk blok noemt de meting.
   ========================================================================== */

/* --- A2D-F15 · verplicht akkoordvinkje op checkout was 14x18 -----------------
   Gemeten 21-07 op 390px in de gerenderde DOM: `#co-terms` = 14x18 CSS-px. De
   a11y-laag van 15-07 hierboven zet de lat expliciet op 24x24 (WCAG 2.2 AA 2.5.8)
   maar raakt alleen links/knoppen — native checkboxes vielen erbuiten, en juist
   dit vinkje is verplicht om te kunnen bestellen. 24px is de AA-ondergrens. */
#co-terms,#co-marketing{width:24px;height:24px;flex:none;accent-color:var(--accent-600,#007A55)}