/* =======================================================================
   RE:VINYL v2 — треклисты, мгновенное превью, окно товара на телефоне,
   новый первый экран «Лампа и вертушка», шоурум на Китай-городе.
   ======================================================================= */

/* ----------------------------- ТРЕКЛИСТ ----------------------------- */
.modal__tracks:not([hidden]) {
  display: block;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.tl__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.tl__head b { font-size: 15px; }
.tl__sum { font-size: 12.5px; color: var(--paper-mute); }
.tl__color {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--paper-dim);
}
.tl__color i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--line);
  position: relative;
}
.tl__color i::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--surface); }

.tl__side + .tl__side { margin-top: 12px; }
.tl__side-name {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 4px 6px;
  font-size: 12.5px;
  color: var(--paper-mute);
}
.tl__side-name b {
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.tl__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.tl__track {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr auto 28px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 6px 8px 8px;
  border-radius: 10px;
  text-align: left;
  color: var(--paper);
  overflow: hidden;
  transition: background 0.2s;
}
.tl__track:hover { background: rgba(var(--tint-rgb), 0.06); }
.tl__n { font-size: 11.5px; font-weight: 600; color: var(--paper-mute); font-variant-numeric: tabular-nums; }
.tl__t { font-size: 13.5px; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl__d { font-size: 12px; color: var(--paper-mute); font-variant-numeric: tabular-nums; }
.tl__note { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--paper-mute); }

/* кнопка-проигрыватель: треугольник → загрузка → пауза с кольцом прогресса */
.tl__play,
.track__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    conic-gradient(var(--acid-text) calc(var(--p, 0) * 360deg), transparent 0) border-box;
}
.tl__play::before,
.track__play::before {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.tl__play::after {
  content: "";
  position: relative;
  width: 0;
  height: 0;
  margin-left: 2px;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
.tl__track.is-playing,
.track.is-playing { background: rgba(247, 148, 30, 0.08); }
html[data-theme="light"] .tl__track.is-playing,
html[data-theme="light"] .track.is-playing { background: #f2f9dc; }
.tl__track.is-playing .tl__play::after {
  width: 8px;
  height: 10px;
  margin: 0;
  border: 0;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}
.tl__track.is-loading .tl__play::after,
.track.is-loading .track__play svg { opacity: 0; }
.tl__track.is-loading .tl__play,
.track.is-loading .track__play {
  background: conic-gradient(var(--acid-text) 0 25%, transparent 0) border-box;
  animation: spin 0.7s linear infinite;
}
.track__play > svg { position: relative; z-index: 1; }
.track.is-playing .track__play svg { opacity: 0; }
.track.is-playing .track__play::after {
  content: "";
  position: relative;
  z-index: 1;
  width: 8px;
  height: 10px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

/* мини-плеер фильма */
.film-player__now { display: grid; gap: 2px; min-width: 0; }
.film-player__now i { font-style: normal; font-size: 11.5px; color: var(--paper-mute); }
.film-player__now b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film-player:not(.is-live) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.film-player__full {
  flex: none;
  font-size: 12.5px;
  color: var(--paper-dim);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

/* -------------------- ОКНО ТОВАРА НА ТЕЛЕФОНЕ: на весь экран -------------------- */
@media (max-width: 767px) {
  .modal { align-items: stretch; padding: 0; }
  .modal__card {
    height: 100%;
    max-height: none;
    border-radius: 0;
    border-top: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(24px);
  }
  .modal__media {
    flex: none;
    aspect-ratio: 1 / 1;
    max-height: 52svh;
    width: 100%;
  }
  .modal__info { padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
  .modal__close {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    right: 12px;
    z-index: 10;
  }
  /* цена и кнопка всегда под пальцем */
  .modal__buy {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 16px -18px 0;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -12px 24px -16px rgba(var(--shade-rgb), 0.5);
  }
  html[data-theme="light"] .modal__buy { background: #fff; }
}

/* =======================================================================
   ПЕРВЫЙ ЭКРАН «ЛАМПА И ВЕРТУШКА»
   Тёплый свет ламп накаливания, стена пластинок, дерево и кожа.
   Одна сцена при загрузке: свет разгорается → заголовок → тонарм на диск.
   Сцена тёмная в обеих темах: это комната, а не поверхность сайта.
   ======================================================================= */
.hero2 {
  --amber: #f3a54a;
  --amber-soft: rgba(243, 165, 74, 0.32);
  --warm-white: #f4ece2;
  --room: #140e0a;
  position: relative;
  isolation: isolate;
  min-height: min(100svh, 880px);
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 36px) var(--pad) 72px;
  overflow: hidden;
  background: var(--room);
  color: var(--warm-white);
}
.hero2__scene { position: absolute; inset: 0; z-index: -1; }
.hero2__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
  filter: sepia(0.35) saturate(1.15) contrast(1.05) brightness(0.5);
  transform: scale(1.04);
  animation: lampOn 1.8s cubic-bezier(0.3, 0.6, 0.2, 1) both;
}
@keyframes lampOn {
  0% { filter: sepia(0.6) saturate(0.6) brightness(0.06); transform: scale(1.1); }
  35% { filter: sepia(0.5) saturate(0.9) brightness(0.32); }
  45% { filter: sepia(0.5) saturate(0.9) brightness(0.22); }
  100% { filter: sepia(0.35) saturate(1.15) contrast(1.05) brightness(0.5); transform: scale(1.04); }
}
/* свет лампы справа сверху */
.hero2__lamp {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 46% at 74% 26%, var(--amber-soft), transparent 70%),
    radial-gradient(22% 26% at 74% 22%, rgba(255, 214, 150, 0.22), transparent 70%);
  mix-blend-mode: screen;
  animation: lampGlow 1.8s ease-out both;
}
@keyframes lampGlow { 0%, 30% { opacity: 0; } 100% { opacity: 1; } }
/* затемнение под текстом и мягкий переход в страницу */
.hero2__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(20, 14, 10, 0.94) 0%, rgba(20, 14, 10, 0.72) 38%, rgba(20, 14, 10, 0.18) 70%, rgba(20, 14, 10, 0.35) 100%),
    linear-gradient(180deg, rgba(20, 14, 10, 0.55) 0%, transparent 22%, transparent 70%, var(--room) 100%);
}

.hero2__inner {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
@media (min-width: 960px) {
  .hero2__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.hero2__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 13.5px;
  color: rgba(244, 236, 226, 0.78);
  animation: riseIn 0.8s 0.5s var(--ease-out) both;
}
.hero2__bulb {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(243, 165, 74, 0.18), 0 0 18px 4px rgba(243, 165, 74, 0.55);
}
.hero2__title {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(42px, 7.4vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--warm-white);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero2__line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero2__line > span { display: inline-block; animation: lineUp 0.9s var(--ease-out) both; }
.hero2__line:nth-child(1) > span { animation-delay: 0.35s; }
.hero2__line:nth-child(2) > span { animation-delay: 0.5s; }
.hero2__line:nth-child(3) > span { animation-delay: 0.65s; }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero2__sub {
  max-width: 46ch;
  margin-top: 24px;
  font-size: clamp(15px, 1.25vw, 17.5px);
  line-height: 1.6;
  color: rgba(244, 236, 226, 0.84);
  animation: riseIn 0.8s 0.9s var(--ease-out) both;
}
.hero2__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
  animation: riseIn 0.8s 1.05s var(--ease-out) both;
}
.hero2__ghost {
  color: var(--warm-white);
  border: 1px solid rgba(244, 236, 226, 0.36);
  background: rgba(244, 236, 226, 0.06);
}
.hero2__ghost:hover { border-color: var(--amber); color: var(--amber); background: rgba(243, 165, 74, 0.08); }
.hero2__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 36px;
  margin: 40px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid rgba(244, 236, 226, 0.16);
  animation: riseIn 0.8s 1.2s var(--ease-out) both;
}
.hero2__facts li { display: grid; gap: 2px; }
.hero2__facts b { font-family: var(--ff-display); font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--warm-white); }
.hero2__facts span { font-size: 12.5px; color: rgba(244, 236, 226, 0.62); }

/* ---------------------------- проигрыватель ---------------------------- */
.hero2__deck { display: grid; place-items: center; animation: riseIn 1s 0.6s var(--ease-out) both; }
.deck {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1.18 / 1;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 40%),
    repeating-linear-gradient(92deg, #3a2618 0 6px, #42291a 6px 9px, #352214 9px 15px),
    #3a2618;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 180, 0.18),
    inset 0 -14px 30px rgba(0, 0, 0, 0.45),
    0 40px 70px -30px rgba(0, 0, 0, 0.85),
    0 0 120px -20px rgba(243, 165, 74, 0.25);
}
.deck__platter {
  position: absolute;
  left: 7%;
  top: 9%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #1c1a18 0 66%, #6f665c 66.5% 68%, #2a2725 68.5%);
  box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.8);
}
.deck__record {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background:
    conic-gradient(from 20deg, rgba(255, 255, 255, 0.0) 0deg, rgba(255, 230, 200, 0.16) 30deg, rgba(255, 255, 255, 0) 60deg, rgba(255, 255, 255, 0) 180deg, rgba(255, 230, 200, 0.12) 210deg, rgba(255, 255, 255, 0) 240deg),
    repeating-radial-gradient(circle, #121110 0 1.1px, #1b1917 1.1px 2.6px);
  animation: spinUp 1.4s 2.1s cubic-bezier(0.5, 0, 0.75, 0) both, spin 1.8s 3.5s linear infinite;
}
/* блик стоит на месте, пока диск вращается */
.deck__platter::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(from 300deg, transparent 0deg, rgba(255, 214, 160, 0.18) 24deg, transparent 52deg, transparent 180deg, rgba(255, 214, 160, 0.1) 204deg, transparent 232deg);
  pointer-events: none;
}
@keyframes spinUp { from { transform: rotate(0); } to { transform: rotate(240deg); } }
.deck__label {
  position: absolute;
  inset: 34%;
  display: grid;
  place-content: center;
  gap: 2px;
  border-radius: 50%;
  text-align: center;
  background: radial-gradient(circle, #140e0a 0 4%, var(--amber) 4.5% 100%);
  color: #1a120c;
}
.deck__label b { font-family: var(--ff-display); font-size: clamp(8px, 1.3vw, 13px); font-weight: 800; letter-spacing: 0.02em; transform: translateY(-40%); }
.deck__label i { font-style: normal; font-size: clamp(7px, 1vw, 10px); font-weight: 600; transform: translateY(80%); }
.deck__arm {
  position: absolute;
  right: 6%;
  top: 4%;
  height: 86%;
  transform-origin: 73% 11%;
  transform: rotate(-24deg);
  filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.5));
  animation: armDrop 1.1s 1.3s cubic-bezier(0.45, 0, 0.2, 1) both;
}
@keyframes armDrop {
  0% { transform: rotate(-24deg); }
  70% { transform: rotate(15deg); }
  85% { transform: rotate(12.5deg); }
  100% { transform: rotate(13deg); }
}
.deck__knob {
  position: absolute;
  bottom: 8%;
  width: 7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d9cbb7, #7d6f5f 60%, #4a3f36);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
.deck__knob--a { right: 22%; }
.deck__knob--b { right: 10%; }
.deck__led {
  position: absolute;
  left: 7%;
  bottom: 9%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f7941e;
  box-shadow: 0 0 10px 2px rgba(247, 148, 30, 0.7);
  animation: ledOn 0.3s 2s both;
}
@keyframes ledOn { from { opacity: 0.15; } to { opacity: 1; } }

@media (max-width: 959px) {
  .hero2 { min-height: auto; padding-top: calc(var(--header-h) + 28px); padding-bottom: 40px; }
  .hero2__deck { order: 2; }
  .deck { width: min(92%, 420px); }
  .hero2__shade {
    background: linear-gradient(180deg, rgba(20, 14, 10, 0.75) 0%, rgba(20, 14, 10, 0.6) 50%, var(--room) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero2__photo, .hero2__lamp, .hero2__kicker, .hero2__line > span, .hero2__sub,
  .hero2__actions, .hero2__facts, .hero2__deck, .deck__arm, .deck__led { animation: none; }
  .deck__arm { transform: rotate(13deg); }
  .deck__record { animation: none; }
}

/* шапка над тёмной сценой: светлый текст в обеих темах, пока шапка прозрачна */
.header:not(.is-solid) {
  --paper: #f4ece2;
  --paper-dim: rgba(244, 236, 226, 0.74);
  color: #f4ece2;
}
.header:not(.is-solid) .header__link { color: rgba(244, 236, 226, 0.78); }
.header:not(.is-solid) .header__link:hover { color: #fff; }

/* бегущая строка: тёплая полоса вместо кислотной ленты */
.ticker {
  background: #1d140e;
  color: #f3c38a;
  border-block: 1px solid rgba(243, 165, 74, 0.22);
  transform: none;
}
.ticker i { color: #f3a54a; }
.ticker { margin: 0; }

/* диакритика «Й» и «Ё» не обрезается маской строки */
.hero2__line { padding-top: 0.16em; margin-top: -0.16em; }

@media (max-width: 559px) {
  .hero2__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
  .hero2__facts b { font-size: 16px; }
  .hero2__facts span { font-size: 11.5px; line-height: 1.3; }
  .hero2__actions .btn { flex: 1 1 100%; }
  .atmo__actions { width: 100%; }
  .atmo__actions .btn { flex: 1 1 auto; }
}
.atmo__actions .btn { white-space: normal; text-align: center; }

/* колонки окна товара не распираются длинными названиями */
.modal__card > *,
.modal__info,
.modal__info > * { min-width: 0; }
@media (max-width: 767px) {
  .modal__card { width: 100%; max-width: 100vw; overflow-x: hidden; }
}
@media (max-width: 767px) {
  .tl__head { padding-right: 44px; }
  .tl__color { margin-left: 0; flex-basis: 100%; }
}
.tl__ym { display: block; width: 100%; height: 96px; margin: 4px 0 6px; border: 0; border-radius: 10px; background: var(--surface-2); }
@keyframes lineUp { from { transform: translateY(105%); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }

/* ---------------- окно пластинки: панель «Назад» и ручка свайпа ---------------- */
.modal__bar { display: none; }
@media (max-width: 767px) {
  .modal__bar {
    position: sticky;
    top: 0;
    z-index: 12;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    height: 52px;
    padding: env(safe-area-inset-top) 10px 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  html[data-theme="light"] .modal__bar { background: #fff; }
  .modal__back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 12px 0 6px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: var(--paper);
  }
  .modal__back:active { background: rgba(var(--tint-rgb), 0.08); }
  .modal__grab {
    position: absolute;
    left: 50%;
    top: calc(6px + env(safe-area-inset-top));
    width: 38px;
    height: 4px;
    margin-left: -19px;
    border-radius: 4px;
    background: var(--line-strong);
  }
  /* крестик больше не нужен — есть «Назад», свайп и жест браузера */
  .modal__close { display: none; }
  .modal__card { transition: transform 0.3s var(--ease-out), opacity 0.3s; }
}

/* ---------------------------- рекомендации ---------------------------- */
.modal__recs:empty { display: none; }
.modal__recs { margin-top: 22px; display: grid; gap: 22px; }
.recs__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.recs__head h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.recs__more {
  flex: none;
  font-size: 12.5px;
  color: var(--paper-dim);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.recs__more:hover { color: var(--paper); }
.recs__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 124px;
  gap: 12px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.recs__list li { scroll-snap-align: start; }
.rec { display: grid; gap: 2px; width: 100%; text-align: left; color: var(--paper); }
.rec__cover {
  position: relative;
  display: block;
  aspect-ratio: 1;
  margin-bottom: 6px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 0.4s var(--ease-spring);
}
.rec__cover .card__art { position: absolute; inset: 0; }
.rec__cover img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s; }
.rec__cover img.is-loaded { opacity: 1; }
.rec:hover .rec__cover { transform: translateY(-3px); }
.rec__title { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec__meta { font-size: 11.5px; color: var(--paper-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec__price { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------- плашка «поиграть» через 5 минут ---------------------- */
.offer {
  position: fixed;
  z-index: 110;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 32px));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 14px;
  align-items: center;
  padding: 14px 16px 14px 14px;
  border-radius: 18px;
  background: #17171a;
  color: #f2f0ea;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.75), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.45s var(--ease-out), opacity 0.3s;
}
.offer.is-in { transform: none; opacity: 1; }
@media (max-width: 1023px) { .offer { bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); } }
.offer__tv {
  grid-row: span 2;
  position: relative;
  width: 52px;
  height: 44px;
  border-radius: 10px;
  background: #2a2a30;
  box-shadow: inset 0 0 0 2px #3a3a42;
}
.offer__tv i {
  position: absolute;
  inset: 6px 8px 8px;
  border-radius: 6px;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px), linear-gradient(135deg, #3a64c8, #f7941e);
  animation: offerFlicker 2.4s steps(2) infinite;
}
@keyframes offerFlicker { 50% { filter: brightness(1.25); } }
.offer__text { display: grid; gap: 2px; padding-right: 18px; }
.offer__text b { font-size: 14.5px; }
.offer__text span { font-size: 12.5px; line-height: 1.4; color: rgba(242, 240, 234, 0.7); }
.offer__actions { display: flex; align-items: center; gap: 10px; }
.offer__actions .btn { height: 38px; padding: 0 14px; font-size: 11px; }
.offer__alt { font-size: 12.5px; color: rgba(242, 240, 234, 0.75); text-decoration: underline; text-underline-offset: 3px; }
.offer__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  color: rgba(242, 240, 234, 0.6);
}
.offer__close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
@media (prefers-reduced-motion: reduce) { .offer, .offer__tv i { transition: none; animation: none; } }

/* запасная обложка всегда тёмная — текст на ней всегда светлый, в любой теме */
.art-type--stack { color: #f2f0ea; }