/*
 * Swiftech Store — header/navigation restyle (2026-09 redesign).
 *
 * Pure overlay: the markup keeps every Alpine hook (Header, HeaderSearch,
 * store counters, sidebar triggers) untouched; this file only reskins the
 * three header bands to the new design direction — dark top bar, pill
 * search with a labelled red button, rounded action icons, and the nav band
 * with the Offers & Sales quick links.
 *
 * Loaded BEFORE the compiled Vite CSS, so every contested rule must win on
 * specificity (the compiled theme mostly uses 2-3 class chains; rules below
 * ride an extra ancestor class), never on order.
 */

/*======================= Top bar =======================*/

.top-nav-wrap.top-nav-wrap {
    background: #151b26;
    border-bottom: 1px solid #0e131b;
}

.top-nav-wrap .top-nav {
    padding: 9px 0;
}

.top-nav-wrap .top-nav .top-nav-left > span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #f2f4f7;
    letter-spacing: 0.01em;
}

.top-nav-wrap .top-nav .top-nav-left > span > .la-crown {
    font-size: 15px;
    color: #f5a623;
}

/* Doubled first class: the compiled theme colors these links via
   `.top-nav .top-nav-right-list>li:not(.dropdown)>a` — :not(.dropdown)
   counts as a class, so a plain 3-class chain only TIES and loses on load
   order, leaving near-black text on the dark band. */
.top-nav-wrap.top-nav-wrap .top-nav .top-nav-right-list > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #d4dae2;
    transition: color 0.15s ease;
}

.top-nav-wrap.top-nav-wrap .top-nav .top-nav-right-list > li > a:hover,
.top-nav-wrap.top-nav-wrap .top-nav .top-nav-right-list > li > a:focus-visible {
    color: #fff;
}

.top-nav-wrap.top-nav-wrap .top-nav .top-nav-right-list > li > a > i {
    font-size: 16px;
    color: #aab2bc;
    transition: color 0.15s ease;
}

.top-nav-wrap.top-nav-wrap .top-nav .top-nav-right-list > li > a:hover > i {
    color: var(--color-primary, #f51e46);
}

/* The theme separates items with light-grey borders; on the dark band those
   read as scratches — soften them. */
.ltr .top-nav-wrap .top-nav .top-nav-right-list > li:not(.dropdown):first-child {
    border-right-color: rgba(255, 255, 255, 0.12);
}

.rtl .top-nav-wrap .top-nav .top-nav-right-list > li:not(.dropdown):first-child {
    border-left-color: rgba(255, 255, 255, 0.12);
}

/*======================= Search pill =======================*/

.header-wrap .header-search .header-search-lg {
    background: #fff;
    border: 1px solid #e3e6ea;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(15, 20, 25, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.header-wrap .header-search .header-search-lg:focus-within {
    border-color: #c9cfd6;
    box-shadow: 0 2px 10px rgba(15, 20, 25, 0.07);
}

.header-wrap .header-search .header-search-lg.header-search-lg-background,
.header-wrap .header-search .header-search-lg .search-input,
.header-wrap .header-search .header-search-lg .search-input.focused {
    background: #fff;
    border-radius: 999px;
}

.ltr .header-wrap .header-search .header-search-lg .search-input {
    padding-left: 24px;
}

.rtl .header-wrap .header-search .header-search-lg .search-input {
    padding-right: 24px;
}

/* Category selector inside the pill: quiet, separated by a soft divider.
   Six selectors: the compiled rule setting the grey chip background is a
   5-class chain, and a tie loses on load order. */
.header-wrap .header-search .header-search-lg .header-search-right .custom-dropdown .dropdown-toggle {
    background: transparent;
    font-size: 13.5px;
    color: #4a5462;
}

.ltr .header-wrap .header-search .header-search-right .custom-dropdown {
    border-left: 1px solid #e9ecef;
}

.rtl .header-wrap .header-search .header-search-right .custom-dropdown {
    border-right: 1px solid #e9ecef;
}

/* Labelled red search button, pill-shaped. */
.header-wrap .header-search .header-search-lg .btn-search {
    width: auto;
    height: 44px;
    gap: 7px;
    padding: 0 22px;
    margin: 3px 4px;
    border-radius: 999px;
}

/* The theme's .ltr/.rtl margin rules (4 selectors) tie a 4-class override,
   so ride the .ltr/.rtl prefix one level higher. */
.ltr .header-wrap .header-search .header-search-lg .btn-search {
    margin-left: 4px;
}

.rtl .header-wrap .header-search .header-search-lg .btn-search {
    margin-right: 4px;
}

/* Sticky state: the compiled sticky rule (5 classes) pins the button back
   to a 42px square, which would squash the label — restate at 6. */
.header-wrap .header-wrap-inner.sticky .header-search .header-search-lg .btn-search {
    width: auto;
    height: 42px;
    padding: 0 20px;
}

/* Sticky + suggestions open: the compiled sticky background rule (5
   classes) resets the pill radius while the panel is showing. */
.header-wrap .header-wrap-inner.sticky .header-search .header-search-lg.header-search-lg-background {
    background: #fff;
    border-radius: 999px;
}

.header-wrap .header-search .header-search-lg .btn-search .sw-search-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.01em;
}

