/* ========================================================================== Serikov Coffee 2026 — ТЕЛЕФОН, ПОВЁРНУТЫЙ НАБОК Медиазапрос здесь ОДИН и он уже — только вторая половина телефонного условия: @media (max-width:1023px) and (max-height:520px). Типичные размеры — 844×390, 932×430, 740×360. У планшета в альбоме высота 768 и больше, он сюда не попадает. Весь телефонный слой (mobile/base|entries|footer|header|hero|nav| products|quiz.css) в этих размерах уже работает: там условие расширено второй половиной. Этот файл ничего не вводит с нуля — он приспосабливает готовую вертикальную раскладку к экрану, у которого ширины много (740–1023), а высоты мало (≤520): убирает второй ряд шапки, ужимает нижнюю панель, раскладывает то, что стояло столбиком, в колонки и ограничивает высоту баннера. ПОРЯДОК ЗАГРУЗКИ. header.php подключает все css из mobile ПО АЛФАВИТУ, значит landscape.css идёт после base, entries, footer, header, hero — с ними хватает равной специфичности (при равном весе выигрывает правило, идущее позже). Но ДО nav, products, quiz — там равного веса мало, и каждое такое правило ниже усилено на один простой селектор (`body …`), а не !important. Где усиление есть, рядом стоит вес перебиваемого правила и имя файла. Единицы: --u и --d считаются как clamp(.70px, min(vw, vh), …) и clamp(.68px, …) — при высоте 390–430px оба упираются в свой минимум, ровно как на телефоне в портрете. Значит и здесь всё в явных пикселях. Что НЕ трогаем: фирменную форму со скосом (BRAND-RULES §3.1) — кнопки и поля рисуются подложками cap-… и field-frame-…, их геометрия считается от --btn-h, поэтому меняем только эту переменную, а не padding и background. Скрипта у файла нет и не нужно: mobile/header.js меряет низ .site-head сам (getBoundingClientRect().bottom → --sc-drop-top), высота шапки в нём числом не зашита, — после перехода шапки в один ряд панель каталога встанет по новому низу без единой правки. ========================================================================== */ @media (max-width:1023px) and (max-height:520px){ /* ====================================================================== 1. ШАПКА В ОДИН РЯД 56px ====================================================================== В портрете шапка двухрядная (mobile/header.css): ряд «город + логотип» 56px и ряд «каталог + поиск» 48px, липнет только второй ряд — #site-header{top:-56px}. На высоте 390px две полосы съедают 29 % экрана, а ширины при этом 844px и всё помещается в одну строку: [каталог 48] [логотип] [поиск — вся остальная ширина] [город] Раз ряд остался один, липнет он весь: top:0. ------------------------------------------------------------------- */ /* (1,0,0) — ровно как #site-header{top:-56px} в mobile/header.css; файл идёт по алфавиту позже и выигрывает. */ #site-header{top:0} /* Столбцы: кнопка 48 | логотип по содержимому | поиск на всю свободную ширину | город. minmax(0,1fr) у поиска — чтобы он мог сжаться и не распирал сетку; minmax(0,auto) у города — auto даёт ему ширину названия, а нижняя граница 0 позволяет ужаться, если название длинное (обрезка многоточием уже стоит в mobile/header.css). padding снизу снимаем — 8px запаса были нужны второму ряду. */ .head-inner{grid-template-columns:48px auto minmax(0,1fr) minmax(0,auto); grid-template-rows:56px;padding:0} /* Перестановка по столбцам. В разметке порядок другой (логотип, меню, поиск, инструменты), поэтому место каждому задаём явно; на автоматику полагаться нельзя. Селектор с .head-inner (0,2,0) — против grid-area из mobile/header.css (0,1,0): так перестановка не зависит от того, в каком порядке браузер склеил файлы. */ .head-inner .hd-menu{grid-area:1/1/2/2} .head-inner .hd-logo{grid-area:1/2/2/3;justify-self:center} .head-inner .hd-search{grid-area:1/3/2/4} /* Город прижат к правому краю. Ограничение ширины — чтобы «Усть-Каменогорск» не отъедал ширину у поиска: дальше него строка режется многоточием (.hd-city-wrap b в mobile/header.css). */ .head-inner .hd-tools{grid-area:1/4/2/5;justify-self:end;max-width:200px} /* Всплывашка «Ваш город — …?» висит на .hd-city (position:relative, site.css) и в mobile/header.css привязана к ЛЕВОМУ краю кнопки — там город стоял слева. Здесь кнопка у правой кромки, и 280px от левого края ушли бы за экран (обрежет html{overflow-x:clip} из mobile/base.css) вместе с кнопками «Да, верно» / «Выбрать другой». Разворачиваем к правому краю. Запасное правило site.css работает только до 700px и сюда не достаёт, поэтому перебиваем header.css: (0,2,0) против (0,1,0). */ .head-inner .hd-city-confirm{left:auto;right:0} /* Поиск: высота 48px внутри ряда 56px, поля по 10px с обеих сторон (в портрете отступ был только слева — там поиск шёл от кромки). --btn-h НЕ меняем: от неё border-image считает боковины рамки (field-frame-green.svg), это и есть фирменная форма поля. */ .head-inner .hd-search{margin:0 10px} /* ---- панель каталога ---- Верх панели считает mobile/header.js и кладёт в --sc-drop-top — высота шапки в скрипте числом не зашита, править его не нужно. А вот ЗАПАСНОЕ значение в CSS (на случай, если скрипт не отработал) равно старой высоте шапки 112px — здесь она 56px. Низ панели поднимаем под ужатую нижнюю панель (48px, см. раздел 6). */ .hd-drop{top:var(--sc-drop-top,56px); bottom:calc(48px + env(safe-area-inset-bottom,0px))} /* Панели остаётся 390 − 56 − 48 ≈ 286px высоты. С 17.09.2026 в ней выпадающие списки (site-hf.css): открыта одна группа, остальные — строка заголовка, так что двух колонок, как раньше, уже не нужно. Заголовки ужимаем до 44px (нижняя граница тап-цели), чтобы в панель помещались все пять и начало открытой группы. (0,1,0), как .hd-dd-h в site-hf.css и mobile/header.css, — этот файл идёт после них. */ .hd-dd-h{min-height:44px} /* ====================================================================== 2. ЛЕНТА БАННЕРОВ ====================================================================== В портрете слайд 86 % ширины ленты — виден один и край второго, а сама карточка сделана «более квадратной» (4:3, правка заказчика): картинка лежит полосой 21:10 по центру, поля над и под ней закрывает она же, увеличенная и размытая (::before в mobile/hero.css). На 844px при 86 % и 4:3 карточка вышла бы 679 × 509 — экрана 390px не хватит даже на её половину. Здесь ширина слайда 46 % ленты: видно два слайда и край третьего. А «квадратность» на низком экране не нужна и вредна — полосы заливки это чистая потеря высоты. Поэтому карточка становится ровно полосой: ::before выключаем, а карточке и картинке даём одну пропорцию 5:2 — тогда картинка занимает карточку целиком, заливать нечего. Почему 5:2, а не 21:10 самой картинки: 5:2 — расчёт под 40 % высоты экрана. Лента шириной 100vw минус поля страницы 2 × 27,2 = 789,6; 46 % = 363px; 363 / 2,5 = 145px = 37 % от 390. На 932×430 выходит 404 / 2,5 = 162px (38 %), на 740×360 — 315 / 2,5 = 126px (35 %). Кадр от этого почти не страдает: исходник 1900×814 — это 2,33:1, при 2,5:1 object-fit:cover срежет 7 % сверху и снизу, а заголовки на баннерах идут поперёк и остаются целы. max-height — жёсткий потолок на любую другую пару «ширина/высота»: выше 40 % экрана баннер не станет никогда, даже если пропорцию карточки поменяют. Вторая строка с svh — это высота окна БЕЗ адресной строки браузера; браузеры без поддержки единицы её пропустят и останутся на vh. Селекторы повторены один в один из mobile/hero.css — вес равный, файл идёт позже. */ .hero-b .hero-track .hero-slide, .hero-b .hero-track .hero-slide.on{ flex:0 0 46%; aspect-ratio:5 / 2; max-height:40vh; max-height:40svh} /* Размытая заливка полей: полей больше нет, картинка кроет карточку. */ .hero-b .hero-track .hero-slide::before{display:none} /* Картинке — пропорция карточки: ширина у неё 100 %, значит высота совпадёт с высотой карточки и полоса встанет впритык. mobile/hero.css: .hero-b .hero-track .hero-slide img (0,3,0), вес равный, файл идёт позже. */ .hero-b .hero-track .hero-slide img{aspect-ratio:5 / 2} /* Точки-индикатор убраны в mobile/hero.css (display:none) — здесь ничего пересчитывать не нужно. */ /* ====================================================================== 3. ЛЕНТА ПЛИТОК-ВХОДОВ ====================================================================== В портрете плитка 62 % — видна одна и край второй. На 844px это 490px: заголовок в 18px на такой ширине висит в пустоте. 32 % даёт три плитки и край четвёртой — ровно все четыре входа в поле зрения. Селекторы повторены из mobile/entries.css (вес равный, файл позже). */ .entries .entry, .entries .entry.rv, .entries .entry:hover{flex:0 0 32%} /* Снимок в плитке: 150px при высоте экрана 390 — это 38 % экрана под картинку, из-за которой заголовок и список уезжают за нижнюю кромку. 110px хватает: снимки — вырезки с прозрачным фоном и стоят с object-fit:contain, то есть просто рисуются мельче, а не режутся. */ .entries .entry .pic, .entries .entry:hover .pic{height:110px} /* ====================================================================== 4. КАРТОЧКИ ТОВАРА — ДВЕ КОЛОНКИ ====================================================================== В портрете карточка теперь идёт ОДНА в ряд во всю ширину (mobile/products.css) — так решил заказчик. Здесь ширины 740–1023, а высоты 390–430: одна карточка во всю ширину смотрелась бы нелепо, три давали 255px и мелкий текст. Значит две. Ширина ЯЧЕЙКИ при промежутке 16px: главная — поле страницы 40·--d с двух сторон (--d упирается в минимум 0,68 ⇒ 27,2px): 844 → (844 − 54,4 − 16)/2 = 386,8 932 → 430,8 740 → 334,8 каталог, поиск, «похожие» — поле даёт .mac, 16px (site.css:299): 844 → (844 − 32 − 16)/2 = 398 932 → 442 Промежуток 16px — тот же, что телефон в портрете держит между карточками; на широком экране он читается как воздух, а не как щель. ЧТО ЭТО ЗНАЧИТ ДЛЯ РАЗМЕРОВ ВНУТРИ. Единицу --cp пересчитывать руками не нужно: site.css:3232 объявляет .pgrid-cell контейнером, а .pgrid-cell > .pcard берёт --cp как 100cqw/325 — доля ЯЧЕЙКИ, а не экрана, и она вырастет сама. Но вырастет сильно: --cp = 386,8/325 = 1,19 на главной и 442/325 = 1,36 в каталоге на 932. На десктопе карточка рендерится в ~274px, то есть --cp ≈ 0,84 — здесь всё, что site.css считает от --cp, выходит в 1,4–1,6 раза крупнее десктопного. Само по себе это не ломается: фирменная форма со скосом, клякса и контур wavy.js тянутся пропорционально, ширины хватает (рабочая ширина карточки при полях 20·--cp ≈ 24–27px — 333–388px, всё, что ниже, в неё влезает). Но экрана по высоте всего 390–430px, и такой масштаб тратит её впустую. Поэтому размеры, которые съедают высоту или явно выпирают, ниже приколочены к ДЕСКТОПНОМУ масштабу явными пикселями: фото, название, описание и букет, шкалы, оценка CVA, плашка, кегль кнопок фасовки. mobile/products.css грузится ПОСЛЕ этого файла (p > l) и переписан под карточку ~321px (телефон в портрете, одна колонка). Его пиксели нашей карточке 387–442px в целом впору (разница 1,2–1,4×), поэтому перебиваем не всё подряд, а только названное. Каждому правилу добавлен `body` — вес +(0,0,1), этого хватает и против site.css, и против products.css; вес перебиваемого правила указан рядом. ------------------------------------------------------------------- */ /* Главная. Перебивает .pgrid (0,1,0) из mobile/products.css (одна колонка) и .pgrid{grid-template-columns:1fr 1fr} из site.css:518 (@media 620–1039px — в альбомный телефон он тоже попадает). gap задаём здесь же: в site.css:516 он 20px, в products.css свой. */ body .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} /* Каталог, поиск, «похожие». Контейнер списка живёт на сервере, поэтому он опознаётся по факту «две ячейки .pgrid-cell стоят рядом». Вес перебиваемого правила в products.css: main (0,0,1) + .page-wrapper (0,1,0) + :has(> .pgrid-cell + .pgrid-cell) — у :has вес самого «тяжёлого» аргумента, а это цепочка из двух классов, (0,2,0). Итого (0,3,1), с `body` — (0,3,2). display:grid повторяем за products.css намеренно: там он стоит ради одной колонки, и если формулировку правила изменят, сетка всё равно останется сеткой, а grid-template-columns не окажется без дела. */ body main.page-wrapper *:has(> .pgrid-cell + .pgrid-cell){ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} /* Два правила, без которых две колонки дают горизонтальную прокрутку и кривую ширину. Оба есть в products.css, но там они нужны и одной колонке, и переписывание могло их задеть — держим свою копию, при совпадении она безвредна. .row у Битрикса несёт отрицательные поля (−12px с каждой стороны): сетка стала бы на 24px шире колонки. Вес — как выше, (0,3,2). */ body main.page-wrapper .row:has(> .pgrid-cell + .pgrid-cell){ margin-left:0;margin-right:0} /* Сама ячейка в разделах каталога — колонка темы с жёлобом по 12px. Промежуток между карточками целиком даёт gap сетки, иначе между колонками получается 16 + 24 = 40px. Вес: main + .page-wrapper + :has (0,2,0) + .pgrid-cell = (0,4,1), с `body` — (0,4,2). */ body main.page-wrapper *:has(> .pgrid-cell + .pgrid-cell) > .pgrid-cell{ padding-left:0;padding-right:0} /* Запасное значение --cp для браузеров без container queries (iOS < 16). В mobile/products.css оно посчитано под ОДНУ колонку и дало бы карточке размеры вдвое больше её ячейки, то есть горизонтальную прокрутку. Формула та же, только под две: 70,4 = 54,4 (поля страницы 40·--d с двух сторон) + 16 (промежуток), 650 = 325 · 2 колонки. Считаем по главной — там поле страницы шире, значит значение меньше: в каталоге карточка окажется чуть просторнее расчёта, и это безопасная сторона ошибки. Правило заперто в @supports not, чтобы НЕ спорить с .pgrid-cell > .pcard{--cp:100cqw/325} (site.css, вес (0,2,0)): там, где container queries есть, работать должно именно оно. */ @supports not (container-type:inline-size){ body .pcard{--cp:calc((100vw - 70.4px) / 650)} } /* Фото. site.css: 285·--cp × 258·--cp — при --cp 1,19–1,36 это 339–388 в ширину (шире рабочей ширины карточки, то есть вылет за её край) и 307–351 в высоту, весь экран под одну картинку. Даже десктопная доля (258·0,84 ≈ 217px) съела бы 56% экрана высотой 390. Ширину отдаём потоку, высоту фиксируем 170px: это 44% экрана 390 и 40% экрана 430, и при этом в 1,13 раза больше прежних 150px при трёх колонках, хотя карточка стала в полтора раза шире. Снимки стоят с object-fit:contain (site.css) — они просто рисуются мельче, не режутся. Фиксированная высота держит карточки в ряду одной длины. Перебивает .pcard .pimg (0,2,0) и в site.css, и в products.css. */ body .pcard .pimg{width:100%;height:170px;margin:0 auto 12px} /* Название. 21·--cp = 25–29px — на трёх строках это 90px высоты. 19px: чуть крупнее десктопного (21·0,84 ≈ 17,7) под более широкую карточку. Перебивает .pcard h3 (0,1,1) в site.css и в products.css. */ body .pcard h3{font-size:19px;line-height:1.1} /* Описание и букет — один и тот же мелкий текст макета (кегль 14). 14·--cp = 17–19px против десктопных 11,8. 14px — читаемо, выше нижней границы 13px из правил, и две строки занимают 36px вместо 49. Букет обязан идти в этой же паре: он теперь виден ВСЕГДА (оборот карточки стоит в потоке, products.css: .pcard .pflip.has-flip .pflip-back{position:static}), и в site.css:3346 у него тот же кегль 14·--cp. Приколотить одно описание — значит получить в одной карточке два размера одного и того же мелкого текста: 14 и 17–19. Перебивает .pcard .pdesc и .pcard .pbouquet (обе (0,2,0) и в site.css, и в products.css:154-156) — здесь (0,3,1). .price-old (третий с кеглем 14 в той же группе products.css) оставляем на --cp намеренно. Он живёт не рядом с описанием, а в строке цены, которую мы целиком не трогаем (см. ниже про .pbuy): .pprice остаётся 24·--cp, и старая цена должна быть соразмерна ей, а не описанию. Плюс перечёркивание — картинка шириной calc(63 · --cp) (site.css:3409), приколотить один кегль без ширины диагонали нельзя: она стала бы длиннее самого числа. */ body .pcard .pdesc, body .pcard .pbouquet{font-size:14px} /* Шкалы вкуса — в строку, как на десктопе. Подпись над кружками в products.css осталась с той поры, когда карточка была 154px; на полной ширине она уже не обязательна, но останется она там или нет — здесь ширины хватает в любом случае: при кегле 15px подпись «Кислотность» 6,615 em = 99px, кружки 6·11 + 5·3 = 81px, с промежутком 10 — 190px при рабочей ширине 333–388px. Строкой блок шкал заметно ниже: 3·17 + 2·11 ≈ 73px против ~100–110px столбиком (там к каждой шкале добавляется строка подписи) — на экране высотой 390px эти 30–40px видны. margin-left:auto возвращает кружки к правому краю, как на десктопе; в products.css он снят, потому что там подпись сверху. Кегль 17·--cp = 20–23px и кружки 11·--cp = 13–15px из site.css для карточки такой ширины крупноваты — ставим десктопные 15px и 11px. Вес: .pcard .sc (0,2,0) → (0,2,1); .pcard .sc .bars (0,3,0) → (0,3,1); .pcard .sc i (0,2,1) → (0,2,2). */ body .pcard .sc{flex-direction:row;align-items:center;gap:10px; font-size:15px} body .pcard .sc .bars{margin-left:auto;gap:3px} body .pcard .sc i{width:11px;height:11px;border-width:2px} /* Оценка CVA — блок ПРЯМО ПОД шкалами, и на телефоне он виден всегда: products.css уводит оборот карточки из наложения в поток (.pcard .pflip.has-flip .pflip-back{position:static;opacity:1}), а её медиазапрос — тот же «(max-width:767px), (max-width:1023px) and (max-height:520px)», то есть и наша половина тоже. Прятать его нельзя (packs.js ставит .is-flipped по касанию), значит его надо приколотить наравне со шкалами — иначе он остаётся на --cp и оказывается КРУПНЕЕ строки, стоящей над ним: подпись 17·--cp = 20–23px против 15px у шкалы, клякса 45·--cp = 54–62px высотой. На экране 390px этот блок съедает ~118px в разделе, весь смысл которого — экономия высоты. Ставим десктопный масштаб: подпись 15px (как у шкал), клякса 40px при кегле 17px — вместе с промежутком 12·--cp это ~70px. Форма кляксы не страдает: она рисуется фоном url(img/cva-blob.svg) center/100% 100% (site.css:3337) и тянется под любой размер; min-width 100px оставляет запас под «88,5». Вес: .pcard .pcva span (0,2,1) и .pcard .pcva b (0,2,1) в site.css (3328, 3333), в mobile/*.css правил на .pcva нет — здесь (0,3,1). */ body .pcard .pcva span{font-size:15px} body .pcard .pcva b{height:40px;min-width:100px;font-size:17px} /* Плашка «ХИТ»/«НОВИНКА». 40·--cp = 48–54px высоты при кегле 20–23 — она забирает верх карточки на себя. Ставим десктопные 34px и 15px. Фирменную форму это не ломает: --cap считается ОТ --tag-h (site.css: --cap:calc(var(--tag-h) * 0.56265)), а фон — от --cap, то есть скос пересчитается сам, что бы ни осталось в products.css. Вес: .ptag (0,1,0) в site.css, .pcard .ptag (0,2,0) в products.css — здесь (0,2,1). */ body .pcard .ptag{--tag-h:34px;font-size:15px} /* И вынос плашки за угол. В site.css это −11·--cp вверх и −13·--cp влево, то есть при --cp 1,36 свисание 18px — а поле страницы в каталоге всего 16px (.mac). Прокрутки не будет (main.page-wrapper несёт overflow-x:clip, site.css:3923), но плашку срезало бы по кромке. 10 и 8px укладываются в поле с запасом и подходят плашке 34px. Вес: .pcard .ptags (0,2,0) в обоих файлах — здесь (0,2,1). */ body .pcard .ptags{top:-10px;left:-8px;gap:6px} /* Кнопки фасовки: приколачиваем ТОЛЬКО кегль, высоту оставляем на --cp. Переменной --pw-h, через которую высота задавалась раньше, больше нет ни в site.css, ни в переписанном products.css — высоту держит site.css:3370 .pw button{--cap:calc(22.506·--cp);height:calc(40·--cp)}, это 41px (740×360) … 54px (932×430). Крупновато против десктопных 33px, но терпимо, и трогать одну height нельзя: форму со скосом рисуют три величины, и только одна из них идёт от --cap (вырез заливки calc(100% − 2·--cap + 2px)). Ширину колпачков задаёт background-size:auto 100%, то есть сама height, а длины линий контура — calc(100% − 34,42·--cp), напрямую от --cp. Приколотив height, пришлось бы пересчитывать и --cap, и обе background-size, иначе линии не сойдутся с дугами колпачков и кнопка выглядит разорванной (site.css:3370-3395, BRAND-RULES §3.1). Пусть вся тройка остаётся пропорциональной друг другу. Тап-цель при этом обеспечена и без нас: products.css:215 даёт кнопке прозрачную область ::after height:max(44px,100%). Кегль же приколачиваем: 17·--cp = 20–23px на кнопке — это заметно крупнее шкал (15px) в той же карточке, и три фасовки перестают вставать в строку. При 15px «250 г» — 45px текста плюс поля 2·--cap (23–31px): кнопка 91–107px, три штуки с промежутками 8·--cp — 291–340px при рабочей ширине 294–388px, помещаются (а если нет, products.css:206 разрешает перенос). Вес: .pcard .pw button (0,2,0) в products.css, .pw button (0,1,1) в site.css — здесь (0,2,1). */ body .pcard .pw button{font-size:15px} /* Цену и кнопки покупки (.pbuy) НЕ трогаем намеренно. В products.css это перестроенная сетка, где .pact-cart из круглой кляксы становится широкой кнопкой со скосом (width:auto). Любое наше правило по .pact с большим весом (например, вернуть кружок 44×44) попало бы и на неё — фирменная кнопка сплющилась бы в квадрат. Проверка на «а если products.css это правило потеряет»: тогда работает site.css — строка «цена + две кляксы», 24·--cp ≈ 29–33px цена и 53·--cp × 52·--cp ≈ 63×70px кнопки, вместе ~270px при рабочей ширине 333px. Не ломается, прокрутки не даёт, тап-цели 63px больше 44. */ /* Шапка секции «Хиты обжарки». В портрете заголовок и кнопка стоят столбиком, кнопка — во всю ширину: на 320px они в строку не влезали. На 844px кнопка во всю ширину читается как ошибка вёрстки — возвращаем строку. Перебивает .hits-head и .hits-all (обе (0,1,0)). */ body .hits-head{flex-direction:row;align-items:flex-end; justify-content:space-between} body .hits-all{width:auto} /* ====================================================================== 5. КВИЗ — ВАРИАНТЫ В ДВЕ КОЛОНКИ ====================================================================== В mobile/quiz.css варианты идут столбиком: карточка 72px, четыре варианта — 336px, весь экран. В две колонки это две строки. display НЕ трогаем: .qcards уже display:grid (site.css:574), а у .qcards[hidden] стоит display:none — правило с большей специфичностью сломало бы скрытие блока между шагами. grid-template-columns не задаёт ни site.css, ни mobile/quiz.css, поэтому спорить не с чем и вес (0,1,0) достаточен. */ .qcards{grid-template-columns:repeat(2,minmax(0,1fr))} /* Карточка ответа при ширине ~390px (половина колонки квиза): иконка 44 + текст + стрелка 40 помещаются, но 72px высоты на две карточки в ряд — это 156px из 390. Ужимаем до 64px: текст в две строки (17px заголовок + 13px описание) занимает 40px, поля 12·2. mobile/quiz.css грузится позже (q > l) и там .qc (0,1,0) — добираем вес до (0,1,1). */ body .qc{min-height:64px} /* ====================================================================== 6. НИЖНЯЯ ПАНЕЛЬ 48px ====================================================================== 60px из mobile/nav.css — это 15 % экрана высотой 390. Ужимаем до 48: тап-цель 48 × (844/5 = 168) по-прежнему больше 44px по обеим осям. Внутри: значок 20px + зазор 2 + подпись 10px·1,1 ≈ 33px — влезает. mobile/nav.css грузится ПОСЛЕ этого файла (n > l), поэтому всем правилам добавлен `body` (+(0,0,1)); вес перебиваемого правила указан в скобках. ------------------------------------------------------------------- */ /* .mnav (0,1,0) */ body .mnav{height:calc(48px + env(safe-area-inset-bottom,0px))} /* .mnav-i (0,1,0) и .mnav .hd-ico (0,2,0). font-size здесь наследуют подписи-псевдоэлементы и .mnav-t. */ body .mnav-i, body .mnav .hd-ico{min-height:48px;gap:2px;font-size:10px} /* .mnav .hd-ico span:not(.cnt) (0,3,1) — своя font-size, наследование от родителя её не достаёт. */ body .mnav .hd-ico span:not(.cnt){font-size:10px} /* Значки: .mnav .mnav-ico (0,2,0), .is-burger (0,3,0), .mnav .hd-ico svg (0,2,1), .mnav .hd-acc svg (0,2,1). Пропорции каждого сохранены — бургер 18:13, кабинет 40:47. */ body .mnav .mnav-ico{width:22px;height:20px} body .mnav .mnav-ico.is-burger{width:22px;height:16px} body .mnav .hd-ico svg{width:20px;height:20px} body .mnav .hd-acc svg{width:17px;height:20px} /* Кружок счётчика был привязан к верху ячейки 60px. .mnav .hd-ico .cnt (0,3,0). */ body .mnav .hd-ico .cnt{top:3px} /* ---- всё, что считалось от высоты панели ---- Ниже — те же формулы, что в mobile/nav.css и mobile/base.css, только от 48 вместо 60. Чужие файлы не правим. Место под панель. body (0,0,1) в mobile/nav.css — берём (0,0,2). */ html body{padding-bottom:calc(48px + env(safe-area-inset-bottom,0px))} /* Кнопка WhatsApp над панелью: 48 + 12 зазора. .fab/.fab-wa (0,1,0). */ body .fab, body .fab-wa{bottom:calc(60px + env(safe-area-inset-bottom,0px))} /* Плашка кук над кнопкой WhatsApp: 60 (низ кнопки) + 52 (её высота: поля 15+15 и значок 22) + 8 зазора = 120. .cookie (0,1,0). */ body .cookie{bottom:calc(120px + env(safe-area-inset-bottom,0px))} /* Кнопка «Фильтр» в разделах каталога. В mobile/base.css это .btn.fixed-bottom (0,2,0); base.css грузится раньше, вес равный — побеждает это правило. */ .btn.fixed-bottom{bottom:calc(48px + env(safe-area-inset-bottom,0px))} /* ====================================================================== 7. ПОДВАЛ ====================================================================== Аккордеон остаётся как есть. Единственная перестановка: телефоны и знаки оплаты — в одну строку, двумя колонками; в столбик они занимали два ряда по ~100px, а ширины 844 хватает на обе группы. .ft-in из flex-column делаем сеткой в две колонки, и КАЖДОМУ ребёнку сразу отдаём всю строку (grid-column:1/-1) — исключение только у телефонов и оплаты. Детей у .ft-in ровно девять и все известны (логотип, три .ft-acc, три .ft-col, .ft-tel, .ft-pay), так что «звёздочка» ничего лишнего не накроет. Порядок по-прежнему задаёт order из mobile/footer.css: автоматическое размещение сетки расставляет элементы в порядке order, поэтому .ft-tel и .ft-pay (order 7 и 8) оказываются соседями и встают в одну строку. .site-foot .ft-in — (0,2,0) и в mobile/footer.css; тот файл идёт раньше по алфавиту (f < l), при равном весе побеждает это правило. flex-direction и align-items из него остаются, но для сетки они недействительны и вреда не делают. */ .site-foot .ft-in{display:grid;grid-template-columns:1fr 1fr; align-content:start} .site-foot .ft-in > *{grid-column:1 / -1} .site-foot .ft-in .ft-tel{grid-column:1} /* align-self не задаём: .ft-pay должен растянуться на всю высоту строки, иначе его верхняя граница (а с ней и линия ниже) встала бы на ~34px ниже линии у .ft-tel и вместо одной линии через подвал получились бы две ступеньки. Сами значки остаются по центру своего блока за счёт align-items:center из mobile/footer.css. */ .site-foot .ft-in .ft-pay{grid-column:2; justify-content:flex-end;padding-top:12px} /* Разделительная линия над последней секцией шла только над телефонами и обрывалась на середине подвала — дотягиваем её через вторую колонку. */ .site-foot .ft-in .ft-pay{border-top:1px solid rgba(255,255,255,.2)} /* Реквизиты в две строки занимают 40px; на 844px обе строки помещаются рядом. flex-wrap оставляем — на 740px длинная вторая строка перенесётся сама. */ .site-foot .ft-legal{flex-direction:row;flex-wrap:wrap;gap:4px 20px} /* ====================================================================== 8. МОДАЛКИ: ВЛЕЗАЮТ ЛИ В 390px ПО ВЫСОТЕ ====================================================================== Считано для 844×390 — самой низкой из типичных пар. ------------------------------------------------------------------- */ /* ---- выбор города ---- Было: поля модалки 12px, коробка padding 20/16 и max-height calc(100vh − 24px) = 366px, прокрутка у ВСЕЙ коробки (site.css:2964 overflow:auto). На 390px это значит, что поиск и кнопки крупных городов уезжают вверх вместе со списком, и вернуться к строке поиска можно только прокруткой назад. Делаем коробку колонкой с фиксированной высотой, а прокрутку отдаём одному списку: заголовок, поиск и крупные города остаются на месте. Вес: .sc-city-box в mobile/header.css — (0,1,0), здесь (0,2,0). */ .sc-city-modal{padding:8px} /* Ширину коробки при этом расширяем. По умолчанию она min(560*--u,100%), а --u здесь упёрлась в свой минимум .70px (min(.0576vw,.1005vh) при 844×390 даёт .392) — то есть коробка ровно 392px при экране 844px. В такой узкой коробке четыре колонки списка ниже были бы обманом: под текст осталось бы ~68px и «Петропавловск», «Усть-Каменогорск» вылезли бы за кнопку. Даём min(100%, 760px): на самом узком альбомном экране 740px это 100 % минус поля модалки, на 844+ — 760px. Вес: .sc-city-box в site.css и mobile/header.css — (0,1,0), здесь (0,2,0). */ .sc-city-modal .sc-city-box{display:flex;flex-direction:column; width:min(100%, 760px); padding:14px 16px;max-height:calc(100vh - 16px);overflow:hidden} /* Всё, кроме списка, высоту не отдаёт: иначе flex ужал бы поле поиска и кнопка «Караганда» стала бы ниже 44px. */ .sc-city-modal .sc-city-box > *{flex:none} /* min-height:0 обязателен: у flex-элемента минимальная высота по умолчанию равна содержимому, и без него список не прокручивался бы, а распирал коробку. */ .sc-city-modal .sc-city-box > .sc-city-list{flex:1 1 auto;min-height:0; overflow:auto;-webkit-overflow-scrolling:touch; overscroll-behavior:contain} /* Шапка коробки ужимается: h2 20 → 18, отступы вдвое. Кегли ниже 12px не опускаем. */ .sc-city-box h2{font-size:18px;margin:0 0 4px} .sc-city-note{margin:0 0 10px} /* Поле поиска: высота меньше, форма та же — боковины рамки (border-image, site.css) считаются от --btn-h, поэтому меняем только переменную. 16px кегля оставляем: ниже него iOS приближает страницу при фокусе. */ .sc-city-modal input[type=search]{--btn-h:44px;margin-bottom:10px} .sc-city-major{margin-bottom:10px;padding-bottom:10px} /* Список: коробка расширена выше до 724–760px, внутри неё 692–728px — четыре колонки по 171–180px, под текст остаётся 151–160px при кегле 15px, самое длинное «Усть-Каменогорск» помещается. Вместо двух колонок список стал вдвое короче по вертикали, а её здесь всего 390px. Вес правила в mobile/header.css — (0,2,0), здесь тот же, файл идёт позже. */ .sc-city-modal .sc-city-list{grid-template-columns:repeat(4,minmax(0,1fr))} /* ---- адрес доставки с картой ---- mobile/checkout.css уже развернул окно на весь экран и поставил его сеткой в ОДИН столбец и два ряда: карта minmax(150px,32vh) сверху, форма с прокруткой снизу. При высоте 390px карте достаётся её минимум 150px, форме — 240px: в них помещается полтора поля, а карта размером с почтовую марку не даёт выбрать дом. Ширины при этом 740–1023px и она пустует. Ставим форму и карту рядом, как на десктопе: форма слева фиксированными 320px (на самом узком экране 740px карте остаётся 420), карта справа. Ряд один и он во всю высоту, поэтому обе части получают все 390px. grid-row задаём каждой явно: в mobile/checkout.css у карты стоит grid-row:1, у формы grid-row:2 — без сброса они остались бы друг под другом и во второй колонке. Вес: .sc-addr-box, .sc-addr-map, .sc-addr-form в mobile/checkout.css — (0,1,0); здесь везде (0,2,0). Файл грузится позже (l > c), но на порядок не опираемся: у checkout своя жизнь. */ .sc-addr-modal .sc-addr-box{ grid-template-columns:minmax(0,320px) minmax(0,1fr); grid-template-rows:minmax(0,1fr)} .sc-addr-modal .sc-addr-form{grid-column:1;grid-row:1} .sc-addr-modal .sc-addr-map{grid-column:2;grid-row:1} /* Кнопки «Отмена» и «Доставить сюда» прижаты к низу формы (position:sticky, site.css:4089) и остаются видны — форма прокручивается под ними. */ /* ---- плашка «−15 %» ---- Считаем при --d = 0,68 (упирается в минимум): 36·2 полей + 43,5 число + 15 заголовок + две строки описания + 35 кнопка + 9,5 ссылка ≈ 210px — в 390 влезает. max-height и прокрутка — страховка на 320px высотой и на случай, если текст плашки станет длиннее. .promo15 и .promo15-box — (0,1,0) в site.css, файл идёт позже. */ .promo15{padding:12px} .promo15-box{max-height:calc(100vh - 24px);overflow:auto} }