/* ============================================================
   VALORA — Premium Tebex Theme
   Dark luxury · gold glow · motion
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
    color-scheme: dark;
    --v-bg: #070704;
    --v-deep: #0b0a08;
    --v-panel: #12110d;
    --v-panel-2: #181610;
    --v-ink: #f7f4ec;
    --v-muted: #b5ad9d;
    --v-gold: #f0c43c;
    --v-gold-2: #ffe27a;
    --v-glow: #f6d76f;
    --v-danger: #ff6b6b;
    --v-success: #7ddf8f;
    --v-line: rgba(240, 196, 60, .22);
    --v-line-soft: rgba(240, 196, 60, .12);
    --v-wline: rgba(255, 255, 255, .10);
    --v-glass: rgba(255, 255, 255, .035);
    --v-glow-soft: rgba(240, 196, 60, .35);
    --v-glow-faint: rgba(240, 196, 60, .14);
    --v-shadow: 0 30px 90px rgba(0, 0, 0, .58);
    --v-shadow-sm: 0 14px 40px rgba(0, 0, 0, .45);
    --v-radius: 16px;
    --v-radius-sm: 10px;
    --v-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --v-ease: cubic-bezier(.22, .8, .26, .99);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --v-line: color-mix(in srgb, var(--v-gold) 24%, transparent);
        --v-line-soft: color-mix(in srgb, var(--v-gold) 12%, transparent);
        --v-glow-soft: color-mix(in srgb, var(--v-gold) 36%, transparent);
        --v-glow-faint: color-mix(in srgb, var(--v-gold) 14%, transparent);
    }
}

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

html {
    scroll-behavior: smooth;
    background: var(--v-bg);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100svh;
    background: var(--v-bg);
    color: var(--v-ink);
    font-family: var(--v-font);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--v-gold); color: #11100b; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--v-deep); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--v-gold), #8a701f);
    border-radius: 99px;
    border: 2px solid var(--v-deep);
}

:focus-visible {
    outline: 2px solid var(--v-gold-2);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- 3. Ambient layers ---------- */
.v-ambient {
    position: fixed;
    inset: 0;
    z-index: -8;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% -10%, var(--v-glow-faint), transparent 38%),
        radial-gradient(circle at 88% 78%, rgba(240, 196, 60, .05), transparent 34%),
        linear-gradient(180deg, #080806, #11100d 48%, var(--v-bg));
}

.v-ambient::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -42vh;
    width: 130vmax;
    height: 130vmax;
    transform: translateX(-50%);
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(240, 196, 60, .055) 60deg,
        transparent 130deg,
        rgba(255, 226, 122, .04) 220deg,
        transparent 300deg);
    border-radius: 50%;
    animation: vAurora 70s linear infinite;
    filter: blur(34px);
}

@keyframes vAurora {
    to { transform: translateX(-50%) rotate(360deg); }
}

.v-grain {
    position: fixed;
    inset: 0;
    z-index: -6;
    pointer-events: none;
    opacity: .15;
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

#v-particles {
    position: fixed;
    inset: 0;
    z-index: -5;
    pointer-events: none;
}

.v-cursor-light {
    position: fixed;
    left: 0;
    top: 0;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    background: radial-gradient(circle, var(--v-glow-faint), transparent 64%);
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    transition: opacity .4s;
}

.v-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 130;
    height: 2px;
    width: calc(var(--scroll, 0) * 100%);
    background: linear-gradient(90deg, var(--v-gold), #fff3aa);
    box-shadow: 0 0 24px var(--v-glow-soft);
}

/* ---------- 4. Layout helpers ---------- */
.v-wrap {
    width: min(1240px, calc(100% - 40px));
    margin: 0 auto;
}

.v-main {
    min-height: 60svh;
    padding-top: 96px;
}

.v-section { padding: 64px 0; }
.v-section--tight { padding: 34px 0; }

.v-eyebrow {
    margin: 0 0 14px;
    color: var(--v-gold-2);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 12px;
}

.v-eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, var(--v-gold), transparent);
}

.v-h1, .v-h2, .v-h3 {
    margin: 0;
    text-transform: uppercase;
    line-height: 1.04;
    letter-spacing: .01em;
    font-weight: 900;
}

.v-h2 { font-size: clamp(1.7rem, 3.4vw, 2.9rem); }
.v-h3 { font-size: 1.25rem; }

.v-sub {
    color: var(--v-muted);
    max-width: 640px;
    line-height: 1.65;
}

