/* Собрано из src/_includes/components/<name>/<name>.css — порядок задан в eleventy.config.js */

/* ===== base ===== */
/* Дизайн-система ЦИР v3 — токены (DESIGN-REF-BARRIER.md §4: белый фон, крупнее шрифт, воздух, поверхности вместо рамок).
   Бренд (подтверждён 24.09.2026): #1F3763 / #F47A20 / #15274A / #5D6E8E, Manrope (решение 27.09.2026; Inter — deprecated).
   redesign/minimalist: одна семья холодных серых с синим оттенком, тени тонированы в navy,
   1px-границы вместо тяжёлых теней, без градиентов, оранжевый — только CTA и акценты цены. */
:root {
  --navy: #1F3763;
  --navy-900: #15274A;
  --navy-700: #2A4A82;
  --navy-50: #EEF2F8;
  --navy-100: #E4EAF4;          /* hover-заливка карточек navy-50 */
  --orange: #F47A20;
  --orange-600: #E06A12;
  --orange-text: #B4520F;      /* мелкий оранжевый текст на светлом, AA */
  --orange-50: #FEF1E7;
  --ink: #1B2433;              /* основной текст: off-black с navy-оттенком */
  --ink-2: #3A4557;
  --muted: #5D6E8E;            /* второстепенный текст (бренд) */
  --muted-2: #606C86;          /* ≥4,5:1 на #FFF, #F5F7FA, #EEF2F8 (было #8591A6 = 3,18:1) */
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7F9FC;        /* подложка фото, чипы */
  --line: #E4E8EF;
  --line-2: #D5DBE5;
  --ok: #2F6B3A;   --ok-bg: #EAF3EB;
  --warn: #8A5A00; --warn-bg: #FBF3DB;
  --err: #B42318;  --err-bg: #FDECEA;

  --font: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 16px; --fs-md: 16px; --fs-lg: 18px; --fs-lead: 18px;
  --fs-h4: 18px; --fs-h3: 22px; --fs-h2: clamp(28px, 2.8vw, 40px); --fs-h1: clamp(34px, 3.6vw, 52px);

  --r-sm: 8px; --r: 10px; --r-lg: 16px; --r-xl: 20px;
  --shadow-1: 0 1px 2px rgba(21, 39, 74, .06);
  --shadow-2: 0 6px 20px rgba(21, 39, 74, .08);
  --shadow-3: 0 16px 40px rgba(21, 39, 74, .16);
  --ease: cubic-bezier(.16, 1, .3, 1);

  --wrap: 1440px;
  --gutter: 20px;
  --sidebar: 266px;
  --col-gap: 30px;
  --section: 96px;

  /* z-index шкала */
  --z-dropdown: 40; --z-flyout: 45; --z-sticky: 80; --z-drawer: 110; --z-modal: 130; --z-toast: 140;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 400 var(--fs-base)/1.5 var(--font); color: var(--ink); background: var(--bg);
  overflow-x: hidden; font-feature-settings: "cv11", "ss01";
}
body.is-locked { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; letter-spacing: -.02em; }
p { text-wrap: pretty; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 2px; }
.num, .price { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: var(--z-toast); padding: 10px 16px; border-radius: var(--r);
  background: var(--navy-900); color: #fff; font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ---------- Раскладка ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.page { padding-top: 28px; padding-bottom: var(--section); }
.cols { display: flex; align-items: flex-start; gap: var(--col-gap); }
.cols__side { width: var(--sidebar); flex: none; position: sticky; top: 90px; z-index: 1; }
/* sticky создаёт свой слой: без z-index выпадающее меню каталога уходило под слайдер, а затемнение ложилось поверх меню */
body.catv-hover .cols__side { z-index: 70; } /* выше полосы фильтров .filters (60), ниже липкой шапки (80) */
.cols__main { flex: 1; min-width: 0; }
.section { margin-top: var(--section); }
.section--tight { margin-top: 40px; }
.stack > * + * { margin-top: 16px; }
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.panel { background: var(--navy-50); border-radius: var(--r-lg); }
.panel--white { background: var(--surface); border: 1px solid var(--line); }
.panel--pad { padding: 28px; }
.h1 { font-size: var(--fs-h1); line-height: 1.1; font-weight: 800; color: var(--navy-900); }
.h2 { font-size: var(--fs-h2); line-height: 1.15; font-weight: 700; color: var(--navy-900); }
.h3 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; color: var(--navy-900); }
.lead { margin-top: 20px; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.link { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(31, 55, 99, .3); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.link:hover { color: var(--orange-text); text-decoration-color: currentColor; }
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--r-sm);
  font-size: 11px; font-weight: 600; letter-spacing: .02em; background: var(--navy-50); color: var(--navy);
}
.tag--ok { background: var(--ok-bg); color: var(--ok); }
.tag--warn { background: var(--warn-bg); color: var(--warn); }
.tag--muted { background: #EEF0F4; color: var(--muted); }
.dev-note {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--r);
  background: var(--warn-bg); color: var(--warn); font-size: var(--fs-sm); line-height: 1.5;
}
.ico { width: 16px; height: 16px; flex: none; }
.ico--sm { width: 12px; height: 12px; }
.ico--lg { width: 24px; height: 24px; }

@media (max-width: 1199px) { :root { --section: 72px; } .grid--4, .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) {
  :root { --section: 56px; --fs-lead: 17px; }
  .cols { display: block; }
  .cols__side { display: none; }
  .grid--3, .grid--4, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  :root { --gutter: 12px; --section: 44px; --fs-lead: 16px; }
  .page { padding-top: 16px; }
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .panel--pad { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .slide, .slide__text > *, .slide__media img, .sticky, .pbar, .subnav, .modal, .modal__box, .toast { animation: none !important; transition: none !important; }
}


/* ===== icons ===== */

/* толщина линии иконок направлений (non-scaling-stroke): крупнее иконка — чуть толще линия */
.ctile__ico { --icon-sw: 2.4px; }
.qlaunch__ico { --icon-sw: 3px; }
.dcard__ico, .kcard__cover svg { --icon-sw: 2.2px; }
.catv__ico, .catlist .catv__ico { --icon-sw: 1.8px; }


/* ===== buttons ===== */
/* Кнопки (DESIGN-REF-BARRIER.md §3.5): три уровня — accent (оранжевая, одно главное действие на экран),
   ghost = outline navy (второе действие), arrow-link (третье). primary (navy solid) — только там, где два действия равноправны.
   Радиус 10px, регистр предложения, 16px/600. Оранжевая кнопка — тёмный текст (#15274A на #F47A20 = 5,3:1). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--r); border: 1.5px solid transparent;
  font-size: 16px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s;
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled=true] { opacity: .5; pointer-events: none; }
.btn--accent { background: var(--orange); color: var(--navy-900); }
.btn--accent:hover { background: var(--orange-600); }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-700); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy-50); }
.btn--quiet { background: var(--navy-50); color: var(--navy); }
.btn--quiet:hover { background: var(--navy-100); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn--lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
.btn--block { width: 100%; }
.btn .ico { width: 16px; height: 16px; }

/* круглые стрелки каруселей и слайдера на светлой заливке, без рамки */
.icon-btn {
  width: 48px; height: 48px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: var(--navy-50); color: var(--navy); border: 0;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--navy); color: #fff; }
.icon-btn:disabled { opacity: .4; cursor: default; background: var(--navy-50); color: var(--navy); }

.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--navy); transition: color .25s var(--ease); }
.arrow-link svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.arrow-link:hover { color: var(--orange-text); }
.arrow-link:hover svg { transform: translateX(3px); }

/* Тач-цели ≥44px на планшете/телефоне (WCAG 2.5.5 / HIG); на десктопе сохраняется плотность референса */
@media (max-width: 991px), (pointer: coarse) {
  .calc-add--round, .calc-btn--topbar .calc-btn__ico { width: 44px; height: 44px; }
  .fchip { min-height: 40px; }
  .btn--sm, .calc-add--ghost { min-height: 44px; }
  .arrow-link { min-height: 44px; }
  a.tag { min-height: 28px; }
}

/* узкие экраны: длинная надпись переносится внутри кнопки, а не вылезает за неё */
@media (max-width: 599px) {
  .btn { white-space: normal; text-wrap: balance; text-align: center; max-width: 100%; flex-shrink: 0; padding-block: 10px; }
}


/* ===== topbar ===== */
.topbar { background: var(--navy); color: #fff; height: 48px; position: relative; z-index: calc(var(--z-dropdown) + 2); }
.topbar__inner { height: 100%; display: flex; align-items: center; gap: 20px; }
.topbar__burger { display: none; width: 36px; height: 36px; color: #fff; margin-left: -6px; place-items: center; }
.topbar__burger svg { width: 26px; height: 26px; }
.topbar__menu { flex: 1; min-width: 0; height: 100%; }
.topbar .priority > li > a, .topbar .priority__btn {
  display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 12px; font-size: 14px; color: rgba(255, 255, 255, .88);
  transition: color .2s, background-color .2s;
}
.topbar .priority > li:first-child > a { padding-left: 0; }
.topbar .priority > li > a:hover, .topbar .priority__btn:hover, .topbar .priority > li > a[aria-current] { color: #fff; }
.topbar .priority > li > a[aria-current] { box-shadow: inset 0 -2px 0 var(--orange); }
.topbar__right { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.topbar__msg, .topbar__callback { display: flex; align-items: center; gap: 6px; font-size: 14px; color: rgba(255, 255, 255, .88); transition: color .2s; }
.topbar__msg:hover, .topbar__callback:hover { color: #fff; }
.topbar__callback span { border-bottom: 1px dashed rgba(255, 255, 255, .6); line-height: 1.25; }
.topbar__icon { display: none; position: relative; width: 36px; height: 36px; color: #fff; place-items: center; }
.topbar__icon > svg { width: 20px; height: 20px; }
.topbar .calc-btn { display: none; }

/* priority+ (общая логика «Ещё» для topbar и category-nav) */
.priority { display: flex; align-items: center; height: 100%; white-space: nowrap; }
.priority__more { position: relative; }
.priority__list {
  position: absolute; top: 100%; right: 0; z-index: var(--z-dropdown); min-width: 240px; padding: 8px 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s var(--ease), visibility .2s;
}
.priority__more:hover .priority__list, .priority__more.is-open .priority__list { opacity: 1; visibility: visible; transform: none; }
.priority__list a { display: block; padding: 9px 18px; font-size: 14px; color: var(--ink); white-space: normal; }
.priority__list a:hover { background: var(--surface-2); color: var(--navy); }

@media (max-width: 1199px) {
  .topbar__msg { display: none; }
  .topbar__search-toggle { display: grid; }
}
@media (max-width: 991px) {
  .topbar { position: sticky; top: 0; z-index: var(--z-sticky); }
  .topbar__burger { display: grid; }
  .topbar__menu { display: none; }
  .topbar .calc-btn { display: flex; }
}
@media (max-width: 599px) {
  .topbar__callback { display: none; }
  .topbar__phone { display: grid; }
  .topbar__right { gap: 8px; }
}
@media (max-width: 991px), (pointer: coarse) {
  .topbar { height: 52px; }
  .topbar__burger, .topbar__icon, .topbar .calc-btn__ico { width: 44px; height: 44px; }
  .topbar__callback { min-height: 44px; }
}


/* ===== header ===== */
.header { background: var(--surface); position: relative; z-index: calc(var(--z-dropdown) + 1); }
.header__inner { min-height: 84px; display: flex; align-items: center; gap: 28px; }
.header__logo { width: 226px; flex: none; }
.header__logo img { width: 100%; margin: -8px 0; }
.header__region { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); flex: none; line-height: 1.3; }
.header__region .ico { flex: none; color: var(--orange-text); }
.header__region span { display: flex; flex-direction: column; }
.header__region b { font-weight: 600; color: var(--navy-900); }
.header__region small { font-size: 12px; color: var(--muted); }
.header__region:hover b { color: var(--orange-text); }
.header__phone { display: flex; flex-direction: column; flex: none; line-height: 1.3; }
.header__mail { font-size: 12px; color: var(--ink-2); text-decoration: none; }
.header__mail:hover { color: var(--orange-700, #B4520F); text-decoration: underline; }
.header__tel { font-size: 17px; font-weight: 700; color: var(--navy-900); transition: color .2s; }
.header__tel:hover { color: var(--orange-text); }
.header__resp { font-size: 12px; color: var(--muted); }
.header .search { flex: 1; min-width: 200px; }
.mobile-cta { display: none; }

@media (max-width: 1199px) {
  .header__inner { gap: 22px; }
  .header .search { display: none; }
  .header.search-open .search { display: block; position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% - 12px); z-index: var(--z-drawer); }
  .header__phone { margin-left: auto; }
}
@media (max-width: 991px) {
  .header__inner { min-height: 72px; }
  .header__logo { width: 200px; }
  .header__region { margin-left: auto; }
  .header__phone { margin-left: 0; }
  .header .calc-btn { display: none; }
  .header.search-open .search { position: fixed; top: 58px; }
}
@media (max-width: 767px) { .header__region { display: none; } .header__phone { margin-left: auto; } }
@media (max-width: 599px) {
  .header__inner { justify-content: center; min-height: 64px; padding: 6px 0; }
  .header__phone { display: none; }
  .header__logo { width: 210px; }
  .mobile-cta { display: block; background: var(--surface); padding: 0 var(--gutter) 12px; }
}
@media (max-width: 991px), (pointer: coarse) { .header__tel { display: inline-flex; align-items: center; min-height: 44px; } }

/* на главной первый экран уже содержит главную кнопку — полосу не дублируем */
.tpl-home .mobile-cta { display: none !important; }

/* мобильная шапка: адрес (ссылка на Яндекс Карты) и график под логотипом — двумя строками по центру;
   на планшете (600–767) график уже под телефоном — только адрес, слева под логотипом */
.header__mob { display: none; }
@media (max-width: 767px) {
  .header__mob { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: -4px 0 0; padding: 0 var(--gutter) 10px; font-size: 13px; line-height: 1.35; text-align: center; }
  .header__mob-a { display: inline-flex; align-items: center; gap: 5px; }
  .header__mob .ico { width: 15px; height: 15px; color: var(--orange-text); }
  .header__mob a { font-weight: 600; color: var(--navy-900); text-decoration: underline; text-decoration-color: rgba(31, 55, 99, .3); text-underline-offset: 3px; }
  .header__mob-h { color: var(--muted); }
}
@media (min-width: 600px) and (max-width: 767px) {
  .header__mob { align-items: flex-start; max-width: var(--wrap); margin: -6px auto 0; }
  .header__mob-h { display: none; }
}


/* ===== search ===== */
.search { position: relative; }
.search input {
  width: 100%; height: 44px; padding: 0 52px 0 18px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface-2); font-size: 14px; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.search input::placeholder { color: var(--muted-2); }
.search input:focus { outline: none; background: var(--surface); border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31, 55, 99, .12); }
.search input::-webkit-search-cancel-button { display: none; }
.search__submit {
  position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border-radius: var(--r-sm);
  background: var(--navy); color: #fff; display: grid; place-items: center; transition: background-color .2s;
}
.search__submit:hover { background: var(--orange); color: var(--navy-900); }
.search__submit svg { width: 15px; height: 15px; }
.search__drop {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: var(--z-drawer); display: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-3); padding: 6px; max-height: 70vh; overflow: auto;
}
.search__drop.is-open { display: block; }
.search__group { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.search__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm); font-size: 14px; }
.search__item img, .search__item .search__ph { width: 36px; height: 36px; object-fit: contain; flex: none; background: var(--surface-2); border-radius: 4px; }
.search__item .search__ph { display: grid; place-items: center; color: var(--navy); }
.search__item .search__ph svg { width: 20px; height: 20px; }
.search__item b { font-weight: 500; }
.search__item mark { background: var(--orange-50); color: inherit; border-radius: 2px; }
.search__item small { margin-left: auto; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.search__item:hover, .search__item.is-active { background: var(--surface-2); }
.search__all { display: block; margin-top: 4px; padding: 10px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--navy); }
.search__empty { padding: 12px 10px; font-size: 14px; color: var(--muted); }

/* страница поиска */
.srch-head { max-width: 860px; margin-bottom: 24px; }
.srch-head .search { margin-top: 18px; }
.srch-head .search input { height: 54px; font-size: 16px; }
.srch-head .search__submit { top: 7px; right: 7px; width: 40px; height: 40px; }
.srch-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.srch-tabs { margin-bottom: 20px; }
.srch-n { color: var(--muted-2); font-weight: 500; }
.srch-group + .srch-group { margin-top: 32px; }
.srch-group__title { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.srch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.srch-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--navy-50); border-radius: var(--r-lg); transition: background-color .25s var(--ease), box-shadow .2s; }
.srch-item:hover { background: var(--navy-100); }
.srch-item img, .srch-item .search__ph { width: 52px; height: 52px; object-fit: contain; flex: none; border-radius: var(--r-sm); background: var(--surface-2); display: grid; place-items: center; color: var(--navy); }
.srch-item .search__ph svg { width: 26px; height: 26px; }
.srch-item b { display: block; font-weight: 500; line-height: 1.4; }
.srch-item mark { background: var(--orange-50); color: inherit; border-radius: 2px; }
.srch-item small { display: block; margin-top: 4px; font-weight: 700; color: var(--navy-900); }


/* ===== category-nav ===== */
.catnav { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; z-index: var(--z-dropdown); }
.catnav__list { justify-content: space-between; height: 52px; }
.catnav__item { position: relative; height: 100%; }
.catnav__item > a, .catnav .priority__btn {
  display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 14px; font-size: 14px; font-weight: 500; color: var(--ink);
  transition: color .2s;
}
.catnav__item:first-child > a { padding-left: 0; }
.catnav__item > a svg { transition: transform .2s; color: var(--muted-2); }
.catnav__item:hover > a, .catnav__item > a[aria-current] { color: var(--navy); }
.catnav__item > a[aria-current] { box-shadow: inset 0 -2px 0 var(--orange); }
.catnav__item:hover > a svg { transform: rotate(180deg); }
.catnav__all { color: var(--orange-text) !important; }
.catnav__drop {
  position: absolute; top: 100%; left: 0; min-width: 280px; padding: 8px; z-index: var(--z-dropdown);
  background: var(--surface); border: 1px solid var(--line); border-radius: 0 0 var(--r) var(--r); box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s var(--ease), visibility .2s;
}
.catnav__item:hover .catnav__drop, .catnav__item:focus-within .catnav__drop { opacity: 1; visibility: visible; transform: none; }
.catnav__drop a { display: block; padding: 8px 12px; border-radius: var(--r-sm); font-size: 14px; }
.catnav__drop a:hover { background: var(--surface-2); color: var(--navy); }
.catnav__head { display: flex !important; align-items: center; justify-content: space-between; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--line); border-radius: 0 !important; margin-bottom: 4px; }
@media (max-width: 991px) { .catnav { display: none; } }
/* выпадающие меню правых пунктов открываются влево, чтобы не выходить за край окна */
.catnav__item:nth-last-child(-n+4) .catnav__drop { left: auto; right: 0; }


/* ===== catalog-menu ===== */
/* Левое меню каталога (референс: вертикальный каталог 266px с flyout и затемнением страницы) */
.catv { position: relative; z-index: var(--z-flyout); background: var(--surface-2); border-radius: var(--r-lg); }
.catv__head {
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--navy); color: #fff; font-size: 14px; font-weight: 600;
}
.catv__menu { padding: 6px 0; }
.catv__item > a {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 16px 8px 22px;
  font-size: 14px; font-weight: 500; transition: background-color .15s, color .15s;
}
.catv__ico { width: 22px; height: 22px; flex: none; color: var(--navy); }
.catv__count { margin-left: auto; font-size: 12px; color: var(--muted-2); }
.catv__chev { width: 10px; height: 10px; color: var(--muted-2); flex: none; }
.catv__item--service .tag { margin-left: auto; }
.catv__item:hover > a, .catv__item:focus-within > a, .catv__item > a[aria-current] { background: var(--surface-2); color: var(--navy); }
.catv__item > a[aria-current]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; background: var(--orange); }
.catv__fly {
  position: absolute; top: -1px; left: calc(100% - 1px); width: 320px; min-height: calc(100% + 2px); padding: 22px 26px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 0 var(--r-lg) var(--r-lg) 0; box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity .18s, transform .18s var(--ease), visibility .18s;
}
.catv__item:hover > .catv__fly, .catv__item:focus-within > .catv__fly { opacity: 1; visibility: visible; transform: none; }
.catv__fly-head { display: block; font-size: 17px; font-weight: 700; color: var(--navy-900); margin-bottom: 10px; }
.catv__fly ul { margin-bottom: 16px; }
.catv__fly li a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.catv__fly li a span:last-child { color: var(--muted-2); font-size: 12px; }
.catv__fly li a:hover { color: var(--navy); }
.catv-dim { position: fixed; inset: 0; z-index: calc(var(--z-flyout) - 1); background: rgba(21, 39, 74, .28); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility .2s; }
body.catv-hover .catv-dim { opacity: 1; visibility: visible; }

