/*
 * Карточка товара — то, чего нет в shop.css.
 *
 * ⚠ Отдельным файлом, а не строками в общем: карточку правят чаще всего
 * остального, и каждая её правка иначе задевала бы и список, и корзину.
 * Подключается ПОСЛЕ shop.css — отсюда работают перекрытия вроде плашки
 * наличия. Всё живёт под `.tovar`, чтобы ни один класс отсюда не всплыл на
 * чужой странице.
 *
 * ⚠ Своих цветов здесь нет. Всё считается от токенов витрины (их подставляет
 * ShopTheme из настроек арендатора), поэтому зелёный у того, кто перекрасил
 * магазин, останется его зелёным, а не станет нашим. Белый на синей заливке —
 * единственное исключение, и оно такое же, как в shop.css.
 */

/* ── Б.У / Новый ───────────────────────────────────────────────────────── */

.tovar__states { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 2px; }
.tovar__state { padding: 7px 16px; border: 1px solid var(--sh-line); border-radius: 999px;
	background: var(--sh-card); color: var(--sh-muted); font-size: 13px; }
.tovar__state:hover { border-color: var(--sh-blue); color: var(--sh-blue); text-decoration: none; }
.tovar__state.is-on { background: var(--sh-blue); border-color: var(--sh-blue);
	color: #fff; font-weight: 600; }
.tovar__state.is-on:hover { color: #fff; }

/* ── наличие ───────────────────────────────────────────────────────────── */

/*
 * ⚠ Плашка зеленеет, только когда товар ЕСТЬ. Одинаковый вид у «в наличии» и
 * «нет в наличии» заставляет читать текст, а цвет отвечает раньше чтения.
 * Оттенок замешан из токена наличия: свой светло-зелёный разошёлся бы с
 * перекрашенной витриной. Первая строка — запасная для старых браузеров,
 * которые не умеют color-mix: у них плашка останется серой, как была.
 */
.tovar__stock--have {
	background: var(--sh-bg);
	background: color-mix(in srgb, var(--sh-ok) 9%, var(--sh-card));
	border: .8px solid var(--sh-line);
	border-color: color-mix(in srgb, var(--sh-ok) 28%, var(--sh-card));
}

/*
 * ⚠ ОТДЕЛЬНОГО ПРАВИЛА ДЛЯ СРОКА ЗДЕСЬ НЕТ. В карточке товара «Под заказ ·
 * 2–3 дня» стоит заголовком плашки наличия — `.tovar__stock b.order` в
 * shop.css, — и вторая строка тем же янтарным сразу под ценой сказала бы то
 * же самое дважды. На плитке каталога такая строка есть (`.pcard__wait`)
 * ровно потому, что плашки наличия там нет вовсе.
 */

/* ── когда цены нет ───────────────────────────────────────────────────── */

/*
 * Врезка «почему цены нет» — сразу под строкой состояния, на месте плашки
 * наличия.
 *
 * ⚠ ЯНТАРНАЯ, А НЕ СЕРАЯ. Серая читалась бы как служебная приписка, мимо
 * которой глаз проходит; здесь же лежит единственный ответ на вопрос, с
 * которым человек и открыл карточку. И не красная: ничего не сломалось —
 * товар просто ждут. Тот же янтарный, что у «Под заказ» на плитке, и берётся
 * он токеном `--sh-wait`, поэтому темнеет вместе с ночной темой.
 *
 * ⚠ Плашки наличия рядом с ней НЕТ намеренно: две заливки подряд превращают
 * правую колонку в лестницу из прямоугольников, в которой не найти действие.
 * Врезка её и заменяет — см. разметку карточки.
 */
.tovar__why { background: var(--sh-wait-soft); border-radius: 10px;
	padding: 12px 14px; margin: 0 0 14px; }
.tovar__why b { display: block; font-size: 13px; font-weight: 600; color: var(--sh-wait); }
.tovar__why span { display: block; margin-top: 6px; font-size: 12px; line-height: 1.42;
	color: var(--sh-wait-deep); }

/*
 * Второе действие — «Спросить в Telegram» под подпиской.
 *
 * ⚠ Мягкой заливкой, а не второй синей кнопкой: две одинаковые кнопки подряд
 * означают, что выбор равнозначен, — а главное здесь подписка.
 *
 * ⚠ Цвет текста задаётся с тегом (`a.tovar__act--soft`) по той же причине,
 * что и у `a.tovar__act` ниже: белый на синей заливке приходит от него, и
 * без перекрытия на мягкой заливке осталась бы белая надпись на голубом.
 */
/* ⚠ Кнопка во всю ширину, а не рядом со значками: подписи вроде «Сообщить о
   поступлении» в оставшихся 160 пикселях ломаются пополам. Значки уезжают
   под неё своей строкой — так же нарисовано в макете. */
.tovar__act--lead { margin-top: 12px; }
.tovar__act--lead + .tovar__row { margin-top: 10px; }

.tovar__act--soft { margin-top: 10px; padding: 12px 0; font-size: 14px;
	background: var(--sh-soft); }
.tovar__act--soft + .tovar__row { margin-top: 10px; }
.tovar__act--soft:hover { background: color-mix(in srgb, var(--sh-blue) 18%, var(--sh-card)); }
a.tovar__act--soft,
a.tovar__act--soft:hover { color: var(--sh-blue); }

/* ── подписка на поступление ───────────────────────────────────────────── */

/*
 * «Сообщить о поступлении» — не кнопка со скриптом, а `<summary>`: поле для
 * контакта раскрывает сам браузер. Отсюда две странные на вид строки.
 *
 * ⚠ ЗНАЧОК-ТРЕУГОЛЬНИК ГАСИМ ДВАЖДЫ. `list-style: none` слушают Chrome и
 * Firefox, Safari — только `::-webkit-details-marker`. Оставь одно из двух,
 * и посреди синей кнопки во всю ширину висел бы чёрный треугольник.
 *
 * ⚠ РАСКРЫТАЯ КНОПКА ПЕРЕСТАЁТ БЫТЬ СИНЕЙ. Внизу формы стоит «Подписаться»,
 * и две синие кнопки подряд означали бы два равнозначных действия — а
 * верхняя после раскрытия уже не действие, а заголовок формы.
 *
 * ⚠ ИМЯ `tovar__sub` ЗАНЯТО, и это не придирка к словам: так называется
 * подзаголовок карточки («Ноутбук · артикул 100-000000123»), у него своё
 * правило в shop.css — 12 px серым. Пока подписка звалась так же, серым и
 * мелким становилась вся её форма, подзаголовок съезжал вниз на 12 px от
 * здешнего `margin-top`, а `querySelector('.tovar__sub')` находил не то
 * место. Поэтому здесь `wait` — то же слово, что в таблице подписок.
 */
.tovar__wait { margin-top: 12px; }
.tovar__wait + .tovar__row { margin-top: 10px; }
.tovar__wait > summary { margin-top: 0; list-style: none; cursor: pointer; }
.tovar__wait > summary::-webkit-details-marker { display: none; }
.tovar__wait[open] > summary,
.tovar__wait[open] > summary:hover { background: var(--sh-soft); color: var(--sh-blue); }

/*
 * ⚠ Поле стоит на `--sh-bg`, а не на `--sh-card`: карточка покупки сама
 * белая, и поле цвета карточки на ней не видно вовсе. Тот же приём, что у
 * плашки наличия, и он же избавляет от исключения для тёмной темы —
 * `--sh-bg` темнеет вместе со страницей.
 */
.tovar__waitform { margin: 10px 0 0; }
.tovar__waitsay { display: block; margin-bottom: 6px; font-size: 12px; color: var(--sh-muted); }
/* ⚠ `color: inherit` берёт цвет у блока покупки, а не у подписи: набранный
   телефон обязан читаться так же, как остальной текст карточки. */
.tovar__waitfield { display: block; width: 100%; box-sizing: border-box; margin-bottom: 8px;
	padding: 12px 14px; border: 1px solid var(--sh-line); border-radius: var(--sh-radius);
	background: var(--sh-bg); color: inherit; font: inherit; font-size: 14px; }
.tovar__waitfield:focus { outline: 2px solid var(--sh-blue); outline-offset: -1px; }

/* ⚠ Галочка согласия мельче полей и серая: это не поле, а условие. Крупной
   она спорила бы с самим действием, ради которого форму открыли. */
.tovar__waitagree { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 10px;
	font-size: 12px; line-height: 1.4; color: var(--sh-muted); cursor: pointer; }
.tovar__waitagree input { margin: 2px 0 0; }
.tovar__waitform .tovar__act { margin-top: 0; }

/*
 * Ответ на подписку — там же, где нажимали.
 *
 * ⚠ ОТКАЗ ЯНТАРНЫЙ, А НЕ КРАСНЫЙ. Красный означает «сломалось»; здесь не
 * сломалось ничего — контакт просто не разобрали, и человеку надо всего лишь
 * ввести его иначе. Тот же янтарный, что у врезки «почему цены нет», и он же
 * темнеет вместе с ночной темой.
 */
.tovar__said { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
	font-size: 13px; line-height: 1.42;
	background: color-mix(in srgb, var(--sh-ok) 14%, var(--sh-card)); color: var(--sh-ok); }
.tovar__said--bad { background: var(--sh-wait-soft); color: var(--sh-wait-deep); }

/* ── свидетельства ─────────────────────────────────────────────────────── */

/*
 * «Купили 12 раз» и «Осталось 2 шт» — между плашкой наличия и кнопкой.
 *
 * ⚠ Крупнее, чем на плитке (13 против 12), и это не разнобой. В списке
 * строка — довод в сравнении тридцати товаров и обязана не спорить с ценой;
 * здесь товар уже выбран, и это последнее, что человек читает перед «в
 * корзину».
 *
 * ⚠ Своей заливки нет намеренно. Прямо над ней стоит плашка наличия, и вторая
 * заливка подряд превратила бы правую колонку в лестницу из прямоугольников,
 * в которой не найти цену.
 */
.tovar__proof { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin: 10px 0 0; font-size: 13px; line-height: 1.4; }
.tovar__bought { color: var(--sh-muted); }
/* ⚠ Тот же красный, что на плитке и в остальной витрине: «осталось мало» —
   это одно и то же слово в двух местах, и разными цветами оно читалось бы как
   два разных предупреждения. */
.tovar__left { color: var(--sh-warn); font-weight: 600; }

/* ── купить, отложить, сравнить ────────────────────────────────────────── */

/*
 * ⚠ Три действия одной строкой, и главное из них занимает всё оставшееся
 * место. Три одинаковые кнопки в ряд означали бы, что «сравнить» так же важно,
 * как «в корзину», — а карточку открывают, чтобы купить.
 */
.tovar__row { display: flex; align-items: stretch; gap: 10px; }
.tovar__row > .tovar__act { flex: 1; }
.tovar__go { flex: 1; margin: 0; }
.tovar__go .tovar__act { height: 100%; }
.tovar__mark { display: flex; margin: 0; }

.tovar__icon { width: 52px; min-height: 52px; display: grid; place-items: center;
	border: 1px solid var(--sh-line); border-radius: var(--sh-radius);
	background: var(--sh-card); color: var(--sh-muted); cursor: pointer; padding: 0; }
.tovar__icon:hover { border-color: var(--sh-blue); color: var(--sh-blue); }

/*
 * Отмеченная кнопка выглядит нажатой: цвет, заливка и вдавленный край. Одного
 * цвета мало — на телефоне палец закрывает кнопку в момент нажатия, и человек
 * видит результат уже после того, как убрал руку.
 */
.tovar__icon.is-on { border-color: var(--sh-blue); background: var(--sh-soft); color: var(--sh-blue);
	box-shadow: inset 0 2px 0 color-mix(in srgb, var(--sh-blue) 22%, transparent); }

/*
 * ⚠ Подпись у кнопки есть всегда, просто её не видно: в квадрат 52 на 52
 * помещается только значок, а озвучке и поиску нужно слово. Она же меняется с
 * «В избранное» на «В избранном» — состояние обязано быть читаемым, а не
 * только цветным.
 */
.tovar__icon-say { position: absolute; width: 1px; height: 1px; margin: -1px;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* ── коротко о товаре ─────────────────────────────────────────────────── */

/*
 * Пятёрка главных характеристик — белой карточкой под названием, ПЕРЕД ценой.
 *
 * ⚠ Блока может не быть вовсе, и это не поломка: у большинства позиций витрины
 * реквизиты не заполнены (в основном они есть у процессоров). Пустой рамки на
 * такой карточке не остаётся — за это отвечает разметка, здесь просто нечего
 * рисовать. Ровно поэтому у блока нет ни `min-height`, ни заглушки.
 */
.tovar__short { background: var(--sh-card); border: .8px solid var(--sh-line);
	border-radius: var(--sh-radius); padding: 4px 16px; margin-top: 16px; }

/*
 * Строка «ключ — значение» с тонкой чертой.
 *
 * ⚠ ОДИН вид на оба блока — «коротко» и «все характеристики». Это один и тот
 * же список, разрезанный на пять и остаток; оформи мы их по-разному, покупатель
 * читал бы их как два разных перечня и искал бы в нижнем то, что уже прочитал
 * в верхнем.
 *
 * ⚠ Ключ приглушён, значение — цветом текста, и значение прижато вправо.
 * Читают здесь ЗНАЧЕНИЯ: имя реквизита человек знает заранее, он ищет глазами
 * число напротив, и колонка чисел у общего края находится сразу.
 */
.tovar__facts { display: grid; grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline; margin: 0; font-size: 13px; line-height: 1.45; }
.tovar__facts dt, .tovar__facts dd { margin: 0; padding: 9px 0;
	border-bottom: 1px solid var(--sh-line); }
.tovar__facts dt { color: var(--sh-muted); padding-right: 14px; }
.tovar__facts dd { color: var(--sh-ink); text-align: right; }

/* ⚠ Под последней строкой черты нет: снизу уже граница карточки (а в полном
   списке — воздух до следующей группы), и две линии в пикселе друг от друга
   читаются как рамка не на месте. */
.tovar__facts dt:last-of-type, .tovar__facts dd:last-of-type { border-bottom: 0; }

/*
 * «Все характеристики» — кнопкой-ссылкой во всю ширину карточки.
 *
 * ⚠ Отрицательные поля по бокам — чтобы её черта дошла до краёв карточки, как
 * черта между строками. Иначе линия обрывалась бы за 16 пикселей до края и
 * читалась как ещё одна строка списка, а не как дно блока.
 */
.tovar__more { display: flex; align-items: center; justify-content: center; gap: 6px;
	margin: 0 -16px; padding: 11px 0 12px; border-top: 1px solid var(--sh-line);
	font-size: 13px; font-weight: 600; color: var(--sh-blue); }
.tovar__more:hover { text-decoration: none; }
.tovar__more svg { flex: none; }

/*
 * Переход к полному списку.
 *
 * ⚠ `html` — единственный селектор в этом файле не под `.tovar`, и это
 * осознанно: прокрутку нельзя объявить на потомке. Расползтись на весь магазин
 * он не может — файл подключается только карточкой товара, и корзина с
 * оформлением, где прокрутку двигают формы, его не видят.
 *
 * ⚠ Отступ обязателен: шапка витрины липкая и накрыла бы заголовок «Все
 * характеристики» — человек нажал бы кнопку и увидел середину таблицы, не
 * поняв, куда попал.
 */
html { scroll-behavior: smooth; }
#specs { scroll-margin-top: 84px; }

/* Кому движение мешает — тому его нет. Это системная настройка, не наша. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ── о товаре: две вкладки ────────────────────────────────────────────── */

/*
 * Вкладки — ссылки на панели, поэтому цвет задаём через `a.tovar__tab`:
 * `.shop a` (0,1,1) перебивает голый класс (0,1,0) и красил бы обе вкладки
 * синим, включая ту, что не выбрана.
 *
 * ⚠ `margin-bottom: -1px` сажает подчёркивание вкладки ровно на черту под
 * рядом: иначе между ними остаётся волосяная щель, заметная на светлом фоне.
 */
.tovar__tabs { display: flex; gap: 28px; margin: 0 0 18px;
	border-bottom: .8px solid var(--sh-line); }
a.tovar__tab { margin-bottom: -1px; padding: 0 0 10px; font-size: 15px;
	color: var(--sh-muted); border-bottom: 2px solid transparent; }
a.tovar__tab:hover { color: var(--sh-ink); text-decoration: none; }
a.tovar__tab.is-on { color: var(--sh-ink); font-weight: 600; border-bottom-color: var(--sh-blue); }

/*
 * ⚠ Всё, что ниже, живёт ТОЛЬКО под `.is-tabs` — класс ставит shop.js. Без
 * скрипта панели идут друг за другом со своими заголовками, и страница
 * остаётся целой, а не превращается в одну видимую вкладку без переключателя.
 */
.tovar__pane + .tovar__pane { margin-top: 26px; padding-top: 22px; border-top: .8px solid var(--sh-line); }
.tovar__pane-name { margin: 0 0 12px; font-size: 17px; }

.tovar__about.is-tabs .tovar__pane-name { display: none; }
.tovar__about.is-tabs .tovar__pane + .tovar__pane { margin-top: 0; padding-top: 0; border-top: 0; }

/* Отступ под липкой шапкой — такой же, как у `#specs` выше. */
#about, #description { scroll-margin-top: 84px; }

/* ── описание: свёрнуто до нескольких строк ───────────────────────────── */

/*
 * Описание показано началом, целиком его открывает нажатие.
 *
 * ⚠ Зачем прячем. Под блоком «О товаре» встанут «похожие товары» и «часто
 * покупают», а описание процессора — девять глав и четыре экрана прокрутки: до
 * блоков под ним иначе не долистает никто. С какой длины сворачиваем и сколько
 * глав обещает подпись кнопки — считает ProductStory, там же написано почему.
 *
 * ⚠ РАЗВОРОТ РАБОТАЕТ БЕЗ СКРИПТА, И ЭТО ГЛАВНОЕ В РАЗДЕЛЕ. Открывает текст
 * флажок с подписью-`label`: нажатие переключает `:checked`, состояние держит
 * браузер. Сделай мы это скриптом — человек с выключенным JavaScript увидел бы
 * обрезанный текст и ни одного способа его открыть, то есть страница отняла бы
 * у него то, что в ней уже написано и за что заплачено ассистенту.
 *
 * ⚠ ПРЯЧЕМ ПОКАЗ, А НЕ СОДЕРЖИМОЕ: `max-height` с обрезкой. Текст лежит в
 * разметке целиком в обоих состояниях, «дозагрузки по нажатию» нет и быть не
 * может — описание это то, ради чего товар находят в поиске.
 */

/* ⚠ Флажок скрыт ОБРЕЗКОЙ, а не `display: none`: скрытый display выпадает из
   обхода клавиатурой, и до кнопки нельзя было бы доехать Tab'ом. Приём тот же,
   что у подписи круглых кнопок выше по файлу. */
.tovar__fold-flag { position: absolute; width: 1px; height: 1px; margin: -1px;
	padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/*
 * ⚠ ЗАТУХАНИЕ К НИЗУ — ЧАСТЬ МЕХАНИЗМА, А НЕ УКРАШЕНИЕ. Ровный срез читается
 * как конец текста: последняя строка выглядит дописанной, и кнопка под ней
 * понимается как переход куда-то ещё, а не как продолжение этого же абзаца.
 * Маска гасит последние полторы строки — обрыв виден глазом.
 *
 * ⚠ Маска, а не полоса-градиент поверх текста: заливке нужен цвет фона, а у
 * витрины две темы, и полоса пришлось бы красить дважды. Маска про цвет не
 * знает вовсе — гасит то, что под ней, на любом фоне.
 *
 * ⚠ Второе имя — для Safari до 15.4: там маска живёт только с приставкой. Не
 * поймёт её браузер вовсе — получит ровный срез, и это не поломка: текст
 * открывает та же кнопка, она под срезом и стоит.
 */
.tovar__fold-flag:not(:checked) ~ .tovar__story {
	max-height: var(--story-peek);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6em), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6em), transparent);
}

/*
 * ⚠ В СВЁРНУТОМ ВИДЕ КОЛОНОК НЕТ, и это не украшение, а починка. Сгиб режет
 * блок ПО ВЫСОТЕ, а колонки стоят рядом — значит один срез превращается в два, и
 * покупатель первым делом читает две оборванные половинки РАЗНЫХ предложений:
 * слева конец фразы про тепловой пакет, справа — со строчной буквы середина
 * фразы совсем из другого места текста. Так стояло у 23 длинных карточек из 45.
 *
 * ⚠ Лечим показ, а не разметку: `columns: auto` на время свёртки складывает
 * поток в одну колонку, и срез остаётся ровно один — под заголовком начало
 * первого абзаца, дальше затухание. Нажатие снимает правило вместе с обрезкой, и
 * колонки возвращаются теми же строками, что стоят ниже по файлу.
 *
 * ⚠ Почему не сгибать ПО АБЗАЦУ (заголовок и первый абзац целиком, как в
 * присланном снимке). Тогда высота свёрнутого куска зависела бы от длины абзаца,
 * а он бывает и в десять строк — свёртка перестала бы освобождать место, ради
 * которого затевалась. Мерой остаётся высота, а колонки ей просто не мешают: под
 * заголовком выходят те самые четыре строки одного абзаца.
 *
 * ⚠ Вопросы (`story-ask`) складываем той же строкой. Наверх они не попадают,
 * но правило «свёрнуто — значит одна колонка» проще держать в голове, чем список
 * исключений, и оно переживёт перестановку глав в описании.
 */
.tovar__fold-flag:not(:checked) ~ .tovar__story .story-cols,
.tovar__fold-flag:not(:checked) ~ .tovar__story .story-ask { columns: auto; }

/* ⚠ Кнопка во всю ширину колонки, а не ссылка в конце текста: это дно
   свёрнутого блока, и попасть в него пальцем на телефоне надо с первого раза. */
.tovar__fold-btn { display: flex; align-items: center; justify-content: center; gap: 7px;
	margin: 16px 0 0; padding: 10px 16px; border: 1px solid var(--sh-line);
	border-radius: 10px; background: var(--sh-card); font-size: 14px; font-weight: 600;
	color: var(--sh-blue); cursor: pointer; user-select: none; }
.tovar__fold-btn:hover { border-color: var(--sh-blue); background: var(--sh-soft); }

/* ⚠ Обвод по фокусу рисуем на КНОПКЕ, хотя фокус стоит на скрытом флажке:
   иначе идущий клавишами не видит, где он находится. */
.tovar__fold-flag:focus-visible ~ .tovar__fold-btn {
	outline: 2px solid var(--sh-blue); outline-offset: 2px; }

/* Из двух подписей видна одна — та, которая про следующее нажатие. */
.tovar__fold-flag:not(:checked) ~ .tovar__fold-btn .tovar__fold-less,
.tovar__fold-flag:checked ~ .tovar__fold-btn .tovar__fold-more { display: none; }

/* Стрелка смотрит туда, куда поедет текст. */
.tovar__fold-btn svg { flex: none; }
.tovar__fold-flag:checked ~ .tovar__fold-btn svg { transform: rotate(180deg); }

/* ⚠ На печати описание разворачиваем и кнопку убираем: бумагу не нажать, а
   обрезанный на распечатке текст — потерянный текст. */
@media print {
	/*
	 * ⚠ ЗДЕСЬ НУЖЕН `:not(:checked)`, ХОТЯ ФЛАЖОК И ТАК НЕ НАЖАТ. Не для отбора,
	 * а ради веса: правило свёртки выше по файлу весит (0,3,0) — класс, `:checked`
	 * внутри `:not()` и второй класс, — и короткая запись (0,2,0) проигрывала ему
	 * каскад, сколько бы ниже ни стояла. Распечатка выходила с обрезанным
	 * описанием и без кнопки: бумагу не нажать, и остальной текст пропадал совсем.
	 */
	.tovar__fold-flag:not(:checked) ~ .tovar__story { max-height: none;
		-webkit-mask-image: none; mask-image: none; }

	/* ⚠ Колонки на бумаге тоже возвращаем: флажок на печати не нажат, и без этой
	   строки распечатка получила бы свёрнутый вид описания — одну колонку. */
	.tovar__fold-flag:not(:checked) ~ .tovar__story .story-cols,
	.tovar__fold-flag:not(:checked) ~ .tovar__story .story-ask { columns: var(--story-col) 2; }
	.tovar__fold-btn { display: none; }
}

/* ── все характеристики ───────────────────────────────────────────────── */

/*
 * Блок во всю ширину страницы: заголовок крупнее обычного (20 против 16) — он
 * делит страницу надвое, а не подписывает карточку внутри колонки.
 *
 * ⚠ Заголовок берём ТОЛЬКО СВОЙ (`> h2`), а не любой внутри блока. У описания
 * подзаголовки — тоже `h2` (их ставит ProductStory), и правило без стрелки
 * набирало их теми же двадцатью пикселями: три «заголовка страницы» подряд
 * вместо одного с подзаголовками под ним.
 */
.tovar__block--full { margin-top: 20px; padding: 18px 20px 20px; }
.tovar__block--full > h2 { margin-bottom: 14px; font-size: 20px; }

/*
 * Три колонки групп.
 *
 * ⚠ По колонкам их разложил СЕРВЕР (ProductSpecs), здесь только сетка.
 * `columns: 3` браузера режет поток по высоте: подпись группы остаётся внизу
 * одной колонки, а её строки уезжают в начало следующей.
 */
.tovar__specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 28px; }
.tovar__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* ⚠ Подпись группы приглушена и мельче строк: это указатель, а не содержание.
   Набери её в полный цвет — она спорила бы с заголовком блока над собой. */
