/* Тема витрины soviet-box.com: конструктивизм.
 *
 * Слой поверх стоковой темы OpenCart: свои шрифты, палитра, геометрия и иконки.
 * Шаблоны ядра не трогаем — своя тема заберёт эти правила как есть, когда дойдут руки
 * до шага 2. Файл грузится на всех страницах витрины (extension/soviet, common/menu.assets).
 *
 * Язык формы — не «советские картинки на сайте», а печатный лист двадцатых:
 *
 *   - Две краски по газетной бумаге. Кумач и типографская чернь, третьего цвета нет.
 *     Серый — это не краска, это чернь навылет (color-mix), поэтому лист держит две.
 *   - Диагональ. Родченко и Клуцис строят плакат по косой: красный клин, скошенная
 *     плашка, полоса, входящая в угол. Прямоугольная сетка — это уже не конструктивизм,
 *     а таблица. Диагональ даёт clip-path, ни одной картинки.
 *   - Плашка вместо рамки. Тяжёлый чёрный блок и белый вывороткой по нему — так набирали
 *     шапки. Тонких линеек нет: линейка либо 3 px, либо 7.
 *   - Несовмещение красок. Красный оттиск сдвинут на 4 px относительно чёрного —
 *     то, что на плохой печати выходило браком, здесь работает подписью эпохи.
 *     Это же движение отвечает за наведение: элемент уезжает под курсором, и из-под него
 *     показывается вторая краска. Тени нет ни одной — «тень» здесь всегда второй оттиск.
 *   - Крупные цифры. Номер отдела, процент скидки, цена — набраны так, как набирали
 *     тиражи и проценты выполнения плана: во всю плашку, узким гротеском.
 *
 * Современное — в механике, не в оформлении. Всё на CSS, ни одной библиотеки:
 * появление блоков по прокрутке (`animation-timeline: view()`), переходы между
 * страницами (`@view-transition`), липкое меню, `:has()` вместо классов от скрипта,
 * `color-mix()` вместо второй палитры. Каждая такая вещь закрыта `@supports` или
 * работает как улучшение: в браузере без неё страница просто статична.
 *
 * Движение целиком снимается при `prefers-reduced-motion`.
 *
 * Шрифты лежат рядом, к Google витрина не ходит:
 *
 *   Oswald   — заголовки, кнопки, цены, все цифры. Узкий гротеск плакатного рода.
 *   PT Sans  — текст. ParaType рисовал его по «Журнальной рубленой», это буквально
 *              советская шрифтовая школа; кириллица в нём полная — а она нужна,
 *              в названиях товаров живут индексы вроде «2614.2Н» и «Cal. 2416Б».
 *
 * Интерфейс английский, кириллица — только внутри данных каталога.
 */


/* Шрифты -------------------------------------------------------------------- */

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/oswald-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/oswald-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ptsans-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/ptsans-400-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/ptsans-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/ptsans-700-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}


/* Палитра и метрика --------------------------------------------------------- */

:root {
	/* Две краски. Красный — вишнёвый, приглушённый: на бумаге он лежит большими
	   полями (полоса каталога, доля первого экрана, клинья плашек), и киноварь
	   такой площадью бьёт по глазам. Типографская краска на газетной бумаге так
	   и печаталась — плотно и глухо, звонкость ей давала не яркость, а контраст
	   с чернью и полем бумаги. По светлоте вишня к бумаге ближе, чем киноварь,
	   поэтому крупные поля успокаиваются, а мелкое (цена, ссылки) остаётся заметным:
	   на бумаге у неё 9.8:1, выворотка по ней — 12:1. */
	--sb-red: #a3202a;
	--sb-red-dark: #7d1720;
	--sb-ink: #12100d;
	--sb-paper: #ece4d5;
	--sb-card: #f6f1e5;

	/* Полутона — не отдельные краски, а разбавленная чернь: так их и мешает печать. */
	--sb-ink-soft: color-mix(in srgb, var(--sb-ink) 72%, var(--sb-paper));
	--sb-muted: color-mix(in srgb, var(--sb-ink) 48%, var(--sb-paper));
	--sb-paper-2: color-mix(in srgb, var(--sb-ink) 10%, var(--sb-paper));
	--sb-line: var(--sb-ink);
	--sb-line-soft: color-mix(in srgb, var(--sb-ink) 26%, var(--sb-paper));
	--sb-brass: #b98a2a;

	--sb-display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
	--sb-text: 'PT Sans', 'Segoe UI', Arial, sans-serif;

	/* Линейка бывает двух весов, промежуточных нет: это решает половину споров
	   о том, какой толщины должна быть граница в конкретном месте. */
	--sb-rule: 3px;
	--sb-rule-heavy: 7px;

	/* Несовмещение красок: на столько уезжает красный оттиск и на столько же
	   сдвигается элемент под курсором. Одно число на всю тему — иначе движение
	   в разных блоках выходит разным по темпу. */
	--sb-shift: 4px;

	/* Общая высота кнопок, полей и селектов — чтобы стояли в одну линию. */
	--sb-control-h: 46px;

	/* Бутстрап рисует всё скруглённым — гасим в одном месте, через его переменные. */
	--bs-border-radius: 0;
	--bs-border-radius-sm: 0;
	--bs-border-radius-lg: 0;
	--bs-border-radius-xl: 0;
	--bs-border-radius-xxl: 0;
	--bs-border-radius-pill: 0;
	--bs-border-color: var(--sb-line-soft);

	--bs-body-font-family: var(--sb-text);
	--bs-body-font-size: 16px;
	--bs-body-line-height: 1.6;
	--bs-body-color: var(--sb-ink);
	--bs-body-bg: var(--sb-paper);
	--bs-link-color: var(--sb-red);
	--bs-link-hover-color: var(--sb-red-dark);
	--bs-primary: var(--sb-red);
	--bs-emphasis-color: var(--sb-ink);

	accent-color: var(--sb-red);
	color-scheme: light;
}

/* Печатные приёмы ------------------------------------------------------------ */

/* Плашка-шапка блока: тяжёлый чёрный брусок, красный клин с правого края.
   Это главный повторяющийся знак темы — им начинается каждый раздел главной
   и страницы категории, чтобы витрина читалась одним набором.

   Клин режется clip-path по самому псевдоэлементу: никакого поворота всего блока,
   поэтому текст внутри остаётся горизонтальным и читаемым. */
.sb-band {
	display: flex;
	position: relative;
	z-index: 0;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	padding: 11px 16px;
	overflow: hidden;
	background: var(--sb-ink);
	color: var(--sb-paper);
}

.sb-band::after {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	width: clamp(90px, 16%, 210px);
	clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%);
	background: var(--sb-red);
	content: '';
}

/* На узкой колонке текст плашки переносится и заезжает на клин: он лежит ниже
   (z-index: -1), так что читается, но строка идёт по стыку двух красок. Сужаем
   клин до угла — знак остаётся, стык уходит. */
@media (max-width: 767px) {
	.sb-band::after {
		width: 54px;
		clip-path: polygon(58% 0, 100% 0, 100% 100%, 0 100%);
	}
}

/* Надзаголовок: мелкая капитель с широкой разрядкой. Внутри чёрной плашки идёт
   вывороткой, снаружи — красной краской. */
.sb-kicker {
	margin: 0;
	font-family: var(--sb-display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .22em;
	line-height: 1;
	text-transform: uppercase;
}

/* Штамп: косой оттиск в рамке. Косина небольшая и всегда в одну сторону —
   штамп прикладывали рукой, но не пьяной.

   Один приём на все правые концы плашек: дата партии на стене поступлений,
   счёт открытых отделов, вход в полный список брендов. Разные по смыслу вещи,
   но по месту и по роли одинаковые — это правый край плашки, — и порознь они
   расползались: два оттиска и одна подчёркнутая ссылка.

   `inline-block` нужен ссылке: у строчного элемента поворот и поля не работают. */
.sb-stamp {
	display: inline-block;
	margin: 0;
	padding: 5px 11px 4px;
	transform: rotate(-2deg);
	border: 2px solid currentColor;
	font-family: var(--sb-display);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .12em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
}

/* На плашке штамп идёт чистой вывороткой: цвет самой плашки (--sb-paper) рядом
   с белым текстом заголовка выглядел бы подсевшей краской. */
.sb-band .sb-stamp {
	border-color: #fff;
	color: #fff;
}

/* Штамп-ссылка: под курсором заливается краской наоборот — поле белое, буквы
   красные. Сдвига здесь нет намеренно, оттиск уже лежит косо. */
a.sb-stamp:hover,
a.sb-stamp:focus-visible {
	background: #fff;
	color: var(--sb-red);
	text-decoration: none;
}

/* Куки-баннер (catalog/view/template/common/cookie.twig) — та же плашка, что
   у доски отделов (departments.css): .sb-band с красным клином, только внизу
   экрана и с двумя штампами вместо одного. Позиционирование (#cookie,
   position: fixed) — в core stylesheet.css, тут только то, что внутри. */
.sb-cookie {
	align-items: center;
	padding: 14px 16px;
}

/* Плашка наследует от .sb-band въезд-по-прокрутке (animation-timeline: view(),
   ниже в файле) — но #cookie фиксирован над экраном, а не лежит в потоке
   документа, и Chromium так и не досчитывает ему прогресс прокрутки: сама
   плашка при этом рисуется как ни в чём не бывало (браузер красит по крайнему
   кадру), а вот clip-path из стартового кадра (`sb-wipe`, инсет 100% справа)
   продолжает резать область клика — кнопки видны, но не нажимаются, пока
   страницу не прокрутят хоть на пиксель (проверено вживую). Плашка должна
   быть кликабельна сразу — отключаем анимацию именно здесь, специфичность
   ID перебивает правило `.sb-band` ниже вне зависимости от порядка в файле. */
#cookie .sb-band {
	animation: none;
	animation-timeline: none;
	clip-path: none;
}

.sb-cookie__kicker {
	flex: 0 0 auto;
	color: var(--sb-red);
}

.sb-cookie__lead {
	flex: 1 1 260px;
	margin: 0;
	color: color-mix(in srgb, var(--sb-paper) 78%, var(--sb-ink));
	font-size: 14px;
}

.sb-cookie__lead a {
	color: #fff;
}

.sb-cookie__actions {
	display: flex;
	flex: 0 0 auto;
	gap: 10px;
}

/* Сброс браузерной кнопки — .sb-stamp задуман под <p>/<a>, у <button> своя
   рамка/фон/шрифт по умолчанию. */
.sb-cookie__stamp {
	background: none;
	cursor: pointer;
	font: inherit;
}

/* Согласие — красные чернила по светлому полю: читается основным действием на
   тёмной плашке (тот же оттиск наоборот, что у a.sb-stamp:hover). Отказ —
   обычный белый оттиск (.sb-band .sb-stamp выше), тот же размер и вес: для
   европейского покупателя кнопка отказа не должна выглядеть менее значимой.

   Селектор с #cookie не для красоты: `.sb-band .sb-stamp` (два класса, 0,2,0)
   иначе перебивает по специфичности одноклассовый `.sb-cookie__stamp--agree`
   (0,1,0) — фон становился кремовым по правилу ниже, а цвет текста оставался
   белым от `.sb-band .sb-stamp`: белым по кремовому текст был не виден.
   Найдено по жалобе «не видно текст на кнопке», не читкой кода. */
#cookie .sb-cookie__stamp--agree {
	background: var(--sb-paper);
	border-color: var(--sb-paper);
	color: var(--sb-red);
}

