/* ==========================================================================
   Каталог: корень (нода 1:1451) и категория (нода 1:2014)

   Оба экрана собраны из одних и тех же кусков, поэтому они в одном файле:
     `Content section` 1840×208 (y=215) — синяя плашка с белым H1 по центру;
     левое меню разделов `Frame 1171275463` 290×995 (y=476);
     колонка контента справа от меню, крошки — её первая строка (y≈478/486).

   Корень:    `Frame 1171275480` 1839×4155 — слайдеры подразделов 1504×566.
   Категория: `Frame 1171275519` 1840×1660 — панель фильтров 290 + сетка 1184.

   Числа не округлены до «красивых»: они сняты с макета и сверяются замером.
   Теней в макете нет ни одной — box-shadow здесь быть не может.
   ========================================================================== */

/* --- Шапка экрана: `Content section` 1840×208 (1:1466 / 1:2029) ------------
   Тёмно-синяя плашка во всю ширину контейнера, радиус 32, внутри один белый
   заголовок по центру. Крошек тут нет — в макете они уехали в колонку
   контента, поэтому общий page-head не подходит.

   Плашка начинается на y=215. Шапка сайта в макете кончается на 190 (зазор 25),
   у нас — на ~207: секции header.css выше и трогать их нельзя. Недостающие 8
   добираем здесь, тем же способом, каким page-head в page-common.css
   откалиброван по абсолютной координате крошек (y=222). */

/* Плашка заголовка (1:1466) начинается на 215, шапка кончается на 190 —
   отступ 25. Было 8: остальные 17 сидели в нижнем падинге шапки. */
.catalog-head { padding-top: 25px; }

.catalog-head__plate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 208px;      /* 75 + строка 58 + 75; при переносе заголовка растёт */
  padding: var(--space-64);
  border-radius: var(--radius-xl);
  background: var(--grad-blue-band);   /* `bg_blue_gradient_2`: #0E1534 → #4867BF на 50 % → #0E1534 */
}

.catalog-head__title {
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-48);
  color: var(--color-text-invert);
  text-align: center;
}

/* Крошки внутри синей плашки наследуют серый из page-common.css и на
   градиенте читаются как чёрные. Здесь все звенья белые: ссылки приглушены,
   текущая и ховер — чистый белый (правка 2026-08-18). */
.catalog-head__plate .breadcrumbs__list { color: rgba(255, 255, 255, 0.72); }
.catalog-head__plate .breadcrumbs__item a:hover { color: var(--color-text-invert); }
.catalog-head__plate .breadcrumbs__item [aria-current] { color: var(--color-text-invert); }

/* Поиск внутри синей плашки — только на выдаче поиска (правка 2026-08-20).
   Белое поле по центру, кнопка справа; на телефоне кнопка уходит под поле. */

.catalog-search {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: min(640px, 100%);
  padding: 6px 6px 6px var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
}

.catalog-search__icon {
  display: flex;
  flex: none;
  color: var(--color-text-muted);
}

.catalog-search__icon svg { width: 22px; height: 22px; }

.catalog-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font-size: var(--fs-20);
  letter-spacing: var(--ls-20);
  color: var(--color-text);
}

.catalog-search__input:focus { outline: none; }

.catalog-search__submit {
  flex: none;
  padding: 10px var(--space-24);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-text-invert);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-16);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}

.catalog-search__submit:hover { background: var(--color-brand-hover, #35509e); }

@media (max-width: 640px) {
  /* Телефон: иконка и поле — первой строкой, кнопка во всю ширину под ними.
     На flex-wrap поле переносилось отдельно от иконки и форма распадалась
     на три строки. */
  .catalog-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-8) var(--space-8);
    border-radius: var(--radius-lg);
    padding: var(--space-12);
  }

  .catalog-search__input { font-size: var(--fs-16); }
  .catalog-search__submit { grid-column: 1 / -1; width: 100%; }
}

/* --- Каркас: меню слева, контент справа -----------------------------------
   Меню 290, контент — остаток. Зазор 56 (1840 − 290 − 1494) на экране
   категории; на корне каталога дизайнер поставил 45, чтобы карточки
   подразделов вышли ровно по 272 — оставляем как нарисовано. */

