/* ============================================================
   COVERPRESS — stock.css
   Раздел «Готовые картинки» (/stock). Вёрстка взята у библиотеки
   главной 1:1 (main.css + lib-shelves.css + home.css); здесь только
   то, чего у главной нет: строка цены, лестница цены, карточка-стопка,
   сетка картинок с выбором, панель набора и крупный вид.
   Разметка — stock.html, поведение — assets/js/stock.js.
   ============================================================ */

/* ── Подзаголовок: две строки ─────────────────────────────────── */
.stock-sub { color: #111; }
.stock-sub2 { margin-top: 2px; }

/* ── Один акцент в первом экране ──────────────────────────────
   Коралл в первом экране ровно один — плашка слова в заголовке
   (решение владельца 2026-09-04). Активный раздел в сайдбаре стоит
   рядом с ней и спорит за внимание, поэтому здесь он тёмный —
   тот же вид, что этот список принимает на планшете. */
.page-stock .lib-tab.active { background: #111; color: #fff; }
.page-stock .lib-sections-item.active { background: #111; color: #fff; }

/* Заголовок раздела стоит по оси каталога, а не по оси окна: под ним
   слева сайдбар, и центр страницы центром витрины не является. */
@media (min-width: 1069px) {
  .page-stock .home-hero {
    padding-left: calc(var(--ap-edge) + var(--ap-side) + var(--ap-side-gap));
  }
}

/* ── Строка «цена · бесплатные» ───────────────────────────────
   Под подзаголовком, тихо: цифры жирные, а не в плашках. Прежние
   ценник-вспышка и коралловая полоса убраны — в первом экране
   должен быть один акцент, плашка слова в заголовке. */
.stock-line {
  margin-top: 10px;
  font-size: clamp(14px, 1.4vw, 17px);
  color: var(--text-2);
}
.stock-line b { color: #111; font-weight: 700; }
.stock-line .dot { padding: 0 4px; color: #c7c7cc; }
.stock-line-act {
  border: none; background: none; padding: 0;
  font: inherit; color: var(--accent); font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.stock-line-act:hover { color: #E85A37; }

/* ── Блоки ниже каталога ──────────────────────────────────────
   Поля те же, что у каталога (--ap-edge) — левый край всех блоков
   страницы стоит по одной линии. Шапка блока — готовые классы
   .section-head / .section-title / .section-sub. Вопросов и ответов
   здесь нет: они целым разделом на странице «Как устроено». */
.stock-below { padding: 0 var(--ap-edge); }
.st-sec { padding-top: 72px; }
.st-sec:last-child { padding-bottom: 88px; }
.stock-below .section-head { margin-bottom: 32px; }

/* Лестница цены. Внутри плитки два яруса:
   верхний — объём слева, итог за набор справа, между ними черта;
   нижний — крупная цена слева, подпись «за картинку» справа по
   базовой линии. Цифры всех трёх плиток стоят на одной высоте. */
.st-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.st-step {
  position: relative;
  padding: 24px 26px 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}
.st-step.is-best { border-color: var(--accent); }
.st-step-flag {
  position: absolute; top: -11px; right: 22px;
  padding: 3px 12px; border-radius: 100px;
  background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
}

.st-step-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border);
}
.st-step.is-best .st-step-top { border-bottom-color: rgba(255, 107, 71, .35); }
.st-step-vol { font-size: 15px; font-weight: 600; color: #111; }
.st-step-sum { font-size: 15px; color: var(--text-2); white-space: nowrap; }

.st-step-price {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 18px;
}
.st-step-num {
  font-size: clamp(38px, 4.4vw, 52px); font-weight: 300;
  letter-spacing: -0.03em; line-height: 1; color: #111;
}
.st-step.is-best .st-step-num { color: var(--accent); }
.st-step-per { font-size: 14px; color: var(--text-2); white-space: nowrap; }

/* Валюта — мелко и тихо: цифра важнее знака. */
.rub { font-size: .82em; color: var(--text-2); }

/* Три тезиса: жирная строка + короткая серая расшифровка. */
.st-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; border-top: 1px solid var(--border); }
.st-card { padding: 28px 24px 28px 0; }
.st-card + .st-card { padding-left: 24px; border-left: 1px solid var(--border); }
.st-card h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.st-card p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--text-2); }
/* Условие лицензии — тише основного текста карточки, но на виду: клиент
   обязан понимать, что картинка не эксклюзивна (оферта, п. 6.5). */
.st-card-note { font-size: 14px; color: var(--text-3); }
.st-card-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 14px; color: var(--accent); font-size: 15px; font-weight: 500;
  text-decoration: none; transition: gap .2s var(--ease);
}
.st-card-link:hover { gap: 9px; }

@media (max-width: 899px) {
  .st-steps { grid-template-columns: 1fr; }
  .st-cards { grid-template-columns: 1fr; }
  .st-card { padding: 24px 0; border-top: 1px solid var(--border); }
  .st-card:first-child { border-top: none; }
  .st-card + .st-card { padding-left: 0; border-left: none; }
}
@media (max-width: 734px) {
  .st-sec { padding-top: 52px; }
  .st-step { padding: 26px 22px; }
}

/* ── Карточка стиля в разделе: стопка ─────────────────────────
   Две подложки выглядывают из-за плитки — знак, что внутри не
   одна картинка, а пачка. Приём карточек-коллекций у стоков и
   аудиокниг Apple Books. Счётчик — вторым пузырьком слева снизу
   (класс .lib-shelf-tag, тот же, что у анонсов на главной). */
/* Стопка рисуется ВНУТРИ квадрата карточки: ряд полки прокручивается
   вбок (overflow-x), а это автоматически обрезает и по вертикали —
   выступающие наружу подложки в полке просто не видны. Поэтому
   картинка сдвинута вниз-влево на 9 px, а освободившийся уголок
   сверху справа занимают две подложки. */
.st-stack .lib-cover {
  background: none;
  box-shadow: none;
}
.st-stack .lib-cover img {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  width: calc(100% - 9px); height: calc(100% - 9px);
  border-radius: 2.5px;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.14);
}
/* Подложки белые, а страница почти белая (#fafafa): с прежней обводкой
   в полтона стопка была видна только у тёмных обложек, у светлых
   (Матисс, Хокусай) исчезала совсем. Даём каждой подложке контурную
   линию и короткую тень — пачка читается одинаково под любой картинкой. */
.st-stack .lib-cover::before,
.st-stack .lib-cover::after {
  content: "";
  position: absolute;
  width: calc(100% - 9px); height: calc(100% - 9px);
  border-radius: 2.5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.16), 0 2px 5px rgba(0,0,0,.10);
  transition: transform .25s var(--ease);
}
.st-stack .lib-cover::before { z-index: 1; left: 9px; top: 0; }
.st-stack .lib-cover::after  { z-index: 2; left: 4.5px; top: 4.5px; }
@media (hover: hover) {
  .st-stack:hover .lib-cover::before { transform: translate(1.5px, -1.5px); }
}

