.bgru-form-wrap {
--bgru-color: #1a1a2e;
--bgru-radius: 8px;
max-width: 680px;
margin: 0 auto;
padding: 0 16px;
font-size: 16px;
line-height: 1.5;
} .bgru-form-title { font-size: 1.6em; margin: 0 0 .4em; }
.bgru-form-intro { margin-bottom: 24px; }
.bgru-form-intro p { margin: 0 0 .6em; color: #444; } .bgru-notice {
padding: 14px 18px;
border-radius: var(--bgru-radius);
margin-bottom: 24px;
font-size: .95em;
}
.bgru-notice--info    { background: #e9f3ff; border-left: 4px solid var(--bgru-color); }
.bgru-notice--error   { background: #fde8e8; border-left: 4px solid #d63638; color: #7a1a1a; } .bgru-step {
background: #fff;
border: 1px solid #e2e2e2;
border-radius: var(--bgru-radius);
padding: 24px;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.bgru-step__title {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.05em;
font-weight: 700;
margin: 0 0 20px;
padding-bottom: 14px;
border-bottom: 1px solid #f0f0f0;
}
.bgru-step__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bgru-color);
color: #fff;
font-size: .85em;
font-weight: 700;
flex-shrink: 0;
} .bgru-field { margin-bottom: 20px; }
.bgru-field:last-child { margin-bottom: 0; }
.bgru-label {
display: block;
font-weight: 600;
margin-bottom: 6px;
font-size: .95em;
color: #222;
}
.bgru-required { color: #d63638; margin-left: 2px; }
.bgru-input {
width: 100%;
padding: 10px 14px;
border: 1.5px solid #ccc;
border-radius: 5px;
font-size: 1em;
background: #fff;
color: #222;
transition: border-color .18s, box-shadow .18s;
box-sizing: border-box;
}
.bgru-input:focus {
outline: none;
border-color: var(--bgru-color);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bgru-color) 15%, transparent);
}
.bgru-input.bgru-input--error {
border-color: #d63638;
box-shadow: 0 0 0 3px rgba(214,54,56,.1);
}
.bgru-textarea { resize: vertical; min-height: 110px; }
.bgru-help {
font-size: .83em;
color: #666;
margin: 5px 0 0;
}
.bgru-char-count { margin-top: 4px; }
.bgru-error {
display: block;
color: #d63638;
font-size: .83em;
margin-top: 4px;
min-height: 18px;
} .bgru-field--checkbox { margin-bottom: 16px; }
.bgru-checkbox-label {
display: flex;
gap: 10px;
align-items: flex-start;
cursor: pointer;
font-size: .95em;
}
.bgru-checkbox-label input[type="checkbox"] {
margin-top: 3px;
flex-shrink: 0;
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--bgru-color);
} .bgru-submit-wrap { margin-top: 24px; text-align: center; }
.bgru-submit-btn {
display: inline-block;
padding: 14px 32px;
border: none;
border-radius: 6px;
color: #fff !important;
font-size: 1.05em;
font-weight: 700;
cursor: pointer;
transition: opacity .18s, transform .1s;
width: 100%;
max-width: 380px;
letter-spacing: .3px;
}
.bgru-submit-btn:hover   { opacity: .88; }
.bgru-submit-btn:active  { transform: scale(.98); }
.bgru-submit-btn:disabled { opacity: .55; cursor: not-allowed; }
.bgru-submit-help { font-size: .83em; color: #666; margin-top: 10px; } .bgru-success {
text-align: center;
padding: 40px 24px;
background: #f0fff6;
border: 1px solid #7de8a4;
border-radius: var(--bgru-radius);
}
.bgru-success__icon  { font-size: 3em; margin-bottom: 12px; }
.bgru-success__title { font-size: 1.4em; color: #0a6630; margin-bottom: 12px; }
.bgru-success__msg   { color: #2a4a35; margin-bottom: 16px; }
.bgru-success__info {
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
padding: 14px 18px;
margin: 16px 0;
text-align: left;
font-size: .9em;
} .bgru-btn-wrap { margin: 16px 0; }
.bgru-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--bgru-color, #1a1a2e);
color: #fff !important;
text-decoration: none !important;
border-radius: 5px;
font-weight: 600;
font-size: .95em;
transition: opacity .18s;
}
.bgru-btn:hover  { opacity: .85; color: #fff !important; }
.bgru-btn--link {
background: transparent;
color: var(--bgru-color, #1a1a2e) !important;
padding: 0;
font-weight: normal;
text-decoration: underline !important;
}
.bgru-btn--footer {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
box-shadow: 0 4px 16px rgba(0,0,0,.22);
border-radius: 50px;
} .bgru-thankyou-notice {
background: #f8f9fa;
border: 1px solid #e0e0e0;
border-left: 4px solid var(--bgru-color, #1a1a2e);
padding: 16px 20px;
margin: 20px 0;
border-radius: 4px;
font-size: .95em;
}
@media (max-width: 480px) {
.bgru-step { padding: 16px; }
.bgru-btn--footer { bottom: 12px; right: 12px; font-size: .88em; padding: 8px 16px; }
.bgru-submit-btn { max-width: 100%; }
}.vscc[hidden], .vscc-modal[hidden], .vscc-fab[hidden], #vscc-fab[hidden] { display: none !important; }
.vscc, .vscc * { box-sizing: border-box; }
.vscc {
--vscc-accent: #8B35D6;
--vscc-bg: #ffffff;
--vscc-fg: #1e1230;
--vscc-muted: #5b5570;
--vscc-border: rgba(20,10,40,.12);
--vscc-radius: 16px;
--vscc-shadow: 0 18px 50px rgba(20,10,40,.22);
position: fixed;
z-index: 2147483000;
font-family: inherit;
color: var(--vscc-fg);
line-height: 1.5;
} .vscc--dark, .vscc--auto:is([data-x]) { }
@media (prefers-color-scheme: dark) {
.vscc--auto {
--vscc-bg: #1a1226;
--vscc-fg: #f3eefb;
--vscc-muted: #b9adcf;
--vscc-border: rgba(255,255,255,.14);
--vscc-shadow: 0 18px 50px rgba(0,0,0,.5);
}
}
.vscc--dark {
--vscc-bg: #1a1226;
--vscc-fg: #f3eefb;
--vscc-muted: #b9adcf;
--vscc-border: rgba(255,255,255,.14);
--vscc-shadow: 0 18px 50px rgba(0,0,0,.5);
} .vscc-banner {
background: var(--vscc-bg);
border: 1px solid var(--vscc-border);
border-radius: var(--vscc-radius);
box-shadow: var(--vscc-shadow);
padding: 20px 22px;
width: min(440px, calc(100vw - 32px));
}
.vscc--box { inset: auto auto 20px 20px; }
.vscc--box.vscc--right { inset: auto 20px 20px auto; }
.vscc--box.vscc--center { inset: auto 0 20px 0; margin: 0 auto; }
.vscc--bar .vscc-banner {
width: 100%;
max-width: 1200px;
display: flex; align-items: center; gap: 24px;
border-radius: var(--vscc-radius);
}
.vscc--bar { inset: auto 0 16px 0; margin: 0 auto; width: min(1200px, calc(100vw - 24px)); }
.vscc--bar .vscc-actions { margin: 0; flex: 0 0 auto; }
.vscc-h { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: var(--vscc-fg); }
.vscc-p { font-size: 14px; color: var(--vscc-muted); margin: 0; }
.vscc-links { display: block; margin-top: 8px; }
.vscc-links a { color: var(--vscc-accent); text-decoration: underline; margin-right: 12px; }
.vscc-actions {
display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px;
} .vscc-btn {
appearance: none; border: 0; cursor: pointer;
font: inherit; font-weight: 700; font-size: 14px;
padding: 11px 18px; border-radius: 12px;
transition: transform .15s ease, filter .15s ease, background .15s ease;
flex: 1 1 auto; text-align: center; min-width: 120px;
}
.vscc-btn:hover { transform: translateY(-1px); }
.vscc-btn:focus-visible { outline: 3px solid var(--vscc-accent); outline-offset: 2px; }
.vscc-btn--accept { background: var(--vscc-accent); color: #fff; }
.vscc-btn--accept:hover { filter: brightness(1.06); }
.vscc-btn--reject {
background: color-mix(in srgb, var(--vscc-fg) 12%, transparent);
color: var(--vscc-fg);
}
.vscc-btn--reject:hover { background: color-mix(in srgb, var(--vscc-fg) 20%, transparent); }
.vscc-btn--ghost {
background: transparent; color: var(--vscc-muted);
text-decoration: underline; flex: 0 0 auto; min-width: 0; padding: 11px 12px;
} .vscc-modal { position: fixed; inset: 0; z-index: 2147483001; display: flex; align-items: center; justify-content: center; }
.vscc-modal-scrim { position: absolute; inset: 0; background: rgba(15,8,28,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.vscc-modal-card {
position: relative; z-index: 1;
background: var(--vscc-bg); color: var(--vscc-fg);
width: min(560px, calc(100vw - 24px)); max-height: min(86vh, 720px);
display: flex; flex-direction: column;
border-radius: var(--vscc-radius); box-shadow: var(--vscc-shadow);
overflow: hidden;
}
.vscc-modal-head, .vscc-modal-foot { padding: 18px 22px; }
.vscc-modal-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--vscc-border); }
.vscc-x { background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: var(--vscc-muted); }
.vscc-modal-body { padding: 6px 22px; overflow-y: auto; }
.vscc-modal-foot { display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--vscc-border); }
.vscc-cat { padding: 16px 0; border-bottom: 1px solid var(--vscc-border); }
.vscc-cat:last-child { border-bottom: 0; }
.vscc-cat-top { display: flex; align-items: center; gap: 12px; }
.vscc-cat-name { font-weight: 700; font-size: 15px; }
.vscc-always { font-style: normal; font-weight: 600; font-size: 11px; color: var(--vscc-accent); background: color-mix(in srgb, var(--vscc-accent) 14%, transparent); padding: 3px 8px; border-radius: 20px; margin-left: 8px; }
.vscc-cat-desc { margin: 8px 0 0 62px; font-size: 13px; color: var(--vscc-muted); } .vscc-switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.vscc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.vscc-slider { position: absolute; inset: 0; background: color-mix(in srgb, var(--vscc-fg) 20%, transparent); border-radius: 20px; transition: background .2s; }
.vscc-slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.vscc-switch input:checked + .vscc-slider { background: var(--vscc-accent); }
.vscc-switch input:checked + .vscc-slider::before { transform: translateX(20px); }
.vscc-switch input:disabled { cursor: not-allowed; }
.vscc-switch input:disabled + .vscc-slider { opacity: .7; }
.vscc-switch input:focus-visible + .vscc-slider { outline: 3px solid var(--vscc-accent); outline-offset: 2px; } .vscc-fab {
position: fixed; left: 18px; bottom: 18px; z-index: 2147482999;
width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
background: var(--vscc-accent); color: #fff; font-size: 22px; line-height: 1;
box-shadow: 0 8px 24px rgba(20,10,40,.28);
display: flex; align-items: center; justify-content: center;
transition: transform .15s ease;
}
.vscc-fab:hover { transform: scale(1.08); }
.vscc-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } @media (max-width: 640px) {
.vscc--box, .vscc--bar { inset: auto 0 0 0; width: 100%; margin: 0; }
.vscc-banner { width: 100%; border-radius: 16px 16px 0 0; }
.vscc--bar .vscc-banner { flex-direction: column; align-items: stretch; gap: 14px; }
.vscc-actions { margin-top: 14px; }
.vscc-btn { flex: 1 1 100%; }
.vscc-btn--ghost { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
.vscc-btn, .vscc-fab, .vscc-slider, .vscc-slider::before { transition: none; }
}@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&family=Fraunces:opsz,wght@9..144,700;9..144,800;9..144,900&family=Fredoka:wght@500;600;700&family=Inter:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700;1,800&family=Quicksand:wght@500;600;700&display=swap");:root {
--vs-orange: #F4681A;
--vs-pink:   #E8358A;
--vs-purple: #8B35D6;
--vs-lilac:  #C084FC;
--vs-yellow: #FFD93D;
--vs-peach:  #FFB38A;
--vs-mint:   #34D9B5;
--vs-rose:   #FFE4EE;
--vs-grad:  linear-gradient(135deg, var(--vs-orange) 0%, var(--vs-pink) 55%, var(--vs-purple) 100%);
--vs-grad2: linear-gradient(135deg, var(--vs-yellow), var(--vs-peach));
--vs-grad3: linear-gradient(135deg, var(--vs-mint), #5CE0D5);
--vs-rad-lg: 16px;
--vs-rad-md: 12px;
--vs-rad-sm: 8px;
--vs-ease:   cubic-bezier(.16, 1, .3, 1);
--vs-spring: cubic-bezier(.34, 1.56, .64, 1);
--vs-font-display: 'Playfair Display', Georgia, serif;
--vs-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
--vs-font-accent:  'Baloo 2', 'DM Sans', cursive;
--vs-base-size: 16px;
--vs-logo-h: 60px; --orange: var(--vs-orange);
--pink:   var(--vs-pink);
--purple: var(--vs-purple);
--lilac:  var(--vs-lilac);
--yellow: var(--vs-yellow);
--peach:  var(--vs-peach);
--mint:   var(--vs-mint);
--rose:   var(--vs-rose);
--grad:   var(--vs-grad);
--grad2:  var(--vs-grad2);
--grad3:  var(--vs-grad3);
--ease:   var(--vs-ease);
--spring: var(--vs-spring);
--rad-lg: var(--vs-rad-lg);
--rad-md: var(--vs-rad-md);
--rad-sm: var(--vs-rad-sm);
}
[data-theme="light"], :root {
--vs-bg:      #FDF8F5;
--vs-bg2:     #FFF4F8;
--vs-bg3:     #FFFFFF;
--vs-border:  rgba(232, 53, 138, .12);
--vs-border2: rgba(139, 53, 214, .12);
--vs-text:    #151519;
--vs-text2:   #5A3A6E;
--vs-muted:   #9B7AAE;
--vs-heading: #1E0A2E;
--vs-shadow:    0 4px 32px rgba(139, 53, 214, .09);
--vs-shadow-lg: 0 20px 64px rgba(139, 53, 214, .14);
--vs-card-bg: #FFFFFF;
--vs-nav-bg:  rgba(253, 248, 245, .9);
--bg: var(--vs-bg); --bg2: var(--vs-bg2); --bg3: var(--vs-bg3);
--border: var(--vs-border); --border2: var(--vs-border2);
--text: var(--vs-text); --text2: var(--vs-text2); --muted: var(--vs-muted);
--heading: var(--vs-heading);
--shadow: var(--vs-shadow); --shadow-lg: var(--vs-shadow-lg);
--card-bg: var(--vs-card-bg); --nav-bg: var(--vs-nav-bg);
}
[data-theme="dark"] {
--vs-bg:      #0D0816;
--vs-bg2:     #120A1E;
--vs-bg3:     #1A0E2A;
--vs-border:  rgba(255, 255, 255, .08);
--vs-border2: rgba(195, 132, 252, .2);
--vs-text:    #F5EDFF;
--vs-text2:   #C8A8E8;
--vs-muted:   rgba(200, 168, 232, .55);
--vs-heading: #F5EDFF;
--vs-shadow:    0 4px 32px rgba(0, 0, 0, .4);
--vs-shadow-lg: 0 20px 64px rgba(0, 0, 0, .5);
--vs-card-bg: rgba(25, 12, 40, .9);
--vs-nav-bg:  rgba(13, 8, 22, .88);
--bg: var(--vs-bg); --bg2: var(--vs-bg2); --bg3: var(--vs-bg3);
--border: var(--vs-border); --border2: var(--vs-border2);
--text: var(--vs-text); --text2: var(--vs-text2); --muted: var(--vs-muted);
--heading: var(--vs-heading);
--shadow: var(--vs-shadow); --shadow-lg: var(--vs-shadow-lg);
--card-bg: var(--vs-card-bg); --nav-bg: var(--vs-nav-bg);
} *,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
font-family: var(--vs-font-body);
font-size: var(--vs-base-size);
line-height: 1.6;
color: var(--text);
background: var(--bg);
overflow-x: hidden;
transition: background .4s ease, color .4s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { color: var(--heading); }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--pink); text-decoration: none; transition: color .2s; }
a:hover { color: var(--purple); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: 3px solid rgba(232, 53, 138, .55);
outline-offset: 3px;
border-radius: 6px;
}
::selection { background: rgba(232, 53, 138, .25); color: var(--text); }
.skip-link {
position: absolute; left: -10000px; top: auto;
width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
left: 16px; top: 16px; width: auto; height: auto;
padding: 12px 18px; border-radius: 14px;
background: var(--grad); color: #fff; font-weight: 700; z-index: 999;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
} #vsStarCanvas,
#starCanvas {
position: fixed; inset: 0; z-index: 0;
pointer-events: none; opacity: 0;
transition: opacity .8s ease;
}
[data-theme="dark"] #vsStarCanvas,
[data-theme="dark"] #starCanvas { opacity: 1; }
#vsDaySky,
#daySky {
position: fixed; inset: 0; z-index: 0;
pointer-events: none; opacity: 0; overflow: hidden;
background: linear-gradient(180deg, #87CEEB 0%, #B8E0F7 40%, #D4EEF9 70%, #E8F6FD 100%);
transition: opacity .8s ease;
}
[data-theme="light"] #vsDaySky,
[data-theme="light"] #daySky { opacity: 1; }
.cloud { position: absolute; pointer-events: none; }
.cloud-shape {
background: #fff; border-radius: 50px; position: relative;
filter: drop-shadow(0 4px 16px rgba(100, 160, 230, .18));
}
.cloud-shape::before,
.cloud-shape::after {
content: ''; background: #fff; border-radius: 50%; position: absolute;
}
.c1 { top: 8%;  left: -200px; animation: vs-cloud-drift  80s linear infinite; }
.c1 .cloud-shape { width: 200px; height: 60px; }
.c1 .cloud-shape::before { width: 100px; height: 80px; top: -40px; left: 30px; }
.c1 .cloud-shape::after  { width: 70px;  height: 60px; top: -30px; left: 90px; }
.c2 { top: 18%; left: -320px; animation: vs-cloud-drift 120s linear infinite 20s; }
.c2 .cloud-shape { width: 280px; height: 70px; }
.c2 .cloud-shape::before { width: 130px; height: 90px; top: -50px; left: 50px; }
.c2 .cloud-shape::after  { width: 90px;  height: 70px; top: -40px; left: 130px; }
.c3 { top: 32%; left: -150px; animation: vs-cloud-drift  95s linear infinite 45s; }
.c3 .cloud-shape { width: 160px; height: 45px; }
.c3 .cloud-shape::before { width: 80px;  height: 60px; top: -30px; left: 20px; }
.c3 .cloud-shape::after  { width: 60px;  height: 50px; top: -25px; left: 70px; }
.c4 { top: 12%; left: -400px; animation: vs-cloud-drift 110s linear infinite 10s; }
.c4 .cloud-shape { width: 240px; height: 65px; opacity: .85; }
.c4 .cloud-shape::before { width: 110px; height: 85px; top: -45px; left: 40px; }
.c4 .cloud-shape::after  { width: 80px;  height: 65px; top: -35px; left: 110px; }
.c5 { top: 5%;  left: -250px; animation: vs-cloud-drift 140s linear infinite 60s; }
.c5 .cloud-shape { width: 180px; height: 50px; opacity: .7; }
.c5 .cloud-shape::before { width: 90px;  height: 70px; top: -35px; left: 25px; }
.c5 .cloud-shape::after  { width: 65px;  height: 55px; top: -28px; left: 80px; }
@keyframes vs-cloud-drift {
from { transform: translateX(0); }
to   { transform: translateX(calc(100vw + 500px)); }
} .vs-sun {
position: absolute;
top: 7%; right: 7%;
width: 110px; height: 110px;
z-index: 1;
pointer-events: none;
animation: vs-sun-bob 8s ease-in-out infinite;
}
@keyframes vs-sun-bob {
0%, 100% { transform: translateY(0); }
50%      { transform: translateY(-10px); }
}
.vs-sun-glow {
position: absolute; inset: -28px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,217,61,.55), rgba(255,179,138,.25) 45%, transparent 70%);
filter: blur(8px);
animation: vs-sun-glow 4.5s ease-in-out infinite;
}
@keyframes vs-sun-glow {
0%, 100% { opacity: .9; transform: scale(1); }
50%      { opacity: 1;  transform: scale(1.08); }
}
.vs-sun-rays {
position: absolute; inset: -8px;
border-radius: 50%;
background:
conic-gradient(from 0deg,
transparent 0deg, rgba(255,217,61,.55) 6deg, transparent 12deg,
transparent 30deg, rgba(255,217,61,.55) 36deg, transparent 42deg,
transparent 60deg, rgba(255,217,61,.55) 66deg, transparent 72deg,
transparent 90deg, rgba(255,217,61,.55) 96deg, transparent 102deg,
transparent 120deg, rgba(255,217,61,.55) 126deg, transparent 132deg,
transparent 150deg, rgba(255,217,61,.55) 156deg, transparent 162deg,
transparent 180deg, rgba(255,217,61,.55) 186deg, transparent 192deg,
transparent 210deg, rgba(255,217,61,.55) 216deg, transparent 222deg,
transparent 240deg, rgba(255,217,61,.55) 246deg, transparent 252deg,
transparent 270deg, rgba(255,217,61,.55) 276deg, transparent 282deg,
transparent 300deg, rgba(255,217,61,.55) 306deg, transparent 312deg,
transparent 330deg, rgba(255,217,61,.55) 336deg, transparent 342deg,
transparent 360deg);
mask: radial-gradient(circle, transparent 38%, #000 42%);
-webkit-mask: radial-gradient(circle, transparent 38%, #000 42%);
animation: vs-sun-spin 24s linear infinite;
opacity: .85;
}
@keyframes vs-sun-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.vs-sun-body {
position: absolute; inset: 14px;
border-radius: 50%;
background: radial-gradient(circle at 35% 32%, #FFE883, #FFB95A 60%, #FF8E3D);
box-shadow:
inset -6px -10px 16px rgba(244,104,26,.4),
inset 4px 6px 12px rgba(255,255,255,.5),
0 8px 24px rgba(255,179,138,.5);
display: flex; align-items: center; justify-content: center;
font-size: 0;
}
.vs-sun-face {
font-size: 0; display: none;
} .vs-balloon {
position: absolute;
width: 72px;
z-index: 1;
pointer-events: none;
will-change: transform;
animation: vs-balloon-fly var(--bd, 100s) linear infinite;
}
.vs-balloon-1 { top: 22%; left: -160px; --bd: 110s; animation-delay: 0s; }
.vs-balloon-2 { top: 12%; left: -260px; --bd: 140s; animation-delay: 38s; }
.vs-balloon-2 .vs-balloon-canopy { width: 56px; height: 68px; }
.vs-balloon-2 .vs-balloon-basket { width: 20px; }
.vs-balloon-canopy {
width: 72px; height: 86px;
background: linear-gradient(180deg, var(--pink) 0%, var(--orange) 100%);
border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
position: relative;
box-shadow: inset -10px -5px 14px rgba(0,0,0,.2), 0 14px 28px rgba(232,53,138,.35);
animation: vs-balloon-sway 6s ease-in-out infinite;
transform-origin: 50% 80%;
}
.vs-balloon-canopy::before,
.vs-balloon-canopy::after {
content: ''; position: absolute;
top: 0; bottom: 0;
width: 7px;
background: rgba(255, 255, 255, .3);
border-radius: 50%;
}
.vs-balloon-canopy::before { left: 20px; }
.vs-balloon-canopy::after  { right: 20px; }
.vs-balloon-canopy.alt {
background: linear-gradient(180deg, var(--purple) 0%, var(--mint) 100%);
box-shadow: inset -10px -5px 14px rgba(0,0,0,.22), 0 14px 28px rgba(139,53,214,.35);
}
.vs-balloon-string {
width: 1.5px; height: 16px;
background: rgba(0, 0, 0, .28);
margin: -2px auto 0;
}
.vs-balloon-basket {
width: 26px; height: 18px;
background: linear-gradient(135deg, #B07A4A, #8B5A2A);
border-radius: 5px 5px 8px 8px;
margin: 0 auto;
box-shadow: inset 0 -4px 5px rgba(0,0,0,.3);
position: relative;
} .vs-balloon-basket::before,
.vs-balloon-basket::after {
content: ''; position: absolute;
left: 0; right: 0;
height: 1.5px;
background: rgba(0, 0, 0, .25);
}
.vs-balloon-basket::before { top: 5px; }
.vs-balloon-basket::after  { top: 11px; } @keyframes vs-balloon-fly {
0%   { transform: translate(0,            0); }
15%  { transform: translate(15vw,       -22px); }
30%  { transform: translate(30vw,        12px); }
45%  { transform: translate(45vw,       -18px); }
60%  { transform: translate(60vw,         8px); }
75%  { transform: translate(75vw,       -14px); }
90%  { transform: translate(90vw,         4px); }
100% { transform: translate(calc(100vw + 280px), -8px); }
} @keyframes vs-balloon-sway {
0%, 100% { transform: rotate(-2deg); }
50%      { transform: rotate(2deg); }
} .vs-flock {
position: absolute;
display: flex; gap: 16px;
z-index: 1;
pointer-events: none;
animation: vs-flock-drift var(--fd, 60s) linear infinite;
}
.vs-flock-1 { top: 32%; left: -180px; --fd: 75s; animation-delay: 18s; }
.vs-flock-2 { top: 48%; left: -160px; --fd: 95s; animation-delay: 50s; transform: scale(.75); }
.vs-bird {
width: 18px; height: 8px;
position: relative;
animation: vs-bird-flap 0.6s ease-in-out infinite;
}
.vs-bird:nth-child(1) { animation-delay: 0s; }
.vs-bird:nth-child(2) { animation-delay: .1s; transform: translateY(6px); }
.vs-bird:nth-child(3) { animation-delay: .2s; transform: translateY(12px); }
.vs-bird:nth-child(4) { animation-delay: .3s; transform: translateY(18px); }
.vs-bird::before,
.vs-bird::after {
content: ''; position: absolute;
top: 0; width: 10px; height: 8px;
border: 1.5px solid rgba(40, 30, 60, .55);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
border-bottom: none; border-right: none;
}
.vs-bird::before { left: 0; transform: rotate(20deg); }
.vs-bird::after  { right: 0; transform: rotate(-20deg) scaleX(-1); }
@keyframes vs-bird-flap {
0%, 100% { transform: scaleY(1) translateY(var(--ty, 0)); }
50%      { transform: scaleY(.55) translateY(var(--ty, 0)); }
}
@keyframes vs-flock-drift {
from { transform: translateX(0); }
to   { transform: translateX(calc(100vw + 240px)); }
} .vs-butterfly {
position: absolute;
font-size: 28px;
z-index: 1;
pointer-events: none;
animation: vs-bf-fly 32s linear infinite;
filter: drop-shadow(0 4px 8px rgba(232,53,138,.25));
}
.vs-bf-1 { bottom: 18%; left: -60px; }
@keyframes vs-bf-fly {
0%   { transform: translate(0, 0)        rotate(0); }
20%  { transform: translate(22vw, -10vh) rotate(8deg); }
40%  { transform: translate(45vw, 4vh)   rotate(-6deg); }
60%  { transform: translate(68vw, -8vh)  rotate(10deg); }
80%  { transform: translate(90vw, 2vh)   rotate(-4deg); }
100% { transform: translate(110vw, -6vh) rotate(0); }
} body.vs-no-wishlist .wishlist-btn,
body.vs-no-wishlist .fav-btn { display: none !important; } .footer-brand img.is-filtered { filter: brightness(0) invert(1); opacity: .85; } #vsSkyTop {
position: fixed; inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
[data-theme="dark"] #vsSkyTop { opacity: 0; transition: opacity .8s ease; } [data-theme="dark"] #vsDaySky { opacity: 0; } #vsNightDecor {
position: fixed; inset: 0; z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity .8s ease;
}
[data-theme="dark"] #vsNightDecor { opacity: 1; }
.vs-moon {
position: absolute;
top: 7%; right: 8%;
width: 88px; height: 88px;
}
.vs-moon-glow {
position: absolute; inset: -32px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,236,.25), rgba(195,132,252,.15) 50%, transparent 75%);
filter: blur(10px);
animation: vs-moon-pulse 6s ease-in-out infinite;
}
@keyframes vs-moon-pulse {
0%, 100% { opacity: .85; transform: scale(1); }
50%      { opacity: 1;   transform: scale(1.1); }
}
.vs-moon-body {
position: absolute; inset: 0;
border-radius: 50%;
background:
radial-gradient(circle at 38% 36%, #FFFCE7, #F5EBC8 50%, #D7C497 90%);
box-shadow:
inset -10px -8px 18px rgba(80,55,30,.18),
inset 8px 6px 14px rgba(255,255,255,.4),
0 0 28px rgba(255,255,236,.4);
}
.vs-crater {
position: absolute;
border-radius: 50%;
background: rgba(120, 95, 55, .22);
box-shadow: inset 1px 1px 2px rgba(80,55,30,.35);
}
.vs-crater-1 { width: 14px; height: 14px; top: 28%; left: 26%; }
.vs-crater-2 { width: 8px;  height: 8px;  top: 56%; left: 60%; }
.vs-crater-3 { width: 11px; height: 11px; top: 70%; left: 32%; } .vs-city-lights { display: none; }
[data-theme="dark"] .vs-city-lights { display: block; }
[data-theme="dark"] .vs-light-core {
fill: #FFFF00;
opacity: 1;
} .vs-ufo {
position: absolute;
top: 0; left: 0;
width: 64px; height: 30px;
pointer-events: none;
will-change: transform, opacity;
animation: vs-ufo-fly 24s ease-in-out infinite;
animation-delay: 6s;
}
.vs-ufo-saucer {
display: block;
width: 100%; height: 100%;
overflow: visible;
filter: drop-shadow(0 6px 14px rgba(120, 240, 220, .55));
}
.vs-ufo-beam {
transform-origin: center top;
animation: vs-ufo-beam-pulse 1.6s ease-in-out infinite;
}
.vs-ufo-rim circle { animation: vs-ufo-rim-blink 1s linear infinite; }
.vs-ufo-rim circle:nth-child(1) { animation-delay: 0s;    }
.vs-ufo-rim circle:nth-child(2) { animation-delay: .2s;   }
.vs-ufo-rim circle:nth-child(3) { animation-delay: .4s;   }
.vs-ufo-rim circle:nth-child(4) { animation-delay: .6s;   }
.vs-ufo-rim circle:nth-child(5) { animation-delay: .8s;   }
@keyframes vs-ufo-fly {
0%   { transform: translate(-180px, 28vh) rotate(-3deg); opacity: 0; }
6%   { opacity: 1; }
18%  { transform: translate(20vw,    16vh) rotate(4deg);  }
34%  { transform: translate(40vw,    22vh) rotate(-2deg); }
50%  { transform: translate(58vw,    10vh) rotate(5deg);  }
66%  { transform: translate(74vw,    18vh) rotate(-3deg); }
82%  { transform: translate(90vw,    12vh) rotate(2deg);  }
94%  { opacity: 1; }
100% { transform: translate(110vw,   24vh) rotate(-4deg); opacity: 0; }
}
@keyframes vs-ufo-beam-pulse {
0%, 100% { opacity: .55; transform: scaleY(1); }
50%      { opacity: .85; transform: scaleY(1.18); }
}
@keyframes vs-ufo-rim-blink {
0%, 100% { opacity: 1; }
50%      { opacity: .25; }
} @media (prefers-reduced-motion: reduce) {
.vs-ufo, .vs-ufo-beam, .vs-ufo-rim circle {
animation: none !important;
}
.vs-ufo { transform: translate(70vw, 18vh); opacity: 1; }
} .vs-shooting-star {
position: absolute;
width: 180px; height: 2px;
pointer-events: none;
opacity: 0;
transform-origin: 100% 50%;
transform: rotate(-22deg);
background: linear-gradient(
to left,
rgba(255,255,255,0) 0%,
rgba(255,236,170,.85) 30%,
rgba(255,255,255,1) 95%,
rgba(255,255,255,1) 100%
);
border-radius: 999px;
filter: drop-shadow(0 0 6px rgba(255,236,170,.7));
}
.vs-shooting-star .vs-shooting-head {
position: absolute;
top: 50%; right: 0;
width: 6px; height: 6px;
background: #fff;
border-radius: 50%;
transform: translateY(-50%);
box-shadow:
0 0 8px rgba(255,255,255,1),
0 0 18px rgba(255,236,170,.85),
0 0 32px rgba(255,205,120,.5);
}
.vs-shooting-star-1 {
top: 18%; left: 12%;
animation: vs-shoot-1 11s ease-in 4s infinite;
}
.vs-shooting-star-2 {
top: 42%; left: 60%;
transform: rotate(-18deg);
animation: vs-shoot-2 17s ease-in 9s infinite;
}
@keyframes vs-shoot-1 {
0%       { opacity: 0; transform: rotate(-22deg) translateX(0)    scaleX(.6); }
5%       { opacity: 1; }
22%      { opacity: 1; transform: rotate(-22deg) translateX(420px) scaleX(1.1); }
28%, 100%{ opacity: 0; transform: rotate(-22deg) translateX(460px) scaleX(.4); }
}
@keyframes vs-shoot-2 {
0%       { opacity: 0; transform: rotate(-18deg) translateX(0)    scaleX(.5); }
8%       { opacity: 1; }
24%      { opacity: 1; transform: rotate(-18deg) translateX(380px) scaleX(1.1); }
30%, 100%{ opacity: 0; transform: rotate(-18deg) translateX(420px) scaleX(.4); }
} .vs-airplane {
position: absolute;
top: 14%; left: -160px;
display: flex; align-items: center;
pointer-events: none;
animation: vs-plane-drift 55s linear infinite;
} .vs-airplane-trail {
width: 110px; height: 3px;
background: linear-gradient(to left,
rgba(255,255,255,.95) 0%,
rgba(255,255,255,.55) 40%,
rgba(255,255,255,0)   100%);
border-radius: 999px;
filter: blur(.5px);
margin-right: -2px;
}
.vs-airplane-body {
display: block;
width: 56px; height: 26px;
overflow: visible;
filter: drop-shadow(0 6px 10px rgba(80,80,140,.22));
} .vs-airplane-prop {
transform-box: fill-box;
transform-origin: center;
animation: vs-airplane-prop 0.18s linear infinite;
}
@keyframes vs-airplane-prop {
to { transform: rotate(360deg); }
}
@keyframes vs-plane-drift {
0%   { transform: translateX(0)            translateY(0); }
50%  { transform: translateX(50vw)         translateY(-22px); }
100% { transform: translateX(calc(100vw + 260px)) translateY(0); }
} @media (prefers-reduced-motion: reduce) {
.vs-balloon, .vs-flock, .vs-butterfly, .vs-sun, .vs-sun-rays, .vs-sun-glow, .vs-moon-glow,
.vs-shooting-star, .vs-airplane, .vs-airplane-prop {
animation: none !important;
}
.vs-balloon-1, .vs-balloon-2 { display: none; }
.vs-flock-1, .vs-flock-2 { display: none; }
.vs-butterfly { display: none; }
.vs-shooting-star, .vs-airplane { display: none; }
}
.vs-floating-shapes,
.floating-shapes {
position: fixed; inset: 0; z-index: 1;
pointer-events: none; overflow: hidden;
}
.fshape {
position: absolute; border-radius: 50%; opacity: 0;
animation: vs-shape-intro 1s var(--spring) forwards,
vs-shape-float var(--dur, 8s) ease-in-out var(--delay2, 0s) infinite;
}
.fs1 { width:18px; height:18px; background:var(--yellow); top:12%; left:8%;  --dur:7s;  --delay2:0s;  animation-delay:.3s,1.3s; }
.fs2 { width:12px; height:12px; background:var(--pink);   top:28%; right:10%;--dur:9s;  --delay2:.5s; animation-delay:.5s,1.5s; }
.fs3 { width:22px; height:22px; background:var(--mint);   top:65%; left:5%;  --dur:6s;  --delay2:1s;  animation-delay:.7s,1.7s; }
.fs4 { width:14px; height:14px; background:var(--purple); top:80%; right:8%; --dur:8s;  --delay2:2s;  animation-delay:.4s,1.4s; }
.fs5 { width:10px; height:10px; background:var(--orange); top:45%; left:3%;  --dur:10s; --delay2:3s;  animation-delay:.6s,1.6s; }
.fs6 { width:16px; height:16px; background:var(--lilac);  top:55%; right:4%; --dur:7.5s;--delay2:1.5s;animation-delay:.9s,1.9s; }
.fs7 { width:8px;  height:8px;  background:var(--peach);  top:20%; left:45%; --dur:11s; --delay2:.8s; animation-delay:.2s,1.2s; }
.fs8 {
width:20px; height:20px; background:rgba(232,53,138,.3);
bottom:20%; left:15%; border-radius:6px; transform:rotate(30deg);
--dur:9s; --delay2:2.5s; animation-delay:.8s,1.8s;
}
@keyframes vs-shape-intro {
from { opacity: 0; transform: scale(0) rotate(-180deg); }
to   { opacity: .7; transform: scale(1) rotate(0); }
}
@keyframes vs-shape-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
33%      { transform: translateY(-22px) rotate(12deg); }
66%      { transform: translateY(12px)  rotate(-8deg); }
}
.vs-bg-blobs,
.bg-blobs {
position: fixed; inset: 0; z-index: 0;
pointer-events: none; overflow: hidden;
}
[data-theme="light"] .bb1 {
position: absolute; width: 600px; height: 600px;
border-radius: 50%; top: -150px; right: -120px;
background: radial-gradient(circle, rgba(232,53,138,.10), transparent 70%);
animation: vs-bb-drift 14s ease-in-out infinite;
}
[data-theme="light"] .bb2 {
position: absolute; width: 500px; height: 500px;
border-radius: 50%; bottom: -100px; left: -100px;
background: radial-gradient(circle, rgba(244,104,26,.08), transparent 70%);
animation: vs-bb-drift 18s ease-in-out infinite reverse;
}
[data-theme="dark"] .bb1,
[data-theme="dark"] .bb2,
[data-theme="dark"] .bb3 { display: none; }
@keyframes vs-bb-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
33%      { transform: translate(40px, -50px) scale(1.09); }
66%      { transform: translate(-25px, 35px) scale(.93); }
} .site-header { position: relative; z-index: 200; }
.site-nav,
nav.site-nav {
position: fixed; top: 18px; left: 50%;
transform: translateX(-50%); z-index: 200;
width: calc(100% - 56px); max-width: 1440px;
display: flex; align-items: center; justify-content: space-between;
padding: 14px 28px;
background: var(--nav-bg);
-webkit-backdrop-filter: blur(24px) saturate(160%);
backdrop-filter: blur(24px) saturate(160%);
border: 1.5px solid var(--border);
border-radius: 24px;
box-shadow: var(--shadow);
animation: vs-nav-drop .7s var(--spring) both .1s;
}
@keyframes vs-nav-drop {
from { transform: translateX(-50%) translateY(-120%); opacity: 0; }
to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.nav-logo,
.custom-logo-link,
.nav-logo-link {
display: flex; align-items: center; gap: 10px;
text-decoration: none;
position: relative;
z-index: 5;
}
.nav-logo img,
.nav-logo-link img,
.custom-logo {
height: var(--vs-logo-h, 44px);
width: auto;
max-width: 280px;
transition: filter .35s var(--ease), height .25s var(--ease);
display: block;
} .site-nav { overflow: visible; }
.nav-logo { margin-block: calc((var(--vs-logo-h, 44px) - 36px) / -2); } .nav-logo .vs-logo-dark,
.nav-logo-link .vs-logo-dark { display: none; }
[data-theme="dark"] .nav-logo .vs-logo-light,
[data-theme="dark"] .nav-logo-link .vs-logo-light { display: none; }
[data-theme="dark"] .nav-logo .vs-logo-dark,
[data-theme="dark"] .nav-logo-link .vs-logo-dark { display: block; }
.vs-logo-dark.is-inverted { filter: brightness(0) invert(1); }
.nav-links {
display: flex; gap: 4px; list-style: none;
margin: 0; padding: 0;
align-items: center;
}
.nav-links li { list-style: none; position: relative; }
.nav-links > li > a {
font-family: var(--vs-font-accent);
font-weight: 800; font-size: 15px;
letter-spacing: .005em;
color: var(--text);
padding: 9px 16px; border-radius: 50px;
text-decoration: none;
display: inline-flex; align-items: center; gap: 6px;
transition: background .25s, color .25s, transform .2s var(--spring);
}
.nav-links > li > a:hover {
transform: translateY(-2px) rotate(-1.5deg);
}
.nav-links a:hover,
.nav-links .current-menu-item > a,
.nav-links a.active {
background: var(--rose); color: var(--pink);
}
.nav-links > li.menu-item-has-children > a::after {
content: "▾";
font-size: 11px;
margin-left: 2px;
transition: transform .25s;
color: var(--pink);
}
.nav-links > li.menu-item-has-children:hover > a::after,
.nav-links > li.menu-item-has-children:focus-within > a::after {
transform: rotate(180deg);
} .nav-links .sub-menu {
position: absolute; top: 100%; left: 0;
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: 18px;
padding: 10px;
min-width: 320px;
box-shadow: var(--shadow-lg);
list-style: none; margin: 0;
opacity: 0; visibility: hidden; pointer-events: none;
transform: translateY(8px);
transition:
opacity .16s ease,
visibility 0s linear .16s,
transform .18s ease;
z-index: 200;
} .nav-links .sub-menu::before {
content: ""; position: absolute;
top: -20px; left: 0; right: 0; height: 22px;
background: transparent;
}
.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu,
.nav-links .sub-menu:hover {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateY(0);
transition:
opacity .2s 0s,
visibility 0s linear 0s,
transform .25s var(--spring) 0s;
}
.nav-links .sub-menu a {
display: block; padding: 8px 14px;
border-radius: 12px;
font-family: var(--vs-font-display);
font-weight: 700; font-size: 14px;
color: var(--text);
}
.nav-links .sub-menu a:hover { background: var(--rose); color: var(--pink); } .nav-links .mega-parent { position: static; }
.nav-links .mega-parent .sub-menu { display: none !important; } .mega-dropdown {
position: absolute;
top: 100%; left: 50%;
transform: translate(-50%, 12px);
margin-top: 0;
width: min(1180px, calc(100vw - 24px));
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: 24px;
box-shadow: 0 30px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.04);
padding: 0;
overflow: visible;
opacity: 0; visibility: hidden; pointer-events: none;
transition:
opacity .16s ease,
visibility 0s linear .16s,
transform .18s ease;
z-index: 220;
} .mega-dropdown::after {
content: "";
position: absolute;
top: -28px; left: -20px; right: -20px; height: 36px;
background: transparent;
}
.mega-dropdown::before {
content: "";
position: absolute; top: -8px; left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 16px; height: 16px;
background: var(--card-bg);
border-left: 1.5px solid var(--border);
border-top: 1.5px solid var(--border);
border-radius: 4px 0 0 0;
}
.mega-parent:hover > .mega-dropdown,
.mega-parent:focus-within > .mega-dropdown,
.mega-dropdown:hover {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translate(-50%, 0);
transition:
opacity .2s 0s,
visibility 0s linear 0s,
transform .35s var(--spring) 0s;
}
.mega-dropdown-inner {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 0;
padding: 28px 28px 22px;
background:
radial-gradient(circle at 100% 0%, rgba(232,53,138,.06), transparent 50%),
radial-gradient(circle at 0% 100%, rgba(255,217,61,.08), transparent 50%);
}
.mega-col {
padding: 4px 18px;
border-right: 1px dashed var(--border);
}
.mega-col:last-child { border-right: 0; }
.mega-col-head {
display: flex; align-items: flex-start; gap: 12px;
text-decoration: none;
padding: 6px 0 14px;
border-bottom: 1px dashed var(--border);
margin-bottom: 12px;
transition: transform .2s;
}
.mega-col-head:hover { transform: translateX(2px); }
.mega-col-emoji {
width: 40px; height: 40px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(232,53,138,.14), rgba(255,217,61,.18));
font-size: 20px; flex-shrink: 0;
}
.mega-col-text { display: flex; flex-direction: column; line-height: 1.3; }
.mega-col-text strong {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 15px; color: var(--text);
}
.mega-col-desc { font-size: 12px; color: var(--text2); margin-top: 2px; }
.mega-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mega-list li { list-style: none; }
.mega-list a {
display: block; padding: 7px 10px;
font-family: var(--vs-font-body); font-weight: 600;
font-size: 13.5px; color: var(--text2);
border-radius: 10px;
text-decoration: none;
transition: background .2s, color .2s, padding .2s;
}
.mega-list a:hover {
background: var(--rose); color: var(--pink);
padding-left: 14px;
}
.mega-empty {
font-size: 12px; color: var(--text2);
font-style: italic; margin: 4px 10px;
}
.mega-col-cta {
display: inline-flex; align-items: center; gap: 4px;
margin-top: 12px; padding: 6px 0;
font-family: var(--vs-font-accent); font-weight: 800;
font-size: 12px; color: var(--pink);
text-decoration: none;
transition: gap .2s;
}
.mega-col-cta:hover { gap: 8px; }
.mega-dropdown-foot {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap;
padding: 16px 28px;
background: linear-gradient(90deg, rgba(232,53,138,.06), rgba(255,217,61,.08));
border-top: 1px solid var(--border);
}
.mega-foot-cta {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 14px; color: var(--text);
text-decoration: none;
padding: 8px 16px; border-radius: 50px;
background: var(--pink); color: #fff;
transition: transform .2s, box-shadow .2s;
}
.mega-foot-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(232,53,138,.32); }
.mega-foot-cta--ghost {
background: transparent; color: var(--text);
border: 1.5px solid var(--border);
}
.mega-foot-cta--ghost:hover { background: var(--rose); color: var(--pink); border-color: var(--pink); }
@media (max-width: 820px) {
.mega-dropdown { width: min(640px, calc(100vw - 24px)); }
.mega-dropdown-inner { grid-template-columns: 1fr; gap: 0; padding: 22px 22px 16px; }
.mega-col { border-right: 0; border-bottom: 1px dashed var(--border); padding: 10px 4px; }
.mega-col:last-child { border-bottom: 0; }
}
[data-theme="dark"] .nav-links a:hover,
[data-theme="dark"] .nav-links .current-menu-item > a,
[data-theme="dark"] .nav-links a.active {
background: rgba(232, 53, 138, .15); color: var(--lilac);
} .nav-links {
gap: 2px;
padding: 4px;
border-radius: 999px;
background: color-mix(in srgb, var(--bg2) 52%, transparent);
border: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
}
.nav-links > li > a {
position: relative;
padding: 10px 15px;
line-height: 1;
color: color-mix(in srgb, var(--text) 92%, var(--purple));
}
.nav-links > li > a:hover {
transform: translateY(-1px);
background: color-mix(in srgb, var(--rose) 70%, var(--bg2));
}
.nav-links a:hover,
.nav-links .current-menu-item > a,
.nav-links .current-menu-ancestor > a,
.nav-links a.active {
background: color-mix(in srgb, var(--rose) 76%, var(--bg2));
color: var(--purple);
}
.nav-links > li.menu-item-has-children > a::after {
content: "";
width: 7px;
height: 7px;
margin-left: 5px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
opacity: .62;
}
.nav-links > li.menu-item-has-children:hover > a::after,
.nav-links > li.menu-item-has-children:focus-within > a::after {
transform: rotate(225deg) translate(-1px, -1px);
}
.nav-links .sub-menu {
top: calc(100% + 12px);
min-width: 300px;
padding: 12px;
border-radius: 22px;
background:
linear-gradient(145deg, color-mix(in srgb, var(--card-bg) 94%, #fff), var(--card-bg)),
var(--card-bg);
border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
box-shadow: 0 24px 60px rgba(30, 10, 46, .16), 0 2px 0 rgba(255,255,255,.45) inset;
transform: translateY(6px) scale(.98);
transition:
opacity .16s ease,
visibility 0s linear .16s,
transform .18s ease;
}
.nav-links .sub-menu::before {
top: -18px;
height: 20px;
}
.nav-links .sub-menu::after {
content: "";
position: absolute;
top: -7px;
left: 26px;
width: 14px;
height: 14px;
background: var(--card-bg);
border-left: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
border-radius: 4px 0 0 0;
transform: rotate(45deg);
}
.nav-links .sub-menu a {
position: relative;
display: flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 10px 12px;
border-radius: 14px;
font-family: var(--vs-font-body);
font-size: 14px;
font-weight: 750;
color: var(--text);
text-decoration: none;
}
.nav-links .sub-menu a::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--pink), var(--purple));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--rose) 68%, transparent);
flex: 0 0 auto;
opacity: .78;
}
.nav-links .sub-menu a::after {
content: "›";
margin-left: auto;
color: var(--text2);
font-size: 18px;
line-height: 1;
opacity: .5;
transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-links .sub-menu a:hover,
.nav-links .sub-menu .current-menu-item > a {
background: color-mix(in srgb, var(--rose) 78%, var(--bg2));
color: var(--purple);
}
.nav-links .sub-menu a:hover::after {
opacity: 1;
transform: translateX(2px);
}
.nav-links li:hover > .sub-menu,
.nav-links li:focus-within > .sub-menu,
.nav-links .sub-menu:hover {
transition:
opacity .14s ease,
visibility 0s linear 0s,
transform .18s var(--spring);
}
.mega-dropdown {
top: calc(100% + 14px);
width: min(1080px, calc(100vw - 40px));
border-radius: 28px;
background:
linear-gradient(145deg, color-mix(in srgb, var(--card-bg) 96%, #fff), var(--card-bg)),
var(--card-bg);
border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
box-shadow: 0 30px 90px rgba(30, 10, 46, .20), 0 2px 0 rgba(255,255,255,.45) inset;
transform: translate(-50%, 8px) scale(.985);
overflow: hidden;
transition:
opacity .16s ease,
visibility 0s linear .16s,
transform .18s ease;
}
.mega-dropdown::before {
top: -7px;
background: var(--card-bg);
border-color: color-mix(in srgb, var(--border) 72%, transparent);
}
.mega-dropdown::after {
top: -30px;
height: 34px;
}
.mega-parent:hover > .mega-dropdown,
.mega-parent:focus-within > .mega-dropdown,
.mega-dropdown:hover {
transform: translate(-50%, 0) scale(1);
transition:
opacity .14s ease,
visibility 0s linear 0s,
transform .2s var(--spring);
}
.mega-dropdown-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
padding: 22px 28px 18px;
background:
radial-gradient(circle at 8% 0%, rgba(255,217,61,.16), transparent 34%),
linear-gradient(90deg, rgba(139,53,214,.08), rgba(232,53,138,.06));
border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.mega-dropdown-top strong {
max-width: 560px;
font-family: var(--vs-font-display);
font-size: clamp(17px, 1.5vw, 22px);
line-height: 1.12;
color: var(--heading);
text-align: right;
}
.mega-kicker {
font-family: var(--vs-font-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--purple);
white-space: nowrap;
}
.mega-dropdown-inner {
gap: 14px;
padding: 22px;
background: transparent;
}
.mega-col {
display: flex;
min-width: 0;
flex-direction: column;
padding: 16px;
border: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
border-radius: 22px;
background: color-mix(in srgb, var(--bg2) 62%, transparent);
}
.mega-col:last-child {
border-right: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
}
.mega-col-head {
gap: 13px;
padding: 0 0 14px;
margin-bottom: 12px;
border-bottom: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
.mega-col-head:hover {
transform: none;
}
.mega-col-emoji {
width: 48px;
height: 48px;
border-radius: 16px;
font-size: 22px;
background:
linear-gradient(135deg, rgba(232,53,138,.16), rgba(139,53,214,.12)),
color-mix(in srgb, var(--bg) 70%, transparent);
box-shadow: 0 12px 24px rgba(139,53,214,.10);
}
.mega-col-text strong {
font-family: var(--vs-font-display);
font-size: 17px;
line-height: 1.08;
color: var(--heading);
}
.mega-col-desc {
margin-top: 5px;
font-size: 13px;
line-height: 1.35;
color: var(--text2);
}
.mega-list {
gap: 4px;
}
.mega-list a {
position: relative;
display: flex;
align-items: center;
min-height: 38px;
padding: 9px 10px 9px 30px;
border-radius: 13px;
font-size: 13.5px;
line-height: 1.25;
color: color-mix(in srgb, var(--text) 82%, var(--text2));
}
.mega-list a::before {
content: "";
position: absolute;
left: 12px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 0 4px rgba(52,217,181,.12);
}
.mega-list a:hover {
background: color-mix(in srgb, var(--rose) 76%, var(--bg2));
color: var(--purple);
padding-left: 32px;
}
.mega-col-cta {
margin-top: auto;
padding-top: 14px;
color: var(--purple);
}
.mega-dropdown-foot {
padding: 16px 22px 20px;
background: color-mix(in srgb, var(--bg2) 72%, transparent);
border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.mega-foot-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 10px 18px;
font-family: var(--vs-font-accent);
font-size: 14px;
border-radius: 999px;
background: linear-gradient(135deg, var(--purple), var(--pink));
color: #fff;
box-shadow: 0 12px 28px rgba(139,53,214,.22);
}
.mega-foot-cta:hover {
transform: translateY(-1px);
box-shadow: 0 16px 34px rgba(139,53,214,.26);
}
.mega-foot-cta--ghost {
background: transparent;
color: var(--purple);
border: 1.5px solid color-mix(in srgb, var(--purple) 35%, var(--border));
box-shadow: none;
}
.mega-foot-cta--ghost:hover {
background: color-mix(in srgb, var(--rose) 80%, var(--bg2));
color: var(--purple);
border-color: color-mix(in srgb, var(--purple) 55%, var(--border));
}
[data-theme="dark"] .nav-links,
[data-theme="dark"] .nav-links .sub-menu,
[data-theme="dark"] .mega-dropdown {
background: color-mix(in srgb, var(--bg2) 88%, transparent);
}
[data-theme="dark"] .mega-col {
background: rgba(255,255,255,.035);
}
.nav-right { display: flex; align-items: center; gap: 10px; }
.theme-toggle {
width: 44px; height: 44px; border-radius: 14px;
background: var(--bg2);
border: 1.5px solid var(--border); cursor: pointer;
padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
transition: all .25s var(--ease);
display: flex; align-items: center; justify-content: center;
position: relative;
}
.theme-toggle:hover {
border-color: var(--pink);
background: var(--rose);
box-shadow: 0 4px 16px rgba(232, 53, 138, .2);
}
.toggle-knob {
width: 26px; height: 26px; border-radius: 8px;
background: transparent;
position: static;
display: flex; align-items: center; justify-content: center;
font-size: 18px; box-shadow: none;
transition: transform .2s var(--spring);
}
[data-theme="light"] .toggle-knob { transform: none; }
[data-theme="dark"]  .toggle-knob { transform: none; }
.nav-cta {
background: var(--grad); color: #fff;
font-family: var(--vs-font-accent);
font-weight: 700; font-size: 14px;
padding: 9px 22px; border-radius: 50px;
text-decoration: none; border: none; cursor: pointer;
box-shadow: 0 4px 20px rgba(232, 53, 138, .35);
transition: transform .2s, box-shadow .2s;
white-space: nowrap;
display: inline-flex; align-items: center; gap: 7px;
position: relative;
}
.nav-cta:hover {
color: #fff;
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 28px rgba(232, 53, 138, .55);
} .cart-btn,
.header-cart {
width: 44px; height: 44px; padding: 0;
border-radius: 14px;
background: var(--bg2);
border: 1.5px solid var(--border);
color: var(--text); font-size: 20px;
text-decoration: none; cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
transition: all .25s var(--ease);
white-space: nowrap;
display: inline-flex; align-items: center; justify-content: center; gap: 0;
position: relative;
}
.cart-btn:hover,
.header-cart:hover {
color: var(--pink);
border-color: var(--pink);
background: var(--rose);
box-shadow: 0 4px 16px rgba(232, 53, 138, .2);
transform: none;
}
.cart-btn span:not(.cart-count) { display: none; }
.cart-count {
position: absolute; top: -6px; right: -6px;
width: 20px; height: 20px; border-radius: 50%;
background: var(--yellow); color: var(--text);
font-size: 11px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--bg);
font-family: var(--vs-font-accent);
animation: vs-badge-pop .4s var(--spring) both;
}
@keyframes vs-badge-pop { from { transform: scale(0); } to { transform: scale(1); } } .vs-mobile-toggle {
display: none;
width: 40px; height: 40px;
background: transparent; border: 1.5px solid var(--border);
border-radius: 12px; cursor: pointer;
flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
}
.vs-mobile-toggle span {
display: block; width: 18px; height: 2px;
background: var(--text); border-radius: 2px;
transition: transform .3s var(--ease), opacity .2s;
}
.vs-mobile-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vs-mobile-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vs-mobile-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .vs-mobile-drawer {
position: fixed; inset: 0;
z-index: 300;
display: flex; flex-direction: column; justify-content: flex-end;
pointer-events: none; visibility: hidden;
}
.vs-mobile-drawer.is-open {
pointer-events: auto; visibility: visible;
}
.vm-scrim {
position: absolute; inset: 0;
background: rgba(6, 0, 18, .72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity .35s ease;
}
.vs-mobile-drawer.is-open .vm-scrim { opacity: 1; }
.vm-panel {
position: relative; z-index: 1;
background: var(--bg);
border-radius: 28px 28px 0 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
max-height: 92dvh;
overflow-y: auto;
transform: translateY(104%);
transition: transform .44s cubic-bezier(.32, .72, 0, 1);
box-shadow: 0 -16px 80px rgba(0, 0, 0, .32);
}
.vs-mobile-drawer.is-open .vm-panel { transform: translateY(0); }
.vm-pull {
width: 44px; height: 5px; border-radius: 3px;
background: var(--border);
margin: 14px auto 0;
}
.vm-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 22px 8px;
}
.vm-logo img { height: 40px !important; }
.vm-close.vs-mobile-close {
width: 40px; height: 40px; border-radius: 50%;
background: var(--bg2); border: 1.5px solid var(--border);
color: var(--text2); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .2s ease; flex: none;
}
.vm-close.vs-mobile-close:hover { background: var(--rose); border-color: var(--pink); color: var(--pink); }
.vm-search-wrap { padding: 4px 22px 12px; }
.vm-search-form {
display: flex; align-items: center; gap: 10px;
background: var(--bg2); border: 1.5px solid var(--border);
border-radius: 14px; padding: 0 16px; height: 50px;
transition: border-color .2s;
}
.vm-search-form:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(232, 53, 138, .12); }
.vm-search-icon { font-size: 18px; flex: none; }
.vm-search-input {
flex: 1; background: none; border: none; outline: none;
font-size: 15px; color: var(--text); font-family: var(--vs-font);
}
.vm-search-input::placeholder { color: var(--text2); }
.vm-nav { padding: 0 22px; }
.vm-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vm-links li a {
display: flex; align-items: center; gap: 14px;
padding: 14px 16px; border-radius: 16px;
background: var(--bg2); border: 1.5px solid var(--border);
color: var(--text); text-decoration: none;
font-family: var(--vs-font-accent); font-weight: 700; font-size: 16px;
transition: all .2s ease;
}
.vm-links li a:hover, .vm-links li a:active {
background: var(--rose); border-color: var(--pink); color: var(--pink);
}
.vm-links .current-menu-item > a { background: var(--rose); border-color: var(--pink); color: var(--pink); }
[data-theme="dark"] .vm-links li a:hover { background: rgba(232, 53, 138, .15); border-color: rgba(232, 53, 138, .4); color: var(--lilac); }
.vm-icon { font-size: 22px; flex: none; }
.vm-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vm-text strong { font-weight: 700; line-height: 1.2; }
.vm-text small { font-size: 11px; color: var(--text2); font-weight: 400; font-family: var(--vs-font); }
.vm-arrow { font-size: 20px; color: var(--text2); margin-left: auto; flex: none; }
@keyframes vm-item-in {
from { opacity: 0; transform: translateY(10px); }
to   { opacity: 1; transform: translateY(0); }
}
.vs-mobile-drawer.is-open .vm-links li { animation: vm-item-in .38s var(--ease) both; }
.vs-mobile-drawer.is-open .vm-links li:nth-child(1) { animation-delay: .1s; }
.vs-mobile-drawer.is-open .vm-links li:nth-child(2) { animation-delay: .15s; }
.vs-mobile-drawer.is-open .vm-links li:nth-child(3) { animation-delay: .2s; }
.vs-mobile-drawer.is-open .vm-links li:nth-child(4) { animation-delay: .25s; }
.vs-mobile-drawer.is-open .vm-links li:nth-child(5) { animation-delay: .3s; }
.vs-mobile-drawer.is-open .vm-links li:nth-child(6) { animation-delay: .35s; }
.vm-actions {
display: flex; gap: 10px;
padding: 14px 22px 0;
}
.vm-action-btn {
flex: 1; display: flex; flex-direction: column;
align-items: center; gap: 5px; padding: 16px 12px;
background: var(--bg2); border: 1.5px solid var(--border);
border-radius: 16px; color: var(--text);
text-decoration: none; font-size: 13px; font-weight: 700;
cursor: pointer; font-family: var(--vs-font-accent);
transition: all .2s ease; position: relative;
}
.vm-action-btn > span:first-child { font-size: 26px; }
.vm-action-btn:hover { background: var(--rose); border-color: var(--pink); color: var(--pink); }
.vm-cart-btn {
background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
color: #fff; border-color: transparent;
}
.vm-cart-btn:hover { opacity: .88; background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%); color: #fff; border-color: transparent; }
.vm-cart-count {
position: absolute; top: 8px; right: 8px;
background: var(--orange); color: #fff;
font-size: 10px; font-weight: 800;
min-width: 18px; height: 18px; border-radius: 9px;
display: flex; align-items: center; justify-content: center;
padding: 0 4px; line-height: 1;
}
.vm-footer {
display: flex; flex-direction: column; gap: 6px;
padding: 14px 22px 22px;
border-top: 1px solid var(--border);
margin-top: 14px;
}
.vm-contact-link {
font-size: 13px; color: var(--text2); text-decoration: none;
display: flex; align-items: center; gap: 8px;
min-height: 36px;
}
.vm-contact-link:hover { color: var(--pink); } .vm-panel {
background:
radial-gradient(circle at 12% 0%, rgba(255,217,61,.14), transparent 26%),
linear-gradient(180deg, color-mix(in srgb, var(--bg) 96%, #fff), var(--bg));
}
.vm-nav {
padding: 4px 18px 0;
}
.vm-links {
gap: 10px;
}
.vm-links li {
list-style: none;
}
.vm-links li a {
position: relative;
min-height: 56px;
padding: 13px 14px;
border-radius: 18px;
background: color-mix(in srgb, var(--bg2) 84%, transparent);
box-shadow: 0 10px 22px rgba(30,10,46,.045);
}
.vm-links > li > a {
font-size: 16px;
font-weight: 850;
}
.vm-links li a:hover,
.vm-links li a:active,
.vm-links .current-menu-item > a,
.vm-links .current-menu-ancestor > a {
background: color-mix(in srgb, var(--rose) 80%, var(--bg2));
border-color: color-mix(in srgb, var(--pink) 58%, var(--border));
color: var(--purple);
}
.vm-links .sub-menu {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
margin: 7px 0 2px 20px;
padding: 0 0 0 12px;
border-left: 2px solid color-mix(in srgb, var(--purple) 18%, var(--border));
}
.vm-links .sub-menu li a {
min-height: 42px;
padding: 9px 12px;
border-radius: 14px;
background: transparent;
border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
box-shadow: none;
font-family: var(--vs-font-body);
font-size: 14px;
font-weight: 700;
color: var(--text2);
}
.vm-links .sub-menu li a::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mint);
flex: 0 0 auto;
}
.vm-links .sub-menu .vm-icon,
.vm-links .sub-menu .vm-text small,
.vm-links .sub-menu .vm-arrow {
display: none;
}
.vm-links .sub-menu .vm-text {
gap: 0;
}
.vm-links .sub-menu .vm-text strong {
font-family: var(--vs-font-body);
font-size: 14px;
line-height: 1.25;
}
.vm-actions {
padding-inline: 18px;
}
.vm-footer {
padding-inline: 18px;
} .btn-primary,
.button.alt,
.wp-block-button__link,
button.btn-primary {
background: var(--grad); color: #fff;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 15px; padding: 13px 28px;
border-radius: 14px; border: none; cursor: pointer;
text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
box-shadow: 0 6px 24px rgba(232, 53, 138, .38);
transition: transform .2s var(--ease), box-shadow .2s, color .2s;
line-height: 1.2;
}
.btn-primary:hover,
.wp-block-button__link:hover {
color: #fff; transform: translateY(-3px);
box-shadow: 0 14px 36px rgba(232, 53, 138, .55);
}
.btn-outline {
background: transparent; color: var(--purple);
border: 2px solid var(--purple);
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 15px; padding: 11px 26px;
border-radius: 14px; cursor: pointer;
text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
transition: background .2s, color .2s, transform .2s;
}
.btn-outline:hover {
background: var(--purple); color: #fff; transform: translateY(-2px);
}
[data-theme="dark"] .btn-outline { color: var(--lilac); border-color: var(--lilac); }
[data-theme="dark"] .btn-outline:hover { background: var(--lilac); color: var(--vs-bg); }
.btn-white {
background: #fff; color: var(--pink);
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 15px; padding: 13px 28px;
border-radius: 14px; border: none; cursor: pointer;
text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
transition: transform .2s, box-shadow .2s;
}
.btn-white:hover { color: var(--pink); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }
.btn-ghost {
background: rgba(255, 255, 255, .15); color: #fff;
border: 2px solid rgba(255, 255, 255, .4);
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 15px; padding: 11px 26px;
border-radius: 14px; cursor: pointer;
text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
transition: background .2s, border-color .2s;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .28); border-color: rgba(255, 255, 255, .7); }
.trust-pill,
.trust-chip {
display: inline-flex; align-items: center; gap: 7px;
padding: 5px 12px; border-radius: 50px;
background: var(--bg2); border: 1.5px solid var(--border);
font-size: 11px; font-weight: 600; color: var(--text2);
}
.trust-chip {
padding: 7px 16px; font-size: 13px;
background: var(--card-bg); box-shadow: var(--shadow);
transition: border-color .3s, transform .3s var(--ease);
}
.trust-chip:hover { border-color: var(--pink); transform: translateY(-3px); }
.trust-row {
display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
margin-top: 16px;
} .hero {
position: relative; z-index: 2;
padding: 130px 0 64px;
background: transparent;
}
.vs-slide-inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 56px;
display: grid; grid-template-columns: 1.05fr 1fr;
align-items: center; gap: 56px;
min-height: 72vh;
}
.hero-bg-img {
position: absolute; inset: 0; z-index: 0;
background-position: center; background-size: cover; background-repeat: no-repeat;
opacity: 0; transition: opacity .8s ease;
}
[data-theme="light"] .hero-bg-img { opacity: .07; }
[data-theme="dark"]  .hero-bg-img { opacity: .04; }
.vs-slide-content { position: relative; z-index: 2; }
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 10px;
background: var(--rose);
border: 1.5px solid rgba(232, 53, 138, .25);
color: var(--pink);
font-weight: 700; font-size: 12px;
letter-spacing: .06em; text-transform: uppercase;
padding: 7px 18px; border-radius: 50px;
margin-bottom: 20px;
}
[data-theme="dark"] .hero-eyebrow { background: rgba(232, 53, 138, .12); }
@keyframes vs-eyebrow-pop {
from { transform: scale(0) rotate(-12deg); opacity: 0; }
to   { transform: scale(1) rotate(0); opacity: 1; }
}
.hero h1 {
font-family: var(--vs-font-display);
font-size: clamp(40px, 4.6vw, 72px);
font-weight: 900; line-height: 1.04;
letter-spacing: -0.015em;
margin-bottom: 22px;
color: var(--heading);
}
.h1-line { display: block; }
.hi1 {
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hi2 {
background: var(--grad3);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p {
font-size: 17px; line-height: 1.7;
color: var(--text2);
max-width: 480px; margin-bottom: 32px;
}
.hero-btns {
display: flex; gap: 12px; flex-wrap: wrap;
}
.hero-trust {
display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px;
}
@keyframes vs-fade-up {
from { transform: translateY(28px); opacity: 0; }
to   { transform: translateY(0); opacity: 1; }
} .hero {
overflow: hidden;
max-width: 100vw;
min-height: 100vh;
padding-top: 100px;
padding-bottom: 180px;
display: flex; align-items: center;
}
.vs-slide-inner {
position: relative; z-index: 3;
padding-top: 0;
padding-bottom: 0;
min-height: 0;
width: 100%;
}
.hero-landscape {
position: absolute;
left: 0; right: 0; bottom: -1px;
width: 100vw;
max-width: 100vw;
height: 200px;
z-index: 1;
pointer-events: none;
display: block;
opacity: .95;
}
[data-theme="dark"] .hero-landscape { opacity: .55; } .home .hero-bg-img,
body.home .hero-bg-img {
position: fixed;
}
.home .hero-landscape,
body.home .hero-landscape {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 1;
}
@media (max-width: 1100px) {
.hero { padding-top: 90px; padding-bottom: 150px; }
.hero-landscape { height: 170px; }
}
@media (max-width: 960px) {
.hero { min-height: auto; padding-top: 88px; padding-bottom: 130px; align-items: flex-start; }
.hero-landscape { height: 140px; }
}
@media (max-width: 560px) {
.hero { padding-top: 84px; padding-bottom: 110px; }
.hero-landscape { height: 110px; }
} @media (max-height: 880px) and (min-width: 769px) {
.book-scene { width: 380px; height: 480px; }
.book { width: 290px; height: 400px; left: 44px; top: 38px; }
.book-title { font-size: 17px; bottom: 52px; }
}
@media (max-height: 760px) and (min-width: 769px) {
.book-scene { width: 320px; height: 410px; }
.book { width: 250px; height: 350px; left: 34px; top: 30px; }
.book-title { font-size: 16px; bottom: 48px; }
.book-subtitle { bottom: 34px; }
.book-author { bottom: 14px; }
.book-badge { width: 54px; height: 54px; font-size: 10px; }
.ha-ring  { width: 110px; height: 110px; }
.ha-ring2 { width: 70px;  height: 70px; }
}  .vs-hero-slider {
position: relative;
width: 100%;
flex: 1;
min-height: 72vh;
display: flex;
align-items: stretch;
} .vs-slide {
position: absolute;
inset: 0;
width: 100%;
display: flex;
align-items: center;
opacity: 0;
pointer-events: none;
will-change: opacity;
}
.vs-slide--active {
opacity: 1;
pointer-events: auto;
} .vs-slide--entering {
animation: vs-slide-reveal 220ms ease-out both;
}
@keyframes vs-slide-reveal {
from { opacity: 0; }
to   { opacity: 1; }
} .vs-hero-slider[data-dir="next"] .vs-slide--entering [data-anim] {
animation: vs-enter-r 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--anim-i, 0) * 70ms + 55ms);
}
.vs-hero-slider[data-dir="prev"] .vs-slide--entering [data-anim] {
animation: vs-enter-l 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--anim-i, 0) * 70ms + 55ms);
}
@keyframes vs-enter-r {
from { transform: translate(34px, 14px); opacity: 0; filter: blur(6px); }
to   { transform: translate(0, 0);       opacity: 1; filter: blur(0);   }
}
@keyframes vs-enter-l {
from { transform: translate(-34px, 14px); opacity: 0; filter: blur(6px); }
to   { transform: translate(0, 0);        opacity: 1; filter: blur(0);   }
} .vs-hero-slider[data-dir="next"] .vs-slide--entering .vs-s1-photo {
animation: vs-enter-photo-r 820ms cubic-bezier(0.34, 1.15, 0.64, 1) both 55ms;
}
.vs-hero-slider[data-dir="prev"] .vs-slide--entering .vs-s1-photo {
animation: vs-enter-photo-l 820ms cubic-bezier(0.34, 1.15, 0.64, 1) both 55ms;
}
@keyframes vs-enter-photo-r {
from { transform: translate(68px, 0) scale(0.88); opacity: 0; filter: blur(8px); }
to   { transform: translate(0, 0)    scale(1);    opacity: 1; filter: blur(0);   }
}
@keyframes vs-enter-photo-l {
from { transform: translate(-68px, 0) scale(0.88); opacity: 0; filter: blur(8px); }
to   { transform: translate(0, 0)     scale(1);    opacity: 1; filter: blur(0);   }
} .vs-slide--entering .vs-slide-visual {
animation: vs-enter-visual 860ms cubic-bezier(0.34, 1.2, 0.64, 1) both;
animation-delay: calc(var(--anim-i, 0) * 70ms + 55ms);
}
@keyframes vs-enter-visual {
from { transform: translateY(28px) scale(0.88); opacity: 0; filter: blur(6px); }
to   { transform: translateY(0)    scale(1);    opacity: 1; filter: blur(0);   }
} .vs-hero-slider[data-dir="next"] .vs-slide--exiting [data-anim] {
animation: vs-exit-l 420ms cubic-bezier(0.4, 0, 0.8, 0) both;
animation-delay: calc(var(--anim-i, 0) * 22ms);
}
.vs-hero-slider[data-dir="prev"] .vs-slide--exiting [data-anim] {
animation: vs-exit-r 420ms cubic-bezier(0.4, 0, 0.8, 0) both;
animation-delay: calc(var(--anim-i, 0) * 22ms);
}
@keyframes vs-exit-l {
from { transform: translate(0, 0)        scale(1);    opacity: 1; filter: blur(0);   }
to   { transform: translate(-46px, -6px) scale(0.93); opacity: 0; filter: blur(5px); }
}
@keyframes vs-exit-r {
from { transform: translate(0, 0)       scale(1);    opacity: 1; filter: blur(0);   }
to   { transform: translate(46px, -6px) scale(0.93); opacity: 0; filter: blur(5px); }
} .vs-slide-h1 {
font-family: var(--vs-font-display);
font-size: clamp(40px, 4.6vw, 72px);
font-weight: 900; line-height: 1.04;
letter-spacing: -0.015em;
margin-bottom: 22px;
color: var(--heading);
}
.vs-slide-h2 {
font-family: var(--vs-font-display);
font-size: clamp(34px, 3.8vw, 60px);
font-weight: 900; line-height: 1.08;
letter-spacing: -0.015em;
margin-bottom: 20px;
color: var(--heading);
} .vs-slide-inner--tamara {
grid-template-columns: 1fr 1.15fr;
align-items: center;
} .vs-s2-meta {
font-size: 13px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--text2); margin-bottom: 4px;
}
.vs-s2-author {
font-size: 16px; font-weight: 600;
color: var(--text2); margin-bottom: 28px;
font-family: var(--vs-font-accent);
} .vs-slide-price {
font-size: 26px; font-weight: 800;
color: var(--purple); margin: 4px 0 20px;
line-height: 1.1;
}
.vs-slide-price del {
font-size: 18px; font-weight: 600;
color: var(--text2); opacity: .7; margin-right: 8px;
}
.vs-slide-price ins { text-decoration: none; } .vs-slider-controls {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
align-items: center;
gap: 16px;
}
.vs-slider-dots {
display: flex;
gap: 8px;
align-items: center;
}
.vs-dot {
width: 10px; height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, .45);
border: none;
cursor: pointer;
padding: 0;
transition: width .35s var(--ease), background .35s var(--ease);
}
.vs-dot--active {
width: 28px;
border-radius: 5px;
background: var(--pink);
}
[data-theme="light"] .vs-dot { background: rgba(0, 0, 0, .2); }
[data-theme="light"] .vs-dot--active { background: var(--pink); } .vs-slider-arrow {
width: 44px; height: 44px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, .3);
background: rgba(255, 255, 255, .12);
color: #fff;
font-size: 26px; line-height: 1;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s, opacity .2s;
backdrop-filter: blur(6px);
}
.vs-slider-arrow:hover {
background: rgba(255, 255, 255, .25);
}
[data-theme="light"] .vs-slider-arrow {
border-color: rgba(0, 0, 0, .15);
background: rgba(255, 255, 255, .6);
color: var(--heading);
}
[data-theme="light"] .vs-slider-arrow:hover {
background: rgba(255, 255, 255, .85);
} .vs-slide-visual {
position: relative; z-index: 2;
display: flex; justify-content: center; align-items: center;
}
.book-scene { perspective: 1100px; width: 440px; height: 560px; position: relative; }
.book {
width: 340px; height: 470px; position: absolute;
top: 44px; left: 50px;
transform: none;
transition: transform .4s var(--ease), filter .4s var(--ease);
cursor: pointer;
filter: drop-shadow(0 28px 56px rgba(139, 53, 214, .45))
drop-shadow(0 8px 20px rgba(30, 10, 46, .28));
}
.book:hover { transform: translateY(-8px); }
.book-spine { display: none; }
.book-front {
position: absolute; inset: 0;
border-radius: 4px 16px 16px 4px;
background: var(--card-bg);
overflow: hidden;
} .book-front-img {
position: absolute; inset: 0;
background-position: center; background-size: cover;
mix-blend-mode: normal;
opacity: 1;
z-index: 0;
} .book-front::before {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 38%;
background: linear-gradient(to top, rgba(15, 6, 30, .72), rgba(15, 6, 30, 0));
z-index: 1;
pointer-events: none;
} .book-front::after {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0;
width: 8px;
background: linear-gradient(to left, rgba(0,0,0,.18), transparent);
z-index: 2;
pointer-events: none;
}
.book-glow {
position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px;
border-radius: 20px; background: var(--grad);
filter: blur(30px); opacity: .4; z-index: -1;
animation: vs-book-glow 4s ease-in-out infinite;
}
@keyframes vs-book-glow {
0%, 100% { opacity: .3; transform: scale(1); }
50%      { opacity: .55; transform: scale(1.05); }
}
.book-spine {
position: absolute; left: -20px; top: 6px; bottom: 6px;
width: 20px;
background: linear-gradient(135deg, #9B25A8, #5A1A8A);
transform-origin: right;
transform: rotateY(90deg) translateX(-10px);
border-radius: 2px 0 0 2px;
}
.book-title {
position: absolute;
left: 22px; right: 22px; bottom: 56px;
font-family: var(--vs-font-display); font-weight: 900;
font-size: 18px; color: #fff; text-align: center;
line-height: 1.2; letter-spacing: -0.01em;
z-index: 3;
text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.book-subtitle {
position: absolute;
left: 22px; right: 22px; bottom: 38px;
font-size: 10px; font-weight: 700;
letter-spacing: .14em; text-transform: uppercase;
color: rgba(255, 255, 255, .85);
text-align: center;
z-index: 3;
text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.book-author {
position: absolute;
left: 22px; right: 22px; bottom: 16px;
font-size: 12px; color: rgba(255, 255, 255, .92);
font-weight: 600; text-align: center;
font-family: var(--vs-font-accent);
z-index: 3;
text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.book-badge {
position: absolute; top: 20px; right: 20px;
width: 64px; height: 64px; border-radius: 50%;
background: var(--yellow); color: #151519;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
font-family: var(--vs-font-accent); font-weight: 800;
font-size: 11px; text-align: center; line-height: 1.1;
z-index: 3;
animation: vs-badge-spin 12s linear infinite;
box-shadow: 0 6px 20px rgba(255, 217, 61, .55);
}
@keyframes vs-badge-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.book-stars {
position: absolute;
left: 22px; right: 22px; top: 18px;
color: var(--yellow); font-size: 13px;
letter-spacing: 2px; text-align: left;
z-index: 3;
text-shadow: 0 1px 4px rgba(0,0,0,.6);
} .book-emoji { display: none; }
@keyframes vs-icon-dance {
0%, 100% { transform: translateY(0) rotate(0); }
50%      { transform: translateY(-6px) rotate(8deg); }
}
.book-card {
position: absolute;
background: rgba(255, 255, 255, .65);
-webkit-backdrop-filter: blur(12px) saturate(140%);
backdrop-filter: blur(12px) saturate(140%);
border: 1px solid rgba(255, 255, 255, .55);
border-radius: 18px;
padding: 12px 16px; box-shadow: var(--shadow-lg);
z-index: 4;
transition: transform .35s var(--spring);
}
[data-theme="dark"] .book-card {
background: rgba(255, 255, 255, .12);
border-color: rgba(255, 255, 255, .18);
}
.book-card:hover { transform: translateY(-3px) rotate(0)!important; } .bc-right  { top: -8px;  right: 24px; left: auto;  bottom: auto; animation: vs-hf-float1 5s ease-in-out infinite; }
.bc-bottom { top: -8px;  left: 24px;  right: auto; bottom: auto; width: 168px; animation: vs-hf-float2 6s ease-in-out infinite .8s; }
@keyframes vs-hf-float1 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes vs-hf-float2 { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-7px) rotate(-2deg); } }
.bcard-icon  { font-size: 26px; margin-bottom: 4px; }
.bcard-label { font-size: 10px; font-weight: 700; color: var(--muted); white-space: nowrap; letter-spacing: .06em; text-transform: uppercase; }
.bcard-val   { font-family: var(--vs-font-display); font-weight: 800; font-size: 17px; color: var(--text); }
.ha-ring,
.ha-ring2 {
position: absolute; border-radius: 50%;
border: 2px dashed rgba(232, 53, 138, .3);
animation: vs-ring-spin 18s linear infinite;
}
.ha-ring  { width: 150px; height: 150px; top: -28px; left: -10px; }
.ha-ring::before {
content: '⭐'; position: absolute; top: -11px; left: 50%;
transform: translateX(-50%); font-size: 18px;
}
.ha-ring2 {
width: 88px; height: 88px; bottom: 56px; right: 8px;
border-color: rgba(139, 53, 214, .28);
animation: vs-ring-spin 12s linear infinite reverse;
}
.ha-ring2::before {
content: '✨'; position: absolute; top: -9px; left: 50%;
transform: translateX(-50%); font-size: 13px;
}
@keyframes vs-ring-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .page-hero {
min-height: 44vh;
display: flex; align-items: center; justify-content: center;
text-align: center;
padding: 130px 48px 64px;
position: relative; z-index: 2; overflow: hidden;
}
.page-hero-bg {
position: absolute; inset: 0; z-index: 0;
background-position: center; background-size: cover; background-repeat: no-repeat;
}
.page-hero-bg::after {
content: ''; position: absolute; inset: 0;
background: var(--grad); opacity: .82;
}
.page-hero-content { position: relative; z-index: 2; max-width: 1200px; }
.page-hero .hero-eyebrow {
background: rgba(255, 255, 255, .18);
border-color: rgba(255, 255, 255, .32);
color: #fff;
}
.page-hero h1 {
font-family: var(--vs-font-display);
font-weight: 900; font-size: clamp(36px, 5vw, 68px);
color: #fff; line-height: 1.08;
margin-bottom: 16px;
animation: vs-fade-up .8s var(--ease) both .7s;
}
.page-hero p {
font-size: 17px; color: rgba(255, 255, 255, .88);
line-height: 1.72; max-width: 580px; margin: 0 auto 32px;
animation: vs-fade-up .8s var(--ease) both .85s;
}
.hero-chips {
display: flex; justify-content: center; gap: 12px;
flex-wrap: wrap;
animation: vs-fade-up .8s var(--ease) both 1s;
}
.hero-chip {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(255, 255, 255, .16);
border: 1.5px solid rgba(255, 255, 255, .3);
color: #fff; font-size: 13px; font-weight: 600;
padding: 7px 16px; border-radius: 50px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.wave-bottom {
position: absolute; bottom: -1px; left: 0; right: 0;
line-height: 0; z-index: 3;
}
.wave-bottom svg { display: block; width: 100%; }
.wave-divider {
position: relative; z-index: 2;
line-height: 0; margin-bottom: -1px;
}
.wave-divider svg { display: block; width: 100%; } .section { position: relative; z-index: 2; }
.section-inner { max-width: 1440px; margin: 0 auto; padding: 80px; }
.section-header { margin-bottom: 52px; }
.section-tag {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--vs-font-accent);
font-weight: 700; font-size: 12px;
letter-spacing: .08em; text-transform: uppercase;
color: var(--pink);
background: var(--rose);
border: 1.5px solid rgba(232, 53, 138, .22);
padding: 6px 16px; border-radius: 50px;
margin-bottom: 16px;
}
[data-theme="dark"] .section-tag { background: rgba(232, 53, 138, .12); }
.section-title {
font-family: var(--vs-font-display);
font-weight: 900; font-size: clamp(30px, 3.5vw, 48px);
line-height: 1.14; margin-bottom: 16px;
}
.section-sub {
font-size: 16px; color: var(--text2);
line-height: 1.7; max-width: 600px;
} .ticker-wrap {
position: relative; z-index: 2; overflow: hidden;
border-top: 1.5px solid var(--border);
border-bottom: 1.5px solid var(--border);
padding: 12px 0; background: var(--bg2);
}
.ticker {
display: flex; width: max-content;
animation: vs-ticker-scroll 26s linear infinite;
}
.ticker:hover { animation-play-state: paused; }
.ticker-item {
display: flex; align-items: center; gap: 14px;
padding: 0 24px;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 14px; color: var(--text2); white-space: nowrap;
}
.ticker-sep { color: var(--pink); opacity: .7; font-size: 18px; }
@keyframes vs-ticker-scroll {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
} .stats-wrap { position: relative; z-index: 2; padding: 52px 80px; }
.stats-grid {
max-width: 1100px; margin: 0 auto;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.stat-card {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-md);
padding: 28px 24px; text-align: center;
box-shadow: var(--shadow);
transition: transform .3s var(--ease), box-shadow .3s;
}
.stat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.stat-num {
font-family: var(--vs-font-display);
font-size: 38px; font-weight: 900;
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 4px;
}
.stat-label { font-size: 13px; font-weight: 600; color: var(--muted); } .progs-bg { background: var(--bg2); }
.progs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rubrika-block + .rubrika-block { margin-top: 56px; }
.rubrika-title {
font-family: var(--vs-font-display); font-weight: 800;
font-size: clamp(22px, 3vw, 30px);
margin: 0 0 24px; color: var(--text);
display: inline-flex; align-items: center; gap: 12px;
}
.rubrika-title::before {
content: ""; width: 36px; height: 3px; border-radius: 2px;
background: linear-gradient(90deg, var(--pink), var(--orange, #f4681a));
}
.rubrika-empty {
text-align: center; color: var(--text2);
padding: 48px 16px; border: 1.5px dashed var(--border); border-radius: var(--rad-lg);
} .hero-chip.is-filter {
cursor: pointer;
font: inherit;
border: 1px solid rgba(255,255,255,.28);
transition: background .2s, border-color .2s, transform .15s;
}
.hero-chip.is-filter:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }
.hero-chip.is-filter.is-active {
background: var(--pink); color: #fff; border-color: var(--pink);
box-shadow: 0 6px 18px rgba(232,53,138,.35);
}
.prog-card {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 32px 28px;
box-shadow: var(--shadow);
transition: transform .35s var(--ease), box-shadow .35s, border-color .25s;
position: relative; overflow: hidden;
}
.prog-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--pink); }
.pc-icon {
width: 56px; height: 56px; border-radius: 16px;
display: flex; align-items: center; justify-content: center;
font-size: 26px; margin-bottom: 18px;
}
.pc1 .pc-icon { background: linear-gradient(135deg, rgba(232,53,138,.12), rgba(244,104,26,.12)); }
.pc2 .pc-icon { background: linear-gradient(135deg, rgba(139,53,214,.12), rgba(195,132,252,.12)); }
.pc3 .pc-icon { background: linear-gradient(135deg, rgba(255,217,61,.15), rgba(255,179,138,.12)); }
.prog-card h3 {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 19px; line-height: 1.3;
margin-bottom: 10px;
}
.prog-card p {
font-size: 14px; color: var(--text2);
line-height: 1.65; margin-bottom: 16px;
}
.pc-age {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700;
padding: 5px 12px; border-radius: 50px;
background: var(--rose); color: var(--pink);
border: 1px solid rgba(232, 53, 138, .2);
margin-bottom: 14px;
}
[data-theme="dark"] .pc-age { background: rgba(232, 53, 138, .1); }
.pc-cta {
font-family: var(--vs-font-accent);
font-weight: 700; font-size: 13px;
color: var(--pink); text-decoration: none;
display: inline-flex; align-items: center; gap: 4px;
transition: gap .2s;
}
.pc-cta:hover { gap: 8px; color: var(--pink); }
.prog-wide {
grid-column: span 3;
background:
radial-gradient(circle at 90% 20%, rgba(255,217,61,.18), transparent 40%),
radial-gradient(circle at 10% 90%, rgba(52,217,181,.16), transparent 45%),
var(--grad);
border: 3px solid rgba(255,255,255,.5); color: #fff;
padding: 44px 52px;
border-radius: var(--rad-lg);
position: relative; overflow: hidden;
box-shadow:
0 0 0 6px rgba(232,53,138,.08),
0 16px 48px rgba(139,53,214,.28);
}
[data-theme="dark"] .prog-wide { border-color: rgba(255,255,255,.18); box-shadow: 0 0 0 6px rgba(232,53,138,.06), 0 16px 48px rgba(0,0,0,.5); }
.prog-wide::before {
content: ''; position: absolute;
top: -40px; right: -40px;
width: 240px; height: 240px;
border: 2px dashed rgba(255,255,255,.18);
border-radius: 50%;
animation: vs-ring-spin 28s linear infinite;
pointer-events: none;
}
.prog-wide::after {
content: ''; position: absolute;
bottom: -60px; right: 80px;
width: 140px; height: 140px;
border: 2px dashed rgba(255,255,255,.12);
border-radius: 50%;
animation: vs-ring-spin 18s linear infinite reverse;
pointer-events: none;
}
.prog-wide-inner {
display: grid; grid-template-columns: 1fr auto;
align-items: center; gap: 40px; height: 100%;
position: relative; z-index: 2;
}
.prog-wide h3 {
color: #fff; font-size: clamp(22px, 2.4vw, 32px);
font-weight: 900; letter-spacing: -0.01em;
margin-bottom: 14px;
line-height: 1.18;
}
.prog-wide p {
color: rgba(255, 255, 255, .9);
font-size: 16px; line-height: 1.65;
max-width: 540px;
margin-bottom: 22px;
}
.prog-wide .pc-age {
background: rgba(255, 255, 255, .22);
color: #fff; border-color: rgba(255,255,255,.12);
font-weight: 700;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.prog-wide .pc-cta {
color: #fff;
background: rgba(255,255,255,.16);
padding: 10px 20px; border-radius: 50px;
border: 1.5px solid rgba(255,255,255,.28);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: background .25s, transform .2s;
}
.prog-wide .pc-cta:hover {
background: #fff; color: var(--pink);
gap: 8px; transform: translateY(-2px);
}
.prog-wide-vis {
width: 180px; height: 180px;
border-radius: 28px;
background: rgba(255,255,255,.14);
border: 2px solid rgba(255,255,255,.22);
display: flex; align-items: center; justify-content: center;
font-size: 88px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow: inset 0 4px 16px rgba(255,255,255,.12), 0 12px 32px rgba(0,0,0,.18);
animation: vs-pw-tilt 6s ease-in-out infinite;
}
@keyframes vs-pw-tilt {
0%,100% { transform: rotate(-3deg) translateY(0); }
50%     { transform: rotate(3deg) translateY(-6px); }
} .shows-bg { background: var(--bg); }
.shows-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.show-card {
background: var(--card-bg); border: 1.5px solid var(--border);
border-radius: var(--rad-lg); overflow: hidden;
box-shadow: var(--shadow);
transition: transform .35s var(--ease), box-shadow .35s;
}
.show-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.show-thumb {
aspect-ratio: 4 / 3; position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center;
font-size: 56px;
background-position: center; background-size: cover;
}
.show-thumb::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, .08), rgba(139, 53, 214, .25));
}
.show-thumb-emoji {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 56px; z-index: 2;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .3));
} .progs-cards-section .show-thumb-emoji { display: none; } .shows-bg .show-thumb-emoji {
top: 12px; right: 12px; left: auto;
transform: none;
font-size: 30px;
}
.show-body { padding: 20px 22px; }
.show-body h3 {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 18px; margin-bottom: 8px;
}
.show-body p {
font-size: 13px; color: var(--text2);
line-height: 1.6; margin-bottom: 12px;
}
.show-tag {
display: inline-flex; font-size: 11px; font-weight: 700;
padding: 4px 12px; border-radius: 50px;
background: var(--rose); color: var(--pink);
border: 1px solid rgba(232, 53, 138, .2);
}
[data-theme="dark"] .show-tag { background: rgba(232, 53, 138, .1); }
.section-cta { display: flex; justify-content: center; margin-top: 36px; }
.new-tag {
background: linear-gradient(135deg, var(--mint), #5CE0D5);
color: #0D4A40; border: none;
} .show-feature {
display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
align-items: center; padding: 72px 80px;
max-width: 1440px; margin: 0 auto;
}
.show-feature.reverse { direction: rtl; }
.show-feature.reverse > * { direction: ltr; }
.show-img-wrap {
position: relative; border-radius: var(--rad-lg);
overflow: hidden; box-shadow: var(--shadow-lg);
}
.show-img-wrap img {
width: 100%; height: 380px; object-fit: cover;
transition: transform .6s var(--ease);
}
.show-img-wrap:hover img { transform: scale(1.04); }
.show-img-wrap::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(135deg, rgba(232,53,138,.1), rgba(139,53,214,.12));
}
.show-badge {
position: absolute; top: 16px; left: 16px; z-index: 2;
font-family: var(--vs-font-accent);
font-weight: 800; font-size: 11px;
padding: 5px 14px; border-radius: 50px;
letter-spacing: .06em; text-transform: uppercase;
}
.badge-new { background: linear-gradient(135deg, var(--mint), #5CE0D5); color: #0D4A40; }
.badge-mid { background: var(--grad); color: #fff; }
.badge-low { background: linear-gradient(135deg, var(--yellow), var(--peach)); color: #151519; }
.img-stat {
position: absolute; bottom: 16px; right: 16px; z-index: 2;
background: var(--card-bg); border: 1.5px solid var(--border);
border-radius: 14px; padding: 10px 16px;
box-shadow: var(--shadow-lg);
display: flex; align-items: center; gap: 10px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
[data-theme="dark"] .img-stat { background: rgba(20, 10, 40, .85); }
.img-stat-icon { font-size: 22px; }
.img-stat-text { font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.img-stat-text strong {
display: block; font-size: 14px; color: var(--text);
font-family: var(--vs-font-accent);
}
.show-text .section-tag { margin-bottom: 12px; }
.show-text h2 {
font-family: var(--vs-font-display); font-weight: 900;
font-size: clamp(26px, 3vw, 40px);
line-height: 1.14; margin-bottom: 16px;
}
.show-text p {
font-size: 15px; color: var(--text2);
line-height: 1.78; margin-bottom: 24px;
}
.show-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.show-meta-chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--bg2); border: 1.5px solid var(--border);
border-radius: 50px; padding: 6px 14px;
font-size: 12px; font-weight: 600; color: var(--text2);
}
.show-btns { display: flex; gap: 12px; flex-wrap: wrap; } .about-bg { background: var(--bg); }
.about-inner {
display: grid; grid-template-columns: 1fr 1fr;
gap: 64px; align-items: center;
}
.about-left h2 {
font-family: var(--vs-font-display);
font-weight: 900; font-size: clamp(28px, 3vw, 42px);
line-height: 1.2; margin: 12px 0 18px;
}
.about-left p {
font-size: 15px; color: var(--text2);
line-height: 1.75; margin-bottom: 28px;
}
.founder-chip {
display: inline-flex; align-items: center; gap: 10px;
background: var(--rose);
border: 1.5px solid rgba(232, 53, 138, .2);
border-radius: 50px; padding: 8px 16px;
margin-bottom: 24px;
}
[data-theme="dark"] .founder-chip { background: rgba(232, 53, 138, .1); }
.founder-av {
width: 36px; height: 36px; border-radius: 50%;
background: var(--grad);
display: flex; align-items: center; justify-content: center;
font-size: 20px; flex-shrink: 0; color: #fff;
}
.founder-chip span {
font-family: var(--vs-font-accent);
font-weight: 700; font-size: 14px; color: var(--text);
}
.about-cards { display: flex; flex-direction: column; gap: 14px; }
.af-card {
background: var(--card-bg); border: 1.5px solid var(--border);
border-radius: var(--rad-md); padding: 20px 22px;
display: flex; gap: 16px; align-items: flex-start;
box-shadow: var(--shadow);
transition: transform .3s, box-shadow .3s;
}
.af-card:hover { transform: translateX(6px); box-shadow: var(--shadow-lg); }
.af-icon {
width: 44px; height: 44px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; flex-shrink: 0;
}
.af-icon.o { background: linear-gradient(135deg, rgba(244,104,26,.12), rgba(255,179,138,.12)); }
.af-icon.p { background: linear-gradient(135deg, rgba(139,53,214,.12), rgba(195,132,252,.12)); }
.af-icon.g { background: linear-gradient(135deg, rgba(52,217,181,.12), rgba(92,224,213,.12)); }
.af-card h4 {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 16px; margin-bottom: 4px;
}
.af-card p { font-size: 13px; color: var(--text2); line-height: 1.6; }
.about-img-wrap {
position: relative; border-radius: var(--rad-lg);
overflow: hidden; box-shadow: var(--shadow-lg);
}
.about-img-wrap img {
width: 100%; height: 360px; object-fit: cover;
}
.about-img-wrap::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(232,53,138,.08), rgba(139,53,214,.08));
} .happy-bg { background: var(--bg); }
.happy-wrap {
max-width: 820px; margin: 0 auto;
text-align: center;
}
.happy-wrap .section-tag {
display: flex; width: fit-content; margin: 0 auto 16px;
}
.happy-wrap .section-sub { margin: 0 auto 40px; }
.feeling-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.feeling-btn {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: 22px; padding: 24px 12px;
cursor: pointer;
display: flex; flex-direction: column;
align-items: center; gap: 10px;
box-shadow: var(--shadow);
transition: transform .3s var(--ease), border-color .25s, box-shadow .3s;
font-family: var(--vs-font-body);
}
.feeling-btn:hover {
transform: translateY(-8px) scale(1.06);
border-color: var(--pink); box-shadow: var(--shadow-lg);
}
.feeling-btn span:first-child {
font-size: 36px;
transition: transform .25s var(--spring);
}
.feeling-btn:hover span:first-child { transform: scale(1.25) rotate(-8deg); }
.feeling-btn span:last-child {
font-family: var(--vs-font-accent);
font-weight: 700; font-size: 12px; color: var(--text2);
}
.feeling-msg {
margin-top: 28px; min-height: 32px;
font-family: var(--vs-font-display);
font-weight: 700; font-size: 18px;
color: var(--pink);
} .game-bg {
background: none;
position: relative;
overflow: hidden;
}
.game-bg::before,
.game-bg::after { content: none; }
.game-wrap { max-width: 880px; margin: 0 auto; position: relative; z-index: 2; }
.game-shell {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
position: relative;
}
.game-header-strip {
display: flex; gap: 14px; align-items: center;
padding: 20px 22px;
border-bottom: 1.5px solid var(--border);
background: linear-gradient(135deg, rgba(255,217,61,.12), rgba(255,179,138,.1));
}
[data-theme="dark"] .game-header-strip {
background: linear-gradient(135deg, rgba(255,217,61,.06), rgba(232,53,138,.06));
}
.game-icon-bg {
width: 48px; height: 48px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 24px; flex-shrink: 0;
background: linear-gradient(135deg, rgba(255,217,61,.18), rgba(255,179,138,.15));
}
.game-header-strip h3 {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 19px; margin-bottom: 2px;
}
.game-header-strip p { font-size: 12px; color: var(--muted); }
.game-arena-wrap {
position: relative;
padding: 16px 18px 18px;
}
.game-hud {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 10px; margin-bottom: 12px;
}
.hud-card {
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: 14px; padding: 10px 14px;
text-align: center;
}
.hud-label {
font-family: var(--vs-font-accent);
font-size: 10px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: var(--muted); margin-bottom: 2px;
}
.hud-value {
font-family: var(--vs-font-display);
font-weight: 900; font-size: 22px;
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.1;
}
.hud-lives { display: flex; gap: 4px; justify-content: center; font-size: 18px; }
.hud-lives .gone { filter: grayscale(1); opacity: .35; }
.game-arena {
position: relative; height: 380px;
background: linear-gradient(180deg, #C8E7FA 0%, #FFE9F2 100%);
border-radius: var(--rad-md);
overflow: hidden;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.game-arena.is-running { cursor: none; }
[data-theme="dark"] .game-arena {
background: linear-gradient(180deg, #1A1230 0%, #2A1340 100%);
}
.game-arena::before {
content: ''; position: absolute; inset: 0;
background-image:
radial-gradient(circle at 20% 20%, rgba(255,217,61,.18), transparent 40%),
radial-gradient(circle at 80% 30%, rgba(232,53,138,.15), transparent 45%);
pointer-events: none;
}
.basket {
position: absolute; bottom: 12px; left: 50%;
width: 84px; height: 56px;
transform: translateX(-50%);
pointer-events: none;
transition: transform .08s linear;
z-index: 5;
}
.basket-icon {
font-size: 56px; line-height: 1;
filter: drop-shadow(0 4px 8px rgba(232,53,138,.4));
}
.falling {
position: absolute; font-size: 36px;
pointer-events: none;
will-change: transform;
transition: opacity .3s;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
}
.falling.bad { filter: drop-shadow(0 2px 6px rgba(120,120,160,.4)); }
.affirm-pop {
position: absolute; pointer-events: none;
font-family: var(--vs-font-accent);
font-weight: 800; font-size: 14px;
color: var(--pink);
background: rgba(255, 255, 255, .92);
padding: 6px 14px; border-radius: 50px;
box-shadow: 0 4px 16px rgba(232,53,138,.3);
animation: vs-affirm-rise 1.2s ease-out forwards;
white-space: nowrap;
z-index: 6;
}
@keyframes vs-affirm-rise {
0%   { transform: translate(-50%, 0) scale(.7); opacity: 0; }
20%  { transform: translate(-50%, -10px) scale(1.05); opacity: 1; }
100% { transform: translate(-50%, -64px) scale(1); opacity: 0; }
}
.game-overlay {
position: absolute; inset: 0;
background: rgba(255, 255, 255, .92);
display: flex; align-items: center; justify-content: center;
flex-direction: column; gap: 16px;
padding: 24px; z-index: 10;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
[data-theme="dark"] .game-overlay { background: rgba(13, 8, 22, .92); }
.game-overlay.hidden { display: none; }
.game-overlay h4 {
font-family: var(--vs-font-display);
font-weight: 900; font-size: clamp(24px, 3vw, 38px);
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}
.game-overlay p {
color: var(--text2); font-size: 15px;
max-width: 380px; text-align: center; line-height: 1.6;
}
.game-overlay .score-final {
font-family: var(--vs-font-display); font-weight: 900;
font-size: 56px; color: var(--purple); line-height: 1;
}
.game-overlay .best-score {
font-family: var(--vs-font-accent);
font-size: 14px; color: var(--muted);
font-weight: 700;
}
.game-btn {
background: var(--grad); color: #fff; border: none;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 14px; padding: 12px 28px;
border-radius: 14px; cursor: pointer;
box-shadow: 0 6px 20px rgba(232, 53, 138, .4);
transition: transform .2s, box-shadow .2s;
}
.game-btn:hover { transform: translateY(-2px) scale(1.04); }
.game-controls-hint {
display: flex; gap: 6px; justify-content: center;
margin-top: 8px;
font-size: 11px; color: var(--muted);
font-family: var(--vs-font-accent); font-weight: 700;
letter-spacing: .04em;
}
.kbd {
display: inline-block; padding: 2px 6px;
border: 1px solid var(--border2);
border-radius: 6px; background: var(--bg2);
font-family: var(--vs-font-body); font-size: 10px;
color: var(--text2);
} .games-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } .prods-bg { background: var(--bg2); }
.prods-header {
display: flex; align-items: flex-start;
justify-content: space-between; gap: 20px;
margin-bottom: 40px; flex-wrap: wrap;
}
.prods-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.home-prod-grid .shop-card { display: flex; flex-direction: column; }
.home-prod-grid .shop-card .card-body {
display: flex; flex-direction: column;
flex: 1; min-height: 220px;
}
.home-prod-grid .shop-card .card-meta { margin-top: 0; }
.home-prod-grid .shop-card .card-footer { margin-top: auto; } .reveal {
opacity: 0; transform: translateY(28px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left {
opacity: 0; transform: translateX(-40px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
opacity: 0; transform: translateX(40px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); } body.js-ready .vs-reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .6s var(--ease), transform .6s var(--ease);
transition-delay: var(--reveal-delay, 0ms);
}
body.js-ready .vs-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
body.js-ready .vs-reveal {
transform: none;
transition: opacity .25s linear;
}
} .lightbox {
position: fixed; inset: 0; z-index: 500;
background: rgba(0, 0, 0, .92);
display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none;
transition: opacity .3s;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lb-img {
max-width: 90vw; max-height: 88vh;
border-radius: 16px;
box-shadow: 0 32px 80px rgba(0, 0, 0, .6);
object-fit: contain;
transition: transform .3s var(--spring);
}
.lb-close,
.lb-prev,
.lb-next {
position: absolute;
background: rgba(255, 255, 255, .12);
border: 1.5px solid rgba(255, 255, 255, .25);
color: #fff; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .2s;
border-radius: 50%;
}
.lb-close { top: 20px; right: 24px; width: 44px; height: 44px; font-size: 18px; }
.lb-prev,
.lb-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 20px; }
.lb-prev { left: 20px; } .lb-next { right: 20px; }
.lb-close:hover,
.lb-prev:hover,
.lb-next:hover { background: rgba(232, 53, 138, .5); }
.lb-counter {
position: absolute; bottom: 20px; left: 50%;
transform: translateX(-50%);
font-family: var(--vs-font-accent);
font-weight: 700; font-size: 13px;
color: rgba(255, 255, 255, .7);
} .gallery-section { background: var(--bg2); position: relative; z-index: 2; }
.gallery-inner { max-width: 1440px; margin: 0 auto; padding: 72px 80px; }
.gallery-header { text-align: center; margin-bottom: 48px; }
.photo-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px; gap: 14px;
}
.photo-item {
border-radius: var(--rad-md); overflow: hidden;
position: relative; cursor: pointer;
}
.photo-item.feature { grid-column: span 2; grid-row: span 2; }
.photo-item img {
width: 100%; height: 100%; object-fit: cover;
transition: transform .5s var(--ease);
}
.photo-item::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(232,53,138,0), rgba(139,53,214,0));
transition: background .35s;
pointer-events: none;
}
.photo-item:hover img { transform: scale(1.07); }
.photo-item:hover::after {
background: linear-gradient(135deg, rgba(232,53,138,.18), rgba(139,53,214,.15));
}
.photo-overlay {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .3s;
font-size: 28px; color: #fff;
}
.photo-item:hover .photo-overlay { opacity: 1; } .cta-section {
position: relative; z-index: 2;
padding: 80px 48px; text-align: center;
overflow: hidden;
}
.cta-bg {
position: absolute; inset: 0;
background-position: center; background-size: cover;
}
.cta-bg::after {
content: ''; position: absolute; inset: 0;
background: var(--grad); opacity: .87;
}
.cta-bg--solid::after { opacity: 1; }
.cta-inner { position: relative; z-index: 2; max-width: 640px; margin: 0 auto; }
.cta-icon {
font-size: 56px; display: block; margin-bottom: 20px;
animation: vs-icon-dance 3s ease-in-out infinite;
}
.cta-section h2 {
font-family: var(--vs-font-display); font-weight: 900;
font-size: clamp(28px, 3.5vw, 46px);
color: #fff; margin-bottom: 14px;
}
.cta-section p {
font-size: 16px; color: rgba(255, 255, 255, .88);
line-height: 1.7; margin-bottom: 32px;
}
.cta-btns {
display: flex; gap: 14px; justify-content: center;
flex-wrap: wrap;
} .entry-content { max-width: 720px; margin: 0 auto; padding: 48px 24px; }
.entry-content > * + * { margin-top: 1em; }
.entry-content h1, .entry-content h2, .entry-content h3 {
font-family: var(--vs-font-display); font-weight: 800;
margin-top: 1.6em;
}
.entry-content h2 { font-size: 28px; }
.entry-content h3 { font-size: 22px; }
.entry-content p { font-size: 17px; line-height: 1.78; color: var(--text2); }
.entry-content blockquote {
font-family: var(--vs-font-display); font-style: italic;
font-size: 22px; line-height: 1.5;
padding: 24px 28px;
background: var(--rose);
border-radius: var(--rad-md);
color: var(--text);
}
[data-theme="dark"] .entry-content blockquote { background: rgba(232,53,138,.1); }
.entry-content code {
background: var(--bg2); padding: 2px 6px;
border-radius: 6px; font-size: 14px;
}
.archive-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px; max-width: 1440px;
margin: 0 auto; padding: 48px 80px 80px;
}
.archive-card {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
overflow: hidden;
box-shadow: var(--shadow);
transition: transform .3s var(--ease), box-shadow .3s, border-color .25s;
display: flex; flex-direction: column;
}
.archive-card:hover {
transform: translateY(-6px);
border-color: var(--pink); box-shadow: var(--shadow-lg);
}
.archive-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--bg2); }
.archive-card-img img { width: 100%; height: 100%; object-fit: cover; }
.archive-card-body { padding: 18px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.archive-card h3 {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 19px; line-height: 1.3; margin-bottom: 8px;
}
.archive-card h3 a { color: var(--text); text-decoration: none; }
.archive-card h3 a:hover { color: var(--pink); }
.archive-card .archive-meta {
font-size: 12px; color: var(--muted);
font-family: var(--vs-font-accent); font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
margin-bottom: 8px;
}
.archive-card .archive-excerpt { font-size: 14px; color: var(--text2); line-height: 1.65; flex: 1; }
.pagination {
display: flex; gap: 6px; justify-content: center;
margin: 24px auto 64px; flex-wrap: wrap;
}
.pagination a,
.pagination .current {
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 13px; min-width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 12px;
border-radius: 50px;
border: 1.5px solid var(--border);
background: var(--card-bg);
color: var(--text2); text-decoration: none;
transition: all .2s;
}
.pagination a:hover { background: var(--rose); border-color: var(--pink); color: var(--pink); }
.pagination .current {
background: var(--grad); color: #fff; border-color: transparent;
box-shadow: 0 4px 16px rgba(232,53,138,.3);
} .error-404 {
max-width: 720px; margin: 0 auto;
text-align: center;
padding: 160px 24px 80px;
position: relative; z-index: 2;
}
.error-404 .e-num {
font-family: var(--vs-font-display);
font-size: clamp(120px, 18vw, 240px);
font-weight: 900; line-height: 1;
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 12px;
}
.error-404 h1 {
font-family: var(--vs-font-display); font-weight: 800;
font-size: clamp(28px, 4vw, 44px);
margin-bottom: 14px;
}
.error-404 p {
font-size: 16px; color: var(--text2);
line-height: 1.7; margin-bottom: 28px;
max-width: 520px; margin-left: auto; margin-right: auto;
} .search-form {
display: flex; gap: 8px; max-width: 480px;
margin: 0 auto;
}
.search-form input[type="search"] {
flex: 1;
background: var(--card-bg); border: 1.5px solid var(--border);
border-radius: 50px; padding: 12px 20px;
font-size: 14px; color: var(--text);
font-family: var(--vs-font-body);
outline: none;
transition: border-color .2s, box-shadow .2s;
}
.search-form input[type="search"]:focus {
border-color: var(--pink);
box-shadow: 0 0 0 3px rgba(232, 53, 138, .12);
}
.search-form button {
background: var(--grad); color: #fff;
border: none; border-radius: 50px;
padding: 12px 24px;
font-family: var(--vs-font-accent); font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 16px rgba(232, 53, 138, .3);
} :root { --vs-footer-bg: #16082E; }
.site-footer {
background: var(--vs-footer-bg); color: #fff;
position: relative; z-index: 2;
margin-top: 0;
} .site-footer::before {
content: ''; position: absolute;
left: 0; right: 0; top: -48px; height: 48px;
background: linear-gradient(to bottom, transparent, var(--vs-footer-bg));
pointer-events: none;
}
[data-theme="dark"] {
--vs-footer-bg: #06030D;
}
[data-theme="dark"] .site-footer { background: var(--vs-footer-bg); }
.footer-inner {
max-width: 1440px; margin: 0 auto;
padding: 64px 80px 32px;
}
.footer-top {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px; margin-bottom: 48px;
}
.footer-brand img {
height: 58px; filter: brightness(0) invert(1);
opacity: 1; margin-bottom: 22px;
}
.footer-brand p {
font-size: 15px; color: rgba(255, 255, 255, .78);
line-height: 1.75; max-width: 330px;
}
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.social-btn {
width: 40px; height: 40px; border-radius: 12px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .12);
display: flex; align-items: center; justify-content: center;
color: rgba(255, 255, 255, .6);
font-size: 15px; text-decoration: none;
transition: all .25s;
}
.social-btn:hover {
background: var(--grad); border-color: transparent;
color: #fff; transform: translateY(-3px);
}
.site-footer h5 {
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 13px; letter-spacing: .08em;
text-transform: uppercase; color: rgba(255, 255, 255, .92);
margin-bottom: 18px;
}
.footer-menu,
.site-footer ul {
list-style: none; display: flex; flex-direction: column; gap: 10px;
}
.site-footer ul a {
color: rgba(255, 255, 255, .72);
font-size: 14px; text-decoration: none;
transition: color .2s;
}
.site-footer ul a:hover { color: rgba(255, 255, 255, .98); }
.footer-contact p {
font-size: 14px; color: rgba(255, 255, 255, .72);
line-height: 1.9;
}
.footer-contact a { color: rgba(255, 255, 255, .92); }
.footer-payments {
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap;
border-top: 1px solid rgba(255, 255, 255, .08);
padding: 24px 0;
}
.footer-payments-label {
font-family: var(--vs-font-accent);
font-size: 12px; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase;
color: rgba(255, 255, 255, .4);
}
.pay-icon {
font-family: var(--vs-font-accent);
font-weight: 800; font-size: 11px;
letter-spacing: .04em;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .12);
color: rgba(255, 255, 255, .8);
padding: 6px 12px; border-radius: 8px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, .08);
padding-top: 24px;
display: flex; justify-content: space-between;
align-items: center; flex-wrap: wrap; gap: 12px;
font-size: 12px; color: rgba(255, 255, 255, .58);
}
.footer-bottom .heart {
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 800;
} [data-theme="light"] .site-footer { color: var(--text); }
[data-theme="light"] .site-footer::before {
background: linear-gradient(to bottom, transparent, var(--vs-footer-bg));
}
[data-theme="light"] .footer-brand img { filter: none; opacity: 1; }
[data-theme="light"] .footer-brand p { color: var(--text2); }
[data-theme="light"] .site-footer h5 { color: var(--pink); }
[data-theme="light"] .site-footer ul a { color: var(--text2); }
[data-theme="light"] .site-footer ul a:hover { color: var(--text); }
[data-theme="light"] .footer-contact p { color: var(--text2); }
[data-theme="light"] .footer-contact a { color: var(--pink); }
[data-theme="light"] .social-btn {
background: var(--bg2); border-color: var(--border); color: var(--text2);
}
[data-theme="light"] .social-btn:hover {
background: var(--grad); border-color: transparent; color: #fff;
}
[data-theme="light"] .footer-bottom {
border-color: var(--border); color: var(--text2);
}
[data-theme="light"] .footer-bottom .heart {
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
} .predstava-meta-row,
.program-meta-row {
display: flex; flex-wrap: wrap; gap: 10px;
margin: 18px 0;
}
.termini-list {
display: flex; flex-direction: column; gap: 10px;
margin: 24px 0;
}
.termin-item {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-md);
padding: 16px 20px;
display: grid;
grid-template-columns: 90px 1fr auto;
align-items: center; gap: 16px;
box-shadow: var(--shadow);
transition: transform .25s var(--ease), border-color .2s;
}
.termin-item:hover { transform: translateY(-2px); border-color: var(--pink); }
.termin-date {
font-family: var(--vs-font-display);
font-weight: 900;
text-align: center;
background: var(--rose); color: var(--pink);
border-radius: 12px; padding: 8px 4px;
}
[data-theme="dark"] .termin-date { background: rgba(232,53,138,.12); }
.termin-day { font-size: 24px; line-height: 1; }
.termin-month { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.termin-info { font-size: 14px; color: var(--text2); line-height: 1.55; }
.termin-info strong { color: var(--text); display: block; font-size: 15px; font-family: var(--vs-font-accent); }
.glumci-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 24px;
}
.glumac-card {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-md);
padding: 18px; text-align: center;
box-shadow: var(--shadow);
transition: transform .3s var(--ease);
}
.glumac-card:hover { transform: translateY(-4px); }
.glumac-photo {
width: 96px; height: 96px; border-radius: 50%;
margin: 0 auto 12px; overflow: hidden;
background: var(--grad);
}
.glumac-photo img { width: 100%; height: 100%; object-fit: cover; }
.glumac-name {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 16px; margin-bottom: 4px;
}
.glumac-role { font-size: 12px; color: var(--muted); } .no-scroll { overflow: hidden !important; }
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.cloud, .fshape, .bb1, .bb2, .ha-ring, .ha-ring2, .book-glow, .book-emoji, .book-badge,
.cta-icon, .ticker { animation: none !important; }
.basket { transition: none !important; }
}
.vs-no-animations .cloud,
.vs-no-animations .fshape,
.vs-no-animations .bb1,
.vs-no-animations .bb2,
.vs-no-animations .ha-ring,
.vs-no-animations .ha-ring2,
.vs-no-animations .book-glow,
.vs-no-animations .book-emoji,
.vs-no-animations .book-badge,
.vs-no-animations .cta-icon,
.vs-no-animations .ticker { animation: none !important; } @media (max-width: 1100px) {
.section-inner { padding: 64px 48px; }
.hero { padding: 120px 0 56px; }
.vs-slide-inner { padding: 0 48px; gap: 40px; min-height: 0; }
.book-scene { width: 320px; height: 420px; }
.book { width: 240px; height: 350px; left: 40px; top: 32px; }
.book-title { font-size: 19px; }
.stats-wrap { padding: 48px 48px; }
.footer-inner { padding: 56px 48px 28px; }
.show-feature { padding: 56px 48px; }
.gallery-inner { padding: 64px 48px; }
}
@media (max-width: 960px) {
.site-nav { width: calc(100% - 32px); padding: 12px 18px; }
.nav-links { display: none; }
.vs-mobile-toggle { display: flex; }
.hero { padding: 100px 0 48px; }
.vs-slide-inner { grid-template-columns: 1fr; padding: 0 28px; gap: 32px; }
.vs-slide-visual { display: none; }
.hero p { max-width: 100%; }
.prog-wide { padding: 32px 28px; }
.prog-wide-vis { width: 120px; height: 120px; font-size: 60px; border-radius: 22px; }
.stats-wrap { padding: 32px 28px; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.section-inner { padding: 56px 28px; }
.progs-grid { grid-template-columns: 1fr; }
.prog-wide { grid-column: span 1; }
.prog-wide-inner { grid-template-columns: 1fr; }
.shows-grid { grid-template-columns: 1fr; }
.prods-grid { grid-template-columns: 1fr 1fr; }
.about-inner { grid-template-columns: 1fr; gap: 32px; }
.about-img-wrap img { height: 280px; }
.feeling-grid { grid-template-columns: repeat(2, 1fr); }
.show-feature, .show-feature.reverse { grid-template-columns: 1fr; direction: ltr; padding: 48px 24px; gap: 32px; }
.gallery-inner { padding: 56px 24px; }
.photo-grid { grid-template-columns: repeat(2, 1fr); }
.photo-item.feature { grid-column: span 1; grid-row: span 1; }
.archive-grid { grid-template-columns: 1fr; padding: 48px 24px; }
.footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
.footer-inner { padding: 48px 28px 24px; }
.glumci-grid { grid-template-columns: 1fr 1fr; }
.termin-item { grid-template-columns: 80px 1fr; }
.termin-item .btn-outline { grid-column: span 2; }
}
@media (max-width: 560px) {
.hero h1 { font-size: clamp(32px, 8vw, 44px); }
.hero-trust .trust-pill { font-size: 10px; padding: 4px 10px; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.prods-grid { grid-template-columns: 1fr 1fr; }
.feeling-grid { grid-template-columns: 1fr 1fr; }
.footer-top { grid-template-columns: 1fr; }
.glumci-grid { grid-template-columns: 1fr; }
.game-arena { height: 320px; }
.cta-section { padding: 56px 24px; }
} .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1440px; margin: 0 auto; padding: 48px 0; }
.post-card { background: var(--card-bg); border: 1.5px solid var(--border); border-radius: var(--rad-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s, border-color .25s; display: flex; flex-direction: column; }
.post-card:hover { transform: translateY(-6px); border-color: var(--pink); box-shadow: var(--shadow-lg); }
.post-card-img { aspect-ratio: 16/10; overflow: hidden; background: var(--bg2); display: block; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 18px 22px 22px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.post-card h3 { font-family: var(--vs-font-display); font-weight: 700; font-size: 19px; line-height: 1.3; }
.post-card h3 a { color: var(--text); text-decoration: none; }
.post-card h3 a:hover { color: var(--pink); }
.post-card p { font-size: 14px; color: var(--text2); line-height: 1.65; flex: 1; }
.vs-blog-layout, .vs-page-content {
max-width: 760px; margin: 0 auto;
}
.vs-post-meta {
display: flex; gap: 14px; flex-wrap: wrap;
margin-bottom: 24px;
font-size: 13px; color: var(--muted);
font-family: var(--vs-font-accent); font-weight: 700;
letter-spacing: .04em;
}
.vs-post-tags {
margin: 32px 0;
font-size: 13px; color: var(--muted);
}
.vs-post-tags a {
display: inline-block;
background: var(--bg2); border: 1.5px solid var(--border);
color: var(--text2);
padding: 4px 12px; margin: 2px;
border-radius: 50px;
font-size: 12px;
}
.vs-comments-wrap {
margin: 48px 0;
padding-top: 32px;
border-top: 1.5px solid var(--border);
}
.vs-empty-state {
max-width: 520px; margin: 64px auto;
text-align: center;
}
.vs-empty-emoji {
font-size: 80px; margin-bottom: 16px;
display: inline-block;
animation: vs-icon-dance 3s ease-in-out infinite;
}
.vs-empty-state h3 {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 26px; margin-bottom: 8px;
}
.vs-empty-state p { color: var(--text2); margin-bottom: 20px; }
.posts-navigation, .post-navigation {
max-width: 760px; margin: 32px auto;
display: flex; gap: 12px; justify-content: space-between;
}
.posts-navigation a, .post-navigation a {
background: var(--card-bg); border: 1.5px solid var(--border);
border-radius: 14px; padding: 14px 18px;
color: var(--text); text-decoration: none;
flex: 1;
transition: border-color .2s, transform .2s;
}
.posts-navigation a:hover, .post-navigation a:hover {
border-color: var(--pink); transform: translateY(-2px); color: var(--text);
}
.posts-navigation .nav-sub, .post-navigation .nav-sub {
display: block;
font-family: var(--vs-font-accent); font-size: 11px;
font-weight: 700; color: var(--muted);
text-transform: uppercase; letter-spacing: .04em;
}
.posts-navigation .nav-title, .post-navigation .nav-title {
display: block;
font-family: var(--vs-font-display); font-weight: 700;
font-size: 15px; margin-top: 4px;
}
.bc-sep {
display: inline-block;
margin: 0 4px;
color: var(--border2);
}
.section-header { margin-bottom: 52px; }
@media (max-width: 960px) {
.post-grid { grid-template-columns: 1fr; padding: 32px 0; }
.posts-navigation, .post-navigation { flex-direction: column; }
} .comments-area { margin-top: 32px; }
.comments-title {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 22px; margin-bottom: 18px;
}
.comment-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.comment-list .comment, .comment-list .pingback {
background: var(--card-bg); border: 1.5px solid var(--border);
border-radius: var(--rad-md); padding: 18px 20px;
box-shadow: var(--shadow);
}
.comment-author { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-author img { border-radius: 50%; }
.comment-meta a { font-size: 11px; color: var(--muted); }
.comment-content p { font-size: 14px; color: var(--text2); line-height: 1.7; }
.comment-form {
background: var(--card-bg); border: 1.5px solid var(--border);
border-radius: var(--rad-lg); padding: 24px 26px;
margin-top: 20px;
}
.comment-form label {
display: block;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 12px; letter-spacing: .04em;
text-transform: uppercase;
color: var(--text2); margin: 0 0 6px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: 12px; padding: 12px 14px;
font-size: 15px; color: var(--text);
font-family: var(--vs-font-body);
outline: none;
transition: border-color .2s;
margin-bottom: 12px;
}
.comment-form input:focus, .comment-form textarea:focus {
border-color: var(--pink);
box-shadow: 0 0 0 3px rgba(232, 53, 138, .12);
}
.comment-form .submit {
background: var(--grad); color: #fff;
border: none; cursor: pointer;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 14px; padding: 12px 28px;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(232, 53, 138, .3);
} #vsKbar {
position: fixed; inset: 0; z-index: 600;
background: rgba(13, 8, 22, .55);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
display: none;
padding: 14vh 24px 0;
justify-content: center;
}
#vsKbar.is-open { display: flex; }
.kbar-shell {
width: min(720px, 100%);
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
box-shadow: var(--shadow-lg);
padding: 8px;
max-height: 80vh; overflow: hidden;
display: flex; flex-direction: column;
}
.kbar-input {
width: 100%;
background: transparent; border: none; outline: none;
padding: 14px 18px;
font-size: 18px; color: var(--text);
font-family: var(--vs-font-body);
}
.kbar-results {
overflow-y: auto;
border-top: 1.5px solid var(--border);
margin-top: 4px; padding-top: 6px;
} .btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-white:focus-visible,
.btn-ghost:focus-visible,
.nav-cta:focus-visible,
.cart-btn:focus-visible,
.theme-toggle:focus-visible,
.feeling-btn:focus-visible,
.fav-btn:focus-visible,
.game-btn:focus-visible {
outline: 3px solid rgba(232, 53, 138, .55);
outline-offset: 4px;
}  body.vs-igre-body #vsDaySky,
body.vs-igre-body #vsNightDecor,
body.vs-igre-body #vsSkyTop,
body.vs-igre-body #vsStarCanvas,
body.vs-igre-body .vs-floating-shapes,
body.vs-igre-body .vs-bg-blobs {
display: none !important;
} .vs-igre-hero-wrap {
position: relative;
overflow: hidden;
}
.vs-igre-hero-wrap .hero-landscape {
position: absolute;
left: 0; right: 0; bottom: -1px;
width: 100%; height: 240px;
z-index: 1;
pointer-events: none;
opacity: 1;
} .vs-igre-page .page-hero {
background: transparent;
min-height: 70vh;
}
.vs-igre-page .page-hero-bg,
.vs-igre-page .page-hero-bg::after {
background: none !important;
opacity: 0 !important;
} .vs-igre-page .page-hero .wave-bottom { display: none; }
.vs-igre-page .page-hero h1 {
color: var(--text);
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.vs-igre-page .page-hero p {
color: var(--text2);
}
.vs-igre-page .page-hero .hero-eyebrow {
background: var(--rose);
border: 1.5px solid rgba(232, 53, 138, .25);
color: var(--pink);
}
.vs-igre-page .page-hero .hero-chip {
background: var(--card-bg);
border: 1.5px solid var(--border);
color: var(--text2);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
[data-theme="dark"] .vs-igre-page .page-hero h1,
[data-theme="dark"] .vs-igre-page .page-hero p { color: var(--text); text-shadow: none; }
[data-theme="dark"] .vs-igre-page .page-hero .hero-eyebrow {
background: rgba(232, 53, 138, .12);
}
.vs-igre-page .igre-index {
background:
radial-gradient(circle at 12% 10%, rgba(255,217,61,.22), transparent 32%),
radial-gradient(circle at 88% 18%, rgba(52,217,181,.22), transparent 30%),
radial-gradient(circle at 6% 92%, rgba(232,53,138,.18), transparent 32%),
radial-gradient(circle at 95% 85%, rgba(139,53,214,.20), transparent 35%),
var(--bg2);
padding: 64px 0 56px;
position: relative; z-index: 2;
overflow: hidden;
}
.vs-igre-page .igre-index::before,
.vs-igre-page .igre-index::after {
content: ''; position: absolute;
width: 90px; height: 90px;
border-radius: 50%;
pointer-events: none;
}
.vs-igre-page .igre-index::before {
top: 8%; left: 4%;
background: var(--grad);
opacity: .15;
animation: vs-igre-blob 14s ease-in-out infinite;
}
.vs-igre-page .igre-index::after {
bottom: 6%; right: 6%;
background: linear-gradient(135deg, var(--mint), var(--yellow));
opacity: .18;
animation: vs-igre-blob 18s ease-in-out infinite reverse;
}
@keyframes vs-igre-blob {
0%, 100% { transform: translate(0, 0) scale(1); }
33%      { transform: translate(40px, -30px) scale(1.15); }
66%      { transform: translate(-30px, 30px) scale(.9); }
}
.vs-igre-page .game-bg {
background: none;
}
.vs-igre-page .happy-bg {
background:
radial-gradient(ellipse 70% 60% at 50% 0%, rgba(232,53,138,.10), transparent 50%),
var(--bg);
}
.vs-igre-page .igre-index-inner {
max-width: 1200px; margin: 0 auto;
padding: 0 80px;
}
.vs-igre-page .igre-toc {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 36px;
}
.igre-toc-card {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-md);
padding: 22px 20px;
text-decoration: none;
color: var(--text);
display: flex; flex-direction: column;
gap: 6px; align-items: center;
text-align: center;
box-shadow: var(--shadow);
transition: transform .3s var(--ease), border-color .25s, box-shadow .3s;
}
.igre-toc-card:hover {
transform: translateY(-6px);
border-color: var(--pink);
box-shadow: var(--shadow-lg);
color: var(--text);
}
.igre-toc-emoji {
font-size: 48px; line-height: 1;
transition: transform .3s var(--spring);
}
.igre-toc-card:hover .igre-toc-emoji { transform: scale(1.15) rotate(-6deg); }
.igre-toc-name {
font-family: var(--vs-font-display);
font-weight: 800; font-size: 18px;
}
.igre-toc-sub {
font-size: 12px; color: var(--muted);
font-weight: 600;
}
.vs-igre-page .igra-head {
max-width: 720px;
text-align: center;
margin: 0 auto 40px;
}
.vs-igre-page .igra-head .section-tag {
display: inline-flex; margin: 0 auto 14px;
}
.vs-igre-page .igra-head .section-sub {
margin: 12px auto 0;
} .memory-hud {
display: flex; gap: 10px; justify-content: center;
margin-bottom: 18px; flex-wrap: wrap;
}
.hud-pill {
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: 50px;
padding: 6px 14px;
font-size: 13px; color: var(--text2);
font-family: var(--vs-font-accent); font-weight: 700;
}
.hud-pill strong {
color: var(--text);
font-family: var(--vs-font-display);
font-size: 15px;
margin: 0 2px;
}
.game-btn.small {
padding: 6px 14px;
font-size: 12px;
}
.memory-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
max-width: 460px;
margin: 0 auto;
perspective: 800px;
}
.memory-card {
aspect-ratio: 1;
background: transparent;
border: none; padding: 0; cursor: pointer;
position: relative;
transform-style: preserve-3d;
transition: transform .55s var(--spring);
font-family: var(--vs-font-accent);
}
.memory-card.flipped,
.memory-card.matched { transform: rotateY(180deg); }
.memory-card-back,
.memory-card-front {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
border-radius: 14px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
font-size: 38px;
box-shadow: var(--shadow);
border: 1.5px solid var(--border);
}
.memory-card-back {
background: linear-gradient(135deg, var(--rose), rgba(232,53,138,.25));
color: var(--pink);
font-weight: 900;
font-size: 34px;
}
[data-theme="dark"] .memory-card-back {
background: linear-gradient(135deg, rgba(232,53,138,.18), rgba(139,53,214,.2));
}
.memory-card-front {
background: var(--card-bg);
transform: rotateY(180deg);
}
.memory-card.matched .memory-card-front {
background: linear-gradient(135deg, rgba(52,217,181,.18), rgba(92,224,213,.18));
border-color: var(--mint);
animation: vs-mem-match .5s var(--spring);
}
@keyframes vs-mem-match {
0%   { transform: rotateY(180deg) scale(1); }
50%  { transform: rotateY(180deg) scale(1.1); }
100% { transform: rotateY(180deg) scale(1); }
}
.memory-msg {
margin-top: 24px;
min-height: 32px;
text-align: center;
font-family: var(--vs-font-display);
font-weight: 800;
font-size: 18px;
color: var(--pink);
} .breath-arena {
padding: 40px 24px 32px;
display: flex; flex-direction: column;
align-items: center;
gap: 22px;
}
.breath-orb {
width: 200px; height: 200px;
border-radius: 50%;
background:
radial-gradient(circle at 35% 35%, rgba(255,255,255,.5), transparent 50%),
radial-gradient(circle at 65% 70%, rgba(232,53,138,.3), rgba(139,53,214,.4));
box-shadow:
inset 0 0 40px rgba(255,255,255,.3),
0 24px 64px rgba(139,53,214,.35),
0 0 80px rgba(232,53,138,.3);
display: flex; align-items: center; justify-content: center;
transition: transform 4s ease-in-out;
will-change: transform;
}
[data-theme="dark"] .breath-orb {
background:
radial-gradient(circle at 35% 35%, rgba(195,132,252,.55), transparent 55%),
radial-gradient(circle at 65% 70%, rgba(52,217,181,.25), rgba(139,53,214,.5));
box-shadow:
inset 0 0 40px rgba(255,255,255,.15),
0 24px 64px rgba(139,53,214,.5),
0 0 100px rgba(195,132,252,.35);
}
.breath-instruction {
font-family: var(--vs-font-display);
font-weight: 900;
font-size: 26px;
color: #fff;
text-shadow: 0 4px 16px rgba(0,0,0,.3);
letter-spacing: -0.01em;
}
.breath-controls {
display: flex; align-items: center;
gap: 16px; flex-wrap: wrap; justify-content: center;
}
.breath-cycle {
font-family: var(--vs-font-accent); font-weight: 700;
color: var(--muted); font-size: 13px;
letter-spacing: .04em;
}
.breath-tip {
color: var(--text2);
font-size: 14px; line-height: 1.65;
max-width: 460px; text-align: center;
margin: 0 auto;
}
@media (max-width: 760px) {
.vs-igre-page .igre-toc { grid-template-columns: 1fr 1fr; }
.vs-igre-page .igre-index-inner { padding: 0 24px; }
.memory-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.memory-card-back, .memory-card-front { font-size: 28px; }
.breath-orb { width: 160px; height: 160px; }
.breath-instruction { font-size: 22px; }
} :root { --vs-nav-clear: 132px; }
@media (max-width: 960px) { :root { --vs-nav-clear: 124px; } }
@media (max-width: 768px) { :root { --vs-nav-clear: calc(96px + var(--vs-sa-top, 0px)); } } .site-main > .section:first-child:not(.shop-hero):not(.page-hero):not(.hero) { padding-top: 100px; }
.site-main > .entry-content:first-child { padding-top: 130px; }
.site-main > .archive-grid:first-child { padding-top: 130px; }
.site-main > .error-404:first-child { padding-top: 160px; } .section-inner { padding: 96px 80px; }
.section-header { margin-bottom: 56px; max-width: 720px; }
.section-title { letter-spacing: -0.015em; }
.section-sub { font-size: 17px; } .prog-card,
.show-card,
.shop-card,
.stat-card,
.archive-card,
.af-card,
.feeling-btn {
transition:
transform .4s var(--ease),
box-shadow .4s var(--ease),
border-color .25s var(--ease);
} .prog-card { isolation: isolate; }
.prog-card::after {
content: ''; position: absolute;
width: 160px; height: 160px;
border-radius: 50%;
bottom: -80px; right: -60px;
background: radial-gradient(circle, rgba(232,53,138,.06), transparent 70%);
z-index: -1;
opacity: 0;
transition: opacity .5s var(--ease);
}
.prog-card:hover::after { opacity: 1; } .section-tag { padding: 7px 18px; font-size: 11.5px; } .show-thumb { aspect-ratio: 4 / 3; height: auto; } .about-img-wrap {
border: 1.5px solid var(--border);
transform: rotate(0deg);
transition: transform .5s var(--ease);
}
.about-img-wrap:hover { transform: rotate(-1deg); } .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.3) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .55s var(--ease);
z-index: 0;
}
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary > * { position: relative; z-index: 1; } .nav-cta { position: relative; overflow: hidden; }
.nav-cta::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .6s var(--ease);
}
.nav-cta:hover::before { transform: translateX(120%); } .ticker-wrap {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
} .hero-eyebrow { animation-delay: .5s; } .feeling-btn { will-change: transform; }
.feeling-btn:active { transform: scale(.98) translateY(-2px) !important; } .stat-num { letter-spacing: -0.02em; } .progs-bg, .prods-bg, .game-bg { position: relative; }
.progs-bg::before,
.prods-bg::before,
.game-bg::before {
content: ''; position: absolute;
left: 0; right: 0; top: -1px; height: 60px;
background: linear-gradient(to bottom, var(--bg), transparent);
pointer-events: none; z-index: 1;
}
.shows-bg, .about-bg, .happy-bg { position: relative; }
.shows-bg::before,
.about-bg::before,
.happy-bg::before {
content: ''; position: absolute;
left: 0; right: 0; top: -1px; height: 60px;
background: linear-gradient(to bottom, var(--bg2), transparent);
pointer-events: none; z-index: 1;
}
[data-theme="dark"] .progs-bg::before,
[data-theme="dark"] .prods-bg::before,
[data-theme="dark"] .game-bg::before { background: linear-gradient(to bottom, var(--bg), transparent); } @supports (backdrop-filter: blur(20px)) {
.site-nav { box-shadow: 0 8px 32px rgba(139,53,214,.06), var(--shadow); }
} .ha-ring  { animation-duration: 22s; }
.ha-ring2 { animation-duration: 14s; } ul.products li.product .price,
.shop-card .price-row { font-size: 20px; } .prog-card h3 { font-size: 21px; line-height: 1.25; }
.prog-card p  { font-size: 14.5px; } .show-body { padding: 22px 24px 24px; }
.show-body h3 { font-size: 19px; margin-bottom: 8px; letter-spacing: -0.005em; } .hero-trust { gap: 8px; }
.hero-trust .trust-pill {
background: rgba(255,255,255,.7);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
font-size: 11.5px;
padding: 6px 14px;
border-color: rgba(232,53,138,.18);
}
[data-theme="dark"] .hero-trust .trust-pill {
background: rgba(25,12,40,.55);
} .pc-icon, .af-icon, .game-icon-bg, .ic1, .ic2, .ic3, .ic4 {
transition: transform .5s var(--spring);
}
.prog-card:hover .pc-icon,
.af-card:hover .af-icon { transform: rotate(-6deg) scale(1.06); } .cart-count { box-shadow: 0 4px 12px rgba(255,217,61,.5); } .af-card { transition: transform .35s var(--ease), box-shadow .35s, border-color .25s; }
.af-card:hover { border-color: rgba(232,53,138,.25); } .cta-section .btn-white { transition: transform .25s var(--ease), box-shadow .25s; }
.cta-section .btn-white:hover { transform: translateY(-4px) scale(1.02); } .page-hero h1 { letter-spacing: -0.015em; }
.page-hero p { font-size: 18px; } .page-hero--xl {
min-height: 64vh;
padding: 160px 48px 96px;
}
.page-hero--xl .page-hero-content { max-width: 980px; }
.page-hero--xl h1 {
font-size: clamp(44px, 6.4vw, 88px);
line-height: 1.02;
letter-spacing: -0.025em;
margin-bottom: 24px;
text-shadow: 0 2px 30px rgba(0,0,0,.18);
}
.page-hero--xl .hero-eyebrow { font-size: 13px; padding: 8px 18px; }
.page-hero--xl .hero-chips { margin-top: 28px; }
@media (max-width: 720px) {
.page-hero--xl { min-height: 52vh; padding: 120px 22px 64px; }
.page-hero--xl h1 { font-size: clamp(32px, 9vw, 48px); }
} .page-hero--compact {
min-height: 0;
padding: 96px 48px 36px;
}
.page-hero--compact h1 {
font-size: clamp(22px, 2.6vw, 36px);
margin-bottom: 10px;
letter-spacing: -0.01em;
}
.page-hero--compact p {
font-size: 15px;
margin-bottom: 18px;
max-width: 520px;
}
.page-hero--compact .hero-chips { margin-top: 14px; }
@media (max-width: 720px) {
.page-hero--compact { padding: 88px 20px 28px; }
.page-hero--compact h1 { font-size: clamp(20px, 6vw, 28px); }
} .predstava-section { padding-top: 64px; padding-bottom: 64px; }
.predstava-grid {
display: grid; grid-template-columns: minmax(0, 1fr) 380px;
gap: 56px; align-items: start;
}
@media (max-width: 980px) {
.predstava-grid { grid-template-columns: 1fr; gap: 40px; }
}
.single-predstava-aside {
position: sticky; top: 100px;
display: flex; flex-direction: column; gap: 16px;
}
@media (max-width: 980px) { .single-predstava-aside { position: static; } }
.predstava-card {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 24px 26px;
box-shadow: var(--shadow);
}
.predstava-card--cta { box-shadow: var(--shadow-lg); }
.predstava-card .section-tag { margin-bottom: 12px; }
.predstava-card-title {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 22px; margin-bottom: 12px;
}
.predstava-card-body {
font-size: 14.5px; color: var(--text2);
line-height: 1.65; margin-bottom: 18px;
}
.predstava-btn-block {
width: 100%; justify-content: center;
}
.program-sidebar-details {
display: grid;
gap: 10px;
margin: 18px 0;
}
.program-sidebar-detail {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 3px 11px;
align-items: center;
padding: 13px 14px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(255, 228, 238, .44), rgba(255, 255, 255, .74));
border: 1px solid rgba(139, 53, 214, .1);
}
.program-sidebar-detail-icon {
grid-row: span 2;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 13px;
background: rgba(139, 53, 214, .1);
color: var(--purple);
font-size: 15px;
font-weight: 900;
}
.program-sidebar-detail-label {
color: var(--text2);
font-size: 11px;
font-weight: 900;
letter-spacing: .08em;
line-height: 1.2;
text-transform: uppercase;
}
.program-sidebar-detail strong {
min-width: 0;
color: var(--text);
font-size: 15px;
line-height: 1.35;
overflow-wrap: anywhere;
}
.program-sidebar-detail--empty {
background: rgba(139, 53, 214, .06);
}
.program-sidebar-details + .predstava-btn-block {
margin-top: 6px;
}
[data-theme="dark"] .program-sidebar-detail {
background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .035));
border-color: rgba(255, 255, 255, .1);
}
[data-theme="dark"] .program-sidebar-detail-icon {
background: rgba(192, 132, 252, .14);
color: var(--lilac);
}
[data-theme="dark"] .program-sidebar-detail-label {
color: rgba(245, 237, 255, .58);
}
[data-theme="dark"] .program-sidebar-detail strong {
color: var(--text-light);
}
.predstava-btn-block + .predstava-btn-block { margin-top: 10px; }
.termini-list { margin: 0; }
.termin-btn { padding: 8px 16px; font-size: 13px; }
.predstava-video {
aspect-ratio: 16/9; border-radius: 18px;
overflow: hidden; margin: 32px 0;
box-shadow: var(--shadow-lg);
border: 1.5px solid var(--border);
}
.predstava-video iframe { width: 100%; height: 100%; border: 0; display: block; } .entry-content--predstava {
max-width: none; margin: 0; padding: 0;
}
.entry-content--predstava > * + * { margin-top: 1.2em; }
.entry-content--predstava p {
font-size: 17px; line-height: 1.78; color: var(--text2);
}
.entry-content--predstava h2 {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 28px; margin-top: 1.6em;
display: inline-flex; align-items: center; gap: 12px;
}
.entry-content--predstava h2::before {
content: ""; width: 6px; height: 28px;
border-radius: 3px;
background: linear-gradient(180deg, var(--pink), var(--orange, #f4681a));
display: inline-block;
}
.entry-content--predstava h3 {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 22px; margin-top: 1.4em;
}
.entry-content--predstava blockquote {
font-family: var(--vs-font-display); font-style: italic;
font-size: 22px; line-height: 1.5;
color: var(--text);
background: linear-gradient(135deg, rgba(232,53,138,.08), rgba(255,217,61,.10));
border-left: 4px solid var(--pink);
padding: 22px 26px; border-radius: 0 16px 16px 0;
margin: 28px 0;
}
.entry-content--predstava ul,
.entry-content--predstava ol { padding-left: 1.4em; }
.entry-content--predstava ul li,
.entry-content--predstava ol li {
font-size: 16.5px; line-height: 1.75; color: var(--text2);
margin-top: .35em;
}
.entry-content--predstava ul li::marker { color: var(--pink); }
.entry-content--predstava a {
color: var(--pink); font-weight: 600;
text-decoration: none;
border-bottom: 1.5px solid rgba(232,53,138,.35);
transition: border-color .2s;
}
.entry-content--predstava a:hover { border-bottom-color: var(--pink); }
.entry-content--predstava img {
border-radius: 14px; box-shadow: var(--shadow);
} .feeling-grid--cards {
grid-template-columns: repeat(4, 1fr);
gap: 18px;
max-width: 880px; margin: 0 auto;
}
.feeling-btn--card {
position: relative;
padding: 28px 14px 22px;
border-radius: 26px;
background: var(--card-bg);
border: 2px solid var(--border);
overflow: visible;
transition: transform .3s var(--spring), border-color .25s, box-shadow .3s, background .25s;
animation: vs-feel-bob 4s ease-in-out infinite;
animation-delay: calc( var(--feeling-i, 0) * .25s );
}
@keyframes vs-feel-bob {
0%, 100% { transform: translateY(0); }
50%      { transform: translateY(-4px); }
}
.feeling-btn--card:hover {
transform: translateY(-10px) scale(1.06);
border-color: var(--pink);
box-shadow: 0 18px 40px rgba(232,53,138,.22);
animation-play-state: paused;
}
.feeling-btn--card .feeling-emoji {
font-size: 64px;
line-height: 1;
display: inline-block;
transition: transform .35s var(--spring);
filter: drop-shadow( 0 6px 12px rgba(0,0,0,.12) );
}
.feeling-btn--card:hover .feeling-emoji {
transform: scale(1.18) rotate(-6deg);
}
.feeling-btn--card .feeling-label {
font-family: var(--vs-font-display);
font-weight: 800; font-size: 14px;
color: var(--text);
letter-spacing: .01em;
margin-top: 4px;
}
.feeling-btn--card.is-pulse .feeling-emoji {
animation: vs-feel-pop .55s var(--spring);
}
@keyframes vs-feel-pop {
0%   { transform: scale(1); }
40%  { transform: scale(1.45) rotate(8deg); }
70%  { transform: scale(.92) rotate(-4deg); }
100% { transform: scale(1.18) rotate(-6deg); }
}
.feeling-cloud {
position: absolute;
left: 50%; bottom: calc(100% + 14px);
transform: translate(-50%, 6px) scale(.7);
background: #fff;
color: var(--text);
font-family: var(--vs-font-display);
font-weight: 700;
font-size: 14px; line-height: 1.35;
padding: 14px 18px;
border-radius: 22px;
min-width: 180px; max-width: 260px;
text-align: center;
box-shadow:
0 18px 40px rgba(0,0,0,.18),
0 0 0 1px rgba(0,0,0,.04);
opacity: 0;
pointer-events: none;
z-index: 5;
transition: transform .45s var(--spring), opacity .35s var(--ease);
}
.feeling-cloud::before,
.feeling-cloud::after {
content: ""; position: absolute;
background: #fff; border-radius: 50%;
}
.feeling-cloud::before {
width: 18px; height: 18px;
bottom: -6px; left: 50%;
transform: translateX(-50%);
box-shadow: 0 4px 8px rgba(0,0,0,.05);
}
.feeling-cloud::after {
width: 10px; height: 10px;
bottom: -16px; left: calc(50% + 8px);
box-shadow: 0 4px 6px rgba(0,0,0,.04);
}
[data-theme="dark"] .feeling-cloud,
[data-theme="dark"] .feeling-cloud::before,
[data-theme="dark"] .feeling-cloud::after {
background: var(--card-bg);
color: var(--text);
}
.feeling-cloud.is-in {
opacity: 1;
transform: translate(-50%, 0) scale(1);
animation: vs-cloud-float 3.2s ease-in-out forwards;
}
.feeling-cloud.is-out {
opacity: 0;
transform: translate(-50%, -22px) scale(.85);
}
@keyframes vs-cloud-float {
0%   { transform: translate(-50%, 0) scale(1); }
60%  { transform: translate(-50%, -8px) scale(1.03); }
100% { transform: translate(-50%, -4px) scale(1); }
}
.happy-cta-row { text-align: center; margin-top: 44px; }
@media (max-width: 720px) {
.feeling-grid--cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.feeling-btn--card .feeling-emoji { font-size: 52px; }
.feeling-cloud { min-width: 140px; font-size: 13px; padding: 12px 14px; }
} .sretni-kutak-section { position: relative; }
.kutak-block { margin-top: 48px; }
.kutak-block:first-of-type { margin-top: 56px; }
.kutak-subhead {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 22px; margin: 0 0 22px;
display: inline-flex; align-items: center; gap: 12px;
color: var(--text);
}
.kutak-sub-emoji {
width: 38px; height: 38px; border-radius: 12px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, rgba(232,53,138,.14), rgba(255,217,61,.16));
font-size: 18px;
}
.kutak-grid {
display: grid; gap: 18px;
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) { .kutak-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .kutak-grid { grid-template-columns: 1fr; } }
.kutak-card {
display: flex; flex-direction: column;
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
overflow: hidden;
text-decoration: none; color: inherit;
box-shadow: var(--shadow);
transition: transform .3s var(--ease), box-shadow .3s, border-color .25s;
}
.kutak-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
border-color: var(--pink);
}
.kutak-thumb {
position: relative;
aspect-ratio: 3 / 4;
background: var(--bg2);
overflow: hidden;
}
.kutak-thumb img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .5s var(--ease);
}
.kutak-card:hover .kutak-thumb img { transform: scale(1.05); }
.kutak-pdf-badge {
position: absolute; top: 10px; right: 10px;
font-family: var(--vs-font-accent); font-weight: 800;
font-size: 11px; letter-spacing: .04em;
color: #fff; background: var(--pink);
padding: 4px 10px; border-radius: 50px;
box-shadow: 0 4px 10px rgba(232,53,138,.35);
}
.kutak-body {
padding: 16px 18px;
display: flex; flex-direction: column; gap: 6px;
}
.kutak-title {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 15px; line-height: 1.35; color: var(--text);
}
.kutak-cta {
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 12px; color: var(--pink);
display: inline-flex; align-items: center; gap: 4px;
transition: gap .2s;
}
.kutak-card:hover .kutak-cta { gap: 8px; }
.kutak-feature {
display: grid; grid-template-columns: 320px 1fr;
gap: 0; margin-top: 56px;
background:
radial-gradient(circle at 90% 20%, rgba(255,217,61,.18), transparent 45%),
radial-gradient(circle at 10% 90%, rgba(52,217,181,.16), transparent 45%),
var(--grad);
color: #fff;
border-radius: var(--rad-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
text-decoration: none;
transition: transform .35s var(--ease), box-shadow .35s;
}
.kutak-feature:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(0,0,0,.18); }
.kutak-feature-img { background: rgba(255,255,255,.08); }
.kutak-feature-img img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.kutak-feature-text { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.kutak-feature-eyebrow {
font-family: var(--vs-font-accent); font-weight: 800;
font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
color: rgba(255,255,255,.92);
display: inline-flex; align-items: center;
background: rgba(255,255,255,.18); padding: 6px 12px; border-radius: 50px;
width: fit-content;
}
.kutak-feature-title {
font-family: var(--vs-font-display); font-weight: 800;
font-size: clamp(24px, 3vw, 34px);
margin: 0; color: #fff;
}
.kutak-feature-text p {
font-size: 15px; line-height: 1.65;
color: rgba(255,255,255,.92); margin: 0;
}
.kutak-feature-btn { width: fit-content; margin-top: 6px; }
@media (max-width: 760px) {
.kutak-feature { grid-template-columns: 1fr; }
.kutak-feature-img { aspect-ratio: 16 / 9; }
.kutak-feature-text { padding: 28px 22px; }
} .testimonials-section {
background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
position: relative; overflow: hidden;
}
.testimonials-section::before {
content: ""; position: absolute;
top: -120px; right: -120px;
width: 320px; height: 320px; border-radius: 50%;
background: radial-gradient(circle, rgba(232,53,138,.10), transparent 70%);
pointer-events: none;
}
.testimonials-section::after {
content: ""; position: absolute;
bottom: -160px; left: -160px;
width: 380px; height: 380px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,217,61,.10), transparent 70%);
pointer-events: none;
}
.testimonials-carousel {
position: relative;
max-width: 880px; margin: 48px auto 0;
padding: 0 64px;
}
.testimonials-viewport {
overflow: hidden;
border-radius: var(--rad-lg);
}
.testimonials-track {
list-style: none; padding: 0; margin: 0;
position: relative;
min-height: 280px;
}
.testimonial-slide {
position: absolute; inset: 0;
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 48px 56px 36px;
box-shadow: var(--shadow-lg);
display: flex; flex-direction: column; justify-content: center;
gap: 24px;
opacity: 0; transform: translateY(12px) scale(.985);
pointer-events: none;
transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.testimonial-slide.is-active {
opacity: 1; transform: translateY(0) scale(1);
pointer-events: auto;
position: relative;
}
.t-quote-mark {
font-family: var(--vs-font-display);
font-weight: 900; font-size: 88px;
line-height: .6; color: var(--pink);
background: linear-gradient(135deg, var(--pink), var(--orange, #f4681a));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: -16px;
}
.t-quote {
font-family: var(--vs-font-display);
font-style: italic; font-weight: 500;
font-size: clamp(18px, 2.1vw, 24px);
line-height: 1.55;
color: var(--text);
margin: 0;
border: 0; padding: 0; background: none;
}
.t-meta {
display: flex; align-items: center; gap: 14px;
border-top: 1px solid var(--border);
padding-top: 20px;
}
.t-avatar {
width: 48px; height: 48px; border-radius: 50%;
background: linear-gradient(135deg, var(--pink), var(--orange, #f4681a));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--vs-font-display); font-weight: 800;
font-size: 20px;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(232,53,138,.28);
}
.t-meta-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.t-author { font-family: var(--vs-font-display); font-weight: 700; font-size: 16px; color: var(--text); }
.t-role   { font-size: 13px; color: var(--text2); }
.t-product {
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 12px; color: var(--pink); margin-top: 2px;
}
.t-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
background: var(--card-bg);
border: 1.5px solid var(--border);
color: var(--pink); font-size: 22px; line-height: 1;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: var(--shadow);
transition: background .2s, color .2s, transform .15s, border-color .2s;
z-index: 2;
}
.t-arrow:hover {
background: var(--pink); color: #fff;
border-color: var(--pink);
transform: translateY(-50%) scale(1.06);
}
.t-prev { left: 0; }
.t-next { right: 0; }
.t-dots {
display: flex; justify-content: center; gap: 8px;
margin-top: 24px;
}
.t-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--border);
border: 0; padding: 0; cursor: pointer;
transition: background .25s, transform .2s, width .3s;
}
.t-dot:hover { background: var(--text2); }
.t-dot.is-active {
background: var(--pink);
width: 28px; border-radius: 5px;
}
@media (max-width: 720px) {
.testimonials-carousel { padding: 0 8px; margin-top: 28px; }
.testimonial-slide { padding: 32px 22px 24px; gap: 18px; }
.t-quote-mark { font-size: 64px; }
.t-arrow { top: auto; bottom: -56px; transform: none; }
.t-arrow:hover { transform: scale(1.06); }
.t-prev { left: 30%; }
.t-next { right: 30%; }
.t-dots { margin-top: 72px; }
} .progs-section { padding: 80px 0; }
.progs-section .show-feature[hidden] { display: none; }
.rubrika-empty--filter { margin: 32px auto; max-width: 720px; } .features-block { margin-top: 48px; }
.vs-features-grid {
list-style: none; padding: 0; margin: 20px 0 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.vs-features-grid li {
display: flex; gap: 12px; align-items: flex-start;
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 14px 16px;
transition: transform .25s var(--ease), border-color .2s, box-shadow .25s;
}
.vs-features-grid li:hover {
transform: translateY(-2px);
border-color: var(--pink);
box-shadow: 0 6px 20px rgba(232,53,138,.12);
}
.vs-feature-check {
flex-shrink: 0;
width: 26px; height: 26px; border-radius: 8px;
background: linear-gradient(135deg, rgba(52,217,181,.18), rgba(255,217,61,.18));
color: var(--mint, #34d9b5);
font-weight: 800; font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
}
.vs-feature-text {
font-size: 15px; line-height: 1.55; color: var(--text);
}
@media (max-width: 720px) {
.vs-features-grid { grid-template-columns: 1fr; }
} .gallery-block, .cast-block { margin-top: 48px; }
.gallery-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.gallery-title {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 26px; margin: 0;
display: inline-flex; align-items: center; gap: 12px;
}
.gallery-emoji {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 12px;
background: linear-gradient(135deg, rgba(232,53,138,.15), rgba(255,217,61,.18));
font-size: 20px;
}
.gallery-count {
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 12px; color: var(--text2);
padding: 6px 14px; border-radius: 50px;
background: var(--bg2); border: 1px solid var(--border);
}
.photo-grid--creative {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 180px;
grid-auto-flow: dense;
gap: 12px;
}
.photo-grid--creative figure.photo-item,
.photo-grid--creative .photo-item {
margin: 0; padding: 0;
border-radius: 16px;
min-width: 0; min-height: 0;
display: block; position: relative;
overflow: hidden;
}
.photo-grid--creative .photo-item img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.photo-grid--creative .photo-item.feature {
grid-column: span 2; grid-row: span 2;
}
.photo-grid--creative .photo-item.tall { grid-row: span 2; }
.photo-grid--creative .photo-item.wide { grid-column: span 2; }
.photo-grid--creative .photo-item {
box-shadow: 0 6px 22px rgba(0,0,0,.08);
transition: transform .35s var(--ease), box-shadow .35s;
}
.photo-grid--creative .photo-item:hover {
transform: translateY(-4px);
box-shadow: 0 14px 36px rgba(232,53,138,.18);
}
.photo-grid--creative .photo-overlay {
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.45));
}
.photo-grid--creative .photo-zoom {
position: absolute; right: 14px; bottom: 14px;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(255,255,255,.92); color: var(--pink);
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px; backdrop-filter: blur(6px);
box-shadow: 0 4px 14px rgba(0,0,0,.18);
transform: scale(.85); transition: transform .25s var(--spring);
}
.photo-grid--creative .photo-item:hover .photo-zoom { transform: scale(1); }
@media (max-width: 720px) {
.photo-grid--creative { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
.photo-grid--creative .photo-item.feature,
.photo-grid--creative .photo-item.wide { grid-column: span 2; }
.photo-grid--creative .photo-item.tall { grid-row: span 1; }
} .lightbox { background: rgba(8, 4, 20, .94); }
.lb-frame {
margin: 0; position: relative;
display: flex; flex-direction: column; align-items: center;
max-width: 92vw; max-height: 92vh; gap: 14px;
}
.lb-img {
opacity: 0; transform: scale(.98);
transition: opacity .35s var(--ease), transform .45s var(--spring);
box-shadow: 0 40px 100px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
}
.lb-img.is-loaded { opacity: 1; transform: scale(1); }
.lb-caption:empty { display: none; }
.lb-caption[hidden] { display: none; }
.lb-caption {
font-family: var(--vs-font-accent);
font-weight: 600; font-size: 14px;
color: rgba(255,255,255,.92);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
padding: 10px 18px; border-radius: 50px;
max-width: 80vw; text-align: center;
backdrop-filter: blur(8px);
}
.lb-counter {
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
padding: 6px 14px; border-radius: 50px;
backdrop-filter: blur(8px);
color: #fff;
} .show-feature { padding: 96px 80px; } .gallery-header { max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 56px; } @media print {
.site-nav, .site-footer, .vs-mobile-drawer, .cart-overlay, .mini-cart-drawer,
.vs-floating-shapes, .vs-bg-blobs, #vsDaySky, #vsStarCanvas, .ticker-wrap,
.cta-section, .game-bg, .happy-bg { display: none !important; }
body { background: #fff !important; color: #151519 !important; }
.section-inner { padding: 12px 0 !important; }
}  :root {
--vs-sa-top:    env(safe-area-inset-top, 0px);
--vs-sa-right:  env(safe-area-inset-right, 0px);
--vs-sa-bottom: env(safe-area-inset-bottom, 0px);
--vs-sa-left:   env(safe-area-inset-left, 0px);
} button, a, [role="button"], input, select, textarea, label, summary {
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(232, 53, 138, .15);
} .vs-mobile-drawer,
.mini-cart-drawer,
.cart-overlay,
.tabs-nav,
.woocommerce-tabs ul.tabs,
.filter-inner,
.woocommerce-MyAccount-navigation ul {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
} @supports (height: 100dvh) {
.hero { min-height: 100dvh; }
} @media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
@media (max-width: 768px) { input, select, textarea {
font-size: 16px !important;
} button, a.btn-primary, a.btn-outline, .nav-cta, .cart-btn,
.theme-toggle, .vs-mobile-toggle, .vs-mobile-close,
.filter-btn, .view-btn, .qty-dec, .qty-inc, .quantity .qty,
.action-btn, .wishlist-btn, .related-add, .cart-add-btn,
.mini-cart-close, .cart-close, .cart-item-remove,
.tab-btn, .woocommerce-tabs ul.tabs li a,
.igre-toc-card, .game-btn, .feeling-btn, .memory-card {
min-height: 44px;
min-width: 44px;
} .site-header { top: 0; }
.site-header.is-sticky .site-nav,
.site-nav {
top: calc(8px + var(--vs-sa-top));
width: calc(100% - 20px);
padding: 10px 14px;
border-radius: 18px;
}
.nav-logo img,
.nav-logo-link img,
.custom-logo {
height: 44px !important;
} .nav-links { display: none !important; }
.nav-right { gap: 6px; } .vm-panel {
max-height: 94svh;
} .hero {
padding-top: 92px;
padding-bottom: 110px;
min-height: 88svh;
min-height: 88dvh;
padding-left: 0; padding-right: 0;
}
.vs-slide-inner {
grid-template-columns: 1fr;
gap: 36px;
padding: 0 22px;
min-height: 0;
}
.hero h1 { font-size: clamp(34px, 9vw, 46px); line-height: 1.06; }
.hero p  { font-size: 16px; line-height: 1.65; max-width: none; }
.hero-btns { gap: 10px; }
.hero-btns .btn-primary,
.hero-btns .btn-outline { flex: 1 1 calc(50% - 10px); justify-content: center; }
.hero-trust { gap: 8px; }
.hero-trust .trust-pill { font-size: 12px; padding: 6px 12px; } .vs-slide-visual {
margin: 0 auto;
width: 100%;
max-width: none;
display: flex; justify-content: center;
order: -1; margin-bottom: 8px;
}
.book-scene {
width: 280px; height: 360px;
transform: none;
}
.book {
width: 220px; height: 310px;
left: 30px; top: 26px;
}
.book-title { font-size: 16px; bottom: 50px; }
.book-subtitle { font-size: 9.5px; bottom: 34px; }
.book-author { font-size: 11px; bottom: 14px; }
.book-stars { font-size: 12px; top: 14px; }
.book-badge { width: 52px; height: 52px; font-size: 10px; top: 14px; right: 14px; }
.book-card { padding: 10px 14px; }
.bc-right  { right: 14px; top: -6px; left: auto; bottom: auto; }
.bc-bottom { left: 14px; top: -6px; right: auto; bottom: auto; width: 148px; }
.bcard-icon { font-size: 22px; }
.bcard-val { font-size: 15px; }
.ha-ring, .ha-ring2 { display: none; } .hero-landscape { height: 160px; } .cloud { transform: scale(.7); }
.vs-flock, .vs-butterfly, .vs-airplane,
.vs-shooting-star { display: none; } .vs-balloon { width: 52px; }
.vs-balloon-canopy { width: 52px; height: 62px; }
.vs-balloon-2 .vs-balloon-canopy { width: 42px; height: 50px; }
.vs-balloon-basket { width: 20px; height: 14px; }
.vs-balloon-2 .vs-balloon-basket { width: 16px; }
.fshape:nth-child(n+5) { display: none; }
.vs-bg-blobs .bb1, .vs-bg-blobs .bb2 { filter: blur(40px); transform: scale(.7); }
.vs-sun  { width: 64px; height: 64px; top: 8%; right: 6%; }
.vs-moon { width: 64px; height: 64px; top: 8%; right: 6%; }
.vs-sun-rays { display: none; } .page-hero {
padding: 110px 22px 56px;
min-height: 38svh;
min-height: 38dvh;
}
.page-hero h1 { font-size: clamp(28px, 7.5vw, 40px); }
.page-hero p  { font-size: 15px; line-height: 1.65; }
.hero-chips { gap: 8px; }
.hero-chip  { font-size: 12px; padding: 6px 12px; } .section,
.section-inner,
.show-feature  { padding-left: 22px !important; padding-right: 22px !important; }
.section-inner { padding-top: 56px !important; padding-bottom: 56px !important; }
.section-header { margin-bottom: 28px; }
.section-title { font-size: clamp(26px, 7vw, 36px); line-height: 1.1; }
.section-sub { font-size: 15px; } .btn-primary, .btn-outline {
min-height: 48px;
padding: 14px 20px;
font-size: 15px;
} .site-footer .footer-inner {
padding: 48px 22px calc(24px + var(--vs-sa-bottom));
}
.footer-top { grid-template-columns: 1fr !important; gap: 28px; }
.footer-bottom { flex-direction: column; text-align: center; gap: 8px; }
.footer-social { gap: 8px; }
.social-btn { width: 44px; height: 44px; } .prog-card.is-wide { grid-column: span 1 !important; }
.archive-grid,
.gallery-grid,
.testimonial-grid,
.about-grid,
.feeling-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .shop-card,
.prog-card,
.show-card { animation: none !important; opacity: 1 !important; transform: none !important; }
} @media (max-width: 420px) {
.hero h1 { font-size: clamp(30px, 9vw, 40px); }
.vs-slide-inner { padding: 0 16px; }
.section-inner,
.section,
.show-feature { padding-left: 16px !important; padding-right: 16px !important; }
.btn-primary, .btn-outline { width: 100%; } .book-scene { width: 256px; height: 332px; }
.book { width: 200px; height: 286px; left: 28px; top: 24px; }
.book-title { font-size: 15px; bottom: 46px; }
.book-subtitle { font-size: 9px; bottom: 32px; }
.book-author { font-size: 10.5px; bottom: 12px; }
} .vs-s0-illus {
justify-content: center;
}
.vs-illus-wrap {
position: relative;
width: 440px;
height: 480px;
flex-shrink: 0;
} .vs-blob {
position: absolute;
border-radius: 50%;
filter: blur(38px);
opacity: 0.55;
pointer-events: none;
}
.vs-blob--1 {
width: 270px; height: 270px;
top: -30px; left: -50px;
background: radial-gradient(circle at 40% 40%, #FF6B9D, #C9184A 70%);
animation: vs-blob-drift 9s ease-in-out infinite;
}
.vs-blob--2 {
width: 210px; height: 210px;
bottom: 20px; right: -30px;
background: radial-gradient(circle at 60% 60%, #A855F7, #6D28D9 70%);
animation: vs-blob-drift 11s ease-in-out infinite 2.5s;
}
.vs-blob--3 {
width: 190px; height: 190px;
top: 130px; right: 10px;
background: radial-gradient(circle at 50% 30%, #FCD34D, #F97316 70%);
animation: vs-blob-drift 8s ease-in-out infinite 1.2s;
}
@keyframes vs-blob-drift {
0%, 100% { transform: scale(1)    translate(0, 0); }
33%       { transform: scale(1.12) translate(12px, -18px); }
66%       { transform: scale(0.94) translate(-10px, 12px); }
} .vs-rainbow-arc-wrap {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
width: 340px;
height: 170px;
overflow: hidden;
}
.vs-rainbow-arc-inner {
width: 340px;
height: 340px;
border-radius: 50%;
background: radial-gradient(circle at center,
transparent 52%,
#FF595E 52% 59%,
#FF924C 59% 66%,
#FFCA3A 66% 73%,
#6AC47F 73% 80%,
#4DC9E6 80% 87%,
#8B5CF6 87% 94%,
transparent 94%
);
animation: vs-rainbow-pulse 4s ease-in-out infinite;
}
@keyframes vs-rainbow-pulse {
0%, 100% { transform: scale(1);    opacity: 1; }
50%       { transform: scale(1.04); opacity: .85; }
} .vs-kids-group {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: flex-end;
gap: 8px;
}
.vs-kid {
font-size: 70px;
line-height: 1;
filter: drop-shadow(0 10px 24px rgba(139, 53, 214, 0.35));
display: block;
}
.vs-kid--1 { font-size: 66px; }
.vs-kid--2 { font-size: 80px; }
.vs-kid--3 { font-size: 66px; } .vs-slide--active:not(.vs-slide--exiting) .vs-kid--1 {
animation: vs-kid-jump 2.4s ease-in-out infinite;
}
.vs-slide--active:not(.vs-slide--exiting) .vs-kid--2 {
animation: vs-kid-jump 2.4s ease-in-out infinite 0.5s;
}
.vs-slide--active:not(.vs-slide--exiting) .vs-kid--3 {
animation: vs-kid-jump 2.4s ease-in-out infinite 1s;
}
@keyframes vs-kid-jump {
0%, 100% { transform: translateY(0)    rotate(0deg); }
25%       { transform: translateY(-18px) rotate(-4deg); }
50%       { transform: translateY(-6px)  rotate(2deg); }
75%       { transform: translateY(-14px) rotate(-2deg); }
} .vs-fi {
position: absolute;
pointer-events: none;
line-height: 1;
}
.vs-fi--1 { top: 55px;     left: 22px;   font-size: 28px; }
.vs-fi--2 { top: 170px;    left: 8px;    font-size: 24px; }
.vs-fi--3 { top: 44px;     right: 30px;  font-size: 32px; }
.vs-fi--4 { top: 195px;    right: 12px;  font-size: 20px; }
.vs-fi--5 { bottom: 110px; left: 30px;   font-size: 26px; }
.vs-fi--6 { bottom: 140px; right: 28px;  font-size: 30px; } .vs-slide--active:not(.vs-slide--exiting) .vs-fi {
animation: vs-fi-float 3s ease-in-out infinite;
}
.vs-slide--active:not(.vs-slide--exiting) .vs-fi--1 { animation-delay: 0s; }
.vs-slide--active:not(.vs-slide--exiting) .vs-fi--2 { animation-delay: 0.6s; }
.vs-slide--active:not(.vs-slide--exiting) .vs-fi--3 { animation-delay: 1.2s; }
.vs-slide--active:not(.vs-slide--exiting) .vs-fi--4 { animation-delay: 0.3s; }
.vs-slide--active:not(.vs-slide--exiting) .vs-fi--5 { animation-delay: 0.9s; }
.vs-slide--active:not(.vs-slide--exiting) .vs-fi--6 { animation-delay: 1.5s; }
@keyframes vs-fi-float {
0%, 100% { transform: translateY(0)    rotate(0deg); }
50%       { transform: translateY(-12px) rotate(8deg); }
} .vs-scene-sun,
.vs-scene-tree { display: none; position: absolute; pointer-events: none; user-select: none; } .vs-s1-photo {
position: relative;
z-index: 2;
align-self: center;
}
.vs-s1-img {
width: 100%;
max-width: 400px;
height: 500px;
object-fit: cover;
object-position: center top;
border-radius: 20px;
border: 4px solid var(--pink);
box-shadow:
8px 12px 0 var(--purple),
0 28px 72px rgba(139, 53, 214, .22);
transform: rotate(-2deg);
display: block;
}
.vs-s1-photo::before {
content: '';
position: absolute;
inset: -10px;
border: 2px dashed rgba(232, 53, 138, .28);
border-radius: 26px;
pointer-events: none;
transform: rotate(1deg);
}
.vs-s1-photo-placeholder {
width: 400px; height: 500px;
border-radius: 20px;
border: 4px solid var(--pink);
background: var(--card-bg);
display: flex; align-items: center; justify-content: center;
font-size: 90px;
transform: rotate(-2deg);
box-shadow: 8px 12px 0 var(--purple);
}  .vs-slide {
isolation: isolate;
} .vs-slide[data-slide="0"]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(255, 107, 157, 0.13) 0%,
rgba(249, 115, 22, 0.07) 100%
);
pointer-events: none;
z-index: 0;
}
.vs-slide[data-slide="0"] .vs-slide-inner {
grid-template-columns: 1fr;
position: relative;
z-index: 1;
text-align: center;
justify-items: center;
max-width: 920px;
}
.vs-slide[data-slide="0"] .vs-slide-content { max-width: 820px; width: 100%; }
.vs-slide[data-slide="0"] .vs-s0-illus { display: none; }
.vs-slide[data-slide="0"] .hero-btns { justify-content: center; }
.vs-slide[data-slide="0"] .hero-trust { justify-content: center; }
.vs-slide[data-slide="0"] .vs-slide-h1 {
font-size: clamp(52px, 6vw, 92px);
background: linear-gradient(135deg, var(--pink) 0%, var(--orange) 55%, #FF5722 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.vs-slide[data-slide="0"] .hero-eyebrow {
background: linear-gradient(135deg, rgba(249,115,22,.14), rgba(255,107,157,.10));
border-color: rgba(249, 115, 22, 0.35);
color: #D4440C;
}
[data-theme="dark"] .vs-slide[data-slide="0"] .hero-eyebrow {
color: #FBA06A;
} .vs-slide[data-slide="1"]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(139, 53, 214, 0.11) 0%,
rgba(232, 53, 138, 0.06) 100%
);
pointer-events: none;
z-index: 0;
}
.vs-slide[data-slide="1"] .vs-slide-inner {
grid-template-columns: 0.9fr 1.1fr;
position: relative;
z-index: 1;
}
.vs-slide[data-slide="1"] .vs-slide-h2 {
background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.vs-slide[data-slide="1"] .hero-eyebrow {
background: rgba(139, 53, 214, 0.12);
border-color: rgba(139, 53, 214, 0.3);
color: var(--purple);
}
[data-theme="dark"] .vs-slide[data-slide="1"] .hero-eyebrow {
background: rgba(139, 53, 214, 0.2);
color: #C084FC;
} .vs-slide[data-slide="2"]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(232, 53, 138, 0.08) 0%,
rgba(249, 115, 22, 0.05) 100%
);
pointer-events: none;
z-index: 0;
}
.vs-slide[data-slide="2"] .vs-slide-inner {
grid-template-columns: 1fr 1fr;
position: relative;
z-index: 1;
}
.vs-slide[data-slide="2"] .vs-slide-visual {
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.vs-slide[data-slide="2"] .ha-ring,
.vs-slide[data-slide="2"] .ha-ring2,
.vs-slide[data-slide="2"] .book-scene { display: none; }
.vs-slide[data-slide="2"] .vs-slide-h2 {
background: linear-gradient(135deg, var(--pink) 0%, var(--orange) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.vs-slide[data-slide="2"] .hero-eyebrow {
background: linear-gradient(135deg, rgba(232, 53, 138, 0.12), rgba(249, 115, 22, 0.08));
border-color: rgba(232, 53, 138, 0.35);
color: #C41878;
}
[data-theme="dark"] .vs-slide[data-slide="2"] .hero-eyebrow {
background: rgba(232, 53, 138, 0.18);
color: #F472B6;
} .vs-s2-cover {
position: relative;
display: block;
width: 220px;
height: 300px;
border-radius: 14px;
border: 2px dashed rgba(232, 53, 138, 0.55);
overflow: hidden;
text-decoration: none;
box-shadow: 0 28px 56px rgba(139, 53, 214, 0.35),
0 8px 20px rgba(30, 10, 46, 0.18);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.vs-s2-cover:hover { transform: translateY(-6px); }
.vs-s2-cover-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.vs-s2-cover-badge {
position: absolute;
top: 14px;
right: -2px;
background: linear-gradient(135deg, var(--pink), var(--orange));
color: #fff;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 4px 0 0 4px;
text-align: center;
white-space: pre-line;
z-index: 2;
box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.vs-slide[data-slide="2"] .btn-primary {
background: linear-gradient(135deg, #009688, #00796B) !important;
border-color: transparent !important;
box-shadow: 0 4px 18px rgba(0,150,136,.35) !important;
}
.vs-slide[data-slide="2"] .btn-primary:hover {
background: linear-gradient(135deg, #00796B, #004D40) !important;
} .hero.vs-hero .vs-hero-slider {
min-height: clamp(680px, 78vh, 860px);
}
.hero.vs-hero .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-inner {
max-width: 1320px;
padding: 0 48px;
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(340px, 0.98fr);
gap: clamp(36px, 5vw, 72px);
align-items: center;
text-align: left;
justify-items: stretch;
}
.hero.vs-hero .vs-slide-content {
max-width: 620px;
width: 100%;
}
.hero.vs-hero .hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 15px;
border-radius: 999px;
border: 1px solid rgba(139, 53, 214, 0.16);
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 10px 26px rgba(30, 10, 46, 0.06);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
[data-theme="dark"] .hero.vs-hero .hero-eyebrow {
background: rgba(23, 12, 37, 0.72);
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}
.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-content {
order: 2;
}
.hero.vs-hero .vs-slide[data-slide="1"] .vs-s1-photo {
order: 1;
}
.hero.vs-hero .vs-slide-content > p {
max-width: 54ch;
font-size: clamp(17px, 1.35vw, 19px);
line-height: 1.72;
color: var(--text2);
}
.hero.vs-hero .vs-slide-h1 {
font-size: clamp(58px, 6.4vw, 98px);
line-height: 0.98;
margin-bottom: 26px;
letter-spacing: -0.035em;
text-wrap: balance;
}
.hero.vs-hero .vs-slide-h2 {
font-size: clamp(38px, 4.4vw, 68px);
line-height: 1.04;
margin-bottom: 18px;
letter-spacing: -0.03em;
text-wrap: balance;
}
.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-h1 {
font-size: clamp(44px, 4.8vw, 72px);
line-height: 1.02;
max-width: 11ch;
background: linear-gradient(135deg, var(--orange) 0%, var(--pink) 55%, var(--purple) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero.vs-hero .hero-btns {
gap: 14px;
margin-top: 8px;
}
.hero.vs-hero .hero-trust {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.hero.vs-hero .vs-slide-visual {
display: flex;
align-items: center;
justify-content: center;
min-height: 420px;
}
.hero.vs-hero .vs-s1-photo {
display: flex;
align-items: center;
justify-content: center;
min-height: 420px;
}
.hero.vs-hero .vs-slide[data-slide="0"] .vs-s0-illus {
display: flex;
}
.hero.vs-hero .vs-media-card {
position: relative;
width: min(100%, 460px);
min-height: 520px;
border-radius: 28px;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,247,251,.76));
border: 1px solid rgba(255, 255, 255, 0.58);
box-shadow: 0 36px 90px rgba(30, 10, 46, 0.14), 0 12px 30px rgba(232, 53, 138, 0.10);
transition: box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
[data-theme="dark"] .hero.vs-hero .vs-media-card {
background: linear-gradient(180deg, rgba(38, 23, 58, .88), rgba(23, 12, 37, .82));
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 34px 90px rgba(0, 0, 0, 0.34), 0 12px 30px rgba(232, 53, 138, 0.10);
}
.hero.vs-hero .vs-media-card--photo {
padding: 0;
min-height: 560px;
}
.hero.vs-hero .vs-media-card--founder,
.hero.vs-hero .vs-media-card--book {
padding: 0;
}
.hero.vs-hero .vs-media-card--founder {
background: transparent;
border-color: transparent;
box-shadow: none;
overflow: visible;
}
[data-theme="dark"] .hero.vs-hero .vs-media-card--founder {
background: transparent;
border-color: transparent;
box-shadow: none;
}
.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-media-card-img,
.hero.vs-hero .vs-s1-img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.hero.vs-hero .vs-s1-photo::before {
display: none;
}
.hero.vs-hero .vs-s1-img {
transform: none;
border: 0;
border-radius: 0;
box-shadow: 0 28px 54px rgba(30, 10, 46, 0.16);
object-fit: contain;
object-position: center bottom;
filter: drop-shadow(0 18px 28px rgba(30, 10, 46, 0.14));
}
.hero.vs-hero .vs-s1-photo-placeholder {
width: 100%;
height: 100%;
border: 0;
border-radius: 28px;
background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,244,248,.92));
box-shadow: none;
transform: none;
}
.hero.vs-hero .vs-media-card-overlay {
position: absolute;
left: 22px;
right: 22px;
bottom: 22px;
display: flex;
flex-wrap: wrap;
gap: 10px;
z-index: 3;
}
.hero.vs-hero .vs-media-pill {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 999px;
background: rgba(253, 248, 245, 0.88);
border: 1px solid rgba(232, 53, 138, 0.12);
color: var(--heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
backdrop-filter: blur(10px);
}
[data-theme="dark"] .hero.vs-hero .vs-media-pill {
background: rgba(22, 13, 34, 0.82);
border-color: rgba(255, 255, 255, 0.08);
color: var(--text-light);
}
.hero.vs-hero .vs-media-card-kicker {
display: inline-flex;
margin-bottom: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.86);
}
.hero.vs-hero .vs-slide[data-slide="0"]::before {
background: radial-gradient(circle at 20% 20%, rgba(244, 104, 26, 0.14), transparent 42%),
linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(232, 53, 138, 0.04));
}
.hero.vs-hero .vs-slide[data-slide="1"]::before {
background: radial-gradient(circle at 82% 18%, rgba(139, 53, 214, 0.14), transparent 42%),
linear-gradient(135deg, rgba(139, 53, 214, 0.08), rgba(232, 53, 138, 0.05));
}
.hero.vs-hero .vs-slide[data-slide="2"]::before {
background: radial-gradient(circle at 72% 36%, rgba(52, 217, 181, 0.16), transparent 38%),
linear-gradient(135deg, rgba(232, 53, 138, 0.08), rgba(52, 217, 181, 0.05));
}
.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-h2,
.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-h2 {
background: linear-gradient(135deg, var(--purple) 0%, var(--pink) 60%, var(--orange) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero.vs-hero .vs-media-card--book {
position: relative;
justify-self: end;
width: min(100%, 320px);
border-radius: 18px 22px 22px 18px;
box-shadow: 0 36px 72px rgba(30, 10, 46, 0.22), 14px 10px 0 rgba(255, 255, 255, 0.66),
18px 12px 0 rgba(232, 53, 138, 0.08);
transform: perspective(1400px) rotateY(-18deg) rotateX(2deg);
transform-style: preserve-3d;
overflow: visible;
}
.hero.vs-hero .vs-media-card-book-image {
position: absolute;
inset: 0;
background-position: center;
background-size: cover;
filter: saturate(1.04);
border-radius: inherit;
}
.hero.vs-hero .vs-media-card--book::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(14, 8, 22, 0.02) 18%, rgba(14, 8, 22, 0.64) 100%);
z-index: 1;
border-radius: inherit;
}
.hero.vs-hero .vs-media-card--book::after {
content: '';
position: absolute;
top: 8px;
bottom: 8px;
left: -14px;
width: 18px;
border-radius: 10px 0 0 10px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 236, 242, 0.92)),
repeating-linear-gradient(180deg, rgba(139, 53, 214, 0.05) 0 2px, rgba(255, 255, 255, 0) 2px 6px);
box-shadow: inset -2px 0 0 rgba(30, 10, 46, 0.1), inset 2px 0 0 rgba(255, 255, 255, 0.72);
transform: translateZ(-1px);
}
[data-theme="dark"] .hero.vs-hero .vs-media-card--book {
box-shadow: 0 40px 78px rgba(4, 3, 8, 0.5), 14px 10px 0 rgba(58, 36, 78, 0.36), 18px 12px 0 rgba(14, 8, 22, 0.28);
}
[data-theme="dark"] .hero.vs-hero .vs-media-card--book::after {
background: linear-gradient(180deg, rgba(236, 222, 248, 0.9), rgba(175, 152, 196, 0.82)),
repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0 2px, rgba(255, 255, 255, 0) 2px 6px);
box-shadow: inset -2px 0 0 rgba(4, 3, 8, 0.26), inset 2px 0 0 rgba(255, 255, 255, 0.08);
}
.hero.vs-hero .vs-media-card--founder::before {
content: '';
position: absolute;
inset: auto 6% 0 6%;
height: 20%;
border-radius: 999px;
background: radial-gradient(ellipse at center, rgba(30, 10, 46, 0.22) 0%, rgba(30, 10, 46, 0.08) 45%,
rgba(30, 10, 46, 0) 72%);
filter: blur(12px);
z-index: 1;
}
.hero.vs-hero .vs-media-card-book-copy {
position: absolute;
left: 24px;
right: 24px;
bottom: 96px;
z-index: 2;
color: rgba(255,255,255,.98);
}
.hero.vs-hero .vs-media-card-book-copy strong {
display: block;
font-family: var(--vs-font-display);
font-size: clamp(28px, 3vw, 38px);
line-height: 1.02;
}
.hero.vs-hero .vs-media-card-book-copy small {
display: block;
margin-top: 8px;
font-size: 15px;
color: rgba(255,255,255,.84);
}
.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-visual {
align-items: stretch;
}
.hero.vs-hero .vs-hero-slider {
touch-action: pan-y;
cursor: grab;
}
.hero.vs-hero .vs-hero-slider:active {
cursor: grabbing;
}
.hero.vs-hero .vs-s2-cover-badge {
top: 18px;
right: 18px;
border-radius: 999px;
padding: 8px 12px;
font-size: 10px;
}
.hero.vs-hero .btn-primary,
.hero.vs-hero .btn-outline {
min-height: 54px;
padding-left: 22px;
padding-right: 22px;
border-radius: 16px;
font-size: 15px;
}
.hero.vs-hero .btn-primary {
box-shadow: 0 18px 36px rgba(232, 53, 138, 0.16);
}
.hero.vs-hero .btn-primary:hover {
box-shadow: 0 22px 44px rgba(232, 53, 138, 0.22);
}
.hero.vs-hero .btn-outline {
background: rgba(255, 255, 255, 0.52);
backdrop-filter: blur(8px);
border-color: rgba(139, 53, 214, 0.12);
}
[data-theme="dark"] .hero.vs-hero .btn-outline {
background: rgba(23, 12, 37, 0.54);
border-color: rgba(255, 255, 255, 0.10);
}
.hero.vs-hero .founder-chip {
margin-top: 2px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(139, 53, 214, 0.10);
backdrop-filter: blur(8px);
}
[data-theme="dark"] .hero.vs-hero .founder-chip {
background: rgba(23, 12, 37, 0.54);
border-color: rgba(255, 255, 255, 0.08);
}
.hero.vs-hero .vs-media-card--fallback {
display: flex;
align-items: stretch;
justify-content: center;
padding: 26px;
background:
radial-gradient(circle at 22% 28%, rgba(244, 104, 26, 0.16), transparent 28%),
radial-gradient(circle at 78% 72%, rgba(139, 53, 214, 0.18), transparent 30%),
linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,247,251,.82));
}
[data-theme="dark"] .hero.vs-hero .vs-media-card--fallback {
background:
radial-gradient(circle at 22% 28%, rgba(244, 104, 26, 0.16), transparent 28%),
radial-gradient(circle at 78% 72%, rgba(139, 53, 214, 0.18), transparent 30%),
linear-gradient(180deg, rgba(34, 21, 51, .96), rgba(20, 12, 32, .84));
}
.hero.vs-hero .vs-fallback-orb {
position: absolute;
border-radius: 999px;
filter: blur(2px);
animation: vs-fallback-drift 9s ease-in-out infinite;
}
.hero.vs-hero .vs-fallback-orb--1 {
top: 48px;
right: 42px;
width: 120px;
height: 120px;
background: rgba(244, 104, 26, 0.18);
}
.hero.vs-hero .vs-fallback-orb--2 {
left: 34px;
bottom: 42px;
width: 150px;
height: 150px;
background: rgba(139, 53, 214, 0.14);
animation-delay: -3s;
}
.hero.vs-hero .vs-fallback-panel {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 12px;
width: 100%;
padding: 28px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.56);
border: 1px solid rgba(255,255,255,.65);
backdrop-filter: blur(10px);
}
[data-theme="dark"] .hero.vs-hero .vs-fallback-panel {
background: rgba(23, 12, 37, 0.50);
border-color: rgba(255,255,255,.10);
}
.hero.vs-hero .vs-fallback-kicker {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--text2);
}
.hero.vs-hero .vs-fallback-panel strong {
font-family: var(--vs-font-display);
font-size: clamp(28px, 2.8vw, 40px);
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--heading);
}
[data-theme="dark"] .hero.vs-hero .vs-fallback-panel strong {
color: var(--text-light);
}
.hero.vs-hero .vs-fallback-panel small {
font-size: 15px;
line-height: 1.6;
color: var(--text2);
}
@keyframes vs-fallback-drift {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
.hero.vs-hero .vs-slider-controls {
bottom: 26px;
width: min(100%, 320px);
justify-content: center;
}
.hero.vs-hero .vs-dot {
background: rgba(255, 255, 255, 0.36);
}
[data-theme="light"] .hero.vs-hero .vs-dot {
background: rgba(30, 10, 46, 0.16);
}
.hero.vs-hero .vs-dot--active {
background: linear-gradient(135deg, var(--pink), var(--orange));
}
@media (max-width: 1080px) {
.hero.vs-hero .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-inner {
padding: 0 32px;
gap: 28px;
grid-template-columns: minmax(0, 1fr) minmax(300px, .86fr);
}
.hero.vs-hero .vs-media-card {
min-height: 460px;
}
.hero.vs-hero .vs-slide-h1 {
font-size: clamp(50px, 6vw, 78px);
}
.hero.vs-hero .vs-slide-h2 {
font-size: clamp(34px, 4vw, 54px);
}
.hero.vs-hero .vs-slide[data-slide="1"] .vs-s1-photo {
order: 0;
}
.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-content {
order: 0;
}
} body.vs-generic-page #vsDaySky,
body.vs-generic-page #vsNightDecor,
body.vs-generic-page #vsSkyTop,
body.vs-generic-page #vsStarCanvas,
body.vs-generic-page .vs-floating-shapes,
body.vs-generic-page .vs-bg-blobs {
display: none !important;
}
body.vs-generic-page {
background: linear-gradient(180deg, #f8f6fb 0%, #f4f7fb 100%);
}
body.vs-generic-page .site-nav,
body.vs-generic-page .site-header.is-sticky .site-nav {
background: rgba(255, 255, 255, 0.98);
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-color: rgba(139, 53, 214, 0.1);
box-shadow: 0 14px 34px rgba(30, 10, 46, 0.08);
}
[data-theme="dark"] body.vs-generic-page .site-nav,
[data-theme="dark"] body.vs-generic-page .site-header.is-sticky .site-nav {
background: rgba(20, 12, 31, 0.98);
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 16px 36px rgba(4, 3, 8, 0.26);
}
.page-hero--editorial {
min-height: auto;
padding: 108px 80px 22px;
text-align: left;
align-items: flex-end;
justify-content: flex-start;
background: linear-gradient(180deg, rgba(251, 249, 255, 0.96) 0%, rgba(245, 247, 251, 0.94) 100%);
}
.page-hero--editorial,
.page-hero--editorial .page-hero-content,
.page-hero--editorial .hero-eyebrow,
.page-hero--editorial h1,
.page-hero--editorial p {
text-align: left;
}
.page-hero--editorial .page-hero-bg,
.page-hero--editorial .page-hero-bg::after {
display: none;
}
.page-hero--editorial .page-hero-content {
max-width: 1180px;
width: 100%;
margin: 0;
}
.page-hero--editorial .hero-eyebrow {
background: rgba(255, 255, 255, 0.78);
border-color: rgba(139, 53, 214, 0.14);
color: var(--purple);
box-shadow: 0 12px 28px rgba(30, 10, 46, 0.06);
margin: 0 0 18px;
}
.page-hero--editorial h1 {
max-width: 11ch;
margin: 0;
color: var(--heading);
font-size: clamp(36px, 5vw, 68px);
line-height: 0.98;
letter-spacing: -0.03em;
text-wrap: balance;
}
.page-hero--editorial p {
color: var(--text2);
margin: 20px 0 0;
max-width: 62ch;
}
.page-hero--editorial .wave-bottom {
display: none;
}
.page-hero--about,
.page-hero--about .page-hero-content,
.page-hero--about .hero-eyebrow,
.page-hero--about h1,
.page-hero--about p {
text-align: center;
}
.page-hero--about .page-hero-content {
max-width: 980px;
margin: 0 auto;
}
.page-hero--about .hero-eyebrow {
margin-inline: auto;
}
.page-hero--about h1 {
max-width: none;
margin-inline: auto;
}
.page-hero--about p {
margin-inline: auto;
max-width: 46ch;
}
[data-theme="dark"] .page-hero--editorial {
background: linear-gradient(180deg, rgba(20, 12, 31, 0.98) 0%, rgba(16, 10, 25, 0.98) 100%);
}
[data-theme="dark"] .page-hero--editorial .hero-eyebrow {
background: rgba(32, 18, 48, 0.7);
border-color: rgba(255, 255, 255, 0.08);
color: var(--text-light);
box-shadow: none;
}
[data-theme="dark"] .page-hero--editorial h1 {
color: var(--text-light);
}
[data-theme="dark"] .page-hero--editorial p {
color: var(--text2);
}
.vs-page-shell {
max-width: 1320px;
margin: 0 auto;
padding: 42px 80px 96px;
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(249, 250, 253, 1) 100%);
border: 1px solid rgba(139, 53, 214, 0.08);
border-radius: 34px;
box-shadow: 0 24px 70px rgba(30, 10, 46, 0.06);
}
.vs-page-article {
max-width: none;
padding: 0;
}
.vs-page-intro-text {
margin: 0;
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.58;
letter-spacing: -0.015em;
color: var(--heading);
max-width: 40ch;
padding-top: 12px;
padding-bottom: 10px;
}
.vs-page-featured {
position: relative;
float: right;
width: min(28vw, 320px);
margin: 8px -10px 44px 88px;
border-radius: 30px;
overflow: hidden;
border: 1px solid rgba(139, 53, 214, 0.1);
box-shadow: 0 34px 80px rgba(30, 10, 46, 0.14);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 243, 252, 0.94));
}
body.vs-page-about .vs-page-shell {
max-width: 1280px;
}
body.vs-page-about .vs-page-body {
max-width: 980px;
margin: 0 auto;
}
body.vs-page-about .vs-page-featured {
width: min(26vw, 296px);
margin: 10px 0 36px 72px;
border-radius: 28px;
}
body.vs-page-about .vs-page-body > p:first-child {
font-size: 20px;
line-height: 1.86;
color: var(--heading);
}
.vs-page-featured::before {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 26%;
background: linear-gradient(180deg, rgba(30, 10, 46, 0) 0%, rgba(30, 10, 46, 0.22) 100%);
z-index: 1;
pointer-events: none;
}
.vs-page-featured img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.vs-page-body {
position: relative;
overflow: hidden;
}
.vs-page-body > * {
max-width: 760px;
}
.vs-page-body > * + * {
margin-top: 1em;
}
.vs-page-body h2,
.vs-page-body h3,
.vs-page-body h4,
.vs-page-body ul,
.vs-page-body ol,
.vs-page-body blockquote,
.vs-page-body .wp-block-image,
.vs-page-body .wp-block-gallery,
.vs-page-body .wp-block-columns,
.vs-page-body .wp-block-table,
.vs-page-body .page-links {
max-width: 860px;
}
.vs-page-body blockquote,
.vs-page-body h2,
.vs-page-body .wp-block-heading {
clear: both;
}
.vs-page-body > p:first-child {
font-size: 19px;
line-height: 1.82;
color: var(--text);
}
.vs-page-article h2 {
font-size: clamp(32px, 3vw, 42px);
line-height: 1.12;
letter-spacing: -0.02em;
}
.vs-page-article h3 {
font-size: clamp(22px, 2vw, 28px);
line-height: 1.18;
}
.vs-page-article p,
.vs-page-article li {
font-size: 18px;
line-height: 1.82;
}
.vs-page-article ul,
.vs-page-article ol {
padding-left: 1.4em;
}
.vs-page-article ul li::marker {
color: var(--pink);
}
.vs-page-article blockquote {
max-width: 820px;
padding: 30px 34px;
border-radius: 26px;
background: linear-gradient(135deg, rgba(242, 236, 252, 0.86), rgba(255, 255, 255, 0.98));
border: 1px solid rgba(139, 53, 214, 0.1);
box-shadow: 0 20px 46px rgba(30, 10, 46, 0.08);
}
.vs-page-article a:not(.btn-primary):not(.btn-outline):not(.btn-white):not(.btn-ghost) {
color: var(--purple);
text-decoration-color: rgba(139, 53, 214, 0.28);
text-underline-offset: 0.18em;
}
[data-theme="dark"] .vs-page-shell {
background: linear-gradient(180deg, rgba(24, 15, 38, 1) 0%, rgba(15, 10, 24, 1) 100%);
border-color: rgba(255, 255, 255, 0.06);
box-shadow: 0 28px 76px rgba(4, 3, 8, 0.22);
}
[data-theme="dark"] .vs-page-featured {
background: linear-gradient(135deg, rgba(30, 18, 46, 0.98), rgba(18, 10, 30, 0.94));
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 36px 84px rgba(4, 3, 8, 0.38);
}
[data-theme="dark"] .vs-page-featured::before {
background: linear-gradient(180deg, rgba(4, 3, 8, 0) 0%, rgba(4, 3, 8, 0.42) 100%);
}
[data-theme="dark"] .vs-page-intro-text,
[data-theme="dark"] .vs-page-body > p:first-child {
color: var(--text-light);
}
[data-theme="dark"] .vs-page-article blockquote {
background: linear-gradient(135deg, rgba(47, 24, 68, 0.7), rgba(22, 13, 34, 0.92));
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 20px 46px rgba(4, 3, 8, 0.22);
} body.vs-generic-page {
background: #f7f7fb;
}
body.vs-generic-page .site-main > .section {
background: transparent;
}
body.vs-generic-page .vs-page-shell {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
body.vs-page-about .page-hero--about {
min-height: auto;
padding: 132px 32px 58px;
background: #f7f5fb;
}
body.vs-page-about .page-hero--about .page-hero-content {
max-width: 920px;
margin: 0 auto;
}
body.vs-page-about .page-hero--about .hero-eyebrow {
margin: 0 auto 18px;
background: #f0ebfa;
border: 1px solid #ded4f2;
box-shadow: none;
color: #6b38b6;
}
body.vs-page-about .page-hero--about h1 {
max-width: none;
margin: 0 auto;
font-size: 72px;
line-height: 0.98;
letter-spacing: 0;
text-align: center;
color: #1e0a2e;
}
body.vs-page-about .page-hero--about p {
max-width: 680px;
margin: 22px auto 0;
font-size: 20px;
line-height: 1.72;
text-align: center;
color: #5a3a6e;
}
body.vs-page-about .vs-page-shell {
max-width: 1180px;
padding: 64px 80px 110px;
}
body.vs-page-about .vs-page-body {
max-width: 980px;
margin: 0 auto;
overflow: visible;
}
body.vs-page-about .vs-page-featured {
float: right;
width: 300px;
margin: 6px 0 42px 82px;
border-radius: 18px;
border: 1px solid #e2ddec;
background: #f2eef7;
box-shadow: 0 24px 54px rgba(30, 10, 46, 0.12);
}
body.vs-page-about .vs-page-featured::before {
display: none;
}
body.vs-page-about .vs-page-featured img {
aspect-ratio: 3 / 4;
object-position: center top;
}
body.vs-page-about .vs-page-body > p:first-child {
max-width: 680px;
margin-top: 0;
font-size: 20px;
line-height: 1.82;
color: #39204f;
}
body.vs-page-about .vs-page-article p,
body.vs-page-about .vs-page-article li {
font-size: 18px;
line-height: 1.84;
color: #5a3a6e;
}
body.vs-page-about .vs-page-article blockquote {
clear: both;
max-width: 860px;
margin-top: 42px;
padding: 32px 38px;
border: 1px solid #e1d7ef;
border-radius: 18px;
background: #f3eef8;
box-shadow: none;
color: #39204f;
}
body.vs-page-about .vs-page-article h2,
body.vs-page-about .vs-page-article h3 {
clear: both;
color: #1e0a2e;
}
body.vs-page-legal {
background: #f7f8fb;
}
body.vs-page-legal .page-hero--legal {
padding: 124px 32px 34px;
background: #f7f8fb;
border-bottom: 1px solid #e5e8ee;
}
body.vs-page-legal .page-hero--legal .page-hero-content {
max-width: 920px;
margin: 0 auto;
}
body.vs-page-legal .page-hero--legal h1 {
max-width: 760px;
margin: 0;
font-family: var(--vs-font-display);
font-size: 52px;
line-height: 1.05;
letter-spacing: 0;
text-align: left;
color: #1c1723;
}
body.vs-page-legal .vs-page-shell {
max-width: 920px;
padding: 48px 32px 108px;
}
body.vs-page-legal .vs-page-article,
body.vs-page-legal .vs-page-body {
max-width: none;
overflow: visible;
}
body.vs-page-legal .vs-page-body > * {
max-width: 760px;
}
body.vs-page-legal .vs-page-article h1 {
display: none;
}
body.vs-page-legal .vs-page-article h2,
body.vs-page-legal .vs-page-article h3 {
margin-top: 2em;
font-family: var(--vs-font-body);
font-size: 22px;
line-height: 1.3;
letter-spacing: 0;
color: #1c1723;
}
body.vs-page-legal .vs-page-article p,
body.vs-page-legal .vs-page-article li {
font-size: 17px;
line-height: 1.78;
color: #4d4658;
}
body.vs-page-legal .vs-page-article ul,
body.vs-page-legal .vs-page-article ol {
padding-left: 1.25em;
}
body.vs-page-legal .vs-page-article blockquote {
max-width: 760px;
padding: 22px 26px;
border: 1px solid #e4e0ea;
border-radius: 8px;
background: #fbfbfd;
box-shadow: none;
font-family: var(--vs-font-body);
font-style: normal;
font-size: 17px;
color: #39204f;
}
[data-theme="dark"] body.vs-page-about,
[data-theme="dark"] body.vs-page-legal {
background: #0d0816;
}
[data-theme="dark"] body.vs-page-about .page-hero--about,
[data-theme="dark"] body.vs-page-legal .page-hero--legal {
background: #120a1e;
}
[data-theme="dark"] body.vs-page-about .page-hero--about h1,
[data-theme="dark"] body.vs-page-legal .page-hero--legal h1,
[data-theme="dark"] body.vs-page-about .vs-page-article h2,
[data-theme="dark"] body.vs-page-about .vs-page-article h3,
[data-theme="dark"] body.vs-page-legal .vs-page-article h2,
[data-theme="dark"] body.vs-page-legal .vs-page-article h3 {
color: #f5edff;
}
[data-theme="dark"] body.vs-page-about .page-hero--about p,
[data-theme="dark"] body.vs-page-about .vs-page-article p,
[data-theme="dark"] body.vs-page-about .vs-page-article li,
[data-theme="dark"] body.vs-page-legal .vs-page-article p,
[data-theme="dark"] body.vs-page-legal .vs-page-article li {
color: #c8a8e8;
}
[data-theme="dark"] body.vs-page-about .vs-page-featured,
[data-theme="dark"] body.vs-page-about .vs-page-article blockquote,
[data-theme="dark"] body.vs-page-legal .vs-page-article blockquote {
background: #1a0e2a;
border-color: rgba(255, 255, 255, 0.1);
color: #f5edff;
} body.vs-page-plain,
body.vs-page-legal {
background:
radial-gradient(circle at 18% 10%, rgba(255, 217, 61, .1), transparent 28%),
radial-gradient(circle at 84% 8%, rgba(139, 53, 214, .1), transparent 30%),
#f7f8fb;
}
body.vs-page-plain .page-hero--plain,
body.vs-page-legal .page-hero--legal {
padding: 126px 24px 46px;
background: transparent;
border-bottom: 0;
}
body.vs-page-plain .page-hero--plain,
body.vs-page-plain .page-hero--plain .page-hero-content,
body.vs-page-plain .page-hero--plain .hero-eyebrow,
body.vs-page-plain .page-hero--plain h1,
body.vs-page-plain .page-hero--plain p,
body.vs-page-legal .page-hero--legal,
body.vs-page-legal .page-hero--legal .page-hero-content,
body.vs-page-legal .page-hero--legal .hero-eyebrow,
body.vs-page-legal .page-hero--legal h1,
body.vs-page-legal .page-hero--legal p {
text-align: center;
}
body.vs-page-plain .page-hero--plain .page-hero-content,
body.vs-page-legal .page-hero--legal .page-hero-content {
max-width: 940px;
margin: 0 auto;
}
body.vs-page-plain .page-hero--plain .hero-eyebrow,
body.vs-page-legal .page-hero--legal .hero-eyebrow {
margin: 0 auto 18px;
background: #f0ebfa;
border: 1px solid #ded4f2;
box-shadow: none;
color: #6b38b6;
}
body.vs-page-plain .page-hero--plain h1,
body.vs-page-legal .page-hero--legal h1 {
max-width: 860px;
margin: 0 auto;
font-family: var(--vs-font-display);
font-size: clamp(42px, 6vw, 70px);
line-height: .98;
letter-spacing: -.025em;
color: #1c1723;
text-wrap: balance;
}
body.vs-page-plain .page-hero--plain p,
body.vs-page-legal .page-hero--legal p {
max-width: 660px;
margin: 20px auto 0;
color: #5a3a6e;
font-size: 19px;
line-height: 1.7;
}
body.vs-page-plain .vs-page-shell,
body.vs-page-legal .vs-page-shell {
max-width: 1040px;
padding: 42px clamp(18px, 4vw, 52px) 112px;
}
body.vs-page-plain .vs-page-article,
body.vs-page-plain .vs-page-body,
body.vs-page-legal .vs-page-article,
body.vs-page-legal .vs-page-body {
max-width: none;
overflow: visible;
}
body.vs-page-plain .vs-page-copy,
body.vs-page-legal .vs-page-copy {
position: relative;
max-width: 780px;
margin: 0 auto;
padding: clamp(28px, 4vw, 46px);
border-radius: 30px;
background:
linear-gradient(180deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .66)),
radial-gradient(circle at 100% 0%, rgba(255, 228, 238, .54), transparent 34%);
border: 1px solid rgba(139, 53, 214, .1);
box-shadow: 0 22px 58px rgba(30, 10, 46, .07);
text-align: left;
}
body.vs-page-plain .vs-page-copy > *,
body.vs-page-legal .vs-page-copy > *,
body.vs-page-plain .vs-page-body > *,
body.vs-page-legal .vs-page-body > * {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
body.vs-page-plain .vs-page-featured {
float: none;
width: min(100%, 760px);
margin: 0 auto 34px;
border-radius: 24px;
}
body.vs-page-plain .vs-page-featured::before {
display: none;
}
body.vs-page-plain .vs-page-featured img {
aspect-ratio: 16 / 9;
}
body.vs-page-plain .vs-page-intro-text {
max-width: 100%;
margin: 0 0 26px;
padding: 0;
text-align: left;
}
body.vs-page-plain .vs-page-article h1,
body.vs-page-legal .vs-page-article h1 {
display: none;
}
body.vs-page-plain .vs-page-article h2,
body.vs-page-plain .vs-page-article h3,
body.vs-page-legal .vs-page-article h2,
body.vs-page-legal .vs-page-article h3 {
margin-top: 2.1em;
font-family: var(--vs-font-body);
font-weight: 800;
line-height: 1.25;
letter-spacing: -.01em;
color: #1c1723;
}
body.vs-page-plain .vs-page-article h2,
body.vs-page-legal .vs-page-article h2 {
font-size: clamp(24px, 2.4vw, 30px);
}
body.vs-page-plain .vs-page-article h3,
body.vs-page-legal .vs-page-article h3 {
font-size: 21px;
}
body.vs-page-plain .vs-page-article p,
body.vs-page-plain .vs-page-article li,
body.vs-page-legal .vs-page-article p,
body.vs-page-legal .vs-page-article li {
font-size: 17px;
line-height: 1.82;
color: #4d4658;
text-align: left;
}
body.vs-page-plain .vs-page-article ul,
body.vs-page-plain .vs-page-article ol,
body.vs-page-legal .vs-page-article ul,
body.vs-page-legal .vs-page-article ol {
padding-left: 1.25em;
}
body.vs-page-plain .vs-page-article blockquote,
body.vs-page-legal .vs-page-article blockquote {
max-width: 100%;
padding: 22px 26px;
border: 1px solid #e4e0ea;
border-radius: 18px;
background: #fbfbfd;
box-shadow: none;
font-family: var(--vs-font-body);
font-style: normal;
font-size: 17px;
color: #39204f;
}
[data-theme="dark"] body.vs-page-plain,
[data-theme="dark"] body.vs-page-legal {
background:
radial-gradient(circle at 18% 10%, rgba(255, 217, 61, .07), transparent 28%),
radial-gradient(circle at 84% 8%, rgba(192, 132, 252, .12), transparent 30%),
#0d0816;
}
[data-theme="dark"] body.vs-page-plain .page-hero--plain,
[data-theme="dark"] body.vs-page-legal .page-hero--legal {
background: transparent;
}
[data-theme="dark"] body.vs-page-plain .page-hero--plain .hero-eyebrow,
[data-theme="dark"] body.vs-page-legal .page-hero--legal .hero-eyebrow {
background: rgba(192, 132, 252, .12);
border-color: rgba(255, 255, 255, .1);
color: #f5edff;
}
[data-theme="dark"] body.vs-page-plain .page-hero--plain h1,
[data-theme="dark"] body.vs-page-legal .page-hero--legal h1,
[data-theme="dark"] body.vs-page-plain .vs-page-article h2,
[data-theme="dark"] body.vs-page-plain .vs-page-article h3,
[data-theme="dark"] body.vs-page-legal .vs-page-article h2,
[data-theme="dark"] body.vs-page-legal .vs-page-article h3 {
color: #f5edff;
}
[data-theme="dark"] body.vs-page-plain .page-hero--plain p,
[data-theme="dark"] body.vs-page-plain .vs-page-article p,
[data-theme="dark"] body.vs-page-plain .vs-page-article li,
[data-theme="dark"] body.vs-page-legal .page-hero--legal p,
[data-theme="dark"] body.vs-page-legal .vs-page-article p,
[data-theme="dark"] body.vs-page-legal .vs-page-article li {
color: #c8a8e8;
}
[data-theme="dark"] body.vs-page-plain .vs-page-copy,
[data-theme="dark"] body.vs-page-legal .vs-page-copy {
background:
linear-gradient(180deg, rgba(26, 14, 42, .9), rgba(18, 10, 30, .84)),
radial-gradient(circle at 100% 0%, rgba(192, 132, 252, .12), transparent 34%);
border-color: rgba(255, 255, 255, .09);
box-shadow: 0 24px 62px rgba(4, 3, 8, .32);
}
[data-theme="dark"] body.vs-page-plain .vs-page-article blockquote,
[data-theme="dark"] body.vs-page-legal .vs-page-article blockquote {
background: #1a0e2a;
border-color: rgba(255, 255, 255, .1);
color: #f5edff;
}
@media (max-width: 720px) {
body.vs-page-plain .page-hero--plain,
body.vs-page-legal .page-hero--legal {
padding: 112px 18px 34px;
}
body.vs-page-plain .page-hero--plain h1,
body.vs-page-legal .page-hero--legal h1 {
font-size: clamp(36px, 11vw, 52px);
}
body.vs-page-plain .vs-page-shell,
body.vs-page-legal .vs-page-shell {
padding: 28px 14px 78px;
}
body.vs-page-plain .vs-page-copy,
body.vs-page-legal .vs-page-copy {
padding: 24px 18px;
border-radius: 24px;
}
} body.vs-page-about .page-hero--about {
padding-bottom: 72px;
background: linear-gradient(180deg, #f8f6fb 0%, #f1edf7 100%);
}
body.vs-page-about .page-hero--about h1 {
font-size: 76px;
line-height: 1;
letter-spacing: 0;
}
body.vs-page-about .vs-page-shell {
max-width: 1240px;
padding-top: 76px;
}
body.vs-page-about .vs-about-layout {
display: grid;
grid-template-columns: minmax(0, 680px) minmax(280px, 360px);
gap: 88px;
align-items: start;
max-width: 1130px;
margin: 0 auto;
overflow: visible;
}
body.vs-page-about .vs-about-layout > * {
max-width: none;
}
body.vs-page-about .vs-page-copy {
grid-column: 1;
grid-row: 1;
max-width: 680px;
align-self: start;
padding-top: 0;
}
body.vs-page-about .vs-about-media {
grid-column: 2;
grid-row: 1;
position: sticky;
top: 128px;
align-self: start;
}
body.vs-page-about .vs-about-portrait {
margin: 0;
border-radius: 14px;
overflow: hidden;
background: #eee8f5;
border: 1px solid #ded7e8;
box-shadow: 0 24px 54px rgba(30, 10, 46, 0.12);
}
body.vs-page-about .vs-about-portrait img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center top;
}
body.vs-page-about .vs-about-caption {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid #ded7e8;
color: #5a3a6e;
}
body.vs-page-about .vs-about-caption strong,
body.vs-page-about .vs-about-caption span {
display: block;
}
body.vs-page-about .vs-about-caption strong {
font-family: var(--vs-font-display);
font-size: 24px;
line-height: 1.15;
color: #1e0a2e;
}
body.vs-page-about .vs-about-caption span {
margin-top: 4px;
font-size: 14px;
letter-spacing: .04em;
text-transform: uppercase;
}
body.vs-page-about .vs-page-copy > * {
max-width: none;
}
body.vs-page-about .vs-page-copy > :first-child {
margin-top: 0;
}
body.vs-page-about .vs-page-copy > h1:first-child,
body.vs-page-about .vs-page-copy > h2:first-child,
body.vs-page-about .vs-page-copy > h3:first-child,
body.vs-page-about .vs-page-copy > p:first-child,
body.vs-page-about .vs-page-copy > blockquote:first-child {
margin-top: 0;
}
body.vs-page-about .vs-page-copy > * + * {
margin-top: 1.12em;
}
body.vs-page-about .vs-page-copy > p:first-child {
margin-top: 0;
font-size: 21px;
line-height: 1.78;
color: #39204f;
}
body.vs-page-about .vs-page-copy blockquote {
max-width: none;
margin: 42px 0;
border-radius: 14px;
}
body.vs-page-about .vs-page-copy h2,
body.vs-page-about .vs-page-copy h3 {
clear: none;
margin-top: 2.2em;
letter-spacing: 0;
}
[data-theme="dark"] body.vs-page-about .page-hero--about {
background: linear-gradient(180deg, #120a1e 0%, #0d0816 100%);
}
[data-theme="dark"] body.vs-page-about .vs-about-portrait {
background: #1a0e2a;
border-color: rgba(255, 255, 255, .1);
box-shadow: 0 24px 54px rgba(4, 3, 8, .34);
}
[data-theme="dark"] body.vs-page-about .vs-about-caption {
border-color: rgba(255, 255, 255, .1);
color: #c8a8e8;
}
[data-theme="dark"] body.vs-page-about .vs-about-caption strong {
color: #f5edff;
} .site-footer .footer-brand img {
height: 72px;
width: auto;
max-width: 360px;
filter: brightness(0) invert(1);
opacity: 1;
}
.site-footer .footer-brand p {
color: rgba(255, 255, 255, .82);
font-size: 15px;
line-height: 1.75;
max-width: 360px;
}
.site-footer h5 {
color: rgba(255, 255, 255, .94);
}
.site-footer ul a,
.site-footer .footer-contact p {
color: rgba(255, 255, 255, .76);
}
.site-footer .footer-contact a {
color: rgba(255, 255, 255, .96);
}
.site-footer .footer-bottom {
color: rgba(255, 255, 255, .62);
}
.hero.vs-hero .vs-media-card--book {
width: min(100%, 300px);
min-height: 0;
height: auto;
aspect-ratio: 3 / 4.35;
}
.hero.vs-hero .vs-media-card-book-image {
position: relative;
inset: auto;
display: block;
width: 100%;
height: 100%;
aspect-ratio: 3 / 4.35;
object-fit: contain;
object-position: center;
background: transparent;
border-radius: inherit;
}
.hero.vs-hero .vs-media-card--book::before {
pointer-events: none;
}
.hero.vs-hero .vs-media-card-book-copy,
.hero.vs-hero .vs-media-card--book .vs-media-card-overlay {
display: none;
}
[data-theme="light"] .site-footer ul a,
[data-theme="dark"] .site-footer ul a,
.site-footer .footer-menu a,
.site-footer .footer-credit-link {
color: rgba(255, 255, 255, .78);
}
[data-theme="light"] .site-footer ul a:hover,
[data-theme="dark"] .site-footer ul a:hover,
.site-footer .footer-menu a:hover,
.site-footer .footer-credit-link:hover {
color: rgba(255, 255, 255, .98);
}
[data-theme="light"] .footer-contact a,
[data-theme="dark"] .footer-contact a,
.site-footer .footer-contact a {
color: rgba(255, 255, 255, .96);
}
body.vs-generic-page .vs-page-article,
body.vs-generic-page .vs-page-article.reveal,
body.vs-generic-page .vs-page-article.vs-reveal {
opacity: 1;
transform: none;
} .hero.vs-hero .vs-slide::before,
.hero.vs-hero .vs-slide[data-slide="0"]::before,
.hero.vs-hero .vs-slide[data-slide="1"]::before,
.hero.vs-hero .vs-slide[data-slide="2"]::before {
content: none !important;
display: none !important;
background: none !important;
opacity: 0 !important;
}
.hero.vs-hero .vs-media-card--founder {
width: min(100%, 390px);
min-height: 520px;
padding: 18px 18px 0;
border-radius: 30px;
overflow: hidden;
background:
linear-gradient(145deg, rgba(255, 255, 255, .82) 0%, rgba(244, 238, 251, .98) 48%, rgba(231, 220, 244, .96) 100%),
radial-gradient(circle at 18% 14%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 34%);
border: 1px solid rgba(139, 53, 214, .14);
box-shadow:
0 34px 78px rgba(30, 10, 46, .18),
inset 0 1px 0 rgba(255, 255, 255, .76);
}
.hero.vs-hero .vs-media-card--founder::before {
inset: auto 10% 0 10%;
height: 24%;
background: radial-gradient(ellipse at center, rgba(30, 10, 46, .22), rgba(30, 10, 46, 0) 68%);
filter: blur(18px);
}
.hero.vs-hero .vs-media-card--founder::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 34%;
background:
linear-gradient(180deg, rgba(248, 245, 251, 0), rgba(248, 245, 251, .92)),
linear-gradient(90deg, rgba(139, 53, 214, .1), rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .26));
pointer-events: none;
z-index: 1;
}
.hero.vs-hero .vs-media-card--founder .vs-s1-img {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
border-radius: 24px 24px 0 0;
box-shadow: none;
filter: drop-shadow(0 22px 28px rgba(30, 10, 46, .16));
object-fit: contain;
object-position: center bottom;
transform: translateZ(0);
}
.hero.vs-hero .vs-media-card--founder .vs-media-card-overlay {
z-index: 4;
}
[data-theme="dark"] .hero.vs-hero .vs-media-card--founder {
background: linear-gradient(180deg, #20152f 0%, #140c20 100%);
border-color: rgba(255, 255, 255, .1);
box-shadow: 0 34px 78px rgba(4, 3, 8, .46);
}
[data-theme="dark"] .hero.vs-hero .vs-media-card--founder::after {
background: linear-gradient(180deg, rgba(20, 12, 32, 0), rgba(20, 12, 32, .92));
}
.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-visual {
display: flex;
justify-content: center;
align-items: center;
perspective: 1600px;
}
.hero.vs-hero .vs-media-card--book {
position: relative;
width: min(100%, 315px);
height: auto;
min-height: 0;
aspect-ratio: auto;
border-radius: 10px 22px 22px 10px;
background: #f7f4fb;
border: 0;
box-shadow:
0 40px 80px rgba(30, 10, 46, .22),
18px 12px 0 rgba(220, 210, 232, .9),
23px 16px 0 rgba(30, 10, 46, .08);
transform: perspective(1600px) rotateY(-16deg) rotateX(1deg);
transform-origin: left center;
transform-style: preserve-3d;
animation: none;
transition: none;
will-change: auto;
}
.hero.vs-hero .vs-media-card--book::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(90deg, rgba(30, 10, 46, .32) 0%, rgba(30, 10, 46, .12) 7%, rgba(255, 255, 255, 0) 20%),
linear-gradient(105deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 32%),
linear-gradient(270deg, rgba(30, 10, 46, .12), rgba(30, 10, 46, 0) 13%);
z-index: 2;
pointer-events: none;
}
.hero.vs-hero .vs-media-card--book::after {
content: '';
position: absolute;
top: 7px;
bottom: 7px;
left: -16px;
width: 18px;
border-radius: 8px 0 0 8px;
background:
linear-gradient(90deg, #5f278d 0%, #8c46bf 38%, #caa6e8 72%, #f8f1ff 100%),
repeating-linear-gradient(180deg, rgba(255,255,255,.28) 0 1px, rgba(255,255,255,0) 1px 6px);
box-shadow:
inset -2px 0 3px rgba(30, 10, 46, .28),
-6px 8px 18px rgba(30, 10, 46, .16);
transform: translateZ(-8px);
}
.hero.vs-hero .vs-media-card-book-image {
position: relative;
display: block;
width: 100%;
height: auto;
max-width: 100%;
aspect-ratio: auto;
object-fit: contain;
object-position: center;
border-radius: inherit;
background: transparent;
filter: none;
z-index: 1;
backface-visibility: hidden;
transform: translateZ(.1px);
}
.hero.vs-hero .vs-media-card--book .vs-s2-cover-badge,
.hero.vs-hero .vs-media-card--book .vs-media-card-book-copy,
.hero.vs-hero .vs-media-card--book .vs-media-card-overlay {
display: none;
}
.hero.vs-hero .vs-slide[data-slide="2"] .vs-media-card[data-anim],
.hero.vs-hero .vs-slide[data-slide="2"] .vs-media-card-book-image {
animation: none;
transition: none;
transform-origin: left center;
}
[data-theme="dark"] .hero.vs-hero .vs-media-card--book {
background: #1a0e2a;
box-shadow:
0 44px 84px rgba(4, 3, 8, .52),
18px 12px 0 rgba(54, 40, 68, .85),
23px 16px 0 rgba(4, 3, 8, .38);
} .hero.vs-hero .vs-slide::before,
.hero.vs-hero .vs-slide[data-slide="0"]::before,
.hero.vs-hero .vs-slide[data-slide="1"]::before,
.hero.vs-hero .vs-slide[data-slide="2"]::before {
content: none !important;
display: none !important;
background: none !important;
opacity: 0 !important;
}
.hero.vs-hero .vs-slide-visual [data-anim],
.hero.vs-hero .vs-media-card,
.hero.vs-hero .vs-media-card--photo,
.hero.vs-hero .vs-media-card--founder,
.hero.vs-hero .vs-media-card--book,
.hero.vs-hero .vs-media-card--fallback {
animation: none !important;
transition: none !important;
transform: none !important;
filter: none !important;
will-change: auto !important;
}
.hero.vs-hero .vs-media-card,
.hero.vs-hero .vs-media-card--photo,
.hero.vs-hero .vs-media-card--founder,
.hero.vs-hero .vs-media-card--book {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
padding: 0 !important;
}
.hero.vs-hero .vs-media-card::before,
.hero.vs-hero .vs-media-card::after,
.hero.vs-hero .vs-media-card--photo::before,
.hero.vs-hero .vs-media-card--photo::after,
.hero.vs-hero .vs-media-card--founder::before,
.hero.vs-hero .vs-media-card--founder::after,
.hero.vs-hero .vs-media-card--book::before,
.hero.vs-hero .vs-media-card--book::after {
content: none !important;
display: none !important;
background: none !important;
box-shadow: none !important;
filter: none !important;
}
.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-s1-img,
.hero.vs-hero .vs-media-card-book-image {
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
animation: none !important;
transition: none !important;
backface-visibility: visible !important;
}
.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-s1-img {
border-radius: 24px !important;
}
.hero.vs-hero .vs-media-card-book-image {
border-radius: 0 !important;
}
.hero.vs-hero .vs-media-card-overlay,
.hero.vs-hero .vs-s2-cover-badge,
.hero.vs-hero .vs-media-card-book-copy {
display: none !important;
} .game-bg .section-header {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.game-bg .section-tag,
.game-bg .section-title,
.game-bg .section-sub {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.game-bg .section-sub {
max-width: 680px;
} body.vs-page-contact {
background:
radial-gradient(circle at 14% 18%, rgba(255, 217, 61, .12), transparent 28%),
radial-gradient(circle at 86% 16%, rgba(139, 53, 214, .12), transparent 30%),
#f7f7fb;
}
body.vs-page-contact .page-hero--contact {
min-height: auto;
padding: 126px 32px 54px;
background:
linear-gradient(180deg, rgba(247, 245, 251, .98) 0%, rgba(247, 247, 251, .96) 100%);
}
body.vs-page-contact .page-hero--contact,
body.vs-page-contact .page-hero--contact .page-hero-content,
body.vs-page-contact .page-hero--contact .hero-eyebrow,
body.vs-page-contact .page-hero--contact h1,
body.vs-page-contact .page-hero--contact p {
text-align: center;
}
body.vs-page-contact .page-hero--contact .page-hero-content {
max-width: 960px;
margin: 0 auto;
}
body.vs-page-contact .page-hero--contact .hero-eyebrow {
margin: 0 auto 18px;
background: #f0ebfa;
border: 1px solid #ded4f2;
box-shadow: none;
color: #6b38b6;
}
body.vs-page-contact .page-hero--contact h1 {
max-width: none;
margin: 0 auto;
color: #1e0a2e;
font-size: clamp(44px, 6.4vw, 78px);
line-height: .96;
letter-spacing: -.035em;
}
body.vs-page-contact .page-hero--contact p {
max-width: 700px;
margin: 22px auto 0;
color: #5a3a6e;
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.7;
}
body.vs-page-contact .vs-page-shell {
max-width: 1260px;
padding: 56px 72px 110px;
}
body.vs-page-contact .vs-page-body {
max-width: none;
overflow: visible;
}
body.vs-page-contact .vs-page-body > .vs-page-copy,
body.vs-page-contact .vs-page-copy > * {
max-width: none;
}
body.vs-page-contact .vs-page-intro-text,
body.vs-page-contact .vs-page-copy > p:not(.vs-contact-hp) {
max-width: 760px;
margin-inline: auto;
text-align: center;
}
.vs-contact-hub {
position: relative;
display: grid;
grid-template-columns: minmax(0, .86fr) minmax(420px, 1.14fr);
gap: clamp(24px, 4vw, 56px);
margin: clamp(34px, 5vw, 62px) auto 0;
padding: clamp(24px, 4vw, 46px);
border-radius: 42px;
background:
radial-gradient(circle at 0% 0%, rgba(255, 217, 61, .2), transparent 30%),
radial-gradient(circle at 100% 4%, rgba(232, 53, 138, .13), transparent 36%),
linear-gradient(145deg, rgba(255, 252, 249, .98), rgba(248, 245, 253, .96));
border: 1px solid rgba(139, 53, 214, .12);
box-shadow: 0 30px 86px rgba(30, 10, 46, .1);
}
.vs-contact-hub::before {
content: '';
position: absolute;
inset: 18px;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, .74);
pointer-events: none;
}
.vs-contact-intro,
.vs-contact-form-card {
position: relative;
z-index: 1;
}
.vs-contact-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(139, 53, 214, .1);
color: var(--purple);
font-family: var(--font-accent);
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.vs-contact-intro h2 {
max-width: 11ch;
margin: 0;
color: var(--heading);
font-size: clamp(38px, 4.6vw, 64px);
line-height: .98;
letter-spacing: -.035em;
}
.vs-contact-intro p {
max-width: 36rem;
margin: 22px 0 0;
color: var(--text2);
font-size: 18px;
line-height: 1.78;
}
.vs-contact-methods {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 30px;
}
.vs-contact-method {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 10px 12px;
min-height: 118px;
padding: 18px;
border-radius: 24px;
background: rgba(255, 255, 255, .78);
border: 1px solid rgba(139, 53, 214, .11);
color: var(--heading);
text-decoration: none;
box-shadow: 0 14px 34px rgba(30, 10, 46, .06);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vs-contact-method:hover {
transform: translateY(-2px);
border-color: rgba(139, 53, 214, .26);
box-shadow: 0 20px 44px rgba(30, 10, 46, .1);
}
.vs-contact-method span[aria-hidden="true"] {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 15px;
background: rgba(255, 228, 238, .86);
color: var(--pink);
font-size: 18px;
font-style: normal;
}
.vs-contact-method--primary span[aria-hidden="true"] {
background: rgba(139, 53, 214, .1);
color: var(--purple);
}
.vs-contact-method strong,
.vs-contact-method em {
grid-column: 2;
display: block;
min-width: 0;
}
.vs-contact-method strong {
font-family: var(--font-accent);
font-size: 15px;
font-weight: 800;
}
.vs-contact-method em {
margin-top: 5px;
color: var(--text2);
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 1.45;
overflow-wrap: anywhere;
}
.vs-contact-signature {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-top: 28px;
color: rgba(90, 58, 110, .78);
font-size: 14px;
font-weight: 700;
}
.vs-contact-signature strong {
color: var(--heading);
}
.vs-contact-form-card {
padding: clamp(20px, 3vw, 32px);
border-radius: 32px;
background: rgba(255, 255, 255, .9);
border: 1px solid rgba(139, 53, 214, .12);
box-shadow: 0 24px 60px rgba(30, 10, 46, .11);
}
.vs-contact-form {
display: grid;
gap: 18px;
margin: 0;
}
.vs-contact-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.vs-form-field {
display: grid;
gap: 8px;
margin: 0;
}
.vs-form-field span,
.vs-contact-privacy {
color: var(--heading);
font-size: 13px;
font-weight: 800;
letter-spacing: .04em;
}
.vs-form-field input,
.vs-form-field select,
.vs-form-field textarea {
width: 100%;
min-height: 54px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(139, 53, 214, .16);
background: rgba(253, 248, 245, .72);
color: var(--heading);
font: 600 16px/1.45 var(--font-body);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.vs-form-field textarea {
min-height: 178px;
resize: vertical;
}
.vs-form-field input:focus,
.vs-form-field select:focus,
.vs-form-field textarea:focus {
outline: none;
background: rgba(255, 255, 255, .95);
border-color: rgba(139, 53, 214, .52);
box-shadow: 0 0 0 4px rgba(139, 53, 214, .1);
}
.vs-contact-privacy {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 11px;
margin: 2px 0 0;
color: rgba(90, 58, 110, .86);
font-weight: 700;
letter-spacing: 0;
line-height: 1.5;
}
.vs-contact-privacy input {
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--purple);
}
.vs-contact-privacy a {
color: var(--purple);
font-weight: 800;
text-decoration-color: rgba(139, 53, 214, .25);
text-underline-offset: .18em;
}
.vs-contact-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
width: fit-content;
min-height: 56px;
margin-top: 2px;
padding: 0 24px;
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, var(--orange), var(--pink) 55%, var(--purple));
color: var(--text-light);
font-family: var(--font-accent);
font-size: 16px;
font-weight: 900;
cursor: pointer;
box-shadow: 0 16px 34px rgba(232, 53, 138, .26);
transition: transform .18s ease, box-shadow .18s ease;
}
.vs-contact-submit:hover {
transform: translateY(-2px);
box-shadow: 0 22px 46px rgba(232, 53, 138, .34);
}
.vs-contact-submit i {
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(255, 255, 255, .2);
font-style: normal;
}
.vs-contact-notice {
margin: 0 0 18px;
padding: 16px 18px;
border-radius: 20px;
border: 1px solid rgba(139, 53, 214, .13);
background: rgba(247, 245, 251, .86);
color: var(--heading);
}
.vs-contact-notice strong,
.vs-contact-notice span {
display: block;
}
.vs-contact-notice strong {
font-family: var(--font-accent);
font-size: 17px;
font-weight: 900;
}
.vs-contact-notice span,
.vs-contact-notice li {
margin-top: 4px;
color: var(--text2);
font-size: 14px;
line-height: 1.5;
}
.vs-contact-notice ul {
margin: 8px 0 0;
padding-left: 1.2em;
}
.vs-contact-notice--success {
background: rgba(52, 217, 181, .13);
border-color: rgba(52, 217, 181, .26);
}
.vs-contact-notice--error {
background: rgba(255, 228, 238, .74);
border-color: rgba(232, 53, 138, .24);
}
.vs-contact-hp {
position: absolute;
left: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
[data-theme="dark"] body.vs-page-contact {
background:
radial-gradient(circle at 14% 18%, rgba(255, 217, 61, .08), transparent 30%),
radial-gradient(circle at 86% 16%, rgba(192, 132, 252, .14), transparent 32%),
#120a1e;
}
[data-theme="dark"] body.vs-page-contact .page-hero--contact {
background: linear-gradient(180deg, rgba(20, 12, 31, .98) 0%, rgba(18, 10, 30, .98) 100%);
}
[data-theme="dark"] body.vs-page-contact .page-hero--contact h1,
[data-theme="dark"] .vs-contact-intro h2,
[data-theme="dark"] .vs-contact-method,
[data-theme="dark"] .vs-contact-method strong,
[data-theme="dark"] .vs-form-field span,
[data-theme="dark"] .vs-contact-notice,
[data-theme="dark"] .vs-contact-signature strong {
color: var(--text-light);
}
[data-theme="dark"] body.vs-page-contact .page-hero--contact p,
[data-theme="dark"] .vs-contact-intro p,
[data-theme="dark"] .vs-contact-method em,
[data-theme="dark"] .vs-contact-privacy,
[data-theme="dark"] .vs-contact-notice span,
[data-theme="dark"] .vs-contact-notice li,
[data-theme="dark"] .vs-contact-signature {
color: rgba(245, 237, 255, .72);
}
[data-theme="dark"] .vs-contact-hub {
background:
radial-gradient(circle at 0% 0%, rgba(255, 217, 61, .09), transparent 30%),
radial-gradient(circle at 100% 4%, rgba(192, 132, 252, .13), transparent 36%),
linear-gradient(145deg, rgba(26, 14, 42, .96), rgba(18, 10, 30, .92));
border-color: rgba(255, 255, 255, .1);
box-shadow: 0 30px 84px rgba(4, 3, 8, .42);
}
[data-theme="dark"] .vs-contact-hub::before {
border-color: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .vs-contact-method,
[data-theme="dark"] .vs-contact-form-card,
[data-theme="dark"] .vs-contact-notice {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .1);
box-shadow: 0 20px 52px rgba(4, 3, 8, .28);
}
[data-theme="dark"] .vs-form-field input,
[data-theme="dark"] .vs-form-field select,
[data-theme="dark"] .vs-form-field textarea {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .12);
color: var(--text-light);
box-shadow: none;
}
[data-theme="dark"] .vs-form-field input:focus,
[data-theme="dark"] .vs-form-field select:focus,
[data-theme="dark"] .vs-form-field textarea:focus {
background: rgba(255, 255, 255, .09);
border-color: rgba(192, 132, 252, .5);
box-shadow: 0 0 0 4px rgba(192, 132, 252, .12);
}
@media (max-width: 980px) {
body.vs-page-contact .vs-page-shell {
padding: 44px 22px 82px;
}
.vs-contact-hub {
grid-template-columns: 1fr;
border-radius: 32px;
}
.vs-contact-intro h2 {
max-width: 14ch;
}
}
@media (max-width: 680px) {
body.vs-page-contact .page-hero--contact {
padding: 112px 20px 42px;
}
body.vs-page-contact .page-hero--contact h1 {
font-size: clamp(38px, 12vw, 54px);
}
body.vs-page-contact .vs-page-shell {
padding: 34px 14px 70px;
}
.vs-contact-hub {
margin-top: 28px;
padding: 18px;
border-radius: 28px;
}
.vs-contact-hub::before {
inset: 10px;
border-radius: 22px;
}
.vs-contact-intro h2 {
max-width: none;
font-size: clamp(34px, 11vw, 46px);
}
.vs-contact-intro p {
font-size: 16px;
line-height: 1.7;
}
.vs-contact-methods,
.vs-contact-form-grid {
grid-template-columns: 1fr;
}
.vs-contact-method {
min-height: 0;
padding: 16px;
}
.vs-contact-form-card {
padding: 16px;
border-radius: 24px;
}
.vs-contact-submit {
width: 100%;
}
body.vs-page-contact .vs-page-intro-text,
body.vs-page-contact .vs-page-copy > p:not(.vs-contact-hp) {
text-align: left;
}
} .vs-about-legal {
position: relative;
margin-top: clamp(48px, 7vw, 86px);
padding: clamp(28px, 4vw, 44px);
border-radius: 34px;
background:
radial-gradient(circle at 8% 0%, rgba(255, 217, 61, .18), transparent 34%),
radial-gradient(circle at 96% 10%, rgba(139, 53, 214, .14), transparent 32%),
linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(255, 244, 248, .9));
border: 1px solid rgba(139, 53, 214, .14);
box-shadow: 0 28px 70px rgba(30, 10, 46, .11);
overflow: hidden;
}
.vs-about-legal::before {
content: '';
position: absolute;
inset: 16px;
border-radius: 26px;
border: 1px solid rgba(255, 255, 255, .76);
pointer-events: none;
}
.vs-about-legal-head {
position: relative;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 28px;
}
.vs-about-legal-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(139, 53, 214, .1);
color: var(--purple);
font-family: var(--font-accent);
font-size: 13px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.vs-about-legal h2 {
margin: 0;
max-width: 12ch;
color: var(--heading);
font-size: clamp(34px, 4vw, 56px);
line-height: .96;
letter-spacing: -.03em;
}
.vs-about-legal-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 10px;
}
.vs-about-legal-actions a,
.vs-copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 10px 15px;
border-radius: 999px;
border: 1px solid rgba(139, 53, 214, .18);
background: rgba(255, 255, 255, .78);
color: var(--purple);
font-family: var(--font-accent);
font-size: 13px;
font-weight: 800;
text-decoration: none;
cursor: pointer;
transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.vs-copy-btn {
width: 28px;
height: 28px;
min-height: 28px;
padding: 0;
border-color: transparent;
background: transparent;
color: rgba(90, 58, 110, .42);
font-family: var(--font-body);
font-size: 14px;
font-weight: 700;
opacity: .72;
}
.vs-about-legal-actions a:hover,
.vs-copy-btn:hover {
transform: translateY(-1px);
background: var(--purple);
border-color: var(--purple);
color: #fff;
opacity: 1;
}
.vs-copy-btn.is-copied {
transform: none;
background: rgba(52, 217, 181, .14);
border-color: rgba(52, 217, 181, .2);
color: #0c7f6a;
opacity: 1;
}
.vs-about-legal-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.vs-about-legal-card {
border-radius: 24px;
background: rgba(255, 255, 255, .78);
border: 1px solid rgba(139, 53, 214, .12);
box-shadow: 0 14px 34px rgba(30, 10, 46, .07);
overflow: hidden;
}
.vs-about-legal-card summary {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 20px;
color: var(--heading);
font-family: var(--font-accent);
font-size: 18px;
font-weight: 800;
cursor: pointer;
list-style: none;
}
.vs-about-legal-card summary::-webkit-details-marker {
display: none;
}
.vs-about-legal-card summary::after {
content: '+';
margin-left: auto;
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(232, 53, 138, .1);
color: var(--pink);
font-size: 20px;
line-height: 1;
}
.vs-about-legal-card[open] summary::after {
content: '−';
}
.vs-about-legal-icon {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 14px;
background: rgba(255, 228, 238, .8);
}
.vs-about-legal-list {
display: grid;
gap: 10px;
padding: 0 16px 18px;
}
.vs-about-legal-row {
display: grid;
grid-template-columns: minmax(118px, .72fr) minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 13px 14px;
border-radius: 18px;
background: rgba(253, 248, 245, .72);
border: 1px solid rgba(30, 10, 46, .06);
}
.vs-about-legal-label {
color: rgba(90, 58, 110, .78);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.vs-about-legal-value {
min-width: 0;
color: var(--heading);
font-size: 15px;
font-weight: 700;
line-height: 1.45;
overflow-wrap: anywhere;
}
.vs-about-legal-value a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid rgba(139, 53, 214, .24);
}
[data-theme="dark"] .vs-about-legal {
background:
radial-gradient(circle at 8% 0%, rgba(255, 217, 61, .1), transparent 34%),
radial-gradient(circle at 96% 10%, rgba(192, 132, 252, .16), transparent 32%),
linear-gradient(145deg, rgba(26, 14, 42, .96), rgba(18, 10, 30, .92));
border-color: rgba(255, 255, 255, .1);
box-shadow: 0 30px 76px rgba(4, 3, 8, .44);
}
[data-theme="dark"] .vs-about-legal-card,
[data-theme="dark"] .vs-about-legal-actions a,
[data-theme="dark"] .vs-copy-btn {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .1);
}
[data-theme="dark"] .vs-about-legal-row {
background: rgba(255, 255, 255, .05);
border-color: rgba(255, 255, 255, .08);
}
[data-theme="dark"] .vs-about-legal-label {
color: rgba(245, 237, 255, .62);
}
.vs-about-legal-image {
position: relative;
z-index: 1;
margin: clamp(22px, 3vw, 34px) 0 0;
border-radius: 28px;
overflow: hidden;
background: rgba(255, 255, 255, .54);
border: 1px solid rgba(139, 53, 214, .12);
box-shadow: 0 20px 52px rgba(30, 10, 46, .1);
}
.vs-about-legal-img {
display: block;
width: 100%;
height: auto;
max-height: 520px;
aspect-ratio: 16 / 7;
object-fit: cover;
object-position: center;
}
[data-theme="dark"] .vs-about-legal-image {
background: rgba(255, 255, 255, .05);
border-color: rgba(255, 255, 255, .1);
box-shadow: 0 22px 58px rgba(4, 3, 8, .36);
} .hero.vs-hero .vs-media-card,
.hero.vs-hero .vs-media-card--photo,
.hero.vs-hero .vs-media-card--founder,
.hero.vs-hero .vs-media-card--book {
width: min(100%, 480px) !important;
min-height: 0 !important;
height: auto !important;
aspect-ratio: auto !important;
margin-inline: auto !important;
justify-self: center !important;
align-self: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
padding: 0 !important;
transform: none !important;
}
.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-s1-img,
.hero.vs-hero .vs-media-card-book-image {
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 903 / 1024 !important; object-fit: cover !important;
object-position: center !important;
border-radius: 6px !important; background: #fff !important;
box-shadow:
0 1px 2px rgba(30, 10, 46, .14),
0 8px 16px rgba(30, 10, 46, .12),
0 22px 40px rgba(30, 10, 46, .14),
0 40px 72px -6px rgba(139, 53, 214, .22) !important;
transform: none !important;
filter: none !important;
transition: transform .4s var(--ease), box-shadow .4s var(--ease) !important;
}
[data-theme="dark"] .hero.vs-hero .vs-s0-img,
[data-theme="dark"] .hero.vs-hero .vs-s1-img,
[data-theme="dark"] .hero.vs-hero .vs-media-card-book-image {
background: #1a0e2a !important;
box-shadow:
0 1px 2px rgba(4, 3, 8, .4),
0 10px 22px rgba(4, 3, 8, .34),
0 26px 48px rgba(4, 3, 8, .36),
0 46px 80px -6px rgba(139, 53, 214, .30) !important;
} .vs-cpt-archive { position: relative; z-index: 2; } .vs-cpt-archive .vs-arch-head {
padding: var(--vs-nav-clear) 28px 8px;
}
.vs-cpt-archive .vs-arch-head-inner {
max-width: 760px; margin: 0 auto; text-align: center;
}
.vs-cpt-archive .vs-arch-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 13px; letter-spacing: .04em;
color: var(--pink);
background: var(--rose);
border-radius: 50px; padding: 7px 16px; margin-bottom: 16px;
}
[data-theme="dark"] .vs-cpt-archive .vs-arch-eyebrow { background: rgba(232, 53, 138, .12); }
.vs-cpt-archive .vs-arch-title {
font-family: var(--vs-font-display); font-weight: 900;
font-size: clamp(34px, 4.4vw, 56px); line-height: 1.08;
letter-spacing: -.02em; color: var(--heading); margin: 0;
}
.vs-cpt-archive .vs-arch-sub {
margin: 16px auto 0; max-width: 620px;
font-size: 17px; line-height: 1.65; color: var(--text2);
} .vs-cpt-archive .vs-arch-body {
max-width: 1440px; margin: 0 auto; padding: 0 28px 56px;
} .vs-arch-filter {
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: center; margin: 28px 0 36px;
}
.vs-arch-chip {
--tint: 232, 53, 138;
cursor: pointer;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 14px; line-height: 1;
padding: 11px 20px; border-radius: 50px;
background: var(--card-bg);
color: var(--text2);
border: 1.5px solid var(--border);
transition: background .2s var(--ease), color .2s, border-color .2s, transform .2s var(--spring);
}
.vs-arch-chip:hover { transform: translateY(-2px); border-color: rgba(var(--tint), .5); color: rgb(var(--tint)); }
.vs-arch-chip.is-active {
background: rgb(var(--tint)); color: #fff; border-color: transparent;
box-shadow: 0 6px 18px rgba(var(--tint), .32);
} .vs-arch-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.vs-arch-card {
--tint: 154, 122, 174;
display: flex; flex-direction: column;
border-radius: var(--rad-lg); overflow: hidden;
background:
linear-gradient(180deg, rgba(var(--tint), .10), rgba(var(--tint), .04)),
var(--card-bg);
border: 1.5px solid rgba(var(--tint), .26);
box-shadow: 0 10px 28px rgba(30, 10, 46, .06);
transition: transform .3s var(--ease), box-shadow .3s, border-color .25s;
animation: vs-arch-in .4s var(--ease) both;
}
.vs-arch-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 44px rgba(var(--tint), .20);
border-color: rgba(var(--tint), .45);
}
@keyframes vs-arch-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .vs-arch-card[hidden] { display: none !important; }
.vs-arch-card-media {
position: relative; display: block;
aspect-ratio: 16 / 10; overflow: hidden;
background: var(--bg2);
}
.vs-arch-card-media img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .5s var(--ease);
}
.vs-arch-card:hover .vs-arch-card-media img { transform: scale(1.05); }
.vs-arch-cat-chip {
--tint: 154, 122, 174;
position: absolute; top: 12px; left: 12px;
font-family: var(--vs-font-accent); font-weight: 800;
font-size: 11.5px; letter-spacing: .03em;
padding: 6px 13px; border-radius: 50px;
color: #fff; background: rgb(var(--tint));
box-shadow: 0 4px 12px rgba(var(--tint), .4);
}
.vs-arch-card-body {
display: flex; flex-direction: column; gap: 10px;
padding: 18px 20px 20px; flex: 1;
}
.vs-arch-card-title {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 21px; line-height: 1.2; margin: 0; color: var(--heading);
}
.vs-arch-card-title a { color: inherit; text-decoration: none; }
.vs-arch-card-title a:hover { color: rgb(var(--tint)); }
.vs-arch-card-excerpt {
font-size: 14.5px; line-height: 1.6; color: var(--text2);
margin: 0;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.vs-arch-card-btn {
align-self: flex-start; margin-top: auto;
font-size: 14px !important; padding: 11px 20px !important;
}
.vs-arch-empty {
grid-column: 1 / -1; text-align: center;
padding: 48px 16px; color: var(--muted);
font-size: 16px;
} .vs-arch-noposts {
grid-column: 1 / -1;
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: 12px;
padding: 64px 28px;
background:
radial-gradient(circle at 30% 20%, rgba(255, 179, 138, .10), transparent 55%),
radial-gradient(circle at 75% 30%, rgba(139, 53, 214, .08), transparent 55%),
var(--card-bg);
border: 1.5px dashed var(--border);
border-radius: var(--rad-lg);
}
.vs-arch-noposts-icon {
font-size: 56px; line-height: 1;
animation: vs-icon-dance 4s ease-in-out infinite;
}
.vs-arch-noposts h2 {
font-family: var(--vs-font-display); font-weight: 800;
font-size: clamp(24px, 3vw, 30px); color: var(--heading); margin: 4px 0 0;
}
.vs-arch-noposts p {
max-width: 480px; margin: 0 0 8px;
color: var(--text2); font-size: 16px; line-height: 1.65;
} .vs-arch-card.cat-1, .vs-arch-chip.cat-1, .vs-arch-cat-chip.cat-1 { --tint: 236, 110, 30; } .vs-arch-card.cat-2, .vs-arch-chip.cat-2, .vs-arch-cat-chip.cat-2 { --tint: 214, 150, 20; } .vs-arch-card.cat-3, .vs-arch-chip.cat-3, .vs-arch-cat-chip.cat-3 { --tint: 139, 53, 214; } .vs-arch-card.cat-4, .vs-arch-chip.cat-4, .vs-arch-cat-chip.cat-4 { --tint: 20, 155, 130; } @media (max-width: 1100px) {
.vs-arch-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.vs-cpt-archive .vs-arch-head { padding-left: 18px; padding-right: 18px; padding-bottom: 4px; }
.vs-cpt-archive .vs-arch-body { padding: 0 16px 40px; }
.vs-arch-filter {
flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
margin: 22px 0 26px; padding-bottom: 6px;
scrollbar-width: none;
}
.vs-arch-filter::-webkit-scrollbar { display: none; }
.vs-arch-chip { flex: 0 0 auto; }
.vs-arch-grid { grid-template-columns: 1fr; gap: 16px; }
} .hero.vs-hero .vs-media-card--book {
overflow: visible !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
width: min(100%, 330px) !important; } .hero.vs-hero .vs-media-card-book-image {
transform: none !important;
border-radius: 0 !important;
background: transparent !important;
object-fit: contain !important;
box-shadow: none !important;
filter: drop-shadow(0 18px 30px rgba(30, 10, 46, .26)) !important;
}
[data-theme="dark"] .hero.vs-hero .vs-media-card-book-image {
background: transparent !important;
box-shadow: none !important;
filter: drop-shadow(0 20px 34px rgba(4, 3, 8, .5)) !important;
} @media (min-width: 768px) {
.hero.vs-hero .vs-slide[data-slide="0"] .vs-media-card,
.hero.vs-hero .vs-slide[data-slide="0"] .vs-media-card--photo,
.hero.vs-hero .vs-slide[data-slide="0"] .vs-media-card--fallback,
.hero.vs-hero .vs-slide[data-slide="1"] .vs-media-card--founder {
width: min(100%, 408px) !important; }
.hero.vs-hero .vs-slide[data-slide="3"] .vs-media-card--book {
width: min(100%, 363px) !important; }
} .hi1, .hi2 {
padding-bottom: 0.1em;
}
.section-title {
line-height: 1.2;
padding-bottom: 0.08em;
}
.vs-slide-h1, .vs-slide-h2,
.hero.vs-hero .vs-slide-h1,
.hero.vs-hero .vs-slide-h2 {
line-height: 1.2;
padding-bottom: 0.1em;
} .venues-section { position: relative; z-index: 2; padding: 20px 28px 76px; }
.venues-inner {
max-width: 1180px; margin: 0 auto;
display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 56px; align-items: start;
}
.venues-inner--noimg { grid-template-columns: minmax(0, 1fr); max-width: 840px; }
.venues-media {
border-radius: var(--rad-lg, 22px); overflow: hidden;
box-shadow: var(--shadow-lg, 0 22px 48px rgba(30,10,46,.14));
position: sticky; top: 100px;
}
.venues-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.venues-title { text-align: left; margin: 2px 0 24px; }
.venues-acc { display: flex; flex-direction: column; gap: 14px; }
.venue-item {
border-radius: var(--rad-md, 16px);
background: var(--bg2);
border: 1.5px solid var(--border);
overflow: hidden;
}
.venue-summary {
list-style: none; cursor: pointer;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 18px 22px;
font-family: var(--vs-font-accent); font-weight: 700; font-size: 17px;
color: var(--text); user-select: none;
transition: background .2s;
}
.venue-summary::-webkit-details-marker { display: none; }
.venue-summary:hover { background: color-mix(in srgb, var(--bg2) 55%, var(--bg3)); }
.venue-summary::after {
content: ''; flex: 0 0 auto;
width: 10px; height: 10px; margin-top: -4px;
border-right: 2.5px solid var(--text2);
border-bottom: 2.5px solid var(--text2);
transform: rotate(45deg);
transition: transform .3s var(--ease, ease);
}
.venue-item[open] .venue-summary::after { transform: rotate(-135deg); margin-top: 2px; }
.venue-item[open] > .venue-summary { border-bottom: 1.5px solid var(--border); }
.venue-list {
margin: 0; padding: 14px 26px 20px 42px;
list-style: disc; color: var(--text2);
}
.venue-list li { margin: 7px 0; font-size: 15.5px; line-height: 1.5; }
@media (min-width: 900px) { .venue-item[open] .venue-list { columns: 2; column-gap: 36px; }
.venue-list li { break-inside: avoid; }
} .vs-columns {
column-count: var(--vs-cols, 2);
column-gap: var(--vs-col-gap, 40px);
margin: 22px 0;
}
.vs-columns > :first-child { margin-top: 0; }
.vs-columns > :last-child { margin-bottom: 0; } .vs-columns h1, .vs-columns h2, .vs-columns h3, .vs-columns h4,
.vs-columns h5, .vs-columns h6,
.vs-columns img, .vs-columns figure, .vs-columns table,
.vs-columns blockquote, .vs-columns ul, .vs-columns ol {
break-inside: avoid;
}.shop-hero,
.woocommerce-shop .page-hero {
min-height: 44vh;
display: flex; align-items: center; justify-content: center;
text-align: center;
padding: 130px 48px 60px;
position: relative; z-index: 2; overflow: hidden;
background: transparent;
}
.shop-hero-bg {
position: absolute; inset: 0; z-index: 0;
background-position: center; background-size: cover; background-repeat: no-repeat;
opacity: 0; transition: opacity .8s;
}
[data-theme="light"] .shop-hero-bg { opacity: .07; }
[data-theme="dark"]  .shop-hero-bg { opacity: .04; }
.shop-hero-content { position: relative; z-index: 2; max-width: 720px; }
.hero-icons {
display: flex; justify-content: center;
gap: 14px; margin-bottom: 20px;
}
.hi-icon {
font-size: 32px; opacity: 0;
animation: vs-hi-entry .6s var(--spring) both,
vs-hi-bounce var(--hd, 1.4s) ease-in-out var(--hd2, 0s) infinite;
}
.hi-icon:nth-child(1) { --hd: 1.4s; --hd2: 0s;  animation-delay: .4s, .4s; }
.hi-icon:nth-child(2) { --hd: 1.6s; --hd2: .2s; animation-delay: .55s, .55s; }
.hi-icon:nth-child(3) { --hd: 1.3s; --hd2: .4s; animation-delay: .7s, .7s; }
.hi-icon:nth-child(4) { --hd: 1.5s; --hd2: .6s; animation-delay: .85s, .85s; }
.hi-icon:nth-child(5) { --hd: 1.7s; --hd2: .8s; animation-delay: 1s, 1s; } .hero-icons.hero-bees { gap: clamp(8px, 3vw, 30px); align-items: flex-end; }
.hi-bee {
width: clamp(52px, 8vw, 92px); height: auto; display: block;
opacity: 0;
filter: drop-shadow(0 10px 16px rgba(30, 10, 46, .16));
animation: vs-hi-entry .6s var(--spring) both,
vs-bee-float var(--hd, 4s) ease-in-out var(--hd2, 0s) infinite;
will-change: transform;
}
.hi-bee:nth-child(1) { --hd: 4.2s; --hd2: 0s;   animation-delay: .30s, .30s; }
.hi-bee:nth-child(2) { --hd: 3.6s; --hd2: .4s;  animation-delay: .45s, .45s; }
.hi-bee:nth-child(3) { --hd: 4.6s; --hd2: .8s;  animation-delay: .60s, .60s; }
.hi-bee:nth-child(4) { --hd: 3.9s; --hd2: 1.2s; animation-delay: .75s, .75s; }
@keyframes vs-bee-float {
0%, 100% { transform: translateY(0) rotate(-3deg); }
50%      { transform: translateY(-12px) rotate(3deg); }
}
@keyframes vs-hi-entry {
from { opacity: 0; transform: translateY(30px) scale(0); }
to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vs-hi-bounce {
0%, 100% { transform: translateY(0) rotate(0); }
50%      { transform: translateY(-10px) rotate(5deg); }
}
.shop-hero h1 {
font-family: var(--vs-font-display); font-weight: 900;
font-size: clamp(36px, 4.5vw, 60px);
line-height: 1.1; margin-bottom: 14px;
color: var(--text);
animation: vs-fade-up .8s var(--ease) both 1s;
}
.shop-hero p {
font-size: 16px; color: var(--text2);
line-height: 1.7; margin-bottom: 28px;
animation: vs-fade-up .8s var(--ease) both 1.15s;
} .filter-wrap {
position: relative;
z-index: 3;
background: var(--bg);
border-bottom: 1.5px solid var(--border);
padding: 14px 0;
margin: 0;
transition: background .4s;
} .shop-hero + .filter-wrap,
.vs-breadcrumbs + .filter-wrap { margin-top: 0; }
.filter-wrap + .vs-breadcrumbs,
.filter-wrap + .shop-layout { margin-top: 0; }
.filter-inner {
max-width: 1440px; margin: 0 auto;
padding: 0 80px;
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.filter-label {
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 13px; color: var(--muted);
margin-right: 4px;
}
.filter-btn {
background: transparent;
border: 1.5px solid var(--border2);
color: var(--text2);
font-family: var(--vs-font-body); font-weight: 600;
font-size: 13px; padding: 6px 16px;
border-radius: 50px; cursor: pointer;
transition: all .25s var(--ease);
}
.filter-btn:hover { border-color: var(--pink); color: var(--pink); background: var(--rose); }
.filter-btn.active {
background: var(--grad); color: #fff;
border-color: transparent;
box-shadow: 0 4px 16px rgba(232, 53, 138, .3);
}
[data-theme="dark"] .filter-btn:hover { background: rgba(232, 53, 138, .12); }
.search-wrap { margin-left: auto; position: relative; }
.search-input,
.shop-search input[type="search"] {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: 50px;
padding: 8px 18px 8px 36px;
font-size: 14px; color: var(--text);
font-family: var(--vs-font-body);
outline: none; width: 220px;
transition: border-color .25s, box-shadow .25s, width .3s;
}
.search-input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(232, 53, 138, .12); width: 260px; }
.search-icon {
position: absolute; left: 13px; top: 50%;
transform: translateY(-50%);
font-size: 13px; color: var(--muted);
pointer-events: none;
}
.search-suggest {
position: absolute; top: calc(100% + 8px); right: 0;
width: 360px; max-width: 90vw;
background: var(--card-bg); border: 1.5px solid var(--border);
border-radius: var(--rad-md);
box-shadow: var(--shadow-lg);
padding: 8px; z-index: 110;
display: none;
}
.search-suggest.is-open { display: block; }
.suggest-item {
display: flex; gap: 12px; align-items: center;
padding: 8px 10px; border-radius: 12px;
text-decoration: none; color: var(--text);
transition: background .15s;
}
.suggest-item:hover { background: var(--bg2); color: var(--text); }
.suggest-thumb {
width: 44px; height: 44px; border-radius: 10px;
overflow: hidden; flex-shrink: 0; background: var(--bg2);
}
.suggest-thumb img { width: 100%; height: 100%; object-fit: cover; }
.suggest-text { flex: 1; min-width: 0; }
.suggest-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.suggest-price { font-size: 13px; color: var(--pink); font-family: var(--vs-font-accent); font-weight: 700; }
.sort-select,
.woocommerce-ordering select {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: 50px;
padding: 8px 16px;
font-size: 13px; color: var(--text2);
font-family: var(--vs-font-body);
cursor: pointer; outline: none;
transition: border-color .25s;
}
.sort-select:focus,
.woocommerce-ordering select:focus { border-color: var(--pink); }
.woocommerce-ordering { margin-left: auto; } .woocommerce-shop .site-main,
.woocommerce.archive .site-main,
.tax-product_cat .site-main {
position: relative; z-index: 2;
padding: 0;
}
.shop-layout {
max-width: 1440px; margin: 0 auto;
padding: 24px 80px 80px;
position: relative; z-index: 2;
} .filter-wrap + .shop-layout { padding-top: 24px; }
.results-bar {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 28px; flex-wrap: wrap; gap: 12px;
}
.results-count,
.woocommerce-result-count {
font-size: 14px; color: var(--muted); font-weight: 600;
margin: 0;
}
.results-count strong,
.woocommerce-result-count strong { color: var(--text); }
.view-toggle { display: flex; gap: 6px; }
.view-btn {
width: 36px; height: 36px; border-radius: 10px;
border: 1.5px solid var(--border);
background: transparent; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: var(--muted);
transition: all .25s;
}
.view-btn.active,
.view-btn:hover {
background: var(--rose); border-color: var(--pink); color: var(--pink);
}
[data-theme="dark"] .view-btn.active,
[data-theme="dark"] .view-btn:hover { background: rgba(232, 53, 138, .12); } .products.prod-grid,
.prod-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
transition: all .3s var(--ease);
margin: 0;
padding: 0;
list-style: none;
}
.products.columns-1, .prod-grid.columns-1 { grid-template-columns: 1fr; }
.products.columns-2, .prod-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.products.columns-3, .prod-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.products.columns-4, .prod-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }
.prod-grid.list-view,
.products.list-view { grid-template-columns: 1fr; } .shop-card {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
overflow: hidden;
box-shadow: var(--shadow);
transition: transform .35s var(--ease), box-shadow .35s, border-color .25s, opacity .35s;
position: relative;
cursor: default;
opacity: 0;
animation: vs-card-in .6s var(--ease) both;
display: flex;
flex-direction: column;
}
@keyframes vs-card-in {
from { transform: translateY(30px) scale(.96); opacity: 0; }
to   { transform: translateY(0) scale(1); opacity: 1; }
}
.shop-card:nth-child(1)  { animation-delay: .05s; }
.shop-card:nth-child(2)  { animation-delay: .12s; }
.shop-card:nth-child(3)  { animation-delay: .19s; }
.shop-card:nth-child(4)  { animation-delay: .26s; }
.shop-card:nth-child(5)  { animation-delay: .33s; }
.shop-card:nth-child(6)  { animation-delay: .40s; }
.shop-card:nth-child(7)  { animation-delay: .47s; }
.shop-card:nth-child(8)  { animation-delay: .54s; }
.shop-card:nth-child(9)  { animation-delay: .61s; }
.shop-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
border-color: var(--pink);
}
.shop-card.hidden { display: none; }
.shop-card-link {
position: absolute; inset: 0;
z-index: 1;
text-indent: -9999px;
overflow: hidden;
} .shop-card .card-img {
aspect-ratio: 4 / 5;
height: auto;
display: flex; align-items: center; justify-content: center;
font-size: 68px;
position: relative; overflow: hidden;
transition: transform .4s var(--ease);
background-color: #fff;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
background-origin: content-box;
padding: 9%;
box-sizing: border-box;
} .shop-card .card-img::after {
content: '';
position: absolute; left: 22%; right: 22%; bottom: 6.5%;
height: 4%;
background: radial-gradient(ellipse at center, rgba(30, 10, 46, .16), rgba(30, 10, 46, 0) 72%);
filter: blur(4px);
z-index: 0;
pointer-events: none;
}
.shop-card:hover .card-img { transform: scale(1.04); }
.shop-card .card-img::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.25) 50%, transparent 75%);
transform: translateX(-100%);
transition: transform .6s ease;
pointer-events: none;
}
.shop-card:hover .card-img::before { transform: translateX(200%); }
.shop-card .card-emoji {
font-size: 68px; line-height: 1;
position: relative; z-index: 1;
filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
} .card-badges {
position: absolute; top: 12px; left: 12px;
z-index: 3;
display: flex; flex-direction: column; gap: 6px;
pointer-events: none;
}
.card-badges .badge {
font-family: var(--vs-font-accent);
font-weight: 800; font-size: 11px;
padding: 3px 10px; border-radius: 50px;
white-space: nowrap; display: inline-block;
letter-spacing: .02em;
}
.card-badges .badge.sale   { background: var(--grad); color: #fff; }
.card-badges .badge.best   { background: var(--yellow); color: var(--text); }
.card-badges .badge.new    { background: linear-gradient(135deg, var(--mint), #5CE0D5); color: #0D4A40; }
.card-badges .badge.bundle { background: linear-gradient(135deg, var(--purple), var(--lilac)); color: #fff; } .shop-card .wishlist-btn {
position: absolute; top: 12px; right: 12px;
z-index: 3;
width: 34px; height: 34px; border-radius: 50%;
background: var(--card-bg);
border: 1.5px solid var(--border);
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 15px;
transition: all .25s var(--ease);
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.shop-card .wishlist-btn:hover {
transform: scale(1.2);
border-color: var(--pink);
background: var(--rose);
}
.shop-card .wishlist-btn.liked {
background: var(--rose); border-color: var(--pink);
} .shop-card .card-body {
padding: 12px 16px 14px;
flex: 1;
display: flex; flex-direction: column;
position: relative; z-index: 2;
} .shop-card .card-chips {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
margin-bottom: 8px;
}
.shop-card .card-category {
display: inline-flex; align-items: center;
font-family: var(--vs-font-accent);
font-weight: 800; font-size: 10.5px;
letter-spacing: .04em; text-transform: uppercase;
padding: 3px 11px; border-radius: 50px;
background: rgba(139, 53, 214, .10);
color: var(--purple);
border: 1px solid rgba(139, 53, 214, .2);
}
[data-theme="dark"] .shop-card .card-category { background: rgba(139, 53, 214, .18); color: var(--lilac); }
.shop-card .card-body h3,
.shop-card .woocommerce-loop-product__title {
font-family: var(--vs-font-display);
font-weight: 700; font-size: 17px;
line-height: 1.25;
margin-bottom: 5px;
color: var(--text);
}
.shop-card .card-body h3 a,
.shop-card .woocommerce-loop-product__title a {
color: inherit; text-decoration: none;
position: relative; z-index: 2;
}
.shop-card .card-body p {
font-size: 13px;
color: var(--text2);
line-height: 1.6;
margin-bottom: 12px;
}
.shop-card .card-meta {
display: flex; align-items: center;
gap: 8px; flex-wrap: wrap;
margin-bottom: 4px;
}
.shop-card .card-age {
display: inline-flex; align-items: center; gap: 5px;
font-weight: 700; font-size: 11px;
padding: 3px 10px; border-radius: 50px;
background: var(--rose); color: var(--pink);
border: 1px solid rgba(232, 53, 138, .2);
}
[data-theme="dark"] .shop-card .card-age { background: rgba(232, 53, 138, .1); }
.shop-card .card-rating {
display: flex; align-items: center; gap: 4px;
font-size: 12px; font-weight: 700;
color: var(--muted);
}
.shop-card .stars { color: var(--yellow); }
.shop-card .card-footer {
display: flex; align-items: stretch;
flex-direction: column;
gap: 8px;
margin-top: auto; padding-top: 12px;
border-top: 1px solid var(--border);
}
.shop-card .price-block { line-height: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shop-card .price-block .price-now,
.shop-card .price-block .price-now bdi,
.shop-card .price-block .woocommerce-Price-amount {
font-family: var(--vs-font-display);
font-weight: 700; font-size: 21px;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
}
.shop-card .price-block .price-old,
.shop-card .price-block .price-old bdi {
font-size: 12px; color: var(--muted);
text-decoration: line-through;
margin-top: 0; display: inline-flex; align-items: center;
background: none;
-webkit-text-fill-color: var(--muted);
font-weight: 600;
font-family: var(--vs-font-body);
}
.shop-card .cart-add-btn {
background: var(--grad); color: #fff;
border: none; cursor: pointer;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 13px;
padding: 9px 16px; border-radius: 12px;
white-space: nowrap;
box-shadow: 0 4px 16px rgba(232, 53, 138, .3);
transition: transform .2s, box-shadow .2s;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
text-decoration: none; text-align: center;
width: 100%;
position: relative; z-index: 2;
}
.shop-card .cart-add-btn:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 8px 24px rgba(232, 53, 138, .5);
color: #fff;
}
.shop-card .cart-add-btn.added,
.shop-card .cart-add-btn.loading {
background: var(--grad3);
box-shadow: 0 4px 16px rgba(52, 217, 181, .3);
color: #0D4A40;
} .list-view .shop-card {
display: grid;
grid-template-columns: 240px 1fr;
}
.list-view .shop-card .card-img {
aspect-ratio: 4 / 5; height: auto; min-height: 0;
}
.list-view .shop-card .card-body {
padding: 22px 26px;
display: flex; flex-direction: column;
justify-content: space-between;
}
.list-view .shop-card .card-body h3 { font-size: 22px; } .ci1, .pi1 { background: linear-gradient(145deg, #FFF3E0, #FFD09A); }
.ci2, .pi2 { background: linear-gradient(145deg, #F5EEFF, #DDBEFF); }
.ci3, .pi3 { background: linear-gradient(145deg, #E8FFF5, #AAFADE); }
.ci4, .pi4 { background: linear-gradient(145deg, #E8F4FF, #B8DAFF); }
.ci5, .pi5 { background: linear-gradient(145deg, #FFF0F5, #FFB8D4); }
.ci6, .pi6 { background: linear-gradient(145deg, #F0FFF8, #B8FFE2); }
.ci7, .pi7 { background: linear-gradient(145deg, #FFFBE8, #FFE9A0); }
.ci8, .pi8 { background: linear-gradient(145deg, #F8F0FF, #E0C4FF); }
.ci9, .pi9 { background: linear-gradient(145deg, #E8FCFF, #A8EEFF); }
[data-theme="dark"] .ci1, [data-theme="dark"] .pi1 { background: linear-gradient(145deg, rgba(255,107,26,.2), rgba(255,45,138,.18)); }
[data-theme="dark"] .ci2, [data-theme="dark"] .pi2 { background: linear-gradient(145deg, rgba(139,53,214,.2), rgba(195,132,252,.15)); }
[data-theme="dark"] .ci3, [data-theme="dark"] .pi3 { background: linear-gradient(145deg, rgba(52,217,181,.18), rgba(0,245,255,.12)); }
[data-theme="dark"] .ci4, [data-theme="dark"] .pi4 { background: linear-gradient(145deg, rgba(0,183,255,.15), rgba(139,53,214,.15)); }
[data-theme="dark"] .ci5, [data-theme="dark"] .pi5 { background: linear-gradient(145deg, rgba(255,45,138,.2), rgba(255,107,26,.15)); }
[data-theme="dark"] .ci6, [data-theme="dark"] .pi6 { background: linear-gradient(145deg, rgba(52,217,181,.18), rgba(100,255,200,.12)); }
[data-theme="dark"] .ci7, [data-theme="dark"] .pi7 { background: linear-gradient(145deg, rgba(255,217,61,.18), rgba(255,160,26,.15)); }
[data-theme="dark"] .ci8, [data-theme="dark"] .pi8 { background: linear-gradient(145deg, rgba(139,53,214,.22), rgba(195,132,252,.18)); }
[data-theme="dark"] .ci9, [data-theme="dark"] .pi9 { background: linear-gradient(145deg, rgba(0,200,255,.2), rgba(0,245,255,.15)); } .star-rating {
color: var(--yellow);
font-size: 14px; letter-spacing: 1px;
display: inline-block;
font-family: var(--vs-font-body);
}
@keyframes vs-spin { to { transform: rotate(360deg); } } .shop-empty {
max-width: 520px; margin: 64px auto;
text-align: center;
}
.shop-empty .empty-icon {
font-size: 80px; margin-bottom: 16px;
display: inline-block;
animation: vs-icon-dance 3s ease-in-out infinite;
}
.shop-empty h3 {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 26px; margin-bottom: 8px;
}
.shop-empty p { color: var(--text2); margin-bottom: 20px; } .bundle-section {
background: var(--bg2);
position: relative; z-index: 2;
padding: 72px 0;
}
.bundle-inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 80px;
}
.bundle-header {
text-align: center;
margin-bottom: 48px;
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.bundle-header .section-tag { display: inline-flex; margin: 0 0 14px; }
.bundle-header .section-title {
font-family: var(--vs-font-display);
font-weight: 900;
font-size: clamp(28px, 3.5vw, 44px);
line-height: 1.14;
margin-bottom: 14px;
letter-spacing: -0.015em;
}
.bundle-italic {
font-style: italic;
color: var(--pink);
}
.bundle-header .section-sub {
font-size: 16px; color: var(--text2);
line-height: 1.7; max-width: 540px;
margin: 0 auto;
}
.bundle-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.bundle-card {
border-radius: var(--rad-lg);
padding: 28px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow);
transition: transform .35s var(--ease), box-shadow .35s;
cursor: default;
opacity: 0;
animation: vs-card-in .7s var(--ease) both;
display: flex; flex-direction: column;
}
.bundle-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.bundle-card.bc1 { background: var(--grad); color: #fff; }
.bundle-card.bc2 {
background: linear-gradient(135deg, #FFF3E0, #FFE0C0);
border: 1.5px solid rgba(244, 104, 26, .2);
}
.bundle-card.bc3 {
background: linear-gradient(135deg, #F5EEFF, #EAD0FF);
border: 1.5px solid rgba(139, 53, 214, .2);
}
[data-theme="dark"] .bundle-card.bc2 {
background: linear-gradient(135deg, rgba(255,107,26,.18), rgba(255,160,100,.12));
border-color: rgba(255,107,26,.25);
}
[data-theme="dark"] .bundle-card.bc3 {
background: linear-gradient(135deg, rgba(139,53,214,.2), rgba(195,132,252,.12));
border-color: rgba(139,53,214,.25);
}
.bundle-tag {
display: inline-block;
font-family: var(--vs-font-accent);
font-weight: 800;
font-size: 11px;
letter-spacing: .06em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 50px;
margin-bottom: 14px;
}
.bc1 .bundle-tag { background: rgba(255,255,255,.25); color: #fff; }
.bc2 .bundle-tag { background: rgba(244,104,26,.15);  color: var(--orange); }
.bc3 .bundle-tag { background: rgba(139,53,214,.15);  color: var(--purple); }
[data-theme="dark"] .bc2 .bundle-tag { background: rgba(244,104,26,.25); color: #ffb38a; }
[data-theme="dark"] .bc3 .bundle-tag { background: rgba(195,132,252,.18); color: var(--lilac); }
.bundle-icon {
font-size: 52px;
margin-bottom: 14px;
display: block;
line-height: 1;
transition: transform .3s var(--spring);
}
.bundle-card:hover .bundle-icon { transform: scale(1.15) rotate(-5deg); }
.bundle-card h3 {
font-family: var(--vs-font-display);
font-weight: 800;
font-size: 22px;
line-height: 1.2;
margin-bottom: 14px;
letter-spacing: -0.005em;
}
.bc1 h3 { color: #fff; }
.bc2 h3, .bc3 h3 { color: var(--text); }
[data-theme="dark"] .bc2 h3, [data-theme="dark"] .bc3 h3 { color: var(--text); }
.bundle-items {
margin-bottom: 18px;
flex: 1;
display: flex; flex-direction: column;
gap: 6px;
}
.bundle-item {
display: flex; align-items: center; gap: 10px;
font-size: 13.5px; line-height: 1.4;
}
.bc1 .bundle-item { color: rgba(255,255,255,.92); }
.bc2 .bundle-item, .bc3 .bundle-item { color: var(--text2); }
.b-check {
width: 20px; height: 20px;
border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 800;
flex-shrink: 0;
}
.bc1 .b-check { background: rgba(255,255,255,.25); color: #fff; }
.bc2 .b-check { background: rgba(244,104,26,.15);  color: var(--orange); }
.bc3 .b-check { background: rgba(139,53,214,.15);  color: var(--purple); }
.bundle-price-row {
display: flex; align-items: flex-end;
gap: 10px; margin-bottom: 18px;
}
.bundle-price {
font-family: var(--vs-font-display);
font-weight: 900;
font-size: 34px; line-height: 1;
letter-spacing: -0.015em;
}
.bc1 .bundle-price { color: #fff; }
.bc2 .bundle-price { color: var(--orange); }
.bc3 .bundle-price { color: var(--purple); }
.bundle-save {
font-family: var(--vs-font-accent);
font-weight: 800;
font-size: 11px;
padding: 4px 12px;
border-radius: 50px;
letter-spacing: .04em;
text-transform: uppercase;
}
.bc1 .bundle-save { background: rgba(255,255,255,.22); color: #fff; }
.bc2 .bundle-save { background: rgba(244,104,26,.18); color: var(--orange); }
.bc3 .bundle-save { background: rgba(139,53,214,.18); color: var(--purple); }
.bundle-btn {
width: 100%;
padding: 13px 18px;
border: none;
border-radius: 14px;
font-family: var(--vs-font-accent);
font-weight: 700;
font-size: 14px;
cursor: pointer;
text-decoration: none;
text-align: center;
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
transition: transform .2s, box-shadow .2s, background .2s;
}
.bc1 .bundle-btn {
background: rgba(255,255,255,.22);
color: #fff;
border: 1.5px solid rgba(255,255,255,.4);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.bc1 .bundle-btn:hover { background: rgba(255,255,255,.36); color: #fff; transform: translateY(-2px); }
.bc2 .bundle-btn, .bc3 .bundle-btn {
background: var(--grad);
color: #fff;
box-shadow: 0 4px 16px rgba(232,53,138,.3);
}
.bc2 .bundle-btn:hover, .bc3 .bundle-btn:hover {
color: #fff;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(232,53,138,.5);
}
@media (max-width: 1100px) {
.bundle-inner { padding: 0 48px; }
}
@media (max-width: 960px) {
.bundle-inner { padding: 0 24px; }
.bundle-cards { grid-template-columns: 1fr; gap: 18px; }
} .newsletter {
position: relative; z-index: 2;
padding: 80px 48px;
background:
linear-gradient(135deg, rgba(244,104,26,.92), rgba(232,53,138,.92) 55%, rgba(139,53,214,.92)),
var(--nl-bg, url(https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?w=1400&q=80&auto=format&fit=crop)) center/cover no-repeat;
background-blend-mode: multiply;
overflow: hidden;
}
.newsletter::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 60% at 20% 20%, rgba(255,217,61,.18), transparent 60%),
radial-gradient(ellipse 50% 50% at 80% 80%, rgba(52,217,181,.15), transparent 60%);
pointer-events: none;
}
.newsletter-inner {
max-width: 640px;
margin: 0 auto;
text-align: center;
position: relative;
z-index: 2;
color: #fff;
}
.nl-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,.22);
color: #fff;
font-family: var(--vs-font-accent);
font-weight: 700;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 50px;
margin-bottom: 18px;
border: 1.5px solid rgba(255,255,255,.32);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.newsletter h2 {
font-family: var(--vs-font-display);
font-weight: 900;
font-size: clamp(28px, 3.2vw, 42px);
color: #fff;
margin-bottom: 14px;
letter-spacing: -0.015em;
}
.newsletter p {
font-size: 16px;
color: rgba(255,255,255,.9);
line-height: 1.7;
margin-bottom: 28px;
max-width: 520px;
margin-left: auto;
margin-right: auto;
}
.nl-form {
display: flex;
gap: 10px;
max-width: 480px;
margin: 0 auto;
flex-wrap: wrap;
}
.nl-input {
flex: 1;
background: rgba(255,255,255,.18);
border: 1.5px solid rgba(255,255,255,.4);
border-radius: 50px;
padding: 14px 22px;
font-size: 15px;
color: #fff;
outline: none;
font-family: var(--vs-font-body);
min-width: 220px;
transition: border-color .25s, background .25s;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.nl-input::placeholder { color: rgba(255,255,255,.65); }
.nl-input:focus {
background: rgba(255,255,255,.28);
border-color: rgba(255,255,255,.85);
box-shadow: 0 0 0 4px rgba(255,255,255,.16);
}
.nl-btn {
background: #fff;
color: var(--pink);
font-family: var(--vs-font-accent);
font-weight: 800;
font-size: 14px;
padding: 14px 28px;
border-radius: 50px;
border: none;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 8px 24px rgba(0,0,0,.18);
transition: transform .2s, box-shadow .2s;
display: inline-flex; align-items: center; gap: 6px;
}
.nl-btn:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: 0 14px 32px rgba(0,0,0,.28);
}
@media (max-width: 720px) {
.newsletter { padding: 56px 24px; }
.nl-form { flex-direction: column; }
.nl-btn { width: 100%; justify-content: center; }
} .vs-breadcrumbs {
position: relative; z-index: 3;
width: 100%;
padding: 18px 24px;
background: transparent;
border: 0;
} .single-product .vs-breadcrumbs { padding-top: var(--vs-nav-clear); padding-bottom: 6px; }
.vs-breadcrumbs-inner {
max-width: 900px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
} .vs-breadcrumbs .woocommerce-breadcrumb,
.vs-breadcrumbs .breadcrumb {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 8px;
margin: 0 auto;
padding: 8px 18px;
font-family: var(--vs-font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: .01em;
color: var(--muted);
background: transparent;
border: 0;
border-radius: 999px;
max-width: 100%;
text-align: center;
}
.vs-breadcrumbs a {
color: var(--text2);
text-decoration: none;
transition: color .2s;
}
.vs-breadcrumbs a:hover { color: var(--pink); }
.vs-breadcrumbs .bc-sep,
.vs-breadcrumbs .breadcrumb-separator {
color: var(--border2);
font-weight: 600;
opacity: .7;
}
.vs-breadcrumbs .bc-current,
.vs-breadcrumbs strong {
color: var(--text);
font-weight: 600;
} .woocommerce-breadcrumb:not(.vs-breadcrumbs .woocommerce-breadcrumb),
.breadcrumb:not(.vs-breadcrumbs .breadcrumb) {
max-width: 900px;
margin: 18px auto;
padding: 8px 18px;
font-size: 13px;
color: var(--muted);
font-weight: 500;
display: flex; flex-wrap: wrap;
align-items: center; justify-content: center;
gap: 6px 8px;
background: transparent; border: 0;
text-align: center;
} .single-product div.product {
max-width: 1440px; margin: 0 auto;
padding: 24px 28px 80px; position: relative; z-index: 2;
} .vs-single-product { padding-top: var(--vs-nav-clear); }
.product-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px; align-items: start;
margin-bottom: 64px;
} .single-product div.product > .woocommerce-tabs,
.single-product div.product > .related.products,
.single-product div.product > .upsells.products {
max-width: 100%;
padding-left: 0;
padding-right: 0;
margin-top: 24px;
}
.vs-gallery-wrap {
position: relative;
width: 100%;
}
.woocommerce-product-gallery {
position: relative;
width: 100% !important;
float: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
opacity: 1 !important;
} .gallery-main {
position: relative;
border-radius: var(--rad-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1.5px solid var(--border);
cursor: zoom-in;
aspect-ratio: 1;
width: 100%;
background: var(--bg2);
}
.gallery-main > a.gallery-zoom,
.gallery-main > a.gallery-zoom:focus {
display: block;
width: 100%;
height: 100%;
outline: none;
}
.gallery-main img,
.gallery-main #vsMainImg {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
background: transparent;
transition: opacity .25s var(--ease), transform .5s var(--ease);
}
.gallery-main:hover img { transform: scale(1.04); }
.woocommerce-product-gallery__trigger {
position: absolute; top: 28px; right: 28px;
z-index: 5;
width: 40px; height: 40px; border-radius: 50%;
background: var(--card-bg); border: 1.5px solid var(--border);
box-shadow: var(--shadow);
color: var(--text2);
display: flex; align-items: center; justify-content: center;
font-size: 16px; text-decoration: none;
transition: all .25s;
}
.woocommerce-product-gallery__trigger:hover {
background: var(--rose); border-color: var(--pink); color: var(--pink);
transform: scale(1.1);
}
.gallery-badge {
position: absolute; top: 16px; left: 16px;
background: linear-gradient(135deg, var(--mint), #5CE0D5);
color: #0D4A40;
font-family: var(--vs-font-accent); font-weight: 800;
font-size: 12px; padding: 5px 14px;
border-radius: 50px; z-index: 2;
}
.gallery-badge.sale { background: var(--grad); color: #fff; } .vs-product-fallback {
width: 100% !important; height: 100% !important;
display: flex !important;
flex-direction: column;
align-items: center; justify-content: center;
gap: 12px;
background: linear-gradient(145deg, #FFF3E0, #FFD09A);
aspect-ratio: 1;
margin: 0 !important;
}
.vs-product-fallback.pi1 { background: linear-gradient(145deg, #FFF3E0, #FFD09A); }
.vs-product-fallback.pi2 { background: linear-gradient(145deg, #F5EEFF, #DDBEFF); }
.vs-product-fallback.pi3 { background: linear-gradient(145deg, #E8FFF5, #AAFADE); }
.vs-product-fallback.pi4 { background: linear-gradient(145deg, #E8F4FF, #B8DAFF); }
.vs-product-fallback.pi5 { background: linear-gradient(145deg, #FFF0F5, #FFB8D4); }
.vs-product-fallback.pi6 { background: linear-gradient(145deg, #F0FFF8, #B8FFE2); }
.vs-product-fallback.pi7 { background: linear-gradient(145deg, #FFFBE8, #FFE9A0); }
.vs-product-fallback.pi8 { background: linear-gradient(145deg, #F8F0FF, #E0C4FF); }
.vs-product-fallback-emoji {
font-size: clamp(80px, 14vw, 160px);
line-height: 1;
filter: drop-shadow(0 8px 24px rgba(0,0,0,.15));
animation: vs-icon-dance 4s ease-in-out infinite;
}
.vs-product-fallback-label {
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 13px; color: var(--text2);
letter-spacing: .04em; text-transform: uppercase;
background: rgba(255,255,255,.6);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
padding: 6px 14px; border-radius: 50px;
}
.vs-loop-fallback-emoji {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: clamp(48px, 8vw, 80px);
line-height: 1;
z-index: 1;
pointer-events: none;
filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
} .gallery-thumbs {
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin: 12px 0 0 !important;
padding: 2px 0 8px !important;
list-style: none;
width: 100% !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.gallery-thumbs::-webkit-scrollbar { height: 6px; }
.gallery-thumbs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 50px; }
button.gallery-thumb,
.gallery-thumb {
all: unset;
display: block;
border-radius: var(--rad-sm);
overflow: hidden;
cursor: pointer;
border: 2.5px solid transparent;
box-sizing: border-box;
transition: border-color .2s, transform .2s, box-shadow .2s;
aspect-ratio: 1;
flex: 1 0 calc((100% - 40px) / 5); min-width: 74px; scroll-snap-align: start;
background: var(--bg2);
outline: none;
}
button.gallery-thumb:hover,
button.gallery-thumb:focus-visible,
button.gallery-thumb.active,
.gallery-thumb:hover,
.gallery-thumb.active {
border-color: var(--pink);
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(232, 53, 138, .25);
}
.gallery-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
opacity: .82;
transition: opacity .2s;
}
.gallery-thumb:hover img,
.gallery-thumb.active img { opacity: 1; } .summary.entry-summary {
display: flex; flex-direction: column;
gap: 0; padding-top: 8px;
width: 100% !important;
float: none !important;
}
.product_title,
.product_title.entry-title {
font-family: var(--vs-font-display); font-weight: 900;
font-size: clamp(28px, 3vw, 42px);
line-height: 1.15; margin-bottom: 12px;
color: var(--text);
}
.woocommerce-product-rating {
display: flex; align-items: center; gap: 10px;
margin-bottom: 16px;
}
.rating-count,
.woocommerce-review-link {
font-size: 13px; color: var(--muted); font-weight: 600;
}
.rating-count a,
.woocommerce-review-link { color: var(--pink); text-decoration: none; }
.summary .price,
.single-product .price {
display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px;
margin: 4px 0 14px;
}
.summary .price .woocommerce-Price-amount,
.single-product .price .woocommerce-Price-amount {
font-family: var(--vs-font-display);
font-weight: 900; font-size: 42px;
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.summary .price del .woocommerce-Price-amount,
.single-product .price del .woocommerce-Price-amount {
font-size: 18px; opacity: .6;
background: none;
-webkit-text-fill-color: var(--muted);
text-decoration: line-through;
}
.summary .price ins,
.single-product .price ins { text-decoration: none; background: transparent; }
.price-save {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(52, 217, 181, .12);
color: var(--mint);
border: 1px solid rgba(52, 217, 181, .25);
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 12px; padding: 4px 12px;
border-radius: 50px;
margin-left: 10px; vertical-align: middle;
} .woocommerce-product-details__short-description {
font-size: 15px; color: var(--text2);
line-height: 1.75; margin-bottom: 24px;
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-md);
padding: 16px 20px 16px 52px;
position: relative;
}
.woocommerce-product-details__short-description::before {
content: '💜';
position: absolute; top: 16px; left: 20px;
font-size: 18px;
}
[data-theme="dark"] .woocommerce-product-details__short-description {
background: var(--card-bg);
} .single-product .woocommerce-Tabs-panel blockquote,
.single-product .entry-content blockquote {
background: var(--card-bg);
border: 1.5px solid var(--border);
color: var(--text2);
}
.product-meta-chips {
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: 24px;
}
.meta-chip {
display: inline-flex; align-items: center; gap: 6px;
background: var(--bg2); border: 1.5px solid var(--border);
border-radius: 50px; padding: 6px 14px;
font-size: 12px; font-weight: 600; color: var(--text2);
} .single-product .summary .stock {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--vs-font-body); font-weight: 600;
font-size: 13px; color: var(--text2);
margin: 0 0 14px;
}
.single-product .summary .stock.in-stock::before {
content: ''; width: 9px; height: 9px; border-radius: 50%;
background: var(--mint); box-shadow: 0 0 0 4px rgba(52, 217, 181, .18);
}
.single-product .summary .stock.out-of-stock::before {
content: ''; width: 9px; height: 9px; border-radius: 50%;
background: var(--muted);
}
.cart,
.single-product form.cart {
display: flex; gap: 12px; align-items: stretch;
margin-bottom: 22px; flex-wrap: nowrap;
}
.quantity {
display: flex; align-items: center;
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: var(--rad-sm); overflow: hidden;
flex: 0 0 auto;
}
.qty-dec, .qty-inc {
background: transparent; border: none;
width: 46px; height: 56px; font-size: 20px;
cursor: pointer; color: var(--text2);
display: flex; align-items: center; justify-content: center;
transition: background .2s, color .2s;
}
.qty-dec:hover, .qty-inc:hover { background: var(--rose); color: var(--pink); }
[data-theme="dark"] .qty-dec:hover, [data-theme="dark"] .qty-inc:hover { background: rgba(232,53,138,.12); }
.quantity .qty,
.qty-input {
width: 56px; height: 56px; border: none;
background: transparent; text-align: center;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 16px; color: var(--text); outline: none;
-moz-appearance: textfield;
}
.quantity .qty::-webkit-outer-spin-button,
.quantity .qty::-webkit-inner-spin-button { display: none; }
.woocommerce form.cart .single_add_to_cart_button,
.single_add_to_cart_button.button,
.single_add_to_cart_button.button.alt,
.single_add_to_cart_button {
background: var(--grad) !important;
color: #fff !important;
font-family: var(--vs-font-accent) !important;
font-weight: 700 !important;
font-size: 16px !important;
letter-spacing: 0 !important;
text-transform: none !important;
flex: 1 1 auto;
min-height: 56px;
padding: 14px 32px !important;
border-radius: var(--rad-sm) !important;
border: none !important;
cursor: pointer;
box-shadow: 0 6px 24px rgba(232, 53, 138, .38) !important;
transition: transform .2s, box-shadow .2s;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 8px;
white-space: nowrap;
text-decoration: none;
line-height: 1;
text-shadow: none;
}
.single_add_to_cart_button:hover,
.single_add_to_cart_button.button.alt:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(232, 53, 138, .55) !important;
color: #fff !important;
background: var(--grad) !important;
}
.single_add_to_cart_button.loading { opacity: .7; cursor: wait; }
.single_add_to_cart_button.added,
.single_add_to_cart_button.button.alt.added {
background: var(--grad3) !important;
color: #0D4A40 !important;
box-shadow: 0 6px 24px rgba(52, 217, 181, .35) !important;
}
.product-actions {
display: flex; gap: 10px; margin-bottom: 24px;
flex-wrap: wrap;
}
.action-btn {
display: inline-flex; align-items: center; gap: 6px;
background: transparent;
border: 1.5px solid var(--border);
color: var(--text2);
font-family: var(--vs-font-body); font-weight: 600;
font-size: 13px; padding: 8px 16px;
border-radius: 50px; cursor: pointer;
transition: all .25s;
}
.action-btn:hover { border-color: var(--pink); color: var(--pink); background: var(--rose); }
[data-theme="dark"] .action-btn:hover { background: rgba(232, 53, 138, .12); } .trust-badges {
display: grid; grid-template-columns: 1fr 1fr;
gap: 10px; margin-bottom: 24px;
}
.trust-badge {
display: flex; align-items: center; gap: 10px;
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: 14px; padding: 12px 14px;
box-shadow: var(--shadow);
}
.trust-badge .tb-icon { font-size: 22px; flex-shrink: 0; }
.trust-badge .tb-text {
font-size: 12px; font-weight: 600;
color: var(--text2); line-height: 1.4;
}
.trust-badge .tb-text strong {
display: block; font-size: 13px;
color: var(--text); font-weight: 700;
}
.product_meta {
border-top: 1.5px solid var(--border);
padding-top: 16px; margin-top: 8px;
font-size: 13px; color: var(--muted);
display: flex; flex-direction: column; gap: 6px;
}
.product_meta > span { display: flex; gap: 8px; }
.product_meta .label,
.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .tagged_as { font-weight: 700; color: var(--text2); }
.product_meta a { color: var(--pink); text-decoration: none; } .sticky-atc {
position: fixed; left: 0; right: 0; bottom: -100px;
z-index: 150;
background: var(--card-bg);
border-top: 1.5px solid var(--border);
padding: 12px 18px 14px;
display: flex; align-items: center; gap: 12px;
box-shadow: 0 -4px 24px rgba(0, 0, 0, .08);
transition: bottom .35s var(--ease);
}
.sticky-atc.is-visible { bottom: 0; }
.sticky-atc-thumb {
width: 44px; height: 44px; border-radius: 10px;
overflow: hidden; flex-shrink: 0;
background: var(--bg2);
}
.sticky-atc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sticky-atc-info { flex: 1; min-width: 0; }
.sticky-atc-title {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 14px; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sticky-atc-price {
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 13px;
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.sticky-atc .btn-primary { padding: 10px 18px; font-size: 14px; } .woocommerce-tabs,
.tabs-wrap {
position: relative; z-index: 2;
max-width: 1440px; margin: 0 auto;
padding: 0 80px 64px;
}
.woocommerce-tabs ul.tabs,
.tabs-nav {
display: flex; gap: 4px;
border-bottom: 1.5px solid var(--border);
margin: 0 0 32px; padding: 0;
list-style: none;
}
.woocommerce-tabs ul.tabs li,
.tabs-nav li {
background: transparent; border: none;
margin: 0; padding: 0;
}
.woocommerce-tabs ul.tabs li a,
.tab-btn,
.tabs-nav li a {
background: transparent; border: none;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 14px; color: var(--muted);
padding: 12px 20px; cursor: pointer;
border-bottom: 2.5px solid transparent;
margin-bottom: -1.5px;
transition: color .2s, border-color .2s;
text-decoration: none;
display: inline-block;
}
.woocommerce-tabs ul.tabs li a:hover,
.tab-btn:hover { color: var(--pink); }
.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.is-active a,
.tab-btn.active {
color: var(--pink);
border-bottom-color: var(--pink);
}
.woocommerce-Tabs-panel,
.tab-panel {
font-size: 15px; color: var(--text2);
line-height: 1.8;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.woocommerce-Tabs-panel h3,
.tab-panel h3 {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 20px; margin: 24px 0 12px;
color: var(--text);
} .review-list,
.commentlist {
display: flex; flex-direction: column; gap: 20px;
margin-bottom: 32px;
padding: 0; list-style: none;
}
.review-card,
.commentlist .comment_container {
background: var(--card-bg); border: 1.5px solid var(--border);
border-radius: var(--rad-md);
padding: 20px 24px; box-shadow: var(--shadow);
display: block;
}
.review-header {
display: flex; align-items: flex-start;
justify-content: space-between;
margin-bottom: 10px; gap: 12px;
}
.reviewer-info { display: flex; align-items: center; gap: 10px; }
.reviewer-av {
width: 38px; height: 38px; border-radius: 50%;
background: var(--grad);
display: flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0; color: #fff;
}
.reviewer-name { font-weight: 700; font-size: 14px; color: var(--text); }
.reviewer-date { font-size: 11px; color: var(--muted); }
.review-stars { color: var(--yellow); font-size: 13px; }
.review-text { font-size: 14px; color: var(--text2); line-height: 1.7; }
.shop_attributes,
.woocommerce-product-attributes { width: 100%; border-collapse: collapse; }
.shop_attributes tr,
.woocommerce-product-attributes-item { border-bottom: 1px solid var(--border); }
.shop_attributes th,
.woocommerce-product-attributes-item__label {
padding: 12px 16px 12px 0;
font-weight: 700; font-size: 13px;
color: var(--text2); text-align: left;
width: 180px;
}
.shop_attributes td,
.woocommerce-product-attributes-item__value {
padding: 12px 0; font-size: 14px;
color: var(--text2);
} .vs-toast {
position: fixed;
top: 100px; right: 24px;
width: min(380px, calc(100vw - 32px));
z-index: 700;
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
box-shadow: 0 24px 48px rgba(139,53,214,.25), 0 8px 16px rgba(0,0,0,.08);
padding: 18px 20px 18px 18px;
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 14px;
align-items: center;
transform: translateX(calc(100% + 32px));
opacity: 0;
transition: transform .45s var(--spring), opacity .35s var(--ease);
pointer-events: none;
}
.vs-toast.is-open {
transform: translateX(0);
opacity: 1;
pointer-events: auto;
}
.vs-toast-thumb {
width: 64px; height: 64px;
border-radius: 14px; overflow: hidden;
background: var(--bg2);
display: flex; align-items: center; justify-content: center;
font-size: 32px;
flex-shrink: 0;
}
.vs-toast-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vs-toast-info { min-width: 0; }
.vs-toast-status {
display: flex; align-items: center; gap: 6px;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 12px;
color: var(--mint);
letter-spacing: .04em;
text-transform: uppercase;
margin-bottom: 4px;
}
.vs-toast-name {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 15px; line-height: 1.3;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 8px;
}
.vs-toast-actions {
display: flex; gap: 8px;
flex-wrap: wrap;
}
.vs-toast-btn {
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 12px;
padding: 7px 14px; border-radius: 50px;
text-decoration: none;
transition: all .2s;
border: none; cursor: pointer;
}
.vs-toast-btn.primary {
background: var(--grad); color: #fff;
box-shadow: 0 4px 14px rgba(232,53,138,.3);
}
.vs-toast-btn.primary:hover { transform: translateY(-1px); color: #fff; }
.vs-toast-btn.ghost {
background: var(--bg2); color: var(--text2);
border: 1px solid var(--border);
}
.vs-toast-btn.ghost:hover { background: var(--rose); color: var(--pink); border-color: var(--pink); }
.vs-toast-close {
width: 28px; height: 28px; border-radius: 50%;
background: var(--bg2); border: 1px solid var(--border);
color: var(--muted); cursor: pointer;
font-size: 13px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.vs-toast-close:hover { background: var(--rose); color: var(--pink); }
.vs-toast-progress {
position: absolute; bottom: 0; left: 0;
height: 3px; width: 100%;
background: var(--grad);
border-radius: 0 0 var(--rad-lg) var(--rad-lg);
transform-origin: left center;
transform: scaleX(0);
}
.vs-toast.is-open .vs-toast-progress {
animation: vs-toast-progress 5s linear forwards;
}
@keyframes vs-toast-progress {
from { transform: scaleX(1); }
to   { transform: scaleX(0); }
}
@media (max-width: 560px) {
.vs-toast { top: auto; bottom: 16px; right: 8px; left: 8px; width: auto; }
} .vs-product-reviews {
position: relative; z-index: 2;
background: var(--bg2);
border-top: 1.5px solid var(--border);
border-bottom: 1.5px solid var(--border);
padding: 64px 0;
margin: 48px 0 0;
}
.vs-product-reviews-inner {
max-width: 1440px; margin: 0 auto;
padding: 0 80px;
}
.vs-reviews-head {
display: flex; align-items: center;
justify-content: space-between;
gap: 24px; flex-wrap: wrap;
margin-bottom: 32px;
}
.vs-reviews-head h2 {
font-family: var(--vs-font-display);
font-weight: 900;
font-size: clamp(28px, 3vw, 40px);
margin-top: 8px;
color: var(--text);
}
.vs-reviews-summary {
display: flex; align-items: center;
gap: 12px;
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: 50px;
padding: 10px 22px;
box-shadow: var(--shadow);
}
.vs-reviews-stars { color: var(--yellow); font-size: 18px; letter-spacing: 2px; }
.vs-reviews-summary strong {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 22px; color: var(--text);
}
.vs-reviews-count { font-size: 13px; color: var(--muted); font-weight: 600; } .vs-testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 32px;
}
.vs-testimonial {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 28px 28px 22px;
box-shadow: var(--shadow);
position: relative;
transition: transform .35s var(--ease), box-shadow .35s, border-color .25s;
display: flex; flex-direction: column;
gap: 18px;
min-height: 220px;
}
.vs-testimonial:hover {
transform: translateY(-6px);
border-color: var(--pink);
box-shadow: var(--shadow-lg);
}
.vs-testimonial::before {
content: ''; position: absolute;
inset: 0; pointer-events: none;
border-radius: var(--rad-lg);
background: var(--accent-grad, linear-gradient(135deg, transparent, transparent));
opacity: .08;
mask: linear-gradient(180deg, #000 0%, transparent 60%);
-webkit-mask: linear-gradient(180deg, #000 0%, transparent 60%);
}
.vs-testimonial.tg1 { --accent-grad: linear-gradient(135deg, var(--pink), var(--orange)); }
.vs-testimonial.tg2 { --accent-grad: linear-gradient(135deg, var(--purple), var(--lilac)); }
.vs-testimonial.tg3 { --accent-grad: linear-gradient(135deg, var(--mint), #5CE0D5); }
.vs-testimonial.tg4 { --accent-grad: linear-gradient(135deg, var(--yellow), var(--peach)); }
.vs-testimonial.tg5 { --accent-grad: linear-gradient(135deg, var(--lilac), var(--pink)); }
.vs-testimonial.tg6 { --accent-grad: linear-gradient(135deg, var(--mint), var(--purple)); }
.vs-testimonial-quote {
position: absolute;
top: 12px; right: 22px;
font-family: var(--vs-font-display);
font-size: 96px; font-weight: 900;
line-height: 1; color: var(--pink);
opacity: .14;
pointer-events: none;
}
.vs-testimonial-text {
font-size: 15px; line-height: 1.7;
color: var(--text); flex: 1;
font-style: italic;
font-family: var(--vs-font-display);
font-weight: 500;
margin: 0;
}
.vs-testimonial-foot {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 12px; align-items: center;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.vs-testimonial-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--accent-grad, var(--grad));
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--vs-font-display); font-weight: 800;
font-size: 18px;
}
.vs-testimonial-name {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 15px; color: var(--text);
}
.vs-testimonial-stars {
color: var(--yellow); font-size: 13px; letter-spacing: 1px;
margin-top: 2px;
}
.vs-testimonial-date {
font-size: 12px; color: var(--muted);
font-family: var(--vs-font-accent); font-weight: 700;
letter-spacing: .03em;
}
.vs-testimonial-empty {
background: var(--card-bg);
border: 1.5px dashed var(--border);
border-radius: var(--rad-lg);
padding: 48px 32px;
text-align: center;
margin-bottom: 32px;
}
.vs-testimonial-empty-icon {
font-size: 56px; line-height: 1;
display: block; margin-bottom: 14px;
animation: vs-icon-dance 3s ease-in-out infinite;
}
.vs-testimonial-empty h3 {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 22px; margin-bottom: 6px;
}
.vs-testimonial-empty p { color: var(--text2); font-size: 14px; }
.vs-reviews-form-wrap {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 8px 0;
box-shadow: var(--shadow);
}
.vs-reviews-form-toggle {
cursor: pointer;
}
.vs-reviews-form-toggle > summary {
list-style: none;
padding: 16px 28px;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 14px; color: var(--text2);
cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
}
.vs-reviews-form-toggle > summary::-webkit-details-marker { display: none; }
.vs-reviews-form-toggle > summary::after {
content: '▾'; font-size: 16px; color: var(--muted);
transition: transform .25s;
}
.vs-reviews-form-toggle[open] > summary::after { transform: rotate(180deg); }
.vs-reviews-form-toggle > summary:hover { color: var(--pink); }
.vs-reviews-body { max-width: 920px; padding: 8px 28px 28px; }
@media (max-width: 1100px) {
.vs-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.vs-testimonial-grid { grid-template-columns: 1fr; }
}
.vs-reviews-body #comments,
.vs-reviews-body #reviews {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 32px 36px;
box-shadow: var(--shadow);
margin-bottom: 24px;
}
.vs-reviews-body .commentlist {
list-style: none; padding: 0; margin: 0 0 24px;
display: flex; flex-direction: column; gap: 18px;
}
.vs-reviews-body .commentlist li {
background: var(--bg2);
border: 1px solid var(--border);
border-radius: var(--rad-md);
padding: 18px 22px;
}
.vs-reviews-body .commentlist .meta {
display: flex; align-items: center; gap: 10px;
margin-bottom: 8px;
font-size: 13px;
}
.vs-reviews-body .commentlist .meta strong { color: var(--text); }
.vs-reviews-body .commentlist .description p {
font-size: 14px; color: var(--text2); line-height: 1.7;
}
.vs-reviews-body #review_form_wrapper {
margin-top: 20px;
}
.vs-reviews-body #review_form input[type="text"],
.vs-reviews-body #review_form input[type="email"],
.vs-reviews-body #review_form textarea {
width: 100%;
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
font-size: 15px; color: var(--text);
font-family: var(--vs-font-body);
outline: none;
margin-bottom: 12px;
}
.vs-reviews-body #review_form .submit,
.vs-reviews-body #review_form #submit {
background: var(--grad); color: #fff;
border: none; cursor: pointer;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 14px; padding: 12px 28px;
border-radius: 14px;
box-shadow: 0 6px 24px rgba(232,53,138,.38);
} .related.products,
.upsells.products {
position: relative; z-index: 2;
max-width: 1200px; margin: 0 auto;
padding: 48px 80px 80px;
clear: both;
}
.related.products > h2,
.upsells.products > h2 {
font-family: var(--vs-font-display); font-weight: 900;
font-size: clamp(24px, 2.5vw, 36px);
margin-bottom: 28px;
color: var(--text);
}
.related.products ul.products,
.upsells.products ul.products,
.related.products .products,
.upsells.products .products,
.related.products .products.prod-grid,
.upsells.products .products.prod-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none;
width: 100%;
float: none !important;
}
.related.products ul.products li,
.upsells.products ul.products li,
.related.products .products > .product,
.upsells.products .products > .product,
.related.products .shop-card,
.upsells.products .shop-card {
min-width: 0;
width: 100% !important;
max-width: 100% !important;
float: none !important;
margin: 0 !important;
clear: none !important;
} .related.products .shop-card .card-img,
.upsells.products .shop-card .card-img {
height: auto !important;
aspect-ratio: 4 / 5;
width: 100%;
font-size: clamp(56px, 7vw, 96px);
}
.related.products .shop-card .card-emoji,
.upsells.products .shop-card .card-emoji {
font-size: clamp(56px, 7vw, 96px);
}
.related.products .shop-card .card-body,
.upsells.products .shop-card .card-body {
padding: 12px 14px 14px;
gap: 5px;
}
.related.products .shop-card .card-body h3,
.upsells.products .shop-card .card-body h3,
.related.products .shop-card .woocommerce-loop-product__title,
.upsells.products .shop-card .woocommerce-loop-product__title {
font-size: 18px;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.related.products .shop-card .card-body p,
.upsells.products .shop-card .card-body p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 4px 0 8px;
}
.related.products .shop-card .card-footer,
.upsells.products .shop-card .card-footer {
margin-top: auto;
gap: 12px;
}
.related.products .shop-card .cart-add-btn,
.upsells.products .shop-card .cart-add-btn {
flex: 1;
text-align: center;
justify-content: center;
}
@media (max-width: 1100px) {
.related.products ul.products,
.upsells.products ul.products,
.related.products .products,
.upsells.products .products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 760px) {
.related.products ul.products,
.upsells.products ul.products,
.related.products .products,
.upsells.products .products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
.related.products ul.products,
.upsells.products ul.products,
.related.products .products,
.upsells.products .products { grid-template-columns: 1fr !important; }
.related.products .shop-card .card-img,
.upsells.products .shop-card .card-img { aspect-ratio: 4 / 5; }
} .free-ship-bar {
background: linear-gradient(135deg, var(--mint), #5CE0D5);
color: #0D4A40;
padding: 10px 16px; border-radius: 14px;
margin-bottom: 18px;
display: flex; align-items: center; gap: 10px;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 13px;
overflow: hidden; position: relative;
}
.free-ship-bar.is-complete {
background: linear-gradient(135deg, #FFD93D, #FFB38A);
color: #151519;
}
.free-ship-bar-icon { font-size: 18px; }
.free-ship-bar-track {
flex: 1; height: 6px;
background: rgba(255, 255, 255, .55);
border-radius: 99px; overflow: hidden;
}
.free-ship-bar-fill {
height: 100%; background: var(--grad);
border-radius: 99px;
transition: width .5s var(--ease);
width: 0%;
}
.free-ship-bar-text { font-size: 12px; opacity: .85; min-width: 60px; text-align: right; } .woocommerce-cart-form { padding-top: 12px; }
.cart-items-list {
display: flex; flex-direction: column;
gap: 14px;
}
.cart-item-card {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-md);
padding: 18px;
display: grid;
grid-template-columns: 96px 1fr;
gap: 18px;
box-shadow: var(--shadow);
transition: transform .25s var(--ease), border-color .2s, box-shadow .25s;
}
.cart-item-card:hover {
transform: translateY(-2px);
border-color: rgba(232,53,138,.25);
box-shadow: var(--shadow-lg);
}
.cart-item-thumb a { display: block; }
.cart-item-thumb img,
.cart-item-thumb-img {
width: 96px !important; height: 96px;
object-fit: cover; border-radius: 14px;
display: block;
}
.cart-item-info { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cart-item-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px;
}
.cart-item-title {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 17px; line-height: 1.3;
color: var(--text); text-decoration: none;
}
.cart-item-title:hover { color: var(--pink); }
.cart-item-remove {
width: 32px; height: 32px; border-radius: 50%;
background: var(--bg2);
color: var(--muted);
display: inline-flex; align-items: center; justify-content: center;
font-size: 14px;
text-decoration: none;
transition: all .2s;
flex-shrink: 0;
}
.cart-item-remove:hover { background: var(--rose); color: var(--pink); }
[data-theme="dark"] .cart-item-remove:hover { background: rgba(232,53,138,.15); }
.cart-item-foot {
display: flex; align-items: center;
gap: 16px; flex-wrap: wrap;
}
.cart-item-price {
font-size: 14px; color: var(--text2); font-weight: 600;
font-family: var(--vs-font-body);
}
.cart-item-subtotal {
margin-left: auto;
font-family: var(--vs-font-display); font-weight: 800;
font-size: 18px;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
} .cart-item-foot .cart-item-qty {
flex: 0 0 auto;
width: 200px; max-width: 100%;
}
.cart-item-foot .cart-item-qty .quantity.vs-qty {
display: flex; width: 100%;
}
.cart-item-foot .cart-item-qty .quantity.vs-qty .qty-input {
flex: 1 1 auto; width: auto; min-width: 0;
}
.cart-actions {
margin-top: 24px;
display: flex; gap: 12px; align-items: center;
flex-wrap: wrap;
}
.cart-actions .coupon {
display: flex; align-items: center; gap: 4px;
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: 50px;
padding: 5px 5px 5px 4px;
flex: 1 1 360px;
max-width: 400px;
transition: border-color .2s, box-shadow .2s;
}
.cart-actions .coupon:focus-within {
border-color: var(--pink);
box-shadow: 0 0 0 4px rgba(232, 53, 138, .12);
}
.cart-actions .coupon .coupon-icon {
font-size: 18px; line-height: 1;
padding: 0 4px 0 12px; flex: 0 0 auto;
}
.cart-actions .coupon input[type="text"] {
flex: 1 1 auto; min-width: 0;
border: none; background: transparent;
padding: 11px 10px; outline: none;
font-size: 14px; color: var(--text);
font-family: var(--vs-font-body);
}
.cart-actions .coupon input[type="text"]::placeholder {
color: var(--muted); opacity: 1;
}
.cart-actions .coupon .button {
flex: 0 0 auto;
padding: 11px 24px !important;
border-radius: 50px !important;
font-size: 13px !important;
font-weight: 700 !important;
font-family: var(--vs-font-accent) !important;
background: var(--grad) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 6px 16px rgba(232, 53, 138, .30) !important;
transition: transform .2s, box-shadow .2s !important;
white-space: nowrap;
}
.cart-actions .coupon .button:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(232, 53, 138, .42) !important;
}
.cart-actions .vs-update-cart {
background: var(--bg2) !important;
color: var(--text2) !important;
border: 1.5px solid var(--border) !important;
box-shadow: none !important;
}
.cart-actions .vs-update-cart:hover {
background: var(--rose) !important;
color: var(--pink) !important;
border-color: var(--pink) !important;
transform: translateY(-1px);
}
.cart-continue {
margin-left: auto;
font-size: 14px; color: var(--muted);
font-weight: 600; text-decoration: none;
}
.cart-continue:hover { color: var(--pink); } .cart-totals-head {
display: flex; align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.cart-totals-icon {
font-size: 26px;
animation: vs-icon-dance 3s ease-in-out infinite;
}
.cart-trust-row {
display: flex; gap: 6px; flex-wrap: wrap;
margin: 14px 0 4px;
}
.cart-trust-chip {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700;
padding: 5px 10px;
border-radius: 50px;
background: var(--bg2);
color: var(--text2);
border: 1px solid var(--border);
} .woocommerce-cart .site-main {
max-width: 1440px; margin: 0 auto;
padding: var(--vs-nav-clear) 80px 80px;
position: relative; z-index: 2;
}
.cart-layout {
display: grid; grid-template-columns: 1fr 360px;
gap: 40px; align-items: start;
}
.cart-main { min-width: 0; }
table.shop_table.cart {
width: 100%; border-collapse: collapse;
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-md);
overflow: hidden;
box-shadow: var(--shadow);
}
.shop_table.cart thead { background: var(--bg2); }
.shop_table.cart th,
.shop_table.cart td {
padding: 16px 18px;
text-align: left;
border-bottom: 1.5px solid var(--border);
font-size: 14px;
vertical-align: middle;
}
.shop_table.cart tbody tr:last-child td { border-bottom: none; }
.shop_table.cart th {
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 12px; letter-spacing: .04em;
text-transform: uppercase;
color: var(--text2);
}
.shop_table.cart .product-thumbnail img {
width: 64px; height: 64px; border-radius: 12px;
object-fit: cover;
}
.shop_table.cart .product-name a {
font-family: var(--vs-font-display); font-weight: 700;
color: var(--text); text-decoration: none;
font-size: 15px;
}
.shop_table.cart .product-name a:hover { color: var(--pink); }
.shop_table.cart .product-remove a.remove,
a.remove {
width: 28px; height: 28px; border-radius: 50%;
background: var(--rose);
color: var(--pink) !important;
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px; line-height: 1;
text-decoration: none; font-weight: 700;
transition: all .2s;
}
a.remove:hover { background: var(--pink); color: #fff !important; }
[data-theme="dark"] a.remove { background: rgba(232, 53, 138, .15); }
.actions .button,
.coupon .button,
.actions input[type="submit"] {
background: var(--grad) !important; color: #fff !important;
border: none !important; cursor: pointer;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 14px; padding: 11px 22px;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(232, 53, 138, .3);
transition: transform .2s;
}
.actions .button:hover { transform: translateY(-2px); }
.coupon { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.coupon input[type="text"] {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: 12px; padding: 10px 14px;
font-size: 14px; color: var(--text); outline: none;
font-family: var(--vs-font-body);
}
.coupon input[type="text"]:focus { border-color: var(--pink); }
.cart_totals,
.cart-summary {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 24px 26px;
box-shadow: var(--shadow-lg);
position: sticky; top: 100px;
}
.cart_totals h2 {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 22px; margin-bottom: 16px; color: var(--text);
}
.cart_totals .shop_table { width: 100%; border-collapse: collapse; }
.cart_totals .shop_table th,
.cart_totals .shop_table td {
padding: 10px 0;
border-bottom: 1px solid var(--border);
font-size: 14px; color: var(--text2);
}
.cart_totals .order-total td .woocommerce-Price-amount {
font-family: var(--vs-font-display); font-weight: 900;
font-size: 22px;
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.wc-proceed-to-checkout { margin-top: 18px; padding: 0; }
.wc-proceed-to-checkout .checkout-button.button,
.wc-proceed-to-checkout a {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%;
background: var(--grad); color: #fff;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 15px; padding: 14px;
border-radius: 14px; text-decoration: none;
box-shadow: 0 6px 24px rgba(232, 53, 138, .38);
transition: transform .2s, box-shadow .2s;
}
.wc-proceed-to-checkout a:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(232, 53, 138, .55); } .cart-empty,
.woocommerce-cart .cart-empty {
max-width: 540px; margin: 0 auto;
text-align: center; padding: 130px 24px 80px;
position: relative; z-index: 2;
}
.cart-empty .empty-icon {
font-size: 96px; display: inline-block;
margin-bottom: 20px;
animation: vs-icon-dance 3s ease-in-out infinite;
}
.cart-empty h2 {
font-family: var(--vs-font-display); font-weight: 900;
font-size: 36px; margin-bottom: 10px; color: var(--text);
}
.cart-empty p {
color: var(--text2); margin-bottom: 24px;
font-size: 16px; line-height: 1.7;
} .cart-overlay {
position: fixed; inset: 0; z-index: 250;
background: rgba(13, 8, 22, .55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0; pointer-events: none;
transition: opacity .3s ease;
}
.cart-overlay.is-open { opacity: 1; pointer-events: all; }
.mini-cart-drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: min(96vw, 420px);
background: var(--bg);
z-index: 260;
display: flex; flex-direction: column;
transform: translateX(105%);
transition: transform .4s var(--ease);
box-shadow: -16px 0 48px rgba(0, 0, 0, .15);
}
.mini-cart-drawer.is-open { transform: translateX(0); }
.mini-cart-head {
padding: 22px 24px 16px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1.5px solid var(--border);
}
.mini-cart-head h3 {
font-family: var(--vs-font-display);
font-weight: 800; font-size: 22px;
color: var(--text);
}
.mini-cart-close {
width: 36px; height: 36px; border-radius: 50%;
background: var(--bg2); border: 1.5px solid var(--border);
color: var(--text2); cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
transition: all .2s;
}
.mini-cart-close:hover { background: var(--rose); color: var(--pink); border-color: var(--pink); }
.mini-cart-body { flex: 1; overflow-y: auto; padding: 18px 22px; }
.mini-cart-body .free-ship-bar { margin-bottom: 18px; }
ul.cart_list,
.mini-cart-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 14px;
}
ul.cart_list li,
.mini-cart-list li {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 14px; align-items: center;
padding: 14px;
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-md);
position: relative;
}
ul.cart_list li img,
.mini-cart-thumb img {
width: 64px !important; height: 64px;
object-fit: cover; border-radius: 12px;
float: none !important; margin: 0 !important;
}
ul.cart_list li a:not(.remove),
.mini-cart-title {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 15px; color: var(--text);
text-decoration: none; line-height: 1.3;
display: block;
}
ul.cart_list li a:not(.remove):hover { color: var(--pink); }
.mini-cart-meta,
ul.cart_list li .quantity {
font-size: 12px; color: var(--muted);
margin-top: 4px;
}
.mini-cart-price {
font-family: var(--vs-font-accent); font-weight: 700;
color: var(--pink); font-size: 14px;
}
ul.cart_list li a.remove {
position: absolute; top: 6px; right: 6px;
width: 24px; height: 24px;
font-size: 13px;
}
.mini-cart-foot {
padding: 18px 24px 24px;
border-top: 1.5px solid var(--border);
background: var(--bg);
display: flex; flex-direction: column; gap: 12px;
}
.mini-cart-subtotal,
.woocommerce-mini-cart__total {
display: flex; justify-content: space-between; align-items: baseline;
font-family: var(--vs-font-accent);
font-weight: 700; font-size: 14px;
color: var(--text2);
margin: 0;
padding: 0; border: none;
}
.mini-cart-subtotal strong,
.woocommerce-mini-cart__total strong {
font-family: var(--vs-font-display); font-weight: 900;
font-size: 20px;
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.mini-cart-actions,
.woocommerce-mini-cart__buttons {
display: flex; flex-direction: column; gap: 10px;
}
.mini-cart-actions .btn-primary,
.mini-cart-actions .btn-outline,
.woocommerce-mini-cart__buttons .button {
width: 100%; justify-content: center;
} .woocommerce-checkout .site-main {
max-width: 1440px; margin: 0 auto;
padding: var(--vs-nav-clear) 80px 80px;
position: relative; z-index: 2;
}
form.checkout {
display: grid; grid-template-columns: 1.4fr 1fr;
gap: 40px; align-items: start;
}
form.checkout #customer_details {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 28px 30px;
box-shadow: var(--shadow);
}
form.checkout h3 {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 22px; margin: 0 0 16px;
color: var(--text);
}
form.checkout .form-row { margin-bottom: 14px; }
form.checkout label {
display: block;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 12px; letter-spacing: .04em;
text-transform: uppercase;
color: var(--text2); margin-bottom: 6px;
}
form.checkout input[type="text"],
form.checkout input[type="email"],
form.checkout input[type="tel"],
form.checkout input[type="password"],
form.checkout textarea,
form.checkout select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.select2-container--default .select2-selection--single {
width: 100%;
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
font-size: 15px; color: var(--text);
font-family: var(--vs-font-body);
outline: none;
transition: border-color .2s, box-shadow .2s;
height: auto;
}
form.checkout input:focus,
form.checkout textarea:focus,
form.checkout select:focus {
border-color: var(--pink);
box-shadow: 0 0 0 3px rgba(232, 53, 138, .12);
}
.select2-container--default .select2-selection--single { padding: 6px 10px; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--text); line-height: 32px;
}
form.checkout .woocommerce-checkout-review-order {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 28px 30px;
box-shadow: var(--shadow-lg);
position: sticky; top: 100px;
}
form.checkout .woocommerce-checkout-review-order h3 {
font-size: 18px; margin-bottom: 14px;
}
form.checkout .woocommerce-checkout-review-order table {
width: 100%; border-collapse: collapse;
border: none !important; }
form.checkout .woocommerce-checkout-review-order th,
form.checkout .woocommerce-checkout-review-order td {
padding: 10px 0;
border: none; border-bottom: 1px solid var(--border); font-size: 14px;
}
form.checkout .woocommerce-checkout-review-order tr:last-child th,
form.checkout .woocommerce-checkout-review-order tr:last-child td {
border-bottom: none; }
form.checkout .order-total .woocommerce-Price-amount {
font-family: var(--vs-font-display); font-weight: 900;
font-size: 22px;
background: var(--grad);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
form.checkout #place_order,
form.checkout .place-order .button {
width: 100%;
background: var(--grad); color: #fff;
border: none; cursor: pointer;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 16px; padding: 14px;
border-radius: 14px;
box-shadow: 0 8px 28px rgba(232, 53, 138, .4);
margin-top: 16px;
transition: transform .2s, box-shadow .2s;
}
form.checkout #place_order:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(232, 53, 138, .55);
}
#payment ul.payment_methods {
list-style: none; padding: 0; margin: 0 0 16px;
display: flex; flex-direction: column; gap: 8px;
}
#payment ul.payment_methods li {
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
cursor: pointer;
transition: border-color .2s, background .2s;
}
#payment ul.payment_methods li:hover { border-color: var(--pink); }
#payment ul.payment_methods li.selected {
border-color: var(--pink);
background: var(--rose);
}
[data-theme="dark"] #payment ul.payment_methods li.selected { background: rgba(232,53,138,.12); }
.woocommerce-terms-and-conditions-wrapper { margin: 14px 0; font-size: 13px; } .woocommerce-notices-wrapper { margin: 12px 0; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-md);
padding: 14px 18px 14px 50px;
margin: 0 0 14px;
position: relative;
font-size: 14px; line-height: 1.55; color: var(--text);
list-style: none;
}
.woocommerce-message { border-color: var(--mint); }
.woocommerce-message::before { content: '✅'; position: absolute; top: 12px; left: 18px; font-size: 18px; }
.woocommerce-info { border-color: var(--purple); }
.woocommerce-info::before { content: 'ℹ️'; position: absolute; top: 12px; left: 18px; font-size: 18px; }
.woocommerce-error { border-color: var(--pink); background: var(--rose); }
[data-theme="dark"] .woocommerce-error { background: rgba(232,53,138,.12); }
.woocommerce-error::before { content: '⚠️'; position: absolute; top: 12px; left: 18px; font-size: 18px; }
.woocommerce-error li { margin: 0; padding: 0; }
.woocommerce-message a.button,
.woocommerce-info a.button {
background: transparent !important; color: var(--pink) !important;
border: none !important; padding: 0 8px !important;
font-weight: 700; box-shadow: none !important;
} .thankyou-section {
max-width: 1100px; margin: 0 auto;
padding: 32px 80px 80px;
position: relative; z-index: 2;
}
.thankyou-inner { display: flex; flex-direction: column; gap: 32px; }
.thankyou-state {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 56px 48px;
box-shadow: var(--shadow-lg);
text-align: center;
}
.thankyou-state.thankyou-success {
background:
radial-gradient(circle at 20% 20%, rgba(255,217,61,.18), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(52,217,181,.16), transparent 50%),
var(--card-bg);
}
.thankyou-icon {
font-size: 88px; line-height: 1;
display: inline-block; margin-bottom: 16px;
animation: vs-icon-dance 3s ease-in-out infinite;
}
.thankyou-state h2 {
font-family: var(--vs-font-display);
font-weight: 900; font-size: clamp(28px, 3.5vw, 44px);
margin-bottom: 10px;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.thankyou-state p {
color: var(--text2); font-size: 17px;
line-height: 1.7;
max-width: 540px; margin: 0 auto;
}
.order-summary-grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 20px;
}
.order-summary-card {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 28px 30px;
box-shadow: var(--shadow);
}
.order-summary-card h3 {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 20px; margin-bottom: 16px;
}
.order-meta-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.order-meta-list li {
display: flex; justify-content: space-between;
align-items: baseline;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
font-size: 14px;
}
.order-meta-list li:last-child { border-bottom: none; padding-bottom: 0; }
.order-meta-list .meta-label { color: var(--muted); font-weight: 600; }
.order-meta-list strong { color: var(--text); font-weight: 700; }
.order-total-amount {
font-family: var(--vs-font-display); font-weight: 900 !important;
font-size: 20px;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.next-steps {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 14px;
counter-reset: vs-step;
}
.next-steps li {
display: flex; align-items: flex-start; gap: 14px;
font-size: 14px; color: var(--text2); line-height: 1.6;
}
.next-steps .step-num {
width: 32px; height: 32px; border-radius: 50%;
background: var(--grad); color: #fff;
font-family: var(--vs-font-accent); font-weight: 800;
font-size: 14px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(232,53,138,.3);
}
.thankyou-actions {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
margin-top: 24px;
}
.thankyou-details-wrap {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 28px 32px;
box-shadow: var(--shadow);
}
.thankyou-details-title {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 20px; margin: 0 0 18px; color: var(--heading);
}
.thankyou-details-wrap .woocommerce-order-details__title,
.thankyou-details-wrap .woocommerce-column__title {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 17px; margin: 22px 0 10px; color: var(--heading);
}
.thankyou-details-wrap table.shop_table {
width: 100%; border-collapse: collapse; margin: 0 0 10px;
}
.thankyou-details-wrap table.shop_table th,
.thankyou-details-wrap table.shop_table td {
padding: 10px 6px; text-align: left;
border-bottom: 1px solid var(--border);
font-size: 14px;
}
.thankyou-details-wrap .woocommerce-customer-details address {
font-style: normal; line-height: 1.7; font-size: 14px;
padding: 14px 16px; background: var(--bg2);
border-radius: var(--rad-sm); border: 1px solid var(--border);
}
@media (max-width: 760px) {
.thankyou-section { padding: 24px 24px 64px; }
.thankyou-state { padding: 40px 24px; }
.order-summary-grid { grid-template-columns: 1fr; }
}  .vs-flow-bar {
position: relative; z-index: 2;
background: var(--card-bg);
border-bottom: 1.5px solid var(--border);
box-shadow: 0 4px 20px rgba(139, 53, 214, .06);
margin-top: 46px; }
.vs-flow-bar-inner {
max-width: 1440px;
margin: 0 auto;
padding: 0 32px;
height: 50px;
display: flex; align-items: center;
gap: 16px;
}
.vs-flow-back {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--bg2);
border: 1.5px solid var(--border);
color: var(--text2);
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px; text-decoration: none;
transition: all .2s;
flex-shrink: 0;
}
.vs-flow-back:hover { background: var(--rose); border-color: var(--pink); color: var(--pink); }
.vs-flow-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.vs-flow-label {
font-family: var(--vs-font-display);
font-weight: 800;
font-size: 18px;
color: var(--text);
letter-spacing: -0.005em;
flex-shrink: 0;
}
.vs-flow-meta {
color: var(--muted);
font-size: 13px; font-weight: 600;
font-family: var(--vs-font-accent);
letter-spacing: .02em;
margin-left: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vs-flow-meta .woocommerce-Price-amount {
color: var(--pink);
font-weight: 700;
}
.vs-flow-help {
margin-left: auto;
font-size: 13px;
font-family: var(--vs-font-accent); font-weight: 700;
color: var(--text2);
text-decoration: none;
padding: 6px 14px;
border-radius: 50px;
background: var(--bg2);
border: 1.5px solid var(--border);
transition: all .2s;
white-space: nowrap;
}
.vs-flow-help:hover { background: var(--rose); color: var(--pink); border-color: var(--pink); }
@media (max-width: 640px) {
.vs-flow-bar-inner { padding: 0 16px; gap: 10px; }
.vs-flow-meta { display: none; }
.vs-flow-label { font-size: 15px; }
} .vs-flow-content {
max-width: 1440px;
margin: 0 auto;
padding: 28px 32px 80px;
position: relative; z-index: 2;
}
.vs-flow-content > .entry-content {
max-width: none;
padding: 0;
margin: 0;
}
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
max-width: none;
margin: 0;
padding: 0;
position: relative; z-index: 2;
width: 100%;
}
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout.alignwide,
.wp-block-woocommerce-cart.alignfull,
.wp-block-woocommerce-checkout.alignfull { max-width: none; margin-left: 0; margin-right: 0; } .wc-block-cart-items {
background: transparent !important;
border: none !important;
}
.wc-block-cart-items thead { display: none; }
.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart-item {
background: var(--card-bg) !important;
border: 1.5px solid var(--border) !important;
border-radius: var(--rad-md) !important;
padding: 18px !important;
margin-bottom: 14px !important;
box-shadow: var(--shadow);
transition: transform .25s var(--ease), border-color .2s, box-shadow .25s;
}
.wc-block-cart-items .wc-block-cart-items__row:hover,
.wc-block-cart-item:hover {
transform: translateY(-2px);
border-color: rgba(232,53,138,.25);
box-shadow: var(--shadow-lg);
}
.wc-block-cart-item__image img,
.wc-block-cart-items td.wc-block-cart-item__image img {
width: 96px !important; height: 96px !important;
object-fit: cover !important;
border-radius: 14px !important;
}
.wc-block-cart-item__product .wc-block-components-product-name,
.wc-block-cart-item__product-name a {
font-family: var(--vs-font-display) !important;
font-weight: 700 !important;
font-size: 17px !important;
color: var(--text) !important;
text-decoration: none !important;
line-height: 1.3 !important;
}
.wc-block-cart-item__product-name a:hover { color: var(--pink) !important; }
.wc-block-components-product-price {
font-family: var(--vs-font-display) !important;
font-weight: 700 !important;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
} .wc-block-components-quantity-selector {
background: var(--bg2) !important;
border: 1.5px solid var(--border) !important;
border-radius: 14px !important;
overflow: hidden;
}
.wc-block-components-quantity-selector__button {
background: transparent !important;
color: var(--text2) !important;
border: none !important;
width: 40px !important; height: 44px !important;
font-size: 18px !important;
cursor: pointer;
}
.wc-block-components-quantity-selector__button:hover {
background: var(--rose) !important;
color: var(--pink) !important;
}
[data-theme="dark"] .wc-block-components-quantity-selector__button:hover {
background: rgba(232,53,138,.12) !important;
}
.wc-block-components-quantity-selector__input {
background: transparent !important;
border: none !important;
color: var(--text) !important;
font-family: var(--vs-font-accent) !important;
font-weight: 700 !important;
font-size: 15px !important;
text-align: center !important;
} .wc-block-cart-item__remove-link {
color: var(--muted) !important;
font-size: 13px !important;
text-decoration: none !important;
background: var(--bg2) !important;
padding: 4px 10px !important;
border-radius: 50px !important;
transition: all .2s;
}
.wc-block-cart-item__remove-link:hover {
background: var(--rose) !important;
color: var(--pink) !important;
} .wc-block-components-totals-wrapper,
.wc-block-cart__totals-title,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block {
background: var(--card-bg) !important;
border: 1.5px solid var(--border) !important;
border-radius: var(--rad-lg) !important;
padding: 24px 28px !important;
box-shadow: var(--shadow-lg);
}
.wc-block-components-totals-item {
font-size: 14px !important;
color: var(--text2) !important;
padding: 8px 0 !important;
border-bottom: 1px solid var(--border) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item__price {
font-family: var(--vs-font-display) !important;
font-weight: 900 !important;
font-size: 22px !important;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
} .wp-block-woocommerce-empty-cart-block {
text-align: center;
padding: 72px 32px 64px;
background:
radial-gradient(circle at 30% 20%, rgba(255,217,61,.18), transparent 45%),
radial-gradient(circle at 75% 78%, rgba(232,53,138,.14), transparent 50%),
var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
box-shadow: var(--shadow-lg);
max-width: 720px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.wp-block-woocommerce-empty-cart-block::before {
content: '🛒';
display: block;
font-size: 96px; line-height: 1;
margin-bottom: 18px;
animation: vs-icon-dance 3s ease-in-out infinite;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title,
.wp-block-woocommerce-empty-cart-block .wp-block-heading.with-empty-cart-icon,
.wp-block-woocommerce-empty-cart-block .wp-block-heading {
font-family: var(--vs-font-display) !important;
font-weight: 900 !important;
font-size: clamp(28px, 3vw, 40px) !important;
color: var(--text) !important;
text-align: center !important;
margin: 0 auto 14px !important;
max-width: 540px;
-webkit-text-fill-color: var(--text);
background: none;
}
.wp-block-woocommerce-empty-cart-block .wp-block-heading.with-empty-cart-icon::before {
content: ''; }
.wp-block-woocommerce-empty-cart-block p {
color: var(--text2) !important;
font-size: 17px !important;
line-height: 1.7;
max-width: 420px;
margin: 0 auto 28px !important;
text-align: center;
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator {
display: none !important;
}
.wp-block-woocommerce-empty-cart-block .wp-block-button .wp-block-button__link {
background: var(--grad) !important;
color: #fff !important;
border-radius: 14px !important;
font-family: var(--vs-font-accent) !important;
font-weight: 700 !important;
padding: 14px 32px !important;
box-shadow: 0 8px 24px rgba(232,53,138,.4) !important;
}
.wp-block-woocommerce-empty-cart-block .wp-block-product-new,
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new,
.wp-block-woocommerce-empty-cart-block .wc-block-grid {
margin-top: 48px;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
list-style: none;
padding: 0;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: var(--rad-md);
padding: 14px;
text-align: center;
transition: transform .25s var(--ease), border-color .2s, box-shadow .25s;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover {
transform: translateY(-3px);
border-color: var(--pink);
box-shadow: var(--shadow);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
border-radius: 12px; overflow: hidden;
margin-bottom: 10px;
aspect-ratio: 1;
background: var(--bg);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img {
width: 100%; height: 100%; object-fit: cover;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
font-family: var(--vs-font-display) !important;
font-weight: 700 !important;
font-size: 14px !important;
color: var(--text) !important;
margin-bottom: 6px;
min-height: 0 !important;
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
font-family: var(--vs-font-display) !important;
font-weight: 800 !important;
font-size: 16px !important;
color: var(--pink) !important;
background: none;
-webkit-text-fill-color: var(--pink);
}
.wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
background: var(--grad) !important;
color: #fff !important;
font-family: var(--vs-font-accent) !important;
font-size: 12px !important;
padding: 8px 14px !important;
border-radius: 10px !important;
width: 100%;
}
@media (max-width: 960px) {
.wp-block-woocommerce-empty-cart-block .wc-block-grid__products { grid-template-columns: repeat(2, 1fr); }
}  .vs-flow-content .wp-block-woocommerce-checkout-contact-information-block,
.vs-flow-content .wp-block-woocommerce-checkout-shipping-address-block,
.vs-flow-content .wp-block-woocommerce-checkout-billing-address-block,
.vs-flow-content .wp-block-woocommerce-checkout-shipping-method-block,
.vs-flow-content .wp-block-woocommerce-checkout-pickup-options-block,
.vs-flow-content .wp-block-woocommerce-checkout-payment-block,
.vs-flow-content .wp-block-woocommerce-checkout-order-note-block,
.vs-flow-content .wp-block-woocommerce-checkout-totals-block,
.vs-flow-content .wp-block-woocommerce-checkout-order-summary-block,
.vs-flow-content .wp-block-woocommerce-cart-order-summary-block {
background: var(--card-bg) !important;
border: 1.5px solid var(--border) !important;
border-radius: 18px !important;
padding: 28px 32px !important;
margin: 0 0 16px !important;
box-shadow: 0 1px 0 rgba(139,53,214,.04), 0 8px 24px rgba(139,53,214,.06) !important;
transition: border-color .2s ease;
}
.vs-flow-content .wc-block-components-checkout-step:hover,
.vs-flow-content .wp-block-woocommerce-checkout-shipping-address-block:hover {
border-color: rgba(232,53,138,.18) !important;
} .vs-flow-content .wc-block-components-checkout-step__heading,
.vs-flow-content .wc-block-components-title,
.vs-flow-content .wp-block-woocommerce-cart-order-summary-heading-block,
.vs-flow-content .wc-block-components-checkout-step__title {
font-family: var(--vs-font-display) !important;
font-weight: 800 !important;
font-size: 20px !important;
color: var(--text) !important;
letter-spacing: -0.005em !important;
margin: 0 0 6px !important;
padding: 0 !important;
}
.vs-flow-content .wc-block-components-checkout-step__description {
color: var(--muted) !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.55 !important;
margin: 0 0 22px !important;
font-family: var(--vs-font-body) !important;
}
.vs-flow-content .wc-block-components-checkout-step__title-content {
color: var(--text2) !important;
font-size: 13px !important;
font-weight: 600 !important;
font-family: var(--vs-font-accent) !important;
letter-spacing: .04em !important;
} .vs-flow-content .wc-block-components-checkout-step__container::before {
display: none;
} .vs-flow-content .wc-block-components-text-input label,
.vs-flow-content .wc-block-components-textarea label,
.vs-flow-content .wc-block-components-checkbox__label,
.vs-flow-content .wc-block-components-radio-control__option-label,
.vs-flow-content label {
font-family: var(--vs-font-accent) !important;
font-weight: 700 !important;
font-size: 11.5px !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: var(--muted) !important;
} .vs-flow-content .wc-block-components-text-input,
.vs-flow-content .wc-block-components-textarea {
margin-bottom: 14px !important;
}
.vs-flow-content .wc-block-components-text-input input,
.vs-flow-content .wc-block-components-textarea textarea,
.vs-flow-content input[type="text"],
.vs-flow-content input[type="email"],
.vs-flow-content input[type="tel"],
.vs-flow-content input[type="password"],
.vs-flow-content input[type="number"],
.vs-flow-content input.wc-block-components-text-input__input {
background: var(--bg2) !important;
border: 1.5px solid var(--border) !important;
border-radius: 12px !important;
padding: 16px 16px !important;
font-size: 15px !important;
font-family: var(--vs-font-body) !important;
color: var(--text) !important;
width: 100% !important;
height: auto !important;
transition: border-color .2s, box-shadow .2s, background .2s !important;
box-shadow: none !important;
}
.vs-flow-content .wc-block-components-text-input input:hover,
.vs-flow-content .wc-block-components-textarea textarea:hover {
border-color: var(--border2) !important;
background: var(--card-bg) !important;
}
.vs-flow-content .wc-block-components-text-input input:focus,
.vs-flow-content .wc-block-components-textarea textarea:focus,
.vs-flow-content input:focus {
border-color: var(--pink) !important;
background: var(--card-bg) !important;
box-shadow: 0 0 0 4px rgba(232,53,138,.12) !important;
outline: none !important;
} .vs-flow-content .wc-block-components-text-input.is-active input,
.vs-flow-content .wc-block-components-text-input input:focus,
.vs-flow-content .wc-block-components-text-input input:not(:placeholder-shown) {
padding-top: 22px !important;
padding-bottom: 10px !important;
}
.vs-flow-content .wc-block-components-text-input label,
.vs-flow-content .wc-block-components-text-input.is-active label,
.vs-flow-content .wc-block-components-text-input input:not(:placeholder-shown) ~ label {
font-size: 10px !important;
top: 8px !important;
left: 16px !important;
color: var(--muted) !important;
transform: none !important;
} .vs-flow-content .has-error .wc-block-components-text-input input,
.vs-flow-content .has-error input {
border-color: var(--pink) !important;
background: var(--rose) !important;
}
[data-theme="dark"] .vs-flow-content .has-error input { background: rgba(232,53,138,.12) !important; }
.vs-flow-content .wc-block-components-validation-error {
color: var(--pink) !important;
font-size: 12px !important;
font-weight: 600 !important;
margin-top: 6px !important;
} .vs-flow-content select,
.vs-flow-content .wc-block-components-combobox,
.vs-flow-content .wc-block-components-state-input,
.vs-flow-content .wc-block-components-country-input {
margin-bottom: 14px !important;
}
.vs-flow-content select,
.vs-flow-content .wc-block-components-combobox-control,
.vs-flow-content .components-combobox-control__suggestions-container,
.vs-flow-content .wc-block-components-form select {
background: var(--bg2) !important;
border: 1.5px solid var(--border) !important;
border-radius: 12px !important;
padding: 0 !important;
transition: border-color .2s, box-shadow .2s, background .2s !important;
min-height: 56px !important;
display: flex !important;
align-items: stretch !important;
position: relative;
box-shadow: none !important;
}
.vs-flow-content select {
appearance: none !important;
-webkit-appearance: none !important;
background-image:
linear-gradient(45deg, transparent 50%, var(--text2) 50%),
linear-gradient(135deg, var(--text2) 50%, transparent 50%) !important;
background-position:
calc(100% - 22px) calc(50% + 2px),
calc(100% - 17px) calc(50% + 2px) !important;
background-size: 5px 5px, 5px 5px !important;
background-repeat: no-repeat !important;
padding: 16px 44px 16px 16px !important;
font-size: 15px !important;
font-family: var(--vs-font-body) !important;
color: var(--text) !important;
cursor: pointer !important;
}
.vs-flow-content select:hover,
.vs-flow-content .wc-block-components-combobox-control:hover {
border-color: var(--border2) !important;
background-color: var(--card-bg) !important;
}
.vs-flow-content select:focus,
.vs-flow-content .wc-block-components-combobox-control:focus-within {
border-color: var(--pink) !important;
background-color: var(--card-bg) !important;
box-shadow: 0 0 0 4px rgba(232,53,138,.12) !important;
outline: none !important;
}
.vs-flow-content .components-combobox-control__suggestions-container {
min-height: auto !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.vs-flow-content .components-form-token-field__input-container,
.vs-flow-content .components-combobox-control__suggestions-container .components-form-token-field__input-container {
background: transparent !important;
border: none !important;
padding: 0 !important;
min-height: auto !important;
}
.vs-flow-content .components-combobox-control__suggestions-container input {
background: transparent !important;
border: none !important;
padding: 16px 44px 16px 16px !important;
font-size: 15px !important;
color: var(--text) !important;
box-shadow: none !important;
min-height: 54px !important;
width: 100% !important;
}
.vs-flow-content .components-combobox-control__suggestions-container input:focus { box-shadow: none !important; }
.vs-flow-content .wc-block-components-combobox::after {
content: '';
position: absolute;
right: 18px; top: 50%;
width: 8px; height: 8px;
border: 1.5px solid var(--text2);
border-top: 0; border-left: 0;
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
.vs-flow-content .components-form-token-field__suggestions-list {
background: var(--card-bg) !important;
border: 1.5px solid var(--border) !important;
border-radius: 12px !important;
box-shadow: 0 12px 36px rgba(139,53,214,.18) !important;
max-height: 280px !important;
margin-top: 6px !important;
padding: 6px !important;
}
.vs-flow-content .components-form-token-field__suggestion {
padding: 10px 14px !important;
border-radius: 8px !important;
font-size: 14px !important;
color: var(--text) !important;
font-family: var(--vs-font-body) !important;
}
.vs-flow-content .components-form-token-field__suggestion.is-selected,
.vs-flow-content .components-form-token-field__suggestion:hover {
background: var(--rose) !important;
color: var(--pink) !important;
}
[data-theme="dark"] .vs-flow-content .components-form-token-field__suggestion.is-selected,
[data-theme="dark"] .vs-flow-content .components-form-token-field__suggestion:hover {
background: rgba(232,53,138,.15) !important;
} .vs-flow-content .wc-block-components-checkbox input[type="checkbox"],
.vs-flow-content input[type="checkbox"],
.vs-flow-content input[type="radio"] {
width: 20px !important; height: 20px !important;
border-radius: 6px !important;
border: 1.5px solid var(--border2) !important;
background: var(--bg2) !important;
cursor: pointer !important;
accent-color: var(--pink) !important;
}
.vs-flow-content input[type="radio"] { border-radius: 50% !important; }
.vs-flow-content .wc-block-components-checkbox__label,
.vs-flow-content .wc-block-components-radio-control__option-label {
text-transform: none !important;
letter-spacing: 0 !important;
font-family: var(--vs-font-body) !important;
font-weight: 600 !important;
font-size: 14px !important;
color: var(--text2) !important;
} .vs-flow-content .wc-block-components-checkbox {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
position: relative !important;
}
.vs-flow-content .wc-block-components-checkbox__input[type="checkbox"] {
position: static !important;
margin: 0 !important;
float: none !important;
flex: 0 0 20px !important;
}
.vs-flow-content .wc-block-components-checkbox__mark { display: none !important; }
.vs-flow-content .wc-block-components-checkbox__label {
margin: 0 !important;
padding: 0 !important;
} .vs-flow-content .wc-block-components-radio-control__option {
background: var(--bg2) !important;
border: 1.5px solid var(--border) !important;
border-radius: 12px !important;
padding: 16px 18px !important;
margin: 0 0 10px !important;
cursor: pointer !important;
transition: border-color .2s, background .2s !important;
display: grid !important;
grid-template-columns: 24px 1fr auto !important;
gap: 12px !important;
align-items: center !important;
}
.vs-flow-content .wc-block-components-radio-control__option:hover {
border-color: var(--border2) !important;
background: var(--card-bg) !important;
}
.vs-flow-content .wc-block-components-radio-control__option--checked,
.vs-flow-content .wc-block-components-radio-control__option:has(input:checked) {
border-color: var(--pink) !important;
background: var(--rose) !important;
}
[data-theme="dark"] .vs-flow-content .wc-block-components-radio-control__option--checked,
[data-theme="dark"] .vs-flow-content .wc-block-components-radio-control__option:has(input:checked) {
background: rgba(232,53,138,.10) !important;
} .vs-flow-content .wp-block-woocommerce-checkout-totals-block,
.vs-flow-content .wp-block-woocommerce-checkout-order-summary-block,
.vs-flow-content .wp-block-woocommerce-cart-order-summary-block {
padding: 26px 28px !important;
box-shadow: 0 12px 36px rgba(139,53,214,.10) !important;
}
.vs-flow-content .wc-block-components-totals-item {
font-size: 14px !important;
color: var(--text2) !important;
padding: 10px 0 !important;
border-bottom: 1px solid var(--border) !important;
font-family: var(--vs-font-body) !important;
}
.vs-flow-content .wc-block-components-totals-item:last-child { border-bottom: none !important; }
.vs-flow-content .wc-block-components-totals-item__label {
color: var(--text2) !important;
font-weight: 600 !important;
}
.vs-flow-content .wc-block-components-totals-item__value {
color: var(--text) !important;
font-weight: 700 !important;
font-family: var(--vs-font-display) !important;
}
.vs-flow-content .wc-block-components-totals-footer-item {
margin-top: 14px !important;
padding-top: 18px !important;
border-top: 1.5px solid var(--border) !important;
border-bottom: none !important;
}
.vs-flow-content .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
font-family: var(--vs-font-display) !important;
font-weight: 800 !important;
font-size: 16px !important;
color: var(--text) !important;
}
.vs-flow-content .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.vs-flow-content .wc-block-components-totals-footer-item__price {
font-family: var(--vs-font-display) !important;
font-weight: 900 !important;
font-size: 22px !important;
color: var(--pink) !important;
background: none !important;
-webkit-text-fill-color: var(--pink) !important;
letter-spacing: -0.01em !important;
} .vs-flow-content .wc-block-components-order-summary-item {
display: grid !important;
grid-template-columns: 56px 1fr auto !important;
gap: 14px !important;
padding: 14px 0 !important;
border-bottom: 1px solid var(--border) !important;
align-items: center !important;
}
.vs-flow-content .wc-block-components-order-summary-item:last-child { border-bottom: none !important; }
.vs-flow-content .wc-block-components-order-summary-item__image img,
.vs-flow-content .wc-block-components-order-summary-item__image {
width: 56px !important; height: 56px !important;
border-radius: 10px !important;
object-fit: cover !important;
}
.vs-flow-content .wc-block-components-order-summary-item__quantity {
background: var(--grad) !important;
color: #fff !important;
font-family: var(--vs-font-accent) !important;
font-weight: 700 !important;
font-size: 11px !important;
border-radius: 50px !important;
padding: 2px 8px !important;
}
.vs-flow-content .wc-block-components-product-name {
font-family: var(--vs-font-display) !important;
font-weight: 700 !important;
font-size: 14px !important;
line-height: 1.3 !important;
color: var(--text) !important;
}
.vs-flow-content .wc-block-components-product-metadata {
font-size: 12px !important;
color: var(--muted) !important;
margin-top: 2px !important;
} .vs-flow-content .wc-block-components-totals-coupon {
padding: 12px 0 !important;
}
.vs-flow-content .wc-block-components-totals-coupon__button.wc-block-components-button {
background: transparent !important;
color: var(--pink) !important;
font-family: var(--vs-font-accent) !important;
font-weight: 700 !important;
box-shadow: none !important;
padding: 6px 0 !important;
font-size: 13px !important;
width: auto !important;
}
.vs-flow-content .wc-block-components-totals-coupon__form {
display: flex !important;
gap: 8px !important;
margin-top: 10px !important;
}
.vs-flow-content .wc-block-components-totals-coupon__form input {
flex: 1 !important;
min-height: 48px !important;
padding: 12px 14px !important;
}
.vs-flow-content .wc-block-components-totals-coupon__form button {
background: var(--grad) !important;
color: #fff !important;
border-radius: 12px !important;
padding: 0 22px !important;
font-family: var(--vs-font-accent) !important;
font-weight: 700 !important;
font-size: 13px !important;
min-height: 48px !important;
width: auto !important;
box-shadow: none !important;
} .vs-flow-content .wp-block-woocommerce-checkout-actions-block,
.vs-flow-content .wc-block-checkout__actions {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 18px 0 0 !important;
margin: 0 !important;
}
.vs-flow-content .wc-block-components-checkout-place-order-button,
.vs-flow-content .wc-block-checkout__actions_row .wc-block-components-button {
width: 100% !important;
min-height: 60px !important;
font-size: 16px !important;
border-radius: 16px !important;
box-shadow: 0 12px 32px rgba(232,53,138,.4) !important;
padding: 18px 32px !important;
letter-spacing: -0.005em !important;
} .vs-flow-content .wp-block-woocommerce-cart-express-payment-block,
.vs-flow-content .wp-block-woocommerce-checkout-express-payment-block {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 0 16px !important;
}
.vs-flow-content .wc-block-components-express-payment {
background: var(--bg2) !important;
border: 1.5px dashed var(--border2) !important;
border-radius: 14px !important;
padding: 18px !important;
}
.vs-flow-content .wc-block-components-express-payment__title-container {
color: var(--muted) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
} .vs-flow-content .wp-block-woocommerce-cart-accepted-payment-methods-block,
.vs-flow-content .wp-block-woocommerce-checkout-accepted-payment-methods-block {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 14px 0 0 !important;
text-align: center !important;
margin: 0 !important;
}
.vs-flow-content .wc-block-components-payment-method-icons {
display: flex !important;
gap: 6px !important;
justify-content: center !important;
flex-wrap: wrap !important;
}
.vs-flow-content .wc-block-components-payment-method-icons img {
height: 24px !important;
border-radius: 4px !important;
background: #fff !important;
padding: 2px 4px !important;
border: 1px solid var(--border) !important;
} .vs-flow-content .wc-block-components-notice-banner {
background: var(--card-bg) !important;
border: 1.5px solid var(--mint) !important;
border-radius: 14px !important;
padding: 14px 18px !important;
margin: 0 0 16px !important;
font-size: 14px !important;
color: var(--text) !important;
}
.vs-flow-content .wc-block-components-notice-banner.is-error {
border-color: var(--pink) !important;
background: var(--rose) !important;
}
[data-theme="dark"] .vs-flow-content .wc-block-components-notice-banner.is-error {
background: rgba(232,53,138,.10) !important;
} .vs-flow-content .wc-block-components-address-card {
background: var(--bg2) !important;
border: 1.5px solid var(--border) !important;
border-radius: 12px !important;
padding: 16px 18px !important;
font-size: 14px !important;
}
.vs-flow-content .wc-block-components-address-card__edit {
color: var(--pink) !important;
font-family: var(--vs-font-accent) !important;
font-weight: 700 !important;
font-size: 12px !important;
} .vs-flow-content .wc-block-components-radio-control__option-content {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.vs-flow-content .wc-block-components-radio-control-secondary-label {
font-family: var(--vs-font-display) !important;
font-weight: 800 !important;
color: var(--pink) !important;
font-size: 14px !important;
}
@media (max-width: 720px) {
.vs-flow-content .wp-block-woocommerce-checkout-contact-information-block,
.vs-flow-content .wp-block-woocommerce-checkout-shipping-address-block,
.vs-flow-content .wp-block-woocommerce-checkout-billing-address-block,
.vs-flow-content .wp-block-woocommerce-checkout-shipping-method-block,
.vs-flow-content .wp-block-woocommerce-checkout-payment-block,
.vs-flow-content .wp-block-woocommerce-checkout-order-note-block,
.vs-flow-content .wp-block-woocommerce-checkout-totals-block,
.vs-flow-content .wp-block-woocommerce-checkout-order-summary-block,
.vs-flow-content .wp-block-woocommerce-cart-order-summary-block {
padding: 22px 20px !important;
}
} .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-checkout__actions_row .wc-block-components-button.contained {
background: var(--grad) !important;
color: #fff !important;
font-family: var(--vs-font-accent) !important;
font-weight: 700 !important;
font-size: 15px !important;
padding: 14px 28px !important;
border-radius: 14px !important;
border: none !important;
box-shadow: 0 6px 24px rgba(232, 53, 138, .38) !important;
transition: transform .2s, box-shadow .2s !important;
width: 100% !important;
justify-content: center !important;
}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(232, 53, 138, .55) !important;
}
.wc-block-components-button.outlined {
background: transparent !important;
color: var(--purple) !important;
border: 2px solid var(--purple) !important;
}  .wc-block-components-notice-banner {
background: var(--card-bg) !important;
border: 1.5px solid var(--mint) !important;
border-radius: var(--rad-md) !important;
padding: 14px 18px !important;
margin-bottom: 14px !important;
}
.wc-block-components-notice-banner.is-error {
border-color: var(--pink) !important;
background: var(--rose) !important;
} .vs-flow-content .wc-block-components-sidebar-layout,
.vs-flow-content .wc-block-cart.wc-block-components-sidebar-layout,
.vs-flow-content .wc-block-checkout.wc-block-components-sidebar-layout,
.wc-block-components-sidebar-layout.wc-block-cart,
.wc-block-components-sidebar-layout.wc-block-checkout,
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 380px !important;
grid-template-areas: 'main sidebar' !important;
column-gap: 40px !important;
row-gap: 0 !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
}
.vs-flow-content .wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-components-sidebar-layout > .wc-block-components-main {
grid-area: main !important;
padding: 0 !important;
max-width: none !important;
min-width: 0 !important;
width: 100% !important;
float: none !important;
}
.vs-flow-content .wc-block-components-sidebar-layout .wc-block-components-sidebar,
.wc-block-components-sidebar-layout > .wc-block-components-sidebar {
grid-area: sidebar !important;
position: sticky !important;
top: 90px !important;
align-self: start !important;
min-width: 0 !important;
max-width: 100% !important;
width: 100% !important;
float: none !important;
} .wc-block-components-sidebar-layout[data-large],
.wc-block-components-sidebar-layout[data-medium],
.wc-block-components-sidebar-layout[data-small] {
grid-template-columns: minmax(0, 1fr) 380px !important;
} .wc-block-components-sidebar-layout {
container-type: normal !important;
container-name: none !important;
} .wc-block-components-main > *,
.wc-block-components-sidebar > * {
min-width: 0 !important;
max-width: 100% !important;
}
@media (max-width: 1100px) {
.vs-flow-content .wc-block-components-sidebar-layout,
.wc-block-components-sidebar-layout.wc-block-cart,
.wc-block-components-sidebar-layout.wc-block-checkout,
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
grid-template-columns: minmax(0, 1fr) 340px !important;
column-gap: 28px !important;
}
}
@media (max-width: 960px) {
.vs-flow-content { padding: 18px 20px 56px; }
.vs-flow-content .wc-block-components-sidebar-layout,
.wc-block-components-sidebar-layout.wc-block-cart,
.wc-block-components-sidebar-layout.wc-block-checkout,
.wp-block-woocommerce-cart .wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
grid-template-columns: 1fr !important;
grid-template-areas: 'main' 'sidebar' !important;
row-gap: 20px !important;
}
.vs-flow-content .wc-block-components-sidebar-layout .wc-block-components-sidebar { position: static !important; }
.vs-flow-bar { margin-top: 42px; }
} .wc-block-components-totals-coupon,
.wc-block-components-totals-shipping {
background: transparent !important;
padding: 8px 0 !important;
}  .woocommerce-account .woocommerce {
max-width: 1100px; margin: 0 auto; width: 100%;
position: relative; z-index: 2;
}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
padding: var(--vs-nav-clear) 32px 80px;
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
align-items: start; gap: 36px;
}
.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) .woocommerce-notices-wrapper {
grid-column: 1 / -1;
}
.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-MyAccount-content { min-width: 0; } .woocommerce-account .entry-content,
.woocommerce-account article.entry-content {
max-width: none !important; width: 100% !important;
margin: 0 !important; padding: 0 !important; display: block !important;
} .woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
float: none !important; width: auto !important;
}
.woocommerce-MyAccount-navigation ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 6px;
}
.woocommerce-MyAccount-navigation a {
display: block;
background: var(--card-bg); border: 1.5px solid var(--border);
border-radius: 14px; padding: 11px 16px;
color: var(--text2); text-decoration: none;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 14px;
transition: all .2s;
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
background: var(--rose); color: var(--pink); border-color: var(--pink);
}
[data-theme="dark"] .woocommerce-MyAccount-navigation a:hover,
[data-theme="dark"] .woocommerce-MyAccount-navigation .is-active a { background: rgba(232,53,138,.12); }
.woocommerce-MyAccount-content {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 32px 36px;
box-shadow: var(--shadow);
}
.account-welcome {
display: flex; align-items: center; gap: 20px;
margin-bottom: 20px;
}
.account-avatar {
width: 64px; height: 64px; border-radius: 50%;
background: var(--grad); color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: var(--vs-font-display); font-weight: 800;
font-size: 28px;
box-shadow: 0 8px 24px rgba(232,53,138,.35);
flex-shrink: 0;
}
.account-welcome h2 {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 26px; margin: 0; line-height: 1.1;
}
.account-welcome h2 span {
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.account-welcome-sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.account-intro {
color: var(--text2); line-height: 1.75;
font-size: 15px;
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1.5px solid var(--border);
}
.account-intro a { color: var(--pink); font-weight: 700; text-decoration: none; }
.account-intro a:hover { text-decoration: underline; }
.account-tiles {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.account-tile {
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: var(--rad-md);
padding: 22px 24px;
text-decoration: none;
color: var(--text);
display: flex; flex-direction: column; gap: 6px;
transition: transform .25s var(--ease), border-color .2s, box-shadow .25s;
}
.account-tile:hover {
transform: translateY(-3px);
border-color: var(--pink);
box-shadow: var(--shadow);
color: var(--text);
}
.account-tile-icon { font-size: 28px; line-height: 1; }
.account-tile-title {
font-family: var(--vs-font-display); font-weight: 700;
font-size: 16px;
}
.account-tile-sub { font-size: 13px; color: var(--muted); }
.account-nav-icon {
display: inline-block; margin-right: 8px;
font-size: 14px;
}  .auth-layout {
max-width: 1100px; margin: 0 auto; width: 100%;
padding: var(--vs-nav-clear) 32px 80px;
display: grid; grid-template-columns: minmax(300px, 380px) 1fr;
gap: 28px; align-items: stretch;
position: relative; z-index: 2;
}
.auth-side {
background: linear-gradient(160deg, var(--orange) 0%, var(--pink) 52%, var(--purple) 100%);
border-radius: var(--rad-lg);
padding: 48px 40px;
color: #fff;
display: flex; flex-direction: column; justify-content: center;
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.auth-side-eyebrow {
display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
background: rgba(255, 255, 255, .20);
border: 1.5px solid rgba(255, 255, 255, .34);
border-radius: 50px; padding: 7px 16px;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
margin-bottom: 22px;
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.auth-side-title {
font-family: var(--vs-font-display); font-weight: 900;
font-size: clamp(26px, 2.2vw, 36px); line-height: 1.14;
letter-spacing: -.01em; margin: 0 0 14px; color: #fff;
overflow-wrap: break-word; hyphens: auto;
}
.auth-side-sub {
font-size: 15px; line-height: 1.65;
color: rgba(255, 255, 255, .92); margin: 0; max-width: 32ch;
}
.login-grid {
display: flex; flex-direction: column; gap: 20px;
min-width: 0;
}
.auth-card {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: var(--rad-lg);
padding: 32px 36px;
box-shadow: var(--shadow-lg);
}
.auth-card h2 {
font-family: var(--vs-font-display); font-weight: 800;
font-size: 24px; margin-bottom: 18px;
}
.auth-card .form-row { margin-bottom: 14px; }
.auth-card label {
display: block;
font-family: var(--vs-font-accent); font-weight: 700;
font-size: 12px; letter-spacing: .04em;
text-transform: uppercase;
color: var(--text2); margin-bottom: 6px;
}
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"] {
width: 100%;
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
font-size: 15px; color: var(--text);
font-family: var(--vs-font-body);
outline: none;
transition: border-color .2s, box-shadow .2s;
}
.auth-card input:focus {
border-color: var(--pink);
box-shadow: 0 0 0 3px rgba(232,53,138,.12);
}
.auth-card .woocommerce-form-login__rememberme {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--text2);
font-family: var(--vs-font-body);
font-weight: 600;
letter-spacing: 0; text-transform: none;
}
.auth-card .button {
width: 100% !important;
margin-top: 12px;
justify-content: center;
}
.auth-forgot {
margin-top: 14px;
font-size: 13px;
text-align: center;
}
.auth-forgot a { color: var(--pink); font-weight: 700; }
@media (max-width: 760px) {
.account-tiles { grid-template-columns: 1fr; }
.auth-layout { grid-template-columns: 1fr; padding: var(--vs-nav-clear) 20px 64px; gap: 18px; }
} @media (max-width: 1100px) {
.shop-layout { padding: 24px 48px 80px; }
.product-layout, .single-product div.product { padding: 32px 48px 80px; gap: 40px; }
.woocommerce-tabs, .related.products, .upsells.products { padding-left: 48px; padding-right: 48px; }
.woocommerce-cart .site-main { padding: var(--vs-nav-clear) 48px 80px; }
.woocommerce-checkout .site-main { padding: var(--vs-nav-clear) 48px 80px; }
.filter-inner { padding: 0 48px; }
.vs-breadcrumbs { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 960px) {
.prod-grid, .products,
.products.columns-3, .products.columns-4 { grid-template-columns: repeat(2, 1fr); }
.related.products .products,
.upsells.products .products { grid-template-columns: repeat(2, 1fr); }
.product-layout, .single-product div.product { grid-template-columns: 1fr; padding: 24px 28px 64px; gap: 32px; }
.gallery-thumbs, .flex-control-thumbs { grid-template-columns: repeat(5, 1fr); }
.woocommerce-cart .site-main { padding: var(--vs-nav-clear) 28px 64px; }
.cart-layout { grid-template-columns: 1fr; }
.cart_totals, .cart-summary { position: static; }
form.checkout { grid-template-columns: 1fr; }
form.checkout .woocommerce-checkout-review-order { position: static; }
.woocommerce-checkout .site-main { padding: var(--vs-nav-clear) 28px 64px; }
.woocommerce-account .woocommerce { grid-template-columns: 1fr; padding: var(--vs-nav-clear) 28px 64px; }
.shop-layout { padding: 18px 28px 64px; }
.filter-inner { padding: 0 28px; }
.vs-breadcrumbs { padding: 14px 18px; }
.vs-breadcrumbs .woocommerce-breadcrumb,
.vs-breadcrumbs .breadcrumb { font-size: 12.5px; padding: 6px 14px; } .woocommerce-tabs, .related.products, .upsells.products { padding-left: 28px; padding-right: 28px; }
.shop_table.cart thead { display: none; }
.shop_table.cart tr {
display: grid; grid-template-columns: 80px 1fr;
gap: 6px 14px;
padding: 14px;
border-bottom: 1.5px solid var(--border);
}
.shop_table.cart td { padding: 0 !important; border: none !important; }
.shop_table.cart .product-thumbnail { grid-row: span 4; }
.shop_table.cart .product-thumbnail img { width: 80px; height: 80px; }
.trust-badges { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.prod-grid, .products,
.products.columns-3, .products.columns-4 { grid-template-columns: 1fr; }
.related.products .products,
.upsells.products .products { grid-template-columns: 1fr 1fr; }
.gallery-thumbs, .flex-control-thumbs { grid-template-columns: repeat(4, 1fr); }
.product_title { font-size: 26px; }
.summary .price .woocommerce-Price-amount { font-size: 28px; }
.woocommerce-tabs ul.tabs, .tabs-nav { overflow-x: auto; flex-wrap: nowrap; }
.search-input, .shop-search input[type="search"] { width: 100%; }
}
@media (max-width: 720px) {
.sticky-atc.is-active { display: flex; }
}
@media (min-width: 721px) {
.sticky-atc { display: none !important; }
} @media (max-width: 768px) { .shop-hero,
.woocommerce-shop .page-hero {
padding: 100px 22px 48px;
min-height: 38svh;
min-height: 38dvh;
}
.shop-hero h1 { font-size: clamp(30px, 8vw, 44px); }
.shop-hero p  { font-size: 15px; line-height: 1.65; }
.hi-icon { font-size: 26px; }
.trust-row { gap: 8px; }
.trust-chip { font-size: 12px; padding: 6px 12px; } .filter-wrap { padding: 10px 0; }
.filter-inner {
padding: 0 18px;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
gap: 8px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.filter-inner::-webkit-scrollbar { display: none; }
.filter-inner > * { flex-shrink: 0; scroll-snap-align: start; }
.filter-label { font-size: 12px; }
.filter-btn { min-height: 40px; padding: 8px 16px; font-size: 13px; }
.search-wrap { width: 100%; min-width: 240px; }
.search-input { width: 100%; }
.vs-shop-sort { width: 100%; }
.sort-select { width: 100%; min-height: 44px; padding: 10px 14px; } .vs-breadcrumbs { padding: 12px 16px; }
.vs-breadcrumbs .woocommerce-breadcrumb,
.vs-breadcrumbs .breadcrumb { font-size: 12px; padding: 6px 12px; gap: 4px 6px; }  .shop-layout { padding: 16px 16px 56px; }
.prod-grid, .products,
.products.columns-3, .products.columns-4 {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.results-bar {
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin-bottom: 18px;
} .shop-card { border-radius: 18px; }
.shop-card .card-img { aspect-ratio: 4 / 5; height: auto; }
.shop-card .card-body { padding: 16px 18px 20px; }
.shop-card .card-body h3,
.shop-card .woocommerce-loop-product__title { font-size: 18px; line-height: 1.3; }
.shop-card .card-footer { gap: 12px; }
.shop-card .cart-add-btn {
min-height: 44px;
padding: 10px 16px;
font-size: 13px;
flex: 1;
justify-content: center;
} .single-product div.product {
padding: 16px 18px 96px;
gap: 24px;
}
.product-layout {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 32px;
}
.gallery-thumbs { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gallery-main { border-radius: 20px; }
.product_title,
.product_title.entry-title { font-size: clamp(26px, 7vw, 36px); }
.summary .price .woocommerce-Price-amount,
.single-product .price .woocommerce-Price-amount { font-size: 30px; }
.summary .price del .woocommerce-Price-amount,
.single-product .price del .woocommerce-Price-amount { font-size: 16px; }
.woocommerce-product-details__short-description {
font-size: 14.5px;
padding: 12px 14px 12px 44px;
}
.product-meta-chips { gap: 6px; }
.meta-chip { font-size: 11.5px; padding: 5px 12px; } .cart {
gap: 10px;
flex-wrap: nowrap;
}
.quantity {
flex-shrink: 0;
border-radius: 12px;
}
.qty-dec, .qty-inc {
width: 44px; height: 48px;
}
.quantity .qty,
.qty-input {
width: 48px; height: 48px;
font-size: 16px;
}
.woocommerce form.cart .single_add_to_cart_button,
.single_add_to_cart_button.button,
.single_add_to_cart_button.button.alt,
.single_add_to_cart_button {
flex: 1;
min-height: 48px;
padding: 14px 18px !important;
font-size: 15px !important;
justify-content: center;
} .trust-badges { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; }
.trust-badge { padding: 10px 12px; }
.trust-badge .tb-icon { font-size: 20px; } .woocommerce-tabs ul.tabs,
.tabs-nav {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
gap: 0;
}
.woocommerce-tabs ul.tabs::-webkit-scrollbar,
.tabs-nav::-webkit-scrollbar { display: none; }
.woocommerce-tabs ul.tabs li a,
.tab-btn,
.tabs-nav li a {
padding: 12px 16px;
font-size: 13.5px;
white-space: nowrap;
min-height: 44px;
display: inline-flex;
align-items: center;
} .sticky-atc {
padding: 10px 14px calc(12px + var(--vs-sa-bottom, 0px));
gap: 10px;
}
.sticky-atc-thumb { width: 40px; height: 40px; }
.sticky-atc-title { font-size: 13px; }
.sticky-atc-price { font-size: 12px; }
.sticky-atc .btn-primary {
min-height: 44px;
padding: 8px 14px;
font-size: 13px;
} .woocommerce-cart .site-main { padding: var(--vs-nav-clear) 16px 48px; }
.cart-layout { grid-template-columns: 1fr; gap: 20px; }
.cart-item-card {
flex-direction: row;
gap: 12px;
padding: 12px;
}
.cart-item-thumb { width: 80px; height: 80px; flex-shrink: 0; }
.cart-item-info { gap: 8px; }
.cart-item-foot {
flex-wrap: wrap;
gap: 10px;
}
.cart-item-qty .quantity { width: 100%; max-width: 130px; }
.cart-actions {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.coupon { display: flex; gap: 8px; }
.coupon input { flex: 1; min-height: 48px; }
.coupon button { min-height: 48px; padding: 0 16px; }
.cart_totals { padding: 18px; } .woocommerce-checkout .site-main { padding: var(--vs-nav-clear) 16px 48px; }
form.checkout {
grid-template-columns: 1fr;
gap: 24px;
}
form.checkout .woocommerce-checkout-review-order {
position: static;
max-height: none;
padding: 18px;
}
.woocommerce-billing-fields, .woocommerce-shipping-fields {
padding: 18px;
}
form.checkout .form-row {
grid-column: 1 / -1 !important;
}
form.checkout input.input-text,
form.checkout textarea,
form.checkout select {
min-height: 48px;
padding: 12px 14px;
font-size: 16px;
}
#place_order, .woocommerce-checkout #place_order {
width: 100%;
min-height: 52px;
font-size: 16px;
} .thankyou-section { padding: 48px 16px; }
.thankyou-inner { padding: 0; }
.order-summary-grid { grid-template-columns: 1fr; gap: 16px; }
.thankyou-actions { flex-direction: column; gap: 10px; }
.thankyou-actions .btn-primary,
.thankyou-actions .btn-outline { width: 100%; justify-content: center; } .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
grid-template-columns: 1fr !important;
padding: var(--vs-nav-clear) 16px 56px;
gap: 18px;
}
.woocommerce-MyAccount-navigation ul {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 8px;
scrollbar-width: none;
}
.woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
.woocommerce-MyAccount-navigation li {
flex-shrink: 0;
}
.woocommerce-MyAccount-navigation li a {
min-height: 44px;
padding: 10px 16px;
font-size: 14px;
white-space: nowrap;
} .auth-layout {
grid-template-columns: 1fr !important;
padding: var(--vs-nav-clear) 16px 48px;
gap: 16px;
}
.auth-side { padding: 32px 26px; }
.auth-side-title { font-size: clamp(24px, 7vw, 30px); }
.auth-card { padding: 22px; }
.woocommerce-form button[type="submit"],
.woocommerce-form-login__submit,
.woocommerce-form-register__submit {
width: 100%;
min-height: 48px;
} .mini-cart-drawer {
width: 100vw !important;
max-width: 100vw !important;
right: 0 !important;
padding-bottom: var(--vs-sa-bottom, 0px);
}
.mini-cart-head {
padding: calc(16px + var(--vs-sa-top, 0px)) 18px 12px;
}
.mini-cart-body { padding: 12px 18px; }
.mini-cart-foot {
padding: 14px 18px calc(18px + var(--vs-sa-bottom, 0px));
}
.mini-cart-foot .btn-primary {
min-height: 52px;
font-size: 16px;
}
.mini-cart-close {
width: 44px; height: 44px;
min-width: 44px; min-height: 44px;
} .cart-empty { padding: 48px 18px; }
.cart-empty .empty-icon { font-size: 56px; }
.cart-empty h2 { font-size: 22px; }
.cart-empty .btn-primary { width: 100%; max-width: 320px; } .bundle-cards { grid-template-columns: 1fr !important; gap: 16px !important; }
.bundle-card { padding: 22px; }
.newsletter { padding: 48px 18px !important; }
.newsletter h2 { font-size: clamp(24px, 7vw, 32px); }
.nl-form { flex-direction: column; gap: 10px; }
.nl-input, .nl-btn { width: 100%; min-height: 48px; }
} @supports (padding: max(0px)) {
.mini-cart-drawer { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
.sticky-atc { padding-bottom: max(12px, calc(12px + env(safe-area-inset-bottom))); }
}.vs-fun-sep { display: none; } .m-filter-only { display: none !important; } .shop-trust-strip { display: none; } .vs-search-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background: var(--bg);
flex-direction: column;
}
.vs-search-overlay.is-open { display: flex; }
.vss-inner {
display: flex;
flex-direction: column;
height: 100%;
padding-top: max(env(safe-area-inset-top, 0px), 16px);
}
.vss-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px 12px;
border-bottom: 1.5px solid var(--border);
}
.vss-search-wrap {
flex: 1;
position: relative;
}
.vss-icon {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
}
.vss-input {
width: 100%;
background: var(--bg2);
border: 1.5px solid var(--border);
border-radius: 50px;
padding: 11px 18px 11px 42px;
font-size: 16px;
color: var(--text);
font-family: var(--vs-font-body);
outline: none;
box-sizing: border-box;
-webkit-appearance: none;
}
.vss-input:focus { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(232,53,138,.12); }
.vss-close {
background: none;
border: none;
font-family: var(--vs-font-accent);
font-weight: 700;
font-size: 14px;
color: var(--pink);
cursor: pointer;
padding: 8px 4px;
flex-shrink: 0;
white-space: nowrap;
}
.vss-results {
flex: 1;
overflow-y: auto;
padding: 8px;
-webkit-overflow-scrolling: touch;
}
.vss-hint {
text-align: center;
padding: 40px 20px;
color: var(--muted);
font-size: 15px;
font-family: var(--vs-font-body);
}
.vss-item {
display: flex;
gap: 12px;
align-items: center;
padding: 10px;
border-radius: 14px;
text-decoration: none;
color: var(--text);
transition: background .15s;
}
.vss-item:active { background: var(--bg2); }
.vss-thumb {
width: 52px;
height: 52px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
background: var(--bg2);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.vss-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vss-text { flex: 1; min-width: 0; }
.vss-title { font-weight: 700; font-size: 14px; line-height: 1.3; margin-bottom: 3px; }
.vss-price { font-size: 13px; color: var(--pink); font-family: var(--vs-font-accent); font-weight: 700; } @media (max-width: 767px) { .ticker-wrap,
.stats-wrap,
.about-bg,
.game-bg,
.happy-bg {
display: none !important;
} .vs-fun-sep {
display: block;
background: linear-gradient(90deg, #8B35D6 0%, #E8358A 55%, #F97316 100%);
position: relative;
z-index: 2;
margin: 0;
padding: 10px 0 0;
overflow: hidden;
}
.vs-fun-sep::after {
content: '';
display: block;
width: 140%;
height: 32px;
background: var(--bg);
border-radius: 50%;
margin: 4px 0 0 -20%;
}
.vs-sep-inner {
display: flex;
align-items: center;
justify-content: space-around;
padding: 4px 20px 6px;
}
.vs-sep-inner span {
font-size: 22px;
display: inline-block;
animation: vs-sep-float 2.8s ease-in-out infinite;
}
.vs-sep-inner span:nth-child(1) { animation-delay: 0s; }
.vs-sep-inner span:nth-child(2) { animation-delay: 0.28s; }
.vs-sep-inner span:nth-child(3) { animation-delay: 0.56s; }
.vs-sep-inner span:nth-child(4) { animation-delay: 0.84s; }
.vs-sep-inner span:nth-child(5) { animation-delay: 1.12s; }
.vs-sep-inner span:nth-child(6) { animation-delay: 1.4s; }
.vs-sep-inner span:nth-child(7) { animation-delay: 1.68s; }
@keyframes vs-sep-float {
0%, 100% { transform: translateY(0) scale(1); }
50%      { transform: translateY(-5px) scale(1.18); }
} .section-inner {
padding: 44px 12px !important;
} .hero {
padding-top: 76px !important;
padding-bottom: 80px !important;
min-height: 0 !important;
}
.hero-inner {
padding: 0 20px !important;
gap: 24px !important;
grid-template-columns: 1fr !important;
} .hero-visual {
order: -1;
display: flex !important;
justify-content: center;
margin: 0 auto;
width: 100%;
overflow: visible;
}  .book-scene {
width: 100% !important;
max-width: 100% !important;
height: calc((100vw - 92px) * 1.43 + 55px) !important;
perspective: 900px !important;
position: relative;
overflow: visible !important;
} .book {
width: calc(100vw - 92px) !important;
height: calc((100vw - 92px) * 1.43) !important;
left: 26px !important;
top: 28px !important;
transform: rotateY(-8deg) rotateX(2deg) !important;
filter: drop-shadow(0 22px 48px rgba(139,53,214,.50))
drop-shadow(0 6px 14px rgba(30,10,46,.28)) !important;
}
.book-title    { font-size: clamp(14px, 4.2vw, 18px) !important; bottom: 52px !important; }
.book-subtitle { font-size: clamp(8px, 2.5vw, 11px)  !important; bottom: 36px !important; }
.book-author   { font-size: clamp(10px, 3vw, 13px)   !important; bottom: 14px !important; }
.book-badge    { width: clamp(48px, 13vw, 60px) !important; height: clamp(48px, 13vw, 60px) !important;
font-size: clamp(9px, 2.5vw, 11px) !important; top: 14px !important; right: 14px !important; }
.book-stars    { font-size: clamp(10px, 3vw, 13px) !important; top: 14px !important; }
.book-glow     { filter: blur(18px) !important; opacity: .28 !important; } .ha-ring, .ha-ring2 { display: none !important; } .bc-bottom {
top: 12px !important;
left: 12px !important;
right: auto !important;
bottom: auto !important;
width: clamp(110px, 30vw, 136px) !important;
transform: rotate(-3deg) !important;
animation: vs-m-float-tl 6s ease-in-out infinite .8s !important;
padding: 10px 13px !important;
z-index: 3 !important;
}
@keyframes vs-m-float-tl {
0%, 100% { transform: rotate(-3deg) translateY(0); }
50%      { transform: rotate(-3deg) translateY(-8px); }
} .bc-right {
right: 12px !important;
left: auto !important;
bottom: 22px !important;
top: auto !important;
transform: rotate(2deg) !important;
animation: vs-m-float-rm 5s ease-in-out infinite !important;
padding: 10px 13px !important;
z-index: 3 !important;
}
@keyframes vs-m-float-rm {
0%, 100% { transform: rotate(2deg) translateY(0); }
50%      { transform: rotate(2deg) translateY(-9px); }
}
.bcard-icon  { font-size: 20px; margin-bottom: 3px; }
.bcard-label { font-size: 9px; }
.bcard-val   { font-size: 14px; } .hero-content {
display: flex !important;
flex-direction: column;
gap: 10px;
}
.hero h1 {
font-size: clamp(26px, 7.5vw, 34px) !important;
line-height: 1.14;
order: 1;
margin: 0;
}
.hero-content > p {
font-size: 14px !important;
line-height: 1.6;
margin: 0;
order: 2;
} .hero-btns {
display: contents !important;
} .hero-cta-shop {
order: 3 !important;
width: 100% !important;
min-height: 50px !important;
display: flex !important;
align-items: center;
justify-content: center;
text-align: center;
flex: none !important;
} .hero-trust {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 6px !important;
overflow: visible !important;
order: 4 !important;
}
.trust-pill {
flex: none !important;
width: auto !important;
white-space: normal !important;
text-align: center;
font-size: 9.5px !important;
padding: 8px 5px !important;
border-radius: 10px !important;
line-height: 1.35;
display: block !important;
} .hero-cta-programs {
order: 5 !important;
width: 100% !important;
min-height: 50px !important;
display: flex !important;
align-items: center;
justify-content: center;
text-align: center;
flex: none !important;
}
.hero-cta-shows {
order: 6 !important;
width: 100% !important;
min-height: 50px !important;
display: flex !important;
align-items: center;
justify-content: center;
text-align: center;
flex: none !important;
} .hero-eyebrow {
display: none !important;
} .prods-bg .section-inner {
padding: 44px 12px !important;
}
.prods-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
padding: 0 4px;
}
.prods-header .btn-outline {
width: 100%;
text-align: center;
justify-content: center;
} .products.prod-grid:not(.home-prod-grid),
.products.prod-grid.columns-3:not(.home-prod-grid),
.products.prod-grid.columns-4:not(.home-prod-grid) {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
} .prods-bg .section-inner { overflow: hidden; padding-right: 0 !important; }
.home-prod-grid {
display: flex !important;
flex-direction: row !important;
grid-template-columns: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
gap: 12px !important;
padding: 4px 12px 14px !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
mask-image: linear-gradient(to right, #000 88%, transparent 100%);
}
.home-prod-grid::-webkit-scrollbar { display: none; }
.home-prod-grid .shop-card {
flex: 0 0 64vw !important;
max-width: 250px !important;
min-width: 0 !important;
width: auto !important;
scroll-snap-align: start !important;
}
.shop-card .card-img {
aspect-ratio: 4 / 5;
height: auto;
}
.shop-card .card-emoji {
font-size: 36px;
}
.shop-card .card-body {
padding: 9px 9px 0;
gap: 3px;
}
.shop-card .card-body h3,
.shop-card .woocommerce-loop-product__title {
font-size: 12px;
line-height: 1.3;
}
.shop-card .card-body p {
font-size: 11px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
line-height: 1.4;
}
.shop-card .card-meta { display: none; }
.shop-card .card-footer {
gap: 5px;
margin-top: auto;
padding-top: 7px;
padding-bottom: 9px; }
.shop-card .price-block .price-now,
.shop-card .price-block .price-now bdi,
.shop-card .price-block .woocommerce-Price-amount {
font-size: 20px;
}
.shop-card .cart-add-btn {
font-size: 11px;
padding: 8px 8px;
border-radius: 8px;
gap: 3px;
white-space: nowrap;
}
.shop-card:active {
transform: scale(0.97);
transition: transform .12s ease;
} .shows-bg .section-inner,
.progs-cards-section .section-inner {
overflow: hidden;
padding-right: 0 !important;
}
.shows-bg .shows-grid,
.progs-cards-section .shows-grid {
display: flex !important;
flex-direction: row;
overflow-x: auto;
gap: 12px;
margin-left: -12px;
padding-left: 12px;
padding-right: 20px;
padding-bottom: 16px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
grid-template-columns: unset !important;
}
.shows-bg .shows-grid::-webkit-scrollbar,
.progs-cards-section .shows-grid::-webkit-scrollbar { display: none; }
.shows-bg .show-card,
.progs-cards-section .show-card {
flex: 0 0 72vw !important;
max-width: 245px;
scroll-snap-align: start;
min-width: 0;
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.shows-bg .show-card:active,
.progs-cards-section .show-card:active {
transform: scale(0.98) !important;
transition: transform .12s ease;
}
.shows-bg .show-thumb,
.progs-cards-section .show-thumb {
aspect-ratio: 4 / 3 !important;
height: auto !important;
}
.show-body { padding: 13px 15px 15px; }
.show-body h3 { font-size: 14px; margin-bottom: 5px; }
.show-body p {
font-size: 12px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.shows-bg > .section-inner > div[style*="text-align"],
.shows-cta-row {
display: none !important;
} .shows-bg .section-inner,
.progs-cards-section .section-inner {
-webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
mask-image: linear-gradient(to right, #000 82%, transparent 100%);
} .testimonials-section .section-inner {
padding: 44px 0 44px 12px !important;
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
mask-image: linear-gradient(to right, #000 82%, transparent 100%);
}
.t-arrow { display: none !important; }
.t-dots  { display: none !important; } .testimonials-carousel {
padding: 0 !important;
max-width: 100% !important;
margin-top: 24px !important;
overflow: hidden;
}
.testimonials-viewport {
overflow-x: auto !important;
overflow-y: visible !important;
border-radius: 0 !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: x mandatory;
}
.testimonials-viewport::-webkit-scrollbar { display: none; } .testimonials-track {
display: flex !important;
flex-direction: row !important;
position: static !important;
min-height: auto !important;
gap: 12px !important;
padding: 4px 20px 16px 4px !important;
width: max-content;
} .testimonial-slide {
position: relative !important;
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
flex: 0 0 80vw !important;
max-width: 300px;
scroll-snap-align: start;
inset: auto !important;
padding: 22px 20px 18px !important;
gap: 14px !important;
min-height: auto !important;
}
.testimonial-slide.is-active {
position: relative !important;
}
.t-quote { font-size: 14px !important; line-height: 1.6; }
.t-quote-mark { font-size: 52px !important; margin-bottom: -10px !important; }
.t-avatar { width: 36px !important; height: 36px !important; font-size: 15px !important; min-width: 36px !important; }
.t-author { font-size: 13px !important; }
.t-role   { font-size: 11px !important; }
.t-meta   { padding-top: 12px !important; } .site-footer .footer-inner {
padding: 40px 20px calc(24px + env(safe-area-inset-bottom)) !important;
} .footer-top {
grid-template-columns: 1fr 1fr !important;
gap: 24px 16px !important;
}
.footer-top .footer-brand {
grid-column: 1 / -1;
} .footer-brand img {
width: 50% !important;
max-width: 170px !important;
height: auto !important;
} .footer-brand > p {
font-size: 15px !important;
line-height: 1.65 !important;
margin-top: 12px !important;
} .footer-top .footer-col.footer-contact {
grid-column: 1 / -1;
text-align: left !important;
}
.footer-contact p,
.footer-contact a {
text-align: left !important;
} .footer-credit-link {
color: inherit;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.15);
transition: color .2s;
}
.footer-credit-link:hover { color: var(--pink); border-bottom-color: var(--pink); }
.footer-bottom { flex-direction: column; text-align: center; gap: 8px; }  .shop-hero h1,
.shop-hero p,
.shop-hero .trust-row { display: none !important; }
.shop-hero {
min-height: 0 !important;
padding: 84px 20px 80px !important;
}
.hero-icons { margin-bottom: 0 !important; } .filter-wrap {
position: relative;
z-index: 10;
margin-top: -28px !important;
border-radius: 20px 20px 0 0;
} .filter-label { display: none !important; }
.filter-btn   { display: none !important; }
.search-wrap  { display: none !important; }
.vs-shop-sort { display: none !important; } .results-bar { display: none !important; } .filter-inner {
padding: 0 12px !important;
gap: 7px !important;
flex-wrap: nowrap !important;
align-items: center !important;
} .m-filter-only { display: block !important; } .filter-cat-select.m-filter-only {
flex: 1 1 0;
min-width: 0;
appearance: none;
-webkit-appearance: none;
background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23E8358A' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 11px center no-repeat;
border: 1.5px solid var(--border);
border-radius: 50px;
padding: 9px 30px 9px 14px;
font-size: 13px;
font-family: var(--vs-font-body);
font-weight: 600;
color: var(--text);
cursor: pointer;
outline: none;
transition: border-color .25s;
-webkit-tap-highlight-color: transparent;
}
.filter-cat-select.m-filter-only:focus { border-color: var(--pink); } .filter-search-btn.m-filter-only {
display: flex !important;
flex-shrink: 0;
align-items: center;
gap: 5px;
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: 50px;
padding: 9px 14px;
font-size: 13px;
font-family: var(--vs-font-body);
font-weight: 600;
color: var(--text2);
cursor: pointer;
transition: border-color .2s, color .2s;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.filter-search-btn.m-filter-only:active { border-color: var(--pink); color: var(--pink); } .m-view-toggle.m-filter-only {
display: flex !important;
flex-shrink: 0;
gap: 3px;
}
.m-view-toggle .view-btn {
background: var(--card-bg);
border: 1.5px solid var(--border);
border-radius: 9px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
cursor: pointer;
color: var(--text2);
transition: all .2s var(--ease);
-webkit-tap-highlight-color: transparent;
flex-shrink: 0;
}
.m-view-toggle .view-btn.active {
background: var(--grad);
color: #fff;
border-color: transparent;
} .shop-trust-strip {
display: flex !important;
justify-content: space-around;
align-items: flex-start;
padding: 16px 12px;
background: var(--card-bg);
border-top: 1.5px solid var(--border);
border-bottom: 1.5px solid var(--border);
margin: 0;
gap: 4px;
}
.trust-strip-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
font-size: 11px;
font-weight: 700;
font-family: var(--vs-font-accent);
color: var(--text2);
text-align: center;
flex: 1;
line-height: 1.3;
}
.trust-strip-item span { font-size: 22px; } .shop-layout {
padding: 18px 12px 40px !important;
} .newsletter {
background: linear-gradient(180deg, #7EC8E3 0%, #B2DFF5 45%, #D8F1FF 100%) !important;
padding: 50px 20px 60px !important;
overflow: hidden;
} .newsletter::before { background: none !important; } .newsletter::after {
content: '';
position: absolute;
width: 180px;
height: 55px;
background: rgba(255,255,255,.75);
border-radius: 50%;
top: 18px;
left: -200px;
box-shadow:
70px 0 0 18px rgba(255,255,255,.7),
-50px 5px 0 12px rgba(255,255,255,.55),
140px -8px 0 24px rgba(255,255,255,.65);
animation: nl-cloud-drift 22s linear infinite;
pointer-events: none;
z-index: 0;
}
@keyframes nl-cloud-drift {
from { transform: translateX(0); }
to   { transform: translateX(calc(100vw + 400px)); }
} .newsletter-inner { position: relative; z-index: 1; }
.newsletter h2 { color: #1E0A2E !important; }
.newsletter p  { color: #2D1A4A !important; }
.nl-badge {
background: rgba(139,53,214,.14) !important;
color: #6B22B8 !important;
border-color: rgba(139,53,214,.3) !important;
}
.nl-input {
background: rgba(255,255,255,.88) !important;
border-color: rgba(139,53,214,.3) !important;
color: #1E0A2E !important;
}
.nl-input::placeholder { color: #8B7AA0 !important; }  .woocommerce-cart .site-main {
padding: 80px 14px 40px !important;
} .cart-layout {
grid-template-columns: 1fr !important;
gap: 24px !important;
} .cart_totals,
.cart-summary {
position: static !important;
top: auto !important;
} .cart-item-card {
padding: 14px !important;
gap: 12px !important;
grid-template-columns: 72px 1fr !important;
}
.cart-item-thumb img,
.cart-item-thumb-img {
width: 72px !important;
height: 72px !important;
}
.cart-item-title { font-size: 14px !important; }
.cart-item-foot  { gap: 10px !important; } .cart-actions {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
} .cart-actions .coupon {
display: flex !important;
max-width: 100% !important;
flex: 1 1 auto !important;
width: 100% !important;
border-radius: 14px !important;
border: 1.5px solid var(--border) !important;
overflow: hidden !important;
background: var(--card-bg) !important;
}
.cart-actions .coupon #coupon_code {
flex: 1 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
height: 50px !important;
padding: 12px 16px !important;
font-size: 15px !important;
color: var(--text) !important;
outline: none !important;
}
.cart-actions .coupon .button[name="apply_coupon"] {
flex-shrink: 0 !important;
border: none !important;
border-radius: 0 !important;
height: 50px !important;
padding: 0 18px !important;
background: var(--grad) !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 13px !important;
white-space: nowrap !important;
cursor: pointer !important;
}
.cart-actions .vs-update-cart {
display: none !important;
}
.cart-continue {
margin-left: 0 !important;
text-align: center !important;
display: block !important;
padding: 8px 0 !important;
width: 100% !important;
}  .woocommerce-checkout .site-main {
padding: 80px 14px 40px !important;
} form.checkout {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
form.checkout #customer_details {
padding: 20px 16px !important;
}
form.checkout .woocommerce-checkout-review-order {
position: static !important;
top: auto !important;
} .woocommerce form .form-row-first,
.woocommerce form .form-row-last,
.woocommerce-page form .form-row-first,
.woocommerce-page form .form-row-last {
float: none !important;
width: 100% !important;
padding: 0 !important;
} .vs-flow-content {
padding: 14px 12px 48px !important;
}
.vs-flow-content .wp-block-woocommerce-checkout-contact-information-block,
.vs-flow-content .wp-block-woocommerce-checkout-shipping-address-block,
.vs-flow-content .wp-block-woocommerce-checkout-billing-address-block,
.vs-flow-content .wp-block-woocommerce-checkout-shipping-method-block,
.vs-flow-content .wp-block-woocommerce-checkout-payment-block,
.vs-flow-content .wp-block-woocommerce-checkout-order-note-block,
.vs-flow-content .wp-block-woocommerce-checkout-totals-block,
.vs-flow-content .wp-block-woocommerce-checkout-order-summary-block,
.vs-flow-content .wp-block-woocommerce-cart-order-summary-block {
padding: 18px 14px !important;
} .vs-flow-bar { margin-top: 60px !important; } .vs-flow-help { display: none !important; }  .cart-empty,
.woocommerce-cart .cart-empty {
padding: 24px 20px 40px !important;
}
.cart-empty .empty-icon { font-size: 64px !important; }
.cart-empty h2 { font-size: 26px !important; } .wp-block-woocommerce-empty-cart-block {
padding: 32px 14px 40px !important;
} .wc-block-cart-items,
.wc-block-cart-items > tbody {
display: block !important;
width: 100% !important;
}
.wc-block-cart-items .wc-block-cart-items__row {
display: grid !important;
grid-template-columns: 72px 1fr !important;
grid-template-rows: auto auto !important;
gap: 4px 12px !important;
align-items: start !important;
padding: 14px !important;
margin-bottom: 10px !important;
}
.wc-block-cart-items td.wc-block-cart-item__image {
grid-column: 1 !important;
grid-row: 1 / 3 !important;
padding: 0 !important;
border: none !important;
}
.wc-block-cart-items td.wc-block-cart-item__product {
grid-column: 2 !important;
grid-row: 1 !important;
padding: 0 !important;
border: none !important;
}
.wc-block-cart-items td.wc-block-cart-item__quantity,
.wc-block-cart-items td.wc-block-cart-item__total {
grid-column: 2 !important;
padding: 0 !important;
border: none !important;
} .wc-block-cart-item__image img,
.wc-block-cart-items td.wc-block-cart-item__image img {
width: 72px !important;
height: 72px !important;
} .wc-block-components-totals-wrapper,
.wp-block-woocommerce-cart-order-summary-block {
padding: 20px 16px !important;
} .wp-block-woocommerce-filled-cart-block {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.wp-block-woocommerce-cart-items-block,
.wp-block-woocommerce-cart-totals-block {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
flex: 1 0 100% !important;
} .wc-block-components-sidebar-layout,
.wc-block-components-sidebar-layout.wc-block-checkout,
.wc-block-components-sidebar-layout[data-large],
.wc-block-components-sidebar-layout[data-medium],
.wc-block-components-sidebar-layout[data-small],
.wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
grid-template-columns: 1fr !important;
grid-template-areas: 'main' 'sidebar' !important;
row-gap: 16px !important;
}
.wc-block-components-sidebar-layout .wc-block-components-sidebar,
.wc-block-components-sidebar-layout > .wc-block-components-sidebar {
position: static !important;
top: auto !important;
}  .single-product .vs-breadcrumbs {
padding-top: var(--vs-nav-clear) !important;
padding-bottom: 4px !important;
padding-left: 10px !important;
padding-right: 10px !important;
} .single-product div.product {
padding: 0 0 56px !important;
} .product-layout {
grid-template-columns: 1fr !important;
gap: 0 !important;
margin-bottom: 0 !important;
padding: 10px !important;
} .single-product .vs-gallery-wrap {
margin: 0 !important;
overflow: hidden !important;
} .gallery-main {
border-radius: 0 0 24px 24px !important;
aspect-ratio: 1 !important;
} .gallery-main img,
.gallery-main #vsMainImg {
transition: opacity .18s ease, transform .22s ease !important;
} .gallery-thumbs {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
gap: 8px !important;
margin-top: 10px !important;
padding: 4px 14px 14px !important;
grid-template-columns: none !important;
}
.gallery-thumbs::-webkit-scrollbar { display: none !important; }
button.gallery-thumb,
.gallery-thumb {
flex: 0 0 68px !important;
width: 68px !important;
min-width: 68px !important;
height: 68px !important;
border-radius: 10px !important;
transition: transform .15s var(--spring), box-shadow .15s !important;
}
button.gallery-thumb.active,
.gallery-thumb.active {
box-shadow: 0 0 0 3px var(--pink) !important;
transform: scale(1.05) !important;
} .single-product .entry-summary {
background: var(--card-bg) !important;
border-radius: 20px !important;
box-shadow: 0 2px 20px rgba(139,53,214,.07) !important; padding: 20px 10px 16px !important;
} .product_title,
.product_title.entry-title {
font-size: clamp(22px, 7vw, 28px) !important;
line-height: 1.2 !important;
margin-bottom: 8px !important;
} .summary .price .woocommerce-Price-amount,
.single-product .price .woocommerce-Price-amount {
font-size: 30px !important;
}
.summary .price del .woocommerce-Price-amount,
.single-product .price del .woocommerce-Price-amount {
font-size: 15px !important;
} .woocommerce-product-details__short-description {
font-size: 14px !important;
padding: 12px 16px 12px 42px !important;
border-radius: 12px !important;
margin-bottom: 16px !important;
}
.woocommerce-product-details__short-description::before {
top: 12px !important;
left: 14px !important;
font-size: 16px !important;
} .product-meta-chips {
gap: 6px !important;
margin-bottom: 16px !important;
}
.meta-chip {
font-size: 11px !important;
padding: 5px 12px !important;
} .cart {
flex-wrap: nowrap !important;
gap: 10px !important;
margin-bottom: 16px !important;
}
.quantity { flex-shrink: 0 !important; }
.woocommerce form.cart .single_add_to_cart_button,
.single_add_to_cart_button {
flex: 1 1 auto !important;
justify-content: center !important;
min-width: 0 !important;
padding: 14px 18px !important;
font-size: 15px !important;
white-space: nowrap !important;
} .product-actions {
gap: 8px !important;
margin-bottom: 16px !important;
}
.action-btn {
flex: 1 !important;
justify-content: center !important;
padding: 10px 8px !important;
font-size: 12px !important;
border-radius: 50px !important;
} .trust-badges {
gap: 8px !important;
margin-bottom: 16px !important;
}
.trust-badge {
padding: 10px 12px !important;
border-radius: 12px !important;
gap: 8px !important;
}
.trust-badge .tb-icon { font-size: 20px !important; }
.trust-badge .tb-text { font-size: 11px !important; }
.trust-badge .tb-text strong { font-size: 12px !important; } .product_meta { font-size: 12px !important; } .sticky-atc {
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100vw !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
gap: 8px !important;
}
.sticky-atc-thumb { width: 38px !important; height: 38px !important; flex-shrink: 0 !important; }
.sticky-atc-info { flex: 1 !important; min-width: 0 !important; overflow: hidden !important; }
.sticky-atc-title { font-size: 12px !important; }
.sticky-atc-price { font-size: 11px !important; }
.sticky-atc .btn-primary {
flex-shrink: 0 !important;
white-space: nowrap !important;
min-width: 0 !important;
max-width: 160px !important;
padding: 10px 14px !important;
font-size: 13px !important;
} .woocommerce-tabs,
.tabs-wrap {
padding: 0 10px 40px !important;
margin-top: 12px !important;
} .woocommerce-tabs ul.tabs,
.tabs-nav {
display: flex !important;
overflow-x: auto !important;
flex-wrap: nowrap !important;
scrollbar-width: none !important;
-webkit-overflow-scrolling: touch !important;
gap: 8px !important;
margin-bottom: 16px !important;
border-bottom: none !important;
padding-bottom: 0 !important;
}
.woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none !important; } .woocommerce-tabs ul.tabs li,
.tabs-nav li {
background: transparent !important;
border: none !important;
margin: 0 !important;
} .woocommerce-tabs ul.tabs li a,
.tab-btn {
display: inline-flex !important;
align-items: center !important;
background: var(--bg2) !important;
border: 1.5px solid var(--border) !important;
border-radius: 50px !important;
padding: 8px 16px !important;
font-size: 13px !important;
font-weight: 700 !important;
color: var(--text2) !important;
white-space: nowrap !important;
transition: all .2s var(--ease) !important;
text-decoration: none !important;
}
.woocommerce-tabs ul.tabs li a::before { display: none !important; }
.woocommerce-tabs ul.tabs li a::after  { display: none !important; } .woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li.active a:focus,
.tab-btn.active {
background: var(--grad) !important;
border-color: transparent !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(232,53,138,.3) !important;
} .woocommerce-Tabs-panel,
.tab-panel {
background: var(--card-bg) !important;
border-radius: 18px !important;
padding: 20px 16px !important;
border: 1.5px solid var(--border) !important;
} .woocommerce-Tabs-panel--description h2,
#tab-description h2 { display: none !important; } .woocommerce-Tabs-panel--additional_information h2,
#tab-additional_information h2 { display: none !important; } .commentlist {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
padding: 0 !important;
margin: 0 0 16px !important;
list-style: none !important;
}
.commentlist li.review { list-style: none !important; } .commentlist .comment_container {
display: block !important;
background: var(--card-bg) !important;
border: 1.5px solid var(--border) !important;
border-radius: 16px !important;
padding: 0 !important;
box-shadow: 0 2px 16px rgba(139,53,214,.06) !important;
overflow: hidden !important;
position: relative !important;
} .commentlist .comment_container::before {
content: '' !important;
display: block !important;
height: 3px !important;
background: var(--grad) !important;
border-radius: 0 !important;
} .commentlist .comment_container img.avatar {
display: none !important;
} .commentlist .comment_container .comment-text {
padding: 14px 16px 16px !important;
} .commentlist .star-rating {
font-size: 14px !important;
margin-bottom: 10px !important;
float: none !important;
} .commentlist p.meta,
.commentlist .woocommerce-review__author {
font-size: 13px !important;
font-weight: 700 !important;
color: var(--text) !important;
margin-bottom: 4px !important;
display: block !important;
}
.commentlist .woocommerce-review__dash { display: none !important; }
.commentlist time.woocommerce-review__published-date {
display: block !important;
font-size: 11px !important;
color: var(--muted) !important;
margin-bottom: 10px !important;
} .commentlist .description p {
font-size: 14px !important;
line-height: 1.65 !important;
color: var(--text2) !important;
margin: 0 !important;
} .commentlist .woocommerce-review__verified {
display: inline-flex !important;
align-items: center !important;
font-size: 11px !important;
color: var(--mint, #34D9B5) !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
} #review_form_wrapper,
#review_form {
margin-top: 16px !important;
padding-top: 16px !important;
border-top: 1.5px solid var(--border) !important;
}
#review_form .comment-form-rating { margin-bottom: 12px !important; } .vs-product-reviews {
padding: 32px 0 !important;
margin-top: 24px !important;
}
.vs-product-reviews-inner { padding: 0 10px !important; }
.vs-reviews-head {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
margin-bottom: 20px !important;
}
.vs-reviews-head h2 { font-size: 22px !important; margin-top: 0 !important; }
.vs-reviews-summary { padding: 8px 16px !important; }
.vs-testimonial-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.vs-testimonial {
padding: 20px !important;
min-height: auto !important;
gap: 14px !important;
}
.vs-testimonial-text { font-size: 14px !important; }
.vs-testimonial-quote { font-size: 64px !important; } .single-product div.product > .related.products,
.single-product div.product > .upsells.products {
padding: 0 !important;
margin-top: 32px !important;
overflow: hidden !important;
}
.related.products > h2,
.upsells.products > h2 {
font-size: 20px !important;
margin-bottom: 14px !important;
padding: 0 10px !important;
}  .related.products .products.prod-grid,
.upsells.products .products.prod-grid,
.related.products .prod-grid,
.upsells.products .prod-grid,
.related.products ul.products,
.upsells.products ul.products {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
overflow-x: visible !important;
gap: 10px !important;
scroll-snap-type: none !important;
-webkit-overflow-scrolling: auto !important;
padding: 4px 10px 16px !important;
-webkit-mask-image: none !important;
mask-image: none !important;
} .related.products .prod-grid .shop-card,
.upsells.products .prod-grid .shop-card,
.related.products ul.products > li.product,
.upsells.products ul.products > li.product {
flex: unset !important;
max-width: none !important;
width: 100% !important;
scroll-snap-align: none !important;
min-width: 0 !important;
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.related.products .prod-grid .shop-card:active,
.upsells.products .prod-grid .shop-card:active {
transform: scale(0.97) !important;
}  .woocommerce-cart .vs-flow-bar,
.woocommerce-checkout .vs-flow-bar {
margin-top: 56px !important;
} .wc-block-cart-item__product .wc-block-components-product-name,
.wc-block-cart-item__product-name a {
font-size: 14px !important;
line-height: 1.3 !important;
}
.wc-block-components-product-price .wc-block-components-formatted-money-amount {
font-size: 14px !important;
} .wc-block-components-quantity-stepper {
height: 36px !important;
border-radius: 10px !important;
}
.wc-block-components-quantity-stepper__button {
width: 32px !important;
min-width: 32px !important;
}
.wc-block-components-quantity-stepper input[type="number"] {
width: 38px !important;
font-size: 14px !important;
} .wc-block-cart-item__remove-link {
font-size: 11px !important;
padding: 3px 8px !important;
margin-top: 4px !important;
display: inline-flex !important;
border-radius: 50px !important;
} .wc-block-components-order-summary-item {
padding: 12px 0 !important;
}
.wc-block-components-totals-item {
font-size: 14px !important;
}
.wc-block-components-totals-item.wc-block-components-totals-footer-item {
font-size: 16px !important;
padding-top: 12px !important;
} .wc-block-components-totals-coupon__content {
gap: 8px !important;
}
.wc-block-components-totals-coupon__content input {
height: 44px !important;
font-size: 14px !important;
border-radius: 10px !important;
}
.wc-block-components-totals-coupon__content button {
height: 44px !important;
padding: 0 16px !important;
font-size: 14px !important;
border-radius: 10px !important;
white-space: nowrap !important;
} .wp-block-woocommerce-proceed-to-checkout-block a,
.wc-block-cart__submit-container a {
display: flex !important;
justify-content: center !important;
min-height: 52px !important;
font-size: 16px !important;
border-radius: 16px !important;
padding: 14px 24px !important;
width: 100% !important;
} .wc-block-components-express-payment-continue-rule {
margin: 12px 0 !important;
font-size: 12px !important;
}  .wc-block-components-checkout-step {
padding: 16px 14px !important;
border-radius: 16px !important;
margin-bottom: 10px !important;
}
.wc-block-components-checkout-step__heading-content {
font-size: 15px !important;
}
.wc-block-components-checkout-step__description {
font-size: 13px !important;
} .wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-country-input input {
height: 48px !important;
font-size: 15px !important;
border-radius: 12px !important;
padding: 12px 14px !important;
}
.wc-block-components-text-input label,
.wc-block-components-select label {
font-size: 13px !important;
} .wc-block-components-address-form .wc-block-components-form-step-field-first-name,
.wc-block-components-address-form .wc-block-components-form-step-field-last-name {
width: 100% !important;
flex: 1 0 100% !important;
} .wc-block-components-checkout-place-order-button {
width: 100% !important;
min-height: 54px !important;
font-size: 16px !important;
border-radius: 16px !important;
padding: 16px 24px !important;
} .wc-block-components-payment-method-label__img {
max-height: 20px !important;
}
.wc-block-components-radio-control .wc-block-components-radio-control-option__label {
font-size: 14px !important;
} .wc-block-components-order-summary-item__image img {
width: 48px !important;
height: 48px !important;
border-radius: 8px !important;
}
.wc-block-components-order-summary-item__full-description {
font-size: 13px !important;
} .wc-block-components-checkout-place-order__privacy-policy,
.wc-block-checkout__terms {
font-size: 12px !important;
line-height: 1.5 !important;
} .show-card,
.shop-card,
.prog-card {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.single-product .gallery-main {
-webkit-tap-highlight-color: transparent;
}
.btn-primary:active,
.btn-outline:active,
.cart-add-btn:active {
transform: scale(0.96) !important;
transition: transform .1s ease !important;
}
.single_add_to_cart_button:active {
transform: scale(0.97) !important;
transition: transform .1s ease !important;
}
.gallery-thumb:active {
transform: scale(0.94) !important;
transition: transform .1s ease !important;
}
.wishlist-btn:active {
transform: scale(1.3) !important;
transition: transform .15s var(--spring) !important;
}
} .vs-swipe-hint { display: none; }
@keyframes vs-sh-fade {
0%, 100% { opacity: 0; }
12%, 82%  { opacity: 1; }
}
@keyframes vs-sh-wiggle {
0%   { transform: translateX(0); }
22%  { transform: translateX(-16px); }
48%  { transform: translateX(16px); }
68%  { transform: translateX(-8px); }
82%  { transform: translateX(8px); }
93%  { transform: translateX(0); }
100% { transform: translateX(0); }
} @media (max-width: 767px) { .hero {
min-height: 0 !important;
overflow: hidden !important;
} .vs-hero-slider {
display: grid !important;
grid-template-columns: 1fr !important;
height: auto !important;
min-height: 0 !important;
flex: 0 0 auto !important;
padding: 0 !important;
overflow: hidden !important;
} .vs-slide {
grid-row: 1 !important;
grid-column: 1 !important;
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
height: auto !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
background: transparent !important;
overflow: hidden !important;
visibility: hidden !important;
pointer-events: none !important;
} .vs-slide--active,
.vs-slide--entering,
.vs-slide--exiting {
visibility: visible !important;
}
.vs-slide--active { pointer-events: auto !important; } .vs-slide::before { display: none !important; } @keyframes vs-mob-exit-up {
from { opacity: 1; transform: translateY(0); }
to   { opacity: 0; transform: translateY(-10px); }
}
@keyframes vs-mob-exit-fade {
from { opacity: 1; }
to   { opacity: 0; }
}
@keyframes vs-mob-exit-down {
from { opacity: 1; transform: translateY(0); }
to   { opacity: 0; transform: translateY(14px); }
}
@keyframes vs-mob-exit-photo {
from { opacity: 1; transform: scale(1) translateY(0); }
to   { opacity: 0; transform: scale(0.88) translateY(-6px); }
} .vs-slide--exiting [data-anim] {
animation: vs-mob-exit-up 280ms ease-in both !important;
animation-delay: calc((4 - var(--anim-i, 0)) * 45ms) !important;
} .vs-slide--exiting .hero-btns,
.vs-slide--exiting .vs-slide-content > a.btn-primary {
animation: vs-mob-exit-down 260ms ease-in both !important;
animation-delay: 0ms !important;
} .vs-slide--exiting .vs-s1-photo {
animation: vs-mob-exit-photo 280ms ease-in both !important;
animation-delay: calc((4 - 0) * 45ms) !important;
} .vs-slide--exiting .vs-rainbow-arc-wrap {
animation: vs-mob-exit-fade 280ms ease-in both !important;
animation-delay: calc((4 - var(--anim-i, 0)) * 45ms) !important;
} @keyframes vs-mob-enter-fade {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes vs-mob-enter-eyebrow {
0%   { opacity: 0; transform: translateY(-16px) scale(0.85); }
70%  { transform: translateY(2px) scale(1.03); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes vs-mob-enter-title {
from { opacity: 0; transform: translateY(18px); filter: blur(4px); }
to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes vs-mob-enter-btn {
0%   { opacity: 0; transform: translateY(22px); }
65%  { transform: translateY(-3px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes vs-mob-enter-photo {
from { opacity: 0; transform: scale(0.88) translateY(8px); }
to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes vs-mob-enter-visual {
from { opacity: 0; transform: scale(0.9) translateY(10px); }
to   { opacity: 1; transform: scale(1) translateY(0); }
} .vs-hero-slider .vs-slide--entering [data-anim] {
animation: vs-mob-enter-fade 500ms ease both !important;
animation-delay: calc(var(--anim-i, 0) * 60ms + 30ms) !important;
} .vs-hero-slider .vs-slide--entering .hero-eyebrow {
animation: vs-mob-enter-eyebrow 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
animation-delay: calc(var(--anim-i, 0) * 60ms + 30ms) !important;
} .vs-hero-slider .vs-slide--entering .vs-slide-h1,
.vs-hero-slider .vs-slide--entering .vs-slide-h2 {
animation: vs-mob-enter-title 480ms cubic-bezier(0.22, 1, 0.36, 1) both !important;
animation-delay: calc(var(--anim-i, 0) * 60ms + 30ms) !important;
} .vs-hero-slider .vs-slide--entering .hero-btns,
.vs-hero-slider .vs-slide--entering .vs-slide-content > a.btn-primary {
animation: vs-mob-enter-btn 420ms cubic-bezier(0.34, 1.3, 0.64, 1) both !important;
animation-delay: calc(var(--anim-i, 0) * 60ms + 30ms) !important;
} .vs-hero-slider .vs-slide--entering .vs-s1-photo {
animation: vs-mob-enter-photo 720ms cubic-bezier(0.34, 1.15, 0.64, 1) both !important;
animation-delay: 30ms !important;
} .vs-hero-slider .vs-slide--entering .vs-kid,
.vs-hero-slider .vs-slide--entering .vs-fi {
animation: vs-mob-enter-visual 500ms cubic-bezier(0.34, 1.2, 0.64, 1) both !important;
animation-delay: calc(var(--anim-i, 0) * 60ms + 30ms) !important;
} .vs-hero-slider .vs-slide--entering .vs-slide-visual {
animation: vs-mob-enter-visual 650ms cubic-bezier(0.34, 1.1, 0.64, 1) both !important;
animation-delay: 30ms !important;
} .vs-slide-inner,
.vs-slide-inner--tamara {
display: flex !important;
flex-direction: column !important;
grid-template-columns: unset !important;
height: auto !important;
min-height: 0 !important;
padding: 16px 20px 0 !important;
gap: 14px !important;
align-items: stretch !important;
background: transparent !important;
} .vs-slide-visual,
.vs-s0-illus,
.vs-s1-photo {
order: 1 !important;
flex: 0 0 240px !important;
height: 240px !important;
min-height: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
position: relative !important;
background: transparent !important;
border-radius: 14px !important;
} .vs-slide-content {
order: 2 !important;
flex: 1 1 auto !important;
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: center !important;
text-align: center !important;
padding: 0 0 20px !important;
gap: 10px !important;
} .hero-trust              { display: none !important; }
.hero-btns .btn-outline  { display: none !important; }
.founder-chip            { display: none !important; }
.vs-s2-meta              { display: none !important; }
.vs-s2-author            { display: none !important; }
.vs-slide-content > p    { display: none !important; } .hero-eyebrow {
display: flex !important;
align-items: center !important;
justify-content: center !important;
order: 1 !important;
font-size: 11px !important;
margin-bottom: 0 !important;
padding: 4px 10px !important;
flex-shrink: 0 !important;
} .vs-slide-h1 {
order: 2 !important;
font-size: clamp(26px, 8vw, 40px) !important;
line-height: 1.1 !important;
margin: 0 !important;
flex-shrink: 0 !important;
}
.vs-slide-h2 {
order: 2 !important;
font-size: clamp(22px, 6.5vw, 34px) !important;
line-height: 1.15 !important;
margin: 0 !important;
flex-shrink: 0 !important;
} .hero-btns {
order: 3 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
margin-top: auto !important;
gap: 0 !important;
}
.hero-btns .btn-primary,
.vs-slide-content > a.btn-primary {
width: 100% !important;
box-sizing: border-box !important;
text-align: center !important;
padding: 14px 20px !important;
}
.vs-slide-content > a.btn-primary {
order: 3 !important;
align-self: stretch !important;
margin-top: auto !important;
} .vs-blob--1,
.vs-blob--2,
.vs-blob--3 { display: none !important; }
.vs-slide[data-slide="0"] .vs-s0-illus { display: none !important; }
.vs-slide[data-slide="0"] .vs-slide-content {
justify-content: center !important;
text-align: center !important;
align-items: center !important;
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.vs-s0-illus {
border-radius: 0 !important;
overflow: visible !important;
} .vs-s0-img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center bottom !important;
} @keyframes vs-sun-spin {
from { transform: rotate(0deg); }
to   { transform: rotate(360deg); }
}
.vs-scene-sun {
display: block !important;
top: 12px !important;
right: 20px !important;
font-size: 44px !important;
line-height: 1 !important;
z-index: 2 !important;
animation: vs-sun-spin 25s linear infinite !important;
}
.vs-scene-tree--1 {
display: block !important;
bottom: 0 !important;
left: 2px !important;
font-size: 50px !important;
line-height: 1 !important;
z-index: 1 !important;
}
.vs-scene-tree--2 {
display: block !important;
bottom: 0 !important;
right: 2px !important;
font-size: 44px !important;
line-height: 1 !important;
z-index: 1 !important;
} .vs-slide-inner--tamara {
flex-direction: row !important;
align-items: flex-start !important;
gap: 14px !important;
padding: 16px 16px 0 !important;
}
.vs-s1-photo {
flex: 0 0 120px !important;
height: 162px !important;
width: 120px !important;
order: 1 !important;
align-self: flex-start !important;
transform: none !important;
border-radius: 12px !important;
border: none !important;
box-shadow: 0 16px 36px rgba(139, 53, 214, 0.28) !important;
}
.vs-slide[data-slide="1"] .vs-slide-content {
order: 2 !important;
text-align: left !important;
align-items: flex-start !important;
flex: 1 1 auto !important;
padding: 0 0 20px !important;
}
.vs-slide[data-slide="1"] .hero-eyebrow {
justify-content: flex-start !important;
}
.vs-slide[data-slide="1"] .vs-slide-h2 {
font-size: clamp(18px, 5.5vw, 26px) !important;
}
.vs-s1-img {
width: 100% !important;
height: 100% !important;
transform: none !important;
border-radius: 14px !important;
border: none !important;
box-shadow: none !important;
object-fit: cover !important;
object-position: center top !important;
}
.vs-s1-photo::before { display: none !important; }
.vs-s1-photo-placeholder {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
border-radius: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 90px !important;
} .vs-slide[data-slide="1"] .vs-slide-h2 {
padding-top: 6px !important;
padding-bottom: 4px !important;
} .vs-slide[data-slide="2"] .vs-slide-visual {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
border-radius: 0 !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 0 !important;
}
.vs-s2-cover {
width: 130px !important;
height: 175px !important;
border-radius: 12px !important;
}
.vs-s2-cover-badge {
font-size: 8px !important;
padding: 4px 8px !important;
} .vs-slider-controls,
.vs-slider-arrow { display: none !important; } .vs-swipe-hint {
display: block !important;
position: absolute !important;
top: 190px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 30 !important;
pointer-events: none !important;
white-space: nowrap !important;
animation: vs-sh-fade 4s ease-in-out 1.8s both !important;
}
.vs-sh-icon {
display: flex !important;
align-items: center !important;
gap: 8px !important;
background: rgba(255, 255, 255, 0.92) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border-radius: 50px !important;
padding: 7px 18px !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #333 !important;
letter-spacing: 0.02em !important;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.18) !important;
animation: vs-sh-wiggle 4s ease-in-out 1.8s both !important;
}
.vs-sh-l,
.vs-sh-r {
font-size: 16px !important;
font-weight: 700 !important;
color: var(--pink, #E8358A) !important;
}
} @media (max-width: 767px) {
.hero.vs-hero .vs-hero-slider {
padding-bottom: 70px !important;
}
.hero.vs-hero .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-inner {
display: grid !important;
grid-template-columns: 1fr !important;
padding: 18px 20px 0 !important;
gap: 20px !important;
align-items: start !important;
}
.hero.vs-hero .vs-slide-content {
order: 1 !important;
align-items: flex-start !important;
text-align: left !important;
padding: 0 0 16px !important;
gap: 12px !important;
}
.hero.vs-hero .vs-slide-visual,
.hero.vs-hero .vs-s1-photo,
.hero.vs-hero .vs-s0-illus {
order: 2 !important;
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
border-radius: 20px !important;
}
.hero.vs-hero .vs-slide[data-slide="1"] .vs-s1-photo {
order: 1 !important;
}
.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-content {
order: 2 !important;
}
.hero.vs-hero .hero-eyebrow {
display: inline-flex !important;
justify-content: flex-start !important;
padding: 7px 12px !important;
font-size: 11px !important;
}
.hero.vs-hero .vs-slide-h1 {
font-size: clamp(42px, 11vw, 62px) !important;
margin: 0 !important;
}
.hero.vs-hero .vs-slide-h2 {
font-size: clamp(30px, 8.4vw, 42px) !important;
margin: 0 !important;
}
.hero.vs-hero .vs-slide-content > p {
display: block !important;
font-size: 16px !important;
line-height: 1.65 !important;
}
.hero.vs-hero .hero-btns {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
gap: 10px !important;
margin-top: 4px !important;
}
.hero.vs-hero .hero-btns .btn-outline,
.hero.vs-hero .hero-btns .btn-primary,
.hero.vs-hero .vs-slide-content > a.btn-primary {
display: inline-flex !important;
width: 100% !important;
justify-content: center !important;
}
.hero.vs-hero .hero-trust {
display: flex !important;
gap: 8px !important;
}
.hero.vs-hero .founder-chip {
display: flex !important;
}
.hero.vs-hero .vs-s2-meta,
.hero.vs-hero .vs-s2-author {
display: block !important;
}
.hero.vs-hero .vs-media-card,
.hero.vs-hero .vs-media-card--photo {
width: 100% !important;
min-height: 280px !important;
transform: none !important;
}
.hero.vs-hero .vs-media-card--photo {
max-width: 100% !important;
}
.hero.vs-hero .vs-media-card--book {
min-height: 320px !important;
}
.hero.vs-hero .vs-media-card--fallback {
min-height: 320px !important;
padding: 16px !important;
}
.hero.vs-hero .vs-fallback-panel {
padding: 20px !important;
}
.hero.vs-hero .vs-fallback-panel strong {
font-size: 24px !important;
}
.hero.vs-hero .vs-media-card-book-copy {
left: 18px !important;
right: 18px !important;
bottom: 86px !important;
}
.hero.vs-hero .vs-media-card-book-copy strong {
font-size: 26px !important;
}
.hero.vs-hero .vs-slider-controls {
display: flex !important;
bottom: 16px !important;
width: auto !important;
gap: 12px !important;
}
.hero.vs-hero .vs-slider-arrow {
display: none !important;
}
.hero.vs-hero .vs-slider-dots {
display: flex !important;
}
.hero.vs-hero .vs-swipe-hint {
top: auto !important;
bottom: 44px !important;
}
} @media (max-width: 767px) {
.hero.vs-hero {
min-height: 0 !important;
}
.hero.vs-hero .vs-hero-slider {
display: grid !important;
grid-template-columns: 1fr !important;
min-height: clamp(680px, calc(100svh - 88px), 860px) !important;
height: auto !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}
.hero.vs-hero .vs-slide {
grid-area: 1 / 1 !important;
position: relative !important;
inset: auto !important;
height: auto !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
}
.hero.vs-hero .vs-slide--active,
.hero.vs-hero .vs-slide--entering,
.hero.vs-hero .vs-slide--exiting {
visibility: visible !important;
opacity: 1 !important;
}
.hero.vs-hero .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-inner {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
min-height: clamp(680px, calc(100svh - 88px), 860px) !important;
padding: 20px 20px 28px !important;
gap: 18px !important;
align-content: start !important;
align-items: start !important;
}
.hero.vs-hero .vs-slide-visual,
.hero.vs-hero .vs-s1-photo,
.hero.vs-hero .vs-s0-illus {
order: 1 !important;
display: flex !important;
align-items: stretch !important;
justify-content: stretch !important;
height: 280px !important;
min-height: 280px !important;
border-radius: 24px !important;
overflow: hidden !important;
}
.hero.vs-hero .vs-slide-content {
order: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
gap: 14px !important;
padding: 0 !important;
min-height: 0 !important;
}
.hero.vs-hero .vs-media-card,
.hero.vs-hero .vs-media-card--photo,
.hero.vs-hero .vs-media-card--founder,
.hero.vs-hero .vs-media-card--book,
.hero.vs-hero .vs-media-card--fallback {
width: 100% !important;
max-width: none !important;
height: 100% !important;
min-height: 280px !important;
border-radius: 24px !important;
transform: none !important;
box-shadow: 0 22px 48px rgba(30, 10, 46, 0.12) !important;
}
.hero.vs-hero .vs-media-card--founder {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-media-card-img,
.hero.vs-hero .vs-s1-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
.hero.vs-hero .vs-s1-img {
object-fit: contain !important;
object-position: center bottom !important;
border-radius: 0 !important;
filter: drop-shadow(0 14px 22px rgba(30, 10, 46, 0.12)) !important;
}
.hero.vs-hero .vs-media-card--founder::before {
inset: auto 8% 0 8% !important;
height: 16% !important;
filter: blur(10px) !important;
}
.hero.vs-hero .vs-media-card--book {
width: min(100%, 280px) !important;
margin-inline: auto !important;
border-radius: 16px 20px 20px 16px !important;
box-shadow: 0 22px 44px rgba(30, 10, 46, 0.16), 10px 8px 0 rgba(255, 255, 255, 0.64) !important;
transform: perspective(1200px) rotateY(-12deg) !important;
overflow: visible !important;
}
.hero.vs-hero .vs-media-card--book::after {
left: -10px !important;
width: 14px !important;
}
.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-h1 {
font-size: clamp(36px, 10vw, 52px) !important;
line-height: 1.02 !important;
max-width: 10ch !important;
}
.hero.vs-hero .vs-slide-h2 {
font-size: clamp(28px, 8vw, 38px) !important;
line-height: 1.06 !important;
margin: 0 !important;
}
.hero.vs-hero .hero-eyebrow {
display: inline-flex !important;
justify-content: flex-start !important;
padding: 7px 12px !important;
font-size: 10px !important;
letter-spacing: 0.08em !important;
}
.hero.vs-hero .vs-slide-content > p {
display: block !important;
font-size: 15px !important;
line-height: 1.62 !important;
max-width: 34ch !important;
margin: 0 !important;
}
.hero.vs-hero .hero-btns {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
gap: 10px !important;
margin-top: 2px !important;
}
.hero.vs-hero .hero-btns .btn-primary,
.hero.vs-hero .hero-btns .btn-outline,
.hero.vs-hero .vs-slide-content > a.btn-primary {
display: inline-flex !important;
width: 100% !important;
justify-content: center !important;
}
.hero.vs-hero .hero-trust,
.hero.vs-hero .founder-chip,
.hero.vs-hero .vs-s2-meta,
.hero.vs-hero .vs-s2-author {
display: flex !important;
}
.hero.vs-hero .hero-trust {
flex-wrap: wrap !important;
gap: 8px !important;
}
.hero.vs-hero .founder-chip {
align-items: center !important;
gap: 8px !important;
}
.hero.vs-hero .vs-media-card-overlay {
left: 16px !important;
right: 16px !important;
bottom: 16px !important;
gap: 8px !important;
}
.hero.vs-hero .vs-media-pill {
font-size: 10px !important;
padding: 8px 12px !important;
}
.hero.vs-hero .vs-media-card-book-copy {
left: 16px !important;
right: 16px !important;
bottom: 72px !important;
}
.hero.vs-hero .vs-media-card-book-copy strong {
font-size: 24px !important;
}
.hero.vs-hero .vs-media-card--fallback {
padding: 16px !important;
}
.hero.vs-hero .vs-fallback-panel {
padding: 18px !important;
}
.hero.vs-hero .vs-fallback-panel strong {
font-size: 24px !important;
}
.hero.vs-hero .vs-slider-controls,
.hero.vs-hero .vs-slider-arrow,
.hero.vs-hero .vs-slider-dots,
.hero.vs-hero .vs-swipe-hint {
display: none !important;
}
}
@media (max-width: 960px) {
.page-hero--editorial {
padding: 92px 24px 18px !important;
}
body.vs-generic-page .site-nav,
body.vs-generic-page .site-header.is-sticky .site-nav {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
.page-hero--editorial .page-hero-content {
max-width: none !important;
}
.page-hero--editorial h1 {
max-width: 12ch !important;
font-size: clamp(30px, 10vw, 46px) !important;
line-height: 1 !important;
}
.page-hero--about h1,
.page-hero--about p,
.page-hero--about .hero-eyebrow {
text-align: center !important;
}
.vs-page-shell {
padding: 22px 24px 72px !important;
border-radius: 26px !important;
backdrop-filter: none !important;
}
.vs-page-intro-text {
font-size: 18px !important;
line-height: 1.7 !important;
max-width: none !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.vs-page-featured {
float: none !important;
width: 100% !important;
margin: 0 !important;
border-radius: 24px !important;
box-shadow: 0 24px 50px rgba(30, 10, 46, 0.12) !important;
margin-bottom: 22px !important;
}
.vs-page-featured img {
aspect-ratio: 4 / 3 !important;
}
body.vs-page-about .vs-page-body {
max-width: none !important;
}
.vs-page-body > *,
.vs-page-body h2,
.vs-page-body h3,
.vs-page-body h4,
.vs-page-body ul,
.vs-page-body ol,
.vs-page-body blockquote,
.vs-page-body .wp-block-image,
.vs-page-body .wp-block-gallery,
.vs-page-body .wp-block-columns,
.vs-page-body .wp-block-table,
.vs-page-body .page-links {
max-width: none !important;
}
.vs-page-body > p:first-child,
.vs-page-article p,
.vs-page-article li {
font-size: 16px !important;
line-height: 1.75 !important;
}
.vs-page-article h2 {
font-size: clamp(28px, 8vw, 36px) !important;
}
.vs-page-article h3 {
font-size: clamp(20px, 6vw, 26px) !important;
}
.vs-page-article blockquote {
padding: 22px 22px !important;
border-radius: 22px !important;
}
}
@media (max-width: 960px) {
body.vs-page-about .page-hero--about {
padding: 104px 22px 40px !important;
}
body.vs-page-about .page-hero--about h1 {
max-width: none !important;
font-size: 46px !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
body.vs-page-about .page-hero--about p {
max-width: 32rem !important;
font-size: 17px !important;
line-height: 1.68 !important;
}
body.vs-page-about .vs-page-shell {
padding: 32px 22px 76px !important;
}
body.vs-page-about .vs-page-featured {
float: none !important;
width: min(100%, 340px) !important;
margin: 0 auto 28px !important;
border-radius: 16px !important;
}
body.vs-page-about .vs-page-featured img {
aspect-ratio: 4 / 5 !important;
}
body.vs-page-about .vs-page-body > p:first-child,
body.vs-page-about .vs-page-article p,
body.vs-page-about .vs-page-article li {
font-size: 16px !important;
line-height: 1.76 !important;
}
body.vs-page-about .vs-page-article blockquote {
margin-top: 30px !important;
border-radius: 14px !important;
}
body.vs-page-about .vs-about-layout {
display: flex !important;
flex-direction: column !important;
gap: 30px !important;
max-width: none !important;
}
body.vs-page-about .vs-about-media {
order: 0 !important;
position: static !important;
width: min(100%, 340px) !important;
margin: 0 auto !important;
}
body.vs-page-about .vs-page-copy {
order: 1 !important;
max-width: none !important;
padding-top: 0 !important;
}
body.vs-page-about .vs-about-caption {
text-align: center !important;
}
body.vs-page-about .vs-about-caption strong {
font-size: 22px !important;
}
body.vs-page-legal .page-hero--legal {
padding: 104px 22px 28px !important;
}
body.vs-page-legal .page-hero--legal h1 {
max-width: none !important;
font-size: 36px !important;
line-height: 1.08 !important;
letter-spacing: 0 !important;
text-align: left !important;
}
body.vs-page-legal .vs-page-shell {
padding: 34px 22px 76px !important;
}
body.vs-page-legal .vs-page-article h2,
body.vs-page-legal .vs-page-article h3 {
font-size: 20px !important;
line-height: 1.3 !important;
}
body.vs-page-legal .vs-page-article p,
body.vs-page-legal .vs-page-article li {
font-size: 16px !important;
line-height: 1.72 !important;
}
body.vs-page-legal .vs-page-article blockquote {
border-radius: 8px !important;
padding: 18px 20px !important;
}
.site-footer .footer-brand img {
width: 50% !important;
max-width: 170px !important;
height: auto !important;
}
.hero.vs-hero .vs-media-card--book {
width: min(76vw, 280px) !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: 3 / 4.35 !important;
}
.hero.vs-hero .vs-media-card-book-image {
position: relative !important;
display: block !important;
width: 100% !important;
height: 100% !important;
aspect-ratio: 3 / 4.35 !important;
object-fit: contain !important;
object-position: center !important;
}
.hero.vs-hero .vs-media-card-book-copy,
.hero.vs-hero .vs-media-card--book .vs-media-card-overlay {
display: none !important;
}
} @media (max-width: 960px) {
.game-bg .section-header,
.game-bg .section-tag,
.game-bg .section-title,
.game-bg .section-sub {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
.game-bg .section-sub {
max-width: 34rem !important;
}
} @media (max-width: 960px) {
.vs-about-legal {
margin-top: 42px !important;
padding: 24px 18px !important;
border-radius: 26px !important;
}
.vs-about-legal::before {
inset: 10px !important;
border-radius: 20px !important;
}
.vs-about-legal-head {
display: grid !important;
gap: 18px !important;
margin-bottom: 22px !important;
}
.vs-about-legal h2 {
max-width: 13ch !important;
font-size: clamp(32px, 10vw, 44px) !important;
}
.vs-about-legal-actions {
justify-content: flex-start !important;
}
.vs-about-legal-actions a {
flex: 1 1 auto !important;
}
.vs-about-legal-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.vs-about-legal-card {
border-radius: 20px !important;
}
.vs-about-legal-card summary {
padding: 16px !important;
font-size: 17px !important;
}
.vs-about-legal-list {
padding: 0 12px 14px !important;
}
.vs-about-legal-row {
grid-template-columns: 1fr auto !important;
align-items: start !important;
gap: 8px 12px !important;
padding: 14px !important;
}
.vs-about-legal-label {
grid-column: 1 / -1 !important;
}
.vs-about-legal-value {
font-size: 15px !important;
}
.vs-copy-btn {
width: 30px !important;
height: 30px !important;
min-height: 30px !important;
padding: 0 !important;
font-size: 14px !important;
}
.vs-about-legal-image {
margin-top: 18px !important;
border-radius: 20px !important;
}
.vs-about-legal-img {
max-height: none !important;
aspect-ratio: 4 / 3 !important;
}
} @media (max-width: 960px) {
.hero.vs-hero .vs-slide::before,
.hero.vs-hero .vs-slide[data-slide="0"]::before,
.hero.vs-hero .vs-slide[data-slide="1"]::before,
.hero.vs-hero .vs-slide[data-slide="2"]::before,
.hero.vs-hero .vs-media-card::before,
.hero.vs-hero .vs-media-card::after,
.hero.vs-hero .vs-media-card--photo::before,
.hero.vs-hero .vs-media-card--photo::after,
.hero.vs-hero .vs-media-card--founder::before,
.hero.vs-hero .vs-media-card--founder::after,
.hero.vs-hero .vs-media-card--book::before,
.hero.vs-hero .vs-media-card--book::after {
content: none !important;
display: none !important;
background: none !important;
box-shadow: none !important;
filter: none !important;
opacity: 0 !important;
}
.hero.vs-hero .vs-slide-visual [data-anim],
.hero.vs-hero .vs-media-card,
.hero.vs-hero .vs-media-card--photo,
.hero.vs-hero .vs-media-card--founder,
.hero.vs-hero .vs-media-card--book {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
animation: none !important;
transition: none !important;
will-change: auto !important;
}
.hero.vs-hero .vs-media-card,
.hero.vs-hero .vs-media-card--photo,
.hero.vs-hero .vs-media-card--founder {
width: min(82vw, 340px) !important;
max-width: min(82vw, 340px) !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.hero.vs-hero .vs-media-card--book {
width: min(64vw, 250px) !important;
max-width: min(64vw, 250px) !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
padding: 0 !important;
overflow: visible !important;
}
.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-s1-img,
.hero.vs-hero .vs-media-card-book-image {
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
animation: none !important;
transition: none !important;
backface-visibility: visible !important;
}
.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-s1-img {
border-radius: 22px !important;
}
.hero.vs-hero .vs-media-card-book-image {
border-radius: 0 !important;
}
.hero.vs-hero .vs-media-card-overlay,
.hero.vs-hero .vs-s2-cover-badge,
.hero.vs-hero .vs-media-card-book-copy {
display: none !important;
}
} @media (max-width: 960px) {
.hero.vs-hero .vs-slide::before,
.hero.vs-hero .vs-slide[data-slide="0"]::before,
.hero.vs-hero .vs-slide[data-slide="1"]::before,
.hero.vs-hero .vs-slide[data-slide="2"]::before {
content: none !important;
display: none !important;
background: none !important;
opacity: 0 !important;
}
.hero.vs-hero .vs-slide-visual [data-anim],
.hero.vs-hero .vs-media-card,
.hero.vs-hero .vs-media-card--photo,
.hero.vs-hero .vs-media-card--founder,
.hero.vs-hero .vs-media-card--book,
.hero.vs-hero .vs-media-card--fallback {
animation: none !important;
transition: none !important;
transform: none !important;
filter: none !important;
will-change: auto !important;
}
.hero.vs-hero .vs-media-card,
.hero.vs-hero .vs-media-card--photo,
.hero.vs-hero .vs-media-card--founder,
.hero.vs-hero .vs-media-card--book {
width: min(82vw, 340px) !important;
max-width: min(82vw, 340px) !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
padding: 0 !important;
}
.hero.vs-hero .vs-media-card--book {
width: min(64vw, 250px) !important;
max-width: min(64vw, 250px) !important;
}
.hero.vs-hero .vs-media-card::before,
.hero.vs-hero .vs-media-card::after,
.hero.vs-hero .vs-media-card--photo::before,
.hero.vs-hero .vs-media-card--photo::after,
.hero.vs-hero .vs-media-card--founder::before,
.hero.vs-hero .vs-media-card--founder::after,
.hero.vs-hero .vs-media-card--book::before,
.hero.vs-hero .vs-media-card--book::after {
content: none !important;
display: none !important;
background: none !important;
box-shadow: none !important;
filter: none !important;
}
.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-s1-img,
.hero.vs-hero .vs-media-card-book-image {
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
animation: none !important;
transition: none !important;
backface-visibility: visible !important;
}
.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-s1-img {
border-radius: 22px !important;
}
.hero.vs-hero .vs-media-card-book-image {
border-radius: 0 !important;
}
.hero.vs-hero .vs-media-card-overlay,
.hero.vs-hero .vs-s2-cover-badge,
.hero.vs-hero .vs-media-card-book-copy {
display: none !important;
}
} @media (max-width: 960px) {
.hero.vs-hero .vs-slide::before,
.hero.vs-hero .vs-slide[data-slide="0"]::before,
.hero.vs-hero .vs-slide[data-slide="1"]::before,
.hero.vs-hero .vs-slide[data-slide="2"]::before {
content: none !important;
display: none !important;
background: none !important;
opacity: 0 !important;
}
.hero.vs-hero .vs-media-card--founder {
width: min(82vw, 340px) !important;
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
border-radius: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
animation: none !important;
transition: none !important;
}
.hero.vs-hero .vs-media-card--founder::before {
content: none !important;
display: none !important;
background: none !important;
filter: none !important;
}
.hero.vs-hero .vs-media-card--founder::after {
content: none !important;
display: none !important;
background: none !important;
filter: none !important;
}
.hero.vs-hero .vs-media-card--founder .vs-s1-img {
position: relative !important;
z-index: 1 !important;
width: 100% !important;
height: auto !important;
object-fit: contain !important;
object-position: center bottom !important;
filter: none !important;
transform: none !important;
}
.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-visual {
perspective: none !important;
}
.hero.vs-hero .vs-media-card--book {
width: min(64vw, 250px) !important;
height: auto !important;
min-height: 0 !important;
aspect-ratio: auto !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
transform-origin: center !important;
transform-style: flat !important;
animation: none !important;
transition: none !important;
will-change: auto !important;
}
.hero.vs-hero .vs-media-card--book::before {
content: none !important;
display: none !important;
background: none !important;
box-shadow: none !important;
filter: none !important;
}
.hero.vs-hero .vs-media-card--book::after {
content: none !important;
display: none !important;
background: none !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
}
.hero.vs-hero .vs-media-card-book-image {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
filter: none !important;
z-index: 1 !important;
animation: none !important;
transition: none !important;
backface-visibility: visible !important;
transform: none !important;
}
.hero.vs-hero .vs-media-card--book .vs-s2-cover-badge,
.hero.vs-hero .vs-media-card--book .vs-media-card-book-copy,
.hero.vs-hero .vs-media-card--book .vs-media-card-overlay {
display: none !important;
}
} @media (max-width: 767px) { .hero.vs-hero .vs-slide[data-slide="0"] .vs-s0-illus { display: flex !important; } .hero.vs-hero .vs-slide-inner--tamara { flex-direction: column !important; }
.hero.vs-hero .vs-slide-visual,
.hero.vs-hero .vs-s0-illus,
.hero.vs-hero .vs-s1-photo {
order: 2 !important;
flex: 0 0 auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-width: none !important;
overflow: visible !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 6px 0 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-s1-img,
.hero.vs-hero .vs-media-card-book-image {
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
max-width: 300px !important;
height: auto !important;
aspect-ratio: 903 / 1024 !important; object-fit: cover !important;
object-position: center !important;
border-radius: 6px !important; background: #fff !important;
margin: 0 auto !important;
box-shadow:
0 1px 2px rgba(30, 10, 46, .14),
0 8px 16px rgba(30, 10, 46, .12),
0 20px 38px rgba(30, 10, 46, .14),
0 34px 60px -6px rgba(139, 53, 214, .22) !important;
transform: none !important;
filter: none !important;
}
[data-theme="dark"] .hero.vs-hero .vs-s0-img,
[data-theme="dark"] .hero.vs-hero .vs-s1-img,
[data-theme="dark"] .hero.vs-hero .vs-media-card-book-image {
background: #1a0e2a !important;
box-shadow:
0 1px 2px rgba(4, 3, 8, .4),
0 10px 22px rgba(4, 3, 8, .34),
0 24px 44px rgba(4, 3, 8, .36),
0 40px 70px -6px rgba(139, 53, 214, .30) !important;
}
} @media (max-width: 767px) { .hero.vs-hero {
padding-top: 70px !important; }
.hero.vs-hero .vs-hero-slider {
min-height: 0 !important;
height: auto !important;
}
.hero.vs-hero .vs-slide {
height: auto !important;
min-height: 0 !important;
}
.hero.vs-hero .vs-slide-inner,
.hero.vs-hero .vs-slide-inner--tamara,
.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="1"] .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="2"] .vs-slide-inner,
.hero.vs-hero .vs-slide[data-slide="3"] .vs-slide-inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 12px !important;
padding: 4px 16px 18px !important; min-height: 0 !important;
height: auto !important;
} .hero.vs-hero .vs-slide-visual,
.hero.vs-hero .vs-s0-illus,
.hero.vs-hero .vs-s1-photo {
order: -1 !important;
width: auto !important;
max-width: 86vw !important;
height: min(38vh, 70vw) !important; min-height: 0 !important;
aspect-ratio: 1 / 1 !important;
margin: 0 auto !important;
align-self: center !important;
padding: 0 !important;
border-radius: 20px !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
display: flex !important;
align-items: stretch !important;
justify-content: stretch !important;
} .hero.vs-hero .vs-media-card,
.hero.vs-hero .vs-media-card--photo,
.hero.vs-hero .vs-media-card--founder,
.hero.vs-hero .vs-media-card--book,
.hero.vs-hero .vs-media-card--fallback {
width: 100% !important;
height: 100% !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 20px !important;
background: transparent !important;
box-shadow: none !important;
transform: none !important; overflow: hidden !important;
}
.hero.vs-hero .vs-s0-img,
.hero.vs-hero .vs-s1-img,
.hero.vs-hero .vs-media-card-img,
.hero.vs-hero .vs-media-card-book-image {
width: 100% !important;
height: 100% !important;
max-width: none !important;
aspect-ratio: auto !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 20px !important;
margin: 0 !important;
transform: none !important;
filter: none !important;
box-shadow: none !important;
background: transparent !important;
} .hero.vs-hero .vs-media-card::before,
.hero.vs-hero .vs-media-card::after,
.hero.vs-hero .vs-media-card--photo::before,
.hero.vs-hero .vs-media-card--photo::after,
.hero.vs-hero .vs-media-card--founder::before,
.hero.vs-hero .vs-media-card--founder::after,
.hero.vs-hero .vs-media-card--book::before,
.hero.vs-hero .vs-media-card--book::after,
.hero.vs-hero .vs-media-card-overlay,
.hero.vs-hero .vs-media-card-book-copy,
.hero.vs-hero .vs-media-card-kicker,
.hero.vs-hero .vs-s2-cover-badge { display: none !important; } .hero.vs-hero .vs-slide-content {
order: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
gap: 8px !important;
padding: 0 !important;
width: 100% !important;
min-height: 0 !important;
}
.hero.vs-hero .hero-eyebrow {
order: 0 !important;
margin: 0 !important;
} .hero.vs-hero .vs-slide-h1,
.hero.vs-hero .vs-slide-h2,
.hero.vs-hero .vs-slide[data-slide="0"] .vs-slide-h1 {
margin: 0 !important;
text-align: left !important;
font-size: clamp(24px, 7vw, 32px) !important;
line-height: 1.08 !important;
max-width: none !important;
} .hero.vs-hero .vs-slide-content > p {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
font-size: 13.5px !important;
line-height: 1.5 !important;
max-width: none !important;
width: 100% !important;
margin: 0 !important;
} .hero.vs-hero .founder-chip,
.hero.vs-hero .vs-s2-meta,
.hero.vs-hero .vs-s2-author,
.hero.vs-hero .vs-slide-price { display: none !important; } .hero.vs-hero .hero-trust { display: none !important; } .hero.vs-hero .hero-btns {
order: 3 !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 8px !important;
width: 100% !important;
margin: 2px 0 0 !important;
}
.hero.vs-hero .hero-btns > a,
.hero.vs-hero .hero-btns .btn-primary,
.hero.vs-hero .hero-btns .btn-outline {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
flex: 1 1 calc(33.333% - 6px) !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
padding: 11px 6px !important;
font-size: 12.5px !important;
line-height: 1.15 !important;
} .hero.vs-hero .vs-slide-content > a.btn-primary {
order: 3 !important;
display: inline-flex !important;
justify-content: center !important;
width: 100% !important;
} .hero.vs-hero .vs-s1-img,
.hero.vs-hero .vs-media-card-book-image {
object-fit: contain !important;
object-position: center !important;
} .section-cta { display: flex !important; justify-content: center !important; }
.section-cta > .btn-outline,
.section-cta > .btn-primary {
width: 66% !important;
max-width: 66% !important;
margin-left: auto !important;
margin-right: auto !important;
} .hero.vs-hero .vs-slide[data-slide="1"] .vs-media-card--founder {
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
background: transparent !important;
border-radius: 20px !important;
overflow: hidden !important;
}
.hero.vs-hero .vs-slide[data-slide="1"] .vs-media-card--founder .vs-s1-img,
.hero.vs-hero .vs-slide[data-slide="1"] .vs-s1-img {
position: relative !important;
inset: auto !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
object-fit: cover !important; object-position: center !important;
border-radius: 20px !important;
filter: none !important;
transform: none !important;
} .hero.vs-hero .vs-slide[data-slide="1"] .vs-s1-photo-placeholder {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
font-size: 84px !important;
} .vs-hero-slider .vs-slide--entering .vs-slide-visual,
.vs-hero-slider .vs-slide--entering .vs-s0-illus,
.vs-hero-slider .vs-slide--entering .vs-s1-photo {
animation: vs-mob-enter-visual 650ms cubic-bezier(0.34, 1.1, 0.64, 1) both !important;
animation-delay: 30ms !important;
} .vs-columns { column-count: 1 !important; } .venues-section { padding: 8px 16px 48px !important; }
.venues-inner { grid-template-columns: 1fr !important; gap: 20px !important; }
.venues-media { position: static !important; }
.venues-media img { max-height: 300px !important; }
.venues-title { margin: 0 0 16px !important; }
.venue-summary { padding: 15px 16px !important; font-size: 15px !important; }
.venue-list { padding: 12px 18px 16px 34px !important; }
.venue-item[open] .venue-list { columns: 1 !important; }
}