/* ============================================================
   BUYGA — единый CSS для автономных mockup-страниц
   Собрано из: home.css + catalog.css + topup.css + product.css + product2.css
   ============================================================ */

/* ============ home.css (дизайн-система + главная) ============ */
/* ==== design-system.css (копия, редактировать можно свободно) ==== */
/* ============================================
   BUYGA — Дизайн-система (редизайн по референсам)
   Светлая тема, сине-фиолетовые акценты
   ============================================ */
:root {
  /* Фоны */
  --ds-bg: #fafbfd;
  --ds-bg-soft: #eef0f8;
  --ds-surface: #ffffff;
  --ds-surface-2: #f8f9fc;

  /* Текст */
  --ds-text: #1a1d2e;
  --ds-text-soft: #5b6178;
  --ds-text-muted: #8b91a7;

  /* Акценты (сине-фиолетовый градиент с макетов) */
  --ds-accent: #4a5cff;
  --ds-accent-2: #8b3df5;
  --ds-accent-grad: linear-gradient(90deg, #086cfe 0%, #304dfc 48%, #9340fc 100%);
  --ds-accent-soft: rgba(74, 92, 255, 0.08);

  /* Границы и тени */
  --ds-border: rgba(26, 29, 46, 0.08);
  --ds-shadow-sm: 0 2px 8px rgba(26, 29, 46, 0.04);
  --ds-shadow: 0 8px 30px rgba(26, 29, 46, 0.08);
  --ds-shadow-lg: 0 16px 50px rgba(74, 92, 255, 0.12);

  /* Радиусы */
  --ds-radius-sm: 12px;
  --ds-radius: 16px;
  --ds-radius-lg: 24px;

  /* Тёмный футер */
  --ds-dark: #14172a;
  --ds-dark-soft: #1d2138;

  /* Layout — ширина контента, единая для всех секций сайта */
  --ds-container: 1750px;
  --ds-container-pad: 36px;
}

/* Общий контейнер: max-width + центрирование + боковые отступы на маленьких экранах.
   Используйте на любом новом блоке вместо того, чтобы прописывать max-width вручную. */
.ds-container {
  width: calc(100% - (var(--ds-container-pad) * 2));
  max-width: var(--ds-container);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Утилитарные классы дизайн-системы (префикс ds- чтобы не конфликтовать со старыми стилями) */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--ds-radius-sm);
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px;
  border: none; cursor: pointer; text-decoration: none; transition: all .2s;
}
.ds-btn-primary { background: var(--ds-accent-grad); color: #fff; }
.ds-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-lg); }
.ds-btn-ghost { background: var(--ds-surface); color: var(--ds-accent); border: 1.5px solid var(--ds-border); }
.ds-btn-ghost:hover { border-color: var(--ds-accent); }

.ds-card {
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius); box-shadow: var(--ds-shadow-sm);
  transition: all .2s;
}
.ds-card:hover { box-shadow: var(--ds-shadow); transform: translateY(-3px); }

.ds-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--ds-accent-soft); color: var(--ds-accent);
}

.ds-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--ds-radius-sm);
  background: var(--ds-surface); border: 1.5px solid var(--ds-border);
  font-weight: 600; color: var(--ds-text); cursor: pointer; transition: all .2s;
}
.ds-chip.active, .ds-chip:hover { border-color: var(--ds-accent); color: var(--ds-accent); background: var(--ds-accent-soft); }

.ds-section-title { font-size: 32px; font-weight: 800; color: var(--ds-text); }
.ds-section-title .accent { color: var(--ds-accent); }
.ds-section-sub { font-size: 15px; color: var(--ds-text-soft); }

/* Общие переиспользуемые блоки (одни и те же параметры на разных страницах —
   вместо копий под разными именами используем один набор правил) */
.ds-info-card, .ds-cg-info-card, .ds-pd-trust-card {
  display: flex; gap: 14px; align-items: flex-start; background: transparent;
  border-right: 1px solid var(--ds-border); padding: 22px; transition: background-color .2s;
}
.ds-info-card:last-child, .ds-cg-info-card:last-child, .ds-pd-trust-card:last-child { border-right: none; }
.ds-info-card:hover, .ds-cg-info-card:hover, .ds-pd-trust-card:hover { background: var(--ds-surface-2); }
.ds-info-ic, .ds-cg-info-ic, .ds-pd-trust-ic {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--ds-accent-soft); padding: 9px; box-sizing: border-box;
}
.ds-info-ic img, .ds-cg-info-ic img, .ds-pd-trust-ic img { width: 100%; height: 100%; object-fit: contain; }
.ds-info-card b, .ds-cg-info-card b, .ds-pd-trust-card b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ds-text); margin-bottom: 4px; }
.ds-info-card small, .ds-cg-info-card small, .ds-pd-trust-card small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ds-text-muted); margin-bottom: 8px; }
.ds-info-card a, .ds-cg-info-card a { font-size: 12.5px; font-weight: 700; color: var(--ds-accent); text-decoration: none; }
.ds-info-card a:hover, .ds-cg-info-card a:hover { text-decoration: underline; }

.ds-step-circle, .ds-tp2-step-n, .ds-pd-step-n, .ds-p2-step-n {
  border-radius: 50%; background: var(--ds-accent-grad); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ============ ШАПКА (по референсу) ============ */
.ds-header { background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); box-shadow: 0 2px 16px rgba(26,29,46,.04); position: sticky; top: 0; z-index: 1000; overflow: visible; }
.ds-header-inner {
  width: calc(100% - 72px); max-width: var(--ds-container); margin: 0 auto; padding: 18px 0;
  display: flex; align-items: center; gap: 22px;
}
.ds-logo {
  font-size: 34px; font-weight: 900; letter-spacing: -1.5px;
  text-decoration: none; color: #1b1f3a; flex-shrink: 0;
  line-height: 1.4; padding: 4px 2px; display: inline-block;
  overflow: visible;
}
.ds-logo span {
  background: linear-gradient(120deg, #3d5afe 0%, #7c4dff 50%, #9c27ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #7c4dff;
  padding-right: 2px;
}

.ds-nav { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.ds-nav a { position: relative; color: var(--ds-text-soft); text-decoration: none; font-weight: 600; font-size: 15px; transition: color .25s cubic-bezier(.4,0,.2,1); white-space: nowrap; padding-bottom: 4px; }
.ds-nav a:hover { color: var(--ds-text); }
.ds-nav a.active { color: var(--ds-accent); }
.ds-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--ds-accent-grad); transform: scaleX(0); transform-origin: center; transition: transform .25s cubic-bezier(.4,0,.2,1); }
.ds-nav a.active::after, .ds-nav a:hover::after { transform: scaleX(1); }

.ds-search {
  flex: 1; min-width: 0; margin: 0 28px;
  display: flex; align-items: center; gap: 10px;
  background: var(--ds-surface-2); border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-sm); padding: 12px 18px; color: var(--ds-text-muted);
}
.ds-search:focus-within { border-color: var(--ds-accent); }
.ds-search input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font-size: 15px; color: var(--ds-text); font-family: 'Outfit', sans-serif; }

.ds-actions {
  display: flex; align-items: center; gap: 18px; flex-shrink: 0;
}
.ds-icon-btn {
  position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ds-surface-2); border: 1px solid var(--ds-border);
  color: var(--ds-text-soft); text-decoration: none; font-size: 19px; transition: all .25s cubic-bezier(.4,0,.2,1);
}
.ds-icon-btn:hover { border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-badge-count { position: absolute; top: -3px; right: -3px; background: var(--ds-accent-2); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 50%; text-align: center; line-height: 18px; padding: 0 4px; }
.ds-login { padding: 12px 28px; margin-left: 6px; }

/* Лента категорий под шапкой */
.ds-cat-strip {
  max-width: var(--ds-container); margin: 0 auto; padding: 8px 24px 16px;
  display: flex; gap: 10px; overflow-x: auto; overflow-y: visible; scrollbar-width: none;
}
.ds-cat-strip::-webkit-scrollbar { display: none; }
.ds-cat {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 12px 20px 16px; border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-2); border: 1.5px solid var(--ds-border);
  color: var(--ds-text-soft); text-decoration: none; font-weight: 600; font-size: 14px; transition: all .25s cubic-bezier(.4,0,.2,1);
}
.ds-cat:hover { border-color: rgba(74,92,255,.4); color: var(--ds-accent); }
.ds-cat.active { background: var(--ds-accent-soft); border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-cat.active::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 6px; width: 40%; height: 3px; border-radius: 3px; background: var(--ds-accent-grad); }
.ds-cat-ic { font-size: 17px; }

/* Мобильная адаптация шапки */
@media (max-width: 1350px) {
  .ds-nav { display: none; }
  .ds-header-inner { flex-wrap: wrap; gap: 12px; }
  .ds-search { order: 3; flex-basis: 100%; }
}
@media (max-width: 560px) {
  .ds-logo { font-size: 22px; }
  .ds-login { padding: 10px 16px; font-size: 14px; }
  .ds-icon-btn { width: 40px; height: 40px; font-size: 17px; }
}

/* ============ ГЛОБАЛЬНАЯ ПЛАВНОСТЬ ============ */
/* Плавная прокрутка по якорям */
html { scroll-behavior: smooth; }

/* Мягкие переходы на всех интерактивных элементах нового дизайна */
.ds-header a, .ds-header button,
.ds-btn, .ds-card, .ds-chip, .ds-cat, .ds-nav a, .ds-icon-btn,
.ds-search, .ds-search input {
  transition: color .25s cubic-bezier(.4,0,.2,1),
              background-color .25s cubic-bezier(.4,0,.2,1),
              border-color .25s cubic-bezier(.4,0,.2,1),
              box-shadow .25s cubic-bezier(.4,0,.2,1),
              transform .25s cubic-bezier(.4,0,.2,1);
}

/* Плавное появление картинок по мере загрузки */
.ds-card img { transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .35s ease; }
.ds-card:hover img { transform: scale(1.03); }

/* Уважаем настройку "уменьшить движение" (для людей с вестибулярной чувствительностью) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============ ЛЕНТА КАТЕГОРИЙ ВО ВСЮ ШИРИНУ (референс 2) ============ */
.ds-cat-bar {
  display: flex; width: calc(100% - 72px); max-width: var(--ds-container); margin: 0 auto 16px;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 18px;
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}
.ds-cat2 {
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 12px 18px; text-decoration: none;
  border-right: 1px solid var(--ds-border);
  transition: background-color .25s cubic-bezier(.4,0,.2,1);
}
.ds-cat2:last-child { border-right: none; }

.ds-cat2:hover { background: var(--ds-surface-2); }
.ds-cat2::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 0; background: var(--ds-accent-grad);
  transform: scaleX(0); transform-origin: center; transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.ds-cat2.active::after { transform: scaleX(1); }
.ds-cat2-ic { font-size: 24px; flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.ds-cat2-ic img { width: 100%; height: 100%; object-fit: contain; }
.ds-cat2-txt { display: flex; flex-direction: column; line-height: 1.25; }
.ds-cat2-txt b { font-size: 15px; font-weight: 700; color: var(--ds-text); }
.ds-cat2-txt small { font-size: 12px; color: var(--ds-text-muted); }
.ds-cat2.active b { color: var(--ds-accent); }
.ds-cat2.active::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 8px; width: 50%; height: 3px; border-radius: 3px;
  background: var(--ds-accent-grad);
}
/* мобильная: лента скроллится горизонтально */
@media (max-width: 900px) {
  .ds-cat-bar { overflow-x: auto; scrollbar-width: none; }
  .ds-cat-bar::-webkit-scrollbar { display: none; }
  .ds-cat2 { flex: 0 0 auto; min-width: 160px; }
}


/* ============ СВЕТЛЫЙ ФОН СТРАНИЦЫ (редизайн) ============ */
body { background: var(--ds-bg) !important; color: var(--ds-text) !important; }

/* Отключаем старые неоновые глоу-эффекты (для светлого редизайна) */
.neon-glow, .neon-g1, .neon-g2, .neon-g3 { display: none !important; }

/* ============ HERO (главная, по референсу) ============ */
.ds-hero {
  display: grid; grid-template-columns: minmax(420px, 1fr) minmax(360px, 400px); column-gap: 28px; align-items: stretch; justify-content: start;
  width: calc(100% - 72px); max-width: var(--ds-container); margin: 0 auto; padding: 10px 0 12px;
  position: relative;
  overflow: hidden;
  background-image: url("../img/hero12_t.png?v=1");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: min(760px, 46vw);
}
.ds-hero-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; background: var(--ds-surface); border: 1px solid var(--ds-border); font-size: 13px; font-weight: 600; color: var(--ds-text-soft); box-shadow: var(--ds-shadow-sm); }
.ds-hero-badge img { width: 15px; height: 15px; object-fit: contain; }
h1.ds-hero-title { font-size: 44px !important; font-weight: 800; line-height: 1.16; color: var(--ds-text); margin: 16px 0 14px; letter-spacing: -1.2px; max-width: 600px; }
.ds-hero-title .g1 { color: var(--ds-accent); }
.ds-hero-title .g2 { color: var(--ds-accent-2); }
.ds-hero-sub { font-size: 16px; color: var(--ds-text-soft); line-height: 1.65; margin-bottom: 18px; max-width: 470px; }
.ds-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ds-hero-left { display: flex; flex-direction: column; position: relative; z-index: 1; padding-right: 8px; }
.ds-hero-feats { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 0; }
.ds-hero-feat { display: flex; align-items: center; gap: 10px; }
.ds-hero-feat span { font-size: 22px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ds-hero-feat span img { width: 100%; height: 100%; object-fit: contain; }
.ds-hero-feat b { display: block; font-size: 13px; font-weight: 500; color: var(--ds-text); }
.ds-hero-feat small { font-size: 13px; font-weight: 400; color: var(--ds-text-muted); }

.ds-hero-center { display: none; }
.ds-hero-art { width: 100%; max-width: 100%; display: flex; align-items: center; justify-content: center; }

/* Карточка "Быстрое пополнение" */
.ds-hero-right {
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg); padding: 14px 16px; box-shadow: var(--ds-shadow);
  height: 100%; display: flex; flex-direction: column; position: relative; z-index: 1;
}
.ds-qf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ds-qf-head b { font-size: 17px; color: var(--ds-text); }
.ds-qf-bolt { width: 27px; height: 27px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ds-accent-soft); }
.ds-qf-tabs { display: flex; gap: 8px; background: var(--ds-surface-2); padding: 4px; border-radius: 12px; margin-bottom: 7px; }
.ds-qf-tab { flex: 1; padding: 8px; border: none; background: transparent; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--ds-text-soft); cursor: pointer; font-family: 'Outfit',sans-serif; }
.ds-qf-tab.active { background: var(--ds-surface); color: var(--ds-accent); box-shadow: var(--ds-shadow-sm); }
.ds-qf-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ds-text-soft); margin: 6px 0 4px; }
.ds-qf-form input[type=text], .ds-qf-other { width: 100%; padding: 8px 14px; border: 1.5px solid var(--ds-border); border-radius: 10px; font-size: 14px; font-family: 'Outfit',sans-serif; outline: none; }
.ds-qf-form input:focus, .ds-qf-other:focus { border-color: var(--ds-accent); }
.ds-qf-sums { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-qf-sum { padding: 8px 14px; border: 1.5px solid var(--ds-border); border-radius: 10px; background: var(--ds-surface); font-weight: 700; font-size: 13px; color: var(--ds-text-soft); cursor: pointer; font-family: 'Outfit',sans-serif; }
.ds-qf-sum.active { border-color: var(--ds-accent); color: var(--ds-accent); background: var(--ds-accent-soft); }
.ds-qf-other { flex: 1; min-width: 100px; font-weight: 600; }
.ds-qf-submit { width: 100%; margin-top: 7px; padding: 10px; }
.ds-qf-foot { display: flex; gap: 14px; margin-top: 6px; flex-wrap: nowrap; align-items: center; }

/* Нижняя полоса преимуществ */
.ds-hero-bar {
  display: flex;
  width: calc(100% - 72px); max-width: var(--ds-container); margin: 20px auto 0;
  background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: 20px; box-shadow: var(--ds-shadow-sm); overflow: hidden;
  min-height: 108px;
}
.ds-hb-item {
  flex: 1; display: flex; align-items: center; gap: 16px;
  background: transparent; border-right: none;
  border-radius: 0; padding: 24px;
  box-shadow: none; transition: background-color .2s;
}
.ds-hb-item:last-child { border-right: none; }
.ds-hb-item > span { width: 50px; height: 50px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--ds-accent-soft); font-size: 22px; }
.ds-hb-item > span img { width: 29px; height: 29px; object-fit: contain; }
.ds-hb-item:hover { background: var(--ds-surface-2); }
.ds-hb-item b { display: block; font-size: 15px; color: var(--ds-text); }
.ds-hb-item small { font-size: 13px; color: var(--ds-text-muted); line-height: 1.35; }

/* Адаптив hero */
@media (max-width: 1100px) {
  .ds-hero { grid-template-columns: minmax(420px, 1fr) minmax(340px, 400px); column-gap: 20px; background-position: center 54%; background-size: min(620px, 44vw); }
  .ds-hero-bar { flex-wrap: wrap; }
  .ds-hb-item { flex: 1 1 50%; border-bottom: none; }
  .ds-hb-item:nth-child(2n) { border-right: none; }
}
@media (max-width: 900px) {
  .ds-hero { grid-template-columns: 1fr; background-image: none; }
  h1.ds-hero-title { font-size: 32px !important; }
  .ds-hb-item { flex: 1 1 100%; border-right: none; }
}


/* ============ ПРИНУДИТЕЛЬНО СВЕТЛАЯ ТЕМА ============ */
body, html { background: var(--ds-bg) !important; color: var(--ds-text) !important; }
.hero-section, .section, .banners-wrapper { background: transparent !important; }
/* Тёмный промо-баннер сверху скрываем */
#promoBanner { display: none !important; }


