/* ==========================================================================
   AROLT v2 · L1 HOME · assets/v2/home.css
   Владелец: полоса L1 HOME (docs/DESIGN-V2.md, раздел 12; кто чем владеет - 9.4).
   Что здесь: главная: первый экран, «Что нужно подобрать?», категории, решения, подборки, популярные позиции (сетка; карточка - фундамент), доверие, частным покупателям, качество, SEO-блок.
   Правила:
   - каждый селектор начинается с id своего вида: #view-home-d;
   - токены, компоненты и утилиты - из assets/v2/foundation.css (--brand, --r, --shadow,
     .v2-card, .v2-band, .v2-lead-band, .v2-hero, .v2-pagehead, .v2-dot, .v2-pill, .v2-seg …),
     значения не дублировать числами;
   - файл подключён после foundation.css, поэтому при равной силе (1,1,0) побеждает он;
   - !important - только против !important первой версии (раздел 9.2);
   - нужна правка общего или чужого - запрос в …/v2/<полоса>/REQUESTS.md, а не правка здесь.
   ========================================================================== */

/* ==========================================================================
   0. Вид и ритм секций (раздел 8)
   Первая версия чередовала белые и серые полосы с линиями и своими отступами;
   во второй страница - сплошной холст, секции отделяет только --block.
   ========================================================================== */
/* (1,2,1) первой версии: body.is-home-d-view #view-home-d { padding-top: 0 } */
#v2 #view-home-d.view { padding: 0; }
#view-home-d .hd-wrap { padding: 0; }

#view-home-d :is(.hd-audience-sec, .hd-cats-sec, .bp-tiles-sec, .hd-shop-sec,
  .hd-easy-sec, .hd-deep-sec, .hd-lead-sec, .hd-seo-sec) {
  margin-top: var(--block); padding: 0;
  border: 0; background: none; color: var(--ink);
}

/* Появление при прокрутке: мягче и короче, чем в первой версии */
#view-home-d .hd-reveal {
  transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
#view-home-d .hd-reveal.is-in { opacity: 1; transform: none; }

/* Надзаголовки секций (5.9) */
#view-home-d :is(.hd-audience-eyebrow, .hd-cats-eyebrow, .hd-routes__eyebrow, .bp-tiles-eyebrow,
  .hd-trust__eyebrow, .hd-deep__eyebrow) {
  display: block; width: fit-content;
  margin: 0 0 12px; padding: 0;
  border: 0; border-radius: 0; background: none;
  color: var(--brand); font-size: 15px; font-weight: 500; line-height: 1.3;
}
#view-home-d :is(.hd-audience-eyebrow, .hd-cats-eyebrow, .hd-routes__eyebrow, .bp-tiles-eyebrow,
  .hd-trust__eyebrow, .hd-deep__eyebrow)::before { content: none; }

/* H2 секций - одна шкала (раздел 3) */
#view-home-d :is(.hd-audience-heading h2, .hd-cats-head h2, .hd-routes__intro h2, .bp-tiles-head h2,
  .hd-shop-head h2, .hd-trust__head h2, .hd-easy-head h2, .hd-deep__txt h2) {
    margin: 0;
  color: var(--ink); font-size: var(--fs-h2); font-weight: 500; line-height: 1.08; letter-spacing: -0.03em;
}

/* Заголовок секции: слева надзаголовок и H2, справа лид, по нижней линии (как .sf-head) */
#view-home-d :is(.hd-cats-head, .hd-shop-head, .hd-trust__head) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  grid-template-areas: "eyebrow lead" "title lead";
  align-items: end; column-gap: clamp(32px, 5vw, 80px);
  max-width: none; margin: 0 0 var(--head-gap); padding: 0;
  text-align: left;
}
#view-home-d :is(.hd-cats-head, .hd-shop-head, .hd-trust__head) > :first-child { grid-area: eyebrow; }
#view-home-d :is(.hd-cats-head, .hd-shop-head, .hd-trust__head) > h2 { grid-area: title; }
#view-home-d :is(.hd-cats-head, .hd-shop-head, .hd-trust__head) > p { grid-area: lead; }
#view-home-d :is(.hd-routes__intro, .bp-tiles-head, .hd-easy-head) {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px clamp(32px, 5vw, 80px);
  max-width: none; margin: 0 0 var(--head-gap); padding: 0;
  text-align: left;
}
#view-home-d :is(.hd-routes__intro, .bp-tiles-head, .hd-easy-head) > div { flex: 1 1 auto; min-width: 0; }
/* Лиды заголовков */
#view-home-d :is(.hd-audience-heading p, .hd-cats-head p, .hd-routes__intro p, .bp-tiles-head p,
  .hd-shop-head p, .hd-trust__head p, .hd-easy-head p) {
    margin: 0; padding: 0;
  color: var(--muted); font-size: 17px; font-weight: 400; line-height: 1.5;
}
#view-home-d :is(.hd-routes__intro p, .bp-tiles-head p, .hd-easy-head p) { flex: 0 1 480px; }
/* Две строки лида «Почему с нами работают» идут одним абзацем в правой колонке
   (пробел между ними - псевдоэлементом: в разметке строки разделяет только <br>) */
#view-home-d .hd-trust__head p br { display: none; }
#view-home-d .hd-trust__head p br + span::before { content: " "; }

/* ==========================================================================
   1. Первый экран (правка 3 от 08.10): фото во всю ширину окна, текст и кнопки - по сетке шапки
   Единственное исключение из «одной ширины» (DESIGN-V2, раздел 0). Сцена .hd-slides - полоса
   от края до края экрана. Фон - то же фото --cms-background, что меняет админка
   (data-cms-img="home.heroImage" на .hd-hero, переменная наследуется). Поля сцены - формула
   шапки: max(gutter, (100% - container) / 2) от полной ширины, поэтому H1 и кнопки стоят ровно
   на линии логотипа, а правый край сетки - на линии «Заказать звонок». Текст - в левых 5/12
   сетки, на тёмной части снимка; справа контейнеры. Факты - белая строка шириной контента под фото.
   ========================================================================== */
#view-home-d .hd-hero {
  --hero-pad: max(var(--gutter), calc((100% - var(--container)) / 2));
  /* первый экран вместе со строкой фактов помещается в окно: 900 → 692, 1080 → 720. Не выше 62,5vw:
     на 901-1349 окно не уже 1,6:1, иначе снимок № 1 (15:8) по cover срезал бы товары справа
     (docs/IMAGES-CODEX.md, 10.2) */
  --hero-h: clamp(520px, min(100svh - var(--hd-h, 80px) - 128px, 62.5vw), 720px);
  position: relative;
  display: block;
  width: auto; min-height: 0; margin: 0; padding: 0;
  overflow: visible; background: none; color: var(--ink);
}
#view-home-d .hd-hero::after { content: none; }

