/* ── RadarDeals v2 — eigen CSS, geen frameworks, geen advertenties ──────────
   Letters:  Archivo (koppen, prijzen, badges) + Instrument Sans (lopende tekst)
   Kleuren:  inkt op papier, één signaalrood, één prijsgroen
   Handtekening: het radartje — een draaiende zoeker in logo en live-teken   */
:root {
  --papier: #f7f7f4;       /* warm licht, geen blauwgrijs */
  --kaart: #ffffff;
  --rand: #e9e8e2;
  --rand-donker: #d9d8d0;
  --inkt: #17181c;
  --dof: #6d7078;
  --signaal: #e8431f;      /* het dealrood van het merk */
  --signaal-diep: #c93413;
  --groen: #0b7a49;
  --geel: #f7c948;
  --schaduw: 0 12px 30px rgba(23, 24, 28, .08);
  --straal: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papier); color: var(--inkt);
  font: 15.5px/1.55 "Instrument Sans", system-ui, sans-serif;
}
h1, h2, h3, .prijs b, .badge, .prijsgroot, .logo {
  font-family: Archivo, "Instrument Sans", system-ui, sans-serif;
  letter-spacing: -.015em;
}
a { color: inherit; text-decoration: none; }
main { max-width: 1200px; margin: 0 auto; padding: 0 20px 64px; }
:focus-visible { outline: 2px solid var(--signaal); outline-offset: 2px; }

