/* ===================================================================== FREX — новая витрина (v2), Этап 1: базовая дизайн-система ----------------------------------------------------------------------- Правила совместимости: 1) Ничего не переопределяет старые классы (.btn, .card, .container и т.п.) — все новые компоненты живут в пространстве имён "s-", чтобы страницы, ещё не переведённые на v2, продолжали работать как раньше. 2) Цвет берём из уже существующих переменных темы (--primary, --accent, --bg, --card, --text, --muted, --border, --radius, --font), которые подставляются в из админки (Настройки → Дизайн, включая 4 готовых пресета). Здесь мы их не переопределяем, только достраиваем токены, которых не хватало (отступы, тени, типографика, z-index). 3) Ссылка на этот файл подключается в templates/header.php ВТОРЫМ , после style.css — чтобы удалить редизайн, достаточно убрать один этот . ===================================================================== */ :root { /* ---- Отступы (шкала 4px) ---- */ --s-space-1: 4px; --s-space-2: 8px; --s-space-3: 12px; --s-space-4: 16px; --s-space-5: 24px; --s-space-6: 32px; --s-space-7: 48px; --s-space-8: 64px; /* ---- Радиусы: производные от общего --radius (Настройки → Дизайн) ---- */ --s-radius-sm: calc(var(--radius) * 0.6px); --s-radius-md: calc(var(--radius) * 1px); --s-radius-lg: calc(var(--radius) * 1.7px); --s-radius-pill: 999px; /* ---- Типографика ---- */ --s-fs-xs: .78rem; --s-fs-sm: .87rem; --s-fs-base: 1rem; --s-fs-md: 1.08rem; --s-fs-lg: 1.3rem; --s-fs-xl: 1.7rem; --s-fs-2xl: 2.1rem; --s-fw-regular: 400; --s-fw-medium: 600; --s-fw-bold: 800; /* ---- Тени: лёгкие, без перегруза ---- */ --s-shadow-sm: 0 1px 2px rgba(0,0,0,.14); --s-shadow-md: 0 6px 20px rgba(0,0,0,.18); --s-shadow-lg: 0 16px 40px rgba(0,0,0,.24); /* ---- Слои ---- */ --s-z-dropdown: 30; --s-z-sticky: 40; --s-z-drawer: 50; --s-z-modal: 60; --s-z-toast: 70; /* ---- Движение ---- */ --s-dur-fast: .12s; --s-dur-base: .2s; --s-ease: cubic-bezier(.4, 0, .2, 1); /* ---- Фокус (доступность) ---- */ --s-focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); /* ---- Сетка/контейнер ---- */ --s-maxw: 1320px; --s-gutter: 20px; } @media (max-width: 767px) { :root { --s-gutter: 14px; } } /* ------------------------- Базовые доступности ------------------------- */ .s-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .s-skip-link { position: absolute; left: 8px; top: -48px; background: var(--card); color: var(--text); padding: 10px 16px; border-radius: var(--s-radius-sm); border: 1px solid var(--border); z-index: var(--s-z-toast); transition: top var(--s-dur-base) var(--s-ease); } .s-skip-link:focus { top: 8px; } /* Единое видимое кольцо фокуса для клавиатурной навигации по всей v2-разметке */ .s-focusable:focus-visible, .s-btn:focus-visible, .s-input:focus-visible, .s-select:focus-visible, .s-textarea:focus-visible, .s-icon-btn:focus-visible, .s-chip:focus-visible { outline: none; box-shadow: var(--s-focus-ring); } /* ------------------------- Контейнер и сетка ------------------------- */ .s-container { width: 100%; max-width: var(--s-maxw); margin: 0 auto; padding: 0 var(--s-gutter); box-sizing: border-box; } .s-row { display: flex; flex-wrap: wrap; gap: var(--s-space-4); } .s-col { min-width: 0; } /* ------------------- Боковые рекламные блоки (свободное поле у краёв экрана на широких мониторах, за пределами .s-container) ------------------- Настройки → Реклама (admin/sections/banners.php), позиции side_left/ side_right, рендерятся includes/functions.php::banners() в templates/header.php. По умолчанию не показываются вообще (display:none) — включаются только media-запросом ниже, и только если для этой стороны реально есть хотя бы один активный блок (:empty без содержимого от banners(), когда блоков нет — иначе на широком экране висел бы пустой прямоугольник без причины). */ .s-side-banners { display: none; position: fixed; top: 50%; transform: translateY(-50%); width: 160px; max-height: 90vh; overflow: hidden; flex-direction: column; gap: var(--s-space-3); z-index: 1; } .s-side-banners .banner { width: 100%; } .s-side-banners .banner img { width: 100%; height: auto; display: block; border-radius: var(--s-radius-md); } .s-side-banners-left { left: var(--s-space-4); } .s-side-banners-right { right: var(--s-space-4); } /* 1760px — с запасом хватает и на 160px-блок с обеих сторон, и на отступы, чтобы он гарантированно не наезжал на центральный .s-container (--s-maxw). */ @media (min-width: 1760px) { .s-side-banners:not(:empty) { display: flex; } } /* ------------------------- Типографика ------------------------- */ .s-h1 { font-size: clamp(1.5rem, 2.6vw, var(--s-fs-2xl)); font-weight: var(--s-fw-bold); margin: 0 0 var(--s-space-4); line-height: 1.2; } .s-h2 { font-size: clamp(1.2rem, 1.8vw, var(--s-fs-xl)); font-weight: var(--s-fw-bold); margin: 0 0 var(--s-space-3); line-height: 1.25; } .s-h3 { font-size: var(--s-fs-md); font-weight: var(--s-fw-medium); margin: 0 0 var(--s-space-2); } .s-muted { color: var(--muted); } .s-eyebrow { font-size: var(--s-fs-xs); font-weight: var(--s-fw-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .s-fs-xs { font-size: var(--s-fs-xs); } .s-fs-sm { font-size: var(--s-fs-sm); } /* ------------------------- Кнопки ------------------------- */ /* min 44x44 зона на мобильных — учтено паддингами */ .s-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-space-2); min-height: 44px; padding: 0 var(--s-space-5); border-radius: var(--s-radius-md); border: 1px solid transparent; font: inherit; font-size: var(--s-fs-sm); font-weight: var(--s-fw-medium); cursor: pointer; user-select: none; white-space: nowrap; transition: background var(--s-dur-fast) var(--s-ease), border-color var(--s-dur-fast) var(--s-ease), transform var(--s-dur-fast) var(--s-ease), opacity var(--s-dur-fast) var(--s-ease); text-decoration: none; } .s-btn:active { transform: translateY(1px); } .s-btn[disabled], .s-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } .s-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; } .s-btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; color: inherit; animation: s-spin .7s linear infinite; } .s-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .s-btn-primary:hover { filter: brightness(1.08); } .s-btn-accent { background: var(--accent); border-color: var(--accent); color: #06110d; } .s-btn-accent:hover { filter: brightness(1.08); } .s-btn-ghost { background: transparent; border-color: var(--border); color: var(--text); } .s-btn-ghost:hover { border-color: var(--primary); color: var(--primary); } .s-btn-sm { min-height: 36px; padding: 0 var(--s-space-3); font-size: var(--s-fs-xs); } .s-btn-block { width: 100%; } .s-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--s-radius-md); border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer; transition: background var(--s-dur-fast) var(--s-ease), color var(--s-dur-fast) var(--s-ease); } .s-icon-btn:hover { background: var(--input-bg); color: var(--primary); } @keyframes s-spin { to { transform: rotate(360deg); } } /* ------------------------- Поля форм ------------------------- */ .s-input, .s-select, .s-textarea { width: 100%; min-height: 44px; padding: 0 var(--s-space-4); background: var(--input-bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--s-radius-md); font: inherit; font-size: var(--s-fs-sm); transition: border-color var(--s-dur-fast) var(--s-ease); } .s-textarea { min-height: 96px; padding: var(--s-space-3) var(--s-space-4); resize: vertical; } .s-input:hover, .s-select:hover, .s-textarea:hover { border-color: color-mix(in srgb, var(--border) 40%, var(--text)); } .s-input.is-error, .s-select.is-error, .s-textarea.is-error { border-color: #e5484d; } /* Свой шеврон вместо нативной стрелки select — та выглядела по-разному в каждом браузере/ОС и не вписывалась в дизайн. */ .s-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 38px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa3b2' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--s-space-3) center; background-size: 16px; } .s-select::-ms-expand { display: none; } /* Выпадающий список вариантов рисует браузер/ОС отдельно от страницы — полупрозрачный --input-bg там превращается в белёсый фон на белой подложке попапа. Задаём option сплошной непрозрачный --card, чтобы список тоже был тёмным и читаемым. */ .s-select option { background-color: var(--card); color: var(--text); } .s-field-error { color: #e5484d; font-size: var(--s-fs-xs); margin-top: var(--s-space-1); } /* ------------------------- Карточка-поверхность ------------------------- */ .s-surface { background: var(--card); border: 1px solid var(--border); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-sm); } /* ------------------------- Бейджи ------------------------- */ .s-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--s-radius-pill); font-size: var(--s-fs-xs); font-weight: var(--s-fw-medium); line-height: 1.6; } .s-badge-new { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .s-badge-hit { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); } .s-badge-sale { background: #e5484d; color: #fff; } .s-badge-neutral { background: var(--input-bg); color: var(--muted); border: 1px solid var(--border); } /* ------------------------- Чипы (фильтры) ------------------------- */ .s-chip { display: inline-flex; align-items: center; gap: var(--s-space-2); min-height: 36px; padding: 0 var(--s-space-3); border-radius: var(--s-radius-pill); border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: var(--s-fs-sm); cursor: pointer; transition: border-color var(--s-dur-fast) var(--s-ease), color var(--s-dur-fast) var(--s-ease); } .s-chip:hover { border-color: var(--primary); } .s-chip.is-active { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card)); } /* ------------------------- Skeleton-загрузка ------------------------- */ .s-skeleton { position: relative; overflow: hidden; background: var(--input-bg); border-radius: var(--s-radius-md); } .s-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 8%, transparent), transparent); animation: s-shimmer 1.4s infinite; } @keyframes s-shimmer { 100% { transform: translateX(100%); } } /* ------------------------- Пустые состояния ------------------------- */ .s-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-space-3); padding: var(--s-space-8) var(--s-space-4); color: var(--muted); } .s-empty .ico { width: 2.4em; height: 2.4em; opacity: .55; } /* ------------------------- Хлебные крошки ------------------------- Единый компонент вместо старого .breadcrumbs (style.css) — тот же смысл, но с aria-current на текущей странице и токенами v2. Старый класс не трогаем и не удаляем: страницы, ещё не переведённые на shop-v2.css, продолжают использовать его как раньше (см. правило совместимости в шапке этого файла). */ .s-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-space-1); font-size: var(--s-fs-xs); color: var(--muted); margin-bottom: var(--s-space-4); } .s-breadcrumbs a { color: var(--muted); text-decoration: none; } .s-breadcrumbs a:hover, .s-breadcrumbs a:focus-visible { color: var(--primary); } .s-breadcrumbs .s-crumb-sep { opacity: .6; } .s-breadcrumbs [aria-current="page"] { color: var(--text); font-weight: var(--s-fw-medium); } /* ------------------------- Загрузчик (полноэкранный/блочный) ------------------------- .s-btn.is-loading уже рисует спиннер внутри кнопки (см. выше) — это тот же визуальный приём, вынесенный в отдельный элемент для мест, где нет кнопки (загрузка блока данных, полноэкранное состояние). */ .s-spinner { display: inline-block; width: 1.5em; height: 1.5em; flex-shrink: 0; border: 2px solid color-mix(in srgb, var(--text) 16%, transparent); border-top-color: var(--primary); border-radius: 50%; animation: s-spin .7s linear infinite; } .s-spinner-lg { width: 2.4em; height: 2.4em; border-width: 3px; } .s-loading-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-space-3); padding: var(--s-space-8) var(--s-space-4); color: var(--muted); } /* ------------------------- Tooltip ------------------------- Только для доп. пояснения к иконке-кнопке без подписи — сама иконка-кнопка обязана иметь свой aria-label независимо от tooltip (см. docs/DESIGN_SYSTEM.md §6.1): tooltip дополняет, а не заменяет доступное имя элемента. */ .s-tooltip-wrap { position: relative; display: inline-flex; } .s-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--text); color: var(--bg); font-size: var(--s-fs-xs); font-weight: var(--s-fw-medium); white-space: nowrap; padding: 5px 10px; border-radius: var(--s-radius-sm); box-shadow: var(--s-shadow-sm); opacity: 0; pointer-events: none; z-index: var(--s-z-dropdown); transition: opacity var(--s-dur-fast) var(--s-ease), transform var(--s-dur-fast) var(--s-ease); } .s-tooltip-wrap:hover .s-tooltip, .s-tooltip-wrap:focus-within .s-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } @media (hover: none) { /* На сенсорных экранах наведения не бывает — тултип не должен быть единственным способом узнать назначение элемента (см. правило: у иконки-кнопки уже есть aria-label сам по себе, это не потеря смысла). */ .s-tooltip { display: none; } } /* ------------------------- Контентная карточка ------------------------- Единый компонент вместо старого .card (style.css) для одиночного блока контента — токены те же по смыслу (--card/--border/--s-radius-lg), но через шкалу v2 вместо хардкода "20px"/"--radius * 1px" из старого файла. Не путать с предметными карточками (.s-product-card/.s-news-card/...) — это именно обёртка одиночного блока, не элемент сетки. Сама «коробка» (фон/рамка/радиус) — уже существующий .s-surface (см. выше, используется так же в .s-cart-summary); здесь только паддинг под конкретный контекст, тот же приём, что у .s-cart-summary/.s-giveaway-panel — класс всегда ставится вместе с .s-surface, а не самостоятельно. */ .s-content-card { padding: var(--s-space-5); } .s-hint { font-size: var(--s-fs-xs); color: var(--muted); font-weight: var(--s-fw-regular); } /* ------------------------- Тост-уведомления ------------------------- */ .s-toast-stack { position: fixed; right: var(--s-space-4); bottom: var(--s-space-4); z-index: var(--s-z-toast); display: flex; flex-direction: column; gap: var(--s-space-2); } .s-toast { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--s-radius-md); box-shadow: var(--s-shadow-md); padding: var(--s-space-3) var(--s-space-4); font-size: var(--s-fs-sm); animation: s-toast-in var(--s-dur-base) var(--s-ease); } @keyframes s-toast-in { from { opacity: 0; transform: translateY(8px); } } /* ===================================================================== Этап 2 — Header / Footer / MobileMenu ===================================================================== */ /* ------------------------- Шапка ------------------------- */ .s-header { position: sticky; top: 0; z-index: var(--s-z-sticky); background: var(--card); border-bottom: 1px solid var(--border); } .s-header-row { display: flex; align-items: center; gap: var(--s-space-4); padding: var(--s-space-3) var(--s-gutter); } .s-header-burger { display: none; flex-shrink: 0; } .s-logo { display: flex; align-items: center; gap: var(--s-space-2); font-size: var(--s-fs-md); font-weight: var(--s-fw-bold); color: var(--text); flex-shrink: 0; } .s-logo:hover { color: var(--text); } .s-logo-mark { width: 36px; height: 36px; border-radius: var(--s-radius-sm); background: linear-gradient(135deg, var(--primary), var(--accent)); display: grid; place-items: center; color: #fff; font-weight: var(--s-fw-bold); } .s-logo img { height: 38px; width: auto; } .s-header-actions { display: flex; align-items: center; gap: var(--s-space-2); margin-left: auto; flex-shrink: 0; } /* ------------------------- Поисковая шторка ------------------------- */ /* Раскрывается из-под шапки поверх страницы; --s-header-h выставляется в app.js (реальная высота шапки — 1 или 2 строки, с языками и т.п.). */ .s-search-overlay[hidden] { display: none; } .s-search-overlay { position: fixed; inset: 0; z-index: var(--s-z-modal); } .s-search-overlay-backdrop { position: absolute; inset: 0; background: rgba(6, 8, 14, .6); opacity: 0; transition: opacity var(--s-dur-base) var(--s-ease); } .s-search-overlay.is-open .s-search-overlay-backdrop { opacity: 1; } .s-search-overlay-panel { position: absolute; left: 0; right: 0; top: var(--s-header-h, 64px); display: flex; align-items: center; gap: var(--s-space-3); max-width: 760px; margin: 0 auto; padding: var(--s-space-4) var(--s-gutter); opacity: 0; transform: translateY(-10px); transition: opacity var(--s-dur-base) var(--s-ease), transform var(--s-dur-base) var(--s-ease); } .s-search-overlay.is-open .s-search-overlay-panel { opacity: 1; transform: translateY(0); } .s-search-overlay-form { flex: 1 1 auto; display: flex; align-items: center; gap: var(--s-space-2); background: var(--card); border: 1px solid var(--border); border-radius: var(--s-radius-pill); padding: var(--s-space-2) var(--s-space-2) var(--s-space-2) var(--s-space-4); box-shadow: var(--s-shadow-md); } .s-search-overlay-ico { display: grid; place-items: center; color: var(--muted); flex-shrink: 0; } .s-search-overlay-input { flex: 1 1 auto; min-width: 0; height: 44px; background: none; border: 0; outline: 0; color: var(--text); font: inherit; font-size: var(--s-fs-md); } .s-search-overlay-input::placeholder { color: var(--muted); } .s-search-overlay-form .s-icon-btn { flex-shrink: 0; } .s-search-overlay-close { flex-shrink: 0; background: var(--card); box-shadow: var(--s-shadow-md); } @media (max-width: 767px) { .s-search-overlay-panel { padding: var(--s-space-3); gap: var(--s-space-2); } .s-search-overlay-form { padding-left: var(--s-space-3); } } .s-cart-badge { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--s-radius-pill); background: var(--accent); color: #06231d; font-size: var(--s-fs-xs); font-weight: var(--s-fw-bold); display: grid; place-items: center; } .s-icon-btn { position: relative; } .s-lang-switch { display: flex; gap: 4px; } .s-lang-link { padding: 6px 9px; border-radius: var(--s-radius-sm); font-size: var(--s-fs-xs); font-weight: var(--s-fw-medium); text-transform: uppercase; color: var(--muted); border: 1px solid transparent; } .s-lang-link.is-active { color: var(--primary); border-color: var(--border); background: var(--input-bg); } /* ------------------------- Мини-корзина: попап после «В корзину» ------------------------- Небольшое окошко под шапкой с превью товара и выбором «Перейти в корзину» / «Продолжить покупки» — показывается ДОПОЛНИТЕЛЬНО к обычному тосту (см. #toasts/.toast в style.css — легаси-компонент, оставлен как есть намеренно, не путать с уже существующим, но не задействованным в JS .s-toast-stack/ .s-toast чуть выше в этом файле). Не модальное: fixed, но НЕ inset:0, задний план не затемняется и не блокируется, потому и не входит в общий overlayRegistry (assets/js/app.js) вместе с мобильным меню/поиском/consent. */ .s-cart-popover[hidden] { display: none; } .s-cart-popover { position: fixed; top: var(--s-header-h, 64px); right: var(--s-gutter); z-index: var(--s-z-toast); width: min(360px, calc(100vw - var(--s-gutter) * 2)); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity var(--s-dur-base) var(--s-ease), transform var(--s-dur-base) var(--s-ease); } .s-cart-popover.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .s-cart-popover-inner { margin-top: var(--s-space-2); padding: var(--s-space-4); background: var(--card); border: 1px solid var(--border); border-radius: var(--s-radius-lg); box-shadow: var(--s-shadow-lg); } .s-cart-popover-row { display: flex; align-items: flex-start; gap: var(--s-space-3); } .s-cart-popover-thumb, .s-cart-popover-ico { width: 48px; height: 48px; border-radius: var(--s-radius-sm); flex-shrink: 0; } .s-cart-popover-thumb { object-fit: cover; background: var(--input-bg); } .s-cart-popover-thumb[hidden] { display: none; } .s-cart-popover-ico { background: var(--input-bg); color: var(--accent); display: grid; place-items: center; } .s-cart-popover-ico[hidden] { display: none; } .s-cart-popover-text { min-width: 0; flex: 1 1 auto; } .s-cart-popover-text strong { display: block; font-size: var(--s-fs-sm); font-weight: var(--s-fw-medium); margin-bottom: 2px; } .s-cart-popover-title { display: block; font-size: var(--s-fs-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .s-cart-popover-price { display: block; font-size: var(--s-fs-xs); margin-top: 1px; } .s-cart-popover-close { flex-shrink: 0; } .s-cart-popover-actions { display: flex; gap: var(--s-space-2); margin-top: var(--s-space-3); } .s-cart-popover-actions .s-btn { flex: 1 1 0; min-width: 0; } @media (max-width: 480px) { /* На узких экранах «Перейти в корзину» + «Продолжить покупки» рядом не помещаются по ширине текста и вылезали за карточку (actions.scrollWidth был на ~20px больше actions.clientWidth) — переключаем на вертикальный стек в две полноширинные кнопки, как уже сделано для похожей пары кнопок в pages/two_factor.php. */ .s-cart-popover-actions { flex-direction: column; } .s-cart-popover-actions .s-btn { width: 100%; } } @media (max-width: 767px) { /* На мобильных переносим окошко вниз экрана — снэкбар у нижнего края, как в Ozon/Wildberries, а не «висящую под шапкой карточку». Так оно не перекрывает шапку/навигацию и верх сетки товаров. Направление анимации меняем на «снизу вверх». JS (assets/js/app.js) на мобильных больше не показывает ОБЫЧНЫЙ toast() при добавлении в корзину — на этой ширине окошко-попап теперь единственное подтверждение (без дублирования двух всплывающих уведомлений разом). bottom:148px — проверено вживую (эмуляция 375×812 в браузере): у карточки этого окошка реальная высота ~148px (превью + текст + 1-2 кнопки), а не как у короткого текстового #toasts. Кнопка чат-виджета на мобильных — .chat-widget { right:12px; bottom:84px } + сама кнопка 56px высотой (style.css) — занимает по вертикали зону 84–140px от низа экрана. Нижний край снэкбара на bottom:16px реально накладывался на кнопку чата (обе зоны по вертикали пересекались) — подняли снэкбар целиком выше кнопки чата (140px) с запасом ~8px. Если положение/высота .chat-widget в style.css изменится — этот отступ тоже нужно будет пересчитать. */ .s-cart-popover { top: auto; bottom: 148px; left: var(--s-gutter); right: var(--s-gutter); width: auto; transform: translateY(8px); } .s-cart-popover.is-open { transform: translateY(0); } .s-cart-popover-inner { margin-top: 0; } } /* ------------------------- Навигация по категориям ------------------------- */ .s-nav-row { display: flex; align-items: center; gap: 4px; padding-bottom: var(--s-space-3); flex-wrap: wrap; } .s-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--s-radius-md); color: var(--muted); font-weight: var(--s-fw-medium); font-size: var(--s-fs-sm); transition: background var(--s-dur-fast) var(--s-ease), color var(--s-dur-fast) var(--s-ease); } .s-nav-link:hover, .s-nav-link.is-active { background: var(--input-bg); color: var(--primary); } /* Пункт шапки с подпунктами (редактор меню, admin/sections/menu.php, «Сделать подпунктом») — раскрывается как выпадающее меню по наведению (десктоп с мышью) и по клику/Escape/клику вне (клавиатура, тач-устройства с hover, JS-обработчик — assets/js/app.js). .s-nav-link-parent — та же визуальная кнопка, что .s-nav-link, но