:root {
  /* ── ТОКЕНЫ: меняйте под товар ── */
  --accent: #7000ff; /* главный цвет (кнопки, акценты) */
  --accent-ink: #ffffff; /* текст на кнопках */
  --accent-soft: #efe4ff; /* мягкая подложка акцента */
  --pop: #b5ff3d; /* «кислотный» цвет стикеров/цен */
  --bg: #efeef4; /* фон страницы */
  --card: #ffffff; /* фон ячеек bento */
  --card-dark: #151221; /* тёмная ячейка */
  --ink: #151221; /* основной текст */
  --muted: #6e6a7c; /* вторичный текст */
  --r: 26px; /* радиус ячеек */
  --gap: 12px; /* шаг сетки между ячейками */
  --pad: 40px; /* боковые поля страницы на десктопе (макет 1440) */
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65; /* базовый воздух между строками */
  -webkit-font-smoothing: antialiased;
  padding-bottom: 92px; /* место под липкую кнопку (только мобайл) */
}
/* На мобильном контент идёт в край экрана: боковых полей нет,
   сверху зазора тоже нет — галерея встаёт вплотную к хедеру.
   Контейнер с полями включается только на ≥760px. */
/* Макет 1440: контейнер 1440px, поля по краям 40px → контент 1360px */
.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 72px 0 0;
}
@media (min-width: 760px) {
  .wrap {
    padding: 100px var(--pad) var(--gap);
  }
}

/* ── ХЕДЕР: липкий, стеклянный (по образцу shopland.uz) ── */
.hdr {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(21, 18, 33, 0.85);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0 0 var(--r) var(--r);
  box-shadow: 0 4px 16px rgba(21, 18, 33, 0.15);
}
@media (min-width: 760px) {
  .hdr {
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    /* Ширина шапки = ширине контента .wrap (1440px минус её боковые
       поля var(--pad)), иначе шапка выступает за края сетки. */
    width: calc(100% - var(--pad) * 2);
    max-width: calc(1440px - var(--pad) * 2);
    background: rgba(21, 18, 33, 0.85);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r);
    box-shadow:
      0 16px 44px rgba(21, 18, 33, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      inset 0 -1px 0 rgba(21, 18, 33, 0.5);
  }
}
.hdr-in {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 6px 20px;
}
.hdr-logo {
  display: flex;
  align-items: center;
}
.hdr-logo img {
  height: 30px;
  width: auto;
  display: block;
}
/* Языковой переключатель в стиле ShopLand (тёмная тема) */
.lang {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 92px;
  height: 38px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
  isolation: isolate;
}
.lang::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.4s cubic-bezier(0.2, 0.88, 0.25, 1.08), box-shadow 0.32s ease;
}
.lang:has(.lang-btn[data-lang="uz"].on)::before {
  transform: translateX(100%);
}
.lang-btn {
  border: none;
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
  padding: 0;
  border-radius: 999px;
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}
.lang-btn.on {
  color: #ffffff;
  transform: scale(1.03);
}
.lang-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
h1,
h2,
.display {
  font-family: "Unbounded", sans-serif;
  letter-spacing: -0.01em;
}

/* ── BENTO СЕТКА ── */
/* margin-top:0 везде: на мобильном галерея встык с хедером,
   на ПК зазор задаёт только padding у .wrap (12px, а не 24px) */
.bento {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  margin-top: 0;
}
@media (min-width: 760px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
  }
  .c-hero {
    grid-column: span 6;
  }
  .c-3 {
    grid-column: span 3;
  }
  .c-2 {
    grid-column: span 2;
  }
  .c-4 {
    grid-column: span 4;
  }
  .c-6 {
    grid-column: span 6;
  }
}
/* Мобильный: ячейки во всю ширину экрана, но со скруглёнными углами —
   карточки мягко подрезаются об край. Поля только внутренние. */
.cell {
  background: var(--card);
  border-radius: var(--r);
  padding: 26px 20px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 760px) {
  .cell {
    padding: 26px;
  }
}
/* Мобильный: карточки мягко подрезаются об край. Поля только внутренние. */
.c-hero {
  border-radius: var(--r);
}

