/*
Theme Name: Vektor Child
Theme URI: https://vektor-it.ru
Description: Дочерняя тема GeneratePress для vektor-it.ru (ГЛОНАСС/GPS-мониторинг, Екатеринбург/УрФО). Пересборка с Elementor Pro на код-first, пилот подхода перед Videomobil. Все значения — из tokens.css (зеркало projects/vektor-it/design/ui-kit.md). URL не меняются (SEO цел).
Author: Vektor IT
Template: generatepress
Version: 0.1.0
Text Domain: vektor-child
*/

/* =====================================================================
   ВЕКТОР ИТ — Child Theme Styles
   ---------------------------------------------------------------------
   Архитектура (по образцу Перегруза, agents/wordpress-dev.md):
   - tokens.css подключается ОТДЕЛЬНО через functions.php (после
     родительской GeneratePress), даёт :root-переменные.
   - Этот файл = только семантические стили компонентов на этих токенах.
   - Namespace: vkt-*. Магических чисел нет — всё var(--token).
   - Фаза 1 (staging-каркас): только header/footer + база. Обычное меню,
     мега-меню (согласованный концепт — design/megamenu-prototype.html) —
     следующая фаза.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-ink);
  /* База страницы — белая (rules/design.md «Фоны», 2026-07-09);
     bg-light — только у выделенных блоков/карточек. */
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--color-ink);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}
h1 { font-size: var(--text-2xl); font-weight: 700; }
h2 { font-size: var(--text-xl); font-weight: 700; }
h3 { font-size: var(--text-lg); font-weight: 700; }
/* 700 — иначе h4 сливается с body-текстом (разбор владельца 2026-07-09) */
h4 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 700; color: var(--color-ink); margin: 0 0 var(--space-3); }

/* Bug 6: body-параграф глушится глобально на теге, не только через .vkt-card p —
   иначе секции без карточки-обёртки (интро платформы и т.п.) остаются полным
   ink и ломают консистентность секондари-цвета (design.md «Текст», владелец 2026-07-13) */
p { color: var(--color-ink-muted); }

a { color: var(--color-accent); }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

.vkt-container {
  width: 100%;
  /* --container = ширина КОНТЕНТА (1280); паддинги сверху, не внутри */
  max-width: calc(var(--container) + 2 * var(--space-5));
  margin-inline: auto;
  padding-inline: var(--space-5);
}
@media (max-width: 480px) { .vkt-container { padding-inline: var(--space-4); } }

.vkt-section { padding-block: var(--section-y-desktop); }
@media (max-width: 767px) { .vkt-section { padding-block: var(--section-y-mobile); } }
/* Смысловые поля (вариант А, владелец 2026-07-13): лёгкий фон на группах
   секций по смыслу — «что купить» / «доверие» / «дожим». Группирует и
   съедает голый зазор белой базы. Не метроном: поля 1-2 секции, по смыслу. */
.vkt-section--tint { background: var(--color-bg-light); }

.vkt-navy { background: var(--color-navy); color: var(--color-white); }
.vkt-navy a { color: var(--color-accent-on-dark); }
.vkt-navy h1, .vkt-navy h2, .vkt-navy h3, .vkt-navy h4 { color: var(--color-white); }
/* Bug 14: body-текст на navy — секондари-тон, не полный белый (тот же принцип,
   что «заголовок кричит, текст глушится» design.md «Текст», но для тёмного фона).
   Раньше секондари был расставлен точечно (hero-lead, FAQ) — теперь глобально. */
.vkt-navy p { color: var(--color-accent-tint); }
/* Заголовки ВНУТРИ белых карточек navy-секций — тёмные, иначе белое на белом
   (приёмка P3 2026-07-09; жалоба владельца «заголовки и текст одного цвета») */
.vkt-navy .vkt-card h3, .vkt-navy .vkt-card h4 { color: var(--color-ink); }
.vkt-navy .vkt-card p { color: var(--color-ink-muted); }
/* Кнопка primary на navy теряла белый текст — .vkt-navy a (специфичность
   0,1,1) перебивал .vkt-btn--primary (0,1,0); secondary уже была защищена,
   primary — нет (Bug 2, 2026-07-13, живой баг а не «на глаз») */
.vkt-navy .vkt-btn--primary,
.vkt-navy .vkt-btn--primary:hover,
.vkt-navy .vkt-btn--primary:focus { color: var(--color-white); }

/* Skip-link (WCAG 2.4.1) */
.vkt-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 500;
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-control) 0;
  font-weight: 700;
}
.vkt-skip-link:focus {
  left: 0;
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* =====================================================================
   HEADER — один консолидированный бар (ui-kit.md §2 «Шапка»)
   ===================================================================== */
.vkt-header {
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 100;
}
.vkt-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 76px;
  padding-block: var(--space-3);
}
/* Лого = реальный SVG живого сайта (236x50, слово+знак) — скейлим высотой,
   ширина авто (пропорции 4.72:1, НЕ задавать width жёстко) */
.vkt-logo { display: flex; align-items: center; flex-shrink: 0; }
.vkt-logo svg { display: block; flex: none; height: 34px; width: auto; }

/* Навигация с мега-меню (концепт согласован 2026-07-08,
   design/megamenu-prototype.html; перенесено на staging 2026-07-13).
   «Услуги» = мега-панель 2 колонки (По задаче / По типу техники),
   «Каталог»/«Компания» = обычные дропдауны. Раскрытие — hover/focus-within,
   без JS. Селекторы ТОЧЕЧНЫЕ (__link, а не `.vkt-nav a`) — иначе стили
   топ-уровня текут на ссылки внутри панелей. */
