/* ==========================================================================
   Koffiezetters — gedeelde editorial-laag (v2, 19 aug 2026)
   ==========================================================================
   Eén bestand voor de hele site. Stond hiervoor als inline <style>-blok in elke
   pagina gekopieerd; daardoor was een vormgeving-wijziging 39 bestanden bewerken.
   Nu: alle pagina's linken hierheen, één edit raakt alles.

   Deze laag ligt BOVENOP de basis-CSS die per pagina is meegegenereerd, vandaar
   de !important-declaraties: zonder die vlag wint de oudere regel uit het
   basisblok. Nieuwe componenten (.k-*) hebben ze niet nodig.

   PRINCIPE: hiërarchie. Per scherm is er één plek waar het oog hoort te landen —
   de aanbeveling. Alles daaromheen is bewust rustiger: minder kleur, minder
   schaduw, minder contrast. Een pagina waar alles schreeuwt, stuurt niemand.
   ========================================================================== */

:root {
  /* Achtergrond bijna wit; cream is accent, geen vlak. */
  --bg:#FDFCFA;
  --cream:#F6EFE3;
  --cream-soft:#FBF7F0;
  --paper:#FFFFFF;

  /* Merk: terracotta, frisser en roder dan de oude #B15A28. */
  --accent:#C0392B;
  --accent-deep:#9C2B1F;
  --accent-ink:#8E2A1E;
  --btn-top:#D6472F;
  --btn-bottom:#B03020;

  --ink:#1F1A16;
  --ink-soft:#4A423B;
  --muted:#7A7069;
  --line:#E9E3DA;
  --line-soft:#F1ECE4;

  /* Neutrale schaduwen — nooit gekleurd, ook niet onder knoppen. */
  --shadow-sm:0 1px 2px rgba(20,16,12,.05), 0 2px 8px rgba(20,16,12,.05);
  --shadow-md:0 2px 6px rgba(20,16,12,.06), 0 12px 28px -14px rgba(20,16,12,.18);
  --shadow-lg:0 3px 8px rgba(20,16,12,.07), 0 22px 46px -22px rgba(20,16,12,.24);

  --radius:20px;
  --radius-sm:14px;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

/* ── basis ─────────────────────────────────────────────────────────────── */

body {
  font-family:var(--sans)!important;
  background:var(--bg)!important;
  color:var(--ink)!important;
  font-size:16px!important;
  line-height:1.62!important;
  -webkit-font-smoothing:antialiased;
}

/* Serif UITSLUITEND voor koppen. Prijzen, labels en cijfers staan in Inter:
   een serif-prijs leest als decoratie, terwijl het een feit moet zijn. */
h1, h2, h3, h4,
.section-head h2, .gids-title, .method-cta h2 {
  font-family:var(--serif)!important;
  font-weight:600!important;
  letter-spacing:-.015em!important;
  color:var(--ink)!important;
  text-shadow:none!important;
}
h1 { font-size:clamp(1.75rem,3.2vw,2.35rem)!important; line-height:1.18!important; }
h2 { font-size:1.35rem!important; line-height:1.3!important; margin-top:2.1rem!important; }
h3 { font-size:1.08rem!important; line-height:1.35!important; }
.product-name, .tile-name, .price, .product-price, .k-price {
  font-family:var(--sans)!important;
}

a { color:var(--accent-ink); }

/* ── header + kruimelpad: klein en terughoudend ───────────────────────── */

.header {
  background:rgba(253,252,250,.88)!important;
  backdrop-filter:saturate(1.1) blur(8px);
  border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;
}
.brand-name { font-family:var(--serif)!important; letter-spacing:-.02em; }
.brand-name em { font-style:normal; color:var(--accent); }
.brand-tagline { color:var(--muted)!important; }

.breadcrumbs {
  font-size:.8rem!important;
  color:var(--muted)!important;
  padding-top:18px!important;
  padding-bottom:0!important;
}
.breadcrumbs a { color:var(--muted)!important; text-decoration:none; }
.breadcrumbs a:hover { color:var(--accent-ink)!important; }
.breadcrumbs .current { color:var(--ink-soft)!important; }

/* ── kop van de pagina: compact, geen decorpaneel ─────────────────────── */

.hero:has(.hero-meta), .home-hero {
  background:none!important;
  border:none!important;
  border-top:none!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:16px 0 8px!important;
  text-align:left!important;
  max-width:none!important;
}
.hero:has(.hero-meta) h1, .home-hero h1 {
  background:none!important;
  -webkit-text-fill-color:currentColor!important;
  color:var(--ink)!important;
  margin:0 0 10px!important;
  max-width:22ch;
}
.home-hero { text-align:center!important; }
.home-hero h1 { margin-left:auto!important; margin-right:auto!important; }
.home-hero .accent { color:var(--accent)!important; background:none!important;
  -webkit-text-fill-color:currentColor!important; }

/* Eén zin onder de kop, niet drie. */
.hero:has(.hero-meta) .pitch, .home-hero .pitch {
  color:var(--ink-soft)!important;
  font-size:1.02rem!important;
  line-height:1.55!important;
  max-width:62ch;
  margin:0 0 14px!important;
}
.home-hero .pitch { margin-left:auto!important; margin-right:auto!important; }

/* De basis-CSS maakt van de meta-regel een omrande pil-balk; die lijst is hier
   ruis boven de kop. */
.hero:has(.hero-meta) .hero-meta {
  justify-content:flex-start!important; gap:8px!important;
  background:none!important; border:none!important; box-shadow:none!important;
  padding:0!important; margin-top:12px!important;
}
.hero:has(.hero-meta) .hero-meta span:not(.dot) {
  background:var(--cream-soft)!important;
  border:1px solid var(--line)!important;
  color:var(--muted)!important;
  font-size:.78rem!important;
  padding:4px 11px!important;
  border-radius:999px!important;
}

/* Het decoratieve icoonpaneel duwde de inhoud een half scherm omlaag. Weg:
   de bezoeker komt voor het antwoord, niet voor een illustratie. */
.blog-hero-image, .hero .blog-icon { display:none!important; }

.author-block {
  background:none!important;
  border:none!important;
  border-top:1px solid var(--line)!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:12px 0!important;
  margin:0 0 6px!important;
}
.author-avatar {
  background:var(--cream)!important; color:var(--accent-ink)!important;
  box-shadow:none!important; width:34px!important; height:34px!important;
  font-size:.8rem!important;
}
.author-name { font-size:.9rem!important; }
.author-meta { font-size:.8rem!important; color:var(--muted)!important; }

/* ── vlakken en kaarten ───────────────────────────────────────────────── */

.narrow, .tile, .gids-tile, .product, .blog-card, .faq-section, .cta-block {
  background:var(--paper)!important;
  border:1px solid var(--line)!important;
  border-radius:var(--radius)!important;
  box-shadow:var(--shadow-sm)!important;
}
.tile:hover, .gids-tile:hover, .product:hover, .blog-card:hover {
  transform:translateY(-2px)!important;
  box-shadow:var(--shadow-md)!important;
}
.tile-bg { background:var(--cream-soft)!important; }

/* De sectiekop staat op alle 47 pagina's gecentreerd (elke pagina zet zelf
   `.section-head{text-align:center!important}` ná deze stylesheet). De regel
   hieronder stond nog op `left` en werd dus overal overruled — behalve op het
   ::before-streepje, dat geen tegenhanger met !important had. Gevolg: een los
   terracotta streepje uiterst links onder de hero. Nu volgt de regel de
   werkelijkheid en staat het streepje weer boven de kop waar het bij hoort. */
.section-head { text-align:center!important; }
.section-head::before { margin:0 auto 12px!important; background:var(--accent)!important;
  width:32px!important; height:3px!important; }

/* ── primaire knop: rood-terracotta pil ───────────────────────────────── */

/* `.product-cta` STOND HIER EN HOORT HIER NIET (weggehaald 1 sep 2026).
   Het is de omhullende div, geen knop:
       <div class="product-cta"><a class="btn btn-primary cta-bol">…</a></div>
   Deze regel schilderde dus de doos én de knop erin. Gemeten @375px: doos
   293x90,9 met verloop #D6472F→#B03020, knop 255x64,9 egaal #B15A28 — een
   zichtbare rode rand van 38x26px rondom de knop, op 81 knoppen over 10
   pagina's. Diederik zag het op zijn telefoon als "knop in knop".
   `.cta-button` en `.ws-cta` stonden er ook en komen in de hele repo nergens
   voor; een selector die nergens op slaat verbergt de volgende fout van dit
   type, dus die zijn mee weggehaald. */
.btn-primary, .k-cta, .sc-btn {
  display:inline-block;
  font-family:var(--sans)!important;
  font-weight:600!important;
  color:#fff!important;
  background:linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bottom) 100%)!important;
  border:1px solid var(--btn-bottom)!important;
  /* Glans-rand bovenaan geeft de pil reliëf zonder gekleurde gloed eronder. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), var(--shadow-sm)!important;
  border-radius:999px!important;
  padding:13px 26px!important;
  text-decoration:none!important;
  line-height:1.2!important;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease!important;
}
/* Knoppen mét een lang, meerregelig label worden als volle pil een ovaal;
   die krijgen dezelfde kleur en glans, maar een rustiger radius. */