/* плоский список */
.catlist li a { display: flex; align-items: center; gap: 12px; padding: 12px 20px; font-size: 15px; font-weight: 500; border-top: 1px solid var(--line); }
.catlist li:first-child a { border-top: 0; }
.catlist li a:hover { background: var(--surface-2); color: var(--navy); }
.catlist .catv__count, .catlist .tag { margin-left: auto; }
.catlist__all { color: var(--orange-text); justify-content: space-between; }

/* полоса-аккордеон каталога (планшет/телефон, как «КАТАЛОГ ТОВАРОВ» референса) */
.catbar { display: none; background: var(--surface); border-bottom: 1px solid var(--line); }
.catbar__toggle { width: 100%; height: 50px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--orange-text); }
.catbar__chev { width: 14px; height: 14px; margin-left: auto; transition: transform .25s var(--ease); }
.catbar__toggle[aria-expanded=true] .catbar__chev { transform: rotate(90deg); }
.catbar__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.catbar__panel > div { overflow: hidden; }
.catbar.is-open .catbar__panel { grid-template-rows: 1fr; }
@media (max-width: 991px) { .catbar { display: block; } }

/* заметка-оффер под каталогом в сайдбаре (референс: баннер под меню) */
.side-note { margin-top: 16px; padding: 22px; background: var(--navy-50); border-radius: var(--r-lg); }
.side-note__k { font-size: 13px; font-weight: 600; color: var(--muted); }
.side-note__v { margin: 4px 0 8px; font-size: 30px; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.side-note__t { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
/* список с панелью подразделов справа (липкая шапка) */
.catlist--fly > li { position: relative; }
.catlist--fly > li.has-fly > a .catv__count { margin-left: auto; }
.catlist--fly > li.has-fly > a .catv__chev { margin-left: 4px; }
.catlist--fly > li:hover > a, .catlist--fly > li:focus-within > a { background: var(--surface-2); color: var(--navy); }
.catlist--fly .catlist__fly { top: -1px; left: 100%; width: 300px; min-height: 0; padding: 18px 22px; border-radius: var(--r); }
.catlist--fly > li:hover > .catlist__fly, .catlist--fly > li:focus-within > .catlist__fly { opacity: 1; visibility: visible; transform: none; }
.catlist--fly .catlist__fly li a { padding: 7px 0; border-top: 0; font-size: 14px; font-weight: 500; }
.catlist--fly .catlist__fly li a:hover { background: none; }
.catlist--fly .catlist__fly > a { padding: 0; border-top: 0; background: none; }
.catlist--fly .catlist__fly > .catv__fly-head { display: block; font-size: 17px; font-weight: 700; color: var(--navy-900); }
.catlist--fly .catlist__fly > .arrow-link { display: inline-flex; font-size: 14px; font-weight: 600; }


/* ===== sticky-header ===== */
.sticky {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-2);
  transform: translateY(-110%); transition: transform .3s var(--ease);
}
.sticky.is-shown { transform: none; }
.sticky__inner { height: 68px; display: flex; align-items: center; gap: 28px; }
.sticky__cat { position: relative; width: var(--sidebar); flex: none; }
.sticky__catbtn { width: 100%; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-radius: var(--r); background: var(--navy); color: #fff; font-size: 14px; font-weight: 600; }
.sticky__chev { margin-left: auto; transition: transform .2s; }
.sticky__cat.is-open .sticky__chev { transform: rotate(180deg); }
.sticky__drop {
  position: absolute; top: calc(100% + 8px); left: 0; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-3); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s var(--ease), visibility .2s;
}
.sticky__cat.is-open .sticky__drop { opacity: 1; visibility: visible; transform: none; }
.sticky .search { flex: 1; }
.sticky__tel { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.sticky__tel .ico { color: var(--navy); }
.sticky__phone { display: flex; flex-direction: column; flex: none; line-height: 1.25; }
.sticky__hours { padding-left: 26px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.sticky__addr { display: flex; align-items: center; gap: 8px; flex: none; font-size: 13px; line-height: 1.25; color: var(--ink-2); }
.sticky__addr .ico { flex: none; color: var(--orange-text); }
.sticky__addr span { display: flex; flex-direction: column; }
.sticky__addr b { font-weight: 600; color: var(--navy-900); }
.sticky__addr small { font-size: 11.5px; color: var(--muted); }
.sticky__addr:hover b { color: var(--orange-text); }
@media (max-width: 1279px) { .sticky__addr { display: none; } }
@media (max-width: 991px) { .sticky { display: none; } }
/* панель подразделов выходит за край списка — список не обрезаем, скругления — у крайних пунктов */
.sticky__drop--fly { overflow: visible; }
.sticky__drop--fly .catlist > li:first-child > a { border-radius: var(--r) var(--r) 0 0; }
.sticky__drop--fly .catlist > li:last-child > a { border-radius: 0 0 var(--r) var(--r); }


/* ===== mobile-nav ===== */
.mnav { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--surface); overflow-y: auto; padding: 12px 20px 32px; animation: mnavIn .28s var(--ease); }
@keyframes mnavIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.mnav__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mnav__logo img { width: 170px; }
.mnav__acc { border-bottom: 1px solid var(--line); }
.mnav__sect { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; font-size: 17px; font-weight: 700; color: var(--navy-900); }
.mnav__sect svg { transition: transform .25s var(--ease); color: var(--orange-text); }
.mnav__acc.is-open .mnav__sect svg { transform: rotate(90deg); }
.mnav__acc.is-open .catbar__panel { grid-template-rows: 1fr; }
.mnav__acc .catlist { margin: 0 -20px 8px; }
.mnav__links { display: grid; padding: 12px 0; border-bottom: 1px solid var(--line); }
.mnav__links a { padding: 10px 0; font-size: 16px; }
.mnav__links a:hover { color: var(--navy); }
.mnav__contacts { padding-top: 20px; }
.mnav__tel { font-size: 22px; font-weight: 700; color: var(--navy-900); }
.mnav__msg { display: flex; gap: 10px; margin-top: 14px; }
.mnav__addr { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.mnav__addr-v { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--navy-900); }
.mnav__addr-v .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--orange-text); }
.mnav__addr-l { margin-top: 12px; }
.mnav__hours { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin-top: 4px; font-size: 15px; }
.mnav__hours dt { color: var(--muted); }
.mnav__hours dd { margin: 0; font-weight: 600; color: var(--ink); }
/* услуги внутри направления: строка «ссылка + стрелка», под ней раскрывающийся список */
.mnav__dir-row { display: flex; align-items: stretch; border-top: 1px solid var(--line); }
.mnav__dir:first-child .mnav__dir-row { border-top: 0; }
.mnav__dir-row a { flex: 1; min-width: 0; border-top: 0 !important; }
.mnav__dir-tg { flex: none; width: 56px; display: grid; place-items: center; border-left: 1px solid var(--line); color: var(--orange-text); }
.mnav__dir-tg svg { transition: transform .25s var(--ease); }
.mnav__dir.is-open .mnav__dir-tg svg { transform: rotate(90deg); }
.mnav__subp { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.mnav__subp > ul { overflow: hidden; margin: 0; padding: 0; list-style: none; background: var(--surface-2); }
.mnav__dir.is-open > .mnav__subp { grid-template-rows: 1fr; }
.catlist .mnav__sub li a { padding: 11px 20px 11px 52px; font-size: 15px; font-weight: 500; border-top: 1px solid var(--line); justify-content: space-between; }
.catlist .mnav__sub li:first-child a { border-top: 1px solid var(--line); }
.mnav__sub-note { flex: none; font-size: 13px; color: var(--muted); }


/* ===== breadcrumbs ===== */
.crumbs { margin-bottom: 18px; font-size: 13px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; margin: 0 10px; border-right: 1.5px solid var(--muted-2); border-top: 1.5px solid var(--muted-2); transform: rotate(45deg); }
.crumbs a { transition: color .2s; }
.crumbs a:hover { color: var(--navy); }
.crumbs [aria-current] { color: var(--ink-2); }
@media (max-width: 599px) {
  .crumbs ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .crumbs ol::-webkit-scrollbar { display: none; }
}
@media (max-width: 991px), (pointer: coarse) { .crumbs a, .crumbs [aria-current] { display: inline-block; padding: 12px 0; } .crumbs { margin: -8px 0 10px; } }


/* ===== section-head ===== */
.shead { display: flex; align-items: center; gap: 12px 20px; margin-bottom: 22px; }
.shead__title { font-size: var(--fs-h2); line-height: 1.2; font-weight: 700; color: var(--navy-900); }
.shead__nav { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 599px) { .shead { flex-wrap: wrap; margin-bottom: 16px; } .shead .arrow-link { order: 3; width: 100%; } }


/* ===== carousel ===== */
/* Carousel: трек со scroll-snap (нативный свайп), стрелки из SectionHead. --per задаёт видимое кол-во. */
.carousel__track {
  --per: 4; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--per) - 1) * 16px) / var(--per));
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 2px 12px; margin: -2px -2px 0;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__track--3 { --per: 3; }
.carousel__track--2 { --per: 2; }
@media (max-width: 1199px) { .carousel__track { --per: 3; } .carousel__track--2 { --per: 2; } }
@media (max-width: 767px) { .carousel__track { --per: 2; gap: 10px; grid-auto-columns: calc((100% - 10px) / 2); } .carousel__track--2 { grid-auto-columns: 85%; } }
@media (max-width: 599px) { .carousel__track--3 { grid-auto-columns: 85%; } }


/* ===== slider ===== */
/* Слайдер (DESIGN-REF-BARRIER §3.6): без рамки, радиус 20, стрелки 48px по краям по центру, точки-полоски снизу слева, подпись фото под фото */
.slider { position: relative; min-height: 442px; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); }
.slider__track { display: grid; min-height: 442px; }
.slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 32px; padding: 40px 72px 84px 72px; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility .6s; }
.slide.is-active { opacity: 1; visibility: visible; }
.slide--light { background: var(--surface); }
.slide--tint { background: var(--navy-50); }
.slide--warm { background: var(--orange-50); }
.slide__kicker { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 14px; }
.slide__title { font-size: clamp(26px, 2.2vw, 32px); line-height: 1.06; font-weight: 800; color: var(--navy-900); letter-spacing: -.025em; }
.slide__title em { font-style: normal; color: var(--orange-text); }
.slide__desc { margin: 14px 0 22px; max-width: 44ch; font-size: 16px; color: var(--ink-2); }
.slide__media { align-self: center; margin: 0; display: grid; place-items: center; }
.slide__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.slide__second { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 15px; font-weight: 600; color: var(--navy); transition: color .2s; }
.slide__second svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.slide__second:hover { color: var(--orange-text); }
.slide__second:hover svg { transform: translateX(3px); }
.slide__media.slide__media--photo img { width: 100%; height: auto; max-height: 330px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.slide__media--photo figcaption { margin-top: 10px; font-size: 13px; line-height: 1.4; color: var(--muted); justify-self: start; }
/* лента цикла под слайдером (гибрид: витрина + «системы под ключ») */
.slider-cycle { margin-top: 28px; padding: 0 4px; }
@media (min-width: 992px) { .slider-cycle .cycle--strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 12px; font-size: 13px; } .slider-cycle .cycle--strip .cycle__i { flex-direction: column; align-items: flex-start; gap: 8px; line-height: 1.3; } .slider-cycle .cycle--strip .cycle__i + .cycle__i::before { display: none; } }
@media (min-width: 992px) and (max-width: 1199px) { .slider-cycle .cycle--strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; } }
.slide__media img { max-height: 330px; width: auto; object-fit: contain; border-radius: var(--r); }
.slide { transition: none; }
.slider.is-moved .slide { transition: opacity .6s ease, visibility .6s; }
.slider.is-moved .slide.is-active .slide__text > * { animation: slideUp .7s var(--ease) both; }
.slider.is-moved .slide.is-active .slide__text > :nth-child(2) { animation-delay: .06s; }
.slider.is-moved .slide.is-active .slide__text > :nth-child(3) { animation-delay: .12s; }
.slider.is-moved .slide.is-active .slide__text > :nth-child(4) { animation-delay: .18s; }
.slider.is-moved .slide.is-active .slide__media img { animation: mediaIn .9s var(--ease) both; }
@keyframes slideUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mediaIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.slider__controls { position: static; }
.slider__dots { position: absolute; left: 72px; bottom: 30px; z-index: 2; display: flex; gap: 8px; }
.slider__dots button { position: relative; width: 36px; height: 44px; }
.slider__dots button::after { content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 4px; border-radius: 2px; background: var(--line-2); transform-origin: left; transform: scaleX(.6); transition: background-color .2s, transform .3s var(--ease); }
.slider__dots button[aria-selected=true]::after { transform: none; background: var(--navy); }
.slider__dots button:hover::after { background: var(--muted-2); }
.slider__nav { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; pointer-events: none; }
.slider__nav .icon-btn { pointer-events: auto; background: var(--surface); box-shadow: 0 2px 10px rgba(21, 39, 74, .10); }
.slider__nav .icon-btn:hover { background: var(--navy); }
@media (max-width: 1199px) { .slide { padding: 32px 72px 76px 72px; gap: 24px; } .slide__title { font-size: 28px; } .slider__dots { left: 72px; } }
@media (max-width: 767px) {
  .slider { height: auto; }
  .slide { grid-template-columns: minmax(0, 1fr); padding: 28px 24px 84px; }
  .slider__nav { inset: auto 16px 22px auto; padding: 0; gap: 8px; }
  .slide__media { display: none; }
  .slide__cta .btn { width: 100%; }
  .slide__second { width: 100%; justify-content: center; }
  .slider__dots { left: 24px; bottom: 30px; }
}
@media (max-width: 599px) { .slide__desc { font-size: 15px; } }

