/* ============================================================
   VOLTLINE — Electronics Store (tech-store)
   Next-gen ScaanMe store theme · glass-dark spec-driven
   Graphite #0E1116 · cyan edge #38E1FF · slate panels · neon hairlines
   Space Grotesk display · Inter body · IBM Plex Sans Arabic
   Mobile-first · RTL-safe (logical properties) · reduced-motion aware
   ============================================================ */

:root {
    --vl-bg: #0E1116;
    --vl-bg-2: #12161D;
    --vl-bg-3: #161B23;
    --vl-panel: rgba(255, 255, 255, .04);
    --vl-panel-2: rgba(255, 255, 255, .07);
    --vl-line: rgba(255, 255, 255, .09);
    --vl-line-2: rgba(255, 255, 255, .16);
    --vl-hair: color-mix(in srgb, var(--vl-cyan) 22%, transparent);
    --vl-cyan: #38E1FF;
    --vl-cyan-soft: color-mix(in srgb, var(--vl-cyan) 12%, transparent);
    --vl-glow: color-mix(in srgb, var(--vl-cyan) 30%, transparent);
    --vl-txt: #EAF2F7;
    --vl-muted: #94A3B3;
    --vl-dim: #5D6B7A;
    --vl-ok: #3DF2B6;
    --vl-danger: #FF5470;
    --vl-r-lg: 18px;
    --vl-r-md: 13px;
    --vl-r-sm: 9px;
    --vl-font-d: 'Space Grotesk', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --vl-font-b: 'Inter', 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --vl-dock-h: 62px;
}

/* ---------- Base ---------- */
body.vl-body {
    background: var(--vl-bg);
    color: var(--vl-txt);
    font-family: var(--vl-font-b);
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
}

.vl-body h1, .vl-body h2, .vl-body h3, .vl-body h4 {
    font-family: var(--vl-font-d);
    color: var(--vl-txt);
}

.vl-body a { text-decoration: none; }
.vl-body ::selection { background: var(--vl-cyan); color: #06121a; }

/* Background system: dot-grid + one diagonal cyan beam */
body.vl-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: radial-gradient(rgba(148, 178, 199, .10) 1px, transparent 1.4px);
    background-size: 24px 24px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 55%, rgba(0,0,0,.7));
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35) 55%, rgba(0,0,0,.7));
}

body.vl-body::after {
    content: "";
    position: fixed;
    z-index: -1;
    inset-block-start: -25%;
    inset-inline-start: 38%;
    width: 220px;
    height: 150%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--vl-cyan) 07%, transparent) 28%, color-mix(in srgb, var(--vl-cyan) 14%, transparent) 50%, color-mix(in srgb, var(--vl-cyan) 06%, transparent) 72%, transparent 100%);
    transform: rotate(22deg);
    filter: blur(26px);
    animation: vl-beam 14s ease-in-out infinite alternate;
}

@keyframes vl-beam {
    from { opacity: .55; }
    to   { opacity: 1; }
}

/* ---------- Layout shell ---------- */
.vl-page {
    max-width: 1140px;
    margin-inline: auto;
    padding-inline: 16px;
    padding-block-end: calc(var(--vl-dock-h) + 34px);
}

.vl-sec { padding-block: 26px; }

.vl-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--vl-font-d);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--vl-cyan);
}

.vl-kicker::before {
    content: "";
    width: 20px;
    height: 1px;
    background: linear-gradient(90deg, var(--vl-cyan), transparent);
}

.vl-sec-head { margin-block-end: 16px; }

.vl-sec-title {
    font-size: clamp(1.25rem, 4.4vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.15;
    margin: 6px 0 0;
}

.vl-sec-sub { color: var(--vl-muted); font-size: 13.5px; margin: 6px 0 0; max-width: 56ch; }

.vl-hairline {
    height: 1px;
    border: 0;
    margin-block: 8px;
    background: linear-gradient(90deg, transparent, var(--vl-hair), transparent);
}

/* ---------- Preloader ---------- */
.vl-body .preloader-wrapper {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--vl-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vl-loader {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--vl-line-2);
    border-block-start-color: var(--vl-cyan);
    animation: vl-spin 0.9s linear infinite;
}

@keyframes vl-spin { to { transform: rotate(360deg); } }

/* ---------- Top bar ---------- */
.vl-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 1030;
    margin-inline: -16px;
    padding-inline: 16px;
    background: rgba(14, 17, 22, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-block-end: 1px solid var(--vl-line);
}

.vl-topbar::after {
    content: "";
    display: block;
    height: 1px;
    margin-block-start: -1px;
    background: linear-gradient(90deg, transparent 8%, var(--vl-hair) 50%, transparent 92%);
}

.vl-topbar-in {
    max-width: 1108px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 10px;
}

.vl-logo { display: flex; align-items: center; gap: 10px; min-width: 0; }

.vl-logo img {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    object-fit: cover;
    border: 1px solid var(--vl-line-2);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vl-cyan) 14%, transparent), 0 0 14px color-mix(in srgb, var(--vl-cyan) 14%, transparent);
}

