/* ============================================================
   SONORA — WEBSITE STYLES  (uses tokens from ../../styles.css)
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--surface-app); color: var(--text-body);
  font-family: var(--font-body); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.kicker { font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand); margin: 0 0 14px; }
.h-display { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.015em; line-height: 0.98; color: var(--text-strong); margin: 0; }
.amp-g { color: var(--brand-green); }
.amp-o { color: var(--brand); }
section { position: relative; }

/* ---- Photo slots (no-photo styling) ---- */
.photoslot { position: relative; overflow: hidden; background:
    linear-gradient(150deg, var(--warm-150), var(--warm-300));
  display: flex; align-items: center; justify-content: center; }
.photoslot::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(rgba(140,110,70,0.06) 1px, transparent 1px); background-size: 5px 5px; }
.photoslot .mark { width: 46%; max-width: 150px; opacity: 0.5; filter: saturate(0.8); }
.photoslot .realphoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; }
.photoslot.dark { background: linear-gradient(150deg, var(--cactus-600), var(--cactus-700)); }
.photoslot.dark .mark { opacity: 0.55; }
.photoslot[data-fill]::after { content: attr(data-fill); position: absolute; bottom: 10px; right: 12px;
  font-family: var(--font-body); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(36,30,24,.35); font-weight: 700; }

/* ============================== HEADER ============================== */
.nav { position: sticky; top: 0; z-index: 50; color: var(--warm-800);
  background:
    linear-gradient(rgba(244,232,210,0.62), rgba(238,224,196,0.72)),
    url("../../assets/imagery/desert-etching-landscape.png") center 30% / 135% auto no-repeat;
  border-bottom: 2px solid rgba(140,60,20,0.22);
  box-shadow: 0 4px 14px rgba(36,30,24,0.10); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.nav .logo { display: flex; align-items: center; gap: 11px; }
.nav .logo img { height: 48px; width: auto; filter: drop-shadow(0 2px 3px rgba(36,30,24,0.18)); }
.nav .logo .lockup { display: flex; flex-direction: column; }
.nav .logo .son { font-family: var(--font-display); font-weight: 900; font-size: 28px;
  text-transform: uppercase; color: var(--terracotta-500); letter-spacing: -0.01em; line-height: 0.9;
  text-shadow: 0 2px 2px rgba(120,40,10,0.18); }
.nav .logo .mex { font-family: var(--font-display); font-weight: 700; font-size: 9px;
  letter-spacing: 0.22em; color: var(--cactus-600); text-transform: uppercase; margin-top: 1px; }
.nav .links { display: flex; align-items: center; gap: 30px; }
.nav .links a { font-family: var(--font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--warm-800);
  transition: color var(--dur-base); white-space: nowrap; }
.nav .links a:hover { color: var(--terracotta-600); }
.nav .order-now { background: var(--terracotta-500); color: var(--warm-50); padding: 12px 22px;
  border-radius: var(--radius-pill); font-size: 13px; letter-spacing: 0.08em;
  box-shadow: 0 4px 12px rgba(194,70,28,0.32); }
.nav .order-now:hover { background: var(--terracotta-600); }
.nav .burger { display: none; background: none; border: 0; color: var(--terracotta-600); font-size: 22px; cursor: pointer; }

/* ============================== RIBBON + PROMO ============================== */
.ribbon { background: var(--cactus-600); color: rgba(251,244,230,0.92); text-align: center;
  font-size: 13px; padding: 11px 20px; font-weight: 600; letter-spacing: 0.02em; }
.ribbon .sep { color: var(--amber-400); font-size: 10px; margin: 0 12px; vertical-align: 1px; }
.ribbon b { color: var(--amber-400); font-weight: 700; }
.promo { background: linear-gradient(90deg, var(--chili-600), var(--chili-500), var(--chili-600));
  color: var(--warm-50); text-align: center; font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 15px; padding: 10px 20px; }

/* ============================== HERO ============================== */
.hero { position: relative; color: var(--warm-50); overflow: hidden; }
.hero-split { display: flex; align-items: stretch; min-height: 600px; }
.hero-text { flex: 1 1 45%; display: flex; align-items: center; padding: 56px clamp(28px,5vw,68px);
  background:
    linear-gradient(140deg, rgba(36,30,24,0.95), rgba(62,87,66,0.90)),
    url("../../assets/imagery/desert-etching-landscape.png") center/cover no-repeat; }
.hero-text-inner { width: 100%; max-width: 560px; margin-left: auto; }
.hero-media { flex: 1 1 55%; position: relative; overflow: hidden; min-height: 600px; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; gap: 9px; justify-content: center; z-index: 3; }
.hero-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: background .3s, transform .3s; }
.hero-dots span.on { background: var(--pop); transform: scale(1.3); }
.hero .photoslot { position: absolute; inset: 0; }
.hero .photoslot .mark { width: 280px; max-width: 32%; opacity: 0.32; }
.hero-rot-wrap { position: absolute; inset: 0; z-index: 1; }
.hero-rot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
.hero-rot.active { opacity: 1; }
.hero .scrim { position: absolute; inset: 0; background:
    linear-gradient(90deg, rgba(36,30,24,0.74) 0%, rgba(36,30,24,0.34) 48%, rgba(36,30,24,0.12) 100%),
    linear-gradient(0deg, rgba(36,30,24,0.6), rgba(36,30,24,0) 55%); }
.hero .inner { position: relative; z-index: 2; padding: 60px 0 56px; width: 100%; }
.hero h1 { font-size: clamp(40px, 4.6vw, 76px); color: var(--warm-50); }
.hero h1 .l2 { color: var(--pop); }
.hero p { max-width: 38ch; font-size: 18px; line-height: 1.5; margin: 18px 0 26px;
  text-shadow: 0 1px 10px rgba(36,30,24,0.7); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display);
  font-weight: 700; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 14px 24px; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none;
  border: 2px solid transparent; transition: transform var(--dur-fast), background var(--dur-base), filter var(--dur-base); }
.btn:active { transform: scale(0.97); }
.btn-wa { background: var(--brand-green); color: var(--warm-50); }
.btn-wa:hover { background: var(--brand-green-strong); }
.btn-line { background: rgba(251,244,230,0.12); color: var(--warm-50); border-color: rgba(251,244,230,0.72);
  backdrop-filter: blur(4px); }
.btn-line:hover { background: rgba(251,244,230,0.22); }
.btn-cream { background: var(--warm-50); color: var(--text-strong); }
.btn-cream:hover { background: var(--warm-100); }

/* ============================== MARQUEE ============================== */
.marquee { background: var(--ink); color: var(--warm-50); overflow: hidden; padding: 16px 0;
  border-top: 3px solid var(--brand); }
/* The 44px between entries is a TRAILING MARGIN on each span, not a gap on the
   track. Two copies joined by `gap` give the track 2N-1 gaps, while the -50%
   translate below advances by 2N — so the loop fell 22px short every cycle and
   the seam visibly jumped. Carrying the space on the span makes half the track
   exactly one copy. The spacing a reader sees is unchanged: 44px, either way.
   Duration is set inline per-render — see marquee() in site.js — so the speed
   stays at the designed 8-entries-in-30s however much content survives the
   content filters. 30s here is the fallback for the authored eight. */
.marquee .track { display: inline-flex; white-space: nowrap; animation: scroll-x 30s linear infinite; }
.marquee span { font-family: var(--font-display); font-weight: 800; font-size: 22px;
  text-transform: uppercase; letter-spacing: 0.02em; display: inline-flex; align-items: center;
  gap: 44px; margin-right: 44px; }
.marquee span::after { content: "✦"; color: var(--brand); font-size: 14px; }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================== MENU ============================== */
.menu { background: var(--ink); color: var(--warm-50); padding: 70px 0 88px; }
.menu .head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.menu h2 { font-size: clamp(34px, 5vw, 56px); color: var(--warm-50); }
.menu .tabs { display: flex; gap: 28px; border-bottom: 1px solid rgba(251,244,230,0.16);
  margin: 26px 0 0; flex-wrap: wrap; }
.menu .tab { background: none; border: 0; cursor: pointer; padding: 0 0 14px; font-family: var(--font-display);
  font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(251,244,230,0.75); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.menu .tab.active { color: var(--pop); border-color: var(--pop); }
.menu .intro { color: rgba(251,244,230,0.8); font-size: 15px; max-width: 70ch; margin: 22px 0 30px; line-height: 1.5; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px 28px; }
.mcard { display: flex; flex-direction: column; cursor: pointer; }
.mcard .ph { aspect-ratio: 1 / 1; border-radius: var(--radius-md); margin-bottom: 14px; }
.mcard .ph .mark { width: 44%; }
.mcard .top { display: flex; align-items: baseline; gap: 8px; }
.mcard h3 { font-family: var(--font-display); font-weight: 800; font-size: 21px; text-transform: uppercase;
  color: var(--warm-50); margin: 0; letter-spacing: -0.005em; }
.mcard .badge { font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--warm-900); background: var(--pop); padding: 3px 8px;
  border-radius: var(--radius-pill); }