.tovar__grp-name { margin: 0 0 2px; font-size: 12px; font-weight: 600;
	letter-spacing: .02em; text-transform: uppercase; color: var(--sh-muted); }

/* ── описание: типографика ────────────────────────────────────────────── */

/*
 * Описание — не подпись под товаром, а СТРАНИЦА внутри карточки: заголовок,
 * главы, врезки, плитки, таблица, вопросы. Своей рамки ей не нужно — она уже
 * живёт внутри белой карточки «О товаре».
 *
 * ⚠ ГЛАВНОЕ ПРАВИЛО ЭТОГО РАЗДЕЛА. Восемнадцать карточек процессоров написаны
 * до появления новых видов блоков, и в них только `h2`, `p`, `ul`, `li`.
 * Оформленность на них держится ровно на трёх вещах: ширине строки, кеглях и
 * черте перед главой — то есть на всём, что ниже стоит ДО первого `story-*`.
 * Ни один приём из этого файла не имеет права требовать нового класса, чтобы
 * старая карточка перестала выглядеть полотном текста.
 */

.tovar__story {
	/*
	 * ⚠ Мерка колонки текста. Нужна там, где колонка ОДНА: в две колонки
	 * ширину строки задаёт сама колонка, а не мерка. Дальше 90 знаков глаз
	 * теряет строку на возврате, и текст становится нечитаемым независимо от
	 * того, насколько он хорош.
	 *
	 * ⚠ 660, А НЕ 700, И ЧИСЛО ЗАМЕРЕНО В БРАУЗЕРЕ. Прежние 700 считались «по
	 * 75 знаков в строке» — на глаз и мимо: у здешнего шрифта при кегле 16 знак
	 * занимает 7,5 точки, и в 700 влезало 93 знака (замер на трёх карточках,
	 * окно 1024 — самая ходовая ширина ноутбука). То есть мерка, поставленная
	 * ради читаемости, сама её и нарушала. 660 даёт 85–87 знаков — с запасом
	 * под порогом, и почти вровень с колонкой (640 точек, 82 знака): строка
	 * читается одинаково и когда колонок две, и когда одна.
	 *
	 * ⚠ Мерка ЖИВЁТ ПЕРЕМЕННОЙ, потому что применяется в десяти местах: у
	 * абзацев, списков, подписей, ответов на вопросы. Разойдись они хоть на
	 * двадцать пикселей — правый край текста начал бы «дышать» от блока к
	 * блоку, и страница выглядела бы собранной из кусков.
	 */
	--story-measure: 660px;

	/*
	 * ⚠ МЕРКА КОЛОНКИ — сколько места колонка требует, чтобы вообще появиться.
	 * Тоже переменной, и по той же причине, что мерка строки: её просят и проза,
	 * и аккордеон вопросов, а разойдись они — куски начали бы расходиться на
	 * две колонки при разной ширине окна, и правый край страницы «задышал».
	 *
	 * ⚠ 30rem — это 480 точек, около 60 знаков в строке: ниже этого колонка
	 * перестаёт быть колонкой текста. Отсюда и порог: две колонки требуют
	 * 2 × 480 + 40 = 1000 точек карточки, то есть окна примерно от 1100. На
	 * карточке в 1336 (боевая ширина витрины) получаются те самые две по 648 из
	 * макета. Первое значение было 26rem — на окне 1024 оно давало две колонки
	 * по 431 точке, то есть по 53 знака, и текст читался хуже, чем одной.
	 */
	--story-col: 30rem;

	/* ⚠ Просвет между колонками из макета. Меньше 40 — и глаз перескакивает
	   через просвет посреди строки, читая две колонки как одну строку. */
	--story-gap: 40px;

	/*
	 * ⚠ ВЫСОТА СВЁРНУТОГО ОПИСАНИЯ. Меряется не строками, а высотами шрифта:
	 * 9.5em — это 152 точки, то есть заголовок описания (24-й кегль с отбивкой,
	 * около 47) и четыре строки текста по 26,4. Меньше — и под заголовком
	 * остаётся полторы строки, читать нечего; больше — свёртка перестаёт
	 * освобождать место, ради которого затевалась.
	 *
	 * ⚠ ПЕРЕМЕННОЙ — ПОТОМУ ЧТО НА ТЕЛЕФОНЕ ЧИСЛО ДРУГОЕ (media внизу файла).
	 * Заголовок описания там занимает не одну строку, а три-четыре, и та же
	 * высота показала бы один заголовок без единой строки текста под ним.
	 *
	 * ⚠ Правила свёртки живут выше, в своём разделе: здесь только число.
	 */
	--story-peek: 9.5em;

	font-size: 16px;
	line-height: 1.65;
	color: var(--sh-ink);
}