.vl-logo-name {
    font-family: var(--vl-font-d);
    font-weight: 700;
    font-size: 15px;
    color: var(--vl-txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 42vw;
}

.vl-topbar-actions { display: flex; align-items: center; gap: 10px; }

.vl-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    font-family: var(--vl-font-d);
    font-weight: 600;
    font-size: 13px;
    color: #06121a;
    background: var(--vl-cyan);
    box-shadow: 0 0 16px var(--vl-glow);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.vl-cart-btn:hover { transform: translateY(-1px); box-shadow: 0 0 24px var(--vl-glow); color: #06121a; }
.vl-cart-btn i { font-size: 17px; line-height: 1; }

.vl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding-inline: 5px;
    border-radius: 999px;
    background: #0E1116;
    color: var(--vl-cyan);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* ---------- Alerts (session + float) ---------- */
.vl-note {
    border: 1px solid var(--vl-line);
    border-inline-start: 2px solid var(--vl-cyan);
    background: var(--vl-panel);
    color: var(--vl-txt);
    border-radius: var(--vl-r-md);
    padding: 12px 16px;
    font-size: 14px;
    margin-block: 14px;
}

.vl-note.ok { border-inline-start-color: var(--vl-ok); }
.vl-note.bad { border-inline-start-color: var(--vl-danger); }

/* ---------- Hero ---------- */
.vl-hero {
    display: grid;
    gap: 18px;
    padding-block: 26px 8px;
}

.vl-hero-copy { text-align: start; }

.vl-h1 {
    font-size: clamp(1.6rem, 6.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 10px 0 0;
}

.vl-hero-sub { color: var(--vl-muted); font-size: 14.5px; margin: 10px 0 0; max-width: 50ch; }

.vl-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 18px; }

/* Glow product spotlight (cover media) */
.vl-hero-stage { position: relative; }

.vl-hero-stage::before {
    content: "";
    position: absolute;
    inset: -8% -4%;
    z-index: 0;
    background: radial-gradient(55% 60% at 50% 45%, var(--vl-glow), transparent 70%);
    filter: blur(12px);
    pointer-events: none;
    animation: vl-pulse 5.5s ease-in-out infinite alternate;
}

@keyframes vl-pulse {
    from { opacity: .5; }
    to   { opacity: .95; }
}

.vl-hero-media {
    position: relative;
    z-index: 1;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 12px;
    border-radius: var(--vl-r-lg);
}

.vl-hero-media::-webkit-scrollbar { display: none; }

.vl-hero-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    border-radius: var(--vl-r-lg);
    overflow: hidden;
    border: 1px solid var(--vl-line-2);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vl-cyan) 12%, transparent), 0 14px 40px rgba(0, 0, 0, .45);
    aspect-ratio: 16 / 9;
    background: var(--vl-bg-2);
}

.vl-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Buttons ---------- */
.vl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--vl-font-d);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

.vl-btn:active { transform: scale(.97); }

