/* ==========================================================================
   Nexsky Base Styles – corrected version
   Changes:
   1. Removed `html { font-size: 16px !important; … }` to restore user zoom
   2. Added `.announcement-bar.clickable { cursor: pointer; }`
   3. Polished mega‑menu and mobile category accordion sheet
   4. Added safe‑area support, modern accordion animation, focus states,
      OS‑level motion preference, fixed Parastoo bold font, color‑variable
      cleanup, and mega‑menu hover delay.
   5. Mobile bottom nav redesigned as floating glass island with rounded
      corners and margins. Respects lite‑mode (reduced visual effects).
   6. Footer z‑index fix: stays behind all overlays and sticky elements.
   7. Font changed to IRANSans (six weights).
   8. Floating island navbar for a more cohesive, premium look.
   ========================================================================== */

/* ---------- IRANSans Web Font ---------- */
@font-face {
  font-family: 'IRANSans';
  src: url("/static/fonts/iransans/IRANSansWeb_UltraLight.068169d2ab5f.woff2") format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSans';
  src: url("/static/fonts/iransans/IRANSansWeb_Light.f7e4be98d20e.woff2") format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSans';
  src: url("/static/fonts/iransans/IRANSansWeb.0b5055ac3573.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSans';
  src: url("/static/fonts/iransans/IRANSansWeb_Medium.9c66b762719d.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSans';
  src: url("/static/fonts/iransans/IRANSansWeb_Bold.43a0ecf3c7f2.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANSans';
  src: url("/static/fonts/iransans/IRANSansWeb_Black.f477dd9634c9.woff2") format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* ---------------------------------------- */

:root {
    --bg: #02040a;
    --bg-secondary: rgba(10, 14, 29, 0.95);
    --surface: rgba(255, 255, 255, 0.05);
    --surface-hover: rgba(255, 255, 255, 0.08);
    --primary: #00f0ff;
    --primary-light: #60f3ff;
    --primary-dark: #0698d6;
    --accent: #8a2be2;
    --accent-light: #a855f7;
    --accent-dark: #6d28d9;
    --cyan: #22d3ee;
    --cyan-light: #7dd3fc;
    --rose: #ff0055;
    --text: #eef2ff;
    --text-secondary: rgba(238, 242, 255, 0.72);
    --text-muted: rgba(238, 242, 255, 0.6);
    --border: rgba(255, 255, 255, 0.1);
    --border-light: rgba(255, 255, 255, 0.16);
    --font-heading: 'IRANSans', 'Tahoma', 'Arial', sans-serif;
    --font-body: 'IRANSans', 'Tahoma', 'Arial', sans-serif;
    --fs-1: clamp(2rem, 3.2vw, 2.8rem);
    --fs-2: clamp(1.45rem, 2.2vw, 1.9rem);
    --fs-3: 1.2rem;
    --fs-body: 0.95rem;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 14px;
    --space-lg: 20px;
    --space-xl: 40px;
    --container-width: 1200px;
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --shadow-card: 0 4px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 40px rgba(59,130,246,0.12), 0 0 80px rgba(59,130,246,0.05);
    --shadow-glow-cyan: 0 0 40px rgba(6,182,212,0.12), 0 0 80px rgba(6,182,212,0.05);
    --transition-fast: 0.2s ease;
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
    --transition-smooth: 0.5s cubic-bezier(0.22,1,0.36,1);
    --bottom-nav-height: 64px;
    --navbar-height: 72px;
}

body.light-mode {
    --bg: #f1f5f9;
    --bg-secondary: #ffffff;
    --surface: #ffffff;
    --surface-hover: #f8fafc;
    --text: #0f172a;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-light: #cbd5e1;
    --shadow-glow: 0 0 30px rgba(216,27,63,0.15);
    --shadow-glow-cyan: 0 0 30px rgba(255,45,85,0.15);
    --primary: #d81b3f;
    --primary-light: #ff2d55;
    --primary-dark: #a80023;
}

body.light-mode .nav-logo .logo-icon {
    background: rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.1);
}

body.light-mode .nav-icon-btn {
    border-color: rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.03);
}

body.light-mode .announcement-bar .banner-close {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.2);
    color: var(--text);
}

body.light-mode .mobile-profile {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
}

body.light-mode .mobile-theme-toggle {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.12);
    color: var(--text);
}

body.light-mode .mobile-nav-links a:hover,
body.light-mode .mobile-nav-links button:hover {
    background: rgba(0,0,0,0.04);
    color: var(--text);
}

body.light-mode .footer-socials a {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.12);
    color: var(--text);
}

body.light-mode .sheet-handle {
    background: rgba(0,0,0,0.2);
}

* { margin:0; padding:0; box-sizing:border-box; }
html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}

::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius:3px; }

body {
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0;
    background:
        radial-gradient(circle at 18% 10%, rgba(0,240,255,0.12), transparent 18%),
        radial-gradient(circle at 84% 15%, rgba(255,0,85,0.12), transparent 20%),
        radial-gradient(circle at 50% 80%, rgba(138,43,226,0.08), transparent 22%),
        var(--bg);
    color: var(--text);
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: color 0.15s ease;  /* THEODOR-THEME-INP-V1 */
    position: relative;
    padding-bottom: 0;
}

h1, h2, h3, h4, h5, h6, p, a, span, button, input, textarea, label, div, li {
    font-family: var(--font-body) !important;
}

/* ==================== ACCESSIBILITY & FOCUS ==================== */
:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary-light);
    outline-offset: 2px;
}

/* ==================== MOTION PREFERENCE ==================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==================== BACKGROUND ORBS ==================== */
.bg-orbs,
.bg-orbs::before,
.bg-orbs::after,
.bg-orb {
    display: none !important;
    animation: none !important;
    transform: none !important;
}

.nav-icon-btn.active {
    background: rgba(0, 240, 255, 0.14);
    color: var(--primary-light);
    border-color: rgba(0, 240, 255, 0.3);
    box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.16);
}

.auth-link,
.lite-mode-toggle {
    text-decoration: none;
    color: var(--text);
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    white-space: nowrap;
}

.auth-link:hover,
.lite-mode-toggle:hover,
.lite-mode-toggle.active {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.24);
    color: var(--text);
    transform: translateY(-1px);
}

body.light-mode .auth-link,
body.light-mode .lite-mode-toggle {
    color: var(--text);
    background: rgba(15,23,42,0.06);
    border-color: rgba(15,23,42,0.12);
    box-shadow: 0 8px 24px rgba(15,23,42,0.08);
}

body.light-mode .auth-link:hover,
body.light-mode .lite-mode-toggle:hover,
body.light-mode .lite-mode-toggle.active {
    color: var(--text);
    background: rgba(15,23,42,0.08);
    border-color: rgba(15,23,42,0.16);
}

body.light-mode .lite-mode-toggle.active {
    background: rgba(255, 45, 85, 0.16);
    border-color: rgba(255, 45, 85, 0.32);
    box-shadow: 0 8px 24px rgba(255, 45, 85, 0.12);
}

.lite-mode-toggle.active {
    background: rgba(0, 240, 255, 0.16);
    border-color: rgba(0, 240, 255, 0.32);
    box-shadow: 0 8px 24px rgba(0, 240, 255, 0.16);
}

body.reduced-visual-effects {
    background: var(--bg);
}

body.reduced-visual-effects .bg-orbs,
body.reduced-visual-effects .bg-orbs::before,
body.reduced-visual-effects .bg-orbs::after,
body.reduced-visual-effects .bg-orb,
body.reduced-visual-effects .announcement-bar::before,
body.reduced-visual-effects .announcement-bar::after,
body.reduced-visual-effects .hero-floating-card,
body.reduced-visual-effects .conicSpin,
body.reduced-visual-effects .slowSpin,
body.reduced-visual-effects .gradientShift,
body.reduced-visual-effects .floatAura,
body.reduced-visual-effects .orbFloat {
    animation: none !important;
    transition: none !important;
}

body.reduced-visual-effects .announcement-bar,
body.reduced-visual-effects .announcement-bar::before,
body.reduced-visual-effects .announcement-bar::after,
body.reduced-visual-effects .mobile-nav,
body.reduced-visual-effects .search-overlay,
body.reduced-visual-effects .category-sheet,
body.reduced-visual-effects .mega-menu,
body.reduced-visual-effects .newsletter-card,
body.reduced-visual-effects .campaign-card,
body.reduced-visual-effects .navbar,
body.reduced-visual-effects .bottom-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.reduced-visual-effects .bottom-nav {
    background: rgba(0, 0, 0, 0.85);       /* solid fallback for lite mode */
}

body.light-mode.reduced-visual-effects .bottom-nav {
    background: rgba(255, 255, 255, 0.9);
}

body.reduced-visual-effects .navbar,
body.reduced-visual-effects .navbar::before,
body.reduced-visual-effects .navbar::after {
    animation: none !important;
}

body.reduced-visual-effects .navbar {
    background: rgba(0, 0, 0, 0.92);
}

body.light-mode.reduced-visual-effects .navbar {
    background: rgba(255, 255, 255, 0.96);
}

body.reduced-visual-effects .bg-orbs::before,
body.reduced-visual-effects .bg-orbs::after {
    filter: blur(20px) !important;
    opacity: 0.08 !important;
}

body.reduced-visual-effects .bg-orb {
    filter: blur(40px) !important;
    opacity: 0.1 !important;
}

body.reduced-visual-effects .emoji-bg,
body.reduced-visual-effects .product-card,
body.reduced-visual-effects .product-card:hover,
body.reduced-visual-effects .product-card:hover .card-img-inner,
body.reduced-visual-effects .subcat-card,
body.reduced-visual-effects .subcat-card:hover,
body.reduced-visual-effects .blog-pattern,
body.reduced-visual-effects .articles-hero::before,
body.reduced-visual-effects .blog-card,
body.reduced-visual-effects .blog-card:hover,
body.reduced-visual-effects .blog-body,
body.reduced-visual-effects .read-more,
body.reduced-visual-effects .read-more:hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

body.reduced-visual-effects .announcement-bar {
    background: rgba(0, 0, 0, 0.92);
}

body.light-mode.reduced-visual-effects .announcement-bar {
    background: rgba(255, 255, 255, 0.96);
}

/* ===== Luxury Announcement Bar ===== */
.announcement-bar {
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: var(--text);
    text-align: center;
    position: relative;
    z-index: 102;
    overflow: hidden;
    height: 0;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 1px solid transparent;
}

body.light-mode .announcement-bar {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: var(--text);
}

.announcement-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 240, 255, 0.15) 0%,
        rgba(138, 43, 226, 0.1) 25%,
        rgba(255, 0, 85, 0.08) 50%,
        rgba(0, 240, 255, 0.05) 75%,
        rgba(138, 43, 226, 0.1) 100%
    );
    background-size: 300% 300%;
    animation: gradientShift 8s ease infinite;
    z-index: 0;
}

.announcement-bar::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--primary) 20%,
        var(--accent-light) 50%,
        var(--primary) 80%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.4s;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.announcement-bar.visible {
    height: 56px;
    padding: 0 48px 0 20px;
    box-shadow: 0 4px 20px rgba(0, 240, 255, 0.15),
                inset 0 1px 0 rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
}

.announcement-bar.visible::after {
    opacity: 1;
}

.announcement-bar.clickable {
    cursor: pointer;
}

.announcement-bar .banner-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
    position: relative;
    z-index: 1;
    color: var(--text);
    letter-spacing: 0.2px;
    text-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
}

body.light-mode .announcement-bar .banner-text {
    color: var(--text);
    text-shadow: 0 0 12px rgba(6,152,214,0.2);
}

.announcement-bar .banner-close {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    color: var(--text);
    cursor: pointer;
    font-size: 1.2rem;
    opacity: 0.9;
    transition: all 0.3s;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.announcement-bar .banner-close:hover {
    opacity: 1;
    background: rgba(255, 0, 85, 0.2);
    border-color: var(--rose);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 12px rgba(255, 0, 85, 0.3);
}

.banner-nav-dots {
    display: flex;
    gap: 8px;
    margin-left: 12px;
    position: relative;
    z-index: 1;
}

.banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 8px rgba(0,240,255,0.2);
}

.banner-dot.active {
    background: #fff;
    box-shadow: 0 0 12px rgba(0, 240, 255, 0.8);
    transform: scale(1.3);
}

.main-container { position:relative; z-index:1; width:100%; max-width:none; margin:0; padding:0 clamp(1rem, 2.5vw, 2rem); }

/* ============ FLOATING ISLAND NAVBAR ============ */
.navbar {
    position: sticky;
    top: 0;                            /* THEODOR-NAVBAR-STATIC-V1 - stuck to top */
    z-index: 100;
    height: var(--navbar-height);
    margin: 0;                          /* THEODOR-NAVBAR-STATIC-V1 - no island gap */
    border-radius: 0 0 24px 24px;       /* THEODOR-NAVBAR-STATIC-V1 - bottom corners only */
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s ease, background 0.3s ease;  /* THEODOR-NAVBAR-STATIC-V1 - drop island-only props */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    contain: layout style;
    will-change: transform, box-shadow;
    overflow: visible;
    isolation: isolate;
}

.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(0, 240, 255, 0.15) 0%,
        rgba(138, 43, 226, 0.1) 25%,
        rgba(255, 0, 85, 0.08) 50%,
        rgba(0, 240, 255, 0.05) 75%,
        rgba(138, 43, 226, 0.1) 100%
    );
    background-size: 300% 300%;
    background-position: 50% 50%;       /* THEODOR-NAVBAR-STATIC-V1 - frozen gradient */
    animation: none;                    /* THEODOR-NAVBAR-STATIC-V1 - no per-frame repaint */
    z-index: 0;
    opacity: 0.85;
}

.navbar::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--primary) 20%,
        var(--accent-light) 50%,
        var(--primary) 80%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 1;
    border-radius: 2px;
}

.navbar.scrolled {
    top: 0;                            /* attach to top – no gap */
    margin: 0;
    border-radius: 0 0 24px 24px;
    border-color: rgba(0,240,255,0.15);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    background: rgba(0, 0, 0, 0.85);
}

.navbar.scrolled::after {
    opacity: 0.6;
}

body.light-mode .navbar {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

body.light-mode .navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(6,152,214,0.2);
}

.nav-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 clamp(1rem, 2.5vw, 2rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: 24px;
    position: relative;
    z-index: 1;
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.nav-logo .logo-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.3s, filter 0.3s;
    background: rgba(255,255,255,0.05);
}
.nav-logo .logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.nav-logo:hover .logo-icon { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(0,240,255,0.4)); }

/* Desktop nav links */
.nav-links {
    display: flex;
    list-style: none;
    gap: 4px;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    flex: 1;
    overflow: visible;
    flex-wrap: nowrap;
}
.nav-links::-webkit-scrollbar {
    display: none;
}
.nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.85rem;
    transition: color 0.25s ease, background-color 0.25s ease;
    position: relative;
    white-space: nowrap;
}
.nav-links a:hover {
    color: var(--text);
    background: rgba(0,240,255,0.06);
}
body.light-mode .nav-links a:hover {
    color: var(--primary-dark);
    background: rgba(6,152,214,0.06);
}
.nav-links a.active {
    background: rgba(0,240,255,0.1);
    color: var(--primary-light);
    font-weight: 600;
}
body.light-mode .nav-links a {
    color: var(--text-secondary);
}
body.light-mode .nav-links a.active {
    background: rgba(6,152,214,0.12);
    color: var(--primary-dark);
}
.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: var(--primary);
    border-radius: 2px;
}

.nav-actions {
    display: flex;
    gap: 10px;                                       /* OLIVER-DESKTOP-NAVBAR-UI-V1 */
    align-items: center;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

/* Icon buttons */
.nav-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;                                     /* OLIVER-DESKTOP-NAVBAR-UI-V1 */
    height: 38px;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text);
    text-decoration: none;
    transition: background-color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
    font-size: 0.95rem;
    cursor: pointer;
    background-color: transparent;
    font-family: var(--font-body);
}
.nav-icon-btn:hover {
    border-color: rgba(0,240,255,0.40);              /* OLIVER-DESKTOP-NAVBAR-UI-V1 */
    box-shadow: 0 4px 14px rgba(0,0,0,0.18), 0 0 16px rgba(0,240,255,0.15);
    background: rgba(0,240,255,0.08);
}
.cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--rose);
    color: #fff;
    border-radius: 12px;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Login/Register buttons */
.btn-nav {
    padding: 9px 16px;                               /* OLIVER-DESKTOP-NAVBAR-UI-V1 */
    border-radius: 28px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.82rem;
    transition: all 0.25s ease;
    white-space: nowrap;
    font-family: var(--font-body);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.btn-nav-outline {
    background: transparent;
    border: 1.5px solid rgba(0,240,255,0.3);
    color: var(--text);
}
.btn-nav-outline:hover {
    border-color: var(--primary);
    color: var(--primary-light);
    background: rgba(0,240,255,0.05);
    box-shadow: 0 0 20px rgba(0,240,255,0.2);
}
.btn-nav-filled {
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    color: #fff;
    box-shadow: 0 6px 20px rgba(0,240,255,0.35);
}
.btn-nav-filled:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,240,255,0.5);
}

/* User menu dropdown */
.user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.user-menu-btn {
    background: transparent;
    border: 1.5px solid rgba(0,240,255,0.3);
    border-radius: 28px;
    color: var(--text);
    padding: 10px 18px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s;
    font-family: var(--font-body);
    white-space: nowrap;
}
.user-menu-btn:hover {
    border-color: var(--primary);
    background: rgba(0,240,255,0.05);
    color: var(--primary-light);
    box-shadow: 0 0 20px rgba(0,240,255,0.2);
}
.user-menu-btn i { font-size: 1.1rem; }
.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(8,12,22,0.96);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(0,240,255,0.15);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(0,240,255,0.1);
    min-width: 200px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 200;
    direction: rtl;
    text-align: right;
}
body.light-mode .user-dropdown {
    background: rgba(255,255,255,0.97);
    border-color: rgba(6,152,214,0.2);
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
.user-menu:hover .user-dropdown,
.user-menu:focus-within .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.user-dropdown a,
.user-dropdown button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    font-family: var(--font-body);
}
.user-dropdown a:hover,
.user-dropdown button:hover {
    background: rgba(0,240,255,0.06);
    color: var(--text);
}
body.light-mode .user-dropdown a:hover,
body.light-mode .user-dropdown button:hover {
    color: var(--primary-dark);
    background: rgba(6,152,214,0.06);
}
.user-dropdown hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 6px 0;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-size: 1.8rem;
    padding: 8px;
    transition: color 0.2s;
    flex-shrink: 0;
}
.hamburger:hover { color: var(--primary-light); }

/* ===== Default Mega Menu (blog & others) ===== */
.has-mega { position: relative; }

.has-mega::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 14px;
    z-index: 1;
}

.mega-menu {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    background: rgba(8, 12, 20, 0.97);
    border: 1px solid rgba(0,240,255,0.12);
    border-radius: 28px;
    min-width: 700px;
    padding: 28px;
    box-shadow: 0 40px 90px rgba(0,0,0,0.8), 0 0 40px rgba(0,240,255,0.15);
    z-index: 200;
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(4px) scale(0.98);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.9, 0.4, 1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.has-mega:not(:hover) > .mega-menu {
    transition-delay: 0.15s;
}

.has-mega:hover .mega-menu,
.has-mega:focus-within .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.mega-col {
    min-width: 0;
}
.mega-col h5 { color: var(--primary-light); margin-bottom: 12px; font-size: 0.95rem; font-weight: 700; }
.mega-col h5 a { color: inherit; text-decoration: none; }
.mega-col a { display: block; padding: 6px 0; color: var(--text-secondary); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
.mega-col a:hover { color: var(--primary-light); }

body.light-mode .mega-menu {
    background: rgba(255,255,255,0.98);
    border-color: rgba(6,152,214,0.1);
    box-shadow: 0 40px 90px rgba(15,23,42,0.1);
}

/* ===== Catalog Mega Menu – Grandparent → Parent → Child (hover) ===== */
.mega-menu-catalog {
    display: flex !important;
    flex-direction: row !important;
    /* Shrunk from 800px — with only the بازار کالا root, an 800px panel
       left huge empty space. Content-driven width now; max stays 1100
       so more root categories can still expand it. */
    min-width: 360px !important;
    max-width: 1100px !important;
    padding: 0 !important;
    overflow: visible !important;
    grid-template-columns: unset !important;
    gap: unset !important;
    background: rgba(8, 12, 20, 0.97) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 28px !important;
}

.mega-menu-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow: visible;
    padding: 24px 28px;
    gap: 32px;
    direction: rtl;
}

.mega-grandparent-column {
    flex: 1;
    min-width: 180px;
}

.mega-grandparent-title {
    color: var(--primary-light);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0,240,255,0.2);
    padding-bottom: 8px;
    letter-spacing: -0.2px;
}
.mega-grandparent-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.mega-grandparent-title a:hover { color: var(--text); }