.catalog {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  /* Меню занимает обе строки и в коротких разделах (пустой, 3 товара) выше их
     суммы. С двумя `auto` браузер раздаёт излишек поровну и строка крошек
     разъезжается на 136 px. `min-content 1fr` отдаёт весь излишек второй
     строке — крошки остаются на 486, контент на 548, как в макете. */
  grid-template-rows: min-content 1fr;
  column-gap: 56px;
  align-items: start;
  margin-top: 53px;        /* 476 − 423: низ плашки заголовка → верх меню */
  /* До CTA в макете 190 (4631 → 4821 на корне, 2136 → 2326 в категории).
     Половину ритма даёт сама CTA-секция (front-cta.css), половину — мы. */
  padding-bottom: calc(var(--section-gap) / 2);
}

.catalog--root { column-gap: 45px; }

.catalog-nav    { grid-column: 1; grid-row: 1 / span 2; }
.catalog__top   { grid-column: 2; grid-row: 1; }
.catalog__content { grid-column: 2; grid-row: 2; }

/* Строка над контентом: крошки слева, кнопка сортировки справа.
   Высота строки задана кнопкой (40), крошки центрируются по ней. */

.catalog__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: 40px;
  margin-bottom: var(--space-32);   /* 516 → 548 */
}

/* На корне каталога кнопки сортировки нет, и ритм другой: крошки на 478,
   контент на 525. */
.catalog__top--plain {
  min-height: 0;
  padding-top: 2px;
  margin-bottom: 28px;
}

.catalog__top .breadcrumbs { margin-bottom: 0; }

/* Крошки каталога — отдельная нода (`Frame 1171275459`, 1:1469 / 1:2183),
   и зазор между звеньями там 12, а не 8, как в `Frame 1171275442` на всех
   остальных страницах. Общий стиль оставляем как есть, правим только здесь. */
.catalog__top .breadcrumbs__list,
.catalog__top .breadcrumbs__item { gap: var(--space-12); }

/* --- Левое меню разделов: компонент 1:3967, 290×95 ------------------------ */

.catalog-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);      /* шаг 103 при высоте пункта 95 */
}

.catalog-nav__item {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: var(--space-8);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: background var(--dur-fast) var(--ease-out);
}

.catalog-nav__media {
  flex-shrink: 0;
  width: 79px;
  height: 79px;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  overflow: hidden;
}

.catalog-nav__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catalog-nav__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  flex: 1 1 0;
}

.catalog-nav__title,
.catalog-nav__note {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.catalog-nav__title {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-16);
  color: var(--color-brand);
}

.catalog-nav__note {
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-14);
  color: var(--color-text-muted);
}

.catalog-nav__item:hover { background: var(--color-bg-soft); }

/* Активный раздел — синий градиент подвала (`bg_blue_gradient_2`),
   белый заголовок; подпись остаётся серой, как нарисовано. */
.catalog-nav__item.is-active {
  background: var(--grad-blue-cta);
}

.catalog-nav__item.is-active .catalog-nav__title { color: var(--color-text-invert); }
.catalog-nav__item.is-active .catalog-nav__media { background: var(--color-bg); }

/* --- Кнопка «Сортировка»: компонент 1:3875, 188×40 ------------------------
   Плашка своя, а список вариантов и отправка — штатные, от WooCommerce:
   select лежит поверх плашки прозрачным, чтобы не потерять логику Woo. */

.catalog-sort {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  flex-shrink: 0;
  width: 188px;
  height: 40px;
  padding-inline: var(--space-16);
  border-radius: var(--space-8);
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.catalog-sort__label {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  white-space: nowrap;
}

.catalog-sort__icon { display: flex; }
.catalog-sort__icon svg { width: 24px; height: 24px; }

.catalog-sort .woocommerce-ordering {
  position: absolute;
  inset: 0;
  margin: 0;
}

/* Сам `select` прозрачный — его роль отыгрывает синяя пилюля под ним. Но
   выпадающий список рисует браузер, и он берёт цвет текста у `select`: с
   унаследованным от пилюли белым пункты были белыми по белому. Поэтому
   цвет и фон задаём и элементу, и его `option` явно. */
.catalog-sort .woocommerce-ordering select {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--space-8);
  background: var(--color-bg);
  color: var(--color-text);
  opacity: 0;
  cursor: pointer;
}

.catalog-sort .woocommerce-ordering option {
  background: var(--color-bg);
  color: var(--color-text);
}

