/* Start:/bitrix/components/bitrix/catalog/templates/.default/style.min.css?1783353538959*/
.grid .bx_content_section{margin-bottom:15px}.grid .bx_sidebar{margin-bottom:15px}.grid2x1 .bx_content_section{float:left;width:66%;margin-bottom:15px}.grid2x1 .bx_sidebar{float:right;width:33%;margin-bottom:15px;padding-left:5%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media(max-width:960px){.grid2x1 .bx_sidebar{padding-left:4%}}@media(max-width:640px){.grid2x1 .bx_content_section,.grid2x1 .bx_sidebar{width:100%;float:none}.grid2x1 .bx_sidebar{padding-left:3%}}@media(max-width:479px){.grid2x1 .bx_sidebar{padding-left:1%}}.catalog-block-header{font-size:14px;font-weight:bold;text-align:left;margin:5px 0;padding:5px 15px;border-bottom:2px solid #d9dee6;color:#000}body.bx-theme-blue .catalog-block-header{border-color:#006cc0}body.bx-theme-green .catalog-block-header{border-color:#63aa28}body.bx-theme-red .catalog-block-header{border-color:#da3737}body.bx-theme-yellow .catalog-block-header{border-color:#f4b236}
/* End */


/* Start:/local/templates/welle/components/bitrix/catalog.smart.filter/.default/style.css?178876603015609*/
/* ============================================================================
 * Умный фильтр каталога — вёрстка по прототипу Design/prototypes/catalog-listing
 * (блок «Подбор по параметрам»). Только токены /local/templates/welle/css/tokens/,
 * цветовых литералов нет.
 *
 * Адаптив — container queries (канон дизайн-системы): раскладка «сайдбар + листинг»
 * включается от ширины СЕКЦИИ, а не вьюпорта. Порог 780px взят из принятого прототипа
 * (там это @media 781px) — визуально та же точка перелома.
 *
 * Раскладку колонок задаём отсюда, а не переписыванием шаблона комплексного компонента:
 * штатный section_horizontal.php кладёт фильтр и листинг двумя соседними .col-xs-12
 * внутри общего .row. Селектор :has() превращает этот .row в grid — /bitrix не тронут,
 * параметры вызова не тронуты. Нет поддержки :has() — колонки просто встают друг под
 * друга (фильтр сверху), интерфейс остаётся рабочим.
 * ==========================================================================*/

.wt-vh {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* — контейнер секции: от его ширины зависит, есть ли сайдбар — */
.row:has(> div > .row > div > .wt-filter) {
	container-type: inline-size;
	container-name: wtsec;
}

/* ---------- ПАНЕЛЬ ---------- */
.wt-filter {
	margin-bottom: var(--space-5);
	font-size: var(--text-sm);
	color: var(--foreground);
}

.wt-filter__panel {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--card);
	padding: 0 var(--space-4);
}

.wt-filter__summary {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-3) 0;
	cursor: pointer;
	list-style: none;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--foreground);
}

.wt-filter__summary::-webkit-details-marker { display: none; }

.wt-filter__summary:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.wt-filter__title { flex: 1 1 auto; }

.wt-filter__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 0.35em;
	background: var(--primary);
	color: var(--primary-foreground);
	border-radius: 999px;
	font-size: var(--text-xs);
	font-weight: 700;
}

.wt-filter__chev {
	width: 0.7em;
	height: 0.7em;
	flex: none;
	border-right: 2px solid var(--muted-foreground);
	border-bottom: 2px solid var(--muted-foreground);
	transform: rotate(-45deg);
	transition: transform .15s;
}

.wt-filter__panel[open] > .wt-filter__summary .wt-filter__chev { transform: rotate(45deg); }

/* ---------- ГРУППЫ ФАСЕТОВ ---------- */
.wt-facet {
	border-top: 1px solid var(--border);
}

.wt-filter__facets > .wt-facet:first-child { border-top: none; }

.wt-facet__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	width: 100%;
	padding: var(--space-3_5) 0;
	cursor: pointer;
	list-style: none;
	font-size: var(--text-sm);
	font-weight: 650;
	color: var(--foreground);
}

.wt-facet__summary::-webkit-details-marker { display: none; }

.wt-facet__summary:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.wt-facet__chev {
	width: 0.7em;
	height: 0.7em;
	flex: none;
	margin-left: var(--space-2);
	border-right: 2px solid var(--muted-foreground);
	border-bottom: 2px solid var(--muted-foreground);
	transform: rotate(-45deg);
	transition: transform .15s;
}

.wt-facet[open] > .wt-facet__summary .wt-facet__chev { transform: rotate(45deg); }

.wt-facet__body {
	padding-bottom: var(--space-4);
	display: grid;
	gap: var(--space-1);
}

.wt-facet__hint {
	margin: 0 0 var(--space-2);
	font-size: var(--text-xs);
	color: var(--muted-foreground);
	line-height: var(--leading-normal);
}

/* ══════════════════════════════════════════════════════════════════════════
   ВОЛНА А, 2026-09-07 — слоты 26 и 31 принятой формы листинга.
   Значения взяты из эталона 06.09 (sha256 7f405070…), не назначены заново.
   ══════════════════════════════════════════════════════════════════════════ */

/* СЛОТ 26 — объяснение счётчика, строкой под заголовком панели.
   Кегль xs и приглушённый тон: это сноска к панели, а не её текст. */
.wt-filter__sub {
	margin: 0 0 var(--space-2);
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
}

/* СЛОТ 31 — «Не знаете, что подойдёт?» в подвале панели подбора.
   Отделён от фасетов линией: это не ещё один фасет, а выход из подбора. */
.wt-help-inline {
	margin-top: var(--space-3);
	padding: var(--space-3) 0 var(--space-4);
	border-top: 1px solid var(--border);
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
}
.wt-help-inline b {
	display: block;
	margin-bottom: var(--space-1);
	color: var(--foreground);
	font-size: var(--text-sm);
	font-weight: 650;
}
.wt-help-inline a {
	color: var(--primary);
	font-weight: 650;
}
.wt-help-inline a:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* ---------- ЗНАЧЕНИЕ ФАСЕТА ---------- */
/* font-weight и margin-bottom заданы ЯВНО и убирать их нельзя: подпись фасета — это <label>,
   а на страницах /catalog/ подключён /bitrix/css/main/bootstrap.min.css (Bootstrap 3.3.7,
   его тянут штатные шаблоны bitrix:catalog) с правилом label{font-weight:bold;margin-bottom:5px}.
   Пока эти два свойства здесь не заданы, побеждает Bootstrap: замер 09.08 показал в бою
   font-weight 700 и лишние 5 px снизу. Та же причина и то же лечение, что у блока
   «НЕЙТРАЛИЗАЦИЯ BOOTSTRAP 3» в catalog.element/.default/style.css. */
.wt-opt {
	display: flex;
	align-items: center;
	gap: var(--space-2_5);
	padding: var(--space-1) 0;
	min-height: 32px;
	cursor: pointer;
	font-size: var(--text-sm);
	font-weight: 400;
	margin-bottom: 0;
	color: var(--foreground);
}

.wt-opt input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.1em;
	height: 1.1em;
	flex: none;
	margin: 0;
	border: 1.5px solid var(--input);
	border-radius: var(--radius-sm);
	background: var(--card);
	cursor: pointer;
	display: grid;
	place-content: center;
}

.wt-opt input[type="checkbox"]:checked {
	background: var(--primary);
	border-color: var(--primary);
}

.wt-opt input[type="checkbox"]:checked::after {
	content: "";
	width: 0.32em;
	height: 0.6em;
	border: solid var(--primary-foreground);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) translateY(-1px);
}

.wt-opt input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

.wt-opt__label { flex: 1 1 auto; }

.wt-opt__count {
	color: var(--muted-foreground);
	font-size: var(--text-xs);
	font-variant-numeric: tabular-nums;
}

.wt-opt--off {
	color: var(--muted-foreground);
	cursor: not-allowed;
}

.wt-opt--off input[type="checkbox"] { opacity: .5; cursor: not-allowed; }

/* ---------- ДИАПАЗОН (цена и числовые свойства) ----------
   07.09, остаток ворот листинга (класс К, находка #57): анатомия по эталону 06.09,
   блок .wt-price-range — два поля с подсказкой ВНУТРИ и «—» между ними, внешних
   подписей «от / до» нет. Значения взяты из эталона, не назначены: gap space-2,
   высота 44, фон card, рамка input, радиус radius, отступ снизу space-3.
   Прежние .wt-price__field / .wt-price__cap (label-обёртка с подписью, 40 px, решение
   диспетчера 09.08 о весе 400) сняты вместе с их нейтрализацией Bootstrap: <label>
   в разметке больше нет, гасить нечего. Имя .wt-price сохранено — на него завязан
   script.js (el.closest('.wt-price')); читать как «пара полей диапазона». */
.wt-price {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-bottom: var(--space-3);
}

.wt-price input {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 0 var(--space-2);
	font: inherit;
	font-size: var(--text-sm);
	color: var(--foreground);
	background: var(--card);
	border: 1px solid var(--input);
	border-radius: var(--radius);
}

/* Подсказка в поле приглушена — как у поля поиска в шапке (styles.css) и в эталоне (::placeholder). */
.wt-price input::placeholder { color: var(--muted-foreground); }

.wt-price input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* ---------- НИЗ ПАНЕЛИ ---------- */
.wt-filter__foot {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) 0;
	border-top: 1px solid var(--border);
}

.wt-filter__apply {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 0 var(--space-4);
	border: none;
	border-radius: var(--radius);
	background: var(--primary);
	color: var(--primary-foreground);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 700;
	cursor: pointer;
}

.wt-filter__apply:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.wt-filter__reset {
	color: var(--primary);
	font-size: var(--text-xs);
	font-weight: 600;
	text-decoration: underline;
	padding: var(--space-1) var(--space-2);
}

.wt-filter__reset:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------- ПРИМЕНЯЕТСЯ (отклик на действие) ----------
 * Класс ставит script.js на время, пока форма уходит на сервер, и снимает его сама
 * перезагрузка страницы. Отклик нужен потому, что применение фильтра — это переход:
 * между кликом и новой выдачей иначе не происходит ничего, и человек считает, что
 * фильтр не работает (ровно половина дефекта А2, постановка 2026-08-09).
 *
 * Новых элементов, надписей и токенов не заводим — это состояние уже существующей
 * панели: приглушение, курсор ожидания и aria-busy. Сам факт применения человек видит
 * после перезагрузки чипом «Цена от … до …» над листингом и числом найденных позиций.
 * Значение .55 и длительность — решение ИСПОЛНИТЕЛЯ (в прототипе состояния «применяется»
 * нет вовсе); назначит design другое — его слово главнее этих двух строк.
 *
 * pointer-events на содержимом гасим, чтобы за время перехода не ушла вторая отправка. */
