/* ================================================================
   VNA STORE — CYBER LUXURY EDITION v5 — ABSOLUTE BEST
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Exo+2:ital,wght@0,300;0,400;0,600;0,700;0,800;1,400&family=Bebas+Neue&family=Barlow:wght@300;400;500;600;700&family=Barlow+Condensed:wght@600;700;800&display=swap');

*,*::before,*::after { box-sizing: border-box; margin: 0; }

/* ════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════ */
:root {
  --c-bg:       #030b10;
  --c-card:     #071624;
  --c-t:        #00C8DC;
  --c-t2:       #00EEFF;
  --c-t3:       #007A90;
  --c-gold:     #FFD060;
  --glow-t:     0 0 20px rgba(0,200,220,0.5), 0 0 60px rgba(0,200,220,0.15);
  --glow-t-xl:  0 0 40px rgba(0,200,220,0.7), 0 0 80px rgba(0,200,220,0.25), 0 0 120px rgba(0,200,220,0.08);
  --border-t:   rgba(0,200,220,0.14);
  --transition: cubic-bezier(0.16,1,0.3,1);
}

/* ════════════════════════════════════════
   BASE
════════════════════════════════════════ */
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'Barlow', sans-serif !important;
  background: var(--c-bg) !important;
  color: rgba(200,235,245,0.85) !important;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #010608; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-t2) 0%, var(--c-t) 50%, var(--c-t3) 100%);
  border-radius: 4px;
}

/* ════════════════════════════════════════
   BACKGROUND SYSTEM
════════════════════════════════════════ */
#vna-canvas {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.88;
}
#app { position: relative; z-index: 10; }

/* Deep atmosphere layers */
.vna-bg-grid {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 60% 20%, rgba(0,110,145,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 80% 65% at 8%  85%, rgba(0,75,110,0.17)  0%, transparent 52%),
    radial-gradient(ellipse 65% 80% at 95% 5%,  rgba(0,130,160,0.14) 0%, transparent 48%),
    radial-gradient(ellipse 55% 55% at 42% 98%, rgba(0,60,95,0.12)   0%, transparent 44%);
}
.vna-orb-a,.vna-orb-b,.vna-orb-c { display: none; }

/* Scanline — thinner, more elegant */
.vna-scanline {
  position: fixed; left: 0; right: 0; height: 1px;
  z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent 5%, rgba(0,200,220,0.06) 25%, rgba(0,230,255,0.20) 50%, rgba(0,200,220,0.06) 75%, transparent 95%);
  animation: vnaScan 11s linear infinite;
}
@keyframes vnaScan {
  0%   { top: -1px; opacity: 0; }
  2%   { opacity: 1; }
  98%  { opacity: 0.6; }
  100% { top: 100vh; opacity: 0; }
}

/* Vignette */
.vna-vignette {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 50% 50%,
    transparent 20%, rgba(3,9,15,0.45) 65%, rgba(2,6,12,0.88) 100%);
}
.vna-noise { display: none; }

/* ════════════════════════════════════════
   REVEAL ANIMATIONS
════════════════════════════════════════ */
.vna-reveal        { opacity: 0; transform: translateY(30px);   transition: opacity 0.8s var(--transition), transform 0.8s var(--transition); }
.vna-reveal-left   { opacity: 0; transform: translateX(-36px);  transition: opacity 0.7s var(--transition), transform 0.7s var(--transition); }
.vna-reveal-right  { opacity: 0; transform: translateX(36px);   transition: opacity 0.7s var(--transition), transform 0.7s var(--transition); }
.vna-reveal-scale  { opacity: 0; transform: scale(0.88);        transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.34,1.56,0.64,1); }
.vna-reveal.vna-visible,.vna-reveal-left.vna-visible,
.vna-reveal-right.vna-visible,.vna-reveal-scale.vna-visible { opacity: 1; transform: none; }
.vna-d1{transition-delay:.04s!important} .vna-d2{transition-delay:.11s!important}
.vna-d3{transition-delay:.18s!important} .vna-d4{transition-delay:.25s!important}
.vna-d5{transition-delay:.32s!important} .vna-d6{transition-delay:.40s!important}