/* слайд-оффер: крупный заголовок, мозаика 2×2 собственных фото с подписью направления */
.slide--offer { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.slide--offer .slide__title { font-size: clamp(28px, 2.6vw, 40px); line-height: 1.08; }
.slide--offer .slide__desc { max-width: 48ch; font-size: 17px; }
.slide__mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 150px 150px; gap: 10px; margin: 0; align-self: center; }
.slide__tile { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--navy-50); }
.slide__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.slide__tile:hover img { transform: scale(1.04); }
.slide__tag { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--navy-900); font-size: 12px; font-weight: 700; --icon-sw: 1.8px; }
.slide__tag svg { width: 18px; height: 18px; color: var(--navy); }
.slide__mosaic figcaption { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.slide.is-active .slide__mosaic .slide__tile { animation: mediaIn .9s var(--ease) both; }
.slide.is-active .slide__mosaic .slide__tile:nth-child(2) { animation-delay: .06s; }
.slide.is-active .slide__mosaic .slide__tile:nth-child(3) { animation-delay: .12s; }
.slide.is-active .slide__mosaic .slide__tile:nth-child(4) { animation-delay: .18s; }
@media (max-width: 1199px) { .slide__mosaic { grid-template-rows: 120px 120px; } }
@media (max-width: 767px) {
  .slide--offer { grid-template-columns: minmax(0, 1fr); }
  .slide--offer .slide__mosaic { display: grid; grid-template-rows: 96px 96px; margin-top: 4px; }
  .slide--offer .slide__title { font-size: 27px; }
  .slide__mosaic figcaption { display: none; }
}

/* Выбор типа объекта под CTA: дом / квартира / коммерция → квиз с предзаполненным «Объект» */
.slide__seg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.slide__seg-t { font-size: 14px; color: var(--muted); margin-right: 4px; }
.slide__chip { min-height: 36px; padding: 0 13px; border-radius: 999px; background: var(--navy-50); color: var(--navy); font: 600 14px/1 var(--font); border: 0; cursor: pointer; transition: background .2s, color .2s; }
.slide__chip:hover { background: var(--navy-100); }
.slide__chip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (max-width: 599px) {
  .slide__seg-t { width: 100%; }
  .slide__seg { gap: 6px; }
  .slide__chip { padding: 0 11px; font-size: 13px; }
}

/* ── Тёмный слайд оффера (cir-premium-design: тёмный Hero #15274A→#1F3763 + оранжевое свечение + точечная сетка) ── */
.slide--dark { position: relative; isolation: isolate; color: #fff;
  background:
    radial-gradient(ellipse 60% 70% at 18% 40%, rgba(244, 122, 32, .16) 0%, transparent 62%),
    linear-gradient(135deg, #15274A 0%, #1F3763 100%); }
.slide--dark::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 70%); mask-image: linear-gradient(90deg, #000 0%, transparent 70%); }
.slide--dark .slide__kicker { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: rgba(244, 122, 32, .14); border: 1px solid rgba(244, 122, 32, .32); color: #FFB47A; letter-spacing: .01em; }
.slide--dark .slide__kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(244, 122, 32, .22); }
.slide--dark .slide__title { color: #fff; }
.slide--dark .slide__title em { color: #FF9A4D; }
.slide--dark .slide__desc { color: rgba(255, 255, 255, .80); }
.slide--dark .btn--accent { box-shadow: 0 8px 24px rgba(244, 122, 32, .35); }
.slide--dark .slide__second { color: #fff; }
.slide--dark .slide__second:hover { color: #FFB47A; }
.slide--dark .slide__seg-t { color: rgba(255, 255, 255, .64); }
.slide--dark .slide__chip { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff; }
.slide--dark .slide__chip:hover { background: rgba(255, 255, 255, .16); }
.slide--dark .slide__chip:focus-visible { outline-color: #fff; }
.slide--dark .slide__tile { box-shadow: 0 8px 32px rgba(0, 0, 0, .35); outline: 1px solid rgba(255, 255, 255, .10); outline-offset: -1px; }
.slide--dark .slide__mosaic figcaption { color: rgba(255, 255, 255, .56); }
/* точки и стрелки поверх тёмного слайда */
.slider:has(.slide--dark.is-active) .slider__dots button::after { background: rgba(255, 255, 255, .28); }
.slider:has(.slide--dark.is-active) .slider__dots button[aria-selected=true]::after { background: var(--orange); }
.slider:has(.slide--dark.is-active) .slider__nav .icon-btn { background: rgba(255, 255, 255, .10); color: #fff; box-shadow: none; border: 1px solid rgba(255, 255, 255, .18); }
.slider:has(.slide--dark.is-active) .slider__nav .icon-btn:hover { background: #fff; color: var(--navy); }

/* ── Цикл под слайдером — отдельная голубая панель с заголовком ── */
.slider-cycle { margin-top: 20px; padding: 22px 28px 24px; border-radius: var(--r-xl); background: var(--navy-50); }
.slider-cycle__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 18px; }
.slider-cycle__t { font-size: 17px; font-weight: 800; color: var(--navy-900); letter-spacing: -.01em; }
.slider-cycle__t span { font-weight: 500; color: var(--muted); }
.slider-cycle .cycle__ico { background: #fff; }
.slider-cycle .cycle__ico b { background: var(--navy); color: #fff; box-shadow: 0 0 0 2px var(--navy-50); }
@media (min-width: 992px) { .slider-cycle .cycle--strip .cycle__i:not(:last-child)::after { border-top-color: #C9D3E4; } }
@media (max-width: 599px) { .slider-cycle { padding: 18px 16px 18px; } .slider-cycle__t { font-size: 16px; } }
@media (max-width: 599px) { .slide--dark .slide__kicker { border-radius: 12px; font-size: 12px; align-items: flex-start; } .slide--dark .slide__kicker::before { margin-top: 5px; flex: none; } }
/* ── Слайд с фото объекта на всю высоту справа (cover): высота трека задаётся самым высоким слайдом (оффер),
   поэтому фото тянется на всю высоту и не оставляет пустых полей вокруг маленькой картинки ── */
@media (min-width: 768px) {
  .slide--cover { position: relative; grid-template-columns: minmax(0, 1fr) 40%; padding-right: 0; }
  .slide--cover .slide__media--cover { position: absolute; top: 0; right: 0; bottom: 0; width: 40%; margin: 0; display: block; overflow: hidden; align-self: stretch; }
  .slide--cover .slide__media--cover img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 60%; border-radius: 0; }
  .slide--cover .slide__media--cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 64px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--navy-50), transparent); }
  .slide--warm.slide--cover .slide__media--cover::before { background: linear-gradient(90deg, var(--orange-50), transparent); }
  .slide--cover .slide__media--cover figcaption { position: absolute; left: 16px; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--navy-900); font-size: 12px; font-weight: 700; }
}
/* на телефоне фото cover занимает свободное место над текстом (иначе там пусто: высоту задаёт слайд-оффер) */
@media (max-width: 767px) {
  .slide--cover { grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; }
  .slide--cover .slide__media--cover { display: block; position: relative; order: -1; align-self: stretch; min-height: 0; margin: 0 0 20px; border-radius: var(--r-lg); overflow: hidden; }
  .slide--cover .slide__media--cover img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 50% 55%; border-radius: 0; }
  .slide--cover .slide__media--cover figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--navy-900); font-size: 12px; font-weight: 700; }
  .slide--cover .slide__text { align-self: end; }
}


/* ===== hero ===== */
/* Первый экран: текст слева с широкой строкой заголовка, реальное фото объекта справа, лента цикла снизу */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "text media" "cycle cycle"; gap: 40px 56px; align-items: center; padding: 48px 0 8px; }
.hero__text { grid-area: text; }
.hero__title { font-size: clamp(30px, 3.5vw, 52px); line-height: 1.06; font-weight: 800; letter-spacing: -.03em; color: var(--navy-900); }
.hero__title span { display: block; color: var(--orange-text); }
.hero__lead { margin-top: 22px; font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 54ch; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.hero__second { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 16px; font-weight: 600; color: var(--navy); border-bottom: 1px solid transparent; transition: color .2s; }
.hero__second svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.hero__second:hover { color: var(--orange-text); }
.hero__second:hover svg { transform: translateX(3px); }
.hero__media { grid-area: media; position: relative; margin: 0; align-self: stretch; }
.hero__media img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--r-lg); }
.hero__media figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: var(--r-sm); background: rgba(21, 39, 74, .82); color: #fff; font-size: 12px; line-height: 1.4; backdrop-filter: blur(6px); }
.hero__cycle { grid-area: cycle; padding-top: 24px; border-top: 1px solid var(--line); }
@media (max-width: 1199px) { .hero { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px 36px; } }
@media (max-width: 991px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "cycle" "media"; padding-top: 28px; }
  .hero__media img { height: 320px; }
}
@media (max-width: 599px) {
  .hero { gap: 22px; padding-top: 12px; }
  .hero__lead { font-size: 16px; margin-top: 14px; }
  .hero__cta { margin-top: 22px; gap: 6px; }
  .hero__cta .btn { width: 100%; }
  .hero__second { width: 100%; justify-content: center; }
  .hero__media img { height: 240px; }
}

/* Панель рядом с левым каталогом: место и высота слайдера витрины, внутри — один экран «системы под ключ» */
.hero--panel { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px 36px; padding: 36px 36px 26px; background: var(--surface); border-radius: var(--r-xl); }
.hero--panel .hero__title { font-size: clamp(28px, 2.5vw, 40px); line-height: 1.08; }
.hero--panel .hero__lead { margin-top: 16px; font-size: 17px; }
.hero--panel .hero__cta { margin-top: 24px; }
.hero--panel .hero__media img { height: 330px; }
.hero--panel .hero__cycle { padding-top: 20px; }
@media (min-width: 992px) { .hero--panel .hero__cycle .cycle--strip { font-size: 13px; gap: 0 16px; } }
@media (max-width: 1199px) and (min-width: 992px) {
  .hero--panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "cycle"; }
  .hero--panel .hero__media { display: none; }
  .hero--panel .hero__cycle .cycle--strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; }
}
@media (max-width: 991px) { .hero--panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "cycle" "media"; padding: 28px 0 0; background: none; border: 0; } .hero--panel .hero__media img { height: 320px; } }
@media (max-width: 599px) { .hero--panel { padding-top: 12px; } .hero--panel .hero__media img { height: 240px; } }


/* ===== cycle-steps ===== */
/* лента шагов */
.cycle--strip { display: flex; flex-wrap: wrap; gap: 6px 0; align-items: center; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.cycle--strip .cycle__i { display: inline-flex; align-items: center; gap: 8px; }
.cycle--strip .cycle__i + .cycle__i::before { content: ""; width: 18px; height: 1px; margin: 0 10px; background: var(--line-2); }
@media (min-width: 992px) {
  .hero__cycle .cycle--strip { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 12px; }
  .hero__cycle .cycle--strip .cycle__i { flex-direction: column; align-items: flex-start; gap: 10px; line-height: 1.3; }
  .hero__cycle .cycle--strip .cycle__i + .cycle__i::before { display: none; }
}
.cycle__n-old { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--navy-50); color: var(--navy); font-size: 11px; font-weight: 700; }
@media (max-width: 767px) {
  .cycle--strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding-bottom: 4px; margin-right: calc(var(--gutter) * -1); }
  .cycle--strip::-webkit-scrollbar { display: none; }
  .cycle--strip .cycle__i { flex: none; scroll-snap-align: start; white-space: nowrap; }
}

/* подробный цикл: заголовок закреплён слева, шаги прокручиваются справа */
.cyclefull { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.cyclefull__side { position: sticky; top: 96px; }
.cyclefull__title { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; font-weight: 800; color: var(--navy-900); letter-spacing: -.025em; }
.cyclefull__lead { margin: 16px 0 26px; font-size: 17px; color: var(--ink-2); max-width: 40ch; }
.cyclefull__list { display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.cyclefull__i { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--line-2); }
.cyclefull__n { font-size: 32px; font-weight: 800; line-height: 1; color: var(--muted-2); letter-spacing: -.02em; transition: color .4s var(--ease); }
.cyclefull__i.is-in .cyclefull__n { color: var(--orange); }
.cyclefull__i h3 { font-size: 19px; font-weight: 700; letter-spacing: -.01em; color: var(--navy-900); }
.cyclefull__i p { margin-top: 6px; color: var(--ink-2); max-width: 56ch; }
@media (max-width: 991px) { .cyclefull { grid-template-columns: minmax(0, 1fr); gap: 24px; } .cyclefull__side { position: static; } .cyclefull__i { grid-template-columns: 48px minmax(0, 1fr); padding: 18px 0; } .cyclefull__n { font-size: 22px; } }

/* цикл направления */
/* карточки шагов без рамок, номер в круге (DESIGN-REF-BARRIER §3.8) */
.cycledir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cycledir__i { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--navy-50); border-radius: var(--r-lg); }
.cycledir__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--navy); font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.cycledir__i h3 { font-size: 19px; font-weight: 700; color: var(--navy-900); letter-spacing: 0; }
.cycledir__i p { font-size: 15px; color: var(--ink-2); }
.cycledir__i .arrow-link { margin-top: auto; padding-top: 6px; }
.cycledir__i.is-current { background: var(--surface); box-shadow: inset 0 0 0 2px var(--navy); }
.cycledir__i.is-current .cycledir__n { background: var(--orange); color: var(--navy-900); }
@media (max-width: 1199px) { .cycledir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .cycledir { grid-template-columns: minmax(0, 1fr); gap: 10px; } .cycledir__i { flex-direction: row; flex-wrap: wrap; column-gap: 12px; padding: 16px; } .cycledir__i p, .cycledir__i .arrow-link { flex-basis: 100%; } .cycledir__n { margin: 0; } }

/* строка шагов с текущим */
.cyclemini { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px 18px; background: var(--surface-2); border-radius: var(--r-lg); }
.cyclemini ol { display: flex; flex-wrap: wrap; gap: 6px; }
.cyclemini li { padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--muted); background: var(--surface); }
.cyclemini li.is-current { background: var(--orange); color: var(--navy-900); font-weight: 700; }
@media (max-width: 767px) { .cyclemini ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; } .cyclemini ol::-webkit-scrollbar { display: none; } .cyclemini li { flex: none; } }

.insystem__lead { margin: -8px 0 20px; }
.insystem__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
@media (max-width: 599px) { .insystem__cta .btn { width: 100%; } }

