/* ============================================================
   Адаптив
   Брейкпоинты: 1280 / 1024 / 768 / 480
   Подгружается последним — переопределяет десктопные стили.
   ============================================================ */

/* ============================================================
   ≤ 1280px — крупный планшет / маленький десктоп
   ============================================================ */
@media (max-width: 1279px) {
  :root {
    --container-pad: 20px;
  }
  .header__inner {
    grid-template-columns: auto auto 1fr auto;
    gap: var(--s-3);
  }
  .header__phone { display: none; }
  .product-row { grid-template-columns: repeat(4, 1fr); }
  .product-row > article:nth-child(5) { display: none; }
  .hero__title { font-size: 54px; }
  .hero__main { padding: var(--s-8) var(--s-7); }
  .promo-install__title,
  .b2b__title { font-size: 30px; }
  .promo-install,
  .b2b { padding: var(--s-8); }
}

/* ============================================================
   ≤ 1024px — планшет
   ============================================================ */
@media (max-width: 1023px) {
  :root {
    --container-pad: 16px;
    --h-header: 64px;
  }

  /* Топбар: оставляем только адрес + график, ссылки прячем */
  .topbar__nav { display: none; }
  .topbar__info { gap: var(--s-4); font-size: var(--fs-xxs); }

  /* Шапка: лого + бургер слева, иконки справа, поиск/каталог в выпадайке */
  .header__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--s-4);
  }
  .header__actions .btn-b2b { display: none; }
  .btn-catalog .burger { display: none; }
  .search-field { order: 3; grid-column: 1 / -1; margin-top: var(--s-3); }
  .header__icons .icon-btn span:not(.badge-count) { display: none; }
  .header__icons { gap: var(--s-2); }

  /* Hero стекается — основной блок и промо-карточка одна под другой */
  .hero {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .hero__main {
    padding: var(--s-8) var(--s-7);
    min-height: 0;
  }
  .hero__title { font-size: 44px; line-height: 1.05; }
  .hero__text { font-size: var(--fs-base); }
  .hero__promo {
    min-height: 280px;
    padding: var(--s-5) var(--s-5) 0;
  }
  .hero__promo-img { width: 150px; }

  /* Категории 4 → 3 → 2 — здесь 3 */
  .categories {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Продукты 5 → 3 */
  .product-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .product-row > article:nth-child(4),
  .product-row > article:nth-child(5) { display: none; }

  /* Преимущества 4 → 2 */
  .benefits {
    grid-template-columns: repeat(2, 1fr);
    padding: var(--s-7);
  }

  /* Промо-блоки стекаются */
  .promo-install,
  .b2b {
    grid-template-columns: 1fr;
    gap: var(--s-7);
    padding: var(--s-7);
  }
  .promo-install__title,
  .b2b__title { font-size: 28px; }

  /* Бренды 5 → 3 */
  .brands {
    grid-template-columns: repeat(3, 1fr);
  }
  .brand:nth-child(5n) { border-right: 1px solid var(--c-border-soft); }
  .brand:nth-child(3n) { border-right: 0; }
  .brands .brand:nth-last-child(-n+5) { border-bottom: 1px solid var(--c-border-soft); }
  .brands .brand:nth-last-child(-n+1) { border-bottom: 0; }

  /* Футер 4 → 2 */
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7);
  }
  .footer__brand { grid-column: 1 / -1; }
}

