/* themes.css — сезонное праздничное оформление витрины.
   Все правила строго скопированы под классы body.theme-*, чтобы не влиять
   на обычный дизайн сайта. Декоративные элементы генерируются в assets/js/theme.js
   и добавляются в контейнеры .theme-decor (внутри #site-header и внутри #home-hero). */

.theme-decor{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1;}
/* Декор шапки (гирлянда/снег/блик) должен совпадать по ширине и скруглению
   именно со скруглённой карточкой .header-row, а не со всей #site-header
   (та шире на десктопе) — иначе декор вылезает прямоугольником за края карточки. */
#theme-decor{max-width:1480px; margin:0 auto; border-radius:20px; overflow:hidden;}

/* Обратный отсчёт до конца акции в hero-баннере (см. assets/js/theme.js) —
   базовые размеры/форма общие для всех тем, цвета переопределяются под каждую тему ниже. */
.hero-countdown{
  position:relative; z-index:2; display:inline-block; margin-top:14px;
  padding:7px 14px; border-radius:999px; font-size:13px; font-weight:600;
  letter-spacing:.01em; backdrop-filter:blur(2px);
}
#site-header .theme-decor{border-radius:20px;}

/* ---------- Общие переопределения переменных hero/шапки для праздничных тем ---------- */
/* overflow:hidden тут специально не ставим — иначе выпадающие подменю каталога
   (женские/мужские оправы и т.д.), которые открываются ниже строки шапки,
   обрезались бы и становились невидимыми во время праздничного оформления. */
body[class*="theme-"] #site-header .header-row{position:relative;}
body[class*="theme-"] .hero{position:relative; overflow:hidden; border-radius:var(--radius-lg);}

/* ================= 1. Новый год — «Синяя ночь + гирлянда» ================= */
.theme-new-year #site-header .header-row{
  background:
    radial-gradient(circle at 85% 12%, rgba(255,217,122,.16), transparent 42%),
    radial-gradient(circle at 8% 88%, rgba(109,139,255,.20), transparent 45%),
    linear-gradient(170deg,#0b2647,#123a63 55%,#0d2e54);
  color:#fff;
}
/* Hero делаем "премиальным": несколько слоёв — глубокий градиент фона,
   рассеянные тёплые/холодные блики (боке), мелкие звёзды-точки узором,
   мягкая диагональная световая полоса и лёгкая виньетка по краям, чтобы
   карточка не выглядела плоской заливкой. */