.vkt-nav { display: flex; align-items: stretch; }
.vkt-nav__list { display: flex; list-style: none; margin: 0; padding: 0; }
.vkt-nav__item { display: flex; align-items: center; position: relative; }
/* Мега-панель якорится на ШАПКУ (не на пункт) — не вылазит за край экрана */
.vkt-nav__item--mega { position: static; }
.vkt-nav__link,
.vkt-nav__link:link,
.vkt-nav__link:visited {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 76px;
  padding-inline: var(--space-4);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
}
.vkt-nav__caret { width: 10px; height: 10px; flex: none; transition: transform .2s; }
.vkt-nav__item:hover > .vkt-nav__link,
.vkt-nav__item:focus-within > .vkt-nav__link,
.vkt-nav__item.is-open > .vkt-nav__link,
.vkt-nav__link[aria-current="page"] {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  text-decoration: none;
}
.vkt-nav__item:hover > .vkt-nav__link .vkt-nav__caret,
.vkt-nav__item:focus-within > .vkt-nav__link .vkt-nav__caret,
.vkt-nav__item.is-open > .vkt-nav__link .vkt-nav__caret { transform: rotate(180deg); }

/* Мега-панель (Услуги) */
.vkt-mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(840px, calc(100vw - 2 * var(--space-5)));
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s, transform .18s;
  padding: var(--space-6);
  /* Мост через мёртвую зону наведения (2026-07-14): top:100% считается от
     .vkt-header (позиционированный предок, т.к. .vkt-nav__item--mega статичен
     нарочно — не вылезать за экран), а его нижний паддинг (--space-3=12px)
     даёт 12px зазора МЕЖДУ ссылкой «Услуги» и панелью, где курсор не наведён
     ни на что — мышь теряет hover на полпути и панель закрывается, не
     долетев до пункта. Подтверждено Playwright-траекторией курсора на
     staging (12px зазор). Отрицательный margin-top поднимает хитбокс панели
     вплотную к ссылке, padding-top компенсирует визуально (контент не
     сдвигается). */
  margin-top: -12px;
  padding-top: calc(var(--space-6) + 12px);
  z-index: 90;
}
.vkt-nav__item:hover > .vkt-mega,
.vkt-nav__item:focus-within > .vkt-mega,
.vkt-nav__item.is-open > .vkt-mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.vkt-mega__columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.vkt-mega__col-title {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-4);
}
.vkt-mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.vkt-mega__list a {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  text-decoration: none;
  transition: background-color .15s;
}
.vkt-mega__list a:hover,
.vkt-mega__list a:focus { background-color: var(--color-bg-light); text-decoration: none; }
.vkt-mega__icon { width: 22px; height: 22px; flex: none; color: var(--color-accent); margin-top: 1px; }
.vkt-mega__name { display: block; font-size: 16px; font-weight: 500; color: var(--color-ink); line-height: 1.3; }
.vkt-mega__list a:hover .vkt-mega__name { color: var(--color-accent); }
.vkt-mega__desc { display: block; font-size: var(--text-2xs); color: var(--color-ink-muted); margin-top: 2px; line-height: 1.4; }
.vkt-mega__footer {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.vkt-mega__all { font-size: 16px; font-weight: 700; color: var(--color-accent); text-decoration: none; }
.vkt-mega__all:hover { text-decoration: underline; }
.vkt-mega__note { font-size: var(--text-2xs); color: var(--color-ink-muted); }

/* Обычный дропдаун (Каталог, Компания) */
.vkt-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translateY(8px);
  min-width: 280px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s, transform .18s;
  padding: var(--space-3);
  z-index: 90;
}
.vkt-nav__item:hover > .vkt-dropdown,
.vkt-nav__item:focus-within > .vkt-dropdown,
.vkt-nav__item.is-open > .vkt-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.vkt-dropdown ul { list-style: none; margin: 0; padding: 0; }
.vkt-dropdown a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color .15s;
}
.vkt-dropdown a:hover,
.vkt-dropdown a:focus { background-color: var(--color-bg-light); color: var(--color-accent); text-decoration: none; }

/* Бургер-обёртка держит и кнопку (мобайл), и nav (всегда) — на десктопе
   скрывается только КНОПКА, не обёртка. `display:none` на всей обёртке
   прятал меню на десктопе целиком (найдено Playwright-проверкой 2026-07-13
   при переносе мега-меню: элемент в DOM, visible=false). */
.vkt-burger { display: flex; align-items: stretch; align-self: stretch; }
.vkt-burger__btn {
  -webkit-appearance: none;
  appearance: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  color: var(--color-ink);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  padding: 0;
}
/* GP-тема красит button:hover в тёмно-серый глобально (см. front-page.css
   «Bug 8») — та же дыра у любой голой <button>, закрываем явно (2026-07-13).
   Ховер — в токенах кита (accent-семейство), НЕ серый --color-border
   (владелец 2026-07-14): фон accent-tint, рамка+иконка accent (иконка #3C68AE
   на #C2DAFF ~4.3:1, выше 3:1 для UI). */
.vkt-burger__btn:hover,
.vkt-burger__btn:focus-visible {
  background-color: var(--color-accent-tint);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.vkt-burger__btn svg { width: 24px; height: 24px; flex: none; }

@media (max-width: 900px) {
  .vkt-burger { display: block; align-self: center; }
  .vkt-burger__btn { display: inline-flex; }
  .vkt-nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--color-white);
    display: none;
    box-shadow: var(--shadow-md);
    padding: var(--space-3) var(--space-5) var(--space-5);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .vkt-burger.is-open .vkt-nav { display: block; }
  /* Мобайл: панели раскрыты статично списком (аккордеон-механика — если
     список разрастётся; сейчас 3 группы читаются целиком, ui-kit.md) */
  .vkt-nav__list { flex-direction: column; }
  .vkt-nav__item { flex-direction: column; align-items: stretch; height: auto; }
  .vkt-nav__link, .vkt-nav__link:link, .vkt-nav__link:visited {
    min-height: 44px;
    width: 100%;
    border-bottom: none;
  }
  .vkt-nav__caret { display: none; }
  .vkt-mega, .vkt-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    width: auto;
    min-width: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0; /* сброс десктопного моста-паддинга (.vkt-mega), в аккордеоне не нужен */
    padding: 0 0 var(--space-3) var(--space-4);
  }
  /* Открытые состояния мега/дропдауна тянут десктопный transform
     translateX(-50%) (специфичность 0,3,0) — базовый мобильный сброс выше
     0,1,0 его НЕ перебивает, панель «Услуги» уезжала на пол-ширины за левый
     край при тапе на тач (mouseenter вешает .is-open + залипающий :hover;
     баг виден только после transition .18s, не на t=0). Сброс той же
     специфичности 0,3,0, ниже по исходнику → выигрывает только внутри этого
     @media. Подтверждено Playwright на проде 375px (владелец 2026-07-14). */
  .vkt-nav__item:hover > .vkt-mega,
  .vkt-nav__item:focus-within > .vkt-mega,
  .vkt-nav__item.is-open > .vkt-mega,
  .vkt-nav__item:hover > .vkt-dropdown,
  .vkt-nav__item:focus-within > .vkt-dropdown,
  .vkt-nav__item.is-open > .vkt-dropdown { transform: none; }
  .vkt-mega__columns { grid-template-columns: 1fr; gap: var(--space-4); }
  .vkt-mega__desc { display: none; } /* компактность драуэра */
  .vkt-mega__footer { display: none; } /* «Все услуги» дублирует сам пункт */
}