.vl-btn-primary { background: var(--vl-cyan); color: #06121a !important; box-shadow: 0 0 18px var(--vl-glow); }
.vl-btn-primary:hover { box-shadow: 0 0 28px var(--vl-glow); transform: translateY(-1px); }

.vl-btn-ghost { background: var(--vl-panel); color: var(--vl-txt) !important; border-color: var(--vl-line-2); }
.vl-btn-ghost:hover { border-color: var(--vl-hair); background: var(--vl-panel-2); }

.vl-btn-volt { background: #103A33; color: var(--vl-ok) !important; border-color: rgba(61, 242, 182, .35); }
.vl-btn-volt:hover { background: #14463d; box-shadow: 0 0 18px rgba(61, 242, 182, .22); }

.vl-btn-dark { background: var(--vl-bg-3); color: var(--vl-txt) !important; border-color: var(--vl-line); }

.vl-btn-block { width: 100%; }

/* ---------- Trust strip ---------- */
.vl-trust {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 10px;
    padding-block: 14px 4px;
    justify-content: safe center;
}

.vl-trust::-webkit-scrollbar { display: none; }

.vl-trust-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--vl-line);
    background: var(--vl-panel);
    color: var(--vl-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

.vl-trust-chip i { color: var(--vl-cyan); font-size: 16px; }

/* ---------- Category icon rail (centered chips) ---------- */
.vl-cat-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-block: 6px 14px;
    justify-content: safe center;
}

.vl-cat-rail::-webkit-scrollbar { display: none; }

.vl-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px 7px 8px;
    padding-inline: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--vl-line);
    background: var(--vl-panel);
    color: var(--vl-txt);
    font-family: var(--vl-font-d);
    font-size: 13px;
    font-weight: 500;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.vl-chip:hover { border-color: var(--vl-hair); color: var(--vl-txt); }

.vl-chip-ico {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid var(--vl-line-2);
    box-shadow: 0 0 10px var(--vl-cyan-soft), inset 0 0 8px color-mix(in srgb, var(--vl-cyan) 08%, transparent);
    background: var(--vl-bg-2);
}

.vl-chip-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vl-chip-name { max-width: 34vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.vl-chip.active {
    border-color: var(--vl-cyan);
    background: var(--vl-cyan-soft);
    box-shadow: 0 0 14px var(--vl-cyan-soft);
    color: var(--vl-cyan);
}

/* ---------- Toolbar (search / price / sort) ---------- */
.vl-toolbar {
    display: grid;
    gap: 10px;
    border: 1px solid var(--vl-line);
    background: var(--vl-panel);
    border-radius: var(--vl-r-lg);
    padding: 12px;
    margin-block-end: 18px;
}

.vl-toolbar .vl-tool-row { display: flex; gap: 8px; align-items: center; }
.vl-toolbar .vl-tool-row > * { min-width: 0; }
.vl-toolbar .grow { flex: 1 1 auto; }

.vl-body .form-control,
.vl-body .form-select,
.vl-body textarea.form-control {
    background-color: var(--vl-bg-2);
    border: 1px solid var(--vl-line-2);
    color: var(--vl-txt);
    border-radius: var(--vl-r-sm);
    font-family: var(--vl-font-b);
    /* Comfortable inner padding so text never crowds the field edge */
    padding-block: 10px;
    padding-inline: 14px;
}

.vl-body .form-select { padding-inline-end: 38px; }

.vl-body .form-control::placeholder { color: var(--vl-dim); }

.vl-body .form-control:focus,
.vl-body .form-select:focus {
    background-color: var(--vl-bg-2);
    color: var(--vl-txt);
    border-color: var(--vl-cyan);
    box-shadow: 0 0 0 2px var(--vl-cyan-soft);
}

.vl-body .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2338E1FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E");
}

/* RTL: move the select chevron to the leading (left) edge and pad that side */
[dir="rtl"] .form-select {
    background-position: left 12px center;
    padding-inline-end: 14px;
    padding-inline-start: 38px;
}

.vl-body .form-check-input { background-color: var(--vl-bg-2); border-color: var(--vl-line-2); }
.vl-body .form-check-input:checked { background-color: var(--vl-cyan); border-color: var(--vl-cyan); }
.vl-body .form-label, .vl-body .form-check-label { color: var(--vl-txt); }

/* ---------- Product rails + grid ---------- */
.vl-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block: 4px 16px;
    margin-inline: -16px;
    padding-inline: 16px;
}

.vl-rail::-webkit-scrollbar { display: none; }

.vl-rail > .vl-card {
    flex: 0 0 72%;
    max-width: 290px;
    scroll-snap-align: start;
}

.vl-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* ---------- Product card ---------- */
.vl-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--vl-line);
    background: linear-gradient(180deg, var(--vl-panel-2), var(--vl-panel));
    border-radius: var(--vl-r-lg);
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.vl-card:hover {
    border-color: var(--vl-hair);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 18px var(--vl-cyan-soft);
}

.vl-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--vl-bg-2);
    overflow: hidden;
    display: block;
}

.vl-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity .3s ease, transform .35s ease;
}

.vl-card-media .vl-img-alt { opacity: 0; }
.vl-card:hover .vl-img-alt { opacity: 1; }
.vl-card:hover .vl-img-main { transform: scale(1.04); }