/* ── ХИРО ── */
.hero {
  display: grid;
  gap: 20px;
  padding: 0 20px 26px;
}
@media (min-width: 760px) {
  .hero {
    /* Галерея слева отдельной колонкой (потолок 520px), текст справа на
       весь остаток. Перестановку делает order у .slider.
       Галерея намеренно широкая: при узкой колонке справа оставалось
       пустое поле, которое нечем занять. */
    grid-template-columns: minmax(300px, 520px) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
    padding: 34px;
  }
  /* Снимаем базовое ограничение в 44ch: абзац жался к левому краю своей
     колонки и справа зияла дыра. Колонка и так не шире ~717px (≈70
     символов), так что строка остаётся читаемой. */
  .hero .sub {
    max-width: none;
  }
}
/* h1 теперь первый в хиро — верхнего отступа не нужно */
.hero h1 {
  font-size: clamp(26px, 5.4vw, 44px);
  font-weight: 800;
  line-height: 1.18;
  margin: 0 0 14px;
}
.hero .sub {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 44ch;
}
/* нижний отступ 24px — держит воздух перед кнопкой вместо убранной
   строки «Оплата при получении · Доставка · Возврат» */
/* Цена столбиком: новая цена сверху, ниже старая цена + плашка −50%
   (order:2, inline). Раньше плашка была absolute над ценой и при смене
   языка (сум → so'm шире) наезжала на цену — теперь стабильно. */
.price-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 24px 0;
}
.price-new {
  font-family: "Unbounded";
  font-weight: 900;
  font-size: clamp(28px, 5vw, 40px);
}
.price-cut {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.price-old {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 18px;
}
/* −50% сидит в углу НАД зачёркнутой ценой */
.price-off {
  order: 2;
  background: var(--pop);
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  padding: 6px 11px;
  border-radius: 999px;
  transform: rotate(-3deg);
  white-space: nowrap;
}
/* Все кнопки на сайте — одна высота (56px), один кегль и радиус.
   min-height + нулевой вертикальный padding держат высоту ровной
   независимо от длины подписи; nowrap не даёт разъехаться на 2 строки. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.2;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
  width: 100%;
  box-shadow: 0 10px 26px
    color-mix(in srgb, var(--accent) 35%, transparent);
}
@media (min-width: 760px) {
  .btn {
    width: auto;
  }
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
/* Лого Uzum в кнопке. Сам логотип фиолетовый (#7000FF) — тот же цвет,
   что и кнопка, поэтому обязательно белый кружок-подложка. */
.btn-ico {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-ico img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  display: block;
}

/* фото-плейсхолдер внутри слайда: замените на <img> */
.ph {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(120% 120% at 20% 10%, var(--accent-soft), #fff 60%),
    var(--accent-soft);
  border: 2px dashed color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  padding: 16px;
}

/* ── СЛАЙДЕР ФОТО ТОВАРА (3:4) ── */
/* Мобильный: фото во весь экран — слайдер выходит за боковые
   поля хиро (-20px) и прижат к верху карточки. */
.slider {
  position: relative;
  order: -1;
  width: auto;
  max-width: none;
  margin: 0 -20px;
}
@media (min-width: 760px) {
  .slider {
    order: -1; /* галерея слева, текст справа */
    max-width: 520px;
    width: 100%;
    margin: 0;
  }
}
.slider-view {
  overflow: hidden;
  border-radius: 0;
}
@media (min-width: 760px) {
  .slider-view {
    border-radius: 20px;
  }
}
/* НАТИВНЫЙ скролл со snap — на телефоне листается пальцем с настоящей
   инерцией и «резинкой» на краях (это делает сам браузер, а не JS).
   Никаких transform/transition — они и давали «деревянность».
   Полоса прокрутки спрятана, кадры прилипают по центру. */
.slider-track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none; /* Firefox */
}
.slider-track::-webkit-scrollbar {
  display: none; /* WebKit */
}
.slide {
  flex: 0 0 100%;
  aspect-ratio: 3/4;
  position: relative;
  scroll-snap-align: center;
  scroll-snap-stop: always; /* не проскакивать по несколько кадров */
}
/* радиус задаёт .slider-view (overflow:hidden) — у картинки его нет,
   иначе на мобильном вылезают скруглённые углы в край экрана */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}
