/* === HERO для catalog.php === */
.hero {
  background: #9FC9C7;
  border-radius: 8px;
  margin: 12px 0 24px;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  align-items: center;
  gap: 24px;
  padding-bottom: 0;
}

.hero__text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.hero__col {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;        /* не растягиваем колонку */
}

.hero__badge {
  display: inline-block;
  width: auto;           /* не растягиваем по ширине */
  align-self: flex-start;/* остаётся по содержимому */
  padding: 8px 16px;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 16px;
  white-space: nowrap;   /* чтобы не переносился текст */
}


.hero__title {
  color: #fff;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.1;
  margin: 0;
  font-family: 'Unbounded', sans-serif;
}
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;                   /* отступ между текстом и стрелкой */
  padding: 12px 24px;
  border-radius: 999px;
  background: #184CA1;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .08s ease, opacity .2s ease;
}

.hero__cta:hover {
  transform: translateY(-1px);
  opacity: .95;
}

.hero__icon {
  font-size: 1.2em;           /* размер стрелки */
  line-height: 1;
}


.hero__pic img {
  width: 60%;
  max-width: 420px;
  height: auto;
  object-fit: contain;
}


/* ====== КАТАЛОГ (минимум изменений, только рабочие штуки) ====== */
:root{ --sticky-top: 120px; } /* под твой ticker+header */

.cat{ display:block; width:100%; }
.cat__title{
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 44px);
  letter-spacing: .02em;
  color: #143A8B;
  text-transform: uppercase;
  margin: 80px 0 12px;
  text-align: center;
}

.cat__layout{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

/* Левый фильтр — sticky */
.cat__filters{
  position: sticky; top: var(--sticky-top);
  align-self: start;
  padding-right: 8px;
  border-right: 1px solid #E5EAF2;
}
.f-group + .f-group{ margin-top: 18px; }
.f-head{
  width: 100%; text-align: left; background: none; border: 0;
  padding: 8px 0; font-weight: 700; color: #1B2559; cursor: pointer;
  font-size: 24px;
  display: flex;
  justify-content: space-between; /* текст слева, иконка справа */
  align-items: center;
}
.f-list{ list-style:none; margin:6px 0 0; padding:0; }
.f-list li{ margin:6px 0; }
.f-list a{ color:#1B2559; text-decoration:none; }
.f-list a.is-active{ color:#1C4AB5; font-weight:700; }
.f-more{ color:var(--ni-text); opacity:.8; }

/* Правая колонка */
.cat__content{ padding-left: 8px; }

/* Sticky-панель управления справа */
.cat__controls{
  position: sticky; top: var(--sticky-top); z-index: 1;
   border:1px solid #E5EAF2; border-radius:12px; padding:16px;
   background: var(--ni-bg);
}
.cat__search{
  width:100%; height:44px; border:1px solid #BFD0EA;
  border-radius:999px; padding:0 16px; outline:none;
}
.cat__chips{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 8px;
}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid #222222; border-radius:999px; background:#f9f9f9;
  padding:6px 12px; font-weight:600; color:#222222;
}
.cat__reset{ margin-left:8px; color: var(--ni-text); text-decoration:none; font-weight:700; }

.cat__meta{
  display:flex; justify-content:space-between; align-items:center;
  color:var(--ni-text); font-weight:600;
}
.cat__sort{ background:none; border:0; color: var(--ni-text); font-weight:700; cursor:pointer; }

/* Сетка карточек */
.cat__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  margin:16px 0 40px;
}

/* Карточка товара (заполненная) */

.p-card__thumb{
  display:block; height:360px; margin-bottom:12px;
  overflow:hidden;
}
.p-card__thumb img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.p-card__rate{ color:var(--ni-text); font-weight:700; margin-bottom:6px; display: flex; justify-content: space-between; }
.stars{ letter-spacing:1px; font-size: 20px;}
.p-card__reviews{ color:#667085; font-weight:500; margin-left:6px; font-size: 20px;}

.p-card__title{ font-weight:500; font-size:24px; margin:2px 0 6px; color:#222; text-align: center;}
.p-card__title a{ color:inherit; text-decoration:none; }
.p-card__desc{ color:#475467; margin:0 0 10px; text-align: center; font-size: 18px; }

.p-card__sizes{ display:flex; gap:12px; margin-bottom:12px; justify-content: center;}
.p-card__sizes a{
  color:#1B2559; text-decoration:none; border-bottom:1px dashed transparent;
}
.p-card__sizes a.is-active{
  color:#1C4AB5; border-bottom-color:#1C4AB5; font-weight:700;
}

.p-card__buy{
  display:flex; justify-content:space-between; align-items:center; margin-top:8px; background: var(--ni-text); border-radius: 20px;
  padding: 0px 20px;
}

.p-card__price{
  display:inline-block; color:#fff;
  padding:10px 16px; border-radius:999px; font-weight:800; font-size: 20px;
}
.p-card__add{
  width:40px; height:40px; border-radius:999px; border:0; color:#fff; font-weight:900; cursor:pointer; font-size: 30px;
}

/* Общий контейнер карточки */
.p-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* распределяем верх и низ */
  border-radius: 12px;
  padding: 16px;
  min-height: 520px; /* одинаковая высота */
  box-sizing: border-box;
}

/* Контент выравнивается вертикально */
.p-card__title,
.p-card__desc,
.p-card__sizes {
  text-align: center;
}

/* Блок покупки всегда внизу */
.p-card__buy {
  margin-top: auto; /* прижимает вниз */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--ni-text);
  border-radius: 20px;
  padding: 0px 20px;
}


.cat__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* расстояние между текстом и иконкой */
  background: none;
  border: 0;
  color: var(--ni-text);
  font-weight: 700;
  cursor: pointer;
  font-size: 16px;
}

.cat__sort-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}




