/* ── CSS Variables & Reset ──────────────────────────────── */
:root {
    --hdr-h: 72px;
    --nav-h: 48px;
    --mob-hdr-h: 60px;
    /* ── Mobile sticky stack offset:
       topbar (var(--topbar-h) if enabled) + admin quick bar
       (ADMIN_QUICKBAR_H if logged in) — all mobile sticky
       elements stack below this offset                       */
    --mob-sticky-top: var(--hdr-mob-sticky-top);
    /* Total sticky height for desktop sidebar offset */
    --total-sticky-h: calc(var(--hdr-h) + var(--nav-h));
    /* v7.92 — Worst-case distance from the top of the viewport to the
       bottom of the sticky stack, INCLUDING the optional top bar and the
       admin quick-bar. --total-sticky-h deliberately omits those (it is
       a scroll offset, measured once the bars have scrolled away), so it
       under-counts at scroll 0 and cannot be used to size a dropdown.
       This variable is the CSS-only fallback for .mega-menu-list; JS
       refines it per-frame from the element's real bounding rect. */
    --mega-stack-h: calc(var(--mob-sticky-top) + var(--hdr-h) + var(--nav-h));
    /* Total mobile sticky height for page content offset */
    --mob-total-sticky-h: calc(var(--mob-sticky-top) + var(--mob-hdr-h) + 42px);
    /* v8.01 — Single source of truth for scroll-margin-top on any
       in-page anchor target (e.g. a review's own #review-ID deep
       link, or the "see reviews" jump link). Built from the SAME
       totals the sticky bars themselves use, so it always matches
       the real stack — top bar, admin quick-bar, header, nav bar —
       on every breakpoint and account state, with no hardcoded
       guess to fall out of sync when the stack changes. */
    --anchor-offset: calc(var(--mega-stack-h) + 16px);
}
@media (max-width: 767px) {
    :root { --anchor-offset: calc(var(--mob-total-sticky-h) + 12px); }
}

/* ── Desktop Header Wrapper ─────────────────────────────── */
#yalo-header {
    background: var(--hdr-bg);
    backdrop-filter: var(--hdr-blur);
    -webkit-backdrop-filter: var(--hdr-blur);
    border-bottom: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
    position: sticky;
    top: var(--hdr-top-offset);
    z-index: 200;
    transition: box-shadow .3s, background .3s;
    display: none;
}
@media (min-width: 768px) {
    #yalo-header { display: block; height: var(--hdr-h); }
}

/* ── 3-Column Grid ─────────────────────────────────────── */
.hdr-grid {
    height: var(--hdr-h);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    direction: ltr; /* Always LTR layout */
}

/* RTL text fix inside header - text still in correct lang direction */
[dir="rtl"] .hdr-brand-text-wrap,
[dir="rtl"] .hdr-brand-slogan,
[dir="rtl"] .hdr-brand-name { direction: rtl; text-align: right; }
[dir="rtl"] .hdr-search-field { direction: rtl; }
[dir="rtl"] .navbar-links { direction: rtl; }
[dir="rtl"] .hdr-actions { direction: rtl; }

/* ── Col 1: Logo + Slogan ───────────────────────────────── */
.hdr-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    min-width: 0;
}
/* Dual light/dark brand logos — switch with the storefront theme.
   img.* specificity (0,1,1) intentionally beats the base .*-brand-img
   rules (0,1,0) so a single logo is never shown twice in either theme. */
