@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/inter.woff2) format('woff2')}
@font-face{font-family:'Roboto Slab';font-style:normal;font-weight:700 900;font-display:swap;src:url(/fonts/roboto-slab.woff2) format('woff2')}
:root{
  --navy:#0E1B3D;--navy-2:#16285a;--navy-3:#22377a;--magenta:#EC008C;--magenta-d:#c80077;--cyan:#00AEEF;--geel:#FFD200;
  --tekst:#1b2540;--zacht:#5b6683;--lijn:#e3e8f2;--bg:#f4f6fb;--wit:#fff;--groen:#12a150;--rood:#d92d20;
  --r:14px;--schaduw:0 1px 2px rgba(14,27,61,.06),0 6px 20px rgba(14,27,61,.06);
  --kop:'Roboto Slab',Georgia,serif;--body:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);color:var(--tekst);background:var(--bg);font-size:16px;line-height:1.55}
img,svg{max-width:100%;display:block}
a{color:var(--navy-3)}
h1,h2,h3{font-family:var(--kop);color:var(--navy);line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800}
h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800}
h3{font-size:1.1rem;font-weight:700}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;border-radius:999px;background:var(--magenta);color:#fff;font:700 1rem var(--body);padding:.8em 1.4em;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
.knop:hover{background:var(--magenta-d)}
.knop:active{transform:scale(.98)}
.knop.navy{background:var(--navy)}
.knop.navy:hover{background:var(--navy-3)}
.knop.licht{background:#fff;color:var(--navy);border:1.5px solid var(--lijn)}
.knop.licht:hover{border-color:var(--navy)}
.knop[disabled]{opacity:.55;cursor:wait}

/* Topbalk + header */
.topbar{background:var(--navy);color:#cfd7ee;font-size:.82rem}
.topbar .wrap{display:flex;gap:18px;justify-content:space-between;align-items:center;min-height:34px}
.topbar a{color:#fff;text-decoration:none}
.topbar .usp-mini{display:flex;gap:18px}
.topbar .usp-mini span::before{content:'✓ ';color:var(--geel);font-weight:700}
.kop{background:var(--navy-2);position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.kop .wrap{display:flex;align-items:center;gap:20px;min-height:76px}
.kop .logo img{width:190px;height:auto}
.zoek{flex:1;position:relative;max-width:620px}
.zoek input{width:100%;height:48px;border:0;border-radius:999px;padding:0 56px 0 20px;font:500 1rem var(--body);color:var(--tekst);outline:3px solid transparent;transition:outline-color .15s}
.zoek input:focus{outline-color:var(--cyan)}
.zoek button{position:absolute;right:5px;top:5px;width:38px;height:38px;border-radius:50%;border:0;background:var(--magenta);color:#fff;cursor:pointer;display:grid;place-items:center}
.zoek-resultaten{position:absolute;left:0;right:0;top:54px;background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(14,27,61,.25);overflow:hidden;display:none;max-height:70vh;overflow-y:auto}
.zoek-resultaten.open{display:block}
.zoek-resultaten a{display:flex;gap:12px;align-items:center;padding:10px 14px;text-decoration:none;color:var(--tekst);border-bottom:1px solid var(--lijn)}
.zoek-resultaten a:hover,.zoek-resultaten a.actief{background:#f0f4ff}
.zoek-resultaten img{width:36px;height:36px}
.zoek-resultaten .groep{padding:8px 14px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--zacht);background:var(--bg)}
.zoek-resultaten .prijs{margin-left:auto;font-weight:700;white-space:nowrap}
.kop-acties{display:flex;gap:6px;margin-left:auto}
.kop-acties a{color:#fff;text-decoration:none;display:flex;flex-direction:column;align-items:center;font-size:.75rem;padding:6px 10px;border-radius:10px;position:relative}
.kop-acties a:hover{background:rgba(255,255,255,.1)}
.kop-acties svg{width:26px;height:26px}
.teller{position:absolute;top:0;right:4px;min-width:20px;height:20px;border-radius:10px;background:var(--magenta);color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center;padding:0 5px}
.teller:empty,.teller[data-n="0"]{display:none}
.menu{background:#fff;border-bottom:1px solid var(--lijn)}
.menu .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.menu .wrap::-webkit-scrollbar{display:none}
.menu a{white-space:nowrap;padding:13px 14px;font-weight:600;font-size:.95rem;color:var(--navy);text-decoration:none;border-bottom:3px solid transparent}
.menu a:hover,.menu a.actief{border-bottom-color:var(--magenta)}
.usps{background:#fff;border-bottom:1px solid var(--lijn)}
.usps .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-top:10px;padding-bottom:10px}
.usps div{display:flex;gap:10px;align-items:center;font-size:.9rem;font-weight:600;color:var(--navy)}
.ico{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--navy);background:color-mix(in srgb,var(--a) 12%,#fff)}
.ico svg{width:26px;height:26px}
.uitleg .ico{width:52px;height:52px;border-radius:16px;margin:6px 0 4px}
.uitleg .ico svg{width:32px;height:32px}

/* Vergelijking origineel vs huismerk */
.vergelijk{background:linear-gradient(180deg,#fff,#f7f9fe);border-radius:24px;box-shadow:var(--schaduw);padding:28px;margin:10px 0 30px;position:relative;overflow:hidden}
.vg-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.vg-kop h2{margin:6px 0 6px}
.vg-kop p{margin:0;color:var(--zacht);max-width:46em}
.vg-raster{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:stretch}
.vg-vs{align-self:center;width:52px;height:52px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font:900 1.1rem var(--kop);box-shadow:0 6px 18px rgba(14,27,61,.25)}
.vg-kaart{position:relative;background:#fff;border:2px solid var(--lijn);border-radius:20px;padding:18px 18px 16px;transition:border-color .4s,box-shadow .4s}
.vg-kaart.huis{border-color:color-mix(in srgb,var(--magenta) 35%,#fff)}
.vergelijk.klaar .vg-kaart.huis{border-color:var(--magenta);box-shadow:0 10px 30px rgba(236,0,140,.18)}
.vg-titel{font:800 1.25rem var(--kop);color:var(--navy);display:flex;flex-direction:column}
.vg-titel small{font:600 .82rem var(--body);color:var(--zacht)}
.vg-badge{position:absolute;top:-13px;right:16px;background:var(--magenta);color:#fff;font-weight:800;font-size:.8rem;padding:5px 12px;border-radius:999px;transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.vergelijk.klaar .vg-badge{transform:scale(1)}
.vg-beelden{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:end;margin:10px 0 6px}
.vg-cart,.vg-print{width:100%;height:auto;max-height:200px}
.vg-inkt{transform:translateY(112px);transition:transform 1.4s cubic-bezier(.4,0,.2,1)}
.vergelijk.zien .vg-inkt{transform:translateY(calc((1 - var(--niveau)) * 100px))}
.vg-golf{animation:vg-golf 2.2s linear infinite}
.orig .vg-golf{animation-duration:3.4s}
@keyframes vg-golf{to{transform:translateX(40px)}}
.vg-bel{opacity:0;animation:vg-bel 3s ease-in infinite}
@keyframes vg-bel{0%{opacity:0;transform:translateY(0)}15%{opacity:.7}100%{opacity:0;transform:translateY(-80px)}}
.vg-vel{opacity:0}
.vg-kaart.print .vg-vel{animation:vg-vel 1.35s ease-in infinite}
@keyframes vg-vel{0%{opacity:0;transform:translateY(-40px)}20%{opacity:1}75%{opacity:1;transform:translateY(46px)}100%{opacity:0;transform:translateY(60px)}}
.vg-lamp{fill:#3a4152;transition:fill .3s}
.vg-kaart.print .vg-lamp{fill:#2fd27a}
.vg-kaart.vg-op .vg-lamp{fill:var(--rood);animation:vg-knipper .8s steps(2) infinite}
@keyframes vg-knipper{50%{fill:#5a1010}}
.vg-stapel-v rect{opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s}
.vg-stapel-v rect.on{opacity:1;transform:none}
.vg-cijfers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.vg-cijfers>div{display:flex;gap:10px;align-items:center;background:var(--bg);border-radius:12px;padding:8px 10px}
.vg-cijfers b{display:block;font:800 1.05rem var(--body);color:var(--navy);font-variant-numeric:tabular-nums}
.vg-cijfers small{font-size:.75rem;color:var(--zacht)}
.vg-status{min-height:1.6em;margin-top:10px;font-weight:700;font-size:.92rem;text-align:center}
.vg-kaart.vg-op .vg-status{color:var(--rood)}
.vg-kaart.huis .vg-status{color:var(--groen)}
.vg-noot{margin:16px 0 0;font-size:.78rem;color:var(--zacht)}
.vergelijk.compact{padding:22px}
.vergelijk.compact .vg-cart,.vergelijk.compact .vg-print{max-height:160px}
@media (max-width:760px){
  .vergelijk{padding:18px}
  .vg-raster{grid-template-columns:1fr;gap:22px}
  .vg-vs{justify-self:center;margin:-8px 0}
}
@media (prefers-reduced-motion:reduce){
  .vg-golf,.vg-bel,.vg-kaart.print .vg-vel,.vg-kaart.vg-op .vg-lamp{animation:none}
  .vg-inkt,.vg-stapel-v,.vg-badge{transition:none}
}

/* Hero + printerzoeker */
.hero{background:radial-gradient(1200px 400px at 85% -10%,rgba(0,174,239,.35),transparent 60%),radial-gradient(800px 380px at 0% 120%,rgba(236,0,140,.35),transparent 60%),var(--navy);color:#fff;padding:44px 0 56px;position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero h1{color:#fff;font-size:clamp(1.9rem,4vw,3rem)}
.hero h1 em{font-style:normal;color:var(--geel)}
.hero p.lead{font-size:1.12rem;color:#d7def3;max-width:34em}
.hero .druppels{position:absolute;right:-30px;top:-30px;opacity:.12;width:360px}
.vinder{background:#fff;color:var(--tekst);border-radius:20px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.vinder h2{font-size:1.35rem;margin-bottom:4px}
.vinder p{margin:0 0 16px;color:var(--zacht);font-size:.95rem}
.stap{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.stap b{flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:.9rem}
.stap.klaar b{background:var(--groen)}
.stap select{flex:1;height:48px;border:1.5px solid var(--lijn);border-radius:12px;padding:0 12px;font:500 1rem var(--body);color:var(--tekst);background:#fff;appearance:auto}
.stap select:disabled{background:var(--bg);color:#9aa3bb}
.vinder .of{display:flex;align-items:center;gap:10px;color:var(--zacht);font-size:.85rem;margin:16px 0 12px}
.vinder .of::before,.vinder .of::after{content:'';flex:1;height:1px;background:var(--lijn)}
.merkknoppen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.merkknoppen a{border:1.5px solid var(--lijn);border-radius:12px;padding:10px 4px;text-align:center;text-decoration:none;font-weight:800;color:var(--navy);font-size:.95rem}
.merkknoppen a:hover{border-color:var(--magenta);color:var(--magenta)}

/* Printerconfigurator */
.cfg{position:relative}
.cfg input{width:100%;height:56px;border:2px solid var(--magenta);border-radius:14px;padding:0 16px 0 48px;font:600 1.05rem var(--body);color:var(--tekst);outline:none;box-shadow:0 0 0 4px rgba(236,0,140,.12)}
.cfg input:focus{box-shadow:0 0 0 5px rgba(236,0,140,.22)}
.cfg-icoon{position:absolute;left:14px;top:16px;width:24px;height:24px;color:var(--magenta)}
.cfg-lijst{position:absolute;left:0;right:0;top:62px;background:#fff;border-radius:12px;box-shadow:0 14px 40px rgba(14,27,61,.28);z-index:20;display:none;max-height:360px;overflow-y:auto}
.cfg-lijst.open{display:block}
.cfg-lijst button{display:flex;align-items:center;gap:10px;width:100%;border:0;border-bottom:1px solid var(--lijn);background:#fff;padding:10px 14px;font:600 .95rem var(--body);color:var(--navy);text-align:left;cursor:pointer}
.cfg-lijst button:hover,.cfg-lijst button.actief{background:#fff2fa}
.cfg-lijst small{margin-left:auto;color:var(--zacht);font-weight:500;white-space:nowrap}
.cfg-meer{padding:12px 14px;font-size:.88rem;color:var(--zacht)}
.cfg-uitslag{padding-top:30px;padding-bottom:10px;scroll-margin-top:110px}
.cfg-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;background:#fff;border-radius:var(--r);box-shadow:var(--schaduw);padding:20px 22px;border-left:6px solid var(--groen)}
.cfg-kop h2{margin:4px 0}
.cfg-kop p{margin:0;color:var(--zacht)}
.cfg-ok{display:inline-block;background:#e7f7ee;color:var(--groen);font-weight:800;font-size:.8rem;padding:3px 10px;border-radius:999px}
.cfg-acties{display:flex;gap:8px;flex-wrap:wrap}
.cfg-groep{margin:24px 0 12px;font-size:1.2rem}
.cfg-groep small{color:var(--zacht);font:600 .9rem var(--body)}

/* Secties */
section.blok{padding:44px 0}
.kopregel{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px}
.kopregel a{font-weight:700;white-space:nowrap}
.merken{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.merkkaart{background:#fff;border-radius:var(--r);box-shadow:var(--schaduw);padding:22px;text-decoration:none;color:var(--tekst);display:flex;flex-direction:column;gap:10px;border:2px solid transparent;transition:border-color .15s,transform .15s}
.merkkaart:hover{border-color:var(--magenta);transform:translateY(-2px)}
.merkkaart .naam{font:900 1.6rem var(--kop);color:var(--navy)}
.merkkaart ul{list-style:none;margin:0;padding:0;font-size:.92rem;color:var(--zacht)}
.merkkaart li{display:flex;justify-content:space-between;border-top:1px solid var(--lijn);padding:6px 0}
.merkkaart li b{color:var(--navy)}

/* Productkaarten */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.kaart{background:#fff;border-radius:var(--r);box-shadow:var(--schaduw);display:flex;flex-direction:column;overflow:hidden;position:relative;transition:box-shadow .15s}
.kaart:hover{box-shadow:0 2px 4px rgba(14,27,61,.08),0 14px 34px rgba(14,27,61,.12)}
.kaart .beeld{display:block;background:linear-gradient(180deg,#f7f9fe,#eef2fb);padding:18px;aspect-ratio:4/3}
.kaart .beeld img{margin:auto;height:100%;width:auto}
.kaart .info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.kaart .titel{font-weight:700;font-size:.95rem;color:var(--navy);text-decoration:none;line-height:1.35}
.kaart .titel:hover{text-decoration:underline}
.kaart .meta{font-size:.82rem;color:var(--zacht)}
.kaart .onder{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;gap:8px}
.label{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}
.label span{font-size:.7rem;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--navy);color:#fff;letter-spacing:.02em}
.label .sale{background:var(--magenta)}
.label .xl{background:var(--cyan)}
.label .orig{background:#fff;color:var(--navy);border:1px solid var(--lijn)}
.prijs{font:800 1.25rem var(--body);color:var(--navy)}
.prijs s{font-size:.8rem;color:var(--zacht);font-weight:500;margin-right:4px}
.mand-knop{width:44px;height:44px;border-radius:50%;border:0;background:var(--magenta);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s,transform .15s}
.mand-knop:hover{background:var(--magenta-d)}
.mand-knop.ok{background:var(--groen)}
.voorraad{font-size:.8rem;color:var(--groen);font-weight:600}
.voorraad::before{content:'● '}

/* Overzichtspagina's */
.broodkruimel{font-size:.85rem;color:var(--zacht);padding:14px 0}
.broodkruimel a{color:var(--zacht)}
.paginakop{background:#fff;border-bottom:1px solid var(--lijn);padding:8px 0 22px}
.paginakop p{color:var(--zacht);max-width:60em;margin:0}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:18px 0}
.filters button{border:1.5px solid var(--lijn);background:#fff;border-radius:999px;padding:7px 14px;font:600 .88rem var(--body);color:var(--navy);cursor:pointer}
.filters button.aan{background:var(--navy);border-color:var(--navy);color:#fff}
.filters input{border:1.5px solid var(--lijn);border-radius:999px;padding:8px 14px;font:500 .92rem var(--body);min-width:220px;flex:1;max-width:360px}
.filters .aantal{margin-left:auto;color:var(--zacht);font-size:.9rem}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.tabs a{padding:8px 16px;border-radius:999px;background:var(--bg);text-decoration:none;font-weight:700;color:var(--navy);font-size:.92rem}
.tabs a.aan{background:var(--navy);color:#fff}
.series{columns:4 220px;column-gap:24px}
.series div{break-inside:avoid;margin-bottom:18px}
.series h3{font-size:1rem;margin-bottom:6px}
.series a{display:block;font-size:.9rem;padding:2px 0;color:var(--tekst);text-decoration:none}
.series a:hover{color:var(--magenta)}
.meer{background:none;border:0;color:var(--navy-3);font-weight:700;cursor:pointer;padding:4px 0;font-size:.9rem}

/* Productpagina */
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:32px;background:#fff;border-radius:20px;box-shadow:var(--schaduw);padding:28px;margin-bottom:28px}
.pdp .beeld{background:linear-gradient(180deg,#f7f9fe,#eaf0fb);border-radius:16px;display:grid;place-items:center;padding:40px;position:relative}
.pdp .beeld img{width:min(320px,80%)}
.pdp h1{font-size:clamp(1.4rem,2.6vw,1.95rem)}
.pdp .prijsblok{display:flex;align-items:baseline;gap:10px;margin:14px 0}
.pdp .prijsblok .prijs{font-size:2.1rem}
.pdp .prijsblok small{color:var(--zacht)}
.koop{display:flex;gap:10px;align-items:center;margin:14px 0 18px}
.aantal-kies{display:flex;border:1.5px solid var(--lijn);border-radius:999px;overflow:hidden;height:50px}
.aantal-kies button{width:42px;border:0;background:#fff;font-size:1.2rem;cursor:pointer;color:var(--navy)}
.aantal-kies input{width:44px;border:0;text-align:center;font:700 1rem var(--body)}
.koop .knop{flex:1;height:50px}
.pluspunten{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:7px}
.pluspunten li{display:flex;gap:10px;font-size:.95rem}
.pluspunten li::before{content:'✓';color:var(--groen);font-weight:800}
.specs{width:100%;border-collapse:collapse;font-size:.94rem}
.specs th,.specs td{text-align:left;padding:9px 0;border-bottom:1px solid var(--lijn);vertical-align:top}
.specs th{color:var(--zacht);font-weight:500;width:42%}
.let{background:#fff8d6;border-left:4px solid var(--geel);padding:10px 14px;border-radius:8px;font-size:.92rem;margin:0 0 14px}
.printerlijst{background:#fff;border-radius:20px;box-shadow:var(--schaduw);padding:24px 28px;margin-bottom:28px}
.printerlijst ul{columns:3 220px;column-gap:24px;padding:0;margin:0;list-style:none}
.printerlijst li{padding:3px 0;font-size:.93rem}
.printerlijst a{color:var(--tekst);text-decoration:none}
.printerlijst a:hover{color:var(--magenta);text-decoration:underline}
.past{display:flex;gap:8px;margin:0 0 14px}
.past input{flex:1;border:1.5px solid var(--lijn);border-radius:999px;padding:10px 16px;font:500 .95rem var(--body)}
.past-uitslag{font-size:.92rem;font-weight:600;min-height:1.4em}

/* Tekst */
.tekst{background:#fff;border-radius:20px;box-shadow:var(--schaduw);padding:28px 32px;margin-bottom:28px}
.tekst.smal{max-width:860px}
.tekst h2{margin-top:1.2em}
.tekst h2:first-child{margin-top:0}
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.drie .tekst{margin:0}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.uitleg{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.uitleg>div{background:#fff;border-radius:var(--r);box-shadow:var(--schaduw);padding:22px;position:relative}
.uitleg>div::before{counter-increment:s;content:counter(s);position:absolute;top:-14px;left:20px;width:32px;height:32px;border-radius:50%;background:var(--magenta);color:#fff;font-weight:800;display:grid;place-items:center}
.uitleg h3{margin-top:8px}

/* Winkelwagen & afrekenen */
.mand{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.regel{display:grid;grid-template-columns:72px 1fr auto auto;gap:14px;align-items:center;background:#fff;border-radius:var(--r);box-shadow:var(--schaduw);padding:14px;margin-bottom:10px}
.regel img{width:72px;height:72px;background:var(--bg);border-radius:10px;padding:6px}
.regel a{font-weight:700;color:var(--navy);text-decoration:none}
.regel .weg{background:none;border:0;color:var(--zacht);cursor:pointer;font-size:.85rem;text-decoration:underline;padding:0}
.overzicht{background:#fff;border-radius:var(--r);box-shadow:var(--schaduw);padding:20px;position:sticky;top:100px}
.overzicht table{width:100%;border-collapse:collapse;margin-bottom:14px}
.overzicht td{padding:6px 0}
.overzicht td:last-child{text-align:right;font-weight:600;white-space:nowrap;padding-left:10px}
.overzicht tr.tot td{border-top:2px solid var(--navy);padding-top:10px;font-size:1.15rem;font-weight:800}
.balk-gratis{background:var(--bg);border-radius:999px;height:8px;overflow:hidden;margin:6px 0 4px}
.balk-gratis i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--magenta))}
.formulier{background:#fff;border-radius:var(--r);box-shadow:var(--schaduw);padding:22px}
.formulier fieldset{border:0;padding:0;margin:0 0 18px}
.formulier legend{font:800 1.1rem var(--kop);color:var(--navy);margin-bottom:10px}
.velden{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.velden label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600;color:var(--zacht);grid-column:span 3}
.velden label.h{grid-column:span 6}
.velden label.k{grid-column:span 2}
.velden input,.velden select{height:46px;border:1.5px solid var(--lijn);border-radius:10px;padding:0 12px;font:500 1rem var(--body);color:var(--tekst)}
.velden input:focus,.velden select:focus{outline:2px solid var(--cyan);border-color:transparent}
.keuze{display:grid;gap:8px}
.keuze label{display:flex;gap:10px;align-items:center;border:1.5px solid var(--lijn);border-radius:12px;padding:12px 14px;cursor:pointer;font-weight:600}
.keuze label:has(input:checked){border-color:var(--magenta);background:#fff5fb}
.keuze small{margin-left:auto;color:var(--zacht);font-weight:600}
.vink{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;margin:10px 0}
.melding{padding:12px 14px;border-radius:10px;background:#fdecea;color:var(--rood);font-weight:600;margin:10px 0;display:none}
.melding.toon{display:block}
.leeg{text-align:center;padding:50px 20px;background:#fff;border-radius:var(--r);box-shadow:var(--schaduw)}

/* Footer */
.voet{background:var(--navy);color:#c9d2ea;margin-top:40px;font-size:.92rem}
.voet .wrap{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:28px;padding-top:44px;padding-bottom:30px}
.voet h3{color:#fff;font:700 1rem var(--body);margin-bottom:10px}
.voet a{color:#c9d2ea;text-decoration:none;display:block;padding:3px 0}
.voet a:hover{color:#fff}
.voet .logo img{width:200px;margin-bottom:12px}
.betaal{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.betaal span{background:#fff;color:var(--navy);font-weight:800;font-size:.75rem;padding:5px 9px;border-radius:6px}
.voet-onder{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;font-size:.8rem;color:#98a3c4}
.voet-onder .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:0 16px}

.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);background:var(--navy);color:#fff;padding:12px 18px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);display:flex;gap:14px;align-items:center;z-index:100;transition:transform .25s;font-weight:600;max-width:calc(100% - 32px)}
.toast.toon{transform:translate(-50%,0)}
.toast a{color:var(--geel);white-space:nowrap}

@media (max-width:980px){
  .hero .wrap,.pdp,.mand{grid-template-columns:1fr}
  .merken{grid-template-columns:repeat(2,1fr)}
  .usps .wrap{grid-template-columns:repeat(2,1fr)}
  .voet .wrap{grid-template-columns:1fr 1fr}
  .drie,.reviews,.uitleg{grid-template-columns:1fr}
  .overzicht{position:static}
  .topbar .usp-mini span:nth-child(n+2){display:none}
}
@media (max-width:640px){
  .kop .wrap{flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px;min-height:0}
  .kop .logo img{width:150px}
  .zoek{order:3;flex-basis:100%;max-width:none}
  .zoek input{height:44px}
  .kop-acties a span{display:none}
  .raster{grid-template-columns:repeat(2,1fr);gap:10px}
  .kaart .info{padding:10px 12px 12px}
  .kaart .titel{font-size:.86rem}
  .prijs{font-size:1.08rem}
  .mand-knop{width:38px;height:38px}
  .pdp,.tekst,.printerlijst{padding:18px;border-radius:16px}
  .regel{grid-template-columns:56px 1fr;gap:10px}
  .regel img{width:56px;height:56px}
  .regel .rechts{grid-column:2;display:flex;justify-content:space-between;align-items:center}
  .velden label,.velden label.k{grid-column:span 6}
  .merkknoppen{grid-template-columns:repeat(2,1fr)}
  .voet .wrap{grid-template-columns:1fr}
  .topbar .wrap>a{display:none}
  .filters .aantal{margin-left:0;flex-basis:100%}
}