/* =========================================================
   GHATTAS — Lebanese bakery
   Design system: seafoam teal canvas · warm cream surfaces ·
   brown script logo · Poppins UI · citrus-gold accents.
   ========================================================= */

:root {
  /* surfaces — teal sampled from the Ghattas logo (#97CAC1) */
  --teal:        #97CAC1;   /* page canvas */
  --teal-soft:   #A8D3CA;   /* lighter teal */
  --teal-deep:   #6FA89C;   /* footer / deep panels */
  --teal-ink:    #2C6E63;   /* teal used in text/labels */

  --cream:       #FAF4E6;   /* primary surface (panel, sheets, drawer) */
  --cream-2:     #FFFCF4;   /* lighter surface (inputs, sub-cards) */
  --tan:         #F2E6CF;   /* tinted card */

  /* ink */
  --ink:         #2E2118;   /* primary text */
  --ink-2:       #6E4A2C;   /* secondary text */
  --muted:       #9A8268;   /* tertiary text */

  /* brand */
  --brown:       #7E4E27;   /* PRIMARY — CTAs, accents */
  --brown-dark:  #5E3A1B;
  --brown-deep:  #46290F;
  --gold:        #E6A23C;   /* citrus-gold highlight */
  --amber:       #C8821F;   /* deeper amber */
  --berry:       #C0402E;   /* spicy / red accent */

  /* lines & shadows */
  --line:        rgba(46,33,24,0.10);
  --line-strong: rgba(46,33,24,0.16);
  --shadow-soft: 0 18px 40px -22px rgba(36,58,52,0.55);
  --shadow-card: 0 24px 60px -30px rgba(36,58,52,0.6);
  --shadow-pop:  0 26px 60px -18px rgba(36,40,30,0.5);

  --font-script: 'Great Vibes', cursive;
  --font-ui:     'Poppins', system-ui, sans-serif;
  --font-ar:     'Cairo', 'Segoe UI', Tahoma, sans-serif;

  --rule: var(--ink);
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--teal);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.30) 0, transparent 55%),
    radial-gradient(circle at 12% 18%, rgba(230,162,60,0.10) 0, transparent 30%),
    radial-gradient(circle at 88% 80%, rgba(230,162,60,0.10) 0, transparent 30%),
    radial-gradient(circle at 50% 120%, rgba(45,110,101,0.22) 0, transparent 60%);
  background-attachment: fixed;
}

/* =========================================================
   BRAND LOGO IMG & BILINGUAL NAMES
   ========================================================= */
.brand-logo { display: block; width: auto; height: auto; user-select: none; }
.ar-name {
  display: block;
  font-family: var(--font-ar);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-2);
  margin-top: 0.12rem;
  direction: rtl;
}

/* =========================================================
   HERITAGE — "Since 1960" brand-identity cues
   ========================================================= */
