/* ===========================================================================
   Телефон. Файл подключается последним, после site.css, theme.css и dark.css,
   и это здесь главное.

   Мобильные правила лежали в site.css, а тема грузится после него и задаёт
   те же свойства без всяких медиазапросов: `.section { padding: 72px 0 }`,
   кружки значков 56 пикселей, радиусы 26. При одинаковой силе селектора
   побеждает тот, кто ниже, поэтому половина мобильных правок молча не
   работала: отступы между блоками оставались десктопными, и между «Брендами»
   и «Вопросами» зияло полтора экрана пустоты.

   Отсюда правило: всё, что должно победить тему, живёт в этом файле.
   =========================================================================== */

@media (max-width: 640px) {
  /* Воздух между блоками. На экране в 430 пикселей семьдесят два сверху и
     снизу это почти треть экрана на пустоту между двумя заголовками. */
  .section { padding-top: 24px; padding-bottom: 24px; }
  .section--tight { padding-bottom: 0; }
  #lead.section, #help.section { padding-top: 28px; }
  .h2 { margin-bottom: 14px; }

  /* Кружки значков: тема ставит 56, а в ужатой карточке это половина её
     высоты. */
  .reason__badge, .step__badge, .pay__badge, .warranty__badge { width: 42px; height: 42px; }
  .stagebar__badge { width: 46px; height: 46px; }

  /* Подзаголовки под заголовком секции жмутся к нему. */
  .faq__sub, .materials__note, .about__lead, .quickpick__note, .muted + .quickpick { margin-top: 6px; }

  /* Лента брендов и сетки начинаются сразу под заголовком. */
  .marquee { margin-top: 14px; }
  .reasons, .services, .steps, .materials, .team, .projects, .grid, .faq, .pay { margin-top: 16px; }

  /* Форма заявки. Поля по 64 пикселя высотой, между ними по 16, до заголовка
     24: на телефоне форма из двух полей занимала экран целиком, и кнопка
     уезжала вниз. Всё ужато, при этом поля остаются в 52, то есть крупнее
     минимума для пальца. */
  .leadcard { border-radius: 20px; }
  /* Текст над формой выравнивается по центру, как на живом сайте: на узком
     экране заголовок в три строки и подпись в три, прижатые влево, выглядят
     обрывком колонки. Ссылки на мессенджеры тоже по центру, значок и подпись
     одной строкой. */
  .leadcard__text { padding: 20px 18px; text-align: center; }
  .leadcard__lead { margin-left: auto; margin-right: auto; }
  .leadcard__msgs { align-items: center; }
  .leadcard__msg { justify-content: center; }
  .lead__title, .leadcard__title { font-size: 24px; line-height: 1.15; }
  .leadcard__form { padding: 18px 16px 16px; }
  .leadcard__formhead { margin-bottom: 14px; font-size: 20px; line-height: 1.25; }
  .leadcard__form .field--plain { margin-bottom: 10px; }
  .leadcard__form .field__input { height: 52px; padding: 0 16px; font-size: 16px; }
  /* У поля с комментарием поля свои. Правило выше писалось для строки, где
     текст стоит по центру за счёт высоты, и нулевой верхний отступ там не
     виден. В многострочном поле он виден сразу: подпись прилипала к верхней
     кромке. */
  .leadcard__form .field__input--area {
    height: auto; min-height: 96px; padding: 14px 16px;
  }
  .leadcard__consent { margin: 10px 0 12px; font-size: 12px; line-height: 1.35; }
  .leadcard__form .btn { height: 50px; font-size: 14px; }
  .leadcard__note, .lead__note { margin-top: 10px; font-size: 12px; line-height: 1.35; }
}

/* Кнопка «Ошибка» переехала в меню: кружок поверх страницы попадал под палец
   при прокрутке и закрывал то «В корзину», то поиск. */
.site-nav__report { display: none; }

@media (max-width: 760px) {
  .report { display: none; }
  .site-nav__report {
    display: block; width: 100%; text-align: right; cursor: pointer;
    padding: 15px 0; border: 0; border-top: 1px solid var(--line); background: none;
    color: var(--muted); font: 400 15px/1 var(--font);
  }
}

/* Блок про Петербург стоит сразу под первым экраном, и оба тёмные: на
   телефоне они сливались в одно чёрное полотно, и было не понять, где
   кончается одно и начинается другое. Секция становится светлой подложкой, а
   сам блок внутри неё отдельной тёмной карточкой со скруглением. */