/* счётчик кадров «1/4» — сразу видно, что это слайдер */
.slider-count {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: rgba(21, 18, 33, 0.65);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}
/* стрелки — минималистичные: меньше, без тени и блюра,
   полупрозрачные; на фото не спорят с картинкой */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    opacity 0.15s ease;
}
.slider-arrow:hover {
  background: rgba(255, 255, 255, 0.85);
}
.slider-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.slider-arrow.prev {
  left: 8px;
}
.slider-arrow.next {
  right: 8px;
}
/* точки */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.slider-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: #cfcbdd;
  padding: 0;
  transition: all 0.25s ease;
}
.slider-dots button.on {
  width: 26px;
  background: var(--accent);
}
.slider-dots button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .slider-track {
    scroll-behavior: auto;
  }
}

/* ── ВЫГОДЫ ── */
/* без капса и разрядки: строчными и полегче читается спокойнее */
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent);
  margin-bottom: 10px;
}
.cell h2 {
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 600;
  line-height: 1.32;
  margin-bottom: 12px;
}
.cell p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.big-ico {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 14px;
  display: block;
}

/* тёмная ячейка со статистикой */
.dark {
  background: var(--card-dark);
  color: #fff;
}
.dark p {
  color: #b9b4c7;
}
.stat {
  font-family: "Unbounded";
  font-weight: 900;
  font-size: clamp(34px, 6vw, 52px);
  color: var(--pop);
  line-height: 1;
}
.stat-label {
  font-size: 14px;
  color: #b9b4c7;
  margin-top: 8px;
}

/* ── ВИДЕО-ПЛЕЕР ── */
/* aspect-ratio = родные пропорции ролика (1080×1440 = 3:4), padding нет —
   видео заполняет ячейку целиком, без рамки и без обрезки по бокам.
   flex-column + flex:1 у фрейма: если соседняя ячейка в ряду выше,
   фрейм растянется на всю высоту, а не оставит тёмную полосу. */
.video-cell {
  padding: 0;
  background: var(--card-dark);
  display: flex;
  flex-direction: column;
}
.video-frame {
  position: relative;
  aspect-ratio: 3/4;
  width: 100%;
  flex: 1 0 auto;
  overflow: hidden;
  background: var(--card-dark);
}
.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

/* Ячейка с характеристиками справа от видео. Высоту ряда задаёт вертикальное
   видео, а текста рядом мало — раньше снизу зияла пустота. Теперь список
   характеристик растягивается на весь остаток высоты и разделён линиями:
   выходит аккуратная таблица характеристик, а не провал под текстом.
   Решение самонастраивающееся — подойдёт под любую высоту видео. */
@media (min-width: 760px) {
  .video-cell + .cell {
    display: flex;
    flex-direction: column;
  }
  .video-cell + .cell .trust-list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    flex: 1;
    gap: 0;
    margin-top: 22px;
  }
  .video-cell + .cell .trust-item {
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid rgba(21, 18, 33, 0.08);
  }
}

/* LIVE-плашка (используется в плавающей мини-трансляции) */
.live-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ff2d55;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(255, 45, 85, 0.4);
  pointer-events: none;
}
.live-badge i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.7);
  }
}

/* ── ПЛАВАЮЩАЯ МИНИ-ТРАНСЛЯЦИЯ ──
   Фиксирована внизу справа, едет за скроллом, крутится всегда.
   z-index 60 — выше липкой кнопки (50); .lifted поднимает окошко
   над ней, когда она выезжает, иначе они перекрываются. */
