:root {
  --bg: #f7f7f9;
  --surface: #ffffff;
  --text: #1a1a2e;
  --text-muted: #6b7280;
  --accent: #ff6b35;
  --accent-dark: #e0551f;
  --border: #e5e7eb;
  --success: #16a34a;
  --star: #f5a623;
  --radius: 12px;
  --hero-glow-start: #fff2ea;
  --hero-glow-end: var(--bg);
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --card-shadow: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.section-title, .hero h1, h2, h3 {
  font-family: var(--font-heading);
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

a { color: inherit; }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(255,107,53,0.55);
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary {
  background: var(--text);
  color: #fff;
  padding: 10px 20px;
  font-size: 14px;
}
.btn-secondary:hover { background: #000; }
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

/* Hub homepage (matrasgids.nl-benchmark 18 aug 2026) */
.hub-hero .hero-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.hub-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; }
.hero-stats {
  display: flex;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
  border-left: 1px solid var(--border);
}
.stat:first-child { border-left: none; padding-left: 0; }
.stat-num { font-size: 28px; font-weight: 800; color: var(--accent-dark); letter-spacing: -0.01em; }
.stat-label { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

.hub-section { padding: 64px 0; }
.hub-section--alt { background: var(--surface); }
.section-title { font-size: 26px; margin: 0 0 28px; text-align: center; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-1px); }

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.cat-card { display: block; padding: 24px; text-decoration: none; color: inherit; }
.cat-icon { font-size: 28px; margin-bottom: 12px; }
.cat-card h3 { margin: 0 0 6px; font-size: 17px; }
.cat-card p { margin: 0 0 14px; font-size: 13.5px; color: var(--text-muted); }
.cat-cta { font-size: 13px; font-weight: 600; color: var(--accent); }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.feat-card { display: block; padding: 26px; text-decoration: none; color: inherit; }
.feat-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 10px;
}
.feat-card h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; }
.feat-card p { margin: 0; font-size: 13.5px; color: var(--text-muted); }

