/* catering-ui.css — Catering storefront overrides (neutral, no third-party naming) */

:root {
    --cat-accent: #825d2d;
    --cat-accent-hover: #6d4e26;
    --cat-accent-dark: #623216;
    --cat-gray-bg: #f7f4e8;
    --cat-border: #e3e0cf;
    --cat-text: #231f20;
    --cat-muted: #6e6862;
    --cat-header-h: 56px;
    --cat-event-h: 50px;
    --cat-tabs-h: 46px;
}

/* The event strip only exists on phones; without this the sticky category
   bar floats 50px below the header on tablet/desktop. */
@media (min-width: 768px) {
    :root { --cat-event-h: 0px; }
}

body {
    background: #f1f1e3;
    color: var(--cat-text);
}

/* Full-width app shell (pickup-app default had max-width 390px) */
.pickup-app {
    width: 100% !important;
    max-width: none !important;
}

/* Kill all lateral padding on the main wrapper — each section controls its own. */
.pickup-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.route-menu .pickup-main,
.route-cart .pickup-main,
.route-checkout .pickup-main,
.route-orders .pickup-main,
.route-home .pickup-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Inner sections that DO need edges get a shared horizontal padding (12px, matches topbar). */
.cat-store-info,
.cat-menu-header,
.menu-list {
    padding-left: 12px;
    padding-right: 12px;
}

.category-tabs {
    padding-left: 12px;
    padding-right: 12px;
}

/* =========================
   Header (logo + icons)
   ========================= */
.pickup-header.cat-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fffcf4;
    border-bottom: 1px solid var(--cat-border);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 0;
}

.cat-topbar {
    height: var(--cat-header-h);
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    background: #fffcf4;
}

.cat-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 0;
}

.cat-logo img {
    height: 24px;
    width: auto;
    display: block;
}

.cat-topbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

/* "Order Pickup" link in the topbar — hide on small screens so the
   topbar (logo + 3 icons + cart badge) doesn't crowd at narrow widths.
   The link still appears in the side drawer's menu for mobile users. */
@media (max-width: 720px) {
    .cat-nav-link-desktop { display: none; }
}

/* Auth CTAs — labeled Sign in / Account / Sign out (not icon-only) */
.cat-auth-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.cat-auth-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.cat-auth-btn-signin {
    background: #231f20;
    color: #fff8ed;
    border-color: #231f20;
}

.cat-auth-btn-signin:hover {
    background: #3a3435;
    border-color: #3a3435;
    color: #fff8ed;
}

.cat-auth-btn-account {
    background: #fffcf4;
    color: #231f20;
    border-color: #231f20;
}

.cat-auth-btn-account:hover {
    background: #f7f4e8;
    color: #231f20;
}

.cat-auth-btn-signout {
    background: #fffcf4;
    color: #6e6862;
    border-color: #cfcbb8;
}

.cat-auth-btn-signout:hover {
    background: #f7f4e8;
    color: #231f20;
    border-color: #9b948d;
}

.cat-auth-link {
    font-size: 13px;
    font-weight: 600;
    color: #3a3435;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0 6px;
    white-space: nowrap;
}

.cat-auth-link:hover {
    color: #231f20;
}

/* Keep the topbar compact on phones: Sign out lives in the drawer.
   Prefer the word label over the person icon so account access stays obvious. */
@media (max-width: 720px) {
    .cat-auth-link-desktop { display: none; }
    .cat-auth-btn { padding: 0 10px; font-size: 12.5px; height: 32px; }
    .cat-auth-btn-account svg { display: none; }
    .cat-topbar-actions { gap: 4px; }
}

.cat-drawer-auth {
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--cat-border);
    background: #f7f4e8;
}

.cat-drawer-auth-label {
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cat-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cat-drawer-auth-name {
    display: block;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--cat-text);
    line-height: 1.3;
}

.cat-drawer-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cat-drawer-auth-actions .cat-auth-btn {
    flex: 1 1 auto;
    min-width: 110px;
}

.cat-cartbtn .cart-badge {
    background: var(--cat-accent-dark);
}

.cat-iconbtn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--cat-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    position: relative;
}

.cat-iconbtn:hover { background: var(--cat-gray-bg); }

.cat-iconbtn img,
.cat-iconbtn svg {
    width: 22px;
    height: 22px;
    display: block;
}

.cat-cartbtn .cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--cat-accent);
    color: #fff8ed;
    font-size: 11px;
    font-weight: 700;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Event details strip — flat white, no contrasting bg (avoids edge-bleed visual) */
.cat-event-strip {
    height: var(--cat-event-h);
    padding: 0 16px;
    background: #fffcf4;
    border-top: 1px solid var(--cat-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cat-event-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.cat-event-copy strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--cat-text);
}

.cat-event-copy span {
    font-size: 12px;
    color: var(--cat-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cat-event-edit {
    appearance: none;
    background: none;
    border: none;
    font-weight: 700;
    font-size: 14px;
    color: var(--cat-text);
    text-decoration: underline;
    cursor: pointer;
    padding: 8px 4px;
}

/* =========================
   Side drawer
   ========================= */
.cat-drawer {
    position: fixed;
    inset: 0;
    z-index: 120;
}

.cat-drawer[hidden] { display: none !important; }

.cat-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(35, 31, 32, 0.45);
    opacity: 0;
    animation: catFade .18s forwards;
}

.cat-drawer-panel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: min(86vw, 340px);
    background: #fffcf4;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 14px rgba(0,0,0,.15);
    transform: translateX(-100%);
    animation: catSlideIn .22s ease forwards;
}

.cat-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--cat-border);
}

.cat-drawer-nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    flex: 1;
}

.cat-drawer-nav a {
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cat-text);
    text-decoration: none;
    border-bottom: 1px solid #f7f4e8;
}

.cat-drawer-nav a:hover { background: var(--cat-gray-bg); }

/* Help lives in the drawer on phones, styled as one more nav row. */
.cat-drawer-help {
    appearance: none;
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    padding: 14px 20px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--cat-text);
    border: 0;
    border-bottom: 1px solid #f7f4e8;
    cursor: pointer;
}

.cat-drawer-help:hover { background: var(--cat-gray-bg); }

.cat-drawer-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--cat-border);
    font-size: 12px;
    color: var(--cat-muted);
}

.cat-drawer-footer p { margin: 0; }

@keyframes catSlideIn { to { transform: translateX(0); } }
@keyframes catFade { to { opacity: 1; } }

/* =========================
   Search dropdown — compact card anchored below the search icon.
   No backdrop, single column, soft border-radius matching system style.
   ========================= */
.cat-search {
    position: fixed;
    top: calc(var(--cat-header-h) + 8px);
    right: 12px;
    width: min(380px, calc(100vw - 24px));
    max-height: min(72vh, 560px);
    z-index: 130;
    background: #fffcf4;
    border: 1px solid var(--cat-border);
    border-radius: 16px;
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.22),
                0 4px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: catSearchIn 0.18s ease;
}

@keyframes catSearchIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cat-search[hidden] { display: none !important; }

.cat-search-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cat-border);
    background: #fffcf4;
    flex-shrink: 0;
}

.cat-search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--cat-muted);
    flex-shrink: 0;
}

.cat-search-icon img,
.cat-search-icon svg {
    width: 18px;
    height: 18px;
}

.cat-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    padding: 6px 4px;
    background: transparent;
    color: var(--cat-text);
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
}

.cat-search-input::placeholder {
    color: var(--cat-muted);
}

/* Suppress the browser's native X clear button on input[type=search] —
   we render our own .cat-search-close so the duplicate X looks broken. */
.cat-search-input::-webkit-search-cancel-button,
.cat-search-input::-webkit-search-decoration,
.cat-search-input::-webkit-search-results-button,
.cat-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.cat-search-input::-ms-clear,
.cat-search-input::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

.cat-search-close {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cat-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease;
}

.cat-search-close:hover {
    background: var(--cat-gray-bg);
    color: var(--cat-text);
}

.cat-search-close img,
.cat-search-close svg {
    width: 14px;
    height: 14px;
}

.cat-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.cat-search-empty {
    color: var(--cat-muted);
    padding: 28px 16px;
    text-align: center;
    font-size: 14px;
}

.cat-search-result {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--cat-text);
    border-bottom: 1px solid #f7f4e8;
    transition: background 0.12s ease;
}

.cat-search-result:last-child { border-bottom: 0; }

.cat-search-result:hover { background: var(--cat-gray-bg); }

.cat-search-result.no-image {
    grid-template-columns: minmax(0, 1fr) auto;
}

.cat-search-result-media {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--cat-gray-bg);
}

.cat-search-result-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cat-search-result-body { min-width: 0; }

.cat-search-result-body strong {
    font-size: 14px;
    font-weight: 600;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-search-result-body span {
    font-size: 12px;
    color: var(--cat-muted);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-search-result-price {
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
    color: var(--cat-accent-dark);
}

@media (min-width: 1024px) {
    .cat-search {
        top: 72px;
        right: max(16px, calc((100% - 1360px) / 2 + 16px));
        width: 420px;
    }
}

/* =========================
   Hero + restaurant info
   ========================= */
.cat-hero {
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 260px;
    object-fit: cover;
    display: block;
}

.cat-store-info {
    padding: 16px 16px 8px;
}

.cat-store-info h1 {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 6px;
}

.cat-store-info .cat-reviews {
    font-size: 13px;
    color: var(--cat-muted);
    margin: 0 0 4px;
}

.cat-store-info .cat-reviews-star {
    color: #825d2d;
    font-size: 12px;
    margin-right: 2px;
}

.cat-store-info .cat-reviews-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cat-store-info .cat-reviews-link:hover {
    color: var(--cat-text);
}

.cat-store-info .cat-reviews strong {
    color: var(--cat-text);
    font-weight: 700;
}

.cat-store-info address {
    font-style: normal;
    font-size: 14px;
    color: var(--cat-muted);
    margin: 0;
}

/* The rating sits a notch smaller than the rest of the meta line, like the
   listing this page mirrors. */
.cat-store-info .store-hero-meta .cat-reviews { font-size: 12px; }

/* =========================
   Reviews page
   ========================= */
.reviews-page {
    padding: 16px 16px 32px;
    max-width: 720px;
}

.reviews-page-header h1 {
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--cat-text);
}

.reviews-page-summary {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--cat-muted);
}

.reviews-page-summary strong {
    color: var(--cat-text);
}

.reviews-list-title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--cat-text);
}

.reviews-page-note {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--cat-muted);
}

.reviews-empty {
    color: var(--cat-muted);
    font-size: 14px;
}

.review-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-card {
    border: 1px solid var(--cat-border);
    border-radius: 16px;
    padding: 16px;
    background: #fffcf4;
}

.review-card-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.review-card-meta {
    min-width: 0;
    flex: 1;
}

.review-card-topline,
.review-card-subline {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
}

.review-card-topline {
    margin-bottom: 2px;
}

.review-name {
    font-weight: 700;
    color: var(--cat-text);
}

.review-date,
.review-location {
    color: var(--cat-muted);
}

.review-dot {
    margin: 0 4px;
    color: #9b948d;
}

.review-stars {
    display: inline-flex;
    gap: 1px;
    vertical-align: middle;
}

.review-star {
    color: #cfcbb8;
    font-size: 13px;
    line-height: 1;
}

.review-star.is-filled {
    color: #825d2d;
}

.review-body {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--cat-text);
}

/* Menu title row + filter button */
.cat-menu-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 20px 16px 8px;
}

.cat-menu-header h2 {
    font-size: 20px;
    font-weight: 800;
    margin: 0;
}

/* ── Inline menu search ── */
.menu-inline-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    order: 3; /* own row under the title on mobile */
}

.menu-inline-search-icon {
    position: absolute;
    left: 14px;
    color: var(--cat-muted);
    pointer-events: none;
}

.menu-inline-search input {
    width: 100%;
    height: 42px;
    border: 1px solid var(--cat-border);
    border-radius: 999px;
    padding: 0 40px;
    font: inherit;
    font-size: 15px;
    background: #fffcf4;
    -webkit-appearance: none;
    appearance: none;
}

.menu-inline-search input:focus {
    outline: none;
    border-color: var(--cat-accent);
    box-shadow: 0 0 0 3px rgba(130, 93, 45, 0.35);
}

.menu-inline-search input::-webkit-search-cancel-button { display: none; }

.menu-inline-search-clear {
    position: absolute;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: #f7f4e8;
    color: var(--cat-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-search-status {
    margin: 10px 4px 2px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cat-muted);
}

.menu-no-results {
    margin: 16px 4px;
    padding: 28px 20px;
    text-align: center;
    border: 1px dashed var(--cat-border);
    border-radius: 16px;
    color: var(--cat-muted);
    font-size: 14px;
}

.menu-no-results p { margin: 0 0 6px; }
.menu-no-results p:last-child { margin-bottom: 0; }
.menu-no-results strong { color: var(--cat-text); }

.menu-no-results button {
    background: none;
    border: none;
    padding: 0;
    color: var(--cat-accent-dark);
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.menu-category-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--cat-muted);
    background: #fffcf4;
    border: 1px solid var(--cat-border);
    border-radius: 999px;
    padding: 1px 8px;
    margin-left: 4px;
    vertical-align: 2px;
}

.cat-filter-btn {
    appearance: none;
    background: #fffcf4;
    border: 1px solid var(--cat-text);
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cat-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cat-filter-btn img {
    width: 10px;
    height: 10px;
    display: block;
}

/* =========================
   Sticky category tabs
   ========================= */
.pickup-header.cat-header {
    /* overall height used as sticky offset root */
}

.category-tabs {
    position: sticky;
    top: calc(var(--cat-header-h) + var(--cat-event-h));
    z-index: 50;
    background: #fffcf4;
    border-bottom: 1px solid var(--cat-border);
    display: flex;
    gap: 18px;
    padding: 0 max(16px, env(safe-area-inset-left, 0px)) 0 max(16px, env(safe-area-inset-right, 0px));
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    height: var(--cat-tabs-h);
    align-items: flex-end;
    scroll-behavior: auto;
    scroll-padding-inline: 16px;
    touch-action: pan-x pinch-zoom;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    user-select: none;
}

.category-tabs::-webkit-scrollbar { display: none; }

.category-tabs .category-tab {
    white-space: nowrap;
    text-decoration: none;
    color: var(--cat-muted);
    font-size: 14px;
    font-weight: 600;
    position: relative;
    padding: 0 0 10px;
    flex-shrink: 0;
}

.category-tabs .category-tab:first-child {
    margin-left: 2px;
}

.category-tabs .category-tab.active {
    color: var(--cat-text);
}

.category-tabs .category-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--cat-accent);
    border-radius: 0;
}

/* =========================
   Menu list + product cards
   ========================= */
.menu-list {
    display: block;
    margin-top: 0;
    gap: 0;
    padding: 0 12px 120px;
}

.menu-list .menu-category {
    scroll-margin-top: calc(var(--cat-header-h) + var(--cat-event-h) + var(--cat-tabs-h) + 6px);
    margin-bottom: 0;
}

.menu-list .menu-category > header {
    background: #f7f4e8;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 800;
    color: var(--cat-text);
    margin: 6px 0 4px;
    border-radius: 10px;
    text-transform: none;
}

.menu-list .menu-category > header h3 {
    font-size: 14px;
    font-weight: 800;
    margin: 0;
    letter-spacing: 0.2px;
}

.menu-list .menu-category > header p { display: none; }

/* Product card (left: text, right: square image) */
.menu-list .product-card {
    display: grid;
    grid-template-columns: 1fr 110px;
    gap: 12px;
    padding: 14px 4px;
    margin-bottom: 10px;
    background: #fffcf4;
    border: 1px solid var(--cat-border);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    align-items: stretch;
    transition: box-shadow .15s ease, transform .15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.menu-list .product-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    transform: translateY(-1px);
}

/* No-image variant — single column when there's no .product-media block.
   Applies at every viewport (mobile + desktop). */
.menu-list .product-card.no-image {
    grid-template-columns: 1fr;
}

.menu-list .product-card .product-copy {
    padding-left: 10px;
}

.menu-list .product-card .product-media {
    padding-right: 10px;
}

.menu-list .product-card .product-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.menu-list .product-card .product-copy h4 {
    font-size: 16.5px;
    font-weight: 700;
    margin: 0;
    color: var(--cat-text);
    letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
    .menu-list .product-card .product-copy h4 { font-size: 18px; }
}

.menu-list .product-card .product-category-label {
    font-size: 12px;
    color: var(--cat-muted);
    font-weight: 600;
    margin: 0;
}

.menu-list .product-card .product-copy p {
    font-size: 13px;
    color: var(--cat-muted);
    line-height: 1.45;
    margin: 2px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu-list .product-card .product-price-row {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 6px;
}

.menu-list .product-card .product-price-row strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--cat-text);
    /* `.product-copy strong` (app.css) still pads and pins the price from the
       old single-column layout; both break baseline alignment with "Serves N". */
    padding-top: 0;
    margin-top: 0;
    align-self: baseline;
}

.menu-list .product-card .dietary-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.menu-list .product-card .dietary-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(130, 93, 45, 0.18);
    color: var(--cat-accent-dark);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    border: none;
}

.menu-list .product-card .dietary-badge img,
.menu-list .product-card .dietary-badge svg,
.menu-list .product-card .dietary-badge i {
    width: 12px;
    height: 12px;
}

.menu-list .product-card .product-media {
    display: flex;
    align-items: flex-start;
}

.menu-list .product-card .product-media-frame {
    width: 110px;
    height: 110px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--cat-gray-bg);
    position: relative;
    align-self: flex-start;
}

.menu-list .product-card .product-media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.menu-list .product-card .product-media-plus {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fffcf4;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.menu-list .product-card .product-media-plus img {
    width: 16px;
    height: 16px;
}

.menu-list .product-card .product-cart-controls {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 16px);
}

.menu-list .product-card.no-image .product-cart-controls {
    position: static;
    margin-bottom: 8px;
    justify-content: flex-end;
}

.menu-list .product-card .product-in-cart-badge {
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 252, 244, 0.96);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    font-size: 11px;
    font-weight: 700;
    color: var(--cat-green, #3d5a3d);
    white-space: nowrap;
}

.menu-list .product-card .product-cart-remove {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #fffcf4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    color: #510707;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.menu-list .product-card .product-cart-remove:hover {
    background: #f3e3e1;
}

/* =========================
   Floating cart strip
   ========================= */
.cat-cart-strip {
    position: fixed;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    z-index: 90;
    background: transparent;
    pointer-events: none;
}

.cat-cart-strip a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #231f20;
    color: #fff8ed !important;
    height: 52px;
    border-radius: var(--radius, 4px);
    padding: 0 22px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    pointer-events: auto;
}