img.brand-logo-dark { display:none; }
body.dark-mode img.brand-logo-light { display:none; }
body.dark-mode img.brand-logo-dark { display:block; }
.drawer-brand-logo { height:28px; object-fit:contain; }
.yf__logo--raw { filter:none; opacity:1; }
.hdr-brand-logo {
    height: var(--hdr-logo-h);
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.hdr-brand-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.hdr-brand-name {
    font-weight: 900;
    font-size: clamp(16px, 2vw, 22px);
    color: var(--clr-text);
    white-space: nowrap;
    line-height: 1.1;
}
.hdr-brand-name span { color: var(--clr-primary); }
.hdr-brand-slogan {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--clr-text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    line-height: 1.2;
}

/* ── Col 2: Smart Search ───────────────────────────────── */
.hdr-search-wrap {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
}
.hdr-search-field {
    width: 100%;
    height: 44px;
    padding: 0 48px;
    border: 1.5px solid var(--clr-border);
    border-radius: var(--field-radius);
    font-size: 14px;
    font-family: var(--font-main);
    color: var(--clr-text);
    background: var(--clr-surface-2);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    direction: inherit;
}
.hdr-search-field:focus {
    border-color: var(--clr-primary);
    background: var(--clr-surface);
    box-shadow: 0 0 0 4px rgba(var(--clr-primary-rgb),.10);
}
.hdr-search-field::placeholder { color: var(--clr-text-3); }
.hdr-search-icon-start {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: 16px;
    color: var(--clr-text-3);
    font-size: 14px;
    pointer-events: none;
    transition: color .2s;
}
.hdr-search-field:focus ~ .hdr-search-icon-start,
.hdr-search-wrap:focus-within .hdr-search-icon-start {
    color: var(--clr-primary);
}
.hdr-search-clear {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: 14px;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: none;
    background: var(--clr-border);
    color: var(--clr-text-2);
    font-size: 11px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.hdr-search-clear:hover { background: var(--clr-primary); color: #fff; }
.hdr-search-wrap.has-value .hdr-search-clear { display: flex; }

/* Search Results Dropdown */
.hdr-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0;
    width: 100%;
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1.5px solid var(--clr-border);
    z-index: 350;
    max-height: 420px;
    overflow-y: auto;
    display: none;
    scrollbar-width: thin;
    scrollbar-color: var(--clr-border) transparent;
}
.hdr-search-dropdown.open { display: block; animation: searchDropIn .18s ease; }
@keyframes searchDropIn {
    from { opacity:0; transform:translateY(-8px) scale(.98); }
    to   { opacity:1; transform:none; }
}
.hdr-search-drop-header {
    padding: 10px 14px 6px;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--clr-text-3);
    letter-spacing: .07em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--clr-border);
}
.hdr-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--clr-text);
    transition: background .15s;
    border-bottom: 1px solid var(--clr-border);
}
.hdr-search-item:last-child { border-bottom: none; }
.hdr-search-item:hover { background: var(--clr-primary-50); }
.hdr-search-item-img {
    width: 48px; height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--clr-surface-2);
    flex-shrink: 0;
}
.hdr-search-item-name {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--clr-text);
}
/* REF / SKU secondary line — always visible below product name */
.hdr-search-item-ref {
    font-size: 11px;
    font-weight: 600;
    color: var(--clr-text-3);
    margin-top: 2px;
    direction: ltr;
    unicode-bidi: plaintext;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hdr-search-item-price {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--clr-primary);
    margin-top: 2px;
    direction: ltr;
    unicode-bidi: plaintext;
}
.hdr-search-item-cat {
    font-size: 11px;
    color: var(--clr-text-3);
    margin-top: 1px;
}
.hdr-search-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--clr-text-3);
    font-size: 13px;
}
.hdr-search-empty i { font-size: 28px; display: block; margin-bottom: 8px; opacity: .4; }
.hdr-search-all-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px;
    font-size: 13px;
    font-weight: 700;
    color: var(--clr-primary);
    border-top: 1.5px solid var(--clr-border);
    text-decoration: none;
    transition: background .15s;
}
.hdr-search-all-link:hover { background: var(--clr-primary-50); }

