/* =====================================================================
   default9 — modern ordering template
   Sole CSS authority for default9 pages (no patxi/bootstrap-theme CSS).
   Design system: white surfaces, cool neutral grays, one brand accent,
   SVG line icons only, fixed-ratio photo bands. Benchmark: DoorDash/Owner.
   The dialog/search/toast blocks at the bottom are ported from default8.css
   (same popup engine markup); they consume the alias variables below.
   ===================================================================== */
:root {
    --brand: #16803C;              /* overridden per store from restaurant.getRestaurantColor() */
    --brand-ink: #ffffff;
    --brand-tint: color-mix(in srgb, var(--brand) 8%, #ffffff);

    --ground: #ffffff;
    --surface: #ffffff;
    --surface-2: #f7f7f7;
    --ink: #191919;
    --ink-2: #494949;
    --muted: #767676;
    --hairline: #e7e7e7;
    --hairline-2: #d6d6d6;
    --field: #ffffff;
    --field-line: #c9c9c9;
    --good: #0f7a43;
    --bad: #b3261e;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px -4px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
    --shadow-lg: 0 12px 32px -8px rgba(0,0,0,.18);

    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --maxw: 1200px;
    color-scheme: light;

    /* aliases consumed by the ported default8 dialog/search/toast blocks */
    --theme-primary: var(--brand);
    --main-color: var(--brand);
    --theme-text: var(--ink);
    --theme-bg: var(--surface);
    --theme-border: var(--hairline);
    --theme-muted: var(--muted);
    --theme-header-bg: var(--surface);
    --theme-header-text: var(--ink);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* NOTE: no scroll-behavior:smooth on html — the shared popup engine restores
   scroll position via window.scrollTo() on dialog close, and global smooth
   scrolling turns that restore into a visible page scroll on every add-to-cart.
   Tab navigation uses scrollTo({behavior:'smooth'}) in JS instead. */
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--ground); color: var(--ink);
    font-family: var(--sans); font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; }
.tnum { font-variant-numeric: tabular-nums; }
.noscroll { overflow: hidden; }

#spinnerLoader { position: fixed; inset: 0; display: grid; place-items: center; z-index: 200; background: rgba(255,255,255,.6); }
#infoDiv { display: none; }

/* ---- Top bar ---------------------------------------------------------- */
.d9-topbar {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255,255,255,.92); backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid var(--hairline);
}
.d9-topbar-in {
    max-width: var(--maxw); margin: 0 auto; padding: 10px 20px;
    display: flex; align-items: center; gap: 16px;
}
.d9-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.d9-brand img { height: 40px; width: auto; max-width: 160px; object-fit: contain; }
.d9-brand .name { font-weight: 700; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d9-search-btn {
    flex: 1; max-width: 420px; display: flex; align-items: center; gap: 9px;
    background: var(--surface-2); border: 1px solid transparent; border-radius: var(--r-pill);
    padding: 9px 15px; color: var(--muted); font-size: 14px; cursor: pointer; text-align: left;
}
.d9-search-btn:hover { border-color: var(--hairline-2); background: var(--surface); }
.d9-search-btn svg { flex: none; }
.d9-tb-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.d9-tb-link {
    color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px;
    padding: 8px 12px; border-radius: var(--r-pill); white-space: nowrap;
}
.d9-tb-link:hover { background: var(--surface-2); color: var(--ink); }
.d9-cart-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--brand); color: var(--brand-ink); border: 0; border-radius: var(--r-pill);
    padding: 9px 16px; font-weight: 650; font-size: 14px; cursor: pointer;
}
.d9-cart-btn:hover { filter: brightness(1.06); }
.d9-cart-btn .ct { background: rgba(255,255,255,.22); border-radius: var(--r-pill); padding: 0 8px; font-size: 13px; line-height: 20px; }
@media (max-width: 640px) {
    .d9-search-btn span { display: none; }
    .d9-search-btn { flex: 0 0 auto; padding: 9px 11px; }
    .d9-tb-link.signin { display: none; }
    /* meta wraps to one item per line on phones; the "|" separators then orphan
       at line ends — drop them and let the row gap do the separating. */
    .d9-hero-meta .sep { display: none; }
    .d9-hero-meta { gap: 3px 10px; }
}

/* ---- Hero -------------------------------------------------------------- */
.d9-hero { max-width: var(--maxw); margin: 0 auto; padding: 26px 20px 14px; }
.d9-hero-row { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; }
/* Logo sits left of the name. Sized by HEIGHT with contain, so a square mark
   lands 72x72 and a wide banner 144x72 — neither blows out the row. */
.d9-hero-brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.d9-hero-logo { height: 72px; width: auto; max-width: 200px; object-fit: contain; flex: none; }
.d9-hero-id { min-width: 0; }
.d9-hero h1 { font-weight: 800; font-size: 32px; letter-spacing: -.02em; margin: 0; }
.d9-hero-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--ink-2); font-size: 14px; margin-top: 6px; align-items: center; }
.d9-hero-meta .open { color: var(--good); font-weight: 650; }
.d9-hero-meta .closed { color: var(--bad); font-weight: 650; }
.d9-hero-meta .sep { color: var(--hairline-2); }
.d9-fulfil { margin-left: auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
@media (max-width: 760px) { .d9-fulfil { margin-left: 0; align-items: flex-start; } }
@media (max-width: 640px) {
    .d9-hero-brand { gap: 13px; }
    .d9-hero-logo { height: 52px; max-width: 130px; }
}
.d9-seg {
    display: inline-flex; background: var(--surface-2); border: 1px solid var(--hairline);
    border-radius: var(--r-pill); padding: 3px; gap: 2px;
}
.d9-seg button {
    border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
    font: inherit; font-weight: 600; font-size: 14px; padding: 8px 18px; border-radius: var(--r-pill);
    display: inline-flex; align-items: center; gap: 7px;
}
.d9-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.d9-when { color: var(--ink-2); font-size: 13px; }
.d9-when b { color: var(--ink); font-weight: 650; }
.d9-when a { color: var(--brand); font-weight: 600; text-decoration: none; }

/* ---- Category tabs (sticky) -------------------------------------------- */
.d9-cattabs { position: sticky; top: 57px; z-index: 30; background: rgba(255,255,255,.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); }
.d9-cattabs-in { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.d9-cattabs-in::-webkit-scrollbar { display: none; }
.d9-cattabs a {
    white-space: nowrap; padding: 13px 13px 11px; color: var(--ink-2); text-decoration: none;
    font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent;
}
.d9-cattabs a.on { color: var(--ink); border-bottom-color: var(--brand); }
.d9-cattabs a:hover { color: var(--ink); }

/* ---- Shell: menu + cart ------------------------------------------------- */
.d9-shell {
    max-width: var(--maxw); margin: 0 auto; padding: 22px 20px 120px;
    display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 28px; align-items: start;
}
@media (max-width: 920px) { .d9-shell { grid-template-columns: 1fr; padding-bottom: 96px; } }
.d9-shell > aside { align-self: stretch; }  /* full column height so the sticky cart tracks the page */

.d9-menu section { margin-bottom: 36px; scroll-margin-top: 118px; }
.d9-cat-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 4px; }
.d9-cat-h h2 { font-weight: 750; font-size: 22px; letter-spacing: -.015em; margin: 0; }
.d9-cat-h .count { color: var(--muted); font-size: 13px; }
.d9-cat-sub { color: var(--ink-2); font-size: 14px; margin: 0 0 14px; }
/* merchant-authored category descriptions arrive with arbitrary inline HTML — normalize it */
.d9-cat-sub h1, .d9-cat-sub h2, .d9-cat-sub h3, .d9-cat-sub h4, .d9-cat-sub p, .d9-cat-sub div, .d9-cat-sub span, .d9-cat-sub font {
    font-size: 14px !important; line-height: 1.5 !important; margin: 0 0 4px; font-weight: 500; text-align: left !important;
}
.d9-cat-sub b, .d9-cat-sub strong { font-weight: 700; }
.d9-cat-sub img { max-height: 160px; width: auto; border-radius: var(--r-md); }

.d9-items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .d9-items { grid-template-columns: 1fr; } }
/* Narrow phones: the card is the viewport, so a 150px photo starts eating the description.
   Give the text back its two lines. */
