/* =========================================================
   QMB SHOP - MOBILE PREMIUM HEADER / MENU - FINAL FIX
   Replace the previous mobile premium CSS with this file.
   ========================================================= */

@media (max-width:1077px) {
    :root {
        --qmb-pink: #ef6b91;
        --qmb-pink2: #f7b7c9;
        --qmb-lilac: #a978d8;
        --qmb-lilac2: #e8d8f8;
        --qmb-mint: #63c9bf;
        --qmb-mint2: #dff6f2;
        --qmb-ink: #302b35;
        --qmb-muted: #817984;
        --qmb-white: #fff;
    }

    html {
        scroll-padding-top: 78px
    }

    body.qmb-mobile-menu-open {
        overflow: hidden !important
    }

    /* ---------- TOP HEADER ---------- */
    nav.header-responsive {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 78px !important;
        min-height: 78px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(255,255,255,.96) !important;
        border: 0 !important;
        box-shadow: 0 8px 28px rgba(85,58,87,.10) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
        z-index: 104000 !important;
        overflow: visible !important;
    }

        nav.header-responsive:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg,var(--qmb-mint),#c69be8,var(--qmb-pink));
        }

        nav.header-responsive > .container {
            width: 100% !important;
            max-width: none !important;
            height: 78px !important;
            padding: 0 9px !important;
            margin: 0 !important;
        }

        nav.header-responsive .navbar-translate {
            position: relative !important;
            width: 100% !important;
            height: 78px !important;
            min-height: 78px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        /* logo */
        nav.header-responsive .navbar-brand {
            position: absolute !important;
            left: 50% !important;
            top: 13px !important;
            transform: translateX(-50%) !important;
            width: 90px !important;
            height: 47px !important;
            margin: 0 !important;
            padding: 4px 8px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 17px !important;
            background: #fff !important;
            border: 1px solid rgba(190,143,198,.16) !important;
            box-shadow: 0 7px 20px rgba(95,58,100,.07) !important;
            z-index: 3 !important;
        }

            nav.header-responsive .navbar-brand img {
                width: auto !important;
                max-width: 70px !important;
                height: 37px !important;
                object-fit: contain !important;
            }

        /* hamburger RIGHT */
        nav.header-responsive .navbar-toggler {
            position: absolute !important;
            right: 8px !important;
            left: auto !important;
            top: 14px !important;
            width: 46px !important;
            height: 46px !important;
            min-width: 46px !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 1px solid rgba(188,133,194,.30) !important;
            border-radius: 16px !important;
            background: linear-gradient(145deg,#fff,#fff0f6 55%,#f0e9ff) !important;
            box-shadow: 0 8px 22px rgba(115,70,119,.12) !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex-direction: column !important;
            gap: 5px !important;
            z-index: 4 !important;
        }

        nav.header-responsive .navbar-toggler-bar {
            display: block !important;
            width: 21px !important;
            height: 2px !important;
            margin: 0 !important;
            border-radius: 99px !important;
            background: linear-gradient(90deg,var(--qmb-lilac),var(--qmb-pink)) !important;
            transition: .3s ease !important;
        }

        nav.header-responsive .navbar-toggler.qmb-open .bar1 {
            transform: translateY(7px) rotate(45deg) !important
        }

        nav.header-responsive .navbar-toggler.qmb-open .bar2 {
            width: 0 !important;
            opacity: 0 !important
        }

        nav.header-responsive .navbar-toggler.qmb-open .bar3 {
            transform: translateY(-7px) rotate(-45deg) !important
        }

        /* red/pink quick actions LEFT */
        nav.header-responsive .qmb-mobile-actions {
            position: absolute !important;
            left: 8px !important;
            right: auto !important;
            top: 15px !important;
            height: 43px !important;
            display: flex !important;
            align-items: center !important;
            gap: 6px !important;
            z-index: 4 !important;
        }

        nav.header-responsive .qmb-mobile-action {
            width: 43px !important;
            height: 43px !important;
            min-width: 43px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 15px !important;
            text-decoration: none !important;
            color: var(--qmb-pink) !important;
            background: linear-gradient(145deg,#fff,#fff4f8 58%,#f5edff) !important;
            border: 1px solid rgba(220,139,171,.30) !important;
            box-shadow: 0 7px 20px rgba(120,70,110,.08) !important;
        }

            nav.header-responsive .qmb-mobile-action:nth-child(2) {
                color: #b66bb4 !important
            }

            nav.header-responsive .qmb-mobile-action:nth-child(3) {
                color: #8c68c9 !important
            }

            nav.header-responsive .qmb-mobile-action i {
                font-size: 15px !important;
                line-height: 1 !important
            }

        nav.header-responsive .qmb-cart-badge {
            position: absolute !important;
            top: -5px !important;
            right: -5px !important;
            min-width: 16px !important;
            height: 16px !important;
            padding: 0 4px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: 50px !important;
            background: linear-gradient(135deg,#ef5d80,#d9436b) !important;
            color: #fff !important;
            border: 2px solid #fff !important;
            font-size: 9px !important;
        }

    /* ---------- SEARCH: NORMAL FLOW, UNDER HEADER ---------- */
    .qmb-mobile-search-box {
        position: relative !important;
        width: calc(100% - 14px) !important;
        height: 54px !important;
        min-height: 54px !important;
        margin: 10px 7px 12px !important;
        padding: 5px !important;
        display: block !important;
        background: linear-gradient(135deg,#fff,#fff7fb) !important;
        border: 1px solid rgba(195,150,201,.24) !important;
        border-radius: 19px !important;
        box-shadow: 0 9px 25px rgba(85, 54, 84, .09) !important;
        z-index: 20 !important;
    }

        .qmb-mobile-search-box form {
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            display: flex !important;
            align-items: center !important
        }

        .qmb-mobile-search-box input {
            width: 100% !important;
            height: 100% !important;
            min-height: 42px !important;
            padding: 0 48px 0 18px !important;
            border: 0 !important;
            outline: 0 !important;
            border-radius: 14px !important;
            background: #494747 !important;
            color: var(--qmb-ink) !important;
            font-size: 13px !important;
        }

        .qmb-mobile-search-box button {
            position: absolute !important;
            right: 5px !important;
            top: 0px !important;
            width: 40px !important;
            height: 40px !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            border-radius: 12px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: linear-gradient(135deg,#262425,#0c0c0e) !important;
            color: #b7b5ba !important;
        }

    /* ---------- BACKDROP ---------- */
    .qmb-mobile-backdrop {
        position: fixed !important;
        top: 78px !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 103990 !important;
        background: rgba(90,67,92,.16) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: .28s ease !important;
    }

        .qmb-mobile-backdrop.open {
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important
        }

    /* ---------- DRAWER ---------- */
    nav.header-responsive .navbar-collapse {
        position: fixed !important;
        top: 84px !important;
        right: 7px !important;
        left: auto !important;
        width: min(430px,calc(100vw - 14px)) !important;
        height: calc(100vh - 92px) !important;
        max-height: calc(100vh - 92px) !important;
        margin: 0 !important;
        padding: 12px 9px 18px !important;
        display: block !important;
        overflow: hidden !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translate3d(30px,-8px,0) scale(.97) !important;
        transform-origin: top right !important;
        pointer-events: none !important;
        border-radius: 26px !important;
        border: 1px solid rgba(190,137,193,.28) !important;
        background: radial-gradient(circle at 95% 0%,rgba(226,203,250,.72),transparent 29%), radial-gradient(circle at 0% 70%,rgba(204,244,239,.65),transparent 30%), linear-gradient(145deg,#fff 0%,#fff5f9 50%,#f5efff 100%) !important;
        box-shadow: -18px 25px 55px rgba(67,42,67,.17) !important;
        transition: opacity .25s ease,transform .38s cubic-bezier(.16,1,.3,1),visibility .25s ease !important;
        z-index: 103999 !important;
    }

        nav.header-responsive .navbar-collapse.show {
            visibility: visible !important;
            opacity: 1 !important;
            transform: translate3d(0,0,0) scale(1) !important;
            pointer-events: auto !important;
        }

    /* scroll only the menu list */
    nav.header-responsive .navbar-nav.default {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 2px 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(160,117,180,.55) transparent !important;
    }

        nav.header-responsive .navbar-nav.default::-webkit-scrollbar {
            width: 4px !important
        }

        nav.header-responsive .navbar-nav.default::-webkit-scrollbar-thumb {
            background: linear-gradient(var(--qmb-lilac),var(--qmb-mint)) !important;
            border-radius: 20px !important
        }

        /* ---------- ALL MENU TEXT: DARK + LIGHT BACKGROUNDS ---------- */
        nav.header-responsive .navbar-nav.default li,
        nav.header-responsive .navbar-nav.default a {
            color: var(--qmb-ink) !important;
            text-shadow: none !important
        }

        nav.header-responsive .navbar-nav.default > li {
            width: 100% !important;
            margin: 0 0 8px !important;
            padding: 0 !important;
            list-style: none !important;
        }

            nav.header-responsive .navbar-nav.default > li > a,
            nav.header-responsive .navbar-nav.default > li.sub-menu > a {
                min-height: 52px !important;
                width: 100% !important;
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                padding: 0 16px !important;
                border-radius: 17px !important;
                border: 1px solid rgba(188,143,192,.22) !important;
                background: linear-gradient(135deg,#fff,#fff4f8 60%,#f5efff) !important;
                color: #302b35 !important;
                font-size: 14px !important;
                font-weight: 800 !important;
                text-decoration: none !important;
                box-shadow: 0 7px 18px rgba(89,58,89,.07) !important;
            }

            /* ---------- PRODUCTS: CLOSED BY DEFAULT, OPEN WITH qmb-open ---------- */
            nav.header-responsive .navbar-nav.default > li.sub-menu > .menu {
                display: none !important;
                margin: 8px 0 0 !important;
                padding: 7px !important;
                border-radius: 19px !important;
                border: 1px solid rgba(188,143,192,.18) !important;
                background: linear-gradient(145deg,#fff,#fff4f8,#f2edff) !important;
                box-shadow: inset 0 1px 0 #fff,0 8px 20px rgba(89,58,89,.06) !important;
            }

            nav.header-responsive .navbar-nav.default > li.sub-menu.qmb-open > .menu {
                display: block !important;
                animation: qmbOpen .32s cubic-bezier(.16,1,.3,1) both !important;
            }

    @keyframes qmbOpen {
        from {
            opacity: 0;
            transform: translateY(-7px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    /* arrow for main product button */
    nav.header-responsive .navbar-nav.default > li.sub-menu > a:after {
        content: "⌄" !important;
        width: 26px !important;
        height: 26px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg,#f1e7ff,#fff0f5) !important;
        color: #8b63bd !important;
        font-size: 16px !important;
    }

    nav.header-responsive .navbar-nav.default > li.sub-menu.qmb-open > a {
        border-color: rgba(180,120,184,.38) !important;
        box-shadow: 0 10px 24px rgba(124,75,124,.11) !important;
    }

        nav.header-responsive .navbar-nav.default > li.sub-menu.qmb-open > a:after {
            transform: rotate(180deg) !important
        }

    /* ---------- CATEGORY ROWS ---------- */
    nav.header-responsive .navbar-nav.default .menu-item {
        list-style: none !important;
        margin: 0 0 7px !important;
        padding: 0 !important;
    }

        nav.header-responsive .navbar-nav.default .menu-item > div {
            min-height: 48px !important;
            width: 100% !important;
            display: flex !important;
            align-items: center !important;
            border-radius: 15px !important;
            border: 1px solid rgba(183,142,190,.17) !important;
            background: rgba(255,255,255,.94) !important;
            box-shadow: 0 4px 13px rgba(84,55,84,.045) !important;
        }

            nav.header-responsive .navbar-nav.default .menu-item > div > a {
                flex: 1 !important;
                min-height: 47px !important;
                padding: 0 13px !important;
                display: flex !important;
                align-items: center !important;
                color: #332e37 !important;
                background: transparent !important;
                font-size: 13px !important;
                font-weight: 800 !important;
                text-decoration: none !important;
            }

    nav.header-responsive .navbar-nav.default .toggle-btn {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        margin-left: 4px !important;
        padding: 0 !important;
        border: 1px solid rgba(175,126,190,.16) !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg,#f5ecff,#fff0f5) !important;
        color: #8b67bb !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

        nav.header-responsive .navbar-nav.default .toggle-btn i {
            transition: transform .28s ease !important
        }

    nav.header-responsive .navbar-nav.default .menu-item.qmb-open .toggle-btn i {
        transform: rotate(180deg) !important
    }

    /* ---------- SUBMENUS: LIGHT, NOT DARK ---------- */
    nav.header-responsive .navbar-nav.default .menu-item > .submenu {
        display: none !important;
        margin: 7px 4px 0 !important;
        padding: 6px !important;
        list-style: none !important;
        border-right: 2px solid rgba(90,198,188,.65) !important;
        border-radius: 12px !important;
        background: linear-gradient(180deg,#effbf9,#f8f1ff) !important;
    }

    nav.header-responsive .navbar-nav.default .menu-item.qmb-open > .submenu,
    nav.header-responsive .navbar-nav.default .menu-item.qmb-open .submenu {
        display: block !important;
        animation: qmbSub .28s cubic-bezier(.16,1,.3,1) both !important;
    }

    @keyframes qmbSub {
        from {
            opacity: 0;
            transform: translateY(-5px)
        }

        to {
            opacity: 1;
            transform: translateY(0)
        }
    }

    nav.header-responsive .navbar-nav.default .submenu li {
        list-style: none !important;
        margin: 0 0 5px !important;
        padding: 0 !important;
    }

        nav.header-responsive .navbar-nav.default .submenu li > a {
            min-height: 41px !important;
            padding: 0 12px !important;
            display: flex !important;
            align-items: center !important;
            border-radius: 11px !important;
            color: #332e37 !important;
            background: rgba(255,255,255,.82) !important;
            border: 1px solid rgba(183,142,190,.12) !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            text-decoration: none !important;
        }

    nav.header-responsive .navbar-nav.default .submenu .submenu {
        margin-right: 7px !important;
        background: linear-gradient(180deg,#f2fcfa,#f6efff) !important;
    }

    /* remove every old dark menu background that may remain */
    nav.header-responsive .navbar-nav.default .menu,
    nav.header-responsive .navbar-nav.default .submenu,
    nav.header-responsive .navbar-nav.default .nav-link,
    nav.header-responsive .qmb-mobile-brands-item > a {
        background-color: transparent !important;
        color: #302b35 !important;
    }

    nav.header-responsive .navbar-nav.default > li.sub-menu > .menu {
        background: linear-gradient(145deg,#fff,#fff4f8,#f2edff) !important
    }

    nav.header-responsive .navbar-nav.default .menu-item > div {
        background: rgba(255,255,255,.94) !important
    }

    nav.header-responsive .navbar-nav.default .submenu {
        background: linear-gradient(180deg,#effbf9,#f8f1ff) !important
    }

    /* leaf links */
    nav.header-responsive .qmb-mobile-brands-item > a,
    nav.header-responsive .navbar-nav.default > li:not(.sub-menu) > a {
        background: linear-gradient(135deg,#d2caca,#fff4f8 60%,#f5efff) !important;
        color: #302b35 !important;
    }

    /* content starts below fixed header; search remains normal flow and scrolls away */
    body {
        padding-top: 78px !important
    }

    .wrapper.default {
        padding-top: 0 !important;
    }
}

@media(max-width:430px) {
    nav.header-responsive .qmb-mobile-actions {
        left: 7px !important;
        gap: 5px !important
    }

    nav.header-responsive .qmb-mobile-action {
        width: 41px !important;
        height: 41px !important;
        min-width: 41px !important
    }

    nav.header-responsive .navbar-toggler {
        right: 7px !important;
        width: 45px !important;
        height: 45px !important
    }

    nav.header-responsive .navbar-brand {
        width: 86px !important;
        height: 44px !important
    }

    .qmb-mobile-search-box {
        width: calc(100% - 14px) !important;
        margin: 10px 7px 12px !important
    }

    nav.header-responsive .navbar-collapse {
        top: 84px !important;
        right: 5px !important;
        width: calc(100vw - 10px) !important;
        height: calc(100vh - 94px) !important;
        max-height: calc(100vh - 94px) !important;
    }
}


/* =========================================================
   QMB SHOP - Desktop search restoration
   Keep the premium standalone search exclusively on mobile.
   Restore the original desktop search field without changing
   the mobile header/menu styling.
   ========================================================= */
@media (min-width: 1078px) {
    .qmb-mobile-search-box {
        display: none !important;
    }

    header.main-header .search-area {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

        header.main-header .search-area form.search {
            position: relative !important;
            display: flex !important;
            align-items: center !important;
            width: 100% !important;
            height: 44px !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: visible !important;
        }

            header.main-header .search-area form.search input {
                position: relative !important;
                display: block !important;
                box-sizing: border-box !important;
                width: 100% !important;
                height: 44px !important;
                min-width: 0 !important;
                margin: 0 !important;
                padding: 8px 60px 8px 14px !important;
                border: 1px solid #eee6f1 !important;
                border-radius: 13px !important;
                background: #aca9a9 !important;
                color: #302b35 !important;
                line-height: normal !important;
                text-align: right !important;
                direction: rtl !important;
                box-shadow: 0 4px 14px rgba(85, 54, 84, .06) !important;
                z-index: 1 !important;
            }

                header.main-header .search-area form.search input::placeholder {
                    color: #aaa0ae !important;
                    opacity: 1 !important;
                }

            header.main-header .search-area form.search button {
                position: absolute !important;
                top: 3px !important;
                right: 3px !important;
                left: auto !important;
                bottom: 3px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 46px !important;
                height: 38px !important;
                min-width: 46px !important;
                margin: 0 !important;
                padding: 0 !important;
                border: 0 !important;
                border-radius: 10px !important;
                background: linear-gradient(135deg, #2d2c2c, #49484b) !important;
                color: #1c1b1c !important;
                box-shadow: none !important;
                z-index: 2 !important;
            }

                header.main-header .search-area form.search button .style-icon-search {
                    display: inline-block !important;
                    position: static !important;
                    font-size: 16px !important;
                    line-height: 1 !important;
                    color: #5b595b !important;
                }
}

/* =========================================================
   QMB SHOP - Mobile search/content flow fix
   Search stays in normal document flow so it cannot overlap
   the slider or page content on any mobile width.
   ========================================================= */
@media (max-width: 1077px) {
    body {
        padding-top: 78px !important;
    }

    nav.header-responsive {
        height: 78px !important;
        min-height: 78px !important;
    }

    nav.header-responsive > .container {
        height: 78px !important;
        min-height: 78px !important;
    }

    .qmb-mobile-search-box {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        float: none !important;
        clear: both !important;
        box-sizing: border-box !important;
        display: block !important;
        width: calc(100% - 14px) !important;
        height: 54px !important;
        min-height: 54px !important;
        margin: 10px 7px 12px !important;
        transform: none !important;
    }

    .qmb-mobile-search-box form {
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    .wrapper.default {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .wrapper.default > header.main-header {
        display: none !important;
    }

    /* This replaces the old 125px content offset. The mobile search is
       already in normal flow, so an extra offset creates a large gap. */
    main.main,
    main.cart,
    main.page-404,
    main.cart-page,
    main.search-page,
    main.single-product,
    main.profile-user-page {
        margin-top: 0 !important;
    }
}

@media (max-width: 430px) {
    .qmb-mobile-search-box {
        width: calc(100% - 14px) !important;
        height: 53px !important;
        min-height: 53px !important;
        margin: 10px 7px 12px !important;
    }
}

@media (max-width: 360px) {
    .qmb-mobile-search-box {
        width: calc(100% - 20px) !important;
        margin-right: 10px !important;
        margin-left: 10px !important;
    }
}