/* ============ СВЕТЛЫЙ ФОН — ЖЁСТКО (редизайн) ============ */
:root { --bg-primary: #fafbfd !important; --bg-secondary: #ffffff !important; }
html, body { background: #fafbfd !important; color: #1a1d2e !important; }
body { background: #fafbfd !important; }
.hero-section, .section, .banners-wrapper, main, .container { background: transparent !important; }

/* ============ ЦЕНТРАЛЬНАЯ КОМПОЗИЦИЯ HERO ============ */
.ds-hero-art { position: relative; width: 100%; max-width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.ds-art-glow { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, rgba(124,77,255,.22) 0%, rgba(74,92,255,.1) 45%, transparent 70%); }
.ds-art-card { position: absolute; border-radius: 16px; box-shadow: 0 12px 40px rgba(26,29,46,.18); }

/* Центральная карточка игры */
.ds-art-game-main { width: 150px; height: 200px; z-index: 4; background: linear-gradient(160deg, #2a1a4a, #1a1d3e); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ds-art-game-cover { font-size: 56px; }
.ds-art-game-price { position: absolute; bottom: 14px; left: 12px; display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #fff; }
.ds-art-check { position: absolute; bottom: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--ds-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }

/* Боковые карточки игр */
.ds-art-game-left { width: 110px; height: 150px; left: 2%; top: 38%; z-index: 3; transform: rotate(-8deg); background: linear-gradient(160deg, #1a2a3e, #14202e); display: flex; align-items: center; justify-content: center; }
.ds-art-game-right { width: 110px; height: 150px; right: 2%; top: 36%; z-index: 3; transform: rotate(8deg); background: linear-gradient(160deg, #3e1a2a, #2e1420); display: flex; align-items: center; justify-content: center; }
.ds-art-game-left .ds-art-game-cover, .ds-art-game-right .ds-art-game-cover { font-size: 40px; }

/* Карта Steam сверху */
.ds-art-steam { width: 120px; padding: 12px; top: 2%; left: 24%; z-index: 5; background: linear-gradient(160deg, #1b2838, #2a475e); color: #fff; }
.ds-art-steam-top { font-size: 11px; font-weight: 700; opacity: .8; }
.ds-art-steam-sum { font-size: 22px; font-weight: 800; margin: 4px 0; }
.ds-art-steam-bot { font-size: 12px; opacity: .7; }

/* Плашка PS Plus */
.ds-art-psplus { display: flex; align-items: center; gap: 8px; padding: 10px 12px; top: 14%; right: 4%; z-index: 5; background: #fff; }
.ds-art-psplus-ic { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, #f7b733, #fc4a1a); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.ds-art-psplus b { font-size: 12px; color: var(--ds-text); display: block; }
.ds-art-psplus small { font-size: 10px; color: var(--ds-text-muted); }

/* Геймпад снизу */
.ds-art-pad { position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); font-size: 56px; z-index: 6; filter: drop-shadow(0 8px 20px rgba(124,77,255,.4)); }

/* Кристаллы */
.ds-art-gem { position: absolute; font-size: 22px; z-index: 2; }
.ds-art-gem1 { top: 8%; left: 6%; }
.ds-art-gem2 { bottom: 18%; right: 6%; }
.ds-art-gem3 { bottom: 30%; left: 8%; font-size: 26px; }

@media (max-width: 1100px) { .ds-hero-art { display: none; } }

/* Hero-картинка вместо CSS-композиции */
.ds-hero-img { width: 100%; max-width: 920px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 24px 60px rgba(124,77,255,.2)); }

.ds-qf-note { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.ds-qf-note .ds-qf-ic { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--ds-accent-soft); font-size: 16px; }
.ds-qf-note small { font-size: 11px; color: var(--ds-text-muted); line-height: 1.25; }

.ds-qf-total { display:flex; align-items:center; justify-content:center; gap:8px; margin: 5px 0 2px; padding: 7px; background: var(--ds-accent-soft); border-radius: var(--ds-radius-sm); font-size: 14px; color: var(--ds-text-soft); text-align:center; }
.ds-qf-total b { font-size: 20px; color: var(--ds-accent); font-weight: 800; letter-spacing: -.5px; }
.ds-qf-email-wrap { margin-top: 5px; }
.ds-qf-status { font-size: 13px; margin: 3px 0 1px; min-height: 18px; line-height: 1.35; color: var(--ds-text-muted); }
.ds-qf-status.err { color: #e5484d; }
.ds-qf-status.ok { color: #1a8f4c; }

.ds-qf-email-wrap { margin-top: 5px; }
.ds-qf-email-wrap label { display:block; font-size: 13px; font-weight: 600; color: var(--ds-text-soft); margin-bottom: 5px; }
#qfEmail { width: 100%; box-sizing: border-box; padding: 8px 16px; font-size: 15px; color: var(--ds-text); background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); outline: none; transition: border-color .15s, box-shadow .15s; }
#qfEmail::placeholder { color: var(--ds-text-muted); }
#qfEmail:focus { border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft); }

.ds-qf-min { font-size: 12px; color: var(--ds-text-muted); margin: 1px 0 3px; text-align: center; }

/* ===== Секция Популярные с табами ===== */
.ds-pop-section { width: 100%; max-width: 100%; margin: 0; padding: 48px 36px; }
.ds-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 0 auto 24px; max-width: var(--ds-container); flex-wrap: wrap; }
.ds-pop-titles { max-width: 560px; }
.ds-pop-title { font-size: 36px; font-weight: 800; color: var(--ds-text); margin: 14px 0 10px; letter-spacing: -1px; }
.ds-pop-accent { background: var(--ds-accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ds-pop-sub { font-size: 15px; color: var(--ds-text-soft); line-height: 1.6; }
.ds-pop-tabs { display: flex; flex: 1; max-width: 760px; gap: 6px; padding: 8px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 999px; box-shadow: var(--ds-shadow-sm); }
.ds-pop-tab { flex: 1; padding: 16px 20px; border: none; background: transparent; border-radius: 999px; font-size: 16px; font-weight: 600; color: var(--ds-text-soft); cursor: pointer; transition: all .2s; white-space: nowrap; text-align: center; }
.ds-pop-tab:hover { color: var(--ds-text); }
.ds-pop-tab img { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 2px; }
.ds-pop-tab.active { background: var(--ds-accent-soft); color: var(--ds-accent); }

.ds-pop-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
  width: 100%;
  max-width: var(--ds-container);
  margin: 0 auto;
}
.ds-pcard {
  display: flex; flex-direction: column; min-height: 448px;
  background: var(--ds-surface); border: 1px solid rgba(112, 124, 255, 0.12);
  border-radius: 18px; overflow: hidden; text-decoration: none;
  box-shadow: 0 10px 28px rgba(30, 42, 90, 0.06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.ds-pcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(30, 42, 90, 0.14);
  border-color: rgba(112, 124, 255, 0.22);
}
.ds-pcard-img {
  height: 258px;
  background: linear-gradient(180deg, #eef2ff 0%, #e7ecff 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ds-pcard-img img {
  width: auto !important;
  min-width: 100% !important;
  height: 120% !important;
  min-height: 120% !important;
  object-fit: cover !important;
  object-position: center top !important;
  display: block !important;
  transform: none !important;
}
.ds-pcard-body {
  padding: 12px 12px 12px; display: flex; flex-direction: column; gap: 8px;
  flex: 1; background: var(--ds-surface);
}
.ds-pcard-badge {
  font-size: 11px; color: var(--ds-text-muted); font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1.2;
}
.ds-pcard-badge img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}
.ds-pcard-name {
  font-size: 14px; font-weight: 800; color: var(--ds-text); line-height: 1.32;
  min-height: 44px;
}
.ds-pcard-price {
  font-size: 17px; font-weight: 800; color: var(--ds-text);
  margin-top: auto; letter-spacing: -0.2px;
}
.ds-pcard-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 10px 12px; margin-top: 0;
  background: var(--ds-accent-grad); color: #fff; border-radius: 12px;
  box-shadow: 0 10px 24px rgba(86, 80, 250, 0.22);
  font-size: 13px; font-weight: 700;
}
.ds-pcard-btn:hover {
  box-shadow: 0 14px 28px rgba(86, 80, 250, 0.28);
}
.ds-pcard-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.98;
  filter: brightness(0) invert(1) drop-shadow(0 1px 1px rgba(255,255,255,0.18));
}
.ds-pop-cta, .ds-pop-soon { display: flex; justify-content: center; padding: 18px 0 8px; }
.ds-pop-showcase {
  width: min(100%, 1040px);
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,251,255,0.96));
  border: 1px solid rgba(217, 224, 248, 0.95);
  border-radius: 36px;
  box-shadow: 0 18px 50px rgba(78, 94, 170, 0.10);
  padding: 34px 30px 28px;
}
.ds-pop-showcase-head {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  margin-bottom: 24px;
}
.ds-pop-showcase-orb {
  position: relative;
  width: 188px;
  height: 188px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,0.98), rgba(237,241,255,0.98));
  box-shadow:
    inset 0 0 0 1px rgba(225, 231, 250, 0.92),
    0 18px 42px rgba(108, 126, 214, 0.10);
}
.ds-pop-showcase-orb::before,
.ds-pop-showcase-orb::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid rgba(231, 236, 252, 0.9);
}
.ds-pop-showcase-orb::after {
  inset: -26px;
  opacity: 0.65;
}
.ds-pop-showcase-orb img {
  width: 104px;
  height: 104px;
  object-fit: contain;
  display: block;
}
.ds-pop-showcase-orb-steam img { width: 124px; height: 124px; }
.ds-pop-showcase-orb-donate img { width: 118px; height: 118px; }
.ds-pop-showcase-orb-subs img { width: 126px; height: 126px; }
.ds-pop-showcase-copy h3 {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -1.5px;
  color: var(--ds-text);
  margin: 0 0 14px;
}
.ds-pop-showcase-copy p {
  max-width: 620px;
  font-size: 20px;
  line-height: 1.5;
  color: var(--ds-text-soft);
  margin: 0;
}
.ds-pop-amounts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.ds-pop-amounts span,
.ds-pop-brand-card {
  background: #fff;
  border: 1px solid rgba(222, 228, 248, 0.95);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(110, 122, 180, 0.06);
}
.ds-pop-amounts span {
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: var(--ds-text);
}
.ds-pop-showcase-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 98px;
  margin-bottom: 18px;
  border-radius: 24px;
  text-decoration: none;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, #086cfe 0%, #304dfc 48%, #9340fc 100%);
  box-shadow: 0 16px 34px rgba(86, 80, 250, 0.22);
}
.ds-pop-showcase-cta:hover { transform: translateY(-1px); }
.ds-pop-showcase-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ds-pop-showcase-meta span {
  min-height: 74px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(248, 249, 255, 0.98), rgba(240, 243, 255, 0.98));
  border: 1px solid rgba(227, 232, 249, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
  text-align: center;
  font-size: 18px;
  color: #5060b5;
}
.ds-pop-showcase-meta i {
  font-style: normal;
  font-weight: 800;
  color: #2f61ff;
}
.ds-pop-brand-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}
.ds-pop-brand-grid-subs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ds-pop-brand-card {
  min-height: 178px;
  padding: 14px 10px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: center;
}
.ds-pop-brand-card b {
  width: 112px;
  height: 112px;
  border-radius: 26px;
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #8fa5ff, #7649ff);
  box-shadow: none;
}
.ds-pop-brand-card b img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
}
.ds-pop-brand-thumb {
  padding: 0;
  overflow: hidden;
  background: #f5f7ff;
  box-shadow: none !important;
}
.ds-pop-brand-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.ds-pop-brand-grid-subs .ds-pop-brand-thumb {
  background: transparent !important;
}
.ds-pop-brand-grid-subs .ds-pop-brand-thumb img {
  object-fit: contain !important;
}
.ds-pop-brand-card span {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ds-text);
}
.ds-pop-brand-card-more b {
  background: linear-gradient(135deg, #f2f4ff, #eef1ff);
  color: #6473ff;
  font-size: 46px;
  font-weight: 300;
  box-shadow: none;
}
.ds-pop-brand-card .tone-pink { background: linear-gradient(135deg, #ffcfeb, #ff8fc9); }
.ds-pop-brand-card .tone-dark { background: linear-gradient(135deg, #505765, #141820); }
.ds-pop-brand-card .tone-gold { background: linear-gradient(135deg, #ffd768, #f08b2f); }
.ds-pop-brand-card .tone-blue { background: linear-gradient(135deg, #7dd5ff, #3078ff); }
.ds-pop-brand-card .tone-green { background: linear-gradient(135deg, #74d76f, #238e4b); }
.ds-pop-brand-card .tone-red { background: linear-gradient(135deg, #ff8c80, #f44336); }
.ds-pop-brand-card .tone-indigo { background: linear-gradient(135deg, #8b8dff, #5865f2); }
.ds-pop-brand-card .tone-spotify { background: linear-gradient(135deg, #5be37f, #159947); }
.ds-pop-brand-card .tone-youtube { background: linear-gradient(135deg, #ff7169, #ff2a23); }
@media (max-width: 1180px) {
  .ds-pop-showcase-head { grid-template-columns: 170px minmax(0, 1fr); gap: 22px; }
  .ds-pop-showcase-orb { width: 150px; height: 150px; }
  .ds-pop-showcase-copy h3 { font-size: 42px; }
  .ds-pop-showcase-copy p { font-size: 18px; }
  .ds-pop-showcase-cta { min-height: 84px; font-size: 26px; }
  .ds-pop-showcase-meta span { min-height: 64px; font-size: 16px; }
}
@media (max-width: 980px) {
  .ds-pop-showcase { padding: 26px 22px 22px; border-radius: 28px; }
  .ds-pop-showcase-head { grid-template-columns: 1fr; text-align: center; }
  .ds-pop-showcase-orb { margin: 0 auto; }
  .ds-pop-showcase-copy p { margin-left: auto; margin-right: auto; }
  .ds-pop-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-pop-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-pop-brand-grid-subs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-pop-showcase-meta { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ds-pop-showcase-copy h3 { font-size: 34px; letter-spacing: -1px; }
  .ds-pop-showcase-copy p { font-size: 16px; }
  .ds-pop-amounts span { min-height: 82px; font-size: 22px; }
  .ds-pop-brand-grid,
  .ds-pop-brand-grid-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ds-pop-brand-card { min-height: 156px; padding: 14px 10px; }
  .ds-pop-brand-card b { width: 96px; height: 96px; border-radius: 22px; font-size: 28px; }
  .ds-pop-brand-card span { font-size: 15px; }
  .ds-pop-showcase-cta { min-height: 72px; font-size: 22px; border-radius: 20px; }
  .ds-pop-showcase-meta span { min-height: 58px; font-size: 15px; }
}

.ds-pop-more { display: flex; justify-content: center; margin-top: 32px; }

@media (max-width: 1100px) {
  .ds-pop-grid { grid-template-columns: repeat(3, 1fr); max-width: none; }
  .ds-pcard { min-height: 396px; }
  .ds-pcard-img { height: 236px; }
}
@media (max-width: 640px) {
  .ds-pop-grid { grid-template-columns: repeat(2, 1fr); }
  .ds-pcard { min-height: 352px; }
  .ds-pcard-img { height: 198px; }
  .ds-pop-section { padding: 32px 16px; }
}

/* ===== Блок промокодов ===== */
.ds-promo-section { position: relative; width: 100%; max-width: 100%; padding: 56px 36px; overflow: hidden; }
.ds-promo-inner { width: 100%; max-width: var(--ds-container); margin: 0 auto; position: relative; z-index: 1; }
.ds-promo-head { text-align: center; margin-bottom: 32px; }
.ds-promo-title { font-size: 38px; font-weight: 800; color: var(--ds-text); letter-spacing: -1px; margin-bottom: 12px; }
.ds-promo-sub { font-size: 16px; color: var(--ds-text-soft); max-width: 720px; margin: 0 auto; line-height: 1.6; }
.ds-promo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; width: 100%; max-width: calc(100% - 360px); }
.ds-promo-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 32px 28px; box-shadow: var(--ds-shadow-sm); transition: transform .2s, box-shadow .2s; }
.ds-promo-card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow); }
.ds-promo-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; margin-bottom: 16px; }
.ds-promo-badge.purple { background: var(--ds-accent-soft); color: var(--ds-accent-2); }
.ds-promo-badge.blue { background: rgba(74,92,255,.1); color: var(--ds-accent); }
.ds-promo-code-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ds-promo-code { font-size: 32px; font-weight: 800; color: var(--ds-accent); letter-spacing: 1px; }
.ds-promo-code.blue { color: var(--ds-accent); }
.ds-promo-code.purple { color: var(--ds-accent-2); }
.ds-promo-copy { background: transparent; border: none; font-size: 22px; color: var(--ds-text-muted); cursor: pointer; padding: 4px; border-radius: 8px; transition: all .2s; line-height: 1; }
.ds-promo-copy:hover { color: var(--ds-accent); background: var(--ds-accent-soft); }
.ds-promo-copy.copied { color: #16a34a; }
.ds-promo-desc { font-size: 14px; color: var(--ds-text-soft); }
.ds-promo-art { position: absolute; right: 0; bottom: 0; width: 420px; pointer-events: none; z-index: 0; }
.ds-promo-art img { width: 100%; height: auto; }
@media (max-width: 1280px) { .ds-promo-art { display: none; } .ds-promo-grid { max-width: 100%; } }
@media (max-width: 900px) { .ds-promo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ds-promo-grid { grid-template-columns: 1fr; } .ds-promo-section { padding: 40px 16px; } }

/* Поле промокода в форме пополнения */
.ds-qf-promo { display: flex; gap: 8px; margin: 5px 0; }
.ds-qf-promo-input { flex: 1; padding: 8px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); font-size: 14px; font-family: inherit; outline: none; transition: border .2s; text-transform: uppercase; }
.ds-qf-promo-input:focus { border-color: var(--ds-accent); }
.ds-qf-promo-btn { padding: 8px 18px; border: 1px solid var(--ds-accent); background: var(--ds-accent-soft); color: var(--ds-accent); border-radius: var(--ds-radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .2s; white-space: nowrap; }
.ds-qf-promo-btn:hover { background: var(--ds-accent); color: #fff; }
.ds-qf-promo-msg { font-size: 13px; margin-bottom: 4px; min-height: 18px; line-height: 1.35; }
.ds-qf-promo-msg.ok { color: #16a34a; }
.ds-qf-promo-msg.err { color: #dc2626; }

/* ===== Секция "Что можно купить" ===== */
.ds-cat-section { width: 100%; padding: 56px 36px; }
.ds-cat-head { text-align: center; margin-bottom: 36px; }
.ds-cat-title { font-size: 40px; font-weight: 800; color: var(--ds-text); letter-spacing: -1px; margin-bottom: 12px; }
.ds-cat-sub { font-size: 16px; color: var(--ds-text-soft); max-width: 720px; margin: 0 auto; line-height: 1.6; }
.ds-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--ds-container); margin: 0 auto; }
.ds-cat-card { display: flex; align-items: center; gap: 8px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: 20px; text-decoration: none; box-shadow: var(--ds-shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; position: relative; overflow: hidden; }
.ds-cat-card:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-lg); border-color: var(--ds-accent); }
.ds-cat-card.featured { border-color: var(--ds-accent); box-shadow: 0 0 0 1px var(--ds-accent), var(--ds-shadow); }
.ds-cat-img { flex-shrink: 0; width: 140px; height: 140px; }
.ds-cat-img img { width: 100%; height: 100%; object-fit: contain; }
.ds-cat-body { flex: 1; display: flex; flex-direction: column; gap: 6px; position: relative; }
.ds-cat-badge { display: inline-block; align-self: flex-start; padding: 4px 12px; border-radius: 999px; background: var(--ds-accent-grad); color: #fff; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.ds-cat-name { font-size: 22px; font-weight: 800; color: var(--ds-text); margin: 0; }
.ds-cat-desc { font-size: 14px; color: var(--ds-text-soft); line-height: 1.5; margin: 0; }
.ds-cat-arrow { position: absolute; right: 0; bottom: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ds-accent-soft); color: var(--ds-accent); font-size: 18px; font-weight: 700; transition: all .2s; }
.ds-cat-card:hover .ds-cat-arrow { background: var(--ds-accent); color: #fff; }
@media (max-width: 1000px) { .ds-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ds-cat-grid { grid-template-columns: 1fr; } .ds-cat-section { padding: 40px 16px; } }
.ds-how-section { width: 100%; padding: 72px 36px 56px; position: relative; }
.ds-how-head { max-width: var(--ds-container); margin: 0 auto 34px; text-align: left; }
.ds-how-h2 { font-size: 58px; font-weight: 800; color: var(--ds-text); letter-spacing: -1.8px; line-height: 1.02; margin-bottom: 16px; }
.ds-how-sub { font-size: 17px; color: var(--ds-text-soft); max-width: 620px; margin: 0; line-height: 1.55; }
.ds-how-grid { display: flex; align-items: stretch; gap: 18px; max-width: var(--ds-container); margin: 0 auto 24px; position: relative; }
.ds-how-card { flex: 1 1 0; min-width: 0; min-height: 376px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 28px; padding: 24px 24px 22px; box-shadow: var(--ds-shadow-sm); display: flex; flex-direction: column; }
.ds-how-num { font-size: 16px; font-weight: 700; color: var(--ds-accent); background: var(--ds-accent-soft); width: 46px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; margin-bottom: 18px; }
.ds-how-ic { width: 104px; height: 104px; margin: 14px 0 20px; }
.ds-how-ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ds-how-title { font-size: 22px; font-weight: 800; color: var(--ds-text); margin: 0 0 12px; line-height: 1.15; letter-spacing: -0.4px; }
.ds-how-desc { font-size: 15px; color: var(--ds-text-soft); line-height: 1.45; margin: 0 0 18px; flex: 1; }
.ds-how-tag { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ds-accent); background: var(--ds-accent-soft); text-align: center; }
.ds-how-connector { display: flex; align-items: center; justify-content: center; flex: 0 0 24px; width: 24px; color: rgba(99, 110, 255, 0.55); font-size: 56px; font-weight: 300; line-height: 1; transform: translateY(-4px); }

.ds-how-bottom { max-width: var(--ds-container); margin: 0 auto; display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: end; gap: 24px; }
.ds-how-art { position: relative; width: 100%; z-index: 1; filter: drop-shadow(0 24px 44px rgba(80,70,180,.22)); pointer-events: none; }
.ds-how-art img { width: 100%; height: auto; display: block; }
.ds-how-timeline { position: relative; min-height: 184px; background: var(--ds-surface); border: none; border-radius: 36px; padding: 26px 28px 16px; box-shadow: var(--ds-shadow-sm); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
.ds-how-timeline::before { content: ""; position: absolute; top: 52px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(90deg, rgba(79, 104, 255, 0.55) 0 10px, transparent 10px 18px); z-index: 0; }
.ds-tl-item { display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; z-index: 1; }
.ds-tl-ic { width: 80px; height: 80px; }
.ds-tl-ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ds-tl-label { min-height: 40px; font-size: 13px; font-weight: 700; color: var(--ds-text); text-align: center; line-height: 1.3; }
.ds-tl-check { width: 24px; height: 24px; border-radius: 50%; background: var(--ds-accent); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px rgba(87, 95, 255, 0.2); }

.ds-how-foot { text-align: center; margin-top: 22px; padding: 16px 24px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 999px; font-size: 14px; color: var(--ds-text-soft); max-width: 720px; margin-left: auto; margin-right: auto; }

@media (max-width: 1380px) {
  .ds-how-h2 { font-size: 52px; }
  .ds-how-card { min-height: 360px; padding: 22px 20px 20px; }
  .ds-how-title { font-size: 20px; }
  .ds-how-bottom { grid-template-columns: 280px minmax(0, 1fr); }
}

@media (max-width: 1180px) {
  .ds-how-section { padding: 56px 24px 48px; }
  .ds-how-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-how-connector { display: none; }
  .ds-how-card { min-height: 0; }
  .ds-how-bottom { grid-template-columns: 1fr; }
  .ds-how-art { max-width: 280px; margin: 0 auto; }
  .ds-how-timeline { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; }
  .ds-how-timeline::before { left: 80px; right: 80px; }
}

@media (max-width: 760px) {
  .ds-how-section { padding: 44px 16px 40px; }
  .ds-how-head { margin-bottom: 28px; }
  .ds-how-h2 { font-size: 40px; letter-spacing: -1px; }
  .ds-how-sub { font-size: 15px; }
  .ds-how-grid { grid-template-columns: 1fr; gap: 14px; }
  .ds-how-card { border-radius: 24px; }
  .ds-how-bottom { gap: 14px; }
  .ds-how-art { max-width: 240px; }
  .ds-how-timeline { display: flex; gap: 12px; padding: 18px 16px 14px; border-radius: 28px; scroll-snap-type: x proximity; }
  .ds-how-timeline::before { display: none; }
  .ds-tl-item { min-width: 132px; scroll-snap-align: start; }
  .ds-tl-ic { width: 72px; height: 72px; }
  .ds-how-foot { font-size: 13px; padding: 14px 18px; }
}
/* ===== Покупка без сюрпризов ===== */
.ds-trust-section { width:100%; padding:56px 36px; }
.ds-trust-hero { align-items:start; display:grid; grid-template-columns:1fr 1.05fr; gap:40px; margin:0 auto; max-width:var(--ds-container); }
.ds-trust-badge { display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--ds-accent); background:var(--ds-accent-soft); padding:10px 18px; border-radius:999px; margin-bottom:22px; }
.ds-trust-h2 { font-size:54px; font-weight:800; letter-spacing:-1.5px; line-height:1.08; color:var(--ds-text); margin:0 0 20px; }
.ds-trust-h2 span { color:var(--ds-accent); }
.ds-trust-sub { font-size:17px; line-height:1.65; color:var(--ds-text-soft); max-width:520px; }

.ds-trust-visual { position:relative; display:flex; gap:16px; align-items:flex-start; justify-content:flex-end; min-height:360px; }
.ds-tv-shield { position:absolute; left:-10px; top:40px; width:180px; z-index:1; filter:drop-shadow(0 20px 40px rgba(74,92,255,.28)); }
.ds-tv-shield img { width:100%; }
.ds-tv-card { width:300px; background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); padding:20px; box-shadow:0 24px 60px rgba(26,29,46,.12); z-index:2; }
.ds-tvc-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.ds-tvc-head>span:first-child { font-size:20px; font-weight:800; color:var(--ds-text); }
.ds-tvc-tag { font-size:12px; font-weight:700; color:var(--ds-accent); background:var(--ds-accent-soft); padding:5px 10px; border-radius:999px; }
.ds-tvc-item { display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--ds-border); margin-bottom:14px; }
.ds-tvc-cover { width:52px; height:52px; border-radius:10px; background:var(--ds-surface-2); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0; }
.ds-tvc-name { display:flex; flex-direction:column; gap:2px; flex:1; }
.ds-tvc-name b { font-size:15px; color:var(--ds-text); }
.ds-tvc-name span { font-size:13px; color:var(--ds-text-soft); }
.ds-tvc-price { font-size:15px; font-weight:800; color:var(--ds-text); }
.ds-tvc-row { display:flex; justify-content:space-between; font-size:14px; padding:9px 0; color:var(--ds-text-soft); border-bottom:1px solid var(--ds-border); }
.ds-tvc-row b { color:var(--ds-text); font-weight:600; }
.ds-tvc-total { display:flex; justify-content:space-between; align-items:center; margin:12px 0; }
.ds-tvc-total span { font-size:15px; font-weight:700; color:var(--ds-text); }
.ds-tvc-total b { font-size:22px; font-weight:800; color:var(--ds-text); }
.ds-tvc-note { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ds-text-soft); background:var(--ds-surface-2); padding:12px 14px; border-radius:var(--ds-radius-sm); }
.ds-tv-chat { width:230px; align-self:flex-end; background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); padding:16px; box-shadow:0 24px 60px rgba(26,29,46,.10); z-index:2; }
.ds-tvch-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ds-tvch-head b { font-size:14px; color:var(--ds-text); }
.ds-tvch-head span { font-size:11px; color:#22c55e; font-weight:600; }
.ds-tvch-msg { font-size:12.5px; line-height:1.4; padding:9px 12px; border-radius:12px; margin-bottom:8px; max-width:88%; }
.ds-tvch-msg.in { background:var(--ds-surface-2); color:var(--ds-text); }
.ds-tvch-msg.out { background:var(--ds-accent); color:#fff; margin-left:auto; }
.ds-tvch-typing { font-size:12px; color:var(--ds-text-muted); padding-top:4px; }

.ds-trust-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; max-width:var(--ds-container); margin:0 auto 24px; }
.ds-trust-card { background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); padding:24px 20px; box-shadow:var(--ds-shadow-sm); display:flex; flex-direction:column; }
.ds-trust-ic { width:64px; height:64px; border-radius:16px; background:var(--ds-accent-soft); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.ds-trust-ic img { width:40px; height:40px; object-fit:contain; }
.ds-trust-card h3 { font-size:16px; font-weight:800; color:var(--ds-text); margin:0 0 8px; line-height:1.3; }
.ds-trust-card p { font-size:13px; line-height:1.5; color:var(--ds-text-soft); margin:0 0 16px; flex:1; }
.ds-trust-chip { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:600; color:var(--ds-text); background:var(--ds-surface-2); padding:10px 14px; border-radius:999px; }
.ds-trust-chip span { color:var(--ds-accent); font-weight:800; }
.ds-trust-chip.green { color:#22c55e; justify-content:flex-start; }

.ds-trust-foot { display:flex; justify-content:space-between; align-items:center; gap:20px; background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); padding:20px 32px; box-shadow:var(--ds-shadow-sm); max-width:var(--ds-container); margin:0 auto; }
.ds-trust-foot-l { font-size:14px; color:var(--ds-text-soft); }
.ds-trust-foot-l b { color:var(--ds-text); }
.ds-trust-foot-r { font-size:15px; font-weight:700; color:var(--ds-accent); white-space:nowrap; }

@media (max-width:1100px){ .ds-trust-hero{ grid-template-columns:1fr; } .ds-trust-grid{ grid-template-columns:repeat(2,1fr); } .ds-trust-visual{ justify-content:center; } }
@media (max-width:600px){ .ds-trust-grid{ grid-template-columns:1fr; } .ds-trust-section{ padding:40px 16px; } .ds-trust-h2{ font-size:34px; } .ds-tv-chat{ display:none; } .ds-trust-foot{ flex-direction:column; text-align:center; } }

/* ореол-свечение за щитом */
.ds-tv-shield::before { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:330px; height:330px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(139,124,255,.30) 0%, rgba(74,92,255,.14) 45%, transparent 70%); }
/* декор-кристаллы и наушники */
.ds-tv-gem { position:absolute; z-index:1; pointer-events:none; width:80px; height:auto;
  filter:drop-shadow(0 10px 22px rgba(74,92,255,.22)); }
.ds-tv-gem.g1 { width:74px; top:20px;  left:-24px; }
.ds-tv-gem.g2 { width:88px; bottom:36px; left:-34px; }
.ds-tv-gem.g3 { width:78px; top:56px;  left:44%; }
.ds-tv-gem.g4 { width:92px; bottom:8px; right:-16px; }
@media (max-width:1100px){ .ds-tv-gem{ display:none; } }
.ds-trust-visual { position:relative; }
.ds-trust-visual img { width:100%; height:auto; display:block; }
.ds-flag-ru { display:inline-block; width:20px; height:14px; border-radius:2px; overflow:hidden; vertical-align:-2px; margin-right:2px;
  background:linear-gradient(to bottom,#fff 0 33.3%,#0039a6 33.3% 66.6%,#d52b1e 66.6% 100%); box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.ds-chip-link { text-decoration:none; transition:background .15s; }
.ds-chip-link:hover { background:var(--ds-accent-soft); }
/* --- trust overrides --- */
.ds-trust-hero { align-items:start !important; margin-bottom:12px !important; }
.ds-trust-left { padding-top:0 !important; }
.ds-trust-h2 { font-size:54px !important; }
.ds-trust-sub { font-size:17px !important; }
.ds-trust-badge { font-size:15px !important; }
.ds-trust-chip { justify-content:flex-start !important; }
.ds-trust-chip span:last-child { margin-left:auto; }
/* --- trust text bigger v2 --- */
.ds-trust-hero { align-items:stretch !important; margin-bottom:8px !important; }
.ds-trust-left { display:flex; flex-direction:column; justify-content:center; padding-top:0 !important; }
.ds-trust-h2 { font-size:64px !important; line-height:1.05 !important; letter-spacing:-2px !important; margin:0 0 24px !important; }
.ds-trust-sub { font-size:20px !important; line-height:1.6 !important; max-width:600px !important; }
.ds-trust-badge { font-size:16px !important; padding:12px 22px !important; margin-bottom:28px !important; }
/* --- trust align top v3 --- */
.ds-trust-left { justify-content:flex-start !important; padding-top:6px !important; }
/* --- badge fit + footer ref --- */
.ds-trust-badge { align-self:flex-start !important; width:auto !important; }
.ds-trust-foot-l { display:flex; align-items:center; gap:14px; }
.ds-trust-foot-l b { color:var(--ds-text); }
.ds-trust-foot-l .sep { color:var(--ds-border); }
/* белый фон секции — картинка сливается, рамки нет */
.ds-trust-section { background:#ffffff; }
/* плавный фон секции — без резкой границы */
.ds-trust-section { background:linear-gradient(180deg, transparent 0%, #ffffff 8%, #ffffff 92%, transparent 100%) !important; }
/* ===== Почему покупать удобно ===== */
.ds-why-section { width:100%; padding:60px 36px; text-align:center; }
.ds-why-badge { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--ds-accent); background:var(--ds-accent-soft); padding:10px 20px; border-radius:999px; margin-bottom:22px; }
.ds-why-h2 { font-size:46px; font-weight:800; letter-spacing:-1.5px; color:var(--ds-text); margin:0 0 16px; }
.ds-why-h2 span { color:var(--ds-accent); }
.ds-why-sub { font-size:17px; line-height:1.6; color:var(--ds-text-soft); max-width:560px; margin:0 auto 44px; }
.ds-why-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; max-width:var(--ds-container); margin:0 auto; }
.ds-why-card { background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); padding:28px 22px; box-shadow:var(--ds-shadow-sm); text-align:center; }
.ds-why-ic { width:130px; height:130px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; }
.ds-why-ic img { width:100%; height:100%; object-fit:contain; }
.ds-why-card h3 { font-size:18px; font-weight:800; color:var(--ds-text); margin:0 0 10px; }
.ds-why-card p { font-size:14px; line-height:1.55; color:var(--ds-text-soft); margin:0; }
@media (max-width:1100px){ .ds-why-grid{ grid-template-columns:repeat(2,1fr); } .ds-why-h2{ font-size:34px; } }
@media (max-width:600px){ .ds-why-grid{ grid-template-columns:1fr; } .ds-why-section{ padding:44px 16px; } }
/* ===== CTA: не нашли игру ===== */
.ds-nf-section { width:100%; padding:32px 36px; }
.ds-nf-card { background:linear-gradient(135deg,#f4f5fb,#eef0fa); border:1px solid var(--ds-border); border-radius:28px; padding:44px 48px; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center; box-shadow:var(--ds-shadow-sm); overflow:hidden; }
.ds-nf-badge { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--ds-accent); background:var(--ds-surface); padding:9px 16px; border-radius:999px; box-shadow:var(--ds-shadow-sm); margin-bottom:20px; }
.ds-nf-h2 { font-size:44px; font-weight:800; letter-spacing:-1.5px; color:var(--ds-text); margin:0 0 16px; }
.ds-nf-h2 span { color:var(--ds-accent); }
.ds-nf-sub { font-size:16px; line-height:1.65; color:var(--ds-text-soft); max-width:480px; margin:0 0 28px; }
.ds-nf-btns { display:flex; gap:14px; flex-wrap:wrap; }
.ds-nf-btn { display:inline-flex; align-items:center; gap:8px; padding:15px 26px; border-radius:14px; font-weight:700; font-size:15px; text-decoration:none; }
.ds-nf-btn.primary { background:linear-gradient(135deg,#4a5cff,#7b3ff5); color:#fff; }
.ds-nf-btn.ghost { background:var(--ds-surface); color:var(--ds-accent); border:1.5px solid var(--ds-accent); }
.ds-nf-btn.primary:hover { filter:brightness(1.05); }
.ds-nf-btn.ghost:hover { background:var(--ds-accent-soft); }
.ds-nf-art { display:flex; align-items:center; justify-content:center; }
.ds-nf-art img { width:100%; max-width:560px; height:auto; filter:drop-shadow(0 24px 50px rgba(74,92,255,.2)); }
@media (max-width:1000px){ .ds-nf-card{ grid-template-columns:1fr; text-align:center; } .ds-nf-art{ order:-1; } .ds-nf-sub{ margin-left:auto; margin-right:auto; } .ds-nf-btns{ justify-content:center; } .ds-nf-h2{ font-size:32px; } }
/* nf overrides */
.ds-nf-card { grid-template-columns:1.1fr 1.15fr !important; align-items:center !important; padding:40px 44px !important; }
.ds-nf-left { align-self:center; }
.ds-nf-h2 { font-size:48px !important; }
.ds-nf-sub { font-size:17px !important; max-width:520px !important; }
.ds-nf-art img { max-width:680px !important; }
/* nf fix v2: текст к верху, меньше пустоты, крупнее */
.ds-nf-card { grid-template-columns:1fr 1.25fr !important; gap:10px !important; align-items:center !important; padding:38px 44px !important; }
.ds-nf-left { align-self:center !important; }
.ds-nf-h2 { font-size:50px !important; margin-top:0 !important; }
.ds-nf-sub { font-size:17px !important; max-width:540px !important; }
.ds-nf-art { justify-content:flex-end !important; }
.ds-nf-art img { max-width:720px !important; }
/* nf fix v3: текст к верху, картинка целиком */
.ds-nf-card { overflow:visible !important; align-items:start !important; padding:44px 44px !important; }
.ds-nf-left { align-self:start !important; padding-top:4px !important; }
.ds-nf-art { align-items:center !important; }
.ds-nf-art img { max-width:640px !important; }
/* nf FINAL: карточка-контейнер, арт целиком, без пустоты */
.ds-nf-section { padding:32px 36px !important; overflow:visible !important; }
.ds-nf-card {
  background:linear-gradient(135deg,#f4f5fb,#eef0fa) !important;
  border:1px solid var(--ds-border) !important; border-radius:28px !important;
  padding:0 0 0 48px !important; overflow:hidden !important;
  display:grid !important; grid-template-columns:1fr 1.15fr !important; gap:0 !important;
  align-items:center !important; min-height:340px !important;
}
.ds-nf-left { align-self:center !important; padding:40px 0 !important; }
.ds-nf-h2 { font-size:46px !important; }
.ds-nf-sub { font-size:16px !important; max-width:480px !important; }
.ds-nf-art { align-self:stretch !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; padding:0 !important; }
.ds-nf-art img { width:100% !important; max-width:100% !important; height:auto !important; max-height:400px !important; object-fit:contain !important; object-position:right center !important; filter:drop-shadow(0 20px 40px rgba(74,92,255,.2)) !important; }
/* nf FINAL v5: арт целиком, ничего не режется */
.ds-nf-section { overflow:visible !important; padding:60px 36px 32px !important; }
.ds-nf-card { overflow:visible !important; min-height:0 !important; align-items:center !important; padding:36px 0 36px 48px !important; grid-template-columns:1fr 1.1fr !important; }
.ds-nf-left { align-self:center !important; padding:0 !important; }
.ds-nf-art { align-self:center !important; overflow:visible !important; }
.ds-nf-art img { max-height:none !important; max-width:640px !important; width:100% !important; object-fit:contain !important; margin-top:-40px !important; }
/* nf FINAL v6: арт заведомо влезает, без обрезки */
.ds-nf-card { overflow:visible !important; align-items:center !important; padding:44px 44px !important; min-height:0 !important; grid-template-columns:1fr 1fr !important; gap:20px !important; }
.ds-nf-art { align-self:center !important; }
.ds-nf-art img { margin-top:0 !important; max-width:520px !important; max-height:360px !important; width:auto !important; height:auto !important; object-fit:contain !important; }
/* nf FINAL v7 */
.ds-nf-card {
  background:linear-gradient(135deg,#f4f5fb,#eef0fa) !important;
  border:1px solid var(--ds-border) !important; border-radius:28px !important;
  box-shadow:var(--ds-shadow-sm) !important; overflow:visible !important;
  display:grid !important; grid-template-columns:1fr 1.05fr !important; gap:12px !important;
  align-items:center !important; padding:36px 48px !important;
}
.ds-nf-left { align-self:center !important; padding:0 !important; }
.ds-nf-h2 { font-size:46px !important; }
.ds-nf-sub { font-size:16px !important; max-width:500px !important; }
.ds-nf-art { align-self:center !important; justify-content:flex-end !important; }
.ds-nf-art img { max-width:600px !important; max-height:400px !important; width:100% !important; height:auto !important; object-fit:contain !important; object-position:right center !important; margin:0 !important; }
/* nf FINAL v8: больше текст, арт левее, меньше пустоты */
.ds-nf-card { grid-template-columns:1.15fr 1fr !important; gap:8px !important; padding:40px 48px !important; }
.ds-nf-h2 { font-size:52px !important; }
.ds-nf-sub { font-size:18px !important; max-width:560px !important; line-height:1.6 !important; }
.ds-nf-art { justify-content:center !important; }
.ds-nf-art img { max-width:620px !important; object-position:center !important; }
/* nf FINAL v9: арт вправо, текст к верху и крупнее */
.ds-nf-card { grid-template-columns:1fr 1.05fr !important; gap:12px !important; align-items:start !important; padding:44px 48px !important; }
.ds-nf-left { align-self:start !important; padding-top:6px !important; }
.ds-nf-h2 { font-size:54px !important; }
.ds-nf-sub { font-size:18px !important; max-width:540px !important; line-height:1.6 !important; }
.ds-nf-art { align-self:start !important; justify-content:flex-end !important; }
.ds-nf-art img { max-width:620px !important; object-position:right top !important; }

/* Единый стандарт ширины контента — 1750px, как у остальных секций сайта */
.ds-nf-card { max-width:var(--ds-container) !important; margin:0 auto !important; }

/* ===== FAQ (ds-faq) — как на референсе ===== */
.ds-faq-section { width:100%; max-width:100%; padding:56px 36px; }
.ds-faq-wrap { background:linear-gradient(135deg,#f6f6fc,#eef0fa); border:1px solid var(--ds-border); border-radius:32px; padding:48px; display:grid; grid-template-columns:0.82fr 1.18fr; gap:40px; align-items:start; box-shadow:var(--ds-shadow-sm); }
.ds-faq-left { display:flex; flex-direction:column; }
.ds-faq-badge { display:inline-flex; align-items:center; gap:9px; align-self:flex-start; background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:999px; padding:8px 16px 8px 9px; font-size:14px; font-weight:600; color:var(--ds-text); box-shadow:var(--ds-shadow-sm); margin-bottom:22px; }
.ds-faq-badge-ic { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:var(--ds-accent-soft); }
.ds-faq-badge-ic svg { width:18px; height:18px; }
.ds-faq-title { font-size:52px; font-weight:800; line-height:1.02; letter-spacing:-1.5px; color:var(--ds-text); margin:0 0 16px; }
.ds-faq-sub { font-size:16px; line-height:1.6; color:var(--ds-text-soft); max-width:360px; margin:0; }
.ds-faq-art { margin-top:18px; overflow:visible; }
.ds-faq-art img { width:100%; max-width:460px; height:auto; object-fit:contain; display:block; }
.ds-faq-list { display:flex; flex-direction:column; gap:14px; }
.ds-faq-item { background:var(--ds-surface); border:1px solid var(--ds-border); border-radius:20px; overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.ds-faq-item.open { border-color:rgba(74,92,255,0.28); box-shadow:var(--ds-shadow); }
.ds-faq-q { width:100%; background:none; border:0; cursor:pointer; text-align:left; display:flex; align-items:center; gap:16px; padding:22px 24px; font-family:inherit; }
.ds-faq-ic { flex:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--ds-accent-soft); color:var(--ds-accent); }
.ds-faq-ic svg { width:22px; height:22px; }
.ds-faq-qt { flex:1; font-size:18px; font-weight:700; color:var(--ds-text); line-height:1.3; }
.ds-faq-chev { flex:none; width:20px; height:20px; color:var(--ds-text-muted); transition:transform .25s; }
.ds-faq-item.open .ds-faq-chev { transform:rotate(180deg); color:var(--ds-accent); }
.ds-faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.ds-faq-item.open .ds-faq-a { max-height:480px; }
.ds-faq-a-in { padding:0 24px 24px 84px; }
.ds-faq-a-in p { margin:0; font-size:15.5px; line-height:1.65; color:var(--ds-text-soft); }
.ds-faq-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ds-faq-tags span { background:var(--ds-accent-soft); color:var(--ds-accent); font-size:13px; font-weight:600; padding:6px 12px; border-radius:999px; }
.ds-faq-more { margin-top:4px; text-align:right; }
.ds-faq-more a { font-size:14px; font-weight:600; color:var(--ds-accent); text-decoration:none; }
.ds-faq-more a:hover { text-decoration:underline; }
@media (max-width:900px){
  .ds-faq-section { padding:36px 16px; }
  .ds-faq-wrap { grid-template-columns:1fr; gap:28px; padding:32px 22px; border-radius:24px; }
  .ds-faq-title { font-size:38px; }
  .ds-faq-sub { max-width:none; }
  .ds-faq-art { max-width:320px; margin:8px auto 0; }
  .ds-faq-a-in { padding-left:24px; }
}

.ds-faq-art img { mix-blend-mode: multiply; }
/* FAQ v2 — крупнее текст и арт, без пустоты */
.ds-faq-wrap { max-width:var(--ds-container) !important; margin:0 auto !important; grid-template-columns:0.88fr 1.12fr !important; gap:44px !important; align-items:center !important; padding:52px !important; }
.ds-faq-left { align-self:center !important; }
.ds-faq-title { font-size:60px !important; letter-spacing:-2px !important; }
.ds-faq-sub { font-size:17px !important; max-width:410px !important; }
.ds-faq-art { margin-top:26px !important; }
.ds-faq-art img { width:100% !important; max-width:100% !important; }
/* FAQ v3 (было "на всю ширину" — отменяло единый стандарт 1750px, вернули) */
.ds-faq-wrap { max-width:var(--ds-container) !important; margin:0 auto !important; grid-template-columns:0.9fr 1.1fr !important; gap:48px !important; }
/* FAQ v4 — вопросы к верху, арт меньше, без пустоты */
.ds-faq-wrap { align-items:start !important; grid-template-columns:0.78fr 1.22fr !important; gap:44px !important; padding:44px 48px !important; }
.ds-faq-left { align-self:start !important; }
.ds-faq-art { margin-top:22px !important; }
.ds-faq-art img { max-width:380px !important; margin:0 !important; }
/* FAQ v5 — арт по центру левой колонки, ниже от текста */
.ds-faq-art { margin-top:48px !important; display:flex !important; justify-content:center !important; }
.ds-faq-art img { max-width:400px !important; margin:0 auto !important; }
/* убираем плашку "Недавно смотрели" */
#recentlyViewed { display:none !important; }

/* ===== FOOTER (ds-ftr) ===== */
.ds-ftr { background:linear-gradient(180deg,#14172a,#1a1d33); color:#c7cbe0; margin-top:64px; }
.ds-ftr-top { max-width:var(--ds-container); margin:0 auto; padding:56px 36px 42px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr; gap:36px; }
.ds-ftr-brand { display:flex; flex-direction:column; }
.ds-ftr-logo { font-size:30px; font-weight:800; letter-spacing:-.5px; color:#fff; }
.ds-ftr-logo span { background:var(--ds-accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ds-ftr-tag { margin:14px 0 22px; font-size:14px; line-height:1.6; color:#8b91a7; max-width:240px; }
.ds-ftr-soc { display:flex; gap:12px; }
.ds-ftr-soc a { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.06); color:#c7cbe0; text-decoration:none; transition:background .2s, transform .2s, color .2s; }
.ds-ftr-soc a:hover { background:var(--ds-accent); color:#fff; transform:translateY(-2px); }
.ds-ftr-soc svg { width:20px; height:20px; }
.ds-ftr-col h4 { font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#fff; margin:0 0 18px; display:flex; align-items:center; gap:8px; }
.ds-ftr-col h4::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ds-accent-grad); }
.ds-ftr-col a.ds-ftr-link { display:block; font-size:14.5px; color:#9aa0b8; text-decoration:none; margin-bottom:12px; transition:color .2s, padding-left .2s; }
.ds-ftr-col a.ds-ftr-link:hover { color:#fff; padding-left:4px; }
.ds-ftr-ct { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.ds-ftr-ct-ic { flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(74,92,255,.16); color:#8ea2ff; }
.ds-ftr-ct-ic svg { width:18px; height:18px; }
.ds-ftr-ct-tx { font-size:13px; color:#8b91a7; line-height:1.4; }
.ds-ftr-ct-tx b { display:block; color:#fff; font-weight:600; font-size:13px; margin-bottom:2px; }
.ds-ftr-ct-tx a { color:#8ea2ff; text-decoration:none; }
.ds-ftr-ct-tx a:hover { text-decoration:underline; }
.ds-ftr-bottom { border-top:1px solid rgba(255,255,255,.08); }
.ds-ftr-bottom-in { max-width:var(--ds-container); margin:0 auto; padding:22px 36px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.ds-ftr-copy { font-size:13px; color:#8b91a7; }
.ds-ftr-pay { display:flex; gap:8px; }
.ds-ftr-pay span { font-size:11px; font-weight:700; color:#c7cbe0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:6px 12px; }
.ds-ftr-legal { display:flex; gap:20px; flex-wrap:wrap; }
.ds-ftr-legal a { font-size:13px; color:#8b91a7; text-decoration:none; }
.ds-ftr-legal a:hover { color:#fff; }
@media (max-width:1000px){ .ds-ftr-top { grid-template-columns:1fr 1fr; gap:28px; } }
@media (max-width:560px){ .ds-ftr-top { grid-template-columns:1fr; } .ds-ftr-bottom-in { flex-direction:column; align-items:flex-start; } }
/* footer: ширина как у остальных секций (--ds-container) */
.ds-ftr-top { max-width:var(--ds-container) !important; margin-left:auto !important; margin-right:auto !important; }
.ds-ftr-bottom-in { max-width:var(--ds-container) !important; margin-left:auto !important; margin-right:auto !important; }
/* footer FINAL — обычные контакты, колонка прижата вправо */
.ds-ftr-top { grid-template-columns:1.3fr 1fr 1fr 1fr 1.05fr !important; gap:36px !important; }
.ds-ftr-contacts { align-items:flex-start !important; text-align:left !important; }
.ds-ftr-contacts h4 { flex-direction:row !important; justify-content:flex-start !important; }
.ds-ftr-contacts .ds-ftr-ct { flex-direction:row !important; text-align:left !important; justify-content:flex-start !important; }
.ds-ftr-contacts .ds-ftr-ct-tx { text-align:left !important; }
/* footer: равные колонки + контакты к правому краю */
.ds-ftr-top { grid-template-columns:repeat(5,1fr) !important; gap:32px !important; justify-items:start !important; }
.ds-ftr-brand { justify-self:start !important; }
.ds-ftr-contacts { justify-self:end !important; }
/* footer: выравниваем зазоры слева и справа */
.ds-ftr-top { grid-template-columns:1.55fr 1fr 1fr 1fr 1fr !important; gap:36px !important; }
.ds-ftr-contacts { justify-self:end !important; }
/* фикс: старый арт-набор больше не всплывает поверх секций */
.ds-art-card, .ds-art-steam, .ds-art-psplus, .ds-art-game { position: static !important; }
.ds-art-steam, .ds-art-psplus, .ds-art-game-main { display: none !important; }

/* ===== Homepage heading standard ===== */
:is(.ds-pop-title, .ds-cat-title, .ds-promo-title, .ds-how-h2, .ds-trust-h2, .ds-why-h2, .ds-nf-h2, .ds-faq-title) {
  font-size: 56px !important;
  line-height: 1.06 !important;
  letter-spacing: -1.6px !important;
  font-weight: 800 !important;
  margin: 0 0 16px !important;
  color: var(--ds-text) !important;
}

@media (max-width: 1100px) {
  :is(.ds-pop-title, .ds-cat-title, .ds-promo-title, .ds-how-h2, .ds-trust-h2, .ds-why-h2, .ds-nf-h2, .ds-faq-title) {
    font-size: 46px !important;
    line-height: 1.08 !important;
    letter-spacing: -1.2px !important;
  }
}

@media (max-width: 760px) {
  :is(.ds-pop-title, .ds-cat-title, .ds-promo-title, .ds-how-h2, .ds-trust-h2, .ds-why-h2, .ds-nf-h2, .ds-faq-title) {
    font-size: 36px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.9px !important;
  }
}
/* ===== Hero heading standard ===== */
h1.ds-hero-title {
  font-size: 56px !important;
  line-height: 1.08 !important;
  letter-spacing: -1.6px !important;
  max-width: 680px !important;
}

@media (max-width: 1100px) {
  h1.ds-hero-title {
    font-size: 46px !important;
    line-height: 1.1 !important;
    letter-spacing: -1.2px !important;
    max-width: 620px !important;
  }
}

@media (max-width: 760px) {
  h1.ds-hero-title {
    font-size: 36px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.9px !important;
    max-width: none !important;
  }
}


/* ==== инлайн-стили со страницы (page-specific overrides) ==== */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}
*, *::before, *::after {
    box-sizing: border-box;
}
img, video, iframe, svg {
    max-width: 100%;
}
@media (max-width: 768px) {
    .header-top {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    .section, div[style*="max-width:1400px"] {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    .neon-glow, .neon-g1, .neon-g2, .neon-g3 {
        display: none !important;
    }
    /* Промокоды - не обрезать */
    div[style*="padding:28px"] {
        padding: 16px !important;
    }
    div[style*="padding:24px"] {
        padding: 14px !important;
    }
    span[style*="font-size:20px"][style*="font-family:monospace"] {
        font-size: 16px !important;
        padding: 6px 12px !important;
    }
    span[style*="font-size:22px"][style*="font-family:monospace"] {
        font-size: 16px !important;
        padding: 6px 12px !important;
    }
    button[onclick*="clipboard"] {
        padding: 6px 12px !important;
        font-size:12px !important;
    }
    /* Промокоды и двухколоночные блоки — колонкой */
    div[style*="flex:1;min-width"] {
        flex: none !important;
        min-width: auto !important;
        width: 100% !important;
    }
    /* Баннеры навигация */
    .banners-nav {
        display: none !important;
    }
    /* Popup на мобиле */
    #welcomePopup > div {
        padding: 20px !important;
        margin: 10px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    #welcomePopup h1, #welcomePopup div[style*="font-size:22px"] {
        font-size: 18px !important;
    }
    #welcomePopup a, #welcomePopup button {
        font-size: 13px !important;
        padding: 12px !important;
    }
    .banners-wrapper {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    .banners-track-container {
        max-width: 100vw !important;
    }
}

:root {
            --bg-primary: #fafbfd;
            --bg-secondary: #ffffff;
            --bg-card: #161616;
            --bg-card-hover: #1c1c1c;
            --border: #222222;
            --border-hover: #333333;
            --accent: #00e5ff;
            --accent-dark: #00b8d4;
            --accent-glow: rgba(0, 229, 255, 0.15);
            --accent-glow-strong: rgba(0, 229, 255, 0.3);
            --text-primary: #ffffff;
            --text-secondary: #999999;
            --text-muted: #555555;
            --danger: #ff4757;
            --warning: #ffa502;
            --steam-blue: #1b2838;
            --ps-blue: #006FCD;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body { overflow-x: hidden;
            font-family: 'Outfit', sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            /*overflow-x: hidden;*/
        }

        /* ==================== HEADER ==================== */
        .header::after {
            display: none;
        }
        .header {
            position: sticky;
            top: 0;
            z-index: 100;
            background: transparent; margin-bottom: -1px; padding-bottom: 1px;
            backdrop-filter: none; box-shadow: none;
            border-bottom: none;
        }

        .header-top {
            max-width: 1400px;
            margin: 0 auto;
            padding: 12px 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .logo {
            font-size: 28px;
            font-weight: 900;
            letter-spacing: -1px;
            text-decoration: none;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 3px;
            flex-shrink: 0;
        }

        .logo span {
            color: var(--accent);
        }

        .header-nav {
            display: flex;
            gap: 6px;
        }

        .header-nav a {
            color: var(--text-secondary);
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s;
        }

        .header-nav a:hover {
            color: var(--text-primary);
            background: var(--bg-card);
        }

        .header-nav a.active {
            color: var(--accent);
            background: var(--accent-glow);
        }

        .search-bar {
            flex: 1;
            max-width: 480px;
            position: relative;
        }

        .search-bar input {
            width: 100%;
            padding: 10px 16px 10px 42px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-primary);
            font-size: 14px;
            font-family: 'Outfit', sans-serif;
            transition: all 0.3s;
            outline: none;
        }

        .search-bar input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-glow);
        }

        .search-bar input::placeholder { color: var(--text-muted); }

        .search-bar svg {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            width: 18px;
            height: 18px;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .cart-btn {
            position: relative;
            width: 42px;
            height: 42px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--bg-secondary);
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .cart-btn:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .cart-btn .badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: var(--accent);
            color: #000;
            font-size:12px;
            font-weight: 700;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .auth-btn {
            padding: 10px 22px;
            border-radius: 10px;
            border: none;
            background: var(--accent);
            color: #000;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Outfit', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
        }

        .auth-btn:hover {
            background: var(--accent-dark);
            transform: translateY(-1px);
        }

        /* ==================== HERO BANNERS ==================== */
        .hero-section { overflow-x: clip; overflow-y: visible; padding-top: 0; margin-top: 0; background: transparent;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 30px;
        }
        .banners-wrapper { position: relative; overflow: visible; padding: 0 0 30px; }
        .banners-track-container { overflow-x: auto; overflow-y: visible; scrollbar-width: none; border-radius: 20px; scroll-behavior: smooth; }

        .banners-track { padding-top: 10px; padding-bottom: 10px;
            display: flex;
            gap: 18px;
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            cursor: grab;
        }

        .banners-track:active { cursor: grabbing; }

        .banner-card {
            min-width: calc(50% - 9px);
            height: 360px;
            border-radius: 22px;
            padding: 38px 44px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            flex-shrink: 0;
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
        }

        .banner-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.5);
        }

        .banner-card.steam {
            background: linear-gradient(135deg, #1b2838 0%, #0d1821 50%, #1a3a2a 100%);
            border: 1px solid #2a475e;
        }

        .banner-card.ps {
            background: linear-gradient(135deg, #003087 0%, #001a4d 50%, #002266 100%);
            border: 1px solid #0050c8;
        }

        .banner-card.promo {
            background: linear-gradient(135deg, #0d1f0d 0%, #0a0a0a 50%, #1a2a1a 100%);
            border: 1px solid var(--accent);
        }

        .banner-card.fire {
            background: linear-gradient(135deg, #3d0c02 0%, #1a0500 50%, #4d1000 100%);
            border: 1px solid #ff4757;
        }

        .banner-card.purple {
            background: linear-gradient(135deg, #2d1b69 0%, #1a0d3d 50%, #3d1b69 100%);
            border: 1px solid #7c3aed;
        }

        .banner-card.gift {
            background: linear-gradient(135deg, #1a3a1a 0%, #0d1f0d 50%, #0a2a0a 100%);
            border: 1px solid #2ecc71;
        }

        .banner-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 16px;
            border-radius: 9px;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            width: fit-content;
        }

        .steam .banner-badge { background: rgba(0,230,118,0.2); color: var(--accent); }
        .ps .banner-badge { background: rgba(255,255,255,0.15); color: #fff; }
        .promo .banner-badge { background: var(--accent); color: #000; }
        .fire .banner-badge { background: rgba(255,71,87,0.25); color: #ff4757; }
        .purple .banner-badge { background: rgba(124,58,237,0.3); color: #a78bfa; }
        .gift .banner-badge { background: rgba(46,204,113,0.2); color: #2ecc71; }

        .banner-content h3 {
            font-size: 34px;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 12px;
        }

        .banner-content p {
            font-size: 17px;
            color: rgba(255,255,255,0.6);
            line-height: 1.4;
        }

        .banner-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .banner-price {
            font-size: 34px;
            font-weight: 800;
            color: var(--accent);
        }

        .banner-price .from {
            font-size: 15px;
            font-weight: 500;
            color: var(--text-secondary);
        }

        .banner-action {
            padding: 14px 30px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            border: none;
            cursor: pointer;
            font-family: 'Outfit', sans-serif;
            transition: all 0.2s;
        }

        .steam .banner-action { background: var(--accent); color: #000; }
        .ps .banner-action { background: #fff; color: #003087; }
        .promo .banner-action { background: var(--accent); color: #000; }
        .fire .banner-action { background: #ff4757; color: #fff; }
        .purple .banner-action { background: #7c3aed; color: #fff; }
        .gift .banner-action { background: #2ecc71; color: #000; }

        .banner-glow {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.15;
            pointer-events: none;
        }

        .steam .banner-glow { background: var(--accent); top: -50px; right: -30px; }
        .ps .banner-glow { background: #006FCD; bottom: -60px; right: -20px; }
        .promo .banner-glow { background: var(--accent); top: -40px; right: -40px; }
        .fire .banner-glow { background: #ff4757; top: -50px; right: -30px; }
        .purple .banner-glow { background: #7c3aed; bottom: -50px; right: -30px; }
        .gift .banner-glow { background: #2ecc71; top: -40px; right: -20px; }

        .banners-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.4); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s; z-index:5; color:#fff; font-size:16px; }
        .banners-nav:hover { background:rgba(168,85,247,.3); border-color:rgba(168,85,247,.5); box-shadow:0 0 20px rgba(168,85,247,.3); transform:translateY(-50%) scale(1.1); }
        .banners-nav.left { left:-22px; }
        .banners-nav.right { right:-22px; }
        .banners-progress { position:relative; margin-top:10px; margin-bottom:8px; left:0; right:0; height:10px; background:rgba(255,255,255,.05); z-index:5; border-radius:5px; overflow:visible; }
        .banners-progress-fill { height:100%; width:0%; background:linear-gradient(90deg,#7c3aed,#a78bfa); border-radius:5px; transition:none; position:relative; box-shadow:0 0 10px rgba(124,58,237,.3); }
        .banners-progress-fill .gp-icon { position:absolute; right:-16px; top:50%; transform:translateY(-50%); font-size:28px; animation:gpBounce .6s ease-in-out infinite; filter:drop-shadow(0 0 10px rgba(124,58,237,.6)); }
        @keyframes gpBounce { 0%,100%{transform:translateY(-50%) translateY(0)} 50%{transform:translateY(-50%) translateY(-5px)} }
























        /* ==================== STEAM TOP-UP ==================== */
        .section {
            max-width: 1400px;
            margin: 40px auto;
            padding: 0 30px;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .section-title {
            font-size: 22px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .section-title .icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .section-link {
            color: var(--accent);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 4px;
            transition: opacity 0.2s;
        }

        .section-link:hover { opacity: 0.8; }

        .steam-topup {
            background: linear-gradient(135deg, #1b2838 0%, #0f1923 100%);
            border: 1px solid #2a475e;
            border-radius: 16px;
            overflow: hidden;
        }

        .steam-topup-inner {
            padding: 32px 36px;
        }

        .steam-topup-inner h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 16px;
        }

        .steam-fields-row {
            display: flex;
            gap: 20px;
            margin-bottom: 4px;
        }

        .steam-fields-row .steam-field {
            flex: 1;
        }

        .steam-bottom-row {
            display: flex;
            gap: 24px;
            align-items: flex-end;
        }

        .steam-bottom-row .steam-total {
            flex: 1;
            margin-bottom: 0;
        }

        .steam-bottom-row .steam-pay-btn {
            width: auto;
            padding: 16px 48px;
            white-space: nowrap;
            align-self: flex-end;
        }

        .steam-topup-inner h3 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 16px;
        }

        .steam-info-box {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            padding: 14px 18px;
            background: rgba(0, 230, 118, 0.06);
            border: 1px solid rgba(0, 230, 118, 0.15);
            border-radius: 10px;
            margin-bottom: 24px;
            font-size: 13px;
            line-height: 1.5;
            color: var(--text-secondary);
        }

        .steam-info-box svg {
            flex-shrink: 0;
            color: var(--accent);
            margin-top: 2px;
        }

        .steam-info-box strong {
            color: var(--text-primary);
        }

        .steam-field {
            margin-bottom: 20px;
        }

        .steam-field label {
            display: block;
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .steam-input-wrap {
            position: relative;
        }

        .steam-input-wrap input,
        .steam-amount-input-wrap input {
            width: 100%;
            padding: 14px 16px;
            border-radius: 10px;
            border: 1px solid #2a475e;
            background: rgba(0,0,0,0.3);
            color: var(--text-primary);
            font-size: 15px;
            font-family: 'Outfit', sans-serif;
            outline: none;
            transition: border-color 0.2s;
        }

        .steam-input-wrap input:focus,
        .steam-amount-input-wrap input:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-glow);
        }

        .steam-input-wrap input::placeholder,
        .steam-amount-input-wrap input::placeholder {
            color: var(--text-muted);
        }

        .steam-hint {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--accent);
            font-size: 13px;
            text-decoration: none;
        }

        .steam-warning {
            margin-top: 8px;
            font-size: 12px;
            color: var(--warning);
            line-height: 1.4;
        }

        .steam-amount-input-wrap {
            position: relative;
        }

        .steam-currency {
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 16px;
            font-weight: 600;
        }

        .steam-quick-amounts {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 24px;
        }

        .steam-quick {
            padding: 8px 18px;
            border-radius: 8px;
            border: 1px solid #2a475e;
            background: rgba(255,255,255,0.04);
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            font-family: 'Outfit', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
        }

        .steam-quick:hover,
        .steam-quick.active {
            border-color: var(--accent);
            background: var(--accent-glow);
            color: var(--accent);
        }

        .steam-total {
            background: rgba(0,0,0,0.2);
            border-radius: 10px;
            padding: 16px 20px;
            margin-bottom: 20px;
        }

        .steam-total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 0;
            font-size: 14px;
            color: var(--text-secondary);
        }

        .steam-total-row.total {
            border-top: 1px solid #2a475e;
            margin-top: 8px;
            padding-top: 12px;
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .steam-pay-btn {
            width: 100%;
            padding: 16px;
            border-radius: 12px;
            border: none;
            background: var(--accent);
            color: #000;
            font-size: 17px;
            font-weight: 700;
            font-family: 'Outfit', sans-serif;
            cursor: pointer;
            transition: all 0.2s;
        }

        .steam-pay-btn:hover {
            background: var(--accent-dark);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px var(--accent-glow);
        }

        /* ==================== PRODUCTS GRID ==================== */
        .products-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 16px;
        }

        .product-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            overflow: hidden;
            transition: all 0.3s;
            cursor: pointer;
        }

        .product-card:hover {
            border-color: var(--border-hover);
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.4);
        }

        .product-img {
            width: 100%;
            height: 160px;
            background: var(--bg-secondary);
            position: relative;
            overflow: hidden;
        }

        .product-img .placeholder-img {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        }

        .product-discount {
            position: absolute;
            top: 10px;
            left: 10px;
            background: var(--danger);
            color: #fff;
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
        }

        .product-tag {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--accent);
            color: #000;
            padding: 3px 8px;
            border-radius: 6px;
            font-size:12px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .product-info {
            padding: 14px 16px 16px;
        }

        .product-category {
            font-size: 12px;
            color: var(--text-muted);
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .product-name {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 10px;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .product-price {
            display: flex;
            flex-direction: column;
        }

        .product-price .old {
            font-size: 12px;
            color: var(--text-muted);
            text-decoration: line-through;
        }

        .product-price .current {
            font-size: 18px;
            font-weight: 700;
            color: var(--accent);
        }

        .product-buy {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            border: 1px solid var(--accent);
            background: transparent;
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }

        .product-buy:hover {
            background: var(--accent);
            color: #000;
        }

        /* ==================== HOW IT WORKS ==================== */
        .how-it-works {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }

        .how-step {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 24px;
            text-align: center;
            transition: all 0.3s;
        }

        .how-step:hover {
            border-color: var(--accent);
        }

        .how-step-num {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: var(--accent-glow);
            color: var(--accent);
            font-size: 20px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            font-family: 'JetBrains Mono', monospace;
        }

        .how-step h4 {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .how-step p {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        /* ==================== ADVANTAGES ==================== */
        .advantages {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }

        .advantage {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 28px;
            transition: all 0.3s;
        }

        .advantage:hover {
            border-color: var(--accent);
        }

        .advantage-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            background: var(--accent-glow);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 16px;
        }

        .advantage h4 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .advantage p {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.6;
        }

        /* ==================== PROMO ==================== */
        .promo-banner {
            background: linear-gradient(135deg, var(--bg-card) 0%, #0d1f0d 100%);
            border: 1px solid var(--accent);
            border-radius: 16px;
            padding: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }

        .promo-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: var(--accent-glow);
            filter: blur(80px);
        }

        .promo-content {
            position: relative;
            z-index: 1;
        }

        .promo-content h3 {
            font-size: 26px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .promo-content p {
            color: var(--text-secondary);
            font-size: 15px;
            margin-bottom: 20px;
        }

        .promo-code {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: rgba(0,0,0,0.4);
            border: 1px dashed var(--accent);
            border-radius: 10px;
            padding: 10px 20px;
        }

        .promo-code span {
            font-family: 'JetBrains Mono', monospace;
            font-size: 18px;
            font-weight: 600;
            color: var(--accent);
            letter-spacing: 2px;
        }

        .promo-code button {
            background: var(--accent);
            color: #000;
            border: none;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            font-family: 'Outfit', sans-serif;
        }

        /* ==================== FOOTER ==================== */
        .footer {
            border-top: 1px solid var(--border);
            margin-top: 60px;
            padding: 40px 30px;
        }

        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-left {
            color: var(--text-muted);
            font-size: 14px;
        }

        .footer-links {
            display: flex;
            gap: 24px;
        }

        .footer-links a {
            color: var(--text-secondary);
            text-decoration: none;
            font-size: 14px;
            transition: color 0.2s;
        }

        .footer-links a:hover { color: var(--accent); }

        /* ==================== ANIMATIONS ==================== */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .section { animation: fadeInUp 0.6s ease-out; }

        /* ==================== SCROLLBAR ==================== */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: var(--bg-primary); }
        ::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
    .neon-glow{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(60px)}.neon-g1{width:500px;height:500px;top:-150px;right:-100px;background:rgba(0,229,255,.25);animation:ng1 6s ease-in-out infinite}.neon-g2{width:450px;height:450px;bottom:-100px;left:-80px;background:rgba(168,85,247,.2);animation:ng2 8s ease-in-out infinite}.neon-g3{width:350px;height:350px;top:30%;left:50%;background:rgba(168,85,247,.12);animation:ng3 10s ease-in-out infinite}@keyframes ng1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,40px) scale(1.1)}}@keyframes ng2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-60px) scale(1.15)}}@keyframes ng3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,-50px) scale(1.2)}}.header,.section,.footer,.container{position:relative;z-index:1}.neon-glow{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(60px)}.neon-g1{width:500px;height:500px;top:-150px;right:-100px;background:rgba(0,230,118,.25);animation:ng1 6s ease-in-out infinite}.neon-g2{width:450px;height:450px;bottom:-100px;left:-80px;background:rgba(124,58,237,.2);animation:ng2 8s ease-in-out infinite}.neon-g3{width:350px;height:350px;top:30%;left:50%;background:rgba(0,150,255,.15);animation:ng3 10s ease-in-out infinite}@keyframes ng1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,40px) scale(1.1)}}@keyframes ng2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,-60px) scale(1.15)}}@keyframes ng3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,-50px) scale(1.2)}}.header,.section,.footer,.container{position:relative;z-index:1}
/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ===== */
@media (max-width: 768px) {
    .header-top {
        padding: 10px 14px !important;
        gap: 8px !important;
        flex-wrap: wrap;
    }
    /* Шаги "Как это работает" — вертикально */
    .how-steps, [style*="display:flex"][style*="how-step"] {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .how-step {
        min-width: auto !important;
        width: 100% !important;
    }
    /* Преимущества — вертикально */
    .advantages {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .advantage {
        min-width: auto !important;
        width: 100% !important;
    }
    /* Промокоды — вертикально */
    [style*="display:flex"][style*="gap:16px"][style*="flex-wrap:wrap"] {
        flex-direction: column !important;
    }
    [style*="display:flex"][style*="gap:20px"][style*="flex-wrap:wrap"] {
        flex-direction: column !important;
    }
    /* Кнопки скопировать */
    [style*="display:flex"][style*="align-items:center"][style*="gap:12px"] {
        flex-wrap: wrap !important;
    }
    /* Баннеры */
    .banners-track {
        gap: 10px !important;
    }
    .banner-card {
        min-width: 75vw !important;
    }
    .header-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px !important;
        padding-bottom: 4px;
    }
    .header-nav a {
        font-size: 12px !important;
        padding: 6px 10px !important;
        white-space: nowrap;
    }
    .search-bar {
        flex: 1;
        min-width: 120px;
        max-width: none !important;
    }
    .search-bar input {
        padding: 8px 12px 8px 36px !important;
        font-size: 13px !important;
    }
    .search-bar svg {
        left: 10px !important;
        width: 15px !important;
        height: 15px !important;
    }
    .header-actions {
        gap: 4px !important;
    }
    .header-actions a {
        padding: 6px 10px !important;
        font-size: 18px !important;
    }
    .auth-btn {
        font-size:12px !important;
        padding: 6px 10px !important;
    }
    .section {
        padding: 0 14px !important;
    }
    .section-header {
        margin-bottom: 14px !important;
    }
    .section-title {
        font-size: 18px !important;
    }
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .product-card {
        border-radius: 10px !important;
    }
    .product-card:hover {
        transform: none !important;
    }
    .product-info {
        padding: 8px 10px 10px !important;
    }
    .product-name {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    .product-category {
        font-size:12px !important;
    }
    .product-price .current {
        font-size: 13px !important;
    }
    .product-img {
        height: 140px !important;
    }
    .banners-track-container {
        padding: 0 14px !important;
    }
    .banner-card {
        min-width: 260px !important;
        padding: 20px !important;
    }
    .banner-card h3 {
        font-size: 18px !important;
    }
    .how-steps {
        flex-direction: column !important;
    }
    .how-step {
        min-width: auto !important;
    }
    .advantages {
        flex-direction: column !important;
    }
    .advantage {
        min-width: auto !important;
    }
    .footer {
        padding: 24px 14px !important;
    }
    .footer-content {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
    }
    .footer-links {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    .footer-links a {
        font-size: 12px !important;
    }
    .footer-left {
        font-size:12px !important;
    }
}

@media (max-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .product-img {
        height: 120px !important;
    }
    .product-name {
        font-size:12px !important;
    }
    .product-price .current {
        font-size: 12px !important;
    }
    .banner-card {
        min-width: 220px !important;
    }
    .header-top {
        padding: 8px 10px !important;
    }
}

        
        /* === Левые бейджи (С 2025 + онлайн) === */
        .header-badges {
            flex-shrink: 0;
        }
        .header-badges > div {
            white-space: nowrap;
        }
        @media (max-width: 1280px) {
            .header-badges > div {
                font-size:12px !important;
                padding: 4px 8px !important;
            }
        }
        @media (max-width: 1100px) {
            /* Скрываем бейдж "С 2025 г." на узких экранах */
            .header-badges > div:first-child { display: none !important; }
        }
        @media (max-width: 900px) {
            /* Скрываем оба бейджа на мобильных */
            .header-badges { display: none !important; }
        }

        /* === Премиум-навигация v2 === */
        .header-nav {
            display: flex;
            align-items: center;
            gap: 6px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }
        .header-nav a {
            position: relative;
            display: inline-flex;
            align-items: center;
            padding: 10px 18px;
            border-radius: 12px;
            color: #e0e0ea;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            letter-spacing: -0.01em;
            white-space: nowrap;
            line-height: 1;
            border: 1px solid rgba(0,229,255,0.18);
            background: linear-gradient(135deg, rgba(0,229,255,0.06), rgba(168,85,247,0.06));
            transition: all 0.22s cubic-bezier(.4,0,.2,1);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 2px 8px -2px rgba(0,229,255,0.08), inset 0 1px 0 rgba(255,255,255,0.04);
        }
        .header-nav a::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 12px;
            padding: 1px;
            background: linear-gradient(135deg, transparent, transparent);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.25s ease;
            pointer-events: none;
        }
        .header-nav a:hover {
            color: #fff;
            background: linear-gradient(135deg, rgba(0,229,255,0.16), rgba(168,85,247,0.16));
            border-color: rgba(0,229,255,0.45);
            box-shadow: 0 6px 20px -4px rgba(0,229,255,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
            transform: translateY(-2px);
        }
        .header-nav a:hover::before {
            opacity: 1;
            background: linear-gradient(135deg, rgba(0,229,255,0.5), rgba(168,85,247,0.5));
        }
        /* Активная страница — яркий градиент с свечением */
        .header-nav a.nav-active,
        .header-nav a[style*="00e5ff"] {
            background: linear-gradient(135deg, rgba(0,229,255,0.18), rgba(168,85,247,0.18)) !important;
            border-color: rgba(0,229,255,0.5) !important;
            color: #fff !important;
            font-weight: 700 !important;
            box-shadow: 0 0 20px rgba(0,229,255,0.3), inset 0 1px 0 rgba(255,255,255,0.1) !important;
        }
        /* Особая Telegram-кнопка — премиум вид */
        .header-nav a.nav-tg-special {
            background: linear-gradient(135deg, rgba(0,229,255,0.14), rgba(168,85,247,0.14));
            border-color: rgba(0,229,255,0.35);
            color: #fff;
            font-weight: 700;
            box-shadow: 0 0 12px rgba(0,229,255,0.12);
        }
        .header-nav a.nav-tg-special:hover {
            background: linear-gradient(135deg, rgba(0,229,255,0.28), rgba(168,85,247,0.28));
            border-color: rgba(0,229,255,0.6);
            box-shadow: 0 6px 24px -4px rgba(0,229,255,0.5);
            transform: translateY(-2px);
        }
        @media (max-width: 1200px) {
            .header-nav a { padding: 9px 14px; font-size: 13px; }
            .header-nav { gap: 4px; }
        }
        @media (max-width: 1000px) {
            .header-nav a { padding: 8px 11px; font-size: 12.5px; }
            .header-nav { gap: 3px; }
        }

.header { border-bottom: none !important; box-shadow: none !important; margin-bottom: -2px; padding-bottom: 2px; position: sticky; z-index: 100; }

@media (max-width: 768px) {
    /* Промокоды */
    [style*="min-width:280px"] { min-width: auto !important; }
    [style*="min-width:300px"] { min-width: auto !important; }
    [style*="min-width:250px"] { min-width: auto !important; }
    
    /* Кнопки на карточке */
    [style*="bottom:12px;right:12px"] {
        bottom: 8px !important;
        right: 8px !important;
    }
    [style*="width:32px;height:32px"] {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
    
    /* FAQ details */
    details {
        padding: 14px !important;
    }
    details summary {
        font-size: 13px !important;
    }
    
    /* Попап */
    #welcomePopup > div {
        padding: 24px !important;
        margin: 10px !important;
    }
}

@media (max-width: 768px) {
    .mob-col { flex-direction: column !important; }
    .mob-col > * { min-width: auto !important; width: 100% !important; flex: none !important; }
    .mob-scroll { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch; }
    .mob-scroll > * { min-width: 75vw !important; flex-shrink: 0 !important; }
    .mob-full { width: 100% !important; min-width: auto !important; }
    .mob-hide { display: none !important; }
    .mob-small { font-size: 12px !important; }
    
    /* Fix all flex containers with min-width children */
    div[style*="display:flex"][style*="gap:16px"] { flex-direction: column !important; }
    div[style*="display:flex"][style*="gap:20px"] { flex-direction: column !important; }
    div[style*="display:flex"][style*="min-width:280px"] { flex-direction: column !important; }
    div[style*="display:flex"][style*="min-width:300px"] { flex-direction: column !important; }
    div[style*="display:flex"][style*="min-width:250px"] { flex-direction: column !important; }
    div[style*="flex:1;min-width"] { min-width: auto !important; width: 100% !important; }
    
    /* Footer fix */
    .footer-left { font-size:12px !important; line-height: 1.4 !important; }
}

@media (max-width: 768px) {
    /* Поиск в каталоге */
    input[placeholder*="Найти игру"], input[placeholder*="Поиск игр"] {
        font-size: 13px !important;
        padding: 10px 12px 10px 36px !important;
    }
    input[placeholder*="Найти игру"]::placeholder {
        font-size: 12px !important;
    }
    
    /* Фильтры каталога */
    select {
        font-size:12px !important;
        padding: 8px 8px !important;
        min-width: 0 !important;
    }
    
    /* Каталог заголовок */
    h1 { font-size: 22px !important; }
    
    /* Кнопка Найти */
    button[type="submit"] {
        font-size: 12px !important;
        padding: 10px 14px !important;
    }
    
    /* Вкладки категорий */
    div[style*="display:flex"][style*="gap:10px"][style*="margin-bottom:20px"] {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px !important;
    }
    div[style*="display:flex"][style*="gap:10px"][style*="margin-bottom:20px"] > a {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
}

@media (max-width: 768px) {
    #hitsGrid {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px !important;
        padding-bottom: 10px;
    }
    #hitsGrid > a {
        min-width: 160px !important;
        max-width: 160px !important;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    .how-steps-grid, .how-steps, .how-it-works { 
        display: flex !important;
        flex-direction: row !important; 
        gap: 10px !important;
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 12px !important;
    }
    .how-steps-grid .how-step, .how-steps .how-step, .how-step { 
        min-width: 70vw !important; 
        max-width: 70vw !important;
        flex-shrink: 0 !important;
        padding: 16px !important;
        scroll-snap-align: start;
    }
    .how-step h4 { font-size: 15px !important; }
    .how-step p { font-size: 12px !important; }
    .how-step-num { width: 36px !important; height: 36px !important; font-size: 14px !important; }
    
    .promo-cards, div[style*="display:flex"][style*="gap:16px"][style*="flex-wrap"] { 
        flex-direction: column !important; 
    }
    .promo-cards > div { min-width: auto !important; width: 100% !important; }
    
    .advantages-grid, .advantages { 
        flex-direction: column !important; 
        gap: 10px !important;
    }
    .advantages-grid .advantage, .advantage { 
        min-width: auto !important; 
        width: 100% !important;
    }
    
    .section-title { font-size: 18px !important; }
    .section-header { margin-bottom: 12px !important; }
}

@keyframes popIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:none}}

@keyframes slideIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@keyframes slideOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-30px)}}

@keyframes rp-slide-in { from { transform: translateX(-110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes rp-slide-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-110%); opacity: 0; } }
@keyframes rp-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
#recentPurchaseToast.closing { animation: rp-slide-out .3s ease forwards; }
@media (max-width: 600px) {
  #recentPurchaseToast { bottom: 12px; left: 12px; right: 12px; max-width: none; padding: 10px 12px; }
  #recentPurchaseToast #rpImg { width: 42px; height: 42px; }
  #recentPurchaseToast #rpText { font-size: 12px; }
}
/* ============ catalog.css (страница каталога) ============ */
/* ============================================
   Каталог товаров — вёрстка с нуля по референсу
   Использует токены из home.css (--ds-*)
   ============================================ */

.ds-cg-wrap { padding-top: 28px; padding-bottom: 56px; }

/* Заголовок страницы */
.ds-cg-titlebar { margin-bottom: 14px; }
.ds-cg-title { display: flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 800; color: var(--ds-text); letter-spacing: -0.5px; margin: 0; }
.ds-cg-title-ic { font-size: 26px; }

/* Бейджи доверия */
.ds-cg-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ds-cg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.ds-cg-badge-good { background: rgba(22, 163, 74, .1); color: #16a34a; }
.ds-cg-badge-info { background: var(--ds-accent-soft); color: var(--ds-accent); }
.ds-cg-badge-promo { background: rgba(219, 39, 119, .1); color: #db2777; }

/* Табы каталога */
.ds-cg-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.ds-cg-tab {
  padding: 10px 18px; border: 1px solid var(--ds-border); background: var(--ds-surface);
  border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ds-text-soft);
  cursor: pointer; font-family: 'Outfit', sans-serif; transition: all .2s;
}
.ds-cg-tab:hover { border-color: var(--ds-accent); color: var(--ds-text); }
.ds-cg-tab.active { background: var(--ds-accent-grad); border-color: transparent; color: #fff; box-shadow: var(--ds-shadow-sm); }

/* Раскладка: сайдбар + основная колонка */
.ds-cg-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }

/* ===== Сайдбар ===== */
.ds-cg-sidebar {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  padding: 20px; box-shadow: var(--ds-shadow-sm); position: sticky; top: 16px;
}
.ds-cg-filter-block { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--ds-border); }
.ds-cg-filter-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.ds-cg-label { display: block; font-size: 13px; font-weight: 700; color: var(--ds-text); margin-bottom: 10px; }

.ds-cg-search { position: relative; }
.ds-cg-search input {
  width: 100%; box-sizing: border-box; padding: 10px 36px 10px 12px; border: 1.5px solid var(--ds-border);
  border-radius: 10px; font-size: 13px; font-family: inherit; outline: none; color: var(--ds-text);
}
.ds-cg-search input:focus { border-color: var(--ds-accent); }
.ds-cg-search svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ds-text-muted); pointer-events: none; }

.ds-cg-price-row { display: flex; gap: 10px; margin-bottom: 12px; }
.ds-cg-price-field { flex: 1; border: 1.5px solid var(--ds-border); border-radius: 10px; padding: 6px 10px; }
.ds-cg-price-field small { display: block; font-size: 10px; color: var(--ds-text-muted); margin-bottom: 2px; }
.ds-cg-price-field input { width: 100%; border: none; outline: none; font-size: 13px; font-weight: 600; color: var(--ds-text); font-family: inherit; padding: 0; background: transparent; }

.ds-cg-slider-track { position: relative; height: 4px; border-radius: 2px; background: var(--ds-border); margin: 18px 4px 4px; }
.ds-cg-slider-fill { position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--ds-accent-grad); }
.ds-cg-slider-handle { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--ds-accent); transform: translate(-50%, -50%); box-shadow: var(--ds-shadow-sm); }

.ds-cg-group-head {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--ds-text); margin-bottom: 12px; user-select: none;
}
.ds-cg-group-head svg { transition: transform .2s; color: var(--ds-text-muted); }
.ds-cg-filter-block.collapsed .ds-cg-group-head svg { transform: rotate(-90deg); }
.ds-cg-filter-block.collapsed .ds-cg-check,
.ds-cg-filter-block.collapsed .ds-cg-showmore { display: none; }

.ds-cg-check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ds-text-soft); padding: 6px 0; cursor: pointer; }
.ds-cg-check input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--ds-accent); cursor: pointer; flex-shrink: 0; }
.ds-cg-check:hover span { color: var(--ds-text); }

.ds-cg-showmore { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ds-accent); text-decoration: none; margin-top: 4px; }
.ds-cg-showmore:hover { text-decoration: underline; }

/* ===== Основная колонка ===== */
.ds-cg-filters-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.ds-cg-select {
  padding: 9px 30px 9px 14px; border: 1.5px solid var(--ds-border); border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--ds-text); background: var(--ds-surface);
  font-family: inherit; cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6178' stroke-width='2.5'><path stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
}
.ds-cg-select:focus { border-color: var(--ds-accent); }
.ds-cg-found { margin-left: auto; font-size: 13px; color: var(--ds-text-muted); }
.ds-cg-found b { color: var(--ds-text); font-weight: 700; }

.ds-cg-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }

.ds-cg-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  overflow: hidden; box-shadow: var(--ds-shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
}
.ds-cg-card:hover { transform: translateY(-4px); box-shadow: var(--ds-shadow-lg); border-color: var(--ds-accent); }

.ds-cg-card-img { position: relative; width: 100%; aspect-ratio: 1 / 1; background: var(--ds-surface-2); overflow: hidden; }
.ds-cg-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.ds-cg-card:hover .ds-cg-card-img img { transform: scale(1.05); }

.ds-cg-tag { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .3px; color: #fff; }
.ds-cg-tag-ps { background: #0070d1; }
.ds-cg-tag-ps4 { background: #0070d1; }
.ds-cg-tag-steam { background: #1b2838; }

.ds-cg-card-body { padding: 14px 14px 10px; flex: 1; }
.ds-cg-card-cat { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ds-text-muted); margin-bottom: 4px; }
.ds-cg-card-name { font-size: 14.5px; font-weight: 700; color: var(--ds-text); line-height: 1.3; margin-bottom: 8px; }
.ds-cg-card-price { font-size: 15px; font-weight: 800; color: var(--ds-accent); }

.ds-cg-card-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 14px 14px; }
.ds-cg-ic-btn {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--ds-border);
  background: var(--ds-surface); color: var(--ds-text-soft); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; flex-shrink: 0;
}
.ds-cg-ic-btn:hover { border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-cg-ic-btn.is-active { color: #fff; border-color: transparent; }
.ds-cg-ic-btn:not(.primary).is-active { background: #e11d48; }
.ds-cg-ic-btn.primary { background: var(--ds-accent-grad); border-color: transparent; color: #fff; }
.ds-cg-ic-btn.primary.is-active { filter: brightness(.85); }

/* ===== Пагинация ===== */
.ds-cg-pagination {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  margin-top: 28px; padding: 18px 22px; background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm);
}
.ds-cg-pg-info { font-size: 13.5px; color: var(--ds-text-muted); }
.ds-cg-pg-nav { display: flex; align-items: center; gap: 6px; }
.ds-cg-pg-arrow, .ds-cg-pg-num {
  min-width: 36px; height: 36px; padding: 0 6px; border-radius: 10px; border: 1px solid var(--ds-border);
  background: var(--ds-surface); color: var(--ds-text-soft); font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; font-family: inherit;
}
.ds-cg-pg-arrow:hover, .ds-cg-pg-num:hover { border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-cg-pg-num.active { background: var(--ds-accent-grad); border-color: transparent; color: #fff; }
.ds-cg-pg-dots { color: var(--ds-text-muted); padding: 0 2px; }

/* ===== SEO-текст + карточка преимуществ ===== */
.ds-cg-seo { display: flex; flex-direction: column; gap: 20px; margin-top: 40px; }
.ds-cg-seo-text {
  width: 100%; box-sizing: border-box;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  padding: 28px 30px; box-shadow: var(--ds-shadow-sm);
}
.ds-cg-seo-text h2 { font-size: 22px; font-weight: 800; color: var(--ds-text); margin: 0 0 14px; letter-spacing: -.3px; }
.ds-cg-seo-text p { font-size: 14.5px; line-height: 1.7; color: var(--ds-text-soft); margin: 0 0 14px; max-width: 900px; }
.ds-cg-seo-text.collapsed .ds-cg-seo-more { display: none; }
.ds-cg-seo-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 9px 16px;
  border: 1px solid var(--ds-border); border-radius: 999px; background: var(--ds-surface);
  color: var(--ds-accent); font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; transition: all .2s;
}
.ds-cg-seo-toggle:hover { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.ds-cg-seo-toggle svg { transition: transform .2s; }
.ds-cg-seo-text:not(.collapsed) .ds-cg-seo-toggle svg { transform: rotate(180deg); }

.ds-cg-seo-card {
  width: 100%; box-sizing: border-box;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  padding: 22px; box-shadow: var(--ds-shadow-sm);
}
.ds-cg-seo-feats-row { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.ds-cg-seo-feat { flex: 1; min-width: 220px; display: flex; align-items: flex-start; gap: 14px; }
.ds-cg-seo-ic {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--ds-accent-soft); padding: 8px; box-sizing: border-box;
}
.ds-cg-seo-ic img { width: 100%; height: 100%; object-fit: contain; }
.ds-cg-seo-feat b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ds-text); margin-bottom: 3px; }
.ds-cg-seo-feat small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ds-text-muted); }
.ds-cg-seo-banner {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-radius: var(--ds-radius); background: var(--ds-accent-grad); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.4;
}
.ds-cg-seo-banner .ds-cg-seo-ic { background: rgba(255,255,255,.22); }

/* ===== Отзывы ===== */
.ds-cg-reviews { margin-top: 48px; }
.ds-cg-reviews-head { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.ds-cg-reviews-head h2 { font-size: 24px; font-weight: 800; color: var(--ds-text); margin: 0 0 4px; letter-spacing: -.3px; }
.ds-cg-reviews-head > div:first-child p { margin: 0; font-size: 13.5px; color: var(--ds-text-muted); }
.ds-cg-reviews-rating { display: flex; align-items: baseline; gap: 6px; padding: 10px 16px; background: var(--ds-accent-soft); border-radius: 999px; }
.ds-cg-rating-star { color: #f59e0b; font-size: 16px; }
.ds-cg-reviews-rating b { font-size: 18px; font-weight: 800; color: var(--ds-text); }
.ds-cg-reviews-rating small { font-size: 13px; color: var(--ds-text-muted); }
.ds-cg-rating-count { font-size: 12.5px; color: var(--ds-text-muted); margin-left: 4px; }
.ds-cg-reviews-btn { margin-left: auto; white-space: nowrap; }

.ds-cg-reviews-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.ds-cg-reviews-track::-webkit-scrollbar { display: none; }
.ds-cg-review-card {
  flex: 0 0 calc(33.333% - 12px); scroll-snap-align: start; box-sizing: border-box;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  padding: 20px; box-shadow: var(--ds-shadow-sm);
  display: flex; flex-direction: column;
}
.ds-cg-review-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ds-cg-review-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--ds-accent-grad); color: #fff; font-size: 13px; font-weight: 700;
}
.ds-cg-review-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-cg-review-who b { font-size: 14px; font-weight: 700; color: var(--ds-text); }
.ds-cg-review-stars { color: #f59e0b; font-size: 12px; letter-spacing: 1px; }
.ds-cg-review-date { font-size: 11.5px; color: var(--ds-text-muted); white-space: nowrap; }
.ds-cg-review-card p { font-size: 13.5px; line-height: 1.6; color: var(--ds-text-soft); margin: 0 0 12px; }
.ds-cg-review-tag {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: auto;
  font-size: 12px; font-weight: 600; color: var(--ds-accent); background: var(--ds-accent-soft); padding: 5px 12px 5px 6px; border-radius: 999px;
}
.ds-cg-review-tag img { width: 18px; height: 18px; object-fit: contain; border-radius: 50%; }

.ds-cg-reviews-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; }
.ds-cg-reviews-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-border); cursor: pointer; transition: all .2s; }
.ds-cg-reviews-dots span.active { background: var(--ds-accent); width: 20px; border-radius: 4px; }

/* ===== Нижние инфо-блоки ===== */
.ds-cg-info-row {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px; margin-bottom: 8px;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm); overflow: hidden;
}
.ds-cg-info-ic.ic-purple { color: var(--ds-accent-2); background: rgba(139, 61, 245, .12); }
.ds-cg-info-ic.ic-blue { background: rgba(74, 92, 255, .12); }
.ds-cg-info-ic.ic-navy { background: rgba(30, 58, 138, .1); }
.ds-cg-info-ic.ic-gold { background: rgba(217, 119, 6, .12); }

/* ===== Адаптив ===== */
@media (max-width: 1400px) {
  .ds-cg-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1100px) {
  .ds-cg-layout { grid-template-columns: 1fr; }
  .ds-cg-sidebar { position: static; }
  .ds-cg-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .ds-cg-seo-feats-row { flex-direction: column; gap: 16px; }
  .ds-cg-info-row { grid-template-columns: repeat(2, 1fr); }
  .ds-cg-info-card:nth-child(2n) { border-right: none; }
  .ds-cg-info-card:nth-child(-n+2) { border-bottom: 1px solid var(--ds-border); }
  .ds-cg-review-card { flex: 0 0 calc(50% - 9px); }
}
@media (max-width: 700px) {
  .ds-cg-grid { grid-template-columns: repeat(2, 1fr); }
  .ds-cg-title { font-size: 24px; }
  .ds-cg-pagination { flex-direction: column; align-items: stretch; text-align: center; }
  .ds-cg-reviews-head { flex-direction: column; align-items: flex-start; }
  .ds-cg-reviews-btn { margin-left: 0; }
  .ds-cg-info-row { grid-template-columns: 1fr; }
  .ds-cg-info-card { border-right: none !important; border-bottom: 1px solid var(--ds-border); }
  .ds-cg-info-card:last-child { border-bottom: none; }
  .ds-cg-review-card { flex: 0 0 100%; }
}

/* ============ topup.css (страница пополнения) ============ */
/* ============================================
   Пополнение Steam и сервисов v2 — 3 колонки по новому референсу
   Использует токены из home.css (--ds-*)
   ============================================ */

.ds-tp2-wrap { padding-top: 32px; padding-bottom: 64px; }
.ds-tp2-layout { display: grid; grid-template-columns: 280px 1fr 360px; gap: 24px; align-items: stretch; }

/* ===== Левая колонка: список сервисов ===== */
.ds-tp2-side {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm); padding: 20px; box-sizing: border-box; align-self: start;
}
.ds-tp2-side-title { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--ds-text); }
.ds-tp2-svc-list { display: flex; flex-direction: column; gap: 4px; }
.ds-tp2-svc {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 1.5px solid transparent;
  border-radius: 12px; background: transparent; cursor: pointer; text-align: left; font-family: 'Outfit', sans-serif;
  transition: all .15s;
}
.ds-tp2-svc:hover { background: var(--ds-surface-2); }
.ds-tp2-svc.active { background: var(--ds-accent-soft); border-color: rgba(74,92,255,.25); }
.ds-tp2-svc-ic { width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; overflow: hidden; display: flex; }
.ds-tp2-svc-ic img { width: 100%; height: 100%; object-fit: cover; }
.ds-tp2-svc-letter {
  width: 100%; height: 100%; color: #fff; font-weight: 800; font-size: 14px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.ds-tp2-svc-tx { flex: 1; min-width: 0; }
.ds-tp2-svc-tx b { display: block; font-size: 14px; font-weight: 700; color: var(--ds-text); }
.ds-tp2-svc-tx small { font-size: 12px; color: var(--ds-text-muted); }
.ds-tp2-svc-chev { color: var(--ds-text-muted); flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.ds-tp2-svc.active .ds-tp2-svc-chev, .ds-tp2-svc:hover .ds-tp2-svc-chev { opacity: 1; }
.ds-tp2-svc.active .ds-tp2-svc-chev { color: var(--ds-accent); }

.ds-tp2-cta {
  margin-top: 16px; padding: 16px; text-align: center; background: var(--ds-surface-2); border: 1px dashed var(--ds-border);
  border-radius: var(--ds-radius); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ds-tp2-cta-ic {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ds-accent-soft); display: flex; align-items: center;
  justify-content: center; padding: 8px; box-sizing: border-box; margin-bottom: 4px;
}
.ds-tp2-cta-ic img { width: 100%; height: 100%; object-fit: contain; }
.ds-tp2-cta b { font-size: 13px; font-weight: 700; color: var(--ds-text); }
.ds-tp2-cta small { font-size: 12px; color: var(--ds-text-muted); margin-bottom: 8px; }
.ds-tp2-cta-btn {
  display: inline-flex; padding: 9px 16px; border-radius: 10px; background: var(--ds-surface); border: 1px solid var(--ds-border);
  font-size: 12.5px; font-weight: 700; color: var(--ds-text); text-decoration: none; transition: all .15s;
}
.ds-tp2-cta-btn:hover { border-color: var(--ds-accent); color: var(--ds-accent); }

/* ===== Центр: форма ===== */
.ds-tp2-main {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm); padding: 26px; box-sizing: border-box;
}
.ds-tp2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.ds-tp2-head h1 { font-size: 24px; font-weight: 800; color: var(--ds-text); margin: 0 0 6px; letter-spacing: -0.3px; }
.ds-tp2-head p { font-size: 13.5px; color: var(--ds-text-soft); margin: 0; max-width: 420px; line-height: 1.5; }
.ds-tp2-head-ic {
  width: 56px; height: 56px; flex-shrink: 0; border-radius: 16px; overflow: hidden; display: flex;
  background: var(--ds-accent-soft); box-shadow: var(--ds-shadow-sm);
}
.ds-tp2-head-ic img { width: 100%; height: 100%; object-fit: cover; }

.ds-tp2-form label { display: block; font-size: 13px; font-weight: 700; color: var(--ds-text); margin: 16px 0 8px; }
.ds-tp2-form label:first-child { margin-top: 0; }

.ds-tp2-select-wrap, .ds-tp2-input-wrap { position: relative; }
.ds-tp2-field-flag { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 16px; pointer-events: none; }
.ds-tp2-select, .ds-tp2-input-wrap input {
  width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1.5px solid var(--ds-border);
  border-radius: 10px; font-size: 14px; font-family: inherit; outline: none; color: var(--ds-text); background: var(--ds-surface);
}
.ds-tp2-select { padding-left: 40px; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6178' stroke-width='2.5'><path stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; padding-right: 36px;
}
.ds-tp2-select:focus, .ds-tp2-input-wrap input:focus { border-color: var(--ds-accent); }
.ds-tp2-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ds-text-muted); }

.ds-tp2-sums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ds-tp2-sum {
  padding: 12px 4px; border: 1.5px solid var(--ds-border); border-radius: 10px;
  background: var(--ds-surface); font-weight: 700; font-size: 13px; color: var(--ds-text-soft); cursor: pointer;
  font-family: 'Outfit', sans-serif; text-align: center; transition: all .15s;
}
.ds-tp2-sum.active { background: var(--ds-accent-grad); border-color: transparent; color: #fff; }
.ds-tp2-sum-other {
  display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap;
}
.ds-tp2-sum-other input {
  width: 100%; border: none; outline: none; background: transparent; font-family: inherit; font-weight: 700;
  font-size: 13px; text-align: center; color: #fff;
}
.ds-tp2-sum-other.active input::placeholder { color: rgba(255,255,255,.7); }

.ds-tp2-min-note {
  display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--ds-accent);
  background: var(--ds-accent-soft); border-radius: 8px; padding: 9px 12px;
}

.ds-tp2-promo-row { display: flex; gap: 8px; }
.ds-tp2-promo-row input {
  flex: 1; box-sizing: border-box; padding: 13px 14px; border: 1.5px solid var(--ds-border); border-radius: 10px;
  font-size: 14px; font-family: inherit; outline: none; color: var(--ds-text); background: var(--ds-surface);
}
.ds-tp2-promo-row input:focus { border-color: var(--ds-accent); }
.ds-tp2-promo-apply {
  padding: 0 20px; border-radius: 10px; border: 1.5px solid var(--ds-border); background: var(--ds-surface);
  font-weight: 700; font-size: 13.5px; color: var(--ds-accent); cursor: pointer; font-family: 'Outfit', sans-serif; transition: all .15s;
}
.ds-tp2-promo-apply:hover { border-color: var(--ds-accent); background: var(--ds-accent-soft); }

.ds-tp2-continue { width: 100%; margin-top: 22px; padding: 15px; font-size: 15px; }

/* ===== Правая колонка: сводка заказа ===== */
.ds-tp2-order {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm); padding: 22px; box-sizing: border-box;
  display: flex; flex-direction: column; height: 100%;
}
.ds-tp2-order-title { margin: 0 0 16px; font-size: 16px; font-weight: 800; color: var(--ds-text); }
.ds-tp2-order-rows { display: flex; flex-direction: column; gap: 12px; }
.ds-tp2-order-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; }
.ds-tp2-order-row span { color: var(--ds-text-muted); }
.ds-tp2-order-row b { color: var(--ds-text); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.ds-tp2-order-row b img { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.ds-tp2-order-row b.accent { color: #17a672; }
.ds-tp2-order-hr { border: none; border-top: 1px solid var(--ds-border); margin: 16px 0; }

.ds-tp2-order-total {
  display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 14px 16px;
  background: var(--ds-accent-soft); border-radius: var(--ds-radius); font-size: 14px; color: var(--ds-text);
}
.ds-tp2-order-total b { font-size: 19px; font-weight: 800; color: var(--ds-text); }

.ds-tp2-promo-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-surface); cursor: pointer;
  font-family: 'Outfit', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--ds-text-soft); transition: all .15s;
}
.ds-tp2-promo-toggle span { display: flex; align-items: center; gap: 8px; }
.ds-tp2-promo-toggle svg:last-child { transition: transform .15s; }
.ds-tp2-promo-toggle.open svg:last-child { transform: rotate(180deg); }
.ds-tp2-promo-toggle:hover { border-color: var(--ds-accent); }

.ds-tp2-pay { width: 100%; margin-top: 14px; padding: 15px; font-size: 15px; }

.ds-tp2-trust { list-style: none; margin: 18px 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding-top: 18px; }
.ds-tp2-trust li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ds-text-soft); }
.ds-tp2-trust li svg { color: var(--ds-accent); flex-shrink: 0; }

/* ===== Нижний ряд ===== */
.ds-tp2-bottom { display: grid; grid-template-columns: 1fr 300px 320px; gap: 24px; margin-top: 24px; align-items: stretch; }

.ds-tp2-steps {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm); padding: 24px; box-sizing: border-box;
}
.ds-tp2-steps h3 { margin: 0 0 20px; font-size: 16px; font-weight: 800; color: var(--ds-text); }
.ds-tp2-steps-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.ds-tp2-steps-row::before {
  content: ''; position: absolute; top: 17px; left: 8%; right: 8%; height: 1.5px; background: var(--ds-border); z-index: 0;
}
.ds-tp2-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ds-tp2-step-n { width: 34px; height: 34px; font-size: 14px; box-shadow: var(--ds-shadow-sm); }
.ds-tp2-step b { font-size: 13.5px; font-weight: 700; color: var(--ds-text); }
.ds-tp2-step small { font-size: 12px; color: var(--ds-text-muted); line-height: 1.4; }

.ds-tp2-info-card {
  background: var(--ds-accent-soft); border: 1px solid rgba(74,92,255,.15); border-radius: var(--ds-radius-lg);
  padding: 22px; box-sizing: border-box; display: flex; flex-direction: column;
}
.ds-tp2-info-ic {
  width: 36px; height: 36px; border-radius: 10px; background: var(--ds-surface); color: var(--ds-accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.ds-tp2-info-card b { font-size: 14.5px; font-weight: 700; color: var(--ds-text); margin-bottom: 6px; }
.ds-tp2-info-card p { font-size: 12.5px; line-height: 1.55; color: var(--ds-text-soft); margin: 0 0 12px; flex: 1; }
.ds-tp2-info-card a { font-size: 13px; font-weight: 700; color: var(--ds-accent); text-decoration: none; }
.ds-tp2-info-card a:hover { text-decoration: underline; }

.ds-tp2-reviews-card {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm); padding: 22px; box-sizing: border-box;
}
.ds-tp2-reviews-card b { font-size: 14.5px; font-weight: 700; color: var(--ds-text); }
.ds-tp2-reviews-score { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.ds-tp2-reviews-score span:first-child { font-size: 26px; font-weight: 800; color: var(--ds-text); }
.ds-tp2-stars { color: #f5a623; font-size: 14px; letter-spacing: 1px; }
.ds-tp2-reviews-card > small { display: block; font-size: 12px; color: var(--ds-text-muted); margin-top: 2px; }
.ds-tp2-avatars { display: flex; align-items: center; margin-top: 14px; }
.ds-tp2-avatars span {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--ds-surface); margin-left: -8px;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700;
}
.ds-tp2-avatars span:first-child { margin-left: 0; }
.ds-tp2-avatars-more { background: var(--ds-surface-2) !important; color: var(--ds-text-muted) !important; font-size: 10.5px !important; }

/* ===== Адаптив ===== */
@media (max-width: 1200px) {
  .ds-tp2-layout { grid-template-columns: 1fr; }
  .ds-tp2-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ds-tp2-head { flex-direction: column-reverse; }
  .ds-tp2-sums { grid-template-columns: repeat(2, 1fr); }
  .ds-tp2-steps-row { grid-template-columns: repeat(2, 1fr); }
  .ds-tp2-steps-row::before { display: none; }
}

/* ============ product.css (карточка товара, светлая) ============ */
/* ============================================
   Карточка товара — вёрстка с нуля по референсу
   Использует токены из home.css (--ds-*)
   ============================================ */

.ds-pd-wrap { padding-top: 24px; padding-bottom: 56px; }

/* ===== Хлебные крошки ===== */
.ds-pd-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ds-text-muted); margin-bottom: 18px; flex-wrap: wrap; }
.ds-pd-crumbs a { color: var(--ds-text-muted); text-decoration: none; }
.ds-pd-crumbs a:hover { color: var(--ds-accent); }
.ds-pd-crumbs b { color: var(--ds-text); font-weight: 600; }
.ds-pd-crumbs span { color: var(--ds-border); }

/* ===== Верхний блок ===== */
.ds-pd-top { display: grid; grid-template-columns: 3fr minmax(320px, 1fr); gap: 28px; align-items: start; }

/* --- Галерея --- */
.ds-pd-gmain {
  position: relative; width: 100%; height: 500px; border-radius: var(--ds-radius-lg); overflow: hidden;
  background: var(--ds-surface-2); box-shadow: var(--ds-shadow-sm);
}
.ds-pd-gmain img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ds-pd-gtag {
  position: absolute; left: 16px; top: 16px; z-index: 1; padding: 6px 14px; border-radius: 999px;
  background: rgba(20,23,42,.65); backdrop-filter: blur(4px); color: #fff; font-size: 12.5px; font-weight: 700;
}
.ds-pd-gbadges { position: absolute; right: 16px; top: 16px; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 70%; }
.ds-pd-gbadge { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; }
.ds-pd-gbadge-hot { background: linear-gradient(90deg, #db2777, #8b3df5); }
.ds-pd-gbadge-fast { background: rgba(20,23,42,.65); backdrop-filter: blur(4px); }

.ds-pd-thumbs { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ds-pd-thumb-track { flex: 1; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.ds-pd-thumb-track::-webkit-scrollbar { display: none; }
.ds-pd-thumb {
  position: relative; flex: 0 0 108px; height: 68px; border-radius: 12px; overflow: hidden; border: 2px solid transparent;
  padding: 0; cursor: pointer; background: var(--ds-surface-2);
}
.ds-pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-pd-thumb.active { border-color: var(--ds-accent); }
.ds-pd-thumb-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20,23,42,.35); color: #fff; font-size: 16px;
}

/* --- Карточка покупки --- */
.ds-pd-buy {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm); padding: 26px; box-sizing: border-box;
}
.ds-pd-title { font-size: 25px; font-weight: 800; color: var(--ds-text); margin: 0 0 10px; letter-spacing: -0.4px; }
.ds-pd-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13.5px; }
.ds-pd-rating-val { font-weight: 800; color: var(--ds-text); }
.ds-pd-stars { color: #f59e0b; letter-spacing: 1px; }
/* WooCommerce отдаёт wc_get_rating_html() с текстом "Оценка X из 5" для скринридеров —
   в оригинальных стилях Woo он визуально скрыт этим приёмом (звёзды рисуются через ::before,
   а текст обрезается overflow+сдвигом вниз), но мы отключили woocommerce_enqueue_styles. */
.ds-pd-stars .star-rating {
  overflow: hidden; position: relative; height: 1em; line-height: 1em; width: 5.4em;
  font-family: Arial, sans-serif; font-size: inherit;
}
.ds-pd-stars .star-rating::before {
  content: "\2605\2605\2605\2605\2605"; color: var(--ds-border);
  position: absolute; top: 0; left: 0; float: left;
}
.ds-pd-stars .star-rating span {
  overflow: hidden; position: absolute; top: 0; left: 0; float: left; padding-top: 1.5em;
}
.ds-pd-stars .star-rating span::before {
  content: "\2605\2605\2605\2605\2605"; color: #f59e0b; position: absolute; top: 0; left: 0;
}
.ds-pd-rating a { color: var(--ds-text-muted); text-decoration: none; }
.ds-pd-rating a:hover { text-decoration: underline; color: var(--ds-accent); }

.ds-pd-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ds-pd-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--ds-surface-2); border: 1px solid var(--ds-border); font-size: 12.5px; font-weight: 600; color: var(--ds-text-soft);
}
.ds-pd-badge img { width: 15px; height: 15px; border-radius: 4px; object-fit: cover; }
.ds-pd-badge-fast { background: rgba(220, 38, 38, .08); border-color: rgba(220,38,38,.15); color: #dc2626; }

.ds-pd-price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--ds-border); }
.ds-pd-price { font-size: 28px; font-weight: 800; color: var(--ds-text); }
.ds-pd-price small { font-size: 14px; font-weight: 600; color: var(--ds-text-muted); margin-right: 2px; }
.ds-pd-promo { font-size: 12.5px; font-weight: 700; color: #db2777; background: rgba(219,39,119,.08); padding: 6px 12px; border-radius: 999px; }

.ds-pd-field { margin-bottom: 16px; }
.ds-pd-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ds-text); margin-bottom: 8px; }
.ds-pd-toggle-group { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-pd-toggle {
  padding: 10px 16px; border: 1.5px solid var(--ds-border); border-radius: 10px; background: var(--ds-surface);
  font-size: 13.5px; font-weight: 600; color: var(--ds-text-soft); cursor: pointer; font-family: 'Outfit', sans-serif; transition: all .15s;
}
.ds-pd-toggle:hover { border-color: var(--ds-accent); }
.ds-pd-toggle.active { background: var(--ds-accent-soft); border-color: var(--ds-accent); color: var(--ds-accent); font-weight: 700; }

.ds-pd-region-row { display: flex; align-items: center; gap: 10px; }
.ds-pd-select-wrap { flex: 1; position: relative; }
.ds-pd-select {
  width: 100%; box-sizing: border-box; padding: 12px 34px 12px 14px; border: 1.5px solid var(--ds-border);
  border-radius: 10px; font-size: 13.5px; font-family: inherit; outline: none; color: var(--ds-text); background: var(--ds-surface);
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6178' stroke-width='2.5'><path stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.ds-pd-select:focus { border-color: var(--ds-accent); }
.ds-pd-flag { font-size: 16px; }
.ds-pd-instock { font-size: 12px; font-weight: 700; color: #16a34a; white-space: nowrap; }

/* Нативная форма вариаций WooCommerce остаётся рабочей, но её штатную таблицу select'ов
   и дублирующие цену/наличие блоки прячем — эти данные показывают наши .ds-pd-toggle-group
   (пилюли) и #pdPrice/#pdStockStatus, которые product.js обновляет по событию found_variation. */
.ds-pd-actions .variations { display: none; }
.ds-pd-actions .woocommerce-variation-description,
.ds-pd-actions .woocommerce-variation-price,
.ds-pd-actions .woocommerce-variation-availability,
.ds-pd-actions .reset_variations { display: none; }
.ds-pd-actions .variations_form { flex: 1; display: flex; flex-wrap: wrap; margin: 0; }
.ds-pd-actions .single_variation_wrap { flex: 1; display: flex; }
.ds-pd-actions .woocommerce-variation-add-to-cart { flex: 1; display: flex; }

.ds-pd-actions { display: flex; align-items: stretch; gap: 10px; margin-bottom: 18px; }
.ds-pd-buy-btn { flex: 1; padding: 15px; font-size: 15px; }

/* Форма добавления в корзину — штатная разметка WooCommerce (woocommerce_template_single_add_to_cart),
   стилизуем под ту же кнопку .ds-btn.ds-btn-primary; степпер количества скрываем — цифровые товары
   покупают поштучно, как в макете. Поле quantity остаётся в DOM со значением 1, просто не показывается. */
.ds-pd-actions .cart { flex: 1; display: flex; margin: 0; }
/* !important обязателен: wc-add-to-cart-variation.js делает .quantity.show() через jQuery
   при подборе вариации — это инлайн-стиль на элементе, обычный класс его не перебьёт. */
.ds-pd-actions .quantity { display: none !important; }
.ds-pd-actions .single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px; border-radius: var(--ds-radius-sm);
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px;
  border: none; cursor: pointer; text-decoration: none; transition: all .2s;
  background: var(--ds-accent-grad); color: #fff;
}
.ds-pd-actions .single_add_to_cart_button:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-lg); }
.ds-pd-actions .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }

.ds-pd-ic-btn {
  width: 50px; height: 50px; flex-shrink: 0; border-radius: 12px; border: 1.5px solid var(--ds-border);
  background: var(--ds-surface); color: var(--ds-text-soft); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
}
.ds-pd-ic-btn:hover { border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-pd-ic-btn.sm { width: 34px; height: 34px; border-radius: 9px; }

.ds-pd-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ds-pd-checklist li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ds-text-soft); }
.ds-pd-checklist li svg { color: var(--ds-accent); flex-shrink: 0; }

/* ===== Полоса доверия ===== */
.ds-pd-trust-row {
  display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 48px;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm); overflow: hidden;
}
.ds-pd-trust-ic.ic-purple { background: rgba(139, 61, 245, .12); }
.ds-pd-trust-ic.ic-navy { background: rgba(30, 58, 138, .1); }
.ds-pd-trust-ic.ic-gold { background: rgba(217, 119, 6, .12); }

/* ===== Секции ===== */
.ds-pd-section { margin-top: 48px; }
.ds-pd-section h2 { font-size: 22px; font-weight: 800; color: var(--ds-text); margin: 0 0 20px; letter-spacing: -0.3px; }

/* --- Что входит в покупку --- */
.ds-pd-includes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ds-pd-include-card {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  padding: 20px; box-shadow: var(--ds-shadow-sm); transition: all .2s;
}
.ds-pd-include-card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-lg); border-color: var(--ds-accent); }
.ds-pd-include-ic {
  width: 42px; height: 42px; border-radius: 12px; background: var(--ds-accent-soft); color: var(--ds-accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.ds-pd-include-card b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ds-text); margin-bottom: 6px; }
.ds-pd-include-card small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ds-text-muted); }

/* --- Как получить товар --- */
.ds-pd-steps-row { display: flex; align-items: flex-start; gap: 10px; }
.ds-pd-step { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ds-pd-step-n { width: 38px; height: 38px; font-size: 15px; box-shadow: var(--ds-shadow-sm); }
.ds-pd-step b { font-size: 14px; font-weight: 700; color: var(--ds-text); }
.ds-pd-step small { font-size: 12.5px; line-height: 1.5; color: var(--ds-text-muted); }
.ds-pd-step-arrow { flex-shrink: 0; margin-top: 8px; color: var(--ds-border); font-size: 20px; }

/* --- Характеристики + Описание --- */
.ds-pd-details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; align-items: start; }
.ds-pd-specs-card, .ds-pd-desc-card {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm); padding: 26px; box-sizing: border-box; height: 100%;
}
.ds-pd-specs-card h2 { font-size: 19px; font-weight: 800; color: var(--ds-text); margin: 0 0 18px; }
.ds-pd-specs { display: flex; flex-direction: column; }
.ds-pd-spec-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--ds-border); font-size: 13.5px; }
.ds-pd-spec-row:last-child { border-bottom: none; }
.ds-pd-spec-row span { color: var(--ds-text-muted); }
.ds-pd-spec-row b { color: var(--ds-text); font-weight: 700; }
.ds-pd-spec-good { color: #16a34a !important; }

.ds-pd-desc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--ds-border); margin-bottom: 18px; }
.ds-pd-desc-tab {
  padding: 10px 4px; margin-right: 18px; border: none; background: transparent; border-bottom: 2px solid transparent;
  font-size: 13.5px; font-weight: 600; color: var(--ds-text-muted); cursor: pointer; font-family: 'Outfit', sans-serif; transition: all .15s;
}
.ds-pd-desc-tab:hover { color: var(--ds-text); }
.ds-pd-desc-tab.active { color: var(--ds-accent); border-bottom-color: var(--ds-accent); font-weight: 700; }
.ds-pd-desc-panel p { font-size: 13.5px; line-height: 1.7; color: var(--ds-text-soft); margin: 0 0 14px; }
.ds-pd-desc-panel p:last-child { margin-bottom: 0; }
.ds-pd-desc-panel p b { color: var(--ds-text); }

/* --- Баннер-предупреждение --- */
.ds-pd-notice {
  display: flex; align-items: flex-start; gap: 14px; margin-top: 32px; padding: 20px 22px;
  background: var(--ds-accent-soft); border: 1px solid rgba(74,92,255,.15); border-radius: var(--ds-radius-lg);
}
.ds-pd-notice-ic {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: var(--ds-surface); color: var(--ds-accent);
  display: flex; align-items: center; justify-content: center;
}
.ds-pd-notice b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ds-text); margin-bottom: 3px; }
.ds-pd-notice small { font-size: 13px; line-height: 1.5; color: var(--ds-text-soft); }

/* --- Отзывы --- */
.ds-pd-reviews-row { display: flex; gap: 18px; align-items: stretch; }
.ds-pd-reviews-score {
  flex: 0 0 180px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px;
  background: var(--ds-accent-soft); border-radius: var(--ds-radius-lg); padding: 20px;
}
.ds-pd-reviews-score b { font-size: 30px; font-weight: 800; color: var(--ds-text); }
.ds-pd-reviews-score small { font-size: 13px; color: var(--ds-text-muted); }
.ds-pd-reviews-count { margin-top: 4px; }
.ds-pd-reviews-slider { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ds-pd-reviews-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ds-pd-reviews-track::-webkit-scrollbar { display: none; }
.ds-pd-review-card {
  flex: 0 0 calc(33.333% - 11px); scroll-snap-align: start; box-sizing: border-box;
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  padding: 18px; box-shadow: var(--ds-shadow-sm); display: flex; flex-direction: column;
}
.ds-pd-review-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ds-pd-review-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--ds-accent-grad); color: #fff; font-size: 13px; font-weight: 700;
}
.ds-pd-review-who b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ds-text); }
.ds-pd-review-who small { font-size: 11.5px; color: var(--ds-text-muted); }
.ds-pd-review-card p { font-size: 13px; line-height: 1.55; color: var(--ds-text-soft); margin: 0; }
.ds-pd-reviews-nav { display: flex; gap: 8px; align-self: flex-end; }

