/* Start:/local/templates/welle/css/kak-eto-rabotaet.css?178966500415989*/
/* ==========================================================================================
 * ФОРМА ЭКРАНА 11 — РАЗДЕЛ «КАК ЭТО РАБОТАЕТ», главная страница (рубрикатор).
 *
 * Постановка: «2026-09-17 — bitrix-development — Акт 2: страница-рубрикатор „Как это
 * работает" в бой». Подключается со страницы /kak-eto-rabotaet/ через SetAdditionalCSS —
 * тем же приёмом, что contacts.css и usloviya-raboty.css на соседних экранах.
 *
 * ═══ ОТКУДА ВЗЯТО ═══
 * Замороженный эталон, принятый владельцем 17.09.2026 в 16:34 («Прототип главной страницы
 * блога … версия 6. Принимаю полностью»):
 *   Design/etalony-zamorozhennye/kak-eto-rabotaet-rubrikator/
 *     KakEtoRabotaet_rubrikator__2026-09-17_1634__sha256-a4ba1dd2…904c7b6b.dc.html
 * Правила ЭКРАНА А — строки 564–675 эталона, знак в знак. Блоки узких ширин — строки
 * 806–831, оттуда взяты только правила ЭКРАНА А (правила статьи не поехали: у неё свой
 * экран, своя заморозка и свой такт кода).
 *
 * 🔴 ИСТОЧНИК — ЗАМОРОЖЕННЫЙ ФАЙЛ, А НЕ СБОРЩИК ПРОТОТИПА. Сборщик
 * Design/prototypes/2026-09-17 — как это работает, разрез/общее.py после заморозки ушёл
 * вперёд: в нём появились правила `.kr-go__t` (подчёркнутый анкор строки-перехода),
 * которых в принятом файле НЕТ НИ ОДНОГО ВХОЖДЕНИЯ — проверено счётом. Возьми я CSS
 * из сборщика — в бой уехала бы форма, которую владелец не принимал.
 *
 * ═══ ЧТО ИЗМЕНЕНО ПРОТИВ ЭТАЛОНА — ТРИ ВЕЩИ, ВСЕ НАЗВАНЫ ═══
 *
 * ① `@container wtscreen (…)` → `@media (…)`, пороги ЗНАК В ЗНАК: 790 · 900 · 560 · 360.
 *    В эталоне пороги записаны через контейнерные запросы, потому что демо-кадр файла
 *    приёмки задаёт ширину сам. В БОЮ КАДРОВ НЕТ: элемента с `container-name: wtscreen`
 *    на сайте не существует ни одного — все четыре блока не применились бы МОЛЧА,
 *    и телефон получил бы десктопную раскладку. Запись `width >= N` и `min-width: N`
 *    тождественны, `width <= N` и `max-width: N` — тоже. Это уже записанное решение
 *    проекта, а не новое: тем же приёмом переведены формы соседних экранов
 *    (css/contacts.css, css/usloviya-raboty.css).
 *
 * ② ОБЁРТКИ `.wt-layout` / `.wt-content` / `.wt-crumbs` / `.wt-h1` ЗДЕСЬ НЕ ПОВТОРЯЮТСЯ —
 *    они живут в боевом css/integration.css и в style.css шаблона крошек. Две строки
 *    `.wt-layout` внутри блоков 560 и 360 px ниже не копия, а поправка отступов, принятая
 *    владельцем в составе формы (боковой отступ 16 px на 320 — замеренный контракт).
 *
 * ③ 🆕 ДОБАВЛЕНО ОДНО ПРАВИЛО, КОТОРОГО В ЭТАЛОНЕ НЕТ И НЕ МОГЛО БЫТЬ: `.kr-pusto__a`.
 *    На момент заморозки слов пустого состояния не существовало (паспорт: «клиентский
 *    текст, хозяин — welle-copy; их ещё нет, на макете стоит размеченное место»), поэтому
 *    ссылки внутри них в эталоне нет. Слова приняты владельцем в тот же день, и ссылка
 *    в них предусмотрена носителем: «на словах „откройте каталог", адрес /catalog/».
 *    Правило держит ровно её вид и ничего сверх: цвет акцента и подчёркивание.
 *    ⛔ Отдельной кнопки не заводится — её нет в принятой форме (прямой запрет постановки).
 * ========================================================================================== */

/* ═══════════ НИЖЕ — ЭТАЛОН, СТРОКИ 564–675, ЗНАК В ЗНАК (кроме четырёх строк ① ) ═══════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   ФОРМА ДВУХ ЭКРАНОВ РАЗДЕЛА «КАК ЭТО РАБОТАЕТ» — редакция 2, 17.09.2026.
   Значения — токены ярусов 0/1. Литералов четыре, и ни один не палитра:
   44 px — минимальная тач-зона (контракт доступности); 999px — радиус капсулы;
   72ch/68ch — мера строки для длинного текста; 4/3 — отношение сторон места
   под фото, одно на все четыре (на нём держатся пары).
   ═══════════════════════════════════════════════════════════════════════════ */

