:root {
    --mehr-bg: #f6f4ef;
    --mehr-paper: #fbfaf7;
    --mehr-text: #24211e;
    --mehr-muted: #756f68;
    --mehr-line: #dedad2;
    --mehr-ease: cubic-bezier(.76,0,.24,1);
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    padding: 0
}

body {
    font-family: "Vazirmatn",Tahoma,Arial,sans-serif;
    color: var(--mehr-text);
    background: #fff;
    overflow-x: hidden
}

a {
    color: inherit
}

.skip-link {
    z-index: 3000
}

/* Header */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 800;
    color: #fff;
    transition: color .25s ease
}

.accessibility-bar {
    height: 31px;
    background: #f5f5f3;
    border-bottom: 1px solid #ddd;
    color: #111;
    font-size: 11px;
    transition: height .25s ease,opacity .25s ease
}

    .accessibility-bar a {
        text-decoration: none
    }

.header-surface {
    position: relative;
    background: transparent;
    transition: background .25s ease,color .25s ease,box-shadow .25s ease
}

.brand-row {
    height: 62px;
    transition: height .25s ease
}

.brand-link {
    display: block;
    text-decoration: none
}

.brand-logo {
    width: 150px;
    max-height: 46px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: opacity .25s ease,filter .25s ease,transform .25s ease
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 15px;
    text-decoration: none
}

    .icon-button:hover {
        opacity: .65;
        color: inherit
    }

.desktop-nav {
    border-top: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid rgba(255,255,255,.16)
}

    .desktop-nav .nav-link {
        position: relative;
        color: inherit;
        font-size: 12px;
        font-weight: 500;
        padding: 15px 0 13px;
        white-space: nowrap
    }

        .desktop-nav .nav-link:after {
            content: "";
            position: absolute;
            right: 0;
            left: 0;
            bottom: 8px;
            height: 1px;
            background: currentColor;
            transform: scaleX(0);
            transition: transform .25s ease
        }

        .desktop-nav .nav-link:hover:after, .desktop-nav .nav-link.active:after {
            transform: scaleX(1)
        }

.promo-strip {
    min-height: 44px;
    border-bottom: 1px solid rgba(255,255,255,.18);
    font-size: 12px
}

    .promo-strip a {
        text-decoration: none;
        border-bottom: 1px solid currentColor
    }

.promo-arrow {
    color: inherit !important;
    font-size: 13px
}

.site-header.is-scrolled {
    color: var(--mehr-text)
}

    .site-header.is-scrolled .accessibility-bar {
        height: 0;
        opacity: 0;
        overflow: hidden
    }

    .site-header.is-scrolled .header-surface {
        background: rgba(250,249,246,.99);
        color: var(--mehr-text);
        box-shadow: 0 1px 0 rgba(20,18,16,.12)
    }

    .site-header.is-scrolled .brand-row {
        height: 46px
    }

    .site-header.is-scrolled .brand-logo {
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none
    }

    .site-header.is-scrolled .desktop-nav {
        position: absolute;
        inset: 0 120px auto;
        height: 46px;
        border: 0;
        z-index: 2
    }

        .site-header.is-scrolled .desktop-nav .nav {
            height: 46px;
            align-items: center
        }

        .site-header.is-scrolled .desktop-nav .nav-link {
            padding: 13px 0;
            font-size: 11px
        }

    .site-header.is-scrolled .promo-strip {
        display: none !important
    }

/* Offcanvas */
#mobileMenu {
    --bs-offcanvas-width: min(88vw,390px)
}

.mobile-brand img {
    width: 110px;
    height: auto
}

.mobile-links .list-group-item {
    padding: 17px 22px;
    border-color: #ece9e3;
    font-weight: 500
}

/* ============================================================
   Full-page landing slider styles moved to landing-slider.css.
   Normal pages such as Contact/About keep native browser scrolling.
   ============================================================ */

/* Footer */
.footer-slide {
    color: #151515
}

.newsletter-block {
    width: min(480px,100%)
}

    .newsletter-block h2 {
        font-size: 20px;
        margin-bottom: 18px
    }

.newsletter-form {
    min-height: 54px
}

    .newsletter-form .form-control {
        border-color: #242424;
        box-shadow: none;
        font-size: 14px
    }

    .newsletter-form .btn {
        font-size: 13px
    }

.footer-columns h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 18px
}

.footer-links, .footer-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    line-height: 1.75
}

    .footer-links a, .footer-info a {
        text-decoration: none;
        width: max-content;
        max-width: 100%
    }

        .footer-links a:hover, .footer-info a:hover {
            opacity: .6
        }

    .footer-info p {
        margin: 0
    }

.footer-bottom {
    font-size: 12px;
    color: #6d6862
}

    .footer-bottom a {
        text-decoration: none
    }

.floating-store, .floating-contact {
    position: fixed;
    bottom: 18px;
    z-index: 600;
    text-decoration: none;
    box-shadow: 0 7px 24px rgba(0,0,0,.14)
}

.floating-store {
    right: 20px;
    background: rgba(35,35,35,.9);
    color: #fff;
    border-radius: 11px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px
}

.floating-contact {
    left: 18px;
    width: 50px;
    height: 44px;
    border-radius: 11px;
    background: #fff;
    color: #222;
    display: grid;
    place-items: center;
    border: 1px solid #ddd;
    font-size: 19px
}


@media (max-width:991.98px) {
    .site-header {
        color: #fff
    }

    .brand-row {
        height: 58px
    }

    .brand-logo {
        width: 110px;
        max-height: 38px
    }

    .site-header.is-scrolled .header-surface {
        background: rgba(250,249,246,.98);
        color: var(--mehr-text)
    }

    .site-header.is-scrolled .brand-logo {
        opacity: 1;
        filter: none;
        transform: none
    }

    .categories-slide .row {
        max-height: 78dvh
    }

    .footer-slide > .container-fluid {
        overflow: auto
    }
}

@media (max-width:767.98px) {

    .floating-store span {
        display: none
    }

    .floating-store {
        width: 46px;
        height: 44px;
        padding: 0;
        justify-content: center
    }
}

@media (prefers-reduced-motion:reduce) {
    *, *:before, *:after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important
    }
}

/* ============================================================
   Mobile storefront refinement — reference-style stacked header
   ============================================================ */
