@import url("/image-placeholders.css?v=3");

/* Canonical mobile bottom navigation, matching index.html */
.pg-mobile-footer-spacer {
    display: none;
}

@media (max-width: 600px) {
    /*
     * The footer spacer is inserted as a sibling after the footer by
     * mobile-nav.js. Its inline height is measured from the rendered fixed
     * controls; these values are only the first-paint fallback.
     */
    body:has(> .site-footer) {
        --pg-mobile-nav-height: calc(40px + 12px);
        padding-bottom: 0 !important;
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    body:has(> .site-footer) > .site-footer {
        margin-top: auto !important;
    }

    body:has(> .site-footer) > .pg-mobile-footer-spacer {
        display: block;
        width: 100%;
        height: calc(var(--pg-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
        flex: 0 0 auto;
        pointer-events: none;
    }

    /* Product pages add the measured Buy Now layer above the nav. */
    body:has(> .site-footer):has(> #mobileBuyBtn) > .pg-mobile-footer-spacer {
        height: calc(var(--pg-mobile-nav-height) + 44px + env(safe-area-inset-bottom, 0px));
    }

    #navRightMobile.nav-right {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        z-index: 150 !important;
        background: #1D2025 !important;
        border: none !important;
        outline: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 6px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        gap: 2px !important;
        visibility: visible !important;
        width: 100% !important;
        max-width: none !important;
        pointer-events: all !important;
        overflow: visible !important;
        margin: 0 !important;
        min-width: unset !important;
        flex-shrink: 0 !important;
        flex: none !important;
    }

    #navRightMobile.nav-right::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: env(safe-area-inset-bottom, 0px);
        background: #1D2025;
        pointer-events: none;
    }

    body.pg-keyboard-input-active #navRightMobile,
    body.pg-keyboard-input-active #mobileBuyBtn {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #navRightMobile .nav-btn {
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        gap: 0 !important;
    }

    #navRightMobile .nav-btn-label {
        display: none !important;
    }

    #navRightMobile .nav-btn svg,
    #navRightMobile .icon-wrap svg {
        width: 22px !important;
        height: 22px !important;
        display: block;
    }

    #navRightMobile #mobileHomeBtn svg,
    #navRightMobile #mobileSupportBtn svg,
    #navRightMobile #avatarBtnMobile svg,
    #navRightMobile #loginBtnMobile svg {
        width: 28px !important;
        height: 28px !important;
    }

    #navRightMobile .icon-wrap {
        width: 22px !important;
        height: 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #navRightMobile .login-btn {
        min-width: 40px !important;
        padding: 0 !important;
    }

    #navRightMobile #ordersBtn {
        display: none !important;
    }

    #navRightMobile .mobile-only-btn {
        display: flex !important;
    }

    #navRightMobile .support-fab {
        display: none !important;
    }

}

@media (max-width: 360px) {
    body:has(> .site-footer) {
        --pg-mobile-nav-height: calc(36px + 8px);
    }

    #navRightMobile.nav-right {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: none !important;
        border-radius: 0 !important;
        padding: 4px 6px !important;
    }

    #navRightMobile .nav-btn {
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
    }

    #navRightMobile .nav-btn svg,
    #navRightMobile .icon-wrap svg {
        width: 18px !important;
        height: 18px !important;
    }

    #navRightMobile #mobileHomeBtn svg,
    #navRightMobile #mobileSupportBtn svg,
    #navRightMobile #avatarBtnMobile svg,
    #navRightMobile #loginBtnMobile svg {
        width: 24px !important;
        height: 24px !important;
    }

    #navRightMobile .icon-wrap {
        width: 18px !important;
        height: 18px !important;
    }
}