/* ==========================================================================
   LUXE — Premium Phone Accessories Store
   Design System & Component Library
   Stack: Bootstrap 5 + Vanilla CSS (RTL-ready, Mobile-First)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Brand colors */
    --ink: #050505;          /* Primary black */
    --ivory: #F5F1E8;        /* Ivory white (text on dark) */
    --bolt: #FFD21F;         /* Electric yellow (CTA / accents) */
    --gold: #C9A227;         /* Soft gold (luxury details) */

    /* Derived neutrals */
    --ink-2: #0d0d0f;
    --ink-3: #16161a;
    --ink-4: #1f1f25;
    --line: rgba(245, 241, 232, .10);
    --line-strong: rgba(245, 241, 232, .18);
    --muted: rgba(245, 241, 232, .60);
    --muted-2: rgba(245, 241, 232, .42);

    /* Semantic */
    --success: #2ecc71;
    --danger: #ff5a5f;
    --info: #4dabf7;

    /* Surfaces */
    --surface: var(--ink-2);
    --surface-2: var(--ink-3);
    --glass: rgba(22, 22, 26, .55);

    /* Radii */
    --r-sm: 10px;
    --r: 16px;
    --r-lg: 22px;
    --r-xl: 28px;
    --r-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .25);
    --shadow: 0 12px 40px rgba(0, 0, 0, .35);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
    --glow: 0 8px 30px rgba(255, 210, 31, .28);

    /* Typography */
    --font: "Sora", "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Sora", "Cairo", sans-serif;

    /* Motion */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --t-fast: .18s var(--ease);
    --t: .35s var(--ease);
    --t-slow: .6s var(--ease);

    /* Layout */
    --container: 1280px;
    --header-h: 76px;
    --nav-bottom-h: 64px;
}

/* RTL Cairo display for Arabic */
[dir="rtl"] {
    --font: "Cairo", "Sora", system-ui, sans-serif;
    --font-display: "Cairo", "Sora", sans-serif;
}

/* --------------------------------------------------------------------------
   2. BASE / RESET
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    background: var(--ink);
    color: var(--ivory);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-bottom: 0;
}

a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--bolt); }

img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.12;
    margin: 0 0 .5em;
}

::selection { background: var(--bolt); color: var(--ink); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* --------------------------------------------------------------------------
   3. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.lx-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
.lx-section { padding-block: clamp(48px, 7vw, 96px); }
.lx-section-tight { padding-block: clamp(32px, 4vw, 56px); }

.lx-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold);
}
.lx-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); }

.lx-title { font-size: clamp(1.6rem, 3.4vw, 2.8rem); }
.lx-title .accent { color: var(--bolt); }

.lx-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; margin-bottom: 36px; flex-wrap: wrap;
}
.lx-head p { color: var(--muted); margin: 8px 0 0; max-width: 52ch; }

.text-muted-x { color: var(--muted) !important; }
.text-gold { color: var(--gold) !important; }
.text-bolt { color: var(--bolt) !important; }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn-lx {
    --btn-bg: var(--bolt); --btn-fg: var(--ink);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: var(--font); font-weight: 600; font-size: .95rem;
    padding: 14px 26px; border: 0; border-radius: var(--r-pill);
    background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
    transition: transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t);
    line-height: 1; white-space: nowrap;
}
.btn-lx:hover { transform: translateY(-2px); box-shadow: var(--glow); color: var(--btn-fg); }
.btn-lx:active { transform: translateY(0); }
.btn-lx i { font-size: 1.05em; }

.btn-lx-ghost {
    --btn-bg: transparent; --btn-fg: var(--ivory);
    border: 1px solid var(--line-strong);
}
.btn-lx-ghost:hover { background: var(--ivory); color: var(--ink); box-shadow: none; }

.btn-lx-gold { --btn-bg: var(--gold); --btn-fg: var(--ink); }
.btn-lx-dark { --btn-bg: var(--ink-3); --btn-fg: var(--ivory); border: 1px solid var(--line); }
.btn-lx-dark:hover { background: var(--ink-4); box-shadow: var(--shadow); }

.btn-lx-block { width: 100%; }
.btn-lx-lg { padding: 17px 34px; font-size: 1.02rem; }
.btn-lx-sm { padding: 10px 18px; font-size: .85rem; }

/* Icon button (circular) */
.btn-icon {
    width: 44px; height: 44px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: var(--ink-3); color: var(--ivory); border: 1px solid var(--line);
    cursor: pointer; transition: var(--t-fast); position: relative;
}
.btn-icon:hover { background: var(--bolt); color: var(--ink); border-color: var(--bolt); }

/* --------------------------------------------------------------------------
   5. BADGES & CHIPS
   -------------------------------------------------------------------------- */
.lx-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    padding: 5px 11px; border-radius: var(--r-pill);
    background: var(--bolt); color: var(--ink); text-transform: uppercase;
}
.lx-badge-sale { background: var(--danger); color: #fff; }
.lx-badge-new { background: var(--ivory); color: var(--ink); }
.lx-badge-soft { background: rgba(255,210,31,.14); color: var(--bolt); }
.lx-badge-out { background: var(--ink-4); color: var(--muted); }

.lx-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: var(--r-pill);
    background: var(--ink-3); border: 1px solid var(--line);
    font-size: .88rem; cursor: pointer; transition: var(--t-fast);
}
.lx-chip:hover, .lx-chip.is-active { background: var(--bolt); color: var(--ink); border-color: var(--bolt); }

/* --------------------------------------------------------------------------
   6. RATING
   -------------------------------------------------------------------------- */
.lx-rating { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); font-size: .85rem; }
.lx-rating .count { color: var(--muted); margin-inline-start: 6px; font-size: .8rem; }

/* --------------------------------------------------------------------------
   7. PRODUCT CARD
   -------------------------------------------------------------------------- */
