/* ==========================================================================
   Каталог. Плитка `.prodtile` и сетка `.prodgrid` живут в product.css —
   здесь только то, чего нет на других страницах: навигация по разделам,
   панель фильтров и шапки разделов.
   ========================================================================== */

/* --- Разделы картинками, как на старом сайте ---------------------------- */
.catgrid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  margin-top: var(--sp-7);
}

.catcard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}

.catcard:hover,
.catcard:focus-visible {
  border-color: var(--c-line-strong);
  transform: translateY(-3px);
}

/* Снимки товаров сняты на белом. Держим белую подложку, а не красим фон
   разделом — иначе по краю кадра идёт заметная ступенька. */
.catcard__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
}

.catcard__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--d-slow) var(--e-out);
}

.catcard:hover .catcard__media img { transform: scale(1.05); }

.catcard__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
}

.catcard__name {
  font-family: var(--f-head);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.25;
}

.catcard__n {
  font-size: var(--fs-label);
  color: var(--c-text-dim);
  font-variant-numeric: tabular-nums;
}

/* --- Полоса фильтров -----------------------------------------------------
   25.08.2026. Была панель в полстраницы: четыре группы столбцами,
   40 кнопок. Заказчик попросил «одну красную полосу, которую можно
   двигать». Стало: все группы в один ряд, ряд прокручивается вбок —
   колесом, перетаскиванием и стрелками по краям. Полоса залипает под
   шапкой, чтобы отбор был под рукой и в середине списка.
   ------------------------------------------------------------------------ */

.catbar {
  /* Липкой полоса была ровно один заход: заказчик просил её не залипать
     на экране (25.08.2026). Заодно ушла причина рывков — залипший узел
     с тенью перерисовывался поверх подвижного фона на каждом кадре. */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* Полоса стоит последней в шапке каталога — вплотную к товарам,
     а не в отрыве под заголовком (правка заказчика 25.08.2026) */
  margin-top: var(--sp-7);
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background:
    radial-gradient(120% 220% at 88% 0%, var(--c-brand-mid), transparent 58%),
    linear-gradient(118deg, var(--c-brand) 0%, var(--c-brand-deep) 62%, #3E0C0D 100%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

/* Сам прокручиваемый ряд. Полосу прокрутки прячем: её роль играют
   стрелки по краям и растушёвка у обрезанного конца. */
.catbar__rail {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* scroll-behavior здесь НЕ ставим: плавность нужна только стрелкам,
     а на колесе и протяжке она накладывает анимации и полоса едет
     рывками. Стрелки просят её сами — scrollBy({behavior:'smooth'}). */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px var(--sp-2);
  cursor: grab;
}
.catbar__rail::-webkit-scrollbar { display: none; }
/* Пока тащат — курсор-кулак и запрет выделения текста: без него
   протяжка выделяет подписи групп синим */
.catbar__rail.is-drag { cursor: grabbing; user-select: none; }
/* `pointer-events: none` у кнопок здесь НЕ ставим: клик после протяжки
   гасит сам скрипт, а запрет событий ломал обычное нажатие. */

.catbar__lead {
  flex: none;
  padding-left: var(--sp-2);
  font-family: var(--f-head);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}

/* Группа: подпись и её кнопки идут единым куском, чтобы при прокрутке
   подпись не отрывалась от своих значений */
.catbar__group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding-left: var(--sp-3);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.catbar__title {
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  white-space: nowrap;
}

/* Кнопка-признак на красном */
.catbar .chip {
  flex: none;
  white-space: nowrap;
  padding: 6px 12px;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
}
.catbar .chip:hover { border-color: #fff; background: rgba(0, 0, 0, 0.3); }
.catbar .chip .chip__n { color: rgba(255, 255, 255, 0.6); }
.catbar .chip[aria-pressed="true"] {
  background: #fff;
  border-color: #fff;
  color: var(--c-brand-deep);
}
.catbar .chip[aria-pressed="true"] .chip__n { color: rgba(143, 0, 0, 0.62); }

/* Стрелки по краям: на узких экранах их нет — там привычнее свайп */
.catbar__nav {
  flex: none;
  display: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  cursor: pointer;
  transition: background var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
}
@media (min-width: 900px) { .catbar__nav { display: grid; place-items: center; } }
.catbar__nav:hover { background: rgba(0, 0, 0, 0.38); border-color: #fff; }
.catbar__nav[disabled] { opacity: 0.3; cursor: default; }
.catbar__nav svg { width: 16px; height: 16px; }

.catbar__reset {
  flex: none;
  margin-right: 4px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: var(--fs-xs);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.catbar__reset:hover { background: rgba(0, 0, 0, 0.24); }

.catbar__out {
  margin-top: var(--sp-3);
  margin-bottom: 0;
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  font-variant-numeric: tabular-nums;
}

/* Значение, под которое ничего не осталось: гасим, но не прячем —
   исчезающие на глазах кнопки сбивают с толку сильнее, чем блёклые. */
.chip[data-empty] { opacity: .38; pointer-events: none; }

/* --- Три входа по объекту ------------------------------------------------
   Каталог начинается не со списка, а с вопроса «что за объект».
   Кнопки включают тот же признак «Назначение», что и полоса фильтров.
   ------------------------------------------------------------------------ */

.objgrid {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.objcard {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 190px;
  padding: var(--sp-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.objcard:hover,
.objcard:focus-visible { border-color: var(--c-line-strong); transform: translateY(-3px); }

/* Кадр объекта уходит в подложку: текст поверх него читается,
   а плитка перестаёт быть пустым прямоугольником */
.objcard__shot {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.objcard::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(15, 17, 20, 0.26) 0%, rgba(15, 17, 20, 0.74) 54%, rgba(15, 17, 20, 0.94) 100%);
  transition: opacity var(--d-slow) var(--e-out);
}
.objcard:hover::after { opacity: 0.9; }

.objcard__ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-2);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.4);
}
.objcard__ico svg { width: 20px; height: 20px; color: var(--c-accent); }

.objcard__name {
  font-family: var(--f-head);
  font-size: var(--fs-h4);
  font-weight: 700;
}
.objcard__desc { font-size: var(--fs-xs); color: var(--c-text-dim); max-width: 34ch; }
.objcard__n {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-mute);
  font-variant-numeric: tabular-nums;
}

.objcard[aria-pressed="true"] { border-color: var(--c-accent); }
.objcard[aria-pressed="true"] .objcard__n { color: var(--c-accent); }

/* Корень каталога: пока признак не выбран, товаров нет — только входы.
   Выбрали — прячем входы и показываем отобранное. */
.cathub[hidden],
.catresults[hidden] { display: none; }

/* Витрина скрыта — значит показан список, и нижнее поле секции с полосой
   отбора превращается в пустой провал. Поджимаем. `:has()` тут уместен:
   правило чисто косметическое, старый браузер просто оставит поле как было. */
.section:has(.cathub[hidden]) { padding-bottom: var(--sp-5); }

.catnote {
  margin-top: var(--sp-5);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--c-accent);
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  max-width: 62ch;
}

/* --- Шапки разделов ----------------------------------------------------- */
.catsec__count {
  margin-left: auto;
  font-size: var(--fs-label);
  color: var(--c-text-dim);
  font-variant-numeric: tabular-nums;
}

.catsec__count b { font-family: var(--f-head); color: var(--c-text); }

.catsec[hidden] { display: none; }

.catsec__empty {
  padding: var(--sp-6);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  color: var(--c-text-dim);
  text-align: center;
}

/* Плитка, отсеянная фильтром. Отдельный класс, а не hidden: так проще
   отличить «спрятано фильтром» от «спрятано разметкой». */
.prodtile[data-off] { display: none; }

@media (max-width: 640px) {
  /* minmax(0, 1fr), а не 1fr: иначе минимум колонки считается по содержимому
     и две колонки вылезают за экран на десяток пикселей */
  .catnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catnav__item { padding: var(--sp-3) var(--sp-4); }
  .catbar { padding: 5px; gap: 4px; }
  .catbar__lead { display: none; }
}

/* Читаемость полосы отбора — правка заказчика 02.09.2026: неактивные
   кнопки на красном выглядели размытыми. Подложка плотнее, рамка
   контрастнее, счётчик и подпись группы почти белые. */
.catbar .chip {
  background: rgba(0, 0, 0, 0.34);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  font-weight: 600;
}
.catbar .chip:hover { background: rgba(0, 0, 0, 0.46); border-color: #fff; }
.catbar .chip .chip__n { color: rgba(255, 255, 255, 0.88); }
.catbar__title { color: rgba(255, 255, 255, 0.92); font-weight: 600; }

/* Кнопки признаков без совпадений: раньше гасились целиком через
   opacity: .38 — вместе с текстом, отчего и выглядели размытыми
   (замечание заказчика 02.09.2026). Теперь приглушены только рамка
   и счётчик, надпись остаётся читаемой. Нажатие по-прежнему выключено. */
.catbar .chip[data-empty] {
  opacity: 1;
  background: rgba(0, 0, 0, 0.2);
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.8);
}
.catbar .chip[data-empty] .chip__n { color: rgba(255, 255, 255, 0.55); }