/* ============================================================
   Golos Text - локальные woff2 (§2/§7 дизайн-системы).
   Google отдаёт Golos Text v7 как вариативный шрифт: один файл на
   подмножество покрывает веса 400–600. Скачано с fonts.gstatic.com,
   размещено в теме - CDN не используется.
   ============================================================ */
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 600;               /* вариативный диапазон (400/500/600) */
  font-display: swap;
  src: url("../fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/golos-text-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   СочиТиполи - общая тема (прототип для согласования)
   Дизайн-система v1.0. Файл переиспользуется внутренними стр.
   ============================================================ */

/* ---------- 1. Токены (палитра §1, типографика §2, ритм §3) ---------- */
:root {
  /* Палитра - строго §1, других цветов нет */
  --navy-900: #0B1D4F;
  --navy-700: #1B3A7A;
  --accent-600: #0E7FAE;
  --accent-500: #19A7DA;
  --sky-50: #EEF5FB;
  --gray-600: #5A6B85;
  --gray-200: #E3EAF3;
  --white: #FFFFFF;
  --error: #D45454;

  /* Типографика */
  --font: "Golos Text", system-ui, -apple-system, sans-serif;

  /* Ритм */
  --container: 1240px;
  --pad: 32px;                 /* tablet+ */
  --section-y: 96px;           /* desktop */
  --radius-card: 14px;
  --radius-btn: 10px;
  --radius-field: 10px;

  /* Тени (только hover карточек §4) */
  --shadow-card: 0 8px 24px rgba(11, 29, 79, .08);

  /* Движение §6 */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--navy-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-600); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--navy-700); }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }

/* ---------- 2. Типографика ---------- */
h1 { font-size: 44px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
h2 { font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.hl { color: var(--accent-500); }              /* выделение 1–2 слов в заголовке */
.meta { font-size: 14px; color: var(--gray-600); }
.lead { font-size: 19px; line-height: 1.5; color: var(--gray-600); max-width: 620px; }

/* Eyebrow §2 - UPPERCASE + квадрат 8×8 accent-600 */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; color: var(--accent-600);
}
.eyebrow::before {
  content: ""; width: 8px; height: 8px; background: var(--accent-600);
  flex: 0 0 auto;
}
.eyebrow--light { color: var(--accent-500); }
.eyebrow--light::before { background: var(--accent-500); }

/* ---------- 3. Сетка и ритм ---------- */
.container {
  width: 100%; max-width: var(--container);
  margin: 0 auto; padding: 0 var(--pad);
}
.section { padding: var(--section-y) 0; }
.section--sky { background: var(--sky-50); }
.section-head { max-width: 760px; margin-bottom: 40px; }
.section-head h2 { margin-top: 14px; }
.section-head p { margin-top: 14px; }
.section-head--split {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; max-width: none;
}

/* ---------- 4. Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px; border-radius: var(--radius-btn);
  font-size: 16px; font-weight: 500; border: none; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--primary { background: var(--accent-500); color: var(--white); }
.btn--primary:hover { background: var(--accent-600); color: var(--white); }
.btn--secondary {
  background: transparent; color: var(--navy-900);
  border: 1.5px solid var(--navy-900); height: 52px;
}
.btn--secondary:hover { background: var(--navy-900); color: var(--white); }
.btn--on-dark { border-color: rgba(255, 255, 255, .55); color: var(--white); }
.btn--on-dark:hover { background: var(--white); color: var(--navy-900); border-color: var(--white); }
.btn--sm { height: 44px; }
.btn--wide { width: 100%; }

/* Ghost: текст + стрелка */
.ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 500; color: var(--accent-600);
}
.ghost svg { transition: transform .2s var(--ease); }
.ghost:hover svg { transform: translateX(4px); }

/* Иконки §4 - stroke 1.75, accent-600 */
.icon { width: 30px; height: 30px; stroke: var(--accent-600); stroke-width: 1.75;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Шапка §4 ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white); border-bottom: 1px solid transparent;
  transition: box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.header.is-scrolled { border-color: var(--gray-200); box-shadow: 0 2px 12px rgba(11, 29, 79, .05); }
body.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .header { top: 0; }
}
.header__row {
  display: flex; align-items: center; gap: 28px;
  height: 84px;
}
.header__logo img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 24px; margin-left: 8px; }
.nav a { color: var(--navy-900); font-size: 16px; font-weight: 500; }
.nav a:hover { color: var(--accent-600); }
.nav .has-caret::after { content: " ▾"; color: var(--gray-600); font-size: 12px; }
.header__spacer { flex: 1; }
.header__phone { color: var(--navy-900); font-weight: 600; font-size: 16px; white-space: nowrap; }
.header__phone:hover { color: var(--accent-600); }
.header__cta { margin-left: 4px; }

/* Burger / крестик - 3 полоски, height 44px, span'ы центрируются flex'ом.
   При is-open центр.полоска исчезает, крайние сходятся в центр и вращаются
   в аккуратный X. Смещение = (2px height + 5px gap) = 7px до центра. */
.burger {
  display: none; width: 44px; height: 44px; border: none; background: transparent;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0;
}
.burger span { display: block; height: 2px; width: 24px; background: var(--navy-900);
  border-radius: 2px; transform-origin: center;
  transition: transform .25s var(--ease), opacity .15s var(--ease); }
.burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Мобильное меню.
   inset:0 (перекрывает весь экран от самого верха) + padding-top под высоту
   шапки, чтобы контент меню не заезжал под лого/крестик. Шапка (z-50) остаётся
   ВЫШЕ меню (z-45) - крестик кликается; панель меню непрозрачна от top:0, а
   белая шапка ложится поверх её верхних 84px - контент страницы не просвечивает. */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 45;
  background: var(--white); padding: 84px var(--pad) 120px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.is-open { display: block; }
.mobile-menu a { display: block; padding: 16px 0; font-size: 20px; font-weight: 500;
  color: var(--navy-900); border-bottom: 1px solid var(--gray-200); }
/* Телефон и «Поиск» - аккуратные пункты меню в стиле §4, не рамки-пилюли.
   Единственная заливная кнопка в меню - «Оставить заявку» (.btn--primary). */
.mobile-menu__phone {
  border-bottom: 1px solid var(--gray-200) !important;
  font-weight: 600 !important; color: var(--navy-900) !important;
}
.mobile-menu__search {
  display: flex !important; align-items: center; gap: 8px;
  width: 100%; height: auto; padding: 16px 0 !important;
  background: transparent !important; border: none !important;
  justify-content: flex-start; color: var(--navy-900) !important;
  font-size: 20px; font-weight: 500; cursor: pointer;
  border-bottom: 1px solid var(--gray-200) !important;
}
.mobile-menu__search:hover { color: var(--accent-600) !important; }
/* CTA - заливная кнопка: возвращаем padding/центрирование кнопки, снимаем
   border-bottom и left-align, которые пришли от общего правила .mobile-menu a. */
.mobile-menu__cta {
  margin-top: 24px; padding: 0 24px !important;
  border-bottom: none !important; color: var(--white) !important;
}

/* ---------- Поиск: кнопка-лупа в шапке ---------- */
.header__search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border: none; cursor: pointer;
  background: transparent; color: var(--navy-900); border-radius: var(--radius-btn);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.header__search-btn:hover { color: var(--accent-600); background: var(--sky-50); }

/* ---------- Поиск: оверлей ---------- */
.search-overlay {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(11, 29, 79, .55);
  display: flex; align-items: flex-start; justify-content: center;
  /* Закрытое состояние: невидим И не перехватывает клики.
     visibility прячется с задержкой = длительности fade-out,
     чтобы анимация закрытия по opacity успевала отработать. */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s var(--ease), visibility 0s var(--ease) .25s;
}
/* display:flex выше перебивает браузерный дефолт [hidden]{display:none} -
   без этого правила закрытый оверлей оставался полноэкранным слоем
   поверх шапки (z-index 60 > 50) и перехватывал все клики. */
.search-overlay[hidden] { display: none; }
.search-overlay.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .25s var(--ease);
}
.search-overlay__inner {
  position: relative; width: 100%; margin-top: 96px;
  transform: translateY(-12px); transition: transform .25s var(--ease);
}
.search-overlay.is-open .search-overlay__inner { transform: translateY(0); }
.search-overlay__close {
  position: absolute; top: -56px; right: var(--pad);
  width: 44px; height: 44px; padding: 0; border: none; cursor: pointer;
  background: transparent; color: var(--white); border-radius: var(--radius-btn);
}
.search-overlay__close:hover { color: var(--sky-50); }
.search-form {
  display: flex; gap: 10px; align-items: stretch;
  background: var(--white); padding: 12px; border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.search-form__field {
  flex: 1; min-width: 0; border: 1px solid var(--gray-200);
  border-radius: var(--radius-field); padding: 14px 16px;
  font-family: var(--font); font-size: 18px; color: var(--navy-900);
  background: var(--white);
}
.search-form__field:focus { outline: none; border-color: var(--accent-500); }
.search-form__field::placeholder { color: var(--gray-600); }
.search-form__submit { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 640px) {
  .search-overlay__inner { margin-top: 72px; }
  .search-form__submit span { display: none; }
  .search-form__field { font-size: 16px; }
}

/* ---------- Поиск: список страниц/статей на search.php ---------- */
.search-results { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.search-results__item { padding: 20px 0; border-bottom: 1px solid var(--gray-200); }
.search-results__link { font-size: 20px; font-weight: 600; color: var(--navy-900); }
.search-results__link:hover { color: var(--accent-600); }
.search-results__excerpt { margin: 8px 0 0; color: var(--gray-600); font-size: 15px; }

/* Липкая нижняя панель (mobile) §4 */
.tabbar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 48;
  background: var(--white); border-top: 1px solid var(--gray-200);
  grid-template-columns: repeat(4, 1fr); padding: 6px 0 max(6px, env(safe-area-inset-bottom));
}
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; color: var(--navy-900); padding: 6px 0; }
.tabbar a.is-accent { color: var(--accent-600); }
.tabbar svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.75;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   СЕКЦИИ ГЛАВНОЙ
   ============================================================ */

