, соседнем с полосой; где :has() нет, полоса остаётся столбиком. Нижняя граница 360 px — от контента: ряду нужно 351 px (обещание 125 + зазор 12 + кнопка 186 + поля 28). Уже номер упирался в край экрана и на 320 px терял последнюю цифру — там остаётся столбик. */ @media (min-width: 360px) and (max-width: 439px) { .xf-mcall:has(~ main .xf-pdp) { flex-direction: row; align-items: center; gap: 12px; padding: 8px 14px; } .xf-mcall:has(~ main .xf-pdp) .xf-mcall__promise { flex: 0 0 auto; max-width: calc(20px + 8.4em); /* 20px = иконка 14 + зазор 6 */ } .xf-mcall:has(~ main .xf-pdp) .xf-mcall__btn { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { /* Сдвиг кнопки гасит --xf-motion в самом правиле (#330), здесь остаётся только транзишен — токен его не трогает. */ .xf-mcall__btn { transition: none; } } /* Main-row → 2 строки: [burger][logo][actions] + [search full-width] */ .xf-header__row--main { height: auto; min-height: 56px; padding: 10px 14px; gap: 8px; flex-wrap: wrap; row-gap: 10px; } .xf-burger-btn { display: inline-flex; } /* Лого компактнее — 28×22 SVG + text 22px */ .xf-logo { gap: 3px; margin-right: auto; } .xf-logo > svg { width: 28px; height: 22px; margin-right: -7px; } .xf-logo__dash { width: 8px; height: 3px; } .xf-logo__text { font-size: 22px; letter-spacing: -0.4px; transform: translateY(0); } /* Configurator pill + account pill + user-btn + divider — переезжают в drawer */ .xf-configurator-pill { display: none; } .xf-header__actions .xf-account-pill, .xf-header__actions > .xf-iconbtn[href$="auth/"], .xf-header__actions > .xf-iconbtn[href$="personal/"] { display: none; } .xf-header__actions .xf-divider { display: none; } .xf-header__actions { gap: 2px; margin-left: 0; } /* Cart → compact icon-only (без label), с count'ом рядом */ .xf-cart-btn { padding: 9px 11px; gap: 6px; font-size: 12px; } .xf-cart-btn > span:not(.xf-cart-btn__count) { display: none; } .xf-cart-btn__count { min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 5px; } /* Search → full-width отдельный ряд под верхней линией */ .xf-search { order: 10; flex: 1 0 100%; max-width: 100%; } /* [#830] 16 px, не 14.5: Safari на iPhone увеличивает страницу, когда фокус попадает в поле мельче 16 px, и страница остаётся увеличенной. Высоту держит height (44; на низком экране 40, #821 ниже), поэтому поля по вертикали — 0: текст браузер ставит по центру поля сам, и на 40 px строка 16 px не обрезается. */ .xf-search input { font-size: 16px; padding: 0 14px 0 40px; height: 44px; box-sizing: border-box; } /* [#821] Низкий телефон: шапка и полоса звонка плотнее. На iPhone SE в Safari (375×553) и на 320×568 до фото карточки уходило 213–241 px, и длинное название (4–5 строк) пряталось под липкую полосу «цена + В корзину»: фото уже сжато до минимума (#722), место берём у шапки. Что ужимается: поля и зазор рядов шапки (10 → 4/6 px), поля полосы звонка (10/8 → 4 px), высота поиска и кнопки звонка (44 → 40 px — обе во всю ширину экрана, по высоте палец не промахивается; исключение записано в DESIGN.md, Navigation). Величина плавно зависит от высоты экрана: --xf-low = 0 на экранах ниже 620 px, 60 — от 680 px (там всё как было). Через svh, а не @media (max-height): svh — высота экрана с показанными панелями браузера, она не меняется при прокрутке, и шапка не прыгает, когда Safari прячет панели (так же сделана высота фото карточки, product.css #704). Где svh нет — всё как было. Крошки карточки ужимаются тем же счётом в product.css. */ @supports (height: 100svh) { .xf-header, .xf-mcall { --xf-low: clamp(0px, calc(100svh - 620px), 60px); } .xf-header__row--main { padding-top: calc(4px + var(--xf-low) / 10); padding-bottom: calc(4px + var(--xf-low) / 10); row-gap: calc(6px + var(--xf-low) / 15); } .xf-search input { height: calc(40px + var(--xf-low) / 15); } .xf-mcall { padding-top: calc(4px + var(--xf-low) / 10); padding-bottom: calc(4px + var(--xf-low) / 10); } .xf-mcall__btn { min-height: calc(40px + var(--xf-low) / 15); } /* Полоса в один ряд (от 440 px; на карточке — от 360, #704): поля 8 → 4. */ @media (min-width: 440px) { .xf-mcall { padding-top: calc(4px + var(--xf-low) / 15); padding-bottom: calc(4px + var(--xf-low) / 15); } } @media (min-width: 360px) and (max-width: 439px) { .xf-mcall:has(~ main .xf-pdp) { padding-top: calc(4px + var(--xf-low) / 15); padding-bottom: calc(4px + var(--xf-low) / 15); } } } /* [#821] Карточка на самом узком экране (< 360 px): номер рядом с обещанием не помещается (#704), и полоса стояла столбиком — обещание отдельной строкой над кнопкой (+24 px). Здесь обещание убираем, кнопка звонка остаётся во всю ширину, как на главной (--solo, #313). Цена: на 320 px срока доставки на первом экране карточки нет — строка срока у карточки ниже «В корзину» (и только у товаров в наличии). Иначе последняя строка длинного названия уходила под полосу — название важнее (#722). */ @media (max-width: 359px) { .xf-mcall:has(~ main .xf-pdp) .xf-mcall__promise { display: none; } } /* Drawer visible container (closed by default via translateX) */ .xf-drawer { display: block; position: fixed; inset: 0; z-index: 100; pointer-events: none; } /* override native [hidden] так, чтобы transition мог работать — visibility управляется classList + pointer-events ниже */ .xf-drawer[hidden] { display: block; } .xf-drawer__overlay { position: absolute; inset: 0; background: oklch(0 0 0 / 0.5); opacity: 0; transition: opacity .25s; pointer-events: none; } .xf-drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: 85vw; max-width: 360px; background: var(--bg); box-shadow: var(--shadow-card); display: flex; flex-direction: column; transform: translateX(-105%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); pointer-events: auto; will-change: transform; } .xf-drawer.is-open { pointer-events: auto; } .xf-drawer.is-open .xf-drawer__overlay { opacity: 1; pointer-events: auto; } .xf-drawer.is-open .xf-drawer__panel { transform: translateX(0); } /* Панель спрятана самим transform (без opacity) — множитель показал бы её насовсем; по The Motion-Multiplier Rule таким — точечный transition: none. */ @media (prefers-reduced-motion: reduce) { .xf-drawer__panel { transition: none; } } .xf-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); flex: 0 0 auto; } .xf-drawer__logo { display: inline-flex; align-items: center; gap: 3px; color: var(--text); line-height: 1; } .xf-drawer__logo > svg { margin-right: -7px; } .xf-drawer__logo-dash { width: 8px; height: 3px; border-radius: 2px; background: currentColor; flex: 0 0 auto; } .xf-drawer__logo-text { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; } .xf-drawer__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--surface-2); border: 0; border-radius: 10px; color: var(--text-2); cursor: pointer; transition: background .15s, color .15s; } @media (hover: hover) { .xf-drawer__close:hover { background: var(--surface-3); color: var(--text); } } .xf-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 16px 14px 24px; display: flex; flex-direction: column; gap: 18px; } /* Баннер cookie лежит поверх шторки (z-index 9999) и закрывал её низ — а там тумблер темы, единственный вход в тёмную (#707). Даём докрутить содержимое выше баннера; высоту меряет app.js (--xf-cookie-h). */ body.xf-cookie-up .xf-drawer__body { padding-bottom: calc(24px + var(--xf-cookie-h, 120px)); } /* Primary CTA — Конфигуратор ПК (единственный в drawer'е) */ .xf-drawer__cta { display: inline-flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; /* #280: лиловый градиент (accent → hue 320 orchid) снят по решению владельца. Плоский accent-dim — токен сам переключает тему, поэтому отдельное dark-правило для rest-состояния больше не нужно. */ background: var(--accent-dim); border: 1px solid var(--accent-line); color: var(--text); font-size: 14px; font-weight: 500; } .xf-drawer__cta.is-active { background: oklch(0.55 0.23 var(--accent-h) / 0.22); } /* Тёмная: подложка акцента темы (#857; был литерал на индиго 268 светлой). */ html[data-theme="dark"] .xf-drawer__cta.is-active { background: var(--accent-dim); } .xf-drawer__cta-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: #fff; box-shadow: 0 0 14px -3px oklch(0.68 0.22 var(--accent-h) / 0.60); flex: 0 0 auto; } /* Тёмная: иконка-плашка без ореола — свет только у того, что излучает (DESIGN.md, The Night-Sign Rule); ореол был ещё и индиго 268 (#857). */ html[data-theme="dark"] .xf-drawer__cta-icon { box-shadow: none; } /* Group: title + stacked rows */ .xf-drawer__group { display: flex; flex-direction: column; gap: 2px; } .xf-drawer__group-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-3); font-family: var(--font-mono); padding: 0 4px 8px; } /* Nav / row — one-line clickable list items */ .xf-drawer__nav { display: flex; flex-direction: column; gap: 2px; } .xf-drawer__nav-item, .xf-drawer__row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: var(--text); font-size: 14px; transition: background .12s, color .12s; } .xf-drawer__nav-item { color: var(--text-2); } @media (hover: hover) { .xf-drawer__nav-item:hover, .xf-drawer__row:hover { background: var(--surface); color: var(--text); } } .xf-drawer__nav-icon, .xf-drawer__row-icon { flex: 0 0 22px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); } .xf-drawer__nav-label, .xf-drawer__row-label { flex: 1 1 auto; } .xf-drawer__nav-arrow { flex: 0 0 auto; color: var(--text-3); } .xf-drawer__nav-item--all { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 14px; } .xf-drawer__nav-item--all .xf-drawer__nav-icon { color: var(--accent-2); } .xf-drawer__nav-item--all .xf-drawer__nav-label { font-weight: 500; color: var(--text); } .xf-drawer__row-icon--brand { background: var(--accent); color: #fff; border-radius: 7px; box-shadow: 0 0 10px -2px oklch(0.68 0.22 var(--accent-h) / 0.55); } /* Тёмная: без ореола, как иконка «Конфигуратор ПК» выше (#857). */ html[data-theme="dark"] .xf-drawer__row-icon--brand { box-shadow: none; } /* Телефон в меню — контакт, не data → Onest (см. #91). Суффикс «--mono» в имени класса исторический; переименование — отдельная уборка. */ .xf-drawer__row-label--mono { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: -0.2px; } .xf-drawer__row-count { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; font-family: var(--font-mono); } .xf-drawer__row-count--wish { background: #e11d48; } /* [#646] Подпись под названием строки — срок у «Доставки» (раньше отдельной строкой-подсказкой .xf-drawer__info без ссылки). */ .xf-drawer__row-sub { display: block; margin-top: 1px; color: var(--text-3); font-size: 12.5px; } /* Theme toggle row — pinned к нижней границе body (внутри scroll-блока) */ .xf-drawer__theme { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 0; border-top: 1px solid var(--line-soft); margin-top: 6px; } .xf-drawer__theme-label { font-size: 14px; color: var(--text-2); } } /* Тёмная тема: кнопка звонка и «Конфигуратор ПК» в шторке — та же тихая рамка, что у пилюли конфигуратора в шапке: без accent-окантовки и заливки. Вне медиа-блока, как и было в скине; 0-2-1 выше :active звонка (0-2-0). Активную ячейку шторки (.is-active, 0-3-1, выше в блоке) не перебивает. */ html[data-theme="dark"] .xf-mcall__btn, html[data-theme="dark"] .xf-drawer__cta { border: 1px solid var(--line); background: transparent; } /* Body scroll-lock when drawer is open */ body.xf-drawer-open { overflow: hidden; } /* End */ /* Start:/local/templates/xcore_front/css/footer.css?17926538796313*/ /* OWNS: .xf-footer-* */ .xf-footer { /* M11.2-fix: 80→32. С M11.2 нижняя секция (brands marquee) сама дала 80px top breath — старые 80px footer-margin сверху давали суммарно ~128px gap. Снижаем до 32, .middle padding-bottom и section padding добивают суммарный gap до ~80px. */ margin-top: 32px; border-top: 1px solid var(--line-soft); background: var(--bg-2); } .xf-footer__inner { max-width: var(--container); margin: 0 auto; padding: 56px var(--container-pad) 32px; } .xf-footer__grid { display: grid; grid-template-columns: 1.4fr 1.2fr 1fr 1fr 1.4fr; gap: 40px; } @media (max-width: 1100px) { .xf-footer__grid { grid-template-columns: 1fr 1fr 1fr; } .xf-footer__about, .xf-footer__col--connect { grid-column: span 3; } } @media (max-width: 640px) { .xf-footer__grid { grid-template-columns: 1fr 1fr; } .xf-footer__about, .xf-footer__col--connect { grid-column: span 2; } } .xf-footer__about .xf-logo { gap: 4px; } .xf-footer__about .xf-logo > svg { margin-right: -8px; } .xf-footer__about .xf-logo__dash { width: 8px; height: 3.5px; } .xf-footer__about .xf-logo__text { font-size: 27px; transform: translateY(-1px); } .xf-footer__about p { color: var(--text-2); font-size: 13.5px; line-height: 1.6; margin: 16px 0 20px; max-width: 320px; } .xf-footer__col-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-2); font-family: var(--font-mono); margin-bottom: 16px; } .xf-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .xf-footer__col a { font-size: 13.5px; color: var(--text-2); transition: color .15s; } @media (hover: hover) { .xf-footer__col a:hover { color: var(--text); } } /* [#316] Нижняя плита подвала — Onest, не mono. Здесь нет данных: название юрлица, номер свидетельства в составе фразы, юридический адрес, «Политика обработки персональных данных», «Публичный договор», «Настройки cookie», подпись студии — это текст, который читают предложениями. Mono в шаблоне значит «перед тобой данные» (цена, SKU, таймстамп) — DESIGN.md, The Mono-as-Data Rule; набирая им нарратив, мы стирали этот сигнал в самом длинном куске копи на странице. Наверху колонок .xf-footer__col-title остаётся mono намеренно: это eyebrow-метка (11–12px, uppercase, трекинг), у правила явное исключение на single-tone метки. .xf-footer__contacts (телефон/почта) уже на Onest по #91 — контакт- аффорданс, а не данные; здесь ничего не меняется. */ .xf-footer__bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 14px; font-size: 12px; color: var(--text-2); } .xf-footer__legal { display: flex; flex-wrap: wrap; gap: 6px 18px; line-height: 1.5; } .xf-footer__bottom-links { display: flex; flex-wrap: wrap; gap: 6px 18px; } .xf-footer__bottom a { color: var(--text-2); transition: color .15s; } @media (hover: hover) { .xf-footer__bottom a:hover { color: var(--text); } } /* Подпись студии: прижата вправо в нижнем ряду (auto-margin), при wrap уходит в поток. Hover-акцент на имени — единственный индиго футера (One-Voice). */ .xf-footer__credit { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; } .xf-footer__credit-name { transition: color .15s; } .xf-footer__credit-arrow { display: inline-block; transition: transform .15s; } @media (hover: hover) { .xf-footer__credit:hover .xf-footer__credit-name { color: var(--accent); } /* Тёмная (#858): имя — фиолетом текста; --accent на фоне подвала — 4.0:1. */ html[data-theme="dark"] .xf-footer__credit:hover .xf-footer__credit-name { color: var(--accent-2); } } @media (hover: hover) and (prefers-reduced-motion: no-preference) { .xf-footer__credit:hover .xf-footer__credit-arrow { transform: translate(1px, -1px); } } /* Клиренс от чат-кружка (.xf-chat: fixed, right 24 + 56px круг → занимает 24–80px от правого края вьюпорта). Контейнер 1440 + пад 40 → до ~1520px вьюпорта правый край контента попадает под кружок; шире — центрирование само уводит контент из зоны. 52px = (80+12 зазор) − 40 пада. */ @media (min-width: 641px) and (max-width: 1559px) { .xf-footer__credit { margin-right: 52px; } } @media (max-width: 640px) { .xf-footer__credit { margin-left: 0; } } /* Кнопка отзыва согласия cookie — визуально неотличима от соседних ссылок-. */ .xf-footer__cookie-settings { appearance: none; border: 0; background: none; padding: 0; font: inherit; color: var(--text-2); cursor: pointer; transition: color .15s; } @media (hover: hover) { .xf-footer__cookie-settings:hover { color: var(--text); } } /* Селектор с .xf-footer__col чтобы перебить базовое .xf-footer__col ul. */ .xf-footer__col .xf-footer__contacts { margin: 14px 0 0; gap: 8px; } .xf-footer__contacts a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); /* Телефон/почта — контакт-действие, не data → Onest, не mono (см. #91). */ font-family: var(--font-sans); font-variant-numeric: tabular-nums; transition: color .15s; } @media (hover: hover) { .xf-footer__contacts a:hover { color: var(--text); } } /* End */ /* Start:/local/templates/xcore_front/css/home.css?1792645227182604*/ /* OWNS: .xf-pitch* (вывеска первого экрана), в тёмной теме — с плитками фактов .xf-neon-* (include/home/pitch.php) и знаком X .xf-nx* + html[data-xf-nx] (живая вывеска #758: слои include/neon/x-core.php, погасшее состояние до первой отрисовки ставит FOUC-guard в header.php, поведение — js/neon-core.js), .xf-hero-*, .xf-trustbar-*, .xf-categrid-*, .xf-cat-*, .xf-catrail(__*) (полка разделов главной, #361 — рендер include/home/catgrid.php), .xf-day-* (Товар дня — карточка + свои .xf-day-price*), .xf-promo-*, .xf-strip-*, .xf-art-* (tonal placeholder), .xf-brand(-)-*, .xf-brands-*, .xf-home-*, .xf-product-card* (листинговая карточка товара целиком — единственное исключение из .xf-product-* у product.css; рендерится из xf_render_product_card, живёт на главной/каталоге/поиске/избранном) */ /* Home page blocks — Pitch, Hero, TrustBar, CategoryGrid, ProductStrip, SplitPromo, Brands */ /* M11.2: Asymmetric section spacing — page rhythm break. Pairs: hero+trust (tight) → cats+products (medium) → promo+brands (wider). Page как будто «дышит глубже» от верха к низу. Раньше все sections были одинаковые 48+24=72px → 5 grid-секций подряд читались как «генерация». */ .xf-home__section { padding: 48px 0 24px; } .xf-home__section--hero { padding: 28px 0 20px; } /* tight after header */ .xf-home__section--trust { padding: 24px 0; } /* tight, group with hero */ /* --cats больше нет: секция «Популярные категории» заменена полкой разделов .xf-catrail со своим ритмом (#361), она не .xf-home__section. */ .xf-home__section--day { padding: 24px 0; } /* tight — single card между полкой разделов и products */ .xf-home__section--products{ padding: 48px 0 24px; } /* medium */ .xf-home__section--promo { padding: 72px 0 32px; } /* wider — visual break */ .xf-home__section--brands { padding: 80px 0 16px; } /* big top breath, плотно к footer'у */ /* ─── Вывеска (первый экран, #300) ────────────────────────── Разметка — include/home/pitch.php. Стоит выше баннеров и говорит словами, что это за магазин. Всё под собственным префиксом .xf-pitch*; из чужого каскада трогается ровно одно — геометрия .xf-btn (ui.css) на своём экземпляре .xf-pitch__cta (grid-область, margin, на мобильном ширина и padding под тач-таргет). */ /* Плита стоит прямо на фоне страницы, без карточки и без заливки: Flat-Surface Rule — блок выделяется типографикой и линейками, а не подсветкой. Нижняя линейка = «край верстака»: выше говорит магазин, ниже начинается витрина. */ .xf-pitch { padding: 34px 0 26px; border-bottom: 1px solid var(--line-soft); } /* Композиция: вывеска + колофон. Слева имя товара крупно и кнопка под ним, справа за вертикальной линейкой — справка о магазине. Это грамматика газетной шапки, а не лендинг-hero (eyebrow → title → subtitle → ряд кнопок). Порядок в DOM (заголовок → справка → кнопка) сразу верный для мобильного; на десктопе кнопка встаёт под заголовок через grid-области. */ .xf-pitch__band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(258px, 340px); grid-template-areas: "title note" "facts note" "cta note"; grid-template-rows: auto auto 1fr; column-gap: 56px; align-items: start; } /* Display главной. Кегль канонизирован владельцем (#156): 52px на десктопе, ~40px на мобильном. Своих значений тут не изобретаем — менять масштаб решает владелец, не агент. Tracking в em (-0.035em ≈ -1.8px на 52px), чтобы на мобильном кегле не переуплотнить. max-width в ch, а не px — мера едет вместе с кеглем; 25ch держит заголовок в двух строках на десктопе. */ .xf-pitch__title { grid-area: title; margin: 0; max-width: 25ch; font-size: 52px; line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; color: var(--text); text-wrap: balance; } /* Тон ниже, не цвет: ink-secondary на display-кегле — 7:1 с запасом, при этом фраза распадается на «что продаём» и «откуда». Accent-индиго сюда не идёт — его бюджет на экране занят единственной кнопкой (One-Voice Indigo Rule). display:block, а не inline — смена тона обязана совпасть с переносом строки. Инлайном на узкой колонке она приходилась на середину строки («…и техника СО») и читалась как случайность; блоком это осознанный второй регистр на всех ширинах, без зависимости от того, где сработал text-wrap. */ .xf-pitch__title-soft { display: block; color: var(--text-2); } /* Строка факта (#313): срок доставки — под заголовком, над кнопкой. Это само предложение магазина (PRODUCT.md → Positioning), поэтому голос — основной ink и 500, а не тон справки: справа колофон рассказывает, здесь — обещаем. Иконка — в тоне --text-3, как у топбара: маркер, а не акцент. Индиго сюда не идёт — бюджет экрана у единственной кнопки (One-Voice Indigo Rule). Кегль 15 — body-ступень DESIGN.md, тот же, что у справки: строка не должна спорить с display. Факт один: «Самовывоз в Минске, Пн–Сб» снят владельцем 2026-09-12 (по субботам не всегда — pitch.php). Поэтому контейнер — обычный абзац без flex/gap/list-reset: раскладку ряда из двух фактов держать не для чего, а разделитель между фактами теперь был бы огрызком. Вернутся факты — вернётся и flex с column-gap 24px. */ .xf-pitch__facts { grid-area: facts; margin: 18px 0 0; } .xf-pitch__fact { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--text); } .xf-pitch__fact svg { flex: 0 0 auto; color: var(--text-3); } /* Колофон. padding-top подобран так, чтобы первая строка справки оптически села на первую строку заголовка (52×1.02 против 15×1.6), а не совпала с ним по верхнему краю коробки. Линейка — 1px нейтраль, полная высота полосы: это разделитель колонок, а не цветная полоса-акцент (DESIGN.md → Don't: coloured border-left >1px). */ .xf-pitch__note { grid-area: note; position: relative; align-self: stretch; padding: 21px 0 2px 32px; } .xf-pitch__note::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--line-soft); } .xf-pitch__note-p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; /* узкая колонка легко оставляет «дома.» сиротой в строке */ } .xf-pitch__note-p + .xf-pitch__note-p { margin-top: 14px; } /* Ссылка «Отзывы о нас» в справке — тоном текста с подчёркиванием, не индиго: единственное индиго экрана — кнопка каталога (см. .xf-pitch__cta). */ .xf-pitch__link { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; white-space: nowrap; /* «Все / отзывы о нас» рвалось на телефоне */ transition: color .15s, text-decoration-color .15s; } @media (hover: hover) { .xf-pitch__link:hover { color: var(--accent-2); text-decoration-color: currentColor; } } /* Число — данные, поэтому mono (Mono-as-Data Rule) и тоном основного текста: единственное, что в справке должно цепляться глазом. word-spacing правит разряды: неразрывный пробел в моноширинном шрифте занимает целую ячейку, и «100 000» разваливалось на два числа — сжимаем до тонкой шпации. */ .xf-pitch__num { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; word-spacing: -0.22em; color: var(--text); } /* Единственная кнопка экрана и единственное индиго на нём — плоская primary (.xf-btn), без --lg. Вторая кнопка не нужна: каталог открывают шапка, плитки категорий сразу ниже и «Весь каталог» в их заголовке. (Здесь стояла оговорка «без --grad» — с #322 бренд-градиента в шаблоне нет вообще, выбирать больше не из чего.) */ .xf-pitch__cta { grid-area: cta; justify-self: start; margin-top: 26px; /* от строки фактов: она уже отступила от заголовка на 18 */ } /* Планшет и узкий десктоп: колонки складываются в одну, вертикальная линейка становится горизонтальной над справкой — тот же приём разделения, повёрнутый на 90°. Кегль заголовка НЕ трогаем: на 768px колонка ~688px, и 52px укладываются в те же две строки — промежуточная ступень между 52 и 40 была бы кеглем вне рампы DESIGN.md. */ @media (max-width: 1023px) { .xf-pitch { padding: 30px 0 24px; } .xf-pitch__band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "facts" "note" "cta"; grid-template-rows: auto auto auto auto; } .xf-pitch__note { max-width: 62ch; padding: 20px 0 0; } .xf-pitch__note::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; } .xf-pitch__cta { margin-top: 22px; } } /* Mobile: .wrapper_inner держит var(--container-pad) по бокам — с #307 это 16px на телефоне, колонка 358px на 390 (было 40px и 310px). Заголовок отпускаем на всю колонку; кнопка — во всю ширину и с высотой ≥44px: это единственный тач-таргет блока и главный сценарий покупки (PRODUCT.md → Operating Context: основная масса смотрит с телефона). */ @media (max-width: 767px) { .xf-pitch { padding: 24px 0 22px; } /* 40px — канон мобильного display (#156, DESIGN.md §3: «на мобильном масштабируется к ~40px»). В машинной рампе DESIGN.md эта ступень не перечислена, поэтому детектор помечает её advisory — это осознанное исключение, а не самодеятельный кегль. Ниже 364px кегль плавает до 34 (clamp — разбор в следующем комментарии). Две ступени на телефоне (#313, замечание владельца 2026-09-12 «переносы можно грамотнее»). Геометрия: в колонке 333px (375-вьюпорт) при 40px «Комплектующие» одно занимает 311px, «свой склад в Минске» — 391px. Значит, при едином кегле выбор только между «40px и четыре строки с повисшим „в Минске“» и «ужать всё до 33px, чтобы вторая фраза влезла в строку» (так было в #502) — во втором случае display падал ниже своего мобильного канона, а «и техника» оставалось короткой строкой, зажатой между двумя длинными (по правилу рваного края — худшая форма). Решение — не один кегль на обе фразы, а две роли рампы DESIGN.md: • «Комплектующие / и техника» — Display, 40px (канон #156), две строки «длинная + короткая» — естественный рваный край; • «свой склад в Минске» — Headline в мобильном масштабе (38px × 40/52 ≈ 29 → 28px), 600, трекинг -0.03em (Tight-Display: чем мельче, тем свободнее), одной строкой; тон --text-2 остаётся из базового правила. Ступени 40 → 28 → 22 (заголовки секций на телефоне) читаются как три разных роли; 33 ↔ 26 (промо-карточка) такого зазора не давали. margin-top 8px (spacing.sm) — зазор между ролями заметно больше межстрочного внутри display (≈1px) и заметно меньше отступа до строки фактов (16px): подзаголовок держится за заголовок, а не за факты. clamp: на 320px колонка 288px — 40px не влезает («Комплектующие» 311), 35px влезает (274). 11vw = 35.2px на 320, 39.6 на 360 (Android), 40px с ~364px; на 375+ это ровно 40px — канон, а не текучий кегль. Не 36px: с классическим скроллбаром (headless, Windows) колонка на 320 сужается до 278, и 36px (282) вылезали на 4px — замерено Playwright 2026-09-12. Десктоп и планшет (≥768px) не трогаем: там 52px и обе фразы по строке, смена тона совпадает с переносом — иерархия ролей не нужна. Обкатано на /dev/ как модификатор --deck под d1-гейтом; по приёмке владельца (#313) гейт снят и модификатор слит в базовое правило. */ .xf-pitch__title { max-width: none; font-size: clamp(34px, 11vw, 40px); } .xf-pitch__title .xf-pitch__title-soft { margin-top: 8px; font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; } .xf-pitch__facts { margin-top: 16px; } .xf-pitch__note { padding-top: 18px; } .xf-pitch__note-p + .xf-pitch__note-p { margin-top: 12px; } .xf-pitch__cta { justify-self: stretch; width: 100%; padding: 13px 16px; } } /* ─── Вывеска в тёмной теме («Ночная вывеска», #739) ──────── В тёмной первый экран — вывеска: тот же заголовок, плитки фактов вместо справки и строки срока, справа знак X с векторной платой. Единственное место сайта, где горит свечение (--nx-*, tokens.css) и светится фон, — отступление от Flat-Surface и Gradient-Restraint, записанное правилом тёмной темы (DESIGN.md → Dark Theme). Плитки и знак печатаются всем с атрибутом hidden (include/home/pitch.php): в светлой их нет, правила ниже их показывают (display сильнее hidden). До #708 блок жил в css/neon.css. Раскладка референса: заголовок → плитки фактов → кнопка, справа знак. Шрифт заголовка — наш обычный (владелец, #618); вес 600 вместо 700: белое на чёрном «расплывается» и выглядит жирнее, чем на белом. Секция изолирована: свет знака (z-index -1) ложится ЗА текст, а не поверх. Фильтр на обёртке знака сделал бы её отдельным слоем, и свет окрасил бы заголовок, — поэтому тень-свет висит на самом SVG. */ html[data-theme="dark"] .xf-pitch { position: relative; isolation: isolate; border-bottom: 0; padding-top: 56px; padding-bottom: 64px; } html[data-theme="dark"] .xf-pitch__facts, html[data-theme="dark"] .xf-pitch__note { display: none; } html[data-theme="dark"] .xf-pitch__band { grid-template-columns: minmax(0, 1fr) minmax(300px, 460px); grid-template-areas: "title art" "pills art" "cta art"; grid-template-rows: auto auto 1fr; column-gap: 56px; align-items: start; } html[data-theme="dark"] .xf-pitch__title { font-weight: 600; letter-spacing: -0.03em; } /* Вторая строка — светящаяся надпись вывески: светлая сердцевина и цветной ореол, как трубка знака. Не градиент-текст и не плоская лаванда. */ html[data-theme="dark"] .xf-pitch__title-soft { color: var(--nx-core); text-shadow: var(--nx-glow); } html[data-theme="dark"] .xf-neon-art { display: block; position: relative; grid-area: art; align-self: center; } /* Свет вывески: центр — на знаке, на любом экране; спад многоступенчатый, чтобы край растворялся, а не обрывался. */ html[data-theme="dark"] .xf-neon-art::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 420%; aspect-ratio: 1.5; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(closest-side, oklch(0.52 0.23 325 / 0.5), oklch(0.43 0.21 315 / 0.25) 30%, oklch(0.32 0.14 302 / 0.12) 60%, transparent 100%); } /* ── Живая вывеска (#758): знак X включается и живёт ────────────── Сюжет — имя магазина, X-Core: ядро в центре, от него по дорожкам платы к трубке бегут импульсы. Знак собран из слоёв (include/neon/x-core.php): ореол, плата, импульсы, свечение трубки, вспышка, белая трубка, искры. Каждый слой — свой элемент: прозрачность и сдвиг ведёт композитор, импульсы перерисовывают только свой лёгкий слой, слои с размытием не перерисовываются никогда. Поведение — js/neon-core.js; без скрипта знак просто горит. За курсором знак не двигается: глубина (трубка перед стеклом, поворот) ездила неестественно (Илья 2026-10-19) — курсору отвечает свет: импульсы к нему и разгорающееся ядро. */ html[data-theme="dark"] .xf-pitch { /* Погасшая вывеска (на секции: строка, цифры и кнопка — соседи знака, не потомки): тень текста той же формы, что --nx-glow, но пустая — так её можно плавно зажечь, — и кнопка без света под собой. */ --nx-glow-off: 0 0 10px transparent, 0 0 30px transparent; --nx-cta-dark: inset 0 1px 0 oklch(1 0 0 / 0.28), inset 0 -1px 0 oklch(0 0 0 / 0.18), 0 1px 0 oklch(0 0 0 / 0.4), 0 16px 36px -14px oklch(0.56 0.25 300 / 0); } html[data-theme="dark"] .xf-nx { position: relative; display: block; } html[data-theme="dark"] .xf-nx__layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; } /* Ореол в потоке задаёт размер всей сцене. */ html[data-theme="dark"] .xf-nx__layer--aura { position: relative; height: auto; } html[data-theme="dark"] .xf-nx__layer--flare { opacity: 0; } html[data-theme="dark"] .xf-nx__sparks { position: absolute; inset: 0; pointer-events: none; } /* Свет ядра: разгорается, когда курсор рядом, и вспыхивает на каждом импульсе. */ html[data-theme="dark"] :is(.xf-nx__core, .xf-nx__flash) { position: absolute; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, oklch(0.99 0.02 338 / 0.95), oklch(0.80 0.17 338 / 0.42) 42%, oklch(0.62 0.25 332 / 0.12) 72%, transparent); opacity: 0; } /* Голова импульса и вспышка в конце дорожки: место и размер ставит скрипт. */ html[data-theme="dark"] :is(.xf-nx__spark, .xf-nx__hit) { position: absolute; left: 0; top: 0; border-radius: 50%; opacity: 0; will-change: transform, opacity; } html[data-theme="dark"] .xf-nx__spark { background: radial-gradient(closest-side, oklch(1 0 0), oklch(0.92 0.08 338 / 0.9) 18%, oklch(0.74 0.22 336 / 0.4) 44%, oklch(0.62 0.26 332 / 0.12) 70%, transparent); } html[data-theme="dark"] .xf-nx__hit { background: radial-gradient(closest-side, oklch(0.98 0.03 338 / 0.9), oklch(0.74 0.22 336 / 0.35) 45%, transparent); } /* Волна по щелчку или касанию: доходит до трубки — трубка вспыхивает. */ html[data-theme="dark"] .xf-pitch.is-flare .xf-nx__layer--flare { animation: xf-nx-flare 900ms cubic-bezier(0.2, 0.7, 0.3, 1) both; } @keyframes xf-nx-flare { 0%, 30% { opacity: 0; } 42% { opacity: 0.55; } 100% { opacity: 0; } } /* Включение. Первый показ главной за визит и переключение на тёмную: вывеска стоит погасшей (data-xf-nx="off" ставит FOUC-guard в header.php до первой отрисовки) и зажигается — искра в ядре → ток по дорожкам → трубка «схватывает» → разгорается свет → загораются строка вывески, цифры и свет под кнопкой. Выдержки — кадрами внутри анимаций слоёв, не animation-delay: задержку Safari ведёт на главном потоке, и занятый загрузкой поток сорвал бы такт. Погасший вид — с атрибутом [data-xf-nx]: правила темы для строки, цифр и кнопки той же силы, без него он бы им проигрывал. При reduced-motion погасшего вида нет — вывеска горит сразу. */ @media (prefers-reduced-motion: no-preference) { html[data-theme="dark"][data-xf-nx] :is(.xf-nx__layer--aura, .xf-nx__layer--glow) { opacity: 0; } html[data-theme="dark"][data-xf-nx] .xf-nx__layer--board { opacity: 0.22; } html[data-theme="dark"][data-xf-nx] .xf-nx__layer--tube { opacity: 0.24; } html[data-theme="dark"][data-xf-nx] .xf-neon-art::before { opacity: 0; } html[data-theme="dark"][data-xf-nx] :is(.xf-pitch__title-soft, .xf-neon-pill b) { color: var(--text-2); text-shadow: var(--nx-glow-off); } html[data-theme="dark"][data-xf-nx] .xf-btn.xf-pitch__cta { box-shadow: var(--nx-cta-dark); } /* Страховка: скрипт не пришёл — вывеска загорается сама через 3,5 с. Успевший скрипт ставит "wait" (погасшая, без страховки) и правит сам; опоздавший ждёт, пока страховка доиграет (js/neon-core.js). */ html[data-theme="dark"][data-xf-nx="off"] :is(.xf-nx__layer--aura, .xf-nx__layer--glow, .xf-nx__layer--board, .xf-nx__layer--tube), html[data-theme="dark"][data-xf-nx="off"] .xf-neon-art::before { animation: xf-nx-failsafe 600ms 3.5s both; } html[data-theme="dark"][data-xf-nx="off"] :is(.xf-pitch__title-soft, .xf-neon-pill b) { animation: xf-nx-failsafe-text 600ms 3.5s both; } html[data-theme="dark"][data-xf-nx="off"] .xf-btn.xf-pitch__cta { animation: xf-nx-cta-on 600ms 3.5s both; } html[data-theme="dark"] .xf-pitch.is-igniting .xf-nx__layer--board { animation: xf-nx-board-on 1800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } html[data-theme="dark"] .xf-pitch.is-igniting .xf-nx__layer--tube { animation: xf-nx-tube-on 1800ms ease-out both; } html[data-theme="dark"] .xf-pitch.is-igniting .xf-nx__layer--glow { animation: xf-nx-glow-on 1800ms ease-out both; } html[data-theme="dark"] .xf-pitch.is-igniting .xf-nx__layer--aura { animation: xf-nx-aura-on 1800ms cubic-bezier(0.16, 1, 0.3, 1) both; } html[data-theme="dark"] .xf-pitch.is-igniting .xf-neon-art::before { animation: xf-nx-room-on 1800ms cubic-bezier(0.16, 1, 0.3, 1) both; } /* Текст и тень кнопки — не композитор, а перерисовка: здесь обычная задержка допустима. */ html[data-theme="dark"] .xf-pitch.is-igniting .xf-pitch__title-soft { animation: xf-nx-text-catch 520ms 930ms both; } html[data-theme="dark"] .xf-pitch.is-igniting .xf-neon-pill b { animation: xf-nx-text-on 520ms 1130ms both; } html[data-theme="dark"] .xf-pitch.is-igniting .xf-neon-pill:nth-child(2) b { animation-delay: 1210ms; } html[data-theme="dark"] .xf-pitch.is-igniting .xf-neon-pill:nth-child(3) b { animation-delay: 1290ms; } html[data-theme="dark"] .xf-pitch.is-igniting .xf-btn.xf-pitch__cta { animation: xf-nx-cta-on 700ms 1250ms cubic-bezier(0.16, 1, 0.3, 1) both; } } @keyframes xf-nx-failsafe { to { opacity: 1; } } @keyframes xf-nx-failsafe-text { to { color: var(--nx-core); text-shadow: var(--nx-glow); } } @keyframes xf-nx-board-on { 0%, 7% { opacity: 0.22; } 10% { opacity: 0.5; } 44%, 100% { opacity: 1; } } /* «Схватывание» трубки: вспышка, провал, почти полный, провал, ровный свет — два провала за четверть секунды, не стробоскоп. */ @keyframes xf-nx-tube-on { 0%, 40% { opacity: 0.24; } 41.2% { opacity: 1; } 43.2% { opacity: 0.28; } 45.5% { opacity: 0.92; } 48% { opacity: 0.45; } 52%, 100% { opacity: 1; } } @keyframes xf-nx-glow-on { 0%, 40.4% { opacity: 0; } 41.8% { opacity: 0.85; } 43.8% { opacity: 0.08; } 46.2% { opacity: 0.75; } 48.6% { opacity: 0.25; } 56%, 100% { opacity: 1; } } @keyframes xf-nx-aura-on { 0%, 41% { opacity: 0; } 78%, 100% { opacity: 1; } } @keyframes xf-nx-room-on { 0%, 42% { opacity: 0; } 88%, 100% { opacity: 1; } } @keyframes xf-nx-text-catch { 0% { color: var(--text-2); text-shadow: var(--nx-glow-off); } 14% { color: var(--nx-core); text-shadow: var(--nx-glow); } 30% { color: var(--text-2); text-shadow: var(--nx-glow-off); } 52%, 100% { color: var(--nx-core); text-shadow: var(--nx-glow); } } @keyframes xf-nx-text-on { 0% { color: var(--text-2); text-shadow: var(--nx-glow-off); } 100% { color: var(--nx-core); text-shadow: var(--nx-glow); } } @keyframes xf-nx-cta-on { from { box-shadow: var(--nx-cta-dark); } } /* Факты: три равные плитки «значение → подпись». Поверхность нейтральная, с кромкой; светится только значение — как цифры табло. Сетка 3 в ряд: прежние 2+1 растягивали третью плитку на всю ширину. */ html[data-theme="dark"] .xf-neon-pills { display: grid; grid-area: pills; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 36px 0 0; padding: 0; list-style: none; max-width: 660px; } html[data-theme="dark"] .xf-neon-pill { position: relative; display: flex; align-items: flex-start; padding: 16px 18px 17px; border: 1px solid oklch(1 0 0 / 0.10); border-radius: 14px; background: oklch(0.19 0.010 292 / 0.72); box-shadow: var(--nx-edge), 0 14px 30px -18px oklch(0 0 0 / 0.9); color: var(--text-2); font-size: 14.5px; line-height: 1.4; text-wrap: pretty; transition: border-color .18s, background-color .18s; } html[data-theme="dark"] .xf-neon-pill > :is(span, a) { display: block; } html[data-theme="dark"] .xf-neon-pill b { display: block; margin-bottom: 4px; color: var(--nx-core); font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; white-space: nowrap; text-shadow: var(--nx-glow); } html[data-theme="dark"] .xf-neon-pill__label { display: block; } /* Плитка с отзывами — ссылка на всю площадь; подпись подчёркнута, чтобы было видно, что это ссылка (обход 2026-10-05). */ html[data-theme="dark"] .xf-neon-pill a { color: inherit; text-decoration: none; } html[data-theme="dark"] .xf-neon-pill a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } html[data-theme="dark"] .xf-neon-pill a .xf-neon-pill__label { text-decoration: underline; text-decoration-color: oklch(1 0 0 / 0.4); text-underline-offset: 3px; } @media (hover: hover) { html[data-theme="dark"] .xf-neon-pill:has(a):hover { background: oklch(0.22 0.012 292 / 0.8); border-color: oklch(1 0 0 / 0.18); } } /* Главная кнопка главной — единственная со светом под собой: блик сверху, тень снизу, свет падает вниз «на стол». Ни градиента, ни ореола вокруг. */ html[data-theme="dark"] .xf-btn.xf-pitch__cta { grid-area: cta; margin-top: 32px; min-height: 52px; padding: 14px 30px; font-size: 15px; font-weight: 600; box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.28), inset 0 -1px 0 oklch(0 0 0 / 0.18), 0 1px 0 oklch(0 0 0 / 0.4), 0 16px 36px -14px oklch(0.56 0.25 300 / 0.85); } /* Узкий десктоп и планшет в ландшафте (1024–1279): колонка знака на 460px оставляла фактам по ~135px, и «≈ 100 000» вылезало за край плитки. */ @media (min-width: 1024px) and (max-width: 1279px) { html[data-theme="dark"] .xf-pitch__band { grid-template-columns: minmax(0, 1fr) minmax(240px, 36%); column-gap: 40px; } html[data-theme="dark"] .xf-neon-pill { padding: 14px 14px 15px; } html[data-theme="dark"] .xf-neon-pill b { font-size: 24px; } } @media (max-width: 1023px) { html[data-theme="dark"] .xf-pitch__band { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "title" "pills" "cta"; grid-template-rows: none; } html[data-theme="dark"] .xf-neon-art { width: min(48%, 340px); margin: 0 0 20px -2%; } } /* Телефон — симметричная вывеска (Илья 2026-10-15, вариант «Г»): знак по центру, под ним заголовок по центру, факты — одна строка-табло из трёх колонок, кнопка. Прежний первый экран целиком уходил под вывеску — разделы каталога начинались ниже 1000px; так баннер возвращается на первый экран, а знак остаётся целым. Размер заголовка — канон владельца (#156), не трогаем. */ @media (max-width: 767px) { html[data-theme="dark"] .xf-pitch { padding-top: 20px; padding-bottom: 32px; } html[data-theme="dark"] .xf-pitch__band { text-align: center; justify-items: center; } html[data-theme="dark"] .xf-pitch__title { text-wrap: balance; } html[data-theme="dark"] .xf-neon-art { width: 34%; margin: 0 auto 14px; } html[data-theme="dark"] .xf-neon-art::before { width: 520%; } html[data-theme="dark"] .xf-neon-pills { width: 100%; gap: 0; margin-top: 20px; border: 1px solid oklch(1 0 0 / 0.10); border-radius: 14px; background: oklch(0.19 0.010 292 / 0.72); box-shadow: var(--nx-edge); overflow: hidden; } html[data-theme="dark"] .xf-neon-pill { justify-content: center; padding: 12px 6px 13px; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 12px; line-height: 1.3; } html[data-theme="dark"] .xf-neon-pill + .xf-neon-pill { border-left: 1px solid oklch(1 0 0 / 0.08); } html[data-theme="dark"] .xf-neon-pill b { font-size: 20px; margin-bottom: 3px; } html[data-theme="dark"] .xf-btn.xf-pitch__cta { width: 100%; margin-top: 18px; } } /* 320px: «≈ 100 000» на 20px упиралось в край колонки. */ @media (max-width: 359px) { html[data-theme="dark"] .xf-neon-pill b { font-size: 17px; } } /* ─── Hero ────────────────────────────────────────────────── */ /* M1: единый нейтральный фон под продуктовый баннер. Раньше было 3 radial- gradient'а с hue-swap по слайдам — сняли как «AI-pastel-reflex» (PRODUCT.md anti-ref #4 "Generic SaaS gradient template" + detector convergence). */ /* M9.1: высота приведена к prod-паттерну (1920×450 → ratio 4.27, prod hero ровно 450px tall при 1440 viewport). Dev wrapped в .wrapper_inner ~1350px, aspect-ratio один сам drive height по ширине контейнера (~316px). max-height capping для ультра-широких экранов (1920+ → height 450, как на проде). ВАЖНО: НЕТ min-height — иначе rectangle получает min-width = min-height × ratio (360 × 4.27 = 1536px) и вылезает за границы контейнера. */ .xf-hero { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line-soft); aspect-ratio: 1920 / 450; max-height: 450px; background: var(--surface-2); } .xf-hero__stripes { position: absolute; inset: 0; opacity: 0.05; color: var(--text-3); pointer-events: none; } .xf-hero__text { position: relative; padding: 36px 44px; display: flex; flex-direction: column; justify-content: center; } .xf-hero__eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2.5px; color: var(--accent-2); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; } .xf-hero__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px var(--accent); flex: 0 0 auto; } .xf-hero__title { margin: 0; font-size: 52px; line-height: 1; font-weight: 700; letter-spacing: -1.8px; color: var(--text); } .xf-hero__subtitle { margin: 14px 0 22px; font-size: 17px; color: var(--text-2); max-width: 460px; line-height: 1.4; } .xf-hero__ctas { display: flex; gap: 12px; align-items: center; } /* [#303] Точки-переключатели. Были 8×4 px: на фото-баннере это невидимая чёрточка, и покупатель не знал, что баннеров шесть. Теперь полоса 6px в 22px-кликабельной зоне (WCAG 2.5.8 target size), а состояние читается прежде всего ШИРИНОЙ (18 → 34 px) — не одним цветом. Плашка-скрим под группой — в banner-режиме ниже. */ .xf-hero__dots { position: absolute; bottom: 28px; left: 44px; display: flex; align-items: center; gap: 8px; z-index: 3; } .xf-hero__dot { width: 18px; height: 24px; /* тач-цель ≥24px (WCAG 2.5.8 AA минимум, не через исключение) */ display: flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; transition: width .3s; } .xf-hero__dot::after { content: ""; display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--line); transition: background .3s; } .xf-hero__dot.is-active { width: 34px; } .xf-hero__dot.is-active::after { background: var(--accent); } /* Media-слот — правая половина hero. Готов под product-PNG (transparent bg) через поле 'image' в hero.php. Если image пуст — рисует контурную fallback-иконку (xf-hero__placeholder), визуально явно «контента нет». */ .xf-hero__media { position: relative; margin: 24px 28px 24px 0; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .xf-hero__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .xf-hero__placeholder { width: 100%; height: 100%; min-height: 220px; display: flex; align-items: center; justify-content: center; color: var(--text-3); opacity: 0.5; } .xf-hero__placeholder svg { width: 72px; height: 72px; } .xf-hero__media-label { position: absolute; left: 20px; bottom: 20px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-3); z-index: 2; } .xf-hero__chips { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; z-index: 2; } .xf-hero__slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr; opacity: 0; pointer-events: none; transition: opacity .5s ease; } .xf-hero__slide.is-active { opacity: 1; pointer-events: auto; } /* M10: Banner-mode hero — full-bleed image, без text-overlay из template. Banner self-contained (текст / brand / CTA впечатаны в картинку). Slide становится , заменяя 2-column grid на single block. */ .xf-hero--banners .xf-hero__stripes { display: none; } .xf-hero__slide--banner { display: block; grid-template-columns: none; color: inherit; text-decoration: none; /* Подложка на время ленивой подгрузки (#344): ручной клик по точке может показать слайд до onload картинки — нейтральная поверхность вместо пустоты. */ background: var(--surface-3); } /* M11.3: nav-arrows + dots на banner-mode — переопределяем colors на universal-contrast (dark semi-transparent + white). Поверх любого banner'а (тёмного / светлого / nature) gives ≥3:1 contrast против default rgba(0,0,0,0.08) который сливался на тёмных banner'ах. */ .xf-hero--banners .xf-hero__nav { background: rgba(15, 17, 25, 0.55); border-color: rgba(255, 255, 255, 0.18); color: #fff; } @media (hover: hover) { .xf-hero--banners .xf-hero__nav:hover { background: rgba(15, 17, 25, 0.78); border-color: rgba(255, 255, 255, 0.32); } } html[data-theme="dark"] .xf-hero--banners .xf-hero__nav { background: rgba(15, 17, 25, 0.55); } @media (hover: hover) { html[data-theme="dark"] .xf-hero--banners .xf-hero__nav:hover { background: rgba(15, 17, 25, 0.78); } } /* [#303] Точки в banner-режиме: плашка-скрим + позиция вниз-по-центру. Плашка — тот же материал, что у стрелок выше (rgba(15,17,25,.55) + светлая рамка): поверх любого баннера (тёмного, светлого, «природного») полосы держат ≥3:1 — замерено, худший случай «полоса на белом фото» 3.3:1. Это скрим для читаемости поверх фото, а не декоративная подсветка (DESIGN.md, The Flat-Surface Rule); blur намеренно НЕ ставим — стекло по канону только у sticky-шапки. Позиция: слева нельзя — у баннеров текст и СВОЯ впечатанная кнопка стоят слева внизу, плашка накрывала «Открыть» / «Подробнее»; справа нельзя — там у баннера Jonsbo впечатан логотип. Центр свободен почти везде и совпадает с легаси: flexslider у aspro_next рисовал .flex-control-nav по центру снизу. translateX(-50%) — ПОЗИЦИОННЫЙ трансформ: множителем --xf-motion не гейтится (DESIGN.md, The Motion-Multiplier Rule, первое следствие). */ .xf-hero--banners .xf-hero__dots { left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(15, 17, 25, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); } .xf-hero--banners .xf-hero__dot::after { background: rgba(255, 255, 255, 0.8); } .xf-hero--banners .xf-hero__dot.is-active::after { background: #fff; } .xf-hero__picture { display: block; width: 100%; height: 100%; } .xf-hero__slide--banner .xf-hero__image { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; } .xf-hero__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(0, 0, 0, 0.08); border: 1px solid var(--line-soft); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 4; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s, border-color .2s, transform .2s; } html[data-theme="dark"] .xf-hero__nav { background: rgba(255, 255, 255, 0.06); } @media (hover: hover) { .xf-hero__nav:hover { background: rgba(0, 0, 0, 0.14); border-color: var(--accent); } } @media (hover: hover) { html[data-theme="dark"] .xf-hero__nav:hover { background: rgba(255, 255, 255, 0.14); } } .xf-hero__nav:active { transform: translateY(-50%) scale(calc(1 - 0.06 * var(--xf-motion, 1))); } .xf-hero__nav--prev { left: 20px; } .xf-hero__nav--next { right: 20px; } /* ─── TrustBar ────────────────────────────────────────────── */ .xf-trustbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .xf-trustbar__item { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px; } .xf-trustbar__icon { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-dim); color: var(--accent-2); display: flex; align-items: center; justify-content: center; border: 1px solid var(--accent-line); flex: 0 0 auto; } .xf-trustbar__title { font-size: 14px; font-weight: 500; color: var(--text); } .xf-trustbar__text { font-size: 12.5px; color: var(--text-3); margin-top: 2px; } /* M6+M11+M11.1: sub-hub macro-group title. v1 (M6) 12px JBM gray slишком тихий. v2 (M11) 15px sans weight 600 uppercase — лучше но всё ещё eyebrow label semantics. v3 (M11.1) drop uppercase, 18px, sentence-case — реальный H3 chapter heading weight. Conkurrent с main H1 не страшно, есть hierarchy через scale (h1 32px+ vs h3 18px). */ .xf-subhub__group-title { font-family: var(--font-sans); font-size: 18px; font-weight: 600; letter-spacing: -0.2px; color: var(--text); /* M11.2: bump top margin 36→48 — heavier title needs more breathing room от предыдущего grid'а. Plus faint top-rule (1px line-soft) для visual section break — критика flagged что 36px tight для 18px Onest 600. */ margin: 48px 0 20px; padding-top: 20px; border-top: 1px solid var(--line-soft); } .xf-subhub__group-title:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } @media (max-width: 767px) { .xf-subhub__group-title { font-size: 15px; margin: 26px 0 12px; } .xf-subhub__group-title:first-of-type { margin-top: 0; } } /* ─── CategoryGrid ────────────────────────────────────────── */ .xf-catgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* M4: row-height uniformity. Без 1fr высота row'а sizing'уется по самому высокому tile (имя 1-3 строки → tile 242-283 px на desktop, рваные ряды). 1fr forces все rows одной высоты — grid rhythm восстановлен. */ .xf-catgrid--16 { grid-auto-rows: 1fr; } .xf-cat-tile { position: relative; display: block; height: 140px; padding: 18px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; color: var(--text); } /* M2: hover delight — lift + accent border + soft shadow + photo scale. Стандартный e-commerce category feedback. До этого был только border-color accent (слишком subtle для "actionable tile" semantic). */ @media (hover: hover) { .xf-cat-tile:hover { border-color: var(--accent-line); transform: translateY(calc(-2px * var(--xf-motion, 1))); box-shadow: var(--shadow-card); } .xf-cat-tile:hover .xf-cat-tile__cover-img { --crop-scale: 1.11; } /* [#323] Тёмная тема: --shadow-card (16px вниз, alpha .6) при hover-lift долетала через межплиточный зазор до плитки следующего ряда и мерцала на ней тёмной полосой при проводке курсора. Короче и мягче — до соседа не достаёт; elevation в dark несут бордер и lift. */ html[data-theme="dark"] .xf-cat-tile:hover { box-shadow: 0 8px 20px -12px oklch(0.05 0.03 280 / 0.35); } } .xf-cat-tile--lg { height: 180px; padding: 22px; } .xf-cat-tile--xl { height: 100%; min-height: 432px; padding: 30px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; row-gap: 20px; } /* Подраздельная плитка (section.php): art сверху + body снизу. В отличие от landing-плиток с icon-badge'ом — тут art в потоке. */ .xf-cat-tile:has(.xf-cat-tile__art) { min-height: 200px; height: auto; padding: 16px; } .xf-cat-tile__art { height: 88px; border-radius: 12px; overflow: hidden; margin-bottom: 12px; } /* Sub-hub icon redesign M1: cover-photo variant заменяет icon-абстракцию для nichevye sub-categories. object-fit:contain — товар целиком виден с padding по краям если aspect-ratio не совпадает с tile (e-commerce category preview standard). #fff backdrop matches L2 product card pattern (project DECISION lock — non-transparent photos accepted). */ .xf-cat-tile__art--cover { /* M2: height 140→152, padding 8→4 — product получает +28px вертикали и +8px горизонтали внутри cover area, меньше empty whitespace. M5: padding 4→2 — ещё +4px каждого направления для product display. */ position: relative; height: 152px; background: #fff; padding: 2px; box-sizing: border-box; } /* M13 static curated covers — transparent PNG illustrations (через images/category-covers/