.mcard .tagline { color: var(--pop); font-weight: 600; font-size: 13.5px; margin: 7px 0 0; font-style: italic; }
.mcard .desc { color: rgba(251,244,230,0.78); font-size: 14px; line-height: 1.45; margin: 8px 0 0; }
.mcard .foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.mcard .price { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--pop); white-space: nowrap; }
.mcard .combo { font-size: 11.5px; font-weight: 600; color: rgba(251,244,230,0.8); line-height: 1.5;
  border: 1px solid rgba(251,244,230,0.28); border-radius: var(--radius-pill); padding: 5px 11px; }

/* ---- Lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center;
  background: rgba(20,15,10,0.82); padding: 24px; }
.lightbox.open { display: flex; }
.lightbox .box { background: var(--ink); border-radius: var(--radius-lg); max-width: 480px; width: 100%;
  position: relative; max-height: calc(100vh - 48px); overflow-x: hidden; overflow-y: auto;
  box-shadow: var(--shadow-xl); }
.lightbox .ph { aspect-ratio: 4 / 3; }
.lightbox .ph .mark { width: 38%; }
.lightbox .body { padding: 24px 26px 28px; }
.lightbox h3 { font-family: var(--font-display); font-weight: 800; font-size: 26px; text-transform: uppercase;
  color: var(--warm-50); margin: 0 0 6px; }
.lightbox .tagline { color: var(--pop); font-style: italic; font-weight: 600; margin: 0 0 12px; }
.lightbox p { color: rgba(251,244,230,0.78); line-height: 1.5; margin: 0 0 16px; }
.lightbox .price { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--pop); }
.lightbox .close { position: absolute; top: 20px; right: 22px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--warm-50); border: 0; font-size: 22px; cursor: pointer; color: var(--warm-900); }

/* ============================== COMBOS ============================== */
.combos { background: var(--ink); color: var(--warm-50); padding: 30px 0 80px; }
.combos h2 { font-size: clamp(32px,4.5vw,50px); color: var(--warm-50); }
.combos .blurb { color: rgba(251,244,230,0.8); max-width: 60ch; margin: 14px 0 36px; line-height: 1.5; }
.combo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.combo { background: rgba(251,244,230,0.04); border: 1px solid rgba(251,244,230,0.1);
  border-radius: var(--radius-lg); overflow: hidden; }
.combo .ph { aspect-ratio: 16 / 11; }
.combo .combo-slider { aspect-ratio: 16 / 11; }
.combo-rot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; z-index: 3; }
.combo-rot.active { opacity: 1; }
.combo-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; gap: 6px; justify-content: center; z-index: 4; }
.combo-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55); transition: background .3s, transform .3s; }
.combo-dots span.on { background: var(--pop); transform: scale(1.25); }
.combo .body { padding: 22px 26px 26px; }
.combo h3 { font-family: var(--font-display); font-weight: 800; font-size: 26px; text-transform: uppercase;
  color: var(--warm-50); margin: 0; }
.combo .forwho { color: rgba(251,244,230,0.75); font-size: 14px; margin: 2px 0 10px; }
.combo .price { font-family: var(--font-display); font-weight: 900; font-size: 34px; color: var(--pop); margin-bottom: 14px; }
.combo .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.combo .chips span { font-size: 12.5px; font-weight: 600; color: rgba(251,244,230,0.85);
  border: 1px solid rgba(251,244,230,0.2); border-radius: var(--radius-sm); padding: 6px 11px; }
.combo .order { display: block; text-align: center; background: var(--brand-green); color: var(--warm-50);
  padding: 14px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; text-decoration: none; }
.combo .order:hover { background: var(--brand-green-strong); }

/* ============================== HOW TO ORDER ============================== */
.howto { background: var(--surface-app); padding: 80px 0; }
.howto h2 { font-size: clamp(30px,4.2vw,46px); max-width: 16ch; margin-bottom: 44px; }
.howto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 0; }
.howstep { padding: 0 30px; border-left: 1px solid var(--border-default); }
.howstep:first-child { padding-left: 0; border-left: 0; }
.howstep .n { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border-radius: 50%; background: var(--brand-green); color: var(--warm-50); font-family: var(--font-display);
  font-weight: 800; font-size: 16px; margin-bottom: 16px; }
.howstep h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase;
  color: var(--text-strong); margin: 0 0 10px; }
.howstep p { font-size: 14.5px; line-height: 1.5; color: var(--text-muted); margin: 0 0 14px; }
.howstep a { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-brand); text-decoration: none; border-bottom: 2px solid var(--brand); padding-bottom: 2px; }

/* ============================== FAQ ============================== */
.faq { background: var(--surface-sand); padding: 80px 0; }
.faq h2 { font-size: clamp(30px,4.2vw,46px); max-width: 14ch; margin-bottom: 40px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.qa { border-top: 1px solid var(--border-strong); }
.qa button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0; cursor: pointer; padding: 18px 0; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 17px; text-transform: uppercase;
  color: var(--text-strong); letter-spacing: -0.005em; }
.qa .chev { color: var(--brand); transition: transform var(--dur-base); flex: none; font-size: 16px; }
.qa.open .chev { transform: rotate(180deg); }
.qa .ans { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); }
.qa.open .ans { max-height: 240px; }
.qa .ans p { margin: 0; padding: 0 0 20px; color: var(--text-muted); font-size: 15px; line-height: 1.55; }

/* ============================== STORY ============================== */
.story { background: var(--surface-app); padding: 84px 0; }
.story h2 { font-size: clamp(32px,4.6vw,52px); margin-bottom: 18px; }
.story .blurb { max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--text-body); margin-bottom: 52px; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 50px; }
.pillar .n { font-family: var(--font-display); font-weight: 900; font-size: 28px; color: var(--brand-soft); }
.pillar h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px; text-transform: uppercase;
  color: var(--text-strong); margin: 8px 0 8px; }
.pillar p { font-size: 14.5px; line-height: 1.5; color: var(--text-muted); margin: 0; }

/* ============================== FIND US ============================== */
.findus { background: var(--ink); color: var(--warm-50); padding: 80px 0 0; }
.findus-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: start; }
.findus h2 { font-size: clamp(30px,4.4vw,48px); color: var(--warm-50); margin-bottom: 30px; }
.findus .row { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(251,244,230,0.12); }
.findus .row .ic { width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--warm-50);
  display: flex; align-items: center; justify-content: center; flex: none; }
.findus .row .lbl { display: block; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pop); margin-bottom: 3px; }
.findus .row .txt { display: block; font-size: 14.5px; color: rgba(251,244,230,0.85); line-height: 1.4; }
.findus .map { aspect-ratio: 16 / 11; border-radius: var(--radius-md); }
.findus .map .mark { width: 30%; }
.findus .maplink { display: inline-block; margin-top: 18px; background: var(--brand); color: var(--warm-50);
  padding: 12px 22px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.findus .maplink:hover { background: var(--brand-strong); }
.findus .banner { margin-top: 70px; padding: 26px 0; text-align: center; background: var(--success-surface);
  color: var(--cactus-700); font-family: var(--font-display); font-weight: 800; font-size: clamp(18px,2.5vw,26px);
  text-transform: uppercase; letter-spacing: -0.005em; }

/* ============================== FOOTER ============================== */
.footer { background: var(--ink); color: var(--warm-50); padding: 60px 0 40px; border-top: 1px solid rgba(251,244,230,0.1); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; }
.footer .son { font-family: var(--font-display); font-weight: 900; font-size: 26px; color: var(--brand);
  text-transform: uppercase; letter-spacing: -0.01em; }
.footer .blurb { color: rgba(251,244,230,0.75); font-size: 13.5px; line-height: 1.55; margin: 14px 0 18px; max-width: 36ch; }
.footer .social-hd { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pop); margin: 0 0 8px; }
.footer .social-blurb { color: rgba(251,244,230,0.75); font-size: 13.5px; line-height: 1.55; margin: 0 0 14px; max-width: 36ch; }
.footer .social { display: flex; gap: 10px; }
.footer .social a { width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid rgba(251,244,230,0.2);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; text-decoration: none;
  color: rgba(251,244,230,0.8); }
