:root {
  --brown-900: #200f02;
  --brown-800: #2e1503;
  --brown-700: #4a2408;
  --brown-600: #572700;
  --brown-ink: #271606;
  --brown-ink-2: #3a2710;
  --brown-soft: #6b4920;
  --brown-soft-2: #7a5a34;
  --gold: #c9a24a;
  --gold-soft: #e7d4b0;
  --gold-dim: #9a7a4a;
  --paper: #f4ecd8;
  --paper-2: #ecdfc2;
  --paper-3: #f1e6cf;
  --cream: #f5efe2;
  --price-accent: #4f2206;
  --danger: #8a2c1f;
  --shadow-lg: 0 30px 90px rgba(0,0,0,.55);
  --font-display: 'Cormorant Garamond', serif;
  --font-body: 'EB Garamond', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--brown-ink);
  background: var(--brown-900);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

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

@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes glow { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }
@keyframes popIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font: 700 13px var(--font-body); letter-spacing: .4em; text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.75);
  background: rgba(20,9,1,.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  padding: 9px 22px; border-radius: 30px;
}
.eyebrow::before, .eyebrow::after {
  content: ''; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold));
}
.eyebrow::after { background: linear-gradient(270deg, transparent, var(--gold)); }

/* ---- Hero / landing (index.html) ---- */
.hero-page {
  min-height: 100vh; width: 100%; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, var(--brown-700) 0%, var(--brown-800) 45%, var(--brown-900) 100%);
}
.hero-page::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: repeating-linear-gradient(118deg, rgba(201,162,74,.05) 0 2px, transparent 2px 9px);
}
.hero-bg {
  position: fixed; inset: 0; background-size: cover; background-position: center 68%, center 68%;
  pointer-events: none; z-index: 0; transform-origin: center 68%;
  animation: heroFadeIn 1.6s ease both, heroZoom 26s ease-in-out 1.6s infinite alternate;
}
@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: heroFadeIn .6s ease both; }
}
.hero-glow {
  position: absolute; left: 50%; top: 6%; width: 640px; height: 640px; max-width: 90vw; z-index: 1;
  transform: translateX(-50%); background: radial-gradient(circle, rgba(201,162,74,.16), transparent 62%);
  filter: blur(6px); animation: glow 6s ease-in-out infinite; pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column;
  align-items: center; text-align: center;
}
.hero-intro {
  position: relative; min-height: 100vh; width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 56px 20px 90px;
}
.hero-content {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  padding: 20px 20px 70px;
}
.brand-mark {
  width: 300px; max-width: 72vw; border-radius: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.5);
  animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) both;
}
.hero-subtitle {
  font: italic 600 22px var(--font-body); color: var(--gold-soft); letter-spacing: .03em;
  margin: 30px 0 46px; animation: fadeUp .9s .3s ease both;
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 2px 20px rgba(0,0,0,.8);
}
.hero-eyebrow { margin: 26px 0 2px; animation: fadeUp .9s .18s ease both; }

.scroll-cue {
  position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
  color: var(--gold-soft); text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.75);
  animation: fadeUp .9s 1.1s ease both, scrollCueBounce 2.4s ease-in-out 2s infinite;
  transition: opacity .4s ease;
}
.scroll-cue__label {
  font: 600 10px var(--font-body); letter-spacing: .35em; text-transform: uppercase;
}
.scroll-cue__arrow { font-size: 22px; line-height: 1; }
@keyframes scrollCueBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(9px); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue { animation: fadeUp .9s 1.1s ease both; }
}