.f-head__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

/* При открытии (если добавишь класс .is-open на кнопку) */
.f-head.is-open .f-head__icon {
  transform: rotate(180deg);
}

/* Иконка у сортировки */
.cat__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* расстояние между текстом и иконкой */
}

.cat__sort-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* === ДОПОЛНЕНИЯ ДЛЯ ИНТЕРАКТИВНОГО КАТАЛОГА (v2) === */

/* Стили для кнопки сброса */
.cat__reset {
  background: none;
  border: none;
  padding: 0;
  margin-left: auto;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
  text-decoration: none;
}
.cat__reset:hover {
  text-decoration: underline;
}

/* Стили для чипсов (активных фильтров) */
.cat__chips {
    min-height: 28px;
}
.chip {
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.chip:hover {
  background-color: #ffebee;
  border-color: #ef9a9a;
  color: #c62828;
}

/* Сообщение "Ничего не найдено" */
.no-results-message {
  color: #64748B;
  font-weight: 500;
}

/* Поворот стрелки для аккордеона */
.f-head[aria-expanded="false"] .f-head__icon {
  transform: rotate(-90deg);
}


/* ===== МОБИЛЬНЫЕ ФИЛЬТРЫ (НОВОЕ) ===== */
.cat__mobile-filter-btn {
  display: none; /* Скрыт по умолчанию */
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--lk-border, #E5E7EB);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  color: var(--ni-primary, #1E3E8E);
  font-size: 16px;
  cursor: pointer;
}
.cat__mobile-filter-icon { width: 20px; height: 20px; }
.cat__mobile-filter-count {
  background-color: var(--ni-primary, #1E3E8E);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  min-width: 20px;
  height: 20px;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Панель */
.mobile-filters {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  display: flex;
}
.mobile-filters.is-open { visibility: visible; }
.mobile-filters__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 31, 58, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.mobile-filters.is-open .mobile-filters__backdrop { opacity: 1; }
.mobile-filters__panel {
  position: relative;
  width: min(320px, 90vw);
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-filters.is-open .mobile-filters__panel { transform: translateX(0); }
.mobile-filters__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--lk-border, #E5E7EB);
  flex-shrink: 0;
  margin-top: 50px;
}
.mobile-filters__title { font-size: 18px; font-weight: 700; color: var(--ni-primary, #1E3E8E); margin: 0; }
.mobile-filters__close { font-size: 28px; line-height: 1; color: var(--lk-muted, #64748B); padding: 0; }
.mobile-filters__content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 16px;
}
/* Копируемые фильтры внутри панели */
.mobile-filters__content .cat__filters {
  position: static;
  border-right: none;
  padding-right: 0;
}


/* ===== АДАПТИВ КАТАЛОГА (ИЗМЕНЕНИЯ) ===== */
@media (max-width: 992px) {
  .cat__layout {
    grid-template-columns: 1fr; /* Одна колонка */
    gap: 16px;
  }
  .cat__filters {
    display: none; /* Скрываем статичный сайдбар */
  }
  .cat__content {
    padding-left: 0;
  }
  .cat__controls {
    display: grid;
    grid-template-areas:
      "search search"
      "button meta"
      "chips chips";
    grid-template-columns: auto 1fr;
    gap: 12px;
  }
  .cat__search { grid-area: search; }
  .cat__mobile-filter-btn { grid-area: button; display: inline-flex; }
  .cat__meta { grid-area: meta; justify-content: flex-end; }
  .cat__chips { grid-area: chips; margin: 0; }
  .cat__reset { margin-left: 0; }
  .cat__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 576px) {
  .cat__grid {
    grid-template-columns: 1fr;
  }
  .cat__controls {
     grid-template-areas:
      "search"
      "button"
      "meta"
      "chips";
    grid-template-columns: 1fr;
  }
   .cat__meta { justify-content: space-between; }
}