/* ==========================================================================
   MIROLINE — адаптив. Подключается последним и переопределяет базовые правила.
   Брейкпоинты: 1280 / 1024 / 768 / 480
   ========================================================================== */

/* --- ≤1023: планшеты -------------------------------------------------------- */

@media (max-width: 1023px) {
  /* Каталог уезжает в мобильное меню */
  .catalog-btn,
  .catalog-menu { display: none; }

  /* Поиск в строку шапки не помещается: его открывает лупа рядом с корзиной,
     и поле раскладывается отдельной полосой во всю ширину под шапкой.
     Опора для position — сама .header (она sticky): ни .container,
     ни .header__inner не позиционированы. */
  .search {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: none;
    padding: var(--sp-3) var(--container-pad);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
  }

  .header[data-search-open] .search { display: block; }

  /* Safari на iPhone увеличивает страницу при фокусе в поле мельче 16px
     и обратно её не уменьшает. Поле поиска выпадает из пропорционального
     масштаба ради этого порога: max() оставляет .9rem там, где он крупнее. */
  .search__input { font-size: max(16px, .9rem); }

  .search-toggle { display: inline-grid; }

  /* Список подсказок считается от .search, у которой теперь есть поля;
     без поправки он торчал бы шире самого поля. */
  .search__results {
    left: var(--container-pad);
    right: var(--container-pad);
  }

  /* Избранное переехало в подвал мобильного меню: в шапке его место занимает лупа */
  .header__tools .icon-btn--fav { display: none; }

  .burger { display: flex; }

  .header__inner {
    gap: var(--sp-4);
    min-height: 4.5rem;
  }

  .logo { margin-right: auto; }

  /* информационные ссылки дублируются в подвале — в узкой полосе они лишние */
  .topbar__links { display: none; }

  /* Первый экран становится вертикальным */
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }

  .hero__media { order: -1; }

  .hero__media {
    aspect-ratio: 16 / 10;
  }

  .hero__media img { object-position: center 12%; }

  .hero__actions { margin-bottom: var(--sp-8); }

  /* Товары — три в ряд */
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* пять плиток в три колонки дают неровный хвост — показываем лентой */
  .categories__grid {
    grid-auto-flow: column;
    grid-auto-columns: 30vw;
    grid-template-columns: none;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    scrollbar-width: none;
    margin-inline: calc(var(--container-pad) * -1);
    padding-inline: var(--container-pad);
  }

  .categories__grid::-webkit-scrollbar { display: none; }

  .cat { scroll-snap-align: start; }

  .wholesale__inner,
  .production__inner,
  .subscribe__inner,
  .faq__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  /* колонки встали друг под друга — выравнивать правый блок не по чему */
  .wholesale__steps,
  .production__facts { margin-top: 0; }

  .faq__aside { margin-bottom: var(--sp-4); }

  .reviews__list { grid-template-columns: minmax(0, 1fr); }

  .footer__top { grid-template-columns: minmax(0, 1fr); }

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

/* --- ≤767: мобильные -------------------------------------------------------- */

@media (max-width: 767px) {
  /* Заголовок категории на телефоне мельче: в 3rem длинные названия
     («Домашние костюмы») занимали пол-экрана до первого товара. */
  .cat-head__row h1 { font-size: 2.6rem; }

  /* Корзина, оформление, избранное, возвраты. В прежних 62px «Оформление
     заказа» ломалось на две строки уже на 390px. */
  .page-head h1 { font-size: 2.2rem; }

  /* адрес и телефон не помещаются рядом с городом — они остаются в подвале */
  .topbar__address,
  .topbar__place .topbar__phone { display: none; }

  .topbar__inner { justify-content: flex-start; }

  .header__tools > .icon-btn[href="#account"] { display: none; }

  /* Товары — два в ряд */
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6) var(--grid-gap);
  }

  .product__title { margin-top: var(--sp-3); }

  /* на мобильном плитки крупнее */
  .categories__grid {
    grid-auto-columns: 42vw;
    gap: var(--sp-3);
  }

  /* Лента новинок — полторы карточки в кадре */
  .slider__track {
    grid-auto-columns: 62vw;
  }

  /* на телефоне ленту листают пальцем, стрелки только закрывали бы карточки */
  .slider__nav { display: none; }

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

  .fact { padding: var(--sp-6) var(--sp-4); }

  .fact__num { font-size: 1.875rem; }

  .field { flex-direction: column; }

  .field .btn { width: 100%; }

  .hero__facts { gap: var(--sp-6); }

  .footer__bottom { gap: var(--sp-3); }

  /* Ссылки встают в столбик, и общий отступ 24px растягивал их на пол-экрана. */
  .footer__legal {
    margin-left: 0;
    gap: var(--sp-3);
  }

  /* длинный текст количества отзывов не помещается в строку рядом с заголовком */
  .section__head { flex-wrap: wrap; }

  .reviews__aggregate { flex-wrap: wrap; }
}

/* --- ≤479: узкие мобильные --------------------------------------------------- */

@media (max-width: 479px) {
  /* Селектор не слабее, чем «.header .logo__word» в header.css: простого
     «.logo__word» не хватало, логотип оставался крупным и выталкивал
     кнопку корзины за правый край экрана. */
  .logo__word { font-size: 1.25rem; }

  /* В шапке рядом с логотипом стоят кнопка меню и три значка справа. На 390px
     и уже они не помещались: логотип оставался крупным (правило .header
     .logo__word в header.css сильнее простого .logo__word), и не хватало
     27px — их флекс отбирал у кнопки меню, гася её полностью. */
  .header .logo__word { font-size: 1.125rem; }

  .header__inner { gap: var(--sp-2); }

  .hero__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }

  .hero__fact dt { font-size: 1.375rem; }

  .categories__grid { grid-auto-columns: 62vw; }

  .slider__track { grid-auto-columns: 72vw; }

  .review { padding: var(--sp-6); }

  .footer__cols { grid-template-columns: minmax(0, 1fr); }

  /* на узком экране два столбика режут «Футболки, майки, топы» по краю */
  .footer__col--catalog ul { columns: 1; }
}