@media (max-width:767.98px) {
    :root {
        --mobile-brand-row: 80px;
        --mobile-promo-row: 55px;
        --mobile-header-total: 135px;
    }

    body {
        background: #fff
    }

    /* White two-row mobile header, matching the supplied reference layout. */
    .site-header,
    .site-header.is-scrolled {
        color: var(--mehr-text);
        background: #fff;
    }

        .site-header .header-surface,
        .site-header.is-scrolled .header-surface {
            background: #fff;
            color: var(--mehr-text);
            box-shadow: none;
        }

        .site-header .accessibility-bar {
            display: none !important
        }

        .brand-row,
        .site-header.is-scrolled .brand-row {
            height: var(--mobile-brand-row);
        }

    .brand-link {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }

    .brand-logo,
    .site-header.is-scrolled .brand-logo {
        width: 128px;
        max-width: 34vw;
        height: 54px;
        max-height: 54px;
        object-fit: contain;
        opacity: 1;
        visibility: visible;
        filter: none;
        transform: none;
    }

    /* On RTL mobile: menu remains at the left like the visual reference,
     search + bag sit on the right. */
    .brand-row > button[data-bs-target="#mobileMenu"] {
        left: 0 !important;
        right: auto !important;
        width: 44px;
        height: 44px;
        padding: 0;
        font-size: 23px;
        color: var(--mehr-text);
    }

    .header-tools-start {
        right: 0 !important;
        left: auto !important;
        gap: 4px !important;
        z-index: 2;
    }

        .header-tools-start .icon-button {
            width: 38px;
            height: 44px;
            font-size: 18px;
        }

    .header-tools-end {
        display: none !important
    }

    .promo-strip,
    .site-header.is-scrolled .promo-strip {
        display: flex !important;
        height: var(--mobile-promo-row);
        min-height: var(--mobile-promo-row);
        padding: 0 14px;
        gap: 10px !important;
        background: #fff;
        color: #2e2a26;
        border-top: 1px solid #e9e6e0;
        border-bottom: 1px solid #ddd9d2;
        font-size: 11px;
        line-height: 1.35;
        overflow: hidden;
    }

        .promo-strip > span {
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .promo-strip > a {
            flex: 0 0 auto;
            white-space: nowrap;
        }

        .promo-strip .promo-arrow {
            flex: 0 0 auto;
            width: 18px;
            height: 30px;
            display: grid;
            place-items: center;
            font-size: 14px;
        }

    /* Hero media begins under the fixed mobile header instead of underneath it. */
    .hero-slide {
        min-height: 100svh !important;
        padding-top: var(--mobile-header-total);
        background: #171717;
    }

        .hero-slide .slide-media,
        .hero-slide .slide-overlay {
            top: var(--mobile-header-total);
            height: calc(100% - var(--mobile-header-total));
        }

        .hero-slide > .container-fluid {
            min-height: calc(100svh - var(--mobile-header-total));
            height: calc(100svh - var(--mobile-header-total)) !important;
            padding-top: 0 !important;
            padding-bottom: 0 !important;
            align-items: center !important;
            justify-content: center !important;
        }

    .hero-copy {
        width: min(94%,430px);
        margin: 0 !important;
        padding: 28px 16px 0;
    }

        .hero-copy h1 {
            font-size: 30px;
            line-height: 1.35;
            font-weight: 500;
        }

        .hero-copy p {
            margin-top: 12px;
            font-size: 14px;
            line-height: 1.8;
        }

        .hero-copy .d-flex {
            margin-top: 28px !important;
            flex-direction: column;
            align-items: center;
            gap: 25px !important;
        }

        .hero-copy .text-cta {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0;
            padding-bottom: 6px;
        }

    /* Every following mobile section clears the same fixed header. */
    .arrivals-slide,
    .categories-slide,
    .search-slide,
    .footer-slide {
        padding-top: var(--mobile-header-total) !important;
    }

    .campaign-slide,
    .story-slide {
        padding-top: var(--mobile-header-total) !important;
    }

        .campaign-slide .slide-media,
        .campaign-slide .slide-overlay,
        .story-slide .slide-media,
        .story-slide .slide-overlay {
            top: var(--mobile-header-total);
            height: calc(100% - var(--mobile-header-total));
        }

        .campaign-slide > .container-fluid,
        .story-slide > .container-fluid {
            min-height: calc(100svh - var(--mobile-header-total));
            height: calc(100svh - var(--mobile-header-total)) !important;
        }

    .arrivals-slide {
        min-height: 100svh !important;
    }

        .arrivals-slide > .container-fluid {
            height: calc(100svh - var(--mobile-header-total)) !important;
            min-height: calc(100svh - var(--mobile-header-total));
        }

        .arrivals-slide .h-50 {
            height: 50% !important;
        }

    .editorial-title {
        bottom: 22px;
        font-size: 22px;
        font-weight: 500;
    }

    .campaign-slide,
    .story-slide {
        min-height: 100svh !important;
    }

        .campaign-slide .text-cta {
            margin-bottom: 28px !important;
            font-size: 13px;
        }

    .story-copy {
        padding: 0 22px !important;
    }

        .story-copy h2 {
            font-size: 27px;
            line-height: 1.45;
        }

        .story-copy p {
            font-size: 14px;
            line-height: 1.9;
        }

    .categories-slide {
        min-height: 100svh !important;
        padding-bottom: 24px !important;
    }

        .categories-slide .container-fluid {
            min-height: calc(100svh - var(--mobile-header-total));
            height: auto !important;
            padding-top: 26px !important;
        }

        .categories-slide .row {
            max-height: none;
        }

    .category-media {
        height: 27svh;
    }

    .category-card h3 {
        margin-top: 9px;
        font-size: 13px;
    }

    .search-slide {
        min-height: 100svh !important;
    }

        .search-slide .container {
            min-height: calc(100svh - var(--mobile-header-total));
        }

    .search-block {
        padding: 26px 18px;
    }

        .search-block h2 {
            font-size: 20px
        }

        .search-block p {
            font-size: 14px;
            line-height: 1.9;
        }

    .search-form .form-control {
        font-size: 14px
    }

    .footer-slide {
        min-height: auto !important;
    }

        .footer-slide > .container-fluid {
            min-height: auto !important;
            height: auto !important;
            padding: 30px 20px 80px !important;
        }

    /* Full-screen mobile menu. */
    #mobileMenu {
        --bs-offcanvas-width: 100vw;
        max-width: 100vw;
    }

        #mobileMenu .offcanvas-header {
            min-height: 76px;
            padding: 12px 18px;
        }

    .mobile-brand img {
        width: 120px;
        max-height: 50px;
        object-fit: contain;
    }

    .mobile-links .list-group-item {
        padding: 18px 22px;
        font-size: 15px;
    }

    .floating-store,
    .floating-contact {
        bottom: 12px;
    }

    .floating-store {
        right: 12px
    }

    .floating-contact {
        left: 12px
    }
}