.catalog-sort:focus-within { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* ==========================================================================
   КОРЕНЬ КАТАЛОГА — слайдер подразделов (нода 1:1474, 1504×566)
   ========================================================================== */

.cat-slider {
  position: relative;
  padding: var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
}

.cat-slider + .cat-slider { margin-top: var(--space-24); }

.cat-slider__title {
  margin-bottom: var(--space-64);   /* 71 → 135 */
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
  text-align: center;
}

/* Лента: пять карточек в ряд, листается страницами по пять.
   Без JS остаётся обычная горизонтальная прокрутка с прилипанием. */
.cat-slider__viewport {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.cat-slider__viewport::-webkit-scrollbar { display: none; }

/* Плитка подраздела — компонент 1:1477, 272×292: фото 252 + отбивка 16 +
   строка названия 24. Подписи под названием в макете нет.

   Имя `cat-tile`, а не `cat-card`: `.cat-card` в теме уже занят карточкой
   раздела с главной (front-products.css) — другой компонент с такими же
   именами элементов. Файлы сейчас не встречаются на одной странице, но
   совпадение имён рано или поздно выстрелит. */
.cat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 0 0 calc((100% - 80px) / 5);   /* 5 плиток, 4 зазора по 20 */
  scroll-snap-align: start;
}

.cat-tile__media {
  display: block;
  height: 252px;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  overflow: hidden;
}

.cat-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cat-tile__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-20);
  color: var(--color-brand);
  text-align: center;
}

.cat-tile:hover .cat-tile__title { color: var(--color-brand-hover); }

/* Стрелки: круг 56 у самых краёв панели (замер по рендеру — 4 px от края,
   метаданные Figma тут врут), по вертикали — 228 от верха панели. */
.cat-slider__arrow {
  position: absolute;
  top: 228px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-text-invert);
  transition: background var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.cat-slider__arrow svg { width: 34px; height: 34px; }
.cat-slider__arrow:hover { background: var(--color-brand-hover); }
.cat-slider__arrow[disabled] { opacity: .3; cursor: default; }

.cat-slider__arrow--prev { left: 4px; }
.cat-slider__arrow--prev svg { transform: rotate(180deg); }
.cat-slider__arrow--next { right: 4px; }

/* Точки: пилюля 143×43, четыре кружка 14.33, активный синий (нода 1:1483). */
.cat-slider__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14.33px;
  width: max-content;
  margin: var(--space-64) auto 0;   /* 427 → 491 */
  padding: 14.33px 21.5px;
  border-radius: var(--radius-pill);
  background: var(--color-border-soft);
}

.cat-slider__dot {
  width: 14.33px;
  height: 14.33px;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  opacity: .3;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}

.cat-slider__dot.is-active {
  background: var(--color-brand);
  opacity: 1;
}

/* ==========================================================================
   КАТЕГОРИЯ — фильтры и сетка товаров (нода 1:2072, 1494)
   ========================================================================== */

.catalog__layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);   /* 290 + 20 + 1184 = 1494 */
  gap: 20px;
  align-items: start;
}

.catalog__layout--full { grid-template-columns: minmax(0, 1fr); }

/* Развёрнутая панель не липнет к кнопкам топбара (правка 2026-08-18). */
.catalog-filters-wrap { margin-top: var(--space-16); }

/* --- Панель фильтров: `Category list` 1:2073 ------------------------------ */

.catalog-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-48);
  padding: var(--space-16);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--space-8);
  background: var(--color-bg);
}

/* Группы идут в ряд и переносятся по ширине панели: столбиком (как было
   раньше) на каждую категорию приходилось по экрану прокрутки. Раскрытая
   группа тянет только свою колонку — отсюда align-items: start.
   (правка 2026-08-18) */
.catalog-filters__inner {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-items: start;
  gap: var(--space-16) var(--space-32);
}

/* Разделительных линий между группами в сетке нет — они рисовались для
   вертикального списка. */
.catalog-filters__inner > * + * {
  padding-top: 0;
  border-top: 0;
}

/* «В наличии» — такой же элемент сетки, заголовок над переключателем. */
.filter-toggle-row {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
}

.filter-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  list-style: none;
}

.filter-group__head::-webkit-details-marker { display: none; }

.filter-group__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text);
}

.filter-group__caret {
  display: flex;
  color: var(--color-brand);
  transition: transform var(--dur-base) var(--ease-out);
}

.filter-group__caret svg { width: 15px; height: 8px; }

