/*
 * Карточка товара — то, чего нет в 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));
}

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

/*
 * «Купили 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; }

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

/*
 * Блок во всю ширину страницы: заголовок крупнее обычного (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); }

/* ── описание ─────────────────────────────────────────────────────────── */

/*
 * «Частые вопросы» — серыми карточками, а не списком с точками.
 *
 * ⚠ Метку `story-faq` ставит редактор описания (ProductStory), и стоит она на
 * ЗАГОЛОВКЕ блока — сам список идёт следом обычным `ul`. Отсюда соседский
 * селектор: другого способа отличить вопросы от простого перечня в разметке
 * нет, а заводить ради этого второй класс значило бы переписывать уже
 * написанные описания.
 */
.tovar__story h2.story-faq + ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.tovar__story h2.story-faq + ul li { margin: 0; padding: 10px 14px;
	background: var(--sh-bg); border-radius: 8px; }

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

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