@media (max-width: 430px) {
    .d9-thumb { width: 118px; }
    .d9-item:has(.d9-thumb) { min-height: 118px; }
}
/* The photo runs to the card's edge rather than sitting inset — an inset square with its own
   border reads as a thumbnail no matter how large it is. Padding therefore lives on the body,
   not the card, and the card clips so the image picks up the card's own corner radius.
   Sized against what these merchants already have: SkyTab Online serves 150px-wide photos
   stretched to card height, Owner ~198px. 150 matches SkyTab; going wider means widening the
   card, which is gated on the cart rail (see .d9-rail). */
.d9-item {
    display: flex; gap: 0; align-items: stretch; padding: 0; overflow: hidden;
    background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
    cursor: pointer; transition: border-color .12s, box-shadow .12s; min-width: 0;
}
/* Only photo-bearing cards get the floor, so a menu with no photos at all (most Focus and
   Point of Success imports) keeps its compact rows instead of columns of white space. Mixed
   coverage still lines up: a photo card and a text-only card in the same row match height. */
.d9-item:has(.d9-thumb) { min-height: 150px; }
.d9-item:hover { border-color: var(--hairline-2); box-shadow: var(--shadow-md); }
.d9-item:active { transform: translateY(1px); }  /* subtle tactile press on tap */
.d9-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 14px; }
.d9-item-name { font-weight: 650; font-size: 15px; letter-spacing: -.01em; }
.d9-item-desc {
    color: var(--muted); font-size: 13px; margin-top: 3px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.d9-item-price { font-weight: 600; font-size: 14px; margin-top: 2px; color: var(--ink-2); }
.d9-item-price .from { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.d9-thumb {
    flex: none; width: 150px; align-self: stretch; overflow: hidden;
    border-left: 1px solid var(--hairline); position: relative; background: var(--surface-2);
}
.d9-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d9-thumb.noimg img { display: none; }  /* broken/missing photo → neutral tile, add button stays */
.d9-add {
    position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%;
    background: var(--surface); color: var(--ink); border: 0;
    display: grid; place-items: center; box-shadow: var(--shadow-md); cursor: pointer;
}
.d9-add:hover { background: var(--brand); color: var(--brand-ink); }
/* Anchored bottom-right, matching .d9-add on photo cards. Centring it left the
   button floating mid-card with nothing to sit against, and moving with the card's
   height, so a row of text-only items had its + buttons at three different heights. */
.d9-add-plain {
    flex: none; align-self: flex-end; margin: 0 14px 14px 0;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--hairline-2); background: var(--surface); color: var(--ink);
    display: grid; place-items: center; cursor: pointer;
}
.d9-add-plain:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

.d9-closed-banner {
    max-width: var(--maxw); margin: 14px auto 0; padding: 0 20px;
}
.d9-closed-banner > div {
    padding: 12px 16px; border-radius: var(--r-md); font-weight: 600; font-size: 14px;
    background: #FDF3F2; border: 1px solid #F3D6D3; color: var(--bad);
}

/* ---- Cart panel ----------------------------------------------------------
   The aside stretches to full column height (required for sticky to have
   room to travel); the sticky element is the inner #cart9host. */
.d9-cart-wrap { position: static; }
#cart9host { position: sticky; top: 118px; }
.d9-cart {
    background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
    box-shadow: var(--shadow-md); overflow: hidden;
}
.d9-cart-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: baseline; }
.d9-cart-head .t { font-weight: 700; font-size: 16px; }
.d9-cart-head .n { color: var(--muted); font-size: 13px; }
.d9-citems { padding: 4px 18px; max-height: 44vh; overflow-y: auto; }
.d9-citem { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--hairline); align-items: flex-start; }
.d9-citem:last-child { border-bottom: 0; }
.d9-qty {
    flex: none; display: inline-flex; align-items: center; height: 28px;
    border: 1px solid var(--field-line); border-radius: var(--r-pill); overflow: hidden; background: var(--surface);
}
.d9-qty button { width: 26px; height: 26px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1; }
.d9-qty button:hover { color: var(--ink); background: var(--surface-2); }
.d9-qty span { min-width: 18px; text-align: center; font-weight: 650; font-size: 13px; }
.d9-citem-main { flex: 1; min-width: 0; }
.d9-citem-name { font-weight: 620; font-size: 13.5px; line-height: 1.35; }
.d9-citem-mods { color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.4; }
.d9-citem-for { font-size: 12px; font-weight: 650; color: var(--ink-2); margin-top: 3px; }
.d9-citem-note { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 2px; line-height: 1.4; }
.d9-citem-actions { display: flex; gap: 14px; align-items: center; margin-top: 2px; }
.d9-citem-edit {
    border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px;
    padding: 2px 0 0; text-decoration: underline;
}
.d9-citem-edit:hover { color: var(--brand); }
.d9-citem-x {
    border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px;
    padding: 2px 0 0; text-decoration: underline;
}
.d9-citem-x:hover { color: var(--bad); }
.d9-citem-price { font-weight: 620; font-size: 13.5px; }
.d9-cempty { padding: 30px 18px; text-align: center; color: var(--muted); font-size: 14px; }
.d9-cart-foot { padding: 12px 18px 16px; border-top: 1px solid var(--hairline); }
.d9-trow { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); margin-bottom: 7px; }
.d9-trow.grand { color: var(--ink); font-weight: 700; font-size: 16px; padding-top: 10px; border-top: 1px solid var(--hairline); margin-bottom: 0; }
.d9-checkout-btn {
    margin-top: 12px; width: 100%; padding: 14px 16px; background: var(--brand); color: var(--brand-ink);
    border: 0; border-radius: var(--r-md); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; text-decoration: none;
}
.d9-checkout-btn:hover { filter: brightness(1.06); }
.d9-checkout-btn[aria-disabled="true"] { background: var(--hairline-2); color: var(--muted); pointer-events: none; }