@media (max-width: 640px) {
  .section--region { padding: 10px 0 20px; }
  /* Карточка теперь и на широком экране карточка, здесь ей нужны только
     меньшие поля и одна колонка. Плашки пунктов остаются по две в ряд:
     формулировки короткие и в половину экрана помещаются. */
  .region { grid-template-columns: 1fr; gap: 20px; padding: 27px 20px; border-radius: 20px; }
  .region .h2 { font-size: 24px; margin: 8px 0 10px; }
  .region__text { font-size: 14px; }
  /* В одну колонку, как в макете: две плашки в ряд на 430 точках режут
     «Замер помещения до заказа» на три строки. */
  .region__list { grid-template-columns: 1fr; gap: 8px; }
  .region__list li { padding: 13px 13px 13px 36px; font-size: 14px; }
  .region__list li::before { left: 15px; top: 17px; }
}

/* ===========================================================================
   Строка над карточками: фильтры, поиск, сортировка. Лежит здесь, а не в
   site.css, по той же причине, что и отступы: общие стили задают .shop__bar
   как flex-строку, и мобильная раскладка должна их перебивать.
   =========================================================================== */
@media (max-width: 1000px) {
  .shop__tools {
    display: grid; grid-template-columns: minmax(0, 1fr) 150px;
    gap: 8px; margin-bottom: 14px; align-items: center;
  }
  /* Форма поиска растворяется в этой сетке: коробка исчезает, поля становятся
     её ячейками, отправка формы при этом работает как работала. */
  .shop__bar { display: contents; }
  .shop__search { grid-row: 1; grid-column: 1; }
  .shop__bar .btn { grid-row: 1; grid-column: 2; width: 100%; justify-content: center; height: 40px; }
  .shop__tools-slot { grid-row: 2; grid-column: 1; }
  .shop__sort { grid-row: 2; grid-column: 2; }
  .shop__sort .field__input { width: 100%; height: 40px; font-size: 14px; padding: 0 28px 0 12px; }
  .shop__search .field__input { height: 40px; }
  .shop__tools .facets-box { border: 0; }
  .shop__tools .facets-box__toggle { width: 100%; justify-content: space-between; }
}

/* Шаги доставки: значок слева, текст справа. Значок сверху, под ним
   заголовок, под ним абзац, и так пять карточек подряд — это пять экранов
   пролистывания ради пяти коротких фраз. Боком вдвое компактнее. */
@media (max-width: 640px) {
  .step {
    display: grid; grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 12px; align-items: start; padding: 16px 14px;
  }
  .step__badge { grid-row: 1 / span 2; width: 42px; height: 42px; margin: 0; }
  .step__title { grid-column: 2; margin: 0 0 4px; font-size: 16px; line-height: 1.25; }
  .step__text { grid-column: 2; font-size: 14px; line-height: 1.4; }
}

/* Услуги на телефоне остаются как были: текст слева, фотография справа. Ломалась
   только пятая карточка, «3D-визуализация»: она одна в ряду и на широком
   экране отдаёт под снимок половину ширины. На телефоне эта половина
   съедала заголовок, и слово обрывалось. Приводим её к остальным. */
@media (max-width: 900px) {
}

/* Лента брендов прокручивается вбок, а боковая прокрутка обрезает и то, что
   вылезает вверх и вниз. Тень у плиток тянется на тридцать пикселей вниз, и
   её срезало ровно по границе ленты: получалась тёмная черта во всю ширину.
   Padding тень не спасает, её всё равно больше, поэтому на телефоне у плиток
   тени нет вовсе, а край рисует волосяная граница. */
@media (max-width: 640px) {
  /* Отрицательное поле снизу ленте на телефоне не нужно: тени у плиток тут
     нет, зато оно съедало весь отступ секции, и следующий блок начинался
     ровно по нижнему краю логотипов. */
  .marquee { padding: 4px 0 6px; margin-bottom: 0; -webkit-mask-image: none; mask-image: none; }
  .marquee__item { box-shadow: none; border: 1px solid var(--line); }
}

