/*
 * Swiftech Store - category navigation and home page.
 *
 * A plain stylesheet rather than Vite: the storefront's node_modules are not
 * installed on this server, so rebuilding the bundles would put every other
 * page at risk. Loaded BEFORE the compiled CSS, so every override here must
 * win on specificity, not on order.
 */

:root {
    --sw-red: var(--color-primary, #f51e46);
    --sw-red-soft: rgba(245, 30, 70, 0.08);
    --sw-ink: #0f1419;
    --sw-ink-2: #4a5462;
    --sw-ink-3: #6b7280;
    --sw-line: #e3e6ea;
    --sw-line-strong: #cdd3da;
    --sw-surface: #fff;
    --sw-page: #f6f7f9;

    /*
     * One stacking scale instead of ad-hoc values. The header already sits at
     * z-index 3-10 in the compiled CSS, so the dropdown only needs to clear
     * that, not reach for 9999.
     */
    --sw-z-nav: 20;
    --sw-z-dropdown: 30;
}

/*======================================================================
  ALL CATEGORIES panel
  ----------------------------------------------------------------------
  The theme gives .category-dropdown-wrap a fixed 400-520px height and a
  263px width per breakpoint. The overrides below use three classes so
  they beat those two-class rules despite loading first.

  The fallback branch renders a two-pane mega menu (sw-mega): roots on
  the left, the active root's subcategories on the right. The admin-menu
  branch keeps the theme's own single-column list in a narrow panel.
======================================================================*/

.sw-catnav {
    position: relative;
    z-index: var(--sw-z-nav);
}

.sw-catnav__trigger {
    /* It is a <button> now, for keyboard and screen-reader support. */
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: inherit;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.sw-catnav__trigger:focus-visible {
    outline: 2px solid var(--sw-red);
    outline-offset: -2px;
    border-radius: 8px;
}

.sw-catnav__trigger .las {
    transition: transform 0.18s ease;
}

.sw-catnav__trigger.is-open .las {
    transform: rotate(90deg);
}

/* Base panel: kills the fixed theme height; used as-is by the admin-menu
   branch, widened by the --mega modifier below. */
.category-nav .category-dropdown-wrap.sw-catnav__panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: auto;
    display: none;
    width: 300px;
    height: auto;
    max-height: min(74vh, 620px);
    min-height: 0;
    padding: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sw-surface);
    border: 1px solid var(--sw-line);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 16px 40px -12px rgba(16, 24, 40, 0.22);
    z-index: var(--sw-z-dropdown);
}

.rtl .category-nav .category-dropdown-wrap.sw-catnav__panel {
    left: auto;
    right: 0;
}

.category-nav .category-dropdown-wrap.sw-catnav__panel.show {
    display: block;
}

/* Two-pane mega panel. The nav bar only exists at >=992px (hidden below by
   the compiled CSS), so this width never meets a phone viewport. */
.category-nav .category-dropdown-wrap.sw-catnav__panel--mega {
    width: min(920px, calc(100vw - 56px));
    padding: 0;
    overflow: hidden;
}

/* The old CSS drew a speech-bubble arrow on the admin-branch inner div. */
.sw-catnav__panel .category-dropdown::before,
.sw-catnav__panel .category-dropdown::after {
    content: none !important;
    display: none !important;
}

.sw-catnav__panel .category-dropdown {
    height: auto;
    padding: 0;
    border: 0;
    background: none;
}

/* Scrollbars inside the panel */
.sw-catnav__panel ::-webkit-scrollbar,
.sw-catnav__panel::-webkit-scrollbar { width: 8px; }
.sw-catnav__panel ::-webkit-scrollbar-thumb,
.sw-catnav__panel::-webkit-scrollbar-thumb {
    background: #d7dbe0;
    border: 2px solid var(--sw-surface);
    border-radius: 8px;
}
.sw-catnav__panel ::-webkit-scrollbar-thumb:hover,
.sw-catnav__panel::-webkit-scrollbar-thumb:hover { background: #c2c8cf; }

/*======= Mega menu frame =======*/

.sw-mega {
    display: flex;
    flex-direction: column;
    max-height: min(74vh, 620px);
}

.sw-mega__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 18px;
    border-bottom: 1px solid var(--sw-line);
}

.sw-mega__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--sw-ink);
    white-space: nowrap;
}

.sw-mega__search {
    position: relative;
    flex: 1 1 auto;
    max-width: 320px;
    margin-left: auto;
}

.rtl .sw-mega__search {
    margin-left: 0;
    margin-right: auto;
}

.sw-mega__search .las {
    position: absolute;
    top: 50%;
    inset-inline-start: 10px;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--sw-ink-3);
    pointer-events: none;
}

.sw-mega__search input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    padding-inline-start: 32px;
    font-size: 13.5px;
    color: var(--sw-ink);
    background: var(--sw-page);
    border: 1px solid var(--sw-line);
    border-radius: 9px;
    outline: 0;
    -webkit-appearance: none;
    appearance: none;
}

