/* ============================================================
   RESTAURANT DEMO — design tokens
   Palette inspired by Bangladeshi rickshaw art & nakshi kantha:
   paddy ivory background, nakshi maroon primary, turmeric gold
   accent, deep jute green for dark surfaces.
============================================================ */
:root{
  --paddy:        #F7F2E7;
  --paddy-deep:   #EFE6D4;
  --card:         #FFFDF8;
  --ink:          #241914;
  --ink-soft:     #5B4B42;
  --maroon:       #7A1F2B;
  --maroon-dark:  #56141D;
  --maroon-tint:  #F4E3E1;
  --gold:         #E0A527;
  --gold-dark:    #B9820F;
  --jute:         #1F4B3F;
  --jute-dark:    #123128;
  --line:         rgba(36,25,20,.12);
  --shadow:       0 18px 40px -18px rgba(36,25,20,.35);
  --shadow-sm:    0 8px 20px -12px rgba(36,25,20,.3);
  --radius:       16px;
  --radius-sm:    10px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paddy);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }

.section-eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--maroon);
  font-weight:700;
  margin:0 0 .6rem;
}
.section-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.7rem, 3.2vw, 2.6rem);
  margin:0 0 .8rem;
  line-height:1.15;
}
.section-sub{ color:var(--ink-soft); max-width:640px; margin:0 auto; }
.section-head{ text-align:center; max-width:680px; margin:0 auto 2.5rem; padding:0 1.5rem; }
.section-head.light .section-title{ color:#fff; }
.section-head.light .section-eyebrow{ color:var(--gold); }
.light-sub{ color:rgba(255,255,255,.75) !important; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.75rem 1.4rem; border-radius:999px; border:1.5px solid transparent;
  font-weight:700; font-size:.92rem; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn-lg{ padding:.9rem 1.7rem; font-size:1rem; }
.btn-block{ width:100%; }
.btn-primary{ background:var(--maroon); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--maroon-dark); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--maroon); color:var(--maroon); }
.btn-outline-light{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.55); backdrop-filter:blur(6px); }
.btn-outline-light:hover{ background:rgba(255,255,255,.2); }
.btn-cart{ position:relative; background:var(--gold); color:var(--ink); border-radius:12px; padding:.6rem .8rem; }
.btn-cart:hover{ background:var(--gold-dark); }
.cart-count{
  position:absolute; top:-6px; right:-6px; background:var(--maroon); color:#fff;
  font-size:.65rem; font-weight:800; min-width:18px; height:18px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ---------- scallop divider (signature motif) ---------- */
.scallop-divider{
  height:22px; width:100%;
  background-repeat:repeat-x;
  background-size:26px 26px;
}
.scallop-gold{ background-image:radial-gradient(circle at 13px 0, transparent 12px, var(--gold) 13px); }
.scallop-maroon{ background-image:radial-gradient(circle at 13px 0, transparent 12px, var(--maroon) 13px); }

/* ---------- demo ribbon ---------- */
.demo-ribbon{
  background:var(--jute-dark); color:#fff; text-align:center; font-size:.8rem;
  padding:.5rem 1rem; font-weight:600;
}
.demo-ribbon a{ color:var(--gold); text-decoration:underline; }

/* ---------- ticker ---------- */
.ticker-wrap{ background:var(--maroon); color:#fff; overflow:hidden; white-space:nowrap; }
.ticker{ display:inline-block; padding:.55rem 0; animation:ticker 24s linear infinite; font-size:.85rem; font-weight:600; }
.ticker span{ margin:0 2.5rem; }
@keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40; background:rgba(247,242,231,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1240px; margin:0 auto; padding:.85rem 1.5rem;
  display:flex; align-items:center; gap:1.5rem; position:relative;
}
.brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; }
.brand-mark{ font-size:1.7rem; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; }
.brand-tag{ font-family:var(--font-mono); font-size:.65rem; letter-spacing:.08em; color:var(--maroon); text-transform:uppercase; }
.main-nav{ display:flex; gap:1.8rem; }
.main-nav a{ font-weight:600; font-size:.92rem; color:var(--ink-soft); transition:color .15s; }
.main-nav a:hover{ color:var(--maroon); }
.header-actions{ display:flex; align-items:center; gap:.6rem; }
.nav-toggle{ display:none; flex-direction:column; gap:4px; background:none; border:0; padding:.4rem; }
.nav-toggle span{ width:22px; height:2px; background:var(--ink); border-radius:2px; }

/* ---------- hero ---------- */
.hero{ position:relative; height:min(88vh, 720px); min-height:460px; overflow:hidden; color:#fff; }
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.2s ease;
}
.hero-slide.active{ opacity:1; }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(36,25,20,.55) 0%, rgba(36,25,20,.35) 45%, rgba(36,25,20,.75) 100%); }
.hero-content{
  position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 1.5rem;
}
.hero-eyebrow{ font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:var(--gold); margin:0 0 1rem; }
.hero-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.6rem, 7vw, 5.2rem); margin:0; }
.hero-sub{ font-size:clamp(1rem,2vw,1.25rem); max-width:560px; margin:1rem 0 2rem; opacity:.92; }
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.hero-dots{ position:absolute; bottom:38px; left:0; right:0; z-index:2; display:flex; gap:.5rem; justify-content:center; }
.hero-dots button{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45); border:0; padding:0; }
.hero-dots button.active{ background:var(--gold); width:22px; border-radius:5px; transition:width .2s; }
.hero .scallop-divider{ position:absolute; bottom:0; left:0; right:0; z-index:2; }