#cookie .sb-cookie__stamp--agree:hover,
#cookie .sb-cookie__stamp--agree:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--sb-red-dark);
}

#cookie .sb-cookie__stamp--disagree:hover,
#cookie .sb-cookie__stamp--disagree:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--sb-ink);
}

@media (max-width: 767px) {
	.sb-cookie {
		padding: 12px;
	}

	.sb-cookie__actions {
		flex: 1 1 100%;
	}

	.sb-cookie__stamp {
		flex: 1 1 0;
		text-align: center;
	}
}

/* Цифра во всю плашку: проценты, номера, счётчики. */
.sb-figure {
	font-family: var(--sb-display);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: .82;
}

/* Основа -------------------------------------------------------------------- */

/* Фон — бумага и растровая точка, больше ничего. Прежние обои со звёздами
   и лучами убраны намеренно: на странице категории они спорили с фотографиями
   товара и читались шаблонным «солнышком», а не советской печатью. Знаки эпохи
   остались там, где им место, — в шапках блоков, в подвале и на самих вещах.

   Точка — плитка 5 px, чернь в 8%. На глаз это зерно газетной бумаги; на широком
   экране повторов много, но плитка крошечная и браузер держит её одним тайлом. */
body {
	background-color: var(--sb-paper);
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='5' height='5'><circle cx='1' cy='1' r='.8' fill='%2312100d' fill-opacity='.08'/></svg>");
	color: var(--sb-ink);
	font-family: var(--sb-text);
	font-size: 16px;
	line-height: 1.6;
	scrollbar-color: var(--sb-ink) var(--sb-paper-2);
}

a {
	color: var(--sb-red);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--sb-red-dark);
	text-decoration: underline;
}

::selection {
	background: var(--sb-red);
	color: #fff;
}

:focus-visible {
	outline: 3px solid var(--sb-red);
	outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--sb-display);
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.08;
	text-transform: uppercase;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Заголовок страницы: крупно, с тяжёлой красной линейкой под ним — шапка плаката. */
h1 {
	margin: 0 0 24px;
	font-size: clamp(28px, 3.4vw, 44px);
	letter-spacing: .01em;
}

h1::after {
	display: block;
	width: 110px;
	height: var(--sb-rule-heavy);
	margin-top: 14px;
	background: var(--sb-red);
	content: '';
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 22px;
}

h4, h5, h6 {
	font-size: 17px;
}

/* Названия товаров и прочие заголовки внутри карточек капителью не набираем:
   в них живут индексы и латиница вперемешку, капитель их слепляет. */
.product-thumb h4,
.product-thumb h4 a,
#content .table h4,
.sb-brands__name,
.sb-subcats__name {
	font-family: var(--sb-text);
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

hr {
	border: 0;
	border-top: var(--sb-rule) solid var(--sb-line);
	opacity: 1;
}

/* Движение ------------------------------------------------------------------- */

/* Появление блоков по прокрутке — на таймлайне самого элемента, без единой строчки
   скрипта и без обработчика на прокрутку: браузер считает это на композиторе.
   Закрыто `@supports`, поэтому там, где `view()` нет, блоки просто стоят на месте.

   Первый экран не анимируем никогда: он и так в кадре, а гонять по нему прозрачность
   значит задержать самый крупный элемент отрисовки. */
@keyframes sb-rise {
	from {
		transform: translateY(26px);
		opacity: 0;
	}
}

@keyframes sb-wipe {
	from {
		clip-path: inset(0 100% 0 0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.sb-dept__grid > li,
		.sb-wall__grid > li,
		.sb-brands__tile,
		.sb-cat-text,
		#content .product-thumb {
			animation: sb-rise .5s linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}

		/* Шапка раздела не всплывает, а выезжает краской слева направо —
		   так плашку и печатали, одним движением валика. */
		.sb-band {
			animation: sb-wipe .6s linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 18%;
		}
	}
}

/* Переходы между страницами. Одна строка — и переход из категории в товар идёт
   растворением вместо белой вспышки. Браузеры без View Transitions листают как раньше. */
@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}
}

/* Кнопки -------------------------------------------------------------------- */

.btn {
	--bs-btn-border-radius: 0;
	--bs-btn-border-width: var(--sb-rule);
	--bs-btn-font-family: var(--sb-display);
	--bs-btn-font-size: 14px;
	--bs-btn-font-weight: 500;
	--bs-btn-padding-y: .5rem;
	--bs-btn-padding-x: 1.2rem;
	/* Межстрочный интервал текста (1.6) в кнопке лишний: он же задавал ей высоту
	   в 45 px против 44 у полей. */
	--bs-btn-line-height: 1.2;

	/* Кнопки и поля одной высоты: у бутстрапа кнопка с иконкой выходила на 45 px,
	   а селект рядом — на 39, и в панели над списком товаров низ съезжал. */
	min-height: var(--sb-control-h);
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: background-color .12s, color .12s, border-color .12s, translate .12s, box-shadow .12s;
}

.btn:not(.d-block) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45em;
}

/* Кнопку, растянутую утилитой .d-block, центрируем так же. Иначе иконка внутри
   тянет строку вниз и кнопка выходит на пиксель выше соседних полей.
   !important — потому что утилиты бутстрапа объявлены с ним же. */
.btn.d-block {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: .45em;
}

/* Наведение — не подсветка, а оттиск: кнопка уезжает влево-вверх, из-под неё выходит
   вторая краска. Тень тут не тень, у неё нет размытия — это второй прогон. */
.btn-primary:hover,
.btn-danger:hover,
.btn-dark:hover,
.btn-secondary:hover,
.btn-info:hover {
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-ink);
	translate: calc(var(--sb-shift) * -1) calc(var(--sb-shift) * -1);
}

.btn-primary:active,
.btn-danger:active,
.btn-dark:active,
.btn-secondary:active,
.btn-info:active {
	box-shadow: none;
	translate: 0 0;
}

.btn-lg {
	--bs-btn-font-size: 15px;
	--bs-btn-padding-y: .62rem;
}

.btn-primary,
.btn-danger {
	--bs-btn-bg: var(--sb-red);
	--bs-btn-border-color: var(--sb-red);
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: var(--sb-red);
	--bs-btn-hover-border-color: var(--sb-red);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--sb-ink);
	--bs-btn-active-border-color: var(--sb-ink);
	--bs-btn-disabled-bg: var(--sb-muted);
	--bs-btn-disabled-border-color: var(--sb-muted);
}

/* .btn-info — стоковый бутстраповский вариант, встречается только на карте
 * (Contact Us) и в паре списков аккаунта; третьего цвета у темы нет, поэтому
 * тот же чёрный, что и у .btn-dark/.btn-secondary, а не голубой по умолчанию. */
.btn-dark,
.btn-secondary,
.btn-info {
	--bs-btn-bg: var(--sb-ink);
	--bs-btn-border-color: var(--sb-ink);
	--bs-btn-color: var(--sb-paper);
	--bs-btn-hover-bg: var(--sb-red);
	--bs-btn-hover-border-color: var(--sb-red);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--sb-red);
	--bs-btn-active-border-color: var(--sb-red);
}

.btn-light,
.btn-outline-secondary,
.btn-outline-primary {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--sb-ink);
	--bs-btn-color: var(--sb-ink);
	--bs-btn-hover-bg: var(--sb-ink);
	--bs-btn-hover-border-color: var(--sb-ink);
	--bs-btn-hover-color: var(--sb-paper);
	--bs-btn-active-bg: var(--sb-ink);
	--bs-btn-active-color: var(--sb-paper);
}

.btn:focus-visible {
	outline: 3px solid var(--sb-red);
	outline-offset: 2px;
	box-shadow: none;
}

/* Поля ввода ---------------------------------------------------------------- */

.form-control,
.form-select,
.input-group-text {
	min-height: var(--sb-control-h);
	border: var(--sb-rule) solid var(--sb-line);
	border-radius: 0;
	background: var(--sb-card);
	color: var(--sb-ink);
	font-family: var(--sb-text);
}

/* Многострочные поля высотой не ограничиваем. */
textarea.form-control {
	min-height: 0;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--sb-red);
	box-shadow: none;
}

.form-control::placeholder {
	color: var(--sb-muted);
}

.input-group-text {
	background: var(--sb-paper-2);
	font-family: var(--sb-display);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

label,
.form-label,
.col-form-label {
	font-family: var(--sb-display);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
}

/* Верхняя служебная полоса --------------------------------------------------- */

/* Самая верхняя строка листа — кумачовая полоса во всю ширину, под ней чёрный
   служебный набор мелкой капителью. Полоса ничего не сообщает, она задаёт краску:
   лист начинается красным. */
#top {
	border-top: var(--sb-rule-heavy) solid var(--sb-red);
	background: var(--sb-ink);
	color: var(--sb-paper);
	font-family: var(--sb-display);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

#top .container > .row {
	align-items: center;
	min-height: 38px;
}

/* --sb-paper — тёплый кремовый (#ece4d5), на чёрной плашке #top мельким
   капительным шрифтом с широкой разрядкой читался тускло — жалоба
   пользователя 21.08.2026: «на десктопе это меню плохо читается». Чистый
   белый вместо кремового — не совпадает с цветом текста больше нигде на
   тёмных плашках специально, тут это самая мелкая надпись на сайте,
   ей нужен запас контраста, которого у --sb-paper нет.

   Первая попытка (`#top a`) не подействовала — ядро
   (catalog/view/stylesheet/stylesheet.css) красит эту же ссылку правилом
   `#top .list-inline-item > a` — на класс длиннее, специфичность выше,
   и оно побеждало вне зависимости от порядка подключения файлов (проверено
   через document.styleSheets: computed color оставался Bootstrap-овским
   --bs-gray-600, не моим). Повторяем структуру селектора ядра один в
   один, чтобы specificity была не меньше. */
#top a,
#top .list-inline-item > a,
#top .list-inline-item .dropdown > a,
#top .list-inline-item .dropdown > span,
#top .dropdown-toggle {
	color: #fff;
	text-decoration: none;
}

#top a:hover,
#top .dropdown-toggle:hover {
	color: var(--sb-red);
	text-decoration: none;
}

/* `#top a` чуть выше красит вывороткой ВСЕ ссылки внутри #top — годится
   для строки на тёмной плашке (Contact/Wishlist/Cart...), но так же
   перекрашивает и «Register»/«Login»/«My Account»/... внутри выпадающего
   меню (те же <a class="dropdown-item">), у которого фон светлый
   (--sb-card) — получался почти нечитаемый светлый текст на светлом.
   Валютный переключатель рядом этой беды избежал случайно: там пункты —
   <span>, не <a> (extension/soviet — то есть штатный common/currency.twig),
   `#top a` их не задевает. Явно возвращаем тёмный цвет — по специфичности
   (класс + класс внутри #id) это правило перевешивает `#top a` (id +
   элемент), независимо от порядка в файле. Найдено пользователем
   21.08.2026 — «в выпадающем меню не видно элементов». */
#top .dropdown-menu .dropdown-item {
	color: var(--sb-ink);
}

