/* =========================================================================
   Menu page — built on the uEngage design system (colors_and_type.css +
   brand_themes.css). All brand colours come from runtime CSS vars that
   base.php injects from web_config, so this file is brand-agnostic.
   Ported from the Lapino'z reference layout the user shared.
   ========================================================================= */

* { box-sizing: border-box; }

html, body { overflow-x: clip; }

/* Defensive: kill the legacy theme.css .veg-badge::after dot so markup
   that still uses <span class="veg-badge"> doesn't render two dots when
   this page mixes old + new veg markers. */
.veg-badge::after { content: none !important; }

/* ---------- Outlet strip (below site-header) ---------- */
/* Outlet strip + menu shell share the same content rail (1280 max + 32px
   padding) so the outlet name on the left aligns with the sidebar and the
   OTS dropdown on the right aligns with the items column edge. */
/* Outlet strip now lives INSIDE .menu-main (right column), so it gets the
   same -16px side bleed as the toolbar to align flush with the column edges
   and the toolbar/sidebar boundary. No more red full-bleed bar across the
   page — the green brand header above already provides that anchor. */
.menu-outlet-strip {
    background: #fff;
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-3) var(--r-3) 0 0;
    margin: 0;
}
/* QR table banner — sits above the bestsellers/featured section.
   Rendered only when ?t={tableId} was scanned (CI3 parity). */
.menu-table-banner {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px;
    background: var(--brand-primary);
    color: var(--secondary-bg-color);
    font-size: 14px; font-weight: 600;
    border-radius: var(--r-2);
    margin: 0 0 16px;
}
.menu-table-banner b { font-weight: 800; }
.menu-outlet-inner {
    padding: 10px 16px 10px;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 24px;
    align-items: center;
}
.menu-outlet-info { display: flex; flex-direction: column; gap: 4px; }
.menu-outlet-name {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 700; color: var(--fg-1);
    font-family: var(--font-display);
}
/* "OPEN" / "CLOSED" status pill in the outlet meta row */
.outlet-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 5px;
    border-radius: var(--r-1);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.4;
    border: 1px solid transparent;
}
.outlet-status__dot {
    width: 6px; height: 6px; border-radius: 50%;
    flex-shrink: 0;
}
.outlet-status--open {
    background: #fff;
    border-color: var(--success);
    color: var(--success);
}
.outlet-status--open .outlet-status__dot { background: var(--success); }
.outlet-status--closed {
    background: #fff;
    border-color: var(--error);
    color: var(--error);
}
.outlet-status--closed .outlet-status__dot { background: var(--error); }

.menu-outlet-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 14px; color: var(--fg-3);
}
.menu-outlet-meta .meta-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--ink-300); flex-shrink: 0;
}
.menu-meta-group { display: inline-flex; align-items: center; gap: 10px; }
.menu-outlet-meta .meta-item { display: inline-flex; align-items: center; gap: 4px; }
.menu-direction {
    color: var(--brand-primary); text-decoration: none;
    font-weight: 600; font-size: 12px;
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: inherit; line-height: inherit;
}
.menu-direction:hover { text-decoration: underline; }
/* Icon-only pickup trigger (no "Get directions" label) — desktop + mobile */
.menu-direction--icon { gap: 0; color: var(--fg-2); }
.menu-direction--icon:hover { text-decoration: none; color: var(--fg-1); }

/* Offer card in strip — plain white pill with green icon + "N OFFERS" badge.
   Brand-agnostic styling. */
.menu-offer-card {
    background: var(--lightest-grey, #F4F4F4);
    border: none;
    border-radius: var(--r-3);
    padding: 10px 14px 10px 12px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer;
    transition: box-shadow var(--dur-2) var(--ease-out);
    text-align: left;
    color: inherit;
    font-family: var(--font-body);
}
.menu-offer-card:hover { box-shadow: var(--shadow-sm); }
.menu-offer-ic {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--success-bg);
    color: var(--success);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
.menu-offer-ic svg { width: 16px; height: 16px; }
.menu-offer-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.menu-offer-title { font-size: 14px; font-weight: 400; color: var(--fg-1); line-height: 1.3; }
.menu-offer-code { font-size: 10px; color: var(--fg-3); margin-top: 2px; }
.menu-offer-chev {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--fg-2); flex-shrink: 0;
    font-size: 10px; font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Order-type switcher — dropdown (trigger button + menu, design-system pattern) */
.ots { position: relative; }
.ots-trigger {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 14px; background: #fff;
    border: 1px solid var(--border); border-radius: 12px;
    cursor: pointer; transition: border-color var(--dur-2), box-shadow var(--dur-2);
    font-family: var(--font-body);
}
.ots-trigger:hover { border-color: var(--ink-300); box-shadow: var(--shadow-xs); }
.ots-trigger-ic { display: none; }
.ots-trigger-text { display: flex; flex-direction: column; text-align: left; }
.ots-trigger-kicker {
    font-size: 10px; color: var(--fg-3); font-weight: 500;
    text-transform: uppercase; letter-spacing: .06em;
}
.ots-trigger-label { font-size: 16px;line-height: 1.3; font-weight: 500; color: var(--fg-1); }
.ots-chev { color: var(--fg-2); transition: transform var(--dur-2); flex-shrink: 0; }
.ots.open .ots-chev { transform: rotate(180deg); }

.ots-menu {
    position: absolute;
        line-height: 1.3;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    width: 280px;
    max-width: calc(100vw - 32px);
    background: #fff;
    border: 1px solid var(--border); border-radius: var(--r-pill);
    box-shadow: var(--shadow-lg); padding: 6px;
    display: none; flex-direction: column; gap: 2px;
    z-index: 60;   /* above sticky filter toolbar (z:30) and section heads */
}
/* The .ots wrapper itself needs a stacking context that can rise above the
   sticky toolbar below when the dropdown is open. */
.ots.open { z-index: 61; }
.ots.open .ots-menu { display: flex; }
.ots-opt {
    display: grid; grid-template-columns: 28px 1fr 24px;
    gap: 10px; align-items: center;
    padding: 10px; background: transparent;
    border: none; border-radius: 8px;
    cursor: pointer; text-align: left; width: 100%;
    font-family: var(--font-body);
}
.ots-opt:hover { background: var(--ink-50); }
.ots-opt.on { background: var(--brand-primary-100); }
.ots-opt.on:hover { background: var(--brand-primary-100); }
.ots-opt.off { opacity: .5; cursor: not-allowed; }
.ots-opt-ic {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--ink-100); color: var(--fg-2);
    display: grid; place-items: center;
}
.ots-opt.on .ots-opt-ic { background: #fff; color: var(--brand-primary); }
.ots-opt-body { display: flex; flex-direction: column; min-width: 0; }
.ots-opt-body b { font-size: 12px; font-weight: 600; color: var(--fg-1); }
.ots-opt-body span { font-size: 10px; color: var(--fg-3); margin-top: 1px; }
.ots-tick {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--veg); display: grid; place-items: center;
    color: #fff;
}
/* ETA badge in OTS trigger (delivery / dine-in) */
.ots-eta {
    font-size: 10px; font-weight: 700; color: var(--brand-primary);
    margin-top: 1px; line-height: 1;
}
/* Wrapper aligns OTS dropdown + Get directions link vertically */
.ots-group { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* Store-info sheet — Figma "Outlet Details" layout */
.si-image {
    width: 100%; aspect-ratio: 16 / 9; margin-bottom: 16px;
    border-radius: var(--r-3); overflow: hidden; background: var(--ink-100);
}
.si-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.si-name {
    font-family: var(--font-display); font-size: 20px; font-weight: 700;
    color: var(--fg-1); margin: 0 0 8px;
}
.si-meta-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 10px;
}
.si-locality {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; color: var(--fg-3);
}
.si-addr { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 0; }
.si-block { margin-top: 20px; }
.si-block-title { font-size: 16px; font-weight: 700; color: var(--fg-1); margin: 0 0 10px; }
.si-block-text { font-size: 14px; color: var(--fg-2); margin: 0; }
.si-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.si-chip {
    display: inline-flex; align-items: center;
    padding: 6px 12px; border-radius: var(--r-2);
    background: var(--ink-100); color: var(--fg-1);
    font-size: 13px; font-weight: 600;
}

/* ---------- Layout shell ---------- */
.menu-shell {
    max-width: 1280px; margin: 0 auto;
    /* 20px top gap separates the columns from the brand header so the sidebar
       reads as a floating card, not a panel welded to the header. */
    padding: 20px 32px 96px;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    min-height: calc(100vh - var(--site-header-h, 72px));
}