.png). Theme-aware: BG берёт var(--surface)
   из tile (white/dark), illustration «парит» с alpha. Никаких watermark /
   scale crop / mask — фотки уже clean. Padding щедрее (12px) — иллюстрации
   обычно с тёмным «телом», нужно breathing room. */
.xf-cat-tile__art--static {
  position: relative;
  height: 152px;
  background: transparent;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xf-cat-tile__static-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform .25s ease;
}
@media (hover: hover) {
  .xf-cat-tile:hover .xf-cat-tile__static-img { transform: scale(calc(1 + 0.04 * var(--xf-motion, 1))); }
}
/* M3 watermark mask: catalog в большинстве scraped с onliner.by, у jpeg'ов
   выжжен watermark «catalog.onliner.by» в правом-нижнем углу. Радиальный
   gradient от bottom-right corner растворяет watermark в #fff backdrop, не
   создавая видимый прямоугольник fade'а на photo'у (был issue v1 — solid
   white block при 65%×20% слишком очевиден на dark-photo тайлах). v2 —
   tight radial 28%×11% от corner, soft fade, плотный только в самом углу. */
.xf-cat-tile__art--cover::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28%;
  height: 11%;
  background: radial-gradient(
    ellipse 100% 100% at 100% 100%,
    #fff 0%,
    rgba(255, 255, 255, 0.85) 30%,
    rgba(255, 255, 255, 0) 80%
  );
  pointer-events: none;
}
.xf-cat-tile__cover-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* M12: универсальная bottom crop через scale + top-anchor — режет bottom 7%
     любого фото независимо от aspect ratio. Убирает catalog.onliner.by
     watermark (выжжен в bottom-right corner JPG) когда photo не fills frame
     и M3 mask миссит (часто на landscape photos с vertical whitespace).
     Hover state composes via CSS var (--crop-scale 1.07 base + 0.04 hover). */
  --crop-scale: 1.07;
  transform: scale(var(--crop-scale));
  transform-origin: top center;
  transition: transform .25s ease;
}
/* Text-only tile когда нет ни UF_CATALOG_ICON ни product photo
   (sub-секция пустая или все товары без picture'ов). Match height
   соседних photo tiles для grid consistency, vertically center content. */
