/* 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 */
/* /local/templates/welle/components/bitrix/catalog.section.list/.default/style.css?179053459343166 */