/* ==========================================================================
   Qemmah — Premium global layer
   Loaded by the customer layouts (master, masterLogout).
   Holds the shared design tokens, the sweep-shine CTA effect and the
   crystal-glass header. Page-specific styling lives in its own file
   (e.g. home-premium.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Arabic typeface: "The Year of Handicrafts" (Saudi Ministry of Culture, 2025)
   Registered under the existing "dinNext" family, limited to the Arabic ranges:
   every rule that already uses dinNext now draws Arabic in this face, while
   Latin text (which the face barely covers) keeps DIN Next. Only the two
   weights dinNext defines (400, bold) are mapped, so weight matching for
   Latin text is unchanged. Files are Arabic-only subsets converted to WOFF2.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: dinNext;
    src: url("../fonts/handicrafts/TheYearofHandicrafts-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC;
}

@font-face {
    font-family: dinNext;
    src: url("../fonts/handicrafts/TheYearofHandicrafts-Bold.woff2") format("woff2");
    font-weight: bold;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC;
}

:root {
    --qm-gold-1: #f6e3c8;
    --qm-gold-2: #e2c19c;
    --qm-gold-3: #c79a72;
    --qm-gold-4: #a1785c;
    --qm-brown: #6b3e2e;
    --qm-brown-deep: #3a2219;
    --qm-ink: #1a1210;
    --qm-ease: cubic-bezier(.22, .8, .24, 1);
    --qm-gloss-gold: linear-gradient(180deg, #ecd0ad 0%, #cfa47b 42%, #a1785c 56%, #7d5238 100%);

    /* Warm page tones: light tints of the brand brown (#a1785c) instead of white.
       Cards, menus and inputs stay white so they lift off the page. */
    --qm-page-bg: #f8f1ea;
    --qm-page-bg-2: #f4ebe1;
    --qm-strip-bg: #f3e8dd;

    /* Crystal glass */
    --qm-crystal-blur: blur(22px) saturate(1.9) brightness(1.04);
    --qm-crystal-fill: linear-gradient(135deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .46) 48%, rgba(255, 255, 255, .66) 100%);
    --qm-crystal-edge: inset 0 1px 0 rgba(255, 255, 255, 1),
                       inset 0 -1px 0 rgba(255, 255, 255, .5),
                       inset 0 0 0 1px rgba(255, 255, 255, .4);
    --qm-crystal-rim: 0 0 0 1px rgba(161, 120, 92, .14);
    --qm-crystal-drop: 0 10px 28px -16px rgba(58, 34, 25, .42);
    --qm-crystal-rim-hover: 0 0 0 1px rgba(199, 154, 114, .55), 0 0 18px -4px rgba(226, 193, 156, .7);
}

/* --------------------------------------------------------------------------
   Page background
   -------------------------------------------------------------------------- */

body {
    background-color: var(--qm-page-bg) !important;
}

/* --------------------------------------------------------------------------
   Sweep shine — add .qm-shine to any CTA
   -------------------------------------------------------------------------- */

.qm-shine {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.qm-shine::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .15) 30%,
        rgba(255, 255, 255, .75) 50%,
        rgba(255, 255, 255, .15) 70%,
        rgba(255, 255, 255, 0) 100%);
    transform: translateX(-180%) skewX(-22deg);
    animation: qm-sweep 3.8s cubic-bezier(.45, 0, .2, 1) infinite;
    pointer-events: none;
    z-index: 1;
}

.qm-shine:hover::after,
.qm-shine:focus-visible::after {
    animation: qm-sweep-fast .9s cubic-bezier(.45, 0, .2, 1) infinite;
}

@keyframes qm-sweep {
    0%        { transform: translateX(-180%) skewX(-22deg); }
    45%, 100% { transform: translateX(340%) skewX(-22deg); }
}

@keyframes qm-sweep-fast {
    0%   { transform: translateX(-180%) skewX(-22deg); }
    100% { transform: translateX(340%) skewX(-22deg); }
}

/* --------------------------------------------------------------------------
   Glossy buttons
   -------------------------------------------------------------------------- */

.qm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 30px;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .35s var(--qm-ease), box-shadow .35s var(--qm-ease), filter .35s;
}

.qm-btn:hover { transform: translateY(-2px); }
.qm-btn:active { transform: translateY(0) scale(.98); }
.qm-btn:focus-visible { outline: 2px solid var(--qm-gold-2); outline-offset: 3px; }

.qm-btn--gold {
    color: #fff !important;
    background: var(--qm-gloss-gold) !important;
    text-shadow: 0 1px 1px rgba(58, 34, 25, .35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .65),
        inset 0 -3px 8px rgba(58, 34, 25, .28),
        0 10px 24px -10px rgba(107, 62, 46, .7);
}

.qm-btn--gold:hover {
    filter: brightness(1.06) saturate(1.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .75),
        inset 0 -3px 8px rgba(58, 34, 25, .25),
        0 16px 34px -12px rgba(107, 62, 46, .8);
}

.qm-btn--glass {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 30px -14px rgba(0, 0, 0, .6);
}

.qm-btn--glass:hover { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1)); }

/* Gold-foil logo: the logo PNG masks a moving gold gradient.
   Usage: <span class="qm-logo-foil" style="{{ brand_logo_mask_style() }}"></span>
   (or set --qm-logo, plus --qm-logo-ratio when it isn't the 2084/863 logo.png) */