.ds-pd-noreviews { font-size: 14px; color: var(--ds-text-soft); margin: 0 0 20px; }

/* Форма отзыва — разметку и обработку строит нативный comment_form() WordPress,
   здесь только оформление под общий дизайн. */
#review_form_wrapper { margin-top: 24px; }
/* wc-single-product.js на #rating всегда навешивает свой набор нестилизованных
   ссылок "N из 5 звёзд" (.hide() на select + вставка p.stars) — у нас уже есть
   свой select с оценками, поэтому глушим виджет Woo. !important обязателен:
   .hide() ставит инлайн-стиль display:none, обычный класс его не перебьёт. */
.ds-pd-review-form #respond p.stars { display: none !important; }
.ds-pd-review-form #rating { display: block !important; }
.ds-pd-review-form #reply-title,
.ds-pd-review-form .comment-reply-title { font-size: 20px; font-weight: 800; color: var(--ds-text); margin: 0 0 16px; display: block; }
.ds-pd-review-form p { margin: 0 0 14px; }
.ds-pd-review-form label { display: block; font-size: 13px; font-weight: 700; color: var(--ds-text); margin-bottom: 6px; }
.ds-pd-review-form label .required { color: #dc2626; }
.ds-pd-review-form input[type="text"],
.ds-pd-review-form input[type="email"],
.ds-pd-review-form select,
.ds-pd-review-form textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-sm); font-size: 14px; font-family: 'Outfit', sans-serif; color: var(--ds-text);
  background: var(--ds-surface); outline: none; transition: border-color .15s;
}
.ds-pd-review-form input[type="text"]:focus,
.ds-pd-review-form input[type="email"]:focus,
.ds-pd-review-form select:focus,
.ds-pd-review-form textarea:focus { border-color: var(--ds-accent); }
.ds-pd-review-form textarea { resize: vertical; }
.ds-pd-review-form #submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: var(--ds-radius-sm); border: none; cursor: pointer;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px; color: #fff;
  background: var(--ds-accent-grad); transition: all .2s;
}
.ds-pd-review-form #submit:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-lg); }
.ds-pd-review-form .comment-notes,
.ds-pd-review-form .must-log-in { font-size: 13px; color: var(--ds-text-soft); }
.ds-pd-review-form .must-log-in a { color: var(--ds-accent); }