.cta-bol, .btn-primary.cta-bol {
  border-radius:16px!important; padding:12px 18px!important; line-height:1.35!important; }

.btn-primary:hover, .k-cta:hover {
  filter:brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), var(--shadow-md)!important;
}
.btn-primary:active, .k-cta:active {
  transform:translateY(1px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.18)!important;
  filter:brightness(.97);
}
/* De secundaire knop stond hier zónder padding en zónder line-height, en erfde
   die van de pagina (13px 24px, line-height ~1,6). De primaire krijgt hierboven
   13px 26px en line-height 1,2 mét !important. Gevolg, gemeten op de homepage
   @375px: 186,3 x 42 naast 181,7 x 48,4 — 4,6px breedte- en 6,4px hoogteverschil
   tussen twee knoppen die onder elkaar staan. Op grill, tuin en sextoy is dat
   1,1 en 2,0, want die drie hebben editorial.css niet.
   Die drie zijn onderling identiek en daarmee de norm; koffie is hier de
   afwijkende, niet de donor. Zie CLAUDE.md, "Als de donor zelf de afwijking is".
   Padding en line-height komen daarom gelijk met de primaire. */
.btn-secondary {
  background:var(--paper)!important; color:var(--ink)!important;
  border:1px solid var(--line)!important; border-radius:999px!important;
  box-shadow:none!important; font-weight:500!important;
  padding:13px 26px!important; line-height:1.2!important;
}