.qm-logo-foil {
    display: block;
    aspect-ratio: var(--qm-logo-ratio, 2084 / 863);
    background: linear-gradient(100deg, #c79a72 0%, #f6e3c8 30%, #fffaf2 42%, #e2c19c 55%, #a1785c 80%, #e2c19c 100%);
    background-size: 250% 100%;
    -webkit-mask: var(--qm-logo) center / contain no-repeat;
    mask: var(--qm-logo) center / contain no-repeat;
    animation: qm-gold-flow 5s linear infinite;
}

@keyframes qm-gold-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
}

/* --------------------------------------------------------------------------
   Header — sticky crystal glass
   -------------------------------------------------------------------------- */

header {
    position: sticky;
    top: 0;
    z-index: 1030;
    isolation: isolate;
    background:
        radial-gradient(700px 160px at 12% 0%, rgba(226, 193, 156, .22), transparent 70%),
        radial-gradient(600px 160px at 88% 100%, rgba(173, 196, 230, .12), transparent 70%),
        linear-gradient(180deg, rgba(250, 244, 237, .82) 0%, rgba(246, 237, 228, .66) 100%);
    backdrop-filter: var(--qm-crystal-blur);
    -webkit-backdrop-filter: var(--qm-crystal-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .6);
    transition: box-shadow .45s var(--qm-ease);
}

/* crystal glint: a soft band of light that glides across the glass */
header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .7) 48%, rgba(255, 255, 255, .15) 52%, transparent 62%);
    background-size: 260% 100%;
    background-position: 130% 0;
    animation: qm-glint 9s var(--qm-ease) infinite;
    pointer-events: none;
}

@keyframes qm-glint {
    0%, 55% { background-position: 130% 0; }
    100%    { background-position: -130% 0; }
}

/* gold hairline under the whole header */
header::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(199, 154, 114, .55) 20%, var(--qm-gold-4) 50%, rgba(199, 154, 114, .55) 80%, transparent 100%);
    pointer-events: none;
}

header.qm-scrolled {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 0 rgba(255, 255, 255, .6),
        0 18px 40px -24px rgba(58, 34, 25, .45);
}

header .upper_header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* the artwork is transparent between the motifs; a light tint of the brand
       brown (#a1785c) replaces the plain white behind them */
    background-color: var(--qm-strip-bg);
    transition: height .45s var(--qm-ease), margin .45s var(--qm-ease), opacity .3s;
}

/* ----- Glossy pattern strip -----
   Two layers, both masked by the strip's own artwork so only the motifs are
   painted: a tint (the default brown strip becomes glossy gold) and a gloss
   (top highlight, soft lower shade, and an occasional light sweep).
   Country strips set --qm-strip to their artwork and --qm-strip-tint: none in
   the layout, so they keep their flag colours and only get the gloss.
   :where() keeps these defaults at zero specificity so the layout wins. */
:where(.upper_header) {
    --qm-strip: url("../images/headers/upperheader.svg");
    /* the artwork has a thin rule at 0–4.2px and the motifs from ~10px to 40px,
       so each gets its own run of the gradient */
    --qm-strip-tint: linear-gradient(180deg,
        #d2a77e 0, #9a6c4d 4.2px,
        #f2dcbc 10px, #d8b088 20px, #b08566 27px, #8a5d40 34px, #6b3e2e 40px);
}

header .upper_header::before,
header .upper_header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask: var(--qm-strip) 0 0 / auto 40px repeat-x;
    mask: var(--qm-strip) 0 0 / auto 40px repeat-x;
}

header .upper_header::before {
    z-index: 0;
    background: var(--qm-strip-tint);
}

header .upper_header::after {
    z-index: 1;
    background:
        linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .75) 50%, transparent 58%) 130% 0 / 260% 100% no-repeat,
        linear-gradient(180deg,
            rgba(255, 255, 255, .3) 0, rgba(255, 255, 255, 0) 3px, rgba(0, 0, 0, .08) 4.2px,
            rgba(255, 255, 255, .6) 10px, rgba(255, 255, 255, .18) 19px, rgba(255, 255, 255, 0) 25px,
            rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, .16) 40px);
    animation: qm-strip-sweep 7s var(--qm-ease) infinite;
}

@keyframes qm-strip-sweep {
    0%, 60% { background-position: 130% 0, 0 0; }
    100%    { background-position: -130% 0, 0 0; }
}

header.qm-scrolled .upper_header {
    height: 0 !important;
    margin-top: 0 !important;
    opacity: 0;
}

header .middle_header {
    /* above the category nav, so the tool dropdowns open over it */
    position: relative;
    z-index: 5;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .75) !important;
    box-shadow: 0 1px 0 rgba(161, 120, 92, .1);
    transition: min-height .45s var(--qm-ease);
}

header.qm-scrolled .middle_header { min-height: 78px !important; }

header .logo {
    transition: width .45s var(--qm-ease), transform .45s var(--qm-ease), filter .45s;
}

header a:hover > .logo { transform: scale(1.03); }

@media (min-width: 992px) {
    header.qm-scrolled .middle_header .logo { width: 108px !important; }
}

@media (max-width: 991px) {
    header.qm-scrolled .middle_header .logo { width: 84px !important; }
}

/* ----- Search: crystal pill ----- */

header .search_wrapper .search {
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .9) !important;
    border-radius: 999px !important;
    /* the icon sits on the physical right in both languages */
    padding-right: 46px !important;
    padding-left: 20px !important;
    background: var(--qm-crystal-fill);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--qm-crystal-edge), var(--qm-crystal-rim), var(--qm-crystal-drop);
    color: var(--qm-ink);
    transition: box-shadow .3s, background .3s, border-radius .2s;
}

