/* ============================================================================ ЧистоШава — App-оболочка PWA · pwa-shell.css · волна 1.5 (25.07.2026) ---------------------------------------------------------------------------- Активируется ТОЛЬКО при классе .cs-app на (ставит инлайн-скрипт в каждой клиентской страницы ДО первой отрисовки + pwa-shell.js). В обычном браузере ни одно правило ниже не применяется — сайт не меняется. Подключать ПОСЛЕ theme20.css. Состав: компактная шапка 52px, нижний таб-бар 56px, скрытие сайтового хрома (логотип/навигация/крошки/футер), safe-area, разводка фиксов на «/». ============================================================================ */ html.cs-app{ --cs-app-top: 52px; /* высота шапки экрана (без safe-area) */ --cs-app-tab: 56px; /* высота таб-бара (без safe-area) */ --cs-app-sat: env(safe-area-inset-top, 0px); /* Подушка под таб-баром = safe-area, но НЕ меньше 12px (Илья 25.07, скрин iPhone: «на айфоне неудобно, прям низко» — подписи упирались в нижний край: от края экрана до низа подписей было 10px на 390×844). Пол в 12px поднимает контент таб-бара и все привязанные к низу плашки; на устройствах с home-индикатором env(...)=34px и поведение не меняется. */ --cs-app-sab: env(safe-area-inset-bottom, 0px); /* фолбэк для движков без max() */ --cs-app-sab: max(env(safe-area-inset-bottom, 0px), 12px); } /* ── 1. Прячем сайтовый хром ──────────────────────────────────────────────── */ html.cs-app body > header:not(.cs-app-top), html.cs-app header.cs-topbar20, html.cs-app body > footer, html.cs-app #csHamburgerBtn, html.cs-app #csMobileDrawer, html.cs-app #csMobileMenu, html.cs-app #csPwaBanner, html.cs-app .cs-app-hide{ display: none !important; } /* ── 2. Шапка экрана ──────────────────────────────────────────────────────── */ html.cs-app .cs-app-top{ position: sticky; top: 0; z-index: 50; background: var(--cs-cream, #F4ECDD); border-bottom: 1px solid var(--cs-line, #DFCFAF); padding-top: var(--cs-app-sat); } html.cs-app .cs-app-top__in{ height: var(--cs-app-top); display: flex; align-items: center; gap: 8px; max-width: var(--cs-wrap, 1200px); margin-inline: auto; padding-inline: 12px; } html.cs-app .cs-app-back{ width: 44px; height: 44px; margin-left: -10px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; padding: 0; cursor: pointer; color: var(--cs-ink, #17161A); border-radius: 12px; transition: background 180ms ease-out; } html.cs-app .cs-app-back:active{ background: rgba(23,22,26,.06); } html.cs-app .cs-app-back[hidden]{ display: none; } html.cs-app .cs-app-title{ font-family: 'Montserrat','Gilroy','Manrope',system-ui,sans-serif; font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--cs-ink, #17161A); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; } html.cs-app .cs-app-tools{ display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; } /* Селектор точки внутри app-шапки — компактная пилюля 32px */ html.cs-app .cs-app-tools #pointSelectorWrap{ flex: 0 1 auto; min-width: 0; } html.cs-app .cs-app-tools #pointSelectorBtn{ height: 32px; padding: 0 10px; max-width: 150px; background: var(--cs-cream-card, #FBF6EC) !important; color: var(--cs-ink, #17161A) !important; border: 1px solid var(--cs-line, #DFCFAF) !important; box-shadow: none !important; } html.cs-app .cs-app-tools #pointSelectorBtn #pointSelectorCity{ display: none !important; } html.cs-app .cs-app-tools #pointSelectorBtn #pointSelectorLabel{ color: var(--cs-ink, #17161A) !important; } html.cs-app .cs-app-tools #pointSelectorBtn svg{ color: var(--cs-orange, #F05A22) !important; opacity: 1 !important; } html.cs-app .cs-app-tools #pointSelectorPopup{ left: auto; right: 0; width: min(320px, calc(100vw - 24px)); } /* Корзина в app-шапке — иконка 40×40 с бейджем */ html.cs-app .cs-app-tools #openCartBtn{ width: 40px; height: 40px; padding: 0; gap: 0; border-radius: 999px; justify-content: center; background: var(--cs-orange, #F05A22) !important; color: #fff !important; box-shadow: none !important; position: relative; } html.cs-app .cs-app-tools #openCartBtn > span:not(#cartBadge):not(#headerCartBadge){ display: none !important; } html.cs-app .cs-app-tools #openCartBtn svg{ width: 20px; height: 20px; } html.cs-app .cs-app-tools #openCartBtn #cartBadge{ position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; line-height: 18px; background: var(--cs-ink, #17161A) !important; color: #fff !important; border: 2px solid var(--cs-cream, #F4ECDD); } /* ── 3. Нижний таб-бар ────────────────────────────────────────────────────── */ /* +8px запаса: без него низ последнего блока ложился ровно на верх таб-бара (замер QA волна 2 на 360×800: низ #pfMore 732.3px при верхе таб-бара 731px — формальный нахлёст 1.3px, а при sab=0 запаса не остаётся совсем). */ html.cs-app body{ padding-bottom: calc(var(--cs-app-tab) + var(--cs-app-sab) + 8px) !important; } html.cs-app .cs-app-tabs{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: repeat(4, 1fr); /* Непрозрачная подложка: сквозь rgba(…,.96)+blur просвечивал контент и подписи «Меню/Акции/Монеты/Профиль» терялись на пёстрых карточках (волна 1.5). */ background: #FDF7EC; border-top: 1px solid var(--cs-line, #DFCFAF); box-shadow: 0 -18px 36px rgba(23,22,26,.10); padding-bottom: var(--cs-app-sab); } /* Десктоп: во всю ширину 1440px четыре иконки разъезжались на ~360px, а «плашка» шириной 560px висела по центру ПОВЕРХ сетки карточек и панели «Ваш заказ» — инородный остров вместо навигации (QA волна 1.5). Панель делаем сплошной (край в край, фон страницы, разделительная линия), а вкладки держим по центру. */ @media (min-width: 768px){ html.cs-app .cs-app-tabs{ grid-template-columns: repeat(4, minmax(96px, 140px)); justify-content: center; border-top: 1px solid var(--cs-line, #DFCFAF); } } html.cs-app .cs-tab{ position: relative; height: var(--cs-app-tab); min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--cs-ink-soft, #57514A); -webkit-tap-highlight-color: transparent; transition: color 180ms ease-out; } html.cs-app .cs-tab svg{ width: 22px; height: 22px; display: block; } html.cs-app .cs-tab span{ font-family: 'Montserrat','Gilroy','Manrope',system-ui,sans-serif; font-size: 10.5px; font-weight: 800; line-height: 1; letter-spacing: -.01em; } /* Бейдж непрочитанных уведомлений: садится на иконку вкладки, поэтому сдвигаем его вправо-вверх от центра колонки (иконка 22px в колонке ~97px при 390px). */ html.cs-app .cs-tab__badge{ position: absolute; top: 4px; left: 50%; margin-left: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--cs-orange, #F05A22); color: #fff; font-family: 'Montserrat','Gilroy','Manrope',system-ui,sans-serif; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px #FDF7EC; } /* Точка активной вкладки и бейдж делят верх колонки — при бейдже точку прячем, иначе они наезжают друг на друга. */ html.cs-app .cs-tab.is-active:has(.cs-tab__badge)::before{ display: none; } html.cs-app .cs-tab.is-active{ color: var(--cs-orange, #F05A22); } html.cs-app .cs-tab.is-active::before{ content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 999px; background: var(--cs-orange, #F05A22); } html.cs-app .cs-tab:active{ transform: scale(.98); } html.cs-app .cs-tab:focus-visible{ outline: 2px solid var(--cs-orange, #F05A22); outline-offset: -4px; } /* ── 4. Фиксы и наложения на главной ──────────────────────────────────────── */ html.cs-app #catBarSticky{ top: calc(var(--cs-app-top) + var(--cs-app-sat)) !important; } html.cs-app [id^="cat-"]{ scroll-margin-top: calc(var(--cs-app-top) + var(--cs-app-sat) + 68px) !important; } html.cs-app #backToTopBtn{ display: none !important; } /* «↓ в конец меню» — над таб-баром слева (парная «↑ к меню» удалена как дубль «Наверх», столбик из трёх кнопок накрывал правую колонку карточек — QA волна 1.5). */ /* Держим выше плашки «В корзину» (её низ = tab+sab+12px, высота 56px): при непустой корзине круглая кнопка уезжала ПОД плашку и была недоступна (замер 26.07: обе на y≈720…776 при 390×844). Запас считаем всегда, даже когда плашки нет. */ html.cs-app #menuDownBtn{ left: 14px !important; right: auto !important; bottom: calc(var(--cs-app-tab) + var(--cs-app-sab) + 80px) !important; } html.cs-app #cookieBanner{ bottom: calc(64px + var(--cs-app-sab)) !important; } /* Тост: поднимаем над таб-баром ТОЛЬКО те, что уже привязаны к низу инлайн-стилем (на главной тост висит сверху, а часть тостов инжектят скрипты — их не трогаем). */ html.cs-app #toast[style*="safe-area-inset-bottom"]{ bottom: calc(72px + var(--cs-app-sab)) !important; } /* Корзина-плашка: из круглой пилюли в углу — в полноширинную плашку над табами */ html.cs-app #mobileCartBar{ left: 12px !important; right: 12px !important; width: auto !important; bottom: calc(68px + var(--cs-app-sab)) !important; min-height: 56px; border-radius: 16px !important; justify-content: center; gap: 10px; padding: 8px 16px !important; box-shadow: 0 18px 36px rgba(23,22,26,.18) !important; } html.cs-app #mobileCartBar #mobileCartItems{ display: none !important; } html.cs-app #mobileCartBar::after{ content: '· В корзину'; font-family: 'Montserrat','Gilroy',system-ui,sans-serif; font-weight: 800; font-size: 15px; } /* ── 4a. Оверлеи ПОВЕРХ таб-бара (волна 1.5) ────────────────────────────── Шкала z-index сайта: контент < 40 · #mobileCartBar 56 · таб-бар 60 · cookie-баннер 70 · баннер установки PWA 75 · модалки 90 · тосты 10000. До фикса #productModal(50) и #mobileStickyCta(40) уезжали ПОД таб-бар(60): кнопка «Добавить за N ₽» и плашка «Итого · Оформить» ловили тап таб-бара и уводили на /profile#coupons вместо добавления/оформления. */ html.cs-app #productModal{ z-index: 90 !important; } /* Карточка модалки не должна залезать под таб-бар — резервируем его высоту */ html.cs-app #productModalOverlay{ padding-bottom: calc(var(--cs-app-tab) + var(--cs-app-sab) + 8px) !important; } /* Fixed-кнопка «Добавить» внутри модалки (её инжектит cs_header.js на мобиле) */ html.cs-app #productModalCard #pmAddBtn{ bottom: calc(var(--cs-app-tab) + var(--cs-app-sab) + 14px) !important; z-index: 92 !important; } /* Липкая плашка «Итого … Оформить» в корзине — над таб-баром. QA волна 1.5: панели сливались в один блок 130px без разделителя, «Оформить» почти касалась подписей «Акции/Монеты» — добавили линию, тень и воздух снизу. */ html.cs-app #mobileStickyCta{ z-index: 62 !important; bottom: calc(var(--cs-app-tab) + var(--cs-app-sab)) !important; padding-bottom: 16px !important; border-radius: 18px 18px 0 0 !important; border-bottom: 1px solid var(--cs-line, #DFCFAF) !important; box-shadow: 0 -14px 30px rgba(23, 22, 26, .16) !important; } /* и запас снизу, чтобы контент корзины не прятался под двумя барами */ html.cs-app .mobile-bottom-pad{ padding-bottom: calc(90px + var(--cs-app-tab) + var(--cs-app-sab)) !important; } /* …но резерв 90px нужен ТОЛЬКО там, где есть плавающая панель (корзина, каталог). На /loyalty её нет — под карточкой «Пригласите друга» зияла дыра ~90px над таб-баром (QA волна 2). Класс cs-app-nofloat ставит pwa-shell.js по факту наличия #mobileStickyCta / #mobileCartBar / #menuDownBtn в DOM. */ html.cs-app .mobile-bottom-pad.cs-app-nofloat{ padding-bottom: calc(var(--cs-app-tab) + var(--cs-app-sab) + 8px) !important; } /* Корзина в приложении = ОДНА кнопка оформления (Илья 25.07, скрин 20:52): большая «Оформить заказ» в теле формы + липкая панель «Итого · Оформить» давали две CTA подряд. В приложении оставляем только липкую панель над таб-баром, чекбокс согласия с офертой в теле формы остаётся видимым. ≥1024px липкой панели нет (класс lg:hidden) — там кнопку в теле НЕ трогаем. */ @media (max-width: 1023.98px){ html.cs-app #submitBtn{ display: none !important; } } /* ── 4b. Типографика приложения: «плакатов» на первом экране нет ──────────── */ /* Главная в приложении = каталог, а не лендинг: большой hero-«плакат» (надзаголовок + H1 + абзац + 2 кнопки + 4 плашки) занимал весь первый экран, меню начиналось после ~1000px прокрутки (волна 1.5). */ html.cs-app #heroLanding{ display: none !important; } /* На сайте главная остаётся лендингом (h1 до 86px — маркетинг, утв. ранее), в приложении заголовок приводится к маркетинговой шкале 28/40. */ html.cs-app h1.cs-display{ font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.05 !important; } html.cs-app .cs-app-top ~ * h1.cs-display{ letter-spacing: -.035em; } /* ── 5. Мелочи ────────────────────────────────────────────────────────────── */ /* Кнопки-«наверх»/декор сайта, которые в приложении не нужны */ html.cs-app #csSupportModal{ z-index: 10000; } /* Секция «Ещё» в кабинете — только в приложении (в вебе её роль играет футер) */ html:not(.cs-app) #pfMore{ display: none !important; } /* Страница-установщик в приложении бессмысленна — редирект делает pwa-shell.js; пока он не отработал, не показываем «плакат» установки */ html.cs-app body.cs-app-installer{ visibility: hidden; } /* ── 6. Добивка по QA волны 1.5 (25.07.2026) ──────────────────────────────── */ /* [6.1] Чёрная полоса снизу/сверху при overscroll: theme20.css красит холст в цвет футера (html:has(body>footer){background:#17161A}), а в приложении футер скрыт — оставался тёмный фон под контентом. Приложение = кремовый холст, без «резинки». */ html.cs-app, html.cs-app body{ background-color: var(--cs-cream, #F4ECDD) !important; overscroll-behavior-y: none; } html.cs-app .cs-app-top{ top: 0 !important; } /* [6.2] «Плакаты» на экранах /promotions и /loyalty: маркетинговый бейдж и H1 дублировали заголовок шапки экрана и съедали половину первого экрана. */ html.cs-app #laHero .inline-flex.items-center.gap-2.px-3.py-1\.5.rounded-full, html.cs-app main > section:first-of-type > .inline-flex.items-center.gap-2.px-3.py-1\.5.rounded-full{ display: none !important; } html.cs-app #laHero h1.cs-display, html.cs-app main > section:first-of-type > h1.cs-display{ font-size: 22px !important; line-height: 1.1 !important; margin-bottom: 4px !important; } html.cs-app #laHero{ padding: 16px !important; } /* [6.3] Корзина в приложении: промо-шапка «ВАША ШАВА УЖЕ ПОЧТИ У ВАС!» (~300px) отодвигала состав заказа за первый экран. */ html.cs-app #cartHero, html.cs-app section:has(> #cartHero){ display: none !important; } /* [6.4] Открыта модалка (QR для кассы) → таб-бар гасим вуалью и отключаем тапы, иначе он выглядел активным поверх затемнённого экрана. */ html.cs-app body.cs-modal-open .cs-app-tabs{ pointer-events: none; } html.cs-app body.cs-modal-open .cs-app-tabs::after{ content: ''; position: absolute; inset: 0; background: rgba(5,5,5,.72); z-index: 2; } /* [6.5] Cookie-баннер в приложении: сплошная компактная строка ВПЛОТНУЮ над таб-баром. Было (QA волна 1.5): три фиксированные плашки одновременно — «В корзину» + cookie + табы — 204px из 844 (24% экрана), две нижние строки карточек не читались, между плашками рваные зазоры, а кнопка ✕ баннера перехватывала тап по кнопкам карточек. */ html.cs-app #cookieBanner{ left: 0 !important; right: 0 !important; width: 100% !important; max-width: none !important; transform: none !important; bottom: calc(var(--cs-app-tab) + var(--cs-app-sab)) !important; } html.cs-app #cookieBanner > div{ border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; padding: 6px 12px !important; } /* Пока висит cookie-строка, плашку «В корзину» не показываем: корзина в приложении всегда под рукой иконкой с бейджем в шапке экрана — трёх баров подряд не будет. */ html.cs-app body.cs-cookie-on #mobileCartBar{ display: none !important; } html.cs-app body.cs-cookie-on #menuDownBtn{ bottom: calc(var(--cs-app-tab) + 20px + var(--cs-app-sab) + var(--cs-cookie-h, 72px)) !important; } /* Резерв места под обе нижние панели — низ каталога остаётся доступным */ html.cs-app body.cs-cookie-on{ padding-bottom: calc(var(--cs-app-tab) + var(--cs-app-sab) + var(--cs-cookie-h, 72px)) !important; } /* [6.6] Активная подпись таб-бара: #F05A22 на кремовом давал 3.18:1 при 10.5px */ html.cs-app .cs-tab.is-active{ color: #B8390C; } html.cs-app .cs-tab.is-active::before{ background: #B8390C; } @media (prefers-reduced-motion: reduce){ html.cs-app .cs-tab, html.cs-app .cs-app-back{ transition: none; } } /* ── 7. Добивка волны 1.5 (26.07.2026) ────────────────────────────────────── */ /* [7.1] /success и /fail: body = flex-центровка (min-h-screen flex items-center justify-center), поэтому вставленная app-шапка становилась флекс-элементом и сжималась до 211px, уезжая за левый край (замер 26.07: x=-26, ширина 211, scrollWidth страницы 417 при 390). Возвращаем нормальный поток. */ html.cs-app body.flex.items-center.justify-center{ display: block !important; padding: 0 0 calc(var(--cs-app-tab) + var(--cs-app-sab)) !important; } /* горизонтальные отступы уходят с body на карточку — шапка идёт край в край */ html.cs-app body.flex.items-center.justify-center > main{ margin: 24px auto !important; max-width: min(28rem, calc(100% - 32px)) !important; } /* [7.2] Легалки (/legal/*) в приложении: заголовок-«плакат» дублировал заголовок app-шапки и съедал первый экран; крошки прячет pwa-shell.js. */ html.cs-app body.cs-legal main > h1{ display: none !important; } html.cs-app body.cs-legal main{ padding-top: 10px !important; } html.cs-app body.cs-legal nav[aria-label="breadcrumb"]{ display: none !important; } /* [7.3] Правая колонка виджетов на десктопе в приложении (≥1024) не знала про таб-бар: колонка тянулась до y≈967 при вьюпорте 900, и нижний блок «🛒 Ваш заказ» вместе с подписью уходил под таб-бар (замер 26.07, 1440×900: sideWidgets 520..967, csAppTabs 831..900). Ограничиваем высоту с учётом таб-бара и safe-area — у колонки уже есть собственный скролл. */ @media (min-width: 1024px){ html.cs-app #sideWidgets{ display: flex !important; flex-direction: column; gap: 12px; max-height: calc(100vh - 96px - var(--cs-app-tab) - var(--cs-app-sab)) !important; padding-bottom: 8px; } /* space-y-3 добавляет margin-top каждому следующему блоку — с gap это был бы двойной зазор */ html.cs-app #sideWidgets > *{ margin-top: 0 !important; } /* мини-корзина — первым блоком: именно она уходила под таб-бар последней в колонке */ html.cs-app #sideWidgets > #sideCart{ order: -1; } /* с открытым cookie-баннером колонка поднимается ещё выше */ html.cs-app body.cs-cookie-on #sideWidgets{ max-height: calc(100vh - 96px - var(--cs-app-tab) - var(--cs-app-sab) - var(--cs-cookie-h, 72px)) !important; } }