.product-card {
    position: relative; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: hidden; transition: transform var(--t), box-shadow var(--t), border-color var(--t);
    display: flex; flex-direction: column; height: 100%;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }

.product-card__media {
    position: relative; aspect-ratio: 1/1; background: radial-gradient(120% 120% at 50% 0%, #1a1a1f 0%, #0c0c0e 100%);
    overflow: hidden;
    /* 3D tilt: JS writes an inline `transform: perspective(...) rotateX/Y(...)`
       on mousemove; this transition smooths the follow + the reset on leave. */
    transition: transform .16s ease-out;
    transform-origin: center;
}
.product-card__media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14%;
    transition: opacity var(--t), transform var(--t-slow);
}
/* Hover gallery: all product images stacked; hover zones switch the active one. */
.product-card__media-link { position: absolute; inset: 0; display: block; }
.pc-gimg { opacity: 0; z-index: 0; }
.pc-gimg.is-active { opacity: 1; }
.product-card:hover .pc-gimg.is-active { transform: scale(1.06); }
.pc-hover-zones { position: absolute; inset: 0; display: flex; z-index: 1; }
.pc-hover-zones span { flex: 1 1 0; height: 100%; }
.pc-dots {
    position: absolute; top: 14px; inset-inline: 0; z-index: 1;
    display: flex; gap: 5px; justify-content: center; pointer-events: none;
    opacity: 0; transition: opacity var(--t);
}
.product-card:hover .pc-dots { opacity: 1; }
.pc-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); transition: all var(--t); }
.pc-dots span.is-active { background: var(--bolt); width: 18px; border-radius: 3px; }

/* 3D tilt glare — a soft highlight that tracks the cursor across the image. */
.pc-glare {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    opacity: 0; transition: opacity var(--t);
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 42%);
    mix-blend-mode: soft-light;
}
.product-card__media:hover .pc-glare { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .product-card__media { transition: none; }
}

.product-card__badges { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }

.product-card__actions {
    position: absolute; top: 12px; inset-inline-end: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 2;
    opacity: 0; transform: translateX(12px); transition: var(--t);
}
[dir="rtl"] .product-card__actions { transform: translateX(-12px); }
.product-card:hover .product-card__actions { opacity: 1; transform: translateX(0); }
.product-card__actions .btn-icon { width: 40px; height: 40px; backdrop-filter: blur(6px); background: rgba(22,22,26,.7); }

.product-card__quickview {
    position: absolute; inset-inline: 12px; bottom: 12px; z-index: 2;
    opacity: 0; transform: translateY(12px); transition: var(--t);
}
.product-card:hover .product-card__quickview { opacity: 1; transform: translateY(0); }

.product-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card__brand { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.product-card__name { font-size: .98rem; font-weight: 600; line-height: 1.35; }
.product-card__name a:hover { color: var(--bolt); }
.product-card__colors { display: flex; gap: 6px; margin-top: 2px; }
.product-card__colors span { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--ink-4); }
.product-card__price { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 8px; }
.product-card__price .now { font-size: 1.2rem; font-weight: 700; font-family: var(--font-display); }
.product-card__price .was { font-size: .9rem; color: var(--muted-2); text-decoration: line-through; }

/* --------------------------------------------------------------------------
   8. CATEGORY CARD
   -------------------------------------------------------------------------- */
.category-card {
    position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5;
    background: var(--surface); border: 1px solid var(--line); display: block;
    transition: transform var(--t), box-shadow var(--t);
}
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.category-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); opacity: .85; }
.category-card:hover img { transform: scale(1.08); }
.category-card__overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(5,5,5,.92) 0%, rgba(5,5,5,.2) 55%, transparent 100%);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
}
.category-card__overlay h3 { font-size: 1.15rem; margin: 0; }
.category-card__overlay span { font-size: .82rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.category-card:hover .category-card__overlay span { color: var(--bolt); }

/* --------------------------------------------------------------------------
   9. GLASS / CARDS
   -------------------------------------------------------------------------- */
.lx-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.lx-glass { background: var(--glass); backdrop-filter: blur(18px); border: 1px solid var(--line-strong); border-radius: var(--r-lg); }

/* --------------------------------------------------------------------------
   10. FORMS
   -------------------------------------------------------------------------- */
.lx-field { margin-bottom: 18px; }
.lx-label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 8px; color: var(--ivory); }
.lx-input, .lx-select, .lx-textarea {
    width: 100%; padding: 14px 16px; background: var(--ink-2); border: 1px solid var(--line-strong);
    border-radius: var(--r-sm); color: var(--ivory); font-family: var(--font); font-size: .95rem;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.lx-input::placeholder, .lx-textarea::placeholder { color: var(--muted-2); }
.lx-input:focus, .lx-select:focus, .lx-textarea:focus {
    outline: none; border-color: var(--bolt); box-shadow: 0 0 0 4px rgba(255,210,31,.12);
}
.lx-input-group { position: relative; }
.lx-input-group i { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-start: 16px; color: var(--muted); }
.lx-input-group .lx-input { padding-inline-start: 46px; }

/* --------------------------------------------------------------------------
   11. HEADER
   -------------------------------------------------------------------------- */
.lx-topbar {
    background: var(--ink-2); border-bottom: 1px solid var(--line); font-size: .8rem; color: var(--muted);
}
.lx-topbar .lx-container { display: flex; align-items: center; justify-content: space-between; height: 38px; }
.lx-topbar a:hover { color: var(--bolt); }
.lx-topbar .marquee { display: flex; align-items: center; gap: 8px; color: var(--ivory); font-weight: 500; }
.lx-topbar .marquee i { color: var(--bolt); }

.lx-header {
    position: sticky; top: 0; z-index: 1000; background: rgba(5,5,5,.85);
    backdrop-filter: blur(18px); border-bottom: 1px solid var(--line);
    transition: box-shadow var(--t), background var(--t);
}
.lx-header.is-stuck { box-shadow: var(--shadow); background: rgba(5,5,5,.96); }
.lx-header .lx-container { display: flex; align-items: center; gap: 24px; height: var(--header-h); }

.lx-logo { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -.04em; display: flex; align-items: center; gap: 8px; }
.lx-logo .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bolt); box-shadow: var(--glow); }
.lx-logo:hover { color: var(--ivory); }

