/* ══════════════════════════════════════════════════════════════
   Customer-facing pages — component library
   Loads AFTER bootstrap.min.css and site.css; that order is
   load-bearing (these rules override Bootstrap's visual voice).
   Scope overrides under .customer-app so management pages are untouched.
   ══════════════════════════════════════════════════════════════ */

.customer-app {
  background: var(--surface);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.customer-app main { flex: 1 0 auto; }

.customer-app .container { max-width: var(--container); }

@media (max-width: 767.98px) {
  .customer-app .container { padding-left: var(--space-5); padding-right: var(--space-5); }
}

/* ── Header ────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .navbar { padding-top: 0; padding-bottom: 0; }

/* The brand carries the bar height, not the navbar. A min-height on the
   navbar only holds while the navbar is short: once the mobile collapse
   opens the navbar is far taller than that floor, so the brand/toggler
   row would shrink to its content height and the logo would ride up. */
.site-header .navbar-brand { min-height: 56px; }

@media (min-width: 768px) {
  .site-header .navbar-brand { min-height: var(--header-h); }
}

.brand-mark {
  display: inline-flex;
  align-items: center;
}

.brand-logo {
  height: 32px;
  width: auto;
  display: block;
}

/* Nav links read as pills, matching the button language. */
.customer-app .nav-link {
  padding: 8px 14px;
  border-radius: var(--radius-full);
  color: var(--ink-soft);
  font-weight: 500;
  font-size: var(--text-sm);
  transition: background var(--transition), color var(--transition);
}

.customer-app .nav-link:hover {
  background: var(--surface-warm);
  color: var(--ink);
  text-decoration: none;
}

.customer-app .nav-link.nav-active { color: var(--primary); font-weight: 600; }

.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-full);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--text-sm);
  transition: border-color var(--transition), background var(--transition);
}

.cart-link:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
  text-decoration: none;
}

.cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1;
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  background: #241E1A;
  color: #C9BEB5;
  margin-top: 72px;
  padding: 56px 0 28px;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.site-footer a { color: #C9BEB5; }
.site-footer a:hover { color: #fff; }

/* The logo is a dark-ink wordmark — lift it out of the dark band. */
.site-footer .brand-logo { filter: brightness(0) invert(1); opacity: .92; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-brand p {
  color: #9A8D83;
  max-width: 280px;
  margin-top: 12px;
}

.footer-brand p a { text-decoration: underline; }

.footer-col h2 {
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 14px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: #9A8D83;
}

@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ── Sections & rhythm ─────────────────────────────────────── */
.section { padding: 56px 0; }

.section-tint {
  background: var(--surface-warm);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: 28px;
  flex-wrap: wrap;
}

/* h1 included so pages whose section head is the page's main heading keep the same look. */
.section-head h1,
.section-head h2 { font-size: var(--text-2xl); }

/* Uppercase eyebrow above the section title. */
.section-head .kicker {
  display: block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--primary);
  margin-bottom: 6px;
}

.section-head .btn { white-space: nowrap; }

/* ── Hero ──────────────────────────────────────────────────── */
/* Single centred column on a warm band. */
.hero {
  padding: 72px 0 64px;
  background: var(--surface-warm);
  text-align: center;
}

.hero-title {
  font-size: clamp(2.1rem, 5vw, var(--text-4xl));
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.12;
  max-width: 22ch;
  margin-inline: auto;
}

.hero-title em {
  font-style: normal;
  color: var(--primary);
}

.hero-sub {
  font-size: var(--text-lg);
  color: var(--muted);
  max-width: 52ch;
  margin: 16px auto 0;
}

#heroSearchWrap {
  position: relative;
  max-width: 640px;
  margin: 34px auto 0;
  text-align: left;
}

.hero-search {
  display: flex;
  align-items: center;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.hero-search:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.hero-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 9px 18px;
  font-size: var(--text-base);
  font-family: var(--font);
  color: var(--ink);
  min-width: 0;
}

#heroSuggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}

.suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition);
}

.suggest-item:hover { background: var(--surface-warm); color: var(--ink); }

.suggest-thumb {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-2);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--gray-100);
}

.suggest-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.suggest-thumb--icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.suggest-name { font-size: .9rem; font-weight: 600; line-height: 1.2; }
.suggest-meta { font-size: .76rem; color: var(--gray-600); margin-top: 1px; }

/* Single trust line under the search bar. */
.hero-meta {
  margin-top: 22px;
  font-size: var(--text-sm);
  color: var(--muted);
}

