/* Start:/local/templates/welle/css/contacts.css?178954572618760*/
/* ==========================================================================================
 * ФОРМА ЭКРАНА «КОНТАКТЫ» — /contacts/
 *
 * ОТКУДА ВЗЯТО. Замороженный эталон формы, принятый владельцем 16.09.2026 (редакция 2):
 *   Design/etalony-zamorozhennye/kontakty/Kontakty__2026-09-16_1030__sha256-f52d…4760.dc.html
 *   строки 563–754 («ФОРМА ЭКРАНА „КОНТАКТЫ“ — собственный слой прототипа»).
 * Ниже разделителя — тот кусок ЗНАК В ЗНАК, с одним названным исключением (см. ② ).
 * Слой обвязки файла приёмки (.doc-*, .frame-*, .fold, .mk, пунктир, янтарные пометки)
 * в бой не едет: он принадлежит чертежу, а не изделию.
 *
 * ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ styles.css. Правила нужны РОВНО одной странице из тысячи с
 * лишним. Подключение — $APPLICATION->SetAdditionalCSS() из contacts/index.php, ровно тем
 * же приёмом, что cabinet.css и auth.css в /personal/ (personal/index.php:78 и :196).
 *
 * ① СТОЛКНОВЕНИЙ КЛАССОВ НЕТ — проверено сплошным поиском, а не на глаз: 41 класс `.ct-*`
 *    формы против всего /local/ по маске *.css дал 0 совпадений (16.09).
 *    Все токены формы существуют в боевых css/tokens/ — сплошная сверка 32 из 32.
 *
 * ② 🔴 ЕДИНСТВЕННОЕ ОТСТУПЛЕНИЕ ОТ БУКВЫ ЭТАЛОНА — ТРИ СТРОКИ ЗАГОЛОВКОВ ЗАПРОСОВ.
 *    В эталоне пороги записаны как `@container wtscreen (…)`, потому что демо-кадр файла
 *    приёмки задаёт ширину сам: headless Chrome не рисует окна уже 500 px (отступление О-3
 *    паспорта заморозки, там же сказано, что ИСХОДНО это были `@media` и «пороги сохранены
 *    знак в знак»). В БОЮ КАДРОВ НЕТ: элемента с `container-name: wtscreen` на сайте не
 *    существует ни одного — значит все три блока не применились бы МОЛЧА, и телефон получил
 *    бы десктопную сетку с колонкой 420 px, то есть горизонтальную прокрутку.
 *    Возвращаю `@media` с ТЕМИ ЖЕ порогами: 790 · 860 · 560. Диапазонная запись `width >= N`
 *    и `min-width: N` тождественны, `width <= N` и `max-width: N` — тоже.
 *    Это уже записанное решение проекта, а не новое: тем же приёмом и по той же причине
 *    переведён список подсказок (styles.css, разбор ②) и шкала H1 витрины
 *    (components/bitrix/catalog.section.list/.default/style.css: «ПОЧЕМУ @media, А НЕ
 *    @container. Порог 790 px — это ширина ЭКРАНА»).
 *    Порог 790 у `.ct-h1` совпадает с боевым правилом `.wt-h1` знак в знак — форма и бой
 *    говорят про одну и ту же ступень типошкалы.
 *
 * ③ ОБЁРТКИ `.wt-layout` / `.wt-content` / `.wt-crumbs` / `.wt-h1` ЗДЕСЬ НЕ ПОВТОРЯЮТСЯ.
 *    Они живут в боевом css/integration.css и в style.css шаблона крошек — копия правила
 *    была бы вторым носителем одной сущности. Две строки `.wt-layout` внутри блока 560 px
 *    ниже — не копия, а поправка отступов, принятая владельцем в составе формы.
 * ========================================================================================== */

/* ═══════════ НИЖЕ — ЭТАЛОН, СТРОКИ 563–754, ЗНАК В ЗНАК (кроме трёх строк ② ) ═══════════ */