.vl-rank {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    z-index: 2;
    font-family: var(--vl-font-d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--vl-cyan);
    background: rgba(14, 17, 22, .72);
    border: 1px solid var(--vl-hair);
    border-radius: 7px;
    padding: 3px 8px;
    backdrop-filter: blur(6px);
}

/* Holo tag badge */
.vl-holo {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    font-family: var(--vl-font-d);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #07131a;
    padding: 4px 10px;
    border-radius: 7px;
    background: linear-gradient(110deg, var(--vl-cyan) 0%, color-mix(in srgb, var(--vl-cyan), #fff 35%) 28%, color-mix(in srgb, var(--vl-cyan), #fff 60%) 50%, color-mix(in srgb, var(--vl-cyan), #fff 35%) 72%, var(--vl-cyan) 100%);
    background-size: 220% 100%;
    box-shadow: 0 0 14px var(--vl-glow);
    animation: vl-holo 4.5s linear infinite;
}

@keyframes vl-holo {
    from { background-position: 0% 0; }
    to   { background-position: 220% 0; }
}

.vl-card-body { display: flex; flex-direction: column; gap: 7px; padding: 14px; flex: 1 1 auto; }

.vl-card-name {
    font-size: 14.5px;
    font-weight: 600;
    margin: 0;
    color: var(--vl-txt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vl-card-sub {
    color: var(--vl-muted);
    font-size: 12px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Spec chips (from short description split by '·') */
.vl-specs { display: flex; flex-wrap: wrap; gap: 5px; }

.vl-spec {
    font-family: var(--vl-font-d);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--vl-muted);
    border: 1px solid var(--vl-line);
    background: color-mix(in srgb, var(--vl-cyan) 05%, transparent);
    border-radius: 6px;
    padding: 2.5px 7px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Comparison-feel price block */
.vl-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-block-start: auto;
    border-block-start: 1px dashed var(--vl-line);
    padding-block-start: 9px;
}

.vl-price { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.vl-price-now {
    font-family: var(--vl-font-d);
    font-size: 16.5px;
    font-weight: 700;
    color: var(--vl-cyan);
    line-height: 1.15;
}

.vl-price-was { color: var(--vl-dim); font-size: 12px; }
.vl-price-was del { text-decoration-color: var(--vl-danger); }

.vl-save {
    display: inline-block;
    font-family: var(--vl-font-d);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--vl-ok);
    border: 1px solid rgba(61, 242, 182, .35);
    border-radius: 6px;
    padding: 2px 7px;
    margin-inline-start: 6px;
    vertical-align: 2px;
}

/* RTL: prices, struck regular price and the "-NN%" discount carry
   LTR numerals / currency symbol / minus sign — isolate them so the
   sign stays glued to the number ("-20%", not "20%-") and the symbol
   keeps its side. The blocks themselves still flow with the RTL layout. */
[dir="rtl"] .vl-price-now,
[dir="rtl"] .vl-price-was,
[dir="rtl"] .vl-save,
[dir="rtl"] .vl-total-num,
[dir="rtl"] .vl-cart-price {
    direction: ltr;
    unicode-bidi: isolate;
}
[dir="rtl"] .vl-price-was { text-align: start; }

.vl-add {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--vl-cyan);
    color: #06121a;
    font-size: 19px;
    cursor: pointer;
    box-shadow: 0 0 12px var(--vl-glow);
    transition: transform .15s ease, box-shadow .15s ease;
}

.vl-add:hover { transform: translateY(-1px) scale(1.04); color: #06121a; box-shadow: 0 0 20px var(--vl-glow); }
.vl-add:active { transform: scale(.94); }

.vl-oos {
    font-family: var(--vl-font-d);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--vl-danger);
    border: 1px solid rgba(255, 84, 112, .35);
    border-radius: 7px;
    padding: 5px 9px;
    white-space: nowrap;
}

.vl-stock-ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--vl-font-d);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--vl-ok);
}

.vl-stock-ok::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vl-ok);
    box-shadow: 0 0 8px rgba(61, 242, 182, .8);
}

/* ---------- Empty states (pure CSS art) ---------- */
.vl-empty { text-align: center; padding-block: 44px; }

.vl-empty-art {
    position: relative;
    width: 86px;
    height: 86px;
    margin-inline: auto;
    margin-block-end: 18px;
    border: 1px dashed var(--vl-line-2);
    border-radius: 20px;
    background:
        linear-gradient(var(--vl-hair), var(--vl-hair)) center / 54% 1px no-repeat,
        linear-gradient(var(--vl-hair), var(--vl-hair)) center / 1px 54% no-repeat,
        var(--vl-panel);
}

