:root {
    --fp-brand: #00C896;
    --fp-brand-dark: #009E78;
    --fp-brand-light: #E6FAF5;
    --fp-navy: #0D1B2A;
    --fp-slate: #3D4A5C;
    --fp-muted: #8E9BAD;
    --fp-bg: #FFFFFF;
    --fp-card-bg: #FFFFFF;
    --fp-border: #EFF2F6;
    --fp-shadow-sm: 0 2px 12px rgba(13, 27, 42, 0.07);
    --fp-shadow-md: 0 8px 32px rgba(13, 27, 42, 0.12);
    --fp-radius: 18px;
    --fp-radius-sm: 12px;
}

body.food-page {
    background: var(--fp-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--fp-navy);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* When #app is in its natural visible state, show both bottom
   elements. */
body:has(#app:not([hidden])) .bottom-nav.mobile-only { display: grid; }
body:has(#app:not([hidden])) .bottom-cart-attached.mobile-only:not(.d-none) { display: block; }

/* Hide bottom-nav whenever any overlay or offcanvas is open */
body:has(.fp-detail.open) .bottom-nav,
body:has(.fp-sheet.open) .bottom-nav,
body:has(.fp-cart.open) .bottom-nav,
body:has(.fp-co.open) .bottom-nav,
body:has(.fp-opt-sheet.open) .bottom-nav,
body:has(.rv-sheet.open) .bottom-nav,
body:has(.offcanvas.show) .bottom-nav { display: none !important; }

.food-page #app {
    max-width: 720px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--fp-bg);
    position: relative;
    padding-bottom: 90px;
}

/* ─── Header (sticky search) ─────────────────────────────── */
/* Both containers paint the same orange→white wash. */
.food-page .fp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(180deg,
        rgba(249, 125, 9, 0.281) 0%,
        rgba(255, 255, 255, 1) 100%);
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, white 0%, #F97D09 15%, #F97D09 85%, white 100%) 1;
    padding: 10px 14px;
}

.food-page .fp-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.food-page .fp-back {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fp-navy);
    text-decoration: none;
    transition: background .15s;
}

.food-page .fp-back:active { background: #F4F6F9; }

.food-page .fp-search {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: #F4F6F9;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 0 12px;
    transition: border-color .15s, background .15s;
}

.food-page .fp-search:focus-within {
    background: #fff;
    border-color: var(--fp-brand);
}

.food-page .fp-search i.bi-search {
    color: var(--fp-muted);
    font-size: 16px;
}

.food-page .fp-search input {
    flex: 1;
    border: 0;
    background: transparent;
    outline: none;
    padding: 12px 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--fp-navy);
}

.food-page .fp-search input::placeholder { color: var(--fp-muted); }

.food-page .fp-clear {
    display: none;
    background: transparent;
    border: 0;
    color: var(--fp-muted);
    font-size: 18px;
    padding: 4px 6px;
    cursor: pointer;
    line-height: 1;
}

.food-page .fp-search.has-value .fp-clear { display: inline-flex; }

/* ─── Page title strip ───────────────────────────────────── */
.food-page .fp-titlebar {
    padding: 14px 16px 6px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.food-page .fp-titlebar h1 {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--fp-navy);
    margin: 0;
    letter-spacing: -.3px;
}

.food-page .fp-titlebar .fp-count {
    font-size: 12px;
    color: var(--fp-muted);
    font-weight: 600;
}

/* ─── Filter bar (horizontal chips) ──────────────────────── */
.food-page .fp-filter-bar {
    position: sticky;
    top: 60px;
    z-index: 40;
    background: #fff;
    border-bottom: 1px solid var(--fp-border);
    padding: 8px 0 10px;
}

.food-page .fp-filter-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 14px 4px;
    scrollbar-width: none;
}

.food-page .fp-filter-scroll::-webkit-scrollbar { display: none; }

.food-page .fp-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #F4F6F9;
    border: 1px solid transparent;
    border-radius: 999px;
    font: 600 12.5px/1 'Inter', sans-serif;
    color: var(--fp-slate);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.food-page .fp-chip i { font-size: 13px; }

.food-page .fp-chip:active { transform: scale(.97); }

.food-page .fp-chip.active {
    background: var(--fp-brand-light);
    color: var(--fp-brand-dark);
    border-color: rgba(0, 200, 150, .35);
}

.food-page .fp-chip.fp-chip-filter {
    background: var(--fp-navy);
    color: #fff;
}

.food-page .fp-chip.fp-chip-filter.has-filter {
    background: var(--fp-brand-dark);
}

.food-page .fp-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #fff;
    color: var(--fp-navy);
    font-size: 10px;
    font-weight: 800;
    border-radius: 99px;
}

.food-page .fp-chip-count.d-none { display: none; }

.food-page .fp-divider {
    flex-shrink: 0;
    width: 1px;
    background: var(--fp-border);
    margin: 4px 4px;
}

/* ─── Grid (recipe-card style) ──────────────────────────── */
/* Strict 3-column grid on every viewport — mobile included. */
.food-page .fp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 14px;
    padding: 12px 14px 16px;
    margin-bottom: 8px;
}

/* Card chrome compresses on narrow phones so 3 cards still fit
   comfortably in viewports as small as ~320px. */
@media (max-width: 540px) {
    .food-page .fp-grid {
        gap: 8px;
        padding: 8px 10px 16px;
    }
    .food-page .fp-card .info {
        padding: 8px 8px 10px;
        gap: 4px;
    }
    .food-page .fp-card .info h5      { font-size: 12px; }
    .food-page .fp-card .desc         { font-size: 10.5px; }
    .food-page .fp-card .price        { font-size: 12.5px; }
    .food-page .fp-card .rating,
    .food-page .fp-card .views        { font-size: 10px; }
    .food-page .fp-card .thumb .time-badge,
    .food-page .fp-card .thumb .people-badge,
    .food-page .fp-card .thumb .spice-badge {
        font-size: 9px;
        padding: 2px 6px;
    }
    /* Drop the "Add" word — keep just the + icon — so the button
       and price both fit in a ~108px-wide info column. */
    .food-page .fp-card .price-row .fp-add-btn span {
        display: none;
    }
    .food-page .fp-card .price-row .fp-add-btn {
        min-width: 30px;
        min-height: 28px;
        padding: 5px 8px;
        box-shadow: 0 3px 8px rgba(249, 125, 9, .28);
    }
    .food-page .fp-card .price-row .fp-add-btn i {
        font-size: 12px;
        margin: 0;
    }
    .food-page .fp-card .fp-stepper {
        min-height: 28px;
    }
    .food-page .fp-card .fp-step {
        min-width: 22px;
        padding: 0 5px;
        font-size: 12.5px;
    }
    .food-page .fp-card .fp-step-qty {
        min-width: 18px;
        font-size: 11px;
    }
}

/* Very narrow phones — tighten further but keep 3 columns. */
@media (max-width: 380px) {
    .food-page .fp-grid {
        gap: 6px;
        padding: 6px 8px 14px;
    }
    .food-page .fp-card .info h5 { font-size: 11.5px; }
    .food-page .fp-card .desc    { font-size: 10px; }
    .food-page .fp-card .price   { font-size: 11.5px; }
}

.food-page .fp-card {
    border-radius: var(--fp-radius-sm);
    overflow: hidden;
    background: var(--fp-card-bg);
    box-shadow: var(--fp-shadow-sm);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    border: 1px solid var(--fp-border);
    display: flex;
    flex-direction: column;
}

.food-page .fp-card:active {
    transform: scale(.97);
    box-shadow: var(--fp-shadow-md);
}

.food-page .fp-card .thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: #f0f0f0;
    overflow: hidden;
}

.food-page .fp-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s;
}

.food-page .fp-card:hover .thumb img { transform: scale(1.05); }

.food-page .fp-card .thumb .fp-badge-row {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.food-page .fp-card .thumb .time-badge {
    background: rgba(13, 27, 42, .75);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 99px;
    padding: 3px 9px;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.food-page .fp-card .thumb .people-badge {
    background: rgba(13, 27, 42, .75);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 99px;
    padding: 3px 9px;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.food-page .fp-card .thumb .spice-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(255, 255, 255, .96);
    color: #B91C1C;
    font-size: 10px;
    font-weight: 700;
    border-radius: 99px;
    padding: 3px 9px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.food-page .fp-card .thumb .spice-badge.lvl-none   { color: #475569; }
.food-page .fp-card .thumb .spice-badge.lvl-mild   { color: #047857; }
.food-page .fp-card .thumb .spice-badge.lvl-medium { color: #B45309; }
.food-page .fp-card .thumb .spice-badge.lvl-hot    { color: #B91C1C; }
.food-page .fp-card .thumb .spice-badge.lvl-x-hot  { color: #7F1D1D; background: #FEE2E2; }

.food-page .fp-card .info {
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.food-page .fp-card .info h5 {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--fp-navy);
    line-height: 1.35;
    margin: 0;
    /* Title clamps to 1 line so the description below has predictable
       room; cards keep equal heights via the explicit min-height. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.35em;
}

/* Single-line product description with ellipsis. */
.food-page .fp-card .desc {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--fp-muted);
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.35em;
}

/* Price + Add-Order row. Price hugs the left, Add button the right. */
.food-page .fp-card .price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.food-page .fp-card .price {
    font-size: 14px;
    font-weight: 800;
    color: var(--fp-brand-dark);
    letter-spacing: -.2px;
    white-space: nowrap;
}

/* Orange three-stop gradient — matches the floating cart bar so Add/stepper
   controls feel like part of one unified commerce surface. */
.food-page .fp-add-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 72px;
    min-height: 32px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #FB8E26 0%, #F97D09 60%, #DF6B00 100%);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font: 800 11.5px/1 'Inter', sans-serif;
    letter-spacing: .2px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(249, 125, 9, .30);
    transition: transform .12s ease, box-shadow .18s ease, filter .12s ease;
    white-space: nowrap;
}

.food-page .fp-add-btn:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(249, 125, 9, .42), 0 2px 6px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

.food-page .fp-add-btn:active {
    transform: scale(.95);
    box-shadow: 0 2px 6px rgba(249, 125, 9, .30);
}

.food-page .fp-add-btn:focus-visible {
    outline: 2.5px solid #B85800;
    outline-offset: 2px;
}

.food-page .fp-add-btn i {
    font-size: 13px;
    margin-right: 1px;
}

.food-page .fp-add-btn.added {
    background: var(--fp-navy);
    box-shadow: 0 4px 12px rgba(13, 27, 42, .28);
}

.food-page .fp-card .stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
}

.food-page .fp-card .rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--fp-navy);
}

.food-page .fp-card .rating i { color: #F59E0B; font-size: 11px; }

.food-page .fp-card .views {
    font-size: 11px;
    color: var(--fp-muted);
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ─── Loading / End-of-list sentinel ────────────────────── */
.food-page .fp-sentinel,
.food-page .fp-end {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 20px 20px;
    color: var(--fp-muted);
    font: 600 13px/1 'Inter', sans-serif;
    letter-spacing: .2px;
}

.food-page .fp-sentinel[hidden],
.food-page .fp-end[hidden] { display: none; }

.food-page .fp-end {
    color: #B3BCC8;
    font-size: 12px;
}

.food-page .fp-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid #E2E8F0;
    border-top-color: var(--fp-brand);
    border-radius: 50%;
    animation: fpSpin .8s linear infinite;
}

@keyframes fpSpin { to { transform: rotate(360deg); } }

/* ─── Skeleton shimmer ──────────────────────────────────── */
@keyframes fpShimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.food-page .fp-skel {
    background: linear-gradient(90deg, #EEF2F6 0%, #F7F9FC 50%, #EEF2F6 100%);
    background-size: 800px 100%;
    animation: fpShimmer 1.4s ease infinite;
}

/* ─── Empty state ───────────────────────────────────────── */
.food-page .fp-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px 40px;
    color: var(--fp-muted);
}

.food-page .fp-empty .fp-empty-icon {
    font-size: 48px;
    color: #D5DBE3;
    margin-bottom: 14px;
}

.food-page .fp-empty h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--fp-navy);
    margin: 0 0 6px;
}

.food-page .fp-empty p {
    font-size: 13px;
    margin: 0 0 14px;
}

.food-page .fp-empty button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--fp-brand);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font: 700 12.5px/1 'Inter', sans-serif;
    cursor: pointer;
}

/* ─── Bottom filter sheet ───────────────────────────────── */
.food-page .fp-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 27, 42, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease;
    z-index: 1050;
}