.lx-nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.lx-nav > li { position: relative; list-style: none; }
.lx-nav > li > a {
    display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: var(--r-pill);
    font-size: .92rem; font-weight: 500; color: var(--ivory); transition: var(--t-fast);
}
.lx-nav > li > a:hover { background: var(--ink-3); color: var(--bolt); }
.lx-nav .caret { font-size: .65rem; transition: transform var(--t-fast); }
.lx-nav > li:hover .caret { transform: rotate(180deg); }

.lx-header__tools { display: flex; align-items: center; gap: 8px; }

.lx-count {
    position: absolute; top: -4px; inset-inline-end: -4px; min-width: 19px; height: 19px; padding: 0 5px;
    background: var(--bolt); color: var(--ink); border-radius: 999px; font-size: .68rem; font-weight: 700;
    display: grid; place-items: center; border: 2px solid var(--ink);
}

/* Mega menu */
.mega {
    position: absolute; top: calc(100% + 14px); inset-inline-start: 50%; transform: translateX(-50%) translateY(10px);
    width: min(880px, 92vw); background: var(--ink-2); border: 1px solid var(--line-strong);
    border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 28px; z-index: 1001;
    opacity: 0; visibility: hidden; transition: var(--t);
}
/* RTL: the Shop item sits near the right edge, so centering the wide panel on it
   overflows off-screen. Anchor it to the item's inline-start (right) edge instead
   and let it open inward (leftward), with no centering transform. */
[dir="rtl"] .mega { inset-inline-start: 0; inset-inline-end: auto; transform: translateX(0) translateY(10px); }
.lx-nav > li:hover .mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
[dir="rtl"] .lx-nav > li:hover .mega { transform: translateX(0) translateY(0); }
.mega__grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: 24px; }
.mega__col h6 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.mega__col a { display: block; padding: 7px 0; font-size: .9rem; color: var(--muted); }
.mega__col a:hover { color: var(--bolt); padding-inline-start: 6px; }
.mega__promo { border-radius: var(--r); overflow: hidden; position: relative; min-height: 200px; background: linear-gradient(135deg, var(--gold), var(--bolt)); color: var(--ink); padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; }
.mega__promo strong { font-size: 1.3rem; font-family: var(--font-display); }

/* --------------------------------------------------------------------------
   12. SEARCH OVERLAY
   -------------------------------------------------------------------------- */
.lx-search-overlay {
    position: fixed; inset: 0; z-index: 2000; background: rgba(5,5,5,.7); backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden; transition: var(--t);
}
.lx-search-overlay.is-open { opacity: 1; visibility: visible; }
.lx-search-panel {
    background: var(--ink-2); border-bottom: 1px solid var(--line-strong); padding: 26px 0 34px;
    transform: translateY(-30px); transition: var(--t);
}
.lx-search-overlay.is-open .lx-search-panel { transform: translateY(0); }
.lx-search-panel .lx-input { font-size: 1.1rem; padding: 18px 20px 18px 54px; }
.lx-search-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lx-search-tags small { color: var(--muted); width: 100%; margin-bottom: 4px; letter-spacing: .1em; text-transform: uppercase; font-size: .72rem; }

/* --------------------------------------------------------------------------
   13. DRAWER (cart / filters / mobile menu)
   -------------------------------------------------------------------------- */
.lx-drawer {
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: min(420px, 92vw);
    background: var(--ink-2); border-inline-start: 1px solid var(--line-strong); z-index: 2100;
    transform: translateX(100%); transition: transform var(--t); display: flex; flex-direction: column;
}
[dir="rtl"] .lx-drawer { transform: translateX(-100%); }
.lx-drawer.lx-drawer--start { inset-inline-end: auto; inset-inline-start: 0; border-inline: none; border-inline-end: 1px solid var(--line-strong); transform: translateX(-100%); }
[dir="rtl"] .lx-drawer.lx-drawer--start { transform: translateX(100%); }
.lx-drawer.is-open { transform: translateX(0) !important; }
.lx-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.lx-drawer__head h4 { margin: 0; font-size: 1.1rem; }
.lx-drawer__body { flex: 1; overflow-y: auto; padding: 22px; }
.lx-drawer__foot { padding: 20px 22px; border-top: 1px solid var(--line); background: var(--ink-3); }
.lx-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); z-index: 2050; opacity: 0; visibility: hidden; transition: var(--t); }
.lx-backdrop.is-open { opacity: 1; visibility: visible; }