/* нечётное число шагов: последний растягивается, чтобы в сетке не было пустой ячейки */
.cycledir[style*="--n: 7"] .cycledir__i:last-child { grid-column: span 2; }
@media (max-width: 599px) { .cycledir[style*="--n: 7"] .cycledir__i:last-child { grid-column: auto; } }
/* полоса «эта техника — часть системы» (каталог) */
.sysband { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center; padding: 24px 26px; background: var(--navy-50); border-radius: var(--r-lg); }
.sysband__t { font-size: 20px; font-weight: 700; color: var(--navy-900); letter-spacing: -.01em; }
.sysband__d { margin-top: 6px; color: var(--ink-2); max-width: 64ch; }
.sysband__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.sysband .cyclemini { grid-column: 1 / -1; background: var(--surface); }
@media (max-width: 991px) { .sysband { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .sysband { padding: 18px; } .sysband__cta .btn { width: 100%; } }
@media (min-width: 768px) and (max-width: 991px) { .cycle--strip { gap: 10px 22px; } .cycle--strip .cycle__i + .cycle__i::before { display: none; } }

/* иконки шагов цикла (c-task … c-service): круг navy-50, иконка navy, номер — маленький бейдж */
.cycle__ico, .cycledir__n { position: relative; display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--navy-50); color: var(--navy); transition: background-color .25s var(--ease), color .25s var(--ease); }
.cycle__ico svg, .cycledir__n svg { width: 26px; height: 26px; }
.cycle__ico b, .cycledir__n b { position: absolute; top: -3px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 2px var(--surface); color: var(--navy-900); font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; }
.cycle__i:hover .cycle__ico { background: var(--navy); color: #fff; }
.cycle__t { font-weight: 600; color: var(--ink); }
.cycledir__n { width: 56px; height: 56px; margin-bottom: 14px; background: var(--surface); }
.cycledir__n svg { width: 30px; height: 30px; }
.cycledir__n b { background: var(--orange); color: var(--navy-900); box-shadow: 0 0 0 2px var(--navy-50); }
.cycledir__i.is-current .cycledir__n { background: var(--navy); color: #fff; }
@media (min-width: 992px) { .slider-cycle .cycle--strip .cycle__i, .hero__cycle .cycle--strip .cycle__i { gap: 12px; } }
@media (max-width: 767px) { .cycle__ico { width: 40px; height: 40px; } .cycle__ico svg { width: 22px; height: 22px; } .cycle--strip .cycle__i { gap: 10px; } }
/* лента цикла: номер — тёмный бейдж, шаги соединены пунктиром (схема процесса) */
.cycle__ico b { background: var(--navy); color: #fff; box-shadow: 0 0 0 2px var(--surface); }
@media (min-width: 992px) {
  .slider-cycle .cycle--strip .cycle__i, .hero__cycle .cycle--strip .cycle__i { position: relative; }
  .slider-cycle .cycle--strip .cycle__i:not(:last-child)::after, .hero__cycle .cycle--strip .cycle__i:not(:last-child)::after { content: ""; position: absolute; left: 60px; right: 0; top: 24px; border-top: 1.5px dashed var(--line-2); }
  .slider-cycle .cycle--strip .cycle__i:hover .cycle__ico { background: var(--navy); color: #fff; }
}

/* список 01–08: иконка шага в круге + номер бейджем; при появлении шага круг заливается navy, бейдж — оранжевый */
.cyclefull__ico { position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--navy-50); color: var(--navy); transition: background-color .4s var(--ease), color .4s var(--ease); }
.cyclefull__ico svg { width: 30px; height: 30px; }
.cyclefull__ico b { position: absolute; top: -4px; right: -8px; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--surface); box-shadow: 0 0 0 2px var(--surface), inset 0 0 0 1.5px var(--line-2); color: var(--navy-900); font-size: 11px; font-weight: 800; line-height: 22px; text-align: center; transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.cyclefull__i.is-in .cyclefull__ico { background: var(--navy); color: #fff; }
.cyclefull__i.is-in .cyclefull__ico b { background: var(--orange); box-shadow: 0 0 0 2px var(--surface); }
.cyclefull__i h3 { margin-top: 6px; }
@media (max-width: 991px) { .cyclefull__i { grid-template-columns: 64px minmax(0, 1fr); } .cyclefull__ico { width: 46px; height: 46px; } .cyclefull__ico svg { width: 23px; height: 23px; } .cyclefull__ico b { min-width: 22px; height: 18px; line-height: 18px; font-size: 10px; } }
/* «Как мы работаем» (главная, первый экран направлений): кружок по центру колонки, подпись по центру под ним,
   пунктир — от кружка до кружка; на планшете и телефоне — сетка 4×2 без прокрутки */
.slider-cycle .cycle--strip .cycle__i, .hero__cycle .cycle--strip .cycle__i { align-items: center; text-align: center; }
@media (min-width: 992px) {
  .slider-cycle .cycle--strip .cycle__i:not(:last-child)::after, .hero__cycle .cycle--strip .cycle__i:not(:last-child)::after { left: calc(50% + 32px); right: auto; width: calc(100% + 12px - 64px); }
}
@media (min-width: 992px) and (max-width: 1199px) { .slider-cycle .cycle--strip .cycle__i:nth-child(4n)::after { display: none; } }
@media (max-width: 991px) {
  .slider-cycle .cycle--strip, .hero__cycle .cycle--strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; overflow: visible; margin-right: 0; scroll-snap-type: none; font-size: 13px; }
  .slider-cycle .cycle--strip .cycle__i, .hero__cycle .cycle--strip .cycle__i { flex-direction: column; gap: 8px; white-space: normal; line-height: 1.25; min-width: 0; }
  .slider-cycle .cycle--strip .cycle__i + .cycle__i::before, .hero__cycle .cycle--strip .cycle__i + .cycle__i::before { display: none; }
}
@media (max-width: 599px) { .slider-cycle .cycle--strip, .hero__cycle .cycle--strip { font-size: 12px; gap: 12px 4px; } }
/* полоса шагов в каталоге (cyclemini): 8 шагов равными ячейками на всю ширину, подпись по центру в одну строку;
   до 1360 px шаги по 4 в ряд, до 1200 px блок в одну колонку; на телефоне — по 3 в ряд, неполный ряд по центру, без прокрутки */
.cyclemini { min-width: 0; }
.cyclemini ol { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; width: 100%; }
.cyclemini li { display: grid; place-items: center; min-width: 0; padding: 7px 6px; text-align: center; white-space: nowrap; }
.sysband > * { min-width: 0; }
@media (max-width: 1359px) { .cyclemini ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* 8 в строку не помещаются без обрезки */
@media (max-width: 1199px) { .sysband { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .cyclemini ol { display: flex; flex-wrap: wrap; justify-content: center; overflow: visible; }
  .cyclemini li { flex: 0 0 calc((100% - 12px) / 3); padding: 7px 4px; font-size: 12px; }
}


/* ===== system-picker ===== */
.picker__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 22px; }
.picker__head .muted { max-width: 52ch; }
.picker__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.picker__card { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 200px; padding: 24px 24px 72px; background: var(--navy-50); border-radius: var(--r-lg); transition: background-color .25s var(--ease); }
.picker__card:hover { background: var(--navy-100); }
.picker__ico { width: 40px; height: 40px; color: var(--navy); margin-bottom: 10px; transition: color .2s; }
.picker__card:hover .picker__ico { color: var(--orange); }
.picker__name { font-size: 20px; font-weight: 700; color: var(--navy-900); }
.picker__task { font-size: 14px; color: var(--ink-2); }
.picker__start { margin-top: auto; padding-top: 10px; font-size: 14px; font-weight: 500; color: var(--muted); }
.picker__go { position: absolute; left: 24px; bottom: 20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--navy); transition: background-color .2s, color .2s; }
.picker__go svg { width: 14px; height: 14px; }
.picker__card:hover .picker__go { background: var(--orange); color: var(--navy-900); }
@media (max-width: 1199px) { .picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .picker__grid { gap: 10px; } .picker__card { min-height: 0; padding: 18px 18px 18px; } .picker__go { display: none; } .picker__ico { width: 32px; height: 32px; margin-bottom: 4px; } }
@media (max-width: 599px) {
  .picker__card { min-height: 0; padding: 16px 14px 18px; }
  .picker__name { font-size: 16px; hyphens: auto; overflow-wrap: anywhere; }
}

/* в правой колонке рядом с каталогом карточки компактнее */
.cols__main .picker__card { min-height: 180px; padding: 20px 20px 68px; }
.cols__main .picker__go { left: 20px; bottom: 16px; }

/* иконка направления в белом круге, при наведении — navy (как шаги цикла) */
.picker__ico { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 50%; background: var(--surface); color: var(--navy); --icon-sw: 2px; transition: background-color .25s var(--ease), color .25s var(--ease); }
.picker__ico svg { width: 30px; height: 30px; }
.picker__card:hover .picker__ico { background: var(--navy); color: #fff; }
@media (max-width: 599px) { .picker__ico { width: 44px; height: 44px; margin-bottom: 8px; } .picker__ico svg { width: 24px; height: 24px; } }


/* ===== project-story ===== */
/* полная история: вертикальная линия шагов */
.pstory--full { position: relative; display: grid; gap: 0; }
.pstory__step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding-bottom: 28px; }
.pstory__step:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line-2); }
.pstory__n { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); border: 2px solid var(--navy); color: var(--navy); font-weight: 800; }
.pstory__step.is-result .pstory__n { background: var(--orange); border-color: var(--orange); color: var(--navy-900); }
.pstory__h { font-size: 20px; font-weight: 700; color: var(--navy-900); margin: 7px 0 8px; letter-spacing: -.01em; }
.pstory__content p { color: var(--ink-2); max-width: 64ch; }
.pstory__content ul { display: grid; gap: 6px; }
.pstory__content li { position: relative; padding-left: 18px; color: var(--ink-2); }
.pstory__content li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.pstory__step.is-result .pstory__content { padding: 16px 18px; border-radius: var(--r); background: var(--ok-bg); }
.pstory__step.is-result .pstory__h { margin-top: 0; color: var(--ok); }

/* компактная карточка */
.pstory--compact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--navy-50); border-radius: var(--r-xl); overflow: hidden; }
.pstory__media { display: block; min-height: 100%; background: var(--navy-50); overflow: hidden; }
.pstory__media img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; transition: transform .6s var(--ease); }
.pstory--compact:hover .pstory__media img { transform: scale(1.03); }
.pstory__body { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.pstory__meta { display: flex; align-items: center; gap: 10px; }
.pstory__title { font-size: 22px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; color: var(--navy-900); }
.pstory__title a:hover { color: var(--navy); }
.pstory__line { display: grid; gap: 12px; }
.pstory__line li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.pstory__line b { color: var(--navy); font-weight: 700; }
.pstory__line span { color: var(--ink-2); }
.pstory__body .arrow-link { margin-top: auto; }
@media (max-width: 991px) { .pstory--compact { grid-template-columns: minmax(0, 1fr); } .pstory__media img { max-height: 260px; } }
@media (max-width: 599px) { .pstory__body { padding: 20px; } .pstory__line li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }


/* ===== category-tile ===== */
/* плитки без сетки линий (DESIGN-REF-BARRIER §3.10): фото на подложке surface-2, подпись под ней */
.ctiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px; }
.ctiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ctile-wrap { min-width: 0; }
.ctile { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; min-height: 220px; padding: 20px 16px 22px; text-align: center; background: var(--surface-2); border-radius: var(--r-lg); transition: background-color .25s var(--ease); }
.ctile__ico { width: 84px; height: 84px; margin-bottom: auto; margin-top: 8px; color: var(--navy); transition: color .2s, transform .3s var(--ease); }
.ctile__img { width: 100%; height: 120px; margin-bottom: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s var(--ease); }
.ctile__name { font-size: 15px; font-weight: 600; line-height: 1.35; margin-top: 16px; }
.ctile__count { font-size: 12px; color: var(--muted); }
.ctile:hover { background: var(--navy-50); }
.ctile:hover .ctile__ico { color: var(--orange); transform: translateY(-4px); }
.ctile:hover .ctile__img { transform: translateY(-4px) scale(1.03); }
.ctile:hover .ctile__name { color: var(--navy); }
@media (max-width: 1199px) { .ctiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
  .ctiles, .ctiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctile { min-height: 168px; padding: 18px 10px; }
  .ctile__ico { width: 60px; height: 60px; }
  .ctile__name { font-size: 14px; }
}

/* шапка страницы каталога и полоса «монтаж под ключ» */
.cat-head { margin-bottom: 22px; }
.cat-head .lead { margin-top: 10px; }
.install-band { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; padding: 22px 26px; background: var(--navy-50); border-radius: var(--r-lg); }
.install-band__k { font-size: 13px; font-weight: 600; color: var(--muted); }
.install-band__v { font-size: 26px; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.install-band__text { max-width: 60ch; }
.install-band__cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 599px) { .install-band { padding: 18px; } .install-band__cta .btn { width: 100%; } }
/* главная: каталог как вторичный блок */
.ctiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ctiles--5 .ctile { min-height: 190px; }
.home-catalog__lead { margin: -8px 0 20px; }
@media (max-width: 1199px) { .ctiles--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .ctiles--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ctiles--5 > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* плитка без фото: иконка направления в круге (как в выборе системы), при наведении — navy */
.ctile__ico { display: grid; place-items: center; width: 112px; height: 112px; margin: 4px auto auto; border-radius: 50%; background: var(--navy-50); color: var(--navy); --icon-sw: 2.4px; transition: background-color .25s var(--ease), color .25s var(--ease), transform .3s var(--ease); }
.ctile__ico svg { width: 52px; height: 52px; }
.ctile:hover .ctile__ico { background: var(--navy); color: #fff; transform: translateY(-4px); }
@media (max-width: 599px) { .ctile__ico { width: 76px; height: 76px; } .ctile__ico svg { width: 36px; height: 36px; } }

/* строка кругов с фото товара (DESIGN-REF-BARRIER: визуальная навигация по разделам) */
.cstrip { margin: 4px 0 8px; }
/* ячейки равной ширины на всю строку: круги стоят равномерно, подпись — по центру круга */
.cstrip__list { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); justify-content: stretch; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 8px 6px 8px; }
.cstrip__list::-webkit-scrollbar { display: none; }
.cstrip__list > li { scroll-snap-align: start; min-width: 0; }
.cstrip__i { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; height: 100%; padding: 8px 2px 10px; text-align: center; background: none; border: 0; border-radius: var(--r-lg); font: inherit; color: var(--ink); cursor: pointer; transition: background-color .25s var(--ease); }
.cstrip__ph { display: grid; place-items: center; width: 104px; height: 104px; margin-bottom: 10px; border-radius: 50%; background: var(--navy-50); overflow: hidden; transition: background-color .25s var(--ease), transform .3s var(--ease); }
.cstrip__ph img { width: 74%; height: 74%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s var(--ease); }
.cstrip__ph--ico { color: var(--navy); --icon-sw: 2.2px; }
.cstrip__ph--ico svg { width: 46px; height: 46px; }
.cstrip__n { align-self: stretch; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center; text-wrap: balance; }
.cstrip__c { font-size: 12px; color: var(--muted); }
.cstrip__i:hover .cstrip__ph { background: var(--navy-100); transform: translateY(-3px); }
.cstrip__i:hover .cstrip__ph img { transform: scale(1.06); }
.cstrip__i:hover .cstrip__n { color: var(--navy); }
.cstrip__i:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.cstrip__i--help .cstrip__ph { background: var(--orange-50, #FEF1E7); color: var(--orange-text); }
.cstrip__i--help:hover .cstrip__ph { background: var(--orange); color: var(--navy-900); }
@media (max-width: 599px) {
  .cstrip__list { grid-auto-columns: 112px; gap: 2px; margin-inline: calc(var(--gutter, 16px) * -1); padding-inline: var(--gutter, 16px); }
  .cstrip__ph { width: 80px; height: 80px; }
  .cstrip__ph--ico svg { width: 36px; height: 36px; }
  .cstrip__n { font-size: 12.5px; }
}
.cat-head__how { margin-top: 12px; }
/* текущая подкатегория среди соседних */
.cstrip__i.is-current { background: var(--navy-50); }
.cstrip__i.is-current .cstrip__ph { background: #fff; outline: 2px solid var(--navy); outline-offset: 3px; }
.cstrip__i.is-current .cstrip__n { color: var(--navy); }
.page > .cstrip { margin-bottom: 24px; }
/* страницы направлений: строка систем под hero, разделы каталога в блоке «Оборудование» */
.dir-strip { margin-top: 28px; }
.dir-strip .cstrip__list { grid-auto-columns: minmax(124px, 1fr); }   /* «Кондиционирование» без переноса; не помещаются — прокрутка */
.dir-strip .cstrip__ph { width: 84px; height: 84px; margin-bottom: 6px; }
.dir-strip .cstrip__ph--ico svg { width: 38px; height: 38px; }
.dir-eq { margin: 4px 0 20px; }
@media (max-width: 599px) { .dir-strip .cstrip__ph { width: 64px; height: 64px; } .dir-strip .cstrip__list { grid-auto-columns: 120px; } .dir-strip .cstrip__n { font-size: 12px; } .dir-strip .cstrip__i--help .cstrip__c { display: none; } }
/* круг с собственным фото объекта: снимок заполняет круг */
.cstrip__ph--photo img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.cstrip__i:hover .cstrip__ph--photo img { transform: scale(1.08); }
.svc-strip { margin-top: 28px; }
/* хаб «Системы и услуги»: строки услуг по направлениям, разделены линией */
.svc-index__row { padding: 20px 0 8px; border-top: 1px solid var(--line); }
.svc-index__row:first-of-type { border-top: 0; padding-top: 4px; }
.svc-index__t { margin-bottom: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.svc-index__t a { display: inline-flex; align-items: center; gap: 10px; color: var(--navy-900); }
.svc-index__t a:hover { color: var(--orange-text); }
.svc-index__t .ico { width: 24px; height: 24px; color: var(--navy); --icon-sw: 2px; }
.svc-index .cstrip { margin: 0; }
/* проекты: строка-фильтр по направлениям */
.proj-strip { margin: 8px 0 20px; }
.proj-empty { margin: 0 0 20px; color: var(--muted); }
[data-case-dir][hidden] { display: none !important; }
.art-strip { margin: 8px 0 24px; }
/* телефон: лента до 9 кругов — все видны сразу, равными ячейками по 3 в ряд (2 и 4 круга — по 2), неполный ряд по центру;
   длиннее — прокрутка, как на десктопе */
@media (max-width: 599px) {
  .cstrip__list:not(:has(> li:nth-child(10))) { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
  .cstrip__list:not(:has(> li:nth-child(10))) > li { flex: 0 0 33.333%; }
  .cstrip__list:has(> li:nth-child(2):last-child) > li, .cstrip__list:has(> li:nth-child(4):last-child) > li { flex-basis: 50%; }
  .cstrip__list:not(:has(> li:nth-child(10))) .cstrip__n { font-size: 12px; }
}


/* ===== project-filter ===== */


/* ===== photo-grid ===== */
/* Фото с объектов: плотная сетка 3 колонки, вертикальные кадры занимают 2 строки; без рамок, радиус 16 */
.pgal__lead { margin: -8px 0 20px; }
.pgal__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 16px; }
.pgal__item figure { position: relative; margin: 0; height: 100%; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-50); }
.pgal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pgal__item:hover img { transform: scale(1.03); }
.pgal__item--portrait { grid-row: span 2; }
.pgal__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; font-size: 13px; line-height: 1.35; color: #fff; background: linear-gradient(to top, rgba(21, 39, 74, .82), rgba(21, 39, 74, 0)); }
@media (max-width: 991px) { .pgal__grid { grid-auto-rows: 180px; } }
@media (max-width: 599px) { .pgal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; } .pgal__item figcaption { font-size: 12px; padding: 20px 10px 8px; } }

/* страница-галерея: фильтр по направлениям, 4 колонки, лайтбокс */
.gfilter { display: flex; flex-wrap: wrap; gap: 8px; }
.gfilter__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--navy-50); color: var(--navy); font-size: 15px; font-weight: 600; transition: background-color .25s var(--ease), color .25s var(--ease); }
.gfilter__btn span { font-size: 12px; font-weight: 600; color: var(--muted); }
.gfilter__btn:hover { background: var(--navy-100); }
.gfilter__btn.is-active { background: var(--navy); color: #fff; }
.gfilter__btn.is-active span { color: rgba(255, 255, 255, .75); }
.gfilter__more { margin-top: 14px; }
.pgal__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; }
.pgal__open { display: block; width: 100%; height: 100%; cursor: zoom-in; }
.pgal__item figcaption { pointer-events: none; }
.pgal__item[hidden] { display: none; }
.lbox { width: min(96vw, 1200px); max-width: none; max-height: 94dvh; padding: 0; border: 0; border-radius: var(--r-xl); background: var(--navy-900); color: #fff; overflow: visible; }
.lbox::backdrop { background: rgba(21, 39, 74, .8); }
.lbox figure { margin: 0; display: grid; justify-items: center; }
.lbox img { max-width: 100%; max-height: calc(94dvh - 64px); object-fit: contain; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.lbox figcaption { width: 100%; padding: 16px 20px; font-size: 15px; text-align: center; }
.lbox__close { position: absolute; top: 12px; right: 12px; z-index: 2; background: #fff; }
.lbox__nav { position: absolute; top: 50%; z-index: 2; margin-top: -24px; background: #fff; }
.lbox__nav--prev { left: 12px; } .lbox__nav--next { right: 12px; }
@media (max-width: 1199px) { .pgal__grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .gfilter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); } .gfilter::-webkit-scrollbar { display: none; } .gfilter__btn { flex: none; } }
@media (max-width: 599px) { .pgal__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; } }


/* ===== product-card ===== */
/* товарная плитка без рамки на белом (DESIGN-REF-BARRIER §3.10): фото на подложке surface-2, hover — scale фото, без подъёма */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.pcard { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border-radius: var(--r-lg); }
.pcard__img { display: block; aspect-ratio: 1 / 1; padding: 18px; background: var(--surface-2); border-radius: var(--r-lg); overflow: hidden; }
.pcard__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s var(--ease); }
.pcard__img .pcard__noimg { height: 100%; align-content: center; }
.pcard:hover .pcard__img img { transform: scale(1.04); }
.pcard__noimg { display: grid; justify-items: center; gap: 8px; font-size: 12px; color: var(--muted-2); }
.pcard__noimg svg { width: 36px; height: 36px; }
.pcard__body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 4px 10px; }
.pcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard__brand { font-size: 12px; color: var(--muted); font-weight: 500; }
.pcard__name { font-size: 15px; font-weight: 500; line-height: 1.45; letter-spacing: 0; }
.pcard__name a { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__name a:hover { color: var(--navy); }
.pcard__attrs { display: grid; gap: 4px; margin-top: auto; font-size: 12px; }
.pgrid:not(.is-table) .pcard__attrs li.is-empty, .pgrid:not(.is-table) .pcard__attr--series { display: none; }
.pgrid:not(.is-table) .pcard__attrs:not(:has(li:not(.is-empty))) { display: none; }
.pcard__attrs li { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 4px; }
.pcard__attrs b { color: var(--ink-2); font-weight: 600; }
.pcard__bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 4px 0; }
.pcard__price { font-size: 18px; font-weight: 700; color: var(--navy-900); white-space: nowrap; }
@media (max-width: 1199px) { .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 599px) {
  .pcard__img { padding: 10px; }
  .pcard__body { padding: 10px 2px 6px; gap: 8px; }
  .pcard__meta { flex-wrap: wrap; }
  .pcard__attrs { display: none; }
  .pcard__bottom { padding: 6px 2px 0; }
  .pcard__price { font-size: 15px; }
}