.wt-filter--busy .wt-filter__panel {
	opacity: .55;
	cursor: progress;
	transition: opacity .12s ease-out;
}

.wt-filter--busy .wt-filter__panel * { pointer-events: none; }

/* ============================================================================
 * ШИРОКИЙ КОНТЕЙНЕР — сайдбар слева, как в принятом прототипе
 * ==========================================================================*/
@container wtsec (min-width: 780px) {

	/* .row с фильтром и листингом превращается в две колонки */
	.row:has(> div > .wt-filter) {
		display: grid;
		grid-template-columns: 264px minmax(0, 1fr);
		gap: var(--space-8);
		align-items: start;
	}

	/*
	 * Раскладку задаём явно, а не порядком в потоке: соседей у фильтра внутри .row
	 * больше одного (штатный section_horizontal.php оставляет пустой .col-xs-12 под
	 * блок рекомендаций). Без явного размещения фильтр уезжает во вторую колонку.
	 */
	.row:has(> div > .wt-filter) > div:has(> .wt-filter) {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: var(--space-5);
		float: none;
		width: auto;
		padding-left: 0;
		padding-right: 0;
	}

	.row:has(> div > .wt-filter) > div:not(:has(> .wt-filter)) {
		grid-column: 2;
		float: none;
		width: auto;
	}

	/* листинг — последняя колонка ядра; сажаем её в первую строку рядом с фильтром */
	.row:has(> div > .wt-filter) > div:last-child {
		grid-row: 1;
		align-self: start;
	}

	/*
	 * Колонки-заготовки ядра (пустой .col-xs-12 под блок рекомендаций) убираем из сетки:
	 * :empty на них не срабатывает — внутри перевод строки, поэтому проверяем отсутствие
	 * дочерних ЭЛЕМЕНТОВ. Иначе заготовка занимает первую строку второй колонки и уводит
	 * листинг под сайдбар.
	 */
	.row:has(> div > .wt-filter) > div:not(:has(*)) { display: none; }

	.wt-filter { margin-bottom: 0; }

	.wt-filter__panel { padding: var(--space-5); }

	/* на широком фильтр всегда раскрыт: заголовок работает как заголовок, не как кнопка */
	.wt-filter__summary {
		padding: 0 0 var(--space-2);
		min-height: 0;
		cursor: default;
		pointer-events: none;
		font-size: var(--text-sm);
		font-weight: 700;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--muted-foreground);
	}

	.wt-filter__chev { display: none; }

	/* с JS выдача обновляется по клику — отдельная кнопка «Показать» не нужна */
	.wt-filter--js .wt-filter__apply { display: none; }

	.wt-filter--js .wt-filter__foot { justify-content: flex-start; }
}

/* End */


/* Start:/local/templates/welle/components/bitrix/catalog.section.list/.default/style.css?179053459343166*/
/* ============================================================================
 * Блок разделов/подразделов каталога — bitrix:catalog.section.list,
 * шаблон сайта welle. Пара к template.php того же каталога.
 *
 * Значения — ТОЛЬКО токены /local/templates/welle/css/tokens/ (ярусы 0→1);
 * производные тона — через color-mix поверх токенов, как в листинге.
 *
 * АДАПТИВ — CONTAINER QUERIES: пороги 560/900 px взяты из утверждённого макета
 * раздела-группы (Design/prototypes/catalog-section-group/index.html, .sections-grid).
 * ПОЧЕМУ ПОРОГИ ПОМЕНЯЛИСЬ (2026-08-01): прежние 420/720 были откалиброваны, пока
 * блок стоял в узкой колонке рядом с фильтром и обязан был перестраиваться синхронно
 * с сеткой карточек. По макету блок подразделов занимает ВСЮ ширину над фильтром и
 * листингом, поэтому его пороги теперь считаются от полной колонки — как в макете.
 * На боевых ширинах это даёт то же число колонок, что и макет: 1140 px -> 3, 390 px -> 1.
 * ============================================================================ */

.wt-sections {
	container-type: inline-size;
	container-name: wtsections;
	margin: 0 0 var(--space-8);
	font-family: var(--font-sans);
	color: var(--foreground);
}

/* ---------- H1 раздела ----------
   Единственный H1 страницы раздела: шаблон bitrix:catalog.section его намеренно
   не ставит. Типографика совпадает с H1 карточки товара (.wt-pdp__h1). */
/* Шапка раздела = .catalog-head прототипа: заголовок + подзаголовок одним блоком,
   отбивка снизу живёт на обёртке, а не на заголовке (иначе подзаголовок отрывался бы
   от H1 на величину --space-5). */
.wt-sections__head {
	margin: 0 0 var(--space-5);
}
/* Листовой раздел: подразделов нет, шапка — единственный ребёнок блока. Тогда отбивку
   до фильтра и листинга даёт сам блок, а собственное поле шапки только удваивало бы её. */
.wt-sections__head:last-child {
	margin-bottom: 0;
}

/* .lead макета раздела-группы: описание раздела под H1. Данные пришли 2026-08-01
   (50 из 50 разделов). max-width 74ch — из макета: длинная строка на 1140 px без
   ограничения ушла бы за предел комфортного чтения. */
.wt-sections__lead {
	margin: var(--space-2) 0 0;
	max-width: 74ch;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
}

/* ---------------------------------------------------------------------------
 * ЗАГЛАВНАЯ ПЕРВАЯ БУКВА — ОФОРМЛЕНИЕМ, НЕ ПРАВКОЙ ТЕКСТА (решение 2026-08-01).
 *
 * ЗАДАЧА. Все 50 описаний разделов написаны со строчной буквы и без точки в конце
 * (замер 01.08: первый символ — кириллическая строчная у 50 из 50; ни цифр, ни
 * латиницы, ни аббревиатур в начале). Для хвоста метатега это верно
 * («Краны шаровые муфтовые нержавеющие — резьбовые соединения вр-вр, нр-вр…»),
 * но на странице та же строка стоит САМОСТОЯТЕЛЬНЫМ абзацем под H1 и в плитке
 * подраздела — и читается обрывком фразы.
 *
 * ПОЧЕМУ НЕ ПРАВИМ ТЕКСТ. Тексты согласованы владельцем дословно, а миграция
 * 2026-08-01_01-section-description.php защищена sha256-дайджестом по всем 50 парам:
 * правка любого символа останавливает миграцию. Один и тот же текст обязан работать
 * в двух ролях — хвостом метатега (строчная верна) и абзацем (нужна заглавная).
 *
 * ПОЧЕМУ ИМЕННО ::first-letter, А НЕ text-transform НА ВСЁМ ЭЛЕМЕНТЕ.
 * `text-transform: capitalize` поднял бы КАЖДОЕ слово («Соединения Р/Р, Стандарты
 * DIN И SMS») — это уже не типографика, а порча текста. ::first-letter — штатный
 * псевдоэлемент первой буквы первой строки блочного бокса (MDN, ярус 1), он трогает
 * ровно один символ и только визуально: в разметке, в БД, в буфере обмена и в выдаче
 * поисковика остаётся согласованный текст без единой правки.
 *
 * ГРАНИЦЫ ПРИЁМА, названы честно:
 *  • ::first-letter применим только к элементу с display, порождающим блочный бокс,
 *    поэтому .wt-sections__hint внутри ссылки-плитки объявлен display: block;
 *  • точка в конце НЕ дорисовывается (в макете она есть у подзаголовка, в бою нет):
 *    конец фразы — это текст, а не оформление, и подставлять его CSS-ом значило бы
 *    решать за владельца. Расхождение названо в отчёте;
 *  • ::first-letter захватывает и ведущую пунктуацию, если она появится (кавычка,
 *    скобка) — сегодня таких описаний ноль из 50.
 * ------------------------------------------------------------------------- */
.wt-sections__lead::first-letter,
.wt-sections__hint::first-letter {
	text-transform: uppercase;
}

.wt-sections__title {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: var(--leading-tight);
	color: var(--foreground);
}
.wt-sections__title a {
	color: inherit;
	text-decoration: none;
}
.wt-sections__title a:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}
/* Тот же шаг кегля, что у H1 карточки товара (.wt-pdp__h1): заголовок раздела
   подрастает ровно там, где сетка разделов уходит в три колонки. */
@container wtsections (min-width: 720px) {
	.wt-sections__title { font-size: var(--text-2xl); }
}

/* ---------- полоса доверия (Р3 б, решение владельца 2026-07-31) ----------
   .trust утверждённого макета: подложка --muted, рамка, радиус, кегль xs; точка-маркер
   у каждого пункта — акцентом бренда. Первый пункт выделен <b> — он и есть ответ на
   главный вопрос снабженца (срок), остальные держат его на странице. */
.wt-sections__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin-top: var(--space-4);
	padding: var(--space-3) var(--space-4);
	background: var(--muted);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}
.wt-sections__trust b {
	color: var(--foreground);
	font-weight: 650;
}
/* Телефон — настоящая ссылка tel:, не декорация; номер тот же, что в шапке и подвале. */
.wt-sections__trust a {
	color: var(--foreground);
	font-weight: 650;
	text-decoration: none;
	white-space: nowrap;
}
.wt-sections__trust a:hover { text-decoration: underline; }
.wt-sections__trust a:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}
.wt-sections__trust-item {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-1_5);
}
.wt-sections__trust-item::before {
	content: "";
	flex: none;
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: var(--brand-accent);
	transform: translateY(-0.15em);
}
/* Первый видимый пункт точки не носит: она разделитель, а не маркер списка. */
.wt-sections__trust-item:first-of-type::before { display: none; }

/* 🔴 2026-09-07, волна А, слот 25 — ДВЕ РЕДАКЦИИ ПОЛОСЫ, ВЫБОР ЗА CSS.
   Ниже 790 px пять строк сжимаются в одну: остаются три обязательных факта
   (юрлица · безнал · порог 100 BYN). Замер редакции 3 эталона: экономия 88 px
   первого экрана на 320 px и 70 px на 375–430 px.
   ПОЧЕМУ @media, А НЕ @container. Порог 790 — это ширина ЭКРАНА, на которой
   уходит колонка подбора, а не ширина этого блока. Тот же выбор и по той же
   причине сделан в сетке листинга 06.09 (catalog.section/.default/style.css,
   комментарий у @media 560/1120): контейнер не различает случаи, дающие
   одинаковую ширину колонки. Порог взят из эталона, не назначен заново. */