.mega-parent-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-parent-item {
    position: relative;
    margin-bottom: 2px;
}

.mega-parent-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.87rem;
    font-weight: 600;
    border-radius: 10px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    position: relative;
}
.mega-parent-link.has-children::after {
    content: '‹';
    font-size: 1.1rem;
    color: inherit;
    margin-right: auto;
    opacity: 0.4;
    transition: opacity 0.2s, transform 0.3s ease;
}
.mega-parent-item:hover .mega-parent-link.has-children::after {
    opacity: 1;
    transform: rotate(90deg) translateX(2px);
}
.mega-parent-link:hover {
    background: rgba(0,240,255,0.08);
    color: var(--text);
    box-shadow: 0 0 12px rgba(0,240,255,0.08);
}

.mega-child-panel {
    display: none;
    position: absolute;
    top: 0;
    right: 100%;
    background: rgba(8,12,22,0.96);
    border: 1px solid rgba(0,240,255,0.1);
    border-radius: 16px;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 0;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    z-index: 10;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: fadeSlideIn 0.2s ease;
    transition: visibility 0s 0.2s, opacity 0.2s 0.1s;
}
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

.mega-parent-item:hover .mega-child-panel,
.mega-parent-item:focus-within .mega-child-panel {
    display: block;
}

.mega-parent-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -6px;
    width: 6px;
    height: 100%;
    z-index: 2;
}

.mega-child-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mega-child-list li a {
    display: block;
    padding: 9px 24px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.82rem;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.mega-child-list li a:hover {
    background: rgba(0,240,255,0.08);
    color: var(--text);
}

body.light-mode .mega-menu-catalog {
    background: rgba(255,255,255,0.98) !important;
}
body.light-mode .mega-parent-link:hover {
    background: rgba(6,152,214,0.06);
    color: var(--text);
}
body.light-mode .mega-child-panel {
    background: rgba(255,255,255,0.98);
    border-color: rgba(6,152,214,0.1);
}

.mega-menu-catalog .mega-sidebar,
.mega-menu-catalog .mega-content-area,
.mega-menu-catalog .mega-content-panel,
.mega-menu-catalog .mega-col {
    display: none !important;
}

/* ==================== MOBILE BOTTOM NAVIGATION (FLOATING GLASS ISLAND) ==================== */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 480px;
    height: auto;
    padding: 6px 8px;
    padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
    background: rgba(10, 14, 26, 0.72);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 40px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 4px;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

body.light-mode .bottom-nav {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Lite mode – no backdrop, simpler background */
body.reduced-visual-effects .bottom-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0, 0, 0, 0.85);
}

body.light-mode.reduced-visual-effects .bottom-nav {
    background: rgba(255, 255, 255, 0.9);
}

.bottom-nav a,
.bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 52px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 500;
    gap: 2px;
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    border-radius: 28px;
    padding: 4px 4px;
}

.bottom-nav a.active,
.bottom-nav button.active {
    color: var(--primary-light, #00f0ff);
}

.bottom-nav a.active::before,
.bottom-nav button.active::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: rgba(0, 240, 255, 0.12);
    border-radius: 28px;
    z-index: -1;
}

.bottom-nav .nav-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.bottom-nav .cart-badge-mobile {
    position: absolute;
    top: 2px;
    right: calc(50% - 14px);
    background: var(--rose, #ff0055);
    color: #fff;
    border-radius: 10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

@media (min-width: 769px) and (max-width: 1160px) {
    .bottom-nav {
        display: flex;
    }
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}

@media (min-width: 1161px) {
    .bottom-nav {
        display: none;
    }
}

/* Adjust body padding on mobile so content is not hidden behind the island */
@media (max-width: 768px) {
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    }
}

/* ==================== MOBILE SIDE PANEL ==================== */
.mobile-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 380px;
    height: 100vh;
    background: linear-gradient(180deg, rgba(8,12,20,0.98) 0%, rgba(3,5,10,0.98) 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-left: 1px solid rgba(0,240,255,0.12);
    z-index: 200;
    padding: 0;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: -20px 0 60px rgba(0,0,0,0.8);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
body.light-mode .mobile-nav {
    background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(241,245,249,0.98) 100%);
    border-left-color: rgba(6,152,214,0.2);
    box-shadow: -20px 0 60px rgba(0,0,0,0.1);
}
.mobile-nav.open { transform: translateX(0); }

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 20px;
    border-bottom: 1px solid rgba(0,240,255,0.08);
    background: linear-gradient(135deg, rgba(0,240,255,0.05), rgba(138,43,226,0.05));
}
.mobile-brand { display: flex; align-items: center; gap: 8px; }
.mobile-brand .logo-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    overflow: hidden;
}
.mobile-brand .logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.mobile-close {
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: var(--text);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.mobile-close:hover { background: rgba(255,0,85,0.15); color: var(--rose); }

.mobile-profile {
    margin: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: rgba(255,255,255,0.03);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,0.06);
}
.mobile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    font-weight: 800;
    flex-shrink: 0;
}
.mobile-user-details { flex: 1; }
.mobile-user-name { font-weight: 700; color: var(--text); font-size: 1rem; }
.mobile-user-email { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }

.mobile-theme-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    margin: 0 20px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(0,240,255,0.1);
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.95rem;
    transition: background 0.2s;
}
.mobile-theme-toggle:hover { background: rgba(0,240,255,0.05); }

.mobile-nav-links {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px 20px;
}
.mobile-nav-links a,
.mobile-nav-links button {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: right;
    font-family: var(--font-body);
}
.mobile-nav-links a:hover,
.mobile-nav-links button:hover {
    background: rgba(0,240,255,0.06);
    color: var(--text);
}
body.light-mode .mobile-nav-links a:hover,
body.light-mode .mobile-nav-links button:hover {
    background: rgba(6,152,214,0.06);
    color: var(--text);
}
.mobile-nav-links .nav-icon { font-size: 1.3rem; width: 24px; text-align: center; }

.overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 150; cursor: pointer; }
.overlay.show { display: block; }

/* ==================== SEARCH OVERLAY ==================== */
.search-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 250;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    box-sizing: border-box;
}
body.light-mode .search-overlay {
    background: rgba(255,255,255,0.95);
}
.search-overlay.show { display: flex; }
.search-overlay .close-search {
    position: absolute;
    top: 20px;
    left: 20px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
}
.search-overlay form {
    width: 100%;
    max-width: 500px;
    margin-top: 80px;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(0,240,255,0.3);
    border-radius: 40px;
    overflow: hidden;
    height: 56px;
}
.search-overlay input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 0 24px;
    font-size: 1.1rem;
    font-family: var(--font-body);
    outline: none;
}
.search-overlay button {
    background: var(--primary);
    border: none;
    color: var(--text);
    padding: 0 24px;
    height: 100%;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 40px;
    margin: 4px;
    transition: background 0.2s;
}
.search-overlay button:hover { background: var(--primary-dark); }
body.light-mode .search-overlay form {
    background: rgba(0,0,0,0.05);
    border-color: rgba(6,152,214,0.3);
}
body.light-mode .search-overlay input { color: var(--text); }