.footer h4 { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pop); margin: 0 0 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.footer ul a { font-size: 13.5px; color: rgba(251,244,230,0.8); text-decoration: none; }
.footer ul a:hover { color: var(--warm-50); }
.footer .copy { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(251,244,230,0.1);
  font-size: 12px; color: rgba(251,244,230,0.45); }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 860px) {
  .nav .links { position: fixed; inset: 78px 0 auto 0; flex-direction: column; background: var(--warm-100);
    padding: 18px 28px 26px; gap: 18px; display: none; box-shadow: var(--shadow-lg);
    border-bottom: 2px solid rgba(140,60,20,0.22); }
  .nav .links.open { display: flex; }
  .nav .links a { font-size: 15px; }
  .nav .burger { display: block; }
  .faq-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr 1fr; gap: 30px; }
  .findus-grid { grid-template-columns: 1fr; }
  .howstep { border-left: 0; padding: 0 0 8px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .pillars { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero .cta .btn { font-size: 13px; padding: 12px 18px; }
}


/* ============================== THEMES (live switcher) ==============================
   --ink = dark-section background, --pop = accent/price highlight.
   Default + 3 variations. Switch via body[data-theme]. */
:root { --ink: #241E18; --pop: #EF9A1E; }
body[data-theme="cantina"] { --ink: #2A201A; --pop: #E58A5E; } /* espresso + coral */
body[data-theme="cactus"]  { --ink: #243029; --pop: #E7CF9B; } /* deep green + sand */
body[data-theme="clay"]    { --ink: #3A271D; --pop: #EF9A1E; } /* warm clay + amber */

/* Hero real artwork bg */
.hero .herobg { position: absolute; inset: 0; background:
    linear-gradient(120deg, rgba(36,30,24,0.30), rgba(36,30,24,0.05) 60%),
    center/cover no-repeat var(--hero-img, none); }
@media (max-width: 820px) {
  .hero-split { flex-direction: column; min-height: 0; }
  .hero-text { flex: none; padding: 40px 22px; }
  .hero-text-inner { margin: 0; max-width: none; }
  .hero-media { flex: none; min-height: 0; height: 56vw; max-height: 380px; }
}

/* Theme switcher control */
.theme-switch { position: fixed; left: 18px; bottom: 18px; z-index: 200; display: flex; align-items: center;
  gap: 10px; background: rgba(36,30,24,0.82); backdrop-filter: blur(8px); padding: 9px 12px;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); }
.theme-switch .tl { font-family: var(--font-display); font-weight: 700; font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(251,244,230,0.8); }
.theme-switch button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(251,244,230,0.35);
  cursor: pointer; padding: 0; }
.theme-switch button.on { border-color: var(--warm-50); transform: scale(1.12); }
.theme-switch button[data-th="cantina"] { background: #2A201A; }
.theme-switch button[data-th="cactus"]  { background: #243029; }
.theme-switch button[data-th="clay"]    { background: #3A271D; }
.theme-switch button[data-th="ink"]     { background: #241E18; }
@media print { .theme-switch { display: none; } }


/* ============================== COMBO BUILDER ============================== */
.cbuilder { background: var(--ink); color: var(--warm-50); padding: 10px 0 84px; }
.cbuilder h2 { font-size: clamp(30px,4.2vw,46px); color: var(--warm-50); }
.cbuilder .blurb { color: rgba(251,244,230,0.8); max-width: 62ch; margin: 14px 0 34px; line-height: 1.5; }
.cb-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 44px; align-items: start; }
.cb-group h4 { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pop); margin: 28px 0 4px; }
.cb-group:first-child h4 { margin-top: 0; }
.cb-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0;
  border-bottom: 1px solid rgba(251,244,230,0.1); }
.cb-name { font-size: 15px; font-weight: 600; color: rgba(251,244,230,0.9); display: flex; flex-direction: column; }
.cb-name em { font-style: normal; font-size: 12.5px; color: rgba(251,244,230,0.72); font-weight: 500; margin-top: 2px; }
.cb-step { display: flex; align-items: center; gap: 12px; }
.cb-step button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(251,244,230,0.3);
  background: none; color: var(--warm-50); font-size: 19px; cursor: pointer; line-height: 1;
  transition: background var(--dur-fast); }
.cb-step button:hover { background: rgba(251,244,230,0.12); }
.cb-qty { font-family: var(--font-display); font-weight: 800; font-size: 17px; min-width: 22px; text-align: center; color: var(--pop); }
.cb-receipt { position: sticky; top: 100px; background: rgba(251,244,230,0.05);
  border: 1px solid rgba(251,244,230,0.12); border-radius: var(--radius-lg); padding: 24px 26px 26px; }
.cb-receipt h4 { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase;
  color: var(--warm-50); margin: 0 0 12px; }
.cb-empty { color: rgba(251,244,230,0.72); font-size: 14px; margin: 0 0 6px; }
.cb-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px;
  color: rgba(251,244,230,0.85); padding: 5px 0; }
.cb-sums { border-top: 1px solid rgba(251,244,230,0.16); margin-top: 12px; padding-top: 12px; }
.cb-sum { display: flex; justify-content: space-between; font-size: 14.5px; color: rgba(251,244,230,0.8); padding: 4px 0; }
.cb-sum b { font-weight: 700; }
.cb-sum.cb-total { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--warm-50); padding-top: 10px; }
.cb-sum.cb-total b { color: var(--pop); font-size: 24px; }
.cb-hint { font-size: 13px; color: rgba(251,244,230,0.75); line-height: 1.45; margin: 12px 0 16px; }
.cb-receipt .order { display: block; text-align: center; background: var(--brand-green); color: var(--warm-50);
  padding: 14px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; text-decoration: none; }
.cb-receipt .order:hover { background: var(--brand-green-strong); }
@media (max-width: 860px) {
  .cb-grid { grid-template-columns: 1fr; }
  .cb-receipt { position: static; }
}

/* ---- Combo builder: style+protein composer ---- */
.cb-composer { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 0;
  border-bottom: 1px solid rgba(251,244,230,0.1); }
.cb-composer select { flex: 1; min-width: 150px; background: rgba(251,244,230,0.07); color: var(--warm-50);
  border: 1px solid rgba(251,244,230,0.25); border-radius: var(--radius-sm); padding: 12px 14px;
  font-size: 14.5px; font-family: var(--font-body); cursor: pointer; }
.cb-composer select option { color: #241E18; background: #FBF4E6; }
.cb-composer button { font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 13px; background: var(--brand); color: var(--warm-50); border: 0;
  border-radius: var(--radius-pill); padding: 12px 22px; cursor: pointer; transition: background var(--dur-fast); }
.cb-composer button:hover { background: var(--brand-strong); }

/* ---- Combo builder: progress tracker + guidance ---- */
.cb-progress { display: flex; flex-wrap: wrap; gap: 10px; margin: -12px 0 30px; }
.cb-step-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: rgba(251,244,230,0.8); border: 1px dashed rgba(251,244,230,0.35);
  border-radius: var(--radius-pill); padding: 9px 15px; transition: all var(--dur-base); }
.cb-step-chip b { font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.cb-step-chip.done { border-style: solid; border-color: var(--brand-green); background: rgba(76,124,88,0.22);
  color: var(--warm-50); }
.cb-step-chip.goal { border-style: solid; border-color: rgba(251,244,230,0.35);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.cb-step-chip.goal.done { background: var(--brand-green); border-color: var(--brand-green); color: var(--warm-50); }
.cb-mains-empty { font-size: 13.5px; color: rgba(251,244,230,0.72); padding: 14px 2px;
  border-bottom: 1px solid rgba(251,244,230,0.1); line-height: 1.45; }

/* ---- Builder: carded numbered groups ---- */
.cb-group { border: 1px solid rgba(251,244,230,0.12); border-radius: var(--radius-lg);
  background: rgba(251,244,230,0.03); padding: 18px 22px 10px; }
.cb-group + .cb-group { margin-top: 16px; }
.cb-group h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.cb-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--brand); color: var(--warm-50); font-size: 13px; flex: none; }

/* ---- Combos: carousel ---- */
.car-nav { display: flex; gap: 10px; justify-content: flex-end; margin: 0 0 18px; }
.car-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(251,244,230,0.3);
  background: none; color: var(--warm-50); font-size: 18px; cursor: pointer; line-height: 1;
  transition: background var(--dur-fast); }
.car-btn:hover { background: rgba(251,244,230,0.12); }
.combo-track { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 6px; }
.combo-track::-webkit-scrollbar { display: none; }
.combo-track .combo { flex: 0 0 min(420px, 86%); scroll-snap-align: start; }

/* ---- Demarcation between the dark sections ---- */
.cbuilder, .combos { border-top: 1px solid rgba(251,244,230,0.1); }
.cbuilder { padding-top: 60px; }
.combos { padding-top: 60px; }

/* ---- Double protein toggles ---- */
.combo .dbl { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(251,244,230,0.78);
  margin: -8px 0 16px; cursor: pointer; }
.combo .dbl input, .cb-dbl input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; flex: none; }
.cb-dbl { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: rgba(251,244,230,0.8);
  cursor: pointer; flex-basis: 100%; padding-top: 2px; }