#view-home-d .hd-slides {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  flex: none; min-height: var(--hero-h);
  padding: 0 var(--hero-pad);
  overflow: hidden;
  background: var(--footer);
  color: #fff;
}
/* Снимок первого экрана (23.10.2026): по умолчанию img/01-home-hero.jpg (3840 × 2048, на телефоне
   свой кадр 01-home-hero-m.jpg, ниже). Фото из админки (home.heroImage → --cms-background) встаёт
   вместо него на всех ширинах. Слой под затемнением; снизу по краю: на широком окне срезается небо,
   низ кадра остаётся */
#view-home-d .hd-slides::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--cms-background, url("img/01-home-hero.jpg")) 20% 100% / cover no-repeat;
}
/* Затемнение под текст: слева плотное, к контейнерам сходит на нет (тон подвала --footer) */
#view-home-d .hd-slides::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg,
    rgb(13 36 20 / .84) 0%, rgb(13 36 20 / .66) 26%, rgb(13 36 20 / .3) 42%, rgb(13 36 20 / 0) 58%);
}
#view-home-d .hd-slide {
  grid-column: 1;
  position: relative; inset: auto;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  max-width: none; padding: clamp(48px, 6vw, 88px) 0; transform: none;
}
#view-home-d .hd-slide:not(.is-active) { display: none; }
#view-home-d .hd-slide h1 {
  margin: 0; color: #fff;
  font-size: var(--fs-display); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em;
  overflow-wrap: break-word;
}
/* «Оптом и в розницу» - бейдж с точкой под H1: на тёмном - полупрозрачный, точка шалфейная */
#view-home-d .hd-subtitle {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; margin: clamp(16px, 1.8vw, 24px) 0 0; padding: 0 14px;
  border-radius: var(--r-pill); background: rgb(255 255 255 / .1);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
  color: #fff; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
}
#view-home-d .hd-subtitle::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-on-dark);
}
#view-home-d .hd-slide p {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  color: var(--on-band); font-size: var(--fs-lead); font-weight: 400; line-height: 1.5;
}
#view-home-d .hd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.6vw, 36px); }
/* Кнопки на тёмном - как в полосах фундамента: основная белая, вторичная - белый контур */
#view-home-d .hd-actions .btn--primary { background: #fff; border-color: #fff; color: var(--band); }
#view-home-d .hd-actions .btn--primary:hover { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--band); }
#view-home-d .hd-actions .hd-btn-ghost { background: transparent; border-color: rgb(255 255 255 / .4); color: #fff; }
#view-home-d .hd-actions .hd-btn-ghost:hover { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .56); color: #fff; }
#view-home-d .hd-slides :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Окна шире 1920: снимок 1717 × 916 по cover растягивался (2560 - в 1,49 раза, мягкий) и срезался
   сверху так, что крышка зелёного контейнера уходила за край кадра. Здесь снимок не крупнее, чем
   на 1920 (1920px по ширине, свои пропорции), стоит справа внизу, его левый край растворяется в
   тёмном фоне сцены, а сам кадр растёт до 880px. Фото из админки (--cms-background) - так же */
@media (min-width: 1921px) {
  #view-home-d .hd-hero {
    --hero-h: clamp(520px, min(100svh - var(--hd-h, 80px) - 128px, max(720px, 34vw)), 880px);
  }
  #view-home-d .hd-slides { background: var(--footer); }
  #view-home-d .hd-slides::after {
    content: ""; position: absolute; inset: auto 0 0 auto; z-index: -2; pointer-events: none;
    width: 1920px; min-height: 100%; aspect-ratio: 15 / 8;
    background: var(--cms-background, url("img/01-home-hero.jpg")) 20% 100% / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
    mask-image: linear-gradient(90deg, transparent, #000 30%);
  }
}

/* Факты: строка шириной контента на белом под фото; кружок с контурной иконкой, заголовок и строка */
#view-home-d .hd-facts {
  position: static;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: stretch;
  gap: 16px var(--gap);
  width: var(--wrap); max-width: none; margin: 0 auto; padding: clamp(24px, 2.4vw, 32px) 0 0;
}
/* Содержимое факта - от верха ячейки: заголовки и кружки четырёх фактов на одной линии, даже
   когда у одного из них заголовок или строка в две строки */
#view-home-d .hd-fact {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto;
  align-content: start; column-gap: 14px; row-gap: 2px;
}
#view-home-d .hd-fact svg {
  grid-row: 1 / span 2; align-self: start; box-sizing: border-box;
  width: 44px; height: 44px; margin: 0; padding: 12px;
  border-radius: var(--r-pill); background: var(--field);
  fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
#view-home-d .hd-fact b { align-self: end; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.35; }
#view-home-d .hd-fact span { align-self: start; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.4; }

/* ==========================================================================
   2. «Что нужно подобрать?»: слева заголовок, справа сегменты; панель - белая карточка
   ========================================================================== */
#view-home-d .hd-audience-shell {
  overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none;
}
#view-home-d .hd-audience-top {
  display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px 40px;
  margin: 0 0 var(--head-gap); padding: 0; border: 0;
}
#view-home-d .hd-audience-heading { flex: 1 1 420px; }
#view-home-d .hd-audience-heading p { margin-top: 16px; }

/* Вкладки - сегментированный переключатель (правка 4 от 08.10): дорожка --field на белом,
   выбранный - зелёная плашка, которая переезжает к нажатой вкладке.
   Плашка - слой .hd-audience-tabs__active (его строит setupHomeAudienceSelector): копия вкладок
   в «выбранном» виде поверх настоящих, обрезанная clip-path по выбранной вкладке. Переход
   clip-path двигает фон и белый текст одним движением, без рассинхрона цветов. Пока слоя нет
   (до JS), выбранная вкладка красится сама. */
#view-home-d .hd-audience-tabs {
  position: relative; isolation: isolate;
  display: inline-flex; flex: none; gap: 4px;
  padding: 4px; border: 0; border-radius: var(--r-pill);
  background: var(--field); box-shadow: none;
}
#view-home-d .hd-audience-tabs :is(button, .hd-audience-tabs__seg) {
  display: inline-flex; align-items: center; gap: 12px;
  min-width: 0; min-height: 56px; margin: 0; padding: 8px 24px 8px 8px;
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink); box-shadow: none;
  font: inherit; text-align: left;
}
#view-home-d .hd-audience-tabs button {
  cursor: pointer;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