header .search_wrapper .search:hover {
    box-shadow: var(--qm-crystal-edge), var(--qm-crystal-rim-hover), var(--qm-crystal-drop);
}

header .search_wrapper .search:focus {
    background: rgba(255, 255, 255, .95);
    border-radius: 24px 24px 0 0 !important;
    box-shadow: var(--qm-crystal-edge), 0 0 0 1px rgba(199, 154, 114, .6), 0 0 0 5px rgba(226, 193, 156, .22), 0 14px 30px -18px rgba(107, 62, 46, .5) !important;
}

header .search_wrapper .results {
    border-radius: 0 0 20px 20px;
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: var(--qm-crystal-blur);
    -webkit-backdrop-filter: var(--qm-crystal-blur);
}

/* plain line search icon inside the pill (matches the header tools) */
header .search_holder .search_icon svg {
    top: 50% !important;
    transform: translateY(-50%);
    right: 16px;
    width: 20px;
    height: 20px;
    padding: 0 !important;
    color: #2b1a14;
    pointer-events: none;
    transition: color .25s;
}

header .search_holder:hover .search_icon svg,
header .search_holder:focus-within .search_icon svg { color: var(--qm-gold-4); }

/* ----- Header tools: icon-only
   [cart · favourites · chat · bell] | [currency sign · flag · account] ----- */

@media (min-width: 992px) {
    header .middle_header > .row > div:last-child { gap: 2px; }

    header .middle_header > .row > div:last-child .item.item_margin {
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }

    header .middle_header > .row > div:last-child .item.item_margin .item_inside_margin { margin: 0 !important; }

    /* Bootstrap's caret isn't used — the icons stand alone */
    header .middle_header > .row > div:last-child .dropdown-toggle::after { display: none !important; }

    header .qm-tool {
        position: relative;
        display: flex !important; /* the account item isn't d-lg-flex like the others */
        align-items: center;
        width: 42px;
        height: 42px;
        justify-content: center;
        color: #2b1a14;
        transition: color .25s;
    }

    header .qm-tool .item_inside_margin,
    header .qm-tool .dial,
    header .qm-tool .qm-pref__btn,
    header .qm-tool .qm-account__btn,
    header .qm-tool .user {
        display: grid !important;
        place-items: center;
        width: 100%;
        height: 100%;
        padding: 0 !important;
        color: inherit;
        cursor: pointer;
    }

    /* custom.css gives every .dropdown an empty ::before; inside the centring
       grid it takes the first row and pushes the account icon down */
    header .qm-tool .dropdown::before,
    header .qm-tool.dropdown::before { display: none !important; }

    header .qm-tool .qm-icon,
    header .qm-tool .qm-currency-sign {
        transition: transform .3s var(--qm-ease), color .25s;
    }

    header .qm-tool:hover { color: var(--qm-gold-4); }
    header .qm-tool:hover .qm-icon,
    header .qm-tool:hover .qm-currency-sign { transform: translateY(-2px); }

    /* a small gold dot marks the open menu */
    header .qm-tool::after {
        content: "";
        position: absolute;
        bottom: 2px;
        left: 50%;
        width: 4px;
        height: 4px;
        margin-left: -2px;
        border-radius: 50%;
        background: var(--qm-gold-3);
        opacity: 0;
        transform: scale(0);
        transition: opacity .2s, transform .25s var(--qm-ease);
    }

    header .qm-tool:has([aria-expanded="true"])::after { opacity: 1; transform: scale(1); }

    /* badges sit on the icon's top corner */
    header .qm-tool .counter-data-big {
        top: 3px !important;
        left: auto !important;
        right: 1px !important;
    }

    /* hairline between actions and preferences */
    header .qm-tools-divider {
        width: 1px;
        height: 22px;
        margin: 0 8px;
        background: linear-gradient(180deg, transparent, rgba(161, 120, 92, .5), transparent);
    }
}

/* language switch: the target language's code */
header .qm-lang__link {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1;
    padding-top: 2px; /* dinNext sits high */
    color: inherit !important;
    text-decoration: none;
    transition: transform .3s var(--qm-ease);
}

header .qm-tool:hover .qm-lang__link { transform: translateY(-2px); }

/* mobile header: the "EN / AR" switch is a 16×20 link — give it a proper tap area */
@media (max-width: 991px) {
    header .middle_header .language a {
        display: inline-grid;
        place-items: center;
        min-width: 40px;
        min-height: 40px;
        margin: 0 !important;
    }
}

/* currency sign next to prices, anywhere: sized to the surrounding text */
.qm-currency-sign {
    display: inline-block;
    height: .82em;
    width: auto;
    vertical-align: -0.06em;
    margin-inline: .18em;
}

.qm-currency-sign--text {
    height: auto;
    font-size: .78em;
    font-weight: 700;
    vertical-align: baseline;
}

/* currency sign (SVG or text) in the header */
header .qm-currency-sign {
    margin-inline: 0;
    display: block;
    height: 19px;
    width: auto;
}

header .qm-currency-sign--text {
    height: auto;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    padding-top: 2px; /* dinNext sits high */
}

/* preference menus */
header .qm-pref__menu { min-width: 240px; }

header .qm-pref__menu-title {
    padding: 6px 12px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #9a8a82;
}

header .qm-pref__menu .dropdown-item {
    gap: 12px;
    padding: 9px 12px !important;
}

/* an older rule pads every span inside dropdown items; the sign needs none */
header .qm-pref__sign,
header .qm-pref__sign * { padding: 0 !important; }

header .qm-pref__sign {
    display: inline-grid;
    place-items: center;
    width: 26px;
    flex: 0 0 auto;
    color: var(--qm-gold-4);
}

