/* ============================================================
   MegaNut — CATALOG (DESIGN_SPEC §3). База 1920, допуск ±2px.
   Общие компоненты (mn-phero, mn-pcard--catalog, mn-pagination,
   mn-cta, mn-footer) — в components.css. Здесь только раскладка.
   Брейкпоинты: 1199 / 767 (свои, не дублируют responsive.css).
   ============================================================ */

/* Hero заезжает под absolute-шапку каталога (design margin-top:-96px). */
body[data-page="catalog"] .mn-phero {
  margin-top: -96px;
}

/* CTA каталога: доп. фон под фото (DESIGN_SPEC §3.3). */
body[data-page="catalog"] .mn-cta {
  background: var(--mn-ink);
}

/* ── 3.2 Секция каталога ───────────────────────────────────── */
.mn-catalog {
  /* content-box: макет без reset — max-width 1580 + padding 68×2 = 1716 (rect x=102 w=1716).
     Блок с margin:auto (без width:100%) → ниже 1716 заполняет вьюпорт без оверфлоу. */
  box-sizing: content-box;
  max-width: var(--mn-container);
  margin: 0 auto;
  /* Нижний отступ (80px, design: «воздух» пагинации) живёт на СЕКЦИИ, а не на
     пагинаторе: так containing block sticky-сайдбара (.mn-catalog__layout)
     заканчивается на кнопках пагинации, сайдбар доезжает ровно до них и ниже
     остаётся 80px белого «воздуха» до CTA — последний чип не режется границей секции. */
  padding: 56px var(--mn-pad-side-fixed) 80px;
  background: var(--mn-white);
}

.mn-catalog__layout {
  display: flex;
  align-items: flex-start;
  gap: 36px;
}

/* ── Сайдбар категорий ─────────────────────────────────────── */
/* Обёртка прозрачна для раскладки на ≥1200 (aside остаётся flex-ребёнком layout),
   а на ≤1199 становится позиционирующим контейнером для fade-подсказки прокрутки. */
.mn-catalog__sidebar-wrap {
  display: contents;
}
.mn-catalog__sidebar {
  flex: 0 0 auto;
  width: var(--mn-sidebar-catalog);
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Просьба заказчика: сайдбар «стоит на месте», пока прокручивается сетка товаров.
     Шапка каталога — position:absolute (уезжает со страницей, не перекрывает),
     поэтому top — комфортный отступ в ритме шапки (24px). Родитель .mn-catalog__layout
     имеет align-items:flex-start → aside не растягивается; ancestors без overflow:hidden
     → sticky работает. Containing block = .mn-catalog__layout (сайдбар + сетка, БЕЗ
     пагинации) → сайдбар доезжает максимум до низа последнего ряда карточек. */
  align-self: flex-start;
  position: sticky;
  top: 24px;
  /* Страховка для низких экранов (высота 768–900): 6 чипов + заголовок обычно
     укладываются (~361px), но если вьюпорт ниже — сайдбар не вылезает за экран,
     а скроллится внутри себя. На обычных экранах overflow не срабатывает. */
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  scrollbar-width: none;
}
.mn-catalog__sidebar::-webkit-scrollbar {
  display: none;
}
.mn-catalog__cats-title {
  font-size: var(--mn-eyebrow-12);
  letter-spacing: var(--mn-ls-eyebrow-16);
  text-transform: uppercase;
  color: var(--mn-muted-2);
  /* макет: заголовок-eyebrow без line-height → normal */
  line-height: normal;
  padding: 0 4px 10px;
}
.mn-catalog__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--mn-warm);
  color: var(--mn-ink);
  border-radius: var(--mn-r-pill);
  padding: 14px 22px;
  font-size: var(--mn-t-body-sm);
  /* макет: строка категории без line-height → normal (body:1.6 давал +5.6px на строку → сайдбар +32px) */
  line-height: normal;
  transition: background var(--mn-dur-260) ease;
}
.mn-catalog__cat:hover {
  background: var(--mn-cat-hover);
  color: var(--mn-ink);
}
.mn-catalog__cat.is-active {
  background: var(--mn-ink);
  color: var(--mn-bg);
}
.mn-catalog__cat.is-active:hover {
  background: var(--mn-ink);
}
.mn-catalog__cat-count {
  flex: 0 0 auto;
  font-size: var(--mn-t-body-14);
  color: var(--mn-muted-2);
}
.mn-catalog__cat.is-active .mn-catalog__cat-count {
  color: var(--mn-bg);
  opacity: 0.5;
}

/* ── Правая колонка (сетка + пагинация) ────────────────────── */
.mn-catalog__main {
  flex: 1;
  min-width: 0;
}

/* ── Сетка товаров ─────────────────────────────────────────── */
.mn-catalog__grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
}
.mn-catalog__empty {
  grid-column: 1 / -1;
  color: var(--mn-muted);
  font-size: var(--mn-t-body);
}

/* ── Пагинация ─────────────────────────────────────────────── */
.mn-catalog__pager {
  margin-top: 56px;
  /* Нижний «воздух» (80px) живёт на .mn-catalog (padding-bottom).
     Пагинация вынесена из .mn-catalog__layout и .mn-catalog__main отдельным
     блоком ПОД ними → естественно full-width секции (не входит в containing
     block sticky-сайдбара, поэтому сайдбар доезжает только до низа сетки). */
}

/* ==========================================================================
   ≤1199px — сайдбар → горизонтальные чипы над сеткой; сетка 3→2 кол.
   ========================================================================== */
@media (max-width: 1199px) {
  @supports (height: 100svh) {
    body[data-page="catalog"] .mn-phero {
      height: 50svh;
    }
  }
  .mn-catalog__layout {
    flex-direction: column;
    gap: 24px;
  }
  /* P2-5: 6 чипов не влезают в ряд ≤1199 — делаем горизонтальную прокрутку
     с fade-подсказкой справа. Обёртка relative → псевдоэлемент-градиент. */
  .mn-catalog__sidebar-wrap {
    display: block;
    position: relative;
    width: 100%;
  }
  .mn-catalog__sidebar-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(239, 239, 239, 0), var(--mn-bg));
  }
  .mn-catalog__sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 4px;
    scrollbar-width: none;
    /* ≤1199: горизонтальные чипы над сеткой — sticky НЕ применять */
    position: static;
    top: auto;
    /* сброс страховки низких экранов (актуальна только для вертикального sticky ≥1200) */
    max-height: none;
    overflow-y: visible;
  }
  .mn-catalog__main {
    width: 100%;
  }
  .mn-catalog__sidebar::-webkit-scrollbar {
    display: none;
  }
  .mn-catalog__cats-title {
    display: none;
  }
  .mn-catalog__cat {
    flex: 0 0 auto;
    gap: 8px;
    padding: 12px 18px;
  }
  .mn-catalog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
}

/* ==========================================================================
   ≤767px — сетка → 1 кол; боковые отступы секции уже.
   ========================================================================== */
@media (max-width: 767px) {
  .mn-catalog {
    padding-left: var(--mn-pad-side);
    padding-right: var(--mn-pad-side);
  }
  .mn-catalog__grid {
    grid-template-columns: 1fr;
  }
}