/* ─────────────── Skeleton loaders (reusable, site-wide) ───────────────
   Drop-in placeholders for anything that loads after first paint. Use the
   base `.bv-skel` for a shimmering grey block and the size modifiers for
   common shapes. They animate with a single shared keyframe so adding more
   skeletons costs nothing. Honor reduced-motion. Examples:
     <div class="bv-skel bv-skel--title"></div>
     <div class="bv-skel bv-skel--text"></div>
     <div class="bv-skel bv-skel--thumb"></div>
   For images, wrap in `.bv-imgwrap` (shimmer shows until the <img> loads;
   the global loader script removes it on load — see v2_chrome footer). */
@keyframes bvSkelShimmer { 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } }
.bv-skel{
    display:block; border-radius:8px;
    background:linear-gradient(90deg,#ECEEF1 25%,#F5F6F8 37%,#ECEEF1 63%);
    background-size:200% 100%;
    animation:bvSkelShimmer 1.3s ease-in-out infinite;
}
.bv-skel--text   { height:12px; margin:6px 0; border-radius:6px; }
.bv-skel--text.sm{ width:60%; } .bv-skel--text.lg{ width:90%; }
.bv-skel--title  { height:20px; width:55%; margin:4px 0 12px; border-radius:7px; }
.bv-skel--btn    { height:42px; width:140px; border-radius:10px; }
.bv-skel--avatar { width:44px; height:44px; border-radius:50%; }
.bv-skel--thumb  { width:100%; aspect-ratio:1/1; border-radius:12px; }
.bv-skel--card   { width:100%; height:180px; border-radius:14px; }
.bv-skel-stack > * + * { margin-top:10px; }
/* Image wrapper: shimmer sits behind the image; once the image has loaded
   we tag the wrapper `.is-loaded` and fade the shimmer out. */
.bv-imgwrap{ position:relative; overflow:hidden; }
.bv-imgwrap::before{
    content:""; position:absolute; inset:0; z-index:0;
    background:linear-gradient(90deg,#ECEEF1 25%,#F5F6F8 37%,#ECEEF1 63%);
    background-size:200% 100%; animation:bvSkelShimmer 1.3s ease-in-out infinite;
    transition:opacity .35s ease;
}
.bv-imgwrap.is-loaded::before{ opacity:0; }
.bv-imgwrap > img{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){
    .bv-skel, .bv-imgwrap::before{ animation:none; }
}

/* ─────────────── Sticky footer ───────────────
   On short pages, the v2 footer was sitting at natural document height
   and leaving a stripe of body background visible BELOW it. Pin body as
   a flex column with min-height 100vh + push the footer down with
   `margin-top: auto`. On tall pages where content fills body, auto
   resolves to 0 (no free space to distribute), so the footer just sits
   naturally below content. Position:fixed Bootstrap modals don't
   participate in flex layout — they're taken out of normal flow — so
   the post-footer modals in the legacy layout don't break this. */
/* overflow-x:hidden on html+body prevents the page from scrolling
   horizontally when any rogue child (sliders, full-bleed images, oversized
   modals) exceeds viewport width on mobile. Without this, mobile users
   see content cut off at the right edge.

   2026-06-01 — Use `overflow-x: clip` rather than `overflow-x: hidden`.
   `hidden` forces the browser to compute `overflow-y: auto` (since the
   axes can't be different scroll roots), which silently turns <body>
   into a scroll container and breaks `position: sticky` on every
   descendant — including the product-page cart sidebar. `clip` does NOT
   create a scroll container, so overflow-y stays `visible` and sticky
   works. `clip` is supported by Chrome 90+, FF 81+, Safari 15.4+; older
   browsers fall back to default (visible) which just allows the
   horizontal scrollbar — a non-fatal degradation. */
/* 2026-09-23 — dvh with a vh fallback. On iOS Safari, 100vh is the height
   with the toolbars HIDDEN, so a 100vh shell overshoots the visible area
   while the toolbar is showing and leaves dead space you can scroll into.
   100dvh tracks the real viewport. The plain 100vh line stays first so
   browsers without dvh keep the old behaviour rather than nothing. */
html { min-height: 100vh; min-height: 100dvh; overflow-x: clip; max-width: 100%; }
body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    max-width: 100%;
}
/* Page wrapper (some views open <div id="page">...) needs to flex-grow
   so its child footer can sit at the bottom inside it. */
body > #page {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
/* `margin-top: auto` on a flex item with column-direction parent
   absorbs all remaining space, pinning it to the end. !important wins
   over the inline `margin-top: 50px` declared further below in this
   same stylesheet, since CSS doesn't natively cascade across
   declarations of equal specificity. */
.site-footer { margin-top: auto !important; }

/* ─────────────── v2 CHROME — shared header + footer styles ───────────────
   Scoped to the chrome's own classes (.site-header, .mobile-menu,
   .site-footer, .footer-*) so it doesn't leak into the page content. */
.v2chrome-root, .site-header, .site-footer, .mobile-menu {
    --brand-red:   #C00A27;
    --brand-red-2: #E31837;
    --text:        #1B1B1F;
    --text-muted:  #6B7280;
    --border:      rgba(0,0,0,0.08);
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.06);
}