.food-page .fp-sheet-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.food-page .fp-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 22px 22px 0 0;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .26s cubic-bezier(.32, .72, 0, 1);
    z-index: 1051;
    box-shadow: 0 -16px 48px rgba(13, 27, 42, .22);
}

.food-page .fp-sheet.open { transform: translateY(0); }

.food-page .fp-sheet-handle {
    width: 38px;
    height: 4px;
    background: #DCE2EB;
    border-radius: 99px;
    margin: 10px auto 4px;
}

.food-page .fp-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 18px 12px;
    border-bottom: 1px solid var(--fp-border);
}

.food-page .fp-sheet-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--fp-navy);
}

.food-page .fp-sheet-clear {
    background: transparent;
    border: 0;
    color: var(--fp-brand-dark);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 8px;
}

.food-page .fp-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 18px 18px;
}

.food-page .fp-section {
    margin-bottom: 18px;
}

.food-page .fp-section-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--fp-muted);
    margin-bottom: 10px;
}

.food-page .fp-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.food-page .fp-pill {
    padding: 8px 14px;
    background: #F4F6F9;
    color: var(--fp-slate);
    border: 1px solid transparent;
    border-radius: 999px;
    font: 600 12.5px/1.2 'Inter', sans-serif;
    cursor: pointer;
    transition: all .15s;
}

.food-page .fp-pill.active {
    background: var(--fp-brand-light);
    color: var(--fp-brand-dark);
    border-color: rgba(0, 200, 150, .35);
}

.food-page .fp-pill:active { transform: scale(.97); }

.food-page .fp-price-range {
    display: flex;
    align-items: center;
    gap: 10px;
}

.food-page .fp-price-range input {
    flex: 1;
    border: 1px solid var(--fp-border);
    border-radius: 10px;
    padding: 10px 12px;
    font: 600 13px/1 'Inter', sans-serif;
    color: var(--fp-navy);
    outline: none;
    transition: border-color .15s;
}

.food-page .fp-price-range input:focus { border-color: var(--fp-brand); }

.food-page .fp-price-range span {
    color: var(--fp-muted);
    font-weight: 700;
}

.food-page .fp-sheet-footer {
    padding: 12px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--fp-border);
    display: flex;
    gap: 10px;
}

.food-page .fp-btn-apply {
    flex: 1;
    background: var(--fp-brand);
    color: #fff;
    border: 0;
    border-radius: 14px;
    padding: 14px 20px;
    font: 700 14px/1 'Inter', sans-serif;
    cursor: pointer;
    transition: background .15s;
}

.food-page .fp-btn-apply:active { background: var(--fp-brand-dark); }

/* ─── Bottom nav fixed offset to keep grid clear ─── */
.food-page .bottom-nav.mobile-only {
    z-index: 30;
}

/* ─── Loading-error toast ───────────────────────────────── */
.food-page .fp-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--fp-navy);
    color: #fff;
    padding: 12px 20px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
    opacity: 0;
    transition: opacity .2s, transform .2s;
    z-index: 1080;
    pointer-events: none;
}

.food-page .fp-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ─── Fade-in keyframe for cards ────────────────────────── */
@keyframes fpFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Satvik title icon (PNG before "Satvik Bhog") ──────── */
.food-page .fp-title-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    margin-right: 8px;
    vertical-align: -6px;
    display: inline-block;
    image-rendering: -webkit-optimize-contrast;
}

.food-page .fp-titlebar h1 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 380px) {
    .food-page .fp-title-icon { width: 24px; height: 24px; vertical-align: -5px; }
    .food-page .fp-titlebar h1 { font-size: 20px; }
}

/* ─── Indian-style vegetarian indicator (CSS-only) ──────── */
.food-page .fp-veg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1.5px solid #1F1F1F;
    border-radius: 2px;
    margin-right: 6px;
    vertical-align: -2px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: #fff;
}

.food-page .fp-veg-icon::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1A8F4D;
}

/* ─── Product detail overlay ───────────────────────────── */
.food-page .fp-detail-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 27, 42, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease;
    z-index: 1070;
}

.food-page .fp-detail-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.food-page .fp-detail {
    position: fixed;
    inset: 0;
    background: #fff;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
    z-index: 1071;
    overflow: hidden;

    /* Scoped design tokens (orange accent on white), defined on the overlay
       root so only this overlay uses them; rest of app keeps green --fp-* system. */
    --d-accent: #fa8803;
    --d-accent-dark: #c96a02;
    --d-accent-soft: #fff6ec;
    --d-accent-line: rgba(250, 136, 3, .18);
    --d-ink: #14202e;
    --d-body: #46535f;
    --d-muted: #93a0ad;
    --d-divider: #f0f2f5;
}

.food-page .fp-detail.open { transform: translateY(0); }

.food-page .fp-detail-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 38vh;
    background: #f0f0f0;
    overflow: hidden;
    flex-shrink: 0;
}

.food-page .fp-detail-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.food-page .fp-detail-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 30%, transparent 60%, rgba(0, 0, 0, .55) 100%);
    pointer-events: none;
}

.food-page .fp-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .96);
    color: var(--fp-navy);
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 17px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    z-index: 2;
    transition: transform .12s, background .15s;
}

.food-page .fp-detail-close:active { transform: scale(.92); }
.food-page .fp-detail-close:hover  { background: #fff; color: var(--d-accent); }

.food-page .fp-detail-hero-badges {
    position: absolute;
    bottom: 14px;
    left: 14px;
    right: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    z-index: 1;
}

.food-page .fp-detail-hero-badges .pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, .96);
    color: var(--fp-navy);
    font: 700 11px/1 'Inter', sans-serif;
    padding: 5px 10px;
    border-radius: 99px;
    text-transform: capitalize;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
}

.food-page .fp-detail-hero-badges .pill i { font-size: 12px; }

.food-page .fp-detail-hero-badges .pill.spice-mild   { color: #047857; }
.food-page .fp-detail-hero-badges .pill.spice-medium { color: #B45309; }
.food-page .fp-detail-hero-badges .pill.spice-hot    { color: #B91C1C; }
.food-page .fp-detail-hero-badges .pill.spice-x-hot  { color: #7F1D1D; background: #FEE2E2; }

.food-page .fp-detail-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 20px 16px;
    -webkit-overflow-scrolling: touch;
}

.food-page .fp-detail-body::-webkit-scrollbar { width: 6px; }
.food-page .fp-detail-body::-webkit-scrollbar-thumb {
    background: #DCE2EB;
    border-radius: 99px;
}

/* On wide viewports keep the reading column ≤680px and centred so it reads
   like a desktop product page. Mobile stays full-bleed (gutter → 20px). */
@media (min-width: 720px) {
    .food-page .fp-detail-body,
    .food-page .fp-detail-footer {
        padding-left:  max(20px, calc((100% - 680px) / 2));
        padding-right: max(20px, calc((100% - 680px) / 2));
    }
}

.food-page .fp-detail-title {
    font-family: inherit; /* app default: 'Inter', -apple-system… */
    font-size: 21px;
    font-weight: 800;
    color: var(--d-ink);
    margin: 0 0 8px;
    line-height: 1.3;
    letter-spacing: -.4px;
}

.food-page .fp-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-size: 12.5px;
    color: var(--d-muted);
}

.food-page .fp-detail-meta .rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--d-ink);
    font-weight: 700;
}

/* Rating star stays amber — gold is the universal rating convention;
   the orange accent system is reserved for interactive/brand cues. */
.food-page .fp-detail-meta .rating i { color: #F59E0B; font-size: 13px; }

.food-page .fp-detail-meta .reviews { color: var(--d-muted); font-weight: 600; }

.food-page .fp-detail-meta .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #D7DEE6;
}

.food-page .fp-detail-meta .time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--d-body);
    font-weight: 600;
}

.food-page .fp-detail-meta .time i { color: var(--d-accent); }

.food-page .fp-detail-section {
    margin: 0;
    padding: 18px 0 2px;
    border-top: 1px solid var(--d-divider);
}

/* First section follows the price card — no double rule. */
.food-page .fp-detail-section:first-of-type {
    border-top: 0;
    padding-top: 14px;
}

.food-page .fp-detail-section h6 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .9px;
    font-weight: 800;
    color: var(--d-ink);
    margin: 0 0 10px;
}

/* Accent marker — strategic, restrained use of the brand orange. */
.food-page .fp-detail-section h6::before {
    content: '';
    flex: 0 0 auto;
    width: 3px;
    height: 13px;
    border-radius: 2px;
    background: var(--d-accent);
}

.food-page .fp-detail-section p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--d-body);
    margin: 0;
}

.food-page .fp-detail-ing {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.food-page .fp-detail-ing .ing-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--d-body);
    padding: 7px 13px 7px 10px;
    border: 1px solid var(--d-divider);
    border-radius: 12px;
    font: 600 12.5px/1.1 'Inter', sans-serif;
    box-shadow: 0 1px 1px rgba(16, 24, 40, .03);
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.food-page .fp-detail-ing .ing-chip:hover {
    border-color: var(--d-accent-line);
    box-shadow: 0 2px 10px rgba(250, 136, 3, .12);
    transform: translateY(-1px);
}

.food-page .fp-detail-ing .ing-chip i {
    color: var(--d-accent);
    font-size: 13px;
}

.food-page .fp-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.food-page .fp-detail-tags .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: var(--d-body);
    padding: 7px 13px;
    border: 1px solid var(--d-divider);
    border-radius: 12px;
    font: 600 12px/1 'Inter', sans-serif;
    text-transform: capitalize;
    transition: border-color .15s ease, color .15s ease;
}

.food-page .fp-detail-tags .tag:hover {
    border-color: var(--d-accent-line);
    color: var(--d-ink);
}

.food-page .fp-detail-tags .tag i { font-size: 12px; color: var(--d-accent); }

.food-page .fp-detail-price-card {
    display: flex;
    align-items: baseline;
    gap: 10px;
    background: var(--d-accent-soft);
    border: 1px solid var(--d-accent-line);
    border-radius: 14px;
    padding: 13px 16px;
    margin: 16px 0 2px;
}

.food-page .fp-detail-price-card .big {
    font-family: inherit; /* app default stack — Playfair removed */
    font-size: 24px;
    font-weight: 800;
    color: var(--d-accent-dark);
    line-height: 1;
    letter-spacing: -.5px;
}

.food-page .fp-detail-price-card .gst {
    font-size: 11.5px;
    color: var(--d-body);
    font-weight: 600;
}

.food-page .fp-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--d-divider);
    box-shadow: 0 -6px 20px rgba(16, 24, 40, .04);
    background: #fff;
    flex-shrink: 0;
}

/* ── Left: price / total display ── */
.food-page .fp-detail-footer-price {
    display: flex; flex-direction: column; gap: 1px;
    flex: 1; min-width: 0;
}
.food-page .fp-dfp-label {
    font: 600 10px/1 'Inter', sans-serif;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--d-muted);
}
.food-page .fp-dfp-amount {
    font: 800 24px/1.1 'Inter', sans-serif;
    color: var(--d-ink); letter-spacing: -.6px;
    white-space: nowrap;
}
.food-page .fp-dfp-amount.fp-dfp-total { color: var(--d-accent-dark); }
.food-page .fp-dfp-sub {
    font: 500 11.5px/1 'Inter', sans-serif;
    color: var(--d-muted); margin-top: 3px; white-space: nowrap;
}

/* Lock background scroll when overlay is open */
body.fp-overlay-open {
    overflow: hidden !important;
}

/* ─── Action container (Add ↔ stepper swap target) ─────── */
.food-page .fp-action {
    display: inline-flex;
    align-items: stretch;
    justify-content: flex-end;
}

/* ─── Quantity stepper ─────────────────────────────────── */
/* Same gradient + shadow palette as .fp-add-btn so the [+ Add] → [- qty +]
   swap is a pure content change — the surface never visually moves. */
