/* ==========================================================================
   Page Layout System — единый контейнер/ширина/отступы для всех секций
   Работает поверх текущей верстки: по селекторам существующих блоков.
   1) Контентные секции (popular, filters, catalog, тексты) — ограниченная ширина.
   2) Полноширинные секции (hero, brand-tiles) — во всю ширину, с внутренними полями.
   Токены: меняйте только переменные ниже.
   ========================================================================== */

/* --- Базовые токены (безопасные значения по умолчанию) --- */
:root{
  /* Максимальная ширина контентной области (меняй под бренд: 1200–1440) */
  --page-max: 1280px;

  /* Внутренние боковые поля (резиновые) */
  --page-gutter: clamp(12px, 3vw, 28px);

  /* Вертикальные поля между секциями */
  --section-space: clamp(16px, 4vw, 40px);

  /* Цвета берём из существующих токенов, здесь только фолбэки */
  --color-surface: var(--color-surface, #F3F4F2);
  --color-surface-2: var(--color-surface-2, #FFFFFF);
  --color-surface-dark: var(--color-surface-dark, #0C0F12);
  --color-text: var(--color-text, #0F1214);
  --color-text-dark: var(--color-text-dark, #E8ECEF);
}

/* Глобальные безопасные настройки */
html, body { width: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }

/* ==========================================================================
   1) КОНТЕНТНЫЕ СЕКЦИИ: ширина ограничена, центрирование и поля одинаковы
   Применяем к: популярным, фильтрам, каталогу, текстовым блокам
   ========================================================================== */
#popular, .popular, [data-section="popular"],
#filters, .filters, [data-section="filters"], .filter-bar,
#catalog, .catalog, [data-section="catalog"],
.section--limited {
  /* Центровка и ограничение ширины */
  width: min(100% - (2 * var(--page-gutter)), var(--page-max));
  margin-inline: auto;

  /* Унифицированные боковые поля внутри */
  padding-inline: 0; /* поля уже учтены формулой width выше */
  /* Вертикальные отступы секций */
  margin-block: var(--section-space);
}

/* Если внутри таких секций есть «карточечные контейнеры» — не растягиваем их на всю,
   сохраняем равные боковые отступы на очень узких экранах */
#popular [data-popular-list],
#catalog .catalog-list,
#catalog .grid,
.section--limited .container {
  padding-inline: 0;
}

/* ==========================================================================
   2) ПОЛНОШИРИННЫЕ СЕКЦИИ (edge-to-edge): hero / бренд-лента
   ========================================================================== */
.hero, .hero-cover, .hero-carousel,
.brands, .brand-tiles, [data-section="brands"],
.section--full {
  width: 100%;
  margin: 0; /* визуально примыкают к краям */
  /* Внутренние «безопасные поля» по краям, чтобы текст/кнопки не липли */
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

/* Если в полноширинной секции есть внутренний контейнер с текстом — центрируем его */
.hero .container, .hero-carousel .container,
.brands .container, .brand-tiles .container,
.section--full .container {
  width: min(100%, var(--page-max));
  margin-inline: auto;
  padding: 0; /* поля у внешней секции уже заданы */
}

/* ==========================================================================
   3) Доп. согласование вертикального ритма и краёв
   ========================================================================== */

/* Не даём карточкам/карусели выходить за радиусы у полноширинных секций */
.hero-carousel, .brand-tiles { overflow: clip; }

/* Ровный вертикальный ритм: если у конкретной секции уже есть свои поля,
   они остаются; базовые margin-block мы задали выше для «limited»-секций. */
#popular, .popular, [data-section="popular"] { /* фон задаётся в popular.css */ }

/* Каталог бывает проблемным — добавим защиту от «просветов» по краям */
#catalog, .catalog, [data-section="catalog"] {
  /* На очень широких — центр и одна линия контента */
  container-type: inline-size; /* на будущее для контейнер-квери */
}

/* ==========================================================================
   4) Брекпоинты: тонкая настройка под большие ширины
   ========================================================================== */

/* ≥1440px — можно расширить рабочую ширину, если понадобится */
@media (min-width: 1440px){
  :root{
    --page-max: 1360px; /* подправь на 1440/1320 по вкусу */
  }
}

/* ≥1920px — не даём «резиновым» элементам становиться слишком редкими */
@media (min-width: 1920px){
  :root{
    --page-max: 1420px;
  }
}

/* ==========================================================================
   5) Мелкие улучшения доступности и визуала
   ========================================================================== */

/* Чёткая «ось» контента: заголовки секций не уезжают от сетки */
#popular h2, .popular h2,
#catalog h2, .catalog h2,
.section--limited > h2 {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* На очень узких экранах позволяем секциям «дышать» */
@media (max-width: 420px){
  :root { --page-gutter: clamp(10px, 4vw, 18px); }
}

/* ==========================================================================
   6) Утилиты — можно использовать в разметке при будущих правках
   ========================================================================== */

.container {
  width: min(100% - (2 * var(--page-gutter)), var(--page-max));
  margin-inline: auto;
}

.section { margin-block: var(--section-space); }
.section--full { width: 100%; padding-inline: var(--page-gutter); margin: 0; }
.section--limited { width: min(100% - (2 * var(--page-gutter)), var(--page-max)); margin-inline: auto; }