/* ============================================================
   COVERPRESS — preview-style.css (ВРЕМЕННЫЙ ФАЙЛ)
   Страница стиля: две колонки на компьютере и горизонтальном планшете.
   Слева — сетка обложек 3×3 в половину экрана, справа — служебная
   информация (назад, название, три точки, покупка). Пузырьки оформления,
   сцены и похожие идут ниже, во всю ширину.
   ============================================================ */

@media (min-width: 900px), (orientation: landscape) and (min-width: 844px) {
  .sp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 32px;
    align-items: start;
  }

  /* верхняя строка: слева обложки, справа служебная информация */
  .sp-back   { grid-column: 1 / -1; grid-row: 1; }
  .sp-covers, .sp-info { margin-top: 0; }
  .sp-covers { grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .sp-info   { grid-column: 2; grid-row: 2; }

  /* Оформление переезжает в правую колонку под покупку — справа от обложек
     оставалось пустое место. Ниже во всю ширину идут только сцены и похожие. */
  .sp-covers  { grid-row: 2; }
  .sp-scenes  { grid-column: 1 / -1; grid-row: 4; }
  .sp-similar { grid-column: 1 / -1; grid-row: 5; }


  /* сетка занимает свою колонку целиком и остаётся квадратной */
  .sp-covers { width: 100%; }
  .sp-grid   { width: 100%; }
}

/* ============================================================
   СТРАНИЦА СТИЛЯ ВЫГЛЯДИТ КАК ОКНО ПОВЕРХ ПОЛКИ
   Клиент смотрит полку — стиль открывается отдельным окном, как книга
   в Apple Books. Слева вверху крестик, справа три кнопки.
   ============================================================ */
/* Полка — белая нейтральная подложка. */
body { background: #ffffff; }

/* Сцена полки: внутри стоят открытая карточка и соседи по краям. Всё, что
   уходит за край экрана, обрезается — страница не едет вбок. */
.sp-stage { position: relative; overflow: hidden; }

/* Окно не во всю ширину: по краям видно соседние стили — на широком экране
   полосой 10–15 %, на смартфоне только тонким краешком, без деталей. */
.sp {
  position: relative;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.18);
  margin: 16px auto 40px;
  padding: 80px 40px 48px;
  width: min(1440px, 86vw);
  max-width: none;
}

/* Соседние стили по бокам — такие же карточки, как открытая: та же ширина,
   та же высота, то же скругление. Наружу торчит узкий край, в нём видна
   обложка соседа — его цвет. Позицию и высоту выставляет style-page.js,
   поэтому соседи прокручиваются вместе со страницей, а не висят на экране. */
.sp-side {
  position: absolute;
  width: min(1440px, 86vw);
  z-index: 1;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .10);
  overflow: hidden;
  cursor: pointer;
  transition: opacity .2s ease;
  opacity: .95;
}
.sp-side:hover { opacity: 1; }
.sp-side-prev { left: 0; transform: translateX(calc(-100% + 5vw)); }
.sp-side-next { right: 0; transform: translateX(calc(100% - 5vw)); }

/* Сосед выглядит как карточка, а не как фотография: сверху — блок обложек
   на том же месте и того же размера, что у открытой карточки, ниже — её
   светлый фон. В торчащий край попадает кусок блока обложек и цвет. */