.vl-empty-art::after {
    content: "";
    position: absolute;
    inset-block-start: -7px;
    inset-inline-end: -7px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--vl-hair);
    background: var(--vl-bg-2);
    box-shadow: 0 0 12px var(--vl-cyan-soft);
}

.vl-empty h3 { font-size: 17px; margin: 0 0 6px; }
.vl-empty p { color: var(--vl-muted); font-size: 13.5px; margin: 0 0 16px; }

/* ---------- Pagination ---------- */
.vl-body .pagination { gap: 5px; }

.vl-body .pagination .page-link {
    background: var(--vl-panel);
    border: 1px solid var(--vl-line);
    color: var(--vl-muted);
    border-radius: 9px;
    min-width: 34px;
    text-align: center;
}

.vl-body .pagination .page-item.active .page-link {
    background: var(--vl-cyan);
    border-color: var(--vl-cyan);
    color: #06121a;
    box-shadow: 0 0 12px var(--vl-glow);
}

.vl-body .pagination .page-item.disabled .page-link { color: var(--vl-dim); background: transparent; }

/* ---------- Single product ---------- */
.vl-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vl-muted);
    font-size: 13px;
    margin-block: 16px 6px;
}

.vl-back:hover { color: var(--vl-cyan); }

.vl-pd { display: grid; gap: 22px; padding-block: 10px 26px; }

.vl-gallery-main {
    position: relative;
    display: block;
    border-radius: var(--vl-r-lg);
    overflow: hidden;
    border: 1px solid var(--vl-line-2);
    aspect-ratio: 4 / 3;
    background: var(--vl-bg-2);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vl-cyan) 10%, transparent), 0 16px 44px rgba(0, 0, 0, .45);
}

.vl-gallery-main::before {
    content: "";
    position: absolute;
    inset: auto -10% -42% -10%;
    height: 70%;
    background: radial-gradient(50% 55% at 50% 40%, var(--vl-glow), transparent 72%);
    filter: blur(14px);
    z-index: 0;
    pointer-events: none;
}

.vl-gallery-main img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }

.vl-thumbs {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-block: 11px 4px;
}

.vl-thumbs::-webkit-scrollbar { display: none; }

.vl-thumb {
    flex: 0 0 76px;
    scroll-snap-align: start;
    border-radius: var(--vl-r-sm);
    overflow: hidden;
    border: 1px solid var(--vl-line);
    aspect-ratio: 1 / 1;
    background: var(--vl-bg-2);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.vl-thumb:hover { border-color: var(--vl-cyan); box-shadow: 0 0 12px var(--vl-cyan-soft); }
.vl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vl-pd-name { font-size: clamp(1.35rem, 5vw, 1.9rem); font-weight: 700; letter-spacing: -.015em; margin: 8px 0; line-height: 1.18; }

.vl-pd-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-block: 8px; }

.vl-pd-badges .vl-holo { position: static; }

/* Spec sheet price panel */
.vl-price-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--vl-line);
    border-inline-start: 2px solid var(--vl-cyan);
    background: var(--vl-panel);
    border-radius: var(--vl-r-md);
    padding: 13px 16px;
    margin-block: 14px;
}

.vl-price-panel .vl-price-now { font-size: 24px; }
.vl-price-panel .vl-price-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--vl-dim); font-family: var(--vl-font-d); }

.vl-pd-actions { display: flex; flex-direction: column; gap: 10px; margin-block: 14px; }

.vl-prose { color: var(--vl-muted); font-size: 14.5px; line-height: 1.75; }
.vl-prose img { max-width: 100%; height: auto; border-radius: var(--vl-r-md); }
.vl-prose h1, .vl-prose h2, .vl-prose h3, .vl-prose h4 { color: var(--vl-txt); }
.vl-prose a { color: var(--vl-cyan); }
.vl-prose table { color: var(--vl-muted); }

/* Share include re-skin (dark) */
.vl-body .product-share-card .share-title { color: var(--vl-txt); font-family: var(--vl-font-d); }
.vl-body .product-share-card .share-icon { background: var(--vl-panel-2); border-color: var(--vl-line-2); }
.vl-body .product-share-card .share-icon.x { color: #eaf2f7; }
.vl-body .product-share-card .share-icon.email { color: #aab8c5; }
.vl-body .product-share-card .share-icon:hover { background: var(--vl-bg-3); box-shadow: 0 0 14px var(--vl-cyan-soft); }

/* ---------- Categories page editorial tiles ---------- */
.vl-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.vl-cat-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--vl-line);
    background: linear-gradient(165deg, var(--vl-panel-2), var(--vl-panel));
    border-radius: var(--vl-r-lg);
    padding: 14px;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.vl-cat-tile::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vl-hair), transparent);
}

