@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/inter-opsz-latin.woff2) format('woff2')}
/* Ladder desktop 14, 16, 22, 32, 44; telefoon 14, 16, 20, 28, 44 (op 33 cm is 14 al 0,22 graad). Eigenaar 02-11: op 100% moet de hele productkaart met de foto in beeld staan, dus desktop één maat kleiner. Ruimte: 4, 8, 16, 24, 48, 96. Gewichten: 400, 600, 800. */
:root{
  --bg:#fff; --photo:#f3f5f8; --tile:#f3f5f8; --tile2:#e9edf2; --ink:#1a2a3e; --ink2:#566476; --line:#e4e8ee; --line2:#d3dae2;
  --navy:#1f3a5f; --green:#216b55; --green-h:#19553f; --green-ink:#1d6d4a; --green-z:#216b55; --amber-ink:#7a4f00; --amber-z:#b7791f; --blue-ink:#1f3a5f; --grey-ink:#566476; --grey-z:#7b8797;
  --card:#fff; --card2:#fbfcfd; --plate:transparent; --on-green:#fff; --field:#fff; --bar:rgba(255,255,255,.88); --foot:#1f3a5f; --foot-ink:#fff; --foot-ink2:#c6d3e4; --err:#a02b2b;
  --sh1:0 2px 4px rgba(31,58,95,.06),0 14px 26px -16px rgba(31,58,95,.55); --sh2:0 1px 2px rgba(31,58,95,.06),0 6px 14px -10px rgba(31,58,95,.45);
  --display:'Plus Jakarta Sans',system-ui,sans-serif; --text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --t1:14px;--l1:20px;--t2:16px;--l2:24px;--l2s:22px;--t3:22px;--l3:28px;--t4:32px;--l4:36px;--t5:44px;--l5:48px;--s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:48px; --s6:96px;
  --gut:clamp(16px,4vw,40px); --r-l:20px; --r-m:14px; --r-s:10px; --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
/* hidden wint altijd: een display op een klasse mag een verborgen koopblok niet tonen */
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(88px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t2)/var(--l2) var(--text);letter-spacing:-.012em;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--bg)}
a{color:inherit}
button,input{font:inherit;letter-spacing:inherit;color:inherit}
h1,h2,h3,p,dl,dd,ul,figure,fieldset{margin:0;padding:0;border:0}
ul{list-style:none}
:focus-visible{outline:2px solid var(--green-ink);outline-offset:2px;border-radius:6px}
.wrap{max-width:calc(1080px + 2 * var(--gut));margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums lining-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.icon{width:1em;height:1em;flex:none;display:block}
.t15{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em}
.muted{color:var(--ink2)}

/* koppen: de lijnbox wordt op de inkt afgesneden, zodat de ladder echte zichtbare afstand is */
h1,.h2,.verdict{font-family:var(--display);text-box:trim-both cap alphabetic;word-spacing:.07em}
.amount{text-box:trim-both cap alphabetic}
h1{font-size:var(--t4);line-height:var(--l4);font-weight:800;letter-spacing:-.022em;color:var(--navy);text-wrap:balance}
.h2{font-size:var(--t3);line-height:var(--l3);font-weight:800;letter-spacing:-.012em;color:var(--navy);text-wrap:balance}
.sec-top{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.sec-top p,.prose p{text-wrap:pretty}
.pm li span{text-wrap:pretty}
.note,.pm .src,.none b,.none p,.acc p,.faq-list summary,.faq-list p{text-wrap:balance}
.sec-top p{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}

/* voorbeeldstrook */

.site{border-bottom:1px solid var(--line)}

/* lokale balk */
.local{position:sticky;top:env(safe-area-inset-top,0px);z-index:110;background:var(--bar);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--line);transform:translateY(-101%);visibility:hidden;margin-bottom:-65px;transition:transform .35s var(--ease),visibility .35s}
.local.on{transform:none;visibility:visible}
.local .wrap{height:64px;display:flex;align-items:center;gap:var(--s4)}
.local strong{font:800 var(--t2)/1 var(--display);color:var(--navy);letter-spacing:-.012em;white-space:nowrap}
.local nav{display:flex;gap:var(--s4);font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;min-width:0}
.local nav a{text-decoration:none;color:var(--ink2);white-space:nowrap;transition:color .2s}
.local nav a{position:relative;padding-block:21px}
.local nav a:hover,.local nav a[aria-current]{color:var(--ink)}
.local nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--navy)}
.local .buy{margin-left:auto;display:flex;align-items:center;gap:var(--s3);flex:none}
.local .buy span{font:700 var(--t2)/1 var(--text);color:var(--navy)}

/* knoppen */
.btn{appearance:none;border:0;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 var(--s4);border-radius:999px;background:var(--green);color:var(--on-green);font:600 var(--t2)/1 var(--text);letter-spacing:-.012em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s,transform .2s var(--ease)}
.btn:hover{background:var(--green-h)}
.btn:active{transform:scale(.985)}
.btn.block{width:100%}
.btn.sm{min-height:40px;padding:0 var(--s3);font-size:var(--t1);letter-spacing:-.006em}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"gal head" "gal buy";grid-template-rows:auto 1fr;column-gap:var(--s5);align-items:start}
.head{grid-area:head;display:grid;gap:var(--s3);padding-top:var(--s1)}
.brand{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2);margin-bottom:calc(-1 * var(--s1))}
.gal{grid-area:gal;position:sticky;top:81px;min-width:0}
.buybox{grid-area:buy;display:grid;gap:var(--s4);padding-top:var(--s4);min-width:0}
.tile{position:relative;aspect-ratio:663/758;max-width:100%;border-radius:var(--r-l);background:#f3f4f8;overflow:hidden}
.tile img{position:absolute;inset:7%;width:86%;height:86%;object-fit:contain}
.guide{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2);text-decoration:none}
.guide b{font-weight:400;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.guide:hover b{text-decoration-color:currentColor}

/* uitvoering */
.opt{display:grid;gap:var(--s2)}
.size input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.size{position:relative;display:grid;gap:0;padding:12px var(--s3);border-radius:var(--r-m);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:box-shadow .2s}
.size b{font-size:var(--t2);line-height:var(--l2s);font-weight:600}
.size small{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}
.size.tint{grid-template-columns:16px minmax(0,1fr);align-items:center;column-gap:var(--s2)}
.size.tint i{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--line2)}
.size:hover{box-shadow:inset 0 0 0 1px var(--ink2)}
.size:has(input:checked){box-shadow:inset 0 0 0 2px var(--navy)}
.size:has(input:focus-visible){outline:2px solid var(--green-ink);outline-offset:2px}
.size:has(input:disabled){cursor:not-allowed;background:var(--tile);box-shadow:none}
.size:has(input:disabled) b{color:var(--ink2)}