/* ── het zwaartepunt: de aanbeveling ──────────────────────────────────── */

.k-pick {
  background:var(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--accent);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:26px 24px 24px;
  margin:20px 0 8px;
  text-align:center;
}
.k-alt {
  background:var(--cream-soft);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);
  box-shadow:none;
  padding:18px 18px 16px;
  margin:16px 0 6px;
  text-align:center;
}
.k-badge {
  display:inline-block;
  background:var(--cream);
  color:var(--accent-ink);
  font-size:.7rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; margin-bottom:14px;
}
.k-img { max-width:230px; max-height:230px; width:auto; height:auto;
  object-fit:contain; mix-blend-mode:multiply; }
.k-alt .k-img { max-width:150px; max-height:150px; }
.k-name { font-weight:600; font-size:1.06rem; color:var(--ink); margin:12px 0 2px; }
.k-alt .k-name { font-size:.98rem; }
.k-price {
  font-size:1.9rem; font-weight:700; color:var(--ink);
  letter-spacing:-.02em; margin:4px 0 16px; line-height:1.1;
}
.k-alt .k-price { font-size:1.35rem; margin-bottom:12px; }
.k-note { color:var(--muted); font-size:.78rem; margin-top:10px; }

/* ── inhoud: rustige ritmiek ──────────────────────────────────────────── */