.vkt-nav__drawer-contacts { display: none; }

/* Телефон + CTA справа */
.vkt-header__contacts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-shrink: 0;
}
.vkt-header__phone {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
}
.vkt-header__phone:hover { text-decoration: underline; }
/* Почта + «работаем с 2008 года» под телефоном (владелец 2026-07-13) */
.vkt-header__contacts-lines { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.2; }
.vkt-header__email { font-size: var(--text-2xs); color: var(--color-ink-muted); text-decoration: none; white-space: nowrap; }
.vkt-header__email:hover { text-decoration: underline; }
.vkt-header__since { font-size: var(--text-2xs); color: var(--color-ink-muted); white-space: nowrap; }
.vkt-logo-block { display: flex; flex-direction: column; gap: 2px; }
.vkt-logo-block .vkt-header__since { margin-top: 2px; }

/* =====================================================================
   КНОПКИ (ui-kit.md §2 «Кнопки»)
   ===================================================================== */
.vkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  border-radius: var(--radius-control);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.vkt-btn:hover { text-decoration: none; }
/* Ховеры по rules/design.md «Интерактив» (2026-07-09):
   primary темнеет, secondary заливается. Никаких opacity/инверсий. */
.vkt-btn--primary { background: var(--color-accent); color: var(--color-white); }
.vkt-btn--primary:hover, .vkt-btn--primary:focus { background: #2F548F; color: var(--color-white); }
.vkt-btn--secondary { background: transparent; border-color: var(--color-accent); color: var(--color-accent); }
.vkt-btn--secondary:hover { background: var(--color-accent); color: var(--color-white); }
/* На navy secondary в цветах кита невидим (accent на navy 2.30:1) —
   белая рамка/текст, ховер = белая заливка. */
.vkt-navy .vkt-btn--secondary { border-color: rgba(255,255,255,.7); color: var(--color-white); }
.vkt-navy .vkt-btn--secondary:hover { background: var(--color-white); border-color: var(--color-white); color: var(--color-navy); }
/* Кнопка не прилипает к тексту (design.md «Текст», 2026-07-09) */
.vkt-card .vkt-btn, .vkt-equip-card .vkt-btn { margin-top: var(--space-4); }
/* Ширина кнопки — по контенту: flex-колонки карточек растягивают детей,
   кнопка-полоса на десктопе не оправдана (владелец 2026-07-09).
   Мобайл — full-width под палец. */
.vkt-card .vkt-btn { align-self: flex-start; }
@media (max-width: 560px) {
  .vkt-card .vkt-btn { align-self: stretch; }
}

/* =====================================================================
   FOOTER (ui-kit.md §2 «Футер») — navy, колонки, декор-вотермарк
   ===================================================================== */
.vkt-footer {
  background: var(--color-navy);
  color: var(--color-white);
  position: relative;
  overflow: hidden; /* декор обрезается краем футера */
}
/* Вотермарк — стрелка из логотипа (референс arsenkin.ru, владелец 2026-07-13).
   Полупрозрачный белый, за контентом, клики сквозь. */
.vkt-footer__decor {
  position: absolute;
  left: -60px;
  bottom: -140px;
  width: 520px;
  height: 520px;
  color: rgba(255, 255, 255, .05);
  pointer-events: none;
}
/* На узких экранах декор шире вьюпорта (right 460 при 375) и его край
   даёт горизонтальный скролл на коротких страницах — прячем (вотермарк
   декоративный, 5% прозрачности). Фикс Н2 2026-07-13. */
@media (max-width: 560px) { .vkt-footer__decor { display: none; } }
.vkt-footer .vkt-container { position: relative; } /* контент над декором */
.vkt-footer__logo { display: inline-flex; margin-bottom: var(--space-4); }
.vkt-footer__logo svg { flex: none; display: block; height: 40px; width: auto; }
.vkt-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: var(--space-8);
  padding-block: var(--space-9); /* крупнее (был space-8) — владелец 2026-07-13 */
}
@media (max-width: 900px) { .vkt-footer__grid { grid-template-columns: 1fr 1fr; padding-block: var(--space-8); } }
@media (max-width: 560px) { .vkt-footer__grid { grid-template-columns: 1fr; } }
.vkt-footer__col-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
  margin-bottom: var(--space-4);
}
.vkt-footer__list { list-style: none; margin: 0; padding: 0; }
.vkt-footer__list li + li { margin-top: var(--space-2); }
.vkt-footer__list a { color: var(--color-white); text-decoration: none; }
.vkt-footer__list a:hover { color: var(--color-accent-on-dark); text-decoration: underline; }
.vkt-footer__brand { font-family: var(--font-head); font-weight: 700; font-size: var(--text-md); margin-bottom: var(--space-3); }
.vkt-footer__req { margin-top: var(--space-5); font-size: var(--text-2xs); color: var(--color-accent-tint); line-height: 1.6; }
.vkt-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-block: var(--space-5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-2xs);
  color: var(--color-accent-tint);
}