/* ── Col 3: Actions ───────────────────────────────────── */
.hdr-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.hdr-act-btn {
    position: relative;
    width: 40px; height: 40px;
    border-radius: var(--radius);
    border: none;
    background: transparent;
    color: var(--clr-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}
.hdr-act-btn:hover {
    background: var(--clr-primary-50);
    color: var(--clr-primary);
    transform: translateY(-1px);
}
.hdr-act-count {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    min-width: 17px; height: 17px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    border: 2px solid var(--clr-surface);
    transition: transform .2s;
    box-shadow: 0 1px 6px rgba(239,68,68,.40);
}
.hdr-act-count:empty { display: none; }
.hdr-act-count.bump { animation: countBump .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes countBump { 0%,100% { transform:scale(1); } 50% { transform:scale(1.4); } }

/* ── Dark Mode Toggle ───────────────────────────────── */
.hdr-dark-btn {
    position: relative;
    width: 40px; height: 40px;
    border-radius: var(--radius);
    border: none;
    background: transparent;
    color: var(--clr-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    transition: var(--transition);
}
.hdr-dark-btn:hover {
    background: var(--clr-primary-50);
    color: var(--clr-primary);
}
.hdr-dark-btn .fa-moon  { display: block; }
.hdr-dark-btn .fa-sun   { display: none; }
body.dark-mode .hdr-dark-btn .fa-moon { display: none; }
body.dark-mode .hdr-dark-btn .fa-sun  { display: block; }

/* ── Language Dropdown ──────────────────────────────── */
.hdr-lang-wrap { position: relative; }
.hdr-lang-btn {
    width: 40px; height: 40px;
    border-radius: var(--radius);
    border: none;
    background: transparent;
    color: var(--clr-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: var(--transition);
}
.hdr-lang-btn:hover {
    background: var(--clr-primary-50);
    color: var(--clr-primary);
}
.hdr-lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1.5px solid var(--clr-border);
    min-width: 150px;
    z-index: 350;
    overflow: hidden;
    display: none;
    animation: langDropIn .18s ease;
}
@keyframes langDropIn {
    from { opacity:0; transform:translateY(-6px) scale(.97); }
    to   { opacity:1; transform:none; }
}
.hdr-lang-dropdown.open { display: block; }
.hdr-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--clr-text);
    text-decoration: none;
    transition: background .15s;
    white-space: nowrap;
}
.hdr-lang-item:hover { background: var(--clr-primary-50); color: var(--clr-primary); }
.hdr-lang-item.active { color: var(--clr-primary); font-weight: 800; background: var(--clr-primary-50); }
.hdr-lang-item-flag { font-size: 18px; line-height: 1; }
.hdr-lang-item-check { margin-inline-start: auto; font-size: 11px; color: var(--clr-primary); display: none; }
.hdr-lang-item.active .hdr-lang-item-check { display: block; }

/* ══════════════════════════════════════════════════════════
   DESKTOP NAV BAR
══════════════════════════════════════════════════════════ */
#yalo-navbar {
    background: rgba(30,41,59,.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.07);
    position: sticky;
    top: calc(var(--hdr-top-offset) + var(--hdr-h));
    z-index: 199;
    display: none;
    overflow: visible;
}
@media (min-width: 768px) {
    #yalo-navbar { display: block; height: var(--nav-h); }
}
.navbar-inner {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: 0;
    direction: ltr;
    position: relative;
    overflow: visible;
    /* Cats-btn (flex-shrink:0) sits at the start, links fill the rest */
    justify-content: flex-start;
}

/* Text direction inside nav links follows language */
[dir="rtl"] .navbar-link { direction: rtl; text-align: right; }
[dir="rtl"] .navbar-links { direction: rtl; }

/* ══════════════════════════════════════════════════════════
   NEW CASCADING MEGA MENU — Clean Professional Dropdown
   Design: sidebar list → sub-panel → sub-sub-panel
══════════════════════════════════════════════════════════ */

/* ── All Categories Button ──────────────────────────── */
.navbar-cats-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    height: 100%;
    background: var(--clr-primary);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition);
    flex-shrink: 0;
    position: relative;
    direction: ltr;
}
.navbar-cats-btn:hover { filter: brightness(1.08); }
.navbar-cats-btn i { font-size: 14px; }
.navbar-cats-btn .fa-chevron-down { font-size: 10px; transition: transform .25s; }
.navbar-cats-btn.open .fa-chevron-down { transform: rotate(180deg); }

/* ── Mega Menu Container ────────────────────────────── */
.mega-menu {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    width: 260px;
    background: var(--clr-surface);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.10);
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-primary);
    z-index: 300;
    display: none;
    overflow: visible;
    direction: ltr;
}
.mega-menu.open {
    display: block;
    animation: megaSlideIn .2s cubic-bezier(.16,1,.3,1);
}
@keyframes megaSlideIn {
    from { opacity:0; transform:translateY(-8px); }
    to   { opacity:1; transform:translateY(0); }
}
/* ── Mega Menu Header ──────────────────────────── */
.mega-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-surface-2);
}
.mega-menu-header-title {
    font-size: 9.5px;
    font-weight: 900;
    color: var(--clr-primary);
    text-transform: uppercase;
    letter-spacing: .1em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.mega-menu-header-link {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--clr-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--clr-primary-50);
    transition: background .15s;
}
.mega-menu-header-link:hover { background: var(--clr-primary-100); }