/* ---------- Герой (светлый, вариант A) ---------- */
.hero { background: var(--white); padding: 64px 0 88px; overflow: hidden; }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.hero h1 { margin: 18px 0 20px; max-width: 620px; }
.hero .lead { max-width: 540px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero__trust { display: flex; gap: 32px; margin-top: 40px; flex-wrap: wrap; }
.hero__trust-item { display: flex; flex-direction: column; }
.hero__trust-num { font-size: 28px; font-weight: 600; color: var(--navy-900); line-height: 1; }
.hero__trust-lbl { font-size: 14px; color: var(--gray-600); margin-top: 6px; }
.hero__media { position: relative; }
.hero__media img {
  width: 100%; height: 520px; object-fit: cover; border-radius: var(--radius-card);
}
/* Плашка на фото - одна, лаконичная */
.hero__badge {
  position: absolute; left: 20px; bottom: 20px;
  background: var(--white); border-radius: 12px; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow-card);
}
.hero__badge svg { width: 26px; height: 26px; stroke: var(--accent-600); stroke-width: 1.75;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero__badge b { font-size: 15px; display: block; }
.hero__badge span { font-size: 13px; color: var(--gray-600); }

/* ---------- Преимущества героя главной: «мерная линейка» ----------
   Полоса на всю ширину секции под текстом и фото. Пять равных колонок,
   разделители 1px, засечки-штрихи 2×8 --accent-600 поперёк линейки.
   Засечка намеренно НЕ повторяет квадрат 8×8 маркера eyebrow (§2): eyebrow
   на первом экране один, а засечек пять - одинаковая форма разменяла бы
   смысловой атом eyebrow на декор. Вертикальный штрих поперёк линии
   читается как градация шкалы, а не как маркер. Скоуп .page-front: класс
   .hero__trust выше принадлежит сервисным шаблонам - его не трогаем.
   Приём: margin 0 -20px у строки при padding 0 20px у ячеек - внутренние
   отступы одинаковы у всех пяти, но текст 1-й колонки садится ровно на
   левый край H1, а правый край 5-й - на правый край фото. Сама линейка
   (.hero__facts, без отрицательного margin) = ширине контента контейнера. */
.page-front .hero__facts { margin-top: 56px; border-top: 1px solid var(--gray-200); }
.page-front .hero__facts-row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 -20px; list-style: none; padding: 0;
}
.page-front .hero__facts-item { position: relative; min-width: 0; padding: 28px 20px 0; }
.page-front .hero__facts-item + .hero__facts-item { border-left: 1px solid var(--gray-200); }
.page-front .hero__facts-item::before {
  content: ""; position: absolute; left: 20px; top: -4px;
  width: 2px; height: 8px; background: var(--accent-600);
}
.page-front .hero__facts-num {
  display: block; font-size: 20px; font-weight: 600;
  color: var(--navy-900); line-height: 1.25;
}
.page-front .hero__facts-lbl {
  display: block; font-size: 14px; font-weight: 400;
  color: var(--gray-600); line-height: 1.4; margin-top: 8px; text-wrap: balance;
}

@media (max-width: 1024px) {
  .page-front .hero__facts-num { font-size: 18px; }
}

/* 860px = точка схлопывания .hero__grid: полоса -> пять компактных строк */
@media (max-width: 860px) {
  .page-front .hero__facts { margin-top: 40px; }
  .page-front .hero__facts-row { display: block; margin: 0; }
  .page-front .hero__facts-item {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; padding: 13px 0 12px; border-left: 0;
  }
  .page-front .hero__facts-item + .hero__facts-item {
    border-top: 1px solid var(--gray-200); border-left: 0;
  }
  .page-front .hero__facts-item::before { left: 0; top: -4px; }
  .page-front .hero__facts-lbl { margin-top: 0; text-align: right; }
}

/* 481-860 = планшет. Строки уже сложены, но линейка тут шириной 450-780px,
   и space-between разносит пару «значение - подпись» на 400-600px: строка
   читается как прайс, потерявший отточия. Линейку во всю ширину hero не
   трогаем (это утверждённая композиция) - поджимаем саму пару в две колонки:
   значение в колонке 104px+16 gap, подпись начинается сразу за ним. Пустота
   уходит ЗА пару, а не внутрь неё, и строка снова читается как одна мысль.
   На <=480 (телефон) ничего не меняем: там линейка 335-426px, space-between
   держит подписи ровным правым столбцом - вариант согласован с клиентом. */
@media (min-width: 481px) and (max-width: 860px) {
  .page-front .hero__facts-item { justify-content: flex-start; }
  .page-front .hero__facts-num { flex: 0 0 auto; min-width: 104px; }
  .page-front .hero__facts-lbl { text-align: left; }
}

@media (max-width: 420px) {
  .page-front .hero__facts-num { font-size: 17px; }
}

/* ---------- Цифры доверия §2 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { border-left: 2px solid var(--accent-500); padding-left: 20px; }
.stat__num { font-size: 56px; font-weight: 600; line-height: 1; color: var(--navy-900); }
.stat__lbl { font-size: 15px; color: var(--gray-600); margin-top: 12px; }

/* ---------- Услуги (4 формулы) §4 ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.card {
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-card); padding: 24px;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
/* На sky-подложке - без рамки §4 */
.section--sky .card { border-color: transparent; }
.section--sky .card:hover { border-color: transparent; }

.service .icon { margin-bottom: 18px; }
.service h3 { margin-bottom: 8px; }
.service p { font-size: 15px; color: var(--gray-600); margin-bottom: 18px; }
.service__foot { display: flex; align-items: center; justify-content: space-between; }
.service__price { font-weight: 600; color: var(--navy-900); font-size: 16px; }
.service .ghost svg { width: 18px; height: 18px; stroke: var(--accent-600); stroke-width: 1.75;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Плитки категорий каталога ---------- */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-card); padding: 22px;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.cat:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.cat .icon { width: 32px; height: 32px; }
.cat h3 { font-size: 17px; }
.cat span { font-size: 13px; color: var(--gray-600); margin-top: -6px; }
.cat__arrow { margin-top: auto; }