.wt-sections__trust-item--short { display: none; }
@media (max-width: 789.98px) {
	.wt-sections__trust-item--full { display: none; }
	.wt-sections__trust-item--short { display: inline; }
}
/* 🔴 27.09.2026, К9 шаг 6Б (ф4) — ОТСТУПЫ ПОЛОСЫ НА УЗКОЙ ШИРИНЕ, БАЗОВЫЙ СЛОЙ К4 (все разделы).
   Правило перенесено из замороженного листинга К4 (паспорт заморозки, «Исключение — базовый слой»,
   п. 2): `@container wtscreen (width < 375px) { .wt-trust { margin-top: var(--space-2);
   padding: var(--space-2) var(--space-3); } }`. Причина там же: новая полоса длиннее прежней,
   и без правила первый товар на 320 px уходил за край первого экрана (581 при крае 568; с правилом 565).
   Значения — 1:1. Переведено по конвенции проекта: `@container wtscreen` → `@media` с тем же порогом
   (wtscreen — демо-кадр показа, на сайте такого контейнера нет; тот же перевод у порога 790 выше),
   `.wt-trust` → `.wt-sections__trust` (та же роль в анатомии полосы раздела). */
@media (max-width: 374.98px) {
	.wt-sections__trust {
		margin-top: var(--space-2);
		padding: var(--space-2) var(--space-3);
	}
}

/* ---------- заголовок блока подразделов ----------
   .sections-title макета: не <h2>, а подпись — уровни заголовков остаются за самими
   разделами (у каждой плитки свой <h2>), и вставка ещё одного <h2> сломала бы outline.
   Связь с блоком держится через aria-labelledby на <nav>. */
.wt-sections__cap {
	margin: var(--space-7) 0 var(--space-3);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--muted-foreground);
}

/* ---------- сетка разделов ---------- */
.wt-sections__grid,
.wt-sections__sub {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.wt-sections__grid { gap: var(--space-3); }

@container wtsections (min-width: 560px) {
	.wt-sections__grid,
	.wt-sections__sub { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container wtsections (min-width: 900px) {
	.wt-sections__grid,
	.wt-sections__sub { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.wt-sections__item { min-width: 0; }

/* Раздел с подразделами — во всю ширину: его ссылка работает заголовком группы,
   а дети раскладываются своей сеткой под ним. */
.wt-sections__item--group {
	grid-column: 1 / -1;
}
.wt-sections__item--group + .wt-sections__item--group {
	margin-top: var(--space-4);
}

.wt-sections__h {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* ---------- плитка раздела (Р1 б: название + уточнение + счётчик) ----------
   .sec-tile утверждённого макета: карточка в колонку, а не строка. height:100% —
   чтобы плитки в ряду были одной высоты при разной длине уточнения. */
.wt-sections__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	height: 100%;
	padding: var(--space-3_5) var(--space-4);
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: border-color .12s;
}
.wt-sections__link:hover {
	border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
}
.wt-sections__link:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

/* верхняя строка плитки: имя слева, счётчик прижат вправо по общей базовой линии */
.wt-sections__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-3);
}

.wt-sections__name {
	min-width: 0;
	font-size: var(--text-sm);
	font-weight: 650;
	line-height: var(--leading-tight);
}

.wt-sections__count {
	flex: none;
	font-size: var(--text-xs);
	color: var(--muted-foreground);
	font-variant-numeric: tabular-nums;
}

/* Уточнение из описания раздела. display:block обязателен: ::first-letter работает
   только на боксе блочного уровня, а плитка целиком — flex-контейнер. */
.wt-sections__hint {
	display: block;
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
}

/* ---------- заголовок группы ----------
   Тот же элемент, что и плитка, но без рамки: подчёркивание снизу отделяет
   группу от её подразделов и не спорит с плитками детей. Встречается только в корне
   /catalog/, где список приходит деревом; на разделе-группе все плитки — листовые.
   Уточнения у такого заголовка нет (см. template.php), поэтому кегль задаётся имени. */
.wt-sections__item--group > .wt-sections__h > .wt-sections__link {
	min-height: 0;
	height: auto;
	margin: 0 0 var(--space-3);
	padding: 0 0 var(--space-2);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--border);
	border-radius: 0;
}
.wt-sections__item--group > .wt-sections__h > .wt-sections__link .wt-sections__name {
	font-size: var(--text-base);
	font-weight: 700;
	letter-spacing: var(--tracking-wide);
}
.wt-sections__item--group > .wt-sections__h > .wt-sections__link:hover {
	border-bottom-color: color-mix(in oklab, var(--primary) 45%, var(--border));
}

/* ═══════════════════════════════════════════════════════════════════════════
   ФОРМА ПЛИТКИ ВИТРИНЫ, РЕДАКЦИЯ 6 — волна 2, шаг 4.1 (2026-09-12)
   ═══════════════════════════════════════════════════════════════════════════
   Слово владельца 12.09: «Принимаю полностью ред. 6, даю слово».
   Источник — Design/etalony-zamorozhennye/vitrina-forma/, свод набора 80d1b057….
   Три правила ниже перенесены ИЗ ЭТАЛОНА, а не написаны заново: значения, порядок
   свойств и комментарии-основания взяты оттуда. Расхождение с эталоном — дефект
   этого файла и чинится здесь; эталон не правится никогда (часть VII Схемы выкатки).

   Правила действуют на любой плитке, у которой есть слот медиа или размерная строка.
   Плитки без принятой формы (шаг 4.2 ещё не дошёл) их просто не встречают: шаблон
   не печатает ни .wt-sections__media, ни .wt-sections__dims, пока нет данных.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Схематичное изображение во всю ширину плитки — решение владельца 10.09.
   ПРОПОРЦИЯ 4:3 взята не с потолка: это единственная принятая в проекте
   пропорция медиа-слота (замороженный эталон листинга, .wt-cat-card__media).
   Отрицательные поля вытягивают слот на всю ширину карточки поверх её padding —
   поэтому у .wt-sections__link ниже обязателен overflow: hidden, иначе угол
   изображения вылезет за скруглённую рамку. */
.wt-sections__media {
	display: block;
	aspect-ratio: 4 / 3;
	position: relative;
	margin: calc(-1 * var(--space-3_5)) calc(-1 * var(--space-4)) var(--space-3);
	background: var(--muted);
	border-bottom: 1px solid var(--border);
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	overflow: hidden;
}
.wt-sections__link { overflow: hidden; }

/* Схема занимает слот целиком. Линия рисуется stroke="currentColor" — цвет приходит
   отсюда и, значит, следует теме: в тёмной теме схема темнеет вместе с текстом.
   Внешняя картинка этого не умеет, поэтому SVG печатается в разметку. */
.wt-sc {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	padding: 8% 6%;
	box-sizing: border-box;
	color: var(--muted-foreground);
}

/* Размерная строка плитки — вариант В (владелец, 12.09): число позиций и размерный ряд.
   Отдельной строкой под именем, а не в строке имени: в носителе до 56 знаков, рядом
   с именем длиной до 56 знаков это не живёт ни на одной ширине.
   Голый счётчик снят — его число стоит первым словом этой же строки. */
.wt-sections__dims {
	display: block;
	margin-top: calc(-1 * var(--space-1));
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
	font-variant-numeric: tabular-nums;
}

/* ============================================================================
 * 🔴 2026-09-12, ВОЛНА 2, ШАГ 4.4 — ЧЕТЫРЕ СЛОТА ВИТРИНЫ /catalog/ И ЕЁ H1.
 *
 * Пара к ветке `$wtRootIsVitrina` в template.php. Значения НЕ назначены заново:
 * каждое снято из замороженной формы витрины ред. 6 (свод набора 80d1b057d7d056d1…,
 * артборд Forma1440) — там они выражены теми же токенами, что живут здесь.
 * Расхождение с формой — дефект этого файла, и чинится он здесь (часть VII Схемы
 * выкатки), а не правкой эталона.
 *
 * ПОЧЕМУ ИМЕНА КЛАССОВ ТАКИЕ (.wt-h1, .wt-classes, .wt-vsearch, .wt-trust), а не
 * привычные для этого файла .wt-sections__*. Потому что в принятой форме они именно
 * такие, а ворота шага 4.4 сверяют разметку стенда с формой знак в знак, включая
 * классы. Совпадений с существующими классами сайта нет — проверено сплошным
 * поиском по /local/templates/welle/ перед заведением (0 из 0).
 *
 * ПОЧЕМУ @media, А НЕ @container. Порог 790 px — это ширина ЭКРАНА, на которой
 * уходит колонка подбора, а не ширина этого блока. Тот же выбор и по той же причине
 * сделан двумя блоками выше у полосы условий раздела и в сетке листинга 06.09.
 * ============================================================================ */

/* ---------- H1 витрины ----------
   В форме это одна H1 на 118 знаков, две строки на 1440. Кегль: text-lg на узком
   экране, text-2xl с 790 px — ровно как в форме (.wt-h1 и её правило в @container
   wtscreen min-width:790px). */
.wt-h1 {
	margin: 0;
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: var(--leading-tight);
	color: var(--foreground);
}
.wt-h1--vitrina {
	margin-top: var(--space-1);
}
@media (min-width: 790px) {
	.wt-h1 { font-size: var(--text-2xl); }
}

/* ---------- перечисление классов под H1 ----------
   214 знаков, тело принятого description витрины. Хозяин букв — носитель метатегов;
   здесь только место и кегль. */
.wt-classes {
	margin: var(--space-1) 0 0;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
}

/* ---------- поле поиска В ТЕЛЕ страницы ----------
   🔴 С 13.09.2026 РАЗМЕТКУ ПОЛЯ ДАЁТ КАПСУЛА, а не этот файл: форма приезжает из
   local/templates/welle/include/search-form.php и несёт классы главной (.search,
   .search-ico, .search-scope, .search-go, .search-hint). Их стили живут в styles.css
   шаблона сайта и доступны здесь без единой новой строки.

   Здесь остаётся ровно то, что относится к МЕСТУ формы на этой странице, а не к самой
   форме: отбивка от перечисления классов выше. У капсулы внешних отступов нет намеренно —
   иначе отбивка одного экрана поехала бы на два других.

   Правила .wt-vsearch* ниже больше не применяются ни к чему: на экране этих классов нет.
   Оставлены до слова владельца (действует запрет «ничего не удалять»); снять их —
   отдельная строка после приёмки формы. */
.wt-sections > .search {
	margin-top: var(--space-4);
}

.wt-vsearch {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: var(--space-4) 0 0;
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
}
.wt-vsearch__ico {
	display: grid;
	place-content: center;
	padding: 0 var(--space-3);
	color: var(--muted-foreground);
	flex: none;
}
.wt-vsearch input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 52px;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--text-base);
	color: var(--foreground);
	padding: 0;
}
.wt-vsearch input::placeholder { color: var(--muted-foreground); }
.wt-vsearch input:focus { outline: none; }
/* Фокус живёт на всей рамке поля, а не на самом input: у поля и кнопки одна рамка,
   и обводка только вокруг input рвала бы её. Так же сделано в форме. */
