@charset "UTF-8";
/* ==========================================================================
   Stapel op Fietsen — huisstijl
   Kleuren komen rechtstreeks uit het logo: turquoise #20BEB7, oranje #DE6C00,
   zwart. Licht, ruim, mobile-first.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --teal:#20BEB7;
  --teal-d:#0C7F7A;
  --teal-dd:#08615D;
  --teal-l:#E7FAF9;
  --teal-l2:#CFF3F1;

  --oranje:#DE6C00;
  --oranje-d:#B85800;
  --oranje-l:#FFF2E6;

  --ink:#0F1618;
  --ink-2:#2E3B40;
  --grijs:#65767D;
  --grijs-l:#94A5AC;
  --lijn:#E2EAEC;
  --lijn-2:#EFF4F5;
  --papier:#FFFFFF;
  --zacht:#F5F9FA;

  --rood:#C22B2B;
  --groen:#1E8A4B;

  --wrap:1300px;
  --gut:clamp(16px,4vw,34px);
  --r-s:10px;
  --r:16px;
  --r-l:22px;
  --r-xl:30px;

  --sch-1:0 1px 2px rgba(15,22,24,.05);
  --sch-2:0 4px 16px -4px rgba(15,22,24,.10);
  --sch-3:0 18px 44px -18px rgba(15,22,24,.22);
  --sch-4:0 30px 70px -28px rgba(15,22,24,.30);

  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --kop-tracking:-.022em;
  --vlot:.38s cubic-bezier(.22,.75,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
/* Geen scroll-behavior:smooth op de hele pagina. Beelden die tijdens het
   scrollen inladen onderbreken zo'n animatie steeds opnieuw, en dan lijkt het
   of de pagina vastloopt. Waar we het wél willen (pijlen van een rij) vragen
   we er in de JS zelf om. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--papier);
  font-size:16.5px;line-height:1.62;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,video{max-width:100%}
img{height:auto;display:block}
a{color:var(--teal-dd);text-decoration:none}
a:hover{color:var(--oranje-d)}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:var(--kop-tracking);line-height:1.1}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0}
li{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}
::selection{background:var(--teal-l2)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.overslaan{position:absolute;left:-9999px}
.overslaan:focus{left:12px;top:12px;z-index:999;background:#fff;padding:10px 16px;border-radius:8px;box-shadow:var(--sch-3)}
.klein{font-size:13.5px;color:var(--grijs);line-height:1.55}

/* ---------- 2. Bouwstenen ---------- */
.label{
  display:inline-block;margin:0 0 12px;font-size:12px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dd);
}
.label--oranje{color:var(--oranje-d)}
.label--licht{color:var(--teal)}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;
  padding:7px 15px 7px 12px;border:1px solid var(--lijn);border-radius:100px;
  background:#fff;font-size:13px;font-weight:600;color:var(--ink-2);box-shadow:var(--sch-1);
}
.eyebrow__stip{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--teal-l)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 20px;border:1.5px solid transparent;border-radius:100px;
  font-size:15px;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  background:var(--zacht);color:var(--ink);text-decoration:none;
  transition:transform var(--vlot),background var(--vlot),color var(--vlot),border-color var(--vlot),box-shadow var(--vlot);
}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn--vol{background:var(--oranje-d);color:#fff;box-shadow:var(--sch-2)}
.btn--vol:hover{background:#9C4A00;color:#fff;box-shadow:var(--sch-3)}
.btn--lijn{background:#fff;border-color:var(--lijn);color:var(--ink)}
.btn--lijn:hover{border-color:var(--teal-d);color:var(--teal-dd)}
.btn--wit{background:#fff;color:var(--ink)}
.btn--wit:hover{background:#fff;color:var(--oranje-d)}
.btn--geest{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn--geest:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}
.btn--groot{padding:15px 26px;font-size:16px}
.btn--klein{padding:9px 15px;font-size:13.5px}
.btn[disabled]{opacity:.45;pointer-events:none}

.rond{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border:0;border-radius:50%;background:var(--zacht);
  cursor:pointer;position:relative;transition:background var(--vlot),color var(--vlot),transform var(--vlot);
}
.rond svg{width:20px;height:20px}
.rond:hover{background:var(--teal-l);color:var(--teal-dd)}
.rond--lijn{background:#fff;border:1.5px solid var(--lijn)}
.rond--lijn:hover{border-color:var(--teal-d);background:#fff}

.chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:30px}
.chips--links{justify-content:flex-start;margin-top:18px;align-items:center}
.chips--midden{justify-content:center}
.chips__label{font-size:13px;color:var(--grijs);font-weight:600;margin-right:2px}
.chip{
  display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:100px;
  border:1px solid var(--lijn);background:#fff;font-size:14px;font-weight:600;color:var(--ink-2);
  transition:border-color var(--vlot),color var(--vlot),background var(--vlot);
}
.chip em{font-style:normal;font-size:12px;color:var(--grijs)}
.chip:hover{border-color:var(--teal);background:var(--teal-l);color:var(--teal-dd)}

.vlag{
  position:absolute;top:11px;left:11px;z-index:2;
  padding:5px 10px;border-radius:8px;background:var(--oranje-d);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.01em;
}
.vlag--groot{top:16px;left:16px;padding:8px 14px;font-size:15px;border-radius:10px}
.vlag--uit{top:auto;bottom:11px;left:11px;background:var(--ink);font-weight:700}

.prijs{margin:0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.prijs strong{font-size:19px;font-weight:800;letter-spacing:-.02em}
.prijs s{font-size:13.5px;color:var(--grijs-l)}

.stip{width:9px;height:9px;border-radius:50%;flex:none}
.stip--groen{background:var(--groen);box-shadow:0 0 0 4px rgba(30,138,75,.16)}
.stip--oranje{background:var(--oranje);box-shadow:0 0 0 4px rgba(222,108,0,.16)}

.winkelstatus{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--grijs);
  white-space:nowrap;
}
.winkelstatus i{width:8px;height:8px;border-radius:50%;background:var(--grijs-l);flex:none}
.winkelstatus.is-open{color:var(--groen)}
.winkelstatus.is-open i{background:var(--groen);box-shadow:0 0 0 3px rgba(30,138,75,.18)}

/* ---------- 3. Loader ---------- */
.loader{
  position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:20px;
  background:var(--papier);transition:opacity .5s ease,visibility .5s ease;
}
body.is-geladen .loader{opacity:0;visibility:hidden}
.loader__wiel{width:74px;height:74px;animation:draai 1.1s linear infinite}
.loader__wiel svg{width:100%;height:100%}
.loader__velg{fill:none;stroke:var(--teal);stroke-width:5}
.loader__spaken line{stroke:var(--lijn);stroke-width:2.4}
.loader__naaf{fill:var(--oranje)}
.loader__tekst{font-size:13px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs)}
@keyframes draai{to{transform:rotate(360deg)}}

/* ---------- 4. Ticker ---------- */
.ticker{background:var(--ink);color:#fff;overflow:hidden;font-size:12.5px;font-weight:600}
.ticker__spoor{display:flex;width:max-content;animation:schuif 34s linear infinite}
.ticker__rij{display:flex;align-items:center}
.ticker__rij li{display:flex;align-items:center;padding:9px 0;white-space:nowrap}
.ticker__rij li::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);margin:0 26px}
@keyframes schuif{to{transform:translateX(-50%)}}
.ticker:hover .ticker__spoor{animation-play-state:paused}

/* ---------- 5. Header ---------- */
.kop{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.5) blur(12px);border-bottom:1px solid var(--lijn);
  transition:box-shadow var(--vlot);
}
body.is-gescrold .kop{box-shadow:var(--sch-2)}
.kop__in{display:flex;align-items:center;gap:clamp(12px,2.4vw,34px);padding-block:12px}
.logo{flex:none;display:block}
.logo img{width:clamp(160px,17vw,214px);aspect-ratio:300/65}

.nav{flex:1;min-width:0}
.nav__lijst{display:none}
.nav__link{
  display:block;padding:11px 12px;font-size:14.5px;font-weight:700;color:var(--ink-2);
  letter-spacing:-.01em;border-radius:9px;transition:color var(--vlot),background var(--vlot);
}
.nav__link:hover{color:var(--teal-dd);background:var(--teal-l)}
.nav__link.is-hier{color:var(--oranje-d)}

.kop__acties{display:flex;align-items:center;gap:8px;margin-left:auto}
.kop__acties .winkelstatus{display:none}
.kop__acties .rond--tel{display:none}
.kar__bal{
  position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-content:center;border-radius:100px;background:var(--oranje-d);
  color:#fff;font-size:11px;font-weight:800;
}

.hamburger{
  width:44px;height:44px;border:0;background:var(--zacht);border-radius:12px;
  display:grid;place-content:center;gap:5px;cursor:pointer;padding:0;
}
.hamburger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--vlot),opacity var(--vlot)}

/* ---------- 6. Zoekpaneel ---------- */
.zoekpaneel{
  position:sticky;top:0;z-index:99;background:#fff;border-bottom:1px solid var(--lijn);
  box-shadow:var(--sch-3);animation:zakIn .3s ease;
}
@keyframes zakIn{from{opacity:0;transform:translateY(-10px)}}
.zoekpaneel__form{display:flex;align-items:center;gap:10px;padding-block:16px;position:relative}
.zoekpaneel__icoon{width:20px;height:20px;color:var(--grijs);flex:none}
.zoekpaneel__form input{
  flex:1;min-width:0;border:0;background:transparent;font-size:clamp(17px,2.6vw,22px);
  font-weight:600;padding:6px 0;letter-spacing:-.02em;
}
.zoekpaneel__form input:focus{outline:0}
.zoekpaneel__sluit{width:38px;height:38px;border:0;background:var(--zacht);border-radius:50%;font-size:22px;line-height:1;cursor:pointer;flex:none}
.zoekpaneel__tip{margin:0;padding-bottom:16px;font-size:13px;color:var(--grijs);display:flex;flex-wrap:wrap;gap:10px}
.zoekpaneel__tip a{font-weight:600}
.suggesties{padding-bottom:18px;display:grid;gap:16px}
.sug__groep h4{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--grijs-l);margin:0 0 8px}
.sug__rij{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;transition:background var(--vlot)}
.sug__rij:hover{background:var(--zacht)}
.sug__rij img{width:46px;height:46px;object-fit:contain;border-radius:8px;background:var(--zacht);flex:none;aspect-ratio:1}
.sug__rij b{display:block;font-size:14.5px;font-weight:700;color:var(--ink)}
.sug__rij small{display:block;font-size:12.5px;color:var(--grijs)}
.sug__prijs{margin-left:auto;font-weight:800;white-space:nowrap}
.sug__catlijst{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- 7. Mobiel menu ---------- */
.mob{
  position:fixed;inset:0;z-index:150;background:#fff;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .34s cubic-bezier(.3,.8,.3,1);
}
.mob.is-open{transform:none}
.mob__kop{display:flex;align-items:center;justify-content:space-between;padding:14px var(--gut);border-bottom:1px solid var(--lijn);flex:none}
.mob__kop img{width:170px;aspect-ratio:300/65}
.mob__sluit{width:42px;height:42px;border:0;background:var(--zacht);border-radius:50%;font-size:26px;line-height:1;cursor:pointer}
.mob__body{flex:1;overflow-y:auto;padding:18px var(--gut) 130px;-webkit-overflow-scrolling:touch}
.mob__zoek{display:flex;gap:8px;margin-bottom:20px}
.mob__zoek input{flex:1;min-width:0;border:1.5px solid var(--lijn);border-radius:100px;padding:13px 18px;font-size:15px;font-family:inherit}
.mob__zoek button{width:48px;border:0;border-radius:50%;background:var(--oranje-d);color:#fff;display:grid;place-content:center;cursor:pointer;flex:none}
.mob__zoek button svg{width:20px;height:20px}

.mob__item{border-bottom:1px solid var(--lijn-2)}
.mob__rij{
  width:100%;display:flex;align-items:center;gap:13px;padding:15px 2px;border:0;background:none;
  text-align:left;cursor:pointer;color:var(--ink);
}
.mob__ico{width:36px;height:36px;border-radius:10px;background:var(--teal-l);color:var(--teal-dd);display:grid;place-content:center;flex:none}
.mob__ico svg{width:20px;height:20px}
.mob__naam{font-size:16px;font-weight:700;flex:1}
.mob__telling{font-size:12.5px;color:var(--grijs-l);font-weight:700}
.mob__pijl{width:20px;height:20px;color:var(--grijs);transition:transform var(--vlot)}
.mob__rij[aria-expanded=true] .mob__pijl{transform:rotate(180deg)}
.mob__uit{display:none;padding:0 0 14px 49px}
.mob__uit.is-open{display:block}
.mob__uit a{display:flex;justify-content:space-between;gap:10px;padding:9px 0;font-size:14.5px;color:var(--grijs);border-bottom:1px solid var(--lijn-2)}
.mob__uit a:last-child{border-bottom:0}
.mob__uit a em{font-style:normal;font-size:12px;color:var(--grijs-l)}
.mob__alles{font-weight:800;color:var(--teal-dd)!important}
.mob__extra{display:grid;gap:2px;margin-top:22px;padding-top:18px;border-top:1px solid var(--lijn)}
.mob__extra a{padding:10px 2px;font-size:15px;font-weight:600;color:var(--ink-2)}
.mob__contact{margin-top:22px;padding:20px;background:var(--zacht);border-radius:var(--r)}
.mob__contact .btn{width:100%}
.mob__contact p{margin:12px 0 0;font-size:13.5px;color:var(--grijs);text-align:center}

/* ---------- 8. Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--papier)}
.hero__vlak{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 62% at 88% 8%,var(--teal-l) 0%,transparent 62%),
    radial-gradient(46% 50% at 4% 92%,var(--oranje-l) 0%,transparent 60%);
}
.hero__in{position:relative;padding-block:clamp(34px,5.5vw,72px) clamp(46px,6vw,88px);display:grid;gap:clamp(34px,5vw,58px)}
.hero__titel{font-size:clamp(33px,7.4vw,62px);line-height:1.04;letter-spacing:-.032em;margin-bottom:20px}
.hero__titel .w{display:inline-block;overflow:hidden;vertical-align:top}
.hero__titel .w>span{display:inline-block;transform:translateY(105%);animation:woordOp .7s cubic-bezier(.22,.8,.25,1) forwards;animation-delay:var(--d,0ms)}
@keyframes woordOp{to{transform:none}}
.hero__lead{font-size:clamp(16px,2.1vw,19px);color:var(--ink-2);max-width:56ch;line-height:1.6}
.hero__lead strong{color:var(--ink)}
.hero__acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__trust{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:28px;padding-top:22px;border-top:1px solid var(--lijn)}
.hero__trust li{font-size:13.5px;color:var(--grijs)}
.hero__trust strong{color:var(--ink)}

.hero__beeld{position:relative;will-change:transform}
.hero__foto{margin:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sch-4)}
.hero__foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero__foto--klein{
  position:absolute;right:-4px;bottom:-26px;width:52%;border-radius:var(--r-l);
  border:5px solid #fff;box-shadow:var(--sch-3);
}
.hero__foto--klein img{aspect-ratio:16/7}
.hero__kaartje{
  position:absolute;background:#fff;border-radius:var(--r);padding:13px 16px;
  box-shadow:var(--sch-3);display:flex;align-items:center;gap:11px;
}
.hero__kaartje strong{display:block;font-size:14px;line-height:1.25}
.hero__kaartje em{display:block;font-style:normal;font-size:12px;color:var(--grijs);line-height:1.35;margin-top:2px}
.hero__kaartje--status{left:-10px;top:22px;animation:zweef 5s ease-in-out infinite}
.hero__kaartje--speed{
  left:-14px;bottom:44px;flex-direction:column;align-items:flex-start;gap:2px;
  animation:zweef 6.4s ease-in-out infinite reverse;
}
.hero__kaartje--speed strong{font-size:17px;line-height:1.2;letter-spacing:-.02em;color:var(--oranje-d)}
@keyframes zweef{50%{transform:translateY(-9px)}}

/* ---------- 9. USP ---------- */
.usp{border-block:1px solid var(--lijn);background:var(--zacht)}
.usp__in{display:grid;gap:24px;padding-block:clamp(26px,3.4vw,40px)}
.usp__item{display:flex;gap:14px}
.usp__ico{
  width:44px;height:44px;flex:none;border-radius:13px;background:#fff;
  display:grid;place-content:center;color:var(--teal-dd);box-shadow:var(--sch-1);
}
.usp__ico svg{width:23px;height:23px}
.usp__item h3{font-size:15px;margin-bottom:4px}
.usp__item p{margin:0;font-size:13.6px;color:var(--grijs);line-height:1.5}

/* ---------- 10. Secties ---------- */
.sectie{padding-block:clamp(52px,7vw,96px)}
.sectie--zacht{background:var(--zacht)}
.sectiekop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(28px,3.6vw,44px)}
.sectiekop h2{font-size:clamp(25px,3.9vw,40px);letter-spacing:-.03em}
.sectiekop__lead{margin:0;max-width:44ch;font-size:15.5px;color:var(--grijs)}
.rail__pijlen{display:flex;gap:8px}

/* ---------- 11. Categorieraster ---------- */
.catgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.catkaart{
  position:relative;display:flex;flex-direction:column;gap:5px;padding:20px 18px 54px;
  border:1px solid var(--lijn);border-radius:var(--r-l);background:#fff;color:var(--ink);
  overflow:hidden;transition:border-color var(--vlot),transform var(--vlot),box-shadow var(--vlot);
}
.catkaart::after{
  content:"";position:absolute;inset:auto -30% -60% auto;width:150px;height:150px;border-radius:50%;
  background:var(--teal-l);opacity:0;transition:opacity var(--vlot),transform var(--vlot);
}
.catkaart:hover{border-color:var(--teal);transform:translateY(-4px);box-shadow:var(--sch-3);color:var(--ink)}
.catkaart:hover::after{opacity:1;transform:scale(1.15)}
.catkaart__ico{
  position:relative;z-index:1;width:46px;height:46px;border-radius:13px;margin-bottom:8px;
  background:var(--teal-l);color:var(--teal-dd);display:grid;place-content:center;
  transition:background var(--vlot),color var(--vlot);
}
.catkaart:hover .catkaart__ico{background:var(--oranje-d);color:#fff}
.catkaart__ico svg{width:25px;height:25px}
.catkaart__naam{position:relative;z-index:1;font-size:17px;font-weight:800;letter-spacing:-.02em}
.catkaart__aantal{position:relative;z-index:1;font-size:12.5px;color:var(--grijs);font-weight:600}
.catkaart__sub{position:relative;z-index:1;font-size:12.5px;color:var(--grijs-l);line-height:1.45;margin-top:4px}
.catkaart__pijl{
  position:absolute;z-index:1;left:18px;bottom:18px;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--lijn);display:grid;place-content:center;color:var(--ink);
  transition:background var(--vlot),border-color var(--vlot),color var(--vlot),transform var(--vlot);
}
.catkaart__pijl svg{width:17px;height:17px}
.catkaart:hover .catkaart__pijl{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateX(4px)}
.catkaart--groot .catkaart__naam{font-size:19px}

/* ---------- 12. Productkaart ---------- */
.grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.grid--marge{margin-top:20px}

.kaart{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;
  transition:border-color var(--vlot),box-shadow var(--vlot),transform var(--vlot);
}
.kaart:hover{border-color:var(--teal-l2);box-shadow:var(--sch-3);transform:translateY(-3px)}
.kaart__beeld{position:relative;display:block;background:#fff;padding:14px;aspect-ratio:1}
.kaart__beeld img{width:100%;height:100%;object-fit:contain;transition:opacity var(--vlot),transform var(--vlot)}
.kaart__beeld2{position:absolute;inset:14px;opacity:0}
.kaart:hover .kaart__beeld2{opacity:1}
.kaart:hover .kaart__beeld img:first-of-type{transform:scale(1.03)}
.kaart__body{padding:0 14px 14px;display:flex;flex-direction:column;flex:1;gap:5px}
.kaart__merk{margin:0;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dd)}
.kaart__titel{font-size:14.3px;font-weight:700;line-height:1.35;letter-spacing:-.012em;margin:0}
.kaart__titel a{color:var(--ink);display:block;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kaart__titel a:hover{color:var(--oranje-d)}
.kaart__voet{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.kaart__knop{
  width:38px;height:38px;flex:none;border:1.5px solid var(--lijn);border-radius:50%;background:#fff;
  display:grid;place-content:center;cursor:pointer;color:var(--ink);
  transition:background var(--vlot),border-color var(--vlot),color var(--vlot),transform var(--vlot);
}
.kaart__knop svg{width:18px;height:18px}
.kaart__knop:hover{background:var(--oranje-d);border-color:var(--oranje-d);color:#fff;transform:scale(1.08)}
.kaart__knop.is-toegevoegd{background:var(--groen);border-color:var(--groen);color:#fff}

/* Rail */
.rail{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  padding-bottom:8px;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);
  scrollbar-width:none;cursor:grab;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-slepen{cursor:grabbing;scroll-snap-type:none}
.kaart--rail{flex:0 0 clamp(158px,46vw,236px);scroll-snap-align:start}
.rail img{pointer-events:none;-webkit-user-drag:none;user-select:none}
.rail__hint{margin:12px 0 0;font-size:12.5px;color:var(--grijs-l);text-align:center}

/* ---------- 13. Tabs ---------- */
.tabs__strip{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:26px;
  scrollbar-width:none;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);
}
.tabs__strip::-webkit-scrollbar{display:none}
.tabs__knop{
  display:inline-flex;align-items:center;gap:7px;padding:10px 17px;border-radius:100px;
  border:1.5px solid var(--lijn);background:#fff;font-size:14.5px;font-weight:700;cursor:pointer;
  white-space:nowrap;transition:all var(--vlot);
}
.tabs__knop em{font-style:normal;font-size:11.5px;color:var(--grijs-l);font-weight:700}
.tabs__knop:hover{border-color:var(--teal)}
.tabs__knop.is-actief{background:var(--ink);border-color:var(--ink);color:#fff}
.tabs__knop.is-actief em{color:var(--teal)}
.tabs__paneel{display:none}
.tabs__paneel.is-actief{display:block;animation:fadeOp .35s ease}
.tabs__paneel>.btn{margin-top:24px}
@keyframes fadeOp{from{opacity:0;transform:translateY(8px)}}

/* ---------- 14. Werkplaats ---------- */
.werk{background:var(--ink);color:#fff;overflow:hidden}
.werk__in{display:grid;gap:34px;padding-block:clamp(52px,7vw,96px)}
.werk__beeld{position:relative;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(160deg,var(--teal-dd),#062f2d)}
.werk__beeld img{width:100%;aspect-ratio:4/5;object-fit:contain;object-position:bottom}
.werk__stempel{
  position:absolute;top:18px;left:18px;width:82px;height:82px;border-radius:50%;
  background:var(--oranje-d);color:#fff;display:grid;place-content:center;text-align:center;line-height:1;
}
.werk__stempel span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.werk__stempel strong{font-size:22px;letter-spacing:-.02em;display:block;margin-top:3px}
.werk__tekst h2{font-size:clamp(25px,3.9vw,40px);letter-spacing:-.03em;margin-bottom:16px;color:#fff}
.werk__lead{font-size:16.5px;color:rgba(255,255,255,.76);max-width:52ch}
.werk__punten{margin:26px 0;display:grid;gap:11px}
.werk__punten li{position:relative;padding-left:28px;font-size:14.8px;color:rgba(255,255,255,.72);line-height:1.55}
.werk__punten strong{color:#fff;font-weight:700}
.werk__punten li::before{
  content:"";position:absolute;left:0;top:8px;width:15px;height:15px;border-radius:50%;
  background:var(--teal);box-shadow:inset 0 0 0 3px rgba(15,22,24,1);
}
.werk__prijzen{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-l);padding:22px}
.werk__prijzen h3{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.werk__prijzen dl{margin:0;display:grid;gap:1px}
.werk__prijzen dl>div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.werk__prijzen dt{font-size:14.3px;color:rgba(255,255,255,.78)}
.werk__prijzen dd{margin:0;font-size:14.8px;font-weight:800;white-space:nowrap}
.werk__prijzen .klein{color:rgba(255,255,255,.5);margin-top:12px}
.werk__acties{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px}
.werk__waarschuwing{
  margin-top:18px;padding:12px 15px;border-left:3px solid var(--oranje);
  background:rgba(222,108,0,.1);border-radius:0 10px 10px 0;font-size:13.4px;color:rgba(255,255,255,.72);
}

/* ---------- 15. ART blok ---------- */
.artblok{
  display:grid;gap:30px;padding:clamp(26px,3.6vw,44px);border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--teal-l) 0%,#fff 62%);border:1px solid var(--teal-l2);
}
.artblok h2{font-size:clamp(23px,3.3vw,34px);letter-spacing:-.03em;margin-bottom:14px}
.artblok__tekst p{color:var(--ink-2);max-width:46ch;margin-bottom:22px}
.artblok__niveaus{display:grid;gap:9px}
.artniveau{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 14px;
  padding:14px 18px;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);
  color:var(--ink);transition:all var(--vlot);
}
.artniveau:hover{border-color:var(--oranje);transform:translateX(4px);color:var(--ink)}
.artniveau__sterren{grid-row:span 2;font-size:13px;color:var(--oranje);letter-spacing:1px;width:70px}
.artniveau strong{font-size:15.5px}
.artniveau em{grid-column:2;font-style:normal;font-size:12.8px;color:var(--grijs)}
.artniveau__aantal{grid-row:span 2;font-size:12.5px;font-weight:700;color:var(--grijs-l)}

/* ---------- 16. Winkelblok ---------- */
.winkelblok{display:grid;gap:32px}
.winkelblok h2{font-size:clamp(25px,3.7vw,38px);letter-spacing:-.03em;margin-bottom:16px}
.winkelblok__lead{font-size:16.5px;color:var(--ink-2);max-width:50ch}
.winkelblok__voorraad{margin:24px 0}
.winkelblok__voorraad h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--grijs);margin-bottom:12px}
.winkelblok__voorraad ul{display:grid;gap:8px}
.winkelblok__voorraad li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-2)}
.winkelblok__voorraad li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:9px;
  border-left:2.4px solid var(--teal-d);border-bottom:2.4px solid var(--teal-d);
  transform:rotate(-45deg);border-radius:1px;
}
.winkelblok__acties{display:flex;flex-wrap:wrap;gap:11px;margin-bottom:16px}

.tijdenkaart{background:#fff;border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sch-2)}
.tijdenkaart>header{padding:20px 22px 16px;border-bottom:1px solid var(--lijn-2);display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.tijdenkaart>header h2,.tijdenkaart>header h3{font-size:17px;margin:0}
.tijdenkaart table{font-size:14.8px}
.tijdenkaart tr{border-bottom:1px solid var(--lijn-2)}
.tijdenkaart th{text-align:left;font-weight:600;color:var(--ink-2);padding:11px 22px}
.tijdenkaart td{text-align:right;padding:11px 22px;font-variant-numeric:tabular-nums;font-weight:600}
.tijdenkaart tr.dicht th,.tijdenkaart tr.dicht td{color:var(--grijs-l);font-weight:500}
.tijdenkaart tr.is-vandaag{background:var(--teal-l)}
.tijdenkaart tr.is-vandaag th{font-weight:800;color:var(--teal-dd)}
.tijdenkaart tr.is-vandaag td{color:var(--teal-dd)}
.tijdenkaart>footer{padding:16px 22px 20px;background:var(--zacht)}
.tijdenkaart>footer p{margin:0 0 6px;font-size:13.6px;color:var(--grijs)}
.tijdenkaart>footer p:last-child{margin:0}
.tijdenkaart--breed{margin-bottom:32px}

/* ---------- 17. Verhaal ---------- */
.verhaal{display:grid;gap:32px}
.verhaal__citaat blockquote{
  margin:0;padding:clamp(26px,3.6vw,42px);border-radius:var(--r-xl);
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
}
.verhaal__citaat blockquote::before{
  content:"”";position:absolute;top:-30px;right:14px;font-size:190px;line-height:1;
  color:var(--teal);opacity:.22;font-family:Georgia,serif;
}
.verhaal__citaat p{font-size:clamp(19px,2.7vw,26px);font-weight:700;letter-spacing:-.025em;line-height:1.34;position:relative}
.verhaal__citaat footer{margin-top:20px;font-size:13.5px;color:var(--teal);font-weight:700;letter-spacing:.04em}
.verhaal__tekst h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.03em;margin-bottom:16px}
.verhaal__tekst p{color:var(--ink-2)}
.verhaal__cijfers{display:flex;flex-wrap:wrap;gap:14px 32px;margin:26px 0 24px;padding-top:22px;border-top:1px solid var(--lijn)}
.verhaal__cijfers strong{display:block;font-size:clamp(24px,3.4vw,32px);letter-spacing:-.03em;color:var(--teal-dd)}
.verhaal__cijfers em{font-style:normal;font-size:13px;color:var(--grijs)}

/* ---------- 18. Merken ---------- */
.merken{padding-block:34px;border-block:1px solid var(--lijn);overflow:hidden}
.merken__label{text-align:center;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs-l);margin:0 0 20px;font-weight:700}
.merken__spoor{display:flex;width:max-content;animation:schuif 46s linear infinite}
.merken__rij{display:flex;align-items:center}
.merken__rij li{padding-inline:22px}
.merken__rij a{font-size:clamp(17px,2.3vw,23px);font-weight:800;letter-spacing:-.03em;color:var(--grijs-l);white-space:nowrap;transition:color var(--vlot)}
.merken__rij a:hover{color:var(--ink)}
.merken:hover .merken__spoor{animation-play-state:paused}

/* ---------- 19. Advies ---------- */
.advies{
  display:grid;gap:30px;padding:clamp(26px,3.6vw,46px);border-radius:var(--r-xl);
  background:var(--oranje-l);border:1px solid #F6DCC2;
}
.advies h2{font-size:clamp(23px,3.3vw,34px);letter-spacing:-.03em;margin-bottom:14px}
.advies__tekst p{color:var(--ink-2);max-width:46ch;margin-bottom:22px}
.advies__lijst{display:grid;gap:9px;align-content:start}
.advies__lijst li{display:flex;gap:13px;align-items:center;padding:14px 18px;background:#fff;border-radius:var(--r);font-size:14.8px;font-weight:600;color:var(--ink-2)}
.advies__lijst span{
  width:27px;height:27px;flex:none;border-radius:50%;background:var(--oranje-d);color:#fff;
  display:grid;place-content:center;font-size:13px;font-weight:800;
}

/* ---------- 20. Paginakop ---------- */
.paginakop{background:var(--zacht);border-bottom:1px solid var(--lijn);padding-block:20px 26px}
.paginakop--dun{padding-block:14px;background:#fff}
.kruimels{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13px;color:var(--grijs)}
.kruimels a{color:var(--grijs)}
.kruimels a:hover{color:var(--oranje-d)}
.kruimels strong{color:var(--ink);font-weight:700}
.kruimels span{color:var(--grijs-l)}
.paginakop__in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px;margin-top:14px}
.paginakop h1{font-size:clamp(26px,4.4vw,42px);letter-spacing:-.032em}
.paginakop__lead{margin:10px 0 0;color:var(--grijs);max-width:60ch;font-size:15.2px}
.paginakop__telling{margin:0;font-size:13.5px;color:var(--grijs)}
.paginakop__telling strong{color:var(--ink);font-size:16px}

.infokop{margin-top:16px;max-width:60ch}
.infokop h1{font-size:clamp(27px,4.6vw,44px);letter-spacing:-.032em;margin-bottom:12px}
.infokop__lead{margin:0;font-size:clamp(15.5px,2vw,18px);color:var(--grijs);line-height:1.6}

.subcats{display:flex;gap:9px;overflow-x:auto;margin-top:22px;padding-bottom:6px;scrollbar-width:none}
.subcats::-webkit-scrollbar{display:none}
.subcat{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:104px;
  padding:12px 8px;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);
  text-align:center;color:var(--ink);transition:all var(--vlot);
}
.subcat:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:var(--sch-2);color:var(--ink)}
.subcat img{width:52px;height:52px;object-fit:contain;aspect-ratio:1}
.subcat__ico{width:52px;height:52px;display:grid;place-content:center;color:var(--teal-dd)}
.subcat__ico svg{width:26px;height:26px}
.subcat__naam{font-size:12.4px;font-weight:700;line-height:1.28;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.subcat__aantal{font-size:11px;color:var(--grijs-l);font-weight:700}

/* ---------- 21. Winkelrooster + filters ---------- */
.winkelrooster{display:grid;gap:26px;padding-block:26px 60px}
.filters{
  position:fixed;inset:0 0 0 auto;z-index:160;width:min(360px,90vw);background:#fff;
  transform:translateX(101%);transition:transform .34s cubic-bezier(.3,.8,.3,1);
  display:flex;flex-direction:column;box-shadow:var(--sch-4);
}
.filters.is-open{transform:none}
.filters__sluier{position:fixed;inset:0;z-index:155;background:rgba(15,22,24,.42);animation:fadeOp .3s ease}
.filters__kop{display:flex;align-items:center;justify-content:space-between;padding:16px var(--gut);border-bottom:1px solid var(--lijn);flex:none}
.filters__kop h2{font-size:18px}
.filters__sluit{width:40px;height:40px;border:0;background:var(--zacht);border-radius:50%;font-size:24px;line-height:1;cursor:pointer}
.filters__form{flex:1;overflow-y:auto;padding:6px var(--gut) 20px}
.filterblok{border:0;padding:20px 0;margin:0;border-bottom:1px solid var(--lijn-2)}
.filterblok legend{
  padding:0;font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--grijs);margin-bottom:13px;display:flex;gap:7px;align-items:center;
}
.filterblok legend em{font-style:normal;font-size:11px;color:var(--grijs-l);letter-spacing:0}
.filterblok__hint{margin:10px 0 0;font-size:12.4px;color:var(--grijs-l)}
.filterblok--scroll .merklijst{max-height:290px;overflow-y:auto;padding-right:4px}
.schakel{display:flex;align-items:center;gap:11px;padding:7px 0;cursor:pointer;font-size:14.5px}
.schakel input{
  appearance:none;width:20px;height:20px;flex:none;border:1.6px solid var(--lijn);border-radius:6px;
  background:#fff;cursor:pointer;position:relative;transition:all var(--vlot);
}
.schakel input:checked{background:var(--teal-d);border-color:var(--teal-d)}
.schakel input:checked::after{
  content:"";position:absolute;left:6px;top:3px;width:6px;height:10px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(40deg);
}
.schakel span{display:flex;justify-content:space-between;gap:10px;flex:1;color:var(--ink-2)}
.schakel span em{font-style:normal;font-size:12px;color:var(--grijs-l)}
.prijsveld{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.prijsveld label{min-width:0;display:grid;gap:5px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--grijs-l)}
.prijsveld input{
  width:100%;min-width:0;border:1.5px solid var(--lijn);border-radius:10px;padding:9px 11px;
  font-size:14.5px;font-family:inherit;
}
.prijsveld input:focus{outline:0;border-color:var(--teal-d);box-shadow:0 0 0 3px var(--teal-l)}
.filters__voet{padding-top:20px;display:grid;gap:12px;justify-items:center}
.filters__voet .btn{width:100%}
.filters__wis{font-size:13.5px;color:var(--grijs);text-decoration:underline}

.zijcats{display:none;padding-bottom:20px;margin-bottom:4px;border-bottom:1px solid var(--lijn-2)}
.zijcats h3{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--grijs);margin-bottom:11px}
.zijcats li{margin-bottom:1px}
.zijcats a{
  display:flex;justify-content:space-between;gap:10px;padding:7px 11px;border-radius:9px;
  font-size:14px;font-weight:600;color:var(--ink-2);transition:background var(--vlot),color var(--vlot);
}
.zijcats a em{font-style:normal;font-size:11.5px;color:var(--grijs-l);font-weight:700}
.zijcats a:hover{background:var(--teal-l);color:var(--teal-dd)}

.balk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.balk--los{margin-block:24px 6px}
.balk__telling{margin:0;font-size:13.5px;color:var(--grijs)}
.balk__sorteer{display:flex;align-items:center;gap:9px;margin-left:auto}
.balk__sorteer label{font-size:13px;color:var(--grijs);font-weight:600}
.balk__sorteer select{
  border:1.5px solid var(--lijn);border-radius:100px;padding:9px 14px;font-size:13.8px;
  font-family:inherit;font-weight:600;background:#fff;cursor:pointer;max-width:200px;
}

.actief{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.actief__pil{
  display:inline-flex;gap:7px;align-items:center;padding:6px 12px;border-radius:100px;
  background:var(--teal-l);color:var(--teal-dd);font-size:13px;font-weight:700;
}
.actief__pil span{font-size:15px;line-height:1}
.actief__pil:hover{background:var(--teal-l2);color:var(--teal-dd)}
.actief__wis{font-size:13px;color:var(--grijs);text-decoration:underline;margin-left:4px}

.leeg{text-align:center;padding-block:56px;border:1px dashed var(--lijn);border-radius:var(--r-l);background:var(--zacht)}
.leeg h1,.leeg h2{font-size:clamp(21px,3vw,30px);margin-bottom:12px;letter-spacing:-.03em}
.leeg p{color:var(--grijs);max-width:52ch;margin-inline:auto}
.leeg--pagina{margin-block:52px;border:0;background:transparent}
.leeg__acties{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin-top:24px}

.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:7px;margin-top:40px}
.pager a,.pager strong,.pager span{
  min-width:42px;height:42px;padding:0 12px;display:grid;place-content:center;border-radius:12px;
  font-size:14.5px;font-weight:700;
}
.pager a{background:#fff;border:1px solid var(--lijn);color:var(--ink)}
.pager a:hover{border-color:var(--teal);color:var(--teal-dd)}
.pager strong{background:var(--ink);color:#fff}
.pager span{color:var(--grijs-l)}
.pager__pijl{white-space:nowrap}
.pager__info{text-align:center;margin:14px 0 0;font-size:13px;color:var(--grijs)}

.cathulp{display:grid;gap:14px;margin-top:52px}
.cathulp>div{padding:24px;background:var(--zacht);border-radius:var(--r-l);border:1px solid var(--lijn)}
.cathulp h3{font-size:16.5px;margin-bottom:8px}
.cathulp p{font-size:14.3px;color:var(--grijs);margin-bottom:16px}

/* ---------- 22. Productdetail ---------- */
.product{display:grid;gap:32px;padding-block:26px 60px}
.galerij{display:grid;gap:12px}
.galerij__hoofd{position:relative;border:1px solid var(--lijn);border-radius:var(--r-l);overflow:hidden;background:#fff}
.galerij__spoor{display:flex;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none}
.galerij__spoor::-webkit-scrollbar{display:none}
.galerij__dia{flex:0 0 100%;margin:0;scroll-snap-align:center;padding:clamp(18px,4vw,44px)}
.galerij__dia img{width:100%;aspect-ratio:1;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.galerij__pijl{
  position:absolute;top:50%;translate:0 -50%;width:42px;height:42px;border:0;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:var(--sch-2);display:grid;place-content:center;cursor:pointer;
  transition:background var(--vlot),transform var(--vlot);
}
.galerij__pijl svg{width:21px;height:21px}
.galerij__pijl:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.galerij__pijl--vorige{left:12px}
.galerij__pijl--volgende{right:12px}
.galerij__stippen{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:7px}
.galerij__stippen button{
  width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--lijn);cursor:pointer;
  transition:all var(--vlot);
}
.galerij__stippen button.is-actief{background:var(--oranje-d);width:22px;border-radius:100px}
.galerij__duimen{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.galerij__duimen::-webkit-scrollbar{display:none}
.galerij__duimen button{
  flex:0 0 74px;padding:6px;border:1.5px solid var(--lijn);border-radius:12px;background:#fff;cursor:pointer;
  transition:border-color var(--vlot);
}
.galerij__duimen button.is-actief{border-color:var(--oranje-d)}
.galerij__duimen img{width:100%;aspect-ratio:1;object-fit:contain}

.koop__merk{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.koop__titel{font-size:clamp(23px,3.5vw,34px);letter-spacing:-.03em;line-height:1.14;margin-bottom:12px}
.koop__meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 22px;font-size:13px;color:var(--grijs)}
.koop__prijs{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px}
.koop__prijs strong{font-size:clamp(30px,4.4vw,42px);letter-spacing:-.035em;line-height:1}
.koop__prijs s{font-size:19px;color:var(--grijs-l)}
.koop__bespaar{
  padding:5px 11px;border-radius:8px;background:var(--oranje-l);color:var(--oranje-d);
  font-size:13px;font-weight:800;
}
.koop__btw{margin:8px 0 20px;font-size:13.3px;color:var(--grijs)}
.voorraad{display:flex;align-items:center;gap:9px;margin:0 0 22px;font-size:14.5px;font-weight:700}
.voorraad span{width:10px;height:10px;border-radius:50%;flex:none}
.voorraad--ja{color:var(--groen)}
.voorraad--ja span{background:var(--groen);box-shadow:0 0 0 4px rgba(30,138,75,.15)}
.voorraad--nee{color:var(--rood)}
.voorraad--nee span{background:var(--rood);box-shadow:0 0 0 4px rgba(194,43,43,.13)}

.koop__actie{display:flex;flex-wrap:wrap;gap:11px;align-items:stretch}
.aantal{display:flex;align-items:center;border:1.5px solid var(--lijn);border-radius:100px;overflow:hidden;background:#fff;flex:none}
.aantal button{width:42px;height:50px;border:0;background:none;font-size:19px;cursor:pointer;color:var(--ink-2)}
.aantal button:hover{background:var(--zacht)}
.aantal input{
  width:44px;border:0;text-align:center;font-size:16px;font-weight:700;font-family:inherit;
  appearance:textfield;-moz-appearance:textfield;
}
.aantal input::-webkit-outer-spin-button,.aantal input::-webkit-inner-spin-button{appearance:none;margin:0}
.koop__knop{flex:1;min-width:200px}
.koop__usp{margin:24px 0;display:grid;gap:9px}
.koop__usp li{position:relative;padding-left:26px;font-size:14.2px;color:var(--ink-2)}
.koop__usp li::before{
  content:"";position:absolute;left:0;top:6px;width:14px;height:9px;
  border-left:2.4px solid var(--teal-d);border-bottom:2.4px solid var(--teal-d);
  transform:rotate(-45deg);border-radius:1px;
}
.specs{font-size:14.3px;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.specs caption{
  text-align:left;padding:13px 16px;background:var(--zacht);font-size:12px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grijs);border-bottom:1px solid var(--lijn);
}
.specs tr{border-bottom:1px solid var(--lijn-2)}
.specs tr:last-child{border-bottom:0}
.specs th{text-align:left;padding:11px 16px;font-weight:600;color:var(--grijs);width:40%}
.specs td{padding:11px 16px;font-weight:600}

.beschrijving{grid-column:1/-1;display:grid;gap:0 clamp(30px,4vw,56px)}
.beschrijving h2{font-size:clamp(21px,2.9vw,28px);letter-spacing:-.03em;margin-bottom:18px;padding-top:34px;border-top:1px solid var(--lijn)}
.beschrijving__leeg{color:var(--grijs)}
.infokaarten{display:grid;gap:12px;margin-top:34px;align-content:start}
.infokaart{
  display:block;padding:22px;background:var(--zacht);border:1px solid var(--lijn);border-radius:var(--r-l);
  color:var(--ink);transition:all var(--vlot);
}
.infokaart:hover{border-color:var(--teal);background:#fff;box-shadow:var(--sch-2);color:var(--ink);transform:translateY(-3px)}
.infokaart h3{font-size:16px;margin-bottom:8px}
.infokaart p{font-size:13.8px;color:var(--grijs);margin-bottom:12px;line-height:1.5}
.infokaart span{font-size:13.2px;font-weight:800;color:var(--teal-dd)}

/* ---------- 23. Informatiepagina's ---------- */
.inforooster{display:grid;gap:34px;padding-block:34px 66px}
.zijmenu{display:grid;gap:24px;align-content:start}
.zijmenu__groep h2{font-size:12px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--grijs);margin-bottom:10px}
.zijmenu__groep li{margin-bottom:1px}
.zijmenu__groep a{
  display:block;padding:8px 13px;border-radius:10px;font-size:14.4px;font-weight:600;color:var(--ink-2);
  transition:background var(--vlot),color var(--vlot);
}
.zijmenu__groep a:hover{background:var(--zacht);color:var(--teal-dd)}
.zijmenu__groep a[aria-current=page]{background:var(--teal-l);color:var(--teal-dd);font-weight:800}
.zijmenu__hulp{padding:20px;background:var(--zacht);border-radius:var(--r-l);display:grid;gap:12px;justify-items:start}
.zijmenu__hulp .btn{width:100%}

.infobeeld{margin:0 0 32px;border-radius:var(--r-xl);overflow:hidden;background:var(--zacht)}
.infobeeld img{width:100%;aspect-ratio:16/10;object-fit:cover}
.p-info .infobeeld img[src*="monteur"]{aspect-ratio:4/3;object-fit:contain;object-position:center bottom}

.rijketekst{font-size:16.4px;line-height:1.72;color:var(--ink-2);max-width:74ch}
.rijketekst .lead{font-size:clamp(17px,2.2vw,20px);color:var(--ink);font-weight:600;line-height:1.55}
.rijketekst h2{font-size:clamp(20px,2.7vw,27px);letter-spacing:-.028em;color:var(--ink);margin:38px 0 14px}
.rijketekst h3{font-size:17px;color:var(--ink);margin:26px 0 10px}
.rijketekst h2:first-child,.rijketekst h3:first-child{margin-top:0}
.rijketekst p{margin:0 0 1.05em}
.rijketekst strong{color:var(--ink);font-weight:700}
.rijketekst ul,.rijketekst ol{margin:0 0 1.2em;display:grid;gap:9px}
.rijketekst ul li{position:relative;padding-left:24px}
.rijketekst ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--teal)}
.rijketekst ol{counter-reset:n;padding-left:0}
.rijketekst ol li{position:relative;padding-left:34px;counter-increment:n;list-style:none}
.rijketekst ol li::before{
  content:counter(n);position:absolute;left:0;top:2px;width:23px;height:23px;border-radius:50%;
  background:var(--teal-l);color:var(--teal-dd);display:grid;place-content:center;font-size:12px;font-weight:800;
}
.rijketekst ol[type=a] li::before{content:counter(n,lower-alpha)}
.rijketekst .lijst-vink li::before{
  content:"";left:1px;top:8px;width:13px;height:8px;border-radius:1px;background:none;
  border-left:2.4px solid var(--teal-d);border-bottom:2.4px solid var(--teal-d);transform:rotate(-45deg);
}
.rijketekst .lijst-nummer{counter-reset:n}
.rijketekst .lijst-nummer li{position:relative;padding-left:36px;counter-increment:n}
.rijketekst .lijst-nummer li::before{
  content:counter(n);left:0;top:1px;width:25px;height:25px;border-radius:8px;background:var(--ink);
  color:#fff;display:grid;place-content:center;font-size:12.5px;font-weight:800;
}
.rijketekst blockquote{
  margin:26px 0;padding:24px 26px;background:var(--teal-l);border-radius:var(--r-l);
  border-left:4px solid var(--teal);font-size:15.6px;
}
.rijketekst blockquote p:last-child{margin-bottom:0}
.rijketekst .notitie{
  padding:14px 17px;background:var(--oranje-l);border-left:4px solid var(--oranje);
  border-radius:0 12px 12px 0;font-size:14.6px;color:var(--ink-2);
}
.rijketekst .ondertekening{font-style:italic;color:var(--grijs);font-size:14.6px}
.rijketekst .figuur{margin:26px 0}
.rijketekst .figuur img{width:100%;border-radius:var(--r-l);border:1px solid var(--lijn)}
.rijketekst .figuur figcaption{margin-top:9px;font-size:13px;color:var(--grijs);text-align:center}
.rijketekst a{font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2.5px}

.prijstabel{margin:0 0 1.4em;font-size:15px;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden}
.prijstabel thead{background:var(--ink);color:#fff}
.prijstabel th{text-align:left;padding:12px 16px;font-size:13.4px;font-weight:700}
.prijstabel tbody tr{border-bottom:1px solid var(--lijn-2)}
.prijstabel tbody tr:last-child{border-bottom:0}
.prijstabel tbody tr:nth-child(even){background:var(--zacht)}
.prijstabel td{padding:11px 16px}
.prijstabel td:last-child{text-align:right;font-weight:700;white-space:nowrap}
.prijstabel thead th:last-child{text-align:right}
.tabel-scroll{overflow-x:auto;margin-bottom:1.4em}
.tabel-scroll .prijstabel{min-width:560px;margin-bottom:0}
.tabel-scroll .prijstabel td:last-child{text-align:left;font-weight:400}

.adresblok{display:grid;gap:14px;margin:24px 0}
.adresblok>div{padding:20px;background:var(--zacht);border-radius:var(--r);border:1px solid var(--lijn)}
.adresblok h3{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--grijs);margin-bottom:9px}
.adresblok p{margin:0;font-size:15px;line-height:1.6;color:var(--ink);font-weight:600}

.partners{display:grid;gap:26px;margin-top:34px}
.partners__groep h2{font-size:15px;margin-bottom:12px;letter-spacing:-.02em}
.partners__groep ul{display:grid;gap:2px}
.partners__groep a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 15px;
  background:var(--zacht);border-radius:11px;font-size:14.4px;font-weight:600;color:var(--ink-2);
  transition:all var(--vlot);
}
.partners__groep a svg{width:15px;height:15px;color:var(--grijs-l);flex:none}
.partners__groep a:hover{background:var(--teal-l);color:var(--teal-dd)}
.partners__groep a:hover svg{color:var(--teal-dd)}

.formulier{margin-top:44px;padding-top:34px;border-top:1px solid var(--lijn)}
.formulier h2{font-size:clamp(20px,2.7vw,26px);letter-spacing:-.03em;margin-bottom:10px}
.formulier__intro{color:var(--grijs);margin-bottom:24px}
.form{display:grid;gap:16px;max-width:660px}
.form__rij{display:grid;gap:16px}
.form label{display:grid;gap:7px;font-size:13.6px;font-weight:700;color:var(--ink-2);position:relative}
/* Het vinkje bij de voorwaarden is geen invulveld maar een zin. In het grid
   hierboven kreeg elk stukje een eigen regel: hokje, tekst, link en punt onder
   elkaar. Hier dus op één regel, en in gewone leestekst. */
.form label.form__akkoord{display:flex;flex-direction:row;align-items:flex-start;gap:11px;
  font-size:15px;font-weight:400;color:var(--ink);line-height:1.5}
.form .form__akkoord input[type=checkbox]{flex:0 0 auto;width:19px;height:19px;margin:1px 0 0;
  accent-color:var(--teal-d);cursor:pointer}
.form .form__akkoord span{flex:1 1 auto}
.form input,.form textarea,.form select{
  border:1.5px solid var(--lijn);border-radius:12px;padding:12px 14px;font-size:15.4px;
  font-family:inherit;font-weight:400;background:#fff;color:var(--ink);width:100%;
  transition:border-color var(--vlot),box-shadow var(--vlot);
}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:0;border-color:var(--teal-d);box-shadow:0 0 0 3px var(--teal-l);
}
.form textarea{resize:vertical;min-height:110px}
.verplicht{color:var(--oranje-d)}
.teller{font-style:normal;font-size:12px;color:var(--grijs-l);text-align:right;font-weight:600}
.form .btn{justify-self:start}

.kaartblok{margin-top:34px;border-radius:var(--r-xl);overflow:hidden;position:relative}
.kaartblok img{width:100%;aspect-ratio:16/6;object-fit:cover}
.kaartblok__pil{
  position:absolute;left:50%;bottom:18px;translate:-50% 0;padding:11px 20px;border-radius:100px;
  background:#fff;font-size:14px;font-weight:700;color:var(--ink);box-shadow:var(--sch-3);white-space:nowrap;
}

/* ---------- 24. Footer ---------- */
.voet{background:var(--ink);color:rgba(255,255,255,.66);padding-block:clamp(44px,5.6vw,72px) 26px;font-size:14.4px}
.voet__top{display:grid;gap:34px;padding-bottom:38px;border-bottom:1px solid rgba(255,255,255,.11)}
.voet__merk img{width:200px;aspect-ratio:300/65;background:#fff;border-radius:10px;padding:9px 12px}
.voet__merk p{margin:18px 0;max-width:38ch;line-height:1.6}
.voet__contact{display:grid;gap:10px}
.voet__contact a{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:14.4px}
.voet__contact svg{width:17px;height:17px;color:var(--teal);flex:none}
.voet__contact a:hover{color:var(--teal)}
.voet__fb{
  display:inline-grid;place-content:center;width:40px;height:40px;margin-top:18px;
  border-radius:50%;background:rgba(255,255,255,.09);color:#fff;transition:background var(--vlot)
}
.voet__fb svg{width:20px;height:20px}
.voet__fb:hover{background:var(--teal-d);color:#fff}
.voet__kolom h3{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.voet__kolom li{margin-bottom:3px}
.voet__kolom a{color:rgba(255,255,255,.66);font-size:14.2px}
.voet__kolom a:hover{color:var(--teal)}
.mini-tijden{font-size:13.6px;margin-bottom:12px}
.mini-tijden th{text-align:left;padding:4px 0;font-weight:600;color:#fff;width:38px}
.mini-tijden td{text-align:right;padding:4px 0;font-variant-numeric:tabular-nums}
.mini-tijden tr.dicht th,.mini-tijden tr.dicht td{color:rgba(255,255,255,.34)}
.voet__kolom--winkel .klein{color:rgba(255,255,255,.44)}
.voet__keurmerk{display:inline-block;margin-top:16px;background:#fff;border-radius:10px;padding:8px 10px}
.voet__keurmerk img{width:130px;height:auto}
.voet__onder{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;justify-content:space-between;padding-top:22px;font-size:13px}
.voet__onder p{margin:0;color:rgba(255,255,255,.46)}
.voet__legal,.voet__vervoer{display:flex;flex-wrap:wrap;gap:8px 18px}
.voet__legal a{color:rgba(255,255,255,.6);font-size:13px}
.voet__legal a:hover{color:var(--teal)}
.voet__vervoer li{
  padding:5px 11px;border:1px solid rgba(255,255,255,.16);border-radius:7px;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;color:rgba(255,255,255,.5);
}

/* ---------- 25. Mobiele actiebalk ---------- */
.mobbalk{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--lijn);padding:7px 4px calc(7px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px -12px rgba(15,22,24,.2);
}
.mobbalk__knop{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 2px;
  border:0;background:none;cursor:pointer;color:var(--grijs);font-size:10.5px;font-weight:700;
  position:relative;text-decoration:none;
}
.mobbalk__knop svg{width:21px;height:21px}
.mobbalk__knop:hover,.mobbalk__knop:focus-visible{color:var(--teal-dd)}
.mobbalk__knop--nadruk{color:var(--oranje-d)}
.mobbalk__bal{
  position:absolute;top:0;right:calc(50% - 20px);min-width:17px;height:17px;padding:0 4px;
  display:grid;place-content:center;border-radius:100px;background:var(--oranje-d);color:#fff;
  font-size:10px;font-weight:800;font-style:normal;
}

/* ---------- 26. Winkelwagen ---------- */
.kar{position:fixed;inset:0;z-index:170}
.kar__sluier{position:absolute;inset:0;background:rgba(15,22,24,.45);animation:fadeOp .3s ease}
.kar__paneel{
  position:absolute;top:0;right:0;bottom:0;width:min(420px,94vw);background:#fff;
  display:flex;flex-direction:column;box-shadow:var(--sch-4);
  animation:karIn .34s cubic-bezier(.3,.8,.3,1);
}
@keyframes karIn{from{transform:translateX(100%)}}
.kar__kop{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--lijn);flex:none}
.kar__kop h2{font-size:19px}
.kar__kop button{width:40px;height:40px;border:0;background:var(--zacht);border-radius:50%;font-size:24px;line-height:1;cursor:pointer}
.kar__lijst{flex:1;overflow-y:auto;padding:16px 22px}
.kar__rij{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--lijn-2)}
.kar__rij img{width:62px;height:62px;object-fit:contain;background:var(--zacht);border-radius:10px;flex:none;aspect-ratio:1}
.kar__rij h3{font-size:14px;font-weight:700;line-height:1.35;margin-bottom:5px}
.kar__rij h3 a{color:var(--ink)}
.kar__info{flex:1;min-width:0}
.kar__regel{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:7px}
.kar__stap{display:flex;align-items:center;border:1.5px solid var(--lijn);border-radius:100px;overflow:hidden}
.kar__stap button{width:29px;height:29px;border:0;background:none;cursor:pointer;font-size:15px;line-height:1}
.kar__stap button:hover{background:var(--zacht)}
.kar__stap span{min-width:26px;text-align:center;font-size:13.5px;font-weight:700}
.kar__prijs{font-size:14.5px;font-weight:800;white-space:nowrap}
.kar__weg{border:0;background:none;color:var(--grijs-l);font-size:12px;cursor:pointer;text-decoration:underline;padding:0;margin-top:5px}
.kar__weg:hover{color:var(--rood)}
.kar__leeg{text-align:center;padding-block:52px;color:var(--grijs)}
.kar__leeg svg{width:52px;height:52px;color:var(--lijn);margin-inline:auto;margin-bottom:16px}
.kar__voet{flex:none;padding:18px 22px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--lijn);background:var(--zacht)}
.kar__verzend{font-size:13.2px;color:var(--grijs);margin-bottom:12px}
.kar__verzend strong{color:var(--groen)}
.kar__balk{height:6px;border-radius:100px;background:var(--lijn);overflow:hidden;margin-top:8px}
.kar__balk i{display:block;height:100%;background:var(--teal-d);border-radius:100px;transition:width .4s ease}
.kar__totaal{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.kar__totaal span{font-size:14px;color:var(--grijs);font-weight:600}
.kar__totaal strong{font-size:25px;letter-spacing:-.03em}
.kar__voet .btn{width:100%}
.kar__klein{margin:10px 0 0;font-size:12.2px;color:var(--grijs);text-align:center}

.toast{
  position:fixed;left:50%;bottom:88px;translate:-50% 0;z-index:180;
  padding:13px 22px;border-radius:100px;background:var(--ink);color:#fff;
  font-size:14px;font-weight:700;box-shadow:var(--sch-4);animation:toastIn .32s ease;
}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}}

/* ---------- 27. Scroll-reveals ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease var(--vertraging,0ms),transform .7s cubic-bezier(.22,.8,.25,1) var(--vertraging,0ms)}
[data-reveal].is-zichtbaar{opacity:1;transform:none}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width:560px){
  .grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .catgrid{grid-template-columns:repeat(3,1fr);gap:14px}
  .usp__in{grid-template-columns:repeat(2,1fr);gap:26px 30px}
  .voet__top{grid-template-columns:repeat(2,1fr);gap:34px 30px}
  .voet__merk{grid-column:1/-1}
  .form__rij{grid-template-columns:1fr 1fr}
  .adresblok{grid-template-columns:repeat(2,1fr)}
  .cathulp{grid-template-columns:1fr 1fr}
  .infokaarten{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:860px){
  .grid--4{grid-template-columns:repeat(4,1fr);gap:16px}
  .catgrid{grid-template-columns:repeat(5,1fr)}
  .usp__in{grid-template-columns:repeat(4,1fr)}
  .voet__top{grid-template-columns:repeat(4,1fr);gap:38px 30px}
  .voet__merk{grid-column:1/-1}
  .hero__in{grid-template-columns:1.06fr .94fr;align-items:center}
  .werk__in{grid-template-columns:.82fr 1.18fr;align-items:center;gap:clamp(34px,4.6vw,64px)}
  .artblok{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,4vw,54px)}
  .winkelblok{grid-template-columns:1.1fr .9fr;gap:clamp(32px,4.4vw,60px);align-items:start}
  .verhaal{grid-template-columns:.86fr 1.14fr;gap:clamp(30px,4vw,54px);align-items:center}
  .advies{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,4vw,50px)}
  .product{grid-template-columns:1.02fr .98fr;gap:clamp(30px,4vw,56px);align-items:start}
  .inforooster{grid-template-columns:250px 1fr;gap:clamp(34px,4.4vw,60px)}
  .zijmenu{position:sticky;top:104px}
  .partners{grid-template-columns:repeat(2,1fr);gap:30px}
  .adresblok{grid-template-columns:repeat(2,1fr)}
  /* Niet vastzetten: de beschrijving eronder loopt over de volle breedte, en
     een plakkende galerij schuift daar dwars overheen. De koopkolom is bijna
     even hoog als de galerij, dus er viel toch niets langs te scrollen. */
  .galerij{grid-template-columns:1fr}
  .beschrijving{grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr)}
  .beschrijving h2{grid-column:1/-1}
  .beschrijving .infokaarten{grid-template-columns:1fr;margin-top:0}
  .mobbalk{display:none}
  body{padding-bottom:0}
}

@media (min-width:1040px){
  .nav__lijst{display:flex;align-items:center;gap:2px}
  .hamburger{display:none}
  .kop__acties .winkelstatus{display:inline-flex}
  .kop__acties .rond--kar{margin-left:4px}
  .voet__top{grid-template-columns:1.55fr 1fr 1.05fr 1fr 1.1fr;gap:34px}
  .voet__merk{grid-column:1/2}
  .winkelrooster{grid-template-columns:272px 1fr;gap:clamp(30px,3.4vw,48px);padding-block:30px 72px}
  .filters{
    position:static;width:auto;transform:none;box-shadow:none;background:transparent;
    display:block;align-self:start;position:sticky;top:104px;max-height:calc(100vh - 130px);overflow-y:auto;
  }
  .filters__kop{display:none}
  .filters__form{padding:0;overflow:visible}
  .zijcats{display:block}
  .balk__filter{display:none}
  .grid--4{grid-template-columns:repeat(4,1fr)}
  .cathulp{margin-top:60px}
}

@media (min-width:1240px){
  .grid--4{grid-template-columns:repeat(4,1fr);gap:18px}
  .catgrid{gap:16px}
}

/* Mobiel: ruimte voor de actiebalk */
@media (max-width:859px){
  body{padding-bottom:64px}
  .hero__kaartje--speed{display:none}
  .hero__foto--klein{width:56%;right:0;bottom:-20px}
  .kop__acties .rond--tel{display:inline-flex}
  .toast{bottom:78px}
}

@media (max-width:1039px){
  .filters{display:flex}
}

/* Toegankelijkheid: geen beweging */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .hero__titel .w>span{transform:none!important}
  .ticker__spoor,.merken__spoor{animation:none!important}
  .loader{display:none}
}

