/* ==========================================================================
   CHICKEN-N-CHAPLI — Design tokens
   Warm Afghan-inspired halal fast-food palette: cream surfaces, charcoal
   grounding, chili red as the primary restrained accent (CTAs, price
   emphasis), saffron gold and Afghan green used sparingly for hierarchy
   and small moments of personality — not as competing brand colors.
   Change these first to adjust the whole site's look.
   ========================================================================== */

:root {
  /* Color — warm Afghan/halal-fast-food palette: cream + charcoal grounding,
     chili red as the primary accent, saffron gold and Afghan green used
     sparingly for hierarchy and small moments of personality. */
  --ink:          #25231F;   /* charcoal — header/footer chrome, dark text */
  --ink-soft:     #332F27;   /* elevated dark surface (chrome only, not content sections) */
  --ink-line:     #4A4438;   /* hairline borders on dark */
  --paper:        #FBF4E4;   /* warm cream — main background */
  --paper-soft:   #F2E6CB;   /* deeper warm cream — elevated surface (cards) */
  --paper-line:   #E4D3A8;   /* warm neutral border */
  --chili:        #B9362B;   /* primary accent — CTAs, price emphasis */
  --chili-dark:   #8F281F;   /* chili hover state */
  --saffron:      #D89A2B;   /* saffron gold — secondary accent, used sparingly */
  --saffron-dark: #B97F1F;
  --green:        #176B45;   /* Afghan green — halal/trust accent, used sparingly */
  --green-dark:   #10502F;
  --text-on-ink:      #FBF4E4;
  --text-on-ink-soft: #C9C2AC;
  --text-on-paper:      #25231F;
  --text-on-paper-soft: #6E6752;

  /* Type */
  --font-display: "Khand", "Arial Narrow", "Arial Black", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Layout */
  --max-width: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;
  --radius-sm: 8px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-on-paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; cursor: pointer; background: none; border: none; }
input, textarea { font: inherit; }

:focus-visible { outline: 2px solid var(--chili); outline-offset: 3px; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.section-dark { background: var(--ink); color: var(--text-on-ink); }
.section-light { background: var(--paper); color: var(--text-on-paper); }

/* ==========================================================================
   Typography
   ========================================================================== */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chili);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.section-dark .eyebrow { color: var(--saffron); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; }

.display-1 { font-size: clamp(2.75rem, 8.5vw, 5.75rem); line-height: 0.95; }
.display-2 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1; }
.section-title { font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.05; margin-bottom: 1.75rem; }
.lede {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-on-paper-soft);
  max-width: 46ch;
}
.section-dark .lede { color: var(--text-on-ink-soft); }

em.accent { font-style: normal; color: var(--chili); }
.section-dark em.accent { color: var(--saffron); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.95rem 1.75rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-fill { background: var(--chili); color: #fff; }
.btn-fill:hover { background: var(--chili-dark); }
.btn-secondary { background: var(--green); color: #fff; }
.btn-secondary:hover { background: var(--green-dark); }
.btn-outline { border-color: currentColor; color: inherit; }
.btn-outline:hover { background: currentColor; }
.btn-outline:hover { color: var(--paper); }
.section-light .btn-outline:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.section-dark .btn-outline:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.btn-ghost { color: var(--chili); padding-left: 0.5rem; padding-right: 0.5rem; }
.btn-ghost:hover { text-decoration: underline; }
.btn-block { width: 100%; }
.btn-lg { padding: 1.1rem 2.2rem; font-size: 0.9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* ==========================================================================
   Header / nav
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 1rem 0;
  background: transparent;
  transition: background-color 0.3s var(--ease), padding 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled {
  background: var(--paper);
  padding: 0.65rem 0;
  box-shadow: 0 2px 14px rgba(37,35,31,0.08);
  border-bottom: 1px solid var(--paper-line);
}
.site-header.is-scrolled .wordmark { color: var(--text-on-paper); }
.site-header.is-scrolled .main-nav a { color: var(--text-on-paper-soft); }
.site-header.is-scrolled .main-nav a:hover { color: var(--text-on-paper); }
.site-header.is-scrolled .cart-btn { color: var(--text-on-paper); }
.site-header.is-scrolled .nav-toggle span,
.site-header.is-scrolled .nav-toggle span::before,
.site-header.is-scrolled .nav-toggle span::after { background: var(--text-on-paper); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav-wrap { display: flex; align-items: center; gap: 1.5rem; }

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--text-on-ink);
  letter-spacing: 0.01em;
  line-height: 1;
  display: flex;
  align-items: baseline;
}
.wordmark .wordmark-accent { color: var(--chili); }

.main-nav { display: flex; align-items: center; gap: 2rem; }
.main-nav a {
  color: var(--text-on-ink-soft);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease);
}
.main-nav a:hover { color: var(--text-on-ink); }

.nav-cta {
  background: var(--chili);
  color: #fff !important;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  transition: background-color 0.2s var(--ease);
}
.nav-cta:hover { background: var(--chili-dark); }

.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-on-ink);
}
.cart-btn svg { width: 22px; height: 22px; }
.cart-count {
  position: absolute;
  top: -7px; right: -10px;
  background: var(--saffron);
  color: var(--ink);
  font-size: 0.65rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.cart-count[hidden] { display: none; }

/* ==========================================================================
   Compact ordering-page header (order-online.html — v2 experience)
   Simple identity bar instead of the marketing site's full nav: name,
   address/phone, cart, and a link back to the full site.
   ========================================================================== */

.order-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--paper-line);
  padding: 0.85rem 0;
}
.order-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.order-header-identity { display: flex; flex-direction: column; gap: 0.1rem; }
.order-header-identity .wordmark { color: var(--text-on-paper); font-size: 1.15rem; }
.order-header-meta { font-size: 0.78rem; color: var(--text-on-paper-soft); }
.order-header-actions { display: flex; align-items: center; gap: 1rem; }
.order-header-back { font-size: 0.78rem; font-weight: 600; color: var(--text-on-paper-soft); }
.order-header-back:hover { color: var(--chili); }
.order-header .cart-btn { color: var(--text-on-paper); }

