/* TL_MOBILE_NAV_IPHONE_V1: iOS bottom tab bar (خانه، دسته‌بندی‌ها، سبد خرید، حساب من), light/dark.
   Loaded by the storefront layout and the customer-account layout, so the bar looks the same on every page.
   Kept in the tl-storefront-iphone layer, which is declared first, so these rules win over older nav styles. */
@layer tl-storefront-iphone {
@media (max-width: 840px) {
    html:root body nav.mobile-bottom-nav.tl-mobile-nav {
        --tb-bar: rgba(255,255,255,.92);
        --tb-ink: #8e8e93;
        --tb-active: #007aff;
        --tb-line: rgba(60,60,67,.18);
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        align-items: start !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
        border: 0 !important;
        border-top: 1px solid var(--tb-line) !important;
        border-radius: 0 !important;
        background: var(--tb-bar) !important;
        background-image: none !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
        backdrop-filter: saturate(180%) blur(20px) !important;
    }
    html[data-theme="dark"] body nav.mobile-bottom-nav.tl-mobile-nav {
        --tb-bar: rgba(22,22,24,.92);
        --tb-ink: #98989d;
        --tb-active: #0a84ff;
        --tb-line: rgba(84,84,88,.6);
    }
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .tl-mobile-nav__item {
        display: grid !important;
        justify-items: center !important;
        gap: 2px !important;
        min-height: 50px !important;
        padding: 4px 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--tb-ink) !important;
        text-decoration: none !important;
    }
    html:root body nav.mobile-bottom-nav.tl-mobile-nav::before,
    html:root body nav.mobile-bottom-nav.tl-mobile-nav::after,
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .tl-mobile-nav__item::before,
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .tl-mobile-nav__item::after,
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .tl-mobile-nav__icon::before,
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .tl-mobile-nav__icon::after {
        display: none !important;
    }
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .tl-mobile-nav__item.is-active {
        color: var(--tb-active) !important;
    }
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .tl-mobile-nav__icon {
        position: relative !important;
        width: 28px !important;
        height: 28px !important;
        min-width: 0 !important;
        display: grid !important;
        place-items: center !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: inherit !important;
        transform: none !important;
    }
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .tl-mobile-nav__icon svg {
        width: 25px !important;
        height: 25px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.7 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .tl-mobile-nav__icon svg * {
        fill: none !important;
        stroke: currentColor !important;
    }
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .tl-mobile-nav__item.is-active .tl-mobile-nav__icon svg {
        stroke-width: 2.1 !important;
    }
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .tl-mobile-nav__label {
        color: inherit !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
    }
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .tl-mobile-nav__item.is-active .tl-mobile-nav__label {
        font-weight: 800 !important;
    }
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .cart-count {
        position: absolute !important;
        top: -4px !important;
        left: -8px !important;
        right: auto !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 4px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: #ff3b30 !important;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        font-size: 10.5px !important;
        font-weight: 800 !important;
        line-height: 18px !important;
        text-align: center !important;
        box-shadow: 0 0 0 2px var(--tb-bar) !important;
    }
    html:root body nav.mobile-bottom-nav.tl-mobile-nav .cart-count[data-count-zero] {
        display: none !important;
    }

}
}