/* navbar: slim rule + stacked Est. 1960 (desktop only, keeps mobile tidy) */
.est-rule { display: none; }
.est-tag  { display: none; }
@media (min-width: 640px) {
  .est-rule {
    display: block; width: 1.5px; height: 1.9rem; border-radius: 999px;
    background: linear-gradient(var(--gold), rgba(230,162,60,0.12));
  }
  .est-tag { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
}
.est-since {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.5rem;
  letter-spacing: 0.24em; text-indent: 0.24em; text-transform: uppercase;
  color: var(--teal-ink);
}
.est-year {
  font-family: var(--font-ui); font-weight: 800; font-size: 0.82rem;
  letter-spacing: 0.05em; color: var(--brown); margin-top: 0.13rem;
}

/* hero: full formal name */
.full-name {
  font-family: var(--font-ui); font-weight: 600;
  font-size: clamp(0.86rem, 2.7vw, 1.12rem);
  letter-spacing: 0.015em; color: var(--ink-2);
}

/* hero: gold "Since 1960" divider */
.since-divider { display: inline-flex; align-items: center; gap: 0.7rem; }
.since-rule { width: clamp(28px, 9vw, 54px); height: 2px; border-radius: 999px; }
.since-divider .since-rule:first-child { background: linear-gradient(90deg, rgba(230,162,60,0), var(--gold)); }
.since-divider .since-rule:last-child  { background: linear-gradient(90deg, var(--gold), rgba(230,162,60,0)); }
.since-word {
  font-family: var(--font-ui); font-weight: 700;
  font-size: 0.68rem; letter-spacing: 0.22em; text-indent: 0.22em;
  text-transform: uppercase; color: var(--amber); white-space: nowrap;
}

/* heritage section: circular bakery seal/stamp */
.heritage-seal { width: clamp(122px, 27vw, 152px); height: auto; display: block; }
.heritage-seal text { font-family: var(--font-ui); }
.heritage-seal .seal-top    { font-weight: 700; font-size: 11.5px; letter-spacing: 1px; fill: var(--brown); }
.heritage-seal .seal-bottom { font-weight: 700; font-size: 13px;   letter-spacing: 2px; fill: var(--brown); }
.heritage-seal .seal-since  { font-weight: 700; font-size: 12.5px; letter-spacing: 5px; fill: var(--amber); }
.heritage-seal .seal-year   { font-weight: 800; font-size: 40px;   letter-spacing: 1px; fill: var(--brown); }

/* footer: full name + established line under the wordmark */
.footer-fullname {
  font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.015em; color: var(--ink);
}
.footer-est {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.6rem;
  letter-spacing: 0.25em; text-indent: 0.25em; text-transform: uppercase;
  color: rgba(46,33,24,0.6);
}

/* footer: live open/closed status pill */
.open-status {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-ui); font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.01em;
  padding: 0.3rem 0.65rem; border-radius: 999px;
}
.open-status::before {
  content: ''; width: 0.5rem; height: 0.5rem; border-radius: 999px;
  background: currentColor; flex: none;
}
.open-status.is-open   { color: var(--teal-ink); background: rgba(44,110,99,0.16); }
.open-status.is-closed { color: var(--berry);    background: rgba(192,64,46,0.12); }
.open-status .os-sub { color: var(--ink-2); font-weight: 600; }
.open-status.is-open::before { animation: osPulse 2.2s ease-in-out infinite; }
@keyframes osPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44,110,99,0.45); }
  50%      { box-shadow: 0 0 0 4px rgba(44,110,99,0); }
}
@media (prefers-reduced-motion: reduce) { .open-status.is-open::before { animation: none; } }

/* =========================================================
   TYPOGRAPHIC HELPERS
   ========================================================= */
.eyebrow {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
}

/* section titles */
.sec-title {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(1.9rem, 5.6vw, 2.7rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.sec-title .hl {
  position: relative;
  display: inline-block;
  color: var(--brown);
  padding: 0 0.04em 0.06em;
}
.sec-title .hl::after {
  content: '';
  position: absolute;
  left: 0.04em; right: 0.04em;
  bottom: -0.06em;
  height: 0.18em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), rgba(230,162,60,0.25));
}

/* decorative divider dot (citrus seed) */
.brand-dot {
  width: 13px; height: 13px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(230,162,60,0.22);
}

/* soft card frame (info block, panels) */
.frame {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
}
/* soft pill (eyebrow chips / banners) */
.frame-soft {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 18px -12px rgba(46,41,15,0.6);
}

/* the cream sheet that holds the whole menu */
.menu-panel {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: clamp(20px, 4vw, 34px);
  box-shadow: var(--shadow-card);
  padding: clamp(1.2rem, 4vw, 3rem);
  margin: 1.75rem 0 3.5rem;
}

/* =========================================================
   STICKY HEADER + NAV
   ========================================================= */
.nav-link {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .12s ease;
}
.nav-link:hover { transform: translateY(-1px); color: var(--brown); }
.nav-link.is-active {
  color: var(--cream-2);
  background-color: var(--brown);
  border-color: var(--brown);
}

/* social buttons (kept for reuse; not currently rendered) */
.social-btn {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: var(--cream-2);
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .18s ease, box-shadow .2s ease;
}
.social-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 16px -8px rgba(46,33,24,0.4); background: var(--brown); border-color: var(--brown); color: var(--cream-2); }
/* Instagram: warm brand gradient on hover/focus */
.social-ig:hover,
.social-ig:focus-visible {
  background: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 26%, #D62976 56%, #962FBF 80%, #4F5BD5 100%);
  border-color: transparent;
  color: #fff;
}

