/* ============================================================
   COVERPRESS — style-page.css
   Страница стиля /s/{ссылка} по образцу страницы книги в Apple Books:
   вверху обложки + название, действия и покупка; ниже по прокрутке —
   оформление, сцены, похожие стили.
   Карточки похожих стилей и их колонки (6 / 5 / 4 / 2) берутся из
   library.css — раскладка библиотеки не дублируется.
   ============================================================ */

/* Узкие экраны — одна колонка. Порядок блоков задаёт order (ТЗ №4 §3):
   назад → обложки → название/покупка → оформление → сцены → похожие. */
.sp {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 48px 72px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* Кнопка возврата — по содержимому, а не во всю ширину колонки. */
.sp > .sp-back { align-self: flex-start; }
.sp-back    { order: 1; }
.sp-covers  { order: 2; }
.sp-info    { order: 3; }
.sp-design  { order: 4; }
.sp-scenes  { order: 5; }
.sp-similar { order: 6; }

/* Назад — туда, откуда пришли (полка, раздел, каталог главной) */
.sp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 18px;
}
.sp-back:hover { color: var(--text); border-color: var(--text-3); }

/* Обложки стиля — сетка 3×3, плитки подменяются на глазах.
   Размер блока фиксирован по устройствам (ТЗ №4 §2), зазор плиток 6 px.
   Плитка и кроссфейд — общие стили .scene-tile из main.css. */
.sp-covers {
  position: relative;
  width: 100%;                 /* узкие экраны: во всю ширину контента */
  margin-bottom: 20px;
}
.sp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.sp-grid .scene-tile {
  width: auto;
  height: auto;
  aspect-ratio: 1;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}

/* Стрелки листания — по бокам обложек, как в Books: только мышь/трекпад,
   появляются при наведении. На тач-устройствах листаем свайпом. */
