:is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) {
        --cart-thumb-size: clamp(28px, 8vw, 44px);
        --cart-thumb-step: clamp(10px, 3.5vw, 24px);
        left: max(8px, env(safe-area-inset-left, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        bottom: calc(var(--mobile-nav-height) + var(--mobile-bottom-safe) + 4px);
        height: var(--mobile-cart-height, 70px);
        max-height: 70px;
        padding: 0;
        overflow: hidden;
        isolation: isolate;
        border: 1px solid #ffac37;
        border-radius: clamp(18px, 3.6vw, 28px);
        background: linear-gradient(175deg, #ff960d 0%, #ff8109 30%, #ff6404 65%, #ee4900 100%);
        box-shadow: inset 0 0 3px #ffd082, 0 4px 12px #b3532026;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar)::before,
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar)::after {
        content: "";
        position: absolute;
        z-index: -1;
        pointer-events: none;
        border-radius: 50%;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar)::before {
        width: 89%;
        height: 125%;
        left: -10%;
        top: 0;
        transform: rotate(14deg);
        background: linear-gradient(180deg, #ff790626, #e8470038);
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar)::after {
        width: 88%;
        height: 65%;
        left: -22%;
        bottom: -45%;
        background: #ffac1726;
        transform: rotate(8deg);
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-attached-inner {
        height: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-left-section {
        min-width: 0;
        height: 100%;
        padding: 6px 12px;
        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) max-content;
        grid-template-rows: minmax(0, 1fr) 6px 11px;
        gap: 3px 8px;
        align-items: center;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-delivery-badge {
        display: grid;
        place-items: center;
        width: 100%;
        aspect-ratio: 1.3;
        margin-left: 0;
        border-radius: 50%;
        background: linear-gradient(145deg, #ffcd6559, #ffbf4938);
        box-shadow: inset 0 1px 1px #ffd77a40;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-delivery-badge svg { width: 90%; height: auto; }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-prog-info {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        line-height: 1.1;
        white-space: nowrap;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-prog-info strong {
        font-size: clamp(14px, 3.5vw, 16px);
        font-weight: 700;
        letter-spacing: -.35px;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-prog-info .text-light-green {
        font-size: clamp(10px, 2.2vw, 11px);
        color: #ffe1b6;
        font-weight: 500;
        letter-spacing: 0;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-summary-total {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 2px;
        line-height: 1.1;
        white-space: nowrap;
        text-align: right;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-summary-label {
        color: #ffe1b6;
        font-size: 9px;
        font-weight: 500;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-summary-total strong {
        color: #fff;
        font-size: clamp(12px, 3.5vw, 16px);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        letter-spacing: -.2px;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-prog-bar {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        height: 6px;
        border-radius: 20px;
        background: linear-gradient(180deg, #ffca91, #ffb879);
        box-shadow: inset 0 0 1px 1px #ffe3b870;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-prog-fill {
        border-radius: inherit;
        background: linear-gradient(180deg, #04b649, #00a13f);
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-delivery-hint {
        grid-column: 1 / -1;
        font-size: clamp(8px, 1.57vw, 9px);
        line-height: 1.2;
        font-weight: 500;
        white-space: nowrap;
        padding-left: 1px;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-delivery-hint-unlocked { display: none; }
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar)[data-confetti-fired="true"] .cart-delivery-hint-pending { display: none; }
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar)[data-confetti-fired="true"] .cart-delivery-hint-unlocked { display: block; }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-right-section {
        height: 44px;
        min-width: 0;
        display: grid;
        grid-template-columns: max-content 14px;
        gap: 12px;
        align-items: center;
        padding: 0 10px;
        border-left: 2px solid #ffc07180;
    }

    /* The cart updater supplies up to five images, with descending z-index.
       Each successive circle tucks beneath the preceding one. */
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-basket-art {
        display: flex;
        align-items: center;
        width: max-content;
        height: var(--cart-thumb-size);
        isolation: isolate;
        overflow: visible;
        background: transparent;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-basket-art img {
        display: block;
        position: relative;
        flex: 0 0 var(--cart-thumb-size);
        width: var(--cart-thumb-size);
        height: var(--cart-thumb-size);
        margin: 0;
        padding: 2px;
        border: 2px solid #00a85a;
        border-radius: 50%;
        background: #fff;
        object-fit: contain;
        box-shadow: 0 1px 2px #005d3830;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-basket-art img + img {
        margin-left: calc(var(--cart-thumb-step) - var(--cart-thumb-size));
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-basket-art img:nth-child(1) { z-index: 5; }
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-basket-art img:nth-child(2) { z-index: 4; }
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-basket-art img:nth-child(3) { z-index: 3; }
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-basket-art img:nth-child(4) { z-index: 2; }
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-basket-art img:nth-child(5) { z-index: 1; }
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-basket-art img:nth-child(n + 6) {
        display: none;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-expand-chevron { width: 100%; height: auto; }


/* Preserve the product footer stacking while matching the cart surface. */
#offcanvasProductView .pv-inner-cart-bar {
    border-radius: clamp(18px, 3.6vw, 28px) !important;
    box-shadow: inset 0 0 3px #ffd082, 0 4px 12px #b3532026 !important;
}

/* Shared cart design for the mobile navigation and product-view footer.
   cart.js supplies totals, delivery progress and product images. */
@media (max-width: 767px) {
    body:has(.bottom-nav) {
        --mobile-nav-height: clamp(70px, 12.45vw, 96px);
        --mobile-cart-height: 70px;
        --mobile-bottom-safe: env(safe-area-inset-bottom, 0px);
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-bottom-safe) + 12px);
    }

    body:has(> #bottomCartBar:not(.d-none)) {
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-bottom-safe) + var(--mobile-cart-height) + 18px);
    }

    /* The account panel scrolls independently of body. Reserve its own
       clearance for the fixed navigation and the optional cart bar. */
    #offcanvasAccount .app-scroll-body-account {
        --account-footer-clearance: calc(var(--mobile-nav-height, 70px) + var(--mobile-bottom-safe, 0px) + 16px);
        min-height: 0;
        padding-bottom: var(--account-footer-clearance);
        scroll-padding-bottom: var(--account-footer-clearance);
    }

    body:has(> #bottomCartBar:not(.d-none)) #offcanvasAccount .app-scroll-body-account {
        --account-footer-clearance: calc(var(--mobile-nav-height, 70px) + var(--mobile-bottom-safe, 0px) + var(--mobile-cart-height, 70px) + 20px);
    }

    body .bottom-nav.mobile-only {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        height: calc(var(--mobile-nav-height) + var(--mobile-bottom-safe));
        padding: 5px max(9px, env(safe-area-inset-right, 0px)) calc(13px + var(--mobile-bottom-safe)) max(9px, env(safe-area-inset-left, 0px));
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 3px;
        border: 1px solid #fff;
        border-radius: clamp(24px, 4.8vw, 38px) clamp(24px, 4.8vw, 38px) 0 0;
        background: linear-gradient(165deg, #fff 0%, #f9faff 60%, #f0f3fb 100%);
        box-shadow: 0 -3px 14px #505e7721, inset 0 -2px 0 #dce2f0;
        font-family: Arial, Helvetica, sans-serif;
    }

    body .bottom-nav.mobile-only::after {
        content: "";
        position: absolute;
        width: 23.5%;
        height: clamp(4px, .95vw, 7px);
        left: 38.25%;
        bottom: calc(4px + var(--mobile-bottom-safe));
        border-radius: 20px;
        background: #586170;
    }

    body .bottom-nav .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        text-decoration: none;
        background: transparent;
        border: 0;
        min-width: 0;
        height: 100%;
        gap: clamp(4px, .9vw, 7px);
        padding: 5px 0 7px;
        overflow: visible;
        border-radius: clamp(20px, 4vw, 32px);
        color: #596170;
        font-size: clamp(10px, 1.85vw, 14px);
        line-height: 1.1;
        font-weight: 700;
        white-space: nowrap;
    }

    body .bottom-nav .bottom-nav-icon {
        width: clamp(25px, 4vw, 31px);
        height: clamp(25px, 4vw, 31px);
        flex-shrink: 0;
    }

    body .bottom-nav .bottom-nav-item.active {
        color: #fa5807;
        background: radial-gradient(ellipse at 50% 40%, #fff0e4, #fcf0e8cc 70%, #fff4eb80);
    }

    body .bottom-nav .bottom-nav-item.active::after {
        content: "";
        position: absolute;
        bottom: -2px;
        left: 31%;
        width: 38%;
        height: clamp(3px, .68vw, 5px);
        border-radius: 8px;
        background: #ff6508;
    }

    body .bottom-nav .bottom-nav-item.active .nav-home-icon {
        filter: drop-shadow(0 -1px 0 #ffab36);
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar):focus-visible,
    body .bottom-nav .bottom-nav-item:focus-visible {
        outline: 2px solid #62401c;
        outline-offset: -3px;
    }

    body.recipe-page .detail-overlay {
        height: calc(100% - var(--mobile-nav-height) - var(--mobile-bottom-safe));
        height: calc(100dvh - var(--mobile-nav-height) - var(--mobile-bottom-safe));
    }

    body.recipe-page .fab-cart-btn,
    body.recipe-page .ip-cart-toast,
    body.food-page .fp-fab-cart,
    body.food-page .fp-toast {
        bottom: calc(var(--mobile-nav-height) + var(--mobile-bottom-safe) + 10px);
    }
}

/* Keep the delivery message, total and all five thumbnails aligned on
   narrow phones without increasing the cart bar's height. */
@media (max-width: 389px) {
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) {
        --cart-thumb-size: 24px;
        --cart-thumb-step: 8px;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-left-section {
        padding-inline: 8px;
        grid-template-columns: 26px minmax(0, 1fr) max-content;
        column-gap: 6px;
    }

    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-prog-info strong { font-size: 12px; }
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-prog-info .text-light-green { font-size: 9px; }
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-summary-total strong { font-size: 12px; }
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-right-section { padding-inline: 6px; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar), :is(#bottomCartBar, #offcanvasProductView .pv-inner-cart-bar) .cart-prog-fill { transition: none; }
}