/* ===========================================================================
   Подвал на телефоне: всё по центру и плотно.

   Прижатый вправо выглядел криво, а в три колонки, растянутые в столбик, он
   занимал полтора экрана: каждая ссылка на своей строке, между строками
   воздух, слева пустота. Меню в две колонки по центру, контакты строками без
   отбивок, соцсети и реквизиты под ними.
   =========================================================================== */
@media (max-width: 640px) {
  /* Подвал на телефоне: всё в один столбец, по центру. */
  .site-foot { padding: 28px 0 0; text-align: center; }
  .site-foot__in { gap: 22px; }
  .site-foot__col { justify-items: center; }
  .site-foot__logo { width: 140px; }
  .site-foot__slogan { margin-top: 10px; max-width: none; }
  .site-foot__nav a { font-size: 14px; }
  .site-foot__social { justify-content: center; }
  .site-foot__bottom { justify-content: center; text-align: center; margin-top: 24px; }
}

/* ===========================================================================
   Первый экран главной на телефоне, вариант «как в каталоге».

   Было: фотография на весь экран, текст поверх неё, кнопки где-то в середине,
   плитки с преимуществами тоже поверх фотографии. Фотографию из-под текста
   не видно, кнопки не под пальцем.

   Стало: сверху сам снимок, под ним тёмная плашка с заголовком и двумя
   кнопками во всю ширину, плитки вынесены ниже на светлую подложку.
   =========================================================================== */
@media (max-width: 760px) {
  .hero { background: var(--bg-soft); padding: 12px 0 0; }
  /* align-items обязателен: на широком экране первый экран собран сеткой с
     выравниванием по центру, и в колонке flex это же правило ужимало снимок
     до нулевой ширины. Пустой псевдоэлемент шириной в ноль ничего не рисует,
     и вместо фотографии оставалась серая полоса. */
  .hero__in { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 20px 20px; }

  /* Снимок отдельным блоком, а не фоном под текстом. */
  .hero__in::before {
    content: ''; order: -1; display: block; height: 200px;
    /* Телефону свой файл, 800 точек вместо 1600: на первом экране это первое,
       что грузится, и четверть мегабайта ради полосы в 200 точек высотой
       лишние. Переменную здесь не переопределить, она стоит в разметке. */
    background-image: url('/media/hero-table-800.jpg'); background-size: cover; background-position: 58% center;
    border-radius: 20px 20px 0 0;
  }
  .hero__card {
    background: #151515; color: #fff;
    border-radius: 0 0 20px 20px; padding: 18px 18px 20px;
  }
  .hero__eyebrow { margin: 0 0 8px; }
  .hero__title { font-size: 24px; line-height: 1.12; margin: 0 0 10px; max-width: none; }
  .hero__lead { font-size: 16px; line-height: 1.45; margin: 0 0 16px; }
  .hero__actions { display: flex; flex-direction: column; gap: 8px; margin: 0; }
  .hero__actions .btn { width: 100%; justify-content: center; height: 48px; }

  /* Разделы в каталоге показывались дважды: пилюлями над содержимым и
     полосой разделов внутри самой витрины, и обе строки отмечали текущий
     раздел, только разным цветом. На широком экране второй список стоит
     колонкой слева и дублем не читается, а на телефоне это две одинаковые
     ленты подряд. Оставляем ту, что ближе к товарам: в ней есть счётчики и
     переключение без перезагрузки. */
  .chips--top,
  nav.chips[aria-label="Разделы каталога"] { display: none; }

  /* Быстрые фильтры над витриной на телефоне не показываем. Это ровно те же
     параметры, что и в листе «Фильтры» в двух сантиметрах ниже, только
     разложенные четырьмя рядами, которые вылезают за свою серую коробку. На
     широком экране они остаются: там лист фильтров спрятан в колонку, и
     быстрый ряд экономит нажатие. */
  .quickfilters { display: none; }

  /* Все ряды пилюль на телефоне это одна прокручиваемая строка: разделы,
     подборки и быстрые фильтры. Переносом они занимали по полэкрана каждый, и
     над товарами набиралось три экрана ссылок. Строка доезжает до края, чтобы
     было видно, что её листают. */
  .chips, .picks, .tagrow__items {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px;
  }
  .chips::-webkit-scrollbar, .picks::-webkit-scrollbar, .tagrow__items::-webkit-scrollbar { display: none; }
  .chips .chip, .picks .pick, .tagrow__items .chip { flex: none; }
  /* У ленты внутри подписанной коробки отрицательные поля перебивались более
     весомым селектором, и первая фишка вставала на два отступа от края, а
     подпись над ней на один: ряд выглядел сдвинутым к середине. */
  .pickrow .picks { margin-left: -20px; margin-right: -20px; }
  .picks .pick { font-size: 14px; padding: 6px 12px; }
  .tagrow { align-items: center; gap: 8px; }
  .tagrow__label { min-width: 0; font-size: 12px; }

  /* Подпись над лентой, а не в ней: внутри строки она уезжала бы вбок
     вместе с фишками. */
  .pickrow { margin-bottom: 14px; }

  .chips--top {
    display: flex; flex-wrap: nowrap; justify-content: flex-start;
    /* Поля сверху и снизу по шесть точек не для вида: у фишки зона нажатия
       44 точки при высоте 32, и без этих полей невидимый слой вылезал за
       полосу. Полоса с overflow-x: auto получает и вертикальную прокрутку
       автоматически, и на телефоне горизонтальный свайп упирался в эти два
       пикселя: плитки дёргались вверх-вниз вместо того, чтобы ехать вбок. */
    gap: 8px; margin: 0 0 14px; padding-top: 6px; padding-bottom: 6px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* Поля во всю ширину экрана: строка должна доезжать до края, иначе
       кажется, что она кончилась. */
    margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px;
  }
  .chips--top::-webkit-scrollbar { display: none; }
  .chips--top .chip { flex: none; height: 32px; padding: 0 13px; font-size: 14px; gap: 7px; }

  /* Сторис стоят плотнее к разделам: между ними было два отступа подряд. */
  .stories__in { padding-bottom: 0; }

  /* Регион теперь лежит внутри тёмной карточки, под кнопками. Плашки идут
     в один столбец: по две в ряд на 375 точках в каждую влезало по слову. */
  .region--hero { margin-top: 18px; padding-top: 16px; border-radius: 0; }
  .region--hero .h2 { font-size: 20px; }
  .region--hero .region__text { font-size: 14px; }
  .region--hero .region__list { grid-template-columns: 1fr; gap: 8px; }

  /* Плитки уезжают под карточку, на светлое, и становятся компактным
     списком в две колонки. */
  /* Четыре факта в один ряд на 430 точках дали бы колонки по 80 пикселей,
     поэтому два на два. */
  .herostats { margin-top: 18px; padding: 14px; border-radius: 14px; }
  .herostats .tag { margin-bottom: 10px; }
  .herostats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .herostats__item { padding-top: 11px; }
  .herostats b { font-size: 20px; }
  .herostats small { font-size: 12px; margin-top: 4px; }
}

