/* ============================================================
   NextMerce-style header layout (scoped to .header--nm)

   Reproduces the reference header item positioning:
     left group  = logo + rounded search pill
     right group = buy/sell links · language · wishlist · account
   Loaded AFTER home.css / style.css so these rules win the
   cascade at equal specificity without editing the SCSS source.
   ============================================================ */

.header--nm {
    --nm-blue: #3C50E0;
    --nm-dark: #1C274C;
    --nm-dark-4: #8D93A5;
    --nm-gray-1: #F5F7FF;
    --nm-gray-3: #E5E7EB;
    --nm-red: #F23030;
}

/* ---- top bar layout ------------------------------------------------ */
/* Centered container matching NextMerce's homepage exactly: max-w-7xl (1280px)
   with px-4 / sm:px-6 / xl:px-0 padding. Header, footer and page content all
   share these same values so everything lines up. */
/* Matches the homepage exactly: max-w-7xl (1280px) + px-4 (only px-4 is compiled
   in mainpage-v2.css, so the homepage uses a flat 16px gutter at every width). */
.header--nm .container,
.header--nm .category-bar-inner {
    max-width: 1280px !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-inline: 16px;
}
/* Desktop: content sits flush to the 1280px frame (the xl:px-0 the homepage wants
   but that isn't compiled in mainpage-v2.css). Below 1280px keeps the 16px gutter. */
@media (min-width: 1280px) {
    .header--nm .container,
    .header--nm .category-bar-inner {
        padding-inline: 0;
    }
}

.header--nm .main-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    /* padding-block only, NOT the `padding` shorthand: the shorthand also transitions the inline
       padding, which never changes, so every frame animated four values instead of two.
       0.2s on a snappy curve rather than 0.3s ease - this fires at scrollY > 10, i.e. in the first
       moments of a scroll, which is exactly where a long layout animation is felt as lag. */
    transition: padding-block 0.2s cubic-bezier(.4, 0, .2, 1);
}

/* ---- scroll collapse (NextMerce-style) ----------------------------- */
.header--nm {
    /* Both are composited - they cost nothing per frame, unlike the padding/height above. */
    transition: box-shadow 0.2s ease, background 0.2s ease;
}

/* Set for the duration of ONE synchronous measurement in home.js (measureExpandedHeaderHeight):
   .is-scrolled is removed, the expanded height is read, and the class is put straight back - all
   before the next paint, so nothing of this is visible.
   Without killing transitions for that window, the padding and height transitions below would
   start animating from the intermediate values the read passes through, and the header would
   twitch every time the page is resized while scrolled. */
.header.is-measuring,
.header.is-measuring * {
    transition: none !important;
}
.header--nm.is-scrolled .main-header {
    padding-top: 8px;
    padding-bottom: 8px;
}
.header--nm.is-scrolled {
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}
/* Matched to .main-header above so the two halves of the collapse move as one piece. A 50px -> 44px
   height animation is 6px of travel for a full-subtree relayout on every frame of it, which is the
   worst cost-to-visible-effect ratio in the header - the shorter duration keeps the cost inside the
   window where the user is still starting their scroll gesture. */
.header--nm .category-bar-inner {
    transition: height 0.2s cubic-bezier(.4, 0, .2, 1);
}
.header--nm.is-scrolled .category-bar-inner {
    height: 44px;
}

/* Users who have asked the OS for less motion get the collapse instantly - no layout animation on
   the header at all, which is also the smoothest possible scroll. */
@media (prefers-reduced-motion: reduce) {
    .header--nm,
    .header--nm .main-header,
    .header--nm .category-bar-inner {
        transition: none;
    }
}

/* left group: logo + search (override the legacy width:100%) */
.header--nm .main-header .header-left {
    display: flex;
    align-items: center;
    gap: 24px;
    width: auto;
    flex: 1 1 auto;
    padding: 0;
}

/* ---- logo ---------------------------------------------------------- */
.header--nm .main-header .header-left .header-logo {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;   /* vertically centre the logo in the header */
}

.header--nm .main-header .header-left .header-logo a {
    display: block;
}

.header--nm .main-header .header-left .header-logo img {
    width: 150px;
    height: auto;
    min-height: 0;
    display: block;
}

/* ---- search pill --------------------------------------------------- */
.header--nm .main-header .header-left .header-search {
    width: 100%;
    max-width: 475px;
}

/* Reshape the EXISTING search box (common.css) into the NextMerce pill.
   Uses !important to win against common.css's !important rules, otherwise
   the old box border shows through and looks like a second field. */