/* «Вы смотрели»: компактная горизонтальная лента */
.viewed .shead { margin-bottom: 14px; }
.viewed__track { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.viewed__track::-webkit-scrollbar { display: none; }
.vcard { flex: 0 0 180px; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface-2); border-radius: var(--r-lg); transition: background-color .25s var(--ease); }
.vcard:hover { background: var(--navy-50); }
.vcard__img { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 8px; background: var(--surface); border-radius: var(--r); }
.vcard__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.vcard__img svg { width: 28px; height: 28px; color: var(--muted-2); }
.vcard__name { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcard__price { font-size: 14px; color: var(--navy-900); }


/* ===== service-card ===== */
.scard { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px 22px 18px; background: var(--navy-50); border-radius: var(--r-lg); transition: background-color .25s var(--ease); }
.scard:hover { background: var(--navy-100); }
.scard__ico { width: 48px; height: 48px; border-radius: var(--r); background: var(--surface); color: var(--navy); display: grid; place-items: center; margin-bottom: 6px; }
.scard__ico svg { width: 28px; height: 28px; }
.scard__name { font-size: 16px; font-weight: 600; line-height: 1.35; letter-spacing: 0; }
.scard__name a:hover { color: var(--navy); }
.scard__sub { font-size: 14px; color: var(--muted); }
.scard__badge { margin-top: 2px; }
.scard__bottom { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(31, 55, 99, .12); }
.scard__price { font-size: 18px; font-weight: 700; color: var(--navy-900); }
.scard__price .muted { font-size: 14px; font-weight: 600; }

/* направление */
.dcard__link { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px 24px 76px; background: var(--navy-50); border-radius: var(--r-lg); transition: background-color .25s var(--ease); }
.dcard__link:hover { background: var(--navy-100); }
.dcard__ico { width: 44px; height: 44px; color: var(--navy); margin-bottom: 8px; transition: color .2s, transform .3s var(--ease); }
.dcard__link:hover .dcard__ico { color: var(--orange); transform: translateY(-2px); }
.dcard__name { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.dcard__lead { font-size: 14px; color: var(--muted); padding-right: 30px; }
.dcard__go { position: absolute; left: 24px; bottom: 20px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--navy); transition: background-color .2s, color .2s; }
.dcard__go svg { width: 14px; height: 14px; }
.dcard__link:hover .dcard__go { background: var(--orange); color: var(--navy-900); }

/* компактная ссылка-услуга */
.slink { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--navy-50); border-radius: var(--r); font-weight: 500; transition: border-color .2s, color .2s; }
.slink small { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.slink svg { width: 12px; height: 12px; color: var(--muted-2); flex: none; }
.slink small + svg { margin-left: 0; }
.slink span + svg { margin-left: auto; }
.slink:hover { background: var(--navy-100); color: var(--navy); }


/* ===== case-card ===== */
.kcard { display: flex; flex-direction: column; min-width: 0; background: var(--navy-50); border-radius: var(--r-lg); overflow: hidden; transition: background-color .25s var(--ease); }
.kcard:hover { background: var(--navy-100); }
.kcard__cover { display: grid; place-items: center; aspect-ratio: 5 / 2; background: transparent; color: rgba(31, 55, 99, .35); }
.kcard__cover svg { width: 44px; height: 44px; transition: transform .35s var(--ease); }
.kcard:hover .kcard__cover svg { transform: scale(1.08); }
.kcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px 20px; }
.kcard__title { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.kcard__title a:hover { color: var(--navy); }

/* страница проекта */
.case-head { max-width: 860px; margin-bottom: 26px; }
.case-head__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.case-head .lead { margin-top: 12px; }
.case { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.case__cover { margin-bottom: 20px; }
.case__cover img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--r-xl); }
/* факты проекта крупными числами под фото (DESIGN-REF-BARRIER §3.12) — только подтверждённые данные projects.json */
.case__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 24px; margin-bottom: 32px; padding: 24px 28px; background: var(--navy-50); border-radius: var(--r-lg); }
.case__facts li { display: flex; flex-direction: column; gap: 4px; }
.case__facts b { font-size: 30px; line-height: 1.05; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.case__facts span { font-size: 13px; color: var(--muted); }
@media (max-width: 599px) { .case__facts { padding: 18px; gap: 12px 16px; } .case__facts b { font-size: 24px; } }
.case__cover figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.case__body h2:first-child { margin-top: 0; }
.case__side { position: sticky; top: 90px; }
.case__side-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
@media (max-width: 991px) { .case { grid-template-columns: minmax(0, 1fr); } .case__side { position: static; } }
.case__side-link { margin-top: 10px; }
.case__main .pstory { margin-top: 8px; }
.kcard__cover--photo { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-100); }
.kcard__cover--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.kcard:hover .kcard__cover--photo img { transform: scale(1.04); }
.kcard__note { position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(21, 39, 74, .72); color: #fff; font-size: 12px; line-height: 1.4; }


/* ===== article-card ===== */
.acard { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 22px; background: var(--navy-50); border-radius: var(--r-lg); transition: background-color .25s var(--ease); }
.acard:hover { background: var(--navy-100); }
.acard__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.acard__title { font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.acard__title a:hover { color: var(--navy); }
.acard__excerpt { font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }


/* ===== trust ===== */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.trust li { display: flex; flex-direction: column; gap: 6px; padding: 24px 26px; background: var(--navy-50); border-radius: var(--r-lg); }
.trust b { font-size: 32px; line-height: 1; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.trust span { font-size: 14px; color: var(--muted); line-height: 1.45; }
.trust--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.trust--compact b { font-size: 24px; }
@media (max-width: 991px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}
@media (max-width: 599px) { .trust li { padding: 18px; } .trust b { font-size: 24px; } }

/* TrustBar — факты крупными числами под первым экраном (DESIGN-REF-BARRIER §3.15), без рамок */
.trustbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 20px; padding: 8px 0; }
.trustbar li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.trustbar b { font-size: 32px; line-height: 1; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.trustbar span { font-size: 13px; line-height: 1.4; color: var(--muted); }
@media (max-width: 1199px) { .trustbar b { font-size: 28px; } }
@media (max-width: 767px) { .trustbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trustbar b { font-size: 26px; } .trustbar li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* цифры доверия — отдельной полосой: линии сверху/снизу, вертикальные разделители, оранжевая метка над числом */
.trustbar { padding: 26px 0; border-block: 1px solid var(--line); gap: 16px 0; }
.trustbar li { position: relative; padding: 0 20px; }
.trustbar li + li { border-left: 1px solid var(--line); }
.trustbar li::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--orange); margin-bottom: 8px; }
.trustbar b { font-size: 36px; }
@media (max-width: 1199px) { .trustbar b { font-size: 30px; } }
@media (max-width: 767px) {
  .trustbar { gap: 22px 0; }
  .trustbar li { padding: 0 14px; }
  .trustbar li:nth-child(odd) { border-left: 0; }
  .trustbar b { font-size: 26px; }
}
.home-trust { margin-top: 32px; }


/* ===== filters ===== */
/* Полоса фильтров над списком (референс: santehnik.shop). Кнопки-группы, выпадающие панели с пилюлями, счётчик на кнопке,
   строка выбранных значений. Форма одна для десктопа и drawer'а. */
.filters { position: relative; z-index: 60; }
.fbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; background: var(--navy); border-radius: var(--r-lg); }
.fgroup { position: relative; border: 0; margin: 0; padding: 0; min-width: 0; }
.fgroup legend { float: none; width: auto; padding: 0; margin: 0; }
.fgroup__btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: var(--r); color: #fff; font-size: 14px; font-weight: 600; transition: background-color .25s var(--ease); }
.fgroup__btn:hover, .fgroup.is-open .fgroup__btn { background: rgba(255, 255, 255, .12); }
.fgroup.has-value .fgroup__btn { background: #fff; color: var(--navy-900); }
.fgroup__btn svg { width: 12px; height: 12px; opacity: .8; transition: transform .25s var(--ease); }
.fgroup.is-open .fgroup__btn svg { transform: rotate(180deg); }
.fgroup__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--orange); color: var(--navy-900); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.fgroup__panel { display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 5; min-width: 260px; max-width: 360px; padding: 16px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-3); }
.fgroup.is-open .fgroup__panel { display: block; }
.fgroup__panel .fcheck { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 6px 0; padding: 7px 12px; border-radius: 999px; background: var(--navy-50); font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .2s, color .2s; }
.fgroup__panel .fcheck:hover { background: var(--navy-100); }
.fgroup__panel .fcheck:has(input:checked) { background: var(--navy); color: #fff; }
.fgroup__panel .fcheck:has(input:checked) small { color: rgba(255, 255, 255, .75); }
.fgroup__panel .fcheck input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fgroup__panel .fcheck small { margin-left: 2px; color: var(--muted-2); font-size: 12px; }
.fgroup__panel .fcheck.is-empty { opacity: .45; }
.fgroup__hint { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.fsel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; min-height: 0; }
@media (max-width: 991px) { .fsel { margin-top: auto; } }
.fsel:empty { display: none; }
.fsel .fchip { background: var(--navy-50); }
.fsel .fchip b { font-weight: 500; color: var(--muted); }
.filters__head { display: none; }
.filters__title { font-size: 16px; font-weight: 700; }
.filters__close { display: none; }
.frange { display: flex; align-items: center; gap: 8px; min-width: 228px; }
.frange label { flex: 1; }
.frange input { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 14px; font-variant-numeric: tabular-nums; }
.frange input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31, 55, 99, .12); }
.filters__foot { display: none; }

.ftool { display: flex; align-items: center; gap: 16px; margin: 16px 0 12px; }
.fview { display: flex; gap: 4px; }
.fview__btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r-sm); color: var(--muted-2); transition: background-color .2s, color .2s; }
.fview__btn svg { width: 18px; height: 18px; }
.fview__btn:hover { background: var(--surface-2); color: var(--navy); }
.fview__btn.is-active { background: var(--navy-50); color: var(--navy); }
/* вид «список»: фото · описание с характеристиками-чипами · цена и кнопка «В расчёт» справа */
.pgrid.is-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pgrid.is-list .pcard { display: grid; grid-template-columns: 132px minmax(0, 1fr) 190px; gap: 20px; align-items: center; padding: 16px 20px 16px 16px; background: var(--surface-2); border-radius: var(--r-lg); }
.pgrid.is-list .pcard__img { width: 132px; aspect-ratio: 1 / 1; padding: 8px; background: var(--surface); border-radius: var(--r); }
.pgrid.is-list .pcard__body { padding: 0; gap: 8px; }
.pgrid.is-list .pcard__meta { justify-content: flex-start; gap: 12px; }
.pgrid.is-list .pcard__name { font-size: 16px; font-weight: 600; line-height: 1.35; }
.pgrid.is-list .pcard__name a { -webkit-line-clamp: 2; }
.pgrid.is-list .pcard__attrs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pgrid.is-list .pcard__attrs li { display: inline-flex; gap: 5px; padding: 4px 10px; border: 0; border-radius: 999px; background: var(--surface); font-size: 12px; color: var(--muted); }
.pgrid.is-list .pcard__attrs li b { color: var(--ink); }
.pgrid.is-list .pcard__attrs li span::after { content: ":"; }
.pgrid.is-list .pcard__bottom { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; border-left: 1px solid var(--line); padding-left: 20px; }
.pgrid.is-list .pcard__price { font-size: 22px; text-align: right; }
.pgrid.is-list .calc-add--round { width: 100%; height: 44px; border-radius: var(--r); gap: 8px; font-size: 14px; font-weight: 600; }
.pgrid.is-list .calc-add--round::after { content: "В расчёт"; }
.pgrid.is-list .calc-add--round[aria-pressed=true]::after { content: "В расчёте"; }
@media (max-width: 767px) { .pgrid.is-list .pcard { grid-template-columns: 88px minmax(0, 1fr); padding: 12px; gap: 12px; } .pgrid.is-list .pcard__img { width: 88px; } .pgrid.is-list .pcard__bottom { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; border-left: 0; padding-left: 0; } .pgrid.is-list .pcard__price { font-size: 18px; } .pgrid.is-list .calc-add--round { width: auto; padding: 0 16px; } .pgrid.is-list .pcard__name { font-size: 15px; } }