/* ---------- Товары в подборке ---------- */
.product {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-card); padding: 20px;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.product:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.product__media { position: relative; height: 190px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 16px; }
.product__media img { max-height: 100%; width: auto; object-fit: contain; }
.product__tag {
  position: absolute; top: 0; left: 0; font-size: 12px; font-weight: 500;
  color: var(--accent-600); border: 1px solid var(--accent-600);
  border-radius: 999px; padding: 3px 10px;
}
.product__brand { font-size: 13px; color: var(--gray-600); }
.product h3 { font-size: 17px; margin: 4px 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product__specs { font-size: 14px; color: var(--gray-600); margin-bottom: 14px; }
.product__specs li { padding: 2px 0; }
.product__foot { margin-top: auto; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; }
.product__price { font-size: 20px; font-weight: 600; color: var(--navy-900); }
.product__price small { display: block; font-size: 12px; font-weight: 400; color: var(--gray-600); }

/* ---------- Наши работы (кейсы) ---------- */
.cases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.case {
  border-radius: var(--radius-card); overflow: hidden; background: var(--white);
  border: 1px solid var(--gray-200);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.case:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.case__img { height: 200px; width: 100%; object-fit: cover; }
.case__body { padding: 18px 20px 22px; }
.case__type { margin-bottom: 10px; }
.case__body h3 { font-size: 17px; margin-bottom: 14px; }
.case__nums { display: flex; gap: 18px; }
.case__num b { display: block; font-size: 20px; color: var(--navy-900); font-weight: 600; }
.case__num span { font-size: 12px; color: var(--gray-600); }

/* ---------- Отзывы ---------- */
.reviews-head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.rating {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: 999px; padding: 10px 18px; font-weight: 600;
}
.rating .stars { color: var(--accent-500); letter-spacing: 2px; }
.rating small { font-weight: 400; color: var(--gray-600); }
.review { display: flex; flex-direction: column; }
.review__stars { color: var(--accent-500); letter-spacing: 2px; margin-bottom: 12px; }
.review__text { font-size: 16px; line-height: 1.5; margin-bottom: 18px; }
.review__foot { margin-top: auto; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px; }
.review__who b { font-weight: 600; display: block; }
.review__who span { font-size: 13px; color: var(--gray-600); }
.review__src { font-size: 12px; color: var(--gray-600); border: 1px solid var(--gray-200);
  border-radius: 6px; padding: 4px 8px; white-space: nowrap; }

/* ---------- Этапы работы §4 ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.step { position: relative; }
.step__num { font-size: 44px; font-weight: 600; color: rgba(25, 167, 218, .28); line-height: 1;
  margin-bottom: 14px; }
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--gray-600); }

/* ---------- Бренды-лента §4 ---------- */
.brands { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 16px; }
.brand {
  font-size: 18px; font-weight: 600; letter-spacing: .01em;
  color: var(--gray-600); border: 1px solid var(--gray-200);
  border-radius: 10px; padding: 14px 26px; background: var(--white);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.brand:hover { color: var(--accent-600); border-color: var(--accent-600); }

/* ---------- FAQ (аккордеон) §4 ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--gray-200); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; background: transparent; border: none; text-align: left;
  padding: 22px 0; font-size: 18px; font-weight: 500; color: var(--navy-900);
}
.faq__q .sign { flex: 0 0 auto; width: 24px; height: 24px; position: relative; }
.faq__q .sign::before, .faq__q .sign::after {
  content: ""; position: absolute; background: var(--accent-600);
  top: 50%; left: 50%; transition: transform .25s var(--ease);
}
.faq__q .sign::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.faq__q .sign::after  { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.faq__item.is-open .sign::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__a { overflow: hidden; height: 0; transition: height .3s var(--ease); }
.faq__a-inner { padding: 0 0 22px; font-size: 16px; color: var(--gray-600); max-width: 720px; }

/* ---------- Форма + карта §4 ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--gray-200); border-radius: var(--radius-card); overflow: hidden; }
.contact-form { padding: 44px; }
.contact-form h2 { margin-bottom: 10px; }
.contact-form .lead { margin-bottom: 28px; font-size: 17px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; margin-bottom: 8px; color: var(--navy-900); }
.field input, .field textarea {
  width: 100%; height: 52px; border: 1px solid var(--gray-200);
  border-radius: var(--radius-field); padding: 0 16px; font-family: inherit;
  font-size: 16px; color: var(--navy-900); background: var(--white);
  transition: border-color .2s var(--ease);
}
.field textarea { height: 96px; padding: 14px 16px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-600); }
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 22px;
  font-size: 13px; color: var(--gray-600); }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent-600); flex: 0 0 auto; }
.contact-map { position: relative; background: var(--sky-50); min-height: 100%; }
.contact-map__placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 32px;
}
.contact-map__placeholder svg { width: 44px; height: 44px; stroke: var(--accent-600);
  stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.contact-map__placeholder b { font-size: 17px; color: var(--navy-900); }
.contact-map__info { position: absolute; left: 24px; bottom: 24px; right: 24px;
  background: var(--white); border-radius: 12px; padding: 20px 22px; box-shadow: var(--shadow-card); }
.contact-map__info div { margin-bottom: 8px; font-size: 15px; }
.contact-map__info div:last-child { margin-bottom: 0; }
.contact-map__info b { color: var(--navy-900); }

/* ============================================================
   5. ТЁМНЫЕ СЕКЦИИ (дозированно): CTA-лента + футер
   ============================================================ */
.cta-band { background: var(--navy-900); color: var(--white); }
.cta-band .container { display: flex; align-items: center; justify-content: space-between;
  gap: 40px; padding-top: 72px; padding-bottom: 72px; flex-wrap: wrap; }
.cta-band h2 { color: var(--white); max-width: 640px; }
.cta-band p { color: #C7D4EA; margin-top: 14px; max-width: 560px; }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.footer { background: var(--navy-900); color: #C7D4EA; padding: 72px 0 32px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px;
  padding-bottom: 44px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.footer__logo { width: 158px; height: 34px; margin-bottom: 18px;
  object-fit: contain; object-position: left center;
  filter: brightness(0) invert(1); opacity: .95; }
.footer__about { font-size: 15px; line-height: 1.6; max-width: 320px; }
.footer h4 { color: var(--white); font-size: 15px; font-weight: 600; margin: 0 0 18px; }
.footer__col a { display: block; color: #C7D4EA; padding: 6px 0; font-size: 15px; }
.footer__col a:hover { color: var(--white); }
.footer__contact div { margin-bottom: 12px; font-size: 15px; }
.footer__contact a { color: var(--white); font-weight: 600; }
.footer__contact .muted { color: #C7D4EA; font-weight: 400; font-size: 13px; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 28px; font-size: 13px; color: #8FA2C4; flex-wrap: wrap; }
.footer__bottom a { color: #8FA2C4; }
.footer__bottom a:hover { color: var(--white); }

/* ============================================================
   6. Движение - появление секций (уважая reduced-motion)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(8px); }
.reveal.is-in { opacity: 1; transform: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease); }
.reveal.d1 { transition-delay: .06s; }
.reveal.d2 { transition-delay: .12s; }
.reveal.d3 { transition-delay: .18s; }
.reveal.d4 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 1024px) {
  :root { --section-y: 72px; }
  .hero__grid { gap: 36px; }
  .grid-4, .cats, .cases, .steps { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .grid-6, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav, .header__phone { display: none; }
  .burger { display: flex; }
  .header__cta { display: none; }
  .header__search-btn { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__media img { height: 320px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-map { min-height: 340px; }
}

@media (max-width: 640px) {
  :root { --pad: 20px; --section-y: 56px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  h3 { font-size: 18px; }
  body { font-size: 16px; padding-bottom: 64px; }   /* место под tabbar */
  .grid-4, .grid-6, .cats, .cases, .steps { grid-template-columns: 1fr 1fr; gap: 16px; }
  .grid-3 { grid-template-columns: 1fr; gap: 16px; }   /* отзывы/кейсы/сравнение - 1 колонка §3 */
  .steps { grid-template-columns: 1fr; }
  .stat__num { font-size: 40px; }
  .section-head--split, .reviews-head { flex-direction: column; align-items: flex-start; }
  .cta-band .container { flex-direction: column; align-items: flex-start; }
  .contact-form { padding: 28px 20px; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .tabbar { display: grid; }
  .product__media { height: 150px; }
  .case__img { height: 170px; }
}

@media (max-width: 420px) {
  .cats, .cases, .grid-4, .grid-3, .grid-6 { grid-template-columns: 1fr; }
}

/* ============================================================
   ВНУТРЕННИЕ СТРАНИЦЫ (услуга + карточка товара)
   Только новые классы - правила главной не затронуты.
   Палитра/шрифты строго из токенов §1–§2.
   ============================================================ */

/* ---------- Хлебные крошки ---------- */
.crumbs { padding: 20px 0 4px; font-size: 14px; }
.crumbs .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.crumbs a { color: var(--gray-600); }
.crumbs a:hover { color: var(--accent-600); }
.crumbs__sep { color: var(--gray-200); }
.crumbs [aria-current="page"] { color: var(--navy-900); }

/* Визуально скрытый текст (подписи таблиц) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Хиро внутренней страницы (светлый, как §герой A) ---------- */
.page-hero { padding: 28px 0 72px; overflow: hidden; }
.page-hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.page-hero h1 { margin: 16px 0 20px; max-width: 600px; }
.page-hero .lead { max-width: 560px; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.page-hero__trust { margin-top: 36px; }
.page-hero__media { position: relative; }
.page-hero__media img {
  width: 100%; height: 460px; object-fit: cover; border-radius: var(--radius-card);
}
.page-hero__media .hero__badge svg path { stroke: var(--accent-600); }

/* ---------- Две колонки: для кого / что входит ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.two-col h2 { margin: 14px 0 24px; }
.checklist { display: flex; flex-direction: column; gap: 18px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; }
.checklist svg {
  width: 24px; height: 24px; flex: 0 0 auto; margin-top: 2px;
  stroke: var(--accent-600); stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
.checklist b { display: block; font-size: 17px; color: var(--navy-900); }
.checklist span { display: block; font-size: 15px; color: var(--gray-600); margin-top: 2px; }

/* ---------- Прайс-таблица ---------- */
.price-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: var(--radius-card); -webkit-overflow-scrolling: touch; }
.price, .spec-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.price th, .price td, .spec-table th, .spec-table td {
  text-align: left; padding: 16px 20px; vertical-align: top;
}
.price thead th {
  background: var(--sky-50); color: var(--navy-900); font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: .04em;
}
.price tbody tr { border-top: 1px solid var(--gray-200); }
.price tbody th { font-weight: 600; color: var(--navy-900); width: 34%; }
.price td { color: var(--gray-600); }
.price__cell-num { white-space: nowrap; color: var(--navy-900); font-weight: 600; text-align: right; }
.price__cell-num small,
.spec-table td small {
  display: block; font-size: 11px; font-weight: 400; color: var(--gray-600);
}
.price-note { font-size: 14px; color: var(--gray-600); margin-top: 16px; max-width: 720px; }

/* Таблица характеристик (в табе) */
.spec-table tbody tr { border-top: 1px solid var(--gray-200); }
.spec-table tbody tr:first-child { border-top: none; }
.spec-table th { width: 42%; font-weight: 500; color: var(--navy-900); }
.spec-table td { color: var(--gray-600); }

/* ============================================================
   КАРТОЧКА ТОВАРА
   ============================================================ */
.product-top { padding: 24px 0 8px; }
.product-top__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start;
}
.product-top__grid > * { min-width: 0; }

/* Галерея */
.gallery__stage {
  position: relative; background: var(--sky-50); border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: center;
  padding: 32px; min-height: 380px;
}
.gallery__stage img { max-height: 340px; width: auto; object-fit: contain; }
.gallery__stage .product__tag { top: 16px; left: 16px; background: var(--white); }
.gallery__thumbs { display: flex; gap: 12px; margin-top: 16px; }
.gallery__thumb {
  width: 84px; height: 84px; border: 1px solid var(--gray-200); background: var(--white);
  border-radius: 10px; padding: 8px; display: flex; align-items: center; justify-content: center;
  transition: border-color .2s var(--ease);
}
.gallery__thumb img { max-width: 100%; max-height: 100%; width: auto; object-fit: contain; }
.gallery__thumb:hover { border-color: var(--accent-600); }
.gallery__thumb.is-active { border-color: var(--accent-600); border-width: 2px; }

/* Блок покупки */
.buybox__brand { font-size: 14px; }
.buybox h1 { margin: 8px 0 16px; }
.buybox__rate { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 24px; }
.buybox__rate .review__stars { margin-bottom: 0; }
.buybox__stock {
  font-size: 13px; color: var(--accent-600); border: 1px solid var(--accent-600);
  border-radius: 999px; padding: 3px 12px;
}
.buybox__specs {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--gray-200); border-radius: var(--radius-card); overflow: hidden; margin-bottom: 24px;
}
.buybox__specs li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 18px; font-size: 15px; border-top: 1px solid var(--gray-200);
}
.buybox__specs li:first-child { border-top: none; }
.buybox__specs span { color: var(--gray-600); }
.buybox__specs b { color: var(--navy-900); font-weight: 600; }
.buybox__price {
  background: var(--sky-50); border-radius: var(--radius-card);
  padding: 20px 22px; margin-bottom: 20px;
}
.buybox__price-now { font-size: 32px; font-weight: 600; color: var(--navy-900); line-height: 1.1; }
.buybox__price-now small { display: block; font-size: 12px; font-weight: 400; color: var(--gray-600); margin-top: 4px; }
.buybox__price-note { display: block; font-size: 14px; color: var(--gray-600); margin-top: 8px; }
.buybox__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 24px; }
.buybox__actions .btn { flex: 1 1 auto; }
.buybox__perks { display: flex; flex-direction: column; gap: 12px; }
.buybox__perks li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--navy-900); }
.buybox__perks svg {
  width: 24px; height: 24px; flex: 0 0 auto; stroke: var(--accent-600); stroke-width: 1.75;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* Табы */
.tabs__nav { display: flex; gap: 8px; border-bottom: 1px solid var(--gray-200); flex-wrap: wrap; }
.tabs__tab {
  background: transparent; border: none; padding: 14px 4px; margin-bottom: -1px;
  font-size: 17px; font-weight: 500; color: var(--gray-600);
  border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tabs__tab:hover { color: var(--navy-900); }
.tabs__tab.is-active { color: var(--navy-900); border-bottom-color: var(--accent-500); }
.tabs__nav .tabs__tab + .tabs__tab { margin-left: 20px; }
.tabs__panel { padding-top: 32px; }
.tabs__panel[hidden] { display: none; }
.prose { max-width: 720px; }
.prose p { margin-bottom: 16px; color: var(--navy-900); }
.prose p:last-child { margin-bottom: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.reviews-list .review__src { border-color: var(--accent-600); color: var(--accent-600); }

/* ---------- Адаптив внутренних страниц ---------- */
@media (max-width: 1024px) {
  .page-hero__grid { gap: 36px; }
}
@media (max-width: 860px) {
  .page-hero__grid { grid-template-columns: 1fr; }
  .page-hero__media { order: -1; }
  .page-hero__media img { height: 300px; }
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .product-top__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .price th, .price td, .spec-table th, .spec-table td { padding: 12px 14px; }
  .price, .spec-table { font-size: 15px; }
  .buybox__price-now { font-size: 28px; }
  .buybox__actions .btn { flex: 1 1 100%; }
  .gallery__thumb { width: 64px; height: 64px; }
  .buybox h1 { overflow-wrap: anywhere; }

  /* Намёк на свайп для прокручиваемого прайса - только на мобиле.
     Градиент-фейд как scroll-shadow: правый край подсвечен, пока есть куда
     листать, и гаснет, когда дошли до конца. Крепление фона к вьюпорту скролла
     (background-attachment: local для белых «крышек» + scroll для теней) -
     чистый CSS, без JS и без правки шаблонов. */
  .price-wrap {
    background:
      linear-gradient(to right, var(--white) 30%, rgba(255,255,255,0)) left center / 22px 100% no-repeat local,
      linear-gradient(to left, var(--white) 30%, rgba(255,255,255,0)) right center / 22px 100% no-repeat local,
      linear-gradient(to right, rgba(15,32,64,.10), rgba(15,32,64,0)) left center / 14px 100% no-repeat scroll,
      linear-gradient(to left, rgba(15,32,64,.10), rgba(15,32,64,0)) right center / 14px 100% no-repeat scroll;
  }
}
/* Опциональная подпись-намёк над прайсом (класс .price-hint) - если решим
   добавить текст «→ листайте вправо»; по умолчанию скрыта, видна только на мобиле. */
.price-hint { display: none; font-size: 13px; color: var(--gray-600); margin: 0 0 8px; text-align: right; }
@media (max-width: 640px) { .price-hint { display: block; } }

/* ============================================================
   НОВЫЕ ОБЩИЕ КОМПОНЕНТЫ (v1.1) - добавлено ПОСЛЕ существующих правил.
   Ничего выше не изменено. Только новые классы, палитра/шрифты из §1–§2.
   Разделы: A) выпадающее «Услуги»  B) хаб услуг
            C) блоки «О компании»    D) контакты  E) страница 404
   ============================================================ */

/* ---------- A. Выпадающее меню «Услуги» (доступный дропдаун) ---------- */
/* Открытие по hover И по фокусу/клику (JS ставит .is-open на <li>).
   Работает с клавиатуры: <a> фокусируемая, подменю - обычные ссылки. */
.nav .has-dropdown { position: relative; }
.nav__toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: none; padding: 0;
  color: var(--navy-900); font-size: 16px; font-weight: 500; font-family: inherit;
  cursor: pointer; line-height: inherit;
}
.nav__toggle:hover { color: var(--accent-600); }
.nav__toggle::after { content: "▾"; color: var(--gray-600); font-size: 12px; transition: transform .2s var(--ease); }
.nav .has-dropdown.is-open > .nav__toggle::after { transform: rotate(180deg); }
.nav__submenu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  min-width: 260px; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s var(--ease);
}
.nav__submenu::before { /* «мостик» чтобы курсор не терял меню в зазоре */
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.nav .has-dropdown:hover > .nav__submenu,
.nav .has-dropdown:focus-within > .nav__submenu,
.nav .has-dropdown.is-open > .nav__submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__submenu a {
  display: block; padding: 11px 14px; border-radius: 8px;
  font-size: 15px; font-weight: 500; color: var(--navy-900); white-space: nowrap;
}
.nav__submenu a:hover, .nav__submenu a:focus-visible {
  background: var(--sky-50); color: var(--accent-600); outline: none;
}
.nav__submenu a span { display: block; font-size: 12px; font-weight: 400; color: var(--gray-600); margin-top: 2px; }

/* Раскрытие подменю «Услуги» в мобильном меню (список) */
.mobile-menu__group > a { border-bottom: none; }
.mobile-menu__sub { padding: 0 0 8px 14px; }
.mobile-menu__sub a { font-size: 16px; padding: 10px 0; color: var(--gray-600); border-bottom: none; }
.mobile-menu__sub a:hover { color: var(--accent-600); }

/* Активный пункт текущей страницы */
.nav a[aria-current="page"], .nav__toggle[aria-current="page"] { color: var(--accent-600); }

/* ---------- B. Хаб «Услуги» - крупные карточки услуг ---------- */
.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Хаб услуг с 4 карточками: 4 в ряд на десктопе; ≤1024 → 2×2, ≤640 → колонка (наследует медиа-запросы .svc-cards ниже). */
.svc-cards--4up { grid-template-columns: repeat(4, 1fr); }
.svc-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: var(--radius-card); padding: 32px 28px;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.svc-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.svc-card__icon {
  width: 56px; height: 56px; border-radius: 14px; background: var(--sky-50);
  display: flex; align-items: center; justify-content: center; margin-bottom: 22px;
}
.svc-card__icon svg { width: 30px; height: 30px; stroke: var(--accent-600); stroke-width: 1.75;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
.svc-card h3 { font-size: 20px; margin-bottom: 10px; }
.svc-card p { font-size: 15px; color: var(--gray-600); margin-bottom: 20px; }
.svc-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.svc-card__price { font-weight: 600; color: var(--navy-900); font-size: 17px; }
.svc-card__price small { display: block; font-size: 11px; font-weight: 400; color: var(--gray-600); }
.svc-card .ghost svg { width: 18px; height: 18px; stroke: var(--accent-600); stroke-width: 1.75;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Тизер «Наши работы» на хабе - переиспользует .cases/.case */
.svc-teaser { margin-top: 56px; }

/* ---------- C. Блоки страницы «О компании» ---------- */
/* Цифры доверия на светлой подложке (как .stats, но допускается на белом) */
.about-intro { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.about-intro .prose p { margin-bottom: 16px; }

/* Сертификаты / статусы - плитки, сгруппированы по статусу */
.cert-group { margin-top: 40px; }
.cert-group:first-child { margin-top: 0; }
.cert-group__title { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cert-group__title h3 { font-size: 18px; }
.cert-group__badge {
  font-size: 12px; font-weight: 500; color: var(--accent-600);
  border: 1px solid var(--accent-600); border-radius: 999px; padding: 3px 12px; text-transform: uppercase;
  letter-spacing: .04em;
}
.certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cert {
  aspect-ratio: 3 / 4; border: 1px solid var(--gray-200); border-radius: var(--radius-card);
  background: var(--white); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 12px; text-align: center; padding: 22px; color: var(--gray-600);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.cert:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); border-color: var(--accent-600); }
.cert svg { width: 40px; height: 40px; stroke: var(--accent-600); stroke-width: 1.5;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cert b { font-size: 14px; font-weight: 600; color: var(--navy-900); }
.cert span { font-size: 12px; color: var(--gray-600); }

/* Благодарственные письма юрлиц - карточка = скан-плейсхолдер + подпись */
.letters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.letter {
  border: 1px solid var(--gray-200); border-radius: var(--radius-card); overflow: hidden; background: var(--white);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.letter:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.letter__scan {
  aspect-ratio: 210 / 297; background: var(--navy-900);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center; padding: 28px; color: #C7D4EA;
}
.letter__scan svg { width: 44px; height: 44px; stroke: var(--accent-500); stroke-width: 1.5;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
.letter__scan b { color: var(--white); font-size: 15px; }
.letter__scan span { font-size: 13px; }
.letter__caption { padding: 18px 20px; }
.letter__caption b { display: block; font-size: 15px; color: var(--navy-900); }
.letter__caption span { display: block; font-size: 13px; color: var(--gray-600); margin-top: 4px; }
/* На sky-подложке письмам рамка не нужна */
.section--sky .letter { border-color: transparent; }

/* ---------- D. Контакты ---------- */
.contacts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-list { display: flex; flex-direction: column; gap: 4px; }
.contact-row {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 0; border-bottom: 1px solid var(--gray-200);
}
.contact-row:last-child { border-bottom: none; }
.contact-row__ico {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; background: var(--sky-50);
  display: flex; align-items: center; justify-content: center;
}
.contact-row__ico svg { width: 24px; height: 24px; stroke: var(--accent-600); stroke-width: 1.75;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
.contact-row__body { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.contact-row__lbl { font-size: 13px; color: var(--gray-600); text-transform: uppercase; letter-spacing: .04em; }
.contact-row__val { font-size: 18px; font-weight: 600; color: var(--navy-900); }
.contact-row__val a { color: var(--navy-900); }
.contact-row__val a:hover { color: var(--accent-600); }
.contact-row__note { font-size: 14px; color: var(--gray-600); }
/* Мессенджеры */
.messengers { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.messenger {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--navy-900); border-radius: var(--radius-btn);
  padding: 0 18px; height: 44px; font-size: 15px; font-weight: 500; color: var(--navy-900);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.messenger:hover { background: var(--navy-900); color: var(--white); }
.messenger svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.75;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* Крупный плейсхолдер карты (navy-подложка) */
.map-placeholder {
  background: var(--navy-900); border-radius: var(--radius-card);
  min-height: 420px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; text-align: center; padding: 40px; color: #C7D4EA;
}
.map-placeholder svg { width: 48px; height: 48px; stroke: var(--accent-500); stroke-width: 1.5;
  fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-placeholder b { font-size: 18px; color: var(--white); }
.map-placeholder .meta { color: #8FA2C4; max-width: 360px; }
/* Встраиваемая Яндекс.Карта (iframe) */
.map-embed {
  position: relative; width: 100%; height: 360px;
  border-radius: var(--radius-card); overflow: hidden; background: var(--sky-50);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* Вариант «заполнить родителя» (внутри .contact-map - absolute inset:0) */
.map-embed--fill { position: absolute; inset: 0; height: auto; border-radius: 0; }
/* Строка реквизитов */
.requisites {
  margin-top: 24px; padding: 22px 24px; background: var(--sky-50);
  border-radius: var(--radius-card); font-size: 14px; color: var(--gray-600); line-height: 1.7;
}
.requisites b { color: var(--navy-900); font-weight: 600; }

/* ---------- E. Страница 404 ---------- */
.error-page {
  min-height: 56vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 80px 0;
}
.error-page__inner { max-width: 620px; }
.error-code {
  font-size: 140px; font-weight: 600; line-height: 1; color: var(--navy-900);
  letter-spacing: -.02em;
}
.error-code span { color: var(--accent-500); }
.error-page h1 { margin: 8px 0 16px; }
.error-page .lead { margin: 0 auto 32px; }
.error-page__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.error-page__phone { margin-top: 26px; font-size: 15px; color: var(--gray-600); }
.error-page__phone a { font-weight: 600; }

/* ---------- Футер: колонка с реквизитами (новая строка) ---------- */
.footer__legal {
  display: block; margin-top: 10px; font-size: 12px; line-height: 1.6; color: #8FA2C4; max-width: 340px;
}

/* ============================================================
   Адаптив новых компонентов
   ============================================================ */
@media (max-width: 1024px) {
  .svc-cards, .letters { grid-template-columns: repeat(2, 1fr); }
  .certs { grid-template-columns: repeat(3, 1fr); }
  .about-intro { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 860px) {
  .contacts-grid { grid-template-columns: 1fr; gap: 36px; }
  .map-placeholder { min-height: 320px; }
}
@media (max-width: 640px) {
  .map-embed { height: 260px; }
  /* .contact-map: карта заполняет колонку, задаём высоту через min-height контейнера */
  .contact-map { min-height: 300px; }
}
@media (max-width: 640px) {
  .svc-cards, .letters, .certs { grid-template-columns: 1fr; gap: 16px; }
  .certs { grid-template-columns: 1fr 1fr; }
  .error-code { font-size: 96px; }
  .error-page__actions { flex-direction: column; }
  .error-page__actions .btn { width: 100%; }
  /* На мобиле дропдаун-подменю не всплывает - используется бургер */
  .nav__submenu { position: static; box-shadow: none; }
}
@media (max-width: 420px) {
  .certs { grid-template-columns: 1fr; }
}

/* ============================================================
   СИСТЕМНЫЕ ФИКСЫ v1.2 - обобщение локальных page-specific правок
   после полировки 17 страниц. Только добавления; существующие
   правила выше не тронуты (кроме .review__foot: center→flex-start).
   Локальные дубли на страницах совместимы с этими правилами.
   ============================================================ */

/* 1. Прайс-таблицы: колонка цены - вправо.
   Базовое `.price th, .price td { text-align:left }` (0,1,1) перебивало
   `.price__cell-num` (0,1,0); поднимаем специфичность до (0,2,1). */
.price td.price__cell-num,
.price th.price__cell-num { text-align: right; }

/* 2. Шапка: пункты меню не переносятся в 2 строки */
.nav a, .nav__toggle { white-space: nowrap; }

/* 3. Карточки услуг на главной: цена/ссылка прижаты к низу ряда
   (аналогично .svc-card на хабе услуг) */
.service { display: flex; flex-direction: column; }
.service__foot { margin-top: auto; }

/* 5. Этапы: модификатор на 5 шагов (uslugi.html) - без орфана «05» */
.steps--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) {
  .steps--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .steps--5 { grid-template-columns: 1fr; }
}

/* 6. Reveal-фолбэк: печать/полностраничные скриншоты - контент видим.
   Фолбэк без JS - noscript-блок в <head> каждой страницы (см. партиалы). */
@media print {
  .reveal { opacity: 1; transform: none; }
}

/* 7. Шапка таблицы .spec-table (как у .price, но без заливки) -
   для 3+-колоночных таблиц в статьях/характеристиках */
.spec-table thead th {
  font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gray-600); width: auto; padding-top: 0; padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-200); vertical-align: bottom;
}

/* ============================================================
   PAGE-SPECIFIC (перенесено из inline <style> прототипа).
   Заскоуплено по body-классам темы (WP добавляет page-template-*,
   single-*, blog, post-type-archive-*, а тема - page-slug-* и page-front).
   Единый файл стилей - §7 (никаких inline <style> в шаблонах).
   ============================================================ */

/* ---------- Каталог (katalog.html → page-template katalog / WooCommerce shop) ---------- */
.page-template-page-katalog .toolbar,
.woocommerce-page .toolbar,
.post-type-archive-product .toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 0 22px; border-bottom: 1px solid var(--gray-200); margin-bottom: 32px;
}
.toolbar__count { font-weight: 600; color: var(--navy-900); }
.toolbar__count b { color: var(--accent-600); }
.toolbar__spacer { flex: 1 1 auto; }
.toolbar__sort {
  height: 44px; padding: 0 40px 0 16px; border: 1px solid var(--gray-200);
  border-radius: var(--radius-field); background: var(--white);
  font: 500 15px var(--font); color: var(--navy-900); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.toolbar__view { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--gray-200); border-radius: var(--radius-field); }
.toolbar__view button {
  width: 36px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 7px; background: transparent; cursor: pointer; color: var(--gray-600);
}
.toolbar__view button.is-active { background: var(--sky-50); color: var(--accent-600); }
.toolbar__view svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; }

.pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 48px; }
.pagination a, .pagination span {
  min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--gray-200); border-radius: var(--radius-btn);
  font: 500 15px var(--font); color: var(--navy-900); text-decoration: none; background: var(--white);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.pagination a:hover { border-color: var(--accent-600); color: var(--accent-600); }
.pagination .is-active,
.pagination .current { background: var(--accent-500); border-color: var(--accent-500); color: var(--white); }
.pagination .is-gap { border: 0; background: transparent; color: var(--gray-600); }
.pagination .pagination__next svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; margin-left: 6px; }

.helper { display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
  background: var(--sky-50); border-radius: var(--radius-card); padding: 32px 36px; }
.helper h2 { margin: 0; }
.helper p { margin: 10px 0 0; color: var(--gray-600); max-width: 620px; }
.helper__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.seo-text { max-width: 720px; }
.seo-text p { color: var(--gray-600); }

@media (max-width: 720px) {
  .helper { grid-template-columns: 1fr; }
  .toolbar__view { display: none; }
}

/* Разделы каталога: 6 плиток → 3 колонки (ровные ряды) */
.page-template-page-katalog .cats,
.post-type-archive-product .cats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
  .page-template-page-katalog .cats,
  .post-type-archive-product .cats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .page-template-page-katalog .cats,
  .post-type-archive-product .cats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .page-template-page-katalog .cats,
  .post-type-archive-product .cats { grid-template-columns: 1fr; }
}

/* ---------- О компании (page-slug-o-kompanii) ---------- */
@media (min-width: 1025px) {
  .about-intro .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .about-intro .stat__num { white-space: nowrap; }
}

/* ---------- Цены (page-template page-ceny) ---------- */
.price-block { margin-top: 56px; }
.price-block:first-of-type { margin-top: 0; }
.price-block__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}
.price-block__head h3 { font-size: 20px; }
.price-block__head p { font-size: 15px; color: var(--gray-600); margin-top: 6px; max-width: 560px; }
.estimate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.estimate__item { position: relative; }
.estimate__num {
  font-size: 44px; font-weight: 600; color: rgba(25, 167, 218, .28);
  line-height: 1; margin-bottom: 14px;
}
.estimate__item h3 { font-size: 18px; margin-bottom: 8px; }
.estimate__item p { font-size: 15px; color: var(--gray-600); }
@media (max-width: 860px) { .estimate { grid-template-columns: 1fr 1fr; gap: 28px 24px; } }
@media (max-width: 560px) { .estimate { grid-template-columns: 1fr; } }

/* ---------- Отзывы (page-template page-otzyvy) ---------- */
.rating-hero {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--gray-200);
  border-radius: var(--radius-card); padding: 24px 28px; margin-top: 8px;
}
.rating-hero__score { display: flex; align-items: baseline; gap: 10px; }
.rating-hero__num { font-size: 40px; font-weight: 600; color: var(--navy-900); line-height: 1; }
.rating-hero__stars { color: var(--accent-500); letter-spacing: 2px; font-size: 22px; }
.rating-hero__meta { color: var(--gray-600); font-size: 15px; flex: 1 1 0; min-width: 0; }
.rating-hero__meta b { color: var(--navy-900); font-weight: 600; }
.rating-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; flex: 0 0 auto; }
@media (max-width: 640px) {
  .rating-hero__meta { flex-basis: auto; }
  .rating-hero__actions { width: 100%; }
}
.leave-review { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.leave-review .btn { flex: 0 0 auto; }
.reviews-list .review__foot { align-items: flex-start; }

/* ---------- Политика (page-slug-politika-konfidencialnosti) ---------- */
.prose h2 { scroll-margin-top: 96px; }
.legal-doc .prose p { line-height: 1.6; margin-bottom: 18px; }
.prose p.legal-list { padding-left: 18px; text-indent: -18px; }
.prose p.legal-list br { line-height: 1.6; }

/* ---------- Блог (blog / archive) ---------- */
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; }
.chip {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  font-size: 15px; font-weight: 500; color: var(--navy-900); background: var(--white);
  border: 1px solid var(--gray-200); border-radius: 999px;
  transition: border-color .2s, color .2s, background .2s; cursor: default; text-decoration: none;
}
.chip:hover { border-color: var(--accent-600); color: var(--accent-600); }
.chip--active, .chip.is-active {
  background: var(--navy-900); color: var(--white); border-color: var(--navy-900);
}
.chip--active:hover, .chip.is-active:hover { color: var(--white); }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.post {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.post:hover { box-shadow: 0 8px 24px rgba(11,29,79,.08); transform: translateY(-2px); }
.post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sky-50); }
.post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 22px; }
.post__eyebrow { margin-bottom: 12px; }
.post__title { font-size: 20px; line-height: 1.25; font-weight: 600; margin: 0 0 10px; }
.post__title a { color: var(--navy-900); }
.post__title a:hover { color: var(--accent-600); }
.post__excerpt { font-size: 15px; line-height: 1.55; color: var(--gray-600); margin: 0; }
.post__meta {
  display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px;
  font-size: 14px; color: var(--gray-600);
}
.post__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-200); }
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 52px; }
.pager a, .pager span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--gray-200); border-radius: 10px;
  font-size: 16px; color: var(--navy-900);
  transition: border-color .2s, color .2s, background .2s;
}
.pager a:hover { border-color: var(--accent-600); color: var(--accent-600); }
.pager .is-current, .pager .current { background: var(--navy-900); color: var(--white); border-color: var(--navy-900); cursor: default; }
.pager .is-disabled { color: var(--gray-200); pointer-events: none; }
@media (max-width: 900px) { .posts { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 560px) { .posts { grid-template-columns: 1fr; } .blog-filters { gap: 8px; } }

/* ---------- Статья (single post) ---------- */
.article { padding: 8px 0 0; }
.article__head { max-width: 720px; margin: 0 auto; }
.article__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 18px 0 24px; font-size: 14px; color: var(--gray-600);
}
.article__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gray-200); }
.article__meta .cat { color: var(--accent-600); font-weight: 500; }
.article__lead { font-size: 20px; line-height: 1.5; color: var(--navy-900); margin: 0; }
.toc {
  max-width: 720px; margin: 32px auto 0; border: 1px solid var(--gray-200);
  border-radius: 14px; padding: 22px 24px; background: var(--sky-50);
}
.toc__title {
  font-size: 13px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--gray-600); margin: 0 0 14px;
}
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; margin-bottom: 10px; padding-left: 30px; position: relative; }
.toc li:last-child { margin-bottom: 0; }
.toc li::before {
  content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font-size: 13px; font-weight: 600; color: var(--accent-600);
}
.toc a { color: var(--navy-900); }
.toc a:hover { color: var(--accent-600); }
.article__body { margin: 40px auto 0; }
.article__body h2 { font-size: 32px; line-height: 1.2; font-weight: 600; margin: 0 0 16px; scroll-margin-top: 96px; }
.article__body h3 { margin: 28px 0 10px; }
.article__body .eyebrow { margin-bottom: 14px; }
.article__section { max-width: 720px; margin: 0 auto; padding-top: 48px; }
.article__section:first-child { padding-top: 0; }
.article__body ul { max-width: 720px; margin: 0 auto 16px; padding-left: 22px; color: var(--navy-900); }
.article__body ul li { margin-bottom: 8px; line-height: 1.55; }
.article__body ul li::marker { color: var(--accent-600); }
.figure { max-width: 720px; margin: 28px auto; }
.figure img { width: 100%; border-radius: 14px; display: block; }
.figure figcaption { margin-top: 10px; font-size: 14px; color: var(--gray-600); }
.table-wrap { max-width: 720px; margin: 22px auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Защита для «голых» таблиц в теле статьи (без .spec-table/.table-wrap):
   на всякий случай тянем на 100% ширины колонки и не даём распирать вёрстку.
   Прямой контейнер таблицы (обычно <div> из редактора) получает горизонтальный
   скролл - так узкий экран не переполняется даже без ручной обёртки. */
.article__body table {
  width: 100%; max-width: 100%; border-collapse: collapse; font-size: 16px;
  display: table;
}
.article__body table th,
.article__body table td { padding: 14px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--gray-200); }
.article__body table thead th { border-top: 0; border-bottom: 1px solid var(--gray-200); font-weight: 600; color: var(--navy-900); }
.article__body table td { color: var(--gray-600); }
.article__body table tbody th { font-weight: 600; color: var(--navy-900); }
.article__body > div:has(> table),
.article__body p:has(> table) { max-width: 720px; margin: 22px auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .spec-table thead th {
  font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gray-600); width: auto; padding-top: 0; padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-200); vertical-align: bottom;
}
.table-wrap .spec-table thead th:first-child,
.table-wrap .spec-table tbody th { width: 38%; }
.table-wrap .spec-table tbody tr:first-child th,
.table-wrap .spec-table tbody tr:first-child td { padding-top: 16px; }
.cta-inset {
  max-width: 720px; margin: 40px auto; background: var(--navy-900); color: var(--white);
  border-radius: 16px; padding: 32px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 20px 28px; justify-content: space-between;
}
.cta-inset__text { flex: 1 1 320px; }
.cta-inset__text b { display: block; font-size: 22px; font-weight: 600; line-height: 1.25; margin-bottom: 8px; }
.cta-inset__text span { font-size: 16px; color: #C7D4EA; }
.cta-inset .btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .article__body h2 { font-size: 24px; }
  .article__lead { font-size: 18px; }
  .cta-inset { padding: 24px; }
}