/* ── Emoji tiles (food imagery) ────────────────────────────── */
/* Flat primary-soft ground with a large glyph — the reference's
   image-placeholder treatment. Photos, when present, cover it. */
.emoji-tile {
  aspect-ratio: 3 / 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  overflow: hidden;
  background: var(--primary-soft);
  color: var(--primary);
}

.emoji-tile > span { opacity: .85; }

.emoji-tile img { width: 100%; height: 100%; object-fit: cover; }

.emoji-tile--sm {
  width: 84px;
  aspect-ratio: 1;
  flex-shrink: 0;
  font-size: 2.1rem;
  border-radius: var(--radius);
}

.emoji-tile--lg {
  aspect-ratio: 1;
  font-size: 7rem;
  border-radius: var(--radius-lg);
}

.emoji-tile--avatar {
  width: 64px;
  aspect-ratio: 1;
  flex-shrink: 0;
  font-size: 1.9rem;
  border-radius: 50%;
}

/* Tints are still emitted by the Tint() page helpers. Kept, but
   pulled toward one warm family so grids read as a set. */
.tile-tint-1,
.tile-tint-5 { background: var(--primary-soft); color: var(--primary); }
.tile-tint-2 { background: var(--amber-soft);   color: #9A6614; }
.tile-tint-3 { background: var(--emerald-soft); color: var(--emerald); }
.tile-tint-4 { background: var(--info-soft);    color: var(--info); }
.tile-tint-6 { background: var(--danger-soft);  color: var(--danger); }

/* ── Food card ─────────────────────────────────────────────── */
.card-link {
  display: block;
  height: 100%;
  color: inherit;
}

.card-link:hover { text-decoration: none; color: inherit; }

.food-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}

.food-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.food-card-body {
  padding: 16px 18px 18px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Title left, rating right. */
.food-card-top {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
}

.food-card-title {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--ink);
}

.food-card-meta {
  font-size: var(--text-xs);
  color: var(--muted);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.food-card-meta .sep { opacity: .5; }

.food-card-meta .star { color: var(--amber); }

.food-card-desc {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* Price left, action right, pinned to the bottom of the card. */
.food-card-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  padding-top: 10px;
}

.food-card .price { margin-top: auto; padding-top: 8px; }

.food-card-foot .price { margin-top: 0; padding-top: 0; }

/* Rating pill used on cards and detail heads. */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--ink);
  white-space: nowrap;
}

.rating .star { color: var(--amber); }

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Price ─────────────────────────────────────────────────── */
.price {
  font-weight: 800;
  font-size: var(--text-lg);
  color: var(--ink);
  letter-spacing: -.02em;
}

.price-lg { font-size: var(--text-2xl); }

/* Minimum-order pricing: headline total stacked over the unit-price explainer. */
.price-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: auto;
  padding-top: 8px;
}

.food-card-foot .price-stack { margin-top: 0; padding-top: 0; }

.food-card .price-stack .price { margin-top: 0; padding-top: 0; }

.price-note {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

.price-note--lg { font-size: var(--text-sm); margin-top: 2px; }

/* ── Cook / kitchen cards ──────────────────────────────────── */
.cook-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: box-shadow .2s, transform .2s;
}

.cook-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.cook-name { font-weight: 700; font-size: var(--text-base); color: var(--ink); }

.cook-specialty { font-size: var(--text-sm); color: var(--muted); }

/* ── Chips & pills ─────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  background: var(--surface-warm);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-weight: 500;
}

.chip-warn { background: var(--amber-soft); color: #9A6614; }

.pill-open,
.pill-closed {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 13px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
}

.pill-open { background: var(--emerald-soft); color: var(--emerald); }
.pill-closed { background: var(--danger-soft); color: var(--danger); }

.pill-open::before,
.pill-closed::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Steps (how it works) ──────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
}

.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 32px 24px;
  text-align: center;
}

.step-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  font-weight: 800;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
}

.step h3 { font-size: var(--text-base); margin-bottom: 6px; }

.step p { font-size: var(--text-sm); color: var(--muted); }

/* ── CTA band ──────────────────────────────────────────────── */
.cta-band {
  background: var(--emerald);
  border-radius: var(--radius-lg);
  padding: 44px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.customer-app .cta-band h2 { color: #fff; font-size: var(--text-2xl); max-width: 24ch; }

.cta-band p { color: rgba(255, 255, 255, .85); margin-top: 8px; max-width: 48ch; }

.customer-app .cta-band .btn {
  background: #fff;
  color: var(--emerald-dark);
  border-color: transparent;
}

.customer-app .cta-band .btn:hover { background: var(--surface-warm); color: var(--emerald-dark); }

@media (max-width: 640px) {
  .cta-band { padding: 32px 24px; }
}

/* ── Launch promo banner ──────────────────────────────────── */
/* Sits full-width under the hero now that the hero is one
   centred column, so it lays out horizontally. */
.launch-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 24px 28px;
}

.launch-banner-copy { flex: 1 1 420px; min-width: 0; }

.launch-banner-eyebrow {
  font-weight: 700;
  color: var(--primary);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.launch-banner-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-7);
}

