/* Home page blocks — 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 */
.xf-home__section--cats    { padding: 56px 0 24px; }    /* medium — first content group */
.xf-home__section--products{ padding: 48px 0 24px; }    /* medium, group with cats */
.xf-home__section--promo   { padding: 72px 0 32px; }    /* wider — visual break */
.xf-home__section--brands  { padding: 80px 0 16px; }    /* big top breath, плотно к footer'у */

/* ─── 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;
}
.xf-hero__dots {
  position: absolute;
  bottom: 40px;
  left: 56px;
  display: flex;
  gap: 6px;
  z-index: 3;
}
.xf-hero__dot {
  width: 8px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  cursor: pointer;
  transition: width .3s, background .3s;
  border: 0;
  padding: 0;
}
.xf-hero__dot.is-active {
  width: 32px;
  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
   становится <a>, заменяя 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;
}

/* 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);
  }
}
.xf-hero--banners .xf-hero__dot {
  background: rgba(255, 255, 255, 0.5);
}
.xf-hero--banners .xf-hero__dot.is-active {
  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(0.94);
}
.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;
}

/* ─── CategoryGrid ────────────────────────────────────────── */
.xf-catgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.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;
  color: var(--text);
}
@media (hover: hover) {
  .xf-cat-tile:hover { border-color: var(--accent-line); }
}
.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;
}

/* 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(-2px); }
}

@media (hover: hover) {
  .xf-cat-tile:hover .xf-cat-tile__icon {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
    transform: translateY(-2px);
    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%;
}
.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;
}
}

/* ─── 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). */
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--lg .xf-art__icon svg { width: 96px; height: 96px; }
.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;
}
.xf-art--photo::before,
.xf-art--photo::after {
  display: none;
}

/* 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;
}
.xf-product-card .xf-art--photo .xf-art__photo-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
}
.xf-product-card .xf-art--photo .xf-art__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 80cqi;
  max-height: 80cqi;
}

/* ─── 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;
}
@media (hover: hover) {
  .xf-product-card:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
}
/* 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;
}
.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;
}
.xf-product-card__sticker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  padding: 4px 9px;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 4px 10px -4px color-mix(in srgb, currentColor 60%, transparent);
}
.xf-product-card__sticker--hit  { background: var(--accent); }
.xf-product-card__sticker--sale { background: oklch(0.70 0.18 32); }
.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.25 0.01 285);
  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(1.05);
}
}
.xf-product-card__like-btn:active { transform: scale(0.92); }
.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; }
.xf-product-card__body { padding: 16px 18px 18px; }
.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); }
.xf-product-card__article {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0;
  margin-top: 2px;
}
.xf-product-card__title {
  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;
}
.xf-product-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}
.xf-product-card__price-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.xf-product-card__installment {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--success);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.xf-product-card__cart-btn {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  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;
  transition: background .2s, color .2s, border-color .2s, transform .12s;
  flex: 0 0 auto;
  cursor: pointer;
  padding: 0;
  font: inherit;
}
@media (hover: hover) {
  .xf-product-card:hover .xf-product-card__cart-btn {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
}
@media (hover: hover) {
  .xf-product-card__cart-btn:hover { transform: scale(1.05); }
}
.xf-product-card__cart-btn:active { transform: scale(0.95); }
.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; }
.xf-product-card__cart-btn.is-added {
  background: oklch(0.72 0.18 145);
  color: #fff;
  border-color: transparent;
}
/* AVAILABLE=N: same icon-only geometry as the default cart-btn, distinguished
   by a muted accent tint. Stock state already lives in the meta row — no
   text on the button. Grid stays uniform regardless of availability. */
.xf-product-card__cart-btn--under-order {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line-soft));
  color: var(--text-2);
}
@media (hover: hover) {
  .xf-product-card:hover .xf-product-card__cart-btn--under-order {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line-soft));
  color: var(--text);
}
}

/* ─── SplitPromo ──────────────────────────────────────────── */
/* M9.2: после снятия bot-card grid схлопывается к single column. Имя
   класса оставлено («split-promo»), чтобы при появлении новых promo
   слотов их можно было добавить, и grid снова станет 2-up. */
.xf-promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.xf-promo__card {
  position: relative;
  padding: 40px 44px;
  min-height: 280px;
  background: var(--surface-2);
  border: 1px solid var(--accent-line);
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .2s, background .2s;
  color: var(--text);
  display: block;
}
@media (hover: hover) {
  .xf-promo__card:hover { border-color: var(--accent); }
}
/* Art-tile внутри promo: единый accent pattern с configurator-pill —
   accent-dim фон + accent icon. Override neutral surface-3 / text-3 из M6.1. */
.xf-promo__card .xf-art { background: var(--accent-dim); }
.xf-promo__card .xf-art__icon { color: var(--accent); }
.xf-promo__art-wrap {
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 220px;
  height: 220px;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .3s;
}
@media (hover: hover) {
  .xf-promo__card:hover .xf-promo__art-wrap { transform: translateY(-8px); }
}
.xf-promo__body {
  position: relative;
  max-width: 440px;
}
.xf-promo__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent-2);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.xf-promo__title {
  margin: 0 0 14px;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1.05;
}
.xf-promo__text {
  margin: 0 0 28px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.5;
  max-width: 380px;
}