/* ════════════════════════════════════════
   TICKER — liquid teal ribbon
════════════════════════════════════════ */
.vna-ticker-wrap {
  overflow: hidden; padding: 9px 0; position: relative; z-index: 10;
  background: linear-gradient(90deg,
    #004055 0%, #008BA0 15%, #00C8DC 30%, #00EEFF 50%,
    #00C8DC 70%, #008BA0 85%, #004055 100%);
  background-size: 500% 100%;
  animation: tickerBG 8s linear infinite;
  box-shadow:
    0 0 40px rgba(0,200,220,0.35),
    0 4px 24px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}
@keyframes tickerBG { 0%{background-position:0%} 100%{background-position:500%} }
.vna-ticker { display: flex; width: max-content; animation: vnaTicker 22s linear infinite; }
.vna-ticker:hover { animation-play-state: paused; }
.vna-ticker-item {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: #00141c; padding: 0 28px; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.vna-ticker-sep { opacity: 0.25; margin: 0 2px; }
@keyframes vnaTicker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.vna-hero {
  position: relative; padding: 52px 0 34px;
  overflow: hidden; margin-bottom: 10px; width: 100%;
}

/* Moving grid */
.vna-hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,200,220,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,220,0.055) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: gridDrift 14s linear infinite;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 48%, black 0%, transparent 76%);
}
@keyframes gridDrift { 0%{background-position:0 0} 100%{background-position:42px 42px} }

/* Hero ambient glow */
.vna-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 58% at 48% 30%, rgba(0,200,220,0.11) 0%, transparent 58%),
    radial-gradient(ellipse 48% 42% at 85% 75%, rgba(0,150,195,0.08) 0%, transparent 52%),
    radial-gradient(ellipse 38% 38% at 8%  58%, rgba(0,120,165,0.06) 0%, transparent 48%);
  animation: ambientPulse 9s ease-in-out infinite alternate;
}
@keyframes ambientPulse { from{opacity:0.5} to{opacity:1} }

/* Corner accent — top right geometric decoration */
.vna-hero::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 140px; height: 140px; pointer-events: none;
  background:
    linear-gradient(225deg, rgba(0,200,220,0.12) 0%, transparent 60%);
  border-left: 1px solid rgba(0,200,220,0.08);
  border-bottom: 1px solid rgba(0,200,220,0.08);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.vna-hero-line { display: none; }
.vna-hero-content { position: relative; z-index: 2; width: 100%; }

/* ── LIVE BADGE ── */
.vna-live-badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(0,200,220,0.055);
  border: 1px solid rgba(0,200,220,0.32);
  color: var(--c-t); font-size: 9.5px; font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
  padding: 6px 18px; border-radius: 100px; margin-bottom: 22px;
  animation: badgeFadeIn 1s ease both;
  position: relative; overflow: hidden;
  box-shadow: 0 0 24px rgba(0,200,220,0.08), inset 0 0 20px rgba(0,200,220,0.03);
}
/* Sweep shimmer */
.vna-live-badge::before {
  content: '';
  position: absolute; top: 0; left: -120%; width: 80%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,230,255,0.15), transparent);
  animation: badgeSweep 3.5s ease-in-out 1.5s infinite;
}
@keyframes badgeSweep { 0%,100%{left:-120%} 60%{left:150%} }
@keyframes badgeFadeIn { from{opacity:0;transform:translateY(16px);filter:blur(4px)} to{opacity:1;transform:none;filter:none} }

.vna-live-dot {
  width: 7px; height: 7px; background: var(--c-t); border-radius: 50%;
  box-shadow: 0 0 8px rgba(0,200,220,1), 0 0 16px rgba(0,200,220,0.5);
  flex-shrink: 0; animation: livePing 1.8s ease-in-out infinite;
}
@keyframes livePing {
  0%   { box-shadow: 0 0 0 0 rgba(0,200,220,0.9); }
  70%  { box-shadow: 0 0 0 11px rgba(0,200,220,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,200,220,0); }
}

