/* ============================================================================
   FATPARTS — light, clean, conversie-gericht design system
   Witte basis · slate-tekst · 1 energiek accent · zachte schaduwen.
   Vanilla CSS, geen build. Motion: subtiel, transform/opacity, reduced-motion-safe.
   ============================================================================ */

@font-face{font-family:'Saira';src:url('/assets/fonts/saira-latin-var.woff2') format('woff2');font-weight:400 800;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:700;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('/assets/fonts/fraunces-latin-var.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{--bg:#FFFFFF;--bg-2:#F4F6F8;--bg-3:#E9EDF1;--surface:#FFFFFF;--surface-2:#F1F4F7;--ink:#14171C;--ink-2:#49515C;--ink-3:#67707A;--line:#E6E9ED;--line-2:#D5DAE0;--dark:#121417;--accent:#FF5A1E;--accent-600:#B23C09;--accent-700:#E84A12;--accent-50:#FFF4EE;--accent-100:#FFD9C7;--accent-ink:#FFFFFF;--ok:#0E7A45;--ok-bg:#E7F6EE;--warn:#985D00;--warn-bg:#FDF2DC;--star:#F5A623;--font-display:'Saira Condensed','Arial Narrow','Saira',system-ui,sans-serif;--font-body:'Saira',system-ui,sans-serif;--fs-xs:clamp(.74rem,.71rem + .12vw,.81rem);--fs-sm:clamp(.84rem,.81rem + .15vw,.93rem);--fs-base:clamp(.95rem,.92rem + .2vw,1.04rem);--fs-lg:clamp(1.1rem,1.02rem + .4vw,1.3rem);--fs-xl:clamp(1.35rem,1.1rem + 1.1vw,1.9rem);--fs-2xl:clamp(1.8rem,1.4rem + 2vw,2.9rem);--fs-hero:clamp(2.4rem,1.6rem + 3.6vw,4.4rem);--s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem;--r:12px;--r-lg:18px;--r-xl:24px;--header-h:66px;--maxw:1280px;--sh-warm:0 10px 30px rgba(20,32,54,.10);--sh-cta:0 12px 28px rgba(255,90,30,.30);--shadow:0 6px 22px rgba(20,32,54,.08);--shadow-md:0 16px 40px rgba(20,32,54,.12);--shadow-lg:0 24px 56px rgba(20,32,54,.16);--ease:cubic-bezier(.22,.61,.36,1);--speed:.28s}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:var(--fs-base);line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.12;letter-spacing:-.012em}
h1,h2,h3{font-family:var(--font-display)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-ink)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.muted{color:var(--ink-2)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:1000;background:var(--accent);color:#fff;padding:10px 14px;border-radius:var(--r)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kicker{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--accent-600);font-weight:700}
.ic{display:inline-block;width:1.15em;height:1.15em;flex:none;vertical-align:-.18em;line-height:0}
.ic>svg,svg.ic{display:block;width:100%;height:100%}
.fit-banner .ic{width:24px;height:24px;color:var(--accent-600)}
.life .life-pts .ic{width:18px;height:18px;color:#fff}
.pay-badge .ic{width:16px;height:16px}
.rev-card .vf .ic{width:13px;height:13px}
.foot-badges .ic,.foot-badges svg{width:16px;height:16px;color:var(--accent)}

/* ---- Buttons ------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:46px;
  padding:0 1.3rem;border-radius:var(--r);font-weight:700;font-size:var(--fs-sm);
  border:1.5px solid transparent;transition:transform var(--speed) var(--ease),
    background var(--speed),box-shadow var(--speed),border-color var(--speed);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--sh-cta)}
.btn--primary:hover{background:var(--accent-600);transform:translateY(-2px);box-shadow:0 16px 34px rgba(239,90,30,.38)}
.btn--ghost{background:var(--surface);border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--bg-2)}
.btn--dark{background:var(--dark);color:#fff}
.btn--dark:hover{background:#000;transform:translateY(-2px)}
.btn--block{width:100%}
.btn--lg{min-height:54px;font-size:var(--fs-base);padding-inline:1.7rem}
.btn--sm{min-height:38px;font-size:var(--fs-xs);padding-inline:.9rem}

/* ---- USP bar ------------------------------------------------------------- */
.usp-bar{background:var(--dark);color:#fff}
.usp-bar .wrap{display:flex;gap:1.5rem;align-items:center;justify-content:center;flex-wrap:wrap;
  padding-block:.5rem;font-size:var(--fs-xs);font-weight:600}
.usp-bar span{display:inline-flex;align-items:center;gap:.4rem;color:#e9e8e4}
.usp-bar svg{width:16px;height:16px;color:var(--accent);stroke:currentColor;fill:none;stroke-width:2}
@media (max-width:680px){.usp-bar span:nth-child(n+3){display:none}}

/* ---- Header -------------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(18,20,23,.82);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line);transition:box-shadow var(--speed),background var(--speed)}
.site-head.is-scrolled{background:rgba(18,20,23,.95);box-shadow:0 8px 28px rgba(0,0,0,.5)}
.nav{display:flex;align-items:center;gap:var(--s5);height:var(--header-h)}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);
  font-weight:700;font-size:1.45rem;letter-spacing:-.01em}
.brand .mark{width:34px;height:34px;display:grid;place-items:center;background:var(--accent);
  border-radius:8px;color:#fff;font-size:1.1rem;box-shadow:0 3px 10px rgba(239,90,30,.3)}
.brand-mark{width:36px;height:36px;border-radius:9px;flex:none}
.brand .wordmark{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.5rem;line-height:1}
.brand b{color:var(--accent)}
.main-nav{display:flex;align-items:center;gap:.3rem}
.main-nav>a,.main-nav>button{display:inline-flex;align-items:center;gap:.3rem;padding:.55rem .8rem;
  border-radius:var(--r);font-weight:600;font-size:var(--fs-sm);color:var(--ink);transition:background var(--speed),color var(--speed)}
.main-nav>a:hover,.main-nav>button:hover,.main-nav .has-mega[aria-expanded="true"]{background:var(--bg-2);color:var(--accent-600)}
.main-nav .caret{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform var(--speed)}
.main-nav .has-mega[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav-search{flex:1;display:flex;max-width:420px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:999px;overflow:hidden;transition:border-color var(--speed),background var(--speed)}
.nav-search:focus-within{border-color:var(--accent);background:var(--bg-3)}
.nav-search input{flex:1;min-width:0;border:0;background:transparent;padding:.6rem 1rem;font-size:var(--fs-sm)}
.nav-search input::placeholder{color:var(--ink-3)}
.nav-search button{padding:0 1rem;color:var(--ink-2)}
.nav-search button:hover{color:var(--accent)}
.nav-actions{display:flex;align-items:center;gap:.35rem;margin-left:auto}
.icon-btn{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r);
  color:var(--ink);transition:background var(--speed),color var(--speed)}
.icon-btn:hover{background:var(--bg-2);color:var(--accent-600)}
.icon-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.pill{position:absolute;top:2px;right:2px;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 var(--bg)}
.menu-toggle{display:none}

/* ---- Mega dropdown ------------------------------------------------------- */
.mega{position:absolute;left:0;right:0;top:100%;z-index:55;background:var(--surface);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s var(--ease)}
.mega.open{opacity:1;visibility:visible;transform:none}
@media (max-width:780px){.mega{display:none}} /* mobiel gebruikt mnav; mega anders latent in layout (overflow) */
.mega .wrap{display:grid;grid-template-columns:1fr 280px;gap:var(--s6);padding-block:var(--s5)}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
.mega-cat{display:flex;align-items:center;gap:.7rem;padding:.7rem;border-radius:var(--r);transition:background var(--speed)}
.mega-cat:hover{background:var(--bg-2)}
.mega-cat .ic{width:42px;height:42px;flex:none;display:grid;place-items:center;background:var(--bg-2);
  border-radius:10px;font-size:1.25rem;overflow:hidden}
.mega-cat .ic img{width:100%;height:100%;object-fit:cover}
.mega-cat .tx{display:flex;flex-direction:column;line-height:1.2}
.mega-cat b{font-size:var(--fs-sm)}
.mega-cat small{font-size:var(--fs-xs);color:var(--ink-3)}
.mega-promo{background:linear-gradient(160deg,var(--accent-50),var(--bg-2));border:1px solid var(--accent-100);
  border-radius:var(--r-lg);padding:var(--s5);display:flex;flex-direction:column;justify-content:center;gap:.6rem}
.mega-promo b{font-family:var(--font-display);font-size:var(--fs-lg)}
.mega-promo p{font-size:var(--fs-sm);color:var(--ink-2);margin:0}

/* ---- Mobile nav ---------------------------------------------------------- */
.mnav-backdrop{position:fixed;inset:0;z-index:90;background:rgba(20,22,30,.45);opacity:0;visibility:hidden;transition:.3s}
body.mnav-open .mnav-backdrop{opacity:1;visibility:visible}
.mnav{position:fixed;top:0;left:0;z-index:95;height:100dvh;width:min(360px,90%);background:var(--surface);
  border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .32s var(--ease);
  display:flex;flex-direction:column;overflow-y:auto}
body.mnav-open .mnav{transform:none}
.mnav header{display:flex;align-items:center;justify-content:space-between;padding:var(--s4);border-bottom:1px solid var(--line)}
.mnav nav{padding:var(--s3)}
.mnav a,.mnav .acc-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:.85rem .8rem;border-radius:var(--r);font-weight:600;font-size:var(--fs-base);color:var(--ink)}
.mnav a:hover,.mnav .acc-trigger:hover{background:var(--bg-2)}
.acc-panel{display:none;padding-left:.6rem}
.acc-panel.open{display:block}
.acc-panel a{font-weight:500;color:var(--ink-2)}
.acc-trigger svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .25s}
.acc-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ---- Hero ---------------------------------------------------------------- */
.hero{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:center;
  padding-block:clamp(2.2rem,5vw,4rem)}
.hero h1{font-size:var(--fs-hero);letter-spacing:-.025em;line-height:1.02}
.hero h1 .hl{color:var(--accent)}
.hero p.lead{max-width:48ch;color:var(--ink-2);font-size:var(--fs-lg);margin:var(--s4) 0 var(--s5)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem}
.hero-assure{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:var(--s5)}
.hero-assure div{display:flex;align-items:center;gap:.45rem;font-size:var(--fs-sm);color:var(--ink-2);font-weight:600}
.hero-assure .ic{width:18px;height:18px;color:var(--ok)}
.hero-proof{display:flex;align-items:center;gap:.5rem;margin-top:var(--s5);font-size:var(--fs-sm)}
.hero-proof .stars{font-size:1.15em}.hero-proof strong{font-weight:700}.hero-proof .muted{color:var(--ink-2)}
.hero-visual{position:relative;aspect-ratio:1/1;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md)}
.hero-visual img{width:100%;height:100%;object-fit:cover}
.hero-visual .vtag{position:absolute;left:1rem;bottom:1rem;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:.45rem .9rem;font-size:var(--fs-xs);font-weight:700;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:.4rem}
.hero-visual .vtag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}

/* ---- Sections ------------------------------------------------------------ */
.section{padding-block:clamp(1.5rem,3vw,2.6rem)}
.section.alt{background:var(--bg-2);border-block:1px solid var(--line)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap}
.section-head h2{font-size:var(--fs-2xl)}
.section-head p{color:var(--ink-2);max-width:54ch;margin:.4rem 0 0}
.section-head .lnk{color:var(--accent-600);font-weight:700;font-size:var(--fs-sm)}
.section-head .lnk:hover{text-decoration:underline}

/* ---- Category hub -------------------------------------------------------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:var(--s4)}
.cat-card{position:relative;display:flex;flex-direction:column;gap:.3rem;padding:var(--s5) var(--s4);
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);transition:transform var(--speed) var(--ease),box-shadow var(--speed),border-color var(--speed)}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--accent-100)}
.cat-card .ic{width:52px;height:52px;display:grid;place-items:center;background:var(--accent-50);border-radius:12px;font-size:1.6rem;margin-bottom:.5rem}
.cat-card b{font-size:var(--fs-base)}
.cat-card span{font-size:var(--fs-xs);color:var(--ink-3)}
.cat-card .arr{position:absolute;top:var(--s4);right:var(--s4);color:var(--accent);opacity:0;transform:translateX(-4px);transition:.25s}
.cat-card:hover .arr{opacity:1;transform:none}

/* ---- Product grid + cards ------------------------------------------------ */
.shop-layout{display:grid;grid-template-columns:248px 1fr;gap:var(--s6);align-items:start}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4)}
.products-top{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap;color:var(--ink-2);font-size:var(--fs-sm)}

