@import './variables.css';

/* ── Reset & basis ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-basis);
  font-size: var(--tekst-basis);
  color: var(--kleur-tekst);
  background: var(--kleur-achtergrond);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ── Typografie helpers ──────────────────────────────────────────────── */
.serif {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tnum { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--font-basis);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kleur-subtiel);
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ── Layout ─────────────────────────────────────────────────────────── */
.container {
  max-width: var(--breedte-container);
  margin: 0 auto;
  padding: 0 var(--ruimte-md);
}

/* ── Header (klant) ──────────────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  background: #fbf6ec;
  border-bottom: 1px solid var(--kleur-rand);
  z-index: 50;
}

.app-header__inner {
  display: flex;
  align-items: center;
  gap: var(--ruimte-md);
  padding: 14px 28px;
}

.app-header__logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.app-header__merk {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.app-header__merk-naam {
  font-family: var(--font-display);
  font-size: 22px;
  color: #412e27;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.app-header__merk-sub {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kleur-subtiel);
}

.app-header__naam {
  font-family: var(--font-display);
  font-size: var(--tekst-xl);
  font-weight: 400;
  color: #412e27;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.app-header__spacer { flex: 1; }

.app-header__info {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--kleur-subtiel);
  display: flex;
  gap: 16px;
}

.app-header__winkelwagen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--kleur-accent);
  color: #fff;
  border: 1px solid var(--kleur-accent);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font: 500 14px/1 var(--font-basis);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--overgang-snel), border-color var(--overgang-snel);
}
.app-header__winkelwagen:hover { background: var(--kleur-accent-hover); border-color: var(--kleur-accent-hover); }

.app-header__badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: rgba(255,255,255,.2);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
}

/* ── Admin header ────────────────────────────────────────────────────── */
.app-header--admin {
  height: var(--hoogte-header);
  display: flex;
  align-items: center;
}

.app-header--admin .app-header__inner {
  padding: 0 var(--ruimte-lg);
  height: 100%;
}

/* ── Categorie-navigatiebalk ─────────────────────────────────────────── */
.categorie-nav {
  position: sticky;
  top: 68px;
  background: var(--kleur-achtergrond);
  border-bottom: 1px solid var(--kleur-rand);
  z-index: 40;
  overflow-x: auto;
  scrollbar-width: none;
}
.categorie-nav::-webkit-scrollbar { display: none; }

.categorie-nav__lijst {
  display: flex;
  gap: 0;
  padding: 0 28px;
  list-style: none;
  min-width: max-content;
}

.categorie-nav__link {
  display: block;
  padding: 16px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kleur-subtiel);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--overgang-snel), border-color var(--overgang-snel);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: inherit;
}

.categorie-nav__link:hover,
.categorie-nav__link--actief {
  color: #412e27;
  border-bottom-color: var(--kleur-accent);
}

/* ── Menu-layout ─────────────────────────────────────────────────────── */
.menu-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  max-width: var(--breedte-container);
  margin: 0 auto;
}

.menu-sectie { min-width: 0; }

/* ── Hero sectie ─────────────────────────────────────────────────────── */
.menu-hero {
  padding: 44px 56px 28px;
  border-bottom: 1px solid var(--kleur-rand);
  background: #fbf6ec;
}

.menu-hero__kop {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1.02;
  color: #412e27;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.menu-hero__kop em { color: var(--kleur-accent); font-style: normal; }

/* ── Categorie secties ───────────────────────────────────────────────── */
.categorie-sectie {
  padding: 32px 56px;
  border-bottom: 1px solid var(--kleur-rand);
}

.categorie-sectie__header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 4px;
}

.categorie-sectie__titel {
  font-family: var(--font-display);
  font-size: 28px;
  color: #412e27;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-weight: 400;
}

.categorie-sectie__lijn {
  flex: 1;
  border: 0;
  border-top: 1px solid var(--kleur-rand);
}

.categorie-sectie__teller {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--kleur-subtiel);
  letter-spacing: 0.1em;
}

/* ── Item rij (editorial list) ───────────────────────────────────────── */
.item-rij {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--kleur-rand);
  align-items: start;
  cursor: pointer;
}

.item-rij:last-child { border-bottom: 1px solid var(--kleur-rand); }
.item-rij--uitverkocht { opacity: 0.5; cursor: not-allowed; }

.item-rij__naam {
  font-family: var(--font-display);
  font-size: 20px;
  color: #412e27;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.item-rij__beschrijving {
  font-size: 14px;
  line-height: 1.5;
  color: var(--kleur-subtiel);
  margin: 6px 0 10px;
  max-width: 52ch;
}

.item-rij__labels { display: flex; gap: 6px; flex-wrap: wrap; }

.item-rij__rechts {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.item-rij__prijs {
  font-family: var(--font-display);
  font-size: 20px;
  color: #412e27;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.item-rij__badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ── Item-kaart (voor eventuele grid fallback) ────────────────────────── */
.item-kaart {
  background: #fff;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  position: relative;
}

.item-kaart__foto {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}

.item-kaart__foto-placeholder {
  aspect-ratio: 4/3;
  background: repeating-linear-gradient(
    135deg,
    rgba(65,46,39,.05), rgba(65,46,39,.05) 8px,
    rgba(65,46,39,.09) 8px, rgba(65,46,39,.09) 16px
  ), #f7efe2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kleur-rand);
  font-size: 2rem;
}

.item-kaart__body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.item-kaart__badges { display: flex; gap: 6px; flex-wrap: wrap; }

.item-kaart__naam {
  font-family: var(--font-display);
  font-size: 17px;
  color: #412e27;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.item-kaart__beschrijving {
  font-size: var(--tekst-sm);
  color: var(--kleur-subtiel);
  flex: 1;
}

.item-kaart__labels { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }

.item-kaart__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--ruimte-sm);
}

.item-kaart__prijs {
  font-family: var(--font-display);
  font-size: 17px;
  color: #412e27;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.item-kaart__uitverkocht-label {
  font-size: var(--tekst-sm);
  color: var(--kleur-subtiel);
  font-style: italic;
}

/* ── Badge ───────────────────────────────────────────────────────────── */
.badge {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 4px 7px;
  border-radius: var(--radius-xs);
  text-transform: uppercase;
  display: inline-block;
}

.badge--nieuw      { background: #412e27; color: #ede1d1; }
.badge--populair   { background: var(--kleur-fout); color: #fff; }
.badge--maand      { background: var(--kleur-accent); color: #fbf6ec; }
.badge--goedgekeurd   { background: var(--status-goedgekeurd-bg);   color: var(--status-goedgekeurd-tekst); }
.badge--in-behandeling { background: var(--status-in-behandeling-bg); color: var(--status-in-behandeling-tekst); }
.badge--afgewezen  { background: var(--status-afgewezen-bg);  color: var(--status-afgewezen-tekst); }

/* ── Label-chip ──────────────────────────────────────────────────────── */
.label-chip {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid currentColor;
  cursor: default;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.label-chip svg, .chip svg { width: 1em; height: 1em; vertical-align: middle; flex-shrink: 0; }

/* ── Knoppen ─────────────────────────────────────────────────────────── */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-sm);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.01em;
  border: 1px solid var(--kleur-tekst);
  background: var(--kleur-tekst);
  color: #fff;
  transition: background var(--overgang-snel), border-color var(--overgang-snel), transform var(--overgang-snel);
  white-space: nowrap;
  cursor: pointer;
}

.knop:active { transform: translateY(1px); }
.knop:focus-visible { outline: none; box-shadow: var(--schaduw-focus); }

.knop-primair {
  background: var(--kleur-accent);
  border-color: var(--kleur-accent);
  color: #fff;
}
.knop-primair:hover { background: var(--kleur-accent-hover); border-color: var(--kleur-accent-hover); }

.knop-secundair {
  background: transparent;
  color: var(--kleur-tekst);
  border: 1px solid rgba(65,46,39,.28);
}
.knop-secundair:hover { background: #f7efe2; }

.knop-gevaar {
  background: var(--kleur-fout);
  border-color: var(--kleur-fout);
  color: #fff;
}
.knop-gevaar:hover { background: var(--kleur-fout-hover); border-color: var(--kleur-fout-hover); }

.knop--ghost {
  background: transparent;
  border-color: rgba(65,46,39,.28);
  color: var(--kleur-tekst);
}
.knop--ghost:hover { background: #f7efe2; }

.knop--blok  { width: 100%; }
.knop--groot { padding: 14px 20px; font-size: 15px; }
.knop--sm    { padding: 7px 11px; font-size: 13px; }
.knop:disabled { opacity: .5; cursor: not-allowed; }

/* ── Formulier ───────────────────────────────────────────────────────── */
.formulier-groep { display: flex; flex-direction: column; gap: var(--ruimte-xs); }
.formulier-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kleur-subtiel);
}

.formulier-input,
.formulier-select,
.formulier-textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid rgba(65,46,39,.28);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  background: #fff;
  color: var(--kleur-tekst);
  transition: border-color var(--overgang-snel), box-shadow var(--overgang-snel);
}

.formulier-input:focus,
.formulier-select:focus,
.formulier-textarea:focus {
  outline: none;
  border-color: var(--kleur-accent);
  box-shadow: var(--schaduw-focus);
}

.formulier-textarea { resize: vertical; min-height: 80px; }
.formulier-hulptekst { font-size: var(--tekst-xs); color: var(--kleur-subtiel); }

/* ── Kaart ───────────────────────────────────────────────────────────── */
.kaart {
  background: #fff;
  border-radius: var(--radius-sm);
  border: 1px solid var(--kleur-rand);
  padding: var(--ruimte-lg);
}
.kaart--smal { max-width: var(--breedte-smal); }
.kaart__titel {
  font-family: var(--font-display);
  font-size: var(--tekst-xl);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #412e27;
  margin-bottom: var(--ruimte-md);
}
.kaart__subtitel { font-size: var(--tekst-sm); color: var(--kleur-subtiel); }

/* ── Meldingen ───────────────────────────────────────────────────────── */
.melding {
  padding: var(--ruimte-md);
  border-radius: var(--radius-sm);
  font-size: var(--tekst-sm);
  border-left: 3px solid currentColor;
}
.melding--fout   { background: var(--kleur-fout-bg);   color: var(--kleur-fout); }
.melding--succes { background: var(--kleur-succes-bg); color: var(--kleur-succes); }
.melding--info   { background: var(--kleur-info-bg);   color: var(--kleur-info); }

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42,32,28,.55);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