.food-page .fp-stepper {
    display: inline-flex;
    align-items: stretch;
    background: linear-gradient(135deg, #FB8E26 0%, #F97D09 60%, #DF6B00 100%);
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(249, 125, 9, .30);
    min-height: 32px;
    overflow: hidden;
    animation: fpStepIn .18s ease-out both;
    transition: box-shadow .18s ease, transform .12s ease, filter .12s ease;
}

.food-page .fp-stepper:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(249, 125, 9, .42), 0 2px 6px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

.food-page .fp-stepper:active {
    transform: scale(.98);
    box-shadow: 0 2px 6px rgba(249, 125, 9, .30);
}

/* Keyboard users tab onto a button inside the stepper; light the
   whole capsule so it's obvious which control has focus. */
.food-page .fp-stepper:focus-within {
    outline: 2.5px solid #B85800;
    outline-offset: 2px;
}

@keyframes fpStepIn {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.food-page .fp-step {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: #fff;
    padding: 0 10px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    min-width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, transform .1s;
}

.food-page .fp-step:hover  { background: rgba(255, 255, 255, .14); }
.food-page .fp-step:active { transform: scale(.9); }

.food-page .fp-step:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -3px;
}

.food-page .fp-step-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 0 4px;
    font: 800 12.5px/1 'Inter', sans-serif;
    user-select: none;
    transition: transform .12s ease;
}

.food-page .fp-step-qty.bump { animation: fpQtyBump .22s ease; }

@keyframes fpQtyBump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* Add-button enter animation, mirrors the stepper. */
.food-page .fp-add-btn { animation: fpStepIn .18s ease-out both; }

/* ─── Detail-overlay variant: right-anchored fixed-width ── */
.food-page .fp-action--detail {
    flex: 0 0 auto;
    display: flex;
}

.food-page .fp-action--detail .fp-add-btn,
.food-page .fp-action--detail .fp-stepper {
    min-height: 50px;
    border-radius: 14px;
    font-size: 14px;
    min-width: 148px;
    justify-content: space-between;
}

.food-page .fp-action--detail .fp-add-btn {
    justify-content: center;
    padding: 14px 24px;
}

.food-page .fp-action--detail .fp-step {
    min-width: 50px;
    font-size: 20px;
    height: 50px;
}

.food-page .fp-action--detail .fp-step-qty {
    min-width: 44px;
    font-size: 17px;
}

/* ─── Cart-row variant: chip-size stepper aligned right ── */
.food-page .fp-action--cart .fp-stepper {
    width: 86px;
    height: 28px;
    min-height: unset;
    justify-content: space-between;
}
.food-page .fp-action--cart .fp-add-btn {
    width: 86px;
    height: 28px;
    min-height: unset;
}

/* ─── Floating cart bar ────────────────────────────────── */
/* Orange accent (#F97D09). A subtle two-stop gradient gives the
   pill depth without diluting the brand colour. */
.food-page .fp-fab-cart {
    position: fixed;
    left: 50%;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 130%);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px 12px 14px;
    background: linear-gradient(135deg, #FB8E26 0%, #F97D09 60%, #DF6B00 100%);
    color: #fff;
    border-radius: 999px;
    box-shadow: 0 18px 40px rgba(249, 125, 9, .38), 0 4px 12px rgba(0, 0, 0, .14);
    font: 700 13.5px/1 'Inter', sans-serif;
    cursor: pointer;
    z-index: 1060;
    opacity: 0;
    visibility: hidden;
    transition: transform .35s cubic-bezier(.32, .72, 0, 1), opacity .25s ease, visibility 0s linear .35s, box-shadow .2s ease;
    width: min(440px, calc(100vw - 24px));
    white-space: nowrap;
    border: 0;
}

.food-page .fp-fab-cart.show {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    transition: transform .35s cubic-bezier(.32, .72, 0, 1), opacity .25s ease, visibility 0s linear 0s, box-shadow .2s ease;
}

.food-page .fp-fab-cart:hover {
    filter: brightness(1.06);
    box-shadow: 0 22px 48px rgba(249, 125, 9, .46), 0 4px 12px rgba(0, 0, 0, .16);
}

.food-page .fp-fab-cart:active { transform: translate(-50%, 2px); }

.food-page .fp-fab-cart:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .85);
    outline-offset: 2px;
}

.food-page .fp-fab-cart .fab-left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* ─── Stack of product avatars inside the FAB Layout: horizontal
   flex with negative margin overlap. */
.food-page .fp-fab-cart .fab-stack {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 36px;
    min-width: 0;
}

/* Hide the wrapper entirely when no items are visible. */
.food-page .fp-fab-cart .fab-stack:empty {
    display: none;
}

.food-page .fp-fab-cart .fab-avatar {
    box-sizing: content-box;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
    display: inline-block;
    flex-shrink: 0;
    transform-origin: center;
    transition: opacity .22s ease, transform .26s cubic-bezier(.32, .72, 0, 1);
    /* HiDPI tweak — keeps small circular thumbnails crisp. */
    image-rendering: -webkit-optimize-contrast;
}

/* Overlap rule — every avatar after the first slides ~50% under the one
   before it (18px of 36px width incl. border), giving the stacked-pill look. */
.food-page .fp-fab-cart .fab-avatar + .fab-avatar {
    margin-left: -18px;
}

.food-page .fp-fab-cart .fab-avatar.enter {
    animation: fpAvatarIn .28s cubic-bezier(.32, .72, 0, 1) both;
}

.food-page .fp-fab-cart .fab-avatar.exit {
    opacity: 0;
    transform: scale(.5);
    pointer-events: none;
}

@keyframes fpAvatarIn {
    0%   { opacity: 0; transform: scale(.4); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

/* +N pill — shown when cart has > 4 unique items. */
.food-page .fp-fab-cart .fab-overflow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    min-width: 28px;
    height: 26px;
    padding: 0 8px;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    font: 800 11.5px/1 'Inter', sans-serif;
    flex-shrink: 0;
    animation: fpAvatarIn .24s cubic-bezier(.32, .72, 0, 1) both;
}

.food-page .fp-fab-cart .fab-count {
    font-weight: 800;
    font-size: 13.5px;
}

.food-page .fp-fab-cart .fab-total {
    font-weight: 800;
    font-size: 14.5px;
    padding: 0 4px;
}

.food-page .fp-fab-cart .fab-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .18);
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12.5px;
    border: 1px solid rgba(255, 255, 255, .22);
    transition: background .18s ease, box-shadow .2s ease, transform .12s ease;
    transform-origin: center;
    will-change: transform;
}

/* Idle arrow drift — a gentle 3px back-and-forth that signals "this
   is interactive" without being distracting. */
.food-page .fp-fab-cart .fab-cta i {
    font-size: 12px;
    display: inline-block;
    transform-origin: center;
    will-change: transform;
    animation: fpArrowDrift 1.8s ease-in-out infinite;
}

@keyframes fpArrowDrift {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(3px); }
}

/* Hover: pause the drift, slide the arrow further right, and
   give the pill a soft glow to confirm it's clickable. */
.food-page .fp-fab-cart:hover .fab-cta {
    background: rgba(255, 255, 255, .26);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .12) inset;
}
.food-page .fp-fab-cart:hover .fab-cta i {
    animation-play-state: paused;
    transform: translateX(6px);
    transition: transform .22s cubic-bezier(.32, .72, 0, 1);
}

/* Tactile touch feedback — instant scale-down. */
.food-page .fp-fab-cart:active .fab-cta { transform: scale(.96); }

/* Cart-update attention: when a new product is added (the .bump
   class on the bar), the CTA pulses briefly to draw the eye. */
.food-page .fp-fab-cart.bump        { animation: fpFabBump .35s ease; }
.food-page .fp-fab-cart.bump .fab-cta { animation: fpCtaPulse .6s ease both; }

@keyframes fpFabBump {
    0%   { transform: translate(-50%, 0)      scale(1); }
    45%  { transform: translate(-50%, -4px)   scale(1.025); }
    100% { transform: translate(-50%, 0)      scale(1); }
}

@keyframes fpCtaPulse {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); }
    30%  { transform: scale(1.10); box-shadow: 0 0 0 8px rgba(255, 255, 255, .12); }
    70%  { transform: scale(.97);  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Honour the user's OS-level reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .food-page .fp-fab-cart .fab-cta i        { animation: none; }
    .food-page .fp-fab-cart.bump              { animation: none; }
    .food-page .fp-fab-cart.bump .fab-cta     { animation: none; }
    .food-page .fp-fab-cart .fab-avatar.enter { animation: none; }
    .food-page .fp-fab-cart .fab-overflow     { animation: none; }
}

/* ─── Cart offcanvas (slide from right; bottom on mobile) ─── */
.food-page .fp-cart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(13, 27, 42, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility 0s linear .22s;
    z-index: 1080;
}

.food-page .fp-cart-backdrop.show {
    opacity: 1;
    visibility: visible;
    transition: opacity .22s ease;
}

.food-page .fp-cart {
    position: fixed;
    top: 0;
    right: 0;
    width: 440px;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    transform: translateX(110%);
    transition: transform .32s cubic-bezier(.32, .72, 0, 1);
    z-index: 1081;
    display: flex;
    flex-direction: column;
    box-shadow: -16px 0 36px rgba(13, 27, 42, .2);
}

.food-page .fp-cart.open { transform: translateX(0); }

/* Focused programmatically on open (tabindex="-1" dialog target) —
   suppresses UA outline here only; inner controls keep their focus rings. */
.food-page .fp-cart:focus { outline: none; }

@media (max-width: 540px) {
    .food-page .fp-cart {
        width: 100%;
        height: 100dvh;
        border-radius: 0;
    }
}

/* Cart header — 3-cell grid (1fr | auto | 1fr) keeps the title
   perfectly centered no matter how wide the Back button gets. */
.food-page .fp-cart-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--fp-border);
    background: linear-gradient(180deg,
        rgba(249, 125, 9, 0.281) 0%,
        rgba(255, 255, 255, 1) 100%);
    flex-shrink: 0;
    border-bottom: 3px solid;
    border-image: linear-gradient(to right, white 0%, #F97D09 15%, #F97D09 85%, white 100%) 1;
}

.food-page .fp-cart-header h2 {
    grid-column: 2;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--fp-navy);
    margin: 0;
    text-align: center;
    letter-spacing: -.3px;
    
}

/* Back button — frosted-glass pill on the orange gradient; closes via
   the same handler as ESC/backdrop so all paths converge on fpCloseCart(). */
.food-page .fp-cart-back {
    grid-column: 1;
    justify-self: start;
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--fp-navy);
    border-radius: 50%;
    cursor: pointer;
    font: 700 13px/1 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, transform .12s ease, box-shadow .18s ease;
}

.food-page .fp-cart-back i { font-size: 15px; }

.food-page .fp-cart-back:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(13, 27, 42, .08);
    transform: translateY(-1px);
}

.food-page .fp-cart-back:active {
    transform: scale(.96);
    box-shadow: 0 1px 3px rgba(13, 27, 42, .08);
}

.food-page .fp-cart-back:focus-visible {
    outline: 2.5px solid #B85800;
    outline-offset: 2px;
}

@media (max-width: 380px) {
    .food-page .fp-cart-header h2 { font-size: 18px; }
}

/* Delivery-time summary card, between the cart header and items list.
   Always visible; content swaps to an "Add items…" hint when empty. */
.food-page .fp-delivery-summary {
    margin: 6px 12px 4px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #FFF7EC 0%, #FFFFFF 60%);
    border: 1px solid rgba(249, 125, 9, .20);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(13, 27, 42, .05);
    flex-shrink: 0;
    animation: fpFadeUp .28s ease both;
}

.food-page .fp-delivery-summary[hidden] { display: none; }

.food-page .fp-delivery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.food-page .fp-delivery-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--fp-muted);
}

/* ─── Digital delivery clock ─────────────────────────── */
.food-page .fp-dclock {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    padding: 0;
}

.food-page .fp-dclock-eyebrow {
    font: 700 7px/1 'Inter', sans-serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #000;
}

.food-page .fp-dclock-display {
    display: inline-flex;
    align-items: center;
    gap: 0;
    line-height: 1;
    position: relative;
    z-index: 1;
}

.food-page .fp-dclock-seg {
    font: 800 21px/1 'Inter', sans-serif;
    color: #000;
    min-width: 20px;
    text-align: center;
    letter-spacing: -1px;
}

.food-page .fp-dclock-colon {
    font: 800 18px/1 'Inter', sans-serif;
    color: #000;
    padding: 0 2px;
    margin-bottom: 1px;
    animation: fpColonBlink 1s step-end infinite;
}

@keyframes fpColonBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.15; }
}

.food-page .fp-dclock-ampm {
    font: 800 9px/1 'Inter', sans-serif;
    color: #000;
    margin-left: 4px;
    letter-spacing: .5px;
    align-self: flex-end;
    margin-bottom: 2px;
}