@media (max-width: 1349px) {
    /* Keep the pill compact on smaller desktops: icon-only button. The
       sticky variant is restated at its own (higher) specificity so the
       compact padding holds in both header states. */
    .header-wrap .header-search .header-search-lg .btn-search,
    .header-wrap .header-wrap-inner.sticky .header-search .header-search-lg .btn-search {
        padding: 0 15px;
    }

    .header-wrap .header-search .header-search-lg .btn-search .sw-search-label {
        display: none;
    }
}

/*======================= Action icons =======================*/

@media (min-width: 992px) {
    .header-wrap .header-column-right .header-column-right-item > .icon-wrap,
    .header-wrap .header-column-right > .icon-wrap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        background: #fff;
        border: 1px solid #e3e6ea;
        border-radius: 50%;
        transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }

    .header-wrap .header-column-right .header-column-right-item > .icon-wrap:hover,
    .header-wrap .header-column-right > .icon-wrap:hover {
        border-color: rgba(245, 30, 70, 0.45);
        box-shadow: 0 3px 10px rgba(15, 20, 25, 0.08);
        transform: translateY(-1px);
    }

    .header-wrap .header-column-right .icon-wrap > svg {
        width: 22px;
        height: 22px;
    }

    .header-wrap .header-column-right .icon-wrap > .count {
        top: -4px;
        box-shadow: 0 0 0 2px #fff;
    }

    /* The compiled offset rules are .ltr/.rtl-prefixed 4-class chains;
       match them one ancestor deeper so the circle placement wins. */
    .ltr .header-wrap .header-column-right .icon-wrap > .count {
        right: -4px;
    }

    .rtl .header-wrap .header-column-right .icon-wrap > .count {
        left: -4px;
    }
}

/*======================= Nav band =======================*/

.navigation-wrap .navigation-inner {
    align-items: center;
    background: #fff;
}

.navigation-wrap .navigation-inner .primary-menu {
    flex: 1 1 auto;
    min-width: 0;
}

.navigation-wrap .horizontal-megamenu > li > .nav-link.menu-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: #1d2530;
    transition: color 0.15s ease;
}

.navigation-wrap .horizontal-megamenu > li > .nav-link.menu-item:hover {
    color: var(--color-primary, #f51e46);
}

/* "Hot" pill on the Deals link. */
.navigation-wrap .sw-nav-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary, #f51e46);
    background: rgba(245, 30, 70, 0.1);
    border-radius: 999px;
}

