.pwa-install-banner {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #ffffff;
    padding: 12px 12px;
    z-index: 10000;
    align-items: center;
    gap: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
}

@media (max-width: 767px) {
    .pwa-install-banner {
        top: 0;
        bottom: auto;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(-100%);
    }

    .pwa-install-banner.pwa-banner-visible {
        transform: translateY(0);
        opacity: 1;
    }
}

@media (min-width: 768px) {
    .pwa-install-banner {
        bottom: 20px;
        top: auto;
        left: 20px;
        right: auto;
        max-width: 400px;
        border-radius: 12px;
        padding: 16px 20px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
        transform: translateY(100%);
    }

    .pwa-install-banner.pwa-banner-visible {
        transform: translateY(0);
        opacity: 1;
    }

    .pwa-install-banner__icon {
        width: 40px;
        height: 40px;
    }

    .pwa-install-banner__icon img {
        max-width: 40px;
        max-height: 40px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .pwa-install-banner__title {
        font-size: 14px;
    }

    .pwa-install-banner__subtitle {
        font-size: 10px;
    }

    .pwa-install-button {
        padding: 12px 24px;
        font-size: 15px;
    }
}

.pwa-install-banner__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 4px;
    overflow: hidden;
    box-sizing: border-box;
}

.pwa-install-banner__icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center;
    border-radius: 2px;
}

.pwa-install-banner__content {
    flex: 1;
    min-width: 0;
}

