/* =============================================================================
   БАЗА ЗНАНИЙ — редакция 2026-08-28 «ТРИ ВХОДА»
   Разметка: page-baza-znaniy.php + template-parts/kb/*.php
   Контент и ограничения: inc/strom-kb.php (прочитать шапку перед правками)

   Три полосы, не девять: тёмный первый экран с выбором направления, полоса
   из трёх плит-стрелок, маршрут с карточкой помощи. Полосы различаются
   СТРОЕНИЕМ, а не только фоном: экран — плашка поверх кадра, плиты — сплошная
   лента шевронов без отступов, маршрут — сетка на светлом.

   Переключатель направлений — на радиокнопках (.kb-radio) и селекторе
   соседства. JS у страницы нет.
   ============================================================================= */

/* Крошки лежат в обёртке темы .wd-page-content (#f6f6f6), изнутри страницы
   недостижимой. На макете они на белом — гасим по метке на <body>. */
body.strom-kb-page .wd-page-content{background:#fff;}

/* ===== ОБЩЕЕ ===== */
.sh-home.kb-page{--kb-dark:#0d2b45;--kb-deep:#0a2138;--kb-mint:#eef6f1;
  --kb-chev:clamp(22px,3.4vw,46px);}
.sh-home.kb-page :where(h1,h2,h3){color:var(--ink);}
.sh-home.kb-page :where(ul,ol){margin:0;padding:0;list-style:none;}
.sh-home.kb-page li{margin:0;}
.sh-home.kb-page :where(figure,p){margin:0;}

/* Радиокнопки переключателя: убираем с экрана, но НЕ display:none —
   иначе группа выпадает из таблицы фокуса и стрелками её не переключить. */
.sh-home.kb-page .kb-radio{position:absolute;width:1px;height:1px;margin:-1px;
  padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}

.sh-home.kb-page .kb-ico{width:24px;height:24px;flex:none;}

/* =============================================================================
   1. ПЕРВЫЙ ЭКРАН
   ============================================================================= */

.sh-home .kb-hero{position:relative;isolation:isolate;overflow:hidden;
  background:var(--kb-deep);color:#fff;}

/* Кадр занимает всю полосу; тёмная плашка ложится сверху и обрезается шевроном,
   поэтому фотографию НЕ клипуем — клипуется плашка. Так на мобиле достаточно
   снять клип, и кадр остаётся целым. */
.sh-home .kb-hero__media{position:absolute;inset:0;z-index:0;}
.sh-home .kb-hero__media .sh-ph{position:absolute;inset:0;border:0;border-radius:0;}
/* Пока картинки нет, промпт обязан читаться: тёмная плашка накрывает левые ~60%
   полосы, поэтому тело плейсхолдера прижимаем к правому краю. */
.sh-home .kb-hero__media .kb-ph{display:grid;align-content:center;justify-items:flex-start;
  padding:clamp(24px,3vw,40px) clamp(20px,2.4vw,34px) clamp(24px,3vw,40px) 64%;}
.sh-home .kb-hero__media .kb-ph .sh-ph__body{max-width:36ch;}
.sh-home .kb-hero__media .kb-ph__how{margin-top:10px;font-size:.7rem;line-height:1.5;
  color:var(--text);}
.sh-home .kb-hero__media .kb-ph__how code{font-family:var(--mono);font-size:.66rem;
  word-break:break-all;}
.sh-home .kb-hero__media picture{display:block;width:100%;height:100%;}
.sh-home .kb-hero__media img{width:100%;height:100%;object-fit:cover;object-position:72% 50%;}

/* Тёмная плашка. Контур: сверху идёт до 60%, к середине высоты выступает
   вправо на длину шеврона, книзу возвращается. Точка острия — 52%, а не 50%:
   на глаз середина «тяжёлой» строки заголовка стоит чуть ниже геометрической. */
.sh-home .kb-hero__panel,
.sh-home .kb-hero__edge{position:absolute;inset:0;z-index:1;pointer-events:none;
  clip-path:polygon(0 0, 60% 0, calc(60% + var(--kb-chev)) 52%, 58.5% 100%, 0 100%);}
.sh-home .kb-hero__panel{background:var(--kb-dark);}

/* Зелёная кромка: тот же контур, сдвинутый вправо на 3px и покрашенный
   зелёным. Плашка стоит выше по потоку и перекрывает всё, кроме этих 3px. */
.sh-home .kb-hero__edge{background:var(--green);transform:translateX(3px);}

.sh-home .kb-hero__inner{position:relative;z-index:2;padding-block:42px;}
.sh-home .kb-hero__copy{max-width:min(55%,700px);}

/* Крошки внутри тёмного экрана: собственные, родные сняты в
   strom_kb_move_breadcrumbs() — из-за них первый экран не прижимался к шапке. */
.sh-home .kb-crumbs{margin-bottom:clamp(18px,2.2vw,30px);}
.sh-home .kb-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;
  margin:0;padding:0;list-style:none;font-size:.85rem;line-height:1.4;}
.sh-home .kb-crumbs li{display:flex;align-items:center;gap:0 10px;color:rgba(255,255,255,.62);}
.sh-home .kb-crumbs li+li::before{content:"/";color:rgba(255,255,255,.34);}
.sh-home .kb-crumbs a{color:rgba(255,255,255,.62);text-decoration:none;
  transition:color .18s ease;}
.sh-home .kb-crumbs a:hover{color:#fff;}

.sh-home .kb-hero__h{font-size:clamp(2.4rem,4.6vw,4.35rem);font-weight:700;
  line-height:1.02;letter-spacing:-.035em;color:#fff;}
.sh-home .kb-hero__h span{display:block;}
.sh-home .kb-hero__h-accent{color:#3fc07a;}

.sh-home .kb-hero__sub{max-width:30em;margin-top:clamp(16px,1.8vw,24px);
  font-size:clamp(.95rem,1.12vw,1.06rem);line-height:1.55;color:rgba(255,255,255,.78);}

/* ----- выбор направления ----- */
.sh-home .kb-pick{margin-top:clamp(26px,3.4vw,46px);}
.sh-home .kb-pick__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62);}

/* Пять направлений в сегментированном блоке. Раскладка 3+2 задана явно
   (6 колонок, первые три по 2, последние две по 3), а не отдана переносу:
   flex-wrap оставлял в конце второй строки пустой тёмный хвост шириной
   в три чипа, и блок читался как недогруженный. */
.sh-home .kb-pick__row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;margin-top:14px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);
  overflow:hidden;max-width:100%;}
