/* ============================================================
   robosite — публичная часть. Токены и характер из ib-site:
   фарфор и чернила, один акцент — киноварь, данные — синий.
   Инлайн-стилей нет (CSP). Один файл на всю публичную часть (бюджет SPEC-v2 §6.2 — до 90 КБ без сжатия):
     1. Ядро v2: токены, база, шапка с мега-меню, сетки, кнопки, карточки, формы, таблицы, текст, подвал,
        карточки товаров, цены, бейджи, чипы, липкая панель.
     2. Главная и информационные страницы (templates/public/*).
     3. Каталог: листинги, подборки, бренды (templates/catalog/*).
     4. Страница товара (templates/product/*).
     5. Магазин: формы заявок, корзина, «спасибо», сравнение, поиск и подсказки в шапке (leads/*, shop/*, search/*).
     6. Блог (templates/blog/*).
   Админка — static/css/admin.css.
   ============================================================ */

:root {
  --bg: #f2f3f1;
  --bg-raise: #fafaf8;
  --bg-dim: #e8eae6;
  --ink: #14171f;
  --ink-soft: #3a4048;
  --muted: #5f6772;
  --line: #d7d9d3;
  --line-strong: #14171f;
  --accent: #d5331f;
  --accent-hover: #b0270f;
  --accent-contrast: #ffffff;
  --data-blue: #2b4bd7;
  --photo-plate: #c9cbc7;
  --photo-light: #fbfbf9;
  --ok: #1f7a4d;
  --warn: #9a6b00;
  --bad: #b0270f;
  --neutral: #5f6772;

  --font-display: 'Unbounded', 'Arial Black', sans-serif;
  --font-body: 'Golos Text', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --container: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12141a;
    --bg-raise: #1a1d25;
    --bg-dim: #171a21;
    --ink: #ecede9;
    --ink-soft: #c9ccc6;
    --muted: #8f96a0;
    --line: #2b2f3a;
    --line-strong: #ecede9;
    --accent: #f4553c;
    --accent-hover: #ff7057;
    --accent-contrast: #16181e;
    --data-blue: #8ca0ff;
    --photo-plate: #262a33;
    --photo-light: #e8eae5;
    --ok: #5fc48f;
    --warn: #e0b24a;
    --bad: #ff7057;
    --neutral: #8f96a0;
  }
}
:root[data-theme="dark"] {
  --bg: #12141a;
  --bg-raise: #1a1d25;
  --bg-dim: #171a21;
  --ink: #ecede9;
  --ink-soft: #c9ccc6;
  --muted: #8f96a0;
  --line: #2b2f3a;
  --line-strong: #ecede9;
  --accent: #f4553c;
  --accent-hover: #ff7057;
  --accent-contrast: #16181e;
  --data-blue: #8ca0ff;
  --photo-plate: #262a33;
  --photo-light: #e8eae5;
  --ok: #5fc48f;
  --warn: #e0b24a;
  --bad: #ff7057;
  --neutral: #8f96a0;
}

/* ---------- База ---------- */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.site-main { flex: 1 0 auto; }

img, svg { max-width: 100%; display: block; }
a { color: var(--data-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding-left: 1.3em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); width: 100%; }
.container-narrow { max-width: 820px; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--ink); color: var(--bg); padding: 8px 12px; font-family: var(--font-mono); font-size: 12px;
}
.skip-link:focus { left: 8px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Honeypot-поле: не display:none, чтобы боты его видели, а люди — нет */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* ---------- Типографика ---------- */

.eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow b { color: var(--accent); font-weight: 500; }

h1, h2, h3, h4 { text-wrap: balance; line-height: 1.2; }
h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 4.2vw, 44px); letter-spacing: -0.01em; }
h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 3vw, 32px); }
h3 { font-family: var(--font-body); font-weight: 700; font-size: clamp(18px, 2vw, 22px); }
h4 { font-weight: 600; font-size: 17px; }

.display { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; font-size: clamp(28px, 5vw, 56px); }
.section-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.2; max-width: 18em; }
.lead { font-size: clamp(17px, 2vw, 21px); line-height: 1.6; color: var(--ink-soft); max-width: 34em; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.note { font-size: 14px; color: var(--muted); }
.accent { color: var(--accent); }

/* ---------- Шапка v2: верхняя строка, логотип, мега-меню, поиск, счётчики, бургер ---------- */

.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.header-top { border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.header-top-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.header-note { letter-spacing: .04em; }
.header-contacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.header-contacts a { color: var(--ink); text-decoration: none; white-space: nowrap; }
.header-contacts a:hover { color: var(--accent); }
.header-phone { font-weight: 600; }
.header-hours { white-space: nowrap; }

.header-main { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); min-height: 60px; position: relative; }
.brand {
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--ink); }
.brand-mark { color: var(--accent); }

.catalog-menu { position: static; }
.catalog-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--ink); color: var(--bg);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.catalog-toggle:hover, .catalog-toggle[aria-current="page"] { background: var(--accent); color: var(--accent-contrast); }
.catalog-toggle::after { content: "▾"; font-size: 10px; }
.megamenu {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% - 16px); z-index: 60;
  padding: 36px var(--gutter) 24px; background: transparent; border: 0; box-shadow: none;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px 28px;
}
/* Верхние 16px прозрачные и ловят курсор: между кнопкой и панелью нет щели, из-за которой меню гасло. */
.megamenu::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 16px; bottom: 0;
  background: var(--bg-raise); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-strong);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .1);
}
.catalog-menu:hover .megamenu, .catalog-menu:focus-within .megamenu, .catalog-menu.is-open .megamenu { display: grid; }
.megamenu-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.megamenu-list, .megamenu-sub { list-style: none; padding: 0; }
.megamenu-list > li + li { margin-top: 10px; }
.megamenu-section { font-weight: 600; color: var(--ink); text-decoration: none; }
.megamenu-sub { margin-top: 4px; font-size: 14px; }
.megamenu-sub li + li { margin-top: 2px; }
.megamenu-sub a, .megamenu-b2b { color: var(--ink-soft); text-decoration: none; }
.megamenu a:hover { color: var(--accent); }
.megamenu-all { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }

.header-search { position: relative; flex: 1 1 260px; display: flex; min-width: 0; }
.header-search input[type="search"] {
  flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--line-strong); border-right: 0; background: var(--bg-raise);
  font-size: 15px; border-radius: 0;
}
.header-search-btn { padding: 0 14px; border: 1px solid var(--line-strong); background: transparent; cursor: pointer; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.header-search-btn:hover { background: var(--ink); color: var(--bg); }
.search-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 70; background: var(--bg-raise); border: 1px solid var(--line-strong);
  border-top: 0; box-shadow: 0 12px 24px rgba(0, 0, 0, .1); max-height: 70vh; overflow-y: auto;
}

.header-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.header-counter { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
.header-counter:hover { color: var(--accent); }
.counter { display: inline-block; min-width: 1.6em; padding: 1px 5px; margin-left: 2px; text-align: center; border: 1px solid var(--line-strong); font-variant-numeric: tabular-nums; }
.counter.has-items { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

.site-nav { border-top: 1px solid var(--line); }
.site-nav-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px clamp(14px, 2vw, 26px); min-height: 40px; }
.site-nav a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--accent); }
.site-nav-catalog { display: none; }
.site-nav-contacts { display: none; }
.nav-toggle { display: none; }