/* H1 — боевая шкала заголовков: 18 px на телефоне, 24 px с 790 px. Своего кегля
   не изобретаю: браузерный дефолт дал бы 32 px — ступени, которой в шкале нет. */
.kr-h1 { margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: 700;
      line-height: var(--leading-tight); color: var(--foreground); }
@media (min-width: 790px) { .kr-h1 { font-size: var(--text-2xl); } }

/* ── ЭКРАН А. Лид под H1 — текст владельца, 🆕 ДВА АБЗАЦА (17.09, ночь).
   Между абзацами — отбивка меры абзаца (--space-4, как у .kr-p); последний абзац
   держит прежнее расстояние до блока «о чём тут пишут» (--space-6), чтобы рост лида
   не съел границу между лидом и следующим блоком. Кегль и мера строки — принятые. */
.kr-lead { margin: 0 0 var(--space-6); max-width: 72ch; font-size: var(--text-base);
      line-height: var(--leading-normal); color: var(--muted-foreground); }
.kr-lead:not(:last-of-type) { margin-bottom: var(--space-4); }

/* ── 🆕 «О ЧЁМ ТУТ ПИШУТ» — четыре карточки «имя + подпись вторым ярусом».
   Две колонки, а не четыре: подпись дословна и в колонку 285 px ломается
   на семь строк. Правится сетка, а не подпись. */
.kr-about { margin: 0 0 var(--space-6); max-width: 78ch; }
.kr-about__h { margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: 700;
      color: var(--foreground); }
.kr-ablist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3);
      grid-template-columns: 1fr; }
@media (min-width: 900px) { .kr-ablist { grid-template-columns: 1fr 1fr; } }
.kr-ab { display: flex; flex-direction: column; gap: var(--space-1_5);
      padding: var(--space-4); background: var(--card); border: 1px solid var(--border);
      border-left: 3px solid var(--primary); border-radius: var(--radius); }
.kr-ab__h { font-size: var(--text-base); font-weight: 700; line-height: var(--leading-tight);
      color: var(--foreground); }
.kr-ab__p { font-size: var(--text-sm); line-height: var(--leading-normal);
      color: var(--muted-foreground); }

/* ── РУБРИКИ КАПСУЛАМИ — фильтр над лентой: только имя и счётчик, подписи здесь нет.
   Пустая рубрика НЕ ссылка: места в разделе она не теряет, а вести в пустой
   результат ей нечем. */
.kr-chips { display: flex; flex-wrap: wrap; gap: var(--space-2);
      margin: 0 0 var(--space-4); }
.kr-chip { display: inline-flex; align-items: center; gap: var(--space-1_5);
      min-height: 36px; padding: 0 var(--space-3); border: 1px solid var(--border);
      border-radius: 999px; background: var(--background); color: var(--foreground);
      font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.kr-chip:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
      background: var(--secondary); }
.kr-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.kr-chip--on { background: var(--primary); color: var(--primary-foreground);
      border-color: var(--primary); }
.kr-chip--on:hover { background: var(--primary); }
.kr-chip--pusto { border-style: dashed; color: var(--muted-foreground); cursor: default; }
.kr-chip__n { font-size: var(--text-xs); font-weight: 700; opacity: .75;
      font-variant-numeric: tabular-nums; }

/* ── ЛЕНТА. Строка во всю меру колонки, а не плитка в сетке: форма не зависит
   от числа статей и не выглядит поломанной сеткой при одной. */
.kr-feed { list-style: none; margin: 0 0 var(--space-8); padding: 0; max-width: 78ch;
      display: flex; flex-direction: column; gap: var(--space-4); }
.kr-item__l { display: block; padding: var(--space-5); background: var(--card);
      border: 1px solid var(--border); border-radius: var(--radius-lg);
      text-decoration: none; color: inherit; }
.kr-item__l:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
      box-shadow: 0 4px 16px oklch(0 0 0 / 6%); }
.kr-item__l:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.kr-item__meta { display: flex; flex-wrap: wrap; align-items: center;
      gap: var(--space-2); margin-bottom: var(--space-2); }
.kr-rub { display: inline-block; padding: 2px var(--space-2); border-radius: var(--radius-sm);
      background: var(--secondary); color: var(--secondary-foreground);
      font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); }
.kr-date { font-size: var(--text-xs); color: var(--muted-foreground);
      font-variant-numeric: tabular-nums; }