.nav-toggle {
  display: none;
  width: 32px; height: 22px;
  position: relative;
  /* Must outrank .main-nav's z-index (210) so the button stays clickable
     to close the flyout — both are children of .site-header's own
     stacking context, so .site-header's z-index alone doesn't help. */
  z-index: 211;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: "";
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--text-on-ink);
  position: absolute;
  left: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span { top: 10px; }
.nav-toggle span::before { top: -8px; }
.nav-toggle span::after { top: 8px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(80vw, 340px);
    background: var(--paper);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem;
    padding: 2rem var(--gutter);
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    border-left: 1px solid var(--paper-line);
    box-shadow: -12px 0 32px rgba(37,35,31,0.12);
    z-index: 210;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav a { font-size: 1.1rem; color: var(--text-on-paper-soft); }
  .main-nav a:hover { color: var(--text-on-paper); }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: center;
  color: var(--text-on-ink);
  background: var(--ink);
  overflow: hidden;
  padding-top: 4.5rem;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.62; }
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(37,35,31,0.5) 0%, rgba(37,35,31,0.55) 45%, rgba(37,35,31,0.97) 100%);
}
.hero-content { position: relative; z-index: 1; width: 100%; padding: 3rem 0; }
.hero-eyebrow { color: var(--saffron); margin-bottom: 1rem; }
.hero-title { margin-bottom: 1.25rem; }
.hero-title .line2 { display: block; color: var(--saffron); }
.hero-sub {
  max-width: 40ch;
  color: var(--text-on-ink-soft);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin-bottom: 2rem;
}
.hero-actions { margin-bottom: 2rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-line); }
.hero-badges span { font-size: 0.8rem; color: var(--text-on-ink-soft); display: inline-flex; align-items: center; gap: 0.5em; }
.hero-badges strong { color: var(--text-on-ink); font-weight: 700; }

/* Mobile hero: photo fills the hero (object-fit: cover keeps its
   proportions), focused on the center of the spread; all copy centered
   with a real side gutter (.hero-content's own padding otherwise zeroes
   the .container gutter); a single Order Now CTA. Desktop is untouched. */
@media (max-width: 640px) {
  .hero-media img { object-position: 50% 45%; }
  .hero-content { padding: 2.5rem var(--gutter); text-align: center; }
  .hero-eyebrow { justify-content: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; margin-bottom: 0; }
  .hero-actions .hero-secondary { display: none; }
}
@media (max-width: 360px) {
  .hero-title { font-size: 2.4rem; }
}

/* Homepage sections shown on desktop only (Popular Picks, The Full Menu
   preview, Hungry Yet?) — removed from the mobile homepage. */
@media (max-width: 640px) {
  .desktop-only { display: none; }
}

/* ==========================================================================
   Section rhythm
   ========================================================================== */

.section { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

/* ==========================================================================
   Trust strip (Halal / Fresh / Fast) — replaces a long "our story"
   ========================================================================== */

.trust-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; text-align: center; }
.trust-item { display: flex; flex-direction: column; align-items: center; gap: 0.65rem; }
.trust-item svg { width: 34px; height: 34px; color: var(--chili); }
.trust-item:first-child svg { color: var(--green); }
.trust-item strong { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; }
.trust-item span { font-size: 0.85rem; color: var(--text-on-paper-soft); }
@media (max-width: 640px) {
  .trust-strip { grid-template-columns: 1fr; gap: 2rem; }
}

/* ==========================================================================
   Afghan-inspired motifs — restrained, CSS/SVG only, used sparingly
   (a divider under a few hero eyebrows, a faint pattern on a couple of
   flat cream sections, a small corner mark on the brand-story panel).
   Not meant to be a loud or literal cultural reference — just texture.
   ========================================================================== */

.motif-divider {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 14px;
  margin: 1rem auto 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='16'%3E%3Cpath d='M14 2 L24 8 L14 14 L4 8 Z' fill='none' stroke='%23B9362B' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  opacity: 0.6;
}
.motif-divider--left { margin-left: 0; }

.pattern-bg,
.order-hero,
.menu-page-hero,
.brand-story {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 4 L52 28 L28 52 L4 28 Z' fill='none' stroke='%2325231F' stroke-opacity='0.045' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* ==========================================================================
   Category chip row (homepage menu preview)
   ========================================================================== */

.category-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  background: var(--paper-soft);
  border: 2px solid var(--paper-line);
  font-weight: 700;
  font-size: 0.9rem;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.15s var(--ease);
}
.category-chip:hover { border-color: var(--chili); transform: translateY(-2px); }
.category-chip span[aria-hidden] { display: inline-block; transition: transform 0.2s var(--ease); }
.category-chip:hover span[aria-hidden] { transform: translateX(3px); }