.wt-vsearch:focus-within {
	border-color: var(--ring);
	box-shadow: 0 0 0 2px color-mix(in oklab, var(--ring) 30%, transparent);
}
.wt-vsearch button {
	flex: none;
	min-height: 52px;
	padding: 0 var(--space-5);
	font: inherit;
	font-weight: 650;
	border: 0;
	cursor: pointer;
	background: var(--primary);
	color: var(--primary-foreground);
}

/* ---------- подпись под полем ----------
   120 знаков: что можно вводить. Отвечает на вопрос «что вводить» целиком —
   поэтому плейсхолдер её не пересказывает (правило носителя welle-copy). */
.wt-vs-hint {
	margin: var(--space-2) 0 0;
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
}

/* ---------- полоса условий ВИТРИНЫ ----------
   🔑 Это НЕ копия полосы раздела (.wt-sections__trust) и не должна ею стать: у витрины
   принята своя редакция — жирным весь блок, по центру, порядок Срок · Снабжение ·
   Оригинал · Минимум · Телефон (правка 07.09, помечена прямо на артборде формы).
   Полоса раздела остаётся как была: её форма принята 06.09 отдельно, и переделка
   принятого экрана попуткой запрещена. */
.wt-trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-4);
	margin: var(--space-4) 0 0;
	padding: var(--space-3) var(--space-4);
	background: var(--muted);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	font-weight: 650;
	color: var(--foreground);
	justify-content: center;
}
.wt-trust b { font-weight: inherit; color: var(--foreground); }
.wt-trust a { color: var(--foreground); font-weight: 650; }
.wt-trust-i {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1_5);
}
.wt-trust-i::before {
	content: "";
	width: .3rem;
	height: .3rem;
	border-radius: 50%;
	background: var(--muted-foreground);
	flex: none;
}
/* Точка — разделитель, а не маркер: у первого видимого пункта её нет. Второе правило
   нужно для узкого экрана, где первым видимым становится короткая редакция. */
.wt-trust-i:first-of-type::before { display: none; }
.wt-trust-i--short + .wt-trust-i::before { display: none; }
.wt-trust-i--short { display: none; }
@media (max-width: 789.98px) {
	.wt-trust-i--full { display: none; }
	.wt-trust-i--short { display: inline; }
}

/* ---------- Д14. СЛОТ 42 — ПУТЬ ВТОРОЙ ГРУППЫ КЛИЕНТОВ ----------
   Стоит после сетки плиток. Карточка на подложке --card с рамкой: она не спорит
   с плитками (та же поверхность), но и не теряется — её видит тот, кто дочитал сетку
   до конца и своего раздела не нашёл.

   🔴 ПРАВИЛА ПЕРЕНЕСЕНЫ ИЗ ЗАМОРОЖЕННОЙ ФОРМЫ ВИТРИНЫ как есть, свойство в свойство:
   Forma1440__2026-09-12_1617__sha256-44e2648d…, блок «Д14. ПУТЬ ВТОРОЙ ГРУППЫ»,
   строки 698–719. Ничего не добавлено и не улучшено.
   ⚠️ Состояний :hover и :focus-visible у этих двух ссылок форма не описывает — в статичном
   артборде состояний не видно вовсе. Сброса обводки на сайте нет (проверено: в шаблоне
   единственный `outline: none` — на поле поиска шапки), поэтому фокус с клавиатуры рисует
   браузер своей обводкой, и доступность не теряется. Расхождение с боевым близнецом
   на листинге, где эти два правила есть, названо находкой; вердикт — «после акта». */
.wt-help {
	margin-top: var(--space-8);
	padding: var(--space-5);
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}
.wt-help__t {
	margin: 0 0 var(--space-1);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: var(--leading-tight);
	color: var(--foreground);
}
.wt-help__p {
	margin: 0 0 var(--space-4);
	max-width: 68ch;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
}
.wt-help__list {
	margin: 0 0 var(--space-4);
	padding-left: var(--space-5);
	max-width: 68ch;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--foreground);
}
.wt-help__acts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
}
.wt-help__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--space-5);
	border-radius: var(--radius);
	background: var(--primary);
	color: var(--primary-foreground);
	font-size: var(--text-sm);
	font-weight: 650;
	text-decoration: none;
}
.wt-help__tel {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--card);
	color: var(--foreground);
	font-size: var(--text-sm);
	font-weight: 650;
	text-decoration: none;
}
.wt-help__note {
	margin: var(--space-3) 0 0;
	font-size: var(--text-xs);
	color: var(--muted-foreground);
	line-height: var(--leading-normal);
}

/* ============================================================================
 * 🔴 2026-09-26, АКТ ЯДРА ③.3б-1 — ЭКРАН 12, СТРАНИЦА НАПРАВЛЕНИЯ, ФОРМА РЕД. 2.
 *
 * Правила ПЕРЕНЕСЕНЫ из замороженной формы (`Stranica-napravleniya_red2__…d898d804…html`,
 * блок «ЭКРАН 12», строки 964–1023, и раскладка листинга К4 — `.wt-layout`, `.wt-side`,
 * `.wt-cat__bar`, `.wt-cat__count`), свойство в свойство. Ничего не добавлено и не улучшено.
 *
 * Что изменено при переносе и почему — только механика, не форма:
 *   · @container wtscreen → @media. В форме контейнер `wtscreen` — это ЭКРАН (демо-фрейм),
 *     на сайте экран — это вьюпорт; пороги 790 / 1100 / 600 взяты из формы как есть;
 *   · классы колонок `.wt-layout`/`.wt-side`/`.wt-cat` формы на сайте уже заняты рамкой
 *     (integration.css) и листингом — здесь те же правила под своими именами `.s12-layout`,
 *     `.s12-side`, `.s12-main`, `.s12-bar`, `.s12-count`, чтобы не задеть 36 листингов;
 *   · `.wt2-card` на сайте есть у главной (glavnaya.css) — правила плитки экрана 12
 *     привязаны к `.s12-grid`, чтобы не поменять плитку главной ни на пиксель;
 *   · плашки-заглушки формы (`.s12-ph`, `.s12-lead`, `.s12-tekst`) не переносятся: на их
 *     местах стоят слова, а текст под плитками (S7, S8) отвергнут и не печатается.
 * Ширина рамки — сайта (контейнер 1180 px), как у всех 36 листингов: форма нарисована
 * на полную ширину демо-фрейма, как и замороженный листинг 06.09, который в бою стоит
 * в той же рамке 1180.
 * ============================================================================ */
.s12-layout { display: block; margin-top: var(--space-5); }
.s12-side { margin-bottom: var(--space-4); align-self: start; }

/* список разделов — на месте фильтра К4 */
.s12-spisok > summary { display: none; }
.s12-spisok__ul { list-style: none; margin: 0; padding: 0 var(--space-2) 0 0; border-right: 1px solid var(--border); }
.s12-spisok__ul li { margin: 0; }
.s12-spisok__ul a { display: block; padding: var(--space-1_5) 0; font-size: var(--text-sm); line-height: 1.35; color: var(--foreground); text-decoration: none; }
.s12-spisok__ul a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* строка над плитками — .wt-cat__bar и .wt-cat__count листинга К4 + .s12-bar формы */
.s12-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--space-3); margin-bottom: var(--space-3); min-height: 2.25rem; }
.s12-count { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); }
.s12-count b { color: var(--foreground); font-weight: 700; }
.s12-vse { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--primary); text-decoration: none; font-weight: 600; }
.s12-str { font-size: 1.15em; line-height: 1; }

/* плитки — язык ред. 5; ряды ровняются по своему самому высокому имени, а не по всей сетке */
.s12-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.s12-grid > li { display: flex; }
.s12-grid .wt2-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-lg);
	background: var(--card); text-decoration: none; text-align: center; box-sizing: border-box; width: 100%; }
.s12-grid .wt2-card:hover { border-color: var(--primary); box-shadow: 0 1px 3px color-mix(in oklab, var(--foreground) 10%, transparent); }
.s12-grid .wt2-name { display: block; font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-tight); color: var(--foreground);
	text-wrap: balance; hyphens: auto; hyphenate-limit-chars: 16 8 8; overflow-wrap: break-word; }
.s12-card { padding: var(--space-8) var(--space-4) var(--space-6); justify-content: flex-start; }
.s12-foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; margin: 0 0 var(--space-4); }
.s12-foto--sx { position: relative; }
.s12-foto--sx .wt-sc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; padding: 8% 6%; box-sizing: border-box; color: var(--muted-foreground); }

/* «смотреть все» после плиток (правило 8) */
.s12-vse--niz { display: flex; justify-content: space-between; width: 100%; box-sizing: border-box; margin: var(--space-6) 0 0;
	padding: var(--space-4) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.s12-vse--niz:hover { border-color: var(--primary); }

/* кнопки строки на телефоне — как «Подбор по параметрам» К4 */
.s12-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; box-sizing: border-box;
	border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground);
	text-decoration: none; cursor: pointer; list-style: none; padding: 0 var(--space-3); }