/* ═══ ФОРМА ЭКРАНА «КОНТАКТЫ» ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   ФОРМА ЭКРАНА «КОНТАКТЫ» — собственный слой прототипа (16.09.2026).
   Все значения — токены ярусов 0/1. Литералов нет, кроме трёх геометрических
   (ширина колонки связи, соотношение сторон карты, минимальная тач-зона 44px —
   контракт доступности, а не палитра).
   ═══════════════════════════════════════════════════════════════════════════ */

/* H1 страницы — по боевой шкале заголовков: 18 px на телефоне, 24 px с 790 px
   (правило `.wt-h1` шаблона сайта, page.css строки 391–403). Свой кегль не изобретаю:
   иначе браузерный дефолт даёт 32 px — ступени, которой в шкале проекта нет.
   Замер 16.09 поймал ровно это: было 32 px, стало 24 px. */
.ct-h1 { margin: 0 0 var(--space-4); font-size: var(--text-lg); font-weight: 700;
      line-height: var(--leading-tight); color: var(--foreground); }
@media (min-width: 790px) { .ct-h1 { font-size: var(--text-2xl); } }

/* ── ПЕРВЫЙ ЭКРАН: лид слева, связь справа ────────────────────────────────
   Почему связь колонкой справа, а не под лидом: на 1440 правый верх — то место,
   где телефон уже стоит в шапке; взгляд, пришедший за связью, идёт туда же.
   Лид при этом остаётся первым по порядку чтения и по DOM. */
.ct-top { display: grid; grid-template-columns: minmax(0, 1fr) 420px;
      grid-template-areas: "lead call" "doubt call";
      grid-template-rows: auto 1fr;
      gap: var(--space-5) var(--space-8); align-items: start;
      margin-bottom: var(--space-5); }
.ct-lead { grid-area: lead; }
.ct-call { grid-area: call; }
.ct-block--doubt { grid-area: doubt; margin-bottom: 0; }

.ct-lead__p { margin: 0 0 var(--space-4); max-width: 62ch;
      font-size: var(--text-lg); line-height: var(--leading-normal);
      color: var(--foreground); }
.ct-lead__p:last-child { margin-bottom: 0; color: var(--muted-foreground); }

/* ── ПАНЕЛЬ СВЯЗИ — доминанта экрана ──────────────────────────────────────
   Доминанта строится НЕ кеглем: потолок типошкалы --text-2xl занят H1
   (решение владельца, боевой .wt-h1). Панель берёт своё рамкой --primary
   и тенью — ровно тем приёмом, которым в бою выделена капсула поиска. */
.ct-call { background: var(--card); color: var(--card-foreground);
      border: 2px solid var(--primary); border-radius: var(--radius-lg);
      padding: var(--space-5); box-shadow: 0 6px 20px oklch(0.372 0.127 258 / 12%); }
.ct-call__h { margin: 0 0 var(--space-4); font-size: var(--text-lg); font-weight: 700;
      line-height: var(--leading-tight); color: var(--foreground); }

.ct-call__tel { display: flex; align-items: center; flex-wrap: wrap;
      gap: var(--space-2); margin: 0 0 var(--space-3); }
.ct-call__ico { display: inline-flex; color: var(--primary); flex: 0 0 auto; }
.ct-call__ico--sm { color: var(--muted-foreground); }
.ct-lbl { font-size: var(--text-sm); color: var(--muted-foreground); }
.ct-tel { font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-tight);
      color: var(--primary); text-decoration: none; white-space: nowrap;
      font-variant-numeric: tabular-nums; }
.ct-tel:hover { text-decoration: underline; }
.ct-tel:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px;
      border-radius: var(--radius-sm); }

/* Мессенджеры: слова и порядок строки сохранены («Viber · Telegram · WhatsApp»),
   разделитель «·» остаётся на месте. Каждое слово стало ссылкой с тач-зоной 44px. */
