/* Стили «карточки фотокниги» — МАШИННО ПОРОЖДЁННЫЙ файл, руками не править.
   Источник правды — style.css (правила под #wizStep1); здесь его срез для посадочной
   fotokniga.html, которая style.css подключить не может: 45 классов пересекаются с её инлайн-CSS.
   Правишь карточку — правишь style.css, потом: node scripts/build-photobook-card-css.mjs
   Расхождение ловит test/photobook-card-css-sync.test.mjs (в полных воротах деплоя). */

/* Палитра карточки: те же переменные style.css, объявленные на её области. */
#wizStep1 {
  --bg: #faf6ef;
  --bg-alt: #f2ead8;
  --fg: #1c1410;
  --muted: #6b5c4e;
  --accent: #b8652a;
  --accent-hover: #9a5020;
  --accent-soft: #e8b88a;
  --line: rgba(28,20,16,0.12);
  --card: #ffffff;
  --dark: #221510;
  --sans: 'Inter', sans-serif;
  --serif: "Playfair Display", Georgia, serif;
  --wordmark: 'Jost', system-ui, sans-serif;
  --radius: 16px;
  --shadow: 0 4px 24px rgba(28,20,16,0.10);
  --media-frame-h: clamp(220px, 38vh, 360px);
  --section-y: 72px;
  --section-head-gap: 32px;
  --gutter: 48px;
  --paper-0: #fffdf8;
  --paper-1: var(--bg);
  --paper-2: var(--bg-alt);
  --paper-3: #eadfc8;
  --paper-4: #d8c8b0;
  --line-strong: rgba(28,20,16,0.28);
  --ink: var(--fg);
  --ink-soft: #5c4e3f;
  --ink-mute: #9a8f7e;
  --terra: var(--accent);
  --terra-press: var(--accent-hover);
  --pick-bg: #f9efe1;
  --pick-mark: #b8652a;
  --pick-ink: #9a5020;
  --hover-layer: rgba(184,101,42,.07);
  --press-layer: rgba(184,101,42,.14);
  --surface-soft: #faf4f0;
  --track: #f2ead8;
  --disabled-ink: #77726f;
  --disabled-bg: #f7f5f3;
  --font-head: 'Onest', 'Inter', -apple-system, sans-serif;
}


/* Режим высокой контрастности (Windows High Contrast и аналоги). Система затирает наши
   заливки своей палитрой — выбранное перестаёт отличаться от невыбранного, и человек,
   которому этот режим и нужен, теряет единственную подсказку. Возвращаем различие
   системным цветом Highlight, слой состояния гасим: он там не виден и только съедает
   контраст. Обводка, а не рамка: border сдвинул бы соседей именно в этом режиме. */
@media (forced-colors: active) {
  .ws-nav-link.is-active,
  .custom-preset.is-active,
  .crop-aspect-btn.is-active,
  .albums-sidebar-item.is-active,
  .album-variant-pop__scheme.is-active,
  .album-variant-pop__side.is-active,
  #wizStep1 .tile--sel {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}
/* Mobile-first: одна колонка, со среднего экрана — две.
   ⚠️ Правая колонка держит min 400px: контейнер альбомов в Мастерской уже, чем wrap
   посадочной (замер 24.07: iframe 894px против 1080px → при равных долях правая колонка
   выходила 368px, а три плитки размеров требуют 377px и переносились на вторую строку). */
/* Кнопка возврата к плиткам альбомов (25.07): вне потока, сбоку от обложки —
   PDP-раскладка не сдвигается. На узкой одной колонке — обычной строкой над книгой. */
#wizStep1 { position: relative; }
#wizStep1 .pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
@media (min-width: 861px) {
  #wizStep1 .pdp {
    grid-template-columns: minmax(0, 1.02fr) minmax(400px, .98fr);
    gap: clamp(28px, 3.2vw, 46px);
  }
}
/* Верх книги = верх заголовка. Высота задана пропорцией, а не фиксированными 409px:
   интерфейс так же не прыгает при переключении форматов, но пустого воздуха под книгой
   нет. Через aspect-ratio, потому что колонка резиновая (1fr) и её ширину в px не
   выразить: вертикальная обложка = 70% ширины × 1.45 ≈ 1.015 → соотношение 1/1.015.
   Это и освободило место под CTA на ноутбуке 650px (замер 04.08: 409px под книгу ≤260px). */