/* Гарантия: значок слева, текст справа, как у шагов доставки. Значок сверху,
   под ним заголовок, под ним абзац — это лишний экран прокрутки на два
   коротких пункта. */
@media (max-width: 640px) {
  .warranty { gap: 14px; }
  .warranty__head { font-size: 24px; margin-bottom: 10px; }
  .warranty__text { font-size: 14px; line-height: 1.5; }
  .gcards { gap: 8px; margin-top: 16px; }
  .gcard { padding: 13px; border-radius: 12px; }
  .gcard b { font-size: 20px; }
  .gcard span { font-size: 12px; margin-top: 5px; }
  .warranty__photo { max-height: 200px; object-fit: cover; }
}

/* Кнопка ролика на телефоне на четверть меньше: в 76 пикселей она забирала
   середину кадра. */
@media (max-width: 640px) {
  .video__play { width: 57px; height: 57px; margin: -28px 0 0 -28px; }
  .video__play span { width: 57px; height: 57px; }
  .video__play span::before { margin: -7px 0 0 -4px; border-width: 7px 0 7px 11px; }
}

/* Кружок значка и заголовок в карточке довода стояли в восемнадцати
   пикселях друг от друга: на телефоне это лишняя строка пустоты. */
@media (max-width: 640px) {
  .reason__n { font-size: 12px; margin-bottom: 8px; }
  .reason__badge { margin-bottom: 8px; }
  .reason__title { margin-bottom: 6px; }
}

/* Лентой брендов на телефоне управляет скрипт через прокрутку, а не css:
   анимация и палец двигали разные величины и мешали друг другу. */
@media (max-width: 640px) {
  .marquee.is-manual .marquee__track { animation: none; }
}

