/* Clickeez NL — namespace ckn-. Eigen NL-identiteit (10.08.2026):
   warm creme papier, petrol-groenblauw als hoofdkleur en oranje als accent —
   bewust ANDERS dan clickeez.org (roze/pruim) en clickeez-france (marine/geel).
   Herkenningspunten: de driekleur-streep boven de header, keycap-tegels bij
   de herocijfers en de keycap-knop die bij :active "indrukt".
   Koppen in Baloo 2, lopende tekst in Mulish (variable woff2, lokaal). */

:root {
  --ckn-ink: #22343c;
  --ckn-teal: #17646c;
  --ckn-teal-d: #0f4a52;
  --ckn-oranje: #f7941d;
  --ckn-oranje-d: #c96f10;
  /* Oranje voor TEKST: --ckn-oranje zelf haalt op papier maar ~2.1 contrast,
     deze verdonkerde tint geeft 5.4 op het creme. */
  --ckn-oranje-t: #9c5300;
  --ckn-sky: #7fc6cf;
  --ckn-paper: #fcf8ee;
  --ckn-card: #ffffff;
  --ckn-tile: #f7f3e8;
  --ckn-line: #e7ddc8;
  --ckn-mute: #6d6353;
  --ckn-star: #b97f0a;
  /* Chipkleuren verdonkerd tot contrast 4.5+ op hun eigen achtergrond. */
  --ckn-ok: #25714f;
  --ckn-warn: #96601f;
  --ckn-off: #a03d2e;
  --ckn-wrap: 1120px;
  --ckn-r: 16px;
}

