/* ==========================================================================
   Каталог_карточки — Figma node 3652:5669 (fileKey o1dtSkoTovK5La7uhTgo3C)
   Шапка/CTA/футер переиспользованы 1:1 (CTA — те же классы .pd-cta* из
   project.css, кнопки — .proj-cta__btn* из projects.css).
   ========================================================================== */

/* --- Hero-баннер категории (node 3652:5825 + плавающее фото "image 11") --- */
.catpg-hero-wrap {
  position: relative;
  margin-top: 75px; /* gap header(137) -> hero(212) */
}

.catpg-hero {
  background: #F6F1E9;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 30px;
  width: 100%;
  min-height: 329px;
}

.catpg-hero__crumbs {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: normal;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.catpg-hero__crumbs span:first-child {
  color: #C6BFAE;
}

.catpg-hero__crumbs span:last-child {
  color: #858073;
}

.catpg-hero__title {
  width: min(479px, 100%);
  margin-top: auto;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-size: 70px;
  line-height: 1.1;
  color: #E2480A;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.catpg-hero__photo {
  position: absolute;
  left: 571px;
  top: -45.634px;
  width: 602px;
  height: 402px;
  object-fit: contain;
  pointer-events: none;
}

/* --- Тулбар (переключатель вида) --- */
.catpg-toolbar {
  margin-top: 40px; /* gap hero -> контент-обёртка */
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

.catpg-toolbar__icon {
  width: 20px;
  height: 20px;
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: #C6BFAE; /* неактивный вид */
}

.catpg-toolbar__icon.is-active {
  color: #E2480A; /* активный вид — как в Figma у иконки "плитка" по умолчанию */
}

/* --- Заголовок серии + сетка карточек --- */
.catpg-series {
  margin-top: 56px;
}

.catpg-series__label {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: normal;
  color: #E2480A;
  text-transform: uppercase;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.catpg-grid-wrap {
  margin-top: 40px;
}

.catpg-grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.catpg-row {
  display: flex;
  align-items: flex-start;
  gap: 43.5px; /* (888 - 267*3) / 2 — колонка сузилась под сайдбар фильтров */
}

.catpg-more {
  margin-top: 62px;
  text-align: center;
}

.catpg-more a {
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-size: 18px;
  color: #516B43;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

/* --- Карточка товара --- */
.catpg-card {
  width: 267px;
  border: 1px solid #F6F1E9;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.catpg-card__image {
  position: relative;
  width: 100%;
}

.catpg-card__image > a {
  display: block;
}

.favorite-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.favorite-button img {
  display: block;
  width: 17px;
  height: 16px;
}

.favorite-button--card {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 36px;
  height: 36px;
  background: transparent;
}

.favorite-button:focus-visible {
  outline: 2px solid #516B43;
  outline-offset: 2px;
}

.catpg-card__photo {
  width: 100%;
  aspect-ratio: 2000 / 1600;
  object-fit: cover;
  display: block;
}

.catpg-card__body {
  width: 100%;
  height: 319px;
  box-sizing: border-box;
  padding: 20px;
  border-top: 1px solid #F6F1E9;
  display: flex;
}

.catpg-card__inner {
  width: 227px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.catpg-card__top {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: none;
}

.catpg-card__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.catpg-card__title {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 22px;
  color: #000;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catpg-card__desc {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #8C8C8C;
  /* 40px текста и 59px свободного места до характеристик в макете:
     используем всю эту область, сохраняя положение блоков ниже. */
  height: 99px;
  flex: 0 0 99px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.catpg-card__specs {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  height: 79px;
  flex: none;
  overflow: hidden;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  line-height: 21px;
}

.catpg-card__spec {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.catpg-card__spec-label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
}

.catpg-card__spec-value {
  font-size: 16px;
  color: #000;
}

.catpg-card__actions {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
}

.catpg-card__cart {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: block;
}

/* Плитка каталога (Figma taiga_brand-components 4985:13497): «сравнить» и
   «В корзину» в ряд, под ними «Получить консультацию» во всю ширину.
   Без --stack (блок «С этим товаром покупают») — прежний один ряд. */
.catpg-card__actions--stack {
  flex-direction: column;
  align-items: stretch;
}

.catpg-card__actions--stack .catpg-card__cta {
  flex: none;
}

.catpg-card__buy {
  display: flex;
  gap: 8px;
}

.catpg-card__compare {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: #516B43;
  cursor: pointer;
}

.catpg-card__compare img {
  display: block;
  width: 100%;
  height: 100%;
}

.cart-add.catpg-card__to-cart {
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 40px;
  padding: 0 2px 0 0;
  background: #516B43;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.cart-add.catpg-card__to-cart img {
  flex: none;
  width: 20px;
  height: auto;
}

/* Тело плитки по макету 4985:13497 (каталог и «С этим товаром покупают»): 20 + текст 164 + 20 + кнопки 88 + 20.
   Тексты обрезаны по высоте заглавных (cap height), как в Figma: заголовок
   и описание сверху, характеристики прижаты к низу блока — при описании в
   одну строку кнопки остаются на месте. Мобилка переопределяет это в
   mobile.css (те же селекторы, файл подключён позже). */
.catpg-grid-wrap .catpg-card__body,
.pdp-bought .catpg-card__body {
  height: 312px;
}

.catpg-grid-wrap .catpg-card__inner,
.pdp-bought .catpg-card__inner {
  justify-content: flex-start;
  gap: 20px;
}

.catpg-grid-wrap .catpg-card__top,
.pdp-bought .catpg-card__top {
  justify-content: space-between;
  gap: 16px;
  height: 164px;
}

.catpg-grid-wrap .catpg-card__title,
.catpg-grid-wrap .catpg-card__spec-label,
.catpg-grid-wrap .catpg-card__spec-value,
.pdp-bought .catpg-card__title,
.pdp-bought .catpg-card__spec-label,
.pdp-bought .catpg-card__spec-value {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.catpg-grid-wrap .catpg-card__desc,
.pdp-bought .catpg-card__desc {
  flex: none;
  height: auto;
  -webkit-line-clamp: 2;
  /* Обрезку по заглавным описанию не ставим: у -webkit-box с overflow:hidden
     она срезает верх букв. Вместо неё — сдвиг на полуинтерлиньяж, чтобы
     строка встала туда же, где в макете */
  margin-top: -5px;
}

.catpg-grid-wrap .catpg-card__specs,
.pdp-bought .catpg-card__specs {
  height: auto;
  max-height: 79px;
}

/* .pd-cta margin-top:100px переиспользован из project.css (там калибровался
   под gap после блока наград) — на этой странице перед CTA нет блока наград,
   реальный gap здесь 80px. */
.pd-cta {
  margin-top: 80px;
}

.catpg-card__cta {
  flex: 1 0 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #E2480A;
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: #E2480A;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ==========================================================================
   Сайдбар фильтров — общий для обоих видов ("плитка" и "список", node
   3652:5830 / актуальный макет с фильтрами в плитке — fileKey jbQ2lpyKcVOJMXj7EDxNmN,
   node 3652:5669). Переключение вида — toolbar-иконки/?view=list, сайдбар
   при этом не переключается, виден всегда.
   ========================================================================== */
.catpg-body {
  margin-top: 40px; /* gap hero -> контент */
  display: flex;
  align-items: flex-start;
  gap: 44px; /* 312 - 268 */
}

.catpg-body .catpg-toolbar {
  margin-top: 0;
}

.catpg-content-col {
  flex: 1 0 0;
  min-width: 0;
}

/* --- Сайдбар фильтров --- */
.catpg-filters {
  width: 268px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Форма-обёртка (search + panel) появилась вместе с реальными фильтрами —
   .catpg-filters сама была flex-колонкой на эти же два элемента напрямую,
   теперь между ними появился <form>, поэтому те же display/gap переехали
   на него, чтобы визуально ничего не изменилось. */
.catpg-filters__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.catpg-filters__search {
  border: 1px solid #F6F1E9;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px;
}

.catpg-filters__search-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
}

.catpg-filters__search input {
  border: none;
  outline: none;
  width: 100%;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
  color: #C6BFAE;
  background: transparent;
}

.catpg-filters__panel {
  background: #FEFCF9;
  padding: 30px 25px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.catpg-filters__categories {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
}

/* "Игровые системы" — единственный заголовок без text-box-trim в Figma
   (leading-normal буквально), остальные пункты категорий — с trim. */
.catpg-filters__cat-heading {
  color: #000;
  line-height: normal;
}

.catpg-filters__categories > a:not(.catpg-filters__cat-heading) {
  color: #000;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.catpg-filters__series-list {
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.catpg-filters__series-list a {
  color: #B7B7B7;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.catpg-filters__series-list a.is-active {
  color: #E2480A;
}

.catpg-filters__group {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.catpg-filters__group-title {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
  color: #000;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.catpg-filters__pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.catpg-filters__pills-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.catpg-filters__pill {
  /* Раньше <span>, теперь <button> (кликабельно, фокусируется с клавиатуры) —
     appearance/background сбрасывают дефолтный вид кнопки браузера, чтобы
     выглядела ровно как прежний <span> с той же рамкой/паддингом ниже. */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  cursor: pointer;
  border: 1px solid #F4F1EA;
  padding: 10px 15px;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #C6BFAE;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.catpg-filters__pill.is-active {
  border-color: #E2480A;
  color: #E2480A;
}

.catpg-filters__range-value {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  line-height: 21px;
  color: #C6BFAE;
  width: 100%;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Раньше .catpg-filters__slider было flex-строкой из двух статичных
   track+dot пар (чистый макет, никакой логики). Теперь это настоящий
   двухползунковый range-слайдер — track/range/dot позиционируются
   абсолютно, в процентах от ширины, JS (catalog-filters.js) пересчитывает
   left/width при драге. Высота 20px — не 1px трека — чтобы точке было куда
   вертикально центрироваться и легче было попасть кликом/тачем. */
.catpg-filters__slider {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 20px;
  touch-action: none; /* драг точки не должен ещё и скроллить страницу на тачах */
}

.catpg-filters__slider-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #F4F1EA;
}

/* Подсветка ВЫБРАННОГО диапазона поверх общего трека — left/width в % ставит
   JS. В неподвижном макете этого не было (два одинаковых трека), но без
   этого не видно, какой именно диапазон между ползунками выбран. */
.catpg-filters__slider-range {
  position: absolute;
  height: 1px;
  background: #E2480A;
}

.catpg-filters__slider-dot {
  position: absolute;
  top: 50%;
  left: 0; /* JS сразу переставит через style.left при первом render() */
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E2480A;
  transform: translate(-50%, -50%);
  cursor: grab;
}

.catpg-filters__slider-dot:active {
  cursor: grabbing;
}

/* Невидимая зона побольше поверх видимой точки 8×8 — с таким маленьким
   хитбоксом промахнуться курсором/пальцем слишком легко. ::after не влияет
   на layout (position:absolute), сам визуал точки не меняется. */
.catpg-filters__slider-dot::after {
  content: '';
  position: absolute;
  inset: -12px;
}

.catpg-filters__apply {
  background: #E2480A;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DINPro Cond Medium', 'Inter', Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 0.9px;
  color: #fff;
  text-transform: uppercase;
  width: 100%;
}

.catpg-filters__reset {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  color: #E2480A;
  text-decoration: underline;
  text-align: center;
}

/* --- Правая колонка со списком --- */
.catpg-list-col {
  flex: 1 0 0;
  min-width: 0;
}

.catpg-list-col .catpg-series {
  margin-top: 72px;
}

.catpg-list-col .catpg-series__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.catpg-list-wrap {
  margin-top: 40px;
}

.catpg-list__header {
  display: flex;
  align-items: center;
  padding-left: 450px;
  padding-bottom: 32px;
}

.catpg-list__header-labels {
  display: flex;
  gap: 60px;
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
  color: rgba(0, 0, 0, 0.4);
}

.catpg-list__row {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  border-top: 1px solid #F4F1EA;
  padding: 32px 0;
}

.catpg-list__closing {
  border-top: 1px solid #F4F1EA;
}

.catpg-list__photo {
  width: 125px;
  height: 100px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.catpg-list__info {
  flex: 1 0 0;
  display: flex;
  gap: 64px;
  align-items: flex-end;
  min-width: 0;
}

.catpg-list__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.catpg-list__title {
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 21px;
  color: #000;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.catpg-list__row-details {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding-bottom: 15px;
}

.catpg-list__desc {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  line-height: 0;
  color: #8C8C8C;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.catpg-list__desc p {
  line-height: 20px;
}

.catpg-list__spec {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 16px;
  line-height: 21px;
  color: #000;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.catpg-list__spec--dim {
  width: 95px;
  /* У части товаров в «габаритах» целая строка («1,5 х 0,6 х 1,4, H ската
     0,6, b 0,5») — переносим внутри колонки, иначе уезжает под кнопки */
  white-space: normal;
}

.catpg-list__aside {
  width: 157px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.catpg-list__qty-row {
  display: flex;
  gap: 8px;
  align-items: center;
  height: 40px;
}

.catpg-list__qty {
  border: 1px solid #F6F1E9;
  height: 40px;
  flex: 1 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  font-family: 'DINPro Cond Regular', 'Inter', Arial, sans-serif;
  color: #000;
  text-transform: uppercase;
}

.catpg-list__qty button {
  border: none;
  background: none;
  padding: 0;
  font-size: 18px;
  letter-spacing: 0.9px;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}

.catpg-list__qty-value {
  font-size: 22px;
  letter-spacing: 1.1px;
}

.catpg-list__cart {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: block;
}

.catpg-list__consult {
  font-family: 'DINPro Regular', 'Inter', Arial, sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-align: right;
}