.theme-new-year .hero{
  background:
    radial-gradient(circle at 78% 8%, rgba(255,217,122,.22), transparent 30%),
    radial-gradient(circle at 92% 32%, rgba(255,217,122,.10), transparent 22%),
    radial-gradient(circle at 12% 85%, rgba(109,139,255,.26), transparent 38%),
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.06), transparent 26%),
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0 1px, transparent 1px 46px),
    repeating-radial-gradient(circle at 70% 70%, rgba(255,217,122,.14) 0 1px, transparent 1px 60px),
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,.05) 50%, transparent 62%),
    linear-gradient(170deg,#0b2647,#123a63 55%,#0d2e54);
  box-shadow:inset 0 0 120px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,217,122,.14);
  color:#fff;
}
.theme-new-year #site-header .logo,
.theme-new-year #site-header .main-nav a,
.theme-new-year #site-header .header-actions a{color:#fff;}
.theme-new-year .hero h1, .theme-new-year .hero p.lead{color:#fff;}
.theme-new-year .eyebrow{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#ffd97a;}
.theme-new-year .btn-primary{background:#e63946; box-shadow:0 14px 30px rgba(230,57,70,.35);}
.theme-new-year .btn-primary:hover{background:#c92e3a;}
.theme-new-year .tag-preview, .theme-new-year .price-note-sm{background:#e6c15c;}
.theme-new-year .hero-countdown{background:rgba(255,255,255,.12); border:1px solid rgba(230,193,90,.4); color:#ffd97a;}

.garland-strip{position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-evenly; padding:4px 10px; z-index:2;}
.garland-bulb{width:8px; height:8px; border-radius:50%; display:inline-block; box-shadow:0 0 6px currentColor; animation:bulb-blink 1.6s ease-in-out infinite;}
@keyframes bulb-blink{
  0%, 100%{opacity:.45; filter:brightness(.8);}
  50%{opacity:1; filter:brightness(1.4);}
}

.snowflake{position:absolute; top:-20px; color:#fff; pointer-events:none; animation-name:snow-fall; animation-timing-function:linear; animation-iteration-count:infinite;}
@keyframes snow-fall{
  0%{transform:translateY(-20px) rotate(0deg); opacity:0;}
  10%{opacity:1;}
  100%{transform:translateY(420px) rotate(360deg); opacity:.2;}
}

.theme-glow-orb{position:absolute; right:24px; top:24px; width:180px; height:180px; border-radius:50%; background:#ffd97a; filter:blur(40px); opacity:.55; animation:glow-pulse 4s ease-in-out infinite;}
@keyframes glow-pulse{
  0%, 100%{opacity:.4; transform:scale(1);}
  50%{opacity:.7; transform:scale(1.12);}
}

/* ================= 2. Чёрная пятница — «Премиальный минимализм» ================= */
.theme-black-friday #site-header .header-row{
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,.08), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,.05), transparent 40%),
    #161616;
  color:#fff;
}
/* Тёмный премиальный фон hero: тонкая металлическая фактура (диагональные
   микрополосы), холодные блики, точечный узор "зерна" и глубокая виньетка —
   вместо ровной заливки #161616. */
.theme-black-friday .hero{
  background:
    radial-gradient(circle at 85% 6%, rgba(255,255,255,.10), transparent 32%),
    radial-gradient(circle at 6% 92%, rgba(255,255,255,.06), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.04), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 10px),
    repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.06) 0 1px, transparent 1px 50px),
    linear-gradient(180deg,#1c1c1c,#111111);
  box-shadow:inset 0 0 140px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.08);
  color:#fff;
}
.theme-black-friday #site-header .logo,
.theme-black-friday #site-header .main-nav a,
.theme-black-friday #site-header .header-actions a{color:#fff;}
.theme-black-friday .hero h1{font-family:Georgia, var(--serif); letter-spacing:.02em; color:#fff;}
.theme-black-friday .hero p.lead{color:#d8d8d8;}
.theme-black-friday .eyebrow{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff;}
.theme-black-friday .btn-primary{background:transparent; color:#fff; border:1px solid #fff; box-shadow:none;}
.theme-black-friday .btn-primary:hover{background:rgba(255,255,255,.1);}
.theme-black-friday .hero-countdown{background:transparent; border:1px solid #fff; color:#fff;}

.bf-shine{position:absolute; inset:0; background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%); background-size:250% 100%; animation:bf-shine-sweep 3.5s linear infinite;}
@keyframes bf-shine-sweep{
  0%{background-position:120% 0;}
  100%{background-position:-20% 0;}
}

/* ================= 3. 8 марта — «Розовая пудра» ================= */
.theme-march8 #site-header .header-row{
  background:
    radial-gradient(circle at 88% 10%, rgba(226,120,155,.22), transparent 42%),
    radial-gradient(circle at 6% 92%, rgba(255,255,255,.5), transparent 45%),
    linear-gradient(170deg,#fdeef2,#fbdce6 60%,#f7cddd);
  color:#7a2e46;
}
/* Премиальный "розовая пудра": мягкие перламутровые блики разного размера,
   тёплый золотистый акцент, деликатный узор из мелких точек (как бумага
   ручной работы) и лёгкая диагональная световая полоса вместо плоской заливки. */
.theme-march8 .hero{
  background:
    radial-gradient(circle at 90% 4%, rgba(255,255,255,.7), transparent 26%),
    radial-gradient(circle at 78% 18%, rgba(226,120,155,.26), transparent 34%),
    radial-gradient(circle at 8% 90%, rgba(255,255,255,.55), transparent 40%),
    radial-gradient(circle at 30% 75%, rgba(238,193,120,.18), transparent 32%),
    repeating-radial-gradient(circle at 25% 35%, rgba(255,255,255,.5) 0 1px, transparent 1px 42px),
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 62%),
    linear-gradient(170deg,#fdeef2,#fbdce6 55%,#f6c9db);
  box-shadow:inset 0 0 90px rgba(122,46,70,.10), inset 0 0 0 1px rgba(255,255,255,.6);
  color:#7a2e46;
}
.theme-march8 #site-header .logo,
.theme-march8 #site-header .main-nav a,
.theme-march8 #site-header .header-actions a{color:#7a2e46;}
.theme-march8 .hero h1, .theme-march8 .hero p.lead{color:#7a2e46;}
.theme-march8 .eyebrow{background:rgba(122,46,70,.08); border-color:rgba(122,46,70,.2); color:#c4577f;}
.theme-march8 .btn-primary{background:#e2789b; box-shadow:0 14px 30px rgba(226,120,155,.35);}
.theme-march8 .btn-primary:hover{background:#d65c86;}
.theme-march8 .hero-countdown{background:rgba(122,46,70,.08); border:1px solid rgba(122,46,70,.2); color:#c4577f;}

.petal{position:absolute; top:-16px; border-radius:60% 10% 60% 10%; pointer-events:none; animation-name:petal-fall; animation-timing-function:linear; animation-iteration-count:infinite;}
@keyframes petal-fall{
  0%{transform:translate(0, -16px) rotate(0deg); opacity:0;}
  10%{opacity:1;}
  50%{transform:translate(20px, 200px) rotate(160deg);}
  100%{transform:translate(-10px, 420px) rotate(320deg); opacity:.2;}
}

/* ================= 4. 23 февраля — «Тёмно-синий + золото» ================= */
.theme-feb23 #site-header .header-row{
  background:
    radial-gradient(circle at 88% 14%, rgba(201,162,74,.22), transparent 42%),
    radial-gradient(circle at 8% 88%, rgba(201,162,74,.10), transparent 45%),
    linear-gradient(170deg,#0f1c2c,#1c2b3a 55%,#152332);
  color:#fff;
}
/* Премиальный "тёмно-синий + золото": несколько золотых бликов разного
   размера (эффект наградной ленты/медали), тонкий узор звёзд-точек,
   диагональный металлический блик и глубокая виньетка по краям. */
.theme-feb23 .hero{
  background:
    radial-gradient(circle at 85% 8%, rgba(201,162,74,.30), transparent 32%),
    radial-gradient(circle at 96% 40%, rgba(201,162,74,.14), transparent 24%),
    radial-gradient(circle at 10% 90%, rgba(201,162,74,.14), transparent 38%),
    radial-gradient(circle at 35% 15%, rgba(255,255,255,.05), transparent 26%),
    repeating-radial-gradient(circle at 22% 32%, rgba(201,162,74,.16) 0 1px, transparent 1px 48px),
    linear-gradient(115deg, transparent 40%, rgba(201,162,74,.10) 50%, transparent 62%),
    linear-gradient(170deg,#0f1c2c,#1c2b3a 55%,#152332);
  box-shadow:inset 0 0 130px rgba(0,0,0,.4), inset 0 0 0 1px rgba(201,162,74,.18);
  color:#fff;
}
.theme-feb23 #site-header .logo,
.theme-feb23 #site-header .main-nav a,
.theme-feb23 #site-header .header-actions a{color:#fff;}
.theme-feb23 .hero h1, .theme-feb23 .hero p.lead{color:#fff;}
.theme-feb23 .eyebrow{background:rgba(255,255,255,.08); border-color:rgba(201,162,74,.4); color:#c9a24a;}
.theme-feb23 .btn-primary{background:#c9a24a; color:#231a08; box-shadow:0 14px 30px rgba(201,162,74,.35);}
.theme-feb23 .btn-primary:hover{background:#b78f3c;}
.theme-feb23 .hero-countdown{background:rgba(255,255,255,.08); border:1px solid rgba(201,162,74,.4); color:#c9a24a;}

.twinkle-star{position:absolute; color:#fff; pointer-events:none; animation-name:twinkle; animation-timing-function:ease-in-out; animation-iteration-count:infinite;}
@keyframes twinkle{
  0%, 100%{opacity:.15; transform:scale(.8);}
  50%{opacity:1; transform:scale(1.15);}
}

/* ---------- Переключатель «Обычная тема / Праздничная тема» в шапке ---------- */
.theme-toggle-link{font-size:12px; opacity:.85; white-space:nowrap;}
.theme-toggle-link:hover{opacity:1;}

/* ---------- Мобильная адаптация: декор не должен мешать бургер-меню и не растягивать шапку ---------- */
@media (max-width:900px){
  .garland-strip{padding:2px 6px;}
  .garland-bulb{width:6px; height:6px;}
  .theme-glow-orb{width:100px; height:100px; right:8px; top:8px;}
}