/* .narrow is de kaart om het artikel; .content daarbinnen is alleen typografie.
   Allebei een kader gaf een dubbele omlijsting. */
.narrow { padding:32px 36px 34px!important; margin:22px auto 30px!important; }
.content { background:none!important; border:none!important; box-shadow:none!important;
  padding:0!important; }
.content p { color:var(--ink-soft)!important; }
.content h2:first-child, .content > div:first-child + h2 { margin-top:.6rem!important; }

.k-callout {
  background:var(--cream);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);
  padding:16px 20px;
  margin:0 0 22px;
  line-height:1.55;
  color:var(--ink);
}
.k-disclosure {
  background:var(--cream-soft);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:14px 18px;
  margin:26px 0 0;
  font-size:.88rem;
  color:var(--ink-soft);
}

.content table { border:1px solid var(--line)!important; border-radius:var(--radius-sm)!important;
  overflow:hidden!important; font-size:.92rem!important; }
.content table th { background:var(--cream-soft)!important; color:var(--muted)!important;
  font-weight:600!important; font-size:.76rem!important; text-transform:uppercase;
  letter-spacing:.05em; }
.content table td { border-bottom:1px solid var(--line-soft)!important; }

.faq-section { padding:22px 24px!important; }

/* ── voettekst ────────────────────────────────────────────────────────── */

.footer, footer { background:var(--cream-soft)!important; border-top:1px solid var(--line)!important;
  color:var(--muted)!important; }

@media (max-width:640px) {
  .narrow { padding:22px 18px 24px!important; margin:16px auto 22px!important; }
  .k-pick { padding:20px 16px 18px; }
  .k-price { font-size:1.65rem; }
  h2 { font-size:1.22rem!important; }
}

/* ── layout-regels die de vorige editorial-laag al deed ───────────────────
   Dit zijn geen smaakregels maar reparaties op de basis-CSS: zonder deze
   verliezen de tegels hun hoogte en gaat de titel over de foto heen staan.
   Overgenomen uit de v1-laag, ontdaan van de gekleurde schaduwen. */

.top10-grid { gap:1.4rem!important; }
.tile { height:auto!important; min-height:308px!important; display:flex!important;
  flex-direction:column!important; overflow:hidden!important; }