.vl-cat-tile:hover {
    border-color: var(--vl-hair);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .4), 0 0 16px var(--vl-cyan-soft);
}

.vl-cat-num {
    font-family: var(--vl-font-d);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--vl-dim);
}

.vl-cat-thumb {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--vl-line-2);
    box-shadow: 0 0 14px var(--vl-cyan-soft);
    background: var(--vl-bg-2);
}

.vl-cat-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.vl-cat-tile h3 { font-size: 15px; font-weight: 600; margin: 0; color: var(--vl-txt); }

.vl-cat-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vl-cyan);
    font-family: var(--vl-font-d);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.vl-cat-go i { transition: transform .18s ease; }
.vl-cat-tile:hover .vl-cat-go i { transform: translateX(4px); }
[dir="rtl"] .vl-cat-tile:hover .vl-cat-go i { transform: translateX(-4px) scaleX(-1); }
[dir="rtl"] .vl-cat-go i { transform: scaleX(-1); }

/* ---------- Policy prose ---------- */
.vl-policy-head { padding-block: 26px 6px; }
.vl-policy-body { padding-block: 10px 30px; }

/* ---------- Offcanvas cart ---------- */
.vl-body .offcanvas {
    background: var(--vl-bg-2);
    color: var(--vl-txt);
    border-inline-start: 1px solid var(--vl-line-2);
}

.vl-body .offcanvas-header { border-block-end: 1px solid var(--vl-line); }
.vl-body .offcanvas-title { font-family: var(--vl-font-d); font-weight: 700; color: var(--vl-txt); }
.vl-body .offcanvas-footer { border-block-start: 1px solid var(--vl-line); padding: 14px; }
.vl-body .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

.vl-cart-item {
    border: 1px solid var(--vl-line);
    background: var(--vl-panel);
    border-radius: var(--vl-r-md);
    padding: 14px;
}

/* Keep the qty/delete control row in logical +/− order under RTL
   (icons are direction-agnostic; the row itself reads consistently). */
[dir="rtl"] .vl-cart-item .d-flex.flex-wrap { direction: ltr; justify-content: flex-end; }

.vl-cart-thumb { width: 86px; height: 86px; border-radius: var(--vl-r-sm); overflow: hidden; border: 1px solid var(--vl-line-2); }
.vl-cart-name { font-size: 14.5px; font-weight: 600; color: var(--vl-txt); margin: 0; }
.vl-cart-sub { color: var(--vl-muted); font-size: 11.5px; }
.vl-cart-price { color: var(--vl-cyan); font-family: var(--vl-font-d); font-weight: 700; font-size: 15px; }

.vl-qty-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--vl-bg-3);
    border: 1px solid var(--vl-line-2);
    color: var(--vl-txt);
    cursor: pointer;
    padding: 0;
}

.vl-qty-btn:hover { border-color: var(--vl-cyan); color: var(--vl-cyan); }
.vl-qty-btn svg { width: 16px; height: 16px; }

.vl-qty-num {
    width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--vl-font-d);
    font-weight: 700;
    color: var(--vl-txt);
}

.vl-del-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(255, 84, 112, .12);
    border: 1px solid rgba(255, 84, 112, .35);
    color: var(--vl-danger);
    cursor: pointer;
    padding: 0;
    margin-inline-start: 10px;
}

.vl-del-btn:hover { background: rgba(255, 84, 112, .2); }
.vl-del-btn svg { width: 16px; height: 16px; }

.vl-total { font-family: var(--vl-font-d); font-size: 16px; color: var(--vl-txt); margin-block-end: 10px; }
.vl-total .vl-total-num { color: var(--vl-cyan); font-weight: 700; }

#empty-cart p { color: var(--vl-muted); }

.vl-empty-cart-art {
    width: 72px;
    height: 56px;
    margin: 26px auto 4px;
    border: 1.5px dashed var(--vl-line-2);
    border-radius: 12px 12px 16px 16px;
    position: relative;
    background: var(--vl-panel);
}

.vl-empty-cart-art::before {
    content: "";
    position: absolute;
    inset-block-start: -14px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 22px;
    border: 1.5px dashed var(--vl-line-2);
    border-block-end: none;
    border-radius: 12px 12px 0 0;
}