header .qm-pref__sign .qm-currency-sign { height: 17px; }
header .qm-pref__sign .qm-currency-sign--text { font-size: 12.5px; height: auto; }

header .qm-pref__name {
    flex: 1 1 auto;
    padding: 0 !important;
    font-size: 14px;
    font-weight: 700;
    color: #3a2219;
}

header .qm-pref__code {
    padding: 0 !important;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #b3a39b;
}

header .qm-pref__menu .dropdown-item.is-active {
    background: linear-gradient(180deg, #fbf6f1, #f4eadf);
}

header .qm-pref__menu .dropdown-item.is-active .qm-pref__code { color: var(--qm-gold-4); }

header .qm-pref__menu .dropdown-item.is-active .qm-pref__code::after {
    content: "\f00c"; /* Font Awesome check */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-inline-start: 6px;
}

/* counters → glossy jewel badges */
header .counter-data-big,
header .counter-data {
    min-width: 18px;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    align-items: center;
    font-size: 10.5px !important;
    line-height: 1;
    background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 50%),
        linear-gradient(180deg, #ff6b6b 0%, #e63946 55%, #c1121f 100%) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .95), 0 4px 10px -3px rgba(193, 18, 31, .6);
}

/* ----- Dropdowns (currency, user, notifications): crystal panels ----- */

/* Solid, not see-through: a frosted blur can't work nested inside the frosted
   header, so a translucent panel would let the nav text show behind its items. */
header .dropdown-menu:not(.megamenu) {
    margin-top: 8px !important;
    border: 1px solid rgba(161, 120, 92, .14);
    border-radius: 18px;
    padding: 8px;
    background: #fffdfb;
    box-shadow: inset 0 1px 0 #fff, 0 28px 56px -26px rgba(58, 34, 25, .5);
}

header .dropdown-menu:not(.megamenu) .dropdown-item {
    border-radius: 12px;
    transition: background .2s, color .2s, box-shadow .2s;
}

header .dropdown-menu:not(.megamenu) .dropdown-item:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(246, 227, 200, .45));
    box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(199, 154, 114, .3);
    color: var(--qm-brown);
}

/* ----- Category nav ----- */

header nav.header_resp {
    border-bottom: 0 !important;
}