/*
 * ⚠ МЕРКА ТЕПЕРЬ ИСКЛЮЧЕНИЕ, А НЕ ПРАВИЛО, и это главная перемена в разделе.
 * Раньше её получал каждый абзац, и справа от текста пустовали 634 точки —
 * 47,5 % ширины карточки. Теперь сплошная проза уходит в две колонки во всю
 * ширину (см. `story-cols` ниже), а мерка остаётся ровно двум случаям: куску
 * КОРОЧЕ двух строк в колонке и куску ДЛИННЕЕ девяти — тому, которому колонки
 * запрещены. Ни тому ни другому пустота справа не мешает: первый и так в
 * полторы строки, второй за колонками не угонится.
 *
 * ⚠ Таблицы, плитки, галерея и цветные плашки мерки не получают и не получали:
 * в таблице сравнения пять колонок, и вжатая в 700 пикселей она стала бы
 * нечитаемой ровно там, где её и открывают — чтобы сравнить числа глазами.
 */
.tovar__story p,
.tovar__story ul { max-width: var(--story-measure); }

.tovar__story p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; }
.tovar__story > p:last-child { margin-bottom: 0; }

/*
 * Заголовок главы.
 *
 * ⚠ ВОЗДУХА СВЕРХУ ВТРОЕ БОЛЬШЕ, ЧЕМ СНИЗУ (30 + 22 против 14), и это не
 * вкусовщина: заголовок принадлежит тексту ПОД ним. Равные отбивки заставляют
 * читать его как подпись к абзацу выше, и девять глав сливаются в одно полотно
 * — именно так страница и выглядела до правки.
 *
 * ⚠ Черта тонкая и идёт по всей ширине блока, а не по ширине текста: она делит
 * страницу на главы, и обрывалась бы посреди строки, будь заголовок в мерке.
 * Ради этого `h2` мерки и не получает — настоящие заголовки глав короткие, до
 * правого края они не доходят.
 */