/* Тот же дропдаун, наведение. Общий `.dropdown-item:hover` (ниже по файлу)
   красит фон в тёмный (--sb-ink) и текст в светлый (--sb-paper) — но правило
   цвета чуть выше (`#top .dropdown-menu .dropdown-item`, id + 2 класса)
   специфичнее голого `.dropdown-item:hover` (класс + псевдокласс = тот же
   уровень, что просто 2 класса) и на hover продолжает красить текст в тёмный
   --sb-ink поверх уже тёмного фона — текст пропадал целиком. Жалоба
   пользователя 21.08.2026: «активный пункт меню при наведении заливается
   тёмным и текста меню не видно». Возвращаем светлый текст именно на hover,
   тем же селектором (id + 2 класса + псевдокласс) — специфичность выше
   базового правила цвета этого дропдауна. */
#top .dropdown-menu .dropdown-item:hover,
#top .dropdown-menu .dropdown-item:focus {
	color: var(--sb-paper);
}

#top .dropdown-menu {
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-card);
}

.dropdown-menu {
	border: var(--sb-rule) solid var(--sb-ink);
	border-radius: 0;
	background: var(--sb-card);
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-red);
}

.dropdown-item {
	font-size: 15px;
}

.dropdown-item:hover,
.dropdown-item:focus {
	background: var(--sb-ink);
	color: var(--sb-paper);
}

/* Шапка --------------------------------------------------------------------- */

header {
	padding: 12px 0;
	border-bottom: var(--sb-rule-heavy) solid var(--sb-ink);
	background: transparent;
}

header .row {
	align-items: center;
}

/* Логотип — словесный, со знаком: белая звезда в кумачовом квадрате и название
   чернью. Пока настройка config_logo пуста, ядро печатает название магазина
   заголовком, его и оформляем.

   Звезда нарисована фоном самого квадрата (не маской): маска красит форму цветом
   подложки, а тут нужны две краски сразу — красное поле и белая звезда по нему. */
#logo h1 {
	margin: 0;
	font-size: clamp(26px, 2.6vw, 34px);
	letter-spacing: .02em;
}

#logo h1::after {
	display: none;
}

#logo h1 a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--sb-ink);
	text-decoration: none;
}

#logo h1 a::before {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	background: var(--sb-red) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23fff' d='M12 1.6l2.9 7.3 7.8.4-6 5 2 7.6-6.7-4.3-6.7 4.3 2-7.6-6-5 7.8-.4z'/></svg>") center / 30px 30px no-repeat;
	content: '';
	transition: rotate .25s;
}

#logo h1 a:hover {
	color: var(--sb-ink);
}

/* Знак поворачивается под курсором — единственное вращение на витрине,
   и оно на самом уместном для звезды месте. */
#logo h1 a:hover::before {
	rotate: -18deg;
}

/* Ядро само ограничивает #logo img max-width: 200px (catalog/view/stylesheet/
   stylesheet.css) — с новым широким лого (эмблема + «SOVIET BOX» одной
   строкой, соотношение сторон ~4.3:1) этот предел раньше max-height и
   определял итоговый размер, отчего лого выходило мельче, чем разрешает
   высота шапки. Перекрываем оба предела здесь. */
#logo img {
	max-height: 80px;
	max-width: 360px;
}

/* Телефон боком (или маленький планшет) — Bootstrap уже переключил колонки
   лого/поиск/корзина в один ряд (`col-md-*`, брейкпоint 768px), но `lg`
   (992px), который отдаёт логотипу более широкую колонку (col-lg-4 вместо
   col-md-3), ещё не наступил — узкой col-md-3 не хватает под
   полноразмерный десктопный логотип (max-width: 360px), он наезжает на
   соседнее поле поиска. Жалоба пользователя 21.08.2026: «перевернул
   телефон в горизонтальное положение — логотип заехал под окно поиска».
   Тот же уменьшенный логотип, что и на портретном телефоне (медиа-запрос
   ниже), только здесь колонки не складываются одна под другой — отступы
   шапки трогать незачем, только размер картинки. */
@media (min-width: 768px) and (max-width: 991px) {
	#logo img {
		max-height: 44px;
		max-width: 170px;
	}
}

/* На телефоне колонки шапки (лого/поиск/корзина) складываются одна под
   другой (Bootstrap, эти три — col-md-*), и полноразмерный логотип с
   полем header {padding: 12px 0} и полями самого #logo вокруг занимал
   заметную часть первого экрана почти без содержимого — жалоба
   пользователя 21.08.2026: «шапка ... выглядит пустой». Мельче и без
   лишних отступов. */
@media (max-width: 767px) {
	/* Ядро (catalog/view/stylesheet/stylesheet.css) держит на #top
	   `margin-bottom: 20px` — на десктопе это просто воздух между красной
	   плашкой и шапкой, а на телефоне это ровно та лишняя пустота над
	   логотипом, на которую пожаловался пользователь 21.08.2026 (второй
	   заход — первого раза мельче логотипа было мало). */
	#top {
		margin-bottom: 0;
	}

	header {
		padding: 8px 0;
	}

	#logo {
		margin: 0;
	}

	#logo img {
		max-height: 48px;
		max-width: 220px;
	}
}

/* Поиск в шапке: строгая рамка, красная кнопка. */
header .input-group .form-control {
	border-right: 0;
}

header .input-group .btn {
	--bs-btn-bg: var(--sb-red);
	--bs-btn-border-color: var(--sb-line);
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: var(--sb-ink);
	--bs-btn-hover-border-color: var(--sb-line);

	padding-inline: 1.3rem;
}

/* Кнопка поиска стоит в связке с полем — сдвигать её нельзя, иначе разъедется шов. */
header .input-group .btn:hover {
	box-shadow: none;
	translate: 0 0;
}

#cart .btn {
	font-size: 15px;
}

/* Крошки, содержимое -------------------------------------------------------- */

/* Стоковая тема рисует крошки плашкой с уголками-стрелками из бордюров. Уголки
   снимаем, плашку тоже: путь — это строчка мелким шрифтом, а не элемент интерфейса. */
.breadcrumb {
	margin: 18px 0 22px;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--sb-display);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.breadcrumb > li.breadcrumb-item {
	padding: 0;
	text-shadow: none;
	/* Ядро держит white-space:nowrap (catalog/view/stylesheet/stylesheet.css) —
	 * рассчитано на его собственную плашку-крошку с уголками, у нас крошка просто
	 * строка мелким шрифтом. На длинном названии товара (а они у нас длинные —
	 * «SOVIET pins OCTOBER CHILD LENIN in a pentagonal star...») nowrap не даёт
	 * крошке перенестись и толкает всю страницу шире экрана на телефоне. */
	white-space: normal;
}

.breadcrumb > li.breadcrumb-item::after {
	display: none;
}

.breadcrumb > li.breadcrumb-item + li::before {
	padding: 0 .6em;
	color: var(--sb-red);
	content: '/';
}

.breadcrumb-item a {
	color: var(--sb-ink-soft);
}

.breadcrumb-item a:hover {
	color: var(--sb-red);
	text-decoration: none;
}

/* Заголовок внутри текста товара или категории свою линейку не получает: описания
   приехали с боевого со своими заголовками, две красные черты подряд — это шум. */
#tab-description h1,
.sb-cat-text h1 {
	font-size: 24px;
}

#tab-description h1::after,
.sb-cat-text h1::after {
	display: none;
}

.img-thumbnail {
	padding: 5px;
	border: var(--sb-rule) solid var(--sb-line);
	background: #fff;
}

/* Утилита .border у бутстрапа — волосяная линия; в плакате линия толстая.
   !important здесь вынужденно: утилиты бутстрапа объявлены с ним же. */
.border {
	border: var(--sb-rule) solid var(--sb-line) !important;
}

/* Карточка учёта (плитка товара) --------------------------------------------- */

/* Товар в списках — не «карточка товара» в смысле интернет-магазина, а карточка
   учёта: чёрная шапка с инвентарным номером, наклеенная фотография, название,
   цена под линейкой и ряд действий. Магазин торгует предметами из чужих собраний,
   картотека — его естественная форма, и она же честно показывает, что вещь одна. */
.product-thumb {
	display: flex;
	position: relative;
	flex-direction: column;
	height: 100%;
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
	transition: translate .14s, box-shadow .14s;
}

/* Наведение — тот же печатный сдвиг, что у кнопок: карточка уходит влево-вверх,
   из-под неё выходит красный оттиск. */
.product-thumb:hover {
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-red);
	translate: calc(var(--sb-shift) * -1) calc(var(--sb-shift) * -1);
}

.sb-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 10px 5px;
	background: var(--sb-ink);
	color: var(--sb-paper);
	font-family: var(--sb-display);
	font-size: 11px;
	letter-spacing: .18em;
	line-height: 1.3;
	text-transform: uppercase;
}

.sb-card__no {
	font-variant-numeric: tabular-nums;
}

.sb-card__mark {
	color: var(--sb-red);
}

.product-thumb .image {
	position: relative;
	border-bottom: var(--sb-rule) solid var(--sb-line);
	background: #fff;
}

/* Скидка — кумачовая плашка с чёрным вторым оттиском. Прежний нарукавный шеврон
   с фигурной обрезкой убран: в конструктивизме метка — это прямоугольник краски,
   поставленный поверх кадра, а не значок. */
.sb-sale {
	display: flex;
	position: absolute;
	z-index: 2;
	top: 10px;
	left: 0;
	align-items: baseline;
	gap: 1px;
	padding: 7px 11px 6px;
	background: var(--sb-red);
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-ink);
	color: #fff;
	font-family: var(--sb-display);
	font-size: 19px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1;
}

/* Штамп «Sold out» на плитке товара (extension/soviet/catalog/controller/
   event/thumb.php) — тот же угловой знак, что и у скидки, только справа
   (слева уже могла бы стоять «-10%», товар может быть распродан и в акции
   одновременно — раздельные углы не спорят за место) и черна́, не кумачом:
   красный на плитке уже занят значением «скидка», второй смысл тем же
   цветом путал бы одно с другим. */
.sb-sale--out {
	left: auto;
	right: 0;
	background: var(--sb-ink);
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-red);
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* «In stock» — тот же угол, что у «Sold out» (товар не бывает в обоих
   состояниях разом, делить нечего), но тише: это норма, а не предупреждение,
   кричать кумачом или чернью незачем. Светлый оттиск вместо заливки —
   тот же приём, что у кнопки «Approved» на куки-баннере. Просьба
   пользователя 22.08.2026 — по всем спискам товаров, не только на плитке. */
.sb-sale--in {
	left: auto;
	right: 0;
	background: var(--sb-paper);
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-ink);
	color: var(--sb-ink);
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.product-thumb .image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

.product-thumb .content {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 12px;
}

.product-thumb .description {
	flex: 1;
	margin-bottom: 0;
	padding: 0;
}

.product-thumb h4 {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.35;
}

.product-thumb h4 a {
	color: var(--sb-ink);
}

.product-thumb h4 a:hover {
	color: var(--sb-red);
	text-decoration: none;
}

.product-thumb .description p {
	color: var(--sb-ink-soft);
	font-size: 14px;
}

.price,
.product-thumb .price {
	font-family: var(--sb-display);
	font-size: 26px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0;
}

/* Цена отбита от описания линейкой — как итоговая строка в накладной. */
.product-thumb .price {
	margin-top: 10px;
	padding-top: 9px;
	border-top: var(--sb-rule) solid var(--sb-line);
}

.price-new {
	color: var(--sb-ink);
}

.price-old {
	margin-left: 8px;
	color: var(--sb-muted);
	font-size: 17px;
	text-decoration: line-through;
}