/* =====================================================================
   ФАЗА 2 — согласованное изменение №2 (телефон в шапке вкл. мобилу)
   ---------------------------------------------------------------------
   Намеренно в САМОМ КОНЦЕ файла: правила выше (.vkt-btn, .vkt-header__phone,
   .vkt-logo) имеют ту же специфичность класса — при равной специфичности
   каскад берёт последнее правило независимо от @media, поэтому мобильные
   переопределения, вставленные в середину файла, ранее перебивались более
   поздними базовыми правилами (найдено скриншот-проверкой 2026-07-08).
   ===================================================================== */
@media (max-width: 900px) {
  /* На живом сайте телефона в мобильной шапке нет вообще
     (site-snapshot-2026-07-06.md §2) — здесь он остаётся виден всегда,
     кнопка-CTA рядом с логотипом+бургером+телефоном не влезает и уходит
     вниз открытого меню (ui-kit.md §2 «Шапка + мобильное меню»). */
  .vkt-header__cta { display: none; }
  .vkt-header__phone { font-size: var(--text-2xs); }
  .vkt-header__inner { gap: var(--space-3); }
  .vkt-header__contacts { gap: var(--space-2); }
  .vkt-header__contacts .vkt-header__email,
  .vkt-header__contacts .vkt-header__since { display: none; }
  .vkt-logo-block .vkt-header__since { display: none; }

  .vkt-nav__drawer-contacts {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }
  .vkt-nav__drawer-contacts .vkt-header__phone { font-size: var(--text-base); font-weight: 700; }
}

@media (max-width: 400px) {
  /* На самых узких экранах лого ужимается высотой (пропорции сохраняются),
     чтобы телефон в свёрнутой шапке помещался. */
  .vkt-logo svg { height: 26px; }
}

/* Гео-локация в шапке (владелец 2026-07-13, Пачка-3 доп.5) */
.vkt-header__geo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  padding-inline: 0;
  font-size: var(--text-2xs);
  color: var(--color-ink-muted);
  white-space: nowrap;
}
.vkt-header__geo svg { flex: none; color: var(--color-accent); }
/* Регион уехал в полосу над шапкой (2026-09-17), и вместе с ним исчез
   элемент, который отталкивал кнопки вправо. Возвращаем упор: правый
   край кнопок должен совпадать с правым краем полосы. */
.vkt-header__contacts { margin-left: auto; }
@media (max-width: 1080px) { .vkt-header__geo { display: none; } }

/* =====================================================================
   Мобильная шапка — бургер СПРАВА от телефона (владелец 2026-07-14).
   Порядок flex-детей .vkt-header__inner: лого(0) — телефон(2) — бургер(3).
   Намеренно в КОНЦЕ файла: `.vkt-header__contacts{margin-left:0}` выше
   (стр. 545, та же специфичность) иначе перебьёт margin-left:auto. geo
   на мобиле скрыт (≤1080), его margin-left:auto не мешает. Бургер держит
   абсолютный drawer .vkt-nav (якорь — .vkt-header), перестановка на порядок
   drawer не двигает. Проверено Playwright 375px.
   ===================================================================== */
@media (max-width: 900px) {
  .vkt-header__contacts { order: 2; margin-left: auto; }
  .vkt-burger { order: 3; }
}

/* =====================================================================
   Страница «Контроль топлива» — точечные правки (2026-07-23).
   Скоуп .vkt-us; page-specific CSS этой страницы штатно живёт в uslugi.css
   (не мой файл в этой задаче) — тут компенсирующие переопределения через
   модификаторы (выше специфичность, style.css грузится ДО uslugi.css,
   design.md «Каскад CSS» — по свойствам, не по правилу целиком) + новые
   классы, которых в uslugi.css ещё нет.
   ===================================================================== */

/* ── Правка 1: кейс-спойлер — текст слева, скрин справа (компактнее по
   высоте), на мобиле в столбик. Новые классы — конфликта с uslugi.css нет. */
.vkt-us .vkt-case-spoiler__body.vkt-case-spoiler__body--split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
.vkt-us .vkt-case-spoiler__text { display: flex; flex-direction: column; }
.vkt-us .vkt-case-spoiler__text .vkt-case-spoiler__quote { margin-bottom: var(--space-5); }
.vkt-us .vkt-case-spoiler__text .vkt-btn { align-self: flex-start; }
.vkt-us .vkt-case-spoiler__body--split .vkt-case-spoiler__shot { margin-bottom: 0; }
.vkt-us .vkt-case-spoiler__body--split .vkt-us-shot--sm { max-width: 100%; }
@media (max-width: 900px) {
  .vkt-us .vkt-case-spoiler__body.vkt-case-spoiler__body--split { grid-template-columns: 1fr; }
  .vkt-us .vkt-case-spoiler__body--split .vkt-case-spoiler__shot { margin-top: var(--space-5); }
}

/* ── Правка 2: тарировка — кикер над «0,5%», подпись под пилюлей «1-3%»,
   карточка-нахлёст поднята выше на var(--space-5)=24px сверх текущих
   -48px/-32px (диапазон 20-30px из ТЗ), нахлёст на фото сохранён. Кикер
   и подпись — новые классы, .vkt-us-verdict--raised — модификатор выше
   специфичности uslugi.css (.vkt-us .vkt-us-verdict{margin-top} 0,2,0). */
.vkt-us .vkt-us-verdict__kicker {
  display: block;
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
}
.vkt-us .vkt-us-verdict__bad-note {
  margin: var(--space-2) 0 0;
  max-width: 32ch;
  font-size: var(--text-2xs);
  color: var(--color-ink-muted);
  line-height: 1.5;
}
.vkt-us .vkt-us-verdict.vkt-us-verdict--raised {
  margin-top: calc(-1 * (var(--space-7) + var(--space-5)));
}
@media (max-width: 900px) {
  .vkt-us .vkt-us-verdict.vkt-us-verdict--raised {
    margin-top: calc(-1 * (var(--space-6) + var(--space-4)));
  }
}