/* ---------- Left rail (categories) ---------- */
.menu-rail {
    flex: 0 0 260px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    /* Stick 20px below the header — matches the shell's top gap so the card
       keeps the same breathing room while scrolling. */
    top: calc(var(--site-header-h, 72px) + 20px);
    padding: 0px 0 12px;
    position: sticky;
    align-self: flex-start;
    max-height: calc(100vh - var(--site-header-h, 72px) - 52px);
    overflow-y: auto;
    box-shadow: var(--shadow-xs);
    /* Scrollbar hidden by default — reveals on hover as a thin slim track.
       Firefox uses scrollbar-width; WebKit uses ::-webkit-scrollbar. */
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color var(--dur-2) var(--ease-out);
}
.menu-rail::-webkit-scrollbar { width: 0; background: transparent; }
.menu-rail::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.menu-rail:hover { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
.menu-rail:hover::-webkit-scrollbar { width: 6px; }
.menu-rail:hover::-webkit-scrollbar-thumb { background: var(--ink-300); }
.menu-rail:hover::-webkit-scrollbar-thumb:hover { background: var(--ink-400); }
.menu-rail-search { position: relative; margin-bottom: 8px; }
.menu-rail-search input {
    width: 100%; padding: 9px 12px 9px 34px;
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    font-size: 12px; font-family: var(--font-body);
    background: var(--ink-50);
    outline: none;
    transition: border-color var(--dur-2), background var(--dur-2);
}
.menu-rail-search input:focus { border-color: var(--brand-primary); background: #fff; }
.menu-rail-search svg {
    position: absolute; left: 11px; top: 50%;
    transform: translateY(-50%);
    color: var(--fg-muted);
}
.menu-rail-title {
    font-size: 17px; font-weight: 700; letter-spacing: 0;
    text-transform: none; color: var(--fg-1);
    padding: 14px 12px 12px;
    border-bottom: 1px solid var(--ink-100);
    margin-bottom: 8px;
}
.menu-cat {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 10px 12px;
    /* border-radius: var(--r-2); */
    cursor: pointer;
    gap: 8px;
    transition: background var(--dur-2) var(--ease-out);
    position: relative;
    color: var(--fg-1);
    text-decoration: none;
}
.menu-cat:hover { background: var(--ink-50); }
.menu-cat.active {
    background: var(--ink-100);
    color: var(--fg-1);
}
.menu-cat.active::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 0 2px 2px 0;
    background: var(--fg-1);
}
.menu-cat-name {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 500;
    color: inherit;
}
.menu-cat.active .menu-cat-name { font-weight: 600; }
.menu-cat-expand {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--ink-100, #ebebeb);
    color: var(--fg-1); font-size: 14px; font-weight: 600; line-height: 1;
}
.menu-cat.active .menu-cat-expand { background: var(--bg-1, #fff); }
.menu-cat-count {
    font-size: 12px; color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}
.menu-cat.active .menu-cat-count { color: var(--fg-3); }

/* Sidebar sub-category list — hidden until parent row's + icon is clicked */
.menu-sub-wrap {
    display: none;
    padding-left: 14px;
    margin: 0 0 4px;
}
.menu-sub-wrap.open { display: block; border-left: 2px solid var(--ink-100); }
.menu-sub {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 10px;
    border-radius: var(--r-1);
    color: var(--fg-2);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    margin-bottom: 2px;
    transition: background var(--dur-2) var(--ease-out);
}
.menu-sub:hover { background: var(--ink-50); color: var(--fg-1); }
.menu-sub.active { color: var(--fg-1); font-weight: 600; }
.menu-sub .menu-cat-count { font-size: 10px; }

/* ---------- Main column ---------- */
.menu-main { flex: 1; min-width: 0; }

/* Filters toolbar — sticky below site-header. Fully opaque, own stacking
   context, high z-index so section headings scrolling past disappear behind
   it instead of peeking through. */
.menu-toolbar {
    position: sticky;
    /* Dynamically-measured site-header height; JS sets --site-header-h on <html>.
       Fallback 72px matches the typical navbar+py-2+40px-logo stack. */
    top: var(--site-header-h, 72px);
    z-index: 30;
    isolation: isolate;
    background: #fff;
    padding: 12px 16px;
    margin: 0;
    border-radius: 0 0 var(--r-3) var(--r-3);
    display: flex; align-items: center; gap: 50px;
    flex-wrap: nowrap;
    border-bottom: none;
    min-width: 0;
}

/* Horizontally-scrolling chip rail. Trailing chip is sharply clipped at the
   container edge so the partial chip stays fully opaque and readable — the
   sharp cut itself signals "scroll for more". */
.menu-toolbar__chips {
    flex: 1 1 0; min-width: 0;
    display: flex; align-items: center; gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding-right: 4px;
}
.menu-toolbar__chips::-webkit-scrollbar { display: none; }
.menu-toolbar__chips > * { flex-shrink: 0; }
.menu-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    font-size: 12px; font-weight: 500;
    color: var(--fg-2);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--dur-2) var(--ease-out);
    font-family: var(--font-body);
}
.menu-chip:hover { border-color: var(--ink-300); }
.menu-chip.active {
    background: var(--focus-active-bg);
    border-color: var(--focus-active-fg);
    color: var(--focus-active-fg);
    font-weight: 600;
}
.menu-chip .veg-mark,
.menu-chip .nonveg-mark {
    width: 14px; height: 14px; border-radius: 3px;
    display: inline-grid; place-items: center;
    border: 1.5px solid var(--veg);
}
.menu-chip .nonveg-mark { border-color: var(--nonveg); }
.menu-chip .veg-mark::before {
    content: ''; width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--veg);
}
.menu-chip .nonveg-mark::before {
    content: ''; width: 8px; height: 8px;
    border-radius: 0;
    clip-path: polygon(50% 15%, 90% 85%, 10% 85%);
    background: var(--nonveg);
}
.menu-chip.veg-on { border-color: var(--veg); background: #E6F4EA; color: var(--veg); }
.menu-chip.nonveg-on { border-color: var(--nonveg); background: #FDECEA; color: var(--nonveg); }

/* ---------- Inline search input (lives inside .menu-toolbar) ----------
   Desktop/tablet: real <input> wrapped in a <label> styled as a pill.
   Typing live-filters the menu via render() (no modal). Mobile keeps the
   modal flow via the bottom-bar trigger — this element is hidden <768px. */
.menu-search-trigger {
    flex: 0 0 auto;
    width: 235px;
    margin-right: 8px;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px;
    background: #ffffff;;
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    cursor: text;
    transition: border-color var(--dur-2), box-shadow var(--dur-2);
}
.menu-search-trigger svg { width: 16px; height: 16px; color: var(--fg-muted); flex-shrink: 0; }
.menu-search-trigger:hover {
    border-color: var(--ink-300);
    box-shadow: var(--shadow-xs);
}
.menu-search-trigger:focus-within {
    border-color: var(--ink-300);
    box-shadow: var(--shadow-xs);
}
.menu-search-trigger input {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: 0; background: transparent;
    padding: 0;
    font-size: 12.5px; font-family: var(--font-body);
    color: var(--fg-1);
}
.menu-search-trigger input::placeholder { color: var(--fg-muted); }
.menu-search-trigger input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* Voice-search mic inside the desktop search bar (mirrors the mobile bar mic).
   Hidden by default; JS unhides it only when SpeechRecognition is supported. */
.menu-search-trigger__mic {
    flex: 0 0 auto;
    align-self: stretch;
    display: inline-flex; align-items: center; justify-content: center;
    /* Negative vertical margins eat the trigger's padding so the left border
       reads as a full-height divider, like the mobile bar mic. */
    margin: -7px -4px -7px 4px;
    padding: 0 6px 0 10px;
    background: none; border: none; border-left: 1px solid var(--border);
    color: var(--fg-muted); cursor: pointer;
    transition: color var(--dur-2), background var(--dur-2);
}
.menu-search-trigger__mic[hidden] { display: none; }
.menu-search-trigger__mic:hover { color: var(--fg-1); }
.menu-search-trigger__mic:active { transform: scale(0.92); }
.menu-search-trigger__mic.listening {
    color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent);
    animation: micPulse 1.2s ease-in-out infinite;
}
@keyframes micPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* ---------- Search modal contents ---------- */
.search-input-row {
    position: relative;
    margin-bottom: 16px;
}
.search-input-row svg {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%); color: var(--fg-muted); pointer-events: none;
}
.search-input-row input {
    width: 100%; padding: 12px 16px 12px 42px;
    background: var(--bg-2);
    border: 1.5px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 15px; font-family: var(--font-body);
    outline: none;
    transition: border-color var(--dur-2), box-shadow var(--dur-2);
    box-sizing: border-box;
}
.search-input-row input:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-primary-100);
    background: #fff;
}
.search-filter-chips {
    display: flex; gap: 8px; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
    margin-bottom: 24px; padding-bottom: 2px;
}
.search-filter-chips::-webkit-scrollbar { display: none; }
.search-section-head {
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.1em; color: var(--fg-muted);
    margin: 0 0 14px;
    display: flex; align-items: center; gap: 12px;
}
.search-section-head::after {
    content: ''; flex: 1; height: 1px; background: var(--divider);
}
/* Popular Searches — 3-column card grid */
.search-popular-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}
.srch-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--dur-2), transform var(--dur-2);
}
.srch-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.srch-card-img { aspect-ratio: 4/3; overflow: hidden; }
.srch-card-img img { width: 100%; height: 100%; object-fit: cover; }
.srch-card-body { padding: 10px 12px 12px; }
.srch-card-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.srch-badge {
    font-size: 10px; font-weight: 700;
    background: var(--brand-primary-100); color: var(--brand-primary);
    padding: 2px 6px; border-radius: var(--r-1);
}
.srch-name {
    font-size: 12px; font-weight: 600; color: var(--fg-1);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 8px;
}
.srch-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.srch-price { font-size: 14px; font-weight: 700; color: var(--fg-1); }
.srch-add {
    padding: 5px 12px;
    border: 1.5px solid var(--ink-80);
    border-radius: var(--r-2);
    background: #fff; color: var(--fg-1);
    font-size: 10px; font-weight: 700;
    cursor: pointer; font-family: var(--font-body);
    transition: background var(--dur-1);
}
.srch-add:hover { background: var(--brand-primary); color: var(--secondary-bg-color); }
.srch-qty {
    display: inline-flex; align-items: center;
    border: 1.5px solid var(--brand-primary);
    border-radius: var(--r-2); overflow: hidden;
    background: var(--brand-primary);
}
.srch-qty button {
    background: var(--brand-primary); border: none;
    width: 26px; height: 26px;
    font-size: 15px; font-weight: 600;
    color: var(--secondary-bg-color);
    cursor: pointer; font-family: var(--font-body);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dur-1);
}
.srch-qty button:hover { background: var(--brand-primary-100); }
.srch-qty-num {
    min-width: 20px; text-align: center;
    font-size: 12px; font-weight: 600;
    color: var(--secondary-bg-color);
    background: transparent;
    font-variant-numeric: tabular-nums;
}
/* Popular Menu — horizontal scroll thumbnails */
.search-popular-menu {
    display: flex; gap: 12px;
    overflow-x: auto; padding-bottom: 8px;
    scrollbar-width: none;
    margin-bottom: 8px;
}
.search-popular-menu::-webkit-scrollbar { display: none; }
.srch-thumb {
    flex-shrink: 0; width: 80px;
    text-align: center; cursor: pointer;
}
.srch-thumb img {
    width: 80px; height: 80px;
    object-fit: cover; border-radius: var(--r-3);
    display: block;
}
.srch-thumb-name {
    font-size: 10px; font-weight: 500; color: var(--fg-2);
    margin-top: 5px;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Live search results */
.sr-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--divider);
    cursor: pointer;
}
.sr-item:last-child { border-bottom: none; }
.sr-img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--r-2); flex-shrink: 0; }
.sr-body { flex: 1; min-width: 0; }
.sr-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.sr-name { font-size: 14px; font-weight: 600; color: var(--fg-1); }
.sr-price { font-size: 12px; font-weight: 700; color: var(--brand-primary); margin-top: 2px; }
.srch-oos {
    padding: 5px 10px;
    border: 1px solid var(--ink-200);
    border-radius: var(--r-2);
    background: var(--ink-50); color: var(--fg-3);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    white-space: nowrap;
}
.sr-item--oos { cursor: default; }
.sr-item--oos .sr-img,
.sr-item--oos .sr-name,
.sr-item--oos .sr-price { opacity: 0.55; }

/* Loyalty coin banner — full width; expands to show the rule */
.menu-coins {
    display: block;
    background: linear-gradient(180deg, #FFFBEC 0%, #FFFDF6 100%);
    border: 1px solid #FCE6A8;
    border-radius: 14px;
    font-size: 12.5px;
    margin: 10px 0 18px;
    overflow: hidden;
}
.menu-coins-row {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 9px 16px;
    cursor: pointer;
    background: none; border: 0;
    font: inherit; color: inherit; text-align: left;
}
.menu-coins-row:focus-visible {
    outline: 2px solid var(--brand, #E0A106);
    outline-offset: 2px;
}
.menu-coins-summary {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.menu-coins b { font-weight: 700; color: var(--fg-1); }
.menu-coins-hint { color: var(--fg-3); font-weight: 400; }
.menu-coins-chev {
    display: grid; place-items: center;
    color: var(--fg-muted);
    transition: transform var(--dur-2);
    flex-shrink: 0;
}
.menu-coins.open .menu-coins-chev { transform: rotate(180deg); }
.menu-coins-details {
    margin: 0 16px;
    padding: 9px 0 11px;
    border-top: 1px dashed #ECCB7A;
}
.menu-coins-rule {
    margin: 0 0 3px;
    font-size: 12px; color: var(--fg-2);
    line-height: 1.45;
}
.menu-coins-ratio {
    margin: 0;
    font-size: 12px; color: var(--fg-3);
    font-weight: 600;
}

/* ---------- Bestsellers section (horizontal scroll) ---------- */
.menu-section-head {
    display: flex; align-items: baseline; gap: 12px;
    margin: 14px 0 14px;
}
.menu-section-head h2 {
    font-family: var(--font-display);
    font-size: 14px; font-weight: 700;
    color: var(--fg-1); margin: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.menu-section-head .count {
    font-size: 12px; font-weight: 500;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}
#popular-picks .menu-section-head {
    justify-content: center;
}

/* Legacy aliases — kept so any pre-refactor cached HTML still renders.
   The new canonical class is .section-rail (defined below). */
.menu-best { position: relative; margin-bottom: 0; }
.menu-best-scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 240px;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 4px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.menu-best-scroll::-webkit-scrollbar { display: none; }

/* Scroll-to-top floating button */
.scroll-top-btn {
    position: fixed;
    right: 20px;
    bottom: 90px;           /* above the sticky cart pill */
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--fg-1);
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: none;
    align-items: center; justify-content: center;
    z-index: 40;
}
.scroll-top-btn.visible { display: inline-flex; }
.scroll-top-btn:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* ============================================================
   DESIGN PRIMITIVES — shared components used across menu cards,
   featured tiles, favourites rows (and later checkout cart rows).
   All colors come from brand tokens so every tenant inherits the
   same design language without overrides.
   ============================================================ */

/* Generic horizontal-scroll rail with optional arrows */
.section-rail { position: relative; margin-bottom: 8px; }
.section-rail__scroll {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 240px;
    gap: 16px;
    overflow-x: auto;
    padding: 4px 4px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.section-rail__scroll::-webkit-scrollbar { display: none; }
/* Desktop: show ~4.5 cards so users see there's more to scroll.
   More-specific overrides (e.g. .section-rail--fav) still win. */
@media (min-width: 992px) {
    .section-rail__scroll { grid-auto-columns: calc((100% - 4 * 16px) / 4.5); }
}
.section-rail__arrow {
    position: absolute; top: 40%;
    width: 36px; height: 36px; border-radius: 50%;
    background: #fff; border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    display: grid; place-items: center;
    cursor: pointer; z-index: 2;
    color: var(--fg-2);
    transition: background var(--dur-2), color var(--dur-2), border-color var(--dur-2);
}
.section-rail__arrow.left { left: -12px; }
.section-rail__arrow.right { right: -12px; }
.section-rail__arrow:hover { background: var(--brand-primary); color: var(--secondary-bg-color); border-color: var(--brand-primary); }
.section-rail__arrow:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.section-rail--fav .section-rail__scroll { grid-auto-columns: minmax(280px, 320px); }
/* Server-driven Your Favourites (most-ordered) — larger card so ~2.5 fit per
   viewport on mobile, then stabilise wider on tablet/desktop so the Save
   badge + qty stepper sit side-by-side without overlapping. */
.section-rail--favlg .section-rail__scroll { grid-auto-columns: minmax(88%, 420px); }
@media (min-width: 768px){
    .section-rail--favlg .section-rail__scroll { grid-auto-columns: 420px; }
}
/* Phone (375–600px): featured/bestseller rail shows ~2.2 cards so the partial
   third card signals more content to scroll while leaving each card wide
   enough for the price + add stepper row (the "+" was clipping at 2.5). */
@media (min-width: 375px) and (max-width: 600px) {

    .section-rail__scroll,
    .menu-best-scroll { grid-auto-columns: calc((100% - 2 * 16px) / 2.2); }
}
/* Small tablet (601–768px): ~3.5 cards visible */
@media (min-width: 601px) and (max-width: 768px) {
    .section-rail__scroll,
    .menu-best-scroll { grid-auto-columns: calc((100% - 3 * 16px) / 3.5); }
}

/* Tag chip row (Bestseller / New / Offer) — sits above the title */
.tag-row {
    display: flex; flex-wrap: wrap; gap: 4px;
    align-items: center;
    margin-bottom: 6px;
}
.tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 3px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    border-radius: var(--r-1);
    white-space: nowrap;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--fg-2);
}
.tag--bestseller {
    background: var(--warning-bg);
    border-color: var(--warning-bg);
    color: var(--fg-1);
}
.tag--new {
    background: var(--warning-bg);
    border-color: var(--warning-bg);
    color: var(--fg-1);
}
.tag--featured {
    background: var(--warning-bg);
    border-color: var(--warning-bg);
    color: var(--fg-1);
}
.tag--offer { border-color: var(--brand-primary); color: var(--brand-primary); }
.tag--custom {
    background: var(--warning-bg);
    border-color: var(--warning-bg);
    color: var(--fg-1);
}

/* "Highly Ordered" personalised tag — shown only for the logged-in user's most-ordered items */
.trend-tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 600;
    color: var(--highly-order);
    line-height: 1.4;
    margin-bottom: 4px;
}
.trend-tag svg { width: 12px; height: 12px; flex-shrink: 0; }