/* Картинка легла выше подложек — название стиля поднимаем над ней. */
.st-stack .lib-name { z-index: 4; }

/* Счётчик — в верхний левый угол картинки: внизу уже стоит название,
   два пузырька в одной строке на узкой карточке сталкиваются. */
.st-stack .lib-shelf-tag {
  left: 8px; bottom: auto; top: 17px;
  z-index: 4;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #111; font-weight: 500;
}

/* ── Сетка картинок стиля ────────────────────────────────────
   Колонки те же, что у сетки стилей главной (6), карточка квадратная. */
.st-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--ap-gutter);
  row-gap: var(--ap-gutter);
  min-width: 0;
}
.st-pic {
  position: relative;
  aspect-ratio: 1;
  border-radius: 2.5px;
  overflow: hidden;
  background: #f5f5f7;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.1);
  cursor: pointer;
  padding: 0; border: none; font: inherit;
}
.st-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Водяной знак СНЯТ из стилей (2026-09-04, этап 1 плана): его накладывает
   сервер прямо на превью (`/v1/stock/pic`, Services/Stock/Watermark).
   Слой в CSS теперь не только лишний, но и вредный — рисовал знак поверх
   знака и создавал ложное впечатление, будто картинка защищена вёрсткой.
   Правило прежнее: знак снимается только оплатой, инструментами браузера
   его снять нельзя. Класс оставлен пустым — разметка карточки не менялась. */
