/* pages/catalog — каталог /shop и страница категории (Catalog.dc.html):
   сетка сайдбар+результаты 260px/1fr со sticky-сайдбаром на десктопе,
   сетка карточек и раскладка мобильной шапки результатов. Только var(--*)
   для цвета/шрифта/радиуса, числа сеток и отступов литералом — как в
   layout.css/components.css. Брейкпоинт 1024px — как везде в сайте
   (site-header/site-footer/product-card). */

.catalog { display: flex; flex-direction: column; gap: 24px; padding-block: 16px 48px; }

/* Шапка выровнена по левому краю контейнера, как в макете: 720px ограничивают
   только текст, а не сам .container — иначе margin-inline: auto центрирует
   блок и заголовок уезжает от сетки (спека DEV0493 §4). */
.catalog-head { display: flex; flex-direction: column; gap: 12px; }
.catalog-head > h1 { max-width: 720px; }
.catalog-head__chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* — сайдбар фасетов: скрыт на мобильном (заменён шторкой), 260px+1fr и
   sticky на десктопе. — */
.catalog-layout__sidebar { display: none; }
@media (min-width: 1024px) {
  .catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: 32px; align-items: start; }
  .catalog-layout__sidebar { display: block; position: sticky; top: 16px; }
}
.catalog-layout__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* — мобильная шторка фильтров: видна только на мобильном, скрыта на
   десктопе (заменена сайдбаром). — */
.catalog-sheet { display: block; }
@media (min-width: 1024px) { .catalog-sheet { display: none; } }

/* — сетка карточек: 2 колонки на мобильном, 4 на десктопе (Catalog.dc.html,
   строки 53 и 83). — */
.catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 1024px) {
  .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

.catalog-progress { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 8px; }
.catalog-progress .progress-block { width: 240px; }

.catalog-not-found { padding-block: 48px; }