/* Keuzehuis testsite. Donker is het uitgangspunt; licht spiegelt dezelfde tokens. */
:root{
  --grond:#12161C; --vlak:#212831; --vlak2:#29323D; --vlak3:#1A2129;
  --rand:#333D4A; --randzacht:#2A3340;
  --tekst:#FCFCFC; --zacht:#B9C2CE; --flauw:#8894A3;
  --blauw:#01447A; --blauw2:#015699; --blauw3:#0A6AB8;
  --link:#B3DDFF; --linkhover:#E3F2FF;
  --groen:#38AD3E; --oranje:#E8762C; --rood:#E05A4E;
  --invoer:#171D25; --kop:#29323D;
  --logo-lijn:#FCFCFC; --logo-tekst:#FCFCFC; --logo-zacht:#8894A3; --logo-groen:#38AD3E;
  --schaduw:0 10px 28px rgba(0,0,0,.45);
  color-scheme:dark;
  --f-kop:'Archivo',"Helvetica Neue",Arial,sans-serif;
  --f-lijf:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --f-cijf:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --grond:#ECEEF1; --vlak:#FFFFFF; --vlak2:#F3F5F8; --vlak3:#F8F9FB;
  --rand:#CFD6DE; --randzacht:#E1E5EA;
  --tekst:#13171C; --zacht:#4A5462; --flauw:#6F7A88;
  --blauw:#01447A; --blauw2:#015699; --blauw3:#0A6AB8;
  --link:#01549B; --linkhover:#01355F;
  --groen:#237F29; --oranje:#C25A14; --rood:#B23B30;
  --invoer:#FFFFFF; --kop:#F3F5F8;
  --logo-lijn:#01447A; --logo-tekst:#13171C; --logo-zacht:#6F7A88; --logo-groen:#237F29;
  --schaduw:0 10px 26px rgba(16,26,40,.14);
  color-scheme:light; } }
:root[data-theme="light"]{
  --grond:#ECEEF1; --vlak:#FFFFFF; --vlak2:#F3F5F8; --vlak3:#F8F9FB;
  --rand:#CFD6DE; --randzacht:#E1E5EA;
  --tekst:#13171C; --zacht:#4A5462; --flauw:#6F7A88;
  --blauw:#01447A; --blauw2:#015699; --blauw3:#0A6AB8;
  --link:#01549B; --linkhover:#01355F;
  --groen:#237F29; --oranje:#C25A14; --rood:#B23B30;
  --invoer:#FFFFFF; --kop:#F3F5F8;
  --logo-lijn:#01447A; --logo-tekst:#13171C; --logo-zacht:#6F7A88; --logo-groen:#237F29;
  --schaduw:0 10px 26px rgba(16,26,40,.14);
  color-scheme:light; }

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{margin:0; background:var(--grond); color:var(--tekst); font-family:var(--f-lijf);
  font-size:13px; line-height:1.45; -webkit-font-smoothing:antialiased}
a{color:var(--link); text-decoration:none}
a:hover{color:var(--linkhover); text-decoration:underline}
h1,h2,h3{margin:0; font-family:var(--f-kop); font-weight:700; letter-spacing:-.015em}
h1{font-size:21px; font-weight:800; letter-spacing:-.025em}
h2{font-size:15px} h3{font-size:13px}
img,svg{max-width:100%}
[hidden]{display:none!important}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--blauw3); outline-offset:1px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.overslaan{position:absolute; left:-9999px; top:0; background:var(--vlak); padding:10px 16px; z-index:200}
.overslaan:focus{left:10px; top:10px}
.num{font-family:var(--f-cijf); font-variant-numeric:tabular-nums; font-weight:600; letter-spacing:-.03em}
.zacht{color:var(--zacht)} .flauw{color:var(--flauw)} .mini{font-size:11.5px}
.breed{max-width:1340px; margin:0 auto; padding-inline:12px}
main.breed{padding-bottom:18px}

/* ---------- productbeeld ---------- */
.fb{position:relative; display:inline-flex; align-items:center; justify-content:center; height:var(--h); width:100%}
.fb img{position:absolute; inset:0; margin:auto; max-height:var(--h); max-width:100%; width:auto;
  object-fit:contain; opacity:0}