@media print{
  .kop,.ticker,.mobbalk,.voet,.zoekpaneel,.mob,.kar,.filters,.loader{display:none!important}
}

/* ---------- Montagekeuze op de productpagina ---------- */
.montage{border:1.5px solid var(--lijn);border-radius:var(--r);padding:14px 16px 10px;margin:0 0 18px}
.montage legend{padding:0 6px;font-size:13px;font-weight:800;color:var(--ink-2)}
.montage__optie{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-s);
  cursor:pointer;transition:background var(--vlot)}
.montage__optie:hover{background:var(--zacht)}
.montage__optie input{width:18px;height:18px;flex:none;accent-color:var(--teal-d);margin:0}
.montage__naam{flex:1;font-size:14.5px;font-weight:600}
.montage__prijs{font-size:13.5px;font-weight:700;color:var(--oranje-d);white-space:nowrap}
.montage__optie input:not(:checked)~.montage__prijs{color:var(--grijs)}
.montage__uitleg{margin:6px 4px 0;font-size:12.5px;color:var(--grijs);line-height:1.45}
.kar__uitvoering{margin:2px 0 4px;font-size:12.5px;font-weight:600;color:var(--teal-dd)}

/* ---------- Levertijd per artikel ---------- */
.voorraad--kort{margin-bottom:5px}
.levertijd{margin:0 0 22px;padding-left:19px;font-size:13.4px;font-weight:600;color:var(--ink-2)}
.montage__optie{flex-wrap:wrap}
.montage__levertijd{flex-basis:100%;margin:1px 0 0 28px;font-size:12.5px;font-weight:600;color:var(--grijs)}
.montage__optie input:checked~.montage__levertijd{color:var(--ink-2)}
.kar__levertijd{margin:2px 0 0;font-size:12.4px;color:var(--grijs)}