/* mobile: cart becomes a slide-over drawer */
@media (max-width: 920px) {
    .d9-cart-wrap {
        position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
        width: min(400px, 92vw); transform: translateX(105%); transition: transform .22s ease;
    }
    .d9-cart-wrap.open { transform: none; }
    #cart9host { position: static; height: 100%; }
    .d9-cart { height: 100%; border-radius: 0; display: flex; flex-direction: column; }
    .d9-citems { flex: 1; max-height: none; }
    .d9-cart-close { display: inline-flex !important; }
}
.d9-cart-close {
    display: none; border: 0; background: none; color: var(--muted); cursor: pointer;
    font-size: 22px; line-height: 1; padding: 0 0 0 10px;
}
.d9-cart-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 85; }
.d9-cart-overlay.open { display: block; }

/* Translate toggle (translate.inc). Floating it is not viable on this template: top-left sits on
   the sticky bar's brand and search, bottom-right meets the cart panel's checkout button and the
   mobile slide-over, and bottom-left is covered once that drawer opens at 92vw. So default9
   hosts it in the top bar via #rtoTranslateSlot and it lays out in flow -- it cannot overlap
   anything because it is no longer an overlay. Restyled to match the bar's other controls
   rather than the red floating pill. */
#rtoTranslateSlot { display: inline-flex; align-items: center; min-width: 0; }
#rtoTranslateBtn.rto-inline {
    background: var(--surface-2); color: var(--ink-2); border: 1px solid transparent;
    border-radius: var(--r-pill); font: 600 14px/1 inherit; letter-spacing: 0;
    padding: 9px 14px; gap: 6px; display: inline-flex; align-items: center;
}
#rtoTranslateBtn.rto-inline:hover { border-color: var(--hairline-2); background: var(--surface); color: var(--ink); filter: none; }
/* The bar gets tight before the search field collapses, so drop to the short code early. */
@media (max-width: 1040px) {
    #rtoTranslateBtn.rto-inline .rto-full { display: none; }
    #rtoTranslateBtn.rto-inline .rto-short { display: inline; }
    #rtoTranslateBtn.rto-inline { padding: 9px 11px; }
}

/* mobile sticky checkout bar */
.d9-mbar {
    display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: var(--surface); border-top: 1px solid var(--hairline); padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.d9-mbar a {
    width: 100%; padding: 14px 16px; background: var(--brand); color: var(--brand-ink);
    border-radius: var(--r-md); font-weight: 700; font-size: 15px; text-decoration: none;
    display: flex; align-items: center; justify-content: space-between;
}
@media (max-width: 920px) { .d9-mbar { display: block; } }

/* ---- Simple pages (login etc.) ------------------------------------------ */
.d9-page { max-width: 550px; margin: 0 auto; padding: 40px 20px 120px; }
.d9-page h1 { font-weight: 750; font-size: 26px; letter-spacing: -.02em; margin: 0 0 18px; }
.d9-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px; }
.d9-field { margin-bottom: 14px; }
.d9-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.d9-field input {
    width: 100%; height: 44px; padding: 0 14px; font: inherit; color: var(--ink);
    background: var(--field); border: 1px solid var(--field-line); border-radius: var(--r-md);
}
.d9-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.d9-btn-primary {
    width: 100%; padding: 13px; background: var(--brand); color: var(--brand-ink); border: 0;
    border-radius: var(--r-md); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
.d9-page .aux { margin-top: 14px; font-size: 14px; color: var(--ink-2); text-align: center; }
.d9-page .aux a { color: var(--brand); font-weight: 600; text-decoration: none; }

/* ---- Legacy include support (account/registerDetail etc.) -----------------
   Shared JSP includes (tomatina2/registerDetail.jsp) use bootstrap-grid
   classes; default9 loads no bootstrap, so provide the minimal subset,
   styled to the design system, scoped under .d9-page. */
.d9-page .row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.d9-page .row > [class*="col-"] { padding: 0 8px; min-width: 0; }
.d9-page .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
.d9-page .col-sm-12, .d9-page .col-xs-12 { flex: 0 0 100%; max-width: 100%; }
.d9-page .col-xs-1 { flex: 0 0 32px; max-width: 32px; }
.d9-page .col-xs-11 { flex: 1; }
@media (max-width: 640px) { .d9-page .col-sm-6 { flex: 0 0 100%; max-width: 100%; } }
.d9-page h1 { font-weight: 750; font-size: 24px; letter-spacing: -.02em; margin: 0 0 10px; }
.d9-page h5 { font-size: 14px; margin: 0 0 10px; }
.d9-page h5 a { color: var(--brand); text-decoration: none; font-weight: 600; }
.d9-page label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 0 0 4px; }
.d9-page .form-group { margin-bottom: 4px; }
.d9-page .form-control {
    width: 100%; height: 44px; padding: 0 14px; font: inherit; color: var(--ink);
    background: var(--field); border: 1px solid var(--field-line); border-radius: var(--r-md);
}
.d9-page .form-control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
.d9-page .height-30 { min-height: 18px; }
.d9-page .color-red { color: var(--bad); font-size: 12px; }
.d9-page sup { color: var(--muted); font-size: 12px; }
.d9-page input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); margin-top: 3px; }
.d9-page .btn {
    display: inline-block; padding: 12px 22px; border-radius: var(--r-md); font-weight: 700;
    font-size: 14px; text-decoration: none; cursor: pointer; border: 1px solid var(--hairline-2);
    background: var(--surface); color: var(--ink); text-transform: none; line-height: 1.2;
}
.d9-page .btn.btn-red, .d9-page .btn-red { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.d9-page .btn:hover { filter: brightness(1.04); }
.d9-page .terms { color: var(--brand); }
/* legacy content includes (terms, privacy, previous orders) */
.d9-page p, .d9-page li { font-family: var(--sans) !important; font-size: 14px !important; color: var(--ink-2); line-height: 1.6; }
.d9-page h2, .d9-page h3 { font-family: var(--sans); letter-spacing: -.01em; }
.d9-page table { border-collapse: collapse; width: 100%; font-size: 14px; }
.d9-page table td, .d9-page table th { padding: 8px 10px; border-bottom: 1px solid var(--hairline); text-align: left; }
.d9-page table th { font-weight: 700; color: var(--ink-2); font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }

/* shared form primitives (used by account page + checkout) */
.co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.co-fields .full { grid-column: 1 / -1; }
@media (max-width: 520px){ .co-fields { grid-template-columns: 1fr; } }
.co-back {
    display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); text-decoration: none;
    font-weight: 600; font-size: 14px; padding: 7px 13px; border-radius: var(--r-pill);
    border: 1px solid var(--hairline); background: var(--surface); cursor: pointer; font-family: inherit;
}
.co-back:hover { color: var(--ink); border-color: var(--hairline-2); }
.co-optin { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.co-optin input { margin-top: 1px; width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.co-optin a { color: var(--brand); }

/* ---- Footer --------------------------------------------------------------- */
.d9-footer { border-top: 1px solid var(--hairline); background: var(--surface-2); }
.d9-footer-in {
    max-width: var(--maxw); margin: 0 auto; padding: 26px 20px;
    display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between;
    color: var(--muted); font-size: 13px;
}
.d9-footer-in a { color: var(--ink-2); text-decoration: none; }

/* the popup tpl hardcodes color:#fff on Cancel (expects a dark button) — invisible on our light footer */
#dialogActionBar #cancelmenuItemBtn { color: var(--ink) !important; }

/* ---- d9 customizer (new item dialog / bottom sheet) ----------------------- */
body.d9c-lock { overflow: hidden; }
#d9cust {
    border: 0; padding: 0; background: transparent; max-width: none; max-height: none;
    /* svh (small viewport) = viewport with iOS Safari toolbars VISIBLE — the only
       always-safe height for a bottom-anchored sheet; 100vh (and dvh in the
       <dialog> top layer, per WebKit bug) counts the area BEHIND the bottom
       toolbar, cropping the Add-to-cart footer. vh kept as old-browser fallback. */
    width: 100vw; height: 100vh; height: 100svh; display: grid; place-items: center;
}
#d9cust:not([open]) { display: none; }
#d9cust::backdrop { background: rgba(0,0,0,.45); }
.d9c-shell {
    position: relative; width: min(860px, 94vw); max-height: 88vh; max-height: 88svh;
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; overflow: hidden;
}
.d9c-x {
    position: absolute; top: 12px; left: 12px; z-index: 5; width: 44px; height: 44px;
    border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink);
    display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-md);
}
.d9c-x:hover { background: var(--surface-2); }
.d9c-shell.noimg .d9c-body { padding-top: 64px; }  /* keep the title clear of the floating X */
.d9c-img { flex: none; height: 190px; background: var(--surface-2); }
.d9c-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d9c-body { overflow-y: auto; padding: 20px 22px 8px; overscroll-behavior: contain; }
.d9c-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-right: 8px; }
#d9cust .d9c-img + .d9c-body .d9c-head { padding-right: 0; }
.d9c-head h2 { font-weight: 750; font-size: 20px; letter-spacing: -.015em; margin: 0; }
.d9c-price { font-weight: 700; font-size: 17px; white-space: nowrap; }
.d9c-descr { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin: 6px 0 0; }
.d9c-group { margin-top: 20px; }
.d9c-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.d9c-gh h3 { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; margin: 0; }
.d9c-req {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--brand); background: var(--brand-tint); border-radius: var(--r-pill); padding: 3px 9px;
}
.d9c-hint { font-size: 12px; color: var(--muted); }
.d9c-opts { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.d9c-opt {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
    border-bottom: 1px solid var(--hairline); font-size: 14px; background: var(--surface);
}
.d9c-opt:last-child { border-bottom: 0; }
.d9c-opt:hover { background: var(--surface-2); }
.d9c-opt input[type=radio], .d9c-opt input[type=checkbox] {
    flex: none; width: 18px; height: 18px; accent-color: var(--brand); margin: 0; cursor: pointer;
}
.d9c-optname { flex: 1; min-width: 0; }
.d9c-optcost { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.d9c-opt-qty { cursor: default; }
/* topping rows: placement segmented control + Extra chip.
   Tighter vertical rhythm than plain option rows so the dense 2-col
   topping grid reads calmly (Direction A). */
.d9c-top { cursor: default; gap: 9px; padding-top: 9px; padding-bottom: 9px; align-items: center; }
.d9c-top .d9c-optname { font-size: 13.5px; }
/* dense two-column option grid (toppings) */
.d9c-grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.d9c-grid2 .d9c-opt { border-bottom: 1px solid var(--hairline); }
.d9c-grid2 .d9c-opt:nth-child(odd) { border-right: 1px solid var(--hairline); }
.d9c-grid2 .d9c-opt:nth-last-child(1), .d9c-grid2 .d9c-opt:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
@media (max-width: 720px) {
    .d9c-grid2 { grid-template-columns: 1fr; }
    .d9c-grid2 .d9c-opt { border-right: 0 !important; }
    .d9c-grid2 .d9c-opt:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--hairline); }
}
/* desktop cart pulse (header Cart button feedback) */
#cart9host.pulse .d9-cart { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent); }
#cart9host .d9-cart { transition: box-shadow .25s ease; }

