/* Берлион СкладТех — тема «графит + оранжевый + белый» (владелец, 20.09.2026).

   Зачем: у Берлион Металл (berlion.ru) тот же белый с синим, посетители путали сайты.
   Решение владельца: контент остается светлым (фото товаров лежат на белом без альфы),
   графит — шапка, подвал, первый экран главной, блоки подбора и заявки, липкая панель;
   оранжевый — действие.

   Два оранжевых, и это не случайность:
   --accent      #DD5A0E  заливка главных кнопок, текст на ней белый. Выбран владельцем 20.09.2026
                          из пяти вариантов на /new/cveta/ («Вариант 3»): глубокие #CE4A09 и #C24A10,
                          на которых белый проходит норму 4,5:1, на белом фоне выглядели «грязновато».
                          Белый на #DD5A0E — 3,8:1: ниже нормы для мелкого текста, решение владельца;
                          текст кнопок поэтому не мельче 15px и полужирный. Так же поступают
                          Toyota Forklifts, STILL, Hitachi (3,1–3,6:1). История:
                          #FF6A13 владелец назвал слишком ярким; графитовый текст на оранжевой
                          кнопке ему тоже не понравился (20.09.2026). Белый текст проходит норму
                          только на глубоком оранжевом — это самый яркий тон 20°, где белый дает
                          4,5:1. Под курсором кнопка темнеет, а не светлеет (STIHL, Timken).
   --accent-mark          тот же #DD5A0E — знак логотипа, значки и кольцо фокуса на графите (4,5:1).
   --primary     #C94F08  оранжевый «чернилами»: ссылки и мелкие акценты текстом. 4,6:1 на белом —
                          самый чистый тон, который еще проходит норму для текста.
   Графит и серые — теплые нейтральные (образец — STILL, #21231E): рядом с оранжевым
   холодный сине-серый выглядит дешевле; заодно это дальше от slate-шкалы Берлион Металл. */

:root {
  --accent: #DD5A0E;
  --accent-hover: #C8500C;
  --accent-press: #B5470A;
  --on-accent: #FFFFFF;
  --accent-mark: #DD5A0E;      /* знак, значки и кольцо фокуса на графите: там заливочный темноват */

  --primary: #C94F08;
  --primary-dark: #AD4206;
  --primary-light: #FFF1E7;
  --primary-glow: rgba(221, 90, 14, .26);
  --shadow-glow: 0 0 40px rgba(221, 90, 14, .12);

  --graphite-950: #131413;
  --graphite-900: #1B1C1B;
  --graphite-800: #222322;
  --graphite-700: #2D2E2C;
  --graphite-line: #3A3B38;
  --graphite-line-2: #50514D;  /* рамка под курсором */
  --graphite-line-3: #71736D;  /* контур кнопки на графите, 3,6:1 к плоскости */
  --accent-ring: rgba(221, 90, 14, .35);
  /* Крупная цифра шага — новая роль типографики («Как мы работаем»): светлая, журнальная */
  --hm-numeral: clamp(3rem, 2rem + 2.2vw, 4.25rem);
  --hm-numeral-sm: 2.75rem;

  --sel: #EFEFEC;
  --sel-orange-line: #F0B48A;  /* рамка выбранного исполнения на светло-оранжевой подложке */
  --sel-line: #A9A8A2;         /* рамка «выбрано»: средне-серая, не черная */
  --btn-tone: #EDECE8;         /* заливка второй кнопки */
  --btn-tone-hover: #E2E1DC;
  --sel-text: #FFD9BF;          /* выделение текста мышью */
  --graphite-veil: rgba(27, 28, 27, .55);   /* графит поверх фото: затемнение героя, подложка чипов */
  --graphite-glass: rgba(27, 28, 27, .96);  /* прокрученная шапка и липкая панель */
  --on-graphite: #F5F5F3;
  --on-graphite-2: #BAB9B4;   /* 8,9:1 на graphite-900 */
  --on-graphite-3: #93928C;   /* 5,4:1 */

  --dark: #1B1C1B;
  --dark-800: #222322;
  --dark-700: #33342F;
  --dark-600: #4A4B46;
  --gray-100: #F6F6F5;
  --gray-200: #E6E5E2;
  --gray-300: #D0CFCB;
  --gray-400: #74746E;  /* им набраны подписи и плейсхолдеры: 4,5:1 на белом */
  --gray-500: #64645E;
  --page-bg: #F4F4F2;

  /* Поверхности: карточка, категория, главная, сервисные, каталог, заказ */
  --pc-ink: #1B1C1B;  --pc-ink-2: #45463F;  --pc-ink-3: #66665F;
  --cl-ink: #1B1C1B;  --cl-ink-2: #45463F;  --cl-ink-3: #66665F;
  --hm-ink: #1B1C1B;  --hm-ink-2: #45463F;  --hm-ink-3: #66665F;
  --ip-ink: #1B1C1B;  --ip-ink-2: #45463F;  --ip-ink-3: #66665F;
  --kt-ink: #1B1C1B;  --kt-ink-2: #45463F;  --kt-ink-3: #66665F;
  --ck-ink: #1B1C1B;  --ck-ink-2: #45463F;  --ck-ink-3: #66665F;

  --pc-rule: #E5E4E1; --pc-rule-2: #D1D0CC; --pc-well: #F5F5F3;
  --cl-rule: #E5E4E1; --cl-rule-2: #D1D0CC; --cl-well: #F5F5F3;
  --hm-rule: #E5E4E1; --hm-rule-2: #D1D0CC; --hm-well: #F5F5F3;
  --ip-rule: #E5E4E1; --ip-rule-2: #D1D0CC; --ip-well: #F5F5F3;
  --kt-rule: #E5E4E1; --kt-rule-2: #D1D0CC; --kt-well: #F5F5F3;
  --ck-rule: #E5E4E1; --ck-rule-2: #D1D0CC; --ck-well: #F5F5F3;

  /* «Выбрано» — нейтральное: серая подложка и графитовая рамка (владелец, 20.09.2026, по
     разбору impeccable). Раньше стояла теплая оранжевая бумага, и у оранжевого выходило три
     роли — действие, ссылка и «выбрано». Теперь оранжевый означает только действие и ссылку. */
  --pc-sky: #EFEFEC;  --pc-sky-line: #A9A8A2;
  --cl-sky: #EFEFEC;  --cl-sky-line: #A9A8A2;
  --hm-sky: #EFEFEC;  --hm-sky-line: #A9A8A2;
  --ip-sky: #EFEFEC;  --ip-sky-line: #A9A8A2;
  --kt-sky: #EFEFEC;  --kt-sky-line: #A9A8A2;
  --ck-sky: #EFEFEC;  --ck-sky-line: #A9A8A2;

  --pc-graphite: #1B1C1B;
  --hm-on-blue: #BAB9B4;
  --kt-on-blue: #BAB9B4;
}