.tile-bg { position:relative!important; inset:auto!important; height:174px!important;
  flex:0 0 174px!important; background:linear-gradient(160deg,#FDFBF7,#F6EFE3)!important;
  display:flex!important; align-items:center!important; justify-content:center!important; }
.tile-bg img { position:static!important; max-height:132px!important; max-width:82%!important;
  width:auto!important; height:auto!important; margin:0!important; object-fit:contain!important; }
.tile-content { position:relative!important; inset:auto!important; flex:1 1 auto!important;
  background:var(--paper)!important; border-top:1px solid var(--line)!important;
  display:flex!important; flex-direction:column!important; }

.stats-bar { gap:10px!important; flex-wrap:wrap!important; justify-content:center!important; }
.stats-bar-item, .trust-item {
  background:var(--paper)!important; border:1px solid var(--line)!important;
  border-radius:999px!important; padding:7px 15px!important; font-size:.82rem!important;
  color:var(--muted)!important; box-shadow:none!important; }
.stats-bar-item strong { color:var(--accent)!important; }
.trust-strip { gap:10px!important; flex-wrap:wrap!important; }

.gids-emoji { display:inline-flex!important; align-items:center!important;
  justify-content:center!important; width:46px!important; height:46px!important;
  background:var(--cream)!important; border-radius:12px!important; }
.method-cta { background:var(--cream-soft)!important; border:1px solid var(--line)!important;
  border-radius:var(--radius)!important; box-shadow:none!important; }

/* De uitgelichte nummer 1 in een top-10: één accentrand, geen gekleurde gloed. */
.product.featured { border:1px solid var(--accent)!important; border-top:3px solid var(--accent)!important;
  box-shadow:var(--shadow-lg)!important; }
.badge.badge-amber { background:var(--cream)!important; color:var(--accent-ink)!important;
  border:1px solid var(--line)!important; }
.badge-price { background:#1F6F43!important; border-radius:999px!important; }
.compare-status-strip { background:var(--cream-soft)!important; border:1px solid var(--line)!important; }

/* De winnaar-balk wordt door de pagina-JS ingevoegd en heeft zijn flex-layout
   nodig; zonder die regels plakt alle tekst aan elkaar. */
.winner-strip { display:flex!important; align-items:center!important;
  justify-content:space-between!important; gap:16px!important; flex-wrap:wrap!important;
  background:var(--cream-soft)!important; border:1px solid var(--line)!important;
  border-radius:var(--radius)!important; box-shadow:none!important; padding:14px 18px!important; }
.winner-strip .ws-l { display:flex!important; flex-direction:column!important;
  gap:2px!important; min-width:0!important; }
.winner-strip .ws-cta { flex:none!important; }
.winner-strip .ws-name, .sticky-cta .sc-name { font-family:var(--serif)!important; }
.sticky-cta { background:var(--paper)!important; border-top:1px solid var(--line)!important;
  box-shadow:0 -2px 14px rgba(20,16,12,.08)!important; }

/* De pure-CSS hamburger-checkbox stond op de 96 productpagina's zichtbaar in de
   header: die pagina's misten de verbergregel die de hoofdpagina's wel hadden.
   Bestond al vóór deze refresh; nu in één regel voor de hele site opgelost. */
.nav-cb { position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important;
  opacity:0!important; pointer-events:none!important; }

/* ══ verfijning 19 aug 2026: compacter, en echte thumbnails op het blogoverzicht ══ */

/* Homepage: de kop mag geen half scherm kosten. De categorietegels zijn waar de
   bezoeker heen wil, dus die moeten vrijwel meteen in beeld staan. */
.home-hero { padding:18px 20px 6px!important; max-width:720px!important; }
.home-hero h1 { font-size:clamp(1.7rem,3vw,2.25rem)!important; margin-bottom:8px!important; }
.home-hero .pitch { font-size:.98rem!important; margin-bottom:16px!important; }
.home-hero .ctas { gap:10px!important; }
.home-hero .btn-primary, .home-hero .btn-secondary { padding:11px 20px!important;
  font-size:.94rem!important; }
/* `margin:26px 0` sloopte de auto-marges uit de pagina-CSS, waardoor het
   1180px-brede kopblok links bleef hangen terwijl de tegelgrid eronder wél
   centreerde: de kop stond ~100px links van de tegels. `auto` hersteld. */
.section-head { margin:26px auto 14px!important; }
.section-head .sub { font-size:.92rem!important; color:var(--muted)!important; }

/* Blogoverzicht: kleiner beeld, minder hoogte. De thumbnail is de hoofd-
   productfoto uit het artikel zelf, zodat de kaart belooft wat de pagina toont. */
.blog-list { gap:1rem!important; }
.blog-card { padding:14px 14px 16px!important; }
.blog-card-img {
  aspect-ratio:auto!important;
  height:132px!important;
  border-radius:12px!important;
  background:var(--cream-soft)!important;
  margin-bottom:12px!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  overflow:hidden!important;
}
.blog-card-img.has-thumb img {
  max-height:112px!important; max-width:78%!important; width:auto!important;
  height:auto!important; object-fit:contain!important; mix-blend-mode:multiply;
}
.blog-card-img .blog-icon { width:34px!important; height:34px!important;
  color:var(--muted)!important; opacity:.55; }
.blog-card h3 { font-size:1.02rem!important; margin:0 0 6px!important; }
.blog-card p { font-size:.9rem!important; line-height:1.5!important; margin:0 0 10px!important; }
.blog-card .arrow { font-size:.86rem!important; }

/* Algemeen strakker: minder loze ruimte in kaarten, tegels en tabellen. */
.narrow { padding:26px 30px 28px!important; margin:16px auto 24px!important; }
.content h2 { margin-top:1.7rem!important; }
.content p { margin-bottom:.85rem!important; }
.k-pick { padding:20px 20px 18px!important; margin:16px 0 6px!important; }
.k-alt { padding:14px 14px 12px!important; margin:12px 0 4px!important; }
.k-price { margin:2px 0 12px!important; }
.k-callout { padding:14px 17px!important; margin-bottom:18px!important; }
.tile { min-height:270px!important; }
.tile-bg { height:150px!important; flex:0 0 150px!important; }
.tile-content { padding:14px 16px 16px!important; }
.content table th, .content table td { padding:9px 12px!important; }
.faq-section { padding:18px 20px!important; }
.product { padding:16px 18px!important; }

@media (max-width:640px) {
  .narrow { padding:18px 15px 20px!important; }
  .blog-card-img { height:120px!important; }
}

/* Tegels: titel en beschrijving op één lijn over de rij, anders staat elke tegel
   net iets anders en oogt het grid slordig. */
.tile-content { display:flex!important; flex-direction:column!important; }
.tile-name { min-height:1.35em!important; margin-bottom:4px!important; }
.tile-tag { min-height:2.6em!important; margin:0 0 10px!important; font-size:.88rem!important;
  color:var(--muted)!important; }
.tile-meta { margin-top:auto!important; }

/* Overzichtspagina's zonder artikelmeta (blog, methode) hadden nog de oude,
   hoge kop. Zelfde compacte behandeling. */
.hero:not(:has(.hero-meta)) {
  background:none!important; border:none!important; box-shadow:none!important;
  border-radius:0!important; padding:14px 0 4px!important; text-align:left!important;
}
.hero:not(:has(.hero-meta)) h1 { margin:0 0 6px!important; }
.hero:not(:has(.hero-meta)) .pitch { margin:0!important; font-size:.98rem!important;
  color:var(--ink-soft)!important; }

/* ── keuzehulp (deterministisch, client-side) ─────────────────────────────
   Zelfde taal als de rest: wit vlak, neutrale schaduw, één rode pil als actie.
   De vragen zijn rustig; het antwoord mag opvallen. */

.kh { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:22px 24px 18px; margin:0 0 26px; }
.kh-kop h2 { margin:0 0 6px!important; font-size:1.25rem!important; }
.kh-kop p { color:var(--muted); font-size:.9rem; margin:0 0 18px; max-width:70ch; }
.kh-tel { font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-bottom:6px; }
.kh-stap h3 { margin:0 0 12px!important; font-size:1.08rem!important; }
.kh-opts { display:flex; flex-wrap:wrap; gap:10px; }
.kh-opt { font:inherit; font-size:.94rem; font-weight:500; cursor:pointer;
  background:var(--cream-soft); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:11px 20px; transition:.14s; }
.kh-opt:hover { border-color:var(--accent); background:var(--cream); }
.kh-opt:active { transform:translateY(1px); }

.kh-voet { display:flex; gap:14px; margin-top:16px; }
.kh-terug, .kh-opnieuw { font:inherit; font-size:.85rem; cursor:pointer; background:none;
  border:none; color:var(--muted); padding:4px 0; text-decoration:underline; }
.kh-terug:hover, .kh-opnieuw:hover { color:var(--accent-ink); }

.kh-kaarten { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px; margin-top:4px; }
.kh-kaart { display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--cream-soft); border:1px solid var(--line-soft);
  border-radius:var(--radius-sm); padding:16px 14px 14px; }
.kh-kaart.kh-top { background:var(--paper); border:1px solid var(--line);
  border-top:3px solid var(--accent); box-shadow:var(--shadow-md); }
.kh-badge { display:inline-block; background:var(--cream); color:var(--accent-ink);
  font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; margin-bottom:10px; }
.kh-kaart img { max-width:120px; max-height:120px; width:auto; height:auto;
  object-fit:contain; mix-blend-mode:multiply; }
.kh-top img { max-width:150px; max-height:150px; }
.kh-naam { font-weight:600; font-size:.95rem; margin:10px 0 2px; }
.kh-prijs { font-size:1.35rem; font-weight:700; letter-spacing:-.02em; margin:0 0 8px; }
.kh-top .kh-prijs { font-size:1.6rem; }
.kh-reden { font-size:.82rem; color:var(--muted); margin:0 0 12px; line-height:1.45; }
.kh-kaart .k-cta { font-size:.86rem; padding:10px 18px!important; }

.kh-let-op { background:var(--cream); border:1px solid var(--line); border-radius:12px;
  padding:11px 14px; font-size:.86rem; color:var(--ink-soft); margin:0 0 14px; }
.kh-leeg { font-size:.9rem; color:var(--ink-soft); background:var(--cream-soft);
  border:1px dashed var(--line); border-radius:12px; padding:14px 16px; }
.kh-bron { font-size:.76rem; color:var(--muted); line-height:1.5; margin:16px 0 0;
  padding-top:12px; border-top:1px solid var(--line-soft); }
.kh-bron em { font-style:normal; color:var(--ink-soft); }

@media (max-width:640px) {
  .kh { padding:18px 15px 14px; }
  .kh-opt { width:100%; text-align:left; }
}

/* ── keuzehulp: uitslag met vergelijkingstabel ────────────────────────────
   Meer horizontale lijnen dan elders op de site: bij een vergelijking is de RIJ
   de leeseenheid. Verticale lijnen laten we juist weg, die verknippen het beeld. */

.kh-uit { border-top:1px solid var(--line); padding-top:18px; margin-top:4px; }
.kh-let-op { background:var(--cream); border:1px solid var(--line); border-radius:12px;
  padding:11px 14px; font-size:.86rem; color:var(--ink-soft); margin:0 0 16px; }
.kh-kaarten { padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:18px; }

.kh-tabelkop { font-family:var(--serif); font-size:1rem; font-weight:600; margin:0 0 10px;
  color:var(--ink); }
.kh-tabelwrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.kh-tabel { width:100%; border-collapse:collapse; font-size:.88rem; }
.kh-tabel th, .kh-tabel td { padding:10px 12px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); }
.kh-tabel thead th { font-size:.78rem; font-weight:600; color:var(--ink);
  background:var(--cream-soft); border-bottom:2px solid var(--line); white-space:normal;
  min-width:120px; }