@media (max-width:389.98px) {
    :root {
        --mobile-brand-row: 74px;
        --mobile-promo-row: 52px;
        --mobile-header-total: 126px;
    }

    .brand-logo,
    .site-header.is-scrolled .brand-logo {
        width: 112px;
        height: 48px
    }

    .header-tools-start .icon-button {
        width: 34px
    }

    .promo-strip {
        font-size: 10px;
        padding-inline: 10px
    }

    .hero-copy h1 {
        font-size: 27px
    }

    .hero-copy p {
        font-size: 13px
    }
}

/* ============================================================
   Mobile footer — compact accordion/newsletter/social layout
   ============================================================ */
@media (max-width:767.98px) {
    .footer-slide {
        padding-top: var(--mobile-header-total) !important;
        background: #fff !important;
        color: #171717;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /*   -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;*/
    }

    .mobile-footer {
        width: 100%;
        min-height: calc(100svh - var(--mobile-header-total));
        padding: 0 0 62px;
        background: #fff;
        text-align: right;
    }

    .mobile-footer-accordion {
        border-top: 1px solid #e5e5e5;
    }

    .mobile-footer-item {
        border-bottom: 1px solid #e7e7e7;
    }

    .mobile-footer-toggle {
        width: 100%;
        min-height: 60px;
        padding: 0 14px;
        border: 0;
        background: #fff;
        color: #111;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: right;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
    }

    .mobile-footer-sign {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        display: grid;
        place-items: center;
        font-family: Arial,sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
    }

        .mobile-footer-sign:before {
            content: "+"
        }

    .mobile-footer-toggle[aria-expanded="true"] .mobile-footer-sign:before {
        content: "−"
    }

    .mobile-footer-links,
    .mobile-footer-info {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0 14px 18px;
    }

        .mobile-footer-links a,
        .mobile-footer-info a {
            color: #56514b;
            text-decoration: none;
            font-size: 13px;
            line-height: 1.5;
            padding: 7px 0;
            width: max-content;
            max-width: 100%;
        }

    .mobile-newsletter {
        padding: 26px 14px 27px;
        border-bottom: 1px solid #ececec;
    }

        .mobile-newsletter h2 {
            margin: 0 0 17px;
            font-size: 15px;
            font-weight: 600;
        }

        .mobile-newsletter form {
            margin: 0
        }

        .mobile-newsletter input {
            width: 100%;
            height: 43px;
            border: 1px solid #6f6f6f;
            border-radius: 0;
            background: #fff;
            color: #222;
            padding: 0 12px;
            outline: 0;
            font-family: inherit;
            font-size: 12px;
            text-align: right;
        }

            .mobile-newsletter input:focus {
                border-color: #222;
                box-shadow: 0 0 0 1px #222 inset;
            }

        .mobile-newsletter button {
            width: 100%;
            height: 40px;
            margin-top: 14px;
            border: 1px solid #292929;
            border-radius: 0;
            background: #292929;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-family: inherit;
            font-size: 11px;
            font-weight: 600;
        }

    .mobile-newsletter-message {
        min-height: 18px;
        margin-top: 7px;
        font-size: 11px;
    }

    .mobile-social {
        padding: 21px 14px 18px;
        text-align: center;
    }

        .mobile-social h2 {
            margin: 0 0 12px;
            color: #111;
            font-size: 14px;
            font-weight: 700;
        }

    .mobile-social-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        flex-wrap: nowrap;
    }

        .mobile-social-icons a {
            color: #292929;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 28px;
            font-size: 24px;
            line-height: 1;
            transition: opacity .2s ease;
        }

            .mobile-social-icons a:hover {
                opacity: .62
            }

    .mobile-footer-legal {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;
        padding: 0 14px 10px;
        color: #6c675f;
        font-size: 10px;
        line-height: 1.6;
        text-align: center;
    }

    /* Floating helpers must not cover the copyright line. */
    .footer-slide .floating-store,
    .footer-slide .floating-contact {
        display: none
    }
}

@media (max-width:389.98px) {
    .mobile-footer-toggle {
        min-height: 58px;
        font-size: 14px
    }

    .mobile-newsletter {
        padding-inline: 13px
    }

    .mobile-social-icons {
        gap: 10px
    }

        .mobile-social-icons a {
            font-size: 22px;
            width: 22px
        }
}

/* ============================================================
   Mobile navigation — nested full-screen category levels
   ============================================================ */
@media (max-width:991.98px) {
    #mobileMenu.mobile-menu-offcanvas {
        --bs-offcanvas-width: 100vw;
        width: 100vw;
        max-width: 100vw;
        border: 0;
        background: #fff;
        color: #171717;
    }

    #mobileMenu .mobile-menu-header {
        position: relative;
        height: 76px;
        min-height: 76px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;
        background: #fff;
        z-index: 5;
    }

    .mobile-menu-close {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 42px;
        height: 42px;
        border: 0;
        background: transparent;
        color: #27231f;
        display: grid;
        place-items: center;
        font-size: 18px;
        padding: 0;
    }

    .mobile-menu-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 132px;
        height: 60px;
    }

        .mobile-menu-brand img {
            width: 118px;
            max-width: 100%;
            max-height: 52px;
            object-fit: contain;
            display: block;
        }

    .mobile-menu-actions {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 2px;
    }

        .mobile-menu-actions a {
            width: 38px;
            height: 42px;
            display: grid;
            place-items: center;
            color: #27231f;
            text-decoration: none;
            font-size: 18px;
        }

    #mobileMenu .mobile-menu-body {
        position: relative;
        height: calc(100% - 76px);
        overflow: hidden;
        background: #fff;
    }

    .mobile-menu-viewport {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #fff;
    }

    .mobile-menu-level {
        position: absolute;
        inset: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        transform: translate3d(-100%,0,0);
        opacity: 0;
        visibility: hidden;
        transition: transform .34s var(--mehr-ease),opacity .22s ease,visibility .34s;
        will-change: transform;
    }

        .mobile-menu-level.active {
            transform: translate3d(0,0,0);
            opacity: 1;
            visibility: visible;
            z-index: 2;
        }

        .mobile-menu-level.previous {
            transform: translate3d(100%,0,0);
            opacity: 0;
            visibility: hidden;
        }

    .mobile-menu-list,
    .mobile-submenu-list {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .mobile-menu-row,
    .mobile-submenu-row {
        min-height: 61px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 0 20px;
        border: 0;
        border-bottom: 1px solid #eceae6;
        background: #fff;
        color: #181512;
        text-decoration: none;
        text-align: right;
        font-family: inherit;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.45;
    }

    button.mobile-menu-row {
        cursor: pointer
    }

    .mobile-menu-row i,
    .mobile-submenu-row i {
        flex: 0 0 auto;
        font-size: 12px;
        color: #77716b;
    }

    .mobile-menu-row:active,
    .mobile-submenu-row:active {
        background: #f7f6f3;
    }

    .mobile-menu-utility {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 46px;
        padding: 20px 20px 36px;
        border-top: 1px solid #f0eeea;
    }

        .mobile-menu-utility a {
            min-height: 47px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: #28231f;
            text-decoration: none;
            font-size: 12px;
            font-weight: 400;
        }

        .mobile-menu-utility i {
            width: 18px;
            text-align: center;
            color: #544e48;
            font-size: 13px;
        }

    .mobile-level-titlebar {
        position: sticky;
        top: 0;
        z-index: 4;
        height: 58px;
        min-height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 92px;
        border-bottom: 1px solid #e9e6e1;
        background: #fff;
    }

        .mobile-level-titlebar strong {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            max-width: calc(100% - 180px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: .01em;
        }

    .mobile-menu-back {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        min-width: 78px;
        height: 42px;
        border: 0;
        background: transparent;
        color: #2b2723;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        padding: 0 4px;
        font-family: inherit;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
    }

        .mobile-menu-back i {
            font-size: 14px;
            line-height: 1;
        }

        .mobile-menu-back:active {
            opacity: .55;
        }

        .mobile-menu-back:focus-visible {
            outline: 1px solid #29241f;
            outline-offset: 2px;
        }

    .mobile-submenu-row {
        min-height: 57px;
        padding-inline: 18px;
        font-size: 13px;
    }

        .mobile-submenu-row.mobile-view-all {
            color: #6e6861;
            font-weight: 400;
            background: #faf9f7;
        }
}

@media (max-width:389.98px) {
    #mobileMenu .mobile-menu-header {
        height: 72px;
        min-height: 72px
    }

    #mobileMenu .mobile-menu-body {
        height: calc(100% - 72px)
    }

    .mobile-menu-brand {
        width: 116px
    }

        .mobile-menu-brand img {
            width: 106px
        }

    .mobile-menu-actions a {
        width: 34px
    }

    .mobile-menu-row {
        min-height: 58px;
        padding-inline: 16px;
        font-size: 13px
    }

    .mobile-menu-utility {
        padding-inline: 16px
    }
}