.xf-cat-tile--text {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* M2: icon badge на нейтральной поверхности. Раньше было 8 hue'-вариантов
   (lavender / cyan / mint / pink / magenta) — сняли как «AI-pastel-reflex».
   Различие плиток теперь только через icon. Hover поднимает acc'ent — единый. */
.xf-cat-tile__icon {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--surface-3);
  border: 1px solid var(--line-soft);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s;
  z-index: 2;
}
.xf-cat-tile--lg .xf-cat-tile__icon { width: 64px; height: 64px; }
.xf-cat-tile--xl .xf-cat-tile__icon {
  right: 44px;
  bottom: 44px;
  width: 108px;
  height: 108px;
  border-radius: 20px;
}
.xf-cat-tile__icon svg { width: 28px; height: 28px; }
.xf-cat-tile--lg .xf-cat-tile__icon svg { width: 34px; height: 34px; }
.xf-cat-tile--xl .xf-cat-tile__icon svg { width: 56px; height: 56px; }
.xf-cat-tile__icon-img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}

/* M2: featured xl tile — neutral slab под UF_CATALOG_ICON image (или fallback
   SVG). Раньше использовался .xf-art c hue-driven pastel gradient — сняли.
   Slab выглядит как «рамка под product photo», как hero __media. */
.xf-cat-tile--xl .xf-cat-tile__art {
  grid-row: 2;
  justify-self: end;
  align-self: stretch;
  width: min(280px, 100%);
  height: 100%;
  max-height: 280px;
  min-height: 140px;
  border-radius: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: transform .25s;
  pointer-events: none;
}
.xf-cat-tile__art-img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.xf-cat-tile__art-icon {
  color: var(--text-3);
  opacity: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xf-cat-tile__art-icon svg {
  width: 96px;
  height: 96px;
}
@media (hover: hover) {
  .xf-cat-tile--xl:hover .xf-cat-tile__art { transform: translateY(calc(-2px * var(--xf-motion, 1))); }
}

@media (hover: hover) {
  .xf-cat-tile:hover .xf-cat-tile__icon {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
    transform: translateY(calc(-2px * var(--xf-motion, 1)));
    box-shadow: 0 12px 28px -10px oklch(0.5 0.22 268 / 0.45);
  }
}

.xf-cat-tile__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.xf-cat-tile--xl .xf-cat-tile__body { gap: 12px; grid-row: 1; align-self: start; }
.xf-cat-tile__name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
  margin-top: 0;
  max-width: 70%;
}
/* M4 desktop: имя на cover-tile reserves ровно 2 line'а — короткие имена
   (1 строка) получают пустую вторую строку, длинные обрезаются до 2.
   Body высота predictable → tile heights uniform → grid rhythm clean.
   Mobile использует 3-line clamp из catalog.css base + tile auto-grow. */