/* =========================================================
   MENU ROWS — tap to customize
   ========================================================= */
.menu-item { break-inside: avoid; }

.add-row {
  cursor: pointer;
  position: relative;
  border-radius: 14px;
  transition: background-color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.add-row:hover { background-color: rgba(45,110,101,0.07); }
.add-row:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 2px; }

.add-row.photo-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.85rem 0.85rem;
}
.row-text { flex: 1 1 auto; min-width: 0; }
.row-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.row-side {
  flex: none;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0.6rem;
  padding-top: 0.1rem;
}

/* photo (optional — not used in current menu) */
.row-photo {
  flex: none;
  width: 78px; height: 78px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--tan);
  border: 1px solid var(--line);
  box-shadow: 0 10px 22px -14px rgba(46,33,24,0.6);
}
@media (min-width: 640px) { .row-photo { width: 86px; height: 86px; } }
.row-photo img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }

.price { font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0.01em; color: var(--brown); }

/* the round add button */
.add-plus {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem;
  border: 1.5px solid rgba(126,78,39,0.45);
  border-radius: 999px;
  color: var(--brown);
  background: rgba(230,162,60,0.10);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .25s ease;
}
.add-plus svg { width: 0.8rem; height: 0.8rem; display: block; }
.add-row:hover .add-plus,
.add-row:focus-visible .add-plus {
  background: var(--brown); color: var(--cream-2); border-color: var(--brown);
  transform: rotate(90deg);
}
@keyframes rowFlash {
  0%   { background-color: rgba(230,162,60,0.28); }
  100% { background-color: transparent; }
}
.add-row.added { animation: rowFlash .6s ease; }
.add-row.added .add-plus { background: var(--brown); border-color: var(--brown); color: var(--cream-2); transform: scale(1.1); }
.add-row.added .price { color: var(--berry); }

/* classic dot-leader (used by simple rows, kept for reuse) */
.menu-line { display: flex; align-items: baseline; width: 100%; gap: 0; }
.dots {
  flex: 1 1 auto;
  border-bottom: 2px dotted rgba(46,33,24,0.28);
  position: relative; top: -0.32em;
  margin: 0 0.55rem; min-width: 1.2rem;
}