/* ---------- Наши работы (post-type-archive-work) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.chips .chip {
  height: 44px; padding: 0 20px; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.work {
  background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-card);
  overflow: hidden; display: flex; flex-direction: column;
}
.work__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sky-50); }
.work__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work__type {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  padding: 5px 12px; border-radius: 999px; background: rgba(11,29,79,.82);
  color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .02em; backdrop-filter: blur(2px);
}
.work__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.work__title { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--navy-900); min-height: calc(1.3em * 2); }
.work__sub { font-size: 14px; color: var(--gray-600); }
.loadmore { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- Карточка товара (single-product): защита переносов H1 ---------- */
.buybox h1 { hyphens: none; -webkit-hyphens: none; overflow-wrap: anywhere; word-break: normal; }
.buybox h1 .hl { white-space: nowrap; }
.single-product .product { height: 100%; }

/* ============================================================
   WooCommerce - базовая стилизация под дизайн-систему (§4).
   Наши шаблоны каталога/карточки уже используют классы темы; здесь
   приводим к виду темы стандартные кнопки и поля Woo (корзина, checkout,
   формы), НЕ переопределяя их шаблоны - чтобы не сломать логику.
   ============================================================ */

/* Кнопки Woo → наш primary (кроме тех, что уже .btn) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-page #place_order {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px; border-radius: var(--radius-btn);
  background: var(--accent-500); color: var(--white); border: none;
  font: 500 16px var(--font); white-space: nowrap; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-page #place_order:hover { background: var(--accent-600); color: var(--white); }

/* Вторичные кнопки (напр. «Обновить корзину») - аутлайн */
.woocommerce button.button[name="update_cart"],
.woocommerce .button.wc-backward {
  background: transparent; color: var(--navy-900);
  border: 1.5px solid var(--navy-900);
}
.woocommerce button.button[name="update_cart"]:hover,
.woocommerce .button.wc-backward:hover { background: var(--navy-900); color: var(--white); }