.v-shine-text {
    background: linear-gradient(110deg, var(--v-gold) 18%, #fff7d6 36%, var(--v-gold-2) 52%, var(--v-gold) 74%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: vShine 5.5s linear infinite;
}

@keyframes vShine {
    to { background-position: 220% center; }
}

.v-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

/* ---------- 5. Buttons / chips / badges ---------- */
.v-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 26px;
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-sm);
    background: var(--v-glass);
    color: var(--v-ink);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: transform .2s var(--v-ease), box-shadow .25s, border-color .25s, filter .2s;
}

.v-btn:hover {
    transform: translateY(-2px);
    border-color: var(--v-gold);
}

.v-btn:active { transform: translateY(0) scale(.985); }

.v-btn--gold {
    background: linear-gradient(135deg, var(--v-gold), var(--v-gold-2));
    color: #11100b;
    border-color: transparent;
    box-shadow: 0 0 28px var(--v-glow-soft), 0 8px 24px rgba(0, 0, 0, .35);
}

.v-btn--gold:hover {
    filter: brightness(1.07);
    box-shadow: 0 0 44px var(--v-glow-soft), 0 12px 30px rgba(0, 0, 0, .4);
}

.v-btn--gold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%);
    transform: translateX(-130%) skewX(-12deg);
}

.v-btn--gold:hover::after { animation: vSweep .8s var(--v-ease); }

@keyframes vSweep {
    to { transform: translateX(130%) skewX(-12deg); }
}

.v-btn--ghost {
    background: transparent;
    color: var(--v-gold-2);
}

.v-btn--danger {
    border-color: rgba(255, 107, 107, .35);
    color: var(--v-danger);
}

.v-btn--danger:hover { border-color: var(--v-danger); box-shadow: 0 0 22px rgba(255, 107, 107, .18); }

.v-btn--sm { min-height: 38px; padding: 0 16px; font-size: .72rem; }
.v-btn--block { width: 100%; }

.v-btn[disabled], .v-btn.is-disabled {
    opacity: .45;
    pointer-events: none;
    filter: saturate(.4);
}

.v-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--v-line);
    border-radius: 99px;
    background: rgba(240, 196, 60, .06);
    color: var(--v-gold-2);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.v-chip i.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v-gold-2);
    box-shadow: 0 0 12px var(--v-gold);
    animation: vPulse 2.4s ease-in-out infinite;
}

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

.v-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--v-gold), var(--v-gold-2));
    color: #11100b;
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 0 22px var(--v-glow-soft);
}

.v-badge--time {
    left: auto;
    right: 14px;
    background: rgba(11, 10, 8, .86);
    color: var(--v-gold-2);
    border: 1px solid var(--v-line);
    backdrop-filter: blur(6px);
    font-variant-numeric: tabular-nums;
}

/* ---------- 6. Header ---------- */
.v-top {
    position: fixed;
    z-index: 120;
    inset: 0 0 auto 0;
    height: 84px;
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0 clamp(18px, 4vw, 48px);
    border-bottom: 1px solid var(--v-line-soft);
    background: rgba(7, 7, 4, .88);
    transition: height .25s var(--v-ease), background .25s, box-shadow .25s;
}

/* Blur header only on desktop — backdrop-filter would trap the fixed
   mobile nav overlay inside the header (containing block). */
@media (min-width: 1025px) {
    .v-top {
        background: rgba(7, 7, 4, .55);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
}

.v-top.is-elevated {
    height: 68px;
    background: rgba(7, 7, 4, .9);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
}

.v-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    flex-shrink: 0;
}

.v-brand img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 0 22px var(--v-glow-soft));
    transition: transform .3s var(--v-ease);
}

.v-brand:hover img { transform: scale(1.06) rotate(-3deg); }

.v-brand b, .v-brand small {
    display: block;
    line-height: 1;
    text-transform: uppercase;
}

.v-brand b { font-size: 1.02rem; letter-spacing: .2em; font-weight: 900; }

.v-brand small {
    margin-top: 5px;
    color: var(--v-gold-2);
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .3em;
}

.v-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #e3ded2;
}

.v-nav > a, .v-nav-drop > a {
    position: relative;
    padding: 10px 0;
    white-space: nowrap;
    transition: color .18s;
}

.v-nav > a::after, .v-nav-drop > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 1px;
    background: var(--v-gold);
    box-shadow: 0 0 12px var(--v-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s var(--v-ease);
}

.v-nav > a:hover, .v-nav > a.is-active,
.v-nav-drop > a:hover, .v-nav-drop.is-active > a { color: var(--v-gold-2); }

.v-nav > a:hover::after, .v-nav > a.is-active::after,
.v-nav-drop > a:hover::after { transform: scaleX(1); }

.v-nav-ext {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 0;
    white-space: nowrap;
    color: var(--v-gold-2);
    transition: color .18s;
}