@media (min-width: 992px) {
    /* nav and its row share one exact height, so the mega menu (top: 100%)
       opens flush against the row with no hover dead-zone in between */
    header nav.header_resp {
        height: 58px !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    header nav.header_resp > .container {
        height: 58px !important;
        padding-block: 0 !important;
        padding-inline: 0;
        gap: 20px;
    }

    /* The category row: one line, evenly spread. Categories that don't fit are
       moved under a "More" menu by the header script; until it runs the row is
       clipped so nothing spills. position:static lets the mega menus anchor to
       the full-width <nav>. */
    header nav.header_resp ul.qm-nav {
        position: static !important;
        flex: 1 1 auto;
        min-width: 0;
        height: 58px !important;
        padding: 0 !important;
        margin: 0;
        justify-content: space-between !important;
        gap: 0;
        overflow: hidden;
    }

    header nav.header_resp ul.qm-nav.qm-nav--ready { overflow: visible; }

    header nav.header_resp ul.qm-nav > li.qm-nav-hidden { display: none !important; }

    header nav.header_resp ul.qm-nav > li {
        padding: 0 !important;
        flex: 0 0 auto;
    }

    header nav.header_resp ul.qm-nav > li > .navigator {
        position: relative;
        display: flex;
        align-items: center;
        gap: 4px;
        height: 100%;
        padding: 0 3px !important;
        font-size: 14.5px;
        font-weight: 700 !important;
        white-space: nowrap;
        color: #3a2219;
        transition: color .25s;
    }

    /* small caret on categories that open a mega menu */
    header nav.header_resp .qm-nav-caret {
        font-size: 9px;
        opacity: .45;
        transition: transform .3s var(--qm-ease), opacity .25s;
    }

    /* gold bar flush with the bottom edge of the row */
    header nav.header_resp ul.qm-nav > li > .navigator::after {
        content: "";
        position: absolute;
        inset-inline: 3px;
        bottom: 0;
        height: 3px;
        border-radius: 3px 3px 0 0;
        background: var(--qm-gloss-gold);
        box-shadow: 0 -2px 10px rgba(199, 154, 114, .45);
        transform: scaleX(0);
        transition: transform .35s var(--qm-ease);
    }

    header nav.header_resp ul.qm-nav > li:hover > a.navigator,
    header nav.header_resp ul.qm-nav > li:focus-within > a.navigator,
    header nav.header_resp ul.qm-nav > li > .navigator.is-active {
        color: var(--qm-brown);
    }

    header nav.header_resp ul.qm-nav > li:hover > a.navigator::after,
    header nav.header_resp ul.qm-nav > li:focus-within > a.navigator::after,
    header nav.header_resp ul.qm-nav > li > .navigator.is-active::after {
        transform: scaleX(1);
    }

    header nav.header_resp ul.qm-nav > li:hover .qm-nav-caret,
    header nav.header_resp ul.qm-nav > li:focus-within .qm-nav-caret {
        opacity: .9;
        transform: rotate(180deg);
    }

    /* the country picker, set apart by a hairline divider */
    header nav.header_resp ul.qm-nav + ul,
    header nav.header_resp ul.qm-nav ~ ul.me-auto {
        position: relative;
        flex: 0 0 auto;
        margin: 0 !important;
        padding: 0 !important;
        padding-inline-start: 20px !important;
    }

    header nav.header_resp ul.qm-nav ~ ul.me-auto::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        top: 50%;
        height: 26px;
        width: 1px;
        transform: translateY(-50%);
        background: linear-gradient(180deg, transparent, rgba(161, 120, 92, .45), transparent);
    }

    /* ----- "More" menu for categories that don't fit ----- */

    header nav.header_resp ul.qm-nav > li.qm-nav-more { position: relative; }

    /* Bootstrap's d-flex (display:flex !important) would otherwise beat [hidden] */
    header nav.header_resp ul.qm-nav > li.qm-nav-more[hidden] { display: none !important; }

    header nav.header_resp .qm-nav-more__btn {
        background: none;
        border: 0;
        font-family: inherit;
        cursor: pointer;
    }

    header nav.header_resp .qm-nav-more.has-active > .navigator::after { transform: scaleX(1); }

    header nav.header_resp .qm-nav-more__panel {
        position: absolute;
        top: 100%;
        inset-inline-end: 0;
        z-index: 5;
        min-width: 240px;
        padding: 10px;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        border: 1px solid rgba(161, 120, 92, .12);
        border-top: 0;
        border-radius: 0 0 18px 18px;
        background: #fffdfb;
        box-shadow: 0 26px 50px -26px rgba(58, 34, 25, .45);
        transition: opacity .2s ease .12s, transform .25s var(--qm-ease) .12s, visibility 0s linear .32s;
    }

    header nav.header_resp .qm-nav-more__panel::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--qm-gold-3), transparent);
    }

    header nav.header_resp .qm-nav-more:hover > .qm-nav-more__panel,
    header nav.header_resp .qm-nav-more:focus-within > .qm-nav-more__panel {
        visibility: visible;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        transition: opacity .22s ease, transform .3s var(--qm-ease), visibility 0s;
    }

    header nav.header_resp .qm-nav-more__panel li { padding: 0 !important; font-size: inherit; }

    header nav.header_resp .qm-nav-more__panel a {
        display: block;
        padding: 9px 14px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        color: #3a2219;
        transition: background .2s, color .2s;
    }

    header nav.header_resp .qm-nav-more__panel a:hover,
    header nav.header_resp .qm-nav-more__panel a.is-active {
        background: linear-gradient(180deg, #fbf6f1, #f4eadf);
        color: var(--qm-brown);
    }

    /* ----- Mega menu: solid panel that slides in under the row ----- */

    header .dropdown .megamenu {
        top: 100% !important;
        left: 0;
        right: 0;
        width: 100% !important;
        margin: 0 !important;
        padding: 26px 28px 30px !important;
        max-height: min(70vh, 560px);
        overflow-y: auto;
        display: block;
        visibility: hidden;
        opacity: 0 !important;
        transform: translateY(-8px) !important;
        pointer-events: none;
        border: 1px solid rgba(161, 120, 92, .12) !important;
        border-top: 0 !important;
        border-radius: 0 0 22px 22px !important;
        background: #fffdfb !important;
        box-shadow: 0 30px 60px -30px rgba(58, 34, 25, .45), 0 2px 0 rgba(255, 255, 255, .9) inset !important;
        /* closing waits a beat so a diagonal mouse path doesn't drop the menu */
        transition: opacity .2s ease .12s, transform .25s var(--qm-ease) .12s, visibility 0s linear .32s !important;
        scrollbar-width: thin;
    }

    header .dropdown:hover > .megamenu,
    header .dropdown:focus-within > .megamenu {
        visibility: visible;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto;
        transition: opacity .22s ease, transform .3s var(--qm-ease), visibility 0s !important;
    }

    /* gold hairline on the panel's top edge */
    header .dropdown .megamenu::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--qm-gold-3) 30%, var(--qm-gold-2) 50%, var(--qm-gold-3) 70%, transparent);
    }

    header .megamenu > .row { row-gap: 22px; }

    header .megamenu .mega_part {
        padding: 0 22px !important;
        border-left: 0 !important;
        border-inline-start: 1px solid rgba(161, 120, 92, .12);
    }

    header .megamenu .mega_part:first-child { border-inline-start: 0; }

    /* column heading */
    header .megamenu .mega_part > a {
        position: relative;
        display: inline-block;
        padding-bottom: 10px;
        margin-bottom: 12px;
        font-size: 15.5px !important;
        font-weight: 800 !important;
        color: var(--qm-ink) !important;
        transition: color .25s;
    }

    header .megamenu .mega_part > a::after {
        content: "";
        position: absolute;
        bottom: 0;
        inset-inline-start: 0;
        width: 26px;
        height: 2px;
        border-radius: 2px;
        background: var(--qm-gloss-gold);
        transition: width .35s var(--qm-ease);
    }

    header .megamenu .mega_part > a:hover { color: var(--qm-brown) !important; }
    header .megamenu .mega_part > a:hover::after { width: 100%; }

    /* sub-links */
    header .megamenu .mega_part li { padding: 3px 0 !important; }

    header .megamenu .mega_part li a {
        display: inline-block;
        font-size: 13.5px !important;
        font-weight: 500;
        color: #6b5a52 !important;
        transition: color .2s, transform .25s var(--qm-ease);
    }

    header .megamenu .mega_part li a:hover {
        color: var(--qm-brown) !important;
        transform: translateX(-3px);
    }
}

@media (min-width: 1400px) and (max-width: 1599px) {
    header nav.header_resp ul.qm-nav > li > .navigator { font-size: 14px; }
}

@media (min-width: 992px) and (max-width: 1399px) {
    header nav.header_resp ul.qm-nav > li > .navigator { font-size: 13.5px; padding: 0 3px !important; }
    header nav.header_resp .qm-nav-caret { display: none; }
}