/* ── HERO TITLE ── */
.vna-hero-title {
  font-family: 'Orbitron', sans-serif !important;
  font-size: clamp(44px, 13vw, 128px);
  font-weight: 900; line-height: 0.84; letter-spacing: -2px;
  color: #fff; margin-bottom: 18px;
  animation: titleReveal 1.2s var(--transition) 0.1s both;
}
@keyframes titleReveal {
  from { opacity:0; transform:translateY(28px) skewY(3deg); filter:blur(6px); }
  to   { opacity:1; transform:none; filter:none; }
}

.vna-hero-title em {
  font-style: normal; font-family: 'Orbitron', sans-serif !important;
  font-weight: 900; display: block;
  background: linear-gradient(98deg,
    #004d60 0%, #00A8C0 18%, #00C8DC 35%,
    #00EEFF 50%, #00C8DC 65%, #00A8C0 82%, #004d60 100%);
  background-size: 350% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 28px rgba(0,200,220,0.7))
          drop-shadow(0 0 70px rgba(0,200,220,0.22));
  animation: tealShimmer 5s linear infinite;
}
@keyframes tealShimmer { 0%{background-position:0%} 100%{background-position:350%} }

.vna-hero-sub {
  font-family: 'Exo 2', sans-serif; font-weight: 300;
  color: rgba(175,230,245,0.46); font-size: 14px;
  max-width: 100%; line-height: 1.9; letter-spacing: 0.35px;
  animation: titleReveal 1.2s var(--transition) 0.32s both;
}

/* ════════════════════════════════════════
   ACCENT OVERRIDES
════════════════════════════════════════ */
.bg-accent-500,[class*="bg-accent-500"]:not([class*="\/"]) { background-color: var(--c-t) !important; }
.text-accent-500 { color: var(--c-t) !important; }
.border-l-accent-500 { border-left-color: var(--c-t) !important; }
.border-accent-500   { border-color: var(--c-t) !important; }
.bg-accent-500\/10   { background-color: rgba(0,200,220,0.10) !important; }
.bg-accent-500\/20   { background-color: rgba(0,200,220,0.20) !important; }
.hover\:bg-accent-500\/10:hover { background-color: rgba(0,200,220,0.10) !important; }
.focus-within\:border-accent-500:focus-within { border-color: var(--c-t) !important; }
.ring-accent-500 { --tw-ring-color: rgba(0,200,220,0.5) !important; }

/* ════════════════════════════════════════
   HEADER — holographic card
════════════════════════════════════════ */
header .bg-card.border.rounded-lg {
  background: linear-gradient(160deg, #071e30 0%, #050f1a 55%, #071824 100%) !important;
  border-color: rgba(0,200,220,0.18) !important;
  position: relative; overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,200,220,0.07),
    0 8px 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(0,200,220,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.3) !important;
}
/* Header top glow line */
header .bg-card.border.rounded-lg::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0,200,220,0.4) 25%,
    rgba(0,230,255,0.9) 50%,
    rgba(0,200,220,0.4) 75%, transparent 100%);
  pointer-events: none;
}
/* Holographic shimmer on hover */
header .bg-card.border.rounded-lg::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(0,200,220,0.04) 0%, transparent 50%, rgba(0,200,220,0.02) 100%);
}

header h1 {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 18px !important; letter-spacing: 3px !important;
  color: var(--c-t) !important; font-weight: 700 !important;
  text-shadow: var(--glow-t);
}
header .text-2xl, header .text-3xl {
  font-family: 'Orbitron', sans-serif !important;
  color: var(--c-t) !important; font-weight: 700 !important;
}
/* Header stats — plasma numbers */
header .grid p.text-xl, header .grid p.text-3xl {
  font-family: 'Orbitron', sans-serif !important;
  color: var(--c-t2) !important; font-weight: 700 !important;
  text-shadow: 0 0 22px rgba(0,220,255,0.80), 0 0 50px rgba(0,200,220,0.30) !important;
}
header .grid p.text-xs, header .grid p.text-sm {
  font-family: 'Rajdhani', sans-serif !important;
  letter-spacing: 3.5px !important; text-transform: uppercase !important;
  color: rgba(150,215,230,0.38) !important;
  font-weight: 600 !important; font-size: 8px !important;
}

