/* ============================================================
   components.css — переиспользуемые элементы
   ============================================================ */

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ko-space-8);
  padding: var(--ko-control-pad-y) var(--ko-space-24);
  border: 0;
  border-radius: var(--ko-radius);
  font: 500 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn--primary { background: var(--ko-btn-brand); color: var(--ko-text-0); }
.btn--primary:hover { background: #e2620a; }
.btn--secondary { background: var(--ko-btn-grey); color: var(--ko-text-1); }
.btn--secondary:hover { background: var(--ko-bg-2); }
/* Белая кнопка: в макете у неё на наведении меняется только прозрачность */
.btn--white { background: var(--ko-btn-white); color: var(--ko-text-1); }
.btn--white:hover { background: var(--ko-btn-white); opacity: .8; }
.btn--danger { background: var(--ko-bg-error); color: var(--ko-border-error); }
.btn--danger:hover { background: var(--ko-border-error); color: var(--ko-text-0); }
.btn--block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Текстовая ссылка-кнопка */
.link {
  color: var(--ko-text-1);
  transition: color .15s ease;
}
.link:hover { color: var(--ko-text-accent); }
.link--accent { color: var(--ko-text-accent); }

/* Круглая/квадратная иконочная кнопка */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ko-control-h);
  height: var(--ko-control-h);
  color: var(--ko-icon-2);
  border-radius: var(--ko-radius);
  transition: background-color .15s ease, color .15s ease;
}
.icon-btn:hover { background: var(--ko-bg-1); color: var(--ko-icon-3); }
.icon-btn svg { width: var(--ko-icon-normal); height: var(--ko-icon-normal); }

/* Корзина брендовая только когда в ней что-то есть — это вариант Add=Yes
   компонента Header btn (2099:58392, Icon Color/icon-brand). Пустая корзина
   серая, как все остальные иконки (2099:58390, Icon Color/icon-2).
   Класс ставит js/main.js вместе со счётчиком */
.icon-btn--cart.is-filled,
.icon-btn--cart.is-filled:hover { color: var(--ko-icon-brand); }

/* Счётчик на иконке */
.icon-btn { position: relative; }
/* Бейдж по макету (2099:58392): бокс 16×22 в правом верхнем углу кнопки 52,
   текст Caption xl m — Inter Medium 15/22. Было 11/1 со смещением 8/8 */
.icon-btn__badge {
  position: absolute;
  top: 0;
  right: 0;
  width: 16px;
  text-align: center;
  font: 500 var(--ko-caption-xl-size)/var(--ko-caption-xl-lh) var(--ko-font);
  /* цвет наследуем от кнопки: у непустой корзины он брендовый */
}

/* Стрелки каруселей — по макету 48×48, вплотную друг к другу */
.arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--ko-border-1);
  color: var(--ko-icon-3);
  transition: border-color .15s ease, color .15s ease;
}
/* Кнопки стоят вплотную: рамки накладываются одна на другую, поэтому у второй
   кнопки левая грань на месте и на наведении не пропадает */
.arrow-btn { position: relative; }
.arrow-btn + .arrow-btn { margin-left: -1px; }
.arrow-btn:hover { border-color: var(--ko-border-4); z-index: 1; }
.arrow-btn:disabled { opacity: .4; cursor: default; }
.arrow-btn svg { width: var(--ko-icon-normal); height: var(--ko-icon-normal); }

.carousel-nav { display: flex; }

/* ---------- Поля ввода ---------- */
.field { display: grid; gap: var(--ko-space-8); }
.field__label {
  font: 400 var(--ko-caption-size)/var(--ko-caption-lh) var(--ko-font);
  color: var(--ko-text-3);
}

.input {
  width: 100%;
  /* 52 по макету = 2 рамки + 12 + строка 24 + 12 + 2.
     Рамка прозрачная: у залитого поля обводки нет, она только держит высоту */
  padding: var(--ko-space-12) var(--ko-space-16);
  background: var(--ko-bg-1);
  border: 2px solid transparent;
  border-radius: var(--ko-radius);
  font: 400 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font);
  color: var(--ko-text-1);
  transition: border-color .15s ease, background-color .15s ease;
}
.input::placeholder { color: var(--ko-text-3); }
.input:hover { background: var(--ko-bg-2); }
.input:focus { outline: none; border-color: var(--ko-border-brand); background: var(--ko-bg-1); }
.input--error { background: var(--ko-bg-error); border-color: var(--ko-border-error); }
.input--white { background: var(--ko-bg-0); }

textarea.input { min-height: 96px; resize: vertical; }

/* На мобильном поле 48: 2 рамки + 10 + строка 24 + 10 + 2 */
@media (max-width: 768px) {
  .input { padding-block: 10px; }
  textarea.input { padding-block: var(--ko-space-12); }
}

.field__error {
  font: 400 var(--ko-caption-size)/var(--ko-caption-lh) var(--ko-font);
  color: var(--ko-border-error);
}

/* Селект */
/* ---------- Выпадающий список ----------
   Кнопка повторяет Base selection (26757:610): заливка, рамка 2, паддинг 18/14,
   шеврон 24. Панель — как у сортировки в каталоге. Системный <select> не берём:
   его выпадающий список рисует ОС и стилям не поддаётся.
*/
.select { position: relative; display: block; }
.select__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ko-space-12);
  width: 100%;
  min-height: var(--ko-control-h);
  padding: var(--ko-space-12) var(--ko-space-16);
  background: var(--ko-bg-1);
  /* обводки у залитого контрола нет: наведение подсвечиваем заливкой,
     рамка появляется только когда список раскрыт */
  border: 2px solid transparent;
  text-align: left;
  font: 400 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font);
  color: var(--ko-text-1);
  transition: border-color .15s ease;
}
.select__btn:hover { background: var(--ko-bg-2); }
.select__btn[aria-expanded="true"] { border-color: var(--ko-border-brand); }
.select__btn svg {
  flex: none;
  width: var(--ko-icon-normal);
  height: var(--ko-icon-normal);
  color: var(--ko-icon-2);
  transition: transform .2s ease;
}
.select__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.select__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Подпись селекта всегда чёрная: в фильтрах это название фильтра, а не плейсхолдер */
.select__value--muted { color: var(--ko-text-1); }