@media (min-width: 641px) {
  .modal-overlay { align-items: center; padding: var(--ruimte-lg); }
}

.modal {
  background: #fbf6ec;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--ruimte-lg);
}

@media (min-width: 641px) {
  .modal { border-radius: var(--radius-md); }
}

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--ruimte-md);
  padding-bottom: var(--ruimte-md);
  border-bottom: 1px solid var(--kleur-rand);
}

.modal__naam {
  font-family: var(--font-display);
  font-size: 26px;
  color: #412e27;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.modal__beschrijving { font-size: 14px; color: var(--kleur-subtiel); margin-top: 4px; }

.modal__sluiten {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--kleur-subtiel);
  line-height: 1;
  padding: var(--ruimte-xs);
  cursor: pointer;
}

/* ── Bestelzijbalk (desktop) ─────────────────────────────────────────── */
.winkelwagen-zijbalk {
  position: sticky;
  top: 68px;
  height: 100vh;
  overflow-y: auto;
  border-left: 1px solid var(--kleur-rand);
  background: #fff;
  padding: var(--ruimte-lg);
}

.winkelwagen-kaart { display: flex; flex-direction: column; gap: var(--ruimte-md); }

.winkelwagen-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--ruimte-sm);
  font-size: var(--tekst-sm);
  padding: 8px 0;
  border-bottom: 1px solid var(--kleur-rand);
}

.winkelwagen-item__naam { flex: 1; }
.winkelwagen-item__prijs { font-weight: var(--gewicht-vet); white-space: nowrap; }

.winkelwagen-item__verwijder {
  background: none;
  border: none;
  color: var(--kleur-subtiel);
  font-size: var(--tekst-sm);
  padding: 0 var(--ruimte-xs);
  cursor: pointer;
}
.winkelwagen-item__verwijder:hover { color: var(--kleur-fout); }

.winkelwagen-totaal {
  display: flex;
  justify-content: space-between;
  font-weight: var(--gewicht-vet);
  border-top: 2px solid var(--kleur-tekst);
  padding-top: var(--ruimte-sm);
  margin-top: var(--ruimte-xs);
}

.winkelwagen-titel {
  font-family: var(--font-display);
  font-size: 16px;
  color: #412e27;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--ruimte-md);
  padding-bottom: var(--ruimte-sm);
  border-bottom: 1px solid var(--kleur-rand);
}

/* ── Sticky mobiel bestelbar ─────────────────────────────────────────── */
.mobiel-bestelbar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--kleur-rand);
  padding: var(--ruimte-md);
  z-index: 40;
  box-shadow: 0 -4px 12px rgba(42,32,28,.1);
}

/* ── Statusbalk (wachtscherm) ────────────────────────────────────────── */
.statusbalk {
  display: flex;
  align-items: center;
  gap: 0;
  margin: var(--ruimte-xl) 0;
}

.statusbalk__stap {
  flex: 1;
  text-align: center;
  font-size: var(--tekst-xs);
  font-weight: var(--gewicht-medium);
  color: var(--kleur-subtiel);
  position: relative;
}

.statusbalk__stap::before {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--kleur-rand);
  margin: 0 auto var(--ruimte-xs);
}

.statusbalk__stap--actief::before  { background: var(--kleur-accent); }
.statusbalk__stap--klaar::before   { background: var(--kleur-succes); }
.statusbalk__stap--fout::before    { background: var(--kleur-fout); }