.ct-call__msgs { display: flex; align-items: center; flex-wrap: wrap;
      gap: var(--space-1); margin: 0 0 var(--space-3); }
.ct-msg { 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-sm); font-weight: 600; }
.ct-msg:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
      background: var(--secondary); }
.ct-msg:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ct-msg-sep { color: var(--muted-foreground); padding: 0 var(--space-0_5); }

.ct-call__mail, .ct-call__hours { display: flex; align-items: center; flex-wrap: wrap;
      gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--text-base);
      color: var(--foreground); }
.ct-call__hours { color: var(--muted-foreground); font-size: var(--text-sm); }
.ct-mail { color: var(--foreground); text-decoration: none; overflow-wrap: anywhere; }
.ct-mail:hover { color: var(--primary); text-decoration: underline; }

.ct-call__note { margin: var(--space-3) 0 0; padding-top: var(--space-3);
      border-top: 1px solid var(--border); font-size: var(--text-sm);
      line-height: var(--leading-normal); color: var(--muted-foreground); }

/* ── БЛОКИ ОСИ «ЧЕЛОВЕК» ─────────────────────────────────────────────────── */
.ct-block { background: var(--card); border: 1px solid var(--border);
      border-radius: var(--radius-lg); padding: var(--space-5);
      margin-bottom: var(--space-5); }
.ct-h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 700;
      line-height: var(--leading-tight); color: var(--foreground); }
.ct-p { margin: 0 0 var(--space-3); max-width: 68ch; font-size: var(--text-base);
      line-height: var(--leading-normal); color: var(--foreground); }
.ct-p:last-child { margin-bottom: 0; }
.ct-p--tight { color: var(--muted-foreground); font-size: var(--text-sm); }

/* ── «ЕСЛИ ХОТИТЕ ПРИЕХАТЬ» + КАРТА ───────────────────────────────────────
   Карта живёт ВНУТРИ блока, рядом с адресом и условием предварительного звонка,
   а не отдельной полосой-украшением. */
.ct-visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--space-5); align-items: stretch; margin-top: var(--space-5); }
.ct-visit__text { align-self: start; }
.ct-addr { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2);
      margin: var(--space-4) 0 0; font-size: var(--text-base); color: var(--foreground); }
.ct-addr__v { font-weight: 600; }

/* ── РЕД. 2: «Построить маршрут до нас» ───────────────────────────────────
   🔴 Ни одно правило выше и ниже не изменено: все селекторы этого куска начинаются
   с .ct-route, и диф против ред. 1 это показывает, а не я утверждаю.
   Форма взята у кнопок мессенджеров (.ct-msg): та же высота 44 px, та же рамка,
   тот же радиус. Класс отдельный, а не общий, чтобы прибор, считающий мессенджеры,
   не стал считать маршрут — один класс, одна сущность.
   Громкости себе кнопка не берёт: доминанта первого экрана — телефон, маршрут
   служит адресу и стоит при нём. */
.ct-route-line { margin: var(--space-3) 0 0; }
.ct-route { display: inline-flex; align-items: center; gap: var(--space-2);
      min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius);
      border: 1px solid var(--border); background: var(--background);
      color: var(--foreground); text-decoration: none;
      font-size: var(--text-sm); font-weight: 600; }
.ct-route__ico { display: inline-flex; color: var(--primary); flex: 0 0 auto; }
.ct-route:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
      background: var(--secondary); }
.ct-route:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Ловушка 1 (фикс. 664×625) лечится здесь: контейнер держит соотношение сторон,
   iframe растягивается на 100% и на 375 не распирает страницу. */
/* width: 100% — не для красоты. Без него связка «aspect-ratio + min-height» считает
   ширину ОТ ВЫСОТЫ и раздувает карту: на 375 замер дал 378 px в ячейке 307 px,
   то есть ту самую горизонтальную прокрутку, ради которой ловушку и лечили.
   Поймано зондом 16.09, глазами на кадре не видно. */