/* Красная цена — единственный случай, когда цвет что-то значит: она означает скидку.
   Старая остаётся серой и перечёркнутой, иначе обе кричат одинаково.
   На странице товара цены лежат в разных строках списка, поэтому там отдельное
   правило: красим, если рядом на странице есть перечёркнутая цена. */
.price-new:has(+ .price-old),
#product-info .row:has(.price-old) .price-new {
	color: var(--sb-red);
}

.price-tax {
	display: block;
	color: var(--sb-muted);
	font-family: var(--sb-text);
	font-size: 12px;
}

/* Кнопки карточки: сплошные плашки в ряд, красная — рабочая.
   Стоковая тема кладёт этот ряд абсолютом по низу карточки, а место под него
   резервирует отступом у описания. Отсчёт ширины при этом идёт от рамки карточки,
   а начинается ряд от края текста — оттого он и вылезал за рамку справа на ширину
   внутреннего поля. Возвращаем ряд в поток: карточка и так flex-колонка. */
.product-thumb .button {
	display: flex;
	position: static;
	gap: 3px;
	width: auto;
	margin-top: 12px;
	margin-left: 0;
}

.product-thumb .button button {
	flex: 1;
	width: auto;
	padding: 11px 0;
	border: var(--sb-rule) solid var(--sb-line);
	background: transparent;
	color: var(--sb-ink);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .12s, color .12s, border-color .12s;
}

.product-thumb .button button:first-child {
	flex: 2;
	border-color: var(--sb-red);
	background: var(--sb-red);
	color: #fff;
}

.product-thumb .button button:hover {
	border-color: var(--sb-ink);
	background: var(--sb-ink);
	color: var(--sb-paper);
}

/* Описание в карточке — приглушённое, ссылки внутри него цветом не выделяем:
   вся карточка и так одна большая ссылка. */
.product-thumb .description p a {
	color: inherit;
	text-decoration: none;
}

/* Режим списка (кнопка рядом с «сеткой», выбор запоминается в localStorage):
   карточка ложится в строку — картинка слева, текст справа. Своя раскладка нужна
   потому, что карточку мы делаем флекс-колонкой, и без этого в списке картинка
   растягивалась во всю ширину страницы. */
@media (min-width: 768px) {
	.product-list .product-thumb {
		display: grid;
		grid-template-columns: 34% 1fr;
	}

	.product-list .sb-card__head {
		grid-column: 1 / -1;
	}

	.product-list .product-thumb .image {
		border-right: var(--sb-rule) solid var(--sb-line);
		border-bottom: 0;
	}

	.product-list .product-thumb .button {
		width: auto;
		max-width: 340px;
		margin-left: 0;
		border-left: 0;
	}
}

.rating {
	margin-top: 8px;
	color: var(--sb-red);
}

/* Страница товара ------------------------------------------------------------ */

/* Правая колонка — та же карточка учёта, только развёрнутая: чёрная шапка,
   заголовок, поля описи с линейками, цена отдельной плашкой, действия.
   Разметка ядра не тронута: колонку собираем из того, что там уже есть,
   поэтому правила опираются на порядок и на `:has()`, а не на свои классы. */
/* Раньше колонки не растягивались по высоте (align-items: flex-start) —
   решение было на случай, когда карточка короче галереи. На практике чаще
   наоборот: у товара без длинного списка вариантов галерея (особенно после
   переезда превью в вертикальную ленту слева, 22.08.2026) короче карточки,
   и правая колонка «плавала» отдельно от заметно более короткого фото
   (жалоба пользователя 22.08.2026: «должны быть в одну высоту, чтобы не
   плавало»). Растягиваем обе колонки по умолчанию (без align-items —
   `stretch` у flex-строки и так по умолчанию); что делать с лишней высотой
   внутри каждой колонки — забота самих колонок:
    - у карточки (следующее правило) при таком раскладе расти нечему —
      сама она обычно и остаётся более высокой стороной;
    - у галереи лишнюю высоту забирает `position: sticky` на самом блоке
      фото внутри колонки (ниже, «Фото товара прикалывается к потолку») —
      колонка растянута, а фото внутри неё держит свою естественную высоту
      и подскакивает к верху при прокрутке, а не разъезжается пустым полем. */

#product-info .row.mb-3 > .col-sm + .col-sm {
	display: flex;
	flex-direction: column;
	padding: 0 0 18px;
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
}

/* Поля внутри колонки отбиваем сами: у самой колонки их сняли, чтобы рамка
   шла по краю карточки, а не по краю жёлоба сетки. */
#product-info .row.mb-3 > .col-sm + .col-sm > * {
	margin-inline: 18px;
}

/* Шапка карточки. Текст здесь — оформление, а не содержание страницы,
   поэтому он в CSS: в разметке ядра ему места нет. */
#product-info .row.mb-3 > .col-sm + .col-sm::before {
	margin: 0 0 18px;
	padding: 9px 18px 8px;
	background: linear-gradient(100deg, var(--sb-ink) 82%, var(--sb-red) 82%);
	color: var(--sb-paper);
	content: 'Inventory card';
	font-family: var(--sb-display);
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
}

#product-info h1 {
	margin-bottom: 16px;
	font-size: clamp(22px, 2.2vw, 30px);
}

#product-info h1::after {
	width: 80px;
	height: var(--sb-rule);
	margin-top: 12px;
}

/* Опись: марка, модель, артикул, наличие — строками с волосяной линейкой,
   как графы учётной карточки. */
#product-info .list-unstyled:not(:has(.price-new)) {
	margin-bottom: 16px;
	border-top: var(--sb-rule) solid var(--sb-line);
	color: var(--sb-ink);
	font-family: var(--sb-display);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .08em;
	text-transform: uppercase;
}

#product-info .list-unstyled:not(:has(.price-new)) li {
	padding: 7px 0 6px;
	border-bottom: 1px solid var(--sb-line-soft);
}

#product-info .list-unstyled:not(:has(.price-new)) li a {
	color: var(--sb-red);
}

/* Цена — оттиск на плашке: серая бумага, тяжёлая линейка сверху, крупные цифры. */
#product-info .list-unstyled:has(.price-new) {
	margin-bottom: 16px;
	padding: 14px 18px 12px;
	background: var(--sb-ink);
	color: var(--sb-paper);
}

#product-info .list-unstyled:has(.price-new) .price-new {
	color: #fff;
}

/* Со скидкой цена идёт кумачом — на чёрном это единственное красное пятно
   в карточке, и оно означает ровно одно. */
#product-info .row:has(.price-old) .price-new {
	color: var(--sb-red);
}

#product-info h2 .price-new {
	font-size: clamp(34px, 4vw, 46px);
}

#product-info .list-unstyled:has(.price-new) h2 {
	margin: 0;
}

#product-info .list-unstyled .price-old {
	margin: 0;
	font-size: 19px;
}

/* Количество и «в корзину» — одна плашка: подпись, поле, красная кнопка. */
#product-info #input-quantity {
	max-width: 92px;
}

#button-cart {
	--bs-btn-font-size: 15px;

	padding-inline: 1.8rem;
}

.rating .fa-stack {
	width: 1.1em;
	height: 1.1em;
	line-height: 1.1em;
}

/* Список, пагинация, таблицы, сообщения -------------------------------------- */

.pagination {
	--bs-pagination-border-radius: 0;
	--bs-pagination-border-color: var(--sb-line);
	--bs-pagination-border-width: var(--sb-rule);
	--bs-pagination-color: var(--sb-ink);
	--bs-pagination-bg: transparent;
	--bs-pagination-hover-bg: var(--sb-ink);
	--bs-pagination-hover-color: var(--sb-paper);
	--bs-pagination-hover-border-color: var(--sb-line);
	--bs-pagination-active-bg: var(--sb-red);
	--bs-pagination-active-border-color: var(--sb-red);
	--bs-pagination-focus-box-shadow: none;

	font-family: var(--sb-display);
	gap: 3px;
}

.table {
	--bs-table-bg: transparent;

	border-color: var(--sb-line-soft);
}

.table > thead {
	background: var(--sb-ink);
	color: var(--sb-paper);
	font-family: var(--sb-display);
	font-size: 14px;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.table > thead th {
	border-color: var(--sb-ink);
}

.alert {
	border: var(--sb-rule) solid var(--sb-line);
	border-left-width: 10px;
	border-radius: 0;
	background: var(--sb-card);
	color: var(--sb-ink);
}

.alert-success {
	border-left-color: var(--sb-ink);
}

.alert-danger,
.alert-warning {
	border-left-color: var(--sb-red);
}

.card,
.img-thumbnail,
.list-group-item,
.nav-tabs,
.nav-tabs .nav-link,
.form-control,
.modal-content {
	border-radius: 0;
}

.card {
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
}

.card-header {
	background: var(--sb-ink);
	color: var(--sb-paper);
	font-family: var(--sb-display);
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Вкладки описания — корешки картотеки: выбранный чёрный, остальные на бумаге. */
.nav-tabs {
	gap: 3px;
	border-bottom: var(--sb-rule) solid var(--sb-line);
	font-family: var(--sb-display);
	letter-spacing: .1em;
	text-transform: uppercase;
}

.nav-tabs .nav-link {
	border: var(--sb-rule) solid var(--sb-line);
	border-bottom: 0;
	background: transparent;
	color: var(--sb-ink);
}

.nav-tabs .nav-link:hover {
	background: var(--sb-paper-2);
}

.nav-tabs .nav-link.active {
	border-color: var(--sb-line);
	background: var(--sb-ink);
	color: var(--sb-paper);
}

.badge {
	border-radius: 0;
	font-family: var(--sb-display);
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Левая колонка (модули категорий и прочее) ---------------------------------- */

#column-left .list-group-item,
#column-right .list-group-item {
	border: 0;
	border-bottom: 1px solid var(--sb-line-soft);
	background: transparent;
	color: var(--sb-ink);
	font-size: 15px;
}

#column-left .list-group-item.active,
#column-right .list-group-item.active {
	background: var(--sb-ink);
	color: var(--sb-paper);
}

/* Подвал -------------------------------------------------------------------- */

/* Стоковая тема прижимает подвал к низу окна старым приёмом: #container
   позиционируется абсолютно, подвал тоже, а место под него резервируется
   отступом `#content { padding-bottom: 730px }` (400px на экранах шире 576px).
   Отсюда две беды: на телефоне под товарами зияет пустота в пол-экрана,
   а на страницах без `#content` — на главной — подвал наезжает на содержимое
   и срезает ленту брендов. Возвращаем обычный поток: подвал и так всегда внизу,
   а страниц короче экрана у магазина нет. */
#container {
	position: static;
	min-height: 0;
	margin-bottom: 0;
}

#content,
#column-left,
#column-right {
	padding-bottom: 0;
}