/* Price line — strike + current + Save pill */
.price-line {
    display: inline-flex; align-items: center; gap: 8px;
    font-variant-numeric: tabular-nums;
    flex-wrap: wrap;
    margin: 3px 0;
}
.price-line__strike {
    font-size: 12px;
    color: var(--fg-muted);
    text-decoration: line-through;
    font-weight: 400;
}
.price-line__current {
    font-size: 14px; font-weight: 600;
    color: var(--fg-1);
}
.price-line__save {
    display: inline-flex; align-items: center;
    padding: 3px 8px;
    border-radius: var(--r-1);
    background: var(--success);
    color: #fff;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Membership slashed pricing ──────────────────────────────────────────
   Member: amber pill with struck MRP + member price + "Saving ₹X" caption.
   Guest:  full-bleed green "Unlock for ₹X with Membership" strip at the card
           bottom, with a dashed separator + lock icon (see design frames).
   Accent tokens live here (one source) so no hex is hardcoded in the rules. */
:root {
    --member-bg: #fff3d4;      /* amber highlight — solid left */
    --member-bg-fade: #fff3d400;/* same hue, 0 alpha — gradient right */
    --unlock-bg-1: #e8f8ee;   /* green strip — solid left */
    --unlock-bg-2: #f6fcf8;   /* green strip — faded right */
    --unlock-border: #c4e8d1; /* dashed separator */
    --unlock-fg: #1a8f4c;     /* green label + icon */
}
/* Member price block (logged-in): struck MRP + dark member price + green
   "Saving ₹X - Member Benefit", on a soft amber gradient highlight. */
.price-line--member {
    flex-direction: column; align-items: flex-start; gap: 1px;
    padding: 4px 14px 4px 8px; border-radius: var(--r-1);
    background: linear-gradient(90deg, var(--member-bg), var(--member-bg-fade));
}
.price-line__member-pill { display: inline-flex; align-items: baseline; gap: 8px; }
.price-line__member-strike {
    font-size: 12px; color: var(--fg-muted);
    text-decoration: line-through; font-weight: 400;
}
.price-line__member-price { font-size: 15px; font-weight: 700; color: var(--fg-1); }
.price-line__member-save {
    font-size: 11px; font-weight: 500; color: var(--unlock-fg);
}
.price-line__member-save b { font-weight: 700; }
.popup-variant__member { color: var(--fg-1); font-weight: 700; }

/* Guest unlock strip — full-bleed, bottom of card, centered, lock + green label */
.membership-unlock {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 42px;
    padding: 10px 12px;
    border: 0; border-top: 1px dashed var(--unlock-border);
    background: linear-gradient(90deg, var(--unlock-bg-1), var(--unlock-bg-2));
    color: var(--unlock-fg);
    font: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.membership-unlock svg { flex: 0 0 auto; color: var(--unlock-fg); }
.membership-unlock:hover { filter: brightness(0.98); }
.membership-unlock:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }
/* Big horizontal card: strip spans both grid columns and bleeds to the card edge.
   width:auto (not 100%) lets the stretched grid item grow past its track via the
   negative margins — with width:100% the box can't widen and leaves a right gap. */
.item .membership-unlock {
    grid-column: 1 / -1;
    width: auto;
    margin: -10px -10px -10px;
    border-radius: 0 0 var(--r-3) var(--r-3);
}
/* Vertical featured card clips to its own radius (overflow:hidden) — no bleed needed. */
.feat .membership-unlock { font-size: 12px; min-height: 38px; padding: 8px 10px; }
/* Grocery card (flex column, overflow:hidden) — strip sits flush at the bottom. */
.groc-card .membership-unlock { font-size: 11px; min-height: 36px; padding: 7px 10px; }
/* "Your Favourites" rail cards (grid, 12px padding) — same full-bleed bottom strip. */
.fav-lg .membership-unlock,
.fav-row .membership-unlock {
    grid-column: 1 / -1;
    width: auto;
    margin: -6px -12px -12px;
    border-radius: 0 0 var(--r-3) var(--r-3);
    font-size: 11px; min-height: 38px; padding: 8px 10px;
}
/* Inside the item detail modal it's a standalone element, not a card-bottom strip:
   round it, drop the dashed separator, give it a little breathing room. */
.popup-meta .membership-unlock,
.popup-detail-body .membership-unlock {
    border-top: 0; border-radius: var(--r-1);
    margin-top: 8px; justify-content: flex-start;
}
/* Compact inline pill for the search overlay's thin rows / tiles. */
.membership-unlock--mini {
    width: auto; min-height: 0;
    border-top: 0; border-radius: var(--r-1);
    margin-top: 6px; padding: 4px 8px;
    gap: 5px; justify-content: flex-start;
    font-size: 11px;
}
.membership-unlock--mini svg { width: 12px; height: 12px; }
/* Struck MRP shown before the member price in search markup. */
.srch-mrp {
    color: var(--fg-muted); text-decoration: line-through;
    font-weight: 400; font-size: 0.85em;
}
/* Member block in search rows/tiles: struck MRP + member price + green saving
   caption, on the same amber highlight as the card pill. */
.srch-member {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
    margin-top: 2px; padding: 4px 12px 4px 8px;
    border-radius: var(--r-1);
    background: linear-gradient(90deg, var(--member-bg), var(--member-bg-fade));
}
.srch-member__price { color: var(--fg-1); }
.srch-member-save {
    font-size: 11px; font-weight: 500; color: var(--unlock-fg);
}
.srch-member-save b { font-weight: 700; }

/* 5-star visual rating */
.stars-row {
    display: inline-flex; align-items: center; gap: 1px;
    margin: 2px 0 4px;
    font-size: 12px;
    color: var(--star);
    line-height: 1;
}
.stars-row__star { display: inline-flex; line-height: 0; }
.stars-row__star svg { width: 12px; height: 12px; display: block; }
.stars-row__star--empty { color: var(--ink-300); }

/* "Customisable" label directly under the ADD button. Negative margin pulls
   it close to the ADD button. The .item-media > .customisable-label rule
   (further down) handles the actual margin to clear the floating ADD button. */
.customisable-label {
    display: block;
    font-size: 10px;
    color: var(--fg-3);
    text-align: center;
    letter-spacing: 0.02em;
}

/* "Next available at X" pill — rendered on every card when the outlet is
   closed so the user knows when ordering resumes. Pinned to the bottom row
   of the card, spans full card width. */
.next-available {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: 9px;
    background: #c9c9c93d;
    color: var(--error);
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.02em;
    text-align: center;
    margin-top: 8px;
}
/* In the horizontal .item card: pill is a 3rd grid child that spans both
   columns on row 2, anchored at the bottom. The body+media occupy row 1
   (1fr) so the pill aligns across siblings in the same grid row. */
.item > .next-available { grid-column: 1 / -1; }

/* Out-of-stock pill — rounded pill with neutral grey bg + red text, sits
   centered on the image. Matches Figma's understated treatment. */
.oos-pill {
    display: inline-block;
    padding: 10px 22px;
    border-radius: var(--r-pill);
    background: #dcd4d4fc;
    color: var(--error);
    font-size: 12px; 
    font-weight: 700;
    white-space: nowrap;
}

/* "Read more" / "Read less" sit inline at the end of the description text.
   Muted gray + underline so they read as hyperlinks, not branded CTAs. */
.read-more, .read-less {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--fg-3);
    font-weight: 500; font-size: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.read-more:hover, .read-less:hover { color: var(--fg-1); }

/* ADD ↔ stepper — fixed-width container avoids layout shift on swap. */
.add-ctrl {
    width: 90px;
    display: flex; justify-content: center; align-items: center;
}
.add-ctrl__btn {
    width: 80px;
    background: #fff;
    border: 1.5px solid var(--ink-80);
    color: var(--fg-1, #212121);
    padding: 6px 0;
    border-radius: var(--r-2);
    font-weight: 700; font-size: 12px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
    font-family: var(--font-body);
}
.add-ctrl__btn:hover { background: var(--brand-primary); color: var(--secondary-bg-color); }
.add-ctrl__btn:active { transform: scale(0.94); transition: transform 80ms; }
.add-ctrl__stepper {
    width: 80px; height: auto;
    display: flex; align-items: center; justify-content: space-between;
    background: var(--brand-primary);
    color: var(--secondary-bg-color);
    border-radius: var(--r-2);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.add-ctrl__stepper button {
    background: transparent;
    border: none; color: var(--secondary-bg-color);
   height: 32px;
    font-size: 16px; font-weight: 700;
    cursor: pointer;
}
.add-ctrl__stepper button:active { transform: scale(0.85); transition: transform 80ms; }
.add-ctrl__stepper span {
    min-width: 22px; text-align: center;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Compact horizontal card — Your Favourites rail (image | body | action) */
.fav-row {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    padding: 12px;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    scroll-snap-align: start;
    cursor: pointer;
    transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.fav-row:hover { box-shadow: var(--shadow-sm); border-color: var(--ink-300); }
.fav-row__img {
    width: 64px; height: 64px;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--ink-100);
    position: relative;
}
.fav-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fav-row__body { min-width: 0; }
.fav-row__head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.fav-row__name {
    font-size: 12px; font-weight: 700; color: var(--fg-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1;
}
.fav-row__custom {
    font-size: 10px; color: var(--fg-3);
    margin-bottom: 4px;
}
.fav-row__action { display: flex; justify-content: flex-end; }
.fav-row .price-line { margin: 2px 0 0; }
.fav-row .price-line__current { font-size: 12px; }
.fav-row .price-line__strike { font-size: 10px; }
.fav-row .price-line__save { font-size: 10px; padding: 1px 6px; }

/* Larger "Your Favourites" card (server-driven most-ordered rail) */
.fav-lg {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    padding: 12px;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    scroll-snap-align: start;
    cursor: pointer;
    transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.fav-lg:hover { box-shadow: var(--shadow-sm); border-color: var(--ink-300); }
.fav-lg__img {
    width: 104px; height: 104px;
    border-radius: var(--r-2);
    overflow: hidden;
    background: var(--ink-100);
}
.fav-lg__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fav-lg__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fav-lg__body .tag-row { margin-bottom: 0; }
.fav-lg__name {
    font-size: 14px; font-weight: 700; color: var(--fg-1);
    line-height: 1.3;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.fav-lg__custom { font-size: 10px; color: var(--fg-3); }
.fav-lg__foot {
    margin-top: auto;
    padding-top: 6px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    min-height: 36px;
}
/* Keep strike + current + Save on one line inside the constrained card width */
.fav-lg .price-line { flex-wrap: nowrap; min-width: 0; gap: 6px; margin: 0; }
.fav-lg .price-line__save { white-space: nowrap; }
/* Match the qty stepper / "Select Next Slot" pill height so price and CTA
   sit on a shared visual baseline regardless of which control is shown. */
.fav-lg .add-ctrl { width: auto; height: 36px; display: flex; align-items: center; }
.fav-lg .add-ctrl__btn,
.fav-lg .item-next-slot { width: auto; padding-left: 14px; padding-right: 14px; }
.fav-lg.unavailable { opacity: 0.55; }

/* Featured / bestseller card (vertical) */
.feat {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    display: flex; flex-direction: column;
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.feat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feat-img {
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
    background: var(--ink-100);
}
.feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-fav {
    position: absolute; top: 10px; right: 10px;
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,.95);
    border: none; cursor: pointer;
    display: grid; place-items: center;
    box-shadow: var(--shadow-xs);
    color: var(--ink-400);
    transition: color var(--dur-2), transform var(--dur-1);
    z-index: 2;
}
.feat-fav:hover { color: var(--brand-primary); transform: scale(1.06); }
.feat-fav.on { color: var(--brand-primary); }
.feat-fav:active { transform: scale(0.92); }
.feat-body {
    padding: 12px 10px 14px;
    display: flex; flex-direction: column; gap: 2px;
    flex: 1;
}
.feat-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.feat-name {
    font-size: 14px; font-weight: 700;
    color: var(--fg-1); line-height: 1.3;
    margin: 2px 0 4px;
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
    min-width: 0;
}
.feat-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    /* padding-top: 8px; */
}
.feat .price-line { margin: 0; }
.feat .add-ctrl { width: auto; flex-shrink: 0; }
.feat .add-ctrl__btn,
.feat .item-next-slot { width: auto; padding-left: 14px; padding-right: 14px; }
.feat .add-ctrl__stepper { min-width: auto;  }
.feat-customisable {
    display: block;
    font-size: 10px; color: var(--fg-3);
    text-align: center;
    margin-top: 4px;
    letter-spacing: 0.02em;
}

/* Veg / non-veg markers (used by .feat and .item cards) */
.veg-mark, .nonveg-mark {
    width: 14px; height: 14px; border-radius: 3px;
    display: inline-grid; place-items: center;
    border: 1.5px solid var(--veg);
    flex-shrink: 0;
}
.nonveg-mark { border-color: var(--nonveg); }
.veg-mark::before {
    content: ''; width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--veg);
}
.nonveg-mark::before {
    content: ''; width: 8px; height: 8px;
    border-radius: 0;
    clip-path: polygon(50% 15%, 90% 85%, 10% 85%);
    background: var(--nonveg);
}

/* ---------- Category section header ---------- */
.menu-cat-head {
    display: flex; align-items: center; gap: 14px;
    margin: 20px 0 18px;
}
.menu-cat-head h3 {
    font-family: var(--font-display);
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-1);
    margin: 0;
    white-space: nowrap;
}
.menu-cat-head__sub {
    color: var(--fg-3);
    font-weight: 500;
}
.menu-cat-head .sep { height: 1px; background: var(--border); flex: 1; }
.menu-cat-head .subtitle {
    font-size: 12px; color: var(--fg-3);
    font-weight: 400; text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-body);
    white-space: nowrap;
    flex-shrink: 0;
}
@media (max-width: 585px) {
  
        .price-line__current {
    font-size: 12px;

}
.feat .add-ctrl__btn, .feat .item-next-slot {
    padding-left: 10px;
    padding-right: 10px;
}
    .menu-cat-head { gap: 8px; margin: 16px 0 12px; }
    .menu-cat-head h3 {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 12px;
    }
    .menu-cat-head .sep { display: none; }
    .menu-cat-head .subtitle { margin-left: auto; font-size: 12px; }
}

/* ---------- Menu item grid + horizontal card ---------- */
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 16px;
    align-items: start;
}
.item {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    grid-template-rows: 1fr auto;
    gap: 16px;
    /* row-gap: 5px; */
    height: 100%;
    transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.item.clickable { cursor: pointer; }
.item:hover { box-shadow: var(--shadow-sm); border-color: var(--ink-300); }
.item.unavailable { opacity: 0.85; }
.item-body { display: flex; flex-direction: column; min-width: 0; }
.item-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.item-name {
    font-size: 14px; font-weight: 600; color: var(--fg-1);
    line-height: 1.3;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.item-desc {
    font-size: 10px; color: var(--fg-3);
    line-height: 1.45;
    margin-top: 4px;
    /* JS pre-truncates in descHTML() so the result + " Read more" fits in
       2 lines. line-clamp is a safety net for unusual word-wrap cases. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Expanded state: when user clicks "Read more", the clamp is removed so the
   full description renders inline (matches CI3's expand_description). */
.item-desc--expanded {
    -webkit-line-clamp: unset; line-clamp: unset;
    display: block;
    overflow: visible;
}
.item-media {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center;
}
/* ADD button rides on the bottom edge of the image: negative top margin pulls
   it up so its vertical center sits on .item-img's bottom edge. Sibling-based
   layout (no absolute positioning) so the image keeps its overflow:hidden. */
.item-media > .add-ctrl {
    margin-top: -16px;
    z-index: 2;
}
/* When the slot CTA is present, the 90px ADD container is too narrow — let it
   stretch to the full image-column width (132px) so "Select Next Slot" fits. */
.item-media > .add-ctrl:has(.item-next-slot) { width: 100%; }
.item-media > .customisable-label { margin-top: 6px; }
.item-img {
    width: 160px; height: 160px;
    overflow: hidden;
    border-radius: var(--r-3);
    position: relative;
    background: var(--ink-100);
}
.item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Stacked-image badge — flags items that carry secondaryImages so the user knows
   the detail popup has a swipeable gallery (CI3 .multiimages parity). Sits over the
   top-right corner of every card image surface. */
.menu-multi-img {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    color: var(--fg-1);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-sm);
    pointer-events: none;
}
.menu-multi-img svg { display: block; }
.fav-row__img .menu-multi-img { top: 4px; right: 4px; width: 18px; height: 18px; border-radius: var(--r-1); }
/* CI3 parity: when an item has no image (or it fails to load and the error
   listener removes the broken <img>), the image box shows nothing — collapse it
   so no grey placeholder square is left behind. Covers every listing surface. */
.item-img:not(:has(img)),
.feat-img:not(:has(img)),
.fav-row__img:not(:has(img)),
.fav-lg__img:not(:has(img)),
.srch-card-img:not(:has(img)) { display: none; }
/* Brand-logo fallback for the bestseller / favourites rails — when an item has
   no photo, fill the image box with the grayscaled brand logo (item-popup
   parity) instead of leaving blank white space. object-fit: contain + padding
   keeps the logo legible rather than cropping it like a cover photo. */
.feat-img .card-img-fallback,
.fav-lg__img .card-img-fallback,
.fav-row__img .card-img-fallback {
    width: 100%; height: 100%; display: block;
    object-fit: cover; padding: 0;
    filter: grayscale(0.9); opacity: 0.85;
}
/* With the image hidden there's no bottom edge to ride — drop the negative
   margin and center the ADD button / OOS pill vertically in the card (CI3). */
.item-media:not(:has(.item-img img)) { justify-content: center; }
.item-media:not(:has(.item-img img)) > .add-ctrl,
.item-media:not(:has(.item-img img)) > .oos-pill { margin-top: 0; }
/* The favourites rails place the image in its own fixed grid column, so hiding
   the wrapper alone would shift the body/action into the wrong cells — drop the
   image column too so the remaining content reflows cleanly. */
.fav-row:not(:has(.fav-row__img img)) { grid-template-columns: minmax(0, 1fr) auto; }
.fav-lg:not(:has(.fav-lg__img img)) { grid-template-columns: minmax(0, 1fr); }
/* OOS pill floats on the bottom edge of the image, same pattern as .add-ctrl */
.item-media > .oos-pill {
    margin-top: -16px;
    z-index: 2;
    box-shadow: var(--shadow-sm);
}

/* Out of stock / unavailable card state — card stays at full opacity; the
   image is dimmed and washed white so the OOS pill stands out cleanly. */
.item.unavailable .add-ctrl,
.feat.unavailable .add-ctrl { display: none; }
.item.unavailable .item-img::after,
.feat.unavailable .feat-img::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(255, 255, 255, 0.35);
    pointer-events: none;
}
.feat-img .oos-pill {
    position: absolute;
    left: 50%; bottom: 16px;
    transform: translateX(-50%);
    box-shadow: var(--shadow-sm);
}

/* Qty count bump animation when value changes */
@keyframes qty-bump { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
.add-ctrl__stepper span.bump { display: inline-block; animation: qty-bump 220ms var(--ease-out); }

/* Cart pill pulse when items are added. Scales the inner wrapper rather than
   the bar itself — the bar's own `transform` carries its positioning
   (translate(-50%,0) on desktop, translateY(0) full-width on mobile), so
   animating it here would yank the bar sideways. Pulsing the inner content
   leaves positioning untouched on every layout. */
@keyframes pill-bump {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.04); }
}
.menu-cart-bar.show.bump .menu-cart-inner { animation: pill-bump 240ms var(--ease-out); }


/* Promo list row (inside #offerList in the offer sheet) */
.offer-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 12px; align-items: center;
    padding: 12px;
    border: 1px dashed var(--brand-primary);
    border-radius: var(--r-3);
    background: var(--brand-primary-100);
    margin-bottom: 10px;
}
.offer-row__ic {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--brand-primary); color: var(--secondary-bg-color);
    display: grid; place-items: center;
    font-weight: 800; font-size: 16px;
}
.offer-row__body { min-width: 0; }
.offer-row__title { font-size: 14px; font-weight: 700; color: var(--fg-1); line-height: 1.3; }
.offer-row__desc { font-size: 12px; color: var(--fg-3); margin-top: 2px; line-height: 1.4; }
.offer-row__meta { font-size: 10px; color: var(--fg-muted); margin-top: 4px; }
.offer-copy-btn {
    padding: 8px 12px;
    border: 1.5px solid var(--brand-primary);
    background: #fff; color: var(--brand-primary);
    border-radius: var(--r-1);
    font-family: var(--font-body);
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.06em; cursor: pointer;
    white-space: nowrap;
    transition: all var(--dur-2);
}
.offer-copy-btn:hover { background: var(--brand-primary); color: var(--secondary-bg-color); }
.offer-copy-btn.copied { background: var(--success); border-color: var(--success); color: #fff; }

/* Unavailable strip on a disabled item card */
.item-unavail {
    grid-column: 1 / -1;
    margin-top: 22px;
    padding: 8px 12px;
    border-radius: var(--r-2);
    background: var(--error-bg);
    color: var(--error);
    font-size: 12px; font-weight: 600;
    text-align: center;
    border: 1px dashed rgba(220, 38, 38, 0.3);
}

/* ---------- Loading / empty ---------- */
.menu-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 80px 16px;
    grid-column: 1 / -1;
}
.menu-loading .spinner {
    width: 28px; height: 28px;
    border: 2px solid var(--border);
    border-top-color: var(--brand-primary);
    border-radius: 50%;
    animation: menu-spin 0.7s linear infinite;
}
@keyframes menu-spin { to { transform: rotate(360deg); } }