.v-nav-ext svg { width: 12px; height: 12px; }
.v-nav-ext:hover { color: #fff7d6; }

.v-nav-drop { position: relative; }

.v-nav-drop .v-drop {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 230px;
    padding: 10px;
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-sm);
    background: rgba(11, 10, 8, .96);
    backdrop-filter: blur(16px);
    box-shadow: var(--v-shadow-sm);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, transform .2s var(--v-ease), visibility .2s;
}

.v-nav-drop:hover .v-drop, .v-nav-drop:focus-within .v-drop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.v-drop a {
    display: block;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: .74rem;
    transition: background .15s, color .15s, padding-left .15s;
}

.v-drop a:hover {
    background: rgba(240, 196, 60, .08);
    color: var(--v-gold-2);
    padding-left: 18px;
}

.v-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.v-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 8px;
    border: 1px solid var(--v-line-soft);
    border-radius: 99px;
    background: var(--v-glass);
    font-size: .74rem;
    font-weight: 700;
}

.v-user .v-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--v-gold), var(--v-gold-2));
    color: #11100b;
    font-weight: 900;
    font-size: .78rem;
    text-transform: uppercase;
}

.v-user a { color: var(--v-muted); transition: color .15s; }
.v-user a:hover { color: var(--v-danger); }

.v-basket-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--v-gold), var(--v-gold-2));
    color: #11100b;
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 0 26px var(--v-glow-soft);
    transition: transform .2s var(--v-ease), filter .2s, box-shadow .25s;
}

.v-basket-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 0 40px var(--v-glow-soft);
}

.v-basket-btn svg { width: 17px; height: 17px; }

.v-basket-count {
    display: grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: 99px;
    background: #11100b;
    color: var(--v-gold-2);
    font-size: .68rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.v-burger {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius-sm);
    background: var(--v-glass);
    cursor: pointer;
    place-items: center;
}

.v-burger svg { width: 22px; height: 22px; color: var(--v-gold-2); }

/* ---------- 7. Hero ---------- */
.v-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(70px, 11vh, 130px) 0 clamp(50px, 8vh, 90px);
    border-bottom: 1px solid var(--v-line-soft);
}

.v-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
    filter: saturate(1.05) contrast(1.06);
    transform: scale(1.03);
    animation: vHeroDrift 26s ease-in-out infinite alternate;
}

@keyframes vHeroDrift {
    to { transform: scale(1.08) translateY(-1.5%); }
}

.v-hero-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(7, 7, 4, .96), rgba(7, 7, 4, .55) 55%, rgba(7, 7, 4, .9)),
        linear-gradient(180deg, rgba(7, 7, 4, .65), rgba(7, 7, 4, .1) 45%, var(--v-bg) 98%);
}

.v-hero-inner { max-width: 860px; }

.v-hero h1 {
    margin: 0;
    font-size: clamp(2.6rem, 6.2vw, 5.4rem);
    line-height: .98;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: .005em;
    text-shadow: 0 26px 74px rgba(0, 0, 0, .72);
}

.v-hero .v-sub {
    margin: 24px 0 0;
    font-size: clamp(1rem, 1.5vw, 1.16rem);
}

.v-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}

.v-hero-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.v-hero-dots {
    position: absolute;
    right: 5vw;
    top: 40%;
    display: grid;
    gap: 14px;
    z-index: -1;
}

.v-hero-dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--v-gold-2);
    box-shadow: 0 0 14px var(--v-gold);
    animation: vPulse 3s ease-in-out infinite;
}

.v-hero-dots i:nth-child(2) { animation-delay: .5s; }
.v-hero-dots i:nth-child(3) { animation-delay: 1s; }
.v-hero-dots i:nth-child(4) { animation-delay: 1.5s; }

/* ---------- 8. Cards / panels ---------- */
.v-card {
    position: relative;
    border: 1px solid var(--v-line-soft);
    border-radius: var(--v-radius);
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    box-shadow: var(--v-shadow-sm);
    overflow: hidden;
    transition: transform .28s var(--v-ease), border-color .28s, box-shadow .3s;
}

.v-card:hover {
    border-color: var(--v-line);
    box-shadow: var(--v-shadow);
}

.v-card--lift:hover { transform: translateY(-7px); }

.v-card .v-sheen {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 226, 122, .12) 50%, transparent 58%);
    transform: translateX(-140%) skewX(-10deg);
}

.v-card:hover .v-sheen { animation: vCardSweep 1s var(--v-ease); }

@keyframes vCardSweep {
    to { transform: translateX(140%) skewX(-10deg); }
}