::selection { background: var(--sel-text); color: var(--graphite-900); }

/* ------------------------------------------------------------------ шапка */

.header-top {
  background: var(--graphite-950);
  color: var(--on-graphite-3);
  border-bottom: 1px solid var(--graphite-line);
}
.header-top .header-contact-item,
.header-top .header-schedule,
.header-top .header-mail__link,
.header-topnav__link { color: var(--on-graphite-2); }
.header-topnav__link.is-current { color: var(--on-graphite); }
.header-topnav__link:hover, .header-topnav__link:focus-visible,
.header-top a.header-mail__link:hover, .header-top a.header-mail__link:focus-visible,
button.header-geo:hover, button.header-geo:focus-visible {
  background: var(--graphite-700);
  color: var(--on-graphite);
}
.header-geo { color: var(--on-graphite); }
.header-geo svg,
.header-top a.header-mail__link:hover svg, .header-top a.header-mail__link:focus-visible svg,
.header-top a.header-mail__link:hover .header-tg__icon--mask,
.header-top a.header-mail__link:focus-visible .header-tg__icon--mask,
button.header-geo:hover .header-geo__chev { color: var(--accent-mark); }
.header-geo__chev { color: var(--on-graphite-3); }
.header-top__sep,
.header-geo:not([hidden]) + .header-delivery::before { background: var(--graphite-line); }

.header-main { background: var(--graphite-900); }
.header.scrolled {
  background: var(--graphite-glass);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 12px 28px -12px rgba(0, 0, 0, .55);
}
.header.scrolled .header-main { background: transparent; }
.logo { color: var(--on-graphite); }
.header-tagline { color: var(--on-graphite-3); }
.phone-number, .header-actions .phone-number { color: var(--on-graphite); }
.header-phone__call { color: var(--on-graphite); }
.header-phone__call:hover { color: var(--accent-mark); }
.header-phone__call svg, .header-phone__icon { color: var(--accent-mark); }
.burger span { background: var(--on-graphite); }

/* «Каталог» стоит в шапке каждой страницы. Оранжевым он спорил с главным действием
   самой страницы («В корзину», «Найти»): правило одного главного действия на экран.
   Поэтому кнопка светлая на графите, оранжевый у нее только значок. */