/* Свёрнутая группа: шеврон вниз (в макете так показан «Материал»). */
.filter-group:not([open]) .filter-group__caret { transform: rotate(180deg); }

.filter-group__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin-top: var(--space-24);
}

/* Чекбокс каталога мельче общего (20 против 28) и с тонкой синей рамкой. */
.filter-check {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
}

.filter-check input { position: absolute; opacity: 0; width: 0; height: 0; }

.filter-check__box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: transparent;
  transition: background var(--dur-base) var(--ease-out);
}

/* Галочка нарисована с preserveAspectRatio="none" — задаём только ширину,
   иначе она сплющится. */
.filter-check__box svg { width: 12px; }

.filter-check input:checked + .filter-check__box {
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.filter-check input:focus-visible + .filter-check__box {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.filter-check__label {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-14);
  color: var(--color-text-muted);
}

/* --- Переключатель «Да / Нет» (нода 1:2144) ------------------------------- */

.filter-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.filter-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.filter-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

/* inline-flex, а не inline: у строчной метки появляется место под выносной
   элемент, и строка «В наличии» вырастает с 28 до 41 px. */
.filter-toggle__option { display: inline-flex; cursor: pointer; }

.filter-toggle__option span,
.filter-toggle__sep {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-6);
  color: var(--color-text);
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.filter-toggle__sep { padding-inline: 0; }

.filter-toggle input:checked + span {
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.filter-toggle input:focus-visible + span {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* --- «Очистить» ----------------------------------------------------------- */

.catalog-filters__foot { display: flex; }

.catalog-filters__clear {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-brand);
  transition: color var(--dur-fast) var(--ease-out);
}

.catalog-filters__clear:hover { color: var(--color-brand-hover); }

/* --- Сетка товаров -------------------------------------------------------- */

.products-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 40px;   /* шаг ряда 385.8 при высоте карточки 345.8 */
}

/* --- Карточка товара: компонент 1:3944, 220.8×345.8 ----------------------- */

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.product-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  overflow: hidden;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: var(--space-4);
}

.product-card__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-20);
  color: var(--color-text);
}

.product-card__title a { transition: color var(--dur-fast) var(--ease-out); }
.product-card:hover .product-card__title a { color: var(--color-brand); }

.product-card__supplier {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-14);
  color: var(--color-text-muted);
}

.product-card__stock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: 20px;
  color: var(--color-stock);
}

.product-card__stock.is-out { color: var(--color-text-muted); }

.product-card__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-success-dot);
}

.product-card__stock.is-out .product-card__dot { background: var(--color-border); }

.product-card__price {
  margin-top: var(--space-12);   /* 4 (gap) + 12 = 16 по макету */
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-20);
  color: var(--color-brand);
}

/* Карточка узкая (210–220 px): длинную надпись даём на шаг мельче. */
.product-card__price--request {
  font-size: var(--fs-16);
  letter-spacing: var(--ls-16);
}

.product-card__price del { opacity: .5; font-size: var(--fs-14); }
.product-card__price ins { text-decoration: none; }

/* --- Пагинация: нода 1:2172 ----------------------------------------------
   Всё синим 24 Medium, текущая страница — в рамке 37×37, многоточие тусклее.
   Отличается от общей `.ag-pagination` (там залитая пилюля), поэтому свой класс. */

.catalog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-top: var(--space-48);
}

.catalog-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 37px;
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-24);
  color: var(--color-brand);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.catalog-pagination .page-numbers:hover { opacity: .6; }

.catalog-pagination .page-numbers.current {
  min-width: 37px;
  padding: var(--space-4);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-sm);
}

.catalog-pagination .page-numbers.dots { opacity: .6; }

.catalog-pagination .prev,
.catalog-pagination .next { margin-inline: var(--space-8); }

/* Стрелки те же, что в пагинации сертификатов (icon-pager-prev/next);
   в макете каталога они приглушены до 50 %. */
.catalog-pagination .prev svg,
.catalog-pagination .next svg { width: 12px; height: 14px; opacity: .5; }

/* ==========================================================================
   Ниже 1920 px — брейкпоинтов в макете нет, приняты вёрсткой
   (см. «Дыры макета» в _figma/00-INDEX.md).
   ========================================================================== */

/* Стрелки слайдера остаются на 228 px на всех ширинах: высота фото карточки
   фиксирована (252), а заголовок раздела в одну строку — сдвигаться нечему. */