/* floating "+n" cue */
.plus-one {
  position: absolute;
  right: -0.35rem; top: 50%;
  pointer-events: none; z-index: 2;
  font-family: var(--font-ui);
  font-weight: 800; font-size: 0.85rem;
  color: var(--brown);
  animation: plusOne 0.95s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes plusOne {
  0%   { opacity: 0; transform: translate(0, calc(-50% + 5px)) scale(.7); }
  25%  { opacity: 1; transform: translate(0, -50%) scale(1.12); }
  100% { opacity: 0; transform: translate(0, calc(-50% - 22px)) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .plus-one { animation-duration: .4s; } }

/* =========================================================
   BADGES (spicy / fan favorite) + macro chips
   ========================================================= */
.badge {
  display: inline-flex; align-items: center; gap: 0.26rem;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 0.5rem; line-height: 1;
  letter-spacing: 0.09em; text-indent: 0.09em;
  padding: 0.26rem 0.5rem 0.24rem;
  border: 1.5px solid currentColor; border-radius: 999px;
  vertical-align: middle; transform: translateY(-0.06em);
  white-space: nowrap;
}
.badge svg { width: 0.66rem; height: 0.66rem; }

.macros { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.macro {
  display: inline-flex; align-items: center; gap: 0.34rem;
  font-family: var(--font-ui);
  font-weight: 600; font-size: 0.64rem; line-height: 1;
  padding: 0.36rem 0.6rem 0.34rem 0.44rem;
  border-radius: 999px; border: 1.5px solid;
  white-space: nowrap;
}
.macro b { font-weight: 800; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.macro svg { width: 0.92rem; height: 0.92rem; flex: 0 0 auto; opacity: 0.92; }
.macro-protein { color: var(--berry);   background: rgba(192,64,46,0.10); border-color: rgba(192,64,46,0.4); }
.macro-carb    { color: var(--amber);   background: rgba(230,162,60,0.16); border-color: rgba(230,162,60,0.5); }

/* =========================================================
   ORDER-DISCOVERY HINT
   ========================================================= */
#order-hint { transition: opacity .5s ease, transform .5s ease, max-height .6s ease, margin .5s ease; }
#order-hint.dismissed { opacity: 0; transform: translateY(-6px); pointer-events: none; max-height: 0; margin: 0; overflow: hidden; }
.add-hint-coin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem;
  border: 1.5px solid var(--brown);
  border-radius: 999px;
  color: var(--brown);
  animation: hintCoin 2.6s ease-in-out 0.4s 3;
}
.add-hint-coin svg { width: 0.95rem; height: 0.95rem; display: block; }
@keyframes hintCoin {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(126,78,39,0); }
  50%      { transform: scale(1.12) rotate(90deg); box-shadow: 0 0 0 5px rgba(126,78,39,0.12); }
}
@media (prefers-reduced-motion: reduce) { .add-hint-coin { animation: none; } }

/* =========================================================
   MISC UTIL
   ========================================================= */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
section[id] { scroll-margin-top: 128px; }
.reveal { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* =========================================================
   ITEM CUSTOMIZE SHEET
   ========================================================= */
#sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(24,38,34,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
  z-index: 80;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#sheet-overlay.is-open { opacity: 1; pointer-events: auto; }

#item-sheet {
  position: fixed; z-index: 90;
  left: 50%; bottom: 0;
  width: min(100%, 480px);
  pointer-events: none;
  transform: translateX(-50%) translateY(110%);
  background: var(--cream);
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -22px 55px -18px rgba(24,38,34,0.45);
  display: flex; flex-direction: column;
  max-height: 88vh;
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
#item-sheet.is-open { transform: translateX(-50%) translateY(0); pointer-events: auto; }
@media (min-width: 640px) {
  #item-sheet {
    bottom: auto; top: 50%;
    border-radius: 24px;
    border-bottom: 1px solid var(--line);
    transform: translate(-50%, -44%) scale(.96);
    opacity: 0;
    transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .26s ease;
    box-shadow: var(--shadow-pop);
  }
  #item-sheet.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.sheet-grip { width: 42px; height: 5px; border-radius: 999px; background: rgba(46,33,24,0.18); margin: 11px auto 0; }
@media (min-width: 640px) { .sheet-grip { display: none; } }
.sheet-scroll { overflow-y: auto; overflow-x: hidden; padding: 0.5rem 1.5rem 0; -ms-overflow-style: none; scrollbar-width: none; }
.sheet-scroll::-webkit-scrollbar { width: 0; height: 0; }

.chip {
  font-family: var(--font-ui);
  font-weight: 600; font-size: 0.78rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink); background: var(--cream-2);
  cursor: pointer; white-space: nowrap;
  transition: all .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { border-color: var(--brown); color: var(--brown); }
.chip.is-on { background: var(--brown); border-color: var(--brown); color: var(--cream-2); }

#note-input {
  width: 100%; resize: none;
  font-family: var(--font-ui); font-size: 0.95rem;
  color: var(--ink); background: var(--cream-2);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 0.72rem 0.9rem; line-height: 1.4;
  transition: border-color .18s ease, box-shadow .18s ease;
}
#note-input::placeholder { color: rgba(46,33,24,0.4); }
#note-input:focus { outline: none; border-color: var(--brown); box-shadow: 0 0 0 3px rgba(126,78,39,0.14); }

.step-btn {
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 1.35rem; font-weight: 600; line-height: 1;
  color: var(--ink); border-radius: 999px;
  transition: background-color .16s ease, color .16s ease;
}
.step-btn:hover { background: rgba(126,78,39,0.1); color: var(--brown); }

.sheet-add {
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: 100%;
  background: var(--brown); color: var(--cream-2);
  font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.01em;
  font-size: 1rem;
  padding: 0.95rem 1rem;
  border-radius: 16px;
  box-shadow: 0 12px 26px -12px rgba(126,78,39,0.7);
  cursor: pointer;
  transition: background-color .18s ease, transform .12s ease, box-shadow .12s ease;
}
.sheet-add:hover { background: var(--brown-dark); box-shadow: 0 14px 28px -12px rgba(94,58,27,0.8); }
.sheet-add:active { transform: translateY(1px); }
.sheet-add[disabled] {
  background: rgba(46,33,24,0.18);
  box-shadow: none; cursor: not-allowed; pointer-events: none;
}

/* combo upsell toggle (hidden unless an item offers a combo) */
.macho-toggle {
  position: relative; display: flex; align-items: center; gap: 0.85rem;
  width: 100%; padding: 0.85rem 0.9rem; text-align: left;
  background: linear-gradient(135deg, var(--cream-2) 0%, var(--tan) 100%);
  border: 1px solid rgba(230,162,60,0.5);
  border-radius: 16px; cursor: pointer; overflow: hidden;
  box-shadow: 0 8px 18px -14px rgba(126,78,39,0.6);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, transform .16s ease, box-shadow .16s ease;
}
.macho-toggle:hover { border-color: var(--brown); transform: translateY(-1px); }
.macho-toggle.is-on { border-color: var(--brown); background: linear-gradient(135deg, var(--tan) 0%, rgba(126,78,39,0.1) 100%); }
.macho-tag {
  position: absolute; top: 0; right: 0;
  font-family: var(--font-ui); font-weight: 700; font-size: 0.54rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink); background: var(--gold);
  padding: 0.2rem 0.5rem 0.16rem; border-radius: 0 16px 0 12px;
}
.macho-emoji {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 12px;
  color: var(--cream-2);
  background: linear-gradient(150deg, var(--gold) 0%, var(--amber) 100%);
}
.macho-toggle.is-on .macho-emoji { background: linear-gradient(150deg, var(--brown) 0%, var(--brown-dark) 100%); }
.macho-emoji svg { width: 1.2rem; height: 1.2rem; }
.macho-copy { flex: 1 1 auto; min-width: 0; }
.macho-title { display: block; font-family: var(--font-ui); font-weight: 700; font-size: 0.94rem; color: var(--ink); }
.macho-title .macho-up { color: var(--brown); font-weight: 800; }
.macho-desc { display: block; font-family: var(--font-ui); font-size: 0.75rem; color: var(--muted); margin-top: 0.12rem; }
.macho-desc .macho-plus { color: var(--brown); font-weight: 800; padding: 0 0.05rem; }
.macho-switch {
  flex: none; position: relative;
  width: 2.5rem; height: 1.45rem; border-radius: 999px;
  background: rgba(46,33,24,0.2); transition: background-color .2s ease;
}
.macho-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: calc(1.45rem - 4px); height: calc(1.45rem - 4px);
  border-radius: 999px; background: var(--cream-2);
  box-shadow: 0 1px 3px rgba(46,33,24,0.3);
  transition: transform .2s cubic-bezier(.22,1,.36,1);
}
.macho-toggle.is-on .macho-switch { background: var(--brown); }
.macho-toggle.is-on .macho-switch::after { transform: translateX(calc(2.5rem - 1.45rem)); }