.ftool__open { display: none !important; position: relative; }
.ftool__badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--orange); color: var(--navy-900); font-size: 11px; font-weight: 700; line-height: 20px; }
.ftool__sort { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ftool__sort select { height: 40px; padding: 0 34px 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231F3763' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px; appearance: none; font-size: 14px; cursor: pointer; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fchips:empty { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--navy-50); color: var(--navy); font-size: 13px; font-weight: 500; }
.fchip svg { width: 10px; height: 10px; }
.fchip:hover { background: var(--navy-100); }
.fchip--reset { background: none; color: var(--orange-text); }
.fchip.is-active { background: var(--navy); color: #fff; }

@media (max-width: 991px) {
  .ftool__open { display: inline-flex !important; }
  .filters {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: var(--z-drawer); width: min(360px, 88vw); border-radius: 0; background: var(--surface);
    display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .3s var(--ease); box-shadow: var(--shadow-3);
  }
  .filters.is-open { transform: none; }
  .filters__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .filters__form { flex: 1; overflow-y: auto; }
  .fbar { display: block; padding: 0; background: none; border-radius: 0; }
  .fgroup { border-bottom: 1px solid var(--line); }
  .fgroup__btn { width: 100%; height: auto; padding: 14px 20px; border-radius: 0; color: var(--ink); justify-content: space-between; }
  .fgroup__btn:hover, .fgroup.is-open .fgroup__btn, .fgroup.has-value .fgroup__btn { background: none; color: var(--ink); }
  .fgroup__btn svg { margin-left: auto; opacity: .6; }
  .fgroup__panel { position: static; min-width: 0; max-width: none; padding: 0 20px 16px; box-shadow: none; border-radius: 0; }
  .fsel { padding: 12px 20px 0; }
  .filters__close { display: grid; }
  .filters__foot { display: flex; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--line); }
  .filters__foot .btn { flex: 1; }
  .filters-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: rgba(21, 39, 74, .45); animation: fadeIn .2s; }
}
@media (max-width: 599px) { .ftool { flex-wrap: wrap; gap: 10px; } .ftool__sort > span { display: none; } }
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols__side--filters { position: static; }
@media (max-width: 1199px) { .pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) { .fview { display: none; } .cols__side--filters { display: block; width: auto; } .pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* вид «таблица» (референс: третий вид списка у santehnik.shop): строка на модель, колонки через display:contents */
.ptable-head, .pgrid.is-table .pcard { display: grid; grid-template-columns: 56px 96px 90px minmax(0, 1fr) 110px 90px 130px 120px 44px; align-items: center; gap: 12px; padding: 8px 12px; }
.ptable-head { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; margin-bottom: 4px; }
.ptable-head__price { text-align: right; }
.pgrid.is-table { display: block; }
.pgrid.is-table .pcard { border-radius: var(--r); background: none; transition: background-color .2s; }
.pgrid.is-table .pcard:nth-child(even) { background: var(--surface-2); }
.pgrid.is-table .pcard:hover { background: var(--navy-50); }
.pgrid.is-table .pcard__img { width: 56px; height: 56px; aspect-ratio: auto; padding: 4px; border-radius: var(--r-sm); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.pgrid.is-table .pcard__body, .pgrid.is-table .pcard__meta, .pgrid.is-table .pcard__attrs, .pgrid.is-table .pcard__bottom { display: contents; }
.pgrid.is-table .pcard__brand { font-size: 13px; color: var(--ink-2); }
.pgrid.is-table .pcard__name { font-size: 14px; font-weight: 600; }
.pgrid.is-table .pcard__name a { -webkit-line-clamp: 2; }
.pgrid.is-table .pcard__attrs li { display: block; border: 0; padding: 0; font-size: 14px; color: var(--ink); }
.pgrid.is-table .pcard__attrs li span { display: none; }
.pgrid.is-table .pcard__attrs li.is-empty b { color: var(--muted-2); font-weight: 400; }
.pgrid.is-table .pcard__price { font-size: 17px; font-weight: 800; text-align: right; }
.pgrid.is-table .calc-add--round { width: 36px; height: 36px; }
@media (max-width: 1199px) { .ptable-head, .pgrid.is-table .pcard { grid-template-columns: 56px 96px minmax(0, 1fr) 100px 80px 110px 44px; } .ptable-head > :nth-child(3), .ptable-head > :nth-child(7), .pgrid.is-table .pcard__brand, .pgrid.is-table .pcard__attr--series { display: none; } }
@media (max-width: 899px) { .fview__btn--table { display: none; } }

/* строка «система» над фильтрами (восстановлено — потеряно в 2d16be8) */
.sysline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 14px; padding: 12px 16px; border-radius: var(--r); background: var(--navy-50); font-size: 14px; color: var(--ink-2); }
.sysline .ico { width: 20px; height: 20px; color: var(--navy); }
.sysline .link { font-weight: 600; min-height: 32px; }


/* ===== pagination ===== */
.pager { display: grid; justify-items: center; gap: 12px; margin-top: 28px; }


/* ===== product-gallery ===== */
/* галерея без рамок (DESIGN-REF-BARRIER §3.11): вертикальные превью слева, фото на подложке surface-2 */
.gallery { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "thumbs main"; gap: 12px; }
.gallery__main { grid-area: main; display: block; aspect-ratio: 1 / 1; padding: 28px; overflow: hidden; background: var(--surface-2); border-radius: var(--r-lg); }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gallery__thumbs { grid-area: thumbs; display: flex; flex-direction: column; gap: 8px; }
.gallery__thumb { width: 64px; height: 64px; padding: 6px; border-radius: var(--r); background: var(--surface-2); outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .25s var(--ease); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gallery__thumb[aria-pressed=true], .gallery__thumb:hover { outline-color: var(--navy); }
@media (max-width: 767px) { .gallery { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "thumbs"; } .gallery__thumbs { flex-direction: row; } .gallery__main { padding: 16px; } }


/* ===== product-buybox ===== */
/* блок покупки: navy-50 без рамки, цена 36, два равноправных пути — accent и outline (DESIGN-REF-BARRIER §3.11) */
.buybox { padding: 26px; background: var(--navy-50); border-radius: var(--r-lg); }
.buybox__stock { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.buybox__price { margin-top: 14px; font-size: 36px; line-height: 1.1; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.buybox__actions { display: grid; gap: 10px; margin-top: 18px; }
.buybox__terms { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(31, 55, 99, .12); font-size: 14px; color: var(--ink-2); }
.buybox__terms li { display: flex; gap: 12px; align-items: flex-start; }
.buybox__terms svg { width: 20px; height: 20px; flex: none; color: var(--navy); }

/* раскладка карточки товара: галерея | инфо | покупка (референс: 3 колонки) */
.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 340px; gap: 30px; align-items: start; }
.product__title { font-size: clamp(22px, 2vw, 28px); line-height: 1.25; font-weight: 700; color: var(--navy-900); letter-spacing: -.015em; }
.product__short { margin: 12px 0 18px; color: var(--ink-2); }
.product__info .arrow-link { margin-top: 14px; }
.product__buy { position: sticky; top: 90px; }
@media (max-width: 1199px) { .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .product__buy { grid-column: 2; position: static; } .product__gallery { grid-row: span 2; } }
@media (max-width: 767px) { .product { grid-template-columns: minmax(0, 1fr); gap: 20px; } .product__buy { grid-column: auto; } .product__gallery { grid-row: auto; } }

/* два сценария равного веса: купить оборудование / система под ключ */
.buybox__paths { display: grid; gap: 16px; margin-top: 20px; }
.buybox__path { display: grid; gap: 6px; }
.buybox__path-d { font-size: 13px; line-height: 1.45; color: var(--muted); }
.buybox__path .calc-add--wide { width: 100%; }
/* липкая нижняя полоса товара: появляется, когда блок покупки ушёл из экрана */
.pbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.4) blur(8px); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(21, 39, 74, .08); transform: translateY(110%); transition: transform .3s var(--ease); }
.pbar.is-shown { transform: none; }
.pbar__inner { display: flex; align-items: center; gap: 20px; height: 72px; }
.pbar__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar__price { font-size: 20px; font-weight: 800; color: var(--navy-900); white-space: nowrap; }
.pbar__cta { display: flex; gap: 10px; flex: none; }
.pbar__cta .btn, .pbar__cta .calc-add--wide { min-height: 44px; }
@media (max-width: 767px) { .pbar__inner { height: 64px; gap: 12px; } .pbar__name { display: none; } .pbar__price { margin-right: auto; font-size: 18px; } }
@media (max-width: 599px) { .pbar__cta .calc-add__txt { display: none; } .pbar__cta .calc-add--wide { padding: 0 14px; } .pbar__cta .btn { padding: 0 14px; font-size: 14px; } }
@media (max-width: 399px) { .pbar__inner { gap: 8px; } .pbar__price { font-size: 16px; } .pbar__cta { flex: 0 1 auto; min-width: 0; gap: 8px; } .pbar__cta .btn { flex-shrink: 1; min-width: 0; padding: 4px 10px; font-size: 13px; line-height: 1.15; } }


/* ===== product-specs ===== */
.specs { margin: 0; max-width: 720px; }
.specs > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-weight: 500; }
.specs--short > div { font-size: 14px; padding: 8px 0; }


/* ===== tabs ===== */
/* Tabs — ARIA tablist; разметку пишет шаблон: [data-c=tabs] > [role=tablist] > [role=tab] + [role=tabpanel] */
.tabs__list { display: flex; gap: 4px; border-bottom: 1px solid var(--line-2); overflow-x: auto; scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { position: relative; padding: 14px 18px; font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .2s; }
.tabs__tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--orange); transform: scaleX(0); transition: transform .25s var(--ease); }
.tabs__tab:hover { color: var(--navy); }
.tabs__tab[aria-selected=true] { color: var(--navy-900); }
.tabs__tab[aria-selected=true]::after { transform: none; }
.tabs__panel { padding-top: 24px; }
.tabs__panel:focus-visible { outline: none; }


/* ===== service-hero ===== */
.shero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px; background: var(--navy-50); border-radius: var(--r-xl); }
.shero--photo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.shero__check { display: grid; gap: 10px; margin-top: 20px; font-size: 15px; color: var(--ink); }
.shero__check li { display: flex; gap: 10px; align-items: flex-start; }
.shero__check svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--orange); }
.shero__photo { margin: 0; }
.shero__photo img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); }
.shero__photo figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.shero__kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--muted); }
.shero__kicker .ico { color: var(--navy); }
.shero__title { font-size: var(--fs-h1); line-height: 1.1; font-weight: 800; color: var(--navy-900); letter-spacing: -.025em; }
.shero__lead { margin-top: 16px; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 56ch; }
.shero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.shero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; align-self: center; }
.shero__facts li { display: flex; flex-direction: column; gap: 6px; padding: 22px; background: var(--surface); border-radius: var(--r-lg); }
.shero__facts b { font-size: 34px; overflow-wrap: anywhere; line-height: 1.05; font-weight: 800; color: var(--navy); letter-spacing: -.02em; }
.shero__facts span { font-size: 13px; line-height: 1.45; color: var(--muted); }
@media (max-width: 1199px) { .shero { grid-template-columns: minmax(0, 1fr); padding: 32px; gap: 28px; } }
@media (max-width: 599px) {
  .shero { padding: 22px 18px; }
  .shero__lead { font-size: 16px; }
  .shero__cta .btn { width: 100%; }
  .shero__facts li { padding: 14px; }
  .shero__facts { gap: 10px; }
  .shero__facts li { padding: 14px; }
  .shero__facts b { font-size: 24px; }
}

/* инфо-карточки (симптомы и т. п.) */
.icard { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--navy-50); border-radius: var(--r-lg); }
.icard__title { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.icard__text { font-size: 14px; color: var(--muted); }
.icard__dl { margin: auto 0 0; padding-top: 12px; border-top: 1px solid rgba(31, 55, 99, .12); display: grid; gap: 8px; font-size: 14px; }
.icard__dl dt { font-size: 12px; color: var(--muted); }
.icard__dl dd { margin: 0; font-weight: 500; }
/* таблица данных */
.dtable-wrap { overflow-x: auto; }
.dtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.dtable th, .dtable td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.dtable thead th { background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .03em; }
.dtable tbody th { font-weight: 600; }
.dtable tbody tr:last-child > * { border-bottom: 0; }
.dtable tbody tr:hover { background: var(--surface-2); }
@media (max-width: 599px) { .dtable th, .dtable td { padding: 10px 12px; } .dtable td:last-child, .dtable thead th:last-child { min-width: 200px; } }
/* покупка услуги в строке */
.split { align-items: center; }
.buy-inline__price { margin: 10px 0 6px; font-size: 32px; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.buy-inline__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.steps-6 .steps { --n: 3 !important; }



/* ===== page-subnav ===== */
/* липкая под-навигация: под липкой шапкой (68px), выше контента; на телефоне — якоря прокручиваются по горизонтали */
.subnav { position: sticky; top: 0; z-index: 70; margin: 28px calc(var(--gutter) * -1) 0; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.sticky.is-shown ~ * .subnav, body.has-sticky .subnav { top: 68px; }
.subnav__inner { display: flex; align-items: center; gap: 24px; height: 56px; }
.subnav__links { display: flex; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.subnav__links::-webkit-scrollbar { display: none; }
.subnav__links a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease); }
.subnav__links a:hover { background: var(--navy-50); color: var(--navy); }
.subnav__tel { margin-left: auto; font-size: 16px; font-weight: 700; color: var(--navy-900); white-space: nowrap; }
.subnav__short { display: none; }
@media (max-width: 767px) { .subnav__inner { gap: 12px; height: 52px; } .subnav__tel { display: none; } .subnav .btn { margin-left: auto; flex: none; } .subnav__full { display: none; } .subnav__short { display: inline; } }


/* ===== price-block ===== */
/* тарифы без рамок; рекомендуемый — белый с outline navy (DESIGN-REF-BARRIER §3.9) */
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.price-tier { position: relative; display: flex; flex-direction: column; padding: 28px 26px 26px; background: var(--navy-50); border: 2px solid transparent; border-radius: var(--r-lg); }
.price-tier--hl { background: var(--surface); border-color: var(--navy); }
.price-tier__flag { position: absolute; top: -12px; left: 24px; padding: 3px 10px; border-radius: var(--r-sm); background: var(--navy); color: #fff; font-size: 12px; font-weight: 600; }
.price-tier__name { font-size: 17px; font-weight: 600; letter-spacing: 0; }
.price-tier__value { margin-top: 10px; font-size: 34px; line-height: 1.1; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; min-height: 33px; }
.price-tier__note { margin-top: 6px; font-size: 13px; color: var(--muted); min-height: 38px; }
.price-tier__list { display: grid; gap: 9px; margin: 18px 0 22px; padding-top: 18px; border-top: 1px solid rgba(31, 55, 99, .12); font-size: 15px; }
.price-tier__list li { display: flex; gap: 10px; align-items: flex-start; }
.price-tier__list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--orange); }
.price-tier .btn { margin-top: auto; }
@media (max-width: 991px) { .prices { grid-template-columns: minmax(0, 1fr); } .price-tier__note { min-height: 0; } }
/* 4 карточки — 4 в ряд, на средних экранах 2×2 (без неполного ряда) */
.prices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1279px) { .prices--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) { .prices--4 { grid-template-columns: minmax(0, 1fr); } }


/* ===== steps ===== */
.steps { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; counter-reset: s; }
.steps__item { padding: 24px 22px; background: var(--navy-50); border-radius: var(--r-lg); }
.steps__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--navy); font-weight: 700; font-size: 15px; }
.steps__item h3 { margin-top: 14px; font-size: 16px; font-weight: 600; letter-spacing: 0; }
.steps__item p { margin-top: 6px; font-size: 14px; color: var(--muted); }
@media (max-width: 991px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .steps__item { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; padding: 18px 20px; }
  .steps__n { grid-row: span 2; }
  .steps__item h3 { margin-top: 4px; }
}


/* ===== related-links ===== */
.related { padding: 28px; background: var(--surface-2); border-radius: var(--r-lg); }
.related__title { font-size: 20px; font-weight: 700; color: var(--navy-900); margin-bottom: 18px; }
.related__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; }
.related__gtitle { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.related__group li { padding: 5px 0; font-size: 15px; }
.related__group a { color: var(--navy); }
.related__group a:hover { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }


/* ===== faq ===== */
/* minimalist: без коробок, разделители 1px, знак +/− */
.faq { border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; font-size: 16px; font-weight: 600; transition: color .2s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--navy); }
.faq__icon { position: relative; width: 14px; height: 14px; flex: none; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: var(--orange-text); transition: transform .25s var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: rotate(0); }
.faq__a p { padding: 0 34px 20px 0; color: var(--ink-2); max-width: 75ch; }


/* ===== prose ===== */
/* Prose — оформление текстов статей и SEO-блоков (контент из WP the_content). */
.prose { font-size: 16px; line-height: 1.7; color: var(--ink); max-width: 72ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2em; font-size: 28px; line-height: 1.25; font-weight: 700; color: var(--navy-900); scroll-margin-top: 90px; }
.prose h3 { margin-top: 1.6em; font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--navy-900); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--orange-text); }
.prose a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(31, 55, 99, .35); text-underline-offset: 3px; }
.prose a:hover { color: var(--orange-text); }
.prose strong { font-weight: 600; }
.prose figure { margin: 1.6em 0; }
.prose figure img { border-radius: var(--r-lg); width: 100%; max-height: 560px; object-fit: cover; }
.prose figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.prose .cir-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.prose th, .prose td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--surface-2); font-weight: 600; color: var(--navy-900); }
.prose tr:last-child td { border-bottom: 0; }
.prose .cir-key, .prose .cir-note { padding: 16px 20px; border-radius: var(--r); background: var(--navy-50); }
.prose .cir-mistake { padding: 12px 16px; border-radius: var(--r); background: var(--err-bg); color: #7A271A; }
.prose .cir-mistake p { margin: 0; }
.prose .cir-faq details { border-bottom: 1px solid var(--line-2); }
.prose .cir-faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; }
.prose .cir-faq summary::-webkit-details-marker { display: none; }
.prose .cir-faq-body p { margin: 0 0 14px; color: var(--ink-2); }

/* страница статьи */
/* статья: узкая колонка чтения 720px + оглавление, блок целиком по центру (DESIGN-REF-BARRIER §3.13) */
.article { display: grid; grid-template-columns: minmax(0, 720px) 280px; justify-content: center; gap: 56px; align-items: start; max-width: 1080px; margin: 0 auto; }
.prose img { border-radius: var(--r-lg); }
.article__head { max-width: 72ch; margin-bottom: 26px; }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12px; letter-spacing: .03em; color: var(--muted); margin-bottom: 16px; }
.article__title { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.article__cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; max-width: 72ch; margin-top: 40px; padding: 24px; border-radius: var(--r-lg); background: var(--navy-50); }
.article__cta-k { font-weight: 700; color: var(--navy-900); }
.article__cta-t { font-size: 14px; color: var(--ink-2); }
.article__side { position: sticky; top: 90px; display: grid; gap: 16px; }
.toc { padding: 20px; background: var(--surface-2); border-radius: var(--r-lg); }
.toc__title, .toc summary { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.toc ol { display: grid; gap: 2px; counter-reset: t; }
.toc li a { display: block; padding: 6px 10px; border-radius: var(--r-sm); font-size: 14px; line-height: 1.4; color: var(--ink-2); transition: background-color .2s, color .2s; }
.toc li a:hover { background: var(--surface-2); color: var(--navy); }
.toc li a.is-current { background: var(--navy-50); color: var(--navy); font-weight: 600; }
.toc--mobile { display: none; margin-bottom: 24px; }
.toc--mobile summary { cursor: pointer; margin: 0; padding: 12px 0; }
.toc--mobile[open] summary { margin-bottom: 10px; }
@media (max-width: 991px) { .article { grid-template-columns: minmax(0, 1fr); gap: 32px; } .article__side { position: static; } .article__side .toc { display: none; } .toc--mobile { display: block; } }
.article__cycle { max-width: 72ch; }

/* статья без оглавления (тело переносится): одна колонка по центру */
@media (min-width: 992px) { .article--single { grid-template-columns: minmax(0, 720px) 280px; } }
@media (max-width: 599px) { .article__cta { flex-direction: column; align-items: stretch; } .article__cta .btn { width: 100%; } }

/* Контакты: адрес и график */
.contacts-addr { padding-top: 18px; border-top: 1px solid var(--line); }
.contacts-addr__v { display: flex; align-items: flex-start; gap: 8px; margin-top: 4px; font-size: 18px; font-weight: 700; color: var(--navy-900); }
.contacts-addr__v .ico { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--orange-text); }
.contacts-hours { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin-top: 6px; font-size: 15px; }
.contacts-hours dt { color: var(--muted); }
.contacts-hours dd { margin: 0; font-weight: 600; color: var(--ink); }
.contacts-addr .arrow-link { display: inline-flex; margin-top: 12px; }