.s12-btn::-webkit-details-marker { display: none; }
.s12-chev { width: .5em; height: .5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
details[open] > .s12-btn .s12-chev { transform: rotate(-135deg) translateY(-2px); }
.s12-vse-m { display: none; }

/* 1440: две колонки, как листинг К4 (264 px + зазор --space-8) */
@media (min-width: 790px) {
	.s12-layout { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
	.s12-side { position: sticky; top: var(--space-4); margin-bottom: 0; }
}

/* 375: список свёрнут под кнопкой, рядом «Все позиции»; в строке над плитками только счётчик */
@media (max-width: 789.98px) {
	.s12-side { position: relative; margin: 0 0 var(--space-3); }
	.s12-side > .s12-spisok > summary { display: flex; width: calc(50% - var(--space-1)); }
	.s12-side > .s12-vse-m { display: flex; position: absolute; top: 0; right: 0; width: calc(50% - var(--space-1)); color: var(--primary); }
	.s12-side .s12-spisok__ul { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
		margin-top: var(--space-2); padding: var(--space-1) var(--space-4); }
	.s12-side .s12-spisok__ul li + li { border-top: 1px solid var(--border); }
	.s12-side .s12-spisok__ul a { padding: var(--space-2_5) 0; min-height: 24px; }
	.s12-vse--verh { display: none; }
}
@media (max-width: 1100px) { .s12-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ============================================================================
 * 🔴 2026-09-26, АКТ ЯДРА ③.3б-2 — ВИТРИНА НАПРАВЛЕНИЙ, ФОРМА РЕД. 5.
 *
 * Правила ПЕРЕНЕСЕНЫ из замороженной формы (`Vitrina-napravleniy_red5__…742e5385…html`,
 * блоки «ПЛИТКА — из стилей главной ред. 5 знак в знак» и «ВИТРИНА НАПРАВЛЕНИЙ, ред. 5»),
 * свойство в свойство. Механика переноса та же, что у экрана 12:
 *   · @container wtscreen → @media, пороги 960 / 600 из формы;
 *   · правила плитки `.wt2-*` привязаны к `.vn-grid`: на /catalog/ стили главной
 *     (glavnaya.css) не грузятся, а на главной эти правила не должны её трогать;
 *   · плашки-заглушки формы (`.vn-h1 i`, `.vn-h2 i`, `.vn-obeshchanie`) не переносятся:
 *     на их местах стоят слова (H1 — welle-seo, V1 и V2 — welle-copy).
 * Пиктограмма — тот же рисунок, что на главной: цвет --primary, контур толще, осевые,
 * штриховка и невидимый контур скрыты стилем; сам рисунок не перерисован.
 * ============================================================================ */
.vn-grid .wt2-card { display: flex; flex-direction: column; border: 1px solid var(--border);
	border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4) var(--space-4);
	background: var(--card); text-decoration: none; text-align: center; }
.vn-grid .wt2-card:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--border)); }
.vn-grid .wt2-sc { display: block; width: 148px; height: 111px; margin: 0 auto var(--space-3); color: var(--foreground); }
.vn-grid .wt2-name { display: block; font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-tight);
	color: var(--foreground); }

.vn-h2 { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-lg); line-height: var(--leading-tight); }
.vn-blok { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); padding: var(--space-6); }
.vn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-5); margin: 0; }
.vn-grid .wt2-card { padding: var(--space-8) var(--space-4) var(--space-6); gap: 0; justify-content: flex-start; }
.vn-grid .wt2-sc { margin-bottom: var(--space-4); color: var(--primary); }
.vn-grid .wt2-sc g[stroke-width="1.15"] { stroke-width: 3.0; }
.vn-grid .wt2-sc g[stroke-width="0.55"]:not([stroke-dasharray]):not([clip-path]) { stroke-width: 1.5; }
.vn-grid .wt2-sc g[stroke-dasharray="9 2.2 1.6 2.2"], .vn-grid .wt2-sc g[clip-path], .vn-grid .wt2-sc g[stroke-dasharray="3.2 2.2"] { display: none; }
.vn-grid .wt2-name { text-wrap: balance; }
@media (max-width: 960px) { .vn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.vn-h2 { margin: var(--space-6) 0 var(--space-3); }
	.vn-blok { padding: var(--space-2); }
	.vn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
	.vn-grid .wt2-card { padding: var(--space-5) var(--space-1) var(--space-4); }
	.vn-grid .wt2-sc { width: 100%; max-width: 132px; height: auto; margin-bottom: var(--space-3); }
	.vn-grid .wt2-name { font-size: var(--text-sm); }
}
@media (max-width: 600px) {
	.s12-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
	.s12-card { padding: var(--space-5) var(--space-1) var(--space-4); }
	.s12-foto { margin-bottom: var(--space-3); }
	.s12-grid .wt2-name { font-size: var(--text-sm); }
	.s12-vse--niz { margin-top: var(--space-4); }
	.s12-bar { min-height: 0; margin-bottom: var(--space-3); }
}

/* End */


/* Start:/local/templates/welle/components/bitrix/catalog.section/.default/style.css?179170789151637*/
/* ============================================================================
 * Листинг раздела каталога — bitrix:catalog.section, шаблон сайта welle.
 * Порт принятого прототипа Design/prototypes/catalog-listing/index.html.
 *
 * Значения — ТОЛЬКО токены /local/templates/welle/css/tokens/ (ярусы 0→1).
 * Новых цветов и размеров не заводится; производные тона — через color-mix
 * поверх токенов (ярус 2 «лениво», см. design-system/README.md).
 *
 * АДАПТИВ — CONTAINER QUERIES (канон дизайн-системы от 2026-07-18): пороги
 * считаются от ширины СВОЕЙ колонки (.wt-cat), а не от вьюпорта. Прототип был
 * написан на media queries, и канон предписывал мигрировать «при вёрстке в
 * Битрикс» — это сделано здесь. Практический смысл: слева от контента живёт
 * колонка разделов (.wt-sidebar), поэтому вьюпорт и ширина сетки — разные числа;
 * при появлении умного фильтра колонка сузится ещё раз, а пороги переедут сами.
 * ============================================================================ */

.wt-cat {
	container-type: inline-size;
	container-name: wtcat;
	font-family: var(--font-sans);
	color: var(--foreground);
}

/* Заголовок врезки-подборки («Популярные в разделе») рисует шаблон родительского
   комплексного компонента, а показывает его наш script.js. Своей типографики у
   класса не осталось — штатный style.css компонента мы заменили, — поэтому она
   описана здесь, рядом с блоком, к которому заголовок относится. */
.catalog-block-header {
	margin: var(--space-8) 0 var(--space-4);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--foreground);
	letter-spacing: var(--tracking-wide);
}

/* ---------- панель над листингом: счётчик + сортировка ----------
   Прототип catalog-listing, блок .results (стр. 463): счётчик слева, «Сортировать»
   справа, перенос на узком контейнере. */
.wt-cat__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.wt-cat__count {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--muted-foreground);
}
.wt-cat__count b {
	color: var(--foreground);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.wt-cat__sort {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
}

/* Подпись селектора — тег <label>, а значит цель протечки Bootstrap 3.3.7
   (`label{font-weight:bold; margin-bottom:5px}`): его подключают штатные шаблоны
   bitrix:catalog на всех страницах /catalog/. Эталон веса — прототип design
   catalog-listing/index.html, стр. 465: вес там не задан вовсе (наследуется 400),
   нижнего отступа нет. Гасим адресно по своему классу: (0,1,0) сильнее (0,0,1),
   !important не нужен. Общий сброс label не делаем — им пользуется чужая вёрстка. */
.wt-cat__sort-cap {
	font-size: var(--text-sm);
	color: var(--muted-foreground);
	font-weight: 400;
	margin-bottom: 0;
}

.wt-cat__sort-select {
	min-height: 44px;   /* 06.09: тап-цель эталона, было 40 */
	max-width: 100%;
	padding: 0 var(--space-3);
	background: var(--card);
	color: var(--foreground);
	border: 1px solid var(--input);
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--text-sm);
	cursor: pointer;
}
.wt-cat__sort-select:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

/* Кнопка нужна без JS: форма GET сама себя не отправит по смене значения.
   С JS её убирает script.js (класс на форме), как «Показать» в фильтре. */
.wt-cat__sort-go {
	min-height: 40px;
	padding: 0 var(--space-3);
	background: var(--card);
	color: var(--foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
}
.wt-cat__sort-go:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}
/* 🔴 06.09: правило `.wt-cat__sort--js .wt-cat__sort-go { display: none }` снято.
   Кнопка «ОК» переехала в <noscript> (приём самого эталона), то есть при включённом JS
   её нет в разметке вовсе — прятать стало нечего, а мёртвых дорожек не оставляем.
   Класс `--js` script.js по-прежнему вешает: он остаётся признаком «страница живая». */

/* ---------- чипы активных фильтров ----------
   Прототип catalog-listing, блок .chips (стр. 476). Отличие от прототипа названо
   в отчёте: там чип — <span> с вложенной кнопкой, здесь весь чип целиком ссылка.
   Причина — снятие фасета это переход по адресу, а не действие на месте; одна цель
   вместо двух надёжнее для касания и проще для скринридера. */
.wt-cat__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.wt-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;   /* 06.09: тап-цель эталона, было 32 */
	padding: 0 var(--space-2) 0 var(--space-3);
	background: var(--secondary);
	color: var(--secondary-foreground);
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: var(--text-xs);
	font-weight: 600;
	text-decoration: none;
}
.wt-chip:hover {
	border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
	color: var(--secondary-foreground);
}
.wt-chip:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

.wt-chip__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.35em;
	height: 1.35em;
	border-radius: 50%;
	font-size: 1.15em;
	line-height: 1;
}
.wt-chip:hover .wt-chip__x {
	background: color-mix(in oklch, var(--foreground) 12%, transparent);
}

.wt-chip-reset {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-2);
	color: var(--primary);
	font-size: var(--text-xs);
	font-weight: 650;
	text-decoration: underline;
}
.wt-chip-reset:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ВОЛНА А, 2026-09-07 — СЛОТЫ 32 и 33: ЛИПКАЯ ПАНЕЛЬ Д8 И ЛИСТ ПОДБОРА.
   Значения взяты из эталона 06.09 (sha256 7f405070…), не назначены заново.

   ⚠️ ОБЪЯВЛЕННОЕ ОТСТУПЛЕНИЕ ОТ ПОСТАНОВКИ. В брифе редакции 2 стоит «не трогаем
   style.css (закрыт 81e67b0)». Основание там названо прямо — «закрыт», то есть
   работа ПРЕДЫДУЩЕЙ части волны в нём доделана. Слоты 32 и 33 в ту часть
   не входили и в этом файле следа не оставили: правил .wt-mbar и .wt-sheet здесь
   не было ни одного (проверено грепом до правки). Без них разметка панели
   и листа существует в html и не существует на экране — то есть слот уехал бы
   ПОЛОВИНОЙ, а половина формы хуже, чем её отсутствие (то же основание, по
   которому Карта экранов держит парой шаблон и стиль плитки, слот 35).
   Ничего из написанного 81e67b0 не тронуто: блок только дописан в конец секции.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ---------- СЛОТ 32: липкая панель «Подбор + сортировка», 44 px ----------
   Прилипает к верху окна: подбор и порядок остаются под рукой на любой позиции
   списка. Полупрозрачная подложка с размытием — из эталона: под панелью должно
   быть видно, что список продолжает идти, иначе она читается как конец страницы. */
