/* ===== 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. */
.logo{display:flex;align-items:center;text-decoration:none}
.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}
.search{flex:1;display:flex;max-width:560px;border:2px solid var(--brand);border-radius:11px;overflow:hidden}
.search input{flex:1;border:0;padding:.6em .9em;font-size:.95rem;outline:none}
.search button{border:0;background:var(--brand);color:#fff;padding:0 1.2em;font-weight:600;cursor:pointer}
.search button:hover{background:var(--brand-dark)}
.verticals{display:flex;gap:6px;margin-left:auto}
.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. */
.subnav{position:relative;border-top:1px solid var(--line);background:#fff}
.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{display:flex;max-width:520px;margin:0 auto;border:2px solid var(--brand);border-radius:12px;overflow:hidden;background:#fff}
.hero-search input{flex:1;border:0;padding:.8em 1em;font-size:1rem;outline:none}
.hero-search button{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}
.rating-count{font-size:.78rem;color:var(--muted)}

/* ===== 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}
.cat-intro{max-width:760px;color:var(--muted)}
.cat-layout{display:grid;grid-template-columns:248px 1fr;gap:22px;align-items:start}
.filters{position:sticky;top:120px;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}
.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:120px}
.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}
.vendor-rating{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:.78rem;color:var(--muted)}
.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 */
.price-chart{width:100%;height:auto;display:block}
.price-chart .grid{stroke:var(--line);stroke-width:1}
.price-chart .axis{fill:var(--muted);font-size:11px}
.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}

/* ===== 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}
.deal-flag{display:inline-block;background:#fff4d6;color:var(--amber);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}
  .filters{position:static}
  .product-top{grid-template-columns:1fr}
  .product-gallery{position:static;max-width:280px}
  .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}
  .search{order:3;flex-basis:100%;max-width:none}
  .verticals{margin-left:0}
  .hero h1{font-size:1.6rem}
  .proscons{grid-template-columns:1fr}
  .offers thead{display:none}
  .offers,.offers tbody,.offers tr,.offers td{display:block;width:100%}
  .offers tr{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;padding:6px}
  .offers td{border:0;text-align:left !important;padding:4px 8px}
  .offers td.num{text-align:left}
  .usp-bar{grid-template-columns:1fr}
}


/* ------------------------------------------------------------- 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. */

@media (max-width:760px){
  .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-tabel{width:100%;border-collapse:collapse}
.dbtracer-tabel th{text-align:left;color:#9db0cc;font-weight:600;
  padding:.35rem .5rem;border-bottom:1px solid #2b3a55}
.dbtracer-tabel td{padding:.3rem .5rem;border-bottom:1px solid #1c2637;vertical-align:top}
.dbtracer-tabel .num{text-align:right;white-space:nowrap}
.dbtracer-tabel code{white-space:pre-wrap;word-break:break-word;color:#cfe0f7}
/* Boven de honderd milliseconde is het de moeite waard om naar te kijken. */
.dbtracer-tabel tr.is-traag td{background:#2a1c1c}
.dbtracer-tabel tr.is-traag .num:last-child{color:#ff9d9d;font-weight:700}

/* 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:baseline;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)}
.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}