/* ── Правка 3: полоса преимуществ платформы — 4 заголовка в одну строку
   на 1280 и 1920 (контейнер капается на var(--container)=1280 в обоих
   случаях), перенос допустим только на мобиле (uslugi.css переключает
   grid на 2/1 колонку ≤900/≤480). Новые свойства (font-size/white-space)
   не заданы в uslugi.css — конфликта каскада нет, спецом не поднимаю. */
.vkt-us .vkt-us-plat__title {
  font-size: clamp(var(--text-2xs), 1.05vw, var(--text-base));
  white-space: nowrap;
}
@media (max-width: 900px) {
  .vkt-us .vkt-us-plat__title { white-space: normal; font-size: var(--text-2xs); }
}

/* ── Правка 5: «Находимся в Екатеринбурге» (монтажный бокс) — карта по
   высоте левой колонки (низ карты = низ фото). uslugi.css ставит
   align-items:start на .vkt-us-loc (0,2,0) — модификатор --stretch (0,3,0)
   перебивает точечно только это свойство; iframe height:100% (уже есть
   в uslugi.css) резолвится, т.к. grid-stretch даёт .vkt-us-loc__map
   определённую высоту строки. Мобайл (≤900, grid → 1 колонка) не задет —
   там stretch не участвует, карта возвращается на свою min-height. */
.vkt-us .vkt-us-loc.vkt-us-loc--stretch { align-items: stretch; }

/* ── Правка 6: блок «Результат: топливо под контролем» — вместо скриншота
   программы (не понравился владельцу) SVG-индикатор: капля топлива с
   галочкой в круге + пульсирующая зелёная точка «мониторинг live» +
   подпись, дублирующая смысл заголовка рядом (design.md «инфографика
   несёт данные, или её нет» — тут данные это сам факт непрерывности,
   не выдуманное число). Новые классы, конфликта каскада с uslugi.css нет. */
.vkt-us .vkt-us-result__media { display: flex; align-items: center; justify-content: center; }
.vkt-us .vkt-us-result-badge {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--color-success) 28%, var(--color-border));
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-success);
}
.vkt-us .vkt-us-result-badge__icon { width: 44px; height: 44px; flex: none; }
.vkt-us .vkt-us-result-badge__label {
  font-size: var(--text-2xs);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-ink);
  text-align: center;
}
.vkt-us .vkt-us-result-badge__pulse {
  position: absolute;
  top: 18px;
  right: 24px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-success);
}
.vkt-us .vkt-us-result-badge__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-success);
  animation: vkt-us-result-pulse 2.4s ease-out infinite;
}
@keyframes vkt-us-result-pulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(2.8); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .vkt-us .vkt-us-result-badge__pulse::after { animation: none; opacity: 0; }
}
@media (max-width: 767px) {
  .vkt-us .vkt-us-result-badge { width: 128px; height: 128px; }
  .vkt-us .vkt-us-result-badge__icon { width: 36px; height: 36px; }
}

/* =====================================================================
   МЕССЕНДЖЕРЫ (2026-08-03, t-vektor-messengers)
   ---------------------------------------------------------------------
   Три компонента одного слоя:
     .vkt-msg-links - иконки Telegram/WhatsApp в шапке, подвале и у формы
                      (разметка: vkt_msg_links() в functions.php);
     .vkt-msg-note  - строка «Или напишите нам в мессенджеры» под формами;
     .vkt-msg       - плавающая кнопка (template-parts/msg-float.php).
   Единый источник компонента = разметка + стиль + данные: стиль живёт
   здесь, site-wide, а не при обёртке одной страницы (rules/design.md).

   Каналы рисуются ЦИКЛОМ по vkt_contacts()['messengers'], а фирменный цвет
   кружка приходит из данных инлайн-переменной --vkt-msg-brand - поэтому
   в этом файле нет ни одного правила «на канал», и новый мессенджер CSS
   не требует. Фирменные цвета сервисов не токены кита: это логотипы,
   узнаваемость важнее палитры, и WCAG 1.4.11 логотипы из требования
   контраста исключает. Всё остальное - на токенах.

   Правила намеренно в САМОМ КОНЦЕ файла: @media не влияет на порядок
   каскада, и мобильные переопределения, вставленные в середину, ранее
   перебивались более поздними безусловными правилами той же
   специфичности (найдено скриншот-проверкой 2026-07-08).
   ===================================================================== */

/* ── Иконки-ссылки: шапка, подвал, строка у формы ───────────────────── */
.vkt-msg-links { display: inline-flex; align-items: center; gap: var(--space-2); }
.vkt-msg-links__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.vkt-msg-links__ico {
  box-sizing: border-box;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 50%;
  /* Заливка канала приходит инлайн-переменной из vkt_contacts() ('brand'),
     поэтому новый мессенджер не требует ни строки CSS. Значение - любой
     CSS background: у Telegram и WhatsApp плоский фирменный цвет,
     у MAX фирменный градиент. Пусто - акцент кита. */
  background: var(--vkt-msg-brand, var(--color-accent));
  color: var(--color-white); /* глиф белый на фирменном кружке */
  transition: transform .15s ease;
}
.vkt-msg-links__item:hover .vkt-msg-links__ico { transform: scale(1.08); }
.vkt-msg-links__name { font-size: var(--text-2xs); font-weight: 700; }
.vkt-msg-links__item:hover .vkt-msg-links__name { text-decoration: underline; }

/* Вариант с подписью канала (подвал, строка у формы): тач-зона не ниже 44px. */
.vkt-msg-links--labeled { flex-wrap: wrap; gap: var(--space-5); }
.vkt-msg-links--labeled .vkt-msg-links__item { min-height: 44px; }

/* На белом фоне подпись тёмная; в подвале цвет наследуется от .vkt-footer__list a. */
.vkt-msg-links--form .vkt-msg-links__item { color: var(--color-ink); }

/* Шапка: мессенджеры в одну строку с телефоном (десктоп). */
.vkt-header__phone-row { display: flex; align-items: center; gap: var(--space-3); }

/* Подвал: строка мессенджеров - третий пункт колонки «Контакты». */
.vkt-footer__msg { margin-top: var(--space-1); }