/* ── Auth-pagina ─────────────────────────────────────────────────────── */
.auth-pagina {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ruimte-lg);
  background: var(--kleur-achtergrond);
}
.auth-pagina__logo {
  font-family: var(--font-display);
  font-size: var(--tekst-2xl);
  color: var(--kleur-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Spinner ─────────────────────────────────────────────────────────── */
.spinner {
  width: 40px;
  height: 40px;
  border: 2px solid var(--kleur-rand);
  border-top-color: var(--kleur-accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: var(--ruimte-2xl) auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Laadspinner "Penseel" (design handoff laadspinner, variant 1) ──
   De penseelcirkel uit het logo wordt getekend en weer gewist; "Aim's" staat
   stil. De paden komen uit de sprite in index.php (#aims-ring / #aims-text).
   Twee geregistreerde hoeken sturen een conic-gradient-masker. Zonder
   @property-ondersteuning springt de boog in plaats van vloeiend te tekenen. */
@property --aims-s { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --aims-e { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.aims-spinner {
  --size: 48px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--size);
  height: calc(var(--size) * 650 / 635);
  color: var(--kleur-accent);
}
.aims-spinner svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: currentColor;
  overflow: visible;
}
.aims-spinner__ring {
  -webkit-mask: conic-gradient(from 6deg, transparent var(--aims-s), #000 var(--aims-s) var(--aims-e), transparent var(--aims-e));
          mask: conic-gradient(from 6deg, transparent var(--aims-s), #000 var(--aims-s) var(--aims-e), transparent var(--aims-e));
  animation: aims-penseel 2s cubic-bezier(.6, 0, .35, 1) infinite;
}
@keyframes aims-penseel {
  0%   { --aims-s: 0deg;   --aims-e: 0deg; }
  50%  { --aims-s: 0deg;   --aims-e: 360deg; }
  100% { --aims-s: 360deg; --aims-e: 360deg; }
}
.aims-spinner--compact .aims-spinner__text { display: none; }
@keyframes aims-ademen { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .aims-spinner__ring { animation: aims-ademen 1.6s ease-in-out infinite; -webkit-mask: none; mask: none; }
}

/* Spinner + uitleg, bv. "Adres opzoeken…". Pas na 300ms zichtbaar: een
   antwoord dat sneller komt geeft dan geen flits. */
.aims-wachten {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  color: var(--aims-ink-3);
  animation: aims-wachten-in .2s ease .3s both;
}
@keyframes aims-wachten-in { from { opacity: 0; } to { opacity: 1; } }

/* Spinner als eigen blok: gecentreerd, en ook pas na 300ms zichtbaar. Spant in
   een grid (het tijdslotraster) de volle breedte. */
.aims-laden {
  display: flex;
  justify-content: center;
  grid-column: 1 / -1;
  padding: 16px 0;
  animation: aims-wachten-in .2s ease .3s both;
}
#bestelapp > .aims-laden { padding-top: 4rem; }
/* In een knop neemt hij de tekstkleur over: wit op de olijfknop. */
.btn .aims-spinner { color: currentColor; vertical-align: middle; }

/* ── Hulpklassen ─────────────────────────────────────────────────────── */
.tekst-midden   { text-align: center; }
.tekst-subtiel  { color: var(--kleur-subtiel); font-size: var(--tekst-sm); }
.visueel-verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Stappen-indicatoren (bestelflow) ────────────────────────────────── */
.stappen-nav {
  display: flex;
  gap: 0;
  margin-bottom: var(--ruimte-xl);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.stap-item {
  flex: 1;
  padding: var(--ruimte-sm);
  text-align: center;
  font-size: var(--tekst-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kleur-subtiel);
  border-right: 1px solid var(--kleur-rand);
  background: #fff;
}
.stap-item:last-child { border-right: none; }
.stap-item--actief { background: var(--kleur-accent); color: #fff; }
.stap-item--klaar  { background: var(--kleur-succes-bg); color: var(--kleur-succes); }

/* ── Tijdslot-kiezer ─────────────────────────────────────────────────── */
.slot-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--ruimte-sm);
}

.slot-knop {
  padding: var(--ruimte-sm);
  border: 1px solid rgba(65,46,39,.28);
  border-radius: var(--radius-sm);
  background: #fff;
  text-align: center;
  font-size: var(--tekst-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--overgang-snel);
}

.slot-knop:hover:not(:disabled) { border-color: var(--kleur-accent); color: var(--kleur-accent); }
.slot-knop--gekozen { border-color: var(--kleur-accent); background: var(--kleur-accent); color: #fff; }
.slot-knop--gekozen:hover:not(:disabled) { background: var(--kleur-accent-hover); border-color: var(--kleur-accent-hover); color: #fff; }
.slot-knop:disabled { opacity: .45; cursor: not-allowed; }
.slot-knop__hint    { font-size: var(--tekst-xs); color: var(--status-in-behandeling); }
.slot-knop__extra   { font-size: var(--tekst-xs); opacity: .8; }

/* ── Optiegroepen in modal ───────────────────────────────────────────── */
.optiegroep {
  margin-bottom: var(--ruimte-md);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.optiegroep__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ruimte-sm) var(--ruimte-md);
  background: #f7efe2;
  border-bottom: 1px solid var(--kleur-rand);
}

.optiegroep__naam { font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.optiegroep__type { font-size: var(--tekst-xs); color: var(--kleur-subtiel); }

.optiegroep__opties { padding: var(--ruimte-sm) var(--ruimte-md); display: flex; flex-direction: column; gap: var(--ruimte-sm); }

.optie-label {
  display: flex;
  align-items: center;
  gap: var(--ruimte-sm);
  cursor: pointer;
  font-size: var(--tekst-sm);
}

.optie-label input { accent-color: var(--kleur-accent); }
.optie-meerprijs { margin-left: auto; color: var(--kleur-subtiel); font-size: var(--tekst-xs); }

/* ── Filter chips ────────────────────────────────────────────────────── */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  border: 1px solid rgba(65,46,39,.28);
  border-radius: var(--radius-pill);
  color: var(--kleur-tekst);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--overgang-snel), color var(--overgang-snel), border-color var(--overgang-snel);
}
.filter-chip--actief {
  background: var(--kleur-tekst);
  color: #fff;
  border-color: var(--kleur-tekst);
}

/* ── Admin nav (donkere zijbalk — zelfde toon als design system) ─────── */
.app-nav {
  position: fixed;
  top: var(--hoogte-header);
  left: 0;
  bottom: 0;
  width: 220px;
  background: #2a201c;
  overflow-y: auto;
  z-index: 30;
  padding: 12px 0 24px;
}

.app-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255,255,255,.55);
  transition: color var(--overgang-snel), background var(--overgang-snel);
  border-left: 2px solid transparent;
}
.app-nav__link:hover { color: #fff; background: rgba(255,255,255,.06); }
.app-nav__link--actief {
  color: #fff;
  border-left-color: var(--kleur-accent);
  background: rgba(106,112,76,.18);
}

.admin-inhoud { margin-left: 220px; padding: var(--ruimte-xl) var(--ruimte-lg); }

/* ── Mobiel nav-overlay ──────────────────────────────────────────────── */
.app-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(42,32,28,.4);
  z-index: 29;
}
.app-nav-overlay--zichtbaar { display: block; }

/* ── Mobiel: max-width 640px ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .menu-layout {
    grid-template-columns: 1fr;
  }
  .winkelwagen-zijbalk { display: none; }
  .mobiel-bestelbar    { display: block; }
  .app-nav { transform: translateX(-100%); transition: transform var(--overgang-normaal); }
  .app-nav--open { transform: translateX(0); }
  .admin-inhoud { margin-left: 0; padding: var(--ruimte-md) var(--ruimte-sm); }
  .app-header__hamburger { display: flex; }
  .menu-hero { padding: 28px 20px 20px; }
  .categorie-sectie { padding: 20px; }
  .menu-hero__kop { font-size: 32px; }
  .app-header__info { display: none; }
}

.app-header__hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--aims-espresso, #412e27);
  padding: 6px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   AIMS DESIGN SYSTEM — publieke bestelpagina
   Gebaseerd op design handoff (aims.css + JSX-componenten)
   Admin-klassen (.knop, .kaart, .formulier-*) blijven intact.
   ══════════════════════════════════════════════════════ */

/* ── Typografie ── */
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
.script { font-family: var(--font-title); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tnum { font-variant-numeric: tabular-nums; }
.eyebrow { font: 600 11px/1 var(--font-basis); letter-spacing: .14em; text-transform: uppercase; color: var(--aims-ink-2); }

/* ── Knoppen (Aims systeem) ── */
.btn {
  font: 500 14px/1 var(--font-basis);
  letter-spacing: .01em;
  border: 1px solid var(--aims-ink);
  background: var(--aims-ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s, color .15s, border-color .15s, transform .05s;
  text-decoration: none;
}
.btn:hover { background: var(--kleur-accent-hover); border-color: var(--kleur-accent-hover); }
.btn:active { transform: translateY(1px); }
.btn--olive { background: var(--kleur-accent); border-color: var(--kleur-accent); color: #fff; }
.btn--olive:hover { background: var(--kleur-accent-hover); border-color: var(--kleur-accent-hover); }
.btn--ghost { background: transparent; color: var(--aims-ink); }
.btn--ghost:hover { background: var(--aims-sand-warm); color: var(--aims-ink); }
.btn--tomato { background: var(--kleur-fout); border-color: var(--kleur-fout); color: #fff; }
.btn--tomato:hover { background: var(--kleur-fout-hover); border-color: var(--kleur-fout-hover); }
.btn--lg { padding: 16px 22px; font-size: 15px; }
.btn--sm { padding: 8px 12px; font-size: 13px; }
.btn--block { width: 100%; justify-content: center; }
.btn--icon { padding: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── Chips / labels ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px/1 var(--font-basis);
  letter-spacing: .02em;
  padding: 6px 10px;
  border: 1px solid var(--aims-line-strong);
  border-radius: var(--r-pill);
  color: var(--aims-ink-2);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--aims-ink);
  color: #fff;
  border-color: var(--aims-ink);
}
.chip--label {
  cursor: default;
  font-size: 11px;
  padding: 3px 7px;
  border-radius: var(--r-1);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ── Badges (Aims) ── */
.badge--new     { background: var(--aims-espresso, #412e27); color: var(--aims-sand, #ede1d1); }
.badge--popular { background: var(--kleur-fout); color: #fff; }
.badge--month   { background: var(--kleur-accent); color: var(--aims-paper, #fbf6ec); }

/* ── Formulier (Aims) ── */
.field-label {
  display: block;
  font: 500 12px/1.4 var(--font-basis);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--aims-ink-2);
  margin-bottom: 8px;
}
.input, .aims-textarea, .aims-select {
  width: 100%;
  font: 400 15px/1.4 var(--font-basis);
  color: var(--aims-ink);
  padding: 12px 14px;
  border: 1px solid var(--aims-line-strong);
  background: #fff;
  border-radius: var(--r-2);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
}
.input:focus, .aims-textarea:focus, .aims-select:focus {
  border-color: var(--kleur-accent);
  box-shadow: 0 0 0 3px rgba(106,112,76,.15);
}
.aims-textarea { resize: vertical; min-height: 64px; }

/* ── Scheidingslijnen ── */
.rule { border: 0; border-top: 1px solid var(--aims-line); margin: 0; }
.rule--strong { border-top-color: var(--aims-line-strong); }

/* ── Header (publieke pagina) ── */
#aimsStickbar {
  position: sticky;
  top: 0;
  z-index: 20;
}
.aims-app-header {
  border-bottom: 1px solid var(--aims-line);
  background: var(--aims-paper, #fbf6ec);
}
.aims-app-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
}
.aims-app-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  border-radius: var(--r-2, 10px);
}
.aims-app-header__brand:hover .aims-app-header__naam .serif { color: var(--kleur-accent, var(--aims-espresso)); }
.aims-app-header__brand:focus-visible { outline: 2px solid var(--kleur-accent, var(--aims-espresso)); outline-offset: 4px; }
.aims-app-header__naam {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.aims-app-header__naam .serif { transition: color .15s; }
.aims-app-header__sub {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--aims-ink-3);
  font-family: var(--font-basis);
}
.aims-app-header__meta {
  font: 400 12px/1 var(--font-basis);
  color: var(--aims-ink-2);
  display: flex;
  gap: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}
.aims-app-header__spacer { flex: 1; }

/* ── Zoekbalk (publieke pagina) ── */
/* Vanaf stap 2 verborgen; expliciet, want de container heeft verder geen
   display-regel en [hidden] mag niet door iets anders overruled worden. */
#zoekBalk[hidden] { display: none; }
.aims-zoek {
  position: relative;
  padding: 10px 28px;
  background: var(--kleur-achtergrond);
  border-bottom: 1px solid var(--aims-line);
}
.aims-zoek__balk { position: relative; display: flex; align-items: center; }
.aims-zoek__icoon {
  position: absolute; left: 14px; font-size: 13px;
  color: var(--aims-ink-3); pointer-events: none;
}
/* Scherpe hoeken, net als elk ander invoerveld: --r-2 is 4px en de tokens in
   variables.css staan er niet voor niets bij als "Afronding - scherper (handoff
   stijl)". Dit veld was het enige dat een pil was, pal boven een suggestiepaneel
   met rechte hoeken. */
.aims-zoek__invoer {
  width: 100%; padding: 10px 38px 10px 36px;
  font: 400 15px/1.4 var(--font-basis); color: var(--aims-ink);
  background: #fff; border: 1px solid var(--aims-line-strong);
  border-radius: var(--r-2); -webkit-appearance: none;
}
.aims-zoek__invoer::placeholder { color: var(--aims-ink-3); }
.aims-zoek__invoer:focus {
  outline: none; border-color: var(--kleur-accent);
  box-shadow: var(--schaduw-focus);
}
.aims-zoek__wis {
  position: absolute; right: 10px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer;
  color: var(--aims-ink-3); font-size: 14px;
}
.aims-zoek__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 16px 10px;
}

/* De chips laten zien wat de zoekfunctie begrepen heeft. Vrije tekst en
   openstaande vragen krijgen bewust een eigen kleur: dat is precies wat de
   klant moet nalopen voordat hij enter drukt. */
.aims-zoek-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-pill);
  font: 400 12.5px/1.4 var(--font-basis);
  border: 1px solid var(--aims-line-strong); color: var(--aims-ink-2);
  background: #fff;
}
.aims-zoek-chip i { font-size: 10px; }
.aims-zoek-chip--item      { border-color: var(--kleur-accent); color: var(--kleur-accent); font-weight: 600; }
.aims-zoek-chip--opmerking,
.aims-zoek-chip--naam      { border-color: var(--kleur-waarschuwing); color: var(--kleur-waarschuwing); }
.aims-zoek-chip--vraag     { border-color: var(--kleur-fout); color: var(--kleur-fout); }
.aims-zoek-chip--residu    { border-style: dashed; color: var(--aims-ink-3); }

.aims-zoek__paneel {
  position: absolute; left: 28px; right: 28px; top: calc(100% - 4px);
  z-index: 60; background: #fff;
  border: 1px solid var(--aims-line-strong); border-radius: var(--r-2);
  box-shadow: 0 8px 28px rgba(42, 32, 28, .14);
  overflow: hidden;
  max-height: 60vh; overflow-y: auto;
}
.aims-zoek__uitleg {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--aims-line);
  font: 400 13px/1.4 var(--font-basis); color: var(--aims-ink-2);
}
.aims-zoek__chips + .aims-zoek__uitleg { border-top: none; padding-top: 0; }
.aims-zoek__uitleg i { font-size: 11px; color: var(--aims-ink-3); }
.aims-zoek__lijst { border-top: 1px solid var(--aims-line); }
.aims-zoek__suggestie {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; padding: 11px 16px; border: none; background: none;
  font: 400 14px/1.3 var(--font-basis); color: var(--aims-ink);
  text-align: left; cursor: pointer;
}
.aims-zoek__suggestie + .aims-zoek__suggestie { border-top: 1px solid var(--aims-line); }
.aims-zoek__suggestie:hover { background: var(--kleur-achtergrond); }
.aims-zoek__suggestie-cat { font-size: 12px; color: var(--aims-ink-3); white-space: nowrap; }
.aims-zoek__leeg { padding: 14px 16px; font-size: 13.5px; color: var(--aims-ink-3); }

@media (max-width: 700px) {
  .aims-zoek { padding: 8px 16px; }
  .aims-zoek__paneel { left: 16px; right: 16px; }
}

/* ── Categorie-nav (publieke pagina) ── */
.aims-cat-nav {
  border-bottom: 1px solid var(--aims-line);
  background: var(--kleur-achtergrond);
}
.aims-cat-nav__inner {
  display: flex;
  gap: 0;
  padding: 0 28px;
  /* overflow-y MOET expliciet: zodra overflow-x niet 'visible' is, rekent de
     browser overflow-y om van 'visible' naar 'auto'. De balk werd daardoor
     ook een verticale scrollcontainer (1px hoog door de negatieve marge op
     de knoppen) en liet zich op touch verticaal meeslepen. */
  overflow-x: auto;
  overflow-y: hidden;
  /* Scroll blijft in de balk: geen doorschuiven naar de pagina en geen
     swipe-terug van de browser aan de randen. */
  overscroll-behavior-x: contain;
  /* Alleen horizontaal pannen; een schuine veeg verplaatst niet de balk én
     de pagina tegelijk. */
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* De actieve accentrand van een knop moet over de 1px scheidingslijn van
     .aims-cat-nav vallen. Dat gebeurt hier met een negatieve marge op de
     scrollcontainer zelf — op de knoppen zou die door overflow-y:hidden
     worden afgekapt en bovendien de verticale overflow terugbrengen. */
  margin-bottom: -1px;
}
.aims-cat-nav__inner::-webkit-scrollbar { display: none; }
.aims-cat-nav__btn {
  border: 0;
  background: transparent;
  padding: 16px 18px;
  font: 500 13px/1 var(--font-basis);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--aims-ink-3);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.aims-cat-nav__btn:hover { color: var(--aims-espresso); }
.aims-cat-nav__btn.is-actief {
  color: var(--aims-espresso);
  font-weight: 600;
  border-bottom-color: var(--kleur-accent);
}

/* ── Item-rij (editorial list) ── */
.aims-item-rij {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  padding: 22px 10px;
  position: relative;
  align-items: start;
  cursor: pointer;
  transition: background .1s;
}
.aims-item-rij::before {
  content: '';
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  border-top: 1px solid var(--aims-line);
}
.aims-item-rij:hover { background: rgba(106,112,76,.03); }
.aims-item-rij--uitverkocht { opacity: .5; cursor: not-allowed; pointer-events: none; }
.aims-item-rij__naam { margin: 0; font-size: 22px; color: var(--aims-espresso); }
.aims-item-rij__desc { margin: 6px 0 10px; font-size: 14px; line-height: 1.5; color: var(--aims-ink-2); max-width: 52ch; }
.aims-item-rij__labels { display: flex; gap: 6px; flex-wrap: wrap; }
.aims-item-rij__rechts { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.aims-item-rij__rechts--rij { flex-direction: row; align-items: center; gap: 14px; }
.aims-item-rij > div:first-child { min-width: 0; }
.aims-item-rij__prijs { font-size: 22px; color: var(--aims-espresso); white-space: nowrap; }
.aims-item-rij__plus-knop { width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── Categorie-sectie (publieke pagina) ── */
.aims-cat-sectie { display: grid; }

/* ── Categorie-sectie header ── */
.aims-cat-sectie__header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0 5px;
  margin-top: 0;
}
.aims-cat-sectie__naam {
  font-size: 26px;
  color: var(--aims-espresso, #412e27);
  white-space: nowrap;
}
.aims-cat-sectie__hr { flex: 1; border: 0; border-top: 1px solid var(--aims-line); min-width: 0; }
.aims-cat-sectie__teller { color: var(--aims-ink-3); white-space: nowrap; }

.aims-groep-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 4px;
  padding: 5px 0 6px;
  font-family: var(--font-basis);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--aims-olijf, #6a704c);
  position: sticky;
  top: var(--stickbar-h, 120px);
  z-index: 9;
  background: var(--kleur-achtergrond, #faf4e8);
}
.aims-groep-header::before {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background:var(--aims-line);
  flex-shrink: 0;
  align-self: center;
}
.aims-groep-header::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--aims-line);
  align-self: center;
}

/* ── Filter bar ── */
.aims-filter-bar { padding: 16px 28px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Menu-layout (menu + winkelwagen-zijbalk) ──────────────────────────
   Stond als inline style in app.js, waardoor een media query hem alleen met
   !important kon overrulen.

   minmax(0, 1fr) en niet 1fr: een kale 1fr betekent minmax(auto, 1fr) en mag
   dus niet kleiner worden dan zijn eigen min-content. Zodra een menuregel
   breder werd dan de ruimte, groeide de grid buiten zijn container en werd de
   zijbalk er rechts uit geduwd — dat was het "afgesneden" beeld op tablets. */
.aims-menu-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  padding: 32px 28px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ── De mand (zijbalk menu, zijbalk afronden, mandpaneel) ──
   Eén component, opgebouwd door mandHtml() in app.js. Kop, dan de regels (die
   scrollen), dan bedragen en actie (die blijven staan).

   Een plakkende mand (.aims-sidebar, .aims-checkout__zij) krijgt zijn
   max-height van pasMandHoogteAan() in app.js, gerekend vanaf de plek waar hij
   nu staat. Een vaste max-height in CSS rekende met de plek waar hij blijft
   plakken; vóór het scrollen staat hij lager, en dan viel de knop eronder af.
   De flex-kolom met min-height: 0 is wat die max-height doorgeeft aan de
   regellijst, zodat juist die gaat scrollen. */
.aims-sidebar,
.aims-checkout__zij {
  position: sticky;
  top: calc(var(--stickbar-h, 69px) + 12px);
  align-self: start;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.aims-mand {
  --regel-inzet: 24px;
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--aims-line-strong);
  border-radius: var(--r-2);
}
/* Over de rand heen (negatieve marge), anders loopt er een lichte lijn om de
   donkere kop. Daarom ook geen overflow: hidden op .aims-mand. */
.aims-mand__kop {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: -1px -1px 0;
  padding: 22px 24px;
  background: var(--aims-ink);
  color: #fff;
  border-radius: var(--r-2) var(--r-2) 0 0;
  font: 700 15px/1.2 var(--font-basis);
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* Teller rechts in de donkere kop ("3 items"); mand én kop van het paneel. */
.aims-mand__teller,
.aims-cart-panel__teller {
  font: 500 13px/1.2 var(--font-basis);
  letter-spacing: .04em;
  text-transform: none;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.aims-mand__inhoud {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 4px var(--regel-inzet) 0;
}
/* De scrollende lijst neemt de zijpadding over (negatieve marge + padding van
   --regel-inzet). Een .aims-regel loopt met zijn eigen negatieve marge tot de
   rand; zonder dit zou die marge een horizontale scrollbalk geven. */
.aims-mand__regels {
  flex: 0 1 auto;
  min-height: 0;
  margin: 0 calc(-1 * var(--regel-inzet));
  padding: 0 var(--regel-inzet);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.aims-mand__bedragen { flex: none; padding-top: 4px; }
.aims-mand__rij {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  font-size: 14px;
  color: var(--aims-ink-2);
}
.aims-mand__totaal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--aims-line-strong);
  font-weight: 700;
  font-size: 20px;
  color: var(--aims-ink);
}
.aims-mand__actie {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 var(--regel-inzet) 24px;
}
.aims-mand__noot {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--aims-ink-3);
}
.aims-mand__noot i { margin-top: 2px; color: var(--kleur-accent); }
.aims-mand__tekort {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--kleur-fout);
}
.aims-mand__leeg {
  padding: 32px var(--regel-inzet);
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--aims-ink-3);
}
/* Alleen bij afronden op een telefoon; zie de media query bij .aims-checkout. */
.aims-mand__uitklap { display: none; }
@media (max-width: 640px) {
  .aims-mand { --regel-inzet: 16px; }
  .aims-mand__kop { padding: 18px 16px; }
}

/* ── Mobiele bestelbar ── */
.aims-mobiel-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--aims-ink);
  z-index: 40;
  padding: 12px 16px;
  box-shadow: 0 -4px 20px rgba(42,32,28,.2);
}

/* ── Modal ── */
.aims-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42,32,28,.55);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
@media (min-width: 641px) {
  .aims-modal-overlay { align-items: center; padding: 24px; }
}
.aims-modal {
  background: #fff;
  border-radius: var(--r-2) var(--r-2) 0 0;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: aims-modal-in .2s ease;
}
@media (min-width: 641px) { .aims-modal { border-radius: var(--r-2); } }
@keyframes aims-modal-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aims-modal__body { overflow-y: auto; padding: 24px; flex: 1; min-height: 0; }
.aims-modal__footer { flex-shrink: 0; padding: 16px 24px; border-top: 1px solid var(--aims-line); background: #fff; }
/* Bewerken van een winkelwagenregel: annuleren staat er altijd, opslaan komt
   pas beschikbaar zodra er werkelijk iets gewijzigd is. */
.aims-modal__footer--bewerk { display: flex; gap: 10px; align-items: stretch; }
.aims-modal__footer--bewerk #annuleerKnop { flex: 0 0 auto; white-space: nowrap; }
.aims-modal__footer--bewerk #toevoegKnop  { flex: 1; }
.aims-modal__footer--bewerk #toevoegKnop:disabled { opacity: .45; cursor: default; }
@media (max-width: 480px) {
  .aims-modal__footer--bewerk { flex-direction: column-reverse; }
}
.aims-modal__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; gap: 16px; }
.aims-modal__naam { font-size: 22px; color: var(--aims-espresso); margin: 0 0 4px; }
.aims-modal__desc { font-size: 14px; color: var(--aims-ink-2); margin: 0; line-height: 1.5; }
.aims-modal__sluit { background: none; border: none; font-size: 18px; color: var(--aims-ink-3); cursor: pointer; padding: 4px; flex-shrink: 0; }
.aims-modal__sluit:hover { color: var(--aims-ink); }

/* ── Optiegroepen in modal ── */
.aims-optiegroep { margin-bottom: 16px; border: 1px solid var(--aims-line); border-radius: var(--r-2); overflow: hidden; }
.aims-optiegroep--fout { border-color: var(--kleur-fout); }
/* Groep die de zoekfunctie niet kon invullen: vraagt aandacht, maar is geen fout. */
.aims-optiegroep--aandacht { border-color: var(--kleur-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kleur-accent) 18%, transparent); }
.aims-optiegroep__header { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--kleur-achtergrond); }
.aims-optiegroep__naam { font: 600 13px/1 var(--font-basis); letter-spacing: .04em; text-transform: uppercase; color: var(--aims-ink); }
.aims-optiegroep__type { font-size: 11px; color: var(--aims-ink-3); letter-spacing: .06em; }
.aims-optiegroep__opties { padding: 8px 16px; display: flex; flex-direction: column; gap: 10px; }
.aims-optie-label { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; color: var(--aims-ink); }
.aims-optie-label input { accent-color: var(--kleur-accent); flex-shrink: 0; }
.aims-optie-meerprijs { margin-left: auto; color: var(--aims-ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }

/* Uitverkochte variant (bv. bruin pistolet glutenvrij) */
.aims-optie-label--uitverkocht { color: var(--aims-ink-3); cursor: not-allowed; }
.aims-optie-label--uitverkocht span:first-of-type { text-decoration: line-through; }
.aims-optie-label--uitverkocht input { cursor: not-allowed; }
.aims-optie-uitverkocht {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--status-afgewezen-tekst);
  background: var(--status-afgewezen-bg);
  padding: 2px 7px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* ── Stappen-nav (checkout) ── */
.aims-stappen {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 28px;
}
.aims-stap {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.aims-stap__lijn {
  position: absolute;
  top: 15px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--aims-line-strong);
  z-index: 0;
}
.aims-stap:first-child .aims-stap__lijn { display: none; }
.aims-stap__nummer {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: #fff;
  border: 2px solid var(--aims-line-strong);
  color: var(--aims-ink-3);
  font: 700 13px/1 var(--font-basis);
  transition: background .15s, border-color .15s, color .15s;
}
.aims-stap__label {
  font: 500 11px/1.2 var(--font-basis);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--aims-ink-3);
  text-align: center;
}
.aims-stap--actief .aims-stap__nummer {
  background: var(--aims-espresso);
  border-color: var(--aims-espresso);
  color: #fff;
}
.aims-stap--actief .aims-stap__label { color: var(--aims-espresso); font-weight: 700; }
.aims-stap--klaar .aims-stap__nummer {
  background: var(--kleur-succes);
  border-color: var(--kleur-succes);
  color: #fff;
  font-size: 12px;
}
.aims-stap--klaar .aims-stap__label { color: var(--kleur-succes); }
.aims-stap--klaar .aims-stap__lijn { background: var(--kleur-succes); }

/* ── Type-toggle (afhalen/bezorgen) ── */
.aims-type-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--aims-line-strong);
  border-radius: var(--r-2);
  overflow: hidden;
}
.aims-type-btn {
  flex: 1;
  padding: 12px 16px;
  font: 500 14px/1 var(--font-basis);
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--aims-ink-2);
  transition: background .15s, color .15s;
  letter-spacing: .02em;
}
.aims-type-btn.is-actief { background: var(--aims-ink); color: #fff; }

/* ── Header badge / prijs ── */
.aims-header-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: rgba(255,255,255,.2);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.aims-header-prijs {
  opacity: .85;
  padding-left: 6px;
  border-left: 1px solid rgba(255,255,255,.25);
  margin-left: 2px;
}

/* ── Cart panel ── */
.aims-cart-panel {
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
}
.aims-cart-panel.is-open {
  pointer-events: auto;
}
.aims-cart-panel__overlay {
  position: absolute;
  inset: 0;
  background: rgba(42,32,28,.5);
  opacity: 0;
  transition: opacity .3s ease;
}
.aims-cart-panel.is-open .aims-cart-panel__overlay {
  opacity: 1;
}
.aims-cart-panel__sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  box-shadow: -4px 0 24px rgba(42,32,28,.15);
}
.aims-cart-panel.is-open .aims-cart-panel__sheet {
  transform: translateX(0);
}
.aims-cart-panel__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  flex-shrink: 0;
  background: var(--aims-ink);
  color: #fff;
}
.aims-cart-panel__terug {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  padding: 4px 8px 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.aims-cart-panel__terug:hover { opacity: .7; }
.aims-cart-panel__titel {
  font: 700 15px/1.2 var(--font-basis);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* De mand vult het paneel: de regels nemen de ruimte, bedragen en knop staan
   onderaan, net als in de zijbalk. Geen eigen rand: het paneel is de rand. */
.aims-cart-panel__mand {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.aims-cart-panel__mand .aims-mand {
  flex: 1 1 auto;
  border: 0;
  border-radius: 0;
}
.aims-cart-panel__mand .aims-mand__inhoud,
.aims-cart-panel__mand .aims-mand__regels { flex: 1 1 auto; }
.aims-cart-panel__mand .aims-mand__actie { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) {
  .aims-cart-panel__sheet {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 92dvh;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -4px 32px rgba(42,32,28,.2);
  }
  .aims-cart-panel.is-open .aims-cart-panel__sheet {
    transform: translateY(0);
  }
  .aims-cart-panel__header { border-radius: 20px 20px 0 0; padding: 18px 16px; }
}
body.cart-panel-open { overflow: hidden; }

/* ── Bestellingen panel ── */
.aims-bestellingen-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 400px;
  max-width: 100%;
  background: #fff;
  z-index: 310;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: -4px 0 32px rgba(42,32,28,.15);
}
.aims-bestellingen-panel.open { transform: translateX(0); }
.aims-bp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42,32,28,.5);
  z-index: 305;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.aims-bp-overlay.open { opacity: 1; pointer-events: auto; }
.aims-bestellingen-panel__hoofd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--aims-line);
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-basis);
  flex-shrink: 0;
}
.aims-bestellingen-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.aims-cart-panel__sluit {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--aims-ink-2);
  padding: 6px;
  border-radius: var(--radius-sm, 4px);
  transition: opacity .15s ease;
}
.aims-cart-panel__sluit:hover { opacity: .7; }
.aims-bp-rij {
  border: 1px solid var(--aims-line);
  border-radius: var(--radius-md, 8px);
  padding: 14px;
  margin-bottom: 12px;
  font-family: var(--font-basis);
}
.aims-bp-input {
  border: 1px solid var(--aims-line);
  border-radius: var(--radius-sm, 4px);
  padding: 8px;
  font-size: 20px;
  font-family: monospace;
  outline: none;
  width: 80px;
  text-align: center;
  letter-spacing: .15em;
}
.aims-bp-input:focus { border-color: var(--kleur-rand-focus, var(--kleur-accent)); }