.fb.ok img{opacity:1; position:static}
.fb.ok .art{display:none}
.art .a-v{fill:var(--vlak2); stroke:var(--flauw); stroke-width:3; stroke-linejoin:round}
.art .a-s{fill:var(--rand)} .art .a-t{fill:var(--flauw); opacity:.45}
.art .a-l{fill:none; stroke:var(--flauw); stroke-width:3; stroke-linecap:round}

/* ---------- kopbalk ---------- */
.kopbalk{background:var(--vlak2); position:sticky; top:0; z-index:40;
  border-bottom:1px solid var(--randzacht)}
.kopbalk-in{display:flex; align-items:center; gap:14px; padding:8px 0}
.merk{flex:none; display:block; line-height:0}
.merk:hover{text-decoration:none}
.zoekdoos{flex:1; min-width:0; position:relative}
.zoekvorm{display:flex; align-items:center; background:var(--invoer); border:1px solid var(--rand);
  border-radius:3px; height:34px; overflow:hidden}
.zoekvorm:focus-within{border-color:var(--blauw3); box-shadow:0 0 0 2px rgba(10,106,184,.22)}
.zoekvorm input{flex:1; min-width:0; border:0; background:transparent; color:var(--tekst);
  font:inherit; font-size:13px; padding:0 11px; outline:0; height:100%}
.zoekvorm input::placeholder{color:var(--flauw)}
.zoekvorm input::-webkit-search-cancel-button{filter:invert(.5)}
.zoekvorm kbd{font-family:var(--f-cijf); font-size:10px; color:var(--flauw); border:1px solid var(--rand);
  border-radius:2px; padding:1px 5px; margin-right:7px}
.zoekvorm button{width:40px; height:100%; border:0; border-left:1px solid var(--rand);
  background:var(--vlak2); color:var(--zacht); display:flex; align-items:center; justify-content:center; cursor:pointer}
.zoekvorm button:hover{background:var(--blauw2); color:#fff}
.zoekuit{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:60; background:var(--vlak);
  border:1px solid var(--rand); border-radius:3px; box-shadow:var(--schaduw); overflow:hidden; max-height:62vh; overflow-y:auto}
.zoekuit a{display:grid; grid-template-columns:1fr auto; gap:3px 12px; padding:7px 11px;
  border-top:1px solid var(--randzacht); color:var(--tekst)}
.zoekuit a:first-child{border-top:0}
.zoekuit a:hover,.zoekuit a.actief{background:var(--vlak2); text-decoration:none}
.zoekuit .zt{font-weight:600; font-size:12.5px}
.zoekuit .zc{grid-column:1; font-size:11px; color:var(--flauw)}
.zoekuit .zp{grid-row:1/3; align-self:center; font-family:var(--f-cijf); font-weight:600}
.zoekuit .leeg{padding:11px; color:var(--zacht); font-size:12.5px}
.kopacties{display:flex; align-items:center; gap:2px; flex:none}
.kopactie{display:inline-flex; align-items:center; gap:6px; padding:7px 9px; color:var(--zacht);
  font-size:12.5px; border-radius:3px; background:none; border:0; cursor:pointer}
.kopactie:hover{background:rgba(127,160,200,.14); color:var(--tekst); text-decoration:none}
.kopactie .vlam{color:var(--oranje); display:flex}

/* uitklappaneel */
.uitklap{position:relative}
.paneeltje{position:absolute; right:0; top:calc(100% + 7px); z-index:60; width:244px; background:var(--vlak);
  border:1px solid var(--rand); border-radius:3px; padding:11px; box-shadow:var(--schaduw)}
.paneeltje .pt{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--flauw); margin-bottom:6px}
.knoprij{display:flex; gap:3px}
.knoprij button{flex:1; min-width:0; height:30px; border:1px solid var(--rand); background:var(--vlak2);
  color:var(--zacht); border-radius:3px; font-size:11.5px; cursor:pointer; display:flex;
  align-items:center; justify-content:center; gap:4px; white-space:nowrap}