/* ---- Inline double-protein toggle on added mains ---- */
.cb-dblrow { background: none; border: 0; padding: 3px 0 0; margin: 0; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; color: rgba(251,244,230,0.75);
  text-decoration: underline dotted; text-underline-offset: 3px; transition: color var(--dur-fast); }
.cb-dblrow:hover { color: var(--warm-50); }

/* ---- Combo cards: per-build customization ---- */
.combo .cfg { margin: -6px 0 16px; }
.combo .cfg summary { cursor: pointer; font-size: 13px; font-weight: 600; color: rgba(251,244,230,0.75);
  list-style: none; padding: 4px 0; }
.combo .cfg summary::-webkit-details-marker { display: none; }
.combo .cfg[open] summary { color: var(--warm-50); }
.cfg-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.cfg-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(251,244,230,0.12); color: rgba(251,244,230,0.8); font-size: 11.5px;
  font-family: var(--font-display); font-weight: 800; flex: none; }
.cfg-row select { flex: 1; min-width: 0; background: rgba(251,244,230,0.07); color: var(--warm-50);
  border: 1px solid rgba(251,244,230,0.25); border-radius: var(--radius-sm); padding: 8px 10px;
  font-size: 13px; font-family: var(--font-body); cursor: pointer; }
.cfg-row select option { color: #241E18; background: #FBF4E6; }
.cfg-dbl { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: rgba(251,244,230,0.75);
  cursor: pointer; flex: none; }
.cfg-dbl input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.cfg-dbl-txt { white-space: nowrap; }

/* ---- Tooltip on 2× double-protein checkbox ---- */
.cfg-dbl { position: relative; }
.cfg-dbl::after { content: "Doubles the protein in this build"; position: absolute; bottom: calc(100% + 9px); right: -4px;
  background: var(--warm-50); color: var(--warm-900); font-size: 12px; font-weight: 600; line-height: 1;
  padding: 8px 11px; border-radius: var(--radius-sm); white-space: nowrap; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity var(--dur-fast), transform var(--dur-fast); z-index: 6; }
.cfg-dbl::before { content: ""; position: absolute; bottom: calc(100% + 4px); right: 8px;
  border: 5px solid transparent; border-top-color: var(--warm-50);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); z-index: 6; }
.cfg-dbl:hover::after, .cfg-dbl:focus-within::after,
.cfg-dbl:hover::before, .cfg-dbl:focus-within::before { opacity: 1; transform: none; }

/* ---- Menu cards: qty + double protein + order ---- */
.mc-order { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid rgba(251,244,230,0.1); cursor: default; }
.mc-prot { flex: 1 1 100%; background: rgba(251,244,230,0.07); color: var(--warm-50);
  border: 1px solid rgba(251,244,230,0.25); border-radius: var(--radius-sm); padding: 9px 10px;
  font-size: 13px; font-family: var(--font-body); cursor: pointer; }
.mc-prot option { color: #241E18; background: #FBF4E6; }
.mc-step { display: flex; align-items: center; gap: 8px; }
.mc-step button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(251,244,230,0.3);
  background: none; color: var(--warm-50); font-size: 17px; cursor: pointer; line-height: 1;
  transition: background var(--dur-fast); }
.mc-step button:hover { background: rgba(251,244,230,0.12); }
.mc-qty { font-family: var(--font-display); font-weight: 800; font-size: 16px; min-width: 18px;
  text-align: center; color: var(--pop); }
.mc-buy { margin-left: auto; background: var(--brand-green); color: var(--warm-50); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 10px 18px; border-radius: var(--radius-pill);
  transition: background var(--dur-fast); }
.mc-buy:hover { background: var(--brand-green-strong); }

/* ---- Drink variant dropdown ---- */
.mc-var { flex: 1 1 100%; background: rgba(251,244,230,0.07); color: var(--warm-50);
  border: 1px solid rgba(251,244,230,0.25); border-radius: var(--radius-sm); padding: 9px 10px;
  font-size: 13px; font-family: var(--font-body); cursor: pointer; }
.mc-var option { color: #241E18; background: #FBF4E6; }

/* ---- Per-flavor counters (soda card) ---- */
.mc-vars { flex: 1 1 100%; }
.mc-vrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid rgba(251,244,230,0.08); }
.mc-vrow:last-child { border-bottom: 0; }
.mc-vrow .vn { font-size: 13.5px; font-weight: 600; color: rgba(251,244,230,0.85); }
.mc-vrow .mc-step button { width: 32px; height: 32px; font-size: 15px; }
.mc-vqty { font-family: var(--font-display); font-weight: 800; font-size: 15px; min-width: 16px;
  text-align: center; color: var(--pop); }

/* ---- Combos jump link in menu tab row ---- */
.menu .tab-link { text-decoration: none; color: var(--amber-400); margin-left: auto; padding-bottom: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em;
  text-transform: uppercase; transition: color var(--dur-fast); }
.menu .tab-link:hover { color: var(--warm-50); }

/* ---- Order confirmation sheet ---- */
.ordersheet { position: fixed; inset: 0; z-index: 120; display: none; align-items: center;
  justify-content: center; background: rgba(20,15,10,0.82); padding: 24px; }
.ordersheet.open { display: flex; }
.os-box { position: relative; background: var(--ink); color: var(--warm-50); border-radius: var(--radius-lg);
  max-width: 460px; width: 100%; padding: 28px 28px 24px; box-shadow: var(--shadow-xl);
  max-height: 90vh; overflow-y: auto; }
.os-box h3 { font-family: var(--font-display); font-weight: 800; font-size: 24px;
  text-transform: uppercase; margin: 0 0 14px; }
.os-box .close { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(251,244,230,0.1); border: 0; color: var(--warm-50); font-size: 20px; cursor: pointer; }
.os-line { font-size: 14.5px; color: rgba(251,244,230,0.9); padding: 7px 0;
  border-bottom: 1px solid rgba(251,244,230,0.1); white-space: pre-wrap; line-height: 1.4; }
.os-total { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 4px;
  font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.os-total b { color: var(--pop); font-size: 23px; }
.os-type { display: flex; gap: 8px; margin: 14px 0 18px; }
.os-type button { flex: 1; padding: 12px; border-radius: var(--radius-pill);
  border: 1px solid rgba(251,244,230,0.3); background: none; color: rgba(251,244,230,0.75);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.05em;
  text-transform: uppercase; cursor: pointer; transition: all var(--dur-fast); }
.os-type button.on { background: var(--brand); border-color: var(--brand); color: var(--warm-50); }
.os-place { display: block; text-align: center; background: var(--brand-green); color: var(--warm-50);
  padding: 15px; border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; text-decoration: none;
  transition: background var(--dur-fast); }
.os-place:hover { background: var(--brand-green-strong); }
.os-back { display: block; width: 100%; background: none; border: 0; color: rgba(251,244,230,0.75);
  font-size: 13px; margin-top: 12px; cursor: pointer; padding: 6px; }
.os-back:hover { color: var(--warm-50); }

/* ---- Cart: blocks, clear, floating pill ---- */
.os-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 34px 14px 0; }
.os-head h3 { margin: 0; }
.os-clear { background: none; border: 0; color: rgba(251,244,230,0.72); font-size: 12.5px;
  cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; padding: 4px; }
.os-clear:hover { color: var(--warm-50); }
.os-block { position: relative; padding: 4px 34px 4px 0; border-bottom: 1px solid rgba(251,244,230,0.14); }
.os-block .os-line { border-bottom: 0; padding: 4px 0; }
.os-del { position: absolute; top: 8px; right: 0; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(251,244,230,0.08); border: 0; color: rgba(251,244,230,0.8); font-size: 15px;
  cursor: pointer; line-height: 1; }
.os-del:hover { background: var(--chili-600); color: var(--warm-50); }
.os-empty { color: rgba(251,244,230,0.72); font-size: 14px; margin: 4px 0 8px; }

.os-hint { font-size: 12.5px; color: rgba(251,244,230,0.72); line-height: 1.45; margin: 10px 0 0; }
/* THE CONFIRMATION IS NOT A FAULT (Sprint 26b fix pass). #osSent sits between
   #osPlace and #osNoChannel; #osNeedType is the third message in the group and
   sits well above #osPlace, beside the fulfilment row. All three were .os-hint
   — 12.5px of 72% cream — so the one message that says something went RIGHT was
   indistinguishable from the two that say something went wrong. No new font:
   this is the cactus scale the send control itself is painted in (.os-place is
   --brand-green), taken up the scale because --cactus-500 is a fill on these
   ink surfaces, not legible text on them.

   AND IT MUST CLEAR AA ON ALL FOUR THEMES (second fix pass). --ink is themed
   four ways, so one foreground has to hold against all four. --cactus-300 held
   on the default ink (5.07:1) and on "cantina" (4.90:1) but not on "cactus"
   (4.22:1) or "clay" (4.34:1) — under 4.5:1 for 13.5px text. --cactus-200 is
   the added step and clears every theme: 7.10 / 6.85 / 5.91 / 6.08.

   The border moved for the same reason and a second one. --cactus-400 was
   2.51:1 on the "cactus" theme — below the 3:1 a non-text indicator needs, so
   the block marker all but vanished on the one theme where the text is green on
   a green ground and the marker is doing the most work. --cactus-300 puts it at
   4.22:1 there and 5.07:1 on the default ink, so the confirmation reads as its
   own block on every theme rather than depending on hue alone. */