.wt-mbar {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	gap: var(--space-2);
	align-items: center;
	padding: var(--space-1_5) 0;
	margin-bottom: var(--space-2_5);
	background: color-mix(in oklab, var(--background) 92%, transparent);
	/* Префикс обязателен и не декоративен: без -webkit- Safari и Safari на iOS
	   размытия не делают вовсе, и полупрозрачная подложка превращается в мутную
	   полосу, сквозь которую список читается. А слот 32 — элемент ИМЕННО узких
	   ширин: пять рамок эталона (320 · 375 · 390 · 430) — это iPhone. */
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--border);
}
.wt-mbar__filter {
	flex: 1 1 auto;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: 0 var(--space-3);
	background: var(--card);
	color: var(--foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 650;
	cursor: pointer;
}
.wt-mbar__filter:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}
/* Счётчик применённых фильтров: сколько подбор уже сузил, не открывая лист. */
.wt-mbar__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5em;
	height: 1.5em;
	padding: 0 .35em;
	background: var(--primary);
	color: var(--primary-foreground);
	border-radius: 999px;
	font-size: var(--text-xs);
	font-weight: 700;
}
/* Переключатель порядка внутри панели: тот же элемент, что в строке результата,
   но подпись «Сортировать:» тут не помещается и снимается — селект называет себя
   выбранным значением, а для скринридера подпись остаётся в разметке. */
.wt-mbar .wt-cat__sort {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 52%;
	margin: 0;
}
.wt-mbar .wt-cat__sort-cap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.wt-mbar .wt-cat__sort-select {
	width: 100%;
	min-width: 0;
	min-height: 44px;
}

/* ---------- СЛОТ 33: лист подбора поверх выдачи ----------
   Лист, а не «шторка сбоку»: подбор — длинный список, и палец обязан доставать
   до его подвала. Подвал липкий, поэтому «Показать N» видно, не долистывая. */
.wt-sheet {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	background: var(--card);
	color: var(--foreground);
}
.wt-sheet[hidden] { display: none; }
.wt-sheet__head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border-bottom: 1px solid var(--border);
}
.wt-sheet__head h2 {
	margin: 0;
	font-size: var(--text-base);
	font-weight: 700;
}
.wt-sheet__x {
	flex: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-content: center;
	border: none;
	background: none;
	color: var(--muted-foreground);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	border-radius: var(--radius);
}
.wt-sheet__x:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}
/* Прокручивается только тело: шапка и подвал стоят на месте. */
.wt-sheet__body {
	flex: 1 1 auto;
	overflow-y: auto;
	/* overscroll-behavior вместо снятого -webkit-overflow-scrolling: тот устарел
	   (инерция в iOS с 13-й версии штатная), а нужен здесь другой эффект —
	   чтобы прокрутка, доехавшая до конца фасетов, не «пробивала» в страницу
	   под листом и не уносила выдачу. */
	overscroll-behavior: contain;
	padding: 0 var(--space-4);
}
/* Панель подбора приезжает сюда живым узлом — своя рамка и поля ей тут не нужны,
   рамка листа их уже дала. */
.wt-sheet__body .wt-filter,
.wt-sheet__body .wt-filter__panel {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
}
.wt-sheet__body .wt-filter__summary { display: none; }
.wt-sheet__foot {
	flex: none;
	display: flex;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: var(--card);
	border-top: 1px solid var(--border);
}
.wt-sheet__apply {
	flex: 1 1 auto;
	min-height: 48px;
	border: none;
	border-radius: var(--radius);
	background: var(--primary);
	color: var(--primary-foreground);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 700;
	cursor: pointer;
}
.wt-sheet__clear {
	min-height: 48px;
	padding: 0 var(--space-4);
	border-radius: var(--radius);
	background: var(--card);
	color: var(--foreground);
	border: 1px solid var(--border);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 650;
	cursor: pointer;
}
.wt-sheet__apply:focus-visible,
.wt-sheet__clear:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}
/* Пока лист открыт, страница под ним не прокручивается: иначе палец листает
   выдачу вместо фасетов и подбор «не слушается». Класс вешает script.js. */
.wt-sheet-lock,
.wt-sheet-lock body {
	overflow: hidden;
}

/* Порог 790 px — тот же, на котором в принятой форме уходит колонка подбора.
   @media, а не @container, по той же причине, что у сетки ниже: это ширина
   ЭКРАНА, а не колонки. */
@media (min-width: 790px) {
	.wt-mbar { display: none; }
	/* Лист — мобильная форма подбора. На широкой ширине панель стоит колонкой,
	   и лист не должен всплыть даже случайно (например, из адреса с #). */
	.wt-sheet { display: none; }
}

/* 🔴 07.09, остаток ворот листинга (класс Ж). Ниже 790 px у принятой формы ДВА отличия
   от широкой (эталон, фреймы 320 · 375 · 390 · 430), и до этой правки их держал только
   комментарий в template.php («вторую снимает CSS по той же ширине 790 px»), а правила
   не было. Замер стенда 07.09 на 390: «Подбор по параметрам» видно 2 раза, «Сортировать:»
   с четырьмя порядками — 2 раза; эталон даёт по одному.
   · Панели подбора НАД выдачей нет — на узкой ширине подбор живёт в листе (слот 33),
     панель переезжает туда живым узлом. Прячем её ТОЛЬКО когда лист привязан (класс
     .wt-sheet-ready ставит script.js): без JS панель остаётся в потоке и работает
     штатной формой GET — этот путь объявлен в шаблоне и не теряется.
   · Переключатель порядка стоит ТОЛЬКО в липкой панели Д8 (слот 32); в строке
     результата (.wt-cat__bar) на узкой остаётся один счётчик — так во фрейме 430 эталона.
   Порог — дополнение к блоку выше: 789.98, а не 790, чтобы дробная ширина не попала
   в оба правила разом. */
@media (max-width: 789.98px) {
	.wt-sheet-ready .wt-filter { display: none; }
	.wt-cat__bar .wt-cat__sort { display: none; }
}

/* ---------- пустой результат подбора ----------
   06.09: было — серый абзац в пустоте; стало — очерченный блок по центру с двумя
   выходами (эталон, раздел 3). Пунктирная рамка говорит «здесь ничего не нашлось»
   раньше, чем прочитан текст. */
.wt-cat__empty {
	margin: 0;
	padding: var(--space-6) var(--space-5);
	text-align: center;
	background: var(--card);
	border: 1px dashed var(--border);
	border-radius: var(--radius-lg);
	font-size: var(--text-sm);
	color: var(--muted-foreground);
}

.wt-cat__empty-title {
	margin: 0 0 var(--space-2);
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--foreground);
}

.wt-cat__empty-hint {
	margin: 0 auto var(--space-4);
	max-width: 56ch;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
}

/* Два выхода в ряд: сброс фильтра и путь Д14. Один из них всегда уводит к живому
   ответу — тупика у пустой выдачи не остаётся. */
.wt-cat__empty-acts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
}

.wt-cat__empty-reset {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--foreground);
	font-size: var(--text-sm);
	font-weight: 650;
	text-decoration: none;
}

.wt-cat__empty-reset:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

/* ---------- сетка карточек ----------
 * ═══════════════════════════════════════════════════════════════════════════════
 * 🔴 06.09, ВОЛНА А: ПОРОГИ СЕТКИ ПЕРЕВЕДЕНЫ НА ШИРИНУ ЭКРАНА. ЭТО РЕШЕНИЕ
 *    С ОСНОВАНИЕМ, А НЕ ОТКАТ КАНОНА — ЧИТАТЬ ЦЕЛИКОМ, ПРЕЖДЕ ЧЕМ ВЕРНУТЬ НАЗАД.
 * ═══════════════════════════════════════════════════════════════════════════════
 * Принятая форма (эталон 06.09) считает колонки от ширины ЭКРАНА: 560 px → две,
 * 1120 px → три (@container wtscreen, где wtscreen — сам демо-фрейм, то есть экран).
 * До этой правки бой считал их от ширины СВОЕЙ колонки .wt-cat (пороги 420 / 720).
 *
 * ПОЧЕМУ CONTAINER QUERY ЗДЕСЬ ФИЗИЧЕСКИ НЕ ВЫРАЖАЕТ ПРИНЯТУЮ ФОРМУ. Замер живого
 * стенда (headless Chrome, Design/scripts/cdp_shot.mjs, 06.09), ширина .wt-cat:
 *      экран  320 →  280      экран  560 →  520      экран  790 →  454
 *      экран  375 →  335      экран  720 →  680      экран 1120 →  784
 *      экран  430 →  390                             экран 1440 →  844
 * На 790 px колонка СУЖАЕТСЯ с 680 до 454: там встаёт боковая панель подбора 264 px.
 * Значит ширина колонки — НЕ монотонная функция ширины экрана, и одно и то же
 * значение 454 обязано означать разное: на экране 790 — две колонки (так в эталоне),
 * на экране около 500 — одну. Один порог по .wt-cat этого различить не может ни при
 * каком числе. Проверено перебором: 520 ломает 790-й экран, 420 ломает диапазон
 * 460–560. Media query по вьюпорту воспроизводит эталон точно на всех девяти замерах.
 *
 * ГРАНИЦА РЕШЕНИЯ. Канон дизайн-системы (README 18.07) остаётся в силе для случаев,
 * где такой коллизии нет, — и в этом же файле container query продолжает жить.
 * Здесь принятая форма старше канона: «дизайн в бою = утверждённый макет 1:1».
 * Уйдёт колонка подбора из потока (волна Б, Д10) — коллизия исчезнет, и пороги можно
 * будет вернуть на контейнер; до тех пор перевод обратно молча ломает форму.
 */
.wt-cat__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 560px) {
	.wt-cat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
	.wt-cat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- карточка товара ---------- */
.wt-cat-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2_5);
	min-width: 0;
	padding: var(--space-3_5);
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	transition: border-color .12s;
}
.wt-cat-card:hover {
	border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
}