.knoprij button:hover{border-color:var(--blauw3); color:var(--tekst)}
.knoprij button.aan{background:var(--blauw2); border-color:var(--blauw2); color:#fff; font-weight:600}
.paneeltje .pm{margin:8px 0 0; font-size:11.5px; color:var(--zacht); line-height:1.45}
.pvink{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--zacht); cursor:pointer}
.pvink input{accent-color:var(--blauw2)}

/* ---------- categoriebalk ---------- */
.catbalk{background:var(--vlak); border-bottom:1px solid var(--randzacht)}
.catbalk-in{display:flex; overflow-x:auto; scrollbar-width:none}
.catbalk-in::-webkit-scrollbar{display:none}
.catbalk a{padding:8px 11px; font-size:12.5px; font-weight:500; color:var(--zacht); white-space:nowrap;
  border-bottom:2px solid transparent}
.catbalk a:hover{background:var(--vlak2); color:var(--tekst); text-decoration:none}
.catbalk a.aan{color:var(--tekst); font-weight:700; border-bottom-color:var(--oranje); background:var(--grond)}

/* ---------- kruimels ---------- */
.landbalk{background:var(--grond)}
.landbalk-in{display:flex; align-items:center; gap:6px; padding:7px 0; font-size:11.5px; color:var(--zacht);
  overflow-x:auto; scrollbar-width:none; white-space:nowrap}