.xf-cat-tile:has(.xf-cat-tile__art--cover) .xf-cat-tile__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: calc(1.35em * 2);
  max-width: 100%;
}
/* M7: убираем redundant ↗ arrow с cover-photo tile'ов. Tile целиком =
   single

 link с hover lift + accent border + photo scale — arrow
   ничего не добавляет к affordance. Оставляем на .xf-cat-tile--xl
   hero-variant (другой контекст, там arrow несёт визуальный вес). */
.xf-cat-tile:has(.xf-cat-tile__art--cover) .xf-cat-tile__arrow,
.xf-cat-tile:has(.xf-cat-tile__art--static) .xf-cat-tile__arrow,
.xf-cat-tile--text .xf-cat-tile__arrow {
  display: none;
}
.xf-cat-tile__count {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0;
}
.xf-cat-tile--lg .xf-cat-tile__name { font-size: 18px; }
.xf-cat-tile--xl .xf-cat-tile__name {
  font-size: 28px;
  margin-top: 12px;
  max-width: none;
}
.xf-cat-tile--xl .xf-cat-tile__desc { max-width: none; }
.xf-cat-tile__desc {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-2);
  max-width: 55%;
  line-height: 1.5;
}
.xf-cat-tile__arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s;
  z-index: 3;
}
.xf-cat-tile--xl .xf-cat-tile__arrow { top: 28px; right: 28px; }
@media (hover: hover) {
  .xf-cat-tile:hover .xf-cat-tile__arrow {
  background: var(--accent);
  color: #fff;
}
}

/* ─── Полка разделов на главной (#361) ─────────────────────────────────────
   Разметка — include/home/catgrid.php. Плитки .xf-cat-tile выше живут дальше:
   их рисуют страницы каталога (landing.php, section.php), здесь они больше не
   используются.
   Что было на главной: eyebrow + H2 «Популярные категории» + 8 XL-плиток —
   466 px на десктопе и 927 px на телефоне, причём тот же список теми же словами
   в том же порядке уже стоит в липкой полосе шапки. Стало: одна строка на
   раздел, иконка без подложки, число без пилюли. Ничего не «выделяется» в
   покое — блок работает как указатель, а не как витрина, и accent
   (One-Voice Indigo Rule) появляется только под курсором. */
.xf-catrail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  /* Вчетверо тише, чем секции .xf-home__section (56/24): полка примыкает к
     баннерам сверху и к «Товару дня» снизу, своей «главы» у неё нет. */
  padding: 20px 0 4px;
}

.xf-catrail__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  /* Card-On-Cream: поверхность светлее фона страницы, в обеих темах. */
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: border-color .18s, color .18s, transform .18s;
}

/* Тёмная тема: плитка ловит свет верхней кромкой (--nx-edge) — так ряд не
   растворяется в почти чёрном фоне, а плитка не начинает кричать. Рамка —
   та же --line-soft, на наведении — accent-line из правила ниже. (До #708
   здесь стояла рамка --line прежней тёмной темы; скин её перекрывал.) */
html[data-theme="dark"] .xf-catrail__item { box-shadow: var(--nx-edge); }

.xf-catrail__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  transition: color .18s;
}
.xf-catrail__icon svg { width: 20px; height: 20px; }
/* UF_CATALOG_ICON из админки — растр; contain, чтобы не растянуть непропорционально. */
.xf-catrail__icon-img { width: 20px; height: 20px; object-fit: contain; }

.xf-catrail__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

/* «7679 товаров»: цифра — данные (mono, Mono-as-Data Rule), слово — речь
   (Onest). Поэтому шрифт назначается не строке целиком, а её половинам. */
