/** * Мобильная адаптация — сквозные исправления (задача Б24 59422, спринт 0 «гигиена»). * * Здесь только то, что чинит вылет элементов за край экрана на телефонах. * Файл подключается последним в header.php, поэтому правила перебивают базовые. * Всё внутри @media (max-width: 767px) — десктоп не затрагивается. * * Диагностика каждого пункта: docs/mobile-adaptation/01-analiz-sostoyaniya.md * Проверка: node docs/mobile-adaptation/tools/overflow-report.js */ @media (max-width: 767px) { /* 0.2 Кнопка «Меню раздела» на страницах с левым меню (/help/*, /about/*, /network/*). Была box-sizing: content-box, поэтому padding 11px слева и справа прибавлялся к width:100% — кнопка получалась на 22px шире своего контейнера. */ .sidebar-menu .sidebar-menu-mobile-button, .sidebar-menu .sidebar-menu-mobile-button > div, .sidebar-menu .sidebar-menu-mobile-button .current { box-sizing: border-box; max-width: 100%; } /* 0.3 Хлебные крошки: список flex без переноса, поэтому длинные названия разделов уезжали за правый край (до +266px на листинге). Разрешаем перенос. */ .breadcrumb.breadcrumb__list, ul.breadcrumb { flex-wrap: wrap; row-gap: 4px; } /* 0.4 Пагинация каталога: элементы не переносились, ul разъезжался до 458px и центрировался — кнопки «первая» и «предыдущая» уходили за левый край, «следующая» за правый, нажать их было нельзя. */ ul.page-nav { flex-wrap: wrap; max-width: 100%; justify-content: center; row-gap: 6px; } /* Приёмка продакта 15.09.2026: перенос спасал от вылета, но в середине длинного раздела (11 страниц, «1 … 3 4 5 6 7 … 11») пагинация ложилась в две строки. Причина — отступ 25px после каждого номера: 11 пунктов занимали 550px. Ужимаем отступ до 8px, а в длинных пагинациях (10 и больше пунктов) прячем номера, стоящие ВПЛОТНУЮ к многоточию: «1 … 3 4 5 6 7 … 11» превращается в «1 … 4 5 6 … 11» — 347px, одна строка и на 360px. Почему именно так. Первая версия прятала всё, кроме первой, последней и текущей с соседями, — и на 4-й странице из 11 выходило «1 3 4 5 … 11»: двойка пропадала, а многоточия на её месте не было (на 8-й так же терялась десятка; нашло код-ревью 23.09.2026). Номер рядом с «…» можно спрятать всегда без обмана: многоточие и так означает «здесь пропущены страницы», мы лишь расширяем этот пропуск на одну. Без многоточия рядом не прячем ничего — в худшем случае ряд перенесётся на вторую строку, но страницы не пропадут. Проверено на всех 11 страницах. */ ul.page-nav > li { margin-right: 8px !important; } ul.page-nav > li:last-child { margin-right: 0 !important; } ul.page-nav:has(> li:nth-child(10)) > li:not(.prev-pag):not(.next-pag):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)):not(.active):not(.active + li):not(:has(+ .active)):not(:has(.modern-page-dots)):is(:has(+ li > .modern-page-dots), li:has(> .modern-page-dots) + li) { display: none; } /* 0.5 Корзина: блок итоговых кнопок растягивался на всю ширину экрана отрицательными margin, посчитанными от 100vw при контейнере 90vw. Арифметика не сходилась, и блок вылезал на 10px вправо — страница ездила вбок. Заменяем на честный full-bleed: ровно ширина экрана, без вылета. */ .basket-container-table-itog-actions { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; max-width: 100vw; } /* 0.7 Оформление заказа: поле «Комментарий к заказу» — content-box, padding 14px/10px прибавлялся к ширине и выходил за правый край. */ .create_order_info__add_comment_input, .comment_order textarea { box-sizing: border-box; width: 100%; max-width: 100%; } /* Общая страховка: картинки и видео в контенте не шире экрана. */ .main-content img, .main-content video, .main-content iframe { max-width: 100%; } } /* ───────────────────────────────────────────────────────────────────────── Липкая панель покупки на карточке товара (спринт 1). Разметку создаёт js/mobile-buy-bar.js, здесь только внешний вид. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .mobile-buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; gap: 8px; box-sizing: border-box; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; box-shadow: 0 -2px 12px rgba(0, 0, 0, .14); } .mobile-buy-bar[hidden] { display: none; } .mobile-buy-bar__sum { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1 1 auto; } .mobile-buy-bar__sum-title { font-size: 11px; color: #7a7a7a; } .mobile-buy-bar__sum-value { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Поля количества в панели нет (решение продакта 03.09.2026): строк с количеством на карточке несколько — склады, размеры, — и одно поле на всех молча писало в первую. Кнопка занимает освободившееся место. */ .mobile-buy-bar__btn { box-sizing: border-box; height: 44px; flex: 0 1 200px; padding: 0 18px; border: 0; border-radius: 6px; background: #ffe100; color: #000; font-size: 15px; font-weight: 700; cursor: pointer; } .mobile-buy-bar__btn:active { background: #f5d800; } /* подсветка родного поля количества, когда его просят заполнить */ /* box-shadow, а не outline: у родных полей outline погашен, и подсветка через него не видна (проверено скриншотом 03.09.2026) */ /* Селектор с запасом по весу: у шаблона есть `.up_main_search .form-control { box-shadow: none !important }`, и одиночный класс с !important ему проигрывает — подсветка не рисовалась. */ body input.mobile-buy-bar-hint, body .form-control.mobile-buy-bar-hint { /* у родного поля appearance: menulist — нативная отрисовка, тень и рамка при ней не рисуются */ -webkit-appearance: none !important; appearance: none !important; box-shadow: 0 0 0 3px #ffb800 !important; border: 1px solid #ffb800 !important; background: #fff3b0 !important; } /* панель не должна закрывать последний блок страницы */ body.has-mobile-buy-bar { padding-bottom: 72px; } } /* ───────────────────────────────────────────────────────────────────────── Уживаемся со всплывашкой акции «Поймай Лаки». Питомец акции (.hgl-pet) висит fixed на bottom:16px с z-index 2000 — то есть ровно поверх нашей панели покупки и перехватывает нажатия на «В корзину» (проверено на stage: автотест не мог кликнуть, пока всплывашка открыта). Решение продакта от 01.09.2026: пусть всплывает над кнопкой, а не поверх неё. Класс body.has-mobile-buy-bar ставит js/mobile-buy-bar.js только когда панель реально видна, поэтому на остальных страницах питомец остаётся на своём месте. Классы чужие (ветка акции). Если акция их переименует, правило просто перестанет срабатывать и ничего не сломает — но всплывашка снова окажется поверх кнопки. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { body.has-mobile-buy-bar .hgl-pet { bottom: 84px; } } /* ───────────────────────────────────────────────────────────────────────── Шапка «Калькулятор услуг производства» на карточке (спринт 1, пункт 1.3). Было: обёртка центрирует текст (.panel-heading__wrapper { text-align: center }), а переключатель — это ::after у заголовка, приклеенный к его левому краю. На узком экране заголовок переносится на две строки, переключатель остаётся у первой, и блок читается как две несвязанные части. Стало: выравниваем по левому краю — переключатель и текст идут одной группой. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .panel-heading__wrapper { text-align: left; } .main-container .panel .panel-heading { display: block; } .panel-heading > .panel-title { display: inline-block; font-size: 15px; line-height: 24px; } } /* ───────────────────────────────────────────────────────────────────────── Галерея фото на карточке (спринт 1, пункт 1.4). Было: слева вертикальная колонка миниатюр (20% ширины), фото — в оставшихся 80%. На телефоне это давало картинку в 286px из 390 и, главное, не давало листать фото пальцем: свайпа не было вовсе, а миниатюры на узком экране почти не видны. Стало: миниатюры убраны, слайдер во всю ширину, лента листается нативной горизонтальной прокруткой с прилипанием (scroll-snap) — обычный мобильный свайп. Сам слайдер (lightSlider) не переписываем: только отключаем его позиционирование на узких экранах, на десктопе всё работает по-прежнему. Граница — 670px, а не 767: между 671 и 767 сайт показывает фото по-другому, слайдера там нет вовсе, и скрытые миниатюры оставили бы человека без единого способа переключить фотографию (нашло код-ревью 01.09.2026). ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 670px) { section.product-top .product-gallery-previews-container { display: none !important; } section.product-top .product-gallery-slider { width: 100% !important; float: none !important; height: auto !important; } section.product-top .product-gallery-slider .slider-inner { display: flex !important; width: 100% !important; overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; transform: none !important; left: 0 !important; } section.product-top .product-gallery-slider .slider-inner > li { flex: 0 0 100% !important; width: 100% !important; float: none !important; scroll-snap-align: center; } section.product-top .product-gallery-slider .slider-inner > li img { max-width: 100%; height: auto; } /* Счётчик «1 / 6». Миниатюры на телефоне убраны, и без него человек не видит, что фотографий несколько: одно фото на весь экран читается как единственное. Разметку создаёт js/mobile-gallery.js. */ section.product-top .product-gallery-slider { position: relative; } .mobile-gallery-counter { position: absolute; right: 10px; bottom: 10px; z-index: 3; padding: 3px 9px; border-radius: 11px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; line-height: 16px; font-weight: 600; pointer-events: none; } .mobile-gallery-counter[hidden] { display: none; } } /* ───────────────────────────────────────────────────────────────────────── Отрицательные поля основной колонки — только каталог и карточка товара. У .main-content стоят margin-left/right: -15px — приём вёрстки колонок, рассчитанный на широкий экран с компенсирующим padding у родителя. На телефоне родитель уже прижат к краю, поэтому блок вылезал на 3px за экран и страницу можно было таскать вбок. Ставим −11px: контент всё ещё шире обычной колонки на 22px, но за экран уже не выходит. Полное обнуление пробовали — блок складов терял 30px, и иконка подсказки наезжала на числа остатков (визуальная приёмка 01.09.2026); на карточке эти 22px нужны. ВАЖНО: правило адресное. Сначала оно стояло на весь шаблон, и всем остальным страницам эта прибавка только вредила — колонка 393px при экране 390px, строки упирались в края телефона, слева даже на 1px за него. Так поехали тексты (/help/*, /about/*), а в приёмке 22.09.2026 продакт увидел то же в корзине: заголовок «Корзина» и суммы прижаты к самому краю, «Очистить» обрезана справа. Те же 393@−1 были в оформлении заказа, КП и кабинете. Метку hg-page-catalog ставит header.php по адресу страницы: различить их в CSS нечем, контейнеры у всех одинаковые. Под правило подпадает только /catalog/ — листинг, поиск и карточка. /catalog_new/ (корзина, заказ, КП) и всё остальное получают обычные поля, как на компьютере. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* !important нужен: исходное правило с отрицательными полями перебивает по весу. */ body.hg-page-catalog .main-content { margin-left: -11px !important; margin-right: -11px !important; } } /* ───────────────────────────────────────────────────────────────────────── Таблица «Сроки / Стоимость» нанесений на карточке (спринт 1, пункт 1.5). Колонки делились как 259 / 105 px: в «Стоимость» не помещалось «от 136.02 р/шт», подпись «р/шт» разрывалась и уезжала за край, заголовок колонки обрезался. Особенно заметно на одежде, где видов нанесения шесть. Делим пополам, ужимаем отступы и разрешаем переносить длинные значения («по запросу менеджера») внутри своего поля, чтобы они не наезжали на соседнюю колонку. Граница — 670px: выше неё колонка «Вид нанесения» показывается (208px), и table-layout: fixed с долями 50/50 схлопывал бы её в ноль вместе с названиями видов нанесения (нашло код-ревью 01.09.2026). ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 670px) { table.appl_sorok_price { width: 100% !important; table-layout: fixed; } table.appl_sorok_price td { padding-left: 4px !important; padding-right: 4px !important; font-size: 13px !important; } table.appl_sorok_price td:nth-child(2), table.appl_sorok_price td:nth-child(3) { width: 50%; } table.appl_sorok_price td > .d-flex { max-width: 100%; flex-wrap: wrap; } table.appl_sorok_price .day_app, table.appl_sorok_price .price_app { max-width: 100%; white-space: normal; word-break: break-word; } } /* ───────────────────────────────────────────────────────────────────────── Блок складов и остатков на карточке (визуальная приёмка 01.09.2026). Три колонки — название склада, остатки, поле количества — занимали 351px при контейнере 353: впритык. Стоило контенту стать чуть уже, как иконка подсказки наезжала на цифры остатков, и строка читалась как «Центральный⊗3679». Даём названию всё свободное место, числа и поле — по содержимому. Если название всё равно не помещается, обрезаем его многоточием: так видно, что текст сокращён, а не сломан. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* блоку складов возвращаем ширину, которую мы отняли у .main-content: здесь она нужнее всего — это остатки, ради которых на карточку и заходят */ .slideDiv2 { margin-left: -11px; margin-right: -11px; } .slideDiv2 .avilability-table { font-size: 13px; } .slideDiv2 .avilability-tabs { flex: 1 1 auto; min-width: 0; } .slideDiv2 .avilability-tabs-item, .slideDiv2 .avilability-link { min-width: 0; } .slideDiv2 .avilability-link > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .slideDiv2 .avilability-numbers { flex: 0 0 auto; padding-left: 4px; } .slideDiv2 .quantities-container { flex: 0 0 80px; } .slideDiv2 .tt-europa-section { flex: 0 0 auto; margin-left: 2px; } } /* ───────────────────────────────────────────────────────────────────────── Обучающая подсказка hg-hint на телефоне (карточка товара). Подсказка «Фото товара — в JPG» ставится над своей кнопкой и на широком экране встаёт сбоку. На телефоне кнопка лежит прямо под галереей, места сбоку нет, и подсказка ложится поверх фотографии: замер на боевой карточке — она закрывает 68% галереи, товара фактически не видно. Пока она открыта, фото ещё и не листается: касания уходят в неё, а не в ленту (проверено настоящим свайпом — 0 пикселей прокрутки, пока подсказка на экране). Это не наша регрессия, так на проде. Функцию не трогаем: подсказка нужна, она показывается один раз и закрывается кнопкой «Понятно». Меняем только место — прижимаем к нижнему краю экрана, как обычную мобильную плашку. Хвостик при этом убираем: он указывал бы в пустоту. Позиция задаётся скриптом в inline-стилях (left/top), поэтому здесь нужен !important — у inline-стилей приоритет выше обычных правил, но ниже !important. Правило привязано к классу body.hg-mobile-gallery, который ставит js/mobile-gallery.js на карточке товара с мобильной галереей. Без этого оно действовало бы на весь шаблон: подсказки hg-hint есть ещё в списке заказов и в КП, и там плашка снизу оторвалась бы от своей кнопки и накрыла строки. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { body.hg-mobile-gallery .hg-hint { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important; max-width: none !important; box-shadow: 0 4px 24px rgba(0, 0, 0, .22); } body.hg-mobile-gallery .hg-hint__arrow { display: none !important; } /* Внизу экрана уже может стоять липкая панель покупки — тогда подсказка ложится ровно на кнопку «В корзину» и перехватывает нажатия (поймано автопроверкой: «hg-hint intercepts pointer events»). Поднимаем над панелью, как и питомца акции. Класс ставит js/mobile-buy-bar.js, только когда панель реально видна. */ body.hg-mobile-gallery.has-mobile-buy-bar .hg-hint { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; } } /* ───────────────────────────────────────────────────────────────────────── Плитка товара в листинге: строки остатков (спринт 2, пункт 2.1). Замер на боевых разделах: обрезано 32 названия склада из 72 строк (44%), и обрезаны ровно все строки «Центральный:» — читалось «Централ…252761/228351». Две причины сразу: 1) `grid-template-columns: 10fr 1fr` — доли, а не содержимое. Числа сжиматься не умеют, поэтому забирают себе 87px из 150, а названию остаётся 63 при нужных 89. 2) На телефоне шрифт этих строк не уменьшается, а УВЕЛИЧИВАЕТСЯ до 14px (правило в styles.css листинга), хотя места здесь меньше всего. Обе цифры оставляем: это «всего / свободно», и свободное количество — то, ради чего в листинг и смотрят. Вместо сокращения данных возвращаем строкам десктопные 12px и раздаём место по содержимому. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .product-card__location-name, .product-card__location-count, .product-card__location-count span { font-size: 12px !important; line-height: 17px; } /* Сетка из двух колонок тут не спасает: «Центральный:» просит 89px, числа «252761/228351» — 87, а в плитке всего 150. При любых долях кто-то обрежется, и обрезается всегда название. Поэтому строка становится гибкой с переносом: пока всё помещается — одна строка, как раньше; не помещается — числа уезжают на вторую и прижимаются вправо. Плитка растёт только там, где остатки действительно шестизначные. */ .product-card__location-item { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; } .product-card__location-name { flex: 0 0 auto; max-width: 100%; overflow: visible; } .product-card__location-count { flex: 0 0 auto; margin-left: auto; white-space: nowrap; } /* Список складов свёрнут до 60px («3 строки до наведения»), а раскрывается он классом active — на десктопе по наведению, на телефоне кнопкой, которая тут скрыта. То есть на телефоне часть складов не показать вообще никак: у ручки строка «Европа» просто срезалась по высоте. После переноса чисел строки стали выше, и срезалось ещё больше. Снимаем ограничение: на телефоне показываем все склады сразу. Плитка растёт с 498 до 488–519px в зависимости от числа строк — на экран по-прежнему помещаются те же две карточки. */ .product-card__location-list { max-height: none; } } /* ───────────────────────────────────────────────────────────────────────── Панель «Фильтры / Сортировка» в листинге (спринт 2, пункт 2.2). Замер: панель стоит на 433-м пикселе и уезжает вверх при первой же прокрутке, а страница раздела — 5363px. То есть отфильтровать или пересортировать выдачу можно, только пролистав всё обратно наверх. Делаем липкой. Своей липкой шапки на листинге нет (проверено: сверху висят только скрытые модалки), поэтому прижимаем к нулю. Фон обязателен: панель прозрачная, и без него сквозь неё видны уезжающие карточки товаров. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Липкость гасил `overflow: hidden` у .main-container: он создаёт свой контейнер прокрутки, и панель прилипает к его границе, а она выше экрана. Меняем на `clip` по горизонтали — обрезка вбок остаётся (страница по-прежнему не таскается), но контейнер прокрутки не создаётся и sticky работает. Где `clip` не поддерживается (Safari до 16), отбрасывается только эта строка: по горизонтали остаётся исходный hidden, а visible по вертикали рядом с ним браузер превращает в auto. Контейнер прокрутки сохраняется — панель остаётся нелипкой, как сейчас на проде, вбок страница не едет. flow-root возвращает то, что hidden давал попутно: контейнер снова удерживает внутри себя плавающие блоки и не пропускает сквозь себя отступы детей. Замер 23.09.2026 на 8 страницах (до 151 плавающего блока на карточке): высоты с clip и с hidden совпадают, так что это страховка на будущее, а не исправление видимой поломки. */ .main-container { overflow-x: clip; overflow-y: visible; display: flow-root; } .filter_left__parameters { position: sticky; top: 0; z-index: 20; box-sizing: border-box; /* боковые поля, как у остального контента: без них «По умолчанию» упирается в правый край экрана (замер на 360px: запас 0px) */ padding: 8px 11px 10px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); } } /* ───────────────────────────────────────────────────────────────────────── Шторка фильтра на телефоне (спринт 2, пункты 2.3 и 2.4). Что нашли замером на боевом разделе: 1) список «Подходящие категории» ограничен 203px при содержимом 320px, причём `overflow-y: hidden` и кнопки «показать все» нет — примерно пять категорий недоступны никаким способом, а обрезка приходится на середину строки и читается как поломка вёрстки; 2) сама шторка занимает 360px из 390: слева остаётся полоса страницы, которая ничего не даёт, но забирает ширину у названий фильтров; 3) 36 из 42 нажимаемых элементов ниже 44px — пункты категорий и заголовки разделов фильтра по 24px, кружки цветов 24x24, крестик 32x35. Высоту списку возвращаем: шторка и так прокручивается целиком, поэтому ограничивать её внутренние блоки незачем. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .left-filters { left: 0 !important; width: 100% !important; } /* список категорий больше не срезается: показываем все */ .left-filters .subcategories__list { max-height: none !important; overflow-y: visible; } /* Палец попадает по строке целиком, а не по 24px текста. Увеличиваем зону нажатия отступами, а не высотой шрифта: так строки остаются на своих местах и вёрстка фильтра не разъезжается. */ .left-filters .subcategories__item, .left-filters .sidebar-menu-title, .left-filters .left-filters__title { display: flex; align-items: center; min-height: 44px; } .left-filters .base-colors__item-btn { min-width: 32px; min-height: 32px; padding: 4px; } .left-filters .close_filters_popup { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } } /* ───────────────────────────────────────────────────────────────────────── Мелкие нажимаемые элементы в плитке листинга (спринт 2, пункт 2.4). Замер: 13 из 16 нажимаемых элементов плитки меньше 44px — кружки расцветок 30x30, стрелка «ещё цвета» 20x24, значки акций 33x20. Довести всё до 44px нельзя честно: плитка шириной 164px, а кружков в ряду четыре плюс стрелка — 44px не помещаются физически (4 × 44 = 176 уже больше всей плитки). Поэтому увеличиваем до предела, который влезает, и добиваем зону нажатия отступами, не раздувая сам кружок. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Ширину не трогаем: ряд расцветок 147px, в нём четыре кружка и стрелка «ещё цвета». Кружки по 34 сдвигали стрелку за край плитки (проверено — она обрезалась). Растим только по вертикали: при прокрутке пальцем промахиваются именно вверх-вниз. */ .product-card__color-tags { row-gap: 6px; } .product-card__color-tag-btn { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; } /* display здесь не задаём: базовое правило прячет стрелку, а скрипт initCards.js показывает её инлайном только когда цветов больше четырёх. Наш display:flex перебивал базовое — стрелка висела даже у товара с одним цветом (приёмка продакта 15.09.2026). */ .product-card__color-dropdown { min-height: 34px; align-items: center; justify-content: center; } /* Обводка выбранного цвета. Кнопка стала 30×34 (см. min-height выше), а кольцо рисовалось её рамкой с border-radius: 50% — получался овал, и кружок сидел в нём не по центру (padding 4px сверху, 1px снизу). Рисуем кольцо тенью вокруг самого кружка: всегда круглое и по центру. */ .product-card__color-tag-btn.active { border-color: transparent !important; padding: 4px !important; } .product-card__color-tag-btn.active .product-card__color-tag { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d1d1b; } /* Значки акций ведут на подборки, по 20px в высоту в них трудно попасть. Зону нажатия даём ссылке, а картинку держим в размере компьютера: раньше она растягивалась вслед за ссылкой до 32px и значки выглядели огромными на плитке 180px (приёмка продакта 15.09.2026). */ .unique-sign-tooltip-container > a { display: inline-flex; align-items: center; min-height: 32px; } .product-card__unique-signs { height: 32px; } .product-card__unique-signs img { height: 20px; width: auto; } } /* ───────────────────────────────────────────────────────────────────────── Плитка листинга — замечания продакта с телефона (15.09.2026, приёмка на stage). ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Старая (перечёркнутая) цена стоит в одну строку с новой тем же шрифтом 16px: «1499 ₽ 2349 ₽» занимает 119px из 164, пятизначные пары не влезают. Решение продакта — на телефоне не показывать; о скидке говорит значок SALES. */ .product-card__price-old { display: none !important; } /* Стрелка у списка складов. В пункте 2.1 мы сняли ограничение высоты списка — на телефоне все склады видны сразу. Стрелка осталась и по нажатию только поворачивалась, раскрывать ей было нечего. Убираем. */ .product-card__toggle-stock-location { display: none !important; } } /* ───────────────────────────────────────────────────────────────────────── Баннер cookie на телефоне (спринт 3, пункт 3.2). Замер на iPhone 12: баннер занимает 207px из 664 — это 31% первого экрана, и вместе с попапом филиала (его мы уже отложили до каталога) от главной не оставалось ничего. Уменьшаем отступы и межстрочный интервал, кнопку делаем в один ряд с текстом по ширине. Смысл и текст не трогаем: это юридическое уведомление. Селекторы через #hg-cookie-bar — иначе не перебить исходные правила по весу. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { #hg-cookie-bar .hg-cookie-bar__inner { padding: 12px 14px; gap: 10px; } #hg-cookie-bar .hg-cookie-bar__title { margin: 0 0 2px; font-size: 14px; line-height: 1.25; } #hg-cookie-bar .hg-cookie-bar__text { font-size: 12px; line-height: 1.4; } #hg-cookie-bar .hg-cookie-bar__btn { height: 44px; line-height: 44px; padding: 0 20px; font-size: 14px; } #hg-cookie-bar .hg-cookie-bar__actions { gap: 8px; } } /* ───────────────────────────────────────────────────────────────────────── Пустая полоса под шапкой на главной (спринт 3, пункт 3.2). Между шапкой и первым баннером — 52px пустоты. Внутри `.top-container` лежит пустой `.search-top-block` высотой 22px плюс отступы: на главной в нём ничего нет, на страницах каталога в том же контейнере живут хлебные крошки, поэтому убирать контейнер целиком нельзя. Прячем именно пустой блок и уменьшаем отступ контейнера — на страницах с крошками они просто встают чуть ближе к содержимому. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .top-container > .search-top-block:empty { display: none; } .top-container { padding-top: 0; margin-bottom: 8px; } } /* ───────────────────────────────────────────────────────────────────────── Контентные страницы: /help/*, /about/*, /network/*, /solutions/*, /new/ (спринт 4, пункт 4.1). Вместе около 4 тыс. мобильных просмотров в месяц. Общая контейнерная обёртка у них одна — .main-blocks-content-default, но она же стоит на листинге и корзине, поэтому широких правил здесь нет: только перенос длинных строк, картинки по ширине экрана и два адресных исправления content-box, найденных замером. ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* 4.1.1 Перенос длинных слов в тексте: ссылка или артикул без пробелов переносится посреди слова, а не вылезает за край экрана. Срабатывает ТОЛЬКО когда слово иначе не влезает, обычный текст не трогает. Таблицы этим правилом НЕ лечатся, и ячеек в списке нет намеренно: break-word не уменьшает минимальную ширину колонки, а таблица раскладывается именно по ней. Таблицу на «Доставке» (561px при экране 371px из-за 14 подряд идущих   в одной ячейке) ужимает js/mobile-tables.js. Первая версия этого комментария утверждала обратное — ошибку нашло код-ревью 23.09.2026. */ .main-blocks-content-default p, .main-blocks-content-default li, .main-blocks-content-default dd, .main-blocks-content-default h1, .main-blocks-content-default h2, .main-blocks-content-default h3, .main-blocks-content-default h4 { overflow-wrap: break-word; } /* 4.1.2 Картинки в тексте не шире экрана. Общего правила на сайте нет, поэтому любая вставленная контент-менеджером фотография в оригинальном размере растягивает страницу. height:auto ставим только там, где размер задан атрибутом в html — именно такие картинки иначе сплющиваются. */ .main-blocks-content-default .main-content img { max-width: 100%; } .main-blocks-content-default .main-content img[width] { height: auto; } /* 4.1.3 Кнопка «Показать ещё» на /new/: width:100% при content-box, плюс padding 60px слева и 24px справа — кнопка получалась 457px при экране 371px, надпись уезжала за край. */ .main-blocks-content-default .more-button-button { box-sizing: border-box; max-width: 100%; } /* 4.1.4 Плитки на «Вопрос-ответ» (10 штук): width:100% при content-box и padding 16px — каждая была на 33px шире колонки. */ .main-blocks-content-default .table-elements-container .table-element { box-sizing: border-box; max-width: 100%; } /* 4.1.5 Таблица, которая не влезла в экран, получает шрифт 13px и поджатые ячейки — это дешевле для чтения, чем прокрутка вбок. Класс вешает js/mobile-tables.js и только тем таблицам, которые действительно не влезли: остальные он не трогает. */ .main-blocks-content-default table.hg-table-dense, .main-blocks-content-default table.hg-table-dense p, .main-blocks-content-default table.hg-table-dense li { font-size: 13px; line-height: 18px; } .main-blocks-content-default table.hg-table-dense td, .main-blocks-content-default table.hg-table-dense th { padding-left: 4px; padding-right: 4px; } /* 4.1.6 Если и после этого таблица шире экрана (реальные данные в 5–6 колонок) — она прокручивается внутри себя. Обёртку ставит тот же скрипт. */ .hg-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .hg-table-scroll__hint { margin: 0 0 6px; font-size: 12px; line-height: 16px; color: #8b8b8b; } } /* Подсказку о прокрутке показываем только на телефонах: на компьютере таблица влезает целиком и строка сбивала бы с толку. */ @media (min-width: 768px) { .hg-table-scroll__hint { display: none; } } /* ───────────────────────────────────────────────────────────────────────── Меню личного кабинета (приёмка продакта 22–23.09.2026). В кабинете меню из 18 ссылок высотой 836px стояло НАД содержимым и не сворачивалось: заголовок «Рабочий стол» оказывался на y≈1216 при экране 844. Старая кнопка-переключатель от страниц помощи в кабинете не работала, а выглядела не по брендбуку (Open Sans, текст прилип к верху, стрелка за рамкой, оранжевая заливка при нажатии). Новая кнопка — js/mobile-lk-menu.js, настоящий