.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);overflow:hidden;transition:transform var(--speed) var(--ease),box-shadow var(--speed),border-color var(--speed)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--line-2)}
.card:hover .cover img{transform:scale(1.05)}
.card .cover{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.card .cover img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card .badge{position:absolute;top:10px;left:10px;z-index:2;font-weight:700;font-size:11px;
  padding:.28rem .5rem;border-radius:6px;background:var(--ink);color:#fff}
.card .badge--new{background:var(--ok);color:#fff}
.card .stock{position:absolute;top:10px;right:10px;z-index:2;font-size:11px;font-weight:700;
  padding:.28rem .5rem;border-radius:999px;background:var(--ok-bg);color:var(--ok)}
.card .stock.check{background:var(--warn-bg);color:var(--warn)}
.card .body{display:flex;flex-direction:column;gap:.45rem;padding:var(--s4);flex:1}
.card .eyebrow{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:600}
.card h3{font-size:var(--fs-base);line-height:1.25;font-weight:700}
.card h3 a:hover{color:var(--accent-600)}
.card .ship{font-size:var(--fs-xs);color:var(--ink-2);display:flex;align-items:center;gap:.3rem;font-weight:600}
.card .ship svg{width:16px;height:16px;color:var(--ink-3);flex:none;stroke:currentColor;fill:none;stroke-width:2}
.card .fitline{font-size:var(--fs-xs);color:var(--ink-2);display:flex;align-items:flex-start;gap:.3rem}
.card .fitline svg{width:16px;height:16px;color:var(--ok);flex:none;margin-top:2px;stroke:currentColor;fill:none;stroke-width:2}
.card .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-top:.5rem}
.price{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);line-height:1;color:var(--ink)}
.price del{display:block;font-size:var(--fs-xs);color:var(--ink-3);font-family:var(--font-body);font-weight:500}
.price.sale .now{color:var(--ink)}
.card .add{flex:none}

/* ---- Polish (Janus/agent8): hierarchie + beeldcohesie ------------------- */
/* Korting-chip = donker, informatief (-X%) i.p.v. generiek oranje "Sale".
   Houdt oranje exclusief voor de primaire CTA (design-standards #3 hierarchie). */
.badge--save{background:var(--ink);color:#fff;letter-spacing:.02em}
/* Subtiele, consistente beeld-harmonisatie zodat de uiteenlopende foto's
   (donkere band <-> geel laadblok <-> witte koplamp) als een set lezen.
   Mild gehouden zodat product-/kleurherkenning intact blijft. */
.card .cover{background:var(--surface-2)}
.card .cover img,.cat-card .ph img{filter:saturate(.96) contrast(1.03) brightness(1.01)}

/* ---- Filter rail --------------------------------------------------------- */
.filters{position:sticky;top:calc(var(--header-h) + 12px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s4)}
.filters h4{font-size:var(--fs-sm);color:var(--ink);margin:0;font-weight:700}
.filters-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 .7rem}
.filters-reset{background:none;border:0;color:var(--accent-600);font-size:var(--fs-xs);font-weight:700;cursor:pointer;padding:.2rem .1rem;border-radius:var(--r)}
.filters-reset:hover{text-decoration:underline;text-underline-offset:2px}
.filters-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* mobiele filter-toggle: alleen zichtbaar < 1040px (desktop = altijd open rail) */
.f-toggle{display:none}
.field{margin-bottom:var(--s4)}
.field>label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700;margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:var(--r);padding:.6rem .7rem;font-size:var(--fs-sm)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-100)}
@media (max-width:780px){.field input,.field select,.field textarea,.nav-search input{font-size:16px}} /* voorkomt iOS-zoom op focus */
.check{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.filter-fit{margin-top:var(--s4);padding:var(--s4);border-radius:var(--r);background:var(--accent-50);border:1px solid var(--accent-100)}
.filter-fit b{font-size:var(--fs-sm)}
.filter-fit p{font-size:var(--fs-xs);color:var(--ink-2);margin:.3rem 0 .7rem}

/* ---- Trust strip --------------------------------------------------------- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4)}
.trust-card{display:flex;gap:.9rem;align-items:flex-start;padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.trust-card .t-ic{width:46px;height:46px;flex:none;display:grid;place-items:center;background:var(--accent-50);border-radius:12px;color:var(--accent-600)}
.trust-card .t-ic .ic{width:24px;height:24px}
.trust-card b{font-size:var(--fs-base);font-weight:700}
.trust-card p{margin:.2rem 0 0;font-size:var(--fs-sm);color:var(--ink-2)}

/* ---- Steps / koopgids ---------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s4)}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);position:relative}
.step .n{font-family:var(--font-display);font-size:2.4rem;color:var(--accent-100);line-height:1;position:absolute;top:.6rem;right:1rem}
.step h3{font-size:var(--fs-lg);margin-bottom:.4rem}
.step p{color:var(--ink-2);font-size:var(--fs-sm);margin:0 0 .8rem}
.step a{color:var(--accent-600);font-weight:700;font-size:var(--fs-sm)}

/* ---- Merklogo's (wit-op-donker, gegenereerd door tools/make-brand-logos.py) ----
   Eén consistente stijl: officieel logo monochroom-wit in een nette donkere "chip"-tegel.
   .brand-logo zelf is al wit-op-transparant; de chip geeft contrast + ademruimte. */
.brand-logo{display:block;width:auto;height:36px;max-width:100%;object-fit:contain;
  opacity:.92;transition:opacity var(--speed) var(--ease)}
.brand-logo--lg{height:46px}
.brand-logo-chip{display:flex;align-items:center;justify-content:center;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r);
  padding:.7rem 1rem;min-height:72px;
  transition:transform var(--speed) var(--ease),border-color var(--speed),box-shadow var(--speed)}