#view-home-d .hd-audience-tabs button[aria-selected="true"] { border: 0; background: var(--brand); color: #fff; box-shadow: none; }
#view-home-d .hd-audience-tabs.has-thumb button[aria-selected="true"] { background: transparent; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  #view-home-d .hd-audience-tabs button:not([aria-selected="true"]):hover { border: 0; background: rgb(255 255 255 / .72); color: var(--ink); }
}
#view-home-d .hd-audience-tab__icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--brand);
}
#view-home-d .hd-audience-tab__icon svg { width: 18px; height: 18px; stroke-width: 1.6; }
#view-home-d .hd-audience-tabs :is(button, .hd-audience-tabs__seg) > span:last-child { display: block; min-width: 0; }
#view-home-d .hd-audience-tabs strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.25; overflow-wrap: normal; }
#view-home-d .hd-audience-tabs small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.3; }
#view-home-d .hd-audience-tabs button[aria-selected="true"] .hd-audience-tab__icon,
#view-home-d .hd-audience-tabs__seg .hd-audience-tab__icon { border: 0; background: rgb(255 255 255 / .14); color: #fff; }
#view-home-d .hd-audience-tabs button[aria-selected="true"] small,
#view-home-d .hd-audience-tabs__seg small { color: rgb(255 255 255 / .8); }
#view-home-d .hd-audience-tabs.has-thumb button[aria-selected="true"] .hd-audience-tab__icon { background: var(--surface); color: var(--brand); }
#view-home-d .hd-audience-tabs.has-thumb button[aria-selected="true"] small { color: var(--muted); }

/* Слой плашки: та же раскладка, что у дорожки (inline-flex на компьютере, сетка 2 × 1 на телефоне) */
#view-home-d .hd-audience-tabs__active {
  position: absolute; inset: 0; z-index: 1;
  display: inherit; grid-template-columns: inherit; gap: inherit; align-items: inherit;
  padding: inherit; border-radius: inherit;
  background: var(--brand); color: #fff;
  pointer-events: none;
  clip-path: inset(50%); /* до первой расстановки скрыт; дальше clip-path задаёт JS */
  transition: clip-path .3s var(--ease);
}
#view-home-d .hd-audience-tabs__active .hd-audience-tabs__seg { color: #fff; }
#view-home-d .hd-audience-tabs__active.is-instant { transition: none; }

/* Панель: белая карточка-сцена; содержимое двух панелей лежит в одной ячейке и сменяется
   мягко: уходящее гаснет и сдвигается к своей вкладке, новое проявляется со стороны своей
   вкладки («Дом и дача» слева, «Бизнес» справа). Карточка при этом стоит на месте */
#view-home-d .hd-audience-stage {
  display: grid; overflow: clip;
  padding: var(--inset);
  border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
#view-home-d .hd-audience-panel {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0;
  min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility 0s linear .16s;
}
#view-home-d .hd-audience-homepane:not(.is-active) { transform: translateX(-16px); }
#view-home-d .hd-audience-businesspane:not(.is-active) { transform: translateX(16px); }
#view-home-d .hd-audience-panel.is-active {
  transform: none;
  transition: opacity .3s var(--ease) .06s, transform .36s var(--ease) .06s, visibility 0s;
}
#view-home-d :is(.hd-audience-homepane__copy, .hd-audience-businesspane__main) {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(20px, 3vw, 40px) clamp(20px, 3.2vw, 44px) clamp(20px, 3vw, 40px) clamp(16px, 2.6vw, 36px);
}
#view-home-d .hd-audience-index {
  display: block; width: fit-content; margin: 0 0 12px;
  color: var(--brand); font-size: 15px; font-weight: 500; line-height: 1.3;
}
#view-home-d .hd-audience-index::before { content: none; }
#view-home-d :is(.hd-audience-homepane, .hd-audience-businesspane) h3 {
  margin: 0; color: var(--ink);
  font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em;
}
#view-home-d :is(.hd-audience-homepane__copy > p, .hd-audience-businesspane__intro p) {
  margin: 14px 0 0;
  color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1.55;
}
/* Строка фактов: волосяные линии сверху, снизу и между пунктами */
#view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%; margin: 24px 0 28px;
  border: 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); border-radius: 0;
}
#view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) span {
  min-width: 0; padding: 16px 16px 16px 0; border: 0; border-right: 1px solid var(--hairline);
}
#view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) span + span { padding-left: 16px; }
#view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) span:last-child { border-right: 0; }
#view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) strong {
  color: var(--ink); font-size: 15px; font-weight: 500; line-height: 1.3;
}
#view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) small {
  margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.35;
}
/* Обе панели устроены одинаково: надзаголовок, заголовок, абзац, факты, кнопка. Факты и кнопка
   прижаты к низу у обеих - при переключении они остаются на одной высоте. Если у одной панели
   абзац на строку короче, разница уходит в зазор над фактами (не меньше 24px), а не под кнопку */
#view-home-d :is(.hd-audience-homepane__copy > p, .hd-audience-businesspane__intro) { margin-bottom: 24px; }
#view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) { margin-top: auto; }
#view-home-d :is(.hd-audience-homepane, .hd-audience-businesspane) .btn { margin-top: 0; }

/* Фото в окне 12: подпись-бейдж сверху, белая капсула с подписью снизу (как .sf-hero-tag и .sf-hero-price) */
#view-home-d :is(.hd-audience-homepane__media, .hd-audience-businesspane__media) {
  position: relative; isolation: isolate; overflow: hidden;
  display: block; min-width: 0; min-height: 360px; margin: 0; padding: 0;
  border: 0; border-radius: var(--r-in); background: var(--field);
}
#view-home-d :is(.hd-audience-homepane__media, .hd-audience-businesspane__media) img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; border-radius: 0; object-fit: cover;
}
#view-home-d :is(.hd-audience-homepane__media, .hd-audience-businesspane__media) > span {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: var(--r-pill); background: rgb(255 255 255 / .8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ink-2); font-size: 13px; font-weight: 400; line-height: 1;
}
#view-home-d :is(.hd-audience-homepane__media, .hd-audience-businesspane__media) figcaption {
  position: absolute; left: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 2px;
  width: auto; max-width: calc(100% - 32px); padding: 10px 20px 11px;
  border: 0; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow);
}
#view-home-d :is(.hd-audience-homepane__media, .hd-audience-businesspane__media) figcaption strong {
  color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap;
}
#view-home-d :is(.hd-audience-homepane__media, .hd-audience-businesspane__media) figcaption small {
  color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.25;
}

/* ==========================================================================
   3. Категории: белые карточки как .sf-cat - фото в окне 12, название, количество, круглая стрелка
   ========================================================================== */