.v-panel {
    border: 1px solid var(--v-line-soft);
    border-radius: var(--v-radius);
    background: rgba(18, 17, 13, .72);
    backdrop-filter: blur(10px);
    padding: clamp(20px, 3vw, 34px);
    box-shadow: var(--v-shadow-sm);
}

/* ---------- 9. Category showcase (index) ---------- */
.v-cats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.v-cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 220px;
    padding: 26px;
    isolation: isolate;
}

.v-cat-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 80% 0%, var(--v-glow-faint), transparent 55%),
        linear-gradient(160deg, var(--v-panel-2), var(--v-deep));
    transition: opacity .3s;
}

.v-cat-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}

.v-cat-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .22;
    filter: saturate(1.05);
    transition: opacity .35s, transform .5s var(--v-ease);
}

/* !important jer img nosi inline opacity (zaštita od keširanog CSS-a) */
.v-cat-card:hover .v-cat-media img {
    opacity: .34 !important;
    transform: scale(1.06);
}

.v-cat-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 7, 4, .08), rgba(7, 7, 4, .8) 84%);
}

.v-cat-card h3,
.v-cat-card p,
.v-cat-card .v-cat-go { position: relative; z-index: 1; }

.v-cat-num {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 1;
    font-size: 3.2rem;
    font-weight: 900;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px var(--v-line);
    transition: -webkit-text-stroke-color .3s, transform .3s var(--v-ease);
    font-variant-numeric: tabular-nums;
}

.v-cat-card:hover .v-cat-num {
    -webkit-text-stroke-color: var(--v-gold);
    transform: translateY(-4px);
}

.v-cat-card h3 {
    margin: 0 0 6px;
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: 900;
}

.v-cat-card p {
    margin: 0 0 16px;
    color: var(--v-muted);
    font-size: .85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.v-cat-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--v-gold-2);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.v-cat-go svg {
    width: 15px;
    height: 15px;
    transition: transform .25s var(--v-ease);
}

.v-cat-card:hover .v-cat-go svg { transform: translateX(6px); }

/* ---------- 10. Package grid + list ---------- */
.v-shop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
}

.v-shop--full { grid-template-columns: minmax(0, 1fr); }

.v-packs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.v-pack {
    display: flex;
    flex-direction: column;
}

.v-pack-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 40%, var(--v-glow-faint), transparent 70%),
        linear-gradient(160deg, var(--v-panel-2), var(--v-deep));
}

.v-pack-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.06) contrast(1.04);
    transition: transform .5s var(--v-ease);
}

.v-pack:hover .v-pack-media img { transform: scale(1.07); }

.v-pack-media .v-ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.v-pack-media .v-ph svg {
    width: 54px;
    height: 54px;
    color: var(--v-line);
}

.v-pack-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    padding: 20px;
}

.v-pack-name {
    margin: 0;
    font-size: 1.04rem;
    font-weight: 800;
    line-height: 1.3;
}

.v-pack-name a:hover { color: var(--v-gold-2); }

.v-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.v-price b {
    font-size: 1.28rem;
    font-weight: 900;
    color: var(--v-gold-2);
    text-shadow: 0 0 26px var(--v-glow-soft);
}