.kr-item__h { display: block; max-width: 60ch; font-size: var(--text-lg); font-weight: 700;
      line-height: var(--leading-tight); color: var(--foreground); }
.kr-item__s { display: block; max-width: 72ch; margin-top: var(--space-2);
      font-size: var(--text-base); line-height: var(--leading-normal);
      color: var(--muted-foreground); }

/* ── 🆕 ПУСТОЕ СОСТОЯНИЕ ЛЕНТЫ. Статей ноль — стоит размеченное место, а не выдуманная
   карточка. Пунктир и приглушённый цвет — тот же язык чертежа, что у места под фото:
   видно, что здесь будет содержимое и что его сегодня нет. Мера и отступы — как
   у карточки ленты, чтобы появление первой статьи не двигало страницу. */
.kr-pusto { display: flex; flex-direction: column; gap: var(--space-1_5);
      max-width: 78ch; margin: 0 0 var(--space-8); padding: var(--space-5);
      border: 1px dashed color-mix(in oklab, var(--primary) 35%, var(--border));
      border-radius: var(--radius-lg); background: var(--muted); }
.kr-pusto__t { font-size: var(--text-xs); font-weight: 700;
      letter-spacing: var(--tracking-wide); text-transform: uppercase;
      color: var(--muted-foreground); }
.kr-pusto__p { font-size: var(--text-sm); line-height: var(--leading-normal);
      color: var(--muted-foreground); }

/* ── ПЕРЕХОД В КАТАЛОГ — строки, а не баннер. Анкор описательный, боевое имя раздела. */
.kr-tocat { max-width: 78ch; border-top: 1px solid var(--border);
      padding-top: var(--space-5); margin-bottom: var(--space-4); }
.kr-tocat__h { margin: 0 0 var(--space-3); font-size: var(--text-base); font-weight: 700;
      color: var(--foreground); }
.kr-golist { list-style: none; margin: 0; padding: 0; display: flex;
      flex-direction: column; gap: var(--space-2); }
.kr-go { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
      padding: var(--space-2) var(--space-3); border-radius: var(--radius);
      background: var(--secondary); border-left: 3px solid var(--primary);
      color: var(--foreground); text-decoration: none; font-size: var(--text-base);
      font-weight: 600; line-height: var(--leading-normal); }
.kr-go:hover { background: color-mix(in oklab, var(--primary) 8%, var(--secondary)); }
.kr-go:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.kr-go__i { flex: 0 0 auto; color: var(--primary); }

/* ═══════════ КОНЕЦ ЭТАЛОНА ═══════════ */

/* ③ ССЫЛКА ВНУТРИ ПУСТОГО СОСТОЯНИЯ — единственное правило сверх эталона, см. шапку.
   Слова приняты владельцем 17.09 уже ПОСЛЕ заморозки формы, и ссылка предусмотрена
   их носителем. Вид — акцентный цвет и подчёркивание; ни фона, ни рамки, ни кнопки:
   это ссылка в предложении, а не действие второго уровня. */
.kr-pusto__a { color: var(--primary); text-decoration: underline;
      text-decoration-thickness: 2px; text-underline-offset: 3px; }
.kr-pusto__a:hover { text-decoration-thickness: 3px; }
.kr-pusto__a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ── УЗКИЕ ШИРИНЫ. Ничего не прячется и не уезжает: меняется только плотность.
   Эталон, строки 806–831; взяты правила ЭКРАНА А. Правила статьи (.kr-zav, .kr-h2,
   .kr-check, .kr-step, .kr-step__p, .kr-go--big, .kr-tbl) не поехали: у статьи свой
   экран, своя заморозка и свой такт кода — она едет актом 3. */
@media (max-width: 560px) {
  .wt-layout { padding-top: var(--space-4); padding-left: var(--space-4);
        padding-right: var(--space-4); }
  .kr-item__l { padding: var(--space-4); }
  .kr-ab { padding: var(--space-3); }
}
@media (max-width: 360px) {
  /* 320 — самый узкий телефон. Боковой отступ не опускается ниже 16 px:
     это контракт, а не вкус, и он замерен. */
  .wt-layout { padding-left: 16px; padding-right: 16px; }
  .kr-chips { gap: var(--space-1_5); }
  .kr-chip { padding: 0 var(--space-2_5); font-size: var(--text-xs); }
}

/* End */


