/* Biryani Aroma — self-hosted webfonts (no Google Fonts CDN).
   DM Sans + Playfair Display, lifted from the original bundle. */

/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dmsans-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dmsans-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dmsans-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/dmsans-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dmsans-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/dmsans-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dmsans-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/dmsans-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600i-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600i-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600i-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600i-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/playfairdisplay-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Header navigation ──────────────────────────────────────────────────
   One common header on every page. Nav, cart and burger are styled here
   rather than inline so the mobile rules never have to fight an inline
   style. The drawer's open flag is data-nav="open" on <html>, set by
   assets/js/site-nav.js — outside the React tree, so a re-render of the
   page cannot clear it. */
[data-nav-panel]{display:flex;align-items:center;gap:2px;margin-left:auto}
[data-nav-panel] a{
  display:flex;align-items:center;gap:5px;padding:9px 11px;
  border-radius:999px;font-size:13.5px;font-weight:600;
  color:var(--fg-2);white-space:nowrap;text-decoration:none;
}
[data-nav-panel] a:hover{background:var(--surface-3);color:var(--brand)}
[data-nav-panel] a[data-nav-active]{color:var(--brand);background:var(--surface-3)}

[data-nav-cart]{
  margin-left:10px;background:#6b1220;color:#fff5df;border-radius:999px;
  padding:10px 14px;font-size:13.5px;font-weight:600;
  display:flex;align-items:center;gap:8px;flex:0 0 auto;text-decoration:none;
}
[data-nav-cart]:hover{background:#8a1a2b;color:#fff5df}
[data-cart-count]{
  background:#caa02c;color:var(--fg);border-radius:999px;
  min-width:22px;height:22px;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:700;padding:0 6px;
}

/* Drawer-only items and the burger are hidden on desktop. These need to
   out-specify `[data-nav-panel] a` above (0,1,1), hence the descendant form. */
[data-nav-toggle]{display:none}
[data-nav-panel] a[data-nav-secondary],
[data-nav-panel] [data-nav-sep]{display:none}

@media (max-width:900px){
  [data-nav-toggle]{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;flex:0 0 auto;padding:0;
    border:1px solid var(--line-2);background:var(--surface);color:var(--brand);
    border-radius:999px;cursor:pointer;
  }
  [data-nav-toggle]:focus-visible{outline:2px solid #caa02c;outline-offset:2px}
  [data-nav-cart]{margin-left:auto;padding:10px 12px}
  [data-nav-cartword]{display:none}

  [data-nav-panel]{
    /* laid out at all times; opacity/visibility do the hiding so it can ease */
    display:flex;gap:0;margin:0;
    opacity:0;visibility:hidden;translate:0 -10px;pointer-events:none;
    transition:opacity .26s cubic-bezier(.2,.7,.3,1),
               translate .26s cubic-bezier(.2,.7,.3,1),
               visibility 0s linear .26s;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;
    padding:6px 0 12px;background:var(--surface);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 22px 34px -24px rgba(58,10,16,.6);
    max-height:70vh;overflow-y:auto;
  }
  :root[data-nav="open"] [data-nav-panel]{
    opacity:1;visibility:visible;translate:0 0;pointer-events:auto;
    transition-delay:0s,0s,0s}

  [data-nav-panel] a{
    min-height:48px;padding:0 20px;border-radius:0;
    font-size:15px;font-weight:700;color:var(--fg);
    border-bottom:1px solid var(--surface-3);
  }
  [data-nav-panel] a[data-nav-secondary]{
    display:flex;min-height:44px;font-size:13.5px;font-weight:500;color:var(--fg-2);
  }
  [data-nav-panel] [data-nav-sep]{display:flex}
  [data-nav-panel] a[data-nav-active]{background:var(--bg);color:var(--brand)}
  [data-nav-sep]{
    align-items:center;padding:14px 20px 6px;
    font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:#a8907a;font-weight:700;
  }
}

/* burger / close icon swap */
[data-nav-icon="close"]{display:none}
:root[data-nav="open"] [data-nav-icon="open"]{display:none}
:root[data-nav="open"] [data-nav-icon="close"]{display:block}

/* latin-ext */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/kaushanscript-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/kaushanscript-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══ Aroma v2 — design system ══════════════════════════════════════════
   Devices borrowed from the reference the client sent (silverspoononline):
   full-bleed photographic hero, full-black display bands as chapter breaks,
   a red organic blob behind every cutout, and a bigger type scale. Cutouts
   stay — it is the blob behind them that makes them read as art-directed. */

:root{
  --ink:#3a0a10; --maroon:#6b1220; --gold-lt:#e0b64a;
  --cream:#fbf3dd; --paper:#fffcf5; --night:#140406;

  /* ── LIGHT surface (default) ───────────────────────────── */
  --bg:#fbf3dd; --surface:#fffcf5; --surface-2:#fff8e8; --surface-3:#f5e7c8;
  --line:#ecdfc4; --line-2:#e3d3b4;
  --fg:#3a0a10; --fg-2:#4a3226; --fg-muted:#8a7660;
  --brand:#6b1220; --brand-2:#8f0f22; --gold:#a8862a;
  --panel:#3a0a10;                 /* dark accent card, constant in both themes */
  --cta:#a8862a; --on-cta:#2a0709; /* add-to-cart: brand gold, was an off-brand teal */
  --red:#c2231b;                   /* brand red for light grounds */
}

/* ── DARK surface ─────────────────────────────────────────
   Warm espresso, not neutral black — it has to sit next to the
   maroon and gold without going cold. Applied per section so the
   page reads as alternating bands rather than one flat dark slab. */
/* Marketing split bands read dark everywhere by default; any single one
   opts out with .sec-light (the homepage Takeout band does, for relief). */

/* A dark band must reach both screen edges. .v2-split is a centred 1180px box,
   so painting its background left cream gutters either side. Drop the max-width
   and recreate it with side padding, so the element spans the viewport while the
   content stays 1136px wide and centred. */
.v2-split:not(.sec-light){
  max-width:none;
  padding-inline:max(22px, calc((100% - 1136px) / 2));
}
.sec-dark,
.v2-split:not(.sec-light){
  --bg:#180d10; --surface:#201216; --surface-2:#28171c; --surface-3:#311d22;
  --line:#332025; --line-2:#452d33;
  --fg:#f7e9d2; --fg-2:#dcc9ae; --fg-muted:#ab9279;
  /* maroon cannot read on dark, and lightening it lands on pink — which is
     off-brand here. Gold is the palette's other half, so accents use it. */
  --brand:#e0b64a; --brand-2:#eac368; --gold:#e0b64a;
  --panel:#2b1218;
  --cta:#e0b64a; --on-cta:#2a0709;
  --red:#ff4a3d;                   /* brighter: must read on espresso + photo */
  background:var(--bg); color:var(--fg);
}
.sec-light{background:var(--bg); color:var(--fg)}
/* sections that already paint their own photo/tint ground keep it */
.sec-dark.v2-band-photo,.sec-dark.v2-photo-head,.sec-dark.v2-hero{background:none}

/* ── Full-bleed photographic hero ── */
.v2-hero{position:relative;display:flex;align-items:center;overflow:hidden;
  background:var(--night);min-height:clamp(500px,76vh,740px)}
.v2-hero .v2-bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.72}
.v2-hero .v2-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(20,4,6,.93) 0%,rgba(20,4,6,.74) 46%,rgba(20,4,6,.18) 100%)}
.v2-hero .v2-inner{position:relative;width:100%;max-width:1180px;margin:0 auto;
  padding:clamp(56px,8vw,104px) 22px}