/* ==========================================================================
   Menu cards (used on homepage featured grid AND menu.html)
   ========================================================================== */

.menu-grid, .dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.menu-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  width: 100%;
  padding: 0;
  /* .menu-card is a <button>: without an explicit color its text takes
     the browser's default button color (system blue on iOS Safari). */
  color: var(--text-on-paper);
}
.menu-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(37,35,31,0.14); border-color: var(--chili); }
.menu-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--ink-soft); }
.menu-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.menu-card:hover .menu-card-media img { transform: scale(1.06); }
.menu-card-body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.menu-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.menu-card-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; text-transform: uppercase; line-height: 1.15; letter-spacing: 0.01em; }
.menu-card-price { font-weight: 800; color: var(--chili); white-space: nowrap; }
.menu-card-desc { font-size: 0.85rem; color: var(--text-on-paper-soft); flex: 1; }
.menu-card-add { margin-top: 0.5rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--chili); }
.menu-card-add span[aria-hidden] { display: inline-block; transition: transform 0.2s var(--ease); }
.menu-card:hover .menu-card-add span[aria-hidden] { transform: translateX(3px); }

/* ==========================================================================
   Location / map section
   ========================================================================== */

.map-address { margin-top: 0.5rem; color: var(--text-on-paper-soft); }
.map-phone { margin-top: 0.35rem; }
.map-phone a { font-weight: 700; }
.map-phone a:hover { color: var(--chili); }
/* initMapSection() output (home/order/order-online) reads as a short,
   simple call-out rather than a data table — center it. Scoped to
   [data-map-section] so it doesn't touch locations.html's own
   label/value .info-row layout, which should stay left-aligned. */
[data-map-section] .location-full-body { text-align: center; }
[data-map-section] .location-full-body .eyebrow { justify-content: center; }
[data-map-section] .location-full-body .btn-row {
  justify-content: center;
  /* The heading's own margin-bottom (1.75rem) creates the gap above the
     address/phone block; mirror it below so that block reads as centered
     between the heading and the buttons instead of hugging the buttons. */
  margin-top: 1.75rem;
}

.locations-full-grid { display: grid; gap: 3rem; }
.location-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  scroll-margin-top: 100px;
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  overflow: hidden;
  padding: 2rem;
}
@media (min-width: 860px) {
  .location-full { grid-template-columns: 1fr 1.1fr; align-items: center; padding: 0; }
  .location-full-body { padding: 2.5rem; }
}
.location-full-media { aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; }
.location-full-media iframe { width: 100%; height: 100%; border: 0; }

.info-row { display: flex; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--paper-line); }
.info-row:last-of-type { border-bottom: 1px solid var(--paper-line); }
.info-row .label { width: 6rem; flex-shrink: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--chili); padding-top: 0.2rem; }
.info-row .value a:hover { color: var(--chili); }
.hours-table td { padding: 0.1rem 0; font-size: 0.92rem; }
.hours-table td:first-child { color: var(--text-on-paper-soft); padding-right: 1.25rem; }
.hours-note { margin-top: 0.5rem; font-size: 0.78rem; color: var(--text-on-paper-soft); }

.order-buttons-block { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--paper-line); }
.order-buttons-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.9rem; }
.order-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.btn-provider { color: #fff; transition: filter 0.2s var(--ease), transform 0.15s var(--ease); }
.btn-provider:hover { filter: brightness(0.92); transform: translateY(-1px); }
.provider-ubereats { background: #06C167; }
.provider-doordash { background: #FF3008; }
.provider-grubhub { background: #F63440; }
.order-provider-note { font-size: 0.78rem; color: var(--text-on-paper-soft); width: 100%; margin-top: 0.25rem; }

/* Direct-order CTA — emphasized over the third-party providers below it:
   cheaper for the customer (no delivery-platform fees) and better for the
   restaurant (no commission). Pickup only, stated explicitly. */
.direct-order-highlight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.5rem;
  width: 100%;
  background: var(--paper-soft);
  border: 2px solid var(--chili);
  border-radius: var(--radius);
}
.direct-order-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--saffron);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.direct-order-note { font-size: 0.85rem; color: var(--text-on-paper-soft); }
.provider-row-label { font-size: 0.8rem; color: var(--text-on-paper-soft); margin: 0; }
.provider-buttons-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
@media (max-width: 520px) {
  .direct-order-highlight .btn { width: 100%; }
}

/* ==========================================================================
   Locations — cards (homepage #locations, locations.html), the
   "Ordering from: X — Change Location" bar, and pickup-location lines.
   Every location uses the same card so they read as equals.
   ========================================================================== */

/* initMapSection() hides this until a pickup location is chosen — the
   class sets display:grid, so [hidden] needs its own rule (see the
   "Known CSS gotcha" in CLAUDE.md). */
.location-full[hidden] { display: none; }

.location-cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 760px) { .location-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.location-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-margin-top: 100px;
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s var(--ease);
}
.location-card.is-active { border-color: var(--chili); box-shadow: inset 0 0 0 1px var(--chili); }
.location-card-map { aspect-ratio: 16 / 9; background: var(--paper-line); }
.location-card-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.location-card-body { display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(1.25rem, 4vw, 2rem); flex: 1; }
.location-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.location-card-name { font-size: clamp(1.7rem, 4vw, 2.1rem); line-height: 1; margin: 0; }
.location-card-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--green);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.location-card-address a { color: var(--text-on-paper); line-height: 1.45; }
.location-card-address a:hover { color: var(--chili); text-decoration: underline; }
/* Phone is a real tap target on phones, not just inline text. */
.location-card-phone a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--chili);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* "Restaurant Hours" vs "Online Ordering Hours" — they differ. */
.location-card-hours-label {
  margin-bottom: -0.5rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-paper-soft);
}
.location-card-hours { border-collapse: collapse; }
.location-card-hours td { vertical-align: top; }
.location-card .hours-note { margin-top: -0.4rem; }
.location-card-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: auto; padding-top: 0.5rem; }
.location-card-actions .btn { flex: 1 1 10rem; min-height: 48px; }
.location-card-delivery { font-size: 0.82rem; color: var(--text-on-paper-soft); }
.location-card-delivery a { color: var(--text-on-paper); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 0.35rem 0; }
.location-card-delivery a:hover { color: var(--chili); }
@media (max-width: 480px) {
  .location-card-actions .btn { flex-basis: 100%; }
}