.trust-section .section-title { margin-bottom: 36px; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.trust-item { padding: 30px 26px; text-align: center; }
.trust-item:hover { border-color: var(--border); transform: none; }
.trust-icon {
  font-size: 34px;
  margin: 0 auto 14px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 999px;
}
.trust-item h3 { margin: 0 0 8px; font-size: 16px; }
.trust-item p { margin: 0; font-size: 13.5px; color: var(--text-muted); }

/* CTA-band (21 aug 2026, v2): kleurrijke banner-kaart op de witte
   paginabackground i.p.v. een donkere full-bleed strook -- de oude versie
   had een donkere secondary-knop op een donkere achtergrond, nauwelijks
   als knop herkenbaar. */
.cta-band-wrap { background: transparent; padding: 8px 0 48px; }
.cta-band {
  max-width: 780px;
  margin: 0 auto;
  padding: 48px 32px;
  text-align: center;
  color: #fff;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  box-shadow: 0 16px 32px -12px rgba(255,107,53,0.5);
}
.cta-band h2 { margin: 0 0 8px; font-size: 26px; }
.cta-band p { margin: 0 0 24px; opacity: 0.92; }
.cta-band .btn-secondary {
  background: #fff;
  color: var(--accent-dark);
  font-weight: 700;
  padding: 13px 28px;
  font-size: 15px;
}
.cta-band .btn-secondary:hover { background: #fff7f2; transform: translateY(-1px); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.logo {
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
  color: var(--text);
}
.logo-dot { color: var(--accent); }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--text); }
.category-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pillar-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.pillar-link {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14.5px;
  font-weight: 600;
}
.pillar-link:hover { color: var(--text); }
.pillar-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #fff;
  background: var(--accent);
  font-size: 14px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  transition: background 0.15s ease;
}
.pillar-cta:hover { background: var(--accent-dark); }
.logo-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  color: var(--accent);
  vertical-align: -5px;
}
.logo-icon svg { width: 100%; height: 100%; }
.category-link {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.category-link:hover { background: var(--bg); color: var(--text); }
.category-link.active { background: var(--text); color: #fff; }

/* Hero */
.hero {
  background: radial-gradient(circle at top right, var(--hero-glow-start), var(--hero-glow-end) 60%);
  padding: 64px 0 48px;
}
.hero-inner { max-width: 720px; }
.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 0 0 12px;
}
.hero h1 { font-size: 40px; line-height: 1.15; margin: 0 0 16px; }
.hero-sub { font-size: 17px; color: var(--text-muted); margin: 0 0 28px; }

/* Product grid */
.product-section { padding: 48px 0 80px; }
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.product-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.product-card:hover {
  box-shadow: 0 16px 32px -12px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}
.product-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 1;
}
.product-media {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #fdf1ea, #f0f0f5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-media-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-size: 28px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.product-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-name { margin: 0; font-size: 17px; }
.product-rating { font-size: 14px; color: var(--text-muted); }
.star { color: var(--border); }
.star.filled { color: var(--star); }
.rating-value { margin-left: 6px; font-weight: 600; color: var(--text); }
.product-desc { margin: 0; font-size: 14px; color: var(--text-muted); }
.product-pros { list-style: none; margin: 0; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.product-pros .pro::before { content: "+ "; color: var(--success); font-weight: 700; }
.product-pros .con::before { content: "- "; color: #dc2626; font-weight: 700; }
.product-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
}
.price { font-weight: 700; }

/* Intro / buying guide content */
.intro {
  padding: 8px 0 40px;
  max-width: 760px;
}
.intro h2 { font-size: 26px; margin: 0 0 12px; }

.quick-answer {
  padding: 16px 20px;
  margin: 20px auto 0;
  max-width: 760px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.quick-answer p { margin: 0; font-size: 14.5px; line-height: 1.6; }

.comparison-table-wrap {
  max-width: 900px;
  margin: 24px auto 0;
  overflow-x: auto;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.comparison-table th, .comparison-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.comparison-table th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.comparison-table td a { color: var(--accent-dark); font-weight: 600; text-decoration: none; }
.comparison-table td a:hover { text-decoration: underline; }
.review-byline {
  font-size: 12.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 16px;
  font-variant-numeric: tabular-nums;
}
.intro p { color: var(--text-muted); font-size: 15px; }
.buying-guide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.buying-guide-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.buying-guide-item h3 { margin: 0 0 8px; font-size: 15px; }
.buying-guide-item p { margin: 0; font-size: 13px; color: var(--text-muted); }

.faq-section, .updates-section {
  padding: 8px 0 40px;
  max-width: 760px;
  margin: 0 auto;
}
.faq-section h2, .updates-section h2 { font-size: 22px; margin: 0 0 16px; }
.faq-list, .updates-list { display: flex; flex-direction: column; gap: 16px; }
.faq-item, .updates-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.faq-item h3 { margin: 0 0 6px; font-size: 15px; }
.faq-item p, .updates-item p { margin: 0; font-size: 13px; color: var(--text-muted); }
.updates-item { display: flex; gap: 14px; align-items: baseline; }
.situational-advice {
  padding: 8px 0 40px;
  max-width: 900px;
  margin: 0 auto;
}
.situational-advice h2 { font-size: 22px; margin: 0 0 16px; }
.situational-advice-list { display: flex; flex-direction: column; gap: 14px; }
.situational-advice-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.situational-advice-item h3 { margin: 0 0 6px; font-size: 15px; }
.situational-advice-item p { margin: 0; font-size: 13.5px; color: var(--text-muted); }

.updates-date {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.related-niches-section {
  padding: 8px 0 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.related-niches-section h2 { font-size: 22px; margin: 0 0 16px; }
.related-niches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.related-niche-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.related-niche-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.related-niche-card h3 { margin: 0 0 6px; font-size: 15px; color: var(--text); }
.related-niche-card p { margin: 0; font-size: 13px; color: var(--text-muted); }

/* Simple text pages (privacy/about/contact) */
.text-page {
  max-width: 720px;
  padding: 48px 24px 80px;
}
.text-page h1 { font-size: 32px; margin: 0 0 24px; }
.text-page h2 { font-size: 20px; margin: 32px 0 12px; }
.text-page p { color: var(--text-muted); font-size: 15px; }
.text-page a { color: var(--accent-dark); font-weight: 600; }

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 32px 0;
  background: var(--surface);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
}
.footer-nav {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
}
.footer-nav a { text-decoration: none; font-weight: 600; color: var(--text); }
.footer-nav a:hover { color: var(--accent-dark); }

/* Pillar-nav mag nooit onder de logo-regel afbreken (dat leest als de oude,
   ongewenste aparte navigatie-rij) -- op krappe desktopbreedtes scrollt hij
   liever horizontaal dan dat hij wrapt. */
.header-inner { flex-wrap: nowrap; }
.pillar-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pillar-nav::-webkit-scrollbar { display: none; }
.pillar-cta { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .pillar-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    overflow: visible;
  }
  .pillar-nav.open { display: flex; }
  .pillar-cta { margin-top: 6px; }
}

@media (max-width: 720px) {
  .category-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 4px;
  }
  .category-nav.open { display: flex; }
  .hero h1 { font-size: 30px; }
}

/* Layout-varianten: alleen structurele opmaak (uitlijning, spacing,
   nav-stijl). Raakt geen enkel element-ID/class dat script.js gebruikt voor
   filteren/mobiel menu — alleen aanvullende modifier-classes hierboven op.
   "classic" = bestaand gedrag, geen extra regels nodig (default). */

/* Layout: centered — gestapelde, gecentreerde header + hero */
.site-header--centered .header-inner {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding-bottom: 14px;
}
.site-header--centered .category-nav {
  justify-content: center;
}
.hero--centered {
  background: var(--surface);
  text-align: center;
}
.hero--centered .hero-inner {
  max-width: 640px;
  margin: 0 auto;
}
.hero--centered .hero-eyebrow,
.hero--centered .hero-sub {
  margin-left: auto;
  margin-right: auto;
}

/* Layout: minimal — vlakke, tekstuele nav en leanere hero */
.site-header--minimal .category-link {
  padding: 8px 4px;
  border-radius: 0;
}
.site-header--minimal .category-link:hover,
.site-header--minimal .category-link.active {
  background: none;
  color: var(--accent-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hero--minimal {
  background: var(--surface);
  padding: 40px 0 32px;
  border-bottom: 1px solid var(--border);
}
.hero--minimal .hero-eyebrow {
  display: none;
}
.hero--minimal h1 {
  font-size: 32px;
}

/* Layout-brede look&feel-diversificatie (26 aug 2026, op Robberts verzoek --
   inhoud/structuur (top picks met ster, buying guides, "X compared
   independently") moet overal identiek blijven, maar de visuele taal moet
   duidelijk verschillen zodat sites niet als "dezelfde maker" ogen. Werkt
   via de bestaande --radius/--font-heading/--card-shadow custom properties,
   dus geen enkele HTML-structuurwijziging nodig -- alleen deze drie
   variabelen + kaartrand/schaduw verschillen per layout-klasse op <body>. */

/* Layout: centered — warmere, ronde kaartstijl met zachte schaduw i.p.v.
   rand, Poppins-koppen (zie layout.html.j2 voor de Google Fonts-link). */
.layout-centered {
  --radius: 20px;
  --font-heading: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --card-shadow: 0 10px 28px -14px rgba(0,0,0,0.22);
}
.layout-centered .card,
.layout-centered .product-card {
  border-color: transparent;
}
.layout-centered .btn {
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Layout: minimal — vlak en scherp (kleine radius, geen schaduw), ruimer
   wit, Space Grotesk-koppen (zie layout.html.j2 voor de Google Fonts-link). */
.layout-minimal {
  --radius: 4px;
  --font-heading: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --card-shadow: none;
}
.layout-minimal .container {
  max-width: 1180px;
}
.layout-minimal .section-title {
  letter-spacing: -0.01em;
  font-weight: 600;
}
.layout-minimal .btn {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Bonus guide callout (optioneel, alleen aanwezig als niche.json een
   bonus_guide-veld heeft) */
.bonus-guide {
  padding: 8px 24px 40px;
}
.bonus-guide-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.bonus-guide-text h2 {
  margin: 0 0 8px;
  font-size: 20px;
}
.bonus-guide-text p {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  max-width: 520px;
}

/* Hero media (sfeerfoto via Pexels, optioneel -- valt terug op de gradient
   achtergrond als de foto niet beschikbaar is) */
.hero-media {
  margin-bottom: 28px;
}
.hero-media img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

/* Categorie-icoon in de product-media-placeholder (vervangt de vorige
   losse letter) */
.product-media-placeholder svg {
  width: 34px;
  height: 34px;
}

/* Amazon-bounty-CTA (21 aug 2026, v2: prominenter + hoger op de pagina) */
.bounty-cta { margin: 28px auto 36px; max-width: 720px; }
.bounty-cta-card {
  padding: 32px 36px;
  text-align: center;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 12px 28px -10px rgba(255,107,53,0.55);
}
.bounty-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.2);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.bounty-heading { font-weight: 800; font-size: 22px; margin: 0 0 8px; }
.bounty-line { margin: 0 0 20px; color: rgba(255,255,255,0.92); font-size: 15px; }
.bounty-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.bounty-btn-primary {
  background: #fff;
  color: var(--accent-dark);
  font-weight: 700;
  padding: 12px 26px;
}
.bounty-btn-primary:hover { background: #fff7f2; transform: translateY(-1px); }
.bounty-btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.7);
  padding: 12px 26px;
}
.bounty-btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
.bounty-disclaimer { font-size: 12px; color: rgba(255,255,255,0.75); margin: 16px 0 0; }
.bounty-footer { font-size: 12.5px; color: var(--text-muted); margin: 4px 0 0; }
.bounty-footer a { color: inherit; }

/* "See all guides"-knop (21 aug 2026) */
.see-all-wrap { text-align: center; margin-top: 24px; }

/* Sticky mobiele CTA op productvergelijkingspagina's (27 aug 2026).
   Op mobiel is de hero-CTA na een halve schermlengte scrollen uit beeld en
   volgt er tot diep in de pagina (de eerste product-card) geen enkele
   koopactie meer -- precies waar de meeste bezoekers afhaken. Deze balk
   houdt één actie permanent bereikbaar zonder de desktoplayout aan te
   raken: boven 720px staat hij volledig uit (display:none), dus voor
   desktopbezoekers verandert er letterlijk niets.

   Kleuren komen uit de bestaande CSS-variabelen (--surface/--border/
   --accent via .btn-primary), zodat de balk automatisch meekleurt met alle
   vier de thema's inclusief blackout -- geen hardgecodeerde wit-waarde die
   op een donker thema zou opvallen. */
.sticky-cta { display: none; }

@media (max-width: 720px) {
  .sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 18px -10px rgba(0, 0, 0, 0.45);
    /* safe-area-inset: op iPhones met een home-indicator zou de knop
       anders deels onder die balk vallen en niet aantikbaar zijn. */
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .sticky-cta-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 13px 20px;
    font-size: 15px;
    box-shadow: none;
  }
  /* Ruimte onderaan de pagina zodat de balk de laatste regel van de footer
     (de affiliate-disclosure) niet permanent afdekt wanneer je helemaal
     uitscrollt. */
  body.has-sticky-cta { padding-bottom: 78px; }
}

/* --- Cookiebanner (alleen .nl-sites) ------------------------------------
   Gebruikt uitsluitend de :root-variabelen, zodat de drie thema's
   (blackout/forest/slate) hem automatisch meekleuren zonder eigen regels.
   z-index 70 = boven de sticky CTA (60) en boven de header. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, 0.5);
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cookie-banner-text {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}
.cookie-banner-text a { color: var(--accent); }
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-banner-actions .btn {
  padding: 9px 18px;
  font-size: 14px;
}
/* Ruimte onderaan zodat de banner de laatste footerregel (de
   affiliate-disclosure) niet permanent afdekt. */
body.cookie-banner-open { padding-bottom: 96px; }

@media (max-width: 720px) {
  .cookie-banner-inner { padding: 0 16px; }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1; text-align: center; }
  /* Conflict met de sticky mobiele CTA (beide fixed op bottom: 0): zolang
     de banner openstaat is de CTA verborgen -- zie de toelichting in
     script.js. Na de keuze verdwijnt .cookie-banner-open en komt de CTA
     direct terug. */
  body.cookie-banner-open .sticky-cta { display: none; }
  body.cookie-banner-open { padding-bottom: 132px; }
}