@media (max-width: 1600px) {
  .products-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat-tile { flex: 0 0 calc((100% - 60px) / 4); }
}

/* Ниже 1450 карточка в четырёх колонках ужимается до 160 px — фото товара
   становится нечитаемым, поэтому переходим на три. */
@media (max-width: 1450px) {
  .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cat-tile { flex: 0 0 calc((100% - 40px) / 3); }
}

@media (max-width: 1280px) {
  /* Меню разделов уходит наверх и раскладывается в строку: колонка 290 px
     рядом с сеткой из четырёх карточек уже не помещается. */
  .catalog,
  .catalog--root { display: block; }

  .catalog-nav {
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: var(--space-32);
  }

  .catalog-nav__item { width: 290px; max-width: 100%; }
}

@media (max-width: 1100px) {
  /* Панель фильтров встаёт над сеткой: рядом с тремя карточками места нет. */
  .catalog__layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  /* Плашка держит 208 только под 1920: на узком экране заголовок в две-три
     строки, поля 64 съедают ширину — ужимаем и высоту, и поля. */
  .catalog-head__plate { min-height: 140px; padding: var(--space-32); }
  .catalog-head__title { font-size: var(--fs-32); letter-spacing: var(--ls-32); }
  .catalog { margin-top: var(--space-32); }
  .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-tile { flex: 0 0 calc((100% - 20px) / 2); }
  .cat-slider { padding: var(--space-16); }
  .cat-slider__title { margin-bottom: var(--space-24); }
  .cat-slider__dots { margin-top: var(--space-24); }
  .cat-slider__arrow { display: none; }
}

@media (max-width: 560px) {
  .catalog__top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-16);
  }

  .products-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-tile { flex: 0 0 100%; }
  .catalog-nav__item { width: 100%; }
}

/* --- Подразделы внутри категории -------------------------------------------
   Тот же слайдер плиток, что на корне, но без заголовка секции: имя раздела
   уже стоит в плашке над контентом. Стрелки центрируются по фото плитки
   (32 падинг + 126 половина фото), а не по корневым 228 с заголовком. */

.cat-slider--sub { margin-bottom: var(--space-24); }
.cat-slider--sub .cat-slider__arrow { top: 158px; }


/* ============================================================================
   ВОССТАНОВЛЕНИЕ 2026-08-18: стили редизайна каталога (правки других
   разработчиков от 2026-08-13/14) были случайно затёрты заливкой старой
   копии файла. Блок отстроен заново по разметке archive-product.php,
   catalog-sidebar.php, product-row.php и фигма-нодам из их комментариев
   (Sidebar 290x511 — 40904:24698, Product Row 1530x88 — 40891:20559,
   вид по умолчанию «список» — 40891:19768). Правится как обычный код.
   ========================================================================== */

/* --- Плашка заголовка: крошки внутри, колонкой по центру ------------------- */

.catalog-head__plate {
  flex-direction: column;
  gap: var(--space-24);
}

.catalog-head__plate .breadcrumbs { margin-bottom: 0; }

/* --- Каркас: топбар во всю ширину, ниже сайдбар 290 + контент -------------- */

.catalog.is-list,
.catalog:not(.is-list) {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: var(--space-24) 56px;
}

.catalog__lead { grid-column: 1 / -1; min-width: 0; }
.catalog__content { min-width: 0; }
.catalog__body { display: flex; flex-direction: column; gap: var(--space-32); }

/* --- Топбар: найдено / фильтры / сортировка / вид -------------------------- */

.catalog-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.catalog-bar__found {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-20);
}

.catalog-bar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.catalog-bar__filters {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 10px var(--space-16);
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-brand);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-20);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.catalog-bar__filters:hover,
.catalog-bar__filters.is-open {
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.catalog-bar__filters-icon { display: flex; }
.catalog-bar__filters-icon svg { width: 22px; height: 22px; }

.catalog-bar__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  color: var(--color-text-invert);
  font-size: var(--fs-16);
}

.catalog-bar__filters.is-open .catalog-bar__badge,
.catalog-bar__filters:hover .catalog-bar__badge {
  background: var(--color-bg);
  color: var(--color-brand);
}

/* Сортировка: поверх нативного селекта лежит подпись с кареткой. */
.catalog-sort {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  width: auto;              /* глушим 188px из дореформенного блока выше */
  height: auto;
  padding: 10px var(--space-16);
  border: 1px solid #E3E7EE;   /* [RAW] рамка контролов топбара */
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-20);
  letter-spacing: var(--ls-20);
}