/* --- Похожие товары + Также смотрят --- */
.ds-pd-related-row { margin-top: 48px; }
.ds-pd-related-head { margin-bottom: 18px; }
.ds-pd-related-head h2 { margin: 0; }
.ds-pd-rel-arrow {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--ds-border); background: var(--ds-surface);
  color: var(--ds-text-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s;
}
.ds-pd-rel-arrow:hover { border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-pd-rel-track { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.ds-pd-rel-track::-webkit-scrollbar { display: none; }
.ds-pd-rel-card {
  flex: 0 0 200px; text-decoration: none; color: inherit; background: var(--ds-surface); border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg); overflow: hidden; box-shadow: var(--ds-shadow-sm); transition: all .2s;
}
.ds-pd-rel-card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-lg); border-color: var(--ds-accent); }
.ds-pd-rel-img { position: relative; width: 100%; aspect-ratio: 1/1; background: var(--ds-surface-2); }
.ds-pd-rel-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-pd-rel-tag { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 3px 9px; border-radius: 999px; background: #0070d1; color: #fff; font-size: 10.5px; font-weight: 800; }
.ds-pd-rel-body { padding: 12px 12px 8px; }
.ds-pd-rel-body b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ds-text); margin-bottom: 6px; line-height: 1.3; }
.ds-pd-rel-body span { font-size: 14px; font-weight: 800; color: var(--ds-accent); }
.ds-pd-rel-actions { display: flex; gap: 6px; padding: 0 12px 12px; }

