/* OWNS: .xfp-* — страница «Готовые сборки ПК» и полоса пресетов в конфигураторе.
   ПЛЮС одно документированное исключение: `.xfp .xf-crumbs a` (тап-цель крошек
   на этой странице; вид крошек остаётся за catalog.css — здесь только площадь
   нажатия, геометрия строки компенсирована отрицательным margin). */
/* Готовые сборки ПК (#314). Подключается ТОЛЬКО там, где блок рисуется:
   configurator/presets-page.php (страница /onlayn-konfigurator/sborki/) и
   configurator/parts/presets-strip.php + presets-headlink.php (вход на странице
   конфигуратора) — см. xfp_assets() в parts/preset-render.php.

   Свой островок: из чужого каскада берём только ГОТОВЫЕ примитивы шаблона по их
   собственным классам (.xf-pill, .xf-btn, .xf-art, .xf-crumbs, .xfc-btn) и
   токены tokens.css. Плотность чипа и карточки живёт на парном .xfp-* классе
   рядом (class="xf-pill xfp-chip"), чужие правила не переопределяются.
   Движение — только через var(--xf-motion, 1) (The Motion-Multiplier Rule).
   Per-element :focus не пишем — глобальный :focus-visible в ui.css. */

/* ============================================================ страница ===== */
.xfp {
  padding: 28px 0 48px;
  font-family: var(--font-sans);
  color: var(--text);
}
.xfp *,
.xfp-strip *,
.xfp-notice * { box-sizing: border-box; }

/* Тап-цель крошек ≥44px без сдвига строки (см. исключение в шапке файла). */
.xfp .xf-crumbs a { display: inline-block; padding: 14px 0; margin: -14px 0; }

.xfp-head { margin-bottom: 26px; }
.xfp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 14px;
}
.xfp-eyebrow__tick { display: inline-block; width: 28px; height: 1px; background: var(--accent-2); }
.xfp-title {
  margin: 0 0 14px; font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.05; letter-spacing: -1.4px;
}
.xfp-lede { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 68ch; }

/* ── чипы разделов ───────────────────────────────────────────
   Класс .xf-pill даёт форму метки, .xfp-chip — плотность кнопки: тап-цель
   ≥40px по высоте (Pill-Is-Not-Button соблюдён — визуально это тег, просто
   кликабельный и достаточно крупный для пальца). */
.xfp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.xfp-chip {
  min-height: 40px; padding: 8px 14px; font-size: 14px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.xfp-chip__n { font-family: var(--font-mono); font-size: 12px; color: var(--text-3); }
.xfp-chip[aria-pressed="true"] .xfp-chip__n { color: inherit; opacity: .75; }
@media (hover: hover) {
  .xfp-chip:hover { border-color: var(--line); color: var(--text); }
  .xfp-chip[aria-pressed="true"]:hover { color: var(--accent-2); }
}

/* ── сетка карточек ──────────────────────────────────────────
   Традиционный e-com листинг (Do «сохранять e-com paradigms»): 3 колонки на
   десктопе, 2 на планшете, 1 на телефоне. */
.xfp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 1199.98px) { .xfp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  { .xfp-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

.xfp-status { margin: 22px 0 0; font-size: 14px; color: var(--text-3); }
.xfp-status:empty { margin: 0; }

/* ── пустое состояние ────────────────────────────────────────
   Не 404: адрес уходит в меню и в письма команде. Плоская карточка (Flat-By-
   Default), действие — ghost-кнопка: primary на этой странице нет вообще. */
.xfp-empty {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px;
  padding: 40px 24px; text-align: center; max-width: 520px;
}
.xfp-empty__icon { color: var(--text-3); display: flex; justify-content: center; margin-bottom: 14px; }
.xfp-empty__title { margin: 0 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -0.3px; }
.xfp-empty__text { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--text-2); }

/* ============================================================ карточка ===== */
.xfp-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  min-width: 0;
}
/* Своё display:flex перебивает UA-правило [hidden] — без этой строки чипы-фильтр
   ничего бы не прятали. */
.xfp-card[hidden] { display: none; }
/* Тень и подъём — только на hover (Flat-By-Default). overflow:hidden на
   карточке НЕ ставим: он срезал бы кольцо :focus-visible оверлей-ссылки
   (глобальное правило рисует его снаружи, outline-offset: 2px). Углы картинки
   клипает сама медиа-зона. */