.site-header, .site-header *, .mobile-menu, .mobile-menu *,
.site-footer, .site-footer * { box-sizing: border-box; }

/* ─────────────── Skeleton loaders ─────────────── */
/* Shared skeleton primitive — sub-grade replacement when content is
   loading but not yet rendered. Apply `.skel` to any block element +
   set width/height; the shimmer animation does the rest. Respects
   reduced-motion preference. */
@keyframes bravo-skel-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skel { display: block; background: linear-gradient(90deg, #ECECEE 0%, #F5F5F7 40%, #ECECEE 80%); background-size: 200% 100%; animation: bravo-skel-shimmer 1.4s ease-in-out infinite; border-radius: 8px; min-height: 1em; }
.skel.skel-circle { border-radius: 50%; }
.skel.skel-pill   { border-radius: 100px; }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; background: #ECECEE; } }
.site-header a, .site-footer a, .mobile-menu a { text-decoration: none; }

/* HEADER */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid transparent; transition: border-color 0.25s, box-shadow 0.25s; padding: 14px 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--text); }
.site-header.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.header-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-header .logo { display: flex; align-items: center; height: 120px; flex-shrink: 0; }
.site-header .logo img { height: 100%; width: auto; display: block; max-width: none; }
.site-header .logo .text-logo { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 22px; color: var(--brand-red); letter-spacing: -0.03em; display: flex; align-items: center; gap: 8px; }
.site-header .logo .text-logo .mark { width: 36px; height: 36px; background: linear-gradient(135deg, var(--brand-red), var(--brand-red-2)); color: #fff; border-radius: 9px; display: grid; place-items: center; font-weight: 900; font-size: 17px; }
.main-nav { display: flex; gap: 4px; flex: 1; justify-content: center; }
.main-nav a { display: inline-block; padding: 8px 14px; font-weight: 600; font-size: 14px; color: var(--text); border-radius: 8px; transition: 0.15s; white-space: nowrap; position: relative; }
.main-nav a:hover { color: var(--brand-red); background: rgba(192,10,39,0.06); }
.main-nav a.active { color: var(--brand-red); }
.main-nav a.active::after { content: ""; position: absolute; bottom: -2px; left: 14px; right: 14px; height: 2px; background: var(--brand-red); border-radius: 2px; }
.main-nav a.catering { background: rgba(255,184,51,0.18); color: #B07300; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.main-nav a.catering:hover { background: rgba(255,184,51,0.28); color: #8C5C00; }
.main-nav a.gift-cards { background: rgba(192,10,39,0.08); color: var(--brand-red); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.main-nav a.gift-cards:hover { background: rgba(192,10,39,0.16); color: var(--brand-red-2); }
.mobile-menu a.gift-cards { background: rgba(192,10,39,0.06); color: var(--brand-red); }
.mobile-menu a.gift-cards:hover { background: rgba(192,10,39,0.10); }
/* 2026-05-29 — Plan Event pill (purple accent so it's visually
   distinct from Catering yellow and Gift Cards red). */
/* 2026-06-01 — Plan Event pill recoloured purple → green per client. */
.main-nav a.plan-event { background: rgba(22,163,74,0.12); color: #15803D; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
.main-nav a.plan-event:hover { background: rgba(22,163,74,0.20); color: #166534; }
.mobile-menu a.plan-event { background: rgba(22,163,74,0.08); color: #15803D; }
.mobile-menu a.plan-event:hover { background: rgba(22,163,74,0.14); }
.signin-btn { color: var(--brand-red); font-weight: 700; padding: 8px 16px; border: 1px solid rgba(192,10,39,0.32); border-radius: 9px; font-size: 13px; transition: 0.15s; cursor: pointer; white-space: nowrap; background: transparent; font-family: inherit; }
.signin-btn:hover { background: rgba(192,10,39,0.06); border-color: var(--brand-red); }

/* Desktop sign-out — small icon-only button next to the account link.
   Theme's global button rule hijacks bare <button>, so override every
   visual property with !important. */
.signout-form button.signout-btn,
button.signout-btn,
.signout-btn {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid var(--border) !important;
    border-radius: 9px !important;
    background: #fff !important;
    background-color: #fff !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    padding: 0 !important;
    min-width: 0 !important;
    box-shadow: none !important;
    font-family: inherit;
    display: inline-flex !important;
    align-items: center; justify-content: center;
}
.signout-form button.signout-btn:hover,
button.signout-btn:hover,
.signout-btn:hover {
    color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
    background: rgba(192,10,39,0.06) !important;
}
.signout-form button.signout-btn:focus,
button.signout-btn:focus,
.signout-btn:focus { outline: 0 !important; box-shadow: 0 0 0 3px rgba(192,10,39,0.10) !important; }
/* Pin the inner icon — legacy theme css contains a `button > svg` rule
   that collapses widths to 0 on themed buttons. We force size + stroke
   here so the sign-out glyph always renders. */
.signout-form button.signout-btn svg,
button.signout-btn svg,
.signout-btn svg {
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
    visibility: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    color: inherit !important;
    flex-shrink: 0 !important;
}

/* Mobile-menu sign-out — full-width button styled to match the rest of
   the mobile menu rows. */
.mm-signout-form button.mm-signout,
button.mm-signout,
.mm-signout {
    width: 100% !important;
    padding: 12px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex !important;
    align-items: center; justify-content: center; gap: 8px;
    box-shadow: none !important;
    min-width: 0 !important;
}
.mm-signout-form button.mm-signout:hover,
button.mm-signout:hover,
.mm-signout:hover {
    background: rgba(192,10,39,0.06) !important;
    color: var(--brand-red) !important;
    border-color: var(--brand-red) !important;
}
.mm-signout svg { width: 18px; height: 18px; }

/* Hamburger button — kept as a single `.ham-btn` selector (no extra
   specificity) so the `@media (max-width:980px) { .ham-btn { display: grid } }`
   rule further down still wins on mobile. The theme's global `button`
   selector paints any bare button as a dark pill, so all visual props
   here use !important to override. Same trick as the password show/hide
   toggle and captcha refresh button. */
.ham-btn {
    display: none;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid var(--border) !important;
    border-radius: 9px !important;
    background: #fff !important;
    background-color: #fff !important;
    color: var(--text) !important;
    cursor: pointer;
    place-items: center;
    flex-shrink: 0;
    padding: 0 !important;
    min-width: 0 !important;
    box-shadow: none !important;
    font-family: inherit;
}
.ham-btn:hover { border-color: var(--text) !important; background: #fff !important; }
.ham-btn:focus { outline: 0 !important; box-shadow: 0 0 0 3px rgba(192,10,39,0.10) !important; background: #fff !important; }
.ham-btn span { display: block !important; width: 18px !important; height: 2px !important; background: var(--text) !important; border-radius: 2px; position: relative; transition: 0.2s; }
.ham-btn span::before, .ham-btn span::after { content: "" !important; position: absolute; left: 0; width: 18px !important; height: 2px !important; background: var(--text) !important; border-radius: 2px; transition: 0.2s; }
.ham-btn span::before { top: -6px !important; }
.ham-btn span::after  { top: 6px !important; }
.ham-btn.open span { background: transparent !important; }
.ham-btn.open span::before { transform: translateY(6px) rotate(45deg); }
.ham-btn.open span::after  { transform: translateY(-6px) rotate(-45deg); }

.header-actions { display: flex; align-items: center; gap: 16px; }
.phone-block { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.phone-block .label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.phone-block .number { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--text); }

.cart-icon-wrap { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; transition: 0.15s; background: #fff; }
.cart-icon-wrap:hover { border-color: var(--brand-red); transform: translateY(-1px); }
.cart-icon-wrap svg { width: 20px; height: 20px; stroke: var(--text); fill: none; stroke-width: 2; }
.cart-count-badge { position: absolute; top: -4px; right: -4px; background: var(--brand-red); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; line-height: 1; border: 2px solid #fff; }

/* Mobile menu */
.mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 95; transform: translateY(-100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); flex-direction: column; border-radius: 0 0 14px 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08); border: 1px solid var(--border); border-top: none; overflow: hidden; max-height: calc(100vh - 100px); overflow-y: auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--text); }
.mobile-menu.open { transform: translateY(108px); }
.mobile-menu .mm-spacer { display: none; }

/* 2026-06-06 — Backdrop + scroll lock for the open mobile menu. Previously
   the page stayed scrollable behind the menu, so scrolling slid the sticky
   header out from behind the fixed dropdown and everything looked broken.
   Now the page is dimmed (backdrop) AND scroll-locked while the menu is open. */
.mm-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 94;                 /* below header(100) + menu(95), above page */
    opacity: 0; visibility: hidden;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu.open ~ .mm-backdrop {
    opacity: 1; visibility: visible;
    transition: opacity 0.28s ease, visibility 0s linear 0s;
}
/* JS-free scroll lock via :has() (supported on all current mobile browsers). */
html:has(.mobile-menu.open),
body:has(.mobile-menu.open) {
    overflow: hidden !important;
    touch-action: none;
}

/* ───────── 2026-06-06 — Site-wide mobile bottom nav dock ─────────
   Rendered by home.partials.bottom_nav (included in footer_v2). Shown on
   mobile only. Order · Gifts · [Cart] · Stores · Account. The Cart tab +
   checkout CTA only render on cart pages (menu / checkout). */
.m-bottom-dock { display: none; }
.mbb-checkout-row { padding: 0 0 8px; }
.mbb-checkout-btn {
    width: 100%; border: 0; cursor: pointer; font: inherit;
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #c00a27 0%, #e31837 100%);
    color: #fff; font-weight: 800; font-size: 14.5px; letter-spacing: 0.01em;
    padding: 13px 16px; border-radius: 14px;
    box-shadow: 0 8px 20px rgba(192,10,39,0.34);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.mbb-checkout-btn:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(192,10,39,0.30); filter: brightness(0.98); }
.mbb-checkout-btn .mbb-co-bag { position: relative; display: inline-flex; flex: 0 0 auto; }
.mbb-checkout-btn .mbb-co-bag svg { width: 21px; height: 21px; }
.mbb-checkout-btn .mbb-co-count {
    position: absolute; top: -8px; right: -9px; background: #fff; color: var(--brand-red);
    min-width: 17px; height: 17px; line-height: 17px; text-align: center;
    border-radius: 100px; font-size: 10.5px; font-weight: 800; padding: 0 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.mbb-checkout-btn .mbb-co-total { margin-left: auto; font-weight: 900; font-size: 15px; }
.mbb-checkout-btn .mbb-co-arrow { width: 18px; height: 18px; flex: 0 0 auto; opacity: 0.95; }
.mbb-tabs { display: flex; align-items: stretch; gap: 4px; }
.mbb-tabs .mbb-tab {
    flex: 1; background: none; border: 0; cursor: pointer; font: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 7px 2px; color: #8A8F98; font-size: 11px; font-weight: 600;
    text-decoration: none; min-width: 0; border-radius: 12px;
    transition: color .15s ease, background .15s ease;
}
.mbb-tabs .mbb-tab svg { width: 23px; height: 23px; transition: transform .15s ease; stroke: currentColor; }
.mbb-tabs .mbb-tab:hover { color: #4B5563; }
.mbb-tabs .mbb-tab:active { color: var(--brand-red); background: rgba(192,10,39,0.07); }
.mbb-tabs .mbb-tab:active svg { transform: translateY(-1px); }
.mbb-tabs .mbb-cart-ico { position: relative; display: inline-flex; }
.mbb-tabs .mbb-cart-ico svg { width: 23px; height: 23px; }
.mbb-tabs .mbb-badge {
    position: absolute; top: -6px; right: -9px;
    background: var(--brand-red); color: #fff;
    min-width: 16px; height: 16px; line-height: 16px; text-align: center;
    border-radius: 100px; font-size: 10px; font-weight: 800; padding: 0 4px;
    box-shadow: 0 0 0 2px #fff;
}
@media (max-width: 1024px) {
    .m-bottom-dock {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
        display: block;
        background: rgba(255,255,255,0.94);
        -webkit-backdrop-filter: saturate(160%) blur(14px);
        backdrop-filter: saturate(160%) blur(14px);
        border-top: 1px solid rgba(0,0,0,0.05);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -10px 34px rgba(17,17,20,0.12);
        padding: 9px 12px calc(7px + env(safe-area-inset-bottom, 0px));
    }
    /* Reserve space so page content isn't hidden behind the fixed dock. */
    body { padding-bottom: 66px; }
}
.mobile-menu a { padding: 14px 20px; font-size: 14.5px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.mobile-menu a svg { width: 18px; height: 18px; stroke: var(--text-muted); fill: none; stroke-width: 2; }
.mobile-menu a:last-of-type { border-bottom: none; }
.mobile-menu a:hover { background: #FAFAFB; color: var(--brand-red); }
.mobile-menu a.active { color: var(--brand-red); background: rgba(192,10,39,0.04); }
.mobile-menu a.catering { background: rgba(255,184,51,0.10); color: #8C5C00; }
.mobile-menu .mm-phone { padding: 14px 20px; border-bottom: 1px solid var(--border); background: #FAFAFB; }
.mobile-menu .mm-phone .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; }
.mobile-menu .mm-phone .num { font-size: 18px; font-weight: 700; color: var(--text); margin-top: 2px; display: inline-flex; align-items: center; gap: 8px; }
.mobile-menu .mm-signin { margin: 14px 20px 18px; padding: 12px; background: linear-gradient(135deg, var(--brand-red), var(--brand-red-2)); color: #fff; border-radius: 10px; font-weight: 700; font-size: 14px; text-align: center; box-shadow: 0 6px 18px rgba(192,10,39,0.30); border-bottom: none !important; }

/* FOOTER */
.site-footer { background: #0E0E10; color: rgba(255,255,255,0.85); margin-top: 50px; border-top: 1px solid rgba(255,255,255,0.04); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.site-footer .inner { max-width: 1280px; margin: 0 auto; padding: 0; }
/* 5-col layout: wide brand column + 4 even link columns
   (Locations, Help, Gift Cards, Account). Collapses to 2-col on tablet,
   1-col on phone via the @media rules below. */
.site-footer .top { padding: 44px 32px 36px; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 32px; }
.site-footer h2 { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin: 0 0 14px; font-family: 'Inter', sans-serif; }
.site-footer p, .site-footer ul li { font-size: 13px; color: rgba(255,255,255,0.62); line-height: 1.65; margin: 0; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { padding: 4px 0; }
.site-footer ul li a { color: inherit; transition: color 0.15s; }
.site-footer ul li a:hover { color: #fff; }
/* 2026-09-23 — footer links measured 17px tall on a phone, well under the 44px
   target this site standardised on elsewhere. They sit in a tight column, so a
   mis-tap lands on the neighbouring link rather than nothing. Make the ANCHOR
   the tap target (it was `display:inline`, so padding on the li did not extend
   the hit area) and give it a real height. Touch devices only — on a mouse the
   extra spacing would just stretch the footer. */
@media (hover: none) and (pointer: coarse) {
    .site-footer ul li { padding: 0; }
    .site-footer ul li a {
        display: block;
        min-height: 44px;
        line-height: 44px;
    }
}
.footer-brand .brand-logo-img { height: 90px; width: auto; margin-bottom: 14px; display: block; background: #fff; padding: 6px 10px; border-radius: 10px; }
.footer-brand .footer-tag { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-red-2, #E31837); margin-bottom: 8px; }
.footer-brand p { max-width: 380px; margin: 0 0 18px; line-height: 1.6; }

/* CTA row — two compact pills (find a location + click-to-call) so the
   brand column has actionable surface area, not just a paragraph. */
.footer-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.footer-cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; transition: 0.15s; }
.footer-cta svg { width: 14px; height: 14px; flex-shrink: 0; }
.footer-cta-primary { background: var(--brand-red, #C00A27); color: #fff !important; }
.footer-cta-primary:hover { background: #E31837; transform: translateY(-1px); box-shadow: 0 6px 14px rgba(192,10,39,0.30); }
.footer-cta-secondary { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.92) !important; border: 1px solid rgba(255,255,255,0.14); }
.footer-cta-secondary:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.28); }

.footer-social { display: flex; gap: 8px; }
.footer-social a { width: 36px; height: 36px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.10); display: grid; place-items: center; transition: 0.15s; }
.footer-social a:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.20); }
.footer-social svg { width: 14px; height: 14px; fill: #fff; }

/* Locations column — small inline kosher chip replaces the "(kosher)"
   parenthetical so the green tag scans faster in the list. */
.site-footer .kosher-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 100px; background: rgba(27,126,47,0.18); color: #6FE48C; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; vertical-align: middle; }
/* Follow-us row — sits BETWEEN the link columns and the copyright bottom.
   Centered, padded, brand-red accent on hover. Each icon is 42px circle
   with a thin border for visual weight; brand-specific colors on hover
   (Facebook blue, Instagram pink, TikTok cyan, YouTube red, X black). */
.site-footer .follow-row { border-top: 1px solid rgba(255,255,255,0.06); padding: 22px 32px 18px; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.site-footer .follow-label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.site-footer .follow-icons { display: flex; gap: 10px; align-items: center; }
.site-footer .follow-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); text-decoration: none; transition: all .18s ease; }
.site-footer .follow-icon svg { width: 18px; height: 18px; display: block; }
.site-footer .follow-icon:hover { transform: translateY(-2px); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.30); }
.site-footer .follow-facebook:hover  { background: #1877F2; }
.site-footer .follow-instagram:hover { background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100%); }
.site-footer .follow-tiktok:hover    { background: #000; box-shadow: 0 0 0 1px #25F4EE, 0 6px 16px rgba(255,0,80,0.30); }
.site-footer .follow-youtube:hover   { background: #FF0000; }
.site-footer .follow-twitter:hover   { background: #000; }
@media (max-width: 720px) {
    .site-footer .follow-row { padding: 18px 20px 14px; gap: 14px; }
    .site-footer .follow-icon { width: 38px; height: 38px; }
}
.site-footer .bottom { border-top: 1px solid rgba(255,255,255,0.06); padding: 16px 32px; font-size: 12px; display: flex; justify-content: space-between; align-items: center; color: rgba(255,255,255,0.45); gap: 14px; flex-wrap: wrap; }
.site-footer .legal a { color: inherit; transition: color 0.15s; }
.site-footer .legal a:hover { color: rgba(255,255,255,0.85); }
.site-footer .legal a:not(:last-child)::after { content: "·"; margin: 0 8px; opacity: 0.4; }

/* MOBILE breakpoints */
@media (max-width: 980px) {
    .main-nav { display: none; }
    .phone-block { display: none; }
    .signin-btn { display: none; }
    .ham-btn { display: grid; }
    .mobile-menu { display: flex; }
    /* 2026-06-06 — Clean mobile header: bigger logo on the LEFT, the selected
       restaurant's phone (+ switch) in the MIDDLE (same as desktop), and the
       menu button on the RIGHT. Cart lives in the footer dock and account /
       sign-out live in the menu, so only those are hidden. */
    .header-inner { gap: 10px; padding: 0 14px; justify-content: space-between; }
    .site-header .logo { order: 0; height: 104px; }
    .header-actions { order: 5; display: flex !important; gap: 8px; }
    .ham-btn { order: 10; }
    /* Hide everything in the action cluster EXCEPT the phone block — and only
       when a restaurant is actually selected (.hv2-active). No selection (e.g.
       fresh / incognito homepage) → the switch pill stays hidden. */
    .header-actions > * { display: none !important; }
    .header-actions > .phone-with-switch { display: none !important; }
    .header-actions > .phone-with-switch.hv2-active { display: inline-flex !important; }
    .hv2-active .phone-block { display: inline-flex !important; }   /* override the earlier hide */
    /* Drop the menu below the (now taller) header: logo 104 + 14×2 padding ≈ 132. */
    .mobile-menu.open { transform: translateY(132px); }
    .site-footer .top { grid-template-columns: 1fr 1fr; gap: 28px; padding: 36px 24px 28px; }
}
@media (max-width: 720px) {
    .site-header .logo { height: 96px; }
    .mobile-menu.open { transform: translateY(124px); }
    .site-footer .top { grid-template-columns: 1fr; gap: 28px; padding: 32px 20px 24px; }
    .site-footer .bottom { padding: 14px 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Unified Order Gate modal ──────────────────────────────────────────
   Single 2-step modal shared by Order Online / Catering / Reorder.
   Step 1: delivery vs carryout. Step 2: ASAP vs schedule.
   Store selection is handled by the homepage flow — if no store is saved,
   the gate redirects to / with an intent param. */
.og-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55);
    display: none; align-items: center; justify-content: center;
    z-index: 9999; padding: 16px;
}
.og-overlay.open { display: flex; }
.og-modal {
    background: #fff; border-radius: 14px; width: 100%; max-width: 420px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.25); overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.og-head { padding: 18px 22px 12px; border-bottom: 1px solid #eef0f3; }
.og-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: #1B1B1F; }
.og-head .og-sub { margin: 4px 0 0; font-size: 13.5px; color: #6b7280; }
.og-body { padding: 18px 22px; }
.og-step { display: none; }
.og-step.active { display: block; }
.og-pill-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.og-pill {
    border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 14px 12px;
    background: #fff; cursor: pointer; font-size: 14px; font-weight: 600;
    color: #1B1B1F; text-align: center; transition: all .15s;
}
.og-pill:hover { border-color: #c00a27; }
.og-pill.selected { border-color: #c00a27; background: #fff1f3; color: #c00a27; }
.og-schedule-fields {
    display: none; margin-top: 14px; gap: 8px; grid-template-columns: 1fr 1fr;
}
.og-schedule-fields.active { display: grid; }
.og-schedule-fields input {
    width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 14px; box-sizing: border-box;
}
.og-foot {
    padding: 14px 22px 18px; display: flex; justify-content: space-between;
    align-items: center; border-top: 1px solid #eef0f3;
}
.og-back {
    background: transparent; border: 0; color: #6b7280; cursor: pointer;
    font-size: 13.5px; padding: 6px 4px;
}
.og-back:disabled { visibility: hidden; }
.og-next {
    background: #c00a27; color: #fff; border: 0; border-radius: 999px;
    padding: 10px 22px; font-weight: 700; font-size: 14px; cursor: pointer;
}
.og-next:disabled { opacity: 0.5; cursor: not-allowed; }
.og-err { color: #c00a27; font-size: 12.5px; margin-top: 6px; min-height: 16px; }
/* Two paths to the same result, and they must never stack.

   .bv-kb-open  — the VIEWPORT path. visualViewport told us the real height, so
                  we can size the overlay exactly. Preferred whenever available.
   .bv-kb-focus — the FALLBACK path. Used where the window is never resized when
                  the keyboard opens (a TWA on Android 15+, where edge-to-edge
                  means the IME draws over the content instead of shrinking it).
                  There is no signal to measure there, so we do not guess a
                  height — we pin the overlay to the top and cap the card. */
html.bv-kb-open .flow-modal-backdrop,
html.bv-kb-open .ce-modal,
html.bv-kb-open .modal-bg,
html.bv-kb-open .bvm-overlay,
html.bv-kb-open .bpush-modal,
html.bv-kb-focus .flow-modal-backdrop,
html.bv-kb-focus .ce-modal,
html.bv-kb-focus .modal-bg,
html.bv-kb-focus .bvm-overlay,
html.bv-kb-focus .bpush-modal {
    align-items: flex-start !important;
    overflow-y: auto !important;
}
/* Viewport path only — we know the true height, so use it. */
html.bv-kb-open .flow-modal-backdrop,
html.bv-kb-open .ce-modal,
html.bv-kb-open .modal-bg,
html.bv-kb-open .bvm-overlay,
html.bv-kb-open .bpush-modal {
    height: var(--bv-vvh, 100%) !important;
}
html.bv-kb-open .flow-modal-backdrop > *,
html.bv-kb-open .ce-modal > *,
html.bv-kb-open .modal-bg > *,
html.bv-kb-open .bvm-overlay > .bvm-card,
html.bv-kb-open .bpush-modal > * {
    max-height: 100% !important;
}
/* Fallback path — the keyboard's height is unknowable here.
   ponytail: 52vh assumes a typical Android IME (~40-48% of the screen). If a
   device with a much taller keyboard turns up, the fix is to read the real
   height from the shell via a JS bridge, not to shrink this number further. */
html.bv-kb-focus .flow-modal-backdrop > *,
html.bv-kb-focus .ce-modal > *,
html.bv-kb-focus .modal-bg > *,
html.bv-kb-focus .bvm-overlay > .bvm-card,
html.bv-kb-focus .bpush-modal > * {
    max-height: 52vh !important;
    margin-top: 12px !important;
}
/* 2026-10-27 - navigation progress bar removed, by request.

   It was a 3px red bar pinned to top:0 that animated 18% -> 62% -> 86% on
   every in-app navigation. In the Android shell it read as a browser artefact
   stapled to the top of the app: the one piece of chrome that told you this
   was a web page. It also sat directly under the native 3dp red headerAccent,
   so a navigation showed two red bars at once.

   The JS in chrome-assets.js still creates #bvNavBar and still animates its
   width. Left alone on purpose - bvNavHint() is called from seven places and
   from checkout, and hiding the element is a one-line change that cannot
   break any of them. The animation now runs on a display:none div, which
   costs nothing measurable.

   Loading is still acknowledged: .bv-navskel below paints a skeleton of the
   DESTINATION page 220ms after the tap. That was always the half doing the
   real work - the bar only duplicated it, 220ms earlier and less usefully. */
.bv-navbar{ display:none !important; }

/* 2026-10-23 — top/bottom are set in JS so the REAL site header and the
   bottom dock stay visible; both are identical on every page, so painting a
   fake copy of them only made every skeleton look like the homepage. */
.bv-navskel{
    position:fixed; top:0; right:0; bottom:0; left:0; z-index:9990;
    background:#fff; overflow:hidden;
    /* 2026-10-24 — was opacity:0 + a .12s fade-in. A white panel part-way
       through a fade turns whatever is underneath it washed-out grey, so the
       real header and bottom bar looked dimmed and broken for the first
       frames. The overlay is only created after a 220ms delay, so it never
       flashes on a fast navigation and the fade bought nothing. Opaque from
       the first paint. */
    opacity:1;
}
@keyframes bvNavSkelIn{ to{ opacity:1; } }
.bv-navskel .bv-skel{ display:block; }

/* 2026-10-24 — chrome strips. The real header is kept visible only while it is
   actually pinned at the top; it is position:sticky and scrolls away, so a
   customer who had scrolled before tapping got an overlay from top:0 with a
   blank white band where the header and the bottom dock should be — reported as
   "header and footer bar is not showing skeleton". When the real chrome cannot
   be preserved we paint a skeleton of it instead, sized from the real
   element, so that band is never empty. */
.bns-chrome{ position:absolute; left:0; right:0; background:#fff; box-sizing:border-box; }
.bns-chrome--top{ top:0; border-bottom:1px solid #f0f0f2; }
.bns-chrome--bot{ bottom:0; border-top:1px solid #f0f0f2; }
.bns-chrome__row{
    display:flex; align-items:center; height:100%;
    max-width:1280px; margin:0 auto; padding:0 16px; box-sizing:border-box;
}
.bns-chrome__sp{ flex:1 1 auto; }
.bns-dock{ display:flex; align-items:center; justify-content:space-around; height:100%; padding:0 8px; box-sizing:border-box; }
.bns-dock__i{ display:flex; flex-direction:column; align-items:center; }

/* Containers mirror each page's own max-width + gutter. */
.bns-wrap{ margin:0 auto; padding:16px; box-sizing:border-box; }
.bns-wrap--1280{ max-width:1280px; padding:24px; }
.bns-wrap--1240{ max-width:1240px; padding:24px 22px; }
.bns-wrap--1180{ max-width:1180px; padding:28px 22px; }
.bns-wrap--900 { max-width:900px;  padding:28px 16px; }
.bns-wrap--800 { max-width:800px;  padding:28px 16px; }
.bns-wrap--720 { max-width:720px;  padding:24px 16px; }
.bns-wrap--460 { max-width:460px;  padding:28px 16px; }
.bns-row{ display:flex; gap:12px; align-items:center; }
.bns-col{ display:flex; flex-direction:column; gap:10px; }
.bns-center{ margin-left:auto !important; margin-right:auto !important; }
.bns-card{ border:1px solid #ECEEF1; border-radius:14px; padding:18px; box-sizing:border-box; }
.bns-strip{ display:flex; gap:14px; overflow:hidden; }

/* Home — order card is a row on desktop (headline | two buttons) and a
   stacked column on phones; slider, reels strip, 3/2/1 location grid. */
.bns-home-card{ max-width:980px; margin:18px auto 16px; display:flex; gap:18px; align-items:center; }
.bns-home-card .bns-home-head{ flex:0 0 260px; }
.bns-home-card .bns-home-btns{ flex:1; display:flex; gap:14px; }
.bns-home-card .bns-home-btns > .bv-skel{ flex:1; height:54px; border-radius:12px; }
.bns-slider{ width:100%; height:clamp(500px,65vh,680px); border-radius:0 !important; margin-top:20px; }
.bns-strip > .bv-skel{ flex:0 0 230px; height:400px; border-radius:14px; }
.bns-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.bns-loc{ height:300px; border-radius:10px; }
@media (max-width:1080px){ .bns-grid3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:768px){
    .bns-home-card{ flex-direction:column; align-items:stretch; margin:12px 0; }
    .bns-home-card .bns-home-head{ flex:none; }
    .bns-home-card .bns-home-btns{ flex-direction:column; gap:12px; }
    .bns-home-card .bns-home-btns > .bv-skel{ flex:none; }
    .bns-slider{ height:clamp(400px,55vh,520px); margin-top:12px; }
    .bns-strip > .bv-skel{ flex:0 0 42%; height:260px; }
    .bns-loc{ height:230px; }
}
@media (max-width:640px){ .bns-grid3{ grid-template-columns:1fr; } }

/* Menu — about strip, tab pills, search, category chips, then items grid
   (3 cols) beside the 360px order panel; single column under 1024px. */
.bns-menu-grid{ display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start; }
.bns-items{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bns-item{ border:1px solid #ECEEF1; border-radius:14px; overflow:hidden; }
.bns-item > .bv-skel:first-child{ aspect-ratio:4/3; border-radius:0; }
.bns-panel{ height:420px; border-radius:14px; }
@media (max-width:1024px){
    .bns-menu-grid{ grid-template-columns:1fr; }
    .bns-items{ grid-template-columns:repeat(2,1fr); gap:12px; }
    .bns-panel{ display:none !important; }
}

/* Checkout + cart — two columns (form | summary) on desktop; on phones the
   summary sits ABOVE the form, as the real pages do. */
.bns-co-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px 28px; align-items:start; }
.bns-cart-grid{ display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start; }
@media (max-width:900px){
    .bns-co-grid, .bns-cart-grid{ grid-template-columns:1fr; }
    .bns-co-grid > .bns-side, .bns-cart-grid > .bns-side{ order:-1; }
}

/* Store locator 3/2/1, gift designs 4/2, menu-item head row. */
.bns-sl-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:720px){ .bns-sl-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .bns-sl-grid{ grid-template-columns:repeat(3,1fr); } }
.bns-gc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:540px){ .bns-gc-grid{ grid-template-columns:repeat(2,1fr); } }
.bns-mi-head{ display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start; }
.bns-mi-head > .bv-skel{ width:220px; height:220px; border-radius:14px; flex:0 0 auto; }
@media (max-width:560px){ .bns-mi-head > .bv-skel{ width:100%; height:auto; aspect-ratio:16/10; } }

@media (prefers-reduced-motion: reduce){
    .bv-navskel{ animation:none; opacity:1; }
}