.food-page .fp-delivery-breakdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.food-page .fp-delivery-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--fp-slate);
    font-weight: 600;
}

.food-page .fp-delivery-row i {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(249, 125, 9, .12);
    color: #DF6B00;
    font-size: 12px;
    flex-shrink: 0;
}

.food-page .fp-delivery-row span {
    flex: 1;
    color: var(--fp-slate);
}

.food-page .fp-delivery-row strong {
    color: var(--fp-navy);
    font-weight: 800;
}

.food-page .fp-delivery-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fp-muted);
    font-weight: 600;
    padding: 4px 0;
    text-align: center;
}

.food-page .fp-delivery-empty i {
    font-size: 16px;
    color: #DF6B00;
}

@media (prefers-reduced-motion: reduce) {
    .food-page .fp-delivery-summary { animation: none; }
    .food-page .fp-dclock-colon { animation: none; opacity: 1; }
}

/* Delivery-address card: three-layer composition — thin orange accent
   strip, eyebrow status row, then a 3-col grid (avatar | content | Change). */
.food-page .fp-delivery-address {
    position: relative;
    margin: 8px 12px 4px;
    padding: 8px 12px 10px;
    background: #FFFFFF;
    border: 1px solid var(--fp-border);
    border-radius: 12px;
    box-shadow:
        0 1px 2px rgba(13, 27, 42, .04),
        0 8px 24px -8px rgba(13, 27, 42, .08);
    flex-shrink: 0;
    animation: fpFadeUp .28s ease both;
    transition: box-shadow .22s ease, border-color .22s ease, transform .12s ease;
    overflow: hidden;
}

.food-page .fp-delivery-address::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
}

.food-page .fp-delivery-address:hover {
    box-shadow:
        0 2px 4px rgba(13, 27, 42, .05),
        0 16px 36px -12px rgba(13, 27, 42, .14),
        0 4px 12px rgba(249, 125, 9, .08);
    border-color: rgba(249, 125, 9, .28);
}

.food-page .fp-delivery-address[hidden] { display: none; }

/* ── Eyebrow strip ───────────────────────────────────── */
.food-page .fp-delivery-address .fp-da-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 7px;
    border-bottom: 1px dashed rgba(13, 27, 42, .08);
    margin-bottom: 8px;
}

.food-page .fp-delivery-address .fp-da-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 800 10.5px/1 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .9px;
    color: var(--fp-muted);
}

.food-page .fp-delivery-address .fp-da-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
    animation: fpAddrDotPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.food-page .fp-delivery-address .fp-da-dot.is-muted {
    background: #94A3B8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .18);
    animation: none;
}

@keyframes fpAddrDotPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
    50%      { box-shadow: 0 0 0 7px rgba(16, 185, 129, .06); }
}

.food-page .fp-delivery-address .fp-da-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font: 800 10px/1 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #047857;
    background: rgba(4, 120, 87, .10);
    padding: 4px 9px 4px 8px;
    border-radius: 99px;
}

.food-page .fp-delivery-address .fp-da-badge i { font-size: 11px; }

/* ── Main row: avatar | content | change pill ────────── */
.food-page .fp-delivery-address .fp-da-row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    column-gap: 10px;
    align-items: start;
}

.food-page .fp-delivery-address .fp-da-pin {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background:
        linear-gradient(135deg, #FFF1DC 0%, #FFDFB6 100%);
    color: #B85800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    flex-shrink: 0;
    box-shadow:
        inset 0 0 0 1px rgba(249, 125, 9, .22),
        0 2px 6px rgba(249, 125, 9, .12);
}

.food-page .fp-delivery-address .fp-da-pin.is-empty {
    background: linear-gradient(135deg, #F2F4F8 0%, #E6EAF1 100%);
    color: var(--fp-muted);
    box-shadow: inset 0 0 0 1px rgba(13, 27, 42, .08);
}

.food-page .fp-delivery-address .fp-da-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

.food-page .fp-delivery-address .fp-da-titleline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.food-page .fp-delivery-address .fp-da-type {
    font: 800 13.5px/1 'Inter', sans-serif;
    color: var(--fp-navy);
    text-transform: capitalize;
    letter-spacing: -.2px;
}

.food-page .fp-delivery-address .fp-da-divider {
    color: #C9D1DB;
    font-weight: 700;
    user-select: none;
}

.food-page .fp-delivery-address .fp-da-name {
    font: 600 12.5px/1 'Inter', sans-serif;
    color: var(--fp-slate);
}

.food-page .fp-delivery-address .fp-da-text {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fp-slate);
    font-weight: 500;
    margin-top: 2px;
}

.food-page .fp-delivery-address .fp-da-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--fp-muted);
    font-weight: 600;
    letter-spacing: .1px;
}

.food-page .fp-delivery-address .fp-da-meta i {
    font-size: 11px;
    color: #DF6B00;
}

/* ── Change / Add / Sign-in pill ─────────────────────── */
.food-page .fp-delivery-address .fp-da-change {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(249, 125, 9, .10);
    border: 1px solid rgba(249, 125, 9, .26);
    color: #B85800;
    font: 800 11.5px/1 'Inter', sans-serif;
    letter-spacing: .2px;
    padding: 8px 12px 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    text-decoration: none;
    align-self: start;
    white-space: nowrap;
    transition: background .15s ease, gap .15s ease, transform .12s ease, box-shadow .2s ease;
}

.food-page .fp-delivery-address .fp-da-change:hover {
    background: rgba(249, 125, 9, .18);
    box-shadow: 0 6px 14px rgba(249, 125, 9, .22);
    gap: 7px;
}

.food-page .fp-delivery-address .fp-da-change:active {
    transform: scale(.96);
    box-shadow: 0 2px 4px rgba(249, 125, 9, .18);
}

.food-page .fp-delivery-address .fp-da-change:focus-visible {
    outline: 2.5px solid #B85800;
    outline-offset: 2px;
}

.food-page .fp-delivery-address .fp-da-change i { font-size: 12px; }

/* ── Empty / sign-in title styling ───────────────────── */
.food-page .fp-delivery-address .fp-da-empty-title {
    font: 700 13.5px/1.2 'Inter', sans-serif;
    color: var(--fp-navy);
}

.food-page .fp-delivery-address .fp-da-empty-sub {
    font: 500 12px/1.4 'Inter', sans-serif;
    color: var(--fp-muted);
    margin-top: 2px;
}

/* ── Loading skeleton shapes ─────────────────────────── */
.food-page .fp-delivery-address .fp-da-skel-pin,
.food-page .fp-delivery-address .fp-da-skel-bar {
    background: linear-gradient(90deg, #EEF2F6 0%, #F7F9FC 50%, #EEF2F6 100%);
    background-size: 800px 100%;
    animation: fpShimmer 1.4s ease infinite;
}

.food-page .fp-delivery-address .fp-da-skel-pin {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-block;
}

.food-page .fp-delivery-address .fp-da-skel-bar {
    height: 11px;
    border-radius: 6px;
}

.food-page .fp-delivery-address .fp-da-skel-bar.w-40 { width: 40%; }
.food-page .fp-delivery-address .fp-da-skel-bar.w-60 { width: 60%; }
.food-page .fp-delivery-address .fp-da-skel-bar.w-80 { width: 80%; }

/* ── Narrow-phone reflow: pill drops below to a full-width
   CTA so two-line address text gets the whole column. */
@media (max-width: 420px) {
    .food-page .fp-delivery-address .fp-da-row {
        grid-template-columns: 40px 1fr;
        row-gap: 10px;
    }
    .food-page .fp-delivery-address .fp-da-change {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: center;
        padding: 10px 14px;
        font-size: 12px;
    }
    .food-page .fp-delivery-address .fp-da-pin,
    .food-page .fp-delivery-address .fp-da-skel-pin {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .food-page .fp-delivery-address { animation: none; }
    .food-page .fp-delivery-address .fp-da-dot { animation: none; }
    .food-page .fp-delivery-address .fp-da-skel-pin,
    .food-page .fp-delivery-address .fp-da-skel-bar { animation: none; }
}

/* ─── Cart body ──────────────────────────────────────── */
.food-page .fp-cart-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 8px;
}

.food-page .fp-cart-body::-webkit-scrollbar { width: 5px; }
.food-page .fp-cart-body::-webkit-scrollbar-thumb {
    background: #DCE2EB;
    border-radius: 99px;
}

/* ─── Cart item card ──────────────────────────────── */
.food-page .fp-cart-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--fp-border);
    box-shadow: 0 2px 8px rgba(13, 27, 42, .05);
    transition: box-shadow .2s ease;
}

.food-page .fp-cart-item:last-child { margin-bottom: 0; }

.food-page .fp-cart-item:hover {
    box-shadow: 0 4px 18px rgba(13, 27, 42, .10);
}

.food-page .fp-cart-item .thumb {
    width: 48px;
    height: 48px;
    border-radius: 9px;
    overflow: hidden;
    background: #F4F6F9;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(13, 27, 42, .10);
}

.food-page .fp-cart-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.food-page .fp-cart-item:hover .thumb img { transform: scale(1.05); }

/* Right column: stacks info → foot */
.food-page .fp-cart-item-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    gap: 6px;
}

.food-page .fp-cart-item .meta { min-width: 0; }

/* Top row inside item: meta left, cart stepper anchored right */
.food-page .fp-cart-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.food-page .fp-cart-item-head .meta { flex: 1 1 auto; }
.food-page .fp-cart-item-head .fp-action--cart { flex: 0 0 auto; }

.food-page .fp-cart-item .meta h6 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--fp-navy);
    margin: 0 0 3px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.food-page .fp-cart-unit-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--fp-slate);
}

.food-page .fp-cart-gst-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: #059669;
    background: rgba(5, 150, 105, .09);
    border-radius: 99px;
    padding: 2px 7px;
    margin-top: 2px;
}

/* Cooking-instruction add-on note (shown when priced options selected) */
.food-page .fp-cart-addon-note {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--fco-dark);
    margin-top: 3px;
}
.food-page .fp-cart-addon-note i { font-size: 10px; }

/* Footer row inside item: total-stack left, Option button right */
.food-page .fp-cart-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

/* ─── "Option" button — modern enterprise ghost-pill ────── */
.food-page .fp-option-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 86px;
    height: 28px;
    padding: 0;
    box-sizing: border-box;
    font: 700 11px/1 'Inter', sans-serif;
    letter-spacing: .2px;
    color: #F97D09;
    background: linear-gradient(180deg, #ffffff 0%, #fff6ec 100%);
    border: 1.5px solid rgba(249, 125, 9, .32);
    border-radius: 24px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05), inset 0 1px 0 rgba(255, 255, 255, .8);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, color .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.food-page .fp-option-btn i {
    font-size: 13px;
    line-height: 0;
}
.food-page .fp-option-btn:hover {
    color: #DF6B00;
    border-color: rgba(249, 125, 9, .60);
    box-shadow: 0 6px 16px rgba(249, 125, 9, .18), inset 0 1px 0 rgba(255, 255, 255, .8);
    transform: translateY(-1px);
}
.food-page .fp-option-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .10);
}
.food-page .fp-option-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(249, 125, 9, .25);
}

.food-page .fp-cart-item-total {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.food-page .fp-cart-total-lbl {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--fp-muted);
}

.food-page .fp-cart-item .subtotal {
    font-size: 16px;
    font-weight: 800;
    color: var(--fp-navy);
    white-space: nowrap;
    transition: color .18s ease;
}

/* Empty cart — premium, conversion-focused empty state. */
.food-page .fp-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100%;
    padding: 16px 6px 30px;
    color: var(--fp-slate);
    animation: fpEmptyIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes fpEmptyIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero illustration ── */