/* ---- Quick-view modal ---- */
.qv-modal {
    position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; visibility: hidden; transition: opacity var(--t); overflow-y: auto;
}
.qv-modal.is-open { opacity: 1; visibility: visible; }
.qv-modal__dialog {
    position: relative; width: 100%; max-width: 900px; margin: auto;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); transform: translateY(24px) scale(.98); transition: transform var(--t);
    max-height: calc(100vh - 40px); overflow: hidden;
}
.qv-modal.is-open .qv-modal__dialog { transform: none; }
.qv-modal__close { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3; background: rgba(22,22,26,.75); backdrop-filter: blur(6px); }
.qv-modal__body { max-height: calc(100vh - 40px); overflow-y: auto; }
.qv-modal__loading { min-height: 320px; display: grid; place-items: center; }
.lx-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--bolt); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Quick-view content layout */
.qv { display: grid; grid-template-columns: 1fr 1fr; }
.qv__media { padding: 24px; background: radial-gradient(120% 120% at 50% 0%, #1a1a1f 0%, #0c0c0e 100%); }
.qv__main { position: relative; aspect-ratio: 1/1; border-radius: var(--r-md); overflow: hidden; }
.qv__main img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.qv__badge { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2; }
.qv__thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.qv__thumb { width: 60px; height: 60px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line-strong); background: var(--ink-2); cursor: pointer; padding: 0; transition: border-color var(--t-fast); }
.qv__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.qv__thumb.is-active { border-color: var(--bolt); }
.qv__info { padding: 32px; display: flex; flex-direction: column; }
.qv__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 4px 0 8px; }
.qv__buy { margin-top: auto; }
.qv__actions { display: flex; gap: 12px; align-items: stretch; }
.qv__qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--ink-2); overflow: hidden; }
.qv__qty button { width: 40px; align-self: stretch; background: transparent; border: 0; color: var(--ivory); font-size: 1.1rem; cursor: pointer; }
.qv__qty button:hover { color: var(--bolt); }
.qv__qty input { width: 44px; text-align: center; background: transparent; border: 0; color: var(--ivory); font-weight: 600; -moz-appearance: textfield; }
.qv__qty input::-webkit-outer-spin-button, .qv__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (max-width: 720px) {
    .qv { grid-template-columns: 1fr; }
    .qv__info { padding: 24px; }
}

/* Mini cart line */
.mini-cart-item { display: grid; grid-template-columns: 70px 1fr auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mini-cart-item img { width: 70px; height: 70px; object-fit: contain; background: var(--ink-3); border-radius: var(--r-sm); padding: 6px; }
.mini-cart-item h6 { font-size: .9rem; margin: 0 0 4px; }
.mini-cart-item .price { color: var(--bolt); font-weight: 700; }

/* --------------------------------------------------------------------------
   14. HERO
   -------------------------------------------------------------------------- */
.lx-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 90px); }
.lx-hero__bg { position: absolute; inset: 0; z-index: 0; }
.lx-hero__bg::before, .lx-hero__bg::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5;
}
.lx-hero__bg::before { width: 460px; height: 460px; background: var(--gold); top: -120px; inset-inline-end: -80px; }
.lx-hero__bg::after { width: 380px; height: 380px; background: rgba(255,210,31,.5); bottom: -140px; inset-inline-start: -60px; opacity: .25; }
.lx-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.lx-hero h1 { font-size: clamp(2.2rem, 5.4vw, 4.2rem); }
.lx-hero h1 .accent { color: var(--bolt); }
.lx-hero p { color: var(--muted); font-size: 1.05rem; max-width: 46ch; margin: 18px 0 30px; }
.lx-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.lx-hero__stats { display: flex; gap: 34px; margin-top: 42px; }
.lx-hero__stats b { font-size: 1.7rem; font-family: var(--font-display); display: block; }
.lx-hero__stats span { font-size: .82rem; color: var(--muted); }
.lx-hero__visual { position: relative; aspect-ratio: 1/1; }
.lx-hero__visual img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }

/* Marquee strip */
.lx-strip { background: var(--bolt); color: var(--ink); padding: 4px 0; overflow: hidden; white-space: nowrap; }
.lx-strip__track { display: inline-flex; gap: 48px; animation: marquee 28s linear infinite; font-weight: 700; letter-spacing: .04em; font-size: small;}
.lx-strip__track span { display: inline-flex; align-items: center; gap: 12px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   15. BRAND SLIDER
   -------------------------------------------------------------------------- */
.brand-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.brand-pill {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 18px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    font-weight: 700; font-size: 1.05rem; color: var(--muted); min-width: 150px; transition: var(--t);
}
.brand-pill:hover { color: var(--ivory); border-color: var(--gold); transform: translateY(-4px); box-shadow: var(--shadow); }

/* --------------------------------------------------------------------------
   16. FLASH DEALS / COUNTDOWN
   -------------------------------------------------------------------------- */
.lx-flash { background: linear-gradient(135deg, var(--ink-3), var(--ink-2)); border: 1px solid var(--line-strong); border-radius: var(--r-xl); padding: clamp(24px,4vw,44px); }
.countdown { display: flex; gap: 10px; }
.countdown div { background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; text-align: center; min-width: 62px; }
.countdown b { font-size: 1.6rem; font-family: var(--font-display); display: block; color: var(--bolt); }
.countdown small { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

/* --------------------------------------------------------------------------
   17. FEATURES / WHY US
   -------------------------------------------------------------------------- */
.feature { text-align: center; padding: 28px 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); transition: var(--t); }
.feature:hover { border-color: var(--gold); transform: translateY(-5px); }
.feature .ico { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,210,31,.12); color: var(--bolt); font-size: 1.5rem; }
.feature h5 { font-size: 1.02rem; margin-bottom: 6px; }
.feature p { font-size: .86rem; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   18. TESTIMONIALS
   -------------------------------------------------------------------------- */
.testimonial { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; height: 100%; }
.testimonial p { font-size: .98rem; line-height: 1.7; }
.testimonial .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testimonial .who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial .who b { display: block; font-size: .92rem; }
.testimonial .who span { font-size: .78rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   19. NEWSLETTER
   -------------------------------------------------------------------------- */
.lx-newsletter { background: linear-gradient(135deg, var(--gold) 0%, var(--bolt) 100%); border-radius: var(--r-xl); padding: clamp(34px,5vw,64px); color: var(--ink); position: relative; overflow: hidden; }
.lx-newsletter h2 { color: var(--ink); font-size: clamp(1.6rem,3.5vw,2.6rem); }
.lx-newsletter .form { display: flex; gap: 10px; max-width: 480px; margin-top: 20px; }
.lx-newsletter .form input { flex: 1; padding: 15px 18px; border: 0; border-radius: var(--r-pill); background: rgba(5,5,5,.9); color: var(--ivory); }
.lx-newsletter .form input:focus { outline: 2px solid var(--ink); }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.lx-footer { background: var(--ink-2); border-top: 1px solid var(--line); padding-top: 64px; margin-top: 40px; }
.lx-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.lx-footer h6 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.lx-footer a { display: block; padding: 6px 0; color: var(--muted); font-size: .9rem; }
.lx-footer a:hover { color: var(--bolt); }
.lx-footer__brand p { color: var(--muted); font-size: .92rem; max-width: 34ch; margin: 14px 0 20px; }
.lx-social { display: flex; gap: 10px; }
.lx-footer__bottom { border-top: 1px solid var(--line); margin-top: 48px; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; }
.lx-pay { display: flex; gap: 8px; }
.lx-pay span { padding: 6px 10px; background: var(--ink-3); border: 1px solid var(--line); border-radius: 8px; font-size: .72rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   21. BREADCRUMB
   -------------------------------------------------------------------------- */
.lx-breadcrumb { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--muted); padding: 18px 0; flex-wrap: wrap; }
.lx-breadcrumb a:hover { color: var(--bolt); }
.lx-breadcrumb .sep { opacity: .4; font-size: .7rem; }
.lx-breadcrumb .current { color: var(--ivory); }

/* --------------------------------------------------------------------------
   22. PRODUCTS PAGE
   -------------------------------------------------------------------------- */
.shop-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.filter-sidebar { position: sticky; top: calc(var(--header-h) + 16px); }
.filter-group { border-bottom: 1px solid var(--line); padding: 20px 0; }
.filter-group:first-child { padding-top: 0; }
.filter-group h6 { font-size: .92rem; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.filter-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: .9rem; color: var(--muted); cursor: pointer; }
.filter-check:hover { color: var(--ivory); }
.filter-check input { accent-color: var(--bolt); width: 17px; height: 17px; }
.color-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.color-swatches span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink-4); cursor: pointer; transition: var(--t-fast); }
.color-swatches span:hover { transform: scale(1.15); border-color: var(--bolt); }