/* ---------- Ordering-from bar ---------- */
.location-bar-section { padding-top: 1.25rem; padding-bottom: 0.25rem; }
.location-bar-wrap { margin-bottom: 1.75rem; }
.location-bar-section .location-bar-wrap { margin-bottom: 0; }
.location-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-left: 4px solid var(--chili);
  border-radius: var(--radius-sm);
}
.location-bar-current { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.location-bar-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chili);
}
.location-bar-name { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; text-transform: uppercase; }
.location-bar-addr { font-size: 0.85rem; color: var(--text-on-paper-soft); overflow-wrap: anywhere; }
.location-bar-change {
  min-height: 44px;
  padding: 0 0.25rem;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--chili);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.location-bar-change:hover { color: var(--chili-dark); }
.location-bar-change[aria-expanded="true"] { text-decoration: none; }
.location-bar-notice { flex-basis: 100%; font-size: 0.85rem; color: var(--chili-dark); }
.location-bar.is-unset { flex-direction: column; align-items: stretch; border-left-color: var(--saffron); }
.location-bar-prompt { font-weight: 800; font-size: 0.95rem; }

.location-choices { flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.location-choices[hidden] { display: none; }
@media (max-width: 520px) { .location-choices { grid-template-columns: 1fr; } }
.location-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  min-height: 56px;
  padding: 0.85rem 1rem;
  text-align: left;
  background: var(--paper);
  border: 2px solid var(--paper-line);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s var(--ease);
}
.location-choice:hover { border-color: var(--chili); }
.location-choice[aria-pressed="true"] { border-color: var(--chili); background: var(--paper-soft); }
.location-choice-name { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.05; text-transform: uppercase; }
.location-choice-addr { font-size: 0.82rem; color: var(--text-on-paper-soft); overflow-wrap: anywhere; }

/* order.html: before a location is chosen this is THE first step — larger. */
.location-bar-wrap--large .location-bar.is-unset { padding: 1.5rem; }
.location-bar-wrap--large .location-bar-prompt { font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 1.9rem); text-transform: uppercase; }
.location-bar-wrap--large .location-choice { min-height: 88px; padding: 1.1rem 1.25rem; }
.location-bar-wrap--large .location-choice-name { font-size: 1.6rem; }

/* ---------- Pickup location lines (checkout, confirmation, tracking, cart) ---------- */
.checkout-pickup {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 1.25rem 0 0.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-left: 4px solid var(--chili);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  text-align: left;
}
.checkout-pickup[hidden] { display: none; }
.checkout-pickup[data-unset="true"] { border-left-color: var(--saffron); }
.checkout-pickup-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--chili); }
.checkout-pickup strong { font-size: 1.05rem; }
.checkout-pickup a { font-weight: 700; text-decoration: underline; }
.checkout-pickup--confirmed { margin-top: 1.1rem; }
.checkout-pickup--confirmed a { display: inline-flex; align-items: center; min-height: 44px; color: var(--chili); }
.checkout-pay-note { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--text-on-paper-soft); }
.cart-location { font-size: 0.85rem; color: var(--text-on-paper-soft); margin-bottom: 0.75rem; }
.cart-location strong { color: var(--text-on-paper); }

/* ==========================================================================
   Order page — location picker + direct-order demo
   ========================================================================== */

.order-hero { padding-top: 8rem; padding-bottom: 2.5rem; background: var(--paper-soft); color: var(--text-on-paper); text-align: center; border-bottom: 1px solid var(--paper-line); }
.order-hero .lede { margin: 0.75rem auto 0; }

.location-picker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (max-width: 720px) { .location-picker-grid { grid-template-columns: 1fr; } }