#wizStep1 .pdp-media {
  padding: 0 10px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio: 1 / 1.015;
  max-height: 409px;
}

#wizStep1 .cover {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 2px 4px 4px 2px;
  --u: 2.72px;
  box-shadow:
    calc(var(--u)*-0.6) calc(var(--u)*0.8) calc(var(--u)*1.2) rgba(46,28,18,.22),
    calc(var(--u)*-1.6) calc(var(--u)*2.2) calc(var(--u)*3.6) rgba(46,28,18,.15),
    calc(var(--u)*-3.4) calc(var(--u)*4.6) calc(var(--u)*8) rgba(46,28,18,.09);
}
#wizStep1 .cover.fmt-pt { aspect-ratio: 200/290; }
#wizStep1 .cover.fmt-ls { aspect-ratio: 290/200; }
/* scale(1.012) — срезать белые уголки рендера у скруглённых углов книги */
#wizStep1 .cover img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.012); }
/* Корешок твёрдого переплёта (04.08). Раньше эффект жил внутри самих рендеров
   assets/fotokniga/pdp-*.webp на посадочной; здесь на обложках стоят архивные фото клиента,
   поэтому корешок рисуем слоем — иначе пришлось бы вернуть стоковые рендеры и потерять
   «ваше фото станет такой книгой».
   Ширина через --u (тот же множитель, что у теней): крупная обложка 2.6 → ~11px,
   миниатюры ряда 0.68 → ~3px. Полоса не масштабируется в процентах намеренно —
   у физической книги толщина корешка от формата почти не зависит.
   Подбор оператора 04.08: 2.9 → 5.8 (вдвое) → 4.35 (минус четверть) — кромка читается,
   но не спорит с фотографией. Прозрачность там же ослаблена на четверть: корешок должен
   угадываться как объём книги, а не выглядеть нарисованной полосой поверх кадра.
   Три слоя как на референсе: тканевый торец → блик на сгибе → падающая тень на фото. */
#wizStep1 .cover::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 1;
  width: calc(var(--u) * 4.35);
  background:
    linear-gradient(90deg,
      rgba(28,18,12,.465) 0%,
      rgba(28,18,12,.345) 38%,
      rgba(255,247,238,.15) 62%,
      rgba(28,18,12,.225) 82%,
      rgba(28,18,12,.045) 100%);
  box-shadow: calc(var(--u) * 1.1) 0 calc(var(--u) * 1.6) rgba(28,18,12,.12);
}
#wizStep1 .cover::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(20,10,5,.34));
}
/* Позиция и типографика печатного заголовка — из shared/cover-render-spec.js (top 76%, поля 8%,
   кегль 9cqw). font-feature-settings lnum: дефолт Playfair = oldstyle, «5» ныряет под базовую. */
#wizStep1 .cover .cv-title {
  position: absolute; left: 8%; right: 8%; top: 76%; z-index: 2;
  text-align: center; color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: 9cqw;
  line-height: 1.15; letter-spacing: .01em; white-space: nowrap;
  font-feature-settings: 'lnum' 1;
  text-shadow: 0 1px 12px rgba(0,0,0,.45);
}
#wizStep1 .pdp-cover { margin: 0 auto; flex: none; }
/* Пропорции реальные (13px/см): квадрат 20 = ширине вертикальной и высоте горизонтальной.
   Масштаб снижен с 13.6 (04.08). Потолок ширины держать согласованно с aspect-ratio
   у .pdp-media выше: вертикальная обложка = ширина × 1.45 и не должна вылезать за блок. */
#wizStep1 .pdp-cover.fmt-sq { width: min(260px, 70%); --u: 2.6px; }
#wizStep1 .pdp-cover.fmt-pt { width: min(260px, 70%); --u: 2.6px; }
#wizStep1 .pdp-cover.fmt-ls { width: min(377px, 92%); --u: 3.77px; }

/* Модельный ряд под книгой: те же рендеры, низ книг на одной линии, подписи Caveat.
   Зазор 28→14px (04.08): три миниатюры (110+160+110) с двумя зазорами по 28px требуют
   436px, а левая колонка ~276px — при `flex: none` ряд не сжимался и лез в правую
   колонку поверх текста (замер: третья книга заходила на 47px за край колонки). */