/* Right-aligned quick links (Special Offers / Gift Cards). */
.navigation-wrap .sw-nav-quick {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 24px;
    padding: 0 22px;
    align-self: stretch;
    border-left: 1px solid var(--border-color, #e3e6ea);
    margin-left: 12px;
}

.rtl .navigation-wrap .sw-nav-quick {
    border-left: 0;
    border-right: 1px solid var(--border-color, #e3e6ea);
    margin-left: 0;
    margin-right: 12px;
}

.navigation-wrap .sw-nav-quick__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary, #f51e46);
    white-space: nowrap;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.navigation-wrap .sw-nav-quick__link:hover,
.navigation-wrap .sw-nav-quick__link:focus-visible {
    color: #c81638;
}

.navigation-wrap .sw-nav-quick__link > i {
    font-size: 18px;
}

@media (max-width: 1249px) {
    .navigation-wrap .sw-nav-quick {
        gap: 16px;
        padding: 0 14px;
    }

    .navigation-wrap .sw-nav-quick__link {
        font-size: 13px;
    }

    .navigation-wrap .sw-nav-quick__link > i {
        font-size: 16px;
    }
}

/*======================= Focus visibility =======================*/

.top-nav-wrap a:focus-visible,
.header-wrap .icon-wrap:focus-visible,
.navigation-wrap .sw-nav-quick__link:focus-visible,
.navigation-wrap .nav-link.menu-item:focus-visible {
    outline: 2px solid var(--color-primary, #f51e46);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .top-nav-wrap *,
    .header-wrap .icon-wrap,
    .header-wrap .header-search .header-search-lg,
    .navigation-wrap .sw-nav-quick__link {
        transition: none !important;
    }
}

/*======================================================================
  DARK THEME (2026-09) — appended overlay. Nothing here touches light
  mode: every rule is gated behind [data-theme="dark"], which the theme
  script sets on <html>. Each selector repeats the light rule's full
  chain (defined above) plus that prefix, so it outranks both this
  file's own light rule and the compiled bundles. The .ltr/.rtl classes
  live on <body>, so the descendant prefix matches them too.
======================================================================*/

/* Top bar: the band keeps its own dark navy; soften only the seam. */
[data-theme="dark"] .top-nav-wrap.top-nav-wrap {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/*======= Search pill =======*/

[data-theme="dark"] .header-wrap .header-search .header-search-lg {
    background: #1a202b;
    border-color: rgba(255, 255, 255, 0.14);
}

[data-theme="dark"] .header-wrap .header-search .header-search-lg:focus-within {
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .header-wrap .header-search .header-search-lg.header-search-lg-background,
[data-theme="dark"] .header-wrap .header-search .header-search-lg .search-input,
[data-theme="dark"] .header-wrap .header-search .header-search-lg .search-input.focused {
    background: #1a202b;
}

/* Sticky + suggestions open: restate the dark surface at the sticky
   rule's own specificity, mirroring the light restatement above. */
[data-theme="dark"] .header-wrap .header-wrap-inner.sticky .header-search .header-search-lg.header-search-lg-background {
    background: #1a202b;
}

/* Category chip inside the pill. */
[data-theme="dark"] .header-wrap .header-search .header-search-lg .header-search-right .custom-dropdown .dropdown-toggle {
    color: #aab4c0;
}

[data-theme="dark"] .ltr .header-wrap .header-search .header-search-right .custom-dropdown {
    border-left-color: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .rtl .header-wrap .header-search .header-search-right .custom-dropdown {
    border-right-color: rgba(255, 255, 255, 0.12);
}

/*======= Action icons (same media gate as the light rules) =======*/

@media (min-width: 992px) {
    [data-theme="dark"] .header-wrap .header-column-right .header-column-right-item > .icon-wrap,
    [data-theme="dark"] .header-wrap .header-column-right > .icon-wrap {
        background: #1a202b;
        border-color: rgba(255, 255, 255, 0.14);
    }

    /* Count ring matches the dark page ground instead of white. */
    [data-theme="dark"] .header-wrap .header-column-right .icon-wrap > .count {
        box-shadow: 0 0 0 2px #12151b;
    }
}

/*======= Nav band =======*/

[data-theme="dark"] .navigation-wrap .navigation-inner {
    background: #181c23;
}

[data-theme="dark"] .navigation-wrap .horizontal-megamenu > li > .nav-link.menu-item {
    color: #dde3ea;
}

/* Darker hover red would vanish on the dark band — brighten instead. */
[data-theme="dark"] .navigation-wrap .sw-nav-quick__link:hover,
[data-theme="dark"] .navigation-wrap .sw-nav-quick__link:focus-visible {
    color: #ff6b8a;
}

[data-theme="dark"] .navigation-wrap .sw-nav-badge {
    background: rgba(245, 30, 70, 0.16);
}