/* Поля форм Woo (checkout, количество, купон) → как .field */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .quantity input.qty,
.woocommerce-page form .form-row input.input-text,
.woocommerce #coupon_code {
  border: 1px solid var(--gray-200); border-radius: var(--radius-field);
  padding: 0 16px; height: 52px; font: 400 16px var(--font); color: var(--navy-900);
  background: var(--white); transition: border-color .2s var(--ease);
}
.woocommerce form .form-row textarea { height: 96px; padding: 14px 16px; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce #coupon_code:focus { outline: none; border-color: var(--accent-600); }
.woocommerce .quantity input.qty { width: 72px; text-align: center; }

/* Плашки/уведомления Woo - в палитре темы */
.woo-notices { padding-top: 18px; }
.woo-notices:has(.woocommerce-notices-wrapper:empty) { display: none; }
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin: 0 0 16px; padding: 14px 16px; list-style: none;
  border: 1px solid var(--gray-200); border-top: 3px solid var(--accent-600);
  border-radius: var(--radius-field); background: var(--white);
  color: var(--navy-900); line-height: 1.5;
}
.woocommerce-error { border-top-color: var(--error); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: none !important;
  display: none !important;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a { font-weight: 600; }

/* Упрощённый checkout: контакты одной ширины, доставка согласуется вручную. */
.woocommerce-checkout #billing_first_name_field,
.woocommerce-checkout #billing_phone_field,
.woocommerce-checkout #billing_email_field {
  float: none;
  width: 100%;
}
.stp-checkout-delivery-note {
  margin: 18px 0 20px;
  padding: 14px 16px;
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--accent-600);
  border-radius: var(--radius-field);
  background: var(--sky-50);
  color: var(--navy-900);
  font-size: 16px;
  line-height: 1.5;
}