.live-pip {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 60;
  width: 104px;
  aspect-ratio: 3/4;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card-dark);
  box-shadow: 0 10px 30px rgba(21, 18, 33, 0.35);
  cursor: pointer;
  transition:
    bottom 0.3s ease,
    opacity 0.25s ease,
    transform 0.25s ease;
}
.live-pip.lifted {
  bottom: calc(88px + env(safe-area-inset-bottom));
}
.live-pip.hidden {
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  pointer-events: none;
}
.live-pip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.pip-close {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 4;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(21, 18, 33, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 10px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pip-close:hover {
  background: rgba(21, 18, 33, 0.85);
}
.pip-close:focus-visible {
  outline: 2px solid var(--pop);
  outline-offset: 2px;
}
@media (min-width: 760px) {
  .live-pip {
    width: 132px;
    right: 16px;
  }
}

/* ── ОКНО ВИДЕО (открывается кликом по мини-трансляции) ── */
.vmodal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(21, 18, 33, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: vmodalIn 0.2s ease;
}
/* [hidden] сам по себе слабее класса .vmodal — гасим явно */
.vmodal[hidden] {
  display: none;
}
@keyframes vmodalIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ширину ограничиваем через высоту экрана, чтобы кадр 3:4 влезал целиком */
.vmodal-box {
  position: relative;
  width: min(100%, calc(82vh * 3 / 4), 420px);
}
.vmodal-box video {
  width: 100%;
  aspect-ratio: 3/4;
  display: block;
  border-radius: 18px;
  background: #000;
}
.vmodal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.vmodal-close:focus-visible {
  outline: 3px solid var(--pop);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .vmodal {
    animation: none;
  }
}

/* большая кнопка play — видна только на паузе */
.video-big-play {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.video-frame.is-paused .video-big-play {
  opacity: 1;
  pointer-events: auto;
}
.video-big-play:hover {
  transform: scale(1.06);
}
.video-big-play:focus-visible {
  outline: 3px solid var(--pop);
  outline-offset: 3px;
}

/* панель управления */
.video-ctrl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 28px 12px 12px;
  background: linear-gradient(
    to top,
    rgba(21, 18, 33, 0.85),
    transparent
  );
}
.vc-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.vc-btn:hover {
  background: rgba(255, 255, 255, 0.32);
}
.vc-btn:focus-visible {
  outline: 2px solid var(--pop);
  outline-offset: 2px;
}
.vc-time {
  flex: 0 0 auto;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* перемотка: --p обновляется из JS и красит пройденную часть */
.vc-seek {
  --p: 0%;
  flex: 1 1 auto;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(
    to right,
    var(--pop) var(--p),
    rgba(255, 255, 255, 0.32) var(--p)
  );
}
.vc-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.vc-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: none;
  cursor: pointer;
}
.vc-seek:focus-visible {
  outline: 2px solid var(--pop);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .live-badge i {
    animation: none;
  }
}

/* ── ОТЗЫВЫ ── */
.review {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stars {
  color: #ffb020;
  font-size: 15px;
  letter-spacing: 2px;
}
.review q {
  font-size: 15px;
  line-height: 1.7;
  quotes: "«" "»";
}
/* Шапка отзыва: автор слева, звёзды справа в одной строке. */
.rev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rev-head .stars {
  flex: 0 0 auto;
}
.review .who {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ava {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--accent);
  font-size: 14px;
}
.who b {
  font-size: 14px;
  font-weight: 600;
  display: block;
}
.who span {
  font-size: 12px;
  color: var(--muted);
}

/* ── ЖИВЫЕ ФОТО В ОТЗЫВАХ ──
   Миниатюры под текстом отзыва. Клик открывает просмотрщик (см. .pmodal).
   Если файла ещё нет, миниатюру убирает JS — вёрстка не разъезжается. */
.rev-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rev-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--accent-soft);
}
.rev-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.18s ease;
}
.rev-thumb:hover img {
  transform: scale(1.07);
}
.rev-thumb:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Просмотрщик фото. Оформление намеренно повторяет окно видео (.vmodal),
   чтобы на странице не появился второй визуальный язык. */