/* На главной под заголовком «Каталог» лента разделов повторяла ту же ленту,
   что стоит над заголовком: два одинаковых ряда чипсов подряд. Оставляем
   верхний, нижний убираем. В самом каталоге эта лента единственная, там она
   остаётся. */
@media (max-width: 1000px) {
  .shop--home .sections { display: none; }
  /* Боковая колонка на главной после этого пуста: ленту убрали, а коробка с
     фильтрами переезжает в строку над карточками. Просвет между заголовком и
     строкой держать не за что. */
  .shop--home { gap: 0; }
  .shop--home .shop__side { gap: 0; }
}

/* Первый экран раздела собран как первый экран главной: снимок сверху во всю
   ширину карточки, под ним тёмная плашка с именем, списком и кнопками.
   Раньше у фотографии были свои поля, и она болталась внутри карточки, а
   заголовок с пунктами шёл крупнее, чем на главной. */
@media (max-width: 640px) {
  .cathero { padding: 0; margin-bottom: 18px; border-radius: 20px; overflow: hidden; }
  .cathero--photo { grid-template-columns: minmax(0, 1fr); }
  .cathero__photo { margin: 0; min-height: 0; max-height: none; border-radius: 0; }
  .cathero__photo img { display: block; width: 100%; height: 200px; object-fit: cover; border-radius: 0; }
  .cathero__text { padding: 18px 18px 20px; }
  .cathero__title { font-size: 24px; line-height: 1.12; margin-bottom: 12px; }
  .cathero .cathero__list { margin-bottom: 14px; }
  .cathero .cathero__list li { font-size: 14px; line-height: 20px; margin-bottom: 3px; padding-left: 16px; }
  .cathero .cathero__list li::before { top: 8px; width: 4px; height: 4px; }
  .cathero__lead { font-size: 16px; margin-bottom: 12px; }
  .cathero__action { gap: 8px; }
  .cathero__action .btn { height: 48px; padding: 0 20px; border-radius: 14px; font-size: 14px; width: 100%; justify-content: center; }
}

/* Таблица размеров: на телефоне остаются три колонки из шести, размер стола,
   игровое поле и минимальная комната. Остальные три, рекомендуемая комната,
   площадь и «для чего», уезжают: ради них приходилось листать вбок, а
   решение принимают по минимальной комнате. Полная таблица остаётся на
   широком экране. */
@media (max-width: 640px) {
  .sizes { min-width: 0; width: 100%; font-size: 12px; }
  .sizes th, .sizes td { padding: 8px 6px; }
  .sizes tr > :nth-child(n + 4) { display: none; }
  .sizes thead th { white-space: normal; line-height: 1.2; }
  .table-scroll { overflow-x: visible; }
}

/* Зелёная часть заголовка с новой строки: «Как выбрать бильярдный» и «стол»
   на второй строке читается как обрывок. */
@media (max-width: 640px) {
  #how-to-choose .h2 .accent { display: block; }
}

/* Мозаика разделов на телефоне. Двадцать колонок там не нужны: обычная плитка
   становится половиной экрана, широкая целым. Высоту режем почти вдвое, иначе
   десять разделов это четыре экрана прокрутки. */
@media (max-width: 1000px) {
  .cattiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .cattile { grid-column: span 2; height: 200px; }
  .cattile--wide { grid-column: span 4; height: 220px; }
}
@media (max-width: 640px) {
  .cattiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* Узкая плитка выходит 191 на 175, почти квадрат: кадр один к одному
     ложится целиком, как и на широком экране. */
  .cattile { grid-column: span 1; height: 175px; border-radius: 14px; }
  .cattile--wide { grid-column: span 2; height: 175px; }
  .cattile__label { bottom: 8px; left: 8px; padding: 5px 9px; font-size: 12px; letter-spacing: .04em; max-width: calc(100% - 52px); }
  .cattile__go { right: 8px; bottom: 8px; width: 28px; height: 28px; }
}

/* Свойства товара на телефоне. Тема ставит им одну колонку, и при одной
   плашке в группе получалось три строки, прижатые к левому краю, а справа
   полэкрана пустоты. Подпись уходит влево в свою колонку, плашки встают
   рядом: высота падает втрое, ширина используется вся. */