.location-pick-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  text-align: left;
  padding: 2rem;
  background: var(--paper-soft);
  border: 2px solid var(--paper-line);
  border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
  width: 100%;
}
.location-pick-card:hover { border-color: var(--chili); transform: translateY(-3px); }
.location-pick-name { font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; text-transform: uppercase; }
.location-pick-addr { color: var(--text-on-paper-soft); }
.location-pick-cta { margin-top: 0.5rem; font-weight: 700; color: var(--chili); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.03em; }

.order-result-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.order-result-location { font-size: 1.05rem; font-weight: 700; }

.direct-order-panel {
  margin-top: 3rem;
  padding: 2rem;
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  color: var(--text-on-paper);
  border-radius: var(--radius);
  text-align: center;
}
.direct-order-panel .section-title { margin-bottom: 0.75rem; }
.direct-order-panel .lede { margin: 0 auto 1.5rem; color: var(--text-on-paper-soft); }
.prototype-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--saffron);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

/* ---------- Checkout preview ---------- */
.checkout-preview {
  margin-top: 2.5rem;
  padding: 1.75rem;
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
  scroll-margin-top: 100px;
}
.checkout-preview-title { font-size: 1.2rem; margin-bottom: 1rem; }
.checkout-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.checkout-line { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; padding-bottom: 0.6rem; border-bottom: 1px dashed var(--paper-line); }
.checkout-line em { font-style: normal; color: var(--text-on-paper-soft); font-size: 0.82rem; }
.checkout-totals { margin-top: 0.25rem; }
.checkout-total-row { display: flex; justify-content: space-between; font-size: 0.95rem; padding: 0.3rem 0; color: var(--text-on-paper-soft); }
.checkout-total-row-grand {
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text-on-paper);
  padding-top: 0.75rem;
  margin-top: 0.35rem;
  border-top: 1px solid var(--paper-line);
}
.checkout-empty { color: var(--text-on-paper-soft); text-align: center; padding: 1rem 0; }

/* ---------- Checkout form (customer info + Place Order) ---------- */
.checkout-field { margin-top: 1.1rem; }
.checkout-field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-paper-soft);
  margin-bottom: 0.4rem;
}
.checkout-field-optional { text-transform: none; font-weight: 500; letter-spacing: normal; }
.checkout-field input,
.checkout-field select {
  width: 100%;
  padding: 0.85rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 0.95rem;
  color: var(--text-on-paper);
}
.checkout-field input:focus,
.checkout-field select:focus { outline: 2px solid var(--chili); outline-offset: 1px; }
.checkout-field-error { color: var(--chili); font-size: 0.82rem; margin-top: 0.4rem; }
.checkout-form-error {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(185,54,43,0.08);
  border: 1px dashed var(--chili);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-on-paper);
}

/* ---------- Payment choice (Pay Online / Pay at Pickup) ---------- */
.checkout-payment-choice { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.checkout-payment-choice legend {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-paper-soft);
  margin-bottom: 0.4rem;
  padding: 0;
}
/* Overrides the generic .checkout-field label/input rules above. */
.checkout-field label.payment-option {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-on-paper);
  cursor: pointer;
}
.checkout-field label.payment-option[hidden] { display: none; }
.checkout-field label.payment-option:has(input:checked) { border-color: var(--chili); box-shadow: inset 0 0 0 1px var(--chili); }
.checkout-field .payment-option input { width: auto; margin: 0.2rem 0 0; padding: 0; accent-color: var(--chili); }
.payment-option span { display: flex; flex-direction: column; gap: 0.15rem; }
.payment-option small { font-size: 0.82rem; color: var(--text-on-paper-soft); }

.checkout-notice {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(216, 154, 43, 0.12);
  border: 1px dashed var(--saffron);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--text-on-paper);
}
.checkout-processing { text-align: center; padding: 1.5rem 0.5rem; }

/* ---------- Order confirmation ---------- */
.checkout-confirmation { text-align: center; padding: 1.5rem 0.5rem; }
.checkout-confirmation-eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.5rem;
}
.checkout-confirmation-number { font-family: var(--font-display); font-size: 2rem; margin-bottom: 0.75rem; }
.checkout-confirmation-total { font-weight: 800; margin-top: 0.9rem; }
.checkout-confirmation-note { margin-top: 1.1rem; color: var(--text-on-paper-soft); font-size: 0.9rem; }

/* Pay-at-Pickup messaging — shared by the checkout confirmation and the
   order-status tracking page, so the "no online payment collected"
   wording/styling stays identical in both places. */
.checkout-payment-note {
  margin-top: 1.1rem;
  padding: 0.9rem 1.1rem;
  background: rgba(23, 107, 69, 0.08);
  border: 1px dashed var(--green);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-on-paper);
  text-align: left;
}

/* ---------- Order status tracking page (order-status.html) ---------- */
.status-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 2rem;
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius);
}
.status-loading { text-align: center; color: var(--text-on-paper-soft); padding: 2rem 0; }
.status-notfound { text-align: center; }
.status-notfound h2 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.status-header { text-align: center; margin-bottom: 1.75rem; }
.status-header .eyebrow { justify-content: center; }
.status-header h2 { font-family: var(--font-display); font-size: 2.25rem; margin: 0.25rem 0 0.85rem; }
.status-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  color: #fff;
  background: var(--text-on-paper-soft);
}
.status-badge[data-status="NEW"] { background: var(--chili); }
.status-badge[data-status="ACCEPTED"],
.status-badge[data-status="PREPARING"] { background: var(--saffron-dark); }
.status-badge[data-status="READY"] { background: var(--green); }
.status-badge[data-status="REJECTED"],
.status-badge[data-status="CANCELLED"] { background: var(--chili-dark); }