.tovar__story h2 { margin: 30px 0 14px; padding-top: 22px;
	border-top: 1px solid var(--sh-line);
	font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--sh-ink); }

/*
 * Заголовок самого описания — первый на странице и самый крупный.
 *
 * ⚠ Черты над ним нет: делить нечего, выше него в блоке ничего не стоит, и
 * линия читалась бы как оборванная рамка. В базе этот заголовок лежит `h1`,
 * витрина опускает его до `h2` (ProductStory::show) — поэтому здесь он
 * ловится порядком, а не своим классом: у восемнадцати готовых карточек
 * классов нет вовсе.
 */
.tovar__story > h2:first-child { margin: 0 0 16px; padding-top: 0; border-top: 0;
	font-size: 24px; }

/* Подзаголовок внутри главы: мельче заголовка, но заметно крупнее текста.
   Черты не получает — главу он не делит, а размечает изнутри. */
.tovar__story h3 { margin: 22px 0 10px; font-size: 17px; line-height: 1.35;
	font-weight: 600; color: var(--sh-ink); }

/*
 * Списки со своим маркером.
 *
 * ⚠ Маркер — короткая приглушённая черта, а не точка по умолчанию и не то же,
 * чем набрана таблица характеристик. В описании перечисляют РАЗНОЕ («что
 * докупить», «что важно знать», сами характеристики), и одинаковый вид у
 * перечня и у таблицы реквизитов заставлял читать их как один список.
 */
.tovar__story ul { margin: 0 0 14px; padding: 0; list-style: none; }
.tovar__story li { position: relative; margin: 0 0 7px; padding-left: 18px; }
.tovar__story li::before { content: ''; position: absolute; left: 0; top: .78em;
	width: 7px; height: 1.5px; background: var(--sh-muted); }

/* ── описание: куски разной ширины ────────────────────────────────────── */

/*
 * Сплошная проза — двумя колонками во всю ширину карточки.
 *
 * ⚠ ЗАЧЕМ ВООБЩЕ. Единой колонки текста на этой странице больше нет. Кусок
 * занимает всю ширину, а читаемость держится тем, что у каждого куска СВОЯ
 * ширина по своей роли: заголовок главы и таблица — во всю полосу, реквизиты —
 * сеткой, проза — колонками. Так решено владельцем по макету 1181:2.
 *
 * ⚠ КОЛОНОК РОВНО ДВЕ, И ЭТО ПОТОЛОК, А НЕ ЧИСЛО. `columns: <мерка> 2` читается
 * как «колонка не уже мерки, и таких колонок не больше двух». На карточке в 1336
 * точек это две по 648 — ровно как в макете; ниже 1000 точек вторая колонка не
 * помещается, и браузер САМ схлопывает блок в одну. Отдельного правила для
 * узкого окна не нужно, и в 375 точек страница вбок не поедет.
 *
 * ⚠ Мерка колонки в rem (см. --story-col), а не в пикселях: человек,
 * увеличивший шрифт в браузере, получит одну широкую колонку вместо двух
 * тесных, — а не две колонки по четыре слова в строке.
 *
 * ⚠ КОЛОНКИ ЗДЕСЬ НЕ КОНЧАЮТСЯ РВАНЫМ КРАЕМ, и лечит это `column-fill: balance`
 * — состояние по умолчанию во всех браузерах, умеющих колонки. Мы на него
 * полагаемся, но не выравниваем абзацы `break-inside: avoid`: запрети мы
 * разрыв абзаца, длинный абзац занял бы колонку целиком, вторая осталась бы
 * пустой — то есть вернулась бы ровно та пустота справа, ради которой всё и
 * затевалось. Разделителя между колонками нет намеренно: `column-rule` тянется
 * во всю высоту блока и подчёркивает разницу низов, а не прячет её.
 *
 * ⚠ Браузер без поддержки колонок покажет то же, что показывал до правки:
 * абзацы в мерке одной колонкой. Ничего не сломается — обёртка сама по себе
 * ничего не рисует.
 */
.tovar__story .story-cols { columns: var(--story-col) 2; column-gap: var(--story-gap); }

/*
 * ⚠ МЕРКУ СТРОКИ ВНУТРИ ОБЁРТКИ НЕ СНИМАЕМ, и это стоило одной живой поломки.
 * Сначала здесь стояло `max-width: none` — «колонка и есть мерка». В двух
 * колонках так и есть: 648 меньше 700, и мерка ничего не ограничивает. Но
 * между 1000 и 1100 точками карточки колонка остаётся ОДНА, а обёртка никуда
 * не девается — и на окне 1024 абзац растянулся на 903 точки, то есть 110
 * знаков в строке. Это хуже того, с чего всё начиналось. Правило снято совсем:
 * мерка из `.tovar__story p` работает и здесь, и вступает в силу ровно тогда,
 * когда колонка одна.
 */

/* ⚠ Пункт списка разрывать между колонками нельзя: половина фразы под чертой
   маркера читается как отдельный пункт. У абзаца разрыв допустим, у пункта —
   нет. Второе имя — для старых Safari, они знают только его. */
.tovar__story .story-cols li { -webkit-column-break-inside: avoid; break-inside: avoid; }

/* Описание кончилось прозой — лишнего отступа под карточкой не оставляем. */
.tovar__story > .story-cols:last-child > :last-child { margin-bottom: 0; }