/* На залитой подложке поле белое и без обводки — как Base input в макете
   (26756:610): рамка нужна только когда контрол стоит на белом */
.select--white .select__btn,
.input--white {
  background: var(--ko-bg-0);
  border-color: transparent;
}
/* Светлый вариант стоит на серой подложке: на наведении он остаётся белым и без
   обводки — рамка появляется только на фокусе, когда в поле действительно пишут */
.select--white .select__btn:hover,
.input--white:hover { background: var(--ko-bg-0); border-color: transparent; }
.select--white .select__btn[aria-expanded="true"],
.input--white:focus { border-color: var(--ko-border-brand); background: var(--ko-bg-0); }

.select__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--ko-space-8) 0;
  background: var(--ko-bg-0);
  border: 2px solid var(--ko-border-1);
  box-shadow: 0 12px 32px rgba(19, 25, 39, .12);
}
.select__option {
  display: flex;
  align-items: center;
  gap: var(--ko-space-12);
  width: 100%;
  padding: var(--ko-space-10) var(--ko-space-18);
  text-align: left;
  font: 400 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font);
  color: var(--ko-text-1);
  cursor: pointer;
  transition: background-color .15s ease;
}
.select__option:hover { background: var(--ko-bg-1); }
.select__option.is-active { color: var(--ko-text-accent); }

/* Мультивыбор: у фильтров каталога пункты с чекбоксами */
.select__option input {
  appearance: none;
  flex: none;
  width: 18px; height: 18px;
  border: 2px solid var(--ko-border-4);
  background: var(--ko-bg-0);
  cursor: pointer;
}
.select__option input:checked { background: var(--ko-bg-brand); border-color: var(--ko-bg-brand); }
.select__option input:checked::after {
  content: "";
  display: block;
  width: 5px; height: 9px;
  margin: 0 auto;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

/* Чекбокс */
.checkbox {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--ko-space-12);
  align-items: start;
  font: 400 var(--ko-caption-size)/var(--ko-caption-lh) var(--ko-font);
  color: var(--ko-text-3);
  cursor: pointer;
}
.checkbox input {
  appearance: none;
  width: 18px; height: 18px;
  margin: 1px 0 0;
  border: 1px solid var(--ko-border-4);
  background: var(--ko-bg-0);
  cursor: pointer;
}
.checkbox input:checked {
  background: var(--ko-bg-brand);
  border-color: var(--ko-bg-brand);
}
/* Незаполненное обязательное согласие: подписи под чекбоксом не делаем,
   помечаем сам квадрат — рамка и заливка как у поля с ошибкой */
.checkbox input.is-error {
  border-color: var(--ko-border-error);
  background: var(--ko-bg-error);
}
.checkbox input:checked::after {
  content: "";
  display: block;
  width: 5px; height: 9px;
  margin: 1px auto 0;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.checkbox a { color: var(--ko-text-accent); }

/* ---------- Теги, чипы, табы ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline: var(--ko-space-10);
  background: var(--ko-bg-1);
  color: var(--ko-text-2);
  font: 400 var(--ko-small-size)/1 var(--ko-font);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ko-space-8);
  height: 36px;
  padding-inline: var(--ko-space-12);
  background: var(--ko-bg-1);
  color: var(--ko-text-1);
  font: 400 var(--ko-small-size)/1 var(--ko-font);
  transition: background-color .15s ease;
}
.chip:hover { background: var(--ko-bg-2); }

/* Вкладка объёма в карточке товара. С 11.09.2026 чужой объём — ссылка <a> на соседний
   товар CS-Cart, текущий — <span class="is-active">; правило одинаково для обоих */
.tabs-border {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding-inline: var(--ko-space-16);
  border: 2px solid var(--ko-border-1);
  font: 400 var(--ko-caption-xl-size)/1 var(--ko-font);
  transition: border-color .15s ease, color .15s ease;
}
.tabs-border:hover { border-color: var(--ko-border-4); }
.tabs-border.is-active { border-color: var(--ko-border-brand); color: var(--ko-text-accent); }

/* ---------- Бейджи ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--ko-space-4) var(--ko-space-8);
  font: 500 var(--ko-caption-size)/var(--ko-caption-lh) var(--ko-font);
  color: var(--ko-text-0);
}
.badge--hit { background: var(--ko-other-1); }
/* «Нет в наличии» — состояния в макете нет, собрано на нейтральных токенах
   (решение от 7 сентября, см. docs/22-stock-states.md) */
.badge--out { background: var(--ko-bg-3); color: var(--ko-text-1); }
/* Скидка крупнее: Large m 20/28 -> высота 36 (макет 26859:10755) */
.badge--sale {
  background: var(--ko-other-2);
  font: 500 var(--ko-large-size)/var(--ko-large-lh) var(--ko-font);
}

/* ---------- Карточка товара ----------
   Макет: плитка 460×450 = подложка 460×360 + 20 + блок текста 70.
   Изображение внутри подложки с полями 40.
*/
/* ---------- Карточка товара (тайл) ----------
   Макет spec tile (26702:35538). Ряды жёсткие, гэп между ними 20:
   Large  432×556 = картинка 360 + 20 + (цена 34 + 6 + название 28) + 20 + чипсы 28 + 20 + кнопка 40
   Mini   322×436 = картинка 240 + то же самое
   Static — изображение с рамкой border-1, Hover — рамка темнеет до bg-3.
*/
.product-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--ko-space-20);
  /* название в одну строку с многоточием: без min-width колонка сетки
     растягивается по его полной длине и ломает раскладку на узких экранах */
  min-width: 0;
}
.product-card__info { min-width: 0; }