/* boost / free add-ons (hidden unless offered) */
.boost-list { display: flex; flex-direction: column; gap: 0.5rem; }
.boost-row {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.62rem 0.8rem; text-align: left;
  background: var(--cream-2); border: 1px solid var(--line-strong);
  border-radius: 13px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .16s ease, background-color .16s ease;
}
.boost-row:hover { border-color: var(--brown); }
.boost-row.is-on { border-color: var(--brown); background: rgba(126,78,39,0.07); }
.boost-check {
  flex: none; width: 1.35rem; height: 1.35rem; border-radius: 7px;
  border: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--cream-2); background: transparent;
  transition: background-color .16s ease, border-color .16s ease;
}
.boost-check svg { width: 0.82rem; height: 0.82rem; opacity: 0; transition: opacity .16s ease; }
.boost-row.is-on .boost-check { background: var(--brown); border-color: var(--brown); }
.boost-row.is-on .boost-check svg { opacity: 1; }
.boost-name { flex: 1 1 auto; font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.boost-price { flex: none; font-family: var(--font-ui); font-weight: 800; font-size: 0.9rem; color: var(--brown); font-variant-numeric: tabular-nums; }

.free-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.free-chip {
  display: inline-flex; align-items: center; gap: 0.34rem;
  font-family: var(--font-ui); font-weight: 600; font-size: 0.8rem;
  padding: 0.4rem 0.78rem 0.4rem 0.6rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--cream-2); color: var(--ink);
  cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.free-chip:hover { border-color: var(--brown); }
.free-ic { display: inline-flex; width: 0.82rem; height: 0.82rem; color: var(--amber); transition: color .18s ease, transform .22s ease; }
.free-ic svg { width: 100%; height: 100%; display: block; }
.free-chip.is-on { background: var(--brown); border-color: var(--brown); color: var(--cream-2); }
.free-chip.is-on .free-ic { color: var(--cream-2); transform: rotate(135deg); }

/* =========================================================
   CART — floating pill, drawer & lines
   ========================================================= */
#cart-pill {
  position: fixed; left: 50%;
  bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.62rem 1.15rem 0.62rem 1rem;
  background: var(--brown); color: var(--cream-2);
  border-radius: 999px;
  box-shadow: 0 16px 34px -10px rgba(70,41,15,0.65);
  cursor: pointer;
  transform: translateX(-50%) translateY(175%);
  opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease, background-color .2s ease;
}
#cart-pill.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
#cart-pill:hover { background: var(--brown-dark); }
#cart-pill .cart-bag { display: flex; color: var(--gold); }
#cart-pill .cart-bag svg { width: 1.35rem; height: 1.35rem; }
@media (min-width: 640px) { #cart-pill { bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); gap: 0.95rem; padding: 0.68rem 1.35rem 0.68rem 1.15rem; } }
@keyframes pillBump {
  0%   { transform: translateX(-50%) translateY(0); }
  35%  { transform: translateX(-50%) translateY(-7px) scale(1.035); }
  100% { transform: translateX(-50%) translateY(0); }
}
#cart-pill.bump { animation: pillBump .45s ease; }

#cart-overlay {
  position: fixed; inset: 0;
  background: rgba(24,38,34,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease; z-index: 60; will-change: opacity;
}
#cart-overlay.is-open { opacity: 1; pointer-events: auto; }
#cart-drawer {
  position: fixed; top: 0; right: 0; height: 100%;
  width: min(92vw, 430px);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
  z-index: 70;
  box-shadow: -18px 0 50px rgba(24,38,34,0.28);
  will-change: transform;
}
#cart-drawer.is-open { transform: translateX(0); }
.qbtn {
  width: 1.9rem; height: 1.9rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 1.15rem; line-height: 1;
  color: var(--ink); transition: color .2s ease;
}
.qbtn:hover { color: var(--brown); }