/* ── Category List ──────────────────────────── */
.mega-menu-list {
    padding: 5px 0 8px;
    /* Constrain list to viewport so items near the bottom stay visible
       and getBoundingClientRect() always returns on-screen coordinates */
    /* dvh tracks the *dynamic* viewport (collapsing mobile browser
       chrome); vh is kept as a fallback for browsers without dvh. */
    max-height: calc(100vh  - var(--mega-stack-h) - 24px);
    max-height: calc(100dvh - var(--mega-stack-h) - 24px);
    overflow-y: auto;
    overflow-x: visible;
    /* Reserve space for scrollbar so layout doesn't shift on scroll */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--clr-border) transparent;
    background: var(--clr-surface);
}
.mega-menu-list::-webkit-scrollbar { width: 4px; }
.mega-menu-list::-webkit-scrollbar-track { background: transparent; }
.mega-menu-list::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 2px; }

/* All Products entry */
.mega-all-products {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--clr-primary);
    background: color-mix(in srgb, var(--clr-primary) 6%, transparent);
    text-decoration: none;
    border-inline-start: 3px solid var(--clr-primary);
    margin-bottom: 4px;
    transition: background .15s;
}
.mega-all-products:hover { background: color-mix(in srgb, var(--clr-primary) 12%, transparent); }
.mega-all-products i { font-size: 12px; }

/* Category items */
.mega-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-text-2);
    cursor: pointer;
    text-decoration: none;
    transition: background .12s, color .12s, border-color .12s;
    border-inline-start: 3px solid transparent;
    position: relative;
    direction: ltr;
    text-align: left;
}
.mega-menu-item:hover,
.mega-menu-item.hovered {
    background: var(--clr-primary-50);
    color: var(--clr-primary);
    border-inline-start-color: var(--clr-primary);
}
.mega-menu-item-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--cat-icon-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--clr-primary) 10%, transparent);
    transition: background .12s;
}
.mega-menu-item:hover .mega-menu-item-icon,
.mega-menu-item.hovered .mega-menu-item-icon {
    background: var(--clr-primary);
}
.mega-menu-item:hover .mega-menu-item-icon i,
.mega-menu-item.hovered .mega-menu-item-icon i { color: #fff !important; }
.mega-menu-item-icon i { font-size: 12px; transition: color .12s; }
.mega-menu-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-menu-item-count {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--clr-text-3);
    background: var(--clr-border);
    padding: 1px 6px;
    border-radius: 999px;
    flex-shrink: 0;
    min-width: 20px;
    text-align: center;
    transition: background .12s, color .12s;
}
.mega-menu-item:hover .mega-menu-item-count,
.mega-menu-item.hovered .mega-menu-item-count {
    background: color-mix(in srgb, var(--clr-primary) 15%, transparent);
    color: var(--clr-primary);
}
.mega-menu-item-arrow {
    font-size: 8px;
    color: var(--clr-text-3);
    flex-shrink: 0;
    transition: color .12s, transform .14s;
}
.mega-menu-item:hover .mega-menu-item-arrow,
.mega-menu-item.hovered .mega-menu-item-arrow {
    color: var(--clr-primary);
    transform: translateX(2px);
}