/* ---------- stats strip ---------- */
.stats-strip{
  display:grid; grid-template-columns:repeat(4,1fr); max-width:1000px; margin:-1px auto 0;
  background:var(--card); border-bottom:1px solid var(--line);
}
.stat{ text-align:center; padding:1.6rem 1rem; border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat-num{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:var(--maroon); }
.stat-label{ font-size:.78rem; color:var(--ink-soft); }

/* ---------- menu ---------- */
.menu-section{ max-width:1240px; margin:0 auto; padding:4.5rem 1.5rem 3rem; }
.menu-toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-bottom:2rem; position:sticky; top:66px; z-index:10; background:var(--paddy); padding:.6rem 0;
}
.cat-pills{ display:flex; gap:.5rem; flex-wrap:wrap; }
.cat-pill{
  font-family:var(--font-mono); font-size:.78rem; font-weight:600; padding:.5rem 1rem;
  border-radius:999px; border:1.5px solid var(--line); background:var(--card); color:var(--ink-soft);
  transition:.15s;
}
.cat-pill.active,.cat-pill:hover{ background:var(--maroon); border-color:var(--maroon); color:#fff; }
.search-box{
  display:flex; align-items:center; gap:.5rem; background:var(--card); border:1.5px solid var(--line);
  border-radius:999px; padding:.5rem 1rem; min-width:220px; color:var(--ink-soft);
}
.search-box input{ border:0; background:none; outline:0; font-size:.9rem; width:100%; color:var(--ink); }

.menu-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:1.4rem; }
.menu-empty{ text-align:center; color:var(--ink-soft); padding:3rem 0; }

/* ---------- shop layout: menu + sticky cart ---------- */
.shop-grid{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:start; }
.shop-main{ min-width:0; }

@media (min-width:1024px){
  .shop-grid{ grid-template-columns:1fr 340px; }
  .cart-panel{
    position:sticky; top:90px; align-self:start; max-height:calc(100vh - 110px);
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); display:flex; flex-direction:column; overflow:hidden;
  }
  .cart-panel .cart-items{ max-height:none; }
  .btn-cart{ display:none; }
}

