/* =========================================================
   QMB SHOP - Premium Mobile Header / Menu
   Mobile only. Desktop layout is intentionally untouched.
   ========================================================= */

@media (max-width: 1077px) {
    :root {
        --qmb-pink: #f05a78;
        --qmb-pink-soft: #fff0f5;
        --qmb-lilac: #a875dc;
        --qmb-lilac-soft: #f4edff;
        --qmb-mint: #59c8bd;
        --qmb-mint-soft: #eafbf8;
        --qmb-ink: #292532;
        --qmb-muted: #77717d;
        --qmb-border: rgba(176, 128, 176, .20);
        --qmb-shadow: 0 16px 45px rgba(79, 48, 79, .14);
    }

    html {
        scroll-padding-top: 78px;
    }

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

    /* ---------- Premium fixed header ---------- */
    .header-responsive {
        display: block !important;
        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;
        z-index: 100000 !important;
        background: rgba(255,255,255,.94) !important;
        border: 0 !important;
        box-shadow: 0 8px 30px rgba(81, 52, 79, .10) !important;
        backdrop-filter: blur(18px) saturate(125%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(125%) !important;
    }

    .header-responsive::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: linear-gradient(90deg, var(--qmb-mint), #c49be9 48%, var(--qmb-pink));
        opacity: .9;
    }

    .header-responsive::after {
        content: "";
        position: absolute;
        left: 7%;
        right: 7%;
        bottom: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(170,119,170,.25), transparent);
    }

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

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

    /* Center logo */
    .header-responsive .navbar-brand {
        position: absolute !important;
        top: 14px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 92px !important;
        height: 46px !important;
        margin: 0 !important;
        padding: 4px 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.78) !important;
        border: 1px solid rgba(199,162,208,.18) !important;
        box-shadow: 0 7px 20px rgba(100,60,100,.07) !important;
        z-index: 3 !important;
    }

    .header-responsive .navbar-brand img {
        display: block !important;
        width: auto !important;
        max-width: 70px !important;
        height: 38px !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    /* Hamburger: right side, premium glass button */
    .header-responsive .navbar-toggler,
    .header-responsive .navbar-toggler.navbar-toggler-right {
        position: absolute !important;
        top: 13px !important;
        right: 8px !important;
        left: auto !important;
        width: 47px !important;
        height: 47px !important;
        min-width: 47px !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 5px !important;
        border: 1px solid rgba(189,129,193,.34) !important;
        border-radius: 17px !important;
        background: linear-gradient(145deg,#fff 0%,#fff2f7 52%,#f1eaff 100%) !important;
        box-shadow: 0 8px 22px rgba(130,77,125,.12), inset 0 1px 0 rgba(255,255,255,.95) !important;
        transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease !important;
        z-index: 4 !important;
    }

    .header-responsive .navbar-toggler:hover {
        transform: translateY(-2px) !important;
    }

    .header-responsive .navbar-toggler:focus {
        outline: none !important;
        box-shadow: 0 0 0 4px rgba(204,142,205,.14), 0 10px 25px rgba(130,77,125,.15) !important;
    }

    .header-responsive .navbar-toggler-bar {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        margin: 0 !important;
        border-radius: 99px !important;
        background: linear-gradient(90deg,var(--qmb-lilac),var(--qmb-pink)) !important;
        opacity: 1 !important;
        transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .22s ease, width .25s ease !important;
    }

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

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

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

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

    .header-responsive .qmb-mobile-action {
        position: relative !important;
        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 0%,#fff5f8 55%,#f6efff 100%) !important;
        border: 1px solid rgba(226,152,180,.34) !important;
        box-shadow: 0 7px 20px rgba(126,71,110,.09), inset 0 1px 0 rgba(255,255,255,.95) !important;
        transition: transform .25s ease, box-shadow .25s ease, color .25s ease !important;
    }

    .header-responsive .qmb-mobile-action:nth-child(2) {
        color: #bb6bb7 !important;
        border-color: rgba(187,107,183,.28) !important;
    }

    .header-responsive .qmb-mobile-action:nth-child(3) {
        color: #8f6dcc !important;
        border-color: rgba(143,109,204,.28) !important;
    }

    .header-responsive .qmb-mobile-action:active {
        transform: scale(.92) !important;
    }

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

    .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,#f05a78,#d7436a) !important;
        color: #fff !important;
        border: 2px solid #fff !important;
        font-size: 9px !important;
        font-weight: 900 !important;
        box-shadow: 0 3px 8px rgba(240,90,120,.25) !important;
    }

    /* ---------- Search: separate normal-flow row between header and slider ---------- */
    .qmb-mobile-search-box {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: calc(100% - 16px) !important;
        height: 54px !important;
        min-height: 54px !important;
        margin: 10px 8px 12px !important;
        padding: 5px !important;
        display: block !important;
        background: linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,247,251,.98)) !important;
        border: 1px solid rgba(196,151,201,.25) !important;
        border-radius: 19px !important;
        box-shadow: 0 9px 25px rgba(85,54,84,.09), inset 0 1px 0 #fff !important;
        z-index: 20 !important;
    }

    .qmb-mobile-search-box form {
        position: relative !important;
        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: none !important;
        border-radius: 14px !important;
        background: linear-gradient(90deg,#fff,#fffafd) !important;
        color: var(--qmb-ink) !important;
        font-family: IRANSans, iranyekan, Tahoma, sans-serif !important;
        font-size: 13px !important;
        box-shadow: none !important;
    }

    .qmb-mobile-search-box input::placeholder {
        color: #aaa3ad !important;
        opacity: 1 !important;
    }

    .qmb-mobile-search-box button {
        position: absolute !important;
        right: 5px !important;
        left: auto !important;
        top: 5px !important;
        bottom: 5px !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,#fff0f5,#f1e9ff) !important;
        color: #8c63d0 !important;
        box-shadow: inset 0 0 0 1px rgba(176,128,176,.12) !important;
    }

    .qmb-mobile-search-box button .style-icon-search {
        font-size: 17px !important;
    }

    /* The search bar is a separate normal-flow layer, never part of the logo/actions box. */
    .qmb-mobile-search-box::before {
        content: "" !important;
        position: absolute !important;
        inset: -6px -2px !important;
        z-index: -1 !important;
        border-radius: 22px !important;
        background: linear-gradient(90deg, rgba(239,226,250,.52), rgba(255,239,246,.60), rgba(224,248,245,.52)) !important;
        filter: blur(7px) !important;
        opacity: .75 !important;
    }

    /* ---------- Drawer / backdrop ---------- */
    .qmb-mobile-backdrop {
        position: fixed !important;
        top: 78px !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 99990 !important;
        background: rgba(47,32,48,.22) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity .32s ease, visibility .32s ease !important;
    }

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

    .header-responsive .navbar-collapse {
        position: fixed !important;
        top: 86px !important;
        right: 7px !important;
        left: auto !important;
        width: min(430px, calc(100vw - 14px)) !important;
        height: calc(100vh - 96px) !important;
        max-height: calc(100vh - 96px) !important;
        margin: 0 !important;
        padding: 13px 9px 18px !important;
        display: block !important;
        overflow: hidden !important;
        visibility: hidden !important;
        opacity: 0 !important;
        transform: translate3d(30px, -10px, 0) scale(.97) !important;
        transform-origin: top right !important;
        pointer-events: none !important;
        border-radius: 28px !important;
        border: 1px solid rgba(190,137,193,.30) !important;
        background:
            radial-gradient(circle at 95% 0%, rgba(224,198,255,.65), transparent 28%),
            radial-gradient(circle at 0% 58%, rgba(199,245,239,.50), transparent 31%),
            linear-gradient(145deg,#fff 0%,#fff5f8 48%,#f5efff 100%) !important;
        box-shadow: -18px 25px 55px rgba(67,42,67,.20), inset 0 1px 0 rgba(255,255,255,.95) !important;
        transition: opacity .28s ease, transform .38s cubic-bezier(.16,1,.3,1), visibility .28s ease !important;
        z-index: 99999 !important;
    }

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

    .header-responsive .navbar-collapse::before {
        content: "QMB SHOP  •  MENU";
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 39px !important;
        margin: 0 2px 9px !important;
        border-radius: 15px !important;
        color: #51465a !important;
        font-size: 10px !important;
        font-weight: 900 !important;
        letter-spacing: 2px !important;
        background: linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,239,247,.82),rgba(239,232,255,.82)) !important;
        border: 1px solid rgba(190,137,193,.18) !important;
    }

    .header-responsive .navbar-collapse > .navbar-nav {
        height: calc(100% - 48px) !important;
        margin: 0 !important;
        padding: 0 2px 20px !important;
        display: block !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        scrollbar-width: thin !important;
        scrollbar-color: rgba(171,119,178,.55) transparent !important;
    }

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

    .header-responsive .navbar-collapse > .navbar-nav::-webkit-scrollbar-thumb {
        border-radius: 20px !important;
        background: linear-gradient(#c18bdd,#70cfc2) !important;
    }

    /* Hide old duplicate logo inside drawer */
    .header-responsive .logo-nav-res {
        display: none !important;
    }

    /* ---------- Main menu cards ---------- */
    .header-responsive .navbar-nav > li {
        list-style: none !important;
        margin: 0 0 9px !important;
        padding: 0 !important;
    }

    .header-responsive .navbar-nav > li > a,
    .header-responsive .navbar-nav > li.sub-menu > a {
        position: relative !important;
        min-height: 52px !important;
        padding: 0 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-radius: 17px !important;
        border: 1px solid rgba(188,143,192,.20) !important;
        background: linear-gradient(135deg,#ffffff 0%,#fff6fa 62%,#f6f0ff 100%) !important;
        color: var(--qmb-ink) !important;
        font-family: IRANSans, iranyekan, Tahoma, sans-serif !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
        box-shadow: 0 7px 18px rgba(89,58,89,.07), inset 0 1px 0 #fff !important;
        transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
    }

    .header-responsive .navbar-nav > li > a:active,
    .header-responsive .navbar-nav > li.sub-menu > a:active {
        transform: scale(.985) !important;
    }

    .header-responsive .navbar-nav > li.sub-menu > a::after {
        content: "⌄" !important;
        width: 25px !important;
        height: 25px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        color: #9367bf !important;
        background: linear-gradient(135deg,#f4eaff,#fff0f6) !important;
        border: 1px solid rgba(170,126,190,.16) !important;
        font-size: 16px !important;
        line-height: 1 !important;
        transition: transform .3s ease !important;
    }

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

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

    /* Main category list is closed by default */
    .header-responsive .navbar-nav > 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,rgba(255,255,255,.94),rgba(255,242,248,.92),rgba(242,237,255,.92)) !important;
        box-shadow: inset 0 1px 0 #fff, 0 8px 20px rgba(89,58,89,.06) !important;
    }

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

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

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

    .header-responsive .navbar-nav .menu-item:last-child {
        margin-bottom: 0 !important;
    }

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

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

    .header-responsive .navbar-nav .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;
        box-shadow: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

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

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

    /* Nested categories */
    .header-responsive .navbar-nav .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,rgba(237,252,250,.92),rgba(249,243,255,.90)) !important;
    }

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

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

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

    .header-responsive .navbar-nav .submenu li:last-child {
        margin-bottom: 0 !important;
    }

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

    /* Other menu links */
    .header-responsive .qmb-mobile-brands-item > a {
        background: linear-gradient(135deg,#fff 0%,#fff0f6 58%,#f0eaff 100%) !important;
    }

    .header-responsive .qmb-mobile-brands-item > a::before,
    .header-responsive .navbar-nav > li:not(.sub-menu) > a::before {
        content: "" !important;
        width: 5px !important;
        height: 5px !important;
        margin-left: 9px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg,var(--qmb-pink),var(--qmb-lilac)) !important;
        box-shadow: 0 0 0 4px rgba(200,139,195,.09) !important;
    }

    /* Remove old Bootstrap dark/nav effects */
    .header-responsive .navbar-nav,
    .header-responsive .navbar-nav li,
    .header-responsive .navbar-nav a,
    .header-responsive .navbar-nav .menu,
    .header-responsive .navbar-nav .submenu,
    .header-responsive .navbar-collapse,
    .header-responsive .navbar-collapse.show {
        color: var(--qmb-ink) !important;
        text-shadow: none !important;
    }

    .header-responsive .navbar-nav a:hover,
    .header-responsive .navbar-nav a:focus {
        color: #302b34 !important;
    }

    /* Mobile content starts below the fixed top header. Search stays in normal flow
       so it scrolls away naturally with the page instead of remaining fixed. */
    body {
        padding-top: 78px !important;
    }

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

@media (max-width: 430px) {
    .header-responsive,
    .header-responsive > .container {
        height: 78px !important;
        min-height: 78px !important;
    }

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

    .header-responsive .qmb-mobile-actions {
        left: 7px !important;
        top: 13px !important;
        gap: 5px !important;
    }

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

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

    .qmb-mobile-search-box {
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: calc(100% - 14px) !important;
        height: 53px !important;
        min-height: 53px !important;
        margin: 45px 7px 12px !important;
        border-radius: 18px !important;
    }

    .qmb-mobile-search-box button {
        width: 39px !important;
        height: 39px !important;
    }

    .qmb-mobile-backdrop {
        top: 78px !important;
    }

    .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;
        border-radius: 25px !important;
    }

    body {
        padding-top: 78px !important;
    }
}