.os-sent { font-size: 13.5px; font-weight: 600; color: var(--cactus-200);
  margin: 0; }

/* THE ACKNOWLEDGEMENT IS ONE BLOCK (Sprint 26g).

   WHAT WAS WRONG ON A REAL PHONE. The three elements were siblings in the same
   column as the two action buttons beneath them, so the page said the order was
   in WhatsApp and, half a centimetre lower, offered "Add Another Meal" and
   "PLACE ORDER" — two filled-or-outlined targets that take the eye off a line
   of 13.5px text. The message was structurally indistinguishable from the
   things that contradict it.

   The 2px cactus edge .os-sent carried alone is now the LEFT EDGE OF A BOX
   around all three, so the acknowledgement, the line saying what the control
   does and the control itself are visibly one statement with a boundary, and
   the buttons below are outside it. Nothing new is invented: the same
   --cactus-300 that was already the marker, at the same 2px on the left where
   it already was, closed on the other three sides at 1px — the weight
   .os-tabs, .bs-place-wrap and the pills already use — and the panel's own
   --radius-sm. No fill, so the ink surface still shows through and the block
   adds no colour to the four themes; the contrast note above still governs the
   only two colours here.

   NO DISPLAY, deliberately, exactly as .os-sent has none: the inline
   display:none in the markup is what holds this down before the first paint,
   and showSentBlock() reveals it by clearing that one property. A block that
   declared display would ship visible and fence off an acknowledgement of an
   order nobody has sent. */
.os-sentblock { border: 1px solid var(--cactus-300); border-left-width: 2px;
  border-radius: var(--radius-sm); padding: 12px; margin-top: 12px; }

/* ---- Editable cart item rows ---- */
.os-item { padding: 10px 34px 10px 0; }
.os-iname { font-size: 15px; font-weight: 600; color: var(--warm-50); margin-bottom: 8px; }
/* Sprint 22 — a BUILT MEAL only. lineText() is multi-line: the meal name, then
   one indented detail per line, exactly as the kitchen's WhatsApp ticket
   reads, and HTML collapses those newlines by default. pre-wrap, not pre:
   a long topping list must still wrap on a phone.

   Scoped to .os-multi rather than every .os-iname: the same class also renders
   a side or drink whose name comes verbatim from admin content, and pre-wrap
   would make stray leading or trailing spaces in a stored name visible.

   The hanging indent is for the wrap. At 375px a detail line wraps often, and
   a continuation would otherwise start at column zero — level with the meal
   NAME, which is the only other thing at that column. Three of eight rendered
   rows did exactly that, so the indent that distinguishes a name from a
   detail vanished precisely where the text was hardest to read.

   Measured at a true 375px viewport, element left edge = 52px:
     name         52   (first line, pulled back out by the negative indent)
     detail       77   (padding edge, plus the two literal spaces in the text)
     continuation 69   (padding edge)
   RESIDUAL, accepted: a continuation sits 8px left of the detail it belongs
   to, because the two spaces are CONTENT and land only on the line that
   follows the hard break, never on its soft-wrapped remainder. No block-level
   CSS can close that; aligning them exactly means rendering one element per
   segment, which drops byte-parity with the ticket string. What matters —
   never colliding with the name column — is fixed. */
.os-iname.os-multi { white-space: pre-wrap; padding-left: 2ch; text-indent: -2ch; }
.os-iname em { font-style: normal; color: var(--pop); font-size: 13px; font-weight: 700; }
.os-ictl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.os-ictl .mc-step button { width: 32px; height: 32px; font-size: 15px; }
.os-ictl .mc-step b { font-family: var(--font-display); font-weight: 800; font-size: 15px;
  min-width: 18px; text-align: center; color: var(--pop); }
.os-isum { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: var(--warm-50); text-align: right; }
.os-isum small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 11.5px;
  color: rgba(251,244,230,0.72); }

/* ---- Per-line twin shortcut (mix double/regular) ---- */
.os-split { background: none; border: 0; padding: 6px 0 0; margin: 0; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; color: rgba(251,244,230,0.75);
  text-decoration: underline dotted; text-underline-offset: 3px; transition: color var(--dur-fast); display: block; }
.os-split:hover { color: var(--warm-50); }

/* ---- Delivery option in order sheet ---- */
.os-deliv p { font-size: 13.5px; color: rgba(251,244,230,0.8); margin: 0 0 10px; line-height: 1.45; }
.os-dbtns { display: flex; gap: 10px; margin-bottom: 6px; }
.os-dbtns a { flex: 1; text-align: center; background: var(--brand-green); color: var(--warm-50);
  text-decoration: none; padding: 13px; border-radius: var(--radius-pill); font-family: var(--font-display);
  font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; }
.os-dbtns a:hover { background: var(--brand-green-strong); }

/* ---- Lightbox add-to-order ---- */
.lightbox .lb-order { display: block; text-align: center; background: var(--brand-green); color: var(--warm-50);
  margin-top: 18px; padding: 13px; border-radius: var(--radius-pill); font-family: var(--font-display);
  font-weight: 700; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; }
.lightbox .lb-order:hover { background: var(--brand-green-strong); }

/* ============ LIGHT BUILDER (review: breaks the dark mid-page tunnel) ============ */
.cbuilder { background: var(--surface-sand); border-top: 0; }
.cbuilder h2 { color: var(--text-strong); }
.cbuilder .blurb { color: var(--text-muted); }
.cb-step-chip { color: var(--text-muted); border-color: rgba(36,30,24,0.35); }
.cb-step-chip.done { background: var(--success-surface); color: var(--cactus-700); border-color: var(--brand-green); }
.cb-step-chip.goal { border-color: rgba(36,30,24,0.35); color: var(--text-strong); }
.cb-step-chip.goal.done { background: var(--brand-green); color: var(--warm-50); border-color: var(--brand-green); }
.cb-group { background: rgba(140,105,65,0.10); border-color: rgba(36,30,24,0.15); }
.cb-group h4 { color: var(--brand); }
.cb-composer { border-color: var(--border-default); }
.cb-composer select { background: var(--warm-50); color: var(--text-strong); border-color: rgba(36,30,24,0.3); }
.cb-dbl { color: var(--text-muted); }
.cb-mains-empty { color: var(--text-muted); border-color: var(--border-default); }
.cb-row { border-color: var(--border-default); }
.cb-name { color: var(--text-strong); }
.cb-name em { color: var(--text-muted); }
.cb-step button { border-color: rgba(36,30,24,0.4); color: var(--text-strong); }
.cb-step button:hover { background: rgba(36,30,24,0.08); }
.cb-qty { color: var(--brand); }
.cb-dblrow { color: var(--text-muted); }
.cb-dblrow:hover { color: var(--text-strong); }
.cb-receipt { background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-xl); }

/* ---- Fulfilment caption under builder CTA ---- */
.cb-fulfil { font-size: 12px; text-align: center; color: rgba(251,244,230,0.65); margin: 10px 0 0; line-height: 1.4; }

/* ---- CTA recolor: Saltillo terracotta (order/add buttons) ---- */
.combo .order, .cb-receipt .order, .mc-buy, .os-place, .lightbox .lb-order { background: var(--brand); }
.combo .order:hover, .cb-receipt .order:hover, .mc-buy:hover, .os-place:hover, .lightbox .lb-order:hover { background: var(--brand-strong); }

/* ---- Delivery: bullets, primary sub-label, app brand colors ---- */
.os-dlist { margin: 0 0 4px; padding: 0; list-style: none; }
.os-dlist li { font-size: 13.5px; color: rgba(251,244,230,0.85); line-height: 1.6; display: flex; gap: 9px; }
.os-dlist li::before { content: "\2726"; color: var(--pop); font-size: 10px; margin-top: 4px; }
.os-place-note { display: block; font-size: 11px; letter-spacing: 0.03em; font-weight: 600; opacity: 0.9; margin-top: 3px; }
#osApps { margin-top: 10px; margin-bottom: 0; }
#odGrab { background: #00B14F; }
#odGrab:hover { background: #029647; }
#odGo { background: #00AA13; }
#odGo:hover { background: #048F13; }