.status-timeline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 0.25rem; margin: 1.75rem 0; }
.status-step { flex: 1 1 18%; min-width: 84px; text-align: center; font-size: 0.78rem; color: var(--text-on-paper-soft); position: relative; padding-top: 1.9rem; }
.status-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--paper-line);
}
.status-step.is-complete { color: var(--text-on-paper); font-weight: 700; }
.status-step.is-complete::before { background: var(--green); border-color: var(--green); }
.status-step.is-current { color: var(--text-on-paper); font-weight: 800; }
.status-step.is-current::before { background: var(--chili); border-color: var(--chili); box-shadow: 0 0 0 4px rgba(185, 54, 43, 0.18); }

.status-terminal-message {
  text-align: center;
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: var(--radius-sm);
  background: rgba(185, 54, 43, 0.08);
  border: 1px dashed var(--chili-dark);
}
.status-terminal-message h3 { margin: 0 0 0.5rem; color: var(--chili-dark); }
.status-terminal-message p { margin: 0; color: var(--text-on-paper); }

@media (max-width: 480px) {
  .status-step { flex-basis: 30%; }
}

/* ==========================================================================
   Item customization modal
   ========================================================================== */

.item-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(37,35,31,0.6);
}
.item-modal.is-open { display: flex; }
.item-modal-panel {
  background: var(--paper);
  width: 100%;
  max-width: 560px;
  max-height: 92svh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  animation: modal-up 0.3s var(--ease);
}
@media (min-width: 640px) {
  .item-modal { align-items: center; }
  .item-modal-panel { border-radius: var(--radius); max-height: 88svh; }
}
@keyframes modal-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.item-modal-media { position: relative; aspect-ratio: 16/9; background: var(--ink-soft); }
.item-modal-media img { width: 100%; height: 100%; object-fit: cover; }
/* No photo for this item yet (see CLAUDE.md) — collapse the media bar to a
   slim warm accent strip instead of a tall flat charcoal block, so the
   modal still feels intentional without a photograph. Needs an explicit
   override per the "Known CSS gotcha" in CLAUDE.md: the global `img {
   display: block }` reset otherwise beats the UA [hidden] rule and a
   broken-image glyph shows through with no src. */
.item-modal-media img[hidden] { display: none; }
.item-modal-media:has(img[hidden]) {
  aspect-ratio: auto;
  height: 56px;
  background: linear-gradient(120deg, var(--paper-soft), var(--saffron) 180%);
}
.item-modal-media:has(img[hidden]) .item-modal-close {
  background: rgba(37,35,31,0.1);
  color: var(--ink);
}
.item-modal-close {
  position: absolute;
  top: 0.9rem; right: 0.9rem;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(37,35,31,0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.item-modal-body { padding: 1.5rem; }
.item-modal-name { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; text-transform: uppercase; margin-bottom: 0.4rem; }
.item-modal-desc { color: var(--text-on-paper-soft); margin-bottom: 1rem; }

.option-group { padding: 1.1rem 0; border-top: 1px solid var(--paper-line); }
.option-group-title { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--chili); margin-bottom: 0.75rem; }
.option-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.25rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.option-row:hover { background: var(--paper-soft); }
.option-row input { width: 18px; height: 18px; accent-color: var(--chili); flex-shrink: 0; }
.option-row span:nth-child(2) { flex: 1; font-size: 0.95rem; }
.option-price { font-size: 0.85rem; color: var(--text-on-paper-soft); font-weight: 600; }

.instructions-group { padding: 1.1rem 0; border-top: 1px solid var(--paper-line); }
.instructions-textarea {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  resize: vertical;
  min-height: 4.5rem;
}

.item-modal-footer {
  position: sticky;
  bottom: 0;
  background: var(--paper);
  border-top: 1px solid var(--paper-line);
  padding: 1rem 1.5rem;
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 1rem;
}
.qty-stepper { display: flex; align-items: center; gap: 0.75rem; background: var(--paper-soft); border: 1px solid var(--paper-line); border-radius: 999px; padding: 0.35rem 0.5rem; }
.qty-btn { width: 30px; height: 30px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s var(--ease); }
.qty-btn-remove { background: var(--chili); }
.qty-btn-remove:hover { background: var(--chili-dark); }
.qty-value { min-width: 1.5rem; text-align: center; font-weight: 700; }
.qty-stepper-sm .qty-btn { width: 24px; height: 24px; font-size: 0.9rem; }

/* ==========================================================================
   Cart drawer
   ========================================================================== */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(37,35,31,0.55);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease);
}
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background: var(--paper);
  z-index: 260;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
  box-shadow: -12px 0 32px rgba(0,0,0,0.2);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--paper-line);
}
.cart-drawer-title { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; }
.cart-drawer-close { font-size: 1.4rem; width: 36px; height: 36px; color: var(--text-on-paper); }