.product-card__media {
  position: relative;
  display: block;
  height: 360px;                 /* Large; Mini переопределяет на 240 */
  padding: 50px 42px;            /* поля вокруг фотографии из макета */
  background: var(--ko-bg-0);
  border: 2px solid var(--ko-border-1);
  overflow: hidden;
  transition: border-color .15s ease;
}
.product-card:hover .product-card__media { border-color: var(--ko-bg-3); }
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .3s ease;
}
.product-card:hover .product-card__media img { transform: scale(1.03); }
.product-card__media .placeholder { display: block; width: 100%; height: 100%; }

/* Бейджи перекрывают рамку и прижаты к её внешнему краю */
.product-card__badge-hit  { position: absolute; top: -2px; left: -2px; }
.product-card__badge-sale { position: absolute; bottom: -2px; left: -2px; }

/* Кнопка «в избранное» — 34×34 в правом верхнем углу.
   Отступ у Large 10, у Mini 6 (макеты 26702:35496 и 26702:35539) */
.product-card__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  color: var(--ko-icon-2);
  background: none;
  transition: color .15s ease;
}
.product-card__fav svg { width: var(--ko-icon-normal); height: var(--ko-icon-normal); }
/* По наведению значок только темнеет, заливка — уже выбранное состояние */
.product-card__fav:hover { color: var(--ko-icon-3); }
/* --i-fill наследуется внутрь <use>: сам символ нарисован обводкой,
   снаружи его fill="none" иначе не перебить */
.product-card__fav.is-active { color: var(--ko-icon-brand); --i-fill: currentColor; }

/* Текстовая часть: отступы заданы полями, а не общим гэпом —
   между ценой и названием 6, дальше по 20 */
.product-card__info { display: flex; flex-direction: column; }

.product-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--ko-space-12);
  font: 600 var(--ko-large-xl-size)/var(--ko-large-xl-lh) var(--ko-font);
}
.product-card__price-old {
  font: 400 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font);
  color: var(--ko-text-3);
  text-decoration: line-through;
}
.product-card__title {
  display: block;
  margin-top: 6px;
  height: 28px;
  font: 400 var(--ko-base-size)/var(--ko-base-lh) var(--ko-font);
  color: var(--ko-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s ease;
}
.product-card__title:hover { color: var(--ko-text-accent); }

/* Чипсы объёма: соседние товары CS-Cart (каждый объём — отдельный товар, решение
   заказчика 11.09.2026). Чужой объём — ссылка <a>, свой — <span class="is-active">;
   раньше это были <button>, которые меняли цену на месте. inline-flex центрирует
   подпись так же, как это делала кнопка, — габарит 28 px не меняется */
.product-card__volumes { display: flex; gap: var(--ko-space-8); margin-top: var(--ko-space-20); }
.volume {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--ko-space-10);
  border: 2px solid var(--ko-border-1);
  background: var(--ko-bg-0);
  font: 400 var(--ko-caption-size)/var(--ko-caption-lh) var(--ko-font);
  color: var(--ko-text-1);
  transition: border-color .15s ease;
}
.volume:hover { border-color: var(--ko-border-4); }
.volume.is-active { border-color: var(--ko-border-brand); }

.product-card__buy {
  align-self: start;
  margin-top: var(--ko-space-20);
  height: 40px;
  padding: 0 var(--ko-space-20);
  background: var(--ko-btn-brand-soft);
  color: var(--ko-text-links);
  font: 500 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font);
  transition: background-color .15s ease, color .15s ease;
}
/* Ховер по атомам (Secondary buttons/brand-hover): подложка чуть насыщеннее,
   текст остаётся оранжевым. Срабатывает только на самой кнопке */
.product-card__buy:hover { background: var(--ko-btn-brand-soft-hover); color: var(--ko-text-links); }

/* Состояние «уже в корзине». В макете его нет: без обратной связи кнопка
   выглядит нерабочей, а повторный клик уводил бы в корзину молча.
   Заливка — брендовая (Primary buttons), чтобы не заводить новый цвет.
   Отклонение зафиксировано в docs/26-logic-pass.md */
.product-card__buy.is-added,
.product-card__buy.is-added:hover { background: var(--ko-btn-brand); color: var(--ko-text-0); }

/* ---------- Мобильная плитка (макет spec tile в 26886:5930, ширина 166) ----------
   Картинка 160 с полями 16/24, между блоками 16, цена Large 1 20/26,
   название Small 15/20 в одну строку, чипсы и кнопка 14/20 */
@media (max-width: 768px) {
  .product-card { gap: var(--ko-space-16); }
  .product-card__media { height: 160px; padding: var(--ko-space-24) var(--ko-space-16); }
  .product-card__fav { top: 2px; right: 2px; width: 32px; height: 32px; }
  .product-card__fav svg { width: 20px; height: 20px; }
  .product-card__price { font: 600 var(--ko-large-size)/26px var(--ko-font); }
  .product-card__price-old { font-size: var(--ko-caption-xl-size); }
  /* Название в одну строку с многоточием — по макету 15/20 */
  .product-card__title {
    margin-top: var(--ko-space-4);
    height: 20px;
    font: 400 var(--ko-caption-xl-size)/20px var(--ko-font);
  }
  .product-card__volumes { margin-top: var(--ko-space-16); gap: var(--ko-space-8); }
  /* Чипс объёма по макету: поля 4/8, рамка 1.5, кегль 14/20 — высота 31 */
  .volume {
    height: auto;
    padding: var(--ko-space-4) var(--ko-space-8);
    border-width: 1.5px;
    font: 400 14px/20px var(--ko-font);
  }
  /* «В корзину»: поля 8/20, кегль 14/20 — высота 36 */
  .product-card__buy {
    margin-top: var(--ko-space-16);
    height: auto;
    padding: var(--ko-space-8) var(--ko-space-20);
    font: 500 14px/20px var(--ko-font);
  }
  /* Бейджи в мобильном макете мельче: −15% не должен спорить с ценой */
  .badge--sale { font: 500 var(--ko-caption-xl-size)/var(--ko-caption-xl-lh) var(--ko-font); }
  .badge { padding: 2px var(--ko-space-8); }
}