/* collapsible topping sections */
.d9c-ghbtn {
    width: 100%; border: 0; background: var(--surface-2); cursor: pointer;
    border-radius: var(--r-md); padding: 11px 13px; font: inherit; text-align: left;
    display: flex; align-items: center; gap: 10px; margin-bottom: 0;
}
.d9c-ghbtn:hover { background: var(--hairline); }
.d9c-ghbtn h3 { flex: 1; }
.d9c-count {
    background: var(--brand); color: var(--brand-ink); border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 700; padding: 2px 8px;
}
.d9c-chev { transition: transform .15s; color: var(--ink-2); }
.d9c-topgroup .d9c-opts { margin-top: 8px; }
.d9c-topgroup.collapsed .d9c-opts { display: none; }
.d9c-topgroup.collapsed .d9c-chev { transform: rotate(-90deg); }
/* size pills */
.d9c-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.d9c-size {
    border: 1px solid var(--field-line); border-radius: var(--r-md); background: var(--field);
    padding: 10px 12px; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.d9c-size input { position: absolute; opacity: 0; pointer-events: none; }
.d9c-size .d9c-sizename { font-weight: 650; font-size: 14px; }
.d9c-size .d9c-sizecost { color: var(--muted); font-size: 13px; font-weight: 600; }
.d9c-size.on { border-color: var(--brand); background: var(--brand-tint); }
.d9c-size.on .d9c-sizename, .d9c-size.on .d9c-sizecost { color: var(--brand); }
.d9c-select { margin-top: 2px; }
.d9c-seg3 { display: inline-flex; flex: none; border: 1px solid var(--field-line); border-radius: var(--r-pill); overflow: hidden; }
.d9c-seg3 button {
    border: 0; background: var(--surface); color: var(--ink-2); cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 8px; min-width: 34px;
    display: inline-grid; place-items: center;
}
.d9c-seg3 button svg { width: 17px; height: 17px; }
.d9c-seg3 button svg { display: block; opacity: .75; }
.d9c-seg3 button.on svg { opacity: 1; }
.d9c-seg3 button + button { border-left: 1px solid var(--field-line); }
.d9c-seg3 button:hover { background: var(--surface-2); }
.d9c-seg3 button.on { background: var(--brand); color: var(--brand-ink); }
.d9c-extra {
    flex: none; border: 1px solid var(--field-line); background: var(--surface); color: var(--ink-2);
    border-radius: var(--r-pill); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 11px; cursor: pointer;
}
.d9c-extra:disabled { opacity: .4; cursor: default; }
.d9c-extra.on { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 700; }
/* included/default toppings: a "No" (remove) button in the seg + an Included tag */
.d9c-seg3 .d9c-none { min-width: 34px; font-size: 11.5px; font-weight: 650; }
.d9c-seg3 .d9c-none.on { background: var(--bad); color: #fff; }
.d9c-incl-tag {
    font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--brand); background: var(--brand-tint); border-radius: var(--r-pill);
    padding: 1px 7px; margin-left: 6px; white-space: nowrap;
}
@media (max-width: 560px) {
    /* single-line topping rows: name leads, placement seg + Extra sit right
       (iOS convention: label left, control right). Extra chip only appears
       once a placement is chosen — a disabled pill on every row is noise. */
    .d9c-top { flex-wrap: nowrap; gap: 8px; }
    .d9c-top .d9c-optname { order: -1; }
    .d9c-top .d9c-extra:disabled { display: none; }
    .d9c-seg3 button { min-width: 30px; padding: 6px 7px; }
}
.d9c-input {
    width: 100%; height: 44px; padding: 0 14px; font: inherit; color: var(--ink);
    background: var(--field); border: 1px solid var(--field-line); border-radius: var(--r-md);
}
.d9c-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
textarea.d9c-notes { min-height: 64px; padding: 10px 14px; resize: vertical; }
.d9c-foot {
    flex: none; display: flex; gap: 12px; align-items: center; padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--hairline); background: var(--surface);
}
.d9c-mainqty { height: 44px !important; }
.d9c-mainqty button { width: 40px !important; height: 42px !important; font-size: 18px !important; }
.d9c-mainqty span { min-width: 26px !important; font-size: 15px !important; }
.d9c-add {
    flex: 1; height: 46px; padding: 0 18px; background: var(--brand); color: var(--brand-ink);
    border: 0; border-radius: var(--r-md); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.d9c-add:hover { filter: brightness(1.06); }
.d9c-add:disabled { opacity: .6; cursor: default; }
.d9c-cancel {
    flex: none; height: 46px; padding: 0 18px; background: var(--surface-2); color: var(--ink);
    border: 1px solid var(--hairline-2); border-radius: var(--r-md); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
}
.d9c-cancel:hover { background: var(--surface); }
/* Keep the "Add to cart" label + price on one line each — they were wrapping to
   multiple lines and overflowing the fixed-height button on narrow footers. */
.d9c-add > span { white-space: nowrap; }
.d9c-add > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
    #d9cust { place-items: end center; }
    .d9c-shell {
        width: 100vw; max-height: 92vh; max-height: 92svh; border-radius: var(--r-lg) var(--r-lg) 0 0;
        animation: d9c-up .22s ease;
    }
    .d9c-img { height: 160px; }
    .d9c-add { padding: 0 14px; gap: 8px; }
    .d9c-cancel { padding: 0 14px; }
}
@keyframes d9c-up { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }

/* =====================================================================
   Ported blocks from default8.css below (order-start dialog, toast,
   item dialog / customizer matrix, search overlay). They consume the
   --theme-* / --main-color aliases defined above.
   ===================================================================== */
/* ========== ORDER START DIALOG ========== */
#orderStartDialog {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 100vw;
    max-height: 100vh;
    /* Center the dialog */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}
#orderStartDialog[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}
#orderStartDialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#orderStartDialog .order-start-shell {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    width: min(600px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    max-height: calc(100svh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Clip children to rounded corners */
}
#orderStartDialog .order-start-header {
    flex-shrink: 0;
    z-index: 1;
    background: #fff;
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 12px;
}
#orderStartDialog .order-start-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    flex: 1 1 auto;
    color: #111;
}
#orderStartDialog #orderStartCloseBtn {
    flex: none;
    border: 1px solid #d6d6d6;
    background: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    color: #333;
    padding: 0 14px;
    min-width: 44px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    transition: background 0.15s;
}
#orderStartDialog #orderStartCloseBtn svg {
    width: 14px;
    height: 14px;
}
#orderStartDialog #orderStartCloseBtn:hover {
    background: #F1F0F0;
}
#orderStartDialog .order-start-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px;
    flex: 1 1 auto;
    min-height: 0; /* Critical for flex scroll */
    background: #fff;
}
#orderStartDialog .order-start-footer {
    flex-shrink: 0;
    z-index: 1;
    background: #fff;
    padding: 12px 20px;
    border-top: 1px solid #eee;
}
#orderStartDialog .field {
    margin-bottom: 12px;
}
#orderStartDialog .field label,
#orderStartDialog .field > div:first-child {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}
/* Button Groups */
#orderStartDialog .btn-group {
    display: flex;
    gap: 10px;
}
/* Order Type Buttons */
#orderStartDialog .order-type-btn,
#orderStartDialog .schedule-btn {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 12px;
    border: 2px solid #F1F0F0;
    border-radius: 10px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
#orderStartDialog .order-type-btn svg,
#orderStartDialog .schedule-btn svg {
    flex-shrink: 0;
}
#orderStartDialog .order-type-btn:hover,
#orderStartDialog .schedule-btn:hover {
    border-color: #9ca3af;
    background: #F1F0F0;
}
#orderStartDialog .order-type-btn.selected,
#orderStartDialog .schedule-btn.selected {
    border-color: var(--theme-primary, #2563eb);
    background: rgba(37, 99, 235, 0.05);
    color: var(--theme-primary, #2563eb);
}
#orderStartDialog .order-type-btn.selected svg,
#orderStartDialog .schedule-btn.selected svg {
    stroke: var(--theme-primary, #2563eb);
}
/* Submit Button */
#orderStartDialog #submitOrderStart {
    width: 100%;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    background: var(--theme-primary, #2563eb);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}
#orderStartDialog #submitOrderStart:hover {
    opacity: 0.9;
}
#orderStartDialog #submitOrderStart:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Schedule Fields */
#orderStartDialog #scheduleFields {
    padding: 12px;
    background: #F1F0F0;
    border-radius: 10px;
    margin-bottom: 4px;
}
#orderStartDialog #scheduleFields .field-row .field {
    margin-bottom: 0;
}
#orderStartDialog #scheduleFields select {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
}
/* Delivery Fields */
#orderStartDialog #deliveryFields {
    background: #fafafa;
    border-radius: 12px;
    padding: 12px;
    margin-top: 0;
}
#orderStartDialog #deliveryFields input[type="text"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
}
#orderStartDialog #deliveryFields .field:last-child,
#orderStartDialog #deliveryFields .field-row:last-child .field {
    margin-bottom: 0;
}
#orderStartDialog #deliveryFields input[type="text"]:focus {
    outline: none;
    border-color: var(--theme-primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
#orderStartDialog #startDeliveryError {
    color: #dc2626;
    margin: 0;
    font-size: 14px;
}
#orderStartDialog #startDeliveryError:not(:empty) {
    margin-bottom: 8px;
}

/* Delivery section header */
#orderStartDialog .delivery-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
    color: #374151;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F1F0F0;
}
#orderStartDialog .delivery-section-header svg {
    stroke: var(--theme-primary, #2563eb);
    flex-shrink: 0;
}

/* Collapsible section styles */
#orderStartDialog .section-summary {
    display: none;
    padding: 10px 16px;
    background: #F1F0F0;
    border-radius: 10px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}
#orderStartDialog .section-summary:hover {
    background: #F1F0F0;
}
#orderStartDialog .section-summary.visible {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#orderStartDialog .section-summary .summary-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: #374151;
}
#orderStartDialog .section-summary .summary-text svg {
    stroke: #6b7280;
    flex-shrink: 0;
}
#orderStartDialog .section-summary .edit-link {
    color: var(--theme-primary, #2563eb);
    font-size: 13px;
    font-weight: 500;
}
#orderStartDialog .section-content {
    transition: all 0.2s ease;
}
#orderStartDialog .section-content.collapsed {
    display: none;
}

/* Two column layout for smaller fields on desktop */
#orderStartDialog .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (max-width: 540px) {
    #orderStartDialog .field-row {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    #orderStartDialog .field-row .field {
        margin-bottom: 0;
    }
}