/* ==================== CATEGORY BOTTOM SHEET (accordion) ==================== */
.category-sheet {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: rgba(8, 12, 22, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    z-index: 10001;
    overflow-y: auto;
    padding: 24px 16px 32px;
    box-shadow: 0 -15px 60px rgba(0,0,0,0.9);
    flex-direction: column;
}
body.light-mode .category-sheet {
    background: rgba(255,255,255,0.98);
    box-shadow: 0 -15px 60px rgba(0,0,0,0.08);
}
.category-sheet.show { display: flex; }
.category-sheet .sheet-handle {
    width: 48px;
    height: 5px;
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
    margin: 0 auto 20px;
}
.category-sheet h4 {
    color: var(--primary-light);
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}
.close-sheet {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    color: var(--text);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}
.close-sheet:hover {
    background: rgba(255,0,85,0.2);
    color: var(--rose);
}

/* Accordion tree – modern grid animation, smoother transitions */
.nav-tree-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav-tree-item {
    overflow: hidden;
    position: relative;
    margin: 4px 0;
    padding-inline-start: 6px;
}
.nav-tree-item::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 999px;
    background: var(--tree-accent, rgba(255,255,255,0.25));
    opacity: 0.95;
    transition: background 0.3s;
}
.nav-tree-item.nav-tree-tone-1 { --tree-accent: #00f0ff; --tree-accent-soft: rgba(0,240,255,0.16); --tree-link-color: #eaffff; --tree-link-hover: #ffffff; }
.nav-tree-item.nav-tree-tone-2 { --tree-accent: #8a2be2; --tree-accent-soft: rgba(138,43,226,0.16); --tree-link-color: #f7f2ff; --tree-link-hover: #ffffff; }
.nav-tree-item.nav-tree-tone-3 { --tree-accent: #ff5ea8; --tree-accent-soft: rgba(255,94,168,0.16); --tree-link-color: #fff4fa; --tree-link-hover: #ffffff; }
.nav-tree-item.nav-tree-tone-4 { --tree-accent: #f59e0b; --tree-accent-soft: rgba(245,158,11,0.16); --tree-link-color: #fff9e8; --tree-link-hover: #ffffff; }
body.light-mode .nav-tree-item.nav-tree-tone-1 { --tree-accent: #d81b3f; --tree-accent-soft: rgba(6,152,214,0.16); --tree-link-color: #0f172a; --tree-link-hover: #d81b3f; }
body.light-mode .nav-tree-item.nav-tree-tone-2 { --tree-accent: #7c3aed; --tree-accent-soft: rgba(124,58,237,0.16); --tree-link-color: #0f172a; --tree-link-hover: #7c3aed; }
body.light-mode .nav-tree-item.nav-tree-tone-3 { --tree-accent: #db2777; --tree-accent-soft: rgba(219,39,119,0.16); --tree-link-color: #0f172a; --tree-link-hover: #db2777; }
body.light-mode .nav-tree-item.nav-tree-tone-4 { --tree-accent: #d97706; --tree-accent-soft: rgba(217,119,6,0.16); --tree-link-color: #0f172a; --tree-link-hover: #d97706; }
.nav-tree-row {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px;
    padding-inline-start: 8px;
    background: linear-gradient(90deg, var(--tree-accent-soft), rgba(255,255,255,0.025));
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    position: relative;
}
.nav-tree-item:hover > .nav-tree-row {
    transform: translateX(-2px);
    border-color: var(--tree-accent-soft);
    box-shadow: 0 0 12px rgba(0,240,255,0.15);
}
.nav-tree-link {
    flex: 1;
    display: block;
    padding: 14px 8px;
    color: var(--tree-link-color, var(--text-secondary));
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.25s;
}
.nav-tree-link:hover {
    color: var(--tree-link-hover, var(--primary-light));
}
body.light-mode .nav-tree-row {
    background: linear-gradient(90deg, var(--tree-accent-soft), rgba(255,255,255,0.95));
    border-color: rgba(15, 23, 42, 0.1);
}
body.light-mode .nav-tree-children {
    border-inline-start-color: rgba(15, 23, 42, 0.12);
}
body.light-mode .nav-tree-link {
    color: var(--tree-link-color, var(--text-primary));
}
body.light-mode .nav-tree-link:hover {
    color: var(--tree-link-hover, var(--accent-cyan));
}

.nav-tree-toggle {
    background: none;
    border: none;
    color: var(--tree-accent, var(--text-muted));
    padding: 14px 12px;
    cursor: pointer;
    transition: color 0.2s, transform 0.3s;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-tree-toggle:hover {
    color: #fff;
}
.nav-tree-item.open > .nav-tree-row .nav-tree-toggle {
    transform: rotate(-180deg);
}

.nav-tree-children {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease, opacity 0.35s ease;
    margin: 4px 0 0 8px;
    padding-inline-start: 6px;
    border-inline-start: 1px solid rgba(255,255,255,0.08);
    opacity: 0;
}
.nav-tree-children > * {
    overflow: hidden;
}
.nav-tree-item.open > .nav-tree-children {
    grid-template-rows: 1fr;
    opacity: 1;
}
.nav-tree-item.open > .nav-tree-row .nav-tree-link i {
    transform: rotate(180deg);
    transition: transform 0.3s;
}
.nav-tree-children .nav-tree-link {
    padding-right: 32px;
    font-size: 0.9rem;
    color: var(--tree-link-color, var(--text-secondary));
}
.nav-tree-children .nav-tree-children .nav-tree-link {
    padding-right: 56px;
    font-size: 0.85rem;
}

.sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
}
.sheet-backdrop.show { display: block; }

/* ==================== FOOTER (mobile‑first, fully responsive) ==================== */
.site-footer {
    position: relative;
    z-index: 0;                     /* keep footer behind all overlapping elements */
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1rem, 3vw, 1.5rem);
    margin-top: clamp(2rem, 5vw, 4rem);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
    }
}

.footer-col {
    min-width: 0;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.footer-logo-img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
}

body.light-mode .footer-logo-img {
    background: rgba(0,0,0,0.05);
}

.footer-site-name {
    font-size: 1.3rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-description {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
}

.footer-heading {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--text);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease, padding-right 0.2s ease;
    display: inline-block;
    padding: 0.15rem 0;
}

.footer-links a:hover {
    color: var(--primary-light);
    padding-right: 4px;
}

.footer-socials {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.footer-socials a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 1rem;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.footer-socials a:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    transform: translateY(-2px);
}

.footer-bottom {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding-top: clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    .footer-col {
        text-align: center;
    }
    .footer-logo {
        justify-content: center;
    }
    .footer-socials {
        justify-content: center;
    }
    .footer-links {
        align-items: center;
    }
}

/* ==================== RESPONSIVE (global) ==================== */
@media (max-width: 1280px) {
    /* Shrink desktop links and actions when they start getting cramped */
    .nav-links a {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    .nav-icon-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .btn-nav {
        padding: 8px 14px;
        font-size: 0.75rem;
    }
    .user-menu-btn {
        padding: 8px 14px;
        font-size: 0.85rem;
    }
    .auth-link,
    .lite-mode-toggle {
        padding: 0.35rem 0.6rem;
        font-size: 0.72rem;
        gap: 0.3rem;
    }
    .nav-inner {
        gap: 16px;
    }
}

@media (max-width: 1160px) {
    .nav-links {
        display: none !important;
    }
    .mega-menu {
        display: none !important;
    }
    .nav-links {display: none !important;}
    .user-menu { display: none; }
    .hamburger { display: block; }
    .nav-actions { gap: 6px; }
    .auth-link,
    .lite-mode-toggle {
        width: 40px;
        height: 40px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .auth-link span:last-child,
    .lite-mode-toggle span:last-child {
        display: none;
    }
}

@media (min-width: 481px) and (max-width: 1160px) {
    .nav-actions {
        gap: 6px;
        flex-wrap: nowrap;
        align-items: center;
    }
    .nav-icon-btn,
    .auth-link,
    .lite-mode-toggle {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 0.95rem;
    }
    .nav-icon-btn i,
    .auth-link i,
    .lite-mode-toggle i {
        font-size: 1rem;
    }
    .nav-actions .btn-nav { display: none !important; }
    .nav-logo .logo-icon { width: 40px; height: 40px; }
    .nav-inner { padding: 0 14px; }
}

@media (max-width: 768px) {
    .bottom-nav { display: flex; }
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }

    :root { --navbar-height: 60px; }
    .nav-inner { padding: 0 14px; }
    .nav-logo .logo-icon { width: 38px; height: 38px; }
    .nav-icon-btn { width: 36px; height: 36px; font-size: 0.95rem; }
    .mega-menu { display: none !important; }
}

@media (max-width: 480px) {
    .nav-inner { padding: 0 12px; }
    .nav-actions { gap: 4px; }
}

@media (max-width: 768px) {
    .bg-orbs::before,
    .bg-orbs::after,
    .bg-orb,
    .announcement-bar::before {
        animation: none !important;
    }
    .card-img-inner,
    .btn,
    .nav-item,
    .icon-btn,
    .hero-slide-link-text,
    .campaign-card,
    .blog-card,
    .product-card,
    .newsletter-card,
    .read-more,
    .subcat-card,
    .campaign-card {
        transition: none !important;
    }
    .product-card:hover,
    .blog-card:hover,
    .campaign-card:hover,
    .btn:hover,
    .icon-btn:hover,
    .hero-slide-link-text:hover,
    .subcat-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

body.light-mode .bottom-nav a,
body.light-mode .bottom-nav button {
    color: #1e293b;
}
body.light-mode .bottom-nav a.active,
body.light-mode .bottom-nav button.active {
    color: var(--primary-dark);
}



@media (min-width: 1161px) {
  .navbar {
    overflow: visible !important;
  }
  .nav-links {
    overflow: visible !important;
  }
}

/* Mobile nav panel moved to left side */
.mobile-nav {
  left: 0 !important;
  right: auto !important;
  border-right: 1px solid rgba(0,240,255,0.12) !important;
  border-left: none !important;
  transform: translateX(-100%) !important;
  box-shadow: 20px 0 60px rgba(0,0,0,0.8) !important;
}
.mobile-nav.open {
  transform: translateX(0) !important;
}
body.light-mode .mobile-nav {
  border-right-color: rgba(6,152,214,0.2) !important;
  border-left-color: transparent !important;
  box-shadow: 20px 0 60px rgba(0,0,0,0.1) !important;
}

/* Lite mode dark background – deep blue instead of pure black */
body.reduced-visual-effects:not(.light-mode) {
  background: #080D19 !important;
}

/* Markdown content link styling */
.article-body a,
.short-desc a,
.long-description a {
  color: var(--primary-light, #00f0ff);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.article-body a:hover,
.short-desc a:hover,
.long-description a:hover {
  color: var(--primary, #00f0ff);
  text-decoration-color: var(--accent-light, #a855f7);
}

body.light-mode .article-body a,
body.light-mode .short-desc a,
body.light-mode .long-description a {
  color: var(--primary-dark, #d81b3f);
}

body.light-mode .article-body a:hover,
body.light-mode .short-desc a:hover,
body.light-mode .long-description a:hover {
  color: #a80023;
}

/* AI Assistant Support Widget Styles */
.support-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}

.support-tab {
  flex: 1;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: 0.2s ease;
  font-family: inherit;
}

.support-tab:hover {
  background: rgba(0,240,255,0.06);
  color: var(--text, #fff);
}

.support-tab.active {
  background: rgba(0,240,255,0.12);
  border-color: rgba(0,240,255,0.3);
  color: var(--primary-light, #00f0ff);
}

.ai-support-body {
  display: flex;
  flex-direction: column;
  height: 380px;
  max-height: 380px;
  overflow: hidden;
  padding: 12px;
}

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.ai-welcome {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-secondary, #94a3b8);
  font-size: 0.85rem;
  line-height: 1.7;
  background: rgba(0,240,255,0.06);
  padding: 12px;
  border-radius: 12px;
}

.ai-welcome i {
  color: var(--primary-light, #00f0ff);
  font-size: 1.2rem;
  margin-top: 2px;
}

.ai-message {
  display: flex;
  flex-direction: column;
}

.ai-user {
  align-items: flex-end;
}

.ai-assistant {
  align-items: flex-start;
}

.ai-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.88rem;
  line-height: 1.7;
  word-break: break-word;
}

.ai-user .ai-bubble {
  background: rgba(0,240,255,0.12);
  color: var(--text, #fff);
  border-bottom-left-radius: 4px;
}

.ai-assistant .ai-bubble {
  background: rgba(255,255,255,0.06);
  color: var(--text-secondary, #e2e8f0);
  border-bottom-right-radius: 4px;
}

.ai-product-grid {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}

.ai-product-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,240,255,0.2);
  background: rgba(0,240,255,0.06);
  color: inherit;
  text-decoration: none;
  transition: 0.2s ease;
}

.ai-product-card:hover {
  background: rgba(0,240,255,0.12);
  border-color: var(--primary-light, #00f0ff);
}

.ai-product-title {
  flex: 1;
  font-size: 0.82rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ai-product-price {
  font-weight: 800;
  font-size: 0.8rem;
  color: var(--primary-light, #00f0ff);
  white-space: nowrap;
}

.ai-chat-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}

.ai-chat-form input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background: rgba(255,255,255,0.04);
  color: var(--text, #fff);
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
}

.ai-chat-form input:focus {
  border-color: var(--primary-light, #00f0ff);
  box-shadow: 0 0 0 3px rgba(0,240,255,0.1);
}

.ai-chat-form button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #00f0ff, #8a2be2);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-chat-form button:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.ai-typing .ai-bubble span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted, #94a3b8);
  margin: 0 2px;
  animation: aiTyping 1.2s infinite;
}

.ai-typing .ai-bubble span:nth-child(2) {
  animation-delay: 0.2s;
}

.ai-typing .ai-bubble span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes aiTyping {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* AI product card image */
.ai-product-card {
  flex-direction: column;
  padding: 8px;
}

.ai-product-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 6px;
}

.ai-product-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.ai-product-title {
  flex: 1;
}

.ai-product-price {
  white-space: nowrap;
}

/* Markdown styles inside AI chat */
.ai-bubble h2,
.ai-bubble h3,
.ai-bubble h4 {
  margin: 8px 0 4px;
  color: var(--text, #fff);
  line-height: 1.4;
}

.ai-bubble h2 { font-size: 1.1rem; }
.ai-bubble h3 { font-size: 1rem; }
.ai-bubble h4 { font-size: 0.95rem; }

.ai-bubble ul,
.ai-bubble ol {
  margin: 6px 0;
  padding-inline-start: 20px;
}

.ai-bubble li {
  margin-bottom: 4px;
}

.ai-bubble a {
  color: var(--primary-light, #00f0ff);
  text-decoration: underline;
}

.ai-bubble code {
  background: rgba(0, 240, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  direction: ltr;
}

.ai-bubble pre {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 8px;
  border-radius: 8px;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
}

.ai-bubble pre code {
  background: none;
  padding: 0;
}

/* Colorful Markdown styles for AI assistant messages */
.ai-bubble strong {
  color: #fbbf24;
  font-weight: 800;
}

.ai-bubble h2 {
  color: var(--primary-light, #00f0ff);
  font-weight: 900;
}

.ai-bubble h3 {
  color: var(--accent-light, #a855f7);
  font-weight: 800;
}

.ai-bubble h4 {
  color: var(--rose, #ff0055);
  font-weight: 800;
}

.ai-bubble em {
  color: #f472b6;
}

.ai-bubble a {
  color: #38bdf8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ai-bubble li::marker {
  color: var(--primary-light, #00f0ff);
  font-weight: bold;
}

.ai-bubble blockquote {
  border-right: 3px solid var(--primary-light, #00f0ff);
  color: #cbd5e1;
  padding-right: 10px;
  margin: 8px 0;
  background: rgba(0,240,255,0.05);
  border-radius: 8px;
  padding: 6px 10px;
}

body.light-mode .ai-bubble strong {
  color: #b45309;
}

body.light-mode .ai-bubble h2 {
  color: #a80023;
}

body.light-mode .ai-bubble h3 {
  color: #7c3aed;
}

body.light-mode .ai-bubble h4 {
  color: #be185d;
}

body.light-mode .ai-bubble a {
  color: #ff2d55;
}

body.light-mode .ai-bubble li::marker {
  color: #ff2d55;
}

/* Fullscreen support panel */
.support-panel.support-panel-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
}

.support-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.support-fullscreen-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.support-fullscreen-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.support-panel-fullscreen .support-body,
.support-panel-fullscreen .ai-support-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

/* AI product suggestions: horizontal cards with tiny image */
.ai-product-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.ai-product-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px !important;
}

.ai-product-img {
  width: 42px !important;
  height: 42px !important;
  aspect-ratio: auto !important;
  border-radius: 10px !important;
  margin: 0 !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.ai-product-info {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

/* Fullscreen support panel */
.support-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.support-fullscreen-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.support-fullscreen-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.support-panel.support-panel-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
}

.support-panel-fullscreen .support-body,
.support-panel-fullscreen .ai-support-body {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* AI product suggestions: horizontal cards with small image */
.ai-product-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.ai-product-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px !important;
}

.ai-product-img {
  width: 42px !important;
  height: 42px !important;
  aspect-ratio: auto !important;
  border-radius: 10px !important;
  margin: 0 !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.ai-product-info {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

/* ================= RESPONSIVE FULLSCREEN SUPPORT ================= */

/* Header button alignment */
.support-header {
  flex-wrap: nowrap !important;
}

.support-header > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.support-header > .support-fullscreen-btn,
.support-header > .close-panel {
  flex: 0 0 auto;
}

.support-header > .support-fullscreen-btn {
  margin-inline-start: auto;
}

.support-header > .close-panel {
  margin-inline-start: 8px;
}

/* Fullscreen layout structure */
.support-panel.support-panel-fullscreen {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.support-panel-fullscreen .support-header,
.support-panel-fullscreen .support-tabs {
  flex: 0 0 auto !important;
}

.support-panel-fullscreen .support-body,
.support-panel-fullscreen .ai-support-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}

.support-panel-fullscreen .ai-support-body {
  height: auto !important;
  max-height: none !important;
}

/* Desktop / tablet: large rounded centered panel */
@media (min-width: 769px) {
  .support-panel.support-panel-fullscreen {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(920px, calc(100vw - 2rem)) !important;
    max-width: 100% !important;
    height: 90vh !important;
    max-height: 90vh !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55) !important;
  }
}

/* Mobile: true fullscreen sheet */
@media (max-width: 768px) {
  .support-panel.support-panel-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
}

/* Clear AI memory button */
.ai-clear-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.ai-clear-toolbar span {
  font-size: 0.78rem;
  color: var(--text-muted, #94a3b8);
}

.ai-clear-memory-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 0, 85, 0.25);
  background: rgba(255, 0, 85, 0.08);
  color: #ff6b9d;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ai-clear-memory-btn:hover {
  background: rgba(255, 0, 85, 0.16);
  border-color: rgba(255, 0, 85, 0.45);
}

body.light-mode .ai-clear-memory-btn {
  border-color: rgba(190, 24, 93, 0.25);
  background: rgba(190, 24, 93, 0.07);
  color: #be185d;
}



/* =========================================================
   GLOBAL PRICE COLOR OVERRIDE
   Dark mode  -> white
   Light mode -> black
   ========================================================= */

/* Main price elements */
body:not(.light-mode) [class*="price"],
body:not(.light-mode) [class*="Price"],
body:not(.light-mode) [class*="amount"],
body:not(.light-mode) [class*="Amount"] {
  color: #ffffff !important;
}

body.light-mode [class*="price"],
body.light-mode [class*="Price"],
body.light-mode [class*="amount"],
body.light-mode [class*="Amount"] {
  color: #000000 !important;
}

/* Currency unit inherits from price parent */
body:not(.light-mode) [class*="price"] .currency,
body:not(.light-mode) [class*="Price"] .currency {
  color: inherit !important;
}

body.light-mode [class*="price"] .currency,
body.light-mode [class*="Price"] .currency {
  color: inherit !important;
}

/* Old/strikethrough prices remain readable */
body:not(.light-mode) [class*="price"] del,
body:not(.light-mode) [class*="Price"] del {
  color: rgba(255, 255, 255, 0.70) !important;
}

body.light-mode [class*="price"] del,
body.light-mode [class*="Price"] del {
  color: rgba(0, 0, 0, 0.55) !important;
}


/* =========================================================
   GLOBAL PRODUCT IMAGE FIT FIX
   Show the full product image inside its card,
   without cropping or overflowing behind card edges.
   ========================================================= */

.card-img-wrap img,
.card-img-inner img,
.showcase-img img,
.result-img,
.ai-product-img,
.cart-item-image img,
.order-item-image img,
.product-image img,
.product-gallery img,
.product-thumbnail img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block;
  margin: 0 auto;
}

/* Keep the existing dark/light image box background */
.card-img-wrap,
.card-img-inner,
.showcase-img,
.product-image,
.product-gallery {
  background: var(--bg-secondary, rgba(10, 14, 29, 0.95)) !important;
}


/* =========================================================
   EXTEND BACKGROUND COLOR ORBS TO BOTTOM
   Static gradients only — no fixed elements or animations.
   ========================================================= */

body:not(.reduced-visual-effects) {
    background:
        radial-gradient(circle at 18% 10%, rgba(0,240,255,0.12), transparent 18%),
        radial-gradient(circle at 84% 15%, rgba(255,0,85,0.12), transparent 20%),
        radial-gradient(circle at 50% 80%, rgba(138,43,226,0.08), transparent 22%),
        radial-gradient(circle at 12% 88%, rgba(0,240,255,0.10), transparent 20%),
        radial-gradient(circle at 88% 90%, rgba(255,0,85,0.10), transparent 22%),
        radial-gradient(circle at 50% 100%, rgba(138,43,226,0.08), transparent 24%),
        var(--bg);
}


/* =========================================================
   EXTEND BACKGROUND COLOR ORBS TO MIDDLE
   Static gradients only — no fixed elements or animations.
   ========================================================= */

body:not(.reduced-visual-effects) {
    background:
        radial-gradient(circle at 18% 10%, rgba(0,240,255,0.12), transparent 18%),
        radial-gradient(circle at 84% 15%, rgba(255,0,85,0.12), transparent 20%),
        radial-gradient(circle at 15% 50%, rgba(0,240,255,0.10), transparent 20%),
        radial-gradient(circle at 85% 50%, rgba(255,0,85,0.10), transparent 22%),
        radial-gradient(circle at 50% 55%, rgba(138,43,226,0.08), transparent 24%),
        radial-gradient(circle at 50% 80%, rgba(138,43,226,0.08), transparent 22%),
        radial-gradient(circle at 12% 88%, rgba(0,240,255,0.10), transparent 20%),
        radial-gradient(circle at 88% 90%, rgba(255,0,85,0.10), transparent 22%),
        radial-gradient(circle at 50% 100%, rgba(138,43,226,0.08), transparent 24%),
        var(--bg);
}


/* User profile avatar in navbar/mobile */
.user-menu-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.user-menu-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-light);
  background: var(--surface);
}

.mobile-avatar-img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-light);
  background: var(--surface);
}

/* =========================================================
   PROFILE AVATAR HARD CONSTRAINTS
   ========================================================= */

.user-menu-btn {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-btn .user-menu-avatar,
.user-menu-btn img.user-menu-avatar,
.mobile-profile .mobile-avatar-img,
.mobile-profile img.mobile-avatar-img {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  flex: 0 0 28px !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: inline-block !important;
  overflow: hidden !important;
  vertical-align: middle !important;
}

.mobile-profile .mobile-avatar-img,
.mobile-profile img.mobile-avatar-img {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  flex: 0 0 48px !important;
  border-radius: 14px !important;
  display: block !important;
}

.mobile-profile {
  align-items: center !important;
}

/* =========================================================
   SEARCH + AI SUPPORT IMAGE SIZE FIX
   Keep these small thumbnails fixed.
   ========================================================= */
.result-img {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  flex-shrink: 0 !important;
}

.ai-product-img {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  object-fit: cover !important;
  aspect-ratio: auto !important;
  border-radius: 10px !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}



/* =========================================================
   GPU PERFORMANCE OVERRIDE
   Reduces desktop GPU load by disabling blur layers,
   infinite decorative animations, and heavy will-change.
   Visual result: slightly more solid glass surfaces.
   ========================================================= */

/* 1. Remove all expensive backdrop-filter work */
.navbar,
.announcement-bar,
.bottom-nav,
.mobile-nav,
.mega-menu,
.mega-menu-catalog,
.mega-child-panel,
.search-overlay,
.user-dropdown,
.category-sheet,
.card-glass,
.stat-card,
.showcase-card,
.blog-banner,
.feature-item,
.newsletter-card,
.store-story-viewer-panel,
.support-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* 2. Disable infinite decorative animations */
.navbar::before,
.navbar::after,
.announcement-bar::before,
.announcement-bar::after,
.newsletter-card::before {
  animation: none !important;
}

/* 3. Remove heavy filters and will-change hints */
.navbar,
.hero-slider-container,
.hero-swiper,
.hero-swiper-slide,
.bg-aura,
#starfield {
  will-change: auto !important;
  filter: none !important;
}

/* 4. Solid fallback backgrounds for key surfaces */
.navbar {
  background: rgba(0, 0, 0, 0.92) !important;
}
body.light-mode .navbar {
  background: rgba(255, 255, 255, 0.96) !important;
}

.bottom-nav {
  background: rgba(10, 14, 26, 0.85) !important;
}
body.light-mode .bottom-nav {
  background: rgba(255, 255, 255, 0.95) !important;
}

.mobile-nav {
  background: rgba(8, 12, 20, 0.98) !important;
}
body.light-mode .mobile-nav {
  background: rgba(255, 255, 255, 0.98) !important;
}

.mega-menu,
.mega-menu-catalog,
.mega-child-panel {
  background: rgba(8, 12, 20, 0.97) !important;
}
body.light-mode .mega-menu,
body.light-mode .mega-menu-catalog,
body.light-mode .mega-child-panel {
  background: rgba(255, 255, 255, 0.98) !important;
}


/* =========================================================
   SUPPORT AI CHAT ALIGNMENT RTL SWAP
   User -> right, AI -> left in RTL
   ========================================================= */

.ai-user {
    align-items: flex-start !important;   /* right in RTL */
}

.ai-assistant {
    align-items: flex-end !important;     /* left in RTL */
}


/* =========================================================
   GLOBAL LUX TITLE TOGGLE
   Clean, minimal, consistent on all pages
   ========================================================= */

.title-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0, 240, 255, 0.28) !important;
    background: rgba(0, 240, 255, 0.06) !important;
    color: var(--accent-cyan, #00f0ff) !important;
    font-size: 0.8rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

.title-toggle:hover {
    background: rgba(0, 240, 255, 0.14) !important;
    border-color: rgba(0, 240, 255, 0.55) !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.22) !important;
    transform: translateY(-1px) !important;
}

/* Active/expanded state */
.product-title.expanded + .title-toggle,
.related-card .product-title.expanded + .title-toggle,
.showcase-body .product-title.expanded + .title-toggle {
    background: rgba(0, 240, 255, 0.16) !important;
    border-color: rgba(0, 240, 255, 0.65) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px rgba(0, 240, 255, 0.28) !important;
}

/* Light theme */
body.light-mode .title-toggle {
    border-color: rgba(6, 152, 214, 0.28) !important;
    background: rgba(6, 152, 214, 0.05) !important;
    color: #ff2d55 !important;
}

body.light-mode .title-toggle:hover {
    background: rgba(6, 152, 214, 0.12) !important;
    border-color: rgba(6, 152, 214, 0.55) !important;
    color: #a80023 !important;
    box-shadow: 0 0 14px rgba(6, 152, 214, 0.16) !important;
}

body.light-mode .product-title.expanded + .title-toggle,
body.light-mode .related-card .product-title.expanded + .title-toggle,
body.light-mode .showcase-body .product-title.expanded + .title-toggle {
    background: rgba(6, 152, 214, 0.16) !important;
    border-color: rgba(6, 152, 214, 0.65) !important;
    color: #a80023 !important;
    box-shadow: 0 0 16px rgba(6, 152, 214, 0.20) !important;
}


/* =========================================================
   MINIMAL TITLE TOGGLE NO CIRCLE
   Simple chevron, no border/background, theme-aware
   ========================================================= */

.title-toggle {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: var(--text-secondary, rgba(255, 255, 255, 0.70)) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.title-toggle::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease, color 0.2s ease;
}

.title-toggle:hover {
    color: var(--primary-light, #00f0ff) !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
}

.product-title.expanded + .title-toggle::before,
.related-card .product-title.expanded + .title-toggle::before,
.showcase-body .product-title.expanded + .title-toggle::before {
    transform: translateY(2px) rotate(225deg);
}

.product-title.expanded + .title-toggle,
.related-card .product-title.expanded + .title-toggle,
.showcase-body .product-title.expanded + .title-toggle {
    color: var(--primary-light, #00f0ff) !important;
}

/* Light mode */
body.light-mode .title-toggle {
    color: #475569 !important;
}

body.light-mode .title-toggle:hover {
    color: #ff2d55 !important;
}

body.light-mode .product-title.expanded + .title-toggle,
body.light-mode .related-card .product-title.expanded + .title-toggle,
body.light-mode .showcase-body .product-title.expanded + .title-toggle {
    color: #ff2d55 !important;
}


/* =========================================================
   TITLE TOGGLE VISIBILITY FIX
   Respect inline display:none until JS shows the button.
   ========================================================= */

.title-toggle[style*="display:none"],
.title-toggle[style*="display: none"] {
    display: none !important;
}


/* =========================================================
   FOOTER CONTACT INFO — NEXSKY SIGNATURE STYLE
   ========================================================= */

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-contact-info a,
.footer-contact-info p {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary, rgba(238, 242, 255, 0.72));
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.7;
  margin: 0;
  transition: color 0.2s ease;
}

.footer-contact-info a:hover {
  color: var(--primary-light, #00f0ff);
}

body.light-mode .footer-contact-info {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.08);
}

body.light-mode .footer-contact-info a,
body.light-mode .footer-contact-info p {
  color: #475569;
}

body.light-mode .footer-contact-info a:hover {
  color: #a80023;
}

@media (max-width: 640px) {
  .footer-contact-info {
    align-items: center;
    text-align: center;
  }

  .footer-contact-info a,
  .footer-contact-info p {
    justify-content: center;
  }
}


/* =========================================================
   EXPANDED CARD ROUNDED CORNER FIX
   Keeps expanded content clipped inside rounded card.
   Does not change card alignment or row size behavior.
   ========================================================= */

body .product-card.title-expanded-card {
    overflow: hidden !important;
}

body .related-card.title-expanded-card {
    overflow: hidden !important;
}

body .showcase-card.title-expanded-card {
    overflow: hidden !important;
}


/* =========================================================
   ANNOUNCEMENT BAR CLOSE BUTTON – LUX GLASS STYLE
   ========================================================= */
.announcement-bar .banner-close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(0, 240, 255, 0.22);
    background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    cursor: pointer;
    opacity: 0.92;
    z-index: 2;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.announcement-bar .banner-close:hover {
    background: linear-gradient(135deg, rgba(255, 0, 85, 0.28), rgba(255, 0, 85, 0.10));
    border-color: rgba(255, 0, 85, 0.45);
    color: #ffffff;
    transform: translateY(-50%) scale(1.06);
    box-shadow:
        0 12px 26px rgba(255, 0, 85, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* Light mode */
body.light-mode .announcement-bar .banner-close {
    background: linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,255,255,0.60));
    border-color: rgba(6, 152, 214, 0.22);
    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
    color: rgba(15, 23, 42, 0.68);
}

body.light-mode .announcement-bar .banner-close:hover {
    background: linear-gradient(135deg, rgba(217, 0, 77, 0.12), rgba(217, 0, 77, 0.05));
    border-color: rgba(217, 0, 77, 0.35);
    color: #b3003d;
    box-shadow:
        0 12px 26px rgba(217, 0, 77, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Lite mode: remove blur for performance */
body.reduced-visual-effects .announcement-bar .banner-close {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* =========================================================
   ANNOUNCEMENT CLOSE BUTTON – COMPACT MOBILE SIZE
   ========================================================= */
.announcement-bar .banner-close {
    width: 30px;
    height: 30px;
    right: 10px;
    font-size: 0.85rem;
    border-radius: 50%;
}

@media (max-width: 768px) {
    .announcement-bar .banner-close {
        width: 28px;
        height: 28px;
        right: 8px;
        font-size: 0.8rem;
    }

    .announcement-bar.visible {
        padding-left: 42px;
        padding-right: 42px;
    }
}


/* =========================================================
   ANNOUNCEMENT REOPEN FLOATING ICON
   ========================================================= */

.announcement-reopen {
    position: fixed !important;
    top: 10px;
    right: 14px;
    z-index: 105 !important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px solid rgba(0, 240, 255, 0.28);
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.14), rgba(138, 43, 226, 0.12));
    color: var(--accent-cyan, #00f0ff);
    box-shadow:
        0 10px 26px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.announcement-reopen:hover {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.24), rgba(138, 43, 226, 0.20));
    border-color: var(--accent-cyan, #00f0ff);
    transform: translateY(-1px);
    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.35),
        0 0 18px rgba(0, 240, 255, 0.22);
}

body.light-mode .announcement-reopen {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.90));
    border-color: rgba(6, 152, 214, 0.22);
    color: #ff2d55;
    box-shadow:
        0 10px 26px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

body.light-mode .announcement-reopen:hover {
    background: linear-gradient(135deg, rgba(6, 152, 214, 0.14), rgba(124, 58, 237, 0.10));
    border-color: rgba(6, 152, 214, 0.40);
    color: #a80023;
}

body.reduced-visual-effects .announcement-reopen {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

@media (max-width: 768px) {
    .announcement-reopen {
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
        border-radius: 12px;
    }
}


/* =========================================================
   ANNOUNCEMENT REOPEN — NORMAL FLOW PLACEMENT
   Appears above navbar, scrolls away, no overlap
   ========================================================= */

.announcement-reopen {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    display: none;
    width: auto !important;
    min-width: 46px;
    height: 36px;
    margin: 0 auto 8px !important;
    border-radius: 14px;
    border: 1px solid rgba(0, 240, 255, 0.22);
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.10), rgba(138, 43, 226, 0.08));
    color: var(--accent-cyan, #00f0ff);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.announcement-reopen:hover {
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.18), rgba(138, 43, 226, 0.14));
    border-color: var(--accent-cyan, #00f0ff);
    color: #ffffff;
}

body.light-mode .announcement-reopen {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.92));
    border-color: rgba(6, 152, 214, 0.20);
    color: #ff2d55;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

body.light-mode .announcement-reopen:hover {
    background: linear-gradient(135deg, rgba(6, 152, 214, 0.12), rgba(124, 58, 237, 0.08));
    border-color: rgba(6, 152, 214, 0.40);
    color: #a80023;
}

body.reduced-visual-effects .announcement-reopen {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .announcement-reopen {
        min-width: 42px;
        height: 32px;
        font-size: 0.9rem;
        margin-bottom: 6px !important;
        border-radius: 12px;
    }
}


/* =========================================================
   ANNOUNCEMENT SMOOTH TOGGLE FIX
   Faster GPU-friendly height/padding animation
   ========================================================= */

.announcement-bar {
    transition:
        height 0.22s cubic-bezier(0.25, 0.8, 0.25, 1),
        padding 0.22s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.22s ease,
        box-shadow 0.22s ease !important;

    will-change: height, padding !important;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.announcement-bar:not(.visible) {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom-color: transparent !important;
}

.announcement-bar.visible {
    height: 56px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.announcement-reopen {
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

body.reduced-visual-effects .announcement-bar,
body.reduced-visual-effects .announcement-reopen {
    transition: none !important;
    will-change: auto !important;
    transform: none !important;
}

@media (max-width: 768px) {
    .announcement-bar.visible {
        height: 48px !important;
    }
}


/* =========================================================
   ANNOUNCEMENT BUTTERY SMOOTH TOGGLE FINAL
   Uses max-height/opacity instead of height/padding
   ========================================================= */

body .announcement-bar {
    height: auto !important;
    max-height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom-color: transparent !important;
    transition:
        max-height 0.28s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.22s ease,
        visibility 0s linear 0.28s !important;
    will-change: max-height, opacity !important;
    transform: translateZ(0);
    backface-visibility: hidden;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body .announcement-bar.visible {
    max-height: 80px !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition:
        max-height 0.28s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.22s ease,
        visibility 0s linear 0s !important;
    border-bottom-color: rgba(0, 240, 255, 0.2) !important;
}

body .announcement-reopen {
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.reduced-visual-effects .announcement-bar,
body.reduced-visual-effects .announcement-reopen {
    transition: none !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    will-change: auto !important;
}


/* =========================================================
   ANNOUNCEMENT MINI REOPEN INDICATOR
   Tiny fixed dot, hidden on scroll
   ========================================================= */

body .announcement-reopen {
    position: fixed !important;
    top: 6px;
    right: 8px;
    left: auto !important;
    bottom: auto !important;
    z-index: 106 !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 240, 255, 0.30) !important;
    background: rgba(0, 0, 0, 0.45) !important;
    color: var(--accent-cyan, #00f0ff) !important;
    font-size: 0.65rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

body .announcement-reopen.show {
    display: flex !important;
}

body .announcement-reopen.hide-on-scroll {
    display: none !important;
}

body .announcement-reopen:hover {
    background: rgba(0, 240, 255, 0.18) !important;
    border-color: var(--accent-cyan, #00f0ff) !important;
    transform: scale(1.1);
}

body.light-mode .announcement-reopen {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(6, 152, 214, 0.25) !important;
    color: #ff2d55 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
}

body.reduced-visual-effects .announcement-reopen {
    transition: none !important;
    box-shadow: none !important;
}


/* =========================================================
   ANNOUNCEMENT REOPEN NEUTRAL THEME COLORS
   Blends with navbar instead of bright cyan
   ========================================================= */

body .announcement-reopen {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: var(--text-secondary, rgba(255, 255, 255, 0.72)) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18) !important;
}

body .announcement-reopen:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    color: var(--text-primary, #ffffff) !important;
}

body.light-mode .announcement-reopen {
    background: rgba(15, 23, 42, 0.06) !important;
    border-color: rgba(15, 23, 42, 0.12) !important;
    color: var(--text-muted, #475569) !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.08) !important;
}

body.light-mode .announcement-reopen:hover {
    background: rgba(15, 23, 42, 0.10) !important;
    border-color: rgba(15, 23, 42, 0.20) !important;
    color: #0f172a !important;
}


/* =========================================================
   ANNOUNCEMENT FINAL FIXES
   - Close button same size as reopen indicator
   - Full announcement text wraps on large screens
   ========================================================= */

body .announcement-bar .banner-close {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    right: 8px !important;
    font-size: 0.75rem !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body .announcement-bar .banner-text {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: calc(100% - 48px) !important;
    line-height: 1.5 !important;
    display: block !important;
}

body .announcement-bar.visible {
    height: auto !important;
    min-height: 48px !important;
    max-height: 120px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-right: 48px !important;
    padding-left: 48px !important;
}

@media (max-width: 768px) {
    body .announcement-bar.visible {
        min-height: 44px !important;
        max-height: 100px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        padding-right: 40px !important;
        padding-left: 40px !important;
    }

    body .announcement-bar .banner-close {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }
}


/* =========================================================
   ANNOUNCEMENT ONE-LINE AUTO-FIT TEXT
   ========================================================= */

body .announcement-bar .banner-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    max-width: calc(100% - 80px) !important;
    line-height: 1.2 !important;
    display: inline-block !important;
}

body .announcement-bar.visible {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 48px !important;
    max-height: 60px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

@media (max-width: 768px) {
    body .announcement-bar .banner-text {
        max-width: calc(100% - 64px) !important;
    }
}


/* =========================================================
   ANNOUNCEMENT DOTS SAFE LAYOUT
   Text flexes, dots fixed, no overlap on zoom
   ========================================================= */

body .announcement-bar.visible {
    gap: 8px !important;
}

body .announcement-bar .banner-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

body .announcement-bar .banner-nav-dots {
    flex: 0 0 auto !important;
    margin-left: 4px !important;
    gap: 4px !important;
}

body .announcement-bar .banner-dot {
    width: 6px !important;
    height: 6px !important;
}

@media (max-width: 768px) {
    body .announcement-bar .banner-nav-dots {
        gap: 3px !important;
    }

    body .announcement-bar .banner-dot {
        width: 5px !important;
        height: 5px !important;
    }
}


/* =========================================================
   ANNOUNCEMENT TOUCH SWIPE SUPPORT
   ========================================================= */

body .announcement-bar {
    touch-action: pan-y !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}


/* =========================================================
   AI ANNOUNCEMENT BLOODY RED GRADIENT
   ========================================================= */

body .announcement-bar.announcement-ai {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 0, 0, 0.35), transparent 42%),
        radial-gradient(circle at 80% 10%, rgba(180, 0, 0, 0.30), transparent 38%),
        linear-gradient(135deg, #8b0000 0%, #4d0000 45%, #1a0000 100%) !important;
    border-bottom-color: rgba(255, 0, 0, 0.5) !important;
}

body.light-mode .announcement-bar.announcement-ai {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 0, 0, 0.28), transparent 42%),
        radial-gradient(circle at 80% 10%, rgba(160, 0, 0, 0.22), transparent 38%),
        linear-gradient(135deg, #a30000 0%, #5c0000 45%, #260000 100%) !important;
    border-bottom-color: rgba(255, 0, 0, 0.45) !important;
    color: #ffffff !important;
}

body .announcement-bar.announcement-ai .banner-text {
    color: #ffffff !important;
    text-shadow: 0 0 12px rgba(255, 0, 0, 0.55) !important;
}


/* =========================================================
   ANNOUNCEMENT LONG TEXT MARQUEE
   ========================================================= */

.announcement-bar.marquee-active .banner-text {
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    animation: nexsky-banner-marquee 14s linear infinite;
    will-change: transform;
}

@keyframes nexsky-banner-marquee {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.announcement-bar.marquee-active {
    overflow: hidden !important;
}


/* =========================================================
   ANNOUNCEMENT MARQUEE FULL WIDTH FIX
   Remove max-width so the complete sentence is visible
   ========================================================= */

body .announcement-bar.marquee-active .banner-text {
    max-width: none !important;
    width: max-content !important;
    min-width: max-content !important;
    flex: none !important;
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

body .announcement-bar.marquee-active {
    display: block !important;
    overflow: hidden !important;
}


/* =========================================================
   FINAL ANNOUNCEMENT MARQUEE FIX
   RTL twist to right + fixed dots + constant speed
   ========================================================= */

body .announcement-bar.visible {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

body .banner-text-wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
}

body .announcement-bar.marquee-active #bannerText {
    display: inline-block !important;
    white-space: nowrap !important;
    width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    animation-name: nexsky-banner-marquee-rtl !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    will-change: transform;
}

@keyframes nexsky-banner-marquee-rtl {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}

body .announcement-bar.marquee-active {
    display: flex !important;
    overflow: hidden !important;
}


/* =========================================================
   ADMIN-CONTROLLED ANNOUNCEMENT THEMES
   ========================================================= */

body .announcement-bar.announcement-theme-bloody {
    background:
        radial-gradient(circle at 20% 20%, rgba(255,0,0,0.32), transparent 42%),
        radial-gradient(circle at 80% 10%, rgba(180,0,0,0.28), transparent 38%),
        linear-gradient(135deg, #7a0000 0%, #400000 45%, #180000 100%) !important;
    border-bottom-color: rgba(255,0,0,0.48) !important;
}

body .announcement-bar.announcement-theme-green {
    background:
        radial-gradient(circle at 20% 20%, rgba(0,220,130,0.25), transparent 42%),
        radial-gradient(circle at 80% 10%, rgba(0,160,100,0.22), transparent 38%),
        linear-gradient(135deg, #003b2b 0%, #001f18 45%, #000d0a 100%) !important;
    border-bottom-color: rgba(0,220,130,0.45) !important;
}

body .announcement-bar.announcement-theme-purple {
    background:
        radial-gradient(circle at 20% 20%, rgba(168,85,247,0.28), transparent 42%),
        radial-gradient(circle at 80% 10%, rgba(124,58,237,0.24), transparent 38%),
        linear-gradient(135deg, #2e0a4e 0%, #18052b 45%, #0a0216 100%) !important;
    border-bottom-color: rgba(168,85,247,0.45) !important;
}

body .announcement-bar.announcement-theme-bloody .banner-text,
body .announcement-bar.announcement-theme-green .banner-text,
body .announcement-bar.announcement-theme-purple .banner-text {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.18) !important;
}


/* =========================================================
   ENAMAD LOGO FOOTER WRAPPER
   ========================================================= */

.enamad-logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem auto 1.5rem;
    padding: 0.5rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: fit-content;
}

.enamad-logo-wrapper img {
    max-width: 120px;
    height: auto;
    display: block;
}

body.light-mode .enamad-logo-wrapper {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.08);
}


/* =========================================================
   OLD ANDROID MARQUEE SPEED FIX
   Safe minimum/maximum duration + stable RTL animation
   ========================================================= */

body .announcement-bar.marquee-active #bannerText {
    animation-name: nexsky-banner-marquee-rtl !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-duration: 20s;
    -webkit-animation-name: nexsky-banner-marquee-rtl !important;
    -webkit-animation-timing-function: linear !important;
    -webkit-animation-iteration-count: infinite !important;
    -webkit-animation-duration: 20s;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* =========================================================
   OLD ANDROID JS MARQUEE OVERRIDE
   Disable CSS animation; JS controls transform precisely
   ========================================================= */

body .announcement-bar.marquee-active #bannerText {
    animation: none !important;
    -webkit-animation: none !important;
    transition: none !important;
    will-change: transform;
}



/* Loading spinner */
.category-sheet-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 2rem;
}

.category-sheet-loading span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary, #00f0ff);
  animation: category-sheet-dot 1s ease-in-out infinite;
}

.category-sheet-loading span:nth-child(2) {
  animation-delay: 0.15s;
}

.category-sheet-loading span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes category-sheet-dot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-5px);
    opacity: 1;
  }
}


/* =========================================================
   LUX LIGHT THEME FINAL
   ========================================================= */
body.light-mode {
  --bg: #eef4fb;
  --bg-secondary: #ffffff;
  --surface: rgba(255,255,255,0.78);
  --surface-hover: rgba(255,255,255,0.96);
  --text: #0b1220;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --border: rgba(15,23,42,0.10);
  --border-light: rgba(15,23,42,0.16);
  --primary: #d81b3f;
  --primary-light: #ff2d55;
  --primary-dark: #a80023;
  --accent: #7c3aed;
  --accent-light: #8b5cf6;
  --accent-dark: #6d28d9;
  --rose: #e11d48;
  --shadow-glow: 0 0 32px rgba(255,45,85,0.18);
  --shadow-glow-cyan: 0 0 32px rgba(255,45,85,0.14);
}

body.light-mode {
  background:
    radial-gradient(circle at 18% 10%, rgba(255,45,85,0.14), transparent 22%),
    radial-gradient(circle at 84% 15%, rgba(124,58,237,0.11), transparent 24%),
    radial-gradient(circle at 50% 80%, rgba(236,72,153,0.07), transparent 26%),
    #eef4fb;
}

body.light-mode .navbar,
body.light-mode .bottom-nav,
body.light-mode .mobile-nav,
body.light-mode .category-sheet,
body.light-mode .mega-menu,
body.light-mode .mega-menu-catalog,
body.light-mode .mega-child-panel,
body.light-mode .search-dialog,
body.light-mode .support-panel {
  background: rgba(255,255,255,0.82) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(15,23,42,0.10) !important;
  box-shadow: 0 15px 45px rgba(15,23,42,0.08);
}

body.light-mode .product-card,
body.light-mode .blog-card,
body.light-mode .stat-card,
body.light-mode .newsletter-card,
body.light-mode .showcase-card,
body.light-mode .related-card,
body.light-mode .card-glass,
body.light-mode .feature-item,
body.light-mode .info-card {
  background: rgba(255,255,255,0.82);
  border-color: rgba(15,23,42,0.10);
  box-shadow: 0 12px 30px rgba(15,23,42,0.07);
}

body.light-mode .btn-secondary,
body.light-mode .btn-card,
body.light-mode .auth-link,
body.light-mode .lite-mode-toggle,
body.light-mode .nav-icon-btn,
body.light-mode .title-toggle,
body.light-mode .hero-slider-button,
body.light-mode .product-slider-btn,
body.light-mode .blog-slider-btn,
body.light-mode .landing-ai-action-btn {
  background: rgba(255,255,255,0.72);
  border-color: rgba(15,23,42,0.14);
  color: #0b1220;
}

body.light-mode .btn-secondary:hover,
body.light-mode .btn-card:hover,
body.light-mode .auth-link:hover,
body.light-mode .lite-mode-toggle:hover,
body.light-mode .nav-icon-btn:hover,
body.light-mode .title-toggle:hover,
body.light-mode .product-slider-btn:hover,
body.light-mode .blog-slider-btn:hover,
body.light-mode .landing-ai-action-btn:hover {
  background: rgba(255,45,85,0.10);
  border-color: rgba(255,45,85,0.34);
  color: #a80023;
}

body.light-mode .hero-slider-button {
  color: #0b1220 !important;
}

body.light-mode .hero-slider-button:hover {
  color: #ff2d55 !important;
}

body.light-mode .navbar .nav-links a {
  color: #334155;
}

body.light-mode .navbar .nav-links a:hover {
  background: rgba(255,45,85,0.08);
  color: #0b1220;
}

body.light-mode .navbar .nav-links a.active {
  background: rgba(255,45,85,0.12);
  color: #a80023;
}

body.light-mode .bottom-nav a,
body.light-mode .bottom-nav button {
  color: #475569;
}

body.light-mode .bottom-nav a.active,
body.light-mode .bottom-nav button.active {
  color: #ff2d55;
}

body.light-mode .nav-tree-row {
  background: rgba(255,255,255,0.80);
  border-color: rgba(15,23,42,0.10);
}

body.light-mode .nav-tree-row:hover {
  background: rgba(255,255,255,0.96);
  border-color: rgba(255,45,85,0.30);
}

body.light-mode .nav-tree-link {
  color: #1e293b;
}

body.light-mode .nav-tree-children .nav-tree-link {
  color: #334155;
}

body.light-mode .nav-tree-toggle {
  background: rgba(255,45,85,0.08);
  border-color: rgba(255,45,85,0.18);
  color: #ff2d55;
}

body.light-mode .card-img-wrap,
body.light-mode .card-img-inner,
body.light-mode .showcase-img,
body.light-mode .product-image,
body.light-mode .product-gallery {
  background: #f8fafc !important;
}

body.light-mode .article-body a,
body.light-mode .short-desc a,
body.light-mode .long-description a {
  color: #ff2d55;
}

body.light-mode .article-body a:hover,
body.light-mode .short-desc a:hover,
body.light-mode .long-description a:hover {
  color: #a80023;
}

body.light-mode .footer-contact-info {
  background: rgba(15,23,42,0.04);
  border-color: rgba(15,23,42,0.10);
}

body.light-mode .footer-contact-info a,
body.light-mode .footer-contact-info p {
  color: #334155;
}

body.light-mode .footer-contact-info a:hover {
  color: #a80023;
}

body.light-mode .enamad-logo-wrapper {
  background: rgba(255,255,255,0.72);
  border-color: rgba(15,23,42,0.10);
}


/* =========================================================
   LIGHT NAV OPACITY FIX
   Reduce blur transparency so content underneath does not blend.
   ========================================================= */
body.light-mode .navbar,
body.light-mode .navbar.scrolled,
body.light-mode .mobile-nav,
body.light-mode .bottom-nav {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* =========================================================
   COOL BLUE WHITER BACKGROUND FINAL
   ========================================================= */
body.light-mode {
  --bg: #ffffff;
  --bg-secondary: #ffffff;
  --surface: rgba(255,255,255,0.86);
}



/* =========================================================
   FOOTER LIGHT BLUE RED THEME FINAL
   ========================================================= */
body.light-mode .site-footer {
  /* THEODOR-CAMPAIGN-FIX-V1: 5-layer gradient repainted on every scroll
     frame on FF Mobile. Flat color keeps the calm palette; paint cost gone. */
  background: #ffffff !important;
  border-top-color: rgba(15,23,42,0.08) !important;
}

body.light-mode .footer-logo-img {
  background: rgba(255,255,255,0.70) !important;
  border: 1px solid rgba(255,45,85,0.14) !important;
}

body.light-mode .footer-site-name {
  background: linear-gradient(135deg, #a80023, #ff2d55) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.light-mode .footer-description,
body.light-mode .footer-heading,
body.light-mode .footer-links a {
  color: #334155 !important;
}

body.light-mode .footer-links a:hover {
  color: #ff2d55 !important;
}

body.light-mode .footer-socials a {
  background: rgba(255,255,255,0.80) !important;
  border-color: rgba(255,45,85,0.18) !important;
  color: #334155 !important;
}

body.light-mode .footer-socials a:hover {
  background: linear-gradient(135deg, #ff2d55, #e11d48) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

body.light-mode .footer-contact-info {
  background: rgba(255,255,255,0.80) !important;
  border-color: rgba(255,45,85,0.16) !important;
}

body.light-mode .footer-contact-info a,
body.light-mode .footer-contact-info p {
  color: #334155 !important;
}

body.light-mode .footer-contact-info a:hover {
  color: #ff2d55 !important;
}

body.light-mode .footer-bottom {
  border-top-color: rgba(255,45,85,0.12) !important;
  color: #64748b !important;
}

body.light-mode .enamad-logo-wrapper {
  background: rgba(255,255,255,0.80) !important;
  border-color: rgba(255,45,85,0.16) !important;
}


/* =========================================================
   LIGHT MEGA MENU OPAQUE FIX
   Fully opaque light mega dropdowns, no content bleed.
   ========================================================= */
body.light-mode .mega-menu,
body.light-mode .mega-menu-catalog,
body.light-mode .mega-child-panel {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.light-mode .mega-menu-wrapper,
body.light-mode .mega-child-list {
  background: transparent !important;
}

body.light-mode .mega-menu .mega-parent-link,
body.light-mode .mega-menu .mega-child-list a {
  color: #334155 !important;
}

body.light-mode .mega-menu .mega-parent-link:hover,
body.light-mode .mega-menu .mega-child-list a:hover {
  background: rgba(255,45,85,0.08) !important;
  color: #a80023 !important;
}


/* ==========================================================================
   SAFE MOBILE LIGHT-MODE PERFORMANCE FIX (Appended)
   - Reduces expensive backdrop-filter, blur, and gradients on small screens.
   - Does NOT hide or modify media elements.
   - Does NOT override .card-glass background-image.
   ========================================================================== */
@media (max-width: 768px) {

  body.light-mode .lux-navbar,
  body.light-mode .stat-card,
  body.light-mode .showcase-card,
  body.light-mode .blog-banner,
  body.light-mode .feature-item,
  body.light-mode .newsletter-card,
  body.light-mode .landing-ai-card,
  body.light-mode .store-story-viewer-panel,
  body.light-mode .store-story-viewer-backdrop,
  body.light-mode .support-panel,
  body.light-mode .category-sheet,
  body.light-mode .search-dialog,
  body.light-mode .navbar,
  body.light-mode .bottom-nav,
  body.light-mode .mobile-nav,
  body.light-mode .mega-menu,
  body.light-mode .mega-menu-catalog,
  body.light-mode .user-dropdown,
  body.light-mode .search-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
  }

  body.light-mode .card-glass {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* background-image intentionally NOT changed */
  }

  body.light-mode .hero h1,
  body.light-mode .hero .brand,
  body.light-mode .hero .tagline,
  body.light-mode .section-header h2,
  body.light-mode .landing-ai-icon {
    filter: none !important;
  }
}

/* ===== MOBILE HAMBURGER ISLAND PANEL ===== */
@media (max-width: 1160px) {
  .mobile-nav {
    position: fixed !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 24px) !important;
    border-radius: 28px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 200 !important;
    transform: translateY(calc(-100% - 24px)) !important;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease !important;
    background: rgba(8, 12, 20, 0.82) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05) inset !important;
    padding: 8px !important;
    contain: none !important;
  }
  body.light-mode .mobile-nav {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(0,0,0,0.03) inset !important;
  }
  .mobile-nav.open {
    transform: translateY(0) !important;
  }
  .overlay.show {
    position: fixed !important;
    inset: 0 !important;
    z-index: 150 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .mobile-nav-header {
    border-radius: 22px 22px 0 0 !important;
  }
  .mobile-nav-links {
    padding-bottom: 12px !important;
  }
}

/* ===== MOBILE ISLAND SCROLLBAR HIDE ===== */
@media (max-width: 1160px) {
  .mobile-nav {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .mobile-nav::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    display: none !important;
  }
}

/* ===== DARK MODE ISLAND FIX ===== */
@media (max-width: 1160px) {
  body:not(.light-mode) .mobile-nav {
    background: rgba(8, 12, 20, 0.88) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
    isolation: isolate !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    contain: content !important;
  }
  body:not(.light-mode) .mobile-nav.open {
    transform: translateY(0) translateZ(0) !important;
    will-change: transform !important;
  }
}

/* ===== MOBILE ISLAND TOP Z-INDEX ===== */
@media (max-width: 1160px) {
  .mobile-nav {
    z-index: 2147483000 !important;
  }
  .overlay.show {
    z-index: 2147482990 !important;
  }
}


/* ===== HIDE NAVBAR CART ON MOBILE/TABLET (bottom nav has cart) ===== */
@media (max-width: 1160px) {
  .nav-actions > a[href*="cart"] {
    display: none !important;
  }
}


/* ===== MOBILE/TABLET GAP FIX ===== */
@media (max-width: 1160px) {
  .cat-hero,
  .products-hero,
  .subcat-section,
  .product-page-layout,
  .articles-hero,
  .articles-grid-container,
  .blog-home,
  .search-page {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ===== ZERO MAIN CONTAINER SIDE PADDING MOBILE/TABLET ===== */
@media (max-width: 1160px) {
  main.main-container {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}


/* ===== ANNOUNCEMENT BAR ZERO PADDING ===== */
body .announcement-bar,
body .announcement-bar.visible {
  padding: 0 !important;
}


/* ===== BOTTOM NAV STRONG GLASS BLUR ===== */
@media (max-width: 1160px) {
  .bottom-nav {
    background: rgba(10, 14, 26, 0.62) !important;
    -webkit-backdrop-filter: blur(44px) saturate(190%) !important;
    backdrop-filter: blur(44px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  }

  body.light-mode .bottom-nav {
    background: rgba(255, 255, 255, 0.58) !important;
    -webkit-backdrop-filter: blur(52px) saturate(200%) !important;
    backdrop-filter: blur(52px) saturate(200%) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
  }
}


/* ===== ANNOUNCEMENT MOBILE TEXT PADDING ===== */
@media (max-width: 768px) {
  body .announcement-bar .banner-text-wrapper {
    padding-right: 40px !important;
    padding-left: 8px !important;
  }
}


/* ===== COLLAPSIBLE FILTER GROUPS ===== */
details.filter-group {
  border: 1px solid var(--border);
  border-radius: 1rem;
  margin-bottom: 1rem;
  background: var(--surface);
  overflow: hidden;
}
details.filter-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  cursor: pointer;
  font-weight: 700;
  color: var(--primary-light);
  background: rgba(0,240,255,0.04);
  list-style: none;
}
details.filter-group > summary::-webkit-details-marker { display: none; }
details.filter-group > summary .fa-chevron-down {
  transition: transform 0.2s ease;
}
details.filter-group[open] > summary .fa-chevron-down {
  transform: rotate(180deg);
}
.filter-group-body {
  padding: 0.8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}


/* ===== MOBILE FILTER SHEET STRONG GLASS BLUR ===== */
@media (max-width: 1160px) {
  body .filter-sheet {
    background: rgba(8, 12, 20, 0.62) !important;
    -webkit-backdrop-filter: blur(44px) saturate(190%) !important;
    backdrop-filter: blur(44px) saturate(190%) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;
  }

  body.light-mode .filter-sheet {
    background: rgba(255, 255, 255, 0.68) !important;
    -webkit-backdrop-filter: blur(44px) saturate(180%) !important;
    backdrop-filter: blur(44px) saturate(180%) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
  }

  body .filter-sheet-backdrop {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}


/* ===== MOBILE NAVBAR RESPONSIVE ALIGNMENT & CROWDING FIX ===== */
@media (max-width: 1160px) {
  .nav-inner {
    gap: clamp(8px, 2vw, 16px) !important;
    padding: 0 clamp(10px, 2vw, 16px) !important;
  }
  .nav-actions {
    gap: clamp(4px, 1.5vw, 8px) !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-width: 0 !important;
  }
  .nav-icon-btn,
  .auth-link,
  .lite-mode-toggle,
  .hamburger {
    width: clamp(34px, 6vw, 40px) !important;
    height: clamp(34px, 6vw, 40px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    font-size: clamp(0.8rem, 2.5vw, 1rem) !important;
    flex-shrink: 1 !important;
  }
  .nav-icon-btn i,
  .auth-link i,
  .lite-mode-toggle i,
  .hamburger i {
    font-size: inherit !important;
  }
  .nav-logo .logo-icon {
    width: clamp(34px, 6vw, 40px) !important;
    height: clamp(34px, 6vw, 40px) !important;
    flex-shrink: 0 !important;
  }
}

@media (max-width: 480px) {
  .nav-actions {
    gap: clamp(2px, 1vw, 4px) !important;
  }
  .nav-icon-btn,
  .auth-link,
  .lite-mode-toggle,
  .hamburger {
    width: clamp(30px, 9vw, 34px) !important;
    height: clamp(30px, 9vw, 34px) !important;
  }
  .nav-logo .logo-icon {
    width: 30px !important;
    height: 30px !important;
  }
}


/* ===== ANDROID APP DOWNLOAD CARD ===== */
.android-download-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(0,240,255,0.08), rgba(138,43,226,0.08)), var(--surface);
  border: 1px solid var(--border);
  border-radius: 1.2rem;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}
.android-download-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-glow-cyan);
}
.android-download-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
  flex-shrink: 0;
}
.android-download-text {
  flex: 1;
  min-width: 0;
}
.android-download-text strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
}
.android-download-text span {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.android-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.android-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,240,255,0.25);
}

/* ===== FINAL MOBILE SCROLL PERFORMANCE OVERRIDE ===== */
@media (max-width: 1160px) {
  .navbar,
  .navbar::before,
  .navbar::after,
  .announcement-bar,
  .announcement-bar::before,
  .announcement-bar::after,
  .bottom-nav,
  .mobile-nav,
  .mobile-sticky-bar,
  .search-overlay,
  .category-sheet,
  .mega-menu,
  .mega-menu-catalog,
  .mega-child-panel {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    filter: none !important;
  }

  .navbar { background: rgba(8, 12, 20, 0.97) !important; }
  body.light-mode .navbar { background: rgba(255, 255, 255, 0.98) !important; }

  .bottom-nav { background: rgba(8, 12, 20, 0.97) !important; }
  body.light-mode .bottom-nav { background: rgba(255, 255, 255, 0.98) !important; }

  .mobile-sticky-bar { background: rgba(8, 12, 20, 0.97) !important; }
  body.light-mode .mobile-sticky-bar { background: rgba(255, 255, 255, 0.98) !important; }
}

/* ===== DARK MODE COLOR MATCH + MAIN IMAGE SHADOW FIX ===== */
@media (max-width: 1160px) {
  body:not(.light-mode) .navbar {
    background: rgba(10, 14, 26, 0.94) !important;
  }
  body:not(.light-mode) .bottom-nav {
    background: rgba(10, 14, 26, 0.94) !important;
  }
  body:not(.light-mode) .mobile-sticky-bar {
    background: rgba(10, 14, 26, 0.94) !important;
  }
}

/* Remove main image shadow on product detail */
.main-image-container {
  box-shadow: none !important;
}

/* ===== Keyboard-open state: hide bottom-nav so it doesn't block inputs ===== */
body.keyboard-open .bottom-nav {
    transform: translateY(150%) !important;
    pointer-events: none !important;
}


/* =========================================================
   card-shadow-remove-2026-09-20
   Light mode only: strip the gray resting shadow from
   .product-card and .blog-card so they match the landing
   page's #curated product cards (which have no resting
   shadow, only a colored glow on hover).
   Hover / active / focus states keep their existing glow.
   ========================================================= */
body.light-mode .product-card:not(:hover):not(:active):not(:focus-visible),
body.light-mode .blog-card:not(:hover):not(:active):not(:focus-visible) {
  box-shadow: none !important;
}

/* =========================================================
   MEGA MENU CHILDLESS PARENT ALIGN FIX
   Parent links without children were rendered with 2 flex
   items (icon + text) while parents with children had 3
   (icon + text + arrow-pseudo). space-between spread the 2-
   item case differently, causing the icons to sit on the
   opposite side. Force flex-start so icon+text stay together
   and the arrow (which has margin-right: auto) still floats
   to the far end when present.
   ========================================================= */
.mega-parent-link {
    justify-content: flex-start !important;
}

/* =========================================================
   BOTTOM-NAV-BACK-V16 - consolidated final (replaces V13..V15)
   - Chevron nudge animation in back mode
   - Hamburger wiggle animation in landing mode
   - Vertical divider (ID-specific)
   - No label, no rectangle, no glow
   ========================================================= */

/* ---- Button base: transparent everything ---- */
.bottom-nav .bottom-nav-back,
.bottom-nav .bottom-nav-back:hover,
.bottom-nav .bottom-nav-back:focus,
.bottom-nav .bottom-nav-back:focus-visible,
.bottom-nav .bottom-nav-back:active,
.bottom-nav .bottom-nav-back.active,
.bottom-nav .bottom-nav-back.back-pressed {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    filter: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

/* ---- Kill any stray ::after (divider uses ::before, added below) ---- */
.bottom-nav .bottom-nav-back::after {
    content: none !important;
    display: none !important;
}

/* ---- Divider: ID specificity beats V13`s content:none ---- */
#bottomBackBtn::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    right: -2px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(0,240,255,0.22), transparent) !important;
    pointer-events: none;
    z-index: 1;
}
body.light-mode #bottomBackBtn::before {
    background: linear-gradient(180deg, transparent, rgba(255,45,85,0.22), transparent) !important;
}

/* ---- Icon: transparent chevron / hamburger ---- */
.bottom-nav .bottom-nav-back .nav-icon,
.bottom-nav .bottom-nav-back .nav-icon * {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    display: inline-block !important;
    line-height: 1 !important;
    font-size: 1.45rem;
}
.bottom-nav .bottom-nav-back .nav-icon,
.bottom-nav .bottom-nav-back .nav-icon i {
    color: var(--primary-light, #00f0ff) !important;
}
body.light-mode .bottom-nav .bottom-nav-back .nav-icon,
body.light-mode .bottom-nav .bottom-nav-back .nav-icon i {
    color: #ff2d55 !important;
}

/* ---- Back mode: chevron nudges LEFT (return gesture) ---- */
.bottom-nav .bottom-nav-back .nav-icon {
    animation: botnav-back-chevron-nudge-v16 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes botnav-back-chevron-nudge-v16 {
    0%   { transform: translateX(0); }
    12%  { transform: translateX(-4px); }
    24%  { transform: translateX(0); }
    36%  { transform: translateX(-2px); }
    48%  { transform: translateX(0); }
    100% { transform: translateX(0); }
}

/* ---- Hamburger mode: gentle tilt-pulse (different feel) ---- */
.bottom-nav .bottom-nav-back.is-hamburger-mode .nav-icon {
    animation: botnav-hamburger-pulse-v16 3s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}
@keyframes botnav-hamburger-pulse-v16 {
    0%   { transform: scale(1) rotate(0deg); }
    15%  { transform: scale(1.08) rotate(-4deg); }
    30%  { transform: scale(1) rotate(0deg); }
    50%  { transform: scale(1.08) rotate(4deg); }
    65%  { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* Tap on either mode: brief settle */
.bottom-nav .bottom-nav-back.back-pressed .nav-icon,
.bottom-nav .bottom-nav-back:active .nav-icon {
    animation: none !important;
    transform: scale(0.92) !important;
    transition: transform 0.15s ease;
}

/* ---- Label: gone forever ---- */
.bottom-nav .bottom-nav-back .back-label,
body.light-mode .bottom-nav .bottom-nav-back .back-label {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .bottom-nav .bottom-nav-back .nav-icon,
    body.light-mode .bottom-nav .bottom-nav-back .nav-icon {
        animation: none !important;
    }
}

/* =========================================================
   BOTTOM-NAV-BACK-V16-1
   Press ripple: expanding circular flash behind the icon
   when .back-pressed is active. Uses ::after on the button
   (V16 disabled ::after globally; ID specificity restores it
   only in the pressed state).
   ========================================================= */

/* Override V16`s "::after content:none" for the pressed state only */
#bottomBackBtn.back-pressed::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,240,255,0.38) 0%, rgba(0,240,255,0) 70%);
    pointer-events: none;
    z-index: 0;
    animation: botnav-pressed-ripple-v16-1 900ms ease-out forwards;
}

body.light-mode #bottomBackBtn.back-pressed::after {
    background: radial-gradient(circle, rgba(255,45,85,0.42) 0%, rgba(255,45,85,0) 70%);
}

@keyframes botnav-pressed-ripple-v16-1 {
    0%   { transform: scale(0.55); opacity: 0; }
    18%  { transform: scale(1);    opacity: 1; }
    100% { transform: scale(1.6);  opacity: 0; }
}

/* Icon on press: brighten briefly for extra clarity */
.bottom-nav .bottom-nav-back.back-pressed .nav-icon,
.bottom-nav .bottom-nav-back.back-pressed .nav-icon i {
    color: #ffffff !important;
}
body.light-mode .bottom-nav .bottom-nav-back.back-pressed .nav-icon,
body.light-mode .bottom-nav .bottom-nav-back.back-pressed .nav-icon i {
    color: #a80023 !important;
}

@media (prefers-reduced-motion: reduce) {
    #bottomBackBtn.back-pressed::after {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* =========================================================
   BOTTOM-NAV-RIPPLE-ALL
   Press ripple on every bottom-nav item EXCEPT the back button
   (which has its own .back-pressed ripple).
   Also kills the native -webkit-tap-highlight-color.
   ========================================================= */

/* Base: no native tap flash + anchor for ::after */
.bottom-nav a,
.bottom-nav button:not(.bottom-nav-back) {
    -webkit-tap-highlight-color: transparent !important;
    position: relative;
}

/* Ripple layer */
.bottom-nav a::after,
.bottom-nav button:not(.bottom-nav-back)::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 28px;
    background: radial-gradient(circle,
        rgba(0, 240, 255, 0.38) 0%,
        rgba(0, 240, 255, 0.15) 45%,
        rgba(0, 240, 255, 0) 75%);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transform: scale(0.7);
    will-change: opacity, transform;
}

body.light-mode .bottom-nav a::after,
body.light-mode .bottom-nav button:not(.bottom-nav-back)::after {
    background: radial-gradient(circle,
        rgba(255, 45, 85, 0.42) 0%,
        rgba(255, 45, 85, 0.16) 45%,
        rgba(255, 45, 85, 0) 75%);
}

/* Fire on press */
.bottom-nav a:active::after,
.bottom-nav button:not(.bottom-nav-back):active::after {
    animation: botnav-tap-ripple-all 420ms cubic-bezier(0.2, 0, 0.3, 1);
}

@keyframes botnav-tap-ripple-all {
    0%   { opacity: 0; transform: scale(0.7); }
    22%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.25); }
}

/* Icon stays on top of the ripple */
.bottom-nav a .nav-icon,
.bottom-nav button:not(.bottom-nav-back) .nav-icon {
    position: relative;
    z-index: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bottom-nav a:active::after,
    .bottom-nav button:not(.bottom-nav-back):active::after {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* =========================================================
   BOTTOM-NAV-BADGE-FIX
   Cart badge sits above the icon, never behind it.
   Ripple (z0) < icon (z1) < badge (z3).
   ========================================================= */

.bottom-nav .cart-badge-mobile {
    position: absolute !important;
    top: 4px !important;
    right: calc(50% - 18px) !important;
    z-index: 3 !important;
    pointer-events: none;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: var(--rose, #ff0055);
    color: #fff !important;
    border-radius: 10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(255, 0, 85, 0.45);
}

body.light-mode .bottom-nav .cart-badge-mobile {
    box-shadow: 0 2px 6px rgba(255, 0, 85, 0.35);
}

/* =========================================================
   BOTTOM-NAV-NOBLUR - eliminate every backdrop-filter that lagged
   the mobile GPUs, replace with layered gradient backgrounds.

   Backdrop-filter forces the compositor to sample pixels behind the
   element on every frame the page moves - very expensive on phones.
   Layered radial gradients cost nothing on GPU.
   ========================================================= */

/* ---- Kill EVERY backdrop-filter in the nav stack ---- */
.bottom-nav,
.bottom-nav *,
body:not(.light-mode) .bottom-nav,
body.light-mode .bottom-nav,
.mobile-nav,
body:not(.light-mode) .mobile-nav,
body.light-mode .mobile-nav,
.overlay.show {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---- FLOATING BOTTOM NAV - DARK ----
   Base black + cyan and purple corner glows + top hairline */
body:not(.light-mode) .bottom-nav,
body:not(.light-mode) .bottom-nav {
    background:
        radial-gradient(ellipse 60% 100% at 0% 0%, rgba(0,240,255,0.10) 0%, transparent 55%),
        radial-gradient(ellipse 60% 100% at 100% 100%, rgba(138,43,226,0.10) 0%, transparent 55%),
        linear-gradient(180deg, rgba(14,18,30,0.98) 0%, rgba(6,9,18,0.98) 100%) !important;
    border: 1px solid rgba(0,240,255,0.18) !important;
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 24px rgba(0, 240, 255, 0.08) !important;
}

/* ---- FLOATING BOTTOM NAV - LIGHT ---- */
body.light-mode .bottom-nav {
    background:
        radial-gradient(ellipse 60% 100% at 0% 0%, rgba(255,45,85,0.08) 0%, transparent 55%),
        radial-gradient(ellipse 60% 100% at 100% 100%, rgba(139,92,246,0.08) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(246,250,253,0.99) 100%) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow:
        0 20px 45px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.7) inset,
        0 0 24px rgba(255, 45, 85, 0.08) !important;
}

/* ---- Top highlight hairline ---- */
.bottom-nav::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.45), transparent);
    pointer-events: none;
    border-radius: 1px;
    z-index: 2;
}
body.light-mode .bottom-nav::before {
    background: linear-gradient(90deg, transparent, rgba(255, 45, 85, 0.40), transparent);
}

/* ---- MOBILE SIDE PANEL - DARK ---- */
body:not(.light-mode) .mobile-nav {
    background:
        radial-gradient(ellipse 100% 60% at 100% 0%, rgba(0,240,255,0.10) 0%, transparent 60%),
        radial-gradient(ellipse 100% 60% at 0% 100%, rgba(138,43,226,0.10) 0%, transparent 60%),
        linear-gradient(180deg, rgba(10,14,24,0.99) 0%, rgba(4,6,12,0.99) 100%) !important;
    border-left: 1px solid rgba(0, 240, 255, 0.12) !important;
}

/* ---- MOBILE SIDE PANEL - LIGHT ---- */
body.light-mode .mobile-nav {
    background:
        radial-gradient(ellipse 100% 60% at 100% 0%, rgba(255,45,85,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 100% 60% at 0% 100%, rgba(139,92,246,0.07) 0%, transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.99) 100%) !important;
    border-left: 1px solid rgba(6, 152, 214, 0.15) !important;
}

/* ---- Overlay behind side panel: dim without blur ---- */
.overlay.show {
    background: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
body.light-mode .overlay.show {
    background: rgba(15, 23, 42, 0.35) !important;
}

/* =========================================================
   MOBILE-NAV-REDESIGN-V2
   ========================================================= */

/* Safe-area: never let the panel header touch the notch */
@media (max-width: 1160px) {
    .mobile-nav {
        top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    }
}
.mobile-nav {
    padding-top: max(env(safe-area-inset-top, 0px), 8px) !important;
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 16px) !important;
}

/* Header: brand row */
.mobile-nav-header {
    padding: 16px 18px !important;
    min-height: 68px;
    border-bottom: 1px solid rgba(0, 240, 255, 0.08) !important;
    background: linear-gradient(135deg, rgba(0,240,255,0.06), rgba(138,43,226,0.06)) !important;
}
body.light-mode .mobile-nav-header {
    border-bottom-color: rgba(15, 23, 42, 0.06) !important;
    background: linear-gradient(135deg, rgba(255,45,85,0.05), rgba(139,92,246,0.05)) !important;
}
.mobile-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.mobile-brand-text {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.3px;
    background: linear-gradient(135deg, var(--primary-light, #00f0ff), var(--accent-light, #a855f7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.light-mode .mobile-brand-text {
    background: linear-gradient(135deg, #ff2d55, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Close button polish */
.mobile-close {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
}
body.light-mode .mobile-close {
    background: rgba(15, 23, 42, 0.04) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Nav links: tile rows */
.mobile-nav-links {
    padding: 14px 12px 20px !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mobile-nav-links a,
.mobile-nav-links button {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    min-height: 52px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: var(--text-secondary) !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    position: relative !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.14s ease;
}
.mobile-nav-links a:hover,
.mobile-nav-links a:active,
.mobile-nav-links button:hover,
.mobile-nav-links button:active {
    background: rgba(0, 240, 255, 0.08) !important;
    border-color: rgba(0, 240, 255, 0.22) !important;
    color: var(--text) !important;
    transform: translateX(-2px);
}
body.light-mode .mobile-nav-links a,
body.light-mode .mobile-nav-links button {
    background: rgba(15, 23, 42, 0.02) !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
    color: #334155 !important;
}
body.light-mode .mobile-nav-links a:hover,
body.light-mode .mobile-nav-links a:active,
body.light-mode .mobile-nav-links button:hover,
body.light-mode .mobile-nav-links button:active {
    background: rgba(255, 45, 85, 0.06) !important;
    border-color: rgba(255, 45, 85, 0.20) !important;
    color: #0f172a !important;
}

/* Chevron at the left edge (RTL) */
.mobile-nav-links a::after,
.mobile-nav-links button::after {
    content: '\f104';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.72rem;
    color: rgba(0, 240, 255, 0.45);
    pointer-events: none;
    transition: color 0.18s ease, transform 0.18s ease;
}
.mobile-nav-links a:hover::after,
.mobile-nav-links a:active::after,
.mobile-nav-links button:hover::after,
.mobile-nav-links button:active::after {
    color: rgba(0, 240, 255, 0.9);
    transform: translateY(-50%) translateX(-2px);
}
body.light-mode .mobile-nav-links a::after,
body.light-mode .mobile-nav-links button::after {
    color: rgba(255, 45, 85, 0.45);
}

/* سفارشها accent */
.mobile-nav-links a.mobile-nav-orders {
    background: linear-gradient(135deg, rgba(0,240,255,0.07), rgba(138,43,226,0.07)) !important;
    border-color: rgba(0, 240, 255, 0.16) !important;
}
body.light-mode .mobile-nav-links a.mobile-nav-orders {
    background: linear-gradient(135deg, rgba(255,45,85,0.06), rgba(139,92,246,0.06)) !important;
    border-color: rgba(255,45,85,0.18) !important;
}

/* Icon chip */
.mobile-nav-links .nav-icon {
    flex: 0 0 auto;
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    background: rgba(0, 240, 255, 0.08) !important;
    color: var(--primary-light, #00f0ff) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
}
body.light-mode .mobile-nav-links .nav-icon {
    background: rgba(255, 45, 85, 0.08) !important;
    color: #ff2d55 !important;
}

/* Profile card polish */
.mobile-profile {
    margin: 16px 14px 4px !important;
    padding: 14px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, rgba(0,240,255,0.06), rgba(138,43,226,0.06)) !important;
    border: 1px solid rgba(0, 240, 255, 0.12) !important;
    display: flex;
    align-items: center;
    gap: 12px;
}
body.light-mode .mobile-profile {
    background: linear-gradient(135deg, rgba(255,45,85,0.06), rgba(139,92,246,0.06)) !important;
    border-color: rgba(255,45,85,0.14) !important;
}

/* Theme toggle: full-width tile */
.mobile-theme-toggle {
    margin: 8px 14px 12px !important;
    padding: 12px 16px !important;
    min-height: 52px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, rgba(0,240,255,0.07), rgba(138,43,226,0.07)) !important;
    border: 1px solid rgba(0, 240, 255, 0.14) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-weight: 600 !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent !important;
}
body.light-mode .mobile-theme-toggle {
    background: linear-gradient(135deg, rgba(255,45,85,0.06), rgba(139,92,246,0.06)) !important;
    border-color: rgba(255,45,85,0.16) !important;
}

/* HR separator: subtle */
.mobile-nav-links hr {
    border: none !important;
    border-top: 1px solid rgba(0, 240, 255, 0.08) !important;
    margin: 8px 4px !important;
}
body.light-mode .mobile-nav-links hr {
    border-top-color: rgba(15, 23, 42, 0.06) !important;
}

/* =========================================================
   MOBILE-NAV-BRAND-AVATAR
   - Avatar fallback: centered person icon, no text
   - Center the logo in the header now that the brand text is gone
   ========================================================= */

/* Avatar: centered user icon */
.mobile-avatar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(0,240,255,0.10), rgba(138,43,226,0.10)) !important;
    border: 1px solid rgba(0, 240, 255, 0.18) !important;
    color: var(--primary-light, #00f0ff) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}
.mobile-avatar i {
    font-size: 1.05rem !important;
    line-height: 1 !important;
    color: inherit !important;
}
body.light-mode .mobile-avatar {
    background: linear-gradient(135deg, rgba(255,45,85,0.08), rgba(139,92,246,0.08)) !important;
    border-color: rgba(255, 45, 85, 0.20) !important;
    color: #ff2d55 !important;
}

/* Header: logo now center-left, close button stays on the left (RTL: right side is left visually) */
.mobile-nav-header {
    justify-content: space-between !important;
}
.mobile-brand {
    flex: 0 0 auto;
}

/* =========================================================
   CATEGORY-SHEET-NOBLUR
   - Ensures no backdrop-filter survives on these elements
     (any rule I missed still gets neutralised here)
   - Opaque backgrounds so nothing shows through
   ========================================================= */

.category-sheet,
.category-sheet.show,
body.light-mode .category-sheet,
body:not(.reduced-visual-effects) .category-sheet,
body.light-mode:not(.reduced-visual-effects) .category-sheet,
.mega-menu,
.mega-menu-catalog,
.mega-child-panel,
.mega-menu-wrapper,
.sheet-backdrop,
#sheetBackdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Opaque backgrounds (dark) */
.category-sheet,
body:not(.light-mode) .category-sheet {
    background: #080c16 !important;
}
.mega-menu,
.mega-menu-catalog {
    background: #080c14 !important;
}
.mega-child-panel {
    background: #0c1018 !important;
}

/* Opaque backgrounds (light) */
body.light-mode .category-sheet {
    background: #ffffff !important;
}
body.light-mode .mega-menu,
body.light-mode .mega-menu-catalog {
    background: #ffffff !important;
}
body.light-mode .mega-child-panel {
    background: #f8fafc !important;
}

/* =========================================================
   BOTTOM-NAV-MODERN
   Replace the Vista-style radial-gradient glows with a flat,
   modern dark island. Clean 1px edge, subtle top hairline,
   tight shadow. Matches Linear/Vercel/iOS-17 aesthetic.
   ========================================================= */

body:not(.light-mode) .bottom-nav,
body:not(.light-mode) #bottomNav {
    background: #0b0e15 !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.55),
        0 1px 0 rgba(255, 255, 255, 0.03) inset !important;
    border-radius: 22px !important;
}

/* Top hairline: single subtle accent */
body:not(.light-mode) .bottom-nav::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.28), transparent) !important;
    border-radius: 1px;
    z-index: 2;
    pointer-events: none;
}

/* Active tab: cleaner pill, less bloom */
body:not(.light-mode) .bottom-nav a.active::before,
body:not(.light-mode) .bottom-nav button.active::before {
    background: rgba(0, 240, 255, 0.10) !important;
    box-shadow: none !important;
}

body:not(.light-mode) .bottom-nav a.active,
body:not(.light-mode) .bottom-nav button.active {
    color: #7df9ff !important;
}

/* Icons: subtle, not neon */
body:not(.light-mode) .bottom-nav .nav-icon {
    filter: none !important;
}
body:not(.light-mode) .bottom-nav a.active .nav-icon,
body:not(.light-mode) .bottom-nav button.active .nav-icon {
    filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.35)) !important;
}

/* Label color: muted, readable */
body:not(.light-mode) .bottom-nav a,
body:not(.light-mode) .bottom-nav button {
    color: rgba(255, 255, 255, 0.55) !important;
}
body:not(.light-mode) .bottom-nav a:hover,
body:not(.light-mode) .bottom-nav button:hover {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* The back-button divider: thinner, subtler in dark */
body:not(.light-mode) #bottomBackBtn::before {
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.08), transparent) !important;
}

/* =========================================================
   CUSTOMER-DASHBOARD-AVATAR-V1
   - .dash-avatar and .sidebar-avatar: person icon centered
   ========================================================= */

.dash-avatar i,
.sidebar-avatar i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 1.5rem !important;
    color: var(--primary-light, #00f0ff) !important;
    line-height: 1 !important;
}
body.light-mode .dash-avatar i,
body.light-mode .sidebar-avatar i {
    color: #ff2d55 !important;
}

/* Sidebar avatar icon slightly larger to match the box */
.sidebar-avatar i {
    font-size: 1.6rem !important;
}



/* ==================== DIGIPAY-INTEGRATION ==================== */
/* Payment method selector -- used in checkout.html and order_detail retry */
.payment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: rgba(255,255,255,0.02);
}
.payment-option:hover {
    border-color: rgba(0,240,255,0.4);
}
.payment-option input[type="radio"] {
    margin: 0;
    accent-color: #00f0ff;
    flex-shrink: 0;
}
.payment-option:has(input:checked) {
    border-color: #00f0ff;
    background: rgba(0,240,255,0.06);
}
.payment-option-body {
    flex: 1;
    min-width: 0;
}
.payment-option-title {
    font-weight: 700;
    font-size: .95rem;
}
.payment-option-sub {
    font-size: .82rem;
    opacity: .65;
    margin-top: 3px;
}
.payment-option-disabled {
    opacity: .55;
    cursor: not-allowed;
    background: rgba(255,255,255,0.01);
}
body.light-mode .payment-option {
    background: rgba(15,23,42,0.02);
}
body.light-mode .payment-option:has(input:checked) {
    background: rgba(8,145,178,0.08);
    border-color: #a80023;
}
body.light-mode .payment-option input[type="radio"] {
    accent-color: #a80023;
}
/* ==================== END DIGIPAY-INTEGRATION ==================== */


/* ==================== GATEWAY-LOGOS ==================== */
/* Payment option card logos (checkout + order detail) */
.payment-option-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 32px;
}
.payment-option-logo .gw-logo {
    max-height: 32px;
    max-width: 72px;
    object-fit: contain;
}
/* Theme-swapped logos: dark.png on default (dark) theme, light.png on light-mode */
.gw-logo-on-dark  { display: block; }
.gw-logo-on-light { display: none; }
body.light-mode .gw-logo-on-dark  { display: none; }
body.light-mode .gw-logo-on-light { display: block; }

/* Footer gateway logos (below the enamad block) */
.footer-gateway-logos {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.footer-gateway-logos .gw-logo {
    max-height: 34px;
    max-width: 80px;
    object-fit: contain;
    opacity: .85;
    transition: opacity .15s;
}
.footer-gateway-logos .gw-logo:hover { opacity: 1; }
/* ==================== END GATEWAY-LOGOS ==================== */


/* ==================== DIGIPAY-RESPONSIVE-FIX ==================== */
/* The .dash-v2 .od-actions > * rule gives children flex: 1 1 160px.
   We need the picker to take a full row above the pay button, on all
   viewports. Higher specificity (.dash-v2 .od-actions > .od-payment-options)
   overrides the parent rule without !important. */
.dash-v2 .od-actions > .od-payment-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 100%;
    flex-basis: 100%;
    width: 100%;
    margin-top: 0;
    margin-bottom: 4px;
}
.dash-v2 .od-payment-options .payment-option {
    width: 100%;
    box-sizing: border-box;
    margin-top: 0;
    flex-wrap: nowrap;
    display: flex;
}
/* Global: any .payment-option full width of its parent (checkout + order detail) */
.payment-option {
    width: 100%;
    box-sizing: border-box;
}
/* Mobile tightening */
@media (max-width: 480px) {
    .payment-option-logo {
        min-width: 40px;
        height: 28px;
    }
    .payment-option-logo .gw-logo {
        max-height: 28px;
        max-width: 60px;
    }
    .payment-option-title { font-size: .88rem; }
    .payment-option-sub   { font-size: .74rem; }
    .footer-gateway-logos {
        gap: 10px;
    }
    .footer-gateway-logos .gw-logo {
        max-height: 28px;
        max-width: 64px;
    }
}
/* ==================== END DIGIPAY-RESPONSIVE-FIX ==================== */


/* =========================================================
   FLOATING-ELEMENTS-STACK
   Unified positioning for fixed floats (support widget,
   filter FAB, and any future FABs) so they never overlap
   the bottom nav, PDP sticky bar, or each other.
   Safari iOS safe: px-only math + env() safe area; JS in
   base.html re-parents the floats to <body> to defeat any
   ancestor transform / overflow that would break
   position: fixed on iOS.
   ========================================================= */
:root {
    --float-edge-gap: 16px;
    --float-stack-gap: 12px;
    --float-stack-bottom: calc(
        var(--bottom-nav-height, 64px)
        + var(--float-stack-gap)
        + env(safe-area-inset-bottom, 0px)
    );
    --float-stack-raised: calc(
        var(--bottom-nav-height, 64px)
        + var(--float-stack-gap)
        + env(safe-area-inset-bottom, 0px)
        + 108px
    );
}

@media (max-width: 1160px) {
    /* Support widget -- right side, above bottom nav */
    html body .support-widget {
        bottom: var(--float-stack-bottom) !important;
        right: var(--float-edge-gap) !important;
        left: auto !important;
        top: auto !important;
        z-index: 141 !important;
    }
    /* Support widget on PDP -- raise above the sticky bar */
    html body.pdp-with-sticky-bar .support-widget,
    html body.pdp-with-msb-swatches .support-widget {
        bottom: var(--float-stack-raised) !important;
    }

    /* Filter FAB -- left side, above bottom nav */
    html body .mobile-filter-fab {
        bottom: var(--float-stack-bottom) !important;
        left: var(--float-edge-gap) !important;
        right: auto !important;
        top: auto !important;
        z-index: 142 !important;
    }
    /* Filter FAB on PDP -- not present, but guard anyway */
    html body.pdp-with-sticky-bar .mobile-filter-fab {
        bottom: var(--float-stack-raised) !important;
    }
}

/* Tighter edges on tiny screens */
@media (max-width: 400px) {
    html body .support-widget {
        right: 12px !important;
    }
    html body .mobile-filter-fab {
        left: 12px !important;
    }
}


/* =========================================================
   FLOATING-ELEMENTS-STACK-FIX-V2
   Corrects the previous block. The bottom-nav is anchored at
   bottom: 16px with height 64px, so its TOP edge is 80px from
   the viewport bottom -- NOT 64px. The correct offset is:
      16px (nav's own bottom) + --bottom-nav-height + gap
   The previous block wrote just "--bottom-nav-height + gap",
   landing the floats inside the nav and the sticky bar.
   This block also drops the z-index down so the floats never
   render above the nav / sticky bar / sheets / modals.
   ========================================================= */
@media (max-width: 1160px) {
    html body .support-widget {
        bottom: calc(
            16px
            + var(--bottom-nav-height, 64px)
            + 20px
            + env(safe-area-inset-bottom, 0px)
        ) !important;
        right: 20px !important;
        left: auto !important;
        top: auto !important;
        z-index: 100 !important;
    }
    html body .mobile-filter-fab {
        bottom: calc(
            16px
            + var(--bottom-nav-height, 64px)
            + 20px
            + env(safe-area-inset-bottom, 0px)
        ) !important;
        left: 20px !important;
        right: auto !important;
        top: auto !important;
        z-index: 101 !important;
    }
    /* PDP with sticky bar: the bar sits at bottom: calc(16+64+20)=100px,
       is ~120px tall, so its top edge is ~220px from viewport bottom.
       Floats go at 16+64+140 = 220px -- clean top edge clearance. */
    html body.pdp-with-sticky-bar .support-widget,
    html body.pdp-with-sticky-bar .mobile-filter-fab {
        bottom: calc(
            16px
            + var(--bottom-nav-height, 64px)
            + 140px
            + env(safe-area-inset-bottom, 0px)
        ) !important;
    }
}
@media (max-width: 400px) {
    html body .support-widget { right: 12px !important; }
    html body .mobile-filter-fab { left: 12px !important; }
}

/* =========================================================
   FIX-3-MOBILE-SUPPORT
   On mobile (<=1160px, where bottom-nav is visible), hide the
   floating support widget entirely. Entry point is now the
   پشتیبانی button in the bottom-nav / دسته‌ها sheet.
   ========================================================= */
@media (max-width: 1160px) {
    html body .support-widget {
        display: none !important;
    }
}
/* FIX-3-MOBILE-SUPPORT */

/* =========================================================
   FIX-3-BOTNAV-FORCE
   Reassert bottom-nav visibility at tablet/mobile widths using
   id specificity (#bottomNav) so no later .class rule can hide it.
   Desktop (>=1161px) still hides by design — full navbar replaces it.
   ========================================================= */
@media (max-width: 1160px) {
    html body #bottomNav,
    html body .bottom-nav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}
@media (min-width: 1161px) {
    html body #bottomNav,
    html body .bottom-nav {
        display: none !important;
    }
}
/* FIX-3-BOTNAV-FORCE */

/* ============================================================
   FIX-3-SUPPORT-BTN
   Start button inside #supportPanel is unstyled on non-home pages
   because .btn/.btn-primary live in home.css. Re-declare here
   (base.css loads everywhere).
   ============================================================ */
.support-panel .btn.btn-primary,
.ai-support-body .btn.btn-primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 12px 22px;
    border: 0 !important;
    border-radius: 12px !important;
    font-family: var(--font-body, 'IRANSans', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.01em;
    cursor: pointer;
    color: #051a20 !important;
    background: linear-gradient(135deg, var(--primary, #00f0ff), var(--primary-dark, #0698d6)) !important;
    box-shadow:
        0 6px 20px rgba(0, 240, 255, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
    transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.support-panel .btn.btn-primary:hover,
.ai-support-body .btn.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 28px rgba(0, 240, 255, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    filter: brightness(1.06);
}
.support-panel .btn.btn-primary:active,
.ai-support-body .btn.btn-primary:active {
    transform: translateY(0) scale(0.98);
    box-shadow:
        0 4px 14px rgba(0, 240, 255, 0.35),
        inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
.support-panel .btn.btn-primary:focus-visible,
.ai-support-body .btn.btn-primary:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(0, 240, 255, 0.35),
        0 6px 20px rgba(0, 240, 255, 0.35);
}
.support-panel .btn.btn-primary:disabled,
.ai-support-body .btn.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    filter: none;
}
body.light-mode .support-panel .btn.btn-primary,
body.light-mode .ai-support-body .btn.btn-primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #d81b3f, #a80023) !important;
    box-shadow:
        0 6px 20px rgba(6, 152, 214, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
body.light-mode .support-panel .btn.btn-primary:hover,
body.light-mode .ai-support-body .btn.btn-primary:hover {
    box-shadow:
        0 10px 28px rgba(6, 152, 214, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
@media (prefers-reduced-motion: reduce) {
    .support-panel .btn.btn-primary,
    .ai-support-body .btn.btn-primary,
    .support-panel .btn.btn-primary:hover,
    .ai-support-body .btn.btn-primary:hover,
    .support-panel .btn.btn-primary:active,
    .ai-support-body .btn.btn-primary:active {
        transition: none !important;
        transform: none !important;
    }
}
/* FIX-3-SUPPORT-BTN */


/* =========================================================
   THEODOR-SCROLL-INP-V2
   1) Light mode: kill the 3-radial-gradient body stack.
      In dark mode those gradients read as ambient accent; in
      light mode the cyan layer at 12% over a pale --bg reads as
      a cold-blue wash. Light mode becomes var(--bg) only.
   2) Mobile: remove backdrop-filter from the sticky top navbar
      and bottom-nav. A backdrop-filter on a sticky element
      forces the compositor to re-sample the page behind it on
      every scroll frame. INP/Rendering profile shows 2.1s+2.1s
      cost — that's this.
   Does NOT touch: botnav chevron nudge, hamburger pulse, FAB
   icon/gradient/halo, ripple, orbs, marquee, or any animation.
   ========================================================= */


@media (max-width: 1160px) {
    html body .navbar,
    html body .bottom-nav {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: rgba(10, 14, 26, 0.96) !important;
    }
    html body.light-mode .navbar,
    html body.light-mode .bottom-nav {
        background: rgba(255, 255, 255, 0.98) !important;
    }
}

/* END THEODOR-SCROLL-INP-V2 */


/* =========================================================
   THEODOR-GPU-MOBILE-PERF-V1
   Mobile-only GPU cost removal. Desktop unaffected.
   Kills: category-sheet light-mode 22px blur,
   filter-sheet 44px blur (missed by earlier NOBLUR sweep).
   Does NOT touch any button/keyframe animation.
   ========================================================= */
@media (max-width: 1160px) {
  body.light-mode .category-sheet {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background:
      radial-gradient(circle at 15% 0%, rgba(255,45,85,0.10), transparent 36%),
      radial-gradient(circle at 85% 100%, rgba(124,58,237,0.09), transparent 40%),
      rgba(255,255,255,0.94) !important;
  }
  body .filter-sheet {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(8, 12, 20, 0.96) !important;
  }
  body.light-mode .filter-sheet {
    background: rgba(255, 255, 255, 0.98) !important;
  }
}
/* END THEODOR-GPU-MOBILE-PERF-V1 */


/* =========================================================
   THEODOR-FIREFOX-MOBILE-PERF-V1
   Firefox Mobile (Gecko) CPU-falls-back on backdrop-filter.
   This block kills every remaining live blur on mobile.
   Desktop unaffected. Button animations untouched.
   ========================================================= */
@media (max-width: 1160px) {
  html body .announcement-bar,
  html body.light-mode .announcement-bar,
  html body .navbar,
  html body.light-mode .navbar,
  html body .bottom-nav,
  html body.light-mode .bottom-nav,
  html body .user-dropdown,
  html body.light-mode .user-dropdown,
  html body .lite-mode-toggle,
  html body .search-overlay,
  html body .footer-logo-img,
  html body .announcement-bar .banner-close,
  html body .announcement-reopen {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* THEODOR-ANNBAR-COLOR-RESTORE-V1: original gradient backgrounds restored. Blur removal alone was the fix. */
}
/* END THEODOR-FIREFOX-MOBILE-PERF-V1 */


/* =========================================================
   THEODOR-DEEP-PERF-V1
   Mobile-only: kill gradientShift on navbar + announcement-bar
   (full-width repaint every frame on Gecko), remove stray
   will-change layer promotions. Button animations and the
   banner marquee itself stay - only the compositor overhead
   is removed.
   ========================================================= */
@media (max-width: 1160px) {
  html body .navbar::before,
  html body .announcement-bar::before {
    animation: none !important;
    -webkit-animation: none !important;
    background-position: 50% 50% !important;
  }
  html body .navbar {
    will-change: auto !important;
  }
  html body .announcement-bar.marquee-active .banner-text {
    will-change: auto !important;
  }
  html body .bottom-nav button:not(.bottom-nav-back)::after {
    will-change: auto !important;
  }
}
/* END THEODOR-DEEP-PERF-V1 */


/* =========================================================
   THEODOR-MOBILE-BLUR-KILL-V1
   Blunt mobile-only kill of backdrop-filter across the whole
   tree. Firefox Mobile CPU-falls-back on backdrop-filter.
   Elements retain their own background-color; the compositor
   re-sample cost is removed. Desktop unaffected.
   ========================================================= */
@media (max-width: 1160px) {
  html body, html body * {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* OLIVER-MOBILE-BLUR-KILL-FIX-V1: `html body *` is (0,0,2) and loses
     to class-bearing `!important` rules. Explicit selectors below beat
     every known offender in base.css + landing.css. */
  html body .bottom-nav,
  html body.light-mode .bottom-nav,
  html body .filter-sheet,
  html body.light-mode .filter-sheet,
  html body .category-sheet,
  html body.light-mode .category-sheet,
  html body .user-dropdown,
  html body.light-mode .user-dropdown,
  html body .mega-menu,
  html body.light-mode .mega-menu,
  html body .mega-menu-catalog,
  html body.light-mode .mega-menu-catalog,
  html body .mega-child-panel,
  html body.light-mode .mega-child-panel,
  html body .store-story-viewer,
  html body.light-mode .store-story-viewer,
  html body .mobile-nav,
  html body.light-mode .mobile-nav,
  html body .mobile-nav.open,
  html body.light-mode .mobile-nav.open {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html body .mobile-nav.open {
    will-change: auto !important;
  }
}
/* END THEODOR-MOBILE-BLUR-KILL-V1 */
/* END OLIVER-MOBILE-BLUR-KILL-FIX-V1 */


/* =========================================================
   THEODOR-MOBILE-BG-IMAGE-V4
   Mobile background: single tiled image per theme, with a
   matching gradient overlay that fades to the base color at
   the top and bottom edges of EACH tile. Because the overlay
   and image share the same tile height, the fade lines always
   land exactly at image boundaries — tiles cross-fade into
   each other with no visible seam.
   - Dark:  fade to #000
   - Light: fade to #fff
   Lite mode turns the whole thing off (flat base only).
   Desktop unaffected.
   ========================================================= */
/* THEODOR-BG-IMAGE-TOUCH-ONLY-V1: pure-touch devices only.
   Mouse-primary devices (Windows/macOS/Linux, any DPR) must NEVER
   receive the tiled background — resizing the window across the
   1160px line makes the browser re-rasterize a 1870px-tall tile
   every frame, OOM-killing the tab (Edge fully terminated).
   Mobile phones and touch tablets keep the image unchanged. */
@media (hover: none) and (pointer: coarse) {
  html body,
  html body:not(.reduced-visual-effects) {
    background-color: #000000 !important;
    background-image:
      linear-gradient(to bottom,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0) 8%,
        rgba(0,0,0,0) 92%,
        rgba(0,0,0,1) 100%),
      url("/static/images/bg-mobile-dark.3879dc898679.png") !important;
    background-size: var(--bg-tile-w, 100vw) calc(var(--bg-tile-w, 100vw) * 1870 / 841), var(--bg-tile-w, 100vw) auto !important;
    background-position: top center, top center !important;
    background-repeat: repeat-y, repeat-y !important;
    background-attachment: scroll, scroll !important;
  }
  html body.light-mode,
  html body.light-mode:not(.reduced-visual-effects) {
    background-color: #ffffff !important;
    background-image:
      linear-gradient(to bottom,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0) 8%,
        rgba(255,255,255,0) 92%,
        rgba(255,255,255,1) 100%),
      url("/static/images/bg-mobile-light.6fc04c708ea9.png") !important;
    background-size: var(--bg-tile-w, 100vw) calc(var(--bg-tile-w, 100vw) * 1870 / 841), var(--bg-tile-w, 100vw) auto !important;
    background-position: top center, top center !important;
    background-repeat: repeat-y, repeat-y !important;
    background-attachment: scroll, scroll !important;
  }
  /* Lite mode: no image, flat base. */
  html body.reduced-visual-effects,
  html body.light-mode.reduced-visual-effects {
    background-image: none !important;
  }
  /* Global orb layers off on mobile. */
  html body .bg-orbs,
  html body .bg-orbs::before,
  html body .bg-orbs::after,
  html body .bg-orb {
    display: none !important;
  }
}
/* END THEODOR-MOBILE-BG-IMAGE-V4 */


/* =========================================================
   THEODOR-MOBILE-CARD-OPAQUE-V1
   Cards sat on a flat dark body so 3-5% white alpha was fine.
   The tiled background image (THEODOR-MOBILE-BG-IMAGE-V4) now
   shows through cards and washes text out. Mobile-only: bump
   --surface / --surface-hover to near-opaque for dark mode.
   Light-mode --surface is already #ffffff. Desktop unaffected.
   Fixes .product-card, .category-card, home .stat-card,
   home .newsletter-card (all use var(--surface)).
   ========================================================= */
@media (max-width: 1160px) {
  body:not(.light-mode) {
    --surface: rgba(12, 16, 26, 0.88);
    --surface-hover: rgba(20, 26, 38, 0.92);
  }
}
/* END THEODOR-MOBILE-CARD-OPAQUE-V1 */


/* =========================================================
   THEODOR-NAVBAR-CARD-BODY-V1
   Match navbar surface to card body (--surface at mobile):
   near-black with 12% transparency. Remove all colorful
   decoration: ::before gradient, ::after cyan accent line,
   and the cyan border on .scrolled. Appended last with the
   strongest selector form so it wins over the 11 prior rules.
   ========================================================= */
html body:not(.light-mode) .navbar,
html body:not(.light-mode) .navbar.scrolled {
  background: rgba(12, 16, 26, 0.55) !important;
  background-color: rgba(12, 16, 26, 0.55) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}
html body.light-mode .navbar,
html body.light-mode .navbar.scrolled {
  background: rgba(255, 255, 255, 0.65) !important;
  background-color: rgba(255, 255, 255, 0.65) !important;
  background-image: none !important;
  border-color: rgba(15, 23, 42, 0.08) !important;
}
html body .navbar::before,
html body .navbar::after {
  background: none !important;
  background-image: none !important;
  content: none !important;
  display: none !important;
}
/* END THEODOR-NAVBAR-CARD-BODY-V1 */

/* =========================================================
   OLIVER-RED-LIGHT-ONLY-V1
   Activates rgba(var(--primary-rgb), X) rules in light mode.
   Dark mode keeps --primary-rgb undefined (as before).
   ========================================================= */
body.light-mode { --primary-rgb: 216, 27, 63; }
/* END OLIVER-RED-LIGHT-ONLY-V1 */

/* =========================================================
   OLIVER-RED-LIGHT-FIX-V3
   1) .bottom-nav active pill — base rule is unscoped and cyan,
      dark has an override but light fell back to base. Add a
      light-only override so the active pill is red in light mode.
   2) Support panel primary button — base shadows are cyan
      (rgba(0,240,255,X)) and light rule uses rgba(6,152,214,X).
      Add light-only overrides for base/hover/active/focus states.
   Dark untouched. Only body.light-mode selectors below.
   ========================================================= */

/* 1) Bottom-nav active pill - light mode */
body.light-mode .bottom-nav a.active::before,
body.light-mode .bottom-nav button.active::before {
    background: rgba(216, 27, 63, 0.14) !important;
}

/* 2) Support panel primary button - light mode (all states) */
body.light-mode .support-panel .btn.btn-primary,
body.light-mode .ai-support-body .btn.btn-primary {
    box-shadow:
        0 6px 20px rgba(216, 27, 63, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
body.light-mode .support-panel .btn.btn-primary:hover,
body.light-mode .ai-support-body .btn.btn-primary:hover {
    box-shadow:
        0 10px 28px rgba(216, 27, 63, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.40) !important;
}
body.light-mode .support-panel .btn.btn-primary:active,
body.light-mode .ai-support-body .btn.btn-primary:active {
    box-shadow:
        0 4px 14px rgba(216, 27, 63, 0.30),
        inset 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}
body.light-mode .support-panel .btn.btn-primary:focus-visible,
body.light-mode .ai-support-body .btn.btn-primary:focus-visible {
    box-shadow:
        0 0 0 3px rgba(216, 27, 63, 0.35),
        0 6px 20px rgba(216, 27, 63, 0.35) !important;
}
/* END OLIVER-RED-LIGHT-FIX-V3 */

/* =========================================================
   OLIVER-RED-LIGHT-FIX-V4
   Support panel AI blues -> red. Light-mode only.
   Dark support panel stays cyan.
   ========================================================= */
body.light-mode .ai-welcome {
    background: rgba(255, 45, 85, 0.06) !important;
}
body.light-mode .ai-user .ai-bubble {
    background: rgba(255, 45, 85, 0.12) !important;
}
body.light-mode .ai-product-card {
    border-color: rgba(255, 45, 85, 0.20) !important;
    background: rgba(255, 45, 85, 0.06) !important;
}
body.light-mode .ai-product-card:hover {
    background: rgba(255, 45, 85, 0.12) !important;
    border-color: #ff2d55 !important;
}
body.light-mode .ai-product-price {
    color: #ff2d55 !important;
}
body.light-mode .ai-chat-form input:focus {
    border-color: #ff2d55 !important;
    box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.10) !important;
}
body.light-mode .ai-chat-form button {
    background: linear-gradient(135deg, #ff2d55, #d81b3f) !important;
}
body.light-mode .ai-welcome i {
    color: #ff2d55 !important;
}
/* END OLIVER-RED-LIGHT-FIX-V4 */

/* =========================================================
   OLIVER-REMOVE-LAVENDER-V10
   Light-mode body was: 3 radial gradients (red/purple/pink)
   over a pale-blue #eef4fb base — blending to a lavender
   #E4E5F9 wash on every page. Flatten to white. Dark mode
   untouched.
   V11: color -> #fdf4f5 (warm light rose).
   V16: split into base color + desktop-only image-kill so the
        touch-only tiled background is not clobbered.
   ========================================================= */
/* Base: light rose color everywhere (light mode) */
body.light-mode,
html body.light-mode,
body.light-mode:not(.reduced-visual-effects),
html body.light-mode:not(.reduced-visual-effects) {
    background-color: #fdf4f5 !important;
}

/* Desktop / mouse only: kill the lavender gradient stack.
   Touch devices keep the tiled bg-mobile-light.png image
   from the earlier @media (hover: none) and (pointer: coarse) block. */
@media (hover: hover) and (pointer: fine) {
    body.light-mode,
    html body.light-mode,
    body.light-mode:not(.reduced-visual-effects),
    html body.light-mode:not(.reduced-visual-effects) {
        background: #fdf4f5 !important;
        background-image: none !important;
    }
}
/* END OLIVER-REMOVE-LAVENDER-V10 */
/* OLIVER-LIGHT-ROSE-BG-V11 */

/* =========================================================
   OLIVER-USER-MENU-RED-V12
   Light-mode only: user-menu-btn border/hover + user-dropdown
   border/shadow/hover were cyan or deep-sky. Red here.
   Dark mode untouched (keeps cyan).
   ========================================================= */
body.light-mode .user-menu-btn {
    border-color: rgba(216, 27, 63, 0.30) !important;
}
body.light-mode .user-menu-btn:hover {
    border-color: #d81b3f !important;
    background: rgba(216, 27, 63, 0.05) !important;
    color: #a80023 !important;
    box-shadow: 0 0 20px rgba(216, 27, 63, 0.20) !important;
}
body.light-mode .user-dropdown {
    border-color: rgba(216, 27, 63, 0.20) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.10), 0 0 30px rgba(216, 27, 63, 0.10) !important;
}
body.light-mode .user-dropdown a:hover,
body.light-mode .user-dropdown button:hover {
    background: rgba(216, 27, 63, 0.06) !important;
    color: #a80023 !important;
}
/* END OLIVER-USER-MENU-RED-V12 */


/* ================================================================
   OLIVER-SUPPORT-RED-LIGHT-V1
   Support tab active/hover: cyan -> red in light mode.
   ================================================================ */
body.light-mode .support-tab:hover {
    background: rgba(255,45,85,0.06);
    color: #0f172a;
}
body.light-mode .support-tab.active {
    background: rgba(255,45,85,0.12);
    border-color: rgba(255,45,85,0.30);
    color: #d81b3f;
}
/* END OLIVER-SUPPORT-RED-LIGHT-V1 */


/* =========================================================
   OLIVER-DESKTOP-NAVBAR-UI-V1
   Light-mode red for ورود / ثبتنام / icon-active, plus
   desktop UI polish. Dark mode stays cyan.
   ========================================================= */

/* Light-mode red: navbar shell border + shadow */
html body.light-mode .navbar,
html body.light-mode .navbar.scrolled {
    border-color: rgba(255, 45, 85, 0.16) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08),
                0 0 0 1px rgba(255, 45, 85, 0.06) !important;
}

/* Light-mode red: navbar gradient sheen */
html body.light-mode .navbar::before {
    background: linear-gradient(
        135deg,
        rgba(255, 45, 85, 0.10) 0%,
        rgba(216, 27, 63, 0.06) 25%,
        rgba(255, 85, 119, 0.05) 50%,
        rgba(255, 45, 85, 0.04) 75%,
        rgba(216, 27, 63, 0.06) 100%
    ) !important;
    opacity: 0.55 !important;
}

/* Light-mode red: navbar top accent line */
html body.light-mode .navbar::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        #d81b3f 20%,
        #ff5577 50%,
        #d81b3f 80%,
        transparent 100%
    ) !important;
}

/* Light-mode red: active icon button */
html body.light-mode .nav-icon-btn.active {
    background: rgba(255, 45, 85, 0.12) !important;
    color: #d81b3f !important;
    border-color: rgba(255, 45, 85, 0.30) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 45, 85, 0.16) !important;
}

/* Light-mode red: ورود (outline) */
html body.light-mode .btn-nav-outline {
    border-color: rgba(255, 45, 85, 0.34) !important;
    color: #0b1220 !important;
    background: transparent !important;
}
html body.light-mode .btn-nav-outline:hover {
    border-color: #ff2d55 !important;
    color: #a80023 !important;
    background: rgba(255, 45, 85, 0.07) !important;
    box-shadow: 0 0 20px rgba(255, 45, 85, 0.20) !important;
}

/* Light-mode red: ثبتنام (filled) */
html body.light-mode .btn-nav-filled {
    background: linear-gradient(135deg, #a80023, #ff2d55) !important;
    box-shadow: 0 6px 20px rgba(216, 27, 63, 0.35) !important;
}
html body.light-mode .btn-nav-filled:hover {
    box-shadow: 0 10px 30px rgba(216, 27, 63, 0.50) !important;
}

/* Desktop-only: separator between icon group and auth group */
@media (min-width: 1161px) {
    .nav-actions .btn-nav-outline {
        position: relative;
    }
    .nav-actions .btn-nav-outline::before {
        content: '';
        position: absolute;
        left: 100%;
        margin-left: 5px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 22px;
        border-radius: 1px;
        background: rgba(255, 255, 255, 0.10);
        pointer-events: none;
    }
    html body.light-mode .nav-actions .btn-nav-outline::before {
        background: rgba(15, 23, 42, 0.12);
    }
    /* Subtle hover lift for icon buttons */
    .nav-icon-btn:hover {
        transform: translateY(-1px);
    }
}
/* END OLIVER-DESKTOP-NAVBAR-UI-V1 */


/* =========================================================
   OLIVER-NAVBAR-OPACITY-V1
   0.55/0.65 was too see-through on both modes. Raise opacity
   so navbar reads as a solid surface. Still has blur for depth.
   ========================================================= */
html body:not(.light-mode) .navbar,
html body:not(.light-mode) .navbar.scrolled {
    background: rgba(12, 16, 26, 0.88) !important;
    background-color: rgba(12, 16, 26, 0.88) !important;
}
html body.light-mode .navbar,
html body.light-mode .navbar.scrolled {
    background: rgba(255, 255, 255, 0.94) !important;
    background-color: rgba(255, 255, 255, 0.94) !important;
}
/* END OLIVER-NAVBAR-OPACITY-V1 */


/* =========================================================
   OLIVER-CATEGORY-SHEET-REBUILD-V1
   Flush industrial sheet. Flat bg, hairline separators, no
   gradients, no rainbow, no glow, no motion. Brand-red accent.
   Scoped to .category-sheet only - mega-menu untouched.
   ========================================================= */

/* ---- Sheet container ---- */
html body .category-sheet,
html body .category-sheet.show {
    display: none;
    flex-direction: column !important;
    max-height: min(82vh, 720px) !important;
    background: #0d1117 !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-bottom: none !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.32) !important;
    padding: 0 0 max(20px, env(safe-area-inset-bottom, 20px)) !important;
    overflow: hidden !important;
    contain: layout style !important;
    overscroll-behavior: contain !important;
}
html body .category-sheet.show { display: flex !important; }

html body.light-mode .category-sheet,
html body.light-mode .category-sheet.show {
    background: #fafafa !important;
    background-image: none !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.06) !important;
}

/* ---- Handle ---- */
html body .category-sheet .sheet-handle {
    width: 36px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    opacity: 1 !important;
    margin: 12px auto 8px !important;
    flex-shrink: 0 !important;
    border: none !important;
}
html body.light-mode .category-sheet .sheet-handle {
    background: rgba(15, 23, 42, 0.14) !important;
}

/* ---- Header ---- */
html body .category-sheet h4 {
    display: block !important;
    margin: 0 20px 14px !important;
    padding: 0 44px 14px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    line-height: 1.4 !important;
}
html body .category-sheet h4 i {
    display: none !important;
}
html body.light-mode .category-sheet h4 {
    color: #0f172a !important;
    border-bottom-color: rgba(15, 23, 42, 0.06) !important;
}

/* ---- Close button ---- */
html body .category-sheet .close-sheet {
    position: absolute !important;
    top: 12px !important;
    inset-inline-end: 16px !important;
    inset-inline-start: auto !important;
    left: auto !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 20 !important;
    transition: background 0.12s ease, color 0.12s ease !important;
    transform: none !important;
}
html body .category-sheet .close-sheet:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html body.light-mode .category-sheet .close-sheet {
    background: transparent !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
    color: #64748b !important;
}
html body.light-mode .category-sheet .close-sheet:hover {
    background: rgba(15, 23, 42, 0.04) !important;
    color: #0f172a !important;
}

/* ---- Quick actions (kept per user request) ---- */
html body .category-sheet-quick-actions {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 20px 14px !important;
    padding: 0 !important;
}
html body .category-sheet-quick-actions a,
html body .category-sheet-quick-actions button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    padding: 8px 6px !important;
    border-radius: 10px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.62) !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease !important;
}
html body .category-sheet-quick-actions a:hover,
html body .category-sheet-quick-actions button:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: rgba(255, 255, 255, 0.95) !important;
}
html body.light-mode .category-sheet-quick-actions a,
html body.light-mode .category-sheet-quick-actions button {
    background: rgba(15, 23, 42, 0.02) !important;
    border-color: rgba(15, 23, 42, 0.06) !important;
    color: #475569 !important;
}
html body.light-mode .category-sheet-quick-actions a:hover,
html body.light-mode .category-sheet-quick-actions button:hover {
    background: rgba(15, 23, 42, 0.05) !important;
    border-color: rgba(15, 23, 42, 0.10) !important;
    color: #0f172a !important;
}

/* ---- Scrollable tree area ---- */
html body #categorySheetContent {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 0 20px 8px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
}
html body #categorySheetContent::-webkit-scrollbar { display: none !important; }

/* ---- Loading dots (restyled to brand red) ---- */
html body .category-sheet-loading span {
    background: var(--primary, #d81b3f) !important;
}


/* =========================================================
   OLIVER-SHEET-TREE-REBUILD-V1
   Flatten the tree INSIDE the sheet only. The shared
   .nav-tree-* rules in base.css feed the desktop mega-menu -
   they stay untouched. Everything below is scoped under
   html body .category-sheet.
   ========================================================= */

/* Neutralize the tone-1..4 rainbow INSIDE the sheet */
html body .category-sheet .nav-tree-item.nav-tree-tone-1,
html body .category-sheet .nav-tree-item.nav-tree-tone-2,
html body .category-sheet .nav-tree-item.nav-tree-tone-3,
html body .category-sheet .nav-tree-item.nav-tree-tone-4 {
    --tree-accent: rgba(255, 255, 255, 0.15) !important;
    --tree-accent-soft: rgba(255, 255, 255, 0.04) !important;
    --tree-link-color: rgba(255, 255, 255, 0.88) !important;
    --tree-link-hover: #ffffff !important;
}
html body.light-mode .category-sheet .nav-tree-item.nav-tree-tone-1,
html body.light-mode .category-sheet .nav-tree-item.nav-tree-tone-2,
html body.light-mode .category-sheet .nav-tree-item.nav-tree-tone-3,
html body.light-mode .category-sheet .nav-tree-item.nav-tree-tone-4 {
    --tree-accent: rgba(15, 23, 42, 0.12) !important;
    --tree-accent-soft: rgba(15, 23, 42, 0.03) !important;
    --tree-link-color: #0f172a !important;
    --tree-link-hover: #d81b3f !important;
}

/* Kill the 3px accent bar on the left of each root (sheet only) */
html body .category-sheet .nav-tree-item::before {
    display: none !important;
    content: none !important;
}

/* Item spacing */
html body .category-sheet .nav-tree-item {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
html body .category-sheet .nav-tree-list {
    padding: 0 !important;
    margin: 0 !important;
}

/* Row: flat, hairline bottom, no card, no motion, no glow */
html body .category-sheet .nav-tree-row {
    display: flex !important;
    align-items: center !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.1s ease !important;
}
html body .category-sheet .nav-tree-item:hover > .nav-tree-row {
    background: rgba(255, 255, 255, 0.025) !important;
    transform: none !important;
    box-shadow: none !important;
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}

/* Link */
html body .category-sheet .nav-tree-link {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 14px 4px !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: var(--tree-link-color, rgba(255, 255, 255, 0.88)) !important;
    text-decoration: none !important;
    transition: color 0.1s ease !important;
}
html body .category-sheet .nav-tree-link:hover {
    color: var(--tree-link-hover, #ffffff) !important;
}

/* Toggle chevron: plain, muted, no bg */
html body .category-sheet .nav-tree-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    margin-inline-end: 2px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.32) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.1s ease, color 0.1s ease, transform 0.18s ease !important;
}
html body .category-sheet .nav-tree-toggle:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
html body .category-sheet .nav-tree-item.open > .nav-tree-row .nav-tree-toggle {
    transform: rotate(-180deg) !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Children: single hairline indent rail */
html body .category-sheet .nav-tree-children {
    display: none !important;
    margin: 0 !important;
    padding-inline-start: 12px !important;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.06) !important;
    background: transparent !important;
}
html body .category-sheet .nav-tree-item.open > .nav-tree-children {
    display: block !important;
}
html body .category-sheet .nav-tree-children .nav-tree-row {
    min-height: 46px !important;
    border-bottom: none !important;
    background: transparent !important;
}
html body .category-sheet .nav-tree-children .nav-tree-row:hover {
    background: rgba(255, 255, 255, 0.02) !important;
}
html body .category-sheet .nav-tree-children .nav-tree-link {
    padding: 12px 4px !important;
    font-size: 0.84rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.62) !important;
}
html body .category-sheet .nav-tree-children .nav-tree-children {
    padding-inline-start: 14px !important;
}

/* ===== Light mode ===== */
html body.light-mode .category-sheet .nav-tree-row {
    border-bottom-color: rgba(15, 23, 42, 0.05) !important;
    background: transparent !important;
}
html body.light-mode .category-sheet .nav-tree-item:hover > .nav-tree-row {
    background: rgba(15, 23, 42, 0.02) !important;
    border-bottom-color: rgba(15, 23, 42, 0.05) !important;
}
html body.light-mode .category-sheet .nav-tree-link {
    color: var(--tree-link-color, #0f172a) !important;
}
html body.light-mode .category-sheet .nav-tree-toggle {
    color: rgba(15, 23, 42, 0.32) !important;
    background: transparent !important;
    border: none !important;
}
html body.light-mode .category-sheet .nav-tree-toggle:hover {
    background: rgba(15, 23, 42, 0.04) !important;
    color: #0f172a !important;
}
html body.light-mode .category-sheet .nav-tree-item.open > .nav-tree-row .nav-tree-toggle {
    background: transparent !important;
    color: #0f172a !important;
}
html body.light-mode .category-sheet .nav-tree-children {
    border-inline-start-color: rgba(15, 23, 42, 0.08) !important;
}
html body.light-mode .category-sheet .nav-tree-children .nav-tree-link {
    color: #475569 !important;
}


/* =========================================================
   OLIVER-CATEGORY-SHEET-HIERARCHY-V1
   Three visual tiers. Rounded accent highlight on open.
   Dark accent: cyan #00f0ff. Light accent: red #d81b3f.
   Scoped to .category-sheet only. Mega-menu untouched.
   ========================================================= */

/* ---- RESET the flat-row rules from the rebuild ---- */
html body .category-sheet .nav-tree-row {
    border: none !important;
    border-bottom: none !important;
    border-radius: 12px !important;
    position: relative !important;
}
html body .category-sheet .nav-tree-item {
    margin: 1px 0 !important;
}

/* ===== TIER 0 - PARENT (root) ===== */
html body .category-sheet > #categorySheetContent .nav-tree-list > .nav-tree-item > .nav-tree-row {
    min-height: 56px !important;
    border-radius: 12px !important;
    background: transparent !important;
    background-image: none !important;
    transition: background 0.12s ease !important;
}
html body .category-sheet > #categorySheetContent .nav-tree-list > .nav-tree-item > .nav-tree-row > .nav-tree-link {
    padding: 18px 14px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.95) !important;
    letter-spacing: -0.1px !important;
}

/* Parent hover - neutral */
html body .category-sheet > #categorySheetContent .nav-tree-list > .nav-tree-item:not(.open):hover > .nav-tree-row {
    background: rgba(255, 255, 255, 0.025) !important;
}

/* Parent OPEN - cyan accent */
html body .category-sheet > #categorySheetContent .nav-tree-list > .nav-tree-item.open > .nav-tree-row {
    background: rgba(0, 240, 255, 0.07) !important;
}
html body .category-sheet > #categorySheetContent .nav-tree-list > .nav-tree-item.open > .nav-tree-row > .nav-tree-link {
    color: #00f0ff !important;
}
html body .category-sheet > #categorySheetContent .nav-tree-list > .nav-tree-item.open > .nav-tree-row > .nav-tree-toggle {
    color: #00f0ff !important;
}
html body .category-sheet > #categorySheetContent .nav-tree-list > .nav-tree-item.open > .nav-tree-row::before {
    content: '' !important;
    position: absolute !important;
    inset-inline-start: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 24px !important;
    border-radius: 2px !important;
    background: #00f0ff !important;
    display: block !important;
}

/* ===== TIER 1 - CHILD ===== */
html body .category-sheet .nav-tree-children {
    display: none !important;
    margin: 4px 0 6px !important;
    margin-inline-start: 20px !important;
    padding-inline-start: 12px !important;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: transparent !important;
}
html body .category-sheet .nav-tree-item.open > .nav-tree-children {
    display: block !important;
}

html body .category-sheet .nav-tree-children > .nav-tree-list > .nav-tree-item > .nav-tree-row {
    min-height: 46px !important;
    border-radius: 10px !important;
    background: transparent !important;
    background-image: none !important;
    transition: background 0.12s ease !important;
}
html body .category-sheet .nav-tree-children > .nav-tree-list > .nav-tree-item > .nav-tree-row > .nav-tree-link {
    padding: 12px 12px !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.72) !important;
}
html body .category-sheet .nav-tree-children > .nav-tree-list > .nav-tree-item:not(.open):hover > .nav-tree-row {
    background: rgba(255, 255, 255, 0.03) !important;
}
html body .category-sheet .nav-tree-children > .nav-tree-list > .nav-tree-item.open > .nav-tree-row {
    background: rgba(0, 240, 255, 0.05) !important;
}
html body .category-sheet .nav-tree-children > .nav-tree-list > .nav-tree-item.open > .nav-tree-row > .nav-tree-link {
    color: #00f0ff !important;
}
html body .category-sheet .nav-tree-children > .nav-tree-list > .nav-tree-item.open > .nav-tree-row > .nav-tree-toggle {
    color: #00f0ff !important;
}

/* ===== TIER 2 - GRANDCHILD ===== */
html body .category-sheet .nav-tree-children .nav-tree-children {
    margin-inline-start: 12px !important;
    padding-inline-start: 14px !important;
    border-inline-start-color: rgba(255, 255, 255, 0.06) !important;
}
html body .category-sheet .nav-tree-children .nav-tree-children .nav-tree-row {
    min-height: 42px !important;
    border-radius: 8px !important;
}
html body .category-sheet .nav-tree-children .nav-tree-children .nav-tree-link {
    padding: 10px 12px !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.58) !important;
}
html body .category-sheet .nav-tree-children .nav-tree-children .nav-tree-item:hover > .nav-tree-row {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* ===== Toggle ===== */
html body .category-sheet .nav-tree-toggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin-inline-end: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.28) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: color 0.12s ease, transform 0.2s ease, background 0.12s ease !important;
    font-size: 0.75rem !important;
}
html body .category-sheet .nav-tree-toggle:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}
html body .category-sheet .nav-tree-item.open > .nav-tree-row > .nav-tree-toggle {
    transform: rotate(180deg) !important;
    background: transparent !important;
}

/* ===== Divider between quick-actions and tree ===== */
html body .category-sheet-quick-actions {
    margin-bottom: 18px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* =====================================================
   LIGHT MODE
   ===================================================== */
html body.light-mode .category-sheet > #categorySheetContent .nav-tree-list > .nav-tree-item > .nav-tree-row > .nav-tree-link {
    color: #0f172a !important;
}
html body.light-mode .category-sheet > #categorySheetContent .nav-tree-list > .nav-tree-item:not(.open):hover > .nav-tree-row {
    background: rgba(15, 23, 42, 0.03) !important;
}
html body.light-mode .category-sheet > #categorySheetContent .nav-tree-list > .nav-tree-item.open > .nav-tree-row {
    background: rgba(216, 27, 63, 0.07) !important;
}
html body.light-mode .category-sheet > #categorySheetContent .nav-tree-list > .nav-tree-item.open > .nav-tree-row > .nav-tree-link {
    color: #d81b3f !important;
}
html body.light-mode .category-sheet > #categorySheetContent .nav-tree-list > .nav-tree-item.open > .nav-tree-row > .nav-tree-toggle {
    color: #d81b3f !important;
}
html body.light-mode .category-sheet > #categorySheetContent .nav-tree-list > .nav-tree-item.open > .nav-tree-row::before {
    background: #d81b3f !important;
}
html body.light-mode .category-sheet .nav-tree-children {
    border-inline-start-color: rgba(15, 23, 42, 0.08) !important;
}
html body.light-mode .category-sheet .nav-tree-children > .nav-tree-list > .nav-tree-item > .nav-tree-row > .nav-tree-link {
    color: #475569 !important;
}
html body.light-mode .category-sheet .nav-tree-children > .nav-tree-list > .nav-tree-item:not(.open):hover > .nav-tree-row {
    background: rgba(15, 23, 42, 0.03) !important;
}
html body.light-mode .category-sheet .nav-tree-children > .nav-tree-list > .nav-tree-item.open > .nav-tree-row {
    background: rgba(216, 27, 63, 0.05) !important;
}
html body.light-mode .category-sheet .nav-tree-children > .nav-tree-list > .nav-tree-item.open > .nav-tree-row > .nav-tree-link {
    color: #d81b3f !important;
}
html body.light-mode .category-sheet .nav-tree-children > .nav-tree-list > .nav-tree-item.open > .nav-tree-row > .nav-tree-toggle {
    color: #d81b3f !important;
}
html body.light-mode .category-sheet .nav-tree-children .nav-tree-children .nav-tree-link {
    color: #64748b !important;
}
html body.light-mode .category-sheet .nav-tree-children .nav-tree-children .nav-tree-item:hover > .nav-tree-row {
    background: rgba(15, 23, 42, 0.02) !important;
}
html body.light-mode .category-sheet .nav-tree-toggle {
    color: rgba(15, 23, 42, 0.28) !important;
}
html body.light-mode .category-sheet .nav-tree-toggle:hover {
    background: rgba(15, 23, 42, 0.05) !important;
    color: #0f172a !important;
}
html body.light-mode .category-sheet-quick-actions {
    border-bottom-color: rgba(15, 23, 42, 0.05) !important;
}
/* =========================================================
   OLIVER-SHEET-SWIPE-CLOSE-V1
   Swipe down on the handle or h4 header to close the category sheet.
   Roller-shutter close: transform-based, backdrop fades during drag.
   No permanent will-change (Rule 9). No change to overflow-y scroll.
   ========================================================= */
.category-sheet {
    transform: translateY(0);
    transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: auto;
}
.category-sheet.dragging {
    transition: none;
}
.category-sheet .sheet-handle,
.category-sheet h4 {
    touch-action: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
.category-sheet.dragging .sheet-handle,
.category-sheet.dragging h4 {
    cursor: grabbing;
}
.sheet-backdrop {
    transition: opacity 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* =========================================================
   OLIVER-SHEET-SWIPE-ZONE-V2
   Widen the drag zone to the full top strip of the sheet:
   handle + h4 + quick-actions row. Touch-action: none on
   quick-actions so the browser doesn't grab the gesture.
   ========================================================= */
.category-sheet .category-sheet-quick-actions {
    touch-action: none;
}