/* ── Mobiel (<= 640px) ── */
@media (max-width: 640px) {
  .aims-app-header__inner { padding: 10px 16px; gap: 10px; }
  .aims-app-header__meta  { display: none; }
  .aims-ghost-btn         { font-size: 12px !important; padding: 6px 10px !important; }
  .aims-cat-nav__inner         { padding: 0 12px; }
  .aims-filter-bar             { padding: 12px 16px 0; }
  .aims-cat-sectie__naam       { font-size: 20px; }
  .aims-cat-sectie__teller     { display: none; }
  .aims-groep-header           { top: var(--stickbar-h, 103px); }
  .aims-header-cart-label { display: none; }
  .aims-item-rij          { gap: 0; padding: 16px 0; }
  .aims-item-rij__naam    { font-size: 18px; }
  .aims-item-rij__prijs   { font-size: 18px; }
  .aims-item-rij__rechts--rij { gap: 10px; }
  .aims-modal__body       { padding: 16px; }
  .aims-modal__footer     { padding: 12px 16px; }
}

/* ── Zijbalk wisselt naar de mobiele balk (<= 1024px) ────────────────────
   Het omslagpunt stond op 640px. Tussen 641 en 1040px stond er daardoor een
   zijbalk van 340px naast het menu: op een iPad in portret (820px) hield het
   menu nog ~390px over. Op 1024px krijgen iPad portret en landscape, en
   uitgeklapte foldables, allemaal de mobiele balk. */