/* ----- Country picker: flag + name, no chrome (matches the icon-only tools) ----- */

header .qm-country::before { display: none !important; } /* custom.css gives every .dropdown an empty ::before */

header .qm-country__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 4px;
    border: 0;
    background: none;
    font-family: inherit;
    color: #2b1a14;
    cursor: pointer;
    transition: color .25s;
}

header .qm-country__btn:hover,
header .qm-country__btn[aria-expanded="true"] { color: var(--qm-gold-4); }

header .qm-country__label {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1;
    /* dinNext draws Arabic low in its line box; lift the label so its letters
       sit on the same centre line as the flag and the arrow */
    transform: translateY(-2px);
}

header .qm-country__caret {
    font-size: 9px;
    margin-top: -2px;
    opacity: .5;
    transition: transform .3s var(--qm-ease), opacity .25s;
}

header .qm-country__btn:hover .qm-country__caret { opacity: .9; }
header .qm-country__btn[aria-expanded="true"] .qm-country__caret { opacity: .9; transform: rotate(180deg); }

/* Flags: the SVGs carry transparent margins (the flag fills 26.7×20 of a
   36×28 canvas), so each is drawn slightly enlarged and centred until the
   flag fills its small rounded rectangle. */
header .qm-country__flag {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px;
    height: 17px;
    padding: 0 !important; /* custom.css pads spans inside dropdown menus */
    border-radius: 4px;
    background-color: #efe9e3;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 138% auto;
    box-shadow: 0 0 0 1px rgba(43, 26, 20, .12), 0 2px 5px -2px rgba(43, 26, 20, .3);
}

/* "All Gulf countries": a globe instead of the collage flag */
header .qm-country__flag--all {
    color: var(--qm-gold-4);
    font-size: 12px;
    background: linear-gradient(180deg, #fbf4ec, #f1e4d6);
    box-shadow: 0 0 0 1px rgba(161, 120, 92, .3);
}

/* Menu */
header .qm-country__menu {
    min-width: 250px;
    padding: 8px !important;
}

header .qm-country__title {
    padding: 8px 12px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(161, 120, 92, .12);
    font-size: 12.5px;
    font-weight: 700;
    color: #9a8a82;
}

header .qm-country__item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 9px 12px !important;
    border-radius: 12px;
    color: #3a2219;
}

header .qm-country__item .qm-country__flag { width: 26px; height: 19px; }

header .qm-country__name {
    flex: 1 1 auto;
    padding: 0 !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

header .qm-country__check {
    font-size: 11px;
    color: var(--qm-gold-4);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .2s, transform .25s var(--qm-ease);
}

header .qm-country__item:hover { background: #faf5ef; color: var(--qm-brown); }

header .qm-country__item.is-active {
    background: linear-gradient(180deg, #fbf6f1, #f4eadf);
    color: var(--qm-brown);
}

header .qm-country__item.is-active .qm-country__check { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Footer — dark bronze with gold accents and glass details
   (payment logos are left untouched: mada branding rules require the white
   artwork on a dark background, first in the row, never boxed or shrunk)
   -------------------------------------------------------------------------- */

footer {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    color: rgba(255, 255, 255, .74);
    background:
        radial-gradient(900px 380px at 88% 0%, rgba(226, 193, 156, .2), transparent 60%),
        radial-gradient(700px 360px at 8% 100%, rgba(161, 120, 92, .3), transparent 60%),
        linear-gradient(160deg, #1a1210 0%, #2b1a14 45%, #3d2519 100%) !important;
    box-shadow: none !important;
}

/* faint diamond lattice, fading out towards the edges */
footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .05;
    background-image:
        linear-gradient(45deg, #fff 1px, transparent 1px),
        linear-gradient(-45deg, #fff 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 75%);
    pointer-events: none;
}

/* gold hairline along the top edge */
footer::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--qm-gold-3) 25%, var(--qm-gold-1) 50%, var(--qm-gold-3) 75%, transparent);
    pointer-events: none;
}

/* ----- Brand strip ----- */

footer .qm-footer-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 44px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

footer .qm-footer-brand__logo .qm-logo-foil {
    /* sized by height so the wide English mark gets the same weight as the Arabic one */
    height: 52px;
    width: auto;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .45));
}

footer .qm-footer-brand__tagline {
    font-size: 15px;
    font-weight: 700;
    color: var(--qm-gold-1);
    opacity: .85;
}

/* ----- Link columns ----- */

footer .footer_links {
    padding-top: 40px;
    border-top: 0 !important;
}

footer .footer_links h6 {
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
    margin-bottom: 22px !important;
    font-size: 18px;
    font-weight: 800;
    background: linear-gradient(90deg, #f6e3c8 0%, #e2c19c 50%, #c79a72 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

footer .footer_links h6::after {
    content: "";
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 32px;
    height: 3px;
    border-radius: 3px;
    background: var(--qm-gloss-gold);
    box-shadow: 0 2px 10px rgba(226, 193, 156, .45);
}

footer .footer_links p {
    margin-bottom: 14px !important;
    font-size: 15px;
}

footer .footer_links p a {
    display: inline-block;
    color: rgba(255, 255, 255, .72) !important;
    transition: color .3s, transform .3s var(--qm-ease);
}

footer .footer_links p a:hover {
    color: var(--qm-gold-1) !important;
    transform: translateX(-4px);
}

/* ----- Contact: glass chips ----- */

footer .responsive_footeer > a,
footer .responsive_footeer > p {
    flex: none !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 10px !important;
    padding: 9px 14px !important;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: border-color .3s, background .3s;
}

footer .responsive_footeer > a:hover,
footer .responsive_footeer > p:hover {
    border-color: rgba(226, 193, 156, .45);
    background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05));
}

footer .responsive_footeer span { font-size: 14px !important; color: #fff !important; }

footer .responsive_footeer:has(> a, > p) { flex-direction: column; align-items: flex-start; }

/* ----- Social: round glass buttons ----- */

footer .footer_icons {
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 4px;
}

footer .footer_icons a {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: transform .35s var(--qm-ease), border-color .3s, box-shadow .3s, background .3s;
}

footer .footer_icons a:hover {
    transform: translateY(-3px);
    border-color: rgba(226, 193, 156, .7);
    background: linear-gradient(180deg, rgba(226, 193, 156, .35), rgba(161, 120, 92, .15));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -10px rgba(226, 193, 156, .6);
}

/* <object> swallows clicks — let them reach the link */
footer .footer_icons object {
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    pointer-events: none;
}

/* ----- Help centre CTA ----- */

footer .qm-footer-help {
    min-height: 42px;
    padding: 0 16px;
    margin-top: 14px;
    max-width: 100%;
}

footer .qm-footer-help span {
    font-size: 13px !important;
    line-height: 1.35;
    text-align: center;
    padding-block: 8px;
    color: #fff !important;
}

@media (min-width: 1400px) {
    footer .qm-footer-help span { white-space: nowrap; }
}

/* ----- Bottom bar ----- */

footer .qm-footer-bottom {
    position: relative;
    border-top: 0 !important;
}

footer .qm-footer-bottom::before {
    content: "";
    position: absolute;
    inset: 0 12px auto 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(226, 193, 156, .45) 20%, rgba(226, 193, 156, .45) 80%, transparent);
}

footer .footer_end h4 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, .62) !important;
}