.sh-home .kb-chip:nth-child(-n+3){grid-column:span 2;}
.sh-home .kb-chip:nth-child(n+4){grid-column:span 3;}

.sh-home .kb-chip{display:flex;align-items:center;gap:9px;margin:0;min-width:0;
  padding:13px clamp(10px,1.1vw,16px);background:var(--kb-dark);cursor:pointer;
  font-size:.85rem;font-weight:500;line-height:1.2;color:rgba(255,255,255,.8);
  transition:background .18s var(--ease,ease),color .18s var(--ease,ease);}
.sh-home .kb-chip__t{min-width:0;overflow-wrap:anywhere;}
.sh-home .kb-chip .kb-ico{width:20px;height:20px;opacity:.75;}
.sh-home .kb-chip:hover{background:#17415f;color:#fff;}

/* Активный чип и его выдача. Радиокнопки стоят выше секции, поэтому достаём
   их через `~ .kb-hero` и дальше обычным вложением. */
.sh-home.kb-page .kb-radio#kb-dir-plitka:checked ~ .kb-hero .kb-chip[for="kb-dir-plitka"],
.sh-home.kb-page .kb-radio#kb-dir-vodootvod:checked ~ .kb-hero .kb-chip[for="kb-dir-vodootvod"],
.sh-home.kb-page .kb-radio#kb-dir-bordyury:checked ~ .kb-hero .kb-chip[for="kb-dir-bordyury"],
.sh-home.kb-page .kb-radio#kb-dir-nastily:checked ~ .kb-hero .kb-chip[for="kb-dir-nastily"],
.sh-home.kb-page .kb-radio#kb-dir-gryazezashchita:checked ~ .kb-hero .kb-chip[for="kb-dir-gryazezashchita"]{
  background:var(--green);color:#fff;}
.sh-home.kb-page .kb-radio#kb-dir-plitka:checked ~ .kb-hero .kb-chip[for="kb-dir-plitka"] .kb-ico,
.sh-home.kb-page .kb-radio#kb-dir-vodootvod:checked ~ .kb-hero .kb-chip[for="kb-dir-vodootvod"] .kb-ico,
.sh-home.kb-page .kb-radio#kb-dir-bordyury:checked ~ .kb-hero .kb-chip[for="kb-dir-bordyury"] .kb-ico,
.sh-home.kb-page .kb-radio#kb-dir-nastily:checked ~ .kb-hero .kb-chip[for="kb-dir-nastily"] .kb-ico,
.sh-home.kb-page .kb-radio#kb-dir-gryazezashchita:checked ~ .kb-hero .kb-chip[for="kb-dir-gryazezashchita"] .kb-ico{opacity:1;}

/* Клавиатура: radiogroup переключается стрелками, но сама кнопка невидима —
   рамку фокуса рисуем на её подписи. */
.sh-home.kb-page .kb-radio#kb-dir-plitka:focus-visible ~ .kb-hero .kb-chip[for="kb-dir-plitka"],
.sh-home.kb-page .kb-radio#kb-dir-vodootvod:focus-visible ~ .kb-hero .kb-chip[for="kb-dir-vodootvod"],
.sh-home.kb-page .kb-radio#kb-dir-bordyury:focus-visible ~ .kb-hero .kb-chip[for="kb-dir-bordyury"],
.sh-home.kb-page .kb-radio#kb-dir-nastily:focus-visible ~ .kb-hero .kb-chip[for="kb-dir-nastily"],
.sh-home.kb-page .kb-radio#kb-dir-gryazezashchita:focus-visible ~ .kb-hero .kb-chip[for="kb-dir-gryazezashchita"]{
  outline:2px solid #fff;outline-offset:-2px;}

/* Выдача по направлению: все пять в разметке, видима одна. */
.sh-home .kb-out{display:none;flex-wrap:wrap;align-items:center;gap:10px 26px;
  margin-top:18px;}
.sh-home.kb-page .kb-radio#kb-dir-plitka:checked ~ .kb-hero .kb-out[data-dir="plitka"],
.sh-home.kb-page .kb-radio#kb-dir-vodootvod:checked ~ .kb-hero .kb-out[data-dir="vodootvod"],
.sh-home.kb-page .kb-radio#kb-dir-bordyury:checked ~ .kb-hero .kb-out[data-dir="bordyury"],
.sh-home.kb-page .kb-radio#kb-dir-nastily:checked ~ .kb-hero .kb-out[data-dir="nastily"],
.sh-home.kb-page .kb-radio#kb-dir-gryazezashchita:checked ~ .kb-hero .kb-out[data-dir="gryazezashchita"]{display:flex;}

.sh-home .kb-out__item{display:inline-flex;align-items:center;gap:9px;
  font-size:.9rem;line-height:1.35;color:rgba(255,255,255,.86);
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.26);padding-bottom:2px;
  transition:color .18s ease,border-color .18s ease;}