/* Mobile: centered modal card that hugs its content (was a full-screen takeover
   — looked tacky for the short order-start content). Same centered-modal shape
   as desktop, just near-full-width with a small gutter; caps at 100svh-24px and
   scrolls only if the content overflows (e.g. schedule/delivery fields open). */
@media (max-width: 540px) {
    #orderStartDialog {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: calc(100% - 24px);
        height: auto;
        max-width: 100%;
        max-height: calc(100svh - 24px);
        transform: translate(-50%, -50%);
        margin: 0;
    }
    #orderStartDialog[open] {
        align-items: center;
    }
    #orderStartDialog .order-start-shell {
        width: 100%;
        height: auto;
        max-height: calc(100svh - 24px);
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    #orderStartDialog .order-start-header {
        flex-shrink: 0;
    }
    #orderStartDialog .order-start-footer {
        flex-shrink: 0;
        position: relative;
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }
    #orderStartDialog .order-start-body {
        padding: 16px;
        flex: 0 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0; /* Important for flex scroll */
        padding-bottom: 20px;
    }
    #orderStartDialog .order-type-btn {
        padding: 14px 10px;
    }
    /* Compact delivery fields on mobile */
    #orderStartDialog #deliveryFields {
        padding: 12px;
        margin-top: 4px;
    }
    #orderStartDialog .delivery-section-header {
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    #orderStartDialog .field {
        margin-bottom: 14px;
    }
}

/* ========== TOAST NOTIFICATIONS ========== */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    /* brand-agnostic: the theme aliases resolve to ink-on-brand here, which is
       illegible on dark brand colors — neutral dark pill with white text instead */
    background: #1f2937;
    color: #fff;
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 10000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}
.toast-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.toast-notification .toast-icon {
    width: 20px;
    height: 20px;
    background: var(--good);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

/* Hide the old cart message banner */
#infoDiv {
    display: none !important;
}

/* ========== MODAL STYLES ========== */
.modal-heading {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    padding: 20px 24px 0;
    border-bottom: 1px solid #eee;
    color: #111;
}
.modal-heading .modal-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #111;
}
.modal-heading .modal-price {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
}
.modal-heading hr {
    margin: 8px 0 0;
}
.modal-subline {
    display: block;
    padding: 0 24px;
    color: #555;
    font-size: 14px;
}

#itemDialog .modal-body {
    overflow-y: auto;
    max-height: 90vh;
    -webkit-overflow-scrolling: touch;
    padding: 0 24px;
}

#itemDialog[open] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1060px;
    width: calc(100vw - 4rem);
    max-height: 90vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

#itemDialog::backdrop {
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#orderStartDialog[open] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 820px;
    width: calc(100vw - 4rem);
    max-height: 90vh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
#orderStartDialog::backdrop {
    background: rgba(0, 0, 0, .55);
}

/* Autocomplete dropdown is appended to body, so z-index handles visibility */
gmpx-place-autocomplete,
gmpx-place-autocomplete-field,
.pac-container { z-index: 2147483646 !important; }

#itemDialog .modal-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .3);
    max-height: 90vh;
}

/* Close button */
.item-dialog-close {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 20;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, .06);
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    color: #555;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.item-dialog-close:hover {
    background: rgba(0, 0, 0, .12);
    color: #222;
}

#itemDialog .modal-body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

#itemDialog .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: #fff;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #eee;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
    box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, .12);
}

#dialogActionBar .btn {
    appearance: none;
    border-radius: 25px;
    border: 1px solid #ddd;
    padding: 12px 20px;
    cursor: pointer;
    font-weight: 500;
}

#dialogActionBar .btn-primary {
    border-color: transparent;
    background: var(--main-color, #D4AF37);
    color: #000;
}

/* ---- Popup interior polish (match default5 clean flat look) ---- */

/* General popup typography */
#itemDialog .modal-body {
    font-size: 14px;
    line-height: 1.5;
}

/* Select/dropdown styling */
#itemDialog select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    font-size: 14px;
    color: #333;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
#itemDialog select:focus {
    outline: none;
    border-color: #888;
}

/* Section spacing — generous padding so content isn't flush against edges */
#itemDialog .pizzaTopings {
    padding: 16px 20px !important;
    border-bottom: 1px solid #eee;
}
#itemDialog .choiceDiv {
    padding: 16px 20px !important;
}
#itemDialog .form-group {
    margin-bottom: 6px !important;
}

/* "Choose Your Size" section — padding + separator */
#itemDialog .form-group:has([name="pizzaTypeGrp"]) {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
}

/* Radio/checkbox alignment — vertically center with label text */
#itemDialog .radioOption {
    font-size: 14px;
    vertical-align: middle;
}
#itemDialog input[type="radio"],
#itemDialog input[type="checkbox"] {
    margin-right: 4px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* Section heading refinement — use restaurant color for labels */
#itemDialog .font-size-17 label b,
#itemDialog .choiceDiv label b {
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color, #333);
}
#itemDialog .bold,
#itemDialog strong {
    font-size: 15px;
    font-weight: 600;
}

/* Accordion (customize) section — flat with border, no rounded corners */
#itemDialog .accordion1 {
    border: 1px solid #ddd;
    padding: 16px 20px;
    margin-top: 4px;
}
#itemDialog .accordion1 h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--main-color, #333);
}
#itemDialog .accordinCustomizeDiv {
    padding: 14px 16px;
}

/* Accordion (toppings) — flat full-width headers like default5 */
#itemDialog .accordion2 {
    margin-top: 4px;
}
#itemDialog .accordion2 .ui-accordion-header {
    background: #F1F0F0;
    border: 1px solid #ddd;
    border-radius: 0;
    padding: 10px 14px;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #333;
}
/* Force accordion arrow/icon to be dark and visible */
#itemDialog .accordion2 .ui-accordion-header .toggle-plus {
    float: right;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #333 !important;
}
#itemDialog .accordion2 .ui-accordion-header strong {
    color: #333;
}
#itemDialog .accordion2 .ui-accordion-header .ui-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23333'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: center;
    background-size: 16px;
}
#itemDialog .accordinToppingsDiv {
    padding: 12px 16px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

/* Other Choices / Extra sections — flat, no box */
#itemDialog .OtherChoicesDiv {
    padding: 16px 20px;
    margin-top: 10px;
}
#itemDialog .ExtraChoicesCntr {
    margin-top: 16px;
    padding: 16px 20px;
}
#itemDialog .OtherChoicesDiv .form-group {
    margin-bottom: 4px !important;
}

/* Special Requests textarea */
#itemDialog textarea.form-control {
    border: 1px solid #ccc;
    font-size: 14px;
    padding: 10px 12px;
}

/* ===================================================================
   Modifier matrix cleanup (2026-06-26) — default8-scoped (#itemDialog),
   CSS only, no shared .tpl edits. Stage 1: tidy the topping/customize
   ROWS (.accordinContent in both accordion1 customize + accordion2
   toppings). Each row becomes a clean flex row: controls lead, name
   fills, the per-row remove (red X gif) is pushed right and stays subtle
   until the row is hovered. Keeps the two-up col-md-6 column layout.
   =================================================================== */