/* ─── Brands ──────────────────────────────────────────────── */
.xf-brands {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.xf-brand {
  aspect-ratio: 2.4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  color: var(--text-3);
  transition: color .2s, border-color .2s, transform .2s, background .2s;
  padding: 18px 24px;
  text-decoration: none;
}
.xf-brand__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* M9.4: max-height 50→65% (logos +30% relative). Tile-размер не трогаем
   (aspect-ratio 2.4 + padding 18×24). Закрывает «sparse logo wall» из
   4-й критики P2 #5. */
.xf-brand__logo svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 75%;
  max-height: 65%;
  object-fit: contain;
}
@media (hover: hover) {
  .xf-brand:hover {
    color: var(--accent);
    border-color: var(--accent-line);
    background: var(--surface-2);
    transform: translateY(-2px);
  }
}

/* M11.1: marquee mode. Override grid → flex-track с animation translateX.
   Track содержит 2 копии brands → translate -50% даёт seamless loop.
   overflow-x: clip (не hidden), чтобы hover translateY(-2px) и нижний
   1px бордера не обрезались сверху/снизу контейнера. Edge fades —
   absolute :before/:after, не зависят от overflow. */
.xf-brands--marquee {
  display: block;
  position: relative;
  overflow-x: clip;
}
.xf-brands--marquee::before,
.xf-brands--marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 88px;
  z-index: 2;
  pointer-events: none;
}
.xf-brands--marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.xf-brands--marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}
.xf-brands__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: xf-brand-marquee 70s linear infinite;
  will-change: transform;
}
@media (hover: hover) {
  .xf-brands--marquee:hover .xf-brands__track,
  .xf-brands--marquee:focus-within .xf-brands__track {
    animation-play-state: paused;
  }
}
.xf-brands--marquee .xf-brand {
  flex: 0 0 200px;
}
@keyframes xf-brand-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .xf-brands__track { animation: none; }
  .xf-brands--marquee { overflow-x: auto; overflow-y: visible; }
}