.item-card{
  background:var(--card); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease;
}
.item-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.item-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--paddy-deep); }
.item-photo img{ width:100%; height:100%; object-fit:cover; }
.item-badges{ position:absolute; top:.6rem; left:.6rem; display:flex; gap:.35rem; flex-wrap:wrap; }
.badge{
  font-family:var(--font-mono); font-size:.62rem; font-weight:700; text-transform:uppercase;
  padding:.28rem .55rem; border-radius:999px; letter-spacing:.04em;
}
.badge-popular{ background:var(--gold); color:var(--ink); }
.badge-chef{ background:var(--maroon); color:#fff; }
.badge-spicy{ background:#C0392B; color:#fff; }
.badge-new{ background:var(--jute); color:#fff; }
.spice-indicator{ position:absolute; top:.6rem; right:.6rem; background:rgba(36,25,20,.65); border-radius:999px; padding:.25rem .5rem; font-size:.7rem; }
.item-body{ padding:1rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.item-name{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; margin:0; }
.item-desc{ font-size:.85rem; color:var(--ink-soft); line-height:1.4; flex:1; }
.item-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.4rem; }
.item-price{ font-family:var(--font-mono); font-weight:700; color:var(--maroon); font-size:1rem; }
.item-price small{ color:var(--ink-soft); font-weight:500; font-size:.72rem; }
.add-btn{
  background:var(--jute); color:#fff; border:0; border-radius:10px; padding:.5rem .85rem;
  font-weight:700; font-size:.82rem; display:flex; align-items:center; gap:.35rem; transition:.15s;
}
.add-btn:hover{ background:var(--jute-dark); }
.item-unavailable{ opacity:.55; }
.item-unavailable .add-btn{ background:var(--line); color:var(--ink-soft); pointer-events:none; }

/* ---------- offers ---------- */
.offers-section{ background:var(--jute); color:#fff; padding:4rem 1.5rem; }
.offers-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem; }
.offer-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  padding:1.4rem; display:flex; flex-direction:column; gap:.5rem;
}
.offer-emoji{ font-size:1.8rem; }
.offer-label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.offer-title{ font-family:var(--font-display); font-size:1.2rem; font-weight:600; margin:0; }
.offer-desc{ font-size:.86rem; color:rgba(255,255,255,.78); }
.offer-code{
  font-family:var(--font-mono); background:rgba(255,255,255,.12); display:inline-block; width:fit-content;
  padding:.4rem .7rem; border-radius:6px; font-size:.78rem; margin-top:.3rem; color:#fff; border:1px dashed rgba(255,255,255,.4);
  cursor:pointer; transition:.15s;
}
.offer-code:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.offer-expiry{ font-size:.72rem; color:rgba(255,255,255,.6); margin-top:.3rem; }

/* ---------- story ---------- */
.story-section{
  max-width:1240px; margin:5rem auto; padding:0 1.5rem;
  display:grid; grid-template-columns:.85fr 1.15fr; gap:3rem; align-items:center;
}
.story-media img{ border-radius:var(--radius); box-shadow:var(--shadow); aspect-ratio:4/5; object-fit:cover; }
.story-copy p{ color:var(--ink-soft); line-height:1.7; }
.story-badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.5rem; }
.story-badge{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.9rem; display:flex; flex-direction:column; gap:.2rem;
}
.story-badge strong{ font-family:var(--font-display); }
.story-badge span{ font-size:.78rem; color:var(--ink-soft); }

/* ---------- reviews ---------- */
.reviews-section{ padding:4rem 1.5rem 5rem; max-width:1240px; margin:0 auto; }
.reviews-track{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.3rem; }
.review-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem; box-shadow:var(--shadow-sm); position:relative;
}
.review-stars{ color:var(--gold); letter-spacing:2px; font-size:.9rem; margin-bottom:.5rem; }
.review-text{ font-size:.88rem; color:var(--ink-soft); line-height:1.6; margin-bottom:1rem; }
.review-author{ display:flex; align-items:center; gap:.6rem; }
.review-avatar{
  width:34px; height:34px; border-radius:50%; background:var(--maroon); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; font-family:var(--font-display);
}
.review-name{ font-weight:700; font-size:.85rem; }
.review-time{ font-size:.72rem; color:var(--ink-soft); }