/*
 * Перечень «имя: значение» — сеткой.
 *
 * ⚠ Ради чего. Глава «Характеристики» у пилотного процессора — обычный список
 * из пятнадцати пунктов, и на странице он был лентой в пятнадцать строк, а
 * справа от неё пустовала почти вся карточка. Те же пятнадцать пунктов сеткой
 * — три ряда по пять и вдвое ниже. Какие пункты сюда попадают, решает не класс
 * в тексте, а содержимое (ProductStory::factsBlock).
 *
 * ⚠ Дорожка `auto-fit`, а не жёсткие пять колонок, и польза от неё РОВНО ТАМ,
 * ГДЕ РЕКВИЗИТОВ МАЛО. Пять жёстких дорожек растянули бы три реквизита на пятую
 * часть ширины каждый, а две пустые клетки остались бы дырой справа; `auto-fit`
 * пустые дорожки схлопывает, и три реквизита занимают всю ширину втроём. На
 * длинном списке дорожка ни на что не влияет: одиннадцать реквизитов лягут
 * пятью, пятью и одним — последний ряд неполный, и это нормально.
 *
 * ⚠ `min(230px, 100%)` в мерке обязателен — без него на узком окне дорожка
 * остаётся в своих 230 пикселях и вылезает за карточку, то есть страница
 * начинает ездить вбок ровно там, где этого нельзя.
 */
.tovar__story .story-facts { display: grid; gap: 8px; max-width: none;
	margin: 0 0 22px;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* ⚠ Маркер-чёрточку клетке отменяем: в сетке роль разделителя играет сама
   клетка, и чёрточка перед именем читалась бы как незакрытая скобка. */
.tovar__story .story-facts li { min-width: 0; margin: 0; padding: 10px 14px;
	border-radius: 10px; background: var(--sh-bg);
	font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--sh-ink); }
.tovar__story .story-facts li::before { content: none; }

/* ⚠ Имя реквизита приглушено и мельче значения — тем же приёмом, что подпись
   группы в таблице характеристик выше: в клетке главное значение, имя при нём
   указатель. */
.tovar__story .story-facts b { display: block; margin: 0 0 3px;
	font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--sh-muted); }

/* Подпись к снимку без своего заголовка — мелким серым там, где её поставил
   автор. Только прямым потомком: внутри блока «фото и текст» у неё свой вид. */
.tovar__story > p.story-photo { margin: 6px 0 22px; font-size: 13px; line-height: 1.5;
	color: var(--sh-muted); }

/* ── описание: врезка и плашка ────────────────────────────────────────── */

/*
 * Врезка «важно знать» — одна мысль, из-за которой чаще всего возвращают товар.
 *
 * ⚠ Знак стоит АБСОЛЮТНО, а текст просто отодвинут слева. Разложи мы врезку
 * гибкой строкой — фраза и метка стали бы отдельными её частями, и между ними
 * навсегда встал бы промежуток, которого в живой фразе нет.
 */
.tovar__story .story-note { position: relative; max-width: none;
	margin: 26px 0; padding: 16px 18px 16px 50px; border-radius: 10px;
	background: var(--sh-soft); font-size: 15px; font-weight: 500; line-height: 1.45; }
.tovar__story .story-note > svg { position: absolute; left: 18px; top: 16px;
	color: var(--sh-blue); }

/*
 * Плашка-предупреждение: метка словами и фраза за ней.
 *
 * ⚠ Оттенок замешан из токена предупреждения, а не выбран пипеткой из макета:
 * арендатор, перекрасивший витрину, получит свой красный, а не наш. Первая
 * строка — запасная для браузеров без `color-mix`: у них плашка останется
 * серой, то есть заметной, но не цветной. Тем же приёмом набрана плашка
 * наличия выше в этом файле.
 */
.tovar__story .story-warn { max-width: none; margin: 20px 0 26px;
	padding: 14px 18px; border-radius: 10px;
	background: var(--sh-bg);
	background: color-mix(in srgb, var(--sh-warn) 9%, var(--sh-card));
	font-size: 15px; line-height: 1.45; }

/* ⚠ Метка НЕ переносится: «НЕ ПОДОЙДЁТ», разорванное посередине, читается как
   опечатка, а не как предупреждение. */
.tovar__story .story-note > b,
.tovar__story .story-warn > b { font-size: 11px; font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; white-space: nowrap; }
.tovar__story .story-note > b { color: var(--sh-blue); margin-right: 8px; }
.tovar__story .story-warn > b { color: var(--sh-warn); margin-right: 10px; }

/* ── описание: хватит и будет мало ────────────────────────────────────── */

/*
 * Две колонки: чего товару хватит с запасом и где его будет мало.
 *
 * ⚠ Колонки РАВНЫЕ и стоят рядом, а не одна под другой. Смысл блока —
 * сравнение: покупатель читает их одним взглядом и решает про себя. Поставь их
 * в столбик, и второй список превратится в «ещё один перечень», который
 * дочитывают через раз.
 *
 * ⚠ Зелёный и красный — существующие токены витрины, второго акцентного цвета
 * не вводим (так решено в ТЗ). Заливка мягкая: цветных плашек на странице
 * немного, и колонки не должны спорить с врезкой над ними.
 */
.tovar__story .story-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px; margin: 20px 0 26px; }
.tovar__story .story-fit dl { margin: 0; padding: 16px 18px 18px; border-radius: 10px; }
.tovar__story .story-fit-yes { background: var(--sh-bg);
	background: color-mix(in srgb, var(--sh-ok) 9%, var(--sh-card)); }
.tovar__story .story-fit-no { background: var(--sh-bg);
	background: color-mix(in srgb, var(--sh-warn) 9%, var(--sh-card)); }

.tovar__story .story-fit dt { margin: 0 0 10px; font-size: 11px; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase; }
.tovar__story .story-fit-yes dt { color: var(--sh-ok); }
.tovar__story .story-fit-no dt { color: var(--sh-warn); }

/*
 * ⚠ Галочка и тире — ЗНАКИ ЧЕРЕЗ `content`, а не картинки. Цвет знака — цвет
 * колонки, и картинкой он не поехал бы за тёмной темой; кроме того, знака нет
 * в разметке, а значит его не приходится дописывать в восемнадцать готовых
 * описаний.
 */
.tovar__story .story-fit dd { position: relative; margin: 0; padding-left: 22px;
	font-size: 15px; line-height: 1.45; }
.tovar__story .story-fit dd + dd { margin-top: 10px; }
.tovar__story .story-fit dd::before { position: absolute; left: 0; top: 0; font-weight: 600; }
.tovar__story .story-fit-yes dd::before { content: '\2713'; color: var(--sh-ok); }
.tovar__story .story-fit-no dd::before { content: '\2014'; color: var(--sh-warn); }

/* ── описание: плитки ─────────────────────────────────────────────────── */

/*
 * Плитки двух видов: «название и подпись» (чипсеты, способы доставки) и «что
 * докупить» с меткой. Пару `dt` + `dd` собирает в одну карточку обёртка,
 * которую ставит витрина (ProductStory::show) — без неё название и подпись
 * попали бы в разные клетки сетки и нарисовались двумя коробками.
 *
 * ⚠ ШИРИНА ПЛИТКИ РАЗНАЯ У ДВУХ ВИДОВ, и от неё зависит, сколько их встанет в
 * ряд. У «названия и подписи» подпись короткая — четыре плитки в ряд, как
 * чипсеты в макете. У «что докупить» внутри метка и две строки текста — три в
 * ряд, шесть штук ложатся двумя строками. Сделай мерку одной, и «докупить»
 * встало бы по пять в ряд полосками из одного слова.
 *
 * ⚠ `auto-fit`, а не `auto-fill`: пустые дорожки схлопываются, и три способа
 * доставки занимают всю ширину, а не треть с пустотой справа.
 */
.tovar__story .story-tiles,
.tovar__story .story-need { display: grid; gap: 12px; margin: 18px 0 26px; padding: 0; }
/* ⚠ `min(…, 100%)` в мерке дорожки обязателен: без него на окне уже мерки
   дорожка остаётся в своих 360 пикселях и вылезает за карточку — то есть
   страница начинает ездить по горизонтали ровно там, где этого нельзя. */
.tovar__story .story-tiles { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.tovar__story .story-need { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }

.tovar__story .story-tiles > div,
.tovar__story .story-need > div { min-width: 0; padding: 14px 16px 16px;
	border: 1px solid var(--sh-line); border-radius: 10px; }

/* ⚠ Заливки у видов разные, и это единственное, чем они различаются издалека:
   «докупить» — список дел покупателя, и он читается как карточки поверх
   страницы; «название и подпись» — справка, и она уходит в фон. */
.tovar__story .story-tiles > div { background: var(--sh-bg); }
.tovar__story .story-need > div { background: var(--sh-card); }

/* ⚠ `flow-root` держит внутри себя метку, которая обтекает название справа.
   Без него метка вылезала бы из плитки на подпись под ней. */
.tovar__story .story-tiles dt,
.tovar__story .story-need dt { display: flow-root; margin: 0;
	font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--sh-ink); }

/* Значок над названием. Ставит его витрина по СЛОВУ (ShopIcons): незнакомое
   имя оставляет плитку без значка — так в макете и стоят чипсеты «H610». */
.tovar__story .story-tiles dt > svg,
.tovar__story .story-need dt > svg { display: block; margin: 0 0 10px; color: var(--sh-blue); }

/*
 * Метка «докупить» — плашкой справа от названия.
 *
 * ⚠ Обтеканием, а не отдельной колонкой сетки: между значком, названием и
 * меткой в разметке нет обёрток, потому что тело блока — это строка текста,
 * которую набирает менеджер. Обтекание — единственный способ поставить метку
 * в строку с названием, не заводя ради неё тегов.
 */
.tovar__story .story-need dt > b { float: right; margin-left: 8px; padding: 3px 8px;
	border-radius: 6px; background: var(--sh-bg); color: var(--sh-muted);
	font-size: 10px; font-weight: 600; line-height: 1.4; }