.xf-catrail__count {
  flex: 0 0 auto;
  /* Явно, а не наследованием: слово — речь, и шрифт речи задаётся здесь, чтобы
     mono с цифры на него не перетёк. */
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}
.xf-catrail__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Тёмная тема: --text-3 на --surface даёт 4.28:1 при 12 px — ниже порога AA
   4.5:1 (замер живого /dev/ 2026-08-06; в светлой тот же токен даёт 4.85 и
   проходит). Поднимаем на один шаг до --text-2 → 8.2:1, и только в тёмной,
   чтобы утверждённая светлая тема осталась байт-в-байт прежней.
   Токен --text-3 не проходит AA в тёмной и в чужих местах страницы
   (плейсхолдер поиска, «BYN» в карточках) — это общая проблема токена, она
   чинится отдельно. [#708] Числа — прежней тёмной темы. В «Ночной вывеске»
   (#739) --text-3 на --surface даёт 6.6:1, --text-2 — 10.2:1; правило живое
   и держит прежний вид — снять его значит сменить вид. */
html[data-theme="dark"] .xf-catrail__count { color: var(--text-2); }

@media (hover: hover) {
  .xf-catrail__item:hover {
    border-color: var(--accent-line);
    color: var(--accent-2);
    transform: translateY(calc(-1px * var(--xf-motion, 1)));
  }
  .xf-catrail__item:hover .xf-catrail__icon { color: var(--accent-2); }
}

/* Число идёт со словом («7679 товаров»), и строка «иконка + название + число»
   помещается в один ряд только на широкой плитке: ей нужно ~246 px (иконка 20 +
   зазор 10 + «Комплектующие» 113 + «7679 товаров» 75 + поля 28).
   Замер инъекцией на живом /dev/ 2026-08-06: 1440 → плитка 333 px, 1280 → 305,
   а вот 1024 → 229 и 768 → 223, и там название обрезается. Обрезать название
   у навигации нельзя — раздел должен называться целиком, — поэтому всё, что
   ниже 1280 px, раскладываем в два ряда: название над числом, тем же приёмом,
   что уже был на телефоне. Плитка растёт с 44 до 54 px. */
@media (max-width: 1279px) {
  .xf-catrail__item {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
  }
  .xf-catrail__icon { flex: none; grid-row: 1 / span 2; align-self: center; }
  .xf-catrail__name  { grid-column: 2; }
  .xf-catrail__count { grid-column: 2; }
}

@media (max-width: 1023px) {
  .xf-catrail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Телефон — главный сценарий (PRODUCT.md → Operating Context), и именно там
   старая сетка стоила целый экран. Две колонки, число уходит под название:
   в ~175 px ширины строка «иконка + название + число» не помещается, а резать
   название многоточием у навигации нельзя.
   Метрики подобраны замером, не на глаз: самое длинное название
   («Комплектующие», перенести нельзя — одно слово) занимает 113 px в Onest
   14/500 и 105 px в 13/500. При 13 px, иконке 18 px, зазоре 8 и полях 10
   строке нужно 151 px — на экране 360 (Galaxy S-серия и вся её родня) колонка
   даёт 160, запас 9 px. Кегль 13 px здесь легален: DESIGN.md → Body Small,
   «secondary navigation». */
@media (max-width: 767px) {
  .xf-catrail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 16px 0 4px;
  }
  .xf-catrail__item {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 8px;
    row-gap: 2px;
    align-items: center;
    padding: 10px;
  }
  .xf-catrail__icon { flex: none; width: 18px; height: 18px; grid-row: 1 / span 2; align-self: center; }
  .xf-catrail__icon svg { width: 18px; height: 18px; }
  .xf-catrail__icon-img { width: 18px; height: 18px; }
  .xf-catrail__name  { grid-column: 2; font-size: 13px; }
  .xf-catrail__count { grid-column: 2; font-size: 11px; }
}

/* Ниже 360 px две колонки перестают вмещать «Комплектующие» при любом честном
   кегле (при 340 колонка = 150 px против нужных 151), а обрезать название
   нельзя. Такие экраны получают одну колонку и строку в один ряд — блок
   становится выше, но остаётся читаемым. */
@media (max-width: 359px) {
  .xf-catrail { grid-template-columns: minmax(0, 1fr); }
  .xf-catrail__item { display: flex; }
}

/* ─── Product art (neutral placeholder) ────────────────────
   M6: per-category hue rotation снят. Placeholder = единый neutral
   surface (Workshop Tile per DESIGN.md `Tinted-Neutral`), вариация
   между категориями держится только на иконке. inline `style="--h:"`
   из PHP остаётся в markup для совместимости, но больше не читается. */
.xf-art {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
}
.xf-art__icon {
  position: relative;
  z-index: 1;
  color: var(--text-3);
  opacity: 0.85;
}
/* Dark theme: bump icon contrast to clear WCAG AA 3:1. With text-3 (L 0.58)
   on surface-3 (L 0.285) at opacity 0.85 the ratio is ~2.25:1 — icons fade
   into tile-art and the only tile differentiator becomes the name. text-2
   (L 0.75) with opacity 0.95 lands ~4.5:1. Light theme is fine (4.1:1).
   [#708] Числа — прежней тёмной темы. В «Ночной вывеске» (#739): text-3 при
   0.85 даёт на --surface-3 4.5:1, text-2 при 0.95 — 8.0:1; правило живое и
   держит прежний вид. */
html[data-theme="dark"] .xf-art__icon {
  color: var(--text-2);
  opacity: 0.95;
}
.xf-art__icon svg {
  display: block;
  width: 64px;
  height: 64px;
}
.xf-art--xl .xf-art__icon svg { width: 130px; height: 130px; }
.xf-art__label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-3);
  padding: 2px 6px;
  background: var(--surface);
  border-radius: 4px;
  border: 1px solid var(--line-soft);
  z-index: 2;
}
.xf-art__img {
  position: relative;
  z-index: 1;
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}

.xf-art--photo {
  background: var(--surface);
}
/* Dark theme: pure-white backdrop под фото. Tried tinted oklch(0.92 0.005 285)
   to soften the «N фар на тёмной странице» effect (M2.1) — но фото в каталоге
   не имеют идеальной обрезки: у многих jpeg/png остаётся свой near-white
   background, который на тинтнутой подложке проступает видимым «бордюром»
   вокруг фото. На #fff чужой фото-бэкграунд сливается с карточной плитой —
   ragged-edge невидим. Trade-off: «фары» возвращаются как стилистический
   шум, но photo-edge cleanliness ценится выше (data-side issue фото нельзя
   быстро исправить, white plate is the pragmatic cover). */
html[data-theme="dark"] .xf-art--photo {
  background: #fff;
  isolation: isolate; /* multiply слоя ниже смешивается только с плитой, не со страницей */
}
.xf-art--photo::before,
.xf-art--photo::after {
  display: none;
}
/* Тёмная тема: белая плита → лайтбокс. Плита остаётся #fff (выше), тон
   кладётся наложением multiply на плиту и фото сразу — одним слоем на обоих,
   шва нет (проверено крупным планом, 2026-10-15). Плита чуть приглушена и
   гаснет к краям: «фара» на тёмной странице становится светящейся витриной.
   Слой — токен --nx-lightbox (tokens.css), тот же у миниатюр товара
   (product.css) и фото в корзине (cart.css). */
html[data-theme="dark"] .xf-art--photo::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: var(--nx-lightbox);
}

/* Photo product-card: wrapper schrink'ается до actual img-rect через
   container queries — даёт плашке guarantee позиционирование bottom-right
   ровно по углу самого фото (а не card-image-zone'ы). Так наша плашка
   физически перекрывает чужой watermark catalog.onliner.by, который
   выжжен в jpeg в правом-нижнем углу image-rect.
   container queries уже в стеке (см. M-cmp-mobile-hybrid). */
.xf-product-card__image {
  container-type: inline-size;
}
/* Wrapper к низу image-зоны: фото "стоят на одной полке", все плашки
   guarantee на одной горизонтальной линии независимо от aspect ratio фото. */
.xf-product-card .xf-art--photo {
  align-items: flex-end;
}
/* P1 fix: плашка .xf-product-card__guarantee (right:0/bottom:0 в этом wrap'е)
   шире wrap'а на портретных/узких фотках (wrap shrink'ается до photo via flex:0 0
   auto + max-width:80cqi на img). Overflow налево → клиппинг по image-area
   `overflow:hidden` («...антия 36 месяцев»). Min-width ≥ worst-case plaque actual
   width («Гарантия NN месяцев» ≈ 138px desktop / 120px mobile, с padding) —
   wrap не уже плашки, фото центрируется на чуть более широкой подложке (та же
   surface BG что у .xf-art--photo parent — визуально invisible). */
.xf-product-card .xf-art--photo .xf-art__photo-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  /* Без border-radius намеренно (#294): радиус клипал углы full-bleed
     рендеров — искажение силуэта товара. Скругление — на карточке, не на фото. */
  overflow: hidden;
  min-width: 140px;
  justify-content: center;
}
.xf-product-card .xf-art--photo .xf-art__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 80cqi;
  max-height: 80cqi;
}

/* ─── Товар дня (#223, два состояния — #434) ───────────────
   Админ-управляемая витрина-«paper» с двумя состояниями. ОДИН товар — прежняя
   карточка: фото слева, инфо справа, ≤767px — стек (правила ниже до блока
   «Диптих» и есть это состояние; на проде оно пока единственное). ДВА товара —
   диптих `.xf-day--duo`: та же ОДНА рамка, внутри две панели через линию
   --line-soft; почему не две отдельные обведённые карточки и почему мобильная
   панель компактная — в комментарии самого блока «Диптих» ниже.
   Flat (Flat-By-Default), радиус 22px как hero/banner, 1px line-soft.
   Индиго ≤10%: только eyebrow + primary CTA. Градиента нет (Single-Gradient —
   он уже у hero). Цена — свои .xf-day-price* классы (НЕ .xf-price-* из ui.css:
   те завязаны на container-type cqi у карточки товара). Тёмная тема — через
   существующие токены (var(--surface)/--line-soft/--text*), отдельного блока
   не нужно. */
.xf-day {
  display: flex;
  gap: 44px;
  align-items: center;
  background: var(--surface);          /* workshop-card — светлее body bg */
  border: 1px solid var(--line-soft);
  /* Выделение витрины (#223, просьба владельца «заметнее»): индиго-обводка 45%
     + 4% индиго-подтон. Full border + background tint — приёмы, прямо
     разрешённые DESIGN.md (Don't про цветной border-left предлагает именно их).
     2px сплошного accent пробовали — читается как focus/selected и ломает
     One-Voice Indigo. Пары строк ниже — прогрессивное улучшение поверх базовых
     border/background выше: браузер без color-mix остаётся на line-soft/surface. */
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  border-radius: 22px;
  padding: 28px;
}

/* Фото — редундантная mouse-цель (aria-hidden в разметке): letterbox на
   surface-3, фото object-fit contain, как арт-плитки.
   Пропорции десктопа (critique #223 P1 «полупустая карточка»): медиа 46%
   (до 600px) + инфо-колонка max-width 640px → на 1440 карточка заполнена,
   правый провал ~40px вместо трети ширины. Медиа-кап меньше 380px не ставить —
   возвращает провал. */
.xf-day__media {
  flex: 0 0 46%;
  max-width: 600px;
  aspect-ratio: 16 / 11;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border-radius: 16px;
  overflow: hidden;
}
.xf-day__media--empty { min-height: 200px; }
/* Под фото — чистый белый (тот же trade-off, что html[data-theme] у
   .xf-art--photo выше: baked near-white бэкграунды jpeg на тинтованной подложке
   дают рваный «бордюр»; на #fff край сливается). Пустой тайл остаётся тональным.
   [#361] Раньше правило стояло только под html[data-theme="dark"], и в светлой
   теме плита оставалась тонированной (--surface-3 ≈ #E8E8EE) — ровно тот же
   край фотографии был виден прямоугольником, проверено на /dev/ и на проде
   2026-08-06. Карточки товара ниже по странице в светлой теме уже кладут фото
   на чистый --surface, так что самый крупный снимок страницы был единственным
   с видимым краем. Теперь симметрично в обеих темах. */
.xf-day__media:not(.xf-day__media--empty) {
  background: #fff;
  /* [#420] Плита заодно — query-контейнер для фото и плашки гарантии; зачем
     именно size и почему только непустая плита — в блоке ниже. */
  container-type: size;
}
/* [#420] Плашка гарантии поверх фото «Товара дня». Визуал плашки — общий с
   карточкой листинга (.xf-product-card__guarantee ниже в этом же файле),
   здесь только позиционирование: её задача — физически перекрыть чужую
   ватермарку catalog.onliner.by, выжженную в jpeg.
   Замер живого фото (1000×594, /upload/iblock/605/…, 2026-08-19): ватермарка
   лежит в правом нижнем углу КАДРА — ~8%×2% кадра, отступ ~2.5% от правого
   края и ~3% от нижнего. Кадр центрирован на плите и уже её (max 88%), так
   что по углу плиты плашка ватермарку бы не задела: якорем должен быть кадр.
   Механика — та же, что у карточки: плита задаёт систему координат, обёртка
   ужимается до фактического image-rect (flex: 0 0 auto), а размер фото
   берётся от плиты в cq-единицах — процентам тут разрешаться не во что
   (высота обёртки auto). container-type: size, а НЕ inline-size: плита
   широкая (16/11), высоту надо мерить по cqb — 88cqi по высоте вылезло бы
   за плиту и фото обрезалось бы её overflow: hidden. Пустая плита
   (--empty) контейнером не делается: фото в ней нет, а size-containment
   лишний раз трогать её min-height незачем. */
.xf-day__photo-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  max-width: 100%;
  /* Плашка прижата к right:0/bottom:0 обёртки и на узком/портретном кадре
     оказывается шире него — перелив ушёл бы влево и обрезался по overflow
     («…арантия 60 мес.»). Порог ≥ фактической ширины плашки: значения свойства
     в базе — «12/24/36/60 мес.», подпись при этом уже собственного
     min-width: 128px, то есть 128px и есть худший случай (замерено в браузере
     2026-08-19). 140px — тот же порог, что у .xf-art__photo-wrap карточки, с
     запасом на более длинное значение из 1С. Узкое фото при этом центрируется
     на чуть более широкой подложке — она прозрачная, видно ту же белую плиту. */
  min-width: 140px;
  overflow: hidden;
}
.xf-day__photo {
  max-width: 88cqi;
  max-height: 88cqb;
  width: auto;
  height: auto;
  object-fit: contain;
}

.xf-day__info {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Eyebrow «Товар дня» — mono/uppercase/accent, дефис-риска слева (паттерн
   .xf-section-head__eyebrow), + карандаш админа в одну строку. */
.xf-day__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.xf-day__eyebrow {
  /* [#361] Тег —  (у секции не было доступного имени, см. day.php).
     Типографику держит этот класс, поэтому вид от смены тега не меняется:
     гасим только собственный margin заголовка. */
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-2);
}
.xf-day__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--accent-2);
}

/* Имя-ссылка на PDP — единственная семантическая ссылка блока (title-типографика). */
.xf-day__name {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--text);
  text-decoration: none;
  transition: color .15s;
}
@media (hover: hover) {
  .xf-day__name:hover { color: var(--accent-2); }
}

/* Цена — живая сверху (mono), зачёркнутая ПОД ней (Onest, не mono — слэш-ноль
   поверх line-through дал бы двойное перечёркивание; см. price-strike.md §4). */
.xf-day-price {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}
.xf-day-price__val {
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--text);
  white-space: nowrap;
}
.xf-day-price__cur {
  color: var(--text-3);
  font-size: 0.55em;
  font-weight: 500;
  margin-left: 5px;
}
.xf-day-price__was-line {
  display: flex;
  align-items: baseline;
  margin-top: 5px;
}
.xf-day-price__was {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  line-height: 1.1;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;
}
.xf-day-price__val--request {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: -0.2px;
}

/* Таймер: подпись + тикающие цифры (mono, data) + .xf-sr-only честная дата.
   Тихий тональный чип (surface-2, line-soft) — визуальный якорь без urgency-
   окраски: никакого красного, только нейтральная плашка. */
.xf-day__timer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface-2);
}
.xf-day__timer-label {
  font-size: 13px;
  color: var(--text-2);
}
/* [#521] «Осталось» + цифры — ОДИН элемент полосы: полоса переносит строку
   только между своими детьми, а группа — flex без wrap, своих детей по
   строкам не раскладывает. Подпись и цифры уезжают вниз вместе или
   остаются в строке вместе. Без обёртки на 768 при «15д» вниз срывались
   одни цифры. Если группе тесно и в своей строке (одиночная витрина на
   320 при двузначных часах), сжимается подпись: «До конца акции»
   переносится по словам рядом с цифрами — так же, как уже сейчас в сетке
   полосы #519 на этой ширине. «Осталось» диптиха — одно слово, ему
   хватает места и на 320. gap: inherit — зазор внутри
   группы тот же, что был между подписью и цифрами как соседями по полосе
   (12px одиночной витрины, 10px диптиха), ничего нового не вводим. */
.xf-day__countdown {
  display: flex;
  align-items: center;
  gap: inherit;
}
/* [#519] Плашка полосы. Текст у неё один из двух: «Акция» или — по галке
   владельца в элементе товара дня — «Минимальная цена в Беларуси» (решение
   владельца 2026-09-15: подпись ВМЕСТО «Акции», второй плашки в полосе нет).
   Вид от текста не зависит: та же обводка, тот же вес.
   Базовое правило нужно одиночной витрине: там «Акции» нет, а подпись по
   галке появляется — и без него она была бы голым текстом. Диптих правит
   поверх только кегль (.xf-day--duo .xf-day__tag ниже, #484). */