/* ---------- Карточка «нет в наличии» ----------
   Габариты плитки не меняются: фотография гасится прозрачностью,
   вместо «В корзину» — «Уведомить о поступлении» на нейтральной подложке.
   Состояния в макете нет — см. docs/22-stock-states.md */
.product-card--out .product-card__media img { opacity: .45; }
.product-card--out .product-card__price { color: var(--ko-text-3); }
.product-card__badge-out { position: absolute; top: -2px; left: -2px; }
.product-card__buy--out {
  background: var(--ko-btn-grey);
  color: var(--ko-text-2);
}
.product-card__buy--out:hover { background: var(--ko-bg-2); color: var(--ko-text-1); }

/* ---------- Карточка статьи ----------
   Макет: 460×452 = картинка 460×260 + 20 + текст 172
*/
.article-card { display: grid; gap: var(--ko-space-8); align-content: start; }
.article-card__media {
  aspect-ratio: 460 / 260;
  margin-bottom: var(--ko-space-12); /* 12 + gap 8 = 20 */
  background: var(--ko-bg-2);
  overflow: hidden;
}
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__meta {
  display: flex;
  gap: var(--ko-space-16);
  font: 400 var(--ko-small-size)/var(--ko-small-lh-long) var(--ko-font);
}
.article-card__rubric { color: var(--ko-text-accent); }
.article-card__date { color: var(--ko-text-3); }
.article-card__title {
  font: 500 var(--ko-base-size)/var(--ko-base-lh-long) var(--ko-font);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-card__lead {
  font: 400 var(--ko-small-size)/var(--ko-small-lh-long) var(--ko-font);
  color: var(--ko-text-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Карточка-иконка (услуги, доставка, оплата) ---------- */
.icon-card {
  display: grid;
  gap: var(--ko-space-12);
  padding: var(--ko-space-24);
  background: var(--ko-bg-1);
  /* цвет задаём явно: карточка встречается и на тёмной секции */
  color: var(--ko-text-1);
}
.icon-card__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--ko-bg-0);
  color: var(--ko-icon-brand);
  margin-bottom: var(--ko-space-16);
}
.icon-card__icon svg { width: 20px; height: 20px; }
.icon-card__title { font: 500 var(--ko-base-size)/var(--ko-base-lh) var(--ko-font); }
.icon-card__text {
  font: 400 var(--ko-caption-xl-size)/var(--ko-caption-xl-lh) var(--ko-font);
  color: var(--ko-text-2);
}
.icon-card--accent { background: var(--ko-bg-brand); color: var(--ko-text-0); }
.icon-card--accent .icon-card__text { color: rgba(255, 255, 255, .85); }
.icon-card--accent .icon-card__icon { color: var(--ko-icon-brand); }

/* ---------- Список-строки (категории, цифры) ---------- */
.row-list { display: grid; }
.row-list__item {
  display: grid;
  align-items: center;
  gap: var(--ko-space-32);
  border-top: 1px solid var(--ko-border-1);
  transition: color .15s ease;
}
.row-list > li:last-child .row-list__item,
.row-list__item:last-child { border-bottom: 1px solid var(--ko-border-1); }

/* ---------- Отзывы ----------
   Макет Review / 1 (26702:38795): карточка 672×388, паддинг 32.
   Шапка 28 (звёзды 24 с шагом 28, справа значок 24 + 12 + «2GIS»),
   +20 текст 140 (5 строк по 28), +8 ссылка 28, +40 автор 60.
*/
.review {
  display: flex;
  flex-direction: column;
  min-height: 388px;
  padding: var(--ko-space-32);
  background: var(--ko-bg-1);
}
.review__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ko-space-16); }
.review__source {
  display: inline-flex;
  align-items: center;
  gap: var(--ko-space-12);
  font: 400 var(--ko-base-size)/var(--ko-base-lh-long) var(--ko-font);
  color: #19aa1e;
  white-space: nowrap;
}
.review__source img { width: var(--ko-icon-normal); height: var(--ko-icon-normal); }
.review__stars { display: flex; gap: var(--ko-space-4); color: var(--ko-icon-brand); }
.review__stars svg { width: var(--ko-icon-normal); height: var(--ko-icon-normal); }
.review__stars .is-empty { color: var(--ko-bg-3); }
.review__text {
  margin-top: var(--ko-space-20);
  font: 400 var(--ko-small-size)/var(--ko-small-lh-long) var(--ko-font);
  color: var(--ko-text-2);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review__more {
  align-self: flex-start;
  margin-top: var(--ko-space-8);
  color: var(--ko-text-accent);
  font: 400 var(--ko-small-size)/var(--ko-small-lh-long) var(--ko-font);
}
.review__author {
  display: flex;
  align-items: center;
  gap: var(--ko-space-20);
  margin-top: auto;
  padding-top: var(--ko-space-40);
}
.review__avatar {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  flex: none;
  border-radius: var(--ko-radius-max);
  background: var(--ko-bg-3);
  object-fit: cover;
  font: 500 var(--ko-small-size)/1 var(--ko-font);
  color: var(--ko-text-0);
}
.review__name { font: 500 var(--ko-base-size)/var(--ko-base-lh-long) var(--ko-font); }
.review__date { font: 400 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font); color: var(--ko-text-3); }

/* Лента отзывов: карточка 672 (макет 26702:38559), гэп 20 */
.reviews .carousel { grid-auto-columns: 672px; }

/* Страница отзывов: две колонки по 700, гэп 20, текст не обрезается */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ko-space-20);
}
.reviews-grid .review__text {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}

@media (max-width: 768px) { .reviews-grid { grid-template-columns: 1fr; } }