/* ════════════════════════════════════════
   NAV TABS — segmented control style
════════════════════════════════════════ */
nav > div { flex-wrap: wrap !important; }
nav > div > div.flex.items-center.gap-4.hide-scrollbar {
  overflow: visible !important; overflow-x: visible !important;
  flex-wrap: wrap !important; width: 100% !important;
  padding: 7px 0 !important; gap: 5px !important;
}
nav > div > div.flex.items-center.gap-4.py-4.md\:hidden {
  width: 100% !important; padding: 6px 0 !important; gap: 5px !important;
}
nav a, nav button {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
  padding: 7px 12px !important; white-space: nowrap !important;
  border-radius: 6px !important;
  background: rgba(5,18,28,0.92) !important;
  border: 1px solid rgba(0,200,220,0.13) !important;
  color: rgba(180,225,238,0.60) !important;
  transition: all 0.18s ease !important;
  position: relative; overflow: hidden;
}
/* Underline indicator */
nav a::after, nav button::after {
  content: '';
  position: absolute; bottom: 0; left: 50%; right: 50%; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--c-t), var(--c-t2), var(--c-t), transparent);
  transition: left 0.22s ease, right 0.22s ease;
  border-radius: 2px;
}
nav a:hover::after, nav button:hover::after,
nav a.bg-accent-500\/10::after { left: 8%; right: 8%; }
nav a:hover, nav button:hover,
nav a.bg-accent-500\/10, nav button.bg-accent-500\/10 {
  background: rgba(0,200,220,0.07) !important;
  border-color: rgba(0,200,220,0.38) !important;
  color: var(--c-t2) !important;
  box-shadow: 0 0 16px rgba(0,200,220,0.12), inset 0 0 12px rgba(0,200,220,0.04) !important;
}
nav .absolute.inset-y-0.right-0 { display: none !important; }

/* ════════════════════════════════════════
   PRODUCT CARDS — holographic depth
════════════════════════════════════════ */
.bg-card.border.rounded-lg,
a.block.h-full.bg-card {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, #081e30 0%, #06131f 60%, #071828 100%) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-color: rgba(0,200,220,0.10) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.45), inset 0 1px 0 rgba(0,200,220,0.05) !important;
  transition: border-color 0.30s ease, transform 0.32s var(--transition), box-shadow 0.30s ease, background 0.30s ease !important;
}

/* Top shimmer bar */
a.block.h-full.bg-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0,200,220,0.22) 35%,
    rgba(0,230,255,0.55) 50%,
    rgba(0,200,220,0.22) 65%, transparent 100%);
  opacity: 0.4; transition: opacity 0.3s ease;
  pointer-events: none; z-index: 1;
}
a.block.h-full.bg-card:hover::before { opacity: 1; }

/* Left cyan accent line */
a.block.h-full.bg-card::after {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px;
  background: linear-gradient(180deg, transparent, var(--c-t) 35%, var(--c-t2) 65%, transparent);
  border-radius: 0 2px 2px 0;
  opacity: 0; transition: opacity 0.3s ease, top 0.35s var(--transition), bottom 0.35s var(--transition);
  pointer-events: none; z-index: 1;
}
a.block.h-full.bg-card:hover::after { opacity: 1; top: 4%; bottom: 4%; }

a.block.h-full.bg-card:hover {
  border-color: rgba(0,200,220,0.38) !important;
  background: linear-gradient(168deg, #0d2840 0%, #09192e 60%, #0b2035 100%) !important;
  transform: translateY(-6px) scale(1.006) !important;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.60),
    0 0 0 1px rgba(0,200,220,0.16),
    0 0 40px rgba(0,180,210,0.07) !important;
}

/* Card text */
a.block.h-full.bg-card h3 {
  font-family: 'Rajdhani', sans-serif !important; font-weight: 700;
  font-size: 16px; letter-spacing: 0.4px;
  color: rgba(225,245,252,0.92) !important;
  transition: color 0.22s ease, text-shadow 0.22s ease;
}
a.block.h-full.bg-card:hover h3 {
  color: var(--c-t2) !important;
  text-shadow: 0 0 16px rgba(0,200,220,0.4);
}

