/* ════════════════════════════════════════════════════════════════════════
   SUPERMENU — designsysteem "Vers van de markt"
   Eén coherent systeem, mobile-first. Warm editorial food-design:
   roomwit canvas · diep bosgroen · terracotta voor geld en actie.
   Fraunces (display) + Instrument Sans (body).

   Tokens → basis → componenten → schermen → desktop-uitbreiding.
   Geen override-lagen, geen !important.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ──────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  --bg: #FAF6EE;
  --surface: #FFFDF8;
  --soft: #F3EDE0;
  --strong: #E9E1CF;
  --line: #E6DECC;

  --ink: #1C2620;
  --muted: #6E7A70;
  --faint: #9AA69C;

  --green: #2E6B4F;
  --green-dark: #1F3D2B;
  --green-wash: #E4EFE6;
  --mint: #9BC4A8;

  --terra: #D96C47;
  --terra-deep: #B9552F;
  --terra-wash: #F9E9E1;

  --gold: #C98F2E;
  --blue: #2F5D73;
  --red: #B04A38;
  --red-wash: #F7E7E3;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 6px rgba(52, 42, 28, .06);
  --shadow-md: 0 6px 24px rgba(52, 42, 28, .09);
  --shadow-lg: 0 18px 44px rgba(52, 42, 28, .14);

  --pad-card: 16px;
  --gap: 12px;
}

/* ─── 2. BASIS ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 460px at 88% -6%, rgba(217, 108, 71, .06), transparent 60%),
    radial-gradient(900px 420px at -8% 10%, rgba(46, 107, 79, .07), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: -.012em;
  line-height: 1.22;
  margin: 0;
}
p { margin: 0; }
a { color: var(--green); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }

input[type="text"], input[type="number"], input[type="email"], select, textarea {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  padding: 10px 12px;
  outline: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(46, 107, 79, .15);
}
input[type="range"] { accent-color: var(--green-dark); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 2000; background: var(--surface); padding: 8px 14px; border-radius: var(--r-sm); }

.eyebrow {
  margin: 0;
  color: var(--terra-deep);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* ─── 3. LAYOUT-SKELET ──────────────────────────────────────────────────── */
.app-shell {
  width: min(480px, 100% - 16px);
  margin: 0 auto;
  padding: 10px 0 calc(86px + env(safe-area-inset-bottom));
}

.workspace { display: block; }
.tab-area { display: grid; gap: var(--gap); min-width: 0; }
.tab-content { display: grid; gap: var(--gap); }
.tabs { display: none; }

/* ─── 4. TOPBAR ─────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: var(--gap);
  padding: 16px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #23422F 0%, #1F3D2B 55%, #2A513A 100%);
  color: #F4EEDF;
  box-shadow: var(--shadow-md);
}
.brand { display: flex; gap: 12px; align-items: center; min-width: 0; }
.brand-logo { width: 42px; height: 42px; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.topbar .eyebrow { color: #E9B98C; }
.topbar h1 { color: #F4EEDF; font-size: 1.1rem; }
.brand-subtitle { display: none; }
.topbar-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.topbar-meta span {
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 253, 248, .12);
  border: 1px solid rgba(255, 253, 248, .16);
  font-size: .74rem;
  font-weight: 650;
}
.topbar-reset { color: #F4EEDF; font-size: .78rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.store-logo-strip { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.store-logo-strip img {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: #fff;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.store-logo-strip b { font-size: .72rem; font-weight: 700; margin-left: 2px; }

/* ─── 5. KAART-BASIS ────────────────────────────────────────────────────── */
.menu-summary, .menu-overview, .featured-day, .day-card, .section-card,
.summary-card, .panel, .shopping-cat, .scanner-card, .offer-card,
.launch-card, .empty-state, .shopping-summary {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: var(--pad-card);
}

.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 2px 4px 0; }
.section-heading h2 { font-size: 1.15rem; }
.section-heading span { padding: 5px 11px; border-radius: var(--r-pill); background: var(--green-wash); color: var(--green-dark); font-size: .76rem; font-weight: 700; }