.xf-day__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--accent-line);
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.xf-day__clock {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.xf-day__unit {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.xf-day__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
}
.xf-day__sep {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
}
/* [#470] Единица дней прячется атрибутом hidden, пока дней ноль (ставит
   сервер, переключает app.js). Своё display: inline-flex у .xf-day__unit
   перебило бы UA-правило [hidden] — возвращаем его явно. */
.xf-day__unit[hidden] { display: none; }

.xf-day__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
/* CTA несёт свою иконку + подпись — совпадает с базовым .xf-btn (индиго). */
.xf-day__cart { gap: 8px; }
/* [#348] Двойная иконка и двойная подпись, переключаемые классом .is-added (его
   ставит app.js → applyCartBtnState) — тот же приём, что у листинговой
   .xf-product-card__cart-btn выше и у .xf-btn-buy на PDP (product.css).
   inline-flex на обёртках: без него svg сидит на baseline текста и подпись
   уезжает на пиксель вниз. */
.xf-day__cart-icon,
.xf-day__cart-label { display: inline-flex; align-items: center; }
.xf-day__cart:not(.is-added) .xf-day__cart-icon--check,
.xf-day__cart:not(.is-added) .xf-day__cart-label--added,
.xf-day__cart.is-added .xf-day__cart-icon--bag,
.xf-day__cart.is-added .xf-day__cart-label--idle { display: none; }
/* [#348] «В корзине» — нейтральный вид ровно теми же токенами, что у карточки и
   PDP (#326): ступень поверхности --surface-3, полный ink --text, полная линия
   --line. Зелёного здесь не было и не появляется — зелёный в шаблоне значит «в
   наличии» (.xf-product-card__stock--in), и кнопка «уже в корзине» им быть не
   должна. Состояние несут форма (галка), слово («В корзине») и ступень
   поверхности — три нецветовых признака, color-blind safe (PRODUCT.md).
   Glow базового .xf-btn гасим: он рисуется от --accent и на нейтральной кнопке
   читался бы как индиго-CTA. Заодно чинится иерархия — после добавления товара
   primary-действие на блоке закончилось, дальше «Подробнее» (DESIGN.md, The
   Single-Primary Rule). Hover-lift базовой .xf-btn не трогаем: клик по этой
   кнопке — навигация в корзину, кликабельность остаётся живой. */
.xf-day__cart.is-added {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
}
/* Hover: поверхность остаётся нейтральной, «кликабельно» говорят индиго-ink
   --accent-2 и индиго-линия --accent-line — как у .is-added на карточке и на PDP.
   box-shadow: none повторён здесь намеренно: glow живёт на базовом .xf-btn
   (0,1,0) и его гасит правило покоя выше (0,2,0), но если у .xf-btn когда-нибудь
   появится свой hover-glow (у .xf-btn-buy на PDP он есть), это правило (0,3,0)
   не даст ему вернуться на нейтральную кнопку. */
@media (hover: hover) {
  .xf-day__cart.is-added:hover {
    background: var(--surface-3);
    color: var(--accent-2);
    border-color: var(--accent-line);
    box-shadow: none;
  }
}

@media (max-width: 767px) {
  .xf-day {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 18px;
  }
  .xf-day__media {
    flex-basis: auto;
    max-width: none;
    width: 100%;
    aspect-ratio: 16 / 10;
  }
  .xf-day-price__val { font-size: 26px; }
  .xf-day__actions { flex-wrap: nowrap; }
  .xf-day__cart { flex: 1 1 0; }
}

/* ─── [#434] Диптих: два товара дня ────────────────────────
   Второе состояние блока. Рамка — та же самая: одна «бумага» с индиго-обводкой
   45%, подтоном 4%, радиусом 22 и паддингом 28. Секция остаётся ОДНИМ
   предметом на верстаке: две отдельные обведённые карточки — это «identical
   card grid» из DESIGN.md → Don't, плюс вторая индиго-поверхность поверх
   лимита One-Voice Indigo. Панели делит одна линия --line-soft в 1px.
   Раскладки: ≥1200 — две колонки, панель горизонтальная (плита слева), линия
   вертикальная; 768–1199 — те же две колонки, но панель вертикальная (плита во
   всю ширину колонки сверху, инфо под ней); ≤767 — панели друг под другом,
   линия горизонтальная, панель сжимается в «плита 112px | имя, наличие, цена»,
   а таймер и кнопки уходят строкой на всю ширину. Компактная мобила — не
   экономия ради экономии: два фото во всю ширину утащили бы полку категорий и
   «Что сейчас берут» на экран вниз, а мобильный — главный сценарий покупки
   (PRODUCT.md); оба товара должны быть видны без свайпа.

   ВЫРАВНИВАНИЕ ПАРЫ (≥768). Панели — одна вещь, а не два соседних объявления,
   поэтому наличие, цена, таймер и кнопки обязаны стоять на одной линии в обеих.
   Само собой это не выходит: имена разной длины (три строки против двух)
   сдвигали правый столбец на ~26px вверх. Ряды задаёт РАМКА, а панель садится
   на них через `grid-template-rows: subgrid`; .xf-day__info при этом
   растворяется (display: contents), чтобы её дети стали ячейками этих общих
   рядов. Ряд «наличия» получает высоту по самой высокой из двух панелей — и
   обе следующие строки стартуют с одной отметки.
   Порядок рядов в диптихе — не карточка товара, а объявление об акции:
   СРОК → товар → наличие → цена → кнопки. Отсчёт открывает панель полосой во
   всю её ширину (владелец, 2026-08-21: «таймер не виден, непонятно, что это
   акция»; во второй редакции чип сидел в текстовой колонке и читался как её
   элемент). Ряды: 1 полоса отсчёта, 2 плита (её занимает планшет; на ≥1200
   ряд пустой — там плита стоит слева и тянется по рядам 3–6), 3 имя,
   4 наличие, 5 цена, 6 кнопки, 7 карандаш.
   Вертикальный ритм несут margin'ы самих элементов, а НЕ row-gap трека: у
   товара может не быть наличия или срока, и пустой ряд с row-gap оставлял бы
   висящий зазор. Правило простое: зазор ПОД необязательным элементом (чип,
   плита) — его собственный margin-bottom, зазор НАД обязательным (наличие,
   цена, кнопки) — margin-top. Пропал элемент — пропал и его отступ; а раз
   отступы у обеих панелей одинаковые, выравнивание от них не страдает.
   Одиночные правила выше не тронуты — состояние «один товар» осталось
   прежним попиксельно. */
.xf-day--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Зазоров нет ни по одной оси: горизонтальный воздух вокруг разделителя дают
     паддинги панелей (линия стоит ровно посередине), вертикальный — margin'ы
     элементов внутри панели (см. шапку блока). */
  gap: 0;
  align-items: stretch;
}
/* Шапки у рамки нет (#470). Была (#434):  «Товары дня» + подзаголовок
   «пока идёт отсчёт» — владелец 2026-09-02 снял: «просто занимает место, и
   так виден таймер». Заголовок остался только для скринридера (.xf-sr-only,
   абсолют — ячейки сетки не занимает), ряды рамки начинаются с панелей.
   .xf-day__eyebrow в диптихе не используется, его правила остаются
   одиночной витрине. */

.xf-day__item {
  min-width: 0;
  padding-right: 28px;
}
.xf-day__item + .xf-day__item {
  padding-right: 0;
  padding-left: 28px;
  border-left: 1px solid var(--line-soft);
}

/* Общая для обоих десктопных ярусов механика: ряды на рамке, панель — subgrid,
   инфо-колонка растворяется, ритм на margin'ах.
   Ряды панели: 1 — плита (на ≥1200 пустой: там плита стоит в своей колонке и
   span'ится по всем рядам), 2 — имя, 3 — наличие, 4 — цена, 5 — таймер,
   6 — кнопки, 7 — карандаш админа. Номера у обоих ярусов одни и те же, а
   колонка инфо-части адресуется с конца (-2 / -1): на ≥1200 это вторая колонка
   из двух, на 768–1199 — единственная. */
@media (min-width: 768px) {
  /* [#470] Ряда шапки нет: семь рядов панели — это и есть все ряды рамки,
     панель садится на них с первого. */
  .xf-day--duo { grid-template-rows: repeat(7, auto); }
  .xf-day--duo .xf-day__item {
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
    /* start, а не дефолтный stretch: ячейка ряда шириной во всю колонку
       растянула бы чип таймера в полосу-«поле» — в одиночной витрине он
       обжимает свой текст (там инфо-колонка была flex с align-items:
       flex-start). Плите растяжка нужна, ей возвращаем stretch. */
    justify-items: start;
  }
  .xf-day--duo .xf-day__info { display: contents; }
  .xf-day--duo .xf-day__media          { grid-column: 1 / 2; justify-self: stretch; }
  /* justify-self отменяет justify-items: start панели: полоса — единственная
     ячейка, которой нужна вся ширина, остальные жмутся к контенту. */
  .xf-day--duo .xf-day__timer          { grid-column: 1 / -1;  grid-row: 1; margin-bottom: 14px; justify-self: stretch; }
  .xf-day--duo .xf-day__name           { grid-column: -2 / -1; grid-row: 3; }
  .xf-day--duo .xf-product-card__stock { grid-column: -2 / -1; grid-row: 4; margin-top: 14px; }
  .xf-day--duo .xf-day-price           { grid-column: -2 / -1; grid-row: 5; margin-top: 14px; }
  .xf-day--duo .xf-day__actions        { grid-column: -2 / -1; grid-row: 6; margin-top: 16px; }
  .xf-day--duo .xf-day__admin          { grid-column: -2 / -1; grid-row: 7; margin-top: 14px; }
}

/* Браузер без subgrid (Chrome до 117, Safari до 16): рядов у панели нет, и
   она возвращается к колонке/строке на flex — пара перестаёт выравниваться
   построчно, но линия кнопок совпадает, как у карточек листинга
   (.xf-product-card__cart-btn выше — тот же приём margin-top: auto).
   padding-top держит минимальный зазор, когда свободного места нет и auto-
   margin схлопывается в ноль. */
@supports not (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .xf-day--duo { grid-template-rows: none; }
    .xf-day--duo .xf-day__item { grid-row: auto; display: flex; flex-direction: column; }
    .xf-day--duo .xf-day__info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex: 1 1 auto;
      min-width: 0;
    }
    .xf-day--duo .xf-day__actions { margin-top: auto; padding-top: 16px; }
  }
  @media (min-width: 1200px) {
    .xf-day--duo .xf-day__item { flex-direction: row; align-items: stretch; gap: 22px; }
    /* min-height: 100% из сеточного правила ниже здесь остаётся в силе и
       работает на нас: плита берёт высоту панели, прямоугольник сохраняется
       и без subgrid. */
    .xf-day--duo .xf-day__media { flex: 0 0 42%; min-width: 220px; align-self: center; }
  }
}

/* Пустая плита в диптихе не тянется до одиночных 200px — высоту задаёт
   пропорция. */
.xf-day--duo .xf-day__media--empty { min-height: 0; }
/* Фото на плите крупнее, чем в одиночной витрине (там 88cq): предмет — козырь
   секции, а в диптихе плита и так вдвое меньше. */
.xf-day--duo .xf-day__photo {
  max-width: 94cqi;
  max-height: 94cqb;
}

/* max-width снят (у одиночной он 640px), ритм колонки держат margin'ы
   элементов — см. шапку блока; gap здесь сложился бы с ними вдвое. */
.xf-day--duo .xf-day__info {
  max-width: none;
  gap: 0;
}
/* Карандаш админа — per-элемент, поэтому он в панели, а не в шапке рамки.
   Покупателю xf_admin_edit_pencil отдаёт пустоту, и обёртка в разметке тогда
   не печатается — лишней строки в сетке нет. */
.xf-day--duo .xf-day__admin { display: flex; }
/* В сетке место карандашу назначает grid-row, а в flex-состояниях
   (count=1, фолбэк без subgrid) он бы всплыл первым — он первый в разметке
   панели. order его возвращает вниз; в grid свойство игнорируется. */
.xf-day--duo .xf-day__admin { order: 1; }
/* Имя переносится целиком, без clamp: у видеокарт модель уезжает в третье
   слово, а обрезать её значит спрятать то, за чем покупатель пришёл. */
.xf-day--duo .xf-day__name {
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.3px;
  /* [#434 polish] Строки имени выровнены по длине: без balance модель рвётся
     по дефису внутри артикула («NE75070019K9-» / «GB2050S»), а последняя
     строка остаётся огрызком. Число строк то же, браузер без поддержки
     (Safari < 17.5) просто переносит как раньше. */
  text-wrap: balance;
}
.xf-day--duo .xf-day-price__val { font-size: 30px; }
/* Зачёркнутая — на пункт крупнее одиночных 14px: в диптихе она стоит рядом с
   30px-ценой и на 14px читалась как сноска. Ярлыка процентов нет и не будет
   (docs/price-strike.md). */
.xf-day--duo .xf-day-price__was { font-size: 15px; }
/* Чип отсчёта — «деловая шапка» панели, а не пятый элемент в столбце. В
   одиночной витрине он тональный (surface-2) и это работает: там он один на
   тонированной рамке. В диптихе тональный чип на тонированной рамке слился с
   фоном, а белая «бумага» с серой подписью читалась строкой метаданных
   (владелец 2026-09-02: «не считывается, что это акция»). Теперь полоса —
   объявление об акции: индиго-подтон 7% (fallback --accent-dim), плашка
   «Акция» слева, цифры крупнее подписи. Линии у полосы нет (distill): рамка
   блока → рамка полосы → белая плита были тремя вложенными карточками,
   полосу держит один подтон. Ни красного, ни оранжевого, ни пульсации: срок
   сообщается, а не давит (PRODUCT.md, честный тон). */
.xf-day--duo .xf-day__timer {
  background: var(--accent-dim);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid transparent;
  border-radius: 12px;
  /* 9px + 24px-цифры + рамка ≈ 48 по высоте — полоса заметна, но не спорит
     с фото по весу. */
  padding: 9px 14px;
  gap: 10px;
}
/* Три вещи в полосе — две группы. Плашка одна слева: она называет («Акция»,
   а по галке владельца — «Минимальная цена в Беларуси», #519; плашка одна и
   та же, меняется только текст). «Осталось» + цифры — одна группа справа:
   она считает. Отжимает её к правому краю margin-left: auto у группы
   отсчёта (.xf-day__countdown с #521, до него — у подписи; до #519 это
   делал зеркальный margin-right: auto у плашки —
   результат тот же, но с длинной подписью, когда отсчёт уходит второй
   строкой, auto нужен именно на нём); space-between на самой полосе не
   годится — до #521 подпись и цифры разъехались бы друг от друга, а с
   группой она, одна во второй строке, встала бы влево. Подпись
   стояла вплотную к плашке и в том же индиго — две надписи одного веса
   читались одной фразой «Акция Осталось» (владелец 2026-09-03); подпись
   осталась нейтральной text-2 из базового правила, индиго в полосе одно
   слово. Плашка — тег, не кнопка (Pill-Is-Not-Button): белая «бумага» с
   индиго-линией и индиго-текстом, НЕ заливка — сплошная весила столько же,
   сколько CTA «В корзину» (владелец: «перебивает на себя внимание»,
   Single-Primary). Индиго-маркеров в панели два: плашка + CTA, как было
   (иконка часов + CTA) — One-Voice Indigo не сдвинут. */
/* [#484] 12 → 14px (Илья 2026-09-03: «плашка, „Осталось“ и д/ч/м слишком
   мелкие, явно больше»). Остальной вид плашки — в базовом .xf-day__tag выше:
   в диптихе и одиночной витрине она одна и та же, кроме кегля. */
.xf-day--duo .xf-day__tag { font-size: 14px; }
/* [#484] Подпись 13 → 15px и единицы 11 → 14px: при цифрах 24px они терялись,
   полоса читалась «одни цифры». Цифры не трогаем — иерархия та же. */
/* [#519] margin-left: auto — тот же отжим группы «Осталось + цифры» вправо,
   что раньше давал margin-right: auto у плашки «Акция» (см. комментарий
   выше). Работает одинаково и с подписью, и без неё, и когда подпись ушла
   второй строкой: в первой строке остаются плашка слева и отсчёт справа.
   [#521] Отжим висит на самой группе .xf-day__countdown, а не на подписи:
   ушла группа второй строкой — она и там прижата вправо, как у #519. */
.xf-day--duo .xf-day__timer-label { font-size: 15px; }
.xf-day--duo .xf-day__countdown { margin-left: auto; }
.xf-day--duo .xf-day__sep { font-size: 14px; }
/* [#479→#486] Цифры отсчёта цветные — владелец хотел «таймер заметнее».
   Сначала индиго (#479, 2026-09-03), затем по сравнению двух вариантов на
   /dev/ выбран зелёный (#486, 2026-09-04): тот же --success, что у
   «В наличии» — другого зелёного в системе нет; два зелёных в карточке
   (наличие + отсчёт) — осознанное решение владельца. Только цвет цифр:
   единицы «д/ч/м» и подпись «Осталось» нейтральные, размер не растёт. */
