/* Тема витрины лендинга (fotokniga.html) поверх albums-section.css.
   Зачем отдельный файл, а не правка style.css: style.css — источник палитры Мастерской
   (workshop.html), она обязана остаться терракотовой (#b8652a) по требованию оператора.
   Зачем не albums-section.css: он машинно порождается из style.css скриптом
   scripts/build-albums-section-css.mjs — ручная правка была бы затёрта следующей сборкой
   и уронила бы test/albums-section-css-sync.test.mjs.
   Подключается сразу после albums-section.css (см. fotokniga.html), поэтому по каскаду
   перекрывает его переменные на тех же селекторах #build, .album-hdr-slot.

   Решение 07.08: главный CTA раздела «Фотокниги» — жёлтый #ffc95c с тёмным текстом
   #1c1410 (контраст 11.89:1), но ТОЛЬКО заливка кнопок. --accent используется в
   albums-section.css и как заливка (кнопки, белый текст), и как цвет текста/бордера
   на светлом фоне (ink/border) — простой сменой переменной жёлтый утёк бы туда, дав
   жёлтый текст на светлом фоне (нечитаемо). Поэтому переменная НЕ трогается, а точечно
   переопределяются 12 fill-селекторов (замер по файлу: background var(--accent) + color:#fff
   или его эквивалент), у которых также свои hover-состояния — часть на var(--accent-hover),
   часть на своих хардкод-hex, поэтому у hover прописан жёлтый оттенок явно. */

/* ── Канон обложки раздела (style.css #wizStep1 .cover, 5 правил) ─────────────────────────
   В машинное подмножество он НЕ попадает: генератор отбрасывает селекторы, чьи классы
   лендинг рисует сам, а `.cover` лендинг рисует — это его лента обложек (.covers-track).
   Замер 07.08: из пяти правил канона в albums-section.css доехали два (fmt-pt/fmt-ls),
   а `#wizStep1 .cover`, `::before`, `::after`, `.cv-title`, `img` — ни одного. Обложка
   раздела оставалась без корешка переплёта и без градиента под печатным заголовком,
   а её геометрию задавало витринное правило лендинга (flex-basis 320-470px, aspect 1/1).
   Скоуп #build держит это внутри раздела: лента обложек на самой странице не затронута.
   Значения — копия канона; правится он в style.css, сюда переносится следом. */
#wizStep1 .cover {
  flex: none;
  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; }
#wizStep1 .cover img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.012); }
/* Корешок твёрдого переплёта: тканевый торец, блик на сгибе, падающая тень на фото.
   Ширина через --u (тот же множитель, что у теней) — подбор оператора 04.08. */
#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));
}
#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);
}
/* Сетка карточки. Само `display:grid` живёт в правиле витрины лендинга, которое заскоплено
   на #price, а канон раздела (style.css `#wizStep1 .pdp`) в подмножество не попал — грид
   не включался ничем, и карточка ложилась в одну колонку на всю ширину (замер 07.08:
   display:block, .pdp-info 920px вместо 341). Пропорция 3:2 — правка оператора 04.08:
   кадр забирает 3/5 ширины, размеры с ценой 2/5. */
#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, 3fr) minmax(320px, 2fr);
    gap: clamp(28px, 3.2vw, 46px);
  }
}
/* Карточку книги показывает ЛЕНТА ПРЕВЬЮ (.pdp-gal, 04.08), а статичная обложка с модельным
   рядом из трёх книг — прежний вид, оставленный в разметке. В Мастерской оба узла скрыты
   правилом style.css, в подмножество оно не попало: на лендинге под лентой висел лишний
   ряд «20×20 / 29×20 / 20×29», а размеры и так названы словами в плитках. */
#wizStep1 .pdp-media,
#wizStep1 .pdp-row { display: none; }
/* Ширина обложки — на случай, если ряд вернут. В подмножество доехали только fmt-pt и
   fmt-ls; fmt-sq (формат ПО УМОЛЧАНИЮ) потерялся, и после скоупа витринных правил ширину
   книге не задавал никто — обложка растягивалась на всю колонку. Пропорции 13px/см. */
#wizStep1 .pdp-cover { margin: 0 auto; flex: none; }
#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; }
#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;
}
/* Плитки размера и ламинации. В подмножество доехала только `.tile--sel` (выбранное
   состояние), а сама плитка и её подпись — нет: после скоупа витринных правил размеры
   слипались в строку («20×20 смквадратная») и лезли в две строки. */