@media (max-width: 1024px) {
  .xf-brands { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .xf-brands { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .xf-brand { padding: 14px 18px; }
  .xf-brand__logo svg { max-height: 34px; }
}

/* ─── Mobile (≤ 767px) ──────────────────────────────────────
   Phone-only overrides for home blocks + shared product-card sizing.
   Tablet (768–900) rides desktop rails per M24 breakpoint decision. */
@media (max-width: 767px) {
  .xf-home__section        { padding: 32px 0 16px; }
  .xf-home__section--hero  { padding: 16px 0 16px; }
  .xf-home__section--trust { padding: 16px 0; }
  .xf-home__section--cats  { padding: 36px 0 16px; }

  /* Hero: text over art, compact title, no side arrows. Swipe comes from JS.
     M9.1 mobile: override desktop aspect-ratio (1920/450). Иначе при mobile
     min-height 440 width forced до 1877 — overflow. На проде mobile-banner
     736×506 (ratio ~1.45) — почти квадратный, art-direction отдельная.
     Здесь оставляем content-driven height, image content team нарисует
     под mobile-формат отдельно. */
  .xf-hero {
    min-height: 440px;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 18px;
  }
  /* M10 banner-mode mobile: aspect-ratio переключается на 736/506 (≈1.45),
     min-height сбрасывается — image drives height. На 375 wide → ~258px. */
  .xf-hero--banners {
    min-height: 0;
    aspect-ratio: 736 / 506;
  }
  .xf-hero__slide {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .xf-hero__text { padding: 28px 24px 20px; }
  .xf-hero__eyebrow { margin-bottom: 12px; font-size: 11px; letter-spacing: 2px; }
  .xf-hero__title { font-size: 40px; letter-spacing: -1.5px; min-height: 0; }
  .xf-hero__subtitle { margin: 14px 0 20px; font-size: 15px; }
  .xf-hero__ctas .xf-btn:first-child { flex: 1; justify-content: center; }
  .xf-hero__ctas .xf-btn--ghost { display: none; }
  .xf-hero__art { margin: 0 24px 52px; border-radius: 14px; min-height: 160px; }
  .xf-hero__dots { left: 24px; bottom: 20px; }
  .xf-hero__nav { display: none; }
  .xf-hero__chips { top: 12px; right: 12px; }

  /* CategoryGrid: featured full-width, 6 rest tiles in 2×3. */
  .xf-catgrid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto auto;
    gap: 10px;
  }
  .xf-catgrid__featured {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .xf-cat-tile { height: 120px; padding: 14px; border-radius: 14px; }
  .xf-cat-tile__name { font-size: 14px; margin-top: 6px; max-width: 100%; }
  .xf-cat-tile__icon { width: 44px; height: 44px; right: 12px; bottom: 12px; border-radius: 11px; }
  .xf-cat-tile__icon svg { width: 22px; height: 22px; }
  .xf-cat-tile__arrow { top: 12px; right: 12px; width: 28px; height: 28px; }
  .xf-cat-tile__arrow svg { width: 12px; height: 12px; }

  /* Featured xl tile — сжатая высота, art-блок под body. */
  .xf-cat-tile--xl {
    height: auto;
    min-height: 260px;
    padding: 22px;
    grid-template-rows: auto 120px;
    row-gap: 14px;
  }
  .xf-cat-tile--xl .xf-cat-tile__name { font-size: 22px; margin-top: 8px; }
  .xf-cat-tile--xl .xf-cat-tile__desc { font-size: 13px; max-width: none; margin-top: 6px; }
  .xf-cat-tile--xl .xf-cat-tile__art {
    grid-row: 2;
    width: 100%;
    max-height: 120px;
    min-height: 100px;
    justify-self: stretch;
  }
  .xf-cat-tile--xl .xf-cat-tile__arrow { top: 20px; right: 20px; }

  /* TrustBar 2×2 */
  .xf-trustbar { grid-template-columns: 1fr 1fr; gap: 10px; }
  .xf-trustbar__item { padding: 14px 14px; gap: 12px; border-radius: 12px; }
  .xf-trustbar__icon { width: 36px; height: 36px; border-radius: 9px; }
  .xf-trustbar__title { font-size: 13px; }
  .xf-trustbar__text { font-size: 11.5px; }

  /* SplitPromo stack */
  .xf-promo { grid-template-columns: 1fr; gap: 10px; }
  .xf-promo__card { padding: 28px 22px; min-height: 220px; border-radius: 16px; }
  .xf-promo__title { font-size: 26px; margin-bottom: 10px; letter-spacing: -0.8px; }
  .xf-promo__text { font-size: 14px; margin-bottom: 20px; max-width: none; }
  .xf-promo__art-wrap { width: 140px; height: 140px; right: -24px; bottom: -24px; }

  /* Brands — 3 col grid (12 брендов → 4 ряда по 3) для phone. */
  .xf-brands { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .xf-brand { padding: 12px 14px; border-radius: 12px; }
  /* M9.4 mobile-зеркало: max-height 55→70%, max-width 70→80%. */
  .xf-brand__logo svg { max-width: 80%; max-height: 70%; }
  /* M11.1 mobile marquee: уже tile (160 vs desktop 200), уже edge-fade
     (32 vs 88), быстрее цикл (50 vs 70s — track короче, кажется similar). */
  .xf-brands--marquee::before,
  .xf-brands--marquee::after { width: 32px; }
  .xf-brands--marquee .xf-brand { flex: 0 0 160px; }
  .xf-brands__track { animation-duration: 50s; }

  /* ProductStrip → 2 col (home «Что сейчас берут» + везде где grid-common) */
  .xf-products__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Section heads — компактнее */
  .xf-section-head__title, .xf-products__head .xf-section-head__title {
    font-size: 22px;
    letter-spacing: -0.6px;
  }
  .xf-section-head__eyebrow { font-size: 10.5px; letter-spacing: 2px; }
  .xf-products__head { margin-bottom: 18px; gap: 12px; }

  /* Product card — укрупнить title/цену для 2-col сетки на phone. */
  .xf-product-card { border-radius: 14px; }
  .xf-product-card__body { padding: 12px 14px 14px; }
  .xf-product-card__stickers { top: 10px; left: 10px; gap: 5px; }
  .xf-product-card__sticker { font-size: 9.5px; padding: 3px 7px; }
  .xf-product-card__guarantee { min-width: 110px; font-size: 10px; padding: 4px 8px; letter-spacing: 0; border-radius: 6px 0 0 0; }
  .xf-product-card__like-icons { top: 10px; right: 10px; gap: 6px; }
  .xf-product-card__like-btn { width: 44px; height: 44px; border-radius: 12px; opacity: 1; }
  .xf-product-card__like-btn svg { width: 18px; height: 18px; }
  .xf-product-card__stock { font-size: 11px; }
  .xf-product-card__title {
    font-size: 14px;
    line-height: 1.35;
    min-height: calc(1.35em * 4);
    max-height: calc(1.35em * 4);
    margin-bottom: 12px;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
  /* Foot → column, cart-btn full-width bar с label. Icon+text уместны
     только когда кнопка не 36×36 иконка, иначе «В корзину» без повода.
     Icon-inline + label дают явный CTA без overflow цены. */
  .xf-product-card__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .xf-product-card .xf-price__val { font-size: 20px; letter-spacing: -0.4px; }
  .xf-product-card__installment { font-size: 10.5px; }
  .xf-product-card__article { font-size: 10px; }
  .xf-product-card__cart-btn {
    width: 100%;
    height: 42px;
    border-radius: 10px;
  }
  .xf-product-card__cart-btn svg { width: 18px; height: 18px; }
  .xf-product-card__cart-btn::after {
    content: "В корзину";
    font-family: var(--font-sans);
    font-size: 13.5px;
    font-weight: 600;
    margin-left: 8px;
    letter-spacing: 0.01em;
  }
  .xf-product-card__cart-btn.is-added::after { content: "В корзине"; }
  .xf-product-card__cart-btn--under-order::after { content: "Под заказ"; }
}