/* Price */
.text-accent-500.text-base, .text-accent-500.font-semibold {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.45rem !important; letter-spacing: 0.5px;
  color: var(--c-t) !important;
}

/* Card image zoom */
a.block.h-full.bg-card img {
  transition: transform 0.55s cubic-bezier(0.16,1,0.3,1) !important;
}
a.block.h-full.bg-card:hover img { transform: scale(1.06) !important; }

/* Card icon glow on hover (default product image placeholder) */
a.block.h-full.bg-card:hover svg { filter: drop-shadow(0 0 10px rgba(0,200,220,0.6)); }

/* Buy button on card */
a.block.h-full.bg-card .bg-accent-500,
.bg-accent-500.rounded-lg {
  opacity: 1 !important;
  background: linear-gradient(135deg, #00C8DC 0%, #0098B0 100%) !important;
  color: #001520 !important; font-weight: 800 !important;
  box-shadow: 0 2px 12px rgba(0,180,220,0.30) !important;
  transition: all 0.22s ease !important;
}
a.block.h-full.bg-card:hover .bg-accent-500 {
  background: linear-gradient(135deg, #00EEFF 0%, #00C8DC 100%) !important;
  box-shadow: 0 4px 22px rgba(0,220,255,0.50) !important;
}

/* Card stagger entrance */
.flex.flex-wrap.gap-4.w-full > div { animation: cardIn 0.60s var(--transition) both; }
.flex.flex-wrap.gap-4.w-full > div:nth-child(1){animation-delay:.02s!important}
.flex.flex-wrap.gap-4.w-full > div:nth-child(2){animation-delay:.08s!important}
.flex.flex-wrap.gap-4.w-full > div:nth-child(3){animation-delay:.14s!important}
.flex.flex-wrap.gap-4.w-full > div:nth-child(4){animation-delay:.20s!important}
.flex.flex-wrap.gap-4.w-full > div:nth-child(5){animation-delay:.26s!important}
.flex.flex-wrap.gap-4.w-full > div:nth-child(6){animation-delay:.32s!important}
@keyframes cardIn {
  from { opacity:0; transform:translateY(24px) scale(0.95); filter:blur(3px); }
  to   { opacity:1; transform:none; filter:none; }
}

/* ════════════════════════════════════════
   SECTION HEADINGS
════════════════════════════════════════ */
.component h2 {
  font-family: 'Orbitron', sans-serif !important;
  font-size: 23px !important; letter-spacing: 2px !important;
  font-weight: 700 !important; color: var(--c-t) !important;
  text-shadow: var(--glow-t);
}

/* ════════════════════════════════════════
   SEARCH INPUT
════════════════════════════════════════ */
input[type="text"] {
  background: rgba(4,14,22,0.95) !important;
  color: rgba(200,235,245,0.85) !important;
  transition: all 0.22s ease !important;
  border-color: rgba(0,200,220,0.12) !important;
}
input[type="text"]::placeholder { color: rgba(0,200,220,0.28) !important; }
.focus-within\:border-accent-500:focus-within {
  border-color: var(--c-t) !important;
  box-shadow: 0 0 0 3px rgba(0,200,220,0.08), 0 0 28px rgba(0,200,220,0.07) !important;
}

/* ════════════════════════════════════════
   BUTTONS — plasma gradient
════════════════════════════════════════ */
button[type="submit"], a.bg-accent-500, button.bg-accent-500 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important; letter-spacing: 3px !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, #00C8DC 0%, #009EB8 100%) !important;
  color: #001520 !important; opacity: 1 !important;
  position: relative; overflow: hidden;
  transition: all 0.22s ease !important;
  box-shadow: 0 3px 18px rgba(0,180,220,0.38) !important;
}
/* Shimmer sweep */
button[type="submit"]::before, a.bg-accent-500::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.16) 50%, transparent 100%);
  transform: translateX(-100%); transition: transform 0.55s ease;
}
button[type="submit"]:hover::before, a.bg-accent-500:hover::before { transform: translateX(100%); }
button[type="submit"]:hover, a.bg-accent-500:hover, button.bg-accent-500:hover {
  background: linear-gradient(135deg, #00EEFF 0%, #00C8DC 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(0,200,240,0.55) !important;
}
button[type="submit"]:active, a.bg-accent-500:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ════════════════════════════════════════
   PRODUCT PAGE
════════════════════════════════════════ */
.component h1 { font-family: 'Bebas Neue', sans-serif !important; font-size: clamp(28px,4vw,54px) !important; letter-spacing: 1px !important; }
.text-3xl.text-t-primary { font-family: 'Bebas Neue', sans-serif !important; font-size: 2.4rem !important; color: var(--c-t) !important; letter-spacing: 1px; }
[x-data="productForm"] button { transition: all 0.2s ease !important; }
[x-data="productForm"] button:hover { transform: scale(1.03); }
.pulsating { animation: statusPulse 2s ease-in-out infinite !important; }
@keyframes statusPulse { 0%,100%{transform:scale(1);opacity:0.7} 50%{transform:scale(2.5);opacity:0} }

/* ════════════════════════════════════════
   GENERAL CARDS
════════════════════════════════════════ */
.bg-card.rounded-lg {
  background: linear-gradient(160deg, #071e2e 0%, #060f1c 100%) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: all 0.28s ease !important;
}
.bg-card.rounded-lg:hover {
  border-color: rgba(0,200,220,0.28) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(0,0,0,0.45) !important;
}

/* ════════════════════════════════════════
   FAQ
════════════════════════════════════════ */
details { transition: all 0.28s ease; border-color: rgba(0,200,220,0.09) !important; }
details[open] {
  border-color: rgba(0,200,220,0.35) !important;
  box-shadow: 0 0 0 1px rgba(0,200,220,0.08), 0 6px 24px rgba(0,0,0,0.3);
}
details summary { transition: color 0.2s ease; cursor: pointer; }
details[open] summary { color: var(--c-t2) !important; }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
footer { position: relative; }
footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(0,200,220,0.15) 15%,
    rgba(0,230,255,0.55) 50%,
    rgba(0,200,220,0.15) 85%, transparent 100%);
}
footer a { transition: all 0.2s ease !important; color: rgba(160,215,228,0.42) !important; }
footer a:hover { color: var(--c-t2) !important; text-shadow: 0 0 16px rgba(0,200,220,0.55); }
footer p { color: rgba(140,200,218,0.35) !important; font-size: 13px !important; }