.ds-pd-also {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm); padding: 22px; box-sizing: border-box;
}
.ds-pd-also h2 { font-size: 16px; margin: 0 0 14px; }
.ds-pd-also a {
  display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 13.5px; font-weight: 600;
  color: var(--ds-text-soft); text-decoration: none; border-bottom: 1px solid var(--ds-border); transition: color .15s;
}
.ds-pd-also a:last-child { border-bottom: none; padding-bottom: 0; }
.ds-pd-also a:hover { color: var(--ds-accent); }
.ds-pd-also a svg { color: var(--ds-accent); flex-shrink: 0; }

/* --- Нижняя полоса доверия --- */

/* ===== Адаптив ===== */
@media (max-width: 1300px) {
  .ds-pd-includes-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .ds-pd-top { grid-template-columns: 1fr; }
  .ds-pd-details { grid-template-columns: 1fr; }
  .ds-pd-review-card { flex-basis: calc(50% - 8px); }
  .ds-pd-trust-row { grid-template-columns: repeat(2, 1fr); }
  .ds-pd-trust-card:nth-child(2n) { border-right: none; }
}
@media (max-width: 700px) {
  .ds-pd-includes-grid { grid-template-columns: repeat(2, 1fr); }
  .ds-pd-steps-row { flex-direction: column; }
  .ds-pd-step-arrow { display: none; }
  .ds-pd-reviews-row { flex-direction: column; }
  .ds-pd-reviews-score { flex-basis: auto; }
  .ds-pd-review-card { flex-basis: 85%; }
  .ds-pd-trust-row { grid-template-columns: 1fr; }
  .ds-pd-trust-card { border-right: none !important; border-bottom: 1px solid var(--ds-border); }
}