.brand-logo-chip--card{margin-bottom:var(--s4)}
.brand-logo-chip--card:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--shadow)}
.brand-logo-chip--card:hover .brand-logo{opacity:1}
.step--brand h3{margin-top:0}
/* merk-pagina hero: logo-chip naast de titel */
.brand-hero{display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s5);flex-wrap:wrap}
.brand-hero .brand-logo-chip{flex:none;min-width:170px;min-height:96px}
.brand-hero h1{font-size:var(--fs-2xl)}
.brand-hero p{color:var(--ink-2);max-width:60ch;margin:.4rem 0 0}
@media (max-width:560px){.brand-hero .brand-logo-chip{width:100%}}

/* ---- Homepage merken-strip: logo in elke tegel ---- */
.brandwrap a .brand-logo{height:30px}
.brandwrap.brandwrap--logos a{flex-direction:column;gap:.45rem;padding:.85rem .8rem;min-height:92px}
.brandwrap.brandwrap--logos a .brand-name{font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-2);font-family:var(--font-display)}
.brandwrap.brandwrap--logos a:hover .brand-name{color:var(--accent-600)}
.brandwrap.brandwrap--logos a:hover .brand-logo{opacity:1}

/* ---- Footer -------------------------------------------------------------- */
.site-foot{margin-top:var(--s8);background:var(--dark);color:#cfd0cf}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(5,minmax(120px,1fr));gap:var(--s5);padding-block:var(--s7) var(--s6)}
@media (max-width:1080px){.foot-grid{grid-template-columns:1fr 1fr 1fr}}
.site-foot .brand{color:#fff}
.site-foot h5{font-family:var(--font-display);font-size:var(--fs-sm);letter-spacing:.04em;color:#fff;margin:0 0 .8rem}
.site-foot a{display:block;color:#b9bab8;padding:.25rem 0;font-size:var(--fs-sm)}
.site-foot a:hover{color:var(--accent)}
.foot-badges{display:flex;flex-wrap:wrap;gap:1.2rem;padding-block:var(--s4);border-top:1px solid rgba(255,255,255,.1)}
.foot-badges div{display:flex;align-items:center;gap:.45rem;font-size:var(--fs-xs);color:#b9bab8}
.foot-badges svg{width:16px;height:16px;color:var(--accent);stroke:currentColor;fill:none;stroke-width:2}
.foot-base{border-top:1px solid rgba(255,255,255,.1);padding-block:var(--s4);display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;color:#8c8d8b;font-size:var(--fs-xs)}

/* ---- Cart drawer --------------------------------------------------------- */
.drawer-backdrop{position:fixed;inset:0;z-index:90;background:rgba(20,22,30,.45);opacity:0;visibility:hidden;transition:.3s}
body.drawer-open .drawer-backdrop{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;z-index:95;height:100dvh;width:min(430px,100%);background:var(--surface);
  border-left:1px solid var(--line);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .34s var(--ease)}
body.drawer-open .drawer{transform:none}
.drawer header{display:flex;align-items:center;justify-content:space-between;padding:var(--s4) var(--s5);border-bottom:1px solid var(--line)}
.drawer header h3{font-size:var(--fs-lg)}
.close-btn{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;font-size:1.3rem;color:var(--ink-2)}
.close-btn:hover{background:var(--bg-2);color:var(--ink)}
.drawer .items{flex:1;overflow-y:auto;padding:var(--s4) var(--s5)}
.empty-cart{text-align:center;color:var(--ink-2);padding:var(--s8) 0;display:flex;flex-direction:column;gap:1rem;align-items:center}
.line-item{display:grid;grid-template-columns:60px 1fr auto;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.line-item img{width:60px;height:60px;object-fit:contain;background:var(--bg-2);border-radius:var(--r);padding:6px}
.line-item .name{font-weight:700;font-size:var(--fs-sm);line-height:1.25}
.line-item .row{display:flex;align-items:center;gap:var(--s3);margin-top:.4rem}
.qty-mini{display:flex;align-items:center;gap:.2rem;border:1px solid var(--line-2);border-radius:var(--r)}
.qty-mini button{width:30px;height:30px;color:var(--ink-2)}
.qty-mini button:hover{color:var(--accent)}
.line-item .rm{border:0;background:none;color:var(--ink-3);font-size:12px;text-decoration:underline}
.line-item .rm:hover{color:var(--accent-600)}
.line-item .price{font-size:var(--fs-base)}
.drawer footer{padding:var(--s5);border-top:1px solid var(--line);background:var(--bg-2)}
.summary-row{display:flex;justify-content:space-between;padding:.3rem 0;font-size:var(--fs-sm);color:var(--ink-2)}
.summary-row.total{font-family:var(--font-display);font-size:var(--fs-lg);color:var(--ink);padding-top:.7rem;margin-top:.4rem;border-top:1px solid var(--line)}

/* ---- Modal --------------------------------------------------------------- */
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:var(--s4)}
.modal.open{display:grid}
.modal .backdrop{position:absolute;inset:0;background:rgba(20,22,30,.5);animation:fade .25s var(--ease) forwards}
.modal .box{position:relative;z-index:1;width:min(860px,100%);max-height:90dvh;overflow:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);padding:var(--s6);box-shadow:var(--shadow-lg);animation:pop .3s var(--ease) forwards}
.modal .box.sm{width:min(540px,100%)}
@keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
.modal h2{font-size:var(--fs-xl);margin-bottom:.3rem}
.modal .x{position:absolute;top:var(--s4);right:var(--s4);width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;color:var(--ink-2);font-size:1.3rem}
.modal .x:hover{background:var(--bg-2);color:var(--ink)}
.pd{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
.pd-img{aspect-ratio:4/3;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.pd-img img{width:100%;height:100%;object-fit:cover}
.specs{width:100%;border-collapse:collapse;margin:var(--s4) 0;font-size:var(--fs-sm)}
.specs td{padding:.55rem .2rem;border-bottom:1px solid var(--line)}
.specs td:first-child{color:var(--ink-3);text-transform:uppercase;font-size:11px;letter-spacing:.04em;width:42%;font-weight:600}

/* ---- Toast --------------------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:200;transform:translate(-50%,140%);background:var(--dark);color:#fff;
  border-left:3px solid var(--accent);padding:.8rem 1.2rem;border-radius:var(--r);font-size:var(--fs-sm);font-weight:600;
  box-shadow:var(--shadow-lg);transition:transform .34s var(--ease);max-width:90vw}
.toast.show{transform:translateX(-50%)}

/* ---- Breadcrumbs --------------------------------------------------------- */
.crumbs{font-size:var(--fs-xs);color:var(--ink-3);padding-block:var(--s4) 0}
.crumbs a:hover{color:var(--accent-600)}
.crumbs span{color:var(--ink-2)}

/* ---- PDP ----------------------------------------------------------------- */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start;padding-block:var(--s5)}
.pdp-gallery{position:sticky;top:calc(var(--header-h) + 16px)}
.pdp-main-img{aspect-ratio:4/3;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.pdp-main-img img{width:100%;height:100%;object-fit:cover}
.pdp h1{font-size:var(--fs-2xl)}
.pdp .price-row{display:flex;align-items:center;gap:var(--s4);margin:var(--s4) 0}
.pdp .price-row .price{font-size:var(--fs-2xl)}
.fit-banner{display:flex;gap:.7rem;align-items:flex-start;padding:var(--s4);border-radius:var(--r);background:var(--accent-50);border:1px solid var(--accent-100);margin:var(--s4) 0}
.fit-banner svg{width:22px;height:22px;color:var(--accent-600);flex:none;stroke:currentColor;fill:none;stroke-width:2}
.pdp-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin:var(--s5) 0}
.pdp .models{display:flex;flex-wrap:wrap;gap:.4rem;margin:var(--s3) 0}
.pdp .models span,.pdp .models a{font-size:var(--fs-xs);padding:.3rem .65rem;border:1px solid var(--line-2);border-radius:999px;color:var(--ink-2);display:inline-block}
.pdp .models a{color:var(--accent-600);border-color:var(--accent);text-decoration:none;transition:.15s}
.pdp .models a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;background:rgba(18,20,23,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:.6rem var(--s4)}
.sticky-atc .inner{display:flex;align-items:center;gap:var(--s4);max-width:var(--maxw);margin-inline:auto}
.sticky-atc .price{font-size:var(--fs-lg)}

/* ---- Sterren / rating ---------------------------------------------------- */
.stars{position:relative;display:inline-block;font-size:.85em;line-height:1;letter-spacing:1px;white-space:nowrap}
.stars .s-bg{color:var(--line-2)}
.stars .s-fg{position:absolute;left:0;top:0;color:var(--star);overflow:hidden;white-space:nowrap}
.s-count{font-size:var(--fs-xs);color:var(--ink-2);font-weight:600;margin-left:.35rem}
.rating-row{display:flex;align-items:center;gap:.1rem;margin:-.1rem 0 .1rem}

/* ---- Categorie-kaart met foto -------------------------------------------- */
.cat-card{padding:0;overflow:hidden}
.cat-card .ph{aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.cat-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.cat-card:hover .ph img{transform:scale(1.06)}
.cat-card .cc-body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.1rem}
.cat-card .cc-body b{font-size:var(--fs-base)}
.cat-card .cc-body span{font-size:var(--fs-xs);color:var(--ink-3)}
.cat-card .arr{top:auto;bottom:1rem;right:1rem}

/* ---- Lifestyle band ------------------------------------------------------ */
.life{position:relative;overflow:hidden;border-radius:var(--r-xl);min-height:340px;display:flex;align-items:center;
  border:1px solid var(--line);box-shadow:var(--shadow-md)}
.life img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.life::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,22,30,.82),rgba(20,22,30,.35) 70%,transparent)}
.life .life-tx{position:relative;z-index:2;color:#fff;padding:clamp(1.5rem,4vw,3rem);max-width:60ch}
.life .life-tx h2{color:#fff;font-size:var(--fs-2xl)}
.life .life-tx p{color:#e6e6e3;margin:.6rem 0 1.2rem;font-size:var(--fs-lg)}
.life .life-pts{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-bottom:1.4rem}
.life .life-pts span{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:var(--fs-sm)}
.life .life-pts svg{width:18px;height:18px;color:#fff;stroke:currentColor;fill:none;stroke-width:2}

/* ---- Stats / social proof band ------------------------------------------- */
.stats-band{background:var(--ink);color:#fff}
.stats-band .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);padding-block:var(--s5)}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.2rem}
.stat b{font-family:var(--font-display);font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);color:#fff;line-height:1}
.stat span{font-size:var(--fs-xs);color:#b9bab8;text-transform:uppercase;letter-spacing:.06em}
.stat:first-child b,.stats-band .accent b{color:var(--accent)}
@media (max-width:680px){.stats-band .wrap{grid-template-columns:1fr 1fr;gap:var(--s5)}}

/* ---- Reviews / testimonials ---------------------------------------------- */
.rev-head{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.rev-score{display:flex;align-items:center;gap:.7rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;flex-wrap:wrap;max-width:100%}
@media (max-width:480px){.rev-score{border-radius:var(--r-lg)}}
.rev-score .big{font-family:var(--font-display);font-size:1.6rem;line-height:1}
.rev-score .stars{font-size:1.05em}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4)}
.rev-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);display:flex;flex-direction:column;gap:.6rem}
.rev-card .top{display:flex;align-items:center;gap:.7rem}
.rev-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;font-size:var(--fs-sm);flex:none;background:var(--accent)}
.rev-card .nm{font-weight:700;font-size:var(--fs-sm);line-height:1.1}
.rev-card .vf{display:inline-flex;align-items:center;gap:.25rem;font-size:11px;color:var(--ok);font-weight:600}
.rev-card .vf svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.rev-card p{margin:0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55}
.rev-card .prod{font-size:var(--fs-xs);color:var(--ink-3);margin-top:auto}

/* ---- Payment / trust badges ---------------------------------------------- */
.pay-badges{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;justify-content:center}
.pay-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:.5rem .8rem;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2)}
.pay-badge.ideal{color:#cc0066}
.pay-badge svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ---- PDP reviews --------------------------------------------------------- */
.pdp-reviews{margin-top:var(--s4)}
.pdp-rev-item{padding:var(--s4) 0;border-top:1px solid var(--line)}
.pdp-rev-item .top{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem}

/* ---- Checkout ------------------------------------------------------------ */
.co-head{height:var(--header-h);display:flex;align-items:center;border-bottom:1px solid var(--line);background:var(--surface)}
.co-head .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.co-head .secure{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);color:var(--ink-2)}
.co-head .secure .ic,.co-head .secure svg{width:16px;height:16px;color:var(--ok)}
.checkout{display:grid;grid-template-columns:1.3fr .7fr;gap:var(--s7);align-items:start;padding-block:var(--s6)}
.co-form h2{font-size:var(--fs-lg);margin:var(--s5) 0 var(--s3);padding-top:var(--s4);border-top:1px solid var(--line)}
.co-form h2:first-of-type{border-top:0;padding-top:0;margin-top:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.grid3{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:var(--s3)}
.pay-method{display:flex;align-items:center;gap:.7rem;padding:var(--s4);border:1.5px solid var(--accent);border-radius:var(--r);background:var(--accent-50);cursor:pointer}
.pay-method input{accent-color:var(--accent);width:20px;height:20px}
.pay-method .ideal{margin-left:auto;font-family:var(--font-display);font-weight:700;color:#cc0066}
.order-summary{position:sticky;top:calc(var(--header-h) + 16px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.order-summary h3{font-size:var(--fs-lg);margin-bottom:var(--s4)}
.os-item{display:grid;grid-template-columns:48px 1fr auto;gap:.7rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:var(--fs-sm)}
.os-item img{width:48px;height:48px;object-fit:cover;background:var(--bg-2);border-radius:6px}
.os-item .q{color:var(--ink-3);font-size:var(--fs-xs)}
.os-totals{padding-top:var(--s4)}
.os-note{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);font-size:var(--fs-xs);color:var(--ink-2);margin:var(--s4) 0}
.err{border-color:var(--accent)!important}
.err-msg{color:var(--accent-600);font-size:var(--fs-xs);margin-top:.3rem;display:none}
.err-msg.show{display:block}
.trust-row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line)}
.trust-row div{display:flex;align-items:center;gap:.4rem;font-size:var(--fs-xs);color:var(--ink-2)}
.trust-row .ic{width:15px;height:15px;color:var(--ok)}
.thanks{max-width:640px;margin-inline:auto;text-align:center;padding-block:var(--s8)}
.thanks .check-circle{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:0 auto var(--s5);background:var(--ok-bg);border:2px solid var(--ok)}
.thanks .check-circle svg{width:42px;height:42px;color:var(--ok);stroke:currentColor;fill:none;stroke-width:2}
.thanks.pending .check-circle{background:var(--warn-bg);border-color:var(--warn)}
.thanks.pending .check-circle svg{color:var(--warn)}
.thanks h1{font-size:var(--fs-2xl);margin-bottom:var(--s3)}
.thanks .order-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);margin:var(--s5) 0;text-align:left}