#view-home-d .hd-cats-head h2 br { display: none; }
/* Вторая строка из админки («под вашу задачу») переносится целиком: заголовок рвётся между
   строками админки, а не оставляет одно слово («задачу») на второй строке. inline-block, а не
   nowrap: длинная строка из админки уже колонки переносится внутри себя и не вылезает */
@media (min-width: 761px) {
  #view-home-d .hd-cats-head h2 [data-cms="home.catalogTitleLine2"] { display: inline-block; }
}
#view-home-d .hd-cat-shelf {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
  grid-auto-flow: row; grid-auto-columns: auto;
  width: auto; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none;
}
#view-home-d .hd-cat-compare,
#view-home-d .hd-cat-compare--shelf {
  display: grid; grid-template-columns: clamp(88px, 8vw, 112px) minmax(0, 1fr) auto; grid-template-rows: none;
  align-items: center; gap: 20px;
  min-width: 0; min-height: 0; height: 100%;
  padding: var(--inset) 20px var(--inset) var(--inset);
  overflow: visible; border: 0; border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
  transition: opacity .4s var(--ease), transform .25s var(--ease);
}
#view-home-d .hd-cat-compare__media {
  display: block; aspect-ratio: 1; min-width: 0; margin: 0; overflow: hidden;
  border: 0; border-radius: var(--r-in); background: var(--field);
}
/* Квадрат категории -sq на плитке A5 (foundation.css, 25): изделие целое, внутри полей, без фильтра */
#view-home-d .hd-cat-compare__media.a5 { background: var(--a5-tile); background-color: var(--a5-e); }
#view-home-d .hd-cat-compare__media img { display: block; transition: transform .4s var(--ease); }
#view-home-d .hd-cat-compare__body,
#view-home-d .hd-cat-compare--shelf .hd-cat-compare__body {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: 0; border: 0; border-radius: 0;
}
#view-home-d .hd-cat-compare__body strong {
  color: var(--ink); font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;
}
#view-home-d .hd-cat-compare__body small { margin: 0; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.35; }
#view-home-d .hd-cat-compare__go {
  display: inline-grid; place-items: center; flex: none;
  width: var(--circ-sm); height: var(--circ-sm); border-radius: var(--r-pill);
  background: var(--field); color: var(--ink);
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
#view-home-d .hd-cat-compare__go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#view-home-d .hd-cat-compare:hover,
#view-home-d .hd-cat-compare.hd-reveal.is-in:hover { transform: translateY(-2px); border: 0; box-shadow: var(--shadow); }
#view-home-d .hd-cat-compare:hover .hd-cat-compare__go { background: var(--brand); color: #fff; }
#view-home-d .hd-cat-compare:hover .hd-cat-compare__media img { transform: scale(1.05); }

/* Место под полку категорий и «Популярные позиции» до основного скрипта. Обе сетки пустые, пока
   скрипт не дождётся каталога и не вставит карточки; на медленной сети это секунды, и у того, кто
   уже листает, всё ниже прыгало на 400-750px. Высота повторяет готовые сетки:
   - полка: строки по высоте фото карточки (квадрат) + отступы, на 9 категорий (сколько их сейчас
     в админке; другое число даст сдвиг на строку, а не на всю полку);
   - популярные: невидимые ячейки высотой «ширина колонки (квадрат фото) + подпись и цена»
     (процент padding в сетке считается от ширины колонки), ряд на компьютере и два на телефоне.
   Как только карточки на месте, :empty не срабатывает и правила выключаются */
#view-home-d .hd-cat-shelf:empty { min-height: calc(3 * (clamp(88px, 8vw, 112px) + 2 * var(--inset)) + 2 * var(--gap)); }
#view-home-d .hd-popular-grid:empty::before,
#view-home-d .hd-popular-grid:empty::after {
  content: ""; padding-bottom: calc(100% + clamp(125px, 304px - 12.43vw, 192px));
}
@media (max-width: 1040px) {
  #view-home-d .hd-cat-shelf:empty { min-height: calc(3 * (72px + 2 * var(--inset)) + 2 * var(--gap)); }
}
@media (max-width: 900px) {
  #view-home-d .hd-cat-shelf:empty { min-height: calc(5 * (72px + 2 * var(--inset)) + 4 * var(--gap)); }
  #view-home-d .hd-popular-grid:empty::before { padding-bottom: calc(100% + 125px); }
  #view-home-d .hd-popular-grid:empty::after { grid-area: 2 / 1; padding-bottom: calc(100% + 115px); }
}
@media (max-width: 760px) {
  #view-home-d .hd-cat-shelf:empty { min-height: calc(9 * 76px + 8 * 8px); }
  #view-home-d .hd-popular-grid:empty::before { padding-bottom: calc(100% + clamp(103px, 245px - 25vw, 162px)); }
  #view-home-d .hd-popular-grid:empty::after { padding-bottom: calc(100% + clamp(96px, 300px - 48vw, 134px)); }
}

/* ==========================================================================
   4. Решения для организаций - тёмная полоса №1, белые карточки как .sf-sol
   ========================================================================== */
#view-home-d .hd-routes-sec {
  width: var(--wrap); margin: var(--block) auto 0; padding: var(--band-y) var(--band-pad);
  border: 0; border-radius: var(--r); background: var(--band); color: #fff;
}
#view-home-d .hd-routes-sec > .container {
  width: auto; margin-inline: 0;
}
#view-home-d .hd-routes { display: block; }
#view-home-d .hd-routes__intro .hd-routes__eyebrow { color: var(--brand-on-dark); }
#view-home-d .hd-routes__intro h2 { color: #fff; }
#view-home-d .hd-routes__intro p { color: var(--on-band); }
#view-home-d .hd-routes-sec :focus-visible { outline-color: #fff; }