/* ============ product2.css (карточка товара v2, конфигуратор) ============ */
/* ============================================
   Карточка товара v2 — конфигуратор покупки, светлая тема, с нуля по референсу
   Использует общие светлые токены --ds-* из home.css
   ============================================ */

.ds-p2-body { background: var(--ds-bg) !important; color: var(--ds-text) !important; }

/* ===== Мини-хедер ===== */
.ds-p2-topbar { background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); }
.ds-p2-topbar-in { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.ds-p2-logo { font-size: 24px; font-weight: 900; letter-spacing: -1px; color: var(--ds-text); text-decoration: none; }
.ds-p2-logo span { background: var(--ds-accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ds-p2-back { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-text-soft); text-decoration: none; font-size: 13.5px; font-weight: 600; }
.ds-p2-back:hover { color: var(--ds-text); }

.ds-p2-wrap { padding-top: 22px; padding-bottom: 56px; }

/* ===== Крошки ===== */
.ds-p2-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ds-text-muted); margin-bottom: 20px; flex-wrap: wrap; }
.ds-p2-crumbs a { color: var(--ds-text-muted); text-decoration: none; }
.ds-p2-crumbs a:hover { color: var(--ds-accent); }
.ds-p2-crumbs b { color: var(--ds-text); font-weight: 600; }
.ds-p2-crumbs span { color: var(--ds-border); }