.kh-tabel tbody td:first-child, .kh-tabel thead th:first-child {
  color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em;
  white-space:nowrap; background:var(--paper); }
.kh-tabel tbody tr:nth-child(odd) td { background:rgba(246,239,227,.35); }
.kh-tabel tbody tr:nth-child(odd) td:first-child { background:var(--paper); }
.kh-tabel tbody tr:last-child td { border-bottom:none; }
.kh-leegcel { color:#C3B6A6; }
.kh-tabelnoot { font-size:.76rem; color:var(--muted); margin:10px 0 0; }

/* ── keuzehulp: standaard ingeklapt ───────────────────────────────────────
   Op mobiel duwde de uitgeklapte tool de top-10 een half scherm omlaag. Nu een
   uitnodigende balk die één tik nodig heeft. Met <details>: geen JS voor het
   openen, werkt met toetsenbord, onthoudt niets. Ingeklapt op ALLE schermen —
   consistent, en de lijst is waarvoor de bezoeker komt. */

.kh { padding:0!important; overflow:hidden; }
.kh > .kh-kop { padding:20px 24px 0; }
.kh > .kh-body { padding:0 24px; }
.kh > .kh-bron { padding:0 24px 18px; }

.kh-trigger {
  /* wrap: op zeer smalle schermen zakt de knop onder de tekst in plaats van
     buiten beeld te lopen */
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  cursor:pointer; list-style:none; padding:16px 20px;
  background:linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 100%);
  border-bottom:1px solid transparent;
}
.kh-trigger::-webkit-details-marker { display:none; }
.kh-trigger:hover { background:var(--cream); }
.kh-trigger-tekst { display:flex; flex-direction:column; gap:2px; min-width:0; }
.kh-trigger-tekst strong { font-family:var(--serif); font-size:1.05rem; font-weight:600;
  color:var(--ink); }