.sw-mega__search input::placeholder { color: var(--sw-ink-3); }

.sw-mega__search input:focus {
    background: var(--sw-surface);
    border-color: var(--sw-red);
    box-shadow: 0 0 0 3px var(--sw-red-soft);
}

.sw-mega__close {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 17px;
    color: var(--sw-ink-3);
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.13s ease, background-color 0.13s ease;
}

.sw-mega__close:hover {
    color: var(--sw-ink);
    background: var(--sw-page);
}

.sw-mega__close:focus-visible,
.sw-mega__alllink:focus-visible,
.sw-mega__cat:focus-visible,
.sw-mega__more:focus-visible,
.sw-mega__sub:focus-visible,
.sw-mega__viewall:focus-visible,
.sw-mega__browse:focus-visible {
    outline: 2px solid var(--sw-red);
    outline-offset: -2px;
}

.sw-mega__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/*======= Left column: root categories =======*/

.sw-mega__side {
    flex: 0 0 264px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-inline-end: 1px solid var(--sw-line);
}

.sw-mega__list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 8px;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sw-mega__row {
    display: flex;
    align-items: stretch;
    border-radius: 9px;
    transition: background-color 0.13s ease;
}

.sw-mega__row.is-active {
    background: var(--sw-red-soft);
    /* The inset bar follows the border radius: a clean red accent, no
       layout shift. */
    box-shadow: inset 3px 0 0 var(--sw-red);
}

.rtl .sw-mega__row.is-active {
    box-shadow: inset -3px 0 0 var(--sw-red);
}

.sw-mega__cat {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 9px 12px;
    font: inherit;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--sw-ink-2);
    text-align: start;
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.sw-mega__row.is-active .sw-mega__cat {
    color: var(--sw-red);
    font-weight: 600;
}

.sw-mega__more {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding: 0;
    font-size: 13px;
    color: var(--sw-ink-3);
    background: none;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: color 0.13s ease, transform 0.15s ease;
}

.sw-mega__row.is-active .sw-mega__more {
    color: var(--sw-red);
    transform: translateX(2px);
}

.rtl .sw-mega__more { transform: rotate(180deg); }
.rtl .sw-mega__row.is-active .sw-mega__more { transform: rotate(180deg) translateX(2px); }

.sw-mega__alllink {
    flex: none;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sw-red);
    text-decoration: none;
    border-top: 1px solid var(--sw-line);
    transition: background-color 0.13s ease;
}

.sw-mega__alllink:hover {
    color: var(--sw-red);
    background: var(--sw-red-soft);
}

.sw-mega__alllink .las { font-size: 16px; }

/*======= Right column: subcategories of the active root =======*/

.sw-mega__panes {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 20px;
    background: #fafbfc;
}

.sw-mega__pane-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sw-line);
}

.sw-mega__pane-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--sw-ink);
    overflow-wrap: anywhere;
}

.sw-mega__viewall {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sw-red);
    text-decoration: none;
    border-radius: 6px;
}

.sw-mega__viewall:hover { color: var(--sw-red); text-decoration: underline; }

.rtl .sw-mega__viewall .las { transform: rotate(180deg); }

.sw-mega__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sw-mega__sub {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--sw-ink-2);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background-color 0.13s ease, border-color 0.13s ease, color 0.13s ease;
    overflow-wrap: anywhere;
}

.sw-mega__sub .las {
    flex: none;
    font-size: 12px;
    color: var(--sw-line-strong);
    transition: color 0.13s ease;
}

.rtl .sw-mega__sub .las { transform: rotate(180deg); }

.sw-mega__sub:hover {
    color: var(--sw-red);
    background: var(--sw-surface);
    border-color: var(--sw-line);
}

.sw-mega__sub:hover .las { color: var(--sw-red); }

/* Root without children: one clean action instead of an empty grid. */
.sw-mega__browse {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sw-red);
    text-decoration: none;
    background: var(--sw-surface);
    border: 1px solid var(--sw-line);
    border-radius: 9px;
    transition: border-color 0.13s ease, box-shadow 0.13s ease;
}

.sw-mega__browse:hover {
    color: var(--sw-red);
    border-color: var(--sw-red);
    box-shadow: 0 0 0 3px var(--sw-red-soft);
}

.rtl .sw-mega__browse .las { transform: rotate(180deg); }

/* Search with no hits */
.sw-mega__none {
    padding: 32px 16px;
    font-size: 13.5px;
    color: var(--sw-ink-3);
    text-align: center;
}