@media (max-width: 1024px) {
  /* De mobiele balk staat fixed onderaan; zonder die 96px valt het laatste
     broodje erachter en is het niet meer aan te klikken. De waarde staat in de
     shorthand zelf, niet als losse regel erna: het 640px-blok hieronder zet de
     padding opnieuw en zou een losse padding-bottom overschrijven. */
  .aims-menu-layout { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 96px; }
  .aims-sidebar     { display: none; }
  .aims-mobiel-bar  { display: block; }
}

@media (max-width: 640px) {
  .aims-menu-layout { padding: 16px 16px 96px; }
}

/* Voorkom iOS-zoom bij focus op input — Safari zoomt bij font-size < 16px */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Afronden (checkout) — fase 1 van docs/checkout-advies.md
   ══════════════════════════════════════════════════════════════════════ */

/* Elke eigen display-regel (display:flex op een blok, een veldfout of een
   melding) wint van de browserregel [hidden] { display: none }. Zonder deze
   regel staan verborgen blokken en foutmeldingen alsnog in beeld — precies wat
   #zoekBalk hierboven ook al moest afvangen. */
[hidden] { display: none !important; }

/* ── Bestelregel (in elke .aims-mand) ──
   Uitklapbaar: dicht één rustige regel, open de prijsopbouw en de knoppen.
   De regel loopt van rand tot rand door de container (negatieve marge ter
   grootte van --regel-inzet, de zijpadding van die container), zodat de
   open-achtergrond en de olijfstreep links de volle breedte pakken. */