.header--nm .main-header .header-left .header-search .box-header-search {
    width: 100% !important;
    height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid var(--nm-gray-3) !important;
    background: var(--nm-gray-1) !important;
    box-shadow: none !important;
    padding: 0 10px 0 20px !important;
    transform: none !important;
    display: flex;
    align-items: center;
    position: relative !important;
}

.header--nm .main-header .header-left .header-search .box-header-search:hover {
    border-color: var(--nm-gray-3) !important;
    background: var(--nm-gray-1) !important;
    box-shadow: none !important;
    transform: none !important;
}

.header--nm .main-header .header-left .header-search .box-header-search:focus-within {
    border-color: var(--nm-blue) !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Input sits transparent inside the pill — no inner border/box */
.header--nm .nm-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 14px;
    color: var(--nm-dark);
    outline: none;
}

.header--nm .nm-search-input::placeholder {
    color: var(--nm-dark-4);
}

/* Remove the browser's native clear (×) button inside the type="search" input (WebKit + Edge).
   The page has its own search button + autocomplete, so the built-in × is redundant. */
.header--nm .nm-search-input::-webkit-search-cancel-button,
.header--nm .nm-search-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}
.header--nm .nm-search-input::-ms-clear {
    display: none;
}

/* Search button — in-flow, sits at the right end of the pill */
.header--nm .nm-search-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #707787;
    cursor: pointer;
    transition: color .15s ease;
}

.header--nm .nm-search-btn:hover {
    color: var(--nm-blue);
}

/* autocomplete dropdown spans the full pill width */
.header--nm .box-header-search .autocomplete-suggestions {
    left: 0;
    right: 0;
    width: 100%;
}

/* ---- right group --------------------------------------------------- */
.header--nm .main-header .header-shop {
    display: flex;
    align-items: center;
    gap: 24px;
    width: auto;
    text-align: left;
    flex-shrink: 0;
    padding: 0;
}

/* buy / sell links */
.header--nm .header-shop .header-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--nm-dark);
    white-space: nowrap;
}

.header--nm .header-shop .header-link:hover {
    color: var(--nm-blue);
    opacity: 1;
}

/* ---- language widget (improved) ------------------------------------ */
.header--nm .langContainer.nm-lang {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* drop the legacy globe icon (custom.css .langContainer::before) */
.header--nm .nm-lang::before {
    content: none !important;
    display: none !important;
}

.header--nm .nm-lang::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 1.6px solid var(--nm-dark-4);
    border-bottom: 1.6px solid var(--nm-dark-4);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.header--nm .nm-lang select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 38px;
    border: 1px solid var(--nm-gray-3);
    border-radius: 9999px;
    background: #fff;
    color: var(--nm-dark);
    font-size: 14px;
    font-weight: 500;
    padding: 0 32px 0 16px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s ease;
}

.header--nm .nm-lang select:hover {
    border-color: var(--nm-blue);
}

/* ---- wishlist icon ------------------------------------------------- */
.header--nm .nm-wishlist {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    position: relative;
    color: var(--nm-dark);
    padding: 0;
    background: none;
}

.header--nm .nm-wishlist:hover {
    color: var(--nm-blue);
    opacity: 1;
}

.header--nm .nm-badge {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--nm-red) !important;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    border-radius: 9999px;
    display: inline-block;
}

/* ---- account block (2 states) -------------------------------------- */
.header--nm .nm-account-wrap {
    position: relative;
}

.header--nm .nm-account {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

.header--nm .nm-account-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--nm-gray-3);
    border-radius: 50%;
    color: var(--nm-dark);
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
}

.header--nm .nm-account-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}

.header--nm .nm-account-label {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--nm-dark-4);
}

.header--nm .nm-account-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--nm-dark);
    white-space: nowrap;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header--nm .nm-account:hover .nm-account-name {
    color: var(--nm-blue);
}

.header--nm .nm-account-chevron {
    color: var(--nm-dark);
    transition: transform .2s ease;
    flex-shrink: 0;
}

.header--nm .nm-account-wrap .dropdown-account.dropdown-open + .nm-account .nm-account-chevron,
.header--nm .nm-account-wrap.open .nm-account-chevron {
    transform: rotate(180deg);
}

/* dropdown menu aligns to the right edge of the account block, and must sit
   above the category bar (z-index:998) which renders later in the header */
.header--nm .nm-account-wrap .dropdown-account {
    left: auto;
    right: 0;
    top: calc(100% + 14px);
    z-index: 1001;
}

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 1199px) {
    .header--nm .main-header .header-left .header-search {
        max-width: 320px;
    }
}