/* ---- Tax & service ---- */
.taxnote { font-size: 12.5px; color: rgba(251,244,230,0.65); margin: -8px 0 26px; }
.os-sum { display: flex; justify-content: space-between; font-size: 13.5px; color: rgba(251,244,230,0.8); padding: 3px 0; }
.os-sum b { font-weight: 600; }
.os-total span { text-transform: uppercase; letter-spacing: 0.04em; }
.os-taxnote { font-size: 12.5px; color: rgba(251,244,230,0.65); margin: 2px 0 0; text-align: right; }

/* ============================== FIVE-STEP BUILDER (menu model v2) ============================== */
.bstep { border-top: 1px solid rgba(251,244,230,0.14); padding: 26px 0 4px; }
.bstep:first-of-type { border-top: 0; padding-top: 2px; }
.bs-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.bs-kicker { flex: none; font-family: var(--font-display); font-weight: 800; font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand); }
.bs-name { font-family: var(--font-display); font-weight: 800; font-size: 21px; text-transform: uppercase;
  color: var(--warm-50); margin: 0; letter-spacing: -0.005em; }
.bs-note { margin-left: auto; text-align: right; font-size: 12.5px; color: rgba(251,244,230,0.7); }
.bs-sub { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--pop); margin: 0 0 10px; }

/* ---- Step 1: style cards ---- */
.bs-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.bstyle { display: flex; flex-direction: column; text-align: left; padding: 0 0 16px; margin: 0; cursor: pointer;
  background: rgba(251,244,230,0.04); border: 1px solid rgba(251,244,230,0.14);
  border-radius: var(--radius-lg); overflow: hidden; color: inherit; font-family: var(--font-body);
  transition: border-color var(--dur-fast), background var(--dur-fast); }
.bstyle:hover { background: rgba(251,244,230,0.08); }
.bstyle .photoslot { aspect-ratio: 4 / 3; }
.bstyle .bs-t { font-family: var(--font-display); font-weight: 800; font-size: 19px; text-transform: uppercase;
  color: var(--warm-50); margin: 14px 16px 0; }
.bstyle .bs-tag { color: var(--pop); font-style: italic; font-weight: 600; font-size: 13px; margin: 6px 16px 0; }
.bstyle .bs-d { font-size: 13px; line-height: 1.45; color: rgba(251,244,230,0.75); margin: 8px 16px 0; }
.bstyle[aria-pressed="true"] { border-color: var(--pop); background: rgba(251,244,230,0.1); }
.bs-tort { margin-top: 18px; }
.bs-tort[hidden] { display: none; }

/* ---- Pills (bases, salsas, tops, extras, tortillas) ---- */
.bs-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.bpill { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 18px; margin: 0;
  border-radius: var(--radius-pill); border: 1px solid rgba(251,244,230,0.3); background: none;
  color: rgba(251,244,230,0.88); font-family: var(--font-body); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.bpill:hover { background: rgba(251,244,230,0.1); }
.bpill em { font-style: normal; font-weight: 700; color: var(--pop); }
.bpill[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--warm-50); }
.bpill[aria-pressed="true"] em { color: var(--warm-50); }

/* ---- Heat dots ---- */
.heat { display: inline-flex; align-items: center; gap: 3px; }
.heat i { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(251,244,230,0.22); }
.heat-mild i.on { background: var(--heat-mild); }
.heat-medium i.on { background: var(--heat-medium); }
.heat-hot i.on { background: var(--heat-hot); }

/* ---- Step 3: proteins + make it double ---- */
.bs-prots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.bprot { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; margin: 0;
  padding: 12px 16px; text-align: left; cursor: pointer; border-radius: var(--radius-md);
  border: 1px solid rgba(251,244,230,0.2); background: rgba(251,244,230,0.03); color: inherit;
  font-family: var(--font-body); transition: border-color var(--dur-fast), background var(--dur-fast); }
.bprot:hover { background: rgba(251,244,230,0.08); }
.bprot[aria-pressed="true"] { border-color: var(--pop); background: rgba(251,244,230,0.1); }
.bp-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bp-l { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 800;
  font-size: 15px; text-transform: uppercase; color: var(--warm-50); }
.bp-d { font-size: 12.5px; line-height: 1.4; color: rgba(251,244,230,0.7); }
.bp-p { margin-left: auto; font-family: var(--font-display); font-weight: 800; font-size: 19px;
  color: var(--pop); white-space: nowrap; }
.bs-price { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(251,244,230,0.75); margin: 18px 0 0; }
.bs-price b { color: var(--pop); font-size: 26px; letter-spacing: normal; margin-left: 10px; }
.bs-dbl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px;
  border: 1px dashed rgba(251,244,230,0.3); border-radius: var(--radius-lg); }
.bd-toggle { display: flex; align-items: center; gap: 11px; min-height: 44px; cursor: pointer; }
.bd-toggle input { width: 20px; height: 20px; flex: none; accent-color: var(--brand); cursor: pointer; }
.bd-txt { display: flex; flex-direction: column; gap: 2px; }
.bd-l { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--warm-50); }
.bd-s { font-size: 12.5px; color: rgba(251,244,230,0.7); }
.bd-groups { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.bd-chip { font-size: 12px; font-weight: 600; color: rgba(251,244,230,0.72);
  border: 1px solid rgba(251,244,230,0.25); border-radius: var(--radius-pill); padding: 7px 13px; }
.bd-chip.on { border-color: var(--pop); color: var(--pop); }

/* ---- Add row ---- */
/* PAID ADD-ONS ARE NOT MORE TOPPINGS. Step 5 holds two different kinds of
   choice — free toppings, then Extras (Paid) — and 20px of margin was the only
   thing between them, so the paid pills read as a second row of the same list
   and a customer could add Rp 20.000 of guacamole believing it was included.

   Separated with the divider this panel already uses between one step and the
   next (.bstep's hairline, same colour and weight) but DELIBERATELY NOT its
   spacing. A step boundary carries 4px above the rule and 26px below it — 30px,
   lop-sided downward, which is what pushes a NEW step clear of the last one.
   Matching that here (32 + 24) made a break INSIDE step 5 read as a sixth step:
   the same signal at the same strength says the same thing. So this rule gets
   12px on each side — 24px in total, symmetric where the step rhythm is
   lop-sided, and less air than a step gets — which reads as a division within
   the step rather than the end of it, while still being more separation than
   the bare 20px gap it replaced, and now with a line the gap never had.
   NOT font size: .bs-sub stays exactly as it is on the tortilla and sides
   sub-headings, or "Extras (Paid)" would outrank the step name over it.
   /order needed nothing — its SectionHeader already carries a rule. */
.bs-extras { margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px solid rgba(251,244,230,0.14); }
.bs-total { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(251,244,230,0.75); }
.bs-total b { color: var(--pop); font-size: 24px; letter-spacing: normal; margin-left: 10px; }
/* Sprint 22 — the order, inline in the builder. Same rows as the popup
   (blockRow), on the popup's dark panel treatment, so the customer reads one
   format in both places. */
.bsum { margin: 26px 0 0; padding: 18px; border-radius: var(--radius-card, 14px);
  background: var(--ink-800, #23281F); border: 1px solid rgba(251,244,230,0.14); }
.bsum-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; }
.bsum-h { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 17px;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--warm-50); }
.bsum-count { font-size: 12.5px; color: rgba(251,244,230,0.7); }
.bsum .os-block { padding-right: 34px; }
/* Sprint 19 verified "zero controls under 44px" at 375px. The build's stepper
   used to be .bs-actions' 44px pair; moving it onto an order row put it under
   the popup's 32px rule, six controls at a stroke. The popup keeps 32px — it
   is a dialog the customer opens deliberately — the builder does not. */
.bsum .os-ictl .mc-step button { width: 44px; height: 44px; }
.bsum .os-del { width: 44px; height: 44px; }
/* Clearance so the totals are not swallowed by the sticky step bar. */
.bsum { padding-bottom: 26px; }
.bsum-tot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(251,244,230,0.14); }
/* The commit row: the build's own quantity beside Add To Order. 44px on both,
   because mobile is the primary device and Sprint 19 verified "zero controls
   under 44px" — .bs-actions used to carry that minimum for these and is gone. */

/* "Add Another Meal" — a boundary between meals, offered only once the current
   one is finished. Outlined, so it never competes with Place Order. */