#wizStep1 .pdp-row { display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin-top: 8px; }
#wizStep1 .pdp-row .ri { text-align: center; }
#wizStep1 .pdp-row .cover { flex: none; margin: 0 auto; }
#wizStep1 .pdp-row .cover::after { display: none; }
/* Масштаб 5.5px/см вместо 8: ряд обязан лечь в ширину левой колонки (~276px).
   68+98+68 + два зазора 14px = 262px. Пропорции между форматами сохранены. */
#wizStep1 .rb-sq { width: 68px; aspect-ratio: 1/1; --u: 0.68px; }
#wizStep1 .rb-ls { width: 98px; aspect-ratio: 290/200; --u: 0.98px; }
#wizStep1 .rb-pt { width: 68px; aspect-ratio: 200/290; --u: 0.68px; }
#wizStep1 .rcap {
  display: block; margin-top: 6px;
  font-family: 'Caveat', cursive; font-size: 17px; font-weight: 500;
  color: var(--muted); white-space: nowrap;
}

/* Заголовок и цена — Georgia (канон UI-хрома проекта) вместо Lora посадочной: оба серифные,
   различие незаметно, а новый шрифт в прод не тащим. */
/* Заголовок и цена в одной строке — экономия вертикали, чтобы CTA умещался без прокрутки
   на ноутбуке (замер 04.08: при высоте окна 650px кнопка уходила на 133px за экран).
   Цена стоит сразу за названием, БЕЗ space-between: разлёт по краям на 90px разрывал пару
   на два несвязанных угла. */
#wizStep1 .pdp-head {
  display: flex; align-items: baseline;
  gap: 18px; flex-wrap: wrap;
}
/* Гарнитура — --font-head (Onest), решение оператора 28.07 про заголовки редактора фотокниг.
   Карточка шага 1 отставала на Georgia от 24.07, когда действовал только запрет Playfair. */
#wizStep1 .pdp-title {
  font-family: var(--font-head);
  font-weight: 600; line-height: 1.15;
  letter-spacing: -.015em;
  font-size: clamp(26px, 3.4vw, 38px);
  color: var(--fg);
}
/* Цена тише заголовка (25px против 34,5px): раньше оба были Georgia bold с разницей 2,5px и
   читались как два заголовка. Табличные цифры — «2 990» и «3 590» одной ширины, строка не
   дёргается при смене формата (у Georgia цифры пропорциональные).
   ⚠️ Знак ₽ (U+20BD) не входит в unicode-range Onest — рисуется подставным шрифтом. */
#wizStep1 .pdp-price {
  font-family: var(--font-head);
  font-size: clamp(22px, 2.6vw, 25px);
  font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}
#wizStep1 .pdp-lbl {
  margin-top: 16px;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
}
#wizStep1 .size-tiles { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
/* Что покрытие делает со светом (канон LAMINATIONS). Подпись, а не второй выбор: ламинация
   с 26.07 одна на всю книгу, и объяснять надо разницу вариантов, а не место применения. */
#wizStep1 .pdp-lam-hint { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
#wizStep1 .tile {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 11px 16px;
  cursor: pointer;
  background: var(--card);
  font-family: var(--sans);
  font-size: 15px; font-weight: 600;
  color: var(--fg); text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#wizStep1 .tile:hover { border-color: var(--line-strong); }
#wizStep1 .tile small { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
/* Выбранная плитка — заливка + пометка из цветового кода. Прежний чёрный контур читался
   как обводка ошибки и не совпадал ни с одним другим «выбрано» в продукте. */
#wizStep1 .tile--sel {
  background: var(--pick-bg);
  border-color: var(--pick-mark);
  box-shadow: inset 0 0 0 1px var(--pick-mark);
}
/* Одна колонка: второй выбор ламинации убран 26.07, но сетка осталась двухколоночной —
   пара «Матовая/Глянцевая» ужималась в половину ширины и переносилась в столбик
   (замер 04.08: 90px вместо 45px, из-за чего CTA не влезал на экран ноутбука). */
#wizStep1 .lam-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
/* Компактнее базовой плитки: пара «Матовая/Глянцевая» обязана лечь в ОДНУ строку
   (регресс поймал прогон адаптивности 24.07). С 04.08 колонка полной ширины, но кегль
   оставлен компактным — на телефоне пара всё ещё близка к пределу строки. */