.shop-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.shop-toolbar .count { color: var(--muted); font-size: .9rem; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 22px; }

/* Paginated product listings (shop, phone cases) run four to a row, stepping
   down to 3 / 2 / 1 as the viewport narrows so a card never drops below a
   readable width. The auto-fill default above still applies to the home
   sections, which size themselves to their own containers.
   Doubled up as `.product-grid.product-grid--list` so these beat the generic
   `.product-grid` override further down the file (inside the 768px block),
   which would otherwise win on source order at equal specificity. */
.product-grid.product-grid--list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .product-grid.product-grid--list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .product-grid.product-grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .product-grid.product-grid--list { grid-template-columns: minmax(0, 1fr); } }

/* Pagination */
.lx-pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.lx-pagination a, .lx-pagination span { min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--line); font-size: .9rem; padding: 0 10px; }
.lx-pagination a { text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.lx-pagination a:hover { background: var(--ink-4); }
.lx-pagination .active { background: var(--bolt); color: var(--ink); border-color: var(--bolt); font-weight: 700; }
/* Disabled arrows stay in the row for a stable width, but read as inactive. */
.lx-pagination .disabled { opacity: .4; cursor: not-allowed; }
/* The gap marker is a label, not a target: no box, no fixed width. */
.lx-pagination .lx-pagination__gap { min-width: 0; width: auto; border: 0; background: none; color: var(--muted); padding: 0 2px; letter-spacing: .1em; }
@media (max-width: 560px) {
    .lx-pagination { gap: 6px; }
    .lx-pagination a, .lx-pagination span { min-width: 38px; height: 38px; font-size: .82rem; padding: 0 6px; }
}

/* --------------------------------------------------------------------------
   23. PRODUCT DETAIL
   -------------------------------------------------------------------------- */
.pdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* Let both columns shrink below their content's intrinsic width — otherwise a
   product with many images makes the thumbnail strip inflate the gallery
   column and crush the info column. */
.pdp-grid > * { min-width: 0; }
.pdp-gallery { position: sticky; top: calc(var(--header-h) + 16px); }
.pdp-main-img { aspect-ratio: 1/1; background: radial-gradient(120% 120% at 50% 0%, #1a1a1f, #0c0c0e); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; position: relative; }
.pdp-main-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
/* Horizontal scroll strip: any number of thumbnails stays on one swipeable row. */
.pdp-thumbs {
    display: flex; gap: 12px; margin-top: 14px;
    overflow-x: auto; padding-bottom: 6px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent;
}
.pdp-thumbs::-webkit-scrollbar { height: 6px; }
.pdp-thumbs::-webkit-scrollbar-track { background: transparent; }
.pdp-thumbs::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: var(--r-pill); }
.pdp-thumbs::-webkit-scrollbar-thumb:hover { background: var(--gold); }
.pdp-thumbs button { flex: 0 0 auto; scroll-snap-align: start; scroll-margin-inline: 2px; width: 78px; height: 78px; border-radius: var(--r-sm); background: var(--ink-3); border: 2px solid var(--line); overflow: hidden; cursor: pointer; padding: 6px; transition: var(--t-fast); }
.pdp-thumbs button.is-active, .pdp-thumbs button:hover { border-color: var(--bolt); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.pdp-info h1 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 10px; }
.pdp-price { display: flex; align-items: baseline; gap: 14px; margin: 18px 0; }
.pdp-price .now { font-size: 2rem; font-weight: 800; font-family: var(--font-display); }
.pdp-price .was { font-size: 1.1rem; color: var(--muted-2); text-decoration: line-through; }

.variant-group { margin: 22px 0; }
.variant-group label { font-size: .85rem; font-weight: 600; display: block; margin-bottom: 10px; }
.variant-opts { display: flex; flex-wrap: wrap; gap: 10px; }
/* Pill option buttons. Force text colour with !important + -webkit-text-fill-color
   because form-control buttons otherwise render with the UA's black text fill. */
.variant-group .variant-opt {
    padding: 11px 18px; border-radius: var(--r-sm);
    border: 1px solid var(--line-strong); background: var(--ink-2);
    cursor: pointer; font-size: .9rem; font-weight: 600;
    /* unselected but available — muted brand yellow, clearly readable on dark */
    color: rgba(255, 210, 31, .8) !important;
    -webkit-text-fill-color: rgba(255, 210, 31, .8);
    transition: var(--t-fast);
}
.variant-group .variant-opt:hover,
.variant-group .variant-opt.is-active {
    /* selected / hover — full brand yellow on a tinted, outlined chip */
    border-color: #FFD21F; background: rgba(255, 210, 31, .14);
    color: #FFD21F !important; -webkit-text-fill-color: #FFD21F;
}
/* Disabled / unavailable — never black; muted grey, clearly inactive. */
.variant-group .variant-opt:disabled,
.variant-group .variant-opt[disabled],
.variant-group .variant-opt.is-disabled {
    color: #8a8a8a !important; -webkit-text-fill-color: #8a8a8a;
    background: var(--ink-2); border-color: var(--line);
    opacity: .55; cursor: not-allowed; text-decoration: line-through;
}
/* Colour swatches carry no text — keep them circular regardless of the rules above. */
.variant-group .variant-color { color: transparent !important; -webkit-text-fill-color: transparent; }
.variant-color { width: 42px; height: 42px; border-radius: 50%; padding: 0; position: relative; }
.variant-color.is-active { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--bolt); }

/* Dropdown variant selector: keep option text readable on dark menus. */
.variant-select { color: var(--ivory); }
.variant-select option { color: var(--ivory); background: var(--ink-2); }

.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; }
.qty-stepper button { width: 46px; height: 48px; background: var(--ink-2); border: 0; color: var(--ivory); font-size: 1.2rem; cursor: pointer; transition: var(--t-fast); }
.qty-stepper button:hover { background: var(--ink-4); color: var(--bolt); }
.qty-stepper input { width: 50px; text-align: center; background: transparent; border: 0; color: var(--ivory); font-weight: 700; font-size: 1rem; }