.v-price small {
    color: var(--v-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.v-price del {
    color: var(--v-muted);
    font-size: .88rem;
    text-decoration: line-through;
    opacity: .8;
}

.v-price .free { color: var(--v-success); font-weight: 900; }

.v-pack-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.v-pack-actions .v-btn { flex: 1; }

.v-pack-reason {
    margin: 0;
    font-size: .74rem;
    color: var(--v-danger);
}

/* list display type */
.v-packs--list { grid-template-columns: 1fr; }

.v-packs--list .v-pack {
    flex-direction: row;
    align-items: center;
}

.v-packs--list .v-pack-media {
    width: 200px;
    flex-shrink: 0;
    aspect-ratio: 16 / 10;
    border-radius: var(--v-radius-sm);
    margin: 14px 0 14px 14px;
}

.v-packs--list .v-pack-body {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.v-packs--list .v-pack-actions { margin: 0; min-width: 220px; }

/* ---------- 11. Package detail ---------- */
.v-product {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

.v-gallery-main {
    position: relative;
    border-radius: var(--v-radius);
    overflow: hidden;
    border: 1px solid var(--v-line-soft);
    background: linear-gradient(160deg, var(--v-panel-2), var(--v-deep));
    aspect-ratio: 16 / 10;
}

.v-gallery-main img, .v-gallery-main iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.v-gallery-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.v-gallery-thumbs button {
    width: 86px;
    aspect-ratio: 16 / 10;
    padding: 0;
    border: 1px solid var(--v-line-soft);
    border-radius: var(--v-radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--v-deep);
    opacity: .65;
    transition: opacity .2s, border-color .2s, transform .2s var(--v-ease);
}

.v-gallery-thumbs button:hover { transform: translateY(-2px); opacity: 1; }

.v-gallery-thumbs button.is-active {
    opacity: 1;
    border-color: var(--v-gold);
    box-shadow: 0 0 18px var(--v-glow-faint);
}

.v-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.v-gallery-thumbs .v-thumb-video {
    display: grid;
    place-items: center;
    color: var(--v-gold-2);
}

.v-product-info .v-price b { font-size: 2rem; }

.v-desc {
    color: #d8d2c4;
    line-height: 1.7;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow-x: hidden;
    min-width: 0;
}

.v-desc img, .v-desc iframe, .v-desc video, .v-desc table { max-width: 100%; }
.v-desc img { border-radius: var(--v-radius-sm); height: auto; }
.v-desc a { color: var(--v-gold-2); text-decoration: underline; }
.v-desc pre { white-space: pre-wrap; overflow-x: auto; max-width: 100%; }
.v-desc table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.v-desc td, .v-desc th { border: 1px solid var(--v-wline); padding: 8px 10px; }

.v-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 22px;
}

.v-trust div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--v-line-soft);
    border-radius: var(--v-radius-sm);
    background: var(--v-glass);
    font-size: .72rem;
    font-weight: 700;
    color: var(--v-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.v-trust svg { width: 16px; height: 16px; color: var(--v-gold-2); flex-shrink: 0; }

/* ---------- 12. Basket / checkout ---------- */
.v-basket-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.v-bitem {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 16px;
}

.v-bitem + .v-bitem { margin-top: 14px; }

.v-bitem-img {
    width: 110px;
    aspect-ratio: 16 / 11;
    border-radius: var(--v-radius-sm);
    overflow: hidden;
    border: 1px solid var(--v-line-soft);
    background: linear-gradient(160deg, var(--v-panel-2), var(--v-deep));
    display: grid;
    place-items: center;
}

.v-bitem-img img { width: 100%; height: 100%; object-fit: cover; }
.v-bitem-img svg { width: 30px; height: 30px; color: var(--v-line); }

.v-bitem-name { margin: 0 0 4px; font-weight: 800; }

.v-bitem-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--v-muted);
    font-size: .8rem;
}

.v-bitem-side {
    display: flex;
    align-items: center;
    gap: 14px;
}

.v-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--v-line-soft);
    border-radius: 99px;
    background: var(--v-deep);
    overflow: hidden;
}

.v-qty button {
    width: 34px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--v-gold-2);
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    transition: background .15s;
}

.v-qty button:hover { background: rgba(240, 196, 60, .12); }

.v-qty input {
    width: 44px;
    height: 36px;
    border: 0;
    background: transparent;
    text-align: center;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.v-qty input::-webkit-outer-spin-button,
.v-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.v-iconbtn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--v-line-soft);
    border-radius: var(--v-radius-sm);
    background: var(--v-glass);
    color: var(--v-muted);
    cursor: pointer;
    transition: color .15s, border-color .15s, box-shadow .2s, transform .15s;
}

.v-iconbtn:hover {
    color: var(--v-danger);
    border-color: rgba(255, 107, 107, .45);
    box-shadow: 0 0 18px rgba(255, 107, 107, .15);
    transform: translateY(-1px);
}

.v-iconbtn svg { width: 16px; height: 16px; }

.v-summary { position: sticky; top: 104px; }

.v-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px dashed var(--v-wline);
    font-size: .9rem;
    color: var(--v-muted);
}

.v-summary-row.total {
    border: 0;
    color: var(--v-ink);
    font-weight: 900;
    font-size: 1.05rem;
}

.v-summary-row.total b {
    font-size: 1.7rem;
    color: var(--v-gold-2);
    text-shadow: 0 0 26px var(--v-glow-soft);
    font-variant-numeric: tabular-nums;
}

.v-coupon-row {
    display: flex;
    gap: 10px;
}

.v-coupon-row input { flex: 1; }

.v-coupon-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 4px 6px 4px 0;
    padding: 8px 8px 8px 14px;
    border: 1px solid var(--v-line);
    border-radius: 99px;
    background: rgba(240, 196, 60, .07);
    font-size: .76rem;
    font-weight: 800;
}

.v-coupon-chip a {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 107, 107, .12);
    color: var(--v-danger);
    font-size: .8rem;
    line-height: 1;
}

.v-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--v-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.v-secure svg { width: 14px; height: 14px; color: var(--v-success); }