.launch-banner-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.launch-banner-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
}

.launch-banner-item strong {
  display: block;
  font-size: var(--text-base);
  color: var(--ink);
}

.launch-banner-item p {
  color: var(--muted);
  font-size: var(--text-xs);
  margin: 1px 0 0;
}

.launch-banner-action { flex: none; text-align: center; }

.launch-banner-fineprint {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: var(--space-2);
}

@media (max-width: 640px) {
  .launch-banner { padding: 22px; }
  .launch-banner-action { width: 100%; }
  .launch-banner-cta { width: 100%; }
}

/* ── Notes & empty states ──────────────────────────────────── */
.note,
.note-success {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.note { background: var(--surface-warm); color: var(--ink-soft); }

.note-success { background: var(--success-soft); color: var(--success); }

.empty-state {
  text-align: center;
  padding: 56px 24px;
  color: var(--muted);
}

.empty-state .empty-icon { font-size: 2.6rem; margin-bottom: 12px; }

.empty-state h3 { color: var(--ink); margin-bottom: 6px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
}

.back-link:hover { color: var(--primary); text-decoration: none; }

/* ── Filter panel (Browse) ─────────────────────────────────── */
.filter-panel {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.filter-panel h5 { font-size: 1.05rem; margin-bottom: var(--space-4); }

.filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  color: var(--ink);
  font: inherit;
}

/* Only the toggle button itself takes up collapsed-state height, so the gap
   before the filter fields should only exist once they're actually shown —
   otherwise the panel keeps that space even while collapsed. */
.filter-toggle[aria-expanded="true"] { margin-bottom: var(--space-4); }

.filter-toggle-icon { flex: none; color: var(--ink-soft); transition: transform var(--transition); }

.filter-toggle[aria-expanded="true"] .filter-toggle-icon { transform: rotate(180deg); }

.filter-label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-600);
  margin: var(--space-5) 0 10px;
}

.filter-label:first-of-type { margin-top: 0; }

.filter-hint {
  font-size: .78rem;
  line-height: 1.4;
  color: var(--muted);
  margin: -4px 0 8px;
}

.filter-panel .form-check { margin-bottom: 6px; }

.filter-panel .form-check-label { font-size: .9rem; }

.food-item-card.hidden { display: none; }

@media (max-width: 767px) {
  .filter-panel { position: static; margin-bottom: var(--space-5); }
}

/* ── Item detail ───────────────────────────────────────────── */
.seller-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-5);
}

.seller-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.seller-card-head .name { font-weight: 700; color: var(--brown-dark); }

.seller-card-head .meta { font-size: .85rem; color: var(--gray-600); }

.rating-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  color: var(--gray-600);
}

.rating-summary .star { color: var(--yellow); }

.rating-summary strong { color: var(--text); }

.detail-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.fact-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray-600);
}

.fact-value { font-size: .92rem; color: var(--text); margin-top: 2px; }

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
}

.qty-control button {
  width: 40px;
  height: 40px;
  border: none;
  background: var(--white);
  color: var(--brown-mid);
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition);
}

.qty-control button:hover { background: var(--surface-warm); }

/* The minus button is disabled at the item's minimum order quantity — it has to read as
   unavailable, not just fail to respond. */
.qty-control button:disabled {
  color: var(--gray-400);
  cursor: not-allowed;
}

.qty-control button:disabled:hover { background: var(--white); }

.qty-control .qty-display,
.qty-control input {
  width: 46px;
  text-align: center;
  border: none;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  background: var(--white);
}

.review-card {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  height: 100%;
}

.review-card .reviewer { font-weight: 700; font-size: .92rem; color: var(--brown-dark); }

.review-card .stars { color: var(--yellow); font-size: .85rem; }

.review-card p { font-size: .9rem; color: var(--gray-600); margin-top: 8px; }

/* ── Kitchen storefront ────────────────────────────────────── */
.kitchen-hero {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-top: var(--space-6);
}

.kitchen-hero .kitchen-address { font-size: .9rem; color: var(--gray-600); margin-top: 4px; }

