/* ============================================================
   VELVET — Beauty & Cosmetics store theme (code: velvet-store)
   "Ritual glow" · porcelain blush / mauve / champagne shimmer
   Fraunces soft display · Sora body · IBM Plex Sans Arabic
   Mobile-first · RTL-safe (logical properties) · reduced-motion aware
   ============================================================ */

:root {
    --vlv-blush: var(--tk-bg, #FAF4F2);
    --vlv-blush-2: color-mix(in srgb, var(--tk-bg, #FAF4F2), #000 4%);
    --vlv-porcelain: color-mix(in srgb, var(--tk-bg, #FAF4F2), #fff 70%);
    --vlv-mauve: var(--tk-primary, #9D5C72);
    --vlv-mauve-deep: color-mix(in srgb, var(--tk-primary, #9D5C72), #000 23%);
    --vlv-mauve-ink: color-mix(in srgb, var(--tk-primary, #9D5C72), #000 41%);
    --vlv-mauve-soft: rgb(from var(--tk-primary, #9D5C72) r g b / .10);
    --vlv-champagne: var(--tk-secondary, #D9B98C);
    --vlv-champagne-soft: color-mix(in srgb, var(--tk-secondary, #D9B98C), #fff 58%);
    --vlv-glint: rgb(from var(--tk-secondary, #D9B98C) r g b / .35);
    --vlv-ink: var(--tk-text, #3B3036);
    --vlv-muted: color-mix(in srgb, var(--tk-text, #3B3036), var(--tk-bg, #FAF4F2) 40%);
    --vlv-line: rgb(from var(--tk-primary, #9D5C72) r g b / .16);
    --vlv-line-soft: rgb(from var(--tk-primary, #9D5C72) r g b / .09);
    --vlv-ok: var(--tk-success, #5F8C6B);
    --vlv-danger: var(--tk-danger, #BC4749);
    --vlv-r: 20px;
    --vlv-r-sm: 14px;
    --vlv-r-pill: 999px;
    --vlv-shadow: 0 18px 40px -18px rgb(from var(--tk-primary, #9D5C72) r g b / .28);
    --vlv-shadow-sm: 0 8px 22px -10px rgb(from var(--tk-primary, #9D5C72) r g b / .22);
    --vlv-silk: linear-gradient(160deg, #FDF9F7 0%, #F8EDE7 38%, #F4E3D8 62%, var(--tk-bg, #FAF4F2) 100%);
    --vlv-font-d: var(--tk-font-header, 'Fraunces'), 'IBM Plex Sans Arabic', Georgia, serif;
    --vlv-font-b: var(--tk-font-content, 'Sora'), 'IBM Plex Sans Arabic', system-ui, sans-serif;
    --vlv-ease: cubic-bezier(.25, .46, .2, 1);
    --vlv-dock-h: 64px;
}

/* ---------------- Base ---------------- */
html { scroll-behavior: smooth; }

body {
    background: var(--vlv-blush) !important;
    color: var(--vlv-ink);
    font-family: var(--vlv-font-b);
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.65;
    letter-spacing: .005em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-block-end: calc(var(--vlv-dock-h) + 18px); /* mobile dock clearance */
}

body[dir="rtl"] { letter-spacing: 0; }
body[dir="rtl"] .vlv-display,
body[dir="rtl"] .vlv-hero-title,
body[dir="rtl"] .vlv-card-name,
body[dir="rtl"] .vlv-product-name,
body[dir="rtl"] .vlv-tile-name { font-family: 'IBM Plex Sans Arabic', var(--vlv-font-d); font-style: normal; }

/* RTL BiDi safety: isolate each headline/lead so any Latin fallback text (e.g.
   a not-yet-translated phrase) keeps its own punctuation run and the trailing
   period/comma never jumps to the visual start of the line. Harmless for AR. */
body[dir="rtl"] .vlv-hero-title,
body[dir="rtl"] .vlv-hero-sub,
body[dir="rtl"] .vlv-display,
body[dir="rtl"] .vlv-bundle-title,
body[dir="rtl"] .vlv-bundle-sub,
body[dir="rtl"] .vlv-product-name,
body[dir="rtl"] .vlv-product-sub,
body[dir="rtl"] .vlv-eyebrow,
body[dir="rtl"] .vlv-tile-name {
    unicode-bidi: isolate;
}

/* Prices: keep the currency symbol + number as one LTR run in RTL so e.g.
   "$28" never splits or flips around the strikethrough original price. */
body[dir="rtl"] .vlv-price,
body[dir="rtl"] .vlv-price-old,
body[dir="rtl"] .vlv-product-price,
body[dir="rtl"] .vlv-product-price-old,
body[dir="rtl"] .vlv-cart-item-price,
body[dir="rtl"] .vlv-cart-total-num {
    direction: ltr;
    unicode-bidi: isolate;
}
/* The product-page price row reads right-to-left, but each price token stays
   LTR (handled above); keep the sale + original aligned to the start. */
body[dir="rtl"] .vlv-product-pricing { justify-content: flex-start; }

::selection { background: var(--vlv-mauve); color: #fff; }
img { max-width: 100%; }
a { color: var(--vlv-mauve-deep); }
a:hover { color: var(--vlv-mauve); }

.vlv-page { min-height: 100vh; display: flex; flex-direction: column; }
.vlv-main { flex: 1 0 auto; }
.vlv-shell { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 18px; }
.vlv-section { margin-block: 38px; }

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

.vlv-loader { display: flex; gap: 10px; }
.vlv-loader span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: vlvPulse 1.2s var(--vlv-ease) infinite;
}
.vlv-loader span:nth-child(1) { background: var(--vlv-mauve); }
.vlv-loader span:nth-child(2) { background: var(--vlv-champagne); animation-delay: .15s; }
.vlv-loader span:nth-child(3) { background: var(--vlv-blush-2); border: 1px solid var(--vlv-line); animation-delay: .3s; }

@keyframes vlvPulse {
    0%, 100% { transform: scale(.7); opacity: .45; }
    50% { transform: scale(1); opacity: 1; }
}

/* ---------------- Topbar ---------------- */
.vlv-topbar {
    position: sticky;
    inset-block-start: 0;
    z-index: 1030;
    background: rgb(from var(--tk-bg, #FAF4F2) r g b / .9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-block-end: 1px solid var(--vlv-line-soft);
}

.vlv-topbar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 10px;
}

.vlv-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.vlv-brand-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--vlv-line), var(--vlv-shadow-sm);
}
.vlv-brand-name {
    font-family: var(--vlv-font-d);
    font-weight: 500;
    font-size: 17px;
    color: var(--vlv-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.vlv-cart-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--vlv-porcelain);
    color: var(--vlv-mauve-deep);
    border: 1px solid var(--vlv-line);
    box-shadow: var(--vlv-shadow-sm);
    cursor: pointer;
    transition: transform .45s var(--vlv-ease), box-shadow .45s var(--vlv-ease), background .45s var(--vlv-ease);
}
.vlv-cart-trigger:hover { transform: translateY(-2px); background: #fff; color: var(--vlv-mauve); }
.vlv-cart-trigger svg { width: 21px; height: 21px; }

.vlv-cart-badge {
    position: absolute;
    inset-block-start: -4px;
    inset-inline-end: -4px;
    min-width: 19px;
    height: 19px;
    padding-inline: 5px;
    border-radius: var(--vlv-r-pill);
    background: var(--vlv-mauve);
    color: #fff;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 19px;
    text-align: center;
    box-shadow: 0 2px 8px rgb(from var(--tk-primary, #9D5C72) r g b / .45);
}

/* ---------------- Session notes ---------------- */
.vlv-note {
    border-radius: var(--vlv-r-sm);
    padding: 12px 16px;
    margin-block: 14px;
    font-size: 13.5px;
    font-weight: 400;
    border: 1px solid var(--vlv-line);
    background: var(--vlv-porcelain);
}
.vlv-note-success { border-color: rgb(from var(--tk-success, #5F8C6B) r g b / .4); color: var(--vlv-ok); }
.vlv-note-danger { border-color: rgb(from var(--tk-danger, #BC4749) r g b / .4); color: var(--vlv-danger); }

/* ---------------- Hero — silk band + shimmer dots ---------------- */
.vlv-hero {
    position: relative;
    border-radius: var(--vlv-r);
    background: var(--vlv-silk);
    overflow: hidden;
    margin-block-start: 18px;
    padding: 26px 20px 22px;
    box-shadow: var(--vlv-shadow-sm);
    border: 1px solid rgba(255, 255, 255, .8);
}

/* sheen sweep */
.vlv-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 255, 255, .55) 46%,
        rgba(242, 228, 206, .4) 52%,
        transparent 68%);
    background-size: 280% 100%;
    background-position: 110% 0;
    animation: vlvSheen 15s var(--vlv-ease) infinite;
    pointer-events: none;
}

/* faint shimmer dots — hero only */
.vlv-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 1.4px at 12% 24%, var(--vlv-glint) 99%, transparent),
        radial-gradient(circle 1px at 28% 72%, var(--vlv-glint) 99%, transparent),
        radial-gradient(circle 1.6px at 46% 14%, var(--vlv-glint) 99%, transparent),
        radial-gradient(circle 1px at 64% 60%, var(--vlv-glint) 99%, transparent),
        radial-gradient(circle 1.4px at 78% 30%, var(--vlv-glint) 99%, transparent),
        radial-gradient(circle 1px at 90% 76%, var(--vlv-glint) 99%, transparent),
        radial-gradient(circle 1.2px at 56% 88%, var(--vlv-glint) 99%, transparent);
    opacity: .8;
    pointer-events: none;
}

@keyframes vlvSheen {
    0%, 55% { background-position: 110% 0; }
    85%, 100% { background-position: -40% 0; }
}

.vlv-hero-grid { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; }

.vlv-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.vlv-hero-title {
    font-family: var(--vlv-font-d);
    font-weight: 500;
    font-size: clamp(30px, 7.4vw, 46px);
    line-height: 1.12;
    letter-spacing: -.01em;
    color: var(--vlv-ink);
    margin: 0;
}
.vlv-hero-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--vlv-mauve);
}

.vlv-hero-sub {
    font-size: 14px;
    color: var(--vlv-muted);
    max-width: 46ch;
    margin: 0;
}

.vlv-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 4px; }

/* Cover rail — vanity mirror frame */
.vlv-hero-mirror {
    position: relative;
    border-radius: calc(var(--vlv-r) - 4px);
    padding: 7px;
    background: var(--vlv-porcelain);
    border: 1px solid var(--vlv-champagne-soft);
    box-shadow: var(--vlv-shadow);
}

.vlv-hero-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    border-radius: calc(var(--vlv-r) - 9px);
    scrollbar-width: none;
}
.vlv-hero-rail::-webkit-scrollbar { display: none; }

.vlv-hero-slide { flex: 0 0 100%; scroll-snap-align: center; aspect-ratio: 16 / 10; }
.vlv-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------- Swatch-dot trio (signature) ---------------- */
.vlv-dots { display: inline-flex; align-items: center; gap: 5px; }
.vlv-dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: block;
}
.vlv-dots i:nth-child(1) { background: var(--vlv-mauve); }
.vlv-dots i:nth-child(2) { background: var(--vlv-champagne); }
.vlv-dots i:nth-child(3) { background: var(--vlv-blush-2); border: 1px solid var(--vlv-line); }

.vlv-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--vlv-mauve);
}

/* ---------------- Section headers ---------------- */
.vlv-sechead { display: flex; flex-direction: column; gap: 7px; margin-block-end: 18px; }
.vlv-sechead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }

.vlv-display {
    font-family: var(--vlv-font-d);
    font-weight: 500;
    font-size: clamp(22px, 5vw, 30px);
    line-height: 1.18;
    color: var(--vlv-ink);
    margin: 0;
}
.vlv-display em { font-style: italic; font-weight: 400; color: var(--vlv-mauve); }

.vlv-sechead-link {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    color: var(--vlv-mauve-deep);
    border-block-end: 1px solid var(--vlv-line);
    padding-block-end: 2px;
    transition: color .45s var(--vlv-ease), border-color .45s var(--vlv-ease);
}
.vlv-sechead-link:hover { color: var(--vlv-mauve); border-color: var(--vlv-mauve); }

.vlv-count { flex-shrink: 0; font-size: 12.5px; color: var(--vlv-muted); }

/* ---------------- Buttons ---------------- */
.vlv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--vlv-r-pill);
    font-family: var(--vlv-font-b);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .45s var(--vlv-ease), box-shadow .45s var(--vlv-ease),
        background .45s var(--vlv-ease), color .45s var(--vlv-ease), border-color .45s var(--vlv-ease);
}
.vlv-btn:hover { transform: translateY(-2px); }
.vlv-btn-block { width: 100%; }

.vlv-btn-mauve {
    background: var(--vlv-mauve);
    color: #fff;
    box-shadow: 0 10px 24px -10px rgb(from var(--tk-primary, #9D5C72) r g b / .55);
}
.vlv-btn-mauve:hover { background: var(--vlv-mauve-deep); color: #fff; }

.vlv-btn-ghost {
    background: transparent;
    color: var(--vlv-mauve-deep);
    border-color: var(--vlv-line);
}
.vlv-btn-ghost:hover { border-color: var(--vlv-mauve); color: var(--vlv-mauve); background: var(--vlv-mauve-soft); }

.vlv-btn-pearl {
    background: var(--vlv-porcelain);
    color: var(--vlv-mauve-deep);
    border-color: var(--vlv-champagne-soft);
    box-shadow: var(--vlv-shadow-sm);
}
.vlv-btn-pearl:hover { color: var(--vlv-mauve); border-color: var(--vlv-champagne); }

/* ---------------- Trust strip — ingredient honesty ---------------- */
.vlv-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-block-start: 16px;
}

.vlv-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--vlv-r-pill);
    background: var(--vlv-porcelain);
    border: 1px solid var(--vlv-line-soft);
    font-size: 12px;
    font-weight: 400;
    color: var(--vlv-muted);
    box-shadow: var(--vlv-shadow-sm);
}
.vlv-trust-item i { color: var(--vlv-champagne); font-size: 15px; }

/* ---------------- Ritual rail — routine-step category tiles ---------------- */
.vlv-ritual-rail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-block: 6px 18px;
    padding-inline: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--vlv-line) transparent;
}
.vlv-ritual-rail::-webkit-scrollbar { height: 5px; }
.vlv-ritual-rail::-webkit-scrollbar-thumb { background: var(--vlv-line); border-radius: 4px; }

.vlv-tile {
    flex: 0 0 78%;
    max-width: 320px;
    scroll-snap-align: start;
    position: relative;
    display: block;
    border-radius: var(--vlv-r);
    overflow: hidden;
    text-decoration: none;
    background: var(--vlv-porcelain);
    box-shadow: var(--vlv-shadow-sm);
    border: 1px solid rgba(255, 255, 255, .85);
    transition: transform .5s var(--vlv-ease), box-shadow .5s var(--vlv-ease);
}
.vlv-tile:hover { transform: translateY(-4px); box-shadow: var(--vlv-shadow); }

.vlv-tile-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--vlv-ease);
}
.vlv-tile:hover .vlv-tile-img { transform: scale(1.04); }

.vlv-tile-cap { display: flex; flex-direction: column; gap: 3px; padding: 13px 16px 15px; }

.vlv-tile-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--vlv-mauve);
}
.vlv-tile-step .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--vlv-mauve-soft);
    border: 1px solid var(--vlv-line);
    font-family: var(--vlv-font-d);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}

.vlv-tile-name {
    font-family: var(--vlv-font-d);
    font-weight: 500;
    font-size: 19px;
    color: var(--vlv-ink);
    line-height: 1.2;
}

.vlv-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--vlv-muted);
    transition: color .45s var(--vlv-ease);
}
.vlv-tile-cta i { transition: transform .45s var(--vlv-ease); }
.vlv-tile:hover .vlv-tile-cta { color: var(--vlv-mauve); }
.vlv-tile:hover .vlv-tile-cta i { transform: translateX(3px); }
body[dir="rtl"] .vlv-tile:hover .vlv-tile-cta i { transform: translateX(-3px) scaleX(-1); }
body[dir="rtl"] .vlv-tile-cta i { transform: scaleX(-1); }

/* ---------------- Product cards ---------------- */
.vlv-prodrail {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-block: 6px 18px;
    padding-inline: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--vlv-line) transparent;
}
.vlv-prodrail::-webkit-scrollbar { height: 5px; }
.vlv-prodrail::-webkit-scrollbar-thumb { background: var(--vlv-line); border-radius: 4px; }
.vlv-prodrail .vlv-card { flex: 0 0 64%; max-width: 250px; scroll-snap-align: start; }

.vlv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.vlv-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--vlv-r);
    background: var(--vlv-porcelain);
    border: 1px solid rgba(255, 255, 255, .85);
    box-shadow: var(--vlv-shadow-sm);
    overflow: hidden;
    transition: transform .5s var(--vlv-ease), box-shadow .5s var(--vlv-ease);
}
.vlv-card:hover { transform: translateY(-4px); box-shadow: var(--vlv-shadow); }

.vlv-card-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--vlv-blush-2);
}

.vlv-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .6s var(--vlv-ease), transform .7s var(--vlv-ease);
}
.vlv-card-img-alt { opacity: 0; }
.vlv-card-media:hover .vlv-card-img-alt { opacity: 1; }
.vlv-card-media:hover .vlv-card-img:first-child { transform: scale(1.04); }

/* Shade chip — badge as a beauty swatch */
.vlv-shade {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 20px);
    padding: 5px 11px 5px 7px;
    border-radius: var(--vlv-r-pill);
    background: rgba(255, 252, 251, .92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid var(--vlv-line-soft);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--vlv-mauve-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vlv-shade-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.vlv-tone-0 { background: #B76E79; }
.vlv-tone-1 { background: #C98C5A; }
.vlv-tone-2 { background: #E8A6B8; }
.vlv-tone-3 { background: #7C4259; }
.vlv-tone-4 { background: var(--tk-secondary, #D9B98C); }
.vlv-tone-5 { background: var(--tk-primary, #9D5C72); }

.vlv-shade-out { color: var(--vlv-danger); }
.vlv-shade-out .vlv-shade-dot { background: var(--vlv-danger); opacity: .55; }

.vlv-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; flex: 1; }
.vlv-card-link { text-decoration: none; min-width: 0; }

.vlv-card-name {
    font-family: var(--vlv-font-d);
    font-weight: 500;
    font-size: 15.5px;
    line-height: 1.25;
    color: var(--vlv-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

.vlv-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-block-start: auto;
    padding-block-start: 8px;
}

.vlv-price-wrap { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.vlv-price {
    font-family: var(--vlv-font-d);
    font-weight: 600;
    font-size: 16px;
    color: var(--vlv-mauve-deep);
}
.vlv-price-old { font-size: 12px; color: var(--vlv-muted); }

.vlv-add {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--vlv-mauve);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 8px 18px -8px rgb(from var(--tk-primary, #9D5C72) r g b / .6);
    transition: transform .45s var(--vlv-ease), background .45s var(--vlv-ease), box-shadow .45s var(--vlv-ease);
}
.vlv-add:hover {
    transform: translateY(-2px);
    background: var(--vlv-mauve-deep);
    color: #fff;
    box-shadow: 0 0 0 4px var(--vlv-glint), 0 8px 18px -8px rgb(from var(--tk-primary, #9D5C72) r g b / .6);
}

/* ---------------- Bundle band — "Build your routine" ---------------- */
.vlv-bundle {
    position: relative;
    border-radius: var(--vlv-r);
    overflow: hidden;
    background: linear-gradient(150deg, var(--vlv-mauve) 0%, var(--vlv-mauve-deep) 60%, var(--vlv-mauve-ink) 100%);
    color: #fff;
    padding: 26px 20px;
    box-shadow: var(--vlv-shadow);
}
.vlv-bundle::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 1.4px at 16% 30%, rgba(242, 228, 206, .5) 99%, transparent),
        radial-gradient(circle 1px at 38% 78%, rgba(242, 228, 206, .4) 99%, transparent),
        radial-gradient(circle 1.5px at 62% 18%, rgba(242, 228, 206, .45) 99%, transparent),
        radial-gradient(circle 1px at 84% 64%, rgba(242, 228, 206, .4) 99%, transparent);
    pointer-events: none;
}

.vlv-bundle-in { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.vlv-bundle-head { display: flex; flex-direction: column; gap: 6px; }

.vlv-bundle-eyebrow {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--vlv-champagne-soft);
}

.vlv-bundle-title {
    font-family: var(--vlv-font-d);
    font-weight: 500;
    font-size: clamp(22px, 5.4vw, 30px);
    margin: 0;
    line-height: 1.15;
}
.vlv-bundle-title em { font-style: italic; font-weight: 400; color: var(--vlv-champagne-soft); }

.vlv-bundle-sub { font-size: 13px; color: rgba(255, 255, 255, .75); margin: 0; max-width: 52ch; }

.vlv-bundle-steps { display: flex; flex-direction: column; gap: 8px; }

.vlv-bundle-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--vlv-r-sm);
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .14);
    text-decoration: none;
    color: #fff;
    transition: background .45s var(--vlv-ease), transform .45s var(--vlv-ease);
}
.vlv-bundle-step:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); color: #fff; }

.vlv-bundle-num {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--vlv-champagne);
    color: var(--vlv-mauve-ink);
    font-family: var(--vlv-font-d);
    font-weight: 600;
    font-size: 14px;
}

.vlv-bundle-step-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.vlv-bundle-step-name b { font-weight: 500; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vlv-bundle-step-name span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--vlv-champagne-soft); }

.vlv-bundle-step > i { margin-inline-start: auto; color: var(--vlv-champagne-soft); }
body[dir="rtl"] .vlv-bundle-step > i { transform: scaleX(-1); }

.vlv-bundle-cta { align-self: flex-start; }

/* ---------------- Toolbar (search / price / sort) ---------------- */
.vlv-toolbar { display: flex; flex-direction: column; gap: 10px; margin-block-end: 18px; }

.vlv-input,
.vlv-select {
    width: 100%;
    border-radius: var(--vlv-r-pill);
    border: 1px solid var(--vlv-line);
    background: var(--vlv-porcelain);
    color: var(--vlv-ink);
    font-family: var(--vlv-font-b);
    font-size: 13px;
    font-weight: 300;
    padding: 12px 18px;
    outline: none;
    transition: border-color .45s var(--vlv-ease), box-shadow .45s var(--vlv-ease);
}
.vlv-input::placeholder { color: var(--vlv-muted); }
.vlv-input:focus,
.vlv-select:focus { border-color: var(--vlv-mauve); box-shadow: 0 0 0 3px var(--vlv-mauve-soft); }

.vlv-search { display: flex; gap: 10px; }
.vlv-search .vlv-input { flex: 1; min-width: 0; }
.vlv-search .vlv-btn { flex-shrink: 0; }

.vlv-pricef { display: flex; gap: 10px; }
.vlv-pricef .vlv-input { flex: 1 1 0; min-width: 64px; }
.vlv-pricef .vlv-btn { flex-shrink: 0; }

.vlv-select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--vlv-mauve) 50%),
        linear-gradient(135deg, var(--vlv-mauve) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-inline-end: 38px;
}
body[dir="rtl"] .vlv-select {
    background-position: 20px 50%, 15px 50%;
}

/* ---------------- Category chips (filtered view) ---------------- */
.vlv-cathead { margin-block-start: 18px; }

.vlv-chip-rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-block: 10px 14px;
    scrollbar-width: none;
}
.vlv-chip-rail::-webkit-scrollbar { display: none; }

.vlv-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px 7px 8px;
    border-radius: var(--vlv-r-pill);
    background: var(--vlv-porcelain);
    border: 1px solid var(--vlv-line);
    box-shadow: var(--vlv-shadow-sm);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--vlv-ink);
    transition: border-color .45s var(--vlv-ease), color .45s var(--vlv-ease), background .45s var(--vlv-ease);
}
.vlv-chip img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.vlv-chip:hover { border-color: var(--vlv-mauve); color: var(--vlv-mauve-deep); }
.vlv-chip.is-active {
    background: var(--vlv-mauve);
    border-color: var(--vlv-mauve);
    color: #fff;
}
.vlv-chip-all { padding-inline-start: 15px; }

/* ---------------- Pagination ---------------- */
.vlv-pagination { margin-block-start: 22px; }
.vlv-pagination .pagination { justify-content: center; gap: 6px; }
.vlv-pagination .page-link {
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vlv-line);
    background: var(--vlv-porcelain);
    color: var(--vlv-mauve-deep);
    font-size: 13px;
    padding: 0;
}
.vlv-pagination .page-item.active .page-link {
    background: var(--vlv-mauve);
    border-color: var(--vlv-mauve);
    color: #fff;
}
.vlv-pagination .page-item.disabled .page-link { color: var(--vlv-muted); background: transparent; }

/* ---------------- Empty states (CSS compact-mirror illustration) ---------------- */
.vlv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 44px 20px;
}

.vlv-empty-mark {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 2px solid var(--vlv-line);
    background:
        radial-gradient(circle at 50% 42%, var(--vlv-champagne-soft) 0 26%, transparent 27%),
        var(--vlv-porcelain);
    box-shadow: var(--vlv-shadow-sm);
}
.vlv-empty-mark::after {
    content: "";
    position: absolute;
    inset-block-end: -14px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 10px;
    border-radius: 0 0 12px 12px;
    background: var(--vlv-blush-2);
    border: 1px solid var(--vlv-line);
    border-block-start: none;
}

.vlv-empty-title { font-family: var(--vlv-font-d); font-weight: 500; font-size: 19px; color: var(--vlv-ink); margin: 8px 0 0; }
.vlv-empty-sub { font-size: 13px; color: var(--vlv-muted); margin: 0; max-width: 40ch; }

/* ---------------- Cart drawer ---------------- */
.vlv-drawer {
    background: var(--vlv-blush) !important;
    border-inline-start: 1px solid var(--vlv-line-soft);
}
.vlv-drawer .offcanvas-header { border-block-end: 1px solid var(--vlv-line-soft); padding: 18px 20px; }
.vlv-drawer-title { font-family: var(--vlv-font-d); font-weight: 500; font-size: 20px; color: var(--vlv-ink); }
.vlv-drawer .offcanvas-footer { border-block-start: 1px solid var(--vlv-line-soft); padding: 16px 20px; }

.vlv-cart-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--vlv-porcelain);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: var(--vlv-r-sm);
    box-shadow: var(--vlv-shadow-sm);
    padding: 10px;
    margin-block-end: 10px;
}

.vlv-cart-item-img {
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: calc(var(--vlv-r-sm) - 4px);
    object-fit: cover;
    background: var(--vlv-blush-2);
}

.vlv-cart-item-info { flex: 1; min-width: 0; }
.vlv-cart-item-name {
    font-family: var(--vlv-font-d);
    font-weight: 500;
    font-size: 14.5px;
    color: var(--vlv-ink);
    margin: 0 0 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vlv-cart-item-sub {
    display: block;
    font-size: 11px;
    color: var(--vlv-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vlv-cart-item-price {
    font-family: var(--vlv-font-d);
    font-weight: 600;
    font-size: 14px;
    color: var(--vlv-mauve-deep);
    margin: 3px 0 7px;
}

.vlv-cart-item-actions { display: flex; align-items: center; gap: 6px; }

.vlv-qty-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--vlv-line);
    background: var(--vlv-porcelain);
    color: var(--vlv-mauve-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color .4s var(--vlv-ease), color .4s var(--vlv-ease), background .4s var(--vlv-ease);
}
.vlv-qty-btn svg { width: 15px; height: 15px; }
.vlv-qty-btn:hover { border-color: var(--vlv-mauve); color: var(--vlv-mauve); }
.vlv-qty-remove { margin-inline-start: auto; color: var(--vlv-danger); border-color: rgb(from var(--tk-danger, #BC4749) r g b / .3); }
.vlv-qty-remove:hover { background: rgb(from var(--tk-danger, #BC4749) r g b / .08); border-color: var(--vlv-danger); color: var(--vlv-danger); }

.vlv-qty-num {
    min-width: 26px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--vlv-ink);
}

.vlv-cart-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 16px; text-align: center; }
.vlv-cart-empty-text { font-size: 14px; color: var(--vlv-muted); margin: 0; }

.vlv-cart-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-family: var(--vlv-font-b);
    font-weight: 400;
    font-size: 14px;
    color: var(--vlv-muted);
    margin: 0 0 12px;
}
.vlv-cart-total-num { font-family: var(--vlv-font-d); font-weight: 600; font-size: 20px; color: var(--vlv-mauve-deep); }

.vlv-place-order {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 20px;
    border-radius: var(--vlv-r-pill);
    background: var(--vlv-mauve);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 12px 26px -10px rgb(from var(--tk-primary, #9D5C72) r g b / .6);
    transition: background .45s var(--vlv-ease), transform .45s var(--vlv-ease), box-shadow .45s var(--vlv-ease);
}
.vlv-place-order:hover {
    background: var(--vlv-mauve-deep);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0 0 4px var(--vlv-glint), 0 12px 26px -10px rgb(from var(--tk-primary, #9D5C72) r g b / .6);
}
.vlv-place-order i { font-size: 18px; }

/* ---------------- Modals ---------------- */
.vlv-modal .modal-content {
    border-radius: var(--vlv-r);
    border: 1px solid var(--vlv-champagne-soft);
    background: var(--vlv-blush);
    box-shadow: var(--vlv-shadow);
    position: relative; /* X inside the box */
}
/* Comfortable inner padding so header text + close (X) never glue to the
   rounded corner — founder remark: nothing touches the container edge. */
.vlv-modal .modal-header {
    border-block-end: 1px solid var(--vlv-line-soft);
    padding: 18px 20px;
    gap: 12px;
}
.vlv-modal .modal-title { font-family: var(--vlv-font-d); font-weight: 500; color: var(--vlv-ink); }
.vlv-modal-sub { color: var(--vlv-muted); font-size: 12px; }
/* The close button keeps a relative spot inside the padded header (no negative
   offsets) and gains its own tap padding so it sits comfortably in the box. */
.vlv-modal .modal-header .btn-close {
    position: relative;
    margin: 0;
    flex-shrink: 0;
    padding: 10px;
    border-radius: 50%;
}
.vlv-modal .modal-body { padding: 20px; }
.vlv-modal .modal-footer { border-block-start: 1px solid var(--vlv-line-soft); padding: 16px 20px; gap: 10px; }

.vlv-modal .form-label { font-size: 12.5px; font-weight: 500; color: var(--vlv-ink); }
.vlv-modal .form-control,
.vlv-modal textarea {
    border-radius: var(--vlv-r-sm) !important;
    border: 1px solid var(--vlv-line);
    background: var(--vlv-porcelain);
    color: var(--vlv-ink);
    font-family: var(--vlv-font-b);
}
.vlv-modal .form-control:focus,
.vlv-modal textarea:focus {
    border-color: var(--vlv-mauve);
    box-shadow: 0 0 0 3px var(--vlv-mauve-soft);
}
.vlv-modal .form-check-input:checked { background-color: var(--vlv-mauve); border-color: var(--vlv-mauve); }

/* ---------------- Footer ---------------- */
.vlv-footer {
    margin-block-start: 48px;
    background: var(--vlv-mauve-ink);
    color: #EFE2E7;
    border-radius: var(--vlv-r) var(--vlv-r) 0 0;
    padding-block: 34px 26px;
}

.vlv-footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding-block-end: 20px;
    border-block-end: 1px solid rgba(239, 226, 231, .14);
}

.vlv-footer-wordmark {
    font-family: var(--vlv-font-d);
    font-style: italic;
    font-weight: 500;
    font-size: 23px;
    color: #fff;
}
.vlv-footer-tag { font-size: 12.5px; color: rgba(239, 226, 231, .65); margin: 4px 0 0; }

.vlv-social { display: flex; justify-content: center; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.vlv-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #EFE2E7;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 17px;
    transition: background .45s var(--vlv-ease), color .45s var(--vlv-ease), transform .45s var(--vlv-ease);
}
.vlv-social a:hover { background: var(--vlv-champagne); color: var(--vlv-mauve-ink); transform: translateY(-2px); }

.vlv-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
    padding-block: 16px;
}
.vlv-footer-links a {
    font-size: 12px;
    color: rgba(239, 226, 231, .7);
    text-decoration: none;
    transition: color .4s var(--vlv-ease);
}
.vlv-footer-links a:hover { color: var(--vlv-champagne); }

.vlv-footer-base {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    font-size: 11.5px;
    color: rgba(239, 226, 231, .55);
}
.vlv-footer-base a { color: rgba(239, 226, 231, .85); text-decoration: none; }
.vlv-footer-base a:hover { color: var(--vlv-champagne); }
.vlv-footer-base i { color: var(--vlv-champagne); }

/* ---------------- Mobile dock ---------------- */
.vlv-dock {
    position: fixed;
    inset-block-end: 12px;
    inset-inline: 14px;
    z-index: 1029;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 4px;
    height: var(--vlv-dock-h);
    max-width: 420px;
    margin-inline: auto;
    background: rgba(255, 252, 251, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--vlv-champagne-soft);
    border-radius: var(--vlv-r-pill);
    box-shadow: var(--vlv-shadow);
    padding-inline: 8px;
}

.vlv-dock a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--vlv-muted);
    font-size: 10.5px;
    font-weight: 500;
    border-radius: var(--vlv-r-pill);
    transition: color .4s var(--vlv-ease);
}
.vlv-dock a i { font-size: 21px; }
.vlv-dock a:hover,
.vlv-dock a.is-active { color: var(--vlv-mauve); }

/* ---------------- Single product ---------------- */
.vlv-product { margin-block-start: 18px; }

.vlv-gallery { display: flex; flex-direction: column; gap: 10px; }

.vlv-gallery-main {
    display: block;
    border-radius: var(--vlv-r);
    overflow: hidden;
    background: var(--vlv-porcelain);
    border: 1px solid var(--vlv-champagne-soft);
    box-shadow: var(--vlv-shadow);
    padding: 7px;
}
.vlv-gallery-main img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: calc(var(--vlv-r) - 9px);
    display: block;
}

.vlv-thumbrail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-block: 2px 8px;
    scrollbar-width: none;
}
.vlv-thumbrail::-webkit-scrollbar { display: none; }

.vlv-thumb {
    flex: 0 0 72px;
    border-radius: var(--vlv-r-sm);
    overflow: hidden;
    border: 1px solid var(--vlv-line-soft);
    background: var(--vlv-porcelain);
    cursor: pointer;
    transition: border-color .4s var(--vlv-ease), transform .4s var(--vlv-ease);
}
.vlv-thumb img { width: 72px; height: 72px; object-fit: cover; display: block; }
.vlv-thumb:hover { border-color: var(--vlv-mauve); transform: translateY(-2px); }

.vlv-product-info { display: flex; flex-direction: column; gap: 10px; padding-block-start: 18px; }

.vlv-product-name {
    font-family: var(--vlv-font-d);
    font-weight: 500;
    font-size: clamp(24px, 5.6vw, 32px);
    line-height: 1.16;
    color: var(--vlv-ink);
    margin: 0;
}

.vlv-product-sub { font-size: 13.5px; color: var(--vlv-muted); margin: 0; }

.vlv-product-pricing { display: flex; align-items: baseline; gap: 10px; }
.vlv-product-price {
    font-family: var(--vlv-font-d);
    font-weight: 600;
    font-size: 26px;
    color: var(--vlv-mauve-deep);
}
.vlv-product-price-old { font-size: 14px; color: var(--vlv-muted); }

.vlv-chipline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vlv-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--vlv-r-pill);
    background: var(--vlv-porcelain);
    border: 1px solid var(--vlv-line);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--vlv-mauve-ink);
}
.vlv-pill .vlv-shade-dot { width: 9px; height: 9px; }
.vlv-pill-ok { color: var(--vlv-ok); border-color: rgb(from var(--tk-success, #5F8C6B) r g b / .35); }
.vlv-pill-out { color: var(--vlv-danger); border-color: rgb(from var(--tk-danger, #BC4749) r g b / .35); }

.vlv-product-desc { font-size: 13.5px; color: var(--vlv-ink); }
.vlv-product-desc p { margin-block-end: .6em; }

/* keep share include harmonised */
.product-share-card .share-title { font-family: var(--vlv-font-d); font-weight: 500; color: var(--vlv-ink); }
.product-share-card .share-icon { border-color: var(--vlv-line); background: var(--vlv-porcelain); }

/* ---------------- Categories page ---------------- */
.vlv-catgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.vlv-catgrid .vlv-tile { flex: none; max-width: none; }
.vlv-catgrid .vlv-tile-img { aspect-ratio: 1 / 1; }

/* ---------------- Policy page ---------------- */
.vlv-policy {
    background: var(--vlv-porcelain);
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: var(--vlv-r);
    box-shadow: var(--vlv-shadow-sm);
    padding: 22px 20px;
    margin-block-start: 22px;
}
.vlv-policy-title {
    font-family: var(--vlv-font-d);
    font-weight: 500;
    font-size: clamp(22px, 5vw, 28px);
    color: var(--vlv-ink);
    margin: 0 0 6px;
}
.vlv-policy-rule {
    width: 64px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--vlv-mauve), var(--vlv-champagne));
    margin-block-end: 18px;
}
.vlv-policy-body { font-size: 13.5px; color: var(--vlv-ink); overflow-wrap: break-word; }
.vlv-policy-body a { color: var(--vlv-mauve); }

/* ---------------- Wallet buttons spacing ---------------- */
.scaanme-wallet-buttons { margin-block: 26px !important; }

/* ---------------- Language switcher harmony ---------------- */
.vlv-topbar .dropdown-menu { border-radius: var(--vlv-r-sm); border: 1px solid var(--vlv-line); box-shadow: var(--vlv-shadow-sm); }

/* ---------------- Floating alerts ---------------- */
.alert-float {
    border-radius: var(--vlv-r-pill) !important;
    border: 1px solid var(--vlv-line) !important;
    font-family: var(--vlv-font-b);
}

/* ================= Tablet / desktop (≥760px) ================= */
@media (min-width: 760px) {
    body { font-size: 15px; padding-block-end: 0; }

    .vlv-dock { display: none; }

    .vlv-section { margin-block: 56px; }

    .vlv-hero { padding: 38px 36px 34px; margin-block-start: 26px; }
    .vlv-hero-grid {
        flex-direction: row;
        align-items: center;
        gap: 40px;
    }
    .vlv-hero-copy { flex: 1 1 46%; }
    .vlv-hero-mirror { flex: 1 1 54%; }

    .vlv-trust { gap: 10px; margin-block-start: 20px; }
    .vlv-trust-item { font-size: 12.5px; padding: 9px 17px; }

    .vlv-tile { flex-basis: 300px; }
    .vlv-prodrail .vlv-card { flex-basis: 250px; }

    .vlv-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }

    .vlv-bundle { padding: 36px; }
    .vlv-bundle-in { flex-direction: row; align-items: center; gap: 36px; }
    .vlv-bundle-head { flex: 1 1 46%; }
    .vlv-bundle-steps { flex: 1 1 54%; }
    .vlv-bundle-cta { margin-block-start: 8px; }

    .vlv-toolbar {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }
    .vlv-search { flex: 2 1 280px; }
    .vlv-pricef { flex: 2 1 240px; }
    .vlv-toolbar .vlv-select { flex: 1 1 170px; width: auto; }

    .vlv-product-grid2 {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 36px;
        align-items: start;
    }
    .vlv-product-info { padding-block-start: 6px; }

    .vlv-catgrid { grid-template-columns: repeat(3, 1fr); gap: 18px; }

    .vlv-footer-top { flex-direction: row; justify-content: space-between; text-align: start; }
    .vlv-footer-links { justify-content: flex-start; }
    .vlv-footer-base { flex-direction: row; justify-content: space-between; text-align: start; }

    .vlv-policy { padding: 32px 36px; }
}

@media (min-width: 1024px) {
    .vlv-grid { grid-template-columns: repeat(4, 1fr); }
    .vlv-catgrid { grid-template-columns: repeat(4, 1fr); }
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .vlv-hero::before { animation: none; background: none; }
    .vlv-loader span { animation: none; opacity: 1; transform: none; }

    .vlv-btn, .vlv-card, .vlv-tile, .vlv-add, .vlv-cart-trigger, .vlv-chip,
    .vlv-place-order, .vlv-qty-btn, .vlv-social a, .vlv-thumb, .vlv-bundle-step,
    .vlv-card-img, .vlv-tile-img, .vlv-tile-cta i, .vlv-sechead-link {
        transition: none !important;
        animation: none !important;
    }

    .vlv-btn:hover, .vlv-card:hover, .vlv-tile:hover, .vlv-add:hover,
    .vlv-cart-trigger:hover, .vlv-place-order:hover, .vlv-thumb:hover,
    .vlv-bundle-step:hover, .vlv-social a:hover {
        transform: none;
    }
    .vlv-tile:hover .vlv-tile-img,
    .vlv-card-media:hover .vlv-card-img:first-child { transform: none; }
}


/* ============================================================
   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: var(--tk-success, #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;
}