/* Search overlay — editorial desktop search panel */
.search-overlay {
    position: fixed;
    z-index: 700;
    top: 0;
    right: 0;
    left: 0;
    background: #fbfaf8;
    color: var(--mehr-text);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px);
    transition: opacity .24s ease,visibility .24s ease,transform .28s ease;
    pointer-events: none;
    padding-top: 132px;
    min-height: 630px;
    box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

body.search-open .search-overlay {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

body.search-open .site-header {
    color: var(--mehr-text);
}

    body.search-open .site-header .accessibility-bar {
        height: 0;
        opacity: 0;
        overflow: hidden
    }

    body.search-open .site-header .header-surface {
        background: #fbfaf8;
        color: var(--mehr-text);
        box-shadow: none
    }

    body.search-open .site-header .brand-logo {
        filter: none
    }

    body.search-open .site-header .promo-strip {
        border-color: #e4e0d9
    }

    body.search-open .site-header .desktop-nav {
        border-color: #e4e0d9
    }

.search-overlay-inner {
    max-width: 1810px;
    margin: 0 auto;
    padding-bottom: 34px
}

.search-overlay-head {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0 42px
}

.search-overlay-form {
    width: min(460px,90vw);
    border-bottom: 1px solid #cfcac2;
    display: flex;
    align-items: center;
    direction: rtl
}

    .search-overlay-form input {
        flex: 1;
        border: 0;
        background: transparent;
        outline: 0;
        padding: 11px 8px;
        font-size: 18px;
        color: #3e3934;
        min-width: 0
    }

        .search-overlay-form input::placeholder {
            color: #89837c;
            opacity: 1
        }

    .search-overlay-form button {
        width: 38px;
        height: 42px;
        border: 0;
        background: transparent;
        color: #26231f;
        font-size: 20px;
        padding: 0;
        display: grid;
        place-items: center
    }

.search-overlay-close {
    position: absolute;
    left: 0;
    top: 25px;
    border: 0;
    background: transparent;
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: #2a2723;
    display: grid;
    place-items: center
}

.search-overlay-content {
    direction: rtl;
    min-height: 390px
}

.search-link-column {
    padding: 0 28px;
    border-left: 0;
    direction: rtl;
    text-align: right
}

    .search-link-column h2, .search-suggestions h2 {
        font-size: 13px;
        letter-spacing: .05em;
        font-weight: 700;
        margin: 0 0 20px;
        color: #171512
    }

    .search-link-column nav {
        display: flex;
        flex-direction: column;
        gap: 12px
    }

    .search-link-column a {
        font-size: 14px;
        color: #726c65;
        text-decoration: none;
        width: max-content;
        max-width: 100%;
        transition: color .2s ease
    }

        .search-link-column a:hover {
            color: #141210
        }

.search-suggestions {
    border-right: 1px solid #e3dfd8;
    padding-right: 38px;
    padding-left: 0;
    text-align: right
}

.search-suggestion-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 28px 36px
}

    .search-suggestion-grid a {
        display: block;
        background: #eeeae4;
        overflow: hidden;
        aspect-ratio: 1/1
    }

    .search-suggestion-grid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        filter: saturate(.82);
        transition: transform .45s ease
    }

    .search-suggestion-grid a:hover img {
        transform: scale(1.02)
    }

.search-overlay-backdrop {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(0,0,0,.38);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease,visibility .22s ease
}

body.search-open .search-overlay-backdrop {
    opacity: 1;
    visibility: visible
}

.mobile-search-button {
    border: 0;
    background: transparent;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    color: inherit
}

@media (max-width:991.98px) {
    .search-overlay {
        padding-top: 72px;
        min-height: 100dvh;
        height: 100dvh;
        overflow: auto
    }

    .search-overlay-inner {
        padding-inline: 18px !important;
        padding-bottom: 40px
    }

    .search-overlay-head {
        padding: 22px 0 30px
    }

    .search-overlay-close {
        left: auto;
        right: 0;
        top: 22px
    }

    .search-overlay-form {
        width: calc(100% - 56px);
        margin-inline: auto
    }

        .search-overlay-form input {
            font-size: 16px
        }

    .search-overlay-content {
        display: block;
        min-height: 0
    }

    .search-link-column, .search-suggestions {
        width: 100%;
        border: 0;
        padding: 22px 0 !important
    }

    .search-link-column {
        border-bottom: 1px solid #e6e2dc
    }

        .search-link-column nav {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 13px 20px
        }

    .search-suggestions {
        padding-top: 28px !important
    }

    .search-suggestion-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px
    }

    body.search-open {
        overflow: hidden !important
    }
}

/* ============================================================
   Mobile search overlay positioning fix
   Keep the search panel completely below the fixed two-row header
   (brand row + promotion strip), so the search field never hides
   underneath the promotion slider.
   ============================================================ */