/* ===== legacy ===== */
/* Текст страниц со старого сайта (тема: inc/pages.php → cir_rich_html; прототип: cir-site/legacy/*.html → _data/legacyText.js).
   .cir-post-content — статьи и простой текст (раньше стили были в «Дополнительном CSS» Hello Elementor, запись 2453);
   .legacy-block — оформленные HTML-блоки со своими <style> (цвета и шрифт подменяются на фирменные при выводе). */
.legacy, .seo-text.legacy { max-width: 1180px; margin-left: auto; margin-right: auto; }
.legacy-block { margin: 0 0 40px; }
.legacy-block img, .cir-post-content img { max-width: 100%; height: auto; border-radius: var(--r-lg); }
.legacy-block, .legacy-block * { font-family: var(--font) !important; }
/* кнопки старых блоков на оранжевом: белый текст не проходит AA — тёмно-синий (§15) */

.cir-post-content { max-width: 820px; margin: 0 auto 40px; color: var(--ink); font-size: 17px; line-height: 1.7; }
.cir-post-content > * + * { margin-top: 0; }
.cir-post-content p { margin: 0 0 18px; }
.cir-post-content h2, .cir-post-content h3, .cir-post-content h4 { color: var(--navy-900); line-height: 1.25; letter-spacing: -.01em; font-weight: 800; }
.cir-post-content h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 44px 0 14px; scroll-margin-top: 90px; }
.cir-post-content h3 { font-size: 20px; font-weight: 700; margin: 30px 0 10px; }
.cir-post-content h4 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
.cir-post-content > :first-child { margin-top: 0; }
.cir-post-content strong, .cir-post-content b { font-weight: 700; color: var(--navy-900); }
.cir-post-content a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(31, 55, 99, .35); text-underline-offset: 3px; }
.cir-post-content a:hover { color: var(--orange-text); }
.cir-post-content ul, .cir-post-content ol { margin: 0 0 20px; padding-left: 0; list-style: none; }
.cir-post-content li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.cir-post-content ul > li::before { content: ""; position: absolute; left: 7px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.cir-post-content ol { counter-reset: li; }
.cir-post-content ol > li { counter-increment: li; }
.cir-post-content ol > li::before { content: counter(li); position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--navy-50); color: var(--navy); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.cir-post-content figure { margin: 28px 0; }
.cir-post-content figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); text-align: center; }
.cir-post-content blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--orange); font-size: 19px; }

.cir-post-content table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; margin: 24px 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.cir-post-content th, .cir-post-content td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cir-post-content th, .cir-post-content thead td { background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; }
.cir-post-content tbody tr:nth-child(even) td { background: var(--surface-2); }
.cir-post-content tbody tr:last-child td { border-bottom: 0; }
.cir-post-content td:first-child { font-weight: 600; color: var(--navy-900); }
.cir-post-content .cir-table-wrap, .cir-post-content .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 24px 0; }
.cir-post-content .cir-table-wrap table, .cir-post-content .wp-block-table table { min-width: 560px; margin: 0; }
.cir-post-content .win { color: var(--ok); font-weight: 700; }

.cir-post-content .cir-note { background: var(--orange-50); border-left: 4px solid var(--orange); border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: 18px 22px; margin: 26px 0; font-size: 16px; }
.cir-post-content .cir-note p:last-child, .cir-post-content .cir-key p:last-child, .cir-post-content .cir-mistake p:last-child { margin-bottom: 0; }
.cir-post-content .cir-note-title { display: block; font-weight: 800; color: var(--navy-900); margin-bottom: 6px; }
.cir-post-content .cir-key { border: 2px solid var(--navy); border-radius: var(--r-lg); padding: 22px 24px; margin: 28px 0; font-size: 18px; background: var(--navy-50); }
.cir-post-content .cir-mistake { border-left: 3px solid var(--orange); padding: 2px 0 2px 20px; margin: 24px 0; }
.cir-post-content .cir-mistake h3 { margin: 0 0 8px; }
.cir-post-content .cir-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 28px 0; }
.cir-post-content .cir-card { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 20px 8px; background: #fff; }
.cir-post-content .cir-card--accent { border-color: var(--orange); background: var(--orange-50); }
.cir-post-content .cir-card h3 { margin: 0 0 10px; font-size: 18px; }
.cir-post-content .cir-card ul { font-size: 15px; }
.cir-post-content .cir-tag { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: var(--navy); color: #fff; margin-bottom: 10px; }
.cir-post-content .cir-tag--grey { background: var(--muted-2); }
.cir-post-content .cir-calc { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; margin: 28px 0; }
.cir-post-content .cir-calc h3 { margin: 0 0 12px; }
.cir-post-content .cir-calc-row { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-bottom: 1px dashed var(--line-2); font-size: 16px; }
.cir-post-content .cir-calc-total { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 2px solid var(--navy-900); font-size: 18px; font-weight: 800; color: var(--navy-900); }
.cir-post-content .cir-calc-total span:last-child { color: var(--orange-text); font-size: 22px; white-space: nowrap; }
.cir-post-content .cir-faq { border-top: 1px solid var(--line); margin: 16px 0 28px; }
.cir-post-content .cir-faq details { border-bottom: 1px solid var(--line); }
.cir-post-content .cir-faq summary { cursor: pointer; padding: 16px 34px 16px 0; font-weight: 700; font-size: 17px; color: var(--navy-900); list-style: none; position: relative; }
.cir-post-content .cir-faq summary::-webkit-details-marker { display: none; }
.cir-post-content .cir-faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--orange); }
.cir-post-content .cir-faq details[open] summary::after { content: "–"; }
.cir-post-content .cir-faq .cir-faq-body { padding: 0 0 16px; color: var(--ink-2); font-size: 16px; }

@media (max-width: 767px) {
  .cir-post-content { font-size: 16px; }
  .cir-post-content .cir-calc { padding: 20px 18px; }
  .cir-post-content .cir-calc-row { flex-direction: column; gap: 2px; }
  .legacy-block { margin-bottom: 28px; }
}

/* колонки Elementor → сетка карточек */
.legacy-grid { display: grid; gap: 16px; margin: 0 auto 32px; max-width: 1180px; }
.legacy-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.legacy-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.legacy-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.legacy-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; min-width: 0; }
.legacy-card .cir-post-content { max-width: none; margin: 0; font-size: 15px; }
.legacy-card .cir-post-content h2, .legacy-card .cir-post-content h3, .legacy-card .cir-post-content h4 { font-size: 18px; margin: 12px 0 6px; }
.legacy-card figure { margin: 0 0 12px; }
.legacy-card figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.legacy-card .legacy-grid { margin: 0; gap: 8px; }
.legacy-card .legacy-card { border: 0; padding: 0; }
.legacy-lead { font-size: 19px; line-height: 1.55; color: var(--navy-900); font-weight: 600; }
@media (max-width: 1023px) { .legacy-grid--3, .legacy-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .legacy-grid--2, .legacy-grid--3, .legacy-grid--4 { grid-template-columns: 1fr; } }
.legacy-card--media { display: flex; flex-direction: column; margin-bottom: 16px; }
.legacy-grid .legacy-card--media { margin-bottom: 0; }
.legacy-card--media > figure { margin: -18px -18px 14px; }
.legacy-card--media > figure img { border-radius: var(--r-lg) var(--r-lg) 0 0; aspect-ratio: 16 / 10; }