/* ─── 6. MENU-SAMENVATTING ──────────────────────────────────────────────── */
.menu-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.menu-summary > * { min-width: 0; }
.menu-summary h2 { font-size: 1.35rem; }
.menu-summary p { color: var(--muted); font-size: .9rem; margin-top: 4px; }
.menu-summary p strong { color: var(--green-dark); }
.menu-summary-warning { border-color: rgba(176, 74, 56, .4); }
.menu-summary-warning .menu-summary-total strong { color: var(--red); }

.budget-progress { height: 9px; border-radius: var(--r-pill); overflow: hidden; background: var(--strong); margin-top: 12px; }
.budget-progress span { display: block; height: 100%; max-width: 100%; background: linear-gradient(90deg, var(--mint), var(--green)); }
.menu-summary-warning .budget-progress span { background: linear-gradient(90deg, var(--gold), var(--red)); }

.menu-reasons { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.menu-reasons li { font-size: .85rem; color: #46584C; }

.budget-slider-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.budget-slider-row input[type="range"] { flex: 1; height: 22px; }
.budget-slider-row output { font-family: var(--font-display); font-weight: 650; color: var(--terra-deep); font-size: 1.1rem; white-space: nowrap; }

.plan-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.plan-tags span { padding: 6px 11px; border-radius: var(--r-pill); background: var(--soft); color: var(--muted); font-size: .76rem; font-weight: 650; }

.menu-summary-total { display: grid; gap: 2px; }
.menu-summary-total span { color: var(--muted); font-size: .78rem; font-weight: 650; }
.menu-summary-total strong { font-family: var(--font-display); font-size: 1.8rem; color: var(--terra-deep); line-height: 1.1; }
.menu-summary-total small { font-size: .84rem; }

.summary-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ─── 7. CHIPS ──────────────────────────────────────────────────────────── */
.chip-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  margin-top: 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chip-row::-webkit-scrollbar { display: none; }
.chip-row-label {
  flex: 0 0 auto;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}
.chip {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .15s ease, background .15s ease;
}
.chip:active { transform: scale(.96); }
.chip-active { background: var(--green-dark); border-color: var(--green-dark); color: #FCF7EA; font-weight: 700; }

.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-group button, .preset {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-pill);
  padding: 7px 13px;
  font-size: .84rem;
  font-weight: 600;
}
.chip-group button.active, .preset.active { background: var(--green-dark); border-color: var(--green-dark); color: #FCF7EA; }
.preset-row { display: flex; flex-wrap: wrap; gap: 6px; }

/* ─── 8. KNOPPEN ────────────────────────────────────────────────────────── */
.primary-link, .secondary-link, .light-link, .secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.primary-link { background: var(--terra); color: #fff; box-shadow: 0 8px 20px rgba(217, 108, 71, .3); border: 0; cursor: pointer; }
.primary-link:hover { background: var(--terra-deep); }
.primary-link:active { transform: scale(.97); }
.secondary-link, .secondary-button { border: 1px solid var(--line); background: var(--surface); color: var(--green-dark); cursor: pointer; }
.secondary-button:hover { background: var(--soft); }
.light-link { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.link-button { color: var(--muted); font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.small-danger { color: var(--red); font-size: .8rem; font-weight: 650; }

/* ─── 9. KPI's ──────────────────────────────────────────────────────────── */
.menu-overview { padding: 0; overflow: hidden; }
.menu-kpis { display: grid; grid-template-columns: 1fr 1fr; }
.menu-kpis article { padding: 13px 15px; border: 0; background: var(--surface); }
.menu-kpis article:nth-child(odd) { border-right: 1px solid var(--line); }
.menu-kpis article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.menu-kpis span { display: block; color: var(--muted); font-size: .72rem; font-weight: 650; }
.menu-kpis strong { display: block; margin-top: 3px; font-family: var(--font-display); font-size: 1.05rem; }
.menu-kpis strong.warning { color: var(--red); }

/* ─── 10. WEEK & RECEPTKAARTEN ──────────────────────────────────────────── */
.week-section { display: grid; gap: var(--gap); }
.week-grid { display: grid; gap: var(--gap); }
.featured-day { display: grid; gap: var(--gap); }
.featured-meals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.day-card { display: grid; gap: 12px; }
.day-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.day-card-head span { display: inline-block; background: var(--green-dark); color: #F4EEDF; border-radius: 8px; padding: 3px 9px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; }
.day-card-head h3 { font-size: 1.2rem; margin-top: 4px; }
.day-card-head strong { font-family: var(--font-display); color: var(--terra-deep); font-size: 1.1rem; }
.day-card-head small { color: var(--faint); }
.guest-day { border-color: rgba(201, 143, 46, .5); }

.recipe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.recipe-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
  cursor: pointer;
}
.recipe-card:active { transform: scale(.98); }
.recipe-card-empty { opacity: .55; cursor: default; }

.recipe-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); }
.recipe-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.recipe-card:hover .recipe-photo img { transform: scale(1.05); }
.recipe-photo-fallback { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--soft); font-size: 2rem; position: relative; }
.recipe-tag {
  position: absolute;
  top: 8px; left: 8px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  background: rgba(28, 38, 32, .78);
  color: #F4EEDF;
  border-radius: var(--r-pill);
  padding: 5px 10px;
  backdrop-filter: blur(4px);
}

.recipe-body { display: grid; gap: 8px; padding: 11px 12px 12px; align-content: start; flex: 1; }
.recipe-body strong { font-family: var(--font-display); font-weight: 650; font-size: .98rem; line-height: 1.25; }
.recipe-body small { color: var(--muted); }
.recipe-meta { display: flex; flex-wrap: wrap; gap: 5px; }
.recipe-meta span {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--soft);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
  white-space: nowrap;
}
.swap-button {
  justify-self: start;
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  padding: 6px 14px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--green-dark);
}
.swap-button:hover { background: var(--green-wash); }

.day-matrix { display: grid; gap: 8px; }

/* ─── 11. BOODSCHAPPENLIJST ─────────────────────────────────────────────── */
.shopping-summary { display: grid; gap: 12px; background: var(--green-dark); color: #F4EEDF; border: 0; }
.shopping-summary .eyebrow { color: #E9B98C; }
.shopping-summary h2, .shopping-summary strong { color: #F4EEDF; }
.shopping-total-block { text-align: right; }
.shopping-total-block strong { font-family: var(--font-display); font-size: 1.7rem; }

.shopping-cat { display: grid; gap: 10px; }
.shopping-cat h3 { font-size: 1.1rem; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.product-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "dot photo" "info info";
  gap: 8px 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  align-items: start;
}
.product-card .check-dot { grid-area: dot; }
.product-card .product-photo, .product-card .item-marker { grid-area: photo; justify-self: end; }
.product-card .product-info { grid-area: info; }
.product-offer { border-color: rgba(46, 107, 79, .45); background: linear-gradient(180deg, #FDFBF4, var(--surface)); }
.product-info { display: grid; gap: 3px; min-width: 0; }
.product-info strong { font-size: .88rem; line-height: 1.3; }
.product-info span { color: var(--muted); font-size: .78rem; }
.product-info small { color: var(--terra-deep); font-weight: 800; font-size: .95rem; }
.product-info small:not(:last-of-type) { color: var(--faint); font-weight: 550; font-size: .74rem; }
.product-info small s { color: var(--faint); font-weight: 500; }
.product-info a { font-size: .78rem; font-weight: 650; }
.price-compare-row { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 2px; }
.price-compare-row em {
  font-style: normal;
  font-size: .7rem;
  color: var(--faint);
  white-space: nowrap;
}
.price-compare-row em.cheapest { color: var(--green); font-weight: 700; }
.price-compare-row em.current { text-decoration: underline; text-underline-offset: 2px; }

.product-photo {
  width: 84px; height: 84px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  overflow: hidden;
  position: relative;
}
.product-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-photo figcaption {
  position: absolute; inset: auto 0 0;
  padding: 2px 3px;
  background: rgba(28, 38, 32, .72);
  color: #fff;
  font-size: .5rem;
  text-align: center;
}
.item-marker {
  display: inline-grid; place-items: center;
  width: 84px; height: 84px;
  border-radius: var(--r-sm);
  background: var(--soft);
  color: var(--green-dark);
  font-weight: 800;
}
.item-marker.base { background: #F5EBDD; color: #8A5A1F; }
.item-marker.protein { background: var(--red-wash); color: var(--red); }
.item-marker.fresh { background: var(--green-wash); color: var(--green-dark); }
.item-marker.dairy { background: #E8EFF4; color: var(--blue); }
.offer-badge { border-radius: var(--r-pill); }

.check-dot { flex: 0 0 auto; }
.shopping-cat-extra { display: grid; gap: 8px; }
.extra-remove { color: var(--red); font-size: .76rem; font-weight: 650; }
.share-shopping { margin-top: 4px; }

/* ─── 12. VERGELIJKING ──────────────────────────────────────────────────── */
.summary-board { display: grid; gap: var(--gap); }
.summary-card { display: grid; gap: 6px; }
.summary-card.best-card { background: var(--green-dark); color: #F4EEDF; border: 0; }
.summary-card.best-card .eyebrow { color: #E9B98C; }
.summary-card.best-card p { color: rgba(244, 238, 223, .8); }
.summary-card span, .summary-card small { color: var(--muted); font-size: .84rem; }
.summary-card.best-card span, .summary-card.best-card small { color: rgba(244, 238, 223, .8); }
.summary-card strong, .summary-card h2 { font-family: var(--font-display); font-size: 1.45rem; }
.summary-card:not(.best-card) > strong { color: var(--terra-deep); }
.data-disclaimer { margin: 8px 0 14px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--terra-wash); color: var(--terra-deep); font-size: .84rem; }

.price-chart { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 74px; gap: 10px; align-items: center; font-size: .84rem; color: var(--muted); }
.bar-row strong { color: var(--ink); font-size: .84rem; }
.bar-row > span:last-child { color: var(--terra-deep); font-weight: 750; }
.bar-track { height: 10px; background: var(--strong); border-radius: var(--r-pill); overflow: hidden; }
.bar-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--green)); }

.comparison-list { display: grid; gap: 8px; }
.store-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.store-row.best { border-color: var(--green); background: linear-gradient(180deg, #F4FAF3, var(--surface)); }
.store-price { color: var(--terra-deep); font-weight: 750; }
.store-difference { color: var(--terra-deep); }
.store-score { font-weight: 800; color: var(--green-dark); }

.store-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 800; padding: 6px 10px; font-size: .76rem; line-height: 1; white-space: nowrap; }
.store-badge-sm { padding: 4px 8px; font-size: .68rem; }
.store-badge-lg { padding: 10px 16px; font-size: .95rem; }
.store-logo { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: var(--r-sm); padding: 5px 9px; }
.store-logo img { display: block; height: 20px; width: 20px; object-fit: contain; border-radius: 4px; }
.store-logo img + .store-badge { background: transparent; color: inherit; padding: 0; font-weight: 700; font-size: .8rem; }
.store-logo:not(:has(img)) { background: transparent; border: 0; padding: 0; }
.store-logo-sm { padding: 3px 7px; gap: 5px; }
.store-logo-sm img { height: 15px; width: 15px; }
.store-logo-lg { padding: 7px 12px; gap: 8px; }
.store-logo-lg img { height: 26px; width: 26px; }

/* ─── 13. AANBIEDINGEN & SCANNER ────────────────────────────────────────── */
.offer-grid, .scanner-grid { display: grid; gap: 10px; }
.offer-card, .scanner-card { display: grid; gap: 8px; }
.scanner-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.scanner-hero { display: grid; gap: 8px; }
.scanner-metrics, .scanner-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.scanner-note { color: var(--muted); font-size: .82rem; }
.scanner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.source-strip { display: flex; flex-direction: column; gap: 6px; font-size: .84rem; color: var(--muted); }

/* ─── 14. CHAT (drawer op mobiel) ───────────────────────────────────────── */
.chat-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  width: 100vw;
  max-height: 78vh;
  display: grid;
  grid-template-rows: auto minmax(140px, 1fr) auto auto;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: var(--surface);
  box-shadow: 0 -18px 44px rgba(36, 30, 18, .28);
  transform: translateY(110%);
  transition: transform .28s ease;
  overflow: hidden;
}
body.chat-open .chat-panel { transform: translateY(0); }
body.chat-open::before { content: ""; position: fixed; inset: 0; background: rgba(20, 18, 12, .45); z-index: 899; }

.chat-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 16px 12px; border-bottom: 1px solid var(--line); }
.chat-header strong { font-family: var(--font-display); font-size: 1.05rem; }
.chat-header div { display: grid; gap: 1px; }
.chat-header span { color: var(--muted); font-size: .76rem; }
.chat-messages { padding: 12px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.chat-message { display: flex; }
.chat-message.chat-user { justify-content: flex-end; }
.chat-bubble { max-width: 86%; padding: 10px 13px; line-height: 1.45; font-size: .9rem; overflow-wrap: anywhere; }
.chat-bot .chat-bubble { background: var(--soft); border-radius: 16px 16px 16px 5px; }
.chat-user .chat-bubble { background: var(--green-dark); color: #FCF7EA; border-radius: 16px 16px 5px 16px; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.chat-chip { border: 1px solid var(--green); border-radius: var(--r-pill); background: var(--green-wash); color: var(--green-dark); padding: 7px 13px; font-size: .82rem; font-weight: 650; }
.chat-input-row { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--line); }
.chat-input-row input { border: 0; border-radius: 0; padding: 14px; background: var(--surface); }
.chat-input-row button { background: var(--terra); color: #fff; padding: 0 18px; font-weight: 700; }

/* ─── 15. BOTTOM-NAV ────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 800;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 253, 248, .9);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.bn-item {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 7px 0 5px;
  border-radius: var(--r-md);
  color: var(--muted);
}
.bn-item svg { width: 22px; height: 22px; }
.bn-item small { font-size: .64rem; font-weight: 700; }
.bn-item.active { color: var(--green-dark); background: rgba(46, 107, 79, .12); }

/* ─── 16. RECEPT-DETAIL ─────────────────────────────────────────────────── */
.rd-overlay { position: fixed; inset: 0; z-index: 950; background: rgba(20, 18, 12, .5); display: grid; align-items: end; }
.rd-overlay[hidden] { display: none; }
body.recipe-open { overflow: hidden; }
.rd-sheet {
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-lg);
}
.rd-close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255, 253, 248, .92);
  font-size: 1rem;
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.rd-photo { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--soft); }
.rd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-photo-fallback { display: grid; place-items: center; font-size: 3rem; }
.rd-body { padding: 16px 16px 22px; display: grid; gap: 10px; }
.rd-eyebrow { color: var(--terra-deep); letter-spacing: .12em; text-transform: uppercase; font-size: .68rem; font-weight: 700; }
.rd-body h2 { font-size: 1.45rem; }
.rd-body h3 { font-size: 1.02rem; margin-top: 8px; }
.rd-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-meta span { padding: 6px 11px; border-radius: var(--r-pill); background: var(--soft); font-size: .8rem; font-weight: 650; }
.rd-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.rd-tags span { padding: 4px 10px; border-radius: var(--r-pill); background: var(--green-wash); color: var(--green-dark); font-size: .72rem; font-weight: 650; }
.rd-ing-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rd-ing {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-radius: var(--r-md);
  background: var(--soft);
}
.rd-ing strong { font-size: .9rem; display: block; }
.rd-ing span { color: var(--muted); font-size: .78rem; }
.rd-ing-pic { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; background: #fff; flex: 0 0 auto; }
.rd-ing-fallback { display: grid; place-items: center; font-weight: 800; color: var(--green-dark); background: var(--green-wash); }
.rd-body ol { margin: 0; padding-left: 20px; display: grid; gap: 7px; }
.rd-body ol li { font-size: .92rem; line-height: 1.45; }
.rd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rd-primary { flex: 1; background: var(--terra); color: #fff; border-radius: var(--r-pill); padding: 13px 18px; font-weight: 700; }
.rd-secondary { border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); padding: 13px 16px; font-weight: 650; color: var(--green-dark); }

/* ─── 17. PANELS / INSTELLINGEN ─────────────────────────────────────────── */
.advanced-panel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 4px 16px 16px; }
.advanced-panel summary { padding: 12px 0; font-weight: 700; color: var(--green-dark); cursor: pointer; }
.advanced-grid { display: grid; gap: var(--gap); }
.panel { display: grid; gap: 10px; }
.panel h2 { font-size: 1.02rem; }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.field-grid { display: grid; gap: 10px; }
.field-grid label { display: grid; gap: 5px; font-size: .84rem; font-weight: 650; color: var(--muted); }
.budget-mode-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-top: 4px; }
.budget-mode-row strong { color: var(--green-dark); }
.budget-mode-row span { color: var(--muted); font-size: .82rem; }
.budget-panel output { font-family: var(--font-display); font-size: 1.2rem; color: var(--terra-deep); }
.stepper { display: inline-flex; align-items: center; gap: 14px; }
.stepper button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 1.1rem; font-weight: 700; }
.stepper strong { font-family: var(--font-display); font-size: 1.25rem; min-width: 24px; text-align: center; }
.inline-actions { display: flex; gap: 6px; }
.save-status { color: var(--faint); font-size: .74rem; }
.wish-panel textarea { min-height: 70px; resize: vertical; }

.member { display: grid; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--soft); }
.member-name { font-weight: 700; }
.member-prefs, .member-dislikes { display: flex; flex-wrap: wrap; gap: 5px; }
.member-add, .member-remove { font-size: .8rem; font-weight: 650; }
.member-remove { color: var(--red); }
.dislike-input { width: 100%; }
.removable { display: inline-flex; align-items: center; gap: 6px; }
.rule-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .86rem; }

