/* Dropwacht — vertrekbord voor Pokémon-drops. Eén lettertype (Archivo, variabel in breedte), rijen in plaats van kaarten,
   rood alleen voor "nu te koop" en de hoofdknop. */
@font-face { font-family: 'Archivo'; src: url('/letters/archivo.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/letters/archivo-cursief.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-style: italic; font-display: swap; }

:root {
  color-scheme: light dark;
  --papier: #fbfbf9; --vlak: #ffffff; --vlak-2: #f1f1ee; --lijn: #e3e3df; --lijn-sterk: #c9c9c3;
  --inkt: #121417; --inkt-2: #4c5057; --inkt-3: #8a8e95;
  --rood: #e3350d; --rood-zacht: #fdeae4; --rood-inkt: #a8260a;
  --amber: #b26a00; --amber-zacht: #fff1d6;
  --groen: #1f7a3a; --groen-zacht: #e3f3e8;
  --blauw: #2457c5;
  --r-klein: 6px; --r: 10px; --r-groot: 16px;
  --kop-h: 56px; --tab-h: 62px;
  --smal: 'Archivo', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #141518; --vlak: #1b1c20; --vlak-2: #232429; --lijn: #2c2d33; --lijn-sterk: #3f4047;
    --inkt: #f1f1ee; --inkt-2: #b6b8bd; --inkt-3: #7f8289;
    --rood: #ff5a2e; --rood-zacht: #3a1d14; --rood-inkt: #ffb49d;
    --amber: #f0b254; --amber-zacht: #3a2c12;
    --groen: #5fcf85; --groen-zacht: #16301f;
    --blauw: #7fa3ff;
  }
}

* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; background: var(--papier); }
body { margin: 0; font: 400 16px/1.45 'Archivo', system-ui, -apple-system, sans-serif; color: var(--inkt); background: var(--papier); min-height: 100dvh; font-variant-numeric: tabular-nums; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 26px; line-height: 1.15; }
h2 { font-size: 17px; }
h3 { font-size: 16px; font-weight: 500; }
p { margin: 0 0 8px; }
code { font: 500 0.92em/1 'Archivo', monospace; font-stretch: 90%; background: var(--vlak-2); padding: 2px 6px; border-radius: var(--r-klein); }
.stil { color: var(--inkt-2); font-size: 14px; }
.fout, .fout-klein { color: var(--rood-inkt); }
.fout { background: var(--rood-zacht); padding: 10px 14px; border-radius: var(--r); font-size: 15px; }
.fout-klein { font-size: 13px; }
button, a, [role="button"] { touch-action: manipulation; }
button, .tab, .chipknop { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; border-radius: var(--r-klein); }