@media (hover: hover) {
  .xfp-card:hover {
    border-color: var(--accent-line);
    transform: translateY(calc(-2px * var(--xf-motion, 1)));
    box-shadow: var(--shadow-card);
  }
}
.xfp-card__link {
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; text-decoration: none; cursor: pointer;
}

/* Фото сборки — «на белой плите», а не обрезанное по кадру: корпус узкий и
   высокий, cover срезал бы ему верх и низ.
   Поля кадра — явные (padding), а не «90% от кадра»: доля давала разный отступ
   на разной ширине карточки и на двух вариантах сразу, поэтому фото то почти
   касалось верха и низа, то висело в пустоте. Теперь отступ один и известный.
   Фото прижато книзу — приём карточки листинга (.xf-product-card .xf-art--photo:
   «фото стоят на одной полке»): корпуса в ряду встают на общую линию, а не
   плавают каждый на своей высоте. */
.xfp-card__media {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 15px 15px 0 0; background: var(--surface-3);
}
.xfp-card__media .xf-art { align-items: flex-end; padding: 18px 18px 16px; }
.xfp-card__media .xf-art__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.xfp-card__badge { position: absolute; top: 10px; left: 10px; z-index: 3; pointer-events: none; }

/* Вертикальный ритм тела карточки — две ступени и ни одной «на глаз»:
     --xfp-tie  (8px)  внутри одной мысли: раздел → имя → цена и наличие;
     --xfp-step (12px) между блоками: факты | для кого | спека | состав | вход.
   Было 10 / 8 / 12 / 14 / 14 / 14 — шесть разных чисел подряд, из-за чего
   карточка и читалась «недоделанной». Обе ступени одни и те же в сетке и в
   полосе: компакт отличается кадром, полями и кеглем, но НЕ ритмом. */
.xfp-card { --xfp-tie: 8px; --xfp-step: 12px; }
.xfp-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px; min-width: 0; }
.xfp-card__sec { align-self: flex-start; margin-bottom: var(--xfp-tie); }
/* Активен чип-фильтр — раздел на карточке повторяет его и становится шумом. */
.xfp-grid[data-xfp-filtered="1"] .xfp-card__sec { display: none; }
.xfp-card__name { margin: 0 0 var(--xfp-tie); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.3px; }

/* Факты покупки — цена и наличие — сразу под именем. */
.xfp-card__facts { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--xfp-step); }
.xfp-card__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
/* «от» — слово, значит Onest; сумма — данные, значит mono (Mono-as-Data). */
.xfp-card__from { font-size: 13.5px; color: var(--text-3); }
.xfp-card__sum { font-family: var(--font-mono); font-size: 20px; font-weight: 600; letter-spacing: -0.3px; }

/* Наличие — ровно та же конструкция, что у карточки листинга
   (.xf-product-card__stock) и корзины (.xf-cart-item__stock): точка 6px в
   currentColor с мягким ореолом, 11.5px/500, зазор 6px. Свой SVG-значок отсюда
   убран — он был единственной «галкой в кружке» на весь шаблон и читался как
   чужой (см. xfp_status_dot в parts/preset-render.php).
   Смысл несёт подпись, цвет только усиливает (a11y-инвариант):
   missing = сборка не собирается без замены (danger);
   missing_soft = выпало необязательное (warning — красить всю сборку в красное
   из-за DVD-привода нечестно). */
.xfp-card__stock {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.35;
}
/* Строка наличия может переноситься («Нужна замена: охлаждение, видеокарта»),
   поэтому точка не центрируется по блоку, а садится на середину ПЕРВОЙ строки. */
.xfp-card__stock .xfp-card__dot { margin-top: calc((1em * 1.35 - 6px) / 2); }
.xfp-card__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);
}
.xfp-card__stock[data-status="ok"]           { color: var(--success); }
.xfp-card__stock[data-status="on_order"]     { color: var(--warning); }
.xfp-card__stock[data-status="missing_soft"] { color: var(--warning); }
.xfp-card__stock[data-status="missing"]      { color: var(--danger); }

/* «Для кого» — ровно две строки ВСЕГДА: не только обрезка сверху, но и резерв
   снизу. Иначе односложная сборка поднимала спеку и «Состав» на строку выше
   соседей, и ряд читался кривым (тот же приём, что резерв под имя товара в
   карточке листинга, home.css [#340]). */