#itemDialog .accordinContentDiv .accordinContent {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin: 0 0 1px 0;
    border-radius: 6px;
    min-height: 36px;
    /* keep the space-efficient two-up column layout (col-md-6) */
}
#itemDialog .accordinContentDiv .accordinContent:hover {
    background: #f6f6f7;
}
/* Row order: Left ½ · Whole · Right ½ · [None] · Extra · ✗clear · Name.
   Whole is centered (Pizza Hut/Domino's); Extra keeps its column under the
   "Extra" header; the ✗ sits AFTER Extra (not on top of it) and before the
   name. Scoped per section because Customize has an extra "None" radio. */
/* --- toppings: 3 placement radios --- */
#itemDialog .accordinToppingsDiv .accordinContent > input[type="radio"]:nth-of-type(2) { order: 1; } /* left  */
#itemDialog .accordinToppingsDiv .accordinContent > input[type="radio"]:nth-of-type(1) { order: 2; } /* whole */
#itemDialog .accordinToppingsDiv .accordinContent > input[type="radio"]:nth-of-type(3) { order: 3; } /* right */
#itemDialog .accordinToppingsDiv .accordinContent > input[type="checkbox"]  { order: 4; } /* Extra */
#itemDialog .accordinToppingsDiv .accordinContent .clearRadioOptions        { order: 5; } /* ✗     */
/* --- customize: 4 radios incl. None --- */
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="radio"]:nth-of-type(2) { order: 1; } /* left  */
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="radio"]:nth-of-type(1) { order: 2; } /* whole */
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="radio"]:nth-of-type(3) { order: 3; } /* right */
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="radio"]:nth-of-type(4) { order: 4; } /* None  */
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="checkbox"]  { order: 5; } /* Extra */
#itemDialog .accordinCustomizeDiv .accordinContent .clearRadioOptions        { order: 6; } /* ✗     */
/* name always last */
#itemDialog .accordinContent .accordianLbl1,
#itemDialog .accordinContent .accordianToma {
    order: 10;
    flex: 0 1 auto;
    margin-left: 8px !important;
    font-size: 14px;
    line-height: 1.25;
}
/* Customize section: drop the redundant ◐●◑ glyph headers (the skinned icons
   are self-explanatory); the empty cells stay as spacers so None/Extra still
   line up over their columns. */
#itemDialog .accordinCustomizeDiv .accordianLbl img { display: none !important; }
/* toppings: the ✗ is replaced by tap-to-deselect (absence = none, via JS) */
#itemDialog .accordinToppingsDiv .clearRadioOptions {
    display: none !important;
}
/* (customize keeps its explicit None radio; its ✗ only shows when selected) */
#itemDialog .accordinCustomizeDiv .accordinContent:not(:has(input:checked)) .clearRadioOptions {
    display: none;
}
/* "Extra" as a labeled pill (Pizza Hut style). The raw checkbox is hidden but
   still carries state + submits; the pill is the clickable UI. It only appears
   once a placement is chosen (checkbox enabled): outline = off, filled = on. */
#itemDialog .accordinContent > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}
#itemDialog .d8-extra-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 9px;
    margin-left: 2px;
    border: 1px solid #c4c4c4;
    border-radius: 11px;
    color: #8a8a8a;
    background: #fff;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    flex: 0 0 auto;
}
#itemDialog .accordinToppingsDiv .d8-extra-pill { order: 4; }
#itemDialog .accordinCustomizeDiv .d8-extra-pill { order: 5; }
#itemDialog .accordinContent > input[type="checkbox"]:checked + .d8-extra-pill {
    background: var(--main-color, #c0392b);
    border-color: var(--main-color, #c0392b);
    color: #fff;
}
/* hidden until the topping is actually on the pizza (placement selected) */
#itemDialog .accordinContent > input[type="checkbox"]:disabled + .d8-extra-pill {
    display: none;
}
/* the "Extra" column header is now redundant — the pill self-labels */
#itemDialog .accordinToppingsDiv > .row > .col-lg-12:not(.accordinContentDiv) .accordianLbl {
    display: none !important;
}

/* --- Customize (default ingredients): drop its header; "None" → red ✗ --- */
#itemDialog .accordinCustomizeDiv .accordianLbl {
    display: none !important;   /* None/Extra/glyph header row (icons + pill self-label) */
}
/* hide the raw 4th "None" radio; it's shown as the red ✗ below (JS-wired to select it) */
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="radio"]:nth-of-type(4) {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    pointer-events: none;
}
#itemDialog .d8-none-x {
    order: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 4px;
    border: 1px solid #e2b6b1;
    border-radius: 50%;
    color: #c0392b;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
}
#itemDialog .d8-none-x::before {
    content: "\00D7";   /* × multiplication sign — in every font, encoding-safe */
    font-size: 14px;
    font-weight: 700;
}
#itemDialog .accordinCustomizeDiv .accordinContent > input[type="radio"]:nth-of-type(4):checked + .d8-none-x {
    background: #c0392b;
    border-color: #c0392b;
    color: #fff;
}
/* radio/checkbox controls (order handled explicitly above) */
#itemDialog .accordinContent input[type="radio"],
#itemDialog .accordinContent input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0 2px;
}
/* per-row remove (btn_delete.gif): grey + faint until row hover */
#itemDialog .accordinContent .clearRadioOptions {
    flex: 0 0 auto;
    margin: 0 2px;
}
#itemDialog .accordinContent .clearRadioOptions img {
    height: 15px !important;
    width: 15px !important;
    opacity: 0.28;
    filter: grayscale(1);
    transition: opacity .12s ease, filter .12s ease;
}
#itemDialog .accordinContent:hover .clearRadioOptions img {
    opacity: 0.9;
    filter: none;
}

/* ---- Stage 2: legible half-pizza column headers (toppings section) ----
   Replace the cryptic pizza-glyph icons with text (WHOLE / LEFT ½ / RIGHT ½).
   The header cells (.accordianLb2 with <img>) live in the non-content header
   column; give them + the row controls matching fixed widths + a shared left
   start so the labels line up over their radio columns. */
#itemDialog .accordinContentDiv .accordinContent {
    gap: 0;
    padding-left: 16px;
}
#itemDialog .accordinContent > input[type="radio"],
#itemDialog .accordinContent > input[type="checkbox"] {
    width: 18px;
    margin: 0 22px 0 0;   /* 40px column pitch → lines up under the headers */
}
/* ---- placement radios skinned as ◐ ● ◑ pizza-segment icons ----
   position 1 = whole, 2 = left half, 3 = right half (robust by order, not value).
   The Extra control is a <input type=checkbox> so it stays a distinct square. */
#itemDialog .accordinContent > input[type="radio"].accordinRadioOptions {
    -webkit-appearance: none;
    appearance: none;
    width: 18px !important;
    height: 18px;
    border: 1.5px solid #b9b9b9;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