.st-mark { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Пришли по ссылке на эту картинку (с полки «Готовые картинки» на главной):
   на пару секунд обводим её, иначе среди полусотни соседей непонятно, ради
   какой открылся экран. */
.st-pic.is-focus { box-shadow: 0 0 0 3px var(--accent), 0 10px 30px rgba(0,0,0,.22); }

/* Отметка выбора — коралловый кружок в углу, как активное состояние сайта. */
.st-tick {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.9);
  background: rgba(0,0,0,.22);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.st-tick svg { opacity: 0; }
.st-pic.is-on .st-tick { background: var(--accent); border-color: var(--accent); }
.st-pic.is-on .st-tick svg { opacity: 1; }
.st-pic.is-on { box-shadow: 0 0 0 3px var(--accent); }

/* Лупа — крупный вид. Клик по самой карточке кладёт картинку в набор. */
.st-zoom {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.92); color: #111;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity .2s ease;
}
@media (hover: hover) { .st-pic:hover .st-zoom { opacity: 1; } }
@media (hover: none)  { .st-zoom { opacity: 1; } }

/* ── Набор: две пилюли над меню ───────────────────────────────
   Не сплошная полоса, а два отдельных пузырька на прозрачном фоне —
   тот же приём, что у нижнего меню (решение владельца): слева итог,
   справа действие. На смартфоне стоят НАД меню, не поверх него. */
/* Пилюли прижаты к левому краю, а не по центру: посреди экрана они
   закрывают картинки, ради которых человек сюда и пришёл. */
.st-bar {
  position: fixed; left: 16px; bottom: 18px;
  /* подсказка позиционируется относительно набора */
  z-index: 60;
  position: fixed;
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 32px);
}
.st-pill {
  display: flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 15px;
  border-radius: 100px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.08);
  white-space: nowrap;
}
.st-bar-count { font-size: 15px; font-weight: 500; white-space: nowrap; }
.st-bar-count b { font-weight: 700; }
.st-bar-note { font-size: 13px; color: var(--ap-muted); white-space: nowrap; }
/* Класс .btn задаёт только форму (main.css), цвет у каждой кнопки свой.
   Раньше кнопка лежала на белой полосе и читалась тёмным текстом; теперь
   она сама по себе пилюля, поэтому красим её как главное действие. */
/* Обе пилюли одной высоты: у .btn собственные поля 14×28 (main.css),
   рядом с итогом она была выше на 10 px и выглядела грузно. */
