/* ═══ МОБИЛЬНАЯ ВЕРСИЯ ВИТРИНЫ — ОТДЕЛЬНЫЙ БЛОК (13.09.2026, решение Дена: «делай как у МП, весь мобильный вид — отдельным блоком») ═══════════════════ ПРАВИЛО ЭТОГО ФАЙЛА: ДЕСКТОП НЕ ТРОГАЕМ. shop.css не изменён ни на строку (проверяется `git diff -- shop/static/shop.css` — пусто). Всё мобильное живёт здесь и только внутри @media(max-width:760px). Единственное, что файл делает ВНЕ медиазапроса, — прячет ДВА НОВЫХ элемента (бургер и нижнюю панель покупки), которых на десктопе раньше не существовало вовсе. ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ВТОРОЙ КОМПЛЕКТ ШАБЛОНОВ / m.norkray.ru: два комплекта разметки надо синхронизировать при каждой правке, плюс SEO-дубли. Разметка одна, различается только слой стилей — как у МП. ПОДКЛЮЧЁН В base.html ПОСЛЕ shop.css: при равной специфичности выигрывают правила отсюда, в том числе поверх мобильных блоков shop.css (≤900/≤760/≤560). ПОРОГ 760px — тот же, что уже был у карточки в shop.css. Второго рубежа не заводим: один «телефон / не телефон». */ /* Новых элементов на десктопе нет */ .mnav-btn, .mbar { display: none; } @media (max-width: 760px) { /* ── 1. ГЛАВНОЕ: колонка карточки больше не раздувается ────────────────────── В shop.css на ≤760px стоит `grid-template-columns:1fr`. `1fr` = minmax(auto,1fr), а auto-минимум = min-content самого широкого потомка. ЗАМЕР 13.09 на боевом norkray.ru при экране 390: колонка = 928px. Раздували .vrow (13 миниатюр цветов ×64 + зазоры = 928) и .strip (12 миниатюр ×56 = 760) — прокрутка у них есть, но min-width:auto у grid/flex-элемента её отменяет. Из-за этого за край экрана уезжали надпись на кнопке «Купить» (оставалась чёрная плашка), значения в «Характеристиках», h1, «возможна рассрочка» и всё описание. minmax(0,·) снимает auto-минимум. ЗАМЕР ЭТОГО ФИКСА НА БОЮ (подстановкой в DOM): колонка 342px (=390−2×24 отступа .wrap), горизонтальный вынос 0, высота карточки 4158 → 3908. Итог всего пакета (замер Playwright 390/360/320): 3282, вынос 0. */ .prod3 { grid-template-columns: minmax(0, 1fr); } /* min-width:0 нужен .gal/.pinfo/.pbuy (элементы грида) и .strip (элемент флекса .galwrap); .vrow оставлен намеренно — это его min-content 928px раздувал трек */ .gal, .pinfo, .pbuy, .strip, .vrow { min-width: 0; } /* Та же болезнь у остальных сеток: в shop.css на ≤900px стоит `1fr` / repeat(2,1fr). ЗАМЕР 13.09 на 320px (iPhone SE): блок «сторителлинг» вылезал за экран на 3px — колонка раздувалась до 299px при доступных 272. minmax(0,·) чинит все разом. Ширины колонок при этом ТЕ ЖЕ — меняется только нижняя граница трека. */ .hero .wrap, .story .wrap { grid-template-columns: minmax(0, 1fr); } .usp .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } footer .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .story .num { flex-wrap: wrap; gap: 24px; } /* ── 2. Шапка: логотип + бургер вместо меню столбиком ──────────────────────── ЗАМЕР 13.09 при 390: topbar 84 + header 195 = 279px из 844, то есть треть экрана, причём шапка липкая и висит поверх контента всё время; меню ложилось столбиком справа от логотипа, кнопка темы уезжала за край на 22px (это был единственный горизонтальный вынос, оставшийся после фикса №1 — на всех трёх страницах: карточка, каталог, оформление). Верхняя полоса — только связь (адрес и часы есть в подвале и в плитке «Примерка»). Меню уходит в выпадающую панель: nav.main выводится из потока (position:absolute), поэтому в строке шапки остаются логотип и иконки — им 390px хватает с запасом. */ .topbar .wrap > div:first-child { display: none; } .topbar .wrap { padding-top: 5px; padding-bottom: 5px; } .topbar a { display: inline-block; } header.site .wrap { gap: 10px; justify-content: space-between; padding-top: 9px; padding-bottom: 9px; } /* padding у логотипа бесплатный: рядом кнопка темы уже 44px, высота строки шапки от него не растёт, а тач-цель из 26px становится 44px */ .logo { font-size: 17px; letter-spacing: 2px; padding: 9px 0; } /* знак мельче текста: в строке шапки на 390px рядом кнопка темы и бургер, 40px знака вместе с padding подняли бы шапку — замерено на макете */ .logo { gap: 9px; } .logo .lmark { height: 32px; } .hicons { gap: 8px; } .theme-btn { padding: 9px 12px; min-height: 44px; } .mnav-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 20px; font-size: 17px; line-height: 1; cursor: pointer; } .mnav-btn:hover { border-color: var(--gold); } nav.main { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; background: var(--bg); z-index: 39; border-bottom: 1px solid var(--line); padding: 2px 24px 10px; box-shadow: 0 14px 26px rgba(0, 0, 0, .16); } body.mnav-open nav.main { display: flex; } /* ⚠ без JS панель не раскроется. Все четыре пункта меню продублированы в подвале (Каталог / Доставка и оплата / О магазине / Контакты) — ни одна ссылка не теряется. */ nav.main a { display: block; padding: 13px 2px; font-size: 15px; border-bottom: 1px solid var(--line); } nav.main a:last-child { border-bottom: none; } /* ── 3. Каталог: две колонки, как у МП ─────────────────────────────────────── ЗАМЕР 13.09: 56 карточек в ОДНУ колонку = страница 36 366px (43 экрана), первая карточка на 603px от верха. В shop.css на ≤560px стоит одна колонка — здесь перебиваем на две (файл грузится позже). */ .grid, .grid.cat3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .pcard .body { padding: 10px 11px 13px; } .pcard h3 { font-size: 13.5px; line-height: 1.25; } .pcard .feat { font-size: 11px; margin-bottom: 6px; } .pcard .price { font-size: 15px; } .pcard .sizes { gap: 4px; margin-top: 7px; } .pcard .chip { font-size: 11px; padding: 2px 6px; } .badge { top: 8px; left: 8px; font-size: 10px; padding: 3px 7px; } /* Фильтр размеров — горизонтальная лента в одну строку (у МП так же). ЗАМЕР: 18 чипов занимали 137px в пять рядов. Отрицательные поля — чтобы лента доезжала до края экрана, а не обрывалась на отступе .wrap. */ .filters-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -24px 16px; padding: 2px 24px 8px; } .filters-bar::-webkit-scrollbar { display: none; } .filters-bar .lbl, .fchip { flex: 0 0 auto; } .cathead { margin: 18px 0 14px; } .sec { padding: 30px 0; } /* ── 4. Тач-цели не меньше 44px (сейчас 20–41) ─────────────────────────────── ЗАМЕР 13.09: чипы каталога 28px, чипы размера в карточке 41px, ссылки меню 20px, «Таблица размеров» 20px, поля формы оформления 39px. */ .fchip { min-height: 44px; padding: 0 16px; font-size: 14px; display: inline-flex; align-items: center; } .sizes.big .chip { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; } .linkbtn { min-height: 44px; display: inline-flex; align-items: center; } h5 .linkbtn { margin-left: 12px; } /* Второстепенные ссылки и согласие ПДн: были 14-21px (замер скриншотом 13.09). Подвал — единственная навигация внизу страницы, крошки — единственный путь назад, а чекбокс согласия стоит в денежном пути и был 15px. */ footer a { padding: 8px 0; margin-bottom: 2px; } footer .wrap { padding-top: 30px; padding-bottom: 22px; gap: 22px; } footer .fine a { display: inline-block; padding: 7px 0; } .crumbs a { display: inline-block; padding: 7px 0; } .topbar a { padding: 9px 0; } .ocheck { padding: 4px 0; gap: 12px; font-size: 13px; } .ocheck input { width: 22px; height: 22px; margin-top: 0; } /* ── 5. Формы: 16px против автозума iOS ────────────────────────────────────── ЗАМЕР 13.09 на /oformlenie/: у полей font-size 13.3px — это браузерный дефолт, в CSS размер не задан вовсе. Safari на iPhone при фокусе на поле меньше 16px ЗУМИТ страницу, и покупатель дальше возит её пальцем. Это денежный путь. */ input, select, textarea { font-size: 16px; } .ofield input, .ofield select { min-height: 44px; } .ckgrid { gap: 18px; } /* ── 6. Галерея: как у МП — свайп и счётчик, без стрелок ───────────────────── Свайп >40px уже работает (nrGalStep в shop.js), стрелки на телефоне только закрывают фото. Вернуть = убрать эту строку. */ .galnav { display: none; } .strip { gap: 6px; } .modelnote { margin-top: 8px; } .pinfo h1 { font-size: 24px; } .bigprice { font-size: 30px; } /* ⛔ ЗАМЕР НА БОЮ 13.09 ~21:3x: у .pbuy на телефоне оставались max-height calc(100vh - 99px) = 745px и overflow-y:auto от ДЕСКТОПНОГО правила — мобильный блок shop.css снимает только position:sticky. Факт: clientHeight 744 при scrollHeight 888, то есть ВНУТРИ карточки покупки была своя прокрутка: палец листал её, а не страницу, и нижняя часть (плитки доверия, «Честный знак») доставалась вторым скроллом в рамке. Побочно это ломало и нижнюю панель: #buy-btn лежал в обрезанном скролл-контейнере, и IntersectionObserver считал его видимым. Липкость на телефоне не нужна вовсе. */ .pbuy { max-height: none; overflow: visible; } .trust { grid-template-columns: 1fr; margin: 20px 0 0; } .buyrow .btn { min-width: 0; } .descr { font-size: 15px; } /* ── 7. Нижняя панель «цена + Купить» (у МП так же) ────────────────────────── ЗАМЕР 13.09: блок покупки начинался на 1683px от верха — две прокрутки до цены. Панель показывается, когда настоящая кнопка «Купить» ушла с экрана (класс висит на body, ставит nrMBar в shop.js); нет IntersectionObserver — панель просто видна всегда, это фолбэк, а не отказ. */ .mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; align-items: center; gap: 12px; background: var(--card); border-top: 1px solid var(--line); padding: 9px 16px; padding-bottom: calc(9px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 22px rgba(0, 0, 0, .14); transform: translateY(110%); transition: transform .18s; } body.mbar-on .mbar { transform: translateY(0); } .mbar-price { font-size: 19px; font-weight: 600; color: var(--price); white-space: nowrap; font-family: Georgia, serif; } .mbar .btn { flex: 1; text-align: center; padding: 14px 0; min-height: 48px; } body.has-mbar { padding-bottom: 76px; } }