/* Мобильная карточка отзыва (макет 26899:12878): поля 20 вместо 32,
   аватар 48, до автора 24. С десктопными отступами она занимала почти экран */
@media (max-width: 768px) {
  .review { min-height: 0; padding: var(--ko-space-20); }
  .review__head { gap: var(--ko-space-8); }
  .review__source { font-size: var(--ko-caption-xl-size); }
  .review__source img,
  .review__stars svg { width: var(--ko-icon-md); height: var(--ko-icon-md); }
  .review__text {
    margin-top: var(--ko-space-12);
    font-size: var(--ko-caption-xl-size);
    line-height: 22px;
    -webkit-line-clamp: 4;
  }
  .review__more { font-size: var(--ko-caption-xl-size); }
  .review__author { gap: var(--ko-space-12); padding-top: var(--ko-space-24); }
  .review__avatar { width: 48px; height: 48px; }
  .review__name { font-size: var(--ko-caption-xl-size); }
  .review__date { font-size: var(--ko-caption-size); }
}

@media (max-width: 1024px) { .reviews .carousel { grid-auto-columns: calc((100% - var(--ko-space-20)) / 2); } }
@media (max-width: 768px)  { .reviews .carousel { grid-auto-columns: 86%; } }

/* ---------- Сертификаты ----------
   Макет: карточка 186×310 = картинка + подпись
*/
.certificate { display: grid; grid-template-rows: 1fr auto; gap: var(--ko-space-12); height: 310px; }
.certificate__img {
  background: var(--ko-bg-2);
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity .15s ease;
}
.certificate:hover .certificate__img { opacity: .85; }
.certificate__caption { font: 400 var(--ko-caption-size)/var(--ko-caption-lh) var(--ko-font); color: var(--ko-text-3); }

/* ---------- Карусель ---------- */
.carousel {
  display: grid;
  grid-auto-flow: column;
  gap: var(--ko-space-20);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel > * { scroll-snap-align: start; }

.carousel--3 { grid-auto-columns: calc((100% - var(--ko-space-20) * 2) / 3); }
.carousel--6 { grid-auto-columns: calc((100% - var(--ko-space-20) * 5) / 6); }

@media (max-width: 1024px) {
  .carousel--3 { grid-auto-columns: calc((100% - var(--ko-space-20)) / 2); }
  .carousel--6 { grid-auto-columns: calc((100% - var(--ko-space-20) * 2) / 3); }
}
@media (max-width: 768px) {
  .carousel--3 { grid-auto-columns: 86%; }
  .carousel--6 { grid-auto-columns: 45%; }
}

/* Подвал карусели: слева индикатор 79×6, справа стрелки. Высота ряда 48 */
.carousel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ko-space-24);
  height: 48px;
  margin-top: var(--ko-space-48);
}
/* Индикатор: трек 79×6 на месте, заливка растёт по мере прокрутки */
.carousel-progress {
  position: relative;
  flex: none;
  align-self: flex-start;
  width: 79px;
  height: 6px;
  background: var(--ko-bg-2);
}
.carousel-progress__bar {
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 0;
  background: var(--ko-icon-2);
  /* без transition: за пределами экрана браузер не проигрывает анимацию
     и полоса застревает на нулевой ширине */
}

/* На мобильном карусели листаются свайпом: стрелок в макете нет,
   полоса прогресса стоит по центру под лентой (docs/18-mobile.md) */
@media (max-width: 768px) {
  .carousel-foot {
    justify-content: center;
    height: auto;
    margin-top: var(--ko-space-24);
  }
  .carousel-nav { display: none; }
  .carousel-progress { align-self: center; }
}

/* ---------- Аккордеон FAQ ---------- */
.accordion { display: grid; gap: var(--ko-space-10); }
.accordion__item { background: var(--ko-bg-1); transition: background-color .15s ease; }
.accordion__item:hover { background: var(--ko-bg-2); }
.accordion__item.is-open { background: var(--ko-bg-0); border: 1px solid var(--ko-border-1); }

.accordion__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ko-space-16);
  width: 100%;
  padding: var(--ko-space-20) var(--ko-space-24);
  text-align: left;
  font: 500 var(--ko-large-size)/var(--ko-large-lh) var(--ko-font);
}
.accordion__chevron {
  flex: none;
  width: var(--ko-icon-normal); height: var(--ko-icon-normal);
  color: var(--ko-icon-2);
  transition: transform .2s ease;
}
.accordion__item.is-open .accordion__chevron { transform: rotate(180deg); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .2s ease;
}
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__text {
  padding: 0 var(--ko-space-24) var(--ko-space-20);
  font: 400 var(--ko-small-size)/var(--ko-small-lh-long) var(--ko-font);
  color: var(--ko-text-2);
}

/* ---------- Пагинация ---------- */
.pagination { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ko-space-8); }
.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 48px;
  padding-inline: var(--ko-space-8);
  border: 1px solid var(--ko-border-1);
  font: 400 var(--ko-caption-xl-size)/1 var(--ko-font);
  transition: border-color .15s ease, background-color .15s ease;
}
.pagination__item:hover { border-color: var(--ko-border-4); }
.pagination__item.is-active {
  background: var(--ko-bg-brand);
  border-color: var(--ko-bg-brand);
  color: var(--ko-text-0);
}
.pagination__dots { border: 0; }

/* Пагинация каталога: слева «Показать ещё», справа страницы (макет 26846:22913) */
.pagination-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ko-space-24);
  flex-wrap: wrap;
}
.pagination-row__more { height: 48px; min-width: 150px; padding-block: 0; }

@media (max-width: 768px) {
  .pagination-row { justify-content: center; }
  .pagination-row__more { width: 100%; }
}

.pagination__next { border: 0; padding-inline: var(--ko-space-12); }

