/* how.css — раскладка страницы «Как работает BunnySplit» (/how, home.html). 23.10, решение владельца Б1:
   страница остаётся отдельной, но собрана из компонентов ДС (ui-kit.css): .bs-btn, .bs-facts, .bs-acard,
   .bs-card + .bs-steps--list, .bs-faq, .bs-cta; «Свежие» — общая карточка товара (.pp-product в сетке
   .pp-catalog-grid.pp-mk-grid, как на маркетплейсе). Здесь — ТОЛЬКО раскладка и отступы (токены --sp-*,
   края — --page-gutter, ширина — --page-max: та же линия, что у шапки и подвала). Префикс .pp-how-. */

.pp-how{ max-width:var(--page-max); margin:0 auto; padding:var(--sp-9) var(--page-gutter) var(--sp-10); }
.pp-how > * + *{ margin-top:var(--sp-11); }   /* один ритм между всеми блоками страницы */

/* заголовок секции: метка → H2 → подзаголовок; H2 — основной шрифт 700 (Unbounded только у H1, 10.1 Б) */
.pp-how-head{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); margin:0 0 var(--sp-6); max-width:var(--read-max); }
.pp-how-h2{ margin:0; font:700 var(--fs-xl)/var(--lh-tight) var(--font); letter-spacing:-.01em; color:var(--ink); }
.pp-how-sub{ margin:0; font:400 var(--fs-base)/var(--lh-normal) var(--font); color:var(--ink2); }

/* ── первый экран ── */
.pp-how-hero{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--sp-8); }
.pp-how-hero__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-4); min-width:0; }
/* max-width в em, не в ch (25.10): ch = ширина «0» ТЕКУЩЕГО шрифта, и пока Google Fonts догружает латиницу
   отдельно от кириллицы, ширина блока прыгала 443 → 330 → 617 px и заголовок переносился трижды (CLS /how).
   20.6em = прежние 22ch у Unbounded 800 («0» = 0,935em). */
.pp-how-h1{ margin:0; max-width:20.6em; font:800 var(--fs-3xl)/var(--lh-tight) var(--font-display); letter-spacing:-.02em; color:var(--ink); }
.pp-how-h1 .grad{ background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pp-how-lead{ margin:0; max-width:60ch; font:400 var(--fs-md)/var(--lh-normal) var(--font); color:var(--ink2); }
.pp-how-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.pp-how-hero__art{ width:132px; height:auto; }

/* ── сетки ── */
.pp-how-grid3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4); }
.pp-how-grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); }
.pp-how-card{ display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; }
.pp-how-h3{ margin:0; display:flex; align-items:center; gap:var(--sp-2); font:600 var(--fs-md)/var(--lh-tight) var(--font); color:var(--ink); }
.pp-how-h3 .bs-ico{ width:var(--icon-md); height:var(--icon-md); color:var(--accent-text); }
.pp-how-p{ margin:0; font:400 var(--fs-sm)/var(--lh-normal) var(--font); color:var(--ink2); }
.pp-how-note{ margin:var(--sp-4) 0 0; font:400 var(--fs-sm)/var(--lh-normal) var(--font); color:var(--ink2); }
.pp-how-more{ margin-top:var(--sp-4); }
/* «Свежие» — ровно целые ряды сетки карточек (2 · 3 · 4 · 5 колонок): лишние карточки не висят сиротой */
@media (max-width:767px){ #freshList > :nth-child(n+5){ display:none; } }
@media (min-width:1024px) and (max-width:1279px){ #freshList > :nth-child(n+5){ display:none; } }   /* width-ok: порог колонок сетки, не ширина страницы */
@media (min-width:1280px){ #freshList > :nth-child(n+6){ display:none; } }
.pp-how-faq{ max-width:var(--read-max); }

@media (max-width:899px){
  .pp-how-grid3{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:599px){
  .pp-how{ padding-top:var(--sp-5); }
  .pp-how > * + *{ margin-top:var(--sp-9); }
  .pp-how-hero{ grid-template-columns:minmax(0,1fr); }
  .pp-how-hero__art{ display:none; }   /* маскот не съедает первый экран телефона */
  .pp-how-h1{ font-size:var(--fs-2xl); }
  .pp-how-lead{ font-size:var(--fs-base); }
  .pp-how-actions, .pp-how-actions > .bs-btn{ width:100%; }
  .pp-how-grid2{ grid-template-columns:minmax(0,1fr); }
  .pp-how-h2{ font-size:var(--fs-lg); }
}