/* ── Sub Panels (Level 2 & 3) — fixed position flyout ── */
.mega-sub-panel {
    position: fixed;
    top: 0; left: 0;
    width: 240px;
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.07);
    border-top: 2px solid var(--clr-primary);
    z-index: 350;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s, visibility .15s;
    overflow: hidden;
    direction: ltr;
}
.mega-sub-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.mega-sub-panel-header {
    padding: 8px 12px 6px;
    border-bottom: 1px solid var(--clr-border);
    background: var(--clr-surface-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mega-sub-panel-title {
    font-size: 9.5px;
    font-weight: 900;
    color: var(--clr-primary);
    text-transform: uppercase;
    letter-spacing: .09em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.mega-sub-panel-see-all {
    font-size: 10px;
    font-weight: 700;
    color: var(--clr-primary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: var(--radius-sm);
    background: var(--clr-primary-50);
    transition: background .14s;
    white-space: nowrap;
}
.mega-sub-panel-see-all:hover { background: var(--clr-primary-100); }
.mega-sub-panel-list {
    padding: 4px 0 6px;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--clr-border) transparent;
}
.mega-sub-panel-list::-webkit-scrollbar { width: 3px; }
.mega-sub-panel-list::-webkit-scrollbar-thumb { background: var(--clr-border); border-radius: 2px; }

/* Sub-panel items (level 2 & 3 share same style) */
.mega-sub-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--clr-text-2);
    text-decoration: none;
    transition: background .12s, color .12s;
    border-inline-start: 2px solid transparent;
    cursor: pointer;
    position: relative;
}
.mega-sub-item:hover,
.mega-sub-item.active-sub {
    background: var(--clr-primary-50);
    color: var(--clr-primary);
    border-inline-start-color: var(--clr-primary);
}
.mega-sub-item-icon {
    font-size: 10px;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    color: var(--clr-text-3);
    transition: color .12s;
}
.mega-sub-item:hover .mega-sub-item-icon,
.mega-sub-item.active-sub .mega-sub-item-icon { color: var(--clr-primary); }
.mega-sub-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega-sub-item-count {
    font-size: 9px;
    font-weight: 700;
    color: var(--clr-text-3);
    background: var(--clr-border);
    padding: 1px 5px;
    border-radius: 999px;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}
.mega-sub-item:hover .mega-sub-item-count,
.mega-sub-item.active-sub .mega-sub-item-count {
    background: color-mix(in srgb, var(--clr-primary) 15%, transparent);
    color: var(--clr-primary);
}
.mega-sub-item-arrow {
    font-size: 8px;
    color: var(--clr-text-3);
    flex-shrink: 0;
    transition: color .12s, transform .13s;
}
.mega-sub-item:hover .mega-sub-item-arrow,
.mega-sub-item.active-sub .mega-sub-item-arrow {
    color: var(--clr-primary);
    transform: translateX(2px);
}

/* ── Loading state ──────────────────────────── */
.mega-sub-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 14px;
    font-size: 12px;
    color: var(--clr-text-3);
}

/* ── Nav Links — Proper flex layout (no absolute positioning) ── */
/* Links fill the remaining width after the cats-btn, and        */
/* center their content internally. Zero overlap risk.           */
.navbar-links {
    flex: 1 1 0;          /* grow to fill remaining space */
    min-width: 0;          /* allow shrink below content size */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    white-space: nowrap;
    gap: 0;
    overflow: hidden;      /* clip if too narrow — no overlap */
}
/* RTL: same flex approach, text direction handled by dir attr on the element */
[dir="rtl"] .navbar-inner .navbar-links {
    direction: rtl;
}
/* When no categories button: full width (already the case with flex:1) */
.navbar-inner:not(:has(#mega-menu-wrap)) .navbar-links {
    justify-content: center;
}
.navbar-link {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    transition: var(--transition);
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    position: relative;
}
.navbar-link:hover,
.navbar-link.active {
    color: #fff;
    border-bottom-color: #04f9f9;
    background: rgba(255,255,255,.05);
}

/* ── Checkout: same style as other nav links (no overrides) ── */

/* ══════════════════════════════════════════════════════════
   MOBILE HEADER (hidden on desktop)
══════════════════════════════════════════════════════════ */
#yalo-mobile-header {
    display: flex;
    align-items: center;
    height: var(--mob-hdr-h);
    background: var(--hdr-bg);
    backdrop-filter: var(--hdr-blur);
    -webkit-backdrop-filter: var(--hdr-blur);
    border-bottom: 1px solid rgba(0,0,0,.07);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    position: sticky;
    top: var(--mob-sticky-top);
    z-index: 200;
    padding: 0 12px;
    gap: 8px;
    direction: ltr;
}
@media (min-width: 768px) {
    #yalo-mobile-header { display: none; }
}