/* ════════════════════════════════════════
   TRUST BADGES — premium glass cells
════════════════════════════════════════ */
.vna-trust {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; width: 100%; max-width: 100%;
  margin-top: 22px; margin-bottom: 8px;
  box-sizing: border-box;
  animation: titleReveal 1.2s var(--transition) 0.5s both;
}
.vna-trust-badge {
  display: flex; align-items: center; gap: 11px;
  background: linear-gradient(145deg, #081d2c 0%, #061220 100%);
  border: 1px solid rgba(0,200,220,0.15);
  padding: 13px 11px; border-radius: 10px;
  transition: all 0.26s ease;
  position: relative; overflow: hidden; min-width: 0; box-sizing: border-box;
}
/* Top shine */
.vna-trust-badge::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,220,0.65), transparent);
  opacity: 0.25; transition: opacity 0.28s ease;
  pointer-events: none;
}
/* Left indicator */
.vna-trust-badge::after {
  content: '';
  position: absolute; left: 0; top: 25%; bottom: 25%; width: 2px;
  background: linear-gradient(180deg, transparent, var(--c-t), transparent);
  border-radius: 2px; opacity: 0;
  transition: opacity 0.28s ease, top 0.28s ease, bottom 0.28s ease;
}
.vna-trust-badge:hover::before { opacity: 1; }
.vna-trust-badge:hover::after  { opacity: 1; top: 10%; bottom: 10%; }
.vna-trust-badge:hover {
  background: linear-gradient(145deg, #0c2538 0%, #091928 100%);
  border-color: rgba(0,200,220,0.38);
  box-shadow: 0 6px 20px rgba(0,0,0,0.40), 0 0 0 1px rgba(0,200,220,0.06);
  transform: translateY(-1px);
}
.vna-trust-badge-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.vna-trust-badge-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vna-trust-badge-title {
  font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(230,248,255,0.95); line-height: 1.3;
  white-space: normal; word-break: break-word;
}
.vna-trust-badge-sub {
  font-family: 'Exo 2', sans-serif; font-weight: 400;
  font-size: 10px; letter-spacing: 0.3px;
  color: rgba(0,200,220,0.62); line-height: 1.3;
  white-space: normal; word-break: break-word;
}

/* ════════════════════════════════════════
   STATS BAR — plasma counter display
════════════════════════════════════════ */
.vna-stats {
  display: flex; gap: 0;
  border: 1px solid rgba(0,200,220,0.16);
  border-radius: 12px; margin: 0 0 16px; overflow: hidden;
  background: linear-gradient(135deg, #071c2c 0%, #050d18 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.5),
    0 8px 32px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(0,200,220,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.4);
}
.vna-stat {
  flex: 1; padding: 18px 5px; text-align: center;
  border-right: 1px solid rgba(0,200,220,0.09);
  transition: background 0.28s ease; position: relative; overflow: hidden;
}
/* Top glow line */
.vna-stat::before {
  content: ''; pointer-events: none;
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,200,220,0.65), transparent);
}
.vna-stat:last-child { border-right: none; }
.vna-stat:hover { background: rgba(0,200,220,0.05); }
.vna-stat-num {
  font-family: 'Orbitron', sans-serif; font-size: 19px; font-weight: 700;
  color: var(--c-t2); line-height: 1; display: block;
  text-shadow: 0 0 20px rgba(0,230,255,0.85), 0 0 45px rgba(0,200,220,0.35);
  letter-spacing: -0.5px;
}
.vna-stat-label {
  font-family: 'Rajdhani', sans-serif; font-size: 8px; letter-spacing: 2.5px;
  text-transform: uppercase; color: rgba(150,215,232,0.36);
  margin-top: 7px; display: block; font-weight: 700;
}