@font-face {
  font-family: 'Baloo 2';
  src: url('/src/fonts/baloo2-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: 'Mulish';
  src: url('/src/fonts/mulish-latin.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 17px/1.62 'Mulish', 'Segoe UI', system-ui, sans-serif;
  color: var(--ckn-ink);
  background: var(--ckn-paper);
}
h1, h2, h3, h4, .ckn-fx { font-family: 'Baloo 2', 'Mulish', system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em; color: var(--ckn-teal-d); }
h1 { font-size: 2.35rem; line-height: 1.14; margin: 0 0 .5rem; }
h2 { font-size: 1.7rem; line-height: 1.2; margin: 2.2rem 0 .8rem; }
h3 { font-size: 1.22rem; line-height: 1.28; margin: 1.6rem 0 .45rem; }
/* Keycap-blokje voor sectiekoppen — het NL-herkenningsteken. */
.ckn-sect h2::before, .ckn-sect-alt h2::before {
  content: ''; display: inline-block; width: 15px; height: 15px;
  margin-right: 11px; border-radius: 5px; vertical-align: baseline;
  background: var(--ckn-oranje); box-shadow: 0 3px 0 var(--ckn-oranje-d);
}
/* Kaartkoppen zijn ook h2 binnen een sectie — daar geen blokje. */
.ckn-card-body h2::before, .ckn-foot h2::before { content: none; }
p { margin: 0 0 1rem; }
a { color: var(--ckn-teal); }
img { max-width: 100%; height: auto; display: block; }
.ckn-wrap { max-width: var(--ckn-wrap); margin: 0 auto; padding: 0 20px; }
.ckn-narrow { max-width: 760px; }

/* ── header ──────────────────────────────────────────────────────────────── */
/* Lichte balk (niet donker zoals US/FR) met de NL-driekleur als bovenrand. */
.ckn-head {
  background: #fff;
  color: var(--ckn-ink);
  position: sticky; top: 0; z-index: 40;
  border-bottom: 2px solid var(--ckn-line);
}
.ckn-head::before {
  content: ''; display: block; height: 6px;
  background: linear-gradient(to bottom, #ae1c28 0 2px, #fff 2px 4px, #21468b 4px 6px);
}
.ckn-head .ckn-wrap { display: flex; align-items: center; gap: 14px; min-height: 62px; }
/* Logo — officieel merkteken op een keycap-plaatje. */
.ckn-logo { display: flex; align-items: center; flex: none; padding: 4px 11px; background: #fff; border: 2px solid var(--ckn-line); border-radius: 13px; box-shadow: 0 4px 0 var(--ckn-line); }
.ckn-logo img { display: block; width: 55px; height: 46px; }
.ckn-logo:active { transform: translateY(4px); box-shadow: none; }
.ckn-nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.ckn-nav a {
  color: var(--ckn-ink); text-decoration: none; font-size: .95rem; font-weight: 700;
  padding: 7px 11px; border-radius: 9px; border-bottom: 3px solid transparent;
}
.ckn-nav a:hover, .ckn-nav a[aria-current] { background: var(--ckn-paper); border-bottom-color: var(--ckn-oranje); color: var(--ckn-teal-d); }
.ckn-burger { display: none; margin-left: auto; background: none; border: 0; color: var(--ckn-ink); font-size: 1.5rem; line-height: 1; padding: 6px 8px; cursor: pointer; }

/* ── keycap-knop ─────────────────────────────────────────────────────────── */
.ckn-btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1rem;
  padding: 10px 20px 9px; border-radius: 12px;
  /* Donkere tekst op oranje: wit haalt hier maar 2.2 contrast. */
  background: var(--ckn-oranje); color: #3a2508;
  box-shadow: 0 4px 0 var(--ckn-oranje-d);
  transform: translateY(0); transition: transform .06s, box-shadow .06s;
}
.ckn-btn:hover { filter: brightness(1.05); }
.ckn-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ckn-oranje-d); }
.ckn-btn-alt { background: var(--ckn-teal); color: #fff; box-shadow: 0 4px 0 var(--ckn-teal-d); }
.ckn-btn-alt:active { box-shadow: 0 0 0 var(--ckn-teal-d); }
.ckn-btn-line { background: #fff; color: var(--ckn-teal); box-shadow: 0 4px 0 var(--ckn-line); }
.ckn-btn-line:active { box-shadow: 0 0 0 var(--ckn-line); }
.ckn-btn-sm { font-size: .92rem; padding: 8px 14px 7px; border-radius: 10px; }

/* ── hero ────────────────────────────────────────────────────────────────── */
/* Geen roze gradient zoals US: creme vlak met een goedkoop getegeld
   stippenpatroon (kleine background-size, geen schuine gradient over het
   hele canvas — dat rastert traag) en een zachte oranje gloed. */
.ckn-hero {
  background-color: #faf3df;
  background-image:
    radial-gradient(circle at 82% 30%, rgba(247, 148, 29, .14) 0 240px, transparent 340px),
    radial-gradient(rgba(23, 100, 108, .10) 1.5px, transparent 2px);
  background-size: auto, 26px 26px;
  border-bottom: 3px solid var(--ckn-line);
  padding: 46px 0 42px;
}
/* Het raster staat op de WRAP (tekstkolom + fotokolom), niet op hero-main:
   hero-main bevat losse tekstelementen, het raster daarop verspreidde de
   kop/knoppen/cijfers over twee kolommen en de foto viel eronder op volle
   breedte — zo zag de eerste oplevering eruit. */
.ckn-hero .ckn-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 44px; align-items: center; }
.ckn-hero h1 { max-width: 17ch; }
.ckn-hero-lead { font-size: 1.13rem; max-width: 62ch; color: #4c5750; }
/* De foto als scheve "sticker" met dikke witte rand — niet het rechte
   pruimkader van de US-site. */
.ckn-hero-art { transform: rotate(-2.5deg); }
.ckn-hero-art a { display: block; text-decoration: none; }
.ckn-hero-art picture { display: block; background: #fff; border: 6px solid #fff; border-radius: 18px; box-shadow: 0 10px 0 rgba(23, 100, 108, .16), 0 2px 10px rgba(34, 52, 60, .12); overflow: hidden; }
.ckn-hero-art img { display: block; width: 100%; height: auto; }
.ckn-hero-tag { margin: 0 0 .4rem; font-size: .84rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ckn-oranje-t); }
.ckn-hero-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 1.2rem; }
/* Herocijfers als rij toetsen — elk cijfer op zijn eigen keycap. */
.ckn-hero-nums { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 1.9rem; }
.ckn-hero-nums div { background: #fff; border-radius: 12px; padding: 9px 16px 11px; box-shadow: 0 4px 0 var(--ckn-line); }
.ckn-hero-nums div b { display: block; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.55rem; color: var(--ckn-teal); line-height: 1.1; }
.ckn-hero-nums div span { font-size: .85rem; color: var(--ckn-mute); }

/* ── kaartenraster ───────────────────────────────────────────────────────── */
.ckn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 20px; margin: 1.4rem 0; }
/* Kaart met dikke onderrand: hetzelfde "toets"-profiel als de knoppen. */
.ckn-card {
  background: var(--ckn-card); border: 2px solid var(--ckn-line); border-bottom-width: 5px; border-radius: var(--ckn-r);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .12s, transform .12s;
}
.ckn-card:hover { border-color: var(--ckn-teal); transform: translateY(-2px); }
.ckn-card-img { position: relative; background: #fff; padding: 12px; }
.ckn-card-img img { margin: 0 auto; max-height: 210px; width: auto; object-fit: contain; }
.ckn-caps {
  position: absolute; top: 10px; left: 10px;
  background: var(--ckn-teal); color: #fff; border-radius: 9px;
  font-family: 'Baloo 2', sans-serif; font-size: .82rem; padding: 3px 9px 4px;
  box-shadow: 0 3px 0 var(--ckn-teal-d);
}
.ckn-card-body { padding: 4px 15px 15px; display: flex; flex-direction: column; flex: 1; }
/* h2 of h3 — niveau hangt af van de pagina (zie card() in generate.js). */
.ckn-card-body h2, .ckn-card-body h3 { margin: .3rem 0 .3rem; font-size: 1.06rem; }
.ckn-card-body h2 a, .ckn-card-body h3 a { color: inherit; text-decoration: none; }
.ckn-card-body h2 a:hover, .ckn-card-body h3 a:hover { color: var(--ckn-oranje-t); }
.ckn-card-short { font-size: .93rem; color: var(--ckn-mute); margin: 0 0 .7rem; }
/* margin-top:auto duwt "prijs + knoppen" naar de onderkant van de kaart. */
.ckn-card-price { margin-top: auto; padding-top: .7rem; font-size: .95rem; }
.ckn-card-price b { font-size: 1.18rem; font-weight: 800; color: var(--ckn-teal-d); }
.ckn-card-price small { font-size: .8rem; color: var(--ckn-mute); }
.ckn-card-price-none { font-size: .82rem; color: var(--ckn-mute); }
.ckn-card-price + .ckn-card-btns { margin-top: 0; padding-top: .5rem; }
.ckn-card-btns { display: flex; gap: 8px; margin-top: auto; padding-top: .7rem; }
.ckn-card-btns .ckn-btn { flex: 1 1 auto; text-align: center; white-space: nowrap; font-size: .88rem; padding: 8px 10px 7px; }

/* ── voorraadchip ────────────────────────────────────────────────────────── */
.ckn-stock { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; border-radius: 7px; padding: 3px 10px; }
.ckn-stock::before { content: ''; width: 8px; height: 8px; border-radius: 3px; background: currentColor; }
.ckn-stock-in-stock { color: var(--ckn-ok); background: #e4f2e9; }
.ckn-stock-preorder { color: var(--ckn-teal); background: #e3eff0; }
.ckn-stock-other-sellers { color: var(--ckn-warn); background: #f8efd9; }
.ckn-stock-unavailable { color: var(--ckn-off); background: #f9e9e4; }

/* ── kansenbalk ──────────────────────────────────────────────────────────── */
.ckn-odds { margin: .55rem 0 .3rem; }
.ckn-odds-bar { height: 8px; border-radius: 5px; background: var(--ckn-tile); overflow: hidden; }
.ckn-odds-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ckn-sky), var(--ckn-oranje)); }
.ckn-odds-txt { font-size: .8rem; color: var(--ckn-mute); margin-top: 3px; }

/* ── PDP ─────────────────────────────────────────────────────────────────── */
/* grid staat op .ckn-wrap: de kolommen (.ckn-pdp-img + .ckn-buy) zijn kinderen
   van de wrap, niet van de sectie zelf — anders stapelt alles onder elkaar */
.ckn-pdp { margin: 26px 0 10px; }
.ckn-pdp .ckn-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.ckn-pdp-img { background: #fff; border: 2px solid var(--ckn-line); border-bottom-width: 5px; border-radius: var(--ckn-r); padding: 18px; }
.ckn-pdp-img img { margin: 0 auto; max-height: 460px; width: auto; }
.ckn-eyebrow { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ckn-oranje-t); margin: 0 0 .35rem; }
.ckn-eyebrow a { color: inherit; }
.ckn-best { background: #fff; border: 2px solid var(--ckn-line); border-left: 6px solid var(--ckn-oranje); border-radius: 10px; padding: 11px 15px; margin: 1rem 0; font-size: .98rem; }
.ckn-best b { font-family: 'Baloo 2', sans-serif; }
.ckn-buy { background: #fff; border: 2px solid var(--ckn-line); border-bottom-width: 5px; border-radius: var(--ckn-r); padding: 18px 20px; margin: 0; }
.ckn-price { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.9rem; color: var(--ckn-teal-d); line-height: 1; }
.ckn-noprice { color: var(--ckn-mute); font-size: .95rem; margin: 0 0 .6rem; }
.ckn-buy .ckn-btn { margin-top: .8rem; }
.ckn-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: .9rem; color: var(--ckn-mute); margin: .6rem 0 0; }
.ckn-stars { color: var(--ckn-star); font-weight: 700; }

/* Beoordelingsbalk onder de uitstalling op de homepage (rateBar() in
   generate.js). Dit zijn geen recensies en mogen er ook niet als uitzien:
   er zijn geen citaten, alleen cijfers. */
.ckn-ratebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 0; }
.ckn-ratebar-lead { grid-column: 1 / -1; font-family: 'Baloo 2', 'Mulish', system-ui, sans-serif; font-weight: 700; letter-spacing: -.01em; font-size: 1.45rem; color: var(--ckn-teal-d); margin: 0; }
.ckn-ratebar-row { display: flex; flex-direction: column; gap: 3px; background: var(--ckn-tile); border: 2px solid var(--ckn-line); border-radius: var(--ckn-r); padding: 15px 17px; }
.ckn-rate-name { font-weight: 700; font-size: .97rem; color: var(--ckn-ink); }
.ckn-rate { font-size: 1.05rem; color: var(--ckn-star); letter-spacing: .04em; }
.ckn-rate-n { font-size: .88rem; color: var(--ckn-mute); }
.ckn-rate-top { font-size: .85rem; font-weight: 700; color: var(--ckn-oranje-t); }

/* ── tabellen en lijsten ─────────────────────────────────────────────────── */
.ckn-specs { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font-size: .95rem; }
.ckn-specs th, .ckn-specs td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--ckn-line); vertical-align: top; }
.ckn-specs th { width: 44%; font-weight: 700; color: var(--ckn-mute); font-size: .88rem; }
.ckn-specs tr:nth-child(odd) { background: var(--ckn-tile); }
.ckn-cmp { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1rem 0 .6rem; }
.ckn-cmp th, .ckn-cmp td { padding: 9px 10px; border-bottom: 1px solid var(--ckn-line); text-align: left; }
.ckn-cmp thead th { background: var(--ckn-teal); color: #fff; font-family: 'Baloo 2', sans-serif; font-weight: 600; }
.ckn-cmp tbody tr.ckn-this { background: #fdf2e2; }
.ckn-cmp a { font-weight: 700; }
.ckn-scroll { overflow-x: auto; }

.ckn-feat { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 0; }
.ckn-feat .ckn-box { margin: 0; }
.ckn-feat h3 { margin: 0 0 .3rem; color: var(--ckn-teal); }
.ckn-box { background: #fff; border: 2px solid var(--ckn-line); border-bottom-width: 5px; border-radius: var(--ckn-r); padding: 16px 18px; margin: 1.4rem 0; }
.ckn-box h3 { margin-top: 0; }
.ckn-box-note { font-size: .85rem; color: var(--ckn-mute); margin: .6rem 0 0; }
.ckn-box ul { margin: .4rem 0 0; padding-left: 20px; }
.ckn-box li { margin-bottom: .35rem; }
.ckn-gift { background: linear-gradient(135deg, #fdf2e2, #eaf5f4); border: 2px dashed var(--ckn-teal); border-radius: var(--ckn-r); padding: 14px 18px; margin: 1.4rem 0; font-size: 1rem; }
.ckn-gift b { font-family: 'Baloo 2', sans-serif; color: var(--ckn-teal-d); }

/* ── secties en overig ───────────────────────────────────────────────────── */
.ckn-sect { padding: 30px 0; }
.ckn-sect-alt { padding: 30px 0; background: #fff; border-top: 2px solid var(--ckn-line); border-bottom: 2px solid var(--ckn-line); }
/* ── unieke blokken op de homepage ───────────────────────────────────────── */
.ckn-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 1.2rem 0 0; }
.ckn-pick-card { display: flex; flex-direction: column; gap: 6px; background: var(--ckn-tile); border: 2px solid var(--ckn-line); border-bottom-width: 5px; border-radius: var(--ckn-r); padding: 17px 19px; }
.ckn-pick-kicker { margin: 0; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--ckn-oranje-t); }
.ckn-pick-name { margin: 0; font-family: 'Baloo 2', 'Mulish', system-ui, sans-serif; font-weight: 700; font-size: 1.12rem; }
.ckn-pick-name a { color: var(--ckn-teal-d); }
.ckn-pick-line { margin: 0; font-size: .92rem; color: var(--ckn-mute); }
.ckn-pick-meta { margin: .2rem 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ckn-pick-meta b { font-family: 'Baloo 2', sans-serif; font-size: 1.25rem; color: var(--ckn-teal); }
.ckn-pick-card .ckn-card-btns { margin-top: auto; padding-top: .8rem; }
.ckn-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 1.2rem 0 0; }
.ckn-trust-tile { background: var(--ckn-tile); border: 2px solid var(--ckn-line); border-bottom-width: 5px; border-radius: var(--ckn-r); padding: 16px 18px; }
.ckn-trust-tile h3 { margin: 0 0 .4rem; font-size: 1.02rem; color: var(--ckn-teal); }
.ckn-trust-tile p { margin: 0; font-size: .92rem; color: #4c5750; }

.ckn-more { margin: 1.2rem 0 0; font-size: .97rem; }
.ckn-more a { font-weight: 700; }
.ckn-grid-note { font-size: .87rem; color: var(--ckn-mute); margin: .9rem 0 0; }
.ckn-crumbs { font-size: .87rem; color: var(--ckn-mute); padding: 14px 0 0; }
.ckn-crumbs a { color: var(--ckn-mute); }
.ckn-stockbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 1rem 0 0; }
.ckn-stockbar span { font-size: .87rem; }
.ckn-faq dt { font-family: 'Baloo 2', sans-serif; font-weight: 700; margin-top: 1.2rem; color: var(--ckn-teal); }
.ckn-faq dd { margin: .3rem 0 0; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.ckn-foot { background: var(--ckn-teal-d); color: #d6e4e0; margin-top: 40px; padding: 32px 0 24px; font-size: .93rem; border-top: 4px solid var(--ckn-oranje); }
.ckn-foot a { color: #fff; }
.ckn-foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
.ckn-foot-cols h2 { font-size: 1rem; margin: 0 0 .5rem; color: #ffb45e; font-weight: 700; }
.ckn-foot ul { list-style: none; margin: 0; padding: 0; }
.ckn-foot li { margin-bottom: .3rem; }
.ckn-foot-bottom { border-top: 1px solid rgba(255, 255, 255, .18); margin-top: 22px; padding-top: 14px; font-size: .85rem; color: #b3c8c3; }

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.ckn-404 { text-align: center; padding: 70px 0; }
.ckn-404 h1 { font-size: 3.4rem; }

@media (max-width: 900px) {
  .ckn-pdp .ckn-wrap { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 720px) {
  h1 { font-size: 1.95rem; }
  h2 { font-size: 1.45rem; }
  .ckn-burger { display: block; }
  .ckn-nav {
    display: none; position: absolute; top: 70px; left: 0; right: 0;
    background: #fff; border-bottom: 2px solid var(--ckn-line);
    flex-direction: column; gap: 0; padding: 8px 14px 14px;
  }
  .ckn-nav-open .ckn-nav { display: flex; }
  .ckn-nav a { padding: 10px 6px; border-radius: 0; }
  .ckn-hero { padding: 30px 0 28px; }
  .ckn-hero .ckn-wrap { grid-template-columns: 1fr; gap: 22px; }
  .ckn-hero-art { max-width: 320px; margin: 0 auto; width: 100%; transform: rotate(-1.5deg); }
  .ckn-hero-nums { gap: 10px; }
  .ckn-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
}