/* ── Строка «Или напишите нам в мессенджеры» под формой ─────────────── */
.vkt-msg-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--text-2xs);
  color: var(--color-ink-muted);
}

/* ── Плавающая кнопка (порт vm-messengers Видеомобиля) ──────────────── */
.vkt-msg {
  position: fixed;
  right: var(--space-5);
  bottom: calc(var(--space-5) + var(--vkt-msg-shift, 0px));
  z-index: 7000; /* ниже куки-плашки (8000), лайтбокса (9000) и попапа заявки (9500) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  font-family: var(--font-body);
}
.vkt-msg * { box-sizing: border-box; }
/* Закрытый виджет не должен ловить клики. Пункты списка скрыты через
   visibility (иначе не работает transition), но бокс .vkt-msg__list остаётся
   в раскладке и прозрачным слоем перехватывал тапы по кнопке формы: на 375
   три пробы elementFromPoint из четырёх по .wpcf7-submit попадали в
   .vkt-msg__list, а не в кнопку. Кликабельны только реальные контролы;
   клик в пустое место виджета проходит на страницу и закрывает виджет.
   Та же дыра есть в оригинале Видеомобиля (vm-messengers.php). */
.vkt-msg { pointer-events: none; }
.vkt-msg__toggle,
.vkt-msg__hint,
.vkt-msg.is-open .vkt-msg__item { pointer-events: auto; }
.vkt-msg__list { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.vkt-msg__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  -webkit-tap-highlight-color: transparent; /* иначе серый фон на тапе (баг владельца) */
}
.vkt-msg.is-open .vkt-msg__item {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.vkt-msg.is-open .vkt-msg__item:nth-child(1) { transition-delay: .12s; }
.vkt-msg.is-open .vkt-msg__item:nth-child(2) { transition-delay: .09s; }
.vkt-msg.is-open .vkt-msg__item:nth-child(3) { transition-delay: .06s; }
.vkt-msg.is-open .vkt-msg__item:nth-child(4) { transition-delay: .03s; }
.vkt-msg.is-open .vkt-msg__item:nth-child(5) { transition-delay: 0s; }
.vkt-msg__label {
  background: var(--color-white);
  color: var(--color-accent);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.vkt-msg__item:hover .vkt-msg__label { color: #2F548F; } /* тот же тёмный акцент, что .vkt-btn--primary:hover */
.vkt-msg__ico {
  flex: none;
  width: 48px;
  height: 48px;
  padding: 10px;
  border-radius: 50%;
  background: var(--vkt-msg-brand, var(--color-accent)); /* см. .vkt-msg-links__ico */
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: transform .15s ease;
}
.vkt-msg__ico svg { width: 100%; height: 100%; display: block; }
.vkt-msg__item:hover .vkt-msg__ico { transform: scale(1.06); }
/* Заявка и звонок - контурные иконки кита, им нужен stroke, а не fill. */
.vkt-msg__ico--brand svg {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vkt-msg__hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-white);
  color: var(--color-accent);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.vkt-msg__hint[hidden] { display: none; }
.vkt-msg__hint-x {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background-color: transparent;
  padding: 0 var(--space-1);
  font-size: 20px;
  line-height: 1;
  color: var(--color-ink-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* background-color в :hover обязателен явно: GeneratePress красит button:hover
   серым инлайн-стилем кастомайзера, и спор идёт посвойственно, не правилом
   целиком (agents/wordpress-dev.md, повторялось трижды).
   ⚠️ В списке ОБЯЗАН быть и голый :focus, не только :focus-visible: инлайн
   кастомайзера красит `button:focus`, а после клика мышью браузер ставит
   :focus без :focus-visible - кнопка залипала серой до ухода фокуса
   (замерено на проде 2026-08-03: rgb(63,64,71) после click). */
.vkt-msg__hint-x:hover, .vkt-msg__hint-x:focus, .vkt-msg__hint-x:focus-visible {
  background-color: transparent;
  color: var(--color-ink);
}

/* ── Карточка обратного звонка в плавающей кнопке (владелец 2026-09-23) ──
   Появляется над кнопкой мессенджеров через 30 с или на половине прокрутки.
   Только десктоп: на мобиле этот угол занят подсказкой «Напишите нам»,
   и карточка перекрыла бы половину экрана. Логика показа - msg-float.php. */
.vkt-cb {
  pointer-events: auto; /* родитель .vkt-msg сквозной, см. выше */
  width: 302px;
  max-width: calc(100vw - var(--space-6));
  background: var(--color-white);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(13, 52, 86, .18);
  overflow: hidden;
  animation: vkt-cb-in .32s cubic-bezier(.2, .9, .3, 1.2);
}
.vkt-cb[hidden] { display: none; }
@keyframes vkt-cb-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
/* Уважаем системную настройку «меньше движения» - как в остальной теме. */
@media (prefers-reduced-motion: reduce) {
  .vkt-cb { animation: none; }
}
.vkt-cb__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--color-accent);
  color: var(--color-white);
  padding: var(--space-3) var(--space-4);
}
.vkt-cb__title { font-size: var(--text-base); font-weight: 700; line-height: 1.3; }
/* Крестик: тот же набор состояний, что у .vkt-msg__hint-x - инлайн-стиль
   кастомайзера GeneratePress красит button:hover и button:focus серым. */
.vkt-cb__x {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background-color: transparent;
  margin-left: auto;
  padding: 0 var(--space-1);
  font-size: 20px;
  line-height: 1;
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vkt-cb__x:hover, .vkt-cb__x:focus, .vkt-cb__x:focus-visible {
  background-color: transparent;
  color: var(--color-white);
}
.vkt-cb__body { padding: var(--space-4) var(--space-4) var(--space-4); }
.vkt-cb__lead {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--color-ink-muted);
}
.vkt-cb__input {
  width: 100%;
  border: 1px solid #CBD7E3;
  border-radius: var(--radius-control);
  padding: 11px 13px;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-ink);
  background: var(--color-white);
  margin-bottom: var(--space-2);
}
.vkt-cb__input:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.vkt-cb__btn {
  width: 100%;
  border: 0;
  border-radius: var(--radius-control);
  padding: 12px;
  font: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-white);
  background: linear-gradient(180deg, #0E5A8A, #0A3D5D);
  box-shadow: 0 5px 14px rgba(14, 90, 138, .26);
  cursor: pointer;
  transition: background .15s ease;
}
.vkt-cb__btn:hover:not(:disabled) { background: linear-gradient(180deg, #E8722A, #CF5F1C); }
.vkt-cb__btn:disabled { opacity: .6; cursor: default; }
.vkt-cb__msg:empty { display: none; }
.vkt-cb__msg {
  margin: var(--space-2) 0 0;
  font-size: var(--text-2xs);
  line-height: 1.4;
  text-align: center;
}
.vkt-cb__note {
  margin: var(--space-2) 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-ink-muted);
  text-align: center;
}
.vkt-cb__note a { color: inherit; text-decoration: underline; }
/* На мобиле не показываем вовсе - дублирует подсказку и съедает экран. */
@media (max-width: 767px) {
  .vkt-cb { display: none; }
}

.vkt-msg__toggle {
  -webkit-appearance: none;
  appearance: none; /* иначе iOS Safari рисует свой pressed-оверлей */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: 56px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: 28px; /* пилюля = половина высоты 56px, не magic-number */
  background-color: var(--color-accent);
  color: var(--color-white);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
/* См. комментарий выше: background-color явный, и :focus в списке обязателен. */
.vkt-msg__toggle:hover,
.vkt-msg__toggle:focus,
.vkt-msg__toggle:focus-visible,
.vkt-msg__toggle:active {
  background-color: #2F548F;
  color: var(--color-white);
}
.vkt-msg__toggle svg {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vkt-msg__x { display: none; }
.vkt-msg.is-open .vkt-msg__x { display: block; }
.vkt-msg.is-open .vkt-msg__chat,
.vkt-msg.is-open .vkt-msg__txt { display: none; }
.vkt-msg.is-open .vkt-msg__toggle { width: 56px; padding: 0; }

@media (max-width: 900px) {
  /* Мессенджеры на мобиле - только внутри бургер-меню: в основной полосе
     уже лого, телефон и почта, ещё две иконки её раздавят. */
  .vkt-header__contacts .vkt-msg-links { display: none; }
  .vkt-nav__drawer-contacts .vkt-msg-links { gap: var(--space-3); }
  .vkt-nav__drawer-contacts .vkt-msg-links__ico { width: 44px; height: 44px; padding: 9px; }
}

@media (max-width: 767px) {
  .vkt-msg { right: var(--space-4); bottom: calc(var(--space-4) + var(--vkt-msg-shift, 0px)); }
  .vkt-msg__toggle { width: 56px; padding: 0; }
  .vkt-msg__txt { display: none; }
  .vkt-msg__label, .vkt-msg__hint { font-size: var(--text-2xs); }
}

@media (prefers-reduced-motion: reduce) {
  .vkt-msg__item,
  .vkt-msg__ico,
  .vkt-msg__toggle,
  .vkt-msg-links__ico { transition: none; }
}

/* =====================================================================
   ПОДВАЛ: реквизиты в нижней строке (владелец 2026-09-15).
   Раньше блок стоял в колонке «Контакты» и растягивал её, из-за чего под
   «Услугами» и «Компанией» оставалась пустота. Теперь реквизиты — справа
   в строке копирайта, а нижний отступ сетки уменьшен, и полоса подписки
   поднимается к колонкам.
   ===================================================================== */

.vkt-footer__grid { padding-block: var(--space-9) var(--space-6); }

.vkt-footer__bottom .vkt-footer__req {
  margin-top: 0;
  text-align: right;
  color: var(--color-accent-tint);
}

@media (max-width: 700px) {
  .vkt-footer__bottom .vkt-footer__req { text-align: left; }
}

/* =====================================================================
   КНОПКИ ШАПКИ — заявка и почта столбиком (владелец 2026-09-16).
   Раньше почта была мелкой серой ссылкой под телефоном, а заявка —
   широкой кнопкой справа. Теперь обе кнопки в колонку: заявка сверху
   как главное действие, почта под ней. Мессенджеры ушли под телефон.

   Цвета — палитра новой главной: спокойный #0E5A8A, наведение #E8722A.
   Модификаторы кита (.vkt-btn--primary/--secondary) НЕ трогаем: они
   красят кнопки на всём сайте, а перекрашена пока только главная.
   ===================================================================== */

.vkt-header__actions {
  display: flex;
  flex-direction: column;
  gap: 6px; /* столбик из двух кнопок не должен растить шапку */
  flex: none;
}

/* Общее для обеих кнопок: компактнее кита, иначе столбик выше шапки. */
.vkt-header__cta,
.vkt-header__mail {
  --h-brand: #0E5A8A;
  --h-brand-deep: #0A3D5D;
  --h-signal: #E8722A;
  --h-signal-deep: #CF5F1C;
  min-height: 0;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: background .16s ease, color .16s ease, border-color .16s ease,
              box-shadow .16s ease, transform .16s ease;
}

.vkt-header__cta {
  background: linear-gradient(135deg, #1B74AD 0%, var(--h-brand) 52%, var(--h-brand-deep) 100%);
  color: var(--color-white);
  box-shadow: 0 6px 14px rgba(10, 61, 93, .24), 0 1px 2px rgba(10, 61, 93, .18);
}

.vkt-header__mail {
  background: var(--color-white);
  color: var(--h-brand);
  border-color: var(--color-border);
  box-shadow: 0 3px 10px rgba(27, 36, 48, .07), 0 1px 1px rgba(27, 36, 48, .04);
}

.vkt-header__mail svg { flex: none; }

/* Наведение — оранжевый акцент с главной, тень в цвет, подъём на 1px. */
.vkt-header__cta:hover,
.vkt-header__cta:focus,
.vkt-header__mail:hover,
.vkt-header__mail:focus {
  background: linear-gradient(135deg, #F28A47 0%, var(--h-signal) 55%, var(--h-signal-deep) 100%);
  color: var(--color-white);
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(207, 95, 28, .30), 0 1px 2px rgba(207, 95, 28, .22);
  transform: translateY(-1px);
}

.vkt-header__cta:active,
.vkt-header__mail:active { transform: translateY(0); }

/* Телефон и мессенджеры — в столбик, по правому краю. */
.vkt-header__contacts-lines { gap: var(--space-1); }
.vkt-header__contacts-lines .vkt-msg-links { display: flex; gap: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .vkt-header__cta,
  .vkt-header__mail { transition: none; }
  .vkt-header__cta:hover,
  .vkt-header__mail:hover { transform: none; }
}

/* 900-1150: шапка переполнялась горизонтально ещё до этих кнопок
   (замер 2026-09-16: документ 1118 при окне 1100). Почту прячем,
   заявка остаётся; ниже 900 почта живёт в выезжающем меню. */
@media (max-width: 1150px) {
  .vkt-header__mail { display: none; }
  .vkt-header .vkt-container { gap: var(--space-2); }
  .vkt-header__contacts { gap: var(--space-2); }
}

/* =====================================================================
   ПОЛОСА НАД ШАПКОЙ + ЗАЛИПАЮЩАЯ ШАПКА (владелец 2026-09-17)
   Регион и мессенджеры вынесены из шапки в тёмную полосу, шапка стала
   однострочной: логотип, меню и три кнопки связи в ряд.
   При прокрутке полоса уезжает, шапка залипает сверху.
   ===================================================================== */

.vkt-topline {
  background: var(--color-navy);
  color: #C9D9E8;
  font-size: var(--text-2xs);
}

.vkt-topline__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 8px;
}

.vkt-topline__geo { white-space: nowrap; }

.vkt-topline__msg { display: flex; align-items: center; gap: var(--space-3); }
.vkt-topline__label { color: #9FB3C8; white-space: nowrap; }

/* Мессенджеры в полосе — с подписями, белым по navy. Кружки мельче
   штатных 32 px: полоса должна быть тонкой, иначе съедает первый экран. */
.vkt-topline .vkt-msg-links { display: flex; align-items: center; gap: var(--space-4); }
.vkt-topline .vkt-msg-links__item { color: var(--color-white); gap: 6px; }
.vkt-topline .vkt-msg-links__name { font-size: var(--text-2xs); }
.vkt-topline .vkt-msg-links__ico { width: 22px; height: 22px; padding: 4px; }

/* Шапка залипает; полоса сверху уезжает вместе со страницей. */
.vkt-header {
  position: sticky;
  top: 0;
}

/* У админов сверху висит панель WP — шапка не должна её перекрывать. */
.admin-bar .vkt-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .vkt-header { top: 46px; } }

/* Тень появляется, когда шапка оторвалась от полосы (класс вешает JS). */
.vkt-header.is-stuck { box-shadow: 0 6px 20px rgba(11, 44, 73, .14); }

/* Три кнопки связи в ряд. */
.vkt-header__actions { flex-direction: row; align-items: center; gap: var(--space-2); }

.vkt-header__phone-btn {
  --h-brand: #0E5A8A;
  --h-signal: #E8722A;
  --h-signal-deep: #CF5F1C;
  min-height: 0;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 9px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--h-brand);
  box-shadow: 0 3px 10px rgba(27, 36, 48, .07), 0 1px 1px rgba(27, 36, 48, .04);
  transition: background .16s ease, color .16s ease, border-color .16s ease,
              box-shadow .16s ease, transform .16s ease;
}

.vkt-header__phone-btn svg { flex: none; }

.vkt-header__phone-btn:hover,
.vkt-header__phone-btn:focus {
  background: linear-gradient(135deg, #F28A47 0%, var(--h-signal) 55%, var(--h-signal-deep) 100%);
  color: var(--color-white);
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(207, 95, 28, .30);
  transform: translateY(-1px);
}

/* Ноутбуки: три кнопки в ряд длинные — ужимаем, потом прячем почту. */
@media (max-width: 1400px) {
  .vkt-header__phone-btn,
  .vkt-header__mail,
  .vkt-header__cta { padding-inline: var(--space-3); font-size: 13px; }
}

@media (max-width: 1250px) {
  .vkt-header__mail { display: none; }
}

@media (max-width: 1100px) {
  .vkt-header__phone-btn svg { display: none; }
}

/* Телефон: полоса оставляет только мессенджеры, шапка — только заявку. */
@media (max-width: 900px) {
  .vkt-topline__geo { display: none; }
  .vkt-topline__label { display: none; }
  .vkt-topline__inner { justify-content: center; }
  .vkt-header__phone-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vkt-header__phone-btn { transition: none; }
  .vkt-header__phone-btn:hover { transform: none; }
}

/* =====================================================================
   КНОПКА «НАВЕРХ» (владелец 2026-09-17, вариант 1)
   Круг 48 px у правого нижнего угла, слева от плавающей кнопки заявки
   (.vkt-msg шириной 222 px при отступе 39 px справа — отсюда right).
   Появляется после экрана прокрутки, класс вешает assets/main.js.
   ===================================================================== */

.vkt-up {
  position: fixed;
  right: 273px;
  bottom: 36px;
  z-index: 7000;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: #0E5A8A;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(27, 36, 48, .14), 0 1px 2px rgba(27, 36, 48, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s,
              background .16s ease, color .16s ease, border-color .16s ease;
}

.vkt-up svg { width: 20px; height: 20px; }

.vkt-up.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

.vkt-up:hover,
.vkt-up:focus-visible {
  background: linear-gradient(135deg, #F28A47 0%, #E8722A 55%, #CF5F1C 100%);
  color: var(--color-white);
  border-color: transparent;
}

.vkt-up:focus-visible { outline: 2px solid #0E5A8A; outline-offset: 3px; }

/* Только десктоп: на телефоне и планшете кнопки нет. */
@media (max-width: 900px) {
  .vkt-up { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vkt-up { transition: opacity .2s ease, visibility .2s; transform: none; }
  .vkt-up.is-visible { transform: none; }
}