.aims-regel {
  margin: 0 calc(-1 * var(--regel-inzet, 24px));
  padding: 0 var(--regel-inzet, 24px);
  border-bottom: 1px solid var(--aims-line);
  transition: background .15s;
}
.aims-regel.is-open {
  background: var(--kleur-achtergrond);
  box-shadow: inset 3px 0 0 var(--kleur-accent);
}
.aims-regel__kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.aims-regel__info { display: block; min-width: 0; }
.aims-regel__titel {
  display: block;
  font: 700 14px/1.3 var(--font-basis);
  color: var(--aims-ink);
  transition: color .15s;
}
.aims-regel__kop:hover .aims-regel__titel { color: var(--kleur-accent-hover); }
.aims-regel__samenvatting {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: var(--aims-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Altijd zichtbaar, ook dicht: "zonder sla" of "voor Sander" mag de klant
   niet pas na openklappen terugzien. Niet afkappen. */
.aims-regel__opmerking {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--kleur-accent);
  overflow-wrap: anywhere;
}
.aims-regel__opmerking i { font-size: 12px; }
.aims-regel__prijs { font-weight: 700; font-size: 14px; color: var(--aims-ink); white-space: nowrap; }
.aims-regel__pijl {
  justify-self: end;
  font-size: 12px;
  color: var(--aims-ink-3);
  transition: transform .15s;
}
.aims-regel.is-open .aims-regel__pijl { transform: rotate(180deg); }
.aims-regel__body { padding: 0 0 16px; }
.aims-regel__opbouwrij {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 2px 0;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--aims-ink-3);
}
.aims-regel__opbouwrij span:first-child { min-width: 0; overflow-wrap: anywhere; }
.aims-regel__opbouwrij span:last-child  { white-space: nowrap; }
.aims-regel__knoppen {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  margin-top: 12px;
}
.aims-regel__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--aims-line-strong);
  border-radius: var(--r-2);
  font: 600 14.5px/1 var(--font-basis);
  color: var(--aims-ink);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.aims-regel__knop:hover { background: var(--aims-sand-warm); }
.aims-regel__knop--weg { width: 40px; padding: 0; color: var(--aims-ink-3); }
.aims-regel__knop--weg:hover { color: var(--kleur-fout); border-color: var(--kleur-fout); }

/* De aantalteller (.aims-aantal) stond hier. Die is vervangen door de
   dupliceerknop in de knoppenrij hierboven: klanten begrepen niet dat een regel
   met "2" twee broodjes waren, en met één teller per regel kon je er maar één
   van samen wijzigen. Zie regelHtml() in app.js. */