/* вместо отзывов старых страниц — рейтинг Яндекс Карт */
.legacy-reviews { max-width: 820px; margin: 0 auto 40px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.legacy-reviews__score { margin: 0; font-size: 17px; color: var(--navy-900); font-weight: 600; }
.legacy-reviews__score .num { font-size: 32px; font-weight: 800; color: var(--orange-text); margin-right: 6px; }
.legacy-reviews__note { margin: 0; flex: 1 1 100%; color: var(--muted); font-size: 15px; order: 2; }
.legacy-reviews .btn { order: 1; margin-left: auto; }
@media (max-width: 599px) { .legacy-reviews .btn { margin-left: 0; width: 100%; } }

/* живые блоки старого сайта: плавающая «Обратная связь» калькулятора отопления не нужна — у темы свои кнопки связи */
#cirhcFabBtn, #cirhcFabPanel { display: none !important; }
.legacy-live-ok { margin: 0; padding: 16px 18px; border-radius: var(--r); background: var(--ok-bg); color: var(--ok); }

/* калькуляторы старого сайта: кнопки на оранжевом — тёмный текст (§15) */
.rg-el-calc__btn { color: var(--navy-900) !important; }

/* калькулятор тёплого пола (стили жили в другом месте старой страницы) */
#tp-calc { max-width: 980px; margin: 0 auto; padding: 28px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xl); }
#tp-calc h2 { margin: 0 0 8px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; color: var(--navy-900); }
#tp-calc > p { margin: 0 0 20px; color: var(--muted); }
#tp-calc .tp-calc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
#tp-calc .tp-field label { display: block; font-size: 14px; font-weight: 700; color: var(--navy-900); margin-bottom: 6px; }
#tp-calc .tp-field input, #tp-calc .tp-field select, #calc-brizer select { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-2) !important; border-radius: var(--r) !important; background: #fff; font: inherit; font-size: 16px; color: var(--ink); }
#tp-calc .tp-calc-actions, #calc-brizer .brx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 18px; }
#tp-calc .tp-btn, #calc-brizer .brx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border-radius: var(--r); font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1px solid var(--line-2); background: #fff; color: var(--navy-900); }
#tp-calc .tp-btn-primary, #calc-brizer .brx-btn-primary { background: var(--orange) !important; border-color: var(--orange) !important; color: var(--navy-900) !important; }
#tp-calc .tp-btn-primary:hover, #calc-brizer .brx-btn-primary:hover { background: var(--orange-600) !important; }
#calc-brizer select { height: auto; min-height: 48px; line-height: 1.3; }
#tp-calc .tp-calc-result { padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
#tp-calc .tp-calc-price { font-size: 28px; font-weight: 800; color: var(--orange-text); margin-bottom: 6px; }
#tp-calc .tp-calc-desc { color: var(--navy-900); font-weight: 600; margin-bottom: 6px; }
#tp-calc .tp-calc-mini { font-size: 14px; color: var(--muted); }

/* подбор бризера */
#calc-brizer { max-width: 980px; margin: 0 auto; }
#calc-brizer .brx-card { padding: 28px; border-radius: var(--r-xl); }
#calc-brizer .brx-h2 { margin: 0 0 8px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; color: var(--navy-900); }
#calc-brizer .brx-lead { margin: 0 0 20px; color: var(--muted); }
#calc-brizer .brx-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
#calc-brizer label { font-size: 14px; color: var(--navy-900); }
#brizerResult .brx-card { background: #fff; border: 1px solid var(--line); padding: 20px; }
@media (max-width: 767px) {
  #tp-calc, #calc-brizer .brx-card { padding: 20px 16px; }
  #tp-calc .tp-calc-grid, #calc-brizer .brx-grid-3 { grid-template-columns: 1fr; }
  #tp-calc .tp-btn, #calc-brizer .brx-btn { width: 100%; }
}

/* шрифт и контраст для блоков старых страниц со своими стилями (системные шрифты, Inter) */
.legacy, .legacy * { font-family: var(--font) !important; }

/* ===== Инженерная подача текста страниц (eng-*): «Кратко», карточки, шаги, таблицы, города, FAQ.
   Разметку даёт migration/scripts/eng_blocks.py из обычного текста legacy/<slug>.html. ===== */
.cir-post-content .eng-sec { margin: 0 0 48px; }
.cir-post-content .eng-sec > h2 { font-size: var(--fs-h2); line-height: 1.2; margin: 0 0 18px; }
.cir-post-content .eng-sec > p { max-width: none; color: var(--ink-2); }
.cir-post-content.eng-page { max-width: none; }
/* страницы услуг: текст страницы на всю ширину сайта, как блоки темы (решение владельца 04.10) */
.seo-text.legacy { max-width: none; }
.eng-brief { position: relative; margin: 0 0 44px; padding: 28px 30px 28px 102px; border-radius: var(--r-xl); background: var(--navy-900); color: #fff; box-shadow: var(--shadow-2); }
.eng-brief::before { content: "i"; position: absolute; left: 30px; top: 28px; width: 52px; height: 52px; border-radius: 14px; background: var(--orange); color: var(--navy-900); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; font-style: italic; }
.eng-brief__ico { display: none; }
.cir-post-content .eng-brief .eng-brief__label { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.cir-post-content .eng-brief p { margin: 0; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.92); max-width: 90ch; }
.cir-post-content .eng-brief p strong { color: #fff; }
.cir-post-content .eng-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
.cir-post-content .eng-cta a { text-decoration: none; }
.cir-post-content .eng-brief .eng-cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.cir-post-content .eng-brief .eng-cta .btn--ghost:hover { border-color: #fff; }
.cir-post-content .eng-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin: 0 0 48px; padding: 24px 28px; border-radius: var(--r-xl); background: var(--orange-50); border: 1px solid rgba(244,122,32,.35); }
.cir-post-content .eng-band__t { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--navy-900); }
.cir-post-content .eng-band__d { margin: 0; font-size: 15px; color: var(--ink-2); max-width: 60ch; }
.cir-post-content .eng-band .eng-cta { margin: 0; }
.eng-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 6px 0 0; padding: 0; list-style: none; }
.eng-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.eng-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.eng-card__n { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--navy-50); color: var(--navy); font-size: 14px; font-weight: 800; }
.cir-post-content .eng-card h3 { margin: 4px 0 0; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--navy-900); }
.cir-post-content .eng-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.cir-post-content .eng-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin: 6px 0 0; padding: 0; list-style: none; }
.cir-post-content .eng-checks li { position: relative; padding: 12px 14px 12px 44px; background: var(--navy-50); border-radius: var(--r); font-size: 15px; line-height: 1.5; color: var(--ink); }
.cir-post-content .eng-checks li::before { content: ""; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315274A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cir-post-content .eng-steps { counter-reset: eng; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.cir-post-content .eng-steps li { counter-increment: eng; position: relative; padding: 58px 18px 18px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: var(--r-lg); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.cir-post-content .eng-steps li::before { content: counter(eng, decimal-leading-zero); position: absolute; left: 18px; top: 16px; font-size: 26px; font-weight: 800; line-height: 1; color: var(--navy); }
.cir-post-content .eng-steps li strong { display: block; color: var(--navy-900); }
.cir-post-content .eng-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.cir-post-content .eng-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.cir-post-content .eng-table caption { caption-side: top; text-align: left; padding: 14px 18px 10px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cir-post-content .eng-table th { background: var(--navy-900); color: #fff; font-weight: 600; text-align: left; padding: 12px 18px; }
.cir-post-content .eng-table td { padding: 12px 18px; border-top: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.cir-post-content .eng-table tr:nth-child(even) td { background: var(--navy-50); }
.cir-post-content .eng-table td:first-child { font-weight: 600; color: var(--navy-900); }
.cir-post-content .eng-table--price td:last-child { font-weight: 800; color: var(--navy-900); white-space: nowrap; }
.cir-post-content .eng-geo { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.cir-post-content .eng-geo li { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 10px 10px; border-radius: 100px; background: #fff; border: 1px solid var(--line); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--navy-900); text-align: center; white-space: nowrap; }
.cir-post-content .eng-geo li::before { content: ""; position: static; flex: none; width: 8px; height: 8px; margin: 0; border-radius: 50%; background: var(--orange); transform: none; }
.cir-post-content .eng-note { margin: 14px 0 0; padding: 14px 18px; border-left: 3px solid var(--orange); background: var(--orange-50); border-radius: 0 var(--r) var(--r) 0; color: var(--ink-2); max-width: none; }
.cir-post-content .eng-faq { margin-top: 6px; }
.cir-post-content .eng-faq .faq__a p { margin: 0; }
@media (max-width: 767px) {
  .eng-brief { padding: 76px 20px 22px; }
  .eng-brief::before { left: 20px; top: 20px; width: 42px; height: 42px; font-size: 20px; }
  .cir-post-content .eng-cta a { flex: 1 1 100%; text-align: center; justify-content: center; }
  .cir-post-content .eng-band { padding: 20px; }
  .cir-post-content .eng-checks { grid-template-columns: 1fr; }
  .cir-post-content .eng-sec { margin-bottom: 36px; }
}
.cir-post-content .eng-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.cir-post-content .eng-panel > p { margin: 0; padding: 20px 22px; background: var(--navy-50); border-radius: var(--r-lg); border-left: 3px solid var(--navy); color: var(--ink-2); line-height: 1.6; max-width: none; }
.cir-post-content .eng-panel > p:first-child { border-left-color: var(--orange); }
@media (max-width: 1399px) { .cir-post-content .eng-geo { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 767px) { .cir-post-content .eng-geo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cir-post-content .eng-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: -24px 0 48px; }
@media (max-width: 899px) { .cir-post-content .eng-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cir-post-content .eng-fact { padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); border-top: 3px solid var(--orange); }
.cir-post-content .eng-fact__v { margin: 0 0 4px; font-size: 24px; line-height: 1.15; font-weight: 800; color: var(--navy-900); }
.cir-post-content .eng-fact__l { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.cir-post-content .eng-card .eng-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.cir-post-content .eng-card .eng-list li { position: relative; margin: 0; padding: 0 0 0 22px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.cir-post-content .eng-card .eng-list li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
.cir-post-content .eng-card__price { margin: 2px 0 0; font-size: 22px; font-weight: 800; color: var(--navy-900); }
.cir-post-content .eng-card__tag { align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: 100px; background: var(--orange); color: var(--navy-900); font-size: 12px; font-weight: 700; }
.cir-post-content .eng-sub { margin: 28px 0 12px; font-size: 20px; }
.cir-post-content .eng-fig { margin: 16px 0 0; }
.cir-post-content .eng-fig img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--r-lg); }
.cir-post-content .eng-fig figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.cir-post-content .eng-brief a:not(.btn) { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

/* блоки ровно на всю ширину: число колонок по числу карточек */
@media (min-width: 1024px) {
  .cir-post-content .eng-cards:has(> :nth-child(3):last-child),
  .cir-post-content .eng-cards:has(> :nth-child(5):last-child),
  .cir-post-content .eng-cards:has(> :nth-child(6):last-child),
  .cir-post-content .eng-cards:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cir-post-content .eng-cards:has(> :nth-child(4):last-child),
  .cir-post-content .eng-cards:has(> :nth-child(7):last-child),
  .cir-post-content .eng-cards:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cir-post-content .eng-cards:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 5 и 7 карточек — без дыр в последнем ряду; факты по их числу */
.cir-post-content .eng-card > p:empty { display: none; }
@media (min-width: 1024px) {
  .cir-post-content .eng-cards:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cir-post-content .eng-cards:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .cir-post-content .eng-cards:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }
  .cir-post-content .eng-cards:has(> :nth-child(7):last-child) { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cir-post-content .eng-cards:has(> :nth-child(7):last-child) > * { grid-column: span 3; }
  .cir-post-content .eng-cards:has(> :nth-child(7):last-child) > :nth-child(n+5) { grid-column: span 4; }
  .cir-post-content .eng-facts:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cir-post-content .eng-facts:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cir-post-content .eng-facts:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cir-post-content .eng-facts--in { margin: 18px 0 22px; }


/* ===== lead-form ===== */
.leadf { display: grid; gap: 14px; margin-top: 20px; } /* форма заявки; раньше .lead — конфликтовал с вводным абзацем .lead */
.field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); font-size: 15px; transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 88px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31, 55, 99, .12); }
.field__err { display: none; margin-top: 6px; font-size: 12px; color: var(--err); }
.field.is-error input { border-color: var(--err); box-shadow: 0 0 0 3px rgba(180, 35, 24, .1); }
.field.is-error .field__err { display: block; }
.check, .field .check { display: flex; margin-bottom: 0; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); cursor: pointer; line-height: 1.45; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); flex: none; }
.check.is-error span, .field--check.is-error .check span { color: var(--err); }
.leadf__note { font-size: 12px; color: var(--muted); text-align: center; }
.lead-ok { text-align: center; padding: 24px 0 4px; }
.lead-ok > svg { width: 52px; height: 52px; margin: 0 auto 12px; padding: 13px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.lead-ok b { display: block; font-size: 18px; margin-bottom: 6px; }
.lead-ok p { font-size: 14px; color: var(--muted); }

/* блок «форма + контакты» на страницах */
/* финальный блок страницы — единственная тёмная поверхность (DESIGN-REF-BARRIER §3.15): navy-900, форма на белой карточке */
.cta-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; padding: 44px; border-radius: var(--r-xl); background: var(--navy-900); color: #fff; }
.cta-band .h2 { color: #fff; }
.cta-band .lead { color: rgba(255, 255, 255, .8); }
.cta-band__list svg { color: var(--orange); }
.cta-band__tel { color: #fff; }
.cta-band > div:last-child { padding: 24px; background: var(--surface); border-radius: var(--r-lg); color: var(--ink); }
.cta-band__text .h2 { margin-bottom: 12px; }
.cta-band__list { margin-top: 18px; display: grid; gap: 10px; }
.cta-band__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.cta-band__list svg { width: 18px; height: 18px; color: var(--orange); flex: none; margin-top: 2px; }
.cta-band__contacts { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cta-band__tel { font-size: 22px; font-weight: 700; margin-right: 8px; }
.cta-band .lead, .cta-band .leadf { margin-top: 0; }
@media (max-width: 991px) { .cta-band { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px; } .cta-band > div:last-child { padding: 18px; } }
.home-seo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.home-seo .prose h2 { margin-top: 0; }
@media (max-width: 991px) { .home-seo { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* ловушка для ботов и ошибка отправки */
.leadf .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.leadf__err { margin: 0; padding: 10px 12px; border-radius: var(--r); background: rgba(180, 35, 24, .08); color: var(--err); font-size: 14px; }
/* после отправки: что дальше и действия; «Готово» (закрыть окно) — только в модалке */
.lead-ok__next { counter-reset: n; display: grid; gap: 8px; max-width: 360px; margin: 14px auto 16px; padding: 0; text-align: left; list-style: none; font-size: 14px; color: var(--ink-2); }
.lead-ok__next li { counter-increment: n; position: relative; padding-left: 30px; }
.lead-ok__next li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--navy-50); color: var(--navy); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.lead-ok__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lead-ok [data-lead-close] { display: none; }
.modal .lead-ok [data-lead-close] { display: inline-flex; }
.lead-ok__more { display: inline-flex; margin-top: 14px; font-size: 14px; }


/* ===== quiz ===== */
.quiz { margin-top: 18px; }
.quiz__progress { height: 4px; border-radius: 2px; background: var(--bg); overflow: hidden; }
.quiz__progress span { display: block; height: 100%; width: 100%; background: var(--orange); transform-origin: left; transform: scaleX(.25); transition: transform .35s var(--ease); }
.quiz__count { margin: 10px 0 14px; }
.quiz__step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz__step.is-active { display: block; animation: stepIn .3s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.quiz__step legend { padding: 0; margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.quiz__step .lead { margin-top: 0; }
.quiz__opts { display: grid; gap: 8px; }
.opt { display: block; cursor: pointer; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: var(--r); font-size: 15px; transition: border-color .15s, background-color .15s; }
.opt span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; transition: border .15s; }
.opt:hover span { border-color: var(--navy); }
.opt input:checked + span { border-color: var(--navy); background: var(--navy-50); color: var(--navy); font-weight: 600; }
.opt input:checked + span::before { border: 5px solid var(--navy); }
.opt input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.quiz__nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.quiz__nav .btn { min-width: 110px; }

.qlaunch { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; min-height: 220px; padding: 28px; text-align: left; border-radius: var(--r-lg); background: var(--navy-900); color: #fff; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; }
.qlaunch--warm { background: var(--navy); }
.qlaunch__ico { position: absolute; right: -18px; bottom: -22px; width: 170px; height: 170px; color: rgba(255, 255, 255, .08); transition: transform .5s var(--ease); }
.qlaunch__title { position: relative; font-size: 24px; font-weight: 700; line-height: 1.2; max-width: 16ch; }
.qlaunch__text { position: relative; font-size: 14px; color: rgba(255, 255, 255, .72); max-width: 36ch; }
.qlaunch__go { position: relative; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r); background: var(--orange); color: var(--navy-900); font-size: 14px; font-weight: 600; }
.qlaunch__go svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.qlaunch:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); }
.qlaunch:hover .qlaunch__ico { transform: rotate(-6deg) scale(1.06); }
.qlaunch:hover .qlaunch__go svg { transform: translateX(3px); }

.quiz__ctx { margin-top: 10px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--navy-50); color: var(--navy); font-weight: 600; }
.quiz__opts--grid, .quiz__step:has(.opt:nth-child(6)) .quiz__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 599px) { .quiz__step:has(.opt:nth-child(6)) .quiz__opts { grid-template-columns: minmax(0, 1fr); } }

/* после отправки заявки — только подтверждение: без шага, прогресса и вопроса */
.quiz.is-done .quiz__progress, .quiz.is-done .quiz__count, .quiz.is-done .quiz__ctx, .quiz.is-done .quiz__step > legend { display: none; }


/* ===== modal ===== */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 20px; background: rgba(21, 39, 74, .5); overflow-y: auto; animation: fadeIn .2s ease; }
.modal__box { position: relative; width: 100%; max-width: 460px; background: var(--surface); border-radius: var(--r-lg); padding: 36px; box-shadow: var(--shadow-3); animation: popIn .3s var(--ease); }
.modal__close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: var(--r); display: grid; place-items: center; color: var(--muted); transition: background-color .2s, color .2s; }
.modal__close:hover { background: var(--surface-2); color: var(--navy); }
.modal__close svg { width: 14px; height: 14px; }
.modal__title { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--navy-900); padding-right: 32px; }
.modal__sub { margin-top: 6px; color: var(--muted); font-size: 14px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast); display: flex; align-items: center; gap: 14px; max-width: calc(100% - 24px);
  padding: 12px 14px 12px 18px; border-radius: var(--r); background: var(--navy-900); color: #fff; font-size: 14px; box-shadow: var(--shadow-3);
  transform: translate(-50%, 16px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.toast.is-shown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast a { flex: none; padding: 6px 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .12); font-weight: 600; }
.toast a:hover { background: rgba(255, 255, 255, .2); }
.to-top {
  position: fixed; right: 20px; bottom: 24px; z-index: var(--z-sticky); width: 46px; height: 46px; border-radius: var(--r);
  background: var(--surface); color: var(--navy); border: 1px solid var(--line); box-shadow: var(--shadow-2); display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s var(--ease), visibility .2s, background-color .2s, color .2s;
}
.to-top svg { width: 18px; height: 18px; }
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--navy); color: #fff; }
@media (max-width: 599px) { .modal { padding: 12px; align-items: end; } .modal__box { padding: 28px 20px; } }

/* на странице товара «наверх» не должна перекрывать нижнюю панель покупки */
body:has(.pbar.is-shown) .to-top { bottom: 88px; transition: opacity .25s, visibility .25s, transform .25s, bottom .3s var(--ease); }
@media (max-width: 767px) { body:has(.pbar.is-shown) .to-top { bottom: 80px; } }


/* ===== my-calculation ===== */
.calc-btn { display: flex; align-items: center; gap: 10px; flex: none; }
.calc-btn__ico { position: relative; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r); background: var(--navy-50); color: var(--navy); transition: background-color .2s; }
.calc-btn__ico > svg { width: 22px; height: 22px; }
.calc-btn:hover .calc-btn__ico { background: var(--navy-100); }
.calc-btn__count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--muted-2); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; transition: background-color .2s, transform .25s var(--ease);
}
.calc-btn__count.has-items { background: var(--orange); color: var(--navy-900); }
.calc-btn__count.bump { transform: scale(1.3); }
.calc-btn__txt { display: flex; flex-direction: column; line-height: 1.25; }
.calc-btn__txt b { font-size: 14px; font-weight: 600; }
.calc-btn__txt small { font-size: 12px; color: var(--muted); }
.calc-btn--topbar .calc-btn__ico { width: 36px; height: 36px; background: transparent; color: #fff; }
.calc-btn--topbar:hover .calc-btn__ico { background: rgba(255, 255, 255, .1); }
.calc-btn--sticky .calc-btn__txt small { display: none; }

.calc-add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background-color .2s, color .2s, border-color .2s, transform .15s; }
.calc-add svg { width: 16px; height: 16px; }
.calc-add__check { display: none; }
.calc-add[aria-pressed=true] .calc-add__plus { display: none; }
.calc-add[aria-pressed=true] .calc-add__check { display: block; }
.calc-add:active { transform: scale(.96); }
.calc-add--round { width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: var(--navy-900); flex: none; }
.calc-add--round:hover { background: var(--orange-600); }
.calc-add--round[aria-pressed=true] { background: var(--ok); color: #fff; }
.calc-add--wide { min-height: 48px; padding: 0 20px; border-radius: var(--r); background: var(--orange); color: var(--navy-900); font-size: 15px; font-weight: 600; }
.calc-add--wide:hover { background: var(--orange-600); }
.calc-add--wide[aria-pressed=true] { background: var(--ok-bg); color: var(--ok); }
.calc-add--ghost { min-height: 40px; padding: 0 14px; border-radius: var(--r); border: 1.5px solid var(--navy); background: transparent; color: var(--navy); font-size: 14px; font-weight: 600; }
.calc-add--ghost:hover { background: var(--navy-50); }
.calc-add--ghost[aria-pressed=true] { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }

/* страница «Мой расчёт» */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 30px; align-items: start; }
/* список расчёта без панели: строки hairline, итог — карточка navy-50 (DESIGN-REF-BARRIER §3.14) */
.calc__list { border-top: 1px solid var(--line); }
.calc__row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto 40px; gap: 16px; align-items: center; padding: 16px 4px; border-bottom: 1px solid var(--line); }
.calc__row:first-child { border-top: 0; }
.calc__sum-wrap.calc__list { border-top: 0; }
.calc__img { width: 72px; height: 72px; border-radius: var(--r); background: var(--surface-2); display: grid; place-items: center; overflow: hidden; color: var(--navy); }
.calc__img img { width: 100%; height: 100%; object-fit: contain; }
.calc__img svg { width: 34px; height: 34px; }
.calc__name { font-weight: 500; line-height: 1.4; }
.calc__name a:hover { color: var(--navy); }
.calc__type { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.calc__qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r); }
.calc__qty button { width: 34px; height: 36px; display: grid; place-items: center; color: var(--navy); }
.calc__qty button svg { width: 12px; height: 12px; }
.calc__qty button:hover { background: var(--surface-2); }
.calc__qty output { min-width: 28px; text-align: center; font-weight: 600; }
.calc__price { min-width: 110px; text-align: right; font-weight: 700; white-space: nowrap; }
.calc__price small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.calc__rm { color: var(--muted-2); width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--r); }
.calc__rm:hover { color: var(--err); background: var(--err-bg); }
.calc__rm svg { width: 18px; height: 18px; }
.calc__sum { padding: 22px 26px; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; background: var(--navy-50); border-radius: var(--r-lg); }
.calc__sum b { font-size: 32px; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; }
.calc__side { position: sticky; top: 90px; }
@media (max-width: 991px) { .calc { grid-template-columns: minmax(0, 1fr); } .calc__side { position: static; } }
@media (max-width: 599px) {
  .calc__row { grid-template-columns: 56px minmax(0, 1fr) auto 36px; grid-template-areas: "img name name rm" "img qty price price"; gap: 8px 12px; padding: 14px; }
  .calc__img { grid-area: img; width: 56px; height: 56px; }
  .calc__main { grid-area: name; }
  .calc__qty { grid-area: qty; justify-self: start; }
  .calc__price { grid-area: price; min-width: 0; align-self: center; }
  .calc__rm { grid-area: rm; }
}
.calc__sum-wrap { margin-top: 12px; }
.calc__sum-wrap .calc__sum { border-top: 0; }
@media (max-width: 991px), (pointer: coarse) { .calc__qty button { width: 44px; height: 44px; } .calc__rm { width: 44px; height: 44px; } }

/* вариант «Моя система» */
.sysg { padding: 0; }
.sysg + .sysg { margin-top: 28px; }
.sysg__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 0 0 12px; border-bottom: 1px solid var(--line-2); }
.sysg__head h2 { font-size: 20px; font-weight: 700; color: var(--navy-900); }
.sysg__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 44px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sysg__name a:hover { color: var(--navy); }
.sysg__price { font-weight: 700; white-space: nowrap; }
.sysg__empty { padding: 12px 0 0; color: var(--muted); font-size: 14px; }


/* ===== empty-state ===== */
.empty { display: grid; justify-items: center; gap: 10px; padding: 48px 24px; text-align: center; background: var(--surface); border: 1px dashed var(--line-2); border-radius: var(--r-lg); }
.empty__ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-50); color: var(--navy); }
.empty__ico svg { width: 24px; height: 24px; }
.empty__title { font-size: 18px; font-weight: 700; color: var(--navy-900); }
.empty__text { color: var(--muted); max-width: 48ch; }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }


/* ===== benefits ===== */
.benefits { background: var(--surface); border-top: 1px solid var(--line); padding: 44px 0; }
.benefits__inner { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.benefits__el { display: flex; gap: 18px; }
.benefits__el > svg { width: 36px; height: 36px; flex: none; color: var(--navy); }
.benefits__el b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.benefits__el p { font-size: 14px; color: var(--muted); max-width: 44ch; }
@media (max-width: 991px) { .benefits__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; } }


/* ===== footer ===== */
/* Футер: тёмно-синий фирменный #15274A вместо #000 референса (redesign: без чистого чёрного) */
.footer { background: var(--navy-900); color: rgba(255, 255, 255, .78); font-size: 14px; padding-bottom: 36px; }
.footer a { transition: color .2s; }
.footer a:hover { color: #fff; }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; padding: 40px 0 32px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer__logo img { width: 190px; }
.footer__contact { display: flex; flex-direction: column; gap: 2px; }
.footer__label { font-size: 12px; color: rgba(255, 255, 255, .5); }
.footer__tel { font-size: 18px; font-weight: 700; color: #fff; }
.footer__sub { font-size: 12px; color: rgba(255, 255, 255, .5); }
.footer__cta { margin-left: auto; }
.footer__cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 30px; padding: 32px 0; }
.footer__title { display: block; margin-bottom: 16px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; cursor: default; text-align: left; }
.footer__col li { margin-bottom: 9px; }
.footer__bottom { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); display: grid; gap: 6px; font-size: 12px; color: rgba(255, 255, 255, .5); }
@media (max-width: 991px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__cta { margin-left: 0; } }
@media (max-width: 599px) {
  .footer__top { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer__cols { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12px 0 20px; }
  .footer__title { width: 100%; margin: 0; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); cursor: pointer; position: relative; }
  .footer__title::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 20px; font-weight: 400; color: var(--orange); transition: transform .25s var(--ease); }
  .footer__title[aria-expanded=true]::after { transform: rotate(45deg); }
  .footer__col ul { display: none; padding: 12px 0 6px; }
  .footer__col.is-open ul { display: block; }
}
@media (max-width: 991px), (pointer: coarse) {
  .footer__col li a, .footer__contact a { display: inline-flex; align-items: center; min-height: 36px; }
  .footer__tel { min-height: 44px; }
}


/* ===== reveal ===== */
/* Появление секций при прокрутке (IntersectionObserver), только transform/opacity */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }