/* =============================================================================
   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) {
    .sf-bottom-nav {
        box-sizing: border-box;
        position: fixed;
        left: var(--sf-mobile-action-x, 10px);
        right: var(--sf-mobile-action-x, 10px);
        bottom: calc(var(--sf-bottom-nav-offset, 8px) + env(safe-area-inset-bottom));
        z-index: 95;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        height: var(--sf-bottom-nav-height, 62px);
        min-height: 0;
        padding: 6px 7px;
        border: 1px solid rgba(254, 189, 4, .2);
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(24, 24, 28, .98), rgba(8, 8, 10, .98));
        box-shadow: 0 -10px 26px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
    }

    .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: #15110a;
        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: #15151a;
        font-size: 10px;
        font-weight: 900;
        line-height: 1;
    }
}