.xf-day--duo .xf-day__num { font-size: 24px; color: var(--success); }
/* [#489] Два решения владельца 2026-09-07 (обкатано на /dev/, гейт снят).
   1. CTA «В корзину» — тот же --success, что у цифр таймера: зелёный в блоке
   получает второй смысл (кроме «В наличии») — осознанное исключение из
   Single-Hue-per-Meaning по просьбе владельца, только внутри .xf-day--duo;
   остальные кнопки сайта — индиго. Glow базового .xf-btn перекрашен под ту же
   кнопку. Только светлая: в тёмной кнопка — обычная фиолетовая клавиша
   (блок «Товар дня в тёмной теме» ниже). Состояние .is-added не трогаем: оно
   нейтральное (см. .xf-day__cart.is-added выше). */
.xf-day--duo .xf-day__cart:not(.is-added) {
  background: var(--success);
  box-shadow: 0 6px 20px -8px var(--success), 0 0 0 1px oklch(1 0 0 / 0.05) inset;
}
/* 2. Разделитель панелей = обводка рамки: тот же 1.5px и тот же индиго 45%
   (см. .xf-day border выше; без color-mix — fallback line-soft остаётся от
   базового правила .xf-day__item + .xf-day__item). Мобильная раскладка
   (<768) переворачивает линию в border-top — см. мобильное правило ниже. */
@media (min-width: 768px) {
  .xf-day--duo .xf-day__item + .xf-day__item {
    border-left-width: 1.5px;
    border-left-color: color-mix(in srgb, var(--accent) 45%, transparent);
  }
}
/* ≥1200: панель горизонтальная — плита в первой колонке по рядам 3–6;
   инфо-часть во второй. Плита квадратная (#470): широкоформатным фото
   (оперативка, платы) достаются белые поля сверху и снизу, зато сам кадр
   шире, чем был на 16/11, а вертикальные (приставка) растут в полный рост.
   Плита не уже 240px, инфо-колонке остаётся ≥263px на 1200 — единственной
   кнопке хватает. */
@media (min-width: 1200px) {
  /* [#470 layout] Лишняя высота квадратной плиты над текстовой колонкой шла
     в ряды 3–6 поровну: ряд наличия высотой 29px под 14px-метку, кнопка
     отцентрована в своём ряду и её низ не совпадал с низом плиты на 7px.
     Остаток забирает один ряд — кнопки: имя, наличие и цена стоят плотной
     группой сверху, кнопка садится вниз, её низ = низ плиты. */
  .xf-day--duo { grid-template-rows: auto auto auto auto auto 1fr auto; }
  .xf-day--duo .xf-day__actions { align-self: end; }
  /* [#470] Плита: колонка 46% (было 42) с потолком 340px, квадрат вместо
     16/11 — на 1440 это 284×284 против прежних 259×225, фото крупнее по
     обеим осям (владелец: «раз места больше — увеличить фото»). Текстовой
     колонке на 1200 остаётся ≥263px, кнопке нужно меньше. */
  .xf-day--duo .xf-day__item {
    grid-template-columns: minmax(240px, min(46%, 340px)) minmax(0, 1fr);
    column-gap: 22px;
  }
  .xf-day--duo .xf-day__media {
    /* Плита занимает ровно ряды 3–6: верх плиты = верх имени, низ = низ
       кнопок, и панель складывается в прямоугольник [полоса] / [плита |
       текст]. Раньше плита тянулась по всем рядам и висела по центру между
       баром и кнопками — её края не совпадали ни с чем (владелец,
       2026-08-22: «layout странный, растянутый»).
       align-self: start + min-height: 100% вместо stretch: проценты меряются
       от площади рядов, поэтому при длинном тексте плита растягивается до
       низа кнопок, а при коротком (нет наличия, имя в строку) не проваливается
       ниже своих 16/11 — stretch отобрал бы у неё пропорцию. */
    grid-row: 3 / 7;
    align-self: start;
    min-height: 100%;
    aspect-ratio: 1 / 1;
  }
  /* Осталась одна панель — истёкшую снял app.js → initDayOffer и уменьшил
     data-xf-day-count. Панель занимает всю рамку и возвращает геометрию
     одиночной витрины: раз товар остался один, он и должен выглядеть как
     «Товар дня» (заголовок JS тоже переводит в единственное число), а не как
     половина диптиха, растянутая вдвое. Subgrid здесь не нужен и снят —
     выравнивать не с кем, а flex возвращает вертикальное центрирование
     инфо-колонки, как в одиночной витрине. */
  .xf-day--duo[data-xf-day-count="1"] { grid-template-columns: 1fr; }
  .xf-day--duo[data-xf-day-count="1"] .xf-day__item {
    grid-template-rows: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 44px;
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
  }
  .xf-day--duo[data-xf-day-count="1"] .xf-day__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    max-width: 640px;
  }
  /* Панель снова flex-строка: сеточные align-self/min-height плиты снимаем,
     иначе она прилипнет к верху и потащит за собой процентную высоту. */
  .xf-day--duo[data-xf-day-count="1"] .xf-day__media {
    flex: 0 0 46%;
    max-width: 600px;
    align-self: center;
    min-height: 0;
  }
  .xf-day--duo[data-xf-day-count="1"] .xf-day__name { font-size: 26px; letter-spacing: -0.4px; }
  .xf-day--duo[data-xf-day-count="1"] .xf-day-price__val { font-size: 34px; }
  .xf-day--duo[data-xf-day-count="1"] .xf-day__timer { padding: 10px 16px; gap: 12px; }
  .xf-day--duo[data-xf-day-count="1"] .xf-day__num { font-size: 20px; }
}

/* [#519] Полоса с длинной подписью вместо «Акции»: где она не встаёт в одну
   строку с отсчётом, полоса становится сеткой в два ряда — плашка первым
   рядом слева, «Осталось» + цифры вторым рядом справа, ЦЕЛИКОМ.
   Сетка, а не перенос flex'ом: flex при нехватке места уносит вниз ПОСЛЕДНИЙ
   элемент строки, то есть цифры, — «Осталось» осталось бы наверху при плашке,
   оторванное от своих цифр. Сетка ставит границу там, где нужно нам, и плашка
   при этом остаётся по своему тексту (flex-basis: 100% растянул бы её в
   полосу-«поле» — так выглядела первая редакция #519).
   [#521] С группой .xf-day__countdown flex уносил бы вниз уже всю группу,
   но сетка остаётся: она кладёт два ряда заранее, с запасом (порог ниже),
   а не впритык, и прижимает группу вправо и в одиночной витрине, где
   отжима margin-left: auto нет.
   Порог 1280 взят замером на прод-главной (2026-09-15): полоса в половине
   диптиха — это ширина окна / 2 − 102 (1200 → 498px, 1280 → 538, 1440 → 618),
   а содержимое в одну строку просит 480px при двузначных днях и 494px при
   трёхзначных (акция на год — ACTIVE_TO ставит владелец, верхней границы у
   срока нет). На 1200 в самом тяжёлом случае остаётся 2px — не запас; 1280
   даёт 44px, этого хватает и на запасной шрифт, если Onest не загрузился.
   Ошибиться безопаснее в сторону двух рядов: лишняя строка — мелочь, а
   сорвавшиеся вниз цифры — сломанная полоса.
   Правило общее для обеих раскладок: в одиночной витрине плашка мельче и
   полоса обжимает свой текст, но перенос ей нужен тот же. */
@media (max-width: 1279px) {
  .xf-day__timer--claim {
    display: grid;
    /* Первый трек — распорка (1fr): она съедает свободное место и прижимает
       «Осталось» + цифры к правому краю, ту же работу в строке делает
       margin-left: auto. Плашка кладётся поверх всех треков и держится левого
       края — justify-content: end у полосы не годится, он утащил бы вправо и
       её (замер 2026-09-15: плашка отъезжала на 31–159px от края).
       [#521] «Осталось» + цифры теперь один узел .xf-day__countdown — ему
       один трек; зазор между ними держит сама группа (gap: inherit). */
    grid-template-columns: 1fr auto;
  }
  .xf-day__timer--claim .xf-day__tag {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .xf-day__timer--claim .xf-day__countdown { grid-column: 2; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .xf-day--duo .xf-day__item {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 24px;
  }
  .xf-day--duo .xf-day__item + .xf-day__item { padding-right: 0; padding-left: 24px; }
  .xf-day--duo .xf-day__media {
    grid-row: 2 / 3;
    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 10;
  }
  /* Плита в своём ряду, воздух под ней — её собственный margin-bottom: имя
     тут не всегда следующее (между ними может стоять чип отсчёта). */
  .xf-day--duo .xf-day__media { margin-bottom: 18px; }
  /* Осталась одна панель — одна колонка и прежняя горизонталь: вертикальная
     панель на всю рамку дала бы фото-баннер в пол-экрана. Subgrid снят по той
     же причине, что и на ≥1200. */
  .xf-day--duo[data-xf-day-count="1"] { grid-template-columns: 1fr; }
  .xf-day--duo[data-xf-day-count="1"] .xf-day__item {
    grid-template-rows: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 0;
    border-left: 0;
  }
  .xf-day--duo[data-xf-day-count="1"] .xf-day__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }
  .xf-day--duo[data-xf-day-count="1"] .xf-day__media {
    flex: 0 0 40%;
    width: auto;
    max-width: 420px;
    aspect-ratio: 16 / 11;
    align-self: center;
  }
  .xf-day--duo[data-xf-day-count="1"] .xf-day__media { margin-bottom: 0; }
}

/* Узкий планшет: на 768 колонка панели даёт 315px, и в полосе отсчёта
   24px-цифры вместе с подписью в строку не помещаются — чип переносил
   отсчёт на вторую строку и вырастал вдвое (замер в браузере). До 900
   цифры 20px: с ними короткий отсчёт («5д 4ч») встаёт в одну строку,
   подпись не сокращается.
   [#521] Длинному отсчёту и 20px не хватает: у полосы на 768 внутри ~260px,
   а строка просит 265px уже при «15д 4ч» или «5д 14ч» и до ~290px при
   «120д 14ч». Дожимать кегль дальше не стали — цифры укрупняли по просьбе
   владельца (#484), а часы двузначные большую часть суток, так что и 18px
   не спасли бы. Вместо этого «Осталось» + цифры — один узел
   (.xf-day__countdown выше): не влезли — уходят второй строкой вместе,
   прижатые вправо, как в полосе #519. */
@media (min-width: 768px) and (max-width: 899px) {
  .xf-day--duo .xf-day__num { font-size: 20px; }
}

/* Мобила. .xf-day__info растворяется (display: contents), чтобы её дети стали
   ячейками сетки панели: иначе таймер и кнопки остались бы заперты в узкой
   правой колонке рядом с плитой. Ряды расставлены явно — состав колонки
   плавает (наличие и таймер бывают пустыми), на auto-раскладку тут полагаться
   нельзя. Панели здесь стоят друг под другом, выравнивать их построчно
   незачем — subgrid снимаем, у каждой панели своя сетка. Кнопки 50/50 и
   nowrap приходят из одиночного мобильного блока выше — он не завязан на
   модификатор и работает на обе раскладки. */
@media (max-width: 767px) {
  /* Одна колонка; row-gap рамки и padding-top второй панели равны, поэтому
     линия-разделитель идёт ровно посередине зазора. */
  .xf-day--duo {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 18px 0;
  }
  .xf-day--duo .xf-day__item {
    grid-row: auto;
    grid-template-rows: none;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    column-gap: 14px;
    /* row-gap 0 — ритм на margin'ах элементов, как и на десктопе: чип
       отсчёта бывает не у каждого товара, и пустой ряд с gap оставлял бы
       висящий отступ над плитой. */
    row-gap: 0;
    align-items: start;
    padding-right: 0;
  }
  .xf-day--duo .xf-day__item + .xf-day__item {
    padding-left: 0;
    padding-top: 18px;
    border-left: 0;
    /* [#489] Та же линия, что рамка (см. блок выше): 1.5px индиго 45%. */
    border-top: 1px solid var(--line-soft);
    border-top: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  }
  .xf-day--duo .xf-day__info { display: contents; }
  .xf-day--duo .xf-day__media {
    grid-column: 1;
    grid-row: 2 / span 3;
    margin-bottom: 0;
    width: 112px;
    min-width: 0;
    aspect-ratio: 1;
    /* start, а не растяжка на три ряда: иначе высоту задал бы трек, а не
       пропорция, и квадрат поехал бы. */
    align-self: start;
  }
  /* Чип отсчёта — первая строка панели во всю её ширину, дальше «плита |
     имя, наличие, цена», внизу кнопки. Тот же порядок чтения, что на
     десктопе: срок → товар → цена → действие. */
  .xf-day--duo .xf-day__timer          { grid-column: 1 / -1; grid-row: 1; margin-bottom: 12px; padding: 10px 12px; }
  .xf-day--duo .xf-day__num            { font-size: 20px; }
  .xf-day--duo .xf-day__name           { grid-column: 2; grid-row: 2; font-size: 16px; line-height: 1.3; }
  .xf-day--duo .xf-product-card__stock { grid-column: 2; grid-row: 3; margin-top: 8px; }
  .xf-day--duo .xf-day-price           { grid-column: 2; grid-row: 4; margin-top: 8px; }
  .xf-day--duo .xf-day-price__val      { font-size: 22px; }
  .xf-day--duo .xf-day__actions        { grid-column: 1 / -1; grid-row: 5; margin-top: 14px; }
  .xf-day--duo .xf-day__admin          { grid-column: 1 / -1; grid-row: 6; margin-top: 10px; }
  /* Плашка гарантии на 112-й плите не рисуется. Её работа (#420) — перекрыть
     ватермарку catalog.onliner.by, а та занимает ~8%×2% КАДРА: на плите 112px
     это примерно 8×2 пикселя, которые и так не прочесть. Закрывать нечего, а
     плашка при этом ложилась 9-м кеглем поперёк двух третей фото — на мобиле
     фото единственный опознавательный знак товара. В одиночной раскладке и в
     состоянии «остался один товар» плита во всю ширину, кадр крупный,
     ватермарка читаема — там плашка остаётся. */
  .xf-day--duo .xf-product-card__guarantee { display: none; }
  /* Осталась одна панель — плита во всю ширину и инфо колонкой под ней, то
     есть геометрия одиночной мобильной витрины. */
  .xf-day--duo[data-xf-day-count="1"] .xf-day__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding-top: 0;
  }
  .xf-day--duo[data-xf-day-count="1"] .xf-day__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 16px;
  }
  .xf-day--duo[data-xf-day-count="1"] .xf-day__media {
    width: 100%;
    aspect-ratio: 16 / 10;
    align-self: stretch;
    margin-bottom: 0;
  }
  /* Панель снова flex-колонка, ритм держит её gap — свои margin'ы сеточных
     рядов гасим, иначе сложатся с ним. */
  .xf-day--duo[data-xf-day-count="1"] .xf-day__timer { margin-bottom: 0; }
  .xf-day--duo[data-xf-day-count="1"] .xf-product-card__stock,
  .xf-day--duo[data-xf-day-count="1"] .xf-day-price,
  .xf-day--duo[data-xf-day-count="1"] .xf-day__actions,
  .xf-day--duo[data-xf-day-count="1"] .xf-day__admin { margin-top: 0; }
  .xf-day--duo[data-xf-day-count="1"] .xf-day__name { font-size: 26px; line-height: 1.2; letter-spacing: -0.4px; }
  .xf-day--duo[data-xf-day-count="1"] .xf-day-price__val { font-size: 26px; }
  .xf-day--duo[data-xf-day-count="1"] .xf-product-card__guarantee { display: block; }
}

/* ─── Товар дня в тёмной теме ─────────────────────────────────
   Нейтральная рамка с кромкой, без индиго-обводки и подтона, без света за
   контуром. Плашка «Акция» — залитая краска действия; полоса таймера —
   прозрачная с рамкой. Цифры отсчёта у владельца зелёные (#486/#489) — в
   тёмной светятся, как значения фактов вывески; кнопка «В корзину» —
   обычная фиолетовая клавиша, а не зелёная. Перебивает базовые правила
   выше специфичностью (0-2-1 … 0-4-1), в том числе мобильные. */