footer .payment_methods h4 { margin-bottom: 12px; }

/* Home page: the newsletter band flows straight into the footer */
.main-wrapper:has(.qm-home) > footer { margin-top: 0 !important; }

@media (max-width: 767px) {
    footer .qm-footer-brand { flex-direction: column; text-align: center; padding-top: 36px; }
    footer .footer_links { padding-top: 28px; }
}

/* --------------------------------------------------------------------------
   Breadcrumb (.qm-crumbs) — product, store, cart and checkout pages
   -------------------------------------------------------------------------- */

.qm-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 22px 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: #8a7466;
}

.qm-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.qm-crumbs li + li::before { content: "/"; color: #cbb8a6; }
.qm-crumbs a { font-size: inherit !important; color: #8a7466; text-decoration: none; transition: color .2s; }
.qm-crumbs li { font-size: inherit !important; }
.qm-crumbs a:hover { color: var(--qm-brown); }
.qm-crumbs [aria-current] { max-width: 40ch; overflow: hidden; color: var(--qm-ink); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }

@media (max-width: 575px) {
    .qm-crumbs ol { margin: 14px 0; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Checkout steps (layoutmodule::components.qm-checkout-steps)
   -------------------------------------------------------------------------- */

.qm-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    font-weight: 700;
    color: #8a7466;
}

.qm-steps li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.qm-steps li + li::before { content: ""; width: 28px; height: 1px; margin-inline-end: 2px; background: #eadfd3; }

.qm-steps b {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 12px;
    color: #8a7466;
    background: #f6efe8;
    border: 1px solid #eadfd3;
}

.qm-steps b i { font-size: 10px; }
.qm-steps .is-done { color: var(--qm-brown); }
.qm-steps .is-done b { color: var(--qm-brown); background: rgba(226, 193, 156, .25); border-color: rgba(161, 120, 92, .35); }
.qm-steps .is-done + li::before { background: var(--qm-gold-3); }
.qm-steps .is-active { color: var(--qm-ink); }
.qm-steps .is-active b { color: #fff; background: var(--qm-gloss-gold); border-color: var(--qm-gold-4); }

@media (max-width: 575px) {
    .qm-steps li:not(.is-active) span { display: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .qm-shine::after,
    .qm-logo-foil,
    header::before,
    header .upper_header::after { animation: none !important; }
    header, header *, footer * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Mobile header (< 992px)
   Row 1: [menu · search]  logo  [notifications · bag]
   Row 2: [account pill · chat · favourites · language]  ·····  [country]
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    header .middle_header { min-height: 66px !important; padding: 0 !important; }
    header .middle_header > .row { flex-wrap: nowrap; align-items: center; margin: 0; }
    header .middle_header > .row > div { flex: 1 1 0; width: auto; max-width: none; min-width: 0; }
    header .middle_header > .row > div:nth-child(2) { flex: 0 0 auto; }
    header .middle_header > .row > div:first-child > .d-flex { gap: 6px; }
    header .middle_header > .row > div:last-child { gap: 6px; }
    header .middle_header .logo { width: 92px !important; height: auto; }

    /* round tool buttons */
    header .qm-m-btn,
    header .qm-m-item .item_inside_margin {
        position: relative;
        display: grid !important;
        place-items: center;
        width: 40px;
        height: 40px;
        margin: 0 !important;
        padding: 0;
        color: var(--qm-ink) !important;
        text-decoration: none;
        background: rgba(255, 255, 255, .6);
        border: 0;
        border-radius: 13px;
        box-shadow: 0 0 0 1px rgba(161, 120, 92, .16), 0 6px 14px -10px rgba(58, 34, 25, .45);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transition: background-color .2s, transform .2s;
    }
    header .qm-m-btn:active,
    header .qm-m-item .item_inside_margin:active { transform: scale(.94); }
    header .qm-m-btn i { font-size: 16px; }
    header .qm-m-btn svg,
    header .qm-m-item svg { width: 20px !important; height: 20px !important; }
    header .qm-m-item { margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; }
    header .qm-m-item .dial { display: grid !important; place-items: center; }
    header .qm-m-item .dropdown-toggle::after { display: none !important; }

    /* counters */
    header .qm-m-item .counter-data,
    header .qm-m-count {
        position: absolute;
        top: -5px;
        inset-inline-end: -5px;
        display: grid;
        place-items: center;
        min-width: 18px;
        height: 18px;
        padding: 0 4px;
        font-size: 10.5px;
        font-weight: 800;
        line-height: 1;
        color: #fff;
        background: #c0392b;
        border: 2px solid #fbf7f2;
        border-radius: 999px;
    }
    header .qm-m-count.d-none { display: none !important; }

    /* row 2 */
    header nav.header_resp { padding: 0 !important; background: transparent; }
    header nav.header_resp > .container { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 54px; padding: 6px 12px !important; }
    header nav.header_resp > .container > ul.me-auto { margin: 0 !important; }

    header .qm-m-bar { display: flex; align-items: center; gap: 6px; min-width: 0; }
    header .qm-m-bar .qm-m-btn { width: 38px; height: 38px; border-radius: 12px; }
    header .qm-m-me {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 38px;
        min-width: 0;
        padding: 0 12px 0 4px;
        padding-inline: 4px 12px;
        font-size: 13px;
        color: #fff !important;
        text-decoration: none;
        background: linear-gradient(150deg, #1a1210 0%, #2b1a14 60%, #4a2c20 100%);
        border-radius: 999px;
        box-shadow: 0 8px 18px -12px rgba(26, 18, 16, .8);
    }
    header .qm-m-me__avatar { display: grid; flex: none; place-items: center; width: 30px; height: 30px; font-size: 13px; font-weight: 800; color: #3a2219; background: var(--qm-gloss-gold); border-radius: 50%; }
    header .qm-m-me b { overflow: hidden; max-width: 96px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; unicode-bidi: plaintext; }
    header .qm-m-lang { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--qm-brown) !important; }
}

@media (max-width: 380px) {
    header .qm-m-me b { display: none; }
    header .qm-m-me { padding-inline: 4px; }
    header .middle_header .logo { width: 80px !important; }
}

/* ----- Mobile category drawer (menus.js toggles .overlay.active / aside.close) ----- */
.overlay { background: rgba(26, 18, 16, .45) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.overlay aside {
    width: min(340px, 88vw) !important;
    padding: 0 !important;
    background: #fbf7f2 !important;
    box-shadow: -30px 0 60px -30px rgba(26, 18, 16, .6);
    transition: transform .35s var(--qm-ease) !important;
}
html[lang="en"] .overlay aside { right: auto !important; left: 0; box-shadow: 30px 0 60px -30px rgba(26, 18, 16, .6); }
html[lang="en"] .overlay aside.close { transform: translateX(-100%) !important; }

.overlay aside .logo_container {
    position: relative;
    margin: 0 !important;
    padding: 22px 20px !important;
    background: linear-gradient(150deg, #1a1210 0%, #2b1a14 60%, #4a2c20 100%);
    border: 0 !important;
}
.overlay aside .logo_container .logo { width: 84px !important; filter: brightness(0) invert(.9) sepia(.4) saturate(2.2) hue-rotate(-12deg); }
.overlay aside .close_key {
    top: 50% !important;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: 0 16px;
    padding: 0;
    color: var(--qm-gold-1);
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(226, 193, 156, .3) !important;
    border-radius: 12px;
    transform: translateY(-50%);
}
.overlay aside .close_key svg { width: 18px !important; height: 18px; }
.overlay aside .close_key svg path { fill: currentColor; stroke: currentColor; }
html[lang="en"] .overlay aside .close_key { right: 0 !important; left: auto !important; }

.overlay aside .scrollable-menu { max-height: none !important; padding: 10px 12px 24px; }
.overlay aside .scrollable-menu > ul { gap: 2px; }
.overlay aside li { padding: 0 !important; }
.overlay aside .scrollable-menu > ul > li > div { padding: 2px 6px; border-radius: 12px; }
.overlay aside .scrollable-menu > ul > li > div:hover { background: #f3ebe2; }
.overlay aside .navigator { display: block; padding: 13px 8px !important; font-size: 15px !important; font-weight: 700 !important; color: var(--qm-ink) !important; }
.overlay aside .accordion-button { width: 34px; height: 34px; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
.overlay aside .accordion-button::after { margin: 0 auto; filter: sepia(1) saturate(3) hue-rotate(-10deg) brightness(.75); background-size: 14px; }
.overlay aside ul.collapse,
.overlay aside ul.collapsing { margin: 0 14px 6px; padding: 0 !important; padding-inline-start: 12px !important; border-inline-start: 2px solid rgba(199, 154, 114, .35); }
.overlay aside ul.collapse .navigator,
.overlay aside ul.collapsing .navigator { padding: 9px 8px !important; font-size: 14px !important; font-weight: 600 !important; color: #5a463b !important; }
/* the drawer opens over the sticky header */
.overlay { z-index: 1065 !important; }
@media (max-width: 991px) {
    header .qm-m-me { flex: none; }
    header nav.header_resp > .container > ul.me-auto { flex: 0 1 auto; min-width: 0; overflow: hidden; }
}