.pdp-buy { display: flex; gap: 12px; margin: 24px 0; flex-wrap: wrap; }
.pdp-trust { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 24px; }
.pdp-trust div { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--muted); }
.pdp-trust i { color: var(--gold); font-size: 1.1rem; }

/* Tabs */
.lx-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 28px; overflow-x: auto; }
.lx-tabs button { padding: 14px 22px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-family: var(--font); font-weight: 600; font-size: .95rem; cursor: pointer; white-space: nowrap; transition: var(--t-fast); }
.lx-tabs button.is-active { color: var(--bolt); border-bottom-color: var(--bolt); }
.lx-tab-panel { display: none; }
.lx-tab-panel.is-active { display: block; animation: fadeIn .4s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: .92rem; }
.spec-table td:first-child { color: var(--muted); width: 36%; }

/* Sticky add to cart bar */
.sticky-atc { position: fixed; inset-inline: 0; bottom: 0; z-index: 900; background: rgba(5,5,5,.96); backdrop-filter: blur(16px); border-top: 1px solid var(--line-strong); padding: 12px 0; transform: translateY(110%); transition: transform var(--t); }
.sticky-atc.is-visible { transform: translateY(0); }
.sticky-atc .lx-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sticky-atc .info { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sticky-atc img { width: 50px; height: 50px; object-fit: contain; background: var(--ink-3); border-radius: var(--r-sm); padding: 4px; }
.sticky-atc h6 { margin: 0; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* --------------------------------------------------------------------------
   24. CART / CHECKOUT
   -------------------------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; }
.cart-item { display: grid; grid-template-columns: 110px 1fr auto; gap: 18px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 16px; }
.cart-item img { width: 110px; height: 110px; object-fit: contain; background: var(--ink-3); border-radius: var(--r-sm); padding: 10px; }
.cart-item h5 { font-size: 1rem; margin: 0 0 4px; }
.cart-item .meta { font-size: .82rem; color: var(--muted); }
.cart-item .remove { color: var(--muted); font-size: .82rem; cursor: pointer; }
.cart-item .remove:hover { color: var(--danger); }

.summary { position: sticky; top: calc(var(--header-h) + 16px); }
.summary-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: .92rem; color: var(--muted); }
.summary-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; font-size: 1.25rem; font-weight: 800; color: var(--ivory); font-family: var(--font-display); }
.coupon { display: flex; gap: 8px; margin: 16px 0; }