/* Start:/local/templates/welle/css/kak-eto-rabotaet-statya.css?178966697022362*/
/* ==========================================================================================
 * ФОРМА ЭКРАНА 11 — СТРАНИЦА СТАТЬИ /kak-eto-rabotaet/<слаг>/ (ЭКРАН Б раздела).
 *
 * Постановка: «2026-09-17 — bitrix-development — Акт 3: первая статья раздела в бой».
 * Подключается со страницы статьи ВТОРЫМ файлом, после css/kak-eto-rabotaet.css.
 *
 * ═══ ПОЧЕМУ ДВА ФАЙЛА, А НЕ ОДИН И НЕ КОПИЯ ═══
 * В самом эталоне правила лежат двумя разделами: «ФОРМА ДВУХ ЭКРАНОВ РАЗДЕЛА» (общая часть:
 * H1, лид, капсулы, лента, строка-переход) и «ЭКРАН Б — СТАТЬЯ». Общая часть уже приехала
 * в бой актом 2 файлом css/kak-eto-rabotaet.css; здесь — только то, чего в ней нет.
 * Повторить общие правила вторым файлом значило бы завести ВТОРОЙ НОСИТЕЛЬ одной сущности:
 * правка отступа H1 разошлась бы между двумя экранами молча. Поэтому страница статьи
 * подключает ОБА файла, а этот начинается ровно там, где кончается первый.
 * Сверено машинно: общая часть эталона статьи и боевой css/kak-eto-rabotaet.css совпадают
 * построчно, расхождение ровно одно — трио `.kr-go__t` (см. ниже).
 *
 * ═══ ОТКУДА ВЗЯТО ═══
 * Замороженный эталон, принятый владельцем 17.09.2026 в 17:54 («Статью блога … версия 5.
 * Принимаю полностью»):
 *   Design/etalony-zamorozhennye/kak-eto-rabotaet-statya/
 *     KakEtoRabotaet_statya__2026-09-17_1754__sha256-43c6fea6…89674.dc.html
 * Строки 680–684 (приём ссылок на строке-перехода) и 686–896 (весь ЭКРАН Б), знак в знак.
 *
 * 🔴 ТРИО `.kr-go__t` ПРИЕХАЛО ИМЕННО ЗДЕСЬ, И ЭТО НЕ ПРОИЗВОЛ. В эталоне РУБРИКАТОРА
 * (заморозка 16:34) этих правил НЕТ НИ ОДНОГО ВХОЖДЕНИЯ — акт 2 честно их не повёз.
 * В эталоне СТАТЬИ (заморозка 17:54) они есть: приём ссылок принят владельцем вместе
 * с формой статьи, часом позже. Строка-переход в каталог (блок 7) — часть этой формы,
 * и без трио её анкор не подчёркивается, то есть форма приехала бы неполной.
 * ⚠️ Следствие, названное вслух: на рубрикаторе узла со строкой-переходом сегодня нет
 * вовсе, поэтому правила там ничего не меняют; появится — подчеркнётся.
 *
 * ═══ ЧТО ИЗМЕНЕНО ПРОТИВ ЭТАЛОНА — ДВЕ ВЕЩИ, ОБЕ НАЗВАНЫ ═══
 *
 * ① `@container wtscreen (…)` → `@media (…)`, пороги ЗНАК В ЗНАК: 900 · 560. В эталоне
 *    пороги записаны контейнерными запросами, потому что демо-кадр файла приёмки задаёт
 *    ширину сам. В БОЮ КАДРОВ НЕТ: элемента с `container-name: wtscreen` на сайте не
 *    существует ни одного — блоки не применились бы МОЛЧА, и телефон получил бы
 *    десктопную раскладку. Решение уже принято проектом: тем же приёмом переведены
 *    css/contacts.css, css/usloviya-raboty.css и css/kak-eto-rabotaet.css.
 *
 * ② ИЗ УЗКИХ БЛОКОВ СНЯТЫ СТРОКИ РУБРИКАТОРА — `.wt-layout`, `.kr-item__l`, `.kr-ab`,
 *    `.kr-chips`, `.kr-chip` и весь блок 360 px, состоявший только из них. Они уже стоят
 *    в css/kak-eto-rabotaet.css, который страница статьи подключает первым. Это не правка
 *    формы: ни одно правило не потеряно, каждое живёт ровно в одном файле.
 *
 * ⛔ Слой чертежа (`.rb`, `.rb-num`, рамки кадров, обвязка файла приёмки) не поехал —
 *    он объявлен в самом эталоне как «в бой НЕ идёт».
 * ========================================================================================== */

/* ═══ НИЖЕ — ЭТАЛОН, ЗНАК В ЗНАК (кроме двух вещей ① и ②) ═══ */

/* 🔴 ТОТ ЖЕ ПРИЁМ НА СТРОКЕ-ПЕРЕХОДЕ. До этого у неё были фон, полоса и стрелка —
   всё это признаки ВРЕЗКИ, а не нажимаемости: врезки на странице тоже с фоном
   и полосой. Подчёркнутый анкор снимает вопрос сразу и без наведения, а фон
   и стрелка остаются тем, чем были, — акцентом места в потоке. */