#view-home-d .hd-routes__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
  width: auto; padding: 0; overflow: visible;
}
#view-home-d .hd-routes-sec .hd-route,
#view-home-d .hd-routes-sec .hd-route:first-of-type {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  min-width: 0; padding: var(--inset);
  overflow: visible; border: 0; border-radius: var(--r);
  background: var(--surface); color: var(--ink); box-shadow: none; transform: none;
  text-decoration: none; transition: none;
}
#view-home-d .hd-routes-sec .hd-route:hover { transform: none; border: 0; background: var(--surface); box-shadow: none; }
#view-home-d .hd-route__media {
  position: relative; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: var(--r-in); background: var(--field);
}
#view-home-d .hd-route__media::after { content: none; }
/* Кадры № 4-6 сделаны под окно 4:3: по центру (сдвиги кадра из home-routes.css - от прежних фото) */
#view-home-d .hd-route__media > img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  transition: transform .5s var(--ease);
}
#view-home-d .hd-route:hover .hd-route__media > img { transform: scale(1.03); }
/* Подпись на фото - бейдж, как .sf-hero-tag */
#view-home-d .hd-route__label {
  position: absolute; z-index: 1; top: 12px; left: 12px; bottom: auto;
  display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
  border-radius: var(--r-pill); background: rgb(255 255 255 / .8);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ink-2); font-size: 13px; font-weight: 400; line-height: 1;
}
#view-home-d .hd-route__content {
  display: flex; flex: 1; flex-direction: column;
  min-height: 0; padding: 20px 12px 12px;
}
#view-home-d .hd-route__heading {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 16px;
}
#view-home-d .hd-routes-sec .hd-route__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: var(--r-pill);
  background: var(--brand-tint); color: var(--brand);
}
#view-home-d .hd-routes-sec .hd-route__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#view-home-d .hd-routes-sec .hd-route__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#view-home-d .hd-routes-sec .hd-route__text b {
  margin: 0; color: var(--ink); font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em;
}
#view-home-d .hd-routes-sec .hd-route__text span {
  color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1.5;
}
/* «Смотреть решение» и стрелка в тонированном круге (как .sf-sol .sf-go) */
#view-home-d .hd-route__go {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding: 20px 0 0 60px;
  color: var(--brand); font-size: 15px; font-weight: 500; line-height: 1.3;
}
#view-home-d .hd-route__go svg {
  box-sizing: border-box; flex: none;
  width: var(--circ-sm); height: var(--circ-sm); padding: 11px;
  border-radius: var(--r-pill); background: var(--brand-tint); color: var(--brand-hover);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transform: none;
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
#view-home-d .hd-route:hover .hd-route__go { color: var(--brand-hover); }
#view-home-d .hd-route:hover .hd-route__go svg { transform: none; background: var(--brand); color: #fff; }

/* ==========================================================================
   5. Подборки по типу объекта: белые плитки с кружком-иконкой
   ========================================================================== */
#view-home-d .bp-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
}
#view-home-d .bp-tile {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 20px; align-items: center; gap: 16px;
  padding: 20px; border: 0; border-radius: var(--r);
  background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none;
  transition: transform .25s var(--ease);
}
#view-home-d .bp-tile:hover,
#view-home-d .bp-tile:focus-visible { transform: translateY(-2px); border: 0; box-shadow: var(--shadow); }
#view-home-d .bp-tile__ic {
  display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: var(--r-pill);
  background: var(--brand-tint); color: var(--brand);
}
#view-home-d .bp-tile__ic svg { width: 20px; height: 20px; stroke-width: 1.6; }
#view-home-d .bp-tile__text { gap: 4px; }
#view-home-d .bp-tile__text b { color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
#view-home-d .bp-tile__text span { color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.45; }
#view-home-d .bp-tile__go { display: grid; place-items: center; }
#view-home-d .bp-tile__go svg {
  width: 18px; height: 18px; stroke: var(--muted); stroke-width: 1.6;
  transition: transform var(--speed) var(--ease), stroke var(--speed) var(--ease);
}
#view-home-d .bp-tile:hover .bp-tile__go svg { stroke: var(--brand); transform: translateX(3px); }

/* ==========================================================================
   6. Популярные позиции: без серого острова, сетка карточек товара (карточка - фундамент)
   ========================================================================== */
#view-home-d .hd-shop-sec > .container {
  width: min(var(--container), calc(100% - 2 * var(--gutter))); max-width: none;
}
#view-home-d .hd-shop-card {
  width: auto; max-width: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none;
}
#view-home-d .hd-shop-card > .container { width: auto; max-width: none; margin: 0; padding: 0; }
#view-home-d .hd-shop-head h2 { margin: 0; }
#view-home-d .hd-popular-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
  width: auto; padding: 0; overflow: visible;
}
/* Перенесено из удалённого home-popular.css: полоса прокрутки сетки скрыта, как и было */
@media (max-width: 620px) { #view-home-d .hd-popular-grid { scrollbar-width: none; } }

/* ==========================================================================
   7. Почему с нами работают - тёмная полоса №2, четыре белые карточки как .sf-del
   ========================================================================== */
#view-home-d .hd-trust-sec {
  position: relative; isolation: isolate; overflow: hidden;
  width: var(--wrap); margin: var(--block) auto 0; padding: var(--band-y) var(--band-pad);
  border: 0; border-radius: var(--r); background: var(--band); color: #fff;
}
#view-home-d .hd-trust-sec > .container {
  width: auto; margin-inline: 0;
}
#view-home-d .hd-trust {
  position: static; overflow: visible;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #fff;
}
#view-home-d .hd-trust::after { content: none; }
/* Знак AROLT тон в тон в углу полосы, как водяной знак лид-полосы */
#view-home-d .hd-trust__watermark {
  position: absolute; z-index: -1; top: -110px; right: -80px;
  width: 440px; height: 440px; overflow: hidden; opacity: .05; pointer-events: none;
}
#view-home-d .hd-trust__watermark img { width: auto; max-width: none; height: 100%; filter: brightness(0) invert(1); }
#view-home-d .hd-trust__head { position: relative; z-index: 1; }
#view-home-d .hd-trust__head .hd-trust__eyebrow { color: var(--brand-on-dark); }
#view-home-d .hd-trust__head h2 { color: #fff; }
#view-home-d .hd-trust__head p { color: var(--on-band); }
#view-home-d .hd-trust-sec :focus-visible { outline-color: #fff; }
#view-home-d .hd-trust__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
}
#view-home-d .hd-trust__item,
#view-home-d .hd-trust__item:hover {
  display: flex; flex-direction: column;
  padding: 24px 24px 28px; border: 0; border-radius: var(--r);
  background: var(--surface); color: var(--ink); box-shadow: none; transform: none;
}
#view-home-d .hd-trust__item.hd-reveal:not(.is-in) { transform: translateY(12px); }
#view-home-d .hd-trust__ic {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: 0; border: 0; border-radius: var(--r-pill);
  background: var(--brand-tint); color: var(--brand);
}
#view-home-d .hd-trust__ic svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.6; }
#view-home-d .hd-trust__item h3 {
  margin: 32px 0 0; color: var(--ink);
  font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;
}
#view-home-d .hd-trust__item p { margin: 8px 0 0; color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1.5; }

/* ==========================================================================
   8. Частным покупателям: белые карточки, кружок-иконка на тинте
   ========================================================================== */
