/* ФЕРМО (fermo.ru) — витрина в бренде «Админки ФЕРМО» (fermo.icubix.ru, макет 26.09.2026).
   Каркас унаследован от темы RackCore (разметка шаблонов та же), идентичность своя:
   серый фон + белые карточки, фирменный синий #003E6B, Manrope + IBM Plex Mono (цифры).
   Шрифты — fonts.css (self-hosted). Палитра совпадает с web/static/fermo-theme.css:
   сотрудник в кабинете и покупатель на витрине видят один бренд. */
:root {
  --fm-icon-face: #E4EFF7;
  --fm-icon-accent: #8ABDE4;
  --fm-icon-side: #C3DBED;
  --bg: #F3F5F9;          /* paper админки */
  --ink: #161616;
  --ink-2: #333333;
  --paper: #ffffff;       /* surface: карточки */
  --line: #DDE2EA;
  --line-2: #E7EBF1;
  --line-3: #EEF1F5;
  --muted: #62676F;       /* 5.2:1 на --bg */
  --muted-2: #62676F;
  --muted-3: #6B7079;
  --accent: #003E6B;      /* фирменный синий ФЕРМО (meta theme-color fermo.ru) */
  --accent-d: #003E6B;    /* текст/ссылки на светлом: 11:1 */
  --accent-bg: #E9EFF5;   /* wash: rgba(0,63,107,.08) на белом */
  --on-accent: #ffffff;
  /* Тёмные панели (hero, корзина, футер) — глубокий фирменный синий, не графит.
     На них фирменный #003E6B не виден, поэтому внутри тёмных контейнеров --accent
     переопределяется на --accent-hi (см. блок «Акцент на тёмном» ниже). */
  --accent-hi: #5AA9FF;   /* 5.4:1 на --dark-2 */
  --dark: #00223C;        /* utility strip / footer */
  --dark-2: #003052;      /* hero / dark panels = --f-brand-dark админки */
  --on-dark: #C9D6E3;
  --on-dark-2: #93A9BF;
  --sans: "Manrope", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --display: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --body-weight: 500;
  --r: 12px;
  --r-sm: 8px;
  --r-lg: 20px;           /* --r-card админки */
  --wrap: 1280px;
  --shadow: 0 1px 2px rgba(29,32,41,.05), 0 14px 34px -16px rgba(0,63,107,.16);  /* --e-1 админки */
  /* совместимость со старыми именами токенов в шаблонах */
  --accent-2: var(--accent);
  --ok: #337617;
  --ok-bg: rgba(51,118,23,.13);
  --bad: #B42318;         /* «так нельзя» (лендинг ТЗ: было/стало), 6.2:1 на белом */
  --bad-bg: #FDF1F0;
  --warn: #7A4F00;        /* «проверит инженер»: 7:1 на --warn-bg */
  --warn-bg: #FFF4DC;
  /* ── Per-tenant стиль иконок (см. _shared/_icons.html) ──
     fermo: спокойный корпоративный — контур цвета текста, акцент фирменным синим,
     чипы на светлой синей подложке (не тёмные техно-плашки RackCore). */
  --icon-color: currentColor;
  --icon-accent: var(--accent);
  --icon-accent-d: var(--accent-d);
  --icon-size: 20px;
  --icon-size-sm: 15px;
  --icon-chip-bg: var(--accent-bg);
  --icon-chip-fg: var(--accent);
  --icon-chip-radius: var(--r);
  --icon-chip-pad: 11px;
}
/* ── Акцент на тёмном ── custom properties наследуются, поэтому одна переназначка
   на контейнере перекрашивает все var(--accent) внутри него. */
.util, .hero, .bhero, .b2b-box, .bcta-body, .ftr, .cookie-bar, .pd-buy, .cart-sum,
.page-hero, .info-band, .page-cta, .svc-sla, .cm-label, .td-band {
  --accent: var(--accent-hi);
  --accent-d: var(--accent-hi);
  --on-accent: #041A2E;
  --icon-chip-bg: rgba(90,169,255,.14);
  --icon-chip-fg: var(--accent-hi);
}
/* Главная кнопка на тёмной панели: белая с фирменным синим текстом (как «Каталог
   оборудования» на fermo.ru). Светлый --accent-hi под белым текстом дал бы контраст 2.6:1. */
:is(.hero, .bhero, .bcta-body, .pd-buy, .cart-sum, .page-hero, .page-cta, .svc-sla) .btn {
  background: #fff; color: #003E6B;
}