#wizStep1 .lam-row .tile { padding: 11px 12px; font-size: 13.5px; }
/* Отступы сжаты (04.08) ради умещения CTA на экране ноутбука: кегли не уменьшаем — режем
   только воздух между блоками, шрифты остаются по мобильному канону (≥15px). */
#wizStep1 .pdp-includes {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 15px; color: var(--fg);
}
/* Характеристики печати — свёрнуты по умолчанию: на экране выбора размера человек решает
   «какой формат», а не изучает материалы. Данные типографии внутри (см. разметку).
   Шапка — «таблетка»: залитый блок со скруглением, а не строка между линейками. Радиус 14px
   при высоте 52px держится в каноне «≤ четверти высоты» (pill только для крупных CTA). */
/* Подложка и скругление держит сам блок, а не шапка со списком по отдельности: так
   свёрнутое и раскрытое состояния — одна плашка, а не два стыкующихся прямоугольника. */
#wizStep1 .pdp-specs {
  margin-top: 14px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
#wizStep1 .pdp-specs summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 18px; min-height: 52px;
  font-size: 15px; color: var(--fg);
  transition: color 0.15s ease;
}
#wizStep1 .pdp-specs summary::-webkit-details-marker { display: none; }
/* Наведение не заливает шапку: подложка уже есть у плашки, вторая заливка поверх неё
   читалась бы как выбор. Отзывается только надпись и стрелка. */
#wizStep1 .pdp-specs summary:hover,
#wizStep1 .pdp-specs summary:hover .pdp-specs-chev { color: var(--pick-ink); }
#wizStep1 .pdp-specs-chev { flex: none; color: var(--muted); transition: transform 0.18s ease, color 0.15s ease; }
#wizStep1 .pdp-specs[open] .pdp-specs-chev { transform: rotate(180deg); }
#wizStep1 .pdp-specs-body {
  padding: 2px 18px 16px;
}
/* Строка состава книги живёт ВНУТРИ плашки (барьер frontend-invariants требует её наличия
   и объёма страницами, решение 03.08). Своя граница ей здесь не нужна — рамку даёт плашка. */
#wizStep1 .pdp-specs .pdp-includes {
  margin: 0; padding: 0 0 10px; border-top: 0;
}
#wizStep1 .pdp-specs-list { margin: 0; padding: 0; }
#wizStep1 .pdp-specs-list > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-top: 1px solid var(--line);
  font-size: 14.5px;
}
#wizStep1 .pdp-specs-list dt { margin: 0; color: var(--muted); }
#wizStep1 .pdp-specs-list dd { margin: 0; text-align: right; color: var(--fg); }
#wizStep1 .price-rows { list-style: none; margin-top: 10px; padding: 0; border-top: 1px solid var(--line); }
#wizStep1 .price-rows li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 2px; border-bottom: 1px solid var(--line);
  font-size: 15px;
}
#wizStep1 .price-rows .k { color: var(--muted); }
#wizStep1 .price-rows .v { font-weight: 400; text-align: right; color: var(--fg); }
/* CTA — фирменная терракота приложения (в приложении .btn занят глобально, поэтому стиль
   лежит на albums-специфичном .pdp-cta). Медовый #ffc95c посадочной здесь не берём:
   в Мастерской человек уже внутри продукта, кнопка обязана совпадать с акцентом приложения. */
#wizStep1 .pdp-cta {
  display: block; width: 100%; margin-top: 16px;
  border: 0; cursor: pointer; text-align: center;
  /* 19px/700, а не 16px/600: белым по терракоте контраст 4,26:1, и он проходит норму
     только как крупный текст (≥18.66px при полужирном). Кегль здесь — доступность. */
  font-family: var(--sans); font-size: 19px; font-weight: 700;
  background: var(--accent); color: #fff;
  border-radius: 999px; padding: 13px 26px;
  transition: background 0.15s ease, transform 0.15s ease;
}
#wizStep1 .pdp-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }

/* ── Лента превью товара на карточке фотокниги (04.08) ──────────────────
   Бюджет по вертикали: книга 284px + освобождённый ряд миниатюр 133px = 417px. */
#wizStep1 .pdp-media,
#wizStep1 .pdp-row { display: none; }