.cart-note {
  color: var(--ink-2);
  background: rgba(230,162,60,0.12);
  border-left: 2px solid var(--gold);
  border-radius: 0 6px 6px 0;
  padding: 0.28rem 0.55rem; margin-top: 0.4rem;
  font-size: 0.78rem; line-height: 1.35; font-style: italic;
}
.cart-edit {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--brown); cursor: pointer;
}
.cart-edit:hover { color: var(--brown-dark); text-decoration: underline; }
.cart-extras { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.16rem; }
.cart-extra { font-family: var(--font-ui); font-size: 0.76rem; color: var(--ink-2); display: flex; align-items: baseline; gap: 0.4rem; line-height: 1.3; }
.cart-extra .ex-dot { color: var(--brown); font-weight: 800; }
.cart-extra .ex-up { color: var(--brown); margin-left: auto; font-variant-numeric: tabular-nums; }

/* hold-to-clear */
.clear-hold {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  width: 100%; margin-top: 0.9rem; padding: 0.58rem 0.6rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; cursor: pointer; touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease;
}
.clear-hold:hover { border-color: rgba(192,64,46,0.55); }
.clear-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background: rgba(192,64,46,0.14); }
.clear-hold.holding .clear-fill { width: 100%; transition: width .9s linear; }
.clear-ic { position: relative; width: 0.85rem; height: 0.85rem; color: rgba(46,33,24,0.5); transition: color .2s ease; }
.clear-label { position: relative; font-family: var(--font-ui); font-weight: 500; font-size: 0.74rem; color: rgba(46,33,24,0.55); transition: color .2s ease; }
.clear-hold:hover .clear-label, .clear-hold:hover .clear-ic,
.clear-hold.holding .clear-label, .clear-hold.holding .clear-ic { color: var(--berry); }
@media (prefers-reduced-motion: reduce) { .clear-hold.holding .clear-fill { transition: none; width: 100%; } }

