/* =============================================================================
   Mobile bottom navigation — shared by the storefront layout and the standalone
   post-order pages (thank-you, tracking), so the nav looks identical everywhere.
   Self-contained: every var() carries a fallback because the standalone pages
   don't load storefront.css.
   ========================================================================== */
.sf-bottom-nav { display: none; }

@media (max-width: 767px) {
    body.sf-has-bottom-nav {
        --sf-bottom-nav-rendered-height: calc(var(--sf-bottom-nav-height, 64px) + env(safe-area-inset-bottom));
        --sf-bottom-nav-content-gap: 12px;
        padding-bottom: calc(var(--sf-bottom-nav-rendered-height) + var(--sf-bottom-nav-content-gap));
    }

    /* The full storefront footer supplies this clearance inside its final bar.
       Standalone post-order pages have no footer, so they retain the body rule. */
    body.sf.sf-has-bottom-nav { padding-bottom: 0; }

    .sf-bottom-nav {
        box-sizing: border-box;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 95;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        width: auto;
        height: var(--sf-bottom-nav-rendered-height);
        min-height: 0;
        margin: 0;
        padding: 6px var(--sf-gutter, 16px);
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        background: var(--sf-black, #000000);
        box-shadow: none;
    }

    .sf-bottom-nav__item {
        box-sizing: border-box;
        display: inline-flex;
        min-width: 0;
        min-height: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2px;
        border-radius: 10px;
        color: rgba(255, 255, 255, .74);
        font-size: 10px;
        font-weight: 800;
        line-height: 1.1;
        text-decoration: none;
    }

    .sf-bottom-nav__item.is-active {
        background: linear-gradient(135deg, var(--sf-gold, #febd04), var(--sf-gold-soft, #ffd34d));
        color: var(--sf-black, #000000);
        box-shadow: 0 5px 14px rgba(254, 189, 4, .22);
    }

    .sf-bottom-nav__icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        font-size: 15px;
        line-height: 1;
    }

    .sf-bottom-nav__count {
        position: absolute;
        top: -8px;
        right: -11px;
        display: inline-flex;
        min-width: 16px;
        height: 16px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: var(--sf-gold, #febd04);
        color: var(--sf-black, #000000);
        font-size: 10px;
        font-weight: 900;
        line-height: 1;
    }
}