/* ⚠ Красной метку делает ЗНАК «!» в тексте, а не слово: слово «обязательно» в
   узбекской версии другое, и метка побелела бы вместе с переводом. */
.tovar__story .story-need dt > b.story-must { color: var(--sh-warn);
	background: var(--sh-bg);
	background: color-mix(in srgb, var(--sh-warn) 9%, var(--sh-card)); }

/* Подпись у плитки-способа — своей строкой под названием и акцентом: это
   «бесплатно» и «1–2 дня», то есть главное, что от плитки читают. */
.tovar__story .story-tiles dt > b { display: block; margin-top: 4px;
	color: var(--sh-blue); font-size: 13px; font-weight: 500; }

.tovar__story .story-tiles dd,
.tovar__story .story-need dd { margin: 8px 0 0; font-size: 13px; line-height: 1.5;
	color: var(--sh-muted); }

/* ── описание: чек-лист ──────────────────────────────────────────────── */

/*
 * «Что мы проверяем перед продажей» — белой рамкой со строками через черту.
 *
 * ⚠ Рамка тут нужна, хотя обычный список её не получает: чек-лист — это
 * обещание магазина, а не перечисление свойств товара. Он и должен читаться
 * как отдельный документ внутри страницы.
 */
.tovar__story .story-check { max-width: none; margin: 12px 0 26px; padding: 0;
	list-style: none; border: 1px solid var(--sh-line); border-radius: 10px;
	background: var(--sh-card); }
.tovar__story .story-check li { margin: 0; padding: 12px 16px 12px 44px;
	font-size: 15px; line-height: 1.45; }
.tovar__story .story-check li + li { border-top: 1px solid var(--sh-line); }

/* ⚠ Общий маркер списка сбрасываем целиком — иначе под галочкой осталась бы
   ещё и серая черта от правила выше. */
.tovar__story .story-check li::before { content: '\2713'; left: 16px; top: 12px;
	width: auto; height: auto; background: none; color: var(--sh-ok); font-weight: 700; }

/* ── описание: таблица сравнения ─────────────────────────────────────── */

/*
 * ⚠ ПРОКРУТКА У ТАБЛИЦЫ, А НЕ У СТРАНИЦЫ. Колонок в сравнении четыре-пять, и
 * на окне в 1024 таблица шире места. Без своей обёртки уезжала бы вся
 * страница, а вместе с ней — цена и кнопка «в корзину». Обёртку ставит витрина
 * (ProductStory::show).
 */
.tovar__story .story-wide { overflow-x: auto; margin: 16px 0 26px;
	border: 1px solid var(--sh-line); border-radius: 10px; }

/* ⚠ `min-width` обязателен: без него браузер сожмёт колонки до одного слова в
   строке, и прокрутка не появится вовсе — таблица просто станет нечитаемой. */
.tovar__story .story-vs { width: 100%; min-width: 720px; border-collapse: collapse;
	font-size: 14px; }
.tovar__story .story-vs th { padding: 11px 16px; background: var(--sh-bg);
	color: var(--sh-muted); font-size: 10px; font-weight: 600; letter-spacing: .05em;
	text-transform: uppercase; text-align: left; white-space: nowrap; }
.tovar__story .story-vs td { padding: 12px 16px; line-height: 1.45; vertical-align: top;
	border-top: 1px solid var(--sh-line); }

/* ⚠ Своя строка подсвечена и набрана полужирным в первой клетке: таблица
   сравнения нужна затем, чтобы найти в ней СЕБЯ, и без подсветки поиск своей
   модели среди шести похожих названий занимает больше времени, чем чтение. */
.tovar__story .story-vs-this { background: var(--sh-soft); }
.tovar__story .story-vs-this td:first-child { font-weight: 700; }

/* ── описание: снимок рядом с текстом ────────────────────────────────── */

/*
 * ⚠ Гибкой строкой, а не сеткой в две колонки: снимка у товара может не быть
 * вовсе (у 295 позиций из 363), и в сетке на его месте осталась бы пустая
 * колонка в 300 пикселей. Здесь текст просто занимает всё место.
 */
.tovar__story .story-shot { display: flex; flex-wrap: wrap; gap: 20px;
	align-items: flex-start; margin: 20px 0 26px; padding: 18px;
	border-radius: 12px; background: var(--sh-bg); }
/* ⚠ Сжиматься снимку разрешено (`0 1`, а не `0 0`): на узком окне он стоит
   в строке один, и запрет сжатия вытолкнул бы его за край подложки. */
.tovar__story .story-shot-pic { flex: 0 1 300px; max-width: 100%; }

/*
 * ⚠ `contain`, а не `cover`, хотя в макете снимок обрезан по рамке. Фотографии
 * наши, с приёмки, и сняты как попало: обрезка по центру срезала бы с крышки
 * процессора маркировку — то самое, ради чего снимок и смотрят.
 */
.tovar__story .story-shot-pic img { display: block; width: 100%; height: 220px;
	object-fit: contain; border: 1px solid var(--sh-line); border-radius: 8px;
	background: var(--sh-card); }

.tovar__story .story-shot-say { flex: 1 1 320px; min-width: 0; }
.tovar__story .story-shot-say h3 { margin: 0 0 10px; }
.tovar__story .story-shot-say p { max-width: none; margin: 0 0 10px;
	font-size: 15px; line-height: 1.5; color: var(--sh-muted); }
.tovar__story .story-shot-say p:last-child { margin-bottom: 0; }

/* ── описание: вопросы ──────────────────────────────────────────────── */

/*
 * Аккордеон вопросов — на `details`/`summary`, БЕЗ ЕДИНОЙ СТРОКИ JavaScript.
 *
 * ⚠ Так решено не из экономии. Карточку открывают из поиска и из мессенджера,
 * где скрипты режут; список вопросов без ответов на такой странице был бы
 * страницей без половины смысла. `details` работает всегда и умеет
 * раскрываться сам.
 *
 * ⚠ Первый вопрос раскрыт (это делает разметка витрины). Аккордеон, закрытый
 * весь, читается как список ссылок непонятно куда.
 *
 * ⚠ ВОПРОСЫ ИДУТ В ДВЕ КОЛОНКИ теми же правилами, что и проза: восемь вопросов
 * столбиком — это экран прокрутки под конец страницы, и половина карточки
 * снова пустует. Порядок чтения при этом КОЛОНОЧНЫЙ (первые четыре слева,
 * следующие четыре справа), как в макете, — этим `columns` и отличается от
 * сетки, которая разложила бы вопросы построчно.
 *
 * ⚠ Цена приёма честная: раскрытый ответ меняет высоту колонки, и один вопрос
 * может перескочить в соседнюю. Это работа `column-fill: balance`, и без него
 * левая колонка была бы вдвое длиннее правой.
 */
.tovar__story .story-ask { columns: var(--story-col) 2; column-gap: var(--story-gap);
	margin: 14px 0 4px; }

/* ⚠ ЧЕРТА СНИЗУ, А НЕ СВЕРХУ — из-за колонок. Правило «черта между соседями»
   (`details + details`) в две колонки не переносится: первый вопрос правой
   колонки соседа сверху не имеет, и колонки начинались бы по-разному. Черта
   под каждым вопросом одинакова в обеих. */
.tovar__story .story-ask details { -webkit-column-break-inside: avoid;
	break-inside: avoid; border-bottom: 1px solid var(--sh-line); }

/* ⚠ Штатный треугольник убираем ДВУМЯ способами: `list-style` понимают
   Firefox и новые Chrome, а Safari до сих пор рисует свой маркер и слушает
   только `::-webkit-details-marker`. Оставь одно — в одном из браузеров рядом
   с нашим шевроном стоял бы второй значок. */
.tovar__story .story-ask summary { position: relative; padding: 16px 40px 16px 0;
	font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--sh-ink);
	cursor: pointer; list-style: none; }
.tovar__story .story-ask summary::-webkit-details-marker { display: none; }
.tovar__story .story-ask summary:hover { color: var(--sh-blue); }

/* ⚠ Шеврон — повёрнутый уголок из границ, а не знак и не картинка. Знак «⌄» в
   разных системных шрифтах стоит на разной высоте и разного размера; картинка
   не поехала бы за тёмной темой. Границы — это цвет, он темнеет сам. */
.tovar__story .story-ask summary::after { content: ''; position: absolute; right: 10px;
	top: 20px; width: 8px; height: 8px; border-right: 1.6px solid var(--sh-muted);
	border-bottom: 1.6px solid var(--sh-muted); transform: rotate(45deg); }
.tovar__story .story-ask details[open] summary::after { top: 23px; transform: rotate(-135deg); }

/* ⚠ Мерка у ответа остаётся по той же причине, что у прозы выше: между 1000
   и 1100 точками карточки колонка одна, и без мерки ответ растянулся бы на
   всю ширину. В двух колонках по 648 мерка не ограничивает ничего. */
.tovar__story .story-ask p { max-width: var(--story-measure); margin: 0 0 16px;
	font-size: 15px; line-height: 1.55; color: var(--sh-muted); }

/* ── галерея снимков внутри описания ─────────────────────────────────── */

/*
 * Ряд снимков товара с подписью — их ставит ВИТРИНА из фотографий карточки, а
 * не автор описания. Модель к ним не прикасается: адрес файла в тексте однажды
 * оказался бы чужим, а после переливки картинок разъехались бы все адреса.
 *
 * ⚠ Ряда нет, когда снимков меньше двух. Одиночный снимок уже стоит крупно в
 * верхней части карточки, и повторить его здесь значило бы показать одно и то
 * же фото дважды на одной странице. Пустой рамки при этом не остаётся — за это
 * отвечает разметка, здесь просто нечего рисовать.
 *
 * ⚠ Ровно четыре колонки, а не `auto-fit`: при `auto-fit` два снимка
 * растянулись бы на пол-экрана каждый, и товар в них утонул бы в белом поле.
 * Пятый снимок уходит на вторую строку сам.
 */