/* ---------- 13. Empty / auth / forms ---------- */
.v-empty {
    text-align: center;
    padding: clamp(40px, 8vw, 90px) 24px;
}

.v-empty svg {
    width: 64px;
    height: 64px;
    color: var(--v-line);
    margin: 0 auto 18px;
}

.v-empty h3 { margin: 0 0 8px; text-transform: uppercase; }
.v-empty p { color: var(--v-muted); margin: 0 0 24px; }

.v-auth {
    max-width: 460px;
    margin: clamp(30px, 7vh, 80px) auto;
    text-align: center;
    position: relative;
}

.v-auth::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: var(--v-radius);
    background: conic-gradient(from var(--ring, 0deg), transparent 12%, var(--v-glow-soft), transparent 38%);
    animation: vRing 5s linear infinite;
    filter: blur(10px);
    opacity: .8;
}

@property --ring {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes vRing {
    to { --ring: 360deg; }
}

.v-auth .v-panel { position: relative; }

.v-auth img.logo {
    width: 76px;
    height: 76px;
    object-fit: contain;
    margin: 0 auto 16px;
    filter: drop-shadow(0 0 30px var(--v-glow-soft));
}

.v-field { text-align: left; margin-bottom: 16px; }

.v-field label {
    display: block;
    margin-bottom: 8px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v-gold-2);
}

.v-field .hint {
    margin-top: 7px;
    font-size: .76rem;
    color: var(--v-muted);
}

.v-input, .v-select, textarea.v-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--v-wline);
    border-radius: var(--v-radius-sm);
    background: var(--v-deep);
    color: var(--v-ink);
    transition: border-color .2s, box-shadow .2s;
}

.v-input:focus, .v-select:focus, textarea.v-input:focus {
    outline: none;
    border-color: var(--v-gold);
    box-shadow: 0 0 0 3px var(--v-glow-faint), 0 0 24px var(--v-glow-faint);
}

.v-input::placeholder { color: rgba(181, 173, 157, .55); }

.v-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f0c43c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
    cursor: pointer;
}

.v-select option { background: var(--v-deep); color: var(--v-ink); }

/* ---------- 14. Sidebar modules ---------- */
.v-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.v-mod {
    border: 1px solid var(--v-line-soft);
    border-radius: var(--v-radius);
    background: rgba(18, 17, 13, .72);
    backdrop-filter: blur(8px);
    overflow: hidden;
    box-shadow: var(--v-shadow-sm);
    transition: border-color .25s;
}

.v-mod:hover { border-color: var(--v-line); }

.v-mod-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--v-line-soft);
    background: linear-gradient(90deg, rgba(240, 196, 60, .07), transparent 70%);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v-gold-2);
}

.v-mod-head svg { width: 15px; height: 15px; flex-shrink: 0; }

.v-mod-body { padding: 18px; }

.v-mod-body p { margin: 0; color: var(--v-muted); font-size: .86rem; }

/* progress bars */
.v-bar {
    position: relative;
    height: 12px;
    border-radius: 99px;
    background: var(--v-deep);
    border: 1px solid var(--v-line-soft);
    overflow: hidden;
    margin: 12px 0 10px;
}

.v-bar i {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--v-gold), var(--v-gold-2));
    box-shadow: 0 0 16px var(--v-glow-soft);
    overflow: hidden;
}

.v-bar i::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: vBarSheen 2.4s var(--v-ease) infinite;
}

@keyframes vBarSheen {
    60%, 100% { transform: translateX(100%); }
}

.v-bar-meta {
    display: flex;
    justify-content: space-between;
    font-size: .76rem;
    color: var(--v-muted);
    font-variant-numeric: tabular-nums;
}

.v-bar-meta b { color: var(--v-gold-2); }

/* payments feed */
.v-pay-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
}

.v-pay-row + .v-pay-row { border-top: 1px dashed var(--v-wline); }

.v-pay-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--v-panel-2), var(--v-deep));
    border: 1px solid var(--v-line);
    color: var(--v-gold-2);
    font-weight: 900;
    font-size: .82rem;
    text-transform: uppercase;
}

.v-pay-info { min-width: 0; flex: 1; }