/* ---------- Vaste leveringsvorm op de productpagina ---------- */
.levervorm{border:1.5px solid var(--lijn);border-radius:var(--r);padding:12px 15px;margin:0 0 18px}
.levervorm__kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0}
.levervorm__naam{font-size:14.5px;font-weight:700;color:var(--ink)}
.levervorm__prijs{font-size:13.5px;font-weight:700;color:var(--oranje-d);white-space:nowrap}
.levervorm__uitleg{margin:4px 0 0;font-size:12.5px;color:var(--grijs);line-height:1.45}

/* ---------- Grote zoekbalk op de zoekpagina ---------- */
/* Deze had helemaal geen opmaak. Een SVG zonder breedte valt dan terug op zijn
   eigen formaat en groeit mee met de kolom — vandaar dat vergrootglas van een
   halve pagina. */
.grootzoek{
  display:flex;align-items:center;gap:10px;max-width:640px;margin:18px 0 0;
  padding:6px 6px 6px 16px;background:#fff;border:1.5px solid var(--lijn);
  border-radius:100px;box-shadow:var(--sch-1);
}
.grootzoek:focus-within{border-color:var(--teal-l2);box-shadow:var(--sch-2)}
.grootzoek__icoon{width:20px;height:20px;flex:none;color:var(--grijs)}
.grootzoek input{
  flex:1;min-width:0;border:0;background:transparent;padding:10px 0;
  font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em;
}
.grootzoek input::placeholder{color:var(--grijs-l);font-weight:500}
.grootzoek input:focus{outline:0}
.grootzoek .btn{flex:none;border-radius:100px;padding-inline:22px}