.kr-go__t { text-decoration: underline; text-decoration-thickness: 2px;
      text-underline-offset: 4px;
      text-decoration-color: color-mix(in oklab, var(--primary) 45%, transparent); }
.kr-go:hover .kr-go__t { text-decoration-color: var(--primary);
      text-decoration-thickness: 3px; }
.kr-go:focus-visible .kr-go__t { text-decoration-color: var(--primary); }

/* ═══ ЭКРАН Б — СТАТЬЯ ═══ */
.kr-ameta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
      margin: 0 0 var(--space-3); }
.kr-avtor { font-size: var(--text-xs); color: var(--muted-foreground); }
/* Подзаголовок — отдельный абзац, в H1 он НЕ входит (решение 17.09). */
.kr-sub { margin: 0 0 var(--space-5); max-width: 68ch; font-size: var(--text-base);
      font-weight: 600; line-height: var(--leading-normal);
      color: var(--muted-foreground); }
/* Завязка — сцена, а не вступление: крупнее корпуса, но тише H1. */
.kr-zav { margin: 0 0 var(--space-4); max-width: 68ch; font-size: var(--text-lg);
      line-height: var(--leading-normal); color: var(--foreground); }
/* Вопрос статьи — одна строка с полосой: видно, что разбирают именно это. */
.kr-q { margin: 0 0 var(--space-6); padding-left: var(--space-4); max-width: 68ch;
      border-left: 3px solid var(--primary); font-size: var(--text-base);
      font-weight: 600; line-height: var(--leading-normal); color: var(--foreground); }
.kr-h2 { margin: var(--space-8) 0 var(--space-2); font-size: var(--text-lg);
      font-weight: 700; line-height: var(--leading-tight); color: var(--foreground); }
.kr-p { margin: 0 0 var(--space-4); max-width: 72ch; font-size: var(--text-base);
      line-height: var(--leading-normal); color: var(--foreground); }
/* 🔴 ОДИН ПРИЁМ НА ОБА ВИДА ССЫЛОК — ПОДЧЁРКИВАНИЕ (17.09, слово владельца
   «придумает, как элегантно показать, что раздел кликабельный»).
   Почему именно оно: подчёркивание — единственный признак ссылки, который
   ① виден БЕЗ наведения (на телефоне наведения нет вовсе),
   ② остаётся в чёрно-белом и на печати (цвет не может быть единственным признаком),
   ③ не превращает текст в кнопку и не рвёт чтение,
   ④ читается одинаково и внутри абзаца, и на строке-переходе — значит язык один.
   Подчёркивание приглушено до 45 % основного цвета и отодвинуто от букв, чтобы
   в плотном абзаце не кричать; при наведении и фокусе набирает полный цвет
   и толщину — ссылка отзывается, оставаясь частью текста. */
.kr-a { color: var(--primary); font-weight: 600;
      text-decoration: underline; text-decoration-thickness: 2px;
      text-underline-offset: 3px;
      text-decoration-color: color-mix(in oklab, var(--primary) 45%, transparent); }
.kr-a:hover { text-decoration-color: var(--primary); text-decoration-thickness: 3px; }
.kr-a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px;
      border-radius: var(--radius-sm); text-decoration-color: var(--primary); }

/* ── 🆕 РАЗВИЛКА С ЧЕТЫРЬМЯ МЕСТАМИ ПОД ФОТО.
   Ветка = текст + место под кадр. На широком кадр стоит СПРАВА и у всех четырёх
   встаёт по одной вертикали — глаз сравнивает ФОТО 1 с ФОТО 4, не примеряя масштаб.
   На телефоне кадр уходит под текст, и мера у всех четырёх снова одна.
   🔑 Пара — единица смысла развилки, и держится она равенством рамок, а не соседством:
   ветки 1 и 4 разделены двумя другими на ЛЮБОЙ ширине, и соседями быть не могут. */
.kr-razv { margin: 0 0 var(--space-6); }
.kr-h2--razv { margin-top: var(--space-6); }
/* 🔴 ДЫРА 1, названная владельцем. Ряд тянулся по высоте колонки с кадром,
   и под коротким текстом ветки зияло 167–191 px. Пробовал выровнять по центру —
   стало хуже: текст первой ветки оторвался от заголовка развилки на 72 px,
   дыра переехала наверх. Лечение сеткой: ветка становится КАРТОЧКОЙ.
   Тогда остаток воздуха — поле карточки, а не провал между блоками; текст
   по-прежнему прижат к верху и стоит сразу под заголовком. Приём не новый:
   ровно так на принятом рубрикаторе устроен блок «о чём тут пишут».
   ⛔ Анатомия не тронута: четыре ветки, их порядок, кадр и подпись — как были. */