.pwa-install-banner__title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-install-banner__subtitle {
    font-size: 13px;
    opacity: 0.9;
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-install-banner__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

.pwa-install-button {
    background: #ffffff;
    color: #1e3c72;
    border: none;
    padding: 10px 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pwa-install-button:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.pwa-install-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pwa-install-close {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-install-close:hover {
    opacity: 1;
}

.pwa-install-close::before {
    content: '×';
    font-size: 28px;
    line-height: 1;
}


@media (min-width: 1024px) {
    .pwa-install-banner {
        max-width: 450px;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

@media (max-width: 767px) {
    body {
        padding-top: 0;
    }

    body.pwa-banner-active {
        --pwa-install-banner-offset: 64px;
        padding-top: var(--pwa-install-banner-offset);
    }

    body.pwa-banner-active #header.tracker-header > .inner {
        top: var(--pwa-install-banner-offset, 64px) !important;
    }

    body.pwa-banner-active.v2 .header {
        top: var(--pwa-install-banner-offset, 64px);
    }

    body.pwa-banner-active.v2 main {
        margin-top: calc((--pwa-install-banner-offset, 64px));
    }

    /* Cart drawer covers the page — hide install banner space so no empty top gap. */
    body.pwa-banner-active.open-cart {
        --pwa-install-banner-offset: 0px;
        padding-top: 0 !important;
    }

    body.pwa-banner-active.open-cart #header.tracker-header > .inner,
    body.pwa-banner-active.open-cart.v2 .header {
        top: 0 !important;
    }

    body.pwa-banner-active.open-cart.v2 main {
        margin-top: 60px;
    }

    body.pwa-banner-active.open-cart main.order-status-tracking_bg {
        padding-top: 0;
    }

    body.open-cart .pwa-install-banner {
        display: none !important;
    }
}

@media (prefers-color-scheme: dark) {
    .pwa-install-banner {
        background: linear-gradient(135deg, #0f1b2e 0%, #1a2f4f 100%);
    }
}

.pwa-install-modal-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.pwa-install-modal-box {
    position: relative;
    background: #fff;
    border-radius: 5px;
    padding: 0;
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.pwa-install-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: #333;
    cursor: pointer;
    opacity: 0.7;
}

.pwa-install-modal-close:hover {
    opacity: 1;
}

.pwa-install-modal-logo-wrap {
    margin-bottom: 16px;
    padding: 48px 24px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.pwa-install-modal-logo {
    max-width: 80px;
    max-height: 80px;
    object-fit: contain;
    border-radius: 5px;
}

.pwa-install-modal-logo-placeholder {
    display: inline-block;
    font-size: 14px;
    color: #666;
}

.pwa-install-modal-title {
    margin: 0 0 10px 0;
    padding: 0 24px;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    box-sizing: border-box;
}

.pwa-install-modal-desc {
    margin: 0 0 20px 0;
    padding: 0 24px;
    font-size: 12px;
    line-height: 1.45;
    color: #666;
    box-sizing: border-box;
}

.pwa-install-modal-instruction-bg {
    width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
    background: rgba(242, 242, 242, 1);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

.pwa-install-modal-instruction-bg strong {
    font-weight: 700;
}

.pwa-install-modal-share-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0 2px;
}

.pwa-install-modal-share-icon {
    width: 22px;
    height: 22px;
    color: #007aff;
}

.pwa-install-modal-gotit {
    display: block;
    margin: 0 24px 24px 24px;
    width: calc(100% - 48px);
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #1e3c72;
    cursor: pointer;
    transition: background 0.2s ease;
    box-sizing: border-box;
}

.pwa-install-modal-gotit:hover,
.pwa-install-modal-gotit:active {
    background: #2a5298;
}

@media (display-mode: standalone) {
    .pwa-install-banner {
        display: none !important;
    }
}

/*
 * PWA bottom nav — layout contract
 * --------------------------------
 * 1) Include @_PwaBottomNav.cshtml once at the end of root Theme layouts only
 *    (Theme8, Theme8_Home, Theme8_OrderTracker, Shared/v2/_Layout).
 * 2) Document-flow content is cleared by body padding + in-flow spacer
 *    (covers footer / last content on almost every page).
 * 3) Fixed/sticky chrome that uses bottom:0 must dock above the nav via
 *    --pwa-bottom-nav-offset (shared class .pwa-dock-above OR known patterns below).
 * Do not re-include the partial in individual views.
 */
.pwa-bottom-nav,
.pwa-bottom-nav-spacer {
    display: none;
}

.pwa-bottom-nav-spacer {
    width: 100%;
    height: 0;
    pointer-events: none;
    visibility: hidden;
    flex-shrink: 0;
}

/*
 * Standalone-only (no viewport-width gate): body.pwa-bottom-nav-enabled is only ever added
 * by JS when isPwaStandalone() is true, so that alone is a sufficient condition. An earlier
 * "@media (max-width: 1024px)" gate stacked on top of it incorrectly hid the nav on wide
 * standalone viewports (e.g. iPad landscape, which commonly exceeds 1024px CSS width).
 */

/*
 * Layer A — document flow (all normal pages).
 * Body padding + spacer at end of <body> keep last content / footer readable.
 */
body.pwa-bottom-nav-enabled {
    --pwa-bottom-nav-offset: calc(74px + env(safe-area-inset-bottom, 0px));
    padding-bottom: var(--pwa-bottom-nav-offset) !important;
    box-sizing: border-box;
    scroll-padding-bottom: var(--pwa-bottom-nav-offset);
}

body.pwa-bottom-nav-enabled .pwa-bottom-nav-spacer {
    /* Spacer reserved for layouts that cannot rely on body padding alone.
       Height stays 0 while body padding is the primary clearance to avoid double gap. */
    display: block;
    visibility: hidden;
    height: 0;
}

body.pwa-bottom-nav-enabled .pwa-bottom-nav {
    display: flex;
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0 !important;
    width: 100%;
    max-width: 100vw;
    height: var(--pwa-bottom-nav-offset);
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: #ffffff;
    border-top: 1px solid #eeeeee;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.03);
    z-index: 1001;
    align-items: center;
    justify-content: space-around;
}

/* Mobile slide menu (z-index 0 in theme) must sit above fixed bottom nav when open. */
body.pwa-bottom-nav-enabled.open-menu #menu-mb {
    z-index: 1002;
}

body.pwa-bottom-nav-enabled .pwa-bottom-nav__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    gap: 2px;
    border: none;
    background: transparent;
    color: rgba(0, 0, 0, 0.38);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    padding: 4px 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

body.pwa-bottom-nav-enabled .pwa-bottom-nav__item.is-active {
    color: var(--pwa-nav-active, #c2ae83);
    font-weight: 600;
}

body.pwa-bottom-nav-enabled .pwa-bottom-nav__icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

/*
 * Layer B — fixed / sticky chrome (bottom: 0 ignores body padding).
 * Prefer adding class "pwa-dock-above" on new fixed footers.
 * Known Online Shop patterns listed so existing pages work without per-view CSS.
 */
body.pwa-bottom-nav-enabled .pwa-dock-above,
body.pwa-bottom-nav-enabled .fix-btn-bottom,
body.pwa-bottom-nav-enabled .homepage-cart-button-display,
body.pwa-bottom-nav-enabled .info-total-cart,
body.pwa-bottom-nav-enabled #info-total-cart.info-total-cart,
body.pwa-bottom-nav-enabled .payment-box-sticky.pay-sticky,
body.pwa-bottom-nav-enabled #delivery-pay-section.delivery-pay-sticky,
body.pwa-bottom-nav-enabled .fix-modal-footer,
body.pwa-bottom-nav-enabled .popup-full-mobi .fix-modal-footer,
body.pwa-bottom-nav-enabled .popup-full-mobi-v2 .fix-modal-footer,
body.pwa-bottom-nav-enabled .popup-datetime-mobi .fix-modal-footer,
body.pwa-bottom-nav-enabled .popup-datetime-mobi-v2 .fix-modal-footer,
body.pwa-bottom-nav-enabled .modal-product-detail .product-detail-footer,
body.pwa-bottom-nav-enabled .modal-footer.product-detail-footer.v2,
body.pwa-bottom-nav-enabled #productDetailModal .product-detail-footer,
body.pwa-bottom-nav-enabled.open-cart .cart-block {
    bottom: var(--pwa-bottom-nav-offset) !important;
}

body.pwa-bottom-nav-enabled .homepage-cart-button-display,
body.pwa-bottom-nav-enabled .info-total-cart,
body.pwa-bottom-nav-enabled #info-total-cart.info-total-cart,
body.pwa-bottom-nav-enabled .order-tracker-action.fix-btn-bottom {
    z-index: 999;
}

body.pwa-bottom-nav-enabled .homepage-cart-button-display {
    /* Disable animation that ends at bottom: 0 and would overlap the nav. */
    animation: none;
}

body.pwa-bottom-nav-enabled .fix-modal-footer,
body.pwa-bottom-nav-enabled .popup-full-mobi .fix-modal-footer,
body.pwa-bottom-nav-enabled .popup-full-mobi-v2 .fix-modal-footer,
body.pwa-bottom-nav-enabled .popup-datetime-mobi .fix-modal-footer,
body.pwa-bottom-nav-enabled .popup-datetime-mobi-v2 .fix-modal-footer,
body.pwa-bottom-nav-enabled .modal-product-detail .product-detail-footer,
body.pwa-bottom-nav-enabled .modal-footer.product-detail-footer.v2,
body.pwa-bottom-nav-enabled #productDetailModal .product-detail-footer {
    z-index: 1055;
}

body.pwa-bottom-nav-enabled #scroll-top {
    bottom: calc(var(--pwa-bottom-nav-offset) + 80px) !important;
}

/* Modal dialogs: keep bottom nav visible and content scrollable above it. */
body.pwa-bottom-nav-enabled.modal-open .popup-full-mobi .modal-dialog,
body.pwa-bottom-nav-enabled.modal-open .popup-full-mobi-v2 .modal-dialog,
body.pwa-bottom-nav-enabled.modal-open .popup-datetime-mobi .modal-dialog,
body.pwa-bottom-nav-enabled.modal-open .popup-datetime-mobi-v2 .modal-dialog,
body.pwa-bottom-nav-enabled.modal-open #productDetailModal .modal-dialog {
    padding-bottom: var(--pwa-bottom-nav-offset);
    box-sizing: border-box;
}

/*
 * Bottom-sheet modals (Group Order Delivery, etc.) use top:auto and sit on the
 * viewport bottom — lift the whole sheet above the fixed PWA nav.
 */
body.pwa-bottom-nav-enabled .modal.modal-god {
    bottom: var(--pwa-bottom-nav-offset);
}

body.pwa-bottom-nav-enabled .modal.modal-god .modal-footer {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/*
 * Homepage cart bar already occupies bottom chrome — keep body padding for
 * scroll content, and push footer above (cart height + nav).
 */
body.pwa-bottom-nav-enabled:has(.homepage-cart-button-display) footer#footer {
    margin-bottom: calc(66px + var(--pwa-bottom-nav-offset)) !important;
}

body.pwa-bottom-nav-enabled:has(.homepage-cart-button-display.home-group-order) footer#footer {
    margin-bottom: calc(120px + var(--pwa-bottom-nav-offset)) !important;
}

/*
 * MyCart sticky checkout already docks above nav — drop body padding to avoid
 * a large empty gap under the sticky bar.
 */
body.pwa-bottom-nav-enabled:has(#info-total-cart.info-total-cart) {
    padding-bottom: 0 !important;
}

body.pwa-bottom-nav-enabled:has(#info-total-cart.info-total-cart) #content-cart,
body.pwa-bottom-nav-enabled:has(#info-total-cart.info-total-cart) #box-content-cart {
    scroll-padding-bottom: calc(var(--pwa-bottom-nav-offset) + 16px);
}

body.pwa-bottom-nav-enabled:has(#info-total-cart) .alcoholic-policy-container {
    scroll-margin-bottom: calc(var(--pwa-bottom-nav-offset) + 16px);
    padding-bottom: 8px;
}

body.pwa-bottom-nav-enabled.page-1:has(#info-total-cart) footer#footer {
/*    margin-bottom: var(--pwa-bottom-nav-offset) !important;*/
}