/* ════════════════════════════════════════
   SCROLL INDICATOR
════════════════════════════════════════ */
.vna-scroll-indicator {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: rgba(0,200,220,0.35); font-size: 9px; letter-spacing: 3.5px;
  text-transform: uppercase; margin-top: 28px;
  animation: scrollBounce 2.5s ease-in-out infinite;
}
.vna-scroll-indicator svg { width: 16px; height: 16px; }
@keyframes scrollBounce {
  0%,100% { transform:translateY(0);   opacity:0.30; }
  50%     { transform:translateY(9px); opacity:1; }
}

/* ════════════════════════════════════════
   MISC
════════════════════════════════════════ */
.component[data-component-id*="announcement"] { animation: titleReveal 0.65s ease both; }
.bg-accent-500.rounded { background-color: var(--c-t) !important; color: #001520 !important; font-weight: 700; }

/* Cart badge */
span.absolute.-top-3.-right-3 {
  background: linear-gradient(135deg, var(--c-t2) 0%, var(--c-t) 100%) !important;
  color: #001520 !important; font-weight: 800 !important;
  box-shadow: 0 0 14px rgba(0,200,220,0.70) !important;
  animation: bubblePop 0.5s cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes bubblePop { from{transform:scale(0);opacity:0} 60%{transform:scale(1.15)} to{transform:scale(1);opacity:1} }

/* Stock / status text */
.text-green-500 { color: #00FF9D !important; text-shadow: 0 0 10px rgba(0,255,157,0.4); }
.text-red-500   { color: #FF4466 !important; text-shadow: 0 0 10px rgba(255,68,102,0.3); }


/* ════════════════════════════════════════
   ADDITIONS — SESSION 2 UPGRADES (PRECISE)
════════════════════════════════════════ */

/* ── Card image/icon area: tighter height ── */
/* Image wrapper div */
a.block.h-full.bg-card .relative.overflow-hidden.p-2.mb-4.border-b {
  padding: 0 !important;
  margin: 0 !important;
  height: 180px !important;
  width: 100% !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
}
/* Actual product images */
a.block.h-full.bg-card .relative img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  max-height: none !important;
  max-width: none !important;
}
/* No-image SVG placeholder container — shrink it */
a.block.h-full.bg-card .aspect-product-card-image,
a.block.h-full.bg-card .aspect-group-card-image {
  aspect-ratio: unset !important;
  height: 140px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* SVG icon inside placeholder — normal size + teal */
a.block.h-full.bg-card .aspect-product-card-image svg,
a.block.h-full.bg-card .aspect-group-card-image svg {
  width: 64px !important;
  height: 64px !important;
  color: var(--c-t3) !important;
  transition: filter 0.3s ease, color 0.3s ease !important;
}
/* Glow on hover */
a.block.h-full.bg-card:hover .aspect-product-card-image svg,
a.block.h-full.bg-card:hover .aspect-group-card-image svg {
  color: var(--c-t2) !important;
  filter: drop-shadow(0 0 10px rgba(0,200,220,0.90)) drop-shadow(0 0 24px rgba(0,200,220,0.45)) !important;
}

/* ── Stock text — JS classifier adds .vna-in-stock / .vna-out-of-stock ── */
/* Base stock paragraph style */
a.block.h-full.bg-card p.text-sm {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}
/* In Stock — teal/cyan */
a.block.h-full.bg-card p.text-sm.vna-in-stock {
  color: #00C8DC !important;
  text-shadow: 0 0 12px rgba(0,200,220,0.60) !important;
}
/* Out of Stock — red */
a.block.h-full.bg-card p.text-sm.vna-out-of-stock {
  color: #FF4466 !important;
  text-shadow: 0 0 10px rgba(255,68,102,0.45) !important;
}
/* In-Stock indicator SVG (infinity icon variant) */
a.block.h-full.bg-card p.text-sm svg {
  color: var(--c-t) !important;
  filter: drop-shadow(0 0 4px rgba(0,200,220,0.6));
}
/* Tailwind class fallbacks */
.text-green-500 { color: #00C8DC !important; text-shadow: 0 0 10px rgba(0,200,220,0.50) !important; }
.text-red-500   { color: #FF4466 !important; text-shadow: 0 0 10px rgba(255,68,102,0.40) !important; }

/* ── Price: Bebas Neue, bigger, glowing ── */
a.block.h-full.bg-card .text-accent-500 {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.55rem !important;
  letter-spacing: 1px !important;
  color: var(--c-t) !important;
  text-shadow: 0 0 18px rgba(0,200,220,0.70), 0 0 40px rgba(0,200,220,0.25) !important;
}

/* ── Strikethrough prices — subtle ── */
a.block.h-full.bg-card .line-through,
a.block.h-full.bg-card span.text-sm.line-through {
  color: rgba(150,185,200,0.28) !important;
  font-size: 0.78em !important;
  font-family: 'Barlow', sans-serif !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  text-decoration: line-through !important;
}

/* ── Footer "VNA STORE" shop name — Orbitron, teal glow ── */
/* Targets: <p class="text-t-primary font-semibold text-lg ...">{{ shop.name }}</p> */
footer p.font-semibold {
  font-family: 'Orbitron', sans-serif !important;
  color: var(--c-t) !important;
  text-shadow: var(--glow-t) !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
  font-size: 15px !important;
}
/* Footer copyright text */
footer p.text-sm {
  font-family: 'Rajdhani', sans-serif !important;
  color: rgba(0,200,220,0.28) !important;
  font-size: 10px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}
/* Footer nav links */
footer a.text-xs {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(0,200,220,0.32) !important;
  font-weight: 700 !important;
  transition: color 0.2s ease, text-shadow 0.2s ease !important;
}
footer a.text-xs:hover {
  color: var(--c-t2) !important;
  text-shadow: 0 0 14px rgba(0,200,220,0.55) !important;
}