.sh-home .kb-out__item .kb-ico{width:18px;height:18px;color:#3fc07a;}
.sh-home .kb-out__item:hover{color:#fff;border-color:#3fc07a;}
.sh-home .kb-out__item--wide{max-width:34em;}

/* =============================================================================
   2. ТРИ ПЛИТЫ
   ============================================================================= */

/* Полоса белая: у всех плит выемка слева и остриё справа, поэтому по краям
   ленты и в стыках просвечивает фон — тёмный читался бы как дыры. */
.sh-home .kb-plates{background:#fff;}

/* Лента без внешних отступов и без зазоров: плиты стыкуются шевронами, и любой
   зазор между ними немедленно читается как ошибка вёрстки. Смыкание даёт
   отрицательный margin, равный длине шеврона. */
.sh-home .kb-plates__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.sh-home .kb-plates__row--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.sh-home .kb-plates__row--1{grid-template-columns:minmax(0,1fr);}

/*
 * КОНТУР ПЛИТЫ. Три вещи, которые нельзя было сделать «в лоб»:
 *
 * 1. Белая окаймовка. У clip-path нет обводки — border клипается вместе с
 *    фоном. Поэтому цвет плиты уехал на подложку ::before, вставленную внутрь
 *    на --kb-edge, а сама плита стала белой: видимый белый кант и есть эта
 *    щель. Обе фигуры клипуются ОДНИМ контуром --kb-clip, иначе кант «поплыл»
 *    бы на шевроне.
 * 2. Скруглённое остриё. Точки многоугольника острые по определению, поэтому
 *    вершина заменена короткой фаской из четырёх точек (--kb-tip): на глаз
 *    это лёгкое скругление, а не срез.
 * 3. Выемка соседней плиты построена ТЕМИ ЖЕ отступами (--kb-notch). Если
 *    остриё скруглить, а выемку оставить острой, между ними вылезет тёмный
 *    серп фона секции.
 */
.sh-home .kb-plates{--kb-edge:2px;}
.sh-home .kb-plates__row{
  --kb-tip:
    calc(100% - 3.4px) calc(50% - 9.4px),
    calc(100% - .9px)  calc(50% - 3.6px),
    100% calc(50% - .6px),
    100% calc(50% + .6px),
    calc(100% - .9px)  calc(50% + 3.6px),
    calc(100% - 3.4px) calc(50% + 9.4px);
  --kb-notch:
    calc(var(--kb-chev) - 3.4px) calc(50% + 9.4px),
    calc(var(--kb-chev) - .9px)  calc(50% + 3.6px),
    var(--kb-chev) calc(50% + .6px),
    var(--kb-chev) calc(50% - .6px),
    calc(var(--kb-chev) - .9px)  calc(50% - 3.6px),
    calc(var(--kb-chev) - 3.4px) calc(50% - 9.4px);
}

.sh-home .kb-plate{position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;background:#fff;text-decoration:none;
  min-height:clamp(168px,15vw,206px);
  padding:clamp(24px,2.4vw,34px) clamp(22px,2.6vw,40px);
  padding-right:calc(var(--kb-chev) + clamp(46px,4.4vw,74px));
  /* левый отступ доопределяется ниже: в него заложена выемка */
  clip-path:var(--kb-clip);}

/* Подложка — она же цвет плиты. inset на --kb-edge со всех сторон и даёт кант. */
.sh-home .kb-plate::before{content:"";position:absolute;inset:var(--kb-edge);z-index:0;
  background:var(--kb-face);clip-path:var(--kb-clip);}

/* Фигура ОДНА НА ВСЕ плиты: выемка слева + остриё справа. Ни первая, ни
   последняя не «обрубаются» — три одинаковые стрелки читаются рядом, а любая
   плита с другим силуэтом выпадала из ряда.
   Отрицательный отступ — только у соседей: он сцепляет остриё предыдущей
   плиты с выемкой следующей. Первой сцепляться не с чем. */
.sh-home .kb-plate{
  --kb-clip:polygon(0 0, calc(100% - var(--kb-chev)) 0, var(--kb-tip),
    calc(100% - var(--kb-chev)) 100%, 0 100%, var(--kb-notch));
  padding-left:calc(var(--kb-chev) + clamp(22px,2.6vw,40px));}
.sh-home .kb-plate:not(:first-child){margin-left:calc(var(--kb-chev) * -1);}

/* Порядок наложения: левая плита поверх правой, иначе её остриё вместе с
   кантом окажется под соседкой и шеврон исчезнет. */
.sh-home .kb-plate:nth-child(1){z-index:3;}
.sh-home .kb-plate:nth-child(2){z-index:2;}
.sh-home .kb-plate:nth-child(3){z-index:1;}

/* Плита — ссылка, значит нужен видимый фокус. Обводку рисуем внутрь: снаружи
   её срезал бы clip-path. */
.sh-home .kb-plate:focus-visible{outline:none;}
.sh-home .kb-plate:focus-visible::after{content:"";position:absolute;inset:4px;z-index:4;
  border:2px solid currentColor;opacity:.85;pointer-events:none;}

.sh-home .kb-plate--green{--kb-face:var(--green);color:#fff;}
.sh-home .kb-plate--dark{--kb-face:var(--kb-dark);color:#fff;}
.sh-home .kb-plate--light{--kb-face:#f2f5f3;color:var(--ink);}

.sh-home .kb-plate__body{position:relative;z-index:2;display:block;min-width:0;
  max-width:min(100%,18.5em);}

.sh-home .kb-plate__no{display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;
  color:currentColor;opacity:.72;}
.sh-home .kb-plate__no::after{content:"";width:clamp(22px,2.4vw,38px);height:1px;
  background:currentColor;opacity:.5;}

.sh-home .kb-plate__t{display:block;margin-top:10px;
  font-size:clamp(1.28rem,1.85vw,1.72rem);
  font-weight:700;line-height:1.16;letter-spacing:-.015em;color:inherit;}

.sh-home .kb-plate__d{display:block;margin-top:9px;font-size:.92rem;line-height:1.5;
  color:inherit;opacity:.82;}
.sh-home .kb-plate__meta{display:block;margin-top:11px;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;opacity:.66;}

/* Водяная иконка — крупный контур в правой части плиты. */
.sh-home .kb-plate__mark{position:absolute;z-index:1;top:50%;
  right:calc(var(--kb-chev) + clamp(8px,1vw,18px));transform:translateY(-50%);
  pointer-events:none;opacity:.13;}
.sh-home .kb-plate__mark .kb-ico{width:clamp(124px,12.5vw,176px);height:auto;stroke-width:.9;}
.sh-home .kb-plate--light .kb-plate__mark{opacity:.1;}

.sh-home .kb-plate__go{position:absolute;z-index:2;left:clamp(22px,2.6vw,40px);
  bottom:clamp(22px,2.4vw,32px);
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  transition:transform .22s ease,background .22s ease;}
.sh-home .kb-plate:not(:first-child) .kb-plate__go{left:calc(var(--kb-chev) + clamp(22px,2.6vw,40px));}
.sh-home .kb-plate__go .kb-ico{width:20px;height:20px;}
.sh-home .kb-plate--green .kb-plate__go{background:#fff;color:var(--green);}
.sh-home .kb-plate--dark .kb-plate__go{background:var(--green);color:#fff;}
.sh-home .kb-plate--light .kb-plate__go{background:var(--green);color:#fff;}
.sh-home .kb-plate:hover .kb-plate__go{transform:translateX(5px);}

/* Кнопка стоит в левом нижнем углу — освобождаем под неё место в теле плиты. */
.sh-home .kb-plate__body{padding-bottom:52px;}

/* =============================================================================
   3. МАРШРУТ «НАЧНИТЕ С ЗАДАЧИ»
   ============================================================================= */

.sh-home .kb-route{position:relative;background:var(--ground);
  padding-block:clamp(48px,6vw,86px);}
/* Завершающий цоколь — тот же, что закрывает «О компании» (about.css, .sa-proof::after):
   отделяет белый контент от белого футера. Это граница страницы, а не ещё одна
   секция, поэтому ни текста, ни иконок — тонкая фирменная линия и спокойный тинт. */
.sh-home .kb-route::after{content:"";position:absolute;left:0;right:0;bottom:0;height:28px;
  background:linear-gradient(to bottom,var(--green) 0 3px,var(--ground-2) 3px 100%);}
.sh-home .kb-route__grid{display:grid;
  grid-template-columns:minmax(200px,.72fr) minmax(0,2.5fr) minmax(268px,.92fr);
  gap:clamp(28px,3.6vw,60px);align-items:flex-start;}

.sh-home .kb-route__h{font-size:clamp(1.75rem,2.9vw,2.6rem);font-weight:700;
  line-height:1.08;letter-spacing:-.03em;}
.sh-home .kb-route__h::after{content:"";display:block;width:52px;height:3px;
  margin-top:18px;background:var(--green);}
.sh-home .kb-route__lead{margin-top:20px;font-size:.95rem;line-height:1.55;color:var(--text);}

/* Размер кружка и зазор колонок — переменные, потому что по ним считается
   положение стрелки-разделителя. Разъедутся значения — разъедется и стрелка. */
.sh-home .kb-route__steps{--kb-step-icon:clamp(56px,5vw,68px);
  --kb-step-gap:clamp(14px,1.8vw,26px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--kb-step-gap);}
.sh-home .kb-step{position:relative;min-width:0;}
.sh-home .kb-step__icon{display:grid;place-items:center;
  width:var(--kb-step-icon);height:var(--kb-step-icon);
  border-radius:50%;background:var(--kb-mint);color:var(--green);}
.sh-home .kb-step__icon .kb-ico{width:28px;height:28px;}

/*
 * Стрелка-разделитель — ровно посередине между ДВУМЯ КРУЖКАМИ, а не по границе
 * колонки. Разница большая: кружок прижат к левому краю своей колонки, колонка
 * заметно шире кружка, и стрелка «по границе» вставала вплотную к следующему
 * кружку, а от предыдущего оказывалась в полуколонке.
 *
 * Просвет между кружками начинается на --kb-step-icon от левого края колонки
 * и кончается на (100% + --kb-step-gap) — там левый край следующего кружка.
 * Середина просвета = полусумма. По вертикали — половина кружка.
 *
 * Поправка .354 по X: значок нарисован квадратом с двумя бордерами и повёрнут
 * на 45°, поэтому его ЧЕРНИЛА смещены от центра рамки к острию на
 * (сторона/4)·√2. Без поправки «центр» считался бы по рамке, а глаз читает
 * штрихи.
 */
.sh-home .kb-step:not(:last-child)::after{--kb-glyph:9px;
  content:"";position:absolute;
  top:calc(var(--kb-step-icon) / 2);
  left:calc((var(--kb-step-icon) + 100% + var(--kb-step-gap)) / 2);
  width:var(--kb-glyph);height:var(--kb-glyph);
  transform:translate(calc(-50% - var(--kb-glyph) * .354), -50%) rotate(45deg);
  border-top:2px solid rgba(35,38,36,.3);border-right:2px solid rgba(35,38,36,.3);}

.sh-home .kb-step__t{display:flex;align-items:baseline;gap:9px;margin-top:18px;
  font-size:.98rem;font-weight:600;line-height:1.3;color:var(--ink);}
.sh-home .kb-step__no{font-family:var(--mono);font-size:.8rem;color:var(--green);}
.sh-home .kb-step__d{margin-top:8px;font-size:.85rem;line-height:1.5;color:var(--text);}

/* ----- карточка помощи ----- */
.sh-home .kb-help{padding:clamp(24px,2.4vw,34px);background:var(--kb-mint);
  border-radius:var(--r);}
.sh-home .kb-help__h{font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:700;line-height:1.2;}
.sh-home .kb-help__d{margin-top:12px;font-size:.9rem;line-height:1.55;color:var(--text);}

.sh-home .kb-help__btn{display:block;margin-top:22px;padding:14px 20px;
  background:var(--green);border-radius:var(--r);
  font-size:.94rem;font-weight:600;line-height:1.2;text-align:center;color:#fff;
  text-decoration:none;transition:background .18s ease;}
.sh-home .kb-help__btn:hover{background:#0b6a43;color:#fff;}

.sh-home .kb-help__phones{display:flex;align-items:flex-start;gap:11px;margin-top:20px;}
.sh-home .kb-help__phones .kb-ico{width:20px;height:20px;color:var(--green);margin-top:1px;}
.sh-home .kb-help__phones span{display:grid;gap:3px;}
.sh-home .kb-help__phones a{font-size:.95rem;font-weight:600;line-height:1.4;
  color:var(--ink);text-decoration:none;}
.sh-home .kb-help__phones a:hover{color:var(--green);}

/* =============================================================================
   4. АДАПТИВ
   ============================================================================= */

/* Планшет: маршрут в две строки, карточка помощи уходит под шаги. */
@media (max-width:1200px){
  .sh-home .kb-route__grid{grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);}
  .sh-home .kb-route__head{grid-column:1/-1;}
  .sh-home .kb-hero__copy{max-width:min(60%,600px);}

  /* Четыре шага в оставшиеся ~55% ширины не влезают: заголовки шагов ломались
     на две строки и ряд переставал читаться маршрутом. Раскладываем 2×2. */
  .sh-home .kb-route__steps{grid-template-columns:repeat(2,minmax(0,1fr));
    --kb-step-gap:clamp(22px,3vw,34px);}
  .sh-home .kb-step:nth-child(2n)::after{display:none;}
}

@media (max-width:1024px){
  /*
   * СТОЛБЕЦ. Фигура плиты остаётся ДЕСКТОПНОЙ: выемка слева, остриё справа —
   * то есть каждая полоса читается той же стрелкой, и порядок 01 → 02 → 03
   * сохраняется. Разворачивать шеврон вниз оказалось нельзя: остриё стоит на
   * середине, и при 1024px это треугольник глубиной 46px и шириной в пол-экрана,
   * между содержимым плит зияла пустая полоса выше самого текста.
   *
   * Раз плиты больше не сцеплены боками, лента распадается на три отдельные
   * стрелки — и фон полосы становится БЕЛЫМ: тёмная подложка под разрозненными
   * фигурами выглядела бы как дыры в ленте.
   */
  /* Остриё и выемку в столбце ЗАОСТРЯЕМ. Фаска рассчитана на десктопную
     геометрию (плита 480×277); в столбце плита вдвое ниже и вчетверо шире, та же
     фаска в 9,4px по вертикали съедает заметную долю высоты и читается уже не
     скруглением, а тупым срезом. */
  .sh-home .kb-plates__row{
    --kb-tip:100% 50%;
    --kb-notch:var(--kb-chev) 50%;}
  .sh-home .kb-plates{--kb-gap:clamp(10px,1.6vw,16px);}
  .sh-home .kb-plates__row,
  .sh-home .kb-plates__row--2,
  .sh-home .kb-plates__row--1{grid-template-columns:minmax(0,1fr);gap:var(--kb-gap);}

  .sh-home .kb-plate{--kb-pad:clamp(18px,4vw,28px);
    min-height:0;
    padding:clamp(22px,3.4vw,30px) var(--kb-pad);
    /* по бокам освобождаем место под выемку, остриё и круглую стрелку */
    padding-left:calc(var(--kb-chev) + var(--kb-pad));
    padding-right:calc(var(--kb-chev) + var(--kb-pad) + 62px);}
  /* Сцепления боками больше нет — отрицательный отступ снимаем, иначе плиты
     наезжали бы друг на друга по горизонтали. */
  .sh-home .kb-plate:not(:first-child){margin-left:0;}
  /* У последней плиты острия нет, но правый отступ держим общий: три стрелки
     в столбце должны выравниваться по одной вертикали. */

  /* Колонка текста узкая и в столбце тоже: плита стала широкой, но строка
     длиннее ~26em превращает карточку в растянутый баннер. */
  .sh-home .kb-plate__body{max-width:min(100%,26em);padding-bottom:0;}

  .sh-home .kb-plate__go{left:auto;bottom:auto;top:50%;
    right:calc(var(--kb-chev) + var(--kb-pad));transform:translateY(-50%);}
  .sh-home .kb-plate:not(:first-child) .kb-plate__go{left:auto;}
  .sh-home .kb-plate:hover .kb-plate__go{transform:translate(5px,-50%);}

  .sh-home .kb-plate__mark{right:calc(var(--kb-chev) + var(--kb-pad) + 62px);}
  .sh-home .kb-plate__mark .kb-ico{width:clamp(96px,11vw,140px);}
}

@media (max-width:900px){
  /* Первый экран: шеврон и кадр снимаем — на узком экране плашка режет
     заголовок, а кадр в отдельной полосе под текстом только удлинял страницу
     и повторял то, что и так видно в каталоге. Остаётся тёмный блок с текстом. */
  .sh-home .kb-hero{display:flex;flex-direction:column;}
  .sh-home .kb-hero__media,
  .sh-home .kb-hero__panel,
  .sh-home .kb-hero__edge{display:none;}
  .sh-home .kb-hero__inner{background:var(--kb-dark);width:100%;}

  /* Герой отбивается от первой плиты РОВНО ТЕМ ЖЕ зазором, что и плиты между
     собой: к нему добавлен --kb-edge, потому что у плиты есть ещё белый кант
     в 2px, и без поправки первый просвет читался бы уже остальных. */
  .sh-home .kb-plates{padding-top:calc(var(--kb-gap) + var(--kb-edge));}
  .sh-home .kb-hero__copy{max-width:none;}
  .sh-home .kb-pick__row{width:auto;}
  .sh-home .kb-chip{flex:1 1 auto;justify-content:flex-start;}

  .sh-home .kb-route__grid{grid-template-columns:minmax(0,1fr);}
  .sh-home .kb-route__steps{--kb-step-gap:clamp(22px,4vw,32px);}
}

@media (max-width:700px){
  /* Плита сузилась до одной колонки текста, и водяной контур встал бы прямо
     под строками. Декор уступает читаемости. */
  .sh-home .kb-plate__mark{display:none;}
}

@media (max-width:560px){
  .sh-home .kb-hero__h{font-size:clamp(2.05rem,8.4vw,2.7rem);}
  /* Одна колонка. Строка — grid, поэтому сбрасываем span'ы раскладки 3+2,
     иначе «Тротуарная плитка» ломается на две строки в узкой ячейке. */
  .sh-home .kb-pick__row{grid-template-columns:minmax(0,1fr);width:100%;}
  .sh-home .kb-chip:nth-child(-n+3),
  .sh-home .kb-chip:nth-child(n+4){grid-column:span 1;}
  .sh-home .kb-out{gap:9px;}
  .sh-home .kb-out__item{width:100%;}
  .sh-home .kb-route__steps{grid-template-columns:minmax(0,1fr);}
  .sh-home .kb-step::after{display:none!important;}
  .sh-home .kb-step{display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:4px 16px;align-items:center;}
  .sh-home .kb-step__icon{grid-row:1/3;width:52px;height:52px;}
  .sh-home .kb-step__t{margin-top:0;align-self:flex-end;}
  .sh-home .kb-step__d{align-self:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  .sh-home .kb-plate__go,
  .sh-home .kb-chip,
  .sh-home .kb-help__btn{transition:none;}
  .sh-home .kb-plate:hover .kb-plate__go{transform:none;}
}

/* =============================================================================
   4. ТОВАРНЫЕ ПОЛОСЫ: НОВИНКИ И ХИТЫ ПРОДАЖ
   Разметка: template-parts/kb/{new,hits}.php, выборки — те же, что на главной.

   Полосы намеренно РАЗНОГО СТРОЕНИЯ, иначе две ленты подряд читаются одной
   простынёй: новинки — две горизонтальные карточки в кадре, с описанием и
   управлением в углу шапки; хиты — четыре вертикальные карточки без описания
   и с управлением под лентой. Фоном они тоже расходятся: новинки на белом, хиты на
   тинте, следом маршрут снова на белом.

   Классы свои (kb-*), а не sh-product* с главной: там карточка настроена под
   свою сетку, и любая правка здесь тут же поехала бы на главную.
   ============================================================================= */

.sh-home .kb-band{padding-block:clamp(44px,5.4vw,78px);}
.sh-home .kb-new{background:#fff;}
.sh-home .kb-hits{background:var(--ground-2);}

.sh-home .kb-band__head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(18px,3vw,40px);flex-wrap:wrap;margin-bottom:clamp(26px,3vw,42px);}
.sh-home .kb-band__title{min-width:0;}
.sh-home .kb-band__h{font-size:clamp(1.7rem,2.8vw,2.5rem);font-weight:700;
  line-height:1.06;letter-spacing:-.03em;}
/* Счётчик страниц. Своя переменная вместо .sh-offer-count: у того margin-left:auto,
   и в шапке он утаскивал бы себя к правому краю, отрываясь от стрелок. */
.sh-home .kb-band__count{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--text);font-variant-numeric:tabular-nums;}

/* Стрелки в углу шапки — отличие полосы новинок от всех остальных лент сайта. */
.sh-home .kb-band__nav{display:flex;align-items:center;gap:12px;flex:none;}
.sh-home .kb-band__nav .sh-offer-nav{width:46px;height:46px;}

/* Управление под лентой (хиты). */
.sh-home .kb-band__controls{display:flex;align-items:center;gap:16px;margin-top:26px;
  flex-wrap:wrap;}
.sh-home .kb-band__controls .kb-band__count{margin-left:auto;}
/* Полоса на тинте: белый кант кнопок и точек на #f1f7f3 почти не виден. */
.sh-home .kb-hits .sh-offer-dot{background:rgba(35,38,36,.2);}
.sh-home .kb-hits .sh-offer-dot[aria-current="true"]{background:var(--green);}

/* ----- лента ----- */
/* overflow:hidden режет по краю паддинг-бокса, поэтому место под ховер карточки
   (подъём 4px и тень под ней) даём паддингом, а ритм возвращаем отрицательным
   margin. По горизонтали паддинга нет: vp.clientWidth участвует в расчёте
   свайпа (home.js). */
.sh-home .kb-new__vp,
.sh-home .kb-hits__vp{overflow:hidden;padding:6px 0 18px;margin:-6px 0 -18px;}
.sh-home .kb-new__track,
.sh-home .kb-hits__track{display:flex;margin-inline:-7px;
  transition:transform .6s var(--ease);will-change:transform;}
.sh-home .kb-band__box.sh-dragging .kb-new__track,
.sh-home .kb-hits__slider.sh-dragging .kb-hits__track{transition:none;}
/* --sh-pv выставляет движок (home.js). Значения ниже — раскладка без JS и до
   его инициализации, поэтому они обязаны совпадать с data-per-view шаблонов. */
.sh-home .kb-new__item,
.sh-home .kb-hits__item{flex:0 0 calc(100% / var(--sh-pv));min-width:0;
  padding-inline:7px;display:flex;}

.sh-home .kb-new .kb-band__box{--sh-pv:2;}
.sh-home .kb-hits__slider{--sh-pv:4;position:relative;}

/* =============== 4.1 НОВИНКИ: горизонтальная карточка =============== */

.sh-home .kb-new__card{flex:1 1 auto;display:grid;
  grid-template-columns:clamp(170px,32%,264px) minmax(0,1fr);
  align-items:stretch;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);}
.sh-home .kb-new__card:hover{transform:translateY(-4px);border-color:rgba(14,126,80,.4);
  box-shadow:0 22px 46px -26px rgba(16,26,21,.45);}

/* aspect-ratio обязательна: без неё высоту колонки задаёт текст справа, кадр
   выходит низким, а вписанный по contain packshot — крошечным (проверено
   рендером: у «Сити 300х300» фото было втрое меньше плашки). */
.sh-home .kb-new__media{position:relative;aspect-ratio:1/1;background:var(--ground-2);
  border-right:1px solid var(--line);}
.sh-home .kb-new__media .sh-ph{position:absolute;inset:0;border:0;border-radius:0;
  background:none;display:flex;align-items:center;justify-content:center;padding:12px;}
.sh-home .kb-new__media .sh-ph::before,
.sh-home .kb-new__media .sh-ph::after{content:none;}
/* Packshot вписываем целиком: у товаров разная пропорция, кроп режет трапеции. */
.sh-home .kb-new__media .sh-ph__img{width:100%;height:100%;object-fit:contain;}

/* Шильдик «Новинка». Скидки тут больше нет — процент ушёл крупной цифрой
   в правый угол (.sh-sale-no в home.css), углы больше не конкурируют. */
.sh-home .kb-new__badge{position:absolute;top:10px;left:10px;z-index:2;
  font-family:var(--mono);font-size:.6rem;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 9px;border-radius:6px;
  background:#fff;color:var(--green);border:1px solid var(--line);}

.sh-home .kb-new__body{display:flex;flex-direction:column;min-width:0;
  padding:clamp(16px,1.7vw,24px);}
.sh-home .kb-new__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);}
.sh-home .kb-new__stock{display:inline-flex;align-items:center;gap:6px;color:var(--green);}
.sh-home .kb-new__stock::before{content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;}
.sh-home .kb-new__t{margin-top:10px;font-size:clamp(1rem,1.25vw,1.16rem);font-weight:600;
  line-height:1.26;letter-spacing:-.01em;color:var(--ink);}
/* Описание строго в две строки: у товаров оно от 600 до 1000 знаков, и без
   клампа карточки в одном кадре разъезжались бы по высоте. */
.sh-home .kb-new__d{margin-top:10px;font-size:.86rem;line-height:1.5;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;}

.sh-home .kb-new__foot{margin-top:auto;padding-top:18px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:14px;}
.sh-home .kb-new__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  font-weight:700;font-size:clamp(1.12rem,1.5vw,1.34rem);letter-spacing:-.01em;
  color:var(--green);font-variant-numeric:tabular-nums;}
.sh-home .kb-new__price s{font-weight:500;font-size:.9rem;color:#a7aca7;}
.sh-home .kb-new__price small{flex-basis:100%;font-family:var(--mono);font-weight:500;
  font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text);}

.sh-home .kb-new__go{flex:none;display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;border:1.5px solid var(--line);color:var(--green);
  transition:background .25s var(--ease),color .25s var(--ease),
    border-color .25s var(--ease),transform .25s var(--ease);}
.sh-home .kb-new__go .kb-ico{width:20px;height:20px;}
.sh-home .kb-new__card:hover .kb-new__go{background:var(--green);color:#fff;
  border-color:var(--green);transform:translateX(3px);}

/* =============== 4.2 ХИТЫ: вертикальная карточка =============== */

.sh-home .kb-hit{flex:1 1 auto;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);}
.sh-home .kb-hit:hover{transform:translateY(-4px);border-color:rgba(14,126,80,.4);
  box-shadow:0 22px 46px -26px rgba(16,26,21,.45);}

.sh-home .kb-hit__media{position:relative;aspect-ratio:1/1;background:#fff;}
.sh-home .kb-hit__media .sh-ph{position:absolute;inset:0;border:0;border-radius:0;
  background:none;display:flex;align-items:center;justify-content:center;padding:14px;}
.sh-home .kb-hit__media .sh-ph::before,
.sh-home .kb-hit__media .sh-ph::after{content:none;}
.sh-home .kb-hit__media .sh-ph__img{width:100%;height:100%;object-fit:contain;}

.sh-home .kb-hit__body{display:flex;flex-direction:column;flex:1;
  padding:16px clamp(14px,1.2vw,18px) clamp(14px,1.2vw,18px);
  border-top:1px solid var(--line-2);}
.sh-home .kb-hit__cat{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text);}
.sh-home .kb-hit__t{margin-top:9px;font-size:1rem;font-weight:600;line-height:1.24;
  letter-spacing:-.01em;color:var(--ink);}
.sh-home .kb-hit__foot{margin-top:auto;padding-top:16px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:12px;}
.sh-home .kb-hit__price{font-weight:700;font-size:1.1rem;letter-spacing:-.01em;
  color:var(--green);font-variant-numeric:tabular-nums;}
/* Цена до скидки. Стоит рядом с новой, а не под ней: строка единицы (<small>)
   уже занимает вторую строку блока. */
.sh-home .kb-hit__price s{margin-left:8px;font-weight:500;font-size:.84rem;
  color:#a7aca7;}
.sh-home .kb-hit__price small{display:block;font-family:var(--mono);font-weight:500;
  font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text);}
.sh-home .kb-hit__go{flex:none;display:grid;place-items:center;width:40px;height:40px;
  border-radius:50%;border:1.5px solid var(--line);color:var(--green);
  transition:background .25s var(--ease),color .25s var(--ease),
    border-color .25s var(--ease),transform .25s var(--ease);}
.sh-home .kb-hit__go .kb-ico{width:18px;height:18px;}
.sh-home .kb-hit:hover .kb-hit__go{background:var(--green);color:#fff;
  border-color:var(--green);transform:translateX(3px);}

/* ----- адаптив товарных полос -----
   Ступени те же, что зашиты в perView() движка (1080 и 640): раскладка без JS
   обязана совпадать с тем, что скрипт выставит в --sh-pv. */
@media (max-width:1080px){
  .sh-home .kb-new .kb-band__box{--sh-pv:1;}
  .sh-home .kb-hits__slider{--sh-pv:2;}
  /* Карточек в кадре стало меньше — каждая шире, и КВАДРАТНЫЙ кадр начинает
     задавать высоту всей карточке: у новинки при 992px он вырастал до 317px и
     между описанием и ценой зияла пустая треть, у хита — до 490px, и товар
     занимал экран целиком. Высоту кадра здесь держим отдельно от ширины. */
  .sh-home .kb-new__card{grid-template-columns:clamp(160px,30%,240px) minmax(0,1fr);}
  .sh-home .kb-new__media{aspect-ratio:4/3;}
  .sh-home .kb-hit__media{aspect-ratio:auto;height:min(46vw,300px);}
}
@media (max-width:640px){
  .sh-home .kb-hits__slider{--sh-pv:1;}
  /* Карточка одна в кадре и во всю ширину: кадр в 46vw (правило выше) оставлял
     товар в узкой полоске посреди пустоты — возвращаем ему высоту. */
  .sh-home .kb-hit__media{height:min(72vw,300px);}
  /* Карточка новинки в одну колонку: при ширине экрана ~390px левая колонка
     в 150px съедала половину карточки, и название ломалось по слогам. */
  .sh-home .kb-new__card{grid-template-columns:minmax(0,1fr);}
  .sh-home .kb-new__media{aspect-ratio:4/3;border-right:0;
    border-bottom:1px solid var(--line);}
  /* Шапка: заголовок и стрелки в столбец — рядом они не помещаются. */
  .sh-home .kb-band__head{align-items:flex-start;}
}

@media (prefers-reduced-motion:reduce){
  .sh-home .kb-new__card,
  .sh-home .kb-hit,
  .sh-home .kb-new__go,
  .sh-home .kb-hit__go{transition:none;}
  .sh-home .kb-new__card:hover,
  .sh-home .kb-hit:hover{transform:none;}
  .sh-home .kb-new__card:hover .kb-new__go,
  .sh-home .kb-hit:hover .kb-hit__go{transform:none;}
}