.cart-list { flex: 1; overflow-y: auto; padding: 0.5rem 1.5rem; display: flex; flex-direction: column; gap: 0; }
.cart-line { display: flex; gap: 0.85rem; padding: 1rem 0; border-bottom: 1px solid var(--paper-line); }
.cart-line-img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; background: var(--paper-soft); }
.cart-line-body { flex: 1; min-width: 0; }
.cart-line-top { display: flex; justify-content: space-between; gap: 0.75rem; }
.cart-line-name { font-weight: 700; font-size: 0.92rem; }
.cart-line-price { font-weight: 700; color: var(--chili); white-space: nowrap; font-size: 0.9rem; }
.cart-line-options { font-size: 0.78rem; color: var(--text-on-paper-soft); margin-top: 0.2rem; }
.cart-line-instructions { font-size: 0.78rem; font-style: italic; color: var(--text-on-paper-soft); margin-top: 0.2rem; }
.cart-line-controls { display: flex; align-items: center; margin-top: 0.6rem; }

.cart-empty { padding: 3rem 1.5rem; text-align: center; color: var(--text-on-paper-soft); }

.cart-drawer-footer { padding: 1.25rem 1.5rem; border-top: 1px solid var(--paper-line); }
.cart-subtotal-row { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.15rem; margin-bottom: 1rem; }

/* ==========================================================================
   Sticky mobile cart bar
   ========================================================================== */

.cart-stickybar {
  position: fixed;
  left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
  z-index: 90;
  background: var(--chili);
  color: #fff;
  border-radius: 999px;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(185,54,43,0.4);
}
.cart-stickybar-label { font-weight: 800; font-size: 0.9rem; }
.cart-stickybar-cta { font-weight: 800; text-transform: uppercase; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.35rem; }
.cart-stickybar[hidden] { display: none; }

/* ==========================================================================
   Menu page hero + jump nav
   ========================================================================== */

.menu-page-hero { padding-top: 8rem; padding-bottom: 2rem; background: var(--paper-soft); color: var(--text-on-paper); border-bottom: 1px solid var(--paper-line); }
.menu-jump {
  position: sticky;
  top: calc(58px + var(--ordering-banner-h, 0px));
  z-index: 80;
  background: rgba(251,244,228,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--paper-line);
}
.site-header.is-scrolled ~ main .menu-jump { top: calc(52px + var(--ordering-banner-h, 0px)); }
.order-header ~ .menu-jump { top: calc(66px + var(--ordering-banner-h, 0px)); }
.menu-jump-inner {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 calc(var(--gutter) - 0.6rem);
}
.menu-jump-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0.15rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.menu-jump-row::-webkit-scrollbar { display: none; }
.menu-jump a {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  color: var(--text-on-paper-soft);
  border: 2px solid var(--paper-line);
  transition: all 0.2s var(--ease);
}
.menu-jump a:hover, .menu-jump a.active { color: #fff; background: var(--chili); border-color: var(--chili); }

.menu-jump-arrow {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  color: var(--text-on-paper-soft);
  font-size: 1.2rem;
  line-height: 1;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.menu-jump-arrow:hover { color: var(--chili); border-color: var(--chili); }
.menu-jump-arrow[disabled] { opacity: 0.35; pointer-events: none; }

.menu-category { padding: 2.75rem 0; scroll-margin-top: 130px; }
.menu-category:not(:last-child) { border-bottom: 1px solid var(--paper-line); }
.menu-category-title { display: inline-flex; align-items: center; gap: 0.85rem; }
.menu-category-title::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 3px;
  background: var(--chili);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--paper-soft); color: var(--text-on-paper-soft); padding: 3rem 0 2rem; font-size: 0.88rem; border-top: 1px solid var(--paper-line); }
.footer-grid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--paper-line); }
.footer-wordmark { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--text-on-paper); text-transform: uppercase; }
.footer-links { display: flex; gap: 2rem; flex-wrap: wrap; }
.footer-links a:hover { color: var(--text-on-paper); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; }

/* ==========================================================================
   Sticky mobile nav bar (call / order / directions) — home & static pages
   ========================================================================== */

