/* ============================================================
   COXO B2B — дизайн-система по брендбуку СОХО (COXO_guideline_2025-07)
   Голубой #1C9DFF · фуксия #E2007D · апельсин #E96227 · белый #FEFEFE
   Рабочая тема — «Бсветл» (01.09.2026).
   ============================================================ */
:root {
  /* Брендовые оттенки, доведённые до контраста AA затемнением светлоты:
     для текста и мелкого интерактива — тёмные пары, фирменный оттенок
     остаётся в заливках, кнопках и крупной графике (*-bright). */
  --blue: #0F6FC0;            /* бренд-голубой для текста — 5,2:1 на белом */
  --blue-bright: #1C9DFF;     /* брендбук — заливки, кнопки, крупная графика */
  --blue-hover: #0B5FA6;      /* 6,4:1 — hover названий товаров */
  --pink: #E2007D;            /* бренд-фуксия — 4,63:1, точки и метки */
  --orange: #B04A10;          /* бренд-апельсин для текста — 5,4:1 на белом */
  --orange-bright: #E96227;   /* брендбук — рамки, иконки, декор без текста */
  --orange2: #C24E0F;         /* CTA-кнопки: белый текст 4,75:1 */
  --orange-hover: #9E3F0B;    /* 6,0:1 */
  --ink: #112A46;             /* названия товаров, тёмный текст */
  --ink-old: rgba(17,42,70,.5); /* старая цена */
  --title: #424242;           /* заголовки блоков */
  --dark: #2B2B2B;            /* тёмные панели */
  --deep: #0d1220;            /* тёмный hero / CTA-полоса (не чёрный) */
  --deep2: #131b30;           /* второй тон тёмных секций */
  --muted: #888;
  --muted2: #999;
  --line: #E7E8EA;
  --bg: #FFFFFF;              /* фон страницы — белый («Бсветл») */
  --headbar: #F2F7FC;         /* вторая строка шапки */
  --footerbg: #F9F9F9;
  --badge-blue: #494BFF;      /* маркетинговый бейдж «СТМ» */
  --badge-orange: #B45E0F;    /* бейдж «Под заказ»: белый текст 4,62:1 (был #F58634 — 2,52:1) */
  --badge-orange-bright: #F58634;  /* исходный оттенок — декор без текста */
  --ok: #1e9e4a;              /* заливки и рамки «успех» — не для текста */
  --warn: #d97706;
  --bad: #dc2626;             /* заливки и рамки «ошибка» — не для текста */
  /* Текстовые варианты статусных цветов: те же оттенки, затемнённые до AA (≥4,5:1
     на белом и на своих светлых подложках). См. волна 2, находка Ф-8. */
  --ok-text: #0f7a38;         /* 5,44:1 на #fff · 4,87:1 на #e7f6ec */
  --warn-text: #9a5b00;       /* 5,43:1 на #fff */
  --bad-text: #b91c1c;        /* 6,47:1 на #fff · 5,66:1 на #fdecec */
  --tr: .2s ease-in-out;
  --shadow-card: 2px 4px 4px rgba(0,0,0,.25);
  --shadow-lift: 0 12px 30px rgba(13,18,32,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
  font-weight: 400;            /* без Thin/ExtraLight: основной текст Regular (правило «Бсветл») */
  font-size: 16px;
  color: #333;
  background: var(--bg);
  line-height: 1.55;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 32px; }

h1 { font-weight: 800; font-size: clamp(1.9rem, 3.2vw, 2.8rem); color: var(--ink); margin: 0 0 10px; letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 800; color: var(--ink); margin: 0 0 8px; letter-spacing: -.02em; }
.sub { color: var(--muted); margin: 0 0 22px; max-width: 760px; font-size: 14.5px; }

/* ---------- Шапка: строка 1 (тонкая синяя) ---------- */
.topbar { background: #F2F7FC; color: #40516A; font-size: 12.5px; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; min-height: 30px; gap: 14px; flex-wrap: wrap; }
.topbar a { color: #40516A; }
.topbar a:hover { text-decoration: underline; }
.topbar-left { display: flex; gap: 18px; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.btn-partner {
  background: var(--orange); color: #fff !important; font-weight: 700; font-size: 12px;
  border-radius: 999px; padding: 4px 10px; padding-left: 10px; padding-right: 10px; white-space: nowrap; transition: var(--tr);
}
.btn-partner:hover { background: var(--orange-hover); text-decoration: none; }

/* ---------- Шапка: sticky-обёртка со «стеклом» при скролле ---------- */
.sitehead { position: sticky; top: 0; z-index: 100; }
.sitehead.is-stuck .topbar { display: none; }
.sitehead.is-stuck .headbar {
  background: rgba(242,247,252,.82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.sitehead.is-stuck .navbar {
  background: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(13,18,32,.10);
}

/* ---------- Шапка: строка 2 (высокая, #F2F7FC) ---------- */
.headbar { background: var(--headbar); }
.headbar .wrap { display: flex; align-items: center; gap: 34px; height: 84px; }
.logo { font-size: 26px; font-weight: 800; letter-spacing: .4px; color: var(--ink); white-space: nowrap; display: flex; align-items: center; gap: 10px; }
.logo:hover { text-decoration: none; }
.logo .dot { color: var(--blue); }
.logo .logo-img { height: 38px; width: auto; display: block;
  /* Логотип — флекс-элемент в шапке. Без flex:none его сжимает соседний
     контент: при width:auto и заданной высоте картинка не уменьшается
     пропорционально, а РАСТЯГИВАЕТСЯ по заливке — буквы «плывут».
     Замерено 27.08.2026: файл 143×30, на экране 47×30 (4.77 против 1.58).
     object-fit:contain — страховка на случай, если ширину всё же зажмут. */
  flex: none; object-fit: contain; }
.logo .b2b {
  background: var(--blue); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 4px; padding: 2px 7px; margin-left: 0; letter-spacing: 1px;
}
.search { position: relative; flex: 1; max-width: 620px; }
.search input {
  width: 100%; height: 52px; border: 1px solid var(--blue); border-radius: 15px;
  padding: 0 118px 0 20px; font-size: 15px; font-family: inherit; background: #fff; color: var(--ink);
}
.search input:focus { box-shadow: 0 0 0 3px rgba(0,114,204,.25); }
.search button {
  position: absolute; right: 5px; top: 5px; height: 42px; border: 0; border-radius: 12px;
  background: var(--orange2); color: #fff; font-weight: 700; font-size: 14px; padding: 0 22px;
  cursor: pointer; transition: var(--tr);
}
.search button:hover { background: var(--orange-hover); }
.head-contacts { margin-left: auto; text-align: right; white-space: nowrap; }
.head-phone { font-size: 20px; font-weight: 700; line-height: 1.2; }
.head-phone a { color: var(--orange); }
.head-phone a:hover { color: var(--orange-hover); text-decoration: none; }
.head-callback { font-size: 13px; margin-top: 2px; }
.head-hours { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- Шапка: строка 3 (каталог + меню) ---------- */
.navbar { background: #fff; border-bottom: 1px solid var(--line); position: relative; }
.navbar .wrap { display: flex; align-items: center; gap: 28px; min-height: 52px; }
.btn-cat {
  display: inline-block; position: relative; background: var(--blue); color: #fff !important;
  font-weight: 700; font-size: 14px; border-radius: 999px; padding: 10px 20px;
  white-space: nowrap; transition: var(--tr);
}
.btn-cat:hover { background: var(--orange); text-decoration: none; }
.btn-cat:active { top: 1px; }
.nav { display: flex; gap: 18px; font-size: 14px; }
.nav a { color: var(--title); padding: 6px 0; }
.nav a:hover { color: var(--blue); text-decoration: none; }
.nav a.active { font-weight: 700; color: var(--ink); }
.burger {
  display: none; margin-left: auto; background: #fff; border: 1px solid var(--line);
  border-radius: 4px; padding: 7px 13px; font-size: 17px; cursor: pointer; color: var(--ink);
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-block; position: relative; border: 0; cursor: pointer; font-family: inherit;
  background: var(--blue); color: #fff !important; font-size: 14px; font-weight: 700;
  border-radius: 999px; padding: 12px 24px; text-decoration: none !important; transition: var(--tr);
}
.btn:hover { background: var(--orange); }
.btn:active { top: 1px; }
.btn.accent { background: var(--orange2); }
.btn.accent:hover { background: var(--orange-hover); }
.btn.ghost { background: #fff; color: var(--blue) !important; border: 2px solid var(--blue); }
.btn.ghost:hover { background: var(--blue); color: #fff !important; }
.btn.sm { padding: 8px 16px; font-size: 13px; }

/* Кнопка в карточке товара: белая, border 2px, radius 12px */
.btn-card {
  display: block; position: relative; width: 100%; cursor: pointer; font-family: inherit;
  background: #fff; color: var(--blue); border: 2px solid var(--blue); border-radius: 12px;
  font-size: 13.5px; font-weight: 700; padding: 9px 10px; text-align: center; transition: var(--tr);
}
.btn-card:hover { background: var(--blue); color: #fff; }
.btn-card:active { top: 1px; }
.btn-card.order { background: var(--orange2); border-color: var(--orange2); color: #fff; }
.btn-card.order:hover { background: var(--orange-hover); border-color: var(--orange-hover); }

/* ---------- Hero: тёмный mesh-градиент, компактный первый экран ---------- */
.hero {
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(28,157,255,.10), transparent 65%),
    radial-gradient(700px 460px at 8% 92%, rgba(226,0,125,.05), transparent 60%),
    #fff;
  color: #40516A; padding: 44px 0 40px;
}
.hero h1 { color: var(--ink); font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.15; margin: 0 0 14px; max-width: 780px; font-weight: 700; letter-spacing: -.01em; }
.hero .lead { font-size: clamp(1rem, 1.4vw, 1.15rem); color: #40516A; max-width: 680px; margin: 0 0 24px; }
.hero .badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .badge {
  background: #fff; border: 1px solid var(--line); color: #40516A;
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px;
}

/* ---------- Секции: плотность 2026 — воздух вокруг групп, не вместо контента ---------- */
.section { padding: clamp(40px, 4.5vw, 56px) 0; }
.section.tinted { background: #F2F7FC; }

/* ---------- Карточки-сетки ---------- */
.grid { display: grid; gap: 18px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  transition: var(--tr);
}
.card:hover { box-shadow: var(--shadow-card); }
.card h3 { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--ink); }
.card p { margin: 0 0 8px; color: #555; font-size: 14px; }
.card .icon {
  width: 44px; height: 44px; border-radius: 12px; background: #F2F7FC;
  display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px;
}
.card .card-link { font-size: 13.5px; font-weight: 700; }

/* Шаги */
.step { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; transition: var(--tr); }
.step:hover { box-shadow: var(--shadow-card); }
.step .n { font-size: 30px; font-weight: 300; color: var(--blue); line-height: 1; margin-bottom: 10px; }
.step h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.step p { margin: 0; color: #555; font-size: 13.5px; }

/* Цифры доверия */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stats .num { font-size: 34px; font-weight: 700; color: var(--blue); }
.stats .lbl { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* Бренды / дистрибьюторы — текстовые плашки */
.brands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.brand {
  background: #fff; border: 1px solid var(--line); border-radius: 4px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--muted); letter-spacing: .6px; transition: var(--tr);
}
.brand:hover { color: var(--blue); border-color: var(--blue); box-shadow: var(--shadow-card); }
.brand.dist { color: var(--ink); font-size: 15px; }

/* FAQ */
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 10px; }
.faq summary {
  cursor: pointer; padding: 15px 20px; font-weight: 700; font-size: 14.5px; color: var(--ink);
  list-style: none; position: relative; padding-right: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  color: var(--blue); font-size: 20px; font-weight: 300;
}
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 0; padding: 0 20px 16px; color: #555; font-size: 14px; }

/* ---------- Каталог ---------- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-bottom: 22px;
}
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 8px 15px;
  font-size: 13px; cursor: pointer; color: var(--title); font-family: inherit; transition: var(--tr);
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip.active { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.toolbar-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vat-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #fff; }
.vat-switch button {
  border: 0; background: #fff; padding: 8px 14px; font-size: 12.5px; cursor: pointer;
  color: var(--title); font-family: inherit; transition: var(--tr);
}
.vat-switch button + button { border-left: 1px solid var(--line); }
.vat-switch button.active { background: var(--blue); color: #fff; font-weight: 700; }

/* Карточка товара — паттерн coxo.ru */
.product {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 17px; display: flex; flex-direction: column; gap: 9px; transition: var(--tr);
  min-width: 0;
}
.product:hover { box-shadow: var(--shadow-card); }
.pbadges { position: absolute; top: 11px; left: 11px; display: flex; gap: 6px; z-index: 2; }
.pbadge { color: #fff; font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 3px; }
.pbadge.stm { background: var(--badge-blue); }
.pbadge.order { background: var(--badge-orange); }
.pph {
  height: 200px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, #F2F7FC, #F2F7FC 14px, #E9F0F8 14px, #E9F0F8 28px);
  color: var(--muted2); font-size: 13px; overflow: hidden;
}
.pname {
  font-size: 16px; color: var(--ink); line-height: 1.35; min-height: 64px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.pname:hover { color: var(--blue-hover); text-decoration: none; }
.pmeta { font-size: 12.5px; color: var(--muted2); overflow-wrap: anywhere; }
.pavail { font-size: 13px; font-weight: 700; }
.pavail.stock { color: var(--ok-text); }
.pavail.transit { color: var(--warn-text); }
.pavail.order { color: var(--muted); }
.pavail.absent { color: var(--bad-text); }
.pprice-row { margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pprice { font-size: 16px; font-weight: 700; color: #000; }
.pprice.sale { color: #CC0000; }  /* 5,89:1; было #FF0000 — 4,0:1 */
.pprice.ask { color: var(--muted); font-weight: 400; }
.pold { color: var(--ink-old); text-decoration: line-through; font-size: 13px; }
.pvat { font-size: 11.5px; color: var(--muted2); }

/* Теги наличия (как у НИКС) — компактный вариант */
.tag { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 3px; padding: 3px 9px; }
.tag.stock { background: #e7f6ec; color: var(--ok); }
.tag.order { background: #fdf1e5; color: var(--warn); }
.tag.eas { background: #eceeff; color: var(--badge-blue); }
.tag.reestr { background: #e5f3fe; color: #0369a1; }

/* ---------- Формы ---------- */
.form { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; }
.form label { display: block; font-weight: 700; font-size: 13px; color: var(--title); margin: 0 0 6px; }
.form input, .form select, .form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px;
  font-size: 14.5px; font-family: inherit; margin-bottom: 16px; background: #fff; color: var(--ink);
}
.form input:focus, .form textarea:focus, .form select:focus {
  border-color: var(--blue-bright); box-shadow: 0 0 0 3px rgba(28,157,255,.16);
}
.form .hint { font-size: 12px; color: var(--muted2); margin: -10px 0 14px; }
.form .note { font-size: 12px; color: var(--muted2); margin: 12px 0 0; }
.form-note { color: var(--ok-text) !important; font-weight: 700; margin: 14px 0 0 !important; font-size: 13.5px; }

/* Согласие на обработку ПДн (152-ФЗ): обязательный чекбокс во всех формах */
.form label.consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 400; font-size: 13px; color: #4a4a4a; line-height: 1.45; margin: 4px 0 18px;
  cursor: pointer;
}
.form label.consent input[type="checkbox"] {
  width: 18px; height: 18px; min-width: 18px; margin: 1px 0 0; flex: 0 0 auto;
  accent-color: var(--blue); cursor: pointer;
}
.form label.consent a { text-decoration: underline; }

/* Состояние отправки формы: успех / ошибка */
.form-status { display: none; }
.form-status.show {
  display: block; margin-top: 16px; padding: 14px 16px; border-radius: 4px; font-size: 13.5px;
}
.form-status b { display: block; font-weight: 700; margin-bottom: 3px; }
.form-status.ok { background: #e7f6ec; border: 1px solid #b9e6c9; color: var(--ok-text); }
.form-status.err { background: #fdecec; border: 1px solid #f3c2c2; color: var(--bad-text); }
.form-success { text-align: center; padding: 40px; border-top: 3px solid var(--ok); }

/* ---------- Проверка гарантии по SN ---------- */
.sn-result { border-radius: 4px; padding: 20px 22px; margin-top: 18px; display: none; font-size: 14px; }
.sn-result.show { display: block; }
.sn-result.ok { background: #e7f6ec; border: 1px solid #b9e6c9; }
.sn-result.expired { background: #fdf1e5; border: 1px solid #f3d2ac; }
.sn-result.notfound { background: #fee2e2; border: 1px solid #f5b8b8; }
.sn-result h4 { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.sn-result table { border-collapse: collapse; font-size: 14px; }
.sn-result td { padding: 3px 18px 3px 0; }
.sn-result td:first-child { color: var(--muted); }

/* ---------- Таблицы ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; background: #fff; font-size: 14px; }
table.data th, table.data td { border: 1px solid var(--line); padding: 10px 13px; text-align: left; vertical-align: top; }
table.data th { background: var(--headbar); color: var(--title); font-size: 13px; }
table.data td { color: #444; }

/* Документы для закупки */
.docs { list-style: none; margin: 0; padding: 0; }
.docs li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 14px; align-items: baseline; font-size: 14px; }
.docs li:last-child { border-bottom: 0; }
.docs .fmt { color: var(--muted2); font-size: 12px; white-space: nowrap; }

/* Заметка-выноска */
.callout {
  background: var(--headbar); border-left: 3px solid var(--blue); border-radius: 0 4px 4px 0;
  padding: 14px 18px; font-size: 13.5px; color: #445; margin: 18px 0;
}

/* ---------- Футер ---------- */
.footer { background: #F2F7FC; margin-top: 48px; padding: 36px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2.1fr 1fr; gap: 0; align-items: stretch; }
.footer-blue {
  /* «Бсветл»: светлый подвал, тёмный текст (был синий блок) */
  background: #fff; border: 1px solid var(--line); border-right: 0;
  border-radius: 18px 0 0 18px; padding: 30px 34px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
/* Подписи колонок футера — не заголовки: h5 после h1 давал скачок иерархии
   на каждой странице (аудит SEO 14.09.2026). */
.footer-blue .footer-h { color: var(--ink); margin: 0 0 12px; font-size: 20px; font-weight: 700; }
.footer-blue a { color: #40516A; display: block; margin-bottom: 8px; font-size: 13px; }
.footer-blue a:hover { color: var(--blue); text-decoration: none; }
.footer-contacts {
  background: #fff; border: 1px solid var(--line); border-left: 0; border-radius: 0 18px 18px 0;
  padding: 30px 28px; font-size: 14px;
}
.footer-contacts .copy { font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.footer-contacts .tel { font-size: 22px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; }
.footer-contacts .tel a { color: var(--orange); }
.footer-contacts .tel a:hover { color: var(--orange-hover); text-decoration: none; }
.footer-contacts .mail { margin-bottom: 6px; }
.footer-contacts .addr { color: #555; margin-bottom: 12px; }
.footer-contacts .disc { font-size: 11.5px; color: var(--muted2); margin: 0; line-height: 1.5; }
.footer-bottom {
  border-top: 1px solid rgba(0,0,0,.1); margin-top: 28px; padding: 15px 0;
  font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

/* ---------- Адаптив ---------- */
@media (max-width: 960px) {
  .grid.c4, .grid.c3 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .brands { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-blue { border-radius: 4px 4px 0 0; }
  .footer-contacts { border-left: 1px solid var(--line); border-top: 0; border-radius: 0 0 4px 4px; }
  .headbar .wrap { gap: 20px; }
  .head-hours { display: none; }
}
@media (max-width: 767px) {
  .burger { display: block; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    background: #fff; flex-direction: column; gap: 0; padding: 8px 20px 14px;
    border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(0,0,0,.1);
  }
  .nav.open { display: flex; }
  .nav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
  .nav a:last-child { border-bottom: 0; }
  .headbar .wrap { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; gap: 14px; }
  .search { order: 3; max-width: none; width: 100%; }
  .head-contacts { text-align: left; }
  .topbar-left { display: none; }
  .topbar .wrap { justify-content: center; }
  .grid.c4, .grid.c3, .grid.c2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .brands { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 36px 0; }
  .footer-blue { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; }
}

/* ---------- Hero: кросс-брендинг COXO × «Сохо» ---------- */
.hero-brand {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 20px; font-size: 14px; color: #40516A;
}
.hero-brand .pill {
  background: #fff; border-radius: 6px; padding: 5px 12px;
  display: inline-flex; align-items: center;
}
.hero-brand .pill img { height: 22px; width: auto; display: block; }

/* ---------- Заголовок секции со ссылкой справа ---------- */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.sec-head .sub { margin-bottom: 0; }
.sec-link { font-size: 14px; font-weight: 700; white-space: nowrap; margin-bottom: 22px; }
.sec-head + * { margin-top: 20px; }

/* ---------- Стена логотипов производителей ---------- */
.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.logos.c8 { grid-template-columns: repeat(8, 1fr); }
.logos.c3 { grid-template-columns: repeat(3, 1fr); }
.logo-tile {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 12px 12px 9px; min-height: 86px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  transition: var(--tr);
}
.logo-tile:hover { box-shadow: var(--shadow-card); }
.logo-tile .limg { height: 42px; display: flex; align-items: center; justify-content: center; }
.logo-tile img { height: 36px; width: auto; max-width: 100%; object-fit: contain; display: block; }
.logo-tile img.lg-round { height: 42px; } /* круглые эмблемы: Dell, HP */
.logo-tile img.lg-wide { height: 30px; }  /* крупные файлы: Eltex, Ubiquiti — нормализация вниз */
.logo-tile .ltext { font-weight: 700; font-size: 15px; color: var(--ink); letter-spacing: .2px; } /* текстовая плитка без img (TeachTouch) */
.logo-tile .lname { font-size: 11.5px; color: var(--muted2); text-align: center; line-height: 1.3; }
.logos-title { font-size: 14px; font-weight: 700; color: var(--title); margin: 24px 0 12px; }
.logos-title:first-child { margin-top: 0; }

/* ---------- Секции направлений (solutions) ---------- */
.sol-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
.list { margin: 0 0 16px; padding-left: 18px; font-size: 14px; color: #555; }
.list li { margin-bottom: 6px; }
.list b { color: var(--ink); }
h3.small { font-size: 14px; font-weight: 700; color: var(--title); margin: 18px 0 8px; }
h3.small:first-child { margin-top: 0; }

/* ---------- Кейсы (projects) ---------- */
.case-tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--warn-text);
  background: #fdf1e5; border-radius: 3px; padding: 3px 9px; margin-bottom: 10px; }

/* ---------- Адаптив: логотипы и новые сетки ---------- */
@media (max-width: 960px) {
  .logos, .logos.c8 { grid-template-columns: repeat(4, 1fr); }
  .sol-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .logos, .logos.c8 { grid-template-columns: repeat(3, 1fr); }
  .logos.c3 { grid-template-columns: repeat(2, 1fr); }
  .logo .logo-img { height: 30px; }
  .hero-brand { font-size: 13px; }
}

/* ============================================================
   Тренды 2026: bento, товарная полоса, тёмная CTA-полоса,
   scroll-driven reveal, :has(), prefers-reduced-motion
   ============================================================ */

/* ---------- Bento-сетка категорий (первый экран главной) ---------- */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bento-tile {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 18px 20px; color: inherit; transition: var(--tr);
}
.bento-tile:hover {
  border-color: var(--blue); box-shadow: var(--shadow-lift);
  text-decoration: none; transform: translateY(-2px);
}
.bento-tile.span2 { grid-column: span 2; }
.bento-tile .b-icon {
  width: 42px; height: 42px; border-radius: 10px; background: var(--headbar);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.bento-tile .b-icon img { height: 22px; width: auto; display: block; }
.bento-tile h3 { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.bento-tile p { margin: 0; color: #555; font-size: 13px; line-height: 1.45; }
.bento-tile .b-scale { margin-top: auto; padding-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--blue); }
.bento-tile .b-go {
  position: absolute; top: 16px; right: 16px; color: var(--muted2);
  font-size: 15px; transition: var(--tr);
}
.bento-tile:hover .b-go { color: var(--orange); transform: translateX(2px); }

/* ---------- Товарная полоса «Хиты» — компактная карточка ---------- */
.product.hit { padding: 13px; gap: 7px; }
.product.hit .pph { height: 110px; font-size: 12px; }
.product.hit .pname { font-size: 14px; min-height: 57px; }
.product.hit .pmeta { font-size: 11.5px; }
.product.hit .pavail { font-size: 12px; }
.product.hit .pprice { font-size: 15px; }

/* :has() — подсветка карточки при наведении на её кнопку */
.product:has(.btn-card:hover) { border-color: var(--blue); }
.form:has(input:focus), .form:has(textarea:focus) { border-color: rgba(0,130,230,.4); }

/* ---------- Тёмная CTA-полоса перед футером ---------- */
.cta-band {
  background:
    radial-gradient(760px 380px at 8% -30%, rgba(0,130,230,.45), transparent 62%),
    radial-gradient(640px 360px at 96% 130%, rgba(43,70,140,.55), transparent 64%),
    var(--deep);
  color: #fff; border-radius: 14px; padding: clamp(26px, 3.5vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin: 0 0 6px; }
.cta-band p { margin: 0; color: rgba(255,255,255,.75); font-size: 14.5px; max-width: 560px; }
.cta-band .btn { white-space: nowrap; }

/* ---------- Тёмная секция (форма КП перед футером) ---------- */
.section.dark {
  background:
    radial-gradient(760px 420px at 6% -30%, rgba(0,130,230,.4), transparent 62%),
    radial-gradient(680px 420px at 98% 130%, rgba(43,70,140,.5), transparent 64%),
    var(--deep);
  color: #fff;
}
.section.dark h2 { color: #fff; }
.section.dark .sub { color: rgba(255,255,255,.72); }
.section.dark a:not(.btn) { color: #8ec3f5; }
.section.dark .callout {
  background: rgba(255,255,255,.07); border-left-color: var(--orange-bright);
  color: rgba(255,255,255,.85);
}

/* ---------- Scroll-driven появление секций (фолбэк: статично) ---------- */
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise-in .6s ease both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Адаптив: bento, хиты, CTA-полоса ---------- */
@media (max-width: 1100px) {
  .grid.c5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .grid.c5 { grid-template-columns: repeat(2, 1fr); }
  .cta-band { border-radius: 10px; }
}
@media (max-width: 520px) {
  .bento { grid-template-columns: 1fr; }
  .bento-tile.span2 { grid-column: auto; }
  .grid.c5 { grid-template-columns: 1fr; }
}

/* ---------- Страница товара (product.html) ---------- */
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--blue); }
.pg-main {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  min-height: 380px; overflow: hidden;
}
.pg-main img { max-width: 100%; max-height: 440px; object-fit: contain; }
.pg-nophoto { color: var(--muted2); font-size: 14px; padding: 60px 0; }
.pg-thumbs { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pg-thumbs img {
  width: 74px; height: 74px; object-fit: contain; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer; padding: 4px;
}
.pg-thumbs img.active { border-color: var(--blue); border-width: 2px; }
.pg-buy .pprice { font-size: 27px; }
.pg-buy .pvat { color: var(--muted2); }
.pg-facts { margin: 14px 0; font-size: 14px; color: #444; }
.pg-facts div { margin-bottom: 6px; }

/* ---------- Фасетные фильтры каталога ---------- */
.facet-bar {
  display: none; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  margin: 0 0 16px; padding: 13px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
}
.facet-bar.show { display: flex; }
.facet { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
.facet select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 13.5px; min-width: 180px; background: #fff; color: var(--ink);
}

/* ---------- Карусель производителей ---------- */
.brand-strip { overflow: hidden; position: relative; }
.brand-strip::before, .brand-strip::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 3; pointer-events: none;
}
.brand-strip::before { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.brand-strip::after { right: 0; background: linear-gradient(-90deg, #fff, transparent); }
.section.tinted .brand-strip::before { background: linear-gradient(90deg, var(--tinted, #F2F7FC), transparent); }
.section.tinted .brand-strip::after { background: linear-gradient(-90deg, var(--tinted, #F2F7FC), transparent); }
.brand-track { display: flex; gap: 14px; width: max-content; animation: brand-scroll 55s linear infinite; }
.brand-strip:hover .brand-track { animation-play-state: paused; }
@keyframes brand-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.brand-tile {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 20px; min-width: 150px; text-decoration: none; color: var(--title);
  transition: var(--tr);
}
.brand-tile:hover { border-color: var(--blue); box-shadow: var(--shadow-card); text-decoration: none; }
.brand-tile img { max-width: 84px; max-height: 30px; object-fit: contain; }
.brand-tile .lname { font-size: 13px; font-weight: 700; }
/* Плитка без логотипа (бренд не отдал файл): имя крупно, подпись не дублируем. */
.brand-tile .ltext { font-weight: 800; font-size: 15px; letter-spacing: .2px; }
.brand-tile .ltext + .lname { display: none; }
@media (prefers-reduced-motion: reduce) { .brand-track { animation: none; } }

/* ---------- Плавающая кнопка спецификации ---------- */
.spec-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  background: var(--orange2); color: #fff; border: 0; border-radius: 30px;
  padding: 13px 22px; font-size: 14.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 22px rgba(224,122,26,.4); display: none; gap: 8px; align-items: center;
}
.spec-fab.show { display: flex; }
.spec-fab:hover { background: var(--orange-hover); }

/* ---------- Страница спецификации ---------- */
.spec-line { display: grid; grid-template-columns: minmax(0, 1fr) 110px 130px 40px; gap: 12px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--line); }
.spec-line > div:first-child { min-width: 0; overflow-wrap: anywhere; }  /* длинные имена из прайса не должны раздвигать строку */
.spec-line .qty { width: 86px; }
.spec-line .qty input { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; }
.spec-line .sum { font-weight: 700; text-align: right; }
.spec-del { background: none; border: 0; color: var(--bad-text); font-size: 19px; cursor: pointer; }
.spec-total { display: flex; justify-content: flex-end; gap: 26px; padding: 18px 0 4px; font-size: 17px; }
.spec-total b { font-size: 21px; }
.spec-empty { text-align: center; color: var(--muted); padding: 44px 0; }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--title); color: #fff; padding: 12px 22px; border-radius: 8px;
  font-size: 14px; z-index: 70; opacity: 0; transition: opacity .25s; pointer-events: none;
}
.toast.show { opacity: .96; }

/* ---------- Bento-тайлы с внутренними ссылками ---------- */
.bento-tile h3 a, .bento-tile h3 { color: var(--title); }
.bento-tile h3 a:hover { color: var(--blue); text-decoration: none; }
.bento-tile .b-scale a { color: var(--orange2); font-weight: 700; }
.bento-tile .b-scale a:hover { text-decoration: none; }

/* ---------- Товарная карусель на главной ---------- */
.prod-strip { margin-top: 20px; }
.prod-track { animation-duration: 110s; align-items: stretch; }
.prod-card {
  width: 225px; flex: 0 0 auto; text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
}
.prod-card:hover { text-decoration: none; }
.prod-card .pph { height: 130px; }
.prod-card .pname { min-height: 0; -webkit-line-clamp: 2; font-size: 14px; }
.prod-card .pprice-row { margin-top: auto; }

/* ---------- Карусель направлений на главной ---------- */
.cat-card { width: 330px; flex: 0 0 auto; }
.cat-card p { font-size: 13.5px; }
.cat-prods { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 2px; }
.cat-prod {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  background: var(--headbar); border-radius: 7px; padding: 8px 11px;
  font-size: 12.5px; color: var(--ink); text-decoration: none; transition: var(--tr);
}
.cat-prod:hover { background: #e3eefb; text-decoration: none; }
.cat-prod .cp-name {
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.cat-prod .cp-price { font-weight: 700; white-space: nowrap; }

/* ---------- Бейдж ЕАЭС + переключаемые чипы фильтров ---------- */
.pbadge.eas { background: var(--ok-text); }  /* белый текст 5,44:1 (был --ok — 3,47:1) */
.chip.toggle.active { background: var(--ok); border-color: var(--ok); color: #fff; }
.filter-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 6px; }

/* ---------- Конфигуратор серверов ---------- */
.cfg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; }  /* minmax(0,…): без него длинные названия опций раздували первую колонку и страница уезжала вправо (Ф-7) */
@media (max-width: 960px) { .cfg-layout { grid-template-columns: minmax(0, 1fr); } }
.cfg-side { position: sticky; top: 130px; }
/* Сетка карточек платформ заменена комбобоксом .cfg-picker — см. блок ниже */
.cfg-group { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
.cfg-group-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 15px; border-bottom: 1px solid var(--line);
}
.cfg-req { font-size: 11px; font-weight: 700; color: var(--orange2); text-transform: uppercase; }
.cfg-opt { font-size: 11px; font-weight: 700; color: var(--muted2); text-transform: uppercase; }
.cfg-group-body { padding: 12px 15px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cfg-group-body select {
  flex: 1; min-width: 260px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 13.5px; background: #fff;
}
.cfg-qty { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); }
.cfg-qty input { width: 72px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 7px; }
.cfg-warn {
  background: #FFF6EC; border-left: 3px solid var(--orange-bright); border-radius: 6px;
  padding: 10px 13px; font-size: 13px; color: #7a4a00; margin: 10px 0;
}
table.cfg-sum td { font-size: 12.5px; padding: 7px 10px; }

/* ---------- Конфигуратор: мультистроки опций ---------- */
.cfg-lines { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.cfg-line { display: flex; gap: 10px; align-items: center; }
.cfg-line select { flex: 1; min-width: 0; }

/* Занятость отсеков и слотов: сколько уже занято и чем ограничено (ревью 24.08).
   Цвета — с запасом по AA: #5c5c5c 6,4:1 и #8a3b00 6,0:1 на белом. */
.cfg-cap { margin: 8px 0 0; font-size: 12.5px; color: #5c5c5c; line-height: 1.45; }
.cfg-cap.is-full { color: #8a3b00; font-weight: 600; }
.cfg-lines .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* Согласование с инженером: состав сборки рядом с формой заявки */
.cfg-eng-list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.6; }
.cfg-eng-list li { margin: 0 0 2px; }
.cfg-eng-total { margin: 12px 0 0; font-size: 14px; }

/* ---------- Ритм секций главной (нормализация отступов) ---------- */
.section.tinted + .section.tinted { border-top: none; }
#cats .brand-strip, .section .brand-strip { margin-bottom: 10px; }
.hero + .section { padding-top: clamp(32px, 4vw, 48px); }

/* ---------- Ревью 21.08: контраст (WCAG AA), тап-зоны, мета-строка каталога ---------- */
:root {
  --muted: #6b6b6b;
  --muted2: #6E6E6E;   /* 5,10:1 на белом · 4,60:1 на #F3F3F3 (было #757575 — 4,15:1) */
}
.order-meta-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.order-meta-line .chip { padding: 6px 12px; font-size: 12.5px; }
.sort-select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: #fff; }
.spec-del { width: 36px; height: 36px; font-size: 20px; line-height: 1; }
.nav a { padding: 10px 0; }
.chip { padding: 9px 14px; }
.topbar a { padding: 6px 0; display: inline-block; }
/* мобильная шапка: не даём строке контактов раздувать вьюпорт */
@media (max-width: 767px) {
  .headbar .wrap { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 10px; }
  .headbar .search { order: 3; flex: 1 1 100%; }
  .head-contacts { margin-left: auto; font-size: 12.5px; }
  .head-callback, .head-hours { display: none; }
  .facet select, .cfg-group-body select { min-width: 0; width: 100%; }
  .facet { flex: 1 1 45%; }
  .spec-line { grid-template-columns: minmax(0, 1fr) 80px 90px 36px; font-size: 13px; }
  .spec-fab { z-index: 55; }
}

/* ---------- Недоступные чипы (скоро) ---------- */
.chip[disabled] { opacity: .55; cursor: default; }
.chip[disabled]:hover { background: inherit; }

/* ---------- Планшет 768–1023: горизонтальное меню обязано помещаться ----------
   Настоящая причина переполнения, которую раньше прятал body{overflow-x:clip}:
   на 768px «Каталог товаров» + 8 пунктов меню занимали 782px при 753px вьюпорта.
   Уплотняем меню, а не обрезаем страницу (находка Ф-7). */
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar .wrap { gap: 14px; }
  .nav { gap: 10px; font-size: 13px; }
  .btn-cat { padding: 10px 14px; font-size: 13px; }
  .headbar .wrap { gap: 20px; }
}

/* ---------- Бургер: гарантированная видимость на узких экранах ----------
   Ровно 767px, а не 768: горизонтальное меню скрывается при max-width 767px,
   и при 768px раньше были видны одновременно и меню, и бургер (находка Ф-7). */
@media (max-width: 767px) {
  .navbar .wrap { position: relative; gap: 12px; }
  .navbar .burger {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 42px; height: 38px; flex: 0 0 auto; font-size: 18px;
  }
}

/* ---------- Мобильная шапка ---------- */
@media (max-width: 767px) {
  .sitehead .wrap { width: 100%; max-width: 100%; padding-left: 12px; padding-right: 12px; }
  .navbar .wrap { justify-content: space-between; }
  .navbar .burger { margin-left: 0; }
  .topbar .wrap { gap: 6px; }
  .topbar-right { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
}

/* ---------- Совсем узкие экраны (≤480px) ---------- */
@media (max-width: 480px) {
  .topbar { display: none; }          /* вспомогательная строка — убираем */
  .head-phone a { font-size: 13px; }
  .headbar .wrap { padding-left: 12px; padding-right: 12px; }
}

/* ---------- Правовой документ (privacy.html) ---------- */
.doc { max-width: 900px; padding: 34px 38px; font-size: 15px; line-height: 1.7; }
.doc h2 { font-size: 1.1rem; margin: 30px 0 10px; scroll-margin-top: 140px; }
.doc h2:first-of-type { margin-top: 10px; }
.doc p { margin: 0 0 12px; }
.doc ul { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc .doc-meta { background: var(--headbar); border-left: 3px solid var(--blue); padding: 14px 16px; margin-bottom: 8px; }
.doc .doc-note { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--title); }
/* Незаполненные реквизиты: намеренно заметны, чтобы не уехали в бой */
mark.todo {
  background: #fff3cd; color: #6b4a00; border: 1px dashed #d9a400;
  border-radius: 3px; padding: 0 5px; font-weight: 700; font-size: .92em;
}
@media (max-width: 767px) { .doc { padding: 22px 18px; } }

/* ---------- Конфигуратор: позиции «по запросу» ---------- */
/* Сводка стоит в колонке 320 px. Сырые SKU комплектующих ПК «Сохо» —
   неразрывные токены («RS700A-E13-RS12U/2KW/12NVMe»), их min-content распирал
   таблицу шире колонки и давал горизонтальную прокрутку страницы на 360 px.
   Разрешаем перенос в любом месте: ломается длинный артикул, а не вёрстка. */
.cfg-sum td { overflow-wrap: anywhere; }
.cfg-sum td.cfg-ask { color: var(--warn-text); font-weight: 700; white-space: nowrap; }
.spec-total.partial b { color: var(--warn-text); }
.cfg-ask-note {
  margin: 4px 0 0; padding: 10px 12px; border-radius: 4px;
  background: #fff8e6; border: 1px solid #f0d79a; color: #6b4a00;
  font-size: 13px; line-height: 1.45;
}

/* ---------- Госзакупки: быстрый переход в отфильтрованный каталог ---------- */
.gov-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }

/* ============================================================
   Доступность (волна 2, находки Ф-8 / Ф-9)
   ============================================================ */

/* Видимый фокус для клавиатуры. До волны 2 в файле было два `outline: none`
   без замены и ни одного `:focus-visible` — навигация с клавиатуры была слепой. */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}
/* На тёмных подложках синяя обводка теряется — там белая.
   Приёмка аудита 2, находка C-3 отчётов 14 и 17: список остался от старой
   тёмной темы и после перехода на «Бсветл» стал вредным. Замерено в
   браузере: подвал .footer-blue — фон rgb(255,255,255), контраст белой
   обводки 1,00:1, фокусируемых элементов 14; топбар — rgb(242,247,252),
   контраст 1,08:1, элементов 6. Итого 20 невидимых фокусов на одной
   главной: человек, идущий табом, не видит, где он находится.
   .hero тоже светлый (белый + полупрозрачные радиальные градиенты).
   Оставлен только .cta-band — он единственный на тёмном var(--deep). */
.cta-band :focus-visible {
  outline-color: #fff;
}
/* Мышиный клик не должен рисовать рамку — только клавиатура */
:focus:not(:focus-visible) { outline: none; }

/* Ссылка «к содержимому»: видна только при фокусе с клавиатуры */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: #fff; color: var(--blue); font-weight: 700; font-size: 14px;
  padding: 10px 18px; border: 2px solid var(--blue); border-radius: 4px;
  transition: top .15s ease-in-out;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* main как посадочная цель skip-link */
main { display: block; }
main:focus { outline: none; }

/* Кнопка паузы бесконечной карусели производителей (WCAG 2.2.2) */
.brand-strip { --brand-play: running; }
.brand-strip .brand-track { animation-play-state: var(--brand-play); }
.brand-strip.paused { --brand-play: paused; }
.brand-pause {
  position: absolute; right: 8px; top: 8px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(13,18,32,.15);
}
.brand-pause:hover { border-color: var(--blue); color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .brand-pause { display: none; } }

/* Ссылки внутри белой формы не должны наследовать светло-синий цвет
   тёмной секции (.section.dark a) — на белом он даёт 1,86:1 */
.form a { color: var(--blue); }
.section.dark .form a { color: var(--blue); }

/* ============================================================
   Конфигуратор: выбор платформы (волна 3)
   Один механизм на 5 платформ HPE и на 96 «Сохо»: свёрнутая кнопка
   с выбранной платформой + раскрывающаяся панель с поиском и чипами.
   ============================================================ */
.cfg-picker { position: relative; margin: 0 0 16px; }
.cfg-picker-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted2); margin-bottom: 6px;
}
.cfg-picker-trigger {
  width: 100%; display: grid; gap: 3px 12px; align-items: center; text-align: left;
  grid-template-columns: minmax(0, 1fr) 16px;
  grid-template-areas: "top caret" "specs caret";
  background: #fff; border: 2px solid var(--line); border-radius: 10px;
  padding: 12px 14px; cursor: pointer; font-family: inherit; transition: var(--tr);
}
.cfg-picker-trigger:hover { border-color: var(--blue); }
.cfg-picker.is-open .cfg-picker-trigger { border-color: var(--blue); }
.cfg-pick-top {
  grid-area: top; display: flex; gap: 12px; align-items: baseline;
  justify-content: space-between; min-width: 0;
}
.cfg-pick-top b { font-size: 15.5px; color: var(--ink); overflow-wrap: anywhere; }
.cfg-pick-price { white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--ink); }
.cfg-pick-price small { font-weight: 400; font-size: 11.5px; color: var(--muted); margin-left: 5px; }
.cfg-pick-specs { grid-area: specs; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.cfg-pick-caret { grid-area: caret; justify-self: end; font-size: 13px; color: var(--muted); }
.cfg-picker.is-open .cfg-pick-caret { transform: rotate(180deg); }

.cfg-picker-pop {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px);
  display: flex; flex-direction: column; gap: 8px; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(13, 18, 32, .20);
  max-height: min(70vh, 560px);
}
.cfg-picker-pop[hidden] { display: none; }
/* Авторские классы вроде .grid перебивают UA-правило [hidden] — возвращаем семантику */
[hidden] { display: none !important; }
.cfg-pick-search { display: flex; gap: 8px; }
.cfg-pick-input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 7px; font-size: 14px; font-family: inherit; color: var(--ink); background: #fff;
}
.cfg-pick-close {
  width: 40px; min-height: 40px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; font-size: 20px; line-height: 1; color: var(--title); cursor: pointer;
}
.cfg-pick-close:hover { border-color: var(--blue); color: var(--blue); }
.cfg-pick-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cfg-pick-chips .chip { padding: 7px 12px; font-size: 12.5px; }
.cfg-pick-count { font-size: 12px; color: var(--muted); }
.cfg-pick-list {
  list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
}
.cfg-pick-row {
  display: grid; grid-template-columns: 18px auto minmax(0, 1fr) auto; gap: 3px 10px;
  align-items: center; padding: 9px 10px; border-radius: 8px; cursor: pointer;
}
.cfg-pick-row + .cfg-pick-row { box-shadow: inset 0 1px 0 #EFF0F2; }
.cfg-pick-row.is-active { background: var(--headbar); box-shadow: inset 0 0 0 2px var(--blue); }
.cfg-pick-row.is-selected .cfg-pick-name { font-weight: 700; }
.cfg-pick-mark { color: var(--blue); font-weight: 700; font-size: 14px; }
/* Фото есть не у всех платформ (у «Сохо» — у 15 из 96): колонка auto схлопывается в ноль */
.cfg-pick-photo { width: 34px; height: 34px; object-fit: contain; }
.cfg-pick-body { grid-column: 3; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* Имена платформ «Сохо» — сырые SKU без пробелов: не даём им раздуть строку */
.cfg-pick-name { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.cfg-pick-meta { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.cfg-pick-col { grid-column: 4; display: flex; flex-direction: column; gap: 2px; text-align: right; white-space: nowrap; }
.cfg-pick-sum { font-size: 14px; font-weight: 700; color: var(--ink); }
.cfg-pick-stock { font-size: 11.5px; color: var(--muted); }
.cfg-pick-empty { padding: 16px 10px; font-size: 13.5px; color: var(--muted); }
.cfg-plat-note { margin: 0 0 12px; }

@media (max-width: 600px) {
  .cfg-picker-pop { max-height: min(76vh, 520px); }
  .cfg-pick-row { grid-template-columns: 18px auto minmax(0, 1fr); }
  .cfg-pick-col {
    grid-column: 3; flex-direction: row; gap: 10px;
    text-align: left; align-items: baseline; white-space: normal;
  }
  .cfg-pick-top { flex-wrap: wrap; gap: 2px 10px; }
  /* На узком экране строка характеристик не должна растягивать строку списка на полэкрана:
     полный состав остаётся в title и в сводке справа после выбора */
  .cfg-pick-meta {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ============================================================
   Каталог: боковая панель (дерево разделов + фасеты) и колонка результатов
   ============================================================ */
.cat-layout {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.cat-main { min-width: 0; }
/* Карточек в колонке результатов на 286px меньше места, чем было во всю ширину:
   колонки задаём здесь, а не классом .c4 в разметке. */
.catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cat-side {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px;
  /* Шапка липкая и на скролле остаётся 168px высотой — панель липнет под ней,
     иначе дерево уезжает под шапку и первые разделы не видны. */
  position: sticky;
  top: 180px;
  max-height: calc(100vh - 196px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cat-side-bar { display: none; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cat-side-title { font-weight: 700; color: var(--ink); font-size: 15px; }
.cat-side-close {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 4px; width: 32px; height: 32px; font-size: 15px; cursor: pointer;
}
.cat-side-open { display: none; }
.cat-side-scrim { display: none; }

/* ---- Дерево разделов ---- */
.cat-tree { display: flex; flex-direction: column; gap: 1px; }
.cat-tree-load { margin: 0; color: var(--muted); font-size: 13.5px; }
.cat-node {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  text-align: left; background: none; border: 0; cursor: pointer;
  padding: 6px 8px; border-radius: 4px;
  font: inherit; font-size: 13.5px; color: #333;
  transition: background var(--tr), color var(--tr);
}
.cat-node:hover { background: var(--headbar); color: var(--blue); }
.cat-node.current { background: var(--blue); color: #fff; font-weight: 700; }
.cat-node.current:hover { background: var(--blue); color: #fff; }
.cat-node.cat-root { font-weight: 700; color: var(--ink); }
.cat-node.cat-root.current { color: #fff; }
/* Раскрытая ветка на пути к текущему разделу: подсвечена, но не выбрана */
.cat-node.open:not(.current) { font-weight: 700; color: var(--ink); }
/* Свёрнутая ветка с детьми — «есть куда провалиться» */
.cat-node.has-kids:not(.open) .cat-nm::after { content: ' \203A'; color: var(--muted); }
.cat-nm { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cat-cnt { flex: 0 0 auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cat-node.current .cat-cnt { color: rgba(255,255,255,.92); }
.cat-node:hover .cat-cnt { color: inherit; }
.cat-sub { margin: 1px 0 3px 10px; padding-left: 8px; border-left: 2px solid var(--line); }
.cat-unclass { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.cat-hint { margin: 4px 8px 0; font-size: 11.5px; color: var(--muted); line-height: 1.4; }

/* ---- Хлебные крошки ---- */
.cat-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 12px; font-size: 13.5px;
}
.crumb-link {
  background: none; border: 0; padding: 2px 0; font: inherit; font-size: 13.5px;
  color: var(--blue); cursor: pointer;
}
.crumb-link:hover { text-decoration: underline; }
.crumb-cur { color: var(--ink); font-weight: 700; }
.crumb-sep { color: var(--muted2); }
.crumb-up {
  margin-left: auto; background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 4px 10px; font: inherit; font-size: 12.5px; color: var(--blue); cursor: pointer;
}
.crumb-up:hover { border-color: var(--blue); }

/* ---- Панель фасетов ---- */
.facet-panel { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.facet-none { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.facet-blk { margin-bottom: 14px; }
.facet-h { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.facet-cov { font-weight: 300; font-size: 11.5px; color: var(--muted); }
.facet-note { margin: 5px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.facet-note.warn { color: var(--warn-text); }
.facet-vals { display: flex; flex-direction: column; gap: 1px; }
.fval {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.fval:hover { background: var(--headbar); }
.fval.on { font-weight: 700; color: var(--ink); }
.fval input { margin: 0; flex: 0 0 auto; accent-color: var(--blue); }
.fval-t { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.fval-n { flex: 0 0 auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.facet-q, .facet-find {
  width: 100%; padding: 6px 9px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 13px;
}
.facet-more, .facet-reset {
  background: none; border: 0; padding: 4px 6px; margin-top: 2px;
  font: inherit; font-size: 12.5px; color: var(--blue); cursor: pointer;
}
.facet-more:hover { text-decoration: underline; }
.facet-extra { margin: 4px 0 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.facet-extra > summary {
  cursor: pointer; font-size: 12.5px; color: var(--ink); font-weight: 700;
  list-style: none; padding: 4px 0;
}
.facet-extra > summary::-webkit-details-marker { display: none; }
.facet-extra > summary::before { content: '\25B8  '; color: var(--muted); }
.facet-extra[open] > summary::before { content: '\25BE  '; }
.facet-extra > summary:hover { color: var(--blue); }
.facet-extra .facet-blk { margin-top: 10px; }
.facet-reset { display: block; width: 100%; text-align: left; }

/* ---- Результаты: счётчик, пустой экран, конец списка ---- */
.meta-hint { display: inline-block; margin-left: 8px; font-size: 12.5px; color: var(--muted); }
.catalog-empty { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 34px 20px; }
.catalog-empty b { color: var(--ink); }
.linkish {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--blue); cursor: pointer; text-decoration: underline;
}
.order-end { margin: 0; font-size: 13px; color: var(--muted); }
/* Реестр по бренду — визуально отделён от подтверждённого: для 44-ФЗ разница
   принципиальна, и бейдж не должен читаться как гарантия. */
.pbadge.stm.unconf { background: var(--warn-text); }
.preg-warn { margin: 4px 0 0; font-size: 11.5px; color: var(--warn-text); line-height: 1.35; }

@media (max-width: 1279px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Ниже 1024px панель уезжает в шторку: колонка в 286px съедала бы половину экрана */
@media (max-width: 1023px) {
  .cat-layout { grid-template-columns: minmax(0, 1fr); }
  .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-side-open { display: inline-flex; }
  .cat-side-bar { display: flex; }
  .cat-side {
    position: fixed; top: 0; left: 0; z-index: 60;
    width: min(340px, 92vw); max-height: none; height: 100%;
    border-radius: 0; border-width: 0 1px 0 0;
    transform: translateX(-100%); transition: transform var(--tr);
    padding: 14px 16px 40px;
  }
  body.side-open .cat-side { transform: none; }
  body.side-open { overflow: hidden; }
  .cat-side-scrim {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(13,18,32,.45);
  }
  .cat-side-scrim[hidden] { display: none; }
}
@media (max-width: 900px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .catalog-grid { grid-template-columns: minmax(0, 1fr); }
  .crumb-up { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-side { transition: none; }
}

/* ---------- Поиск: живой автоподбор (search_suggest.js) ---------- */
.sg-box {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1000;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 18px 44px rgba(16,36,58,.18);
  max-height: 420px; overflow-y: auto; padding: 8px;
}
.sg-cat {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted2); padding: 10px 12px 4px;
}
.sg-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
  padding: 9px 12px; border-radius: 10px; text-decoration: none !important;
}
.sg-item:hover, .sg-item.sg-hover { background: #F2F7FC; }
.sg-item.sg-hover { outline: 2px solid var(--blue-bright); outline-offset: -2px; }
.sg-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.sg-meta { grid-column: 1; font-size: 12px; color: var(--muted); }
.sg-price { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 14px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.sg-all {
  display: block; margin-top: 6px; padding: 11px 12px; border-radius: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--blue) !important;
  border-top: 1px solid var(--line); text-decoration: none !important;
}
.sg-all:hover, .sg-all.sg-hover { background: #F2F7FC; }
.sg-fixed {
  margin: 2px 2px 6px; padding: 8px 12px; border-radius: 10px;
  background: rgba(28,157,255,.09); border: 1px solid rgba(28,157,255,.3);
  font-size: 12.5px; color: var(--ink);
}
.sg-empty { padding: 14px 12px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 767px) {
  .sg-box { position: fixed; left: 10px; right: 10px; top: auto; max-height: 60vh; }
}

/* ---------- Меню разделов за бургером у логотипа (все страницы) ---------- */
.headbar .wrap { position: relative; }
.mb-navburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; flex: 0 0 auto; padding: 0 11px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  transition: var(--tr);
}
.mb-navburger span {
  display: block; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.mb-navburger:hover, .mb-navburger[aria-expanded="true"] { border-color: var(--blue-bright); }
.mb-navburger:hover span, .mb-navburger[aria-expanded="true"] span { background: var(--blue-bright); }
.mb-navburger:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 2px; }
.mb-navburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mb-navburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mb-navburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mb-navmenu {
  position: absolute; top: calc(100% + 8px); left: 32px; z-index: 120;
  min-width: 260px; padding: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 44px rgba(16,36,58,.16);
}
.mb-navmenu a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
  transition: var(--tr);
}
.mb-navmenu a::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); flex: none; transition: var(--tr);
}
.mb-navmenu a:hover { background: #F2F7FC; color: var(--blue-bright); text-decoration: none; }
.mb-navmenu a:hover::before { background: var(--pink); }
.mb-navmenu a[aria-current="page"] { color: var(--blue-bright); }
.mb-navmenu a[aria-current="page"]::before { background: var(--blue-bright); }
@media (max-width: 767px) {
  .mb-navmenu { left: 12px; right: 12px; min-width: 0; }
}

/* Строка сводки конфигуратора «в базе»: узел уже стоит в сервере с завода,
   докупать его не нужно. Приглушаем, чтобы не путалась с выбранными позициями
   (разбор владельца 03.09.2026). */
.cfg-sum tr.cfg-base-row td { color: var(--muted); font-style: italic; }

/* ==================================================================
   «Как проехать»: кнопки маршрута и карта, которая грузится по клику
   ------------------------------------------------------------------
   Карта — чужой iframe: сторонние запросы и куки на каждый заход в
   «Контакты», плюс вес больше самой страницы. До клика показываем
   плашку с адресом, кнопки маршрута работают и без карты.
   ================================================================== */
.map-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 10px;
}
.map-actions .btn { margin: 0; }
.map-embed {
  margin-top: 14px; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: #F4F5F7;
}
.map-embed iframe { display: block; width: 100%; height: 420px; border: 0; }
.map-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 100%; min-height: 260px; padding: 24px; cursor: pointer;
  border: 0; background: #F4F5F7; color: var(--ink); font: inherit; text-align: center;
}
.map-stub:hover { background: #ECEEF1; }
.map-stub-title { font-weight: 700; font-size: 17px; color: var(--blue); }
.map-stub-addr { font-size: 15px; }
.map-stub-note { font-size: 13px; color: var(--muted); }
@media (max-width: 700px) {
  .map-embed iframe { height: 320px; }
  .map-actions .btn { flex: 1 1 100%; text-align: center; }
}

/* Кнопка «Открыть в Навигаторе» — только там, где приложение вообще может
   быть установлено. На компьютере ссылка yandexnavi:// ведёт в никуда, а
   мёртвая кнопка рядом с рабочими — хуже её отсутствия. */
.map-nav-app { display: none; }
@media (pointer: coarse) { .map-nav-app { display: inline-block; } }

/* ==================================================================
   Профиль каталога: непрофильные разделы
   ------------------------------------------------------------------
   Отдельный блок внизу бокового меню. Не спрятан и не выделен красным:
   товар мы поставляем, просто каталог открывается не с него.
   ================================================================== */
.cat-extra { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.cat-extra-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 9px 10px; border: 1px dashed var(--line); border-radius: 8px;
  background: transparent; color: var(--muted); font: inherit; font-size: 14px;
  text-align: left; cursor: pointer;
}
.cat-extra-toggle:hover { border-color: var(--blue); color: var(--blue); }
.cat-extra-toggle.on { border-style: solid; color: var(--ink); }
.cat-extra .cat-hint { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.meta-extra { margin-left: 10px; color: var(--muted); }
.linklike {
  padding: 0; border: 0; background: none; color: var(--blue);
  font: inherit; text-decoration: underline; cursor: pointer;
}
.linklike:hover { color: var(--orange); }

/* Фото линейки в карточке СТМ «Сохо» (11.09.2026). Пропорции фиксируем
   через aspect-ratio, чтобы три карточки стояли ровно вне зависимости
   от того, докачалась картинка или нет. */
.line-shot { display: block; width: calc(100% + 2px); margin: -1px -1px 12px;
  aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 12px 12px 0 0; }

/* Фотографии направления: один крупный кадр и два поменьше под ним
   (11.09.2026, направление «Климат»). */
.sol-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sol-shots .sol-shot:first-child { grid-column: 1 / -1; }
.sol-shot { margin: 0; }
.sol-shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
@media (max-width: 720px) { .sol-shots { grid-template-columns: 1fr; } }

/* Фото кейса в карточке проекта (11.09.2026). Кадр во всю ширину
   карточки, пропорции зафиксированы — карточки в сетке не разъезжаются,
   пока картинки догружаются. */
.case-shot { display: block; width: calc(100% + 2px); margin: -1px -1px 14px;
  aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px 12px 0 0; }

/* Фотополоса под текстом направления: кадры в ряд во всю ширину,
   в отличие от .sol-shots в правой колонке (11.09.2026). */
.sol-shots--row { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 22px; }
.sol-shots--row .sol-shot:first-child { grid-column: auto; }

/* Фото товара в каталоге и на карточке приходят на белой подложке, а
   контейнер под ними — в косую светлую полоску (.pph): внутри плитки
   белый прямоугольник (замечание владельца 14.09.2026). Наложение
   multiply делает белое прозрачным, не трогая сам товар. Работает только
   на светлых подложках — если .pph когда-нибудь станет тёмным, правило
   надо снять. */
.pph img { mix-blend-mode: multiply; }

/* Скрыто визуально, доступно роботам и читалкам: caption таблиц. */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Статический список разделов каталога под шапкой страницы. */
.cat-static { margin: 6px 0 18px; }
.cat-static-h { font-size: 15px; font-weight: 700; color: var(--muted2); margin: 0 0 8px; }
.cat-static ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.cat-static li a { display: inline-block; font-size: 13.5px; padding: 4px 10px; border-radius: 999px;
  background: #F2F7FC; color: var(--blue); text-decoration: none; border: 1px solid var(--line); }
.cat-static li a:hover { background: #E3ECF6; }

/* Частые вопросы: карточка «вопрос → ответ» (AEO, 14.09.2026). */
.faq-grid { align-items: start; }
.faq-item h3 { font-size: 17px; margin: 0 0 8px; }
.faq-item p { margin: 0; color: #444; font-size: 14.5px; line-height: 1.55; }

/* Статические страницы каталога (prerender.py, 14.09.2026). */
.crumbs { font-size: 13px; color: var(--muted2); margin: 0 0 10px; }
.crumbs a { color: var(--blue); }
.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 22px; font-size: 14px; }
.pager a { padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--blue); text-decoration: none; }
.pager a[aria-current] { background: var(--blue); color: #fff; border-color: var(--blue); }
.prerender .pg-main img { max-height: 380px; margin: 6px; }
.prerender .card.product { display: flex; flex-direction: column; gap: 8px; }

/* Модальные формы «Вход для партнёров» / «Запросить пакет» (leadModal в main.js, 14.09.2026). */
.lead-modal { border: 0; border-radius: 18px; padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 24px 64px rgba(0,0,0,.28); }
.lead-modal::backdrop { background: rgba(10, 20, 40, .55); }
.lead-modal-form { position: relative; border: 0; border-radius: 0; }
.lead-modal-form h3 { margin: 0 24px 6px 0; font-size: 22px; }
.lead-modal-form .sub { margin: 0 0 16px; }
.lead-modal-form label .opt { font-weight: 400; color: var(--muted2); }
.lead-modal-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f2f4f8; color: var(--muted2); font-size: 20px; line-height: 1; cursor: pointer; }
.lead-modal-x:hover { background: var(--line); color: var(--title); }
.lead-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Сотрудники корпоративного отдела, info.html#team (14.09.2026, без фото). */
.team-card { display: flex; flex-direction: column; gap: 4px; }
.team-name { font-size: 15px; color: var(--title); }
.team-role { font-size: 13px; color: var(--muted2); }
.team-tel { font-weight: 700; margin-top: 6px; }
.team-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.team-actions .btn.sm { padding: 6px 12px; font-size: 13px; }