footer {
	position: static;
	border: 0;
	margin-top: 60px;
	padding: 44px 0 26px;
	border-top: var(--sb-rule-heavy) solid var(--sb-red);
	/* Те же знаки, что на бумаге, но светлые. Держим их у самого порога видимости
	   (6%): подвал — не витрина, знаки тут работают тиснением на чёрной плашке,
	   и стоит им проявиться ярче, они начинают спорить со ссылками. Плитка мелкая
	   (300 px): подвал низкий, и на его высоту крупный шаг успевает показать
	   один-два знака — мелкий и частый читается фактурой, а не пятнами. */
	background-color: var(--sb-ink);
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g opacity='.06'><g transform='translate(20 16) scale(1.1)'><path fill='%23f2ece0' d='M50 6l11.6 29.4 31.5 1.6-24.4 20 8.1 30.5L50 69.2 23.2 87.5l8.1-30.5-24.4-20 31.5-1.6z'/></g><g transform='translate(232 84) scale(1.35) rotate(12 50 50)'><g fill='none' stroke='%23f2ece0' stroke-width='7'><circle cx='50' cy='50' r='27'/><circle cx='50' cy='50' r='10'/></g><g fill='%23f2ece0'><rect x='45' y='7' width='10' height='15'/><rect x='45' y='7' width='10' height='15' transform='rotate(45 50 50)'/><rect x='45' y='7' width='10' height='15' transform='rotate(90 50 50)'/><rect x='45' y='7' width='10' height='15' transform='rotate(135 50 50)'/><rect x='45' y='7' width='10' height='15' transform='rotate(180 50 50)'/><rect x='45' y='7' width='10' height='15' transform='rotate(225 50 50)'/><rect x='45' y='7' width='10' height='15' transform='rotate(270 50 50)'/><rect x='45' y='7' width='10' height='15' transform='rotate(315 50 50)'/></g></g><g transform='translate(58 224) scale(1.25) rotate(-8 50 50)'><circle cx='38' cy='38' r='16' fill='%23f2ece0'/><g stroke='%23f2ece0' stroke-width='5' stroke-linecap='square'><path d='M50 50L92 92M52 44L94 60M44 52L60 94M54 30L96 22'/></g></g><g transform='translate(268 288) scale(.72) rotate(18 50 50)'><path fill='%23f2ece0' d='M50 6l11.6 29.4 31.5 1.6-24.4 20 8.1 30.5L50 69.2 23.2 87.5l8.1-30.5-24.4-20 31.5-1.6z'/></g></g></svg>");
	background-size: 300px 300px;
	color: var(--sb-paper-2);
}

footer h5 {
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: var(--sb-rule) solid var(--sb-red);
	color: #fff;
	font-size: 14px;
	letter-spacing: .16em;
}

footer a {
	color: var(--sb-paper-2);
	font-size: 15px;
}

footer a:hover {
	color: #fff;
	text-decoration: none;
}

/* Пункты подвала — со звёздочкой вместо маркера. */
footer .list-unstyled li {
	position: relative;
	padding-left: 18px;
}

footer .list-unstyled li::before {
	position: absolute;
	top: .62em;
	left: 0;
	width: 9px;
	height: 9px;
	background: var(--sb-red);
	content: '';
	-webkit-mask: var(--sb-i-star) center / contain no-repeat;
	mask: var(--sb-i-star) center / contain no-repeat;
}

footer hr {
	margin: 30px 0 16px;
	border-top: 1px solid rgb(255 255 255 / 18%);
}

footer p {
	color: color-mix(in srgb, var(--sb-paper) 55%, var(--sb-ink));
	font-size: 13px;
}


/* Иконки -------------------------------------------------------------------- */

/* Стоковая тема расставляет по шаблонам глифы Font Awesome. Шаблоны не трогаем,
   а глиф подменяем своим рисунком: чертёжная геометрия, прямые концы линий,
   пятиконечная звезда вместо кругляша рейтинга. Иконки, до которых руки не дошли
   (страницы оформления и кабинета), остаются фонтавесомовскими — своя тема
   заберёт этот список целиком и тогда шрифт иконок можно будет выкинуть совсем. */

:root {
	--sb-i-star: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.6l2.9 7.3 7.8.4-6 5 2 7.6-6.7-4.3-6.7 4.3 2-7.6-6-5 7.8-.4z'/></svg>");
	--sb-i-star-o: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='miter' d='M12 2.6l2.6 6.6 7 .4-5.4 4.5 1.8 6.8-6-3.9-6 3.9 1.8-6.8-5.4-4.5 7-.4z'/></svg>");
	--sb-i-cart: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'><path d='M1.5 3h3l3 11h11'/><path d='M6 6.5h16l-2 6H7.2'/><circle cx='9' cy='19.5' r='1.6' fill='black' stroke='none'/><circle cx='17.5' cy='19.5' r='1.6' fill='black' stroke='none'/></g></svg>");
	--sb-i-search: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2.2' stroke-linecap='square'><circle cx='10' cy='10' r='6.5'/><path d='M15 15l6.5 6.5'/></g></svg>");
	--sb-i-user: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'><circle cx='12' cy='7.5' r='4'/><path d='M3.5 21v-2.5c0-3 3.8-5 8.5-5s8.5 2 8.5 5V21'/></g></svg>");
	--sb-i-heart: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21.2l-1.7-1.6C4.4 14.2 1 11.1 1 7.3 1 4.2 3.4 1.8 6.5 1.8c1.8 0 3.5.8 4.5 2.1 1-1.3 2.7-2.1 4.5-2.1 3.1 0 5.5 2.4 5.5 5.5 0 3.8-3.4 6.9-9.3 12.3z'/></svg>");
	--sb-i-caret: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 8h16l-8 9z'/></svg>");
	--sb-i-bars: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 4h20v2.6H2zm0 6.7h20v2.6H2zm0 6.7h20V20H2z'/></svg>");
	--sb-i-phone: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2' stroke-linejoin='miter' d='M6 2.5h3l1.7 4.5-2.2 1.6c1 2.4 3.5 4.9 5.9 5.9l1.6-2.2 4.5 1.7v3c0 1.4-1.1 2.5-2.5 2.5C10.2 19.5 4.5 13.8 4 5.1 3.9 3.7 4.9 2.5 6 2.5z'/></svg>");
	/* Дисковый телефон — только для заголовка карточки мессенджеров (Contact Us),
	   не трогает обычную трубку --sb-i-phone (та стоит в шапке рядом с номером
	   сайта и в других местах, там нужен обычный узнаваемый значок телефона). */
	--sb-i-rotary-phone: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='miter' stroke-linecap='square'><path d='M3.5 21h17l-1.6-5.5h-13.8z'/><circle cx='12' cy='12.6' r='5.4'/><circle cx='12' cy='12.6' r='1.3'/></g><g fill='black'><circle cx='12' cy='8' r='.7'/><circle cx='15.6' cy='10.2' r='.7'/><circle cx='15.6' cy='15' r='.7'/><circle cx='12' cy='17.2' r='.7'/><circle cx='8.4' cy='15' r='.7'/><circle cx='8.4' cy='10.2' r='.7'/><circle cx='4' cy='2.6' r='2.1'/><circle cx='20' cy='2.6' r='2.1'/><path d='M5.6 2.1h12.8v1h-12.8z'/></g></svg>");
	--sb-i-share: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 3.5l8.5 8.5L13 20.5V15H2.5V9H13z'/></svg>");
	--sb-i-compare: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M15.5 2.5l6 5-6 5V9H8V6h7.5zM8.5 12.5V16H16v3H8.5v3.5l-6-5z'/></svg>");
	--sb-i-grid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.5 2.5h8v8h-8zm11 0h8v8h-8zm-11 11h8v8h-8zm11 0h8v8h-8z'/></svg>");
	--sb-i-list: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2.5 3.5h5v5h-5zm7.5 1h12v3H10zM2.5 9.5h5v5h-5zm7.5 1h12v3H10zM2.5 15.5h5v5h-5zm7.5 1h12v3H10z'/></svg>");
	--sb-i-check: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='square'><circle cx='12' cy='12' r='9.5'/><path d='M7.5 12.3l3 3 6-6.3'/></g></svg>");
	--sb-i-alert: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='square'><circle cx='12' cy='12' r='9.5'/><path d='M12 6.6v7'/></g><circle cx='12' cy='17.4' r='1.4'/></svg>");
	--sb-i-info: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='square'><circle cx='12' cy='12' r='9.5'/><path d='M12 11v6.4'/></g><circle cx='12' cy='7.2' r='1.4'/></svg>");
	--sb-i-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='square'><circle cx='12' cy='12' r='9.5'/><path d='M8.3 8.3l7.4 7.4M15.7 8.3l-7.4 7.4'/></g></svg>");
	--sb-i-warn: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linejoin='miter' stroke-linecap='square'><path d='M12 2.6L22.5 21H1.5z'/><path d='M12 9.4v5.2'/></g><circle cx='12' cy='17.8' r='1.3'/></svg>");
	--sb-i-eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linejoin='miter'><path d='M1.5 12S5.5 5.5 12 5.5 22.5 12 22.5 12 18.5 18.5 12 18.5 1.5 12 1.5 12z'/><circle cx='12' cy='12' r='3'/></g></svg>");
	--sb-i-pin: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='black' stroke-width='2' stroke-linejoin='miter' d='M12 2.5c4 0 7 3 7 6.8 0 4.8-7 12.2-7 12.2S5 14.1 5 9.3C5 5.5 8 2.5 12 2.5z'/><circle cx='12' cy='9.2' r='2.4'/></svg>");
}

.fa-solid,
.fa-regular {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -.14em;
}