/* Цена товара - навy, как в прототипе */
.woocommerce div.product p.price,
.woocommerce div.product span.price { color: var(--navy-900); font-weight: 600; }

/* Единая ширина контейнера Woo-страниц внутри нашей .container */
.woocommerce .col2-set, .woocommerce-page .col2-set { width: 100%; }

/* ============================================================
   Интеграция WordPress (v1.1): нативная разметка Woo/WP/CF7 → вид темы.
   Штатные стили Woo на каталоге/карточке отключены (functions.php),
   эти правила закрывают остатки нативной разметки.
   ============================================================ */

/* ---------- Сортировка Woo в тулбаре каталога (form.woocommerce-ordering) ---------- */
.toolbar .woocommerce-ordering { margin: 0; }
.toolbar .woocommerce-ordering select.orderby {
  height: 44px; padding: 0 40px 0 16px; border: 1px solid var(--gray-200);
  border-radius: var(--radius-field); background: var(--white);
  font: 500 15px var(--font); color: var(--navy-900); cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* ---------- Пагинация: ul.page-numbers (Woo и paginate_links type=list) ---------- */
.pagination .woocommerce-pagination { width: 100%; }
.pagination ul.page-numbers,
.pager ul.page-numbers {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin: 0; padding: 0;
}
.pagination ul.page-numbers li,
.pager ul.page-numbers li { margin: 0; }

/* ---------- Contact Form 7 (форма заявки; разметка .form__row из формы №44) ---------- */
.wpcf7 .form__row { margin-bottom: 16px; }
.wpcf7 .form__row p { margin: 0; }
.wpcf7 .form__label { display: block; font-size: 14px; color: var(--navy-900); }
.wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.wpcf7 input.wpcf7-text,
.wpcf7 input.wpcf7-tel,
.wpcf7 input.wpcf7-email,
.wpcf7 textarea.wpcf7-textarea {
  width: 100%; height: 52px; border: 1px solid var(--gray-200);
  border-radius: var(--radius-field); padding: 0 16px; font: 400 16px var(--font);
  color: var(--navy-900); background: var(--white);
  transition: border-color .2s var(--ease);
}
.wpcf7 textarea.wpcf7-textarea { height: 96px; padding: 14px 16px; resize: vertical; }
.wpcf7 input.wpcf7-text:focus,
.wpcf7 input.wpcf7-tel:focus,
.wpcf7 input.wpcf7-email:focus,
.wpcf7 textarea.wpcf7-textarea:focus { outline: none; border-color: var(--accent-600); }

/* Согласие (acceptance) - как .consent */
.wpcf7 .form__row--consent { margin: 18px 0 22px; font-size: 13px; color: var(--gray-600); }
.wpcf7 .form__row--consent a { color: var(--accent-600); }
.wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7-acceptance .wpcf7-list-item label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
}
.wpcf7-acceptance input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent-600); flex: 0 0 auto;
}