/* ---------- kop en menu ---------- */
.kop { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: calc(var(--kop-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 16px 0; background: color-mix(in srgb, var(--papier) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--lijn); }
.merk { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.merk svg { color: var(--rood); }
.menu { display: none; gap: 4px; }
.menu a, .tabbalk a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r); text-decoration: none; color: var(--inkt-2); font-weight: 500; font-size: 15px; }
.menu a.actief { color: var(--inkt); background: var(--vlak-2); }
.tabbalk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: space-around; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--lijn); }
.tabbalk a { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 10px; min-width: 64px; }
.tabbalk a.actief { color: var(--rood); }
.tabbalk a:active, .menu a:active { transform: scale(0.96); }
.inhoud { max-width: 1040px; margin: 0 auto; padding: 16px 16px calc(var(--tab-h) + 24px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .menu { display: flex; }
  .tabbalk { display: none; }
  .inhoud { padding: 28px 24px 60px; }
  h1 { font-size: 30px; }
}

/* ---------- schermkop, pillen, tabs, filters ---------- */
.schermkop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 14px; }
.pillen { display: flex; gap: 8px; flex-wrap: wrap; }
.pil { display: flex; flex-direction: column; min-width: 72px; padding: 6px 10px; border: 1px solid var(--lijn); border-radius: var(--r); background: var(--vlak); }
.pil b { font-size: 22px; line-height: 1; font-weight: 600; font-stretch: 80%; letter-spacing: -0.01em; }
.pil span { font-size: 12px; color: var(--inkt-2); }
.pil-rood b { color: var(--rood); }
.tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--lijn); margin-bottom: 12px; }
.tabs a { padding: 8px 0 10px; text-decoration: none; color: var(--inkt-2); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.actief { color: var(--inkt); border-color: var(--inkt); }
.tabs small { color: var(--inkt-3); font-size: 13px; margin-left: 4px; }
.filters { display: grid; gap: 10px; margin-bottom: 16px; }
.chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.chips::-webkit-scrollbar { display: none; }
.chipknop { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--lijn-sterk); background: var(--vlak); color: var(--inkt-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.chipknop.actief { background: var(--inkt); color: var(--papier); border-color: var(--inkt); }
.filters-rij { display: flex; gap: 8px; }
.filters-rij select, .filters-rij input { flex: 1; min-width: 0; }
@media (min-width: 900px) { .chips { margin: 0; padding: 0; } .filters { grid-template-columns: 1fr auto; align-items: center; } .filters-rij select { flex: 0 0 180px; } .filters-rij input { flex: 0 0 260px; } }

/* ---------- vormelementen ---------- */
input, select, textarea { font: inherit; font-size: 16px; color: var(--inkt); background: var(--vlak); border: 1px solid var(--lijn-sterk); border-radius: var(--r); padding: 9px 12px; width: 100%; min-width: 0; }
input[size] { width: auto; }
input::placeholder { color: var(--inkt-3); }
.formulier { display: grid; gap: 12px; }
.formulier label { display: grid; gap: 5px; font-size: 14px; font-weight: 500; color: var(--inkt-2); }
.formulier label small { font-weight: 400; color: var(--inkt-3); }
.formulier label.schakel, label.schakel { display: flex; align-items: center; gap: 10px; font-weight: 400; color: var(--inkt); }
label.schakel input { width: 18px; height: 18px; margin: 0; accent-color: var(--rood); }
fieldset { border: 1px solid var(--lijn); border-radius: var(--r); padding: 8px 12px 10px; display: grid; gap: 6px; margin: 0; }
legend { font-size: 13px; color: var(--inkt-2); padding: 0 4px; }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: var(--r); border: 1px solid var(--lijn-sterk); background: var(--vlak); color: var(--inkt); font: inherit; font-weight: 500; font-size: 15px; text-decoration: none; cursor: pointer; transition: transform 120ms ease-out, background 120ms; white-space: nowrap; }
.knop:active { transform: scale(0.97); background: var(--vlak-2); }
.knop-primair { background: var(--rood); border-color: var(--rood); color: #fff; }
.knop-primair:active { background: var(--rood-inkt); }
.knop-klein { padding: 7px 12px; font-size: 14px; }
.knop-mini { padding: 3px 8px; font-size: 12px; border-radius: var(--r-klein); }
.knop-breed { width: 100%; }
.knop-vol { background: var(--inkt); color: var(--papier); border-color: var(--inkt); }
.knop[disabled] { opacity: 0.5; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .knop:hover { background: var(--vlak-2); }
  .knop-primair:hover { background: var(--rood-inkt); }
  .knop-vol:hover { background: var(--inkt-2); }
  .chipknop:hover { border-color: var(--inkt-2); }
  .menu a:hover { background: var(--vlak-2); }
}
.inline { display: inline-flex; gap: 6px; align-items: center; }
.acties { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- flits ---------- */
.flits { position: sticky; top: calc(var(--kop-h) + env(safe-area-inset-top)); z-index: 15; margin: 0 auto; max-width: 1040px; padding: 10px 16px; font-size: 15px; font-weight: 500; background: var(--groen-zacht); color: var(--groen); animation: flits-in 240ms ease-out; }
.flits-fout { background: var(--rood-zacht); color: var(--rood-inkt); }
.flits-info { background: var(--vlak-2); color: var(--inkt); }
@keyframes flits-in { from { opacity: 0; transform: translateY(-6px); } }
.nieuwbalk { position: sticky; top: calc(var(--kop-h) + 8px + env(safe-area-inset-top)); z-index: 14; display: flex; justify-content: center; margin: -4px 0 10px; }
.nieuwbalk .knop { box-shadow: 0 6px 20px rgba(0,0,0,0.18); animation: flits-in 240ms ease-out; }

/* ---------- de rijen (het vertrekbord) ---------- */
.lijst { display: flex; flex-direction: column; border-top: 1px solid var(--lijn); }
.dagkop { font-size: 13px; font-weight: 600; color: var(--inkt-2); margin: 22px 0 6px; text-transform: none; }
.tijdlijn .dagkop:first-child { margin-top: 4px; }
.rij { display: grid; grid-template-columns: 56px 1fr auto; grid-template-areas: "beeld tekst rechts" "beeld acties acties"; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--lijn); position: relative; }
.rij-beeld { grid-area: beeld; width: 56px; height: 56px; display: block; }
.pbeeld { width: 56px; height: 56px; object-fit: contain; border-radius: var(--r-klein); background: #fff; border: 1px solid var(--lijn); display: flex; align-items: center; justify-content: center; }
.pbeeld-leeg { font-weight: 700; font-size: 20px; color: var(--k); background: var(--vlak-2); }
.rij-tekst { grid-area: tekst; min-width: 0; }
.rij-soort { font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.rij-soort time { font-weight: 600; font-stretch: 75%; font-size: 15px; color: var(--inkt); letter-spacing: 0.01em; }
.soort-voorraad { color: var(--rood); } .soort-nieuw { color: var(--groen); } .soort-preorder { color: var(--amber); } .soort-uitverkocht { color: var(--inkt-3); } .soort-prijs { color: var(--blauw); }
.rij-titel { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rij-titel a { text-decoration: none; }
.rij-meta { font-size: 13px; color: var(--inkt-2); display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
.wstip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--k, #888); flex: 0 0 auto; }
.rij-rechts { grid-area: rechts; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.rij-prijs { font-size: 20px; font-weight: 600; font-stretch: 78%; line-height: 1; letter-spacing: -0.01em; }
.rij-prijs s { color: var(--inkt-3); font-weight: 400; font-size: 14px; }
.rij-acties { grid-area: acties; display: flex; gap: 6px; margin-top: 4px; }
.rij-acties form { display: contents; }
.chip { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--lijn-sterk); color: var(--inkt-2); white-space: nowrap; }
.chip-voorraad { background: var(--rood); border-color: var(--rood); color: #fff; }
.chip-preorder { background: var(--amber-zacht); border-color: transparent; color: var(--amber); }
.chip-uitverkocht { color: var(--inkt-3); }
.rij-voorraad::before, .rij-nieuw::before, .rij-preorder::before { content: ''; position: absolute; left: -16px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--rood); }
.rij-nieuw::before { background: var(--groen); } .rij-preorder::before { background: var(--amber); }
@media (min-width: 900px) {
  .rij { grid-template-columns: 64px 1fr auto auto; grid-template-areas: "beeld tekst rechts acties"; align-items: center; gap: 0 16px; padding: 12px 0; }
  .rij-beeld, .pbeeld { width: 64px; height: 64px; }
  .rij-acties { margin: 0; }
  .rij-voorraad::before, .rij-nieuw::before, .rij-preorder::before { left: -24px; }
  .rij-titel { font-size: 16px; }
}

/* ---------- lege toestand, kaarten, kolommen ---------- */
.leeg { text-align: center; padding: 56px 16px; color: var(--inkt-2); }
.leeg h2 { color: var(--inkt); margin-bottom: 6px; }
.leeg .knop { margin-top: 10px; }
.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 16px; }
.kaart h2 { margin-bottom: 10px; }
.kaart-aandacht { border-color: var(--rood); }
.kolommen-2 { display: grid; gap: 14px; }
.met-zijkolom { display: grid; gap: 18px; }
.zijkolom .kaart { position: sticky; top: calc(var(--kop-h) + 16px); }
@media (min-width: 900px) { .kolommen-2 { grid-template-columns: 1fr 1fr; align-items: start; } .met-zijkolom { grid-template-columns: 1fr 340px; align-items: start; } }
.tussenkop { margin: 26px 0 8px; font-size: 15px; color: var(--inkt-2); }
.volgblok { border-bottom: 1px solid var(--lijn); }
.volgblok .rij { border-bottom: 0; padding-bottom: 6px; }
.volg-max { display: flex; align-items: center; gap: 8px; padding: 0 0 12px 68px; font-size: 14px; color: var(--inkt-2); }
.volg-max input { width: 84px; padding: 6px 8px; margin-left: 6px; }
@media (min-width: 900px) { .volg-max { padding-left: 80px; } }

/* ---------- product ---------- */
.terug { display: inline-block; text-decoration: none; color: var(--inkt-2); font-size: 15px; margin-bottom: 10px; }
.held { display: grid; grid-template-columns: 96px 1fr; gap: 16px; margin-bottom: 18px; }
.held-beeld .pbeeld { width: 96px; height: 96px; border-radius: var(--r); }
.held h1 { font-size: 20px; margin: 4px 0 8px; }
.held-status { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.held-prijs { font-size: 28px; font-weight: 600; font-stretch: 78%; line-height: 1; }
.held-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.held-acties form { display: contents; }
@media (min-width: 900px) { .held { grid-template-columns: 160px 1fr; gap: 24px; } .held-beeld .pbeeld { width: 160px; height: 160px; } .held h1 { font-size: 26px; } }
.spark-wrap { color: var(--blauw); margin: 6px 0; }
.spark { width: 100%; height: auto; max-width: 360px; }
.historie { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.historie li { display: grid; grid-template-columns: 150px 1fr; gap: 10px; }
.historie time { color: var(--inkt-2); font-stretch: 85%; }
.beheerblok { margin-top: 18px; color: var(--inkt-2); font-size: 14px; }
.beheerblok form { display: inline-block; margin: 8px 8px 0 0; }

/* ---------- winkels ---------- */
.winkels { display: grid; gap: 12px; }
@media (min-width: 900px) { .winkels { grid-template-columns: 1fr 1fr; } }
.winkel { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 14px 16px; }
.winkel header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.winkel header .wstip { width: 12px; height: 12px; }
.winkel .toestand { margin-left: auto; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--vlak-2); color: var(--inkt-2); }
.winkel-groen .toestand { background: var(--groen-zacht); color: var(--groen); }
.winkel-rood .toestand { background: var(--rood-zacht); color: var(--rood-inkt); }
.winkel-uit { opacity: 0.6; }
.lijsten { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; display: grid; gap: 4px; }
.lijsten li.uit { opacity: 0.55; }
.winkel-beheer { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lijn); font-size: 14px; }
.winkel-beheer input { width: 64px; padding: 5px 8px; margin: 0 4px; }
.winkel-beheer details { flex-basis: 100%; }
.winkel-beheer summary { cursor: pointer; color: var(--inkt-2); }

/* ---------- beheer ---------- */
.leden, .tickets { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.leden li, .tickets li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kaart h3 { margin: 14px 0 6px; font-size: 14px; color: var(--inkt-2); }
.logboek { list-style: none; margin: 0; padding: 0; font-size: 13px; display: grid; gap: 3px; max-height: 420px; overflow: auto; overscroll-behavior: contain; }
.logboek li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; }
.logboek time { color: var(--inkt-3); font-stretch: 85%; }
.log-fout span { color: var(--rood-inkt); }
.geheim { letter-spacing: 0.1em; }
.uitlog { margin-top: 14px; }

/* ---------- inloggen ---------- */
body.kaal { display: grid; place-items: center; padding: 24px 16px; min-height: 100dvh; }
.inlog { width: 100%; max-width: 380px; display: grid; gap: 18px; }
.inlog-merk { text-align: center; display: grid; justify-items: center; gap: 6px; color: var(--inkt); }
.inlog-merk svg { color: var(--rood); }
.inlog-merk h1 { font-size: 30px; letter-spacing: -0.03em; }
.inlog-merk p { color: var(--inkt-2); max-width: 28ch; }
.inlog .formulier { background: var(--vlak); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 18px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.nieuwbalk[hidden] { display: none; }

/* inline veld in een label: "Niets boven [ ] euro" op één regel */
.formulier label.veld-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.formulier label.veld-rij input { width: 116px; }

/* ---------- in de winkel ---------- */
.soort-winkel { color: var(--teal); }
.rij-winkel::before { content: ''; position: absolute; left: -16px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--teal); }
@media (min-width: 900px) { .rij-winkel::before { left: -24px; } }
.vestigingen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.vestigingen li { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: baseline; }
.vestigingen li i { width: 10px; height: 10px; border-radius: 50%; background: var(--lijn-sterk); display: inline-block; position: relative; top: 1px; }
.vestigingen li.voorraad i { background: var(--rood); }
.vestigingen li .afst { color: var(--inkt-2); white-space: nowrap; }
.vestigingen li small { color: var(--inkt-3); }
:root { --teal: #0f766e; }
@media (prefers-color-scheme: dark) { :root { --teal: #5eead4; } }