/* Общая механика подмены: глиф гасим, вместо него — маска по цвету текста. */
.fa-solid.fa-star::before,
.fa-regular.fa-star::before,
.fa-solid.fa-cart-shopping::before,
.fa-solid.fa-shopping-cart::before,
.fa-solid.fa-magnifying-glass::before,
.fa-solid.fa-user::before,
.fa-solid.fa-heart::before,
.fa-solid.fa-caret-down::before,
.fa-solid.fa-bars::before,
.fa-solid.fa-phone::before,
.fa-solid.fa-share::before,
.fa-solid.fa-arrow-right-arrow-left::before,
.fa-solid.fa-table-cells::before,
.fa-solid.fa-table-list::before,
.fa-solid.fa-circle-check::before,
.fa-solid.fa-check-circle::before,
.fa-solid.fa-circle-exclamation::before,
.fa-solid.fa-circle-info::before,
.fa-solid.fa-circle-xmark::before,
.fa-solid.fa-triangle-exclamation::before,
.fa-solid.fa-eye::before,
.fa-solid.fa-location-dot::before {
	display: block;
	width: 100%;
	height: 100%;
	background: currentColor;
	content: '';
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.fa-solid.fa-star::before { -webkit-mask-image: var(--sb-i-star); mask-image: var(--sb-i-star); }
.fa-regular.fa-star::before { -webkit-mask-image: var(--sb-i-star-o); mask-image: var(--sb-i-star-o); }
.fa-solid.fa-cart-shopping::before,
.fa-solid.fa-shopping-cart::before { -webkit-mask-image: var(--sb-i-cart); mask-image: var(--sb-i-cart); }
.fa-solid.fa-magnifying-glass::before { -webkit-mask-image: var(--sb-i-search); mask-image: var(--sb-i-search); }
.fa-solid.fa-user::before { -webkit-mask-image: var(--sb-i-user); mask-image: var(--sb-i-user); }
.fa-solid.fa-heart::before { -webkit-mask-image: var(--sb-i-heart); mask-image: var(--sb-i-heart); }
.fa-solid.fa-caret-down::before { -webkit-mask-image: var(--sb-i-caret); mask-image: var(--sb-i-caret); }
.fa-solid.fa-bars::before { -webkit-mask-image: var(--sb-i-bars); mask-image: var(--sb-i-bars); }
.fa-solid.fa-phone::before { -webkit-mask-image: var(--sb-i-phone); mask-image: var(--sb-i-phone); }
.fa-solid.fa-share::before { -webkit-mask-image: var(--sb-i-share); mask-image: var(--sb-i-share); }
.fa-solid.fa-arrow-right-arrow-left::before { -webkit-mask-image: var(--sb-i-compare); mask-image: var(--sb-i-compare); }
.fa-solid.fa-table-cells::before { -webkit-mask-image: var(--sb-i-grid); mask-image: var(--sb-i-grid); }
.fa-solid.fa-table-list::before { -webkit-mask-image: var(--sb-i-list); mask-image: var(--sb-i-list); }
.fa-solid.fa-circle-check::before,
.fa-solid.fa-check-circle::before { -webkit-mask-image: var(--sb-i-check); mask-image: var(--sb-i-check); }
.fa-solid.fa-circle-exclamation::before { -webkit-mask-image: var(--sb-i-alert); mask-image: var(--sb-i-alert); }
.fa-solid.fa-circle-info::before { -webkit-mask-image: var(--sb-i-info); mask-image: var(--sb-i-info); }
.fa-solid.fa-circle-xmark::before { -webkit-mask-image: var(--sb-i-close); mask-image: var(--sb-i-close); }
.fa-solid.fa-triangle-exclamation::before { -webkit-mask-image: var(--sb-i-warn); mask-image: var(--sb-i-warn); }
.fa-solid.fa-eye::before { -webkit-mask-image: var(--sb-i-eye); mask-image: var(--sb-i-eye); }
.fa-solid.fa-location-dot::before { -webkit-mask-image: var(--sb-i-pin); mask-image: var(--sb-i-pin); }

/* Рейтинг: пустая звезда бледная, полная — красная, лежат друг на друге. */
.fa-stack {
	position: relative;
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
}

.fa-stack .fa-stack-1x {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.fa-stack .fa-regular.fa-star {
	color: var(--sb-muted);
}

.fa-stack .fa-solid.fa-star {
	color: var(--sb-red);
}

/* Виджет оценки в формах «Написать отзыв» (о товаре и о магазине) — вместо
   голых радио-кружков «Bad ... Good» кликабельные звёзды. Общий компонент:
   и товарный, и магазинный отзыв просят одну и ту же оценку. Разметка идёт
   в обратном порядке (5,4,3,2,1) и переворачивается row-reverse — общий
   приём CSS-only рейтинга: `:checked ~ label`/`:hover ~ label` красят себя
   и всех, кто идёт ПОСЛЕ в DOM, а после в DOM у звезды N — как раз более
   дешёвые N-1..1, визуально стоящие левее. Сами радио не прячем через
   display:none (тогда клавиатура и часть браузеров теряют фокус/клик по
   label) — просто уводим за экран. */
.sb-rating-input-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.sb-rating-input-row__end {
	color: var(--sb-muted);
	font-size: 12.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sb-rating-input {
	display: flex;
	flex-direction: row-reverse;
	gap: 3px;
}

.sb-rating-input input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
}

.sb-rating-input label {
	color: var(--sb-line-soft);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: color .1s;
}

.sb-rating-input label:hover,
.sb-rating-input label:hover ~ label,
.sb-rating-input input:checked ~ label {
	color: var(--sb-red);
}

.sb-rating-input input:focus-visible ~ label {
	outline: 2px solid var(--sb-red);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.sb-rating-input label {
		transition: none;
	}
}

/* Отслеживание заказа: success-страница после чекаута, публичная страница
 * трекинга для гостя (extension/ukrposhta) и блок трек-номера в «Мои заказы».
 * Один и тот же язык формы — плашка сверху (.sb-band), карточка снизу, как
 * у «Карточки учёта» товара: заказ тоже единица учёта, только не вещь, а сделка. */
.sb-tracking {
	margin: 0 0 28px;
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
}

.sb-tracking__title {
	flex: 1 1 auto;
	margin: 0;
	color: var(--sb-paper);
	font-size: 20px;
}

.sb-tracking__body {
	padding: 18px 20px;
}

.sb-tracking__status {
	margin: 0 0 6px;
	font-family: var(--sb-display);
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sb-tracking__status strong {
	color: var(--sb-red);
}

.sb-tracking__lead {
	margin: 0 0 16px;
	color: var(--sb-ink-soft);
}

.sb-tracking__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.sb-tracking__shipment {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	align-items: center;
	justify-content: space-between;
	margin-top: 16px;
	padding-top: 16px;
	border-top: var(--sb-rule) solid var(--sb-line-soft);
}

.sb-tracking__shipment strong {
	font-variant-numeric: tabular-nums;
}

/* На success-странице ссылка на отслеживание держится текстом рядом с кнопкой —
 * для гостя это единственный шанс её сохранить (бумаги нет, только письмо). */
.sb-tracking__note {
	margin: 12px 0 0;
	color: var(--sb-muted);
	font-size: 13px;
}

/* Полное дерево событий трекинга (extension/ukrposhta/.../event/tracking.php,
 * order() — живой ответ Укрпошты, поле eventName уже приходит по-английски,
 * запрос `lang=EN`, переводить самим не нужно) — свёрнуто по умолчанию за
 * <details>/<summary>, раскрывается по клику (пожелание пользователя
 * 21.08.2026: «дерево должно раскрываться по клику»). Тот же CSS-only приём
 * и тот же маркер-стрелка, что у Shipping/Returns/Before You Buy на странице
 * товара (product.css, .sb-pinfo-item) — держим один язык формы, только тут
 * подписан цветом --sb-red (у товарных панелей — обычный муted), чтобы не
 * теряться рядом с самой заметной кнопкой «Track Parcel» сверху. */
.sb-tracking__details {
	margin-top: 14px;
}

/* Была мелкой текстовой ссылкой — терялась под штампом-рапортом и кнопкой
 * «Track Parcel» (жалоба пользователя 21.08.2026: «нужно выделить лучше,
 * чтобы была заметнее»). Теперь настоящая кнопка-абрис на всю ширину
 * карточки, заливка цветом при наведении — тот же приём инверсии, что у
 * `.sb-stamp`/`a.sb-stamp:hover` (см. выше), не изобретаю второй язык формы. */
.sb-tracking__summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 16px;
	cursor: pointer;
	list-style: none;
	border: var(--sb-rule) solid var(--sb-red);
	font-family: var(--sb-display);
	font-size: 13px;
	letter-spacing: .1em;
	text-align: center;
	text-transform: uppercase;
	color: var(--sb-red);
	touch-action: manipulation;
	transition: background-color .15s, color .15s;
}

.sb-tracking__summary::marker,
.sb-tracking__summary::-webkit-details-marker {
	display: none;
	content: '';
}

.sb-tracking__summary:hover,
.sb-tracking__summary:focus-visible {
	background: var(--sb-red);
	color: #fff;
}

.sb-tracking__summary-arrow {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	background: currentColor;
	transition: rotate .15s;
	-webkit-mask: var(--sb-i-caret) center / contain no-repeat;
	mask: var(--sb-i-caret) center / contain no-repeat;
}

.sb-tracking__details[open] .sb-tracking__summary-arrow {
	rotate: 180deg;
}

/* Свежее событие первым — тот же порядок, что и на самом сайте Укрпошты.
 * Тонкая левая линия — не полноценная точечная timeline-графика (лишний вес
 * ради декора), просто явный признак «это последовательность», без
 * отдельного маркера на каждой строке. */
.sb-tracking__timeline {
	list-style: none;
	margin: 14px 0 0;
	padding: 0 0 0 16px;
	border-left: 2px solid var(--sb-line);
	display: grid;
	gap: 14px;
}

.sb-tracking__event {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
}

/* Самый свежий статус — отдельной строкой ВНЕ <details>, видна всегда, без
 * клика (пожелание пользователя 21.08.2026: «должен показываться только
 * один самый свежий статус» при свёрнутом виде). Тот же .sb-tracking__event,
 * просто не в списке — верстается сама по себе над раскрывающейся историей. */
.sb-tracking__event--latest {
	margin-top: 14px;
	padding-top: 14px;
	border-top: var(--sb-rule) solid var(--sb-line-soft);
}

.sb-tracking__event--latest .sb-tracking__event-name {
	color: var(--sb-red);
}

.sb-tracking__event-name {
	font-family: var(--sb-display);
	font-size: 13px;
	letter-spacing: .01em;
}

.sb-tracking__event-place {
	flex: 1 1 100%;
	color: var(--sb-muted);
	font-size: 12.5px;
}

.sb-tracking__event-date {
	color: var(--sb-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sb-tracking__checked {
	margin: 14px 0 0;
	color: var(--sb-muted);
	font-size: 11.5px;
	font-variant-numeric: tabular-nums;
}

/* Финальный рапорт — заменяет собой обычную строку .sb-tracking__event
 * ТОЛЬКО когда последнее событие трекинга — подтверждённая доставка
 * (`model_extension_ukrposhta_account_order->isDeliveredEvent()`).
 * Пожелание пользователя 21.08.2026: «когда посылка доставлена, нужно
 * выводить что-то такое... как финальный советский рапорт: задание
 * выполнено, груз прибыл, операция завершена» — с переходом на отзыв внизу
 * («теперь дело за товарищем»), той же карточкой, что письмо о статусе
 * Delivered (mail/order.php, statusCopy()), но своя, под сам вебстраницу
 * трекинга, не инлайновые стили письма. */
.sb-tracking__report {
	margin: 16px 0 0;
	padding: 24px 20px;
	border: var(--sb-rule-heavy) solid var(--sb-ink);
	background: var(--sb-paper-2);
	text-align: center;
}

.sb-tracking__report-kicker {
	margin: 0 0 8px;
	color: var(--sb-red);
	font-family: var(--sb-display);
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
}

.sb-tracking__report-slogan {
	margin: 0 0 4px;
	color: var(--sb-ink);
	font-family: var(--sb-display);
	font-size: clamp(20px, 3vw, 26px);
	letter-spacing: .01em;
	line-height: 1.2;
	text-transform: uppercase;
	text-wrap: balance;
}

.sb-tracking__report-lead {
	margin: 0 0 18px;
	color: var(--sb-muted);
	font-size: 13.5px;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.sb-tracking__report-stamp {
	display: inline-block;
	margin: 0 0 16px;
	padding: 14px 26px;
	border: 2px solid var(--sb-red);
	color: var(--sb-red);
	font-family: var(--sb-display);
	font-size: 13px;
	letter-spacing: .07em;
	line-height: 1.95;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.sb-tracking__report-meta {
	margin: 0 0 20px;
	color: var(--sb-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.sb-tracking__report-followup {
	margin: 0 0 14px;
	padding-top: 18px;
	border-top: var(--sb-rule) solid var(--sb-line-soft);
	color: var(--sb-ink);
	font-family: var(--sb-display);
	font-size: 14px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sb-tracking__report-reviews {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* Пустая корзина (checkout/cart) — карточка-плашка вместо голого «Your shopping
 * cart is empty!», собирает extension/soviet/catalog/controller/event/checkout.php
 * (emptyCart). Тот же знак, что у доски отделов и стены поступлений — плашка
 * .sb-band, лозунг-кикер, заголовок со звёздочкой, оттиск справа на клине. */
.sb-cart-empty {
	margin: 0 0 24px;
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-red);
}

.sb-cart-empty__head {
	display: flex;
}

.sb-cart-empty__kicker {
	margin: 0;
	color: var(--sb-red);
	font-family: var(--sb-display);
	font-size: 12px;
	letter-spacing: .22em;
	line-height: 1;
	text-transform: uppercase;
}

.sb-cart-empty__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 6px 0 0;
	color: #fff;
	font-size: clamp(20px, 3.2vw, 26px);
}

.sb-cart-empty__title::before {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: var(--sb-red);
	content: '';
	mask: var(--sb-i-star) center / contain no-repeat;
	-webkit-mask: var(--sb-i-star) center / contain no-repeat;
}

.sb-cart-empty__lead {
	margin: 0;
	padding: 18px 20px;
	color: var(--sb-ink-soft);
	font-size: 15px;
}

/* Пустая мини-корзина (выпадающее окно из шапки, common/cart.twig) — компактный
 * вариант плашки выше: та же интонация, без клина и звёздочки — места мало. */
.sb-mini-empty {
	padding: 16px 14px;
	border-left: var(--sb-rule-heavy) solid var(--sb-red);
	background: var(--sb-ink);
	color: var(--sb-paper);
	text-align: left;
}

.sb-mini-empty__kicker {
	margin: 0 0 4px;
	color: var(--sb-red);
	font-family: var(--sb-display);
	font-size: 11px;
	letter-spacing: .18em;
	line-height: 1;
	text-transform: uppercase;
}

.sb-mini-empty__title {
	margin: 0;
	font-family: var(--sb-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Полоска до бесплатной доставки — корзина и сводка заказа на чекауте,
 * extension/soviet/catalog/controller/event/free_shipping.php. Пока план
 * не выполнен — кумачовая заливка растёт с суммой заказа; выполнен —
 * заливка на всю ширину, латунная (--sb-brass), как отметка о премии. */
.sb-free-ship {
	margin: 0 0 20px;
	padding: 14px 18px;
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
}

.sb-free-ship__kicker {
	margin: 0 0 10px;
	color: var(--sb-red);
	font-family: var(--sb-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.sb-free-ship__bar {
	height: 10px;
	margin-bottom: 8px;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-paper-2);
}

.sb-free-ship__fill {
	height: 100%;
	background: var(--sb-red);
	transition: width .4s ease;
}

.sb-free-ship__lead {
	margin: 0;
	color: var(--sb-ink-soft);
	font-family: var(--sb-display);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}

.sb-free-ship--done {
	border-color: var(--sb-brass);
}

.sb-free-ship--done .sb-free-ship__kicker {
	color: var(--sb-brass);
}

.sb-free-ship--done .sb-free-ship__fill {
	background: var(--sb-brass);
}

/* Выпадающая мини-корзина в шапке (common/cart.twig) — тёмная карточка вместо
 * голого бутстраповского dropdown-menu, кнопки видны, полоска до бесплатной
 * доставки компактным вариантом (extension/soviet/catalog/controller/event/
 * free_shipping.php::miniCart(), checkout.php::miniCartActions()). */
#cart .dropdown-menu {
	/* 360px оказался тесноват для родной таблицы ядра: картинка + название +
	 * qty + цена + кнопка удаления в пять колонок не помещались, три последние
	 * рендерились за пределами видимой области (сама таблица не резиновая).
	 * 420px хватает без переделки колонок; overflow-x на самой таблице —
	 * подстраховка на случай длинного названия товара или узкого экрана. */
	width: min(420px, 92vw);
	padding: 14px;
	border: var(--sb-rule) solid var(--sb-ink);
	border-radius: 0;
	background: var(--sb-card);
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-red);
}

/* Настоящая причина, по которой кнопка удаления вылезала за рамку окна —
 * и на телефоне, и на десктопе. Перепробовано по дороге: гасить бутстраповский
 * .w-25 через width:auto !important с более специфичным селектором — не сработало,
 * хотя правило и побеждало в каскаде (проверено по CSSOM): table-layout:auto
 * не обязан слушаться width на отдельной ячейке буквально, это лишь один из
 * входов в собственный алгоритм браузера, который всё равно может отрисовать
 * колонку шире контента. Единственный надёжный способ — забрать раскладку
 * колонок под свой контроль целиком: table-layout:fixed и явная ширина
 * каждой колонки по первой строке (так это работает в фикс-раскладке).
 * Тогда таблица физически не может стать шире родителя, что бы ни лежало внутри —
 * длинное название просто обрежется по -webkit-line-clamp, а не растянет строку. */
#cart .dropdown-menu table {
	table-layout: fixed;
	width: 100%;
}

/* Ширина клетки должна учитывать её собственный padding, а не только картинку —
 * тут сама и споткнулась: 44px клетки минус штатный паддинг бутстрапа (0.5rem =
 * 8px слева, я обнулила только справа) оставляли под контент всего 36px,
 * а картинка была 40px — вылезала на 4px вправо и залезала под название. */
#cart .dropdown-menu table td.w-25 {
	width: 48px !important;
	padding: 8px 4px;
}

/* Настоящая причина, по которой width:36px тут не срабатывал вообще: у ядра
 * (catalog/view/stylesheet/stylesheet.css) есть своё правило именно на эту
 * мини-корзину — `#cart .img-thumbnail { min-width: 100px }`, рассчитанное
 * на голый бутстраповский дропдаун. min-width — не width, обычный каскад
 * его не берёт, он всегда побеждает как нижняя граница, даже когда width
 * в другом правиле выигрывает по специфичности. Гасить нужно тем же
 * свойством, не любым. */
#cart .dropdown-menu table img {
	width: 36px;
	height: 36px;
	min-width: 36px;
}

#cart .dropdown-menu table td:nth-child(3) {
	width: 30px;
	padding-left: 4px;
}

#cart .dropdown-menu table td:nth-child(4) {
	width: 56px;
	padding-left: 4px;
}

#cart .dropdown-menu table td:nth-child(5) {
	width: 42px;
	padding: 8px 4px;
}

/* Клетка была впору, а сама кнопка внутри — нет: бутстраповский .btn-danger
 * тянет свой родной паддинг (0.375rem 0.75rem) поверх иконки и получается
 * шире отведённых 42px — таблица её не обрежет (table-layout:fixed не резиновая,
 * но и не overflow:hidden), кнопка просто вылезала за карточку. Квадратная
 * кнопка своего размера без родного паддинга решает и то, и другое разом. */
#cart .dropdown-menu table .btn-danger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
}

#cart .dropdown-menu table td:nth-child(2) a {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

@media (max-width: 400px) {
	/* Тот же расчёт, что и в базовом правиле выше, — под более узкую клетку:
	 * 36px клетки минус 3px+3px паддинга оставляют 30px под картинку. */
	#cart .dropdown-menu table td.w-25 {
		width: 36px !important;
		padding: 6px 3px;
	}

	#cart .dropdown-menu table img {
		width: 30px;
		height: 30px;
		min-width: 30px;
	}
}