/* ---------- visit ---------- */
.visit-section{ background:var(--maroon-tint); padding:4.5rem 1.5rem; }
.visit-grid{ max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:stretch; }
.visit-list{ display:flex; flex-direction:column; gap:.9rem; margin:1.4rem 0 1.6rem; }
.visit-list li{ display:flex; gap:.7rem; align-items:flex-start; color:var(--ink-soft); font-size:.92rem; }
.visit-list svg{ color:var(--maroon); flex-shrink:0; margin-top:2px; }
.visit-social{ display:flex; gap:.7rem; margin-bottom:1.4rem; }
.visit-social a{
  width:38px; height:38px; border-radius:50%; background:var(--card); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.visit-cta-row{ display:flex; gap:.7rem; flex-wrap:wrap; }
.visit-map{ border-radius:var(--radius); overflow:hidden; min-height:280px; box-shadow:var(--shadow); }

/* ---------- footer ---------- */
.site-footer{ background:var(--jute-dark); color:rgba(255,255,255,.85); padding:4rem 1.5rem 1.5rem; }
.footer-grid{ max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
.footer-brand{ margin-bottom:.8rem; }
.footer-brand .brand-name{ color:#fff; }
.site-footer p{ font-size:.85rem; color:rgba(255,255,255,.6); }
.site-footer h4{ font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); margin:0 0 .9rem; }
.site-footer a, .site-footer span{ display:block; font-size:.86rem; color:rgba(255,255,255,.72); margin-bottom:.55rem; }
.site-footer a:hover{ color:#fff; }
.footer-social{ display:flex; gap:.6rem; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); display:flex;
  align-items:center; justify-content:center; margin-bottom:0;
}
.footer-bottom{
  max-width:1240px; margin:2.5rem auto 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem; font-size:.78rem; color:rgba(255,255,255,.55);
}
.footer-credit a{ color:var(--gold); text-decoration:underline; }

/* ---------- floating contact buttons ---------- */
.float-whatsapp{
  position:fixed; bottom:22px; right:22px; z-index:45; background:#25D366; color:#fff;
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -8px rgba(37,211,102,.7); transition:transform .15s;
}
.float-whatsapp:hover{ transform:scale(1.08); }
.float-messenger{
  position:fixed; bottom:92px; right:26px; z-index:45; background:#0084FF; color:#fff;
  width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px -8px rgba(0,132,255,.7); transition:transform .15s;
}
.float-messenger:hover{ transform:scale(1.08); }

/* ---------- cart panel: sticky sidebar (desktop) / slide-in drawer (mobile) ---------- */
.cart-overlay,.modal-overlay{
  position:fixed; inset:0; background:rgba(36,25,20,.5); backdrop-filter:blur(2px);
  z-index:50; opacity:0; pointer-events:none; transition:opacity .2s; display:none;
}
.modal-overlay{ display:block; }
.cart-overlay.open,.modal-overlay.open{ opacity:1; pointer-events:auto; }
.cart-panel{
  background:var(--card); display:flex; flex-direction:column; width:100%;
}
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); }
.cart-head h3{ font-family:var(--font-display); margin:0; font-size:1.1rem; }
.cart-head button{ background:none; border:0; font-size:1.6rem; line-height:1; color:var(--ink-soft); display:none; }
.cart-items{ flex:1; overflow-y:auto; padding:1rem 1.3rem; display:flex; flex-direction:column; gap:.9rem; max-height:360px; }
.cart-empty{ text-align:center; color:var(--ink-soft); padding:2rem 1.3rem; font-size:.85rem; }
.cart-item{ display:flex; gap:.7rem; align-items:center; }
.cart-item img{ width:52px; height:52px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-name{ font-weight:700; font-size:.85rem; }
.cart-item-variant{ font-size:.7rem; color:var(--ink-soft); }
.cart-item-price{ font-family:var(--font-mono); font-size:.8rem; color:var(--maroon); font-weight:700; }
.qty-control{ display:flex; align-items:center; gap:.5rem; }
.qty-control button{ width:24px; height:24px; border-radius:6px; border:1px solid var(--line); background:var(--paddy); font-weight:700; }
.cart-footer{ padding:1.1rem 1.3rem 1.3rem; border-top:1px solid var(--line); }
.coupon-row{ display:flex; gap:.5rem; margin-bottom:.4rem; }
.coupon-row input{
  flex:1; border:1.5px solid var(--line); border-radius:8px; padding:.5rem .7rem; font-size:.8rem;
  outline:none; background:var(--paddy); color:var(--ink); font-family:inherit;
}
.coupon-row input:focus{ border-color:var(--maroon); }
.btn-sec-sm{
  background:var(--jute); color:#fff; border:0; border-radius:8px; padding:.5rem .9rem;
  font-weight:700; font-size:.78rem; flex-shrink:0;
}
.btn-sec-sm:hover{ background:var(--jute-dark); }
.coupon-msg{ font-size:.72rem; margin:0 0 .6rem; min-height:1em; }
.coupon-msg.ok{ color:var(--jute); }
.coupon-msg.err{ color:#C0392B; }
.cart-total-row{ display:flex; justify-content:space-between; margin-bottom:.3rem; font-family:var(--font-mono); font-size:.88rem; }
.cart-discount-row{ color:#C0392B; }
.cart-discount-row span span{ font-family:var(--font-body); font-size:.7rem; opacity:.75; margin-left:.3rem; }
.cart-total-final{ font-size:1rem; font-weight:700; padding-top:.4rem; border-top:1px dashed var(--line); margin-top:.3rem; }
.cart-note{ font-size:.7rem; color:var(--ink-soft); margin:.5rem 0 1rem; }

@media (max-width:1023px){
  .cart-panel{
    position:fixed; top:0; right:-420px; width:min(420px,92vw); height:100%;
    z-index:51; border-radius:0; transition:right .25s ease; box-shadow:-10px 0 30px rgba(0,0,0,.2);
  }
  .cart-panel.open{ right:0; }
  .cart-panel .cart-items{ max-height:none; }
  .cart-head button{ display:block; }
  .cart-overlay{ display:block; }
}

/* ---------- item modal ---------- */
.item-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.96); width:min(480px,92vw);
  max-height:88vh; overflow-y:auto; background:var(--card); border-radius:var(--radius); z-index:52;
  opacity:0; pointer-events:none; transition:.18s; box-shadow:var(--shadow);
}
.item-modal.open{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.modal-close{ position:absolute; top:.8rem; right:.9rem; background:rgba(255,255,255,.85); border:0; width:32px; height:32px; border-radius:50%; font-size:1.3rem; z-index:2; }
.modal-body{ padding:1.4rem 1.4rem 1.6rem; }
.modal-photo{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.modal-title{ font-family:var(--font-display); font-size:1.4rem; margin:1rem 0 .3rem; }
.modal-desc{ color:var(--ink-soft); font-size:.9rem; line-height:1.6; margin-bottom:1rem; }
.variant-options{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.2rem; }
.variant-option{
  display:flex; justify-content:space-between; align-items:center; border:1.5px solid var(--line);
  border-radius:10px; padding:.7rem .9rem; cursor:pointer; font-size:.9rem;
}
.variant-option.selected{ border-color:var(--maroon); background:var(--maroon-tint); }
.modal-qty{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.modal-qty .qty-control button{ width:34px; height:34px; font-size:1.1rem; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .main-nav{ display:none; }
  .header-actions .btn-ghost span{ display:none; }
  .nav-toggle{ display:flex; }
  .story-section{ grid-template-columns:1fr; }
  .story-media img{ aspect-ratio:16/9; }
  .visit-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .stats-strip{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  .story-badges{ grid-template-columns:1fr; }
  .hero-title{ font-size:2.4rem; }
}

/* main-nav mobile open state */
.main-nav.open{
  display:flex; position:absolute; top:100%; left:0; right:0; background:var(--card);
  flex-direction:column; padding:1rem 1.5rem; border-bottom:1px solid var(--line); gap:.9rem;
}