/* ============================================================
   ≤ 768px — планшет вертикальный / большой телефон
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --container-pad: 14px;
  }

  /* Топбар скрываем — место для важного */
  .topbar { display: none; }

  /* Защита от горизонтального скролла без поломки position:sticky.
     overflow-x: hidden создаёт scrolling context — sticky-шапка перестаёт работать.
     Используем overflow-x: clip — он обрезает контент без создания scroll-context. */
  body { overflow-x: clip; }
  .hero { max-width: 100%; }

  /* На /catalog/ bootstrap может расширить .container — принудительно ограничиваем
     ВСЕ .container шириной viewport, иначе иконки шапки уезжают за экран. */
  .topbar > .container,
  .header > .container,
  main > .container,
  .footer > .container,
  body .container {
    max-width: 100vw !important;
    width: 100% !important;
  }
  .header__inner {
    max-width: 100%;
    width: 100%;
  }

  /* Шапка — закрепляем к верху */
  .header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
  }
  .header__actions { display: none; }
  /* Компактный layout через GRID — предсказуемые позиции:
     row 1: [бургер | лого | иконки]
     row 2: поиск на всю ширину */
  .header__inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "burger logo icons"
      "search search search" !important;
    align-items: center;
    gap: 8px;
    padding-block: var(--s-2);
    min-width: 0;
    width: 100%;
  }
  .mobile-menu-trigger { grid-area: burger; }
  /* Логотип прижат к бургеру слева (пользовательский запрос),
     не центрирован в свободной колонке. */
  .logo { grid-area: logo; justify-self: start; }
  .header__icons { grid-area: icons; }
  .search-field { grid-area: search; }
  /* Логотип уменьшен (пользовательский запрос) */
  .logo__mark { height: 30px; }
  /* Поиск на второй строке */
  .search-field {
    margin-top: var(--s-2);
    width: 100%;
  }
  /* Иконки справа все видимы, с увеличенным расстоянием между ними */
  .header__icons {
    display: flex !important;
    align-items: center;
    gap: var(--s-3);
    flex-shrink: 0;
    justify-self: end;
  }
  .header__icons .icon-btn {
    padding: 4px;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .header__icons .icon-btn svg { width: 22px; height: 22px; }
  .header__icons .icon-btn span:not(.badge-count) { display: none; }
  .header__icons .icon-btn .badge-count {
    top: -4px;
    right: -2px;
  }
  .mobile-menu-trigger { flex-shrink: 0; margin-right: 0; }

  /* Добавим бургер слева через ::before или явный элемент */
  .mobile-menu-trigger { display: inline-flex !important; }

  /* Hero — компактнее на мобильной */
  .hero {
    margin-top: var(--s-4);
  }
  .hero__main {
    padding: var(--s-6);
    border-radius: var(--r-xl);
    min-height: 0;
  }
  .hero__eyebrow { font-size: 10px; letter-spacing: 0.12em; margin-bottom: var(--s-3); }
  .hero__eyebrow::before { width: 18px; }
  .hero__title { font-size: 30px; line-height: 1.1; }
  .hero__text { font-size: var(--fs-sm); margin-bottom: var(--s-5); }
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; height: 48px; }
  .hero__promo {
    padding: var(--s-5);
    border-radius: var(--r-xl);
    min-height: 0;
  }
  .hero__promo-title { font-size: 20px; }
  /* На мобильной картинка септика встаёт в обычный поток ПОД текстом
     (не absolute, не overlap). По центру горизонтально. */
  .hero__promo-img {
    position: static;
    left: auto;
    bottom: auto;
    right: auto;
    transform: none;
    width: 160px;
    margin: var(--s-4) auto 0;
    display: block;
  }

  /* Категории — 1 колонка (пользовательский запрос) */
  .categories {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .cat-tile {
    padding: var(--s-3);
    gap: var(--s-2);
    min-width: 0;
    overflow: hidden;
  }
  .cat-tile > div { min-width: 0; flex: 1; max-width: 100%; }
  .cat-tile__icon {
    width: 36px; height: 36px;
    flex-shrink: 0;
  }
  .cat-tile__icon svg { width: 18px; height: 18px; }
  .cat-tile__icon img { width: 100%; height: 100%; object-fit: contain; }
  .cat-tile__name {
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
  }
  .cat-tile__count { font-size: 10px; }

  /* Продукты 2 в ряд × 2 строки = 4 товара */
  .product-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }
  /* Возвращаем 3-й и 4-й товары (на больших брейкпоинтах они скрыты),
     скрываем только 5-й. */
  .product-row > article:nth-child(3),
  .product-row > article:nth-child(4) { display: block; }
  .product-row > article:nth-child(5) { display: none; }
  .product-card__body { padding: var(--s-3) var(--s-4) var(--s-4); }
  .product-card__title { font-size: var(--fs-sm); }
  .product-card__price { font-size: var(--fs-lg); }

  /* Преимущества 1 колонка */
  .benefits {
    grid-template-columns: 1fr;
    padding: var(--s-6);
    gap: var(--s-5);
  }

  /* Промо-блоки */
  .promo-install,
  .b2b {
    padding: var(--s-6);
    border-radius: var(--r-xl);
  }
  .promo-install__title,
  .b2b__title { font-size: 22px; }
  .promo-install__stats { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .promo-install__stat-num { font-size: 24px; }

  /* Бренды 2 колонки */
  .brands { grid-template-columns: repeat(2, 1fr); }
  .brand:nth-child(3n) { border-right: 1px solid var(--c-border-soft); }
  .brand:nth-child(2n) { border-right: 0; }

  /* Футер */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
    padding-bottom: var(--s-7);
  }
  .footer { padding-block: var(--s-9) var(--s-5); margin-top: var(--s-9); }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .footer__bottom-links { gap: var(--s-4); flex-wrap: wrap; }

  /* Секции — меньше воздуха */
  .section { padding-block: var(--s-9); }
  .section__head { margin-bottom: var(--s-5); }
  .section__head h2 { font-size: var(--fs-3xl); }

  h1 { font-size: var(--fs-5xl); }
  h2 { font-size: var(--fs-4xl); }
}