@media (max-width:767.98px) {
    body.search-open .site-header {
        z-index: 800;
    }

    .search-overlay {
        top: var(--mobile-header-total);
        bottom: 0;
        height: calc(100dvh - var(--mobile-header-total));
        min-height: calc(100dvh - var(--mobile-header-total));
        padding-top: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .search-overlay-inner {
        padding-top: 0 !important;
    }

    .search-overlay-head {
        padding: 18px 0 24px;
        background: #fbfaf8;
    }

    .search-overlay-close {
        top: 18px;
    }

    .search-overlay-form {
        margin-top: 0;
    }
}


/* =========================================================
   Mobile nested-menu back button — visibility fix
   ========================================================= */
@media (max-width: 991.98px) {
    #mobileMenu .mobile-menu-level:not([data-mobile-level="root"]) .mobile-level-titlebar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 30 !important;
        height: 54px !important;
        min-height: 54px !important;
        width: 100% !important;
        padding: 0 16px !important;
        background: #fff !important;
        border-bottom: 1px solid #e7e3dc !important;
        box-shadow: 0 1px 0 rgba(38,33,28,.03);
    }

    #mobileMenu .mobile-level-titlebar strong {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%,-50%) !important;
        margin: 0 !important;
        max-width: 55% !important;
        color: #28231f !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }

    #mobileMenu .mobile-menu-back {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 8px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        width: auto !important;
        min-width: 78px !important;
        height: 42px !important;
        padding: 0 8px !important;
        margin: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #2b2723 !important;
        font-family: inherit !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
        z-index: 32 !important;
    }

        #mobileMenu .mobile-menu-back i {
            display: inline-block !important;
            font-size: 13px !important;
            transform: scaleX(-1);
        }

        #mobileMenu .mobile-menu-back span {
            display: inline !important;
        }

    #mobileMenu .mobile-menu-level:not([data-mobile-level="root"]) .mobile-submenu-list {
        padding-top: 0 !important;
    }
}

/* =========================================================
   Mobile submenu title/back bar — reference-style compact UI
   ========================================================= */
@media (max-width: 991.98px) {
    #mobileMenu .mobile-level-titlebar {
        position: sticky !important;
        top: 0 !important;
        z-index: 40 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 52px !important;
        margin: 0 !important;
        background: #fff !important;
        border-top: 0 !important;
        border-bottom: 1px solid #e8e5df !important;
        box-shadow: none !important;
    }

        #mobileMenu .mobile-level-titlebar strong {
            position: absolute !important;
            inset: auto !important;
            left: 50% !important;
            top: 50% !important;
            transform: translate(-50%,-50%) !important;
            width: max-content !important;
            max-width: calc(100% - 112px) !important;
            margin: 0 !important;
            padding: 0 !important;
            color: #171513 !important;
            font-family: inherit !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            line-height: 1 !important;
            letter-spacing: .04em !important;
            text-align: center !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            pointer-events: none !important;
        }

    /* Only a small chevron at the left, like the supplied reference. */
    #mobileMenu .mobile-menu-back {
        position: absolute !important;
        left: 4px !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 45 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #403b36 !important;
        visibility: visible !important;
        opacity: 1 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent;
    }

        #mobileMenu .mobile-menu-back i {
            display: block !important;
            margin: 0 !important;
            font-size: 13px !important;
            line-height: 1 !important;
            transform: none !important;
        }

        #mobileMenu .mobile-menu-back span {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0,0,0,0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        #mobileMenu .mobile-menu-back:hover,
        #mobileMenu .mobile-menu-back:active {
            background: transparent !important;
            opacity: .58 !important;
        }

        #mobileMenu .mobile-menu-back:focus-visible {
            outline: 1px solid #2d2925 !important;
            outline-offset: -7px !important;
        }

    #mobileMenu .mobile-menu-level:not([data-mobile-level="root"]) .mobile-submenu-list {
        padding-top: 0 !important;
    }
}

/* =========================================================
   Mobile menu stacking fix — keep submenu back bar above the
   fixed site header / membership promo strip.
   ========================================================= */
@media (max-width: 991.98px) {
    /* Bootstrap offcanvas defaults below the site's fixed header (z-index:1500).
     Lift the complete mobile navigation layer above it so the promo strip
     can never cover the submenu title/back row. */
    #mobileMenu.mobile-menu-offcanvas {
        z-index: 2005 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
    }

    .offcanvas-backdrop {
        z-index: 2000 !important;
    }

    #mobileMenu .mobile-menu-header {
        position: relative !important;
        z-index: 2050 !important;
        background: #fff !important;
    }

    #mobileMenu .mobile-menu-body,
    #mobileMenu .mobile-menu-viewport {
        position: relative !important;
        z-index: 2040 !important;
        background: #fff !important;
    }

    #mobileMenu .mobile-menu-level:not([data-mobile-level="root"]) .mobile-level-titlebar {
        top: 0 !important;
        z-index: 2060 !important;
    }

    #mobileMenu .mobile-menu-back {
        z-index: 2070 !important;
    }
}

/* ============================================================
   New Arrivals — reference-style two-card editorial section
   Bootstrap grid: col-12 col-md-6
   ============================================================ */
.arrivals-slide {
    background: #fff;
    color: var(--mehr-text);
}

.arrivals-container {
    width: 100%;
    max-width: 1220px;
    height: 100%;
    margin-inline: auto;
    padding-inline: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrivals-row {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
}

.arrival-card {
    display: block;
    width: 100%;
    color: var(--mehr-text);
    text-decoration: none;
}

    .arrival-card:hover,
    .arrival-card:focus {
        color: var(--mehr-text);
        text-decoration: none;
    }

.arrival-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f2f1ef;
}

    .arrival-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s var(--mehr-ease);
    }

.arrival-card:hover .arrival-image img {
    transform: scale(1.015);
}

.arrival-title {
    margin: 8px 0 0;
    color: #24211e;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    text-align: start;
}

@media (min-width: 768px) {
    .arrivals-container {
        padding-top: 110px;
        padding-bottom: 55px;
    }
}