.kh-trigger-sub { font-size:.87rem; color:var(--muted); }
.kh-trigger-knop {
  flex:none; display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bottom) 100%);
  color:#fff; font-weight:600; font-size:.9rem; border:1px solid var(--btn-bottom);
  border-radius:999px; padding:10px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), var(--shadow-sm);
}
.kh-chevron { display:inline-block; transform:rotate(90deg); transition:transform .18s; }
.kh[open] .kh-chevron { transform:rotate(-90deg); }
.kh[open] .kh-trigger { border-bottom-color:var(--line); }
.kh[open] .kh-trigger-knop { background:var(--paper); color:var(--ink-soft);
  border-color:var(--line); box-shadow:none; font-weight:500; }
.kh[open] .kh-trigger-knop::after { content:"sluiten"; }
.kh[open] .kh-trigger-knop { font-size:0; }
.kh[open] .kh-trigger-knop::after, .kh[open] .kh-chevron { font-size:.9rem; }
.kh-trigger:active .kh-trigger-knop { transform:translateY(1px); }

@media (max-width:640px) {
  .kh-trigger { padding:14px 15px; gap:10px; }
  .kh-trigger-tekst strong { font-size:.98rem; }
  .kh-trigger-knop { padding:9px 14px; font-size:.85rem; }
  .kh-trigger-tekst { flex:1 1 100%; }
  .kh-trigger-knop { flex:1 1 100%; justify-content:center; }
  .kh > .kh-kop, .kh > .kh-body, .kh > .kh-bron { padding-left:15px; padding-right:15px; }
}