/* ---------- Хлебные крошки ---------- */
/* Ссылка возврата вместо крошек — на страницах, куда приходят из кабинета */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ko-space-8);
  font: 400 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font);
  color: var(--ko-text-2);
  transition: color .15s ease;
}
.back-link svg { width: 20px; height: 20px; }
/* Ссылка стоит вместо крошек, поэтому и отступы у неё те же */
.back-link { padding-block: var(--ko-space-24) var(--ko-space-40); }
.back-link:hover { color: var(--ko-text-accent); }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ko-space-8);
  /* снизу больше воздуха: заголовок страницы не должен липнуть к крошкам */
  padding-block: var(--ko-space-24) var(--ko-space-40);
  font: 400 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font);
  color: var(--ko-text-3);
}
.breadcrumbs a { color: var(--ko-text-2); }
.breadcrumbs a:hover { color: var(--ko-text-accent); }
.breadcrumbs li:not(:last-child)::after { content: " /"; color: var(--ko-text-3); }

/* На мобильном крошки компактнее: кегль 14 и меньше воздуха под ними */
@media (max-width: 768px) {
  .breadcrumbs,
  .back-link { padding-block: var(--ko-space-16) var(--ko-space-20); }
  .breadcrumbs { font-size: var(--ko-caption-xl-size); line-height: var(--ko-caption-xl-lh); }
}

/* ---------- Степпер количества 216×52 ----------
   «−», поле, «+» (плюс брендового цвета). Нужен на карточке товара и в корзине. */
/* Счётчик по макету (26766:1395): три отдельные ячейки — «минус» на серой
   подложке, поле белое с рамкой, «плюс» на бледно-оранжевой */
.stepper {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: var(--ko-space-4);
  align-items: stretch;
  width: 216px;
  height: var(--ko-control-h);
}
.stepper__btn {
  display: grid;
  place-items: center;
  height: 100%;
  background: var(--ko-bg-1);
  color: var(--ko-icon-3);
  transition: background-color .15s ease, color .15s ease;
}
.stepper__btn svg { width: var(--ko-icon-md); height: var(--ko-icon-md); }
.stepper__btn:hover { background: var(--ko-bg-2); }
.stepper__btn--plus { background: var(--ko-btn-brand-soft); color: var(--ko-icon-brand); }
.stepper__btn--plus:hover { background: var(--ko-btn-brand-soft-hover); }
.stepper__btn:disabled { color: var(--ko-bg-3); cursor: not-allowed; }
.stepper__btn:disabled:hover { background: var(--ko-bg-1); }
.stepper__input {
  width: 100%;
  height: 100%;
  border: 1px solid var(--ko-border-1);
  text-align: center;
  background: var(--ko-bg-0);
  font: 400 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font);
  appearance: textfield;
}
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.stepper__input:focus { outline: none; }

/* Компактный вариант для строки корзины: 128×44 */
.stepper--sm {
  width: 128px;
  height: 44px;
  grid-template-columns: 40px 1fr 40px;
  justify-self: center;
}
.stepper--sm .stepper__btn svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
  .stepper { width: 100%; }
}

/* ---------- Маркированный список ---------- */
.bullets { display: grid; gap: var(--ko-space-12); }
.bullets li {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: var(--ko-space-12);
  align-items: start;
  font: 400 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font);
  color: var(--ko-text-2);
}
.bullets li::before {
  content: "";
  width: 6px; height: 6px;
  margin-top: 9px;
  background: var(--ko-bg-brand);
  border-radius: var(--ko-radius-max);
}

/* ---------- Бенто-сетка «Магазин в цифрах» — 1900×1040 ----------
   Общий блок: главная (26701:8135) и «О компании» (27019:8082), обновлены 07.10.2026.
   Слева 2×2 карточки 340×360, справа фото 700×740: 4 колонки по 340 с гэпом 20 = 1420.
   Порядок в разметке — как в мобильном макете (2000+, фото, 4, 20+, 100%);
   на десктопе сетка заполняется по колонкам, и из него выходит макетное
   «2000+ | 20+» сверху и «4 | 100%» снизу, фото поставлено явно.
*/
.numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 360px);   /* 360 + гэп 20 + 360 = макетные 740 */
  grid-auto-flow: column;
  gap: var(--ko-space-20);
}
/* Подпись сверху, число и пояснение — единой парой у нижнего края:
   space-between разносил все три строки и число повисало в середине */
.numbers__card {
  display: flex;
  flex-direction: column;
  padding: var(--ko-space-24);
  background: var(--ko-bg-1);
}
.numbers__photo {
  grid-column: 3 / -1;
  grid-row: 1 / -1;
  overflow: hidden;
}
/* Кадр как в макете: по низу (стойка с плашкой «Хорошее место»), по горизонтали 62% —
   монитор у левого края, справа край стеллажа. Подобрано сличением с рендером Figma */
.numbers__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 100%; }

.numbers__label { font: 500 var(--ko-h6-size)/var(--ko-h6-lh) var(--ko-font); }
.numbers__value {
  margin-top: auto;
  font: 500 var(--ko-h2-size)/var(--ko-h2-lh) var(--ko-font);
}
/* В макете «Text/Text 2» #5A616C — второе поколение токенов, по docs/01-tokens.md
   сводится к --ko-text-2 */
.numbers__note {
  margin-top: var(--ko-space-20);
  font: 400 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font);
  color: var(--ko-text-2);
}

@media (max-width: 1024px) {
  /* Планшетного макета нет: те же пары карточек в две колонки, фото третьим рядом */
  .numbers {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, minmax(220px, auto)) auto;
  }
  .numbers__photo { grid-column: 1 / -1; grid-row: 3; min-height: 240px; }
  .numbers__value { font-size: 48px; line-height: 56px; }
}
@media (max-width: 768px) {
  /* Гэп 10 вместо 20 и подпись Large вместо Heading 6: в одну колонку карточки
     расходились по экрану, а 24-й заголовок спорил с самим числом
     (просьба заказчика 10 сентября 2026). Мобильный макет блока не обновлялся —
     пояснение остаётся Caption 14/20 */
  .numbers {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-rows: minmax(200px, auto);
    gap: var(--ko-space-10);
  }
  .numbers__photo { grid-column: auto; grid-row: auto; }
  .numbers__label { font: 500 var(--ko-large-size)/var(--ko-large-lh) var(--ko-font); }
  .numbers__value { font-size: 40px; line-height: 48px; }
  .numbers__note {
    margin-top: var(--ko-space-12);
    font: 400 var(--ko-caption-size)/var(--ko-caption-lh) var(--ko-font);
    color: var(--ko-text-3);
  }
}