/* ─── 18. CATALOGUS ─────────────────────────────────────────────────────── */
.catalog-bar { position: sticky; top: 0; z-index: 5; display: grid; gap: 8px; padding: 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.catalog-search { width: 100%; }
.catalog-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.catalog-count { color: var(--muted); font-size: .8rem; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.catalog-card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.catalog-pic { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--r-sm); background: #fff; }
.catalog-info { display: grid; gap: 3px; }
.catalog-brand { color: var(--muted); font-size: .74rem; }
.catalog-stores { display: flex; flex-wrap: wrap; gap: 4px; }
.catalog-stores-line { color: var(--muted); font-size: .74rem; }
.catalog-store-name { font-weight: 650; }
.catalog-add { border: 1px solid var(--green); border-radius: var(--r-pill); color: var(--green-dark); background: var(--green-wash); padding: 7px 12px; font-size: .8rem; font-weight: 700; }
.catalog-pager { display: flex; justify-content: center; gap: 8px; }
.catalog-more { padding: 10px 20px; }

/* ─── 19. ONBOARDING ────────────────────────────────────────────────────── */
.ob-overlay { position: fixed; inset: 0; z-index: 1000; background: linear-gradient(170deg, #FDF8EC 0%, var(--surface) 60%); overflow-y: auto; }
.ob-overlay[hidden] { display: none; }
.ob-screen { width: min(440px, 100% - 32px); margin: 0 auto; padding: 26px 0 40px; display: grid; gap: 18px; }
.ob-header { display: flex; justify-content: space-between; align-items: center; }
.ob-progress { display: flex; gap: 5px; }
.ob-progress span { width: 26px; height: 5px; border-radius: var(--r-pill); background: var(--strong); }
.ob-progress span.active { background: var(--green); }
.ob-skip, .ob-back { color: var(--muted); font-size: .84rem; font-weight: 650; }
.ob-hero { display: grid; gap: 8px; }
.ob-hero h1 { font-size: 1.6rem; }
.ob-hero p { color: var(--muted); }
.ob-welcome { text-align: center; }
.ob-illu { display: flex; justify-content: center; gap: 10px; font-size: 2.2rem; }
.ob-illu-step { animation: ob-pop .5s ease both; }
.ob-illu-step:nth-child(2) { animation-delay: .12s; }
.ob-illu-step:nth-child(3) { animation-delay: .24s; }
@keyframes ob-pop { from { opacity: 0; transform: scale(.6) translateY(8px); } to { opacity: 1; transform: none; } }
.ob-grid, .ob-vibe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-tile, .ob-vibe {
  display: grid; gap: 6px; justify-items: center;
  padding: 16px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  font-weight: 650;
}
.ob-tile.active, .ob-vibe.active { border-color: var(--green-dark); background: var(--green-wash); }
.ob-vibe-emoji { font-size: 1.7rem; }
.ob-tile-label { font-size: .84rem; }
.ob-budget { display: grid; gap: 10px; }
.ob-budget-marks { display: flex; justify-content: space-between; color: var(--faint); font-size: .74rem; }
.ob-people { display: flex; align-items: center; justify-content: center; gap: 18px; }
.ob-people-display { font-family: var(--font-display); font-size: 2rem; }
.ob-step-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 1.3rem; }
.ob-primary { width: 100%; background: var(--terra); color: #fff; border-radius: var(--r-pill); padding: 15px; font-size: 1rem; font-weight: 700; box-shadow: 0 10px 24px rgba(217, 108, 71, .3); }

/* ─── 20. SPLASH / TOAST / OVERIG ───────────────────────────────────────── */
.splash { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; background: var(--bg); transition: opacity .4s ease; }
.splash-hide { opacity: 0; pointer-events: none; }
.splash-card { display: grid; justify-items: center; gap: 10px; }
.splash-emoji { font-size: 2.6rem; }
.splash-card strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--green-dark); }
.splash-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--terra); animation: splash-b 1s infinite alternate ease-in-out; }
@keyframes splash-b { from { transform: translateY(0); } to { transform: translateY(-8px); } }