/* Кнопка отправки - как .btn--primary.btn--wide */
.wpcf7 input.wpcf7-submit {
  display: block; width: 100%; height: 52px; padding: 0 24px; border: none;
  border-radius: var(--radius-btn); background: var(--accent-500); color: var(--white);
  font: 500 16px var(--font); cursor: pointer; transition: background .2s var(--ease);
}
.wpcf7 input.wpcf7-submit:hover { background: var(--accent-600); }
.wpcf7 input.wpcf7-submit:disabled { opacity: .6; cursor: default; }
.wpcf7-spinner { display: block; margin: 8px auto 0; }

/* Валидация и ответ формы - в палитре темы (ошибки: единственный красный §1) */
.wpcf7-not-valid-tip { color: var(--error); font-size: 13px; margin-top: 6px; }
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid { border-color: var(--error); }
.wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0; padding: 12px 16px; border: 1px solid var(--gray-200);
  border-radius: 10px; font-size: 14px; color: var(--navy-900);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-color: var(--error); color: var(--error); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--accent-600); color: var(--accent-600); }

/* Карточка в каталоге: длинные описания из импорта не раздувают карточку -
   каждая строка характеристик ограничена двумя строками (канон: 2–3 коротких). */
.products .product__specs li {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Карточка товара: штатная форма add-to-cart Woo внутри .buybox__actions -
   количество + кнопка в один ряд, кнопка тянется (как пара кнопок прототипа). */
.buybox__actions form.cart {
  display: flex; gap: 12px; flex: 1 1 auto; align-items: stretch; margin: 0;
}
.buybox__actions form.cart .single_add_to_cart_button { flex: 1 1 auto; }
.buybox__actions form.cart .quantity { flex: 0 0 auto; }
.buybox__actions form.cart .quantity input.qty { height: 52px; }
@media (max-width: 640px) {
  .buybox__actions form.cart { flex: 1 1 100%; }
}

/* wc-blocks (корзина/checkout): кнопки - в токенах темы */
.wc-block-components-button:not(.is-link) {
  background: var(--accent-500); color: var(--white);
  border-radius: var(--radius-btn); font-weight: 500;
}
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
  background: var(--accent-600); color: var(--white);
}