.catalog-sort__label { white-space: nowrap; }

.catalog-sort__caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.catalog-sort form,
.catalog-sort .woocommerce-ordering { position: absolute; inset: 0; }

.catalog-sort select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Переключатель вида: два квадрата, активный — синий. */
.view-toggle {
  display: inline-flex;
  gap: var(--space-8);
}

.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid #E3E7EE;   /* [RAW] */
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.view-toggle__btn.is-active {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-text-invert);
}

.view-toggle__grid {
  display: grid;
  grid-template-columns: repeat(2, 8px);
  gap: 3px;
}

.view-toggle__grid i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
}

.view-toggle__list {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.view-toggle__list i {
  width: 19px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

/* --- Чипы применённых фильтров --------------------------------------------- */

.filter-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-16);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 8px var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--color-blue-50);
  color: var(--color-text);
  font-size: var(--fs-16);
}

.filter-chip__x { position: relative; width: 12px; height: 12px; }

.filter-chip__x::before,
.filter-chip__x::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 0;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background: currentColor;
}

.filter-chip__x::before { transform: rotate(45deg); }
.filter-chip__x::after { transform: rotate(-45deg); }

.filter-chip:hover { background: var(--color-brand); color: var(--color-text-invert); }

.filter-chips__reset {
  margin-left: var(--space-8);
  color: var(--color-brand);
  font-size: var(--fs-16);
  text-decoration: underline;
}

/* --- Сайдбар «Каталог продукции» (290, белая панель с рамкой) -------------- */

.side-cat {
  padding: var(--space-24);
  border: 1px solid #E3E7EE;   /* [RAW] */
  border-radius: var(--radius-lg);
  background: var(--color-bg);
}

.side-cat__title {
  margin-bottom: var(--space-16);
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-20);
}

.side-cat__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-cat__item { border-top: 1px solid #EEF1F6; }   /* [RAW] */
.side-cat__item:first-child { border-top: 0; }

.side-cat__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.side-cat__link {
  flex: 1 1 auto;
  padding: var(--space-12) 0;
  font-size: var(--fs-16);
  letter-spacing: var(--ls-16);
  line-height: var(--lh-tight);
  transition: color var(--dur-fast) var(--ease-out);
}

.side-cat__link:hover,
.side-cat__link[aria-current],
.side-cat__item.is-current > .side-cat__row .side-cat__link { color: var(--color-brand); }

.side-cat__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.side-cat__caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease-out);
}

.side-cat__item.is-open .side-cat__caret { transform: rotate(225deg) translate(-2px, -2px); }

.side-cat__sub {
  display: none;
  margin: 0 0 var(--space-12);
  padding: 0;
  list-style: none;
}

.side-cat__item.is-open .side-cat__sub { display: block; }

.side-cat__sub-link {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 6px 0 6px var(--space-8);
  font-size: var(--fs-16);
  letter-spacing: var(--ls-16);
  line-height: var(--lh-tight);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

.side-cat__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.side-cat__sub-link:hover,
.side-cat__sub-link.is-active { color: var(--color-brand); }

/* --- Виды: список против плитки -------------------------------------------- */

.catalog.is-list .products-grid { display: none; }
.catalog:not(.is-list) .products-list { display: none; }

/* --- Список товаров (Product Row 1530x88) ---------------------------------- */

.products-list {
  display: flex;
  flex-direction: column;
  border: 1px solid #E3E7EE;   /* [RAW] */
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  overflow: hidden;
}

.products-list__head,
.product-line {
  display: grid;
  /* Последняя колонка шире макетных 140: вместо суммы там надпись
     «Запросить оптовый прайс» (правка 2026-09-02). */
  grid-template-columns: 72px minmax(0, 1fr) 180px 150px 200px;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-12) var(--space-24);
}

.products-list__head {
  border-bottom: 1px solid #E3E7EE;   /* [RAW] */
  background: var(--color-bg-soft);
  font-size: var(--fs-16);
  letter-spacing: var(--ls-16);
  color: var(--color-text-muted);
}

.products-list__head-price { text-align: right; }

.product-line {
  min-height: 88px;
  border-top: 1px solid #EEF1F6;   /* [RAW] */
  transition: background var(--dur-fast) var(--ease-out);
}