.kr-vetka { display: grid; grid-template-columns: 1fr; gap: var(--space-3);
      align-items: start; margin: 0 0 var(--space-4); max-width: 100ch;
      padding: var(--space-4); background: var(--card);
      border: 1px solid var(--border); border-left: 3px solid var(--primary);
      border-radius: var(--radius); }
@media (min-width: 900px) {
  /* 🔴 ДЫРА 1, названная владельцем: ряд тянулся по высоте колонки с кадром
     (кадр + подпись до пяти строк), а текст ветки короче — под ним оставался
     провал 167–191 px. Лечится сеткой, а не сокращением текста:
     колонка кадра сужена 320 → 260 (кадр ниже на четверть), и ряд выровнен
     по центральной оси — остаток воздуха делится поровну и читается как ось,
     а не как «тут что-то не встало». Пары 1↔4 и 2↔3 держатся: мера у всех
     четырёх по-прежнему одна. */
  .kr-vetka { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-5); }
}
.kr-vetka__t .kr-p { margin-bottom: 0; }
.kr-vetka__f { width: 100%; max-width: 360px; }
@media (min-width: 900px) { .kr-vetka__f { max-width: 260px; } }
.kr-foto { margin: 0; }
.kr-foto__box { position: relative; display: flex; align-items: center;
      justify-content: center; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
      border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--secondary); }
.kr-foto--net .kr-foto__box { border-style: dashed;
      border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); }
.kr-foto__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kr-foto__net { display: flex; flex-direction: column; align-items: center;
      gap: var(--space-1_5); color: var(--muted-foreground); }
.kr-foto__net-t { font-size: var(--text-xs); font-weight: 700;
      letter-spacing: var(--tracking-wide); }
.kr-foto__n { position: absolute; top: var(--space-2); left: var(--space-2);
      padding: 0 var(--space-1_5); border-radius: var(--radius-sm);
      background: var(--background); color: var(--muted-foreground);
      font-size: 10px; font-weight: 700; letter-spacing: var(--tracking-wide); }
.kr-foto__p { margin: var(--space-2) 0 0; font-size: var(--text-sm);
      line-height: var(--leading-normal); color: var(--muted-foreground); }
/* 🔴 ДЫРА 5: итоговый абзац развилки набран полужирным, и при мере в 72ch он
   выходил на 42 px правее остального текста — правый край документа дрожал.
   Полужирный шире светлого, поэтому его мера задана короче: край сходится. */
.kr-p--itog { font-weight: 600; color: var(--foreground); max-width: 68ch; }

/* ── ТАБЛИЦА ВНУТРИ ТЕКСТА. Вбок едет ТАБЛИЦА, а не страница: обёртка держит
   собственную прокрутку и тень-подсказку. Гарантия не зависит от того, сколько
   колонок напишет welle-copy. */
.kr-fig { margin: 0 0 var(--space-6); }
.kr-tbl__h { margin: 0 0 var(--space-2); max-width: 72ch; font-size: var(--text-base);
      font-weight: 700; color: var(--foreground); }
/* 🔴 ДЫРА 2: таблица растягивалась на всю колонку 1140 px, а колонок в ней
   четыре и они короткие — справа оставалось пустое поле в треть ширины,
   заголовок стоял далеко от своих чисел. Мера таблицы приравнена к мере текста. */
.kr-fig, .kr-tbl__h, .kr-tblw, .kr-src { max-width: 72ch; }
.kr-tblw { overflow-x: auto; overscroll-behavior-x: contain;
      border: 1px solid var(--border); border-radius: var(--radius);
      background:
        linear-gradient(to right, var(--card) 30%, transparent) 0 0,
        linear-gradient(to left, var(--card) 30%, transparent) 100% 0,
        radial-gradient(farthest-side at 0 50%, oklch(0 0 0 / 14%), transparent) 0 0,
        radial-gradient(farthest-side at 100% 50%, oklch(0 0 0 / 14%), transparent) 100% 0;
      background-repeat: no-repeat;
      background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
      background-attachment: local, local, scroll, scroll; }
.kr-tblw:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.kr-tbl { border-collapse: collapse; width: 100%; background: transparent;
      font-size: var(--text-sm); }
.kr-tbl th, .kr-tbl td { padding: var(--space-2) var(--space-3);
      border-bottom: 1px solid var(--border); text-align: left; vertical-align: top;
      line-height: var(--leading-normal); }
.kr-tbl thead th { background: var(--secondary); font-weight: 700;
      font-size: var(--text-xs); }
.kr-tbl tbody th { font-weight: 700; white-space: nowrap; }
.kr-tbl td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kr-tbl tbody tr:last-child th, .kr-tbl tbody tr:last-child td { border-bottom: 0; }
.kr-src { margin: var(--space-2) 0 0; font-size: var(--text-xs);
      color: var(--muted-foreground); }