.tovar__gal { margin: 4px 0 26px; }
.tovar__gal-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tovar__gal-row a { display: block; overflow: hidden; border: 1px solid var(--sh-line);
	border-radius: 8px; background: var(--sh-card); }
.tovar__gal-row a:hover { border-color: var(--sh-blue); text-decoration: none; }
.tovar__gal-row img { display: block; width: 100%; height: 150px; object-fit: contain; }
p.tovar__gal-say { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--sh-muted); }

/*
 * ⚠ Тем же приёмом и тем же числом, что плитки каталога в shop.css.
 * Фотографии товара сняты на белом фоне, и на тёмной странице они бьют по
 * глазам; притушить их надо ОДИНАКОВО во всех местах витрины, иначе один и
 * тот же снимок в списке и в описании выглядит двумя разными фотографиями.
 */
:root[data-shop-theme="dark"] .tovar__gal-row img,
:root[data-shop-theme="dark"] .tovar__story .story-shot-pic img { filter: brightness(.92); }

/* ── показатели ──────────────────────────────────────────────────────── */

/*
 * Пять крупных чисел из реквизитов 1С — полосой сразу под первым экраном.
 *
 * ⚠ ЭТО ПЕРЕЕЗД. До 04.09.2026 плитки стояли ВНУТРИ описания, то есть ниже
 * сгиба и только у тех 68 товаров из 363, у кого описание написано. Теперь
 * полоса — самостоятельный блок между карточкой покупки и блоком «О товаре»
 * (макет 1165:2): её видно, не листая, и она не зависит от описания.
 *
 * ⚠ КАКИЕ ИМЕННО ЧИСЛА — НАСТРОЙКА АРЕНДАТОРА (`shop`/`prop_gauges`), а не
 * список в коде: у видеокарты крупными нужны память и шина, у накопителя —
 * объём и ресурс. Кода под категорию здесь нет и не будет.
 *
 * ⚠ Числа стоят ДОСЛОВНО, как в реквизите 1С. Ни пересчёта, ни округления:
 * плитка «8 / ядер» законна потому, что реквизит есть, а всё, чего в учёте
 * нет, на странице появиться не должно.
 *
 * ⚠ РОВНО ПЯТЬ КОЛОНОК, и это ширина ряда, а не «сколько влезет данных».
 * Показателей может оказаться два — тогда две плитки встанут слева в своей
 * ширине, а не растянутся на всю строку: растянутое число в полупустой плитке
 * читается как поломка вёрстки, а короткий ряд — как короткий ряд.
 *
 * ⚠ Показателей нет вовсе — нет и полосы: блок рисует сама страница только
 * при непустом наборе (public/tovar/index.php). Пустая рамка на страницах
 * тех 295 товаров, у которых реквизиты не заполнены, читалась бы как «не
 * загрузилось».
 *
 * ⚠ Плитка теперь на `--sh-card`, а не на `--sh-bg`: она переехала из белой
 * колонки описания на серую страницу, и прежняя заливка слилась бы с фоном.
 */
.tovar__gauges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px; margin: 16px 0 0; }
.tovar__gauge { min-width: 0; padding: 16px 18px 18px; border: .8px solid var(--sh-line);
	border-radius: var(--sh-radius); background: var(--sh-card); }

/* ⚠ `overflow-wrap` — не украшение. В реквизит иногда попадает значение со
   словами («до 5,0 ГГц»), и без переноса оно вылезло бы за плитку. */
.tovar__gauge-num { display: block; font-size: 24px; font-weight: 700;
	line-height: 1.2; color: var(--sh-ink); overflow-wrap: anywhere; }
.tovar__gauge-say { display: block; margin: 4px 0 0; font-size: 13px;
	line-height: 1.35; color: var(--sh-muted); }

/* ── полноэкранный просмотр снимка ───────────────────────────────────── */

/*
 * Окно поверх страницы (макет 1360:2). Поведение — в zoom.js, здесь только вид.
 *
 * ⚠ ОКНО ТЁМНОЕ В ОБЕИХ ТЕМАХ, и это не забытые токены. Смотрят здесь одну
 * фотографию, и всё вокруг неё обязано уйти: светлая рама на дневной странице
 * спорила бы с самим снимком за внимание, а белое поле вокруг фотографии на
 * белом фоне ещё и врёт про её границы — не видно, где кончается товар и
 * начинается страница. Тем же соображением на витрине живут плашка скидки
 * (`--sh-sale-deep` не светлеет ночью) и предпросмотр витрины в кабинете,
 * который остаётся светлым при тёмной схеме.
 *
 * ⚠ Свои токены — чтобы «тёмное» лежало в одном месте, а не двадцатью
 * `rgba()` по файлу: поправить прозрачность пелены иначе значит найти все.
 *
 * ⚠ Слой 200. Шапка витрины липкая и стоит на 50 (shop.css); окно обязано
 * накрыть и её — иначе логотип с поиском висят поверх фотографии.
 */
.zoom {
	--zoom-veil: rgba(0, 0, 0, .82);
	--zoom-ink: #fff;
	--zoom-dim: rgba(255, 255, 255, .62);
	--zoom-chrome: rgba(255, 255, 255, .12);
	--zoom-chrome-on: rgba(255, 255, 255, .24);

	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	color: var(--zoom-ink);
}

/*
 * ⚠ ЭТА СТРОКА ОБЯЗАТЕЛЬНА, И ЕЁ ОТСУТСТВИЕ УЖЕ ЛОВИЛИ НА БОЕВОМ. Окно закрыто
 * атрибутом `hidden`, а прячет его правило браузера `[hidden] { display: none }`
 * — и любое НАШЕ правило с `display` сильнее любого браузерного, независимо от
 * веса селектора. Без этой строки закрытое окно стоит на странице развёрнутым:
 * пелена, стрелки и лента поверх карточки, крестик в углу, и убрать его нельзя.
 *
 * ⚠ Вторая половина правила — про ВНУТРЕННОСТИ, и она про карточку с ОДНИМ
 * снимком. Там скрипт прячет стрелки, счётчик и ленту тем же `hidden`, а у
 * стрелок и ленты свой `display` — то есть «1 из 1» и две стрелки в никуда
 * остались бы на экране ровно по той же причине.
 */
.zoom[hidden],
.zoom [hidden] { display: none; }

.zoom__veil { position: absolute; inset: 0; background: var(--zoom-veil); }

/*
 * Кадр со снимком.
 *
 * ⚠ `touch-action: none` обязателен: без него щипок двумя пальцами достаётся
 * браузеру, и он увеличивает страницу ЦЕЛИКОМ вместе с окном просмотра —
 * выглядит как поломка, выйти из неё можно только вторым щипком.
 *
 * ⚠ `overflow: hidden` — увеличенный снимок обязан обрезаться кадром, а не
 * вылезать под ленту миниатюр и стрелки.
 *
 * ⚠ Поля по бокам — под стрелки, сверху — под крестик. Без них снимок
 * подлезает под кнопки, и нажатие «вперёд» приходится делать по фотографии.
 *
 * ⚠ `flex`, А НЕ `grid`, И ЭТО НЕ ВКУСОВЩИНА — на боевом уже поймали. Снимку
 * был задан предел «не больше кадра» (`max-height: 100%`), а в сетке проценты
 * считаются от ЯЧЕЙКИ, высота которой берётся от содержимого: у фотографии
 * 2000 × 2000 ячейка вырастала до двух тысяч, предел превращался в «не больше
 * самого себя», и просмотр открывался в натуральную величину — виден один
 * угол, остальные полторы тысячи точек за краем.
 */
.zoom__stage { position: relative; z-index: 1; min-height: 0; padding: 60px 84px 10px;
	display: flex; overflow: hidden; touch-action: none; cursor: zoom-in; }

/*
 * ⚠ Снимок РАСТЯГИВАЕТСЯ на весь кадр (`flex` + `align-self: stretch`), а
 * вписывает фотографию внутрь коробки `object-fit: contain`. Процентов здесь
 * нет НАМЕРЕННО: любой процент считается от высоты родителя, а у растянутого
 * элемента она «неопределённая» — ровно та ловушка, из-за которой снимок
 * открывался в натуральную величину.
 *
 * ⚠ Второе, ради чего это. Маленький снимок-заглушка занимает РОВНО ТО ЖЕ
 * место, что и крупный, который едет ему на смену: фотография не выскакивает
 * марочкой посреди экрана, чтобы через секунду прыгнуть во весь кадр. Мелкий
 * растянут и оттого размыт — так и задумано: «сначала видно что, потом видно
 * подробности».
 *
 * ⚠ Пустые поля по краям коробки (`contain` вписывает, а не режет) считает
 * zoom.js, когда прижимает увеличенный снимок к краям: мерь он коробку —
 * фотографию можно было бы утащить в пустоту.
 */
.zoom__shot { flex: 1; min-width: 0; min-height: 0; align-self: stretch;
	object-fit: contain; transform-origin: center center;
	user-select: none; -webkit-user-drag: none; }

.zoom.is-zoom .zoom__stage { cursor: grab; }
.zoom.is-pull .zoom__stage { cursor: grabbing; }

/*
 * Кольцо ожидания, пока едет крупный файл. Видно его редко и недолго: в кадре
 * в это время уже стоит маленький снимок со страницы, и кольцо говорит только
 * «сейчас станет чётче», а не «тут ничего нет».
 */