.ct-map { position: relative; width: 100%; min-height: 220px;
      border-radius: var(--radius);
      overflow: hidden; border: 1px solid var(--border); background: var(--muted); }
.ct-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
      display: block; }

/* ── ОСЬ «ОРГАНИЗАЦИЯ»: тише по всем носителям-доминантам ─────────────────
   Подложка --secondary вместо белой карточки, кегль базовый, рамки нет.
   Перекос 13:7 держится формой, а не длиной текста. */
.ct-org { margin-top: var(--space-10); padding: var(--space-6);
      background: var(--secondary); border-radius: var(--radius-lg); }
.ct-org__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-5); align-items: start; }
.ct-block--flat { background: transparent; border: none; padding: 0;
      margin-bottom: 0; }
.ct-org .ct-h2 { font-size: var(--text-base); text-transform: uppercase;
      letter-spacing: var(--tracking-wider); color: var(--muted-foreground); }
.ct-org .ct-p { font-size: var(--text-sm); }

.ct-req-wrap { margin-top: var(--space-6); padding-top: var(--space-5);
      border-top: 1px solid var(--border); }
/* Две колонки ПОТОКОМ (columns), а не гридом: бухгалтер читает реквизиты подряд
   сверху вниз, а грид разложил бы их зигзагом — 1-я строка слева, 2-я справа. */
.ct-req { margin: var(--space-4) 0 0; columns: 2; column-gap: var(--space-10); }
.ct-req__row { break-inside: avoid; display: grid;
      grid-template-columns: 190px minmax(0, 1fr);
      gap: var(--space-3); padding: var(--space-2) 0;
      border-top: 1px solid var(--border); }
.ct-req__k { margin: 0; font-size: var(--text-xs); color: var(--muted-foreground);
      line-height: var(--leading-normal); }
.ct-req__v { margin: 0; font-size: var(--text-sm); color: var(--foreground);
      line-height: var(--leading-normal); overflow-wrap: anywhere; }
.ct-req__v--num { font-variant-numeric: tabular-nums; }

/* ── 375: один поток, ничего не прячется ─────────────────────────────────── */
@media (max-width: 860px) {
  .ct-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: none;
        grid-template-rows: auto; gap: var(--space-5); }
  .ct-lead, .ct-call, .ct-block--doubt { grid-area: auto; }
  .ct-block--doubt { margin-bottom: 0; }
  .ct-visit { grid-template-columns: minmax(0, 1fr); }
  .ct-org__pair { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .ct-req { columns: 1; }
  .ct-map { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  /* Плотность верха — не косметика: от неё зависит, попадает ли телефон в первый
     экран телефона (375×667). Замер до сжатия — запас 24 px, после — см. таблицу. */
  .ct-lead__p { font-size: var(--text-base); }
  .ct-h1 { margin-bottom: var(--space-3); }
  .ct-top { gap: var(--space-4); }
  .ct-call__h { margin-bottom: var(--space-3); }
  .wt-layout { padding-top: var(--space-4); }
  .ct-call { padding: var(--space-4); }
  /* Разделитель «·» на телефоне не печатается: кнопки переносятся по две в ряд,
     и знак повисает в конце строки. Слова строки — все три и в том же порядке. */
  .ct-msg-sep { display: none; }
  .ct-call__msgs { gap: var(--space-2); }
  .ct-block { padding: var(--space-4); }
  .ct-org { padding: var(--space-4); margin-top: var(--space-8); }
  .ct-req__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-0_5); }
  .ct-map { aspect-ratio: 4 / 3; min-height: 0; }
  .wt-layout { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* 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/contacts.css?178954572618760 */
/* /local/templates/welle/components/bitrix/breadcrumb/welle/style.css?17918999715185 */