.hcat-btn { background: var(--on-graphite); color: var(--graphite-900); }
.hcat-btn .hcat-btn__icon, .hcat-btn .hcat-btn__grid { color: var(--primary); }
.hcat-btn:hover, .hcat-btn[aria-expanded="true"] { background: #fff; color: var(--graphite-900); }

.hsearch__box { border-color: transparent; background: #fff; }
.hsearch__box:focus-within { border-color: var(--accent-mark); box-shadow: 0 0 0 3px var(--accent-ring); }
/* На телефоне поле стоит в бумажном меню бургера, а не на графите: рамка нужна */
@media (max-width: 768px) { .hsearch__box:not(:focus-within) { border-color: #D1D0CC; } }
.hsearch__scope-opt svg { color: var(--primary); }
.hsearch__scope-opt[aria-checked="true"] { background: var(--sel); color: var(--primary); }
.hsearch__item:hover, .hsearch__item.is-active, .psearch__item:hover,
.hsearch__all:hover, .hsearch__all.is-active { background: var(--sel); }

.cart-btn, .hcmp-btn {
  border: 1px solid var(--graphite-line);
  background: var(--graphite-800);
  color: var(--on-graphite);
}
.cart-btn:hover, .hcmp-btn:hover, .hcmp-btn[aria-expanded="true"] {
  border-color: var(--graphite-line-2);
  background: var(--graphite-700);
  color: var(--on-graphite);
}
.cart-btn--pulse { border-color: var(--accent-mark); color: var(--accent-mark); }
.cart-count, .hcmp-count { background: var(--accent); color: var(--on-accent); }

.header a:focus-visible, .header button:focus-visible { outline-color: var(--accent-mark); }

/* Панели, которые выпадают из шапки, остаются бумажными: в них фото товаров */
.hcat-panel { border-top: 3px solid var(--accent-mark); box-shadow: 0 24px 48px -12px rgba(19, 20, 19, .28); }
.hcat-sec__title:hover, .hcat-sec__title[aria-current], .hcat-promo:hover b { color: var(--primary); }

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

.footer { background: var(--graphite-900); color: var(--on-graphite-2); }
.footer-brand p, .footer-col a, .footer-address, .footer-schedule, .footer-bottom a { color: var(--on-graphite-2); }
.footer-col a:hover, .footer-bottom a:hover { color: var(--accent-mark); }
.footer-bottom { border-top-color: var(--graphite-line); color: var(--on-graphite-3); }
.logo-img--footer { filter: none; }

/* ------------------------------------------------------------------ общие кнопки действия
   Главное действие — глубокая оранжевая заливка с белым текстом. */

.pc-btn--primary, .cl-btn--primary, .hm-btn--primary, .hm a.hm-btn--primary,
.geo-ask__yes,
.psearch .cl-btn, .psearch__none .cl-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.pc-btn--primary:hover, .cl-btn--primary:hover, .hm-btn--primary:hover, .hm a.hm-btn--primary:hover,
.geo-ask__yes:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}
.pc-btn--primary:active, .cl-btn--primary:active, .hm-btn--primary:active { background: var(--accent-press); }

/* В листинге кнопок «В корзину» двадцать четыре на экран: оранжевая на каждой плитке
   превращала акцент в фон. В покое кнопка графитовая, оранжевой становится под курсором —
   оранжевый остается за одним главным действием страницы. */
.cl-item__cart { background: var(--graphite-900); color: #fff; }
.cl-item__cart:hover { background: var(--accent); color: var(--on-accent); }

/* Второе действие — тональная кнопка: серая заливка без обводки, графитовый текст
   (владелец, 20.09.2026: черная обводка кнопок не нравится). Рядом с оранжевой она читается
   как «тоже кнопка, но тише»; под курсором заливка темнеет на тон. */
.pc-btn--ghost, .cl-btn--ghost, .hm-btn--ghost, .hm a.hm-btn--ghost {
  background: var(--btn-tone);
  border-color: transparent;
  color: var(--graphite-900);
}
.pc-btn--ghost:hover, .cl-btn--ghost:hover, .hm-btn--ghost:hover, .hm a.hm-btn--ghost:hover,
.cl-help .cl-btn--ghost:hover {
  background: var(--btn-tone-hover);
  border-color: transparent;
  color: var(--graphite-900);
}
.pc-btn--cart.is-in-cart, .pc-btn--cart.is-in-cart:hover {
  background: var(--pc-sky); color: var(--primary); border-color: var(--pc-sky-line);
}

/* ------------------------------------------------------------------ графитовые плоскости:
   блок подбора карточки и категории, блок заявки главной */

.pc-pick, .cl-pick, .hm-cta { background: var(--graphite-900); color: var(--on-graphite); }
.pc-pick::before, .cl-pick::before {
  background: linear-gradient(90deg,
    var(--graphite-900) 0, var(--graphite-900) 44%,
    rgba(27, 28, 27, .7) 56%, rgba(27, 28, 27, .25) 66%, rgba(27, 28, 27, 0) 78%);
}
@media (max-width: 1100px) {
  .pc-pick::before, .cl-pick::before {
    background: linear-gradient(180deg,
      rgba(27, 28, 27, 0) 0, rgba(27, 28, 27, 0) calc(var(--band) * .45),
      rgba(27, 28, 27, .6) calc(var(--band) * .8),
      var(--graphite-900) var(--band));
  }
}
.pc-pick p, .cl-pick p, .hm-cta__lead, .hm-cta__note { color: var(--on-graphite-2); }
.pc-pick li { color: var(--on-graphite); border-color: var(--graphite-line); background: rgba(255, 255, 255, .03); }
.pc-pick .pc-btn--primary, .cl-pick .cl-btn--primary,
.hm-btn--invert, .hm a.hm-btn--invert {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
}
.pc-pick .pc-btn--primary:hover, .cl-pick .cl-btn--primary:hover,
.hm-btn--invert:hover, .hm a.hm-btn--invert:hover {
  background: var(--accent-hover); border-color: var(--accent-hover);
}
.pc-pick .pc-btn--ghost, .cl-pick .cl-btn--ghost,
.hm-btn--outline, .hm a.hm-btn--outline {
  background: var(--graphite-700); color: var(--on-graphite); border-color: transparent;
}
/* У кнопок-ссылок главной покой задан как «.hm a.hm-btn--…» (иначе их красит общий цвет
   ссылок .hm a), поэтому и наведение пишется с той же силой: без этого оно проигрывало
   покою и кнопки «телефон» и «Написать в Max» не отвечали на курсор (владелец, 20.09.2026). */
.pc-pick .pc-btn--ghost:hover, .cl-pick .cl-btn--ghost:hover,
.hm-btn--outline:hover, .hm a.hm-btn--outline:hover {
  background: var(--graphite-line); border-color: transparent; color: #fff;
}

/* ------------------------------------------------------------------ главная: первый экран
   Фото склада во всю область первого экрана (владелец, 20.09.2026): слева, под текстом,
   сплошной графит, к правой части он плавно уходит и открывает сцену с машиной.
   Разметка не меняется: полосу и фото рисует псевдоэлемент, прежняя картинка-плитка
   справа скрыта. Кадр снят так, что левая половина темная и пустая. */

.hm { overflow-x: clip; }
.hm-hero {
  position: relative;
  isolation: isolate;
  row-gap: 48px;
  align-content: start;
  padding-top: 64px;
  padding-bottom: 48px;
}
.hm-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* вверх — под фиксированную шапку: ее высота меньше отступа body, и между
     графитом шапки и графитом полосы оставалась светлая щель */
  inset: -40px calc(50% - 50vw) 0;
  background:
    linear-gradient(90deg,
      var(--graphite-900) 0, var(--graphite-900) 30%,
      rgba(27, 28, 27, .88) 44%, rgba(27, 28, 27, .45) 60%,
      rgba(27, 28, 27, .12) 78%, rgba(27, 28, 27, 0) 100%),
    linear-gradient(180deg, var(--graphite-veil) 0, rgba(27, 28, 27, 0) 22%, rgba(27, 28, 27, 0) 58%, rgba(27, 28, 27, .78) 100%),
    var(--graphite-900) url("/images/bg/home-hero-wide-g-1600.webp") right center / cover no-repeat;
}
.hm-hero__pic { display: none; }
.hm-hero__title { color: #fff; }
.hm-hero__lead { color: var(--on-graphite-2); }
.hm-hero .hm-search__box { border-color: transparent; }
.hm-hero .hm-search__box:focus-within { border-color: var(--accent-mark); box-shadow: 0 0 0 3px var(--accent-ring); }
.hm-hero .hm-chips a { border-color: var(--graphite-line-2); color: var(--on-graphite); background: var(--graphite-veil); }
.hm-hero .hm-chips a:hover { background: var(--graphite-700); border-color: var(--graphite-line-3); color: #fff; }
.hm-hero a:focus-visible, .hm-hero button:focus-visible { outline-color: var(--accent-mark); }

/* Широкие экраны (владелец, 20.09.2026: на 2K машину резало сверху и снизу). `cover`
   растягивал кадр по ширине, и при высоте полосы 600px от него оставалась середина.
   Здесь кадр вписан по высоте целиком и привязан к правому краю колонки контента,
   а не экрана; правый срез кадра уходит в графит так же плавно, как левый. */
@media (min-width: 1500px) {
  .hm-hero::before {
    --hero-gap: max(0px, calc(50vw - 1100px));
    background:
      linear-gradient(90deg,
        var(--graphite-900) 0, var(--graphite-900) 30%,
        rgba(27, 28, 27, .88) 44%, rgba(27, 28, 27, .45) 60%,
        rgba(27, 28, 27, .12) 78%, rgba(27, 28, 27, 0) 100%),
      linear-gradient(270deg,
        var(--graphite-900) 0, var(--graphite-900) var(--hero-gap),
        rgba(27, 28, 27, .6) calc(var(--hero-gap) + 140px), rgba(27, 28, 27, 0) calc(var(--hero-gap) + 380px)),
      var(--graphite-900) url("/images/bg/home-hero-wide-g-1600.webp") right var(--hero-gap) center / auto 100% no-repeat;
  }
}

/* Телефон и планшет: фото уходит наверх полосы, текст стоит на сплошном графите под ним */
@media (max-width: 1000px) {
  .hm-hero { row-gap: 32px; padding-top: clamp(200px, 46vw, 340px); padding-bottom: 32px; }
  .hm-hero::before {
    background:
      linear-gradient(180deg,
        rgba(27, 28, 27, .35) 0, rgba(27, 28, 27, 0) 18%,
        rgba(27, 28, 27, .0) calc(clamp(200px, 46vw, 340px) * .55),
        var(--graphite-900) calc(clamp(200px, 46vw, 340px) + 8px)),
      var(--graphite-900) url("/images/bg/home-hero-wide-g-800.webp") 78% top / auto calc(clamp(200px, 46vw, 340px) + 48px) no-repeat;
  }
}

/* Шильдик — часть первого экрана, а не блок под ним (владелец, 20.09.2026: «одно целое
   с изображением»): в разметке он стоит внутри .hm-hero последней строкой сетки, фото
   идет и под ним. Рамки у таблички нет — на фото ее рисуют волосяные линии, как выбитые
   поля на стальной пластине. Ритм по вертикали один: от чипов до линии шильдика столько
   же, сколько от нижнего края его полей до конца блока, — 48px. */
.hm-hero > .hm-plate {
  grid-column: 1 / -1;
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(245, 245, 243, .22);
  border-radius: 0;
  background: transparent;
}
.hm-hero > .hm-plate .hm-plate__field { padding-bottom: 0; }
.hm-hero > .hm-plate .hm-micro { color: var(--on-graphite-2); }
.hm-hero > .hm-plate .hm-plate__val { color: #fff; }
.hm-hero > .hm-plate .hm-plate__field + .hm-plate__field::before { background: rgba(245, 245, 243, .16); }
@media (max-width: 768px) {
  .hm-hero > .hm-plate .hm-plate__field { padding-bottom: 16px; }
  .hm-hero > .hm-plate .hm-plate__field:nth-child(n+3) { border-top-color: rgba(245, 245, 243, .16); }
  .hm-hero > .hm-plate .hm-plate__field:nth-child(even) { border-left-color: rgba(245, 245, 243, .16); }
}

/* «Как мы работаем» — журнальная полоса (владелец, 20.09.2026: «строже, как с журнала,
   премиум, много воздуха, b2b»; до этого были квадратные узлы на линии — отклонено).
   Одна волосяная линия во всю меру (1px, цвет волосяных линий главной), под ней пять колонок: крупная светлая цифра
   шага, заголовок, текст. Рамок, плашек и заливок нет — структуру держат линия, кегль
   и воздух. Порядок шагов настоящий, поэтому цифра здесь несет смысл. Оранжевая только
   последняя — отгрузка, цель пути. Движения в блоке нет: точку, шедшую по линии,
   владелец снял в тот же день — в строгом журнальном виде она лишняя. */
#kak-rabotaem { padding-top: calc(var(--hm-sec) + 24px); }
#kak-rabotaem .hm-sec__lead { max-width: 46ch; }
.hm-steps {
  position: relative;
  margin-top: 64px;
  border-top: 1px solid var(--hm-rule);  /* светлая волосяная линия — владелец, 20.09.2026 */
  column-gap: 0;
}
.hm-steps .hm-step, .hm-steps .hm-step:first-child {
  border: 0;
  padding: 0 40px 0 0;
}
.hm-step__n {
  display: block;
  margin: 30px 0 44px;
  font-family: var(--font-heading, Onest, sans-serif);
  font-size: var(--hm-numeral);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--gray-300);
}
.hm-step__n::before { content: "0"; }
.hm-step:last-child .hm-step__n { color: var(--accent); }
.hm-step__t {
  margin-bottom: 12px;
  font-family: var(--font-heading, Onest, sans-serif);
  font-size: 1rem;
  letter-spacing: -0.012em;
}
.hm-step__d { max-width: 26ch; font-size: .9375rem; line-height: 1.65; color: var(--hm-ink-2); }

@media (max-width: 1100px) {
  .hm-steps { row-gap: 8px; }
  .hm-steps .hm-step:nth-child(n) { padding-left: 0; }
  .hm-step__n { margin: 26px 0 28px; }
}
@media (max-width: 768px) {
  /* телефон: строка = цифра слева, текст справа; между шагами волосяная линия */
  .hm-steps { margin-top: 36px; row-gap: 0; }
  .hm-steps .hm-step, .hm-steps .hm-step:first-child, .hm-steps .hm-step:nth-child(n) {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 8px;
    padding: 24px 0;
    border-top: 1px solid var(--hm-rule);
  }
  .hm-steps .hm-step:first-child { border-top: 0; }
  .hm-step__n { grid-row: 1 / span 2; margin: 0; font-size: var(--hm-numeral-sm); }
  .hm-step__t, .hm-step__d { grid-column: 2; max-width: none; }
}

/* «Почему берут у нас» — ведомость проверки, а не сетка 3×2 (владелец, 20.09.2026: «стандартная
   сетка, обыграй иначе»). Тезис блока — «нет пункта, который нельзя проверить на этом же сайте»,
   и форма его исполняет: строка = утверждение · пояснение · где проверить. Это грамматика
   сайта (таблица характеристик, акт сверки), а не плитки «значок + заголовок + текст».
   Слева липкая колонка с заголовком, справа шесть строк на волосяных линиях. Значков
   в строках нет: галочки в кружках владелец снял 20.09.2026. */
#pochemu {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  column-gap: 72px;
  align-items: start;
}
.hm-why__intro { position: sticky; top: calc(var(--hm-header, 141px) + 28px); }
.hm-why__intro .hm-sec__lead { max-width: 30ch; }
.hm-why__intro::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 28px;
  background: var(--accent);
}
#pochemu .hm-grid {
  display: block;
  margin: 6px 0 0;
  border-top: 1px solid var(--hm-rule);  /* светлая волосяная линия — владелец, 20.09.2026 */
}
#pochemu .hm-grid__cell,
#pochemu .hm-grid__cell:nth-child(n) {
  display: grid;
  /* колонка «где проверить» одной ширины: кнопки разной длины рвали правый край (владелец, 20.09.2026) */
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr) 208px;
  column-gap: 32px;
  align-items: baseline;
  padding: 22px 12px 22px 0;
  border: 0;
  border-bottom: 1px solid var(--hm-rule);
  transition: background-color .18s ease;
}

