/* ========================================================================== Serikov Coffee 2026 — НИЖНЯЯ ПАНЕЛЬ НАВИГАЦИИ на телефоне (≤767px) Разметка — mobile/nav.php (подключается из footer.php). Пять мест: «Главная» и «Каталог» лежат в разметке, а «Кабинет», «Избранное» и «Корзина» приезжают из шапки — их переносит mobile/nav.js. Перенесённые узлы сохраняют свои классы (.hd-ico, .hd-acc, .hd-right, .cnt), поэтому половина файла — перебивка десктопных правил из site-hf.css/site.css в границах панели: селектором с .mnav, а не !important. Размеры в px: на 375px масштабные единицы --u/--d упираются в минимум ≈0,7px, и всё, что на них считано, выходит нечитаемо мелким. Высота панели 60px + «чёлка» снизу. То же число стоит в mobile/header.css у .hd-drop (bottom:60px + safe-area) — панель каталога заканчивается ровно там, где начинается эта панель. Меняете высоту — меняйте в обоих файлах. ========================================================================== */ /* десктоп: спрятать — панель существует в разметке всегда, чтобы не ждать JS на телефоне; вне телефона её не должно быть ни в потоке, ни на экране. */ .mnav{display:none} /* Телефонный слой: узкий экран ИЛИ телефон, повёрнутый набок (ширина до планшетной, высота меньше 520px — у планшета в альбоме высота 768 и больше, он сюда не попадает). Условие одно и то же во всех файлах mobile/ и в их скриптах — менять только всё сразу. */ @media (max-width:767px), (max-width:1023px) and (max-height:520px){ /* ---- сама панель ---- grid-auto-flow:column вместо repeat(5,1fr): на страницах, где шапка не отдала «Кабинет» или корзину (оформление заказа), колонок должно стать столько, сколько пунктов реально приехало, иначе справа осталась бы пустая дырка. z-index:110 — а не 900. Разбор всех фиксированных слоёв шаблона: контент 0–8, #site-header 100, .fab и .hd-drop 120, .sc-added 120, .sc-addr-modal 130, .cookie 250, .pmodal 300, .promo15 400, .widgetScreen (подложка виджета банка) 500!important, .sc-city-modal 1000, .epay-alt 2000. При 900 панель оказалась бы ПОВЕРХ четырёх полноэкранных модалок и подложки банка — их пришлось бы поднимать в чужих файлах. На 110 панель выше всего содержимого страницы и шапки, а каждая модалка по-прежнему её накрывает. С теми слоями, что не модалки (.fab, .cookie, .hd-drop), панель не пересекается геометрически — они подняты/обрезаны ниже. */ .mnav{position:fixed;left:0;right:0;bottom:0;z-index:110; display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr); height:calc(60px + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px); background:#fff;border-top:1px solid var(--line,#e6e6e6); font-family:var(--font)} /* Слот — не колонка, а «прозрачная» обёртка: колонками становятся сами перенесённые узлы. */ .mnav-slot{display:contents} /* Корзина приходит из компонента в трёх обёртках (#basket-icon > .bx-basket > #header-basket-sc-containter). Их тоже растворяем, иначе «Избранное» и «Корзина» встали бы в одну колонку. Ограничение div/span — чтобы правило случайно не съело сами ссылки (они ), если компонент когда-нибудь поменяет обёртки. */ .mnav .hd-right, .mnav .hd-right > div, .mnav .hd-right > span, .mnav .hd-right-in{display:contents} /* ---- пункт панели ---- Одинаково для своих (.mnav-i) и для перенесённых (.hd-ico): значок сверху, подпись снизу, вся ячейка — тап-цель. Ячейка на 320px — 64px в ширину и 60px в высоту, это ≥44px. .mnav .hd-ico (0,2,0) перебивает .hd-ico из site-hf.css (0,1,0): там flex-column с gap на --u и кегль calc(17 * var(--u)). */ .mnav-i, .mnav .hd-ico{position:relative;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:4px; min-width:0;min-height:60px;height:100%;padding:0 2px; border:0;background:none;cursor:pointer;text-align:center; font-family:var(--font);font-weight:500;font-size:11px;line-height:1.1; color:var(--green-brand);text-decoration:none; -webkit-tap-highlight-color:transparent} /* В шапке корзина бордовая (.hd-ico.cart, site-hf.css). В ряду из пяти значков один бордовый читается как ошибка или как «внимание», хотя ничего не случилось, — внутри панели равняем на брендовый зелёный. Только внутри .mnav: в шапке на десктопе всё остаётся как было. */ .mnav .hd-ico.cart{color:var(--green-brand)} /* site-hf.css:123 при ≤1100px прячет подписи у значков шапки (.hd-ico span:not(.cnt){display:none}) — в шапке они и не нужны. В панели подпись обязательна, возвращаем: (0,3,1) против (0,2,1). Длинное «Избранное» на 320px режем многоточием, а не переносим: вторая строка сломала бы высоту ряда. */ .mnav .hd-ico span:not(.cnt){display:block;max-width:100%; font-size:11px;font-weight:500;line-height:1.1; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mnav-t{display:block;max-width:100%; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---- значки ---- Свои значки — с viewBox, размер задаём здесь. У бургера пропорция 18:13, поэтому высота меньше: иначе он был бы вдвое шире соседей. */ .mnav .mnav-ico{flex:none;width:24px;height:22px} .mnav .mnav-ico.is-burger{width:24px;height:17px} /* Перенесённые значки нарисованы в viewBox 24×24 (сердце и корзина) и 40×47 (кабинет) — второму даём его пропорцию, иначе рисунок «плавал» бы внутри квадратной рамки. */ .mnav .hd-ico svg{flex:none;width:22px;height:22px} .mnav .hd-acc svg{width:19px;height:22px} /* ---- счётчик ---- В шапке это просто цифра сбоку от значка (site-hf.css: absolute, top/left на --u, кегль calc(15 * var(--u)) ≈ 10px, цвет бордовый или зелёный). В панели цифра без подложки терялась бы среди подписей — собираем кружок. Бордовый #8b2628 взят из существующего правила .hd-ico.cart, белая цифра на нём читается. border-radius здесь не спорит с §3.1 правил бренда: фирменную форму со скосом получают кнопки и поля ввода, а это метка-счётчик. Специфичность (0,3,0) — вровень с .hd-ico:not(.cart) .cnt, файл грузится позже и выигрывает. */ .mnav .hd-ico .cnt{position:absolute;top:7px;left:calc(50% + 4px);right:auto;bottom:auto; display:flex;align-items:center;justify-content:center; min-width:16px;height:16px;padding:0 4px; font-family:var(--font);font-weight:900;font-size:10px;line-height:1; color:#fff;background:#8b2628;border-radius:999px} /* ---- активный пункт ---- Класс ставит mobile/nav.js: «Главная» — по адресу, «Каталог» — по aria-expanded у .hd-cat. Полоска сверху нужна помимо цвета: разница между --green-brand и --green на 22px значке почти не видна. */ .mnav-i.is-active{color:var(--green);font-weight:700} .mnav-i.is-active::before{content:'';position:absolute;left:0;right:0;top:0; height:2px;background:var(--green)} /* Фокус с клавиатуры (телефон с внешней клавиатурой, screen reader): свечение по значку и подписи, без прямоугольной обводки (правило «без обводки», BRAND-RULES §3.2). Кромка панели свечению не мешает — оно ложится на сам рисунок, а не снаружи коробки. */ .mnav-i:focus-visible, .mnav .hd-ico:focus-visible{outline:none;filter:drop-shadow(0 0 3px var(--green-brand))} /* Наведение у .hd-ico в site-hf.css гасит непрозрачность — на тапе это читается как «нажалось», оставляем и своим пунктам. */ .mnav-i:active, .mnav .hd-ico:active{opacity:.72} /* ---- место под панель ---- Панель фиксированная и накрыла бы конец подвала. Селектор body (0,0,1) сильнее сброса *{padding:0} из site.css:61. */ body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))} /* Кнопка WhatsApp стоит bottom:16px (site.css:267, site-hf.css:172) — ровно под панелью. Поднимаем над ней. .fab-wa из home.css в текущей разметке не используется (в footer.php .fab), но правило то же — на случай, если старую кнопку где-то вернут. */ .fab, .fab-wa{bottom:calc(72px + env(safe-area-inset-bottom,0px))} /* Плашка про куки: в site.css при ≤520px поднята на 76px под старую кнопку WhatsApp, а на 521–767px висит на calc(20 * var(--d)) ≈ 14px — обе высоты панель накрывает. Ставим НАД кнопкой WhatsApp, а не вровень с ней: при ≤520px site.css:4003 растягивает плашку от left:12 до right:12, и на общей высоте 72px кнопка села бы ей на правый нижний угол. 132px = 72 (верх кнопки) + 52 (её высота: padding 15+15 и значок 22px, подпись при ≤560px скрыта) + 8 зазора. */ .cookie{bottom:calc(132px + env(safe-area-inset-bottom,0px))} /* ---- пустой счётчик корзины ---- Шаблон значков рисует .cnt корзины безусловно (в отличие от «Избранного»), и на пустой корзине приходит «0». В шапке это была мелкая цифра сбоку, а здесь — залитый бордовый кружок, читается как непрочитанное уведомление. Скрывает его mobile/nav.js (селектора по тексту узла в CSS нет), а это правило нужно, чтобы у него получилось: [hidden] из стилей браузера не перебивает display:flex, заданный выше в (0,3,0). Здесь (0,4,0). */ .mnav .hd-ico .cnt[hidden]{display:none} }