.product-line:first-of-type { border-top: 0; }
.product-line:hover { background: var(--color-bg-soft); }

.product-line__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.product-line__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-line__title {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-20);
  line-height: var(--lh-tight);
}

.product-line__sku {
  font-size: var(--fs-16);
  letter-spacing: var(--ls-16);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-line__stock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-16);
  letter-spacing: var(--ls-16);
}

.product-line__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2FA84F;   /* [RAW] зелёная точка наличия из макета */
}

.product-line__stock.is-out .product-line__dot { background: var(--color-text-muted); }

.product-line__price {
  font-size: var(--fs-20);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-20);
  color: var(--color-brand);
  text-align: right;
}

/* Надпись вместо цены длиннее суммы — ставим на шаг мельче, чтобы строка
   каталога не растягивалась по высоте. */
.product-line__price--request {
  font-size: var(--fs-16);
  letter-spacing: var(--ls-16);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

/* --- Заглушка пустого раздела ---------------------------------------------- */

.stub {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-64) var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
}

.stub__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  max-width: 560px;
  text-align: center;
}

.stub__title {
  font-size: var(--fs-32, 32px);
  font-weight: var(--fw-medium);
}

.stub__lead {
  font-size: var(--fs-20);
  line-height: var(--lh-loose);
  color: var(--color-text-muted);
}

/* --- Адаптив ---------------------------------------------------------------- */

@media (max-width: 1100px) {
  .catalog.is-list,
  .catalog:not(.is-list) { grid-template-columns: minmax(0, 1fr); }

  /* Одна колонка: сбрасываем жёсткую привязку контента ко второй колонке
     (строка 146 старого блока) — иначе грид добавлял неявную колонку и
     сайдбар наезжал на топбар. Порядок: топбар → товары → меню разделов. */
  .catalog__lead,
  .catalog__content,
  .side-cat { grid-column: 1; grid-row: auto; }

  .catalog__lead { order: 0; }
  .catalog__content { order: 1; }
  .side-cat { order: 2; }
  .products-list__head { display: none; }
  .products-list__head + .product-line { border-top: 0; }

  .product-line {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: var(--space-8);
    min-height: 0;
    padding: var(--space-16);
  }

  .product-line__media { grid-row: 1 / 3; }
  .product-line__sku { display: none; }
  .product-line__stock { grid-column: 2; }
  .product-line__price { text-align: left; grid-column: 2; }
}

@media (max-width: 640px) {
  .catalog-bar { flex-direction: column; align-items: flex-start; }
  .catalog-bar__controls { width: 100%; justify-content: space-between; }
  .catalog-sort { flex: 1 1 auto; justify-content: space-between; }
}


/* --- Корень каталога: два вида в одной секции ------------------------------
   В разметке у каждой категории лежат сразу карусель плиток
   (.cat-slider__frame) и строки списка (.cat-rows). Показываем тот вид,
   что выбран переключателем: без этих правил рисовались оба сразу и
   секция вытягивалась на десяток экранов, а кнопки вида выглядели
   нерабочими (правка 2026-08-18). */

.catalog.is-list .cat-slider__frame { display: none; }
.catalog:not(.is-list) .cat-rows { display: none; }

.cat-rows {
  display: flex;
  flex-direction: column;
  border: 1px solid #E3E7EE;   /* [RAW] рамка панелей каталога */
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  overflow: hidden;
}

/* Строка подкатегории (40891:19793, 64 px): фото, название, стрелка. */
.cat-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--space-16);
  min-height: 64px;
  padding: var(--space-8) var(--space-24);
  border-top: 1px solid #EEF1F6;   /* [RAW] */
  color: var(--color-text);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.cat-row:first-child { border-top: 0; }
.cat-row:hover { background: var(--color-bg-soft); color: var(--color-brand); }

.cat-row__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.cat-row__media img { width: 100%; height: 100%; object-fit: contain; }

.cat-row__title {
  font-size: var(--fs-20);
  letter-spacing: var(--ls-20);
  line-height: var(--lh-tight);
}

.cat-row__arrow {
  color: var(--color-brand);
  font-size: var(--fs-20);
  text-align: right;
}

@media (max-width: 640px) {
  .cat-row { grid-template-columns: 40px minmax(0, 1fr) 20px; padding: var(--space-8) var(--space-16); }
  .cat-row__media { width: 40px; height: 40px; }
  .cat-row__title { font-size: var(--fs-16); }
}