/* Каталог. */

.catalog { padding-top: calc(var(--nav-h) + var(--gap-m)); }

.catalog__search {
  position: relative;
  margin-bottom: var(--gap-m);
}

.catalog__search svg {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  translate: 0 -50%;
  color: var(--dim);
  pointer-events: none;
}

.catalog__search .input { padding-left: 2.3rem; }

.catalog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
  margin-bottom: var(--gap-m);
}

.catalog__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-s);
  margin-bottom: var(--gap-m);
  color: var(--faint);
  font-size: var(--step--1);
}

.catalog__sort {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}

.catalog__sort .input { width: auto; padding-block: 0.4rem; }

.catalog__empty {
  grid-column: 1 / -1;
  padding: var(--gap-xl) var(--gap-m);
  border: 1px dashed var(--line-hi);
  border-radius: var(--radius);
  color: var(--faint);
  text-align: center;
}

.catalog__pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-xs);
  margin-top: var(--gap-l);
}

/* Стрелка «Назад» смотрит влево, «Вперёд» — вправо. */
.catalog__pages .btn:first-child svg { transform: rotate(90deg); }
.catalog__pages .btn:last-child svg  { transform: rotate(-90deg); }

/* ============ Мобильные ============ */

@media (max-width: 720px) {
  .catalog { padding-top: calc(var(--nav-h) + var(--gap-s)); }

  /* Фильтры уезжают в горизонтальный скролл: перенос на три ряда
     занимает пол-экрана ещё до первой карточки. */
  .catalog__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    /* Вылезаем ровно на боковое поле .shell — от края до края и ни пикселем больше. */
    margin-inline: calc(var(--shell-pad) * -1);
    padding-inline: var(--shell-pad);
    scroll-snap-type: x proximity;
  }

  .catalog__filters::-webkit-scrollbar { display: none; }
  .catalog__filters .pill { flex: none; scroll-snap-align: start; }

  .catalog__bar { flex-direction: column; align-items: stretch; gap: var(--gap-xs); }
  .catalog__sort { justify-content: space-between; }
  .catalog__sort .input { flex: 1; max-width: 60%; }

  .catalog__pages { gap: 0.3rem; }
  .catalog__pages .btn { padding-inline: 0.7rem; }
}