/* koopmoment: oordeel, reden, schaal. Drie dingen, meer niet */
.moment{--s-ink:var(--green-ink);display:grid;gap:var(--s2);padding:var(--s3);border-radius:var(--r-m);background:color-mix(in srgb,var(--s-ink) 8%,var(--bg))}
.moment[data-s="hoog"]{--s-ink:var(--amber-ink)}
.moment[data-s="normaal"]{--s-ink:var(--grey-ink)}
.moment[data-s="nieuw"]{--s-ink:var(--blue-ink)}
.moment[data-s="weg"]{--s-ink:var(--grey-ink)}
.verdict{font-size:var(--t3);line-height:var(--l3);font-weight:800;letter-spacing:-.012em;color:var(--s-ink)}
.moment p{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink)}
.scale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1);margin-top:var(--s2)}
.seg{display:grid;gap:var(--s2);--z:var(--grey-z)}
.seg[data-z="laag"]{--z:var(--green-z)}
.seg[data-z="hoog"]{--z:var(--amber-z)}
.seg i{display:block;height:8px;background:var(--bg);transition:background .3s}
.seg:first-child i{border-radius:999px 0 0 999px}
.seg:last-child i{border-radius:0 999px 999px 0}
.seg span{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2);text-align:center}
.seg:first-child span{text-align:left}
.seg:last-child span{text-align:right}
.seg.on i{background:var(--z)}
.seg.on span{color:var(--ink);font-weight:600}

/* prijs */
.price{display:grid;gap:var(--s3)}
.amount{margin-bottom:calc(-1 * var(--s1));font-size:var(--t5);line-height:var(--l5);font-weight:700;letter-spacing:-.03em;color:var(--navy);font-variant-numeric:proportional-nums lining-nums}
.p-sub{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;min-height:24px;font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}
.p-sub img{height:var(--h,20px);width:auto;display:block}
@media (min-width:1280px){.price{grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(48px,auto);column-gap:var(--s3)}.price>.btn,.price>.trust{grid-column:1/-1}.price>.btn{margin-top:var(--s1)}.amount{margin-bottom:0;align-self:last baseline;white-space:nowrap}.p-sub{align-self:last baseline;row-gap:0;min-height:0}}
.plate{display:inline-flex;background:var(--plate);border-radius:6px}
.trust summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--s2);font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2);-webkit-tap-highlight-color:transparent}
.trust summary::-webkit-details-marker{display:none}
.trust .icon{color:var(--green-ink)}
/* eigenaar 09-11: het vraagteken opent de uitleg als laag boven de regel, niet in de kaart; zo verschuiven kaart en foto niet */
.trust{position:relative}
.trust>.rank-explain-body{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;padding:12px var(--s3);background:var(--card);border-radius:var(--r-m);box-shadow:var(--sh1),inset 0 0 0 1px var(--line)}
.rank-explain-info{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;border:1.3px solid currentColor;font-size:10px;font-weight:700;line-height:1;letter-spacing:0;flex-shrink:0}
.rank-explain[open] .rank-explain-info{color:var(--green-ink)}
.rank-explain-body{display:grid;gap:var(--s1);padding-top:var(--s2);font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}
.rank-explain-body p{text-wrap:balance}

/* alert */
.alert{border-radius:var(--r-m);background:var(--tile);margin-top:calc(-1 * var(--s3))}
.alert summary{list-style:none;display:flex;align-items:center;gap:var(--s2);min-height:48px;padding:0 var(--s3);font-size:var(--t1);font-weight:600;line-height:var(--l1);letter-spacing:-.006em;cursor:pointer;border-radius:inherit}
.alert summary::-webkit-details-marker{display:none}
.alert summary .chev{margin-left:auto;color:var(--ink2);transition:transform .3s var(--ease)}
.alert[open] summary .chev{transform:rotate(180deg)}
.alert-ok{padding:0 var(--s3) var(--s3)}
.alert form{display:grid;gap:var(--s3);padding:0 var(--s3) var(--s3)}
.fields{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s2)}
.field{display:grid;gap:var(--s1);min-width:0}
.field label{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}
.field input{appearance:none;width:100%;height:48px;padding:0 12px;border:0;border-radius:var(--r-s);background:var(--field);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--t2);transition:box-shadow .2s}
.field input::placeholder{color:var(--ink2);opacity:1}
.field input:focus{outline:0;box-shadow:inset 0 0 0 2px var(--navy)}
.field input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--err)}
.err{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--err)}
.note{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}
.done{display:flex;gap:var(--s2);font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink)}
.done .icon{margin-top:3px;color:var(--green-ink)}

/* secties */
.pp-main>section{margin-top:var(--s6);scroll-margin-top:96px}
.waar{margin-top:var(--s6);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s5);align-items:start}
.waar>section{min-width:0;scroll-margin-top:96px}