/* ══ uitlijning 28 aug 2026: één contentkolom over de hele site ═════════════
   Twee restjes van de cascade-botsing tussen deze stylesheet en de inline
   blokken in de pagina's zelf. */

/* De hele site rekent met `.container`: max-width 1080 en 22px zijpadding, dus
   inhoud van 82 tot 1118 op een scherm van 1200. De header volgt dat, en op de
   top-10-pagina's doet de inhoud dat ook. Alleen de homepage week af: kop,
   tegelgrid en gidsenblok stonden op 1180 met 20px padding, dus 52px breder aan
   beide kanten dan de navigatie erboven. Dat is wat je ziet als "de knoppen in
   de header hangen tegen de rand" — niet de header is te smal, de blokken
   eronder waren te breed. Nu dezelfde kolom als de rest. */
.section-head, .top10-grid, .gidsen-section {
  max-width:1080px!important;
  margin-left:auto!important; margin-right:auto!important;
  padding-left:22px!important; padding-right:22px!important;
}

/* De kop van een top-10-pagina is sinds de sfeer-refresh een kaart (crème vlak
   met rand, gezet ná deze stylesheet). De padding die bij die kaart hoort staat
   vóór deze stylesheet en werd hier overschreven met `padding:16px 0` — een
   waarde uit de tijd dat de kop géén kaart was. Resultaat: een zichtbare kaart
   met nul zijpadding, dus de H1 plakte tegen de rand. Padding terug, en de
   tekst gecentreerd zodat de kop dezelfde as volgt als de meta-pillen eronder
   (die stonden al gecentreerd) en als de homepage-hero. */
.hero:has(.hero-meta) {
  max-width:1080px!important;
  margin:1.4rem auto 1.8rem!important;
  padding:2rem 32px 1.7rem!important;
  text-align:center!important;
}
.hero:has(.hero-meta) h1,
.hero:has(.hero-meta) .pitch { margin-left:auto!important; margin-right:auto!important; }
.hero:has(.hero-meta) .hero-meta { justify-content:center!important; }

@media (max-width:640px) {
  .hero:has(.hero-meta) { padding:1.5rem 18px 1.3rem!important; margin:1rem auto 1.4rem!important; }
}