.hm-grid__t { margin: 0; }
.hm a.hm-grid__proof {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 14px 0 16px;
  border: 1px solid transparent;
  border-radius: var(--hm-r-sm);
  background: var(--btn-tone);
  color: var(--hm-ink);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.hm a.hm-grid__proof:hover { background: var(--btn-tone-hover); }
@media (max-width: 1100px) {
  #pochemu { grid-template-columns: minmax(0, 1fr); }
  .hm-why__intro { position: static; margin-bottom: 28px; }
  .hm-why__intro::after { display: none; }
}
@media (max-width: 768px) {
  #pochemu .hm-grid__cell,
  #pochemu .hm-grid__cell:nth-child(n) { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 20px 0; }
  .hm a.hm-grid__proof { width: 208px; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #pochemu .hm-grid__cell { transition: none; }
}
.hm-cat--all .hm-cat__name, .hm-cat--all svg { color: var(--primary); }

/* ------------------------------------------------------------------ карточка товара */

.pc-nav.is-stuck { box-shadow: 0 10px 22px -16px rgba(188, 66, 10, .35); }

/* Липкая панель покупки — графит: она лежит поверх страницы и не должна с ней сливаться */
.pc-bar {
  background: var(--graphite-glass);
  border-top: 1px solid var(--graphite-line);
  box-shadow: 0 -14px 32px -18px rgba(0, 0, 0, .6);
}
.pc-bar__name, .pc-bar__price { color: #fff; }
.pc-bar__name span, .pc-bar__price span { color: var(--on-graphite-3); }
.pc-bar__pic { border-color: var(--graphite-line); }
.pc-bar .pc-btn--ghost { background: var(--graphite-700); border-color: transparent; color: var(--on-graphite); }
.pc-bar .pc-btn--ghost:hover { background: var(--graphite-line); border-color: transparent; color: #fff; }
.pc-bar .pc-btn--cart.is-in-cart, .pc-bar .pc-btn--cart.is-in-cart:hover {
  background: var(--graphite-700); border-color: var(--graphite-line-3); color: var(--accent-mark);
}

/* ------------------------------------------------------------------ категория */

.cl-filters-btn__n { background: var(--graphite-900); color: #fff; }
.cl-check input:checked + .cl-check__box,
.cl-item__cmp input:checked + .cl-check__box,
.cl-cmp__diff input:checked + .cl-check__box { border-color: var(--graphite-900); background-color: var(--graphite-900); }
.cl-slider__fill, .cl-pager__fill, .cl-item__dots i.is-on { background: var(--accent-mark); }

/* ------------------------------------------------------------------ окно выбора города, корзина */

.cat-hero__icon, .empty-cat__icon, .brand-group__icon { color: var(--primary); background: var(--primary-light); }

/* ------------------------------------------------------------------ сервисные страницы
   Текущий пункт рельса: полоска слева графитовая — оранжевая рядом с теплой подложкой
   давала два сигнала на одном пункте. */
.ip-toc a.is-active, .ip-side a.is-current { box-shadow: inset 2px 0 0 var(--graphite-900); }

/* ------------------------------------------------------------------ правки по разбору
   impeccable critique 20.09.2026 (две независимые проверки образца). */

/* /katalog/: блок подбора шел через старый «синий» токен и после смены палитры стал
   сплошной оранжевой плоскостью с текстом 2,7:1. Он графитовый, как подбор карточки,
   раздела и главной; оранжевая в нем только кнопка. */
.kt-podbor { background: var(--graphite-900); color: var(--on-graphite); }
.kt-podbor__text, .kt-podbor__note, .kt-podbor__blank, .kt-podbor__plate .kt-micro { color: var(--on-graphite-2); }
.kt-podbor__plate, .kt-podbor__plate li + li { border-color: var(--graphite-line-2); }
.kt-podbor__blank::before { border-bottom-color: var(--graphite-line-3); }
.kt a.kt-btn--invert { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kt a.kt-btn--invert:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.kt a.kt-btn--outline { background: var(--graphite-700); color: var(--on-graphite); border-color: transparent; }
.kt a.kt-btn--outline:hover { background: var(--graphite-line); border-color: transparent; color: #fff; }

/* Закрытая панель корзины стоит за правым краем экрана, но ее тень (-24px, размытие 64px)
   заходила на страницу серо-синей вуалью шириной ~50px — на каждой странице сайта.
   Тень нужна только открытой панели, и теплая, а не прежняя сине-серая. */
.cart { box-shadow: none; }
.cart.active { box-shadow: -24px 0 64px rgba(27, 28, 27, .18), -1px 0 0 var(--gray-200); }

/* Фокус с клавиатуры на залитых кнопках: внутренняя линия цвета заливки была невидима
   (1,2:1). На оранжевой и графитовой заливке кольцо белое внутри и графитовое снаружи. */
.cl-btn--primary:focus-visible, .pc-btn--primary:focus-visible, .hm-btn--primary:focus-visible,
.kt a.kt-btn--invert:focus-visible {
  outline: 2px solid var(--graphite-900);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px #fff;
}
/* На графитовых плоскостях и в подвале обводка фокуса — яркий оранжевый (5,1:1), а не
   «чернила» (3,2:1 на графите, 2,9:1 на липкой панели) */
.pc-pick :focus-visible, .cl-pick :focus-visible, .hm-cta :focus-visible, .kt-podbor :focus-visible,
.pc-bar :focus-visible, .footer :focus-visible { outline-color: var(--accent-mark); }
.pc-pick .pc-btn--primary:focus-visible, .cl-pick .cl-btn--primary:focus-visible,
.kt-podbor a.kt-btn--invert:focus-visible { outline-color: #fff; }

/* «В корзине» на липкой панели: яркий оранжевый текстом на графит-700 давал 4,1:1 */
.pc-bar .pc-btn--cart.is-in-cart, .pc-bar .pc-btn--cart.is-in-cart:hover { color: #fff; }

/* Кнопки-значки шапки: рамка 1,4:1 к фону не читалась как граница кнопки */
.cart-btn, .hcmp-btn { border-color: var(--graphite-line-2); }

/* Остатки синего в общих стилях: пульс кнопки корзины, свечение поля в окне города,
   тень кнопки оформления — переведены на оранжевый темы */
.cityp__input:focus { box-shadow: 0 0 0 3px var(--accent-ring); border-color: var(--accent-mark); }
.cart__cta { box-shadow: 0 8px 20px -8px rgba(188, 66, 10, .35); }
@keyframes cartBtnPulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(221, 90, 14, .45); }
  45%  { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(221, 90, 14, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(221, 90, 14, 0); }
}

/* ------------------------------------------------------------------ «выбрано» без оранжевого
   Текст выбранного — чернила, а не оранжевый; рамка графитовая, подложка серая. */
.pc-var__opt.is-current, .pc-var__opt.is-current .pc-var__val i, .pc-var__opt.is-current .pc-var__sub,
.cl-chip.is-active, .cl-chip.is-active:hover, .cl-chip.is-active .cl-chip__count,
.cl-sub.is-active .cl-sub__count, .cl-views__btn.is-active, .cl-filters-btn.is-active,
.cl-pager__num.is-cur, .cl-th.is-active, .cl-item__cmp input:checked ~ span,
.pc-nav__list a.is-active, .ip-toc a.is-active .ip-toc__n,
.hsearch__scope-opt[aria-checked="true"], .psearch__scope-opt input:checked + span,
.cityp__top-btn.is-cur, .cityp__item.is-cur, .cityp__res-item.is-cur .cityp__res-name { color: var(--graphite-900); }
.pc-var__opt.is-current, .cl-chip.is-active, .cl-sub.is-active, .cl-pager__num.is-cur { font-weight: 600; }
.pc-thumb[aria-selected="true"] { border-color: var(--on-graphite-3); box-shadow: inset 0 0 0 1px var(--on-graphite-3); background: var(--white, #fff); }
.pc-nav__list a.is-active { border-bottom-color: var(--graphite-900); }
/* прилипшее подменю карточки — бумага с волосяной линией, а не цветная полоса */
.pc-nav.is-stuck { background: rgba(255, 255, 255, .97); border-color: var(--pc-rule-2); box-shadow: 0 10px 22px -16px rgba(27, 28, 27, .35); }
.cl-views__btn.is-active + .cl-views__btn, .cl-views__btn.is-active { border-left-color: var(--cl-rule-2); }
.psearch__scope-opt input:checked + span, .cityp__top-btn.is-cur { background: var(--sel); border-color: var(--sel-line); }
/* «В корзине» — состояние, а не действие: серая подложка, графит */
.pc-btn--cart.is-in-cart, .pc-btn--cart.is-in-cart:hover,
.cl-item__cart.is-in-cart { background: var(--sel); color: var(--graphite-900); border-color: var(--pc-rule-2); box-shadow: inset 0 0 0 1px var(--pc-rule-2); }

/* ------------------------------------------------------------------ телефон: области нажатия
   не меньше 44px там, где палец (разбор impeccable, 20.09.2026) */
@media (pointer: coarse) {
  .hm-hero .hm-chips a, .cl-chip, .cl-item__cart, .kt-more { min-height: 44px; }
  .hm-hero .hm-chips a, .cl-chip { display: inline-flex; align-items: center; }
  .pc-thumb { min-width: 44px; min-height: 44px; }
}
/* «Сравнить» в плитке — заметнее: им пользуется тот, кто выбирает из двух-трех моделей */
.cl-item__cmp { color: var(--cl-ink-2); font-weight: 500; }
.cl-item__cmp:hover { color: var(--cl-ink); }

/* Бейдж «В наличии» на плитке листинга — цветом основного текста (владелец, 20.09.2026).
   Зеленой остается только точка перед словом: статус по-прежнему читается с одного взгляда,
   а зеленый текст на каждой из 24 плиток спорил с оранжевым и графитом. */
.cl-chip-stock { color: var(--cl-ink); }
.cl-chip-stock::before { background: var(--cl-green); }
button.cl-chip-stock:hover, button.cl-chip-stock[aria-expanded="true"] { border-color: var(--cl-rule-2); background: var(--cl-well); }

/* Наведение на плитку листинга (владелец, 20.09.2026: «карточки не явно выделяются» —
   раньше менялась только волосяная рамка на тон). Теперь под плиткой появляется тень
   (подъем и потемнение рамки владелец снял в тот же день), название становится оранжевым, а графитовая «В корзину»
   загорается оранжевым: видно и какую модель держит курсор, и где у нее действие.
   Только для устройств с курсором — на телефоне наведения нет. */
@media (hover: hover) {
  .cl-item { transition: box-shadow .22s ease; }
  .cl-item:hover, .cl-item:focus-within {
    /* рамка под курсором остается прежней волосяной: темную владелец снял 20.09.2026,
       плитку выделяют тень, подъем, название и кнопка */
    border-color: var(--cl-rule);
    box-shadow: 0 18px 36px -20px rgba(27, 28, 27, .32), 0 2px 6px -2px rgba(27, 28, 27, .08);
    z-index: 1;
  }
  .cl-item:hover .cl-item__title a { color: var(--primary); }
  .cl-item:hover .cl-item__cart:not(.is-in-cart) { background: var(--accent); color: var(--on-accent); }
  .cl-item:hover .cl-item__cart:not(.is-in-cart):hover { background: var(--accent-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .cl-item, .cl-item:hover { transition: none; }
}

/* Ссылки справа от заголовков секций главной («Весь каталог», «Подробно», «Условия доставки»).
   Общее правило «.hm a» сильнее класса ссылки и красило ее одинаково в покое и под курсором —
   наведение не было видно (владелец, 20.09.2026). Теперь правила той же силы: в покое
   оранжевые «чернила» без подчеркивания, под курсором цвет темнеет и слева направо
   прочерчивается линия. */
.hm a.hm-sec__aside {
  position: relative;
  padding: 6px 0;
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
  transition: color .18s ease;
}
.hm a.hm-sec__aside::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .24s cubic-bezier(.2, .7, .2, 1);
}
.hm a.hm-sec__aside:hover, .hm a.hm-sec__aside:focus-visible { color: var(--primary-dark); }
.hm a.hm-sec__aside:hover::after, .hm a.hm-sec__aside:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .hm a.hm-sec__aside, .hm a.hm-sec__aside::after { transition: none; }
}

/* Выбранное исполнение в карточке — светло-оранжевая подложка (владелец, 20.09.2026: серая
   ему не подошла). Это единственное «выбрано» с оранжевым: выбор исполнения меняет цену
   и характеристики всей страницы, и он должен читаться сразу. Остальные выбранные состояния
   (чипы, плашки типов, миниатюра, страницы листинга) остаются нейтрально-серыми. */
.pc-var__opt.is-current {
  background: var(--primary-light);
  border-color: var(--sel-orange-line);
  color: var(--graphite-900);
}

/* «Получить КП» на первом экране карточки — белая, в волосяной рамке (владелец, 20.09.2026):
   рядом с оранжевой «В корзину» серая заливка смотрелась тяжело. Рамка светло-серая, не черная.
   В блоках подбора, полосе помощи и на липкой панели вторая кнопка остается тональной. */
.pc-actions .pc-btn--ghost { background: var(--white, #fff); border-color: var(--pc-rule-2); color: var(--graphite-900); }
.pc-actions .pc-btn--ghost:hover { background: var(--pc-well); border-color: var(--pc-rule-2); }