.pmodal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(21, 18, 33, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: vmodalIn 0.2s ease;
}
.pmodal[hidden] {
  display: none;
}
.pmodal-box {
  position: relative;
  width: min(100%, 620px);
}
.pmodal-box img {
  width: 100%;
  max-height: 84vh;
  object-fit: contain;
  display: block;
  border-radius: 18px;
  background: #000;
}
.pmodal-close,
.pmodal-nav {
  position: absolute;
  z-index: 2;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.pmodal-close {
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  font-size: 13px;
}
.pmodal-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  font-size: 22px;
}
.pmodal-nav.prev {
  left: 10px;
}
.pmodal-nav.next {
  right: 10px;
}
.pmodal-close:focus-visible,
.pmodal-nav:focus-visible {
  outline: 3px solid var(--pop);
  outline-offset: 2px;
}
.pmodal-count {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .pmodal {
    animation: none;
  }
}

/* ── ДОВЕРИЕ / КАК ЗАКАЗАТЬ ── */
.trust-list {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}
@media (min-width: 760px) {
  .trust-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.trust-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.trust-item .tick {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pop);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
}
.trust-item b {
  font-size: 14.5px;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}
.trust-item span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.steps {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  counter-reset: step;
}
@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}
.step {
  background: var(--accent-soft);
  border-radius: 18px;
  padding: 18px;
  counter-increment: step;
}
.step::before {
  content: counter(step);
  font-family: "Unbounded";
  font-weight: 900;
  font-size: 22px;
  color: var(--accent);
  display: block;
  margin-bottom: 8px;
}
.step b {
  font-size: 14.5px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.step span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* ── FAQ ── */
details {
  border-bottom: 1px solid #e4e2ec;
  padding: 14px 0;
}
details:last-of-type {
  border: none;
}
summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.5;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
summary::after {
  content: "+";
  font-family: "Unbounded";
  font-weight: 700;
  color: var(--accent);
}
details[open] summary::after {
  content: "–";
}
details p {
  margin-top: 10px;
}

/* ── ФИНАЛЬНЫЙ CTA ── */
/* боковой padding = как у остальных ячеек, иначе кнопка съезжает
   относительно кнопки в хиро */
.final {
  background: var(--accent);
  color: var(--accent-ink);
  text-align: center;
  padding: 44px 20px;
}
@media (min-width: 760px) {
  .final {
    padding: 44px 26px;
  }
}
.final h2 {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}
.final p {
  color: color-mix(in srgb, var(--accent-ink) 80%, transparent);
  margin-bottom: 24px;
}
.final .btn {
  background: var(--pop);
  color: var(--ink);
  box-shadow: none;
}
.timer {
  font-family: "Unbounded";
  font-weight: 700;
  font-size: 15px;
  background: rgba(0, 0, 0, 0.18);
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

/* ── ЛИПКАЯ КНОПКА (только мобайл) ──
   На ПК её нет: во всю ширину экрана она выглядела полосой.
   Там достаточно кнопок в хиро и в финальном блоке. */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid #e4e2ec;
  padding: 12px max(20px, env(safe-area-inset-left))
    max(12px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  transform: translateY(110%);
  transition: transform 0.3s ease;
}
.sticky-cta.show {
  transform: translateY(0);
}
.sticky-cta .p {
  line-height: 1.1;
}
.sticky-cta .p b {
  font-family: "Unbounded";
  font-size: 17px;
  display: block;
}
.sticky-cta .p s {
  font-size: 12px;
  color: var(--muted);
}
.sticky-cta .btn {
  flex: 1;
  min-height: 52px;
  padding: 0 18px;
  font-size: 15px;
  width: auto;
}
/* ПК: липкой кнопки нет → снимаем и запас под неё у body,
   и подъём мини-трансляции (её больше не над чем поднимать) */
@media (min-width: 760px) {
  .sticky-cta {
    display: none;
  }
  body {
    padding-bottom: 0;
  }
  .live-pip.lifted {
    bottom: 16px;
  }
}

footer {
  padding: 26px 12px 10px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

/* появление при скролле */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn {
    transition: none;
  }
}