/* =====================================================================
   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: 36px; width: auto; max-width: 150px; 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; }
.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; } }
.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; } }
.d9-item {
    display: flex; gap: 14px; align-items: stretch; padding: 14px;
    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;
}
.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; }
.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: auto; padding-top: 8px; color: var(--ink-2); }
.d9-item-price .from { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.d9-thumb {
    flex: none; width: 96px; height: 96px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--hairline); position: relative; background: var(--surface-2);
    align-self: center;
}
.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: 6px; bottom: 6px; width: 30px; height: 30px; 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); }
.d9-add-plain {
    flex: none; align-self: center; 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; }

/* 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: 34px; height: 34px;
    border-radius: 50%; border: 0; 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: 54px; }  /* 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; }
/* 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; }
}
@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 {
    border: 0;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #666;
    padding: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.15s;
}
#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; }