/* winkelrijen: de stijl van de prijsbubble */
.offers-head{margin-bottom:var(--s2);font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;font-weight:600}
.offers{display:grid;gap:var(--s2)}
.offers+.offers-head{margin-top:var(--s4)}
a.offer,a.alt{text-decoration:none;color:inherit}
a.btn{text-decoration:none}
.p-sub .plate img{height:calc(var(--h)*.72)}
/* vaste hoogte voor het winkellogo: een hoger logo duwt de keuzeknoppen niet meer weg (A3, 03-11) */
.p-sub .plate{height:24px;align-items:center;justify-content:center}
.p-sub .plate img{max-height:24px;object-fit:contain}
/* door de browser zelf gemaakte links (adres, telefoon, kaarten) zijn geen links op deze pagina (A6) */
a[x-apple-data-detectors],a[href^="tel:"]:not(.bewust),a[href^="maps:"]{color:inherit!important;text-decoration:none!important;pointer-events:none}
.sizes.vier .size{min-width:0}
@media (min-width:1280px){.sizes.vier{grid-template-columns:repeat(4,minmax(0,1fr))}.sizes.vier .size{padding:8px 10px}.sizes.vier small{white-space:nowrap;letter-spacing:-.012em}}
/* productkaart past op 100% in beeld (eigenaar 02-11): de foto is even hoog als de koopkolom */
@media (min-width:901px){
  .gal{align-self:stretch;display:grid}
  .tile{aspect-ratio:auto}
  .buybox{gap:20px;padding-top:20px}
  .moment{gap:var(--s1);padding:12px var(--s3)}
  .size{padding:8px 12px}
}
@media (min-width:1280px){
  .sizes:has(>.size.tint:nth-child(5)),.sizes:not(.vier):has(>.size:not(.tint):nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .sizes:not(.vier):has(>.size:not(.tint):nth-child(3):last-child) b{font-size:var(--t1);white-space:nowrap}
  /* vijf of meer configuraties: alleen de naam in de knop, de prijs staat groot in het prijsblok */
  .sizes:has(>.size:not(.tint):nth-child(5)) small{display:none}
  .sizes:has(>.size:not(.tint):nth-child(5)) b{font-size:var(--t1);white-space:nowrap}
}
.offer{appearance:none;width:100%;text-align:left;cursor:pointer;display:grid;grid-template-columns:104px minmax(0,1fr) auto 16px;column-gap:var(--s3);align-items:center;padding:12px var(--s3);border-radius:var(--r-m);border:1px solid var(--line);background:var(--card2);color:var(--ink);transition:border-color .2s,transform .2s var(--ease)}
.offer:hover{border-color:var(--ink2)}
.offer:active{transform:scale(.995)}
.offer.best{border-color:var(--line2);background:var(--card);box-shadow:var(--sh1)}
.o-logo{display:flex;align-items:center}
.o-logo img{height:var(--h,20px);width:auto;display:block}
.o-lev{min-width:0;font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}
.o-lev span{display:block}
.o-prijs{text-align:right;font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.o-prijs b{display:block;font:700 var(--t2)/var(--l2s) var(--text);letter-spacing:-.008em;color:var(--navy)}
.offer.best .o-prijs b{color:var(--green-ink)}
.offer.best .o-noot{color:var(--green-ink);font-weight:600}
.o-pijl{width:16px;height:16px;color:var(--ink2)}
.offers-foot{display:flex;gap:var(--s2);margin-top:var(--s3);font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}
.offers-foot i{flex:none;width:8px;height:8px;margin-top:7px;border-radius:50%;background:var(--green-z)}
.none{padding:var(--s4);border-radius:var(--r-l);background:var(--tile);display:grid;gap:var(--s1)}
.none b{font:800 var(--t2)/var(--l2s) var(--display);color:var(--navy)}
.none p{color:var(--ink2)}

/* grafiek */
.ranges{display:inline-flex;justify-self:start;padding:3px;border-radius:999px;background:var(--tile)}
.ranges button{appearance:none;border:0;background:none;min-height:34px;padding:0 var(--s3);border-radius:999px;font-size:var(--t1);letter-spacing:-.006em;color:var(--ink2);cursor:pointer;transition:background .2s,color .2s}
.ranges button:hover{color:var(--ink)}
.ranges button[aria-pressed="true"]{background:var(--bg);color:var(--ink)}
.chart{position:relative;touch-action:pan-y;border-radius:8px}
.chart svg{display:block;width:100%;overflow:visible}
.chart text{font:400 var(--t1) var(--text);fill:var(--ink2);font-variant-numeric:tabular-nums}
.chart text.lbl{font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.tip{position:absolute;top:0;left:0;padding:var(--s1) 10px;border-radius:var(--r-s);background:var(--navy);color:var(--bg);font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;font-variant-numeric:tabular-nums;z-index:2}
.tip b{font-weight:600}
.tip.on{opacity:1}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
.facts dt{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}
.facts dd{font-size:var(--t2);line-height:var(--l2s);font-weight:600;font-variant-numeric:tabular-nums}
.facts dd small{display:block;font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;font-weight:400;color:var(--ink2)}
.facts+.vl-tabel{margin-top:var(--s2)}   /* 06-11 eigenaar: iets meer lucht tussen "90 dagen" en de lijn van het prijsoverzicht */

/* over + plus/min */
.two{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--s5);align-items:start}
.prose{display:grid;gap:var(--s3);max-width:62ch}
.prose .sec-top{margin-bottom:var(--s3)}
.pm{display:grid;gap:var(--s4)}
.pm h3{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;font-weight:600;margin-bottom:var(--s2)}
.pm ul{display:grid;gap:var(--s2)}
.pm li{display:flex;gap:var(--s2);line-height:var(--l2s)}
.pm li .icon{margin-top:5px;font-size:14px}
.pm .plus .icon{color:var(--green-ink)}
.pm .min .icon{color:var(--ink2)}
.pm .src{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}

/* specs */
.specs div{display:flex;justify-content:space-between;gap:var(--s3);padding:12px 0;border-bottom:1px solid var(--line)}
.specs dt{color:var(--ink2)}
.specs dd{text-align:right;font-variant-numeric:tabular-nums;text-wrap:balance;min-width:0}
.specs dt{flex:none}

/* alternatieven */
.revs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.rev{display:grid;grid-template-rows:auto 1fr auto;gap:var(--s2);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-s)}
.rev-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.rev h3{font-size:var(--t2);line-height:var(--l2s);font-weight:700;color:var(--navy)}
.rev-top p{font-size:var(--t2);line-height:var(--l2s);font-weight:700;color:var(--navy)}
.rev ul{display:grid;align-content:start;gap:var(--s1);list-style:none;margin:0;padding:0}
.rev li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:var(--s2);align-items:start;font-size:var(--t1);line-height:var(--l1)}
.rev li .icon{width:16px;height:16px;margin-top:3px;color:var(--ink2)}
.rev .src{font-size:var(--t1);line-height:var(--l1);color:var(--ink2)}
.rev .src a{color:inherit}
@media (max-width:720px){.revs{grid-template-columns:minmax(0,1fr)}}
.alts{display:grid;gap:var(--s2)}
.alt{appearance:none;width:100%;text-align:left;cursor:pointer;display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s3);align-items:center;padding:var(--s2) var(--s3) var(--s2) var(--s2);border:1px solid var(--line);border-radius:var(--r-m);background:var(--card2);overflow:hidden;color:var(--ink);transition:border-color .2s}
.alt:hover{border-color:var(--ink2)}
.alt img{width:100%;aspect-ratio:1;object-fit:contain;display:block;border-radius:var(--r-s);background:#fff;padding:4px}
.alt span{display:block}
.alt .tag{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}
.alt .nm{font:800 var(--t2)/var(--l2s) var(--display);letter-spacing:-.012em;color:var(--navy)}
.alt .df{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}
.alt .pr{margin-top:var(--s1);font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;font-weight:600;color:var(--ink)}

/* vragen */
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0;font-weight:600;line-height:var(--l2s);cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary .icon{color:var(--ink2);transition:transform .3s var(--ease)}
.faq-list details[open] summary .icon{transform:rotate(180deg)}
.faq-list p{padding:0 var(--s4) var(--s3) 0;color:var(--ink2)}

/* verantwoording */
.acc>div+div{margin-top:var(--s3)}
.acc h3{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;font-weight:600;margin-bottom:var(--s1)}
.acc p{font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}


.mobibuy{display:none}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);padding:10px var(--s3);border-radius:999px;background:var(--navy);color:var(--bg);font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease);z-index:40;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1100px){
  .hero{column-gap:var(--s4)}
  .local nav{display:none}
  .waar,.two{column-gap:var(--s4)}
}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "gal" "buy";grid-template-rows:none}
  .head{padding-top:0;margin-bottom:var(--s3)}
  .gal{position:static}
    .waar,.two{grid-template-columns:minmax(0,1fr);row-gap:var(--s5)}
  .pp-main>section,.waar{margin-top:var(--s5)}
}
@media (max-width:760px){
  :root{--t1:14px;--l1:20px;--t2:16px;--l2:24px;--l2s:22px;--t3:20px;--l3:26px;--t4:28px;--l4:32px;--t5:44px;--l5:48px;--s4:24px;--s5:48px;--s6:64px;--r-l:16px;--r-m:12px}
  .btn{min-height:48px}
  .tile{aspect-ratio:4/3}
  .moment{padding:12px}
  .seg i{height:6px}
  .size{padding:8px 12px}
  .size.tint{min-height:44px}
  .trust summary,#ranges button,.rank-explain-body a{position:relative}
  .trust summary::after,#ranges button::after,.rank-explain-body a::after{content:"";position:absolute;inset:-12px 0}
  #ranges button::after{inset:-5px 0}
  .offer{padding:8px 12px}
  .o-logo img{height:calc(var(--h,20px)*.85)}
  .p-sub{min-height:20px}
  .specs div{padding-block:8px}
  .faq-list summary{padding-block:12px}
  .faq-list p{padding-bottom:12px}
  .alt{grid-template-columns:72px minmax(0,1fr);gap:12px}
  .mobibuy{padding-block:8px}
  .local{display:none}
  .mobibuy{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:var(--bar);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-top:1px solid var(--line);transform:translateY(101%);transition:transform .35s var(--ease)}
  .mobibuy.on{transform:none}
  .mobibuy b{display:block;font:700 var(--t3)/var(--l2) var(--text);letter-spacing:-.012em;color:var(--navy)}
  .mobibuy small{display:block;font-size:var(--t1);line-height:var(--l1);letter-spacing:-.006em;color:var(--ink2)}
  .mobibuy small[data-s="laag"]{color:var(--green-ink);font-weight:600}
  .mobibuy small[data-s="hoog"]{color:var(--amber-ink);font-weight:600}
  .mobibuy small[data-s="normaal"]{font-weight:600}
  .mobibuy .btn{min-height:44px;padding:0 var(--s3)}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:480px){
  .offer{grid-template-columns:minmax(0,1fr) auto;row-gap:var(--s2)}
  .o-pijl{display:none}
  .o-lev{grid-column:1/-1;grid-row:2;display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:var(--s3);padding-top:var(--s2);border-top:1px solid var(--line)}
}
@media (max-width:400px){
  .size{padding-inline:12px}
}
@media (max-width:340px){
  .moment{margin-inline:calc(-1 * var(--s2));padding:12px var(--s2)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* header, footer en kruimelpad: live HTML en CSS van koopmaat.com */
.site-header,.site-footer,.ranking-breadcrumb{--dur:200ms;--dur-slow:350ms;--ease:cubic-bezier(0.4,0,0.2,1);--shadow-3:0 4px 8px rgba(31,58,95,0.06),0 8px 24px rgba(31,58,95,0.06);--w-wide:1000px;--c-surface-raised:#ffffff;--c-surface:#f6f7fa;--c-border:#e2e5ea;--c-border-light:#eceef2;--c-text:#2c3442;--c-text-secondary:#636e7f;--c-text-tertiary:#6b7280;--c-accent:#2b8369;--c-accent-soft:#e6f4f0;--c-focus:#3fa38a;--c-bg:#fdfdfe;--c-primary:#1f3a5f;--s-4:4px;--s-8:8px;--s-12:12px;--s-16:16px;--s-20:20px;--s-24:24px;--s-32:32px;--s-40:40px;--r-sm:8px;--font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;--font-display:'Nunito',var(--font)}
.site-header,.site-footer{font:400 16px/1.6 var(--font);letter-spacing:normal}
.site-header .container,.site-footer .container{width:100%;max-width:var(--w-wide);margin:0 auto;padding:0 var(--s-20)}
:where(.site-header,.site-footer) a{text-decoration:none}
.site-header{position: sticky;top: 0;z-index: 100;background: var(--c-bg);border-bottom: 1px solid var(--c-border-light)}
.header-inner{display: flex;align-items: center;justify-content: center;height: 56px;position: relative}
.site-logo{display: flex;align-items: center;flex-shrink: 0;-webkit-tap-highlight-color: transparent}
.site-logo .custom-logo-link{-webkit-tap-highlight-color: transparent;outline: none;border-radius: 50%}
.site-logo .custom-logo-link:focus-visible{outline: 2px solid var(--c-focus);outline-offset: 4px;border-radius: 50%}
.site-logo .custom-logo-link:active{transform: scale(0.88);transition: transform 0.1s}
.site-logo .custom-logo-link{display: flex;align-items: center;line-height: 0}
.site-logo .custom-logo-link img, .site-logo .custom-logo{display: block;max-height: 44px;width: auto;height: auto;object-fit: contain}
.search-toggle{position: absolute;left: 0;top: 50%;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;background: none;border: none;cursor: pointer;padding: var(--s-8);border-radius: var(--r-sm);color: var(--c-primary);-webkit-tap-highlight-color: transparent;transition: color var(--dur) var(--ease)}
.search-toggle:hover{color: var(--c-accent)}
.search-overlay{position: absolute;top: 100%;left: 0;right: 0;background: var(--c-surface-raised);box-shadow: var(--shadow-3);padding: var(--s-12) 0;transform: translateY(-8px);opacity: 0;pointer-events: none;transition: opacity var(--dur) var(--ease),transform var(--dur) var(--ease);z-index: 200}
.search-overlay.is-open{opacity: 1;transform: translateY(0);pointer-events: auto}
.search-bar{display: flex;align-items: center;gap: var(--s-8);background: var(--c-surface);border: 1px solid var(--c-border);border-radius: var(--r-sm);padding: var(--s-8) var(--s-12)}
.search-bar:focus-within{border-color: var(--c-accent);box-shadow: 0 0 0 3px var(--c-accent-soft)}
.search-bar-icon{flex-shrink: 0;color: var(--c-text-tertiary)}
.search-input{flex: 1;border: none;background: none;font-family: var(--font);font-size: 14px;color: var(--c-text);outline: none;min-width: 0}
.search-input::placeholder{color: var(--c-text-tertiary)}
.search-close{background: none;border: none;font-size: 20px;color: var(--c-text-tertiary);cursor: pointer;padding: 0 var(--s-4);line-height: 1}
.search-results{max-height: 320px;overflow-y: auto}
.search-results:empty{display: none}
.menu-toggle{position: absolute;right: 0;top: 50%;transform: translateY(-50%);display: flex;flex-direction: column;gap: 4px;background: none;border: none;cursor: pointer;padding: var(--s-8);border-radius: var(--r-sm)}
.menu-toggle span{display: block;width: 18px;height: 2px;background: var(--c-primary);border-radius: 1px;transition: transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform: translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity: 0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform: translateY(-6px) rotate(-45deg)}
.site-nav{position: fixed;top: 56px;left: 0;right: 0;bottom: 0;background: var(--c-bg);padding: var(--s-24) var(--s-20);transform: translateX(100%);transition: transform var(--dur-slow) var(--ease);z-index: 100;overflow-y: auto;-webkit-overflow-scrolling: touch;overscroll-behavior: contain}
.site-nav.is-open{transform: translateX(0)}
.nav-backdrop{position: fixed;inset: 0;background: rgba(15,23,42,0.42);opacity: 0;pointer-events: none;transition: opacity var(--dur) var(--ease);z-index: 99}
.nav-backdrop.is-open{opacity: 1;pointer-events: auto}
.nav-list li + li{border-top: 1px solid var(--c-border-light)}
.nav-list a{display: block;padding: var(--s-16) 0;font-size: 15px;font-weight: 500;color: var(--c-primary);transition: color var(--dur) var(--ease);text-decoration: none}
.nav-list a:hover{color: var(--c-accent)}
.menu-parent-row{display: flex;align-items: center;justify-content: space-between;gap: var(--s-8)}
.menu-parent-row a{flex: 1}
.menu-parent-toggle{background: none;border: none;padding: var(--s-16) var(--s-12);cursor: pointer;color: var(--c-text-secondary);display: inline-flex;align-items: center;justify-content: center;transition: color var(--dur) var(--ease);-webkit-tap-highlight-color: transparent}
.menu-parent-toggle:hover{color: var(--c-primary)}
.menu-parent-chevron{width: 8px;height: 8px;border-right: 2px solid currentColor;border-bottom: 2px solid currentColor;transform: rotate(45deg);transition: transform var(--dur) var(--ease);margin-top: -3px}
.menu-item-has-children[aria-expanded="true"] .menu-parent-chevron{transform: rotate(-135deg);margin-top: 3px}
.nav-list .sub-menu{list-style: none;padding: 0;margin: 0 0 0 var(--s-16);border-left: 2px solid var(--c-border-light);max-height: 0;overflow: hidden;transition: max-height 0.3s var(--ease)}
.menu-item-has-children[aria-expanded="true"] > .sub-menu{max-height: 600px}
.nav-list .sub-menu li{border-top: none}
.nav-list .sub-menu li + li{border-top: 1px solid var(--c-border-light)}
.nav-list .sub-menu a{padding: var(--s-12) var(--s-16);font-size: 14px;color: var(--c-text-secondary)}
.nav-list .sub-menu a:hover{color: var(--c-primary)}
.nav-list > .menu-divider-before{margin-top: var(--s-16);padding-top: var(--s-8)}
.nav-list > .menu-item-type-post_type a{font-size: 13px;font-weight: 400;color: var(--c-text-secondary)}
.ranking-breadcrumb{display: flex;flex-wrap: wrap;align-items: center;gap: var(--s-4);font-size: 13px;color: var(--c-text-secondary);margin-bottom: var(--s-16)}
.ranking-breadcrumb a{color: var(--c-text-secondary);text-decoration: none;transition: color var(--dur) var(--ease)}
.ranking-breadcrumb a:hover{color: var(--c-primary)}
.ranking-breadcrumb a:last-child{color: var(--c-primary);font-weight: 600}
.ranking-breadcrumb .sep{opacity: 0.4}
.ranking-breadcrumb-legacy{display: inline-flex;align-items: center;gap: var(--s-4);font-size: 13px;color: var(--c-accent);font-weight: 500;margin-bottom: var(--s-24);transition: opacity var(--dur) var(--ease)}
.ranking-breadcrumb-legacy:hover{opacity: 0.7}
.site-footer{margin-top: auto;background: var(--c-primary);color: rgba(255,255,255,0.65);padding: var(--s-40) 0 var(--s-32);text-align: center}
.footer-logo{margin-bottom: var(--s-24);display: flex;flex-direction: column;align-items: center;gap: var(--s-4)}
.footer-wordmark{font-family: var(--font-display);font-size: 32px;font-weight: 800;letter-spacing: -0.02em;line-height: 1;color: #fff;text-decoration: none;transition: opacity var(--dur) var(--ease)}
.footer-wordmark:hover{opacity: 0.85}
.footer-wordmark span{color: var(--c-accent)}
.footer-tagline{font-size: 12px;color: rgba(255,255,255,0.55);letter-spacing: 0.03em}
.footer-disclosure{font-size: 12px;max-width: 400px;margin: 0 auto var(--s-20);line-height: 1.65;opacity: 0.55}
.footer-nav{display: flex;justify-content: center;gap: var(--s-24);margin-bottom: var(--s-20)}
.footer-nav a{font-size: 13px;font-weight: 500;color: rgba(255,255,255,0.6);transition: color var(--dur) var(--ease)}
.footer-nav a:hover{color: rgba(255,255,255,0.95)}
.footer-copyright{font-size: 11px;opacity: 0.35;letter-spacing: 0.01em}
.footer-bottom{display: grid;grid-template-columns: 1fr auto 1fr;align-items: center;gap: var(--s-16);margin-top: var(--s-20);padding-top: var(--s-16);border-top: 1px solid rgba(255,255,255,0.1)}
.footer-trustpilot{grid-column: 2;justify-self: center;flex-shrink: 0}
.tp-badge{display: inline-flex;align-items: center;gap: 10px;padding: 8px 16px;border-radius: 999px;background: rgba(255,255,255,0.05);border: 1px solid rgba(255,255,255,0.09);color: rgba(255,255,255,0.9);font-size: 12px;letter-spacing: 0.01em;text-decoration: none;transition: background 0.18s ease,border-color 0.18s ease,transform 0.18s ease;white-space: nowrap}
.tp-badge:hover{background: rgba(255,255,255,0.09);border-color: rgba(255,255,255,0.16);transform: translateY(-1px);color: #fff}
.tp-stars{display: inline-flex;gap: 1px;line-height: 0}
.tp-star{position: relative;display: inline-block;width: 14px;height: 14px;line-height: 0}
.tp-star .tp-star-bg, .tp-star .tp-star-fg{position: absolute;inset: 0;height: 100%}
.tp-star .tp-star-bg{width: 100%}
.tp-star .tp-star-fg{width: 14px;clip-path: inset(0 calc(100% - var(--tp-fill,100%)) 0 0)}
.tp-star .tp-star-bg svg, .tp-star .tp-star-fg svg{display: block}
.tp-text{font-size: 12px;line-height: 1.2}
.tp-text strong{color: #00B67A;font-weight: 600;letter-spacing: 0.02em}
.footer-meta{text-align: right;display: flex;flex-direction: column;gap: var(--s-4);grid-column: 3;justify-self: end}
.site-nav .kw-start--nav{display: inline-flex;align-items: center;gap: 6px;background: #2b8369;color: #fff;border: 0;border-radius: 999px;padding: 8px 16px;font-size: 14px;font-weight: 600;cursor: pointer;transition: background var(--dur) var(--ease),transform var(--dur) var(--ease);line-height: 1.2;white-space: nowrap}
.site-nav .kw-start--nav:hover{background: #24735b;transform: translateY(-1px)}
.site-nav .kw-start--nav svg{flex-shrink: 0}
.site-nav .kw-start--nav{width: 100%;justify-content: center;padding: 12px 20px;font-size: 15px;margin-bottom: var(--s-12)}
.footer-copyright-privacy{color: inherit;font-size: 11px;margin-left: 1.5em;text-decoration: underline;opacity: 0.55}
.footer-copyright-privacy:hover{opacity: 0.9}
.footer-legal{font-size: 11px;opacity: 0.3;letter-spacing: 0.02em;margin-top: var(--s-8,8px)}
.site-nav{padding-top: var(--s-16)}
.site-nav .kw-start--nav{margin-bottom: var(--s-12)}
.nav-list{border-top: 1px solid var(--c-border-light)}
.sub-menu .menu-group-header{list-style:none;padding:13px 20px 3px;pointer-events:none;border:0}
.sub-menu .menu-group-header span{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#9aa3b2}
.sub-menu li.menu-group-header:first-child{padding-top:4px}
.nav-list .sub-menu li.menu-section-label{padding:14px 16px 4px;pointer-events:none;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--c-text-secondary);opacity:.72}
.nav-list .sub-menu li.menu-section-label:first-child{padding-top:6px;border-top:0}
.nav-list .sub-menu li.menu-section-label + li{border-top:0}
.nav-list .menu-item-has-children[aria-expanded="true"] > .sub-menu{max-height:2500px}
@media (max-width: 719px){
.nav-backdrop{display: none}
}
@media (min-width: 720px){
.site-nav{left: auto;right: 0;width: min(300px,80vw);border-left: 1px solid var(--c-border-light);box-shadow: -12px 0 40px rgba(0,0,0,0.12)}
}
@media (min-width: 960px){
.site-nav{width: min(360px,86vw)}
}
@media (min-width: 640px){
.header-inner{height: 64px}
.site-nav{top: 64px}
}
@media (max-width: 640px){
.footer-copyright{line-height: 1.8}
.footer-copyright-privacy{margin-left: 1em}
.footer-bottom{grid-template-columns: 1fr}
.footer-trustpilot{grid-column: 1;justify-self: center;width: auto}
.footer-meta{text-align: center;grid-column: 1;justify-self: center}
.tp-badge{padding: 7px 14px;gap: 8px;font-size: 11px}
.tp-text{font-size: 11px}
}

/* aansluiting op deze pagina */
.site-footer{margin-top:var(--s6)}
.ranking-breadcrumb{padding-top:24px}
@media (min-width:901px){.ranking-breadcrumb{padding-top:12px}}
.ranking-breadcrumb [aria-current]{color:var(--c-primary);font-weight:600}
.nav-open .local{visibility:hidden}
.site-nav:not(.is-open){box-shadow:none}
@media (max-width:900px){.site-footer{margin-top:var(--s5)}}
@media (max-width:760px){.site-footer{padding-bottom:calc(var(--s-32) + 72px + env(safe-area-inset-bottom,0px))}}
.guide[hidden]{display:none}

/* Eerste scherm op de telefoon (eigenaar 02-11). Foto als decor in een vaste neutrale tint, kleurbubbels over de foto, de rest op een zwevende kaart.
   De fotomaat hangt alleen af van het scherm, niet van de kaart: anders springt de foto bij een uitvoering zonder aanbod. Kaart en bleed zijn richtmaten. */
.kl-naam,.kruimel-m,.m-kort{display:none}
@media (max-width:760px){
  body.single-kpm_product .site-header{background:var(--photo);border-bottom-color:transparent;transition:background-color .2s}
  body.single-kpm_product .custom-logo{mix-blend-mode:multiply}
  body.single-kpm_product.pp-voorbij .site-header{background:var(--c-bg);border-bottom-color:var(--c-border-light)}
  #kruimel,.brand,.m-ref,.m-lang{display:none}
  .m-kort{display:inline}
  .kruimel-m{display:flex;padding-top:var(--s3)}
  .alert{margin-top:12px}
  .hero{--vh:var(--vh-vast,100svh);--kop:57px;--kaart:306px;--bleed:96px;--foto-h:clamp(220px,min(calc(var(--vh) - var(--kop) - 68px - var(--kaart) + var(--bleed)),100vw),520px);position:relative;display:flex;flex-direction:column;align-items:stretch;min-height:calc(var(--vh) - var(--kop));margin-inline:calc(-1 * var(--gut));padding:6px 8px 8px;background:var(--photo);overflow:hidden}
  .hero:has(#o-opslag[hidden]){--kaart:246px}
  /* een tweede keuzerij (werkgeheugen of 5G, 2.5) maakt de kaart één rij hoger */
  .hero:has(#o-ram:not([hidden])),.hero:has(#o-net:not([hidden])){--kaart:362px}
  .hero:has(#o-opslag[hidden]):has(#o-ram:not([hidden])),.hero:has(#o-opslag[hidden]):has(#o-net:not([hidden])){--kaart:306px}
  #o-ram:not([hidden]),#o-net:not([hidden]){margin-top:6px}
  .head{position:relative;z-index:1;display:block;margin:0;padding:0 8px;text-align:center}
  .head h1{text-box:normal;font-size:var(--t4);line-height:var(--l4);letter-spacing:-.018em}
  .guide{display:inline-block;margin-top:2px;line-height:22px}
  .gal{flex:1 0 auto;position:relative;top:auto;min-height:120px;margin-top:6px}
  .tile{position:absolute;top:0;left:0;right:0;height:var(--foto-h);aspect-ratio:auto;max-width:none;border-radius:0;background:none;overflow:visible}
  .tile img{inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 30%;filter:drop-shadow(0 18px 28px rgba(31,58,95,.22))}
  .buybox{position:relative;z-index:2;display:block;width:100%;max-width:560px;margin-inline:auto;padding:16px 16px 12px;border-radius:28px;background:var(--bg)}
  .opt{position:static;display:block}

  #o-kleur{position:absolute;left:0;bottom:calc(100% + 8px);display:flex;align-items:center;gap:0;max-width:100%;height:48px;padding:0 18px 0 4px;border-radius:999px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);overflow-x:auto;scrollbar-width:none}
  #o-kleur::-webkit-scrollbar{display:none}
  #o-kleur .size{flex:none;display:grid;grid-template-columns:none;place-items:center;width:44px;height:44px;min-height:0;padding:0;border-radius:50%;box-shadow:none}
  #o-kleur .size:has(input:focus-visible){outline-offset:-2px}
  #o-kleur .size i{width:26px;height:26px;box-shadow:inset 0 0 0 1px rgba(26,42,62,.14)}
  #o-kleur .size:has(input:checked) i{outline:2px solid var(--navy);outline-offset:2px}
  #o-kleur .size b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .kl-naam{display:block;flex:none;margin-left:6px;font-size:var(--t1);line-height:var(--l1);font-weight:600;color:var(--navy);white-space:nowrap}

  :is(#o-opslag,#o-ram,#o-net){display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;padding:4px;border-radius:18px;background:var(--tile)}
  #o-kleur:empty{display:none}
  :is(#o-opslag,#o-ram,#o-net):empty{height:56px;background:none}
  :is(#o-opslag,#o-ram,#o-net) .size{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;height:48px;padding:0 2px;border-radius:14px;box-shadow:none;text-align:center}
  :is(#o-opslag,#o-ram,#o-net) .size b{font-size:var(--t1);line-height:18px;color:var(--navy);white-space:nowrap}
  :is(#o-opslag,#o-ram,#o-net) .size small{font-size:12px;line-height:16px;letter-spacing:-.01em;white-space:nowrap}
  :is(#o-opslag,#o-ram,#o-net) .size:has(input:checked){background:var(--bg);box-shadow:inset 0 0 0 2px var(--navy)}
  :is(#o-opslag,#o-ram,#o-net) .size:has(input:disabled){background:none}
  /* vier of meer lange namen passen niet naast elkaar: de rij schuift, zodat de kaart even hoog blijft en de knop in beeld */
  :is(#o-opslag,#o-ram,#o-net):not(.vier):has(>.size:nth-child(4)){grid-auto-columns:minmax(max-content,1fr);overflow-x:auto;scrollbar-width:none}
  :is(#o-opslag,#o-ram,#o-net):not(.vier):has(>.size:nth-child(4))::-webkit-scrollbar{display:none}
  :is(#o-opslag,#o-ram,#o-net):not(.vier):has(>.size:nth-child(4)) .size{padding:0 12px}
  :is(#o-opslag,#o-ram,#o-net):has(>.size:nth-child(5)) .kort-weg{display:none}
  :is(#o-opslag,#o-ram,#o-net).meer-l{--l:36px}
  :is(#o-opslag,#o-ram,#o-net).meer-r{--r:36px}
  :is(#o-opslag,#o-ram,#o-net).meer-l,:is(#o-opslag,#o-ram,#o-net).meer-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--l,0px),#000 calc(100% - var(--r,0px)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--l,0px),#000 calc(100% - var(--r,0px)),transparent)}

  .moment{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;column-gap:12px;row-gap:0;margin-top:16px;padding:0;border-radius:0;background:none}
  .moment:has(#m-t:empty){min-height:64px}
  .verdict{text-box:normal;font-size:var(--t2);line-height:20px;letter-spacing:-.008em;white-space:nowrap}
  .moment p{white-space:nowrap}
  .moment[data-s="weg"] p,.moment[data-s="nieuw"] p{flex-basis:100%;white-space:normal}
  .scale{flex:1 0 100%;margin-top:8px}
  .seg{gap:var(--s1)}
  .seg i{background:var(--tile2)}
  .scale .seg i{border-radius:3px}
  .seg span{font-size:12px;line-height:16px;letter-spacing:0}

  .price{grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:0;align-items:end;margin-top:16px}
  .amount{margin:0;text-box:normal;line-height:44px;letter-spacing:-.026em;white-space:nowrap}
  .p-sub{display:grid;grid-template-columns:minmax(0,1fr) auto;justify-items:end;align-items:center;column-gap:6px;row-gap:2px;min-height:0;padding-bottom:3px;white-space:nowrap}
  .p-t{grid-row:1;grid-column:1}
  .p-sub .plate{grid-row:1;grid-column:2}
  .p-sub img{height:clamp(12px,calc(var(--h,20px) * .72),20px)}
  .price>.btn{grid-column:1/-1;margin-top:12px;min-height:52px}
  .price>.trust{grid-column:1/-1;margin-top:10px}
  .trust summary{justify-content:center;gap:6px;font-size:12px;line-height:16px;letter-spacing:0}
  .buybox>*:last-child{margin-bottom:0}
}
@media (min-width:640px) and (max-width:760px){.hero{--kop:65px}}
@media (max-width:760px) and (max-height:600px){
  .guide{display:none}
  .head h1{font-size:var(--t3);line-height:var(--l3)}
  .hero{--kaart:250px;--bleed:64px}
  .hero:has(#o-ram:not([hidden])),.hero:has(#o-net:not([hidden])){--kaart:306px}
  .hero:has(#o-opslag[hidden]):has(#o-ram:not([hidden])),.hero:has(#o-opslag[hidden]):has(#o-net:not([hidden])){--kaart:250px}
  #o-ram:not([hidden]),#o-net:not([hidden]){margin-top:4px}
  .buybox{padding:10px 12px 8px}
  .moment,.price{margin-top:10px}
  :is(#o-opslag,#o-ram,#o-net) .size{height:44px}
  .price>.btn{min-height:48px;margin-top:8px}
  .price>.trust{margin-top:8px}
  .amount{font-size:var(--t4);line-height:var(--l4);letter-spacing:-.018em}
}
@media (max-width:359px){
  .amount{font-size:var(--t4);line-height:var(--l4);letter-spacing:-.018em}
  .buybox{padding-inline:12px}
  .kort-weg{display:none}
  #o-kleur .size{width:38px}
  :is(#o-opslag,#o-ram,#o-net) .size small{font-size:11px}
  :is(#o-opslag,#o-ram,#o-net):not(.vier) .size b{font-size:12px}
  .moment p{white-space:normal}
}
@media (max-width:340px){.moment{margin-inline:0;padding:0}}
@supports not (height:100svh){@media (max-width:760px){.hero{--vh:var(--vh-vast,100vh)}}}

/* ---- Vaste testbank 03-11 (scripts/pp_bank.py): wat de grensgevallen vonden ---- */
/* knoppen die niet naast elkaar passen schuiven, op elke breedte; het script zet .schuif na meten */
:is(#o-opslag,#o-ram,#o-net).schuif{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr);overflow-x:auto;scrollbar-width:none}
:is(#o-opslag,#o-ram,#o-net).schuif::-webkit-scrollbar{display:none}
:is(#o-opslag,#o-ram,#o-net).schuif .size{padding-inline:12px}
:is(#o-opslag,#o-ram,#o-net).schuif .size b,:is(#o-opslag,#o-ram,#o-net).schuif .size small{white-space:nowrap}
.o-logo{min-width:0}
.plate.naam{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;align-items:center;padding:0 6px;font-size:var(--t1);line-height:var(--l1);font-weight:600;color:var(--navy);white-space:nowrap}
.facts{display:flex;flex-wrap:wrap}
.facts>div{flex:1 0 28%}
.facts dd{white-space:nowrap}
.specs dt{flex:0 1 auto;max-width:48%;overflow-wrap:anywhere}
.specs dd{flex:1 1 0;overflow-wrap:anywhere}
.size.tint b{overflow-wrap:anywhere;hyphens:auto}
/* naam van meer dan 32 tekens (het sjabloon zet .lang): een maat kleiner, zodat koopblok en knop in beeld blijven (P16, P18) */
.head h1.lang{font-size:var(--t3);line-height:var(--l3)}
/* op desktop krijgt zo'n naam twee regels: een maat kleiner (als op de telefoon) en kleinere tussenruimte in de kop houden de knop boven de vouw (P16, 05-11) */
@media (min-width:901px){.head:has(h1.lang){gap:var(--s2)}.head h1.lang{font-size:20px;line-height:24px}}
@media (min-width:761px){
  /* zeven of meer kleuren: alleen bolletjes, met de naam van de gekozen kleur ernaast */
  #o-kleur:has(>.size:nth-child(7)){display:flex;flex-wrap:wrap;align-items:center;gap:4px}
  #o-kleur:has(>.size:nth-child(7)) .size{display:grid;grid-template-columns:none;place-items:center;width:40px;height:40px;min-height:0;padding:0;border-radius:50%;box-shadow:none}
  #o-kleur:has(>.size:nth-child(7)) .size i{width:24px;height:24px}
  #o-kleur:has(>.size:nth-child(7)) .size:has(input:checked) i{outline:2px solid var(--navy);outline-offset:2px}
  #o-kleur:has(>.size:nth-child(7)) .size b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  #o-kleur:has(>.size:nth-child(7)) .kl-naam{display:block;margin-left:6px;font-size:var(--t1);line-height:var(--l1);font-weight:600;color:var(--navy)}
}
@media (max-width:760px){
  /* prijs en verzendregel naast elkaar als het past, anders de regel eronder */
  .price{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;column-gap:12px}
  .price>.btn,.price>.trust{flex:1 0 100%}
  .amount{flex:none}
  .p-sub{flex:0 1 auto;margin-left:auto}
  .mobibuy>div{flex:none}
  /* zonder aanbod is de kaart korter: dan sluit hij aan op de foto in plaats van onderaan te blijven, anders valt er een gat */
  .tile img{transform:translateY(var(--foto-y,0px))}
  .hero:has(#moment[data-s="weg"]){min-height:0}
  .hero:has(#moment[data-s="weg"]) .gal{flex:0 0 calc(var(--foto-h) - var(--bleed))}
  .mobibuy .btn{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---- Ronde 2 (03-11): een tweede keuzerij (werkgeheugen of 5G) ---- */
/* bureaublad: kleur als bolletjes op één regel met de naam erachter, zoals op de telefoon; anders eindigt de kaart onder 720 px (P16) */
@media (min-width:761px){
  .opt:has(#o-ram:not([hidden]),#o-net:not([hidden])) #o-kleur{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
  .opt:has(#o-ram:not([hidden]),#o-net:not([hidden])) #o-kleur .size{display:grid;grid-template-columns:none;place-items:center;width:40px;height:40px;min-height:0;padding:0;border-radius:50%;box-shadow:none}
  .opt:has(#o-ram:not([hidden]),#o-net:not([hidden])) #o-kleur .size i{width:26px;height:26px;box-shadow:inset 0 0 0 1px rgba(26,42,62,.14)}
  .opt:has(#o-ram:not([hidden]),#o-net:not([hidden])) #o-kleur .size:has(input:checked) i{outline:2px solid var(--navy);outline-offset:2px}
  .opt:has(#o-ram:not([hidden]),#o-net:not([hidden])) #o-kleur .size b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .opt:has(#o-ram:not([hidden]),#o-net:not([hidden])) .kl-naam{display:block;margin-left:6px;font-size:var(--t1);line-height:var(--l1);font-weight:600;color:var(--navy);white-space:nowrap}
}

/* De kaart blijft even hoog bij elke keuze van kleur en opslag (eigenaar 04-11: "de positie verandert", "de prijs verspringt").
   Wat per uitvoering wisselt — wel of geen oordeel, een smalle of brede prijs, wel of geen aanbod — mag de foto en de prijs niet
   verschuiven. Op een breed scherm volgt de foto de hoogte van de koopkolom, dus die kolom houdt bij elke uitvoering zijn ruimte. */
@media (min-width:901px){
  /* "Nog geen oordeel" en "Nu niet leverbaar" tonen geen meter en geen prijs: de plek blijft, leeg */
  .moment:is([data-s="nieuw"],[data-s="weg"]) #meter[hidden]{display:grid!important;visibility:hidden}
  #price[hidden]{display:grid!important;visibility:hidden}
  /* opent de pagina op een uitvoering zonder aanbod, dan zijn bedrag en winkelregel leeg: ook dan dezelfde hoogte */
  #p-a:empty::before{content:"\a0"}
  #p-s:empty{min-height:24px}
}
@media (min-width:1280px){
  /* prijs en winkelregel delen de grondlijn van de tekst "goedkoopst bij", niet die van het winkellogo: elk logo is anders hoog
     en schoof de prijs per winkel een paar pixels op */
  .p-sub .p-t{align-self:last baseline}
}
@media (max-width:760px){
  /* "Nog geen oordeel" is zonder meter even hoog als een oordeel met meter (gemeten 04-11: 55px) */
  .moment[data-s="nieuw"]{min-height:55px}
  /* prijs en winkel altijd naast elkaar: winkelregel in twee regels, prijs schaalt met de kaartbreedte en niet met het bedrag,
     zodat de regel niet per uitvoering wel of niet breekt */
  .price{container-type:inline-size}
  .p-sub{grid-template-columns:auto;max-width:110px}
  .p-sub .plate{grid-row:2;grid-column:1;max-width:100%}
}
/* alleen waar containereenheden bestaan; anders blijft de vaste maat staan (een ongeldige var()-som valt niet terug, hij erft) */
@supports (font-size:1cqw){
  @media (max-width:760px){.amount{font-size:min(var(--t5),calc((100cqw - 122px) / 4.8))}}
  @media (max-width:760px) and (max-height:600px){.amount{font-size:min(var(--t4),calc((100cqw - 122px) / 4.8))}}
  @media (max-width:359px){.amount{font-size:min(var(--t4),calc((100cqw - 122px) / 4.8))}}
}

/* S18: de openingszin #lead met zijn grid-gebied is weg sinds 06-11 (eigenaar); de held valt terug op "gal head" "gal buy" (r.65). */

/* 05-11 (eigenaar via vraagtool: "Sticky eraf"): de foto staat op elke maat stil in de kop. Toen #lead (S18, weg sinds 06-11) in de
   linkerkolom onder de foto stond, schoof de sticky .gal (r.68, Bodi 01-11) bij scrollen over de openingszin: een sticky element is begrensd door .hero, niet
   door zijn grid-gebied. P16 houdt de koopkaart binnen het eerste scherm, dus sticky voegt niets toe. Onder 901 px stond hij al stil
   (static op 761-900, relative op de telefoon). Toets: pp_bank S19 (foto over tekst bij scrollen, 1024 en 1280 px). */
@media (min-width:901px){.gal{position:static;top:auto}}

/* Auteursblok onderaan (eigenaar 05-11: "net als op de vergelijkpages, geschreven door juri met foto erbij en link naar mijn page").
   Markup = kpm_byline_blok() uit koopmaat-byline.php, zelf aangeroepen in single-kpm_product.php. Die plugin zet zijn opmaak
   (style#kp-byline-font en #kp-byline-css) alleen op vergelijking, ranglijst en categorie; hieronder een letterlijke kopie
   (koopmaat-byline.php, live md5 a3ffdc87 op 05-11), alleen de fontmap relatief. Wijzigt daar de opmaak, dan hier ook. */
@font-face {
  font-family: 'Crimson Pro'; font-style: italic; font-weight: 500;
  font-display: swap;
  src: url('../fonts/crimson-pro-v28-italic-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Crimson Pro'; font-style: italic; font-weight: 500;
  font-display: swap;
  src: url('../fonts/crimson-pro-v28-italic-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
.kp-byline {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 40px auto 32px;
    padding: 22px 0 0;
    border-top: 1px solid #cee9e0;
    max-width: 760px;
}
.kp-byline-photos { display: flex; flex-shrink: 0; }
.kp-byline-photos img {
    width: 72px; height: 72px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: #eee;
}
.kp-byline-photos img + img {
    margin-left: -16px;
    box-shadow: -2px 0 0 #fff;
}
.kp-byline-text { line-height: 1.35; min-width: 0; }
.kp-byline-name {
    display: block;
    font-family: "Crimson Pro", Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    color: #1a1a1a;
    letter-spacing: 0.005em;
}
.kp-byline-name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid #cee9e0;
    padding-bottom: 1px;
}
.kp-byline-name a:hover { border-bottom-color: #3fa38a; }
.kp-byline-meta {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: #777;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}
/* Methodelink op een eigen regel onder de datum (eigenaar 17-10). */
.kp-byline-methode { display: block; margin-top: 2px; }
.kp-byline-meta a {
    color: #777;
    text-decoration: none;
    border-bottom: 1px solid #d8d4cc;
}
.kp-byline-meta a:hover {
    color: #3fa38a;
    border-bottom-color: #3fa38a;
}
@media (max-width: 480px) {
    .kp-byline { gap: 14px; }
    .kp-byline-name { font-size: 19px; }
    .kp-byline-photos img { width: 60px; height: 60px; }
    .kp-byline-photos img + img { margin-left: -14px; }
}

/* Telefoon (eigenaar 05-11): "de foto mag wat meer ruimte". Een liggende foto (tv, printer) vult de ruimte tussen kop en kaart en
   valt niet meer achter de kaart; een staande foto (telefoon) houdt de vaste hoogte met de kaart eroverheen. De extra hoogte voor de
   openingszin (--lead-h) is weg met de zin (eigenaar 06-11); de held houdt zijn min-height van r.479. */
@media (max-width:760px){
  .hero.liggend .tile{bottom:0;height:auto}
  .hero.liggend.foto-vast .tile{bottom:auto;height:var(--foto-l)}
  .hero.liggend.foto-vast:has(#moment[data-s="weg"]) .gal{flex-basis:var(--foto-l)}
}

/* Telefoon (eigenaar 09-11, alle productpagina's): foto openklappen. Knop en klassen zet alleen productpagina.js, en alleen waar de
   koopkaart over de foto valt; zonder script verandert er niets. */
.foto-klap{display:none}
@media (max-width:760px){
  .foto-klap:not([hidden]){position:absolute;right:8px;bottom:8px;z-index:3;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);color:var(--navy);cursor:pointer}
  .foto-klap.hoog{bottom:64px}
  .foto-klap svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
  .foto-klap[aria-expanded="true"] svg{transform:rotate(180deg)}
  .foto-klap:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
  .hero.foto-klapbaar .tile{cursor:pointer}
}
@media (prefers-reduced-motion:reduce){.foto-klap svg{transition:none}}