/* ═══════════════════════════════════════════════════════════════════════
   VELORA FASHION — Premium boutique theme
   Tokens come from index.blade.php (inline) so the vendor's primary/
   secondary colors flow through. This file is purely structural.
═══════════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 16px; }

/* ── Light-mode base tokens ─────────────────────────────────────────── */
/* All --vl-* variables are set explicitly on :root so the dark-mode
   block (html[data-vl-mode="dark"]) can simply override them.
   NOTE: --vl-accent / --vl-font / --vl-primary are set per-vendor
   in the layout's inline <style> — those override these :root values. */
:root {
    --vl-bg:         #ffffff;
    --vl-bg-2:       #f8f9fa;
    --vl-surface:    #ffffff;
    --vl-surface-2:  #f8f8f8;
    --vl-card:       #ffffff;
    --vl-border:     #ececec;
    --vl-line:       rgba(0,0,0,.07);
    --vl-text:       #0a0a0b;
    --vl-text-2:     #4a4a5a;
    --vl-text-3:     #9a9aaa;
    --vl-muted:      #6b7280;
    --vl-accent:     #d4a574;
    --vl-utility-bg: #0a0a0b;
    --vl-footer-bg:  #0a0a0b;
}

body {
    background: var(--vl-bg, #fff);
    color: var(--vl-text, #0a0a0b);
    font-family: var(--vl-font, 'Inter','Cairo','Tajawal',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background .2s, color .2s;
}
h1,h2,h3,h4,h5,h6 {
    font-family: var(--vl-heading-font, 'Playfair Display', Georgia, serif);
    line-height: 1.2;
}
html[dir="rtl"] body, html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 {
    font-family: 'Cairo','Tajawal','IBM Plex Sans Arabic', var(--vl-font);
}
html[dir="rtl"] .vl-hero-title, html[dir="rtl"] .vl-section-title, html[dir="rtl"] .vl-look-title,
html[dir="rtl"] .vl-side-promo-title, html[dir="rtl"] .vl-logo, html[dir="rtl"] .vl-brand,
html[dir="rtl"] .vl-footer-col h4 {
    font-family: 'Cairo','Tajawal','Amiri', var(--vl-heading-font);
    letter-spacing: 0;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .15s; }
a:hover { color: var(--vl-accent, #d4a574); }

/* ── Container ─────────────────────────────────────────────────────── */
.vl-container { max-width: 1280px; margin: 0 auto; padding: 0 18px; }
@media (max-width: 720px) { .vl-container { padding: 0 14px; } }

/* ── Top utility bar ───────────────────────────────────────────────── */
/* Utility bar uses its own dedicated token so it stays dark in BOTH
   light and dark modes — using `--vl-text` made it invert in dark mode
   (light bg + light text = invisible). */
.vl-utility {
    background: var(--vl-utility-bg, #0a0a0b);
    color: rgba(255,255,255,.85);
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: 11.5px; font-weight: 500;
}
.vl-utility-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 8px 0; flex-wrap: wrap;
}
.vl-utility-left { display: flex; align-items: center; gap: 12px; }
.vl-utility-msg {
    flex: 1; text-align: center;
    font-size: 12.5px; color: #fff; font-weight: 500;
    letter-spacing: .02em;
}
.vl-utility-right { display: flex; align-items: center; gap: 12px; }
.vl-utility-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.85);
    /* Inherit the body's Cairo/Tajawal/Inter stack instead of the UA
       default button font (which is usually Arial). */
    font-family: inherit;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0;
    cursor: pointer;
    border: 0;
    line-height: 1;
}
.vl-utility-pill:hover { background: rgba(255,255,255,.12); color: #fff; }
/* .vl-utility-flag was removed — language is shown as text only now */
.vl-utility-social { display: flex; align-items: center; gap: 4px; }
.vl-utility-social a {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7); font-size: 11px;
}
.vl-utility-social a:hover { color: #fff; }

/* Legacy promo bar (kept for backwards compatibility) */
.vl-promo {
    background: var(--vl-utility-bg, #0a0a0b);
    color: #fff;
    text-align: center;
    font-size: 12.5px; font-weight: 500;
    padding: 8px 16px;
    letter-spacing: .02em;
}

/* ── Header ────────────────────────────────────────────────────────── */
.vl-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--vl-line, rgba(0,0,0,.06));
}
.vl-header-row {
    display: flex; align-items: center; gap: 18px;
    padding: 14px 0;
}
/* Logo sits on the leading edge — natural width, no flex grow. */
.vl-header-row > .vl-logo {
    flex: 0 0 auto;
}
/* Search fills the middle, capped at a comfortable max width. */
.vl-header-row > .vl-search {
    flex: 1 1 auto;
    max-width: 580px;
    margin: 0 auto;
}
.vl-header-tools { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.vl-icon-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer;
    color: var(--vl-text, #0a0a0b); position: relative;
    transition: background .15s;
}
.vl-icon-btn:hover { background: rgba(0,0,0,.05); }
.vl-icon-badge {
    position: absolute; top: 4px; inset-inline-end: 4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--vl-accent, #d4a574); color: #fff;
    font-size: 9px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.vl-search {
    flex: 1; max-width: 580px;
    display: flex; align-items: center; gap: 8px;
    background: var(--vl-surface-2, #f8f8f8);
    border-radius: 999px; padding: 10px 18px;
}
.vl-search input {
    flex: 1; border: 0; outline: 0; background: transparent;
    font: inherit; color: inherit;
}
.vl-search i { color: var(--vl-text-3, #999); }

.vl-logo {
    font-family: var(--vl-heading-font, 'Playfair Display', serif);
    font-size: 26px; font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--vl-text, #0a0a0b);
    display: flex; flex-direction: column; align-items: center;
    line-height: 1;
}
.vl-logo small {
    font-family: var(--vl-font, 'Inter', sans-serif);
    font-size: 9px; font-weight: 500;
    letter-spacing: .4em; color: var(--vl-text-3, #999);
    margin-top: 2px;
}
.vl-logo img { height: 38px; width: auto; }

/* ── Nav menu ──────────────────────────────────────────────────────── */
.vl-nav { border-top: 1px solid var(--vl-line, rgba(0,0,0,.06)); }
.vl-nav-list {
    display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
    justify-content: center;
    list-style: none; margin: 0; padding: 14px 0;
    font-size: 13.5px; font-weight: 500;
}
.vl-nav-list a {
    position: relative;
    color: var(--vl-text-2, #444);
    padding: 6px 2px;
}
.vl-nav-list a.is-active,
.vl-nav-list a:hover { color: var(--vl-text, #0a0a0b); }
.vl-nav-list a.is-active::after {
    content: '';
    position: absolute; bottom: -2px; inset-inline-start: 0;
    width: 100%; height: 2px;
    background: var(--vl-text, #0a0a0b);
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.vl-hero {
    position: relative;
    height: clamp(420px, 60vh, 640px);
    overflow: hidden;
    margin-bottom: 36px;
}
.vl-hero-slide {
    position: absolute; inset: 0;
    background: center/cover no-repeat;
    display: flex; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity .6s ease;
}
.vl-hero-slide.is-active { opacity: 1; pointer-events: auto; }
.vl-hero-slide::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.4) 45%, transparent 60%);
}
html[dir="rtl"] .vl-hero-slide::after {
    background: linear-gradient(270deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.4) 45%, transparent 60%);
}
.vl-hero-content {
    position: relative; z-index: 2;
    max-width: 540px;
    padding: 0 8%;
    text-align: start;
}
.vl-hero-eyebrow {
    color: var(--vl-accent, #d4a574);
    font-size: 14px; font-weight: 600;
    letter-spacing: .15em; text-transform: uppercase;
    margin-bottom: 14px;
}
.vl-hero-title {
    font-family: var(--vl-heading-font, 'Playfair Display', serif);
    font-size: clamp(38px, 6vw, 84px);
    font-weight: 700; line-height: 1;
    color: var(--vl-text, #0a0a0b);
    margin: 0 0 18px;
    letter-spacing: -.02em;
}
.vl-hero-sub {
    font-size: 15px; line-height: 1.7;
    color: var(--vl-text-2, #444);
    margin-bottom: 28px;
    max-width: 420px;
}
.vl-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.vl-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 32px; border-radius: 999px;
    font-size: 13.5px; font-weight: 600;
    border: 1.5px solid;
    cursor: pointer; transition: transform .15s, filter .15s;
    text-decoration: none;
}
.vl-btn-primary {
    background: var(--vl-text, #0a0a0b);
    color: #fff; border-color: var(--vl-text, #0a0a0b);
}
.vl-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.vl-btn-ghost {
    background: transparent;
    color: var(--vl-text, #0a0a0b);
    border-color: var(--vl-text, #0a0a0b);
}
.vl-btn-ghost:hover { background: var(--vl-text, #0a0a0b); color: #fff; }

.vl-hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3;
    width: 46px; height: 46px; border-radius: 50%;
    background: rgba(255,255,255,.9);
    border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--vl-text, #0a0a0b);
    backdrop-filter: blur(6px);
    transition: background .15s;
}
.vl-hero-nav:hover { background: #fff; }
.vl-hero-nav.is-prev { inset-inline-start: 16px; }
.vl-hero-nav.is-next { inset-inline-end: 16px; }
.vl-hero-dots {
    position: absolute; bottom: 24px;
    inset-inline-start: 0; inset-inline-end: 0;
    z-index: 3;
    display: flex; justify-content: center; gap: 8px;
}
.vl-hero-dot {
    width: 26px; height: 4px; border-radius: 999px;
    background: rgba(0,0,0,.25);
    border: 0; cursor: pointer;
    transition: background .15s;
}
.vl-hero-dot.is-active { background: var(--vl-text, #0a0a0b); }

/* ── Section title ─────────────────────────────────────────────────── */
.vl-section { padding: 48px 0; }
.vl-section-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; margin-bottom: 28px;
}
.vl-section-title {
    font-family: var(--vl-heading-font, 'Playfair Display', serif);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 700; line-height: 1.1;
    color: var(--vl-text, #0a0a0b);
    margin: 0;
}
.vl-section-sub {
    font-size: 13px; color: var(--vl-text-2, #666);
    margin-top: 4px;
}
.vl-section-more {
    font-size: 13px; font-weight: 600;
    color: var(--vl-text-2, #444);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
.vl-section-more:hover { color: var(--vl-accent, #d4a574); }

/* ── Categories (square cards) ─────────────────────────────────────── */
.vl-cats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}
@media (max-width: 980px) { .vl-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .vl-cats { grid-template-columns: repeat(2, 1fr); } }
.vl-cat {
    position: relative; aspect-ratio: 3/4;
    min-height: 180px;
    border-radius: 14px; overflow: hidden;
    background: var(--vl-surface-2, #f8f8f8) center/cover no-repeat;
    display: flex; align-items: flex-end;
    transition: transform .35s ease;
}
@supports (aspect-ratio: 3/4) { .vl-cat { min-height: 0; } }
.vl-cat:hover { transform: translateY(-3px); }
.vl-cat::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.7) 100%);
}
.vl-cat-meta {
    position: relative; z-index: 2;
    padding: 14px;
    color: #fff;
}
.vl-cat-name {
    font-family: var(--vl-heading-font, 'Playfair Display', serif);
    font-size: 18px; font-weight: 700; line-height: 1.1;
    margin-bottom: 2px;
}
.vl-cat-shop { font-size: 11px; opacity: .9; letter-spacing: .04em; }

/* ── Product grid ──────────────────────────────────────────────────── */
.vl-products-wrap { position: relative; display: grid; grid-template-columns: 280px 1fr; gap: 24px; }
.vl-products-wrap--full { grid-template-columns: 1fr; }
@media (max-width: 980px) { .vl-products-wrap { grid-template-columns: 1fr; } }

/* Side-promo card stays dark in BOTH modes — `--vl-text` flipped to
   light in dark mode would make this card white-on-white. */
.vl-side-promo {
    background: var(--vl-promo-bg, #0a0a0b);
    color: #fff;
    border-radius: 18px;
    padding: 26px;
    display: flex; flex-direction: column; gap: 18px;
}
.vl-side-promo-eyebrow {
    color: var(--vl-accent, #d4a574);
    font-size: 11.5px; font-weight: 600;
    letter-spacing: .15em; text-transform: uppercase;
}
.vl-side-promo-title {
    font-family: var(--vl-heading-font, 'Playfair Display', serif);
    font-size: 24px; font-weight: 700; line-height: 1.15;
}
.vl-side-promo-timer {
    display: flex; align-items: center; gap: 6px;
}
.vl-timer-cell {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,255,255,.08); border-radius: 9px;
    padding: 10px 12px; min-width: 50px;
}
.vl-timer-cell strong { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.vl-timer-cell small { font-size: 9px; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .1em; }
.vl-side-promo-prod {
    margin-top: auto; display: flex; align-items: center; gap: 12px;
    background: rgba(255,255,255,.05); border-radius: 12px; padding: 10px;
}
.vl-side-promo-prod img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.vl-side-promo-prod-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.vl-side-promo-prod-price { font-size: 12px; color: var(--vl-accent, #d4a574); font-weight: 700; }

.vl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1100px) { .vl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .vl-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Product card ──────────────────────────────────────────────────── */
.vl-prod {
    position: relative;
    background: var(--vl-card, #fff);
    border-radius: 12px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex; flex-direction: column;
}
.vl-prod:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -10px rgba(15,23,42,.16); }
.vl-prod-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    min-height: 280px;          /* fallback if aspect-ratio is unsupported */
    background: var(--vl-surface-2, #f6f6f6) center/cover no-repeat;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
}
@supports (aspect-ratio: 3/4) { .vl-prod-img-wrap { min-height: 0; } }
.vl-prod-badges {
    position: absolute; top: 10px; inset-inline-start: 10px;
    display: flex; flex-direction: column; gap: 5px;
    z-index: 2;
}
.vl-badge {
    display: inline-block;
    padding: 4px 10px; border-radius: 999px;
    background: var(--vl-secondary, #d4a574); color: #fff;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: .04em;
}
.vl-badge.is-new { background: var(--vl-text, #0a0a0b); }
.vl-prod-fav {
    position: absolute; top: 10px; inset-inline-end: 10px;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--vl-card, #fff); color: var(--vl-text, #0a0a0b);
    display: flex; align-items: center; justify-content: center;
    border: 0; cursor: pointer; font-size: 13px;
    transition: color .15s, transform .15s, background .15s;
    z-index: 2;
}
.vl-prod-fav:hover { color: #e11d48; transform: scale(1.08); }
.vl-prod-fav.is-on { color: #e11d48; }
.vl-prod-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.vl-prod:hover .vl-prod-img { transform: scale(1.04); }
.vl-prod-cart {
    position: absolute; bottom: 0; inset-inline-start: 0; inset-inline-end: 0;
    background: var(--vl-text, #0a0a0b); color: #fff;
    text-align: center; padding: 11px;
    font-size: 12.5px; font-weight: 600;
    transform: translateY(100%);
    transition: transform .25s ease;
    z-index: 2; cursor: pointer; border: 0;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.vl-prod:hover .vl-prod-cart { transform: translateY(0); }
.vl-prod-meta { padding: 14px 6px; }
.vl-prod-name {
    font-size: 14px; font-weight: 600;
    color: var(--vl-text, #0a0a0b);
    margin-bottom: 6px;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
}
.vl-prod-price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vl-prod-price {
    font-size: 14px; font-weight: 700;
    color: var(--vl-text, #0a0a0b);
}
.vl-prod-price-old {
    font-size: 12px; color: var(--vl-text-3, #999);
    text-decoration: line-through;
}
.vl-prod-rating {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--vl-text-3, #999);
}
.vl-prod-rating .stars { color: #fbbf24; }
.vl-prod-swatches { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.vl-swatch {
    width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,.1);
}

/* ── Brand strip ───────────────────────────────────────────────────── */
/* Always one row. On screens too narrow to fit all brands evenly,
   the strip becomes horizontally scrollable instead of wrapping. */
.vl-brands {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: nowrap;
    padding: 36px 0;
    border-top: 1px solid var(--vl-line, rgba(0,0,0,.08));
    border-bottom: 1px solid var(--vl-line, rgba(0,0,0,.08));
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.vl-brands::-webkit-scrollbar { display: none; }
.vl-brand {
    flex: 1 0 auto;
    text-align: center;
    font-family: var(--vl-heading-font, 'Playfair Display', serif);
    font-size: clamp(13px, 2.2vw, 20px);
    font-weight: 700;
    color: var(--vl-text-2, #444);
    letter-spacing: .04em;
    opacity: .55; transition: opacity .15s;
    white-space: nowrap;
}
.vl-brand:hover { opacity: 1; }
@media (max-width: 760px) {
    .vl-brands { gap: 16px; padding: 24px 0; }
}
@media (max-width: 540px) {
    .vl-brands { gap: 12px; padding: 18px 0; }
    .vl-brand { font-size: 13px; }
}

/* ── Lookbook ──────────────────────────────────────────────────────── */
/* Lookbook grid — 6 cells: [feature x2][men][rack][bag][acc] in a 4-col grid */
.vl-lookbook {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: minmax(220px, auto);
    gap: 14px;
}
@media (max-width: 980px) { .vl-lookbook { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .vl-lookbook { grid-template-columns: 1fr; } }
.vl-look {
    position: relative; aspect-ratio: 3/4;
    min-height: 220px;
    background: var(--vl-surface-2, #f4f4f5) center center/cover no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 14px; overflow: hidden;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease;
}
.vl-look:not(.is-feature):hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.18); }
@supports (aspect-ratio: 3/4) { .vl-look { min-height: 0; } }

/* Subtle gradient overlay at the bottom of every non-feature tile so the
   tag chip stays readable on bright photos AND the image gets a bit more
   depth in light mode (was looking washed-out without this). */
.vl-look:not(.is-feature)::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(0,0,0,.35) 0%,
        rgba(0,0,0,.10) 35%,
        transparent 60%);
    pointer-events: none;
    transition: opacity .25s ease;
}
.vl-look:not(.is-feature):hover::after { opacity: .7; }

/* Category tag chip pinned to the bottom-left of each lookbook tile */
.vl-look-tag {
    position: absolute;
    inset-inline-start: 12px; bottom: 12px;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,.92);
    color: #0a0a0b;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: .02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2;
}

.vl-look.is-feature {
    grid-column: span 2;
    aspect-ratio: auto;
    grid-row: span 2;
    background:
        linear-gradient(135deg, rgba(243,238,230,.92) 0%, rgba(255,255,255,.78) 60%, rgba(255,255,255,.55) 100%),
        url('https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1200&q=80') center/cover no-repeat;
    display: flex; flex-direction: column; justify-content: center;
    padding: 36px;
    color: var(--vl-text, #0a0a0b);
    min-height: 320px;
}
html[dir="ltr"] .vl-look.is-feature {
    background:
        linear-gradient(225deg, rgba(243,238,230,.92) 0%, rgba(255,255,255,.78) 60%, rgba(255,255,255,.55) 100%),
        url('https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1200&q=80') center/cover no-repeat;
}
.vl-look.is-feature:hover { transform: none; box-shadow: none; }
@media (max-width: 980px) { .vl-look.is-feature { grid-column: span 2; grid-row: span 1; padding: 24px; } }
@media (max-width: 540px) { .vl-look.is-feature { grid-column: span 1; grid-row: span 1; } }
.vl-look-eyebrow {
    font-size: 11px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--vl-accent, #d4a574);
    margin-bottom: 8px;
}
.vl-look-title {
    font-family: var(--vl-heading-font, 'Playfair Display', serif);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700; line-height: 1.1;
    margin-bottom: 10px;
}
.vl-look-desc {
    font-size: 13px; color: var(--vl-text-2, #6b7280);
    margin-bottom: 18px; max-width: 320px;
}

/* ── Insta strip ───────────────────────────────────────────────────── */
.vl-insta {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-top: 36px;
}
@media (max-width: 760px) { .vl-insta { grid-template-columns: repeat(4, 1fr); } }
.vl-insta-tile {
    /* Explicit aspect + min-height fallback so tiles stay perfectly
       square in every mode. Each property is declared separately
       (no `background` shorthand) so inline background-image keeps
       its center/cover positioning. */
    aspect-ratio: 1 / 1;
    min-height: 100px;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--vl-surface-2, #f6f6f6);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    cursor: pointer;
    display: block;
}
@supports (aspect-ratio: 1/1) { .vl-insta-tile { min-height: 0; } }
.vl-insta-tile::after {
    content: '\f16d';
    font-family: 'Font Awesome 6 Brands';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.5); color: #fff;
    font-size: 22px;
    opacity: 0; transition: opacity .2s;
}
.vl-insta-tile:hover::after { opacity: 1; }

/* ── Footer features strip ─────────────────────────────────────────── */
.vl-features {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 36px 0;
    border-top: 1px solid var(--vl-line, rgba(0,0,0,.08));
}
@media (max-width: 760px) { .vl-features { grid-template-columns: repeat(2, 1fr); } }
.vl-feature {
    display: flex; align-items: center; gap: 12px;
}
.vl-feature-ico {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--vl-surface-2, #f5f5f5);
    color: var(--vl-text, #0a0a0b);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.vl-feature-meta strong { display: block; font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.vl-feature-meta small  { font-size: 11.5px; color: var(--vl-text-3, #999); }

/* ── Footer ────────────────────────────────────────────────────────── */
/* Footer stays dark in BOTH modes — same reason as side-promo / utility. */
.vl-footer {
    background: var(--vl-footer-bg, #0a0a0b);
    color: #fff;
    padding: 60px 0 24px;
    margin-top: 60px;
}
.vl-footer-grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 36px;
    margin-bottom: 36px;
}
@media (max-width: 760px) { .vl-footer-grid { grid-template-columns: 1fr; } }
.vl-footer-col h4 {
    font-family: var(--vl-heading-font, 'Playfair Display', serif);
    font-size: 16px; font-weight: 700;
    margin: 0 0 18px;
    color: #fff;
}
.vl-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.vl-footer-col a { color: rgba(255,255,255,.65); font-size: 13px; }
.vl-footer-col a:hover { color: #fff; }
/* Contact rows: icon chip + text, aligned. */
.vl-footer-col ul.vl-footer-contact-list { gap: 10px; }
.vl-footer-col ul.vl-footer-contact-list li {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.65);
}
.vl-footer-col ul.vl-footer-contact-list li:has(span) { align-items: flex-start; }
.vl-footer-col ul.vl-footer-contact-list li i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: var(--vl-accent, #d4a574);
    font-size: 13px; flex-shrink: 0;
}
.vl-footer-col ul.vl-footer-contact-list li a,
.vl-footer-col ul.vl-footer-contact-list li span { color: inherit; }
.vl-footer-col ul.vl-footer-contact-list li a:hover { color: #fff; }
.vl-footer-about p { font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.7; margin: 0 0 16px; }
.vl-footer-social { display: flex; gap: 10px; }
.vl-footer-social a {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.08);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px;
}
.vl-footer-social a:hover { background: var(--vl-accent, #d4a574); }
/* Footer bottom — copyright on one side, payment gateway logos on the
   other. Single row on desktop, stacks on mobile. */
.vl-footer-bottom {
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center; text-align: center;
    flex-wrap: wrap; gap: 14px;
    color: rgba(255,255,255,.55); font-size: 12.5px;
}
.vl-footer-copy { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; }
.vl-footer-brand {
    color: var(--vl-accent, #d4a574) !important;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s, color .15s;
    padding: 0 4px;
}
.vl-footer-brand:hover {
    color: #fff !important;
    border-bottom-color: transparent;
    text-decoration: none;
}
.vl-footer-sep {
    opacity: .35;
    margin: 0 6px;
    font-weight: 300;
}
.vl-footer-year { font-variant-numeric: tabular-nums; }

/* Payment gateway logos — bare images, no background, small. */

/* Logo box — fixed-aspect tile with thin border, no fill.
   The image inside uses object-fit:contain so the FULL logo (including
   any baseline text or wide horizontal layouts) is visible. */
.vl-footer-payment-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center center;
    border-radius: 5px;
    background: transparent;
    opacity: .92;
    transition: opacity .15s ease, border-color .15s ease, transform .15s ease;
    display: block;
    box-sizing: border-box;
    flex-shrink: 0;
}
.vl-footer-payment-logo:hover {
    opacity: 1;
    border-color: rgba(255,255,255,.45);
    transform: translateY(-1px);
}

@media (max-width: 540px) {
    .vl-footer-payment-logo { width: 56px; height: 36px; padding: 5px 8px; }
}

/* ── Dark mode ─────────────────────────────────────────────────────── */
html[data-vl-mode="dark"] {
    --vl-bg:         #0a0a0b;
    --vl-bg-2:       #18181b;
    --vl-surface:    #131316;
    --vl-surface-2:  #18181b;
    --vl-card:       #131316;
    --vl-border:     rgba(255,255,255,.08);
    --vl-line:       rgba(255,255,255,.08);
    --vl-text:       #fafafa;
    --vl-text-2:     #a1a1aa;
    --vl-text-3:     #71717a;
    --vl-muted:      #a1a1aa;
}
html[data-vl-mode="dark"] .vl-header { background: rgba(10,10,11,.92); }
html[data-vl-mode="dark"] .vl-search { background: #18181b; }
html[data-vl-mode="dark"] .vl-icon-btn:hover { background: rgba(255,255,255,.08); }
html[data-vl-mode="dark"] .vl-hero-slide::after {
    background: linear-gradient(90deg, rgba(10,10,11,.85) 0%, rgba(10,10,11,.4) 45%, transparent 60%);
}
html[data-vl-mode="dark"][dir="rtl"] .vl-hero-slide::after {
    background: linear-gradient(270deg, rgba(10,10,11,.85) 0%, rgba(10,10,11,.4) 45%, transparent 60%);
}
html[data-vl-mode="dark"] .vl-btn-primary { background: #fff; color: #0a0a0b; border-color: #fff; }
html[data-vl-mode="dark"] .vl-btn-ghost { color: #fff; border-color: #fff; }
html[data-vl-mode="dark"] .vl-btn-ghost:hover { background: #fff; color: #0a0a0b; }
html[data-vl-mode="dark"] .vl-hero-nav { background: rgba(255,255,255,.1); color: #fff; }
html[data-vl-mode="dark"] .vl-hero-dot { background: rgba(255,255,255,.25); }
html[data-vl-mode="dark"] .vl-hero-dot.is-active { background: #fff; }
html[data-vl-mode="dark"] .vl-prod-fav { background: #18181b; color: #fff; }
html[data-vl-mode="dark"] .vl-prod-cart { background: #fff; color: #0a0a0b; }
html[data-vl-mode="dark"] .vl-feature-ico { background: #18181b; color: #fff; }
/* Dark mode lookbook feature card — keep the photo, use a dark overlay
   instead of replacing the bg with a flat gradient (which made the card
   look like an empty black block). */
html[data-vl-mode="dark"] .vl-look.is-feature,
html[data-vl-mode="dark"][dir="ltr"] .vl-look.is-feature {
    background:
        linear-gradient(135deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.62) 55%, rgba(10,10,11,.42) 100%),
        url('https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1200&q=80') center/cover no-repeat;
    color: #fff;
}
html[data-vl-mode="dark"][dir="rtl"] .vl-look.is-feature {
    background:
        linear-gradient(225deg, rgba(10,10,11,.86) 0%, rgba(10,10,11,.62) 55%, rgba(10,10,11,.42) 100%),
        url('https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1200&q=80') center/cover no-repeat;
    color: #fff;
}
html[data-vl-mode="dark"] .vl-look-desc { color: rgba(255,255,255,.72); }
/* Tag chip on dark photos — adjust for stronger contrast */
html[data-vl-mode="dark"] .vl-look-tag { background: rgba(255,255,255,.95); }

/* Nav text in dark mode — brighten inactive items, white for active/hover */
html[data-vl-mode="dark"] .vl-nav-list a { color: rgba(255,255,255,.78); }
html[data-vl-mode="dark"] .vl-nav-list a.is-active,
html[data-vl-mode="dark"] .vl-nav-list a:hover { color: #fff; }
html[data-vl-mode="dark"] .vl-nav-list a.is-active::after { background: #fff; }

/* Other surfaces that were relying on --vl-text as a "dark color"
   need their dark-mode variant declared explicitly so they keep
   working when --vl-text flips to light. */
html[data-vl-mode="dark"] .vl-badge.is-new { background: #fff; color: #0a0a0b; }
html[data-vl-mode="dark"] .vl-search { color: #fff; }
html[data-vl-mode="dark"] .vl-search input { color: #fff; }
html[data-vl-mode="dark"] .vl-search input::placeholder { color: rgba(255,255,255,.55); }
html[data-vl-mode="dark"] .vl-section-title,
html[data-vl-mode="dark"] .vl-logo,
html[data-vl-mode="dark"] .vl-prod-name,
html[data-vl-mode="dark"] .vl-prod-price,
html[data-vl-mode="dark"] .vl-feature-meta strong { color: #fff; }
html[data-vl-mode="dark"] .vl-section-sub,
html[data-vl-mode="dark"] .vl-prod-price-old,
html[data-vl-mode="dark"] .vl-feature-meta small { color: rgba(255,255,255,.6); }
html[data-vl-mode="dark"] .vl-prod-swatches .vl-swatch[style*="#fff"] { border-color: rgba(255,255,255,.25) !important; }


/* ═══════════════════════════════════════════════════════════════════════
   POLISH LAYER — Comprehensive theming + responsive + RTL
   Everything below complements the base styles. Order matters: this block
   must stay LAST so its overrides win.
═══════════════════════════════════════════════════════════════════════ */

/* ── Dark mode completeness ────────────────────────────────────────── */
/* Every surface, border and badge that the base CSS leaves on the
   light-mode default gets an explicit dark variant here. */
html[data-vl-mode="dark"] body {
    color-scheme: dark;
}
html[data-vl-mode="dark"] .vl-cat::after {
    background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85) 100%);
}
html[data-vl-mode="dark"] .vl-insta-tile {
    background-color: #131316;
}
html[data-vl-mode="dark"] .vl-prod {
    background-color: #131316;
    box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
html[data-vl-mode="dark"] .vl-prod:hover {
    box-shadow: 0 14px 30px -10px rgba(0,0,0,.6);
}
/* IMPORTANT: use background-color (not the `background` shorthand)
   for any element that receives an inline `background-image:url(...)`.
   Shorthand resets background-position/background-size to initial
   values, which makes images render at their native size pinned to
   top-left instead of center/cover. */
html[data-vl-mode="dark"] .vl-prod-img-wrap { background-color: #18181b; }
html[data-vl-mode="dark"] .vl-cat { background-color: #18181b; }
html[data-vl-mode="dark"] .vl-look:not(.is-feature) { background-color: #18181b; }
html[data-vl-mode="dark"] .vl-insta-tile { background-color: #131316; }
html[data-vl-mode="dark"] .vl-prod-fav {
    background-color: rgba(24,24,27,.92);
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
html[data-vl-mode="dark"] .vl-prod-fav:hover { background-color: rgba(24,24,27,1); }

/* Side-promo in dark mode — the default `#0a0a0b` matches the dark
   page bg exactly, making the card invisible. Lift it one elevation
   step and add a subtle border so the frame stays distinct. */
html[data-vl-mode="dark"] .vl-side-promo {
    background: linear-gradient(180deg, #18181b 0%, #131316 100%);
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 8px 24px -8px rgba(0,0,0,.5);
}
html[data-vl-mode="dark"] .vl-brands {
    border-top-color: rgba(255,255,255,.08);
    border-bottom-color: rgba(255,255,255,.08);
}
html[data-vl-mode="dark"] .vl-brand { color: rgba(255,255,255,.55); }
html[data-vl-mode="dark"] .vl-brand:hover { color: #fff; }
html[data-vl-mode="dark"] .vl-features { border-top-color: rgba(255,255,255,.08); }
html[data-vl-mode="dark"] .vl-section-more { color: rgba(255,255,255,.7); }
html[data-vl-mode="dark"] .vl-section-more:hover { color: var(--vl-accent, #d4a574); }
html[data-vl-mode="dark"] .vl-logo small { color: rgba(255,255,255,.5); }
html[data-vl-mode="dark"] .vl-cat-meta { color: #fff; }
html[data-vl-mode="dark"] .vl-swatch { border-color: rgba(255,255,255,.15); }
html[data-vl-mode="dark"] .vl-prod-rating,
html[data-vl-mode="dark"] .vl-prod-name { color: rgba(255,255,255,.9); }
html[data-vl-mode="dark"] .vl-hero-eyebrow,
html[data-vl-mode="dark"] .vl-look-eyebrow,
html[data-vl-mode="dark"] .vl-side-promo-eyebrow {
    color: var(--vl-accent, #d4a574);
}
html[data-vl-mode="dark"] .vl-hero-title,
html[data-vl-mode="dark"] .vl-look-title,
html[data-vl-mode="dark"] .vl-cat-name { color: #fff; }
html[data-vl-mode="dark"] .vl-hero-sub { color: rgba(255,255,255,.75); }

/* Dark mode: ensure focus ring is visible on dark surfaces */
html[data-vl-mode="dark"] :focus-visible {
    outline: 2px solid var(--vl-accent, #d4a574);
    outline-offset: 2px;
}


/* ── RTL/LTR micro-fixes ──────────────────────────────────────────── */
/* Logical properties handle most of the directionality, but a few
   compound layouts and icons still need explicit RTL treatment. */
html[dir="rtl"] .vl-section-more::after,
html[dir="ltr"] .vl-section-more::after { content: ''; }

/* Chevron icons inside .fa-chevron-* don't auto-flip — they're set in
   the markup with conditional class. Make sure prev/next button positions
   work the same way in both directions. */
html[dir="rtl"] .vl-hero-nav.is-prev { inset-inline-start: 16px; inset-inline-end: auto; }
html[dir="rtl"] .vl-hero-nav.is-next { inset-inline-end: 16px; inset-inline-start: auto; }

/* Search icon comes first visually in both directions thanks to flex
   ordering; the gap handles the spacing. No special override needed. */

/* Tag chip on RTL — bottom-start respects direction automatically via
   inset-inline-start. No additional rule needed. */

/* Footer columns: in RTL the about column lands on the right naturally
   thanks to grid ordering. The footer-bottom row keeps space-between
   semantics in both directions. */

/* AR-specific typography tweaks — Arabic glyphs benefit from slightly
   tighter line-height and lower letter-spacing than Latin text. */
html[dir="rtl"] .vl-hero-title,
html[dir="rtl"] .vl-look-title,
html[dir="rtl"] .vl-section-title,
html[dir="rtl"] .vl-side-promo-title {
    line-height: 1.25;
    letter-spacing: 0;
}

/* RTL hero title — Arabic glyphs are denser than Latin, so the 84px
   clamp ceiling pushes 3-word phrases (أناقة بلا حدود) into stacking
   per word. Tighten the upper bound + widen the content column so
   short Arabic headlines stay on a single line. */
html[dir="rtl"] .vl-hero-title {
    font-size: clamp(32px, 4.6vw, 64px);
    line-height: 1.15;
    word-spacing: .04em;
}
html[dir="rtl"] .vl-hero-content {
    max-width: 640px;
}
html[dir="rtl"] .vl-hero-sub { max-width: 480px; }

/* Same treatment for the lookbook feature card title in RTL. */
html[dir="rtl"] .vl-look-title { font-size: clamp(22px, 2.6vw, 30px); }
html[dir="rtl"] .vl-side-promo-title { font-size: 22px; }
html[dir="rtl"] .vl-utility,
html[dir="rtl"] .vl-nav-list,
html[dir="rtl"] .vl-prod-name,
html[dir="rtl"] .vl-footer-col a {
    letter-spacing: 0;
}
html[dir="rtl"] .vl-logo {
    letter-spacing: .04em;     /* tighter than the .12em Latin tracking */
}


/* ── Responsive — tablet (≤980px) ─────────────────────────────────── */
@media (max-width: 980px) {
    .vl-section { padding: 36px 0; }
    .vl-hero { height: clamp(360px, 50vh, 500px); margin-bottom: 24px; }
    .vl-hero-content { max-width: 100%; padding: 0 6%; }
    .vl-hero-slide::after,
    html[dir="rtl"] .vl-hero-slide::after,
    html[data-vl-mode="dark"] .vl-hero-slide::after,
    html[data-vl-mode="dark"][dir="rtl"] .vl-hero-slide::after {
        background: linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.0) 30%, rgba(255,255,255,.85) 100%);
    }
    html[data-vl-mode="dark"] .vl-hero-slide::after,
    html[data-vl-mode="dark"][dir="rtl"] .vl-hero-slide::after {
        background: linear-gradient(180deg, rgba(10,10,11,.0) 0%, rgba(10,10,11,.3) 40%, rgba(10,10,11,.92) 100%);
    }
    .vl-hero-content {
        align-self: flex-end;
        margin-bottom: 24px;
        text-align: center;
    }
    .vl-hero-actions { justify-content: center; }
    .vl-hero { display: flex; flex-direction: column; }
    .vl-hero-slide { display: flex; align-items: flex-end; }

    .vl-section-head {
        flex-direction: column; align-items: flex-start;
        gap: 6px;
    }
    .vl-section-head > div { width: 100%; }
    .vl-section-more { align-self: flex-end; }

    .vl-header-row { gap: 10px; padding: 12px 0; }
    .vl-logo { font-size: 22px; letter-spacing: .08em; }
    .vl-search { max-width: 320px; padding: 8px 14px; }
    .vl-nav-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 22px;
        padding: 12px 4px;
        scrollbar-width: none;
    }
    .vl-nav-list::-webkit-scrollbar { display: none; }
}


/* ── Responsive — narrow tablet / large phone (≤760px) ────────────── */
@media (max-width: 760px) {
    .vl-section { padding: 28px 0; }
    .vl-hero { height: clamp(380px, 64vh, 520px); }
    .vl-hero-eyebrow { font-size: 12px; margin-bottom: 10px; }
    .vl-hero-title { font-size: clamp(30px, 9vw, 48px); margin-bottom: 12px; }
    .vl-hero-sub { font-size: 13.5px; margin-bottom: 20px; }
    .vl-btn { padding: 12px 22px; font-size: 12.5px; }

    /* Header: drop search to a second row; keep logo + tools tight */
    .vl-header-row {
        flex-wrap: wrap;
        padding: 10px 0;
        row-gap: 10px;
    }
    .vl-search {
        order: 99;
        flex: 1 1 100%;
        max-width: none;
    }

    /* Side promo + product grid — stack vertically with promo on top */
    .vl-products-wrap { gap: 18px; }
    .vl-side-promo { padding: 20px; gap: 14px; }
    .vl-side-promo-title { font-size: 20px; }
    .vl-side-promo-timer { flex-wrap: wrap; }
    .vl-timer-cell { padding: 8px 10px; min-width: 44px; }
    .vl-timer-cell strong { font-size: 16px; }

    /* Lookbook — feature card spans full width, tiles 2-up below */
    .vl-look.is-feature { padding: 20px; min-height: 240px; }
    .vl-look-title { font-size: clamp(22px, 6vw, 28px); }
    .vl-look-tag { font-size: 10.5px; padding: 5px 10px; }

    .vl-feature { gap: 10px; }
    .vl-feature-ico { width: 38px; height: 38px; font-size: 14px; }

    .vl-footer { padding: 40px 0 20px; margin-top: 40px; }
    .vl-footer-grid { gap: 28px; margin-bottom: 28px; }
    .vl-footer-bottom { justify-content: center; text-align: center; }
}


/* ── Responsive — phone (≤540px) ─────────────────────────────────── */
@media (max-width: 540px) {
    html { font-size: 15px; }
    .vl-container { padding: 0 14px; }
    .vl-section { padding: 24px 0; }

    /* Utility bar — keep just social + tagline, drop right-side fillers */
    .vl-utility-row { gap: 10px; padding: 6px 0; }
    .vl-utility-msg { font-size: 11.5px; }
    .vl-utility-social a { width: 20px; height: 20px; font-size: 10px; }

    /* Header — tighter logo, search becomes full-width pill */
    .vl-header-row { padding: 8px 0; }
    .vl-logo { font-size: 19px; letter-spacing: .06em; }
    .vl-icon-btn { width: 34px; height: 34px; }
    .vl-search { padding: 7px 12px; font-size: 13px; }

    /* Hero — vertical layout, full-width buttons */
    .vl-hero { height: auto; min-height: 420px; margin-bottom: 16px; }
    .vl-hero-title { font-size: clamp(28px, 10vw, 44px); }
    .vl-hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
    .vl-hero-actions .vl-btn { width: 100%; }
    .vl-hero-nav { width: 38px; height: 38px; }
    .vl-hero-nav.is-prev { inset-inline-start: 10px; }
    .vl-hero-nav.is-next { inset-inline-end: 10px; }

    /* Section title — slightly smaller */
    .vl-section-title { font-size: clamp(22px, 6vw, 28px); }

    /* Cats — 2-col already set; tighter padding */
    .vl-cat-meta { padding: 10px; }
    .vl-cat-name { font-size: 15px; }

    /* Products — single column promo on top, then 2-up grid */
    .vl-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .vl-prod-meta { padding: 10px 4px; }
    .vl-prod-name { font-size: 13px; }
    .vl-prod-price { font-size: 13px; }
    .vl-prod-price-old { font-size: 11px; }

    /* Lookbook — single column, slightly shorter tiles */
    .vl-lookbook { grid-auto-rows: minmax(260px, auto); }

    /* Insta — 4-col already set */
    .vl-insta { gap: 4px; }

    /* Features — keep 2-col but center-stack on tiny screens */
    .vl-feature { flex-direction: column; align-items: flex-start; gap: 8px; text-align: start; }
    .vl-feature-meta strong { font-size: 12.5px; }
    .vl-feature-meta small { font-size: 11px; }

    /* Footer — single column already set */
    .vl-footer-col h4 { margin-bottom: 12px; }
    .vl-footer-col ul { gap: 8px; }
}


/* ── Responsive — tiny phone (≤380px) ────────────────────────────── */
@media (max-width: 380px) {
    .vl-hero-title { font-size: 28px; }
    .vl-hero-content { padding: 0 4%; }
    .vl-prod-meta { padding: 8px 4px; }
    .vl-brand { font-size: 16px; }
}


/* ── Responsive — large desktop (≥1440px) ────────────────────────── */
@media (min-width: 1440px) {
    .vl-container { max-width: 1340px; }
    .vl-hero { height: clamp(520px, 64vh, 720px); }
    .vl-section { padding: 56px 0; }
}


/* ── Accessibility: reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .vl-hero-slide,
    .vl-prod:hover,
    .vl-look:hover,
    .vl-cat:hover { transform: none !important; }
}


/* ── Focus indicator (keyboard a11y) ──────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--vl-accent, #d4a574);
    outline-offset: 2px;
    border-radius: 4px;
}
.vl-btn:focus-visible,
.vl-icon-btn:focus-visible,
.vl-utility-pill:focus-visible { outline-offset: 3px; }


/* ── Print styles ─────────────────────────────────────────────────── */
@media print {
    .vl-utility, .vl-hero-nav, .vl-hero-dots,
    .vl-prod-cart, .vl-prod-fav,
    .vl-icon-btn, .vl-search { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   DEVICE PREVIEW FALLBACK
   Media queries fire on viewport width, NOT on the constrained
   container the preview banner creates. So at desktop viewport with
   mobile preview active, mobile media queries don't trigger and the
   layout stays desktop-sized inside a 420px frame.
   These rules mirror the @media breakpoints but key off the body
   classes that the preview banner adds (`tm-device-mobile/tablet`),
   so the proper layout shows in the simulated frame.
═══════════════════════════════════════════════════════════════════════ */

/* ── TABLET frame (820px-equivalent) ─────────────────────────────── */
body.tm-device-tablet .vl-section { padding: 36px 0; }
body.tm-device-tablet .vl-cats { grid-template-columns: repeat(3, 1fr); }
body.tm-device-tablet .vl-grid { grid-template-columns: repeat(3, 1fr); }
body.tm-device-tablet .vl-products-wrap { grid-template-columns: 1fr; gap: 18px; }
body.tm-device-tablet .vl-lookbook { grid-template-columns: 1fr 1fr; }
body.tm-device-tablet .vl-look.is-feature {
    grid-column: span 2; grid-row: span 1; padding: 24px; min-height: 260px;
}
body.tm-device-tablet .vl-features { grid-template-columns: repeat(2, 1fr); }
body.tm-device-tablet .vl-insta { grid-template-columns: repeat(4, 1fr); }
body.tm-device-tablet .vl-section-head { flex-direction: column; align-items: flex-start; gap: 6px; }
body.tm-device-tablet .vl-section-head > div { width: 100%; }
body.tm-device-tablet .vl-section-more { align-self: flex-end; }
body.tm-device-tablet .vl-hero { height: clamp(360px, 50vh, 500px); margin-bottom: 24px; }
body.tm-device-tablet .vl-nav-list {
    flex-wrap: nowrap; overflow-x: auto;
    justify-content: flex-start; padding: 12px 4px;
    scrollbar-width: none;
}
body.tm-device-tablet .vl-nav-list::-webkit-scrollbar { display: none; }

/* ── MOBILE frame (420px-equivalent) — full mobile layout ────────── */
body.tm-device-mobile { font-size: 15px; }
body.tm-device-mobile .vl-container { padding: 0 14px; }
body.tm-device-mobile .vl-section { padding: 24px 0; }

/* Utility bar */
body.tm-device-mobile .vl-utility-row { gap: 10px; padding: 6px 0; }
body.tm-device-mobile .vl-utility-msg { font-size: 11.5px; }
body.tm-device-mobile .vl-utility-social a { width: 20px; height: 20px; font-size: 10px; }

/* Header — search drops to second row */
body.tm-device-mobile .vl-header-row {
    flex-wrap: wrap; padding: 10px 0; row-gap: 10px;
}
body.tm-device-mobile .vl-search {
    order: 99; flex: 1 1 100%; max-width: none;
    padding: 8px 14px;
}
body.tm-device-mobile .vl-logo { font-size: 19px; letter-spacing: .06em; }
body.tm-device-mobile .vl-icon-btn { width: 34px; height: 34px; }

/* Nav — single row with horizontal scroll */
body.tm-device-mobile .vl-nav-list {
    flex-wrap: nowrap; overflow-x: auto;
    justify-content: flex-start;
    gap: 20px; padding: 10px 4px;
    scrollbar-width: none;
    white-space: nowrap;
}
body.tm-device-mobile .vl-nav-list::-webkit-scrollbar { display: none; }
body.tm-device-mobile .vl-nav-list li { flex-shrink: 0; }

/* Hero */
body.tm-device-mobile .vl-hero {
    height: auto; min-height: 420px; margin-bottom: 16px;
    display: flex; flex-direction: column;
}
body.tm-device-mobile .vl-hero-slide { display: flex; align-items: flex-end; }
body.tm-device-mobile .vl-hero-slide::after,
body.tm-device-mobile[dir="rtl"] .vl-hero-slide::after,
html[dir="rtl"] body.tm-device-mobile .vl-hero-slide::after {
    background: linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.0) 30%, rgba(255,255,255,.85) 100%);
}
html[data-vl-mode="dark"] body.tm-device-mobile .vl-hero-slide::after {
    background: linear-gradient(180deg, rgba(10,10,11,.0) 0%, rgba(10,10,11,.3) 40%, rgba(10,10,11,.92) 100%);
}
body.tm-device-mobile .vl-hero-content {
    align-self: flex-end; margin-bottom: 24px;
    padding: 0 6%; max-width: 100%; text-align: center;
}
body.tm-device-mobile .vl-hero-title { font-size: clamp(28px, 10vw, 44px); margin-bottom: 12px; }
body.tm-device-mobile .vl-hero-sub { font-size: 13.5px; margin-bottom: 20px; }
body.tm-device-mobile .vl-hero-actions {
    justify-content: center; flex-direction: column;
    align-items: stretch; gap: 10px;
}
body.tm-device-mobile .vl-hero-actions .vl-btn { width: 100%; padding: 12px 22px; font-size: 12.5px; }
body.tm-device-mobile .vl-hero-nav { width: 38px; height: 38px; }
body.tm-device-mobile .vl-hero-nav.is-prev { inset-inline-start: 10px; }
body.tm-device-mobile .vl-hero-nav.is-next { inset-inline-end: 10px; }

/* Section heading */
body.tm-device-mobile .vl-section-head {
    flex-direction: column; align-items: flex-start; gap: 6px;
}
body.tm-device-mobile .vl-section-head > div { width: 100%; }
body.tm-device-mobile .vl-section-more { align-self: flex-end; }
body.tm-device-mobile .vl-section-title { font-size: clamp(22px, 6vw, 28px); }

/* Categories — 2 cols */
body.tm-device-mobile .vl-cats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
body.tm-device-mobile .vl-cat-meta { padding: 10px; }
body.tm-device-mobile .vl-cat-name { font-size: 15px; }

/* Products: side-promo stacks on top, grid becomes 2 cols */
body.tm-device-mobile .vl-products-wrap { grid-template-columns: 1fr; gap: 18px; }
body.tm-device-mobile .vl-side-promo { padding: 20px; gap: 14px; }
body.tm-device-mobile .vl-side-promo-title { font-size: 20px; }
body.tm-device-mobile .vl-side-promo-timer { flex-wrap: wrap; }
body.tm-device-mobile .vl-timer-cell { padding: 8px 10px; min-width: 44px; }
body.tm-device-mobile .vl-timer-cell strong { font-size: 16px; }
body.tm-device-mobile .vl-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
body.tm-device-mobile .vl-prod-meta { padding: 10px 4px; }
body.tm-device-mobile .vl-prod-name { font-size: 13px; }
body.tm-device-mobile .vl-prod-price { font-size: 13px; }
body.tm-device-mobile .vl-prod-price-old { font-size: 11px; }

/* Lookbook — single column on mobile, feature card stacks first */
body.tm-device-mobile .vl-lookbook {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(260px, auto);
}
body.tm-device-mobile .vl-look.is-feature {
    grid-column: span 1; grid-row: span 1;
    padding: 20px; min-height: 240px;
    aspect-ratio: auto;
}
body.tm-device-mobile .vl-look-title { font-size: clamp(22px, 6vw, 28px); }
body.tm-device-mobile .vl-look-tag { font-size: 10.5px; padding: 5px 10px; }

/* Brands — gap shrinks, smaller font */
body.tm-device-mobile .vl-brands { gap: 12px; padding: 18px 0; }
body.tm-device-mobile .vl-brand { font-size: 13px; }

/* Insta — 4 cols on mobile */
body.tm-device-mobile .vl-insta { grid-template-columns: repeat(4, 1fr); gap: 4px; }

/* Features — single column with stacked icon+text */
body.tm-device-mobile .vl-features { grid-template-columns: 1fr; gap: 14px; padding: 24px 0; }
body.tm-device-mobile .vl-feature {
    flex-direction: row; align-items: center; gap: 10px;
}
body.tm-device-mobile .vl-feature-ico { width: 38px; height: 38px; font-size: 14px; }
body.tm-device-mobile .vl-feature-meta strong { font-size: 12.5px; }
body.tm-device-mobile .vl-feature-meta small { font-size: 11px; }

/* Footer — single column */
body.tm-device-mobile .vl-footer { padding: 40px 0 20px; margin-top: 40px; }
body.tm-device-mobile .vl-footer-grid {
    grid-template-columns: 1fr; gap: 28px; margin-bottom: 28px;
}
body.tm-device-mobile .vl-footer-col h4 { margin-bottom: 12px; }
body.tm-device-mobile .vl-footer-col ul { gap: 8px; }
body.tm-device-mobile .vl-footer-bottom {
    justify-content: center; text-align: center; flex-direction: column; gap: 8px;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE — Velora design system
   Premium fashion product page styling. Uses Velora's tokens
   (--vl-text, --vl-accent, --vl-line, etc.) for consistency.
   ═══════════════════════════════════════════════════════════ */
.vl-detail-wrap { padding: 32px 18px 64px; }

/* Breadcrumbs */
.vl-crumbs {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px;
    color: var(--vl-text-2, #6b7280);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.vl-crumbs a {
    color: var(--vl-text-2, #6b7280);
    text-decoration: none;
    transition: color .15s;
}
.vl-crumbs a:hover { color: var(--vl-text, #0a0a0b); }
.vl-crumbs i { font-size: 9px; color: var(--vl-text-3, #999); }
.vl-crumbs .is-current {
    color: var(--vl-text, #0a0a0b);
    font-weight: 600;
}

/* Main detail layout — 2 columns desktop, stack mobile */
.vl-detail {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px;
    margin-bottom: 56px;
}
@media (max-width: 900px) {
    .vl-detail { grid-template-columns: 1fr; gap: 32px; }
}

/* Gallery */
.vl-gallery { display: flex; flex-direction: column; gap: 12px; }
.vl-gallery-main {
    width: 100%;
    aspect-ratio: 4/5;
    background: var(--vl-bg-2, #f8f9fa);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 18px rgba(15,23,42,.05);
}
.vl-gallery-main-img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.vl-gallery-main:hover .vl-gallery-main-img { transform: scale(1.03); }
.vl-gallery-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--vl-text-3, #999);
    font-size: 48px;
}
.vl-gallery-badge {
    position: absolute;
    top: 16px; inset-inline-start: 16px;
    background: var(--vl-text, #0a0a0b);
    color: #fff;
    font-size: 12px; font-weight: 800;
    padding: 6px 12px;
    border-radius: 999px;
    z-index: 2;
    letter-spacing: .03em;
}
.vl-gallery-fav {
    position: absolute;
    top: 16px; inset-inline-end: 16px;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.96);
    border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: var(--vl-text, #0a0a0b);
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
    transition: all .2s;
    z-index: 2;
}
.vl-gallery-fav:hover { transform: scale(1.08); background: var(--vl-card, #fff); }
.vl-gallery-fav.is-on { color: #ef4444; }
.vl-gallery-fav.is-on i { font-weight: 900; }
.vl-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.vl-gallery-thumb {
    aspect-ratio: 1;
    background: var(--vl-bg-2, #f8f9fa);
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    transition: border-color .15s, transform .15s;
}
.vl-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vl-gallery-thumb:hover { transform: translateY(-2px); }
.vl-gallery-thumb.is-active { border-color: var(--vl-text, #0a0a0b); }

/* Info column */
.vl-detail-info { display: flex; flex-direction: column; }
.vl-detail-meta {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.vl-detail-stock {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px;
    color: var(--vl-success, #10b981);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vl-detail-stock i { font-size: 8px; }
.vl-detail-cat-pill {
    display: inline-flex; align-items: center;
    padding: 4px 12px;
    background: var(--vl-bg-2, #f8f9fa);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--vl-text-2, #6b7280);
    font-weight: 600;
}
.vl-detail-name {
    font-family: var(--vl-heading-font, 'Cairo','Playfair Display', Georgia, serif);
    font-size: 32px;
    font-weight: 800;
    color: var(--vl-text, #0a0a0b);
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: -.01em;
}
.vl-detail-rating {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--vl-text-2, #6b7280);
}
.vl-detail-rating .stars { color: #f59e0b; font-size: 13px; letter-spacing: 2px; }
.vl-detail-rating strong { color: var(--vl-text, #0a0a0b); font-weight: 700; margin-inline-start: 4px; }
.vl-detail-rating small { color: var(--vl-text-3, #999); font-size: 12px; }
.vl-detail-price-block {
    padding: 18px 0;
    margin-bottom: 18px;
    border-top: 1px solid var(--vl-line, rgba(0,0,0,.08));
    border-bottom: 1px solid var(--vl-line, rgba(0,0,0,.08));
}
.vl-detail-price-row {
    display: flex; align-items: baseline; gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.vl-detail-price {
    font-size: 32px;
    font-weight: 800;
    color: var(--vl-text, #0a0a0b);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.vl-detail-price-old {
    font-size: 17px;
    color: var(--vl-text-3, #999);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
.vl-detail-price-save {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: rgba(16,185,129,.12);
    color: var(--vl-success, #10b981);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}
.vl-detail-price-save i { font-size: 9px; }
.vl-detail-tax { font-size: 12px; color: var(--vl-text-3, #999); }
.vl-detail-tagline {
    font-size: 14.5px;
    color: var(--vl-text-2, #6b7280);
    line-height: 1.6;
    margin: 0 0 20px;
}

/* Add-to-cart form */
.vl-detail-form { margin-bottom: 24px; }
.vl-detail-qty-row {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.vl-detail-qty-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--vl-text-2, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 0;
}
.vl-qty {
    display: inline-flex; align-items: stretch;
    border: 1.5px solid var(--vl-line, rgba(0,0,0,.10));
    border-radius: 999px;
    overflow: hidden;
    background: var(--vl-card, #fff);
}
.vl-qty button {
    width: 38px; height: 38px;
    border: 0;
    background: transparent;
    color: var(--vl-text, #0a0a0b);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.vl-qty button:hover { background: var(--vl-bg-2, #f8f9fa); }
.vl-qty input {
    width: 44px;
    border: 0;
    text-align: center;
    background: transparent;
    color: var(--vl-text, #0a0a0b);
    font-size: 14.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    outline: none;
}
.vl-detail-stock-text { font-size: 12.5px; color: var(--vl-text-3, #999); }
.vl-detail-stock-text b { color: var(--vl-text, #0a0a0b); font-weight: 700; }
.vl-detail-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.vl-detail-cta-add,
.vl-detail-cta-buy {
    padding: 14px 22px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
}
.vl-detail-cta-add i,
.vl-detail-cta-buy i { font-size: 14px; }
@media (max-width: 520px) {
    .vl-detail-cta-row { grid-template-columns: 1fr; }
}

/* Trust badges */
.vl-detail-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    padding: 18px;
    background: var(--vl-bg-2, #f8f9fa);
    border-radius: 14px;
    margin-top: 8px;
}
.vl-trust-item {
    display: flex; align-items: flex-start; gap: 12px;
}
.vl-trust-item > i {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--vl-card, #fff);
    color: var(--vl-accent, #d4a574);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.vl-trust-item > div { min-width: 0; }
.vl-trust-item strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vl-text, #0a0a0b);
    line-height: 1.2;
    margin-bottom: 2px;
}
.vl-trust-item small {
    font-size: 11px;
    color: var(--vl-text-3, #999);
    line-height: 1.4;
}
@media (max-width: 720px) {
    .vl-detail-trust { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
}

/* Description section */
.vl-detail-desc-content {
    font-size: 14.5px;
    color: var(--vl-text-2, #4a4f57);
    line-height: 1.75;
    max-width: 800px;
}
.vl-detail-desc-content p { margin: 0 0 14px; }
.vl-detail-desc-content ul, .vl-detail-desc-content ol { padding-inline-start: 24px; margin: 0 0 14px; }
.vl-detail-desc-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 8px 0; }

/* Dark mode polish */
html[data-vl-mode="dark"] .vl-detail-name,
html[data-vl-mode="dark"] .vl-detail-price,
html[data-vl-mode="dark"] .vl-crumbs .is-current,
html[data-vl-mode="dark"] .vl-detail-rating strong,
html[data-vl-mode="dark"] .vl-qty button,
html[data-vl-mode="dark"] .vl-qty input,
html[data-vl-mode="dark"] .vl-trust-item strong,
html[data-vl-mode="dark"] .vl-detail-stock-text b { color: #f4f4f5; }
html[data-vl-mode="dark"] .vl-detail-trust { background: rgba(255,255,255,.04); }
html[data-vl-mode="dark"] .vl-trust-item > i { background: rgba(255,255,255,.08); }
html[data-vl-mode="dark"] .vl-detail-cat-pill { background: rgba(255,255,255,.06); color: #d4d4d8; }
html[data-vl-mode="dark"] .vl-qty { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
html[data-vl-mode="dark"] .vl-gallery-main,
html[data-vl-mode="dark"] .vl-gallery-thumb { background: rgba(255,255,255,.04); }

/* ═══════════════════════════════════════════════════════════
   LANGUAGE DROPDOWN — multi-language stores only
   Lives in the header tools row alongside mode/cart/wishlist.
   Trigger is a compact "AR/EN" pill; clicking opens a floating
   menu with checkmark on the current locale. No flags — text only.
   ═══════════════════════════════════════════════════════════ */
.vl-lang-dd { position: relative; }
.vl-lang-trigger { cursor: pointer; }
.vl-lang-trigger .fa-chevron-down { transition: transform .2s ease; }
.vl-lang-dd.is-open .vl-lang-trigger .fa-chevron-down { transform: rotate(180deg); }

/* Header-row variant — the trigger reads "AR" / "EN" so it
   matches the size + weight of the sibling icon buttons. */
.vl-lang-dd--header .vl-lang-trigger {
    width: auto;
    min-width: 46px;
    height: 38px;
    padding: 0 10px;
    border-radius: 999px;
    gap: 2px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
}
.vl-lang-trigger-text { font-variant-numeric: tabular-nums; }

.vl-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline-end: 0;
    min-width: 140px;
    background: var(--vl-card, #fff);
    border: 1px solid var(--vl-line, rgba(0,0,0,.08));
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15,23,42,.12);
    padding: 6px;
    display: none;
    z-index: 50;
}
.vl-lang-dd.is-open .vl-lang-menu { display: block; animation: vlLangFade .15s ease-out; }
@keyframes vlLangFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.vl-lang-item {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    color: var(--vl-text, #0a0a0b);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    border-radius: 7px;
    cursor: pointer;
    text-align: start;
    transition: background .12s, color .12s;
}
.vl-lang-item:hover { background: var(--vl-bg-2, #f8f9fa); }
.vl-lang-item.is-on {
    color: var(--vl-accent, #d4a574);
    background: rgba(212,165,116,.08);
}
.vl-lang-item.is-on i { font-size: 10px; }

/* Dark mode polish */
html[data-vl-mode="dark"] .vl-lang-menu {
    background: #1a1a1d;
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 14px 36px rgba(0,0,0,.55);
}
html[data-vl-mode="dark"] .vl-lang-item { color: #f4f4f5; }
html[data-vl-mode="dark"] .vl-lang-item:hover { background: rgba(255,255,255,.06); }
html[data-vl-mode="dark"] .vl-lang-item.is-on { background: rgba(212,165,116,.14); }

/* ═══════════════════════════════════════════════════════════
   AUTH MODAL — guest login / register dialog
   Premium centered modal with tabs (login | register), social
   sign-in button, and password-eye toggle. Locked-down RTL.
   ═══════════════════════════════════════════════════════════ */
.vl-auth-overlay {
    position: fixed; inset: 0;
    background: rgba(10,10,11,.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}
.vl-auth-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.vl-auth-modal {
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--vl-card, #fff);
    border-radius: 18px;
    padding: 32px 28px 26px;
    position: relative;
    box-shadow: 0 30px 70px rgba(0,0,0,.30);
    transform: translateY(14px) scale(.97);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}
.vl-auth-overlay.is-open .vl-auth-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.vl-auth-close {
    position: absolute;
    top: 14px; inset-inline-end: 14px;
    width: 34px; height: 34px;
    border: 0;
    background: var(--vl-bg-2, #f8f9fa);
    color: var(--vl-text-2, #6b7280);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: all .15s;
}
.vl-auth-close:hover { background: var(--vl-text, #0a0a0b); color: #fff; transform: rotate(90deg); }

.vl-auth-head { text-align: center; margin-bottom: 22px; }
.vl-auth-logo {
    width: 60px; height: 60px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--vl-text, #0a0a0b), #2a2a2e);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.vl-auth-logo img { width: 100%; height: 100%; object-fit: cover; }
.vl-auth-logo-mark {
    color: #fff;
    font-family: var(--vl-heading-font, 'Cairo','Playfair Display', Georgia, serif);
    font-size: 26px; font-weight: 800;
}
.vl-auth-title {
    font-family: var(--vl-heading-font, 'Cairo','Playfair Display', Georgia, serif);
    font-size: 20px; font-weight: 800;
    color: var(--vl-text, #0a0a0b);
    margin: 0 0 6px;
    letter-spacing: -.01em;
}
.vl-auth-sub {
    font-size: 13px;
    color: var(--vl-text-2, #6b7280);
    margin: 0;
}

/* Tabs */
.vl-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--vl-bg-2, #f8f9fa);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 18px;
    position: relative;
}
.vl-auth-tab {
    background: transparent;
    border: 0;
    padding: 10px 12px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--vl-text-2, #6b7280);
    cursor: pointer;
    transition: all .18s ease;
}
.vl-auth-tab.is-active {
    background: var(--vl-card, #fff);
    color: var(--vl-text, #0a0a0b);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* Panes */
.vl-auth-pane { display: none; }
.vl-auth-pane.is-active { display: block; }

/* Alert */
.vl-auth-alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    border-radius: 9px;
    margin-bottom: 14px;
    font-size: 12.5px;
    line-height: 1.5;
}
.vl-auth-alert--err {
    background: rgba(239,68,68,.08);
    color: #b91c1c;
    border: 1px solid rgba(239,68,68,.18);
}
.vl-auth-alert i { font-size: 12px; margin-top: 2px; }

/* Fields */
.vl-auth-field { margin-bottom: 12px; }
.vl-auth-field label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--vl-text-2, #6b7280);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.vl-auth-input-wrap {
    position: relative;
    display: flex; align-items: center;
    background: var(--vl-bg-2, #f8f9fa);
    border: 1.5px solid transparent;
    border-radius: 10px;
    transition: border-color .15s, background .15s;
}
.vl-auth-input-wrap:focus-within {
    border-color: var(--vl-accent, #d4a574);
    background: var(--vl-card, #fff);
}
.vl-auth-input-wrap > i {
    width: 38px;
    text-align: center;
    color: var(--vl-text-3, #999);
    font-size: 14px;
    flex-shrink: 0;
}
.vl-auth-input-wrap input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 11px 6px 11px 0;
    font-family: inherit;
    font-size: 14px;
    color: var(--vl-text, #0a0a0b);
    outline: none;
    min-width: 0;
}
.vl-auth-input-wrap input::placeholder { color: var(--vl-text-3, #b5b8be); }

.vl-auth-eye {
    width: 38px; height: 38px;
    background: transparent;
    border: 0;
    color: var(--vl-text-3, #999);
    cursor: pointer;
    font-size: 13px;
    transition: color .15s;
}
.vl-auth-eye:hover { color: var(--vl-text, #0a0a0b); }

/* Submit */
.vl-auth-submit {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 18px;
    background: var(--vl-text, #0a0a0b);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 6px;
    transition: filter .15s, transform .15s, box-shadow .15s;
}
.vl-auth-submit:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(10,10,11,.18);
}
.vl-auth-submit i { font-size: 12px; }

/* Divider */
.vl-auth-divider {
    display: flex; align-items: center;
    margin: 18px 0 14px;
    color: var(--vl-text-3, #b5b8be);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.vl-auth-divider::before,
.vl-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--vl-line, rgba(0,0,0,.08));
}
.vl-auth-divider span { padding: 0 12px; }

/* Google sign-in */
.vl-auth-google {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 12px 18px;
    background: var(--vl-card, #fff);
    color: var(--vl-text, #0a0a0b);
    border: 1.5px solid var(--vl-line, rgba(0,0,0,.10));
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.vl-auth-google:hover { background: var(--vl-bg-2, #f8f9fa); transform: translateY(-1px); }

/* Terms footer */
.vl-auth-terms {
    margin: 14px 0 0;
    font-size: 11.5px;
    color: var(--vl-text-3, #999);
    text-align: center;
    line-height: 1.6;
}
.vl-auth-terms a {
    color: var(--vl-text, #0a0a0b);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Dark mode polish */
html[data-vl-mode="dark"] .vl-auth-modal {
    background: #1a1a1d;
    box-shadow: 0 30px 80px rgba(0,0,0,.65);
}
html[data-vl-mode="dark"] .vl-auth-title { color: #f4f4f5; }
html[data-vl-mode="dark"] .vl-auth-close { background: rgba(255,255,255,.06); color: #d4d4d8; }
html[data-vl-mode="dark"] .vl-auth-tabs { background: rgba(255,255,255,.05); }
html[data-vl-mode="dark"] .vl-auth-tab.is-active { background: #2a2a2e; color: #f4f4f5; }
html[data-vl-mode="dark"] .vl-auth-input-wrap { background: rgba(255,255,255,.05); }
html[data-vl-mode="dark"] .vl-auth-input-wrap:focus-within { background: rgba(255,255,255,.08); }
html[data-vl-mode="dark"] .vl-auth-input-wrap input { color: #f4f4f5; }
html[data-vl-mode="dark"] .vl-auth-submit { background: #f4f4f5; color: #0a0a0b; }
html[data-vl-mode="dark"] .vl-auth-google { background: rgba(255,255,255,.05); color: #f4f4f5; border-color: rgba(255,255,255,.10); }
html[data-vl-mode="dark"] .vl-auth-google:hover { background: rgba(255,255,255,.08); }
html[data-vl-mode="dark"] .vl-auth-terms a { color: #f4f4f5; }


/* ═══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION  (.vl-bottom-nav)
   Visible only below 768 px. Five tabs: Home · Categories ·
   Cart (badge) · Orders · Profile (or Sign-in).
═══════════════════════════════════════════════════════════ */
.vl-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  background: var(--vl-bg, #fff);
  border-top: 1px solid var(--vl-line, rgba(0,0,0,.07));
  box-shadow: 0 -4px 20px rgba(10,10,11,.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
html[data-vl-mode="dark"] .vl-bottom-nav {
  background: var(--vl-surface, #131316);
  border-top-color: var(--vl-line, rgba(255,255,255,.08));
  box-shadow: 0 -4px 24px rgba(0,0,0,.55);
}
.vl-bn-inner {
  display: flex;
  align-items: stretch;
  height: 58px;
}
.vl-bn-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 0 4px 2px;
  font-size: 10px; font-weight: 700; line-height: 1.2;
  color: var(--vl-text-muted, #71717a);
  text-decoration: none;
  transition: color .18s;
  cursor: pointer; background: none; border: none;
  font-family: inherit;
}
.vl-bn-item i { font-size: 19px; display: block; }
.vl-bn-item.is-active,
.vl-bn-item:hover { color: var(--primary, var(--vl-accent, #d4a574)); }
html[data-vl-mode="dark"] .vl-bn-item { color: rgba(255,255,255,.45); }
html[data-vl-mode="dark"] .vl-bn-item.is-active,
html[data-vl-mode="dark"] .vl-bn-item:hover { color: #fff; }
.vl-bn-ico-wrap { position: relative; display: inline-flex; }
.vl-bn-badge {
  position: absolute; top: -5px; inset-inline-end: -7px;
  min-width: 16px; height: 16px;
  background: var(--secondary, #EF4444); color: #fff;
  border-radius: 999px;
  font-size: 9px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px; line-height: 1;
}

@media (max-width: 768px) {
  .vl-bottom-nav { display: block; }
  body > main { padding-bottom: 68px; }
}