/* ── БЛОК «ПОСМОТРИТЕ У СЕБЯ» — обязательный блок рубрики «Как это работает».
   Единственная подложка в теле статьи: он несёт ДЕЙСТВИЕ, поэтому берёт ширину
   колонки целиком, а не уходит врезкой вбок (врезка читается как украшение). */
/* 🔴 ДЫРА 3: блоки 6, 7 и 8 шли во всю колонку, а текст внутри — 68–72ch;
   правый край документа прыгал с 820 px на 1140 и обратно, и справа от текста
   висело пустое поле. Правый край у всего тела статьи теперь один. */
/* ⛔ ОТКАТ 17.09 (ночь), слово владельца «Откатить»: блок связи .kr-step возвращён
   к прежней раскладке — меру 72ch и точечный интерлиньяж он не получает.
   Остальные починки визуального прохода владелец не отменял, они остаются. */
.kr-check, .kr-next { max-width: 72ch; }
.kr-check { margin: 0 0 var(--space-6); padding: var(--space-5);
      background: var(--secondary); border-left: 4px solid var(--primary);
      border-radius: var(--radius); }
.kr-check__h { display: flex; align-items: center; gap: var(--space-2);
      margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 700;
      line-height: var(--leading-tight); color: var(--foreground); }
.kr-check__h svg { flex: 0 0 auto; color: var(--primary); }
.kr-check__p { margin: 0 0 var(--space-3); max-width: 68ch; font-size: var(--text-base);
      line-height: var(--leading-normal); color: var(--foreground); }
.kr-check__p:last-child { margin-bottom: 0; }
.kr-check--maket .kr-tblw { background: var(--background); }
.kr-sim { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex;
      flex-direction: column; gap: var(--space-2); }
.kr-sim li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
      font-size: var(--text-sm); }
.kr-sim__st { color: var(--primary); font-weight: 700; }

/* ── БЛОК 7 — путь в товар строкой, не баннером. */
.kr-next { margin: 0 0 var(--space-6); }
.kr-go--big { font-size: var(--text-lg); padding: var(--space-3) var(--space-4); }

/* ── БЛОК 8 — один шаг. Рамка и тень, как у принятой панели связи «Контактов». */
.kr-step { padding: var(--space-5); border: 2px solid var(--primary);
      border-radius: var(--radius-lg);
      box-shadow: 0 6px 20px oklch(0.372 0.127 258 / 12%); }
.kr-step__h { margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: 700;
      line-height: var(--leading-tight); color: var(--foreground); }
/* 🔴 ДЫРА 4: весь блок 8 шёл с интерлиньяжем 2.4 — он нужен только там, где
   в строку текста встают нажимаемые каналы высотой 44 px. Абзацы без кнопок
   от этого разъезжались и читались как разорванные. Теперь 2.4 стоит ровно
   на абзацах с кнопками, остальные идут обычной мерой набора. */
.kr-step__p { margin: 0 0 var(--space-3); max-width: 72ch; font-size: var(--text-base);
      line-height: 2.4; color: var(--foreground); }
.kr-step__p:last-child { margin-bottom: 0; }
.kr-do { display: inline-flex; align-items: center; gap: var(--space-1_5);
      min-height: 44px; padding: 0 var(--space-2_5); border-radius: var(--radius);
      border: 1px solid var(--border); background: var(--background);
      color: var(--foreground); text-decoration: none; font-size: var(--text-base);
      font-weight: 600; line-height: var(--leading-none); vertical-align: middle;
      overflow-wrap: anywhere; }
.kr-do:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
      background: var(--secondary); }
.kr-do:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.kr-do svg { flex: 0 0 auto; color: var(--primary); }

/* ── УЗКИЕ ШИРИНЫ. Ничего не прячется и не уезжает: меняется только плотность. */
@media (max-width: 560px) {
  .kr-zav { font-size: var(--text-base); }
  .kr-h2 { margin-top: var(--space-6); }
  .kr-check { padding: var(--space-4); }
  .kr-step { padding: var(--space-4); }
  .kr-step__p { font-size: var(--text-base); line-height: 2.3; }
  .kr-go--big { font-size: var(--text-base); padding: var(--space-2_5) var(--space-3); }
  .kr-tbl { font-size: var(--text-xs); }
  .kr-tbl th, .kr-tbl td { padding: var(--space-1_5) var(--space-2); }
  /* 🔴 Ширину узкой таблицы держит не число, а самое длинное слово В ШАПКЕ.
     Без переноса по слогам колонка не сжимается ниже этого слова, и таблица
     уезжает за край на любом телефоне. Перенос по слогам (язык страницы объявлен ru)
     сжимает шапку и оставляет числа целыми: у ячеек значений перенос выключен. */
  .kr-tbl thead th { hyphens: auto; overflow-wrap: break-word; }
}