#wizStep1 .size-tiles { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
#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; }
/* Строки «Печать / Доставка» под характеристиками: в разметке это <ul>, и без своих правил
   он рисовался маркированным списком с прилипшим значением («Печать3-4 рабочих дня»).
   Ключ слева, значение справа — как в эталоне. */
#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); }

/* Три плитки формата обязаны лечь в ОДИН ряд: nowrap + равные доли. Без этого правила
   «29×20 горизонтальная» переносилась на вторую строку (приёмка оператора 07.08). */
#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; }
/* Цена, надписи-рубрикаторы и строка «включено» — остаток канона карточки. */
#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 .pdp-includes {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 15px; color: var(--fg);
}
#wizStep1 { position: relative; }

#build .btn-accent-pill,
#build .plan-btn.fill,
#build .plan-card.is-active .plan-btn,
#build .album-btn-primary,
#build .albums-new-btn,
#build .wiz-step--active .wiz-step__num,
#wizStep1 .pdp-cta,
#build .album-card.create .plus,
#build .add-photos-card--selected .add-photos-card__check,
#build .album-btn-cta--primary,
#build .album-mobile-bar__btn--order,
.album-hdr-slot .btn-accent-pill,
.album-hdr-slot .album-btn-primary,
.album-hdr-slot .album-btn-cta--primary {
  background: #ffc95c;
  color: #1c1410;
}

/* Выключенные состояния возвращаем нейтральными. Селекторы темы специфичнее базовых
   :disabled из albums-section.css и без этого отката красили бы недоступную кнопку
   жёлтым — она читалась бы как активная (замер 07.08). */
#build .album-btn-cta--primary:disabled,
#build .album-btn-cta--primary[aria-disabled="true"],
#build .album-btn-cta--primary[aria-disabled="true"]:hover,
#build .album-btn-primary:disabled,
#build .albums-new-btn:disabled,
#build .plan-btn.fill:disabled,
#build .btn-accent-pill:disabled,
#wizStep1 .pdp-cta:disabled,
#build .album-mobile-bar__btn--order:disabled,
.album-hdr-slot .album-btn-cta--primary:disabled,
.album-hdr-slot .album-btn-cta--primary[aria-disabled="true"],
.album-hdr-slot .album-btn-cta--primary[aria-disabled="true"]:hover,
.album-hdr-slot .album-btn-primary:disabled,
.fmodal .fbtn--primary:disabled {
  background: #e8ddd0;
  color: #6a5a48;
  box-shadow: none;
}

#build .btn-accent-pill:hover,
#build .plan-btn.fill:hover,
#build .album-btn-primary:hover:not(:disabled),
#build .albums-new-btn:hover,
#wizStep1 .pdp-cta:hover,
#build .album-btn-cta--primary:hover,
.album-hdr-slot .btn-accent-pill:hover,
.album-hdr-slot .album-btn-primary:hover:not(:disabled),
.album-hdr-slot .album-btn-cta--primary:hover {
  background: #f0b23f;
  color: #1c1410;
}

/* .album-btn-cta--primary:disabled и [aria-disabled] в albums-section.css уже используют
   нейтральные #e8ddd0/#6a5a48, не зависящие от --accent — здесь их трогать не нужно. */

/* Модалки раздела (shared/modal.js) монтируются в document.body, ВНЕ #build и .album-hdr-slot,
   поэтому префикс #build до них не достаёт, а объявленная на тех областях палитра не
   наследуется. Замер 07.08 на лендинге: .fbtn--primary давал прозрачный фон с белым текстом
   (background: var(--accent) при неопределённой переменной) — кнопка «Ок» была невидима.
   Дефект существовал и до этой темы; правится здесь же, чтобы жёлтый CTA был сквозным. */