.kitchen-hero .kitchen-desc { font-size: .95rem; color: var(--gray-600); margin-top: var(--space-3); }

@media (max-width: 576px) {
  .kitchen-hero { flex-direction: column; }
}

/* ── Cart ──────────────────────────────────────────────────── */
.cart-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  align-items: flex-start;
}

.cart-item-details { flex-grow: 1; min-width: 0; }

.cart-item-name { font-weight: 700; color: var(--brown-dark); }

.cart-item-name a,
.cart-item-cook a { color: inherit; }

.cart-item-name a:hover,
.cart-item-cook a:hover { text-decoration: underline; }

.cart-item-cook { font-size: .86rem; color: var(--gray-600); margin-bottom: 4px; }

.cart-item-price { font-size: .86rem; color: var(--gray-600); margin-bottom: 10px; }

.cart-item-prep { font-size: .86rem; color: var(--gray-600); margin-bottom: 4px; }

.cart-item-min { font-size: .86rem; color: var(--gray-600); margin-bottom: 4px; }

.cart-item-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.cart-line-total { font-weight: 800; color: var(--brown-mid); white-space: nowrap; }

.btn-remove {
  border: none;
  background: none;
  color: var(--gray-600);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.btn-remove:hover { color: var(--red); background: var(--red-pale); }

/* ── Summary card (cart + checkout + confirmation) ─────────── */
.summary-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.summary-card--sticky { position: sticky; top: calc(var(--header-h) + 20px); }

.summary-card h5 { font-size: 1.05rem; margin-bottom: var(--space-4); }

.summary-card .btn { padding-left: 12px; padding-right: 12px; }

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 8px 0;
  font-size: .92rem;
  color: var(--gray-600);
}

.summary-row span:last-child { color: var(--text); font-weight: 600; white-space: nowrap; }

.summary-row--total {
  border-top: 1.5px solid var(--gray-200);
  margin-top: 8px;
  padding-top: 14px;
  font-size: 1.02rem;
  color: var(--brown-dark);
  font-weight: 700;
}

.summary-row--total span:last-child { color: var(--brown-mid); font-weight: 800; font-size: 1.15rem; }

.benefit-list {
  list-style: none;
  /* list-style:none leaves the UA's padding-inline-start, which indents the list away from the
     summary rows above it — zero it so the checkmarks align with Subtotal/Total. */
  padding: 0;
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: .84rem;
  color: var(--gray-600);
}

.benefit-list li::before { content: '✓  '; color: var(--green); font-weight: 700; }

/* ── Checkout ──────────────────────────────────────────────── */
.checkout-section {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-5);
}

.checkout-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.checkout-section-head h3 { font-size: 1.15rem; margin: 0; }

.section-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-group-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 576px) {
  .form-group-row { grid-template-columns: 1fr; }
}

.option-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  cursor: pointer;
  margin-bottom: var(--space-3);
  transition: border-color var(--transition), background var(--transition);
}

.option-card:hover { border-color: var(--ink-soft); }

.option-card:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.option-card:focus-within { box-shadow: 0 0 0 3px var(--primary-soft); }

.option-card input { margin-top: 3px; accent-color: var(--primary); }

.option-card .option-title { font-weight: 700; font-size: var(--text-sm); color: var(--ink); }

.option-card .option-desc { font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }

/* ── Order confirmation ────────────────────────────────────── */
.success-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success);
  font-size: 2rem;
  font-weight: 700;
}

@keyframes pulse {
  0%   { transform: scale(.5); opacity: 0; }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.order-success-icon { animation: pulse .6s; }

.timeline {
  list-style: none;
  display: flex;
  justify-content: space-between;
  position: relative;
  margin: var(--space-6) 0;
  padding: 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--gray-200);
}

.timeline-node {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
  font-size: .8rem;
  color: var(--gray-600);
}

.timeline-node::before {
  content: '';
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gray-200);
}

.timeline-node.is-done::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--emerald);
  border-color: var(--emerald);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
}

.timeline-node.is-active { color: var(--ink); font-weight: 700; }

.timeline-node.is-active::before {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.btn-row {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-6);
}

/* ── Prose & error pages ───────────────────────────────────── */
.prose { max-width: 720px; padding: var(--space-7) 0; }

.prose h1 { margin-bottom: var(--space-5); }

.prose h2 { font-size: 1.2rem; margin: var(--space-6) 0 var(--space-3); }

.prose h3 { font-size: var(--text-base); margin: var(--space-5) 0 var(--space-2); }

