/* woff2 вместо ttf — тот же шрифт, ~35% исходного веса (в сумме 4 файла раньше весили ~1.7 МБ, теперь ~570 КБ), конвертация fontTools, символы не резались (риск случайно обрезать турецкие буквы или символ ₽ в ценах не стоил выигрыша ещё в пару раз). font-display: swap — текст сразу показывается системным шрифтом, Inter подменяет его без брака "невидимого текста" на медленной сети (частая жалоба на встроенный браузер WhatsApp). */ @font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; } :root { --green: #1aa260; --green-dark: #148a51; --green-bg: #eaf7f0; --green-border: #b7e3c8; --logo-green: #00623c; --ink: #141414; --gray: #86868b; --lgray: #b4b4ba; --border: #e8e8ed; --bg: #fafafa; --photobg: #f2f2f4; --white: #ffffff; --danger: #c0392b; --warning: #d99a1e; --warning-bg: #fdf3e3; --link-blue: #2f6fed; /* Убыточный товар (ABC по марже = 'D', см. src/abc_xyz.py) — отдельный, более тёмный оттенок красного: визуально отличим от --danger (мало вклада/затоварено), т.к. это качественно другая проблема — товар теряет деньги при продаже, не просто "низкий приоритет". */ --loss: #7a1f1f; --loss-bg: #fbebeb; --r-card: 20px; --r-control: 12px; --r-btn-lg: 18px; --r-pill: 999px; --r-sm: 10px; --header-h: 168px; --z-header: 30; --z-overlay-backdrop: 40; --z-overlay-panel: 41; } * { box-sizing: border-box; } /* [hidden] должен побеждать любой display:flex/grid, заданный тем же классом ниже (иначе, при равной специфичности, побеждает правило, объявленное позже в файле — то есть наше, а не браузерное). */ [hidden] { display: none !important; } /* overflow-x:hidden + overscroll-behavior:none — по прямому репорту пользователя (2026-08-18): на iOS при потягивании экрана открывалась пустая область за краем страницы (стандартный "резиновый" бounce Safari). overflow-x:hidden на html/body не мешает внутренним элементам со своим overflow-x:auto (графики/таблицы) скроллиться горизонтально — он только не даёт САМОЙ СТРАНИЦЕ становиться шире экрана. background на html — на случай, если bounce всё равно секунду виден при вертикальной прокрутке, чтобы это был цвет фона приложения, а не белый/серый по умолчанию. scroll-behavior:smooth здесь СТОЯЛО, убрано по репорту пользователя (2026-08-19, "скролл не работает, любая попытка спуска возвращает наверх"): это CSS-свойство делает ГЛАДКИМ вообще ЛЮБОЙ скролл страницы, включая нативный (колесо мыши/трекпад/скроллбар), не только программные scrollIntoView/scrollTo из site.js — а тем уже явно передан behavior:"smooth" ПРЯМО В ВЫЗОВЕ (см. флудом по файлу), они в этом свойстве не нуждаются вовсе. Быстрые тики колеса мыши на такой длинной странице (5 блоков аналитики + полный каталог) запускают каскад перекрывающихся smooth-анимаций, и по задокументированному поведению части браузеров такая гонка анимаций может "сбрасывать" скролл, а не просто быть медленной — это ближе всего к описанному симптому, чем что-либо ещё, что мы уже пробовали (content-visibility, overflow-anchor). Нативный скролл теперь мгновенный (браузер по умолчанию) — визуально грубее, зато предсказуемый и не воюет сам с собой. */ html { /* Зум по двойному тапу — та же правка, что в site/static/style.css (см. site/templates/_viewport.html): клиент случайно приближает и не может вернуть. */ touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; overscroll-behavior: none; background: var(--bg); } /* overflow-x/overscroll-behavior были и здесь, и на html — по прямому репорту пользователя (2026-08-19: колесо мыши и Page Down не скроллят страницу вообще, работает только перетаскивание самого скроллбара, и в DevTools на дереве предков нет ни одного "wheel"-слушателя). Когда overflow задан ОДНОВРЕМЕННО и на html, и на body, браузер должен выбрать ОДИН из них "корневым скролл-элементом" (document.scrollingElement) — и при таком дублировании это может развалиться на ДВА независимых скролл- контекста: видимый скроллбар управляет одним (настоящим, viewport), а колесо мыши/клавиатура целятся в другой (body как отдельный бокс, который может быть уже "выбран до упора" или вообще не тем, что видно на экране) — это задокументированная, известная категория багов именно от дублирования overflow на html И body одновременно. Оставлено только на html — тут не нужно повторять.*/ body { margin: 0; font-family: "Inter", system-ui, sans-serif; color: var(--ink); background: var(--bg); padding-bottom: 40px; max-width: 100vw; } a { color: inherit; } /* ---------- шапка ---------- */ /* Вся шапка целиком — один неподвижный sticky-блок, всегда полностью видимый, без сворачивания при скролле. Несколько попыток заставить верхнюю часть (лого/поиск) прятаться при скролле вниз и появляться при скролле вверх — сперва через JS-анимацию высоты, потом через независимый sticky у одной только .categories-wrap — каждый раз ломали что-то более важное на iPhone/Safari (то дёргалась, то переставала возвращаться, то меню вообще переставало быть закреплённым и переставала работать навигация по разделам). Рабочая надёжная навигация важнее лишних пикселей экрана при скролле — возвращена простая схема без всякого скролл-зависимого JS. */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--white); border-bottom: 1px solid var(--border); } .header-top { display: flex; align-items: center; gap: 18px; padding: 16px 20px 10px; } .logo { height: 52px; width: auto; flex-shrink: 0; } .header-info { flex: 1; min-width: 0; } .tagline { font-weight: 600; font-size: 14px; color: var(--logo-green); line-height: 1.3; } .orders-link { font-size: 12.5px; font-weight: 600; color: var(--green); text-decoration: none; margin-top: 4px; display: inline-block; } .orders-link:hover { text-decoration: underline; } /* Шапка на десктопе — по прямому запросу пользователя (2026-08-19, "заголовок выглядит очень плохо"): раньше здесь не было НИКАКОГО отдельного десктопного вида — те же мобильные пропорции (лого+тэглайн одной колонкой, поисковая строка на всю ширину под ними, чипы разделов отдельной строкой) просто растягивались на весь широкий экран, отчего шапка читалась как плоская мобильная страница, а не как приложение. Тот же язык, что и у .analytics-section ниже (общий max-width, карточки с тенью) — лого и поиск в один ряд, сам поиск не на всю ширину, а разумного размера рядом с лого, чипы разделов в той же по ширине колонке, что и остальной контент страницы. */ @media (min-width: 900px) { /* Без max-width — по прямому запросу пользователя (2026-08-19): карточки товаров растянуты на весь экран без ограничения ширины (см. .catalog/.grid ниже), а шапка/аналитика были искусственно сжаты в узкую колонку по центру — несогласованно. Просто отступы по краям, ширина — вся доступная, как и у каталога. */ .header-collapsible-inner { display: flex; align-items: center; gap: 24px; padding: 20px 28px 14px; } .header-top { padding: 0; flex-shrink: 0; } .logo { height: 40px; } .tagline { font-size: 15px; } .orders-link { margin-top: 3px; } .searchbar { flex: 1; max-width: 420px; margin-left: auto; padding: 0; } .categories-wrap { padding: 0 28px 16px; } .category-chip { padding: 9px 18px; font-size: 14px; } } /* Мобильный — логотип меньше, а тэглайн ("Оптовый склад с доставкой до двери") в одну строку, не в две (по прямому запросу пользователя). Первая попытка (40px/13px) на узких экранах текст всё ещё не помещался и обрезался многоточием (фидбэк пользователя, скриншот) — логотип и отступы уменьшены сильнее, шрифт мельче. overflow/ellipsis остаётся подстраховкой на случай совсем узких экранов, не основным приёмом. */ @media (max-width: 899px) { .header-top { gap: 10px; padding: 14px 16px 8px; } .logo { height: 36px; } .tagline { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Кабинет аналитики закупок не инструмент заказа — из .fab-stack убрана корзина (по прямому запросу пользователя 2026-08-17), остался только "наверх раздела". */ .fab-stack { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-header); display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; } @media (min-width: 900px) { .fab-stack { position: static; display: contents; } .scroll-top-toggle { position: fixed; bottom: 16px; right: 24px; z-index: var(--z-header); } } .scroll-top-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; box-shadow: 0 4px 16px rgba(20,20,20,0.2); transition: background 0.15s ease; } .scroll-top-toggle:hover { background: var(--photobg); } .searchbar { padding: 4px 20px 12px; } .search-wrap { position: relative; } #search { width: 100%; padding: 12px 40px 12px 16px; border: 1px solid var(--border); background: var(--photobg); /* var(--r-btn-lg), не --r-control — по фидбэку пользователя выглядело мельче остальных скруглений на сайте (та же правка уже делалась для поля PIN на странице входа в кабинет). */ border-radius: var(--r-btn-lg); font-size: 16px; font-family: inherit; outline: none; transition: border-color 0.15s ease, background 0.15s ease; } #search:focus { border-color: var(--green); background: var(--white); } /* Свой крестик очистки (#search-clear, см. site.js) вместо нативного ::-webkit-search-cancel-button — по прямому репорту пользователя (2026-08-27, мобильный скриншот): нативная кнопка у type="search" ненадёжно/еле заметно появляется на телефоне, один явный тап должен гарантированно чистить поле на любом мобильном браузере. Прячем нативную, чтобы не было двух крестиков разом. */ #search::-webkit-search-cancel-button { display: none; -webkit-appearance: none; } .search-clear-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--gray); font-size: 22px; line-height: 1; cursor: pointer; padding: 8px; display: flex; align-items: center; justify-content: center; } .search-clear-btn:hover { color: var(--ink); } /* ---------- карусель категорий ---------- */ .categories-wrap { display: flex; align-items: center; gap: 6px; padding: 0 12px 12px 20px; } .categories { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .categories::-webkit-scrollbar { display: none; } .category-chip { border: 1px solid var(--border); background: var(--white); color: var(--ink); border-radius: var(--r-pill); padding: 8px 16px; font-size: 13.5px; font-weight: 500; cursor: pointer; flex-shrink: 0; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .category-chip.active { background: var(--green); border-color: var(--green); color: var(--white); } .category-chip.promo-chip:not(.active) { border-color: var(--green-border); color: var(--green-dark); } .category-chip.reset { background: var(--danger); border-color: var(--danger); color: var(--white); } .category-chip.reset:hover { background: #a5311f; border-color: #a5311f; } /* Невыбранные чипы бренда/подраздела, пока в разделе стоит фильтр — по прямому запросу пользователя: видно, что раздел сейчас сужен и эти чипы сейчас скрывают часть товаров, но сами чипы остаются кликабельными (просто приглушены, не задизейблены). */ .category-chip.muted { opacity: 0.4; } .categories-expand-btn { flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--white); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; } .categories-expand-btn:hover { background: var(--photobg); } /* ---------- каталог: секции ---------- */ /* overflow-anchor:none — по репорту пользователя (2026-08-18, "скролл не работает, любая попытка спуска возвращает наверх"): каталог теперь строится порциями по кадру (см. site.js: processRenderQueue), новые разделы дописываются в конец, пока пользователь может уже листать — браузерная "scroll anchoring" (эвристика "не дай контенту вверху экрана сдвинуть текущий взгляд") в некоторых движках плохо ладит с контейнером, который часто меняет высоту, и может компенсировать резче, чем нужно. Отключаем эвристику для контейнера каталога — сами разделы не прыгают (id/высота готовых секций не меняются задним числом), терять там нечего. */ /* scroll-margin-top — по прямому запросу пользователя (2026-08-19): "когда что-то в поиске начинают вводить, страница сразу попадала в раздел с этими товарами" (см. site.js: searchInput input-обработчик, scrollIntoView на #catalog) — без этого прыжок к результатам заводил верх #catalog ПОД липкую шапку (тот же приём, что и у .category-section выше, var(--header-h) — реальная высота шапки). */ /* margin-top — по прямому запросу пользователя (2026-08-19): "раздел Неликвиды с остальными разделами тоже разедини визуально тем же отступом" — тот же 80px, что и у #zakup-section/#nelikvidy-section (см. .warehouse-section > h2:first-child выше), только здесь применён к ВСЕМУ #catalog (а не к одному id), потому что первый раздел внутри каталога (ABC/XYZ, Дерево или 1С — зависит от режима сортировки) рендерится динамически через JS, у него нет своего фиксированного id для точечного таргетинга. Итоговый зазор — те же 28 (margin-bottom .nelikvidy-section) + 80 (это) + 22 (padding-top первого .category-section внутри) = 130px, что и между остальными разделами. */ .catalog { padding: 4px 14px 20px; margin-top: 80px; overflow-anchor: none; scroll-margin-top: var(--header-h); } /* Самокритика от 2026-08-25 (по прямому репорту пользователя — заголовок "Цель — 10 млн" стоял впритык к шапке): padding-top здесь МОЛЧА проигрывал .analytics-section { padding: 0 16px; ... } ниже по файлу — тот же класс-специфичность (0,0,1,0), а .analytics-section объявлен позже, поэтому его padding-top:0 побеждал у ЛЮБОЙ секции с обоими классами разом (то есть у всех .analytics-section .category-section на странице) — просто это было незаметно у всех секций, кроме самой первой на странице, потому что у остальных 28px margin-bottom ПРЕДЫДУЩЕЙ секции визуально давал зазор вместо этого padding. section. — не косметика, реальный битый специфичность-tie-break, побеждает .analytics-section независимо от порядка объявления в файле. */ section.category-section { scroll-margin-top: var(--header-h); padding-top: 22px; } .category-title { font-size: 18px; font-weight: 700; margin: 0; color: var(--ink); } .category-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; } .promo-name-group { display: flex; align-items: center; gap: 6px; } /* Кнопка "Анализ" (см. site.js: createAnalysisButton) — заменяет прежнюю 🔗-ссылку на раздел, по прямому запросу пользователя (2026-08-24): та тут не нужна была вовсе. Текстовая пилюля, не иконка — сама функция (построить рекомендации по закупке) не считывается одним символом так же однозначно, как "скопировать ссылку". */ .category-analysis-btn { background: none; border: 1px solid var(--border); cursor: pointer; font-size: 12px; font-weight: 600; line-height: 1; padding: 5px 10px; border-radius: var(--r-pill); color: var(--green-dark); flex-shrink: 0; } .category-analysis-btn:hover { background: var(--green-bg); } .category-analysis-btn.active { background: var(--green); border-color: var(--green); color: var(--white); } .promo-banner .category-analysis-btn { border-color: var(--green-dark); } /* Панель результатов "Анализ" — вставляется сразу под заголовком/шапкой раздела (см. site.js: toggleAnalysisPanel). Зелёная полоса слева убрана по прямому запросу пользователя (2026-08-26, "не нравится это зелёное выделение слева… на всём сайте это выделение уберём") — обычная рамка карточки, как у .warehouse-panel/.abc-card, без акцентной полосы. */ .analysis-panel { margin: 10px 0 18px; padding: 14px 16px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(20, 20, 20, 0.05); } .analysis-panel-title { font-weight: 700; font-size: 14px; margin-bottom: 10px; } .analysis-mode-toggle { max-width: 280px; } /* Переключатель "По дате"/"По количеству" у "кто купил в этом месяце" (2026-08-27) — тот же .seg-toggle-row, что и везде, просто с отступом снизу перед таблицей. */ .demand-drilldown-sort { margin-bottom: 10px; } /* Шире на телефоне — по прямому запросу пользователя (2026-08-27): .analysis-panel (padding 16px) внутри .product-modal-body (padding 20px) в сумме отъедали 36px с каждой стороны у и без того тесной 4-колоночной таблицы (Клиент/Дата/Кол-во/Цена). Отрицательный margin возвращает часть этой ширины именно этой панели (не всем .analysis-panel — там, где такая ширина нужна) — "совсем капелька", не полный edge-to-edge, чтобы не выглядеть как отдельный слой поверх остального модального окна. Освободившееся место уходит на padding ячеек таблицы (col ниже), а не просто в пустоту. */ @media (max-width: 639px) { .demand-drilldown-panel { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; } .demand-drilldown-panel .purchase-table th, .demand-drilldown-panel .purchase-table td { padding-right: 12px; } } .analysis-bucket { margin-bottom: 16px; } .analysis-bucket:last-child { margin-bottom: 0; } .analysis-bucket h4 { font-size: 13px; font-weight: 600; margin: 0 0 6px; color: var(--gray); } /* Сноска-объяснение под заголовком корзины ("товара нет — теряем выручку" и т.п.) — generic .hint нигде до этого не был стилизован (см. .analytics- section p.hint выше, оно уже точнее для своего места), только здесь получает собственный отступ. */ .analysis-bucket-hint { margin: 0 0 8px; } .hint { font-size: 12px; color: var(--gray); } .category-section.promo .promo-banner { background: var(--green-bg); border: 1px solid var(--green-border); border-radius: var(--r-control); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-weight: 700; font-size: 15px; color: var(--green-dark); } .category-section.promo .promo-banner .promo-tag { font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; background: var(--green); color: var(--white); padding: 4px 10px; border-radius: var(--r-pill); } /* Вложенный список брендов внутри раздела дерева (см. site.js: buildParentSection) — свёрнут по умолчанию, разворачивается по клику на "Бренды". Сами кнопки — те же .category-chip/.category-chip.active, что и в верхней карусели разделов (по фидбэку пользователя: раньше были зеленоватыми даже невыбранные, должно быть бело/зелено один-в-один с основной линией разделов). */ .brand-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--green-dark); margin: 0 0 10px; user-select: none; } .brand-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; } .brand-row .category-chip .n { opacity: .65; font-size: 11.5px; } .brand-row .category-chip.active .n { opacity: .85; } /* Заголовок подраздела внутри раздела дерева — мельче .category-title, несколько подряд в одной секции (см. buildParentSection). Строка (текст + кнопка "скопировать ссылку", см. createCategoryLinkButton), не просто текст — та же ссылка на подраздел, что уже есть у основного раздела. */ .child-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: var(--gray); margin: 18px 0 10px; /* Прямой переход из "Все разделы" в конкретный подраздел (см. site.js: rebuildCategoriesOverlay) скроллит сюда напрямую — без этого заголовок подраздела оказывался под "прилипшей" шапкой. */ scroll-margin-top: var(--header-h); } .child-title span { text-transform: uppercase; letter-spacing: 0.02em; } .child-title:first-of-type { margin-top: 0; } .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 480px) { .grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 620px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } } @media (min-width: 900px) { .grid { grid-template-columns: repeat(5, 1fr); gap: 20px; } } .card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(20,20,20,0.03); } /* content-visibility: auto здесь стояло раньше (2026-08-18, попытка не лейаутить/красить карточки за экраном) — откачено в тот же день по репорту пользователя: "скролл не работает, любая попытка спуска возвращает наверх". Первая версия отката не помогла — репорт повторился и на следующий день (2026-08-19); настоящей причиной, судя по всему, было global scroll-behavior:smooth на html (убрано отдельно, см. начало файла) — оно делает гладким ЛЮБОЙ скролл, включая нативное колесо мыши, и на длинной странице быстрые тики колеса запускают гонку перекрывающихся smooth-анимаций, которая в части браузеров может сбрасывать скролл, а не просто быть медленной. content-visibility могло усугублять ту же гонку (плывущая интринсик-высота карточек во время активной анимации), поэтому обе правки оставлены рядом — но именно scroll-behavior видится основной причиной. Нагрузка на рендер и так снята на уровне JS (см. site.js: processRenderQueue/flushPendingRender — каталог строится порциями по кадру, а не одним блокирующим проходом). */ /* Карточка не в наличии — визуально задизейблена целиком, но остаётся кликабельной (раскрывает карточку товара, см. renderCard). Приглушаем фото (img/.no-photo) и весь .card-body (название/цену/задизейбленную кнопку "В корзину") по отдельности, не общим родителем. */ .card.out-of-stock .card-photo img, .card.out-of-stock .card-photo .no-photo, .card.out-of-stock .card-body { opacity: 0.55; } .card.promo-card { background: var(--green-bg); border-color: var(--green-border); } .card { cursor: pointer; } .card-photo { background: var(--photobg); aspect-ratio: 5 / 4; overflow: hidden; position: relative; } .card.promo-card .card-photo { background: #ddf0e4; } .card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-photo img.photo-contain { object-fit: contain; padding: 8px; } /* Стек бейджей в правом верхнем углу фото — "Акция"/"Срок до .../"Истёк срок" (для товара из папки истекающих/истёкших сроков 1С, см. product_taxonomy.expiry_badge) — общий flex-контейнер вместо каждого бейджа со своим absolute-позиционированием. */ .card-badges { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } /* Размер — как у остальных бейджей кабинета (.card-badge-stock/-cost ниже), не как на клиентском сайте (site/static/style.css держит их крупнее специально для клиента) — по прямому запросу пользователя (2026-08-22): "только в сервисе аналитики [сделай] меньше, таких же размеров как и остальные бейджи". */ .card-badge { background: var(--green); color: var(--white); border: none; border-radius: var(--r-pill); font-size: 10px; font-weight: 600; padding: 3px 7px; box-shadow: 0 1px 4px rgba(20,20,20,0.2); } .card-badge.expired { background: var(--danger); } /* Общий остаток на складах + стоимость остатка в себестоимости — верхний левый угол фото (в отличие от .card-badges справа), по прямому запросу пользователя: видно сразу в сетке, симметрично основным бейджам. Уменьшено до размера остальных плашек (маржа/ABC-XYZ) — по прямому запросу пользователя (2026-08-18), раньше .card-badge-stock была заметно крупнее их. */ .card-badges-left { position: absolute; top: 8px; left: 8px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .card-badge-stock, .card-badge-cost { background: rgba(20,20,20,0.72); color: var(--white); border-radius: var(--r-pill); font-size: 10px; font-weight: 600; padding: 3px 7px; box-shadow: 0 1px 4px rgba(20,20,20,0.2); } .no-photo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--lgray); font-size: 11px; line-height: 1.35; text-align: center; padding: 10px; } .product-modal-photo .no-photo { font-size: 13px; padding: 24px; } .card-body { padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .card-name { font-size: 13px; font-weight: 500; line-height: 1.35; min-height: 35px; } .card-article { font-size: 11px; color: var(--gray); } /* Сноска "почему может подойти" (рельса допродажи в личном кабинете, см. site/cabinet.py: cross_sell_items, поле "причина") — коротко и не должно раздувать карточку сильнее обычной: до 3 строк, дальше — многоточие. */ .card-reason { font-size: 11.5px; line-height: 1.4; color: var(--gray); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* В модалке места достаточно — сноска показывается целиком, без обрезки (в отличие от .card-reason на карточке в сетке). */ .pm-reason { font-size: 13px; line-height: 1.5; color: var(--gray); margin: 2px 0; } .stock-badge { font-size: 11px; color: var(--danger); font-weight: 600; } .card-price { font-size: 16px; font-weight: 700; color: var(--green); margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .price-old { font-size: 13px; font-weight: 400; color: var(--gray); text-decoration: line-through; } .price-current { font-size: inherit; font-weight: inherit; color: inherit; } /* Себестоимость + средний % маржи — отдельная строка ПОД отпускными ценами (flex-basis: 100% всегда переносит её на новую строку, даже если сами цены короткие и формально есть место рядом), с/с слева, % маржи справа на том же уровне, по прямому запросу пользователя (см. fillManagementPriceRow). */ .price-cost-row { flex-basis: 100%; display: flex; align-items: center; justify-content: space-between; } .price-cost { font-size: inherit; font-weight: inherit; color: var(--danger); } /* Плашка среднего % маржи — тот же шрифт, что у с/с слева (inherit от .card-price), заливка цветом по порогу (см. fillManagementPriceRow): >=20% зелёная, 15-19% жёлтая, <=14% красная. */ /* inline-block + text-align:center, НЕ inline-flex — по прямому репорту пользователя (2026-08-18, дважды): текст съезжал то по вертикали, то по горизонтали. flexbox плохо центрирует одинокий анонимный текстовый узел в некоторых версиях iOS Safari (именно та платформа, на которой смотрят Заур/Ильяс) — text-align на обычном inline-block не имеет этой проблемы. */ .price-margin { font-size: 12px; font-weight: 700; color: var(--white); border-radius: var(--r-pill); padding: 4px 9px 3px; display: inline-block; text-align: center; min-width: 34px; line-height: 1; } .price-margin.margin-good { background: var(--green); } .price-margin.margin-mid { background: var(--warning); } .price-margin.margin-bad { background: var(--danger); } /* Двойная плашка ABC(по марже)/XYZ в правом верхнем углу фото (тот же угол, что и "Акция"/"Срок до", см. card-badges) — по прямому запросу пользователя (2026-08-18): видно классификацию товара сразу в сетке, без раскрытия карточки. Каждая плашка закрашена цветом своей буквы (A/X — зелёный, B/Y — жёлтый, C/Z — красный, те же уровни, что и у %маржи выше), остальные буквы алфавита показаны тут же, приглушённо, для контекста. */ .card-badge-classify { display: flex; gap: 3px; } .classify-pill { display: flex; gap: 3px; align-items: center; border-radius: var(--r-pill); padding: 3px 6px; box-shadow: 0 1px 4px rgba(20,20,20,0.2); } .classify-pill.margin-good { background: var(--green); } .classify-pill.margin-mid { background: var(--warning); } .classify-pill.margin-bad { background: var(--danger); } .classify-pill.margin-loss { background: var(--loss); } .classify-letter { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.55); line-height: 1; } .classify-letter.active { color: var(--white); font-weight: 800; } /* Крупное число + подпись — по прямому запросу пользователя (2026-08-19, "сделай информацию о количестве на складах более заметной, но с соблюдением правил UX/UI"): раньше вся строка ("На складах: X шт · Центральный Y, Хасавюрт Z · В себестоимости: N ₽") шла одним мелким серым текстом (12.5px) — терялась рядом с ценой (16px, жирная, зелёная). Само число теперь того же масштаба, что и .stock-big в "Аналитике склада" (тот же визуальный язык на карточке), детали — мельче, чтобы не спорить с ним за внимание. Нейтральный цвет (--ink, не зелёный/красный) — это не "хорошо" и не "плохо", просто важная цифра. */ .pm-stock-total { margin: 2px 0 10px; } /* На карточке в сетке кнопка "В корзину" и степпер количества никогда не показываются одновременно: до добавления — только кнопка на всю ширину, после клика она заменяется степпером (тоже на всю ширину, по центру) — поэтому теснота больше не проблема и степпер может быть крупным. */ .card-controls { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; } /* ---------- лестница цен по объёму (опт от коробки, только у товаров с item.лестница_цен — см. src/tier_pricing.py) ---------- По фидбэку пользователя первая версия (рамка на каждой строке) выглядела тяжело и спорила сама с собой за внимание — теперь рамка/цвет только у ОДНОЙ активной строки, остальные различаются едва заметным разделителем внутри общей карточки, как в обычных списках выбора (тарифы, доставка), а не набором одинаковых кнопок. */ .pm-tiers-label { font-size: 12px; font-weight: 600; color: var(--gray); margin: 2px 0 8px; text-transform: uppercase; letter-spacing: 0.03em; } .pm-tiers-wrap { margin: 4px 0 10px; } .pm-tiers { display: flex; flex-direction: column; /* --r-card (20px), не --r-control (12px) — та же логика, что и у самих карточек товара: широкому контейнеру нужен радиус покрупнее, иначе на ширине во всю модалку 12px читается почти незаметной вмятиной, а не тем же скруглением, что у компактных кнопок под ним (фидбэк пользователя, скриншот — рамка лестницы выглядела "более квадратной", хотя абсолютное значение совпадало с кнопками степпера). */ border-radius: var(--r-card); overflow: hidden; background: var(--photobg); } .pm-tier-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; border: none; border-bottom: 1px solid rgba(20, 20, 20, 0.07); background: transparent; padding: 12px 14px; font-family: inherit; transition: background 0.15s ease; } .pm-tier-row:last-child { border-bottom: none; } .pm-tier-row:hover { background: rgba(26, 162, 96, 0.07); } .pm-tier-row.active { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--green); } /* Инсет-тень активной строки рисуется по СОБСТВЕННЫМ скруглениям строки — у обычной строки их нет (0), поэтому первая/последняя строка (там, где видна и рамка контейнера .pm-tiers) должны сами повторить его радиус, иначе подсветка активной строки там выглядит квадратной на фоне скруглённой карточки вокруг (фидбэк пользователя, скриншот). */ .pm-tier-row:first-child { border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card); } .pm-tier-row:last-child { border-bottom-left-radius: var(--r-card); border-bottom-right-radius: var(--r-card); } .pm-tier-radio { position: relative; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box; border: 2px solid var(--lgray); transition: border-color 0.15s ease; } .pm-tier-row.active .pm-tier-radio { border-color: var(--green); } /* Точка — абсолютным позиционированием от центра родителя (top/left 50% + translate(-50%,-50%)), а не flex-центрированием — так её позиция не зависит от округления при делении контейнера на нечётные значения, гарантированно ровно посередине независимо от размера точки. */ .pm-tier-radio-dot { position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--green); transform: translate(-50%, -50%) scale(0); transition: transform 0.15s ease; } .pm-tier-row.active .pm-tier-radio-dot { transform: translate(-50%, -50%) scale(1); } .pm-tier-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pm-tier-label { font-size: 13.5px; color: var(--ink); line-height: 1.3; } .pm-tier-row.active .pm-tier-label { font-weight: 600; } .pm-tier-price { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; flex-shrink: 0; } .pm-tier-row.active .pm-tier-price { color: var(--green-dark); } /* ---------- степпер количества (- / число / +) ---------- */ .qty-stepper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .qty-btn { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--r-control); background: var(--white); color: var(--ink); font-size: 18px; line-height: 1; font-weight: 600; cursor: pointer; padding: 0; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .qty-btn:hover { background: var(--green); border-color: var(--green); color: var(--white); } .qty-btn:disabled { color: var(--lgray); cursor: not-allowed; background: var(--white); border-color: var(--border); } .qty-input { /* Оптовые количества — хватает места на 4 цифры (до "9999"), не обрезается. */ width: 46px; border: none; background: none; text-align: center; font-family: inherit; font-size: 16px; font-weight: 600; padding: 0; -moz-appearance: textfield; } .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .add-btn { flex: 1; border: none; background: var(--photobg); color: var(--ink); /* Крупнее, чем общий --r-control (12px) — по фидбэку пользователя кнопки "В корзину"/"Показать альтернативы" должны скругляться заметнее, ближе к тому, как выглядят кнопки в iOS. Меняем радиус только у этого класса, не сам --r-control — та же переменная используется у степпера количества, поиска, промо-баннера, и трогать их не просили. Настоящий "сквирк" (непрерывная iOS-кривая, не дуга окружности) в CSS border-radius нельзя — свойство corner-shape для него пока не поддерживается браузерами достаточно широко; увеличенный радиус — обычная веб-аппроксимация того же ощущения. */ border-radius: 16px; padding: 9px 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .add-btn:hover, .add-btn:active, .add-btn.in-cart { background: var(--green); color: var(--white); } .add-btn:disabled { background: var(--photobg); color: var(--lgray); cursor: not-allowed; } /* На акционном (зелёном) фоне серая кнопка теряется — делаем её белой. */ .promo-card .add-btn { background: var(--white); } .promo-card .add-btn:hover, .promo-card .add-btn:active, .promo-card .add-btn.in-cart { background: var(--green); color: var(--white); } .promo-card .add-btn:disabled { background: var(--white); color: var(--lgray); } /* ---------- нет в наличии: сворачивание ---------- */ .oos-wrap { margin-top: 16px; } .oos-label { font-size: 12px; font-weight: 600; color: var(--gray); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.03em; } /* "Нет в наличии" (хорошо продающиеся товары, дозаказ >= 100 шт) — первым подразделом, ВСЕГДА видимым, без сворачивания (см. site.js: buildItemsBlock). По прямому репорту пользователя (2026-08-22, скриншот: секция визуально "перетекала" в обычную сетку без границы) — явный отступ и разделительная линия снизу, чтобы граница с товарами в наличии была однозначной, не угадывалась по одному только заголовку. */ .oos-wrap-visible { margin-top: 0; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--lgray); } /* 90px — то же самое, что и FADE_HEIGHT в site.js (buildItemsBlock): запасное значение на случай, если JS ещё не успел проверить, есть ли вторая строка (там же переопределяет max-height инлайн-стилем — или этим же 90px, или "none", если строка всего одна). margin-top — по прямому репорту пользователя (2026-08-25, скриншот): первая (всегда видимая) строка "нет в наличии" примыкала вплотную к этому свёрнутому блоку без отступа — site.js просто добавляет два .grid один за другим в один wrap (buildItemsBlock), между гридами нет зазора, только gap ВНУТРИ каждого. Особенно заметно у товара без фото (длинный текст-заглушка "Упс! Фотограф не поспевает…" в .no-photo визуально "прилипал" прямо к следующей строке). Значения — те же, что и у .grid gap на тех же брейкпоинтах, чтобы вертикальный ритм совпадал с горизонтальным зазором внутри самой сетки. */ .oos-collapse { position: relative; overflow: hidden; max-height: 90px; margin-top: 12px; } @media (min-width: 620px) { .oos-collapse { margin-top: 16px; } } @media (min-width: 900px) { .oos-collapse { margin-top: 20px; } } .oos-collapse.expanded { max-height: none; } .oos-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, rgba(250,250,250,0), var(--bg)); pointer-events: none; } .oos-collapse.expanded .oos-fade { display: none; } .oos-toggle { margin-top: 10px; background: none; border: none; color: var(--green); font-weight: 600; font-size: 13px; cursor: pointer; padding: 0; } .empty-state { text-align: center; color: var(--gray); padding: 60px 20px; } /* Подпись над ослабленной выдачей поиска: точных совпадений не нашлось, показываем ближайшее, но честно предупреждаем. */ .search-partial-note { margin: 4px 2px 10px; color: var(--gray); font-size: 14px; } /* ---------- оверлей "все разделы" ---------- */ .categories-overlay { position: fixed; inset: 0; z-index: var(--z-overlay-backdrop); background: rgba(0,0,0,0.4); display: flex; align-items: flex-end; } .categories-overlay-panel { background: var(--white); width: 100%; max-height: 75vh; border-radius: 20px 20px 0 0; padding: 16px 20px 24px; display: flex; flex-direction: column; margin: 0 auto; } @media (min-width: 640px) { .categories-overlay { align-items: center; justify-content: center; } .categories-overlay-panel { max-width: 420px; border-radius: 20px; max-height: 70vh; } } .categories-overlay-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .categories-overlay-header h2 { font-size: 16px; margin: 0; } /* Переключатель "старая/расширенная сортировка" — только в личном кабинете клиента (см. site.js: setupSortModeToggle). */ .seg-toggle-row { display: flex; background: var(--photobg); border-radius: var(--r-pill); padding: 3px; gap: 2px; margin-bottom: 14px; } .seg-toggle-btn { flex: 1; border: none; background: none; color: var(--gray); padding: 8px 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .seg-toggle-btn.active { background: var(--green); color: var(--white); } .categories-overlay-list { overflow-y: auto; display: flex; flex-direction: column; } /* Аккордеон дерева разделов внутри оверлея "Все разделы": раздел -> подразделы (+ вложенный список брендов). Раскрытие — справа в каждой строке (по фидбэку пользователя: на телефоне удобнее нажимать правой частью экрана), разделы раскрыты сразу, свёрнуты только "Бренды". */ .overlay-parent-head { width: 100%; border: none; background: none; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 12px 4px; font-size: 14.5px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--border); } .overlay-parent-head .pname { flex: 1; } .overlay-parent-head .right { display: flex; align-items: center; gap: 9px; flex-shrink: 0; } .overlay-parent-head .cnt { font-size: 12px; color: var(--gray); font-weight: 500; } .overlay-parent-head .chev { font-size: 11px; color: var(--gray); width: 12px; text-align: center; flex-shrink: 0; } /* "Все бренды" — заголовок группы там div, не button (нечего сворачивать). */ .overlay-parent-head:not(button) { cursor: default; } .overlay-children { padding: 2px 4px 8px 14px; display: flex; flex-direction: column; } .overlay-child { width: 100%; border: none; background: none; text-align: left; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 9px 8px; font-size: 13.5px; color: var(--ink); border-radius: var(--r-control); } .overlay-child:hover { background: var(--photobg); } .overlay-child .cnt { color: var(--gray); font-size: 12px; } .overlay-brand-block { margin-bottom: 4px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); } .overlay-brand-toggle { width: 100%; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 4px; font-size: 12.5px; font-weight: 700; color: var(--green-dark); } .overlay-brand-toggle .chev { font-size: 10px; } .overlay-brand-list { display: flex; flex-direction: column; padding-left: 6px; border-left: 2px solid var(--green-border); margin-left: 2px; } .overlay-brand .cnt { color: var(--green-dark); } /* ---------- товар: полная карточка ---------- */ .product-modal { position: fixed; inset: 0; z-index: var(--z-overlay-panel); background: rgba(0,0,0,0.4); display: flex; align-items: flex-end; } .product-modal-panel { background: var(--white); width: 100%; /* vh в мобильном Safari считается от МАКСИМАЛЬНОЙ высоты экрана (когда адресная строка скрыта) — если она видна (как обычно сразу после перехода по ссылке), реальная видимая область меньше, и панель на 90vh вылезала выше неё, утаскивая крестик, который сидел в её верхней части, за пределы экрана (фидбэк пользователя — "крестик где-то там под доменом"). svh — высота именно видимой (small) области, без этого рассинхрона; там, где svh не поддерживается, используется vh (строка выше, обычный CSS-фоллбек — на новых экран не хуже, на старых работает как раньше). Сам крестик теперь всё равно не зависит от высоты панели (см. ниже, position: fixed), но и остальной контент не должен вылезать за реально видимую область. */ max-height: 90vh; max-height: 90svh; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; overflow: hidden; position: relative; } /* Прокручивается ТОЛЬКО эта внутренняя обёртка, не вся панель — крестик (product-modal-close) сидит вне неё, в самой панели, поэтому при скролле длинного списка альтернатив остаётся на месте, а не уезжает с контентом и не пропадает из виду (было — см. историю правки). min-height: 0 обязателен: без него flex-элемент не сжимается до max-height родителя и вместо внутреннего скролла просто раздувает панель на весь контент. */ .product-modal-scroll { overflow-y: auto; flex: 1; min-height: 0; padding: 0 0 20px; } @media (min-width: 640px) { .product-modal { align-items: center; justify-content: center; } .product-modal-panel { max-width: 480px; border-radius: 20px; max-height: 85vh; max-height: 85svh; } } /* На настоящем десктопе (не просто "шире телефона") — по прямому запросу пользователя (2026-08-27): "удобство десктопной версии в том, что мы на одном экране видим сразу много... сейчас карточки открываются в размере смартфона" — карточка товара/клиента должна использовать реальную ширину экрана, "как большой планшет повёрнутый горизонтально", не оставаться зауженной до 480px. 900px — тот же desktop-порог, что уже используется по всему сайту (.fab-stack/.analytics-section h2 и т.д.), не новое произвольное число. min(1100px, 92vw) — не упирается в самый край окна на очень широких мониторах, но и не вылезает за реальную ширину на более скромном десктопном разрешении. */ @media (min-width: 900px) { .product-modal-panel { max-width: min(1100px, 92vw); } /* Фото — по прямому репорту пользователя (2026-08-27, "сейчас плохо выглядит" — было edge-to-edge на всю ширину 480px, затем просто отцентрировано на всю ширину 1100px): теперь заметно меньше, с отступами от краёв, скруглёнными углами, прижато к левому краю (не растянуто и не по центру) — верхний левый угол карточки, как и просили. Не float — .product-modal-body ниже сам flex-контейнер (flex-direction:column), CSS-float с ним не сработал бы как "обтекание текстом" (flex-контейнер как единый BFC-блок целиком уезжает в сторону от float на всю свою высоту, а не только заголовок — попробовано, отклонено): проще и надёжнее остаться в обычном блочном потоке, просто уменьшить и подвинуть само фото. */ .product-modal-photo { width: 320px; max-width: 320px; margin: 20px 0 4px 20px; border-radius: 16px; overflow: hidden; } } /* .icon-btn.product-modal-close (два класса), не просто .product-modal-close (один класс) — общий .icon-btn (используется ещё у крестиков корзины и списка категорий) задаёт background: none той же специфичностью, что и один класс, и, стоя ниже в файле, побеждал бы: кнопка была фактически прозрачной (репорт пользователя — "не прозрачной, а полностью белой"). */ .icon-btn.product-modal-close { /* absolute внутри .product-modal-panel (у неё уже position: relative), не fixed относительно экрана — раньше было fixed именно потому, что панель на 90vh могла вылезать выше реально видимой области (мобильный Safari с показанной адресной строкой) и утаскивала кнопку-соседа за собой; тот баг закрыт переходом на svh у max-height панели (см. ниже), после чего fixed стал не нужен и создал НОВУЮ проблему — панель снизу (align-items: flex-end) может начинаться намного ниже верха экрана (когда под карточкой не видно строки браузера, свободного места сверху больше), а кнопка, зафиксированная у самого верха экрана, оказывалась далеко от самой карточки (фидбэк пользователя). Кнопка — сосед .product-modal-scroll, не её потомок, поэтому при скролле длинного списка альтернатив всё равно остаётся на месте, а не уезжает с контентом. */ position: absolute; top: 12px; left: 12px; z-index: calc(var(--z-overlay-panel) + 1); background: var(--white); color: var(--ink); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 6px rgba(0,0,0,0.15); font-size: 18px; } .pm-close-glyph-desktop { display: none; } /* Кнопка "наверх карточки клиента" — тот же absolute-приём, что и .icon-btn.product-modal-close (сосед .product-modal-scroll, не потомок: остаётся на месте при скролле длинной карточки), нижний правый угол панели, появляется только после прокрутки вниз (см. site.js). Визуально — ровно тот же дизайн, что и #scroll-top-toggle на основной странице (44px круг/белый фон/тень/SVG-стрелка) — по прямому запросу пользователя (2026-08-26, "в том же дизайне, что и на основной странице, а не в новом дизайне") — не общий класс (у .scroll-top-toggle своя логика позиции через .fab-stack/position:fixed, конфликтующая с position:absolute внутри модалки), просто те же самые декларации. */ .client-modal-scroll-top { position: absolute; bottom: 16px; right: 16px; z-index: calc(var(--z-overlay-panel) + 1); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; box-shadow: 0 4px 16px rgba(20,20,20,0.2); transition: background 0.15s ease; } .client-modal-scroll-top:hover { background: var(--photobg); } @media (min-width: 640px) { /* На десктопе панель — центрированный диалог, а не полноэкранный лист; крестик вместо стрелочки — на десктопе слева уже нет смысла в "назад", это обычный диалог, который принято закрывать крестиком в правом верхнем углу. */ .icon-btn.product-modal-close { left: auto; right: 12px; } .pm-close-glyph-mobile { display: none; } .pm-close-glyph-desktop { display: block; } } .product-modal-photo { background: var(--photobg); aspect-ratio: 4 / 3; overflow: hidden; position: relative; } .product-modal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-modal-photo img.photo-contain { object-fit: contain; padding: 16px; } .product-modal-body { padding: 18px 20px 4px; display: flex; flex-direction: column; gap: 8px; } .product-modal-body h2 { font-size: 18px; margin: 0; line-height: 1.3; } /* ---------- описание товара в модалке (только сокращённый кабинет) ---------- Копия .product-modal-desc из site/static/style.css. Разделы (абзац / характеристики / состав / дисклеймер) рисуются только при наличии данных — см. site.js:renderProductDesc. */ .product-modal-desc { font-size: 13.5px; color: var(--gray); line-height: 1.55; margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 14px; } .product-modal-desc .pm-desc-lead { margin: 0; } .product-modal-desc .pm-desc-specs { margin: 0; padding-top: 14px; border-top: 1px solid var(--border); /* Не max-content: длинный ключ не переносился и сетка вылезала за экран (скриншот 2026-09-14, синхронно с site/). */ display: grid; grid-template-columns: fit-content(45%) minmax(0, 1fr); gap: 8px 16px; } .product-modal-desc .pm-desc-specs dt, .product-modal-desc .pm-desc-specs dd { min-width: 0; overflow-wrap: break-word; word-break: break-word; } .product-modal-desc .pm-desc-specs dt { color: var(--ink); font-weight: 400; } .product-modal-desc .pm-desc-specs dt::after { content: ":"; } .product-modal-desc .pm-desc-specs dd { margin: 0; } .product-modal-desc .pm-desc-sostav { margin: 0; padding-top: 14px; border-top: 1px solid var(--border); } .product-modal-desc .pm-desc-sostav b { color: var(--ink); font-weight: 400; } .product-modal-desc .pm-desc-notes { margin: 0; padding: 14px 16px; display: flex; align-items: center; gap: 13px; background: #faf4ea; border-radius: 14px; } .product-modal-desc .pm-desc-notes-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #cfa16f; color: #b47636; font-size: 12px; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; } .product-modal-desc .pm-desc-notes-list { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .product-modal-desc .pm-desc-notes-list p { margin: 0; font-size: 12px; color: #7a5326; line-height: 1.5; } .product-modal-desc .pm-desc-disc { margin: 2px 0 0; font-size: 11.5px; color: var(--lgray); line-height: 1.45; } /* ---------- товар с характеристиками (например, диффузоры разных ароматов) — лента вариантов под главным фото ---------- */ .pm-variants { display: flex; gap: 8px; overflow-x: auto; padding: 10px 20px; -webkit-overflow-scrolling: touch; background: var(--white); } .pm-variant-chip { flex: 0 0 auto; width: 60px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; border: none; background: none; padding: 0; } .pm-variant-thumb { width: 52px; height: 52px; border-radius: var(--r-control); overflow: hidden; border: 2px solid transparent; box-sizing: border-box; display: flex; align-items: center; justify-content: center; background: var(--photobg); color: var(--lgray); font-size: 18px; } .pm-variant-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pm-variant-chip.active .pm-variant-thumb { border-color: var(--green); } .pm-variant-chip.out-of-stock .pm-variant-thumb { opacity: 0.45; } .pm-variant-name { font-size: 10px; text-align: center; line-height: 1.2; color: var(--gray); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pm-variant-chip.active .pm-variant-name { color: var(--green-dark); font-weight: 600; } /* Чип "Все варианты" (агрегат по товару в целом) — эмодзи вместо фото, лёгкий акцентный фон, чтобы визуально не путался с ароматами (по прямому запросу пользователя 2026-08-20). */ .pm-variant-chip-all .pm-variant-thumb { background: var(--green-bg); font-size: 22px; } .pm-variant-chip-all.active .pm-variant-thumb { border-color: var(--green); } .icon-btn { border: none; background: none; font-size: 22px; cursor: pointer; color: var(--gray); } /* .btn — общая кнопка, используется и на