.fmodal .fbtn--primary {
  background: #ffc95c;
  color: #1c1410;
}
.fmodal .fbtn--primary:hover { background: #f0b23f; color: #1c1410; }
/* Ссылки и фокус внутри модалки — терракотовые: жёлтый как ink на белом нечитаем. */
.fmodal .fbtn:focus-visible,
.fmodal .fmodal__close:focus-visible { outline-color: #b8652a; }

/* Ink/border: --accent используется как цвет текста или бордера на светлом фоне —
   там жёлтый нечитаем, оставляем терракоту явным откатом на исходный #b8652a. */
#build .user-balance,
#build .user-menu-credits-row,
#build .legal a:not(.btn),
#build .mobile-balance-num,
#build .albums-firstalbum-eyebrow,
#build .albums-firstalbum-points li svg,
#build .albums-demo-eyebrow,
#build .albums-demo-gallery-link,
#build .albums-mob-topbar-burger,
#build .album-tray-sort-menu__item.is-active,
#build .album-page-variant:hover,
#build .album-btn-cta--secondary,
#build .album-btn-download,
#build .nav-link::after,
.album-hdr-slot .album-btn-cta--secondary,
.album-hdr-slot .album-btn-download {
  color: #b8652a;
}
#build .album-btn-cta--secondary,
#build .album-btn-download,
.album-hdr-slot .album-btn-cta--secondary,
.album-hdr-slot .album-btn-download {
  border-color: #b8652a;
}
#build .nav-link::after,
.album-hdr-slot .nav-link::after {
  background: #b8652a;
}
#build .album-title-input:focus,
#build .album-subtitle-input:focus,
#build .album-card-title-input,
#build .album-card.create:hover {
  border-color: #b8652a;
}
#build .album-photo-card.drag-over {
  outline-color: #b8652a;
}
#build .album-nav-thumb.is-drop-before::after,
#build .album-nav-thumb.is-drop-after::after {
  background: #b8652a;
}

/* ── Плитки книг по центру экрана (приёмка 09.08) ─────────────────────────────────────────
   В Мастерской список книг живёт в рабочей области рядом с боковым рельсом, и прижатая
   влево сетка там на месте. На витрине рельса нет: при 1-3 книгах плитки жались к левому
   краю широкого пустого экрана. `auto-fill` из albums-section.css оставляет ПУСТЫЕ треки
   (5 колонок по 190px независимо от числа книг), поэтому justify-content там ничего не
   двигает — нужен `auto-fit`, он схлопывает пустые треки, и только после этого центрирование
   работает. Правка витринная: Мастерской не касается (скоуп #build).
   Медиа-условие обязательно: на мобильном albums-section.css кладёт сетку в `repeat(2, 1fr)`
   (строка 2359, @media max-width 560px), а этот файл подключается ПОЗЖЕ — безусловное правило
   перебило бы медиа-запрос и схлопнуло список в одну колонку 190px (замер 09.08 на 390px:
   4 плитки столбиком). Совпадает с границей того же запроса. */
@media (min-width: 561px) {
  #build .albums-grid {
    grid-template-columns: repeat(auto-fit, minmax(158px, 190px));
    justify-content: center;
  }
}

/* ── Экран сборки не держит лендинговый ритм секции (приёмка 09.08) ───────────────────────
   fotokniga.html задаёт всем секциям страницы `section { padding: 68px 0 }` — это ритм
   посадочной между блоками. Экран параметров книги не блок лендинга, а рабочий экран, и
   отступ складывался с 22px обёртки `.albums-editor-wizard`: между низом шапки и заголовком
   карточки выходило 90px пустоты (замер 09.08, окно 1440 — шапка кончается на 66, заголовок
   начинается на 156). Снимаем только верх: низ секции держит воздух под ценовыми строками.
   14px вместо нуля — выбор оператора 09.08: с обёрткой выходит 36px, карточка подтянута к
   шапке и не липнет к ней. */
#wizStep1 { padding-top: 14px; }

/* ── Лайтбокс кадров товара витрины ───────────────────────────────────────────────────────
   Классы свои (fk-), а не общий `.lightbox` из albums-section.css: одноимённый класс в
   разметке лендинга превращает правило подмножества в «бьющее по лендингу» и роняет барьер
   test/albums-section-css-sync.test.mjs. Поэтому окно одевается здесь целиком. Значения
   копируют канон style.css (секция LIGHTBOX); правится он там, сюда переносится следом.
   Открывает и закрывает окно album.js по id #lightbox — классы ему безразличны. */
.fk-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20,12,6,0.94);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: zoom-out;
  padding: 24px;
  animation: lightboxIn 0.15s ease-out;
}
.fk-lightbox img {
  max-width: 95vw;
  max-height: 85vh;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: default;
}
.fk-lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.fk-lightbox-close:hover { background: rgba(255,255,255,0.25); }
.fk-lightbox-hint { color: rgba(255,255,255,0.7); font-size: 13px; margin: 0; }