/* ── Mobile layout: hamburger | brand (left, inline) | actions (right) */
.mob-hdr-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.mob-hdr-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    direction: ltr;
}
.mob-hdr-brand-img {
    height: 34px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
}
.mob-hdr-brand-text-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mob-hdr-brand-name {
    font-size: 16px;
    font-weight: 900;
    color: var(--clr-text);
    white-space: nowrap;
    line-height: 1.1;
    direction: ltr;
}
.mob-hdr-brand-name span { color: var(--clr-primary); }
.mob-hdr-right {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    margin-inline-start: auto;
    position: relative;
    z-index: 2;
}
.mob-hdr-btn {
    position: relative;
    width: 38px; height: 38px;
    border-radius: var(--radius);
    border: none;
    background: transparent;
    color: var(--clr-text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    cursor: pointer;
    transition: var(--transition);
}
.mob-hdr-btn:hover {
    background: var(--clr-primary-50);
    color: var(--clr-primary);
}
/* ── Mobile Header Wishlist Badge ──────────────────── */
.mob-hdr-wishlist { text-decoration: none; }
.mob-hdr-wl-badge {
    position: absolute;
    top: 3px;
    right: 3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    display: none;
    pointer-events: none;
}
.mob-hdr-wl-badge:not(:empty) { display: block; }

/* ── Mobile Search Drawer ───────────────────────────── */
#mob-search-drawer {
    position: fixed;
    top: calc(var(--mob-sticky-top) + var(--mob-hdr-h));
    inset-inline-start: 0;
    width: 100%;
    background: var(--clr-surface);
    z-index: 199;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-bottom: 1px solid var(--clr-border);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
    padding: 12px 14px 14px;
}
@media (min-width: 768px) {
    #mob-search-drawer { display: none; }
}
#mob-search-drawer.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.mob-search-inner {
    position: relative;
}
.mob-search-field {
    width: 100%;
    height: 44px;
    padding: 0 44px;
    border: 1.5px solid var(--clr-primary);
    border-radius: var(--field-radius);
    font-size: 14px;
    font-family: var(--font-main);
    color: var(--clr-text);
    background: var(--clr-surface-2);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--clr-primary-rgb),.10);
}
.mob-search-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-start: 15px;
    color: var(--clr-primary);
    font-size: 14px;
    pointer-events: none;
}
.mob-search-clear {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    inset-inline-end: 12px;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: none;
    background: var(--clr-border);
    color: var(--clr-text-2);
    font-size: 12px;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
}
.mob-search-inner.has-value .mob-search-clear { display: flex; }
.mob-search-results {
    margin-top: 10px;
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--clr-border);
    max-height: 55vh;
    overflow-y: auto;
    display: none;
    scrollbar-width: thin;
}
.mob-search-results.open { display: block; }

/* ── Mobile Language Dropdown ─────────────────────── */
.mob-lang-wrap { position: relative; }
.mob-lang-dropdown {
    position: fixed;
    top: calc(var(--mob-hdr-h) + var(--mob-sticky-top) + 4px);
    inset-inline-end: 8px;
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1.5px solid var(--clr-border);
    min-width: 150px;
    z-index: 500;
    overflow: hidden;
    display: none;
}
.mob-lang-dropdown.open { display: block; animation: langDropIn .18s ease; }

/* ══════════════════════════════════════════════════════════
   MOBILE NAV BAR (below mobile header)
══════════════════════════════════════════════════════════ */
#yalo-mob-navbar {
    background: rgba(15,23,42,.90);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,.07);
    overflow-x: auto;
    scrollbar-width: none;
    display: block;
    position: sticky;
    top: calc(var(--mob-sticky-top) + var(--mob-hdr-h));
    z-index: 198;
}
@media (min-width: 768px) {
    #yalo-mob-navbar { display: none; }
}
#yalo-mob-navbar::-webkit-scrollbar { display: none; }
.mob-navbar-inner {
    display: flex;
    align-items: center;
    height: 42px;
    gap: 0;
    white-space: nowrap;
    padding: 0 4px;
    /* Direction is set inline per-language (direction:rtl for Arabic)
       This makes tabs visually reverse for Arabic reading order
       while the scroll still works correctly */
}
.mob-navbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: 100%;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: var(--transition);
    flex-shrink: 0;
    white-space: nowrap;
}
.mob-navbar-link:hover,
.mob-navbar-link.active {
    color: #fff;
    border-bottom-color: #04f9f9;
    background: rgba(255,255,255,.06);
}
.mob-navbar-link i { font-size: 12px; }

/* ── Checkout: same style as other nav links (no overrides) ── */