html[data-theme="dark"] .xf-day {
  border: 1px solid oklch(1 0 0 / 0.10);
  background: var(--surface);
  box-shadow: var(--nx-edge);
}
html[data-theme="dark"] .xf-day--duo .xf-day__item + .xf-day__item { border-color: var(--line-soft); }
html[data-theme="dark"] .xf-day__tag {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
}
html[data-theme="dark"] .xf-day__timer {
  background: transparent;
  border-color: var(--line);
}
html[data-theme="dark"] .xf-day--duo .xf-day__num { color: var(--nx-core); text-shadow: var(--nx-glow); }
html[data-theme="dark"] .xf-day--duo .xf-day__cart:not(.is-added) {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--nx-key);
}

/* ─── ProductStrip ────────────────────────────────────────── */
.xf-products__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 20px;
  flex-wrap: wrap;
}
/* Rail freshness caption — sits opposite title, mono small text-3.
   Anchors «Только что завезли» / «Что сейчас берут» / etc. claims with
   concrete date so freshness isn't a vague promise. Applied via JBM mono
   to read as data, not narrative. */
.xf-products__freshness {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.3px;
}
.xf-products__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.xf-product-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  color: var(--text);
  display: flex;
  flex-direction: column;
  container-type: inline-size;   /* lets .xf-price__val size to the card width (cqi) so the price never overflows/clips on narrow grids */
}
@media (hover: hover) {
  .xf-product-card:hover {
  border-color: var(--accent-line);
  transform: translateY(calc(-2px * var(--xf-motion, 1)));
  box-shadow: var(--shadow-card);
}
}
/* Тёмная тема (везде, где есть карточка, в том числе на главной): поверхность
   ловит свет верхней кромкой; наведение — рамка акцента (правило выше) и свет,
   упавший под карточку, вместо тени. Фото — лайтбокс (.xf-art--photo выше),
   вставлен в рамку карточки с отступом. */
html[data-theme="dark"] .xf-product-card { box-shadow: var(--nx-edge); }
@media (hover: hover) {
  html[data-theme="dark"] .xf-product-card:hover {
    box-shadow: var(--nx-edge), 0 18px 40px -22px oklch(0.56 0.25 300 / 0.8);
  }
}
html[data-theme="dark"] .xf-product-card__image {
  margin: 8px 8px 0;
  border-radius: 10px;
}
/* Overlay-link covers the whole card for click-through to detail page.
   Cart button sits above (z-index:2) and intercepts its own clicks. */
.xf-product-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-decoration: none;
  cursor: pointer;
}
.xf-product-card__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 16px;
}
/* Фото-зона и стикеры декоративны для кликов: img (z:1, позже __link в DOM →
   рисуется выше) и плашки z:2 перехватывали клик — карточка открывалась только
   ВОКРУГ картинки (баг Вадима 2026-06-10). Пропускаем клик сквозь них к
   __link-оверлею; интерактив не задет — like-icons и cart-btn сиблинги .xf-art
   (pointer-events наследуется только вниз). PDP-галерею (.xf-product-gallery,
   zoom) не трогаем — скоуп строго .xf-product-card. */
.xf-product-card .xf-art,
.xf-product-card__stickers {
  pointer-events: none;
}
.xf-product-card__image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
.xf-product-card__stickers {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
}
/* [#304] Плашка тихая ПО УМОЛЧАНИЮ. Раньше «Хит», «Новинка» и «Рекомендуем»
   приезжали из одного справочника PROPERTY_HIT и все красились в accent —
   три индиго-плашки кричали в один голос и ни одна не выигрывала. Теперь
   accent выдаётся явно (--hit, только подпись «Хит»), а всё остальное —
   включая значение, которое админ заведёт завтра, — остаётся меткой.
   Геометрия/шрифт/трекинг у всех вариантов одинаковые: семья читается как
   одна система, в которой один участник повышен. Отличие только в заливке.
   Рамка --line, а не --line-soft из Pill-вокабуляра DESIGN.md: плашка лежит
   поверх произвольной фотографии, полупрозрачная рамка слилась бы с
   собственной непрозрачной заливкой плашки и край бы пропал. */
.xf-product-card__sticker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--line);
  padding: 4px 9px;
  border-radius: 999px;
  line-height: 1;
}
.xf-product-card__sticker--hit {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.xf-product-card__sticker--sale {
  background: oklch(0.70 0.18 32);
  color: #fff;
  border-color: transparent;
}
.xf-product-card__guarantee {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  box-sizing: border-box;
  min-width: 128px;
  padding: 6px 12px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: oklch(0.96 0.005 285);
  background: oklch(0.30 0.04 268);
  border-radius: 8px 0 0 0;
  line-height: 1.2;
  white-space: nowrap;
}
.xf-product-card__like-icons {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.xf-product-card__like-btn {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, border-color .2s, transform .12s, opacity .2s;
  cursor: pointer;
  padding: 0;
  font: inherit;
  opacity: 0.75;
}
@media (hover: hover) {
  .xf-product-card:hover .xf-product-card__like-btn { opacity: 1; }
}
@media (hover: hover) {
  .xf-product-card__like-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  transform: scale(calc(1 + 0.05 * var(--xf-motion, 1)));
}
}
.xf-product-card__like-btn:active { transform: scale(calc(1 - 0.08 * var(--xf-motion, 1))); }
.xf-product-card__like-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.xf-product-card__like-btn.is-busy { opacity: .5; pointer-events: none; }
.xf-product-card__like-btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  opacity: 1;
}
.xf-product-card__like-btn--wish.is-active {
  background: #e11d48;
}
@media (hover: hover) {
  /* Wishlist: red for the emotional "want it" anchor; compare keeps brand-accent. */
.xf-product-card__like-btn--wish:hover {
  background: #e11d48;
}
}
.xf-product-card__like-btn--wish.is-active svg { fill: currentColor; }
/* Тёмная тема: кнопки избранного и сравнения на плите — полупрозрачные, того
   же света, что лайтбокс: сплошные белые квадраты спорили с притушенной
   плитой. 0-2-1 выше :hover и .is-active (0-2-0): фон и рамка в тёмной от
   состояния не меняются, «в избранном» читается залитым сердцем. */
html[data-theme="dark"] .xf-product-card__like-btn {
  background: oklch(1 0 0 / 0.5);
  border-color: oklch(0.2 0.02 292 / 0.10);
  color: oklch(0.30 0.02 292);
}
/* [#306] Флекс-колонка + flex:1 теперь на всех ширинах (карточка сама уже
   flex-column): так .xf-product-card__foot может растянуться, а кнопка-бар
   прижаться к низу — панели «В корзину» встают на одну линию по всему ряду
   независимо от того, у кого есть зачёркнутая цена или строка рассрочки.
   Раньше это жило только в мобильном блоке. */
.xf-product-card__body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.xf-product-card__stock-row {
  margin-bottom: 10px;
}
.xf-product-card__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.xf-product-card__stock-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  flex: 0 0 auto;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.xf-product-card__stock--in   { color: var(--success); }
.xf-product-card__stock--none { color: var(--warning); }
/* «Под заказ» (Товар дня, #302): тихий тон как PDP .is-out — это не тревога,
   а нормальное состояние; warning-тон зарезервирован «Нет в наличии». */
.xf-product-card__stock--preorder { color: var(--text-3); }
.xf-product-card__article {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0;
  margin-top: 2px;
}
/* [#340] Резерв под имя товара: min-height == max-height == clamp — это НЕ
   косметика, а то, что держит цены на одной линии по всему ряду (карточки в
   ряду и так равны по высоте: grid stretch + margin-top:auto на кнопке-баре,
   но цена стоит сразу под именем и без фиксированного резерва «плавает»).
   Менять три числа только вместе.

   Десктоп остаётся на 3 строках — замер на 96 реальных именах каталога
   (видеокарты / ноутбуки / процессоры / охлаждение, x-core.by 2026-07-30)
   против настоящих ширин карточки:
     340px (листинг раздела, 3-col при sidebar 280) — 0 обрезанных, 4-я строка
       не нужна НИ ОДНОМУ имени;
     329px (сетка «Что сейчас берут», 4-col)        — 0 обрезанных;
     244–264px (поиск/избранное, auto-fill 220)     — 6% обрезанных.
   4-я строка добавила бы +19px пустоты 100% карточек раздела и главной ради
   6% на вторичных поверхностях — поэтому её здесь нет. Телефон — другое дело,
   см. мобильный блок в конце файла. */
/* Имя — над оверлей-ссылкой (z:1), иначе его не выделить и не скопировать
   (просьба Вадима 2026-10-01). Клик по имени ведёт на товар через app.js
   (initCardTitleLinks) — если человек не выделял текст. */
.xf-product-card__title {
  position: relative;
  z-index: 2;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  min-height: calc(1.4em * 3);
  max-height: calc(1.4em * 3);
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* [#315] Ключевая характеристика раздела — строка под именем (разметку
   ставит xf_render_product_card). Ровно одна строка: высота жёстко
   зафиксирована, как у имени выше (#340), иначе цены в ряду разъедутся у
   товара с незаполненными свойствами — а пустая строка тут штатна и обязана
   занимать ровно столько же.
   margin-top отрицательный не «прижимает красиво», а съедает часть 14px-
   отступа имени: строка добавляет карточке ~17px, а не ~30px. Схлопывания
   маргинов в флекс-колонке не бывает, так что 14 − 8 = 6px — это и есть
   итоговый зазор «имя → характеристика».
   nowrap + ellipsis: длинная подпись («полностью беспроводные») обрезается,
   но НЕ переносится — перенос сломал бы ту самую высоту.

   Шрифт — Onest, не mono, хотя половина значений числовая. The Mono-as-Data
   Rule запрещает mono для не-данных, а слот тут один на все разделы: у
   мониторов в нём «27" · 180 Гц», у клавиатур «игровая · механическая».
   Разный шрифт в одном и том же месте карточки по разделам читался бы как
   сбой, а не как контраст «данные / нарратив».
   Цвет --text-2, а не --text-3: у --text-3 на карточке 4.28:1 в тёмной теме —
   ниже порога 4.5 для мелкого текста (тот же разбор, что у строки рассрочки). */
.xf-product-card__spec {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--text-2);
  min-height: 1.35em;
  max-height: 1.35em;
  margin: -6px 0 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* --off = раздела нет в словаре характеристик. В листинге раздела такие
   карточки все до одной (сетка однородна по разделу) — строку схлопываем
   целиком, чтобы «Кабели» не получили полосу пустоты. В смешанных сетках
   (главная / хаб / поиск / избранное) правило не действует: там сосед по ряду
   может быть из покрытого раздела, и пустой резерв дешевле съехавшей цены. */
.xf-secpage__grid .xf-product-card__spec--off { display: none; }
/* [#306] Подвал карточки — колонка на ВСЕХ ширинах: цена сверху, кнопка-бар
   внизу. Прежде на десктопе это был ряд «цена | иконка 36×36», и подпись туда
   не влезала: на самой узкой сетке (search / favorites — auto-fill minmax(220px))
   контент карточки ≈186px, а цена + подписанная кнопка требуют ~250px. Именно
   этот overflow и описывал прежний комментарий, из-за него подпись когда-то
   оставили только мобильной. Полноширинный бар не может переполнить строку ни
   на какой ширине, а цена в освободившемся ряду получает всю ширину карточки. */
.xf-product-card__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  flex: 1;                   /* растянуться в теле-колонке, чтобы бар мог уехать вниз */
}
.xf-product-card__price-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* [#305] Рассрочка — нейтральная, НЕ зелёная. Зелёный на карточке значит
   ровно одно: «в наличии» (.xf-product-card__stock--in двумя строчками выше).
   Когда «от 42.5 BYN/мес» красилось тем же --success, зелёный переставал
   что-либо означать. Цвет — маркер, а не украшение (DESIGN.md §2).
   --text-2, а не --text-3: --text-3 даёт 4.38:1 в попапе рассрочки и 4.28:1
   на карточке в тёмной теме — ниже порога 4.5 для мелкого текста. --text-2
   держит 7.5–10:1 на всех трёх поверхностях. */
.xf-product-card__installment {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
/* [#383] Срок плана-минимума: «от 58.1 BYN/мес · 48 мес». Тот же голос, что и
   сумма (наследует mono/--text-2) — срок объясняет число, а не соперничает с
   ним. На телефоне вся строка не влезает (карточка 2-кол. сетки даёт 131 px,
   строка со сроком — от 149 px), поэтому ниже 767px срок уходит второй
   строкой, а точка-разделитель прячется: перенос осознанный, не случайный. */
.xf-product-card__installment-sum,
.xf-product-card__installment-term { white-space: nowrap; }
/* [#306] Подписанный бар вместо безымянной иконки 36×36. Иконка сумки без
   подписи читалась как корзина-для-мусора — «положить в корзину» и «выбросить»
   рисуются почти одинаково, и только подпись снимает двусмысленность.
   Мобильный бар выглядел так и раньше; здесь он поднят в базу, а мобильный
   блок ниже остался только с размерами. */
.xf-product-card__cart-btn {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 36px;
  margin-top: auto;          /* прижать бар к низу подвала → бары выравниваются по ряду */
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background .2s, color .2s, border-color .2s, transform .12s;
  flex: 0 0 auto;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.xf-product-card__cart-label {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Двойная подпись и двойная иконка, переключаемые классом .is-added (его ставит
   app.js → applyCartBtnState). Тот же приём, что у .xf-btn-buy на PDP. */
.xf-product-card__cart-icon { display: inline-flex; align-items: center; }
.xf-product-card__cart-btn:not(.is-added) .xf-product-card__cart-label--added,
.xf-product-card__cart-btn:not(.is-added) .xf-product-card__cart-icon--check,
.xf-product-card__cart-btn.is-added .xf-product-card__cart-label--idle,
.xf-product-card__cart-btn.is-added .xf-product-card__cart-icon--bag {
  display: none;
}
@media (hover: hover) {
  .xf-product-card:hover .xf-product-card__cart-btn {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
}
/* [#306] Кнопка стала полноширинной — scale(1.05/0.95) с иконки 36×36 давал бы
   «резину» на ~10px ширины (DESIGN.md §5: без bounce, hover-lift = translateY). */
@media (hover: hover) {
  .xf-product-card__cart-btn:hover { transform: translateY(calc(-1px * var(--xf-motion, 1))); }
}
/* translateY(0) — это ПОКОЙ (возврат из hover-lift), а не негейченное движение:
   под reduced-motion hover тоже даёт 0, так что множитель тут не нужен (#330). */
.xf-product-card__cart-btn:active { transform: translateY(0); }
.xf-product-card__cart-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.xf-product-card__cart-btn.is-busy { opacity: .6; pointer-events: none; }
/* [#326] «В корзине» — нейтральный бар, не зелёный. Полноширинная зелёная
   плашка была самым крупным цветным пятном карточки и означала НЕ наличие,
   тогда как зелёный на карточке зарезервирован ровно за ним
   (.xf-product-card__stock--in, 6px точка). Один цвет — одно значение
   (DESIGN.md §2: цвет это маркер, а не украшение).
   Состояние читается тремя нецветовыми признаками: галка вместо сумки,
   подпись «В корзине», ступень поверхности --surface-2 → --surface-3 плюс
   полная линия --line вместо --line-soft и полный ink --text вместо --text-2.
   Цвет ушёл — смысл остался, и он color-blind safe (PRODUCT.md).
   Хардкод oklch(0.72 0.18 145) снят: токены, ни одного литерала. */
.xf-product-card__cart-btn.is-added {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--line);
}
/* Hover по карточке заливает кнопку индиго (правило выше, специфичность 0,3,0).
   Для .is-added это было бы враньём: клик по ней — не «добавить», а переход в
   корзину, и заливка стёрла бы единственное отличие от соседней карточки. Тут
   0,4,0 — поверхность остаётся нейтральной, а «кликабельно» говорят индиго-ink
   и индиго-линия. */
@media (hover: hover) {
  .xf-product-card:hover .xf-product-card__cart-btn.is-added {
    background: var(--surface-3);
    color: var(--accent-2);
    border-color: var(--accent-line);
  }
}
/* Тёмная тема: «В корзину» — тихая рамка (белый 32%: контур 14% на тёмной
   карточке терялся), на наведении по карточке наливается акцентом. 0-2-1 /
   0-4-1 выше состояний светлой (.is-added 0-2-0, наведение 0-4-0): в тёмной
   «В корзине» в покое та же рамка, а на наведении тоже наливается — так
   работает с #707. */
html[data-theme="dark"] .xf-product-card__cart-btn {
  border: 1px solid oklch(1 0 0 / 0.32);
  background: transparent;
  color: var(--text);
}
@media (hover: hover) {
  html[data-theme="dark"] .xf-product-card:hover .xf-product-card__cart-btn {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
  }
}
/* [#306] Правила .xf-product-card__cart-btn--under-order сняты как мёртвые:
   с листинговых гейтов helpers.php рисует кнопку только при !$underOrder
   (`if (!$underOrder)` вокруг