/* ---- Reveal -------------------------------------------------------------- */
.has-js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.has-js .reveal.in-view{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.05s}.reveal[data-d="2"]{transition-delay:.1s}.reveal[data-d="3"]{transition-delay:.15s}
/* fp-pop: kern-content (product-/review-/categoriekaarten) — altijd zichtbaar, lichte fade-in
   bij render i.p.v. scroll-reveal die op opacity:0 blijft hangen tot je scrollt/vangnet */
.fp-pop{animation:fpPop .45s var(--ease) both}
@keyframes fpPop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:1040px){
  .main-nav .lbl-koopgids{display:none}
  .hero .wrap{grid-template-columns:1fr}
  .hero-visual{max-width:440px}
  .shop-layout{grid-template-columns:1fr}
  .filters{position:static;padding:0;border:0;background:none}
  .f-toggle{display:flex;align-items:center;gap:.5rem;width:100%;justify-content:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:.7rem .9rem;font-size:var(--fs-sm);font-weight:700;color:var(--ink);cursor:pointer}
  .f-toggle .ic{width:18px;height:18px;color:var(--accent-600)}
  .f-toggle .ic:last-child{margin-left:auto;transition:transform .2s}
  .filters.open .f-toggle .ic:last-child{transform:rotate(180deg)}
  /* alles behalve de toggle is standaard ingeklapt op mobiel; .open vouwt uit */
  .filters>:not(.f-toggle){display:none}
  .filters.open{padding:var(--s4);border:1px solid var(--line);background:var(--surface);margin-top:.6rem}
  .filters.open>:not(.f-toggle){display:block}
  .filters.open .filters-head{display:flex}
  .filters.open .check{display:flex}
  .filters.open .f-toggle{margin:-.2rem 0 .8rem;border:0;background:none;padding:.2rem 0;width:auto}
  .pdp{grid-template-columns:1fr}.pdp-gallery{position:static}
  .mega-grid{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .checkout{grid-template-columns:1fr}.order-summary{position:static;order:-1}
  .stats-band .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
  .main-nav,.nav-search{display:none}
  .menu-toggle{display:grid}
  .sticky-atc{display:block}
  .pd{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,1fr)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .has-js .reveal,.reveal{opacity:1!important;transform:none!important}
  .fp-pop{animation:none!important;opacity:1!important;transform:none!important}
}

/* ---- v4: fit-chip, demo-pill, infopagina's -------------------------------- */
.fit-chip{display:flex;align-items:center;gap:.45rem;background:var(--ok-bg);border:1px solid var(--ok);border-radius:var(--r);padding:.5rem .7rem;font-size:var(--fs-xs);color:var(--ink);margin-bottom:var(--s4)}
.fit-chip svg{width:15px;height:15px;color:var(--ok);stroke:currentColor;fill:none;stroke-width:2;flex:none}
.fit-chip b{font-weight:700}
.fit-chip button{margin-left:auto;color:var(--ink-2);font-size:var(--fs-xs);text-decoration:underline;padding:.1rem .25rem}
.fit-chip button:last-child{margin-left:0;text-decoration:none;font-size:1rem;line-height:1}
.fit-chip button:hover{color:var(--ink)}
.pdp .fit-banner .fit-chip{margin:.6rem 0 0;background:rgba(255,255,255,.7)}
.demo-pill{display:inline-flex;align-items:center;align-self:center;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn);border-radius:999px;padding:.18rem .55rem;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-left:.5rem;white-space:nowrap}
.stats-band .demo-pill{position:absolute;right:1rem;top:.6rem}
.stats-band .wrap{position:relative}
.info-page .section-head h1{font-size:var(--fs-2xl);font-family:var(--font-display)}
.info-body{max-width:76ch}
.info-body h2{font-size:var(--fs-xl);margin:var(--s6) 0 var(--s3)}
.info-body h3{font-size:var(--fs-lg);margin:var(--s5) 0 var(--s2);font-family:var(--font-display)}
.info-body p,.info-body li{color:var(--ink-2);font-size:var(--fs-base)}
.info-body ul{padding-left:1.2rem;margin:.4rem 0 var(--s4)}
.info-body li{margin-bottom:.35rem}
.info-body a{color:var(--accent-600);text-decoration:underline;text-underline-offset:2px}
.info-body a.btn{color:#fff;text-decoration:none}
.info-body .btn{margin:var(--s3) 0}
.info-body table.specs{width:100%;margin:var(--s4) 0}
.info-body .fit-banner{margin:var(--s5) 0}

/* ---- v4: model-links (merk/model-landingspagina's) ----------------------- */
.model-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem}
.model-links a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:.7rem .9rem;font-weight:700;font-size:var(--fs-sm);color:var(--ink);transition:border-color var(--speed),transform var(--speed),box-shadow var(--speed)}
.model-links a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.model-links a span{background:var(--accent-50);color:var(--accent-600);border-radius:999px;padding:.1rem .5rem;font-size:var(--fs-xs);font-weight:700;flex:none}