#itemDialog .accordinContent > input[type="radio"]:nth-of-type(2) {
    background: linear-gradient(90deg, #c9c9c9 0 50%, #fff 50% 100%);
}
#itemDialog .accordinContent > input[type="radio"]:nth-of-type(3) {
    background: linear-gradient(90deg, #fff 0 50%, #c9c9c9 50% 100%);
}
#itemDialog .accordinContent > input[type="radio"]:nth-of-type(1):checked {
    background: var(--main-color, #c0392b);
    border-color: var(--main-color, #c0392b);
}
#itemDialog .accordinContent > input[type="radio"]:nth-of-type(2):checked {
    background: linear-gradient(90deg, var(--main-color, #c0392b) 0 50%, #fff 50% 100%);
    border-color: var(--main-color, #c0392b);
}
#itemDialog .accordinContent > input[type="radio"]:nth-of-type(3):checked {
    background: linear-gradient(90deg, #fff 0 50%, var(--main-color, #c0392b) 50% 100%);
    border-color: var(--main-color, #c0392b);
}
/* header column: align its left start with the rows */
#itemDialog .accordinToppingsDiv > .row > .col-lg-12:not(.accordinContentDiv) [class*="col-md-6"] {
    padding-left: 16px !important;
}
/* hide glyph imgs in the HEADER cells (not the row remove-✗) */
#itemDialog .accordinToppingsDiv > .row > .col-lg-12:not(.accordinContentDiv) .accordianLb2 img {
    display: none !important;
}
/* turn each header glyph cell into a small text column label */
#itemDialog .accordinToppingsDiv > .row > .col-lg-12:not(.accordinContentDiv) .accordianLb2 {
    width: 40px !important;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block;
    text-align: left;
    vertical-align: bottom;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0;
    color: #9a9a9a;
    white-space: nowrap;
    overflow: visible;
}
/* (placement column labels dropped — the ◐ ● ◑ icons are self-explanatory;
   the empty header cells above just act as spacers so "Extra" lines up.) */
/* the existing "Extra" text header — match the new label style */
#itemDialog .accordinToppingsDiv > .row > .col-lg-12:not(.accordinContentDiv) .accordianLbl {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #9a9a9a !important;
    vertical-align: bottom;
}

@media (max-width: 767px) {
    #itemDialog[open] {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 100%;
        max-width: none;
        max-height: none;
    }

    #itemDialog .modal-shell {
        height: 100%;
        display: flex;
        flex-direction: column;
        border-radius: 0; /* Full-screen on mobile, no rounding */
    }

    .modal-heading {
        padding: 16px 16px 0;
    }
    #itemDialog .modal-body {
        padding: 0 16px;
    }
    .modal-subline {
        padding: 0 16px;
    }

    #itemDialog .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #itemDialog .modal-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0;
        border-top: 1px solid #eee;
        background: #fff;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        display: flex;
        justify-content: flex-end;
        z-index: 1000;
    }
}

/* ========== SEARCH FUNCTIONALITY ========== */
/* Search Toggle Button */
.nav-search .search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.25s ease;
    margin: 0 6px;
}
.nav-search .search-toggle:hover {
    border-color: var(--theme-header-text, #D4AF37);
}
.nav-search .search-toggle svg {
    stroke: var(--theme-header-text, #D4AF37);
}

/* Search Overlay */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.search-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Search Container */
.search-container {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Search Header */
.search-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0 16px;
    transition: background 0.2s;
}
.search-input-wrapper:focus-within {
    background: rgba(255,255,255,0.15);
}

.search-input-wrapper .search-icon {
    flex-shrink: 0;
    stroke: rgba(255,255,255,0.5);
    margin-right: 12px;
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 14px 0;
    font-size: 17px;
    color: #fff;
    outline: none;
}
.search-input::placeholder {
    color: rgba(255,255,255,0.5);
}

.search-clear {
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s;
}
.search-clear:hover {
    background: rgba(255,255,255,0.3);
}
.search-clear svg {
    stroke: #fff;
    width: 14px;
    height: 14px;
}

.search-close {
    background: transparent;
    border: none;
    color: var(--theme-header-text, #D4AF37);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    padding: 10px;
    white-space: nowrap;
}
.search-close:hover {
    opacity: 0.8;
}

/* Search Results */
.search-results {
    flex: 1;
    overflow-y: auto;
    padding: 20px 0;
    -webkit-overflow-scrolling: touch;
}

/* Search Hint / No Results */
.search-hint,
.search-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}
.search-hint p,
.search-no-results p {
    color: rgba(255,255,255,0.6);
    font-size: 16px;
    margin: 16px 0 0;
}
.search-no-results span {
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    margin-top: 6px;
}

/* Search Category */
.search-category {
    margin-bottom: 24px;
}
.search-category h4 {
    color: var(--theme-header-text, #D4AF37);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Search Item */
.search-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    margin: 0 -12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s;
}
.search-item:hover {
    background: rgba(255,255,255,0.08);
}
.search-item:active {
    background: rgba(255,255,255,0.12);
}

.search-item-img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,0.05);
}
.search-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-item-info {
    flex: 1;
    min-width: 0;
}

.search-item-name {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.search-item-name mark {
    background: var(--theme-header-text, #D4AF37);
    color: var(--theme-primary, #000);
    border-radius: 2px;
    padding: 0 2px;
}

.search-item-descr {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-item-price {
    color: var(--theme-header-text, #D4AF37);
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
}

/* Mobile Search Adjustments */
@media (max-width: 768px) {
    .search-container {
        max-width: 100%;
        padding: 0 16px;
    }
    .search-header {
        padding: 16px 0;
    }
    .search-input {
        font-size: 16px;
    }
    .search-item-img {
        width: 50px;
        height: 50px;
    }
    .search-item-name {
        font-size: 14px;
    }
    .search-item-descr {
        font-size: 12px;
    }
    .search-item-price {
        font-size: 14px;
    }
}

/* Mobile search button in order info bar - hidden on desktop */
.mobile-search-btn,
.mobile-search-divider {
    display: none;
}

/* Hide search in header nav on mobile - it's in order info bar */
@media (max-width: 900px) {
    .nav-search {
        display: none !important;
    }
}

/* Show mobile search button in order bar on mobile */
@media (max-width: 768px) {
    .order-info-bar {
        padding: 10px 0;
    }
    .order-info-bar .container {
        padding: 0 16px;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    /* Hide desktop-only elements on mobile */
    .desktop-only {
        display: none !important;
    }
    /* Show mobile search button */
    .mobile-search-btn {
        display: inline-flex !important;
        order: 0;
        padding: 8px 12px;
    }
    .mobile-search-btn span {
        display: none; /* Icon only on mobile to save space */
    }
    .mobile-search-divider {
        display: none !important;
    }
    /* Cart + Checkout are redundant on mobile — the sticky bottom bar already
       shows items/total/Checkout. Hide them here so the top bar stays one slim row. */
    .order-info-cart,
    .order-info-checkout {
        display: none !important;
    }
    /* Drop the Open/Closed status on mobile so search + Pickup + time fit one line
       (open/closed hours still shown on desktop and in the footer) */
    .order-info-status,
    .order-info-status + .order-info-divider {
        display: none !important;
    }
    .order-info-btn {
        padding: 8px 12px;
        font-size: 13px;
    }
}

.d9c-sub { margin: 4px 0 10px 30px; border-left: 2px solid var(--hairline-2); padding-left: 12px; }
.d9c-subgroup { margin-top: 10px; }
.d9c-subgroup .d9c-gh h3 { font-size: 13px; }