/*
| RR_MOBILE_SIMPLE_HEADER_FINAL
| Mobile header: menu left, logo centered, cart right. No floating compact clone.
*/

@media (max-width: 1180px) {
    html body:not(.admin) .rr-mobile-compact-scroll-header,
    html body:not(.admin).rr-mobile-compact-header-visible .rr-mobile-compact-scroll-header,
    html body:not(.admin).rr-mobile-nav-open .rr-mobile-compact-scroll-header,
    html body:not(.admin) [data-rr-mobile-compact-scroll-header] {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-120%) !important;
    }
}

@media (max-width: 760px) {
    html body:not(.admin) header.header.site-header.rr-central-storefront-header[data-rr-central-header="1"] {
        padding: 8px 0 !important;
    }

    html body:not(.admin) .rr-central-storefront-header .rr-central-header-shell,
    html body:not(.admin) .rr-central-storefront-header > .container.header-inner.rr-central-header-shell,
    html body:not(.admin) .rr-central-storefront-header .container.header-inner.rr-central-header-shell {
        min-height: 72px !important;
        grid-template-columns: 64px minmax(0, 1fr) 64px !important;
        padding: 0 14px !important;
    }

    html body:not(.admin) .rr-central-storefront-header .rr-central-header-brand .rr-storefront-brand,
    html body:not(.admin) .rr-central-storefront-header .rr-central-header-brand .brand-link,
    html body:not(.admin) .rr-central-storefront-header .rr-central-header-brand .logo {
        max-width: min(260px, calc(100vw - 160px)) !important;
    }

    html body:not(.admin) .rr-central-storefront-header .rr-storefront-brand-logo,
    html body:not(.admin) .rr-central-storefront-header .rr-central-header-brand img.rr-storefront-brand-logo {
        width: auto !important;
        min-width: 0 !important;
        max-width: min(184px, calc(100vw - 176px)) !important;
        height: auto !important;
        max-height: 58px !important;
        object-fit: contain !important;
    }

    html body:not(.admin) .rr-central-storefront-header .brand-link .rr-storefront-brand-text,
    html body:not(.admin) .rr-central-storefront-header .brand-text.rr-storefront-brand-text,
    html body:not(.admin) .rr-central-storefront-header .logo .rr-storefront-brand-text,
    html body:not(.admin) .rr-central-storefront-header .rr-storefront-brand-text {
        max-width: min(178px, calc(100vw - 204px)) !important;
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    html body:not(.admin) .rr-mobile-tablet-nav-toggle,
    html body:not(.admin) .rr-central-storefront-header .rr-mobile-tablet-nav-toggle,
    html body:not(.admin) .rr-mobile-header-cart-link,
    html body:not(.admin) .rr-central-storefront-header .rr-mobile-header-cart-link {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    html body:not(.admin) .rr-mobile-tablet-nav-toggle {
        gap: 6.5px !important;
    }

    html body:not(.admin) .rr-mobile-tablet-nav-toggle span {
        width: 29px !important;
        height: 2.2px !important;
        border-radius: 999px !important;
    }

    html body:not(.admin) .rr-mobile-header-cart-icon,
    html body:not(.admin) .rr-mobile-header-cart-icon svg {
        width: 34px !important;
        height: 34px !important;
    }

    html body:not(.admin) .rr-mobile-header-cart-icon svg {
        stroke-width: 1.5 !important;
    }

    html body:not(.admin) .rr-mobile-header-cart-badge {
        top: 3px !important;
        right: 0 !important;
        min-width: 22px !important;
        height: 22px !important;
        padding: 0 6px !important;
        font-size: 11px !important;
        font-weight: 750 !important;
    }
}

@media (max-width: 760px) {
    html body:not(.admin).rr-central-fixed-clean-v4b,
    html body:not(.admin).rr-fixed-storefront-header,
    html body:not(.admin).rr-fixed-storefront-header.rr-central-fixed-clean-v4b {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    html body:not(.admin) .rr-central-header-topbar,
    html body:not(.admin) .top-bar.rr-central-header-topbar {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        z-index: auto !important;
    }

    html body:not(.admin) header.header.site-header.rr-central-storefront-header[data-rr-central-header="1"],
    html body:not(.admin).rr-central-fixed-clean-v4b header.header.site-header.rr-central-storefront-header[data-rr-central-header="1"],
    html body:not(.admin).rr-fixed-storefront-header header.header.site-header.rr-central-storefront-header[data-rr-central-header="1"] {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 9px 0 !important;
        transform: none !important;
        translate: none !important;
        background: var(--rr-lc-nav-bg, var(--rr-central-header-native-bg, #ffffff)) !important;
        border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
        box-shadow: none !important;
        overflow: visible !important;
        z-index: 100 !important;
    }

    html body:not(.admin) .rr-central-storefront-header .rr-central-header-shell,
    html body:not(.admin) .rr-central-storefront-header > .container.header-inner.rr-central-header-shell,
    html body:not(.admin) .rr-central-storefront-header .container.header-inner.rr-central-header-shell,
    html body:not(.admin).rr-central-fixed-clean-v4b .rr-central-storefront-header .rr-central-header-shell,
    html body:not(.admin).rr-fixed-storefront-header .rr-central-storefront-header .rr-central-header-shell {
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 58px !important;
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) 58px !important;
        grid-template-areas: "toggle brand cart" !important;
        align-items: center !important;
        justify-items: center !important;
        gap: 0 !important;
        padding: 0 12px !important;
        margin: 0 !important;
        transform: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    html body:not(.admin) .rr-central-storefront-header .rr-central-header-brand {
        grid-area: brand !important;
        position: static !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        overflow: hidden !important;
    }

    html body:not(.admin) .rr-central-storefront-header .rr-central-header-brand .rr-storefront-brand,
    html body:not(.admin) .rr-central-storefront-header .rr-central-header-brand .brand-link,
    html body:not(.admin) .rr-central-storefront-header .rr-central-header-brand .logo {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        max-width: min(214px, calc(100vw - 152px)) !important;
        margin: 0 auto !important;
        text-decoration: none !important;
    }

    html body:not(.admin) .rr-central-storefront-header .rr-storefront-brand-logo {
        display: block !important;
        max-width: 44px !important;
        max-height: 44px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        flex: 0 0 auto !important;
    }

    html body:not(.admin) .rr-central-storefront-header .brand-link .rr-storefront-brand-text,
    html body:not(.admin) .rr-central-storefront-header .brand-text.rr-storefront-brand-text,
    html body:not(.admin) .rr-central-storefront-header .logo .rr-storefront-brand-text,
    html body:not(.admin) .rr-central-storefront-header .rr-storefront-brand-text {
        display: inline-block !important;
        max-width: min(160px, calc(100vw - 202px)) !important;
        color: inherit !important;
        font-size: 19px !important;
        font-weight: 750 !important;
        line-height: 1.05 !important;
        letter-spacing: -.02em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body:not(.admin) .rr-central-header-search,
    html body:not(.admin) .rr-header-search-form,
    html body:not(.admin) form.search-box.rr-central-header-search,
    html body:not(.admin) .rr-central-storefront-header .rr-central-header-search {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html body:not(.admin) .rr-central-header-shell > .rr-shared-header-actions,
    html body:not(.admin) .rr-shared-header-actions {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html body:not(.admin) .rr-mobile-tablet-nav-toggle,
    html body:not(.admin) .rr-central-storefront-header .rr-mobile-tablet-nav-toggle {
        grid-area: toggle !important;
        justify-self: start !important;
        position: static !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #1f2937 !important;
        box-shadow: none !important;
        gap: 6px !important;
        cursor: pointer !important;
        transform: none !important;
        z-index: 2 !important;
    }

    html body:not(.admin) .rr-mobile-tablet-nav-toggle span {
        display: block !important;
        width: 27px !important;
        height: 2.5px !important;
        margin: 0 !important;
        border-radius: 999px !important;
        background: currentColor !important;
    }

    html body:not(.admin) .rr-mobile-tablet-nav-toggle .fi.fi-rr-bars-staggered,
    html body:not(.admin) .rr-central-storefront-header .rr-mobile-tablet-nav-toggle .fi.fi-rr-bars-staggered {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        color: currentColor !important;
        font-size: 40px !important;
        line-height: 1 !important;
        font-weight: 400 !important;
    }

    html body:not(.admin) .rr-mobile-tablet-nav-toggle .fi.fi-rr-bars-staggered::before,
    html body:not(.admin) .rr-central-storefront-header .rr-mobile-tablet-nav-toggle .fi.fi-rr-bars-staggered::before {
        display: block !important;
        line-height: 1 !important;
    }

    html body:not(.admin) .rr-mobile-header-cart-link,
    html body:not(.admin) .rr-central-storefront-header .rr-mobile-header-cart-link {
        grid-area: cart !important;
        justify-self: end !important;
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #1f2937 !important;
        text-decoration: none !important;
        box-shadow: none !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        transform: none !important;
        z-index: 2 !important;
    }

    html body:not(.admin) .rr-mobile-header-cart-icon,
    html body:not(.admin) .rr-mobile-header-cart-icon svg {
        display: block !important;
        width: 33px !important;
        height: 33px !important;
    }

    html body:not(.admin) .rr-mobile-header-cart-icon svg {
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.65 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    html body:not(.admin) .rr-mobile-header-cart-badge {
        position: absolute !important;
        top: 4px !important;
        right: 1px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 22px !important;
        height: 22px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        background: var(--rr-lc-primary, var(--product-action-hover-color, var(--products-accent, #f97316))) !important;
        color: var(--rr-lc-highlight-text, #ffffff) !important;
        border: 2px solid var(--rr-lc-nav-bg, #ffffff) !important;
        box-shadow: 0 6px 14px rgba(15, 23, 42, .16) !important;
        font-size: 11px !important;
        font-weight: 750 !important;
        line-height: 1 !important;
    }

    html body:not(.admin) .rr-mobile-header-cart-badge[hidden] {
        display: none !important;
    }

    html body:not(.admin) .rr-mobile-bottom-nav-label {
        font-weight: 700 !important;
        letter-spacing: .035em !important;
    }
}

/*
| RR_MOBILE_MENU_STAGGERED_ICON_SIZE_FINAL_V2
| Final authority for Flaticon menu icon size.
*/
@media (max-width: 1180px) {
    html body:not(.admin) .rr-central-storefront-header .rr-mobile-tablet-nav-toggle,
    html body:not(.admin) .rr-mobile-tablet-nav-toggle {
        width: 68px !important;
        height: 68px !important;
        min-width: 68px !important;
        min-height: 68px !important;
        font-size: 56px !important;
        line-height: 1 !important;
    }

    html body:not(.admin) .rr-central-storefront-header .rr-mobile-tablet-nav-toggle > i.fi.fi-rr-bars-staggered,
    html body:not(.admin) .rr-mobile-tablet-nav-toggle > i.fi.fi-rr-bars-staggered,
    html body:not(.admin) .rr-central-storefront-header .rr-mobile-tablet-nav-toggle > i.fi.fi-rr-bars-staggered::before,
    html body:not(.admin) .rr-mobile-tablet-nav-toggle > i.fi.fi-rr-bars-staggered::before {
        width: 46px !important;
        height: 46px !important;
        font-size: 46px !important;
        line-height: 46px !important;
    }
}

/*
| RR_MOBILE_MENU_STAGGERED_ICON_DRAWN_FINAL_V3
| The UIcons glyph has a small internal drawing box, so draw the staggered
| menu shape on the requested fi element itself.
*/
@media (max-width: 1180px) {
    html body:not(.admin) .rr-central-storefront-header .rr-mobile-tablet-nav-toggle > i.fi.fi-rr-bars-staggered,
    html body:not(.admin) .rr-mobile-tablet-nav-toggle > i.fi.fi-rr-bars-staggered {
        position: relative !important;
        display: block !important;
        width: 58px !important;
        height: 46px !important;
        min-width: 58px !important;
        min-height: 46px !important;
        font-size: 0 !important;
        line-height: 0 !important;
        overflow: visible !important;
        color: #1f2937 !important;
    }

    html body:not(.admin) .rr-central-storefront-header .rr-mobile-tablet-nav-toggle > i.fi.fi-rr-bars-staggered::before,
    html body:not(.admin) .rr-mobile-tablet-nav-toggle > i.fi.fi-rr-bars-staggered::before {
        content: "" !important;
        display: none !important;
    }

    html body:not(.admin) .rr-central-storefront-header .rr-mobile-tablet-nav-toggle > i.fi.fi-rr-bars-staggered::after,
    html body:not(.admin) .rr-mobile-tablet-nav-toggle > i.fi.fi-rr-bars-staggered::after {
        content: "" !important;
        position: absolute !important;
        left: 3px !important;
        top: 6px !important;
        width: 44px !important;
        height: 5px !important;
        border-radius: 999px !important;
        background: currentColor !important;
        box-shadow:
            11px 15px 0 currentColor,
            0 30px 0 currentColor !important;
    }
}