/* ============================================================
   ≤ 480px — телефон
   ============================================================ */
@media (max-width: 479px) {
  /* Иконки шапки оставляем ВСЕ видимыми (избранное/сравнить/кабинет).
     На самых узких экранах увеличиваем расстояние, но не слишком — чтобы
     все три иконки гарантированно поместились в шапке без обрезки. */
  .header__icons {
    gap: 12px;
  }
  .header__icons .icon-btn {
    padding: 2px;
  }
  .header__icons .icon-btn svg { width: 20px; height: 20px; }

  /* Логотип ещё меньше под совсем узкий экран */
  .logo__mark { height: 26px; }
  /* Бургер компактнее, чтобы освободить место под иконки */
  .mobile-menu-trigger { width: 32px; height: 32px; }
  .mobile-menu-trigger span { width: 18px; }
  /* Уменьшаем внешний gap header__inner на узких экранах */
  .header__inner { gap: 6px !important; }

  .hero__main { padding: var(--s-5); }
  .hero__title { font-size: 26px; }
  .hero__eyebrow { font-size: 10px; letter-spacing: 0.1em; }
  .hero__promo { padding: var(--s-4); min-height: 0; }
  .hero__promo-title { font-size: var(--fs-lg); }
  .hero__promo-img { width: 140px; margin-top: var(--s-3); }

  /* Продукты 2 в ряд × 2 строки = 4 товара */
  .product-row {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2);
  }
  /* Возвращаем 3-й и 4-й товары (на больших брейкпоинтах они скрыты) */
  .product-row > article:nth-child(3),
  .product-row > article:nth-child(4) { display: block; }
  .product-row > article:nth-child(5) { display: none; }

  /* Карточки остаются вертикальными */
  .product-card { flex-direction: column; }
  .product-card__media {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: var(--s-3);
  }
  .product-card__body {
    padding: var(--s-3);
    gap: var(--s-2);
  }
  /* Фиксируем место под 3 строки заголовка — все карточки одинаковой высоты тела,
     значит цена и «В корзину» всегда на одном уровне. */
  .product-card__title {
    font-size: var(--fs-xs);
    line-height: 1.3;
    min-height: calc(var(--fs-xs) * 1.3 * 3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .product-card__price { font-size: var(--fs-base); }
  .product-card__cta {
    height: 36px;
    font-size: var(--fs-xs);
  }
  .product-card__top { top: 6px; left: 6px; right: 6px; }
  .product-card__icon-btn { width: 28px; height: 28px; }
  .product-card__icon-btn svg { width: 14px; height: 14px; }

  /* Бренды 2 колонки даже на самых узких экранах (пользовательский запрос) */
  .brands { grid-template-columns: repeat(2, 1fr); }
  .brand:nth-child(odd) { border-right: 1px solid var(--c-border-soft) !important; }
  .brand:nth-child(even) { border-right: 0 !important; }
}

/* ============================================================
   Мобильный бургер (по умолчанию скрыт, появляется на ≤768)
   ============================================================ */
.mobile-menu-trigger {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  color: var(--c-text);
  margin-right: var(--s-3);
}
.mobile-menu-trigger span {
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* ============================================================
   Каталог — адаптив
   ============================================================ */
@media (max-width: 1279px) {
  .catalog-grid { grid-template-columns: 240px 1fr; }
  .catalog-grid-products { grid-template-columns: repeat(3, 1fr); }
  .catalog-grid-products > article:nth-child(4n) { display: none; }
  .catalog-head h1 { font-size: var(--fs-5xl); }
}

@media (max-width: 1023px) {
  .catalog-grid {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  .filter {
    position: static;
    padding: var(--s-4);
  }
  .filter__head { padding-bottom: var(--s-3); margin-bottom: var(--s-3); }
  .filter__section { padding-block: var(--s-3); }
  /* Все секции фильтра (включая «Подразделы») развёрнуты по умолчанию.
     Сворачивание управляется классом .is-collapsed через клик по h4. */
  .catalog-grid-products { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .catalog-head h1 { font-size: var(--fs-4xl); }
  .catalog-head { margin-top: var(--s-4); margin-bottom: var(--s-4); }
  .catalog-toolbar { padding: var(--s-3); }
  /* Каталог категории — 2 колонки карточек на мобильной (пользовательский запрос) */
  .catalog-grid-products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
  }
  /* На 1279px брейкпоинте скрывается каждый 4-й товар (чтобы при 3-х колонках
     не было одинокой карточки в последнем ряду). На мобильной с 2-мя колонками
     эта логика не нужна — наоборот, нам надо ВСЕ 4 «похожих товара» показать. */
  .catalog-grid-products > article:nth-child(4n) { display: block !important; }
  .pagination a, .pagination span { min-width: 36px; height: 36px; padding-inline: var(--s-2); }

  /* Карточки категорий с подкатегориями (/catalog/) — компактнее на мобильных */
  .catalog-category {
    padding: var(--s-4) !important;
  }
  .catalog-category__icon {
    width: 40px !important;
    height: 40px !important;
  }
  .catalog-category__name {
    font-size: var(--fs-base) !important;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  /* Подкатегории — 1 колонка, без обрезки */
  .catalog-category__subs {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .catalog-category__subs a {
    font-size: var(--fs-sm);
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }
  /* Заголовок страницы раздела + название категории — без переполнения.
     Внутри .catalog-section__head стоит display:flex+flex-wrap:wrap, в нём
     лежат <h1> и блок «Найдено: N товаров». Без явной ширины flex-алгоритм
     ужимает h1 до min-content и текст ломается пословно. Принудительно
     отдаём h1 100% ширины — «Найдено» переедет на следующую строку. */
  .catalog-section__head {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .catalog-section__title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
  /* H1 от breadcrumbs / прочие — мягкие переносы (только при необходимости) */
  h1, h2, h3 { overflow-wrap: break-word; word-break: normal; }

  /* Тулбар: сортировка + блок «Найдено» */
  .catalog-section__toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
  .catalog-sort select { min-width: 0; width: 100%; }

  /* Фильтр на мобильной — раскрывающийся сверху */
  .filter {
    padding: var(--s-4) !important;
    margin-bottom: var(--s-3);
  }

  /* Шапка иконок — гарантированно видна и на /catalog/ */
  .header__icons,
  .header__icons .icon-btn {
    display: inline-flex !important;
  }
}

@media (max-width: 479px) {
  /* Каталог — 2 карточки в ряд (вертикально), пользовательский запрос */
  .catalog-grid-products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2);
  }
  .catalog-grid-products .product-card { flex-direction: column; }
  .catalog-grid-products .product-card__media {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: var(--s-3);
  }
  .catalog-grid-products .product-card__body { padding: var(--s-3); gap: var(--s-2); }
  .catalog-grid-products .product-card__title { font-size: var(--fs-xs); }
  .catalog-grid-products .product-card__price { font-size: var(--fs-base); }
  .catalog-grid-products .product-card__cta { height: 36px; font-size: var(--fs-xs); }
  .catalog-chips { gap: 4px; }
  .catalog-chips .chip { font-size: var(--fs-xs); height: 28px; padding: 0 8px 0 10px; }
}