/* ===== Design tokens ===== */
:root{
  --brand:#1463ff; --brand-dark:#0c4ad1; --brand-tint:#eaf1ff;
  --ink:#15202b; --muted:#5b6b7b; --line:#e6ebf1; --bg:#f4f6f9; --card:#fff;
  --green:#1a8a4a; --green-tint:#e8f6ee; --red:#c8332b; --amber:#b86e00;
  --radius:14px; --radius-sm:9px; --shadow:0 2px 10px rgba(20,40,70,.06);
  --shadow-lg:0 8px 30px rgba(20,40,70,.12);
  --maxw:1180px;
  font-synthesis:none;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  font-size:15px;line-height:1.55;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.2;margin:0 0 .4em}
h1{font-size:1.7rem;letter-spacing:-.01em}
h2{font-size:1.25rem}
img{max-width:100%}
.container{max-width:var(--maxw);margin:0 auto;padding:0 18px}
.muted{color:var(--muted)}
.small{font-size:.82rem}
.num{text-align:right}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  padding:.6em 1.1em;border-radius:var(--radius-sm);border:1px solid var(--line);
  background:#fff;color:var(--ink);font-weight:600;font-size:.92rem;cursor:pointer;
  transition:.15s;white-space:nowrap}
.btn:hover{border-color:#cfd8e3;background:#fafbfc}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn-outline{background:#fff;border-color:var(--brand);color:var(--brand)}
.btn-outline:hover{background:var(--brand-tint)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-lg{padding:.8em 1.5em;font-size:1rem}
.btn-block{width:100%}

/* ===== Header ===== */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;box-shadow:var(--shadow)}
.header-inner{display:flex;align-items:center;gap:20px;padding-top:12px;padding-bottom:12px}
/* Woordmerk. Als tekst en niet als afbeelding: scherp op elk scherm, schaalt
   mee met de tekstgrootte, en de merknaam blijft leesbaar voor zoekmachines. */
/* Links en rechts even breed, zodat het zoekveld in het midden van de balk
   uitkomt en niet ergens tussen het logo en de links in blijft hangen. Met
   flex-basis nul telt alleen de vrije ruimte mee en niet hoe breed de inhoud
   toevallig is; anders schuift het zoekveld op zodra er een link bij komt.

   min-width op max-content erbij, want zonder die ondergrens kromp het logo mee
   tot "onlineprijsvergelijken." zonder de .nl, en vielen Deals en Wenslijst
   onder elkaar. Is er te weinig ruimte om allebei de kanten even breed te
   maken, dan wint de inhoud en staat het zoekveld net niet in het midden. */
.logo{display:flex;align-items:center;text-decoration:none;flex:1 1 0;min-width:max-content}
.logo-woord{font-weight:800;font-size:1.24rem;letter-spacing:-.035em;line-height:1;
  white-space:nowrap}
.logo-donker{color:#0b1440}
.logo-blauw{color:var(--brand)}
.logo-woord-klein{font-size:1rem}

@media (max-width:520px){.logo-woord{font-size:1.02rem}}

/* Alleen voor schermlezers; het woordmerk zelf staat op aria-hidden omdat het
   uit losse stukjes tekst bestaat. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Geen overflow op het formulier: dat knipt de voorstellenlijst eronder weg,
   precies zoals het eerder met de uitklap in de categoriebalk ging. De ronde
   hoeken zitten daarom op het invoerveld en de knop zelf. */
/* Eén pixel rand, en de binnenhoeken één pixel kleiner dan de buitenkant:
   anders piept er bij de knop een randje blauw langs de ronding. */
.search{position:relative;flex:0 1 560px;display:flex;max-width:560px;margin:0 auto;
  border:1px solid var(--brand);border-radius:11px}
.search input{flex:1;border:0;padding:.6em .9em;font-size:.95rem;outline:none;border-radius:10px 0 0 10px}
.search button{border:0;background:var(--brand);color:#fff;padding:0 1.2em;font-weight:600;cursor:pointer;border-radius:0 10px 10px 0}
.search button:hover{background:var(--brand-dark)}
.verticals{display:flex;gap:6px;flex:1 1 0;justify-content:flex-end;min-width:max-content}
.verticals a{padding:.45em .9em;border-radius:8px;font-weight:600;font-size:.9rem;color:var(--muted)}
.verticals a:hover{background:var(--brand-tint);color:var(--brand)}
/* Geen overflow hier: dat maakt er een scrollvak van, en dan wordt een uitklap
   die buiten de balk valt afgeknipt in plaats van eroverheen getekend. Het
   horizontaal scrollen is ook niet meer nodig, want de balk breekt af op een
   smal scherm. */
/* Staat buiten de header en scrollt dus gewoon weg. De schaduw en de onderrand
   hoorden bij de header; die staan nu hier, want dit is het laatste dat je ziet
   voordat de pagina begint. */
.subnav{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:#fff;box-shadow:var(--shadow)}
.subnav-inner{display:flex;gap:4px;padding-top:8px;padding-bottom:8px}
/* Alleen directe kinderen: zonder de > raakt deze regel ook de links binnen het
   uitklappaneel, en met een hogere specificiteit dan .menu-item, dus die
   opmaak zou het daar afleggen. */
.subnav-inner > a{padding:.6rem .75rem;border-radius:7px;font-size:.86rem;color:var(--muted);
  display:flex;align-items:center}
.subnav-inner > a:hover{background:var(--bg);color:var(--ink)}
.subnav-sep{width:1px;background:var(--line);margin:.55rem .4rem;align-self:stretch}

.main{padding:22px 18px 40px}

/* ===== Hero ===== */
.hero{text-align:center;padding:40px 16px 30px;background:linear-gradient(180deg,var(--brand-tint),transparent);border-radius:var(--radius);margin-bottom:26px}
.hero h1{font-size:2.1rem}
.hero-sub{max-width:620px;margin:0 auto 20px;color:var(--muted)}
.hero-search{position:relative;display:flex;max-width:520px;margin:0 auto;
  border:2px solid var(--brand);border-radius:12px;background:#fff}
.hero-search input{flex:1;border:0;padding:.8em 1em;font-size:1rem;outline:none;border-radius:10px 0 0 10px}
.hero-search button{border-radius:0 10px 10px 0;border:0;background:var(--brand);color:#fff;padding:0 1.6em;font-weight:700;cursor:pointer}

/* ===== Blocks & grid ===== */
.block{margin:34px 0}
.block-head{margin-bottom:14px}
.block-head h2{margin-bottom:2px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}

/* ===== Category tiles ===== */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.cat-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:.15s}
.cat-tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:#d6e0ee}
.cat-icon{font-size:2rem}
.cat-name{font-weight:700}
.cat-count{font-size:.8rem;color:var(--muted)}

/* ===== Product card ===== */
.card{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:.15s}
.card:hover{box-shadow:var(--shadow-lg);border-color:#d6e0ee}
.card-compare{position:absolute;top:8px;left:8px;z-index:2;display:flex;align-items:center;gap:5px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:7px;padding:3px 7px;font-size:.74rem;color:var(--muted);cursor:pointer}
.card-compare input{margin:0;accent-color:var(--brand)}
.card-thumb-link{display:block}
.thumb{position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--g1,#eef2f7),var(--g2,#e2e8f0));overflow:hidden}

/* De foto ligt over het gekleurde vlak heen. Gaat hij stuk, dan haalt de
   browser de img weg en zie je het vlak weer, zonder gebroken icoon.
   contain en niet cover: een productfoto mag niet aangesneden worden, je wilt
   het hele apparaat zien. De witte achtergrond sluit aan op de meeste
   productfoto's, die zelf ook wit zijn. */
.thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  background:#fff;padding:6px}
.thumb-lg .thumb-img{padding:14px}
.thumb-icon{font-size:3.4rem;filter:saturate(.9)}
.thumb-lg{aspect-ratio:1/1;border-radius:var(--radius);border:1px solid var(--line)}
.thumb-lg .thumb-icon{font-size:6rem}
.card-body{padding:12px 14px 6px;flex:1}
.card-cat{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.card-cat:hover{color:var(--brand)}
.card-title{font-size:.98rem;margin:.25em 0 .5em;line-height:1.3}
.card-title a:hover{color:var(--brand)}
.card-specs{list-style:none;padding:0;margin:0;font-size:.8rem;color:var(--muted)}
.card-specs li{display:inline;}
.card-specs li:not(:last-child)::after{content:" · ";}
.card-meta{margin-top:8px;min-height:18px}
.card-price{padding:10px 14px 14px;border-top:1px solid var(--line);background:#fcfdfe}
.card-deal{margin-bottom:6px}
.price-before{color:var(--muted);text-decoration:line-through;font-size:.82rem;margin-right:6px}
.price-now{font-size:1.4rem;font-weight:800;letter-spacing:-.02em}
.price-sub{font-size:.78rem;color:var(--muted);margin-bottom:8px}
.card-cta{width:100%}

/* ===== Wishlist / hearts ===== */
.card-wish{position:absolute;top:8px;right:8px;z-index:2;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.92);color:#c8cfd8;font-size:1rem;cursor:pointer;line-height:1;transition:.15s}
.card-wish:hover{color:var(--red);border-color:#f3c7c4}
.card-wish.active{color:var(--red);border-color:#f3c7c4;background:#fff5f4}
.wishlink{display:inline-flex;align-items:center;gap:5px}
.wishlink-count{background:var(--red);color:#fff;border-radius:99px;padding:0 6px;font-size:.72rem;font-weight:700}
.product-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.wishbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:8px;padding:.4em .8em;font-size:.85rem;font-weight:600;cursor:pointer;transition:.15s}
.wishbtn:hover{color:var(--red);border-color:#f3c7c4}
.wishbtn.active{color:var(--red);border-color:#f3c7c4;background:#fff5f4}
.wishbtn.active .wishbtn-label::after{content:"d"}

/* ===== Price alert form ===== */
.alert-form{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding:14px 16px;background:var(--brand-tint);border:1px solid #d4e2ff;border-radius:var(--radius)}
.alert-form-text{display:flex;flex-direction:column}
.alert-form-fields{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.alert-form input[type=email]{border:1px solid var(--line);border-radius:8px;padding:.5em .7em;font-size:.9rem;min-width:180px}
.alert-price{display:flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:.2em .5em}
.alert-price input{border:0;width:88px;padding:.3em;font-size:.9rem;outline:none}
.panel-narrow{max-width:560px;margin:30px auto;text-align:center}
.panel-narrow .btn{margin-top:12px}

/* ===== Rating stars ===== */
.stars{display:inline-flex;font-size:.95rem;letter-spacing:1px;line-height:1}
.stars .star{color:#dfe5ec}
.stars .star.full{color:#f5a623}
.stars .star.off{color:#dfe5ec}
.stars .star.half{position:relative;color:#dfe5ec}
.stars .star.half::before{content:"★";position:absolute;left:0;top:0;width:50%;overflow:hidden;color:#f5a623}
.rating{display:inline-flex;align-items:center;gap:6px}

/* ===== Deal badge ===== */
.deal{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:700;padding:.22em .6em;border-radius:6px;white-space:nowrap}
.deal-best{background:var(--green);color:#fff}
.deal-good{background:var(--green-tint);color:var(--green)}
.deal-normal{background:var(--bg);color:var(--muted)}
.deal-high{background:#fdf0e6;color:var(--amber)}
.deal-line{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--line)}
.deal-line .deal{font-size:.8rem}
.deal-line .deal-note{font-size:.86rem;color:var(--muted)}

/* ===== Breadcrumb ===== */
.breadcrumb{font-size:.82rem;color:var(--muted);margin:4px 0 16px}
.breadcrumb a:hover{color:var(--brand)}

/* ===== Category layout ===== */
.cat-header{margin-bottom:18px}
/* Geen eigen breedtebeperking meer: de tekst loopt tot de rand van de kolom,
   net als de tegels eronder. Met 760 pixels stond hij op een breed scherm in
   een smalle strook met een gat ernaast, terwijl alles eromheen wel doorliep. */
.cat-intro{color:var(--muted)}
/* De tellingen onder een eigen tekst: wel nuttig, niet het eerste wat je leest. */
.cat-cijfers{margin:.35em 0 0}
.cat-layout{display:grid;grid-template-columns:248px 1fr;gap:22px;align-items:start}
/* Vastgeplakt, maar nooit langer dan het scherm.

   Zonder die tweede eis loopt een lang paneel onder de onderrand door, en daar
   is het niet meer te bereiken: de pagina scrollt wel, het vastgeplakte paneel
   niet. Met doorlopend ladende producten eronder valt dat extra op, want dan
   blijf je scrollen terwijl de filters stilstaan. Nu schuift de inhoud binnen
   het paneel zodra hij niet meer past. */
.filters{position:sticky;top:78px;max-height:calc(100vh - 98px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.filters-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.filters-head h2{margin:0;font-size:1.05rem}
.filters-clear{font-size:.82rem;color:var(--brand)}
.filter-group{padding:12px 0;border-top:1px solid var(--line)}
.filter-group h3{font-size:.86rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:8px}

/* Een filtergroep die open en dicht kan. De kop is de knop, met een pijl die
   meedraait en een telletje zodra er iets aanstaat: dicht zie je anders niet
   dat je naar een gefilterde lijst kijkt. */
details.filter-group > summary{
  display:flex;align-items:center;gap:.5em;cursor:pointer;list-style:none;
  padding:2px 0;
}
details.filter-group > summary::-webkit-details-marker{display:none}
details.filter-group > summary h3{flex:1;margin:0}

/* Het pijltje vóór de naam, en dun: het is een aanwijzing dat er iets
   openklapt, geen knop op zichzelf. Dunner dan het pijltje van het hele paneel
   (1 pixel tegen 2), want hier staan er meerdere onder elkaar en dat wordt
   samen al snel rommelig. */
details.filter-group > summary::before{
  content:"";width:.36em;height:.36em;flex:none;
  border-right:1px solid var(--muted);border-bottom:1px solid var(--muted);
  opacity:.7;
  transform:rotate(-45deg) translateX(-1px);transition:transform .12s ease;
}
details.filter-group[open] > summary::before{transform:rotate(45deg) translateY(-1px)}
details.filter-group[open] > summary{margin-bottom:8px}
details.filter-group > summary:hover h3{color:var(--ink)}
details.filter-group > summary:hover::before{opacity:1}
details.filter-group > summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.groep-teller{
  font-size:.72rem;font-weight:700;color:var(--brand);
  background:var(--brand-tint);border-radius:99px;padding:.1em .5em;
}
@media (prefers-reduced-motion:reduce){details.filter-group > summary::before{transition:none}}
.price-range{display:flex;align-items:center;gap:6px}
.price-range input{width:100%;border:1px solid var(--line);border-radius:7px;padding:.45em .55em;font-size:.85rem}
.check{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:.9rem;cursor:pointer}
.check input{accent-color:var(--brand)}
.check-count{margin-left:auto;font-size:.78rem;color:var(--muted)}
.cat-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.result-count{color:var(--muted)}
.sort{font-size:.88rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.sort select{border:1px solid var(--line);border-radius:8px;padding:.45em .6em;font-size:.88rem;background:#fff}

/* ===== Keuzehulp ===== */
.guide-link{display:inline-block;margin-top:10px;background:var(--brand-tint);color:var(--brand);border:1px solid #d4e2ff;border-radius:99px;padding:.4em 1em;font-weight:600;font-size:.9rem}
.guide-link:hover{background:#dceaff}
.guide{max-width:680px;margin:0 auto}
.guide-head{text-align:center;margin-bottom:18px}
.guide-step{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin:0 0 16px;background:var(--card);box-shadow:var(--shadow)}
.guide-step legend{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;padding:0 4px}
.guide-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:99px;background:var(--brand);color:#fff;font-size:.85rem}
.guide-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:12px}
.guide-opt{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7em .9em;cursor:pointer;transition:.15s;font-size:.92rem}
.guide-opt:hover{border-color:var(--brand);background:var(--brand-tint)}
.guide-opt input{accent-color:var(--brand)}
.guide-opt:has(input:checked){border-color:var(--brand);background:var(--brand-tint);font-weight:600}
.guide-actions{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:8px}

/* ===== Empty ===== */
.empty{text-align:center;padding:40px 20px;background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);color:var(--muted)}
.empty-lg{padding:70px 20px}
.empty .btn{margin-top:12px}

/* ===== Product page ===== */
.product-top{display:grid;grid-template-columns:380px 1fr;gap:28px;margin-bottom:8px}
.product-gallery{position:sticky;top:78px}
.product-brand{display:inline-block;color:var(--brand);font-weight:600;font-size:.9rem;margin-bottom:2px}
.product-brand:hover{text-decoration:underline}
.product-rating{display:flex;align-items:center;gap:8px;margin:6px 0 12px}
.product-desc{color:var(--muted);max-width:60ch}
.pricebox{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding:16px 18px;background:var(--brand-tint);border:1px solid #d4e2ff;border-radius:var(--radius)}
.pricebox-amount{font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.pricebox-note{font-size:.84rem;color:var(--muted);margin-top:8px}

/* Panels */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin:22px 0}
.panel h2{margin-bottom:12px}
.product-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.product-cols .panel{margin:0}

/* Offers table */
.offers{width:100%;border-collapse:collapse}
.offers th,.offers td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.offers thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);text-align:left}
.offers thead th.num{text-align:right}
.offers tbody tr:hover{background:#fafcff}
.offer-best{background:var(--green-tint)}
.offer-best:hover{background:#e0f3e8}
.offer-oos{opacity:.6}
.offer-total{font-size:1.15rem}
.vendor-badge{display:inline-block;padding:.3em .7em;border-radius:7px;background:var(--vc);color:var(--vt);font-weight:700;font-size:.85rem}
.tag{display:inline-block;padding:.15em .5em;border-radius:5px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-left:6px}
.tag-best{background:var(--green);color:#fff}
.tag-deal{background:var(--red);color:#fff}
.dagdeal-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:10px 14px;background:#fff6f5;border:1px solid #ffd9d4;border-radius:var(--radius);font-size:.92rem}
.dagdeal-banner .price-before{font-size:.9rem}
.stock.in{color:var(--green);font-size:.86rem}
.stock.out{color:var(--red);font-size:.86rem}
.price-before.small{font-size:.78rem}

/* Pros/cons */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pros,.cons{list-style:none;padding:0;margin:0;font-size:.9rem}
.pros li,.cons li{padding:4px 0 4px 24px;position:relative}
.pros li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800}
.cons li::before{content:"✕";position:absolute;left:0;color:var(--red);font-weight:800}

/* Spec table */
.spec-group{font-size:.95rem;margin:16px 0 6px;color:var(--brand)}
.spec-table{width:100%;border-collapse:collapse;margin-bottom:6px}
.spec-table th,.spec-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:.9rem}
.spec-table th{width:40%;color:var(--muted);font-weight:600}

/* Reviews */
.reviews{display:grid;gap:14px}
.review{border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px}
.review-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}

/* Price chart */
.prijsgrafiek{position:relative;margin:0}
/* pan-y: op een telefoon volgt een zijwaartse veeg de grafiek, maar blijft
   omhoog en omlaag gewoon scrollen. Zonder dit kies je: of de pagina staat
   vast zodra je de grafiek raakt, of aanwijzen werkt daar helemaal niet. */
.price-chart{width:100%;height:auto;display:block;touch-action:pan-y}
.price-chart:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--radius-sm)}
.price-chart .grid{stroke:var(--line);stroke-width:1}
/* 14 en niet 11: dit zijn eenheden van de tekening, geen pixels. De grafiek
   staat in een kolom van ongeveer 560 pixels terwijl hij 720 breed is
   getekend, dus alles krimpt met een vijfde. */
.price-chart .axis{fill:var(--muted);font-size:14px}
.price-chart .area{fill:var(--brand);opacity:.08}
.price-chart .line{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.price-chart .lowdot{fill:var(--green);stroke:#fff;stroke-width:2}

/* De aanwijzer staat in de html maar is onzichtbaar tot er iets aangewezen
   wordt. Zo hoeft er tijdens het bewegen niets bijgetekend te worden. */
.price-chart .wijzer{opacity:0;transition:opacity .12s}
.prijsgrafiek.aan .price-chart .wijzer{opacity:1}
.price-chart .wijzer-lijn{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 4}
.price-chart .wijzer-punt{fill:#fff;stroke:var(--brand);stroke-width:2.5}

.grafiek-tip{
  position:absolute;left:0;top:0;transform:translate(-50%,-100%);margin-top:-12px;
  pointer-events:none;opacity:0;transition:opacity .12s;z-index:2;
  background:var(--ink);color:#fff;border-radius:var(--radius-sm);
  padding:.42em .62em;font-size:.78rem;line-height:1.35;white-space:nowrap;
  box-shadow:var(--shadow-lg);
}
.prijsgrafiek.aan .grafiek-tip{opacity:1}

/* Zit het punt te hoog in de tekening, dan past de ballon er niet boven en
   steekt hij buiten de kaart uit. Dan klapt hij naar de andere kant. */
.grafiek-tip.tip-onder{transform:translate(-50%,0);margin-top:12px}
.grafiek-tip b{display:block;font-size:.95rem;font-weight:700}
.grafiek-tip .tip-merk{display:block;color:#8fe0b0;font-weight:600}

/* De eerste en de laatste dag onder de grafiek: zonder die twee is niet te
   zien welke kant het verleden op ligt. */
.grafiek-assen{display:flex;justify-content:space-between;gap:8px;
  color:var(--muted);font-size:.78rem;margin-top:.35em;padding:0 2px}

/* Op een breed scherm staan de bedragen langs de rechterrand van de tekening.
   Die krimpen mee met de svg, dus op een telefoon zijn ze onleesbaar klein;
   daar staat het bereik in gewone tekst onder de grafiek. */
.grafiek-bereik{display:none}
@media (max-width:600px){
  .price-chart .axis{display:none}
  .grafiek-bereik{display:inline}
}

/* ===== Compare table ===== */
.compare-scroll{overflow-x:auto}
.compare-table{border-collapse:collapse;width:100%;min-width:600px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare-table th,.compare-table td{border:1px solid var(--line);padding:12px;text-align:center;vertical-align:top}
.compare-rowhead{text-align:left;background:#fafbfc;color:var(--muted);font-weight:600;white-space:nowrap}
.compare-title{display:block;margin-top:8px;font-weight:700;font-size:.9rem}
.compare-title:hover{color:var(--brand)}
.compare-group th{background:var(--brand-tint);color:var(--brand);text-align:left}
.compare-price td{font-size:1.1rem}

/* ===== Deals ===== */
/* Zelfde doos als .menu-top, zodat het vlammetje op dezelfde hoogte staat als
   de hoofdcategorieën ernaast. De onderrand is doorzichtig maar wel aanwezig:
   zonder die regel staat de tekst een paar pixels hoger dan bij een menu-item,
   dat immers ruimte reserveert voor de streep die bij zweven verschijnt. */
.subnav-deals{display:flex;align-items:center;gap:.35rem;color:var(--red) !important;
  font-weight:700;padding:.6rem .75rem;border-bottom:2px solid transparent}
.deal-pct{position:absolute;top:8px;left:8px;z-index:2;background:var(--red);color:#fff;font-weight:800;font-size:.8rem;padding:.2em .5em;border-radius:7px}
.deal-pct-lg{font-size:1.1rem;padding:.3em .7em}
/* Eigen tint en niet var(--amber): op #fff4d6 haalde die 3,63 en de norm is
   4,5. Deze donkerdere tint haalt 5,1 en blijft dezelfde kleur. */
.deal-flag{display:inline-block;background:#fff4d6;color:#8a5200;font-weight:700;font-size:.8rem;padding:.25em .7em;border-radius:99px;margin-bottom:6px}
.deal-countdown{display:inline-block;background:#fdecea;color:var(--red);font-weight:700;font-size:.82rem;padding:.3em .7em;border-radius:7px;font-variant-numeric:tabular-nums}
.deal-countdown-lg{font-size:1rem}
.deal-stock{font-size:.82rem;color:var(--amber);margin-top:6px}
.deal-save{color:var(--green);font-weight:700;font-size:.9rem;margin-left:8px}

/* Deal van de dag (home, compact) */
.dealofday{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;background:var(--card);border:1px solid #ffd9d4;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin:30px 0;position:relative}
.dealofday-media{position:relative}
.dealofday-body .deal-hero-price{margin:6px 0 10px}
.dealofday-body h2{margin:.2em 0}

/* Deal hero (deals-pagina) */
.deal-hero{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:center;background:linear-gradient(135deg,#fff,#fff6f5);border:1px solid #ffd9d4;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:26px}
.deal-hero-media{position:relative}
.deal-hero-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:10px 0}
.deal-hero-price .price-now{font-size:2rem}
.deal-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* Deal grid + cards */
.deal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.dealcard{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:.15s}
.dealcard:hover{box-shadow:var(--shadow-lg);border-color:#ffd0c9}
.dealcard-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.dealcard-price{display:flex;align-items:baseline;gap:8px}
.dealcard-price .price-now{font-size:1.3rem}
.dealcard .btn{margin-top:auto}

/* ===== Nieuwsbrief ===== */
.newsletter{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.newsletter-text{display:flex;flex-direction:column}
.newsletter-fields{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.newsletter input[type=email]{border:1px solid var(--line);border-radius:8px;padding:.55em .8em;font-size:.92rem;min-width:200px}
.newsletter-freq{display:flex;gap:12px;font-size:.86rem}
.newsletter-freq label{display:flex;align-items:center;gap:5px;cursor:pointer}
.newsletter-freq input{accent-color:var(--brand)}
.newsletter-block{margin:30px 0}
.newsletter-hero{background:linear-gradient(135deg,var(--brand-tint),#fff);border:1px solid #d4e2ff;border-radius:var(--radius);padding:20px 22px}
.newsletter-footer{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:14px}

/* ===== AI assistent ===== */
.assistant{background:linear-gradient(135deg,#101a3a,#1d2b6b);color:#fff;border-radius:var(--radius);padding:26px;margin-bottom:22px}
.assistant-head h1{color:#fff}
.assistant .muted{color:#aab4d4}
.assistant-box{display:flex;gap:8px;margin-top:14px;max-width:680px}
.assistant-box input{flex:1;border:0;border-radius:10px;padding:.8em 1em;font-size:1rem;outline:none}
.assistant-examples{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.chip{display:inline-block;background:#eef1f7;color:var(--ink);border-radius:99px;padding:.3em .8em;font-size:.82rem;font-weight:600}
.chip-link{background:rgba(255,255,255,.14);color:#fff}
.chip-link:hover{background:rgba(255,255,255,.26)}
.assistant-interpret{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 16px}
.assistant-note{margin-top:24px;text-align:center}
/* home-variant (compacte CTA) */
.assistant-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,#101a3a,#1d2b6b);color:#fff;border-radius:var(--radius);padding:20px 24px;margin:30px 0}
.assistant-cta h2{color:#fff;margin:0}
.assistant-cta p{color:#aab4d4;margin:.2em 0 0}
.assistant-cta .btn{background:#fff;color:#1d2b6b;border-color:#fff}

/* ===== USP bar ===== */
.usp-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:36px 0;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.usp{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600}
.usp span{font-size:1.4rem}

/* ===== Compare bar ===== */
.comparebar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);color:#fff;box-shadow:0 -4px 20px rgba(0,0,0,.2)}
.comparebar-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;gap:12px}
.comparebar-actions{display:flex;gap:8px}
.comparebar .btn-ghost{color:#cbd5e1}
.comparebar .btn-ghost:hover{color:#fff}

/* ===== Footer ===== */
.site-footer{background:#fff;border-top:1px solid var(--line);margin-top:40px;padding:30px 0}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;margin-bottom:22px}
.footer-brand{display:inline-flex;align-items:center;gap:6px;font-size:1.1rem;color:var(--brand)}
.footer-about p{margin-top:8px;max-width:42ch}
.footer-col h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 10px}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.footer-col ul a{font-size:.9rem;color:var(--ink)}
.footer-col ul a:hover{color:var(--brand)}
.footer-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.footer-cards>*{margin:0}
.affiliate-note{font-size:.82rem;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px}
.affiliate-note strong{color:var(--ink)}
.affiliate-note p{margin:.5em 0 0}
.footer-bottom{border-top:1px solid var(--line);margin-top:22px;padding-top:16px}
/* nieuwsbrief in footer-kaart verticaal */
.footer-cards .newsletter-footer{margin:0;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.footer-cards .newsletter-fields{width:100%}
.footer-cards .newsletter input[type=email]{flex:1;min-width:0}
@media(max-width:820px){
  .footer-cols{grid-template-columns:1fr 1fr;gap:22px}
  .footer-about{grid-column:1 / -1}
  .footer-cards{grid-template-columns:1fr}
}
@media(max-width:520px){ .footer-cols{grid-template-columns:1fr} }

/* ===== Responsive ===== */
@media(max-width:900px){
  .cat-layout{grid-template-columns:1fr}
  /* Op een smal scherm klapt het hele paneel al dicht en staat het niet
     vastgeplakt; dan hoeft de hoogte ook niet begrensd te worden. */
  .filters{position:static;max-height:none;overflow:visible}
  /* minmax(0,1fr) en niet 1fr: een 1fr-kolom weigert smaller te worden dan het
     breedste dat erin staat, en dan groeit het raster buiten het scherm in
     plaats van dat de inhoud meekrimpt. Met een minimum van nul kan dat niet
     meer gebeuren, ook niet bij inhoud die er later bij komt. */
  .product-top{grid-template-columns:minmax(0,1fr)}
  /* Gecentreerd en groter zodra de twee kolommen onder elkaar vallen. Hij stond
     op 280 pixels, en dat liet op een tablet een halve kolom leeg naast een
     foto die er juist toe doet.

     Met width en justify-self en niet met marge op auto: auto-marges op een
     rasteritem zetten het uitrekken uit, en dan krimpt dit vak tot de breedte
     van zijn inhoud. De afbeelding erin staat absoluut gepositioneerd, dus die
     inhoud is nul en het vak werd twee bij twee pixels. */
  .product-gallery{position:static;width:100%;max-width:420px;justify-self:center}
  .product-cols{grid-template-columns:1fr}
  .usp-bar{grid-template-columns:1fr 1fr}
  .deal-hero{grid-template-columns:1fr}
  .dealofday{grid-template-columns:1fr}
}
@media(max-width:680px){
  .header-inner{flex-wrap:wrap}
  .logo{flex:0 0 auto}
  .search{order:3;flex-basis:100%;max-width:none;margin:0}
  .verticals{flex:0 0 auto;justify-content:flex-start}
  .hero h1{font-size:1.6rem}
  .proscons{grid-template-columns:1fr}
  .usp-bar{grid-template-columns:1fr}

  /* De productfoto over de volle breedte. Het vak is vierkant, dus op een
     telefoon van 390 pixels wordt hij ook 390 hoog; dat is precies wat je van
     een productfoto wilt zien voordat je op een prijs klikt. */
  .product-gallery{max-width:none}

  /* De prijs met de knop ernaast paste niet: samen konden ze niet smaller dan
     368 pixels, en dat is breder dan een telefoonscherm. Een rasterkolom van
     1fr krimpt niet onder de minimale breedte van wat erin staat, dus dat duwde
     de hele pagina elf pixels te breed en liet hem heen en weer schuiven.

     Nu onder elkaar, met de knop over de volle breedte. Dat is op een telefoon
     ook de betere plek voor de enige handeling die er is. */
  .pricebox{flex-wrap:wrap;gap:12px}
  .pricebox .btn{width:100%}
}

/* ---------------------------------------------------------------- *
   De prijzenvergelijking op een smal scherm

   Elke rij werd vijf blokken onder elkaar: logo, levertijd, verzendkosten,
   totaal, knop. Bij drie winkels was dat bijna zeshonderd pixels aan tabel,
   terwijl er per winkel maar drie dingen toe doen: wie, hoeveel, en erheen.

   Nu een raster van twee kolommen per winkel. Logo links, bedrag rechts, op
   dezelfde regel; levertijd en verzendkosten daaronder; de knop over de volle
   breedte, want dat is de handeling en een brede knop raak je met een duim.
 * ---------------------------------------------------------------- */
@media(max-width:680px){
  .offers thead{display:none}
  .offers,.offers tbody{display:block;width:100%}

  .offers tr{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    gap:3px 12px;padding:11px 12px;margin-bottom:10px;
    border:1px solid var(--line);border-radius:var(--radius-sm);
  }
  .offers td{display:block;border:0;padding:0;width:auto}

  /* Winkel linksboven, totaalbedrag rechts ernaast. */
  .offers td:nth-child(1){grid-area:1 / 1}
  .offers td:nth-child(4){grid-area:1 / 2;text-align:right}
  .offers .offer-total{font-size:1.15rem}

  /* Levertijd en verzendkosten onder elkaar in de linkerkolom, allebei klein. */
  .offers td:nth-child(2){grid-area:2 / 1;font-size:.82rem;line-height:1.35}
  .offers td:nth-child(3){grid-area:3 / 1;text-align:left;font-size:.82rem;color:var(--muted)}
  /* "Gratis" zonder opschrift zegt niets zodra de tabelkop weg is. */
  .offers td[data-kop]::before{content:attr(data-kop) " "}
  .offers td[data-na]::after{content:" " attr(data-na)}

  /* De knop rechts, over de twee regels eronder. Over de volle breedte kostte
     hij een eigen regel van vijftig pixels per winkel, en bij drie winkels is
     dat een halve telefoonhoogte aan knoppen. */
  .offers td:nth-child(5){grid-area:2 / 2 / 4 / 3;align-self:center}
  .offers td:nth-child(5) .btn{min-width:98px;padding:.6em 1em}

  /* De merkjes onder het logo in plaats van ernaast: naast een logo van
     honderd pixels blijft er anders geen ruimte over voor "Laagste prijs". */
  .offers .winkelcel{flex-wrap:wrap;gap:4px}
}


/* ------------------------------------------------------------- Categorieën */

/* Icoon uit de meegeleverde set. Neemt de tekstkleur over en schaalt mee met de
   omgeving, dus er valt per plek niets af te stemmen. */
.cat-icon{width:1.6em;height:1.6em;flex:none;color:inherit}
.cat-icon-lg{width:2.6em;height:2.6em}
/* Een eigen afbeelding vult hetzelfde vierkant, zonder aan te snijden. */
.cat-icon-img{object-fit:contain;border-radius:6px}

/* --- Uitklapmenu in de balk -------------------------------------------- */
.subnav-inner{display:flex;align-items:stretch;gap:.2rem;flex-wrap:wrap}

/* Het paneel hangt aan de balk en niet aan het item: bij een hoofdcategorie
   rechts zou het anders buiten het scherm vallen en de pagina horizontaal laten
   schuiven. Daarom staat position hier op static en op .subnav op relative. */
.menu{position:static}
.menu-top{display:flex;align-items:center;gap:.45rem;cursor:pointer;list-style:none;
  padding:.6rem .75rem;white-space:nowrap;border-bottom:2px solid transparent}
.menu-top::-webkit-details-marker{display:none}
.menu-top::after{content:"";width:.42em;height:.42em;margin-left:.1rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .12s ease}
.menu[open] > .menu-top::after{transform:rotate(-135deg) translateY(-2px)}
.menu-top:hover,.menu[open] > .menu-top{border-bottom-color:var(--brand);color:var(--brand)}
.menu-top:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}


/* Boven de pagina-inhoud. De koptekst is zelf al een eigen laag (sticky met
   z-index 50), dus dit getal geldt binnen die laag; alles op de pagina blijft
   eronder. */
.menu-panel{position:absolute;left:0;right:0;top:100%;z-index:40;
  background:#fff;border-top:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 14px 34px rgba(16,24,40,.12);padding:.9rem 0 1rem}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.15rem}

.menu-item{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border-radius:8px;
  color:inherit;text-decoration:none;font-size:.9rem}
.menu-item:hover{background:var(--bg-soft,#f4f7fb);color:var(--brand)}
.menu-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-item-count{font-size:.78rem;color:var(--muted,#6b7280);flex:none}

/* De navigatie is alleen tekst; iconen staan op de tegels en niet in de balk.

   Openen bij zweven kan niet met CSS: een browser verbergt de inhoud van een
   details zelf en daar komt een display-regel niet tussen. Dat doet app.js, en
   alleen op schermen met een echte aanwijzer. Zonder JavaScript blijft het menu
   gewoon werken, je klikt het dan open. */

/* Dezelfde grens als het uitklapmenu hieronder: een zwevend paneel boven een
   menu dat zelf al een kolom is, klapt over zijn eigen lijst heen. */
@media (max-width:900px){
  .menu-panel{position:static;box-shadow:none;border-radius:8px;margin:.2rem 0 .5rem;padding:.5rem}
  .menu-grid{grid-template-columns:1fr 1fr}
}

/* --- Tegels op de homepagina ------------------------------------------- */
.cat-tile{display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;
  padding:1rem .7rem;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;color:inherit;text-decoration:none;transition:border-color .12s ease,transform .12s ease}
.cat-tile:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.cat-tile .cat-icon{color:var(--brand)}
.cat-tile-name{font-weight:600;line-height:1.25}
.cat-tile-count{font-size:.8rem;color:var(--muted,#6b7280)}

@media (prefers-reduced-motion:reduce){.cat-tile:hover{transform:none}}


/* Het artikelnummer onder de productnaam: aanwezig voor wie het zoekt, maar het
   mag de titel en de beoordeling niet wegdrukken. */
.product-ean{font-size:.78rem;color:var(--muted,#6b7280);letter-spacing:.02em;
  padding:.1rem .45rem;border:1px solid var(--line);border-radius:5px;white-space:nowrap}
.product-rating{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}


/* Uitleg op een dealkaart zonder van-prijs. Klein en rustig: het is een
   toelichting, geen waarschuwing. */
.deal-geenvan{margin:.2rem 0 .4rem;line-height:1.35}


/* ------------------------------------------------------- Databasetracer */
/* Alleen zichtbaar vanaf een vertrouwd adres. Donker en onderaan, zodat het
   duidelijk geen onderdeel van de site is maar een hulpmiddel eroverheen. */
.dbtracer{position:relative;z-index:70;margin:0;background:#101725;color:#dbe3ef;
  font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.dbtracer > summary{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.6rem 1rem;cursor:pointer;list-style:none;border-top:2px solid #2b3a55}
.dbtracer > summary::-webkit-details-marker{display:none}
.dbtracer > summary strong{color:#fff}
.dbtracer > summary span{color:#9db0cc}
.dbtracer-let-op{color:#ffbf47 !important}

.dbtracer-body{padding:0 1rem 1rem;max-height:60vh;overflow:auto}
.dbtracer-waarschuwing{color:#ffbf47;margin:.4rem 0}
.dbtracer-herhaald{margin:.2rem 0 1rem;padding-left:1.1rem}
.dbtracer-herhaald code{color:#dbe3ef}

.dbtracer-leeg,.dbtracer-voet{color:#9db0cc}
.dbtracer-diep-aan{color:#8fd6a0 !important}

/* De rendertijd onderaan: het laatste getal dat PHP nog kwijt kan, dus een
   streep erboven en niet in het grijs van de voetnoot eronder. */
.dbtracer-render{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin:1rem 0 .4rem;padding-top:.6rem;border-top:1px solid #2b3a55}
.dbtracer-render strong{color:#fff}
.dbtracer-render span{color:#9db0cc}
.dbtracer-render.is-traag strong{color:#ffbf47}

/* Elke query is een eigen klepje. */
.dbq-lijst{list-style:none;margin:.5rem 0 0;padding:0}
.dbq-lijst > li{margin:0 0 2px}

.dbq > summary{display:grid;align-items:center;gap:.6rem;cursor:pointer;
  grid-template-columns:2.2rem 4.2rem 1fr 5.5rem 5rem 5rem;
  padding:.35rem .5rem;border-radius:4px;background:#16202f;list-style:none}
.dbq > summary::-webkit-details-marker{display:none}
.dbq > summary:hover{background:#1c2839}
.dbq[open] > summary{background:#1c2839;border-bottom:1px solid #2b3a55;
  border-radius:4px 4px 0 0}

.dbq-nr{color:#6b7f9c;text-align:right}
.dbq-soort{color:#7fb3ff;font-weight:700;font-size:.78rem;letter-spacing:.03em}
.dbq-kort{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfe0f7}
.dbq-rijen,.dbq-ms{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dbq-rijen{color:#9db0cc}
.dbq-balk{display:block;height:.5rem;background:#22303f;border-radius:999px;overflow:hidden}
.dbq-balk i{display:block;height:100%;background:#4a86d8}

/* Boven de honderd milliseconde is het de moeite waard om naar te kijken. */
.dbq.is-traag > summary{background:#2a1c1c}
.dbq.is-traag .dbq-ms{color:#ff9d9d;font-weight:700}
.dbq.is-traag .dbq-balk i{background:#d86a6a}

.dbq-detail{padding:.75rem .6rem 1rem;background:#131c29;border-radius:0 0 4px 4px}
.dbq-detail h4{margin:.9rem 0 .35rem;color:#9db0cc;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.05em}
.dbq-detail h4:first-child{margin-top:0}
.dbq-sql{margin:0;padding:.6rem .7rem;background:#0c131d;border-radius:4px;
  color:#cfe0f7;overflow-x:auto;white-space:pre;font-size:12px;line-height:1.5}

.dbq-kolommen{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  margin-top:.6rem}
.dbq-waarden,.dbq-herkomst{margin:0;padding:0;list-style:none}
.dbq-waarden li{display:flex;gap:.5rem;padding:.15rem 0}
.dbq-sleutel{color:#6b7f9c;min-width:2.2rem}
.dbq-herkomst li{padding:.15rem 0;color:#9db0cc}
/* De eerste stap is de aanroeper zelf; de rest is het verhaal eromheen. */
.dbq-herkomst li:first-child code{color:#cfe0f7}

.dbq-plan-wrap{overflow-x:auto}
.dbq-plan{border-collapse:collapse;font-size:12px;min-width:100%}
.dbq-plan th{text-align:left;color:#9db0cc;font-weight:600;padding:.3rem .5rem;
  border-bottom:1px solid #2b3a55;white-space:nowrap}
.dbq-plan td{padding:.25rem .5rem;border-bottom:1px solid #1c2637;white-space:nowrap}
.dbq-let-op{color:#ffbf47;font-weight:700}
.dbq-aandeel{margin:.9rem 0 0;font-size:12px}

/* Merkje bij een link die alleen intern zichtbaar is. */
.badge-intern{font-size:.68rem;padding:.05em .35em;border-radius:4px;
  background:var(--brand-tint);color:var(--brand-dark);vertical-align:middle}

/* Het huidige adres in het beheer. */
.ip-nu{display:flex;flex-direction:column;gap:.3rem;margin:.6rem 0 1rem}


/* ------------------------------------------- hoofdcategorieblok op een verticaal */
.hoofdblok{margin:0 0 2rem;padding:0 0 1.5rem;border-bottom:1px solid var(--rand)}
.hoofdblok:last-of-type{border-bottom:0}
.hoofdblok-kop{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:0 0 .9rem}
.hoofdblok-kop h2{margin:0;font-size:1.25rem}
.hoofdblok-kop h2 a{color:inherit;text-decoration:none}
.hoofdblok-kop h2 a:hover{color:var(--brand)}
.hoofdblok-kop .cat-icon{width:1.6rem;height:1.6rem;flex:none}
.hoofdblok-alles{margin-left:auto;white-space:nowrap;font-size:.9rem}

/* De subcategorieën als rustige rij, niet als tegels: op een verticaal staan er
   al snel tachtig, en tachtig tegels is geen overzicht meer. */
.subrij{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.subrij a{display:flex;align-items:center;gap:.5rem;padding:.45rem .7rem;
  border:1px solid var(--rand);border-radius:8px;background:#fff;
  text-decoration:none;color:var(--tekst)}
.subrij a:hover{border-color:var(--brand);color:var(--brand)}
/* Klein beeldmerk voor de naam: dezelfde herkenning als in het menu en op de
   tegels, zonder dat de rij een tegel wordt. flex:none, anders krimpt het
   icoontje mee zodra een naam over twee regels loopt. */
.subrij .cat-icon{flex:none;width:1.15rem;height:1.15rem;color:var(--brand)}
.subrij a:hover .cat-icon{color:inherit}
.subrij-naam{flex:1 1 auto}
.subrij-aantal{color:var(--muted);font-size:.82rem;font-variant-numeric:tabular-nums}

.cat-header-hoofd{display:flex;align-items:center;gap:1rem}
.cat-header-hoofd .cat-icon-lg{flex:none}

.block-kop{margin:0 0 1rem;font-size:1.2rem}
.menu-item-alles{font-weight:600}


/* --------------------------------------------------- Meer producten laden */
.meer{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  margin:2rem 0 1rem;text-align:center}
.meer .btn{min-width:12rem}
.js-meer-knop.is-bezig{opacity:.65;pointer-events:none}
.meer-einde{margin:2rem 0 1rem;text-align:center}


/* ------------------------------------------- Voorstellen onder het zoekveld */
/* Links uitlijnen staat er expliciet bij: het zoekvak op de homepagina staat in
   een blok dat alles centreert, en dan komen de producttitels midden in de rij
   te staan met een gat ervoor. */
.voorstellen{position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:80;text-align:left;
  background:#fff;border:1px solid var(--rand);border-radius:10px;
  box-shadow:0 12px 32px rgba(15,23,42,.18);overflow:hidden;max-height:70vh;overflow-y:auto}
.voorstellen[hidden]{display:none}

.voorstel{display:flex;align-items:center;gap:.7rem;padding:.5rem .75rem;
  text-decoration:none;color:var(--tekst);border-bottom:1px solid var(--rand-licht,#eef1f6)}
.voorstel:last-child{border-bottom:0}
.voorstel:hover,.voorstel.is-aan{background:var(--brand-tint)}
.voorstel b{color:var(--brand)}

.voorstel-beeld{flex:none;width:2.4rem;height:2.4rem;display:flex;align-items:center;
  justify-content:center;background:#f6f8fb;border-radius:6px;overflow:hidden}
.voorstel-beeld img{max-width:100%;max-height:100%;object-fit:contain}
.voorstel-tekst{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voorstel-prijs{flex:none;color:var(--muted);font-size:.88rem;white-space:nowrap}
.voorstel-soort{flex:none;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--brand-dark);background:var(--brand-tint);padding:.1em .45em;border-radius:4px}
.voorstel-cat{font-weight:600}
.voorstel-alles{justify-content:center;font-weight:600;color:var(--brand);background:#f8fafc}
.voorstel-leeg{margin:0;padding:.75rem;color:var(--muted)}


/* Het lokveld voor bots. Niet display:none: sommige bots slaan verborgen velden
   over, maar trappen wel in een veld dat buiten beeld staat. */
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* Melding op een keuzehulp die alleen intern zichtbaar is. */
.guide-intern{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  margin:0 0 1.2rem;padding:.6rem .8rem;border-radius:8px;
  background:var(--brand-tint);color:var(--brand-dark);font-size:.9rem}


/* ------------------------------------------------- Winkellogo in de tabel */
/* Vaste hoogte en een vrije breedte: de logo's lopen van een vierkant
   pictogram tot een breed woordmerk, en op een vaste breedte zou het ene
   uitgerekt en het andere platgedrukt worden. object-fit houdt de verhouding
   heel binnen het vak dat de rij ervoor overheeft. */
.vendor-logo{display:block;height:26px;width:auto;max-width:120px;
  object-fit:contain;object-position:left center}

@media (max-width:640px){
  .vendor-logo{height:22px;max-width:96px}
}


/* --------------------------------------- Winkelkolom in de vergelijktabel */
/* Het logo vooraan, met een vaste breedte, zodat de merkjes van alle rijen op
   dezelfde plek beginnen. Zonder die breedte schuift elke rij op naar gelang
   het logo een vierkant pictogram of een breed woordmerk is. */
.winkelcel{display:flex;align-items:center;gap:.75rem}
.winkelcel .vendor-logo{flex:none;width:96px}
.winkelcel .vendor-badge{flex:none;max-width:96px}
.winkelcel-merkjes{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;min-width:0}

@media (max-width:640px){
  .winkelcel{gap:.5rem}
  .winkelcel .vendor-logo{width:80px}
}


/* ------------------------------------ Kortingscodes en acties bij winkels */
.acties{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.actie{margin:0}
.actie-link{display:grid;align-items:center;gap:1rem;
  grid-template-columns:7rem 1fr auto;
  padding:.85rem 1rem;background:#fff;border:1px solid var(--rand);border-radius:10px;
  text-decoration:none;color:var(--tekst)}
.actie-link:hover{border-color:var(--brand);box-shadow:0 6px 18px rgba(15,23,42,.07)}

/* Een actie mét code is het meest bruikbaar, dus die valt op. */
.actie-code .actie-link{border-color:var(--brand-tint);background:linear-gradient(90deg,var(--brand-tint),#fff 30%)}

.actie-winkel{display:flex;align-items:center;justify-content:flex-start}
.actie-winkel img{max-width:100%;max-height:26px;object-fit:contain;object-position:left center}
.actie-winkelnaam{font-weight:700;font-size:.9rem}

.actie-tekst{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.actie-tekst strong{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.actie-actie{white-space:nowrap}

/* Gestippeld zoals een afscheurbon; zo zie je meteen dat het iets is om over te
   nemen en niet zomaar een merkje. */
.actie-codeblok{display:inline-block;padding:.4em .8em;border:2px dashed var(--brand);
  border-radius:8px;background:#fff;color:var(--brand-dark);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.04em}
.actie-knop{color:var(--brand);font-weight:600}

@media (max-width:640px){
  .actie-link{grid-template-columns:1fr auto;gap:.5rem .75rem}
  .actie-winkel{grid-column:1 / -1}
  .actie-winkel img{max-height:22px}
}

/* ---------------------------------------------------------------- *
   Cookiemelding

   Onderaan vastgeplakt en niet als scherm over de hele pagina: de melding hoort
   de site niet te gijzelen. Je kunt eronder gewoon doorlezen en doorklikken,
   wat ook precies de reden is dat "alleen noodzakelijk" hier even makkelijk is
   als "alles accepteren".
 * ---------------------------------------------------------------- */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -8px 30px rgba(20,40,70,.12);
}
.consent[hidden]{display:none}
.consent-inner{
  max-width:var(--maxw);margin:0 auto;padding:16px 18px;
  display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;
}
.consent-tekst{flex:1 1 460px;min-width:0}
.consent-tekst strong{display:block;margin-bottom:2px}
.consent-tekst p{margin:0;color:var(--muted)}
.consent-tekst a{color:var(--brand);text-decoration:underline}
.consent-keuzes{display:grid;gap:10px;margin-top:14px;max-width:64ch}
/* Zonder deze twee regels wint .consent-keuzes van het hidden-attribuut, en
   staat het uitklapdeel meteen open. Hetzelfde geldt voor de knop erbij: .btn
   zet zijn eigen display. */
.consent-keuzes[hidden],.consent-knoppen .btn[hidden]{display:none}
.consent-keuze{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;line-height:1.45}
.consent-keuze input{margin-top:.25em;flex:none}
.consent-keuze strong{display:inline;margin-right:.35em}
.consent-knoppen{
  flex:0 0 auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-left:auto;
}
/* De comparebar staat op dezelfde plek; die moet omhoog zolang de melding er is. */
body.heeft-cookiemelding .comparebar{bottom:auto}
@media (max-width:640px){
  .consent-inner{padding:14px}
  .consent-knoppen{width:100%;margin-left:0}
  .consent-knoppen .btn{flex:1 1 auto}
}

/* ---------------------------------------------------------------- *
   Vaste tekstpagina's: over ons, privacy, cookies, voorwaarden.

   Smaller dan de rest van de site. Een regel van honderd tekens leest niemand
   uit, en dit zijn precies de pagina's waar het erom gaat dat mensen ze wél
   lezen.
 * ---------------------------------------------------------------- */
.tekstpagina{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:28px 32px;max-width:78ch;margin:0 auto;
}
.tekstpagina h1{margin-bottom:.5em}
.tekstpagina h2{margin-top:1.6em}
.tekstpagina h3{margin-top:1.2em;font-size:1rem}
.tekstpagina p{margin:0 0 1em}
.tekstpagina .lead{font-size:1.05rem;color:var(--ink)}
.tekstpagina a{color:var(--brand);text-decoration:underline}
.tekstpagina .kruimels{margin-bottom:14px;font-size:.82rem;color:var(--muted)}
.tekstpagina .kruimels a{color:var(--muted)}
.tekstlinks{margin:0 0 1em;padding-left:1.2em}
.tekstlinks li{margin-bottom:.45em}
.kerncijfers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;margin:0 0 1.6em;
}
.kerncijfers div{
  background:var(--brand-tint);border-radius:var(--radius-sm);padding:12px 14px;
}
.kerncijfers dt{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.kerncijfers dd{margin:2px 0 0;font-size:1.3rem;font-weight:700}
.tekst-tabel{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.86rem}
.tekst-tabel th,.tekst-tabel td{
  text-align:left;vertical-align:top;padding:8px 10px;border-bottom:1px solid var(--line);
}
.tekst-tabel th{color:var(--muted);font-weight:600;white-space:nowrap}
.tekst-tabel td:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}

/* Op een telefoon past een tabel van drie kolommen niet als er niets mag
   afbreken: de cookiepagina duwde de hele pagina honderdvijftig pixels open en
   liet hem heen en weer schuiven. Namen als "_ga, _ga_*" mogen daar best over
   twee regels, en de kolom met uitleg helemaal. */
@media (max-width:680px){
  .tekst-tabel{font-size:.82rem}
  .tekst-tabel th,.tekst-tabel td,.tekst-tabel td:first-child{white-space:normal;padding:7px 6px}
  .tekst-tabel td:first-child{word-break:break-word}
}

.footer-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:.82rem}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--brand)}

/* ---------------------------------------------------------------- *
   Prijsoverzicht op de categoriehubs.

   Een tabel en geen tegels: dit zijn cijfers die je naast elkaar wilt lezen,
   en een tabel is ook de vorm die een zoekmachine en een AI-assistent
   begrijpen. Op een smal scherm schuift hij horizontaal in plaats van in
   elkaar te schuiven; vier bedragen naast elkaar zijn nu eenmaal breed.
 * ---------------------------------------------------------------- */
.prijsoverzicht{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 22px;margin:28px 0;
}
.prijsoverzicht h2{margin-bottom:.7em}
.prijsoverzicht-scroll{overflow-x:auto;margin:0 -4px}
.prijstabel{width:100%;border-collapse:collapse;font-size:.9rem}
.prijstabel th,.prijstabel td{
  text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.prijstabel thead th{
  color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.03em;
}
.prijstabel tbody th{font-weight:600}
.prijstabel tbody th a{color:var(--brand)}
.prijstabel tbody th a:hover{text-decoration:underline}
.prijstabel tbody tr:last-child th,.prijstabel tbody tr:last-child td{border-bottom:0}
.prijstabel .num{text-align:right}
.prijsoverzicht > p{margin:12px 0 0}

/* ---------------------------------------------------------------- *
   "Wat wij zien" op de productpagina.

   Staat boven de omschrijving van de winkel, en die omschrijving is
   ingeklapt. Wat hierin staat komt uit onze eigen cijfers en staat nergens
   anders; de tekst eronder staat op elke site die dezelfde feed inleest.
 * ---------------------------------------------------------------- */
.inzicht{
  background:var(--brand-tint);border-radius:var(--radius-sm);
  padding:14px 16px;margin:14px 0;
}
.inzicht-kop{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--brand-dark);margin:0 0 8px}
.inzicht ul{margin:0;padding-left:1.1em}
.inzicht li{margin-bottom:.4em;font-size:.9rem;line-height:1.5}
.inzicht li:last-child{margin-bottom:0}
.product-desc-blok{margin:12px 0}
.product-desc-blok > summary{
  cursor:pointer;color:var(--muted);font-size:.88rem;padding:4px 0;
}
.product-desc-blok > summary:hover{color:var(--brand)}
.product-desc-blok .product-desc{margin-top:8px}

/* De fasetabel in de tracer: waar ging de tijd heen vóór de queries begonnen. */
.dbtracer-fases{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:.82rem}
.dbtracer-fases caption{text-align:left;font-weight:700;padding-bottom:6px}
.dbtracer-fases th,.dbtracer-fases td{padding:4px 8px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
.dbtracer-fases th{font-weight:500}
.dbtracer-fases .num{text-align:right;white-space:nowrap}
.dbtracer-fases tr.is-traag th,.dbtracer-fases tr.is-traag td{color:#ffb4a8;font-weight:700}
.dbtracer-balk{width:40%}
.dbtracer-balk span{display:block;height:8px;border-radius:4px;background:#4d8dff}
.dbtracer-fases tr.is-traag .dbtracer-balk span{background:#ff6b57}

/* ---------------------------------------------------------------- *
   Navigatie op een smal scherm

   Op een telefoon nam de kop bijna de halve hoogte in: logo, twee regels
   verticalen, de zoekbalk en dan zeven hoofdcategorieën over vier regels. En
   dat geheel was ook nog sticky, dus het bleef staan tijdens het scrollen.

   Nu: logo en een knop op de eerste regel, de zoekbalk op de tweede, en al het
   andere achter die knop. Zoeken blijft dus zichtbaar, want dat is waarvoor
   iemand hier komt.

   Alles hieronder hangt aan .heeft-menuknop, en die klasse zet app.js. Zonder
   JavaScript is er geen knop en blijft de navigatie gewoon uitgeklapt staan.
 * ---------------------------------------------------------------- */
.menuknop{
  display:none;align-items:center;gap:.5em;margin-left:auto;
  background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:.5em .8em;font:inherit;font-weight:600;font-size:.9rem;
  color:var(--muted);cursor:pointer;
}
.menuknop:hover{border-color:#cfd8e3;color:var(--ink)}
.menuknop[aria-expanded="true"]{background:var(--brand-tint);border-color:var(--brand);color:var(--brand)}

/* Drie streepjes, getekend met randen: geen extra bestand en hij neemt de
   tekstkleur over, dus hij kleurt vanzelf mee als de knop actief wordt. */
.menuknop-strepen{
  position:relative;display:block;width:18px;height:2px;flex:none;
  background:currentColor;border-radius:2px;
}
.menuknop-strepen::before,.menuknop-strepen::after{
  content:"";position:absolute;left:0;width:18px;height:2px;
  background:currentColor;border-radius:2px;transition:transform .15s ease,top .15s ease;
}
.menuknop-strepen::before{top:-6px}
.menuknop-strepen::after{top:6px}
/* Open: een kruis, zodat de knop ook zegt dat hij weer dichtgaat. */
.menuknop[aria-expanded="true"] .menuknop-strepen{background:transparent}
.menuknop[aria-expanded="true"] .menuknop-strepen::before{top:0;transform:rotate(45deg)}
.menuknop[aria-expanded="true"] .menuknop-strepen::after{top:0;transform:rotate(-45deg)}

/* Negenhonderd en niet zevenhonderdzestig: op een tablet in staande stand
   wrong de balk al. Acht hoofdcategorieën passen pas naast elkaar op een echt
   breed scherm, en daaronder werd het twee regels met afgebroken woorden. */
@media (max-width:900px){
  .heeft-menuknop .menuknop{display:inline-flex}

  /* De zoekbalk op een eigen regel, tussen de knop en het menu in. Het logo
     hoeft hier niet meer op te rekken: het middenuitlijnen geldt alleen zolang
     alles op één regel staat. */
  .heeft-menuknop .header-inner{flex-wrap:wrap;gap:10px}
  .heeft-menuknop .logo{flex:0 0 auto}
  .heeft-menuknop .search{order:3;flex-basis:100%;max-width:none;margin:0}

  /* Dicht: weg. Open: eronder, en scrollbaar als het niet past. */
  .heeft-menuknop .verticals,
  .heeft-menuknop .subnav{display:none}

  .heeft-menuknop.nav-open .verticals{
    display:flex;order:4;flex-basis:100%;flex-direction:column;gap:2px;margin:0;
    border-top:1px solid var(--line);padding-top:8px;
  }
  .heeft-menuknop.nav-open .verticals a{padding:.7em .6em;font-size:.95rem;color:var(--ink)}

  .heeft-menuknop.nav-open .subnav{
    display:block;max-height:calc(100vh - 210px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .heeft-menuknop.nav-open .subnav-inner{flex-direction:column;gap:0;padding-bottom:14px}
  .heeft-menuknop.nav-open .subnav-sep{display:none}
  .heeft-menuknop.nav-open .subnav-inner > a,
  .heeft-menuknop.nav-open .menu-top{padding:.7em .6em;font-size:.95rem;border-bottom:0}

  /* Elke hoofdcategorie krijgt een scheidingslijn, anders wordt het één lap. */
  .heeft-menuknop.nav-open .menu,
  .heeft-menuknop.nav-open .subnav-inner > a{border-top:1px solid var(--line)}
  .heeft-menuknop.nav-open .subnav-inner > a:first-child{border-top:0}

  /* Eén kolom in het uitklapje: twee kolommen met lange categorienamen wordt
     afgekapte tekst naast afgekapte tekst. */
  .heeft-menuknop.nav-open .menu-grid{grid-template-columns:1fr}
  .heeft-menuknop.nav-open .menu-panel{padding:.2rem 0 .6rem}
  .heeft-menuknop.nav-open .menu-item{padding:.6em .6em .6em 1.2em}

  /* De kop mag niet meer meescrollen zodra het menu open staat: anders staat
     hij vast terwijl je in het menu naar beneden wilt. */
  .heeft-menuknop.nav-open .site-header{position:static}
}

/* Onder de vierhonderd pixels past het woordmerk niet meer naast de knop, en
   dan valt de knop naar een eigen regel. Het woord "Menu" gaat er dan af; de
   drie streepjes zeggen genoeg en de tekst blijft staan voor een schermlezer. */
@media (max-width:400px){
  .heeft-menuknop .menuknop{padding:.5em .7em}
  .heeft-menuknop .menuknop-tekst{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
}

/* ---------------------------------------------------------------- *
   Smalle telefoons (320 px en daaromtrent)

   Een invoerveld in een flexrij krimpt niet vanzelf: min-width staat op auto
   en dat is bij een input de breedte die de browser er zelf aan geeft. Samen
   met de knop ernaast werd dat breder dan het scherm en ging de hele pagina
   heen en weer schuiven. Nul als minimum lost dat op, zonder dat er op een
   breed scherm iets verandert.
 * ---------------------------------------------------------------- */
.search input,.hero-search input{min-width:0}

@media (max-width:520px){
  /* 32 pixels binnenmarge aan weerskanten is een tiende van een scherm van 320.
     Dat ging van de leesbreedte af en duwde bovendien de knoppen erbuiten. */
  .tekstpagina{padding:20px 16px}
  .hero{padding:28px 12px 22px}
  /* Een knop met een lange tekst mag over twee regels; buiten beeld staan mag
     niet. */
  .tekstpagina .btn{white-space:normal;text-align:center}
}

/* Een woord dat langer is dan het scherm mag afbreken.

   Op 320 pixels liep de over-ons dertig pixels uit zijn jasje zonder dat er één
   element te breed was: het was een woord dat niet paste en gewoon buiten zijn
   vak doorliep. Dat telt wel mee voor de breedte van de pagina, en dus ging de
   hele pagina heen en weer schuiven. Alleen als het echt niet past, dus aan
   gewone zinnen verandert er niets. */
body{overflow-wrap:break-word}

/* ---------------------------------------------------------------- *
   Filters in- en uitklapbaar op een smal scherm

   Op een telefoon stond het hele filterpaneel boven de producten: prijs, tien
   merken, specificaties en een knop, samen goed voor een paar schermen scrollen
   voordat je het eerste product zag. Terwijl je op een categoriepagina komt om
   producten te zien, niet om te filteren.

   Op een breed scherm verandert er niets: de summary is daar verborgen en het
   paneel staat open, precies zoals het stond.
 * ---------------------------------------------------------------- */
/* De kop blijft op een breed scherm gewoon staan, want dat is de kop van het
   paneel. Alleen het klikken eraf: daar valt niets in of uit te klappen, en een
   kop die dichtklapt terwijl er geen knop bij staat is verwarrend. Het script
   houdt hem op breed hoe dan ook open, ook als iemand hem met het toetsenbord
   probeert te sluiten. */
.filters > summary{
  display:flex;align-items:center;gap:.6em;list-style:none;pointer-events:none;
}
.filters > summary::-webkit-details-marker{display:none}
.filters > summary h2{flex:1}
.filters-teller{
  font-size:.78rem;font-weight:600;color:var(--brand);
  background:var(--brand-tint);border-radius:99px;padding:.15em .6em;
}
.filters-wissen{margin:0 0 10px}

@media (max-width:900px){
  /* De kop wordt de knop: over de volle breedte, met een pijl die meedraait. */
  .filters > summary{cursor:pointer;pointer-events:auto;padding:.3em 0}
  .filters > summary::after{
    content:"";width:.5em;height:.5em;flex:none;
    border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
    transform:rotate(45deg) translateY(-2px);transition:transform .12s ease;
  }
  .filters[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
  .filters > summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

  /* Dicht mag het niet meer opvallen dan een regel; de producten zijn het punt. */
  .filters:not([open]){padding:12px 16px}
  .filters .filters-head{margin-bottom:0}
  .filters[open] .filters-head{margin-bottom:10px}
}

/* Kopje van een tussenlaag in het uitklapmenu. Alleen aanwezig waar er ook
   echt een laag tussen zit; zeven van de tien bovenste categorieën hebben er
   geen en tonen hun items dan gewoon direct. */
.menu-kop{
  display:block;margin:.8rem 0 .2rem;padding:0 .6rem;
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);
}
.menu-kop:hover{color:var(--brand)}
.menu-panel .menu-item-alles{margin-bottom:.3rem}

/* ---------------------------------------------------------------- *
   De categoriebalk op één regel

   Met tien bovenste categorieën liep de balk over twee regels, en dan wringt
   het zweven: het paneel opent onder de hele balk, dus om bij de tweede regel
   te komen ga je met de muis over items van de eerste heen en klapt er telkens
   een ander paneel open.

   Drie dingen samen maken het passend: Deals is naar de kop verhuisd, de balk
   loopt door tot de schermrand in plaats van tot de leeskolom, en de items zijn
   krapper gezet. Past het op een smal bureaubladscherm alsnog niet, dan schuift
   de balk horizontaal in plaats van af te breken; het paneel hangt aan .subnav
   en schuift dus niet mee weg.
 * ---------------------------------------------------------------- */
/* Dezelfde leeskolom als de kop erboven: even breed, even ver van de rand. De
   balk liep eerst tot de schermrand en begon dus links van het woordmerk, en
   dat leest als een fout in de uitlijning. Past de inhoud niet, dan schuift hij
   binnen die kolom. */
.subnav-inner{
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:0;
}
.subnav-inner::-webkit-scrollbar{display:none}
.subnav .menu{flex:none}
/* Krap gezet, want in de leeskolom is het passen: negen items vroegen in de
   oude maatvoering 1.341 pixels en er is er 1.180. */
.subnav-inner > .menu > .menu-top{padding:.6rem .42rem;font-size:.8rem;gap:.3rem}
.subnav-inner > .menu > .menu-top::after{width:.36em;height:.36em;margin-left:0}

/* Deals in de kop, naast de wenslijst. */
.kopdeals{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.45em .8em;border-radius:8px;font-weight:700;font-size:.9rem;color:var(--red);
}
.kopdeals:hover{background:#fdf2f1}

@media (max-width:900px){
  /* In het uitklapmenu op een telefoon staat alles onder elkaar; daar mag de
     balk juist niet schuiven, anders raak je items kwijt buiten beeld. */
  .heeft-menuknop.nav-open .subnav-inner{flex-wrap:wrap;overflow-x:visible}
  .heeft-menuknop.nav-open .subnav-inner > .menu > .menu-top{padding:.7em .6em;font-size:.95rem}
}

/* Tegels boven een productlijst: een categorie die zowel eigen producten heeft
   als categorieën eronder. Iets krapper dan op een tegelpagina, want hier zijn
   ze een aanvulling en niet het hoofdgerecht. */
.cat-grid-onder{margin-bottom:22px}
.cat-grid-onder .cat-tile{padding:.7rem .6rem}
.cat-grid-onder .cat-icon-lg{width:1.9em;height:1.9em}