#view-home-d .hd-easy {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
  border: 0;
}
#view-home-d .hd-easy__item,
#view-home-d .hd-easy__item:first-child,
#view-home-d .hd-easy__item:last-child {
  display: flex; flex-direction: column; align-items: flex-start;
  min-width: 0; padding: 24px 24px 28px;
  border: 0; border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow);
}
#view-home-d .hd-easy__ic,
#view-home-d .hd-easy__item:nth-child(n) .hd-easy__ic,
#view-home-d .hd-easy__item:hover .hd-easy__ic {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: 0;
  border: 0; border-radius: var(--r-pill);
  background: var(--brand-tint); color: var(--brand); box-shadow: none; transform: none;
}
#view-home-d .hd-easy__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#view-home-d .hd-easy__body { display: flex; flex-direction: column; align-items: flex-start; }
#view-home-d .hd-easy__item h3 {
  margin: 32px 0 0; color: var(--ink);
  font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em;
}
#view-home-d .hd-easy__item p { margin: 8px 0 0; color: var(--muted); font-size: 15px; font-weight: 400; line-height: 1.5; }

/* ==========================================================================
   9. Качество в деталях: текст слева, фото-плитки справа (как .sf-about + .sf-photos)
   ========================================================================== */
#view-home-d .hd-deep {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center; gap: 40px clamp(40px, 5vw, 72px);
}
#view-home-d .hd-deep__txt { display: flex; flex-direction: column; align-items: flex-start; }
#view-home-d .hd-deep__lead {
  margin: 20px 0 0;
  color: var(--muted); font-size: 17px; font-weight: 400; line-height: 1.5;
}
#view-home-d .hd-deep__specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px;
  width: 100%; margin: 32px 0 0; padding: 0; list-style: none;
}
#view-home-d .hd-deep__specs li { display: flex; align-items: flex-start; gap: 14px; }
#view-home-d .hd-deep__specs svg {
  box-sizing: border-box; flex: none;
  width: 40px; height: 40px; margin: 0; padding: 10px;
  border-radius: var(--r-pill); background: var(--field);
  fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
#view-home-d .hd-deep__specs b { display: block; margin-top: 1px; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3; }
#view-home-d .hd-deep__specs span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.45; }
#view-home-d .hd-deep__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

#view-home-d .hd-deep__gallery {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--gap); height: clamp(440px, 40vw, 560px); min-height: 0;
}
#view-home-d .hd-deep__shot {
  position: relative; overflow: hidden; min-width: 0; min-height: 0;
  border: 0; border-radius: var(--r); background: var(--field);
}
#view-home-d .hd-deep__shot:first-child { grid-row: span 2; }
#view-home-d .hd-deep__shot img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0;
  transition: transform .6s var(--ease);
}
#view-home-d .hd-deep__shot:hover img { transform: scale(1.03); }

/* ==========================================================================
   10. Расчёт по СанПиН: лид-полоса - компонент фундамента (.hd-lead), здесь только отступ
   ========================================================================== */

/* ==========================================================================
   11. SEO-текст: общий блок .v2-seo в одну колонку (foundation.css, раздел 24; решение 19.10.2026)
   ========================================================================== */

/* ==========================================================================
   Адаптив (9.3)
   ========================================================================== */
/* Первый экран 901-1279: две кнопки в колонку текста не помещаются - каждая на свою строку
   во всю ширину колонки, а не лесенкой разной длины */
@media (min-width: 901px) and (max-width: 1279px) {
  #view-home-d .hd-actions .btn { flex: 1 1 auto; }
}

@media (max-width: 1240px) {
  #view-home-d .hd-cat-compare,
  #view-home-d .hd-cat-compare--shelf { gap: 16px; padding-right: 16px; }
  #view-home-d .hd-cat-compare__body strong { font-size: 16px; }
}

@media (max-width: 1040px) {
  /* Заголовки секций - колонкой, лид под H2 */
  #view-home-d :is(.hd-cats-head, .hd-shop-head, .hd-trust__head) {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "lead";
  }
  #view-home-d :is(.hd-routes__intro, .bp-tiles-head, .hd-easy-head) { flex-direction: column; align-items: flex-start; }
  #view-home-d :is(.hd-routes__intro, .bp-tiles-head, .hd-easy-head) > div { flex: none; }
  #view-home-d :is(.hd-cats-head p, .hd-routes__intro p, .bp-tiles-head p, .hd-shop-head p, .hd-trust__head p, .hd-easy-head p) {
    flex: none; margin-top: 16px;
  }
  #view-home-d :is(.hd-routes__intro, .bp-tiles-head, .hd-easy-head) > p { margin-top: 0; }
  #view-home-d .hd-trust__head p br { display: inline; }
  #view-home-d .hd-trust__head p br + span::before { content: none; }

  /* Первый экран: факты 2 × 2 */
  #view-home-d .hd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  #view-home-d .hd-audience-top { flex-direction: column; align-items: flex-start; }
  #view-home-d .hd-audience-heading { flex: none; }
  #view-home-d .hd-audience-panel { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

  #view-home-d .hd-cat-compare,
  #view-home-d .hd-cat-compare--shelf { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; padding-right: 14px; }
  #view-home-d .hd-cat-compare__go { width: 36px; height: 36px; }

  #view-home-d .bp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-home-d .hd-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  #view-home-d .hd-deep { grid-template-columns: minmax(0, 1fr); }
  #view-home-d .hd-deep__gallery { height: clamp(360px, 60vw, 520px); }
}

/* Решения 901-1040: три колонки, как на компьютере (не 2 + 1 с огромной третьей карточкой).
   Карточка уже - иконка в строке с названием, описание и «Смотреть решение» на всю ширину текста */
@media (min-width: 901px) and (max-width: 1040px) {
  #view-home-d .hd-route__content { padding: 16px 8px 8px; }
  #view-home-d .hd-route__heading { grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px 12px; }
  #view-home-d .hd-routes-sec .hd-route__icon { width: 36px; height: 36px; }
  #view-home-d .hd-routes-sec .hd-route__icon svg { width: 18px; height: 18px; }
  #view-home-d .hd-routes-sec .hd-route__text { display: contents; }
  #view-home-d .hd-routes-sec .hd-route__text b { font-size: 18px; }
  #view-home-d .hd-routes-sec .hd-route__text span { grid-column: 1 / -1; font-size: 14px; }
  #view-home-d .hd-route__go { padding: 16px 0 0; }
  #view-home-d .hd-route__go svg { width: 36px; height: 36px; padding: 9px; }
}

/* Решения 761-900: три колонки уже не помещаются - список горизонтальных карточек одной высоты:
   фото слева (40%), текст справа */