/* ============================================================
   ФИНАЛЬНАЯ ПОЛИРОВКА ХРОМА + ГЛАВНОЙ (арт-дирекшн, v1.1)
   Только выравнивание, ритм §3 и доступность. Композиция и палитра §1
   не меняются. Блок в конце файла - перебивает точечные правила выше
   по порядку каскада (равная специфичность → выигрывает последнее).
   ============================================================ */

/* 1. Плитки категорий: равные высоты рядов + CTA-стрелка строго по нижней
   линии карточки. Причина дефекта: .cat span { margin-top:-6px } (подпись)
   перебивал .cat__arrow { margin-top:auto } - специфичность (0,1,1) > (0,1,0),
   поэтому стрелка не прижималась к низу и «плавала» под текстом разной длины.
   .cat > .cat__arrow (0,2,0) возвращает прижим к низу; grid-auto-rows:1fr
   уравнивает высоты всех плиток (§3 «равные высоты»). */
.cats { grid-auto-rows: 1fr; }
.cat > .cat__arrow { margin-top: auto; }

/* 2. Клавиатурная доступность (§ task 4): единый фирменный фокус-ринг на
   интерактивных элементах. Только :focus-visible - мышь/тач ринг не видят.
   Поля форм сохраняют собственный фокус по рамке accent-600 (их не трогаем). */
:where(a, button, .btn, .ghost, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 3px;
}

/* 3. Цифры доверия на телефоне: в 2 колонки «20+ лет» переносится в 2 строки,
   а «~20» - в 1, из-за чего подписи теряли общую базовую линию («прыгающие
   высоты»). На узких экранах - одна колонка: число в одну строку, подписи
   выровнены. */
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; row-gap: 24px; }
}

/* 4. На самых узких экранах плитки категорий - в одну колонку; высоту рядов
   не растягиваем (иначе короткие плитки получают лишний воздух). */
@media (max-width: 420px) {
  .cats { grid-auto-rows: auto; }
}

/* 5. Клиренс под липкую нижнюю таб-панель (mobile). Её реальная высота 67px,
   резерв был 64px - низ футера подрезался панелью. Даём 72px с запасом. */
@media (max-width: 640px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* 6. Логотип в desktop-шапке: сохраняем исходную пропорцию 279×60.
   Раньше flex сжимал .header__logo до ~54px, а фиксированная высота img 34px
   оставалась прежней - логотип становился сплюснутым (ratio 4.65 → 1.59).
   Убираем shrink у фиксированных элементов и компактнее собираем desktop-nav.
   На ширинах, где полная строка уже не помещается без сжатия, раньше включаем
   штатный бургер вместо деформации бренда или наложения пунктов меню. */
.header__row { gap: 14px; }
.header__logo {
  flex: 0 0 auto;
  width: 158px;
  height: 34px;
  line-height: 0;
}
.header__logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}
.nav {
  flex: 0 0 auto;
  gap: 16px;
  margin-left: 0;
}
.header__search-btn,
.header__phone,
.header__cta,
.burger { flex-shrink: 0; }

@media (max-width: 1260px) {
  .nav,
  .header__phone,
  .header__cta,
  .header__search-btn { display: none; }
  .burger { display: flex; }
}

/* 7. Контраст интерактивных элементов. accent-500 с белым текстом даёт
   2.77:1; разрешённый палитрой accent-600 - 4.50:1 и проходит WCAG AA для
   обычного текста. Hover остаётся в той же дизайн-системе (navy-700). */
.hl,
.error-code span { color: var(--accent-600); }

.btn--primary,
.pagination .current,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce-page #place_order,
.wpcf7 input.wpcf7-submit,
.wc-block-components-button:not(.is-link) {
  background: var(--accent-600);
  border-color: var(--accent-600);
  color: var(--white);
}

.btn--primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce-page #place_order:hover,
.wpcf7 input.wpcf7-submit:hover,
.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
}

.search-form__field:focus { border-color: var(--accent-600); }
:where(a, button, .btn, .ghost, summary, [tabindex]):focus-visible {
  outline-color: var(--accent-600);
}

.nav a[aria-current="page"],
.nav__toggle[aria-current="page"],
.nav__toggle.is-current-section { color: var(--accent-600); }

/* Skip-link виден только при клавиатурном фокусе. */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  transform: translateY(-160%); padding: 10px 14px;
  border-radius: var(--radius-field); background: var(--navy-900); color: var(--white);
}
.skip-link:focus { transform: translateY(0); color: var(--white); }
.skip-target { position: absolute; width: 1px; height: 1px; overflow: hidden; }

/* 8. Глобальная корзина: всегда доступна из шапки, а её содержимое
   обновляется штатным Woo fragment без второго AJAX-запроса. */
.header-cart {
  position: relative;
  flex: 0 0 auto;
}
.header-cart__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-btn);
  background: var(--white);
  color: var(--navy-900);
  cursor: pointer;
  transition: color .18s var(--ease), background-color .18s var(--ease), transform .18s var(--ease);
}
.header-cart__toggle:hover,
.header-cart.is-open .header-cart__toggle {
  color: var(--accent-600);
  background: var(--sky-50);
}
.header-cart__toggle:active { transform: scale(.97); }
.stp-cart-count {
  position: absolute;
  top: -6px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 2px solid var(--white);
  border-radius: 999px;
  background: var(--accent-600);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.stp-cart-count[hidden] { display: none; }
.header-cart__panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 70;
  width: min(380px, calc(100vw - 32px));
  max-width: calc(100vw - 24px);
  max-height: min(560px, calc(100dvh - 100px));
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 20px 50px rgba(11, 29, 79, .16);
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.header-cart__panel[hidden] { display: none; }
.header-cart.is-open .header-cart__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.header-cart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-200);
}
.header-cart__head strong { font-size: 18px; color: var(--navy-900); }
.header-cart__head a { color: var(--accent-600); font-size: 14px; font-weight: 600; }
.header-cart__panel .widget_shopping_cart_content { min-width: 0; }
.header-cart__panel .woocommerce-mini-cart {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.header-cart__panel .woocommerce-mini-cart-item {
  position: relative;
  min-height: 76px;
  padding: 14px 26px 14px 72px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--navy-900);
  font-size: 14px;
}
.header-cart__panel .woocommerce-mini-cart-item > a:not(.remove) {
  display: block;
  color: var(--navy-900);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.header-cart__panel .woocommerce-mini-cart-item img {
  position: absolute;
  top: 14px;
  left: 0;
  float: none;
  width: 58px;
  height: 58px;
  margin: 0;
  padding: 4px;
  object-fit: contain;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  background: var(--white);
}
.header-cart__panel .woocommerce-mini-cart-item .remove {
  position: absolute;
  top: 12px;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--gray-600) !important;
  font-size: 20px;
  line-height: 1;
}
.header-cart__panel .woocommerce-mini-cart-item .remove:hover {
  background: var(--sky-50);
  color: var(--accent-600) !important;
}
.header-cart__panel .quantity { display: block; margin-top: 5px; color: var(--gray-600); font-size: 13px; }
.header-cart__panel .woocommerce-mini-cart__total {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 16px 0;
  color: var(--navy-900);
}
.header-cart__panel .woocommerce-mini-cart__buttons {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  min-width: 0;
}
/* a.button - специфичность 0,2,1, чтобы перебить базовую .woocommerce a.button
   (та же 0,2,1, но наш блок ниже по каскаду). Иначе мини-корзина наследует
   залитые 52px-кнопки и теряется иерархия §4. */
.header-cart__panel a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: auto;
  min-height: 46px;
  padding: 0 16px;
  border: 1.5px solid var(--accent-600);
  border-radius: var(--radius-btn);
  background: var(--white);
  color: var(--accent-600);
  font: 600 15px var(--font);
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.header-cart__panel a.button:hover,
.header-cart__panel a.button:focus { background: var(--sky-50); color: var(--accent-600); }
/* Штатный порядок Woo: «Просмотр корзины» (аутлайн) → primary «Оформление
   заказа» снизу (§4: одно главное действие, primary accent-500, без каппса). */
.header-cart__panel a.button.checkout {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: var(--white);
}
.header-cart__panel a.button.checkout:hover,
.header-cart__panel a.button.checkout:focus { background: var(--accent-600); border-color: var(--accent-600); color: var(--white); }
.header-cart__panel .woocommerce-mini-cart__empty-message {
  margin: 0;
  padding: 28px 0 12px;
  color: var(--gray-600);
  text-align: center;
}
.tabbar__cart { position: relative; }
.tabbar__cart .stp-cart-count {
  top: 1px;
  right: calc(50% - 23px);
}

@media (max-width: 640px) {
  /* Корзина остаётся доступна и в шапке телефона: нижняя панель удобна для
     перехода, а компактная кнопка здесь сразу показывает состояние заказа и
     открывает мини-корзину без прокрутки/перехода на другую страницу. */
  .header-cart { display: block; }
  .header-cart__toggle { width: 40px; height: 40px; }
  .header-cart__panel {
    position: fixed;
    top: 84px;
    right: 12px;
    left: 12px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 100px);
    transform-origin: top center;
  }
}
@media (max-width: 360px) {
  .header__row { gap: 10px; }
  .header__logo { width: 142px; height: auto; }
  .header__logo img { height: auto; }
  .footer__top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .header-cart__toggle,
  .header-cart__panel { transition: none; }
}