.sm-toast {
  position: fixed;
  left: 50%; bottom: calc(86px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px);
  z-index: 1200;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #F4EEDF;
  font-size: .86rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.sm-toast-show { opacity: 1; transform: translate(-50%, 0); }

.empty-state { text-align: center; color: var(--muted); display: grid; gap: 8px; }
.install-icon { font-size: 1.6rem; }
.install-text { display: grid; gap: 2px; }
.install-go { background: var(--terra); color: #fff; border-radius: var(--r-pill); padding: 9px 16px; font-weight: 700; }
.install-close { color: var(--muted); }

/* Launch/onderzoek-tab */
.launch-hero, .launch-grid, .revenue-grid, .terms-list, .deploy-steps { display: grid; gap: 10px; }
.launch-card { display: grid; gap: 8px; }
.launch-score { font-family: var(--font-display); font-size: 1.5rem; color: var(--green-dark); }
.key { font-weight: 700; }

/* ─── 21. TOEGANKELIJKHEID ──────────────────────────────────────────────── */
.bn-item:focus-visible, .chip:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(46, 107, 79, .4);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ─── 22. DESKTOP (≥ 821px) ─────────────────────────────────────────────── */
@media (min-width: 821px) {
  .app-shell { width: min(1380px, 100% - 40px); padding-bottom: 60px; }
  .bottom-nav { display: none; }

  .topbar { flex-direction: row; justify-content: space-between; align-items: center; padding: 18px 22px; }
  .topbar h1 { font-size: 1.35rem; }
  .brand-subtitle { display: block; color: rgba(244, 238, 223, .72); font-size: .86rem; margin-top: 3px; }

  .workspace { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
  .tabs {
    display: flex; gap: 2px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 4px;
    box-shadow: var(--shadow-sm);
    position: sticky; top: 12px; z-index: 10;
  }
  .tab-button { flex: 1; padding: 10px 12px; border-radius: var(--r-sm); background: transparent; font-weight: 700; color: var(--muted); transition: all .2s; }
  .tab-button.active { background: var(--green-dark); color: #FCF7EA; }

  .chat-panel {
    position: sticky; top: 12px;
    width: auto; max-height: calc(100vh - 100px); min-height: 480px;
    transform: none;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    grid-template-rows: auto minmax(220px, 1fr) auto auto;
  }
  body.chat-open::before { display: none; }

  .menu-summary { grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); align-items: start; }
  .menu-summary-total { text-align: right; justify-items: end; }
  .summary-actions { justify-content: flex-end; }

  .menu-kpis { grid-template-columns: repeat(4, 1fr); }
  .menu-kpis article { border-bottom: 0; }
  .menu-kpis article:not(:last-child) { border-right: 1px solid var(--line); }

  .week-grid { grid-template-columns: 1fr 1fr; }
  .featured-meals { grid-template-columns: repeat(4, 1fr); }
  .recipe-grid { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .catalog-grid { grid-template-columns: repeat(4, 1fr); }
  .summary-board { grid-template-columns: 1.5fr repeat(3, 1fr); }
  .advanced-grid { grid-template-columns: repeat(2, 1fr); }
  .field-grid.two { grid-template-columns: 1fr 1fr; }
  .ob-grid, .ob-vibe-grid { grid-template-columns: repeat(3, 1fr); }

  .rd-overlay { align-items: center; padding: 30px; }
  .rd-sheet { max-width: 620px; margin: 0 auto; border-radius: 24px; }

  .sm-toast { bottom: 30px; }
}