.menu-empty {
    text-align: center;
    padding: 80px 16px;
    color: var(--fg-3);
    grid-column: 1 / -1;
}
.menu-empty--card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 420px;
    margin: 48px auto;
    padding: 36px 24px;
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-subtle, #eee);
    border-radius: 14px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04));
}
.menu-empty__icon {
    color: var(--brand);
    opacity: .8;
}
.menu-empty__title {
    margin: 4px 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-1, #222);
    line-height: 1.3;
}
.menu-empty__sub {
    margin: 0 0 8px;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--text-2, #777);
}
.menu-empty--card .btn { min-width: 140px; }

/* ---------- Sticky cart pill (centered rounded pill, floats at viewport bottom) ---------- */
.menu-cart-bar {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, calc(100% + 32px)); /* off-screen initially */
    background: var(--brand-primary);
    color: var(--secondary-bg-color);
    padding: 6px 18px 6px 6px;
    border-radius: var(--r-cart-bar);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-sticky-cta);
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-2);
    max-width: 360px;
    width: max-content;
    cursor: pointer;
}
.menu-cart-bar.show { transform: translate(-50%, 0); }
.menu-cart-bar:hover { box-shadow: var(--shadow-xl); }
.menu-cart-inner {
    display: flex; align-items: center; gap: 16px;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
}
.menu-cart-icon {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.40);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.menu-cart-icon svg { width: 16px; height: 16px; }
.menu-cart-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    padding-right: 4px;
}
.menu-cart-info__title { font-size: 18px; font-weight: 700; letter-spacing: 0.01em; }
.menu-cart-info__meta { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; opacity: 0.85; margin-top: 1px; }
.menu-cart-cta__label { display: none; }
.menu-cart-cta {
    width: 34px; height: 34px;
    background: transparent;
    color: var(--brand-secondary);
    border: none;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-body);
    text-decoration: none;
    transition: transform var(--dur-2);
    flex-shrink: 0;
}
.menu-cart-cta:hover { transform: translateX(2px); filter: none; }