.sp-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  color: #111;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.sp-nav-prev { left: -58px; }
.sp-nav-next { right: -58px; }
.sp-nav:hover { background: #fff; }
.sp-nav[hidden] { display: none; }
.sp-nav[disabled] { opacity: 0 !important; pointer-events: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
  .sp-nav:not([hidden]) { display: inline-flex; }
  .sp-covers:hover .sp-nav:not([disabled]) { opacity: 1; }
}

/* ── Название, три точки, покупка ───────────────────────────────────────── */
.sp-info { min-width: 0; margin-bottom: 24px; }
.sp-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.sp-titles { min-width: 0; flex: 1; }
.sp-title {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.sp-shelf {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-3);
}

.sp-more {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.sp-more:hover { color: var(--text); border-color: var(--text-3); }
.sp-more.is-liked { color: var(--accent); border-color: var(--accent); }

/* Меню действий */
.sp-menu {
  position: absolute;
  z-index: 1000;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  padding: 6px;
}
.sp-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.sp-menu-item:hover { background: #f5f5f5; }
.sp-menu-item svg { flex: 0 0 auto; color: var(--text-2); }
.sp-menu-item:hover svg { color: var(--accent); }

/* Покупка прямо на странице */
.sp-buy {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}
/* Строка счёта на странице переносится, а не обрезается: в окне она жила в
   одну строку (nowrap из main.css), здесь места по вертикали достаточно. */
.sp-buy .scene-summary {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.sp-buy .btn-buy {
  flex: 0 0 auto;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 107, 71, 0.32);
  transition: background 0.2s ease;
}
.sp-buy .btn-buy:hover { background: var(--accent-hover); }
.sp-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}

/* ── Блоки ниже по прокрутке ────────────────────────────────────────────── */
.sp-block { margin-bottom: 40px; }
.sp-h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.sp-h2-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sp-h2-row .sp-h2 { margin-bottom: 0; }
.sp-h2-row .prompt-refresh {
  width: 28px; height: 28px;
  background: var(--accent); color: #fff;
}
.sp-h2-row .prompt-refresh:hover { background: var(--accent-hover); color: #fff; }
.sp-hint { font-size: 13px; color: var(--text-3); margin-bottom: 14px; }

/* Оформление: те же read-only пузырьки, что были в окне —
   название группы слева, пузырьки прижаты вправо, перенос поштучный. */
.sp-block .tag-groups.readonly {
  gap: 6px;
  min-height: 0;
  overflow: visible;
  max-width: 720px;
}
.sp-block .tag-groups.readonly .tag { font-size: 13px; padding: 4px 11px; }

/* Сцены */
.sp-block .scenes { max-width: 720px; }
.sp-block .scene-text { background: var(--surface); }

/* Похожие стили — карточки и колонки из library.css */
.sp-similar[hidden] { display: none; }

/* ── Касса: тот же блок, что был в окне, показан по центру экрана ───────── */
.sp-pay {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.sp-pay[hidden] { display: none; }
.sp-pay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Перекрываем «плашку в углу» из main.css — на странице касса стоит по центру. */
.sp-pay .checkout {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 1;
  width: min(420px, 100%);
  max-width: 100%;
  max-height: calc(100vh - 32px);
  background: rgba(255, 255, 255, 0.92);
}

/* Уведомление «скопировано» */
.sp-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 1200;
  background: rgba(17, 17, 17, 0.92);
  color: #fff;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  opacity: 1;
  transition: opacity 0.35s ease;
}
.sp-toast.is-out { opacity: 0; }

/* Стиль не найден */
.sp-404 { text-align: center; padding: 80px 20px; }
.sp-404 h1 { font-size: clamp(24px, 4vw, 34px); font-weight: 300; letter-spacing: -0.02em; }
.sp-404 p { color: var(--text-2); margin: 12px 0 24px; }
.sp-404 .btn-buy {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ============================================================
   РАЗМЕРЫ ПО УСТРОЙСТВАМ — таблица ТЗ №4 §2 (замеры Apple).
   Широкие экраны: блок обложек — фиксированный квадрат слева, остальное
   обтекает его справа и продолжается под ним (пустого хвоста в правой
   колонке нет). Узкие: одна колонка, обложки во всю ширину контента.
   ============================================================ */

/* Десктоп ≥ 1200: блок 340×340, плитка (340−12)/3 = 109.3, правая не уже 380 */
@media (min-width: 1200px) {
  .sp { display: block; }
  .sp-covers {
    float: left;
    width: 340px;
    margin: 0 40px 24px 0;
  }
  .sp-scenes { clear: both; }
}

/* Правая колонка при обтекании: собственный контекст, иначе фон блока покупки
   и пузырьки залезли бы под обложки. Сцены и похожие идут во всю ширину. */
@media (min-width: 900px) {
  .sp-back, .sp-info, .sp-design { overflow: hidden; }
  .sp-back { float: none; display: inline-flex; overflow: visible; }
}

/* Планшет-альбом 900–1199: блок 300×300, плитка (300−12)/3 = 96 */
@media (min-width: 900px) and (max-width: 1199px) {
  .sp { display: block; padding: 8px 32px 56px; }
  .sp-covers {
    float: left;
    width: 300px;
    margin: 0 32px 20px 0;
  }
  .sp-scenes { clear: both; }
}

/* Планшет-портрет 700–899: одна колонка, обложки во всю ширину, максимум 460 */
@media (min-width: 700px) and (max-width: 899px) {
  .sp { padding: 8px 24px 52px; }
  .sp-covers { max-width: 460px; }
  .sp-h2 { font-size: 19px; }
}

/* Смартфон < 700: одна колонка, обложки во всю ширину контента */
@media (max-width: 699px) {
  .sp { padding: 6px 16px 48px; }
  .sp-buy { padding: 14px; gap: 10px; }
  .sp-buy .scene-summary { flex: 1 1 100%; }
  .sp-buy .btn-buy { flex: 1 1 100%; }
  .sp-block { margin-bottom: 32px; }
  .sp-pay { padding: 0; align-items: flex-end; }
  .sp-pay .checkout {
    width: 100%;
    max-height: 88vh;
    border-radius: 18px 18px 0 0;
  }
}

/* Смартфон горизонтально (высота ≤500): поля под вырез экрана, компактнее.
   Раскладка — по ширине: 844 и 812 попадают в полосу 700–899, одна колонка. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 899px) {
  .sp { padding: 6px max(20px, env(safe-area-inset-right)) 40px max(20px, env(safe-area-inset-left)); }
  .sp-back { margin-bottom: 10px; padding: 6px 12px; font-size: 12.5px; }
  .sp-title { font-size: 22px; }
  .sp-head { margin-bottom: 14px; }
  .sp-buy { padding: 12px 14px; }
  .sp-block { margin-bottom: 28px; }
  .sp-pay .checkout { max-height: calc(100vh - 20px); }
}

/* ── Похожие стили: колонки по полосам ТЗ №4 (§3), а не по полосам библиотеки:
   десктоп 6 · планшет-альбом 5 · планшет-портрет 4 · смартфон 2. ────────── */
@media (min-width: 1200px) { #sp-similar { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 900px) and (max-width: 1199px) { #sp-similar { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 700px) and (max-width: 899px) { #sp-similar { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 699px) { #sp-similar { grid-template-columns: repeat(2, 1fr); } }

/* ── Подвал на странице стиля ──────────────────────────────────────────────
   Соседние стили по бокам (.sp-side) висят fixed с z-index:1 и перекрывали
   подвал при прокрутке вниз. Подвал ставим выше по слою и на своём фоне. */
body .footer {
  position: relative;
  z-index: 4;
  background: var(--bg, #fafafa);
}

/* ── Продающая раскладка страницы стиля (2026-08-04): описание, слоты сцен,
   разблокировка, модалка улучшений, микро-комментарии ── */
.sp-about{margin-top:6px}
.sp-about-text{font-size:14.5px;line-height:1.55;color:#3a3a3c;margin:0}

/* микро-комментарии: короткая строка + облачко по клику */
.sp-mc{display:inline-block;margin-top:8px;border:0;background:none;padding:0;cursor:pointer;
  font-size:12px;color:#a1a1a6;border-bottom:1px dotted #c7c7cc;line-height:1.4}
.sp-mc:hover{color:#6e6e73}
.sp-mc-cloud{display:none;margin-top:8px;background:#f4f4f7;border-radius:12px;padding:10px 14px;
  font-size:12.5px;line-height:1.5;color:#5a5a5f;max-width:560px}
.sp-mc-cloud.open{display:block}
.sp-mc-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:#FF6B47;color:#fff;vertical-align:-6px;margin:0 2px}

/* сцены-слоты: заблокированные */
.scene-card.locked{position:relative;overflow:hidden;border-radius:14px}
.scene-card.locked .scene-text{opacity:.38;filter:blur(1px);pointer-events:none;user-select:none}
.scene-card.locked .scene-num{opacity:.45}
.scene-unlock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;
  border:0;cursor:pointer;background:#fff;color:#111;border:1px solid #e5e5e5;
  border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;display:flex;gap:8px;align-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.08);transition:transform .15s}
.scene-unlock b{color:#FF6B47;font-weight:700}
.scene-unlock:hover{transform:translate(-50%,-50%) scale(1.04)}
.scene-unlock svg{flex:none}

/* строка «Улучшения и ваши настройки» */
.sp-improve-row{margin-top:18px;width:100%;max-width:560px;display:flex;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid #e5e5e5;border-radius:14px;padding:13px 16px;cursor:pointer;
  font-size:14px;font-weight:600;color:#111;transition:border-color .15s}
.sp-improve-row:hover{border-color:#FF6B47}
.sp-improve-row svg{color:#a1a1a6}

/* цена под сценами */
.sp-buy-sale{margin-top:18px;max-width:560px}


/* модалка улучшений */
.sp-imp{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center}
.sp-imp[hidden]{display:none}
.sp-imp-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px)}
.sp-imp-box{position:relative;background:#fff;border-radius:24px;max-width:640px;width:calc(100% - 32px);
  max-height:84vh;overflow:auto;padding:22px 24px;box-shadow:0 24px 80px rgba(0,0,0,.25)}
.sp-imp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sp-imp-head h3{margin:0;font-size:18px}
.sp-imp-x{border:0;background:none;cursor:pointer;color:#6e6e73;padding:4px}
.sp-imp-sub{font-size:12.5px;color:#a1a1a6;margin:6px 0 12px}

/* Пузырьки — выбор клиента: клики разрешены (в main.css у
   .tag-groups.readonly .tag стоит pointer-events:none); чипы теперь
   <button>, шрифт наследуем. Выбранный — коралл брендбука. */
#tag-groups.readonly .tag { cursor: pointer; pointer-events: auto; font-family: inherit; }
#tag-groups .tag.picked {
  background: #FF6B47;
  border-color: #FF6B47;
  color: #fff;
}
#tag-groups .tag:focus-visible { outline: 2px solid #FF6B47; outline-offset: 2px; }