.v2-hero .v2-copy{max-width:660px}

.v2-eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-lt);font-weight:600;margin-bottom:14px}
.v2-script{font-family:'Kaushan Script',cursive;color:var(--gold-lt);
  font-size:clamp(28px,4.6vw,52px);line-height:1;margin-bottom:2px}
.v2-display{font-family:'Playfair Display',serif;font-weight:800;
  font-size:clamp(40px,7vw,80px);line-height:.98;letter-spacing:-.02em;
  color:#fff;margin:0 0 18px}
.v2-lede{font-size:clamp(15px,1.7vw,18px);line-height:1.66;color:#f0dcc0;
  max-width:520px;margin:0 0 30px}

.v2-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.v2-btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  padding:14px 26px;font-size:14.5px;font-weight:700;text-decoration:none;
  transition:transform .15s,background .15s,color .15s}
.v2-btn:hover{transform:translateY(-1px)}
.v2-btn-gold{background:var(--gold);color:#2a0709}
.v2-btn-gold:hover{background:var(--gold-lt);color:#2a0709}
.v2-btn-ghost{border:1px solid rgba(255,245,223,.5);color:#fff5df}
.v2-btn-ghost:hover{background:rgba(255,245,223,.12);color:#fff5df}

.v2-stats{display:flex;gap:clamp(22px,4vw,52px);flex-wrap:wrap}
.v2-stat b{display:block;font-family:'Playfair Display',serif;font-weight:700;
  font-size:clamp(24px,3.4vw,34px);color:var(--gold-lt);line-height:1.1}
.v2-stat>span{font-size:12.5px;color:#d9c3a4;letter-spacing:.02em}
/* {{ }} bindings render as <span class="sc-interp">; never let a
   descendant span rule shrink an interpolated number. */
.v2-stat b .sc-interp{font-size:inherit;color:inherit}

/* ── Full-black chapter band ── */
.v2-band{background:var(--night);padding:clamp(56px,9vw,104px) 22px;text-align:center}
.v2-band .v2-script{margin-bottom:-4px}
.v2-band h2{font-family:'Playfair Display',serif;font-weight:800;color:#fff;
  font-size:clamp(32px,5.6vw,62px);line-height:1;letter-spacing:-.02em;margin:0}
.v2-band p{color:#c9b295;max-width:620px;margin:20px auto 0;line-height:1.7;
  font-size:15.5px}

/* ── Zig-zag photo/copy section ── */
.v2-split{max-width:1180px;margin:0 auto;padding:clamp(50px,7vw,86px) 22px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(28px,5vw,64px);align-items:center}
.v2-split.rev>.v2-media,.v2-split.rev>.v2-blob{order:2}
.v2-chip{display:inline-block;background:var(--maroon);color:#fff5df;
  padding:7px 16px;border-radius:3px;font-weight:700;font-size:14px;
  letter-spacing:.02em;margin-bottom:12px}
.v2-split h3{font-family:'Playfair Display',serif;font-weight:700;color:var(--fg);
  font-size:clamp(26px,3.6vw,38px);line-height:1.05;margin:0 0 14px}
.v2-split p{color:var(--fg-2);line-height:1.72;font-size:15.5px;margin:0 0 22px}
.v2-media img{width:100%;height:auto;display:block;border-radius:4px}

/* The signature device, matched to the client's reference: a deep-red organic
   blob with a thin outlined ring breaking out of its top-left, and the food
   cutout riding on top and spilling past the blob's edge. The blob is a
   four-value border-radius rather than a circle so it reads as organic. */
.v2-blob{position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(26px,5vw,58px) clamp(14px,3vw,34px)}
.v2-blob::before{content:"";position:absolute;z-index:0;
  left:12%;right:4%;top:8%;bottom:14%;background:#8f0f22;
  border-radius:64% 36% 44% 56%/46% 62% 38% 54%;transform:rotate(-5deg)}
.v2-blob::after{content:"";position:absolute;z-index:0;
  left:2%;top:4%;width:30%;aspect-ratio:1;
  border:2px solid #8f0f22;border-radius:50%}
/* the cutout overflows the blob, as in the reference */
.v2-blob>img{position:relative;z-index:1;display:block;
  width:112%;max-width:none;margin-left:-6%;height:auto;
  filter:drop-shadow(0 26px 38px rgba(20,4,6,.42))}
.v2-blob.flip::before{left:4%;right:12%;transform:rotate(5deg)}
.v2-blob.flip::after{left:auto;right:2%}

@media (max-width:900px){
  .v2-hero .v2-scrim{background:linear-gradient(180deg,rgba(20,4,6,.72) 0%,rgba(20,4,6,.9) 70%)}
  .v2-split.rev>.v2-media,.v2-split.rev>.v2-blob{order:0}
}

/* interior page heroes sit shorter than the homepage */
.v2-hero-page{min-height:clamp(300px,42vh,420px)}
.v2-hero-page .v2-display{font-size:clamp(34px,5.4vw,62px)}
.v2-hero-page .v2-script{font-size:clamp(24px,3.6vw,40px)}

/* Photographic backdrop dropped behind an existing page header, leaving its
   own layout untouched — the <img> and scrim sit under everything else. */
.v2-photo-head{position:relative;isolation:isolate;background-color:#140406!important}
.v2-photo-head>.v2-bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.55;z-index:0;margin:0;max-width:none}
.v2-photo-head>.v2-scrim{position:absolute;inset:0;z-index:0;background:
  linear-gradient(90deg,rgba(20,4,6,.92) 0%,rgba(20,4,6,.72) 50%,rgba(20,4,6,.42) 100%)}
.v2-photo-head>*:not(.v2-bg):not(.v2-scrim){position:relative;z-index:1}

/* ══ Motion ════════════════════════════════════════════════════════════
   Driven by assets/js/site-fx.js. Reveal styles are gated on :root[data-fx],
   which only that script sets — so with JS off, or under reduced-motion,
   everything is simply visible and still. */

:root[data-fx] .fx{opacity:0;transform:translateY(20px)}
:root[data-fx] .fx.fx-in{opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),
             transform .75s cubic-bezier(.22,.61,.36,1)}

/* slow drift across the hero photograph */
@keyframes v2-kenburns{
  from{transform:scale(1.05) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-1.2%,-1%,0)}
}
.v2-photo-head>.v2-bg,
.v2-hero:not(.v2-slider)>.v2-bg{animation:v2-kenburns 22s ease-in-out infinite alternate;will-change:transform}

/* photo in the zig-zag sections pushes in slightly on hover */
.v2-media{overflow:hidden;border-radius:4px}
.v2-media img{transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.v2-media:hover img{transform:scale(1.05)}

/* the blob breathes */
@keyframes v2-blobdrift{
  0%,100%{border-radius:62% 38% 46% 54%/48% 56% 44% 52%;transform:rotate(-6deg)}
  50%    {border-radius:52% 48% 58% 42%/56% 44% 56% 44%;transform:rotate(-2deg) scale(1.02)}
}
.v2-blob::before{animation:v2-blobdrift 14s ease-in-out infinite}

/* dish cards lift under the cursor */
#dc-root .fx-card{transition:transform .28s cubic-bezier(.2,.7,.3,1),
                             box-shadow .28s cubic-bezier(.2,.7,.3,1)}
#dc-root .fx-card:hover{transform:translateY(-4px);
  box-shadow:0 18px 34px -20px rgba(58,10,16,.55)}
#dc-root .fx-card img{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
#dc-root .fx-card:hover img{transform:scale(1.06)}

/* header picks up depth once the page moves */
:root[data-scrolled] header{box-shadow:0 12px 28px -22px rgba(20,4,6,.75)}
header{transition:box-shadow .3s ease}

/* buttons and nav already transition; make the cart badge react too */
[data-nav-cart]{transition:background .2s ease,transform .18s ease}
[data-nav-cart]:hover{transform:translateY(-1px)}
[data-cart-count]{transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
[data-nav-cart]:hover [data-cart-count]{transform:scale(1.12)}

@media (prefers-reduced-motion:reduce){
  :root[data-fx] .fx{opacity:1;transform:none}
  .v2-hero .v2-bg,.v2-photo-head>.v2-bg{animation:none}
  .v2-blob::before{animation:none}
  .v2-media img,#dc-root .fx-card,#dc-root .fx-card img{transition:none}
}

/* Filter tabs: the chip() helper sets padding inline, which is fine on desktop
   but leaves a 34px tap target on a phone. min-height does not clash with an
   inline padding, so no !important is needed. */
#dc-root [role="tab"]{display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
#dc-root [role="tab"]:hover{transform:translateY(-1px)}
@media (max-width:900px){
  #dc-root [role="tab"]{min-height:42px}
}

/* A flex item defaults to min-width:auto, so a nowrap tab row grows to its
   content width (1601px on a 390px phone) instead of scrolling — the overflow
   was then clipped by the page wrapper's overflow-x:hidden and the later tabs
   became unreachable. min-width:0 lets overflow-x:auto do its job. */
#dc-root [role="tablist"]{min-width:0;max-width:100%}
#dc-root [role="tablist"]{-webkit-overflow-scrolling:touch}
/* ...and the wrapper is itself a grid item, which also defaults to
   min-width:auto — without this the grid track resolves to the tab row's
   full content width and the row never becomes scrollable. */
#dc-root [data-tabs-wrap]{min-width:0;max-width:100%}

/* Parallax backdrops are over-sized so the shift never exposes an edge.
   Only applied when site-fx.js is running (it sets data-fx). */
:root[data-fx] .v2-hero .v2-bg,
:root[data-fx] .v2-photo-head>.v2-bg{height:170%;top:-35%}
:root[data-fx] .v2-hero,
:root[data-fx] .v2-photo-head{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  :root[data-fx] .v2-hero .v2-bg,
  :root[data-fx] .v2-photo-head>.v2-bg{height:100%;top:0}
}

/* ══ Hero slider ═══════════════════════════════════════════════════════
   Slides are stacked and crossfaded. The copy inside the active slide
   animates in on a stagger; everything is transition-based so a slide that
   is never activated simply sits invisible rather than half-drawn. */
/* The slider is a block, not a flex row: as a flex item the in-flow first
   slide sized to its content (726px of a 1280px hero) while the absolute
   slides spanned the full width, so the photo only covered part of the band.
   Each slide does its own centring instead. */
.v2-slider{position:relative;display:block}
.v2-slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .9s cubic-bezier(.4,0,.2,1),visibility 0s linear .9s;
  display:flex;align-items:center}
.v2-slide.is-active{opacity:1;visibility:visible;transition-delay:0s,0s;z-index:1}
/* the first slide stays in flow so the section keeps its height */
.v2-slide:first-child{position:relative;width:100%;
  min-height:clamp(500px,76vh,740px)}

/* centred hero */
.v2-center .v2-copy{max-width:840px;margin:0 auto;text-align:center}
.v2-center .v2-lede{margin-left:auto;margin-right:auto}
.v2-center .v2-cta{justify-content:center;margin-bottom:0}
.v2-center .v2-inner{padding-bottom:clamp(96px,12vw,150px)}

/* staggered entrance for the active slide's copy */
.v2-slide .v2-eyebrow,.v2-slide .v2-script,.v2-slide .v2-display,
.v2-slide .v2-lede,.v2-slide .v2-cta{
  opacity:0;translate:0 28px;
  transition:opacity .85s cubic-bezier(.22,.61,.36,1),translate .85s cubic-bezier(.22,.61,.36,1)}
.v2-slide.is-active .v2-eyebrow{opacity:1;translate:0;transition-delay:.10s}
.v2-slide.is-active .v2-script {opacity:1;translate:0;transition-delay:.20s}
.v2-slide.is-active .v2-display{opacity:1;translate:0;transition-delay:.30s}
.v2-slide.is-active .v2-lede   {opacity:1;translate:0;transition-delay:.40s}
.v2-slide.is-active .v2-cta    {opacity:1;translate:0;transition-delay:.50s}

/* slow push on whichever slide is showing */
.v2-slide .v2-bg{transform:scale(1.04)}
.v2-slide.is-active .v2-bg{animation:v2-kenburns 11s ease-out forwards}

/* stats sit under the slides, shared across them */
.v2-herostats{position:absolute;left:0;right:0;bottom:clamp(52px,6vw,70px);z-index:2;
  justify-content:center;padding:0 22px}

/* arrows + dots */
.v2-arrow{position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:46px;height:46px;border-radius:999px;display:flex;align-items:center;
  justify-content:center;border:1px solid rgba(255,245,223,.42);
  background:rgba(20,4,6,.34);color:#fff5df;cursor:pointer;padding:0;
  transition:background .2s ease,border-color .2s ease,scale .2s ease;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.v2-arrow:hover{background:#8f0f22;border-color:#8f0f22;scale:1.06}
.v2-arrow:focus-visible{outline:2px solid #caa02c;outline-offset:3px}
.v2-prev{left:clamp(10px,2.5vw,26px)}
.v2-next{right:clamp(10px,2.5vw,26px)}

.v2-dots{position:absolute;left:0;right:0;bottom:clamp(22px,3vw,30px);z-index:3;
  display:flex;gap:10px;justify-content:center}
.v2-dots button{width:10px;height:10px;padding:0;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,245,223,.66);background:transparent;
  transition:background .25s ease,width .25s ease,border-color .25s ease}
.v2-dots button.is-active{background:#caa02c;border-color:#caa02c;width:26px}
.v2-dots button:focus-visible{outline:2px solid #caa02c;outline-offset:3px}

@media (max-width:640px){
  .v2-arrow{display:none}
  .v2-herostats{gap:18px}
  .v2-herostats .v2-stat b{font-size:clamp(19px,6vw,26px)}
}
@media (prefers-reduced-motion:reduce){
  .v2-slide,.v2-slide .v2-eyebrow,.v2-slide .v2-script,.v2-slide .v2-display,
  .v2-slide .v2-lede,.v2-slide .v2-cta{transition:none}
  .v2-slide .v2-eyebrow,.v2-slide .v2-script,.v2-slide .v2-display,
  .v2-slide .v2-lede,.v2-slide .v2-cta{opacity:1;translate:0}
  .v2-slide.is-active .v2-bg{animation:none}
}

/* ── Dish cluster ──────────────────────────────────────────────────────
   The client's second reference: several plate cutouts overlapping on one
   red blob, rather than a single dish. Each plate is placed absolutely so
   the overlap is art-directed rather than left to the flow. */
.v2-cluster{position:relative;width:100%;aspect-ratio:4/3;isolation:isolate}
.v2-cluster::before{content:"";position:absolute;z-index:0;
  inset:6% 5% 12% 7%;background:#8f0f22;
  border-radius:62% 38% 44% 56%/50% 58% 42% 50%;transform:rotate(-4deg)}
.v2-cluster::after{content:"";position:absolute;z-index:0;
  left:0;top:4%;width:26%;aspect-ratio:1;
  border:2px solid #8f0f22;border-radius:50%}
.v2-cluster img{position:absolute;z-index:1;height:auto;display:block;
  filter:drop-shadow(0 16px 24px rgba(20,4,6,.42))}
.v2-cluster .c1{width:40%;left:1%;top:30%;z-index:2}
.v2-cluster .c2{width:37%;left:20%;top:5%;z-index:1}
.v2-cluster .c3{width:50%;left:25%;top:36%;z-index:3}
.v2-cluster .c4{width:33%;right:2%;top:14%;z-index:1}
.v2-cluster .c5{width:36%;right:0;top:44%;z-index:2}
@media (max-width:560px){
  .v2-cluster{aspect-ratio:1/1}
}

/* ── Photo band ────────────────────────────────────────────────────────
   A chapter band with a photograph behind it instead of flat black; the
   backdrop is parallaxed by site-fx.js. */
.v2-band-photo{position:relative;overflow:hidden;
  padding:clamp(84px,13vw,160px) 22px;background:var(--night)}
.v2-band-photo .v2-bg{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.55;margin:0;max-width:none}
.v2-band-photo .v2-scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(20,4,6,.86) 0%,rgba(20,4,6,.64) 50%,rgba(20,4,6,.88) 100%)}
.v2-band-photo>*:not(.v2-bg):not(.v2-scrim){position:relative;z-index:1}
:root[data-fx] .v2-band-photo .v2-bg{height:170%;top:-35%}
@media (prefers-reduced-motion:reduce){
  :root[data-fx] .v2-band-photo .v2-bg{height:100%;top:0}
}

/* Auto-scrolling pill row: drift is driven by site-fx.js, and the scrollbar is
   hidden because the movement itself is the affordance. Still scrollable by
   wheel, trackpad and touch. */
[data-autoscroll]{scrollbar-width:none;-ms-overflow-style:none}
[data-autoscroll]::-webkit-scrollbar{display:none;width:0;height:0}

/* On a phone a landscape backdrop is cropped into a tall portrait box, which
   magnifies it hard — the client reported the photos looking out of focus.
   Pull back the parallax over-size and the zoom so far less of the frame is
   blown up. (Parallax speed is reduced to match in site-fx.js, or the smaller
   over-size would let an edge show.) */
@keyframes v2-kenburns-sm{
  from{transform:scale(1.01) translate3d(0,0,0)}
  to{transform:scale(1.05) translate3d(-.5%,-.5%,0)}
}
@media (max-width:900px){
  :root[data-fx] .v2-hero .v2-bg,
  :root[data-fx] .v2-photo-head>.v2-bg,
  :root[data-fx] .v2-band-photo .v2-bg{height:112%;top:-6%}
  .v2-slide.is-active .v2-bg,
  .v2-hero:not(.v2-slider)>.v2-bg,
  .v2-photo-head>.v2-bg{animation-name:v2-kenburns-sm}
  /* a shorter page header crops the landscape frame far less */
  .v2-hero-page{min-height:clamp(240px,34vh,320px)}
}
@media (max-width:900px){
  /* A 76vh hero makes a 400x790 box out of a 3:2 photo — the crop is so tall
     that only a narrow strip of the frame is left, blown up and soft. A
     shorter hero keeps enough source pixels behind the visible crop. */
  .v2-hero.v2-slider{min-height:100svh}
  .v2-slide:first-child{min-height:100svh}
  .v2-center .v2-inner{padding-bottom:clamp(104px,20vw,132px)}
}

/* ── Centre-logo header (desktop) ──────────────────────────────────────
   Matching the layout convention of the reference the client sent, in our
   own palette and with our own mark: nav either side of a centred logo. The
   drawer still reads from the same single <nav>, so mobile is unchanged —
   the spacer simply collapses. */
/* Only centre the logo where there is genuinely room for nav on both sides —
   below ~1100px the right-hand group outgrows its half and rides onto the
   logo, so that range keeps the ordinary logo-left row. */
@media (min-width:1101px){
  [data-nav-logo]{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2}
  [data-nav-panel]{flex:1 1 auto;margin-left:0;justify-content:space-between}
  /* equal-flex groups either side keep the spacer — and therefore the logo —
     genuinely centred whatever the two groups' natural widths are */
  [data-nav-group]{display:flex;align-items:center;gap:2px;flex:1 1 0;min-width:0}
  [data-nav-group="left"]{justify-content:flex-start}
  [data-nav-group="right"]{justify-content:flex-end}
  [data-nav-gap]{flex:0 0 clamp(104px,13vw,200px)}
  [data-nav-row]{min-height:116px}
}
@media (max-width:1100px){
  [data-nav-gap]{display:none}
}
@media (max-width:900px){
  /* the groups vanish as boxes so their links join the drawer column directly */
  [data-nav-group]{display:contents}
}
@media (min-width:901px) and (max-width:1100px){
  [data-nav-group]{display:flex;align-items:center;gap:2px}
  [data-nav-panel]{margin-left:auto;gap:2px}
  [data-nav-row]{min-height:116px}
}

/* ── Offers panel ──────────────────────────────────────────────────────
   The "sign up for offers" block the reference puts above its footer, in our
   maroon rather than theirs. Purely a layout convention — copy and colours
   are Aroma's own. */
.v2-offer{max-width:1180px;margin:0 auto clamp(46px,7vw,74px);padding:0 22px}
.v2-offer-in{background:var(--maroon);border-radius:4px;color:#fff5df;
  padding:clamp(28px,4.6vw,44px) clamp(20px,4vw,44px);text-align:center;
  background-image:radial-gradient(120% 140% at 50% 0,rgba(202,160,44,.22),transparent 60%)}
.v2-offer h3{font-family:'Playfair Display',serif;font-weight:700;color:#fff5df;
  font-size:clamp(21px,3vw,30px);line-height:1.15;margin:0 0 6px}
.v2-offer p{color:#e8cfa8;font-size:14.5px;margin:0 0 20px}
.v2-offer form{display:flex;gap:10px;max-width:520px;margin:0 auto;flex-wrap:wrap}
.v2-offer input{flex:1 1 220px;min-width:0;border:1px solid #8f4550;border-radius:999px;
  padding:13px 20px;font-size:14.5px;background:var(--surface);color:var(--fg);outline:none}
.v2-offer input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(202,160,44,.28)}
.v2-offer button{flex:0 0 auto;border:0;border-radius:999px;padding:13px 26px;
  background:var(--gold);color:var(--fg);font-size:14.5px;font-weight:700;cursor:pointer;
  transition:background .18s ease,transform .18s ease}
.v2-offer button:hover{background:var(--gold-lt);transform:translateY(-1px)}
.v2-offer small{display:block;margin-top:12px;color:#c9a98a;font-size:12.5px}

/* chevron on the section call-to-actions, matching the reference's pill+arrow */
.v2-btn-gold::after{content:"";width:7px;height:7px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);margin-left:2px;transition:translate .18s ease}
.v2-btn-gold:hover::after{translate:3px 0}

/* ── Menu: browse-by-course cards ──────────────────────────────────────
   The menu opens on a grid of courses; picking one reveals its dishes. */
.v2-catgrid{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
.v2-catcard{display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;color:inherit;
  gap:6px;padding:18px 14px 16px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,border-color .18s}
.v2-catcard:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 18px 32px -20px rgba(58,10,16,.5)}
.v2-catcard:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.v2-catcard-img{display:flex;align-items:center;justify-content:center;
  width:100%;height:104px;background:var(--bg);border-radius:3px;margin-bottom:4px;
  overflow:hidden}
.v2-catcard-img img{max-width:88%;max-height:92px;width:auto;height:auto;
  object-fit:contain;filter:drop-shadow(0 12px 16px rgba(58,10,16,.24));
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.v2-catcard:hover .v2-catcard-img img{transform:scale(1.07)}
.v2-catcard b{font-size:15.5px;font-weight:700;color:var(--fg);line-height:1.25}
.v2-catcard-note{font-size:12px;color:#a1836a;letter-spacing:.04em;
  text-transform:uppercase}
.v2-catcard-count{margin-top:2px;font-size:12px;font-weight:700;color:var(--cta);
  background:#e7f2ec;border-radius:999px;padding:3px 10px}

.v2-back{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface);color:var(--brand);
  border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:700;
  transition:background .18s,border-color .18s,color .18s}
.v2-back:hover{background:#6b1220;border-color:#6b1220;color:#fff5df}
.v2-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:560px){
  .v2-catgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .v2-catcard-img{height:84px}
  .v2-catcard-img img{max-height:74px}
}

/* Course sections are anchor targets for the jump-nav cards; the offset keeps
   a heading clear of the sticky header + filter bar. */
#dc-root section[id]{scroll-margin-top:150px}
@media (max-width:900px){ #dc-root section[id]{scroll-margin-top:190px} }

/* ── Menu dropdown ─────────────────────────────────────────────────────
   The Menu item opens the course list, as on the reference site. On desktop
   it is a hover/focus panel; inside the mobile drawer the same markup falls
   back to an indented sub-list, so there is one source of links. */
[data-nav-caret]{display:inline-block;width:5px;height:5px;margin-left:5px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);transition:transform .18s ease}

@media (min-width:901px){
  [data-nav-item]{position:relative;display:flex;align-items:center}
  [data-nav-drop]{
    /* anchored to the item, not centred on it — "Menu" sits in the left-hand
       group, so a centred panel hung off the left edge of the viewport.
       Kept as a grid at all times and hidden with opacity/visibility, because
       `display` cannot be transitioned — flipping it is what made this snap. */
    display:grid;position:absolute;top:100%;left:0;
    width:max-content;max-width:min(440px,calc(100vw - 40px));
    padding:10px;gap:2px 14px;
    grid-template-columns:1fr 1fr;
    background:var(--surface);border:1px solid var(--line);border-radius:5px;
    box-shadow:0 26px 48px -24px rgba(58,10,16,.55);z-index:80;
    opacity:0;visibility:hidden;translate:0 -10px;pointer-events:none;
    transition:opacity .24s cubic-bezier(.2,.7,.3,1),
               translate .24s cubic-bezier(.2,.7,.3,1),
               visibility 0s linear .24s}
  [data-nav-item]:hover>[data-nav-drop],
  [data-nav-item]:focus-within>[data-nav-drop]{
    opacity:1;visibility:visible;translate:0 0;pointer-events:auto;
    transition-delay:0s,0s,0s}
  /* nav links ease rather than snap on hover */
  [data-nav-panel] a{transition:background .2s cubic-bezier(.2,.7,.3,1),
                                color .2s cubic-bezier(.2,.7,.3,1)}
  [data-nav-item]:hover [data-nav-caret]{transform:rotate(-135deg) translateY(-3px)}
  [data-nav-drop] a{padding:8px 11px;border-radius:3px;font-size:13.5px;
    font-weight:600;color:var(--fg-2);white-space:nowrap}
  [data-nav-drop] a:hover{background:var(--bg);color:var(--brand)}
  [data-nav-dropall]{grid-column:1 / -1;margin-top:4px;border-top:1px solid var(--surface-3);
    color:var(--brand)!important;font-weight:700!important}
}

@media (max-width:900px){
  /* the wrapper disappears so its link and the courses join the drawer column */
  [data-nav-item]{display:contents}
  [data-nav-caret]{display:none}
  [data-nav-drop]{display:contents}
  [data-nav-panel] [data-nav-drop] a{
    min-height:42px;padding-left:34px;font-size:13.5px;font-weight:500;color:var(--fg-2)}
  [data-nav-panel] [data-nav-dropall]{font-weight:700;color:var(--brand)}
}

/* ── Facts strip ───────────────────────────────────────────────────────
   Four short figures under a catering section. */
.v2-facts{max-width:1180px;margin:0 auto;padding:0 22px clamp(24px,4vw,44px)}
.v2-facts-in{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:4px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.v2-facts-in>div{background:var(--surface);padding:20px 18px;text-align:center}
.v2-facts-in b{display:block;font-family:'Playfair Display',serif;font-weight:700;
  font-size:clamp(19px,2.4vw,25px);color:var(--brand);line-height:1.15;margin-bottom:4px}
.v2-facts-in span{font-size:12.5px;color:var(--fg-muted);letter-spacing:.03em}

/* Photo-backed section that keeps the maroon brand wash rather than going
   near-black — used where the flat maroon still needs to read as maroon. */
.v2-photo-head.tint-maroon{background-color:#5d0f1c!important}
.v2-photo-head.tint-maroon>.v2-bg{opacity:.30}
.v2-photo-head.tint-maroon>.v2-scrim{background:
  linear-gradient(90deg,rgba(93,15,28,.94) 0%,rgba(93,15,28,.80) 55%,rgba(93,15,28,.62) 100%)}

/* ── Inner page banners: centred copy ──────────────────────────────────
   Scoped with :has(h1) so it hits page banners only. The homepage's
   "Fresh, never frozen" strip is also a .v2-photo-head but carries an h2,
   and centring that one would be wrong. */
.v2-hero-page .v2-copy{max-width:840px;margin:0 auto;text-align:center}
.v2-hero-page .v2-lede{margin-left:auto;margin-right:auto}

.v2-photo-head:has(h1):not(:has(img:not(.v2-bg)))>*:not(.v2-bg):not(.v2-scrim){
  grid-template-columns:1fr!important;text-align:center;justify-items:center}
.v2-photo-head:has(h1):not(:has(img:not(.v2-bg)))>*:not(.v2-bg):not(.v2-scrim)>div{
  max-width:880px;margin-left:auto;margin-right:auto;width:100%}
.v2-photo-head:has(h1):not(:has(img:not(.v2-bg))) p{margin-left:auto;margin-right:auto}
.v2-photo-head:has(h1):not(:has(img:not(.v2-bg))) h1{text-wrap:balance;margin-left:auto;margin-right:auto}
/* the stats/CTA rows are flex, so text-align alone never moved them */
.v2-photo-head:has(h1):not(:has(img:not(.v2-bg))) [style*="display:flex"]{justify-content:center}
/* the decorative column stacks underneath once it is a single column — cap it
   so it does not blow up to full width (it rendered as a giant bowl) */
.v2-photo-head:has(h1):not(:has(img:not(.v2-bg))) img:not(.v2-bg){
  max-width:min(300px,52vw)!important;width:auto!important;height:auto!important}

/* ── Homepage banner runs full screen ── */
.v2-hero.v2-slider{min-height:100vh;min-height:100svh}
.v2-slide:first-child{min-height:100vh;min-height:100svh}

/* ── Easing polish ─────────────────────────────────────────────────────
   scroll-behavior:smooth already ships in each page's base styles; this
   honours a reduced-motion preference and gives anchor targets somewhere
   sensible to land under the sticky header. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-nav-drop],[data-nav-panel]{transition:none!important}
}
html{scroll-padding-top:120px}
a,button{transition-timing-function:cubic-bezier(.2,.7,.3,1)}

/* ── Font Awesome (brands only, self-hosted) ───────────────────────────
   Just the brands face and the handful of glyphs the footer uses, rather
   than the full 100KB stylesheet from a CDN — the rest of this site makes
   no external requests and this keeps it that way. Codepoints were read
   out of the official stylesheet, not typed from memory. */
@font-face{
  font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;
  font-display:block;src:url("../fonts/fa-brands-400.woff2") format("woff2")}
.fab{font-family:"Font Awesome 6 Brands";font-weight:400;font-style:normal;
  font-variant:normal;line-height:1;display:inline-block;text-rendering:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.fa-facebook-f:before{content:"\f39e"}
.fa-instagram:before{content:"\f16d"}
.fa-whatsapp:before{content:"\f232"}
.fa-x-twitter:before{content:"\e61b"}
.fa-tiktok:before{content:"\e07b"}
.fa-youtube:before{content:"\f167"}

/* social row in the footer */
.v2-social{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.v2-social a{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;font-size:15px;
  border:1px solid #6b4a3a;color:#e8d6b8;text-decoration:none;
  transition:background .2s cubic-bezier(.2,.7,.3,1),
             border-color .2s cubic-bezier(.2,.7,.3,1),
             color .2s cubic-bezier(.2,.7,.3,1),
             transform .2s cubic-bezier(.2,.7,.3,1)}
.v2-social a:hover{background:#caa02c;border-color:#caa02c;color:var(--fg);
  transform:translateY(-2px)}
.v2-social a:focus-visible{outline:2px solid #caa02c;outline-offset:2px}

/* Desktop logo is a flat 100px: the inline clamp's 8vw term only reached 100
   above ~1250px, so narrower desktops were getting 80-90px. */
@media (min-width:1101px){
  [data-nav-logo] img{height:100px!important}
}

/* A dish with no description of its own renders an empty meta line; collapse
   it rather than leaving a gap. (The old code filled it with an invented
   "Kitchen portion", which the client rightly flagged as confusing.) */
#dc-root .fx-card div:empty{display:none}

/* Ghost buttons are cream-on-photo by default; on a light section they need
   the themed ink instead or they vanish into the cream ground. */
.sec-light .v2-btn-ghost{border-color:rgba(58,10,16,.32);color:var(--fg)}
.sec-light .v2-btn-ghost:hover{background:rgba(58,10,16,.07);color:var(--fg)}

/* Buttons default to the UA's black `buttontext`, which is invisible on a dark
   section (it made SVG icons and .v2-catcard labels render pure black). Inherit
   the themed colour instead; buttons needing their own set it explicitly. */
button{color:inherit}

/* ── From Our Kitchen: real photos + one video, in the vertical format they
   were shot in. Tiles render ~210px wide on desktop, so the 540px sources are
   ~1.3x even at 2x DPR — nothing is upscaled. Stacks into a swipe row on
   narrow screens (no visible scrollbar), with the next tile peeking. */
.v2-reels-sec{padding:clamp(44px,6vw,76px) 0}
.v2-reels-in{max-width:1180px;margin:0 auto;padding:0 22px}
.v2-reels-eyebrow{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.v2-reels-h{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(25px,3.8vw,38px);
  line-height:1.08;letter-spacing:-.015em;color:var(--fg);margin:0 0 8px}
.v2-reels-lede{font-size:15px;line-height:1.6;color:var(--fg-2);margin:0;max-width:520px}
.v2-reels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:28px}
.v2-reel{position:relative;display:block;aspect-ratio:9/16;max-width:100%;border-radius:14px;overflow:hidden;
  isolation:isolate;background:#1e1214;text-decoration:none;color:#fff5df;
  box-shadow:0 24px 40px -30px rgba(40,6,10,.7);
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s}
.v2-reel>img,.v2-reel>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s cubic-bezier(.2,.7,.3,1)}
.v2-reel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(18,5,7,.9),rgba(18,5,7,.45) 45%,rgba(18,5,7,0))}
.v2-reel-cap{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;flex-direction:column;gap:3px}
.v2-reel-cap b{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;line-height:1.15;color:#fff5df}
.v2-reel-cap span{font-size:12px;line-height:1.35;color:#e6d2b0}
.v2-reel-badge{position:absolute;top:10px;right:10px;z-index:2;width:26px;height:26px;border-radius:999px;
  display:grid;place-items:center;color:#fff5df;background:rgba(18,5,7,.5);backdrop-filter:blur(6px)}
.v2-reel:hover{transform:translateY(-4px);box-shadow:0 34px 50px -30px rgba(40,6,10,.85)}
.v2-reel:hover>img,.v2-reel:hover>video{transform:scale(1.05)}
.v2-reel:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:900px){
  .v2-reels{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin-inline:-22px;padding:0 22px 6px;scroll-padding-inline:22px;scrollbar-width:none}
  .v2-reels::-webkit-scrollbar{display:none}
  .v2-reel{flex:0 0 min(38vw,220px);scroll-snap-align:start}
}
@media (max-width:560px){ .v2-reel{flex-basis:56vw} }
@media (prefers-reduced-motion:reduce){ .v2-reel,.v2-reel>img,.v2-reel>video{transition:none} }

/* Logo size below desktop. It was clamp(44px,9vw,72px) — 44px on every phone,
   too small to read the lettering, with ~150px of empty row beside it. The
   logo sits in normal flow here (it is only absolutely centred >=1101px), so
   the header row grows with it and nothing spills out. */
@media (max-width:1100px){ [data-nav-logo] img{height:76px!important} }
@media (max-width:700px){  [data-nav-logo] img{height:64px!important} }

/* Phones: back-to-top only while scrolling back up (flag set in site-nav.js).
   !important because the menu pages drive the button's opacity inline. */
@media (max-width:700px){
  [aria-label="Back to top"]{transition:opacity .25s ease,transform .25s ease!important}
  :root:not([data-scroll-up]) [aria-label="Back to top"]{
    opacity:0!important;transform:translateY(14px)!important;pointer-events:none!important}
}

/* Brand lockup beside the header logo. The logo is absolutely CENTRED at
   >=1101px, so the lockup grows symmetrically about the centre line and eats
   the clear space on both sides of it — widths are tuned against the measured
   gap to the nav (see the overlap check). Decorative: the logo's alt text
   already says "Biryani Aroma", so this is aria-hidden to avoid a double read. */
.hdr-brand{display:flex;flex-direction:column;justify-content:center;line-height:1.1;white-space:nowrap;min-width:0}
.hdr-brand b{font-family:'Playfair Display',serif;font-weight:800;letter-spacing:-.005em;
  font-size:clamp(17px,4.6vw,21px);color:var(--red);line-height:1.05}
.hdr-brand>span{margin-top:3px;font-size:clamp(8px,.62vw,9.5px);letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold);line-height:1.32}
/* MOBILE ONLY. On desktop the logo is absolutely centred with just 2-6px of
   clear space beside it at 1440px+, and the lockup overlapped "Rewards" in the
   1101-1150px band. Below 900px the nav is a hamburger, so the room is there.
   Hidden under 361px too, where it would crowd the cart button. */
.hdr-brand{display:none}
@media (max-width:900px) and (min-width:361px){ .hdr-brand{display:flex} }

/* Home hero location line: bright red and larger, per client mark-up. Scoped to
   the slider — the same .v2-eyebrow class labels the banner on 20 inner pages
   ("Our Menu", "Catering"), which stay gold. The shadow keeps it readable where
   the photo behind it is light. */
.v2-slider .v2-eyebrow{
  /* the hero is a photo band, not a .sec-dark section, so var(--red) would
     resolve to the LIGHT-ground red (#c2231b) and sink into the image */
  color:#ff4a3d;
  font-size:clamp(13px,2.4vw,20px);
  letter-spacing:.1em;
  font-weight:800;
  line-height:1.35;
  text-shadow:0 2px 12px rgba(12,3,4,.7), 0 1px 2px rgba(12,3,4,.6);
}

/* Catering package cards: image + name + blurb + price line. Wider than the
   dish cat-cards because each carries a sentence and a price. */
.v2-pkggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.v2-pkgcard{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 20px 38px -32px rgba(40,6,10,.55);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .18s}
.v2-pkgcard:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 30px 48px -30px rgba(40,6,10,.7)}
.v2-pkgcard:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.v2-pkgcard-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface-3)}
.v2-pkgcard-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.v2-pkgcard:hover .v2-pkgcard-img img{transform:scale(1.05)}
.v2-pkgcard-body{display:flex;flex-direction:column;gap:7px;padding:16px 18px 18px}
.v2-pkgcard-body b{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;
  line-height:1.2;color:var(--fg)}
.v2-pkgcard-note{font-size:13.5px;line-height:1.5;color:var(--fg-2)}
.v2-pkgcard-meta{margin-top:2px;font-size:12.5px;color:var(--fg-muted);line-height:1.4}
.v2-pkgcard-meta em{font-style:normal;font-weight:800;color:var(--gold);font-size:15px}
@media (prefers-reduced-motion:reduce){.v2-pkgcard,.v2-pkgcard-img img{transition:none}}

/* ── Grand-opening band (homepage, under the hero) ─────────────────────────
   Deliberately not a top bar — the client had the sitewide top bar removed.
   Every animation is wrapped by prefers-reduced-motion at the bottom. */
.v2-gorand{position:relative;display:block;overflow:hidden;text-decoration:none;
  background:linear-gradient(100deg,#5d0f1c 0%,var(--maroon) 42%,#8a1a2c 100%);
  border-top:2px solid var(--gold-lt);border-bottom:2px solid var(--gold-lt);
  animation:goRise .75s cubic-bezier(.2,.7,.3,1) both}
.v2-gorand:focus-visible{outline:3px solid var(--gold-lt);outline-offset:-6px}
/* light sweep travelling across the band */
.v2-gorand-glow{position:absolute;top:0;bottom:0;left:-40%;width:35%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,232,170,.22),transparent);
  animation:goSweep 6s cubic-bezier(.5,0,.5,1) infinite}
.v2-gorand-in{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:18px 22px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;text-align:center}
.v2-gorand-tag{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:#2a0709;
  background:var(--gold-lt);border-radius:999px;padding:6px 13px}
.v2-gorand-dot{width:7px;height:7px;border-radius:999px;background:#8a1a2c;
  animation:goPulse 1.8s ease-in-out infinite}
.v2-gorand-main{font-size:15px;line-height:1.5;color:#fdf6e5}
.v2-gorand-main b{color:#fff;font-weight:800}
/* live countdown chip */
.v2-gorand-count{flex:0 0 auto;font-size:12.5px;font-weight:800;letter-spacing:.04em;
  color:#fff;background:rgba(12,3,4,.34);border:1px solid rgba(255,232,170,.45);
  border-radius:999px;padding:6px 13px;white-space:nowrap}
.v2-gorand-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:800;color:var(--gold-lt)}
.v2-gorand-cta span{border-bottom:1px solid currentColor;padding-bottom:1px}
.v2-gorand-cta svg{transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.v2-gorand:hover .v2-gorand-cta svg{transform:translateX(5px)}
.v2-gorand:hover{filter:brightness(1.08)}
@keyframes goRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes goSweep{0%{left:-40%}55%,100%{left:115%}}
@keyframes goPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
@media (max-width:700px){
  .v2-gorand-in{gap:10px;padding:15px 18px}
  .v2-gorand-main{font-size:13.5px}
  .v2-gorand-count{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .v2-gorand,.v2-gorand-glow,.v2-gorand-dot,.v2-gorand-cta svg{animation:none;transition:none}
  .v2-gorand-glow{display:none}
}

/* ── Gallery tiles + lightbox ──────────────────────────────────────────────
   Tiles are a fixed 4:3 so two images of different shapes line up; the source
   is cover-cropped, and the full picture is what the lightbox shows. */
.v2-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.v2-gal-item{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);
  aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--surface-3);cursor:zoom-in;
  box-shadow:0 24px 44px -34px rgba(40,6,10,.6);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .2s}
.v2-gal-item img{width:100%;height:100%;object-fit:contain;display:block;padding:10px;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.v2-gal-item:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 34px 54px -32px rgba(40,6,10,.75)}
.v2-gal-item:hover img{transform:scale(1.03)}
.v2-gal-item:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.v2-gal-zoom{position:absolute;right:10px;bottom:10px;z-index:2;width:32px;height:32px;
  border-radius:999px;background:rgba(18,5,7,.6);backdrop-filter:blur(6px);color:#fff5df;
  display:grid;place-items:center}

.v2-lb{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,40px);background:rgba(10,3,4,.92);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.v2-lb[data-open]{opacity:1;visibility:visible}
.v2-lb img{max-width:min(1100px,94vw);max-height:90vh;width:auto;height:auto;border-radius:8px;
  box-shadow:0 44px 90px -40px rgba(0,0,0,.9);transform:scale(.96);transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.v2-lb[data-open] img{transform:scale(1)}
.v2-lb-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(255,245,223,.3);background:rgba(255,245,223,.12);color:#fff5df;
  cursor:pointer;display:grid;place-items:center}
.v2-lb-close:hover{background:rgba(255,245,223,.26)}
.v2-lb-close:focus-visible{outline:2px solid var(--gold-lt);outline-offset:2px}

/* ── Floating cart button + slide-in cart sidebar ──────────────────────────
   Appears once the cart has something in it; tapping it opens the drawer.
   The drawer is READ-ONLY on purpose: the menu pages hold their own copy of
   the cart in component state, so editing quantities here would desync their
   "Added x2" buttons until a reload. Changes belong on the cart page. */
.v2-cartfab{position:fixed;right:18px;bottom:18px;z-index:97;width:58px;height:58px;
  border-radius:999px;border:2px solid var(--gold-lt);background:var(--panel);color:#fdf6e5;
  display:grid;place-items:center;cursor:pointer;
  box-shadow:0 18px 34px -14px rgba(40,6,10,.8);
  transform:scale(0);transition:transform .32s cubic-bezier(.2,.9,.3,1.2),background .2s}
:root[data-cartfab] .v2-cartfab{transform:scale(1)}
.v2-cartfab:hover{background:#45161c}
.v2-cartfab:focus-visible{outline:2px solid var(--gold-lt);outline-offset:3px}
.v2-cartfab-badge{position:absolute;top:-3px;right:-3px;min-width:23px;height:23px;padding:0 6px;
  border-radius:999px;background:var(--gold-lt);color:#2a0709;font-size:12px;font-weight:800;
  display:grid;place-items:center;border:2px solid var(--panel)}
/* !important because the menu pages set the button's bottom inline, and it
   would otherwise sit exactly under the cart button in the same corner. */
:root[data-cartfab] [aria-label="Back to top"]{bottom:92px!important}

.v2-cartscrim{position:fixed;inset:0;z-index:98;background:rgba(10,3,4,.6);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
.v2-cartpanel{position:fixed;top:0;right:0;bottom:0;z-index:99;width:min(380px,88vw);
  display:flex;flex-direction:column;background:var(--bg);border-left:1px solid var(--line-2);
  box-shadow:-24px 0 60px -30px rgba(0,0,0,.8);
  transform:translateX(102%);transition:transform .34s cubic-bezier(.2,.7,.3,1)}
:root[data-cartopen] .v2-cartscrim{opacity:1;visibility:visible}
:root[data-cartopen] .v2-cartpanel{transform:none}
:root[data-cartopen]{overflow:hidden}
.v2-cartpanel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:1px solid var(--line)}
.v2-cartpanel-head h2{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;
  color:var(--fg);margin:0}
.v2-cartpanel-close{width:38px;height:38px;border-radius:999px;border:1px solid var(--line-2);
  background:var(--surface);color:var(--fg);display:grid;place-items:center;cursor:pointer}
.v2-cartpanel-close:hover{background:var(--surface-3)}
.v2-cartpanel-body{flex:1 1 auto;overflow-y:auto;padding:6px 20px}
.v2-cartline{display:flex;gap:12px;align-items:flex-start;padding:14px 0;
  border-bottom:1px solid var(--line)}
.v2-cartline-name{font-size:14.5px;font-weight:600;color:var(--fg);line-height:1.35}
.v2-cartline-meta{font-size:12.5px;color:var(--fg-muted);margin-top:3px}
.v2-cartline-sum{margin-left:auto;text-align:right;white-space:nowrap}
.v2-cartline-sum b{font-size:14.5px;color:var(--fg)}
.v2-cartline-sum span{display:block;font-size:12px;color:var(--fg-muted);margin-top:2px}
.v2-cartpanel-foot{border-top:1px solid var(--line);padding:16px 20px 20px;background:var(--surface)}
.v2-cartpanel-total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.v2-cartpanel-total span{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
.v2-cartpanel-total b{font-family:'Playfair Display',serif;font-size:23px;color:var(--fg)}
.v2-cartpanel-foot .v2-btn{width:100%;justify-content:center}
.v2-cartpanel-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--fg-muted);text-align:center}
@media (max-width:560px){ .v2-cartfab{right:14px;bottom:14px;width:54px;height:54px} }
@media (prefers-reduced-motion:reduce){
  .v2-cartfab,.v2-cartscrim,.v2-cartpanel,.v2-gal-item,.v2-gal-item img,.v2-lb,.v2-lb img{transition:none}
}

/* ── Cart totals: smart sticky ─────────────────────────────────────────────
   Was position:sticky;top:96px while the header is 117px tall, so the panel
   parked 21px UNDER the header. The offset now follows the real header height
   (--hdr-h, measured in site-nav.js). A panel taller than the space left over
   cannot stick from the top without hiding its own checkout button, so JS adds
   .is-tall and it sticks by its bottom edge instead. */
.v2-sumpanel{align-self:start;position:sticky;top:calc(var(--hdr-h,117px) + 14px)}
.v2-sumpanel.is-tall{top:auto;bottom:14px}
@media (max-width:900px){
  .v2-sumpanel,.v2-sumpanel.is-tall{position:static}
}

/* Compact total bar for narrow screens, shown only while the real panel is
   off screen. Tapping it jumps to the panel. */
.v2-sumbar{position:fixed;left:0;right:0;bottom:0;z-index:96;background:var(--panel);
  border-top:2px solid var(--gold-lt);box-shadow:0 -18px 40px -26px rgba(0,0,0,.8);
  transform:translateY(115%);transition:transform .32s cubic-bezier(.2,.7,.3,1)}
:root[data-sumbar] .v2-sumbar{transform:none}
.v2-sumbar-in{max-width:1180px;margin:0 auto;padding:11px 18px;display:flex;align-items:center;gap:12px}
.v2-sumbar-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#e0b64a;font-weight:700}
.v2-sumbar-total{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#fff5df;margin-left:2px}
.v2-sumbar button{margin-left:auto;flex:0 0 auto;border:0;border-radius:999px;cursor:pointer;
  background:var(--cta);color:var(--on-cta);font-size:14px;font-weight:800;padding:11px 20px}
:root[data-sumbar] body{padding-bottom:76px}
@media (min-width:901px){ .v2-sumbar{display:none} }
@media (prefers-reduced-motion:reduce){ .v2-sumbar{transition:none} }