.xfp-card__text {
  margin: 0 0 var(--xfp-step); font-size: 14.5px; line-height: 1.45; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(1em * 1.45 * 2);
}

/* Ключевые детали. Резерв на ЧЕТЫРЕ строки — ровно столько их бывает
   (CPU / GPU / ОЗУ / накопитель, lib/presets.php), — чтобы «Состав» и вход в
   конфигуратор стояли на одной линии во всём ряду: у офисной сборки без
   видеокарты строк три, и без резерва её низ уезжал вверх. Высоту карточки это
   не увеличивает: пустоту, которая раньше копилась над «Открыть», блок просто
   забирает себе. */
.xfp-card__specs {
  list-style: none; margin: 0 0 var(--xfp-step); padding: 0;
  display: flex; flex-direction: column; gap: 7px;
  min-height: calc(4 * 20px + 3 * 7px);
}
.xfp-card__spec { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Иконки шаблона очень разной «массы»: чип процессора — плотный квадрат 12×12
   единиц, накопитель — полоска 18×6. Поставленные голыми в столбик, они не
   давали глазу ни одной общей оси. Плитка 20×20 — тот же приём, что у шага
   конфигуратора (.xfc-step__icon): ось держит рамка плитки, а не контур
   значка, и колонка наконец читается ровной. */
.xfp-card__spec-icon {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-3);
}
.xfp-card__spec-icon svg { width: 13px; height: 13px; }
.xfp-card__spec-label {
  font-size: 14.5px; line-height: 20px; color: var(--text-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── полный состав (disclosure) ──────────────────────────────
   Поверх оверлей-ссылки (z-index выше): клик по «Состав» обязан раскрывать
   список, а не уводить в конфигуратор. */
.xfp-card__parts { position: relative; z-index: 3; margin: 0 0 var(--xfp-step); }
/* Строка «Состав · 6 деталей» держит РИТМ, а тап-цель даёт невидимый слой
   ::before внутри неё. Прежние `min-height: 44px` делали из 12.5-пиксельной
   строки 44-пиксельную коробку — самый большой провал в карточке и главный
   источник ощущения «съехало». Слой перекрывает оверлей-ссылку карточки на
   ±10px по вертикали — это осознанно: промах «хотел раскрыть состав, а уехал в
   конфигуратор» дороже обратного. */
.xfp-card__parts-sum {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 2px 0; cursor: pointer;
  font-size: 14px; color: var(--text-2); list-style: none;
}
.xfp-card__parts-sum::before { content: ""; position: absolute; inset: -10px -8px; }
.xfp-card__parts-sum::-webkit-details-marker { display: none; }
.xfp-card__parts-sum::after {
  content: ""; width: 7px; height: 7px; margin-left: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
.xfp-card__parts[open] .xfp-card__parts-sum::after { transform: rotate(-135deg) translateY(-2px); }
.xfp-card__parts-n { font-family: var(--font-mono); }
.xfp-card__parts-list {
  list-style: none; margin: 4px 0 0; padding: 10px 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 7px;
}
.xfp-card__part { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; font-size: 13.5px; align-items: start; }
.xfp-card__part-step { grid-column: 1; color: var(--text-3); }
/* Перенос по словам с обрезкой ПОСЛЕ второй строки, а не многоточие посреди
   слова: на телефоне «ASUS ROG Maximus Z890 Extre…» не говорит, какая это плата
   (аудит п.4). anywhere — страховка от неразрывного артикула шире колонки. */
.xfp-card__part-name {
  grid-column: 1; color: var(--text-2); min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
/* «× 2» — число, значит mono (Mono-as-Data); тише названия, оно тут уточнение. */
.xfp-card__part-qty { font-family: var(--font-mono); color: var(--text-3); white-space: nowrap; }
.xfp-card__part-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-mono); color: var(--text-2); white-space: nowrap; }
/* Зазор 6px, как у строки наличия выше: у точки есть ореол 3px, при 4px он
   упирался в первую букву. */
.xfp-card__part-why { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.xfp-card__part[data-status="missing"] .xfp-card__part-why  { color: var(--danger); }
.xfp-card__part[data-status="on_order"] .xfp-card__part-why { color: var(--warning); }
.xfp-card__part[data-soft="1"] .xfp-card__part-why { color: var(--warning); }

/* CTA — подпись к действию карточки, не вторая кнопка. В покое нейтральна:
   индиго на каждой из десятка карточек — это индиго-стена (One-Voice Indigo). */
.xfp-card__cta {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.5px; font-weight: 500; color: var(--text-2);
  transition: color .15s ease;
}
.xfp-card__cta svg { transition: transform .15s ease; }
@media (hover: hover) {
  .xfp-card:hover .xfp-card__cta { color: var(--accent-2); }
  .xfp-card:hover .xfp-card__cta svg { transform: translateX(calc(3px * var(--xf-motion, 1))); }
}

/* Карандаш «Изменить» — только редакторам; над оверлей-ссылкой. */
.xfp-card__admin { position: absolute; top: 10px; right: 10px; z-index: 3; }

/* ── компактный вариант (полоса в конфигураторе) ───────────────
   Отличается от сетки ТОЛЬКО кадром, полями и кеглем. Ритм (--xfp-tie /
   --xfp-step), конструкция наличия и плитки иконок — общие: полоса и страница
   должны читаться одной и той же карточкой, просто одна плотнее. */
.xfp-card--compact { border-radius: 14px; }
.xfp-card--compact .xfp-card__media { aspect-ratio: 16 / 10; border-radius: 13px 13px 0 0; }
.xfp-card--compact .xfp-card__media .xf-art { padding: 14px 14px 12px; }
.xfp-card--compact .xfp-card__body { padding: 14px; }
.xfp-card--compact .xfp-card__name { font-size: 16px; }
.xfp-card--compact .xfp-card__sum { font-size: 16px; }
/* Одна строка «для кого» — и резерв ровно под неё (в сетке резерв на две). */
.xfp-card--compact .xfp-card__text { font-size: 13px; -webkit-line-clamp: 1; min-height: calc(1em * 1.45); }
/* Две ключевые строки целиком: обрезка по строке (ellipsis), а не по букве
   посреди слова — «Ryzen 5 56…» читается, «Ryzen 5 5600 6-я…» нет.
   Резерв — на две строки, столько их в полосе и бывает. */
.xfp-card--compact .xfp-card__specs { min-height: calc(2 * 20px + 7px); }
.xfp-card--compact .xfp-card__spec-label { font-size: 13px; }
/* Подпись «Открыть →» и в полосе: на телефоне hover не бывает, и без неё
   карточка не выглядела кликабельной (аудит п.7). */
.xfp-card--compact .xfp-card__cta { font-size: 13px; }

/* ============================================================ полоса ======= */
.xfp-strip { margin: 0 0 26px; padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); }
.xfp-strip[hidden] { display: none; }
.xfp-strip__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.xfp-strip__title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -0.2px; }
.xfp-strip__all,
.xfp-headlink {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 4px 0;   /* тап-цель на телефоне */
  font-size: 13px; color: var(--text-2); text-decoration: none;
  transition: color .15s ease;
}
.xfp-strip__all:hover,
.xfp-headlink:hover { color: var(--accent-2); }
.xfp-strip__all-n { font-family: var(--font-mono); }
.xfp-headlink[hidden] { display: none; }
/* Колонок столько, сколько карточек: в полосу попадают только целые сборки,
   и когда их три, ряд обязан занимать всю ширину, а не оставлять пустую
   четверть. */
.xfp-strip__rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }

/* ============================================================ плашка ======= */
/* «Не все детали доступны» — производная от состава сборки, рисует островок
   configurator-presets.js первым блоком колонки шагов. Тост тут не годится: он
   уедет через пять секунд, а замена детали останется. Рамка — ПОЛНАЯ
   тонированная, не цветная полоса слева (Don't: border-left как stripe). */
.xfp-notice-host:empty { display: none; }
.xfp-notice {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 18px;
}
.xfp-notice[data-tone="danger"]  { border-color: color-mix(in oklch, var(--danger) 40%, transparent); }
.xfp-notice[data-tone="warning"] { border-color: color-mix(in oklch, var(--warning) 40%, transparent); }
.xfp-notice__head { display: flex; align-items: flex-start; gap: 10px; }
.xfp-notice__icon { flex: 0 0 auto; display: inline-flex; margin-top: 1px; }
.xfp-notice[data-tone="danger"]  .xfp-notice__icon { color: var(--danger); }
.xfp-notice[data-tone="warning"] .xfp-notice__icon { color: var(--warning); }
.xfp-notice__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.4; }
.xfp-notice__close {
  flex: 0 0 auto; width: 32px; height: 32px; margin: -6px -8px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 8px; color: var(--text-3);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.xfp-notice__close:hover { color: var(--text); background: var(--surface-2); }
.xfp-notice__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.xfp-notice__row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 8px; border-top: 1px solid var(--line-soft);
}
.xfp-notice__row-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.xfp-notice__row-step { color: var(--text); font-weight: 500; }
.xfp-notice__row-why { display: inline-flex; align-items: center; gap: 5px; }
.xfp-notice__row[data-status="missing"]  .xfp-notice__row-why { color: var(--danger); }
.xfp-notice__row[data-status="on_order"] .xfp-notice__row-why { color: var(--warning); }
.xfp-notice__row-actions { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* «Убрать» тише «Подобрать»: замена — рекомендуемый исход, выброс — запасной. */
.xfp-notice__row-btn--drop { color: var(--text-3); }
.xfp-notice__row-btn--drop:hover { color: var(--danger); }

/* ============================================================ ≤991.98 ====== */
@media (max-width: 991.98px) {
  .xfp { padding: 20px 0 40px; }
  /* Полоса на мобиле — горизонтальный скроллер с mask-fade у правого края:
     функциональный градиент, он подсказывает «дальше есть ещё». Концевой
     padding равен ширине fade — последняя карточка не остаётся полупрозрачной
     на конце прокрутки. */
  .xfp-strip__rail {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding: 0 28px 4px 0;
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .xfp-strip__rail > .xfp-card { flex: 0 0 78%; scroll-snap-align: start; }
}
@media (max-width: 767.98px) {
  /* Первый экран телефона (аудит п.8а): до правки первая цена лежала примерно на
     915px при экране 812 — покупатель видел шапку, лид и кусок фотографии, но не
     то, ради чего пришёл. Ужимаем ВСЮ вертикаль над ценой: отступы шапки, кегль
     лида и кадр фотографии (4/3 → 16/10 — минус ~47px на карточку). Текст не
     прячем и не обрезаем: экономия только на воздухе и на пропорции кадра. */
  .xfp { padding: 10px 0 40px; }
  .xfp-eyebrow { margin-bottom: 8px; }
  .xfp-title { font-size: clamp(26px, 7vw, 34px); letter-spacing: -1px; margin-bottom: 8px; }
  .xfp-lede { font-size: 15px; line-height: 1.5; }
  .xfp-head { margin-bottom: 12px; }
  .xfp-chips { margin-bottom: 10px; }
  /* Кадр карточки на телефоне — 16/9. Фотография внутри всё равно вписана
     (object-fit: contain), то есть теряет не изображение, а пустое поле вокруг
     него; зато цена перестаёт быть «где-то ниже сгиба». */
  .xfp-card__media { aspect-ratio: 16 / 9; }
  /* Кадр на телефоне низкий — поля вокруг фото тоже уже, иначе от корпуса
     остаётся марка. */
  .xfp-card__media .xf-art { padding: 12px 12px 10px; }
  .xfp-card__body { padding: 14px 16px 16px; }
  /* Резерв под текст и спеку выравнивал карточки В РЯДУ. На телефоне сетка в
     одну колонку — ряда нет, выравнивать не с чем, и резерв превращается в
     пустую строку под спекой. Снимаем (полоса-скроллер этого не касается: там
     карточки по-прежнему стоят бок о бок). */
  .xfp-grid .xfp-card__text,
  .xfp-grid .xfp-card__specs { min-height: 0; }
  .xfp-strip__rail > .xfp-card { flex: 0 0 84%; }
  /* Тач-цели ≥44px: на телефоне промах по «Подобрать» стоит дороже пары
     лишних пикселей высоты. */
  .xfp-chip { min-height: 44px; }
  .xfp-notice__row-actions { width: 100%; }
  .xfp-notice__row-btn { flex: 1; min-height: 44px; }
  .xfp-notice__close { width: 44px; height: 44px; margin: -10px -12px 0 0; }
}