@media (max-width: 640px) {
  .product__options { grid-template-columns: 1fr; gap: 10px; margin: 16px 0 18px; }
  .optgroup {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    align-items: center;
    gap: 4px 12px;
  }
  .optgroup__label { margin: 0; line-height: 1.2; }
  .optgroup__list { gap: 6px; }
  .opt span { height: 36px; padding: 0 13px; }
}

/* Обещания под кнопками: два на два, а не столбиком. Тема сводит их в одну
   колонку на узком экране, и четыре короткие строки занимали полэкрана,
   оставляя справа пустое поле шириной с сам текст. */
@media (max-width: 640px) {
  .trustrip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 10px;
    padding-top: 14px;
    margin-bottom: 18px;
  }
  .trustrip li { padding-left: 20px; }
  .trustrip li::before { left: 2px; top: 4px; }
  .trustrip strong { font-size: 14px; line-height: 1.25; }
  .trustrip span { font-size: 12px; line-height: 1.3; }
}

@media (max-width: 640px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 22px; }
  .fact { padding: 12px 13px; border-radius: 12px; }
  .fact strong { font-size: 20px; }
  .fact span { font-size: 12px; line-height: 1.3; }
  .cols2 { gap: 10px; }
  .box { padding: 15px 16px; border-radius: 14px; }
  .box h3 { font-size: 16px; margin-bottom: 9px; }
  .ticks li { font-size: 14px; padding-left: 21px; }
  .authors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .author__name { font-size: 14px; }
  .author__role { font-size: 12px; }
  /* Портрет над текстом: в две колонки на 430 точках он ужимается до марки. */
  .author-card { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
  .author-card__photo { max-width: 200px; }
}

/* Услуги на телефоне: две в ряд, пятая во всю ширину. Пять карточек в ряд на
   430 точках превратились бы в полоски по 78 пикселей, а горизонтальную
   ленту здесь не хочется: она прячет половину услуг. */
@media (max-width: 1000px) {
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 640px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .service { border-radius: 14px; aspect-ratio: 1 / 1; }
  .service:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .service__text { padding: 34px 12px 12px; }
  .service__title { font-size: 14px; }
  .service__desc { font-size: 12px; }
  .tag { font-size: 12px; margin-bottom: 7px; }
  .services__head { margin-bottom: 16px; }
}

/* Шаги производства на телефоне: колонка под номер уже, строки плотнее. */
@media (max-width: 640px) {
  .process { margin-top: 20px; }
  .process li { grid-template-columns: 34px minmax(0, 1fr); padding: 13px 0; }
  .process b { font-size: 14px; }
  .prodshort__action { margin-top: 18px; }
  .prodshort__action .btn { width: 100%; text-align: center; justify-content: center; }
}

/* На главной в ленте девять товаров: на широком экране сетка по три в ряд, и
   девять заполняют три полных ряда. На телефоне сетка по две, девятая
   оставалась бы одна в ряду, поэтому её прячем. */
@media (max-width: 640px) {
  .shop--home .grid--products > .card:nth-child(9) { display: none; }
}

/* Проекты на телефоне: подпись переезжает из кадра под кадр.
   Поверх снимка она держалась, пока плитка была в пол-экрана шириной. На
   телефоне плитка вдвое уже, и плашка с названием, городом, сроком и тремя
   фактами в неё не помещалась: текст вылезал за края и закрывал соседнюю. */
@media (max-width: 760px) {
  .projects--rows { gap: 22px; }
  .projects__row--tall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .projects__row--wide { grid-template-columns: 1fr; gap: 14px; }
  /* Высоту плитки задаёт содержимое, а не сетка ряда: пока картинка тянулась
     на всю высоту ячейки, подпись вываливалась за нижний край и наезжала на
     кнопку под блоком. */
  .projects--rows .project {
    display: grid; grid-template-rows: auto auto; align-content: start;
    background: none; border-radius: 0; overflow: visible;
  }
  .projects--rows .project__img { height: auto; border-radius: 14px; }
  .projects--rows .project__bar {
    position: static; margin-top: 8px; padding: 0;
    /* Рамку и скругление тоже снимаем: без фона и полей они рисовали пустой
       прямоугольник впритык к буквам, а двухстрочное название вылезало за
       него, и выглядело это как поломка. */
    background: none; border: 0; border-radius: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px;
  }
  .project__title { font-size: 14px; line-height: 1.2; }
  .project__city { font-size: 12px; }
  .project__metric { font-size: 12px; }
  /* У узких плиток остаётся название, город и срок: три факта под фотографией
     в половину ширины экрана превращаются в шесть строк. У широких факты
     остаются, там место есть. */
  .projects__row--tall .project__facts { display: none; }
  .projects__row--wide .project__facts li { font-size: 12px; }
}