/* ══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV BAR — Clean Square Design (matches image)
   5 tabs: Home | Shop | Cart(center) | Wishlist | Track
   Direction: follows page RTL/LTR for tab order
══════════════════════════════════════════════════════════ */
#yalo-bottom-nav {
    display: none; /* hidden by default, shown on mobile */
    align-items: stretch;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 66px;
    /* Glassmorphism */
    background: rgba(255,255,255,.94);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 -4px 20px rgba(0,0,0,.09);
    z-index: 150;
    /* Safe area for iPhone X+ */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow: hidden; /* allow center cart button to float above */
}
@media (max-width: 767px) {
    #yalo-bottom-nav { display: flex; }
}
body.dark-mode #yalo-bottom-nav {
    background: rgba(15,23,42,.94);
    border-top-color: rgba(255,255,255,.06);
    box-shadow: 0 -4px 20px rgba(0,0,0,.40);
}

/* ── Nav Item (standard tab) ──────────────────────── */
.bnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    position: relative;
    transition: color .18s ease;
    padding: 8px 4px 6px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    min-width: 0;
    overflow: hidden;
}
.bnav-item:active { opacity: .7; }
.bnav-item.active { color: var(--clr-primary); }
body.dark-mode .bnav-item { color: #64748b; }
body.dark-mode .bnav-item.active { color: var(--clr-primary); }

/* Icon inside tab */
.bnav-item .bnav-icon {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 18px;
    transition: background .18s, transform .25s cubic-bezier(.34,1.56,.64,1);
    flex-shrink: 0;
    position: relative;
}
.bnav-item.active .bnav-icon {
    background: color-mix(in srgb, var(--clr-primary) 12%, transparent);
    transform: scale(1.08);
    color: var(--clr-primary);
}

/* Label */
.bnav-item .bnav-label {
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Badge ─────────────────────────────────────────── */
.bnav-badge {
    position: absolute;
    top: -3px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    border: 1.5px solid #fff;
    line-height: 1;
    pointer-events: none;
}
body.dark-mode .bnav-badge { border-color: #0f172a; }
.bnav-badge:empty { display: none; }
.bnav-badge.bump { animation: countBump .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes countBump { 0%,100%{transform:scale(1)} 50%{transform:scale(1.5)} }

/* ── Center Cart Button ─────────────────────────── */
.bnav-center {
    flex: 1.2;
    overflow: visible !important;
}
.bnav-center .bnav-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: var(--clr-secondary);
    color: #fff;
    font-size: 22px;
    box-shadow: 0 6px 20px rgba(var(--clr-secondary-rgb),.48), 0 2px 6px rgba(0,0,0,.15);
    margin-top: -18px;
    transition: box-shadow .25s, transform .25s cubic-bezier(.34,1.56,.64,1);
    position: relative;
    overflow: visible;
}
/* Glass glare overlay on cart icon */
.bnav-center .bnav-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%);
    border: 1px solid rgba(255,255,255,.30);
    pointer-events: none;
    z-index: 1;
}
/* Bottom reflection */
.bnav-center .bnav-icon::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 40%;
    border-radius: 0 0 14px 14px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 100%);
    pointer-events: none;
    z-index: 1;
}
.bnav-center .bnav-icon i {
    position: relative;
    z-index: 2;
}
.bnav-center.active .bnav-icon,
.bnav-center .bnav-icon {
    background: var(--clr-secondary);
    color: #fff !important;
}
.bnav-center:active .bnav-icon {
    transform: scale(.91);
    box-shadow: 0 2px 8px rgba(var(--clr-secondary-rgb),.30);
}
/* Badge on center button: red, sharp, outside the icon */
.bnav-center .bnav-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    background: #ef4444;
    border: 2px solid #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(239,68,68,.50);
}
.bnav-center .bnav-badge:empty { display: none; }
body.dark-mode .bnav-center .bnav-badge { border-color: #0f172a; }
/* Ensure the nav itself never clips the lifted button */
#yalo-bottom-nav { overflow: visible !important; }

/* ── Dark Mode Styles ─────────────────────────────── */
/* The dark-mode TOKEN block that used to open this section now lives
   in core-base.css. It was never a header concern: it declares the
   surface, border and text colours for the WHOLE theme, and this file
   is loaded only by pages that render the site header. Any page that
   does not — the Ads Campaign landing page is the first — had a body
   with `dark-mode` set and no dark palette to go with it, so it
   rendered light-on-light. Moved to the bundle every page loads.
   The rules BELOW are genuinely header-scoped and stay here. */
body.dark-mode #yalo-header,
body.dark-mode #yalo-mobile-header {
    background: var(--hdr-dark-bg);
    border-bottom-color: rgba(255,255,255,.08);
}
body.dark-mode .hdr-search-field,
body.dark-mode .mob-search-field {
    background: var(--clr-surface);
    border-color: var(--clr-border);
    color: var(--clr-text);
}
body.dark-mode .hdr-search-dropdown,
body.dark-mode .mob-search-results,
body.dark-mode .hdr-lang-dropdown,
body.dark-mode .mob-lang-dropdown {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

/*
 * ── Search Results: Dark-Mode Unified Fix ─────────────────────
 * --clr-primary-50 is a near-white tint (mix toward #fff at 95%)
 * and looks correct in light mode but produces a glaring light
 * background in dark mode. All interactive search elements are
 * overridden here with rgba(primary-rgb, .12) — the same token
 * used by mega-menu and sidebar hover states for full consistency.
 *
 * Elements covered (both desktop dropdown & mobile sheet):
 *   • .hdr-search-item         — result row base + separator
 *   • .hdr-search-item:hover   — row hover state
 *   • .hdr-search-drop-header  — "RESULTS" label
 *   • .hdr-search-all-link     — "show all N results" footer
 *   • .hdr-search-all-link:hover
 *   • .hdr-search-empty        — spinner / no-results state
 *   • .hdr-search-item-img     — thumbnail background
 *   • .hdr-search-item-name    — product name text
 *   • .hdr-search-item-cat     — category label text
 * ─────────────────────────────────────────────────────────────
 */
body.dark-mode .hdr-search-item,
body.dark-mode .mob-search-results .hdr-search-item {
    color: var(--clr-text);
    border-bottom-color: var(--clr-border);
    background: transparent;
}
body.dark-mode .hdr-search-item:hover,
body.dark-mode .mob-search-results .hdr-search-item:hover {
    background: rgba(var(--clr-primary-rgb), .12);
    color: var(--clr-text);
}
body.dark-mode .hdr-search-drop-header {
    color: var(--clr-text-3);
    border-bottom-color: var(--clr-border);
}
body.dark-mode .hdr-search-all-link {
    border-top-color: var(--clr-border);
    color: var(--clr-primary);
    background: var(--clr-surface-2);
}
body.dark-mode .hdr-search-all-link:hover {
    background: rgba(var(--clr-primary-rgb), .12);
}
body.dark-mode .hdr-search-empty {
    color: var(--clr-text-3);
}
body.dark-mode .hdr-search-item-img {
    background: var(--clr-surface-2);
}
body.dark-mode .hdr-search-item-name {
    color: var(--clr-text);
}
body.dark-mode .hdr-search-item-ref {
    color: var(--clr-text-3);
}
body.dark-mode .hdr-search-item-cat {
    color: var(--clr-text-3);
}
body.dark-mode .mega-menu {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}
body.dark-mode .mega-menu-header {
    background: var(--clr-surface-2);
    border-bottom-color: var(--clr-border);
}
body.dark-mode .mega-menu-list {
    background: var(--clr-surface);
    scrollbar-color: var(--clr-border) transparent;
}
body.dark-mode .mega-menu-item { color: var(--clr-text-2); }
body.dark-mode .mega-menu-item:hover,
body.dark-mode .mega-menu-item.hovered {
    background: rgba(var(--clr-primary-rgb),.12);
    color: var(--clr-primary);
}
body.dark-mode .mega-menu-item-icon { background: rgba(var(--clr-primary-rgb),.15); }
body.dark-mode .mega-sub-panel {
    background: var(--clr-surface);
    border-color: var(--clr-border);
    box-shadow: 0 16px 48px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.05);
}
body.dark-mode .mega-sub-panel-header { background: var(--clr-surface-2); }
body.dark-mode .mega-sub-item { color: var(--clr-text-2); }
body.dark-mode .mega-sub-item:hover,
body.dark-mode .mega-sub-item.active-sub {
    background: rgba(var(--clr-primary-rgb),.12);
    color: var(--clr-primary);
}
body.dark-mode .mega-all-products { color: var(--clr-primary); }
body.dark-mode .hdr-brand-name { color: var(--clr-text); }
body.dark-mode .mob-hdr-brand-name { color: var(--clr-text); }