/* Визуал вперёд (правка оператора 04.08): кадр забирает 3/5 ширины, вся правая колонка
   с размерами, ламинацией и ценой — 2/5. Было почти поровну (1.02fr / 0.98fr), и книга
   не успевала «ударить» глазом раньше формы. Нижний предел правой колонки опущен с
   400px до 320: иначе при 3fr/2fr она упирается в минимум и пропорция не наступает. */
@media (min-width: 861px) {
  #wizStep1 .pdp { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); }
}

#wizStep1 .pdp-gal { display: flex; flex-direction: column; gap: 10px; }
/* Кадр вписывается целиком (contain): у кадров размеров по краям размерные линии с
   цифрами — обрезать их нельзя, они и есть смысл картинки. */
#wizStep1 .pdp-gal-stage {
  /* Высота считается от ширины колонки по пропорции кадров (все семь — 1000×747), а не
     фиксируется: при фикс. 340px расширенная колонка оставляла бы поля по бокам, и
     выигранная ширина не доставалась бы картинке. */
  aspect-ratio: 1000 / 747;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  /* Подложка ровно того же белого, на котором сняты кадры (--card = #ffffff), плюс
     радиус и тень карточки (решение оператора 09.08). Кадры белые, а фон витрин
     РАЗНЫЙ — лендинг #fafaf7, Мастерская #faf6ef: под оба одним файлом картинки не
     подогнать. Подложка снимает вопрос совсем — белое поле читается как карточка
     товара, а не как несведённый фон, и работает на обеих витринах разом. */
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
/* Без обрамления (правка оператора 04.08): кадры сняты на чистом белом, кант вокруг
   них оператору не понравился — граница держится на разнице белого кадра и кремовой
   страницы.
   Кадры лежат АБСОЛЮТНО друг на друге: при листании уходящий и приходящий должны
   разъезжаться в одном месте, а в потоке они встали бы рядом и окно поехало. */
#wizStep1 .pdp-gal-stage img {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
  cursor: zoom-in;
}
#wizStep1 .pdp-gal-stage img.pdp-in-next  { animation: pdpFrameInFromRight .32s cubic-bezier(.22,.61,.36,1) both; }
#wizStep1 .pdp-gal-stage img.pdp-in-prev  { animation: pdpFrameInFromLeft  .32s cubic-bezier(.22,.61,.36,1) both; }
#wizStep1 .pdp-gal-ghost { pointer-events: none; z-index: 1; }
#wizStep1 .pdp-gal-ghost.pdp-out-next { animation: pdpFrameOutToLeft  .32s cubic-bezier(.22,.61,.36,1) both; }
#wizStep1 .pdp-gal-ghost.pdp-out-prev { animation: pdpFrameOutToRight .32s cubic-bezier(.22,.61,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
  #wizStep1 .pdp-gal-stage img.pdp-in-next,
  #wizStep1 .pdp-gal-stage img.pdp-in-prev,
  #wizStep1 .pdp-gal-ghost.pdp-out-next,
  #wizStep1 .pdp-gal-ghost.pdp-out-prev { animation: none; }
}
/* Стрелки листания кадров (правка оператора 04.08): живут ПОВЕРХ крупного кадра
   и проявляются только при наведении на него — в покое ничего не загораживают.
   Прячутся совсем, когда листать в эту сторону нечего. */
#wizStep1 .pdp-gal-stage { position: relative; }
#wizStep1 .pdp-gal-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; padding: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--fg); cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, border-color .15s ease;
}
#wizStep1 .pdp-gal-prev { left: 8px; }
#wizStep1 .pdp-gal-next { right: 8px; }
#wizStep1 .pdp-gal-stage:hover .pdp-gal-arrow:not([hidden]) { opacity: 1; pointer-events: auto; }
/* Клавиатура: фокус обязан показывать стрелку, иначе Tab ведёт на невидимую кнопку. */
#wizStep1 .pdp-gal-arrow:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--fg); outline-offset: 2px; }
#wizStep1 .pdp-gal-arrow:hover { border-color: var(--line-strong); }
#wizStep1 .pdp-gal-arrow[hidden] { display: none; }
/* Лента горизонтальная: кадров больше, чем влезает в колонку (~279px).
   Полосу прокрутки прячем — она съедала бы высоту миниатюр, жест на тач-устройствах
   работает и без неё. */