/* ---------- Бренды — бегущая лента логотипов (Logo 27019:12873) — 1900×560 ----------
   Секция: 80 сверху, 120 снизу, 48 между заголовком и лентой (.section-head).
   Лента на всю ширину секции, карточки 318×220 с гэпом 20 уходят за края.
   По описанию компонента в макете — медленное движение справа налево, зациклено
   и беспрерывно. В разметке список дважды: трек сдвигается на длину одного списка
   плюс гэп между копиями (50 % трека + половина гэпа), и круг замыкается бесшовно.
   Скорость ~40 px/с: 59 карточек × 338 ≈ 19 940 px за 500 с (14.10.2026: было 46 / 390 с).
*/
.logo-marquee { --marquee-gap: var(--ko-space-20); --marquee-time: 500s; overflow: hidden; }
.logo-marquee__track {
  display: flex;
  gap: var(--marquee-gap);
  width: max-content;
  animation: ko-brands-run var(--marquee-time) linear infinite;
}
.logo-marquee__list { display: flex; gap: var(--marquee-gap); margin: 0; padding: 0; list-style: none; }
@keyframes ko-brands-run {
  to { transform: translateX(calc(-50% - var(--marquee-gap) / 2)); }
}
/* Обводка 2 — box-shadow inset, как обводка «внутрь» в Figma: не занимает место,
   логотип и подпись стоят ровно на паддинге 24 (рамка border сдвигала их на 2).
   Класс .brands занят чипсами брендов в catalog.css — отсюда .logo-marquee */
.brand-card {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 318px;
  height: 220px;
  padding: var(--ko-space-24);
  background: var(--ko-bg-0);
  box-shadow: inset 0 0 0 2px var(--ko-border-1);
  border-radius: var(--ko-radius);   /* в макете 12, убрано по просьбе заказчика 07.10.2026 */
}
.brand-card__logo { width: 100%; height: 100px; object-fit: contain; }
/* «Text/Text 2» #5A616C из макета — по docs/01-tokens.md это --ko-text-2 */
.brand-card__name { font: 400 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font); color: var(--ko-text-2); }
/* Бренд без файла логотипа (14.10.2026): название крупно по центру карточки вместо
   логотипа и подписи — как .brand-card__wordmark на странице «Бренды» */
.brand-card--text { justify-content: center; align-items: center; }
.brand-card--text .brand-card__wordmark { min-height: 100px; }
/* Карточка — ссылка на страницу бренда (лента на главной и сетка /brands/, 14.10.2026,
   docs/05 и docs/33). Состояния наведения у Logo в макете нет — ховер как у прочих
   обведённых элементов (.arrow-btn, .volume, .pagination__item): обводка темнеет до
   --ko-border-4, толщина и габарит прежние. Фокус с клавиатуры — внутрь карточки:
   снаружи его срезал бы overflow ленты. Пока курсор над лентой или в ней фокус, она
   стоит — по движущейся карточке трудно попасть. */
.logo-marquee__list > li { flex: none; }
a.brand-card { color: inherit; text-decoration: none; transition: box-shadow .2s; }
a.brand-card:hover { box-shadow: inset 0 0 0 2px var(--ko-border-4); }
a.brand-card:focus-visible { outline-offset: -2px; }   /* рамка фокуса 2 из base.css — поверх обводки */
.logo-marquee:focus-within .logo-marquee__track { animation-play-state: paused; }
@media (hover: hover) {
  .logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
}

@media (max-width: 768px) {
  /* Мобильный вариант (27019:12899): карточки 160×120, гэп 8, снизу у секции 80 */
  .brands-section { padding-bottom: var(--ko-space-80); }
  .logo-marquee { --marquee-gap: var(--ko-space-8); --marquee-time: 330s; }   /* 59 × 168 ≈ 9 910 px, ~30 px/с */
  .brand-card {
    width: 160px;
    height: 120px;
    padding: var(--ko-space-12);
    box-shadow: inset 0 0 0 1.5px var(--ko-border-1);
  }
  .brand-card__logo { height: 54px; }
  .brand-card__name { font: 400 var(--ko-mobile-small-size)/var(--ko-mobile-small-lh) var(--ko-font); }
  .brand-card--text .brand-card__wordmark { min-height: 0; }
  a.brand-card:hover { box-shadow: inset 0 0 0 1.5px var(--ko-border-4); }
}
/* Без анимации, если пользователь отключил её в системе: ленту листают вручную */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { overflow-x: auto; }
  .logo-marquee__track { animation: none; }
  .logo-marquee__list[aria-hidden] { display: none; }
}

/* ---------- Карусель сертификатов — 7 карточек в ряду ---------- */
.certificates .carousel { grid-auto-columns: calc((100% - var(--ko-space-20) * 6) / 7); }

@media (max-width: 1024px) { .certificates .carousel { grid-auto-columns: calc((100% - var(--ko-space-20) * 3) / 4); } }
@media (max-width: 768px)  {
  /* По макету видно две с половиной карточки. Высота больше не фиксирована:
     при 310 px и узкой колонке cover срезал документ сверху и снизу —
     теперь кадр по пропорции листа, а снимок вписывается целиком */
  .certificates .carousel { grid-auto-columns: 45%; }
  .certificate { height: auto; gap: var(--ko-space-8); }
  .certificate__img {
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: var(--ko-bg-1);
  }
}