.bsum-more-b { display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; padding: 0 16px; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid rgba(251,244,230,0.3);
  background: none; color: rgba(251,244,230,0.85);
  font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.bsum-more-b:hover { border-color: var(--amber-400); color: var(--amber-400); }
/* "Start a New Order" wears .os-clear — the "Clear all" text link above (Sprint
   26f fix pass). It wore .bsum-more-b for one pass, which put a control that
   empties the cart at the same size, shape and weight as "Add Another Meal"
   ten pixels below it, on the one journey where both are on screen together.
   The two controls that empty the cart now look alike, and neither looks like
   the two that do not.

   NO DISPLAY DECLARED, deliberately: the UA's inline-block for a button keeps
   the hit area to the words, which is the point of a quiet destructive control
   — and it leaves showSentBlock() free to go on revealing and hiding this by
   clearing and setting one inline property. 4px sets it just under its own
   warning line, which .os-hint has already spaced 10px off the acknowledgement;
   the two read as one block. No colour, size or type of its own. */
#osNewOrder, #bNewOrder { margin-top: 4px; }
/* #bAnother is toggled through .hidden and this rule gives it a display value,
   so without the companion it would never hide — the same defect the editing
   notice shipped with once. test/hidden-rules.test.js enumerates them. */
.bsum-more-b[hidden] { display: none; }
/* Place Order — the one control that leaves the page. Solid brand fill, full
   width, 44px: mobile is the primary device. */
.bsum .b-place { display: flex; width: 100%; min-height: 44px; margin: 10px 0 0;
  align-items: center; justify-content: center; }
/* The order is no longer part of the builder, so it carries its own breathing
   room where the tab panels used to give it theirs. */
.menu > .wrap > .bsum { margin-top: 30px; }

/* 44px, same rule and same reason as the stepper beside it. */
.bs-err { min-height: 18px; margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--chili-400); }

/* Sprint 22 — shown only while a committed meal is open for editing, so the
   commit action is never ambiguous about which meal it will change. Borrows
   .bs-cap's quiet-note treatment; the Cancel control borrows .os-split's
   plain-text one. NEW ELEMENTS — flagged for Owner sign-off. */
.bs-editing { margin: 12px 0 0; font-size: 12.5px; font-weight: 600; color: var(--pop);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* An author-origin `display` beats the UA stylesheet's [hidden]{display:none},
   so every element this file gives a display value AND site.js toggles through
   .hidden needs this companion rule. Without it the notice sat on screen
   permanently and its Cancel — a one-tap control that wipes a build in
   progress — was always live. .bs-tort and .up-nudge carry the same pair;
   test/hidden-rules.test.js now enumerates all three so a fourth cannot be
   added without one. */
.bs-editing[hidden] { display: none; }
.bs-cancel { background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  color: rgba(251,244,230,0.7); text-decoration: underline; min-height: 44px; }
.bs-cancel:hover { color: var(--warm-50); }

/* ---- Menu footer notes (price format + swap-anything line) ---- */
.menu .pricenote { font-size: 12.5px; color: rgba(251,244,230,0.65); margin: 34px 0 0; }
.menu .customline { font-size: 13.5px; line-height: 1.5; color: rgba(251,244,230,0.8);
  max-width: 70ch; margin: 6px 0 0; }

/* ---- Find Us: location cards (2+ enabled locations) ---- */
.loc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 44px; }
.loc-card { background: rgba(251,244,230,0.04); border: 1px solid rgba(251,244,230,0.14);
  border-radius: var(--radius-lg); padding: 22px 24px 24px; }
.loc-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase;
  color: var(--warm-50); margin: 0; }
.loc-card .loc-city { font-size: 13px; color: var(--pop); font-weight: 600; margin: 4px 0 12px; }
.loc-card .loc-line { font-size: 14px; line-height: 1.45; color: rgba(251,244,230,0.82); margin: 0 0 8px; }
.loc-card .maplink { margin-top: 10px; }

/* ---- Step helper copy + the salsa cap note ---- */
.bs-help { font-size: 13px; line-height: 1.45; color: rgba(251,244,230,0.75); margin: -6px 0 12px; }
.bs-cap { min-height: 16px; margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--pop); }

/* ---- Inside / On the Side (steps 4 and 5) ---- */
.bs-place-wrap:empty { display: none; }
.bs-place { display: flex; flex-direction: column; margin-top: 6px; }
.bs-place-note { margin: 14px 0 0; }
.bs-place-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0;
  border-top: 1px solid rgba(251,244,230,0.1); }
.bs-place-lab { font-size: 14px; font-weight: 600; color: rgba(251,244,230,0.9); }
.bs-seg { margin-left: auto; display: inline-flex; border: 1px solid rgba(251,244,230,0.28);
  border-radius: var(--radius-pill); overflow: hidden; }
.bseg { min-height: 44px; padding: 10px 16px; margin: 0; border: 0; background: none;
  color: rgba(251,244,230,0.8); font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); }
.bseg + .bseg { border-left: 1px solid rgba(251,244,230,0.28); }
.bseg:hover { background: rgba(251,244,230,0.1); }
.bseg[aria-pressed="true"] { background: var(--brand); color: var(--warm-50); }

/* ---- The review moment: sides, drinks, swap reminder, one soft nudge ---- */
.upsell { margin-top: 26px; padding: 22px 22px 24px; border: 1px solid rgba(251,244,230,0.16);
  border-radius: var(--radius-lg); background: rgba(251,244,230,0.04); }
.up-h { font-family: var(--font-display); font-weight: 800; font-size: 20px; text-transform: uppercase;
  color: var(--warm-50); margin: 0; letter-spacing: -0.005em; }
.up-blurb { font-size: 13.5px; line-height: 1.5; color: rgba(251,244,230,0.75); margin: 6px 0 0; }
.up-nudge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px;
  padding: 14px 16px; border: 1px dashed rgba(251,244,230,0.3); border-radius: var(--radius-lg); }
.up-nudge[hidden] { display: none; }
.up-n-txt { flex: 1 1 220px; margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--warm-50); }
.up-n-btns { display: flex; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.up-n-yes, .up-n-no { min-height: 44px; padding: 11px 18px; border-radius: var(--radius-pill); cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase; transition: background var(--dur-fast); }
.up-n-yes { border: 0; background: var(--brand); color: var(--warm-50); }
.up-n-yes:hover { background: var(--brand-strong); }
.up-n-no { border: 1px solid rgba(251,244,230,0.3); background: none; color: rgba(251,244,230,0.8); }
.up-n-no:hover { background: rgba(251,244,230,0.1); }
.upsell .bs-sub { margin: 22px 0 10px; }
.up-sides { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.up-side { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px;
  border: 1px solid rgba(251,244,230,0.14); border-radius: var(--radius-md); background: rgba(251,244,230,0.03); }
.up-side .up-ph { flex: none; width: 68px; height: 68px; aspect-ratio: auto; border-radius: var(--radius-sm); }
.up-side .up-ph .mark { width: 54%; }
.up-side .up-ph::after { display: none; }
.up-s-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 130px; }
.up-s-name { font-family: var(--font-display); font-weight: 800; font-size: 14px; text-transform: uppercase;
  color: var(--warm-50); }
.up-s-price { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--pop); }
.up-s-var { margin-top: 4px; max-width: 100%; min-height: 44px; background: rgba(251,244,230,0.07);
  color: var(--warm-50); border: 1px solid rgba(251,244,230,0.25); border-radius: var(--radius-sm);
  padding: 10px; font-size: 12.5px; font-family: var(--font-body); cursor: pointer; }