.zoom__wait { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px;
	margin: -17px 0 0 -17px; border: 2px solid rgba(255, 255, 255, .28);
	border-top-color: var(--zoom-ink); border-radius: 50%; opacity: 0; }
.zoom.is-wait .zoom__wait { opacity: 1; }

/* ── крестик, «Esc» и стрелки ── */

.zoom__top { position: absolute; top: 14px; right: 18px; z-index: 3;
	display: flex; align-items: center; gap: 10px; }
.zoom__esc { font-size: 12px; color: var(--zoom-dim); }

/*
 * ⚠ Кнопки окна набраны здесь своими правилами, а не общей кнопкой витрины.
 * Класс `.btn` в проекте уже занят и однажды на этом обожглись; а кнопка
 * каталога («Купить», «Показать ещё») светлая и на пелене была бы пятном.
 */
.zoom__x,
.zoom__step { display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
	background: var(--zoom-chrome); color: var(--zoom-ink); cursor: pointer; }
.zoom__x:hover,
.zoom__step:hover { background: var(--zoom-chrome-on); }
.zoom__x:focus-visible,
.zoom__step:focus-visible,
.zoom__strip button:focus-visible,
.zoom__scale button:focus-visible,
.zoom__scale input:focus-visible { outline: 2px solid var(--zoom-ink); outline-offset: 2px; }

.zoom__x { width: 42px; height: 42px; }

.zoom__step { position: absolute; top: 50%; z-index: 3; width: 52px; height: 52px;
	margin-top: -26px; }
.zoom__step--prev { left: 18px; }
.zoom__step--next { right: 18px; }

/* ⚠ Край ряда — кнопка выключена и приглушена, но НЕ убрана. Исчезни она —
   соседняя прыгнула бы на её место, и промахнуться мимо «вперёд» стало бы
   делом одного нажатия. */
.zoom__step:disabled { opacity: .25; cursor: default; }
.zoom__step:disabled:hover { background: var(--zoom-chrome); }

/* ── низ: счётчик, лента, подсказка, ползунок ── */

/*
 * Три колонки: пусто · середина · ползунок. Середина стоит по центру ЭКРАНА, а
 * не по остатку места, — иначе счётчик со лентой съезжали бы влево ровно на
 * половину ползунка, и середина кадра переставала быть серединой.
 */
.zoom__foot { position: relative; z-index: 2; display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: end; gap: 12px; padding: 6px 20px 16px; }

.zoom__mid { grid-column: 2; min-width: 0; display: flex; flex-direction: column;
	align-items: center; gap: 10px; }

.zoom__count { margin: 0; padding: 4px 12px; border-radius: 999px;
	background: var(--zoom-chrome); font-size: 13px; }

/* Лента прокручивается вбок: снимков может быть и десять, а экран один. */
.zoom__strip { display: flex; gap: 8px; max-width: 100%; overflow-x: auto;
	padding: 2px; scrollbar-width: thin; }
.zoom__strip button { flex: 0 0 auto; padding: 0; border: 2px solid transparent;
	border-radius: 8px; background: var(--zoom-chrome); line-height: 0; cursor: pointer; }
.zoom__strip img { display: block; width: 62px; height: 48px; object-fit: contain;
	border-radius: 6px; }
/* Текущий обведён белым: синий акцент витрины на пелене читается хуже белого,
   да и «выбранное» здесь — не действие, а место в ряду. */
.zoom__strip button.is-on { border-color: var(--zoom-ink); }

.zoom__hint { margin: 0; font-size: 12px; color: var(--zoom-dim); text-align: center; }
/* Подсказок две, видно одну — какую, решает вид указателя (ниже). */
.zoom__hint--touch { display: none; }

.zoom__scale { grid-column: 3; justify-self: end; }
.zoom__scale-row { display: flex; align-items: center; gap: 10px; padding: 6px 12px;
	border-radius: 999px; background: var(--zoom-chrome); }
.zoom__scale button { display: grid; place-items: center; width: 22px; height: 22px;
	padding: 0; border: 0; background: none; color: var(--zoom-ink); cursor: pointer; }
.zoom__scale input { width: 120px; accent-color: var(--zoom-ink); }
.zoom__percent { margin: 6px 0 0; font-size: 12px; color: var(--zoom-dim); text-align: right; }

/*
 * Прокрутка страницы под открытым окном.
 *
 * ⚠ `position: fixed`, а не `overflow: hidden` у body: на телефоне под
 * перекрывающим слоем страница всё равно уезжает под пальцем, и человек
 * закрывает просмотр в другом месте каталога. Смещение возвращает zoom.js —
 * фиксация сама по себе выбрасывает страницу наверх.
 */
body.zoom-lock { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
	.zoom { animation: zoom-come .16s ease-out; }
	/* Наезд плавный — но только пока снимок не тащат: во время протяжки
	   задержка превращается в «резину» и снимок отстаёт от пальца. */
	.zoom__shot { transition: transform .18s ease-out; }
	.zoom.is-pull .zoom__shot { transition: none; }
	.zoom__wait { animation: zoom-spin .8s linear infinite; }

	@keyframes zoom-come { from { opacity: 0; } to { opacity: 1; } }
	@keyframes zoom-spin { to { transform: rotate(360deg); } }
}

/*
 * Указатель грубый — значит палец. Ни колеса, ни клавиши Esc там нет, поэтому
 * подсказка меняется, а ползунок и подпись «Esc» уходят совсем: их работу
 * делает щипок, а место на телефоне дороже.
 */
@media (pointer: coarse) {
	.zoom__hint--mouse { display: none; }
	.zoom__hint--touch { display: block; }
	.zoom__esc,
	.zoom__scale { display: none; }
	.zoom__stage { padding: 56px 12px 8px; }
	/* Стрелки на телефоне мельче и полупрозрачнее: там листают свайпом, а
	   кнопки нужны как подсказка, что снимок не один. */
	.zoom__step { width: 44px; height: 44px; margin-top: -22px; }
	.zoom__step--prev { left: 8px; }
	.zoom__step--next { right: 8px; }
}

@media (max-width: 700px) {
	/* Ползунка тут может и не быть (грубый указатель выше) — но на узком окне
	   мыши он обязан встать под ленту, а не отжимать её к краю. */
	.zoom__foot { grid-template-columns: minmax(0, 1fr); }
	.zoom__mid,
	.zoom__scale { grid-column: 1; justify-self: center; }
	.zoom__percent { text-align: center; }
	.zoom__stage { padding: 56px 60px 8px; }
}

@media (max-width: 900px) {
	/* Колонки характеристик схлопываются: три полоски по одному слову хуже
	   одного длинного списка. */
	.tovar__specs { grid-template-columns: minmax(0, 1fr); gap: 18px; }

	/*
	 * ⚠ «Хватит» и «будет мало» встают друг под друга. Смысл блока — сравнение
	 * одним взглядом, и на узком окне две колонки по три слова в строке этого
	 * взгляда уже не дают: лучше два читаемых списка подряд.
	 */
	.tovar__story .story-fit { grid-template-columns: minmax(0, 1fr); }

	/*
	 * ⚠ ОТМЕНЫ МЕРКИ ЗДЕСЬ БОЛЬШЕ НЕТ, И ЭТО ИСПРАВЛЕНИЕ, А НЕ ВКУС. Стояло
	 * `--story-measure: none` с доводом «на окне 760 мерка всё равно ничего не
	 * ограничивает». Довод верен только для окна 760 и ниже: карточка равна
	 * окну минус 119 точек, и на окне 900 она ещё 811 — там отмена не «ничего
	 * не меняла», а растягивала абзац во всю карточку. Замерено: 104 знака в
	 * строке на окне 900, 101 на 880, 98 на 860 — при пороге 90. Причём выше
	 * порога срабатывания, на окне 940, тот же абзац шёл в 700 точек: правило
	 * делало строку ДЛИННЕЕ ровно там, где окно УЖЕ.
	 *
	 * ⚠ Ничего взамен не нужно: `max-width` шире содержащего блока элемент не
	 * делает, поэтому на узком окне мерка и так молчит сама. Полосы пустоты,
	 * которой боялся прежний довод, не возникает.
	 */

	/*
	 * ⚠ Ряды становятся по два. Порог тот же, что у характеристик выше, и это
	 * осознанно: ниже 900 плитка показателя была бы уже 160 точек, а в ней
	 * стоит число 24-м кеглем с подписью, и снимок в галерее превращается в
	 * марку. Выше 900 пять показателей в ряд ещё читаются — так и в макете.
	 */
	.tovar__gauges,
	.tovar__gal-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	/*
	 * ⚠ Свёрнутому описанию на телефоне нужно БОЛЬШЕ высоты, а не меньше.
	 * Заголовок описания там переносится на три-четыре строки (на ноутбуке он в
	 * одну), и 9.5em показали бы заголовок, срез и ни слова текста. 15.5em —
	 * это заголовок и четыре строки под ним, то есть ровно столько же текста,
	 * сколько видно на широком экране.
	 */
	.tovar__story { --story-peek: 15.5em; }

	/* ⚠ На телефоне полоса становится одной колонкой. Две плитки по 160 точек
	   ещё читаются, но подпись «5,0 ГГц в нагрузке» в них переносится по
	   слогам — а показатель, который надо разбирать, показателем быть
	   перестаёт. */
	.tovar__gauges { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
	/* На узком экране кнопке покупки остаётся мало места — ужимаем квадраты. */
	.tovar__icon { width: 46px; min-height: 46px; }
}