/* ===== Раскладка ===== */
.ds-p2-layout { display: grid; grid-template-columns: 460px 1fr 420px; gap: 28px; align-items: start; }

/* ===== Левая колонка: галерея ===== */
.ds-p2-gmain { position: relative; width: 100%; aspect-ratio: 1/1.02; border-radius: var(--ds-radius-lg); overflow: hidden; background: var(--ds-surface-2); }
.ds-p2-gmain img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-p2-trailer-btn {
  position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px; border: none; background: rgba(10,12,20,.6); backdrop-filter: blur(6px);
  color: #fff; font-size: 13px; font-weight: 700; font-family: 'Outfit', sans-serif; cursor: pointer; transition: background .15s;
}
.ds-p2-trailer-btn:hover { background: rgba(10,12,20,.8); }
.ds-p2-play { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ds-accent-grad); font-size: 8px; }

.ds-p2-thumbs { display: flex; gap: 8px; margin-top: 10px; }
.ds-p2-thumb, .ds-p2-thumb-more {
  flex: 1; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer;
  background: var(--ds-surface-2);
}
.ds-p2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-p2-thumb.active { border-color: var(--ds-accent); }
.ds-p2-thumb-more { display: flex; align-items: center; justify-content: center; color: var(--ds-text-muted); border: 2px solid var(--ds-border); transition: all .15s; }
.ds-p2-thumb-more:hover { border-color: var(--ds-accent); color: var(--ds-accent); }