.landbalk-in::-webkit-scrollbar{display:none}
.land{display:inline-flex; align-items:center; gap:6px; color:var(--flauw)}
.sep{color:var(--flauw)}
.vlag{width:15px; height:11px; border-radius:1px; flex:none; display:inline-block}
.vlag.nl{background:linear-gradient(#AE1C28 33.3%,#fff 33.3% 66.6%,#21468B 66.6%)}
.vlag.be{background:linear-gradient(90deg,#2E2E2E 33.3%,#FDDA24 33.3% 66.6%,#EF3340 66.6%)}

/* ---------- blokken ---------- */
.blok{background:var(--vlak); border:1px solid var(--randzacht); border-radius:3px}
.blokkop{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 11px;
  background:var(--kop); border-bottom:1px solid var(--randzacht)}
.blokkop h2{font-family:var(--f-lijf); font-size:12.5px; font-weight:700}
.blokkop .mini{color:var(--flauw)}
.blokkop-los{display:flex; align-items:baseline; justify-content:space-between; margin:13px 0 7px}
.blokkop-los h2{font-size:15px}
.blokbody{padding:11px}
.blokbody p{margin:0 0 8px; color:var(--zacht)}
.blokbody p b{color:var(--tekst)}
.voetnoot{margin:0; padding:8px 11px; border-top:1px solid var(--randzacht)}

.paginakop{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; padding:11px 0 8px}
.paginakop.kolom{display:block}
.paginakop.kolom p{margin:3px 0 0}
.inleiding{margin:0 0 12px; color:var(--zacht); max-width:74ch; font-size:13.5px}

/* ---------- hero ---------- */
.hero{display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:7px; margin:8px 0 7px}
.hero>*{min-width:0}
.hero-tekst{background:var(--blauw); border-radius:3px; padding:17px 19px; display:flex;
  flex-direction:column; justify-content:center; color:#fff}
.hero-tekst h1{color:#fff; font-size:24px; margin-bottom:6px}
.hero-tekst p{margin:0 0 14px; color:#CFE3F5; max-width:38ch}
.hero-knop{display:inline-flex; align-items:center; align-self:flex-start; height:31px; padding:0 14px;
  background:#fff; color:var(--blauw); border-radius:3px; font-weight:700; font-size:12.5px}
.hero-knop:hover{background:#E8F2FB; color:var(--blauw); text-decoration:none}
.hero-tegel{background:var(--vlak); border:1px solid var(--randzacht); border-radius:3px; padding:11px 9px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:7px; color:var(--link)}
.hero-tegel:hover{border-color:var(--rand); text-decoration:none}
.hero-tegel .nm{font-size:11.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden}
.hero-tegel .pr{margin-top:auto; color:var(--tekst); font-family:var(--f-cijf); font-weight:600; font-size:13px}
.hero-tegel .pr small{font-family:var(--f-lijf); font-weight:400; color:var(--flauw); font-size:10.5px}
.stip{width:7px; height:7px; border-radius:50%; background:var(--groen); display:inline-block; margin-left:5px}

/* ---------- snelrij ---------- */
.snelrij{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:7px}
.snelrij a{display:flex; align-items:center; gap:10px; background:var(--vlak); border:1px solid var(--randzacht);
  border-radius:3px; padding:6px 11px; color:var(--link); font-size:12.5px; font-weight:600}
.snelrij a:hover{border-color:var(--rand); text-decoration:none}
.snelrij .sb{width:44px; height:34px; display:flex; align-items:center; justify-content:center; flex:none}

/* ---------- categoriegids ---------- */
.gids{display:grid; grid-template-columns:repeat(5,1fr); gap:7px; align-items:start}
.gidsblok{background:var(--vlak); border:1px solid var(--randzacht); border-radius:3px; padding:11px 12px}
.gidsblok h2{display:flex; align-items:center; gap:7px; margin-bottom:8px; font-family:var(--f-lijf);
  font-size:13.5px; font-weight:700; color:var(--tekst)}
.gidsblok h2 svg{color:var(--flauw); flex:none}
.gidsblok ul{list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:12.5px}

/* ---------- rijen ---------- */
.rij{display:grid; align-items:center; gap:10px; padding:7px 11px; border-top:1px solid var(--randzacht)}
.rij:first-of-type{border-top:0}
.rij:hover{background:var(--vlak2)}
.rij.kolomkop{background:var(--kop); font-size:11px; font-weight:700; color:var(--flauw);
  text-transform:uppercase; letter-spacing:.04em}
.rij.kolomkop:hover{background:var(--kop)}
.naam{min-width:0}
.naam a{color:var(--tekst); font-weight:600}
.naam a:hover{color:var(--link)}
.prijs{text-align:right; white-space:nowrap}
.prijs .groot{font-size:13.5px}
.prijs .bij{display:block; font-size:10.5px; color:var(--flauw); font-family:var(--f-lijf); font-weight:400}
.daal{color:var(--groen); font-family:var(--f-cijf); font-weight:600; font-size:11.5px}
.stijg{color:var(--rood); font-family:var(--f-cijf); font-weight:600; font-size:11.5px}
.vonk{display:block}
.vonk .vl{fill:none; stroke:var(--flauw); stroke-width:1.4}
.vonk .vv{fill:var(--flauw); opacity:.12}
.vonk.af .vl{stroke:var(--groen)} .vonk.af .vv{fill:var(--groen)}
.vonk.op .vl{stroke:var(--rood)} .vonk.op .vv{fill:var(--rood)}

.tweeluik{display:grid; grid-template-columns:1fr 326px; gap:7px; align-items:start; margin-top:7px}
.tweeluik>*{min-width:0}

/* ---------- advies ---------- */
.adviesrij{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.adviesrij.breedrij{grid-template-columns:repeat(3,1fr)}
.advies{display:flex; gap:11px; background:var(--vlak); border:1px solid var(--randzacht);
  border-radius:3px; padding:11px; align-items:center}
.advies:hover{border-color:var(--rand); text-decoration:none}
.advies .ab{width:66px; height:52px; flex:none; background:var(--vlak2); border-radius:2px;
  display:flex; align-items:center; justify-content:center}
.advies .an{font-weight:700; font-size:13px; color:var(--link); display:block; margin-bottom:2px}
.advies p{margin:0; font-size:11.5px; color:var(--zacht)}

.hulpblok{display:flex; align-items:center; gap:11px; padding:11px; border-top:1px solid var(--randzacht);
  color:var(--tekst)}
.hulpblok:first-of-type{border-top:0}
.hulpblok:hover{background:var(--vlak2); text-decoration:none}
.hulpblok .hb{width:36px; height:36px; border-radius:3px; background:var(--vlak2); color:var(--blauw3);
  display:flex; align-items:center; justify-content:center; flex:none}
.hulpblok b{display:block; font-size:12.5px}
.hulpblok span span{display:block}
.hulpblok svg:last-child{margin-left:auto; color:var(--flauw); flex:none}

/* ---------- lijstpagina ---------- */
.lijstraam{display:grid; grid-template-columns:232px 1fr; gap:7px; align-items:start}
.lijstraam>*{min-width:0}
.filters summary{list-style:none}
.filters summary::-webkit-details-marker{display:none}
.filterkop{display:flex; align-items:center; justify-content:space-between; padding:9px 11px;
  background:var(--kop); border-bottom:1px solid var(--randzacht); font-weight:700; font-size:12.5px; cursor:pointer}
.filterkop .chevron{width:7px; height:7px; border-right:2px solid var(--flauw); border-bottom:2px solid var(--flauw);
  transform:rotate(45deg); transition:transform .12s}
.filters[open] .filterkop .chevron{transform:rotate(-135deg)}
.groep{border-top:1px solid var(--randzacht); padding:10px 11px}
.groep:first-of-type{border-top:0}
.gt{font-size:11.5px; font-weight:700; margin-bottom:7px}
.gt .flauw{font-weight:400}
.vink{display:flex; align-items:center; gap:8px; padding:2px 0; font-size:12.5px; color:var(--zacht); cursor:pointer}
.vink:hover{color:var(--tekst)}
.vink input{width:13px; height:13px; margin:0; accent-color:var(--blauw2); flex:none}
.vink span:nth-of-type(1){overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vink.leeg{opacity:.45}
.vink .n{margin-left:auto; font-family:var(--f-cijf); font-size:10.5px; color:var(--flauw); flex:none}
.staafjes{display:flex; align-items:flex-end; gap:1px; height:30px; margin-bottom:7px}
.staafjes i{flex:1; background:var(--rand); min-height:2px; border-radius:1px 1px 0 0}
.pv{display:flex; align-items:center; gap:6px}
.pv input{width:100%; min-width:0; height:27px; border:1px solid var(--rand); border-radius:3px;
  background:var(--invoer); color:var(--tekst); font:inherit; font-size:11.5px; padding:0 7px}
.knop-leeg{width:100%; height:28px; border:1px solid var(--rand); background:var(--vlak2); color:var(--zacht);
  border-radius:3px; font-size:12px; cursor:pointer}
.knop-leeg:hover{border-color:var(--blauw3); color:var(--tekst)}

.werkbalk{display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--vlak);
  border:1px solid var(--randzacht); border-radius:3px; padding:7px 9px; margin-bottom:7px}
.wb-tel{font-size:12px; color:var(--zacht)}
.wb-tel b{color:var(--tekst); font-family:var(--f-cijf)}
.werkbalk select{height:27px; border:1px solid var(--rand); background:var(--invoer); color:var(--tekst);
  border-radius:3px; font:inherit; font-size:12px; padding:0 6px}
.blader{display:flex; gap:3px; margin-left:auto; align-items:center}
.blader a,.blader span{min-width:25px; height:25px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--rand); border-radius:3px; font-size:11.5px; font-family:var(--f-cijf); color:var(--zacht)}
.blader a:hover{border-color:var(--blauw3); color:var(--tekst); text-decoration:none}
.blader .nu{background:var(--blauw2); border-color:var(--blauw2); color:#fff; font-weight:700}
.blader .punten{border:0}

.kaartgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.kaartgrid>*{min-width:0}
.pk{background:var(--vlak); border:1px solid var(--randzacht); border-radius:3px; display:flex;
  flex-direction:column; position:relative}
.pk:hover{border-color:var(--rand)}
.vlag-sterk{position:absolute; top:0; left:0; z-index:1; background:var(--oranje); color:#fff; font-size:9.5px;
  font-weight:700; padding:2px 7px; border-radius:0 0 3px 0; letter-spacing:.03em}
.pk-beeld{display:flex; align-items:center; justify-content:center; padding:14px 10px 8px; min-height:124px}
.pk-beeld:hover{text-decoration:none}
.pk-lijf{padding:0 11px 9px}
.pk-titel{display:block; font-weight:600; font-size:12.5px; line-height:1.32; margin-bottom:3px}
.pk-ean{font-size:10.5px; color:var(--flauw); font-family:var(--f-cijf)}
.pk-tabel{width:100%; border-collapse:collapse; font-size:11.5px; margin-top:auto}
.pk-tabel th,.pk-tabel td{text-align:left; padding:3.5px 11px; border-top:1px solid var(--randzacht)}
.pk-tabel th{color:var(--flauw); font-weight:400; width:44%}
.pk-tabel td{font-weight:600}
.pk-voet{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 11px;
  border-top:1px solid var(--randzacht); background:var(--kop)}
.pk-n{font-size:10.5px; color:var(--flauw)}
.geenresultaat{background:var(--vlak); border:1px solid var(--randzacht); border-radius:3px;
  padding:16px; color:var(--zacht); margin:0}

/* ---------- productpagina ---------- */
.praam{display:grid; grid-template-columns:230px 1fr 316px; gap:7px; align-items:start}
.praam>*{min-width:0}
.pgroot{background:var(--vlak); border:1px solid var(--randzacht); border-radius:3px; padding:16px;
  display:flex; align-items:center; justify-content:center; min-height:200px}
.stabel{width:100%; border-collapse:collapse; font-size:12.5px}
.stabel th,.stabel td{text-align:left; padding:6px 11px; border-top:1px solid var(--randzacht); vertical-align:top}
.stabel tr:nth-child(odd) th,.stabel tr:nth-child(odd) td{background:var(--vlak3)}
.stabel th{color:var(--zacht); font-weight:400; width:44%}
.stabel td{font-weight:600}
.meter{padding:11px}
.mgroot{font-size:22px}
.oordeel{display:inline-block; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:2px; margin-left:7px}
.oordeel.hoog{background:rgba(224,90,78,.17); color:var(--rood)}
.oordeel.laag{background:rgba(56,173,62,.17); color:var(--groen)}
.oordeel.mid{background:rgba(232,118,44,.17); color:var(--oranje)}
.schaal{height:8px; border-radius:4px; margin:9px 0 3px; position:relative;
  background:linear-gradient(90deg,#2FA45F,#9DC24B,#E8B13C,#E0714A,#C94436)}
.schaal i{position:absolute; top:-3px; width:4px; height:14px; border-radius:2px; background:var(--tekst);
  border:1.5px solid var(--vlak)}
.schaaluit{display:flex; justify-content:space-between; font-size:10.5px; color:var(--flauw)}
.gr{margin-top:9px}
.gr svg{display:block; width:100%; height:auto}
.gr-l{fill:none; stroke:var(--blauw3); stroke-width:1.7}
.gr-v{fill:var(--blauw3); opacity:.14}
.gr-r{stroke:var(--randzacht); stroke-width:1}
.gr-t{fill:var(--flauw); font-size:8px; font-family:var(--f-cijf)}
.gr-p{fill:var(--blauw3)}
.aanbod{display:grid; grid-template-columns:1fr auto; gap:5px 10px; align-items:center; padding:10px 11px;
  border-top:1px solid var(--randzacht)}
.naarwinkel{grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:6px; height:32px;
  background:var(--blauw2); color:#fff; border-radius:3px; font-weight:700; font-size:12.5px; margin-top:4px}
.naarwinkel:hover{background:var(--blauw3); color:#fff; text-decoration:none}

/* ---------- koopadvies ---------- */
.advieslijf{display:grid; grid-template-columns:1fr 310px; gap:7px; align-items:start}
.advieslijf>*{min-width:0}
.adviessectie{background:var(--vlak); border:1px solid var(--randzacht); border-radius:3px;
  padding:14px 16px; margin-bottom:7px}
.adviessectie h2{display:flex; align-items:center; gap:9px; margin-bottom:9px}
.adviessectie .nr{width:22px; height:22px; border-radius:50%; background:var(--blauw2); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-family:var(--f-cijf); flex:none}
.adviessectie p{margin:0; color:var(--zacht); max-width:70ch}
.adviessectie p b{color:var(--tekst)}
.balkjes{display:grid; gap:5px}
.balkje{display:grid; grid-template-columns:142px 1fr 44px; align-items:center; gap:10px; font-size:12.5px}
.balkje .bl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--zacht)}
.balkje .bb{height:9px; background:var(--vlak2); border-radius:2px; overflow:hidden}
.balkje .bb i{display:block; height:100%; background:var(--blauw3); border-radius:2px}
.balkje .bn{text-align:right; color:var(--flauw); font-size:11.5px}

/* ---------- keuzehulp ---------- */
.khraam{display:grid; grid-template-columns:1fr 326px; gap:7px; align-items:start}
.khraam>*{min-width:0}
.khvraag{background:var(--vlak); border:1px solid var(--randzacht); border-radius:3px; padding:14px 16px;
  margin-bottom:7px}
.khvraag h2{margin-bottom:3px}
.khvraag .uitleg{margin:0 0 11px; color:var(--zacht); font-size:12.5px}
.khkeuzes{display:grid; gap:5px}
.khkeuze{display:flex; align-items:center; gap:11px; border:1px solid var(--rand); border-radius:3px;
  padding:9px 12px; background:var(--vlak2); cursor:pointer; text-align:left; color:var(--tekst); width:100%}
.khkeuze:hover{border-color:var(--blauw3)}
.khkeuze.aan{border-color:var(--blauw3); background:rgba(10,106,184,.14)}
.khkeuze .kt{font-weight:600; font-size:13px}
.khkeuze .ku{font-size:11.5px; color:var(--zacht); display:block}
.khkeuze .kn{margin-left:auto; font-family:var(--f-cijf); font-size:11.5px; color:var(--flauw); flex:none}
.khkeuze[disabled]{opacity:.4; cursor:not-allowed}
.khklaar{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--vlak);
  border:1px solid var(--randzacht); border-radius:3px; padding:11px 14px}
.khlijst .rij{grid-template-columns:38px 1fr auto}
.khopnieuw{height:28px; padding:0 12px; border:1px solid var(--rand); background:var(--vlak2);
  color:var(--zacht); border-radius:3px; cursor:pointer; font-size:12px}
.khopnieuw:hover{border-color:var(--blauw3); color:var(--tekst)}

/* ---------- tekstpagina ---------- */
.tekstblad{background:var(--vlak); border:1px solid var(--randzacht); border-radius:3px;
  padding:18px 22px; max-width:78ch}
.tekstblad h2{margin:18px 0 7px; font-size:15px}
.tekstblad p{margin:0 0 10px; color:var(--zacht)}
.tekstblad ul{margin:0 0 10px; padding-left:19px; color:var(--zacht)}
.tekstblad li{margin-bottom:4px}
.tekstblad .inleiding{color:var(--tekst); font-size:14px}

/* ---------- voet ---------- */
.voet{background:var(--vlak); border-top:1px solid var(--randzacht); margin-top:16px}
.voet-in{display:grid; grid-template-columns:2fr repeat(3,1fr); gap:20px; padding:20px 0}
.voet h3{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--flauw);
  font-family:var(--f-lijf); font-weight:700; margin-bottom:8px}
.voet ul{list-style:none; margin:0; padding:0; display:grid; gap:5px; font-size:12.5px}
.voet p{margin:9px 0 0; font-size:12px; color:var(--zacht); max-width:46ch}
.voetonder{border-top:1px solid var(--randzacht); padding:10px 0 18px; font-size:11.5px; color:var(--flauw);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* ---------- smal ---------- */
@media (max-width:1180px){
  .gids{grid-template-columns:repeat(3,1fr)}
  .hero{grid-template-columns:repeat(4,1fr)} .hero-tekst{grid-column:1/-1}
  .praam{grid-template-columns:190px 1fr} .praam>aside{grid-column:1/-1}
  .kaartgrid{grid-template-columns:repeat(2,1fr)}
  .adviesrij{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .kopactie .lbl{display:none} .kopactie{padding:7px 8px}
  .lijstraam,.tweeluik,.advieslijf,.khraam{grid-template-columns:1fr}
  .gids{grid-template-columns:repeat(2,1fr)} .snelrij{grid-template-columns:repeat(2,1fr)}
  .adviesrij,.adviesrij.breedrij{grid-template-columns:1fr}
  .voet-in{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .kopbalk-in{flex-wrap:wrap; gap:9px} .zoekdoos{order:3; flex-basis:100%}
  .hero{grid-template-columns:1fr 1fr} .gids{grid-template-columns:1fr}
  .kaartgrid{grid-template-columns:1fr} .praam{grid-template-columns:1fr}
  .stabel th,.pk-tabel th{width:46%}
  .balkje{grid-template-columns:104px 1fr 38px}
  .voet-in{grid-template-columns:1fr}
}