@media (min-width: 761px) and (max-width: 900px) {
  #view-home-d .hd-routes__grid { grid-template-columns: minmax(0, 1fr); }
  #view-home-d .hd-routes-sec .hd-route,
  #view-home-d .hd-routes-sec .hd-route:first-of-type { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; }
  #view-home-d .hd-route__content { align-self: stretch; padding: 16px 12px 4px 24px; }

  /* Категории в две колонки: нечётная последняя («Урны» из 9) - на всю ширину, без пустой
     ячейки справа. Работает при любом числе категорий из админки */
  #view-home-d .hd-cat-shelf > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* Первый экран: контейнеры уже не помещаются рядом с текстом - текст на тёмной полосе
     сверху, под ним фото от края до края, его верх растворяется в полосе */
  #view-home-d .hd-slides {
    display: flex; flex-direction: column; align-items: stretch;
    min-height: 0; padding: 48px var(--hero-pad) 0;
    background: var(--footer);
  }
  #view-home-d .hd-slides::before { content: none; }
  #view-home-d .hd-slides::after {
    content: ""; position: static; z-index: auto; display: block; flex: none;
    aspect-ratio: 2 / 1; margin: 0 calc(var(--gutter) * -1);
    background: var(--cms-background, url("img/01-home-hero.jpg")) 100% 100% / cover no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40%);
    mask-image: linear-gradient(to bottom, transparent, #000 40%);
  }
  #view-home-d .hd-slide { padding: 0; }

  /* Факты панели «Что нужно подобрать?» - строками: слева значение, справа подпись. Три ячейки
     в колонке текста рядом с фото на 761-900 выходили по 125-145px и по 4 строки */
  #view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) { grid-template-columns: minmax(0, 1fr); }
  #view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) span,
  #view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) span + span,
  #view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) span:last-child {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    grid-column: auto; padding: 12px 0; border: 0; border-top: 1px solid var(--hairline);
  }
  #view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) span:first-child { border-top: 0; }
  #view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) small { margin: 0; text-align: right; }

  #view-home-d .hd-cat-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-home-d .hd-popular-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-home-d .hd-easy { grid-template-columns: minmax(0, 1fr); }
  #view-home-d .hd-easy__item,
  #view-home-d .hd-easy__item:first-child,
  #view-home-d .hd-easy__item:last-child {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; column-gap: 16px;
    padding: 20px 24px 24px 20px;
  }
  #view-home-d .hd-easy__item h3 { margin-top: 10px; }
}

@media (max-width: 760px) {
  #v2 #view-home-d.view { padding-top: 0; }

  /* Первый экран */
  #view-home-d .hd-slide h1 { font-size: var(--fs-display); line-height: 1.04; }
  #view-home-d .hd-subtitle { margin-top: 14px; }
  #view-home-d .hd-slide p { margin-top: 16px; font-size: 17px; }
  #view-home-d .hd-actions { flex-direction: column; align-items: stretch; align-self: stretch; }
  #view-home-d .hd-actions .btn { width: 100%; }
  #view-home-d .hd-slides { padding-top: 36px; }
  /* Телефон: свой кадр 3:2 (01-home-hero-m.jpg - кроп № 1, товары ниже растворённого верха).
     Фото из админки - на всех ширинах; отдельное поле под телефон (--cms-background-m) по желанию */
  #view-home-d .hd-slides::after {
    aspect-ratio: 3 / 2; margin-top: -8px;
    background-image: var(--cms-background-m, var(--cms-background, url("img/01-home-hero-m.jpg")));
    background-position: 50% 100%;
  }
  #view-home-d .hd-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 24px; }
  #view-home-d .hd-fact { grid-template-columns: 40px minmax(0, 1fr); }
  #view-home-d .hd-fact svg { width: 40px; height: 40px; padding: 10px; }
  #view-home-d .hd-fact b { font-size: 15px; }
  #view-home-d .hd-fact span { font-size: 13px; }

  /* «Что нужно подобрать?»: сегменты на всю ширину, панель в колонку */
  #view-home-d .hd-audience-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: stretch; width: 100%; }
  #view-home-d .hd-audience-tabs :is(button, .hd-audience-tabs__seg) { justify-content: center; min-height: 60px; padding: 8px 12px; text-align: center; }
  #view-home-d .hd-audience-tab__icon { display: none; }
  #view-home-d .hd-audience-tabs strong { font-size: 14px; }
  #view-home-d .hd-audience-tabs small { font-size: 12px; }
  #view-home-d .hd-audience-stage { padding: 6px; }
  /* На телефоне панели могут быть разной высоты (абзац на строку длиннее или короче). Обе лежат
     в одной ячейке сетки, сцена держит высоту большей - страница ниже не прыгает при переключении.
     Лишнюю высоту меньшей панели забирает фото (тянется вниз), текст не отрывается от заголовка */
  #view-home-d .hd-audience-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  #view-home-d :is(.hd-audience-homepane__copy, .hd-audience-businesspane__main) { padding: 18px 10px 12px; }
  #view-home-d :is(.hd-audience-homepane, .hd-audience-businesspane) h3 { font-size: 24px; }
  #view-home-d :is(.hd-audience-homepane__copy > p, .hd-audience-businesspane__intro p) { font-size: 15px; }
  /* Факты панели - строками (правило ≤900), здесь только отступы */
  #view-home-d :is(.hd-audience-homepane__copy > p, .hd-audience-businesspane__intro) { margin-bottom: 20px; }
  #view-home-d :is(.hd-audience-homepane__facts, .hd-audience-businesspane__facts) { margin: auto 0 20px; }
  #view-home-d :is(.hd-audience-homepane, .hd-audience-businesspane) .btn { width: 100%; }
  #view-home-d :is(.hd-audience-homepane__media, .hd-audience-businesspane__media) { place-self: stretch; min-height: 0; aspect-ratio: 4 / 3; }
  #view-home-d :is(.hd-audience-homepane__media, .hd-audience-businesspane__media) > span { top: 12px; left: 12px; height: 28px; font-size: 12px; }
  #view-home-d :is(.hd-audience-homepane__media, .hd-audience-businesspane__media) figcaption { left: 12px; bottom: 12px; padding: 8px 18px 9px; }
  #view-home-d :is(.hd-audience-homepane__media, .hd-audience-businesspane__media) figcaption strong { font-size: 15px; }

  /* Категории: одна колонка компактных карточек */
  #view-home-d .hd-cat-shelf { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #view-home-d .hd-cat-compare,
  #view-home-d .hd-cat-compare--shelf { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 6px 12px 6px 6px; }
  #view-home-d .hd-cat-compare__media { border-radius: var(--r-in); }
  #view-home-d .hd-cat-compare__body strong { font-size: 16px; }
  #view-home-d .hd-cat-compare__body small { font-size: 13px; }
  #view-home-d .hd-cat-compare__go { width: 36px; height: 36px; }

  /* Полосы на телефоне: 48px сверху, снизу карточки почти у края (как .sf-band) */
  #view-home-d .hd-routes-sec,
  #view-home-d .hd-trust-sec { padding: 48px var(--band-pad) 20px; }

  /* Решения - лента с прокруткой (8, п. 8): карточка видна целиком, следующая выглядывает */
  #view-home-d .hd-routes__grid {
    display: flex; gap: 8px;
    margin-inline: calc(var(--band-pad) * -1);
    padding: 0 var(--band-pad);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--band-pad);
    scrollbar-width: none;
  }
  #view-home-d .hd-routes__grid::-webkit-scrollbar { display: none; }
  #view-home-d .hd-routes__grid > .hd-route,
  #view-home-d .hd-routes__grid > .hd-route:first-of-type { flex: 0 0 min(300px, 80vw); scroll-snap-align: start; }
  #view-home-d .hd-route__content { padding: 16px 8px 8px; }
  #view-home-d .hd-route__heading { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  #view-home-d .hd-routes-sec .hd-route__icon { width: 40px; height: 40px; }
  #view-home-d .hd-routes-sec .hd-route__text b { font-size: 18px; }
  #view-home-d .hd-routes-sec .hd-route__text span { font-size: 14px; }
  #view-home-d .hd-route__go { padding: 16px 0 0 52px; }
  #view-home-d .hd-route__go svg { width: 36px; height: 36px; padding: 9px; }

  /* Подборки */
  #view-home-d .bp-tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #view-home-d .bp-tile { grid-template-columns: 40px minmax(0, 1fr) 18px; gap: 14px; padding: 14px 16px 14px 14px; }
  #view-home-d .bp-tile__ic { width: 40px; height: 40px; }

  /* Популярные: две колонки */
  #view-home-d .hd-popular-grid { gap: 10px; }

  /* Доверие: иконка слева, текст справа */
  #view-home-d .hd-trust__watermark { width: 300px; height: 300px; top: -70px; right: -90px; }
  #view-home-d .hd-trust__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #view-home-d .hd-trust__item,
  #view-home-d .hd-trust__item:hover {
    display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; column-gap: 16px;
    padding: 18px 20px 20px 16px;
  }
  #view-home-d .hd-trust__ic { grid-row: span 2; width: 40px; height: 40px; }
  #view-home-d .hd-trust__item h3 { margin-top: 9px; font-size: 16px; }
  #view-home-d .hd-trust__item p { margin-top: 6px; font-size: 14px; }

  /* Частным покупателям */
  #view-home-d .hd-easy__item,
  #view-home-d .hd-easy__item:first-child,
  #view-home-d .hd-easy__item:last-child { grid-template-columns: 40px minmax(0, 1fr); padding: 18px 20px 20px 16px; }
  #view-home-d .hd-easy__ic,
  #view-home-d .hd-easy__item:nth-child(n) .hd-easy__ic,
  #view-home-d .hd-easy__item:hover .hd-easy__ic { width: 40px; height: 40px; }
  #view-home-d .hd-easy__item h3 { margin-top: 9px; font-size: 16px; }
  #view-home-d .hd-easy__item p { margin-top: 6px; font-size: 14px; }

  /* Качество: пункты в колонку, фото - лента с прокруткой */
  #view-home-d .hd-deep__lead { font-size: 16px; }
  #view-home-d .hd-deep__specs { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
  #view-home-d .hd-deep__actions { flex-direction: column; align-items: stretch; align-self: stretch; margin-top: 28px; }
  #view-home-d .hd-deep__actions .btn { width: 100%; }
  #view-home-d .hd-deep__gallery {
    display: flex; gap: 10px; height: auto;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  #view-home-d .hd-deep__gallery::-webkit-scrollbar { display: none; }
  #view-home-d .hd-deep__shot,
  #view-home-d .hd-deep__shot:first-child,
  #view-home-d .hd-deep__shot--mechanism { flex: 0 0 248px; height: 320px; aspect-ratio: auto; grid-row: auto; scroll-snap-align: start; }
  #view-home-d .hd-deep__shot:first-child { flex-basis: 280px; }
}