/* End */


/* Start:/local/templates/welle/components/bitrix/breadcrumb/welle/style.css?17918999715185*/
/* Хлебные крошки — ЕДИНСТВЕННЫЙ носитель стиля крошек на весь сайт.
   Форма — эталон сквозной рамки ред. 4 (Design/etalony-zamorozhennye/ramka/
   Ramka_red4__2026-10-11_1239__sha256-2834a69e…dc.html, строки 554–569), правило Р10
   (DECISIONS 11.10): размер --text-xs, цвет --muted-foreground; ссылки подчёркнуты
   ВСЕГДА, при наведении темнеют до --foreground; текущее звено и «/» не подчёркнуты
   (правила на них нет). Значения — только токены css/tokens/, литералов не заводим.
   Подчёркивание задано явно (underline), а не браузерным умолчанием: в бою подключён
   /bitrix/css/main/bootstrap.min.css, и сброс a { text-decoration: none } в нём или
   в другом файле снял бы умолчание (справка design по Р10, §3).
   Отступ снизу — --space-2, как в рамке.

   Кто подключает файл: bitrix:breadcrumb сам (SetAdditionalCSS в component.php ядра) —
   каталог и статьи «Как это работает»; страницы со статической разметкой .wt-crumbs —
   строкой SetAdditionalCSS на странице: «Условия работы», «Контакты», рубрикатор,
   корзина (/personal/cart/index.php), оформление заказа (/personal/order/make/index.php).
   Копий этих правил в стилях других шаблонов быть не должно: до 11.10 они жили
   в sale.basket.basket и sale.order.ajax (bootstrap_v4/style.css и .min.css) и сняты
   решением владельца 11.10 «Р10 доходит до корзины и оформления заказа…». */

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

/* ЗОНА КЛИКА ССЫЛКИ — больше, на экране не сдвигается ни пиксель (акт №83, 13.10.2026; DECISIONS 13.10
   «ХЛЕБНЫЕ КРОШКИ: ЗОНА КЛИКА БОЛЬШЕ БЕЗ ВИДИМЫХ ИЗМЕНЕНИЙ»). Повод — Clarity 13.10: щелчок у нижнего края
   «Отводы нержавеющие» ушёл мимо (шрифт 12 px, строка 18 px, запаса не было).
   Как устроено: у строчной ссылки поля (padding) расширяют область, по которой браузер засчитывает щелчок,
   а строку не раздвигают — вертикальные поля строчного элемента высоту строки не меняют, горизонтальные гасятся
   равным отрицательным полем (margin), поэтому ни одна буква не сдвигается. Кольцо фокуса с клавиатуры
   поля бы увеличили — для него правило ниже (:focus-visible).
   Почему именно эти шаги:
   · снизу --space-1_5 (6 px) — туда пришёлся промах; до следующего блока под крошками ~10 px, не дотягивается;
   · сверху половина --space-0_5 (1 px) — больше нельзя: при переносе крошек на вторую строку (телефон) ссылка
     нижней строки перехватывала бы щелчок у нижнего края текста верхней (у Segoe UI запас строки всего 2 px);
   · по бокам --space-0_5 (2 px) — пробел до «/» 3,4 px: «/» остаётся ничьим. Справа поле работает только
     у последней ссылки — пробел после ссылки идёт позже по разметке и щелчок над ним забирает себе. */
.wt-crumbs a {
	color: inherit;
	text-decoration: underline;
	padding: calc(var(--space-0_5) / 2) var(--space-0_5) var(--space-1_5);
	margin: 0 calc(-1 * var(--space-0_5));
}

/* Кольцо фокуса с клавиатуры обводит поля ссылки и с полями стало бы больше (на стенде 13.10 отличались 120 снимков
   фокуса из 120). В фокусе с клавиатуры поля снимаются, и кольцо рисуется по тем же коробкам, что до акта №83
   (снимки фокуса 120 из 120 равны «было»). Щелчок мышью это не задевает: у ссылки, нажатой мышью, :focus-visible
   браузер не включает. */
.wt-crumbs a:focus-visible {
	padding: 0;
	margin: 0;
}

.wt-crumbs a:hover {
	color: var(--foreground);
	text-decoration: underline;
}

/* End */
/* /local/templates/welle/css/kak-eto-rabotaet.css?178966500415989 */
/* /local/templates/welle/css/kak-eto-rabotaet-statya.css?178966697022362 */
/* /local/templates/welle/components/bitrix/breadcrumb/welle/style.css?17918999715185 */