.checkout-grid { display: grid; grid-template-columns: 1fr 400px; gap: 36px; align-items: start; }
.checkout-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; margin-bottom: 18px; }
.checkout-step h4 { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.checkout-step h4 .num { width: 28px; height: 28px; border-radius: 50%; background: var(--bolt); color: var(--ink); display: grid; place-items: center; font-size: .85rem; }
.pay-method { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; margin-bottom: 10px; transition: var(--t-fast); }
.pay-method:hover, .pay-method.is-active { border-color: var(--bolt); background: rgba(255,210,31,.07); }
.pay-method input { accent-color: var(--bolt); }

/* Saved-address picker (checkout + profile) */
.addr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.addr-card { position: relative; display: block; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; transition: var(--t-fast); background: var(--ink-2); }
.addr-card:hover { border-color: var(--bolt); }
.addr-card.is-active { border-color: var(--bolt); background: rgba(255,210,31,.07); box-shadow: 0 0 0 1px var(--bolt) inset; }
.addr-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.addr-card__label { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.addr-card__body { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.addr-card--new { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--muted); border-style: dashed; min-height: 92px; }
.addr-card--new:hover { color: var(--bolt); }
.addr-card--new i { font-size: 1.3rem; }

/* --------------------------------------------------------------------------
   25. EMPTY / ERROR STATES
   -------------------------------------------------------------------------- */
.lx-empty { text-align: center; padding: clamp(40px, 8vw, 90px) 20px; max-width: 480px; margin: 0 auto; }
.lx-empty .ico { width: 110px; height: 110px; margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); font-size: 3rem; color: var(--gold); }
.lx-empty h2 { font-size: 1.7rem; }
.lx-empty p { color: var(--muted); margin-bottom: 26px; }
.lx-error-code { font-size: clamp(5rem, 18vw, 11rem); font-weight: 800; font-family: var(--font-display); line-height: 1; background: linear-gradient(135deg, var(--bolt), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --------------------------------------------------------------------------
   26. AUTH
   -------------------------------------------------------------------------- */
.auth-wrap { min-height: calc(100vh - var(--header-h)); display: grid; grid-template-columns: 1fr 1fr; }
.auth-aside { position: relative; background: linear-gradient(135deg, var(--ink-3), var(--ink)); overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 60px; }
.auth-aside::before { content: ""; position: absolute; width: 400px; height: 400px; background: var(--gold); border-radius: 50%; filter: blur(120px); opacity: .25; top: -100px; inset-inline-end: -100px; }
.auth-form { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 6vw, 80px); max-width: 520px; margin: 0 auto; width: 100%; }
.auth-form h1 { font-size: 2rem; }
.auth-social { display: flex; gap: 12px; }
.auth-social a { flex: 1; }
.auth-divider { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: .82rem; margin: 24px 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* --------------------------------------------------------------------------
   27. SKELETON LOADING
   -------------------------------------------------------------------------- */
.skeleton { background: linear-gradient(90deg, var(--ink-3) 25%, var(--ink-4) 50%, var(--ink-3) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* --------------------------------------------------------------------------
   28. FLOATING BUTTONS
   -------------------------------------------------------------------------- */
.lx-whatsapp { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 800; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; font-size: 1.6rem; box-shadow: 0 10px 30px rgba(37,211,102,.4); transition: var(--t); }
.lx-whatsapp:hover { transform: scale(1.08); color: #fff; }
.lx-totop { position: fixed; bottom: 92px; inset-inline-end: 24px; z-index: 800; width: 46px; height: 46px; border-radius: 50%; background: var(--ink-3); border: 1px solid var(--line-strong); color: var(--ivory); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: var(--t); cursor: pointer; }
.lx-totop.is-visible { opacity: 1; visibility: visible; }
.lx-totop:hover { background: var(--bolt); color: var(--ink); }

/* --------------------------------------------------------------------------
   29. MOBILE BOTTOM NAV
   -------------------------------------------------------------------------- */
.lx-bottomnav { display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 950; background: rgba(5,5,5,.96); backdrop-filter: blur(18px); border-top: 1px solid var(--line-strong); height: var(--nav-bottom-h); }
.lx-bottomnav ul { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
.lx-bottomnav li { flex: 1; }
.lx-bottomnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 100%; font-size: .66rem; color: var(--muted); position: relative; }
.lx-bottomnav a i { font-size: 1.2rem; }
.lx-bottomnav a.is-active { color: var(--bolt); }
.lx-bottomnav .lx-count { top: 6px; inset-inline-end: 22%; }

/* Toast */
.lx-toast-wrap { position: fixed; top: 90px; inset-inline-end: 24px; z-index: 3000; display: flex; flex-direction: column; gap: 10px; }
.lx-toast { background: var(--ink-3); border: 1px solid var(--line-strong); border-inline-start: 3px solid var(--bolt); border-radius: var(--r-sm); padding: 14px 18px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 12px; font-size: .9rem; min-width: 260px; animation: toastIn .4s var(--ease); }
.lx-toast i { color: var(--bolt); font-size: 1.2rem; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   30. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .lx-hero__grid { grid-template-columns: 1fr; gap: 30px; }
    .lx-hero__visual { max-width: 460px; margin: 0 auto; }
    .pdp-grid { grid-template-columns: 1fr; gap: 30px; }
    .pdp-gallery { position: static; }
    .checkout-grid { grid-template-columns: 1fr; }
    .cart-layout { grid-template-columns: 1fr; }
    .summary { position: static; }
    .mega__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .lx-nav, .lx-topbar { display: none; }
    .shop-layout { grid-template-columns: 1fr; }
    .filter-sidebar { display: none; }
    .lx-footer__grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
    .menu-toggle { display: inline-grid !important; }
}

@media (max-width: 768px) {
    body { padding-bottom: var(--nav-bottom-h); }
    .lx-bottomnav { display: block; }
    .lx-whatsapp { bottom: calc(var(--nav-bottom-h) + 16px); }
    .lx-totop { bottom: calc(var(--nav-bottom-h) + 76px); }
    .lx-hero__stats { gap: 22px; }
    .footer-tools-hide { display: none; }
    .pdp-trust { grid-template-columns: 1fr; }
    .pdp-thumbs button { width: 64px; height: 64px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .product-card__actions { opacity: 1; transform: none; }
    .product-card__quickview { display: none; }
    .sticky-atc .info h6 { max-width: 130px; }
}

@media (max-width: 560px) {
    .lx-footer__grid { grid-template-columns: 1fr; }
    .cart-item { grid-template-columns: 84px 1fr; }
    .cart-item .cart-item__end { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
    .lx-newsletter .form { flex-direction: column; }
    .countdown div { min-width: 54px; padding: 8px 10px; }
}

.menu-toggle { display: none; }

/* ---- Language switcher (topbar) ---- */
.lx-lang { display: inline-flex; align-items: center; gap: 4px; }
.lx-lang__opt { opacity: .7; font-weight: 600; }
.lx-lang__opt.is-active { opacity: 1; color: var(--bolt, #FFD21F); }
.lx-lang__sep { opacity: .35; }

/* ---- RTL adjustments ---- */
[dir="rtl"] .marquee i,
[dir="rtl"] .lx-topbar .fa-truck-fast,
[dir="rtl"] .lx-topbar .fa-globe { margin-left: 4px; margin-right: 0; }
[dir="rtl"] .caret { margin-right: 4px; margin-left: 0; }
[dir="rtl"] .mega__promo .fa-arrow-right,
[dir="rtl"] .btn-lx .fa-arrow-right { transform: scaleX(-1); }
[dir="rtl"] .lx-whatsapp { right: auto; left: 22px; }
[dir="rtl"] .lx-totop { right: auto; left: 22px; }

/* ---- RTL: flip directional chevrons/arrows ---- */
[dir="rtl"] .lx-breadcrumb .sep .fa-chevron-right,
[dir="rtl"] .lx-pagination .fa-chevron-left,
[dir="rtl"] .lx-pagination .fa-chevron-right,
[dir="rtl"] .btn-lx .fa-arrow-right,
[dir="rtl"] .btn-lx .fa-arrow-left,
[dir="rtl"] .lx-hero__cta .fa-arrow-right,
[dir="rtl"] .product-card .fa-arrow-right,
[dir="rtl"] .category-card .fa-arrow-right,
[dir="rtl"] .lx-head .fa-arrow-right,
[dir="rtl"] .cart-item .fa-arrow-left { transform: scaleX(-1); }

/* ---- Admin-uploaded site logo ---- */
.lx-logo__img { height: 70px; width: auto; max-width: 180px; object-fit: contain; display: block; }
/* .lx-logo__img { height: 34px; width: auto; max-width: 180px; object-fit: contain; display: block; } */
.lx-footer .lx-logo__img { height: 200px; }
/* .lx-footer .lx-logo__img { height: 38px; } */

/* ---- Shop AJAX loading state (dim + block while the fragment swaps) ---- */
#shop-ajax { transition: opacity .15s ease; }
#shop-ajax.is-shop-loading { opacity: .55; pointer-events: none; }

/* ---- Image skeleton loader (shimmer while images load) ----
   Progressive enhancement: the `.is-loading` class is added by JS only for
   images that haven't loaded yet, so with JS disabled images show normally.
   While loading, the wrapper shows an animated shimmer and the image is faded
   out; on load JS removes `.is-loading` and the image fades in. */
@keyframes lx-shimmer { 100% { transform: translateX(100%); } }
.lx-img-wrap.is-loading { position: relative; background: var(--ink-2); overflow: hidden; }
.lx-img-wrap.is-loading::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent);
    transform: translateX(-100%);
    animation: lx-shimmer 1.4s ease-in-out infinite;
}
.lx-img { transition: opacity .45s ease; }
.lx-img-wrap.is-loading .lx-img { opacity: 0; }

/* ---- Tom Select (searchable dropdowns) — dark premium theme ---- */
/* The wrapper inherits the .lx-select class (border/padding/bg); strip it so only
   the inner .ts-control draws a border — otherwise there are two stacked borders. */
.ts-wrapper.lx-select {
    width: 100%; padding: 0 !important; background: transparent !important;
    border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
.ts-control {
    background: var(--ink-2) !important; border: 1px solid var(--line-strong) !important;
    border-radius: var(--r-sm); color: var(--ivory) !important; min-height: 48px;
    padding: 10px 14px; font-size: .95rem; box-shadow: none !important;
}
.ts-control input, .ts-control input::placeholder { color: var(--ivory) !important; }
.ts-wrapper.single .ts-control, .ts-wrapper .ts-control .item { color: var(--ivory) !important; }
.ts-wrapper.focus .ts-control { border-color: var(--bolt) !important; }
.ts-dropdown {
    background: var(--ink-2); border: 1px solid var(--line-strong);
    border-radius: var(--r-sm); color: var(--ivory); box-shadow: var(--shadow-lg); margin-top: 4px; z-index: 1100;
}
.ts-dropdown .option { color: var(--ivory); padding: 10px 14px; }
.ts-dropdown .option.active, .ts-dropdown .option:hover { background: rgba(255, 210, 31, .14); color: #FFD21F; }
.ts-dropdown .option[aria-selected="true"], .ts-dropdown .active.selected { color: #FFD21F; }
.ts-dropdown .dropdown-input-wrap input,
.ts-dropdown-content .dropdown-input {
    background: var(--ink-3); color: var(--ivory); border: 1px solid var(--line);
}
.ts-dropdown .no-results { color: var(--muted); padding: 10px 14px; }
.ts-control:after { border-color: var(--ivory) transparent transparent transparent !important; }

/* ---- Tom Select: join control + dropdown into ONE box while open (fix double border) ---- */
.ts-dropdown {
    margin-top: -1px;                       /* overlap the control's bottom border → single seam */
    border-top-left-radius: 0; border-top-right-radius: 0;
}
.ts-wrapper.dropdown-active .ts-control {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.ts-wrapper.dropdown-active .ts-dropdown {
    border-color: var(--bolt);              /* match the focused control's accent */
    border-top-color: transparent;          /* the control's bottom border is the only seam */
}

/* Shop "Sort" control: fixed, compact width so the control + dropdown panel are
   wide enough for the longest label ("Price: Low to High") without clipping.
   The class is copied onto Tom Select's generated .ts-wrapper, so it overrides
   the default .ts-wrapper.lx-select { width:100% }. */
.ts-wrapper.lx-select--sort { width: 210px !important; }
.lx-select--sort { width: 210px; }