/* «Что нужно подобрать?», 360-400: «Бизнес и организации» (152px при 14px) не влезал в 134-149px
   вкладки и переносился, а «Дом и дача» стоял одной строкой - заголовки вкладок на разной высоте.
   Отступы по бокам меньше и 13px: заголовок (~140px) и подпись в одну строку, обе вкладки по две
   строки. До 359px переносятся обе вкладки (по три строки) - там и так ровно. Правило и для копии
   вкладок в зелёной плашке (.hd-audience-tabs__seg) */
@media (min-width: 360px) and (max-width: 400px) {
  #view-home-d .hd-audience-tabs :is(button, .hd-audience-tabs__seg) { padding-inline: 8px; }
  #view-home-d .hd-audience-tabs strong { font-size: 13px; white-space: nowrap; }
}

@media (max-width: 359px) {
  /* Популярные: если цена из админки длиннее и круг корзины уже не помещается рядом с отступом,
     круг уходит строкой ниже, вправо, а не наезжает на цену */
  #view-home-d .hd-popular-grid .product-card__foot { flex-wrap: wrap; row-gap: 8px; }
  #view-home-d .hd-popular-grid .product-card__cart { margin-left: auto; }

  /* Доверие: рядом с колонкой иконки тексту оставалось 156px и 6-7 строк - иконка над
     заголовком, текст на всю ширину карточки (от 360 - иконка слева, как в 10.2) */
  #view-home-d .hd-trust__item,
  #view-home-d .hd-trust__item:hover { display: flex; padding: 18px 18px 20px; }
  #view-home-d .hd-trust__item h3 { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  #view-home-d .hd-cat-compare,
  #view-home-d .bp-tile,
  #view-home-d .hd-cat-compare__media img,
  #view-home-d .hd-route__media > img,
  #view-home-d .hd-deep__shot img { transition: none; }
  #view-home-d .hd-cat-compare:hover,
  #view-home-d .bp-tile:hover,
  #view-home-d .hd-cat-compare:hover .hd-cat-compare__media img,
  #view-home-d .hd-route:hover .hd-route__media > img,
  #view-home-d .hd-deep__shot:hover img { transform: none; }
  /* Переключатель: без движения - плашка встаёт сразу, содержимое сменяется коротким затуханием */
  #view-home-d .hd-audience-tabs__active { transition: none; }
  #view-home-d .hd-audience-stage > .hd-audience-panel { transform: none; transition: opacity .15s linear, visibility 0s linear .15s; }
  #view-home-d .hd-audience-stage > .hd-audience-panel.is-active { transition: opacity .15s linear, visibility 0s; }
}