.sp-side img {
  position: absolute;
  top: 80px;
  width: 340px;
  height: 340px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.sp-side-prev img { right: 40px; }
.sp-side-next img { left: 40px; }

@media (orientation: landscape) and (max-width: 1068px) {
  .sp { width: 88vw; }
  .sp-side { width: 88vw; }
  .sp-side-prev { transform: translateX(calc(-100% + 4vw)); }
  .sp-side-next { transform: translateX(calc(100% - 4vw)); }
  .sp-side img { top: 64px; width: 300px; height: 300px; }
}

/* Планшет вертикально: окно шире, соседи уже. */
@media (min-width: 735px) and (max-width: 1023px) and (orientation: portrait) {
  .sp { width: 90vw; }
  .sp-side { width: 90vw; }
  .sp-side-prev { transform: translateX(calc(-100% + 3.5vw)); }
  .sp-side-next { transform: translateX(calc(100% - 3.5vw)); }
  .sp-side img { top: 72px; width: 46%; height: auto; aspect-ratio: 1; }
}

/* старую кнопку «назад» и точки в заголовке заменяет шапка окна */
.sp > .sp-back { display: none; }
.sp-head .sp-more { display: none; }

/* Кнопки стоят в самих углах окна: крестик — левый верхний,
   три кнопки — правый верхний. Никаких смещений. */
.spw-bar { display: contents; }
.spw-x {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 6;
}
.spw-acts {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 6;
  display: inline-flex;
  gap: 8px;
}
.spw-x,
.spw-act {
  /* размер как у кружков мобильного меню */
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.spw-x:hover,
.spw-act:hover { border-color: var(--text-3); color: var(--accent); }
.spw-act.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }



.spw-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  min-width: 250px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.spw-menu[hidden] { display: none; }
.spw-mi {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: none;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.spw-mi:hover { background: rgba(0,0,0,.05); }
.spw-mi.is-on { color: var(--accent); }
.spw-mi svg { flex: 0 0 auto; color: var(--text-3); }
.spw-mi.is-on svg { color: var(--accent); }

/* окно на узких экранах — во всю ширину, без больших полей */
/* Смартфон: по краям только тонкая полоска соседа, без опознавательных знаков. */
@media (max-width: 734px) {
  .sp { width: calc(100vw - 26px); margin: 8px auto 24px; padding: 68px 14px 28px; border-radius: 18px; }
  .spw-x, .spw-act { width: 46px; height: 46px; }
  .spw-acts { gap: 6px; }
  /* сосед — такая же карточка, наружу торчит её край */
  .sp { width: calc(100vw - 32px); }
  .sp-side { width: calc(100vw - 32px); border-radius: 18px; }
  .sp-side-prev { left: 0; transform: translateX(calc(-100% + 14px)); }
  .sp-side-next { right: 0; transform: translateX(calc(100% - 14px)); }
  .sp-side img { top: 68px; width: calc(100% - 28px); height: auto; aspect-ratio: 1; border-radius: 10px; }
  .sp-side-prev img { right: 14px; left: auto; }
  .sp-side-next img { left: 14px; right: auto; }
}

/* ============================================================
   ОФОРМЛЕНИЕ РЯДОМ С ОБЛОЖКАМИ (горизонтальные экраны)
   Пузырьки компактнее по высоте: строка группы — подпись слева,
   пузырьки сразу за ней, без пустых интервалов.
   ============================================================ */
@media (min-width: 900px), (orientation: landscape) and (min-width: 844px) {
  .sp-design { margin-top: 4px; }
  .sp-design .sp-h2 { font-size: 15px; margin-bottom: 6px; }

  .sp-design .tag-group {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }
  .sp-design .tag-group-title {
    flex: 0 0 auto;
    width: auto;
    min-width: 84px;
    font-size: 11.5px;
    color: var(--text-3);
    margin: 0;
  }
  .sp-design .tag {
    padding: 3px 9px;
    font-size: 11.5px;
    line-height: 1.25;
    border-radius: 100px;
  }
}

/* ============================================================
   ПЛОТНЕЕ ПО ВЫСОТЕ (горизонтальные экраны)
   Убираем воздух между строками: заголовок, покупка, оформление,
   сцены и похожие идут вплотную друг к другу.
   ============================================================ */
@media (min-width: 900px), (orientation: landscape) and (min-width: 844px) {
  .sp { padding-top: 68px; padding-bottom: 28px; }

  .sp-head { margin-bottom: 10px; }
  .sp-title { line-height: 1.05; }
  .sp-shelf { margin-top: 4px; }
  .sp-info { margin-bottom: 0; }
  .sp-buy { margin-top: 10px; }
  .sp-note { margin-top: 6px; font-size: 12px; }

  .sp-design { margin-top: 10px; }
  .sp-design .sp-h2 { margin-bottom: 4px; }
  .sp-design .tag-group { margin-bottom: 2px; row-gap: 2px; }
  .sp-design .tag { padding: 2px 8px; }

  .sp-block { margin-top: 14px; }
  .sp-scenes { margin-top: 16px; }
  .sp-h2 { margin-bottom: 6px; }
  .sp-hint { margin-bottom: 8px; font-size: 12.5px; }
  .sp-similar { margin-top: 18px; }
}

/* Справка внизу окна — мелко и приглушённо, отдельной строкой. */
.sp-foot-note {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-3);
}
@media (min-width: 900px), (orientation: landscape) and (min-width: 844px) {
  .sp-liked     { grid-column: 1 / -1; grid-row: 6; }
  .sp-foot-note { grid-column: 1 / -1; grid-row: 7; }
}

/* ============================================================
   ОФОРМЛЕНИЕ — ОТДЕЛЬНЫЙ БЛОК СО СКРУГЛЁННЫМИ УГЛАМИ
   ============================================================ */
.sp-design {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px 16px;
}
.sp-design .sp-h2 { margin-bottom: 8px; }

@media (max-width: 734px) {
  .sp-design { padding: 12px 12px; border-radius: 14px; }
}

/* ============================================================
   ПОРЯДОК В ПРАВОЙ КОЛОНКЕ: СНАЧАЛА ОФОРМЛЕНИЕ, ПОТОМ ПОКУПКА
   ============================================================ */
/* Оформление и покупка лежат в правой колонке: сначала пузырьки, ниже покупка. */
@media (min-width: 900px), (orientation: landscape) and (min-width: 844px) {
  .sp-design { grid-column: auto; grid-row: auto; margin-top: 10px; }
  .sp-buy { margin-top: 12px; }
}

/* ============================================================
   ГОРИЗОНТАЛЬНЫЙ ПЛАНШЕТ (1024×768) — ВСЁ КОМПАКТНО
   Окно шире, поля меньше, обложки мельче, пузырьки и покупка
   плотнее: первый экран показывает стиль целиком.
   ============================================================ */
@media (orientation: landscape) and (min-width: 844px) and (max-width: 1068px) {
  .sp { width: 84vw; padding: 56px 18px 18px; border-radius: 20px; }
  /* обложки чуть меньше, правая колонка шире — пузырьки перестают ломаться */
  .sp { grid-template-columns: 0.8fr 1.2fr; }
  .sp-side { width: 88vw; }
  .sp-side-prev { transform: translateX(calc(-100% + 4vw)); }
  .sp-side-next { transform: translateX(calc(100% - 4vw)); }
  .sp-side img { top: 56px; width: 40%; height: auto; aspect-ratio: 1; }

  .spw-x, .spw-act { width: 44px; height: 44px; }
  .spw-acts { gap: 6px; }

  .sp { grid-column-gap: 18px; }
  .sp-grid { gap: 4px; }
  .sp-grid .scene-tile { border-radius: 9px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }

  .sp-title { font-size: 24px; }
  .sp-shelf { font-size: 12px; margin-top: 2px; }
  .sp-head { margin-bottom: 8px; }

  .sp-design { padding: 10px 12px; border-radius: 14px; margin-top: 8px; }
  .sp-design .sp-h2 { font-size: 14px; margin-bottom: 4px; }
  .sp-design .tag-group { margin-bottom: 1px; }
  .sp-design .tag-group { gap: 4px; margin-bottom: 0; }
  .sp-design .tag-group-title { min-width: 62px; font-size: 10.5px; }
  .sp-design .tag { padding: 1px 6px; font-size: 10.5px; line-height: 1.3; }

  .sp-buy { margin-top: 8px; padding: 10px 12px; }
  .sp-buy .btn-buy { padding: 10px 18px; font-size: 14px; }

  .sp-block { margin-top: 12px; }
  .sp-h2 { font-size: 15px; margin-bottom: 4px; }
  .sp-hint { font-size: 11.5px; margin-bottom: 6px; }
  .sp-foot-note { margin-top: 12px; padding-top: 8px; font-size: 11.5px; }
}

/* Порядок на узких экранах: подборка и справка — в самом низу.
   Без этого блоки без order встают выше обложек. */
.sp-liked     { order: 7; }
.sp-foot-note { order: 8; }

/* ============================================================
   РАСКЛАДКА ОКНА ПО УСТРОЙСТВАМ (моё предложение, принято владельцем)
   ============================================================ */

/* ── Десктоп: две колонки. Правая колонка НЕ липнет — при прокрутке она
      уходит вверх вместе со страницей, иначе название и пузырьки наезжают
      на «Похожие стили». ─────────────────────────────────────────────── */
@media (min-width: 1069px) {
  .sp { grid-template-columns: 0.82fr 1.18fr; }
  .sp-info { position: static; }
}

/* ── Планшет вертикально: две колонки, оформление под обложками ────────── */
@media (min-width: 735px) and (max-width: 1023px) and (orientation: portrait) {
  .sp {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    grid-column-gap: 20px;
    align-items: start;
    padding: 60px 20px 20px;
  }
  .sp-covers { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .sp-info   { grid-column: 2; grid-row: 1; }
  .sp-scenes  { grid-column: 1 / -1; }
  .sp-similar { grid-column: 1 / -1; }
  .sp-liked   { grid-column: 1 / -1; }
  .sp-foot-note { grid-column: 1 / -1; }

  .sp-title { font-size: 22px; }
  .sp-design { margin-top: 8px; padding: 10px 12px; }
  .sp-design .tag-group { margin-bottom: 1px; gap: 4px; }
  .sp-design .tag-group-title { min-width: 64px; font-size: 10.5px; }
  .sp-design .tag { padding: 1px 6px; font-size: 10.5px; }
  .sp-buy { margin-top: 8px; }
}

/* ── Смартфон вертикально: обложки 75 %, сразу под ними покупка ────────── */
@media (max-width: 734px) and (orientation: portrait) {
  .sp-covers { width: 75%; margin: 0 auto 12px; }
  .sp-info   { order: 3; }
  .sp-design { order: 4; }   /* оформление — после покупки */
  .sp-scenes { order: 5; }
  .sp-similar { order: 6; }
  .sp-title { font-size: 22px; }
  .sp-buy { margin-top: 10px; }
}

/* ── Смартфон горизонтально: слева обложки в половину, справа покупка ──── */
@media (max-height: 500px) and (orientation: landscape) {
  .sp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 14px;
    align-items: start;
    padding: 52px 12px 14px;
    width: calc(100vw - 30px);
  }
  .sp-covers { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .sp-info   { grid-column: 2; grid-row: 1; }
  .sp-scenes, .sp-similar, .sp-liked, .sp-foot-note { grid-column: 1 / -1; }

  .spw-x, .spw-act { width: 40px; height: 40px; }
  .sp-title { font-size: 18px; }
  .sp-shelf { font-size: 11px; }
  .sp-grid { gap: 4px; }
  .sp-design { margin-top: 6px; padding: 8px 10px; }
  .sp-design .sp-h2 { font-size: 13px; margin-bottom: 3px; }
  .sp-design .tag-group { margin-bottom: 0; gap: 3px; }
  .sp-design .tag-group-title { min-width: 56px; font-size: 10px; }
  .sp-design .tag { padding: 1px 5px; font-size: 10px; }
  .sp-buy { margin-top: 6px; padding: 8px 10px; }
  .sp-side { width: 92vw; }
  .sp-side-prev { transform: translateX(calc(-100% + 16px)); }
  .sp-side-next { transform: translateX(calc(100% - 16px)); }
  .sp-side img { top: 48px; width: 34%; height: auto; aspect-ratio: 1; }
}

/* Над окном стиля не должно быть ничего ни на одном устройстве: шапка,
   меню, логотип и вход со страницы стиля убраны из разметки. Правило —
   страховка на случай, если шапку принесёт подключённый общий стиль. */
.header, .header-nav, .site-header, .logo { display: none !important; }

/* ============================================================
   ПЛОТНОСТЬ ОКНА ПО ЭКРАНАМ (правки 2026-07-29)
   Обложки — половина окна там, где две колонки; оформление уходит
   во всю ширину там, где правая колонка узкая и пузырьки рвутся.
   ============================================================ */

/* ── Десктоп: сетка обложек ровно половина окна ─────────────────────────── */
@media (min-width: 1069px) {
  .sp { grid-template-columns: 1fr 1fr; }
}

/* Стиль открыт — сверху не остаётся ничего: шапки сайта нет в разметке
   страницы, выход из стиля только крестиком. */
.sp-side { top: 20px; }

/* ── Планшет горизонтально (1024×768): первый экран показывает стиль целиком.
      Раскладка прежняя — слева обложки, справа название, оформление и покупка.
      Пузырьки собраны плотно: группа умещается в одну строку, висящих
      одиночных хвостов нет. ─────────────────────────────────────────────── */
@media (orientation: landscape) and (min-width: 844px) and (max-width: 1068px) and (min-height: 501px) {
  .sp { margin-top: 8px; padding-top: 64px; grid-template-columns: 1fr 1fr; }
  .sp-design { margin-bottom: 8px; }
  .sp-buy { margin-top: 8px; }
  .sp-side { top: 20px; bottom: 20px; }
}

/* ── Оформление на всех мобильных экранах — тот же компактный блок, что и на
      горизонтальном планшете: группы вплотную, подпись уже, пузырьки мельче ── */
@media (max-width: 1068px) {
  .sp-design .tag-groups { gap: 2px; }
  .sp-design .tag-group { margin-bottom: 0; row-gap: 3px; column-gap: 5px; }
  .sp-design .tag-group-title { min-width: 66px; font-size: 11px; }
  .sp-design .tag-groups.readonly .tag { padding: 2px 8px; font-size: 11.5px; }
}

/* Смартфон вертикально — колонка узкая: подпись и пузырьки ещё мельче,
   иначе группа рвётся на две строки с одиночным хвостом. */
@media (max-width: 480px) {
  .sp-design .tag-group { column-gap: 4px; }
  .sp-design .tag-group-title { min-width: 54px; font-size: 10px; }
  .sp-design .tag-groups.readonly .tag { padding: 1px 6px; font-size: 10.5px; }
}

/* ── Планшет вертикально: одна колонка. Обложки во всю ширину окна, под ними
      название, оформление, и уже под пузырьками — покупка. ───────────────── */
@media (min-width: 735px) and (max-width: 1023px) and (orientation: portrait) {
  /* minmax(0,1fr), а не 1fr: иначе колонку распирает содержимое полок
     «Похожие стили» и окно вылезает за свою ширину */
  .sp { grid-template-columns: minmax(0, 1fr); }
  .sp-info { display: contents; }
  /* обложки во всю ширину окна: снимаем потолок 460 px из style-page.css */
  .sp-covers { grid-column: 1; grid-row: 1; width: 100%; max-width: none; }
  .sp-head   { grid-column: 1; grid-row: 2; margin-top: 14px; }
  .sp-design { grid-column: 1; grid-row: 3; margin-top: 12px; }
  .sp-buy    { grid-column: 1; grid-row: 4; margin-top: 12px; align-self: start; }
  .sp-scenes { grid-column: 1; grid-row: 5; }
  .sp-similar { grid-column: 1; grid-row: 6; }
  .sp-liked { grid-column: 1; grid-row: 7; }
  .sp-foot-note { grid-column: 1; grid-row: 8; }
}

/* ── Смартфон горизонтально: справа от обложек — название, пузырьки и покупка.
      Покупка уходит под обложку только если справа она уже не помещается. ── */
@media (max-height: 500px) and (orientation: landscape) {
  .sp-info { display: contents; }
  /* высота строк названия и оформления — по содержимому, иначе grid раздаёт
     им высоту обложек и блоки расходятся пустотами */
  .sp { grid-template-rows: min-content min-content 1fr; }
  .sp-covers { grid-column: 1; grid-row: 1 / span 3; }
  .sp-head   { grid-column: 2; grid-row: 1; margin-bottom: 6px; }
  .sp-design { grid-column: 2; grid-row: 2; margin: 0; align-self: start; }
  .sp-buy    { grid-column: 2; grid-row: 3; margin-top: 8px; align-self: start; }
  .sp-scenes { grid-column: 1 / -1; grid-row: 4; }
  .sp-similar { grid-column: 1 / -1; grid-row: 5; }
  .sp-liked { grid-column: 1 / -1; grid-row: 6; }
  .sp-foot-note { grid-column: 1 / -1; grid-row: 7; }
}

/* ============================================================
   «ПОХОЖИЕ СТИЛИ» И «ВАМ МОЖЕТ ПОНРАВИТЬСЯ» — ПОЛКА, КАК В БИБЛИОТЕКЕ
   Одна строка, двигается вбок, карточка фиксированной ширины,
   обложка квадратная. Сеткой эти блоки не раскладываем.
   ============================================================ */
#sp-similar,
#sp-liked {
  display: flex;
  gap: var(--lib-gap, 20px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
#sp-similar::-webkit-scrollbar,
#sp-liked::-webkit-scrollbar { display: none; }
#sp-similar > .lib-card,
#sp-liked > .lib-card {
  flex: 0 0 var(--lib-card, 204px);
  width: var(--lib-card, 204px);
  scroll-snap-align: start;
}
#sp-similar > .lib-card .lib-cover,
#sp-liked > .lib-card .lib-cover { aspect-ratio: 1; }

/* Название стиля — пузырьком внутри самой обложки, в правом нижнем углу.
   Это стандарт карточки на всём проекте (как на полках библиотеки и главной),
   подписи под обложкой не бывает. Вид взят из preview-lib.css. */
.sp .lib-card { position: relative; }
.sp .lib-card .lib-name {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: calc(100% - 20px);
  padding: 7px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  z-index: 2;
}
@media (max-width: 734px) {
  .sp .lib-card .lib-name {
    right: 8px;
    bottom: 8px;
    padding: 6px 10px;
    font-size: 12px;
    max-width: calc(100% - 16px);
  }
}

/* ── Смартфон вертикально: обложки во всю ширину окна, подпись группы
      над пузырьками — пузырьки идут в несколько штук в ряд, а не столбиком ── */
@media (max-width: 734px) and (orientation: portrait) {
  .sp-covers { width: 100%; }
  /* Подпись группы оставлена слева: вариант «подпись над пузырьками» пробовал —
     блок оформления стал выше на 142 px, поэтому вернул как было. */
}

/* ============================================================
   ПОКУПКА УХОДИТ ПОД ОБЛОЖКУ, КОГДА НЕ ПОМЕЩАЕТСЯ СПРАВА
   У разных стилей разное число пузырьков. Пока покупка помещается
   справа под оформлением — она стоит там. Как только оформление
   вырастает и покупка вылезает ниже обложек, страница ставит класс
   is-buy-under и покупка переезжает в левую колонку под обложку.
   Замер делает preview-style.js. Экраны: десктоп, планшет
   горизонтально, смартфон горизонтально.
   ============================================================ */
@media (min-width: 900px), (orientation: landscape) and (min-width: 844px) {
  .sp.is-buy-under { grid-template-rows: min-content min-content 1fr; }
  .sp.is-buy-under .sp-info   { display: contents; }
  .sp.is-buy-under .sp-covers { grid-column: 1; grid-row: 1 / span 2; }
  .sp.is-buy-under .sp-head   { grid-column: 2; grid-row: 1; }
  .sp.is-buy-under .sp-design { grid-column: 2; grid-row: 2; margin: 0; align-self: start; }
  .sp.is-buy-under .sp-buy    { grid-column: 1; grid-row: 3; align-self: start; }
}

/* ============================================================
   БЛОК ПОКУПКИ — ОДНОЙ СТРОКОЙ НА ВСЕХ ЭКРАНАХ
   Счёт слева, кнопка справа компактной пилюлей. Друг под другом
   и во всю ширину они не ставятся (style-page.css так делал на
   экранах уже 700 px).
   ============================================================ */
.sp-buy { flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
/* Счёт по содержимому: не растягивается на всю строку и не рвётся —
   кнопка стоит сразу за ним, а не улетает к правому краю. */
.sp-buy .scene-summary { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.sp-buy .btn-buy { flex: 0 0 auto; width: auto; }

/* Тесные экраны: строка «счёт — кнопка» должна влезать целиком,
   поэтому кнопка компактнее. */
@media (max-width: 480px) {
  .sp-buy { padding: 10px; gap: 8px; }
  .sp-buy .scene-summary { font-size: 11.5px; }
  .sp-buy .btn-buy { padding: 8px 12px; font-size: 12px; }
}
@media (orientation: landscape) and (min-width: 844px) and (max-width: 1068px) {
  .sp-buy { padding: 10px; gap: 8px; }
  .sp-buy .btn-buy { padding: 9px 14px; font-size: 13px; }
}

/* ── Подсказки у кнопок шапки окна ────────────────────────────────────────
   Кнопки стоят у самого верха карточки — облачко над ними не помещалось и
   было не видно. Поэтому у крестика и трёх кнопок справа подсказка снизу. */
.spw-x[data-tip]:hover::after,
.spw-act[data-tip]:hover::after {
  bottom: auto;
  top: calc(100% + 7px);
}
.spw-x[data-tip]:hover::before,
.spw-act[data-tip]:hover::before {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: #fff;
}
/* Облачко не должно обрезаться шапкой окна. */
.spw-bar, .spw-acts { overflow: visible; }
/* Позицию кнопок не трогаем (крестик и блок справа — absolute в шапке),
   поднимаем только слой, чтобы облачко подсказки не пряталось. */
.spw-x { z-index: 12; }
.spw-act { position: relative; z-index: 12; }

/* Продающая раскладка (2026-08-04): на десктопе и горизонтальном планшете сцены, улучшения и цена — в правую
   колонку под описание, обложки тянутся на две строки; пустоты справа нет.
   Похожие и прочее остаются ниже во всю ширину. */
@media (min-width: 1024px) {
  .sp-covers { grid-row: 2 / span 2; }
  .sp-scenes { grid-column: 2; grid-row: 3; margin-top: 0; }
}