/* ============================================================
   Строки категорий и плитка хитов — общие для главной и раздела
   каталога (catalog.html), поэтому лежат здесь, а не в home.css
   ============================================================ */

/* ---------- 2. Категории — 120 / 80, строка 104 ---------- */
/* Колонки заданы долями, а не пикселями: при контейнере уже 1420
   фиксированные 380/150/275 не помещались в правую колонку .split */
.categories__row {
  grid-template-columns: minmax(0, 380fr) minmax(0, 150fr) minmax(0, 275fr) 32px;
  min-height: 104px;
}
.categories__name { font: 500 var(--ko-h5-size)/var(--ko-h5-lh) var(--ko-font); }
.categories__count {
  font: 400 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font);
  color: var(--ko-text-3);
  white-space: nowrap;
}
.categories__desc {
  font: 400 var(--ko-small-size)/var(--ko-small-lh) var(--ko-font);
  color: var(--ko-text-3);
}
/* Стрелка по макету: 32×32, цвет Icon Color/icon-3 (#131927).
   Отклонение: серая Icon Color/icon-2 (#6d717f) — просьба заказчика 14.10.2026, docs/05 */
.categories__arrow {
  width: var(--ko-icon-lg);
  height: var(--ko-icon-lg);
  color: var(--ko-icon-2);
  transition: opacity .2s ease, transform .2s ease;
}
/* Состояние Hover из макета (cat row 26842:2663): стрелка уходит из правой
   колонки и появляется слева, строка сдвигается вправо. Сдвиг плавный —
   в макете это два отдельных состояния, рывок выглядел бы дёрганьем */
.categories__row {
  position: relative;
  padding-left: 0;
  transition: padding-left .2s ease;
}
.categories__arrow--lead {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: calc(var(--ko-icon-lg) / -2);
  opacity: 0;
  /* выезжает вместе с текстом — на то же расстояние */
  transform: translateX(calc((var(--ko-icon-lg) + var(--ko-space-24)) * -1));
}
.categories__row:hover { padding-left: calc(var(--ko-icon-lg) + var(--ko-space-24)); }
.categories__row:hover .categories__arrow--lead { opacity: 1; transform: none; }
/* правая стрелка уезжает вправо и гаснет */
.categories__row:hover .categories__arrow:not(.categories__arrow--lead) {
  opacity: 0;
  transform: translateX(var(--ko-space-24));
}
/* в состоянии Hover тексты приглушены: Text Color/text-2 и text-3 */
.categories__row:hover .categories__name { color: var(--ko-text-2); }

@media (max-width: 1280px) {
  /* Первая колонка держала 1fr против 275fr у описания и схлопывалась
     до трёх пикселей — название печаталось по букве в строку. Доля названия
     та же, что в базовом правиле (найдено 10 сентября 2026) */
  .categories__row { grid-template-columns: minmax(0, 380fr) auto minmax(0, 275fr) 32px; }
}
@media (max-width: 1024px) {
  .categories__row { grid-template-columns: 1fr auto 32px; gap: var(--ko-space-16); }
  .categories__name { font: 500 var(--ko-h6-size)/var(--ko-h6-lh) var(--ko-font); }
  .categories__desc { display: none; }
}
/* Мобильная строка 343×144 (макет 26886:5635): счётчик, название, описание
   в колонку, стрелка 32 справа */
@media (max-width: 768px) {
  .categories__row {
    grid-template-columns: minmax(0, 1fr) 32px;
    grid-template-areas:
      "count arrow"
      "name  arrow"
      "desc  arrow";
    align-content: start;
    align-items: start;
    gap: var(--ko-space-12) var(--ko-space-24);
    min-height: 144px;
    padding-block: var(--ko-space-20);
  }
  .categories__count { grid-area: count; font: 400 var(--ko-caption-size)/16px var(--ko-font); }
  .categories__name { grid-area: name; font: 500 var(--ko-large-size)/var(--ko-base-lh) var(--ko-font); }
  .categories__desc {
    grid-area: desc;
    display: block;
    font: 400 var(--ko-caption-size)/var(--ko-caption-lh) var(--ko-font);
  }
  .categories__arrow { grid-area: arrow; align-self: start; }
  .categories__arrow--lead { display: none; }
  .categories__row:hover { padding-left: 0; }
}

/* ---------- 3. Хиты продаж ----------
   Ряд 1: 3×460 (плитка 460×450), ряд 2: 4×340 (плитка 340×330), гэп 20/48
*/
.hits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ko-space-20);
}
.hits__grid--small {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--ko-space-48);
}
/* Вариант Mini: картинка 280 вместо 360 (в макете 240, см. catalog.css) */
@media (min-width: 769px) {
  .hits__grid--small .product-card__media { height: 280px; padding: 32px 40px; }
  .hits__grid--small .product-card__fav { top: 6px; right: 6px; }
}
.hits .btn { margin-top: var(--ko-space-48); min-width: 200px; }

@media (max-width: 1024px) {
  .hits__grid, .hits__grid--small { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Мобильный ряд: две плитки 166 с гэпом 12, между рядами 24 (макет 26886:5929).
   Обе сетки (3 крупных + 4 мелких) раскрываются в один поток через display:
   contents — иначе первая обрывалась на нечётной карточке и плитка «ломалась»
   на 3 и 4, чего в мобильном макете нет */
@media (max-width: 768px) {
  .hits .container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ko-space-24) var(--ko-space-12);
  }
  .hits__grid,
  .hits__grid--small { display: contents; }
  .hits .section-head,
  .hits .btn { grid-column: 1 / -1; }
  /* 24 от gap сетки + 8 = 32 по макету */
  .hits .section-head { margin-bottom: var(--ko-space-8); }
  /* В макете ровно 6 плиток (три ряда по две). Седьмая скрыта, иначе последний
     ряд остаётся с одной карточкой и пустой ячейкой справа */
  .hits__grid--small .product-card:nth-child(4) { display: none; }
  .hits .btn { margin-top: 0 !important; justify-self: stretch; }
}