@media (max-width:520px){
  .grootzoek{flex-wrap:wrap;border-radius:var(--r);padding:10px}
  .grootzoek input{flex:1 1 140px}
  .grootzoek .btn{flex:1 1 100%;justify-content:center}
}
.chip__ouder{font-weight:500;color:var(--grijs-l);margin-left:4px}

/* Subcategorieën lieten zich zijwaarts wegschuiven: bij Accessoires waren 10
   van de 22 te zien en de rest stond buiten beeld, zonder scrollbalk om dat te
   verraden. Vanaf tabletbreedte lopen ze door op een volgende rij, zodat je in
   één oogopslag ziet wat er is. Op een telefoon blijft vegen prettiger. */
@media (min-width:760px){
  .subcats{flex-wrap:wrap;overflow-x:visible}
}

/* Foto in de lopende tekst van een informatiepagina */
.paginabeeld{margin:26px 0;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sch-3)}
.paginabeeld img{width:100%;height:auto;display:block}
.paginabeeld figcaption{padding:10px 14px;font-size:13px;color:var(--grijs);background:var(--zacht)}

/* ---- Bevestigingspagina na het bestellen -------------------------------- */
/* Dit is het eerste wat een klant ziet nadat hij betaald heeft. Het moet er
   uitzien als een bevestiging, niet als een uitdraai. */