@media (max-width: 960px) {
  .header-top { display: none; }
  .header-main { flex-wrap: wrap; gap: 10px 12px; padding-block: 10px; }
  .brand { margin-right: auto; }
  .catalog-menu { display: none; }
  .header-search { order: 5; flex-basis: 100%; }
  .header-actions { margin-left: 0; gap: 10px; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
    border: 1px solid var(--line); background: transparent; color: var(--ink);
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
    display: block; width: 14px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -5px; }
  .nav-toggle-bars::after { top: 5px; }
  .nav-open .nav-toggle-bars { background: transparent; }
  .nav-open .nav-toggle-bars::before { transform: translateY(5px) rotate(45deg); }
  .nav-open .nav-toggle-bars::after { transform: translateY(-5px) rotate(-45deg); }
  .site-nav { display: none; }
  .site-header.nav-open .site-nav { display: block; }
  .site-nav-inner { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 12px; }
  .site-nav a { padding: 13px 0; font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--line); }
  .site-nav-catalog, .site-nav-contacts { display: flex; }
  .site-nav-contacts { flex-direction: column; }
}
@media (max-width: 420px) {
  .header-counter { font-size: 11px; letter-spacing: 0; }
  .nav-toggle-label { display: none; }
}

/* ---------- Секции и сетки ---------- */

.section { padding-block: clamp(40px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.section-tight { padding-block: clamp(28px, 4vw, 56px); }
.section-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(20px, 3vw, 48px); margin-bottom: clamp(24px, 4vw, 56px); }
.section-head .eyebrow { padding-top: 6px; }
.section-intro { margin-top: 16px; color: var(--muted); max-width: 36em; }
@media (max-width: 760px) { .section-head { grid-template-columns: 1fr; gap: 12px; } }

.grid-2, .grid-3, .grid-4 { display: grid; gap: clamp(16px, 2vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.stack > * + * { margin-top: 16px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 3vw, 36px); }
.actions-tight { margin-top: 16px; }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; padding: 15px 26px; border: 1px solid transparent; cursor: pointer; background: transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-contrast); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-small { padding: 9px 14px; font-size: 12px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }

/* ---------- Карточки ---------- */

.card { background: var(--bg-raise); border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.card-body { padding: clamp(16px, 2vw, 22px); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { font-family: var(--font-body); font-weight: 700; font-size: 18px; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--accent); }
.card-text { font-size: 15px; color: var(--ink-soft); }
.card-price { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.card-price .price-rub { color: var(--muted); }
.card-price .price-unknown { color: var(--muted); }
.card-status { margin-top: auto; }
.card-link { text-decoration: none; color: inherit; }
.card-link:hover .card-title { color: var(--accent); }

.placeholder-img { background: var(--photo-plate); display: grid; place-items: center; width: 100%; height: 100%; min-height: 120px; color: var(--muted); }
.placeholder-img svg { width: 40%; max-width: 160px; height: auto; fill: currentColor; opacity: .55; }
.ph-shape { display: block; width: 46%; max-width: 200px; aspect-ratio: 8 / 5; background: currentColor; opacity: .55; -webkit-mask: var(--ph) center / contain no-repeat; mask: var(--ph) center / contain no-repeat; }
.ph-humanoid { --ph: url("../img/placeholders/humanoid.svg"); }
.ph-robot-dog { --ph: url("../img/placeholders/robot-dog.svg"); }
.ph-lawn-mower { --ph: url("../img/placeholders/lawn-mower.svg"); }
.ph-pool-robot { --ph: url("../img/placeholders/pool-robot.svg"); }
.ph-home-robot { --ph: url("../img/placeholders/home-robot.svg"); }
.ph-security-robot { --ph: url("../img/placeholders/security-robot.svg"); }
.ph-service-robot { --ph: url("../img/placeholders/service-robot.svg"); }
.ph-desk-arm { --ph: url("../img/placeholders/desk-arm.svg"); }
.ph-exoskeleton { --ph: url("../img/placeholders/exoskeleton.svg"); }
.placeholder-hero { aspect-ratio: 4 / 3; }

/* Карточка фактов */
.facts { background: var(--bg-dim); border: 1px solid var(--line); padding: clamp(16px, 2.5vw, 28px); }
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px 24px; }
.facts dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.facts dt { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.facts dd { margin: 0; }
.fact { padding: 4px 0; }
.fact-value { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.6vw, 30px); font-variant-numeric: tabular-nums; }
.fact-value span { color: var(--accent); }
.fact-label { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--muted); }
@media (max-width: 480px) { .facts dl { grid-template-columns: 1fr; gap: 2px 0; } .facts dd { margin-bottom: 10px; } }

/* ---------- Бейджи ---------- */

.badge {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--line-strong); color: var(--ink); white-space: nowrap; line-height: 1.3;
}
.badge[data-status="available"], .badge[data-status="published"], .badge[data-status="ok"], .badge[data-status="sent"], .badge[data-status="won"] { border-color: var(--ok); color: var(--ok); }
.badge[data-status="check"], .badge[data-status="unknown"], .badge[data-status="risky"], .badge[data-status="contacted"], .badge[data-status="estimate_sent"], .badge[data-status="deposit_ready"] { border-color: var(--warn); color: var(--warn); }
.badge[data-status="not_recommended"], .badge[data-status="no"], .badge[data-status="failed"], .badge[data-status="lost"], .badge[data-status="spam"] { border-color: var(--bad); color: var(--bad); }
.badge[data-status="content_only"], .badge[data-status="draft"], .badge[data-status="skipped"], .badge[data-status="content"] { border-color: var(--neutral); color: var(--neutral); }
.badge[data-status="new"], .badge[data-status="high"] { border-color: var(--data-blue); color: var(--data-blue); }

/* ---------- Формы ---------- */

.form { display: flex; flex-direction: column; gap: 18px; max-width: 640px; }
.form-wide { max-width: none; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-weight: 600; font-size: 15px; }
.field-label .req, .req { color: var(--accent); font-weight: 600; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"],
.field input[type="number"], .field input[type="date"], .field input[type="password"], .field input[type="search"],
.field select, .field textarea {
  width: 100%; padding: 11px 12px; background: var(--bg-raise); color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: var(--radius); font-size: 16px; line-height: 1.4;
}
.field textarea { min-height: 110px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field-help { font-size: 13px; color: var(--muted); }
.field-error { font-size: 13px; color: var(--bad); }
.has-error input, .has-error select, .has-error textarea { border-color: var(--bad); }
.checkbox, .radio { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; }
.checkbox input, .radio input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--accent); }
.radio-list { display: flex; flex-direction: column; gap: 10px; }
fieldset { border: 0; min-width: 0; }
legend { padding: 0; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: 13px; color: var(--muted); }
.form-error { border: 1px solid var(--bad); color: var(--bad); padding: 12px 14px; font-size: 15px; }

.details { border: 1px solid var(--line); }
.details > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.details > summary::-webkit-details-marker { display: none; }
.details > summary::after { content: "+"; font-family: var(--font-mono); color: var(--muted); }
.details[open] > summary::after { content: "−"; }
.details > .details-body { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 16px; }

/* ---------- Таблицы ---------- */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.table tr:hover td { background: var(--bg-dim); }
.table .num { text-align: right; }

/* ---------- Текст из Markdown ---------- */

.prose { max-width: 42em; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.8em; font-size: clamp(20px, 2.6vw, 28px); }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose blockquote { border-left: 2px solid var(--accent); padding-left: 16px; color: var(--ink-soft); }
.prose code { font-family: var(--font-mono); font-size: .9em; background: var(--bg-dim); padding: 1px 5px; }
.prose pre { background: var(--bg-dim); padding: 14px 16px; overflow-x: auto; font-size: 14px; }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.prose img { margin-inline: auto; }
.prose hr { margin: 2em 0; }
.prose .toc { border: 1px solid var(--line); padding: 14px 18px; font-size: 15px; }
.prose .toc ul { list-style: none; padding-left: 0; }
.prose .toc ul ul { padding-left: 1.2em; margin-top: 4px; }
.prose .toc li + li { margin-top: 4px; }
.toc-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

/* ---------- Крошки, пагинация ---------- */