.st-bar .btn {
  white-space: nowrap;
  height: 38px; padding: 0 18px;
  font-size: 14px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255,107,71,.28);
}
.st-bar .btn:hover { background: var(--accent-hover, #E85A37); }
/* Пока набора мало, кнопка неактивна — но остаётся читаемой пилюлей:
   прозрачная коралловая на фоне картинок не читалась вовсе. */
/* Кнопка до минимума: выглядит выключенной, но нажимается — по нажатию
   выходит короткая подсказка, чего не хватает. */
.st-bar .btn.is-off {
  background: rgba(255,255,255,.96);
  color: var(--ap-muted);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.08);
}

/* Подсказка — тёмная пилюля над набором, уходит сама. */
.st-hint {
  position: absolute; left: 0; bottom: calc(100% + 8px);
  padding: 7px 14px; border-radius: 100px;
  background: rgba(17,17,17,.92); color: #fff;
  font-size: 13px; white-space: nowrap;
  opacity: 0; transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.st-hint.is-on { opacity: 1; transform: none; }

.st-bar .btn[disabled] {
  cursor: default;
  opacity: 1;
  background: rgba(255,255,255,.96);
  color: var(--ap-muted);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.08);
}
.st-bar-clear {
  border: none; background: none; color: var(--ap-muted);
  font: inherit; font-size: 13px; cursor: pointer; padding: 0 2px;
}
.st-bar-clear:hover { color: #111; }

/* ── Крупный вид ─────────────────────────────────────────────── */
.st-view { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; }
.st-view-back { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.st-view-frame { position: relative; z-index: 1; max-width: min(86vw, 860px); max-height: 86vh; border-radius: 12px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.32); }
.st-view-frame img { display: block; max-width: min(86vw, 860px); max-height: 86vh; }
/* Знак крупного вида тоже рисует сервер (та же ручка, ширина 1000). */
.st-view-close { position: absolute; top: 18px; right: 18px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: #111; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.st-view-add { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 2; }

/* ── Узкие экраны: брейкпоинты и колонки — те же, что у сетки главной
   (lib-shelves.css: 1068 → 5, 899 → 4, 734 → 2). ────────────────── */
@media (max-width: 1068px) { .st-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 899px)  { .st-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 734px)  {
  .st-grid { grid-template-columns: repeat(2, 1fr); }
  /* Пилюли набора встают НАД нижним меню, а не поверх него (решение
     владельца): высота меню — 6 + 64 + 6 плюс вырез экрана (mobile-bar.css),
     сверху ещё 8 на просвет. */
  /* Считаем не до края панели, а до самих кружков: у панели сверху ещё
     6 px собственных полей, из-за них пилюли выглядели оторванными.
     64 (панель) − 6 (поле) + 4 (просвет) = 62. */
  .st-bar {
    left: 12px; bottom: calc(62px + env(safe-area-inset-bottom));
    gap: 6px; max-width: calc(100vw - 24px);
  }
  .st-pill { height: 34px; padding: 0 13px; }
  .st-bar .btn { height: 34px; padding: 0 16px; font-size: 13.5px; }
  .st-bar-count { font-size: 14px; }
  .st-bar-note { display: none; }
}

/* Смартфон в альбоме: меню ниже (46 px), высоты мало — пилюли ещё компактнее
   и без лишних слов, только цифры и действие. */
@media (max-height: 500px) and (max-width: 940px) {
  /* Альбом: кружки меню стоят по центру строки, слева пусто — пилюли
     встают в ту же строку, слева от кружков, а не над ними. Кружок 46,
     пилюля 32, поле панели 4 → сдвиг (46 − 32) / 2 + 4 = 11. */
  .st-bar { left: 12px; bottom: calc(11px + env(safe-area-inset-bottom)); gap: 6px; }
  /* Кнопка-иконка — круглая, по высоте пилюли. */
  .st-bar .btn.st-btn-ico { width: 32px; padding: 0; border-radius: 50%; }
  .st-pill { height: 32px; padding: 0 12px; }
  .st-bar .btn { height: 32px; padding: 0 14px; font-size: 13px; }
  .st-bar-count { font-size: 13.5px; }
  .st-bar-note { display: none; }
}

/* ── Окно подтверждения заказа ───────────────────────────────────────────
   Галочка согласия с офертой — условие сделки (решение владельца
   2026-09-04): галочкой клиент принимает договор, по которому получает
   файлы. Отдельное окно, а не строка в панели: на смартфоне покупка живёт
   кнопкой в нижнем меню, и галочке там места нет — а видна она должна быть
   одинаково на всех экранах. */
.st-ok-box {
  position: relative; z-index: 1;
  width: min(92vw, 420px);
  padding: 22px 22px 18px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 32px 80px rgba(0,0,0,.32);
}
.st-ok-head { font-size: 18px; font-weight: 700; }
.st-ok-sum { margin-top: 6px; font-size: 15px; color: var(--text-2); }
.st-ok-sum b { color: var(--text); }
.st-ok-agree {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px; font-size: 14px; line-height: 1.45; cursor: pointer;
}
.st-ok-agree input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.st-ok-agree a { color: var(--accent); }
.st-ok-note { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.st-ok-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.st-ok-hint { margin-top: 10px; font-size: 13px; color: var(--accent); }

/* ── Поиск: фильтр по стилю и пустая находка ─────────────────────────────
   Чипы сужают находку, не заставляя набирать новый запрос, — так устроен
   поиск на больших стоках. Пустой результат не оставляем пустым: под ним
   стоят слова, которыми в фонде вообще ищут. */
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.st-chip {
  height: 32px; padding: 0 14px;
  border: 1px solid var(--border, #e5e5e5); border-radius: 16px;
  background: var(--surface); color: var(--text-2);
  font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
.st-chip:hover { color: var(--text); }
.st-chip.is-on { background: var(--text); border-color: var(--text); color: #fff; }
.st-empty { margin-bottom: 18px; }
.st-empty p { margin: 8px 0 14px; color: var(--text-2); }