.reveal-on-scroll {
  opacity: 0; transform: translateY(34px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal-on-scroll.is-revealed { opacity: 1; transform: none; }
.reveal-delay-1.is-revealed { transition-delay: .12s; }
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

.option-grid {
  display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; width: 100%; max-width: 920px;
}
.option-card {
  flex: 1 1 340px; max-width: 420px; cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  border-radius: 10px; padding: 3px; box-shadow: var(--shadow-lg);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s;
  display: block;
}
.option-card:hover, .option-card:focus-visible { transform: translateY(-10px); box-shadow: 0 34px 80px rgba(0,0,0,.62); }
.option-card:active {
  transform: scale(.97); box-shadow: 0 14px 34px rgba(0,0,0,.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.option-card__inner {
  border: 1px solid rgba(87,39,0,.28); border-radius: 8px; padding: 42px 30px 36px;
  text-align: center; height: 100%;
}
.option-card__eyebrow {
  font: 600 13px var(--font-body); letter-spacing: .38em; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: 16px;
}
.option-card__title {
  font: 700 32px/1.15 var(--font-display); letter-spacing: .01em; text-transform: uppercase;
  color: var(--brown-600);
}
.option-card__rule { width: 54px; height: 2px; background: var(--brown-600); margin: 18px auto; opacity: .55; }
.option-card__desc {
  font: italic 500 16px/1.55 var(--font-body); color: var(--brown-soft-2);
  max-width: 280px; margin: 0 auto 26px;
}
.option-card__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 13.5px var(--font-body); letter-spacing: .15em; text-transform: uppercase;
  color: var(--cream); background: var(--brown-600); padding: 13px 26px; border-radius: 3px;
  transition: filter .25s, transform .25s, letter-spacing .25s;
}
.option-card:hover .option-card__cta { filter: brightness(1.12); letter-spacing: .21em; }
.option-card:active .option-card__cta { transform: scale(.95); filter: brightness(.96); }
.option-card__icon {
  font-size: 34px; margin-bottom: 14px; display: inline-block;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.option-card:hover .option-card__icon { transform: scale(1.15) rotate(-4deg); }

.hero-footnote {
  margin-top: 12px; font: italic 600 14px var(--font-body); letter-spacing: .06em; color: var(--gold-dim);
  display: inline-block; background: rgba(20,9,1,.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  padding: 9px 24px; border-radius: 30px;
}

.hero-gallery {
  margin-top: 54px; width: 100%; max-width: 900px; text-align: center;
}
.hero-gallery__grid {
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-top: 20px;
}
.hero-gallery__photo {
  flex: 1 1 320px; max-width: 420px; border-radius: 10px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.45); border: 1px solid rgba(201,162,74,.35);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.hero-gallery__photo:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(0,0,0,.55); }
.hero-gallery__photo img {
  width: 100%; height: 260px; object-fit: cover; display: block; transition: transform .7s ease;
}
.hero-gallery__photo:hover img { transform: scale(1.07); }
@media (max-width: 600px) {
  .hero-gallery__photo img { height: 200px; }
}

/* ---- Shared site header ---- */
.site {
  min-height: 100vh; background-color: var(--brown-900);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-attachment: fixed;
}
.site-header {
  background: rgba(87,39,0,.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 18px 20px; text-align: center; position: relative;
}
.site-header__logo { width: 230px; max-width: 60vw; margin: 0 auto 14px; border-radius: 6px; }
.site-header__title {
  font: 700 20px var(--font-display); letter-spacing: .4em; text-transform: uppercase;
  color: var(--paper-3); padding-left: .4em; margin-bottom: 14px;
}
.site-header__nav { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.site-header__link, .site-header__link--solid {
  font: 600 11.5px var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; padding: 9px 16px; border-radius: 3px; transition: background .25s, filter .25s;
  display: inline-flex; align-items: center; gap: 6px;
}
.site-header__link { color: var(--gold-soft); border: 1px solid rgba(231,212,176,.5); }
.site-header__link:hover { background: rgba(231,212,176,.15); }
.site-header__link--solid { color: var(--brown-ink-2); background: var(--gold-soft); border: 1px solid var(--gold-soft); }
.site-header__link--solid:hover { filter: brightness(1.08); }

.tab-nav {
  display: flex; justify-content: center; gap: 8px; background: rgba(46,21,3,.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 10px 14px; position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.tab-btn {
  font: 600 12.5px var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  background: transparent; color: var(--gold-soft); border: 1px solid rgba(201,162,74,.4);
  padding: 9px 18px; border-radius: 20px; transition: background .25s, color .25s, transform .15s;
}
.tab-btn.is-active { background: var(--gold); color: var(--brown-ink); border-color: var(--gold); }
.tab-btn:active { transform: scale(.93); }

.chip-nav {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px; background: rgba(46,21,3,.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  position: sticky; top: 46px; z-index: 19; scrollbar-width: none;
}
.chip-nav::-webkit-scrollbar { display: none; }
@media (min-width: 900px) {
  .chip-nav { justify-content: center; flex-wrap: wrap; overflow-x: visible; }
}
.chip-nav a {
  flex: 0 0 auto; font: 600 11.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-soft); text-decoration: none; border: 1px solid rgba(201,162,74,.35);
  padding: 7px 14px; border-radius: 16px; white-space: nowrap; transition: background .2s, transform .15s;
}
.chip-nav a:hover, .chip-nav a.is-active { background: rgba(201,162,74,.22); }
.chip-nav a:active { transform: scale(.92); }

.page-body {
  max-width: 1080px; margin: 0 auto; padding: 36px 18px 90px;
}

/* ---- Printed-menu style ---- */
.menu-sheet {
  max-width: 1000px; margin: 28px auto; background-color: var(--paper-3);
  background-image: radial-gradient(140% 120% at 50% -12%, rgba(255,250,238,.28), transparent 50%),
                     radial-gradient(110% 85% at 50% 112%, rgba(110,72,26,.12), transparent 55%);
  box-shadow: var(--shadow-lg); border-radius: 4px; overflow: hidden;
  animation: fadeUp .7s cubic-bezier(.2,.7,.2,1) both;
  padding: 40px clamp(16px, 4.5vw, 60px) 50px;
}
.menu-section { margin-top: 40px; }
.menu-section:first-child { margin-top: 0; }
.menu-section__head {
  display: flex; align-items: center; gap: 16px; margin: 6px 0 10px;
}
.menu-section__head + .menu-cols { margin-top: 20px; }
.menu-section__head::before, .menu-section__head::after {
  content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(176,138,78,.75));
}
.menu-section__head::after { background: linear-gradient(270deg, transparent, rgba(176,138,78,.75)); }
.menu-section__title {
  font: 700 clamp(26px, 4.4vw, 38px)/1.1 var(--font-display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--price-accent); white-space: nowrap;
}
.menu-section__tagline {
  text-align: center; font: italic 600 14px var(--font-body); letter-spacing: .22em; text-transform: uppercase;
  color: var(--brown-soft); margin: 2px 0 30px;
}
.menu-cols { column-count: 2; column-gap: 48px; }
@media (max-width: 720px) { .menu-cols { column-count: 1; } }

.menu-item { break-inside: avoid; margin: 0 0 18px; }
.menu-item__row { display: flex; align-items: baseline; gap: 10px; }
.menu-item__name {
  font: 700 17.5px var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--brown-ink);
}
.menu-item__name small { font-weight: 500; text-transform: none; color: var(--brown-soft); }
.menu-item__leader { flex: 1; border-bottom: 1px dotted rgba(176,138,78,.55); transform: translateY(-3px); }
.menu-item__price { font: 700 17.5px var(--font-body); color: var(--price-accent); white-space: nowrap; }
.menu-item__desc { font: italic 15px/1.55 var(--font-body); color: var(--brown-ink-2); margin-top: 3px; }

.cervezas-box {
  max-width: 92%; margin: 0 auto; background: var(--brown-600); border-radius: 4px; padding: 18px 26px;
  box-shadow: inset 0 0 0 1px rgba(241,227,203,.22), inset 0 0 0 5px var(--brown-600), inset 0 0 0 6px rgba(241,227,203,.22);
  text-align: center; font: 600 clamp(15px,2.6vw,18px)/2 var(--font-body); color: #e8d6b8; letter-spacing: .02em;
}

.side-box {
  background: var(--brown-600); margin: 42px 0 0; padding: 26px 30px 28px; text-align: center; border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(241,227,203,.22), inset 0 0 0 5px var(--brown-600), inset 0 0 0 6px rgba(241,227,203,.22);
}
.side-box__title {
  font: 700 clamp(20px,3.6vw,27px) var(--font-display); letter-spacing: .18em; padding-left: .18em;
  text-transform: uppercase; color: #f1e3cb; margin-bottom: 12px;
}
.side-box__list { font: 500 clamp(15px,2.6vw,18px)/1.95 var(--font-body); color: #e8d6b8; letter-spacing: .02em; }

/* ---- Domicilio: ordering UI ---- */
.order-section { margin-top: 44px; }
.order-section:first-child { margin-top: 0; }
.order-section__head {
  display: flex; align-items: center; gap: 14px; margin: 0 0 32px; color: var(--gold-soft);
}
.order-section__head::before, .order-section__head::after {
  content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,162,74,.5));
}
.order-section__head::after { background: linear-gradient(270deg, transparent, rgba(201,162,74,.5)); }
.order-section__title {
  font: 700 clamp(22px,4vw,30px) var(--font-display); letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap; text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.order-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }

.item-card {
  background: linear-gradient(180deg, var(--paper), var(--paper-2)); border-radius: 8px;
  padding: 18px 18px 16px; box-shadow: 0 10px 26px rgba(0,0,0,.28);
  display: flex; flex-direction: column; gap: 8px;
}
.item-card__top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.item-card__name { font: 700 16.5px var(--font-body); text-transform: uppercase; letter-spacing: .02em; color: var(--brown-ink); }
.item-card__price { font: 700 16.5px var(--font-body); color: var(--price-accent); white-space: nowrap; }
.item-card__desc { font: italic 600 16px/1.5 var(--font-body); color: var(--brown-soft-2); flex: 1; min-height: 1px; }
.item-card__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; }

.qty-stepper {
  display: flex; align-items: center; gap: 0; border: 1px solid rgba(87,39,0,.3); border-radius: 20px; overflow: hidden;
}
.qty-stepper button {
  background: var(--brown-600); color: var(--cream); border: none; width: 30px; height: 30px;
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: filter .2s;
}
.qty-stepper button:hover { filter: brightness(1.15); }
.qty-stepper button:disabled { opacity: .4; cursor: default; }
.qty-stepper__val { width: 32px; text-align: center; font: 600 14px var(--font-body); color: var(--brown-ink); }

.add-btn {
  font: 600 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  background: var(--brown-600); color: var(--cream); border: none; padding: 9px 18px; border-radius: 20px;
  transition: filter .2s, transform .2s;
}
.add-btn:hover { filter: brightness(1.12); }
.add-btn:active { transform: scale(.96); }
.add-btn.is-added { background: #3c6e3f; }

.addon-add-badge {
  font: 600 11px var(--font-body); letter-spacing: .04em; color: var(--brown-soft-2);
  background: rgba(87,39,0,.1); padding: 5px 10px; border-radius: 14px; white-space: nowrap;
}

/* ---- Floating cart button ---- */
.cart-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  background: var(--gold); color: var(--brown-ink); border: none; border-radius: 30px;
  padding: 14px 22px; font: 700 14px var(--font-body); letter-spacing: .05em;
  display: flex; align-items: center; gap: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.45);
  transition: transform .25s;
}
.cart-fab:hover { transform: translateY(-3px); }
.cart-fab:active { transform: scale(.94); }
.cart-fab__badge {
  background: var(--brown-600); color: var(--cream); border-radius: 50%; min-width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; font: 700 12px var(--font-body); padding: 0 5px;
}
.cart-fab.is-empty { opacity: 0; pointer-events: none; transform: translateY(20px); }

/* ---- Cart drawer ---- */
.cart-overlay {
  position: fixed; inset: 0; background: rgba(10,5,1,.55); z-index: 50; opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.cart-overlay.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; z-index: 51; background: var(--cream); box-shadow: -10px 0 40px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
  right: 0; top: 0; bottom: 0; width: min(420px, 100vw);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head {
  background: var(--brown-600); color: var(--paper-3); padding: 18px 20px; display: flex;
  align-items: center; justify-content: space-between;
}
.cart-drawer__head h2 { margin: 0; font: 700 20px var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.cart-drawer__close { background: none; border: none; color: var(--paper-3); font-size: 22px; line-height: 1; padding: 4px; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.cart-drawer__foot { border-top: 1px solid rgba(87,39,0,.2); padding: 16px 20px 22px; background: var(--paper); }

.cart-empty { text-align: center; color: var(--brown-soft-2); font: italic 16px var(--font-body); padding: 50px 10px; }

.cart-line { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed rgba(87,39,0,.2); }
.cart-line__info { flex: 1; }
.cart-line__name { font: 700 15px var(--font-body); text-transform: uppercase; color: var(--brown-ink); }
.cart-line__unit { font: italic 12.5px var(--font-body); color: var(--brown-soft-2); }
.cart-line__addons { font: 600 12px var(--font-body); color: var(--gold-dim); margin: 2px 0; }
.cart-line__ctrl { display: flex; align-items: center; gap: 10px; }
.cart-line__total { font: 700 14.5px var(--font-body); color: var(--price-accent); min-width: 78px; text-align: right; }
.cart-line__remove { background: none; border: none; color: var(--danger); font-size: 17px; padding: 2px 4px; }

.cart-total-row {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px;
  font: 700 20px var(--font-display); color: var(--brown-ink);
}
.cart-total-row span:last-child { color: var(--price-accent); }
.cart-tax-note { font: italic 12.5px var(--font-body); color: var(--brown-soft-2); margin: -8px 0 14px; }

.field { margin-bottom: 12px; }
.field label {
  display: block; font: 600 11.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  color: var(--brown-soft); margin-bottom: 5px;
}
.field input, .field textarea, .field select {
  width: 100%; font: 500 15px var(--font-body); padding: 10px 12px; border: 1px solid rgba(87,39,0,.28);
  border-radius: 5px; background: #fff; color: var(--brown-ink); resize: vertical;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.field-error { color: var(--danger); font: 600 12px var(--font-body); margin-top: 4px; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field.has-error .field-error { display: block; }

.radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-pill {
  flex: 1; min-width: 120px; text-align: center; border: 1px solid rgba(87,39,0,.3); border-radius: 20px;
  padding: 9px 10px; font: 600 12.5px var(--font-body); letter-spacing: .04em; color: var(--brown-soft-2);
  cursor: pointer; transition: background .2s, color .2s;
}
.radio-pill input { display: none; }
.radio-pill.is-checked { background: var(--brown-600); color: var(--cream); border-color: var(--brown-600); }

.whatsapp-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #25D366; color: #fff; border: none; padding: 15px 18px; border-radius: 6px;
  font: 700 15px var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(37,211,102,.35); transition: filter .2s, transform .2s;
}
.whatsapp-btn:hover { filter: brightness(1.06); }
.whatsapp-btn:active { transform: scale(.98); }
.whatsapp-btn:disabled { opacity: .5; cursor: default; box-shadow: none; }
.whatsapp-btn svg { width: 20px; height: 20px; fill: #fff; flex: 0 0 auto; }

.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 10px); z-index: 60;
  background: var(--brown-ink); color: var(--paper-3); padding: 11px 22px; border-radius: 30px;
  font: 600 13.5px var(--font-body); letter-spacing: .03em; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); animation: popIn .25s ease; }

.addon-modal {
  position: fixed; z-index: 71; background: var(--cream); border-radius: 10px;
  left: 50%; top: 50%; width: min(460px, 92vw); max-height: 85vh; display: flex; flex-direction: column;
  transform: translate(-50%, -50%) scale(.94); opacity: 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .28s; box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.addon-modal.is-open { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
#addonOverlay { z-index: 70; }

.addon-modal__head {
  background: var(--brown-600); color: var(--paper-3); padding: 18px 20px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  border-radius: 10px 10px 0 0;
}
.addon-modal__eyebrow {
  font: 600 11px var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 4px;
}
.addon-modal__title { margin: 0; font: 700 22px var(--font-display); letter-spacing: .03em; }
.addon-modal__close { background: none; border: none; color: var(--paper-3); font-size: 22px; line-height: 1; padding: 4px; flex: 0 0 auto; }

.addon-modal__body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.addon-modal__hint { margin: 0 0 14px; font: italic 500 14px var(--font-body); color: var(--brown-soft-2); }

.addon-option {
  display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px dashed rgba(87,39,0,.18);
  cursor: pointer;
}
.addon-option:last-child { border-bottom: none; }
.addon-option input { width: 18px; height: 18px; accent-color: var(--brown-600); flex: 0 0 auto; }
.addon-option__name { flex: 1; font: 600 15px var(--font-body); color: var(--brown-ink); }
.addon-option__price { font: 700 14px var(--font-body); color: var(--price-accent); white-space: nowrap; }
.addon-option__price--free { color: #3c6e3f; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; }

.addon-modal__foot { border-top: 1px solid rgba(87,39,0,.2); padding: 16px 20px 20px; background: var(--paper); border-radius: 0 0 10px 10px; }
.addon-modal__total {
  display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px;
  font: 700 19px var(--font-display); color: var(--brown-ink);
}
.addon-modal__total span:last-child { color: var(--price-accent); }
.addon-modal__confirm {
  margin-bottom: 10px; background: var(--brown-600); box-shadow: 0 10px 24px rgba(87,39,0,.35);
}
.addon-modal__skip {
  width: 100%; background: none; border: 1px solid rgba(87,39,0,.35); color: var(--brown-soft-2);
  font: 600 12.5px var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: 12px; border-radius: 6px;
  transition: background .2s;
}
.addon-modal__skip:hover { background: rgba(87,39,0,.08); }

.back-link {
  display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--font-body);
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-soft); text-decoration: none;
  position: absolute; left: 18px; top: 18px;
}
.back-link:hover { color: var(--gold); }

.info-banner {
  max-width: 1000px; margin: 28px auto 30px; text-align: center; font: italic 500 17px var(--font-body);
  color: var(--gold-dim); padding: 0 18px; text-shadow: 0 2px 10px rgba(0,0,0,.7);
}

@media (max-width: 600px) {
  .site-header { padding-top: 46px; }
  .cart-drawer { width: 100%; }
  .menu-sheet { border-radius: 0; margin: 0; }

  .menu-section__head, .order-section__head { flex-wrap: wrap; justify-content: center; }
  .menu-section__head::before, .menu-section__head::after,
  .order-section__head::before, .order-section__head::after { display: none; }
  .menu-section__title {
    font-size: clamp(22px, 7.5vw, 30px); white-space: normal; text-align: center; flex: 1 1 100%;
  }
  .order-section__title {
    font-size: clamp(20px, 7vw, 26px); white-space: normal; text-align: center; flex: 1 1 100%;
  }
}