/* 06.09, волна А: слот приведён к эталону — блочный с position: relative. Содержимое
   (заглушка, размерный знак) кладётся в него абсолютно и потому не может изменить
   геометрию слота: «геометрия слота и его место не меняются, меняется только то,
   чем он заполнен» (раздел 5 эталона). Прежний flex-центр держал ровно один случай
   из трёх. */
.wt-cat-card__media {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--muted);
	border-radius: var(--radius);
	color: var(--muted-foreground);
	text-decoration: none;
}
.wt-cat-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* Слот с НАСТОЯЩЕЙ фотографией: подложка белая в ОБЕИХ темах и рамка — то же решение
   и то же обоснование, что у галереи карточки (catalog.element/.default/style.css,
   .gallery-main): у наших фотографий и линейной графики белый фон.
   Замер 09.08: фото 560×630 в слоте 4:3 занимает 158 из 237 px ширины, 79 px (33 %) —
   пустое поле. На сером --muted это поле видно как рамка, и плитка читается как
   «фотография обрезана справа и слева», хотя object-fit: contain отработал штатно
   и не обрезано ничего. На белом поле не видно вовсе — при любой пропорции файла,
   то есть решение переживёт замену временного кропа на чистые снимки.
   Серый --muted остаётся у слота БЕЗ фотографии: там он подложка заглушки, а не поле
   вокруг изделия. Рамка нужна, чтобы белый слот не сливался с белой плиткой: без неё
   медиа-область теряет границу (проверено глазом, вариант отклонён). */
/* 06.09: литерал #ffffff заменён токеном --white — тем самым, которым эталон и написан.
   Значение то же (oklch(1 0 0)) и так же тема-инвариантно, но литералов в компонентном
   CSS у нас не заводится. */
.wt-cat-card__media--photo {
	background: var(--white);
	border: 1px solid var(--border);
}
/* Текст заглушки «фото / чертёж», когда ни фотографии, ни DN нет (случай ③ эталона). */
.wt-cat-card__media-stub {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}

/* ---------- размерный знак (случай ② медиа-слота) ----------
   Фотографии нет, но DN известен: слот показывает типоразмер, а не два серых слова.
   Число внутри знака рисует SVG из template.php; здесь только место и подпись. */
.wt-size {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: 1fr auto;
	align-items: center;
	justify-items: center;
	padding: var(--space-2);
}
.wt-size svg {
	width: 100%;
	height: auto;
	color: var(--muted-foreground);
}
.wt-size__cap {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.04em;
	color: var(--muted-foreground);
}

/* ---------- артикул: последний ярус плитки ----------
   🔴 06.09: класс .wt-cat-card__meta удалён вместе со строкой «артикул + бейдж» над
   именем. В принятой форме артикул стоит ПОСЛЕДНИМ и один в строке, бейдж переехал
   к кнопке. Мёртвых дорожек не оставляем: правила снятого ряда здесь больше нет. */
.wt-cat-card__sku {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}
/* Своего артикула у позиции нет — форма говорит это словами, а не пустотой. */
.wt-cat-card__sku--none {
	font-family: var(--font-sans);
	font-style: italic;
}

/* ---------------------------------------------------------------------------
 * БЕЙДЖ СОСТОЯНИЯ НАЛИЧИЯ.
 *
 * Перенесён один в один из Design/prototypes/catalog-list/badge.css — того самого
 * куска, который переиспользуют все утверждённые прототипы витрины (листинг, PDP,
 * раздел-группа). Формула бейджа не «сочиняется заново под Битрикс»: значения,
 * проценты и пространство смешения взяты как есть, поэтому бой и макет совпадают
 * по цвету без пересчёта.
 *
 * Смешение — in oklab, НЕ in oklch. Это не стилистика: oklch полярное, тон в нём
 * интерполируется по дуге, и нейтральные токены с явным тоном (--white: oklch(1 0 0))
 * утаскивали подложку «В наличии» в розовый (замер 31.07: тон 0 вместо 131).
 * Проверено первоисточником — MDN, color_value/color-mix.
 *
 * Сегодня в разметку попадает только --out («Срок уточняется»): складских данных нет.
 * Два других состояния держатся здесь намеренно — когда данные придут, меняется ветка
 * в template.php, а не стили.
 * ------------------------------------------------------------------------- */
/* 🔴 30.08: БЕЙДЖ ПЕРЕНОСИТСЯ ПО СЛОВАМ. Решение формы — design 30.08
   (Design/brain/UX/2026-08-30 — Предел бейджа состояния — не число знаков, а самое
   длинное слово). Повод: принятые тексты состояний выросли с 12 знаков до 22
   («До 10 дней» → «До 60 календарных дней»), и бейдж в одну строку отбирал место
   у артикула, который делит с ним строку `.wt-cat-card__meta`.

   СНЯТО ТРИ ДЕКЛАРАЦИИ, А НЕ ОДНА, И ЭТО НЕ ПЕРЕСТРАХОВКА. Замер на живом стенде:
   `white-space: normal` в одиночку не меняет РОВНО НИЧЕГО (артикул 58,8 px до правки и
   58,8 px после). Держат перенос ещё две распорки: `width: fit-content` приравнивает
   ширину к max-content, `flex: none` запрещает сжатие flex-элемента. Пока они на месте,
   перенос физически невозможен, сколько его ни разрешай.
   Ровно ту же грабля design поймал в тот же день в соседнем носителе — таблице складов
   карточки (catalog.element/.default/style.css, комментарий у @container wtpdp).

   ЗАМЕР (headless Chrome, scripts/welle-badge-measure.js, «До 60 календарных дней»),
   минимальная ширина артикула на плитке:
     320 px : 58,8 -> 74,0
     375 px : 81,6 -> 81,6   (места хватало и раньше)
     768 px : 10,8 -> 57,8   <- самая узкая точка, а не 320: было 11 строк по знаку
    1200 px : 49,4 -> 70,8
   Вылета за край нет ни на одной ширине ни до, ни после.

   Второй экземпляр этих же правил (catalog.element/.default/style.css) НАМЕРЕННО не
   тронут: в карточке вылета нет ни на одной ширине, CSS листинга туда не грузится,
   а та же правка на 768 px делает бейдж в таблице складов двухстрочным без повода. */
/* 🔴 06.09, ВОЛНА А: ГЕОМЕТРИЯ БЕЙДЖА ВЕРНУЛАСЬ К ЭТАЛОНУ, И ЭТО НЕ ОТКАТ ПРАВКИ 30.08,
   А СНЯТИЕ ЕЁ ПРЕДПОСЫЛКИ. Правка 30.08 (перенос по словам, width: auto, flex: 0 1 auto,
   align-items: flex-start) лечила одно: бейдж делил строку `.wt-cat-card__meta` с артикулом
   и отбирал у него место — замер тогда дал 10,8 px артикула на 768. В принятой форме этой
   строки НЕТ ВОВСЕ: бейдж стоит один в своём ряду над ценой, артикул уехал в подвал плитки.
   Делить стало нечего — значит и распорки лечить нечего. Держать их дальше значило бы
   оставить лекарство от болезни, которой больше нет, и разойтись с эталоном.
   Если строка «артикул + бейдж» когда-нибудь вернётся, вместе с ней возвращаются и три
   декларации 30.08 — они записаны в git-истории этого файла. */
.wt-stock-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	width: fit-content;
	flex: none;
	padding: 0.22rem 0.55rem;
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: normal;
}

/* точка-индикатор слева — currentColor, единый приём со всеми статусами витрины. */
.wt-stock-badge::before {
	content: "";
	flex: none;
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: currentColor;
}

.wt-stock-badge--in-stock {
	background: color-mix(in oklab, var(--success) 13%, var(--background));
	color: color-mix(in oklab, var(--success) 80%, var(--foreground));
}

/* ─────────────────────────────────────────────────────────────────────────────────────
   Д5 — РАЗЛИЧИТЕЛЬ ДВУХ СОСТОЯНИЙ ПОСТАВКИ (волна А, 06.09).
   До этой правки оба состояния несли один класс `--on-order` и выглядели одинаково —
   2012 плиток из 2012. Разница между ними шестикратная (10 рабочих дней против
   60 календарных), и на витрине у неё не было ни одного визуального признака.
   Теперь у каждого свой: ближний срок — тёплый акцент, дальний — нейтральный.
   Имена классов взяты из эталона; печатает их шаблон, собирая из кода состояния. */
.wt-stock-badge--days-10 {
	background: color-mix(in oklab, var(--warning) 18%, var(--background));
	color: var(--warning-foreground);
}

.wt-stock-badge--days-60 {
	background: color-mix(in oklab, var(--muted-foreground) 12%, var(--background));
	color: var(--muted-foreground);
}

/* Остаётся для карточки товара и для запасного пути шаблона: там модификатор
   по-прежнему приходит из WelleSupply::badgeMod() и равен `on-order`. */
.wt-stock-badge--on-order {
	background: color-mix(in oklab, var(--warning) 18%, var(--background));
	color: var(--warning-foreground);
}

.wt-stock-badge--out {
	background: color-mix(in oklab, var(--muted-foreground) 12%, var(--background));
	color: var(--muted-foreground);
}

/* Тёмная тема: --warning-foreground/--success-foreground рассчитаны на текст ПО заливке,
   а бейдж кладёт их на тонированную подложку — контраст падал до 1,03:1. Правка принята
   в прототипе 2026-07-18 и переносится вместе с ним.
   10.08.2026: тема включается системной настройкой пользователя, а не классом .dark
   (решение владельца, переключателя нет) — см. css/tokens/semantic.css.
   🔴 ЭТОТ БЛОК ОБЯЗАН ОСТАВАТЬСЯ НИЖЕ базовых правил бейджа. Раньше `.dark …` перебивал
   базовое правило по СПЕЦИФИЧНОСТИ; без класса специфичность одинаковая, и переопределение
   держится ТОЛЬКО порядком в файле. Перенос блока выше — молчаливая потеря правки. */
@media screen and (prefers-color-scheme: dark) {
	.wt-stock-badge--days-10,
	.wt-stock-badge--on-order {
		color: color-mix(in oklab, var(--warning) 80%, var(--foreground));
	}

	.wt-stock-badge--days-60,
	.wt-stock-badge--out {
		color: color-mix(in oklab, var(--muted-foreground) 70%, var(--foreground));
	}
}

/* Ярус 1 — имя. Самый тяжёлый текст плитки: 16 px / 700 (было 14 px / 650).
   Вес назначен эталоном не для красоты — имя опознаёт деталь и потому стоит первым
   и читается первым. */