.bestelkop{display:flex;gap:16px;align-items:flex-start;margin-bottom:26px}
.bestelkop h1{margin:0 0 4px;font-size:clamp(24px,3.4vw,32px)}
.bestelkop p{margin:0}
.bestelkop__vink{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--teal-l);
  color:var(--teal-dd);display:grid;place-items:center;font-size:24px;font-weight:700;margin-top:2px;
}
.bestelkop__staat{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px !important}
.staat{
  display:inline-block;padding:5px 12px;border-radius:999px;font-size:13px;font-weight:700;
  background:var(--lijn-2);color:var(--ink-2);
}
.staat--goed{background:rgba(30,138,75,.12);color:#166B3A}
.staat--wacht{background:var(--oranje-l);color:var(--oranje-d)}

.bestelraster{display:grid;gap:22px}
.besteloverzicht{display:grid;gap:14px;align-content:start}
.bestelkaart{
  background:#fff;border:1px solid var(--lijn);border-radius:var(--r-l);padding:22px 24px;margin-bottom:14px;
}
.bestelkaart h2{font-size:17px;margin:0 0 14px}
.bestelkaart p{margin:0 0 10px}
.bestelkaart p:last-child{margin-bottom:0}
.bestelkaart--track{background:var(--teal-l);border-color:var(--teal-l2)}

.bestelregel{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--lijn-2)}
.bestelregel:first-of-type{border-top:0;padding-top:0}
.bestelregel__beeld{
  flex:0 0 auto;width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid var(--lijn);background:#fff;
}
.bestelregel__wat{flex:1 1 auto;min-width:0;display:grid;gap:3px}
.bestelregel__prijs{flex:0 0 auto;text-align:right;display:grid;gap:2px;white-space:nowrap}

.bedragen{display:grid;grid-template-columns:1fr auto;gap:7px 16px;margin:0}
.bedragen dt{color:var(--grijs)}
.bedragen dd{margin:0;text-align:right}
/* De streep boven het totaal hoort door te lopen. Zat hij op de dt en de dd
   apart, dan brak de kolomruimte hem middenin af. */
.bedragen__som{
  display:flex;justify-content:space-between;gap:16px;margin:11px 0 6px !important;
  padding-top:11px;border-top:2px solid var(--lijn);font-size:18px;font-weight:700;color:var(--ink);
}

@media (min-width:900px){
  .bestelraster{grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:26px}
}