.breadcrumbs { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--muted); padding-block: 14px; }
.breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; }
.breadcrumbs li + li::before { content: "/"; padding-inline: 8px; color: var(--line-strong); opacity: .5; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 32px; font-family: var(--font-mono); font-size: 13px; }
.pagination-link { text-decoration: none; border: 1px solid var(--line-strong); padding: 8px 14px; color: var(--ink); }
.pagination-link:hover { border-color: var(--accent); color: var(--accent); }
.pagination-info { color: var(--muted); }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq .faq-answer { padding: 0 0 18px; color: var(--ink-soft); max-width: 42em; }

/* ---------- Сообщения ---------- */

.flash { padding: 12px 14px; border: 1px solid var(--line-strong); font-size: 15px; }
.flash-error { border-color: var(--bad); color: var(--bad); }
.flash-success { border-color: var(--ok); color: var(--ok); }
.flash-info { border-color: var(--data-blue); color: var(--data-blue); }
.disclaimer { font-size: 14px; color: var(--muted); border-left: 2px solid var(--line-strong); padding-left: 14px; max-width: 42em; }

/* ---------- Страницы ошибок, вход ---------- */

.error-page .actions { margin-top: 28px; }
.login-page { border-bottom: 0; }
.login-box { max-width: 420px; }
.login-box .form { margin-top: 24px; }

/* ---------- Подвал ---------- */

.site-footer { border-top: 1px solid var(--line-strong); margin-top: auto; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: clamp(20px, 3vw, 40px); padding-block: clamp(28px, 4vw, 48px) 24px; }
.footer-brand { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.footer-tagline { margin-top: 8px; color: var(--muted); font-size: 15px; max-width: 28em; }
.footer-legal { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.footer-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.footer-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.footer-list a { color: var(--ink); text-decoration: none; }
.footer-list a:hover { color: var(--accent); }
.footer-muted { color: var(--muted); font-size: 14px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 18px 24px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 20px; } }

/* =====================================================================
   v2: карточки товаров, цены, бейджи, чипы, действия, липкая панель (SPEC-v2 §5.3, §5.6)
   ===================================================================== */

.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(12px, 2vw, 20px); }
@media (max-width: 520px) { .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 359px) { .products-grid { grid-template-columns: 1fr; } }

.product-card .card-body { gap: 8px; padding: 14px; }
/* Фото товара в карточках целиком (SPEC-v3 §3): contain на светлой подложке в обеих темах, поля, 4:3. Подложка —
   общая для карточек сетки, корзины, сравнения и подсказок поиска; обложки блога остаются cover. */
.product-card-media, .cart-line-media, .compare-media, .suggest-media { --media-plate: var(--photo-light); }
.product-card-media { display: block; background: var(--media-plate); aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line); }
.product-card-media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6%; box-sizing: border-box; }
:is(.product-card-media, .cart-line-media, .compare-media, .suggest-media) .placeholder-img { background: transparent; color: #8a9099; min-height: 0; }
.product-card .card-title { font-size: 17px; line-height: 1.3; }
.product-card .eyebrow { font-size: 11px; }
.card-props { display: grid; gap: 2px; font-size: 13px; margin: 0; }
.card-props div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dotted var(--line); padding: 2px 0; }
.card-props dt { color: var(--muted); }
.card-props dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.card-note { font-size: 12px; color: var(--muted); }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.card-actions .btn { flex: 1 1 auto; }

.badges { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.badges { min-width: 0; }
.badges .badge { white-space: normal; max-width: 100%; } /* на 360px длинный статус не шире карточки */
.badge-featured { border-color: var(--accent); color: var(--accent); }
.badge-new { border-color: var(--data-blue); color: var(--data-blue); }
.badge-release { border-color: var(--warn); color: var(--warn); }
.badge[data-status="b2b_check"] { border-color: var(--data-blue); color: var(--data-blue); }
.badge[data-status="not_supplied"] { border-color: var(--neutral); color: var(--neutral); }

.price { display: flex; flex-direction: column; gap: 2px; }
.price-main { font-family: var(--font-mono); font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-confirmed .price-main { font-size: 17px; color: var(--ink); }
.price-estimate .price-main { white-space: normal; }
.price-abroad .price-main, .price-on_request .price-main, .price-unknown .price-main { font-weight: 500; color: var(--ink-soft); white-space: normal; }
.price-note, .price-abroad-line { font-size: 12px; color: var(--muted); line-height: 1.4; }
.price:not(.price-compact) .price-main { font-size: clamp(18px, 2.4vw, 24px); }

.btn-compare {
  border: 1px solid var(--line); background: transparent; padding: 8px 10px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); cursor: pointer;
}
.btn-compare:hover { color: var(--accent); border-color: var(--accent); }
.btn-compare[aria-pressed="true"] { color: var(--data-blue); border-color: var(--data-blue); }
.btn-compare[aria-pressed="true"]::before { content: "✓ "; }
.is-added { outline: 2px solid var(--ok); outline-offset: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); padding: 6px 12px; font-size: 14px;
  color: var(--ink); text-decoration: none; background: transparent; cursor: pointer; line-height: 1.3;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-current="page"], .chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.chip-remove::after { content: "×"; font-size: 16px; line-height: 1; }

.sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bg-raise);
  border-top: 1px solid var(--line-strong); box-shadow: 0 -8px 20px rgba(0, 0, 0, .08);
}
.sticky-bar .price-main { font-size: 15px; }
@media (max-width: 760px) { .sticky-bar { display: flex; } .has-sticky-bar .site-footer { padding-bottom: calc(124px + env(safe-area-inset-bottom)); } }

.empty-state { border: 1px dashed var(--line-strong); padding: clamp(20px, 3vw, 32px); display: grid; gap: 12px; }
.notice { border-left: 3px solid var(--warn); background: var(--bg-dim); padding: 12px 16px; font-size: 15px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; background: var(--ink); color: var(--bg); padding: 10px 16px; font-size: 14px; }
.metrika-pixel { position: absolute; left: -9999px; }