.cat-cart-strip a span { color: #fff8ed; }

/* =========================
   Order details modal — lift above the sticky header/tabs
   ========================= */
.order-details-modal {
    z-index: 200 !important;
}

.order-details-modal .order-details-backdrop {
    z-index: 201;
}

.order-details-modal .order-details-sheet {
    z-index: 202;
}

.cat-cart-strip a:hover { background: #3a3435; }

/* Inside the quickview modal, hide the duplicate "back" arrow — leave only the close X */
.cat-quickview .product-hero-back {
    display: none !important;
}

/* =========================
   Product quickview modal
   ========================= */
.cat-quickview {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: #fffcf4;
    overflow-y: auto;
}

.cat-quickview[hidden] { display: none !important; }

.cat-quickview-close {
    position: fixed;
    top: 12px;
    right: 12px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fffcf4;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    z-index: 160;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cat-quickview-close img { width: 22px; height: 22px; }

.cat-quickview-loading {
    padding: 48px;
    text-align: center;
    color: var(--cat-muted);
}

/* =========================
   Global padding rescue for other routes
   ========================= */
.route-menu .pickup-main > *:not(.cat-hero):not(.menu-list):not(.category-tabs):not(.cat-store-info):not(.cat-menu-header) {
    padding-left: 16px;
    padding-right: 16px;
}

/* Add-to-cart sticky bar: full-bleed, glued to bottom via position: sticky from app.css */
.product-sticky-bar {
    width: 100% !important;
    max-width: none !important;
    padding: 12px 16px max(8px, env(safe-area-inset-bottom, 0px)) !important;
    z-index: 95 !important;
}

.product-add-btn {
    background: #231f20 !important;
    color: #fff8ed !important;
    font-weight: 700;
    border-radius: var(--radius, 4px) !important;
}

/* =========================
   Product hero action buttons — remove card bg/shadow, bigger icon
   ========================= */
.product-hero-action {
    background: transparent !important;
    box-shadow: none !important;
}

.product-hero-action img {
    width: 30px !important;
    height: 30px !important;
}

/* =========================
   Square card message — always visible
   ========================= */
.sq-card-message {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

/* =========================
   Checkout / Cart / Orders page-header left padding
   ========================= */
.route-checkout .page-header,
.route-cart .page-header,
.route-orders .page-header {
    padding-left: 12px;
    padding-right: 12px;
}

/* =========================
   Track Orders page padding
   ========================= */
.route-orders .pickup-main > *:not(.cat-hero) {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
}

/* Orders list + cards — no inner padding so card borders align with .inline-form border */
.route-orders .orders-list {
    padding-left: 0;
    padding-right: 0;
}

/* =========================
   Track order card — item detail rows
   ========================= */
.track-items-list {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f7f4e8;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.track-item-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.track-item-qty {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary, #825d2d);
    min-width: 28px;
    flex-shrink: 0;
    padding-top: 1px;
}

.track-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.track-item-name {
    font-size: 13px;
    font-weight: 600;
    color: #231f20;
    line-height: 1.3;
}

.track-item-mods {
    font-size: 12px;
    color: var(--color-muted, #9b948d);
    line-height: 1.3;
}

.track-item-notes {
    font-size: 12px;
    color: var(--color-muted, #9b948d);
    font-style: italic;
    line-height: 1.3;
}

.track-item-price {
    font-size: 13px;
    font-weight: 700;
    color: #231f20;
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 1px;
}

/* inline-form (orders search) padding */
.route-orders .inline-form {
    padding-left: 12px;
    padding-right: 12px;
}

/* Track order — product thumbnail */
.track-item-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f0e8d9;
}
.track-item-thumb-empty {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #f0e8d9;
    flex-shrink: 0;
}

/* Remove any leftover green/dark-green hardcoded colors in the product page */
.product-sheet .btn-primary,
.product-sheet .section-title h2 {
    color: var(--cat-text);
}

/* Shopping / checkout pages keep their own padding */
.route-cart main,
.route-checkout main,
.route-orders main {
    padding-left: 0;
    padding-right: 0;
}

.route-cart .pickup-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 16px !important;
}

/* Sections no longer need their own lateral padding — pickup-main already provides it */

.route-cart .cart-complete-bar {
    width: 100% !important;
    max-width: none !important;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
}

.route-cart .cart-complete-bar .btn {
    width: 100% !important;
}

.route-checkout .checkout-submit-bar {
    width: 100% !important;
    max-width: none !important;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
}

.route-checkout .checkout-submit-bar .btn {
    width: 100% !important;
}

/* =========================
   Responsive tweaks
   ========================= */
@media (min-width: 720px) {
    .cat-hero { max-height: 320px; }

    /* Search sits inline between the title and the Filter button */
    .menu-inline-search {
        flex: 0 1 340px;
        order: 0;
        margin-left: auto;
    }

    /* Tablet+ — each category becomes a 2-col grid of cards so the page is
       half as long. Header spans both columns. (Desktop ≥1024 keeps this
       and only bumps image sizes/padding.) */
    .menu-list .menu-category {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px;
        row-gap: 12px;
        margin-bottom: 20px;
    }

    .menu-list .menu-category > header {
        grid-column: 1 / -1;
    }

    .menu-list .product-card {
        grid-template-columns: minmax(0, 1fr) 120px;
        margin-bottom: 0;
        height: 100%;
    }

    .menu-list .product-card .product-media-frame { width: 120px; height: 120px; }

    .menu-list .product-card.no-image { grid-template-columns: 1fr; }
}

/* Home should not inherit negative margins from pickup defaults. */
.route-home .step1-hero-media {
    margin: 0;
    border-radius: 0;
}

.route-home .step1-intro,
.route-home .step1-cta-group,
.route-home .quick-add-home,
.route-home .gift-card-home {
    padding-left: 12px;
    padding-right: 12px;
}

.pickup-main-product {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Default (mobile-first): the desktop main wrapper is transparent on mobile. */
.pickup-main-wrap {
    display: block;
}

/* Side cart panel is desktop-only. Kept in DOM so it reflects cart state without JS. */
.side-cart {
    display: none;
}

/* =========================
   Desktop layout (≥1024px)
   ezCater-inspired: full top-bar, 2-col home/menu (content + sticky side-cart),
   single-column cart/checkout, product detail as modal overlay.
   Mobile-first base above is fully preserved — every desktop rule lives below.
   ========================= */
@media (min-width: 1024px) {
    body {
        background: #fffcf4;
    }

    .pickup-app {
        background: transparent;
        min-height: 100vh;
        padding: 0 !important;
    }

    .pickup-app-no-nav,
    .pickup-app-product {
        padding-bottom: 0;
    }

    /* Hide mobile-only floating UI on desktop */
    .bottom-nav { display: none !important; }
    .cat-cart-strip { display: none !important; }

    /* ── Header: full-width sticky, top-bar centered to 1360px (same calc as main wrap) ── */
    .pickup-header.cat-header {
        padding: 0 max(24px, calc((100% - 1360px) / 2));
        z-index: 60;
    }

    .cat-topbar {
        height: 64px;
        padding: 0;
        gap: 12px;
    }

    .cat-logo img { height: 32px; }

    /* Cat-event-strip bleeds past header lateral padding so the bottom divider
       (border-top) spans full viewport width — like cat-topbar's bottom line. */
    .cat-event-strip {
        padding: 0;
        height: 52px;
        background: #fffcf4;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: max(24px, calc((100vw - 1360px) / 2));
        padding-right: max(24px, calc((100vw - 1360px) / 2));
    }

    /* ── Main wrapper: same calc as header on the left only; right side is
       flush so the side-cart column sits against the viewport edge. ── */
    .pickup-main-wrap {
        display: block;
        max-width: none;
        margin: 0;
        padding: 0;
        padding-left: max(24px, calc((100% - 1360px) / 2));
    }

    .pickup-main-wrap:not(.has-side-cart) {
        padding-bottom: 64px;
    }

    .pickup-main-wrap.has-side-cart {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 0;
        align-items: stretch;
    }

    .pickup-main {
        padding: 0 !important;
        min-width: 0;
    }

    .pickup-main-wrap.has-side-cart > .pickup-main {
        grid-column: 1;
        padding: 0 32px 64px 0 !important;
        min-width: 0;
        width: 100%;
    }

    /* Sections inside main no longer need lateral padding override */
    .menu-list,
    .category-tabs,
    .cat-store-info,
    .cat-menu-header {
        padding-left: 0;
        padding-right: 0;
    }

    .menu-list { padding-bottom: 24px; }

    /* Hero bleeds the right padding so it meets the side-cart column border */
    .pickup-main-wrap.has-side-cart > .pickup-main > .cat-hero {
        margin-right: -32px;
    }

    .cat-hero { margin: 0; }

    .cat-store-info { padding-top: 24px; }

    .route-menu .pickup-main > *:not(.cat-hero):not(.menu-list):not(.category-tabs):not(.cat-store-info):not(.cat-menu-header) {
        padding-left: 0;
        padding-right: 0;
    }

    /* Sticky tabs sit below header+event strip */
    .category-tabs {
        position: sticky;
        top: 64px;
        z-index: 50;
    }

    /* ── Side cart: a flush right-side column, not a floating card ── */
    .side-cart {
        display: flex;
        grid-column: 2;
        position: sticky;
        top: 64px;
        flex-direction: column;
        height: calc(100vh - 64px);
        background: #fffcf4;
        border: 0;
        border-left: 1px solid var(--cat-border);
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
        margin: 0;
    }

    .side-cart-body {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 6px 20px 10px;
    }

    /* Empty state: illustration + invitation, ezCater structure */
    .sc-empty {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 40px 26px 70px;
        gap: 6px;
    }

    .sc-empty strong {
        font-size: 17px;
        font-weight: 700;
        color: var(--cat-text);
        margin-top: 10px;
    }

    .sc-empty p {
        margin: 0;
        font-size: 13.5px;
        color: var(--cat-muted);
    }

    .sc-minbar {
        margin: 12px 0 0;
        padding: 10px 12px;
        background: #f7f4e8;
        border-radius: 10px;
    }

    .sc-minbar p {
        margin: 0;
        font-size: 12.5px;
        text-align: center;
        color: var(--cat-text);
    }

    /* Item rows: qty · name (+serves/mods) · price + Remove */
    .sc-items {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .sc-item {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 15px 0;
        border-bottom: 1px solid var(--cat-border);
    }

    .sc-item:last-child { border-bottom: 0; }

    .sc-item-qty {
        font-size: 14.5px;
        font-weight: 600;
        color: var(--cat-text);
        padding-top: 1px;
    }

    .sc-item-copy { min-width: 0; }

    .sc-item-copy strong {
        display: block;
        font-size: 14.5px;
        font-weight: 700;
        color: var(--cat-text);
        line-height: 1.35;
    }

    .sc-item-copy small {
        display: block;
        margin-top: 3px;
        font-size: 12.5px;
        line-height: 1.4;
        color: var(--cat-muted);
    }

    .sc-item-side {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .sc-item-price {
        font-size: 14.5px;
        font-weight: 700;
        color: var(--cat-text);
    }

    .sc-item-remove {
        appearance: none;
        background: none;
        border: 0;
        padding: 4px 0;
        font: inherit;
        font-size: 13px;
        color: var(--cat-muted);
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
    }

    .sc-item-remove:hover { color: #510707; }

    /* "Need drinks with that?" cross-sell */
    .sc-cross {
        margin: 4px -20px 0;
        padding: 14px 20px 16px;
        background: #f7f4e8;
    }

    .sc-cross-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .sc-cross-head strong {
        font-size: 14.5px;
        font-weight: 700;
        color: var(--cat-text);
    }

    .sc-cross-head button {
        appearance: none;
        background: none;
        border: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 20px;
        line-height: 1;
        color: var(--cat-text);
        cursor: pointer;
    }

    .sc-cross-head button:hover { background: #efece0; }

    .sc-cross-card {
        display: flex;
        align-items: center;
        gap: 12px;
        background: #fffcf4;
        border: 1px solid var(--cat-border);
        border-radius: 12px;
        padding: 10px 14px 10px 10px;
        text-decoration: none;
        color: inherit;
    }

    .sc-cross-card img {
        width: 54px;
        height: 54px;
        border-radius: 8px;
        object-fit: cover;
        flex-shrink: 0;
    }

    .sc-cross-copy { flex: 1 1 auto; min-width: 0; }

    .sc-cross-copy strong {
        display: block;
        font-size: 14px;
        font-weight: 700;
        color: var(--cat-text);
    }

    .sc-cross-copy small {
        font-size: 12.5px;
        color: var(--cat-muted);
    }

    .sc-cross-view {
        font-size: 13.5px;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
        color: var(--cat-text);
    }

    /* Value lines above the footer */
    .sc-totals {
        padding: 14px 0 4px;
    }

    .sc-totals-row {
        display: flex;
        justify-content: space-between;
        font-size: 13.5px;
        color: var(--cat-text);
        padding: 3px 0;
    }

    .side-cart-footer {
        padding: 14px 20px 16px;
        border-top: 1px solid var(--cat-border);
        background: #fffcf4;
    }

    .sc-total-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    .sc-total-row span {
        font-size: 16px;
        font-weight: 700;
        color: var(--cat-text);
    }

    .sc-total-row strong {
        font-size: 17px;
        font-weight: 800;
        color: var(--cat-text);
    }

    .sc-excludes {
        margin: 2px 0 0;
        text-align: right;
        font-size: 12px;
        color: var(--cat-muted);
    }

    .sc-checkout {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 52px;
        margin-top: 12px;
        background: #231f20;
        color: #fff8ed;
        border-radius: 999px;
        font-size: 15.5px;
        font-weight: 700;
        text-decoration: none;
    }

    .sc-checkout:hover { background: #3a3435; }

    .sc-checkout-disabled {
        background: #cfcbb8;
        color: #6e6862;
        cursor: not-allowed;
    }

    .sc-checkout-disabled:hover { background: #cfcbb8; }

    .sc-note {
        margin: 10px 0 0;
        font-size: 12px;
        line-height: 1.5;
        color: var(--cat-muted);
    }

    /* ── Hero/menu tweaks ── */
    .cat-hero { max-height: 360px; aspect-ratio: 16 / 6; }
    .cat-store-info h1 { font-size: 26px; }
    .cat-menu-header h2 { font-size: 24px; }

    /* Menu list: each category becomes a 2-col grid of cards (header spans both) */
    .menu-list { display: block; }

    .menu-list .menu-category {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 12px;
        margin-bottom: 24px;
    }

    .menu-list .menu-category > header {
        grid-column: 1 / -1;
        padding: 12px 18px;
        font-size: 16px;
    }

    .menu-list .menu-category > header h3 { font-size: 16px; }

    .menu-list .product-card {
        grid-template-columns: minmax(0, 1fr) 140px;
        padding: 16px;
        margin-bottom: 0;
        height: 100%;
    }

    .menu-list .product-card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

    .menu-list .product-card .product-media-frame {
        width: 140px;
        height: 140px;
    }

    .menu-list .product-card.no-image {
        grid-template-columns: 1fr;
    }

    /* ── Cart page: centered single column ── */
    .route-cart .pickup-main-wrap {
        max-width: 880px;
        margin: 0 auto;
        padding: 24px 24px 64px;
    }

    .route-cart .pickup-main {
        padding: 0 !important;
    }

    .cart-item {
        grid-template-columns: 96px 1fr auto;
        padding: 12px;
    }

    .route-cart .cart-complete-bar {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        border-top: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        margin-top: 16px;
    }

    .route-cart .cart-complete-bar .btn { min-height: 52px; font-size: 16px; }

    /* ── Checkout page: 2-col layout (form + summary), no side-cart ── */
    .route-checkout .pickup-main-wrap {
        max-width: 1080px;
        margin: 0 auto;
        padding: 24px 24px 64px;
    }

    .route-checkout .pickup-main { padding: 0 !important; }

    .checkout-layout {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }

    .checkout-sidebar {
        position: sticky;
        top: 140px;
    }

    .route-checkout .checkout-submit-bar {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
        border-top: 0 !important;
        background: transparent !important;
        padding: 0 !important;
        margin-top: 16px;
        grid-column: 1 / -1;
    }

    .route-checkout .checkout-submit-bar .btn { min-height: 52px; font-size: 16px; }

    /* ── Orders / confirmation pages ── */
    .route-orders .pickup-main-wrap,
    .route-confirmation .pickup-main-wrap {
        max-width: 720px;
        margin: 0 auto;
        padding: 24px 24px 64px;
    }

    .route-orders .pickup-main > *:not(.cat-hero) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .route-orders .orders-list,
    .route-orders .inline-form {
        padding-left: 0;
        padding-right: 0;
    }

    /* ── Product detail as modal overlay ──
       Same treatment as pickup: header is hidden by the layout on product routes,
       body gets a dark backdrop, product-sheet becomes a centered scrollable card
       with the sticky add-to-cart bar properly anchored to its bottom. */
    body[class*="route-product-"] {
        background: rgba(35, 31, 32, 0.55);
    }

    body[class*="route-product-"] .pickup-app {
        background: transparent;
        min-height: 100vh;
        padding: 32px 16px !important;
        display: grid;
        place-items: start center;
    }

    body[class*="route-product-"] .pickup-main-wrap,
    body[class*="route-product-"] .pickup-main-product {
        max-width: 720px;
        width: 100%;
        margin: 0;
        padding: 0 !important;
        display: block;
    }

    body[class*="route-product-"] .product-sheet {
        background: #fffcf4;
        border-radius: 16px;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
        min-height: 0;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        padding-bottom: 0;
    }

    body[class*="route-product-"] .product-sheet-hero { height: 320px; }

    /* Hero action icons keep their own visual treatment — no extra bg/shadow on desktop */
    body[class*="route-product-"] .product-hero-back,
    body[class*="route-product-"] .product-hero-close {
        background: transparent !important;
        box-shadow: none !important;
        padding: 0;
        top: 16px;
        width: 32px;
        height: 32px;
    }

    body[class*="route-product-"] .product-hero-back { left: 16px; }
    body[class*="route-product-"] .product-hero-close { right: 16px; }

    body[class*="route-product-"] .product-sticky-bar {
        position: sticky !important;
        bottom: 0 !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: none !important;
    }

    body[class*="route-product-"] .product-sheet-body h1 {
        font-size: 24px;
    }

    /* The catering quickview modal already overlays — it's fine on desktop, just constrain */
    .cat-quickview {
        padding: 32px 16px;
    }

    /* ── Order details modal: center as proper dialog (mobile uses anchored sheet) ── */
    .order-details-backdrop {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    .order-details-sheet {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        width: min(560px, 92vw) !important;
        max-height: 86vh;
        bottom: auto !important;
        border-radius: 16px;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
    }

    /* ── Catering side drawer: less needed on desktop but keep functional. ── */
    .cat-drawer-panel {
        width: min(360px, 28vw);
    }
}

@media (min-width: 1280px) {
    .menu-list .product-card { grid-template-columns: minmax(0, 1fr) 160px; }
    .menu-list .product-card .product-media-frame { width: 160px; height: 160px; }
}

/* No-image variant — single column when there's no .product-media block. */
.menu-list .product-card.no-image {
    grid-template-columns: 1fr;
}

/* =========================
   Modifier variant <select> — sub-size picker rendered inline next to the
   radio in modifier-option. Clicks/changes inside the select don't toggle
   the radio (stopPropagation set in the view).
   ========================= */
.modifier-variant-select {
    appearance: none;
    -webkit-appearance: none;
    margin-top: 6px;
    padding: 6px 28px 6px 10px;
    border: 1px solid var(--cat-border, #e3e0cf);
    border-radius: 6px;
    background-color: #fffcf4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236e6862' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    color: var(--cat-text, #231f20);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    max-width: 200px;
    width: fit-content;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.modifier-variant-select:hover { border-color: rgba(35, 31, 32, 0.25); }

.modifier-variant-select:focus {
    outline: none;
    border-color: var(--cat-accent-dark, #623216);
    box-shadow: 0 0 0 3px rgba(130, 93, 45, 0.35);
}

.modifier-option.has-variants .modifier-option-copy { gap: 4px; }

/* Product detail — when the product has no image registered, collapse the
   gray hero block. Both naming variants are covered: BEM (`--no-image`) used
   in catering's product-detail and the suffix variant (`-empty` /
   `.product-sheet-no-hero`) used in pickup. */
.product-sheet-hero.product-sheet-hero--no-image,
.product-sheet-hero.product-sheet-hero-empty,
.product-sheet-no-hero .product-sheet-hero {
    height: 48px;
    background: transparent;
    overflow: visible;
}

.product-sheet-no-hero .product-sheet-body {
    padding-top: 4px;
}

@media (min-width: 1024px) {
    body[class*="route-product-"] .product-sheet-hero.product-sheet-hero--no-image,
    body[class*="route-product-"] .product-sheet-hero.product-sheet-hero-empty,
    body[class*="route-product-"] .product-sheet-no-hero .product-sheet-hero {
        height: 56px;
    }
}

/* ── Legal pages (privacy policy) ───────────────────────────────────────── */
.legal-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 20px 64px;
    color: var(--cat-text);
}
.legal-page h1 {
    font-size: 28px;
    margin: 0 0 8px;
}
.legal-page .legal-meta {
    color: var(--cat-muted);
    font-size: 14px;
    margin: 0 0 32px;
}
.legal-page section {
    margin-bottom: 28px;
}
.legal-page h2 {
    font-size: 16px;
    margin: 0 0 8px;
}
.legal-page p {
    margin: 0;
    line-height: 1.65;
    color: var(--cat-muted);
}
.legal-page a {
    color: var(--cat-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Site footer ────────────────────────────────────────────────────────── */
.cat-site-footer {
    border-top: 1px solid var(--cat-border);
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 13px;
    color: var(--cat-muted);
}
.cat-site-footer p { margin: 0; }
.cat-site-footer a {
    color: var(--cat-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cat-site-footer a:hover { color: var(--cat-text); }

/* ── Product meta line (ezCater-style): label pill + dietary initials ────── */
.product-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0 4px;
}

.product-flag {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #623216;
    background: #f6ead8;
    border-radius: 999px;
    padding: 3px 11px;
    white-space: nowrap;
}

/* Dietary initial in a stroked circle: V / VG / GF. Stroke only, no fill. */
.diet-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 4px;
    border: 1.5px solid #2e7d4f;
    border-radius: 999px;
    color: #2e7d4f;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    background: transparent;
}

/* ── Store hero (ezCater-style): full-bleed banner, name + meta line below ── */
.store-hero {
    margin: 12px 12px 0;
}

.store-hero-img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
}

.cat-store-info .store-hero-name {
    font-size: 30px;
    letter-spacing: -0.01em;
    margin: 14px 0 4px;
}

.store-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 14px;
}

.store-hero-meta .cat-reviews { margin: 0; }

.store-hero-address {
    font-style: normal;
    color: var(--cat-muted, #6b6b60);
    margin: 0;
}

.store-hero-meta,
.store-hero-meta .cat-reviews,
.store-hero-address {
    font-size: 14px;
    font-weight: 400;
}

.store-hero-switch {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    color: var(--cat-text);
    text-decoration: none;
    cursor: pointer;
}

.store-hero-switch:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (min-width: 720px) {
    .store-hero { margin: 16px 24px 0; }
    .store-hero-img { height: 176px; }
}

/* Desktop: the banner spans the full content column (the main column already
   carries the page gutters), matching the ezCater store page. */
@media (min-width: 1024px) {
    .store-hero { margin: 18px 0 0; }
}

/* ── Header, ezCater structure: desktop context + responsive tiers ───────── */

.hdr-textlink {
    display: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: inherit;
    background: none;
    border: none;
    padding: 10px 6px;
    cursor: pointer;
    text-decoration: none;
}
.hdr-textlink:hover { text-decoration: underline; text-underline-offset: 3px; }

.hdr-tablet-only { display: none; }

.hdr-bell, .hdr-user { position: relative; }

.hdr-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 1200;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--c-border, #e3e0cf);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(35,31,32,.14);
    padding: 8px;
}
.hdr-pop-title {
    margin: 2px 6px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a837b;
}
.hdr-pop-empty { margin: 4px 6px 6px; font-size: 13px; color: #8a837b; }
.hdr-pop-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #231f20;
    font-size: 14px;
    font-weight: 600;
}
.hdr-pop-item small { margin-left: auto; font-weight: 500; color: #8a837b; }
.hdr-pop-item:hover { background: #f1f1e3; }
.hdr-pop-signout { color: #510707; }

/* Help modal */
/* ── Help / Contact modal (ezCater structure: info column + form column) ── */
.hdr-help {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.hdr-help[hidden] { display: none; }
.hdr-help-backdrop { position: absolute; inset: 0; background: rgba(35,31,32,.45); }

.hdr-help-card {
    position: relative;
    width: min(800px, 100%);
    margin: 0;
    background: #fffcf4;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(35,31,32,.28);
    padding: 0;
    max-height: min(680px, calc(100vh - 32px));
    overflow: auto;
}

.hdr-help-x {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cat-text);
    cursor: pointer;
}

.hdr-help-x:hover { background: #efece0; }

.hdr-help-cols {
    display: grid;
    grid-template-columns: 322px minmax(0, 1fr);
    align-items: stretch;
}

.hdr-help-info {
    padding: 30px 26px 30px 30px;
    background: #fffcf4;
    border-radius: 16px 0 0 16px;
}

.hdr-help-info h2 {
    margin: 0 0 22px;
    font-size: 24px;
    font-weight: 700;
    color: var(--cat-text);
}

.hdr-help-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.hdr-help-row:last-child { margin-bottom: 0; }

.hdr-help-ico {
    flex-shrink: 0;
    color: var(--cat-accent);
    line-height: 0;
    padding-top: 1px;
}

.hdr-help-rowbody { min-width: 0; }

.hdr-help-label {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cat-text);
}

.hdr-help-plain {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--cat-muted);
}

.hdr-help-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--cat-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hdr-help-value:hover { color: var(--cat-accent-dark); }

.hdr-help-formside {
    padding: 30px 30px 30px 26px;
    background: #f7f4e8;
    border-radius: 0 16px 16px 0;
}

.hdr-help-lead {
    margin: 0 0 22px;
    padding-right: 40px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--cat-text);
}

.hdr-help-formside label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--cat-text);
}

.hdr-help-optional { font-weight: 400; color: var(--cat-muted); }

.hdr-help-formside input,
.hdr-help-formside select,
.hdr-help-formside textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    font: inherit;
    font-size: 16px;
    color: var(--cat-text);
    border: 1px solid var(--cat-border);
    border-radius: 8px;
    padding: 11px 12px;
    background: #fff;
}

.hdr-help-formside textarea { resize: vertical; min-height: 116px; }

.hdr-help-formside input:focus,
.hdr-help-formside select:focus,
.hdr-help-formside textarea:focus {
    outline: none;
    border-color: var(--cat-text);
}

.hdr-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hdr-help-grid label { margin-bottom: 16px; }

.hdr-help-ta { position: relative; display: block; }

.hdr-help-count {
    position: absolute;
    right: 12px;
    bottom: 9px;
    font-size: 12px;
    font-weight: 400;
    color: var(--cat-muted);
    pointer-events: none;
}

.hdr-hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }

.hdr-help-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.hdr-help-privacy {
    font-size: 14px;
    font-weight: 600;
    color: var(--cat-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hdr-help-status {
    flex: 1 1 auto;
    font-size: 13px;
    color: #2e7d4f;
}

.hdr-help-send {
    appearance: none;
    margin-left: auto;
    border: 0;
    background: #231f20;
    color: #fff8ed;
    border-radius: 999px;
    padding: 13px 22px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.hdr-help-send:hover { background: #3a3435; }
.hdr-help-send:disabled { opacity: .6; cursor: default; }

@media (max-width: 719px) {
    .hdr-help-cols { grid-template-columns: 1fr; }
    .hdr-help-info { padding: 26px 20px 8px; border-radius: 16px 16px 0 0; }
    .hdr-help-formside { padding: 24px 20px 26px; border-radius: 0 0 16px 16px; }
    .hdr-help-grid { grid-template-columns: 1fr; gap: 0; }
    .hdr-help-lead { padding-right: 0; }
}

/* Tablet tier (768-1023): icons only, no event strip */
@media (min-width: 768px) and (max-width: 1023px) {
    .hdr-tablet-only { display: inline-flex; }
    .cat-event-strip { display: none; }
    .hdr-user-name { display: none; }
}

/* Desktop tier (>=1024): full context in the header, no hamburger, no strip */
@media (min-width: 1024px) {
    .hdr-pillbar { display: flex; }
    .cat-storepick { display: none; }
    .hdr-textlink { display: inline-block; }
    .cat-event-strip { display: none; }
    [data-cat-drawer-open] { display: none; }
}

/* ── Mobile ergonomics: 44px touch targets, no iOS zoom-on-focus ─────────── */
@media (max-width: 1023px) {
    .cat-iconbtn { min-width: 44px; min-height: 44px; }
    .cat-storepick-btn, .cat-auth-btn { min-height: 40px; }
    .cat-event-edit { min-width: 44px; min-height: 44px; }
    .menu-inline-search-clear { min-width: 38px; min-height: 38px; }
    .store-hero-switch { padding: 10px 0; }
    [data-item-qty] { min-width: 40px; min-height: 40px; }
}

/* iOS zooms any focused field under 16px. Applies at every width: the iPad
   runs the same WebKit rule, and 16px inputs read better everywhere. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
select,
textarea {
    font-size: 16px;
}

/* ── Mobile ergonomics, round 2 (audit follow-up) ────────────────────────── */
@media (max-width: 1023px) {
    .category-tabs .category-tab { padding-top: 12px; padding-bottom: 12px; }
    .product-cart-remove { min-width: 40px; min-height: 40px; }
    /* Comfortable to tap, but the box stays invisible: only the glyph shows. */
    .info-tip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin: -6px 0 -6px 4px;
        vertical-align: middle;
    }
    .special-instructions-toggle { padding-top: 11px; padding-bottom: 11px; }
    .quantity-control button, [data-qty-action] { min-width: 44px; min-height: 44px; }
    #quantity { min-height: 44px; }
.cat-site-footer a,
.checkout-support-link,
.account-auth-card p a { display: inline-block; padding: 9px 2px; }
}

/* Reviews should read as a complete page, not as the left column of the menu. */
@media (min-width: 1024px) {
    body.route-reviews .pickup-main-wrap {
        padding-left: max(24px, calc((100% - 1360px) / 2));
        padding-right: max(24px, calc((100% - 1360px) / 2));
    }

    body.route-reviews .reviews-page {
        width: min(100%, 860px);
        max-width: none;
        margin: 0 auto;
        padding: 40px 0 64px;
    }
}

/* iOS zooms any focused control under 16px, so 16px is a platform floor,
   not a style choice. Legacy rules set sizes all over (0.9rem on .cw-input
   and friends); one important utility ends the whole class of bug. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
select,
textarea {
    font-size: 16px !important;
}

/* ── Header pill group (desktop): location · event date & time · details ── */
.hdr-pillbar {
    display: none;
    position: relative;
    align-items: center;
    margin-left: 10px;
}

.hdr-pill-seg {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 8px 16px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--cat-text);
    background: none;
    border: 1px solid var(--cat-border);
    cursor: pointer;
    max-width: 220px;
    white-space: nowrap;
}

.hdr-pill-seg span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdr-pill-seg + .hdr-pill-seg { margin-left: -1px; }

.hdr-pill-first { border-radius: 999px 0 0 999px; }
.hdr-pill-last { border-radius: 0 999px 999px 0; }

.hdr-pill-seg:hover { background: #f7f4e8; }

.hdr-pill-seg.is-open {
    background: #f1f1e3;
    border-color: #231f20;
    color: #231f20;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.hdr-pill-caret { flex-shrink: 0; }

/* Popovers under the pill group */
.hdrp {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1200;
    width: 420px;
    background: #fff;
    border: 1px solid var(--cat-border);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(35, 31, 32, 0.16);
    padding: 20px 22px 22px;
}

.hdrp-date {
    left: 24px;
    width: min(700px, calc(100vw - 340px));
}

.hdrp-event {
    left: auto;
    right: 0;
    width: 380px;
}

.hdrp-heading {
    margin: 16px 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--cat-text);
}

.hdrp-heading:first-child { margin-top: 0; }

.hdrp-note {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cat-muted);
}

.hdrp-ordertype {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
    border: 1.5px solid #231f20;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cat-text);
}

.hdrp-radio {
    width: 18px;
    height: 18px;
    border: 6px solid #231f20;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    flex-shrink: 0;
}

.hdrp-savedlist {
    display: grid;
    gap: 8px;
}

.hdrp-saved {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid var(--cat-border);
    border-radius: 12px;
    padding: 11px 14px;
    font: inherit;
    color: var(--cat-text);
    cursor: pointer;
}

.hdrp-saved:hover { background: #f7f4e8; }

.hdrp-saved svg { color: var(--cat-muted); flex-shrink: 0; }

.hdrp-saved-copy { min-width: 0; }

.hdrp-saved-copy strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.hdrp-saved-copy small {
    display: block;
    font-size: 12.5px;
    color: var(--cat-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hdrp-zipwrap {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--cat-border);
    border-radius: 10px;
    padding: 4px 14px;
}

.hdrp-zipwrap svg { color: var(--cat-muted); flex-shrink: 0; }

.hdrp-zipwrap input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    padding: 10px 0;
    font: inherit;
    color: var(--cat-text);
}

.hdrp-zipstatus {
    margin: 8px 0 0;
    font-size: 13px;
    color: #b3261e;
}

.hdrp-zipstatus.is-ok { color: #2e7d4f; }
.hdrp-zipstatus.is-busy { color: var(--cat-muted); }

.hdrp-storelist {
    display: grid;
    gap: 0;
    max-height: 210px;
    overflow-y: auto;
}

.hdrp-storelist .cat-storepick-item {
    border-radius: 10px;
    padding: 9px 12px;
}

.hdrp-storelist .cat-storepick-item:hover { background: #f7f4e8; }

/* The current location reads as current through weight and a bronze dot,
   not a grey outline box. */
.hdrp-storelist .cat-storepick-item.is-active {
    background: transparent;
    outline: none;
    color: var(--cat-accent-dark);
}

.hdrp-storelist .cat-storepick-item.is-active span::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 8px;
    border-radius: 50%;
    background: var(--cat-accent);
    vertical-align: middle;
}

.hdrp-update {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    background: #231f20;
    color: #fff8ed;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.hdrp-update:hover { background: #3a3435; }

/* Date & time popover: calendar left, time chips right */
.hdrp-date-cols {
    display: grid;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    gap: 24px;
}

.hdrp-cal {
    border: 1px solid var(--cat-border);
    border-radius: 12px;
    padding: 12px 14px 14px;
}

.hdrp-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.hdrp-cal-head strong { font-size: 14.5px; }

.hdrp-cal-nav button {
    appearance: none;
    background: none;
    border: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 16px;
    color: var(--cat-text);
    cursor: pointer;
}

.hdrp-cal-nav button:hover { background: #f7f4e8; }

.hdrp-cal-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 12px;
    font-weight: 600;
    color: var(--cat-muted);
    text-align: center;
    margin-bottom: 2px;
}

.hdrp-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.hdrp-cal-day {
    appearance: none;
    background: none;
    border: 0;
    height: 36px;
    border-radius: 8px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cat-text);
    cursor: pointer;
}

.hdrp-cal-day:hover:not(:disabled) { background: #f7f4e8; }

.hdrp-cal-day.is-off {
    color: #c9c3b2;
    font-weight: 400;
    cursor: default;
}

.hdrp-cal-day.is-sel {
    background: #f1f1e3;
    font-weight: 800;
}

.hdrp-time-page {
    appearance: none;
    display: block;
    width: 100%;
    background: none;
    border: 1px solid var(--cat-border);
    border-radius: 999px;
    padding: 9px 12px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cat-text);
    cursor: pointer;
}

.hdrp-time-page:hover:not(:disabled) { background: #f7f4e8; }

.hdrp-time-page:disabled { opacity: 0.4; cursor: default; }

.hdrp-time-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 10px 0;
}

.hdrp-time-chip {
    appearance: none;
    background: none;
    border: 1px solid var(--cat-border);
    border-radius: 999px;
    padding: 8px 4px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--cat-text);
    cursor: pointer;
    white-space: nowrap;
}

.hdrp-time-chip:hover { background: #f7f4e8; }

.hdrp-time-chip.is-sel {
    background: #231f20;
    border-color: #231f20;
    color: #fff8ed;
}

.hdrp-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    background: #f7f4e8;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cat-text);
    line-height: 1.45;
}

.hdrp-banner svg { color: var(--cat-accent); flex-shrink: 0; margin-top: 1px; }

.hdrp-stepper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hdrp-stepper button {
    appearance: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--cat-border);
    background: none;
    font-size: 20px;
    line-height: 1;
    color: var(--cat-text);
    cursor: pointer;
}

.hdrp-stepper button:hover { background: #f7f4e8; }

.hdrp-stepper input {
    width: 76px;
    text-align: center;
    border: 1px solid var(--cat-border);
    border-radius: 10px;
    padding: 10px 8px;
    font: inherit;
    color: var(--cat-text);
}

/* ── Cart hover preview (desktop) ── */
.hdr-cart { position: relative; }

.hdr-cart-pop { min-width: 300px; }

/* Cart hover preview card, ezCater "draft cart" structure */
.hdr-cart-pop { min-width: 372px; padding: 12px; }

.hdr-cartcard {
    border: 1px solid var(--cat-border);
    border-radius: 12px;
    padding: 12px;
    background: #fffcf4;
}

.hdr-cartcard-photo {
    display: block;
    width: 100%;
    height: 92px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}

.hdr-cartcard-store {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--cat-text);
    margin-bottom: 8px;
}

.hdr-cartcard-row {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 5px;
    font-size: 13.5px;
    color: var(--cat-text);
}

.hdr-cartcard-row svg { color: var(--cat-muted); flex-shrink: 0; }

.hdr-cartcard-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hdr-cartcard-items {
    margin-top: 12px;
    background: #f7f4e8;
    border-radius: 8px;
    padding: 11px 12px;
}

.hdr-cartcard-list {
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--cat-text);
}

.hdr-cartcard-totals {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    font-size: 13.5px;
    color: var(--cat-muted);
}

.hdr-cartcard-totals strong {
    font-size: 15px;
    font-weight: 800;
    color: var(--cat-text);
}

.hdr-cartcard-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.hdr-cartcard-view {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--cat-accent);
    color: var(--cat-accent-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.hdr-cartcard-view:hover { background: #f7f4e8; }

.hdr-cartcard-continue {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    background: #231f20;
    color: #fff8ed;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.hdr-cartcard-continue:hover { background: #3a3435; }

/* Account button + dropdown (ezCater structure: icon rows in groups) */
.hdr-account-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 12px 0 10px;
    max-width: 168px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--cat-text);
    background: none;
    border: 1px solid var(--cat-border);
    border-radius: 999px;
    cursor: pointer;
}

.hdr-account-btn:hover { background: #f7f4e8; }

.hdr-account-btn .hdr-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hdr-account-caret { flex-shrink: 0; }

.hdr-user-pop { min-width: 268px; padding: 8px 6px; }

.hdr-user-pop .hdr-pop-item {
    gap: 13px;
    padding: 11px 12px;
    font-size: 14.5px;
    font-weight: 600;
}

.hdr-user-pop .hdr-pop-item svg { color: var(--cat-text); flex-shrink: 0; }

.hdr-pop-sep {
    height: 1px;
    margin: 6px 12px;
    background: var(--cat-border);
}

/* Cart badge feedback on silent AJAX adds */
@keyframes wsc-badge-pulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.45); }
    100% { transform: scale(1); }
}

.cart-badge-pulse { animation: wsc-badge-pulse 0.45s ease; }

/* ── "Serves N" beside the price (menu cards) ── */
.product-serves {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--cat-muted);
    white-space: nowrap;
}

.product-serves-bar {
    color: #d5d0bf;
    font-weight: 400;
    margin-right: 8px;
    line-height: 1;
}

.menu-list .product-card .product-price-row strong { line-height: 1; }

/* ── Store name meta row: More info link ── */
.store-hero-dot { color: var(--cat-muted); }

.store-hero-moreinfo {
    font-size: 14px;
    font-weight: 600;
    color: var(--cat-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Reviews section on the menu page ── */
.menu-reviews {
    margin: 46px 0 0;
    padding: 30px 12px 0;
    border-top: 1px solid var(--cat-border);
}

.menu-reviews-title {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 700;
    color: var(--cat-text);
}

.menu-reviews-list {
    display: grid;
    gap: 14px;
}

.menu-reviews-all {
    display: inline-block;
    margin-top: 16px;
    font-size: 14.5px;
    font-weight: 600;
    color: #623216;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── About section (ezCater stacked layout) ── */
.store-info {
    margin: 40px 0 0;
    padding: 30px 12px 44px;
    border-top: 1px solid var(--cat-border);
}

@media (min-width: 1024px) {
    .menu-reviews,
    .store-info { padding-left: 0; padding-right: 0; }

    /* Two columns of review cards on wide screens, like the listing. */
    .menu-reviews-list { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
}

.store-info-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--cat-text);
}

.store-info-locations {
    appearance: none;
    background: none;
    border: 0;
    padding: 4px 0;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: #623216;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.store-info-list {
    margin: 18px 0 0;
    display: grid;
    gap: 18px;
}

.store-info-row { min-width: 0; }

.store-info-row dt {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--cat-text);
    margin-bottom: 4px;
}

.store-info-row dd {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--cat-muted);
}

.store-info-top {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 28px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--cat-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Cascade guard: the pillbar base rules above sit later in the file than the
   desktop-tier media block, so the tier override is restated here. */
@media (min-width: 1024px) {
    .hdr-pillbar { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Mobile tier, ezCater structure: icon-only topbar, event section under it,
   full-height event modal, drawer with grouped rows.
   ═══════════════════════════════════════════════════════════════════════ */

/* Compact topbar: the icon row runs on every width below the desktop tier. */
@media (max-width: 1023px) {
    .hdr-tablet-only { display: inline-flex; }
    .cat-event-strip { display: flex; }
    .hdr-user-name { display: none; }
    .hdr-account-caret { display: none; }
    .hdr-account-btn {
        border: none;
        padding: 0;
        width: 44px;
        height: 44px;
        justify-content: center;
    }
}

/* Phones: no store pill and no account chip in the bar (both live in the
   drawer / event section), leaving logo + the five icons like ezCater. */
@media (max-width: 767px) {
    .cat-storepick { display: none; }
    .hdr-account-btn { display: none; }
    .cat-auth-btn-signin { display: none; }
    .cat-topbar { gap: 0; padding: 0 6px; }
    .cat-topbar-actions { gap: 0; }
    .cat-iconbtn { width: 42px; height: 42px; }
}

/* Event section under the header */
.cat-event-strip { height: auto; padding: 10px 16px; }

.cat-event-place {
    font-size: 13px;
    font-weight: 600;
    color: var(--cat-text);
}

.cat-event-copy span { font-size: 13px; color: var(--cat-muted); }

.cat-event-edit {
    flex-shrink: 0;
    appearance: none;
    background: none;
    border: 0;
    padding: 10px 2px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--cat-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ── Event details modal ── */
.order-details-sheet {
    background: #fffcf4;
    padding: 18px 20px 0;
}

.order-details-sheet > header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fffcf4;
    padding: 4px 0 14px;
    margin-bottom: 0;
}

.order-details-sheet > header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--cat-text);
}

.order-details-form { display: block; }

.od-block { margin-bottom: 22px; }

.od-label {
    display: block;
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--cat-text);
}

.od-hint {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--cat-muted);
}

.od-ordertype {
    display: inline-flex;
    border: 1px solid var(--cat-border);
    border-radius: 999px;
    padding: 4px;
    background: #fff;
}

.od-ordertype-on {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    padding: 10px 22px;
    border-radius: 999px;
    background: #231f20;
    color: #fff8ed;
    font-size: 15px;
    font-weight: 700;
}

.order-details-form input[type="text"],
.order-details-form input[type="date"],
.order-details-form input[type="tel"],
.order-details-form select {
    width: 100%;
    border: 1px solid var(--cat-border);
    border-radius: 10px;
    padding: 14px 14px;
    background: #fff;
    color: var(--cat-text);
    font: inherit;
}

.order-details-form input:focus,
.order-details-form select:focus {
    outline: none;
    border-color: var(--cat-text);
}

.od-counterwrap { position: relative; display: block; }

.order-details-form .od-counterwrap input { padding-right: 62px; }

.od-counter {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--cat-muted);
    pointer-events: none;
}

.od-fieldicon {
    position: relative;
    display: block;
}

.od-fieldicon > svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cat-muted);
    pointer-events: none;
}

.order-details-form .od-fieldicon input,
.order-details-form .od-fieldicon select { padding-left: 42px; }

.order-details-form .od-fieldicon select { appearance: none; -webkit-appearance: none; padding-right: 38px; }

.od-fieldicon select + .od-caret,
.od-fieldicon::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--cat-muted);
    border-bottom: 2px solid var(--cat-muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
    opacity: 0;
}

.od-fieldicon:has(select)::after { opacity: 1; }

.od-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: var(--cat-muted);
    cursor: pointer;
}

.od-clear:hover { background: #f1f1e3; }

.od-zipstatus {
    margin: 8px 0 0;
    font-size: 13px;
    color: #b3261e;
}

.od-zipstatus.is-ok { color: #2e7d4f; }

.order-details-actions {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 0 -20px;
    padding: 14px 20px max(16px, env(safe-area-inset-bottom, 0px));
    background: #fffcf4;
    border-top: 1px solid var(--cat-border);
}

.od-update,
.od-cancel {
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 999px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.od-update { background: #231f20; color: #fff8ed; border: 0; }
.od-update:hover { background: #3a3435; }
.od-cancel { background: #fffcf4; color: var(--cat-text); border: 1px solid var(--cat-border); }
.od-cancel:hover { background: #f7f4e8; }

/* ── Drawer ── */
.cat-drawer-panel {
    background: #fffcf4;
    display: flex;
    flex-direction: column;
}

.cat-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
}

.cat-drawer-welcome {
    padding: 6px 20px 16px;
    border-bottom: 1px solid var(--cat-border);
}

.cat-drawer-welcome strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--cat-text);
}

.cat-drawer-welcome span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--cat-muted);
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-drawer-authrow {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.cat-drawer-authrow .cat-auth-btn { flex: 1 1 auto; height: 42px; display: inline-flex; }

.cat-drawer-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    display: block;
    padding: 10px 8px 16px;
}

.cat-drawer-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 14px;
    border: 0;
    border-radius: 10px;
    background: none;
    font: inherit;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--cat-text);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.cat-drawer-nav a.cat-drawer-item { border-bottom: 0; }
.cat-drawer-item svg { flex-shrink: 0; color: var(--cat-text); }
.cat-drawer-item:hover { background: #f7f4e8; }
.cat-drawer-signout { color: #510707; }
.cat-drawer-signout svg { color: #510707; }

.cat-drawer-sep {
    height: 1px;
    margin: 8px 14px;
    background: var(--cat-border);
}

.cat-drawer-help-box {
    margin: 0 14px max(16px, env(safe-area-inset-bottom, 0px));
    padding: 14px 16px;
    background: #f1f1e3;
    border-radius: 12px;
}

.cat-drawer-help-box strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--cat-text);
    margin-bottom: 6px;
}

.cat-drawer-help-box a {
    display: block;
    font-size: 14px;
    color: var(--cat-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 3px 0;
}

/* ── Product page: bigger modifier rows and quantity control on mobile ── */
@media (max-width: 767px) {
    /* The real input is visually hidden; the round control is what people
       aim at, so that is what grows. */
    .modifier-option {
        min-height: 58px;
        padding-top: 13px;
        padding-bottom: 13px;
    }

    .modifier-option-control {
        width: 22px;
        height: 22px;
    }

    .modifier-option input:checked + .modifier-option-left .modifier-option-control::after {
        inset: 6px;
    }

    .modifier-option-left { gap: 13px; }

    .modifier-option-title-row { font-size: 15.5px; }

    .modifier-option-description { font-size: 13.5px; line-height: 1.4; }

    .quantity-control {
        gap: 10px;
    }

    .quantity-control button,
    [data-qty-action] {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        font-size: 20px;
    }

    .quantity-control input,
    .quantity-control select {
        min-height: 48px;
        font-size: 16px;
    }
}

/* ── Live chat (bottom right of the menu) ───────────────────────────────── */
.wsc-chat-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1250;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 20px;
    border: 0;
    border-radius: 999px;
    background: #231f20;
    color: #fff8ed;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(35, 31, 32, 0.28);
    cursor: pointer;
}

.wsc-chat-fab:hover { background: #3a3435; }
.wsc-chat-fab.is-hidden { display: none; }

.wsc-chat-panel {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1260;
    width: min(370px, calc(100vw - 32px));
    max-height: min(560px, calc(100vh - 40px));
    display: flex;
    flex-direction: column;
    background: #fffcf4;
    border: 1px solid var(--cat-border);
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(35, 31, 32, 0.26);
    overflow: hidden;
}

.wsc-chat-panel[hidden] { display: none; }

.wsc-chat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 12px 14px 18px;
    background: #231f20;
    color: #fff8ed;
}

.wsc-chat-head strong { display: block; font-size: 15.5px; font-weight: 700; }

.wsc-chat-head span {
    display: block;
    font-size: 12.5px;
    color: rgba(255, 248, 237, 0.75);
}

.wsc-chat-x {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #fff8ed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.wsc-chat-x:hover { background: rgba(255, 248, 237, 0.14); }

.wsc-chat-intro {
    padding: 16px 18px 18px;
    overflow-y: auto;
}

.wsc-chat-lead {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--cat-muted);
}

.wsc-chat-intro label {
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cat-text);
}

.wsc-chat-intro input,
.wsc-chat-intro textarea {
    display: block;
    width: 100%;
    margin-top: 5px;
    font: inherit;
    border: 1px solid var(--cat-border);
    border-radius: 10px;
    padding: 11px 12px;
    background: #fff;
    color: var(--cat-text);
    resize: vertical;
}

.wsc-chat-hp { position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; }

.wsc-chat-start {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 999px;
    background: #231f20;
    color: #fff8ed;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.wsc-chat-start:hover { background: #3a3435; }
.wsc-chat-start:disabled { opacity: .6; cursor: default; }

.wsc-chat-error {
    margin: 10px 0 0;
    font-size: 13px;
    color: #b3261e;
}

.wsc-chat-thread {
    flex: 1 1 auto;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wsc-chat-log {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 16px 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wsc-chat-msg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    max-width: 86%;
}

.wsc-chat-msg.is-mine { align-self: flex-end; align-items: flex-end; }

.wsc-chat-bubble {
    padding: 10px 13px;
    border-radius: 14px 14px 14px 4px;
    background: #f1f1e3;
    color: var(--cat-text);
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}

.wsc-chat-msg.is-mine .wsc-chat-bubble {
    background: #231f20;
    color: #fff8ed;
    border-radius: 14px 14px 4px 14px;
}

.wsc-chat-msg small { font-size: 11.5px; color: var(--cat-muted); }

.wsc-chat-note {
    margin: 0;
    padding: 8px 16px 10px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--cat-muted);
}

.wsc-chat-compose {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--cat-border);
    background: #fffcf4;
}

.wsc-chat-compose input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--cat-border);
    border-radius: 999px;
    padding: 11px 15px;
    font: inherit;
    background: #fff;
    color: var(--cat-text);
}

.wsc-chat-send {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #231f20;
    color: #fff8ed;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.wsc-chat-send:hover { background: #3a3435; }

/* On phones the panel takes the screen, like every other sheet here. */
@media (max-width: 640px) {
    .wsc-chat-fab { right: 14px; bottom: 14px; padding: 12px 17px; }

    .wsc-chat-panel {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-height: 88vh;
        border-radius: 16px 16px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }
}

/* ── Info tooltip: glyph only, never orphaned under the title ───────────── */
.info-tip,
.info-tip:hover,
.info-tip:focus-visible,
.info-tip.is-open {
    background: none;
}

.info-tip {
    color: rgba(35, 31, 32, 0.45);
    margin-left: 8px;
}

.info-tip:hover,
.info-tip:focus-visible,
.info-tip.is-open { color: var(--cat-text); }

.info-tip i,
.info-tip svg {
    width: 15px;
    height: 15px;
}

/* The title is a flex row, so a wrapping name can never leave the icon alone
   on its own line (which is how it read on a phone). */
.menu-list .product-card .product-copy h4 {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

.menu-list .product-card .product-copy h4 .info-tip {
    align-self: flex-start;
    margin-top: 1px;
}

/* ── Product page: label + dietary chips under the price (ezCater shape) ── */
.product-flags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 10px 0 0;
}

.product-diet-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: var(--cat-text);
}

/* "Serves N" needs air from the per-person figure on the product page. */
.product-price .product-serves { margin-left: 6px; }

/* ── Chrome do checkout (2026-09-01) ───────────────────────────────────
   Referencia: checkout do ezCater. Header completo compete com o formulario
   e oferece saidas pra quem deveria estar concluindo o pedido, entao aqui
   fica so a logo centralizada e um Back a esquerda. */
.checkout-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: var(--cat-surface, #FFFCF4);
    border-bottom: 1px solid var(--cat-border, #E3E0CF);
}
.checkout-chrome-back,
.checkout-chrome-spacer { flex: 0 0 86px; }
.checkout-chrome-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cat-ink, #231F20);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}
.checkout-chrome-back:hover { text-decoration: underline; }
.checkout-chrome-logo { display: inline-flex; justify-content: center; flex: 1 1 auto; }
.checkout-chrome-logo img { height: 30px; width: auto; display: block; }

.cat-site-footer-minimal { padding-top: 18px; padding-bottom: 18px; font-size: 12.5px; }

/* Resumo do pedido acompanha a rolagem, como no deles. */
.checkout-summary { position: sticky; top: 18px; align-self: start; }

@media (max-width: 900px) {
    .checkout-summary { position: static; }
    .checkout-chrome-back, .checkout-chrome-spacer { flex-basis: 60px; }
    .checkout-chrome-back span { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ezCater parity, round 2026-09-02 (Rodrigo's 17 items)
   Appended AFTER every media query above, so any responsive value must be
   restated inside its own media query here (later same-specificity rules
   win, including over earlier @media blocks).
   ═══════════════════════════════════════════════════════════════════════ */

/* 1, 5: hero photo edge to edge on phones, framed from tablet up */
.store-hero { margin: 0; }
.store-hero-img { height: 175px; border-radius: 0; }
@media (min-width: 768px) {
    .store-hero { margin: 16px 24px 0; }
    .store-hero-img { height: 176px; border-radius: 12px; }
}
@media (min-width: 1024px) {
    .store-hero { margin: 18px 0 0; }
    .store-hero-img { height: 220px; }
}

/* 15: brand name on a single line */
.cat-store-info .store-hero-name {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 1024px) { .cat-store-info .store-hero-name { font-size: 28px; } }
.store-hero-meta { gap: 4px 10px; }
.store-hero-meta .cat-reviews,
.cat-store-info .store-hero-meta .cat-reviews { font-size: 14px; }

/* 7: address with chevron (opens the store picker) + More info at the right */
.store-hero-addr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e3e3e3;
}
.store-hero-addr {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 14px;
    color: var(--cat-text);
    cursor: pointer;
    text-align: left;
}
.store-hero-addr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-hero-addr svg { flex: none; }
.store-hero-moreinfo {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #00592e;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.store-hero-moreinfo:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 7: delivery card (order min / fee / lead time), no pickup tab by scope */
.store-hero-delivery {
    margin: 12px 0 0;
    border: 1px solid #c9c9c9;
    border-radius: 16px;
    padding: 10px 8px;
    background: #fff;
}
.store-hero-mode {
    display: flex;
    justify-content: center;
    background: #f4f4f4;
    border-radius: 999px;
    padding: 4px;
}
.store-hero-mode span {
    padding: 8px 36px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--cat-muted);
}
.store-hero-mode span.is-on { background: #231f20; color: #fff8ed; }
.store-hero-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
.store-hero-strip div { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.store-hero-strip strong { font-size: 20px; font-weight: 600; line-height: 1.2; color: var(--cat-text); }
.store-hero-strip span { font-size: 12px; color: #606061; }

/* 8: search and Filter on one line, no "Catering Menu" title */
.cat-menu-header { flex-wrap: nowrap; padding: 14px 16px 6px; gap: 10px; }
.cat-menu-header h2 { display: none; }
.menu-inline-search { flex: 1 1 auto; order: 0; min-width: 0; }
.menu-inline-search input { height: 44px; border-color: #e3e3e3; background: #fff; font-size: 15px; }
.cat-filter-btn {
    flex: none;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #bebebe;
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    gap: 8px;
}
.cat-filter-btn svg { display: block; }

/* 14: the event strip may wrap; let it grow and keep the tabs below it */
.cat-event-strip { height: auto; min-height: var(--cat-event-h); padding-top: 6px; padding-bottom: 6px; }
.category-tabs { gap: 20px; }
.category-tabs .category-tab { font-size: 15px; }

/* 9: breathing room around category titles */
.menu-list .menu-category > header { margin: 22px 0 8px; padding: 0; background: transparent; border-radius: 0; }
.menu-list .menu-category > header h3 { font-size: 20px; font-weight: 700; }
.menu-list .menu-category:first-child > header { margin-top: 10px; }

/* 11, 12, 13: product card, ezCater structure. Text column has fixed rows
   (title / label row / two description lines / price) so every card is the
   same height whether or not a product has a label or a description. */
.menu-list .product-card {
    grid-template-columns: minmax(0, 1fr) 132px;
    column-gap: 12px;
    align-items: center;
    padding: 16px 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #ebebeb;
    border-radius: 0;
    box-shadow: none;
}
.menu-list .product-card:hover { box-shadow: none; transform: none; }
.menu-list .product-card.no-image { grid-template-columns: minmax(0, 1fr); }
.menu-list .product-card .product-copy {
    display: grid;
    grid-template-rows: 24px 24px 48px 24px;
    row-gap: 8px;
    align-content: start;
    min-width: 0;
}
.menu-list .product-card .product-copy > h4 {
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #151515;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-list .product-card .product-copy > h4 .info-tip { flex: none; }
.menu-list .product-card .product-meta-row { grid-row: 2; margin: 0; height: 24px; }
.menu-list .product-card .product-category-label { display: none; }
.menu-list .product-card .product-copy > p:not(.product-category-label) {
    grid-row: 3;
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    color: #4b4640;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.menu-list .product-card .product-price-row {
    grid-row: 4;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    line-height: 24px;
}
.menu-list .product-card .product-price-row strong { font-size: 16px; font-weight: 700; color: #151515; }
.menu-list .product-card .product-serves { font-size: 14px; color: #606061; }
.menu-list .product-card .menu-product-cart-controls { grid-row: 5; }
.menu-list .product-card .product-media { position: relative; align-self: center; }
.menu-list .product-card .product-media-frame {
    width: 132px;
    height: 132px;
    border-radius: 16px;
    overflow: hidden;
}
.menu-list .product-card .product-media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-list .product-card .product-media-plus {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.menu-list .product-card .product-media-plus img,
.menu-list .product-card .product-media-plus svg { width: 18px; height: 18px; }
.product-flag {
    font-size: 14px;
    font-weight: 700;
    color: #154882;
    background: #cee0fc;
    border-radius: 6px;
    padding: 0 8px;
    line-height: 24px;
}
.diet-initial {
    min-width: 24px;
    height: 24px;
    border-color: #60c192;
    color: #60c192;
    font-size: 12px;
}
@media (min-width: 768px) {
    .menu-list .product-card {
        grid-template-columns: minmax(0, 1fr) 148px;
        padding: 16px;
        margin-bottom: 12px;
        background: #fff;
        border: 1px solid #e3e3e3;
        border-radius: 16px;
    }
    .menu-list .product-card .product-copy { grid-template-rows: 28px 24px 48px 24px; }
    .menu-list .product-card .product-copy > h4 { font-size: 20px; font-weight: 700; line-height: 28px; }
    .menu-list .product-card .product-media-frame { width: 148px; height: 148px; }
}

/* 3: live chat. Hidden on phones (it collided with the cart bar); on desktop
   it keeps its own width and takes the ezCater green. */
.wsc-chat-fab {
    display: none;
    width: auto;
    max-width: calc(100vw - 48px);
    white-space: nowrap;
    background: #003d24;
    color: #fff;
    right: 24px;
    bottom: 24px;
    padding: 12px 20px;
    box-shadow: 0 6px 20px rgba(0, 61, 36, 0.3);
}
.wsc-chat-fab:hover { background: #00592e; }
@media (min-width: 768px) { .wsc-chat-fab { display: inline-flex; } }
.wsc-chat-fab.is-hidden { display: none; }

/* 17: drawer icons share one box so the star lines up with the rest */
.cat-drawer-item svg { flex: none; width: 20px; height: 20px; display: block; }
.cat-drawer-item span { line-height: 20px; }

/* 4: store info sheet */
.store-info-modal { position: fixed; inset: 0; z-index: 1300; }
.store-info-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.store-info-panel {
    position: absolute;
    inset: 0;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.store-info-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e3e3e3;
}
.store-info-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--cat-text); }
.store-info-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--cat-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.store-info-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 20px 32px; }
.store-info-list { margin: 0; }
.store-info-row { padding: 18px 0; }
.store-info-row + .store-info-row { border-top: 1px solid #f0f0f0; }
.store-info-row dt { font-size: 16px; font-weight: 700; color: var(--cat-text); margin: 0 0 6px; }
.store-info-row dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--cat-text); }
.store-info-locations {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #00592e;
    cursor: pointer;
}
body.store-info-open { overflow: hidden; }
@media (min-width: 768px) {
    .store-info-panel {
        inset: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(560px, calc(100vw - 48px));
        max-height: min(80vh, 760px);
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(0,0,0,.25);
    }
}

/* 15: product page. Title, bold price with lighter per-person, Serves on its
   own line, chips, and the quantity trio (minus / select / plus). */
.product-sheet a { color: inherit; }
.product-sheet-body h1 { font-size: 24px; font-weight: 600; line-height: 1.25; }
.product-sheet-body .product-price { margin-top: 8px; font-size: 18px; font-weight: 700; color: var(--cat-text); }
.product-sheet-body .product-per-person { font-size: 14px; font-weight: 400; color: var(--cat-text); margin-left: 4px; }
.product-serves-line { margin: 4px 0 0; font-size: 14px; color: var(--cat-text); }
.product-flags { margin-top: 12px; }
.product-diet-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--cat-text); }
.product-description { font-size: 16px; line-height: 1.5; color: var(--cat-text); margin-top: 14px; }
.product-sheet .section-title h2 { font-size: 18px; font-weight: 700; color: var(--cat-text); }
.product-sheet .carousel-control { color: var(--cat-text); }
.qty-select-label { font-size: 16px; font-weight: 700; color: var(--cat-text); }
.qty-trio { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 12px; align-items: center; }
.qty-trio-btn {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #f4f4f4;
    color: var(--cat-text);
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: inherit;
}
.qty-trio-btn:disabled { color: #999; cursor: default; }
.qty-trio-btn.qty-trio-plus { background: #231f20; color: #fff; }
.qty-trio-btn.qty-trio-plus:disabled { background: #d9d9d9; color: #999; }
.qty-trio .qty-select {
    min-height: 47px;
    border: 1.5px solid #bebebe;
    border-radius: 12px;
    background-color: #fff;
    font-size: 16px;
    text-align: center;
    padding-left: 32px;
}
.qty-trio .qty-select:focus { box-shadow: none; border-color: var(--cat-text); }
.quantity-control {
    border: 0;
    border-radius: 0;
    overflow: visible;
    width: 100%;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 12px;
    align-items: center;
}
.quantity-control button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f4f4f4;
    color: var(--cat-text);
    font-size: 24px;
    font-family: inherit;
    line-height: 1;
}
.quantity-control button[data-qty-action="increase"] { background: #231f20; color: #fff; }
.quantity-control input {
    min-height: 47px;
    border: 1.5px solid #bebebe;
    border-radius: 12px;
    background: #fff;
    font-size: 16px;
    font-family: inherit;
    -moz-appearance: textfield;
}
.quantity-control input::-webkit-outer-spin-button,
.quantity-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity-control.compact { width: auto; grid-template-columns: 32px 52px 32px; gap: 6px; }
.quantity-control.compact button { width: 32px; height: 32px; font-size: 16px; }
.quantity-control.compact input { min-height: 32px; border-radius: 8px; font-size: 14px; }
.product-hero-action { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.special-instructions-toggle { color: var(--cat-text); font-weight: 600; }

/* 6: event details sheet, full screen on phones with the ezCater field widths */
@media (max-width: 767px) {
    .order-details-modal .order-details-sheet {
        position: fixed;
        inset: 0;
        width: 100%;
        max-height: none;
        border-radius: 0;
        padding: 16px 20px 110px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
    }
    .order-details-sheet > header { background: #fff; padding: 6px 0 16px; }
    .order-details-sheet > header h2 { font-size: 24px; font-weight: 600; }
    .order-details-sheet .icon-plain-btn { width: 40px; height: 40px; color: #231f20; display: inline-flex; align-items: center; justify-content: center; margin-right: -8px; }
    .order-details-form { gap: 20px; }
    .order-details-form * { max-width: 100%; box-sizing: border-box; }
    .order-details-form input,
    .order-details-form select { border: 1px solid #bebebe; border-radius: 12px; min-height: 44px; font-size: 16px; background: #fff; }
    #order-pickup-date, #order-pickup-time, #od-guests { width: 62%; }
    .order-details-actions,
    .order-details-form > .order-details-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: grid;
        gap: 10px;
        padding: 12px 20px max(16px, env(safe-area-inset-bottom, 0px));
        background: #fff;
        border-top: 1px solid #e3e3e3;
        margin: 0;
    }
    .od-update { min-height: 52px; border-radius: 999px; background: #231f20; color: #fff; border: 0; font-size: 16px; font-weight: 700; }
    .od-cancel { background: #fff; border: 1.5px solid #231f20; color: #231f20; }
}

/* 15: cart as a full-screen sheet on phones and tablets (ezCater). The
   desktop column (>=1024) is untouched: the phone chrome is hidden there. */
.sc-mhead, .sc-mevent, .sc-mback, .sc-mfoot-empty, .sc-mextras { display: none; }
@media (max-width: 1023px) {
    body.sc-open { overflow: hidden; }
    body.sc-open .side-cart {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 1300;
        background: #fff;
        border: 0;
        border-radius: 0;
        margin: 0;
        overflow: hidden;
    }
    body.sc-open .sc-mhead {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 18px 20px 12px;
    }
    .sc-mhead h2 { margin: 0; font-size: 24px; font-weight: 600; color: var(--cat-text); }
    .sc-mclose {
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 50%;
        background: #e3e3e3;
        color: var(--cat-text);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    body.sc-open .sc-mevent { display: block; }
    .sc-mband {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        background: #f4f4f4;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--cat-text);
    }
    .sc-mband button { border: 0; background: none; padding: 0; font: inherit; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #00592e; cursor: pointer; }
    .sc-mmode { display: flex; justify-content: center; margin: 16px 20px 12px; padding: 4px; background: #f4f4f4; border-radius: 999px; }
    .sc-mmode span { padding: 8px 36px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--cat-muted); }
    .sc-mmode span.is-on { background: #231f20; color: #fff8ed; }
    .sc-mnote { margin: 0 20px 14px; text-align: center; font-size: 14px; color: var(--cat-text); }
    .sc-mlines { list-style: none; margin: 0 20px 16px; padding: 0; display: grid; gap: 10px; }
    .sc-mlines li { display: flex; align-items: center; gap: 10px; color: var(--cat-text); }
    .sc-mlines button { border: 0; background: none; padding: 0; font: inherit; font-size: 15px; color: var(--cat-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
    .sc-mlines button.is-set { text-decoration: none; }
    .sc-mband-food { margin-top: 0; }
    body.sc-open .side-cart-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 20px 20px; }
    body.sc-open .sc-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 26px; gap: 6px; }
    .sc-empty-art { margin-bottom: 8px; }
    .sc-empty strong { font-size: 18px; font-weight: 700; color: var(--cat-text); }
    .sc-empty p { margin: 0; font-size: 14px; color: var(--cat-text); }
    body.sc-open .side-cart-footer { padding: 14px 20px max(16px, env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e3e3e3; background: #fff; }
    body.sc-open .sc-mback,
    body.sc-open .sc-mfoot-empty { display: block; }
    .sc-mback {
        display: block;
        width: 100%;
        margin-top: 12px;
        padding: 12px 0;
        border: 0;
        background: none;
        font: inherit;
        font-size: 16px;
        font-weight: 700;
        color: var(--cat-text);
        cursor: pointer;
    }
    body.sc-open .sc-mextras { display: grid; gap: 12px; margin-top: 16px; }
}
.checkout-support-card { align-items: flex-start; }
.checkout-support-card-icon { margin-top: 2px; }
.save-cart-card { align-items: flex-start; }

/* 16: checkout accordion (Event date / Delivery details / Payment) with the
   ezCater summary card. Cards reuse the existing field markup untouched. */
.co-accordion { display: grid; gap: 16px; }
.co-card { background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; overflow: hidden; }
.co-card-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px; }
.co-card-head h3 { margin: 0; font-size: 20px; font-weight: 700; color: var(--cat-text); flex: none; }
.co-card-summary { flex: 1 1 auto; min-width: 0; font-size: 14px; color: #4b4640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-card-edit { display: none; border: 0; background: none; padding: 0; font: inherit; font-size: 15px; font-weight: 600; color: #00592e; cursor: pointer; }
.co-card.is-done:not(.is-open) .co-card-edit { display: inline; }
.co-card.is-done:not(.is-open) .co-card-head { cursor: pointer; }
.co-card:not(.is-open) .co-card-head { padding: 18px 24px; }
.co-card-body { display: none; padding: 0 24px 24px; }
.co-card.is-open .co-card-body { display: block; }
.co-card .checkout-group { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.co-card .checkout-group + .checkout-group { margin-top: 20px; padding-top: 20px; border-top: 1px solid #ededed; }
.co-required-note { margin: 0 0 14px; font-size: 13px; color: #606061; }
.co-req { color: #b3261e; }
.co-subtitle { margin: 22px 0 10px; font-size: 16px; font-weight: 700; color: var(--cat-text); }
.co-card-actions { margin-top: 20px; }
.co-save {
    display: block;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: #231f20;
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.co-save:hover { background: #3a3435; }
@media (min-width: 768px) { .co-save { width: 220px; } }

/* summary card */
.checkout-summary { background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; padding: 20px 20px 18px; }
.co-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #ededed; margin-bottom: 12px; }
.co-sum-head small { display: block; font-size: 13px; color: #606061; }
.co-sum-head strong { font-size: 16px; font-weight: 700; color: var(--cat-text); }
.co-sum-head img { width: 56px; height: 56px; object-fit: contain; border: 1px solid #e3e3e3; border-radius: 8px; padding: 4px; background: #fff; }
.co-sum-cart { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 700; color: var(--cat-text); margin-bottom: 10px; }
.co-sum-cart a { font-size: 14px; font-weight: 600; color: #00592e; text-decoration: none; }
.co-sum-title { display: none; }
.co-sum-pp { margin: 2px 0 0; text-align: right; font-size: 13px; color: #606061; }
.checkout-summary .summary-total { margin-top: 10px; padding-top: 10px; border-top: 1px solid #ededed; font-size: 18px; }
@media (min-width: 1024px) {
    .route-checkout .checkout-sidebar .checkout-submit-bar,
    .checkout-sidebar .checkout-submit-bar {
        position: static;
        transform: none;
        width: auto;
        border: 0;
        background: transparent;
        padding: 12px 0 0;
        z-index: auto;
    }
}
.checkout-submit-bar .btn { border-radius: 999px; background: #231f20; color: #fff; }

/* Verification fixes (2026-09-02, Playwright on production): an older rule
   still padded .store-hero and .product-media, and the category label kept
   rendering as a fifth grid row, so cards came out in two heights. */
.store-hero { padding: 0; }
.menu-list .product-card .product-media { padding: 0 !important; margin: 0 !important; width: 132px; }
.menu-list .product-card .product-copy { row-gap: 8px !important; gap: 8px !important; }
.menu-list .product-card .product-copy > * { margin: 0 !important; }
.menu-list .product-card .product-copy .product-category-label { display: none !important; }
@media (min-width: 768px) { .menu-list .product-card .product-media { width: 148px; } }
/* .route-menu .pickup-main > :not(...) pads every child; the hero must bleed. */
.store-hero { padding: 0 !important; }
.quantity-control { position: relative; }
.qty-visually-hidden { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: 0; top: 0; }
.quantity-control .qty-stepper-select { min-height: 47px; border: 1.5px solid #bebebe; border-radius: 12px; background-color: #fff; font-size: 16px; text-align: center; padding-left: 32px; }
.quantity-control .qty-stepper-select:focus { box-shadow: none; border-color: var(--cat-text); }
.quantity-control button:disabled { color: #999; cursor: default; }

.qty-serves-note { margin: 12px 0 0; text-align: center; font-size: 16px; color: var(--cat-text); }

/* ═══════════════════════════════════════════════════════════════════════
   Round 7 (2026-09-02 tarde): Rodrigo's second pass on the ezCater parity.
   Appended last, so anything restated here beats the blocks above.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1: delivery card. Transparent with just its border, and the single
   "Delivery" mode reads as a full-width label in the brand's dark tone
   instead of a black pill copied from a two-tab control we do not have. */
.store-hero-delivery { background: transparent; border-color: #d8d3c2; }
.store-hero-mode { background: transparent; padding: 0 0 10px; border-bottom: 1px solid #e6e2d3; }
.store-hero-mode span,
.store-hero-mode span.is-on {
    width: 100%;
    padding: 4px 0;
    background: transparent;
    color: #623216;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

/* 2, Q: brand palette everywhere. The ezCater green was only ever meant for
   the live chat button; every other action goes back to the house accent. */
.store-hero-moreinfo,
.store-info-locations,
.co-card-edit,
.co-sum-cart a,
.sc-mband button { color: #825d2d; }

/* 4: store info sheet header without the white band, brand mark instead of
   the store name. */
.store-info-head { background: transparent; border-bottom: 1px solid #e6e2d3; }
.store-info-title { display: flex; align-items: center; }
.store-info-title img { display: block; height: 30px; width: auto; }
.store-info-panel { background: #fffcf4; }
.store-info-close { background: #efece0; }

/* C: location sheet. Full screen on a phone, dialog from tablet up. */
.store-picker-modal { position: fixed; inset: 0; z-index: 1320; }
.store-picker-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.store-picker-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #fffcf4;
    overflow: hidden;
}
.store-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e6e2d3;
}
.store-picker-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--cat-text); }
.store-picker-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: #efece0;
    color: var(--cat-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.store-picker-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 20px 28px; }
.store-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #ece8da;
    color: var(--cat-text);
    text-decoration: none;
}
.store-picker-item-copy { display: grid; gap: 3px; min-width: 0; }
.store-picker-item-copy strong { font-size: 16px; font-weight: 700; }
.store-picker-item-copy small { font-size: 13.5px; color: var(--cat-muted); }
.store-picker-item.is-current { color: #825d2d; }
.store-picker-current { font-size: 13px; font-weight: 700; color: #825d2d; white-space: nowrap; }
body.store-picker-open { overflow: hidden; }
@media (min-width: 768px) {
    .store-picker-panel {
        inset: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(460px, calc(100vw - 48px));
        max-height: min(78vh, 680px);
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(0,0,0,.25);
    }
}

/* E: the info icon sits on the title's optical centre, and its bubble is
   pinned to the viewport (JS measures it) so no overflow:hidden ancestor
   can clip it any more. The ellipsis moved to .product-title-text. */
.menu-list .product-card .product-copy > h4 { overflow: visible; white-space: normal; }
.product-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.info-tip {
    width: 17px;
    height: 17px;
    margin-left: 3px;
    align-self: center;
    background: transparent;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.info-tip:focus,
.info-tip:focus-visible { outline: none; }
.info-tip svg { width: 14px; height: 14px; }
.info-tip::after {
    position: fixed;
    left: var(--tip-x, 50%);
    top: var(--tip-y, 0);
    bottom: auto;
    transform: translate(-50%, -100%);
    z-index: 1400;
    max-width: min(260px, calc(100vw - 24px));
}
.info-tip.tip-below::after { transform: translate(-50%, 0); }

/* H: dietary marks are smaller, and they carry the same bubble as the info
   icon so a tap says what VG / V / GF mean. */
.diet-initial { min-width: 19px; height: 19px; font-size: 10px; position: relative; }
.menu-list .diet-initial { min-width: 20px; height: 20px; }
.product-diet-chip { font-size: 13px; }
.product-flags .diet-initial { min-width: 18px; height: 18px; font-size: 9.5px; }
.diet-initial[data-tip]::after {
    content: attr(data-tip);
    position: fixed;
    left: var(--tip-x, 50%);
    top: var(--tip-y, 0);
    transform: translate(-50%, -100%);
    z-index: 1400;
    width: max-content;
    max-width: min(220px, calc(100vw - 24px));
    padding: 8px 11px;
    background: #fffcf4;
    color: #231f20;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
    border: 1px solid rgba(35,31,32,.08);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}
.diet-initial[data-tip]:hover::after,
.diet-initial[data-tip].is-open::after { opacity: 1; }
.diet-initial.tip-below::after { transform: translate(-50%, 0); }

/* F: repeated taps on the quantity buttons were triggering iOS double-tap
   zoom, because the default touch-action waits to see if a second tap is
   coming. */
button,
.qty-trio-btn,
.quantity-control button,
.cat-iconbtn,
.co-save,
[role="button"] { touch-action: manipulation; }

/* G: a bare <button> renders its text in the system accent on iOS Safari,
   which is why these titles came out blue on the phone. */
.popular-option-card,
.popular-option-card strong { color: var(--cat-text); }
.popular-option-card span,
.popular-option-card small { color: var(--cat-muted); }

/* I: social accounts above the copyright line, in the footer's own colour. */
.cat-social { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 10px; }
.cat-social a { display: inline-flex; color: inherit; opacity: .75; }
.cat-social a:hover { opacity: 1; }

/* J: cart page on a phone. The rows were a three-column grid whose price
   column collapsed, and the fixed complete bar sat on top of the content. */
@media (max-width: 767px) {
    .cart-step-header { padding: 16px 16px 0; }
    .cart-list { padding: 0 16px; }
    .cart-item {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 6px;
        align-items: start;
        padding: 16px 0;
        border-bottom: 1px solid #ebebeb;
    }
    .cart-item.no-media { grid-template-columns: minmax(0, 1fr); }
    .cart-item-media { grid-row: span 2; width: 64px; height: 64px; }
    .cart-item-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
    .cart-item-copy { min-width: 0; }
    .cart-item-copy h3 { font-size: 15px; font-weight: 600; margin: 0; }
    .cart-item-total {
        grid-column: 2;
        justify-self: end;
        align-self: center;
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
    }
    .cart-item.no-media .cart-item-total { grid-column: 1; }
    .cart-item-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
    .cart-summary { padding: 16px; margin: 12px 16px 0; }
    .cart-utensils-panel { margin-left: 16px !important; margin-right: 16px !important; }
    .upsell-card { margin-left: 16px; margin-right: 16px; }
    .cart-complete-bar { padding: 12px 16px max(14px, env(safe-area-inset-bottom, 0px)); }
    /* The fixed bar would otherwise cover the last card on the page. */
    .route-cart .pickup-main { padding-bottom: 96px; }
    .route-cart .cat-cart-strip { display: none; }
    .checkout-support-card,
    .save-cart-card { margin-left: 16px; margin-right: 16px; }
}

/* J: the two help cards were built at different times and drifted apart. */
.checkout-support-card,
.save-cart-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: var(--radius, 12px);
}
.checkout-support-card-title,
.save-cart-card-body h3 { font-size: 15px; font-weight: 700; margin: 0 0 6px; line-height: 1.35; }
.checkout-support-card-text,
.save-cart-card-body p { font-size: 13.5px; line-height: 1.55; margin: 0 0 12px; }
.checkout-support-card-icon,
.save-cart-card-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-top: 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkout-support-card-icon svg,
.save-cart-card-icon svg { width: 18px; height: 18px; display: block; }
/* R: phone and email lines were baseline-aligned, so the glyphs sat low. */
.checkout-support-card-contacts { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.checkout-support-link { display: inline-flex; align-items: center; gap: 7px; }
.checkout-support-link svg { width: 16px; height: 16px; flex: none; display: block; }

/* K: event sheet. Date and time share a row, the select keeps its own arrow
   inside the field, and the fixed footer no longer touches the last field. */
@media (max-width: 767px) {
    .order-details-form .od-datetime { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .order-details-form .od-datetime .od-block { margin: 0; }
    #order-pickup-date, #order-pickup-time, #od-guests { width: 100%; }
    .order-details-form select {
        appearance: none;
        -webkit-appearance: none;
        padding-right: 38px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6862' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 13px;
    }
    .order-details-form { padding-bottom: 28px; }
    .order-details-sheet { padding-bottom: 132px; }
}

/* M, P: the checkout cards were flush against the screen edge, and nothing
   said which one was open. */
.checkout-layout { padding-left: 16px; padding-right: 16px; }
.co-card { transition: border-color .15s ease, box-shadow .15s ease; }
.co-card.is-open { border-color: #231f20; box-shadow: 0 6px 20px rgba(35,31,32,.10); }
@media (min-width: 1024px) { .checkout-layout { padding-left: 0; padding-right: 0; } }

/* J: the cart sheet's mode row follows the hero's treatment. */
@media (max-width: 1023px) {
    .sc-mmode { background: transparent; padding: 0 0 10px; margin: 14px 20px 10px; border-bottom: 1px solid #e6e2d3; }
    .sc-mmode span,
    .sc-mmode span.is-on { width: 100%; padding: 4px 0; background: transparent; color: #623216; font-size: 15px; font-weight: 700; text-align: center; }
}

/* Round 7 follow-ups, from the production check.
   account.css loads after this file, so the shared card rules need one more
   level of specificity to actually win. */
.save-cart-card .save-cart-card-body h3 { font-size: 15px; }
.save-cart-card .save-cart-card-body p { font-size: 13.5px; }
/* The fixed "Complete order" bar was covering the last card on the page. */
body.route-cart .pickup-main { padding-bottom: 104px; }
/* This class hides the native field behind a custom picker, so no layout
   rule may ever give it a real width again. */
.wsc-dtp-hidden-field { width: 1px !important; height: 1px !important; }
/* A date input's intrinsic minimum is wider than half the sheet, so plain
   1fr columns came out lopsided. */
.order-details-form .od-datetime { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* An earlier !important rule zeroed this out, so the fixed bar kept covering
   the last card on the cart page. */
body.route-cart .pickup-main { padding-bottom: 104px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Round 8 (2026-09-02 noite). Measured against the live ezCater desktop
   page: their delivery block is three plain stats, 366px wide, sitting to
   the right of the store name with no border, no fill and no "Delivery"
   label at all.
   ═══════════════════════════════════════════════════════════════════════ */

/* 2, 12: the mode row is gone from the markup; what is left is the numbers. */
.store-hero-delivery { padding: 12px 8px; }
.store-hero-strip { margin-top: 0; }
.store-hero-strip div { gap: 2px; }
@media (min-width: 1024px) {
    .cat-store-info {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 366px;
        column-gap: 32px;
        align-items: start;
    }
    .cat-store-info .store-hero-name,
    .cat-store-info .store-hero-meta,
    .cat-store-info .store-hero-addr-row { grid-column: 1; }
    .store-hero-addr-row { border-bottom: 0; padding-bottom: 0; }
    .store-hero-delivery {
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: center;
        margin: 0;
        padding: 0;
        border: 0;
    }
    .store-hero-strip { justify-content: space-evenly; }
}

/* 5: the brand marks are solid glyphs, so they need a size and nothing else. */
.cat-social a svg { width: 17px; height: 17px; display: block; }

/* 1: date and time share a row in the event sheet, and at half width the
   leading glyph was running into the value. The pair drops its icons. */
@media (max-width: 767px) {
    .order-details-form .od-datetime .od-fieldicon > svg { display: none; }
    .order-details-form .od-datetime input,
    .order-details-form .od-datetime select { padding-left: 14px; }
    /* 4: a sticky header inside a scrolling full-screen sheet left a white
       band above the content. The sheet is short enough to scroll as one. */
    .order-details-sheet > header { position: static; }
}

/* 6: on a phone /cart renders the sheet, so the legacy page behind it (its
   own summary card and fixed complete bar) must not show through. */
@media (max-width: 1023px) {
    body.route-cart .pickup-main,
    body.route-cart .cart-complete-bar,
    body.route-cart .cat-cart-strip { display: none !important; }
    body.route-cart .side-cart { display: flex; }
}

/* 10: menu cards sit on the page, not on white boxes. The border firms up
   and the card lifts on hover. */
@media (min-width: 768px) {
    .menu-list .product-card {
        background: transparent;
        border-color: rgba(35, 31, 32, 0.10);
        transition: box-shadow .15s ease, border-color .15s ease;
    }
    .menu-list .product-card:hover {
        background: transparent;
        border-color: rgba(35, 31, 32, 0.28);
        box-shadow: 0 6px 20px rgba(35, 31, 32, 0.10);
        transform: none;
    }
}

/* 8: the info icon centres on the title's cap height rather than its box. */
.menu-list .product-card .product-copy > h4 { align-items: center; }
.info-tip { align-self: center; position: relative; top: 0; }
@media (min-width: 768px) { .info-tip { width: 18px; height: 18px; } .info-tip svg { width: 15px; height: 15px; } }

/* 11: the chat label was running into its own padding on desktop. */
@media (min-width: 768px) {
    .wsc-chat-fab { padding: 13px 26px; gap: 10px; font-size: 15px; line-height: 1.2; }
    .wsc-chat-fab svg, .wsc-chat-fab img { flex: none; }
}

/* Round 8 follow-ups, from the production check.
   The chat button is a direct child of .pickup-main, so the same broad
   ":not(...)" rule that flattened the hero was zeroing its side padding. */
@media (min-width: 768px) {
    .wsc-chat-fab { padding-left: 26px !important; padding-right: 26px !important; }
}
/* Something upstream sets align-self: flex-start on the copy column's
   children, which pushed the info icon above the title's centre line. */
.menu-list .product-card .product-copy > h4 > .info-tip { align-self: center; }

/* ═══════════════════════════════════════════════════════════════════════
   Round 9 (2026-09-02, late). Regression fix first: the cart panel is now
   included on every route (so the sheet can open anywhere), but its desktop
   rules were not scoped to the pages that actually lay out a cart column,
   so an empty cart panel was rendering at the foot of the product page,
   the cart page and everywhere else.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .side-cart { display: none; }
    .pickup-main-wrap.has-side-cart > .side-cart { display: flex; }
}

/* The sheet's own styles used to live inside the desktop media query, so on
   a phone the cart had no layout at all: the cross-sell image ran to full
   width and every row wrapped. This is that block, written for the sheet. */
@media (max-width: 1023px) {
    body.sc-open .cat-cart-strip,
    body.sc-open .product-sticky-bar,
    body.sc-open .cart-complete-bar { display: none !important; }

    body.sc-open .sc-items { list-style: none; margin: 0; padding: 0; }
    body.sc-open .sc-item {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr) auto;
        column-gap: 10px;
        align-items: start;
        padding: 16px 0;
        border-bottom: 1px solid #ececec;
    }
    body.sc-open .sc-item-qty { font-size: 15px; color: var(--cat-text); }
    body.sc-open .sc-item-copy { display: grid; gap: 2px; min-width: 0; }
    body.sc-open .sc-item-copy strong { font-size: 15px; font-weight: 600; color: var(--cat-text); }
    body.sc-open .sc-item-copy small { font-size: 13px; color: var(--cat-muted); }
    body.sc-open .sc-item-side { display: grid; gap: 4px; justify-items: end; }
    body.sc-open .sc-item-price { font-size: 15px; font-weight: 600; white-space: nowrap; }
    body.sc-open .sc-item-remove {
        border: 0;
        background: none;
        padding: 0;
        font: inherit;
        font-size: 13px;
        color: var(--cat-muted);
        text-decoration: underline;
        cursor: pointer;
    }
    body.sc-open .sc-minbar { margin: 12px 0 0; padding: 10px 12px; background: #f7f4e8; border-radius: 10px; }
    body.sc-open .sc-minbar p { margin: 0; font-size: 13px; }
    body.sc-open .sc-cross { margin: 18px 0 0; }
    body.sc-open .sc-cross-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    body.sc-open .sc-cross-head strong { font-size: 15px; }
    body.sc-open .sc-cross-head button { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--cat-muted); cursor: pointer; }
    body.sc-open .sc-cross-card {
        display: grid;
        grid-template-columns: 56px minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 10px 0;
        border-top: 1px solid #ececec;
        color: inherit;
        text-decoration: none;
    }
    body.sc-open .sc-cross-card img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; display: block; }
    body.sc-open .sc-cross-copy { display: grid; gap: 2px; min-width: 0; }
    body.sc-open .sc-cross-copy strong { font-size: 14px; font-weight: 600; }
    body.sc-open .sc-cross-copy small { font-size: 13px; color: var(--cat-muted); }
    body.sc-open .sc-cross-view { font-size: 14px; font-weight: 600; color: #825d2d; }
    body.sc-open .sc-totals { margin: 18px 0 0; display: grid; gap: 8px; }
    body.sc-open .sc-totals-row { display: flex; justify-content: space-between; font-size: 15px; }
    body.sc-open .sc-total-row { display: flex; justify-content: space-between; align-items: baseline; }
    body.sc-open .sc-total-row span { font-size: 16px; font-weight: 700; }
    body.sc-open .sc-total-row strong { font-size: 17px; font-weight: 800; }
    body.sc-open .sc-excludes { margin: 2px 0 0; text-align: right; font-size: 12px; color: var(--cat-muted); }
    body.sc-open .sc-note { margin: 8px 0 0; font-size: 12.5px; color: var(--cat-muted); }
    body.sc-open .sc-checkout {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        margin-top: 10px;
        border-radius: 999px;
        background: #231f20;
        color: #fff8ed;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
    }
    body.sc-open .sc-checkout-disabled { background: #d9d5c7; color: #6e6862; }
}

/* The tooltip is a real node on <body> now. */
.wsc-tipbubble {
    position: fixed;
    z-index: 1400;
    max-width: min(260px, calc(100vw - 24px));
    padding: 10px 12px;
    background: #fffcf4;
    color: #231f20;
    font-size: 12.5px;
    line-height: 1.45;
    text-align: left;
    border: 1px solid rgba(35, 31, 32, .10);
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
    pointer-events: none;
}
.info-tip::after,
.diet-initial[data-tip]::after { content: none !important; }

/* Live chat: [hidden] has to win over the layout display, or the thread and
   the compose bar render on top of the intro form and bury it. */
.wsc-chat-panel [hidden] { display: none !important; }
.wsc-chat-intro { padding-bottom: 8px; }
.wsc-chat-compose { border-top: 1px solid var(--cat-border); }

/* 6: the button belongs to the menu column, clear of the cart panel. */
@media (min-width: 1024px) {
    body.has-cart-column .wsc-chat-fab,
    body.has-cart-column .wsc-chat-panel { right: 392px; }
}

/* 7: the cart preview lists items on the page, not in boxes. */
.hdr-cart-pop .sc-item,
.hdr-cart-pop [class*="item"] { background: none; border: 0; box-shadow: none; }
.hdr-cart-pop .hdr-pop-line,
.hdr-cart-pop li {
    background: none;
    border: 0;
    border-bottom: 1px solid #ececec;
    border-radius: 0;
    padding: 10px 0;
    box-shadow: none;
}
.hdr-cart-pop li:last-child { border-bottom: 0; }

/* 1: More info sits next to the address, not pushed to the far edge. */
@media (min-width: 768px) {
    .store-hero-addr-row { justify-content: flex-start; gap: 16px; }
    .store-hero-addr { flex: 0 1 auto; }
}

/* Round 9, second batch: checkout form density and the custom date/time. */

/* 13: ezCater pairs address with suite and keeps the labels plain. */
.co-row-addr { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; }
.co-row-addr .form-field { margin-bottom: 12px; }
.co-opt { font-weight: 400; color: var(--cat-muted); }
.co-hint { margin: 2px 0 8px; font-size: 13px; line-height: 1.5; color: var(--cat-muted); }
.co-card .form-field label { font-size: 14px; font-weight: 700; color: var(--cat-text); }

/* 11: the two add-on rows read as list items, not tinted boxes. */
.co-optline {
    background: none !important;
    border: 0 !important;
    border-top: 1px solid #ececec !important;
    border-radius: 0 !important;
    padding: 14px 0 !important;
}
.co-optline strong { font-size: 14px; }
.co-optline small { font-size: 13px; }
.quantity-control.co-stands { width: auto; }

/* 10: the whole sidebar travels together, so the summary can no longer ride
   over the help card below it. */
@media (min-width: 1024px) {
    .checkout-sidebar { position: sticky; top: 18px; align-self: start; }
    .checkout-summary { position: static; }
}

/* 12: our own date and time controls, in place of the browser's. */
.wsc-sdt { position: relative; }
.wsc-sdt-trigger {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #bebebe;
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 16px;
    color: var(--cat-text);
    text-align: left;
    cursor: pointer;
}
.wsc-sdt-trigger.is-placeholder { color: #8a837b; }
.wsc-sdt-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsc-sdt-caret { flex: none; color: var(--cat-muted); }
.wsc-sdt-pop {
    position: absolute;
    z-index: 1350;
    top: calc(100% + 6px);
    left: 0;
    min-width: 268px;
    max-width: min(320px, calc(100vw - 32px));
    padding: 12px;
    background: #fff;
    border: 1px solid var(--cat-border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(35, 31, 32, .18);
}
.wsc-sdt-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wsc-sdt-cal-head strong { font-size: 15px; font-weight: 700; }
.wsc-sdt-nav {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #f4f4f4;
    font-size: 14px;
    line-height: 1;
    color: var(--cat-text);
    cursor: pointer;
}
.wsc-sdt-dow, .wsc-sdt-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wsc-sdt-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--cat-muted); padding-bottom: 4px; }
.wsc-sdt-day {
    aspect-ratio: 1;
    border: 0;
    border-radius: 50%;
    background: none;
    font: inherit;
    font-size: 14px;
    color: var(--cat-text);
    cursor: pointer;
}
.wsc-sdt-day:disabled { color: #cfcabb; cursor: default; }
.wsc-sdt-day.is-today { font-weight: 700; }
.wsc-sdt-day.is-selected { background: #231f20; color: #fff8ed; }
.wsc-sdt-times { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.wsc-sdt-time {
    border: 0;
    border-radius: 8px;
    background: none;
    padding: 10px 12px;
    font: inherit;
    font-size: 15px;
    color: var(--cat-text);
    text-align: left;
    cursor: pointer;
}
.wsc-sdt-time:hover { background: #f4f4f4; }
.wsc-sdt-time.is-selected { background: #231f20; color: #fff8ed; }
.wsc-sdt-empty { margin: 0; padding: 8px; font-size: 14px; color: var(--cat-muted); }

/* 7: cart preview rows */
.hdr-cartcard-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 13.5px; border-bottom: 1px solid #ececec; }
.hdr-cartcard-line:last-child { border-bottom: 0; }
.hdr-cartcard-list { display: block; margin: 0; padding: 0; background: none; border: 0; }

/* The native pair behind the custom controls still had the checkout field's
   padding and border, so it kept ~30px of layout instead of none. */
.wsc-dtp-hidden-field,
.checkout-datetime input.wsc-dtp-hidden-field,
.checkout-datetime select.wsc-dtp-hidden-field {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Round 10 (2026-09-02): checkout stripped back to ezCater's density.
   ═══════════════════════════════════════════════════════════════════════ */

/* 2: the card was clipping its own date and time popovers. */
.co-card { overflow: visible; }
.co-card-body { overflow: visible; }
.co-card-head { border-radius: 12px 12px 0 0; }

/* 5: one required-field note per card, on the Save row like theirs. */
.co-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.co-card-actions .co-required-note { margin: 0; }
@media (max-width: 560px) { .co-card-actions { flex-direction: column-reverse; align-items: stretch; gap: 10px; } }

/* 3: the delivery card's rows, ezCater's pairing. */
.co-row-addr { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr); }
.co-row-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.co-row-contact .form-field { margin-bottom: 12px; }
@media (max-width: 720px) {
    .co-row-addr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .co-row-contact { grid-template-columns: minmax(0, 1fr); }
}

/* Optional extras collapse, so the card is short until they are wanted. */
.co-prefs { border-top: 1px solid #ececec; margin-top: 6px; }
.co-prefs > summary,
.co-sum-promos > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--cat-text);
}
.co-prefs > summary::-webkit-details-marker,
.co-sum-promos > summary::-webkit-details-marker { display: none; }
/* Same glyph in both states, flipped when closed: two different characters
   never line up, and the closed one read as a different icon. */
.co-prefs > summary::after,
.co-sum-promos > summary::after { content: '⌃'; float: right; color: var(--cat-muted);
    display: inline-block; transform: rotate(180deg); transform-origin: 50% 45%; }
.co-prefs[open] > summary::after,
.co-sum-promos[open] > summary::after { transform: rotate(0deg); }

/* 6: payment reads as a list, not a stack of tinted panels. */
.co-card[data-co-card="payment"] .form-field { background: none !important; border: 0 !important; padding: 0 !important; }
.co-card[data-co-card="payment"] .form-field > div[style*="background"] { background: none !important; border: 0 !important; padding: 0 !important; }
.co-paylist { display: grid; gap: 10px; margin: 4px 0 0; }
.co-payrow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #d7d3c4;
    border-radius: 12px;
    background: none;
    cursor: default;
}
.co-payrow.is-on { border-color: #231f20; box-shadow: inset 0 0 0 1px #231f20; }
.co-payrow strong { display: block; font-size: 15px; }
.co-payrow small { color: var(--cat-muted); font-size: 13px; line-height: 1.5; }
.co-taxexempt { border-top: 1px solid #ececec; margin-top: 14px; }
.co-taxexempt > summary { list-style: none; cursor: pointer; padding: 14px 0; font-size: 15px; font-weight: 600; color: #825d2d; }
.co-taxexempt > summary::-webkit-details-marker { display: none; }

/* The tip control lives in the summary now, sized for that column. */
.checkout-summary .tip-selector { margin: 0 0 10px; padding: 0; background: none; border: 0; }
.checkout-summary .tip-selector > label { display: none; }
.checkout-summary .tip-btn-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid #d7d3c4; border-radius: 10px; overflow: hidden; }
.checkout-summary .tip-btn-row button,
.checkout-summary .tip-btn-row .tip-btn {
    border: 0;
    border-right: 1px solid #d7d3c4;
    border-radius: 0;
    background: #fff;
    padding: 8px 2px;
    font-size: 12.5px;
    line-height: 1.25;
    text-align: center;
}
.checkout-summary .tip-btn-row button:last-child { border-right: 0; }
.checkout-summary .tip-current-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: 12.5px; }
.checkout-summary .tip-current-row p { margin: 0; }
.checkout-summary .coupon-panel { margin: 0; padding: 0; background: none; border: 0; }
.checkout-summary .coupon-panel label { display: none; }
.checkout-summary .coupon-controls { gap: 6px; }
.checkout-summary .coupon-input { min-width: 0 !important; flex: 1 1 auto; }
.co-sum-promos { border-top: 1px solid #ececec; margin-top: 6px; }

/* 10: the sign-in strip needs the same gutter as the cards on a phone. */
@media (max-width: 767px) {
    .account-checkout-banner { margin: 14px 16px 0; }
}

/* 8: the cart sheet's footer was eating the item list. */
@media (max-width: 1023px) {
    body.sc-open .side-cart-footer { padding: 10px 20px max(10px, env(safe-area-inset-bottom, 0px)); }
    body.sc-open .sc-checkout { min-height: 46px; margin-top: 8px; font-size: 15px; }
    body.sc-open .sc-mback { margin-top: 4px; padding: 8px 0; font-size: 15px; }
    body.sc-open .sc-note { display: none; }
    body.sc-open .sc-excludes { margin: 0; font-size: 11.5px; }
}

/* 9: the event sheet's date and time share one height and never touch. */
@media (max-width: 767px) {
    .order-details-form .od-datetime { gap: 12px; align-items: end; }
    .order-details-form .od-datetime .od-block > .od-label { min-height: 20px; }
    .order-details-form .od-datetime input,
    .order-details-form .od-datetime select {
        height: 46px;
        min-height: 46px;
        box-sizing: border-box;
    }
}

/* 7: the product sheet scrolled inside itself and drew a rule under the
   popup; the page is the scroller. */
.product-sheet { overflow: visible; }
.product-sheet-body { overflow: visible; }
.product-sheet::after { content: none; }
.product-qty-top { border-bottom: 0; }
.special-instructions-toggle { margin-top: 20px !important; margin-bottom: 8px; }

/* Round 10 follow-ups from the production check. */
/* 7: on desktop the product page was a card with its own scrollbar, which is
   where the odd inner scroll and the rule under it came from. */
@media (min-width: 1024px) {
    body[class*="route-product-"] .product-sheet {
        max-height: none;
        overflow: visible;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
    }
}
/* account.css loads after this file, so the phone gutter needs the extra
   level of specificity to stick. */
@media (max-width: 767px) {
    body .account-checkout-banner { margin: 14px 16px 22px; }
}
/* City and state only appear when the ZIP lookup could not fill them. */
.co-citystate { display: none !important; }
.co-citystate.is-needed { display: flex !important; }
/* 8: trim the cart sheet's footer so the items get the room. */
@media (max-width: 1023px) {
    body.sc-open .side-cart-footer { padding: 8px 20px max(8px, env(safe-area-inset-bottom, 0px)); }
    body.sc-open .sc-total-row span { font-size: 15px; }
    body.sc-open .sc-total-row strong { font-size: 16px; }
    body.sc-open .sc-checkout { min-height: 44px; margin-top: 6px; }
    body.sc-open .sc-mback { margin: 0; padding: 6px 0; font-size: 14px; font-weight: 600; }
}
.co-payrow input[type="radio"] { margin-top: 3px; }
.co-payrow.is-off { opacity: .55; }
.co-payrow.is-off strong { font-weight: 600; }
.co-taxexempt input[type="file"] { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════
   CHECKOUT, rebuilt against the four ezCater prints of 2026-09-02 (STEP 1,
   STEP 2, STEP 2 manual, STEP 3). Measured from the 2x screenshots at a
   1509px viewport: left column 711px, summary 419px, card padding 26px,
   inputs 44px tall with a 12px radius and a 1px #bebebe border, labels
   17px/700, body text 17px, small text 15px. Everything white.
   Scoped to body.route-checkout and declared with enough specificity to
   beat the legacy inline styles the form still carries.
   ═══════════════════════════════════════════════════════════════════════ */
body.route-checkout { background: #fff; color: #151515; }
body.route-checkout .pickup-app,
body.route-checkout .pickup-main,
body.route-checkout .pickup-main-wrap { background: #fff; }
body.route-checkout .checkout-chrome {
    background: #fff;
    border-bottom: 0;
    padding: 18px 40px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}
body.route-checkout .checkout-chrome-back { font-size: 17px; color: #151515; justify-self: start; }
body.route-checkout .checkout-chrome-logo { justify-self: center; }
body.route-checkout .checkout-chrome-logo img { height: 34px; }
body.route-checkout .checkout-chrome-user { justify-self: end; font-size: 17px; color: #4b4b4b; text-decoration: none; }
body.route-checkout .checkout-layout {
    display: grid;
    grid-template-columns: minmax(0, 711px) 419px;
    justify-content: center;
    column-gap: 60px;
    padding: 16px 24px 48px;
    margin: 0;
    max-width: none;
}
body.route-checkout .checkout-form { min-width: 0; }
body.route-checkout .co-accordion { gap: 26px; }

/* cards */
body.route-checkout .co-card {
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 16px;
    box-shadow: none;
    overflow: visible;
    transition: none;
}
body.route-checkout .co-card.is-open { border: 2px solid #333; box-shadow: none; }
body.route-checkout .co-card-head { padding: 34px 26px 0; display: flex; align-items: flex-start; gap: 16px; border-radius: 0; }
body.route-checkout .co-card:not(.is-open) .co-card-head { padding: 30px 26px 30px; }
body.route-checkout .co-card-head h3 { font-size: 24px; font-weight: 700; color: #151515; line-height: 1.2; flex: none; }
body.route-checkout .co-card:not(.is-open):not(.is-done) .co-card-head h3 { color: #5c5c5c; }
body.route-checkout .co-card-summary {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    margin-top: 40px;
    font-size: 17px;
    line-height: 1.55;
    color: #4b4b4b;
    white-space: normal;
    overflow: visible;
}
body.route-checkout .co-card-summary:empty { display: none; }
body.route-checkout .co-card.is-done:not(.is-open) .co-card-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 18px; padding: 30px 26px; }
body.route-checkout .co-card.is-done:not(.is-open) .co-card-summary { grid-column: 1 / -1; margin: 0; }
body.route-checkout .co-card-edit { font-size: 17px; font-weight: 700; color: #151515; text-decoration: none; }
body.route-checkout .co-card-body { padding: 26px 26px 30px; }
body.route-checkout .co-card .checkout-group { border: 0; padding: 0; margin: 0; background: none; }
body.route-checkout .co-card .checkout-group + .checkout-group { border: 0; padding: 0; margin: 0; }

/* fields */
body.route-checkout .ez-fields,
body.route-checkout .co-card-body > .form-field { display: block; }
body.route-checkout .ez-field,
body.route-checkout .co-card .form-field { margin: 0 0 24px; padding: 0; background: none; border: 0; }
body.route-checkout .ez-field label,
body.route-checkout .co-card .form-field > label,
body.route-checkout .checkout-dt-field label {
    display: block;
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    color: #151515;
    line-height: 1.3;
}
body.route-checkout .ez-req { font-weight: 700; }
body.route-checkout .ez-opt,
body.route-checkout .co-opt { font-weight: 400; color: #151515; }
body.route-checkout .co-req { color: #151515; }
body.route-checkout .ez-hint,
body.route-checkout .co-hint { margin: -2px 0 12px; font-size: 16px; line-height: 1.55; color: #4b4b4b; }
body.route-checkout .ez-field input[type="text"],
body.route-checkout .ez-field input[type="email"],
body.route-checkout .ez-field input[type="tel"],
body.route-checkout .ez-field input[type="number"],
body.route-checkout .co-card input[type="text"],
body.route-checkout .co-card input[type="email"],
body.route-checkout .co-card input[type="tel"],
body.route-checkout .co-card input[type="number"],
body.route-checkout .co-card select,
body.route-checkout .co-card .wsc-sdt-trigger {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box;
    margin: 0;
    padding: 0 14px !important;
    border: 1px solid #bebebe !important;
    border-radius: 12px !important;
    background: #fff !important;
    font: inherit;
    font-size: 17px !important;
    color: #151515;
    text-align: left;
    text-transform: none !important;
}
body.route-checkout .co-card input:focus,
body.route-checkout .co-card textarea:focus,
body.route-checkout .co-card .wsc-sdt-trigger:focus { outline: none; border-color: #151515 !important; box-shadow: none; }
body.route-checkout .co-card textarea {
    display: block;
    width: 100% !important;
    min-height: 92px;
    box-sizing: border-box;
    padding: 12px 14px !important;
    border: 1px solid #bebebe !important;
    border-radius: 12px !important;
    background: #fff !important;
    font: inherit;
    font-size: 17px !important;
    color: #151515;
    resize: vertical;
}
body.route-checkout .co-card small,
body.route-checkout .co-card .form-help { display: none; }
body.route-checkout .ez-hidden { display: none !important; }
body.route-checkout .ez-zip-status,
body.route-checkout .ez-zip-zone,
body.route-checkout .ez-zip-error:empty { display: none !important; }
body.route-checkout .ez-zip-error { margin: -12px 0 18px; font-size: 15px; color: #b3261e; }

/* rows */
body.route-checkout .ez-row { display: grid; column-gap: 24px; }
body.route-checkout .ez-row-address { grid-template-columns: minmax(0, 1fr) 211px; }
body.route-checkout .ez-row-citystate { grid-template-columns: minmax(0, 1fr) 125px 148px; }
body.route-checkout .ez-row-contact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.route-checkout .ez-row-contact.has-email { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.route-checkout .checkout-datetime { display: grid; grid-template-columns: 316px 316px; column-gap: 22px; margin: 0; }
body.route-checkout .co-card-body > .form-field:first-child { margin-bottom: 0; }
body.route-checkout .co-card-body > .form-field:first-child + .form-field { margin-top: 24px; }
body.route-checkout .co-card [data-co-card="date"] .form-field label,
body.route-checkout [data-co-card="date"] label[for="guest_count"] { margin-top: 0; }
body.route-checkout [data-co-card="date"] .form-field:has(#guest_count) { width: 316px; }

/* radios */
body.route-checkout .ez-radios { display: flex; gap: 32px; margin-top: 4px; }
body.route-checkout .ez-radio { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 400; color: #151515; cursor: pointer; margin: 0; }
body.route-checkout .ez-radio input { width: 24px; height: 24px; margin: 0; accent-color: #151515; }

/* address suggestion */
/* Autocomplete de endereco: a lista flutua ANCORADA no campo, como a do
   ezCater. O campo precisa de position:relative pra isso, e o cartao do
   checkout nao pode recortar (ver a regra de overflow logo abaixo). */
body.route-checkout .ez-field-ac { position: relative; }
body.route-checkout .ez-addr-ac {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
    background: #fff; border: 1px solid #e3e3e3; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(35, 31, 32, .14);
    padding: 6px 0 0; overflow: hidden;
}
body.route-checkout .ez-addr-ac-list { list-style: none; margin: 0; padding: 0; max-height: 288px; overflow-y: auto; }
body.route-checkout .ez-addr-ac-item {
    padding: 10px 16px; font-size: 15px; line-height: 1.35; color: #231f20;
    cursor: pointer; display: block;
}
body.route-checkout .ez-addr-ac-item:hover,
body.route-checkout .ez-addr-ac-item.is-active { background: #f4f2ea; }
body.route-checkout .ez-addr-ac-street { font-weight: 400; }
body.route-checkout .ez-addr-ac-street strong { font-weight: 700; }
body.route-checkout .ez-addr-ac-rest { color: #5c5c5c; }
body.route-checkout .ez-addr-ac-manual {
    display: block; width: 100%; text-align: left; background: none; border: 0;
    border-top: 1px solid #ececec; padding: 12px 16px; font-size: 15px;
    color: #231f20; cursor: pointer; font-family: inherit;
}
body.route-checkout .ez-addr-ac-manual:hover { background: #f4f2ea; }
body.route-checkout .ez-addr-ac-manual span { color: #825d2d; font-weight: 700; margin-right: 4px; }
body.route-checkout .ez-addr-ac-credit {
    margin: 0; padding: 6px 16px 8px; font-size: 11px; color: #8a837b; text-align: right;
}
body.route-checkout .ez-addr-manual-link { margin: -12px 0 24px; }
body.route-checkout .ez-link { border: 0; background: none; padding: 0; font: inherit; font-size: 16px; font-weight: 700; color: #151515; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* actions */
body.route-checkout .co-card-actions { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body.route-checkout .co-required-note { margin: 0; font-size: 15px; color: #606061; }
body.route-checkout .co-save,
body.route-checkout .ez-btn-primary {
    width: auto;
    min-height: 0;
    padding: 12px 26px;
    border: 0;
    border-radius: 999px;
    background: #231f20;
    color: #fff;
    font: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}
body.route-checkout .ez-btn-sm { padding: 9px 18px; font-size: 15px; }

/* extras behind a toggle: same type as the labels, no chrome */
body.route-checkout .co-prefs { border-top: 1px solid #e3e3e3; margin-top: 4px; }
body.route-checkout .co-prefs > summary { padding: 18px 0; font-size: 17px; font-weight: 700; color: #151515; }
body.route-checkout .co-prefs .co-optline { border-top: 1px solid #e3e3e3 !important; padding: 16px 0 !important; }
body.route-checkout .co-prefs .co-optline strong { font-size: 17px; font-weight: 700; }
body.route-checkout .co-prefs .co-optline small { display: block; font-size: 15px; color: #4b4b4b; }
body.route-checkout .quantity-control.co-stands { width: auto; grid-template-columns: 36px 52px 36px; gap: 6px; }
body.route-checkout .quantity-control.co-stands button { width: 36px; height: 36px; font-size: 18px; }
body.route-checkout .quantity-control.co-stands input { height: 36px !important; min-height: 36px !important; padding: 0 !important; text-align: center; font-size: 15px !important; }

/* payment */
body.route-checkout .ez-paylist { display: grid; gap: 22px; }
body.route-checkout .ez-payrow {
    display: grid;
    grid-template-columns: 24px 84px minmax(0, 1fr);
    align-items: center;
    column-gap: 22px;
    padding: 18px 22px;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
}
body.route-checkout .ez-payrow.is-on { border-color: #151515; }
body.route-checkout .ez-payrow.is-off { cursor: default; opacity: .6; }
body.route-checkout .ez-payrow input[type="radio"] { width: 24px; height: 24px; margin: 0; accent-color: #151515; }
body.route-checkout .ez-payradio { width: 22px; height: 22px; border: 1px solid #bebebe; border-radius: 50%; }
body.route-checkout .ez-payicon { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 10px; background: #eef4fb; color: #1a5f3a; }
body.route-checkout .ez-paycopy strong { display: block; font-size: 18px; font-weight: 700; color: #151515; }
body.route-checkout .ez-paycopy small { display: block; margin-top: 4px; font-size: 16px; color: #4b4b4b; line-height: 1.5; }

/* summary column */
body.route-checkout .checkout-sidebar { display: block; position: sticky; top: 16px; align-self: start; }
body.route-checkout .checkout-summary {
    display: block;
    padding: 24px 24px 20px;
    border: 1px solid #e3e3e3;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
body.route-checkout .ez-sum-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
body.route-checkout .ez-sum-from { display: block; font-size: 17px; color: #4b4b4b; margin-bottom: 4px; }
body.route-checkout .ez-sum-name { font-size: 22px; font-weight: 400; color: #151515; }
body.route-checkout .ez-sum-logo { display: flex; align-items: center; justify-content: center; width: 108px; height: 60px; border: 1px solid #e3e3e3; border-radius: 6px; background: #fff; }
body.route-checkout .ez-sum-logo img { max-width: 84px; max-height: 40px; }
body.route-checkout .ez-sum-block { border-top: 1px solid #e3e3e3; }
body.route-checkout .ez-sum-block > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 20px; font-weight: 700; color: #151515; cursor: pointer; }
body.route-checkout .ez-sum-block > summary::-webkit-details-marker { display: none; }
body.route-checkout .ez-sum-block[open] > summary svg { transform: rotate(180deg); }
body.route-checkout .ez-sum-edit { font-size: 17px; font-weight: 700; color: #151515; text-decoration: underline; text-underline-offset: 3px; margin-left: 6px; }
body.route-checkout .ez-sum-items { list-style: none; margin: 0 0 14px; padding: 0; }
body.route-checkout .ez-sum-items li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 16px; color: #151515; }
body.route-checkout .ez-sum-promos .coupon-panel { margin: 0 0 14px; padding: 0; background: none; border: 0; }
body.route-checkout .ez-sum-promos .coupon-panel > label { display: none; }
body.route-checkout .ez-sum-promos .coupon-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
body.route-checkout .ez-sum-promos .coupon-input { min-width: 0 !important; height: 44px; padding: 0 14px; border: 1px solid #bebebe; border-radius: 12px; font-size: 16px; }
body.route-checkout .ez-sum-promos .coupon-controls .btn { height: 44px; padding: 0 16px; border-radius: 999px; font-size: 15px; }
body.route-checkout .ez-sum-promos small { display: block; margin-top: 8px; font-size: 14px; color: #4b4b4b; }
body.route-checkout .ez-sum-promos .co-taxexempt { border-top: 1px solid #e3e3e3; margin: 0 0 12px; }
body.route-checkout .ez-sum-promos .co-taxexempt > summary { padding: 14px 0; font-size: 16px; font-weight: 700; color: #151515; }
body.route-checkout .ez-sum-promos .co-taxexempt label { font-size: 15px; }
body.route-checkout .ez-sum-lines { border-top: 1px solid #e3e3e3; padding: 16px 0; }
body.route-checkout .ez-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 18px; color: #151515; }
body.route-checkout .ez-line strong { font-weight: 400; }
body.route-checkout .ez-line small { font-size: 14px; color: #4b4b4b; }
body.route-checkout .ez-sum-tipblock { border-top: 1px solid #e3e3e3; padding: 16px 0 6px; }
body.route-checkout .ez-sum-tipblock .tip-selector { margin: 8px 0 0; padding: 0; background: none; border: 0; }
body.route-checkout .ez-sum-tipblock .tip-selector > label { display: none; }
body.route-checkout .ez-sum-tipblock .tip-btn-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
body.route-checkout .ez-sum-tipblock .tip-preset {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 60px;
    margin: 0;
    padding: 8px 4px !important;
    border: 0 !important;
    border-right: 1px solid #333 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #151515 !important;
    font: inherit;
    line-height: 1.15;
    box-shadow: none !important;
}
body.route-checkout .ez-sum-tipblock .tip-preset:last-child { border-right: 0 !important; }
body.route-checkout .ez-sum-tipblock .tip-preset-pct { font-size: 17px; font-weight: 700; }
body.route-checkout .ez-sum-tipblock .tip-preset-amt { font-size: 15px; color: #4b4b4b; }
body.route-checkout .ez-sum-tipblock .tip-suggested-badge { display: none; }
body.route-checkout .ez-sum-tipblock .tip-preset.tip-preset-active { background: #d7fcdc !important; box-shadow: inset 0 0 0 2px #0a8f3c !important; }
body.route-checkout .ez-sum-tipblock .tip-preset.tip-preset-active .tip-preset-amt { color: #0a6b2f; }
body.route-checkout .ez-sum-tipblock #tip-custom-row { margin-top: 10px; }
body.route-checkout .ez-sum-tipblock #tip-custom-row input { height: 40px; padding: 0 12px; border: 1px solid #bebebe; border-radius: 10px; font-size: 15px; }
body.route-checkout .ez-sum-tipblock .tip-current-row { display: none; }
body.route-checkout .ez-sum-tipnote { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: #4b4b4b; }
body.route-checkout .ez-sum-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid #e3e3e3; margin-top: 12px; padding: 22px 0 0; font-size: 24px; font-weight: 700; color: #151515; }
body.route-checkout .ez-sum-pp { margin: 4px 0 0; text-align: right; font-size: 18px; color: #151515; }
body.route-checkout .checkout-summary > small { display: none; }
body.route-checkout .checkout-submit-bar,
body.route-checkout .checkout-sidebar .checkout-submit-bar {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 22px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none;
    grid-column: auto;
}
body.route-checkout .checkout-submit-bar .btn {
    width: 100%;
    min-height: 60px;
    border-radius: 999px;
    border: 0;
    background: #231f20;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}
body.route-checkout .checkout-submit-bar .btn[disabled] { background: #ececec; color: #8a8a8a; }
body.route-checkout .checkout-submit-bar .btn [data-checkout-total-inline] { display: none; }
body.route-checkout .checkout-submit-bar p { margin: 0 0 10px; font-size: 14px; }
body.route-checkout .ez-sum-cancel { margin: 22px 0 0; text-align: center; font-size: 16px; color: #4b4b4b; }
body.route-checkout .cat-site-footer { background: #fff; border-top: 0; color: #4b4b4b; padding: 20px 0 40px; }

/* phone: one column, same rules */
@media (max-width: 1099px) {
    body.route-checkout .checkout-layout { grid-template-columns: minmax(0, 1fr); padding: 8px 16px 40px; }
    body.route-checkout .checkout-sidebar { position: static; margin-top: 26px; }
}
@media (max-width: 720px) {
    body.route-checkout .checkout-chrome { padding: 14px 16px; }
    body.route-checkout .co-card-head { padding: 24px 18px 0; }
    body.route-checkout .co-card:not(.is-open) .co-card-head,
    body.route-checkout .co-card.is-done:not(.is-open) .co-card-head { padding: 22px 18px; }
    body.route-checkout .co-card-body { padding: 20px 18px 24px; }
    body.route-checkout .co-card-head h3 { font-size: 22px; }
    body.route-checkout .checkout-datetime { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
    body.route-checkout [data-co-card="date"] .form-field:has(#guest_count) { width: 100%; }
    /* Address e Suite/floor empilham no telefone. Lado a lado sobrava cerca
       de 200px pra rua, apertado pra digitar e estreito demais pra lista de
       sugestoes, que ancora na largura do campo. */
    body.route-checkout .ez-row-address { grid-template-columns: minmax(0, 1fr); column-gap: 12px; }
    body.route-checkout .ez-row-citystate { grid-template-columns: minmax(0, 1fr) 72px 110px; column-gap: 12px; }
    body.route-checkout .ez-row-contact,
    body.route-checkout .ez-row-contact.has-email { grid-template-columns: minmax(0, 1fr); }
    body.route-checkout .ez-payrow { grid-template-columns: 24px 64px minmax(0, 1fr); column-gap: 14px; padding: 14px; }
    body.route-checkout .ez-payicon { width: 64px; height: 64px; }
    body.route-checkout .co-card-actions { flex-direction: column-reverse; align-items: stretch; }
    body.route-checkout .co-save { width: 100%; }
    body.route-checkout .checkout-summary { padding: 20px 18px; }
}

/* Checkout follow-ups from the production check.
   A legacy ".checkout-summary > div { display:flex }" was laying out every
   block of the summary as a flex row, which squeezed the tip control to
   105px; and .pickup-main is capped at 1032px on this route, which shrank
   the form column to 505px instead of the print's 711px. */
body.route-checkout .checkout-summary > div { display: block; }
body.route-checkout .checkout-summary > .ez-sum-head,
body.route-checkout .checkout-summary .ez-line,
body.route-checkout .checkout-summary > .ez-sum-total { display: flex; }
body.route-checkout .checkout-summary .tip-selector { display: block; width: 100%; }
body.route-checkout .checkout-summary .tip-btn-row { display: grid !important; width: 100%; }
body.route-checkout .pickup-app,
body.route-checkout .pickup-main-wrap,
body.route-checkout .pickup-main,
body.route-checkout main {
    max-width: none !important;
    width: 100% !important;
    min-width: 0;
}
html, body.route-checkout { min-width: 0; }
body.route-checkout .checkout-chrome { min-width: 0; }
body.route-checkout .checkout-chrome > * { min-width: 0; }
body.route-checkout .tip-suggested-badge { display: none !important; }

/* The generic checkout input rule (width:100% !important) was reaching the
   hidden native <select> behind the custom time control and stretching it
   to the viewport: that was the whole horizontal overflow on this page. */
body.route-checkout .co-card select.wsc-dtp-hidden-field,
body.route-checkout .co-card input.wsc-dtp-hidden-field {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
body.route-checkout .checkout-dt-field { position: relative; }
/* Closed extras stay closed whatever display the field rules set. */
body.route-checkout .co-prefs:not([open]) > :not(summary) { display: none !important; }
/* [hidden] must beat the row's grid display, or the manual City/State/ZIP
   row and the suggestion box show before the customer asks for them. */
body.route-checkout .ez-row[hidden],
body.route-checkout .ez-addr-ac[hidden],
body.route-checkout .ez-addr-manual-link[hidden],
body.route-checkout .co-card [hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Checkout and header detail pass (2026-09-02, late).
   ═══════════════════════════════════════════════════════════════════════ */

/* 1: promo code is one white field and one small Apply. */
body.route-checkout .ez-sum-promos .coupon-controls { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
body.route-checkout .ez-sum-promos .coupon-input {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    background: #fff !important;
    border: 1px solid #bebebe !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    letter-spacing: normal !important;
}
body.route-checkout .ez-sum-promos .coupon-controls .btn {
    height: 40px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid #bebebe;
    border-radius: 10px;
    background: #fff;
    color: #151515;
    font-size: 15px;
    font-weight: 700;
}
body.route-checkout .ez-sum-promos .coupon-controls .btn:hover { background: #f4f4f4; }

/* 2: the file picker carried the cream field styling. */
body.route-checkout #tax_exempt_file,
body.route-checkout .co-taxexempt input[type="file"] {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 14px !important;
}
body.route-checkout .co-taxexempt { padding-bottom: 12px; }

/* 3: the selected tip cell had a 3px focus outline on top of its ring,
   which read as a second border with the wrong corners. */
body.route-checkout .ez-sum-tipblock .tip-preset,
body.route-checkout .ez-sum-tipblock .tip-preset:focus,
body.route-checkout .ez-sum-tipblock .tip-preset:focus-visible,
body.route-checkout .ez-sum-tipblock .tip-preset:active { outline: 0 !important; }
body.route-checkout .ez-sum-tipblock .tip-preset.tip-preset-active {
    background: #d7fcdc !important;
    box-shadow: inset 0 0 0 2px #0a8f3c !important;
    border-right-color: #0a8f3c !important;
}

/* 4: the radio and its word keep a real gap and one centre line. */
body.route-checkout .ez-radio { display: inline-flex; align-items: center; gap: 0; }
body.route-checkout .ez-radio input[type="radio"] {
    flex: none;
    width: 22px !important;
    height: 22px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: none !important;
    appearance: auto !important;
    -webkit-appearance: radio !important;
}
body.route-checkout .ez-radio > span {
    display: inline-block;
    margin-left: 12px;
    font-size: 17px;
    line-height: 22px;
}

/* 5: cart preview, ezCater's panel: white, no inner card, hairline rules. */
.hdr-cart-pop .hdr-cartcard {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.hdr-cart-pop .hdr-cartcard-items {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 12px 0 0;
    margin-top: 10px;
    border-top: 1px solid #ececec;
}
.hdr-cart-pop .hdr-cartcard-list { background: none; border: 0; padding: 0; margin: 0; }
.hdr-cart-pop .hdr-cartcard-line { padding: 7px 0; border-bottom: 1px solid #ececec; }
.hdr-cart-pop .hdr-cartcard-line:last-child { border-bottom: 0; }
.hdr-cart-pop .hdr-cartcard-totals { padding: 10px 0 0; margin-top: 4px; border-top: 1px solid #ececec; }
.hdr-cart-pop .hdr-cartcard-photo { border-radius: 10px; }
.hdr-cart-pop .hdr-cartcard-actions { padding-top: 12px; }

/* 6: the event sheet uses the custom controls now, so the native pair is
   pinned out of the layout there too. */
.order-details-form .wsc-dtp-hidden-field {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.order-details-form .wsc-sdt-trigger {
    min-height: 46px;
    border: 1px solid var(--cat-border);
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
}
.order-details-form .od-datetime .od-fieldicon { display: block; }
/* The radio label was matching the generic field-label rule (block, 700),
   which dropped its word 5px below the circle and made it bold. */
body.route-checkout .ez-field label.ez-radio {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0;
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
    cursor: pointer;
}
body.route-checkout .ez-field label.ez-radio > span {
    display: inline-block;
    margin-left: 12px;
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Detail pass (2026-09-03).
   ═══════════════════════════════════════════════════════════════════════ */

/* A: the product page still carried the floating-card shadow on desktop,
   whose bottom edge read as a stray rule under the content. */
@media (min-width: 1024px) {
    body[class*="route-product-"] .product-sheet {
        box-shadow: none;
        border-radius: 0;
        border: 0;
        background: transparent;
    }
}

/* B: the dietary marks stand alone; the word lives in the tooltip. */
.product-diet-chip { gap: 0; }

/* C: the selected tip cell is drawn by an overlay with its own radius, so
   it can no longer stack with the divider borders or fight the row's
   rounded corners. */
body.route-checkout .ez-sum-tipblock .tip-preset { position: relative; }
body.route-checkout .ez-sum-tipblock .tip-preset.tip-preset-active {
    background: #d7fcdc !important;
    box-shadow: none !important;
    border-right-color: #333 !important;
}
body.route-checkout .ez-sum-tipblock .tip-preset.tip-preset-active::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid #0a8f3c;
    border-radius: 10px;
    pointer-events: none;
}

/* D: drawer icons share one 24px box so every glyph sits on the same
   optical centre, whatever padding its own artwork carries. */
.cat-drawer-item > svg,
.cat-drawer-item > img {
    flex: none;
    width: 24px;
    height: 24px;
    padding: 2px;
    box-sizing: border-box;
    display: block;
}

/* G: address and suite share a baseline even when one label wraps. */
body.route-checkout .ez-row { align-items: end; }
body.route-checkout .ez-row > .ez-field { margin-bottom: 24px; }
/* D: ".cat-drawer-nav a" was padding the links 20px while the buttons kept
   14px, so half the drawer's glyphs sat 6px further right than the rest. */
.cat-drawer-nav a.cat-drawer-item,
.cat-drawer-nav button.cat-drawer-item,
.cat-drawer-nav .cat-drawer-item { padding: 14px 20px; gap: 14px; }

/* ═══════════════════════════════════════════════════════════════════════
   Fix pass (2026-09-03, second).
   ═══════════════════════════════════════════════════════════════════════ */

/* TIP: the fill and the ring are now one shape. Painting the background on
   the cell while the border lived on an overlay meant the green rectangle
   spilled past the ring's rounded corners, and the cell's own divider drew
   a straight dark line down the selected edge. */
body.route-checkout .ez-sum-tipblock .tip-preset.tip-preset-active {
    background: #fff !important;
    box-shadow: none !important;
    border-right-color: transparent !important;
}
body.route-checkout .ez-sum-tipblock .tip-preset.tip-preset-active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #d7fcdc;
    border: 2px solid #0a8f3c;
    border-radius: 10px;
    pointer-events: none;
}
/* The divider immediately before the selection would double its left edge. */
body.route-checkout .ez-sum-tipblock .tip-preset:has(+ .tip-preset-active) {
    border-right-color: transparent !important;
}
body.route-checkout .ez-sum-tipblock .tip-preset > span { position: relative; z-index: 1; }

/* PRODUCT PAGE on desktop is a dialog over a dimmed page, so it keeps its
   card. What was drawing the rule under it is the sticky add-to-cart bar's
   top border, and its square corners overhung the card's radius. */
@media (min-width: 1024px) {
    body[class*="route-product-"] .product-sheet {
        background: #fffcf4;
        border-radius: 16px;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
        overflow: visible;
        max-height: none;
    }
    body[class*="route-product-"] .product-sticky-bar {
        border-top: 0 !important;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        background: #fffcf4 !important;
    }
    body[class*="route-product-"] .product-sheet-hero img,
    body[class*="route-product-"] .product-sheet-hero video {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }
}

/* The order button centres its label on every width. */
body.route-checkout .checkout-submit-bar .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0;
}
/* Every label inside a tip cell sits above the selection overlay, including
   a text node that arrives without a wrapper. */
body.route-checkout .ez-sum-tipblock .tip-preset > * { position: relative; z-index: 1; }

/* TIP, root cause: the page's own <style> pins .tip-preset to min-width 88px
   while the five grid tracks are ~73px, so every cell overflowed 15px under
   its neighbour. The next cell's white background then painted over the
   selected ring, which is why its right side looked square and the fill
   seemed to leak past the border. Let the cells fit their track. */
body.route-checkout .ez-sum-tipblock .tip-preset {
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* PRODUCT hero: the container carries its own placeholder background, so it
   needs the card's radius; rounding only the image left the container's
   square corners showing behind it. */
@media (min-width: 1024px) {
    body[class*="route-product-"] .product-sheet-hero {
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        overflow: hidden;
    }
    body[class*="route-product-"] .product-sheet-hero img,
    body[class*="route-product-"] .product-sheet-hero video { border-radius: 0; }
}

/* The value cells only draw an edge when they are the selection. */
body.route-checkout .ez-sum-tipblock .tip-preset,
body.route-checkout .ez-sum-tipblock .tip-preset:last-child { border-right: 0 !important; }

/* Custom amount uses the promo code control, field and button alike. */
body.route-checkout .ez-tipcustom {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 10px;
}
body.route-checkout .ez-tipcustom input {
    height: 40px;
    min-height: 40px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #bebebe;
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    color: #151515;
}
body.route-checkout .ez-tipcustom input:focus { outline: none; border-color: #151515; }
body.route-checkout .ez-tipcustom .btn {
    height: 40px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid #bebebe;
    border-radius: 10px;
    background: #fff;
    color: #151515;
    font-size: 15px;
    font-weight: 700;
}
body.route-checkout .ez-tipcustom .btn:hover { background: #f4f4f4; }
/* Match the promo field exactly: the global 16px input size was winning. */
body.route-checkout .ez-tipcustom input { font-size: 15px !important; }
/* Both fields sit at the 16px platform floor: anything smaller makes iOS
   zoom the page when the field takes focus. My earlier 15px on the promo
   input was the odd one out, not the tip field. */
body.route-checkout .ez-sum-promos .coupon-input,
body.route-checkout .ez-tipcustom input { font-size: 16px !important; }

/* ═══════════════════════════════════════════════════════════════════════
   Product page: modifier list and the add bar, sized like ezCater's.
   Fluid so the same rules serve phone and desktop.
   ═══════════════════════════════════════════════════════════════════════ */
.modifier-option-text {
    font-size: clamp(15px, 1.1vw + 12px, 17px);
    line-height: 1.35;
    color: #151515;
}
.modifier-option-description {
    font-size: clamp(12.5px, 0.6vw + 11px, 14px);
    line-height: 1.4;
    color: #4b4640;
}
.modifier-option-price {
    font-size: clamp(15px, 1.1vw + 12px, 17px);
    color: #151515;
    white-space: nowrap;
}
.modifier-option { min-height: 52px; }
.modifier-group > header h3 { font-size: clamp(16px, 1.2vw + 12px, 19px); color: #151515; }

/* The add bar is a pill, and it says what is still missing. */
.product-add-btn { border-radius: 999px; }
.product-add-btn-label { font-size: clamp(15px, 1vw + 12px, 17px); font-weight: 600; }
.product-add-btn.is-incomplete { background: #231f20; }

/* "Add special instructions" reads as a link, not a control. */
.special-instructions-toggle {
    font-size: clamp(14px, 0.8vw + 12px, 16px) !important;
    font-weight: 400 !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    gap: 8px;
}
.special-instructions-toggle img,
.special-instructions-toggle svg { width: 16px; height: 16px; }
/* An older rule pinned the add bar to var(--radius) with !important. */
.product-sticky-bar .product-add-btn,
.product-add-btn { border-radius: 999px !important; }
/* The amount sits in a <strong> with its own size and colour; match it to
   the option's own text instead of styling only the wrapper. */
.modifier-option-price strong,
.modifier-option-price span:not([style*="color"]) {
    font-size: clamp(15px, 1.1vw + 12px, 17px);
    font-weight: 400;
    color: #151515;
}
/* Stops the sticky header from covering a group we just scrolled to. */
.modifier-group { scroll-margin-top: calc(var(--cat-header-h, 56px) + 16px); }
/* The View Cart bar on the menu takes the same pill as the add bar. */
.cat-cart-strip a { border-radius: 999px !important; }
/* Adding items to an existing order: the event is locked, so the pair of
   disabled native widgets (a filled date input is wider than its select)
   gives way to the date in plain text. */
body.route-checkout .checkout-datetime.is-locked { display: none !important; }
body.route-checkout .co-locked-when {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #151515;
}

/* ═══════════════════════════════════════════════════════════════════════
   Barra de aviso inferior (2026-09-04).
   Mesma posicao da barra de "Make N required selection" da pagina de
   produto: erro de formulario nasce onde o olho do cliente ja esta, em vez
   de virar uma linha de texto perdida no meio da pagina.
   ═══════════════════════════════════════════════════════════════════════ */
.wsc-warnbar {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 120%);
    z-index: 1400;
    width: min(560px, calc(100% - 24px));
    margin-bottom: max(12px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #231f20;
    color: #f1f1e3;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: 0 10px 30px rgba(35, 31, 32, .28);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease;
}
.wsc-warnbar.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}
.wsc-warnbar-msg { flex: 1 1 auto; min-width: 0; }
.wsc-warnbar-close {
    flex: 0 0 auto;
    background: none;
    border: 0;
    color: #f1f1e3;
    font-size: 22px;
    line-height: 1;
    padding: 0 2px;
    cursor: pointer;
    opacity: .75;
}
.wsc-warnbar-close:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .wsc-warnbar { transition: opacity .01s linear; transform: translate(-50%, 0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Chat na pagina de acompanhamento do pedido (2026-09-04).
   No storefront o botao fica escondido no telefone porque colidia com a
   barra "View Cart". Naquela pagina nao existe carrinho nenhum, e o chat e
   justamente o canal que o rodape manda usar, entao ali ele aparece nos dois
   tamanhos. Regra no fim do arquivo de proposito: empata em especificidade
   com o `display: none` acima e vence pela ordem.
   ═══════════════════════════════════════════════════════════════════════ */
body.route-order-tracking .wsc-chat-fab { display: inline-flex; }
body.route-order-tracking .wsc-chat-fab.is-hidden { display: none; }