/**
 * Раскладка: контейнер, гриды, стеки.
 */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Узкая колонка под текст — читабельная длина строки */
.container--narrow {
  max-width: 64rem;
}

.section {
  padding-block: var(--space-8);
}

.section--tight { padding-block: var(--space-6); }
.section--wide  { padding-block: var(--space-12); }

/* ── Grid ────────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/*
 * Адаптив без брейкпоинт-классов в разметке: колонки сами
 * подстраиваются под ширину. --col-min задаёт минимум колонки.
 */
.grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col-min, 16rem), 100%), 1fr));
}

/* Каталог: карточки товаров */
.grid--catalog {
  --col-min: 15rem;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col-min), 100%), 1fr));
  gap: var(--space-4);
}

/* Телефон: авто-раскладка давала одну карточку-простыню на ряд —
   ставим строго две, сами карточки ужимает product-card.css */
@media (max-width: 47.9375rem) {
  .grid--catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
}

/* Страница с боковой колонкой: контент + сайдбар */
.layout-aside {
  display: grid;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 1024px) {
  .layout-aside {
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  }
}

.layout-aside__side {
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

@media (max-width: 767px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .layout-aside__side {
    position: static;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Flex ────────────────────────────────────────────── */

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.row--between {
  justify-content: space-between;
}

.row--wrap { flex-wrap: wrap; }
.row--top { align-items: flex-start; }
.row--tight { gap: var(--space-2); }

/* Вертикальный стек с равными интервалами */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stack--tight { gap: var(--space-2); }
.stack--loose { gap: var(--space-6); }

.spacer { flex: 1 1 auto; }