.ds-p2-about {
  margin-top: 16px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  padding: 18px 20px; box-shadow: var(--ds-shadow-sm);
}
.ds-p2-about h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--ds-text); }
.ds-p2-about-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--ds-border); font-size: 13px; }
.ds-p2-about-row:last-child { border-bottom: none; padding-bottom: 0; }
.ds-p2-about-row span { display: flex; align-items: center; gap: 8px; color: var(--ds-text-muted); }
.ds-p2-about-row span svg { color: var(--ds-accent); flex-shrink: 0; }
.ds-p2-about-row b { color: var(--ds-text); font-weight: 600; }

/* ===== Центр: конфигуратор ===== */
.ds-p2-config h1 { font-size: 27px; font-weight: 800; color: var(--ds-text); margin: 0 0 10px; letter-spacing: -0.4px; }
.ds-p2-sub { font-size: 14px; line-height: 1.6; color: var(--ds-text-soft); margin: 0 0 26px; max-width: 600px; }

.ds-p2-step-head { display: flex; align-items: center; gap: 10px; margin: 26px 0 14px; }
.ds-p2-step-head:first-of-type { margin-top: 0; }
.ds-p2-step-n { width: 24px; height: 24px; font-size: 12px; }
.ds-p2-step-head h2 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ds-text); }

.ds-p2-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ds-p2-card {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius); background: var(--ds-surface); cursor: pointer; text-align: left; font-family: 'Outfit', sans-serif; transition: all .15s;
}
.ds-p2-card:hover { border-color: rgba(74,92,255,.4); }
.ds-p2-card.active { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.ds-p2-card-ic { width: 30px; height: 30px; border-radius: 9px; overflow: hidden; flex-shrink: 0; display: flex; }
.ds-p2-card-ic img { width: 100%; height: 100%; object-fit: cover; }
.ds-p2-card-tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ds-text); }
.ds-p2-card-tx small { font-size: 11.5px; color: var(--ds-text-muted); }
.ds-p2-card-check {
  position: absolute; right: 10px; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--ds-accent-grad);
  display: none; align-items: center; justify-content: center;
}
.ds-p2-card.active .ds-p2-card-check { display: flex; }
.ds-p2-card-check.sm { position: static; margin-left: 6px; width: 15px; height: 15px; display: none; }
.ds-p2-flag.active .ds-p2-card-check.sm { display: inline-flex; }

.ds-p2-flags { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-p2-flag {
  display: inline-flex; align-items: center; padding: 11px 16px; border: 1.5px solid var(--ds-border); border-radius: 10px;
  background: var(--ds-surface); color: var(--ds-text-soft); font-size: 13.5px; font-weight: 600; cursor: pointer;
  font-family: 'Outfit', sans-serif; transition: all .15s;
}
.ds-p2-flag:hover { border-color: rgba(74,92,255,.4); }
.ds-p2-flag.active { border-color: var(--ds-accent); background: var(--ds-accent-soft); color: var(--ds-text); }
.ds-p2-flag-more { gap: 6px; color: var(--ds-text-muted); }

.ds-p2-editions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ds-p2-edition { justify-content: space-between; }
.ds-p2-edition .ds-p2-card-tx small { color: var(--ds-accent); font-weight: 700; font-size: 13px; margin-top: 2px; display: block; }

.ds-p2-extra-row { display: flex; flex-direction: column; gap: 8px; }
.ds-p2-extra {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 1.5px solid var(--ds-border); border-radius: var(--ds-radius);
  background: var(--ds-surface); cursor: pointer; text-align: left; font-family: 'Outfit', sans-serif; transition: all .15s; width: 100%; box-sizing: border-box;
}
.ds-p2-extra:hover { border-color: rgba(74,92,255,.4); }
.ds-p2-extra-ic { font-size: 16px; flex-shrink: 0; }
.ds-p2-extra-tx { flex: 1; min-width: 0; }
.ds-p2-extra-tx b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ds-text); }
.ds-p2-extra-tx small { font-size: 12px; color: var(--ds-text-muted); }
.ds-p2-extra svg { color: var(--ds-text-muted); flex-shrink: 0; }

.ds-p2-trust-row { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ds-border); }
.ds-p2-trust { flex: 1; min-width: 180px; display: flex; align-items: flex-start; gap: 10px; }
.ds-p2-trust-ic {
  width: 32px; height: 32px; border-radius: 9px; background: var(--ds-accent-soft); color: var(--ds-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px;
}
.ds-p2-trust b { display: block; font-size: 13px; font-weight: 700; color: var(--ds-text); }
.ds-p2-trust small { font-size: 11.5px; color: var(--ds-text-muted); }

/* ===== Правая колонка: итог заказа ===== */
.ds-p2-order {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow); padding: 22px; box-sizing: border-box; position: sticky; top: 20px;
}
.ds-p2-order-head { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.ds-p2-order-head img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.ds-p2-order-head b { display: block; font-size: 14.5px; font-weight: 800; color: var(--ds-text); line-height: 1.25; }
.ds-p2-order-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ds-p2-order-badges span {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: var(--ds-surface-2);
  border: 1px solid var(--ds-border); font-size: 11px; font-weight: 600; color: var(--ds-text-soft);
}
.ds-p2-badge-purple { background: rgba(139,61,245,.1) !important; border-color: rgba(139,61,245,.25) !important; color: var(--ds-accent-2) !important; }

.ds-p2-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ds-text); margin-bottom: 8px; }
.ds-p2-info-dot { font-size: 11px; color: var(--ds-text-muted); cursor: help; }
.ds-p2-input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid var(--ds-border); border-radius: 10px;
  font-size: 13px; font-family: inherit; outline: none; color: var(--ds-text); background: var(--ds-surface-2);
}
.ds-p2-input::placeholder { color: var(--ds-text-muted); }
.ds-p2-input:focus { border-color: var(--ds-accent); }
.ds-p2-hint { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ds-text-muted); }

.ds-p2-pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ds-p2-pay {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 10px; border: 1.5px solid var(--ds-border);
  border-radius: 10px; background: var(--ds-surface-2); cursor: pointer; font-family: 'Outfit', sans-serif; transition: all .15s;
}
.ds-p2-pay:hover { border-color: rgba(74,92,255,.4); }
.ds-p2-pay.active { border-color: var(--ds-accent); background: var(--ds-accent-soft); }
.ds-p2-pay svg { color: var(--ds-accent); }
.ds-p2-pay-coins { font-size: 13px; color: var(--ds-accent); letter-spacing: 1px; }
.ds-p2-pay b { font-size: 12.5px; font-weight: 700; color: var(--ds-text); }
.ds-p2-pay small { font-size: 10.5px; color: var(--ds-text-muted); }

.ds-p2-other-pay {
  width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 12px 14px;
  border: 1.5px solid var(--ds-border); border-radius: 10px; background: var(--ds-surface-2); color: var(--ds-text-soft);
  font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.ds-p2-other-pay:hover { border-color: rgba(74,92,255,.4); }
.ds-p2-other-pay span { display: flex; align-items: center; gap: 6px; color: var(--ds-text); }
.ds-p2-other-pay small { color: var(--ds-text-muted); font-weight: 500; }
.ds-p2-other-pay svg:last-child { margin-left: auto; }

.ds-p2-promo-row { display: flex; gap: 8px; }
.ds-p2-promo-row .ds-p2-input { flex: 1; }
.ds-p2-promo-btn {
  padding: 0 18px; border-radius: 10px; border: 1.5px solid var(--ds-border); background: var(--ds-surface-2);
  color: var(--ds-text); font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: 'Outfit', sans-serif; transition: all .15s;
}
.ds-p2-promo-btn:hover { border-color: var(--ds-accent); color: var(--ds-accent); }

.ds-p2-sum-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font-size: 13px; color: var(--ds-text-soft); }
.ds-p2-sum-row .ds-p2-info-dot { margin-left: 3px; }
.ds-p2-bonus { color: #34d399; font-weight: 700; }

.ds-p2-total-row { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ds-border); font-size: 14px; color: var(--ds-text-soft); }
.ds-p2-total-row b { font-size: 22px; font-weight: 800; color: var(--ds-text); }

.ds-p2-buy-btn {
  width: 100%; margin-top: 18px; padding: 15px; border: none; border-radius: var(--ds-radius-sm); background: var(--ds-accent-grad);
  color: #fff; font-size: 15px; font-weight: 700; font-family: 'Outfit', sans-serif; cursor: pointer; transition: filter .15s; box-shadow: var(--ds-shadow-lg);
}
.ds-p2-buy-btn:hover { filter: brightness(1.08); }

.ds-p2-legal { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--ds-text-muted); }
.ds-p2-legal svg { color: #34d399; flex-shrink: 0; margin-top: 2px; }
.ds-p2-legal a { color: var(--ds-text-soft); text-decoration: underline; }
.ds-p2-legal a:hover { color: var(--ds-accent); }

/* ===== Скриншоты ===== */
.ds-p2-screens { margin-top: 44px; }
.ds-p2-screens-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.ds-p2-screens-head h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--ds-text); }
.ds-p2-screens-all { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ds-text-soft); text-decoration: none; }
.ds-p2-screens-all:hover { color: var(--ds-accent); }
.ds-p2-screens-track { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.ds-p2-screens-track::-webkit-scrollbar { display: none; }
.ds-p2-screens-track img { flex: 0 0 260px; aspect-ratio: 16/9; border-radius: var(--ds-radius); object-fit: cover; background: var(--ds-surface-2); }
.ds-p2-screens-nav { display: flex; gap: 8px; margin-top: 14px; }
.ds-p2-screens-nav button {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--ds-border); background: var(--ds-surface);
  color: var(--ds-text-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s;
}
.ds-p2-screens-nav button:hover { border-color: var(--ds-accent); color: var(--ds-accent); }

/* ===== Мини-подвал ===== */
.ds-p2-footer { background: var(--ds-surface); border-top: 1px solid var(--ds-border); margin-top: 56px; }
.ds-p2-footer-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px; }
.ds-p2-footer-logo { font-size: 18px; font-weight: 900; color: var(--ds-text); }
.ds-p2-footer-logo span { background: var(--ds-accent-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ds-p2-footer-copy { font-size: 12px; color: var(--ds-text-muted); }
.ds-p2-footer-legal { display: flex; gap: 16px; }
.ds-p2-footer-legal a { font-size: 12px; color: var(--ds-text-muted); text-decoration: none; }
.ds-p2-footer-legal a:hover { color: var(--ds-text-soft); }

/* ===== Адаптив ===== */
@media (max-width: 1300px) {
  .ds-p2-layout { grid-template-columns: 400px 1fr 380px; gap: 20px; }
}
@media (max-width: 1100px) {
  .ds-p2-layout { grid-template-columns: 1fr; }
  .ds-p2-order { position: static; }
  .ds-p2-cards, .ds-p2-editions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ds-p2-cards, .ds-p2-editions, .ds-p2-pay-grid { grid-template-columns: 1fr; }
  .ds-p2-trust-row { flex-direction: column; gap: 14px; }
}