/* ============================================================
   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); }
.marquee .track { display: inline-flex; gap: 44px; 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; }
.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); }

/* ============================== ADD-ONS ============================== */
.addons { background: var(--ink); color: var(--warm-50); padding: 10px 0 80px; }
.addons h2 { font-size: clamp(28px,4vw,42px); color: var(--warm-50); margin-bottom: 24px; }
.addon-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 44px;
  border-top: 1px solid rgba(251,244,230,0.14); }
.addon { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0;
  border-bottom: 1px solid rgba(251,244,230,0.1); }
.addon .lbl { font-size: 14px; color: rgba(251,244,230,0.85); line-height: 1.3; }
.addon .val { font-family: var(--font-display); font-weight: 800; color: var(--pop); font-size: 17px; white-space: nowrap; }

/* ============================== 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, .addons { border-top: 1px solid rgba(251,244,230,0.1); }
.cbuilder { padding-top: 60px; }
.combos { padding-top: 60px; }
.addons { padding-top: 52px; }

/* ---- 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; }

/* ---- 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); }

/* ---- Add-on quick-add ---- */
.addon .addon-add { margin-left: 4px; background: none; border: 1px solid rgba(251,244,230,0.35);
  color: rgba(251,244,230,0.85); border-radius: var(--radius-pill); padding: 8px 16px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; transition: all var(--dur-fast); flex: none; }
.addon .addon-add:hover { background: var(--brand-green); border-color: var(--brand-green); 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); }
.addon .addon-add:hover { background: var(--brand); border-color: var(--brand); }

/* ---- 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 ---- */
.bs-extras { margin-top: 20px; }
.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); }
/* #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)); }