/* =========================
   DARK THEME + UI POLISH
   ========================= */
:root{
  --bg-main: #0e1116;
  --bg-card: #151a21;
  --bg-card-hover: #1b2230;

  --text-main: #ffffff;
  --text-muted: #b6bcc7;

  --price-green: #3dff9f;
  --price-green-soft: rgba(61,255,159,.15);

  --border-dark: rgba(255,255,255,.08);

  --ui-shadow: 0 18px 40px rgba(0,0,0,.35);
  --ui-shadow-soft: 0 10px 26px rgba(0,0,0,.22);
  --ui-radius: 16px;
  --ui-ease: cubic-bezier(.2,.8,.2,1);

  --ui-accent: 120, 255, 198; /* RGB */
}

/* Общий фон + белый текст */
html, body{
  background-color: var(--bg-main) !important;
  color: var(--text-main) !important;
}

body, p, span, div, li, h1, h2, h3, h4, h5, h6, small{
  color: var(--text-main);
}

/* Вторичный текст */
.text-muted,
.description,
.product-description{
  color: var(--text-muted) !important;
}

/* Ссылки */
a{
  color: #8fd3ff;
  transition: color .2s ease;
}
a:hover{ color: #b8e6ff; }

/* Лёгкий фоновой glow */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 400px at 20% 10%, rgba(var(--ui-accent), .10), transparent 60%),
    radial-gradient(700px 380px at 85% 20%, rgba(120,180,255,.10), transparent 60%),
    radial-gradient(800px 420px at 50% 90%, rgba(255,255,255,.06), transparent 60%);
  opacity:.9;
  z-index:0;
}
#app{ position:relative; z-index:1; }

/* =========================
   PRODUCT CARDS (assigned via JS)
   ========================= */
.ui-product-card{
  position:relative;
  border-radius: var(--ui-radius);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  background-color: var(--bg-card);
  border: 1px solid var(--border-dark);
  box-shadow: var(--ui-shadow-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
  overflow:hidden;
  transition:
    transform .28s var(--ui-ease),
    box-shadow .28s var(--ui-ease),
    border-color .28s var(--ui-ease),
    background-color .28s var(--ui-ease),
    filter .28s var(--ui-ease);
}

.ui-product-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(420px 220px at var(--mx, 50%) var(--my, 35%),
      rgba(var(--ui-accent), .22),
      rgba(255,255,255,.08) 35%,
      transparent 65%);
  opacity:0;
  transition: opacity .28s var(--ui-ease);
  pointer-events:none;
}

.ui-product-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  border: 1px solid rgba(255,255,255,.06);
  opacity:.9;
}

.ui-product-card:hover,
.ui-product-card:focus-within{
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(255,255,255,.18);
  box-shadow: var(--ui-shadow);
  background-color: var(--bg-card-hover);
  filter: saturate(1.05);
}
.ui-product-card:hover::before,
.ui-product-card:focus-within::before{
  opacity:1;
}
.ui-product-card:active{
  transform: translateY(-2px) scale(0.995);
}

.ui-product-card img{
  transition: transform .35s var(--ui-ease), filter .35s var(--ui-ease);
  will-change: transform;
}
.ui-product-card:hover img{
  transform: scale(1.04);
  filter: contrast(1.02);
}

/* =========================
   PRICES (green)
   ========================= */
.price,
.product-price,
.final-price,
[data-price],
span[class*="price"],
div[class*="price"]{
  color: var(--price-green) !important;
  font-weight: 650;
  text-shadow: 0 0 12px var(--price-green-soft);
}

/* старая цена */
.old-price,
.price-old,
span[class*="old"][class*="price"]{
  color: rgba(255,255,255,.45) !important;
  text-decoration: line-through;
  font-weight: 400;
  text-shadow: none;
}

/* =========================
   REVEAL ANIMATION
   ========================= */
.ui-reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s var(--ui-ease), transform .6s var(--ui-ease);
}
.ui-reveal.is-visible{
  opacity:1;
  transform: translateY(0);
}
.ui-delay-1{ transition-delay: .06s; }
.ui-delay-2{ transition-delay: .12s; }
.ui-delay-3{ transition-delay: .18s; }
.ui-delay-4{ transition-delay: .24s; }

/* =========================
   BUTTONS (optional)
   ========================= */
button,
.btn{
  background: linear-gradient(180deg, rgba(61,255,159,.18), rgba(61,255,159,.10));
  color: #ffffff;
  border: 1px solid rgba(61,255,159,.35);
  border-radius: 10px;
  transition: all .25s ease;
}
button:hover,
.btn:hover{
  background: rgba(61,255,159,.22);
  box-shadow: 0 0 18px rgba(61,255,159,.25);
  transform: translateY(-1px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ui-product-card,
  .ui-product-card::before,
  .ui-product-card img,
  .ui-reveal{
    transition:none !important;
    animation:none !important;
  }
}