.v-pay-info b {
    display: block;
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v-pay-info span {
    display: block;
    font-size: .72rem;
    color: var(--v-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.v-pay-price {
    flex-shrink: 0;
    font-size: .8rem;
    font-weight: 900;
    color: var(--v-gold-2);
    font-variant-numeric: tabular-nums;
}

/* top customer spotlight */
.v-top-customer {
    text-align: center;
    padding: 6px 0 2px;
}

.v-top-customer .crown {
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    color: var(--v-gold);
    filter: drop-shadow(0 0 14px var(--v-glow-soft));
    animation: vFloatY 3.4s ease-in-out infinite;
}

@keyframes vFloatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.v-top-customer img {
    width: 64px;
    height: 64px;
    margin: 0 auto 10px;
    border-radius: 14px;
    border: 1px solid var(--v-line);
    box-shadow: 0 0 30px var(--v-glow-faint);
}

.v-top-customer b { display: block; font-size: 1rem; }

.v-top-customer .amount {
    display: block;
    margin-top: 4px;
    color: var(--v-gold-2);
    font-weight: 900;
    font-size: 1.2rem;
    text-shadow: 0 0 22px var(--v-glow-soft);
    font-variant-numeric: tabular-nums;
}

.v-top-customer .period {
    display: block;
    margin-top: 2px;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v-muted);
}

/* server status */
.v-status-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.v-status-dot.on { background: var(--v-success); box-shadow: 0 0 12px var(--v-success); }
.v-status-dot.off { background: var(--v-danger); box-shadow: 0 0 12px var(--v-danger); }

.v-status-dot.on::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--v-success);
    animation: vPing 1.8s ease-out infinite;
}

@keyframes vPing {
    0% { transform: scale(.6); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

.v-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .84rem;
}

.v-ip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed var(--v-line);
    border-radius: var(--v-radius-sm);
    background: var(--v-deep);
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: .8rem;
    color: var(--v-gold-2);
    word-break: break-all;
}

/* featured package */
.v-feat .v-pack-media { aspect-ratio: 16 / 9; }

/* index modules strip */
.v-modules-row .v-side {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

/* ---------- 15. Info bands ---------- */
.v-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.v-feature {
    display: flex;
    gap: 16px;
    padding: 22px;
    align-items: flex-start;
}

.v-feature .ico {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(240, 196, 60, .16), rgba(240, 196, 60, .05));
    border: 1px solid var(--v-line);
    color: var(--v-gold-2);
    box-shadow: 0 0 22px var(--v-glow-faint);
}

.v-feature .ico svg { width: 21px; height: 21px; }

.v-feature h4 {
    margin: 2px 0 5px;
    font-size: .88rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.v-feature p { margin: 0; font-size: .82rem; color: var(--v-muted); }

.v-band {
    position: relative;
    overflow: hidden;
    padding: clamp(30px, 5vw, 52px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

.v-band::before {
    content: "";
    position: absolute;
    inset: -40%;
    z-index: -1;
    background: radial-gradient(circle at 18% 30%, var(--v-glow-faint), transparent 42%);
    animation: vBandGlow 9s ease-in-out infinite alternate;
}

@keyframes vBandGlow {
    to { transform: translateX(22%); }
}

.v-band h3 { margin: 0 0 6px; font-size: clamp(1.3rem, 2.6vw, 1.9rem); text-transform: uppercase; }
.v-band p { margin: 0; color: var(--v-muted); max-width: 520px; }

/* ---------- 16. Breadcrumb / flash / toast ---------- */
.v-crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--v-muted);
    flex-wrap: wrap;
}

.v-crumb a { color: var(--v-muted); transition: color .15s; }
.v-crumb a:hover { color: var(--v-gold-2); }
.v-crumb svg { width: 12px; height: 12px; opacity: .5; }
.v-crumb b { color: var(--v-gold-2); }

.v-toasts {
    position: fixed;
    top: 96px;
    right: 22px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(380px, calc(100vw - 44px));
}

.v-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--v-radius-sm);
    border: 1px solid var(--v-line);
    background: rgba(11, 10, 8, .94);
    backdrop-filter: blur(14px);
    box-shadow: var(--v-shadow-sm), 0 0 30px var(--v-glow-faint);
    font-size: .86rem;
    animation: vToastIn .35s var(--v-ease);
}

.v-toast.is-leaving { animation: vToastOut .3s var(--v-ease) forwards; }

.v-toast .bar-ico { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; color: var(--v-gold-2); }
.v-toast.success { border-color: rgba(125, 223, 143, .4); }
.v-toast.success .bar-ico { color: var(--v-success); }
.v-toast.error { border-color: rgba(255, 107, 107, .4); }
.v-toast.error .bar-ico { color: var(--v-danger); }

@keyframes vToastIn {
    from { opacity: 0; transform: translateX(30px); }
}

@keyframes vToastOut {
    to { opacity: 0; transform: translateX(30px); }
}

/* ---------- 17. Footer ---------- */
.v-footer {
    margin-top: 70px;
    border-top: 1px solid var(--v-line-soft);
    background:
        radial-gradient(circle at 50% 0%, var(--v-glow-faint), transparent 40%),
        var(--v-deep);
}