.food-page .fp-empty-hero {
    position: relative;
    width: 100%;
    max-width: 320px;
    height: 184px;
    margin: 2px auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.food-page .fp-empty-glow {
    position: absolute;
    width: 196px; height: 196px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%,
        rgba(0,200,150,.22) 0%, rgba(0,200,150,.10) 38%,
        rgba(249,125,9,.08) 62%, transparent 72%);
    animation: fpEmptyPulse 4.5s ease-in-out infinite;
}
@keyframes fpEmptyPulse {
    0%,100% { transform: scale(1);    opacity: .9; }
    50%     { transform: scale(1.08); opacity: 1; }
}
.food-page .fp-empty-disc {
    position: absolute;
    width: 128px; height: 128px;
    border-radius: 50%;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 18px 40px rgba(13,27,42,.12), inset 0 1px 0 rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.food-page .fp-empty-bag-svg {
    position: relative; z-index: 2;
    width: 116px; height: 116px;
    filter: drop-shadow(0 12px 18px rgba(0,158,120,.30));
    animation: fpEmptyFloat 3.6s ease-in-out infinite;
}
@keyframes fpEmptyFloat {
    0%,100% { transform: translateY(0)    rotate(0deg); }
    50%     { transform: translateY(-8px) rotate(-1.6deg); }
}
.food-page .fp-empty-float {
    position: absolute; z-index: 3;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 10px 24px rgba(13,27,42,.14);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: 20px;
    animation: fpEmptyFloat 4s ease-in-out infinite;
}
.food-page .fp-empty-float i { line-height: 1; }
.food-page .fp-empty-float--1 { top: 16px;   left: 26px;  color: var(--fco);            animation-delay: .2s; }
.food-page .fp-empty-float--2 { top: 6px;    right: 30px; color: var(--fp-brand-dark);  animation-delay: 1.1s; }
.food-page .fp-empty-float--3 { bottom: 18px; right: 16px; color: #e0962b;              animation-delay: .6s; transform: scale(.9); }

/* ── Headline + supporting text ── */
.food-page .fp-empty-title {
    font: 800 20px/1.25 'Inter', sans-serif;
    letter-spacing: -.4px;
    color: var(--fp-navy);
    margin: 6px 0 7px;
    max-width: 300px;
}
.food-page .fp-empty-sub {
    font: 500 13px/1.6 'Inter', sans-serif;
    color: var(--fp-muted);
    margin: 0 auto 18px;
    max-width: 288px;
}

/* ── Popular Right Now ── */
.food-page .fp-empty-rec { width: 100%; max-width: 340px; margin: 0 auto 20px; }
.food-page .fp-empty-rec-label {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font: 800 11px/1 'Inter', sans-serif;
    text-transform: uppercase; letter-spacing: .8px;
    color: var(--fp-slate); margin-bottom: 12px;
}
.food-page .fp-empty-rec-label i { color: var(--fco); font-size: 13px; }
.food-page .fp-empty-rec-chips {
    display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
}
.food-page .fp-empty-chip {
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--fp-border);
    background: #fff; border-radius: 999px;
    padding: 8px 15px 8px 9px;
    font: 700 13px/1 'Inter', sans-serif;
    color: var(--fp-navy); cursor: pointer;
    box-shadow: var(--fp-shadow-sm);
    transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .18s, border-color .18s;
    -webkit-tap-highlight-color: transparent;
}
.food-page .fp-empty-chip:hover {
    transform: translateY(-2px);
    border-color: rgba(0,200,150,.4);
    box-shadow: 0 10px 22px rgba(13,27,42,.12);
}
.food-page .fp-empty-chip:active { transform: scale(.95); }
.food-page .fp-empty-chip:focus-visible { outline: 2px solid var(--fp-brand); outline-offset: 2px; }
.food-page .fp-empty-chip-ic {
    width: 28px; height: 28px; flex-shrink: 0; padding: 5px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--fco); background: var(--fco-tint);
}
.food-page .fp-empty-chip-ic svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.food-page .fp-empty-rec-chips .fp-empty-chip:nth-child(1) .fp-empty-chip-ic { color:#E8743B; background:rgba(232,116,59,.13); }
.food-page .fp-empty-rec-chips .fp-empty-chip:nth-child(2) .fp-empty-chip-ic { color:#D94C4C; background:rgba(217,76,76,.12); }
.food-page .fp-empty-rec-chips .fp-empty-chip:nth-child(3) .fp-empty-chip-ic { color:#D9941F; background:rgba(217,148,31,.14); }
.food-page .fp-empty-rec-chips .fp-empty-chip:nth-child(4) .fp-empty-chip-ic { color:#00A37A; background:rgba(0,163,122,.12); }

/* ── Primary CTA ── */
.food-page .fp-empty-cta {
    position: relative; overflow: hidden;
    appearance: none; -webkit-appearance: none; border: 0;
    width: 100%; max-width: 340px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border-radius: 16px; padding: 15px 22px;
    font: 800 14.5px/1 'Inter', sans-serif; letter-spacing: -.1px;
    color: #fff; cursor: pointer;
    background: linear-gradient(135deg, #00D6A0 0%, var(--fp-brand) 45%, var(--fp-brand-dark) 100%);
    box-shadow: 0 12px 26px rgba(0,158,120,.34);
    transition: transform .14s ease, filter .14s ease;
    animation: fpEmptyCtaPulse 2.8s ease-in-out infinite;
}
@keyframes fpEmptyCtaPulse {
    0%,100% { box-shadow: 0 12px 26px rgba(0,158,120,.34); }
    50%     { box-shadow: 0 14px 34px rgba(0,158,120,.50); }
}
.food-page .fp-empty-cta:hover  { transform: translateY(-1px); filter: brightness(1.04); }
.food-page .fp-empty-cta:active { transform: scale(.98); }
.food-page .fp-empty-cta:focus-visible { outline: 3px solid var(--fp-brand-light); outline-offset: 3px; }
.food-page .fp-empty-cta i { font-size: 17px; }
.food-page .fp-empty-ripple {
    position: absolute; border-radius: 50%;
    transform: scale(0); opacity: .5;
    background: rgba(255,255,255,.55); pointer-events: none;
    animation: fpEmptyRipple .6s ease-out forwards;
}
@keyframes fpEmptyRipple { to { transform: scale(2.6); opacity: 0; } }

/* ── Secondary CTA ── */
.food-page .fp-empty-cta-2 {
    appearance: none; -webkit-appearance: none; border: 0; background: none;
    margin-top: 14px;
    display: inline-flex; align-items: center; gap: 6px;
    font: 700 12.5px/1 'Inter', sans-serif;
    color: var(--fco-dark); cursor: pointer;
    padding: 8px 12px; border-radius: 10px;
    transition: background .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
.food-page .fp-empty-cta-2:hover  { background: var(--fco-tint); }
.food-page .fp-empty-cta-2:active { transform: scale(.97); }
.food-page .fp-empty-cta-2:focus-visible { outline: 2px solid var(--fco-focus); outline-offset: 2px; }
.food-page .fp-empty-cta-2 i { font-size: 14px; }

/* Respect reduced-motion: keep it static + accessible */
@media (prefers-reduced-motion: reduce) {
    .food-page .fp-cart-empty,
    .food-page .fp-empty-glow,
    .food-page .fp-empty-bag-svg,
    .food-page .fp-empty-float,
    .food-page .fp-empty-cta,
    .food-page .fp-empty-ripple { animation: none !important; }
}

/* ─── Cart footer ─────────────────────────────────── */
.food-page .fp-cart-footer {
    border-top: 1px solid var(--fp-border);
    padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    flex-shrink: 0;
}

.food-page .fp-cart-footer[hidden] { display: none; }

/* Spin & Win CTA card, injected below the cart body after the auto-opened
   wheel closes. Glassmorphism + gradient ring, fade-up, hover lift. */
.food-page .fp-spinner-cta {
    flex-shrink: 0;
    margin: 0 14px 12px;
    padding: 1.5px;                      /* gradient hairline border */
    border-radius: 20px;
    background: linear-gradient(135deg,
                rgba(0, 200, 150, .55), rgba(0, 158, 120, .12) 45%, rgba(255, 214, 107, .6));
    box-shadow: 0 14px 34px rgba(13, 27, 42, .12);
    animation: fpCtaIn .55s cubic-bezier(.16, 1, .3, 1) both;
    -webkit-tap-highlight-color: transparent;
    will-change: transform, opacity;
}
@keyframes fpCtaIn {
    from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.food-page .fp-spinner-cta-inner {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 14px;
    border-radius: 18.5px;
    background: linear-gradient(140deg, rgba(255, 255, 255, .96), rgba(240, 251, 247, .96));
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
}
.food-page .fp-spinner-icon {
    flex-shrink: 0;
    width: 50px; height: 50px;
    border-radius: 15px;
    display: grid; place-items: center;
    font-size: 27px; line-height: 1;
    background:
        radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 55%),
        linear-gradient(160deg, #FFD66B, #E8A93C);
    box-shadow: 0 8px 18px rgba(232, 169, 60, .45), inset 0 1px 0 rgba(255, 255, 255, .6);
    animation: fpCtaSpin 7s linear infinite;
}
@keyframes fpCtaSpin { to { transform: rotate(360deg); } }
.food-page .fp-spinner-copy { flex: 1; min-width: 0; }
.food-page .fp-spinner-copy h4 {
    margin: 0; font: 800 14.5px/1.2 'Inter', sans-serif;
    color: var(--fp-navy); letter-spacing: -.2px;
}
.food-page .fp-spinner-copy p {
    margin: 3px 0 0; font: 600 11.5px/1.42 'Inter', sans-serif; color: var(--fp-muted);
}
.food-page .fp-spinner-cta #fpSpinTrigger {
    flex-shrink: 0;
    border: none;
    border-radius: 13px;
    padding: 12px 17px;
    font: 800 13px/1 'Inter', sans-serif; letter-spacing: .2px;
    color: #fff;
    background: linear-gradient(160deg, var(--fp-brand), var(--fp-brand-dark));
    box-shadow: 0 7px 18px rgba(0, 158, 120, .38), inset 0 1px 0 rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: transform .16s ease, box-shadow .2s ease, filter .2s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.food-page .fp-spinner-cta #fpSpinTrigger:hover  { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 22px rgba(0, 158, 120, .45); }
.food-page .fp-spinner-cta #fpSpinTrigger:active { transform: translateY(0) scale(.95); }
.food-page .fp-spinner-cta #fpSpinTrigger:focus-visible { outline: 3px solid var(--fp-brand); outline-offset: 2px; }
.food-page .fp-spinner-cta #fpSpinTrigger[disabled],
.food-page .fp-spinner-cta #fpSpinTrigger[aria-busy="true"] { opacity: .65; cursor: default; pointer-events: none; }

@media (max-width: 360px) {
    .food-page .fp-spinner-cta-inner { flex-wrap: wrap; }
    .food-page .fp-spinner-cta #fpSpinTrigger { width: 100%; order: 3; margin-top: 4px; }
}
@media (prefers-color-scheme: dark) {
    .food-page .fp-spinner-cta-inner { background: linear-gradient(140deg, rgba(20, 32, 46, .96), rgba(14, 43, 64, .96)); }
    .food-page .fp-spinner-copy h4 { color: #F1F5F9; }
    .food-page .fp-spinner-copy p  { color: #94A3B8; }
}
@media (prefers-reduced-motion: reduce) {
    .food-page .fp-spinner-cta { animation: none; }
    .food-page .fp-spinner-icon { animation: none; }
}

/* Totals summary box */
.food-page .fp-cart-totals {
    background: #F7F9FC;
    border-radius: 14px;
    padding: 4px 14px;
    margin-bottom: 14px;
}

.food-page .fp-cart-totals-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid var(--fp-border);
}

.food-page .fp-cart-totals-row:last-child { border-bottom: none; }

.food-page .fp-cart-totals-row .lbl {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fp-slate);
}

.food-page .fp-cart-totals-row .val {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--fp-navy);
}

.food-page .fp-cart-totals-row.grand {
    padding-top: 11px;
}

.food-page .fp-cart-totals-row.grand .lbl {
    font-size: 14px;
    font-weight: 800;
    color: var(--fp-navy);
}

.food-page .fp-cart-totals-row.grand .val {
    font-size: 17px;
    font-weight: 800;
    color: var(--fp-brand-dark);
}

/* Checkout button */
.food-page .fp-btn-checkout {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 16px 24px;
    color: #fff;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    background: linear-gradient(135deg, #f09948 0%, #F97D09 100%);
    box-shadow: 0 8px 20px rgba(0, 168, 89, .25);
    transition: transform .3s cubic-bezier(.25, .8, .25, 1), box-shadow .3s ease, filter .2s ease;
}

.food-page .fp-btn-checkout:active {
    transform: scale(.97);
    box-shadow: 0 4px 10px rgba(0, 168, 89, .15);
}

.food-page .fp-btn-checkout:focus-visible {
    outline: 3px solid rgba(249, 125, 9, .55);
    outline-offset: 3px;
}

/* Left: stacked "TO PAY" label + total (mirrors main.html .btn-checkout) */
.food-page .fp-btn-checkout .co-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.food-page .fp-btn-checkout .co-label {
    font: 400 13px/1 'Inter', sans-serif;
    opacity: .75;
    padding-bottom: 7px;
}

.food-page .fp-btn-checkout .co-total {
    font: 700 16px/1 'Inter', sans-serif;
}

/* Right: "Proceed to Checkout" + gently sliding arrow */
.food-page .fp-btn-checkout .co-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 700 15px/1 'Inter', sans-serif;
}

.food-page .fp-btn-checkout .co-arrow {
    font-size: 16px;
    animation: fpCheckoutArrow 2s infinite ease-in-out;
}

@keyframes fpCheckoutArrow {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .food-page .fp-btn-checkout .co-arrow { animation: none; }
}

/* Keep fp-btn-primary usable for the empty-cart Browse button */
.food-page .fp-btn-primary {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    cursor: pointer;
    border-radius: 14px;
    padding: 13px 18px;
    font: 700 13.5px/1 'Inter', sans-serif;
    transition: filter .12s, transform .12s;
    background: linear-gradient(135deg, var(--fp-brand) 0%, var(--fp-brand-dark) 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(0, 158, 120, .26);
}

.food-page .fp-btn-primary:hover  { filter: brightness(1.05); }
.food-page .fp-btn-primary:active { transform: scale(.97); }

/* Checkout Overlay (fp-co) — matches fb-co design system. */
.food-page .fp-co-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.60);
    opacity: 0; visibility: hidden;
    transition: opacity .24s ease, visibility 0s linear .24s;
    z-index: 1090;
}
.food-page .fp-co-backdrop.show {
    opacity: 1; visibility: visible;
    transition: opacity .24s ease;
}

.food-page .fp-co {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff;
    border-radius: 22px 22px 0 0;
    max-height: 92vh;
    display: flex; flex-direction: column;
    transform: translateY(105%);
    transition: transform .32s cubic-bezier(.32,.72,0,1);
    z-index: 1091;
    box-shadow: 0 -16px 48px rgba(15,23,42,.22);
    overscroll-behavior: contain;
    --fco:        #F97D09;
    --fco-dark:   #e67800;
    --fco-tint:   rgba(249,125,9,.08);
    --fco-border: rgba(249,125,9,.28);
    --fco-focus:  rgba(249,125,9,.38);
    --fco-glow:   rgba(249,125,9,.32);
}
.food-page .fp-co.open { transform: translateY(0); }
@media (min-width: 560px) {
    .food-page .fp-co {
        left: 50%; right: auto;
        width: 520px; max-width: 96vw;
        transform: translate(-50%, 105%);
        bottom: 4vh; border-radius: 22px; max-height: 88vh;
    }
    .food-page .fp-co.open { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .food-page .fp-co, .food-page .fp-co-backdrop { transition: none; }
}
/* ── Handle ── */
.food-page .fp-co-handle {
    width: 40px; height: 4px;
    background: var(--fco-border);
    border-radius: 99px;
    margin: 10px auto 0; flex-shrink: 0;
}
/* ── Header ── */
.food-page .fp-co-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px 13px;
    border-bottom: 1px solid rgba(249,125,9,.14);
    flex-shrink: 0;
}
.food-page .fp-co-title {
    font: 800 16px/1.2 'Inter',sans-serif;
    color: #0f172a; margin: 0; letter-spacing: -.2px;
}
.food-page .fp-co-close {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--fco-tint);
    border: 1px solid var(--fco-border);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; color: var(--fco-dark); cursor: pointer;
    transition: background .15s, transform .12s;
}
.food-page .fp-co-close:hover  { background: rgba(249,125,9,.16); }
.food-page .fp-co-close:active { transform: scale(.9); }
.food-page .fp-co-close:focus-visible { outline: 2px solid var(--fco-focus); outline-offset: 2px; }
/* ── Body ── */
.food-page .fp-co-body {
    flex: 1 1 auto; overflow-y: auto;
    padding: 16px 20px 8px;
    -webkit-overflow-scrolling: touch;
}
.food-page .fp-co-body::-webkit-scrollbar { width: 4px; }
.food-page .fp-co-body::-webkit-scrollbar-thumb { background: var(--fco-border); border-radius: 99px; }
/* ── Section label ── */
.food-page .fp-co-section-label {
    font: 800 11px/1 'Inter',sans-serif;
    text-transform: uppercase; letter-spacing: .7px;
    color: #64748b; margin: 0 0 10px;
    display: flex; align-items: center; gap: 6px;
}
.food-page .fp-co-section-label i { font-size: 13px; color: var(--fco-dark); }
/* ── Cancellation policy card ── */
.food-page .fp-co-policy-card {
    background: var(--fco-tint);
    border: 1px solid var(--fco-border);
    border-radius: 14px; padding: 12px 16px; margin-bottom: 16px;
}
.food-page .fp-co-policy-card-title {
    display: flex; align-items: center; gap: 8px;
    font: 700 11px/1 'Inter',sans-serif;
    color: var(--fco-dark);
    text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px;
}
.food-page .fp-co-policy-card-title i { font-size: 13px; }
.food-page .fp-co-policy {
    font: 500 12.5px/1.65 'Inter',sans-serif; color: #475569; margin: 0;
}
/* ── Cooking instruction check-cards ── */
.food-page .fp-co-checks {
    display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px;
}
.food-page .fp-co-check-card {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border: 1.5px solid #f1f5f9; border-radius: 12px; cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s, transform .1s;
    user-select: none; -webkit-tap-highlight-color: transparent;
}
.food-page .fp-co-check-card:hover {
    border-color: var(--fco-border); background: var(--fco-tint);
}
.food-page .fp-co-check-card.checked {
    border-color: var(--fco); background: var(--fco-tint);
    box-shadow: 0 0 0 1px var(--fco-focus);
}
.food-page .fp-co-check-card:active { transform: scale(.98); }
.food-page .fp-co-check-box {
    width: 20px; height: 20px; border-radius: 6px;
    border: 2px solid #c8d3dc; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 12px; color: #fff;
    transition: border-color .15s, background .15s;
}
.food-page .fp-co-check-card.checked .fp-co-check-box {
    border-color: var(--fco-dark); background: var(--fco-dark);
}
.food-page .fp-co-check-label { font: 600 13.5px/1.4 'Inter',sans-serif; color: #0f172a; flex: 1; }
/* Add-on price, pushed to the far right of the check-card by the label's flex:1 */
.food-page .fp-co-check-price {
    flex-shrink: 0; margin-left: 10px; white-space: nowrap;
    font: 800 13px/1 'Inter',sans-serif; color: var(--fco-dark);
    letter-spacing: -.2px;
}
.food-page .fp-co-check-price.fp-co-check-free {
    color: #16a34a; text-transform: uppercase; letter-spacing: .4px; font-size: 11px;
}
/* ── Dynamic instruction states (loading / empty / error) ── */
.food-page .fp-ci-status {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 22px 14px; min-height: 64px; text-align: center;
    font: 600 13px/1.4 'Inter',sans-serif; color: #64748b;
}
.food-page .fp-ci-status i { font-size: 16px; color: var(--fco); }
.food-page .fp-ci-error { flex-wrap: wrap; }
.food-page .fp-ci-spinner {
    width: 18px; height: 18px; flex-shrink: 0;
    border: 2.5px solid var(--fco-border); border-top-color: var(--fco);
    border-radius: 50%; animation: fpCiSpin .7s linear infinite;
}
@keyframes fpCiSpin { to { transform: rotate(360deg); } }
.food-page .fp-ci-retry {
    appearance: none; -webkit-appearance: none;
    border: 1.5px solid var(--fco-border); background: var(--fco-tint);
    color: var(--fco-dark); font: 700 12px/1 'Inter',sans-serif;
    padding: 7px 14px; border-radius: 999px; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.food-page .fp-ci-retry:hover { border-color: var(--fco); }
.food-page .fp-ci-retry:focus-visible { outline: 2px solid var(--fco-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .food-page .fp-ci-spinner { animation-duration: 1.4s; }
}
/* ── Payment options ── */
.food-page .fp-co-pay-options {
    display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px;
}
.food-page .fp-co-pay-card {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 14px 16px;
    border: 2px solid #f1f5f9; border-radius: 16px; cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    user-select: none; -webkit-tap-highlight-color: transparent;
}
.food-page .fp-co-pay-card:hover {
    border-color: var(--fco-border); background: var(--fco-tint);
}
.food-page .fp-co-pay-card.fp-cp-sel {
    border-color: var(--fco); background: var(--fco-tint);
    box-shadow: 0 0 0 3px var(--fco-focus);
}
.food-page .fp-co-pay-card:active { transform: scale(.99); }
.food-page .fp-co-pay-card:focus-visible { outline: 2px solid var(--fco-focus); outline-offset: 2px; }
/* ── Radio dot ── */
.food-page .fp-co-radio-dot {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid #c8d3dc; background: #fff;
    flex-shrink: 0; margin-top: 2px;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s;
}
.food-page .fp-co-radio-dot::after {
    content: ''; width: 10px; height: 10px; border-radius: 50%;
    background: var(--fco); opacity: 0;
    transform: scale(.4); transition: opacity .15s, transform .15s;
}
.food-page .fp-co-pay-card.fp-cp-sel .fp-co-radio-dot { border-color: var(--fco); }
.food-page .fp-co-pay-card.fp-cp-sel .fp-co-radio-dot::after { opacity: 1; transform: scale(1); }
/* ── Pay content ── */
.food-page .fp-co-pay-info { flex: 1; min-width: 0; }
.food-page .fp-co-pay-name { font: 700 14.5px/1 'Inter',sans-serif; color: #0f172a; margin-bottom: 3px; }
.food-page .fp-co-pay-sub  { font: 500 12px/1.4 'Inter',sans-serif; color: #64748b; margin-bottom: 8px; }
.food-page .fp-co-pay-amount { font: 800 15px/1 'Inter',sans-serif; color: var(--fco-dark); white-space: nowrap; }
.food-page .fp-co-pay-icon { color: var(--fco); font-size: 18px; flex-shrink: 0; margin-top: 4px; }
/* ── Bottom row: badge stack left, amount right ── */
.food-page .fp-co-pay-bottom-row {
    display: flex; align-items: center;
    justify-content: space-between; gap: 8px; margin-top: 8px;
}
/* ── Payment badge stack (mirrors fb-co-pay-badge-row) ── */
.food-page .fp-co-pay-badge-row { display: flex; align-items: center; }
.food-page .fp-co-pay-badge {
    width: 30px; height: 30px; border-radius: 50%;
    border: 2.5px solid #fff; background: #fff;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0; position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.06);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease;
    margin-left: -9px;
}
.food-page .fp-co-pay-badge:first-child { margin-left: 0; }
.food-page .fp-co-pay-badge:nth-child(1) { z-index: 4; }
.food-page .fp-co-pay-badge:nth-child(2) { z-index: 3; }
.food-page .fp-co-pay-badge:nth-child(3) { z-index: 2; }
.food-page .fp-co-pay-badge:nth-child(4) { z-index: 1; }
.food-page .fp-co-pay-badge-row:hover .fp-co-pay-badge { box-shadow: 0 6px 16px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.06); }
.food-page .fp-co-pay-badge-row:hover .fp-co-pay-badge:nth-child(1) { transform: translateY(-3px); transition-delay:   0ms; }
.food-page .fp-co-pay-badge-row:hover .fp-co-pay-badge:nth-child(2) { transform: translateY(-3px); transition-delay:  35ms; }
.food-page .fp-co-pay-badge-row:hover .fp-co-pay-badge:nth-child(3) { transform: translateY(-3px); transition-delay:  70ms; }
.food-page .fp-co-pay-badge-row:hover .fp-co-pay-badge:nth-child(4) { transform: translateY(-3px); transition-delay: 105ms; }
.food-page .fp-co-pay-card.fp-cp-sel .fp-co-pay-badge { border-color: rgba(255,255,255,.85); }
.food-page .fp-co-pay-badge img { width: 18px; height: 18px; object-fit: contain; display: block; }
/* ── Order summary card ── */
.food-page .fp-co-summary-wrap {
    background: var(--fco-tint);
    border: 1.5px solid var(--fco-border);
    border-radius: 14px; padding: 4px 16px; margin-bottom: 10px;
}
.food-page .fp-co-sum-row {
    display: flex; align-items: baseline;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid rgba(249,125,9,.10);
}
.food-page .fp-co-sum-row:last-child { border-bottom: none; }
.food-page .fp-co-sum-row .lbl { font: 600 13px/1 'Inter',sans-serif; color: #64748b; }
.food-page .fp-co-sum-row .val { font: 700 13px/1 'Inter',sans-serif; color: #0f172a; }
.food-page .fp-co-sum-row.grand { padding: 12px 0 10px; }
.food-page .fp-co-sum-row.grand .lbl { font: 800 14.5px/1 'Inter',sans-serif; color: #0f172a; }
.food-page .fp-co-sum-row.grand .val { font: 800 20px/1 'Inter',sans-serif; color: var(--fco); letter-spacing: -.4px; }

/* ORDER CONFIRMED — ultra-modern success screen (replaces the
   checkout body+footer on a confirmed order). */
.food-page .fp-co-success {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    padding: 8px 22px calc(22px + env(safe-area-inset-bottom, 0px));
}
.food-page .fp-co-success[hidden] { display: none; }
.food-page .fp-success {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 13px; width: 100%; max-width: 360px;
    animation: fpSuccessIn .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes fpSuccessIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.food-page .fp-success-icon {
    position: relative;
    width: 92px; height: 92px; margin-bottom: 2px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 36%, #E6FAF5 0%, #d2f5eb 100%);
    box-shadow: 0 14px 32px rgba(0,158,120,.28), inset 0 1px 0 rgba(255,255,255,.85);
}
.food-page .fp-success-icon::before {
    content: ''; position: absolute; inset: -7px; border-radius: 50%;
    border: 2px solid rgba(0,200,150,.4);
    animation: fpSuccessHalo 1.9s ease-out infinite;
}
@keyframes fpSuccessHalo {
    0%   { transform: scale(.82); opacity: .85; }
    100% { transform: scale(1.28); opacity: 0; }
}
.food-page .fp-success-icon svg { width: 56px; height: 56px; }
.food-page .fp-success-ring {
    fill: none; stroke: var(--fp-brand); stroke-width: 3.5; opacity: .35;
    stroke-dasharray: 151; stroke-dashoffset: 151;
    transform: rotate(-90deg); transform-origin: 50% 50%;
    animation: fpSuccessDraw .6s ease-out .1s forwards;
}
.food-page .fp-success-check {
    fill: none; stroke: var(--fp-brand-dark); stroke-width: 4.5;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 38; stroke-dashoffset: 38;
    animation: fpSuccessDrawCheck .36s cubic-bezier(.65,0,.45,1) .5s forwards;
}
@keyframes fpSuccessDraw      { to { stroke-dashoffset: 0; } }
@keyframes fpSuccessDrawCheck { to { stroke-dashoffset: 0; } }
.food-page .fp-success-title {
    font: 800 22px/1.2 'Inter',sans-serif; color: var(--fp-navy);
    margin: 0; letter-spacing: -.4px;
}
.food-page .fp-success-msg {
    font: 500 13.5px/1.65 'Inter',sans-serif; color: var(--fp-muted);
    margin: 0; max-width: 300px;
}
.food-page .fp-success-ref {
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--fp-brand-light);
    border: 1px dashed rgba(0,158,120,.4);
    border-radius: 12px; padding: 10px 16px; margin-top: 2px;
}
.food-page .fp-success-ref-lbl {
    font: 700 10px/1 'Inter',sans-serif; text-transform: uppercase;
    letter-spacing: .8px; color: var(--fp-brand-dark);
}
.food-page .fp-success-ref-val {
    font: 800 14px/1 'Inter',sans-serif; color: var(--fp-navy); letter-spacing: .4px;
}
.food-page .fp-success-done {
    appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
    width: 100%; max-width: 320px; margin-top: 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 16px; padding: 15px 22px;
    font: 800 14.5px/1 'Inter',sans-serif; color: #fff;
    background: linear-gradient(135deg, #00D6A0 0%, var(--fp-brand) 45%, var(--fp-brand-dark) 100%);
    box-shadow: 0 12px 26px rgba(0,158,120,.34);
    transition: transform .14s ease, filter .14s ease;
}
.food-page .fp-success-done:hover  { transform: translateY(-1px); filter: brightness(1.04); }
.food-page .fp-success-done:active { transform: scale(.98); }
.food-page .fp-success-done:focus-visible { outline: 3px solid var(--fp-brand-light); outline-offset: 3px; }
.food-page .fp-success-done i { font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
    .food-page .fp-success,
    .food-page .fp-success-icon::before,
    .food-page .fp-success-ring,
    .food-page .fp-success-check { animation: none !important; }
    .food-page .fp-success-ring,
    .food-page .fp-success-check { stroke-dashoffset: 0; }
}
/* ── Footer ── */
.food-page .fp-co-footer {
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(249,125,9,.14);
    background: #fff; flex-shrink: 0;
}
/* ── Confirm button ── */
.food-page .fp-co-confirm-btn {
    appearance: none; -webkit-appearance: none;
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; border: 0; border-radius: 16px; padding: 15px 22px;
    background: linear-gradient(135deg, #ffab2e 0%, #F97D09 55%, #e67800 100%);
    color: #fff;
    font: 700 15px/1 'Inter',sans-serif; letter-spacing: -.1px; cursor: pointer;
    box-shadow: 0 8px 24px var(--fco-glow);
    transition: transform .12s ease, box-shadow .18s ease, filter .12s ease;
}
.food-page .fp-co-confirm-btn:hover {
    filter: brightness(1.07);
    box-shadow: 0 12px 32px rgba(249,125,9,.48);
    transform: translateY(-1px);
}
.food-page .fp-co-confirm-btn:active { transform: scale(.98); box-shadow: 0 4px 12px rgba(249,125,9,.24); }
.food-page .fp-co-confirm-btn:focus-visible { outline: 3px solid var(--fco-focus); outline-offset: 3px; }
.food-page .fp-co-confirm-btn .fp-co-confirm-arrow {
    font-size: 20px; transition: transform .22s cubic-bezier(.32,.72,0,1);
}
.food-page .fp-co-confirm-btn:hover .fp-co-confirm-arrow { transform: translateX(5px); }
.food-page .fp-co-confirm-btn:disabled,
.food-page .fp-co-confirm-btn.loading {
    background: #cbd5e1; box-shadow: none;
    cursor: not-allowed; transform: none !important; filter: none !important;
}
/* ITEM OPTIONS SHEET (fp-opt-sheet) A focused bottom-sheet for
   per-item cooking preferences. */
.food-page .fp-opt-backdrop {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.60);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility 0s .22s;
    z-index: 1090;
}
.food-page .fp-opt-backdrop.show {
    opacity: 1; visibility: visible;
    transition: opacity .24s ease;
}
.food-page .fp-opt-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.14), 0 -2px 8px rgba(0,0,0,.06);
    display: flex; flex-direction: column;
    max-height: 72vh;
    z-index: 1091;
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.32,.72,0,1);
    --fco: #F97D09; --fco-dark: #DF6B00;
    --fco-tint: rgba(249,125,9,.06);
    --fco-border: rgba(249,125,9,.22);
    --fco-focus: rgba(249,125,9,.40);
    --fco-glow:  rgba(249,125,9,.32);
}
.food-page .fp-opt-sheet.open { transform: translateY(0); }
@media (min-width: 560px) {
    .food-page .fp-opt-sheet {
        left: 50%; right: auto;
        width: 520px; max-width: 96vw;
        transform: translateX(-50%) translateY(100%);
        bottom: 4vh; border-radius: 22px; max-height: 80vh;
    }
    .food-page .fp-opt-sheet.open { transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .food-page .fp-opt-sheet,
    .food-page .fp-opt-backdrop { transition: none; }
}
.food-page .fp-opt-item-name {
    font: 500 12.5px/1.3 'Inter',sans-serif;
    color: var(--fp-muted); margin: 4px 0 0;
    max-width: 240px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Cart "Proceed to Checkout" CTA (outside overlay) — same as main.html .btn-checkout ── */
.food-page .fp-btn-checkout {
    background: linear-gradient(135deg, #f09948 0%, #F97D09 100%);
    box-shadow: 0 8px 20px rgba(0, 168, 89, .25);
}
.food-page .fp-btn-checkout:hover { filter: brightness(1.04); }
.food-page .fp-btn-checkout:active { transform: scale(.97); box-shadow: 0 4px 10px rgba(0, 168, 89, .15); }
.food-page .fp-btn-checkout:focus-visible { outline: 3px solid rgba(249,125,9,.55); outline-offset: 3px; }

/* Food Reviews bottom-sheet — same design as service reviews. */

/* Clickable rating badge on cards + detail overlay */
.food-page .fp-card .rating.fp-rv-trigger,
.food-page .fp-detail-meta .rating.fp-rv-trigger,
.food-page .fp-detail-meta .reviews.fp-rv-trigger {
    cursor: pointer;
    border-radius: 99px;
    padding: 2px 5px;
    transition: background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
}
.food-page .fp-card .rating.fp-rv-trigger:hover,
.food-page .fp-detail-meta .rating.fp-rv-trigger:hover,
.food-page .fp-detail-meta .reviews.fp-rv-trigger:hover {
    background: rgba(245,158,11,.12);
}
.food-page .fp-card .rating.fp-rv-trigger:active,
.food-page .fp-detail-meta .rating.fp-rv-trigger:active,
.food-page .fp-detail-meta .reviews.fp-rv-trigger:active {
    background: rgba(245,158,11,.22);
}
.food-page .fp-card .rating.fp-rv-trigger:focus-visible,
.food-page .fp-detail-meta .rating.fp-rv-trigger:focus-visible,
.food-page .fp-detail-meta .reviews.fp-rv-trigger:focus-visible {
    outline: 2px solid rgba(245,158,11,.6);
    outline-offset: 2px;
}

/* ── Review sheet backdrop ── */
.fp-rv-backdrop {
    position: fixed; inset: 0;
    background: rgba(13,27,42,.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1080;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s ease, visibility 0s linear .28s;
}
.fp-rv-backdrop.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .28s ease, visibility 0s linear 0s;
}
/* ── Review sheet ── */
.rv-sheet {
    position: fixed;
    left: 50%; bottom: 0;
    transform: translateX(-50%) translateY(100%);
    visibility: hidden;
    width: 100%; max-width: 680px;
    max-height: 90vh; max-height: 90dvh;
    z-index: 1081;
    background: #fff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    box-shadow: 0 -20px 60px rgba(2,6,23,.25);
    display: flex; flex-direction: column;
    transition: transform .38s cubic-bezier(.32,.72,0,1),
                visibility 0s linear .38s;
    overscroll-behavior: contain;
}
.rv-sheet.open {
    transform: translateX(-50%) translateY(0);
    visibility: visible;
    transition: transform .38s cubic-bezier(.32,.72,0,1),
                visibility 0s linear 0s;
}
.rv-handle {
    width: 44px; height: 4px;
    background: #E2E8F0; border-radius: 99px;
    margin: 10px auto 6px; flex-shrink: 0;
}
.rv-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 6px 20px 14px;
    border-bottom: 1px solid var(--fp-border); flex-shrink: 0;
}
.rv-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.rv-title { font: 800 17px/1.2 'Inter',sans-serif; color: var(--fp-navy); margin: 0; }
.rv-sub   { font: 600 11.5px/1 'Inter',sans-serif; color: var(--fp-muted); letter-spacing: .2px; }
.rv-close {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: #F3F6FA; color: var(--fp-slate); font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s, transform .1s;
}
.rv-close:active { background: #E2E8F0; transform: scale(.94); }
.rv-body {
    flex: 1; overflow-y: auto;
    padding: 16px 20px 32px; scrollbar-width: none;
}
.rv-body::-webkit-scrollbar { display: none; }
/* Summary card */
.rv-summary {
    display: grid; grid-template-columns: minmax(96px,30%) 1fr;
    gap: 16px; padding: 16px;
    background: linear-gradient(135deg,#E6FAF5 0%,#f0fdf9 100%);
    border: 1px solid var(--fp-border); border-radius: 16px;
    margin-bottom: 16px;
}
.rv-score-block {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    padding-right: 12px; border-right: 1px dashed #CBD5E1;
}
.rv-score { font: 900 32px/1 'Inter',sans-serif; color: var(--fp-navy); letter-spacing: -1px; }
.rv-score-stars { font-size: 13px; letter-spacing: 1px; color: #FBBF24; }
.rv-score-stars .star-empty { color: #E2E8F0; }
.rv-score-count { font: 600 11px/1 'Inter',sans-serif; color: var(--fp-muted); margin-top: 2px; }
.rv-bars { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.rv-bar-row {
    display: grid; grid-template-columns: 14px 1fr 28px;
    align-items: center; gap: 8px;
    font: 600 11px/1 'Inter',sans-serif; color: var(--fp-slate);
}
.rv-bar-track { height: 6px; background: #E2E8F0; border-radius: 99px; overflow: hidden; }
.rv-bar-fill {
    height: 100%;
    background: linear-gradient(90deg,#FBBF24,#F59E0B);
    border-radius: 99px; width: 0%;
    transition: width .5s cubic-bezier(.4,0,.2,1);
}
.rv-bar-count { text-align: right; color: var(--fp-muted); }
/* Compose card */
.rv-compose-card {
    background: #fff; border: 1px solid var(--fp-border);
    border-radius: 16px; padding: 14px 16px;
    margin-bottom: 18px;
    box-shadow: 0 1px 4px rgba(2,6,23,.04);
}
.rv-compose-prompt {
    display: flex; align-items: center;
    justify-content: space-between; gap: 10px;
}
.rv-compose-prompt-text { font: 700 13.5px/1.3 'Inter',sans-serif; color: var(--fp-navy); }
.rv-compose-prompt-text small {
    display: block; font: 500 11.5px/1 'Inter',sans-serif;
    color: var(--fp-muted); margin-top: 4px;
}
.rv-cta-write {
    background: var(--fp-brand); color: #fff; border: none;
    border-radius: 99px; padding: 10px 18px;
    font: 700 12.5px/1 'Inter',sans-serif; cursor: pointer;
    box-shadow: 0 6px 20px rgba(0,200,150,.28);
    transition: background .2s, transform .1s; white-space: nowrap;
}
.rv-cta-write:active { background: var(--fp-brand-dark); transform: scale(.97); }
.rv-compose-form { display: flex; flex-direction: column; gap: 12px; }
.rv-compose-label {
    font: 700 11.5px/1 'Inter',sans-serif; color: var(--fp-muted);
    text-transform: uppercase; letter-spacing: .5px;
}
.rv-star-picker {
    display: flex; align-items: center; gap: 8px;
    font-size: 32px; line-height: 1; user-select: none;
}
.rv-star-picker .rv-star { cursor: pointer; color: #E2E8F0; transition: color .15s, transform .12s; }
.rv-star-picker .rv-star.active { color: #FBBF24; }
.rv-star-picker .rv-star:active { transform: scale(1.15); }
.rv-star-hint { font: 600 12.5px/1 'Inter',sans-serif; color: var(--fp-navy); margin-left: 6px; }
.rv-textarea {
    width: 100%; min-height: 90px; padding: 12px 14px;
    border: 1.5px solid var(--fp-border); border-radius: 12px;
    font: 500 13.5px/1.45 'Inter',sans-serif; color: var(--fp-navy);
    resize: vertical; background: #FAFBFC;
    transition: border-color .15s, background .15s;
    appearance: none; -webkit-appearance: none;
}
.rv-textarea:focus { outline: none; border-color: var(--fp-brand); background: #fff; }
.rv-compose-actions { display: flex; gap: 10px; justify-content: flex-end; }
.rv-btn {
    padding: 10px 18px; border-radius: 99px;
    font: 700 12.5px/1 'Inter',sans-serif;
    cursor: pointer; border: none;
    transition: background .2s, transform .1s, opacity .15s;
}
.rv-btn-secondary { background: #F3F6FA; color: var(--fp-slate); }
.rv-btn-secondary:active { background: #E2E8F0; transform: scale(.97); }
.rv-btn-primary { background: var(--fp-brand); color: #fff; box-shadow: 0 6px 20px rgba(0,200,150,.28); }
.rv-btn-primary:active { background: var(--fp-brand-dark); transform: scale(.97); }
.rv-btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.rv-btn .rv-btn-spinner {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
    border-radius: 50%; animation: rvSpin .7s linear infinite;
    vertical-align: middle; margin-right: 6px;
}
@keyframes rvSpin { to { transform: rotate(360deg); } }
/* Review list */
.rv-list { display: flex; flex-direction: column; gap: 12px; }
.rv-loading, .rv-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; padding: 36px 16px;
    color: var(--fp-muted); font: 600 13px/1.4 'Inter',sans-serif; text-align: center;
}
.rv-empty i { font-size: 32px; color: #CBD5E1; }
.rv-empty p { margin: 0; }
.rv-spinner {
    width: 22px; height: 22px;
    border: 2.5px solid #E2E8F0; border-top-color: var(--fp-brand);
    border-radius: 50%; animation: rvSpin .8s linear infinite;
}
.rv-item {
    background: #fff; border: 1px solid var(--fp-border);
    border-radius: 14px; padding: 14px 16px;
    display: flex; gap: 12px; transition: border-color .15s;
}
.rv-item.is-mine {
    border-color: rgba(0,200,150,.30);
    background: linear-gradient(180deg,#E6FAF5 0%,#fff 100%);
}
.rv-avatar {
    width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
    background: linear-gradient(135deg,var(--fp-brand),var(--fp-brand-dark));
    color: #fff; display: flex; align-items: center; justify-content: center;
    font: 800 14px/1 'Inter',sans-serif; text-transform: uppercase; letter-spacing: .3px;
}
.rv-item-body { flex: 1; min-width: 0; }
.rv-item-head {
    display: flex; align-items: center;
    justify-content: space-between; gap: 8px; margin-bottom: 4px;
}
.rv-item-name {
    font: 700 13.5px/1 'Inter',sans-serif; color: var(--fp-navy);
    display: flex; align-items: center; gap: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-mine-chip {
    font: 700 9.5px/1 'Inter',sans-serif; letter-spacing: .4px;
    text-transform: uppercase;
    background: var(--fp-brand-light); color: var(--fp-brand-dark);
    padding: 3px 7px; border-radius: 99px;
}
.rv-item-date { font: 600 11px/1 'Inter',sans-serif; color: var(--fp-muted); white-space: nowrap; }
.rv-item-stars { font-size: 13px; letter-spacing: 1.5px; color: #FBBF24; margin-bottom: 6px; }
.rv-item-stars .star-empty { color: #E2E8F0; }
.rv-item-comment { font: 500 13.5px/1.5 'Inter',sans-serif; color: var(--fp-slate); margin: 0; word-wrap: break-word; }
.rv-item-actions { display: flex; gap: 8px; margin-top: 8px; }
.rv-action-btn {
    background: transparent; border: none; padding: 4px 8px;
    font: 700 11px/1 'Inter',sans-serif; color: var(--fp-slate);
    cursor: pointer; border-radius: 6px;
    transition: background .15s, color .15s;
    display: inline-flex; align-items: center; gap: 4px;
}
.rv-action-btn:active { background: #F3F6FA; }
.rv-action-btn.danger { color: #E11D48; }
.rv-action-btn.danger:active { background: #FEE2E2; }

/* Food-page bottom cart bar overrides — main_style.css provides the base
   .bottom-cart-attached rules; these scoped rules tune colours for orange. */
#fpBottomCartBar {
    box-shadow: 0 -4px 24px rgba(249,125,9,.38), 0 -1px 0 rgba(255,255,255,.12);
}
#fpBottomCartBar .overlap-img-group img {
    border-color: rgba(255,255,255,.75);
}
#fpBottomCartBar .cart-prog-fill {
    background: rgba(255,255,255,.85);
}
#fpBottomCartBar .cart-prog-bar {
    background: rgba(0,0,0,.18);
}
/* Hide the FAB when the bottom bar is active — no visual conflict */
body:has(#fpBottomCartBar:not(.d-none)) #fpFabCart {
    display: none !important;
}
/* Hide bottom bar whenever the food cart sheet or product detail is open */
body:has(.fp-cart.open) #fpBottomCartBar,
body:has(.fp-detail.open) #fpBottomCartBar { display: none !important; }

/* ── FAB cart button — visible only inside product detail overlay ── */
#fpFabCartBtn {
    position: fixed;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #008080;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 8px 20px rgba(0,128,128,.42), 0 2px 8px rgba(0,0,0,.15);
    z-index: 1090;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .2s cubic-bezier(.175,.885,.32,1.275),
                box-shadow .2s ease,
                opacity .22s ease,
                visibility 0s linear .22s;
}
/* Shows only when detail overlay is open, cart is not, AND cart has
   ≥1 item (.fp-fab-has-items, toggled by renderFabBadge). */
body:has(.fp-detail.open):not(:has(.fp-cart.open)) #fpFabCartBtn.fp-fab-has-items {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .2s cubic-bezier(.175,.885,.32,1.275),
                box-shadow .2s ease,
                opacity .22s ease,
                visibility 0s linear 0s;
}
/* JS-fallback class — also requires a non-empty cart */
#fpFabCartBtn.fp-fab-visible.fp-fab-has-items {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .2s cubic-bezier(.175,.885,.32,1.275),
                box-shadow .2s ease,
                opacity .22s ease,
                visibility 0s linear 0s;
}
#fpFabCartBtn:hover  { transform: scale(1.06); box-shadow: 0 12px 28px rgba(0,128,128,.50); }
#fpFabCartBtn:active { transform: scale(.92);  box-shadow: 0 4px 10px rgba(0,128,128,.40); }
#fpFabCartBtn:focus-visible { outline: 3px solid rgba(0,128,128,.65); outline-offset: 3px; }

/* Cart-count badge on the FAB: absolutely positioned in the top-right
   notch so it never disturbs the icon's flex centering. Hidden at zero. */
#fpFabCartBtn .fp-fab-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fa8803;
    color: #fff;
    font: 700 11px/1 'Inter', -apple-system, sans-serif;
    letter-spacing: .2px;
    white-space: nowrap;
    border: 2px solid #fff;            /* crisp separation from the basket */
    box-shadow: 0 2px 6px rgba(180, 88, 0, .45);
    pointer-events: none;              /* clicks pass through to the button */
    transform-origin: center;
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1),
                opacity .16s ease;
}

/* Empty cart → fully hidden, no layout impact. */
#fpFabCartBtn .fp-fab-badge.is-empty {
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

/* Count-change pop — re-triggered from JS by toggling the class. */
#fpFabCartBtn .fp-fab-badge.pop {
    animation: fpFabBadgePop .32s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes fpFabBadgePop {
    0%   { transform: scale(1);   }
    40%  { transform: scale(1.32); }
    100% { transform: scale(1);   }
}

@media (prefers-reduced-motion: reduce) {
    #fpFabCartBtn .fp-fab-badge { transition: opacity .16s ease; }
    #fpFabCartBtn .fp-fab-badge.is-empty { transform: none; }
    #fpFabCartBtn .fp-fab-badge.pop { animation: none; }
}

/* Opening entrance animation: staggered reveal of page chrome on load,
   plus cascading fade-up for grid cards as each is inserted. */
@keyframes fpEnter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.food-page .fp-header     { animation: fpEnter .45s cubic-bezier(.22,.61,.36,1) both; }
.food-page .fp-titlebar   { animation: fpEnter .45s cubic-bezier(.22,.61,.36,1) .07s both; }
.food-page .fp-filter-bar { animation: fpEnter .45s cubic-bezier(.22,.61,.36,1) .14s both; }
.food-page #fpGrid > *    { animation: fpEnter .4s cubic-bezier(.22,.61,.36,1) both; }
.food-page #fpGrid > *:nth-child(1) { animation-delay: .18s; }
.food-page #fpGrid > *:nth-child(2) { animation-delay: .21s; }
.food-page #fpGrid > *:nth-child(3) { animation-delay: .24s; }
.food-page #fpGrid > *:nth-child(4) { animation-delay: .27s; }
.food-page #fpGrid > *:nth-child(5) { animation-delay: .30s; }
.food-page #fpGrid > *:nth-child(6) { animation-delay: .33s; }

@media (prefers-reduced-motion: reduce) {
    .food-page .fp-header,
    .food-page .fp-titlebar,
    .food-page .fp-filter-bar,
    .food-page #fpGrid > * { animation: none; }
}