#cart .dropdown-menu .table {
	--bs-table-striped-bg: var(--sb-paper-2);
	font-size: 13px;
}

#cart .dropdown-menu .table-bordered {
	border-color: var(--sb-line-soft);
}

#cart .dropdown-menu .table-bordered strong {
	font-family: var(--sb-display);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Строка «Total» — последняя в таблице итогов — крупнее и кумачом, остальные
 * («Sub-Total» и т.п.) обычным текстом. */
#cart .dropdown-menu .table-bordered tr:last-child {
	font-family: var(--sb-display);
	font-size: 15px;
}

#cart .dropdown-menu .table-bordered tr:last-child td {
	color: var(--sb-red);
}

/* «View Cart» / «Checkout» — были голыми ссылками, теперь настоящие кнопки:
 * контурная и залитая, в одну строку, поровну делят ширину. */
.sb-mini-cart__actions {
	display: flex;
	gap: 8px;
}

.sb-mini-cart__actions a {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px;
	padding: 0 10px;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-paper);
	color: var(--sb-ink);
	font-family: var(--sb-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Вторая ссылка (Checkout) — залитая, зовёт дальше по воронке. */
.sb-mini-cart__actions a:last-child {
	border-color: var(--sb-red);
	background: var(--sb-red);
	color: #fff;
}

.sb-mini-cart__actions a:hover,
.sb-mini-cart__actions a:focus-visible {
	color: inherit;
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-ink);
	translate: calc(var(--sb-shift) * -1) calc(var(--sb-shift) * -1);
}

.sb-mini-cart__actions a:last-child:hover,
.sb-mini-cart__actions a:last-child:focus-visible {
	color: #fff;
}

/* Полоска до бесплатной доставки, компактный вариант — меньше отступов и кегль,
 * та же логика (extension/soviet/catalog/controller/event/free_shipping.php). */
.sb-free-ship--mini {
	margin: 0 0 10px;
	padding: 10px 12px;
}

.sb-free-ship--mini .sb-free-ship__kicker {
	margin-bottom: 6px;
	font-size: 11px;
}

.sb-free-ship--mini .sb-free-ship__lead {
	font-size: 12px;
}

/* Мессенджеры и соцсети на странице «Contact Us» — карточка того же вида,
 * что и другие плашки-разделы (доска отделов, пустая корзина): .sb-band сверху,
 * тело снизу. Только чернь и кумач — третьего цвета в теме нет (см. шапку файла),
 * поэтому иконки монохромные, без фирменных цветов WhatsApp/Telegram/т.д.
 * extension/soviet/catalog/controller/event/contact.php. */
.sb-contact-channels {
	margin: 0 0 24px;
	border: var(--sb-rule) solid var(--sb-line);
	background: var(--sb-card);
}

.sb-contact-channels__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0 0;
	color: #fff;
	font-size: clamp(20px, 3vw, 26px);
}

.sb-contact-channels__title::before {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	background: var(--sb-red);
	content: '';
	mask: var(--sb-i-rotary-phone) center / contain no-repeat;
	-webkit-mask: var(--sb-i-rotary-phone) center / contain no-repeat;
}

.sb-contact-channels__body {
	padding: 20px;
}

.sb-contact-channels__messengers {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.sb-contact-channels__messengers a {
	display: flex;
	align-items: center;
	gap: 10px;
	height: var(--sb-control-h);
	padding: 0 18px;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-paper);
	color: var(--sb-ink);
	font-family: var(--sb-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .03em;
	text-decoration: none;
	text-transform: uppercase;
}

.sb-contact-channels__messengers i {
	font-size: 18px;
}

.sb-contact-channels__messengers a:hover,
.sb-contact-channels__messengers a:focus-visible {
	color: var(--sb-ink);
	text-decoration: none;
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-red);
	translate: calc(var(--sb-shift) * -1) calc(var(--sb-shift) * -1);
}

.sb-contact-channels__sub {
	margin: 0 0 10px;
	color: var(--sb-muted);
	font-family: var(--sb-display);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.sb-contact-channels__social {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-contact-channels__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-ink);
	color: var(--sb-paper);
	font-size: 18px;
}

.sb-contact-channels__social a:hover,
.sb-contact-channels__social a:focus-visible {
	background: var(--sb-red);
	border-color: var(--sb-red);
	color: #fff;
}

/* Подпись под «Contact Form» — extension/soviet/catalog/controller/event/contact.php. */
.sb-contact-note {
	margin: -8px 0 20px;
	color: var(--sb-muted);
	font-family: var(--sb-display);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Подпись под списком мессенджеров — extension/soviet/catalog/controller/event/contact.php. */
.sb-contact-channels__warning {
	margin: -8px 0 20px;
	color: var(--sb-red);
	font-family: var(--sb-display);
	font-size: 12px;
	font-style: italic;
	letter-spacing: .03em;
}
/* Блог под тему: список /articles и отдельная статья. */

.sb-blog {
	margin-top: 12px;
}

.sb-blog .sb-kicker {
	color: var(--sb-red);
}

.sb-blog__head {
	margin-bottom: 20px;
}

.sb-blog__head .sb-kicker {
	flex: 1 0 100%;
}

.sb-blog__head .sb-stamp,
.sb-blog__more .sb-stamp {
	margin-left: auto;
}

.sb-blog__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: #fff;
	font-size: 28px;
}