/* ---------- Sheets (store info / filters / category / offers / search) ---------- */
.sheet {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    display: flex; align-items: flex-end; justify-content: center;
    animation: sheet-fade var(--dur-2) var(--ease-out);
}
.sheet-panel {
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    background: var(--bg-1);
    border-radius: var(--r-4) var(--r-4) 0 0;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    animation: sheet-slide var(--dur-3) var(--ease-out);
}
.sheet-panel--full {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
}
.btn--secondary{
        background: var(--surface) !important;
    color: var(--secondary-bg-color) !important;
    border: 1.5px solid var(--secondary-bg-color) !important;
}
@media (min-width: 768px) {
    .sheet { align-items: center; }
    .sheet-panel { border-radius: var(--r-4); max-height: 80vh; }
    .sheet-panel--full { max-width: 720px; max-height: 90vh; height: auto; border-radius: var(--r-4); }
}
.sheet-head {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--divider);
}
.sheet-head .hdr-ic {
    margin-left: auto;
    width: 36px; height: 36px; border-radius: 50%;
    border: none;  cursor: pointer;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font: 100 28px/1 figtree, sans-serif;
    text-indent: 0;
   
}
.sheet-head .hdr-ic:hover { transform: rotate(90deg); box-shadow: var(--shadow-sm); }
.sheet-head .hdr-ic:active { transform: rotate(90deg) scale(.92); }
.sheet-body { padding: 16px; overflow-y: auto; flex: 1; }
.sheet-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.sheet-action-btn { width: 100px; height: 40px; justify-content: center; font-size: 14px; font-weight: 600; }
.sheet-action-btn--primary { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }

/* ---------- Menu category sheet ---------- */
.menu-sheet__panel {
    max-width: 320px;
    width: calc(100vw - 32px);
    max-height: 65vh;
    border-radius: var(--r-4);
    animation: sheet-fade var(--dur-2) var(--ease-out);
}
/* Mobile (<768px): anchored to the bottom-RIGHT, above the bottom bar */
@media (max-width: 767px) {
    .item-create-combo {
    padding: 10px 8px !important;
    }
    .menu-sheet {
        align-items: flex-end;
        justify-content: flex-end;
        padding: 0 16px calc(105px + env(safe-area-inset-bottom, 0px)) 16px;
    }
}
/* Tablet+: centered modal */
@media (min-width: 768px) {
    .menu-sheet { align-items: center; justify-content: center; }
}
.menu-sheet__head {
    padding: 10px 15px;
    border-bottom: 1px solid var(--divider);
}
.menu-sheet__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 14px; font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-1);
}
.menu-sheet__head .hdr-ic {
    width: 28px; height: 28px;
    background: transparent;
    font-size: 22px;
    color: var(--fg-2);
}
.menu-sheet__head .hdr-ic:hover { background: var(--ink-50); transform: none; }
.menu-sheet__body { padding: 0; }
.ms-row {
    display: flex; align-items: center;
    gap: 8px;
    padding: 14px 15px;
    border-bottom: 1px solid var(--divider);
    text-decoration: none;
    color: var(--fg-1);
    font-family: var(--font-body);
    cursor: pointer;
    transition: background var(--dur-1);
}
.ms-row:last-child { border-bottom: none; }
.ms-row:hover { background: var(--ink-50); }
.ms-row.is-active { background: var(--ink-100); }
/* The navigating link wraps just the category name; the "+" and count sit beside it */
.ms-row__link {
    flex: 0 1 auto; min-width: 0;
    display: flex; align-items: center;
    text-decoration: none;
}
.ms-row__name {
    min-width: 0;
    font-size: 13.5px; font-weight: 500;
    color: var(--fg-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "+" is a real button with a generous tap target so a tap never lands on the row link */
.ms-row__plus {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    margin: 0 2px;
    padding: 0;
    border: none; border-radius: 50%;
    background: var(--ink-100, #ebebeb); cursor: pointer;
    color: var(--fg-1);
    font-size: 16px; font-weight: 600; line-height: 1;
    font-family: var(--font-body);
}
.ms-row__count {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 12.5px; font-weight: 500;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}
/* Mobile sheet sub-category list — hidden until the parent row's "+" is tapped */
.ms-sub-wrap {
    display: none;
    padding: 2px 0 6px 26px;
    border-bottom: 1px solid var(--divider);
    background: var(--ink-50);
}
.ms-sub-wrap.open { display: block; }
.ms-sub {
    display: flex; align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--r-1);
    color: var(--fg-2);
    text-decoration: none;
}
.ms-sub:hover { background: var(--ink-100); color: var(--fg-1); }
.ms-sub__name {
    min-width: 0;
    font-size: 12.5px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-sub .ms-row__count { font-size: 11px; }
.filter-group { margin-bottom: 20px; }
.filter-group .t-label { margin: 0 0 8px; display: block; color: var(--fg-2); }
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-slide { from { transform: translateY(16px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }


/* Share sheet — compact popup with explicit share targets.
   Overlay sits above .menu-mobile-bar (which uses z-modal+1) so labels aren't clipped.
   We also hide the bar entirely via body.share-open as a bulletproof fallback
   in case a stacking context promotes the bar above the overlay. */
.share-overlay { z-index: calc(var(--z-modal) + 10); }
body.share-open .menu-mobile-bar,
body.share-open .menu-cart-bar,
body.share-open .sticky-cart { display: none !important; }

.share-sheet {
    max-width: 420px;
    padding: 20px 18px 28px;
    text-align: center;
}
@media (min-width: 768px) {
    .share-sheet { max-width: 420px; width: 420px; }
}
.share-sheet__title {
    margin: 0 0 4px;
    font-size: 17px; font-weight: 700;
    color: var(--fg-1);
}
.share-sheet__sub {
    margin: 0 0 18px;
    font-size: 12px; color: var(--fg-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.share-sheet__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (max-width: 420px) {
    .share-sheet__grid { gap: 6px; }
}
.share-opt {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 12px 4px 10px;
    background: transparent; border: 1px solid var(--border-1, #e5e7eb);
    border-radius: var(--r-3, 12px);
    text-decoration: none; cursor: pointer;
    color: var(--fg-1); font: inherit;
    transition: background var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out);
}
.share-opt:hover { background: var(--lightest-grey); transform: translateY(-1px); }
.share-opt:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.share-opt__icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
}
.share-opt__icon svg { width: 22px; height: 22px; }
.share-opt__icon--wa   { background: #25D366; }
.share-opt__icon--fb   { background: #1877F2; }
.share-opt__icon--tw   { background: #000; }
.share-opt__icon--copy { background: #6b7280; }
.share-opt__label {
    font-size: 12px; font-weight: 500; line-height: 1.2;
    color: var(--fg-2, #4b5563);
    text-align: center;
    white-space: nowrap;
}




/* Inline toast — used by share/copy feedback */
.menu-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    padding: 10px 18px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 500;
    z-index: 10001;
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.2));
    animation: toast-in 0.18s ease-out;
}
@keyframes toast-in {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}


.combo-header {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
}
.combo-header-img {
    width: 56px; height: 56px; border-radius: var(--r-2);
    overflow: hidden; flex-shrink: 0; background: var(--ink-100);
}
.combo-header-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.combo-header-meta { flex: 1; min-width: 0; }
.combo-header-meta .popup-name { font-size: 16px; }

.combo-chips {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 10px 18px;
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
}
.combo-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px 6px 12px;
    background: var(--ink-50);
    border: 1.5px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 12px;
    transition: border-color var(--dur-1), background var(--dur-1);
}
.combo-chip--active { background: var(--brand-primary-100); border-color: var(--brand-primary); }
.combo-chip-name { font-weight: 600; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.combo-chip-change {
    background: transparent; border: none; padding: 0;
    font-size: 10px; font-weight: 600; color: var(--brand-primary);
    cursor: pointer; text-decoration: underline;
    font-family: var(--font-body); white-space: nowrap;
}

.combo-step-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px 6px;
    flex-shrink: 0;
}
.combo-step-name { font-size: 14px; font-weight: 700; color: var(--fg-1); }
.combo-step-indicator { font-size: 12px; color: var(--fg-3); font-weight: 500; }

.combo-items {
    flex: 1; overflow-y: auto;
    padding: 4px 18px 8px;
    display: flex; flex-direction: column; gap: 8px;
}
.combo-item {
    display: grid; grid-template-columns: 68px 1fr 20px;
    align-items: center; gap: 12px;
    padding: 10px 12px;
    border: 1.5px solid var(--border); border-radius: var(--r-2);
    cursor: pointer;
    transition: border-color var(--dur-1), background var(--dur-1);
}
.combo-item.on { border-color: var(--brand-primary); background: var(--brand-primary-100); }
.combo-item--oos { opacity: 0.6; cursor: not-allowed; }
.combo-oos-tag { font-size: 10px; font-weight: 600; color: var(--error, #d32f2f); margin-top: 4px; display: block; }
.combo-item-img {
    width: 68px; height: 68px; border-radius: var(--r-1);
    object-fit: cover; display: block; background: var(--ink-100);
    flex-shrink: 0;
}
.combo-item-img--ph { width: 68px; height: 68px; }
.combo-item-body { min-width: 0; }
.combo-item-name {
    font-size: 12px; font-weight: 500; color: var(--fg-1);
    display: flex; align-items: center; gap: 6px; line-height: 1.4;
}
.combo-item-price { font-size: 12px; font-weight: 700; color: var(--fg-1); margin-top: 4px; font-variant-numeric: tabular-nums; }

.combo-radio {
    appearance: none; -webkit-appearance: none;
    width: 18px; height: 18px; flex-shrink: 0;
    border-radius: 50%; border: 1.5px solid var(--ink-300);
    position: relative; cursor: pointer;
    transition: border-color var(--dur-1);
}
.combo-radio:checked { border-color: var(--brand-primary); }
.combo-radio:checked::after {
    content: ''; position: absolute; inset: 3px;
    border-radius: 50%; background: var(--brand-primary);
}
.combo-item--oos .combo-radio { cursor: not-allowed; }



/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .menu-main {
   
    width: 100%;
}
    .menu-outlet-strip { margin: 0 -16px; }
    /* Mobile: keep outlet info + OTS dropdown side-by-side on row 1;
       offer card drops to row 2 spanning both columns. */
    .menu-outlet-inner {
        padding: 12px 10px;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 10px;
        align-items: start;
    }
    .menu-outlet-info { min-width: 0; }
    .menu-outlet-name { font-size: 17px; flex-wrap: wrap; }
    .menu-outlet-meta { font-size: 12px; gap: 8px; flex-wrap: nowrap; min-width: 0; }
    .menu-outlet-meta .meta-item { font-size: 12px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .menu-outlet-strip .menu-offer-card { grid-column: 1 / -1; }
    /* Compact OTS trigger so the right column doesn't crowd the name */
    .ots-trigger { padding: 5px 8px; gap: 6px; border-radius: var(--r-2); }
    .ots-trigger-kicker { font-size: 9px; }
    .ots-trigger-label { font-size: 12px; }
    .ots-menu { width: 260px; }

    .menu-shell {
        flex-direction: column;
        padding: 0 16px 96px;
    }
    .menu-rail { display: none; } /* Sidebar hidden on mobile — category sheet is the equivalent */
    .menu-toolbar { top: 64px; flex-wrap: wrap; gap: 8px; }
    .menu-search-trigger { flex: 1 1 100%; width: auto; max-width: none; order: -1; }
    .menu-toolbar__chips { flex-basis: 100%; }
    .search-popular-grid { grid-template-columns: repeat(2, 1fr); }
    .menu-grid { grid-template-columns: 1fr;gap:10px; }
    .item { grid-template-columns: minmax(0, 1fr) 145px; padding: 12px; gap: 12px; }
    .item-img { width: 145px; height: 145px; }
    .menu-cart-bar { z-index: calc(var(--z-sticky-cta) + 1); }
    .menu-cart-cta { font-size: 12px; }
    .section-rail__arrow { display: none; }
}

/* ---------- Mobile bottom bar (search + MENU CTA) ---------- */
.menu-mobile-bar { display: none; }
@media (max-width: 767px) {
    .add-ctrl{
        width: 82px;
    }
    /* In-toolbar search hidden — search now lives in the bottom bar */
    .menu-search-trigger { display: none; }
    .menu-toolbar {
        top: var(--site-header-h, 56px);
        gap: 8px;
        padding: 8px 10px;
        margin: 0 -15px 8px -15px;
    }
    /* Chip rail: horizontal scroll, one row, no wrap */
    .menu-toolbar__chips {
        flex-basis: 100%;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 2px 4px 4px 0;
    }
    .menu-chip { padding: 5px 12px; font-size: 12.5px; }

    /* Search bar: white rounded card holding a grey search pill + dark Menu button.
       Sits ABOVE the full-width cart strip; lifts up by the cart's height when it shows. */
    .menu-mobile-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        position: fixed;
        left: 0; right: 0;
        bottom: env(safe-area-inset-bottom, 0px);
        padding: 10px 14px;
        background: var(--surface, #fff);
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
        transition: bottom var(--dur-3) var(--ease-out);

        /* Above the menu sheet overlay so the bar stays visible while sheet is open */
        z-index: 4;
    }
    /* When the cart strip is visible, lift the search bar to rest on top of it */
    #floatingCartBar.show ~ .menu-mobile-bar { bottom: calc(53px + env(safe-area-inset-bottom, 0px)); }
    /* Search + mic share one grey pill so they read as a single unit */
    .menu-mobile-bar__search-group {
        flex: 1 1 auto;
        min-width: 0;
        display: inline-flex; align-items: center;
        background: #ddddddc2;
        border: none;
        border-radius: var(--r-pill);
        overflow: hidden;
    }
    .menu-mobile-bar__search {
        flex: 1 1 auto;
        min-width: 0;
        display: inline-flex; align-items: center; gap: 10px;
        padding: 12px 14px;
        background: none;
        border: none;
        font-size: 12px; font-family: var(--font-body);
        color: var(--fg-muted);
        text-align: left;
        cursor: pointer;
    }
    .menu-mobile-bar__search-ic { color: var(--fg-muted); flex-shrink: 0; }
    .menu-mobile-bar__mic {
        flex: 0 0 auto;
        display: inline-flex; align-items: center; justify-content: center;
        width: 42px; align-self: stretch; padding: 0 12px 0 10px;
        background: none;
        border: none;
        border-left: 1px solid var(--border, #E5E5E5);
        color: var(--fg-muted); cursor: pointer;
        transition: color .15s, background .15s;
    }
    .menu-mobile-bar__mic[hidden] { display: none; }
    .menu-mobile-bar__mic:active { transform: scale(0.95); }
    .menu-mobile-bar__mic.listening {
        color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent);
        animation: micPulse 1.2s ease-in-out infinite;
    }
    @keyframes micPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.45; }
    }
    .menu-mobile-bar__search span {
        flex: 1; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        font-weight: bold;
        font-size: 14px;
    }
    .menu-mobile-bar__menu {
        flex: 0 0 auto;
        padding: 13px 26px;
        background: var(--fg-1, #111);
        color: #fff;
        border: none;
        border-radius: 14px;
        box-shadow: 0 4px 14px rgba(0,0,0,0.28);
        font-family: var(--font-body);
        font-size: 14px; font-weight: 600;
        letter-spacing: 0.01em;
        cursor: pointer;
    }
    .menu-mobile-bar__menu:active { transform: scale(0.97); }

    /* Cart strip: full-width bar pinned to the very bottom (below the search bar). */
    .menu-cart-bar {
        left: 0; right: 0; bottom: 0;
        max-width: none; width: auto;
        transform: translateY(100%);
        border-radius: 0;
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
        z-index: 3;
    }
    .menu-cart-bar.show { transform: translateY(0); }
    /* Clear the stacked search bar + cart strip so the last item isn't hidden */
    .menu-shell { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
    .menu-cart-inner { gap: 12px; }
    .menu-cart-icon { display: none; }
    .menu-cart-info { flex-direction: row; align-items: center; }
    .menu-cart-info__title { display: none; }
    .menu-cart-info__meta { font-size: 15px; font-weight: 600; opacity: 1; margin-top: 0; }
    /* Reference order: ₹total | count */
    .cart-meta-total { order: 0; }
    .cart-meta-sep   { order: 1; opacity: 0.6; }
    .cart-meta-count { order: 2; }
    .menu-cart-cta {
        width: auto; height: auto;
        gap: 6px;
        font-size: 15px; font-weight: 700;
        white-space: nowrap;
    }
    .menu-cart-cta__label { display: inline; }
    .menu-cart-cta:hover { transform: none; }

    .scroll-top-btn { bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   SLOT-BASED ORDERING
   ============================================================ */

/* Slot chip — toolbar, right side */
.slot-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 12px;
    background: var(--slottime);
    border-radius: var(--r-2);
    font-size: 12px; font-weight: 500;
    color: var(--fg-1);
    cursor: pointer;
    border: 0;
    white-space: nowrap;
    transition: background var(--dur-2);
    flex-shrink: 0;
}
.slot-chip:hover { background: #FDE68A; }
.slot-chip-sep { opacity: 0.4; margin: 0 1px; }
#slotChipVal { font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

/* Delivery Slot row — sticky just under the filter toolbar */
.menu-slot-row {
    position: sticky;
    top: calc(var(--site-header-h, 72px) + 57px);
    z-index: 29;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 15px;
    background: var(--surface);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    margin: 0 0 8px;
}
.menu-slot-row__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--fg-1);
}
@media (max-width: 767px) {
    .menu-slot-row {
        top: calc(var(--site-header-h, 56px) + 48px);
        margin: 0 -15px 8px -15px;
    }
}

/* Order-type confirm modal — menu-page overrides only.
   Checkout's #otConfirmModal stays on the original co-ot-confirm styles in checkout.css. */
#otConfirmModal .popup-sheet { max-width: 340px; }
#otConfirmModal .co-ot-confirm__body { gap: .55rem; padding: 1rem .85rem; }
#otConfirmModal .co-ot-confirm__desc { font-size: .85rem; text-align: center; }
#otConfirmModal .co-ot-confirm__note {
    font-size: .78rem;
    color: #92400E;
    background: #FEF3C7;
    text-align: center;
    padding: .6rem 1rem;
    border-radius: var(--r-2);
}

/* Slot modal */
.slot-modal { padding: 0; max-width: 480px; }
.slot-modal-head {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.slot-modal-title { font-size: 17px; font-weight: 700; margin: 0; font-family: var(--font-display); color: var(--fg-1); }
.slot-modal-body { padding: 16px; overflow-y: auto; flex: 1; min-height: 0; }
.slot-deliver-card { border: 1.5px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.slot-deliver-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--bg-2, #F8F8F8);
}
.slot-deliver-ic {
    width: 36px; height: 36px;
    background: #FEF3C7;
    border-radius: 8px;
    display: grid; place-items: center;
    color: #D97706;
    flex-shrink: 0;
}
.slot-deliver-title { font-weight: 700; font-size: 14px; color: var(--fg-1); }
.slot-deliver-sub { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.slot-deliver-radio {
    margin-left: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid var(--brand-primary, #E63329);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.slot-deliver-radio span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand-primary, #E63329);
}
.slot-deliver-body { padding: 14px 16px; border-top: 1px solid var(--border); }
.slot-section-label {
    font-size: 10px; font-weight: 700;
    color: var(--fg-2);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.slot-date-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.slot-date-btn {
    padding: 9px 18px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 14px; font-weight: 500;
    background: #fff; color: var(--fg-1);
    cursor: pointer;
    transition: all var(--dur-2);
}
.slot-date-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.slot-date-btn--active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--secondary-bg-color); }
.slot-date-select {
    padding: 9px 12px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 14px; font-weight: 500;
    background: #fff; color: var(--fg-1);
    cursor: pointer;
}
.slot-time-row { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-time-btn {
    padding: 9px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 12px; font-weight: 500;
    background: #fff; color: var(--fg-1);
    cursor: pointer;
    transition: all var(--dur-2);
}
.slot-time-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.slot-time-btn--active { background: var(--brand-primary); border-color: var(--brand-primary); color: var(--secondary-bg-color); }
.slot-loading { font-size: 12px; color: var(--fg-muted); }
.slot-modal-footer {
    padding: 14px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.slot-submit-btn {
    width: 100%; padding: 13px;
    background: var(--brand-primary); color: var(--secondary-bg-color);
    border: none; border-radius: var(--r-pill);
    font-size: 15px; font-weight: 600;
    cursor: pointer;
    transition: opacity var(--dur-2);
    font-family: var(--font-body);
}
.slot-submit-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Preparation time row on item cards */
.item-preptime {
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fg-1);
    margin-top: 4px;
    display: flex;
    justify-content: left;
    align-items: center;
    padding: 2px 2px 2px 4px;
    background: linear-gradient(60.08deg, #FADEA2 29.98%, #FFFFFF 71.21%);
    border-radius: 8px;
    flex: none;
    margin-bottom: 8px;
}
.item-preptime b { font-weight: 700; color: var(--fg-1); }
.feat-preptime {
    display: flex; align-items: center; gap: 4px;
    font-size: 10px; font-weight: 500;
    color: #D97706;
    margin-top: 3px;
}

/* "Select Next Slot" button — lives inside .add-ctrl so flex-sized */
.item-next-slot {
    width: 100%;
    background: var(--error-bg);
    border: 1.5px solid var(--error);
    color: var(--error);
    padding: 6px 8px;
    border-radius: var(--r-2);
    font-weight: 700; font-size: 10px;
    letter-spacing: 0.04em;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    transition: background var(--dur-2);
    font-family: var(--font-body);
}
.item-next-slot:hover { background: var(--error-bg); filter: brightness(0.97); }

@media (max-width: 767px) {
    .slot-chip { order: 11; }
    #slotChipVal { max-width: 120px; }
}

/* ============================================================
   GROCERY LAYOUT  (categoryId = 15)
   Variables used: --bg-1 (white), --bg-2 (page bg), --border,
   --fg-1/2/3, --r-1/2/3/pill, --shadow-sm/md, --fw-bold/semibold,
   --font-display/body, --brand-primary, --dur-1/2, --ink-*
   ============================================================ */

/* ── Outer wrapper: sidebar + right column.
   Matches QSR .menu-shell content rail (1280px max + 32px padding) so the
   sidebar and toolbar align with the outlet strip above. ── */
.groc-wrap {
    display: flex;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 32px 96px;
    gap: 24px;
    align-items: flex-start;
    min-height: calc(100vh - 120px);
    background: transparent;
}

/* ── LEFT: sticky category sidebar ── */
.groc-sidebar {
    flex: 0 0 22%;
    max-width: 300px;
    min-width: 220px;
    position: sticky;
    top: var(--site-header-h, 72px);
    max-height: calc(100vh - var(--site-header-h, 72px));
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--border);
    background: var(--bg-1);
    scrollbar-width: none;
}
.groc-sidebar::-webkit-scrollbar { display: none; }

/* Sidebar heading */
.groc-sidebar-head {
    padding: 14px 14px 12px;
    font-size: 17px;
    font-weight: 700;
    color: var(--fg-1);
    font-family: var(--font-display);
    border-bottom: 1px solid var(--ink-100);
    margin-bottom: 8px;
}

/* Category nav items — match QSR .menu-cat spacing */
.groc-nav-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    margin-bottom: 6px;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: var(--r-2);
    width: 100%;
    text-align: left;
    transition: background var(--dur-1);
    font-family: var(--font-body);
    color: var(--fg-1);
    position: relative;
}
.groc-nav-item:hover { background: var(--ink-50); }
.groc-nav-item.active { background: var(--ink-100); }
.groc-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px; border-radius: 0 2px 2px 0;
    background: var(--fg-1);
}
.groc-nav-label {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: inherit;
    word-break: break-word;
}
.groc-nav-item.active .groc-nav-label {
    color: var(--fg-1);
    font-weight: 600;
}

/* ── RIGHT: right column (outlet info + products) ── */
.groc-col {
    flex: 1;
    min-width: 0;
    background: var(--bg-2);
}
/* QSR's outlet strip / toolbar carry -16px side bleed for .menu-main padding.
   Grocery's .groc-col has no horizontal padding — reset margins so the
   outlet strip + chips align flush with the column edge (and thus the
   sidebar). */
.groc-col > .menu-outlet-strip,
.groc-col > .menu-toolbar {
    margin-left: 0;
    margin-right: 0;
}

/* Grocery sub-header uses QSR classes (.menu-outlet-strip / .menu-toolbar /
   .ots-*) — see top of file. Grocery-specific styles below cover only the
   sidebar, product grid, and content area. */

/* Product content area */
#grocContent, #grocLoading, #grocClosedMsg {
    padding: 16px;
}

/* Section */
.groc-section { margin-bottom: 32px; }
.groc-section-head {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: var(--fw-bold);
    color: var(--fg-1);
    text-align: center;
    margin: 0 0 20px;
    padding-bottom: 14px;
    letter-spacing: -0.2px;
    position: relative;
}
.groc-section-head::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 2px;
    background: var(--brand-primary);
    border-radius: 2px;
}

/* ── Product grid: 4 cols on desktop, 3 on tablet ── */
.groc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

/* Loading placeholder for a section that hasn't been fetched yet.
   The min-height keeps the shell large enough that subsequent unloaded
   sections sit below the fold — otherwise every empty shell would intersect
   the viewport at page load and fire its IntersectionObserver callback at once. */
.groc-grid--loading {
    min-height: 480px;
    place-items: center;
}

/* ── Product card ── */
.groc-card {
    background: var(--bg-1);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--dur-2);
}
.groc-card:hover { box-shadow: var(--shadow-md); cursor: pointer; }
.groc-card--oos:hover { cursor: default; }
.groc-card--oos { opacity: .55; }

/* Image */
.groc-card-img-wrap { position: relative; flex-shrink: 0; }
.groc-card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
/* CI3 parity: no image (or a broken one the error listener removed) → collapse
   the image wrap so no grey placeholder square is left behind. */
.groc-card-img-wrap:not(:has(img)) { display: none; }

/* Card body */
.groc-card-body {
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}
.groc-card-top {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.groc-card-name {
    font-size: 12px;
    font-weight: var(--fw-semibold);
    color: var(--fg-1);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.groc-card-desc {
    font-size: 10px;
    color: var(--fg-3);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.groc-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
}
.groc-card-price-wrap { display: flex; align-items: baseline; gap: 4px; }
.groc-card-price {
    font-size: 14px;
    font-weight: var(--fw-bold);
    color: var(--fg-1);
    font-variant-numeric: tabular-nums;
}
.groc-card-mrp {
    font-size: 10px;
    color: var(--fg-3);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

/* ADD + button — solid brand color matching CI3 */
.groc-add-btn {
    background: var(--brand-primary);
    border: 1.5px solid var(--brand-primary);
    color: var(--secondary-bg-color);
    border-radius: var(--r-1);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: var(--fw-bold);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-1), opacity var(--dur-1);
    font-family: var(--font-body);
    letter-spacing: 0.3px;
}
.groc-add-btn:hover { opacity: .88; }

/* Quantity stepper */
.groc-qty {
    display: flex;
    align-items: center;
    background: var(--brand-primary);
    border-radius: var(--r-1);
    overflow: hidden;
}
.groc-qb {
    background: transparent;
    border: none;
    color: var(--secondary-bg-color);
    width: 24px;
    height: 28px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    font-family: var(--font-body);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.groc-qb:hover { background: rgba(0,0,0,.12); }
.groc-qty-num {
    min-width: 22px;
    text-align: center;
    font-size: 12px;
    font-weight: var(--fw-bold);
    color: #fff;
    font-variant-numeric: tabular-nums;
    line-height: 28px;
}

/* Out-of-stock */
.groc-oos-tag {
    font-size: 10px;
    color: var(--fg-3);
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    padding: 3px 8px;
    white-space: nowrap;
}

/* No results */
.groc-empty {
    color: var(--fg-3);
    text-align: center;
    padding: 48px 16px;
    font-size: 14px;
}

/* ── Tablet (768px–991px): 3 cols ── */
@media (min-width: 768px) and (max-width: 991px) {
    .groc-grid { grid-template-columns: repeat(3, 1fr); }
    .groc-sidebar { flex: 0 0 220px; min-width: 200px; }
}

/* ── Mobile (< 768px) ── */
@media (max-width: 767px) {
    /* Stack: sidebar becomes horizontal scroll strip */
    .groc-wrap { flex-direction: column; padding: 0; gap: 0; }

    .groc-sidebar {
        flex: none;
        width: 100%;
        max-width: none;
        min-width: 0;
        height: auto;
        position: sticky;
        top: var(--site-header-h, 72px);
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--border);
        z-index: 65;
    }
    .groc-sidebar-head { display: none; }
    .groc-nav-item {
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
        border-bottom: none;
        border-right: none;
        padding: 8px 10px;
        width: auto;
        min-width: 64px;
        text-align: center;
        gap: 4px;
    }
    .groc-nav-item.active { background: transparent; border-bottom: 3px solid var(--brand-primary); }
    .groc-nav-item img, .groc-nav-img-ph { width: 36px; height: 36px; }
    .groc-nav-label { font-size: 10px; white-space: nowrap; }
    .groc-nav-label { white-space: nowrap; }

    /* 2-column grid on mobile */
    .groc-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    #grocContent, #grocLoading, #grocClosedMsg { padding: 10px; }
}

/* ============================================================
   COMBO REDESIGN (viewType=2)
   - Menu card: cream-tinted .item--combo + .item-create-combo CTA over image
   - Detail screen: fullscreen .combo-detail (replaces step wizard)
   - Per-section change: .combo-sheet bottom sheet on mobile / centered on desktop
   Old .combo-chip* / .combo-step-head / .combo-items styles above (lines ~1951-2040)
   are dormant after this redesign but kept in place.
   ============================================================ */

/* ── Menu card (cream tint + Create Combo button on image) ── */
.item.item--combo {
    background: var(--surface-combo, #f5efe2);
    border-color: var(--surface-combo, #f5efe2);
}
.item.item--combo:hover { box-shadow: var(--shadow-sm); border-color: color-mix(in srgb, var(--surface-combo, #f5efe2) 70%, #000 8%); }
.item-create-combo {
    margin-top: -16px;
    z-index: 2;
    width: 100%;
    padding: 10px 12px;
    background: #fff;
    color: var(--fg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-size: 12px; font-weight: 600;
    font-family: var(--font-body);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background var(--dur-1), border-color var(--dur-1);
}
.item-create-combo:hover { background: var(--ink-50); border-color: var(--ink-300); }
.item-create-combo:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* ── Combo detail (fullscreen overlay) ── */
/* Sized to match .popup-detail: mobile bottom-sheet (≤90vh, rounded top),
   desktop centered min(560px,90vw) — not a 100vh full screen. */
.combo-detail-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
}
.combo-detail {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: auto; max-height: 90vh;
    background: var(--bg-1, #fff);
    border-radius: var(--r-4) var(--r-4) 0 0;
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: sheet-slide var(--dur-3) var(--ease-out);
}
@media (min-width: 768px) {
    .combo-detail-overlay { align-items: center !important; justify-content: center !important; }
    .combo-detail {
        width: min(560px, 90vw); max-width: min(560px, 90vw);
        height: auto; max-height: 85vh;
        border-radius: var(--r-4);
        overflow: hidden;
        box-shadow: var(--shadow-lg);
    }
}

.combo-detail__hero {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 16px;
    padding: 16px 18px;
    background: var(--surface-combo, #f5efe2);
    flex-shrink: 0;
}
/* No hero image → single column for the body. */
.combo-detail__hero--noimg { grid-template-columns: 1fr; }
/* Share + close grouped top-right. */
.combo-detail__actions {
    position: absolute;
    top: 12px; right: 12px;
    display: inline-flex;
    gap: 8px;
    z-index: 3;
}
.combo-detail__close {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--fg-1);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-xs);
}
.combo-detail__close:hover { background: var(--ink-50); }
.combo-detail__close:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.combo-detail__hero-body { min-width: 0; }
/* Name row clears the top-right action buttons (share + close). */
.combo-detail__head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-right: 80px; }
.combo-detail__name {
    font-size: 18px; font-weight: 700; color: var(--fg-1);
    line-height: 1.3; margin: 0;
    word-break: break-word;
}
.combo-detail__desc {
    font-size: 12px; color: var(--fg-3);
    line-height: 1.5; margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3; line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Price line under the combo title — same treatment as regular item cards. */
.combo-detail__hero-body .price-line { margin-top: 8px; }
.combo-detail__hero-img {
    width: 96px; height: 96px;
    border-radius: var(--r-3);
    overflow: hidden;
    background: var(--ink-100);
    flex-shrink: 0;
    align-self: start;
}
.combo-detail__hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.combo-detail__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 16px 12px;
    background: var(--surface-2, #f8f9fb);
    display: flex; flex-direction: column;
    gap: 12px;
}
.combo-detail__intro {
    display: flex; flex-direction: column; gap: 8px;
    padding: 0 2px;
}
.combo-detail__count {
    font-size: 15px; font-weight: 700; color: var(--fg-1);
}
.combo-detail__notice {
    margin: 0;
    display: flex; align-items: flex-start; gap: 7px;
    padding: 9px 11px;
    background: var(--ink-50);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    font-size: 12px; font-weight: 500; line-height: 1.4;
    color: var(--fg-2);
}
.combo-detail__notice svg { flex-shrink: 0; margin-top: 1px; color: var(--brand-primary); }
.combo-detail__notice strong { font-weight: 700; color: var(--fg-1); }

.combo-detail__sections { display: flex; flex-direction: column; gap: 12px; }
.combo-section {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-3);
    padding: 14px;
}
.combo-section__head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.combo-section__title { font-size: 15px; font-weight: 700; color: var(--fg-1); }
.combo-section__count { font-size: 12px; color: var(--fg-3); font-weight: 500; }
.combo-section__row--oos { grid-template-columns: 1fr; }
.combo-section__oos-msg {
    font-size: 12.5px; font-weight: 600;
    color: var(--error);
    text-align: center;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--error) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--error) 22%, #fff);
    border-radius: var(--r-2);
}
/* A pre-filled (chosen) row gets a soft green-tinted card so the user can see
   at a glance that this section already has a selection. */
.combo-section__row--selected {
    background: color-mix(in srgb, var(--veg) 4%, #fff);
    border: 1px solid color-mix(in srgb, var(--veg) 12%, #fff);
    border-radius: var(--r-2);
    padding: 12px;
}
.combo-section__row {
    display: grid;
    /* minmax(0,1fr) forces the selection column to absorb free space (a bare
       1fr can collapse to min-content, letting the button track balloon);
       max-content keeps the Change button sized to its label. */
    grid-template-columns: 56px minmax(0, 1fr) max-content;
    align-items: flex-start;
    gap: 12px;
}
/* A combo item with a broken/missing image has its <img> removed by the global
   error handler (menu.js bindAll → 'error' capture). That deletes the thumb
   grid cell, so without this the selection would fall into the 56px column and
   the Change button into the wide track. Drop to 2 columns when no thumb. */
.combo-section__row:not(:has(.combo-section__thumb)) {
    grid-template-columns: minmax(0, 1fr) max-content;
}
/* When a section has multiple selected items, stack rows with a divider between them. */
.combo-section__row + .combo-section__row {
    border-top: 1px solid var(--divider);
    margin-top: 12px;
    padding-top: 12px;
}
/* Tinted selection cards are self-contained — separate with a gap, not a divider,
   so the green card keeps even padding on all sides. */
.combo-section__row--selected + .combo-section__row--selected {
    border-top: 1px solid color-mix(in srgb, var(--veg) 12%, #fff);
    margin-top: 10px;
    padding-top: 12px;
}
.combo-section__sel-desc {
    font-size: 12.5px;
    color: var(--fg-3);
    line-height: 1.4;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.combo-section__thumb {
    width: 56px; height: 56px;
    border-radius: var(--r-1);
    object-fit: cover;
    background: var(--ink-100);
}
.combo-section__thumb--ph { background: var(--ink-100); }
.combo-section__sel { min-width: 0; }
.combo-section__sel-name {
    display: flex; align-items: flex-start; gap: 6px;
    font-size: 14px; font-weight: 500; color: var(--fg-1);
    line-height: 1.35;
}
.combo-section__sel-name > .veg-mark,
.combo-section__sel-name > .nonveg-mark { flex-shrink: 0; margin-top: 3px; }
.combo-section__sel-text {
    flex: 1; min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.combo-section__sel-price {
    font-size: 12px; font-weight: 700; color: var(--fg-1);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.combo-section__change {
    justify-self: end;
    width: max-content;
    background: #fff;
    border: 1.5px solid var(--ink-80);
    color: var(--fg-1, #212121);
    padding: 8px 18px;
    border-radius: var(--r-2);
    font-family: var(--font-body);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--dur-1);
}
.combo-section__change:hover { background: var(--brand-primary); color: var(--secondary-bg-color); }
.combo-section__change:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

.combo-detail__footer {
    flex-shrink: 0;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--border);
}
/* Single full-width CTA with the price inside — matches the item modal .popup-cta. */
.combo-detail__cta {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 22px;
    background: var(--brand-primary);
    color: var(--secondary-bg-color);
    border: none;
    border-radius: var(--r-3);
    font-family: var(--font-body);
    cursor: pointer;
    transition: filter var(--dur-1), transform var(--dur-1);
}
.combo-detail__cta:hover { filter: brightness(0.95); }
.combo-detail__cta:active { transform: scale(0.99); }
.combo-detail__cta-price {
    font-size: 16px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.combo-detail__cta-label {
    font-size: 15px; font-weight: 700;
    letter-spacing: 0.02em;
}
/* Blocked state: a step is fully out of stock. Muted/grey fill instead of the
   washed-out brand tint, but clicks still flow (no native :disabled) so tapping
   surfaces the tooltip naming the unavailable section. */
.combo-detail__cta--blocked {
    background: var(--ink-100);
    color: var(--fg-3);
    cursor: not-allowed;
}
.combo-detail__cta--blocked:hover { background: var(--ink-100); filter: none; }
.combo-detail__cta:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* ── Section change bottom sheet ── */
.combo-sheet {
    max-width: 520px;
    max-height: 86vh;
    display: flex; flex-direction: column;
}
.combo-sheet__close { z-index: 3; }
.combo-sheet__head {
    padding: 16px 18px 8px;
    flex-shrink: 0;
}
.combo-sheet__title {
    font-size: 17px; font-weight: 700; color: var(--fg-1);
    margin: 0 0 4px;
}
.combo-sheet__sub {
    font-size: 12px; color: var(--fg-3);
    margin: 0;
}
.combo-sheet__list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 14px 12px;
    background: var(--surface-2, #f8f9fb);
    display: flex; flex-direction: column;
    gap: 8px;
}
.combo-option {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    cursor: pointer;
    transition: border-color var(--dur-1);
}
/* Same broken-image guard as .combo-section__row: if the option's <img> is
   removed by the global error handler, drop the 60px image column so the name
   stays wide instead of collapsing into it. */
.combo-option:not(:has(.combo-option__img)) {
    grid-template-columns: 1fr auto;
}
.combo-option:hover { border-color: var(--ink-300); }
.combo-option:has(input:checked) {
    border-color: var(--fg-1);
}
.combo-option:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
/* Max-selection reached: locked option — lighter dim (matches variant .maxed),
   no hover effect. A floating toast explains why on click; see menu.js
   openSectionSheet updateCap handler. */
.combo-option--maxed:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.combo-option--maxed:hover { border-color: var(--border); }
.combo-option--maxed .combo-option__check { cursor: not-allowed; }
.combo-option--oos:has(input:disabled) { opacity: 0.7; }
.combo-option--oos { opacity: 0.7; cursor: not-allowed; background: var(--ink-50); }
.combo-option__img {
    width: 60px; height: 60px;
    border-radius: var(--r-1);
    object-fit: cover;
    background: var(--ink-100);
}
.combo-option__img--ph { background: var(--ink-100); }
.combo-option__body { min-width: 0; }
.combo-option__name {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 500; color: var(--fg-1);
    line-height: 1.35;
}
.combo-option__price {
    font-size: 12px; font-weight: 700; color: var(--fg-1);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.combo-option__oos {
    font-size: 12px; font-weight: 600; color: var(--error, #d32f2f);
    white-space: nowrap;
}
.combo-option__radio {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; flex-shrink: 0;
    border-radius: 50%;
    border: 1.5px solid var(--ink-300);
    position: relative;
    cursor: pointer;
    transition: border-color var(--dur-1);
}
.combo-option__radio:checked { border-color: var(--fg-1); border-width: 2px; }
.combo-option__radio:checked::after {
    content: '';
    position: absolute; inset: 3px;
    border-radius: 50%;
    background: var(--fg-1);
}
/* Multi-pick checkbox (square with checkmark) */
.combo-option__check {
    appearance: none; -webkit-appearance: none;
    width: 22px; height: 22px; flex-shrink: 0;
    border-radius: 4px;
    border: 1.5px solid var(--ink-300);
    background: #fff;
    position: relative;
    cursor: pointer;
    transition: border-color var(--dur-1), background var(--dur-1);
}
.combo-option__check:checked {
    background: var(--fg-1);
    border-color: var(--fg-1);
}
.combo-option__check:checked::after {
    content: '';
    position: absolute;
    left: 6px; top: 2px;
    width: 6px; height: 12px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.combo-option__check:disabled { cursor: not-allowed; }
.combo-sheet__error {
    font-size: 12px; font-weight: 500;
    color: var(--error);
    margin-bottom: 8px;
    padding: 0 2px;
}
.combo-sheet__footer {
    flex-shrink: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--border);
}
.combo-sheet__cta {
    width: 100%;
    padding: 14px 18px;
    background: var(--brand-primary);
    color: var(--secondary-bg-color);
    border: none;
    border-radius: var(--r-2);
    font-family: var(--font-body);
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    transition: background var(--dur-1);
}
.combo-sheet__cta:hover { background: color-mix(in srgb, var(--brand-primary) 85%, #000); }
.combo-sheet__cta:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

@media (max-width: 991px) {
    .combo-detail__hero:not(.combo-detail__hero--noimg) { grid-template-columns: 80px 1fr; }
    .combo-detail__hero-img { width: 80px; height: 80px; }
    .combo-detail__name { font-size: 16px; }
}

/* ============================================================
   Cloud kitchen — brand-selection modal, header pill, list rows.
   Only renders on iscloud=1 brands (e.g. eatkaro.com); body.cloud-kitchen
   is set by menu.js when the brand has more than one sibling outlet.
   ============================================================ */
/* .cloud-brand-pill rules live in public/assets/css/cloud-brand-pill.css */

/* Brand modal header — title centered with close button on the right.
   Close is hidden in force-select mode (initial visit, must pick a brand). */
.cloud-brand-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 0; }
.cloud-brand-modal__header h3 { flex: 1; text-align: center; margin: 0; padding-left: 32px; /* visually balance the 32px close button on the right */ }
.cloud-brand-modal__close { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--surface-2, #f2f2f2); color: var(--text-1, #111); display: inline-grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background var(--dur) var(--ease); }
.cloud-brand-modal__close:hover, .cloud-brand-modal__close:focus-visible { background: var(--border, #e0e0e0); outline: none; }
#cloudBrandModal[data-force-select="1"] .cloud-brand-modal__close { display: none; }
#cloudBrandModal[data-force-select="1"] .cloud-brand-modal__header h3 { padding-left: 0; }

.cloud-brand-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.cloud-brand-row { width: 100%; display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; background: var(--surface); border: 1.5px solid var(--border-subtle, var(--border)); border-radius: var(--r-md, var(--r, 10px)); cursor: pointer; text-align: left; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.cloud-brand-row:hover, .cloud-brand-row:focus-visible { border-color: var(--brand); background: var(--brand-soft, rgba(0,0,0,.03)); outline: none; }
.cloud-brand-row.is-active { border-color: var(--brand); background: var(--brand-soft, rgba(255,103,31,.06)); }
.cloud-brand-row.is-active .cloud-brand-row__name { color: var(--brand); }
.cloud-brand-row.is-active .cloud-brand-row__chev { display: none; }
.cloud-brand-row.is-active::after { content: "Selected"; font-size: .68rem; font-weight: 700; color: var(--brand); padding: .15rem .5rem; border: 1px solid var(--brand); border-radius: 999px; flex-shrink: 0; }
.cloud-brand-row__logo { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cloud-brand-row__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cloud-brand-row__logo .ph-image { font-size: 1rem; font-weight: 700; color: var(--text-2); }
.cloud-brand-row__text { flex: 1; min-width: 0; }
.cloud-brand-row__name { font-size: .92rem; font-weight: 600; color: var(--text); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-brand-row__chev { color: var(--text-2); flex-shrink: 0; }

body.cloud-kitchen .menu-outlet-name { flex-wrap: wrap; }

/* ============================================================
   Pickup-location tooltip — shared by menu + checkout.
   Markup: app/Views/partials/pickup_tooltip.php
   Behaviour/positioning: public/src/js/modules/pickup_tooltip.js
   (position:fixed, JS sets left/top + arrow offset, viewport-clamped)
   ============================================================ */
.pickup-tip {
    position: fixed;
    top: 0; left: 0;
    z-index: var(--z-modal);
    width: max-content;
    max-width: min(320px, calc(100vw - 24px));
    background: var(--bg-1);
    border-radius: var(--r-4);
    box-shadow: var(--shadow-lg);
    padding: 14px 16px 16px;
}
.pickup-tip[hidden] { display: none; }
.pickup-tip__arrow {
    position: absolute;
    top: -6px; left: 24px;
    width: 13px; height: 13px;
    background: var(--bg-1);
    border-radius: 2px 0 0 0;
    transform: rotate(45deg);
}
.pickup-tip__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
    color: var(--fg-1);
}
.pickup-tip__label {
    font-size: 12px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--fg-1);
}
.pickup-tip__addr {
    margin: 0 0 12px;
    font-size: 14px; line-height: 1.45;
    color: var(--fg-2);
}
.pickup-tip__divider {
    height: 1px; background: var(--divider);
    margin: 0 0 12px;
}
.pickup-tip__dir {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border: 1px solid var(--divider);
    border-radius: var(--r-3);
    font-size: 14px; font-weight: 600;
    color: var(--fg-1); text-decoration: none;
    background: var(--bg-1);
}
.pickup-tip__dir:hover { background: color-mix(in srgb, var(--fg-1) 5%, var(--bg-1)); }