/* back-to-top */
#to-top {
  position: fixed; right: 1.15rem;
  bottom: calc(1.15rem + env(safe-area-inset-bottom, 0px));
  z-index: 45; width: 2.8rem; height: 2.8rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(24,38,34,0.45);
  color: var(--ink); cursor: pointer;
  opacity: 0; transform: translateY(150%) scale(.9); pointer-events: none;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, background-color .2s ease, color .2s ease;
}
#to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
#to-top:hover { background: var(--brown); color: var(--cream-2); border-color: var(--brown); }
#to-top svg { width: 1.15rem; height: 1.15rem; }
@media (min-width: 640px) { #to-top { right: 1.6rem; bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px)); width: 3rem; height: 3rem; } }

/* =========================================================
   COMBO PICKER (kept hidden — no combos in current menu)
   ========================================================= */
#combo-overlay {
  position: fixed; inset: 0;
  background: rgba(24,38,34,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease; z-index: 80;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#combo-overlay.is-open { opacity: 1; pointer-events: auto; }
#combo-sheet {
  position: fixed; z-index: 90; left: 50%; bottom: 0;
  width: min(100%, 480px); pointer-events: none;
  transform: translateX(-50%) translateY(110%);
  background: var(--cream);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -22px 55px -18px rgba(24,38,34,0.45);
  display: flex; flex-direction: column; max-height: 88vh;
  transition: transform .42s cubic-bezier(.22,1,.36,1);
}
#combo-sheet.is-open { transform: translateX(-50%) translateY(0); pointer-events: auto; }
@media (min-width: 640px) {
  #combo-sheet {
    bottom: auto; top: 50%; border-radius: 24px;
    border-bottom: 1px solid var(--line);
    transform: translate(-50%, -44%) scale(.96); opacity: 0;
    transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .26s ease;
    box-shadow: var(--shadow-pop);
  }
  #combo-sheet.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.combo-opt {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 0.85rem; background: var(--cream-2);
  border: 1px solid var(--line-strong); border-radius: 14px;
  transition: border-color .18s ease, background-color .18s ease;
}
.combo-opt.has-qty { border-color: var(--brown); background: rgba(126,78,39,0.06); }
.combo-opt-name { flex: 1 1 auto; font-family: var(--font-ui); font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.combo-opt-name small { display: block; font-weight: 500; font-size: 0.72rem; color: var(--muted); margin-top: 0.05rem; }
.combo-step { flex: none; display: flex; align-items: center; gap: 0.2rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 0.2rem; }
.combo-step button { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; color: var(--ink); border-radius: 999px; transition: background-color .15s ease, color .15s ease, opacity .15s ease; }
.combo-step button svg { width: 0.85rem; height: 0.85rem; }
.combo-step button:hover { background: rgba(126,78,39,0.1); color: var(--brown); }
.combo-step button[disabled] { opacity: 0.32; pointer-events: none; }
.combo-step .combo-qty { width: 1.4rem; text-align: center; font-family: var(--font-ui); font-weight: 800; font-size: 0.98rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.combo-count { font-family: var(--font-ui); font-weight: 600; font-size: 0.78rem; color: var(--ink-2); }
.combo-count b { color: var(--brown); }

/* =========================================================
   ORDER CELEBRATION — fiesta overlay before WhatsApp
   ========================================================= */
#order-fiesta {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(250,244,230,0.97) 0%, rgba(213,229,222,0.95) 60%, rgba(157,193,182,0.96) 100%);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: opacity .32s ease;
}
#order-fiesta.is-open { opacity: 1; pointer-events: auto; }
#order-fiesta.is-leaving { opacity: 0; }

.fiesta-rays {
  position: absolute; left: 50%; top: 45%;
  width: 150vmax; height: 150vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(230,162,60,0.14) 0deg 9deg, rgba(230,162,60,0) 9deg 18deg);
  opacity: 0; transition: opacity .55s ease .08s; z-index: 0;
}
#order-fiesta.is-open .fiesta-rays { opacity: 1; animation: fiestaRaySpin 18s linear infinite; }
@keyframes fiestaRaySpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }

.fiesta-confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cf { position: absolute; left: 50%; top: 45%; opacity: 0; will-change: transform, opacity; animation-name: confettiFly; animation-timing-function: cubic-bezier(.2,.55,.3,1); animation-fill-mode: forwards; }
.cf-t { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cf-c { border-radius: 999px; }
.cf-r { border-radius: 2px; }
@keyframes confettiFly {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  34%  { transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) rotate(var(--r1)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) rotate(var(--r2)); opacity: 0; }
}

.fiesta-core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1.5rem; }
.fiesta-badge {
  position: relative;
  width: clamp(118px, 30vw, 166px); height: clamp(118px, 30vw, 166px);
  margin-bottom: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0);
}
#order-fiesta.is-open .fiesta-badge { animation: fiestaBadgePop .72s cubic-bezier(.18,1.5,.4,1) .1s forwards; }
@keyframes fiestaBadgePop { 0% { transform: scale(0) rotate(-20deg); } 62% { transform: scale(1.12) rotate(5deg); } 100% { transform: scale(1) rotate(0deg); } }
.fiesta-disc {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  box-shadow: 0 22px 44px -18px rgba(24,38,34,0.5), inset 0 0 0 6px rgba(230,162,60,0.18);
}
.fiesta-logo { position: relative; width: 80%; height: auto; user-select: none; }
#order-fiesta.is-open .fiesta-logo { animation: fiestaBob 2.4s ease-in-out 0.8s infinite; }
@keyframes fiestaBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-5px) rotate(-2deg); } }
.fiesta-seal {
  position: absolute; right: -4px; bottom: -2px;
  width: 2.6rem; height: 2.6rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; color: var(--cream-2);
  background: var(--brown); border: 3px solid var(--cream-2);
  box-shadow: 0 6px 14px -4px rgba(70,41,15,0.7);
  transform: scale(0);
}
#order-fiesta.is-open .fiesta-seal { animation: fiestaSealPop .5s cubic-bezier(.18,1.6,.4,1) .58s forwards; }
@keyframes fiestaSealPop { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0deg); } }
.fiesta-seal svg { width: 1.3rem; height: 1.3rem; }

.fiesta-kicker {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(2.8rem, 10vw, 4rem); line-height: 1;
  color: var(--brown); opacity: 0; transform: translateY(14px);
}
.fiesta-title { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.05rem, 3.6vw, 1.4rem); letter-spacing: -0.01em; color: var(--ink); margin-top: 0.7rem; opacity: 0; transform: translateY(14px); }
.fiesta-sub { font-family: var(--font-ui); font-size: clamp(0.85rem, 2.6vw, 0.96rem); color: var(--ink-2); margin-top: 0.4rem; max-width: 22rem; line-height: 1.4; opacity: 0; transform: translateY(14px); }
#order-fiesta.is-open .fiesta-kicker { animation: fiestaRise .5s ease .34s forwards; }
#order-fiesta.is-open .fiesta-title  { animation: fiestaRise .5s ease .46s forwards; }
#order-fiesta.is-open .fiesta-sub    { animation: fiestaRise .5s ease .56s forwards; }
@keyframes fiestaRise { to { opacity: 1; transform: none; } }

.fiesta-dots { display: flex; gap: 0.42rem; margin-top: 1.15rem; opacity: 0; }
#order-fiesta.is-open .fiesta-dots { animation: fiestaRise .5s ease .68s forwards; }
.fiesta-dots span { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--brown); animation: fiestaDot 1s ease-in-out infinite; }
.fiesta-dots span:nth-child(2) { animation-delay: .15s; background: var(--gold); }
.fiesta-dots span:nth-child(3) { animation-delay: .3s;  background: var(--teal-ink); }
@keyframes fiestaDot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  #order-fiesta.is-open .fiesta-rays,
  #order-fiesta.is-open .fiesta-logo { animation: none; }
  #order-fiesta.is-open .fiesta-badge,
  #order-fiesta.is-open .fiesta-seal,
  #order-fiesta.is-open .fiesta-kicker,
  #order-fiesta.is-open .fiesta-title,
  #order-fiesta.is-open .fiesta-sub,
  #order-fiesta.is-open .fiesta-dots { animation: none; opacity: 1; transform: none; }
  .cf { display: none; }
  .macho-toggle:hover { transform: none; }
}