/* Страница каталога. Figma: Catalog/pc 611:3961 (1920×2666), Catalog/mb 611:4632 (390×5293).
   Секция идёт сразу под шапкой (pc 89, mb 82) и кончается там, где начинается
   «Обратите внимание» (pc 1461, mb 2407) → высота pc 1372, mb 2325.
   Все координаты переведены в поток: крошки → H1 → ряд управления (фильтры + поиск) → сетка.
   Зазоры выведены из макета:
   - крошки до H1: 114.67px в pc (217 − 102.33), 61px в mb (157 − 96);
   - H1 до ряда управления: 72.33px в pc (332 − 259.67), 22px в mb (245 − 223);
   - ряд управления до сетки: 42px в pc (407 − 365), 23px в mb (356 − 333);
   - сетка до «Обратите внимание»: padding-bottom 43px в pc (1461 − 1418), 35px в mb (2407 − 2372). */

.catalog-page {
  min-height: 1372px;
  padding-bottom: 43px;
  /* Блоб выше секции. На короткой выдаче (избранное) он свисал ниже футера
     и растягивал документ пустотой на 233px. */
  overflow: hidden;
}

/* Блоб Ellipse 14 (611:3962): 1880×1383 на (20, 0) страницы → центр (960, 691.5).
   SVG 2680×2183 (поле 400 под blur 200), центр (1340, 1091.5). */
.catalog-page__blob {
  left: 50%;
  top: -489px;                   /* (691.5 − 89) − 1091.5 */
  width: 2680px;
  height: 2183px;
  margin-left: -1340px;
}

/* Эллипс Ellipse 9 есть только в mb-фрейме страницы каталога */
.catalog-page__blob--hero {
  display: none;
}

/* Заголовок H1 (611:3963): 261/217, Rubik Bold 36px.
   В потоке: margin-top 114.67px от низа крошек (217 − 102.33).
   white-space: normal, чтобы удлинение текста переносило строки и сдвигало фильтры. */
.catalog-page__title {
  width: fit-content;
  margin: 114.67px 0 0 0;
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  color: var(--black);
}

.catalog-page__title br {
  display: none;                 /* перенос «Продукция / Peptide Source» — только в mb (611:4642) */
}

/* Ряд управления: фильтры слева, поиск прижат вправо (margin-left: auto).
   Зазор от низа H1 (260) до верха фильтров (332) — 72.33px. */
.catalog-page__controls {
  display: flex;
  align-items: flex-start;
  margin-top: 72.33px;
}

/* Фильтры (611:3975, 611:3978): flex, gap 10, padding 8px 10px, opacity 0.5,
   текст Rubik Regular 14px #305684 + стрелка 14×14 */
.filter {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  color: var(--brand);
  opacity: 0.5;
  white-space: nowrap;
  cursor: pointer;
}

/* Раскрытый и наведённый фильтр — в полную силу (611:1769 hov, 611:1772 act) */
.filter:hover,
.filter:focus-visible,
.filter[aria-expanded="true"] {
  opacity: 1;
  outline: none;
}

/* Обёртка кнопки и выпадающего списка фильтра: position relative привязывает попап.
   Отступы слева в потоке ряда задают положение кнопок из макета (276 и 459 от края 1920). */
.filter-wrap {
  position: relative;
}

.filter-wrap--form {
  margin-left: 15px;             /* 276 − 261 */
}

.filter-wrap--purpose {
  margin-left: 26.31px;          /* 459 − (276 + 156.69) */
}

/* Кнопка сортировки: в макете её нет, заказчик попросил цену и популярность.
   Геометрия та же, что у фильтров; прижата к поиску, поэтому отступ слева больше. */
.filter-wrap--sort {
  margin-left: 26.31px;
}

/* Попап сортировки шире фильтров: подписи вариантов длиннее */
.filter-wrap--sort .filter-pop {
  min-width: 232px;
}

.filter-pop {
  position: absolute;
  left: 0;
  top: 41px;                     /* высота кнопки 33 + 8 */
  z-index: 3;
  min-width: 214px;
  margin: 0;
  padding: 22px 0;               /* первый пункт на 32 при line-height 14 → 32 − 10 */
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: 0 20px 60px rgba(48, 86, 132, 0.12);
  list-style: none;
}

.filter-pop[hidden] {
  display: none;
}

.filter-pop__item {
  display: block;
  width: 100%;
  padding: 11px 30px;            /* шаг пунктов 37 = 14 + 2 × 11.5, округлено */
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  color: var(--brand);
  text-align: left;
  opacity: 0.5;
  cursor: pointer;
}

.filter-pop__item:hover,
.filter-pop__item:focus-visible,
.filter-pop__item.is-chosen {
  opacity: 1;
  outline: none;
}

/* Поиск (611:3972): иконка 14×14 и поле в flex-ряд, линия 345×1 под полем в потоке.
   Ширина 345px из макета, прижат вправо (margin-left: auto).
   Смещение margin-top 3px выравнивает иконку по линии 335 (фильтры начинаются на 332). */
.search {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 345px;
  margin-left: auto;
  margin-top: 3px;
}

.search__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.search__input {
  flex: 1;
  width: auto;
  margin-left: 6px;
  margin-top: -1px;              /* baseline выравнивание текста поля 334 против иконки 335 */
  height: 17px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  color: var(--brand);
}

.search__input::placeholder {
  color: var(--brand);
  opacity: 0.5;
}

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

.search__line {
  width: 100%;
  height: 1px;
  margin-top: 11.33px;           /* линия на 362 (335 + 17 - 1 + 11.33 ≈ 362) */
  background: var(--brand);
  opacity: 0.2;
}