/* Between 992px and ~1200px the panel is narrower; keep the grid legible. */
@media (max-width: 1199px) {
    .sw-mega__side { flex-basis: 236px; }
    .sw-mega__grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/*======================================================================
  Home page
======================================================================*/

/* Consistent rhythm between home page sections. */
.home-section-wrap,
.banner-wrap,
.top-brands-wrap,
.grid-products-wrap,
.landscape-tab-products-wrap,
.vertical-products-wrap {
    margin-top: 28px;
}

@media (max-width: 767px) {
    .home-section-wrap,
    .banner-wrap,
    .top-brands-wrap,
    .grid-products-wrap,
    .landscape-tab-products-wrap,
    .vertical-products-wrap {
        margin-top: 20px;
    }
}

/*======================================================================
  Mobile category drawer
  Shown in the existing off-canvas sidebar; the desktop mega menu is never
  used at these widths (the whole .navigation-wrap is display:none below
  992px in the compiled CSS).
======================================================================*/

.sw-drawer-cats {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sw-drawer-cats__item {
    border-bottom: 1px solid var(--sw-line);
}

/* Open accordion group: gently tinted so the current section is obvious. */
.sw-drawer-cats__item.is-open {
    background: #fafbfc;
    margin: 0 -8px;
    padding: 0 8px;
    border-radius: 10px;
    border-bottom-color: transparent;
}

.sw-drawer-cats__row {
    display: flex;
    align-items: stretch;
    gap: 2px;
}

.sw-drawer-cats__link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    /* 48px tall: comfortable touch target. */
    min-height: 48px;
    padding: 12px 4px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--sw-ink);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.sw-drawer-cats__link:active,
.sw-drawer-cats__link:hover { color: var(--sw-red); }

.sw-drawer-cats__toggle {
    flex: none;
    width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 13px;
    color: var(--sw-ink-3);
    background: none;
    border: 0;
    cursor: pointer;
}

/* The chevron sits in a soft disc, giving the tap area a visible anchor. */
.sw-drawer-cats__toggle .las {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: var(--sw-page);
    border-radius: 50%;
    transition: transform 0.18s ease, color 0.13s ease, background-color 0.13s ease;
}

.sw-drawer-cats__toggle.is-expanded .las {
    transform: rotate(180deg);
    color: var(--sw-red);
    background: var(--sw-red-soft);
}

.sw-drawer-cats__toggle:focus-visible,
.sw-drawer-cats__link:focus-visible {
    outline: 2px solid var(--sw-red);
    outline-offset: -2px;
}

.sw-drawer-cats__children {
    margin: 0 0 10px;
    padding: 0 0 0 14px;
    list-style: none;
    border-left: 2px solid var(--sw-line);
}

.rtl .sw-drawer-cats__children {
    padding: 0 14px 0 0;
    border-left: 0;
    border-right: 2px solid var(--sw-line);
}

.sw-drawer-cats__children a {
    display: block;
    min-height: 44px;
    padding: 11px 10px;
    font-size: 13.5px;
    color: var(--sw-ink-2);
    text-decoration: none;
    border-radius: 8px;
}

.sw-drawer-cats__children a:hover,
.sw-drawer-cats__children a:focus-visible {
    color: var(--sw-red);
    background: var(--sw-red-soft);
}

.sw-drawer-cats__all .sw-drawer-cats__link {
    font-weight: 600;
    color: var(--sw-red);
}

/* A parent whose slug cannot be routed: readable, but not a dead link. */
.sw-drawer-cats__link--plain {
    color: var(--sw-ink-3);
    cursor: default;
}

/*======================================================================
  DARK THEME (2026-09) — appended overlay. Nothing here touches light
  mode: every rule is gated behind [data-theme="dark"], set on <html>
  by the theme script. The token flip re-skins every var()-driven rule
  above; the element rules below cover this file's hardcoded light
  hexes, each repeating the light rule's exact selector chain plus the
  prefix so it outranks the light rule and the compiled bundles.
======================================================================*/

:root[data-theme="dark"] {
    --sw-red-soft: rgba(245, 30, 70, 0.16);
    --sw-ink: #e7ecf2;
    --sw-ink-2: #b3bcc8;
    --sw-ink-3: #8a94a3;
    --sw-line: rgba(255, 255, 255, 0.12);
    --sw-line-strong: rgba(255, 255, 255, 0.25);
    --sw-surface: #1a202b;
    --sw-page: #12151d;
}

/* Mega menu right pane: hardcoded #fafbfc in the light rule above. */
[data-theme="dark"] .sw-mega__panes {
    background: #151a22;
}

/* Panel scrollbars: hardcoded thumb greys in the light rules above
   (the thumb's border already follows --sw-surface via the token flip). */
[data-theme="dark"] .sw-catnav__panel ::-webkit-scrollbar-thumb,
[data-theme="dark"] .sw-catnav__panel::-webkit-scrollbar-thumb {
    background: #3a4250;
}

[data-theme="dark"] .sw-catnav__panel ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .sw-catnav__panel::-webkit-scrollbar-thumb:hover {
    background: #4d5665;
}

/* Open drawer accordion group: hardcoded #fafbfc in the light rule above. */
[data-theme="dark"] .sw-drawer-cats__item.is-open {
    background: rgba(255, 255, 255, 0.05);
}