@keyframes ledpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; }
body { margin: 0; font-family: var(--sans); font-size: 15px; font-weight: var(--body-weight); line-height: 1.55; color: var(--ink);
  background: var(--bg); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
a { color: inherit; }
input, select, textarea { font-weight: inherit; }
::selection { background: var(--accent); color: #fff; }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); display: inline-block; }
.led-pulse { animation: ledpulse 2.4s infinite; }

/* ── Utility strip ── */
.util { background: var(--dark); color: var(--on-dark); font-size: 12.5px; }
.util-in { display: flex; align-items: center; justify-content: space-between; height: 38px;
  font-family: var(--mono); letter-spacing: .2px; }
.util-tag { color: var(--on-dark-2); }
.util-r { display: flex; align-items: center; gap: 26px; }
.util-r a, .util-r span { color: var(--on-dark); text-decoration: none; cursor: pointer; }
.util-r a:hover { color: var(--accent); }
.util-phone { display: flex; align-items: center; gap: 7px; color: #fff; }

/* ── Header ── */
.hdr { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.hdr-in { display: flex; align-items: center; gap: 28px; height: 78px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.brand-mark { width: 38px; height: 38px; border-radius: 9px; background: var(--ink); display: flex;
  align-items: center; justify-content: center; position: relative; flex: none; }
.brand-mark i { width: 18px; height: 13px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 4px); }
.brand-mark::after { content: ""; position: absolute; top: 6px; right: 6px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 5px var(--accent); }
.brand-name { display: block; font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.5px; color: var(--ink); line-height: 1; }
.brand-sub { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 2.5px; color: var(--muted-2); margin-top: 2px; }
.search { flex: 1; display: flex; height: 46px; border: 1.5px solid var(--accent); border-radius: var(--r); overflow: hidden; }
.search input { flex: 1; min-width: 0; border: none; outline: none; padding: 0 16px; font-size: 14.5px; font-family: var(--sans); background: #fff; color: var(--ink); }
.search button { border: none; background: var(--accent); color: #fff; padding: 0 22px; font-family: var(--sans);
  font-weight: 600; font-size: 14px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.search button:hover { background: #003052; }
/* -- Compact header search ------- */
.hdr-in > .brand { margin-right: auto; }
.fm-search-toggle, .fm-search-close { display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper); color: var(--ink); cursor: pointer; }
.fm-search-toggle:hover, .fm-search-close:hover { border-color: var(--accent); color: var(--accent); }
.fm-search-toggle:focus-visible, .fm-search-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.fm-search-panel { position: fixed; inset: 90px 0 auto; margin: 0 auto; width: min(640px, calc(100% - 32px));
  padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
  box-shadow: 0 18px 50px rgba(0,30,55,.18); }
.fm-search-panel:popover-open { display: flex; align-items: center; gap: 10px; }
.fm-search-panel .search { order: initial; flex: 1; min-width: 0; margin: 0; }
.fm-search-panel .search input { font-size: 16px; }
.fm-search-panel .search button { padding: 0 16px; color: #fff; }
.botnav button.botnav-i { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.hdr-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.hdr-phone { text-align: right; line-height: 1.25; text-decoration: none; }
.hdr-phone .k { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 1.5px; color: var(--muted-2); }
.hdr-phone .v { display: block; font-weight: 600; font-size: 15px; color: var(--ink); }
.cart-link { position: relative; height: 46px; padding: 0 20px; border: none; border-radius: var(--r); background: var(--accent-d);
  color: #fff; font-family: var(--sans); font-weight: 600; font-size: 14px; cursor: pointer; display: inline-flex;
  align-items: center; gap: 9px; text-decoration: none; transition: filter .14s, transform .1s; }
.cart-link:hover { filter: brightness(1.07); }
.cart-link:active { transform: translateY(1px); }
.cart-n { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--on-accent); color: #fff;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); }

/* ── Category bar ── */
.catbar { border-top: 1px solid var(--line-2); position: relative; }
.catbar-in { display: flex; align-items: center; gap: 8px; height: 52px; overflow: hidden; }
.catbar-all { height: 36px; padding: 0 18px; border: none; border-radius: var(--r-sm); background: var(--accent); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center;
  gap: 10px; margin-right: 8px; text-decoration: none; white-space: nowrap; flex: none; }
.catbar-burger { display: flex; flex-direction: column; gap: 3px; }
.catbar-burger i { width: 15px; height: 2px; background: #fff; }
.catbar-burger i:first-child { background: var(--accent); }
.catbar a:not(.catbar-all) { padding: 0 12px; height: 36px; display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 500;
  color: var(--ink-2); text-decoration: none; border-radius: var(--r-sm); white-space: nowrap; }
/* :not(.megadom) — мега-домены каталога тоже <a> в .catbar, но у них своя тёмная active-заливка
   (.megadom.on{background:var(--ink)}); без исключения это правило (специфичнее) красило active-домен
   светлым --line-3, а имя оставалось белым → «серое на сером»/нечитаемо. */
.catbar a:not(.catbar-all):not(.megadom):hover { background: var(--line-3); color: var(--ink); }
.catbar a.on:not(.catbar-all):not(.megadom) { background: var(--line-3); color: var(--ink); }
.catbar-stock { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: 12px; color: var(--accent-d); white-space: nowrap; flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; }
.catbar-stock .led { flex: none; }

/* ===== Дерево категорий в сайдбаре каталога (контекстное по active-пути) ===== */
.cat-tree { margin-bottom: 22px; }
.cat-tnode { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px;
  text-decoration: none; color: var(--ink-2, var(--muted)); font-size: 13.5px; }
.cat-tnode .ct-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line); flex: none; }
.cat-tnode .ct-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-tnode .ct-caret { font-size: 9px; color: var(--muted-2); }
.cat-tnode .ct-cnt { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.cat-tnode.d0 { font-weight: 600; color: var(--ink); }
.cat-tnode.d1 { padding-left: 25px; }
.cat-tnode.d2 { padding-left: 42px; font-size: 13px; }
.cat-tnode:hover { background: var(--line-3); }
.cat-tnode.on { background: #EFFAF2; color: var(--accent-d); font-weight: 600; }
.cat-tnode.on .ct-dot { background: var(--accent); }

/* ── Hero ── */
.hero { background: radial-gradient(ellipse at 82% 46%, rgba(56,175,239,.3), transparent 58%),
    linear-gradient(112deg, #04213C 4%, #083E6B 52%, #126394 100%);
  color: #fff; position: relative; overflow: hidden; }
.hero::before { pointer-events: none; }
.hero::before { content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(100deg, transparent 0, transparent 42%, #000 78%);
  mask-image: linear-gradient(100deg, transparent 0, transparent 42%, #000 78%); }
.hero-in { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; padding: 64px 32px 70px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px;
  color: var(--accent); border: 1px solid rgba(90,169,255,.35); border-radius: 999px; padding: 7px 14px; margin-bottom: 26px; }
.eyebrow .led { width: 6px; height: 6px; box-shadow: 0 0 6px var(--accent); }
.hero h1 { font-family: var(--display); font-weight: 700; font-size: 54px; line-height: 1.05; letter-spacing: -1.5px; margin: 0 0 22px; }
.hero p { font-size: 18px; line-height: 1.55; color: #B3C4D6; max-width: 480px; margin: 0 0 34px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 26px; }
.hero-stat b { display: block; font-family: var(--display); font-weight: 700; font-size: 27px; color: #fff; white-space: nowrap; }
.hero-stat span { font-size: 12.5px; color: var(--on-dark-2); margin-top: 4px; line-height: 1.3; display: block; }
/* rack visual */
/* Hero-визуал — серверная стойка (Gemini), вырезана rembg на прозрачном фоне (вертикальная) */
.hero-rack { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,.38)); }

/* ── Buttons ── */
.btn { height: 52px; padding: 0 28px; border: none; border-radius: 11px; background: var(--accent-d); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: 15.5px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: filter .14s, transform .1s; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-ghost-d { height: 52px; padding: 0 28px; border: 1px solid rgba(255,255,255,.22); border-radius: 11px; background: transparent;
  color: #fff; font-family: var(--sans); font-weight: 600; font-size: 15.5px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .14s, background .14s; }
.btn-ghost-d:hover { border-color: var(--accent); background: rgba(90,169,255,.08); }
.btn-lg { height: 52px; }
.btn-sm { height: 40px; padding: 0 16px; border: none; border-radius: var(--r-sm); background: var(--accent-d); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px;
  border: 1.5px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink);
  font-weight: 600; text-decoration: none; cursor: pointer; }
.btn-ghost:hover { border-color: var(--ink); }
.btn-block { width: 100%; }

/* ── Trust strip ── */
.trust { background: var(--paper); border-bottom: 1px solid var(--line); }
.trust-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-cell { padding: 28px 26px 28px 0; display: flex; gap: 15px; border-right: 1px solid var(--line-2); }
.trust-cell:last-child { border-right: 0; padding-right: 0; }
/* .trust-ic — теперь голый flex-holder; вид чипа даёт .ic-chip (тёмная техно-подложка) */
.trust-ic { flex: none; display: flex; align-items: center; justify-content: center; }
.trust-ic .ic-chip { --icon-size: 22px; }
/* fallback, если чип не применён (напр. в другой теме без --icon-chip-*) */
.trust-ic > .ic:not(.ic-chip), .trust-ic > svg:not(.ic-chip) {
  width: 42px; height: 42px; padding: 10px; box-sizing: content-box; border-radius: var(--r);
  background: var(--accent-bg); color: var(--accent-d); }
.trust b { font-weight: 600; font-size: 15px; color: var(--ink); display: block; margin-bottom: 4px; }
.trust span { font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ── Section headers ── */
.sec { max-width: var(--wrap); margin: 0 auto; padding: 62px 32px 10px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 30px; }
.eyebrow-l { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--accent-d); margin-bottom: 10px; }  /* a11y: было var(--accent) #15c25e (2.13:1) */
.sec-h { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -1px; margin: 0; }
.sec-all { font-weight: 600; font-size: 14.5px; color: var(--accent-d); cursor: pointer; text-decoration: none; white-space: nowrap; }

/* ── Category grid (rack-graphic tiles) ── */
/* Слайдер категорий: один ряд с горизонтальным скроллом/свайпом (CSS-only, scroll-snap; без JS).
   Карточки фикс-ширины → не сжимаются, следующая «выглядывает» = подсказка, что можно листать.
   overflow-y скрыт (x-scroll его форсит) → нижний padding под hover-lift+тень, чтобы не срезалась. */
.cats { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  padding: 4px 2px 18px; margin: 0 -2px; scroll-padding-left: 2px; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.cats::-webkit-scrollbar { height: 6px; }
.cats::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.cat { flex: 0 0 258px; scroll-snap-align: start; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px; text-decoration: none; color: var(--ink); cursor: pointer;
  display: flex; flex-direction: column; transition: border-color .15s, transform .15s, box-shadow .15s; }
.cat:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow); }
.cat-vis { height: 96px; border-radius: var(--r); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: linear-gradient(135deg,#0A3D63,#001B31); }
.cat-vis .leds { display: flex; flex-direction: column; gap: 5px; }
.cat-vis .leds i { width: 7px; height: 7px; border-radius: 50%; background: #2C5B80; }
.cat-vis .leds i:first-child { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.cat-vis .strip { flex: 1; height: 42px; border-radius: 4px; opacity: .92; background: repeating-linear-gradient(90deg,#1D4B70 0 3px,#00263F 3px 7px); }
.cat-vis .tag { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: #5B616B; writing-mode: vertical-rl; }
/* Карточка категории с фирменной иллюстрацией (store_category_images, Gemini+rembg): светлый тайл —
   прозрачные студийные рендеры сделаны на белом, на тёмном градиенте утонули бы. Картинка по центру. */
.cat-vis.has-img { background: radial-gradient(120% 120% at 75% 22%, #FCFEFD 0%, #E9F1EC 100%);
  justify-content: center; padding: 4px 12px; overflow: hidden; position: relative; }
.cat-vis .cat-img { max-height: 88px; max-width: 84%; object-fit: contain; }
.cat-vis.has-img .tag { position: absolute; top: 8px; right: 9px; }
.cat-name { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -.4px; margin-bottom: 6px; }
.cat-desc { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.cat-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.cat-cnt { font-family: var(--mono); font-size: 12px; color: var(--muted-2); }
.cat-arrow { color: var(--accent); font-size: 18px; }

/* ── Product card (featured + catalog) ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pcard { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none;
  color: inherit; display: flex; flex-direction: column; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pcard:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.pcard-img { position: relative; height: 160px; background: #fff; display: flex; align-items: center; justify-content: center;
  padding: 16px; border-bottom: 1px solid var(--line); }
.pcard-img img { max-width: 100%; max-height: 128px; object-fit: contain; mix-blend-mode: multiply; }
.pcard-noimg { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.pcard-badge { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--accent); color: var(--on-accent); padding: 4px 9px; border-radius: 5px; }
.pcard-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.pcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.pcard-brand { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
.pcard-rating { font-size: 12px; color: var(--accent-d); font-weight: 600; }
.pcard-title { font-weight: 600; font-size: 15px; line-height: 1.35; margin-bottom: 12px; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-spec { font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.6; margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pcard-price { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.5px; color: var(--ink); min-width: 0; }
.pcard-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent-d); white-space: nowrap; }
.pcard-stock i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.pcard-stock.out { color: var(--muted-2); }
.pcard-stock.out i { background: var(--muted-3); }
.pcard-stock.cb-own { font-weight: 600; }

/* stretched-link: пустой <a> растянут на всю карточку (клик → товар); кнопки/КП/fav поверх
   (z-index>1). Отдельный оверлей (не заголовок), т.к. .pcard-title = line-clamp (overflow:hidden). */
.pcard-link { position: absolute; inset: 0; z-index: 1; }
/* Название товара внутри ссылки-оверлея: роботы получают анкор-текст карточки (пустой <a aria-label>
   анкора не даёт — аудит SEO 06.10.2026, G-93), глазами не видно — заголовок карточки рисуется ниже. */
.pcard-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pcard-actions { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.pcard-cart {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 10px 14px; border: none; border-radius: 9px; text-decoration: none;
  background: var(--accent-d); color: #fff; cursor: pointer; font-weight: 600; font-size: 14px;
  transition: background .15s;
}
.pcard-cart:hover { background: var(--accent-d); }
.pcard-actions-sec { display: flex; gap: 8px; }
.pcard-sec-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--paper); color: var(--accent-d); cursor: pointer; text-decoration: none;
  font-weight: 500; font-size: 13px; white-space: nowrap; transition: background .15s, border-color .15s;
}
.pcard-sec-btn:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: var(--accent); }
.pcard-cart .ic-sm, .pcard-sec-btn .ic-sm { flex: none; }

/* ── Favorites: heart overlay on card + favorites page ── */
.pcard-wrap { position: relative; display: flex; min-width: 0; }
.pcard-wrap .pcard { flex: 1; }
.pcard-fav { position: absolute; top: 11px; right: 11px; z-index: 2; width: 40px; height: 40px; border: none;
  border-radius: 9px; background: rgba(20,22,26,.55); color: #fff; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  transition: background .14s, color .14s, transform .1s; }
.pcard-fav:hover { background: rgba(20,22,26,.78); }
.pcard-fav:active { transform: scale(.92); }
.pcard-fav .ic-sm { width: 17px; height: 17px; vertical-align: 0; }
.pcard-fav.on { background: var(--accent); color: var(--on-accent); }
.pcard-fav.on:hover { filter: brightness(1.07); }

.fav-sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.fav-sub b { color: var(--ink); font-weight: 600; }
.fav-empty { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 64px 32px; text-align: center; margin: 8px 0 40px; }
.fav-empty-ic { width: 64px; height: 64px; border-radius: 16px; background: var(--bg); color: var(--muted-2);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.fav-empty-ic .ic { width: 30px; height: 30px; }
.fav-empty-h { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.5px; margin-bottom: 8px; }
.fav-empty p { font-size: 14.5px; color: var(--muted); max-width: 420px; margin: 0 auto 24px; line-height: 1.55; }

/* ── B2B band ── */
.b2b { max-width: var(--wrap); margin: 0 auto; padding: 54px 32px 10px; }
.b2b-box { background: var(--dark-2); border-radius: 18px; padding: 40px; position: relative; overflow: hidden; }
.b2b-box::before { content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.b2b-in { position: relative; }
.b2b-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 30px; }
.b2b-head h2 { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -1px; margin: 0; color: #fff; }
.b2b-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.10); border-radius: 12px; overflow: hidden; }
.b2b-cell { background: #00263F; padding: 26px 22px; }
.b2b-tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 1px; color: var(--accent);
  border: 1px solid rgba(90,169,255,.32); border-radius: 6px; padding: 4px 9px; margin-bottom: 16px; }
.b2b-cell h3 { font-family: var(--display); font-weight: 600; font-size: 17px; color: #fff; letter-spacing: -.3px; margin: 0 0 9px; }
.b2b-cell p { font-size: 13px; line-height: 1.5; color: #A3B6CA; margin: 0; }

/* ── Brands strip ── */
.brands { max-width: var(--wrap); margin: 0 auto; padding: 48px 32px 70px; }
.brands-box { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 34px 40px; }
.brands-cap { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--muted-2); text-align: center; margin-bottom: 24px; }
.brands-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.brands-row a, .brands-row span { font-family: var(--display); font-weight: 600; font-size: 22px; color: #6E727A; letter-spacing: -.5px; text-decoration: none; }  /* a11y: было #C2C5CB (1.72:1) → 4.5:1 */
.brands-row a:hover { color: var(--ink); }

/* ── Breadcrumb / page title ── */
.crumbs { font-family: var(--mono); font-size: 12.5px; color: var(--muted-2); margin: 24px 0 18px; }
.crumbs a { color: var(--muted); text-decoration: underline; }  /* a11y link-in-text: ссылка отличается подчёркиванием, не только цветом */
.crumbs a:hover { color: var(--accent-d); }
.h1 { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -1px; margin: 0 0 6px;
  /* «Телекоммуникационные» на 375 px длиннее строки — переносим по слогам, а не вылезаем за экран */
  overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 600px) { .h1 { font-size: 28px; } }
.sec-row { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 22px; }
.sec-right { display: flex; align-items: center; gap: 16px; }
.empty { padding: 50px 0; color: var(--muted); }
.empty a { color: var(--accent-d); }

/* ── Catalog: filters + sort + pager ── */
.cat-layout { display: grid; grid-template-columns: 268px 1fr; gap: 28px; align-items: start; margin-bottom: 40px; }
/* Контролы мобильного drawer'а фильтров скрыты на десктопе (включаются в @media 980). */
.cat-drawer-cb, .cat-drawer-backdrop, .cat-drawer-x, .cat-filters-btn { display: none; }
.filters { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px 22px 22px; position: sticky; top: 142px; }
.flt-title { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 14px; border-bottom: 1px solid var(--line-2);
  font-family: var(--display); font-weight: 600; font-size: 16px; }
.flt-group { padding: 18px 0; border-bottom: 1px solid var(--line-2); }
.flt-h { font-weight: 600; font-size: 13px; letter-spacing: .3px; color: var(--ink); margin-bottom: 13px; }
.flt-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); padding: 4px 0; cursor: pointer; }
.flt-price { display: flex; gap: 8px; }
.flt-price input, .flt-sel { width: 100%; height: 38px; padding: 0 11px; border: 1px solid #DDE2EA; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 13px; background: #fff; color: var(--ink); }
.flt-reset { display: block; text-align: center; margin-top: 12px; color: var(--accent-d); font-size: 12.5px; text-decoration: none; cursor: pointer; }
.sortbar { display: flex; align-items: center; justify-content: space-between; background: var(--paper); border: 1px solid var(--line);
  border-radius: 11px; padding: 12px 18px; margin-bottom: 20px; }
.sortf { margin: 0; display: flex; gap: 8px; align-items: center; }
.flt-sel-sort { height: 36px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 12px; font: inherit; background: #fff; }
.sort-cnt { font-family: var(--mono); font-size: 12.5px; color: var(--muted-2); }
/* счётчик под h1 + сорт-пилюли (как в прототипе) */
.cat-count { font-size: 14px; color: var(--muted); margin: 0 0 26px; }
.cat-count b { color: var(--ink); font-weight: 600; }
.sort-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.sort-pill { padding: 7px 14px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; cursor: pointer; }
.sort-pill:hover { background: var(--line-3); color: var(--ink); }
.sort-pill.on { background: var(--accent); color: #fff; }
/* Мобила: пилюли ломались на 2 строки («Дороже» повисала отдельно), счётчик жался справа
   в две строки — пилюли в скролл-строку, счётчик своей строкой. */
@media (max-width: 600px) {
  .sortbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .sort-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sort-pill { white-space: nowrap; flex: none; }
}
/* Чипы «тип сервера» (узел Серверы): фильтр по форм-фактору/GPU. Активный — фирменный глубокий зелёный. */
.srv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.srv-chip { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-weight: 600; font-size: 13.5px;
  text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.srv-chip:hover { border-color: var(--ink); }
.srv-chip.on { background: var(--accent-d); border-color: var(--accent-d); color: #fff; }
.srv-cnt { font-family: var(--mono); font-size: 11px; opacity: .65; }
.srv-chip.on .srv-cnt { opacity: .85; }
/* toggle «Только в наличии» */
.flt-toggle { display: flex; align-items: center; gap: 11px; cursor: pointer; font-size: 14px; color: var(--ink); }
.flt-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.flt-toggle .tg { width: 40px; height: 23px; flex: none; border-radius: 12px; background: #D6D6D0; position: relative; transition: background .15s; }
.flt-toggle .tg::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
.flt-toggle input:checked + .tg { background: var(--accent); }
.flt-toggle input:checked + .tg::after { left: 19.5px; }
.flt-toggle input:focus-visible + .tg { outline: 2px solid var(--accent-d); outline-offset: 2px; }
.flt-reset-top { font-size: 12.5px; color: var(--accent-d); text-decoration: none; cursor: pointer; }
.flt-reset-top:hover { text-decoration: underline; }
.flt-group.cat-tree { margin-bottom: 0; }
.flt-group-last { border-bottom: 0; padding-bottom: 4px; }
.flt-apply { margin-top: 12px; }
/* Производитель: чекбокс-список (single-select ссылками, состояние в URL) */
.flt-brand { display: flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; cursor: pointer; }
.flt-brand-name { flex: 1; min-width: 0; font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flt-brand-cnt { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); }
.flt-box { width: 16px; height: 16px; flex: none; border-radius: 5px; border: 1.5px solid #C8C8C0; background: #fff;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; line-height: 1; transition: background .12s, border-color .12s; }
.flt-brand:hover .flt-brand-name { color: var(--ink); }
.flt-brand:hover .flt-box { border-color: var(--accent); }
.flt-brand.on .flt-box { background: var(--accent); border-color: var(--accent); }
.flt-brand.on .flt-brand-name { color: var(--ink); font-weight: 600; }
/* Характеристики (icecat-фасеты): чекбокс-список multi-select, состояние в URL (как Производитель) */
.flt-spec { display: flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; cursor: pointer; }
.flt-spec-name { flex: 1; min-width: 0; font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flt-spec-cnt { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); }
.flt-spec:hover .flt-spec-name { color: var(--ink); }
.flt-spec:hover .flt-box { border-color: var(--accent); }
.flt-spec.on .flt-box { background: var(--accent); border-color: var(--accent); }
.flt-spec.on .flt-spec-name { color: var(--ink); font-weight: 600; }
.subcats { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 22px; }
.subcat { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; text-decoration: none; color: var(--ink); font-size: 14px; }
.subcat:hover { border-color: var(--ink); }
.subcat span { font-family: var(--mono); color: var(--muted-2); font-size: 12px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 34px 0 56px; }
.pager a, .pager span.pg { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 9px; border: 1px solid #DDE2EA; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 500; font-size: 14px; color: var(--ink-2); text-decoration: none; }
.pager a:hover { border-color: var(--ink); }
.pager .pg.gap { border-color: transparent; background: none; min-width: 20px; padding: 0; }

/* ── Product page ── */
.pd-top { display: grid; grid-template-columns: 1.05fr 1fr; gap: 42px; align-items: start; margin: 8px 0 48px; }
.pd-img { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); height: 420px; display: flex; align-items: center; justify-content: center; padding: 24px; }
/* блок топ-характеристик у цены (как в прототипе) */
.pd-keyspecs { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px 20px; margin-bottom: 22px; }
.pd-ks { display: flex; align-items: center; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.pd-ks:last-child { border-bottom: 0; }
.pd-ks .led { width: 6px; height: 6px; box-shadow: none; flex: none; }
.pd-ks b { font-weight: 600; }
.pd-img img { max-width: 100%; max-height: 372px; object-fit: contain; mix-blend-mode: multiply; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pd-thumb { width: 64px; height: 64px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pd-thumb.on { border-color: var(--accent); }
.pd-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pd-title { font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1.2; letter-spacing: -.6px; margin: 0 0 14px; }
/* Названия товаров дистрибьюторов — строка характеристик на 150+ символов: на телефоне 28px давал
   10 строк заголовка до цены. Мельче и с переносом длинных «WUXGA(1920x1200)IPS» без вылета. */
@media (max-width: 600px) { .pd-title { font-size: 20px; letter-spacing: -.3px; overflow-wrap: anywhere; } }
.pd-meta { display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 14px; margin-bottom: 22px; }
.pd-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.pd-price { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -1px; }
.pd-stock { margin: 10px 0 18px; }
.pd-note { color: var(--muted); font-size: 13px; margin: 16px 0 0; }
.pd-supply { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--ink-2); }
.pd-supply b { color: var(--ink); font-weight: 600; }
.specs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; color: var(--muted-2); }
.specs-count { letter-spacing: 0; color: var(--muted); white-space: nowrap; }
.specs { columns: 2; column-gap: 28px; margin-bottom: 56px; }
.spec-group { break-inside: avoid; margin-bottom: 18px; }
.spec-gh { font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink); font-family: var(--display); }
.spec-tbl { width: 100%; border-collapse: collapse; }
.spec-tbl td { padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; vertical-align: top; }
.spec-k { color: var(--muted); width: 52%; padding-right: 12px; }
.spec-v { color: var(--ink); font-family: var(--mono); }

/* ── Chips / status ── */
.chip { font-family: var(--mono); font-size: 11px; padding: 3px 9px; border-radius: 5px; font-weight: 600; white-space: nowrap; }
.chip.in { background: var(--accent-bg); color: var(--accent-d); }
.chip.out { background: var(--line-3); color: var(--muted); }

/* ── Cart / checkout / forms ── */
.cart { width: 100%; border-collapse: collapse; margin: 18px 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cart td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.cart tr:last-child td { border-bottom: 0; }
.ci-title a { color: var(--ink); text-decoration: none; font-weight: 600; }
.ci-price, .ci-sum { font-family: var(--mono); white-space: nowrap; font-weight: 600; }
.qtyf { display: flex; gap: 6px; }
.qtyf input { width: 64px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; background: #fff; }
.cart-foot { display: flex; align-items: center; justify-content: flex-end; gap: 22px; margin: 18px 0 48px; }
.total { font-family: var(--mono); font-weight: 600; font-size: 19px; }
.sm { font-size: 13px; }
.co-form { display: flex; flex-direction: column; gap: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.co-form label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: var(--muted); }
.co-form input, .co-form textarea, .quote-form input, .quote-form textarea { padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; background: #fff; color: var(--ink); }
.co-form input:focus, .co-form textarea:focus { border-color: var(--accent); outline: none; }
.co-inn { display: flex; gap: 8px; }
.co-inn input { flex: 1; }
.co-msg { font-size: 14px; }
.co-msg.ok { color: var(--accent-d); }
.co-msg.err { color: #b91c1c; }
.co-sum { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.co-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.co-total { display: flex; justify-content: space-between; padding-top: 14px; font-size: 19px; font-family: var(--mono); font-weight: 600; }
.ship-row { display: flex; gap: 8px; }
.ship-row input { flex: 1; }
.ship-opts:empty { display: none; }
/* Живой автокомплит города (СДЭК suggest): дропдаун ПОД полем — стандартно, без нативного datalist. */
.ac-wrap { position: relative; }
.ac-wrap > input { width: 100%; }
.ac-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; margin: 0;
  padding: 4px; list-style: none; max-height: 288px; overflow-y: auto; text-align: left;
  background: var(--color-surface, #fff); color: var(--color-text, #0f172a);
  border: 1px solid var(--border-subtle, rgba(15,23,42,.14)); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(15,23,42,.16); }
.ac-list[hidden] { display: none; }
.ac-item { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 8px;
  cursor: pointer; font-size: 14px; line-height: 1.25; }
.ac-item:hover { background: var(--color-surface-2, rgba(15,23,42,.06)); }
.ac-pin { width: 15px; height: 15px; flex: none; color: var(--color-text-secondary, #64748b); opacity: .6; }
.ac-city { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-reg { margin-left: auto; padding-left: 8px; flex: none; font-size: 12px;
  color: var(--color-text-secondary, #64748b); white-space: nowrap; }
.ship-list { display: flex; flex-direction: column; gap: 8px; }
.ship-opt { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.ship-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.ship-name { flex: 1; font-size: 14px; }
.ship-cost { font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.pay-pick { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.pay-h { font-size: 14px; color: var(--muted); }
.pay-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; }

/* ── Заявка «Запросить цену» ── */
.quote { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.quote summary { cursor: pointer; font-weight: 600; color: var(--accent-d); display: flex; align-items: center; gap: 7px; list-style: none; }
.quote summary::-webkit-details-marker { display: none; }
.quote-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.quote-done { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; }
.quote-done.ok { background: var(--accent-bg); color: var(--accent-d); }
.quote-done.err { background: #fef2f2; color: #b91c1c; }

/* ===== Модалка запроса КП (CSS :target, без JS) ===== */
.btn-quote { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 12px; padding: 11px 16px; border: 1.5px solid var(--ink); border-radius: var(--r-sm);
  background: #fff; color: var(--ink); font-weight: 600; font-size: 14px; text-decoration: none;
  cursor: pointer; transition: background .15s, color .15s; }
.btn-quote:hover { background: var(--accent); color: #fff; }
.kp-modal { display: none; position: fixed; inset: 0; z-index: 200; align-items: center;
  justify-content: center; padding: 20px; }
.kp-modal:target { display: flex; }
.kp-backdrop { position: absolute; inset: 0; background: rgba(15, 17, 21, .55); }
.kp-box { position: relative; z-index: 1; background: #fff; border-radius: 16px; max-width: 460px;
  width: 100%; padding: 26px 26px 24px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5); }
.kp-x { position: absolute; top: 14px; right: 16px; color: var(--muted-2); text-decoration: none;
  font-size: 17px; line-height: 1; }
.kp-x:hover { color: var(--ink); }
.kp-title { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.3px;
  color: var(--ink); padding-right: 24px; }
.kp-prod { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.35; }
.kp-box .quote-form { margin-top: 16px; }

/* ── Order timeline / tracking ── */
.otl { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 14px 0 10px; counter-reset: s; }
.otl li { position: relative; padding: 8px 14px 8px 34px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; color: var(--muted); counter-increment: s; }
.otl li::before { content: counter(s); position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--line); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.otl li.done { color: var(--ink-2); border-color: var(--accent); }
.otl li.done::before { content: "✓"; background: var(--accent-d); }
.otl li.act { color: var(--ink); border-color: var(--accent); font-weight: 600; }
.otl li.act::before { background: var(--accent); }
.track a { color: var(--accent-d); text-decoration: none; }

/* ── Иконки (per-tenant стиль через --icon-* токены темы) ── */
.ic  { width: var(--icon-size, 20px); height: var(--icon-size, 20px);
       color: var(--icon-color, currentColor); display: inline-block; vertical-align: -4px; flex: none;
       transition: color .14s ease; }
.ic-sm { width: var(--icon-size-sm, 15px); height: var(--icon-size-sm, 15px);
         color: var(--icon-color, currentColor); vertical-align: -2px; flex: none;
         transition: color .14s ease; }
/* .ic-acc — акцентная иконка темы (интерактив / ключевые указатели) */
.ic-acc { color: var(--icon-accent, var(--accent)); }
/* .ic-chip — иконка в подложке-чипе под тёмный техно-стиль темы */
.ic-chip { box-sizing: content-box; padding: var(--icon-chip-pad, 11px);
           background: var(--icon-chip-bg, var(--dark-2)); color: var(--icon-chip-fg, var(--accent));
           border-radius: var(--icon-chip-radius, var(--r)); vertical-align: middle; }
.flt-title .ic, .pd-supply .ic { color: var(--accent-d); }

/* ── Кабинет / авторизация / контент ── */
/* Вход/сброс: поля по краям — в медиа-правилах вместе с .wrap (без них на телефоне заголовок
   и форма прилипали к краю экрана, стенд 27.09). */
.auth-box { max-width: 420px; margin: 40px auto 60px; }
.auth-err { background: #fdeaea; color: #b5240f; padding: 11px 14px; border-radius: var(--r-sm); font-size: 14px; }
.acc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 24px; }
.page { max-width: 820px; padding-bottom: 56px; }
.prose { color: var(--ink-2); font-size: 15px; }
.prose h2 { font-family: var(--display); font-size: 19px; color: var(--ink); margin: 28px 0 10px; letter-spacing: -.3px; }
.prose a { color: var(--accent-d); }
.lead { color: var(--ink-2); max-width: 60ch; margin: 6px 0 22px; }
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 40px; }
.brand-tile { display: flex; flex-direction: column; gap: 4px; padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; transition: border-color .15s; }
.brand-tile:hover { border-color: var(--ink); }
.brand-tile .brand-name { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 16px; }
.brand-meta { font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* ===== Бренды: лендинг (карточки бренд+категории) + страница бренда ===== */
.h2 { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -.5px; color: var(--ink); margin: 0; }
/* — Бренды: тёмный hero (паттерн .hero: grid + green glow) — */
.bhero { background: var(--dark-2); color: #fff; position: relative; overflow: hidden; margin-bottom: 8px; }
.bhero::before { content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
  mask-image: linear-gradient(180deg, #000, transparent 80%); }
.bhero::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 460px at 82% 12%, rgba(90,169,255,.14), transparent 60%); }
.bhero-in { position: relative; padding: 30px 32px 56px; }
.bhero-crumbs { font-family: var(--mono); font-size: 12.5px; color: #93A9BF; margin-bottom: 26px; }
.bhero-crumbs a { color: #B3C4D6; text-decoration: none; }
.bhero-crumbs a:hover { color: #fff; }
.bhero-crumbs span { margin: 0 8px; }
.bhero-crumbs .cur { color: #fff; margin: 0; }
.bhero-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--accent); margin-bottom: 14px; }
.bhero-h1 { font-family: var(--display); font-weight: 700; font-size: 46px; line-height: 1.08; letter-spacing: -1.4px;
  margin: 0 0 20px; max-width: 820px; }
.bhero-lead { font-size: 17px; line-height: 1.6; color: #B3C4D6; max-width: 660px; margin: 0 0 36px; }
.bhero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 26px; max-width: 820px; }
.bhero-stat b { display: block; font-family: var(--display); font-size: 27px; font-weight: 700; color: #fff; white-space: nowrap; }
.bhero-stat span { font-size: 12.5px; color: #93A9BF; margin-top: 4px; }
.bcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 44px; }
.bcard { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.bcard:hover { border-color: var(--ink); box-shadow: 0 14px 30px -18px rgba(20, 22, 26, .4); transform: translateY(-2px); }
.bcard-top { display: flex; align-items: center; justify-content: space-between; }
.bcard-wm { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ink); letter-spacing: -.3px; }
.bcard-instock { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--accent-d); }
.bcard-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.bcard-cat { font-size: 11.5px; color: var(--ink-2); background: var(--line-3); border-radius: 999px; padding: 3px 9px; }
.bcard-cat b { color: var(--muted-2); font-weight: 600; }
.bcard-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 4px; }
.bcard-cnt { font-size: 13px; color: var(--muted); }
.bcard-go { font-size: 13px; font-weight: 600; color: var(--accent-d); }
/* — Бренды: assurance-band (светлая карточка, 3 колонки с зелёными иконками) — */
.bassure { display: grid; grid-template-columns: repeat(3, 1fr); margin: 42px 0 0;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0 36px; }
.bassure-cell { display: flex; gap: 15px; padding: 28px 28px 28px 0; border-right: 1px solid #EEF1F5; }
.bassure-cell:nth-child(2) { padding: 28px; }
.bassure-cell:last-child { padding: 28px 0 28px 28px; border-right: none; }
.bassure-ic { width: 42px; height: 42px; flex: none; border-radius: 10px; background: var(--accent-bg); color: var(--accent-d);
  display: flex; align-items: center; justify-content: center; }
.bassure-ic svg { width: 21px; height: 21px; }
.bassure-tx b { display: block; color: var(--ink); font-weight: 600; font-size: 15.5px; margin-bottom: 5px; }
.bassure-tx span { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* — Бренды: CTA-band (тёмный блок, grid + green glow) — */
.bcta { padding: 54px 0 70px; }
.bcta-body { position: relative; overflow: hidden; background: var(--dark-2); border-radius: 18px; padding: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.bcta-body::before { content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%); }
.bcta-body::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 360px at 88% 20%, rgba(90,169,255,.16), transparent 60%); }
.bcta-copy, .bcta-actions { position: relative; }
.bcta-copy { max-width: 620px; }
.bcta-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--accent); margin-bottom: 12px; }
.bcta-h2 { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -1px; margin: 0 0 10px; color: #fff; }
.bcta-lead { font-size: 15px; line-height: 1.6; color: #B3C4D6; margin: 0; }
.bcta-actions { display: flex; gap: 12px; flex-shrink: 0; }
.brand-single { display: flex; gap: 24px; align-items: center; padding: 22px 0 10px; }
.bs-wm { font-family: var(--display); font-weight: 700; font-size: 30px; color: #fff; background: var(--ink);
  border-radius: var(--r); padding: 22px 26px; white-space: nowrap; flex: none; }
.bs-info .h1 { margin: 0 0 6px; }

/* — Страница бренда: hero (плитка-wordmark + контент) — */
.bsh-grid { display: grid; grid-template-columns: 230px 1fr; gap: 40px; align-items: center; }
.bsh-tile { height: 150px; border-radius: 16px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; padding: 0 18px; }
.bsh-tile span { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -.6px;
  color: #fff; text-align: center; line-height: 1.1; }
.bsh-h1 { font-size: 40px; margin: 0 0 14px; }
.bsh-lead { margin: 0 0 26px; }
.bsh-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.bsh-actions .btn, .bsh-actions .btn-ghost-d { height: 50px; }
.bsh-stats { margin-top: 38px; max-width: none; }

/* — Страница бренда: продуктовые линейки (топ-категории) — */
.blines { padding: 54px 0 6px; }
.blines-head { margin-bottom: 24px; }
.blines-sub { font-size: 14.5px; color: var(--muted); margin: 6px 0 0; }
.blines-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bline { display: flex; align-items: flex-start; gap: 13px; padding: 20px 22px; background: #fff;
  border: 1px solid var(--line); border-radius: 13px; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.bline:hover { border-color: var(--ink); box-shadow: 0 14px 30px -18px rgba(20,22,26,.4); transform: translateY(-2px); }
.bline-ic { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--accent-bg); color: var(--accent-d);
  display: flex; align-items: center; justify-content: center; }
.bline-ic svg { width: 16px; height: 16px; }
.bline-tx { font-size: 14.5px; line-height: 1.5; color: var(--ink); padding-top: 4px; }
.bline-tx b { color: var(--muted-2); font-weight: 600; }
@media (max-width: 860px) {
  .bcards { grid-template-columns: repeat(2, 1fr); }
  .bhero-h1 { font-size: 36px; }
  .bhero-stats { grid-template-columns: repeat(2, 1fr); }
  .bassure { grid-template-columns: 1fr; padding: 0 28px; }
  .bassure-cell, .bassure-cell:nth-child(2), .bassure-cell:last-child {
    padding: 26px 0; border-right: none; border-bottom: 1px solid #EEF1F5; }
  .bassure-cell:last-child { border-bottom: none; }
  .bcta-body { padding: 34px 26px; }
  .bcta-actions { width: 100%; }
  .bcta-actions .btn, .bcta-actions .btn-ghost-d { flex: 1; }
  .brand-single { flex-direction: column; align-items: flex-start; gap: 14px; }
  .bsh-grid { grid-template-columns: 1fr; gap: 22px; }
  .bsh-tile { height: 110px; }
  .bsh-h1 { font-size: 34px; }
  .blines-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .bcards { grid-template-columns: 1fr; } .bhero-stats { grid-template-columns: 1fr; gap: 18px; }
  .blines-grid { grid-template-columns: 1fr; } }

/* ── Footer ── */
.ftr { background: var(--dark); color: #A3B6CA; margin-top: 64px; }
.ftr-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding: 54px 32px 30px; max-width: var(--wrap); margin: 0 auto; }
.ftr-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.ftr-mark { width: 34px; height: 34px; border-radius: 8px; background: #0A3D63; display: flex; align-items: center; justify-content: center; }
.ftr-mark i { width: 16px; height: 11px; border-radius: 1px; background: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 4px); }
.ftr-bn { font-family: var(--display); font-weight: 700; font-size: 19px; color: #fff; letter-spacing: -.5px; }
.ftr-desc { font-size: 13.5px; line-height: 1.6; color: #8199B1; max-width: 280px; margin: 0 0 18px; }
.ftr-contact { font-family: var(--mono); font-size: 13px; color: #fff; text-decoration: none; display: block; }
.ftr-contact.sub { font-size: 12.5px; color: #8199B1; margin-top: 4px; }
.ftr-soc { display: flex; gap: 10px; margin-top: 16px; }
.ftr-soc a { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid #1D4B70; border-radius: 9px;
  background: #00263F; color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; transition: border-color .14s, background .14s; }
.ftr-soc a:hover { border-color: var(--accent); background: #0A3D63; }
.ftr-h { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; color: #fff; margin-bottom: 16px; }
.ftr-col a { display: block; font-size: 13.5px; color: #A3B6CA; padding: 6px 0; text-decoration: none; }
.ftr-col a:hover { color: #fff; }
.ftr-bottom { display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; max-width: var(--wrap); margin: 0 auto;
  border-top: 1px solid #1E222A; font-size: 12.5px; color: #8B909A; flex-wrap: wrap; gap: 8px; }  /* a11y: было #6B7079 (3.79:1 на тёмном) → 4.5:1 */
.ftr-bottom .mono { font-family: var(--mono); }

/* ── Cookie ── */
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; display: flex; gap: 16px; align-items: center;
  justify-content: center; flex-wrap: wrap; background: var(--dark-2); color: #e2e8f0; border: 1px solid #1D4B70; padding: 14px 20px;
  border-radius: var(--r); font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.cookie-bar[hidden] { display: none; }
.cookie-bar a { color: var(--accent); }
.cookie-bar button { height: 40px; padding: 0 20px; border: 0; border-radius: var(--r-sm); background: var(--accent-d); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
/* мобила: компактнее, чтобы баннер не наезжал на hero-текст/поиск; safe-area под home-bar iOS */
@media (max-width: 520px) {
  .cookie-bar { left: 8px; right: 8px; bottom: 8px; gap: 6px 12px; padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom)); font-size: 12.5px; line-height: 1.3; }
  .cookie-bar button { height: 32px; padding: 0 16px; }
}

/* ── Mobile ── */
@media (max-width: 980px) {
  .hero { background: radial-gradient(ellipse at 68% 76%, rgba(56,175,239,.28), transparent 48%),
      linear-gradient(160deg, #04213C 12%, #083E6B 58%, #126394 100%); }
  .hero-in { grid-template-columns: 1fr; gap: 32px; }
  .hero-rack { display: none; }
  .cat { flex-basis: 78vw; max-width: 300px; }  /* моб: 1 карточка + «выглядывает» следующая */
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-in, .b2b-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-layout { grid-template-columns: minmax(0, 1fr); }
  /* фильтры → выезжающий слева drawer (CSS-only, :checked ~) */
  .cat-filters-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-d);
    border: 1px solid var(--line); font-weight: 600; font-size: 13px; cursor: pointer; margin-left: 12px; }
  .cat-filters-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .filters { position: fixed; top: 0; left: 0; bottom: 0; width: 87%; max-width: 340px; z-index: 95;
    border-radius: 0; max-height: none; overflow-y: auto; transform: translateX(-100%);
    transition: transform .28s ease; box-shadow: 0 0 44px rgba(15,17,21,.28); }
  .cat-drawer-cb:checked ~ .filters { transform: translateX(0); }
  .cat-drawer-cb:checked ~ .cat-drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 94; background: rgba(15,17,21,.5); }
  .cat-drawer-x { display: inline-flex; align-items: center; justify-content: center; margin-left: auto;
    width: 34px; height: 34px; border-radius: 9px; color: var(--muted); cursor: pointer; }
  html:has(.cat-drawer-cb:checked) { overflow: hidden; }
  .co-grid, .ftr-in { grid-template-columns: 1fr; gap: 24px; }
  .pd-top { grid-template-columns: 1fr; }
  .wrap, .sec, .b2b, .brands, .hero-in, .ftr-in, .auth-box { padding-left: 20px; padding-right: 20px; }
  .hero h1 { font-size: 38px; }
  .hdr-in { flex-wrap: wrap; height: auto; gap: 12px 16px; padding: 12px 0; }
  .search { order: 3; flex-basis: 100%; }
  .hdr-phone { display: none; }
  .util-tag { display: none; }
}
@media (max-width: 600px) {
  .cats, .grid-4, .trust-in, .b2b-grid { grid-template-columns: 1fr; }
}

/* ── Product page: тёмный buy-box (RackCore.dc.html) ── */
.pd-metaline { font-family: var(--mono); font-size: 12px; color: var(--muted-2); margin-bottom: 12px; }
.pd-buy { background: var(--dark-2); border-radius: 16px; padding: 24px; color: #fff; }
.pd-buy-head { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 16px; }
.pd-cond { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  color: #A9D0FF; background: rgba(90,169,255,.14); border: 1px solid rgba(90,169,255,.3); padding: 5px 11px; border-radius: 7px; }
.pd-cond.out { color: var(--muted-2); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.pd-cond.out .led { background: var(--muted-3); box-shadow: none; }
.pd-ship { font-size: 12.5px; color: var(--on-dark-2); }
.pd-buy-price { font-family: var(--display); font-weight: 700; font-size: 38px; letter-spacing: -1px; line-height: 1; margin-bottom: 18px; }
.pd-buy-cta { margin: 0; }
.pd-buy-cta .btn { width: 100%; height: 54px; font-size: 16px; }
.pd-buy-soc { display: flex; gap: 10px; margin-top: 12px; }
.pd-buy-soc a { flex: 1; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.04); color: #fff;
  font-size: 13.5px; font-weight: 500; text-decoration: none; transition: border-color .14s, background .14s; }
.pd-buy-soc a:hover { border-color: var(--accent); background: rgba(90,169,255,.1); }
.pd-buy-soc .ic, .pd-buy-soc .ic-sm { color: var(--accent); }
.pd-info .quote { margin-top: 18px; border-top: none; padding-top: 0; }
/* каталог: 3-кол. сетка + текущая страница пагинатора */
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pager .pg.cur { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
@media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* ══ Корзина (RackCore.dc.html) ══ */
.cart-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; margin-bottom: 48px; }
.cart-items { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line-2); font-weight: 600; font-size: 15px; }
.ci { display: flex; gap: 18px; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--line-2); }
.ci:last-child { border-bottom: 0; }
.ci-thumb { width: 130px; height: 80px; flex: none; background: linear-gradient(135deg,#0A3D63,#001A2F); border-radius: 9px;
  display: flex; align-items: center; gap: 9px; padding: 0 13px; text-decoration: none; }
.ci-thumb .led { width: 6px; height: 6px; }
.ci-thumb .bar { flex: 1; height: 30px; border-radius: 3px; background: repeating-linear-gradient(90deg,#1D4B70 0 3px,#00263F 3px 7px); }
.ci-thumb .bay { width: 9px; height: 24px; background: linear-gradient(180deg,#2E333D,#1B1E24); border-radius: 1.5px; border: 1px solid #2C5B80; }
.ci-info { flex: 1; min-width: 0; }
.ci-meta { font-family: var(--mono); font-size: 11px; color: var(--muted-2); margin-bottom: 5px; }
.ci-name { display: block; font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 6px; text-decoration: none; }
.ci-name:hover { color: var(--accent-d); }
.ci-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--accent-d); }
.ci-stock .led { width: 6px; height: 6px; box-shadow: none; }
.ci-stock.out { color: var(--muted-2); }
.ci-stock.out .led { background: var(--muted-3); }
.qty-step { display: inline-flex; align-items: center; border: 1px solid #DDE2EA; border-radius: 9px; overflow: hidden; flex: none; }
.qty-step form { margin: 0; }
.qty-step button { width: 34px; height: 38px; border: 0; background: #fff; color: var(--ink-2); font-size: 18px; cursor: pointer; }
.qty-step button:hover { background: var(--bg); }
.qty-n { width: 38px; text-align: center; font-weight: 600; font-size: 14px; font-family: var(--mono); }
.ci-line { width: 140px; text-align: right; flex: none; }
.ci-line-sum { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.4px; }
.ci-line-each { font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); margin-top: 3px; }
.ci-rm { margin: 0; flex: none; }
.ci-rm button { width: 30px; height: 30px; border: 0; background: transparent; color: var(--muted-3); font-size: 15px; cursor: pointer; border-radius: 7px; }
.ci-rm button:hover { background: #FBECEA; color: #C24A3D; }
/* тёмный summary (корзина + checkout) */
.cart-sum { background: var(--dark-2); border-radius: 16px; padding: 26px; color: #fff; position: sticky; top: 142px; }
.cart-sum-h { font-family: var(--display); font-weight: 600; font-size: 18px; margin-bottom: 20px; }
.cart-sum-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 14px; color: #B3C4D6; }
.cart-sum-row b { color: #fff; font-family: var(--mono); font-weight: 600; }
.cart-sum-row .free { color: var(--accent); }
/* НДС-строка по способу оплаты: счёт/лизинг (ООО ФЕРМО) → 22%, онлайн картой (ИП Боев) → 5% */
.cart-vat { display: none; }
form:has(input[name="pay"][value="invoice"]:checked) .cart-vat--invoice,
form:has(input[name="pay"][value="leasing"]:checked) .cart-vat--invoice { display: flex; }
form:has(input[name="pay"][value="online"]:checked) .cart-vat--online { display: flex; }
.cart-sum-hr { height: 1px; background: rgba(255,255,255,.12); margin: 14px 0; }
.cart-sum-total { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; font-size: 15px; }
.cart-sum-total .v { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -.8px; }
.cart-sum .btn { margin-bottom: 12px; }
.cart-sum-back { display: block; text-align: center; font-size: 13.5px; color: var(--on-dark-2); text-decoration: none; }
.cart-sum-back:hover { color: #fff; }
/* пустая корзина */
.cart-empty { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 72px 40px; text-align: center; margin-bottom: 48px; }
.cart-empty-ic { width: 84px; height: 84px; margin: 0 auto 24px; border-radius: 18px; background: var(--bg); display: flex; align-items: center; gap: 8px; padding: 0 18px; }
.cart-empty-ic .led { background: #C4C8CE; box-shadow: none; }
.cart-empty-ic .bar { flex: 1; height: 26px; border-radius: 3px; background: repeating-linear-gradient(90deg,#D7DADF 0 3px,#EDEEF0 3px 7px); }
.cart-empty-h { font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: -.5px; margin-bottom: 10px; }
.cart-empty p { font-size: 15px; color: var(--muted); max-width: 380px; margin: 0 auto 28px; line-height: 1.5; }

/* ══ Checkout (RackCore.dc.html) ══ */
.co-grid { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; margin: 18px 0 48px; }
.co-cards { display: flex; flex-direction: column; gap: 18px; }
.co-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.co-card-h { font-family: var(--display); font-weight: 600; font-size: 17px; margin-bottom: 18px; display: flex; align-items: center; }
.co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.co-f { display: flex; flex-direction: column; gap: 7px; }
.co-f.wide { grid-column: 1 / -1; }
.co-l { font-family: var(--mono); font-size: 12px; letter-spacing: .5px; color: var(--muted); }
.co-f input, .co-f textarea { height: 46px; border: 1px solid #DDE2EA; border-radius: 9px; padding: 0 14px; font: inherit; font-size: 14px; background: #fff; color: var(--ink); }
.co-f textarea { height: auto; padding: 11px 14px; }
.co-f input:focus, .co-f textarea:focus { border-color: var(--accent); outline: none; }
.co-summary .co-sum-items { display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 18px; }
.co-sum-item { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.co-sum-item .t { flex: 1; color: var(--on-dark); line-height: 1.3; }
.co-sum-item .x { color: #8199B1; font-family: var(--mono); }
.co-sum-item .s { font-family: var(--mono); color: #fff; white-space: nowrap; }
.co-note { text-align: center; font-size: 12px; color: #8199B1; line-height: 1.5; margin-top: 12px; }
/* тип покупателя (физ/юр) + реквизиты компании по выбору */
.co-btype { display: flex; gap: 10px; }
.co-bt { flex: 1; }
.co-bt input { position: absolute; opacity: 0; pointer-events: none; }
.co-bt span { display: flex; align-items: center; justify-content: center; height: 52px; border: 1.5px solid #DDE2EA;
  border-radius: 10px; font-weight: 600; font-size: 14.5px; cursor: pointer; color: var(--ink-2); transition: border-color .12s, background .12s, color .12s; }
.co-bt input:checked + span { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-d); }
.co-bt input:focus-visible + span { outline: 2px solid var(--accent-d); outline-offset: 2px; }
.co-legal { display: none; }
.co-cards:has(#bt-legal:checked) .co-legal { display: block; }
/* Юрлиц-only способы оплаты (счёт/лизинг) — физлицу прячем (платит картой). Предок = form. */
form:has(#bt-phys:checked) .pay-opt--legal { display: none; }

/* ===== Доставка: курьер / ПВЗ СДЭК (CSS :has-тоггл) ===== */
.co-dmode { display: flex; gap: 10px; margin-bottom: 14px; }
.co-courier, .co-point { display: none; }
/* Поля драйвит ВЫБРАННАЯ ОПЦИЯ доставки (data-dtype), не селектор режима */
.co-cards:has(.ship-opt input[data-dtype="courier"]:checked) .co-courier { display: block; }
.co-cards:has(.ship-opt input[data-dtype="pvz"]:checked) .co-point { display: block; }
.pvz-points { margin-top: 12px; }
.pvz-wrap.has-map { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; align-items: start; }
.cdek-map { width: 100%; height: 300px; border-radius: var(--r-sm); margin-bottom: 12px; background: #003052; overflow: hidden; }
.pvz-wrap.has-map .cdek-map { height: auto; min-height: 340px; margin-bottom: 0; }
.pvz-wrap.has-map .pvz-list { max-height: 360px; }
@media (max-width: 860px) { .pvz-wrap.has-map { grid-template-columns: 1fr; } .pvz-wrap.has-map .cdek-map { min-height: 260px; order: -1; } }
.pvz-list { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.pvz-item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer; }
.pvz-item:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.pvz-item input { margin: 0; flex: none; }
.pvz-body { flex: 1; min-width: 0; }
.pvz-addr { display: block; font-size: 14px; color: var(--ink); }
.pvz-wt { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.pvz-tag { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); flex: none; }
.pvz-empty { color: var(--muted); font-size: 14px; padding: 8px 0; }
@media (max-width: 860px) {
  .cart-grid, .co-grid { grid-template-columns: 1fr; }
  .cart-sum, .co-summary { position: static; }
  .co-fields { grid-template-columns: 1fr; }
  .ci { flex-wrap: wrap; }
  .ci-thumb { width: 88px; height: 60px; }
}

/* ══ Контент-страницы (О компании, Гарантия и доставка) — RackCore.dc.html ══ */
.page-hero { background: var(--dark-2); color: #fff; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(180deg,#000,transparent 80%); mask-image: linear-gradient(180deg,#000,transparent 80%); }
.page-hero-in { max-width: var(--wrap); margin: 0 auto; padding: 30px 32px 56px; position: relative; }
.page-hero .crumbs { color: var(--on-dark-2); margin-bottom: 22px; }
.page-hero .crumbs a { color: var(--on-dark); text-decoration: underline; }
.page-hero .crumbs a:hover { color: #fff; }
.ph-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--accent); margin-bottom: 14px; }
.page-hero h1 { font-family: var(--display); font-weight: 700; font-size: 44px; line-height: 1.08; letter-spacing: -1.4px; margin: 0 0 18px; max-width: 760px; }
.page-hero .lead { font-size: 17px; line-height: 1.6; color: var(--on-dark); max-width: 620px; margin: 0 0 34px; }
.ph-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 26px; max-width: 760px; }
.ph-stat b { display: block; font-family: var(--display); font-weight: 700; font-size: 27px; white-space: nowrap; }
.ph-stat span { font-size: 12.5px; color: var(--on-dark-2); margin-top: 4px; }
.page-sec { max-width: var(--wrap); margin: 0 auto; padding: 48px 32px 0; }
.page-sec:last-child { padding-bottom: 70px; }
.page-sec h2 { font-family: var(--display); font-weight: 700; font-size: 28px; letter-spacing: -.8px; margin: 0 0 8px; }
.page-sec .sub { font-size: 15px; color: var(--muted); margin: 0 0 26px; max-width: 620px; }
/* плитки-ценности */
.vals { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.val { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
/* .val-ic — плитка-ценность: тёмная техно-подложка + акцент-иконка (per-tenant токены) */
.val-ic { width: 40px; height: 40px; border-radius: var(--icon-chip-radius, var(--r));
  background: var(--icon-chip-bg, var(--dark-2)); color: var(--icon-chip-fg, var(--accent));
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.val-ic .ic, .val-ic svg { width: 20px; height: 20px; }
.val h3 { font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.3px; margin: 0 0 9px; }
.val p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }
/* шаги заказа */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.steps-4 { grid-template-columns: repeat(4,1fr); }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.step-n { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent-d); margin-bottom: 12px; }
.step h3 { font-family: var(--display); font-weight: 600; font-size: 17px; margin: 0 0 8px; }
.step p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }
/* тёмная инфо-плашка */
.info-band { background: var(--dark-2); border-radius: var(--r-lg); padding: 22px 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: #fff; margin-top: 24px; }
.info-band .ib-led { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--accent); }
.info-band .ib-sep { color: #2C5B80; }
.info-band .ib-txt { font-size: 14px; color: var(--on-dark); }
/* реквизиты */
.req-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 8px 26px; }
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.req-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line-2); gap: 20px; }
.req-row:last-child, .req-grid > .req-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.req-row .k { font-size: 13.5px; color: var(--muted); }
.req-row .v { font-size: 13.5px; color: var(--ink); font-weight: 500; font-family: var(--mono); text-align: right; }
@media (max-width: 820px) { .vals, .steps, .steps-4, .ph-stats { grid-template-columns: repeat(2,1fr); } .req-grid { grid-template-columns: 1fr; } .page-hero h1 { font-size: 34px; } }
@media (max-width: 520px) { .vals, .steps, .steps-4 { grid-template-columns: 1fr; } }

/* ── Тарифы/аспекты гарантии (карточки-тарифы из прототипа) ── */
.tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.tier { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px; padding: 26px; }
.tier.on { border-color: var(--accent); box-shadow: 0 18px 40px -28px rgba(90,169,255,.55); }
.tier-badge { position: absolute; top: -11px; left: 26px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  background: var(--accent); color: var(--on-accent); padding: 4px 11px; border-radius: 6px; }
.tier-term { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -.6px; color: var(--accent); margin-bottom: 4px; }
.tier-t { font-family: var(--display); font-weight: 600; font-size: 17px; margin-bottom: 10px; }
.tier-d { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }
.tier-list { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--line-2); padding-top: 16px; }
.tier-li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink); }
.tier-li .ck { color: var(--accent); flex-shrink: 0; display: inline-flex; }
.tier-li .ck svg, .tier-li .ck .ic { width: 15px; height: 15px; }

/* ── Logo-wall заказчиков (обобщённые сегменты) ── */
.logowall-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 34px 40px; }
.logowall-cap { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--muted-2); text-align: center; margin-bottom: 26px; }
.logowall { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.logowall-cell { background: var(--paper); min-height: 78px; display: flex; align-items: center; justify-content: center; padding: 14px; }
.logowall-cell span { font-family: var(--display); font-weight: 700; font-size: 15.5px; letter-spacing: -.3px; color: var(--muted-3); text-align: center; transition: color .14s; }
.logowall-cell:hover span { color: var(--ink); }
.logowall-note { text-align: center; font-size: 12.5px; color: var(--muted-2); margin-top: 18px; }

/* ── CTA-плашка внутри .page-sec (тёмный grid+glow, как .bcta) ── */
.page-cta { position: relative; overflow: hidden; background: var(--dark-2); border-radius: 18px; padding: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.page-cta::before { content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.page-cta::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 360px at 88% 20%, rgba(90,169,255,.16), transparent 60%); }
.page-cta-copy { position: relative; max-width: 620px; }
.page-cta-actions { position: relative; display: flex; gap: 12px; flex-shrink: 0; }
.page-cta-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--accent); margin-bottom: 12px; }
.page-cta h2 { font-family: var(--display); font-weight: 700; font-size: 30px; letter-spacing: -1px; margin: 0 0 10px; color: #fff; }
.page-cta p { font-size: 15px; line-height: 1.6; color: #B3C4D6; margin: 0; }
.page-cta .btn, .page-cta .btn-ghost-d { height: 50px; }

/* ── Сервис: тёмный SLA-блок (split с разделителем) ── */
.svc-sla { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center;
  position: relative; overflow: hidden; background: var(--dark-2); border-radius: 18px; padding: 36px 40px; color: #fff; }
.svc-sla::before { content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.svc-sla::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(700px 360px at 85% 15%, rgba(90,169,255,.15), transparent 60%); }
.svc-sla-l, .svc-sla-r { position: relative; }
.svc-sla-l h2 { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -.6px; margin: 0 0 18px; color: #fff; }
.svc-tiers { display: flex; flex-direction: column; gap: 12px; }
.svc-tier { display: flex; align-items: center; gap: 16px; }
.svc-tier .lv { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--accent); width: 34px; height: 34px;
  border: 1px solid rgba(90,169,255,.4); border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc-tier b { font-weight: 600; font-size: 15px; }
.svc-tier span { color: var(--on-dark-2); font-size: 13.5px; }
.svc-sla-r { text-align: center; border-left: 1px solid rgba(255,255,255,.12); padding-left: 32px; }
.svc-sla-r .cap { font-family: var(--mono); font-size: 12px; color: var(--on-dark-2); margin-bottom: 8px; }
.svc-sla-r .big { font-family: var(--display); font-weight: 700; font-size: 38px; letter-spacing: -1px; margin-bottom: 6px; }
.svc-sla-r .d { font-size: 13.5px; color: var(--on-dark); margin-bottom: 22px; }
.svc-sla-r .btn { height: 48px; }

@media (max-width: 820px) {
  .tiers { grid-template-columns: 1fr; }
  .logowall { grid-template-columns: repeat(2,1fr); }
  .svc-sla { grid-template-columns: 1fr; padding: 30px 28px; }
  .svc-sla-r { border-left: none; border-top: 1px solid rgba(255,255,255,.12); padding-left: 0; padding-top: 26px; }
  .page-cta { padding: 34px 26px; }
  .page-cta-actions { width: 100%; }
  .page-cta-actions .btn, .page-cta-actions .btn-ghost-d { flex: 1; }
}
@media (max-width: 520px) { .logowall { grid-template-columns: 1fr; } }

/* ── Контакты (RackCore.dc.html) ── */
.contacts-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; align-items: stretch; }
.ct-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; color: var(--muted-2); margin-bottom: 14px; }
.ct-phone { display: block; font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -.5px; color: var(--ink); text-decoration: none; margin-bottom: 6px; }
.ct-phone.sub { font-size: 18px; color: var(--ink-2); }
.ct-email { display: inline-block; font-family: var(--mono); font-size: 14px; color: var(--accent-d); text-decoration: none; margin-top: 6px; }
.ct-emails { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.ct-email-row { display: flex; flex-direction: column; }
.ct-email-cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted-2); }
.ct-email-row .ct-email { margin-top: 2px; }
.ct-hours { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.ct-soc { display: flex; gap: 10px; margin-top: 18px; }
.ct-soc a { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color .14s, background .14s; }
.ct-soc a:hover { border-color: var(--accent); background: var(--accent-bg); }
.ct-soc .ic-sm { color: var(--accent); }
.ct-addr { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.ct-addr .ic-sm { color: var(--accent-d); flex: none; margin-top: 2px; }
.contacts-map { background: linear-gradient(135deg,#0A3D63,#001A2F); border: 1px solid var(--line); border-radius: 16px; min-height: 380px; position: relative; overflow: hidden; }
.cm-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px); }
.cm-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-100%); display: flex; flex-direction: column; align-items: center; }
.cm-label { background: var(--dark-2); color: #fff; font-family: var(--mono); font-size: 12.5px; padding: 7px 12px; border-radius: 8px; white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 8px 24px rgba(0,0,0,.4); margin-bottom: 6px; }
.cm-dot { width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(45deg); background: var(--accent); box-shadow: 0 0 0 5px rgba(90,169,255,.25); }
@media (max-width: 820px) { .contacts-grid { grid-template-columns: 1fr; } .contacts-map { min-height: 260px; } }

/* ── Success / страница заказа (RackCore.dc.html) ── */
.ok-hero { text-align: center; padding: 48px 0 8px; }
.ok-check { width: 88px; height: 88px; margin: 0 auto 28px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; }
.ok-check span { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 28px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px rgba(90,169,255,.18); }
.ok-check.cancel { background: #FBECEA; }
.ok-check.cancel span { background: #C24A3D; box-shadow: 0 0 0 6px rgba(194,74,61,.18); }
.ok-h { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -1px; margin: 0 0 12px; }
.ok-sub { font-size: 16px; color: var(--muted); line-height: 1.55; max-width: 480px; margin: 0 auto 8px; }
.ok-note { font-size: 15px; color: var(--accent-d); margin: 0 0 8px; }
.ok-otl { justify-content: center; margin: 28px 0 8px; }
.ord-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 8px 28px; max-width: 640px; margin: 24px auto; }
.ord-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; gap: 16px; }
.ord-row:last-child { border-bottom: 0; }
.ord-row .k { color: var(--muted); }
.ord-row .v { font-weight: 600; text-align: right; }
.ord-row.total .v { font-family: var(--display); font-weight: 700; font-size: 24px; letter-spacing: -.6px; }
.ok-track { text-align: center; font-size: 14px; color: var(--ink-2); margin: 0 0 18px; }
.ok-track a { color: var(--accent-d); text-decoration: none; }
.ord-items { max-width: 640px; margin: 0 auto 28px; }
.ord-item { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink-2); }
.ord-item:last-child { border-bottom: 0; }
.ord-item .x { color: var(--muted-2); font-family: var(--mono); }
.ord-item .s { white-space: nowrap; color: var(--ink); }
.ord-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }

/* ── Конфигуратор сервера (RackCore.dc.html) ── */
.cfg-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--accent-d); white-space: nowrap; }
.cfg-opts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cfg-opt { display: flex; align-items: center; gap: 12px; border: 1.5px solid #E4E8EE; border-radius: 10px; padding: 13px 16px; cursor: pointer; transition: border-color .12s, background .12s; }
.cfg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cfg-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #C8C8C2; flex: none; display: flex; align-items: center; justify-content: center; transition: border-color .12s; }
.cfg-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; transition: background .12s; }
.cfg-opt:hover { border-color: var(--muted-3); }
.cfg-opt input:checked + .cfg-dot { border-color: var(--accent); }
.cfg-opt input:checked + .cfg-dot::after { background: var(--accent); }
.cfg-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.cfg-opt:has(input:checked) .cfg-name { color: var(--ink); font-weight: 600; }
.cfg-name { font-size: 14px; color: var(--ink-2); }
.cfg-summary .cfg-note-top { font-size: 13px; color: var(--on-dark); line-height: 1.5; margin: 0 0 16px; }
.cfg-incl { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 11px; }
.cfg-incl li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--on-dark); }
.cfg-incl .ic-sm { color: var(--accent); flex: none; }
.catbar-cfg { color: var(--accent-d) !important; font-weight: 600 !important; }
.catbar-cfg:hover { background: var(--accent-bg) !important; }
/* нумерованный бейдж шага в заголовке карточки */
.cfg-step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px;
  background: var(--dark-2); color: var(--on-dark); font-family: var(--mono); font-size: 12px; font-weight: 600; margin-right: 8px; vertical-align: middle; }
/* карточки-платформы с rack-визуалом (приём cat-vis) */
.cfg-plat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cfg-plat { position: relative; display: flex; flex-direction: column; border: 1.5px solid #E4E8EE; border-radius: 12px; padding: 16px; cursor: pointer;
  transition: border-color .14s, background .14s, transform .14s; }
.cfg-plat input { position: absolute; opacity: 0; pointer-events: none; }
.cfg-plat:hover { border-color: var(--muted-3); transform: translateY(-2px); }
.cfg-plat:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.cfg-plat-vis { height: 40px; border-radius: 8px; margin-bottom: 13px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: linear-gradient(135deg,#0A3D63,#001B31); }
.cfg-plat-vis .leds { display: flex; flex-direction: column; gap: 4px; }
.cfg-plat-vis .leds i { width: 6px; height: 6px; border-radius: 50%; background: #2C5B80; }
.cfg-plat-vis .leds i:first-child { background: var(--accent); box-shadow: 0 0 5px var(--accent); }
.cfg-plat-vis .strip { flex: 1; height: 24px; border-radius: 3px; background: repeating-linear-gradient(90deg,#1D4B70 0 3px,#00263F 3px 7px); }
.cfg-plat-name { font-weight: 600; font-size: 14px; line-height: 1.3; color: var(--ink); margin-bottom: 4px; }
.cfg-plat:has(input:checked) .cfg-plat-name { color: var(--ink); }
.cfg-plat-form { font-family: var(--mono); font-size: 11px; color: var(--muted-2); }
/* тёмный summary конфигуратора */
.cfg-sub { font-family: var(--mono); font-size: 11.5px; color: var(--on-dark-2); line-height: 1.5; margin: -8px 0 18px; }
.cfg-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 16px; margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.12); margin-bottom: 18px; }
.cfg-price-l { font-size: 15px; color: #fff; }
.cfg-price-v { font-family: var(--mono); font-size: 13px; color: var(--accent); text-align: right; line-height: 1.4; }
.cfg-foot { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12px; color: var(--on-dark-2); margin-top: 14px; }
.cfg-foot .led { width: 6px; height: 6px; box-shadow: none; }
/* нейтральная подпись доставки в корзине (СДЭК считается на checkout) */
.cart-sum-dlv { color: var(--on-dark); }
@media (max-width: 600px) { .cfg-opts-grid, .cfg-plat-grid { grid-template-columns: 1fr; } }

/* ══ Адаптивность / мобильное меню (RackCore.dc.html responsive) ══ */
.acct-btn { width: 46px; height: 46px; flex: none; border: 1px solid #DDE2EA; border-radius: var(--r); background: #fff;
  color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: border-color .14s, color .14s; }
.acct-btn:hover { border-color: var(--ink); color: var(--ink); }
/* header-иконки: строгий контур, на hover — LED-акцент темы (техно-подсветка) */
.acct-btn:hover .ic-sm, .fav-link:hover .ic-sm { color: var(--icon-accent, var(--accent)); }
.fav-link { position: relative; width: 46px; height: 46px; flex: none; border: 1px solid #DDE2EA; border-radius: var(--r);
  background: #fff; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: border-color .14s, color .14s; }
.fav-link:hover { border-color: var(--ink); color: var(--accent-d); }
.fav-n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; font-family: var(--mono);
  display: inline-flex; align-items: center; justify-content: center; }
.fav-n.hide { display: none; }
.cart-link .ic-sm { display: none; }  /* на десктопе текст «Корзина», иконка — для мобилы */
.burger { display: none; flex-direction: column; gap: 4px; width: 46px; height: 46px; flex: none; border: 1px solid #DDE2EA;
  border-radius: var(--r); background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.burger i { width: 18px; height: 2px; background: var(--ink); border-radius: 1px; }
.burger i:first-child { background: var(--accent); }
/* Мобильное меню: чекбокс #mnav-toggle и панель/бекдроп — `~`-сиблинги на BODY-уровне
   (base.html), НЕ внутри sticky .hdr — иначе его стекинг-контекст (z-50) прибивал панель
   под плавающие виджеты (cookie 60 / chat-FAB 60 / маскот 61 / таб-бар 65) и требовал
   `:has()`-хака поднятия шапки. Глобальные z: бекдроп 69 / панель 70 — выше виджетов,
   под AI-ассистентом (.sa-backdrop 79 / .sa-panel 80). A11y (Esc/aria) — _mnav_a11y.html. */
.mnav, .mnav-backdrop { display: none; }
.mnav-toggle:checked ~ .mnav { display: flex; }
.mnav-toggle:checked ~ .mnav-backdrop { display: block; }
/* Скролл-лок фона при открытом меню (CSS-only, без JS-классов на body; единый контракт
   .js-mnav всех витринных тем). */
html:has(.js-mnav:checked) { overflow: hidden; }
.mnav-backdrop { position: fixed; inset: 0; background: rgba(15,17,21,.45); z-index: 69; cursor: pointer; }
.mnav { position: fixed; top: 0; right: 0; bottom: 0; width: 300px; max-width: 86vw; z-index: 70; background: var(--paper);
  flex-direction: column; padding: 18px; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: -24px 0 60px -24px rgba(0,0,0,.5); }
/* ✕ — явный аффорданс закрытия (бекдроп-тап — скрытый); label того же чекбокса. */
.mnav-close { align-self: flex-end; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: -6px -6px 2px 0; border-radius: var(--r-sm); cursor: pointer; color: var(--muted); }
.mnav-close:hover { background: var(--bg); color: var(--ink); }
.mnav-close .ic { width: 22px; height: 22px; }
.mnav a { padding: 12px 10px; font-size: 15px; color: var(--ink); text-decoration: none; border-radius: var(--r-sm); }
.mnav a:hover { background: var(--bg); }
.mnav > * { flex-shrink: 0; }
.mnav a.fm-corporate-link { font-size: 17px; font-weight: 600; }
.mnav a.fm-corporate-link.on { color: var(--accent-d); background: var(--accent-bg); }
.mnav-lead { font-family: var(--display); font-weight: 600; }
.mnav-cat { font-weight: 600; }
.mnav-sub { padding-left: 24px !important; font-size: 13.5px !important; color: var(--muted) !important; }
.mnav-sep { height: 1px; background: var(--line); margin: 8px 0; }
.mnav-phone { font-family: var(--mono); color: var(--accent-d); font-weight: 600; }
.mnav-search { display: flex; height: 44px; border: 1.5px solid var(--accent); border-radius: var(--r); overflow: hidden; margin-bottom: 12px; }
.mnav-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 12px; font: inherit; background: #fff; }
.mnav-search button { border: 0; background: var(--accent); color: #fff; padding: 0 14px; cursor: pointer; }

@media (max-width: 1024px) {
  /* .cats — слайдер (см. базовые правила); ширина карточки от базовой 258px, планшет ~2.5 в ряд */
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .ftr-in { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .burger { display: flex; }
  .catbar { display: none; }
  .hdr-phone, .acct-btn { display: none; }   /* доступны в мобильном меню */
  /* ≥16px на полях ввода — иначе iOS Safari авто-зумит страницу при фокусе */
  input, textarea, select { font-size: 16px; }
}
/* ── Product tabs (CSS radio-hack, no JS) ── */
.pd-tabs { margin: 8px 0 0; }
.pd-tabs > input[name="pdtab"] { position: absolute; opacity: 0; pointer-events: none; }
.pd-tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 26px; flex-wrap: wrap; }
.pd-tab { padding: 13px 22px; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px; transition: color .14s, border-color .14s; }
.pd-tab:hover { color: var(--ink); }
/* На телефоне вкладки в одну строку («Доставка и гарантия» уезжала на вторую) */
@media (max-width: 600px) { .pd-tabbar { flex-wrap: nowrap; gap: 0; overflow-x: auto; scrollbar-width: none; }
  .pd-tabbar::-webkit-scrollbar { display: none; }
  .pd-tab { padding: 12px 7px; font-size: 13.5px; white-space: nowrap; flex: 1 0 auto; text-align: center; } }
.pd-pane { display: none; }
.pd-pane-specs .specs { margin-bottom: 0; }
.pd-tabs:has(#pdtab-specs:checked) .pd-pane-specs,
.pd-tabs:has(#pdtab-desc:checked) .pd-pane-desc,
.pd-tabs:has(#pdtab-ship:checked) .pd-pane-ship { display: block; }
.pd-tabs:has(#pdtab-specs:checked) .pd-tab-specs,
.pd-tabs:has(#pdtab-desc:checked) .pd-tab-desc,
.pd-tabs:has(#pdtab-ship:checked) .pd-tab-ship { color: var(--ink); border-bottom-color: var(--ink); }
.pd-desc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 32px; max-width: 820px; }
.pd-desc p { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 14px; }
.pd-desc p:last-child { margin-bottom: 0; }
.pd-ship-cards { gap: 18px; }
.pd-shipc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.pd-shipc-ic { color: var(--accent-d); display: inline-flex; margin-bottom: 12px; }
.pd-shipc-t { font-weight: 600; font-size: 16px; margin-bottom: 8px; color: var(--ink); }
.pd-shipc-d { font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* ── «С этим товаром покупают» ── */
.pd-related-h { font-size: 26px; letter-spacing: -.6px; margin: 56px 0 22px; }
.pd-related { gap: 18px; }

@media (max-width: 640px) {
  .util { display: none; }
  .hdr-in { height: auto; flex-wrap: wrap; row-gap: 12px; padding-top: 12px; padding-bottom: 12px; gap: 14px; }
  .search { order: 3; flex-basis: 100%; }
  /* ≥16px в поиске — иначе iOS зумит вьюпорт при фокусе */
  .search input, .mnav-search input { font-size: 16px; }
  .hdr-actions { margin-left: auto; }
  .cart-link { padding: 0 14px; }
  .cart-link .ic-sm { display: inline-block; }
  .cart-label { display: none; }
  .cats, .grid-4, .grid-3, .grid { grid-template-columns: 1fr; }
  .trust-in, .b2b-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .ftr-in { grid-template-columns: 1fr; }
  .specs { columns: 1; }   /* 2 колонки сжимали spec-таблицу → label/value наезжали */
  .hero h1 { font-size: 32px; line-height: 1.1; letter-spacing: -1px; }
  .hero-in { padding: 40px 16px 44px; }
  .wrap, .sec, .b2b, .brands, .page-sec, .auth-box { padding-left: 16px; padding-right: 16px; }
}

/* ── Блог / база знаний ── */
.blog-wrap { padding-bottom: 70px; }
.blog-h1 { font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -1px; margin: 0 0 6px; }
.blog-intro { font-size: 15px; color: var(--muted); margin: 0 0 30px; max-width: 620px; }
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (min-width: 981px) {
  .fm-home .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.blogcard { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.blogcard:hover { border-color: var(--dark-2); transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(0,0,0,.4); }
.blogcard-vis { position: relative; aspect-ratio: 16 / 9; flex-shrink: 0; background: linear-gradient(135deg, #0A3D63, #001A2F); overflow: hidden; }
.blogcard-vis::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 28px); }
.blogcard-vis::after { content: ""; position: absolute; inset: 0; background: radial-gradient(360px 200px at 78% 20%, rgba(90,169,255,.18), transparent 65%); }
.blogcard-cat { position: absolute; top: 16px; left: 16px; z-index: 2; font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; font-weight: 600; color: var(--accent); text-transform: uppercase; }
.blogcard-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.blogcard:hover .blogcard-img { transform: scale(1.03); transition: transform .4s ease; }
.blogcard-vis:has(.blogcard-img) .blogcard-cat { color: #fff; background: rgba(20,22,26,.7); padding: 4px 9px; border-radius: 6px; backdrop-filter: blur(4px); }
.blogcard-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.blogcard-title { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.3; letter-spacing: -.4px; margin-bottom: 10px; color: var(--ink); }
.blogcard-excerpt { font-size: 14px; line-height: 1.55; color: var(--muted); margin-bottom: 16px; }
.blogcard-meta { margin-top: auto; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11.5px; color: var(--muted-2); }
.blogcard-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-3); }

/* статья */
.blog-post { max-width: 780px; padding-bottom: 70px; }
.bp-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--accent-d); text-transform: uppercase; margin-bottom: 14px; }
.bp-title { font-family: var(--display); font-weight: 700; font-size: 36px; line-height: 1.15; letter-spacing: -1px; margin: 0 0 16px; }
.bp-meta { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12.5px; color: var(--muted-2); padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.bp-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-3); }
.bp-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md, 14px); margin: 0 0 30px; border: 1px solid var(--line); }
.bp-body p { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 20px; }
.bp-related { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.bp-related h2 { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -.5px; margin: 0 0 18px; }
.bp-related-list { display: flex; flex-direction: column; gap: 12px; }
.bp-rel { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; text-decoration: none; transition: border-color .14s; }
.bp-rel:hover { border-color: var(--dark-2); }
.bp-rel-cat { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; color: var(--accent-d); text-transform: uppercase; margin-bottom: 5px; }
.bp-rel-title { display: block; font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.3; }
.bp-rel-arr { flex-shrink: 0; font-size: 18px; color: var(--muted-2); }

@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
  .bp-title { font-size: 28px; }
}

/* ---- Чекбокс согласия (152-ФЗ: обязательная галочка при регистрации/checkout) ---- */
.consent-check { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 12px;
  font-size: 13px; line-height: 1.4; text-align: left; cursor: pointer; }
.consent-check input { margin-top: 2px; flex: none; width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.consent-check a { text-decoration: underline; }

/* ---- Брендинг / медиакит (/page/brand): логотипы, аватарки, палитра ---- */
.bk-h { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 34px 0 6px; }
.bk-h:first-of-type { margin-top: 4px; }
.bk-note { color: var(--muted-2); font-size: 14px; margin: 0 0 16px; }
.bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; }
.bk-grid--ava { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.bk-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper); display: flex; flex-direction: column; }
.bk-prev { flex: 1; min-height: 150px; display: grid; place-items: center; padding: 28px 20px; }
.bk-card--dark .bk-prev { background: var(--ink); }
.bk-card--soft .bk-prev { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.bk-prev img { max-width: 100%; height: auto; }
.bk-ava { width: 128px; height: 128px; border-radius: 28px; box-shadow: 0 10px 30px -8px rgba(0,0,0,.35); }
.bk-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--line-3); }
.bk-label { font-size: 14px; color: var(--muted-2); }
.bk-dl { display: inline-flex; gap: 8px; flex: none; }
.bk-dl a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid var(--accent-d); color: var(--accent-d);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.bk-dl a:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bk-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.bk-sw { display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  cursor: pointer; font: inherit; text-align: left; transition: border-color .15s, transform .1s; }
.bk-sw:hover { border-color: var(--accent-d); }
.bk-sw:active { transform: scale(.98); }
.bk-sw::before { content: ""; display: block; height: 68px; background: var(--c); }
.bk-sw--light::before { box-shadow: inset 0 0 0 1px var(--line); }
.bk-sw-name { padding: 10px 12px 2px; font-size: 12px; color: var(--muted-2); }
.bk-sw code { padding: 0 12px 12px; font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.bk-sw.copied { border-color: var(--accent-d); }
.bk-sw.copied .bk-sw-name::after { content: " · скопировано"; color: var(--accent-d); }
@media (max-width: 560px) { .bk-grid { grid-template-columns: 1fr; }
  .bk-meta { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* iOS Safari зумит вьюпорт при фокусе на input/textarea/select с font-size < 16px
   (раздражающий авто-зум на телефоне: поиск/фильтр цены/qty/формы были 13–15px). На мобиле
   поднимаем текстовые поля до 16px — десктопные дизайн-размеры не трогаем. checkbox/radio/range
   (не текстовые) исключаем. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px; }
}

/* Мобильный нижний таб-бар (thumb-зона): Главная/Каталог/Поиск/Корзина/Кабинет. Только на мобиле
   (desktop → display:none). Иконки currentColor → цвет из .botnav-i. Контент не под баром
   (padding-bottom body), cookie-бар поднят выше. Разметка — общий _shared/_botnav.html. */
.botnav { display: none; }
@media (max-width: 768px) {
  /* Нижний бар (thumb-зона) уже даёт Корзину и Кабинет — прячем их дубли из верхней шапки.
     Остаются Поиск, Избранное (в баре его нет) и бургер (доп. разделы). */
  .hdr-actions a[href="/account"], .hdr-actions a[href="/cart"] { display: none !important; }
  .botnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    background: var(--paper); border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px rgba(20,22,26,.06); padding-bottom: env(safe-area-inset-bottom); }
  .botnav-i { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 7px 0 6px; min-height: 50px; text-decoration: none; color: var(--muted-2);
    font-size: 10px; font-weight: 600; -webkit-tap-highlight-color: transparent; }
  .botnav-i.on { color: var(--accent-d); }
  .botnav-i .bn-ic { width: 23px; height: 23px; }
  .botnav-icw { position: relative; display: inline-flex; }
  .botnav-n { position: absolute; top: -6px; left: 12px; box-sizing: border-box; min-width: 16px;
    height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent-d); color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
  .cookie-bar { bottom: calc(60px + env(safe-area-inset-bottom)); }
}

/* ===== Плавающий чат-виджет (лаунчер каналов; разметка _shared/_chat_widget.html) =====
   FAB в углу → карточка «Здравствуйте! Чем можем помочь?»: каналы плашками + «Оставить заявку».
   Показ — CSS :checked ~ (без JS). Блок ОДИНАКОВЫЙ во всех темах, отличаются только --cw-*. */
.chatw { --cw-accent: var(--accent); --cw-bg: var(--paper); --cw-ink: var(--ink); --cw-muted: var(--muted); --cw-line: var(--line);
  --cw-soft: color-mix(in srgb, var(--cw-ink) 5%, var(--cw-bg));
  position: fixed; right: 20px; bottom: 24px; z-index: 60;
  display: flex; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: none; }
/* fixed, а не absolute: чекбокс стоит в конце body, и клик по FAB (label) прокручивал страницу к
   нему — в самый низ. Закрытый контейнер прозрачен для кликов, ловят только FAB и открытая панель. */
.chatw-toggle { position: fixed; bottom: 0; right: 0; opacity: 0; width: 0; height: 0; pointer-events: none; }
.chatw-fab { width: 60px; height: 60px; border-radius: 100px; background: var(--cw-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto;
  box-shadow: 0 10px 28px rgba(20,30,50,.28); transition: transform .16s ease, box-shadow .16s ease; }
.chatw-fab:hover { transform: scale(1.06); box-shadow: 0 12px 32px rgba(20,30,50,.34); }
.chatw-fab svg { width: 28px; height: 28px; }
.chatw-fab-close { display: none; }
.chatw-toggle:checked ~ .chatw .chatw-fab-open { display: none; }
.chatw-toggle:checked ~ .chatw .chatw-fab-close { display: flex; }
/* открытая панель каналов — поверх AI-виджета (.sa-* z-61), иначе уходит под него */
.chatw-toggle:checked ~ .chatw { z-index: 70; }
.chatw-panel { width: 340px; max-width: calc(100vw - 28px); padding: 18px; box-sizing: border-box;
  background: var(--cw-bg); color: var(--cw-ink); border: 1px solid var(--cw-line); border-radius: 22px;
  box-shadow: 0 28px 64px -14px rgba(15,23,42,.30), 0 2px 8px rgba(15,23,42,.06);
  opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none; transform-origin: bottom right;
  transition: opacity .2s ease, transform .24s cubic-bezier(.2,.9,.3,1.2); }
.chatw-toggle:checked ~ .chatw .chatw-panel { opacity: 1; transform: none; pointer-events: auto; }
.chatw-head { display: flex; align-items: center; justify-content: space-between; margin: -4px -4px 14px 0; }
.chatw-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--cw-ink); }
.chatw-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.chatw-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: #22c55e;
  opacity: .35; animation: chatw-pulse 2s ease-out infinite; }
@keyframes chatw-pulse { from { transform: scale(.4); opacity: .5; } to { transform: scale(1.4); opacity: 0; } }
.chatw-x { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--cw-soft); color: var(--cw-ink); cursor: pointer; transition: background .14s ease; }
.chatw-x:hover { background: color-mix(in srgb, var(--cw-ink) 10%, var(--cw-bg)); }
.chatw-x svg { width: 16px; height: 16px; }
.chatw-hello { margin-bottom: 16px; }
.chatw-hello-t { font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; }
.chatw-hello-s { font-size: 17px; line-height: 1.3; font-weight: 600; margin-top: 2px; }
.chatw-hello-p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--cw-muted); }
.chatw-chans { display: flex; flex-direction: column; gap: 8px; }
.chatw-chan { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 12px 0 10px;
  border-radius: 14px; background: var(--cw-soft); border: 1px solid transparent;
  text-decoration: none; color: var(--cw-ink); transition: background .14s ease, border-color .14s ease, transform .14s ease; }
.chatw-chan:hover { background: var(--cw-bg); border-color: color-mix(in srgb, var(--cw-accent) 45%, transparent); }
.chatw-chan:active { transform: scale(.985); }
.chatw-chan-ic { width: 30px; height: 30px; border-radius: 9px; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center; }
.chatw-chan-ic svg { width: 17px; height: 17px; }
.chatw-chan--tg .chatw-chan-ic { background: #2AABEE; border-radius: 50%; }
.chatw-chan--tg .chatw-chan-ic svg { width: 30px; height: 30px; color: #2AABEE; background: #fff; border-radius: 50%; }
.chatw-chan--max .chatw-chan-ic { background: linear-gradient(135deg, #41b3ff, #7c5cff 55%, #b54cf5); }
.chatw-chan--tel .chatw-chan-ic { background: var(--cw-accent); }
.chatw-chan-txt { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatw-chan-arr { color: var(--cw-muted); display: flex; transition: transform .14s ease, color .14s ease; }
.chatw-chan-arr svg { width: 16px; height: 16px; }
.chatw-chan:hover .chatw-chan-arr { transform: translateX(2px); color: var(--cw-accent); }
.chatw-cta { display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 14px;
  border-radius: 14px; background: var(--cw-accent); color: #fff; font-size: 15px; font-weight: 600;
  text-decoration: none; transition: filter .14s ease, transform .14s ease; }
.chatw-cta:hover { filter: brightness(1.08); color: #fff; }
.chatw-cta:active { transform: scale(.985); }
.chatw-mail { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px;
  font-size: 13px; color: var(--cw-muted); text-decoration: none; transition: color .14s ease; }
.chatw-mail svg { width: 15px; height: 15px; flex: none; }
.chatw-mail:hover { color: var(--cw-accent); }
/* Плашки всплывают лесенкой при открытии */
.chatw-chan, .chatw-cta { opacity: 0; transform: translateY(6px); }
.chatw-toggle:checked ~ .chatw .chatw-chan,
.chatw-toggle:checked ~ .chatw .chatw-cta { opacity: 1; transform: none;
  transition: opacity .22s ease, transform .22s ease, background .14s ease, border-color .14s ease; }
.chatw-toggle:checked ~ .chatw .chatw-chan:nth-child(1) { transition-delay: .05s, .05s, 0s, 0s; }
.chatw-toggle:checked ~ .chatw .chatw-chan:nth-child(2) { transition-delay: .09s, .09s, 0s, 0s; }
.chatw-toggle:checked ~ .chatw .chatw-chan:nth-child(3) { transition-delay: .13s, .13s, 0s, 0s; }
.chatw-toggle:checked ~ .chatw .chatw-cta { transition-delay: .17s, .17s, 0s, 0s; }
@media (prefers-reduced-motion: reduce) {
  .chatw-panel, .chatw-chan, .chatw-cta { transition: none !important; }
  .chatw-dot::after { animation: none; }
}
@media (max-width: 768px) {
  .chatw { right: 14px; bottom: calc(66px + env(safe-area-inset-bottom)); }
  .chatw-fab { width: 54px; height: 54px; }
  .chatw-fab svg { width: 25px; height: 25px; }
}

/* ===== Виджет AI-консультанта (FAB+панель, разметка _shared/_assistant_widget.html) =====
   В отличие от .chatw (чистый CSS :checked ~) — панель открывается JS (static/assistant.js),
   стрим ответа по SSE. Стоит ВЫШЕ .chatw по bottom, чтобы FAB'ы не перекрывались. */
.sa-root { pointer-events: none; }
.sa-fab { position: fixed; right: 20px; bottom: 96px; z-index: 61; pointer-events: auto;
  display: flex; align-items: center; gap: 9px; height: 50px; padding: 0 18px 0 16px;
  border: none; border-radius: 999px; color: #fff;
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  background: linear-gradient(115deg, var(--accent) 0%, var(--accent-d) 50%, var(--accent) 100%);
  background-size: 220% 100%; animation: sa-drift 7s ease-in-out infinite, sa-glow 3.4s ease-in-out infinite;
  transition: transform .16s ease; }
.sa-fab:hover { transform: scale(1.05); }
.sa-fab-i { width: 20px; height: 20px; flex: none; filter: drop-shadow(0 0 4px rgba(255,255,255,.5)); }
@keyframes sa-drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes sa-glow { 0%, 100% { box-shadow: 0 8px 26px rgba(90,169,255,.34); }
  50% { box-shadow: 0 10px 36px rgba(10,117,54,.5); } }
@media (prefers-reduced-motion: reduce) { .sa-fab { animation: none; } }
/* -- Fermo AI mark -------
   The same transparent asset identifies the launcher and the assistant in the panel. */
.sa-fab--seat { right: 12px; background: none; box-shadow: none; animation: none; padding: 0; height: 76px; width: 76px; isolation: isolate; }
.sa-fab--seat::before { content: ""; position: absolute; inset: 3%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(115,181,255,.58) 0%, rgba(69,137,232,.3) 42%, rgba(69,137,232,0) 72%);
  filter: blur(8px); opacity: .4; transform: scale(1); animation: fm-ai-halo 5.6s ease-in-out infinite; }
@keyframes fm-ai-halo {
  0%, 15%, 32%, 100% { opacity: .4; transform: scale(1); }
  5%, 20% { opacity: .15; transform: scale(.95); }
  10%, 25% { opacity: 1; transform: scale(1.3); }
}
.sa-fab--seat:is(:hover, :focus-visible)::before { animation: none; opacity: 1; transform: scale(1.15); }
.sa-root.sa-open .sa-fab--seat::before { animation: none; opacity: 0; }
.sa-fab--seat:hover { transform: translateY(-3px); }
.sa-fab--seat:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sa-fab--seat .sa-fab-mascot { width: 100%; height: 100%; object-fit: contain; flex: none;
  filter: drop-shadow(0 5px 8px rgba(13,40,71,.2)) drop-shadow(0 0 7px rgba(86,155,245,.32));
  animation: fm-ai-blink 5.6s ease-in-out infinite; }
@keyframes fm-ai-blink {
  0%, 15%, 32%, 100% { opacity: 1; transform: scale(1);
    filter: brightness(1) drop-shadow(0 5px 8px rgba(13,40,71,.2)) drop-shadow(0 0 7px rgba(86,155,245,.32)); }
  5%, 20% { opacity: .38; transform: scale(.97);
    filter: brightness(.85) drop-shadow(0 5px 8px rgba(13,40,71,.2)) drop-shadow(0 0 4px rgba(86,155,245,.2)); }
  10%, 25% { opacity: 1; transform: scale(1.08);
    filter: brightness(1.65) drop-shadow(0 5px 8px rgba(13,40,71,.2)) drop-shadow(0 0 15px rgba(86,155,245,.85)); }
}
.sa-fab--seat:is(:hover, :focus-visible) .sa-fab-mascot,
.sa-root.sa-open .sa-fab--seat .sa-fab-mascot { animation: none; }
@media (max-width: 768px) {
  .sa-fab.sa-fab--seat { right: 9px; bottom: calc(130px + env(safe-area-inset-bottom)); width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-fab--seat { transition: none; }
  .sa-fab--seat .sa-fab-mascot { animation: none; }
  .sa-fab--seat:hover { transform: none; }
  .sa-fab--seat::before, .sa-fab--seat:is(:hover, :focus-visible)::before { animation: none; transform: none; opacity: .65; }
}
.sa-head .sa-head-ava--mascot { background: linear-gradient(145deg, #fff, #e5edf5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); width: 46px; height: 46px;
  border-radius: 14px; overflow: hidden; }
.sa-head .sa-head-ava--mascot::after { display: none; }
.sa-head-mascot { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.sa-backdrop { position: fixed; inset: 0; z-index: 79; background: rgba(0,20,40,.42); opacity: 0;
  pointer-events: none; transition: opacity .3s ease; }
.sa-root.sa-open .sa-backdrop { opacity: 1; pointer-events: auto; }
.sa-panel { position: fixed; top: 0; right: 0; height: 100dvh; width: 420px; max-width: 100vw; z-index: 80;
  pointer-events: auto; background: var(--paper); display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(105%); transition: transform .34s cubic-bezier(.4,0,.2,1); }
.sa-root.sa-open .sa-panel { transform: translateX(0); box-shadow: -24px 0 70px rgba(10,30,18,.28); }
/* Ручка ресайза ширины панели (десктоп): грип у левого края, курсор ew-resize. */
.sa-resize { position: absolute; left: 0; top: 0; width: 8px; height: 100%; cursor: ew-resize; z-index: 6; touch-action: none; }
.sa-resize::before { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 46px; border-radius: 3px; background: rgba(120,130,150,.4); transition: background .15s ease, height .15s ease; }
.sa-resize:hover::before { background: var(--accent); height: 66px; }
body.sa-resizing { cursor: ew-resize !important; user-select: none; }
.sa-head { display: flex; align-items: center; gap: 11px; padding: 15px 18px; flex: none;
  background: linear-gradient(115deg, var(--accent), var(--accent-d)); color: #fff; }
.sa-head-ava { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); flex: none;
  display: flex; align-items: center; justify-content: center; }
.sa-head-i { width: 20px; height: 20px; }
.sa-head-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.sa-head-txt b { font-size: 15.5px; }
.sa-head-sub { font-size: 12px; opacity: .82; }
.sa-x { border: none; background: transparent; color: #fff; cursor: pointer; width: 32px; height: 32px; flex: none;
  display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); opacity: .85;
  transition: opacity .14s ease, background .14s ease; }
.sa-x:hover { opacity: 1; background: rgba(255,255,255,.16); }
.sa-x-i { width: 18px; height: 18px; }
.sa-log { flex: 1; min-height: 180px; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px; }
.sa-msg { max-width: 88%; padding: 9px 12px; border-radius: 13px; font-size: 13.5px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word; }
.sa-msg.sa-bot { align-self: flex-start; background: var(--line-2); color: var(--ink);
  border-bottom-left-radius: 4px; }
.sa-msg.sa-user { align-self: flex-end; background: var(--accent); color: #fff;
  border-bottom-right-radius: 4px; }
.sa-cards { display: flex; flex-direction: column; gap: 6px; }
.sa-card { display: block; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px;
  text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 600;
  transition: border-color .14s ease, background .14s ease; }
.sa-card:hover { border-color: var(--accent); background: rgba(0,0,0,.03); }
.sa-form { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.sa-in { flex: 1; min-width: 0; height: 40px; padding: 0 13px; border: 1px solid var(--line);
  border-radius: var(--r); font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--paper); }
.sa-in:focus { outline: none; border-color: var(--accent); }
.sa-send { width: 40px; height: 40px; flex: none; border: none; border-radius: var(--r);
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform .14s ease; }
.sa-send:hover { transform: scale(1.05); }
.sa-send-i { width: 18px; height: 18px; }
@media (max-width: 768px) {
  .sa-fab { right: 14px; bottom: calc(122px + env(safe-area-inset-bottom)); }
  .sa-fab-t { display: none; }
  .sa-panel { width: 100vw !important; }
  .sa-resize { display: none; }
}

/* Кнопка «ИИ-эксперт» в шапке рядом с поиском — тот же консультант (drawer), что и FAB */
.hdr-ai { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 15px; flex: none;
  border: none; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; font-size: 13.5px; color: #fff;
  background: linear-gradient(115deg, var(--accent), var(--accent-d), var(--accent));
  background-size: 220% 100%; animation: sa-drift 7s ease-in-out infinite;
  box-shadow: 0 4px 14px rgba(90,169,255,.28); transition: transform .14s ease, box-shadow .14s ease; }
.hdr-ai:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10,117,54,.4); }
.hdr-ai svg { width: 17px; height: 17px; filter: drop-shadow(0 0 3px rgba(255,255,255,.5)); }
@media (max-width: 760px) { .hdr-ai { display: none; } }

/* === Редизайн панели консультанта: чипы, вложения, typing, богатые карточки, анимации === */
.sa-msg { animation: sa-msg-in .28s ease both; }
@keyframes sa-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sa-log { scroll-behavior: smooth; }
.sa-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.sa-chip { border: 1px solid var(--accent); background: transparent; color: var(--accent-d);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13px; cursor: pointer;
  transition: background .14s ease, color .14s ease; }
.sa-chip:hover { background: var(--accent); color: #fff; }
/* Плашка активности инструмента консультанта — видно, ЧТО делает агент (спиннер → ✓). */
.sa-tool { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 92%;
  margin: 1px 0; padding: 6px 12px 6px 10px; border-radius: 999px;
  font-size: 12.5px; line-height: 1.3; color: var(--ink-2); background: var(--accent-bg); }
.sa-tool-spin { width: 13px; height: 13px; flex: none; border: 2px solid rgba(0,0,0,.12);
  border-top-color: var(--accent); border-radius: 50%; animation: sa-spin .7s linear infinite; }
.sa-tool.done { opacity: .72; }
.sa-tool.done .sa-tool-spin { border: none; animation: none; display: inline-flex; align-items: center; justify-content: center; }
.sa-tool.done .sa-tool-spin::after { content: '✓'; color: var(--accent-d); font-weight: 700; font-size: 12px; line-height: 1; }
@keyframes sa-spin { to { transform: rotate(360deg); } }
.sa-typing { display: inline-flex; gap: 4px; align-items: center; padding: 2px 0; }
.sa-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted);
  animation: sa-blink 1.2s infinite; }
.sa-typing i:nth-child(2) { animation-delay: .2s; }
.sa-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes sa-blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.sa-form { flex-direction: column; gap: 8px; }
.sa-form-row { display: flex; gap: 8px; align-items: center; }
.sa-attach { flex: none; width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  transition: background .14s ease, color .14s ease; }
.sa-attach:hover { background: var(--line-2); color: var(--accent-d); }
.sa-attach input { display: none; }
.sa-attach-i { width: 19px; height: 19px; }
.sa-file-chip { align-self: flex-start; max-width: 100%; border: 1px solid var(--line);
  background: var(--line-2); color: var(--ink); border-radius: 999px; padding: 5px 12px;
  font: inherit; font-size: 12.5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-cards { display: flex; flex-direction: column; gap: 8px; }
.sa-card { display: flex; gap: 11px; align-items: center; padding: 9px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 13px; background: var(--paper);
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }
.sa-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10,30,18,.12); }
.sa-card-img { flex: none; width: 54px; height: 54px; border-radius: 9px;
  background: var(--line-2) center / contain no-repeat; }
.sa-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.sa-card-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sa-card-meta { display: flex; align-items: center; gap: 9px; }
.sa-card-price { font-size: 13.5px; color: var(--ink); }
.sa-card-stock { font-size: 11.5px; color: var(--muted); }
.sa-card-stock--in { color: var(--accent-d); }

/* === Консультант: эскалация на менеджера + действия из чата (корзина/избранное) === */
.sa-mgr { border: none; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; width: 30px; height: 30px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-left: auto; flex: none;
  transition: background .14s ease; }
.sa-mgr:hover { background: rgba(255,255,255,.28); }
.sa-mgr-i { width: 17px; height: 17px; }
.sa-esc { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--line-2);
  display: flex; flex-direction: column; gap: 8px; }
.sa-esc[hidden] { display: none; }
.sa-esc-t { font-size: 12.5px; color: var(--ink); }
.sa-esc-links { display: flex; gap: 8px; }
.sa-esc-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px;
  text-decoration: none; font-size: 13px; font-weight: 600; color: #fff; }
.sa-esc-link--tg { background: #29a9eb; }
.sa-esc-link--max { background: #6d4aff; }
.sa-esc-i { width: 16px; height: 16px; }
.sa-card-wrap { display: flex; flex-direction: column; }
.sa-card-act { display: flex; gap: 6px; padding: 6px 2px 0; }
.sa-card-btn { flex: 1; border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 9px; padding: 7px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease; }
.sa-card-btn:hover { border-color: var(--accent); color: var(--accent); }
.sa-card-btn--cart { background: var(--accent); color: #fff; border-color: var(--accent); }
.sa-card-btn--cart:hover { color: #fff; filter: brightness(1.06); }
.sa-card-btn:disabled { opacity: .7; cursor: default; }

/* === Живой чат с менеджером (handoff): кнопка режима, форма контакта, пузыри оператора === */
.sa-esc-here { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  border: none; border-radius: 10px; padding: 11px; font: inherit; font-weight: 600; font-size: 13.5px;
  color: #fff; background: var(--accent); cursor: pointer; transition: filter .14s ease; }
.sa-esc-here:hover { filter: brightness(1.07); }
.sa-esc-here svg { width: 18px; height: 18px; }
.sa-hand-intro { display: flex; flex-direction: column; gap: 8px; }
.sa-hand-form { display: flex; gap: 7px; }
.sa-hand-in { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1px solid var(--line);
  border-radius: 9px; font: inherit; font-size: 13px; color: var(--ink); background: var(--paper); }
.sa-hand-in:focus { outline: none; border-color: var(--accent); }
.sa-hand-ok { flex: none; border: none; border-radius: 9px; padding: 0 15px; font: inherit; font-weight: 600;
  font-size: 13px; color: #fff; background: var(--accent); cursor: pointer; transition: filter .14s ease; }
.sa-hand-ok:hover { filter: brightness(1.07); }
.sa-msg.sa-sys { align-self: center; max-width: 92%; text-align: center; background: transparent;
  color: var(--muted); font-size: 12px; padding: 4px 8px; }
.sa-msg.sa-op { align-self: flex-start; background: var(--line-2); color: var(--ink); border-left: 3px solid var(--accent); }
.sa-msg.sa-op::before { content: 'Менеджер'; display: block; font-size: 10.5px; font-weight: 700;
  color: var(--accent); margin-bottom: 2px; letter-spacing: .3px; }
.sa-fab-badge { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%;
  background: #e5484d; border: 2px solid #fff; }
/* === Эскалация: кнопки «Продолжить в Telegram/MAX» (переход в бот витрины) === */
.sa-esc-links { display: flex; flex-direction: column; gap: 8px; }
.sa-esc-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 12px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 14px; color: #fff;
  transition: filter .14s ease, transform .14s ease; }
.sa-esc-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.sa-esc-btn svg { width: 19px; height: 19px; fill: currentColor; }
.sa-esc-btn--tg { background: #29a9eb; }
.sa-esc-btn--max { background: #6d4aff; }

/* === Премиум-полиш панели консультанта (глубина, живость, мягкость) === */
.sa-panel { box-shadow: -24px 0 60px -20px rgba(15,23,42,.28); }
/* Шапка: живая онлайн-точка + внутренний glow аватара */
.sa-head-ava { position: relative; box-shadow: inset 0 0 14px rgba(255,255,255,.18); }
.sa-head-ava::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 50%; background: #3ddc84; border: 2px solid #fff; animation: sa-pulse 2.4s ease-in-out infinite; }
@keyframes sa-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(90,169,255,.55); } 60% { box-shadow: 0 0 0 6px rgba(90,169,255,0); } }
.sa-head-sub { letter-spacing: .1px; }
/* Лог: мягкая глубина фона + воздух + тонкий скроллбар */
.sa-log { background: linear-gradient(180deg, var(--paper) 0%, var(--line-2) 100%); padding: 18px 16px; gap: 10px; }
.sa-log::-webkit-scrollbar { width: 6px; }
.sa-log::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--line) 70%, transparent); border-radius: 99px; }
.sa-log::-webkit-scrollbar-track { background: transparent; }
/* Пузыри: мягкие тени, хвостики (asymmetric радиус), градиент у пользователя */
.sa-msg { border-radius: 16px; padding: 10px 13px; box-shadow: 0 1px 2px rgba(20,30,50,.05); }
.sa-msg.sa-bot { border-bottom-left-radius: 6px; }
.sa-msg.sa-user { border-bottom-right-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-d)); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 32%, transparent); }
.sa-msg.sa-op { border-bottom-left-radius: 6px; box-shadow: 0 2px 10px rgba(20,30,50,.07); }
/* Форма: приподнятая (мягкая тень вместо жёсткого border) + элегантный фокус */
.sa-form { border-top: none; box-shadow: 0 -1px 0 color-mix(in srgb, var(--line) 60%, transparent),
  0 -10px 24px -16px rgba(20,30,50,.14); }
.sa-in { border-radius: 12px; transition: border-color .15s ease, box-shadow .15s ease; }
.sa-in:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.sa-send { box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 32%, transparent); }
.sa-send:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 42%, transparent); }

/* Markdown-элементы в ответах консультанта (assistantMd) */
.sa-md-h { display: block; margin: 7px 0 2px; font-size: 14px; font-weight: 700; }
.sa-md-hr { display: block; height: 1px; background: var(--line); margin: 8px 0; border: 0; }
.sa-md-li { display: block; padding-left: 15px; position: relative; }
.sa-md-li::before { content: '•'; position: absolute; left: 3px; color: var(--accent); font-weight: 700; }

.sa-msg a { color: var(--accent); text-decoration: underline; }
.sa-msg.sa-user a { color: #fff; }

.sa-md-table { border-collapse: collapse; margin: 7px 0; font-size: 12px; display: block; max-width: 100%; overflow-x: auto; }
.sa-md-table th, .sa-md-table td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; white-space: nowrap; }
.sa-md-quote { display: block; margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--accent); background: rgba(0,0,0,.035); border-radius: 0 6px 6px 0; }
.sa-md-table th { font-weight: 700; background: var(--line-2); }

/* Баннер ошибки оформления (checkout_err: адрес/согласие) */
.co-err { margin: 0 0 16px; padding: 11px 15px; border-radius: 10px; background: #fdecec; border: 1px solid #f3b4b4; color: #b42318; font-size: 14px; font-weight: 500; line-height: 1.4; }

/* Зачёркнутая старая цена + inline-бейдж скидки (карточка списка / страница товара) */
.price-old { font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted-3); text-decoration: line-through; font-size: 15px; }
.pcard-prices { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.badge-inline { position: static; top: auto; left: auto; font-size: 13px; }

/* iOS-анти-зум, усиление: базовое правило выше (селектор `textarea`, 0-0-1) перебивалось
   тема-специфичными `.quote-form textarea { font: inherit }` и подобными (0-1-1) — сокращённое
   `font` сбрасывает и размер. Из-за этого поле комментария в форме КП оставалось 14px и Safari
   зумил вьюпорт при фокусе. Дублируем в конце файла с !important: анти-зум — UX-инвариант,
   декоративные правила его перекрывать не должны. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px !important; }
}

/* -- Fermo homepage ------- */
.fm-hero-in { grid-template-areas: "copy artwork" "stats artwork"; column-gap: 36px; row-gap: 0; }
.fm-hero-copy { grid-area: copy; min-width: 0; }
.fm-hero-in > .hero-stats { grid-area: stats; align-self: start; }
.fm-hero-art { grid-area: artwork; width: 100%; max-width: 560px; justify-self: end; pointer-events: none; }
.fm-hero-art img { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 22px 28px rgba(0,0,0,.22)); }

.fm-svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fm-svc-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px;
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink);
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.fm-svc-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.fm-svc-card .ic-chip { align-self: flex-start; margin-bottom: 6px; }
.fm-svc-card b { font-size: 17px; font-weight: 700; }
.fm-svc-card span { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* -- Category artwork ------- */
.cat-vis { height: 148px; justify-content: center; background: var(--accent-bg); }
.cat-vis.has-img { padding: 10px; background: radial-gradient(ellipse at 50% 38%, #fff 0%, #EDF3F8 100%); }
.cat-vis .cat-img { display: block; width: 100%; height: 100%; max-height: none; max-width: 100%; object-fit: contain; }
.fm-cat-ic { color: var(--accent); --icon-size: 34px; display: inline-flex; }

.fm-lead { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.fm-lead h2 { font-family: var(--display); font-weight: 700; font-size: 32px; letter-spacing: -1px; margin: 0 0 22px; color: #fff; }
.fm-lead-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fm-lead-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--on-dark); font-size: 15.5px; line-height: 1.45; }
.fm-lead-list .ic-sm { flex: none; margin-top: 2px; }
.fm-lead-form { background: var(--paper); border-radius: var(--r-lg); padding: 24px; margin: 0; }
.fm-lead-form .btn { --accent-d: #003E6B; background: #003E6B; color: #fff; }
.fm-lead-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.fm-lead-note a { color: var(--muted); }
/* форма на белой карточке внутри тёмной панели → вернуть «светлые» акценты */
.fm-lead-form { --accent: #003E6B; --accent-d: #003E6B; --on-accent: #fff; }

@media (max-width: 980px) {
  .fm-hero-in { grid-template-areas: "copy" "artwork" "stats"; row-gap: 28px; }
  .fm-hero-copy .hero-cta { margin-bottom: 0; }
  .fm-hero-art { max-width: 400px; justify-self: center; }
  .fm-svc { grid-template-columns: repeat(2, 1fr); }
  .fm-lead { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 600px) {
  .fm-hero-art { max-width: 290px; }
  .fm-svc { grid-template-columns: 1fr; }
  .fm-lead h2 { font-size: 26px; }
}

/* Логотип ФЕРМО (тот же SVG, что в админке fermo.icubix.ru): в шапке — синий, в подвале — белый. */
/* -- Official Fermo wordmark and tagline ------- */
.hdr .brand { max-width: 100%; }
.fm-logo { display: block; width: 326px; max-width: 100%; height: auto; }
.fm-logo--ftr { width: 280px; filter: brightness(0) invert(1); }
@media (max-width: 1160px) {
  .hdr .fm-logo { width: 260px; }
  .hdr-phone { display: none; }
}
@media (max-width: 600px) {
  .hdr .fm-logo { width: 120px; height: 26px; }
  .fm-logo--ftr { width: 140px; height: auto; }
}

/* ══ ФЕРМО: страницы услуг ══ */
/* -- Service photography ------- */
.fm-service-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.fm-service-copy { min-width: 0; }
.fm-service-intro h1 { overflow-wrap: anywhere; }
.fm-service-photo { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-lg); }
.fm-service-center { padding: 12px 0 0; }
.fm-service-center .h1 { font-size: 40px; line-height: 1.15; letter-spacing: -1px; }
.fm-service-lead { margin: 20px 0 0; color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 540px; }
@media (max-width: 980px) {
  .fm-service-intro { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fm-service-center .h1 { font-size: 34px; }
}
@media (max-width: 600px) {
  .fm-service-intro h1 { -webkit-hyphens: auto; hyphens: auto; }
}

.svc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; padding: 0; }
.svc-chip { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--on-dark);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: 7px 14px; }
.svc-chip .ic-sm { color: var(--accent); flex: none; }
/* .svc-chip как ссылка (пилюли-якоря фильтра /projects) — без подчёркивания, hover как у sort-pill. */
a.svc-chip { text-decoration: none; transition: background-color .15s, border-color .15s; }
a.svc-chip:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.24); }

.svc-sec + .svc-sec { padding-top: 0; margin-top: 40px; }
.svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px;
  max-width: 720px; }
.svc-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5;
  color: var(--ink); }
.svc-list .ic-sm { flex: none; margin-top: 3px; }

.svc-faq { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.svc-faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 16px 20px; }
.svc-faq-item summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; }
.svc-faq-item summary::-webkit-details-marker { display: none; }
.svc-faq-item summary::after { content: "+"; float: right; color: var(--muted); font-weight: 400; }
.svc-faq-item[open] summary::after { content: "–"; }
.svc-faq-item p { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* Мессенджеры в шапке (рядом с телефоном): фирменные цвета Telegram/MAX — узнаются с одного взгляда. */
.hdr-msg { display: inline-flex; gap: 6px; flex: none; }
.hdr-msg-btn { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; transition: filter .14s, transform .1s; }
.hdr-msg-btn .ic-sm { --icon-size: 19px; color: #fff; }
.hdr-msg-btn--tg { background: #29A9EB; }
.hdr-msg-btn--max { background: #6D4AFF; }
.hdr-msg-btn:hover { filter: brightness(1.08); }
.hdr-msg-btn:active { transform: translateY(1px); }
@media (max-width: 980px) { .hdr-msg-btn { width: 36px; height: 36px; } }
@media (max-width: 420px) { .hdr-actions { gap: 6px; } .hdr-msg { gap: 4px; } .hdr-msg-btn { width: 32px; height: 32px; } .hdr-msg-btn .ic-sm { --icon-size: 16px; } }

/* ══ ФЕРМО: адаптив, найденный QA-аудитом (26.09) ══
   Сетка вендоров «Партнёры» держала 4 колонки на любом экране → горизонтальный скролл на телефоне;
   minmax(0,1fr) + перенос не дают длинному названию раздвинуть колонку.
   Значок конфигуратора (nowrap) вылезал за экран на 375px. */
.brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.brand-tile .brand-name { overflow-wrap: anywhere; }
@media (max-width: 980px) { .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .brand-tile { padding: 14px; } }
@media (max-width: 600px) { .cfg-badge { white-space: normal; } }
/* «Авторизации»: марка — главное (жирная, цвет текста), область — обычный текст слева.
   На телефоне строка складывается в столбик: правый столбец в 3–4 строки читался плохо. */
.auth-row { align-items: flex-start; }
.auth-row .k { flex: 0 0 34%; color: var(--ink); font-weight: 600; font-size: 14px; }
.auth-row .v { flex: 1; text-align: left; font-family: var(--sans); font-weight: var(--body-weight); color: var(--ink-2); font-size: 14px; }
@media (max-width: 600px) {
  .req-card { padding: 4px 18px; }
  .auth-row { flex-direction: column; gap: 4px; }
  .auth-row .k { flex: none; }
}
/* Заголовки секций на телефоне: 34px давали «Комплекс услуг для бизнеса» в 3 строки, а ссылка
   «Все услуги →» зажималась сбоку — складываем в столбик и уменьшаем кегль. */
@media (max-width: 600px) {
  .sec { padding-top: 44px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 20px; }
  .sec-h { font-size: 26px; letter-spacing: -.6px; }
}
/* Лента вендоров-партнёров: 16 имён ровной сеткой по центру вместо space-between. */
.brands-row { justify-content: center; column-gap: 34px; row-gap: 14px; }
.brands-row a { color: #5F646C; font-size: 20px; }
.fm-brands-all { display: block; text-align: center; margin-top: 22px; }
@media (max-width: 600px) {
  .brands-box { padding: 24px 18px; }
  .brands-row { column-gap: 20px; }
  .brands-row a { font-size: 16px; }
}
/* Карточки услуг на телефоне: иконка слева, текст справа — 6 карточек занимали ~4 экрана. */
@media (max-width: 600px) {
  .fm-svc { gap: 10px; }
  .fm-svc-card { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; padding: 16px; align-items: start; }
  .fm-svc-card .ic-chip { grid-row: span 2; margin: 0; --icon-chip-pad: 9px; }
  .fm-svc-card b { font-size: 15.5px; }
  .fm-svc-card span { font-size: 13.5px; }
}
/* Текстовые страницы (оплата, гарантия, оферта): строка во всю ширину 1280px читалась тяжело —
   ограничиваем меру ~80 знаков. */
.prose { max-width: 820px; line-height: 1.65; }
/* -- Careers ------- */
.fm-careers-hero { background: var(--paper); padding: 28px 0 64px; }
.fm-careers-hero .crumbs { margin: 0 0 44px; color: var(--muted); }
.fm-careers-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
.fm-careers-copy { min-width: 0; }
.fm-careers-label { margin: 0 0 20px; color: var(--accent); font-size: 14px; font-weight: 650; }
.fm-careers h1 { margin: 0; max-width: 620px; font-size: clamp(34px, 3.5vw, 50px); font-weight: 600; line-height: 1.12; letter-spacing: -1.6px; }
.fm-careers-lead { margin: 24px 0 28px; max-width: 560px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.fm-careers .btn { min-height: 48px; gap: 10px; }
.fm-careers-photo { margin: 0; min-width: 0; }
.fm-careers-photo img { display: block; width: 100%; height: auto; border-radius: var(--r-lg); }
.fm-careers-photo figcaption { margin-top: 12px; color: var(--muted); font-size: 13px; }
.fm-careers-positions { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px 48px; padding-top: 56px; padding-bottom: 64px; scroll-margin-top: 100px; }
.fm-careers-heading h2, .fm-careers-contact h2 { margin: 0 0 12px; font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -.5px; }
.fm-careers-heading p, .fm-careers-contact p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.fm-vac { align-self: start; min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.fm-vac-head { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px; cursor: pointer; list-style: none; border-radius: var(--r-lg); }
.fm-vac-head::-webkit-details-marker { display: none; }
.fm-vac-head h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -.5px; }
.fm-vac-pay { margin: 0; color: var(--muted); font-size: 14px; }
.fm-vac-toggle { flex: none; color: var(--accent); }
.fm-vac[open] .fm-vac-toggle { transform: rotate(180deg); }
.fm-vac-body { display: grid; gap: 28px; margin: 0 28px; padding: 28px 0; border-top: 1px solid var(--line-2); }
.fm-vac-body h4 { margin: 0 0 10px; font-size: 16px; }
.fm-vac-body p, .fm-vac-body li { margin: 0; max-width: 65ch; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.fm-vac-body ul { display: grid; gap: 8px; margin: 0; padding-left: 20px; }
.fm-vac-body li::marker { color: var(--accent); }
.fm-vac-apply { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.fm-vac-apply p { flex: 1 1 230px; color: var(--muted); font-size: 13px; }
.fm-careers-contact { grid-column: 2; padding: 8px 0 0; }
.fm-careers-email { display: block; width: fit-content; max-width: 100%; margin-top: 20px; color: var(--accent); font-size: 26px; font-weight: 600; overflow-wrap: anywhere; text-underline-offset: 5px; }
.fm-careers-phone { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-size: 16px; text-decoration: none; }
.fm-careers main a:focus-visible, .fm-vac-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
@media (max-width: 1000px) {
  .fm-careers-intro { gap: 32px; }
  .fm-careers-positions { grid-template-columns: 210px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 760px) {
  .fm-careers .wrap { padding-left: 20px; padding-right: 20px; }
  .fm-careers-hero { padding: 24px 0 36px; }
  .fm-careers-hero .crumbs { margin-bottom: 28px; }
  .fm-careers-intro, .fm-careers-positions { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .fm-careers h1 { max-width: 560px; font-size: 36px; letter-spacing: -1px; }
  .fm-careers-lead { margin-top: 20px; font-size: 16px; }
  .fm-careers-positions { padding-top: 36px; padding-bottom: 40px; }
  .fm-careers-contact { grid-column: auto; }
  .fm-vac-head { align-items: start; gap: 14px; padding: 22px 20px; }
  .fm-vac-head h3 { font-size: 22px; }
  .fm-vac-toggle { margin-top: 4px; }
  .fm-vac-body { margin: 0 20px; padding: 24px 0; gap: 24px; }
  .fm-vac-apply .btn { width: 100%; }
}
/* Цифры в hero страниц на телефоне — сетка 2×2 (правило ≤520 выше больше не складывает в столбик). */
@media (max-width: 520px) { .ph-stats { gap: 18px 16px; } .ph-stat b { font-size: 24px; } }
.btn-ghost-d { gap: 8px; }
.btn-ghost { gap: 8px; }
/* Карта контактов недоступна (нет ключа/сети) → адрес по центру светлым текстом, а не тёмным в углу. */
.contacts-map-fallback { display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 24px; color: var(--on-dark); font-size: 15px; line-height: 1.5; }
/* Статья блога: подзаголовки и списки (разметка «## »/«- » в абзацах, см. fermo/blog_post.html). */
.bp-body h2 { font-family: var(--display); font-size: 23px; line-height: 1.3; letter-spacing: -.4px; color: var(--ink); margin: 34px 0 12px; }
.bp-body ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.bp-body li { background: var(--accent-bg); border-radius: var(--r); padding: 12px 14px; font-size: 15px; line-height: 1.45; color: var(--ink); }
@media (max-width: 600px) { .bp-body h2 { font-size: 20px; } .bp-body ul { grid-template-columns: 1fr; } }
.bp-body h3 { font-size: 17px; line-height: 1.35; color: var(--ink); margin: 22px 0 8px; }

/* ══ ФЕРМО: модель продаж «как у servermall» (26.09.2026) ══
   Цена «от X ₽», корзины нет — главное действие «Получить КП» (карточка, товар, шапка, таб-бар). */
.price-from { font-size: .72em; font-weight: 500; color: var(--muted); margin-right: 2px; }
.pd-buy .price-from { color: var(--on-dark-2); }
.pd-vat { margin: -6px 0 16px; font-size: 12.5px; color: var(--on-dark-2); }
.pd-buy-cta { display: flex; flex-direction: column; gap: 10px; }
.pd-buy-cta .btn, .pd-buy-cta .btn-ghost-d { width: 100%; }
.pd-buy-cta .btn .ic-sm { color: #003E6B; }
.kp-note { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.kp-note a { color: var(--muted); }
.hdr-kp { white-space: nowrap; }

/* ══ ФЕРМО: цены с НДС / без НДС (как у servermall, fermo/_vat.html) ══
   По умолчанию — без НДС (+ строка НДС); html.vat-incl — цены с НДС. Обе формы в разметке. */
.vat-p--gross { display: none; }
html.vat-incl .vat-p--net { display: none; }
html.vat-incl .vat-p--gross { display: inline; }
.vat-line { display: block; margin-top: 2px; font-family: var(--sans); font-size: 12.5px; font-weight: var(--body-weight); color: var(--muted); letter-spacing: 0; }
.pd-buy .vat-line { color: var(--on-dark-2); font-size: 13px; }
.vat-toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; user-select: none; white-space: nowrap; }
.vat-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vat-sw { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--line); transition: background .15s; flex: none; }
.vat-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.vat-toggle input:checked + .vat-sw { background: var(--accent); }
.vat-toggle input:checked + .vat-sw::after { transform: translateX(16px); }
.vat-toggle input:focus-visible + .vat-sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.vat-toggle--dark { color: var(--on-dark); }
.vat-toggle--dark .vat-sw { background: rgba(255,255,255,.22); }
.pd-vat { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.sortbar { gap: 16px; }
.quote-form select { padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; background: #fff; color: var(--ink); }
@media (max-width: 600px) { .sortbar .vat-toggle { order: 3; width: 100%; } }

/* ══ ФЕРМО: главная как у fermo.ru (27.09.2026) — плашки в hero, «О нас», преимущества ══ */
.fm-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.fm-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: var(--on-dark); font-size: 13px; }
.fm-badge .ic-sm { color: var(--accent); --icon-size: 15px; }
.fm-sec-lead { margin: 10px 0 0; max-width: 640px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.fm-svc-card--all { background: var(--accent-bg); border-color: transparent; }

.fm-about { display: grid; grid-template-columns: 220px 1fr; gap: 40px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 40px; }
.fm-about-side { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.fm-about-lead { margin: 0 0 32px; font-family: var(--display); font-weight: 600; font-size: 28px; line-height: 1.3; letter-spacing: -.5px; color: var(--ink); }
.fm-about-lead span { color: var(--muted); }
.fm-about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fm-about-stat { display: flex; flex-direction: column; gap: 6px; }
.fm-about-stat .ic-chip { align-self: flex-start; margin-bottom: 8px; }
.fm-about-stat b { font-size: 17px; }
.fm-about-stat span { font-size: 14px; line-height: 1.5; color: var(--muted); }

.fm-adv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fm-adv-item { display: flex; flex-direction: column; gap: 8px; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px; }
.fm-adv-item .ic-chip { align-self: flex-start; margin-bottom: 6px; }
.fm-adv-item b { font-size: 16.5px; }
.fm-adv-item span { font-size: 14px; line-height: 1.55; color: var(--muted); }

@media (max-width: 980px) {
  .fm-about { grid-template-columns: 1fr; gap: 20px; padding: 28px; }
  .fm-about-side { flex-direction: row; align-items: center; }
  .fm-adv { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .fm-about { padding: 22px 18px; }
  .fm-about-lead { font-size: 21px; margin-bottom: 22px; }
  .fm-about-stats { grid-template-columns: 1fr; gap: 16px; }
  .fm-adv { grid-template-columns: 1fr; gap: 10px; }
  .fm-adv-item { padding: 18px; }
  .fm-badge { font-size: 12px; padding: 6px 11px; }
}
/* Разделы каталога на главной: у RackCore их 7 и лента-карусель ок; у fermo 20 — в ленте видно
   4 из 20. Корпоративной главной нужна вся структура каталога сразу → сетка. */
.cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
.cats > .cat { width: auto; min-width: 0; flex: none; }
.cats .cat-vis.has-img { height: 120px; }
@media (max-width: 1180px) { .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .cats .cat-vis.has-img { height: 96px; } .cats .cat-desc { display: none; } }
/* Шапка на телефоне: с кнопкой «Получить КП» стало 5 кнопок → перенос на 2 строки. «Подборка»
   (избранное) — функция магазина, на корпоративном fermo второстепенна: на узких экранах прячем. */
@media (max-width: 480px) { .hdr-actions .fav-link { display: none; } }

/* -- Client references ------- */
.fm-clients-hero .page-hero-in { padding-bottom: 40px; }
.fm-clients-hero .lead { max-width: 700px; margin-bottom: 22px; }
.fm-clients-hero-link { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-underline-offset: 5px; }
.fm-client-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.fm-client-card { display: flex; flex-direction: column; min-width: 0; min-height: 232px; padding: 28px 30px;
  color: var(--accent-d); text-decoration: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fm-client-card:nth-child(3n) { border-right: 0; }
.fm-client-card:nth-last-child(-n+3) { border-bottom: 0; }
a.fm-client-card:hover { background: #fafbfd; }
.fm-client-sector { color: var(--muted); font-size: 12.5px; }
.fm-client-card h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.3; letter-spacing: -.4px; }
.fm-client-logo { display: flex; align-items: center; justify-content: flex-start; flex: none; width: 180px; max-width: 100%; height: 64px; margin-bottom: 10px; overflow: hidden; }
.fm-client-logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.fm-client-logo--featured { justify-content: center; width: 100%; height: 100px; margin: 20px 0 24px; }
.fm-client-logo--featured img { max-width: 240px; max-height: 80px; object-position: center; }
.fm-client-logo--umpo img { max-width: 300px; max-height: none; object-fit: cover; }
.fm-client-logo--reverse { width: 80px; padding: 8px; background: #003e6b; border-radius: 6px; }
.fm-client-logo--reverse img { object-position: center; }
.fm-client-legal { max-width: 310px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.fm-client-proof { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--accent-d); font-size: 12px; }
.fm-client-card .fm-client-proof { margin-top: auto; padding-top: 24px; }
.fm-client-group { border-top: 1px solid var(--line); }
.fm-client-group:last-of-type { border-bottom: 1px solid var(--line); }
.fm-client-group summary { display: flex; align-items: center; gap: 16px; min-height: 82px; padding: 20px 0; cursor: pointer; list-style: none; }
.fm-client-group summary::-webkit-details-marker { display: none; }
.fm-client-group summary h3 { margin: 0; flex: 1; font-size: 19px; font-weight: 600; line-height: 1.4; }
.fm-client-count { color: var(--muted); font-size: 13px; }
.fm-client-group[open] summary .ic-sm { transform: rotate(180deg); }
.fm-client-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; padding: 0 0 20px; }
.fm-client-row { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; text-decoration: none; border-top: 1px solid var(--line); }
.fm-client-row strong { font-size: 15px; line-height: 1.5; }
.fm-client-row > span:not(.fm-client-proof) { font-size: 12px; color: var(--muted); }
.fm-client-row .fm-client-proof { justify-content: flex-start; padding-top: 8px; margin-top: auto; }
a.fm-client-row:hover strong { color: var(--accent-d); text-decoration: underline; text-underline-offset: 3px; }
.fm-client-note { max-width: 860px; margin: 20px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.fm-client-note a { color: var(--accent-d); }
.fm-client-letters { display: grid; grid-template-columns: 1fr 1.8fr; gap: 64px; scroll-margin-top: 160px; }
.fm-client-letters-intro { padding-top: 18px; }
.fm-client-letters-intro p { max-width: 280px; color: var(--muted); }
.fm-client-letters-intro > a { display: inline-block; color: var(--accent-d); font-size: 13px; text-underline-offset: 4px; }
.fm-client-letter { display: flex; align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.fm-client-letter:first-child { border-top: 1px solid var(--line); }
.fm-client-letter > span:not(.fm-client-file):not(.fm-client-logo):not(.fm-client-letter-icon) { flex: 1; min-width: 0; }
.fm-client-letter .fm-client-logo--letter, .fm-client-letter-icon { flex: none; width: 96px; height: 52px; margin: 0; }
.fm-client-letter-icon { display: flex; align-items: center; justify-content: center; color: var(--accent-d); }
.fm-client-letter strong { display: block; margin-bottom: 4px; font-size: 17px; }
.fm-client-letter > span > span { display: block; font-size: 12.5px; color: var(--muted); }
.fm-client-letter .fm-client-file { display: flex; align-items: center; gap: 8px; flex: none; color: var(--accent-d); font-size: 12px; }
.fm-client-letter:hover strong { color: var(--accent-d); text-decoration: underline; text-underline-offset: 3px; }
.fm-client-card:focus-visible, .fm-client-row:focus-visible, .fm-client-letter:focus-visible,
.fm-client-group summary:focus-visible { outline: 2px solid var(--accent-d); outline-offset: -3px; }
/* -- Homepage client references ------- */
.fm-home-clients { padding: 36px 0 32px; background: var(--paper); border-bottom: 1px solid var(--line); }
.fm-home-clients .sec-head { align-items: center; gap: 16px; margin-bottom: 24px; }
.fm-home-clients .sec-h { font-size: 26px; }
.fm-home-client-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 0; margin: 0; padding: 0; list-style: none; }
.fm-home-client { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 22px; border-right: 1px solid var(--line); }
.fm-home-client:last-child { border-right: 0; }
.fm-home-client .fm-client-logo--home { justify-content: center; width: 160px; height: 64px; margin-bottom: 12px; }
.fm-home-client .fm-client-logo--home img { object-position: center; }
.fm-home-client .fm-client-logo--umpo img { transform: scale(1.35); }
.fm-home-client-name { color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.fm-home-clients .sec-all:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 5px; }
@media (max-width: 980px) {
  .fm-client-card { padding: 24px 22px; }
  .fm-client-letters { gap: 32px; }
  .fm-client-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-home-client-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fm-home-client:nth-child(3n) { border-right: 0; }
}
@media (max-width: 600px) {
  .fm-client-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-client-card { min-height: 230px; padding: 18px 14px; }
  .fm-client-card:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .fm-client-card:nth-child(2n) { border-right: 0; }
  .fm-client-card:nth-last-child(-n+2) { border-bottom: 0; }
  .fm-client-card h3 { font-size: 15px; letter-spacing: -.3px; }
  .fm-client-sector { font-size: 10px; }
  .fm-client-logo--featured { height: 72px; margin: 14px 0 18px; }
  .fm-client-logo--featured img { max-height: 64px; }
  .fm-client-logo--umpo img { max-height: none; }
  .fm-client-card .fm-client-legal { font-size: 10px; }
  .fm-client-card .fm-client-proof { font-size: 10px; gap: 6px; }
  .fm-client-card .fm-client-proof { padding-top: 18px; }
  .fm-client-group summary { gap: 12px; min-height: 76px; }
  .fm-client-group summary h3 { font-size: 16px; }
  .fm-client-list { grid-template-columns: 1fr; padding-bottom: 10px; }
  .fm-client-letters { grid-template-columns: 1fr; gap: 24px; scroll-margin-top: 140px; }
  .fm-client-letter { gap: 12px; }
  .fm-client-letter .fm-client-logo--letter, .fm-client-letter-icon { width: 68px; height: 44px; }
  .fm-client-letter strong { font-size: 16px; }
  .fm-home-clients { padding: 28px 0; }
  .fm-home-clients .sec-head { align-items: flex-start; gap: 10px; }
  .fm-home-clients .sec-h { font-size: 24px; }
  .fm-home-clients .sec-all { font-size: 12px; }
  .fm-home-client-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .fm-home-client { padding: 0 16px; }
  .fm-home-client:nth-child(n) { border-right: 1px solid var(--line); }
  .fm-home-client:nth-child(2n) { border-right: 0; }
  .fm-home-client .fm-client-logo--home { height: 54px; margin-bottom: 8px; }
}

/* ══ ФЕРМО: лендинг «Подготовка закупки IT-оборудования» (fermo/service_tender_docs.html) ══
   Ритм блоков вместо 12 одинаковых карточек: лист ТЗ в hero → «было/стало» → сетка → таймлайн →
   тёмная полоса принципов → FAQ в 2 колонки → форма с чек-листом. */
.td-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.td-hero .lead { margin-bottom: 30px; }
.td-nw { white-space: nowrap; }

/* Лист ТЗ: бумага на тёмном hero, слегка повёрнута — «документ на столе». */
.td-doc { background: var(--paper); color: var(--ink); border-radius: var(--r-lg); padding: 22px 22px 18px;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.55); transform: rotate(1.2deg); max-width: 440px; justify-self: end; width: 100%;
  /* Лист светлый, а hero переназначает акцент под тёмный фон — возвращаем фирменный синий. */
  --accent: #003E6B; --accent-d: #003E6B; --accent-bg: #E9EFF5; }
.td-doc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.td-doc-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-d); }
.td-doc-n { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.td-doc-title { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -.3px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.td-doc-rows { display: flex; flex-direction: column; }
.td-doc-row { display: grid; grid-template-columns: 42% 1fr; gap: 10px; padding: 9px 8px; font-size: 13px;
  border-bottom: 1px dashed var(--line-2); position: relative; border-radius: var(--r-sm); }
.td-doc-row span { color: var(--muted); }
.td-doc-row b { font-weight: 600; }
.td-doc-row--hl { background: var(--accent-bg); border-bottom-color: transparent; }
.td-doc-note { grid-column: 2; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--ok);
  display: inline-flex; align-items: center; gap: 5px; }
.td-doc-note::before { content: "+"; font-weight: 700; }
.td-doc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.td-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ok);
  background: var(--ok-bg); border-radius: 999px; padding: 5px 10px; }
.td-badge .ic-sm { --icon-size-sm: 13px; }

/* Было → стало */
.td-ba { display: flex; flex-direction: column; gap: 12px; }
.td-ba-head, .td-ba-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.td-ba-h { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; padding: 0 4px; }
.td-ba-h--bad { color: var(--bad); }
.td-ba-h--good { color: var(--ok); }
.td-ba-cell { border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; border: 1px solid; }
.td-ba-cell q { quotes: "«" "»"; font-size: 15.5px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.td-ba-cell--bad { background: var(--bad-bg); border-color: rgba(180,35,24,.18); }
.td-ba-cell--bad q { text-decoration: line-through; text-decoration-color: rgba(180,35,24,.45); text-decoration-thickness: 1.5px; }
.td-ba-cell--good { background: var(--paper); border-color: rgba(51,118,23,.35); box-shadow: var(--shadow); }
.td-ba-why { font-size: 13px; line-height: 1.45; color: var(--muted); }
.td-ba-cell--bad .td-ba-why { color: var(--bad); }
.td-ba-arr { display: flex; align-items: center; justify-content: center; color: var(--accent-d); }
.td-ba-arr .ic { width: 22px; height: 22px; }

/* «Что делаем» — крупнее иконки, чем у типовой сетки */
.td-what .val-ic { width: 48px; height: 48px; }
.td-what .val-ic .ic, .td-what .val-ic svg { width: 24px; height: 24px; }

/* Таймлайн: номера соединены линией */
.td-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; position: relative; }
.td-steps::before { content: ""; position: absolute; top: 20px; left: 20px; right: 20px; height: 2px;
  background: linear-gradient(90deg, var(--accent) 0 60%, var(--line) 60%); }
.td-step { position: relative; }
.td-step-n { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent); font-family: var(--display); font-weight: 700; font-size: 17px;
  box-shadow: 0 0 0 6px var(--bg); margin-bottom: 16px; position: relative; }
.td-step:last-child .td-step-n { background: var(--paper); color: var(--accent-d); border: 2px solid var(--accent); }
.td-step h3 { font-family: var(--display); font-weight: 600; font-size: 17px; margin: 0 0 6px; }
.td-step p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* Принципы — тёмная полоса без карточек, пауза между светлыми блоками */
.td-band { background: var(--dark-2); color: #fff; border-radius: 18px; padding: 40px 44px; position: relative; overflow: hidden; }
.td-band::before { content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 46px); }
.td-band-eyebrow { position: relative; font-family: var(--mono); font-size: 12px; letter-spacing: 2px; color: var(--accent); margin-bottom: 22px; }
.td-band-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.td-band-i + .td-band-i { border-left: 1px solid rgba(255,255,255,.12); padding-left: 36px; }
.td-band-ic { color: var(--accent); width: 26px; height: 26px; margin-bottom: 12px; }
.td-band-i h3 { font-family: var(--display); font-weight: 700; font-size: 19px; margin: 0 0 8px; color: #fff; }
.td-band-i p { font-size: 14px; line-height: 1.6; color: var(--on-dark); margin: 0; }

/* FAQ в две колонки на всю ширину */
.td-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

.td-lead-sub { color: var(--on-dark-2); font-size: 14px; margin: -8px 0 14px; }

/* Мобильная прилипающая кнопка над таб-баром */
.td-sticky { display: none; }

@media (max-width: 980px) {
  .td-hero { grid-template-columns: 1fr; gap: 32px; }
  .td-doc { justify-self: start; transform: none; }
  .td-steps { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .td-steps::before { display: none; }
  .td-band-grid { grid-template-columns: 1fr; gap: 24px; }
  .td-band-i + .td-band-i { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; }
}
@media (max-width: 768px) {
  .td-ba { gap: 24px; }
  .td-ba-head { display: none; }
  .td-ba-row { grid-template-columns: 1fr; gap: 6px; }
  .td-ba-arr { transform: rotate(90deg); height: 24px; }
  .td-faq { grid-template-columns: 1fr; }
  .td-band { padding: 28px 22px; }
  .td-sticky { display: flex; align-items: center; justify-content: center; gap: 8px; position: fixed; z-index: 60;
    left: 16px; right: 16px; bottom: calc(62px + env(safe-area-inset-bottom)); height: 48px; border-radius: var(--r);
    background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 15px; text-decoration: none;
    box-shadow: 0 10px 28px -8px rgba(0,48,82,.55); transition: opacity .2s, transform .2s; }
  .td-sticky--off { opacity: 0; transform: translateY(12px); pointer-events: none; }
}
@media (max-width: 520px) {
  .td-steps { grid-template-columns: 1fr; }
  .td-doc-row { grid-template-columns: 1fr; gap: 2px; }
  .td-doc-note { grid-column: 1; }
}

/* ── /brands, /brand/<slug> — 09-27: поиск/featured на хабе, hero-текст+FAQ на странице бренда ── */
.bwhy { padding: 46px 0 6px; }
.bfaq { padding: 46px 0 6px; }

.bfeat { margin: 4px 0 40px; }
.bfeat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.bfeat-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px;
  background: var(--dark-2); border-radius: var(--r-lg); text-decoration: none; color: #fff;
  transition: transform .15s, box-shadow .15s; }
.bfeat-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(20,22,26,.5); }
.bfeat-logo { max-width: 120px; max-height: 40px; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.bfeat-wm { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.3px; }
.bfeat-cnt { font-family: var(--mono); font-size: 12px; color: #93A9BF; }

.bsearch { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.bsearch-i { flex: 1; max-width: 420px; height: 46px; padding: 0 16px; border-radius: var(--r);
  border: 1px solid var(--line); background: var(--paper); font-size: 14.5px; color: var(--ink); }
.bsearch-i:focus { outline: none; border-color: var(--ink); }
.bsearch-cnt { font-size: 12.5px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }

@media (max-width: 980px) { .bfeat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .bfeat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bfeat-card { padding: 16px; }
  .bsearch-i { max-width: none; }
}

/* -- Corporate homepage ------- */
.fm-hero-copy h1 { font-size: clamp(36px, 4.3vw, 62px); line-height: 1.08; letter-spacing: -.035em; }
.fm-company-story { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding: 24px; background: var(--paper); border-radius: var(--r-lg); }
.fm-team-photo { margin: 0; min-width: 0; }
.fm-team-photo img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.fm-team-photo figcaption { margin-top: 12px; color: var(--muted); font-size: 12px; }
.page-sec > .fm-team-photo { margin: 24px 0 32px; max-width: 960px; }
.fm-company-copy { padding: 20px 16px 20px 0; }
.fm-company-copy h2 { font-size: 34px; line-height: 1.18; letter-spacing: -1px; margin: 14px 0 18px; }
.fm-company-copy > p { font-size: 15px; color: var(--muted); line-height: 1.65; }
.fm-production-steps { list-style: none; counter-reset: step; padding: 0; margin: 24px 0; }
.fm-production-steps li { counter-increment: step; position: relative; padding: 0 0 16px 36px; }
.fm-production-steps li::before { content: '0' counter(step); position: absolute; left: 0; top: 2px; font: 12px var(--mono); color: var(--accent); }
.fm-production-steps b { display: block; font-size: 14px; margin-bottom: 4px; }
.fm-production-steps span { font-size: 13px; color: var(--muted); line-height: 1.5; }
.fm-company-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.fm-industry-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.fm-industry-link { display: grid; grid-template-columns: 28px 1fr 20px; gap: 18px; padding: 26px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.fm-industry-link > .ic { width: 26px; height: 26px; color: var(--accent); }
.fm-industry-link h3 { font-size: 21px; margin: 0 0 10px; letter-spacing: -.4px; }
.fm-industry-link p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
.fm-industry-link:hover h3 { color: var(--accent); }
.fm-industry-link > span { font-size: 22px; color: var(--accent); }

/* -- Shared enquiry controls ------- */
.fm-contact-hint, .fm-file-hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.fm-contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.fm-contact-fields label, .fm-spec-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; min-width: 0; }
.fm-spec-field > span { font-weight: var(--body-weight); color: var(--muted); }
.fm-file { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px;
  border: 1px dashed var(--line-2); border-radius: 8px; background: #fff; font-weight: var(--body-weight); }
.fm-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.fm-file-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 6px;
  background: var(--accent-bg); color: var(--accent-d); font-size: 13px; font-weight: 600; pointer-events: none; }
/* contain: inline-size — длинное имя файла не раздвигает сетку страницы (было +40px на /page/authorization) */
.fm-file-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px;
  color: var(--muted); pointer-events: none; contain: inline-size; }
.fm-file.has-file .fm-file-name { color: var(--ink); }
.fm-file:hover { border-color: var(--accent); }
.fm-file:has(.fm-file-input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.quote-form.htmx-request button[type=submit] { opacity: .65; cursor: wait; }
.kp-box { max-height: calc(100dvh - 32px); overflow-y: auto; }
@media (max-width: 860px) {
  .fm-company-story { grid-template-columns: 1fr; gap: 12px; }
  .fm-company-copy { padding: 16px 4px 8px; }
  .fm-industry-list { gap: 0 24px; }
}
@media (max-width: 600px) {
  .fm-company-story { padding: 16px; }
  .fm-company-copy h2 { font-size: 27px; }
  .fm-industry-list { grid-template-columns: 1fr; }
  .fm-industry-link { gap: 12px; }
  .fm-industry-link h3 { font-size: 20px; }
  .fm-contact-fields { grid-template-columns: 1fr; }
  .kp-box { max-height: calc(100dvh - 20px); }
}
.sec [id] { scroll-margin-top: 154px; }
@media (max-width: 860px) { .sec [id] { scroll-margin-top: 90px; } }

/* ── Сравнение товаров (compare) ── */
.pcard-cmp { right: 57px; }
.pd-buy-cmp { margin-top: 10px; }
.cmp-wrap { margin-top: 8px; }
.cmp-diff-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted);
  cursor: pointer; margin-bottom: 14px; }
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line);
  border-radius: var(--r-lg); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.cmp-table th, .cmp-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left;
  vertical-align: top; font-size: 14px; }
.cmp-table thead th { background: var(--paper); }
.cmp-prod-col { min-width: 200px; }
.cmp-prod-head { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; position: relative; }
.cmp-prod-img { width: 64px; height: 64px; object-fit: contain; }
.cmp-prod-head a { color: var(--ink); font-weight: 600; text-decoration: none; }
.cmp-prod-head a:hover { color: var(--accent-d); }
.cmp-prod-price { color: var(--muted); font-size: 13px; }
.cmp-prod-remove { position: absolute; top: 0; right: 0; border: none; background: transparent;
  color: var(--muted); cursor: pointer; padding: 4px; border-radius: var(--r-sm); }
.cmp-prod-remove:hover { color: var(--ink); background: var(--line-2); }
.cmp-group-row td { background: var(--line-3); font-weight: 600; text-transform: uppercase; font-size: 12px;
  letter-spacing: .02em; color: var(--muted); }
.cmp-label { color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .cmp-label { white-space: normal; min-width: 110px; max-width: 40vw; } }
.cmp-table tr.cmp-diff td:not(.cmp-label) { background: var(--accent-bg); }
.cmp-nospecs { color: var(--muted); text-align: center; padding: 24px; }
.cmp-wrap:has(#cmp-diff:checked) .cmp-same { display: none; }

/* -- Catalog overlay ------- */
.fm-catalog-toggle { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; gap: 8px; border-radius: 7px; background: var(--fm-cloud); color: var(--fm-navy); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.fm-catalog-toggle:hover, .fm-catalog-toggle[aria-expanded="true"] { background: var(--accent-bg); color: var(--accent-d); }
.fm-catalog { display: none; position: fixed; inset: 98px 0 auto; margin: 0 auto; width: min(1180px, calc(100% - 48px)); height: min(630px, calc(100dvh - 124px)); padding: 0; border: 1px solid var(--line-2); border-radius: 16px; background: #fff; color: var(--fm-navy); box-shadow: 0 24px 80px #0d28472b; overflow: hidden; }
.fm-catalog:popover-open { display: flex; flex-direction: column; }
.fm-catalog::backdrop { background: #0d28475c; backdrop-filter: blur(4px); }
.fm-catalog a { color: inherit; text-decoration: none; }
.fm-catalog button { font: inherit; cursor: pointer; }
.fm-catalog-toolbar { display: flex; align-items: center; gap: 28px; padding: 18px 22px 18px 28px; border-bottom: 1px solid var(--line-2); flex: none; }
.fm-catalog-label { width: 266px; flex: none; font-size: 15px; font-weight: 750; }
.fm-catalog-search { display: flex; align-items: center; flex: 1; min-width: 0; border: 1px solid var(--line-2); border-radius: 8px; background: var(--fm-cloud); }
.fm-catalog-search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.fm-catalog-search input { width: 100%; min-width: 0; height: 44px; padding: 0 14px; border: 0; background: transparent; font: var(--body-weight) 13px var(--sans); color: var(--fm-navy); outline: none; }
.fm-catalog-search button, .fm-catalog-close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 8px; background: transparent; color: var(--fm-navy); }
.fm-catalog-close:hover { background: var(--fm-cloud); }
.fm-catalog-body { display: grid; grid-template-columns: 310px minmax(0, 1fr); flex: 1; min-height: 0; }
.fm-catalog-rail { padding: 14px 12px; background: var(--fm-cloud); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #bac6d3 transparent; }
.fm-catalog-loading { grid-column: 1 / -1; margin: 0; padding: 32px 24px; color: var(--fm-steel); }
.fm-catalog-category { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 11px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.fm-catalog-category span { flex: 1; }
.fm-catalog-category .ic-sm { flex: none; opacity: .45; }
.fm-catalog-category:hover { background: #e5ebf1; }
.fm-catalog-category[aria-selected="true"] { background: var(--fm-navy); color: #fff; }
.fm-catalog-category[aria-selected="true"] .ic-sm { opacity: 1; }
.fm-catalog-content { min-width: 0; padding: 28px 32px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fm-catalog-pane[hidden] { display: none; }
.fm-catalog-intro { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 155px; margin-bottom: 20px; }
.fm-catalog-intro > div { flex: 1; min-width: 0; }
.fm-catalog-stock { margin-bottom: 10px; color: var(--fm-steel); font-size: 11px; font-variant-numeric: tabular-nums; }
.fm-catalog-intro .fm-catalog-title { margin: 0 0 18px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.045em; font-weight: 800; overflow-wrap: anywhere; }
.fm-catalog a.fm-catalog-section-link { display: inline-flex; align-items: center; gap: 12px; color: var(--accent-d); font-size: 12px; font-weight: 650; }
.fm-catalog-art { width: 210px; height: 158px; object-fit: contain; flex: none; }
.fm-catalog-subcategories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.fm-catalog-subgroup { min-width: 0; padding: 4px 0 10px; border-top: 1px solid var(--line-2); }
.fm-catalog-subcategory { display: flex; align-items: center; gap: 10px; min-height: 52px; font-size: 13px; font-weight: 650; line-height: 1.45; }
.fm-catalog-subcategory > span:first-child { flex: 1; overflow-wrap: anywhere; }
.fm-catalog-count { color: var(--fm-steel); font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.fm-catalog-subcategory .ic-sm { flex: none; color: var(--fm-steel); }
/* Стрелка подкатегории — одна CSS-маска вместо 217 встроенных SVG в мегаменю каждой страницы (−45 КБ HTML,
   ускорение витрин 07.10.2026). Та же иконка lucide arrow-right, размер и цвет как у .ic-sm. */
.fm-catalog-arrow { flex: none; width: var(--icon-size-sm, 15px); height: var(--icon-size-sm, 15px); background: var(--fm-steel);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.fm-catalog-subcategory:hover .fm-catalog-arrow { background: var(--accent-d); }
.fm-catalog a.fm-catalog-leaf { display: block; padding: 6px 0 6px 12px; border-left: 1px solid var(--line-2); font-size: 12px; line-height: 1.4; color: var(--fm-steel); overflow-wrap: anywhere; }
.fm-catalog-subcategory:hover, .fm-catalog a.fm-catalog-leaf:hover { color: var(--accent-d); }
.fm-catalog-footer { display: flex; justify-content: space-between; gap: 20px; padding: 18px 28px; border-top: 1px solid var(--line-2); flex: none; }
.fm-catalog-footer a { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 650; }
.fm-catalog-footer a:last-child { color: var(--fm-steel); }
.fm-catalog a:focus-visible, .fm-catalog button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fm-catalog-intro .fm-catalog-title:focus { outline: none; }
.fm-catalog-back { display: none; }
@media (max-width: 1000px) {
  .fm-catalog-toolbar { gap: 14px; padding-left: 20px; }
  .fm-catalog-label { width: 225px; }
  .fm-catalog-body { grid-template-columns: 270px minmax(0, 1fr); }
  .fm-catalog-content { padding: 20px; }
  .fm-catalog-art { width: 130px; height: 120px; }
  .fm-catalog-subcategories { column-gap: 18px; }
}
@media (max-width: 700px) {
  .fm-catalog { inset: 12px 0 auto; width: calc(100% - 24px); height: calc(100dvh - 24px); border-radius: 14px; }
  .fm-catalog-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 10px; padding: 12px 14px 16px; }
  .fm-catalog-label { width: auto; font-size: 14px; }
  .fm-catalog-close { grid-column: 2; grid-row: 1; }
  .fm-catalog-search { grid-column: 1 / -1; grid-row: 2; }
  .fm-catalog-body { display: block; overflow: hidden; }
  .fm-catalog-rail { height: 100%; padding: 10px; }
  .fm-catalog-category { min-height: 50px; padding: 12px; font-size: 14px; }
  .fm-catalog-content { display: none; height: 100%; padding: 16px 20px 24px; }
  .fm-catalog.is-category .fm-catalog-content { display: block; }
  .fm-catalog.is-category .fm-catalog-rail { display: none; }
  .fm-catalog-back { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 0 0 12px; padding: 0; border: 0; background: transparent; color: var(--fm-steel); font-size: 12px; }
  .fm-catalog-intro { gap: 10px; min-height: 130px; margin-bottom: 20px; }
  .fm-catalog-intro .fm-catalog-title { font-size: 25px; }
  .fm-catalog-art { width: 100px; height: 110px; }
  .fm-catalog-subcategories { grid-template-columns: minmax(0, 1fr); }
  .fm-catalog-subcategory { font-size: 14px; }
  .fm-catalog-footer { padding: 18px; gap: 12px; }
  .fm-catalog-footer a { gap: 6px; font-size: 11px; }
}

/* -- Corporate editorial design ------- */
:root {
  --fm-navy: #0D2847;
  --fm-cloud: #F3F5F8;
  --fm-steel: #607084;
}
.fm-header .hdr-in { max-width: 1440px; height: 84px; gap: 24px; padding: 0 40px; flex-wrap: nowrap; }
.fm-header .brand { margin-right: 0; }
.fm-header .fm-logo { width: 280px; }
.fm-header-nav { display: flex; flex: 1; align-items: center; justify-content: center; gap: 18px; min-width: 0; }
.fm-header-nav a { padding: 12px 0; color: var(--fm-navy); text-decoration: none; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fm-header-nav a:hover, .fm-header-nav a.on { color: var(--accent-d); text-decoration: underline; text-underline-offset: 7px; }
.fm-header .hdr-actions { gap: 10px; }
.fm-header .fm-search-toggle { width: 44px; height: 44px; border-radius: 7px; }
.fm-header .hdr-kp { height: 44px; padding: 0 20px; border-radius: 7px; font-size: 13px; }
.fm-header a:focus-visible, .fm-header summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.fm-header .burger { border-radius: 7px; width: 44px; height: 44px; }
.fm-search-panel { inset-block-start: 96px; }
.fm-favorites-link .fav-n { position: static; margin-left: 6px; vertical-align: middle; }

/* -- Homepage composition ------- */
.fm-home { --bg: #fff; --ink: var(--fm-navy); --ink-2: var(--fm-navy); --wrap: 1440px; }
.fm-home .wrap, .fm-home .sec, .fm-home .brands { padding-left: 40px; padding-right: 40px; }
.fm-home .sec { padding-top: 72px; padding-bottom: 0; }
.fm-home .sec-head { gap: 32px; margin-bottom: 28px; }
.fm-home .sec-h { font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -.045em; line-height: 1.14; }
.fm-home .eyebrow-l { display: flex; align-items: center; gap: 10px; font: 600 12px/1.4 var(--sans); color: var(--fm-steel); letter-spacing: .02em; margin-bottom: 14px; }
.fm-home .eyebrow-l::before { content: ''; width: 24px; height: 2px; background: var(--accent-hi); }
.fm-home .fm-sec-lead { max-width: 720px; }
.fm-home .fm-badges { margin-bottom: 24px; }
.fm-home .sec-all { color: var(--accent-d); font-size: 13px; text-decoration: underline; text-underline-offset: 5px; }
.fm-home .btn, .fm-home .btn-ghost-d { border-radius: 7px; }
.fm-home a:focus-visible { outline: 3px solid var(--accent-hi); outline-offset: 4px; }
.fm-home .hero { background: var(--dark-2); }
.fm-home .hero::before { display: none; }
.fm-home .fm-hero-in { grid-template-areas: 'copy artwork'; grid-template-columns: 1.03fr 1fr; min-height: 660px; gap: 0; padding: 58px 40px 48px; }
.fm-home .fm-hero-copy { position: relative; z-index: 1; }
.fm-home .fm-hero-copy h1 { font-size: clamp(44px, 4.6vw, 66px); line-height: 1.06; letter-spacing: -.045em; font-weight: 800; margin-bottom: 24px; }
.fm-home .hero p { max-width: 520px; margin-bottom: 28px; color: var(--on-dark); font-size: 17px; line-height: 1.5; }
.fm-home .hero-cta { margin: 0; gap: 14px; }
.fm-home .fm-hero-art { position: relative; max-width: none; width: 110%; margin-right: -38px; align-self: center; }
.fm-home .fm-hero-art img { width: 100%; height: 540px; object-fit: contain; filter: drop-shadow(0 26px 34px rgba(0,0,0,.25)); }
.fm-hero-promises { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); list-style: none; margin: 42px 0 0; padding: 0; gap: 22px; max-width: 520px; }
.fm-hero-promises li { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(201,214,227,.18); padding-top: 20px; color: var(--on-dark); font-size: 11px; line-height: 1.5; }
.fm-hero-promises .ic { flex: none; width: 36px; height: 36px; padding: 7px; border: 1px solid rgba(201,214,227,.25); border-radius: 8px; }

/* -- Photographic service cards ------- */
.fm-capability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.fm-capability { display: flex; flex-direction: column; min-width: 0; background: var(--fm-cloud); border-radius: 8px; overflow: hidden; color: var(--fm-navy); text-decoration: none; }
.fm-capability-image { aspect-ratio: 1.9; overflow: hidden; }
.fm-capability-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .3s ease; }
.fm-capability:hover .fm-capability-image img { transform: scale(1.035); }
.fm-capability-copy { display: grid; grid-template-columns: 32px 1fr 34px; grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 18px; padding: 24px; flex: 1; }
.fm-capability-copy > .ic { width: 30px; height: 30px; color: var(--accent-d); }
.fm-capability h3 { grid-column: 2 / 4; align-self: center; font-size: 17px; line-height: 1.35; margin: 0; font-weight: 700; }
.fm-capability p { grid-column: 1 / 3; font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; }
.fm-round-arrow { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #C4CDDA; border-radius: 50%; align-self: end; color: var(--accent-d); }
.fm-capability:hover .fm-round-arrow { background: var(--accent-d); color: #fff; border-color: var(--accent-d); }

/* -- Project covers and complete delivery scopes ------- */
.fm-case-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.fm-case-card { min-width: 0; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.fm-case-cover { display: block; position: relative; aspect-ratio: 1.7; overflow: hidden; background: var(--fm-navy); }
.fm-case-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fm-case-illustration { position: absolute; right: 12px; top: 12px; border-radius: 4px; background: rgba(7,25,43,.8); padding: 4px 7px; color: #DBE7F2; font-size: 10px; }
.fm-case-card .fm-project-index { display: flex; justify-content: space-between; gap: 12px; padding: 20px 24px 0; font: 12px var(--mono); color: var(--muted); }
.fm-case-card .fm-project-copy { padding: 16px 24px 20px; }
.fm-case-card .fm-project-copy .eyebrow-l { font-size: 11px; letter-spacing: 0; line-height: 1.5; min-height: 33px; }
.fm-case-card .fm-project-copy .eyebrow-l::before { display: none; }
.fm-case-card h3 { font-size: 23px; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 14px; }
.fm-case-card h3 a { color: var(--fm-navy); text-decoration: none; }
.fm-case-card h3 a:hover { color: var(--accent-d); text-decoration: underline; text-underline-offset: 4px; }
.fm-case-card .fm-project-copy p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; }
.fm-case-card .fm-project-scope { padding: 20px 24px 24px; margin-top: auto; background: var(--fm-cloud); }
.fm-case-card .fm-project-scope > span { font-size: 12px; font-weight: 600; }
.fm-case-card .fm-project-scope ul { font-size: 13px; line-height: 1.7; padding-left: 18px; margin: 10px 0 20px; }

/* -- Supporting content and contact ------- */
.fm-home .fm-home-clients { margin-top: 64px; padding: 40px 0; border-block: 1px solid var(--line-2); }
.fm-home .fm-home-clients .sec-h { font-size: 24px; }
.fm-home .fm-company-story { padding: 0; gap: 64px; background: none; border-radius: 0; }
.fm-home .fm-team-photo img { border-radius: 8px; }
.fm-home .fm-company-copy { padding: 0; }
.fm-home .fm-company-copy h2 { font-size: 38px; letter-spacing: -.035em; }
.fm-home .fm-about { border-top: 1px solid var(--line); padding-top: 36px; }
.fm-home .fm-about-lead { font-size: 25px; line-height: 1.4; }
.fm-home .fm-about-stat { background: var(--fm-cloud); border-radius: 8px; }
.fm-home .cat { border-radius: 8px; }
.fm-home .brands { padding-top: 56px; }
.fm-home .brands-box { background: var(--fm-cloud); border-radius: 8px; }
.fm-home .b2b { max-width: none; padding: 0; margin: 72px 0 0; }
.fm-home .b2b-box { border-radius: 0; background: var(--dark-2); }
.fm-home .b2b-in { max-width: 1360px; padding: 64px 40px; margin: auto; }
.fm-home .fm-lead h2 { font-size: clamp(32px,3.6vw,48px); letter-spacing: -.04em; line-height: 1.12; }
.fm-home .fm-lead .eyebrow-l { color: var(--on-dark); }
.fm-home .fm-lead-form { border-radius: 8px; }
.fm-home .ftr { margin-top: 0; }
.fm-home .sec [id] { scroll-margin-top: 110px; }

@media (max-width: 1280px) {
  .fm-header .hdr-in { padding-inline: 24px; gap: 18px; }
  .fm-header .fm-logo { width: 250px; }
  .fm-header-nav { gap: 13px; }
  .fm-header-nav a { font-size: 11px; }
  .fm-capability-copy { padding: 20px; grid-template-columns: 26px 1fr 30px; gap: 16px 10px; }
  .fm-capability h3 { font-size: 16px; }
}
@media (max-width: 1180px) {
  .fm-header-nav { display: none; }
  .fm-header .hdr-actions { margin-left: auto; }
  .fm-header .burger { display: flex; }
  .fm-header .fm-logo { width: 280px; }
}
@media (max-width: 980px) {
  .fm-home .wrap, .fm-home .sec, .fm-home .brands { padding-inline: 24px; }
  .fm-home .fm-hero-in { grid-template-columns: 1fr 1fr; min-height: 560px; padding: 48px 24px; }
  .fm-home .fm-hero-copy h1 { font-size: clamp(32px,4.1vw,42px); }
  .fm-home .hero p { font-size: 15px; }
  .fm-home .hero-cta { gap: 10px; }
  .fm-home .hero-cta a { padding-inline: 18px; font-size: 13px; }
  .fm-hero-promises { gap: 10px; }
  .fm-hero-promises li { gap: 7px; font-size: 10px; }
  .fm-hero-promises .ic { width: 28px; height: 28px; padding: 5px; }
  .fm-home .fm-hero-art { width: 100%; margin-right: 0; justify-self: end; }
  .fm-home .fm-hero-art img { height: 420px; }
  .fm-capability-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fm-capability-copy { padding: 24px; }
  .fm-capability h3 { font-size: 18px; }
  .fm-home .fm-company-story { gap: 32px; }
  .fm-home .b2b-in { padding: 48px 24px; }
}
@media (max-width: 700px) {
  .fm-header .hdr-in { height: 72px; padding-inline: 20px; gap: 12px; }
  .fm-header .hdr-actions { gap: 8px; }
  .fm-catalog-toggle { display: none; }
  .fm-home .fm-hero-in { grid-template-areas: 'copy' 'artwork'; grid-template-columns: 1fr; padding-top: 38px; padding-bottom: 22px; }
  .fm-home .fm-hero-copy h1 { font-size: clamp(29px,8.8vw,48px); }
  .fm-home .hero p { max-width: 520px; }
  .fm-hero-promises { margin-top: 28px; max-width: 100%; }
  .fm-hero-promises li { padding-top: 16px; font-size: 10px; }
  .fm-home .fm-hero-art { width: 100%; max-width: 420px; justify-self: center; margin: 0; }
  .fm-home .fm-hero-art img { height: auto; }
  .fm-home .hero { background-image: none; }
  .fm-home .sec-head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .fm-case-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 600px) {
  .fm-header .hdr-in { padding-inline: 16px; }
  .fm-header .fm-logo { width: 120px; height: 26px; }
  .fm-header .hdr-kp { padding-inline: 12px; width: 44px; }
  .fm-header .hdr-kp .ic-sm { display: inline-block; }
  .fm-header .hdr-kp .cart-label { display: none; }
  .fm-header .fm-search-toggle, .fm-header .burger { width: 40px; height: 44px; }
  .fm-home .wrap, .fm-home .sec, .fm-home .brands { padding-inline: 20px; }
  .fm-home .sec { padding-top: 44px; }
  .fm-home .sec-h { font-size: 30px; }
  .fm-home .sec-head { margin-bottom: 22px; }
  .fm-home .hero-cta a { font-size: 13px; height: 48px; padding-inline: 18px; }
  .fm-hero-promises { gap: 8px; }
  .fm-hero-promises .ic { display: none; }
  .fm-home .fm-hero-art { max-width: 350px; margin-top: 8px; }
  .fm-capability-grid { grid-template-columns: 1fr; gap: 20px; }
  .fm-capability-image { aspect-ratio: 2; }
  .fm-capability-copy { gap: 14px 12px; padding: 22px; }
  .fm-capability h3 { font-size: 19px; }
  .fm-capability p { font-size: 14px; }
  .fm-home .fm-home-clients { margin-top: 44px; padding-block: 30px; }
  .fm-home .fm-company-copy h2 { font-size: 30px; }
  .fm-home .fm-company-story { gap: 24px; }
  .fm-home .fm-about-lead { font-size: 21px; }
  .fm-home .brands { padding-top: 40px; }
  .fm-home .cat { padding: 14px; }
  .fm-home .cat-name { font-size: 14px; overflow-wrap: anywhere; }
  .fm-home .b2b { margin-top: 44px; }
  .fm-home .b2b-in { padding: 40px 20px; }
  .fm-home .fm-lead-form { padding: 20px; }
  .fm-search-panel { inset-block-start: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .fm-capability-image img { transition: none; }
  .fm-capability:hover .fm-capability-image img { transform: none; }
}

/* -- Messenger access ------- */
.fm-messengers { display: flex; gap: 8px; flex: none; }
.fm-messenger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: 10px; text-decoration: none; }
.fm-messenger .ic { width: 22px; height: 22px; flex: none; }
.fm-messenger--tg { background: #ECF7FD; color: #087BAD; }
.fm-messenger--max { background: #F1EEFF; color: #6642D4; }
.fm-messenger:hover { border-color: currentColor; }
.fm-messengers--labeled { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.fm-messengers--labeled .fm-messenger { width: auto; gap: 10px; font-size: 14px; font-weight: 700; }

/* -- Fermo mobile menu ------- */
.fm-mobile-menu { width: 440px; max-width: 100vw; height: 100dvh; padding: 0; bottom: auto; overflow: hidden;
  color: #fff; background: var(--fm-navy); box-shadow: -20px 0 70px rgba(0,15,31,.24); }
.fm-mobile-head { display: flex; align-items: center; justify-content: space-between; min-height: 76px;
  padding: max(16px,env(safe-area-inset-top)) 20px 16px; border-bottom: 1px solid rgba(201,214,227,.16); }
.fm-mobile-menu .fm-mobile-brand { display: flex; padding: 0; border-radius: 0; }
.fm-mobile-brand img { display: block; width: 125px; height: auto; }
.fm-mobile-menu .mnav-close { margin: 0; width: 44px; height: 44px; border: 1px solid rgba(201,214,227,.25); color: #fff; border-radius: 10px; }
.fm-mobile-menu .mnav-close:hover { color: #fff; background: rgba(201,214,227,.12); }
.fm-mobile-menu .fm-mobile-scroll { min-height: 0; flex: 1; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.fm-mobile-menu .fm-messengers { margin-bottom: 20px; }
.fm-mobile-menu .fm-messenger { padding: 0 12px; height: 48px; border-radius: 10px; border: 1px solid rgba(201,214,227,.2); color: #fff; background: rgba(201,214,227,.07); }
.fm-mobile-menu .fm-messenger--tg .ic { color: #5CC2F2; }
.fm-mobile-menu .fm-messenger--max .ic { color: #BCA9FF; }
.fm-mobile-menu .fm-messenger:hover { background: rgba(201,214,227,.15); }
.fm-mobile-primary { display: flex; flex-direction: column; padding-bottom: 16px; }
.fm-mobile-menu a.fm-corporate-link { display: flex; align-items: center; min-height: 48px; padding: 8px 0;
  border-radius: 0; font-size: 23px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: #fff; }
.fm-mobile-menu a.fm-corporate-link.on { color: var(--accent-hi); background: none; }
.fm-mobile-menu a.fm-corporate-link.on::after { content: ''; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: currentColor; }
.fm-mobile-menu a.fm-corporate-link:hover { color: var(--accent-hi); background: none; }
.fm-mobile-group { border-top: 1px solid rgba(201,214,227,.16); }
.fm-mobile-group summary { display: flex; align-items: center; gap: 12px; min-height: 56px; cursor: pointer; list-style: none; color: var(--on-dark); font-size: 14px; font-weight: 600; }
.fm-mobile-group summary::-webkit-details-marker { display: none; }
.fm-mobile-group summary span { flex: 1; }
.fm-mobile-group[open] summary > .ic-sm:last-child { transform: rotate(180deg); }
.fm-mobile-links { display: flex; flex-direction: column; padding-bottom: 12px; }
.fm-mobile-menu .fm-mobile-links a { min-height: 44px; padding: 10px 0; color: var(--on-dark); font-size: 14px; }
.fm-mobile-menu .fm-mobile-links a:hover { color: #fff; background: none; text-decoration: underline; text-underline-offset: 4px; }
.fm-mobile-menu .mnav-search { margin: 12px 0 4px; border: 1px solid rgba(201,214,227,.35); border-radius: 8px; }
.fm-mobile-menu .mnav-search input { color: #fff; background: transparent; }
.fm-mobile-menu .mnav-search input::placeholder { color: var(--on-dark-2); }
.fm-mobile-menu .mnav-search button { color: #fff; background: rgba(201,214,227,.12); }
.fm-mobile-contact { padding: 16px 20px max(16px,env(safe-area-inset-bottom)); border-top: 1px solid rgba(201,214,227,.16); }
.fm-mobile-menu .fm-menu-quote { display: flex; align-items: center; justify-content: space-between; min-height: 48px;
  padding: 12px 16px; background: #fff; border-radius: 8px; color: var(--fm-navy); font-size: 15px; font-weight: 700; }
.fm-mobile-menu .fm-menu-quote:hover { background: var(--accent-bg); }
.fm-mobile-menu .fm-mobile-phone { display: block; padding: 14px 0 0; text-align: center; color: var(--on-dark); font-size: 15px; font-weight: 600; }
.fm-mobile-menu .fm-mobile-phone:hover { background: none; color: #fff; }
.fm-mobile-menu :is(a,button,input,summary,label):focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; }
@media (max-width: 980px) {
  .fm-header .fm-logo { width: 220px; }
  .fm-header .hdr-kp { display: none; }
}
@media (max-width: 700px) {
  .fm-header .fm-search-toggle { display: none; }
  .fm-header .hdr-actions { gap: 12px; }
  .fm-header .burger { width: 44px; }
}
@media (max-width: 600px) {
  .fm-header .fm-logo { width: 120px; }
  .fm-mobile-menu { width: 100%; }
}
@media (max-width: 360px) {
  .fm-header .hdr-actions { gap: 8px; }
  .fm-header .fm-messengers { gap: 6px; }
  .fm-mobile-menu a.fm-corporate-link { font-size: 21px; }
}

/* -- Fermo brand icons ------- */
.ic.fm-brand-icon { display: block; width: 40px; height: 40px; flex: none; color: var(--fm-navy); }
.fm-capability-copy { grid-template-columns: 44px 1fr 34px; column-gap: 14px; }
.fm-capability-copy > .fm-brand-icon { align-self: start; }
.fm-industry-link { grid-template-columns: 40px 1fr 20px; }
.fm-industry-link > .fm-brand-icon { width: 36px; height: 36px; }
.fm-adv-item > .fm-brand-icon, .fm-svc-card > .fm-brand-icon { align-self: flex-start; margin-bottom: 6px; }
@media (max-width: 600px) {
  .fm-capability-copy { grid-template-columns: 40px 1fr 34px; column-gap: 12px; }
  .fm-capability-copy > .fm-brand-icon { width: 36px; height: 36px; }
  .fm-industry-link { grid-template-columns: 32px 1fr 20px; }
  .fm-industry-link > .fm-brand-icon { width: 30px; height: 30px; }
  .fm-svc-card > .fm-brand-icon { grid-row: span 2; margin: 0; }
}

/* -- Monochrome partner logos ------- */
.fm-partners .brands-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px 22px; }
.fm-partners .fm-partner-link { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 76px; border-radius: 6px; }
.fm-partner-logo { display: block; width: 128px; max-width: 100%; height: 52px; object-fit: contain; filter: grayscale(1) contrast(1.25); opacity: .82; mix-blend-mode: multiply; }
.fm-partner-logo--padded { object-fit: cover; }
.fm-partner-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.fm-partner-link:hover .fm-partner-logo, .fm-partner-link:focus-visible .fm-partner-logo { opacity: 1; }
.fm-partner-link:focus-visible { outline: 2px solid var(--fm-navy); outline-offset: 4px; }
.fm-partner-directory { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fm-partner-directory .brand-tile { align-items: center; justify-content: center; gap: 14px; min-height: 132px; text-align: center; }
.fm-partner-directory .brand-name { font-size: 12px; line-height: 1.35; letter-spacing: 0; color: var(--muted); }
@media (max-width: 980px) {
  .fm-partners .brands-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fm-partner-directory { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .fm-partners .brands-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .fm-partners .fm-partner-link { min-height: 66px; }
  .fm-partners .fm-partner-logo { width: 108px; height: 44px; }
  .fm-partner-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fm-partner-directory .brand-tile { min-height: 124px; }
}

/* -- Manufacturing page ------- */
.fm-factory-page { background: var(--paper); }
.fm-factory-hero { background: var(--dark-2); }
.fm-factory-hero::before { display: none; }
.fm-factory-hero .page-hero-in { padding-bottom: 0; }
.fm-factory-hero .crumbs { margin-bottom: 32px; }
.fm-factory-intro { display: grid; grid-template-columns: .95fr 1.15fr; gap: 24px; align-items: center; }
.fm-factory-copy { position: relative; z-index: 1; padding: 14px 0 38px; }
.fm-factory-label { margin: 0 0 20px; color: var(--accent-d); font-size: 12px; font-weight: 650; letter-spacing: .06em; }
.fm-factory-hero .fm-factory-label { color: #B8D7F0; }
.fm-factory-hero h1 { font-size: clamp(38px, 4.2vw, 58px); line-height: 1.1; letter-spacing: -.045em; margin-bottom: 24px; }
.fm-factory-hero .lead { max-width: 440px; margin-bottom: 28px; font-size: 16px; }
.fm-factory-hero .bsh-actions { gap: 12px; flex-wrap: wrap; }
.fm-factory-hero-art { margin: 0 -24px 0 0; min-width: 0; }
.fm-factory-hero-art img { display: block; width: 100%; height: auto; object-fit: contain; }
.fm-factory-hero-art figcaption { margin-top: 12px; text-align: right; color: #A8C1D6; font-size: 11px; line-height: 1.5; }
.fm-factory-facts { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 28px 0 0; padding: 26px 0 30px; border-top: 1px solid rgba(255,255,255,.18); }
.fm-factory-facts > div { padding: 0 30px; border-left: 1px solid rgba(255,255,255,.18); }
.fm-factory-facts > div:first-child { padding-left: 0; border-left: 0; }
.fm-factory-facts dt { font-size: 25px; font-weight: 650; letter-spacing: -.03em; }
.fm-factory-facts dd { color: var(--on-dark); margin: 8px 0 0; font-size: 12px; line-height: 1.7; }
.fm-factory-facts a { text-underline-offset: 4px; }
.fm-factory-section { padding-top: 80px; }
.fm-factory-page h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.2; letter-spacing: -.04em; margin: 0; }
.fm-factory-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: end; margin-bottom: 36px; }
.fm-factory-heading > p { margin: 0; max-width: 440px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.fm-factory-equipment { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fm-factory-product { padding: 28px 24px 28px 0; display: flex; flex-direction: column; }
.fm-factory-product + .fm-factory-product { padding-left: 24px; border-left: 1px solid var(--line); }
.fm-factory-product-top { display: flex; justify-content: space-between; align-items: center; color: var(--accent-d); margin-bottom: 26px; }
.fm-factory-product-top > .ic { width: 30px; height: 30px; }
.fm-factory-product-top > span { color: var(--muted); font: 11px var(--mono); }
.fm-factory-product h3 { font-size: 17px; line-height: 1.4; letter-spacing: -.025em; margin: 0 0 12px; }
.fm-factory-product p { font-size: 13px; line-height: 1.65; color: var(--muted); margin: 0 0 24px; }
.fm-factory-product-tag { margin-top: auto; color: var(--accent-d); font-size: 11px; font-weight: 600; }
.fm-factory-process { background: #EDF2F6; margin-top: 80px; padding: 64px 0; }
.fm-factory-process-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.fm-factory-assembly-art { margin: 30px 0 0; }
.fm-factory-assembly-art img { width: 100%; height: auto; display: block; border-radius: 12px; }
.fm-factory-assembly-art figcaption { margin-top: 12px; color: var(--muted); font-size: 11px; }
.fm-factory-timeline { list-style: none; margin: 0; padding: 0; }
.fm-factory-timeline li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; padding: 24px 0; border-bottom: 1px solid #CCD9E4; }
.fm-factory-timeline li:first-child { padding-top: 0; }
.fm-factory-timeline li:last-child { padding-bottom: 0; border-bottom: 0; }
.fm-factory-step-number { color: var(--accent-d); padding-top: 3px; font: 14px var(--mono); }
.fm-factory-timeline h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.025em; }
.fm-factory-timeline p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
#workshop { scroll-margin-top: 110px; }
.fm-factory-gallery { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; }
.fm-factory-photo { margin: 0; min-width: 0; display: flex; flex-direction: column; }
.fm-factory-photo-main { grid-row: span 2; }
.fm-factory-photo img, .fm-factory-photo-empty { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 8px; }
.fm-factory-photo img { height: auto; }
.fm-factory-photo-main img, .fm-factory-photo-main .fm-factory-photo-empty { flex: 1; min-height: 0; aspect-ratio: auto; }
.fm-factory-photo-main img { height: 0; }
.fm-factory-photo-empty { min-height: 180px; background: #EDF2F6; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; color: var(--accent-d); border: 1px dashed #B8CAD8; }
.fm-factory-photo-empty .ic { width: 30px; height: 30px; margin-bottom: 8px; stroke-width: 1.25; }
.fm-factory-photo-empty > span { font-size: 14px; font-weight: 650; }
.fm-factory-photo-empty small { font-size: 11px; color: var(--muted); }
.fm-factory-photo figcaption { display: flex; gap: 12px; align-items: baseline; padding-top: 12px; }
.fm-factory-photo figcaption > span { font: 11px var(--mono); color: var(--muted); }
.fm-factory-photo h3 { font-size: 14px; margin: 0; font-weight: 600; }
.fm-factory-location { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: 12px; margin: 24px 0 0; }
.fm-factory-location a { margin-left: auto; color: var(--accent-d); text-underline-offset: 4px; }
.fm-factory-support { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.fm-factory-support .fm-factory-heading { display: block; margin: 0; }
.fm-factory-support .fm-factory-heading > p { margin-top: 20px; max-width: 380px; }
.fm-factory-service-links { display: grid; align-content: start; }
.fm-factory-service-links > a { display: flex; gap: 18px; align-items: flex-start; padding: 24px 0; text-decoration: none; border-top: 1px solid var(--line); }
.fm-factory-service-links > a > .ic { color: var(--accent-d); flex-shrink: 0; margin-top: 4px; }
.fm-factory-service-links > a > .ic-sm { margin-left: auto; flex-shrink: 0; }
.fm-factory-service-links strong { font-size: 16px; display: block; margin-bottom: 8px; }
.fm-factory-service-links span span { display: block; color: var(--muted); max-width: 350px; font-size: 13px; }
.fm-factory-service-links a:hover strong { color: var(--accent-d); text-decoration: underline; text-underline-offset: 4px; }
.fm-factory-order { padding-bottom: 80px; }
.fm-factory-order .page-cta { margin: 0; padding: 42px; border-radius: 12px; }
.fm-factory-order .page-cta h2 { font-size: 32px; }
.fm-factory-order .page-cta p { max-width: 530px; }
.fm-factory-page main a:focus-visible { outline: 3px solid #5AA9FF; outline-offset: 5px; }
@media (min-width: 1400px) { .fm-factory-hero-art { margin-right: -48px; } }
@media (max-width: 1000px) {
  .fm-factory-intro { gap: 16px; }
  .fm-factory-hero-art { margin-right: 0; }
  .fm-factory-hero .bsh-actions .btn, .fm-factory-hero .bsh-actions .btn-ghost-d { font-size: 12px; padding: 12px 16px; }
  .fm-factory-process-grid, .fm-factory-support { gap: 36px; }
  .fm-factory-product, .fm-factory-product + .fm-factory-product { padding-right: 16px; }
  .fm-factory-product + .fm-factory-product { padding-left: 16px; }
}
@media (max-width: 800px) {
  .fm-factory-hero .page-hero-in { padding: 24px 24px 0; }
  .fm-factory-intro, .fm-factory-process-grid, .fm-factory-support { grid-template-columns: 1fr; }
  .fm-factory-copy { padding: 0; }
  .fm-factory-hero h1 { font-size: 46px; }
  .fm-factory-hero .lead { max-width: 540px; }
  .fm-factory-hero-art { max-width: 600px; margin: 12px auto 0; }
  .fm-factory-hero-art figcaption { text-align: left; }
  .fm-factory-facts dt { font-size: 19px; }
  .fm-factory-facts > div { padding: 0 18px; }
  .fm-factory-facts dd { font-size: 11px; }
  .fm-factory-section { padding-top: 56px; }
  .fm-factory-heading { gap: 28px; }
  .fm-factory-equipment { grid-template-columns: 1fr 1fr; }
  .fm-factory-product:nth-child(3) { padding-left: 0; border-left: 0; }
  .fm-factory-product:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fm-factory-process { margin-top: 56px; padding: 48px 0; }
  .fm-factory-assembly-art { max-width: 600px; }
  .fm-factory-timeline { margin-top: 4px; }
  .fm-factory-gallery { gap: 20px; }
  .fm-factory-order { padding-bottom: 56px; }
}
@media (max-width: 540px) {
  .fm-factory-hero .page-hero-in { padding: 22px 16px 0; }
  .fm-factory-hero .crumbs { font-size: 10px; margin-bottom: 26px; }
  .fm-factory-label { font-size: 11px; margin-bottom: 16px; }
  .fm-factory-hero h1 { font-size: 39px; }
  .fm-factory-hero .lead { font-size: 14px; margin-bottom: 22px; }
  .fm-factory-hero .bsh-actions { gap: 10px; }
  .fm-factory-hero .bsh-actions .btn, .fm-factory-hero .bsh-actions .btn-ghost-d { padding: 12px 13px; font-size: 12px; min-height: 44px; }
  .fm-factory-intro { gap: 20px; }
  .fm-factory-copy { display: contents; }
  .fm-factory-intro .fm-factory-label { order: 0; margin: 0; }
  .fm-factory-intro h1 { order: 1; margin: 0; }
  .fm-factory-hero-art { order: 2; width: 100%; margin: 0; }
  .fm-factory-intro .lead { order: 3; margin: 0; }
  .fm-factory-intro .bsh-actions { order: 4; margin: 0; }
  .fm-factory-facts { grid-template-columns: 1fr; padding: 6px 0 18px; margin-top: 24px; }
  .fm-factory-facts > div, .fm-factory-facts > div:first-child { border-left: 0; padding: 15px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
  .fm-factory-facts > div + div { border-top: 1px solid rgba(255,255,255,.14); }
  .fm-factory-facts dt { font-size: 19px; }
  .fm-factory-facts dd { margin: 0; font-size: 11px; }
  .fm-factory-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
  .fm-factory-heading > p { font-size: 14px; }
  .fm-factory-product h3 { font-size: 15px; }
  .fm-factory-product p { font-size: 12px; }
  .fm-factory-product-top { margin-bottom: 20px; }
  .fm-factory-gallery { grid-template-columns: 1fr; gap: 24px; }
  .fm-factory-photo-main { grid-row: auto; }
  .fm-factory-photo-main img, .fm-factory-photo-main .fm-factory-photo-empty { flex: none; aspect-ratio: 4 / 3; }
  .fm-factory-photo-main img { height: auto; }
  .fm-factory-photo img, .fm-factory-photo-empty { aspect-ratio: 4 / 3; }
  .fm-factory-location { align-items: flex-start; font-size: 11px; }
  .fm-factory-location a { margin: 6px 0 0 24px; width: calc(100% - 24px); }
  .fm-factory-timeline li { grid-template-columns: 30px minmax(0, 1fr); gap: 14px; }
  .fm-factory-timeline h3 { font-size: 17px; }
  .fm-factory-order .page-cta { padding: 28px 22px; gap: 24px; }
  .fm-factory-order .page-cta h2 { font-size: 27px; }
  .fm-factory-order .page-cta-actions { width: 100%; }
}

/* -- Service authorizations ------- */
.auth-hero { background: var(--dark-2); color: var(--paper); padding: 22px 0 30px; }
.auth-hero .crumbs { padding: 0; margin-bottom: 20px; color: var(--on-dark); }
.auth-hero .crumbs a { color: inherit; }
.auth-hero-layout { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.auth-hero h1 { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.16; letter-spacing: -.035em; }
.auth-intro { margin: 18px 0 0; font-size: 15px; color: var(--on-dark); max-width: 68ch; }
.auth-hero .btn { flex-shrink: 0; background: var(--paper); color: var(--accent-d); }
.auth-directory { padding-top: 28px; }
.auth-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px) auto; align-items: end; gap: 16px; }
.auth-filters label, .auth-enquiry label { display: block; font-size: 13px; font-weight: 600; }
.auth-filters input, .auth-filters select, .auth-enquiry input, .auth-enquiry select, .auth-enquiry textarea {
  box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; margin-top: 6px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px;
}
.auth-filters .btn { min-height: 46px; }
.auth-result-count { margin: 22px 0 12px; color: var(--muted); font-size: 13px; }
.auth-list { border-top: 1px solid var(--line); background: var(--paper); }
.auth-brand { display: grid; grid-template-columns: 170px minmax(0, 1fr) 145px; align-items: center; gap: 28px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.auth-brand-name { min-width: 0; }
.auth-brand-name h2 { margin: 0; font-size: 19px; line-height: 1.3; overflow-wrap: anywhere; }
.auth-brand-name .fm-partner-logo { display: block; max-width: 128px; max-height: 40px; object-fit: contain; object-position: left center; margin-bottom: 7px; }
.auth-brand-name .fm-partner-logo + h2 { font-size: 12px; color: var(--muted); font-weight: 500; }
.auth-brand-scope p { margin: 0; font-size: 15px; max-width: 76ch; }
.auth-brand-scope .auth-limit { padding-left: 12px; border-left: 2px solid var(--accent); margin-top: 12px; font-size: 13px; }
.auth-request { display: flex; flex-direction: column; justify-content: center; min-height: 46px; color: var(--accent-d); font-size: 14px; font-weight: 700; }
.auth-request:hover { text-decoration: underline; }
.auth-directory-note { margin: 20px 0 0; max-width: 80ch; font-size: 13px; color: var(--muted); }
.auth-empty { padding: 28px; border: 1px solid var(--line); background: var(--paper); border-radius: var(--r); }
.auth-empty h2 { margin-top: 0; font-size: 24px; }
.auth-empty > a { display: inline-flex; margin: 12px 18px 0 0; }
.auth-service-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; padding-top: 56px; padding-bottom: 64px; }
.auth-service-layout h2 { margin: 0 0 20px; font-size: 26px; line-height: 1.25; }
.auth-service-info ol { padding-left: 22px; margin: 28px 0; }
.auth-service-info li { padding-left: 8px; margin-bottom: 24px; }
.auth-service-info li::marker { color: var(--accent-d); font-weight: 700; }
.auth-service-info li span { display: block; margin-top: 5px; color: var(--muted); }
.auth-service-info > a { display: block; width: fit-content; margin-top: 12px; color: var(--accent-d); text-decoration: underline; text-underline-offset: 4px; }
.auth-enquiry { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; scroll-margin-top: 108px; }
.auth-enquiry .quote-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.auth-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.auth-enquiry textarea { resize: vertical; }
.auth-enquiry .auth-form-hint { margin: -8px 0 0; color: var(--muted); font-size: 12px; }

:is(.auth-hero, .auth-directory, .auth-service-layout) :is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--accent-hi); outline-offset: 3px; }
@media (max-width: 900px) {
  .auth-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .auth-filters .btn { grid-column: 2; }
  .auth-brand { grid-template-columns: 130px minmax(0, 1fr) 125px; gap: 20px; padding: 20px; }
  .auth-service-layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .auth-hero { padding: 18px 0 24px; }
  .auth-hero-layout { display: block; }
  .auth-hero h1 { font-size: 30px; }
  .auth-intro { font-size: 14px; margin-top: 12px; }
  .auth-hero .btn { display: inline-flex; margin-top: 18px; }
  .auth-filters { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .auth-filters label:first-child { grid-column: 1 / -1; }
  .auth-filters .btn { padding: 12px; }
  .auth-brand { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 20px 16px; }
  .auth-brand-scope { grid-column: 1 / -1; grid-row: 2; }
  .auth-brand-name .fm-partner-logo { max-height: 32px; }
  .auth-brand-name h2 { font-size: 18px; }
  .auth-request { font-size: 13px; }
  .auth-service-layout { padding-top: 36px; padding-bottom: 40px; }
  .auth-enquiry { padding: 20px 16px; scroll-margin-top: 88px; }
  .auth-form-grid { grid-template-columns: 1fr; }
}

/* -- Service center page ------- */
.fm-service-page { background: var(--paper); }
.fm-service-hero { padding: 28px 0 0; background: #F3F5F9; }
.fm-service-hero .crumbs { margin: 0 0 34px; }
.fm-service-hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; }
.fm-service-hero-copy { padding: 12px 0; }
.fm-service-label { margin: 0 0 20px; color: var(--accent-d); font-size: 12px; font-weight: 650; letter-spacing: .045em; }
.fm-service-hero h1 { font-size: clamp(40px, 4.2vw, 58px); line-height: 1.1; letter-spacing: -.045em; margin: 0 0 24px; }
.fm-service-hero-lead { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 455px; margin: 0 0 28px; }
.fm-service-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.fm-service-actions .btn, .fm-service-actions .btn-ghost { height: 50px; padding: 0 20px; font-size: 13px; }
.fm-service-hero-note { color: var(--muted); font-size: 12px; margin: 18px 0 0; }
.fm-service-hero-art, .fm-service-detail-art { margin: 0; min-width: 0; }
.fm-service-hero-art img, .fm-service-detail-art img { width: 100%; height: auto; display: block; }
.fm-service-detail-art img { border-radius: 16px; }
.fm-service-hero-art figcaption, .fm-service-detail-art figcaption { font-size: 11px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.fm-service-assurances { margin: 40px 0 0; padding: 26px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; list-style: none; }
.fm-service-assurances li { display: flex; gap: 12px; align-items: center; font-size: 12px; font-weight: 550; }
.fm-service-assurances .ic { color: var(--accent-d); flex: none; }
.fm-service-section { padding-top: 72px; }
.fm-service-page h2 { font-size: clamp(28px, 3vw, 38px); line-height: 1.2; letter-spacing: -.04em; margin: 0; }
.fm-service-heading { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: end; margin-bottom: 34px; }
.fm-service-heading > p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 440px; }
.fm-service-equipment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fm-service-equipment article { padding: 28px 30px 28px 0; }
.fm-service-equipment article + article { border-left: 1px solid var(--line); padding-left: 30px; }
.fm-service-equipment .ic { width: 30px; height: 30px; color: var(--accent-d); margin-bottom: 18px; }
.fm-service-equipment h3 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.025em; }
.fm-service-equipment p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 300px; }
.fm-service-options { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 28px; }
.fm-service-options a { display: flex; align-items: center; justify-content: space-between; gap: 20px; text-decoration: none; padding: 12px 0; color: var(--accent-d); }
.fm-service-options strong { display: block; font-size: 15px; }
.fm-service-options span span { display: block; color: var(--muted); font-size: 12px; margin-top: 5px; }
.fm-service-options a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.fm-service-options .ic-sm { flex: none; }
.fm-service-process { background: var(--dark-2); color: #fff; margin-top: 72px; padding: 64px 0; }
.fm-service-process-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.fm-service-process .fm-service-label { color: #B8D7F0; }
.fm-service-detail-art { margin-top: 30px; }
.fm-service-detail-art figcaption { color: #A8C1D6; }
.fm-service-steps { padding: 0; margin: 0; list-style: none; }
.fm-service-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 18px; padding: 25px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.fm-service-steps li:first-child { padding-top: 0; }
.fm-service-steps li:last-child { padding-bottom: 0; border-bottom: 0; }
.fm-service-step-number { font: 13px var(--mono); color: #A8C1D6; padding-top: 4px; }
.fm-service-steps h3 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.025em; }
.fm-service-steps p { margin: 0; color: var(--on-dark); font-size: 14px; line-height: 1.7; }
#service-process, #service-center { scroll-margin-top: 110px; }
.fm-service-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fm-service-gallery figure { margin: 0; min-width: 0; }
.fm-service-gallery img, .fm-service-photo-empty { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.fm-service-photo-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; background: #EDF2F6; color: var(--accent-d); border: 1px dashed #B8CAD8; padding: 16px; text-align: center; }
.fm-service-photo-empty .ic { width: 30px; height: 30px; margin-bottom: 8px; stroke-width: 1.25; }
.fm-service-photo-empty > span { font-size: 14px; font-weight: 650; }
.fm-service-photo-empty small { font-size: 11px; color: var(--muted); }
.fm-service-gallery figcaption { display: flex; gap: 12px; align-items: baseline; padding-top: 14px; }
.fm-service-gallery figcaption > span { color: var(--muted); font: 11px var(--mono); }
.fm-service-gallery h3 { font-size: 14px; font-weight: 600; margin: 0; }
.fm-service-existing-media { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line); }
.fm-service-existing-media figure { margin: 0; min-width: 0; }
.fm-service-existing-media img { display: block; width: 100%; height: auto; border-radius: 8px; }
.fm-service-existing-media figcaption { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 12px; }
.fm-service-visit { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.fm-service-visit-lead { color: var(--muted); font-size: 15px; line-height: 1.75; max-width: 385px; margin: 22px 0; }
.fm-service-text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-d); font-size: 14px; font-weight: 650; text-underline-offset: 4px; min-height: 44px; }
.fm-service-faq details { border-top: 1px solid var(--line); padding: 0 0 4px; }
.fm-service-faq details:last-child { border-bottom: 1px solid var(--line); }
.fm-service-faq summary { cursor: pointer; font-size: 15px; font-weight: 650; padding: 21px 0; line-height: 1.5; }
.fm-service-faq summary::marker { color: var(--accent-d); }
.fm-service-faq details p { color: var(--muted); font-size: 14px; line-height: 1.75; margin: 0 0 20px; }
.fm-service-contact { padding-bottom: 72px; }
.fm-service-contact .page-cta { margin: 0; padding: 42px; border-radius: 12px; }
.fm-service-contact .page-cta h2 { font-size: 32px; }
.fm-service-contact .page-cta p { max-width: 490px; }
.fm-service-page main a:focus-visible, .fm-service-faq summary:focus-visible { outline: 3px solid #5AA9FF; outline-offset: 5px; }
@media (max-width: 1000px) {
  .fm-service-hero-grid { gap: 28px; }
  .fm-service-hero h1 { font-size: 44px; }
  .fm-service-hero-note { max-width: 280px; }
  .fm-service-process-grid, .fm-service-visit { gap: 36px; }
  .fm-service-gallery { gap: 16px; }
}
@media (max-width: 800px) {
  .fm-service-hero-grid, .fm-service-process-grid, .fm-service-visit { grid-template-columns: 1fr; }
  .fm-service-hero-copy { padding: 0; }
  .fm-service-hero-art { max-width: 600px; }
  .fm-service-hero-note { max-width: none; }
  .fm-service-assurances { gap: 18px; }
  .fm-service-assurances li { align-items: flex-start; font-size: 11px; }
  .fm-service-section { padding-top: 54px; }
  .fm-service-heading { gap: 30px; }
  .fm-service-equipment article { padding-right: 20px; }
  .fm-service-equipment article + article { padding-left: 20px; }
  .fm-service-equipment h3 { font-size: 18px; }
  .fm-service-equipment p { font-size: 13px; }
  .fm-service-process { margin-top: 54px; padding: 48px 0; }
  .fm-service-detail-art { max-width: 600px; }
  .fm-service-gallery, .fm-service-existing-media { grid-template-columns: 1fr; gap: 28px; }
  .fm-service-gallery figure { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
  .fm-service-gallery figcaption { padding: 0; }
  .fm-service-contact { padding-bottom: 54px; }
}
@media (max-width: 540px) {
  .fm-service-hero { padding-top: 22px; }
  .fm-service-hero .crumbs { font-size: 10px; margin-bottom: 26px; }
  .fm-service-label { font-size: 11px; margin-bottom: 16px; }
  .fm-service-hero h1 { font-size: 40px; }
  .fm-service-hero-lead { font-size: 14px; margin-bottom: 22px; }
  .fm-service-actions { gap: 8px; }
  .fm-service-actions .btn { width: 100%; font-size: 14px; }
  .fm-service-actions .btn-ghost { width: 100%; font-size: 13px; background: transparent; }
  .fm-service-hero-note { font-size: 11px; margin-top: 12px; }
  .fm-service-assurances { grid-template-columns: 1fr; gap: 18px; margin-top: 26px; padding: 24px 0; }
  .fm-service-assurances li { font-size: 12px; align-items: center; }
  .fm-service-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 26px; }
  .fm-service-heading > p { font-size: 14px; }
  .fm-service-equipment { grid-template-columns: 1fr; }
  .fm-service-equipment article, .fm-service-equipment article + article { border-left: 0; padding: 23px 0; display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; }
  .fm-service-equipment article + article { border-top: 1px solid var(--line); }
  .fm-service-equipment .ic { grid-row: span 2; margin-top: 2px; }
  .fm-service-equipment p { max-width: none; }
  .fm-service-options { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
  .fm-service-steps li { grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 23px 0; }
  .fm-service-steps h3 { font-size: 17px; }
  .fm-service-steps p { font-size: 13px; }
  .fm-service-gallery figure { display: block; }
  .fm-service-gallery figcaption { padding-top: 12px; }
  .fm-service-visit { gap: 28px; }
  .fm-service-faq summary { font-size: 14px; }
  .fm-service-contact .page-cta { padding: 28px 22px; gap: 24px; }
  .fm-service-contact .page-cta h2 { font-size: 27px; }
  .fm-service-contact .page-cta-actions { width: 100%; }
}

/* -- Contact and navigation header ------- */
:root { --fm-header-height: 133px; }
.fm-header .fm-header-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "brand phone actions" "navigation navigation navigation"; grid-template-rows: 84px 48px;
  column-gap: 28px; row-gap: 0; height: auto; padding: 0 40px; }
.fm-header-grid::after { content: ""; position: absolute; top: 83px; left: 40px; right: 40px; height: 1px; background: var(--line-2); pointer-events: none; }
.fm-header-grid > .brand { grid-area: brand; justify-self: start; }
.fm-header-contacts { grid-area: phone; display: flex; align-items: center; justify-self: end; gap: 18px; }
.fm-header .fm-header-phone { display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  justify-self: end; color: var(--fm-navy); text-decoration: none; white-space: nowrap; font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.fm-header-email { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--fm-navy); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.fm-header-contacts .ic-sm { flex: none; color: var(--fm-steel); }
.fm-header .fm-header-phone:hover, .fm-header-email:hover { color: var(--accent-d); }
.fm-header-grid > .hdr-actions { grid-area: actions; margin-left: 0; justify-self: end; }
.fm-header .fm-header-ai { display: inline-flex; align-items: center; justify-content: center; height: 44px; gap: 6px; padding: 0 10px;
  border: 1px solid #c9dcf3; border-radius: 7px; color: var(--fm-navy); background: linear-gradient(120deg, #f4f8fe, #e3efff);
  font-size: 13px; white-space: nowrap; animation: none; box-shadow: none; }
.fm-header .fm-header-ai:hover { background: #dcecff; box-shadow: 0 4px 14px rgba(42,98,166,.16); }
.fm-header .fm-header-ai:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.fm-header-ai-mark { flex: none; width: 32px; height: 32px; object-fit: contain; }
.fm-header-navigation { grid-area: navigation; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; }
.fm-header .fm-header-nav { display: flex; justify-content: flex-start; gap: 30px; }
.fm-header .fm-header-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 14px; }
.fm-configurators { display: flex; align-items: center; gap: 8px; flex: none; }
.fm-config-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 12px;
  border: 1px solid var(--line-2); border-radius: 8px; color: var(--fm-navy); background: var(--paper); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.fm-config-link:hover, .fm-config-link.on { border-color: var(--accent-d); background: var(--accent-bg); color: var(--accent-d); }
.fm-config-link .ic-sm { flex: none; }
.fm-config-short { display: none; }
.fm-mobile-configurators { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 24px; }
.fm-mobile-configurators .fm-config-link { justify-content: flex-start; min-height: 48px; padding-inline: 14px; color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); font-size: 14px; }
.fm-mobile-configurators .fm-config-link:hover, .fm-mobile-configurators .fm-config-link.on { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.fm-header-tools { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.fm-header-tools .fm-catalog-toggle, .fm-header-tools .fm-search-toggle { height: 44px; }
.fm-header-tools .fm-search-toggle { width: 44px; }
.fm-header .burger { display: none; }
.fm-header-mobile-kp { display: none; }
.fm-search-panel { inset-block-start: calc(var(--fm-header-height) + 12px); }
.sec [id], .fm-home .sec [id], #workshop, .auth-enquiry, #svc-lead { scroll-margin-top: calc(var(--fm-header-height) + 16px); }
@media (min-width: 701px) {
  .fm-catalog { top: calc(var(--fm-header-height) + 12px); height: min(630px, calc(100dvh - var(--fm-header-height) - 36px)); }
}
@media (max-width: 1380px) {
  .fm-header-contacts { flex-direction: column; align-items: flex-end; gap: 0; }
  .fm-header .fm-header-phone { min-height: 28px; }
  .fm-header-email { min-height: 24px; }
}
@media (max-width: 1280px) {
  .fm-header .fm-header-grid { padding-inline: 24px; column-gap: 22px; }
  .fm-header-grid::after { left: 24px; right: 24px; }
  .fm-header .fm-header-nav { gap: 22px; }
  .fm-header .fm-header-ai { width: 44px; padding: 0; }
  .fm-header-ai .hdr-ai-t { display: none; }
}
@media (min-width: 981px) and (max-width: 1280px) {
  .fm-header .fm-header-nav { gap: 14px; }
  .fm-header-navigation { gap: 16px; }
  .fm-configurators .fm-config-full { display: none; }
  .fm-configurators .fm-config-short { display: inline; }
}
@media (max-width: 980px) {
  :root { --fm-header-height: 133px; }
  .fm-header .fm-header-grid { grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "phone request"; grid-template-rows: 72px 60px; column-gap: 12px; }
  .fm-header-grid::after { top: 71px; }
  .fm-header-navigation, .fm-header-tools { display: none; }
  .fm-header .burger { display: flex; }
  .fm-header-contacts { justify-self: start; align-items: flex-start; }
  .fm-header .fm-header-phone { min-height: 24px; font-size: 16px; gap: 8px; }
  .fm-header-email { font-size: 12px; }
  .fm-header-mobile-kp { grid-area: request; justify-self: end; display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; color: var(--accent-d); font-size: 13px; font-weight: 600; text-decoration: none; }
}
@media (max-width: 600px) {
  .fm-header .fm-header-grid { padding-inline: 16px; }
  .fm-header-grid::after { left: 16px; right: 16px; }
}
@media (max-width: 360px) {
  .fm-header .fm-header-grid { column-gap: 8px; }
  .fm-header .fm-logo { width: 100px; height: auto; }
  .fm-header .hdr-actions, .fm-header .fm-messengers { gap: 6px; }
  .fm-header .fm-header-ai, .fm-header .fm-messenger, .fm-header .burger { width: 40px; }
  .fm-header .fm-header-phone { font-size: 14px; }
  .fm-header-mobile-kp { font-size: 12px; gap: 6px; }
}

/* ── Конфигуратор ФЕРМО (/configure, store/configurator.py) ─────────────────────────────────────
   Слоты сборки слева, липкий итог справа; список кандидатов слота подгружается HTMX-ом под слотом. */
.cb { padding-bottom: 56px; }
.cb-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.cb-lead { color: var(--muted); max-width: 720px; margin-top: 8px; line-height: 1.55; }
.cb-modes { display: inline-flex; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 4px; gap: 4px; }
.cb-modes a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 14px; }
.cb-modes a.on { background: var(--accent); color: var(--on-accent); }
.cb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.cb-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cb-slot { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; }
.cb-slot.is-set { border-color: var(--line-2); box-shadow: var(--shadow); }
.cb-slot-h { display: flex; align-items: center; gap: 10px; }
.cb-slot-ic { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--accent-bg); color: var(--accent); flex: none; }
.cb-slot-t { font-weight: 700; font-size: 16px; flex: 1; }
.cb-req { color: var(--bad); margin-left: 3px; }
.cb-link { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 4px; color: var(--muted); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; }
.cb-link:hover { color: var(--ink); }
.cb-item, .cb-pk-it { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start; margin-top: 12px; }
.cb-item-img { width: 64px; height: 64px; border-radius: var(--r-sm); background: var(--bg); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cb-item-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cb-item-t { color: var(--ink); font-weight: 600; text-decoration: none; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb-item-t:hover { color: var(--accent-d); text-decoration: underline; }
.cb-item-meta { color: var(--muted); font-size: 12px; margin-top: 3px; font-family: var(--mono); }
.cb-chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cb-chips li { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--bg); color: var(--ink-2); }
.cb-chips li span { color: var(--muted); }
.cb-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 120px; }
.cb-price { font-weight: 700; font-family: var(--mono); white-space: nowrap; }
.cb-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); }
.cb-qty a, .cb-qty span { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; }
.cb-qty span { color: var(--line); }
.cb-qty b { min-width: 24px; text-align: center; font-family: var(--mono); }
.cb-pick-btn { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.cb-pick-btn.ghost { background: transparent; color: var(--accent-d); border-color: var(--line); }
.cb-picker:empty { display: none; }
.cb-picker { margin-top: 14px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.cb-pk-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cb-pk-q { flex: 1 1 220px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 10px; background: var(--paper); }
.cb-pk-q input { border: 0; outline: 0; padding: 10px 0; font: inherit; width: 100%; background: transparent; }
.cb-tg { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); font-size: 13px; text-decoration: none; }
.cb-tg.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-d); font-weight: 600; }
.cb-pk-note { display: flex; align-items: center; gap: 6px; color: var(--ok); font-size: 13px; margin: 10px 0 0; }
.cb-pk-list { list-style: none; margin: 4px 0 0; padding: 0; max-height: 560px; overflow-y: auto; }
.cb-pk-it { padding: 12px 0; border-bottom: 1px solid var(--line-3); margin-top: 0; }
.cb-pk-nospec { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.cb-pk-empty { padding: 18px 0 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); }
.cb-pk-empty p { width: 100%; margin: 0 0 4px; }
.cb-sum { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; position: sticky; top: 142px; box-shadow: var(--shadow); }
.cb-sum-h { font-family: var(--display); font-weight: 700; font-size: 18px; margin-bottom: 12px; }
.cb-sum-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; color: var(--muted); }
.cb-sum-row b { color: var(--ink); font-family: var(--mono); }
.cb-verdicts { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.cb-v { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: var(--r-sm); }
.cb-v .ic-sm { flex: none; margin-top: 1px; }
.cb-v--ok { background: var(--ok-bg); color: var(--ok); }
.cb-v--fail { background: var(--bad-bg); color: var(--bad); }
.cb-v--unknown { background: var(--bg); color: var(--ink-2); }
.cb-note { font-size: 13px; color: var(--muted); margin: 10px 0 0; line-height: 1.45; }
.cb-note--bad { color: var(--bad); }
.cb-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; font-weight: 600; }
.cb-total b { font-size: 22px; font-family: var(--mono); text-align: right; }
.cb-vat { margin-top: 10px; }
.cb-form { display: grid; gap: 10px; margin-top: 16px; }
.cb-f { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.cb-f input, .cb-f textarea { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); background: var(--paper); }
.cb-form .btn[disabled] { opacity: .5; cursor: not-allowed; }
/* пустая сборка: развилка «собрать самому / с инженером» и готовые сборки инженера */
.cb-start { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.cb-start-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.cb-start-card > span:last-child { grid-column: 2; color: var(--muted); font-size: 14px; line-height: 1.45; }
.cb-start-ic { grid-row: span 2; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: var(--r-sm); background: var(--accent-bg); color: var(--accent); }
@media (hover: hover) { .cb-start-card:hover { border-color: var(--accent); } }
.cb-ready { margin-bottom: 24px; }
.cb-ready-h { font-family: var(--display); font-size: 22px; font-weight: 700; margin: 0; }
.cb-ready-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.cb-ready-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.cb-ready-card > b { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cb-ready-card > p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.cb-ready-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.cb-ready-lines li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-ready-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 8px; border-top: 1px solid var(--line-3); }
.cb-ready-foot .btn { white-space: nowrap; flex-shrink: 0; }
.cb-ready-foot .cb-price { white-space: nowrap; min-width: 0; }
@media (max-width: 560px) { .cb-start { grid-template-columns: 1fr; } }
/* полоса статуса сборки (над слотами): совместимость, обязательные, БП, поставка, действия */
.cb-status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 18px; margin-bottom: 16px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); }
.cb-status--ok { border-color: var(--ok); background: var(--ok-bg); }
.cb-status--bad { border-color: var(--bad); background: var(--bad-bg); }
.cb-status--warn { border-color: var(--warn); background: var(--warn-bg); }
.cb-status-main { display: flex; align-items: center; gap: 12px; flex: 1 1 300px; min-width: 0; }
.cb-status-main b { display: block; font-size: 15px; }
.cb-status-main span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; }
.cb-status-ic { display: inline-flex; color: var(--accent); flex: none; }
.cb-status--ok .cb-status-ic { color: var(--ok); }
.cb-status--bad .cb-status-ic { color: var(--bad); }
.cb-status--warn .cb-status-ic { color: var(--warn); }
.cb-status-kpi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; color: var(--ink-2); }
.cb-kpi { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cb-prog { display: grid; gap: 5px; min-width: 150px; }
.cb-prog i { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.cb-prog em { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.cb-res.is-over em { background: var(--bad); }
.cb-res.is-over b { color: var(--bad); }
.cb-status-act { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-act { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 40px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.cb-act.done { border-color: var(--ok); color: var(--ok); }
@media (hover: hover) { .cb-act:hover { border-color: var(--accent); color: var(--accent-d); } }
/* подбор — таблица: характеристики слота колонками (как у PCPartPicker); узко — чипами */
.cb-pk-sort { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 8px; background: var(--paper); }
.cb-pk-sort select { border: 0; background: transparent; font: inherit; font-size: 14px; padding: 9px 0; color: var(--ink); }
.cb-pk-tbl .cb-pk-head, .cb-pk-tbl .cb-pk-it { display: grid; grid-template-columns: 48px minmax(180px, 1fr) repeat(var(--cols), minmax(64px, 104px)) 112px 88px; gap: 12px; align-items: center; }
.cb-pk-bar.htmx-request ~ .cb-pk-tbl, .cb-tg.htmx-request ~ .cb-pk-tbl { opacity: .5; pointer-events: none; transition: opacity .15s; }
.cb-pk-more { margin-top: 6px; }
.cb-pk-tbl .cb-pk-it { margin-top: 0; }
.cb-pk-tbl .cb-item-img { width: 48px; height: 48px; }
.cb-pk-head { font-size: 12px; color: var(--muted); padding: 10px 0 6px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; background: var(--paper); z-index: 1; }
.cb-pk-col { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.cb-pk-num { text-align: right; display: grid; justify-items: end; gap: 4px; }
.cb-pk-chips { display: none; }
.cb-pk-cmp { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 6px; cursor: pointer; }
.cb-pk-cmp input { width: 16px; height: 16px; accent-color: var(--accent); }
.cb-pk-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; font-size: 12px; color: var(--muted); }
.cb-cmp:empty { display: none; }
.cb-cmp { margin-top: 12px; }
.cb-cmp-box { border: 1px solid var(--line); border-radius: var(--r); padding: 12px; background: var(--bg); }
.cb-cmp-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cb-cmp-scroll { overflow-x: auto; }
.cb-cmp-t { border-collapse: collapse; width: 100%; font-size: 13px; }
.cb-cmp-t th, .cb-cmp-t td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; min-width: 140px; }
.cb-cmp-t thead th { font-weight: 600; }
.cb-cmp-t thead a { color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cb-cmp-t tbody th { color: var(--muted); font-weight: 500; min-width: 110px; }
.cb-cmp-t tr.is-diff td { background: var(--accent-bg); font-weight: 600; }
@media (max-width: 980px) {
  .cb-pk-tbl .cb-pk-head { display: none; }
  .cb-pk-tbl .cb-pk-it { grid-template-columns: 48px minmax(0, 1fr); }
  .cb-pk-tbl .cb-pk-col { display: none; }
  .cb-pk-chips { display: flex; }
  .cb-pk-more { display: none; }
  .cb-pk-num { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: start; gap: 12px; align-items: center; }
  .cb-pk-go { grid-column: 2; justify-self: start; }
}
/* пустой слот — одна строка: иконка · название · «Обязательно» · «Добавить» (как у DNS) */
.cb-slot:not(.is-set) { padding: 10px 14px; }
.cb-need { font-size: 12px; color: var(--muted); }
.cb-slot:not(.is-set) .cb-req { display: none; }  /* на широком — словом «Обязательно» */
.cb-slot-t { min-width: 0; }
.cb-pick-btn--row { margin-top: 0; padding: 7px 14px; }
.cb-warr { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cb-used { color: var(--bad); font-weight: 600; }
.cb-sup--transit i { background: var(--warn); }
.cb-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.cb-check input { width: 18px; height: 18px; accent-color: var(--accent); }
@media (max-width: 980px) {
  .cb-grid { grid-template-columns: 1fr; }
  .cb-sum { position: static; }
}
/* печать / «Сохранить как PDF»: только сборка и итог, без шапки, формы и подбора */
@media print {
  header, footer, nav, .crumbs, .cb-modes, .cb-status-act, .cb-form, .cb-pick-btn, .cb-picker, .cb-link, .cb-qty a, .cb-qty span, .cb-vat, .cookie, [class*="cookie"], [class*="chat"], .mbar { display: none !important; }
  body { background: #fff; }
  .cb-grid { grid-template-columns: 1fr; }
  .cb-sum { position: static; box-shadow: none; }
  .cb-slot { break-inside: avoid; box-shadow: none; }
  .cb-slot:not(.is-set) { display: none; }
}
@media (max-width: 560px) {
  .cb-need { display: none; }
  .cb-slot:not(.is-set) .cb-req { display: inline; }
  .cb-status-act { width: 100%; }
  .cb-act { flex: 1; justify-content: center; }
  .cb-item, .cb-pk-it { grid-template-columns: 48px minmax(0, 1fr); }
  .cb-item-img { width: 48px; height: 48px; }
  .cb-item-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; min-width: 0; }
  .cb-modes { width: 100%; }
  .cb-modes a { flex: 1; justify-content: center; }
}
.cb-form .fm-contact-fields label { font-weight: 400; color: var(--muted); }
.cb-form .fm-contact-fields input { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink); background: var(--paper); min-width: 0; }
/* сводка сборки узкая (~310px) на любом экране: телефон и почта — столбиком, иначе email обрезается */
.cb-form .fm-contact-fields { grid-template-columns: 1fr; }

/* Зоны нажатия на телефоне ≥ ~40px (мобильный аудит 29.09: ссылки подвала/крошек 16–22px,
   кнопки ассистента/фильтров 30–34px). Текстовым ссылкам без фона/рамки — padding + такой же
   отрицательный margin: зона растёт, раскладка и вид нет; в списках — меньший margin, чтобы
   зоны соседей не пересекались. */
@media (max-width: 768px) {
  .sa-x, .sa-mgr { width: 40px; height: 40px; }
  .cat-drawer-x { width: 40px; height: 40px; }
  .ftr-contact { padding-block: 8px; margin-block: 0; }
  .sec-all, nav.crumbs a, .ct-email { padding-block: 10px; margin-block: -10px; }
}

/* Телефон: маскот ассистента — обычная круглая кнопка как у чата (54px), столбиком над ней.
   Раньше маскот 72–110px без подложки висел над контентом и закрывал кнопки первого экрана
   (мобильный аудит 29.09). Десктоп не затронут. */
@media (max-width: 768px) {
  .sa-fab.sa-fab--seat { right: 14px; bottom: calc(130px + env(safe-area-inset-bottom)); width: 54px; height: 54px;
    padding: 0; border-radius: 50%; background: #fff; box-shadow: 0 8px 22px rgba(20,30,50,.28);
    overflow: hidden; justify-content: center; transform: none; }
  .sa-fab--seat::before { display: none; }
  .sa-fab--seat .sa-fab-mascot { width: 46px; height: 46px; animation: none; filter: none; transform: none; }
  /* баннер cookie (первый визит) — текст и «Принять» не под колонкой круглых кнопок справа */
  .cookie-bar { padding-right: 70px; }
}

/* ══ Посадочные «Серверы для 1С» / «Серверы для ИИ» (/page/servers-1c, /page/ai-servers; 30.09.2026) ══ */
.s1c-unit { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.tier .s1c-cta { margin-top: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.s1c-faq h2 { font-family: var(--display); font-size: 26px; letter-spacing: -.5px; margin: 0 0 18px; }
.s1c-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.s1c-grid > div { background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px; padding: 22px; }
.s1c-grid h3 { font-family: var(--display); font-size: 17px; margin: 0 0 8px; }
.s1c-grid p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
@media (max-width: 760px) { .s1c-grid { grid-template-columns: 1fr; } }


/* ── Страницы услуг (service_page.html): тексты макетов, стиль сайта — только раскладка новых блоков ── */
.sp-hero-art { min-width: 0; }
.sp-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-lg); }
.page-sec[id] { scroll-margin-top: 100px; }
.sp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.sp-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }
.vals.sp-cols2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vals.sp-cols4, .fm-svc.sp-cols4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.val.sp-accent { background: var(--dark-2); border-color: var(--dark-2); }
.val.sp-accent h3 { color: #fff; }
.val.sp-accent p { color: var(--on-dark); }
.val.sp-accent .val-ic { color: var(--accent-hi); }
/* цифры */
.sp-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.sp-stats.sp-n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-stats li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.sp-stats b { display: block; font-family: var(--display); font-weight: 700; font-size: 34px; letter-spacing: -1px; color: var(--accent-d); }
.sp-stats span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* список «заголовок | пояснение» */
.sp-rows { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.sp-rows li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: center; padding: 18px 24px; }
.sp-rows li + li { border-top: 1px solid var(--line-2); }
.sp-row-h { display: flex; align-items: center; gap: 10px; }
.sp-row-h b { font-size: 15.5px; font-weight: 700; }
.sp-row-h .ic-sm { flex: none; }
.sp-rows p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
/* вкладки (radio, без JS) */
.sp-tabs { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.sp-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.sp-tabbar { display: flex; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.sp-tabbar::-webkit-scrollbar { display: none; }
.sp-tab { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 16px 18px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; border-bottom: 2.5px solid transparent; margin-bottom: -1px; }
.sp-tab:hover { color: var(--ink); }
.sp-pane { display: none; padding: 28px; }
.sp-pane h3 { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -.5px; margin: 0 0 10px; }
.sp-pane > p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 760px; }
.sp-pane .svc-list { margin-top: 20px; }
.sp-tabs > input:nth-of-type(1):checked ~ .sp-pane-1 { display: block; }
.sp-tabs > input:nth-of-type(1):checked ~ .sp-tabbar .sp-tab-1 { color: var(--accent-d); border-bottom-color: var(--accent-d); }
.sp-tabs > input:nth-of-type(1):focus-visible ~ .sp-tabbar .sp-tab-1 { outline: 2px solid var(--accent); outline-offset: -2px; }
.sp-tabs > input:nth-of-type(2):checked ~ .sp-pane-2 { display: block; }
.sp-tabs > input:nth-of-type(2):checked ~ .sp-tabbar .sp-tab-2 { color: var(--accent-d); border-bottom-color: var(--accent-d); }
.sp-tabs > input:nth-of-type(2):focus-visible ~ .sp-tabbar .sp-tab-2 { outline: 2px solid var(--accent); outline-offset: -2px; }
.sp-tabs > input:nth-of-type(3):checked ~ .sp-pane-3 { display: block; }
.sp-tabs > input:nth-of-type(3):checked ~ .sp-tabbar .sp-tab-3 { color: var(--accent-d); border-bottom-color: var(--accent-d); }
.sp-tabs > input:nth-of-type(3):focus-visible ~ .sp-tabbar .sp-tab-3 { outline: 2px solid var(--accent); outline-offset: -2px; }
.sp-tabs > input:nth-of-type(4):checked ~ .sp-pane-4 { display: block; }
.sp-tabs > input:nth-of-type(4):checked ~ .sp-tabbar .sp-tab-4 { color: var(--accent-d); border-bottom-color: var(--accent-d); }
.sp-tabs > input:nth-of-type(4):focus-visible ~ .sp-tabbar .sp-tab-4 { outline: 2px solid var(--accent); outline-offset: -2px; }
.sp-tabs > input:nth-of-type(5):checked ~ .sp-pane-5 { display: block; }
.sp-tabs > input:nth-of-type(5):checked ~ .sp-tabbar .sp-tab-5 { color: var(--accent-d); border-bottom-color: var(--accent-d); }
.sp-tabs > input:nth-of-type(5):focus-visible ~ .sp-tabbar .sp-tab-5 { outline: 2px solid var(--accent); outline-offset: -2px; }
.sp-tabs > input:nth-of-type(6):checked ~ .sp-pane-6 { display: block; }
.sp-tabs > input:nth-of-type(6):checked ~ .sp-tabbar .sp-tab-6 { color: var(--accent-d); border-bottom-color: var(--accent-d); }
.sp-tabs > input:nth-of-type(6):focus-visible ~ .sp-tabbar .sp-tab-6 { outline: 2px solid var(--accent); outline-offset: -2px; }
/* этапы */
.sp-steps { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sp-steps.sp-n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sp-steps.sp-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sp-step-n { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--accent-d); margin-bottom: 14px; }
/* уровни, бренды */
.val.sp-tier-mid { border-color: var(--accent-d); box-shadow: var(--shadow); }
.sp-tier-price { font-weight: 700; color: var(--accent-d) !important; margin: -4px 0 8px !important; }
.sp-tier-list { margin-top: 16px; }
.sp-tier-list li { font-size: 13.5px; }
.sp-logos { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sp-logos li { padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); font-size: 13px; font-weight: 700; }
@media (max-width: 1100px) {
  .vals.sp-cols4, .fm-svc.sp-cols4, .sp-stats.sp-n4, .sp-steps, .sp-steps.sp-n5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .vals.sp-cols2, .vals.sp-cols4, .fm-svc.sp-cols4, .sp-stats, .sp-stats.sp-n4, .sp-steps, .sp-steps.sp-n5, .sp-steps.sp-n3 { grid-template-columns: minmax(0, 1fr); }
  .sp-head { flex-direction: column; gap: 6px; }
  .sp-rows li { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 18px; }
  .sp-pane { padding: 20px 18px; }
  .sp-tab { padding: 14px 12px; font-size: 13.5px; }
  .page-sec h2 { overflow-wrap: break-word; hyphens: auto; }
}

/* -- Equipment cutout heroes ------- */
.fm-equipment-hero .page-hero-in { padding-bottom: 44px; }
.fm-equipment-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; }
.fm-equipment-layout .fm-service-copy { min-width: 0; }
.fm-equipment-layout h1 { font-size: clamp(34px, 3.2vw, 46px); text-wrap: balance; overflow-wrap: break-word; }
.fm-equipment-layout .lead { max-width: 54ch; margin-bottom: 26px; }
.fm-equipment-art { min-width: 0; width: 100%; }
.fm-equipment-image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
@media (max-width: 980px) {
  .fm-equipment-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .fm-equipment-layout h1 { font-size: 38px; }
  .fm-equipment-art { max-width: 680px; justify-self: center; }
}
@media (max-width: 640px) {
  .fm-equipment-hero .page-hero-in { padding: 22px 16px 28px; }
  .fm-equipment-layout { gap: 20px; }
  .fm-equipment-layout .fm-service-copy { display: contents; }
  .fm-equipment-layout .ph-eyebrow { order: 0; margin: 0; }
  .fm-equipment-layout h1 { order: 1; font-size: 30px; letter-spacing: -.8px; margin: 0; }
  .fm-equipment-art { order: 2; }
  .fm-equipment-layout .lead { order: 3; font-size: 15px; margin: 0; }
  .fm-equipment-layout .bsh-actions { order: 4; margin: 0; }
  .fm-equipment-layout .svc-chips { order: 5; gap: 6px; margin: 0; }
}

/* -- Company, industries and project stories ------- */
.fm-story-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.fm-story-hero > div { min-width: 0; }
.fm-story-hero h1 { font-size: clamp(32px, 3.2vw, 46px); line-height: 1.15; text-wrap: balance; }
.fm-story-hero .lead { font-size: 16px; margin-bottom: 26px; }
.fm-story-text-only { grid-template-columns: minmax(0, 1fr); max-width: 880px; }
.fm-story-photo { margin: 0; min-width: 0; }
.fm-story-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); }
.fm-story-photo figcaption { color: var(--on-dark); font-size: 11px; margin-top: 10px; }
.fm-about-page .ph-stats { margin-top: 36px; }
.fm-about-page .val { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; padding: 22px 0; }
.fm-about-page .val-ic { display: none; }
.fm-industry-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
.fm-industry-story { text-decoration: none; min-width: 0; }
.fm-industry-story img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); }
.fm-industry-story > div { padding-top: 20px; }
.fm-industry-story p { color: var(--muted); max-width: 48ch; margin: 10px 0 18px; }
.fm-industry-story:hover h2, .fm-project-story h3 a:hover { color: var(--accent-d); }
.fm-industry-story:focus-visible, .fm-project-story-art:focus-visible { outline: 2px solid var(--accent-d); outline-offset: 5px; }
.fm-illustration-note { font-size: 12px; color: var(--muted); margin-top: 24px; }
.fm-people-story { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.fm-people-story figure, .fm-real-gallery figure { margin: 0; min-width: 0; }
.fm-people-story img, .fm-real-gallery img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); }
.fm-people-story figcaption, .fm-real-gallery figcaption { margin-top: 10px; font-size: 12px; color: var(--muted); }
.fm-people-story h3 { font-size: 28px; line-height: 1.25; letter-spacing: -.7px; margin: 0 0 16px; }
.fm-people-story p { color: var(--muted); max-width: 46ch; margin: 0 0 24px; }
.fm-real-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.fm-real-gallery img { aspect-ratio: 3 / 2; object-fit: cover; }
.fm-case-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }
.fm-case-task { font-size: 20px; line-height: 1.5; margin: 18px 0 28px; max-width: 40ch; }
.fm-case-facts { margin: 0; }
.fm-case-facts > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 13px; }
.fm-case-facts dt { color: var(--muted); }
.fm-case-facts dd { margin: 0; }
.fm-case-story .svc-list { margin-top: 22px; }
.fm-case-story .svc-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.fm-case-scope-note { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 24px; }
.fm-project-stories { margin-top: 28px; }
.fm-project-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: 32px 0; border-top: 1px solid var(--line); }
.fm-project-story-art { display: block; position: relative; min-width: 0; }
.fm-project-story-art img { width: 100%; height: auto; display: block; border-radius: var(--r-sm); }
.fm-project-story-art > span { display: inline-block; font-size: 11px; color: var(--muted); margin-top: 8px; }
.fm-project-story h3 { margin: 0 0 14px; font-size: 28px; line-height: 1.25; letter-spacing: -.7px; }
.fm-project-story h3 a { text-decoration: none; }
.fm-project-story p { color: var(--muted); margin: 0 0 18px; }
.fm-project-story .fm-project-customer { font-size: 12px; color: var(--accent-d); }
.fm-project-story ul { padding-left: 18px; margin: 0 0 20px; font-size: 14px; line-height: 1.7; }

/* -- Open layouts for service information ------- */
.fm-home .fm-adv-item { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 24px 0; background: none; box-shadow: none; }
.fm-service-page .sp-stats { gap: 24px; }
.fm-service-page .sp-stats li { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 20px 0; background: none; }
.fm-service-page .sp-rows { border: 0; border-radius: 0; background: none; }
.fm-service-page .sp-rows li { padding: 20px 0; gap: 32px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); border-bottom: 1px solid var(--line); }
.fm-service-page .sp-rows li + li { border-top: 0; }
.fm-service-page .sp-steps { gap: 24px; }
.fm-service-page .sp-steps .val { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 24px 0; background: none; }
.fm-service-page .sp-step-n { background: none; border: 0; padding: 0; }

@media (max-width: 800px) {
  .fm-story-hero, .fm-people-story, .fm-case-story, .fm-project-story { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fm-story-hero h1 { font-size: 36px; }
  .fm-story-photo { max-width: 640px; }
  .fm-industry-stories { gap: 32px 20px; }
  .fm-project-story-art { max-width: 640px; }
}

/* -- Mobile hero: context, action, then imagery ------- */
@media (max-width: 600px) {
  .page-hero .page-hero-in { padding: 20px 16px 32px; }
  .page-hero .crumbs { font-size: 11px; margin: 0 0 24px; line-height: 1.5; }
  .page-hero .ph-eyebrow { display: none; }
  .page-hero h1 { font-size: 30px; line-height: 1.13; letter-spacing: -.8px; }
  .page-hero .lead { font-size: 15px; line-height: 1.55; margin-bottom: 22px; }
  .fm-equipment-layout { gap: 22px; }
  .fm-equipment-layout .lead { order: 2; margin: 0; }
  .fm-equipment-layout .bsh-actions { order: 3; margin: 0; }
  .fm-equipment-layout .fm-equipment-art { order: 4; }
  .fm-equipment-layout .svc-chips { order: 5; }
  .fm-equipment-layout .svc-chip { padding: 0; border: 0; background: none; font-size: 12px; border-radius: 0; }
  .fm-factory-intro .lead { order: 2; margin: 0; }
  .fm-factory-intro .bsh-actions { order: 3; margin: 0; }
  .fm-factory-intro .fm-factory-hero-art { order: 4; }
  .fm-story-hero h1 { font-size: 30px; }
  .fm-about-page .ph-stats { margin-top: 26px; }
  .fm-industry-stories { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .fm-industry-story > div { padding-top: 16px; }
  .fm-industry-story h2 { font-size: 24px; }
  .fm-people-story h3, .fm-project-story h3 { font-size: 24px; }
  .fm-real-gallery { grid-template-columns: minmax(0, 1fr); }
  .fm-case-task { font-size: 18px; }
  .fm-case-facts > div { grid-template-columns: 70px minmax(0, 1fr); }
  .fm-project-story { padding: 24px 0; }
  .fm-service-page .sp-stats { gap: 0; }
  .fm-service-page .sp-stats li { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); align-items: center; gap: 16px; padding: 18px 0; }
  .fm-service-page .sp-stats b { font-size: 26px; }
  .fm-service-page .sp-stats span { font-size: 12px; margin: 0; }
  .fm-service-page .sp-rows li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0; }
  .fm-service-page .sp-steps { gap: 0; }
  .fm-service-page .sp-steps .val { padding: 20px 0 20px 48px; position: relative; }
  .fm-service-page .sp-step-n { position: absolute; left: 0; top: 20px; }
}

/* -- Partner programme ------- */
.fm-partner-page main { background: var(--paper); }
.fm-partner-page h1, .fm-partner-page h2, .fm-partner-page h3 { margin: 0; letter-spacing: -.035em; }
.fm-partner-page h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.2; font-weight: 750; }
.fm-partner-page h3 { font-size: 20px; line-height: 1.3; font-weight: 750; }
.fp-hero { padding: 28px 0 56px; background: var(--paper); }
.fp-hero .crumbs { margin: 0 0 40px; }
.fp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.fp-label { color: var(--accent-d); font-size: 14px; font-weight: 750; margin: 0 0 20px; }
.fp-intro h1 { max-width: 680px; font-size: clamp(36px, 3.8vw, 56px); font-weight: 800; line-height: 1.08; }
.fp-lead { margin: 26px 0 0; font-size: 18px; color: var(--ink-2); max-width: 550px; line-height: 1.7; }
.fp-lead strong { font-weight: 750; }
.fp-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 30px 0 18px; }
.fp-actions .btn { min-height: 52px; padding-inline: 22px; }
.fp-text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-d); text-decoration: underline; text-underline-offset: 5px; font-size: 14px; font-weight: 700; }
.fp-intro-note { max-width: 440px; font-size: 13px; color: var(--muted); }
.fp-hero-visual { margin: 0; min-width: 0; }
.fp-hero-visual > img { width: 100%; height: auto; aspect-ratio: 1.18; object-fit: cover; object-position: 52% center; border-radius: var(--r-lg); display: block; }
.fp-hero-visual figcaption { display: flex; gap: 12px; justify-content: space-between; margin-top: 14px; color: var(--muted); font-size: 12px; }
.fp-hero-visual figcaption > span:last-child { flex-shrink: 0; }
.fp-roles { background: var(--accent-d); color: var(--paper); padding: 28px 0; }
.fp-role-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-role { display: flex; gap: 16px; padding: 4px 28px; border-left: 1px solid rgba(255,255,255,.22); }
.fp-role:first-child { border-left: 0; padding-left: 0; }
.fp-role:last-child { padding-right: 0; }
.fp-role > .ic { color: var(--paper); flex-shrink: 0; margin-top: 2px; }
.fp-role h2 { color: var(--paper); font-size: 18px; }
.fp-role p { color: var(--on-dark); font-size: 13px; line-height: 1.65; margin: 9px 0 0; }
.fp-section { padding: 76px 32px; }
.fp-section-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); gap: 72px; align-items: end; margin-bottom: 38px; }
.fp-section-head p { max-width: 450px; color: var(--muted); margin: 0; font-size: 16px; }
.fp-audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.fp-audience article { padding: 30px 28px 0; border-left: 1px solid var(--line); }
.fp-audience article:first-child { padding-left: 0; border-left: 0; }
.fp-audience article:last-child { padding-right: 0; }
.fp-audience .ic { color: var(--accent-d); margin-bottom: 18px; width: 28px; height: 28px; }
.fp-audience p { color: var(--muted); line-height: 1.7; margin: 14px 0 0; }
.fp-benefits { background: var(--bg); padding: 70px 0; }
.fp-benefits-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.fp-team-photo { margin: 0; min-width: 0; }
.fp-team-photo img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.fp-team-photo figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.fp-benefit-list article { padding: 20px 0; border-top: 1px solid var(--line); }
.fp-benefit-list article:first-child { padding-top: 0; border-top: 0; }
.fp-benefit-list article:last-child { padding-bottom: 0; }
.fp-benefit-list p { color: var(--muted); margin: 10px 0 0; max-width: 530px; }
.fp-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.fp-case-intro > p:not(.fp-label) { color: var(--muted); font-size: 14px; margin: 20px 0; max-width: 480px; }
.fp-case-details { margin: 0; }
.fp-case-details > div { padding: 24px 0; border-top: 1px solid var(--line); }
.fp-case-details dt { font-size: 14px; font-weight: 750; color: var(--accent-d); }
.fp-case-details dd { margin: 10px 0 0; color: var(--ink-2); line-height: 1.7; }
.fp-process { border-top: 1px solid var(--line); }
.fp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 0; margin: 0; list-style: none; }
.fp-step-number { display: block; color: var(--accent-d); font-size: 15px; font-weight: 750; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 2px solid var(--line); }
.fp-steps p { color: var(--muted); font-size: 14px; margin: 12px 0 0; line-height: 1.7; }
.fp-faq { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); gap: 80px; border-top: 1px solid var(--line); }
.fp-faq details { border-bottom: 1px solid var(--line); }
.fp-faq details:first-child { border-top: 1px solid var(--line); }
.fp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; list-style: none; padding: 23px 0; font-weight: 700; cursor: pointer; }
.fp-faq summary::-webkit-details-marker { display: none; }
.fp-faq summary .ic-sm { flex-shrink: 0; color: var(--accent-d); }
.fp-faq details[open] summary .ic-sm { transform: rotate(45deg); }
.fp-faq details p { color: var(--muted); padding: 0 30px 22px 0; margin: 0; line-height: 1.75; }
.fp-apply-section { background: var(--bg); padding: 76px 0; }
.fp-apply-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; gap: 100px; }
.fp-apply-copy { padding-top: 24px; }
.fp-apply-copy > p:not(.fp-label) { color: var(--muted); max-width: 400px; line-height: 1.75; margin-top: 24px; }
.fp-apply-copy .fp-apply-note { font-size: 13px; }
.fp-application { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; scroll-margin-top: 160px; }
.fp-application form { display: grid; gap: 18px; }
.fp-application h3 { margin-bottom: 4px; font-size: 25px; }
.fp-application label { display: block; font-size: 13px; font-weight: 700; }
.fp-application label > span { font-weight: 500; color: var(--muted); }
.fp-application input:not([type=checkbox]), .fp-application select, .fp-application textarea { display: block; width: 100%; min-width: 0; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); padding: 12px; font: inherit; font-size: 16px; font-weight: 500; }
.fp-application textarea { resize: vertical; min-height: 98px; }
.fp-field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.fp-form-more { border-block: 1px solid var(--line); }
.fp-form-more summary { display: flex; align-items: center; gap: 8px; padding: 15px 0; font-size: 13px; font-weight: 700; color: var(--accent-d); list-style: none; cursor: pointer; }
.fp-form-more summary::-webkit-details-marker { display: none; }
.fp-form-more summary > span { color: var(--muted); font-weight: 400; }
.fp-form-more summary > .ic-sm { margin-left: auto; flex-shrink: 0; }
.fp-form-more[open] summary > .ic-sm { transform: rotate(45deg); }
.fp-form-more > div { display: grid; gap: 18px; padding-bottom: 18px; }
.fp-application .fp-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; line-height: 1.6; }
.fp-consent input { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent-d); }
.fp-consent a { color: var(--accent-d); text-underline-offset: 3px; }
.fp-application .btn { min-height: 50px; }
.fp-application .btn:disabled { opacity: .6; cursor: wait; }
.fp-form-error { background: var(--bad-bg); color: var(--bad); padding: 14px; border-radius: var(--r-sm); font-size: 14px; margin: 0; }
.fp-honeypot { display: none; }
.fp-success { min-height: 260px; display: grid; align-content: center; gap: 20px; }
.fp-success > .ic { width: 40px; height: 40px; color: var(--ok); }
.fp-success p { margin: 0; color: var(--muted); }
.fm-partner-page main :is(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--accent-hi); outline-offset: 4px; }
#partner-how { scroll-margin-top: 150px; }
@media (max-width: 1000px) {
  .fp-hero-grid, .fp-section-head, .fp-benefits-grid, .fp-case, .fp-apply-grid { gap: 36px; }
  .fp-application { padding: 26px; }
  .fp-faq { gap: 40px; }
  .fp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
}
@media (max-width: 760px) {
  .fp-hero { padding: 20px 0 44px; }
  .fp-hero .crumbs { margin-bottom: 28px; font-size: 12px; }
  .fp-hero-grid, .fp-section-head, .fp-benefits-grid, .fp-case, .fp-faq, .fp-apply-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .fp-intro h1 { font-size: clamp(35px, 7vw, 48px); }
  .fp-lead { font-size: 16px; line-height: 1.65; margin-top: 22px; }
  .fp-label { font-size: 13px; margin-bottom: 16px; }
  .fp-actions { gap: 18px; margin-top: 24px; }
  .fp-intro-note { font-size: 12px; }
  .fp-section { padding: 44px 20px; }
  .fp-benefits, .fp-apply-section { padding: 44px 0; }
  .fp-hero .wrap, .fp-benefits .wrap, .fp-apply-section .wrap { padding-inline: 20px; }
  .fp-section-head { margin-bottom: 28px; gap: 18px; }
  .fp-section-head p { font-size: 14px; }
  .fp-audience { grid-template-columns: minmax(0, 1fr); }
  .fp-audience article, .fp-audience article:first-child, .fp-audience article:last-child { padding: 24px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .fp-audience article:last-child { border-bottom: 0; padding-bottom: 0; }
  .fp-audience .ic { margin-bottom: 14px; }
  .fp-audience p, .fp-benefit-list p { font-size: 14px; }
  .fp-faq summary { font-size: 14px; }
  .fp-faq details p { font-size: 14px; }
  .fp-apply-copy { padding-top: 0; }
  .fp-application { padding: 22px; }
  .fp-hero-visual > img { aspect-ratio: 1.5; }
  .fp-hero-visual figcaption { font-size: 11px; }
  .fp-role-grid { grid-template-columns: minmax(0, 1fr); }
  .fp-role, .fp-role:first-child, .fp-role:last-child { padding: 18px 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.22); }
  .fp-role:first-child { border-top: 0; }
  .fp-roles { padding: 6px 0; }
  .fp-roles .wrap { padding-inline: 20px; }
  .fp-role h2 { font-size: 18px; }
  .fp-team-photo figcaption, .fp-team-photo .fp-text-link { font-size: 12px; }
  .fp-case-details > div { padding: 18px 0; }
  .fp-case-details dd { font-size: 14px; }
  .fp-field-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fp-steps { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .fp-steps li { position: relative; padding-left: 46px; }
  .fp-step-number { position: absolute; left: 0; top: 2px; border: 0; padding: 0; margin: 0; }
  .fp-steps h3 { font-size: 18px; }
  .fp-steps p { margin-top: 8px; }
  .fp-application { scroll-margin-top: 156px; }
}

/* ══ Карточка товара: заявка с рекламы (04.10.2026) ══
   Реклама приземляет на карточку, 95% визитов — одна страница. На телефоне первым экраном было
   только фото 420px: название, цена и «Получить КП» — ниже сгиба. Теперь на ≤768px порядок
   «название → цена и КП → фото», фото ниже, миниатюры — одной прокручиваемой строкой.
   .pd-info { display: contents } отдаёт его детей во flex .pd-top, чтобы переставить их через order. */
.pd-kp-promise { margin: 12px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--on-dark-2); text-align: center; }
.kp-more { display: flex; flex-direction: column; gap: 8px; }
.kp-more[open] { padding-bottom: 4px; }
.kp-more > summary { cursor: pointer; font-size: 13.5px; color: var(--accent); padding: 4px 0; list-style-position: inside; }
.kp-more > :not(summary) { margin-top: 8px; }
.kp-more input, .kp-more select, .kp-more textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 768px) {
  .pd-top { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 32px; }
  .pd-info { display: contents; }
  .pd-metaline { order: 1; margin-bottom: -6px; }
  .pd-title { order: 2; margin: 0; }
  .pd-buy { order: 3; padding: 18px; }
  .pd-gallery { order: 4; min-width: 0; }
  .pd-info > :not(.pd-metaline):not(.pd-title):not(.pd-buy) { order: 5; }
  .pd-buy-head { margin-bottom: 12px; }
  .pd-buy-price { font-size: 32px; margin-bottom: 14px; }
  .pd-img { height: 260px; padding: 14px; }
  .pd-img img { max-height: 232px; }
  .pd-thumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pd-thumbs::-webkit-scrollbar { display: none; }
  .pd-thumb { flex: none; width: 54px; height: 54px; }
  .pd-buy-soc a { font-size: 13px; gap: 6px; padding: 0 6px; }
}

/* -- Decorative photographic environments ------- */
:root { --fm-scene-image: url('/static/themes/fermo/scenes/warehouse-v1-960.jpg'); }
.fm-home .hero { isolation: isolate; }
.fm-home .hero::before {
  display: block;
  background: linear-gradient(90deg, #102f4c 2%, rgba(16,47,76,.94) 32%, rgba(16,47,76,.64) 55%, rgba(16,47,76,.16) 100%),
    url('/static/themes/fermo/scenes/hero-v1-1920.webp') right center / cover no-repeat;
  -webkit-mask-image: none; mask-image: none; pointer-events: none;
}
.fm-home .fm-hero-in { z-index: 1; }
/* Section backgrounds stay behind both the copy and transparent equipment. */
.fm-scene-hero { isolation: isolate; }
.fm-scene-hero::before {
  display: block;
  background: linear-gradient(90deg, #102f4c 2%, rgba(16,47,76,.94) 32%, rgba(16,47,76,.74) 55%, rgba(16,47,76,.4) 100%),
    var(--fm-scene-image) right center / cover no-repeat;
  -webkit-mask-image: none; mask-image: none; pointer-events: none;
}
.fm-scene-hero .page-hero-in { position: relative; z-index: 1; }
.fm-home .fm-catalog-scene { position: relative; isolation: isolate; }
.fm-home .fm-catalog-scene::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.93), rgba(255,255,255,.9)), var(--fm-scene-image) center / cover no-repeat;
}
.fm-home .fm-catalog-scene .cat,
.fm-home .fm-catalog-scene .cat-vis.has-img { background: transparent; }
.fm-scene-workshop { --fm-scene-image: url('/static/themes/fermo/scenes/workshop-v1-960.jpg'); }
.fm-scene-warehouse { --fm-scene-image: url('/static/themes/fermo/scenes/warehouse-v1-960.jpg'); }
.fm-scene-network { --fm-scene-image: url('/static/themes/fermo/scenes/network-v1-960.jpg'); }
.fm-scene-security { --fm-scene-image: url('/static/themes/fermo/scenes/security-v1-960.jpg'); }
.fm-scene-radio { --fm-scene-image: url('/static/themes/fermo/scenes/radio-v1-960.jpg'); }
@media (max-width: 980px) {
  .fm-home .hero::before { background-position: center, 66% center; background-image: linear-gradient(90deg, #102f4c 2%, rgba(16,47,76,.94) 32%, rgba(16,47,76,.64) 55%, rgba(16,47,76,.16) 100%), url('/static/themes/fermo/scenes/hero-v1-960.webp'); }
}
@media (max-width: 640px) {
  .fm-scene-hero.fm-scene-workshop { --fm-scene-image: url('/static/themes/fermo/scenes/workshop-v1-640.jpg'); }
  .fm-scene-hero.fm-scene-warehouse { --fm-scene-image: url('/static/themes/fermo/scenes/warehouse-v1-640.jpg'); }
  .fm-scene-hero.fm-scene-network { --fm-scene-image: url('/static/themes/fermo/scenes/network-v1-640.jpg'); }
  .fm-scene-hero.fm-scene-security { --fm-scene-image: url('/static/themes/fermo/scenes/security-v1-640.jpg'); }
  .fm-scene-hero.fm-scene-radio { --fm-scene-image: url('/static/themes/fermo/scenes/radio-v1-640.jpg'); }
  .fm-scene-hero::before {
    background-image: linear-gradient(180deg, #102f4c 0%, rgba(16,47,76,.96) 32%, rgba(16,47,76,.82) 65%, rgba(16,47,76,.74) 100%), var(--fm-scene-image);
    background-position: center, 74% bottom;
  }
  /* Фон hero — LCP главной: WebP 640/960/1920; те же брейкпоинты предзагружает home.html — менять вместе. */
  .fm-home .hero::before {
    background-image: linear-gradient(180deg, #102f4c 0%, rgba(16,47,76,.96) 36%, rgba(16,47,76,.72) 65%, rgba(16,47,76,.32) 100%), url('/static/themes/fermo/scenes/hero-v1-640.webp');
    background-position: center, 74% bottom;
  }
}