.search-pop {
  position: absolute;
  left: 0;
  top: 45px;                     /* линия на 27 + 18 */
  z-index: 3;
  width: 345px;
  padding: 22px 0;
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: 0 20px 60px rgba(48, 86, 132, 0.12);
}

.search-pop[hidden] {
  display: none;
}

.search-pop__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.search-pop__link {
  display: block;
  padding: 11px 30px;
  font-size: 14px;
  line-height: normal;
  color: var(--brand);
  text-decoration: none;
}

.search-pop__link:hover {
  background: rgba(48, 86, 132, 0.06);
}

/* Совпавшая часть названия приглушена — в макете «Эпитал» бледнее «он 4445565» */
.search-pop__hit {
  color: rgba(48, 86, 132, 0.5);
}

.search-pop__empty {
  margin: 0;
  padding: 11px 30px;
  font-size: 14px;
  color: var(--brand);
  opacity: 0.5;
}

.search-pop__empty[hidden] {
  display: none;
}

/* Сетка: 8 карточек, x 261/616/971/1326 (шаг 355 → gap 21), y 407/941 (шаг 534 → gap 57).
   В потоке: margin-top 42px от низа фильтров (407 − 365). */
.catalog-page__grid {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(4, 334px);
  gap: 57px 21px;
}

/* Режим избранного: фильтров и поиска нет, а число карточек зависит от покупателя.
   Сетка поднимается к заголовку с отступом margin-top 60px. */
.catalog-page--favorites {
  min-height: 0;
  height: auto;
  padding-bottom: 120px;
}

.catalog-page--favorites .catalog-page__title {
  margin: 0;
  padding-top: 90px;
  width: 100%;
}

.catalog-page--favorites .catalog-page__grid {
  margin-top: 60px;
}

/* Подсказка видна, только когда в избранном пусто (класс ставит JS). */
.catalog-page__empty {
  display: none;
  margin: 40px 0 0;
  font-size: 16px;
  color: var(--black);
  opacity: 0.5;
}

.catalog-page__grid.is-empty + .catalog-page__empty {
  display: block;
}

@media (max-width: 1199px) {
  /* mb: секция от 82 (шапка 24+58) до 2407 (начало «Обратите внимание») */
  .catalog-page {
    min-height: 2325px;
    padding-bottom: 35px;
  }

  /* Эллипс Ellipse 9 (611:4634): 390×102 на (0, 549), центр 600 — тот же, что на главной.
     SVG 1190×902, центр (595, 451). */
  .catalog-page__blob--hero {
    display: block;
    left: 50%;
    top: 67px;                   /* (600 − 82) − 451 */
    width: 1190px;
    height: 902px;
    margin-left: -595px;
  }

  /* Блоб Ellipse 14 (611:4641): 390×1671 на (0, 166) внутри Screen 2/mb (top 137)
     → центр страницы 1138.5. SVG 1190×2471, центр (595, 1235.5). */
  .catalog-page__blob {
    top: -179px;                 /* (1138.5 − 82) − 1235.5 */
    width: 1190px;
    height: 2471px;
    margin-left: -595px;
  }

  /* Заголовок 611:4642: left 28, top 157 страницы, Rubik Bold 28px в две строки.
     В потоке: margin-top 61px от низа крошек (157 − 96), margin-left 14px (28 − 14). */
  .catalog-page__title {
    margin: 61px 0 0 14px;
    font-size: 28px;
    white-space: normal;
  }

  .catalog-page__title br {
    display: inline;
  }

  /* Ряд управления mb: фильтры в первом ряду, поиск переносится на второй ряд.
     Зазор от низа H1 (223) до фильтров (245) — 22px. */
  .catalog-page__controls {
    flex-wrap: wrap;
    margin-top: 22px;
  }

  /* Фильтры: 28/245 и 185/245 страницы; в mb у фрейма нет горизонтальных отступов */
  .filter {
    padding: 8px 0;
  }

  .filter-wrap--form {
    margin-left: 14px;           /* 28 − 14 */
  }

  .filter-wrap--purpose {
    margin-left: 20.31px;        /* 185 − (28 + 136.69) */
  }

  /* Поиск: 28/305 страницы, ширина 334, зазор от фильтров 27px (305 − 278) */
  .search {
    width: 334px;
    margin-left: 14px;
    margin-top: 27px;
  }

  .search-pop {
    width: 334px;
  }

  /* Сетка: одна колонка, карточки на 274/787/1300/1813 от верха секции (шаг 513 → gap 36).
     В потоке: margin-top 23px от линии поиска (356 − 333). */
  .catalog-page__grid {
    margin: 23px 14px 0 14px;
    grid-template-columns: 334px;
    gap: 36px;
  }

  .catalog-page--favorites .catalog-page__title {
    margin: 0;
    padding-top: 75px;
    width: 100%;
  }

  .catalog-page--favorites .catalog-page__grid {
    margin: 40px 14px 0 14px;
  }

  .catalog-page--favorites .catalog-page__empty {
    margin-left: 14px;
  }
}

/* Пагинация каталога. В макете её нет: геометрия взята из кита — кнопки как у фильтров
   (radius 32, рамка brand-10), текущая страница залита брендовым. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 60px;
}

.pager[hidden] {
  display: none;
}

.pager__list {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pager__item,
.pager__nav {
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--brand-10);
  border-radius: var(--r-round);
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--brand);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.pager__item:hover:not(.is-current),
.pager__nav:hover:not(:disabled) {
  background: var(--brand-05);
}

.pager__item.is-current {
  background: var(--brand);
  color: var(--white);
  cursor: default;
}

.pager__nav:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (max-width: 1199px) {
  .pager {
    margin-top: 40px;
    gap: 8px;
  }

  /* На узком экране номера страниц не влезают рядом со стрелками */
  .pager__nav {
    padding: 0 12px;
  }
}