@media (max-width: 767.98px) {
    .arrivals-slide {
        min-height: 100svh !important;
        padding-top: var(--mobile-header-total) !important;
        background: #fff;
    }

        .arrivals-slide > .arrivals-container {
            width: 100%;
            height: calc(100svh - var(--mobile-header-total)) !important;
            min-height: 0 !important;
            padding: 16px 14px 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .arrivals-row {
        width: 100%;
        max-width: none;
        margin: 0;
        row-gap: 16px;
    }

        .arrivals-row > [class*="col-"] {
            padding-left: 0;
            padding-right: 0;
        }

    .arrival-image {
        width: 100%;
        height: 25svh;
        aspect-ratio: auto;
    }

    .arrival-title {
        margin-top: 7px;
        font-size: 13px;
        line-height: 1.5;
        font-weight: 500;
    }
}

@media (max-width: 389.98px) {
    .arrivals-slide > .arrivals-container {
        padding: 12px 12px 14px;
    }

    .arrivals-row {
        row-gap: 12px;
    }

    .arrival-image {
        height: 23svh;
    }

    .arrival-title {
        margin-top: 5px;
        font-size: 12px;
    }
}

/* ============================================================
   Popular categories — horizontal editorial slider
   Desktop + tablet + mobile
   ============================================================ */
.categories-slide {
    background: #fff;
    color: var(--mehr-text);
}

    .categories-slide .categories-container {
        width: 100%;
        max-width: none;
        padding-top: 104px !important;
        padding-right: 20px !important;
        padding-bottom: 34px !important;
        padding-left: 20px !important;
    }

    .categories-slide .section-kicker {
        flex: 0 0 auto;
        margin: 0 0 34px !important;
        color: #24211e;
        font-size: 14px;
        line-height: 1.6;
        font-weight: 600;
    }

.category-slider-shell {
    position: relative;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
}

.category-slider-track {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 8px;
    direction: rtl;
    cursor: grab;
}

    .category-slider-track::-webkit-scrollbar {
        display: none;
    }

    .category-slider-track:active {
        cursor: grabbing;
    }

.category-slide-item {
    flex: 0 0 clamp(300px, 24.3vw, 425px);
    min-width: 0;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.category-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    color: var(--mehr-text);
    text-align: right;
    direction: rtl;
}

.category-media {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
    background: #f2f0ec;
    aspect-ratio: 0.66 / 1;
}

    .category-media img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        transition: transform .75s var(--mehr-ease), filter .35s ease;
        filter: saturate(.88) contrast(1.02);
    }

.category-card:hover .category-media img {
    transform: scale(1.015);
}

.category-card h3 {
    flex: 0 0 auto;
    margin: 10px 0 0;
    color: #24211e;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
    text-align: center;
}

.category-slider-control {
    position: absolute;
    top: 50%;
    z-index: 6;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(36,33,30,.16);
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #24211e;
    display: grid;
    place-items: center;
    padding: 0;
    transform: translateY(-50%);
    box-shadow: 0 3px 12px rgba(0,0,0,.06);
    font-size: 17px;
    line-height: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease, background .2s ease, transform .2s ease;
}

    .category-slider-shell:hover .category-slider-control,
    .category-slider-control:focus-visible {
        opacity: 1;
        visibility: visible;
    }

    .category-slider-control:hover {
        background: #fff;
    }

    .category-slider-control:active {
        transform: translateY(-50%) scale(.96);
    }

.category-slider-prev {
    right: 10px;
}

.category-slider-next {
    left: 10px;
}

.category-slider-control[disabled] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

@media (min-width: 1400px) {
    .categories-slide .categories-container {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    .category-slider-track {
        gap: 14px;
    }

    .category-slide-item {
        /* Keep real horizontal overflow even when there are only four cards.
           Roughly 3.5–3.7 cards remain visible on large desktop screens,
           so mouse drag has meaningful travel instead of only a few pixels. */
        flex: 0 0 clamp(360px, 27vw, 520px);
        max-width: none;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .categories-slide .categories-container {
        padding-top: 90px !important;
        padding-right: 18px !important;
        padding-left: 18px !important;
        padding-bottom: 28px !important;
    }

    .categories-slide .section-kicker {
        margin-bottom: 25px !important;
    }

    .category-slider-track {
        gap: 12px;
    }

    .category-slide-item {
        flex-basis: clamp(270px, 39vw, 380px);
    }

    .category-media {
        aspect-ratio: .75 / 1;
    }
}

@media (max-width: 767.98px) {
    /* The page itself still uses vertical section swipes, while this child
       explicitly owns horizontal gestures. */
    body.section-slider-enabled {
        touch-action: pan-x pan-y;
    }

    .categories-slide {
        min-height: 100svh !important;
        padding-top: var(--mobile-header-total) !important;
        background: #fff;
    }

        .categories-slide .categories-container {
            width: 100%;
            height: calc(100svh - var(--mobile-header-total)) !important;
            min-height: 0 !important;
            padding: 22px 0 20px !important;
            justify-content: flex-start !important;
        }

        .categories-slide .section-kicker {
            margin: 0 0 18px !important;
            padding: 0 18px;
            font-size: 13px;
            line-height: 1.6;
        }

    .category-slider-shell {
        width: 100%;
        min-height: 0;
        flex: 1 1 auto;
    }

    .category-slider-track {
        height: 100%;
        gap: 10px;
        padding: 0 14px 6px;
        scroll-padding-inline: 14px;
        touch-action: pan-x;
        cursor: auto;
    }

    .category-slide-item {
        flex: 0 0 82vw;
        height: 100%;
        max-width: 430px;
    }

    .category-card {
        height: 100%;
    }

    .category-media {
        width: 100%;
        height: calc(100% - 38px);
        min-height: 0;
        flex: 0 0 auto;
        aspect-ratio: auto;
    }

    .category-card h3 {
        margin-top: 8px;
        font-size: 13px;
        line-height: 1.45;
        text-align: center;
    }

    /* Mobile interaction is swipe-first; controls stay out of the way. */
    .category-slider-control {
        display: none;
    }
}

@media (max-width: 389.98px) {
    .categories-slide .categories-container {
        padding-top: 17px !important;
        padding-bottom: 16px !important;
    }

    .categories-slide .section-kicker {
        margin-bottom: 14px !important;
        padding-inline: 12px;
        font-size: 12px;
    }

    .category-slider-track {
        gap: 8px;
        padding-inline: 12px;
        scroll-padding-inline: 12px;
    }

    .category-slide-item {
        flex-basis: 85vw;
    }

    .category-card h3 {
        margin-top: 6px;
        font-size: 12px;
    }
}

/* ============================================================
   SEARCH SECTION — READABILITY FIX (DESKTOP + MOBILE)
   ============================================================ */
.search-slide {
    position: relative;
    background: #171717 !important;
    color: #fff;
}

    .search-slide .slide-media {
        filter: saturate(.82) contrast(1.03) brightness(.88);
    }

    .search-slide .slide-overlay.light {
        z-index: 1;
        background: linear-gradient( 180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.34) 42%, rgba(0,0,0,.46) 100% );
    }

    .search-slide > .container {
        position: relative;
        z-index: 2;
    }

    .search-slide .search-block {
        width: 100%;
        max-width: 700px;
        margin-inline: auto;
        padding: 32px 28px;
        color: #fff;
    }

        .search-slide .search-block h2 {
            margin: 0;
            color: #fff;
            font-size: clamp(24px,2vw,32px);
            font-weight: 500;
            line-height: 1.5;
            text-shadow: 0 2px 14px rgba(0,0,0,.28);
        }

        .search-slide .search-block p {
            margin: 12px 0 0;
            color: rgba(255,255,255,.88);
            font-size: 14px;
            font-weight: 400;
            line-height: 1.9;
            text-shadow: 0 1px 10px rgba(0,0,0,.24);
        }

    .search-slide .search-form {
        width: 100%;
        max-width: 610px;
        margin-inline: auto;
    }

        .search-slide .search-form .input-group {
            min-height: 58px;
            border-bottom: 1px solid rgba(255,255,255,.92) !important;
            display: flex;
            align-items: center;
        }

        .search-slide .search-form .form-control {
            height: 58px;
            padding: 0 10px;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            color: #fff !important;
            font-family: inherit;
            font-size: 15px;
            font-weight: 400;
            text-align: right;
            box-shadow: none !important;
            outline: none;
            caret-color: #fff;
        }

            .search-slide .search-form .form-control::placeholder {
                color: rgba(255,255,255,.78) !important;
                opacity: 1;
            }

        .search-slide .search-form .btn {
            width: 52px;
            height: 58px;
            padding: 0;
            border: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            color: #fff !important;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: none !important;
        }

            .search-slide .search-form .btn i {
                color: #fff !important;
                font-size: 19px;
                line-height: 1;
            }

        .search-slide .search-form:focus-within .input-group {
            border-bottom-color: #fff !important;
        }

        .search-slide .search-form:focus-within .form-control::placeholder {
            color: rgba(255,255,255,.52) !important;
        }

@media (min-width: 768px) {
    .search-slide > .container {
        height: 100dvh !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 110px;
        padding-bottom: 50px;
    }

    .search-slide .search-block {
        max-width: 700px;
        padding: 36px 40px;
    }

        .search-slide .search-block h2 {
            font-size: 28px;
        }

        .search-slide .search-block p {
            margin-top: 11px;
            font-size: 14px;
        }

    .search-slide .search-form {
        margin-top: 30px !important;
    }
}

@media (max-width: 767.98px) {
    .search-slide {
        min-height: 100svh !important;
        padding-top: var(--mobile-header-total) !important;
    }

        .search-slide .slide-media,
        .search-slide .slide-overlay {
            top: var(--mobile-header-total);
            height: calc(100% - var(--mobile-header-total));
        }

        .search-slide > .container {
            width: 100%;
            height: calc(100svh - var(--mobile-header-total)) !important;
            min-height: calc(100svh - var(--mobile-header-total)) !important;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px 18px;
        }

        .search-slide .slide-overlay.light {
            background: linear-gradient( 180deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,.43) 45%, rgba(0,0,0,.48) 100% );
        }

        .search-slide .search-block {
            width: 100%;
            max-width: 480px;
            margin: 0 auto;
            padding: 24px 4px;
        }

            .search-slide .search-block h2 {
                font-size: 23px;
                line-height: 1.6;
                font-weight: 500;
            }

            .search-slide .search-block p {
                max-width: 340px;
                margin: 10px auto 0;
                color: rgba(255,255,255,.86);
                font-size: 13px;
                line-height: 1.9;
            }

        .search-slide .search-form {
            width: 100%;
            max-width: 390px;
            margin-top: 26px !important;
        }

            .search-slide .search-form .input-group {
                min-height: 52px;
            }

            .search-slide .search-form .form-control {
                height: 52px;
                padding: 0 6px;
                font-size: 13px;
            }

            .search-slide .search-form .btn {
                width: 46px;
                height: 52px;
            }

                .search-slide .search-form .btn i {
                    font-size: 18px;
                }
}