/* ── het radartje: de handtekening ── */
.radar {
  --maat: 20px;
  width: var(--maat); height: var(--maat); border-radius: 50%;
  display: inline-block; vertical-align: -3px; position: relative;
  border: 2px solid var(--signaal); flex: none;
}
.radar::before {                                  /* de draaiende zoeker */
  content: ""; position: absolute; inset: 1px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(232, 67, 31, .55), transparent 110deg);
  animation: zwaai 3.2s linear infinite;
}
.radar::after {                                   /* de stip die oplicht */
  content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--signaal); top: 22%; right: 24%;
  animation: piep 3.2s linear infinite;
}
@keyframes zwaai { to { transform: rotate(360deg); } }
@keyframes piep { 0%, 12% { opacity: 1; } 45%, 88% { opacity: .15; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .radar::before, .radar::after, .kaart, .knop { animation: none !important; transition: none !important; }
}

/* ── de merkband: logo-rij + afdelingsnavigatie, in het dealrood ── */
.band {
  background: linear-gradient(160deg, var(--signaal) 0%, var(--signaal-diep) 100%);
  color: #fff; position: sticky; top: 0; z-index: 50;
}
.kop {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px 14px; flex-wrap: wrap;
  padding: 14px clamp(16px, 3vw, 30px) 8px;
}
.logo { font-size: 1.35rem; font-weight: 800; display: flex; align-items: center; gap: 9px; color: #fff; }
.logo b { font-weight: 800; }
.logo b span { color: #ffd9cd; }
.logo .radar { border-color: #fff; }
.logo .radar::before { background: conic-gradient(from 0deg, rgba(255,255,255,.75), transparent 110deg); }
.logo .radar::after { background: #fff; }
.kop nav { display: flex; gap: 4px 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.kop nav > a.knop-stil {
  padding: 8px 12px; font-size: .95rem; font-weight: 600; color: #fff;
  border-radius: 10px; border: none; background: none;
}
.kop nav .knop-stil:hover { background: rgba(255, 255, 255, .14); }
.knop-geel { background: var(--geel); border-color: var(--geel); color: #201500; }
.knop-geel:hover { border-color: #201500; }
.afdelingsbalk {
  display: flex; gap: 2px 4px; align-items: center; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
  padding: 2px clamp(12px, 3vw, 26px) 12px;
}
.afdelingsbalk::-webkit-scrollbar { display: none; }
.afdelingsbalk a {
  color: #fff; font-weight: 700; font-size: .95rem; padding: 7px 11px;
  border-radius: 9px; white-space: nowrap;
}
.afdelingsbalk a:hover { background: rgba(255, 255, 255, .14); }
.afdelingsbalk-knop {
  margin-left: auto; background: #fff; color: var(--signaal) !important;
}
.afdelingsbalk-knop:hover { background: #ffe9e2 !important; }

/* ── knoppen & chips ── */
.knop {
  display: inline-block; padding: 10px 18px; border-radius: 11px;
  background: var(--kaart); border: 1px solid var(--rand-donker); color: var(--inkt);
  cursor: pointer; font-weight: 600; font-size: .95rem; font-family: inherit;
  transition: border-color .15s, background .15s, transform .15s;
}
.knop:hover { border-color: var(--inkt); }
.knop-vlam {
  background: var(--signaal); border-color: var(--signaal); color: #fff;
}
.knop-vlam:hover { background: var(--signaal-diep); border-color: var(--signaal-diep); }
.knop-klein { padding: 8px 14px; font-size: .88rem; }
.knop-groot { width: 100%; padding: 14px; font-size: 1.02rem; }
.chip {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--kaart); border: 1px solid var(--rand-donker);
  font-size: .86rem; color: var(--inkt); transition: .15s;
}
.chip small { color: var(--dof); }
.chip:hover { border-color: var(--inkt); }
.chip-actief { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.chip-premium { background: var(--geel); color: #201500; border: none; font-weight: 700; }

/* ── tabs (voorpagina + dealpagina's) ── */
.tabs { display: flex; gap: 8px; justify-content: center; margin: 4px auto 16px; flex-wrap: wrap; }
.tab {
  padding: 10px 20px; border-radius: 999px; border: 1px solid var(--rand-donker);
  background: var(--kaart); color: var(--inkt); font-weight: 600; font-size: .95rem;
  transition: .15s;
}
.tab:hover { border-color: var(--inkt); }
.tab-actief { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.prijsfout-let-op {
  max-width: 680px; margin: 0 auto 18px; padding: 10px 16px; text-align: center;
  background: #fdf1ec; border: 1px solid #f6cdbd; border-radius: 12px;
  color: #8a3b1a; font-size: .92rem;
}
.held-telegram { color: var(--dof); margin: 4px auto 0; font-size: .95rem; }
.held-telegram a { color: var(--signaal); font-weight: 700; }

/* ── held ── */
main { position: relative; padding-top: 26px; }
/* Het rode vlak hoort alléén achter de witte heldkaart op de voorpagina.
   Les van 28 aug: op alle andere pagina's stond donkere en grijze tekst
   ineens op vol rood - onleesbaar. */
main:has(.held-kaart)::before {
  content: ""; position: absolute; top: 0; left: 50%; z-index: -1;
  transform: translateX(-50%); width: 100vw; height: 190px;
  background: linear-gradient(160deg, var(--signaal) 0%, var(--signaal-diep) 100%);
}
.held-kaart {
  background: var(--kaart); border-radius: 22px; box-shadow: var(--schaduw);
  margin: 0 auto 34px; max-width: 980px; padding: 40px 26px 28px;
}
.held-kaart h1 { font-size: clamp(1.45rem, 3.4vw, 2.2rem); }
.held { text-align: center; padding: 46px 10px 22px; }
.held-smal { max-width: 640px; margin: 0 auto; }
.held h1 {
  font-size: clamp(1.7rem, 4.3vw, 2.9rem); margin: 0 0 14px; line-height: 1.12;
  font-weight: 800; letter-spacing: -.025em;
}
.held h1 em { color: var(--signaal); font-style: normal; white-space: nowrap; }
.sub { color: var(--dof); max-width: 610px; margin: 0 auto 18px; font-size: 1.02rem; }
.sub a, .teaser a { color: var(--signaal); font-weight: 700; }
.usp-rij {
  display: flex; gap: 8px 22px; justify-content: center; flex-wrap: wrap;
  margin: 0 auto 24px; color: var(--inkt); font-weight: 600; font-size: .93rem;
}
.usp-rij span::before {
  content: "✓"; color: var(--signaal); font-weight: 800; margin-right: 7px;
}
.held-troef {
  max-width: 600px; margin: 0 auto 22px; padding: 12px 20px; border-radius: var(--straal);
  background: var(--kaart); border: 1px solid var(--rand);
  color: var(--inkt); font-size: .96rem; line-height: 1.5;
}
.held-troef b, .held-troef a { color: var(--signaal); }
.held-troef a { font-weight: 700; white-space: nowrap; }
.zoek { display: flex; max-width: 580px; margin: 0 auto 18px; position: relative; }
.zoek input {
  flex: 1; padding: 15px 128px 15px 20px; border-radius: 999px;
  border: 1px solid var(--rand-donker);
  background: var(--kaart); color: var(--inkt); font: inherit; font-size: 1rem; outline: none;
  box-shadow: 0 4px 18px rgba(23, 24, 28, .06);
}
.zoek input:focus { border-color: var(--inkt); }
.zoek .knop { position: absolute; right: 5px; top: 5px; bottom: 5px; border-radius: 999px; padding: 0 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* ── live-stip: klein radartje ── */
.live-stip {
  display: inline-block; width: .58em; height: .58em; border-radius: 50%;
  border: .06em solid var(--signaal); margin-right: .18em; vertical-align: -.02em;
  position: relative; overflow: hidden;
}
.live-stip::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(232, 67, 31, .6), transparent 120deg);
  animation: zwaai 3.2s linear infinite;
}

/* ── teaser ── */
.teaser {
  background: #fff8e8; border: 1px solid #f2dfae; border-radius: var(--straal);
  padding: 13px 18px; margin: 6px 0 22px; text-align: center;
}

/* ── blokken op de voorpagina ── */
.blokkop h2 { font-weight: 800; }
.blok-sub { color: var(--dof); font-size: .92rem; margin: 2px 0 0; }
.meer-link { color: var(--dof); font-weight: 600; }
.meer-link:hover { color: var(--signaal); }

/* ── dealraster & kaarten ── */
.raster {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.kaart {
  background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--straal);
  overflow: hidden; transition: box-shadow .18s, transform .18s, border-color .18s;
  position: relative;
}
.kaart:hover { transform: translateY(-3px); border-color: var(--rand-donker); box-shadow: var(--schaduw); }
.kaart-nieuw { animation: binnenkomer .6s ease; }
@keyframes binnenkomer {
  from { opacity: 0; transform: translateY(-14px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.kaart-beeld {
  aspect-ratio: 5 / 4; background: #fff; border-bottom: 1px solid var(--rand);
  position: relative; display: flex; align-items: center; justify-content: center;
}
.kaart-beeld::before {                            /* leeg beeld: stil merkteken */
  content: ""; position: absolute; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--rand); background:
    radial-gradient(circle, var(--rand) 2px, transparent 2.5px) center / 100% 100%;
  opacity: .8;
}
.kaart-beeld img {
  width: 100%; height: 100%; object-fit: contain; position: relative;
  background: #fff; padding: 14px;
}
.badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--signaal); color: #fff;
  padding: 4px 10px; border-radius: 8px; font-weight: 800; font-size: .92rem;
  letter-spacing: 0;
}
.badge-label { left: auto; right: 10px; background: var(--inkt); font-size: .68rem; }
.kaart-body { padding: 13px 15px 14px; }
.kaart-body h3 {
  margin: 0 0 8px; font-size: .94rem; line-height: 1.35; font-weight: 600;
  font-family: "Instrument Sans", system-ui, sans-serif; letter-spacing: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em;
}
.prijs { margin: 0 0 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.prijs b { color: var(--inkt); font-size: 1.22rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.prijs s { color: #9a9da4; font-size: .86rem; }
.prijs .na { color: var(--groen); font-weight: 800; margin-left: 2px; }
.prijs .na::before { content: "→ "; color: var(--dof); font-weight: 600; }
.metcode { margin: 2px 0 8px; font-size: .84rem; color: var(--groen); font-weight: 600; }
.metcode b {
  background: #edf8f1; border: 1px dashed var(--groen); border-radius: 6px;
  padding: 0 6px; letter-spacing: .3px;
}
.metcode-slot { color: var(--dof); font-weight: 600; }
.metcode-slot span { color: var(--signaal); font-weight: 700; }
.meta {
  margin: 0; font-size: .8rem; color: var(--dof);
  display: flex; gap: 8px; align-items: baseline; white-space: nowrap;
}
.meta .winkel, .meta .cat { overflow: hidden; text-overflow: ellipsis; }
.meta .cat { flex: 0 1 auto; min-width: 0; }
.meta .winkel { font-weight: 600; color: var(--inkt); }
.meta .cat::before { content: "· "; }
.meta .tijd { margin-left: auto; }

/* ── rubriekentegels ── */
.tegels {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.tegel {
  background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--straal);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 3px;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tegel b { font-family: Archivo, sans-serif; font-weight: 700; font-size: 1rem; }
.tegel small { color: var(--dof); font-size: .82rem; }
.tegel:hover { border-color: var(--rand-donker); transform: translateY(-2px); box-shadow: var(--schaduw); }
.tegels-klein .tegel { padding: 12px 14px; }
/* Afdelingstegels (les 6 sep): het label stond óver de tekening. Nu:
   tekening boven, naam en aantal eronder, vier tegels naast elkaar. */
.tegels-foto { grid-template-columns: repeat(4, 1fr); }
.tegels-foto .tegel { padding: 0 0 12px; overflow: hidden; text-align: center; }
.tegels-foto .tegel b { font-size: .98rem; margin-top: 8px; }
.tegels-foto .tegel small { color: var(--dof); font-size: .78rem; }
@media (max-width: 900px) { .tegels-foto { grid-template-columns: repeat(2, 1fr); } }
.tegel-beeld {
  display: block; aspect-ratio: 5 / 4; background: #fff; margin: 0;
  position: relative;
}
.tegel-beeld::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--rand); opacity: .8;
}
.tegel-beeld img { position: relative; z-index: 1; background: #fff; }
.tegel-beeld img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.rubriek-kop { padding-bottom: 12px; }
.sorteerbalk { margin-top: 4px; }
.sorteerbalk .tab { padding: 8px 16px; font-size: .88rem; }
.filterbalk {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px;
}
.filterbalk input[type=search] {
  flex: 1 1 200px; padding: 10px 14px; border-radius: 11px;
  border: 1px solid var(--rand-donker); background: var(--kaart); font: inherit;
}
.filterbalk select {
  padding: 10px 12px; border-radius: 11px; border: 1px solid var(--rand-donker);
  background: var(--kaart); font: inherit; color: var(--inkt); max-width: 200px;
}
.filterbalk input:focus, .filterbalk select:focus { outline: none; border-color: var(--inkt); }
.paginering {
  display: flex; gap: 14px; align-items: center; justify-content: center;
  margin: 26px 0 6px;
}
.paginanummer { color: var(--dof); font-size: .92rem; }

/* ── broodkruimel + zijbalk-indeling (afdelingspagina's) ── */
.broodkruimel { font-size: .88rem; color: var(--dof); margin: 0 0 14px; }
.broodkruimel a:hover { color: var(--signaal); }
.broodkruimel b { color: var(--inkt); font-weight: 600; }
.indeling { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; }
.zijbalk { position: sticky; top: 118px; font-size: .92rem; }
.zijbalk h4 {
  margin: 18px 0 6px; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dof); font-weight: 700;
}
.zijbalk h4:first-child { margin-top: 0; }
.zijbalk ul { list-style: none; margin: 0; padding: 0; }
.zijbalk li a {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 5px 8px; border-radius: 8px; color: var(--inkt);
}
.zijbalk li a small { color: var(--dof); }
.zijbalk li a:hover { background: var(--kaart); }
.zijbalk .actief { background: var(--inkt); color: #fff; }
.zijbalk .actief small { color: #cfd0d4; }
.zijbalk-hoofd { font-weight: 700; display: block; padding: 5px 8px; border-radius: 8px; }
.afdeling-kop h1 { margin: 0 0 2px; font-size: 1.6rem; }
.afdeling-kop { margin-bottom: 14px; }
.doelgroep-naam { color: var(--dof); font-weight: 600; font-size: 1.05rem; }
.doelgroepen { display: flex; gap: 8px; margin: 0 0 14px; }
.subchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.raster-vier { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }

/* ── merkenrij: witte blokjes met de merknaam, zoals een logorij ── */
.merkenrij {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none;
  margin: 0 0 16px; padding-bottom: 2px;
}
.merkenrij::-webkit-scrollbar { display: none; }
.merkblok {
  flex: none; background: var(--kaart); border: 1px solid var(--rand-donker);
  border-radius: 10px; padding: 12px 20px; font-family: Archivo, sans-serif;
  font-weight: 700; letter-spacing: .02em; transition: .15s;
}
.merkblok:hover { border-color: var(--inkt); transform: translateY(-1px); }

.prijsband { display: flex; gap: 6px; }
.prijsband input {
  width: 82px; padding: 10px 10px; border-radius: 11px;
  border: 1px solid var(--rand-donker); background: var(--kaart); font: inherit;
}
.prijsband input:focus { outline: none; border-color: var(--inkt); }

@media (max-width: 900px) {
  .indeling { grid-template-columns: 1fr; }
  .zijbalk { display: none; }        /* op mobiel nemen de subchips het over */
}

/* ── tegel-collage: echte productfoto's uit de catalogus (6 sep) ── */
.tegel-collage { display: grid; grid-template-columns: 1.6fr 1fr;
  grid-template-rows: 1fr 1fr; gap: 4px; padding: 10px; background: #f3f3ef; }
.tegel-collage::before { display: none; }
.tegel-collage img { width: 100%; height: 100%; object-fit: contain; padding: 6px;
  background: #fff; border-radius: 10px; }
.tegel-collage img:first-child { grid-row: 1 / 3; }

/* ── merklogo's in de merkenrij ── */
.merkblok { display: flex; align-items: center; justify-content: center;
  min-width: 118px; height: 54px; padding: 8px 16px; }
.merkblok img { max-height: 30px; max-width: 96px; object-fit: contain;
  filter: grayscale(1); opacity: .8; transition: .15s; }
.merkblok:hover img { filter: none; opacity: 1; }

/* ── hero met topproduct ── */
.held-met-product { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px;
  align-items: center; }
.held-product { display: grid; grid-template-columns: 120px 1fr; gap: 14px;
  align-items: center; background: #fff; border: 1px solid var(--rand);
  border-radius: 16px; padding: 12px 16px; text-decoration: none; color: var(--inkt); }
.held-product:hover { box-shadow: var(--schaduw); }
.held-product img { width: 120px; height: 120px; object-fit: contain; }
.held-product-tekst { display: flex; flex-direction: column; gap: 4px; }
.held-product-tekst b { color: var(--signaal); font-size: 1.1rem; }
.held-product-tekst em { font-style: normal; font-size: .92rem; line-height: 1.3; }
.held-product-tekst strong { font-size: 1.15rem; }
.held-product-tekst strong s { color: #9a9da4; font-size: .85rem; font-weight: 400; margin-left: 6px; }
@media (max-width: 900px) { .held-met-product { grid-template-columns: 1fr; } }

/* ── kaartpolish: meer foto, prijs als blikvanger ── */
.kaart-beeld { aspect-ratio: 1 / 1; }
.kaart-beeld img { padding: 14px; }
.prijs b { font-size: 1.32rem; }
.kaart { box-shadow: 0 1px 2px rgba(23,24,28,.04); }
.kaart:hover { box-shadow: 0 10px 28px rgba(23,24,28,.10); }

/* ── maten-chips op kaart en productpagina ── */
.maten { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
.maten span, .maten a { font-size: .72rem; padding: 2px 7px; border-radius: 6px;
  border: 1px solid var(--rand-donker); background: #fff; color: var(--inkt); }
.maten a:hover { border-color: var(--signaal); color: var(--signaal); }
.maten-klein { margin-top: 6px; }

/* ── productpagina (vergelijk per streepjescode) ── */
.product-vlak { display: grid; grid-template-columns: 300px 1fr; gap: 28px;
  align-items: start; margin-bottom: 22px; }
.product-beeld { background: #fff; border: 1px solid var(--rand);
  border-radius: 16px; min-height: 240px; display: flex;
  align-items: center; justify-content: center; padding: 18px; }
.product-beeld img { max-width: 100%; max-height: 300px; object-fit: contain; }
.product-merk { text-transform: uppercase; letter-spacing: .06em;
  font-size: .8rem; color: var(--dof); margin: 0 0 4px; font-weight: 700; }
.product-kern h1 { margin: 0 0 10px; font-size: 1.45rem; line-height: 1.25; }
.product-vanaf { font-size: 1.1rem; margin: 0 0 6px; }
.product-laagste { display: inline-block; background: var(--inkt); color: #fff;
  border-radius: 999px; padding: 5px 14px; font-size: .85rem; font-weight: 700; }
.product-historie { color: var(--dof); font-size: .9rem; }
.product-tabel td { vertical-align: middle; }
.product-tabel .badge { position: static; display: inline-block; }
.product-tabel .knop { padding: 8px 14px; font-size: .88rem; }
.kaart-vergelijk { display: block; text-align: center; padding: 8px 10px;
  border-top: 1px solid var(--rand); font-size: .85rem; font-weight: 600;
  color: var(--signaal); }
.kaart-vergelijk:hover { background: var(--kaart); }
@media (max-width: 700px) { .product-vlak { grid-template-columns: 1fr; } }

/* ── kassaboek (beheer) ── */
.tabel { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabel th { text-align: left; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--dof); padding: 6px 10px;
  border-bottom: 2px solid var(--rand-donker); }
.tabel td { padding: 7px 10px; border-bottom: 1px solid var(--rand); }
.tabel tr.lek td { background: #fdeeea; }

/* ── voordelen-band boven de voet ── */
.beloften {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px; margin: 52px 0 8px; padding: 26px 0 0; border-top: 1px solid var(--rand);
}
.belofte h3 { margin: 0 0 6px; font-size: 1.02rem; font-weight: 800; }
.belofte p { margin: 0; color: var(--dof); font-size: .93rem; }

/* ── dealpagina ── */
.dealpagina { max-width: 940px; margin: 0 auto; }
.terug { color: var(--dof); font-size: .9rem; }
.deal-hoofd { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin: 12px 0 4px; align-items: start; }
.deal-beeld {
  position: relative; background: var(--kaart); border: 1px solid var(--rand);
  border-radius: var(--straal); overflow: hidden; aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
}
.deal-beeld img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }
.deal-winkel { color: var(--dof); font-weight: 600; margin: 0; }
.deal-info h1 { font-size: 1.5rem; margin: 4px 0 10px; line-height: 1.22; font-weight: 800; }
.deal-prijs { font-size: 1.7rem; margin: 6px 0; font-family: Archivo, sans-serif; font-weight: 800; }
.deal-prijs s { color: var(--dof); font-size: 1.02rem; font-weight: 400; margin-right: 6px; font-family: "Instrument Sans", sans-serif; }
.deal-prijs .na { color: var(--groen); margin-left: 8px; }
.deal-prijs .na::before { content: "→ "; color: var(--dof); font-weight: 600; }
.deal-tijd { color: var(--dof); font-size: .9rem; margin: 8px 0 14px; }
.deal-info .knop-groot { width: auto; display: inline-block; padding: 13px 28px; }
.deel { margin-top: 16px; display: flex; gap: 14px; align-items: center; font-size: .9rem; color: var(--dof); flex-wrap: wrap; }
.deel a { color: var(--signaal); font-weight: 700; }
.prijsgeschiedenis { max-width: 940px; margin: 18px auto; }
.spark { width: 100%; height: 96px; display: block; margin-top: 10px; background: var(--kaart);
  border: 1px solid var(--rand); border-radius: 10px; }
.gerelateerd { max-width: 940px; margin: 24px auto 0; }
.gerelateerd h2 { margin: 0 0 10px; }
.deal-disclaimer { max-width: 780px; margin: 22px auto; text-align: center; color: var(--dof); font-size: .85rem; }
@media (max-width: 640px) { .deal-hoofd { grid-template-columns: 1fr; } }

/* ── prijzenpagina ── */
.prijzen { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; padding: 10px 0 40px; }
.prijskaart {
  background: var(--kaart); border: 1px solid var(--rand); border-radius: 18px;
  padding: 26px; width: 320px; position: relative;
}
.prijskaart-vlam { border-color: var(--signaal); box-shadow: 0 12px 36px rgba(232, 67, 31, .12); }
.prijskaart h3 { margin: 0 0 6px; }
.prijsgroot { font-size: 2.1rem; font-weight: 800; margin: 0; font-variant-numeric: tabular-nums; }
.prijsgroot small { font-size: 1rem; color: var(--dof); font-weight: 400; font-family: "Instrument Sans", sans-serif; }
.prijskaart ul { list-style: none; padding: 0; margin: 16px 0 20px; color: var(--dof); }
.prijskaart li { padding: 4px 0; }
.prijskaart li::before { content: "✓"; color: var(--groen); font-weight: 800; margin-right: 8px; }
.lint {
  position: absolute; top: -12px; right: 18px;
  background: var(--signaal); color: #fff;
  padding: 4px 12px; border-radius: 8px; font-size: .75rem; font-weight: 700;
}
.checkout input[type=email], .formulier input[type=text] {
  width: 100%; padding: 12px 14px; border-radius: 10px; margin-bottom: 10px;
  border: 1px solid var(--rand-donker); background: var(--kaart); color: var(--inkt); font: inherit; font-size: 1rem;
}
.checkout input:focus, .formulier input:focus { outline: none; border-color: var(--inkt); }
.periode { display: flex; gap: 16px; margin-bottom: 12px; color: var(--dof); }

/* ── panelen, formulieren, tabellen ── */
.paneel {
  background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--straal);
  padding: 22px 24px; margin: 0 auto 18px; max-width: 640px;
  box-shadow: 0 3px 14px rgba(23, 24, 28, .04);
}
.paneel h2 { margin-top: 0; font-size: 1.1rem; }
.formulier label { display: block; margin-bottom: 14px; color: var(--dof); font-size: .9rem; }
.formulier input[type=range] { width: 100%; accent-color: var(--signaal); }
.codeform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.codeform input, .codeform select {
  padding: 8px 10px; border: 1px solid var(--rand-donker); border-radius: 10px;
  background: var(--kaart); font: inherit;
}
.melding {
  background: var(--papier); border: 1px solid var(--rand); border-radius: 10px;
  padding: 10px 14px; font-size: .92rem;
}
.melding-ok { border-color: #9fd8bc; background: #eefaf4; }
.stappen { color: var(--dof); }
.code-groot {
  background: #fdf1ec; border: 1px dashed var(--signaal); border-radius: 8px;
  padding: 3px 10px; font-size: 1.05rem; color: var(--signaal); letter-spacing: 1px;
}
.tabel { width: 100%; border-collapse: collapse; font-size: .85rem; }
.tabel th, .tabel td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--rand); }
.rij-uit { opacity: .5; }
.leeg { text-align: center; color: var(--dof); padding: 50px 0; }

/* ── voet ── */
.voet {
  text-align: center; color: var(--dof); font-size: .9rem;
  border-top: 1px solid var(--rand); padding: 30px 20px 44px; margin-top: 26px;
  background: var(--kaart);
}
.voet a:hover { color: var(--signaal); }
.klein { font-size: .78rem; color: var(--dof); }

/* uitklaplijst met de rest van de categorieknoppen */
.chips-meer { margin-top: 10px; text-align: center; }
.chips-meer summary { cursor: pointer; color: var(--dof); font-size: .95rem;
  list-style: none; display: inline-block; }
.chips-meer summary::-webkit-details-marker { display: none; }
.chips-meer summary:hover { color: var(--inkt); }
.chips-meer[open] summary { margin-bottom: 10px; }

/* Vangnet voor browsers zonder aspect-ratio: zonder dit hebben de
   beeldvakken geen hoogte en rendert elke foto op ware grootte. */
@supports not (aspect-ratio: 1 / 1) {
  .kaart-beeld { height: 210px; }
  .tegel-beeld { height: 170px; }
  .deal-beeld { height: 300px; }
}

@media (max-width: 640px) {
  .held { padding-top: 30px; }
  .zoek input { padding-right: 106px; }
  .zoek .knop { padding: 0 16px; }
  .raster { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kaart-body { padding: 10px 11px 12px; }
  .kaart-body h3 { font-size: .84rem; }
  .prijs b { font-size: 1.05rem; }
  .meta .cat { display: none; }
}