.wt-cat-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: var(--leading-tight);
	color: var(--card-foreground);
}
.wt-cat-card__title a {
	color: inherit;
	text-decoration: none;
}
.wt-cat-card__title a:hover { text-decoration: underline; }
.wt-cat-card__title a:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

/* ---------- ярус 2: различители ----------
   🔴 06.09: носитель яруса — ПОДЛОЖКА, а не кегль. Было: серая строка «Имя свойства
   значение» под пунктирной чертой, одинаковая по весу с прочей мелочью плитки.
   Стало: отдельные фишки на подложке --secondary, каждая читается как самостоятельный
   различитель. Подпись стоит ровно у одного — DN, остальные опознаются сами. */
.wt-cat-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1_5);
	margin: 0;
}
.wt-spec {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3em;
	padding: 0.15rem 0.45rem;
	border-radius: var(--radius-sm);
	background: var(--secondary);
	color: var(--secondary-foreground);
	font-size: 0.78rem;
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}
.wt-spec i {
	font-style: normal;
	font-size: 0.92em;
	color: var(--muted-foreground);
}
.wt-spec b {
	font-weight: 700;
	color: var(--foreground);
}
/* Ноль различителей: фишки нет, есть честная строка. Пустого места форма не оставляет. */
.wt-spec--none {
	padding-left: 0;
	background: none;
	color: var(--muted-foreground);
	font-style: italic;
}

/* ---------- подвал плитки: состояние → цена и действие ----------
   06.09: внутри подвала теперь два уровня. Бейдж состояния стоит отдельной строкой
   над рядом «цена + кнопка» — срок обязан читаться там, где человек нажимает.
   Кнопка перестала быть во всю ширину: она делит ряд с ценой, как в эталоне. */
.wt-cat-card__buy {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-3);
	border-top: 1px solid var(--border);
}

.wt-cat-card__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2_5);
}

.wt-cat-card__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1_5);
	margin: 0;
}
.wt-cat-card__price {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--foreground);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
.wt-cat-card__price-base {
	font-size: var(--text-xs);
	color: var(--muted-foreground);
}
/* «Цена по запросу» занимает место цены, значит и вес несёт её — иначе ряд читается
   как плитка без цены вовсе. */
.wt-cat-card__price-ask {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--muted-foreground);
}

.wt-cat-card__cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 var(--space-4);
	background: var(--primary);
	color: var(--primary-foreground);
	border: 1px solid var(--primary);
	border-radius: var(--radius);
	font-size: var(--text-sm);
	font-weight: 650;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
/* Кнопка у позиции без цены: действие то же, но обещание слабее — обводка вместо заливки. */
.wt-cat-card__cart--ask {
	background: var(--card);
	color: var(--primary);
	border-color: var(--primary);
}
.wt-cat-card__cart:hover {
	background: color-mix(in oklch, var(--primary) 88%, black);
	border-color: color-mix(in oklch, var(--primary) 88%, black);
	color: var(--primary-foreground);
}
.wt-cat-card__cart:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}
.wt-cat-card__cart.is-done {
	background: var(--success);
	border-color: var(--success);
	color: var(--success-foreground);
}
.wt-cat-card__cart--off {
	background: var(--muted);
	border-color: var(--border);
	color: var(--muted-foreground);
	cursor: not-allowed;
}

/* ---------- пагинация ---------- */
.wt-pager {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-1);
	margin-top: var(--space-8);
}
/* 06.09: 44 px вместо 40 — размер тап-цели эталона, единый со всеми действиями формы
   (кнопка «В корзину», чипы, поля подбора). */
.wt-pager a,
.wt-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--space-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: var(--text-sm);
	color: var(--foreground);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}
.wt-pager a:hover {
	border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
	color: var(--primary);
}
.wt-pager a:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}
.wt-pager .is-current {
	background: var(--primary);
	border-color: var(--primary);
	color: var(--primary-foreground);
	font-weight: 700;
}
.wt-pager .is-muted {
	border-color: transparent;
	color: var(--muted-foreground);
}
/* 🆕 01.10.2026 (шаг 11а), слот 41 — поправка пагинации формы К4-нерж (397ce187…, слово владельца 29.09 «если можешь
   подправить, подправь, пожалуйста.»), все разделы с листингом. Колонка выдачи уже 540 px (контейнер wtcat) — узкий ряд:
   первая · текущая · последняя и соседи текущей, целей касания не больше пяти, каждая 44 × 44. Многоточие — не цель
   (aria-hidden, не ссылка): на узкой без полей. Широкий ряд не меняется. Разметку рядов печатает
   system.pagenavigation/welle/template.php; номера без классов (до 3 страниц) показываются как прежде.
   Три правила — дословно из формы (машина `сборка.py` К4-нерж, CSS_PAGER_NARROW). */
.wt-pager .is-narrow { display: none; }
@container wtcat (width < 540px) {
  .wt-pager .is-wide { display: none; }
  .wt-pager .is-narrow { display: inline-flex; }
  .wt-pager .is-muted { min-width: 0; padding: 0; }
}

/* ---------- Д14: путь второй группы клиентов ----------
   Стоит после пагинации, внутри колонки выдачи. Карточка на подложке --card с рамкой:
   она не спорит с плитками (та же поверхность), но и не теряется — её видит тот, кто
   дочитал выдачу до конца и не нашёл нужного. */
.wt-help {
	margin-top: var(--space-8);
	padding: var(--space-5);
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}
.wt-help__t {
	margin: 0 0 var(--space-1);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: var(--leading-tight);
	color: var(--foreground);
}
.wt-help__p {
	margin: 0 0 var(--space-4);
	max-width: 68ch;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
}
.wt-help__list {
	margin: 0 0 var(--space-4);
	padding-left: var(--space-5);
	max-width: 68ch;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--foreground);
}
.wt-help__acts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}
.wt-help__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--space-5);
	background: var(--primary);
	color: var(--primary-foreground);
	border: 1px solid var(--primary);
	border-radius: var(--radius);
	font-size: var(--text-sm);
	font-weight: 650;
	text-decoration: none;
}
.wt-help__btn:hover {
	background: color-mix(in oklch, var(--primary) 88%, black);
	border-color: color-mix(in oklch, var(--primary) 88%, black);
	color: var(--primary-foreground);
}
.wt-help__tel {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-4);
	background: var(--card);
	color: var(--foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-size: var(--text-sm);
	font-weight: 650;
	text-decoration: none;
}
.wt-help__note {
	margin: var(--space-3) 0 0;
	font-size: var(--text-xs);
	line-height: var(--leading-normal);
	color: var(--muted-foreground);
}
.wt-help__btn:focus-visible,
.wt-help__tel:focus-visible {
	outline: 2px solid var(--ring);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * 🔴 27.09.2026, К9 шаг 6Б (ф3) — ТЕКСТЫ РАЗДЕЛА, МЕСТА Н-1 · Н-2 ФОРМЫ К4.
 * Четыре правила перенесены из замороженного листинга К4 (…Listing-podshipnikov__2026-09-24_2203__
 * sha256-d569dc05…dc.html, блок «ИЗДЕЛИЕ: новые правила формы жанра — только под новый класс .wt-about»)
 * без правки значений. Класс .wt-about печатается только при непустых текстах раздела — на 36 разделах
 * арматуры его нет (справка К4, §3: «на чужих разделах этого класса нет»).
 * ------------------------------------------------------------------------- */
.wt-about { margin-top: var(--space-8); max-width: 78ch; }
.wt-about h2 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-lg); font-weight: 700;
	line-height: var(--leading-tight); color: var(--foreground); }
.wt-about h3 { margin: var(--space-4) 0 var(--space-1); font-size: var(--text-base); font-weight: 700;
	line-height: var(--leading-tight); color: var(--foreground); }
.wt-about p { margin: 0 0 var(--space-3); font-size: var(--text-sm); line-height: var(--leading-normal);
	color: var(--foreground); }

/* ---------------------------------------------------------------------------
 * 🆕 10.10.2026, ядро 43, шаг 12 (К9) — №351 ФОРМЫ К4-ядро: СПИСОК СОРТИРОВКИ НА КОЛОНКЕ УЖЕ 320 px — 60 % И НЕ СЖИМАЕТСЯ.
 * Перенесено из замороженного листинга К4-ядро (…Listing-podshipnikov-yadro__2026-10-08_2154__sha256-eacb2009…dc.html, блок
 * изделия «№351»): `@container wtcat (width < 320px) { .wt-mbar select { flex: 0 0 60%; max-width: 60%; } }`. В бою список
 * сортировки панели обёрнут в .wt-cat__sort (его ширину держит правило «.wt-mbar .wt-cat__sort … max-width: 52%» выше) —
 * поэтому правило формы встаёт на обёртку, как вся панель при порте. Пункт «по названию (А→Я)» на 320 больше не обрезается.
 * 🔴 ОБЛАСТЬ: паспорт К4-ядро — «все листинги подшипников»; 36 разделов арматуры «эта редакция не меняет». Класс wt-cat--brg
 *    печатает template.php только у страниц с плитками жанра «подшипник». На колонке от 320 px правило не действует.
 * ------------------------------------------------------------------------- */
/* 🆕 11.10.2026 (ядро 43, шаг 14-тер, заход А) — Р9 / находка №351: «по названию (А→Я)» на 320 обрезался, хотя список уже
 * 60 % (замер стенда = боя: колонка 280 px, список 168 px — как в рамке формы, 171,6 из 286). Причина не в ширине, а в полях:
 * у списка боя `.wt-cat__sort-select { padding: 0 var(--space-3) }` (12 px), у списка формы `.wt-mbar select { … padding: 0
 * var(--space-2) … }` (8 px). С полями формы текст виден целиком (снимки 11.10, `r9-proba/`). Правило формы о ширине на select
 * не переносится: внутри обёртки .wt-cat__sort оно давало список 84,8 px. Область та же — листинги подшипников, колонка уже 320. */
@container wtcat (width < 320px) {
	.wt-cat--brg .wt-mbar .wt-cat__sort { flex: 0 0 60%; max-width: 60%; }
	.wt-cat--brg .wt-mbar .wt-cat__sort-select { padding: 0 var(--space-2); }
}

/* End */
/* /bitrix/components/bitrix/catalog/templates/.default/style.min.css?1783353538959 */
/* /local/templates/welle/components/bitrix/catalog.smart.filter/.default/style.css?178876603015609 */
/* /local/templates/welle/components/bitrix/catalog.section.list/.default/style.css?179053459343166 */
/* /local/templates/welle/components/bitrix/catalog.section/.default/style.css?179170789151637 */