@media (max-width: 991.98px) {
    /* collapse the 2-line account label first */
    .header--nm .nm-account-text {
        display: none;
    }

    /* when a mobile drawer exists, account + favorites live inside it */
    .header--nm.has-drawer .nm-account-wrap,
    .header--nm.has-drawer .nm-wishlist {
        display: none;
    }

    .header--nm .main-header .header-shop {
        gap: 16px;
    }
}

/* Keep the search bar visible down to fold / large-phone widths, overriding the
   legacy breakpoints (common.css hid it at 768/834/877 — incl. the higher-specificity
   .isLogged rule, so we match its depth). A foldable's open screen (~717px) keeps the
   search; only small phones (<600px) hide it. */
.header--nm .main-header .header-left .header-search {
    display: block !important;
}
@media (max-width: 599.98px) {
    .header--nm .main-header .header-left .header-search {
        display: none !important;
    }
}

/* Small phones (search hidden): center the logo in the middle of the header.
   The hamburger stays at the start and the account/wishlist at the end; the
   logo is taken out of flow and absolutely centered over the header. */
@media (max-width: 599.98px) {
    .header--nm .main-header {
        position: relative;
    }
    .header--nm .main-header .header-left .header-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 !important;
    }
}

/* ---- mobile search-expand (icon → inline search) ------------------- */
/* Toggle (in .header-shop) and close (in .header-search) buttons: hidden by default at every
   width; they only surface on small phones where the search bar itself is hidden. Same dark
   color as the hamburger — #191919, set directly on the SVG strokes. */
.header--nm .nm-search-toggle,
.header--nm .nm-search-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #191919;
    flex-shrink: 0;
}
.header--nm .nm-search-toggle:hover,
.header--nm .nm-search-close:hover {
    background-color: #F2F4F8;
}

@media (max-width: 599.98px) {
    /* show the magnifier icon on the right, where the search bar is hidden */
    .header--nm .nm-search-toggle {
        display: inline-flex;
    }

    /* expanded (.nm-search-open): reveal the SAME header search as a full-width bar over the
       header row (higher specificity than the display:none hide rule above, so it wins). */
    .header--nm.nm-search-open .main-header {
        background: #fff;
    }
    .header--nm.nm-search-open .main-header .header-left .header-search {
        display: flex !important;
        align-items: center;
        gap: 8px;
        position: absolute;
        left: 12px;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        max-width: none;
        z-index: 6;
        background: #fff;
    }
    .header--nm.nm-search-open .header-search .box-header-search {
        flex: 1 1 auto;
    }
    .header--nm.nm-search-open .nm-search-close {
        display: inline-flex;
    }
    /* hide the rest of the header row so the search bar owns the full width */
    .header--nm.nm-search-open .main-header .header-left .header-logo,
    .header--nm.nm-search-open .mobile-menu-trigger,
    .header--nm.nm-search-open .header-shop {
        visibility: hidden;
    }
}

/* ---- mobile drawer: account + favorites footer --------------------- */
/* (the drawer aside is rendered OUTSIDE .header--nm, so use literal colors) */
.mobile-menu-footer {
    flex-shrink: 0;
    border-top: 1px solid #ECEFF4;
    /* The drawer is sized to 100dvh — the visible viewport, which already sits above the
       system nav / gesture bar on Android & Firefox — so the footer only needs its normal
       padding. Adding env(safe-area-inset-bottom) on top double-counts the bar and leaves
       too big a gap above it. iOS is handled separately below. */
    padding: 10px 8px 16px;
    background: #FFFFFF;
}

/* iOS/iPadOS only (all iOS browsers are WebKit, matched by -webkit-touch-callout, which no
   other engine supports). Unlike Android, iOS extends the drawer BEHIND the home indicator
   (viewport-fit=cover), so there the footer must lift in the safe-area inset. Android/Firefox
   keep the plain 16px above — 100dvh already clears their nav bar — so they don't double up. */
@supports (-webkit-touch-callout: none) {
    .mobile-menu-footer {
        padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    }
}

.mobile-menu-footer .mm-foot-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #1A1D24;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-menu-footer .mm-foot-link:hover {
    background-color: #EEF4FE;
    color: #1565d8;
}

.mobile-menu-footer .mm-foot-link svg {
    flex-shrink: 0;
    color: currentColor;
}

.mobile-menu-footer .mm-foot-label {
    flex: 1;
}

.mobile-menu-footer .mm-foot-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #F23030;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    border-radius: 9999px;
}