@media (max-width: 389.98px) {
    .search-slide > .container {
        padding-inline: 14px;
    }

    .search-slide .search-block {
        padding-inline: 0;
    }

        .search-slide .search-block h2 {
            font-size: 20px;
        }

        .search-slide .search-block p {
            max-width: 300px;
            font-size: 12px;
            line-height: 1.85;
        }

    .search-slide .search-form {
        margin-top: 22px !important;
    }

        .search-slide .search-form .form-control {
            font-size: 12px;
        }
}

/* ============================================================
   FINAL FIX — Category slider interaction
   Desktop: mouse drag
   Mobile: native horizontal finger swipe
   Wheel / vertical finger gestures stay available to page slider
   ============================================================ */
.category-slider-track {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-overflow-scrolling: touch;
}

    .category-slider-track.is-pointer-down,
    .category-slider-track.is-dragging {
        cursor: grabbing;
    }

    .category-slider-track.is-dragging {
        scroll-snap-type: none !important;
        scroll-behavior: auto !important;
    }

    .category-slider-track img {
        pointer-events: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
    }

@media (max-width: 767.98px) {
    /* Do not block the child track's horizontal native gesture at body level. */
    body.section-slider-enabled {
        touch-action: auto !important;
    }

    .categories-slide {
        overflow: hidden !important;
    }

    .category-slider-shell {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .category-slider-track {
        width: 100%;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        touch-action: pan-x !important;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        cursor: auto;
    }

        .category-slider-track::-webkit-scrollbar {
            display: none;
        }

    .category-slide-item {
        flex: 0 0 82vw !important;
        width: 82vw !important;
        max-width: 430px;
        min-width: 0;
        scroll-snap-align: start;
    }

    .category-slider-control {
        display: none !important;
    }
}

/* ============================================================
   FINAL FIX — Desktop scrolled header action buttons
   Keep the compact navigation from covering Search / header tools.
   ============================================================ */
@media (min-width: 992px) {
    .site-header.is-scrolled .desktop-nav {
        top: 0;
        right: 190px;
        left: 190px;
        height: 46px;
        z-index: 1;
    }

    .header-tools-start,
    .header-tools-end,
    .site-header.is-scrolled .header-tools-start,
    .site-header.is-scrolled .header-tools-end {
        position: relative;
        z-index: 20;
        pointer-events: auto;
    }

    .site-header.is-scrolled .js-search-open,
    .site-header.is-scrolled .icon-button {
        position: relative;
        z-index: 21;
        pointer-events: auto;
        cursor: pointer;
    }
}


/* ============================================================
   INNER PAGE HEADER
   Pages with white/light background
   ============================================================ */

body.inner-page-header {
    --inner-header-offset: 180px;
    padding-top: var(--inner-header-offset);
}


    /* ------------------------------------------------------------
   Header should be visible on white pages
   ------------------------------------------------------------ */

    body.inner-page-header .site-header {
        color: var(--mehr-text);
    }


        /* White solid header instead of transparent */

        body.inner-page-header .site-header .header-surface {
            background: rgba(255, 255, 255, .98);
            color: var(--mehr-text);
            box-shadow: 0 1px 0 rgba(31, 27, 23, .08);
        }


        /* Logo must use its original dark version */

        body.inner-page-header .site-header .brand-logo {
            filter: none;
        }


        /* Navigation borders */

        body.inner-page-header .site-header .desktop-nav {
            border-top-color: #ebe7e1;
            border-bottom-color: #e4dfd8;
        }


        /* Promo strip */

        body.inner-page-header .site-header .promo-strip {
            color: var(--mehr-text);
            border-bottom-color: #e4dfd8;
        }


        /* Icons */

        body.inner-page-header .site-header .icon-button,
        body.inner-page-header .site-header .mobile-search-button {
            color: var(--mehr-text);
        }


/* ============================================================
   TABLET
   ============================================================ */

@media (min-width: 768px) and (max-width: 991.98px) {

    body.inner-page-header {
        --inner-header-offset: 133px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    body.inner-page-header {
        /*
         * این variable را از ساختار فعلی header موبایل خودت داریم.
         */
        --inner-header-offset: var( --mobile-header-total, 135px );
    }

        body.inner-page-header .site-header,
        body.inner-page-header .site-header.is-scrolled {
            color: var(--mehr-text);
            background: #fff;
        }

            body.inner-page-header .site-header .header-surface,
            body.inner-page-header .site-header.is-scrolled .header-surface {
                background: #fff;
                color: var(--mehr-text);
                box-shadow: 0 1px 0 rgba(31, 27, 23, .08);
            }

            body.inner-page-header .site-header .brand-logo,
            body.inner-page-header .site-header.is-scrolled .brand-logo {
                filter: none;
            }
}


/* ============================================================
   GLOBAL STICKY FOOTER
   Keep footer at the bottom on all normal pages.
   Home / full-page slider is excluded via .section-slider-enabled.
   ============================================================ */

html {
    min-height: 100%;
}

body:not(.section-slider-enabled) {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

    /*
 * Works whether RenderBody() is wrapped in .site-main or not.
 * If .site-main exists, it fills the available space.
 */
    body:not(.section-slider-enabled) .site-main {
        width: 100%;
        flex: 1 0 auto;
    }

    /*
 * Auto margin pushes the footer to the bottom when page content is short.
 * On long pages it simply follows the content naturally.
 */
    body:not(.section-slider-enabled) .footer-slide {
        flex: 0 0 auto;
        margin-top: auto !important;
    }


/* ============================================================
   MOBILE STICKY FOOTER OVERRIDES
   Remove the full-page-slider spacing from normal pages.
   ============================================================ */

@media (max-width: 767.98px) {

    body:not(.section-slider-enabled) .footer-slide {
        min-height: auto !important;
        padding-top: 0 !important;
        margin-top: auto !important;
        overflow: visible !important;
    }

        body:not(.section-slider-enabled) .footer-slide > .container-fluid {
            min-height: auto !important;
            height: auto !important;
        }

    body:not(.section-slider-enabled) .mobile-footer {
        min-height: auto !important;
    }
}


/* ============================================================
   Desktop category dropdown — CSS-only hover / keyboard focus
   Each navigation item contains its own category subtree.
   ============================================================ */
@media (min-width: 992px) {
    /* The scrolled header already positions .desktop-nav absolutely;
       in the normal header it needs a containing block for the dropdown. */
    .category-desktop-shell .desktop-nav {
        position: relative;
        z-index: 5;
    }

    .category-desktop-shell .desktop-nav > .container-fluid,
    .category-desktop-shell .desktop-nav .nav {
        position: static;
    }

    .category-has-children {
        position: static;
    }

    .category-dropdown {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 30;
        color: var(--mehr-text);
        background: #f8f7f4;
        border-top: 1px solid #e6e2dc;
        box-shadow: 0 24px 48px rgba(0, 0, 0, .14);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-7px);
        transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
        max-height: min(72vh, 660px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .category-has-children:hover > .category-dropdown,
    .category-has-children:focus-within > .category-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    /* Absolute compact navigation is inset by 190px in the supplied CSS.
       Expand its dropdown to the full header width without changing nav layout. */
    .site-header.is-scrolled .category-dropdown {
        left: -190px;
        right: -190px;
    }

    .category-dropdown-inner {
        max-width: 1440px;
        margin: 0 auto;
        padding: 30px clamp(24px, 4vw, 64px) 38px;
        text-align: right;
    }

    .category-dropdown-heading {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 16px;
        border-bottom: 1px solid #e4e0da;
        padding-bottom: 18px;
        margin-bottom: 24px;
    }

    .category-dropdown-heading h2 {
        margin: 0;
        color: #201d1a;
        font-size: 18px;
        font-weight: 700;
    }

    .category-view-all {
        color: #625c55;
        font-size: 12px;
        text-decoration: none;
        white-space: nowrap;
    }

    .category-view-all:hover,
    .category-view-all:focus-visible {
        color: #111;
        text-decoration: underline;
    }

    .category-dropdown-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 32px;
        row-gap: 26px;
        align-content: start;
    }

    .category-dropdown-group {
        min-width: 0;
    }

    .category-dropdown-group h3 {
        margin: 0 0 12px;
        font-size: 14px;
        line-height: 1.65;
        font-weight: 650;
    }

    .category-dropdown-group h3 a {
        color: #27231f;
        text-decoration: none;
    }

    .category-descendant-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .category-descendant-item {
        margin: 0;
        padding: 0;
    }

    .category-descendant-item a {
        display: block;
        padding: 5px 0;
        color: #6c655d;
        font-size: 12.5px;
        line-height: 1.7;
        text-decoration: none;
        overflow-wrap: anywhere;
    }

    .category-descendant-list .category-descendant-list {
        margin: 2px 9px 9px 0;
        padding-right: 13px;
        border-right: 1px solid #ded9d1;
    }

    .category-descendant-item a:hover,
    .category-descendant-item a:focus-visible,
    .category-dropdown-group h3 a:hover,
    .category-dropdown-group h3 a:focus-visible {
        color: #111;
        text-decoration: underline;
    }

    body.search-open .category-dropdown {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* A light header while navigating the dropdown; the visibility logic
       above does not depend on :has() support. */
    .site-header:has(.category-has-children:hover) .header-surface,
    .site-header:has(.category-has-children:focus-within) .header-surface {
        background: rgba(250, 249, 246, .99);
        color: var(--mehr-text);
        box-shadow: 0 1px 0 rgba(20, 18, 16, .12);
    }

    .site-header:has(.category-has-children:hover) .brand-logo,
    .site-header:has(.category-has-children:focus-within) .brand-logo {
        filter: none;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .category-dropdown-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .category-dropdown {
        transition: none;
    }
}