/* Доставка и монтаж на телефоне: значок слева, текст справа. В столбик
   каждый шаг занимал экран целиком, и четыре шага превращались в четыре
   экрана прокрутки ради четырёх абзацев. */
@media (max-width: 760px) {
  .cycle__item {
    display: grid; grid-template-columns: 42px minmax(0, 1fr);
    gap: 2px 14px; padding: 18px 16px;
  }
  .cycle__icon { grid-column: 1; grid-row: 1 / span 3; margin: 2px 0 0; align-self: start; }
  .cycle__n { grid-column: 2; }
  .cycle__title { grid-column: 2; margin: 2px 0 4px; font-size: 16px; }
  .cycle__text { grid-column: 2; font-size: 14px; }
}

/* Длинные перечни на телефоне: кегль меньше, отступы плотнее. Восемнадцатый
   кегль заголовка и шестнадцатый текста это размеры для широкой колонки, а на
   экране в 375 точек каждый пункт растягивается на треть экрана, и до конца
   списка человек мотает полминуты. */
@media (max-width: 760px) {
  .guide__item { padding: 16px 0; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  .guide__n { font-size: 24px; }
  .guide__title { font-size: 16px; margin-bottom: 5px; }
  .guide__text { font-size: 14px; line-height: 1.45; }

  .factory__lead { font-size: 16px; line-height: 1.45; margin-bottom: 20px; }
  .factoryitem { padding: 16px 0; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
  .factoryitem__tick { width: 32px; height: 32px; }
  .factoryitem__title { font-size: 16px; margin-bottom: 4px; }
  .factoryitem__text { font-size: 14px; line-height: 1.45; }

  /* Подпись под таблицей размеров переносится по смыслу, а не как придётся:
     одно слово на второй строке выглядит обрывком. */
  .sizes + .section__action .linklike,
  .table-scroll + .section__action .linklike { text-wrap: balance; display: inline-block; max-width: 30ch; }
}

/* Многоуровневое меню: разделы каталога и подборки внутри них. */
@media (max-width: 760px) {
  /* Панель каталога на телефоне не нужна: она живёт на наведении мышью. */
  .site-nav__item .megamenu { display: none; }
  /* Прописные достались от пунктов меню. Названия разделов и подборок это
     обычный текст, «12 ФУТОВ» читается хуже, чем «12 футов». */
  /* Разделы каталога открываются нажатием на «Каталог», а не висят
     отдельным списком внизу меню. Пункт «Каталог» из основного ряда при этом
     прячется: две строки с одним словом подряд выглядят ошибкой. */
  /* display здесь не трогаем: меню скрыто и показывается по классу is-open,
     и правило `display: flex` в этом файле держало его открытым навсегда,
     из-за чего бургер выглядел сломанным. */
  .site-nav { flex-direction: column; }
  .site-nav__item { display: none; }
  .navtree { display: block; order: -1; margin: 0 0 4px; text-align: right; }
  .navtree > summary.navtree__head {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    padding: 15px 0; margin: 0; font-size: 16px;
    letter-spacing: .04em; color: var(--ink); cursor: pointer; list-style: none;
  }
  .navtree > summary::-webkit-details-marker { display: none; }
  /* Знак у «Каталога» рисуется ниже уголком. Прежние плюс и минус убраны:
     минус оставался внутри повёрнутой рамки и торчал из уголка лишней чертой,
     потому что правило с ним весило больше и перебивало пустое содержимое. */

  /* Значки стоят вплотную к бургеру, а не сразу за логотипом: палец держит
     телефон за правый край, и всё, что нажимают, должно быть там же. */
  .site-head__in { gap: 8px; }
  .site-head__tools { margin-left: auto; gap: 0; }
  .burger { margin-left: 4px; }

  /* Контакты внизу меню. */
  /* Меню на весь экран и со своей прокруткой. Раньше это была полоса,
     высота которой зависела от числа пунктов: с открытым каталогом список
     уходил за нижний край, и промотать его было нельзя, потому что за краем
     начиналась уже страница. */
  .site-nav {
    /* Не fixed: у шапки есть размытие фона, а элемент с backdrop-filter
       становится системой координат для fixed-потомков, и панель получала
       высоту в ноль. Поэтому absolute от шапки и высота от экрана. */
    position: absolute; left: 0; right: 0; top: var(--head-h);
    height: calc(100vh - var(--head-h));
    height: calc(100dvh - var(--head-h));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 6px 20px calc(18px + env(safe-area-inset-bottom));
    border-bottom: 0;
    /* От широкого экрана осталось выравнивание по центру. В колонке, которая
       выше своей коробки, оно делит лишнее поровну сверху и снизу, и верхние
       строки уезжают над панелью, куда прокрутка не достаёт: со стороны это
       и выглядит как «меню при нажатии на каталог съехало вниз». */
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
  /* Пункты идут плотно и без линеек. Шаг в 22 точки достался от широкого
     экрана, где меню стоит строкой: в столбик он складывался с полями пункта
     и давал между строками по шестьдесят точек пустоты. */
  .site-nav { gap: 0; }
  .site-nav > a, .site-nav__scroll > a { padding: 6px 0; border-bottom: 0; }
  .navtree > summary.navtree__head { padding: 6px 0; }
  /* Вместо плюса уголок: вправо, когда закрыто, и вниз, когда раскрыто.
     Рисуется двумя сторонами рамки, поэтому не зависит от шрифта и выглядит
     одинаково везде. */
  .navtree > summary::after {
    content: ''; width: 6px; height: 6px; border: 0;
    border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
    transform: rotate(-45deg); transform-origin: center;
    transition: transform .18s ease;
  }
  .navtree[open] > summary::after { transform: rotate(45deg); }
  /* Разделы каталога фишками: десять строк с отступами занимали экран
     целиком, фишки укладываются в четыре ряда. */
  .navtree__body--top {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px;
    padding: 2px 0 6px;
  }
  .navtree__body--top a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border: 1px solid var(--line); border-radius: 100px;
    font-size: 14px; color: var(--ink-2); text-transform: none; letter-spacing: 0;
  }
  .navtree__body--top a:hover { border-color: var(--ink); color: var(--ink); }
  .navtree__body--top .navtree__all { color: var(--ink); font-weight: 600; }

  /* Контакты по центру: это не продолжение правого столбца пунктов, а
     отдельная часть меню. */
  /* Контакты прижаты к низу меню и остаются там всегда. Просто отступом
     сверху это не решается: когда каталог раскрыт, список выше становится
     длиннее экрана, и блок уезжает вниз вместе с ним. Поэтому он липкий к
     нижнему краю панели, а список прокручивается за ним. */
  /* Панель это две части: прокручиваемый список и неподвижный низ. Липкий
     низ сюда не годился: он накрывал собой последние пункты списка, пока тот
     не домотан до конца. */
  .site-nav { overflow: hidden; padding-top: 2px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .site-nav__scroll {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    /* Полосы прокрутки не рисуем: на узком экране она ложится серой чертой
       поперёк меню и читается как разделитель, которого там нет. */
    scrollbar-width: none;
  }
  .site-nav__scroll::-webkit-scrollbar { display: none; }
  .navfoot { display: block; flex: 0 0 auto; background: var(--bg); }
  .navcontacts {
    display: grid; justify-items: center; text-align: center; gap: 5px;
    padding-top: 10px; border-top: 1px solid var(--line);
  }
  /* Прописные достались от пунктов меню. Адрес почты прописными читается как
     крик и хуже разбирается глазом. */
  .navcontacts a { text-transform: none; letter-spacing: 0; border: 0; padding: 4px 0; }
  .navcontacts__phone { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
  .navcontacts__mail { font-size: 14px; color: var(--ink-2); }
  .navcontacts__cta { margin-top: 4px; width: 100%; height: 46px; justify-content: center; }
  .navcontacts__soc { display: flex; gap: 12px; margin: 8px 0 0; }
  /* Остатки прежнего дерева убраны: разделы теперь фишками, вложенных
     раскрывающихся списков в меню нет. Правило .navtree__body { display: grid }
     стояло ниже и превращало ленту фишек обратно в столбец во всю ширину. */
  .navtree a, .navtree summary { text-transform: none; letter-spacing: 0; }
  .navtree__n { font-size: 12px; color: var(--accent-text); }
}