.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 85;
  display: none;
  background: var(--paper);
  border-top: 1px solid var(--paper-line);
  padding: 0.6rem var(--gutter);
  padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
  box-shadow: 0 -2px 14px rgba(37,35,31,0.08);
}
.mobile-bar-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-on-paper);
  padding: 0.7rem 0;
  border-radius: 999px;
  border: 2px solid var(--paper-line);
}
.mobile-bar a.primary { background: var(--chili); border-color: var(--chili); color: #fff; }

@media (max-width: 720px) {
  .mobile-bar { display: block; }
  body { padding-bottom: 74px; }
}
/* When the cart sticky bar is visible, it takes priority over the plain mobile bar */
body:has(.cart-stickybar:not([hidden])) .mobile-bar { display: none; }
@media (max-width: 720px) {
  body:has(.cart-stickybar:not([hidden])) { padding-bottom: 84px; }
}

/* ==========================================================================
   Scroll reveal + misc utility
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

.final-cta { text-align: center; padding: clamp(4rem, 9vw, 7rem) 0; }
.final-cta .display-1 { margin-bottom: 1.5rem; }
.final-cta .btn-row { justify-content: center; }

/* ==========================================================================
   Brand story — one short "who we are" moment below the hero (see CLAUDE.md:
   no long "our story" section by design, keep this to a couple of sentences)
   ========================================================================== */

.brand-story {
  position: relative;
  text-align: center;
  background-color: var(--paper-soft);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
  overflow: hidden;
}
.brand-story-inner { max-width: 640px; margin: 0 auto; }
.brand-story .section-title { margin-bottom: 1rem; }
.brand-story p { color: var(--text-on-paper-soft); font-size: clamp(1rem, 1.6vw, 1.1rem); }
.brand-story::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 34px;
  height: 34px;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M2 18 A16 16 0 0 1 18 2' fill='none' stroke='%23176B45' stroke-width='2'/%3E%3Ccircle cx='18' cy='2' r='2.3' fill='%23176B45'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.brand-story::after {
  content: "";
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 34px;
  height: 34px;
  opacity: 0.55;
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cpath d='M2 18 A16 16 0 0 1 18 2' fill='none' stroke='%23176B45' stroke-width='2'/%3E%3Ccircle cx='18' cy='2' r='2.3' fill='%23176B45'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
@media (max-width: 560px) {
  .brand-story::before, .brand-story::after { width: 24px; height: 24px; }
}

/* ---------- Ordering status: Sold Out + open/closed (js/ordering-status.js) ---------- */
/* Every element below that sets `display` and is toggled with [hidden]
   gets its own [hidden] rule — see "Known CSS gotcha" in CLAUDE.md. */
.menu-card-soldout {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.menu-card-soldout[hidden] { display: none; }
.menu-card.is-sold-out { opacity: 0.62; }
.menu-card.is-sold-out .menu-card-add { visibility: hidden; }

.location-bar-status {
  flex-basis: 100%;
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--green);
  font-weight: 600;
}
.location-bar-status.is-closed {
  padding: 0.6rem 0.8rem;
  background: rgba(185,54,43,0.08);
  border: 1px dashed var(--chili);
  border-radius: var(--radius-sm);
  color: var(--chili-dark);
}
.location-bar-status[hidden] { display: none; }

.checkout-prep { display: block; margin-top: 0.3rem; font-size: 0.85rem; color: var(--text-on-paper-soft); }
.checkout-prep[hidden] { display: none; }
.checkout-line-note,
.checkout-line-soldout { display: block; font-size: 0.8rem; margin-top: 0.15rem; overflow-wrap: anywhere; }
.checkout-line-note { font-style: italic; color: var(--text-on-paper-soft); }
.checkout-line-soldout,
.cart-line-soldout { font-weight: 700; color: var(--chili-dark); }
.cart-line-soldout { font-size: 0.78rem; margin-top: 0.2rem; }
.cart-line-instructions { overflow-wrap: anywhere; }

.checkout-blocked-note {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(185,54,43,0.08);
  border: 1px dashed var(--chili);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-on-paper);
}
.checkout-blocked-note[hidden] { display: none; }

.checkout-confirmation-items {
  list-style: none;
  margin: 0.75rem auto;
  padding: 0;
  max-width: 32rem;
  text-align: left;
  font-size: 0.9rem;
}
.checkout-confirmation-items li { padding: 0.4rem 0; border-bottom: 1px dashed var(--paper-line); overflow-wrap: anywhere; }
.checkout-confirmation-items[hidden] { display: none; }

/* ---------- Location with online ordering turned off ("coming soon") ---------- */
.location-coming-soon {
  margin: 0;
  padding: 0.6rem 0.9rem;
  border: 1px dashed var(--paper-line);
  border-radius: var(--radius-sm);
  font-weight: 700;
  color: var(--text-on-paper-soft);
}
.location-choice.is-unavailable { opacity: 0.6; cursor: default; }

/* ---------- "Not taking orders" banner (js/main.js renderOrderingBanner) ----------
   A strong warm yellow (with a saffron edge and an alert icon) so it can't
   be missed; dark --ink text on it (~10:1 contrast — never white on
   yellow). Inside the header, so it sits right under the header bar.
   Its negative bottom margin cancels the header's own bottom padding so
   the banner reaches the header's edge. --ordering-banner-h (set from
   JS) pushes content below the FIXED .site-header down by its height. */
.ordering-banner {
  background: #F7CB45;
  border-top: 1px solid var(--saffron-dark);
  border-bottom: 3px solid var(--saffron-dark);
  box-shadow: 0 4px 12px rgba(37,35,31,0.14);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
}
.ordering-banner[hidden] { display: none; }
.ordering-banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  text-align: center;
}
.ordering-banner-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Alert icon: a dark circle with "!" (CSS only, no asset). */
.ordering-banner-title::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--ink);
  color: #F7CB45;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
}
.ordering-banner-text { font-weight: 600; }
.site-header > .ordering-banner { margin: 1rem 0 -1rem; }
.site-header.is-scrolled > .ordering-banner { margin: 0.65rem 0 -0.65rem; }
.order-header > .ordering-banner { margin: 0.85rem 0 -0.85rem; }
.site-header ~ main { padding-top: var(--ordering-banner-h, 0px); }
@media (max-width: 600px) {
  .ordering-banner { font-size: 0.9rem; }
  .ordering-banner-inner { justify-content: flex-start; text-align: left; }
  .ordering-banner-title { font-size: 0.98rem; }
}