:root {
    --brand-red:    #C00A27;
    --brand-red-2:  #E31837;
    --text:         #1B1B1F;
    --text-muted:   #6B7280;
    --teal:         #2C6580;
    --note-dark:    #2A2A2A;
    --subtotal-bg:  #EFF5FB;
    --border:       rgba(0,0,0,0.09);
    --shadow-sm:    0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:    0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg:    0 12px 32px rgba(0,0,0,0.12);
    --radius-card:  14px;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; background: #FFFFFF; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.015em; }
ul { list-style: none; padding: 0; margin: 0; }

/* Header CSS is defined ONCE in home.partials.v2_chrome_assets (included
   from the head). Don't add header rules here — keep this file scoped to
   page-specific styles. */

/* ─────────── VENDOR BANNER ─────────── */
.vendor-banner { background: #fff; border-bottom: 1px solid var(--border); }
.vb-inner { max-width: 1280px; margin: 0 auto; padding: 16px 24px; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.vb-store { display: flex; align-items: center; gap: 14px; min-width: 0; }
.vb-store .photo { width: 56px; height: 56px; border-radius: 12px; background-image: url('http://127.0.0.1:8765/images/sliders/668bda015324b_newww.jpg'); background-size: cover; background-position: center; flex-shrink: 0; box-shadow: var(--shadow-sm); background-color: #F4F4F5; }
.vb-store .info { min-width: 0; }
.vb-store h1 { font-size: 20px; font-weight: 800; line-height: 1.15; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vb-store h1 .open-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 100px; background: rgba(27,126,47,0.10); color: #1B7E2F; border: 1px solid rgba(27,126,47,0.25); letter-spacing: 0.04em; text-transform: uppercase; }
.vb-store h1 .open-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vb-store .meta { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vb-store .meta a { color: var(--brand-red); font-weight: 600; }
.vb-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.vb-context-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: #FAFAFB; border: 1px solid var(--border); border-radius: 100px; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; transition: 0.15s; }
.vb-context-pill:hover { border-color: var(--text); }

/* ─────────── About strip — centered "Order Online" + vendor h4 + 3-tab pills (matches live) ─────────── */
.about-strip { padding: 28px 24px 4px; background: #fff; }
.about-strip .section-title { text-align: center; font-size: 28px; font-weight: 800; letter-spacing: -.015em; }
.about-strip .vendor-name { text-align: center; font-size: 16px; font-weight: 500; color: var(--text-muted); margin-top: 6px; }
.about-strip .open-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 100px; background: rgba(27,126,47,0.10); color: #1B7E2F; border: 1px solid rgba(27,126,47,0.25); letter-spacing: 0.04em; text-transform: uppercase; margin-left: 8px; vertical-align: middle; }
.about-strip .open-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.about-strip .vb-meta { text-align: center; font-size: 12.5px; color: var(--text-muted); margin-top: 6px; }
.about-strip .vb-meta a { color: var(--brand-red); font-weight: 600; }

.tab-pills { display: flex; justify-content: center; margin: 18px 0 6px; gap: 6px; flex-wrap: wrap; }
.tab-pills a {
    padding: 10px 26px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
    transition: 0.15s;
    border: 1px solid transparent;
}
.tab-pills a:hover { background: #F4F4F5; }
.tab-pills a.active {
    background: var(--brand-red);
    color: #fff;
    box-shadow: 0 4px 10px rgba(192,10,39,.18);
}
@media (max-width: 768px) {
    .about-strip { padding: 18px 16px 2px; }
    .about-strip .section-title { font-size: 22px; }
    .about-strip .vendor-name { font-size: 14px; }
    .tab-pills a { padding: 8px 18px; font-size: 13px; }
}

/* ─────────── Search strip (live-filter the menu) ─────────── */
.search-strip { background: #fff; border-bottom: 1px solid var(--border); padding: 12px 24px; }
.search-bar {
    max-width: 560px;
    margin: 0 auto;
    display: flex; align-items: center; gap: 10px;
    background: #FAFAFB;
    border: 1.5px solid var(--border);
    border-radius: 100px;
    padding: 10px 18px;
    transition: 0.18s;
}
.search-bar:focus-within {
    background: #fff;
    border-color: var(--brand-red);
    box-shadow: 0 0 0 4px rgba(192,10,39,0.08);
}
.search-bar svg { width: 16px; height: 16px; stroke: var(--text-muted); fill: none; stroke-width: 2; flex-shrink: 0; }
.search-bar input {
    flex: 1;
    border: 0; outline: 0;
    background: transparent;
    font: inherit; font-size: 14px;
}
.search-bar .clear-btn {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    font-size: 16px;
    line-height: 1;
    border-radius: 50%;
    width: 24px; height: 24px;
    display: none;
    align-items: center; justify-content: center;
}
.search-bar .clear-btn:hover { background: #E5E7EB; color: var(--text); }
.search-bar.has-text .clear-btn { display: inline-flex; }
.search-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-muted);
    font-size: 14px;
    display: none;
}
.search-empty.show { display: block; }
@media (max-width: 768px) {
    .search-strip { padding: 10px 14px; }
    .search-bar { padding: 8px 14px; font-size: 13px; }
}

/* ─────────── STICKY CATEGORY NAV ─────────── */
/* top: must equal site-header height so the sticky cat-nav lands directly
   below the sticky header instead of overlapping it. Header = 14px top
   padding + 120px logo + 14px bottom padding = 148px on desktop. */
.cat-nav-wrap { position: sticky; top: 148px; z-index: 50; background: #fff; border-bottom: 1px solid var(--border); }
.cat-nav { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav a { padding: 14px 18px; font-weight: 600; font-size: 14px; color: var(--text-muted); white-space: nowrap; border-bottom: 2px solid transparent; transition: 0.15s; }
.cat-nav a:hover { color: var(--text); }
.cat-nav a.active { color: var(--brand-red); border-bottom-color: var(--brand-red); }

/* ─────────── PAGE LAYOUT ─────────── */
.page-grid { max-width: 1280px; margin: 0 auto; padding: 24px 24px 60px; display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }

/* ─────────── MENU SECTIONS ─────────── */
.menu-section { margin-bottom: 48px; scroll-margin-top: 200px; }

/* ───── Catering "Plan a Large Event" promo banner + modal ───── */
.catering-promo {
    display: flex; align-items: center; gap: 18px;
    background: linear-gradient(135deg, rgba(192,10,39,0.06) 0%, rgba(27,27,31,0.05) 100%);
    border: 1px solid rgba(192,10,39,0.20);
    border-radius: 14px;
    padding: 18px 22px;
    margin: 0 0 22px;
    cursor: pointer;
    transition: 0.18s;
}
.catering-promo:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); border-color: var(--brand-red); }
.catering-promo-icon { font-size: 36px; line-height: 1; flex-shrink: 0; }
.catering-promo-body { flex: 1; min-width: 0; }
.catering-promo-body h3 { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: #1B1B1F; letter-spacing: -0.01em; }
.catering-promo-body p { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
.catering-promo-cta {
    background: var(--brand-red); color: #fff;
    border: 0; border-radius: 9px;
    padding: 11px 18px; font-size: 13.5px; font-weight: 700;
    cursor: pointer; flex-shrink: 0;
    font-family: inherit;
    transition: background 0.15s;
}
.catering-promo-cta:hover { background: #A30922; }
@media (max-width: 640px) {
    .catering-promo { flex-direction: column; align-items: flex-start; padding: 16px; }
    .catering-promo-icon { font-size: 32px; }
    .catering-promo-cta { width: 100%; }
}

/* Modal — covers the whole viewport, scroll-locks body */
.ce-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 280; display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.ce-modal.show { display: flex; }
.ce-modal-card { background: #fff; border-radius: 16px; width: min(560px, 100%); padding: 28px 28px 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.4); position: relative; }
.ce-modal-card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: #1B1B1F; }
.ce-modal-card .sub { font-size: 13.5px; color: var(--text-muted); margin: 0 0 18px; line-height: 1.55; }
.ce-modal-card .ce-close { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; border: 0; background: transparent; cursor: pointer; font-size: 20px; color: #6B7280; border-radius: 50%; transition: background 0.15s; }
.ce-modal-card .ce-close:hover { background: #F3F4F6; }

.ce-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ce-form .row.three { grid-template-columns: 1fr 1fr 1fr; }
.ce-form .fld { margin-bottom: 12px; }
.ce-form label { display: block; font-size: 12px; font-weight: 700; color: #6B7280; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.ce-form label .req { color: var(--brand-red); }
.ce-form input[type="text"],
.ce-form input[type="email"],
.ce-form input[type="tel"],
.ce-form input[type="number"],
.ce-form input[type="date"],
.ce-form select,
.ce-form textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: #1B1B1F;
    background: #fff;
    transition: border-color 0.15s;
}
.ce-form input:focus, .ce-form select:focus, .ce-form textarea:focus {
    outline: 0; border-color: var(--brand-red); box-shadow: 0 0 0 3px rgba(192,10,39,0.10);
}
.ce-form textarea { min-height: 90px; resize: vertical; }
.ce-form .radio-pills { display: flex; gap: 6px; }
.ce-form .radio-pills label { padding: 8px 14px; border: 1px solid #E5E7EB; border-radius: 100px; cursor: pointer; font-size: 13px; color: #1B1B1F; text-transform: none; letter-spacing: 0; font-weight: 600; transition: 0.15s; }
.ce-form .radio-pills input { position: absolute; opacity: 0; pointer-events: none; }
.ce-form .radio-pills label:has(input:checked) { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
.ce-form .actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.ce-form .actions button[type="submit"] { background: var(--brand-red); color: #fff; border: 0; border-radius: 9px; padding: 12px 22px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.ce-form .actions button[type="submit"]:hover { background: #A30922; }
.ce-form .actions button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
.ce-form .actions .cancel { background: transparent; border: 0; color: #6B7280; cursor: pointer; font-size: 13px; font-family: inherit; }

.ce-success { display: none; text-align: center; padding: 24px 8px 4px; }
.ce-success .icon { font-size: 48px; line-height: 1; margin-bottom: 12px; }
.ce-success h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: #047857; }
.ce-success p { margin: 0; font-size: 14px; line-height: 1.55; color: #374151; }

.ce-error { background: #FEE2E2; color: #991B1B; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 13px; line-height: 1.45; display: none; }
.ce-error.show { display: block; }

@media (max-width: 540px) {
    .ce-form .row { grid-template-columns: 1fr; }
    .ce-form .row.three { grid-template-columns: 1fr; }
    .ce-modal-card { padding: 22px 18px 20px; }
}
/* Higher specificity (.tab-panel .menu-section h2) so it wins over the
   generic .tab-panel h2 rule defined later in the file. */
.tab-panel .menu-section h2 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 10px 0 22px;
    padding: 12px 0 10px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    border-bottom: 2px solid var(--text);
    color: var(--text);
    line-height: 1.1;
}
.tab-panel .menu-section h2 .count { font-size: 14px; color: var(--text-muted); font-weight: 600; letter-spacing: 0; }
@media (max-width: 768px) {
    .tab-panel .menu-section h2 { font-size: 22px; padding: 9px 0 8px; margin: 6px 0 14px; gap: 8px; }
    .tab-panel .menu-section h2 .count { font-size: 12px; }
}

/* ─────────── ITEM GRID ─────────── */
.item-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.item-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    transition: 0.18s;
}
.item-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.item-card.selected { border-color: var(--text); box-shadow: var(--shadow-md); }

/* Photo: uniform 4:3 aspect ratio + cover crop (same rhythm as UberEats / DoorDash) */
.item-photo {
    position: relative;
    aspect-ratio: 4/3;
    background: #FFFFFF;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
}
.item-photo img {
    width: 100%;
    height: 100%;
    /* contain = full image, no cropping.
       Container bg is white (set on .item-photo above) so:
         · PNG cutouts → transparency reveals white container = looks white
         · JPG with white bg → blends with white container
         · JPG/opaque PNG with black bg → server flood-fills to white before
           caching, so no black is shown */
    object-fit: contain;
    padding: 4%;
    transition: transform 0.4s ease;
}
.item-card:hover .item-photo img { transform: scale(1.04); }
/* Items whose image is a brand logo (Create Your Own Pizza) — keep contain */
.item-photo.logo-photo { background: #FAFAFB; }
.item-photo.logo-photo img { object-fit: contain; padding: 18%; transform: none !important; }
.item-photo .badge {
    position: absolute; top: 12px; left: 12px;
    background: var(--brand-red); color: #fff;
    padding: 4px 10px; border-radius: 100px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.item-photo .customise-btn {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    padding: 9px 18px;
    background: #1B1B1F;
    color: #fff;
    border: 0;
    border-radius: 100px;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    box-shadow: 0 8px 18px rgba(0,0,0,.28);
    transition: 0.18s;
    display: inline-flex; align-items: center; gap: 6px;
    z-index: 2;
    white-space: nowrap;
}
.item-photo .customise-btn:hover { background: var(--brand-red); transform: translateX(-50%) translateY(-2px); }
/* On the logo-style photo (Create Your Own Pizza), the photo bg is white,
   so add a subtle brand outline to keep the dark pill readable */
.item-photo.logo-photo .customise-btn { border: 1px solid rgba(0,0,0,.08); }

/* Card body */
.item-info { padding: 22px 16px 16px; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.item-info h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 4px; line-height: 1.25; letter-spacing: -0.005em; }
/* Description renders only when present (no   placeholder anymore).
   No min-height — empty rows collapse cleanly. The size area below uses
   margin-top:auto to push itself to the bottom regardless. */
.item-info .desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 4px 0 14px; }

/* "Pick Size" thin label — pushed to the bottom of the card via margin-top:auto
   so cards line up regardless of whether a description is present */
.pick-size-label {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: auto 0 14px;     /* auto top → bottom-aligned within .item-info */
}
/* (single-price-wrap also gets margin-top:auto via its main rule below) */
.pick-size-label::before,
.pick-size-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* CIRCULAR Pie / Slice pills — inline, slightly smaller */
.size-row { display: flex; justify-content: center; gap: 28px; margin-bottom: 12px; width: 100%; }
@keyframes size-pulse {
    0%, 100% { transform: scale(1); }
    30%      { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(192,10,39,.35)); }
    60%      { transform: scale(0.98); }
}
.size-row.pulse-attn .size-pill { animation: size-pulse 0.55s ease; }
.size-pill-wrap { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.size-pill {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1.5px solid #D1D5DB;
    background: #fff;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 700;
    color: var(--text);
    transition: 0.15s;
}
.size-pill-wrap:hover .size-pill { border-color: #777; }
.size-pill-wrap.selected .size-pill {
    border-color: var(--brand-red);
    background: #FFE8B8;
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(192,10,39,0.10);
}
.size-price {
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}
.size-price .currency { font-size: 10.5px; vertical-align: top; margin-right: 1px; }
.size-pill-wrap.selected .size-price { color: var(--text); font-weight: 700; }

/* Single-price (no sizes) — appetizers, salads, beverages.
   2026-05-19: changed from brand-red to text color (black) for better
   readability and to match the size-priced cards' selected state. */
.single-price-wrap { text-align: center; margin: auto 0 14px; }   /* auto-top → bottom-aligned */
.single-price-wrap .pp { font-size: 20px; font-weight: 800; color: var(--text); }
.single-price-wrap .pp .currency { font-size: 13px; vertical-align: top; margin-right: 1px; color: var(--text); }

/* 2026-05-28 — product-scoped coupon UI */
.coupon-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #c00a27, #8B0719);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 5px 10px;
    border-radius: 6px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(192, 10, 39, 0.30);
    text-transform: uppercase;
}
/* 2026-05-28 — Sale badge: green gradient (was amber), restaurant-
   friendly "DEAL" wording when no percent is available. Visually
   distinct from the red coupon-driven badge so customers know it's
   a price drop, not a code-redemption promo. */
.coupon-badge.is-sale {
    background: linear-gradient(135deg, #10B981, #047857);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.30);
}
.coupon-badge.is-sale::before { content: '✓ '; }

/* 2026-05-28 — Per-variant sale styling on the size pill.
   When a specific size variant is on sale, the pill shows the
   original price struck through above the discounted price in
   brand red. Also adds an amber tint to the pill border so the
   sale variant stands out among siblings. */
.size-pill-wrap.is-on-sale .size-pill {
    border-color: #F59E0B !important;
    background: #FFFBEB !important;
    color: #92400E !important;
}
.size-price-old {
    text-decoration: line-through;
    color: #9CA3AF !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    margin-top: 2px;
}
.size-price-new {
    color: #c00a27 !important;
    font-weight: 800 !important;
    font-size: 13px !important;
}

/* 2026-05-28 — Out-of-stock state.
   Card fades, photo gets a grey wash, add-to-cart goes disabled. */
.item-card.is-out-of-stock { opacity: 0.85; }
.item-card.is-out-of-stock .item-photo img { filter: grayscale(0.6) brightness(0.92); }
.item-card.is-out-of-stock .add-cart-btn,
.item-card.is-out-of-stock .customise-btn {
    background: #E5E7EB !important;
    color: #6B7280 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}
.item-card.is-out-of-stock .size-pill-wrap { pointer-events: none; opacity: 0.6; }
.oos-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #1B1B1F;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 5px 10px;
    border-radius: 6px;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30);
    text-transform: uppercase;
}
.single-price-wrap .pp.pp-old {
    text-decoration: line-through;
    color: #9CA3AF;
    font-size: 15px;
    font-weight: 600;
    margin-right: 8px;
}
.single-price-wrap .pp.pp-old .currency { color: #9CA3AF; }
.single-price-wrap .pp.pp-new {
    color: #c00a27;
    font-size: 22px;
    font-weight: 900;
}
.single-price-wrap .pp.pp-new .currency { color: #c00a27; }

/* Add-to-cart button — appears once selected (live behaviour) */
.add-cart-btn {
    margin-top: auto;
    width: 100%;
    padding: 11px 14px;
    background: var(--brand-red);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 12px rgba(192,10,39,0.18);
    transition: 0.18s;
    display: none;
}
.item-card.selected .add-cart-btn,
.item-card.no-sizes .add-cart-btn { display: block; }
.add-cart-btn:hover { background: var(--brand-red-2); transform: translateY(-1px); }
/* "Build your own" items (Create Your Own Pizza) — there's no plain version to
   add, so suppress the Add-to-cart and force the user through Customise.
   Other customisable items (regular pizzas with optional toppings) keep BOTH:
   Add-to-cart for the plain version + Customise for picking toppings. */
.item-card.require-customise .add-cart-btn { display: none !important; }

/* Per-size stepper on customisable cards is read-only (counts customised
   variants); +/- doesn't apply because each custom pizza is a unique entry */
.per-size-stepper.read-only button {
    pointer-events: none;
    color: var(--text-muted);
}
.per-size-stepper.read-only .qval { color: var(--text); }

/* In-cart state — per-size stepper sits ABOVE THE SPECIFIC size that's in cart
   (so user can independently see Pie vs Slice quantity).
   Add-to-cart hides only when the *selected* size is the one in cart. */
.item-card.has-cart-item .add-cart-btn { display: none !important; }

.size-pill-wrap { position: relative; }
/* When ANY size on a card is in cart, reserve space above EVERY size in that
   row so the circles stay on the same line whether or not they have a stepper.
   Final padding-top is applied below (after .per-size-stepper styles). */

.per-size-stepper {
    display: none;
    position: absolute;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
    height: 24px;
    width: 62px;
    align-items: stretch;
    background: #fff;
    border: 1px solid #BABABA;
    border-radius: 6px;
    overflow: hidden;
}
.per-size-stepper.has-cart-qty { display: inline-flex; }
.per-size-stepper button {
    flex: 0 0 18px;
    background: #fff;
    color: var(--text);
    border: 0;
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
}
.per-size-stepper button:hover { background: #F4F4F5; }
.per-size-stepper .qval {
    flex: 1;
    display: grid; place-items: center;
    font-size: 11px;
    font-weight: 700;
    border-left: 1px solid #BABABA;
    border-right: 1px solid #BABABA;
    color: var(--text);
}
.item-card.has-any-cart-size .size-pill-wrap { padding-top: 30px; }
.item-card.has-any-cart-size .size-row { gap: 36px; }

/* No-sizes items keep the simple card-qty-stepper (single product, single price) */
.card-qty-stepper {
    display: none;
    margin: 2px auto 12px;
    width: 86px;
    height: 28px;
    align-items: stretch;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #BABABA;
}
.card-qty-stepper button {
    flex: 0 0 26px;
    background: #fff;
    color: var(--text);
    border: 0;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1;
}
.card-qty-stepper button:hover { background: #F4F4F5; }
.card-qty-stepper .qval {
    flex: 1;
    display: grid; place-items: center;
    font-size: 12.5px;
    font-weight: 700;
    border-left: 1px solid #BABABA;
    border-right: 1px solid #BABABA;
    color: var(--text);
}
.item-card.no-sizes.has-cart-item .card-qty-stepper { display: inline-flex; }

/* ─────────── CART SIDEBAR ─────────── */
/* top must clear BOTH stacked sticky bars above:
     · site-header (top: 0, ~148px tall on desktop)
     · cat-nav-wrap (top: 148px, ~47px tall when active = ends at ~195px)
   Set to 208px so the cart's top edge sits a comfortable ~13px below the
   category-nav bottom. Matches `.menu-section { scroll-margin-top: 200px; }`
   defined elsewhere in this file, which targets the same stacked chrome. */
.cart-side {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-md);
    /* 2026-05-31 — Harden sticky behavior with !important + align-self
       so the cart panel stays pinned while scrolling regardless of any
       host-page CSS or grid alignment quirks. Previous version was
       getting overridden in some viewports (cart followed the scroll
       only until its natural cell height, then disappeared). */
    position: -webkit-sticky !important;
    position: sticky !important;
    /* 2026-06-01 — top must clear BOTH stacked sticky bars above:
       site-header (top:0, ~148px tall) + cat-nav-wrap (top:148px, ~47px).
       208px puts the cart's top edge ~13px below the cat-nav's bottom,
       so the "Your order" header is fully visible, not clipped. */
    top: 208px !important;
    align-self: start !important;
    /* Cap cart height: viewport - (top:208 + bottom breathing 24) so the
       cart-foot Checkout button always stays visible. The internal
       .cart-lines area handles overflow with its own scroll. */
    /* 2026-09-23 — dvh with a vh fallback; see v2_chrome_assets. Matters here
       because this cart panel is already height-constrained: overshooting on
       iOS pushed its Checkout button below the fold. */
    max-height: calc(100vh - 232px) !important;
    max-height: calc(100dvh - 232px) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Cart header — title bar (sentence case, brand-red accent line, small info note) */
/* 2026-06-01 — Cart header is now a distinct visual block so it's
   clearly visible above the empty-state placeholder. Tinted brand-red
   accent strip + slightly higher contrast bg make it read as a panel
   header even when the cart-lines area below contains only the
   "YOUR CART IS EMPTY" message. */
.cart-head {
    padding: 18px 18px 14px;
    border-bottom: 2px solid var(--brand-red);
    background: linear-gradient(180deg, #fff 0%, #FFF6F8 100%);
    flex-shrink: 0;
}
.cart-head h3 {
    font-size: 16px; font-weight: 800; letter-spacing: -0.005em;
    margin-bottom: 6px;
    color: var(--text);
    display: flex; align-items: center; gap: 8px;
}
.cart-head h3::before {
    content: "";
    display: inline-block;
    width: 5px; height: 18px;
    background: var(--brand-red);
    border-radius: 2px;
}
.cart-head .note {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}
.cart-head .note strong { color: var(--text); font-weight: 700; }
.cart-note { display: none; } /* legacy dark header removed */

/* `flex: 1` lets the items area absorb available vertical space inside
   .cart-side's max-height = viewport - chrome cap. `min-height: 0` is
   required so the flex child can actually shrink below its content
   height to make room for scrolling. Items scroll internally; the cart
   header + footer stay pinned. */
.cart-lines { padding: 4px 18px; max-height: 380px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.cart-line {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px solid #EFF2F5;
}
.cart-line:last-child { border-bottom: 0; }
.cart-line .thumb {
    width: 44px; height: 44px;
    border-radius: 8px;
    background: #FAFAFB;
    border: 1px solid var(--border);
    overflow: hidden;
    flex-shrink: 0;
    display: grid; place-items: center;
    font-size: 16px;
    color: var(--text-muted);
}
.cart-line .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line .info { min-width: 0; padding-top: 1px; }
.cart-line .info .name { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.3; letter-spacing: -0.005em; }
.cart-line .info .opts { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.cart-line .info .toppings-toggle {
    margin-top: 4px;
    font-size: 12px;
    color: var(--teal);
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.cart-line .info .toppings-toggle::after { content: "▾"; font-size: 10px; transition: 0.15s; }
.cart-line .info.open .toppings-toggle::after { transform: rotate(180deg); }
.cart-line .info .toppings-list { display: none; margin-top: 4px; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
.cart-line .info .toppings-list > div { padding: 1px 0; }
.cart-line .info.open .toppings-list { display: block; }

.cart-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #BABABA;
    border-radius: 6px;
    overflow: hidden;
    height: 26px;
}
.cart-qty button {
    width: 22px;
    background: #fff;
    border: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.cart-qty button:hover { background: #f5f5f5; }
.cart-qty span {
    min-width: 28px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    border-left: 1px solid #BABABA;
    border-right: 1px solid #BABABA;
    display: grid;
    place-items: center;
}
.cart-line .line-total { font-size: 14.5px; font-weight: 800; color: var(--text); white-space: nowrap; letter-spacing: -0.005em; }
.cart-line .right-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; position: relative; }
.cart-line .remove-x {
    position: absolute;
    top: -2px; right: -4px;
    width: 22px; height: 22px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.cart-line:hover .remove-x { opacity: 1; }
.cart-line .remove-x:hover { background: rgba(192,10,39,.10); color: var(--brand-red); }
@media (max-width: 1024px) {
    /* Always visible on mobile (no hover) */
    .cart-line .remove-x { opacity: 0.7; }
}

.cart-empty {
    padding: 56px 18px;
    text-align: center;
    color: var(--text-muted);
}
.cart-empty h3 { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 8px; color: var(--text); }
.cart-empty p { font-size: 13px; }

.cart-foot {
    background: #FAFAFB;
    border-top: 1px solid var(--border);
    padding: 14px 18px 16px;
}
.cart-foot .row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    margin-bottom: 12px;
}
.cart-foot .row #cartSubtotal {
    font-size: 18px; font-weight: 800; color: var(--text); letter-spacing: -0.01em;
}
.cart-checkout {
    display: flex; align-items: center; justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    background: var(--brand-red);
    color: #fff;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    text-align: center;
    font-size: 14px;
    letter-spacing: 0;
    transition: 0.18s;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(192,10,39,.22);
}
.cart-checkout:hover { background: #A30922; transform: translateY(-1px); }
.cart-checkout .arrow { font-size: 16px; line-height: 1; }

/* ─────────── ITEM MODAL (for items with customisation) — 2-column layout ─────────── */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px; }
.modal-bg.open { display: flex; }
.modal-card {
    background: #fff;
    border-radius: 18px;
    max-width: 920px;
    width: 100%;
    max-height: 92vh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: 1fr 320px;     /* options · summary */
    grid-template-rows: 1fr auto;
    position: relative;
}
.modal-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.95);
    border: none; border-radius: 50%;
    font-size: 18px;
    box-shadow: var(--shadow-md);
    z-index: 10;
}
.modal-body {
    padding: 22px 28px 8px;
    overflow-y: auto;
    grid-column: 1; grid-row: 1;
}
.modal-body h3 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.modal-body .desc { color: var(--text-muted); font-size: 13.5px; line-height: 1.55; margin-bottom: 18px; }

/* Per-topping half/whole placement selector (live behaviour) */
.topping-row {
    border-bottom: 1px solid var(--border);
    transition: 0.18s;
}
.topping-row:last-child { border-bottom: 0; }
.topping-row > label {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 6px;
    cursor: pointer;
    gap: 12px;
}
.topping-row > label .check-name { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.topping-row > label .name { font-size: 14px; font-weight: 600; color: var(--text); }
.topping-row > label .price { font-size: 14px; color: var(--text); font-weight: 600; white-space: nowrap; }
.topping-row > label .cb {
    width: 18px; height: 18px;
    border: 1.5px solid #BABABA;
    border-radius: 4px;
    background: #fff;
    display: grid; place-items: center;
    flex-shrink: 0;
    transition: 0.15s;
}
.topping-row > label .cb::after {
    content: "";
    width: 10px; height: 10px;
    background: #fff;
    transform: scale(0);
    transition: 0.12s;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
}
.topping-row > label input[type="checkbox"] { display: none; }
.topping-row > label input[type="checkbox"]:checked + .check-name .cb {
    background: var(--text);
    border-color: var(--text);
}
.topping-row > label input[type="checkbox"]:checked + .check-name .cb::after { transform: scale(1); }

.topping-row .half-row {
    display: none;
    background: #FAFAFB;
    border-radius: 100px;
    margin: 4px 6px 14px;
    padding: 6px;
    overflow: hidden;
}
.topping-row.checked .half-row { display: flex; }
.half-pill {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 100px;
    background: transparent;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: 0.15s;
    white-space: nowrap;
}
.half-pill svg { width: 18px; height: 18px; flex-shrink: 0; }
.half-pill:hover { background: rgba(0,0,0,.05); }
.half-pill.active {
    background: var(--text);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Modal title row */
.modal-title-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-right: 40px;
}
.modal-title-row h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.005em; line-height: 1.25; }
.modal-title-row .modal-title-price { font-size: 22px; font-weight: 700; color: var(--text); white-space: nowrap; }

/* Right-side summary panel (live preview of current pizza + already-added list) */
.modal-summary {
    grid-column: 2; grid-row: 1;
    background: #FAFAFB;
    border-left: 1px solid var(--border);
    padding: 22px 18px 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.sum-section { margin-bottom: 16px; }
.sum-section:last-child { margin-bottom: 0; }
.sum-section-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex; align-items: baseline; justify-content: space-between;
}
.sum-section-title .pill {
    background: var(--brand-red);
    color: #fff;
    padding: 1px 7px;
    border-radius: 100px;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
}
.sum-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
}
.sum-current-name { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.sum-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px;
    padding: 4px 0;
    line-height: 1.35;
}
.sum-row .label { flex: 1; min-width: 0; color: var(--text); }
.sum-row .label .placement { color: var(--text-muted); font-size: 11.5px; margin-left: 4px; }
.sum-row .price { color: var(--text); font-weight: 600; white-space: nowrap; font-size: 12px; }
.sum-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 12.5px;
    padding: 12px 8px;
    line-height: 1.5;
}
.sum-current-total {
    margin-top: 8px; padding-top: 8px;
    border-top: 1px dashed var(--border);
    display: flex; justify-content: space-between;
    font-weight: 700; font-size: 13px;
}

/* Already-added list */
.sum-added-list { flex: 1; overflow-y: auto; padding-right: 4px; min-height: 0; }
.sum-added-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 12.5px;
}
.sum-added-row:last-child { border-bottom: 0; }
.sum-added-row .ttl { font-weight: 700; line-height: 1.35; min-width: 0; }
.sum-added-row .sub { font-size: 11.5px; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.sum-added-row .price { font-weight: 700; }
.sum-added-row .remove {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
}
.sum-added-row .remove:hover { color: var(--brand-red); }

.sum-subtotal {
    margin-top: 8px; padding-top: 10px;
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between;
    font-size: 13px; font-weight: 700;
}

/* Collapsible section wrapper (Add Toppings / Premium Toppings) */
.topping-section {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 14px;
}
.topping-section:first-of-type { margin-top: 0; }
.topping-section-head {
    padding: 14px 16px;
    background: #FAFAFB;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topping-section-head::after {
    content: "›";
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    transition: 0.2s;
}
.topping-section.open .topping-section-head::after { transform: rotate(90deg); }
.topping-section-body {
    display: none;
    padding: 4px 16px 8px;
    background: #fff;
}
.topping-section.open .topping-section-body { display: block; }

.modal-foot {
    grid-column: 1 / span 2; grid-row: 2;
    padding: 14px 28px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
}
.modal-qty {
    display: inline-flex; align-items: center;
    background: #fff; border: 1.5px solid var(--border);
    border-radius: 10px; padding: 4px;
}
.modal-qty button { width: 32px; height: 32px; background: transparent; border: 0; font-size: 16px; font-weight: 700; border-radius: 6px; }
.modal-qty button:hover { background: #F4F4F5; }
.modal-qty span { font-size: 15px; font-weight: 700; min-width: 28px; text-align: center; }
.modal-add {
    flex: 1;
    padding: 14px 18px;
    background: #1B1B1F;
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 6px 14px rgba(0,0,0,.18);
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    transition: 0.15s;
}
.modal-add:hover { background: var(--brand-red); }

/* ─────────── Upsell modal — polish of the live "YOU MIGHT ALSO ENJOY" ─────────── */
.upsell-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 210;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.upsell-bg.show { display: flex; }
.upsell-card {
    background: #fff;
    border-radius: 18px;
    max-width: 760px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    position: relative;
}
.upsell-head {
    padding: 18px 26px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.upsell-head .title { font-size: 18px; font-weight: 800; letter-spacing: -0.005em; }
.upsell-head .sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.upsell-close {
    width: 36px; height: 36px;
    background: #F4F4F5;
    border: 0; border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    color: var(--text);
    flex-shrink: 0;
    display: grid; place-items: center;
}
.upsell-close:hover { background: #E5E7EB; }
.upsell-body { flex: 1; overflow-y: auto; padding: 18px 26px; }

/* 3-column grid of suggested items */
.upsell-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
}
.upsell-item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 12px 14px;
    text-align: center;
    transition: 0.18s;
    display: flex; flex-direction: column;
}
.upsell-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: rgba(0,0,0,0.18); }
@keyframes upsell-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.upsell-item.added {
    border-color: var(--brand-red);
    background: rgba(192,10,39,0.03);
    box-shadow: 0 6px 16px rgba(192,10,39,.10);
}
.upsell-item.just-added { animation: upsell-pop 0.35s ease; }

.upsell-item .photo {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 10px;
    background: #FAFAFB;
    margin-bottom: 10px;
    overflow: hidden;
}
.upsell-item .photo img { width: 100%; height: 100%; object-fit: cover; }
.upsell-item.logo-photo .photo img { object-fit: contain; padding: 14%; }
.upsell-item .photo .img-fallback {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    font-size: 36px;
    background: #FAFAFB;
    color: #B5B5B8;
}
.upsell-item .name { font-size: 13.5px; font-weight: 700; line-height: 1.3; min-height: 34px; color: var(--text); }
.upsell-item .price { font-size: 14.5px; color: var(--text); font-weight: 800; margin: 6px 0 10px; }
.upsell-item .price .currency { font-size: 11.5px; vertical-align: top; margin-right: 1px; }
.upsell-item .price.has-deal { color: var(--brand-red); }
.upsell-item .price .price-was { font-size: 12px; font-weight: 600; color: #9CA3AF; text-decoration: line-through; margin-right: 6px; }
.upsell-item .qty-or-add { display: flex; }
.upsell-item .add-btn {
    width: 100%;
    padding: 8px 10px;
    background: #1B1B1F;
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: 0.15s;
    margin-top: auto;
}
.upsell-item .add-btn:hover { background: var(--brand-red); }
.upsell-item .qty-stepper {
    display: flex; width: 100%;
    border: 1.5px solid var(--brand-red);
    border-radius: 8px; overflow: hidden;
    margin-top: auto;
}
.upsell-item .qty-stepper button {
    flex: 0 0 32px;
    background: #fff;
    color: var(--brand-red);
    border: 0;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}
.upsell-item .qty-stepper button:hover { background: rgba(192,10,39,.08); }
.upsell-item .qty-stepper span {
    flex: 1;
    background: var(--brand-red);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: grid; place-items: center;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.upsell-foot {
    padding: 14px 26px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FAFAFB;
}
.upsell-foot .skip {
    flex: 0 0 auto;
    background: transparent;
    color: var(--text-muted);
    border: 0;
    padding: 12px 14px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}
.upsell-foot .skip:hover { color: var(--text); }
.upsell-foot .continue {
    flex: 1;
    padding: 14px 18px;
    background: var(--brand-red);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(192,10,39,.22);
    transition: 0.15s;
}
.upsell-foot .continue:hover { background: #A30922; }

@media (max-width: 768px) {
    .upsell-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    /* upsell photo aspect-ratio is responsive — no override needed */
    .upsell-head { padding: 14px 16px; }
    .upsell-body { padding: 14px 16px; }
    .upsell-foot { padding: 12px 16px 14px; }
    .upsell-foot .skip { padding: 10px 8px; font-size: 12px; }
    .upsell-foot .continue { font-size: 13px; padding: 12px 14px; }
}

/* ─────────── Tab panels (Location · Gallery — Order Online is the default) ─────────── */
.tab-panel { display: none; padding: 28px 24px 60px; max-width: 1280px; margin: 0 auto; }
.tab-panel.active { display: block; }
.tab-panel h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.005em; }

/* Restaurant hero image sits above the info+map row so the
   storefront photo is the first thing the customer sees on this tab. */
/* 2026-07-20: was a fixed 21/9 box with object-fit:cover, which centre-cropped
   the top and bottom off every storefront photo. Now the box takes its height
   from the image (height:auto) so the WHOLE photo shows, uncropped — capped at
   a sensible max-height, with object-fit:contain as the fallback that letter-
   boxes (rather than crops) the rare portrait/square upload. */
.location-hero {
    background: #FAFAFB;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.location-hero img {
    /* max-height sized so a normal landscape storefront (~2:1) fills the width
       with no letterbox bars; only a tall portrait upload gets clamped, and
       object-fit:contain then letterboxes it rather than cropping. */
    width: 100%; height: auto; max-height: 560px;
    object-fit: contain; object-position: center;
    display: block; margin-inline: auto;
}
/* Bigger map (5fr) + slimmer info column (3fr) so the storefront map is
   prominent without crowding the address card. */
.location-grid { display: grid; grid-template-columns: 3fr 5fr; gap: 28px; align-items: stretch; }
.location-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.location-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.location-card .address { font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 12px; }
.location-card .meta-row {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    font-size: 13.5px;
}
.location-card .meta-row .label { color: var(--text-muted); flex-shrink: 0; min-width: 84px; font-weight: 600; }
.location-card .meta-row .value { color: var(--text); flex: 1; }
.location-card .meta-row.first { border-top: 0; }
.location-card .meta-row a { color: var(--brand-red); font-weight: 600; }
/* Google rating pill — same design as the store-locator cards. */
.location-card .loc-grating { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; margin: 12px 0 2px; padding: 6px 12px; background: #F7F7F8; border: 1px solid #ECECEE; border-radius: 100px; color: var(--text, #1B1B1F); white-space: nowrap; max-width: 100%; transition: border-color .15s, background .15s; }
.location-card .loc-grating:hover { border-color: #D8D8DC; background: #fff; }
.location-card .loc-grating .loc-grating-g svg { width: 16px; height: 16px; display: block; }
.location-card .loc-grating .loc-grating-num { font-weight: 800; font-size: 14px; }
.location-card .loc-grating .loc-grating-stars { color: #FBBC05; letter-spacing: .5px; font-size: 12.5px; line-height: 1; }
.location-card .loc-grating .loc-grating-e { color: #E2E2E6; }
.location-card .loc-grating .loc-grating-count { color: var(--text-muted); font-size: 12px; }
/* Full-week hours table — same shape as the store-locator card. */
.location-hours { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.location-hours h4 { font-size: 13.5px; font-weight: 700; margin: 0 0 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.location-hours .hr-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; }
.location-hours .hr-row.today { background: rgba(192,10,39,0.05); padding: 4px 8px; margin: 0 -8px; border-radius: 6px; font-weight: 700; }
.location-hours .hr-row .d { color: var(--text); }
.location-hours .hr-row .h { color: var(--text-muted); }
.location-hours .hr-row .h.closed { color: #9CA3AF; font-style: italic; }
.location-map {
    background: #FAFAFB;
    border: 1px solid var(--border);
    border-radius: 14px;
    display: grid; place-items: center;
    color: var(--text-muted);
    font-size: 13px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    min-height: 360px;   /* matches the info-card height via the stretched grid */
}
.location-map iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Location-tab Google reviews */
.location-reviews { margin-top: 30px; }
.location-reviews h3 { font-size: 18px; font-weight: 800; margin: 0 0 16px; color: var(--text, #1B1B1F); }
.location-reviews h3 .lr-sub { font-weight: 400; color: #9CA3AF; font-size: 13.5px; }
.loc-rev-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.loc-rev-card { background: #fff; border: 1px solid #ECECEE; border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 11px; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.loc-rev-card .loc-rev-top { display: flex; align-items: center; justify-content: space-between; }
.loc-rev-card .loc-rev-g svg { width: 17px; height: 17px; display: block; }
.loc-rev-card .loc-rev-stars { color: #FBBC05; letter-spacing: 1px; font-size: 14px; line-height: 1; }
.loc-rev-card .loc-rev-e { color: #E2E2E6; }
.loc-rev-card .loc-rev-text { font-size: 13.5px; line-height: 1.55; color: #1B1B1F; margin: 0; }
.loc-rev-card .loc-rev-meta { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 12px; border-top: 1px solid #ECECEE; }
.loc-rev-card .loc-rev-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, var(--brand-red, #C00A27), #1B1B1F); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
.loc-rev-card .loc-rev-who .nm { font-weight: 700; font-size: 12.5px; color: #1B1B1F; }
.loc-rev-card .loc-rev-who .wh { font-size: 11.5px; color: #9CA3AF; }
@media (max-width: 600px) { .loc-rev-grid { grid-template-columns: 1fr; } }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.gallery-grid .gallery-item {
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: hidden;
    background: #FAFAFB;
    border: 1px solid var(--border);
    cursor: zoom-in;
    transition: 0.18s;
}
.gallery-grid .gallery-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gallery-grid .gallery-item img,
.gallery-grid .gallery-item video { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.gallery-grid .gallery-item:hover img,
.gallery-grid .gallery-item:hover video { transform: scale(1.04); }
.gallery-grid .gallery-item-video { position: relative; }
.gallery-grid .gallery-item-video .gallery-play {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: #fff; font-size: 36px;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%);
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
    pointer-events: none;
}

/* Lightbox */
.lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 250;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
    cursor: zoom-out;
}
.lightbox.show { display: flex; }
.lightbox img,
.lightbox video { max-width: 95vw; max-height: 90vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.lightbox video { background: #000; }

@media (max-width: 768px) {
    .tab-panel { padding: 18px 14px 90px; }
    .location-grid { grid-template-columns: 1fr; gap: 18px; }
    .location-map { min-height: 320px; aspect-ratio: 16/12; }
    .location-hero { margin-bottom: 16px; }
    .location-hero img { max-height: 300px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ─────────── Menu PDF tab (QR + download CTA) ─────────── */
.menu-pdf-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 32px;
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 32px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}
.menu-pdf-qr {
    padding: 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    flex-shrink: 0;
}
.menu-pdf-qr img { display: block; width: 240px; height: 240px; }
.menu-pdf-info h3 {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}
.menu-pdf-info > p {
    margin: 0 0 18px;
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.5;
}
.menu-pdf-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.menu-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    transition: 0.15s;
}
.menu-pdf-btn.primary {
    background: #c00a27;
    color: #fff;
    border: 1px solid #c00a27;
}
.menu-pdf-btn.primary:hover { background: #a00820; }
.menu-pdf-btn.secondary {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
}
.menu-pdf-btn.secondary:hover { background: #f9f9fa; }
.menu-pdf-hint {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-muted);
}
.menu-pdf-hint a { color: #c00a27; text-decoration: none; font-weight: 600; }
.menu-pdf-hint a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .menu-pdf-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px 18px;
        text-align: center;
    }
    .menu-pdf-qr { margin: 0 auto; }
    .menu-pdf-qr img { width: 200px; height: 200px; }
    .menu-pdf-actions { justify-content: center; }
}

/* ─────────── Back-to-top button ─────────── */
.back-to-top {
    position: fixed;
    right: 18px;
    bottom: 80px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #1B1B1F;
    color: #fff;
    border: 0;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(0,0,0,.22);
    display: none;
    align-items: center; justify-content: center;
    font-size: 20px;
    z-index: 75;
    transition: 0.18s;
}
.back-to-top:hover { background: var(--brand-red); transform: translateY(-2px); }
.back-to-top.show { display: flex; }
@media (max-width: 1024px) { .back-to-top { bottom: 88px; } }

/* ─────────── Confirm dialog (remove item / change store) ─────────── */
.confirm-bg {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 260;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.confirm-bg.show { display: flex; }
.confirm-card {
    background: #fff;
    border-radius: 16px;
    max-width: 380px;
    width: 100%;
    padding: 22px 22px 18px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.confirm-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.confirm-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions button {
    flex: 1;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: 0;
    transition: 0.15s;
}
.confirm-actions .cancel {
    background: #F4F4F5;
    color: var(--text);
}
.confirm-actions .cancel:hover { background: #E5E7EB; }
.confirm-actions .confirm {
    background: var(--brand-red);
    color: #fff;
}
.confirm-actions .confirm:hover { background: #A30922; }

/* ─────────── Empty cart enhanced ─────────── */
.cart-empty .browse-btn {
    margin-top: 14px;
    display: inline-block;
    padding: 9px 18px;
    background: #1B1B1F;
    color: #fff;
    border-radius: 100px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 0;
}
.cart-empty .browse-btn:hover { background: var(--brand-red); }

/* ─────────── Cart drawer (slides in from right on all viewports) ─────────── */
.cart-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 215;
    display: none;
    opacity: 0;
    transition: opacity 0.22s;
}
.cart-backdrop.show { display: block; opacity: 1; }
.cart-drawer-close {
    display: none;
    position: absolute;
    top: 12px; right: 12px;
    width: 34px; height: 34px;
    border: 0;
    border-radius: 50%;
    background: #F4F4F5;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    z-index: 5;
}

/* When the .open class is added (on any viewport), the cart slides in over
   the page from the right. The desktop sticky sidebar still works
   independently — this is just an additional overlay triggered by the header
   cart icon click. On ≤1024 the sidebar IS only this drawer (no sticky). */
.cart-side.open {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 420px;
    max-width: 92vw;
    z-index: 220;
    margin: 0;
    border: 0;
    border-radius: 0;
    transform: translateX(0);
    overflow-y: auto;
    max-height: none;
    box-shadow: -10px 0 30px rgba(0,0,0,0.20);
    display: flex !important;
    flex-direction: column;
}
.cart-side.open .cart-drawer-close { display: grid; place-items: center; }
.cart-side.open .cart-lines { flex: 1; max-height: none; }

@media (max-width: 1024px) {
    /* On mobile/tablet the cart only ever exists as the drawer — hide the
       in-grid sticky sidebar; show only when .open is added. */
    .cart-side {
        /* 2026-06-06 — Keep the drawer ALWAYS rendered (flex), parked off-screen
           to the RIGHT via transform. We hide it with visibility + pointer-events,
           NOT display:none — because a CSS transition can't animate out of
           display:none, which made the cart just "pop" in instead of sliding.
           Now it smoothly slides in from the RIGHT (right → left).
           position:fixed must be !important to beat the base
           `position: sticky !important` (desktop pinned sidebar). */
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 240;
        margin: 0; border: 0; border-radius: 0;
        transform: translateX(100%);
        /* smooth, slightly eased slide; visibility flips only after the
           slide-out finishes so the close animation is visible too. */
        transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.34s;
        visibility: hidden;
        pointer-events: none;
        overflow: hidden !important;   /* inner .cart-lines scrolls, not the shell */
        max-height: none;
        box-shadow: -10px 0 30px rgba(0,0,0,0.18);
    }
    .cart-side.open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
    }
    .cart-drawer-close { display: grid; place-items: center; }
    .cart-lines { max-height: none; flex: 1; }

    /* ───── 2026-06-06 — Full-screen mobile cart polish (mobile only) ───── */
    /* Header: a touch larger + roomier, with a bigger, softer close button. */
    .cart-side .cart-head { padding: 20px 18px 15px; }
    .cart-side .cart-head h3 { font-size: 19px; }
    .cart-side .cart-head .note { font-size: 12.5px; }
    .cart-side .cart-drawer-close {
        width: 34px; height: 34px; border-radius: 50%;
        background: #F2F3F5; color: #4B5563; border: 0; font-size: 18px;
        box-shadow: none; top: 16px; right: 16px;
    }
    .cart-side .cart-drawer-close:hover { background: #E5E7EB; }

    /* Item rows: bigger thumbnail, more air, hairline dividers. */
    .cart-side .cart-lines { padding: 6px 18px 14px; }
    .cart-side .cart-line { padding: 15px 0; grid-template-columns: 52px 1fr auto; gap: 14px; border-bottom: 1px solid #F1F3F6; }
    .cart-side .cart-line .thumb { width: 52px; height: 52px; border-radius: 12px; }
    .cart-side .cart-line .info .name { font-size: 14.5px; }
    .cart-side .cart-line .info .opts { font-size: 12px; }
    .cart-side .cart-line .line-total { font-size: 15.5px; }
    /* Remove-× always faintly visible on touch (no hover). */
    .cart-side .cart-line .remove-x { opacity: 0.6; }

    /* Footer: elevated, with a premium gradient checkout + safe-area padding. */
    .cart-side .cart-foot {
        background: #fff;
        border-top: 1px solid #EEF0F3;
        box-shadow: 0 -8px 22px rgba(17,17,20,0.06);
        padding: 14px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    }
    .cart-side .cart-foot .row { margin-bottom: 12px; font-size: 13.5px; }
    .cart-side .cart-foot .row #cartSubtotal { font-size: 20px; }
    .cart-side .cart-checkout {
        padding: 15px 18px; font-size: 15.5px; font-weight: 800; border-radius: 14px;
        background: linear-gradient(135deg, #c00a27 0%, #e31837 100%);
        box-shadow: 0 8px 20px rgba(192,10,39,0.32);
    }
    .cart-side .cart-checkout:active { transform: translateY(1px); }
}

/* Min-order message — appears BELOW the Checkout button only when user
   clicks while still below minimum (no proactive nag) */
.min-order-msg {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(192,10,39,.08);
    border: 1px solid rgba(192,10,39,.22);
    font-size: 12.5px;
    color: var(--brand-red);
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    display: none;
    animation: min-order-shake 0.35s ease;
}
.min-order-msg.show { display: block; }
@keyframes min-order-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}

/* Subtotal row now also shows item count on the left */
.cart-foot .row .count { color: var(--text-muted); font-weight: 500; font-size: 12px; margin-left: 6px; }
.cart-checkout.disabled,
.cart-checkout[aria-disabled="true"] {
    background: #C9CCD0 !important;
    color: #fff !important;
    box-shadow: none;
    cursor: not-allowed;
}
.cart-checkout.disabled:hover,
.cart-checkout[aria-disabled="true"]:hover { background: #C9CCD0 !important; }

/* Empty-menu fallback (vendor has no products configured) */
.menu-empty {
    text-align: center;
    padding: 80px 24px;
    background: #FAFAFB;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    margin: 24px 0;
}
.menu-empty .menu-empty-icon { font-size: 56px; margin-bottom: 14px; opacity: 0.7; }
.menu-empty h2 { font-size: 22px; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.01em; }
.menu-empty p { font-size: 14px; color: var(--text-muted); line-height: 1.6; max-width: 460px; margin: 0 auto; }
.menu-empty a { color: var(--brand-red); font-weight: 700; }

/* ─────────── Cart-add pulse + mobile toast ─────────── */
@keyframes cart-bump {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.22); }
    60%  { transform: scale(0.94); }
    100% { transform: scale(1); }
}
@keyframes cart-flash {
    0%   { box-shadow: 0 10px 24px rgba(0,0,0,.32); }
    40%  { box-shadow: 0 10px 24px rgba(192,10,39,.55), 0 0 0 6px rgba(192,10,39,.18); }
    100% { box-shadow: 0 10px 24px rgba(0,0,0,.32); }
}
.cart-count-badge.bump,
.cart-icon-wrap.bump svg {
    animation: cart-bump 0.45s ease;
}
.m-cart-fab.bump, .mbb-cart.bump { animation: cart-flash 0.55s ease; }

/* Toast — small confirmation that pops in/out */
.cart-toast {
    position: fixed;
    top: 18px; left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: #1B1B1F;
    color: #fff;
    padding: 10px 18px;
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 700;
    z-index: 250;
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    display: inline-flex; align-items: center; gap: 8px;
}
.cart-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.cart-toast::before {
    content: "";
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #1B7E2F;
    color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/12px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") center/12px no-repeat;
}

/* ─────────── MOBILE FLOATING CART BAR ─────────── */
/* 2026-06-06 — Mobile bottom dock: a sticky Checkout CTA above a polished
   tab bar (Menu · Search · Cart · Account). Hidden on desktop; shown ≤1024px
   via the responsive block below. */
.m-bottom-dock { display: none; }

/* Sticky checkout CTA */
.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; }

/* Tab row */
.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; }
.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-cart-ico { position: relative; display: inline-flex; }
.mbb-cart-ico svg { width: 23px; height: 23px; }
.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;
}

/* Footer CSS is defined ONCE in home.partials.v2_chrome_assets. */

/* ─────────── COMPARE BAR ─────────── */
.compare-bar { position: fixed; bottom: 18px; left: 18px; z-index: 90; display: flex; gap: 8px; }
.compare-bar a { padding: 9px 14px; border-radius: 100px; background: #fff; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text); box-shadow: var(--shadow-md); }
.compare-bar a:hover { color: var(--brand-red); }

/* ─────────── RESPONSIVE ─────────── */
@media (max-width: 1024px) {
    .page-grid { grid-template-columns: 1fr; padding: 16px 16px 90px; }
    .cart-side { display: none; }
    .vb-actions { flex-wrap: wrap; }
    /* Mobile header is shorter (logo 80px + 14×2 = 108px) */
    .cat-nav-wrap { top: 108px; }
    .menu-section { scroll-margin-top: 170px; }
    /* Bottom dock — always visible on mobile, frosted + rounded top + elevated. */
    .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));
    }
}
@media (max-width: 768px) {
    /* Header logo/nav rules at this breakpoint live in v2_chrome_assets. */
    .vb-inner { grid-template-columns: 1fr; padding: 12px 16px; }
    .vb-store h1 { font-size: 16px; }
    .vb-store .photo { width: 48px; height: 48px; }

    /* Mobile category nav: subtle text + red underline (NOT pills, so it
       doesn't visually conflict with the solid-red tab pills above) */
    .cat-nav {
        flex-wrap: wrap;
        gap: 0 18px;
        padding: 10px 14px;
        justify-content: center;
        overflow-x: visible;
    }
    .cat-nav a {
        padding: 6px 0 8px;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--text-muted);
        background: transparent;
        border: 0;
        border-radius: 0;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }
    .cat-nav a:hover { color: var(--text); background: transparent; }
    .cat-nav a.active {
        color: var(--brand-red);
        background: transparent;
        border-bottom-color: var(--brand-red);
        box-shadow: none;
    }

    .item-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    /* aspect-ratio is responsive — no need to override height/img on mobile */
    .item-info h3 { font-size: 14.5px; }
    .size-pill { width: 40px; height: 40px; font-size: 10.5px; }
    .size-row { gap: 14px; }
    .size-price { font-size: 11.5px; }

    /* Mobile per-size stepper — 2026-09-23: was 52×22px with 14px-wide +/-
       buttons, which is the primary add-to-cart control on the menu grid and
       roughly half the 44px a thumb reliably hits. Widened to 76×34 with 26px
       buttons: still two across a narrow column (76+76+gap fits inside a
       360px-wide card pair), but now actually tappable without zooming. */
    .per-size-stepper { width: 76px; height: 34px; }
    .per-size-stepper button { flex: 0 0 26px; font-size: 13px; }
    .per-size-stepper .qval { font-size: 12px; }
    /* 2026-10-24 — was 26px, and the stepper sat ON TOP of the Pie/Slice
       circle by exactly 10px on every card with something in the cart.

       Cause: the 2026-09-23 change above grew this stepper from 52x22 to
       76x34 for tap-target reasons (right call) but left the reserved space
       at 26px, which had been sized for the 22px version. The stepper is
       absolutely positioned at top:2px, so it needs 2 + 34 = 36px of
       clearance and only had 26 — measured on a 390px viewport, overlap
       10.0px, which is what the overlap looks like on the phone.

       40px = 2 (top) + 34 (height) + 4 (breathing room), matching the 4px
       gap desktop already gets from its 24px stepper and 30px padding. */
    .item-card.has-any-cart-size .size-pill-wrap { padding-top: 40px; }
    /* Extra horizontal room between pills when ANY stepper is visible on this card */
    .item-card.has-any-cart-size .size-row { gap: 22px; }
    .compare-bar { left: 8px; bottom: 78px; }
    .compare-bar a { padding: 7px 11px; font-size: 11.5px; }

    .modal-card {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto auto;
        max-height: 96vh;
    }
    .modal-body { grid-column: 1; grid-row: 1; padding: 18px 18px 4px; }
    .modal-summary {
        grid-column: 1; grid-row: 2;
        border-left: 0; border-top: 1px solid var(--border);
        max-height: 30vh;
        padding: 14px 16px;
    }
    .modal-foot { grid-column: 1; grid-row: 3; padding: 12px 18px 14px; }
    .modal-title-row h3,
    .modal-title-row .modal-title-price { font-size: 18px; }
}
@media (max-width: 540px) {
    .item-grid { grid-template-columns: 1fr 1fr; }
}

/* Header, mobile menu, and footer styles (and their breakpoints) all live
   in home.partials.v2_chrome_assets — included from the head section
   above. Don't add chrome rules here. */