#wizStep1 .pdp-gal-strip {
  flex: 1 1 auto; min-width: 0;
  display: flex; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
}
#wizStep1 .pdp-gal-strip::-webkit-scrollbar { display: none; }
/* Крупнее на 30% и без скруглений (правка оператора 04.08): 62 → 80px.
   Миниатюра повторяет пропорцию кадров (1000×747), а не квадратная: квадрат с
   object-fit:cover срезал по 12,7% с каждого бока, и превью показывало не то, что
   открывалось крупно (жалоба оператора 09.08). Высота 80px сохранена, ширина едет
   за пропорцией. */
#wizStep1 .pdp-gal-thumb {
  flex: none; width: calc(80px * 1000 / 747); height: 80px;
  padding: 0; border: 1.5px solid var(--line); border-radius: 0;
  /* Тот же белый, что под крупным кадром: иначе лента висела бы на кремовом, а окно
     стояло на белом, и подложка читалась бы как случайная. */
  background: var(--card); cursor: pointer; overflow: hidden;
  scroll-snap-align: start;
  transition: border-color .15s ease;
}
#wizStep1 .pdp-gal-thumb:hover { border-color: var(--line-strong); }
#wizStep1 .pdp-gal-thumb--sel { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
/* Обводку фокуса рисуем только для клавиатуры. При клике мышью она садилась поверх
   рамки выбора и лента показывала два выделения сразу. */
#wizStep1 .pdp-gal-thumb:focus:not(:focus-visible) { outline: none; }
/* contain, как у крупного кадра: миниатюра — уменьшенная копия того, что откроется,
   а не вырезка из центра. Пропорция окна миниатюры уже равна пропорции кадров, так
   что полей по краям при этом не остаётся. */
#wizStep1 .pdp-gal-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Три размера в ОДНУ строку (правка оператора 04.08). По своей ширине они складывались
   в 377px при колонке 328 — третья плитка срывалась на вторую строку. Тянем их в равные
   доли вместо ширины по содержимому: длинная подпись «горизонтальная» задаёт общий
   размер, плитки остаются одинаковыми. Кнопку CTA не уменьшаем, она вне этого блока. */
#wizStep1 #wizFormatTiles {
  flex-wrap: nowrap;
  gap: 8px;
}
#wizStep1 #wizFormatTiles .tile {
  flex: 1 1 0; min-width: 0;
  padding: 10px 6px;
  font-size: 14px;
  text-align: center;
}
#wizStep1 #wizFormatTiles .tile small { font-size: 11.5px; }

@media (max-width: 860px) {
  /* На телефоне колонка одна, во всю ширину — пропорции кадра хватает, потолок не нужен. */
  #wizStep1 .pdp-gal-stage { height: auto; }
  /* Колонка во всю ширину экрана — возвращаем плиткам кегль мобильного канона. */
  #wizStep1 #wizFormatTiles .tile { padding: 11px 10px; font-size: 16px; }
  #wizStep1 #wizFormatTiles .tile small { font-size: 14px; }
  /* Тач-цель: на телефоне миниатюры крупнее — колонка во всю ширину экрана. */
  #wizStep1 .pdp-gal-thumb { width: calc(94px * 1000 / 747); height: 94px; }
  /* На тач-устройстве наведения нет — стрелки показываем постоянно. */
  #wizStep1 .pdp-gal-arrow:not([hidden]) { opacity: 1; pointer-events: auto; }
}

@media (max-width: 860px) {
  /* Высота под самый высокий формат (вертикальный = ширина×1.45), а не фиксированные 409px:
     интерфейс так же не прыгает при смене формата, но книга не вылезает за блок на телефоне. */
  #wizStep1 .pdp-media { height: calc(min(272px, 70vw) * 1.45); padding-bottom: 16px; }
  #wizStep1 .pdp-row { gap: 18px; }
  #wizStep1 .rb-sq, #wizStep1 .rb-pt { width: 84px; }
  #wizStep1 .rb-ls { width: 122px; }
  #wizStep1 .rcap { font-size: 19px; }
  /* Цель касания ≥44px (стандарт адаптивности): компактная плитка ламинации давала 40px. */
  #wizStep1 .lam-row .tile { padding: 13px 12px; }
}
@media (max-width: 480px) {
  #wizStep1 .lam-row { grid-template-columns: 1fr; }
}