/* ---------- Modals ---------- */
.vl-body .modal-content {
    position: relative;
    background: var(--vl-bg-2);
    color: var(--vl-txt);
    border: 1px solid var(--vl-line-2);
    border-radius: var(--vl-r-lg);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vl-cyan) 08%, transparent), 0 24px 60px rgba(0, 0, 0, .6);
}

.vl-body .modal-header { border-block-end: 1px solid var(--vl-line); }
.vl-body .modal-footer { border-block-start: 1px solid var(--vl-line); }
.vl-body .modal-title { color: var(--vl-txt); font-family: var(--vl-font-d); }
.vl-body .modal .text-muted { color: var(--vl-muted) !important; }

/* ---------- Floating alerts ---------- */
.vl-body .alert-float {
    border-radius: var(--vl-r-md);
    border: 1px solid var(--vl-line-2);
    font-family: var(--vl-font-d);
}

.vl-body .alert-float.alert-success { background: #0e2a22; color: var(--vl-ok); border-color: rgba(61, 242, 182, .4); }
.vl-body .alert-float.alert-danger { background: #2c121a; color: #ff8fa3; border-color: rgba(255, 84, 112, .4); }

/* ---------- Mobile dock (sticky mini-cart cyan pill) ---------- */
.vl-dock {
    position: fixed;
    inset-block-end: 12px;
    inset-inline: 0;
    z-index: 1040;
    display: flex;
    justify-content: center;
    pointer-events: none;
    padding-inline: 16px;
}

.vl-dock-in {
    pointer-events: auto;
    display: flex;
    align-items: stretch;
    gap: 4px;
    background: rgba(18, 22, 29, .9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--vl-line-2);
    border-radius: 999px;
    padding: 5px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55), 0 0 18px var(--vl-cyan-soft);
}

.vl-dock-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    color: var(--vl-muted);
    font-family: var(--vl-font-d);
    font-size: 12.5px;
    font-weight: 600;
}

.vl-dock-link i { font-size: 17px; line-height: 1; }
.vl-dock-link.active, .vl-dock-link:hover { color: var(--vl-txt); background: var(--vl-panel-2); }

.vl-dock-cart {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--vl-cyan);
    color: #06121a !important;
    font-family: var(--vl-font-d);
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 0 16px var(--vl-glow);
    cursor: pointer;
}

.vl-dock-cart i { font-size: 17px; line-height: 1; }

.vl-dock-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    border-radius: 999px;
    background: #0E1116;
    color: var(--vl-cyan);
    font-size: 10.5px;
    font-weight: 700;
}

.vl-dock-count.is-empty { opacity: .45; }

/* Keep the WhatsApp float clear of the dock on phones */
@media (max-width: 991px) {
    .vl-body .whatsapp-float-btn { bottom: calc(var(--vl-dock-h) + 26px); }
}

/* ---------- Footer ---------- */
.vl-footer {
    margin-block-start: 30px;
    border-block-start: 1px solid var(--vl-line);
    position: relative;
    padding-block: 26px 18px;
}

.vl-footer::before {
    content: "";
    position: absolute;
    inset-block-start: -1px;
    inset-inline: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--vl-hair), transparent);
}

.vl-footer-grid { display: grid; gap: 18px; text-align: center; }

.vl-footer-brand { font-family: var(--vl-font-d); font-weight: 700; font-size: 16px; color: var(--vl-txt); }
.vl-footer p, .vl-footer span { color: var(--vl-muted); font-size: 13px; }
.vl-footer a { color: var(--vl-txt); }
.vl-footer a:hover { color: var(--vl-cyan); }

.vl-socials { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }

.vl-socials a {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    border: 1px solid var(--vl-line);
    background: var(--vl-panel);
    color: var(--vl-muted);
    font-size: 17px;
    transition: color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.vl-socials a:hover { color: var(--vl-cyan); border-color: var(--vl-hair); box-shadow: 0 0 12px var(--vl-cyan-soft); }

.vl-policy-links { display: flex; flex-wrap: wrap; gap: 7px 16px; padding: 0; margin: 0; list-style: none; justify-content: center; }
.vl-policy-links a { color: var(--vl-muted); font-size: 12.5px; }
.vl-policy-links a:hover { color: var(--vl-cyan); }

.vl-copy { font-size: 12px; color: var(--vl-dim); margin-block-start: 8px; }
.vl-copy a { color: var(--vl-muted); }

/* Wallet partial sits on dark comfortably */
.vl-body .scaanme-wallet-buttons { margin-block: 20px 10px; }

/* ---------- Language switcher harmonization ---------- */
.vl-topbar .dropdown-menu { background: var(--vl-bg-2); border: 1px solid var(--vl-line-2); }
.vl-topbar .dropdown-item { color: var(--vl-txt); }
.vl-topbar .dropdown-item:hover { background: var(--vl-panel-2); color: var(--vl-cyan); }

/* ============================================================
   ≥760px layer
   ============================================================ */
@media (min-width: 760px) {
    .vl-page { padding-inline: 24px; padding-block-end: 40px; }
    .vl-topbar { margin-inline: -24px; padding-inline: 24px; }
    .vl-sec { padding-block: 34px; }

    .vl-hero {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        align-items: center;
        gap: 36px;
        padding-block: 44px 16px;
    }

    .vl-h1 { font-size: clamp(2.1rem, 3.6vw, 2.9rem); }
    .vl-trust { justify-content: center; flex-wrap: wrap; overflow: visible; }
    .vl-cat-rail { flex-wrap: wrap; overflow: visible; justify-content: center; }

    .vl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .vl-rail { margin-inline: 0; padding-inline: 0; }
    .vl-rail > .vl-card { flex-basis: 280px; }

    .vl-toolbar { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr); align-items: center; }

    .vl-pd { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 36px; }
    .vl-pd-actions { flex-direction: row; }
    .vl-pd-actions .vl-btn { flex: 1 1 0; }

    .vl-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

    .vl-footer-grid { grid-template-columns: 1.2fr 1fr; align-items: start; text-align: start; }
    .vl-footer-grid .vl-policy-links { justify-content: flex-start; }
    .vl-footer-end { justify-self: end; text-align: end; }
    .vl-footer-end .vl-socials { justify-content: flex-end; }
}

@media (min-width: 1024px) {
    .vl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vl-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vl-dock { display: none; }
}

/* ============================================================
   Reduced motion — ambient/auto motion off
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    body.vl-body::after { animation: none; opacity: .6; }
    .vl-hero-stage::before { animation: none; opacity: .7; }
    .vl-holo { animation: none; background-position: 50% 0; }
    .vl-loader { animation-duration: 1.6s; }

    .vl-card, .vl-cat-tile, .vl-btn, .vl-add, .vl-cart-btn,
    .vl-card-media img, .vl-cat-go i {
        transition: none !important;
    }

    .vl-card:hover, .vl-cat-tile:hover { transform: none; }
    .vl-hero-media { scroll-behavior: auto; }
}


/* ============================================================
   Cart toast — bulletproof compact pill.
   Overrides the legacy inline showAlert() sizing (width:75% /
   inset-inline:0) that made the Tabler solid alert blow up to a
   half-screen green panel. Forces a centered top toast, auto height.
   ============================================================ */
.alert-float {
    position: fixed !important;
    inset-block-start: 16px !important;
    inset-block-end: auto !important;
    bottom: auto !important;
    inset-inline: 16px !important;
    z-index: 4000;
    width: auto !important;
    max-width: 420px !important;
    margin-inline: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 13px 20px !important;
    border: 0 !important;
    border-radius: 14px !important;
    text-align: center !important;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.4;
    background: #1f7a4d !important;
    color: #fff !important;
    box-shadow: 0 16px 38px -10px rgba(0, 0, 0, .42);
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
.alert-float.show {
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
}
.alert-float .btn-close,
.alert-float .alert-icon { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    .alert-float { transition: none; }
}


/* ============================================================
   GLOBAL CONTAINMENT BASELINE (founder remark: diagonal-scroll
   drift / horizontal "wiggle" on mobile + zoom-out).
   overflow-x:clip on html is sticky-safe (unlike hidden) and
   stops the horizontal pan; overscroll-behavior-x:none kills the
   rubber-band; max-width:100% + min-width:0 prevent any child
   from forcing the document wider than the viewport.
   ============================================================ */
html { overflow-x: clip; }
body { overflow-x: clip; overscroll-behavior-x: none; max-width: 100%; }
/* horizontal scrollers keep their swipe to themselves */
.car-track, .reel, .film-reel, .tm-track, .letters, .marquee, .marquee-track,
[class*="-track"], [class*="-rail"], [class*="-carousel"], [class*="-scroll"] {
    overscroll-behavior-x: contain;
    max-width: 100vw;
}