.up-s-var option { color: #241E18; background: #FBF4E6; }
.up-s-ctl { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.up-s-ctl .mc-step button { width: 44px; height: 44px; }
.up-s-add { border: 0; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.up-note { font-size: 13px; line-height: 1.5; color: rgba(251,244,230,0.78); margin: 18px 0 0; }

/* ---- Persistent step indicator + sticky Continue ---- */
.bsticky { position: sticky; bottom: 0; z-index: 30; margin: 26px -6px 0; padding: 12px 14px 14px;
  border: 1px solid rgba(251,244,230,0.16); border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(rgba(251,244,230,0.1), rgba(251,244,230,0.1)) var(--ink);
  box-shadow: 0 -10px 26px rgba(20,15,10,0.45); }
.bprog { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.bprog::-webkit-scrollbar { display: none; }
.bprog-i { flex: 1 1 0; min-width: 44px; min-height: 44px; display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 8px 10px; cursor: pointer; text-align: left; background: none;
  border: 1px solid rgba(251,244,230,0.22); border-radius: var(--radius-pill);
  color: rgba(251,244,230,0.72); font-family: var(--font-body); font-size: 12px; font-weight: 600;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast); }
.bprog-i .bpn { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; background: rgba(251,244,230,0.12);
  color: rgba(251,244,230,0.8); font-family: var(--font-display); font-weight: 800; font-size: 11px; }
.bprog-i .bpl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bprog-i.done { border-color: var(--brand-green); color: var(--warm-50); }
.bprog-i.done .bpn { background: var(--brand-green); color: var(--warm-50); }
.bprog-i.cur { border-color: var(--pop); color: var(--warm-50); background: rgba(251,244,230,0.08); }
.bprog-i.cur .bpn { background: var(--pop); color: var(--warm-900); }
.bsk-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.bsk-why { flex: 1 1 auto; margin: 0; min-height: 16px; font-size: 12.5px; font-weight: 600;
  line-height: 1.35; color: var(--chili-400); }
/* Cart pill steps up while the sticky bar is on screen. */

@media (max-width: 560px) {
  .bs-note { margin-left: 0; text-align: left; flex-basis: 100%; }
  .bs-styles { grid-template-columns: 1fr; }
  .bs-prots { grid-template-columns: 1fr; }
  .bd-groups { margin-left: 0; }
  .loc-grid { grid-template-columns: 1fr; }

  /* Step 1 at phone width: six compact rows instead of six full-height cards,
     so every style is reachable with a short scroll and nothing dead-ends. */
  .bs-styles { gap: 10px; }
  .bstyle { display: grid; grid-template-columns: 76px 1fr; align-items: center;
    column-gap: 14px; padding: 0 14px 0 0; }
  .bstyle .photoslot { grid-column: 1; grid-row: 1 / span 2; width: 76px; height: 76px; aspect-ratio: auto; }
  .bstyle .bs-t { grid-column: 2; margin: 0; font-size: 17px; }
  .bstyle .bs-tag { grid-column: 2; margin: 3px 0 0; font-size: 12.5px; }
  .bstyle .bs-d { display: none; }

  .upsell { padding: 18px 16px 20px; }
  .up-sides { grid-template-columns: 1fr; }
  .up-s-ctl { margin-left: 0; flex: 1 1 100%; justify-content: space-between; }
  .up-n-btns { margin-left: 0; flex: 1 1 100%; }
  .up-n-yes, .up-n-no { flex: 1 1 0; justify-content: center; }
  .bs-seg { margin-left: 0; flex: 1 1 100%; }
  .bseg { flex: 1 1 0; }
  .bsticky { margin: 22px -18px 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 10px 14px 12px; }
  .bprog-i { flex: 0 0 auto; }
  /* Visually hidden, not display:none — the step name must stay in the
     accessibility tree so a screen reader announces more than "1", "2", "3". */
  .bprog-i .bpl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .bprog-i.cur { flex: 1 1 auto; }
  .bprog-i.cur .bpl { position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip-path: none; white-space: normal; }
  .bsk-row { flex-wrap: wrap; }
}

/* ============================== SPRINT 19 — UX FIXES ============================== */

/* B8 — the address under the logo jumps to find-us. It has to read as a link
   without breaking the ribbon's quiet single line.

   The text sets an 18px line box, which is a poor tap target on the primary
   device. Vertical padding on an INLINE element enlarges the hit area without
   contributing to the line box, so the ribbon keeps its exact height — an
   inline-block with negative margins was tried first and shifted it by 1px.
   The underline comes from text-decoration rather than a border so it stays on
   the text instead of dropping to the padding edge. */
.ribbon-addr { color: inherit; display: inline; padding: 14px 6px;
  text-decoration: underline; text-decoration-color: rgba(251,244,230,0.35); text-underline-offset: 3px; }
.ribbon-addr:hover { color: var(--amber-400); text-decoration-color: var(--amber-400); }

/* Get Directions in the ribbon — same verified pin as find-us. Same inline
   padding trick so the tap target clears 44px without changing the bar. */
.ribbon-dir { color: var(--amber-400); display: inline; padding: 14px 6px; margin-left: 4px;
  font-weight: 700; text-decoration: underline; text-decoration-color: rgba(232,166,58,0.5);
  text-underline-offset: 3px; white-space: nowrap; }
.ribbon-dir:hover { text-decoration-color: var(--amber-400); }
.ribbon-dir:focus-visible { outline: 2px solid var(--amber-400); outline-offset: 3px; border-radius: 2px; }
.ribbon-addr:focus-visible { outline: 2px solid var(--amber-400); outline-offset: 3px; border-radius: 2px; }

/* B9 — the address inside a FAQ answer, linked to the verified pin.
   --brand (#C2461C) measures 4.14:1 on the FAQ's sand background, under the
   4.5:1 minimum for body text. --brand-strong (#A93C16) measures 5.18:1 and is
   an existing design token, so the fix costs no new colour. */
.faq-addr { color: var(--brand-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.faq-addr:hover { color: var(--brand-strong); text-decoration-thickness: 2px; }

/* B10 — orientation lines under the address. Deliberately quieter than the
   address itself: they help someone who is already looking, they do not
   compete with it. */
.findus .fu-nearby { display: block; font-size: 13.5px; color: var(--amber-400); margin-top: 3px; }
.findus .fu-mapnote { display: block; font-size: 12.5px; color: rgba(251,244,230,0.6); margin-top: 3px; line-height: 1.4; }

/* B5 — the order sheet now shows subtotal and tax above the payable total, so
   the number on screen is the number in the WhatsApp message. */
.os-sub, .os-tax { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13.5px; color: rgba(251,244,230,0.75); padding: 3px 0; }
.os-sub b, .os-tax b { font-weight: 600; color: rgba(251,244,230,0.9); }
.os-total { border-top: 1px solid rgba(251,244,230,0.18); margin-top: 6px; }
.os-taxnote { text-align: right; }
/* The popup's nudge: it names what a meal is missing and offers the way back.
   It is advice, not a gate — Place Order below it is untouched. */
.os-nudge { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-card, 12px);
  background: rgba(251,244,230,0.07); border: 1px solid rgba(251,244,230,0.16); }
.os-nudge[hidden] { display: none; }
.os-nudge-row { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45;
  color: rgba(251,244,230,0.9); }
.os-nudge-row:last-child { margin-bottom: 0; }
.os-nudge-edit { margin-left: 6px; min-height: 44px; padding: 0 14px; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid rgba(251,244,230,0.3);
  background: none; color: rgba(251,244,230,0.85);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; }
.os-nudge-edit:hover { border-color: var(--amber-400); color: var(--amber-400); }

/* THE SEND GATE. Deliberately the same shape as the nudge above and deliberately
   a different tone: the nudge is a question in the panel's own quiet grey, this
   is a blocker in --chili-400, the colour .bs-err already uses for "you cannot
   proceed". No new visual language — the design system defines exactly one alert
   colour and this is it. */
.os-faults { margin: 12px 0 0; padding: 12px 14px; border-radius: var(--radius-card, 12px);
  background: rgba(194,74,42,0.12); border: 1px solid var(--chili-400); }
.os-faults[hidden] { display: none; }
.os-faults-h { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--chili-400); }
.os-fault-row { margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; color: rgba(251,244,230,0.9); }
.os-fault-row:last-child { margin-bottom: 0; }
.os-fault-row b { color: var(--warm-50); }
.os-fault-edit, .os-fault-del { margin-left: 6px; min-height: 44px; padding: 0 14px; cursor: pointer;
  border-radius: var(--radius-pill); border: 1px solid rgba(251,244,230,0.3);
  background: none; color: rgba(251,244,230,0.85);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; }
.os-fault-edit:hover, .os-fault-del:hover { border-color: var(--amber-400); color: var(--amber-400); }
/* The same fault, said on the row itself so nobody walks to the gate to find
   out. One line, under the meal it belongs to. */
.os-broken { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.4;
  color: var(--chili-400); }
.os-block-broken { border-left: 2px solid var(--chili-400); padding-left: 10px; }

/* B3 — an already-doubled row offers the way back rather than the same
   upsell again. */
/* Sprint 22 — .os-edit reopens a committed meal in the builder. It shares this
   rule rather than introducing a second quiet-control style: the order sheet
   already contains exactly one outline pill for a secondary per-line action,
   and the signed-off design has no third. NEW ELEMENT — flagged for Owner
   sign-off on placement (it sits in .os-ictl, between the quantity stepper and
   the price, on builder lines only). */
.os-undbl, .os-edit { background: none; border: 1px solid rgba(251,244,230,0.3); color: rgba(251,244,230,0.8);
  border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12.5px; cursor: pointer;
  min-height: 32px; font-family: var(--font-body); }
.os-undbl:hover, .os-edit:hover { border-color: var(--amber-400); color: var(--amber-400); }
/* Mobile is the primary device and Sprint 19 verified "zero controls under
   44px"; a new control must not be the first one back under it. .os-undbl
   keeps its 32px — it is pre-existing, and the two never share a row (one is
   on item blocks, the other on builder lines). */
.os-edit { min-height: 44px; padding: 6px 14px; }

/* B1 — the upsell Add confirms in place now that it no longer opens the order
   sheet. Fixed min-width so the label swap does not shift the row. */
.up-s-add { min-width: 92px; justify-content: center; transition: background-color 140ms ease; }
/* Sprint 22 — the same acknowledgement now serves the menu-card Add, which
   no longer throws the order sheet over the page. One treatment, not two. */
.up-s-add.added, .mc-buy.added { background: var(--brand-green-strong, var(--brand-green)); }