.prose code {
  font-size: .9em;
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

.prose p { color: var(--gray-600); margin-bottom: var(--space-3); }

.error-panel {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  text-align: center;
}

.error-panel .error-icon { font-size: 3rem; margin-bottom: var(--space-4); }

.error-panel p { color: var(--gray-600); margin: var(--space-3) 0 var(--space-5); }

.error-panel code {
  display: block;
  font-size: .8rem;
  color: var(--gray-600);
  background: var(--gray-100);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: var(--space-5);
  word-break: break-all;
}

/* ── Bootstrap repaints (scoped) ───────────────────────────── */
.customer-app .btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: transparent;
}

.customer-app .btn-primary:hover,
.customer-app .btn-primary:focus,
.customer-app .btn-primary:active {
  background: var(--primary-dark);
  border-color: transparent;
  color: #fff;
}

.customer-app .btn-outline {
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
}

.customer-app .btn-outline:hover { border-color: var(--ink-soft); background: var(--surface); }

.customer-app .form-control,
.customer-app .form-select {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  padding: 11px 14px;
}

.customer-app .form-control:focus,
.customer-app .form-select:focus,
.customer-app .form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.customer-app .form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Accordion (FAQ + city pages) — Bootstrap ships a blue active
   state; re-point its own custom properties at our palette. */
.customer-app .accordion {
  --bs-accordion-color: var(--ink-soft);
  --bs-accordion-bg: var(--surface);
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: var(--radius);
  --bs-accordion-inner-border-radius: var(--radius);
  --bs-accordion-btn-color: var(--ink);
  --bs-accordion-btn-bg: var(--surface);
  --bs-accordion-btn-font-size: var(--text-base);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--primary-soft);
  --bs-accordion-active-color: var(--primary);
  --bs-accordion-active-bg: var(--primary-soft);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236E6862'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C84B31'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.customer-app .accordion-button { font-weight: 600; }

.customer-app .accordion-button:not(.collapsed) { box-shadow: none; }

/* Modal (kitchen-conflict prompt on item detail). */
.customer-app .modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.customer-app .modal-header,
.customer-app .modal-footer { border-color: var(--line); }

/* Alerts. */
.customer-app .alert {
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

.customer-app .alert-danger { background: var(--danger-soft); color: var(--danger); }
.customer-app .alert-success { background: var(--success-soft); color: var(--success); }
.customer-app .alert-warning { background: var(--amber-soft); color: #9A6614; }
.customer-app .alert-info { background: var(--info-soft); color: var(--info); }

/* ── Homepage 5-col grid helper ────────────────────────────── */
.col-lg-2-4 { flex: 0 0 calc(20% - 0.75rem); }

@media (max-width: 1200px) {
  .col-lg-2-4 { flex: 0 0 calc(33.333% - 0.75rem); }
}

@media (max-width: 768px) {
  .col-lg-2-4 { flex: 0 0 calc(50% - 0.75rem); }
}

@media (max-width: 576px) {
  .col-lg-2-4 { flex: 0 0 100%; }
}

/* ── Cart toast ─────────────────────────────────────────────── */
.cart-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}

.cart-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Cookie consent ─────────────────────────────────────────── */
/* Non-modal by design: no backdrop and no focus trap, so the site stays
   fully usable while the banner is open (a cookie wall is not valid
   consent). Sits above the sticky header (1020) but below Bootstrap's
   modal layer (1055) so the kitchen-conflict modal still wins. */
.cookie-banner {
  position: fixed;
  z-index: 1030;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  margin: 0 auto;
  max-width: 640px;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px 24px;
  animation: cookie-banner-in .28s ease both;
}

.cookie-banner[hidden] { display: none; }

.cookie-banner-body { flex: 1 1 300px; min-width: 0; }

.cookie-banner-body strong {
  display: block;
  color: var(--ink);
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.cookie-banner-body p {
  color: var(--muted);
  font-size: var(--text-sm);
  margin: 0;
}

.cookie-banner-body a {
  color: var(--primary);
  text-decoration: underline;
  white-space: nowrap;
}

/* Equal-weight buttons — declining must be no harder than accepting. */
.cookie-banner-actions {
  flex: none;
  display: flex;
  gap: var(--space-2);
}

@keyframes cookie-banner-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { animation: none; }
}

@media (max-width: 640px) {
  .cookie-banner { padding: 18px 20px; gap: var(--space-4); }
  .cookie-banner-actions { width: 100%; }
  .cookie-banner-actions .btn { flex: 1 1 0; }
}

/* Footer "Cookie settings" — a button, because it acts rather than
   navigates, painted to match the links beside it. */
.footer-link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.footer-link-btn:hover { color: #fff; }