/* RR_STOREFRONT_ALL_SCREENS_RESPONSIVE_FINAL_V1
   Global safety net for all active storefront themes and all public pages. */

html,
body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/*
|--------------------------------------------------------------------------
| RR_STOREFRONT_DYNAMIC_VIEWPORT_RESPONSIVE_AUTHORITY_V2
|--------------------------------------------------------------------------
| Late-loaded storefront safety rules for live browser resizing.
| Stops header/category/checkout/cart widgets from creating horizontal overflow.
*/
html body:not(.admin) {
    width: 100% !important;
    min-width: 0 !important;
}

html body:not(.admin) :is(
    .top-bar,
    .rr-central-header-topbar,
    .rr-central-storefront-header,
    .rr-central-header-shell,
    .rr-dynamic-category-nav,
    .rr-category-mega-nav,
    .checkout-page,
    .checkout-layout,
    .checkout-left,
    .checkout-summary,
    .rr-checkout-right,
    .storefront-footer
) {
    max-width: 100vw !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

html body:not(.admin) .rr-category-mega-nav {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

html body:not(.admin) .rr-category-mega-nav::-webkit-scrollbar,
html body:not(.admin) .rr-category-mega-nav > .rr-dynamic-category-nav-inner::-webkit-scrollbar,
html body:not(.admin) .rr-category-mega-nav > .container.nav-inner.rr-dynamic-category-nav-inner::-webkit-scrollbar {
    display: none !important;
}

html body:not(.admin) .rr-category-mega-nav > .rr-dynamic-category-nav-inner,
html body:not(.admin) .rr-category-mega-nav > .container.nav-inner.rr-dynamic-category-nav-inner {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(10px, 1.4vw, 22px) !important;
    overflow: visible !important;
}

html body:not(.admin) .rr-category-mega-nav .rr-nav-item {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

html body:not(.admin) .rr-category-mega-nav :is(.nav-link, .rr-nav-parent-link, .rr-nav-plain-link, .rr-nav-toggle) {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

@media (min-width: 641px) and (max-width: 1320px) {
    html body:not(.admin) .rr-central-storefront-header .rr-central-header-shell {
        width: 100% !important;
        padding-left: clamp(12px, 2vw, 24px) !important;
        padding-right: clamp(12px, 2vw, 24px) !important;
    }

    html body:not(.admin) .rr-central-storefront-header .rr-shared-header-actions {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    html body:not(.admin) .rr-central-storefront-header .rr-header-action {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html body:not(.admin) .rr-category-mega-nav > .rr-dynamic-category-nav-inner,
    html body:not(.admin) .rr-category-mega-nav > .container.nav-inner.rr-dynamic-category-nav-inner {
        justify-content: flex-start !important;
        padding-left: clamp(12px, 2vw, 24px) !important;
        padding-right: clamp(12px, 2vw, 24px) !important;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    html body:not(.admin) .rr-central-storefront-header .rr-shared-header-actions .rr-header-action-title,
    html body:not(.admin) .rr-central-storefront-header .rr-shared-header-actions .rr-header-action-subtitle {
        display: none !important;
    }

    html body:not(.admin) .rr-central-storefront-header .rr-shared-header-actions .rr-header-action {
        min-height: 62px !important;
        padding: 10px 8px !important;
    }
}

html body:not(.admin) *,
html body:not(.admin) *::before,
html body:not(.admin) *::after {
    box-sizing: border-box;
}

html body:not(.admin) img,
html body:not(.admin) video,
html body:not(.admin) canvas,
html body:not(.admin) svg {
    max-width: 100%;
}

html body:not(.admin) main,
html body:not(.admin) .main,
html body:not(.admin) .site-main,
html body:not(.admin) .page-content,
html body:not(.admin) .storefront-main,
html body:not(.admin) .container,
html body:not(.admin) .rr-container {
    max-width: 100%;
    min-width: 0;
}

html body:not(.admin) :is(input, select, textarea, button, .btn, .button) {
    max-width: 100%;
}

html body:not(.admin) :is(table) {
    max-width: 100%;
}

html body:not(.admin) :is(.table-responsive, .rr-table-responsive, .admin-table-wrap, .cart-table-wrap, .order-table-wrap, .invoice-table-wrap) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

html body:not(.admin) .rr-central-storefront-header {
    max-width: 100% !important;
}

html body:not(.admin) .rr-central-storefront-header :is(.container, .rr-container, .header-inner, .rr-header-inner, .rr-central-header-main, .rr-central-header-inner) {
    max-width: 100% !important;
    min-width: 0 !important;
}

html body:not(.admin) nav.rr-category-mega-nav,
html body:not(.admin) .category-strip {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

html body:not(.admin) nav.rr-category-mega-nav :is(a, button),
html body:not(.admin) .category-strip :is(a, button) {
    white-space: nowrap;
}

html body:not(.admin) :is(.all-products-page, .rr-wishlist-page, .cart-page, .checkout-page, .order-tracking-page, .rr-account-page, .rr-pd-page) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

html body:not(.admin) :is(.all-products-layout, .all-products-content, .all-products-grid, .rr-central-products-grid, .product-grid, .storefront-product-row) {
    max-width: 100%;
    min-width: 0;
}

html body:not(.admin) :is(.rr-central-product-card, .product-card, .storefront-product-card) {
    min-width: 0;
    max-width: 100%;
}

html body:not(.admin) :is(.rr-central-product-title, .product-title, .rr-pd-title, .rr-pd-short-desc, .rr-pd-meta-row, .rr-pd-brand, .rr-pd-meta) {
    overflow-wrap: anywhere;
}

html body:not(.admin) :is(.cart-actions, .checkout-actions, .rr-account-actions, .order-actions, .rr-form-actions) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 1180px) {
    html body:not(.admin) .rr-central-storefront-header :is(.rr-central-header-main, .rr-central-header-inner, .header-inner) {
        gap: 12px !important;
    }

    html body:not(.admin) .rr-shared-header-actions {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    html body:not(.admin) .all-products-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 18px !important;
    }

    html body:not(.admin) :is(.all-products-filter-card, .rr-products-filter-panel, .all-products-sidebar) {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 900px) {
    html body:not(.admin) .rr-shared-header-actions {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    html body:not(.admin) .rr-header-action {
        min-width: 0 !important;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    html body:not(.admin) .rr-header-action :is(strong, span, small) {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body:not(.admin) :is(.cart-grid, .checkout-grid, .rr-account-shell, .order-tracking-grid, .rr-wishlist-grid) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 640px) {
    html body:not(.admin) main,
    html body:not(.admin) .main,
    html body:not(.admin) .site-main,
    html body:not(.admin) .page-content,
    html body:not(.admin) .storefront-main {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    html body:not(.admin) .container,
    html body:not(.admin) .rr-container {
        width: 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html body:not(.admin) :is(.all-products-toolbar, .products-toolbar, .filter-toolbar, .cart-actions, .checkout-actions, .rr-account-actions, .order-actions, .rr-form-actions) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
    }

    html body:not(.admin) :is(.all-products-toolbar input, .all-products-toolbar select, .products-toolbar input, .products-toolbar select, .filter-toolbar input, .filter-toolbar select) {
        width: 100% !important;
    }

    html body:not(.admin) :is(.all-products-hero, .rr-wishlist-hero, .cart-hero, .checkout-hero, .order-tracking-hero, .rr-account-hero) {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 18px !important;
    }

    html body:not(.admin) :is(.all-products-hero, .rr-wishlist-hero, .cart-hero, .checkout-hero, .order-tracking-hero, .rr-account-hero) :is(h1, h2) {
        font-size: clamp(30px, 11vw, 44px) !important;
        line-height: 1.04 !important;
    }
}

/*
|--------------------------------------------------------------------------
| RR_STOREFRONT_DYNAMIC_VIEWPORT_LAST_WORD_V2
| Final responsive guard for live browser resizing.
|--------------------------------------------------------------------------
*/
html body:not(.admin) {
    overflow-x: hidden !important;
}

html body:not(.admin),
html body:not(.admin) *,
html body:not(.admin) *::before,
html body:not(.admin) *::after {
    box-sizing: border-box !important;
}

html body:not(.admin) :is(.container, .rr-container, .site-container, .storefront-container, .page-content, .storefront-main, main) {
    max-width: 100% !important;
    min-width: 0 !important;
}

html body:not(.admin) :is(img, video, iframe, svg) {
    max-width: 100% !important;
}

html body:not(.admin) .rr-central-storefront-header,
html body:not(.admin) .rr-central-storefront-header .rr-central-header-shell {
    width: 100% !important;
    max-width: 100vw !important;
    min-width: 0 !important;
}

html body:not(.admin) nav.rr-category-mega-nav {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

html body:not(.admin) nav.rr-category-mega-nav::-webkit-scrollbar,
html body:not(.admin) nav.rr-category-mega-nav > .rr-dynamic-category-nav-inner::-webkit-scrollbar,
html body:not(.admin) nav.rr-category-mega-nav > .container.nav-inner.rr-dynamic-category-nav-inner::-webkit-scrollbar {
    display: none !important;
}

html body:not(.admin) nav.rr-category-mega-nav > .rr-dynamic-category-nav-inner,
html body:not(.admin) nav.rr-category-mega-nav > .container.nav-inner.rr-dynamic-category-nav-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(10px, 1.35vw, 22px) !important;
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
}

html body:not(.admin) nav.rr-category-mega-nav .rr-nav-item {
    flex: 0 0 auto !important;
    min-width: 0 !important;
}

html body:not(.admin) nav.rr-category-mega-nav :is(.nav-link, .rr-nav-parent-link, .rr-nav-plain-link, .rr-nav-toggle) {
    white-space: nowrap !important;
}

@media (min-width: 641px) and (max-width: 1320px) {
    html body:not(.admin) nav.rr-category-mega-nav > .rr-dynamic-category-nav-inner,
    html body:not(.admin) nav.rr-category-mega-nav > .container.nav-inner.rr-dynamic-category-nav-inner {
        justify-content: flex-start !important;
        padding-right: clamp(12px, 2vw, 28px) !important;
        padding-left: clamp(12px, 2vw, 28px) !important;
    }
}

@media (min-width: 641px) and (max-width: 1180px) {
    html body:not(.admin) .rr-central-storefront-header .rr-central-header-shell {
        display: grid !important;
        grid-template-columns: minmax(120px, max-content) minmax(180px, 1fr) 52px !important;
        gap: 10px !important;
    }

    html body:not(.admin) .rr-shared-header-actions {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    html body:not(.admin) .rr-header-action {
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    html body:not(.admin) .rr-header-action :is(strong, span, small) {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

html body:not(.admin) .checkout-page,
html body:not(.admin) .checkout-page * {
    min-width: 0 !important;
}

html body:not(.admin) .checkout-layout.rr-checkout-modern {
    width: min(100%, 1360px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

@media (min-width: 1241px) {
    html body:not(.admin) .checkout-layout.rr-checkout-modern {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(300px, 420px) !important;
        gap: clamp(18px, 2vw, 28px) !important;
    }
}

@media (max-width: 1240px) {
    html body:not(.admin) .checkout-layout.rr-checkout-modern {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: min(100%, 900px) !important;
    }

    html body:not(.admin) .checkout-summary-column {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    html body:not(.admin):has(.checkout-page) .rr-mobile-floating-cart {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}