/* ============================================================
   Verfijnronde (2026-06-15): hero-garantiekaart, echte betaal-/
   verzendlogo's, toon-meer, productkaart-polish
   ============================================================ */

/* Hero — één elegante glas-garantiekaart i.p.v. losse productkaartjes */
.hero-visual{ display:flex; justify-content:flex-end; align-items:center; }
.hero-badge{
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);
  border-radius:20px; padding:22px 22px 18px; max-width:320px;
  box-shadow:0 24px 60px rgba(60,36,18,.32);
}
.hero-badge .hb-ic{
  display:inline-grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:var(--accent-50,#fff2eb); color:var(--accent,#ef5a1e); margin-bottom:12px;
}
.hero-badge .hb-ic .ic{ width:24px; height:24px; }
.hero-badge .hb-tx b{ display:block; font-family:var(--font-display); font-size:1.28rem; color:#221d18; margin-bottom:4px; }
.hero-badge .hb-tx p{ margin:0; color:#5e554c; font-size:.95rem; line-height:1.5; }
.hero-badge .hb-foot{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:14px; padding-top:14px; border-top:1px solid #efe7dd; }
.hero-badge .hb-foot span{ display:inline-flex; align-items:center; gap:6px; font-size:.84rem; font-weight:600; color:#3c342c; }
.hero-badge .hb-foot .ic{ width:16px; height:16px; color:var(--accent,#ef5a1e); }
@media (max-width:920px){ .hero-visual{ justify-content:flex-start; } .hero-badge{ max-width:none; width:100%; } }

/* Footer — echte betaal- & verzendlogo's */
.pay-row{ display:flex; flex-wrap:wrap; gap:22px 48px; align-items:center;
  padding:22px 0; margin-top:20px; border-top:1px solid rgba(255,255,255,.12); }
.pay-group{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pay-lbl{ font-size:.8rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:#9a9b98; }
.pay-logos{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pay-logos img{ height:30px; width:auto; border-radius:5px; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18); display:block; }
.foot-base .fb-mollie{ display:inline-flex; align-items:center; gap:6px; }
.foot-base .fb-mollie img{ height:18px; width:auto; vertical-align:middle; background:#fff; border-radius:4px; padding:3px 6px; }

/* Toon-meer-knop gecentreerd */
.grid-more{ text-align:center; margin-top:26px; }
.grid-more button[hidden]{ display:none; }

/* Productkaart-polish — schoner, warmer, betere hiërarchie */
.card{ border:1px solid var(--line,#ece5db); border-radius:16px; background:var(--surface,#fff);
  box-shadow:0 1px 2px rgba(60,36,18,.05); transition:transform .22s var(--ease,ease), box-shadow .22s var(--ease,ease), border-color .22s; }
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(60,36,18,.14); border-color:#e2d8ca; }
.card .cover{ display:block; background:linear-gradient(180deg,#fbf8f2,#f4eee4);
  border-radius:15px 15px 0 0; overflow:hidden; aspect-ratio:1/1; }
.card .cover img{ width:100%; height:100%; object-fit:contain; padding:14px; transition:transform .3s var(--ease,ease); }
.card:hover .cover img{ transform:scale(1.045); }
.card .body{ padding:14px 15px 15px; }
.card .body .eyebrow{ font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; color:#a08f7c; font-weight:700; margin-bottom:3px; }
.card .body h3{ font-size:1rem; line-height:1.3; margin:0 0 8px; font-family:var(--font-body); font-weight:600; }
.card .body h3 a{ color:#221d18; text-decoration:none; }
.card .body h3 a:hover{ color:var(--accent,#ef5a1e); }
.card .foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid #f1eadf; }
.card .price .now{ font-family:var(--font-display); font-size:1.2rem; font-weight:600; color:#221d18; }
.card .price del{ color:#a89a88; font-size:.82rem; margin-right:5px; }

/* Hero: wit blok weg -> full-bleed foto met tekst links (2026-06-15c) */
.hero .wrap{grid-template-columns:1fr !important;}
.hero__content{max-width:620px;}
.hero-assure{display:flex;flex-wrap:wrap;gap:10px 22px;margin:22px 0 0;padding:0;list-style:none;max-width:640px;}
.hero-assure li{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:.95rem;text-shadow:0 1px 10px rgba(10,20,10,.45);}
.hero-assure li .ic{width:18px;height:18px;color:#7ee0a8;flex:0 0 auto;}
.hero-visual,.hero-badge{display:none !important;}

/* Hero leesbaarheid: sterkere overlay links + lead witter (2026-06-15c) */
.hero__overlay{background:
  linear-gradient(90deg, rgba(18,11,6,.85) 0%, rgba(18,11,6,.6) 40%, rgba(18,11,6,.18) 72%, rgba(18,11,6,0) 100%),
  linear-gradient(0deg, rgba(18,11,6,.55) 0%, rgba(18,11,6,0) 42%) !important;}
.hero .lead{color:rgba(255,255,255,.94) !important;text-shadow:0 1px 12px rgba(10,8,4,.5);}
.hero .hero-proof{color:rgba(255,255,255,.9);}
.hero .hero-proof strong{color:#fff;}

/* overgebleven USP-rij in hero leesbaar (2026-06-15c) */
.hero-assure div{text-shadow:0 1px 10px rgba(10,8,4,.5);}

/* ============================================================
   PRODUCTFOTO-POLISH + DONKERE-KAART-HERSTEL (2026-06-16, Echo)
   ------------------------------------------------------------
   Doel: stoere DONKERE productkaart (asfalt+oranje) met daarin
   één bewuste, lichte "vitrine" voor de foto i.p.v. losse witte
   blokken. Een eerdere warm/licht-redesign liet de kaart-BODY
   licht-crème renderen (botste met het donkere thema); dit blok
   zet de kaart-body terug naar donker en maakt alleen de
   FOTO-ZONE een nette neutrale showcase-tegel.
   Staat als laatste in app.css zodat het de cascade wint zonder
   tokens te wijzigen.
   ============================================================ */

/* 1) Kaart-omhulsel terug naar donker (overschrijft de licht-crème
      uit de verfijnronde). Body/tekst donker = "stoer", foto licht. */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.card:hover{
  box-shadow:var(--shadow-md);
  border-color:var(--line-2);
}
.card .body{ padding:var(--s4); }
.card .body .eyebrow{
  font-size:var(--fs-xs); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); font-weight:600; margin-bottom:2px;
}
.card .body h3{ font-size:var(--fs-base); line-height:1.25; font-weight:700; }
.card .body h3 a{ color:var(--ink); }
.card .body h3 a:hover{ color:var(--accent-600); }
.card .foot{ border-top:1px solid var(--line); }
.card .price .now{ color:var(--ink); }
.card .price del{ color:var(--ink-3); }

/* 2) DE VITRINE — de foto-zone wordt één consistente, licht-neutrale
      tegel (geen fel wit). Witte studio-achtergronden smelten zo samen
      met de tegel i.p.v. als hard blok uit te steken. Inset + dunne
      rand + zachte binnenschaduw geven diepte; oranje hoeklicht houdt
      het merk-warm zonder fel te worden. */
.card .cover{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  /* zacht koel-neutraal verloop rond #EDEFF2 (niet fel wit) */
  background:
    radial-gradient(120% 90% at 50% 12%, #F4F6F8 0%, #EBEEF1 52%, #E3E7EB 100%);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -10px 22px rgba(15,18,22,.06);
}
/* dunne binnen-inkadering zodat de tegel als bewuste showcase oogt */
.card .cover::after{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(18,20,23,.06);
  border-radius:calc(var(--r-lg) - 6px) calc(var(--r-lg) - 6px) 6px 6px;
  pointer-events:none;
  z-index:1;
}
/* foto netjes binnen de tegel: contain + lucht eromheen, niet bijgesneden */
.card .cover img{
  width:100%; height:100%;
  object-fit:contain;
  padding:clamp(12px,7%,20px);
  /* milde harmonisatie zodat uiteenlopende foto's als één set lezen,
     zonder de neutrale tegel te verkleuren */
  filter:saturate(.98) contrast(1.02);
  transition:transform .45s var(--ease);
}
.card:hover .cover img{ transform:scale(1.045); }

/* 3) Categorie-tegels (homepage-band) krijgen dezelfde vitrine-taal
      zodat productkaart én categoriekaart consistent ogen. */
.cat-card .ph{
  aspect-ratio:16/10;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 12%, #F4F6F8 0%, #EBEEF1 55%, #E3E7EB 100%);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -10px 22px rgba(15,18,22,.06);
}
.cat-card .ph img{
  width:100%; height:100%;
  object-fit:contain;
  padding:clamp(10px,5%,18px);
  filter:saturate(.98) contrast(1.02);
  transition:transform .4s var(--ease);
}
.cat-card:hover .ph img{ transform:scale(1.05); }

/* 4) PDP-hoofdfoto in dezelfde vitrine-stijl (consistent met de kaarten). */
.pdp-main-img{
  background:
    radial-gradient(120% 90% at 50% 10%, #F4F6F8 0%, #EBEEF1 55%, #E3E7EB 100%);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -14px 30px rgba(15,18,22,.06);
}
.pdp-main-img img{
  object-fit:contain;
  padding:clamp(16px,5%,34px);
}

/* korting-/voorraad-chips blijven leesbaar bóven de lichte tegel */
.card .cover ~ .stock,.card .stock{ z-index:3; }
.card .badge{ z-index:3; }

/* LICHT-THEMA-OVERRIDE-ECHO-2026-06-18 */
/* ============================================================
   LICHT THEMA — autoritatieve override-laag (Echo 2026-06-18)
   Body is al licht via tokens. Hier: componenten die hardcoded
   donker waren of een donkere token gebruikten. Footer blijft
   bewust donker (var(--dark)) = operator-keuze.
   ============================================================ */
/* USP-balk: was var(--dark) -> nu lichtgrijs, leesbaar */
.usp-bar{background:var(--bg-2);color:var(--ink-2);border-bottom:1px solid var(--line)}
.usp-bar span{color:var(--ink-2)}
.usp-bar .ic,.usp-bar svg{color:var(--accent)}
/* Header: was donker glas -> wit glas */
.site-head{background:rgba(255,255,255,.85);border-bottom:1px solid var(--line)}
.site-head.is-scrolled{background:rgba(255,255,255,.96);box-shadow:0 6px 24px rgba(20,32,54,.10)}
/* Primaire knop-hover blijft levendig oranje (niet het donkere link-oranje) */
.btn--primary:hover{background:var(--accent-700)}
/* Stats-band: was donker (var(--ink)) -> lichte eyecatcher, oranje cijfers */
.stats-band{background:var(--bg-2);color:var(--ink);border-block:1px solid var(--line)}
.stats-band .stat b{color:var(--ink)}
.stats-band .stat span{color:var(--ink-3)}
.stats-band .stat:first-child b,.stats-band .accent b{color:var(--accent-600)}
/* Sticky add-to-cart (mobiel): was donker -> wit */
.sticky-atc{background:rgba(255,255,255,.97);border-top:1px solid var(--line)}
/* Korting-/voorraad-chips leesbaar op licht */
.card .badge{background:var(--ink);color:#fff}
.card .badge--new{background:var(--ok);color:#fff}
/* Merklogo-chip: op licht een nette neutrale tegel (logo's zijn wit-op-transp,
   krijgen lichte kadertegel met subtiele rand zodat ze niet wegvallen) */
.brand-logo{opacity:1;filter:none}
.brand-logo-chip{background:var(--bg-2);border:1px solid var(--line)}
.brandwrap.brandwrap--logos a:hover .brand-logo,.brand-logo-chip:hover .brand-logo{filter:grayscale(0) brightness(1);opacity:1}
.brand-hero .brand-logo{opacity:1;filter:none}

/* ---- LICHTE HERO (homepage + B2B): tekst links op licht, bewegende foto rechts ---- */
.hero--light{background:linear-gradient(180deg,#fff 0%,var(--bg-2) 100%) !important;min-height:auto !important;border-bottom:1px solid var(--line)}
.hero--light .wrap{position:relative;display:grid !important;grid-template-columns:1.06fr .94fr !important;gap:clamp(2rem,4vw,3.4rem);align-items:center;padding-block:clamp(2.4rem,5vw,4.2rem)}
.hero--light .hero__content{color:var(--ink) !important;max-width:none}
.hero--light .eyebrow{display:inline-flex;align-items:center;gap:.5em;background:var(--accent-50);color:var(--accent-600);border:1px solid var(--accent-100);padding:.42rem .9rem;border-radius:999px;font-weight:700;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}
.hero--light .hero__content h1{color:var(--ink) !important;text-shadow:none}
.hero--light .hero__content h1 .hl{color:var(--accent) !important;-webkit-text-fill-color:var(--accent)}
.hero--light .lead{color:var(--ink-2) !important;text-shadow:none}
.hero--light .hero-proof{color:var(--ink-2)}
.hero--light .hero-proof strong{color:var(--ink)}
.hero--light .hero-assure{display:flex !important;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:var(--s5);max-width:none}
.hero--light .hero-assure div,.hero--light .hero-assure li{color:var(--ink-2) !important;text-shadow:none !important;font-weight:600;display:flex;align-items:center;gap:.45rem}
.hero--light .hero-assure .ic{color:var(--ok)}
.hero--light .hero-visual{display:block !important;position:relative;aspect-ratio:4/3.3;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-md);background:var(--bg-2)}
.hero--light .hero__slides{position:absolute;inset:0;z-index:0}
.hero--light .hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1200ms ease}
.hero--light .hero__slide.is-active{opacity:1}
.hero--light .hero__slide img{width:100%;height:100%;object-fit:cover}
.hero--light .hero__overlay{display:none !important}
.hero--light .hero__controls{position:absolute;z-index:3;left:0;right:0;bottom:12px;display:flex;align-items:center;justify-content:center;gap:12px}
.hero--light .hero__dot{width:9px;height:9px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.4);cursor:pointer;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.hero--light .hero__dot.is-active{background:#fff}
.hero--light .hero__pause{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(20,23,28,.45);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px)}
@media (max-width:920px){.hero--light .wrap{grid-template-columns:1fr !important}.hero--light .hero-visual{max-width:560px;margin-inline:auto;width:100%}}

/* ---- Lichte B2B-hero (zakelijk.html): foto rechts, witte gradient links, donkere tekst ---- */
.b2b-hero{background:#fff !important}
.b2b-hero__overlay{background:linear-gradient(90deg,#fff 0%,#fff 34%,rgba(255,255,255,.82) 52%,rgba(255,255,255,.22) 76%,rgba(255,255,255,0) 100%) !important}
.b2b-hero h1{color:var(--ink) !important;text-shadow:none !important;max-width:16ch}
.b2b-hero h1 .hl{color:var(--accent) !important}
.b2b-hero p.lead{color:var(--ink-2) !important;text-shadow:none !important;max-width:46ch}
.b2b-hero__chips li{color:var(--ink-2) !important;text-shadow:none !important}
.b2b-hero__chips .ic{color:var(--ok)}
@media (max-width:780px){.b2b-hero__overlay{background:rgba(255,255,255,.88) !important}}


/* echte betaallogo-chips (zichtbaar op donkere footer) */
.pay-logos img{height:auto;max-height:18px;width:auto;max-width:54px;object-fit:contain;background:#fff;border-radius:5px;padding:4px 6px;box-shadow:0 1px 2px rgba(0,0,0,.18)}