/* ── Twee kolommen: formulier + mand ── */
.aims-checkout { max-width: 1040px; margin: 0 auto; padding: 32px 20px 64px; }
.aims-checkout__kolommen {
  display: grid;
  /* Even breed als de zijbalk op het menu: het is dezelfde mand. */
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 32px;
  align-items: start;
}
.aims-checkout__form { display: flex; flex-direction: column; gap: 28px; }
.aims-checkout__acties { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Blok binnen het formulier ── */
.aims-blok {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--aims-line-strong);
  border-radius: var(--r-2);
  padding: 22px 20px;
}
.aims-blok__titel { margin: 0; color: var(--aims-ink-2); }
.aims-bezorgvelden { display: flex; flex-direction: column; gap: 18px; }

/* ── Veld met hulptekst en foutmelding ── */
.aims-veld { display: flex; flex-direction: column; gap: 6px; }
.aims-veld__optioneel {
  font-weight: 400;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--aims-ink-3);
}
.aims-veld__hint { margin: 0; font-size: 12px; color: var(--aims-ink-3); }
.aims-veld__melding { margin: 0; font-size: 13px; color: var(--aims-ink-2); }
.aims-veld__fout {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--kleur-fout);
}
.input--fout, .input--fout:focus { border-color: var(--kleur-fout); box-shadow: 0 0 0 2px var(--kleur-fout-bg); }


/* ── Bestelknop en bezorgregels (fase 2) ── */
.aims-bezorgregels {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  background: var(--kleur-info-bg);
  border-radius: var(--r-2);
  font-size: 13px;
  line-height: 1.45;
  color: var(--aims-ink-2);
}
.aims-bezorgregels i { margin-top: 3px; color: var(--kleur-info); }