.sb-blog__title::before {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	background: var(--sb-red);
	content: '';
	-webkit-mask: var(--sb-i-star) center / contain no-repeat;
	mask: var(--sb-i-star) center / contain no-repeat;
}

.sb-blog__lead {
	flex: 1 1 220px;
	margin: 0;
	color: color-mix(in srgb, var(--sb-paper) 78%, var(--sb-ink));
	font-size: 15px;
}

.sb-blog__intro {
	max-width: 70ch;
	margin: 0 0 20px;
	color: var(--sb-ink);
}

/* Панель поиска/сортировки — своя раскладка вместо штатных Bootstrap-колонок. */
.sb-blog__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	margin-bottom: 24px;
}

.sb-blog__search {
	flex: 1 1 280px;
}

.sb-blog__sort {
	flex: 0 1 260px;
}

.sb-blog__list {
	display: flex;
	flex-direction: column;
	gap: var(--sb-rule);
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.sb-blog__card {
	display: flex;
	gap: 20px;
	padding: 20px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--sb-ink) 14%, transparent);
}

.sb-blog__card:first-child {
	padding-top: 0;
}

.sb-blog__thumb {
	display: block;
	flex: 0 0 220px;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border: var(--sb-rule) solid var(--sb-ink);
}

.sb-blog__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .25s;
}

.sb-blog__thumb:hover img {
	transform: scale(1.05);
}

.sb-blog__body {
	flex: 1;
	min-width: 0;
}

.sb-blog__name {
	margin: 0 0 6px;
	font-size: 20px;
	line-height: 1.25;
}

.sb-blog__name a {
	color: var(--sb-ink);
	text-decoration: none;
}

.sb-blog__name a:hover {
	color: var(--sb-red);
}

.sb-blog__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0 0 10px;
	padding: 0;
	color: color-mix(in srgb, var(--sb-ink) 60%, transparent);
	font-family: var(--sb-display);
	font-size: 12px;
	letter-spacing: .04em;
	list-style: none;
	text-transform: uppercase;
}

.sb-blog__meta li {
	margin: 0;
	list-style: none;
}

.sb-blog__meta a {
	color: inherit;
}

.sb-blog__excerpt {
	margin: 0 0 12px;
	color: color-mix(in srgb, var(--sb-ink) 85%, transparent);
}

.sb-blog__continue {
	display: inline-block;
}

/* Отдельная статья. */

.sb-blog--article .sb-blog__meta--article {
	margin-bottom: 18px;
}

/* На декстопе статья — во весь экран, а не в бутстраповском `.container` с полями
   по бокам (по просьбе пользователя, 19.08.2026). Сперва пробовали растянуть только
   обёртку, оставив текст в читаемых 74ch, — картинка ушла в размах, а текст остался
   узкой колонкой слева, разнобой. Убрали ограничение и у текста тоже: во весь экран
   значит во весь экран целиком, а не только у фотографии. */
@media (min-width: 992px) {
	.sb-blog--article.container {
		max-width: 100%;
		padding-right: 40px;
		padding-left: 40px;
	}

	.sb-blog--article .sb-blog__prose,
	.sb-blog--article .sb-blog__tags,
	.sb-blog--article .sb-blog__comments {
		max-width: none;
	}
}

.sb-blog__hero {
	display: block;
	width: 100%;
	max-height: 460px;
	margin-bottom: 24px;
	object-fit: cover;
	border: var(--sb-rule) solid var(--sb-ink);
}

.sb-blog__prose {
	max-width: 74ch;
	margin-bottom: 24px;
	line-height: 1.7;
}

.sb-blog__prose img {
	max-width: 100%;
	height: auto;
	border: var(--sb-rule) solid var(--sb-ink);
}

.sb-blog__prose h2,
.sb-blog__prose h3 {
	margin-top: 1.6em;
}

.sb-blog__tags {
	max-width: 74ch;
	margin-bottom: 24px;
	font-size: 14px;
}

.sb-blog__tags a {
	color: var(--sb-red);
}

/* Подвал статьи — приглашение читать дальше, та же плашка `.sb-band`. */
.sb-blog__more {
	margin: 32px 0;
}

.sb-blog__more .sb-kicker {
	flex: 1 0 100%;
}

.sb-blog__more-title {
	margin: 0;
	color: #fff;
	font-size: 20px;
}

.sb-blog__more-lead {
	flex: 1 1 220px;
	margin: 0;
	color: color-mix(in srgb, var(--sb-paper) 78%, var(--sb-ink));
	font-size: 14px;
}

.sb-blog__more-button {
	flex: 0 0 auto;
}

.sb-blog__comments {
	max-width: 74ch;
	margin-bottom: 24px;
}

.sb-blog__comments .sb-kicker {
	margin-bottom: 10px;
}

@media (max-width: 767px) {
	.sb-blog__card {
		flex-direction: column;
	}

	.sb-blog__thumb {
		flex-basis: auto;
	}

	.sb-blog__head .sb-stamp {
		margin-top: 0;
	}
}

/* Плавающая корзина ----------------------------------------------------------
 * Кнопка в углу экрана, видна на любой длине страницы, если в корзине что-то
 * есть — extension/soviet/catalog/controller/event/floatcart.php строит саму
 * кнопку и кладёт данные для floatcart.js. Тот же язык кнопок, что и везде
 * в теме: прямые углы, плоская тень-сдвиг (--sb-shift), инверсия в кумач
 * при наведении. `[hidden]` — нативный атрибут, не класс: display:none уже
 * встроен браузером, отдельное правило не нужно. */
.sb-floatcart {
	display: flex;
	position: fixed;
	z-index: 45;
	right: 18px;
	bottom: 18px;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-ink);
	color: #fff;
	font-size: 20px;
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-red);
	transition: translate .12s, box-shadow .12s, background-color .12s;
}

.sb-floatcart:hover,
.sb-floatcart:focus-visible {
	translate: calc(var(--sb-shift) * -1) calc(var(--sb-shift) * -1);
	box-shadow: calc(var(--sb-shift) * 2) calc(var(--sb-shift) * 2) 0 var(--sb-red);
	color: #fff;
}

/* Куки-баннер сидит в том же правом нижнем углу и по z-index (10000) выше
   кнопки (45) — пока баннер не закрыт, кнопка физически под ним, клик по
   видимой иконке на самом деле бьёт в штамп «Declined» (проверено вживую:
   document.elementFromPoint над кнопкой отдавал .sb-cookie__stamp--disagree,
   не .sb-floatcart). Поднимаем кнопку над баннером на время его жизни.
   Раньше отступ был зашит числом 150px «с запасом» на самый высокий случай
   (131px на iPhone SE, где текст+два штампа не помещаются в одну строку) —
   на остальных экранах баннер ниже, и кнопка повисала далеко над ним
   (жалоба пользователя 22.08.2026, «очень высоко плавает от куки баннера»).
   `--sb-cookie-h` — реальная измеренная высота баннера (cookie.twig, JS,
   ResizeObserver-по-факту через resize), 150px — запасное значение, пока
   переменная ещё не выставилась (первый кадр до onload). `:has()` сам
   снимает сдвиг, когда `#cookie` уходит из DOM по клику (common.js:
   `$('#cookie').remove()`) — кнопка опускается в исходный угол сама, JS
   трогать не пришлось. Браузеры без :has() просто не видят правило (та же
   деградация, что у animation-timeline: view() в этом файле) — кнопка на
   них временно скрыта под баннером, не хуже, чем было. */
body:has(#cookie) .sb-floatcart {
	bottom: calc(var(--sb-cookie-h, 150px) + 10px);
}

.sb-floatcart__count {
	display: flex;
	position: absolute;
	top: -8px;
	right: -8px;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 4px;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-red);
	color: #fff;
	font-family: var(--sb-display);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	line-height: 1;
}

/* Подпись рядом с иконкой — только у «В корзину» (addtocart-float.js кладёт
   и иконку, и текст всегда), и только на телефоне: в углу текст не нужен,
   квадрату хватает пиктограммы, а вот на полноширинной полосе внизу — самое
   место. */
.sb-floatcart__label {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.sb-floatcart {
		transition: none;
	}
}

/* Плавающая «В корзину» на странице товара (addtocart-float.js) — тот же
   квадрат, тот же угол, что и у плавающей корзины «Перейти в корзину»
   (#sb-floatcart), только со своей иконкой. Пока корзина пуста, кнопка стоит
   там же, где иначе стояла бы корзина (правый угол, `.sb-floatcart` даёт это
   по умолчанию). Как только в корзине что-то появилось и #sb-floatcart
   потеряла атрибут `hidden` — сдвигаем «В корзину» левее, освобождая крайнее
   место: две плавающие кнопки встают рядом, а не одна поверх другой.
   :has() — без единой строчки JS специально под эту стыковку. */
body:has(#sb-floatcart:not([hidden])) .sb-floatcart--add {
	right: 82px;
}

/* На телефоне обе кнопки (жалоба пользователя, 20.08.2026: «на весь экран
   и прилипшая к низу») перестают быть корнер-квадратами и становятся одной
   сплошной полосой во всю ширину, прибитой к низу экрана — большая мишень
   под палец, ту же роль в остальной вёрстке уже играет липкая полоса меню
   сверху (.sb-nav), здесь симметричный приём снизу. «В корзину» занимает
   всё, кроме узкой полосы под саму корзину справа (когда она есть — тот же
   :has(), что и в угловой раскладке); «Перейти в корзину» — своя полоса
   справа с иконкой и счётчиком, ширина фиксирована, а не квадрат.

   Тень-сдвиг (--sb-shift) снята: она рисовалась под плавающий в воздухе
   квадрат, а не под полосу, прибитую к краю экрана, — с ней правый край
   норовил высунуться за границу вьюпорта. bottom учитывает вырез снизу
   у безрамочных телефонов (env(safe-area-inset-bottom)). */
@media (max-width: 767px) {
	.sb-floatcart,
	.sb-floatcart--add {
		right: 0;
		bottom: 0;
		bottom: env(safe-area-inset-bottom, 0);
		width: auto;
		height: 52px;
		box-shadow: none;
	}

	/* :not(.sb-floatcart--add) — кнопка «В корзину» несёт оба класса
	   (.sb-floatcart для общей раскладки/цвета, .sb-floatcart--add для своей
	   позиции), и без исключения это правило перебивало бы её ширину тоже:
	   один класс — источник трёх свойств у двух разных кнопок. */
	.sb-floatcart:not(.sb-floatcart--add) {
		left: auto;
		width: 60px;
		font-size: 19px;
	}

	.sb-floatcart--add {
		left: 0;
		gap: 8px;
		font-size: 14px;
		letter-spacing: .08em;
		text-transform: uppercase;
	}

	.sb-floatcart--add .sb-floatcart__label {
		display: inline;
	}

	body:has(#sb-floatcart:not([hidden])) .sb-floatcart--add {
		right: 60px;
	}

	.sb-floatcart__count {
		top: -6px;
		right: -6px;
	}
}

@media (max-width: 767px) {
	body:has(#sb-floatcart:not([hidden])) .sb-floatcart--add {
		right: 72px;
	}
}