.v-footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.1fr);
    gap: 34px;
    padding: clamp(36px, 6vw, 64px) 0;
}

.v-footer h5 {
    margin: 0 0 16px;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--v-gold-2);
}

.v-footer-about p {
    margin: 14px 0 0;
    color: var(--v-muted);
    font-size: .86rem;
    max-width: 320px;
}

.v-footer-links {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.v-footer-links a {
    color: var(--v-muted);
    font-size: .84rem;
    transition: color .15s, padding-left .2s var(--v-ease);
}

.v-footer-links a:hover { color: var(--v-gold-2); padding-left: 6px; }

.v-socials { display: flex; gap: 10px; flex-wrap: wrap; }

.v-socials a {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--v-line-soft);
    border-radius: 12px;
    background: var(--v-glass);
    color: var(--v-muted);
    transition: color .2s, border-color .2s, transform .2s var(--v-ease), box-shadow .2s;
}

.v-socials a:hover {
    color: var(--v-gold-2);
    border-color: var(--v-gold);
    transform: translateY(-3px);
    box-shadow: 0 0 22px var(--v-glow-faint);
}

.v-socials svg { width: 18px; height: 18px; }

.v-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 0;
    border-top: 1px solid var(--v-wline);
    font-size: .76rem;
    color: var(--v-muted);
}

.v-footer-bottom a { color: var(--v-gold-2); }

/* ---------- 18. Reveal / utilities ---------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--v-ease), transform .7s var(--v-ease);
    transition-delay: calc(var(--d, 0) * 70ms);
}

[data-reveal].is-in {
    opacity: 1;
    transform: none;
}

.v-divider {
    height: 1px;
    border: 0;
    margin: 26px 0;
    background: linear-gradient(90deg, transparent, var(--v-line), transparent);
}

.v-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid var(--v-line-soft);
    border-left: 3px solid var(--v-gold);
    border-radius: var(--v-radius-sm);
    background: rgba(240, 196, 60, .05);
    color: var(--v-muted);
    font-size: .84rem;
}

.v-note svg { width: 16px; height: 16px; color: var(--v-gold-2); flex-shrink: 0; margin-top: 2px; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ---------- 19. Responsive ---------- */
@media (max-width: 1100px) {
    .v-packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v-modules-row .v-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
    .v-shop, .v-basket-grid, .v-product { grid-template-columns: minmax(0, 1fr); }
    .v-summary { position: static; }
    .v-nav {
        position: fixed;
        inset: 0;
        z-index: 110;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        margin: 0;
        padding: 90px 30px 40px;
        background: rgba(7, 7, 4, .97);
        backdrop-filter: blur(20px);
        font-size: 1.05rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s, visibility .25s;
        overflow-y: auto;
    }
    .v-nav.is-open { opacity: 1; visibility: visible; }
    .v-nav > a, .v-nav-drop { width: 100%; text-align: center; }
    .v-nav-drop .v-drop {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 4px 0 10px;
    }
    .v-drop a { text-align: center; font-size: .9rem; }
    .v-burger { display: grid; z-index: 115; }
    .v-cursor-light { display: none; }
}

/* Mobile-only nav entries (login/logout inside the overlay menu) */
.v-nav .v-only-mobile { display: none; }

@media (max-width: 1024px) {
    .v-nav .v-only-mobile { display: block; color: var(--v-gold-2); }
}

@media (max-width: 760px) {
    .v-main { padding-top: 84px; }
    .v-top { height: 74px; gap: 10px; padding: 0 14px; }
    .v-top .v-user { display: none; }
    .v-brand img { width: 38px; height: 38px; }
    .v-brand b { font-size: .9rem; letter-spacing: .14em; }
    .v-packs, .v-cats, .v-features, .v-trust,
    .v-modules-row .v-side, .v-footer-grid { grid-template-columns: 1fr; }
    .v-packs--list .v-pack { flex-direction: column; align-items: stretch; }
    .v-packs--list .v-pack-media { width: auto; margin: 14px 14px 0; }
    .v-bitem { grid-template-columns: 78px minmax(0, 1fr); }
    .v-bitem-img { width: 78px; }
    .v-bitem-side {
        grid-column: 1 / -1;
        justify-content: space-between;
    }
    .v-basket-btn span.label { display: none; }
    .v-basket-btn { padding: 0 16px; }
    .v-user span.name { display: none; }
    .v-section { padding: 44px 0; }
    .v-hero-dots { display: none; }
}

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    #v-particles, .v-cursor-light { display: none !important; }
}