/* ── Fase 3: adresvelden, waarschuwing en bevestiging ── */
.aims-veld-rij { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
.melding--let-op {
  display: flex;
  gap: 8px;
  background: var(--status-in-behandeling-bg);
  color: var(--status-in-behandeling-tekst);
}
.melding--let-op i { margin-top: 2px; color: var(--status-in-behandeling); }

.aims-bevestiging { max-width: 620px; margin: 0 auto; padding: 32px 20px 64px; }
.aims-bevestiging__kaart {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--aims-line-strong);
  border-radius: var(--r-2);
  padding: 26px 24px;
  text-align: center;
}
.aims-bevestiging__titel { margin: 0; font-size: 26px; color: var(--aims-espresso); }
.aims-bevestiging__regel { margin: 0; font-size: 14px; color: var(--aims-ink-2); line-height: 1.5; }
.aims-stappen--status { margin: 10px 0 4px; }
.aims-bevestiging__bewaren {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--aims-line);
  padding-top: 16px;
}
.aims-bevestiging__code {
  margin: 0;
  font-size: 14px;
  color: var(--aims-ink-2);
  background: var(--aims-sand-warm);
  border-radius: var(--r-2);
  padding: 14px 16px;
  text-align: left;
}
.aims-bevestiging__code-kop { margin: 0 0 8px; font-size: 15px; color: var(--aims-ink); }
.aims-bevestiging__code .mono {
  font-family: ui-monospace, monospace;
  letter-spacing: .16em;
  font-size: 20px;
  color: var(--aims-espresso);
}
.aims-bevestiging__code-lijst { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.aims-bevestiging__code-uitleg { margin: 10px 0 0; font-size: 13px; color: var(--aims-ink-3); }
.aims-bevestiging__acties { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.aims-bevestiging__contact { color: var(--aims-ink-3); font-size: 13px; }
.aims-stap--fout .aims-stap__nummer { background: var(--kleur-fout); border-color: var(--kleur-fout); color: #fff; }
.aims-stap--fout .aims-stap__label { color: var(--kleur-fout); font-weight: 700; }

@media (max-width: 560px) {
  .aims-veld-rij { grid-template-columns: 1fr; gap: 18px; }
}

/* ── Fase 4: kop, focus en raakvlakken ── */
.aims-checkout__kop {
  margin: 0 0 20px;
  font-size: 26px;
  color: var(--aims-espresso);
  text-align: center;
}
.aims-checkout__kop:focus-visible,
.aims-bevestiging__titel:focus-visible {
  outline: 2px solid var(--kleur-accent);
  outline-offset: 6px;
}
.aims-regel__knop:focus-visible,
.aims-type-btn:focus-visible,
.slot-knop:focus-visible {
  outline: 2px solid var(--kleur-accent);
  outline-offset: 2px;
  z-index: 1;
}
/* Binnen de regel: de kop raakt de rand van een container met overflow:hidden. */
.aims-regel__kop:focus-visible {
  outline: 2px solid var(--kleur-accent);
  outline-offset: -2px;
}

@media (max-width: 899px) {
  .aims-checkout__kop { font-size: 22px; }
}

/* ── Bezorgblok: het vervolg staat op slot tot er een adres is ── */
.aims-bezorgvervolg { display: flex; flex-direction: column; gap: 18px; }
.aims-bezorgvervolg__slot {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 0;
  padding: 10px 12px;
  background: var(--aims-sand-warm);
  border-radius: var(--r-2);
  line-height: 1.45;
}
.aims-bezorgvervolg__slot i { color: var(--aims-ink-3); }
.aims-bezorgvervolg--op-slot .field-label { color: var(--aims-ink-3); }
.input:disabled,
.aims-select:disabled {
  background: var(--aims-sand-warm);
  color: var(--aims-ink-3);
  border-color: var(--aims-line);
  cursor: not-allowed;
}
/* Postcode en plaats uit Google Places: wel te lezen en te kopiëren, niet te
   wijzigen. Rustiger dan een invoerveld, maar niet zo vaal als "uitgeschakeld". */
.input[readonly] {
  background: var(--aims-sand-warm);
  color: var(--aims-ink-2);
  border-color: var(--aims-line);
  cursor: default;
}
.input[readonly]:focus { box-shadow: none; }

/* ── Klantcode: voorlopig, scope en wisselen ── */
.aims-bevestiging__code--wacht { background: var(--aims-sand); color: var(--aims-ink-2); }
.aims-bevestiging__code--wacht .mono { color: var(--aims-ink-2); }
.aims-bevestiging__code--wacht i { margin-right: 6px; color: var(--aims-ink-3); }
.aims-bevestiging__code-scope {
  display: block;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--aims-ink-3);
  margin-top: 2px;
}
.aims-bp-wissel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.aims-bp-wissel__label { font-size: 12px; color: var(--aims-ink-3); letter-spacing: .04em; text-transform: uppercase; }

@media (max-width: 899px) {
  /* Onderaan ruimte voor de vastgezette bestelknop. */
  .aims-checkout { padding: 20px 16px 150px; }
  .aims-checkout__kolommen { grid-template-columns: 1fr; gap: 20px; }
  .aims-checkout__zij { position: static; order: -1; }

  /* De mand staat bovenaan, standaard ingeklapt: anders scrolt de klant eerst
     langs al zijn broodjes voor hij bij het formulier is. */
  .aims-mand__uitklap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px var(--regel-inzet);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--aims-line);
    font: 500 13px/1.3 var(--font-basis);
    color: var(--aims-ink-2);
    text-align: left;
    cursor: pointer;
  }
  .aims-mand__uitklap::before {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 10px;
    color: var(--aims-ink-3);
    transition: transform .15s;
  }
  .aims-mand__uitklap[aria-expanded="true"]::before { transform: rotate(180deg); }
  .aims-mand.is-dicht .aims-mand__uitklap { border-bottom: 0; }
  .aims-mand.is-dicht .aims-mand__inhoud { display: none; }
  .aims-mand--uitklapbaar .aims-mand__totaal { padding-bottom: 14px; }
  .aims-checkout__acties > .btn { flex: 1 1 100%; justify-content: center; }

  /* De mand staat bovenaan, maar de bestelknop hoort binnen
     duimbereik. Vandaar dezelfde vaste balk als op het menu. */
  .aims-mand--uitklapbaar .aims-mand__actie {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #fff;
    border-top: 1px solid var(--aims-line-strong);
    box-shadow: 0 -2px 12px rgba(42, 32, 28, .10);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Gesloten-melding (bestelpagina, afronden, wachtscherm) ──────────────
   Bewust geen blokkade: bestellen buiten openingstijd mag, maar de klant moet
   weten dat er niet meteen iemand kijkt. Zie punt 7 van
   docs/plan-ui-optimalisatie.md. */
.aims-gesloten {
  margin: 16px 28px 0;
  text-align: left;
}
.aims-checkout .aims-gesloten { margin: 0 0 20px; }

@media (max-width: 640px) {
  .aims-gesloten { margin: 12px 16px 0; }
}

/* ── Lunchrondje (assets/js/lunchrondje.js) ────────────────────────────
   De gedeelde mand van een bedrijf. De banner zegt in één oogopslag wie er
   deze keer bestelt; de rest van de pagina is de gewone bestelpagina. */
.aims-rondje {
  margin: 16px 28px 0;
  padding: 16px 18px;
  background: var(--aims-sand-warm);
  border: 1px solid var(--aims-line);
  border-radius: var(--r-2);
  display: grid;
  gap: 14px;
}
.aims-rondje__kop { display: flex; gap: 14px; align-items: flex-start; }
.aims-rondje__icoon {
  flex: 0 0 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--kleur-accent); color: #fff; font-size: 16px;
}
.aims-rondje__tekst { display: grid; gap: 2px; min-width: 0; }
.aims-rondje__titel { font: 700 18px/1.25 var(--font-basis); color: var(--aims-espresso); text-wrap: balance; }
.aims-rondje__sub   { font-size: 14px; color: var(--aims-ink-2); line-height: 1.45; }
.aims-rondje__naam  { font-size: 13px; color: var(--aims-ink-3); margin-top: 2px; }
.aims-rondje__acties { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aims-rondje__acties .btn--ghost { border-color: var(--aims-line-strong); }
.aims-rondje__terug { margin-left: auto; }
.aims-rondje__link {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--kleur-accent); text-decoration: underline;
}
.aims-rondje__link:hover { color: var(--kleur-accent-hover); }
.aims-rondje__vraag {
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-grid; place-items: center; flex-shrink: 0;
  background: transparent; border: 1px solid var(--aims-line-strong);
  color: var(--kleur-accent); font-size: 17px; cursor: pointer;
}
.aims-rondje__vraag:hover { background: #fff; }
.aims-rondje__vraag:focus-visible,
.aims-rondje__link:focus-visible { outline: none; box-shadow: var(--schaduw-focus); }
@media (max-width: 640px) {
  .aims-rondje { margin: 12px 16px 0; padding: 14px; }
  .aims-rondje__terug { margin-left: 0; }
}

/* Kop per persoon in de mand, met aantal en bedrag (voor wie het geld ophaalt). */
.aims-rondje-groep {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 12px 0 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--aims-ink-2);
  border-bottom: 1px solid var(--aims-line);
}
.aims-rondje-groep i { margin-right: 6px; color: var(--kleur-accent); }
.aims-rondje-groep:first-child { padding-top: 0; }
.aims-regel__door { display: block; margin-top: 3px; font-size: 12.5px; color: var(--aims-ink-3); }
.aims-regel__fout {
  display: flex; gap: 6px; align-items: baseline; margin-top: 4px;
  font-size: 13px; font-weight: 600; color: var(--kleur-fout);
}
.aims-rondje-noot {
  display: flex; gap: 8px; align-items: baseline; margin: 8px 0 0;
  font-size: 14px; line-height: 1.45; color: var(--aims-ink-2);
}
.aims-rondje-noot i { color: var(--kleur-accent); }
.aims-rondje-versturen { display: flex; gap: 10px; align-items: baseline; margin-bottom: 20px; text-align: left; }

/* Dialogen: knoppen naast elkaar, op een telefoon onder elkaar. */
.aims-rondje-dialoog__knoppen { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.aims-rondje-dialoog__knoppen .btn { flex: 1 1 auto; justify-content: center; }

/* Uitleg achter het vraagteken: een eenvoudig stroomschema, stap voor stap,
   met per stap wie hem doet. De lijn tussen de iconen is de pijl. */
.aims-rondje-uitleg { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.aims-rondje-uitleg__stap {
  position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px;
  padding-bottom: 18px;
}
.aims-rondje-uitleg__stap:not(:last-child)::before {
  content: ""; position: absolute; left: 21px; top: 44px; bottom: 0;
  border-left: 2px solid var(--aims-line-strong);
}
.aims-rondje-uitleg__icoon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-size: 17px;
  background: var(--aims-sand); color: var(--aims-espresso);
}
.aims-rondje-uitleg__stap--coordinator .aims-rondje-uitleg__icoon { background: var(--kleur-accent); color: #fff; }
.aims-rondje-uitleg__stap--keuken .aims-rondje-uitleg__icoon { background: var(--aims-espresso); color: #fff; }
.aims-rondje-uitleg__rol {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--aims-ink-3);
}
.aims-rondje-uitleg__stap strong { display: block; font-size: 15px; color: var(--aims-ink); margin: 1px 0 2px; }
.aims-rondje-uitleg__stap p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--aims-ink-2); }
.aims-rondje-uitleg__lus {
  display: flex; gap: 10px; align-items: baseline; margin: 0 0 12px; padding: 10px 12px;
  background: var(--aims-sand-warm); border-radius: var(--r-2);
  font-size: 14px; color: var(--aims-ink-2);
}
.aims-rondje-uitleg__lus i { color: var(--kleur-accent); }

/* QR-code */
.aims-qr { display: grid; place-items: center; min-height: 200px; margin: 16px 0 8px; }
.aims-qr img { width: min(260px, 100%); height: auto; display: block; background: #fff; }
.aims-qr__url { text-align: center; font-size: 13px; color: var(--aims-ink-3); overflow-wrap: anywhere; margin: 0; }
.aims-qr__poster { display: flex; justify-content: center; align-items: baseline; gap: 6px; margin: 14px auto 0; font-size: 14px; text-align: center; }

/* Blok in "Mijn bestellingen" */
.aims-bp-rondje {
  margin-bottom: 16px; padding: 14px;
  background: var(--aims-sand-warm); border: 1px solid var(--aims-line); border-radius: var(--r-2);
  display: grid; gap: 10px;
}
.aims-bp-rondje__kop { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--aims-espresso); }
.aims-bp-rondje__kop i { color: var(--kleur-accent); margin-right: 4px; }
.aims-bp-rondje__tekst { margin: 0; font-size: 14px; line-height: 1.45; color: var(--aims-ink-2); }
.aims-bp-rondje__acties { display: flex; flex-wrap: wrap; gap: 8px; }
.aims-bp-rondje__acties .btn--ghost { border-color: var(--aims-line-strong); }

/* ── Lunchrondje: zwevend venster (Document Picture-in-Picture) ─────────
   Een eigen klein document; dit bestand wordt erin gekopieerd. Alleen lezen,
   dus geen knoppen: compact, scrollbaar, en wat nieuw is licht even op. */
.aims-pip-body { margin: 0; padding: 0; overflow: hidden; background: var(--aims-paper); color: var(--aims-ink); font-family: var(--font-basis); }
.aims-pip { display: flex; flex-direction: column; height: 100vh; }
.aims-pip__kop {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--aims-line); background: var(--aims-sand-warm);
}
.aims-pip__titel { display: grid; min-width: 0; }
.aims-pip__titel .eyebrow { font-size: 10px; letter-spacing: .14em; color: var(--kleur-accent); }
.aims-pip__titel strong { font-size: 15px; color: var(--aims-espresso); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aims-pip__stand {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--aims-ink-2);
  border-bottom: 1px solid var(--aims-line);
}
.aims-pip__stand .tnum { color: var(--aims-ink); }
.aims-pip__lijst { flex: 1; overflow-y: auto; padding: 4px 14px 12px; }
.aims-pip__groep + .aims-pip__groep { margin-top: 4px; }
.aims-pip__persoon {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 10px 0 4px; border-bottom: 1px solid var(--aims-line);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--aims-ink-2);
}
.aims-pip__regel { display: grid; gap: 1px; padding: 6px 6px; margin: 0 -6px; border-radius: var(--r-2); }
.aims-pip__regel.is-nieuw { animation: aims-pip-nieuw 4s ease-out; }
@keyframes aims-pip-nieuw {
  0%, 30% { background: color-mix(in srgb, var(--kleur-accent) 22%, transparent); }
  100%    { background: transparent; }
}
.aims-pip__item   { font-size: 14px; font-weight: 700; }
.aims-pip__keuzes { font-size: 12.5px; color: var(--aims-ink-3); }
.aims-pip__opm    { font-size: 12.5px; font-weight: 600; color: var(--kleur-accent); }
.aims-pip__fout   { font-size: 12.5px; font-weight: 600; color: var(--kleur-fout); }
.aims-pip__leeg   { margin: 16px 0; font-size: 14px; line-height: 1.45; color: var(--aims-ink-2); }
.aims-pip__voet {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-top: 1px solid var(--aims-line);
  font-size: 12px; color: var(--aims-ink-3);
}
.aims-pip__live { width: 8px; height: 8px; border-radius: 50%; background: var(--status-goedgekeurd, #4a7a3a); animation: aims-pip-live 2s ease-in-out infinite; }
@keyframes aims-pip-live { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .aims-pip__regel.is-nieuw { animation: none; background: color-mix(in srgb, var(--kleur-accent) 12%, transparent); }
  .aims-pip__live { animation: none; }
}