.pagination-pages { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pagination-pages a, .pagination-current { display: inline-block; min-width: 34px; padding: 6px 8px; text-align: center; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.pagination-current { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pagination-gap { color: var(--muted); padding: 0 4px; }

.footer-legal-block { border-top: 1px solid var(--line); padding-block: 16px; display: grid; gap: 6px; max-width: 64em; }
.footer-disclaimer { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* =====================================================================
   2. Главная и информационные страницы (templates/public/*)
   ===================================================================== */

/* ---------- Главная: hero ---------- */

.hero { border-bottom: 1px solid var(--line); }
.hero-title { max-width: 16em; margin-top: 12px; }
.hero .lead { margin-top: 20px; max-width: 46em; }

/* ---------- Плитки групп каталога ---------- */

.home-groups { background: var(--bg-dim); }
.home-groups .section-title { margin-bottom: clamp(16px, 2vw, 24px); }
.group-tiles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(12px, 2vw, 20px); }
.group-tile .card-body { gap: 10px; }
.group-tile-title { font-family: var(--font-display); font-weight: 500; font-size: 19px; line-height: 1.25; }
.group-tile-meta { font-size: 14px; color: var(--muted); }
.group-tile-price { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.group-tile-sections { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.group-tile-sections a { color: var(--ink); }
.group-tile-sections a:hover { color: var(--accent); }
.group-tile-advanced { border-color: var(--line-strong); }
.home-groups-note { margin-top: 16px; max-width: 46em; font-size: 14px; }

/* ---------- Рекомендуем, гуманоиды и роботы-собаки ---------- */

.featured .products-grid, .home-advanced .products-grid { margin-top: clamp(16px, 2vw, 24px); }
.home-advanced { border-top: 1px solid var(--line); }
.home-advanced-chips { margin-top: 16px; }

/* ---------- Цены, шаги, организации, доверие ---------- */

.price-case .card-body { gap: 10px; }
.price-case-value { font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; font-variant-numeric: tabular-nums; }
.price-cases-note { margin-top: 20px; max-width: 42em; }

.steps-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.step { border-top: 2px solid var(--line-strong); padding-top: 16px; }
.step-num { display: block; font-size: 12px; letter-spacing: .14em; color: var(--accent); }
.step-title { margin-top: 10px; font-size: 18px; }
.step-body { margin-top: 10px; font-size: 15px; color: var(--ink-soft); }
@media (max-width: 960px) { .steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps-list { grid-template-columns: 1fr; } }

.section-prose { margin-top: 16px; }
.b2b { background: var(--bg-dim); }
.trust .prose strong { color: var(--ink); }

/* ---------- Блог на главной ---------- */

.post-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(12px, 2vw, 20px); }
.post-item .card-body { gap: 8px; }
.post-item .card-text { font-size: 15px; color: var(--ink-soft); }
.post-date { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: auto; }

/* ---------- Финальный призыв ---------- */

.final-cta { border-bottom: 0; }
.final-cta .disclaimer { margin-bottom: 12px; }
.final-cta .disclaimer + .section-title { margin-top: clamp(16px, 3vw, 28px); }
.final-cta-title { max-width: 22em; }

/* ---------- Информационные страницы ---------- */

.content-page { padding-top: clamp(16px, 3vw, 32px); }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); }
.content-layout.has-toc { grid-template-columns: minmax(0, 7fr) minmax(220px, 3fr); grid-template-areas: "header header" "body toc"; }
.content-layout.has-toc .content-header { grid-area: header; }
.content-layout.has-toc .content-body { grid-area: body; }
.content-layout.has-toc .content-toc { grid-area: toc; align-self: start; position: sticky; top: 76px; }
.content-toc { border: 1px solid var(--line); padding: 14px 18px; font-size: 14px; }
.content-toc ul { list-style: none; padding-left: 0; }
.content-toc ul ul { padding-left: 1em; margin-top: 4px; }
.content-toc li + li { margin-top: 6px; }
.content-toc a { color: var(--ink-soft); text-decoration: none; }
.content-toc a:hover { color: var(--accent); }
@media (max-width: 860px) {
  .content-layout.has-toc { grid-template-columns: 1fr; grid-template-areas: "header" "toc" "body"; }
  .content-layout.has-toc .content-toc { position: static; }
}
.content-header h1 { max-width: 20em; overflow-wrap: anywhere; }
.content-body { min-width: 0; }
.content-body table th:first-child, .content-body table td:first-child { min-width: 9em; }
.content-body .table-wrap, .content-body table { max-width: 100%; }
.content-body .notice, .content-body .note { margin-top: 20px; }

.fill-me { background: var(--warn); color: #fff; font-family: var(--font-mono); font-size: .85em; padding: 1px 6px; }
.contact-list, .prose .contact-list { list-style: none; padding-left: 0; }
.contact-list li + li { margin-top: 6px; }
.contact-list a { overflow-wrap: anywhere; }
.requisites { display: grid; gap: 4px; max-width: 36em; }
.requisites div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; border-bottom: 1px dotted var(--line); padding: 4px 0; }
.requisites dt { color: var(--muted); }
.requisites dd { margin: 0; }
.contacts-callback { margin-top: 12px; }
.content-cta { background: var(--bg-dim); border-bottom: 0; }

/* =====================================================================
   3. Каталог: листинги, подборки, бренды (templates/catalog/*)
   ===================================================================== */

.listing-page { padding-bottom: clamp(32px, 6vw, 72px); }
.listing-head { display: grid; gap: 12px; padding-block: 4px 20px; max-width: 52em; }
.listing-intro { color: var(--ink-soft); max-width: 46em; }
.listing-synonyms { font-size: 14px; color: var(--muted); }
.brand-logo { width: auto; height: 64px; object-fit: contain; }
.brand-facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; color: var(--ink-soft); }
.brand-disclaimer { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 52em; }

/* ---------- полоса категории ---------- */
.category-strip {
  display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: baseline; border-block: 1px solid var(--line);
  padding-block: 12px; margin-bottom: 18px; font-size: 15px;
}
.strip-item { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; min-width: 0; }
.strip-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.strip-value { color: var(--ink); }
.strip-note { font-size: 13px; color: var(--muted); }
.strip-link { margin-left: auto; }

/* ---------- чипы навигации ---------- */
.listing-nav { margin-bottom: 14px; }
.listing-nav-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.listing-nav .chip[aria-current="page"] .chip-count, .chip.is-active .chip-count { color: inherit; opacity: .75; }

/* ---------- панель ---------- */
/* Одна строка постоянной высоты (SPEC-v3 §2): выбранные фильтры — лента с прокруткой между счётчиком и
   сортировкой, их появление не сдвигает сетку. */
.listing-toolbar {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 10px 16px; padding-block: 12px; min-height: 62px;
  border-top: 2px solid var(--ink); margin-top: 8px;
}
.listing-count { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); flex: none; white-space: nowrap; min-width: 9ch; }
.listing-active {
  flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-block: 2px;
}
.listing-active > li { flex: none; }
/* на десктопе высота строки постоянна, даже когда у ленты чипов появляется полоса прокрутки */
@media (min-width: 961px) {
  .listing-toolbar { height: 62px; padding-block: 8px; }
  .listing-active { align-self: stretch; align-items: center; overflow-y: hidden; padding-block: 0; }
}
.listing-active .chip { white-space: nowrap; }
.listing-sort { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.listing-sort-label { color: var(--muted); }
.listing-sort select {
  border: 1px solid var(--line-strong); background: var(--bg-raise); padding: 7px 10px; font-size: 14px; max-width: 220px;
}
.listing-filters-toggle { display: none; }
.rs-listing-js .nojs-only { display: none; }

/* ---------- фильтры + сетка ---------- */
.listing-body { display: block; }
.listing-body.has-filters { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(16px, 2.5vw, 32px); align-items: start; }
.listing-results { min-width: 0; display: grid; gap: 18px; align-content: start; }
.listing-filters { display: grid; gap: 4px; font-size: 15px; }
.filters-head { display: none; }
.filters-title { font-weight: 700; }
.filters-close { border: 1px solid var(--line-strong); background: transparent; padding: 6px 12px; font-size: 14px; cursor: pointer; }

.facet { border: 0; border-top: 1px solid var(--line); padding: 12px 0 10px; margin: 0; min-width: 0; display: grid; gap: 8px; position: relative; }
.facet-title { font-weight: 700; font-size: 15px; padding: 0 76px 0 0; float: left; width: 100%; }
/* «Сбросить» — в строке заголовка: появляется без сдвига вариантов ниже */
.facet-reset { position: absolute; top: 13px; right: 0; font-size: 13px; }
.facet-note.is-empty, .facet-any.is-empty { visibility: hidden; }
.facet-sub { padding-left: 24px; }
.facet-tree .facet-options > li:not(.facet-sub) .facet-option-label { font-weight: 600; }
.facet-title + * { clear: both; }
.facet-hint, .facet-note { font-size: 13px; color: var(--muted); line-height: 1.4; }
.facet-inputs { display: flex; gap: 8px; }
.facet-input { display: grid; gap: 2px; flex: 1 1 0; min-width: 0; }
.facet-input-label { font-size: 12px; color: var(--muted); }
.facet-input input {
  width: 100%; border: 1px solid var(--line-strong); background: var(--bg-raise); padding: 7px 9px; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.facet-input input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.facet-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.facet-preset { padding: 4px 10px; font-size: 13px; }
.facet-options { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.facet-option { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 0; line-height: 1.35; }
.facet-option input { width: 16px; height: 16px; flex: none; accent-color: var(--accent); }
.facet-option-label { flex: 1 1 auto; min-width: 0; }
.facet-option.is-disabled { color: var(--muted); cursor: default; }
.facet-option.is-disabled .chip-count { opacity: .6; }
.facets-more { border-top: 1px solid var(--line); }
.facets-more > summary { cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; }
.facets-more > summary::-webkit-details-marker { display: none; }
.facets-more > summary::after { content: " +"; font-family: var(--font-mono); color: var(--muted); }
.facets-more[open] > summary::after { content: " −"; }
.filters-actions { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.filters-reset { font-size: 14px; justify-self: start; }
/* На десктопе с JS фильтры применяются сами — кнопка «Показать» не нужна. */
@media (min-width: 961px) { .rs-listing-js .filters-apply { display: none; } }

.listing-hidden-price { font-size: 15px; color: var(--ink-soft); }
.listing-empty .empty-title { font-weight: 700; font-size: 19px; }
.listing-empty .chip-count { margin-left: 4px; }

/* ---------- блоки страницы 1 ---------- */
.listing-section { margin-top: clamp(28px, 5vw, 56px); display: grid; gap: 14px; }
.listing-seo { max-width: 46em; }
.listing-articles { list-style: none; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.listing-articles li { border-top: 1px solid var(--line); padding-top: 10px; }
.listing-article-title { font-weight: 600; }
.listing-article-lead { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* ---------- /catalog/: строка разделов над сеткой, облака подборок ---------- */
.catalog-sections { margin-bottom: 18px; border-block: 1px solid var(--line); padding-block: 12px; }
.catalog-sections-groups { list-style: none; padding: 0; display: grid; gap: 12px 24px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.catalog-sections-group { display: grid; gap: 4px; align-content: start; scroll-margin-top: 16px; min-width: 0; }
.catalog-sections-name { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.catalog-sections-list { list-style: none; padding: 0; display: grid; gap: 4px; font-size: 14px; line-height: 1.35; }
.catalog-sections a { text-decoration: none; }
.catalog-sections a:hover { text-decoration: underline; }
.catalog-sections-link { font-weight: 600; }
.catalog-sections-sub { list-style: none; padding: 2px 0 0; display: flex; flex-wrap: wrap; gap: 0 10px; font-size: 13px; }
@media (max-width: 640px) {
  /* на телефоне строка разделов короче: только разделы в две колонки, подкатегории — в фильтре и на страницах разделов */
  .catalog-sections-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .catalog-sections-sub { display: none; }
}
.listing-cloud-more { margin-top: 8px; }
.listing-cloud-more > summary { cursor: pointer; font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
.brand-tiles { list-style: none; padding: 0; display: grid; gap: clamp(10px, 2vw, 18px); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.brand-tile { background: var(--bg-raise); border: 1px solid var(--line); padding: 16px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.brand-tile-title { font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--ink); text-decoration: none; }
.brand-tile-title:hover { color: var(--accent); }
.brand-tile-meta { font-size: 14px; color: var(--muted); }
.brand-tile-ru { font-size: 14px; color: var(--ink-soft); }

/* ---------- мобильная панель ---------- */
@media (max-width: 960px) {
  .listing-body.has-filters { grid-template-columns: 1fr; }
  .rs-listing-js .listing-filters-toggle { display: inline-flex; }
  /* на мобильном фильтры применяются переходом по кнопке — тулбар может переноситься, лента чипов — второй строкой */
  .listing-toolbar { flex-wrap: wrap; min-height: 0; }
  .listing-count { margin-right: auto; }
  .listing-active { order: 5; flex-basis: 100%; }
  .listing-active.is-empty { display: none; }
  .strip-link { margin-left: 0; }
  /* Без JS панель стоит над сеткой; с JS — выезжает снизу по кнопке «Фильтры (N)». */
  .rs-listing-js .listing-filters { display: none; }
  .rs-listing-js .listing-filters.is-open {
    display: grid; align-content: start; position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--bg);
    padding: 0 16px 96px;
  }
  .rs-listing-js .listing-filters.is-open .filters-head {
    display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1;
    background: var(--bg); padding: 12px 0; border-bottom: 1px solid var(--line);
  }
  .rs-listing-js .listing-filters.is-open .filters-actions {
    position: fixed; left: 0; right: 0; bottom: 0; background: var(--bg-raise); border-top: 1px solid var(--line-strong);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); grid-template-columns: 1fr auto; align-items: center;
  }
  body.filters-open { overflow: hidden; }
  .listing-sort select { max-width: 180px; }
}
@media (max-width: 420px) {
  .listing-toolbar { gap: 8px 10px; }
  .listing-sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .category-strip { flex-direction: column; gap: 6px; }
}
/* Загрузка выдачи (SPEC-v3 §2): сетка держит высоту (min-height ставит listing.js), полупрозрачна, сверху — полоса. */
.listing-results { position: relative; }
.listing.is-loading .listing-results { opacity: .55; transition: opacity .15s; }
.listing.is-loading .listing-results::before {
  content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 40%; background: var(--accent);
  animation: rs-listing-loading 1s linear infinite;
}
@keyframes rs-listing-loading { from { left: -40%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .listing.is-loading .listing-results::before { animation: none; width: 100%; } }

/* =====================================================================
   4. Страница товара (templates/product/*)
   ===================================================================== */

.page-product { --product-photo-bg: var(--photo-light); } /* светлая подложка фото в обеих темах (SPEC-v3 §3) */
.page-product .breadcrumbs { padding-bottom: 6px; }

.product-top { padding-bottom: clamp(24px, 4vw, 48px); }
.product-head { display: grid; gap: 10px; margin-bottom: clamp(16px, 2.5vw, 28px); }
.product-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.6vw, 40px); line-height: 1.15; max-width: 24em; }
.product-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.product-rating { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
.product-brand-link { font-size: 14px; color: var(--ink-soft); }

.product-main { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
@media (max-width: 860px) { .product-main { grid-template-columns: minmax(0, 1fr); } }

.product-h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.2; margin-bottom: 16px; }

/* ---------- Галерея ---------- */

.product-gallery { display: grid; gap: 10px; min-width: 0; }
.gallery-main { margin: 0; background: var(--product-photo-bg); aspect-ratio: 4 / 3; padding: clamp(8px, 2vw, 20px); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-credit { position: absolute; right: 0; bottom: 0; padding: 3px 8px; font-size: 11px; color: var(--muted); background: var(--bg-raise); }
.gallery-credit a { color: inherit; }
.gallery-thumbs { list-style: none; padding: 0; display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gallery-thumb { display: block; width: 96px; height: 72px; padding: 4px; border: 1px solid var(--line); background: var(--product-photo-bg); flex: none; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumb.is-active, .gallery-thumb:hover { border-color: var(--line-strong); }
.placeholder-product { aspect-ratio: 4 / 3; width: 100%; }

/* ---------- Блок покупки ---------- */

.buy { display: grid; gap: 16px; padding: clamp(16px, 2.5vw, 24px); background: var(--bg-raise); border: 1px solid var(--line); min-width: 0; }
.buy-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.buy fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.variant-options { display: grid; gap: 6px; }
.variant-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 10px 12px; border: 1px solid var(--line); cursor: pointer; }
.variant-option:hover { border-color: var(--line-strong); }
.variant-option:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.variant-option input { margin: 0; accent-color: var(--accent); }
.variant-name { font-weight: 600; }
.variant-price { grid-column: 2; font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
.variant-table caption { text-align: left; }
.variant-table .table td, .variant-table .table th { padding: 8px 10px; font-size: 14px; }
.variant-table tr.is-selected td { background: var(--bg-dim); }

.price-lines { display: grid; gap: 12px; }
.price-line { display: grid; gap: 3px; }
.price-line + .price-line { border-top: 1px dotted var(--line); padding-top: 12px; }
.price-line-main { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.price-line-main.price-estimate { font-size: clamp(19px, 2.4vw, 24px); font-weight: 600; color: var(--ink); }
.price-line-main.price-full { font-size: 17px; font-weight: 600; color: var(--ink); }
.price-parts { margin-top: 8px; font-size: 14px; }
.price-parts > summary { padding: 8px 12px; font-weight: 500; }
.price-parts-list { display: grid; gap: 8px; margin: 0; }
.price-parts-list dt { font-weight: 600; }
.price-parts-list dd { margin: 0; color: var(--ink-soft); }

.buy-facts { display: grid; gap: 6px; margin: 0; font-size: 14px; }
.buy-facts > div { display: grid; grid-template-columns: minmax(110px, 2fr) minmax(0, 5fr); gap: 10px; }
.buy-facts dt { color: var(--muted); }
.buy-facts dd { margin: 0; }
@media (max-width: 420px) { .buy-facts > div { grid-template-columns: 1fr; gap: 0; } }

.buy-notice { font-size: 14px; }
.buy-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.buy-actions .btn { flex: 1 1 auto; text-align: center; }
.buy-actions .btn-compare { flex: 0 0 auto; }

.buy-steps { padding-left: 1.3em; display: grid; gap: 4px; font-size: 14px; color: var(--ink-soft); }
.buy-offer, .buy-disclaimer { font-size: 12px; color: var(--muted); line-height: 1.45; }
.buy-offer { font-weight: 600; color: var(--ink-soft); }

.share { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 13px; }
.share .buy-label { margin: 0; }
.share-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.share-list a { color: var(--ink-soft); }
.share-list a:hover { color: var(--accent); }

/* ---------- Ключевые характеристики ---------- */

.key-specs { margin-top: clamp(24px, 4vw, 40px); }
.key-specs-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 0; }
.key-specs-list div { background: var(--bg-raise); padding: 12px 14px; display: grid; gap: 4px; }
.key-specs-list dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.key-specs-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.link-more { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 13px; }

/* ---------- Липкая навигация ---------- */

.product-nav { position: sticky; top: 0; z-index: 30; background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.product-nav-list { list-style: none; padding: 0; display: flex; gap: 0 22px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; }
.product-nav-list::-webkit-scrollbar { display: none; }
.product-nav-list a { display: inline-block; padding: 12px 0; font-size: 14px; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; }
.product-nav-list a:hover, .product-nav-list a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- Разделы ---------- */

.product-body { display: grid; }
.product-section { padding-block: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); scroll-margin-top: 190px; min-width: 0; }
.product-section h3 { font-size: 18px; margin: 20px 0 8px; }
.product-section > p + p, .product-cols p + p { margin-top: 8px; }
.product-lead { font-size: 18px; }
.product-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.product-cols h3 { margin-top: 0; }
@media (max-width: 760px) { .product-cols { grid-template-columns: minmax(0, 1fr); } }
.product-risks > * + * { margin-top: .8em; }

.spec-table th[scope="row"] { font-family: var(--font-body); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ink-soft); font-weight: 400; width: 40%; }
.spec-table td { font-variant-numeric: tabular-nums; }
.spec-table .spec-group th { padding-top: 22px; color: var(--ink); font-weight: 600; background: transparent; }
.spec-table tr.spec-group:hover th { background: transparent; }
.spec-hint { display: block; font-size: 12px; color: var(--muted); }
.spec-sub { display: block; margin-top: 4px; font-size: 14px; }

/* Значения-ссылки (SPEC-v3 §4): подборка или фильтр, значок фильтра рядом */
.value-link { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.value-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.value-link-icon { display: inline-block; width: .75em; height: .75em; margin-left: .3em; vertical-align: -.02em; color: var(--muted); }
.value-link:hover .value-link-icon { color: currentColor; }
.product-description-after { margin-top: clamp(24px, 3vw, 36px); }
.spec-note { margin-top: 12px; font-size: 13px; color: var(--muted); }

.doc-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.doc-meta { display: block; font-size: 13px; color: var(--muted); }

.video-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.video-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--bg); text-decoration: none; }
.video-play img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-play-label { position: relative; padding: 10px 16px; background: var(--accent); color: var(--accent-contrast); font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.video-play:hover .video-play-label { background: var(--accent-hover); }
.video-meta { margin-top: 6px; font-size: 13px; color: var(--muted); }

.product-ask { margin-top: 16px; }
.reviews-summary { font-family: var(--font-mono); font-size: 14px; margin-bottom: 12px; }
.review-list { list-style: none; padding: 0; display: grid; gap: 16px; }
.review { border: 1px solid var(--line); padding: 14px 16px; display: grid; gap: 6px; font-size: 15px; }
.review-head { font-size: 14px; color: var(--ink-soft); }
.review-reply { border-left: 2px solid var(--line-strong); padding-left: 12px; color: var(--ink-soft); }

/* ---------- Связанные блоки, источник ---------- */

.product-related { padding-block: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.product-related .chips { list-style: none; padding: 0; }
.product-more-links { list-style: none; padding: 0; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: var(--font-mono); font-size: 13px; }
.article-links { list-style: none; padding: 0; display: grid; gap: 14px; max-width: 46em; }
.article-links a { font-weight: 600; }
.article-links p { font-size: 14px; color: var(--muted); margin-top: 2px; }
.product-source { padding-block: 24px clamp(32px, 5vw, 56px); display: grid; gap: 10px; font-size: 14px; color: var(--ink-soft); }

/* ---------- Рич-контент описания (SPEC-v3 §5, templates/product/_rich.html) ---------- */

.rich { display: grid; gap: clamp(20px, 3vw, 32px); max-width: 960px; }
.rich > * { min-width: 0; }
.product-section .rich-h { font-family: var(--font-display); font-weight: 500; line-height: 1.2; margin: 8px 0 0; }
.rich-h2 { font-size: clamp(20px, 2.4vw, 26px); }
.product-section .rich-h3 { font-size: 18px; }
.rich-callout { max-width: 42em; padding: 14px 18px; border-left: 3px solid var(--data-blue); background: var(--bg-raise); }
.rich-callout-note { border-left-color: var(--warn); }
.rich figure { margin: 0; }
.rich figure img { width: 100%; height: auto; }
.rich-image img, .rich-image-text-media img { background: var(--product-photo-bg); }
.rich figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.rich-credit { font-size: 12px; color: var(--muted); }
.rich-credit a { color: inherit; }
.rich-image-text { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(16px, 3vw, 36px); align-items: center; }
.rich-side-left { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.rich-side-right .rich-image-text-media { order: 2; }
.rich-image-text-body > * + * { margin-top: .8em; }
.product-section .rich-image-text-body .rich-h3 { margin-top: 0; }
@media (max-width: 720px) {
  .rich-image-text, .rich-side-left { grid-template-columns: minmax(0, 1fr); }
  .rich-side-right .rich-image-text-media { order: 0; }
}
.rich-gallery-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
@media (max-width: 520px) { .rich-gallery-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
.rich-gallery-item { display: grid; gap: 4px; align-content: start; }
.rich-gallery-item img { aspect-ratio: 4 / 3; object-fit: contain; padding: 6px; background: var(--product-photo-bg); }
.rich-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
.rich-stats[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.rich-stats[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rich-stats[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 900px) { .rich-stats[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 720px) { .rich-stats[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rich-stats, .rich-stats[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rich-stats[data-count="1"] { grid-template-columns: minmax(0, 1fr); } .rich-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.rich-stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: var(--bg-raise); }
.rich-stat-value { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; font-variant-numeric: tabular-nums; }
.rich-stat-label { margin: 0; font-size: 14px; color: var(--ink-soft); }
.rich-features { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.rich-feature { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border: 1px solid var(--line); border-top: 2px solid var(--accent); background: var(--bg-raise); }
.product-section .rich-feature-title { margin: 0; font-size: 16px; }
.rich-feature .prose { font-size: 15px; color: var(--ink-soft); }
.rich-table caption { caption-side: top; padding-bottom: 8px; text-align: left; font-weight: 600; }
.rich-table th, .rich-table td { min-width: 8em; } /* узкий экран — прокрутка таблицы, а не столбики по слову */
.rich-table:focus-visible, .rich-specs:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rich-video, .rich-specs, .rich-turn { max-width: 720px; }
.rich-turn-stage { background: var(--product-photo-bg); touch-action: pan-y; cursor: grab; }
.rich-turn-stage.is-dragging { cursor: grabbing; }
.rich-turn-canvas { display: block; width: 100%; height: auto; }
.rich-turn-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.rich-turn-hint { margin: 0; flex: 1 1 12em; font-size: 14px; color: var(--ink-soft); }
.rich-turn figcaption { margin-top: 8px; }

/* ---------- Липкая панель (мобильный) ---------- */

.product-sticky-price { flex: 1 1 auto; min-width: 7em; }
.product-sticky-name { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-sticky .price-main { font-size: 14px; white-space: normal; }
.product-sticky-action { flex: 0 1 auto; min-width: 0; max-width: 60%; }
.product-sticky-action .btn { white-space: normal; text-align: center; line-height: 1.25; }

/* =====================================================================
   5. Магазин: заявки, корзина, сравнение, поиск (templates/leads/*, shop/*, search/*)
   ===================================================================== */

/* ---------- Формы заявок (бывший хвост v1 site.css) ---------- */

.lead-layout {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(28px, 5vw, 72px); align-items: start;
}
@media (max-width: 860px) { .lead-layout { grid-template-columns: 1fr; } }

.lead-main .section-title { margin-bottom: 12px; }
.lead-main .lead { margin-bottom: 24px; max-width: 42em; }
.lead-form { margin-top: 8px; }
.lead-form > .field-help { margin-top: -10px; }

.lead-robot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 14px; align-items: baseline;
  padding: 10px 14px; border: 1px solid var(--line); font-size: 15px; margin-bottom: 20px;
}
.lead-robot-clear { font-size: 13px; color: var(--muted); }

.lead-aside { border-top: 2px solid var(--ink); padding-top: 16px; font-size: 15px; }
.lead-aside h2 { font-size: 16px; margin-bottom: 12px; }
.lead-aside .note { margin-top: 14px; }
@media (min-width: 861px) { .lead-aside { position: sticky; top: 24px; } }

.lead-steps, .thanks-steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 12px; }
.lead-steps li, .thanks-steps li { position: relative; padding-left: 36px; counter-increment: step; }
.lead-steps li::before, .thanks-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0; width: 24px; height: 24px;
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--line-strong); border-radius: 50%;
}

.lead-thanks .display { margin-bottom: 12px; }
.lead-thanks .lead { max-width: 42em; }
.lead-thanks .section-title { font-size: 20px; margin-top: 32px; margin-bottom: 14px; }
.thanks-steps { max-width: 42em; }
.lead-thanks .disclaimer { margin-top: 24px; }
.thanks-number { font-family: var(--font-mono); font-size: 15px; margin-bottom: 16px; }
.thanks-items { list-style: none; padding: 0; margin: 0 0 20px; border-top: 1px solid var(--line); max-width: 42em; }
.thanks-items li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }

/* ---------- Корзина ---------- */

.cart-notice { margin: 12px 0 20px; max-width: 52em; }
.cart-dropped ul { margin: 6px 0 0; padding-left: 1.2em; }
.cart-dropped li + li { margin-top: 4px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 760px; }
.cart-lines { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line-strong); }
.cart-line {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 12px 16px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.cart-line-media { display: block; width: 96px; aspect-ratio: 4 / 3; background: var(--media-plate); overflow: hidden; }
.cart-line-media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; }
.cart-line-media .placeholder-img, .compare-media .placeholder-img { width: 100%; height: 100%; }
.cart-line-body { display: grid; gap: 4px; min-width: 0; }
.cart-line-body .eyebrow { font-size: 11px; }
.cart-line-title { font-weight: 600; }
.cart-line-title a { color: var(--ink); text-decoration: none; }
.cart-line-title a:hover { color: var(--accent); }
.cart-line-qty { display: grid; gap: 2px; font-size: 12px; color: var(--muted); }
.cart-line-qty input { width: 72px; padding: 6px 8px; font: inherit; font-size: 15px; color: var(--ink); background: var(--bg-raise); border: 1px solid var(--line-strong); }
.cart-line-remove { font-size: 13px; color: var(--muted); }
.cart-line-remove:hover { color: var(--accent); }
@media (max-width: 560px) {
  .cart-line { grid-template-columns: 72px minmax(0, 1fr); }
  .cart-line-media { width: 72px; }
  .cart-line-qty, .cart-line-remove { grid-column: 2; }
  .cart-line-qty { display: flex; align-items: center; gap: 8px; }
}
.cart-total { margin-top: 14px; font-size: 15px; }
.cart-empty { margin-bottom: 24px; }
.cart-form-title { font-size: 20px; margin: clamp(24px, 4vw, 40px) 0 14px; }
.cart-org { border: 1px solid var(--line); padding: 14px 16px 4px; margin: 6px 0 16px; }
.cart-org > legend { padding: 0 6px; }
.field-checks { display: flex; flex-wrap: wrap; gap: 6px 18px; border: 0; padding: 0; }
.field-checks > legend { width: 100%; margin-bottom: 4px; }
.cart-aside { font-size: 14px; }
[hidden] { display: none !important; }

/* ---------- Сравнение ---------- */

.compare-tabs { margin: 8px 0 16px; }
.compare-switch { font-size: 14px; margin-bottom: 12px; }
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { min-width: 560px; table-layout: fixed; }
.compare-table th[scope="row"] { width: 180px; font-weight: 500; color: var(--muted); text-align: left; vertical-align: top; }
.compare-table td { vertical-align: top; font-variant-numeric: tabular-nums; }
.compare-corner { width: 180px; }
.compare-head { vertical-align: top; text-align: left; }
.compare-head > * { display: block; }
.compare-media { width: 100%; max-width: 180px; aspect-ratio: 4 / 3; background: var(--media-plate); overflow: hidden; margin-bottom: 8px; }
.compare-media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.compare-head .eyebrow { font-size: 11px; }
.compare-title { font-weight: 600; color: var(--ink); text-decoration: none; margin: 2px 0; }
.compare-title:hover { color: var(--accent); }
.compare-remove { margin-top: 6px; font-size: 12px; font-weight: 400; color: var(--muted); }
.compare-group th { background: var(--bg-dim); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.compare-table tr.is-same td { color: var(--muted); }
@media (max-width: 560px) { .compare-table th[scope="row"], .compare-corner { width: 120px; } }

/* ---------- Поиск ---------- */

.search-form { display: flex; gap: 8px; margin: 12px 0 20px; max-width: 640px; }
.search-form input[type="search"] { flex: 1 1 auto; min-width: 0; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--bg-raise); border: 1px solid var(--line-strong); }
.search-corrected { margin-bottom: 16px; }
.search-groups { display: grid; gap: 16px; margin-bottom: 24px; }
.search-group-title { font-size: 16px; margin: 20px 0 10px; }
.search-articles { list-style: none; padding: 0; display: grid; gap: 12px; }

/* Подсказки поиска в шапке (search.js, на всех страницах) */
.suggest-item, .suggest-all { display: flex; gap: 10px; align-items: center; padding: 8px 12px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.suggest-item:hover, .suggest-item.is-active, .suggest-all:hover, .suggest-all.is-active { background: var(--bg-dim); color: var(--ink); }
.suggest-media { flex: 0 0 48px; width: 48px; height: 36px; background: var(--media-plate); overflow: hidden; }
.suggest-media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 2px; box-sizing: border-box; }
.suggest-text { display: grid; gap: 1px; min-width: 0; }
.suggest-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-meta, .suggest-price { font-size: 12px; color: var(--muted); }
.suggest-price { font-family: var(--font-mono); }
.suggest-all { font-size: 13px; color: var(--accent); border-bottom: 0; }
.compare-table .compare-head { font-family: var(--font-body); font-size: 15px; letter-spacing: normal; text-transform: none; color: var(--ink); }
.compare-table .compare-head .eyebrow { font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* =====================================================================
   6. Блог (templates/blog/*)
   ===================================================================== */

/* ---------- Список и рубрики ---------- */

.blog-head { display: grid; gap: 14px; margin-bottom: clamp(20px, 3vw, 32px); }
.blog-head h1 { max-width: 20em; }
.blog-intro { max-width: 42em; color: var(--ink-soft); }
.blog-rubrics { margin-bottom: 14px; }
.blog-tags { margin-bottom: clamp(20px, 3vw, 32px); }
.blog-nav-title { margin: 0 0 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.blog-tag { text-transform: none; }

.blog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 960px; }
.blog-featured { margin-bottom: clamp(20px, 3vw, 32px); }

.blog-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--photo-plate); }
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-title { font-family: var(--font-body); font-weight: 700; font-size: 19px; line-height: 1.3; }
.blog-card .card-text { margin: 0; }
.blog-card .blog-meta { margin-top: auto; padding-top: 4px; }
.blog-card:not(.blog-card-featured) { display: grid; grid-template-columns: minmax(0, 1fr) clamp(150px, 21vw, 210px); min-height: 176px; }
.blog-card:not(.blog-card-featured) .card-body { grid-column: 1; grid-row: 1; padding: 18px 20px; }
.blog-card:not(.blog-card-featured) .blog-card-media { grid-column: 2; grid-row: 1; margin: 14px; aspect-ratio: 4 / 3; border-radius: var(--radius); }
.blog-card-no-media:not(.blog-card-featured) { grid-template-columns: minmax(0, 1fr); }
.blog-card-tags { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.blog-card-tags a { display: inline-flex; padding: 3px 7px; border-radius: 4px; background: var(--bg-dim); color: var(--muted); font-family: var(--font-mono); font-size: 10px; line-height: 1.3; text-decoration: none; }
.blog-card-tags a:hover { color: var(--accent); }

.blog-card-featured { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.blog-card-featured .blog-card-media { aspect-ratio: auto; min-height: 100%; }
.blog-card-featured .blog-card-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.8vw, 30px); }
.blog-card-featured .card-body { justify-content: center; gap: 12px; }
@media (max-width: 760px) {
  .blog-card-featured { grid-template-columns: 1fr; }
  .blog-card-featured .blog-card-media { aspect-ratio: 16 / 9; }
}

.blog-rss { margin-top: 28px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; }
.blog-rss a { color: var(--muted); }

/* ---------- Мета статьи ---------- */

.blog-meta { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 0; }
.blog-meta-item + .blog-meta-item::before { content: "·"; padding-inline: 8px; }
.blog-meta a { color: var(--ink-soft); }

/* ---------- Статья ---------- */

.blog-article { padding-top: clamp(12px, 2vw, 24px); }
.blog-article-header { display: grid; gap: 14px; }
.blog-article-header .eyebrow a { color: inherit; text-decoration: none; }
.blog-article-header .eyebrow a:hover { color: var(--accent); }
.blog-article-header .lead { max-width: 40em; }
.blog-cover { margin: 8px 0 0; max-width: 960px; }
.blog-cover img { width: 100%; height: auto; display: block; background: var(--photo-plate); }
.blog-cover-link { position: relative; display: block; color: inherit; }
.blog-cover-zoom { position: absolute; right: 12px; bottom: 12px; padding: 7px 10px; border-radius: 4px; background: rgba(12, 15, 18, .78); color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; opacity: 0; transform: translateY(3px); transition: opacity .15s ease, transform .15s ease; }
.blog-cover-link:hover .blog-cover-zoom, .blog-cover-link:focus-visible .blog-cover-zoom { opacity: 1; transform: none; }
.blog-cover figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.blog-cover-credit { margin-left: auto; }
.blog-cover-credit a { color: inherit; }
.blog-lightbox { width: min(96vw, 1500px); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: var(--radius); overflow: visible; background: transparent; }
.blog-lightbox::backdrop { background: rgba(5, 7, 9, .88); }
.blog-lightbox img { display: block; max-width: 96vw; max-height: 92vh; width: auto; height: auto; margin: auto; object-fit: contain; border-radius: var(--radius); }
.blog-lightbox-close { position: absolute; z-index: 1; top: -14px; right: -14px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: #171a1e; color: #fff; font-size: 25px; line-height: 1; cursor: pointer; }

.blog-body { min-width: 0; }
.blog-body .prose { max-width: 44em; }
.blog-body .prose img { max-width: 100%; height: auto; }
.blog-body .prose h2 { scroll-margin-top: 80px; }

.blog-topics, .blog-sources, .blog-share { margin-top: clamp(28px, 4vw, 44px); padding-top: 18px; border-top: 1px solid var(--line); max-width: 44em; }
.blog-topics-title, .blog-share-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.blog-block-title { font-size: clamp(18px, 2.2vw, 22px); margin-bottom: 10px; }
.blog-sources .prose { font-size: 15px; color: var(--ink-soft); overflow-wrap: anywhere; }
.blog-share-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }

.blog-products .section-intro { margin-bottom: clamp(18px, 3vw, 28px); }
.blog-related { background: var(--bg-dim); }

@media (max-width: 520px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card:not(.blog-card-featured) { grid-template-columns: minmax(0, 1fr) 106px; min-height: 138px; }
  .blog-card:not(.blog-card-featured) .card-body { padding: 13px 14px; }
  .blog-card:not(.blog-card-featured) .blog-card-media { margin: 10px; }
  .blog-card:not(.blog-card-featured) .card-text { display: none; }
  .blog-card:not(.blog-card-featured) .blog-card-title { font-size: 16px; }
  .blog-card-tags li:nth-child(n+3) { display: none; }
  .blog-cover-zoom { opacity: 1; transform: none; }
  .blog-lightbox-close { top: 6px; right: 6px; }
  .blog-share-list .btn { padding-inline: 12px; }
}

/* ---------- Подписка на новости ---------- */

.newsletter-band { background: var(--bg-dim); border-top: 1px solid var(--line); }
.newsletter-band-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: clamp(16px, 3vw, 36px); align-items: center; padding-block: clamp(22px, 3vw, 36px); }
.newsletter-title { font-size: clamp(20px, 2.4vw, 28px); margin: 0 0 8px; }
.newsletter-copy p { margin: 0; color: var(--ink-soft); max-width: 40em; }
.newsletter-fields { display: flex; gap: 8px; align-items: stretch; }
.newsletter-fields .field { flex: 1 1 auto; }
.newsletter-fields .btn { flex: none; }
.newsletter-consent { margin-top: 10px; }
.newsletter-action { margin-top: 8px; }
.newsletter-card { display: grid; gap: 14px; margin: 0 0 clamp(22px, 3vw, 32px); padding: clamp(16px, 2.4vw, 22px); background: var(--bg-raise); border: 1px solid var(--line-strong); }
.blog-body .newsletter-card { margin-top: clamp(28px, 4vw, 44px); max-width: 44em; }
.page-newsletter .lead { max-width: 40em; }
@media (max-width: 720px) {
  .newsletter-band-inner { grid-template-columns: 1fr; }
  .newsletter-fields { flex-direction: column; }
  .newsletter-fields .btn { width: 100%; }
}