/* Шрифты подключены через <link rel="stylesheet"> в base.html (+ preconnect) —
   @import здесь блокировал парсинг остального CSS до отдельного сетевого
   запроса за шрифтовым CSS, прежде чем браузер вообще узнавал про него. */

/* ==========================================================================
   Дизайн-токены — по мотивам DESIGN.md: тёплый «мраморный» холст, плавающие
   сильно скруглённые карточки с внутренней рамкой изображения, pill-формы,
   двухслойные мягкие тени вместо границ, единственный насыщенный акцент
   (#e35b21). Иерархия — трекингом и градацией веса, не жирным контрастом.
   ========================================================================== */
:root {
  /* — Цвета: палитра не менялась по сути, тёпло-нейтральные оттенки чуть
       сведены к ивори, которое уже жило в scrim-градиентах hero. — */
  --color-bg: #fefcfd;
  --color-surface: #ffffff;
  --color-elevated: #ffffff;
  --color-fg: #1a1712;
  --color-fg-muted: #7c7873;
  --color-border: #ececea;
  --color-hairline: rgba(26, 23, 18, 0.09);
  --color-muted-bg: #fefcfd;
  --color-frost: rgba(255, 255, 255, 0.92);

  --color-accent: #e35b21;
  --color-accent-hover: #c74a17;
  --color-accent-wash: rgba(227, 91, 33, 0.30);
  --color-accent-tint: #fbede5;
  --color-on-accent: #ffffff;

  --color-trust: #4f6f52;
  --color-trust-bg: #e9efe8;

  --color-status-available: #4f6f52;
  --color-status-reserved: #a67c2e;
  --color-status-sold: #8a7f74;

  --color-error: #b3392c;
  --color-error-bg: #fbe9e6;

  --color-ink: #171310;
  --color-footer-fg: #b4b0ab;
  --color-footer-fg-strong: #ffffff;
  --color-footer-border: rgba(255, 255, 255, 0.12);

  /* Fredoka — единственный шрифт сайта: заголовки на весе 600 (semi bold),
     остальной текст на 400 (regular). Вес назначается точечно по элементам
     (h1-h4 и .font-hero ниже — 600), сама переменная веса не задаёт. */
  --font-display: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hero: 'Fredoka', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Caveat — только для рукописной подписи-стрелки на фото hero, намеренно вне общей пары. */
  --font-handwritten: 'Caveat', 'Segoe Script', cursive;

  /* Радиусы: щедрое скругление — фирменный признак. Карточка (28px) всегда
     на ~8px больше внутреннего радиуса фото (20px): получается видимая
     белая рамка вокруг изображения. Пилюли/кнопки/инпуты — 9999px. */
  --radius-inner: 20px;
  --radius-sm: 14px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 9999px;

  /* Тени: только мягкие, многослойные. Границы у поднятых карточек не
     используем — слой отделяет тень + сдвиг холст→белое. */
  --shadow-sm: 0 2px 8px rgba(24, 20, 15, 0.06);
  --shadow-card: 0 4px 10px -2px rgba(24, 20, 15, 0.08), 0 2px 6px -2px rgba(24, 20, 15, 0.05);
  --shadow-card-hover: 0 14px 30px -8px rgba(24, 20, 15, 0.16), 0 6px 14px -6px rgba(24, 20, 15, 0.08);
  --shadow-float: 0 6px 24px rgba(24, 20, 15, 0.12);
  --shadow-lg: 0 20px 50px -12px rgba(24, 20, 15, 0.28);
  --shadow-accent: 0 6px 22px var(--color-accent-wash);

  /* Фиксированный px больно бьёт по сверхширoким окнам (3400px+): контейнер
     упирается в потолок и оставляет гигантское пустое поле по бокам.
     calc(100vw - сайдбар - отступы) тянет ширину за вьюпортом, clamp()
     не даёт ей просесть на мобильных (нижняя граница) и раздуться до
     нечитаемых строк на 5K-мониторах (верхняя граница). */
  --container-width: clamp(1200px, calc(100vw - 264px - 220px), 2200px);
  /* Отступ холста: сайдбар и контент-карточка «плавают» на фоне --color-bg
     с этим зазором со всех сторон и между собой (Shop-app паттерн). */
  --canvas-gap: 20px;
  /* Насколько карточка поиска наезжает на низ hero. Вынесено в переменную,
     потому что от неё зависит и нижний паддинг самого hero: плашки фактов
     стоят у нижнего края кадра, и без общей величины они уезжают под
     карточку, как только hero становится ниже (см. .hero-figma__inner).
     vw, а не cqw: .section--search лежит вне container-контекста hero. */
  --hero-search-overlap: clamp(56px, 6vw, 180px);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-section: 80px;
  --grid-gap: 12px;

  /* Типографическая шкала — 5 явных шагов вместо 15 произвольных. */
  --text-3xs: 0.6875rem;   /* 11px — бейджи, счётчики, метаданные карточек */
  --text-2xs: 0.75rem;     /* 12px — микроподписи */
  --text-xs: 0.8125rem;    /* 13px — вспомогательный текст */
  --text-sm: 0.875rem;     /* 14px — подзаголовки карточек, метаданные */
  --text-base-sm: 0.9375rem; /* 15px — компактный основной текст */
  --text-lg: 1.0625rem;    /* 17px — цена в карточке, акцентный инлайн */
  --text-xl: 1.1875rem;    /* 19px — подзаголовки компонентов */
  --text-2xl: 1.4rem;      /* 22px — заголовки модалок/боксов */

  /* Трекинг: крупный текст стягиваем сильно, мелкий — отпускаем. */
  --tracking-display: -0.035em;
  --tracking-heading: -0.03em;
  --tracking-tight: -0.02em;
  --tracking-body: -0.012em;
  --tracking-label: -0.006em;

  --transition-fast: 160ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Базовые элементы
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* overflow-x:clip нужен и здесь, не только на body: реальный скроллер
   вьюпорта — html, а clip у body не гарантированно на него распространяется
   (в отличие от hidden/auto), так что боковой вынос декоративных элементов
   (покачивание карточек гарантий, повёрнутые фото и т.п.) всё равно тащился
   свайпом/драгом за пределы экрана, пока clip не стоял тут же. */
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  /* Мобильный скролл идёт по html, не по .layout__main — тот же thumb,
     что у десктопной карточки, иначе Windows рисует чёрную системную полосу. */
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 23, 18, 0.18) transparent;
}
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb {
  background-color: rgba(26, 23, 18, 0.18);
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-bg);
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover { background-color: rgba(26, 23, 18, 0.32); }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip (не hidden) — не создаёт скролл-контейнер, не ломает position: sticky
     у бокового рельса, но гасит горизонтальный вынос крупного hero-заголовка. */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: 1.12;
  margin: 0 0 var(--space-3);
  color: var(--color-fg);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.15rem); letter-spacing: var(--tracking-display); }
h2, h3 { text-transform: uppercase; letter-spacing: 0.01em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.45rem; }

p { margin: 0 0 var(--space-3); }

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-4);
}
/* На телефоне контейнер идёт в полную ширину экрана без боковых полей —
   секции и карточки с собственным фоном/паддингом тянутся до самого края,
   а не висят в рамке из фона родителя. Внутренний отступ у текстовых
   элементов (заголовки, параграфы) держат их собственные компоненты. */
@media (max-width: 640px) {
  .container { padding-left: 0; padding-right: 0; }
  /* Голый текст (заголовки, брейдкрамбы, футер), а не карточка с собственным
     паддингом — ему нужен свой боковой отступ, иначе он влипает в край
     экрана вместе с контейнером. */
  .page-header,
  .section__header,
  .journey__header,
  .journey__meter,
  .blog-zone__head,
  .notfound,
  .site-footer .container,
  .final-cta .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

.page-header { padding-top: var(--space-5); }

.muted { color: var(--color-fg-muted); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-accent);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2.5px solid var(--color-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Кнопки — pill 9999px. Иерархия трекингом и заливкой, не жирным весом.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--text-base-sm);
  letter-spacing: var(--tracking-label);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  min-height: 46px;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.97); }

.btn--primary,
.btn--whatsapp {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-accent);
}
/* Единый ховер для всех кнопок: заливка убирается, остаются акцентные
   текст и обводка — так кнопка «гаснет» до пилюли-контура вместо того,
   чтобы просто темнеть по заливке. */
.btn--primary:hover,
.btn--whatsapp:hover {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: none;
}

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-fg);
  border-color: var(--color-hairline);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: none;
}

.btn--block { width: 100%; }
.btn--lg { padding: 16px 28px; font-size: var(--text-lg); min-height: 52px; }

/* ==========================================================================
   Layout: боковой рельс навигации слева + контент
   ========================================================================== */
.layout {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
  gap: var(--canvas-gap);
  padding: var(--canvas-gap);
  box-sizing: border-box;
}
/* Контент — плавающая скруглённая карточка на холсте --color-bg, а не
   белая колонка во всю высоту вьюпорта: overflow:hidden подрезает
   full-bleed дочерние блоки (hero-фото, тёмный футер) точно по радиусу.
   Сайдбар в неё не входит — это отдельный плавающий элемент рядом (см.
   .sidebar ниже), тень карточки просто падает в его сторону, потому что
   они соседи на одном холсте. */
.layout__main {
  flex: 1;
  min-width: 0;
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Рельс — сидит рядом с карточкой прямо на холсте, без своего бокса:
   разделяет их зазор (--canvas-gap), а не белый фон/тень рельса. Тень падает
   на него от карточки .layout__main, а не от собственного бокса рельса. */
.sidebar {
  width: 264px;
  flex-shrink: 0;
  position: sticky;
  top: var(--canvas-gap);
  height: calc(100vh - var(--canvas-gap) * 2);
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  border-right: none;
  box-shadow: none;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  z-index: 100;
  transition: width var(--transition-fast);
}

/* app-shell только для карточки контента: на десктопе она занимает ровно
   высоту вьюпорта за вычетом --canvas-gap и скроллится ВНУТРИ себя — сайдбар
   уже так делает (сам себе overflow-y выше), теперь и карточка так же, а не
   растягивается на всю длину страницы, заставляя скроллиться body/html.
   Полоса скролла в этом случае неизбежно рисуется у края самой карточки, а
   не у истинного края окна — это прямое следствие модели «скролл внутри
   рамки», а не баг; тонкая полупрозрачная выглядит как часть карточки,
   а не оторванный от неё чужеродный элемент.
   Только десктоп: на мобильном фиксировать высоту всего сайта не стоит —
   мобильные браузеры плохо дружат с ловушками 100vh, а сайдбар там и так
   прилипающая шапка над обычной скроллящейся страницей. */
@media (min-width: 901px) {
  .layout { height: 100vh; overflow: hidden; }
  .layout__main {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(26, 23, 18, 0.18) transparent;
    /* Flex-колонка: #main-content растягивается на всё свободное место,
       поэтому на страницах с малым количеством контента футер всё равно
       прижат к низу карточки, а не повисает сразу под текстом с пустотой
       под собой. На длинных страницах main просто больше flex-basis и
       карточка скроллится как раньше. */
    display: flex;
    flex-direction: column;
  }
  .layout__main > main {
    flex: 1 0 auto;
  }
  .layout__main::-webkit-scrollbar { width: 8px; }
  .layout__main::-webkit-scrollbar-track { background: transparent; }
  .layout__main::-webkit-scrollbar-thumb {
    background-color: rgba(26, 23, 18, 0.18);
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-bg);
    background-clip: padding-box;
  }
  .layout__main::-webkit-scrollbar-thumb:hover { background-color: rgba(26, 23, 18, 0.32); }
  body { overflow-y: hidden; }
}

/* Гео-строка «город · доставка» в нижнем служебном ряду. */
.sidebar__geo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  width: 100%;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}
.sidebar__geo-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-accent); }
.sidebar__geo span {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  line-height: 1.35;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sidebar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0 6px;
}
.site-logo {
  display: flex;
  align-items: center;
  color: var(--color-fg);
  text-decoration: none;
  min-width: 0;
}
/* Полный лого-лок-ап (кот + вордмарк «Mr.KIT»), инлайновый SVG. */
.site-logo__full { display: block; height: 84px; width: auto; overflow: visible; }
.site-logo__mark { display: none; width: 32px; height: 32px; flex-shrink: 0; }

/* По ховеру шапка проигрывает то же моргание и взмах хвостом, что кот делает
   в прелоадере (те же keyframes pl-tail/pl-blink — см. блок «Прелоадер»).
   В покое анимации нет: она запускается заново при каждом наведении. */
.site-logo__tail,
.site-logo__lid { transform-box: view-box; }
.site-logo__lid { fill: #e35b21; transform: scaleY(0); }
.site-logo:hover .site-logo__tail,
.site-logo:focus-visible .site-logo__tail {
  transform-origin: 18.8px 320.1px;
  animation: pl-tail 1050ms ease-in-out both;
}
.site-logo:hover .site-logo__lid,
.site-logo:focus-visible .site-logo__lid {
  animation: pl-blink 800ms ease-in-out both;
}

/* Кнопка сворачивания рельса в узкую иконочную полосу (десктоп). */
.sidebar-collapse-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg);
  color: var(--color-fg-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar-collapse-toggle:hover { background: var(--color-trust-bg); color: var(--color-trust); }
.sidebar-collapse-toggle svg { width: 16px; height: 16px; transition: transform var(--transition-fast); }
.sidebar.is-collapsed .sidebar-collapse-toggle svg { transform: rotate(180deg); }

.inline-whatsapp-link {
  display: inline-flex;
  vertical-align: -5px;
  width: 22px;
  height: 22px;
  margin-left: 6px;
  color: #25d366;
}
.inline-whatsapp-link svg { width: 100%; height: 100%; }

/* Иконки связи стоят прямо над CTA (см. разметку sidebar__cta ниже) — серые в покое,
   фирменный оранжевый по ховеру/фокусу, без цветных брендовых заливок соцсетей. */
.sidebar__contact-icons {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 6px;
}
.sidebar__contact-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 73px;
  height: 73px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-fg-muted);
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar__contact-icons a:hover,
.sidebar__contact-icons a:focus-visible { color: var(--color-accent); }
.sidebar__contact-icons svg { width: 37px; height: 37px; }

/* Меню как в рельсах маркетплейсов: иконка + подпись, группы по смыслу,
   разделены тонкой линией. Активный пункт — заливка холста под 20px радиусом. */
.main-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.main-nav__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
}
.main-nav__divider {
  height: 1px;
  background: var(--color-hairline);
  margin: var(--space-2) 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.main-nav a {
  color: var(--color-fg);
  font-weight: 500;
  font-size: var(--text-base-sm);
  letter-spacing: var(--tracking-label);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.main-nav a:hover { color: var(--color-fg); text-decoration: none; background: var(--color-bg); }
.main-nav a.is-active { color: var(--color-accent); background: var(--color-accent-tint); }

/* Плавающий индикатор ховера (js/main.js): едет за курсором между пунктами,
   а не мгновенно перескакивает. Требует JS — без него остаётся обычная
   мгновенная заливка по :hover выше, ничего не ломается. */
.main-nav__indicator {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: transform var(--transition-fast), height var(--transition-fast), opacity var(--transition-fast);
  z-index: 0;
}
.main-nav.has-indicator a:hover { background: transparent; }

.main-nav__icon {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
  stroke-width: 1.6;
  color: #cfcfcf;
  transition: color var(--transition-fast);
}
.main-nav a:hover .main-nav__icon, .main-nav a:focus-visible .main-nav__icon { color: var(--color-accent); }
.main-nav a.is-active .main-nav__icon { color: var(--color-accent); }

.sidebar__wishlist-link .wishlist-count { margin-left: auto; }

/* Служебный блок в самом низу рельса: география, ниже — безопасность.
   Вниз его прижимает flex: 1 у .main-nav. */
.sidebar__utility {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-hairline);
}
.sidebar__utility-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #cfcfcf;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.sidebar__utility-link:hover { background: var(--color-bg); color: var(--color-fg); text-decoration: none; }
.sidebar__utility-link.is-active { background: var(--color-accent-tint); color: var(--color-accent); }
.sidebar__utility-link svg { width: 17px; height: 17px; }

.sidebar__cta {
  width: 100%;
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-hairline);
}
.wishlist-count {
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-3xs);
  font-weight: 600;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  flex-shrink: 0;
}
.icon { width: 22px; height: 22px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-fg);
  display: block;
  border-radius: 2px;
}

/* Сердце избранного в мобильной шапке — в десктопном рельсе прячем,
   там пункт уже есть в меню. */
.sidebar__header-wishlist {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-fg);
  text-decoration: none;
  flex-shrink: 0;
}
.sidebar__header-wishlist svg { width: 24px; height: 24px; }
.sidebar__header-wishlist:hover { color: var(--color-accent); text-decoration: none; }
.sidebar__header-wishlist .wishlist-count {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  font-size: 11px;
}

@media (max-width: 900px) {
  /* Холст на мобильном — узкий, полноразмерный зазор со всех сторон +
     между рельсом и карточкой съедал бы слишком много места. */
  :root { --canvas-gap: 10px; }
  /* align-items у .layout — flex-start (для десктопной раскладки sticky-рельса).
     В колонку это мешает: .layout__main перестаёт растягиваться на ширину
     вьюпорта и схлопывается по max-content содержимого (ленты карточек),
     давая горизонтальный скролл всей страницы. Возвращаем stretch. */
  /* Шапка — отдельная плавающая карточка, как cookie-bar: белая поверхность,
     hairline, полный radius-lg и крупная тень. Зазор до контента нужен, иначе
     нижние скругления шапки сольются с карточкой main. */
  .layout { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .sidebar {
    width: 100%;
    height: auto;
    position: sticky;
    top: calc(var(--canvas-gap) - 5px);
    margin-top: -5px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: 8px 12px;
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: visible;
    z-index: 200;
  }
  .layout__main {
    border-radius: var(--radius-lg);
    /* overflow:hidden (базовое правило) режет position:sticky у всего, что
       внутри, — на десктопе это не мешает, там сам .layout__main и есть
       скролл-контейнер (overflow-y:auto), а на мобиле скроллится страница
       целиком, и sticky (сайдбар, пин гарантий) должен цепляться за неё, а
       не за этот блок. Скругление нижних углов при overflow:visible ловит
       сам футер — см. .site-footer ниже. */
    overflow: visible;
  }
  .site-footer {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    overflow: hidden;
  }
  /* Шапка всегда своей строкой на всю ширину — иначе при открытом меню
     логотип/сердце/бургер встают в одну линию с навбаром и центрируются
     по его высоте. */
  .sidebar__top {
    flex: 0 0 100%;
    width: 100%;
    margin: 0;
    padding: 4px 4px 4px 8px;
    background: transparent;
  }
  .site-logo__full { height: 52px; }
  .nav-toggle { display: inline-flex; }
  .sidebar-collapse-toggle { display: none; }

  .sidebar__contact-icons,
  .sidebar__cta,
  .sidebar__utility,
  .main-nav {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .sidebar__contact-icons,
  .sidebar__cta {
    display: none;
    width: 100%;
    order: 4;
  }
  /* В мобильной шапке служебная иконка живёт внутри раскрывающегося меню,
     а не висит отдельной строкой рядом с логотипом. */
  .sidebar__utility {
    display: none;
    width: 100%;
    order: 5;
  }
  .main-nav {
    display: none;
    width: 100%;
    order: 3;
    padding-top: var(--space-2);
  }
  .sidebar.is-nav-open {
    max-height: calc(100dvh - var(--canvas-gap) * 2);
    overflow-y: auto;
  }
  .sidebar.is-nav-open .sidebar__top {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--color-surface);
  }
  .sidebar.is-nav-open .main-nav,
  .main-nav.is-open { display: flex; }
  .sidebar.is-nav-open .sidebar__contact-icons { display: flex; }
  .sidebar.is-nav-open .sidebar__cta { display: inline-flex; justify-content: center; }
  .sidebar.is-nav-open .sidebar__utility { display: flex; }

  /* Раскрытие и закрытие — движением, а не мгновенной подменой display.
     Сам display переходом не анимируется, поэтому его по-прежнему даёт
     .is-nav-open, а видимое состояние — второй класс .is-nav-shown: JS
     вешает его следующим кадром после display (иначе браузеру не от чего
     стартовать переход) и снимает ЗАРАНЕЕ при закрытии, придерживая display
     на время ухода (NAV_ANIM в js/main.js). */
  .sidebar.is-nav-open .main-nav a,
  .sidebar.is-nav-open .sidebar__contact-icons,
  .sidebar.is-nav-open .sidebar__cta,
  .sidebar.is-nav-open .sidebar__utility {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 200ms ease, transform 280ms cubic-bezier(0.22, 0.85, 0.3, 1);
  }
  .sidebar.is-nav-shown .main-nav a,
  .sidebar.is-nav-shown .sidebar__contact-icons,
  .sidebar.is-nav-shown .sidebar__cta,
  .sidebar.is-nav-shown .sidebar__utility {
    opacity: 1;
    transform: none;
  }
  /* Пункты выпадают волной сверху вниз — по ней и читается раскрытие.
     Порядковый номер проставляет JS (--nav-i), потому что ссылки разложены
     по нескольким .main-nav__group и сквозного nth-child по ним нет.
     Задержки только на открытие: при закрытии всё уходит разом, иначе
     меню «залипает» на полсекунды. */
  .sidebar.is-nav-shown .main-nav a { transition-delay: calc(var(--nav-i, 0) * 26ms); }
  .sidebar.is-nav-shown .sidebar__contact-icons { transition-delay: 150ms; }
  .sidebar.is-nav-shown .sidebar__cta { transition-delay: 180ms; }
  .sidebar.is-nav-shown .sidebar__utility { transition-delay: 210ms; }

  /* Бургер превращается в крестик. Привязан к .is-nav-shown, а не к
     .is-nav-open: тот держится ещё NAV_ANIM после нажатия «закрыть», и
     крестик успел бы постоять лишнее и щёлкнуть обратно уже после того,
     как меню уехало. Сдвиг 6px = высота полоски (2px) + зазор (4px). */
  .nav-toggle span {
    transform-origin: center;
    transition: transform 280ms cubic-bezier(0.22, 0.85, 0.3, 1), opacity 160ms ease;
  }
  .sidebar.is-nav-shown .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .sidebar.is-nav-shown .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
  .sidebar.is-nav-shown .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* Без анимации меню всё равно должно открываться: снимаем только переходы
   и задержки, состояния (display, повороты полосок) остаются. */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .sidebar.is-nav-open .main-nav a,
  .sidebar.is-nav-open .sidebar__contact-icons,
  .sidebar.is-nav-open .sidebar__cta,
  .sidebar.is-nav-open .sidebar__utility,
  .nav-toggle span {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
  .sidebar.is-nav-shown .main-nav a,
  .sidebar.is-nav-shown .sidebar__contact-icons,
  .sidebar.is-nav-shown .sidebar__cta,
  .sidebar.is-nav-shown .sidebar__utility { transition-delay: 0s; }
}

/* Телефон: контент и футер идут от края до края, шапка остаётся плавающей
   карточкой cookie-bar (поле --space-3, полный радиус, тень). Блок стоит
   ПОСЛЕ media 900px намеренно: у правил одинаковая специфичность, и
   побеждает тот, что ниже по файлу. */
@media (max-width: 640px) {
  .layout { padding: 0; }
  .layout__main,
  .site-footer { border-radius: 0; }
  .sidebar {
    width: auto;
    margin: calc(var(--space-3) - 5px) var(--space-3) 0;
    top: calc(var(--space-3) - 5px);
  }
}

@media (min-width: 901px) {
  /* Свёрнутый рельс: узкая иконочная полоса, подписи скрыты, иконки по центру.
     Состояние переключается кнопкой .sidebar-collapse-toggle и хранится в localStorage
     (см. инлайн-скрипт в начале aside.sidebar и js/main.js). */
  .sidebar.is-collapsed { width: 72px; padding-left: var(--space-2); padding-right: var(--space-2); }

  /* В узком рельсе остаётся пин локации, текст прячем. */
  .sidebar.is-collapsed .sidebar__utility {
    align-items: center;
    justify-content: center;
  }
  .sidebar.is-collapsed .sidebar__geo {
    width: auto;
    justify-content: center;
  }
  .sidebar.is-collapsed .sidebar__geo span { display: none; }
  .sidebar.is-collapsed .sidebar__geo-icon { width: 18px; height: 18px; }

  .sidebar.is-collapsed .sidebar__top { flex-direction: column; gap: 10px; }
  .sidebar.is-collapsed .site-logo__full { display: none; }
  .sidebar.is-collapsed .site-logo__mark { display: block; width: 48px; height: 48px; }

  /* В свёрнутом рельсе иконки идут друг за другом столбиком, как пин
     геолокации и ссылка безопасности в .sidebar__utility ниже. */
  .sidebar.is-collapsed .sidebar__contact-icons { flex-direction: column; align-items: center; }
  .sidebar.is-collapsed .sidebar__contact-icons a { width: 48px; height: 48px; }
  .sidebar.is-collapsed .sidebar__contact-icons svg { width: 24px; height: 24px; }

  .sidebar.is-collapsed .main-nav a { justify-content: center; padding: 10px; gap: 0; }
  .sidebar.is-collapsed .main-nav a span:not(.wishlist-count) { display: none; }

  /* Бейдж избранного — точка на иконке сердца, иначе в 72px-рельсе
     цифра рядом с иконкой ломает центрирование. */
  .sidebar.is-collapsed .sidebar__wishlist-link { position: relative; }
  .sidebar.is-collapsed .sidebar__wishlist-link .wishlist-count {
    position: absolute;
    top: 2px;
    right: 2px;
    margin: 0;
    min-width: 15px;
    height: 15px;
    font-size: 10px;
    line-height: 1;
  }

  .sidebar.is-collapsed .sidebar__cta { display: none; }
}

/* Тултип иконок свёрнутого рельса. Один общий фиксированный элемент
   (js/main.js), позиционируется через getBoundingClientRect() наведённого
   пункта и появляется через 0.4с наведения — рельс сам обрезает
   position:absolute по X (overflow-x:hidden), поэтому обычный дочерний
   пузырь на самой ссылке обрезало бы по краю рельса. */
.rail-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: max-content;
  max-width: 220px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: var(--tracking-label);
  box-shadow: var(--shadow-accent);
  opacity: 0;
  pointer-events: none;
  transform: translate(0, -50%) translateX(-6px);
  transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rail-tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--color-accent);
  transform: rotate(45deg);
}
.rail-tooltip.is-visible {
  opacity: 1;
  transform: translate(0, -50%) translateX(0);
}
@media (max-width: 900px) {
  .rail-tooltip { display: none; }
}

/* ==========================================================================
   Trust strip / доверие
   ========================================================================== */
.trust-strip {
  background: var(--color-trust-bg);
  padding: var(--space-4) 0;
}
.trust-strip__registration {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-trust);
  justify-content: center;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}
.trust-strip__registration .icon { color: var(--color-trust); }
.trust-strip__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--text-base-sm);
  color: var(--color-fg);
}
.trust-strip__items li {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.trust-strip__items li::before {
  content: "✓";
  color: var(--color-trust);
  font-weight: 600;
}

.trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-trust);
  padding: var(--space-4) 0 var(--space-3);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Секции / Hero — щедрый вертикальный ритм 80px между смысловыми блоками.
   ========================================================================== */
.section {
  padding: var(--space-section) 0;
  scroll-margin-top: 90px;
}
.section--muted { background: var(--color-muted-bg); }
.section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-5);
}
.section__header h2 {
  max-width: none;
  margin-bottom: var(--space-2);
}
.section__header .muted { font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }

.section--tagline { padding: var(--space-6) 0; }
.section--tagline h2 { font-size: clamp(1.7rem, 3vw, 2.1rem); margin: 0 0 var(--space-2); }
.section--tagline p { max-width: 560px; margin: 0 auto; font-size: var(--text-lg); }

/* Инлайновая иконка в тексте (напр. «назад» в шапке карточки котёнка). */
.icon-inline { width: 17px; height: 17px; flex-shrink: 0; }
/* Главный блок вынесен в отдельную секцию ниже — см. «ГЛАВНЫЙ БЛОК». */

/* ==========================================================================
   Общий вид карточки-товара — плавающая, сильно скруглённая, с внутренней
   рамкой изображения (радиус карточки > радиуса фото). Границ нет.
   ========================================================================== */
/* .breed-grid-wrap — контейнер, который js/main.js схлопывает по max-height
   до высоты одной строки карточек (десктоп/планшет) и раскрывает кнопкой
   «Показать ещё» ровно тем же приёмом, что и .more-filters-panel выше. */
.breed-grid-wrap {
  overflow: hidden;
  /* Отрицательный margin компенсирует padding — сама сетка визуально не
     сдвигается, но внутри overflow:hidden появляется запас, чтобы тень
     и подъём карточки на hover (--hover-y) не обрезались по краю строки.

     Снизу нужно 17px: --shadow-card-hover (0 14px 30px -8px) уходит под
     карточку на 21px, а сама она на hover поднимается на 4px. По бокам та же
     тень расходится на 7px. Берём 20px — с запасом, но обязательно МЕНЬШЕ
     row-gap сетки (24px): в схлопнутом виде max-height = высота строки +
     эти поля, и больший запас показал бы верх карточек второго ряда. */
  margin: -10px -10px -20px;
  padding: 10px 10px 20px;
  transition: max-height var(--transition-base);
}
.breeds-show-more[hidden] { display: none; }
/* Подписи кнопки переключаются по aria-expanded, а не native [hidden] —
   иначе .btn перебивает [hidden] (см. комментарий у .quiz-wizard__back выше),
   и обе подписи разом остаются в display:none. */
#breeds-show-more-btn [data-label-less] { display: none; }
#breeds-show-more-btn[aria-expanded="true"] [data-label-more] { display: none; }
#breeds-show-more-btn[aria-expanded="true"] [data-label-less] { display: inline; }

.breed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  /* Между рядами больше, чем между колонками: в этот зазор уходит тень
     карточки (вниз она расходится сильнее, чем вбок), и по нему же режет
     схлопнутая .breed-grid-wrap — см. её запас снизу. */
  row-gap: 24px;
}
@media (min-width: 600px) { .breed-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .breed-grid { grid-template-columns: repeat(6, 1fr); } }

/* Мобиль: не многострочная сетка, а одна строка со свайпом — тот же приём
   горизонтальной карусели, что и .article-slider выше, без стрелок (только
   тач-скролл). Кнопка «Показать ещё» тут смысла не имеет — скрыта в JS. */
@media (max-width: 599px) {
  .breed-grid {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 2px var(--space-4) 4px;
    /* scroll-padding = боковой паддинг: первая карточка не влипает в край,
       следующая всегда «подглядывает» — читается как слайдер. */
    scroll-padding-inline: var(--space-4);
    /* Нативный бар прячем: вместо него .breed-scroll — пилюля в токенах сайта. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  .breed-grid::-webkit-scrollbar { display: none; }
  .breed-grid .breed-card {
    /* ~1.6 карточки в кадре (было 156px / ~2.3): фото читается с руки,
       край следующей карточки остаётся намёком на свайп. */
    flex: 0 0 min(280px, 74vw);
    scroll-snap-align: start;
  }
  .breed-grid .breed-card .breed-card__name {
    font-size: var(--text-base-sm);
    padding: 14px var(--space-2) 10px;
  }
  .breed-grid-wrap { max-height: none !important; }
}

/* Индикатор горизонтального свайпа: дорожка hairline, бегунок акцентом —
   та же пилюля, что у кнопок/cookie-bar, а не системный Windows-скроллбар.
   Живёт под каруселью пород (.breed-grid-wrap) и под .slider (советы/отзывы). */
.h-scroll {
  display: none;
  position: relative;
  height: 6px;
  margin: 18px var(--space-4) 0;
  background: rgba(26, 23, 18, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.h-scroll__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
}
@media (max-width: 599px) {
  .breed-grid-wrap > .h-scroll:not([hidden]) { display: block; }
}
@media (max-width: 640px) {
  .slider > .h-scroll:not([hidden]) { display: block; }
}
/* Отрицательный margin у .breed-grid-wrap (запас под тень/подъём карточки на
   hover) раньше уходил в паддинг .container/.layout. На full-bleed телефонной
   и планшетной ширине (см. блок «Телефон: карточка контента...» выше) этого
   паддинга больше нет, и то же поле вылезало настоящим горизонтальным
   скроллом страницы. На тач-устройствах hover не работает, запас не нужен. */
@media (max-width: 640px) {
  .breed-grid-wrap { margin: 0; padding: 0; }
}

/* transform собирается из двух независимых переменных — hover-сдвиг и
   сдвиг появления по скролу — вместо того чтобы .reveal и :hover переписывали
   одно и то же свойство transform и «перебивали» друг друга по специфичности. */
.breed-card {
  --hover-y: 0px;
  background: var(--color-elevated);
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: var(--color-fg);
  transform: translateY(var(--reveal-y, 0)) translateY(var(--hover-y, 0));
  transition: opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  transition-delay: var(--reveal-delay, 0ms);
  display: block;
  overflow: hidden;
}
.breed-card:hover {
  --hover-y: -4px;
  box-shadow: var(--shadow-card-hover);
  text-decoration: none;
}
.reveal > .breed-card { opacity: 0; --reveal-y: 16px; }
.reveal.is-visible > .breed-card { opacity: 1; --reveal-y: 0px; transition-delay: 0ms; }

.breed-card__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-inner);
  overflow: hidden;
  background: var(--color-muted-bg) center/cover no-repeat;
  transition: transform var(--transition-base);
}
/* Лёгкий зум фото породы на ховере — карточка не просто «подпрыгивает»,
   у каждого типа карточки свой акцент движения. */
.breed-card:hover .breed-card__media { transform: scale(1.06); }
.breed-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-3xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 8px rgba(24, 20, 15, 0.22);
}
.breed-card__name {
  padding: 12px var(--space-2) 8px;
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  text-align: center;
}

/* ==========================================================================
   Карточка статьи
   ========================================================================== */
.article-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}
@media (min-width: 900px) { .article-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .article-grid { grid-template-columns: 1fr; } }

.slider {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.slider > .h-scroll {
  flex: 1 0 100%;
  margin-top: 12px;
}
.article-slider {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2px 2px 12px;
  flex: 1;
  min-width: 0;
  scrollbar-width: thin;
}
.article-slider .article-card {
  flex: 0 0 284px;
  scroll-snap-align: start;
}
/* Когда карточек мало и они не заполняют ширину блока, ряд центрируем, а не
   прижимаем к левому краю (см. data-slider-track в main.js — класс включается
   только если контент не переполняет трек и скролл не нужен). */
.article-slider.is-fit { justify-content: center; }
/* Карусельная стрелка: 36px белый круг, мягкая «плавающая» тень, без границы. */
.slider__nav {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface);
  color: var(--color-fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-float);
  transition: transform var(--transition-fast);
}
.slider__nav svg { width: 18px; height: 18px; }
/* Шеврон в спрайте один и смотрит влево — кнопке «вперёд» отражаем его, а не
   держим в спрайте второй зеркальный путь. */
.slider__nav--next svg { transform: scaleX(-1); }
.slider__nav:hover { transform: scale(1.08); }
.slider__nav:active { transform: scale(0.92); }
@media (max-width: 640px) {
  .slider__nav { display: none; }
  .article-slider,
  .owners-gallery {
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
  }
  .article-slider::-webkit-scrollbar,
  .owners-gallery::-webkit-scrollbar { display: none; }
}
/* .slider__nav задаёт display:flex сам — атрибут hidden эту декларацию не
   перебьёт (авторский display всегда выше UA-стиля [hidden]), поэтому прячем
   явным правилом (см. syncFit в main.js). */
.slider__nav[hidden] { display: none; }
.article-card {
  --hover-y: 0px;
  background: var(--color-elevated);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transform: translateY(var(--reveal-y, 0)) translateY(var(--hover-y, 0));
  transition: opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  transition-delay: var(--reveal-delay, 0ms);
  overflow: hidden;
}
.article-card:hover { --hover-y: -4px; box-shadow: var(--shadow-card-hover); }
.reveal > .article-card { opacity: 0; --reveal-y: 16px; }
.reveal.is-visible > .article-card { opacity: 1; --reveal-y: 0px; transition-delay: 0ms; }

.article-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-inner);
  overflow: hidden;
  background: var(--color-muted-bg) center/cover no-repeat;
  transition: transform var(--transition-base);
}
/* Обложка — фон на самом <a>, а не <img>, поэтому зумим сам блок медиа,
   а не несуществующий вложенный img. */
.article-card:hover .article-card__media { transform: scale(1.06); }
.article-card__read {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-frost);
  backdrop-filter: blur(4px);
  color: var(--color-fg);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base);
}
.article-card:hover .article-card__read {
  background: var(--color-accent);
  color: var(--color-on-accent);
  transform: translateY(-1px);
}
.article-card__body {
  padding: var(--space-3) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.article-card__title {
  margin: 0;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
}
.article-card__title a { color: inherit; text-decoration: none; }
.article-card__excerpt {
  color: var(--color-fg-muted);
  font-size: var(--text-base-sm);
  flex: 1;
  margin: 0;
}
.article-detail__cover {
  width: 100%;
  border-radius: var(--radius-lg);
  margin: var(--space-3) 0;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ==========================================================================
   Карточка котёнка
   ========================================================================== */
.kitten-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}
@media (min-width: 640px) { .kitten-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .kitten-grid { grid-template-columns: repeat(4, 1fr); } }

.kitten-card {
  --hover-y: 0px;
  position: relative;
  background: var(--color-elevated);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: var(--shadow-card);
  transform: translateY(var(--reveal-y, 0)) translateY(var(--hover-y, 0));
  transition: opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  transition-delay: var(--reveal-delay, 0ms);
}
.kitten-card:hover { --hover-y: -5px; box-shadow: var(--shadow-card-hover); }
.reveal > .kitten-card { opacity: 0; --reveal-y: 16px; }
.reveal.is-visible > .kitten-card { opacity: 1; --reveal-y: 0px; transition-delay: 0ms; }
.kitten-card--sold { opacity: 0.9; }
.reveal.is-visible > .kitten-card.kitten-card--sold { opacity: 0.9; }

.kitten-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-inner);
  overflow: hidden;
  background: var(--color-muted-bg);
}
.kitten-card__media-link { display: block; width: 100%; height: 100%; }
.kitten-card__media img {
  /* Оба фото карусели (--a и --b) лежат друг на друге одним и тем же
     прямоугольником: кроссфейд между ними — это две наложенные картинки,
     а не смена содержимого одной, поэтому обеим нужна абсолютная позиция
     внутри .kitten-card__media (она же relative) и общий inset:0. У карточки
     с одним фото второго слоя в разметке нет — здесь просто ничего не
     перекрывает. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* opacity — под кроссфейд листания (js/main.js): при клике JS готовит
     следующее фото в скрытом слое и переключает прозрачность обоих слоёв
     разом, когда оно уже декодировано — картинки честно перекрещиваются,
     без мигания пустым кадром между ними. */
  transition: transform var(--transition-base), opacity 220ms linear;
}
/* Второй слой изначально скрыт — виден только когда JS сделает его текущим
   при листании (сам меняет которая из двух opacity:1, см. main.js). */
.kitten-card__img--b { opacity: 0; }
/* Фото котёнка чуть увеличивается на ховере — карточка перестаёт быть
   просто «поднимающейся плиткой» и откликается на курсор самим кадром. */
.kitten-card:hover .kitten-card__media img { transform: scale(1.06); }
.kitten-card__media-placeholder { width: 100%; height: 100%; background: var(--color-muted-bg); }

.kitten-card__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-frost);
  backdrop-filter: blur(4px);
  color: var(--color-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  box-shadow: var(--shadow-float);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 3;
}
.kitten-card__nav svg { width: 15px; height: 15px; }
.kitten-card__nav--prev { left: 10px; }
.kitten-card__nav--next { right: 10px; }
/* Шеврон в спрайте один и смотрит влево — «вперёд» отражаем, как у .slider__nav. */
.kitten-card__nav--next svg { transform: scaleX(-1); }
.kitten-card:hover .kitten-card__nav { opacity: 1; }
.kitten-card__nav:hover { transform: translateY(-50%) scale(1.08); }
.kitten-card__nav:active { transform: translateY(-50%) scale(0.92); }
/* На узкой 2-колоночной сетке (телефон) стрелки только загромождают кадр —
   листания достаточно точками/свайпом, как и в остальном UI карточки. */
@media (hover: none) and (min-width: 641px) {
  .kitten-card__nav { opacity: 1; }
}
@media (max-width: 640px) {
  .kitten-card__nav { display: none; }
}

.kitten-card__dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  z-index: 3;
}
.kitten-card__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.kitten-card__dot.is-active { background: #fff; transform: scale(1.25); }

/* Статус-бейдж — полупрозрачная белая плашка с цветной точкой (DESIGN.md:
   «semi-transparent white label box»), не заливка цветом во всю плашку. */
.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-frost);
  backdrop-filter: blur(4px);
  color: var(--color-fg);
  box-shadow: var(--shadow-sm);
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.badge--available,
.badge--reserved,
.badge--sold { color: var(--color-fg); }
.badge--available::before { background: var(--color-status-available); }
.badge--reserved::before { background: var(--color-status-reserved); }
.badge--sold::before { background: var(--color-status-sold); }

/* NEW — единственный акцент действия/новизны, оставляем сплошную заливку.
   Кладём под статус-бейджем слева, чтобы не столкнуться с кнопкой избранного. */
.badge--new {
  left: 10px;
  right: auto;
  top: 46px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 2px 8px var(--color-accent-wash);
}
.badge--new::before { display: none; }
.badge--static {
  position: static;
  display: inline-flex;
  margin-bottom: var(--space-2);
}

.wishlist-toggle {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--color-frost);
  backdrop-filter: blur(4px);
  color: var(--color-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), color var(--transition-fast);
  z-index: 4;
}
.wishlist-toggle:hover { transform: scale(1.1); }
.wishlist-toggle:active { transform: scale(0.88); }
.wishlist-toggle.is-active { color: var(--color-accent); }
/* Короткий «пульс» сердечка в момент добавления в избранное — иначе
   единственная обратная связь для действия «нравится» — смена цвета. */
@keyframes wishlist-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.wishlist-toggle.is-popping { animation: wishlist-pop 360ms cubic-bezier(0.22, 1, 0.36, 1); }
.wishlist-toggle.is-active .icon { fill: currentColor; }

.kitten-card__body { padding: 14px var(--space-2) var(--space-2); }
.kitten-card__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  font-size: var(--text-xl);
  color: var(--color-fg);
  margin-bottom: 3px;
  text-decoration: none;
}
.kitten-card__name:hover { text-decoration: none; color: var(--color-accent); }
.kitten-card__meta {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}
.kitten-card__meta a { color: var(--color-fg-muted); text-decoration: none; }
.kitten-card__meta a:hover { color: var(--color-accent); }
.kitten-card__price {
  margin: 0;
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
}
.kitten-card__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-2) 0 0;
  padding: 0;
}
.kitten-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-muted-bg);
  color: var(--color-fg-muted);
  font-size: var(--text-3xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Каталог: панель фильтров-пилюль
   ========================================================================== */
.catalog-layout { display: block; }

.filters { margin-bottom: var(--space-4); }
.filters__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.filter-dropdown { position: relative; }
/* Пилюля фильтра: белая, тонкая граница-волосок, мягкая тень (по DESIGN.md
   «Category Pill» границы у чипов допустимы — запрет границ только на
   поднятых карточках). */
.filter-dropdown summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  list-style: none;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  user-select: none;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.filter-dropdown summary::-webkit-details-marker { display: none; }
.filter-dropdown summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  color: var(--color-fg-muted);
  transition: transform var(--transition-fast);
}
.filter-dropdown[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.filter-dropdown summary:hover { border-color: var(--color-fg-muted); }
.filter-dropdown[open] summary { border-color: var(--color-accent); color: var(--color-accent); }

.filter-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 60;
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 200px;
  font-size: var(--text-base-sm);
}
.filter-options--row { flex-direction: row; gap: var(--space-3); }
.filter-options label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; white-space: nowrap; }
.filter-options input[type="checkbox"],
.filter-options input[type="radio"] { accent-color: var(--color-accent); width: 15px; height: 15px; flex-shrink: 0; }
.filter-options--scroll { max-height: 260px; overflow-y: auto; }
.filter-dropdown__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--text-2xs);
}

.filters__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.filters__reset {
  font-size: var(--text-base-sm);
  color: var(--color-fg-muted);
}

@media (max-width: 760px) {
  .filters__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
  }
  .filter-dropdown { flex-shrink: 0; }
  .filters__apply { flex: 1; }
}

/* Кнопка «Ещё фильтры» на /kittens — прячет .more-filters-panel (полный
   .filters с породой/полом/возрастом/цветом/классом и т.д.), чтобы под
   панелью поиска не стояла ещё одна такая же с виду панель фильтров.
   Живёт в .catalog-toolbar__controls, рядом с сортировкой — не отдельной
   строкой между поиском и остальным тулбаром.
   Раскрытие анимирует js/main.js (max-height по scrollHeight, тот же приём,
   что и в FAQ) — здесь это обычный div, а не <details>, так что никакого
   встроенного display:none, с которым нужно бороться, нет. */
.more-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
  color: var(--color-fg);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.more-filters-toggle:hover { border-color: var(--color-fg-muted); }
.more-filters-toggle[aria-expanded="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.more-filters-toggle__icon { width: 18px; height: 18px; flex-shrink: 0; }
.more-filters-toggle__chevron { width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--transition-fast); }
.more-filters-toggle[aria-expanded="true"] .more-filters-toggle__chevron { transform: rotate(180deg); }

.more-filters-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-base);
}
/* overflow: hidden выше — часть приёма max-height-аккордеона (js/main.js),
   но он же обрезает выпадашку .filter-options последнего ряда пилюль
   (Класс/Документы/Цена/Статус), если ей некуда раскрыться внутри панели.
   Пока внутри открыта пилюля — снимаем обрезку; сама анимация уже
   отыграла к этому моменту, так что закрытию/раскрытию это не мешает. */
.more-filters-panel:has(.filter-dropdown[open]) { overflow: visible; }
.more-filters-panel .filters { margin-top: var(--space-3); }

.catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  gap: var(--space-3);
  flex-wrap: wrap;
}
.catalog-toolbar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.catalog-toolbar .muted { font-size: var(--text-base-sm); }

.toolbar-select {
  height: 42px;
  min-height: 0;
  width: auto;
  padding: 0 36px 0 var(--space-3);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c7873' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  box-shadow: var(--shadow-sm);
  appearance: none;
  color: var(--color-fg);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  cursor: pointer;
}
.toolbar-select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.pagination {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-5);
}
.pagination a, .pagination span {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-fg);
  text-decoration: none;
}
.pagination a:hover { text-decoration: none; box-shadow: var(--shadow-card); }
.pagination .is-current { background: var(--color-accent); color: #fff; border-color: transparent; box-shadow: 0 2px 8px var(--color-accent-wash); }

.empty-state {
  text-align: center;
  padding: var(--space-section) var(--space-3);
  color: var(--color-fg-muted);
}
.empty-state__mascot { width: 140px; height: auto; margin: 0 auto var(--space-4); display: block; }

.notfound__mascot { width: 180px; height: auto; margin: 0 auto var(--space-4); display: block; }

/* ==========================================================================
   Карточка котёнка — детальная страница
   ========================================================================== */
.kitten-detail {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
}
@media (max-width: 900px) {
  .kitten-detail { grid-template-columns: 1fr; }
}

.gallery__main {
  position: relative;
  display: block;
  width: 100%;
  padding: 8px;
  border: 0;
  cursor: zoom-in;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background: var(--color-surface);
  aspect-ratio: 4 / 3;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-inner); }
.gallery__zoom {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-frost);
  backdrop-filter: blur(4px);
  color: var(--color-fg);
  box-shadow: var(--shadow-float);
}
.gallery__zoom svg { width: 20px; height: 20px; }
.gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  overflow-x: auto;
}
.gallery__thumb {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: none;
  cursor: pointer;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery__thumb.is-active { border-color: var(--color-accent); }
.gallery__thumb:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.gallery__video {
  margin-top: var(--space-3);
  aspect-ratio: 16/9;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.gallery__video iframe { width: 100%; height: 100%; border: 0; }

.kitten-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}
.tag {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-label);
}

.kitten-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: var(--space-3) 0;
}
.kitten-price-row .price {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  color: var(--color-accent);
  font-family: var(--font-display);
}

.info-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  margin: var(--space-4) 0;
}
.info-card ul { margin: 0; padding-left: var(--space-4); }
.info-card--full { margin: var(--space-5) 0; padding: var(--space-4); }

.detail-actions { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0; }

.sticky-cta { display: none; }
@media (max-width: 900px) {
  .sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-hairline);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    z-index: 200;
    box-shadow: 0 -8px 24px rgba(24, 20, 15, 0.1);
    flex-wrap: wrap;
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  }
  .sticky-cta .btn { flex: 1 1 45%; }
  .sticky-cta__note {
    flex: 1 1 100%;
    margin: 0;
    font-size: var(--text-2xs);
    line-height: 1.3;
    text-align: center;
    color: var(--color-fg-muted);
  }
  .kitten-detail { padding-bottom: 120px; }
}

/* ==========================================================================
   Плавающие виджеты (Kitten box / Доставка) — не два оранжевых круга, а один
   матовый док-пилюля: иконочные кнопки в стекле, подпись выезжает слева по
   наведению, акцент остаётся только на активном состоянии и точке-маячке.
   ========================================================================== */
.float-widgets {
  position: fixed;
  right: 18px;
  bottom: 24px;
  top: auto;
  /* Выше плашки cookie (950), но ниже модалок (1000): иначе плашка, растянутая
     во всю ширину экрана, перекрывает док и съедает клики по нему. */
  z-index: 960;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow:
    inset 0 0 0 1px rgba(26, 23, 18, 0.06),
    0 1px 2px rgba(24, 20, 15, 0.05),
    0 14px 34px -14px rgba(24, 20, 15, 0.3);
}
.float-widget { position: relative; }
/* Волосяной разделитель в зазоре между кнопками — вместо второго тяжёлого круга. */
.float-widget + .float-widget::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 50%;
  width: 22px;
  height: 1px;
  transform: translateX(-50%);
  background: var(--color-hairline);
}

.float-widget__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  box-sizing: border-box;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-fg);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.float-widget__tab:hover,
.float-widget__tab:focus-visible {
  background: var(--color-accent-tint);
  color: var(--color-accent);
}
.float-widget__tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.float-widget__tab:active { transform: scale(0.94); }
/* Раскрытая панель — единственное место, где кнопка заливается акцентом. */
.float-widget__tab[aria-expanded="true"] {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 4px 14px var(--color-accent-wash);
}

.float-widget__tab-icon { display: flex; width: 24px; height: 24px; flex-shrink: 0; }
.float-widget__tab-icon svg { width: 100%; height: 100%; display: block; }

/* Подпись не теснится внутри круга, а выезжает тёмной пилюлей слева. */
.float-widget__tab-label {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  transform: translate(8px, -50%);
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.float-widget__tab:hover .float-widget__tab-label,
.float-widget__tab:focus-visible .float-widget__tab-label {
  opacity: 1;
  transform: translate(0, -50%);
}
/* На тач-экранах ховера нет — тултип там мёртвый груз. */
@media (hover: none) {
  .float-widget__tab-label { display: none; }
}

/* Маячок у главного виджета: точка вместо надписи, чтобы взгляд всё-таки цеплялся. */
.float-widget--kittenbox .float-widget__tab::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
  animation: float-widget-dot 3.4s ease-in-out infinite;
}
.float-widget--kittenbox .float-widget__tab[aria-expanded="true"]::after,
.float-widget--kittenbox .float-widget__tab:hover::after { display: none; }
@keyframes float-widget-dot {
  0%, 72%, 100% { transform: scale(1); opacity: 1; }
  84% { transform: scale(1.4); opacity: 0.85; }
}

.float-widget__panel {
  position: absolute;
  top: auto;
  bottom: -5px;
  right: calc(100% + 14px);
  width: 322px;
  max-width: calc(100vw - 24px);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--color-hairline), var(--shadow-lg);
  padding: var(--space-4);
  margin-right: 0;
  transform-origin: right bottom;
  animation: float-widget-in 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes float-widget-in {
  from { opacity: 0; transform: translateX(10px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
@keyframes float-widget-in-up {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.float-widget__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--color-fg-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.float-widget__close:hover { background: var(--color-accent-tint); color: var(--color-accent); }
.float-widget__close svg { width: 14px; height: 14px; }
.float-widget__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-right: 26px;
}
.float-widget__photo {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-hairline);
}
.float-widget__title { margin: 0 0 3px; font-size: var(--text-lg); letter-spacing: var(--tracking-tight); }
.float-widget__subtitle { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-fg-muted); line-height: 1.45; }
.float-widget__header .float-widget__subtitle { margin: 0; }
.float-widget__panel > .float-widget__title { padding-right: 26px; }
/* Галочки акцентом вместо серых дисков — список читается как «что входит». */
.float-widget__list {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  line-height: 1.45;
}
.float-widget__list li {
  position: relative;
  margin-bottom: 6px;
  padding-left: 20px;
}
.float-widget__list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.38em;
  width: 9px;
  height: 5px;
  border-left: 1.6px solid var(--color-accent);
  border-bottom: 1.6px solid var(--color-accent);
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .float-widgets {
    right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .float-widget__tab { width: 46px; height: 46px; }
  .float-widget__tab-icon { width: 22px; height: 22px; }
}
/* Слева от дока на узком экране панели уже не хватает места — поднимаем её над ним. */
@media (max-width: 640px) {
  .float-widget__panel {
    right: -5px;
    bottom: calc(100% + 12px);
    width: calc(100vw - 24px);
    max-width: 360px;
    animation-name: float-widget-in-up;
  }
}
/* Липкий CTA на карточке котёнка занимает низ экрана — поднимаем док выше него. */
@media (max-width: 900px) {
  body:has(.sticky-cta) .float-widgets {
    bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   Формы — pill-инпуты 9999px, волосяная граница, без тяжёлых рамок.
   ========================================================================== */
.form-field { margin-bottom: var(--space-3); }
.form-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: var(--text-base-sm);
  letter-spacing: var(--tracking-label);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 12px 20px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--color-surface);
  color: var(--color-fg);
  min-height: 46px;
  box-sizing: border-box;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-field textarea { min-height: 120px; border-radius: var(--radius-md); resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-tint);
  outline: none;
}
.form-hint { font-size: var(--text-xs); color: var(--color-fg-muted); margin-top: 4px; }

/* Кастомный input[type=file]: нативная кнопка берёт подпись из локали ОС
   браузера, а не страницы, — на англоязычной странице у русскоязычного
   пользователя вылезало бы «Выберите файл». Прячем нативную кнопку,
   рисуем свою pill-кнопку и подпись именем файла через JS (см. main.js). */
.file-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 46px;
  padding: 5px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-sizing: border-box;
}
.file-field__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.file-field__button {
  flex-shrink: 0;
  padding: 8px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-tint);
  color: var(--color-accent);
  font-weight: 600;
  font-size: var(--text-base-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.file-field__button:hover { background: var(--color-accent); color: #fff; }
.file-field__input:focus-visible ~ .file-field__button {
  box-shadow: 0 0 0 3px var(--color-accent-tint);
  outline: none;
}
.file-field__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-fg-muted);
  font-size: var(--text-base-sm);
}

/* Кастомный рейтинг (форма отзыва): нативный <select> рисует свою выпадашку
   (и подсветку выбранной строки) браузером/ОС — её нельзя перекрасить в
   оранжевый. Переиспользуем .filter-dropdown/.pill-select (тот же приём,
   что и в search_panel.html), только на всю ширину поля формы. */
.rating-select summary {
  width: 100%;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: normal;
  box-shadow: none;
  box-sizing: border-box;
}
.rating-select .filter-options { min-width: 100%; width: max-content; }
.rating-select__options label { padding: 6px 8px; border-radius: var(--radius-sm); }
.rating-select__options label:hover { background: var(--color-accent-tint); }
.rating-select__stars { color: var(--color-accent); letter-spacing: 2px; }
.form-error {
  background: var(--color-error-bg);
  color: var(--color-error);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.flash-messages { max-width: var(--container-width); margin: var(--space-3) auto 0; padding: 0 var(--space-4); }
.flash {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.flash--success { background: var(--color-trust-bg); color: var(--color-trust); }
.flash--error { background: var(--color-error-bg); color: var(--color-error); }

/* ==========================================================================
   Квиз
   ========================================================================== */
.quiz-form { max-width: 640px; margin: 0 auto; }
.quiz-step {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-3);
}
.quiz-step h3 { margin-bottom: var(--space-3); }
.quiz-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.quiz-options label {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  cursor: pointer;
  font-size: var(--text-base-sm);
  letter-spacing: var(--tracking-label);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.quiz-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz-options input:checked + span,
.quiz-options label:has(input:checked) {
  background: var(--color-accent);
  color: #fff;
  border-color: transparent;
}

/* ==========================================================================
   Пошаговый квиз подбора породы (/breed-quiz)
   Один вопрос на экран + маскот по смыслу вопроса. Классы отдельные от
   .quiz-form/.quiz-step — их продолжает использовать квиз подбора котят.
   Пошаговость включает JS (.is-ready); без него видны все карточки сразу.
   ========================================================================== */
/* 1080 — иначе шаг с двумя десятками пород плюс маскот 200px
   сжимает пилюли в кучу (раньше было 720). */
.quiz-wizard { max-width: 1080px; margin: 0 auto; }

.quiz-wizard__progress { margin-bottom: var(--space-4); }
.quiz-wizard__counter {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  color: var(--color-fg-muted);
  text-transform: uppercase;
}
.quiz-wizard__track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-tint);
  overflow: hidden;
}
.quiz-wizard__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transition: width var(--transition-base);
}

.quiz-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-5);
  margin-bottom: var(--space-3);
}
/* Кот-сыщик один на весь квиз: слот фиксированный, картинка вписывается в него.
   Покачивание с наклоном в обе стороны читается как «оглядывается через лупу»;
   пауза во второй половине цикла не даёт движению стать назойливым. */
.quiz-card__mascot {
  flex-shrink: 0;
  width: 200px;
  height: 190px;
  object-fit: contain;
  transform-origin: 50% 88%;
  animation: quizMascotPeek 7s ease-in-out infinite;
}
/* На смене шага кот выныривает заново, а потом уходит в тот же цикл. */
.quiz-card.is-active .quiz-card__mascot {
  animation: quizMascotIn 520ms cubic-bezier(0.22, 1, 0.36, 1) both,
             quizMascotPeek 7s 520ms ease-in-out infinite;
}
@keyframes quizMascotIn {
  from { opacity: 0; transform: translateY(16px) scale(0.86) rotate(-7deg); }
  to { opacity: 1; transform: none; }
}
@keyframes quizMascotPeek {
  0%, 56%, 100% { transform: translateY(0) rotate(0deg); }
  14% { transform: translateY(-7px) rotate(-3deg); }
  28% { transform: translateY(0) rotate(0deg); }
  42% { transform: translateY(-7px) rotate(3deg); }
}
.quiz-card__body { flex: 1; min-width: 0; }
.quiz-card__question {
  margin: 0 0 var(--space-1);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-heading);
}
.quiz-card__hint {
  margin: 0 0 var(--space-4);
  color: var(--color-fg-muted);
  font-size: var(--text-xs);
}
.quiz-card__options { display: flex; flex-direction: column; gap: var(--space-2); }
/* Шаг с двумя десятками пород: строки превратили бы его в бесконечный
   список, поэтому там варианты выкладываются пилюлями в несколько рядов. */
.quiz-card__options--chips {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 13px var(--space-4);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-base-sm);
  letter-spacing: var(--tracking-label);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), background var(--transition-fast),
    box-shadow var(--transition-fast), transform var(--transition-fast);
}
.quiz-option:hover { border-color: var(--color-accent-wash); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.quiz-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz-option__mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  position: relative;
  transition: border-color var(--transition-fast);
}
.quiz-option__mark::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--color-accent);
  transform: scale(0);
  transition: transform var(--transition-fast);
}
.quiz-option input:checked + .quiz-option__mark { border-color: var(--color-accent); }
.quiz-option input:checked + .quiz-option__mark::after { transform: scale(1); }
.quiz-option input:focus-visible + .quiz-option__mark { box-shadow: 0 0 0 3px var(--color-accent-tint); }
.quiz-option:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-tint); }

.quiz-option--chip { padding: 12px 20px; border-radius: var(--radius-pill); }
.quiz-option--chip:has(input:checked) {
  background: var(--color-accent);
  border-color: transparent;
  color: var(--color-on-accent);
}

.quiz-wizard__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.quiz-wizard__actions .quiz-wizard__submit,
.quiz-wizard__actions .quiz-wizard__next { flex: 1; }
/* .btn задаёт display:inline-flex и перебивает [hidden] из normalize. */
.quiz-wizard__back[hidden],
.quiz-wizard__next[hidden] { display: none; }

/* --- Пошаговый режим (включается JS) --- */
.quiz-wizard.is-ready .quiz-card { display: none; margin-bottom: 0; }
.quiz-wizard.is-ready .quiz-card.is-active { display: flex; animation: quizStepIn var(--transition-base) both; }
/* Кнопка отправки нужна только на последнем шаге — остальные листаются
   автоматически по выбору ответа. */
.quiz-wizard.is-ready:not(.is-last) .quiz-wizard__submit { display: none; }
/* Без JS «Далее» не нужен: там все вопросы на одной странице. */
.quiz-wizard:not(.is-ready) .quiz-wizard__next { display: none; }

@keyframes quizStepIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 880px) {
  .quiz-card { flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-4); text-align: center; }
  .quiz-card__mascot { width: 150px; height: 130px; }
  .quiz-card__options { text-align: left; }
  .quiz-card__question { font-size: var(--text-xl); }
}

.results-summary {
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* Две равные карточки: квиз пород + 30 дней поддержки.
   Родитель — 3-рядная сетка, карточки садятся в неё через subgrid:
   визуал / текст / футер стоят на одних линиях, даже если контент разный. */
.promo-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: var(--space-3);
  row-gap: var(--space-4);
}
.promo-card {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  justify-items: center;
  text-align: center;
  min-width: 0;
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.promo-card__visual,
.promo-card__body,
.promo-card__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}
.promo-card__body { gap: var(--space-2); }
.promo-card__title {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: 1.25;
  letter-spacing: 0.01em;
  max-width: 20ch;
}
.promo-card__text {
  margin: 0;
  color: var(--color-fg-muted);
  font-size: var(--text-base-sm);
  max-width: 36ch;
}
/* Квиз выпадает из 3-рядного subgrid: копирайт слева, маскот крупно справа. */
.quiz-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: none;
  align-items: center;
  justify-items: stretch;
  text-align: left;
  column-gap: var(--space-3);
  padding: var(--space-5);
}
.quiz-banner .promo-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}
.quiz-banner .promo-card__title { max-width: 16ch; }
.quiz-banner .promo-card__text { max-width: 32ch; }
.quiz-banner .promo-card__visual {
  width: auto;
  align-self: center;
}
/* Кот крупнее в 1.5 раза именно масштабом, а не шириной: бокс в сетке остаётся
   прежним, поэтому заголовок, текст и кнопка не сдвигаются, а кот свободно
   торчит за карточку. z-index поднимает его над соседней карточкой. */
.quiz-banner__mascot {
  width: clamp(200px, 18vw, 260px);
  height: auto;
  position: relative;
  z-index: 1;
  transform: scale(1.5);
}
.quiz-banner__title-accent { color: var(--color-accent); }
.quiz-banner .btn { white-space: nowrap; }
.quiz-banner .btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.support-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: left;
  gap: var(--space-4);
  grid-template-rows: none;
  padding: var(--space-5);
}
.support-box .promo-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}
.support-box .promo-card__title { max-width: none; }
.support-box .promo-card__text { max-width: 36ch; }
.support-box__title-end { white-space: nowrap; }
.support-box__title-accent { color: var(--color-accent); }
@media (max-width: 760px) {
  .promo-duo {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: var(--space-3);
  }
  .promo-card {
    grid-row: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-4);
  }
  .promo-card.quiz-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: var(--space-5);
  }
  .promo-card__footer:empty { display: none; }
}
@media (max-width: 560px) {
  .promo-card.quiz-banner {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .quiz-banner__mascot { width: 180px; }
  .quiz-banner .btn { width: 100%; }
}

/* ==========================================================================
   Отзывы
   ========================================================================== */
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gap);
}
@media (min-width: 900px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .review-grid { grid-template-columns: 1fr; } }
.review-card {
  background: var(--color-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}
.review-card__stars { color: var(--color-accent); letter-spacing: 2px; margin-bottom: var(--space-2); }
.review-card__author { font-weight: 600; margin-top: var(--space-2); letter-spacing: var(--tracking-label); }
.review-card__city { color: var(--color-fg-muted); font-size: var(--text-sm); }

/* ==========================================================================
   FAQ / живой чат
   ========================================================================== */
/* Виджет выглядит как окно мессенджера: шапка с собеседником, «обои»
   переписки и плотная лента пузырей. Вопрос — исходящий пузырь (кликабельный
   <summary>), ответ — входящий, появляется через короткую имитацию
   «печатает…» (тайминг и переключение классов — js/main.js).
   Без JS каждый .faq-chat__thread — обычный <details>: клик по вопросу
   сразу открывает ответ, без набора текста и pop-анимации. */
.faq-chat {
  /* Локальные токены виджета. «Обои» — тёплый беж на пару тонов темнее
     холста; входящий пузырь поверх них — чистый белый (как в мессенджерах,
     где именно контраст «пузырь/фон» читается как переписка, а не серое на
     белом). Хвостик пузыря — асимметричный радиус, без псевдоэлемента. */
  --faq-bubble-radius: 16px;
  --faq-bubble-tail: 5px;
  --faq-wallpaper: #f6f2ed;
  --faq-bubble-in: #ffffff;
  --faq-bubble-shadow: 0 1px 2px rgba(24, 20, 15, 0.07);

  /* Уже прежних 820px: узкая колонка сама по себе читается как переписка,
     на широкой пузыри разъезжаются по краям и эффект пропадает. */
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* --- Шапка: с кем переписка --- */
.faq-chat__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px var(--space-3);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-hairline);
}
.faq-chat__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}
/* В аватарах — знак-голова (favicon.svg, ~1.55:1, шире, чем выше), поэтому
   padding меньше квадратного: object-fit: contain вписывает знак по ширине,
   и при симметричном padding он терял бы в высоте до кружка. */
.faq-chat__avatar {
  display: block;
  width: 40px;
  height: 40px;
  padding: 4px;
  border-radius: 50%;
  background: var(--color-accent-tint);
  object-fit: contain;
}
/* Точка «на связи» — привычный знак мессенджера; кольцо цветом шапки
   отделяет её от аватара. */
.faq-chat__presence {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-trust);
  box-shadow: 0 0 0 2px var(--color-surface);
}
.faq-chat__name {
  font-weight: 600;
  font-size: var(--text-base-sm);
  line-height: 1.25;
  letter-spacing: var(--tracking-label);
}
.faq-chat__status {
  font-size: var(--text-2xs);
  line-height: 1.35;
  color: var(--color-fg-muted);
  letter-spacing: var(--tracking-label);
}

/* --- Лента переписки --- */
/* Ограниченная высота со своим скроллом: лента ведёт себя как окно чата и не
   растягивает секцию на длинных списках (страница FAQ). position: relative —
   чтобы js/main.js мог считать offsetTop треда относительно ленты и
   подкручивать открытый ответ, не двигая страницу; overscroll-behavior —
   чтобы докрутка ленты не уводила страницу дальше. */
.faq-chat__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3) var(--space-3) 18px;
  background-color: var(--faq-wallpaper);
  background-image: radial-gradient(rgba(26, 23, 18, 0.05) 1px, transparent 1px);
  background-size: 16px 16px;
  max-height: min(62vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 23, 18, 0.18) transparent;
}
.faq-chat__body::-webkit-scrollbar { width: 6px; }
.faq-chat__body::-webkit-scrollbar-thumb {
  background: rgba(26, 23, 18, 0.18);
  border-radius: var(--radius-pill);
}
/* Подсказка-пилюля по центру ленты — на месте разделителя даты в чате. */
.faq-chat__hint {
  align-self: center;
  margin-bottom: 2px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-fg-muted);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
}

.faq-chat__thread { border: 0; }
.faq-chat__row { display: flex; }
.faq-chat__row--sent { justify-content: flex-end; }

.faq-chat__thread summary {
  cursor: pointer;
  list-style: none;
}
.faq-chat__thread summary::-webkit-details-marker { display: none; }
/* Маркер списка снят — возвращаем видимый фокус с клавиатуры. */
.faq-chat__thread summary:focus-visible { outline: none; }
.faq-chat__thread summary:focus-visible .faq-chat__bubble--sent {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
}

.faq-chat__bubble {
  display: inline-block;
  max-width: 78%;
  padding: 8px 13px;
  font-size: var(--text-base-sm);
  line-height: 1.45;
  word-break: break-word;
  box-shadow: var(--faq-bubble-shadow);
}
.faq-chat__bubble--sent {
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  border-radius: var(--faq-bubble-radius) var(--faq-bubble-radius) var(--faq-bubble-tail) var(--faq-bubble-radius);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
/* Двойная «галочка доставки» в хвосте исходящего — деталь, по которой пузырь
   опознаётся как сообщение мессенджера. Отрицательный трекинг накладывает
   вторую галочку на первую, как в реальных клиентах. */
.faq-chat__bubble--sent::after {
  content: "\2713\2713";
  margin-left: 8px;
  font-size: 11px;
  letter-spacing: -0.28em;
  vertical-align: 1px;
  opacity: 0.65;
}
.faq-chat__thread:not([open]) summary:hover .faq-chat__bubble--sent {
  background: var(--color-accent-hover);
}
.faq-chat__thread summary:active .faq-chat__bubble--sent { transform: scale(0.98); }

/* Ответ + аватар «поддержки»: раскрываем по max-height, как раньше у
   аккордеона (js/main.js держит [open] до конца анимации закрытия).
   max-height/overflow — на обычном блочном .faq-chat__answer-row, а не
   на самом флекс-ряду: если сжать через overflow:hidden+max-height:0
   именно flex-контейнер, его scrollHeight в Chrome/Firefox схлопывается
   в 0 вместе с видимой высотой (в отличие от блочных элементов) — тогда
   JS не может измерить целевую высоту и анимация открытия не работает.
   Поэтому flex — только у вложенного .faq-chat__answer-inner. */
.faq-chat__answer-row {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-base);
}
.faq-chat__thread[open] .faq-chat__answer-row { max-height: 480px; }
.faq-chat__answer-inner {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  /* Ответ жмётся к своему вопросу: пауза внутри треда должна быть меньше
     промежутка между соседними вопросами (gap ленты — 6px). */
  margin-top: 5px;
}
.faq-chat__row-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent-tint);
  padding: 2px;
  object-fit: contain;
  flex-shrink: 0;
}
.faq-chat__bubble--received {
  background: var(--faq-bubble-in);
  color: var(--color-fg);
  border-radius: var(--faq-bubble-radius) var(--faq-bubble-radius) var(--faq-bubble-radius) var(--faq-bubble-tail);
  /* Пузырь ответа — обычный видимый элемент; «спрятан» он только когда его
     родитель-тред помечен .is-typing (см. ниже) — так без JS ответ всегда
     на месте, а pop-анимация ниже переигрывается каждый раз при снятии
     display:none. */
  animation: faqBubblePop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* «Печатает…» — три пульсирующие точки вместо ответа, пока тред открывается
   впервые. Класс is-typing ставит и снимает js/main.js; без JS он никогда
   не появляется, и ответ виден сразу. */
.faq-chat__typing {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 11px 14px;
  /* Тот же пузырь, что у ответа, — точки просто занимают его место. */
  background: var(--faq-bubble-in);
  border-radius: var(--faq-bubble-radius) var(--faq-bubble-radius) var(--faq-bubble-radius) var(--faq-bubble-tail);
  box-shadow: var(--faq-bubble-shadow);
}
.faq-chat__thread.is-typing .faq-chat__typing { display: inline-flex; }
.faq-chat__thread.is-typing .faq-chat__bubble--received { display: none; }
.faq-chat__typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-fg-muted);
  opacity: 0.5;
  animation: faqTypingDot 0.8s ease-in-out infinite;
}
.faq-chat__typing span:nth-child(2) { animation-delay: 0.15s; }
.faq-chat__typing span:nth-child(3) { animation-delay: 0.3s; }

@media (max-width: 560px) {
  .faq-chat__body { padding: 12px 10px 14px; }
  .faq-chat__bubble { max-width: 86%; }
}

@keyframes faqTypingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@keyframes faqBubblePop {
  from { opacity: 0; transform: scale(0.85) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-chat__typing span { animation: none; opacity: 0.7; }
  .faq-chat__bubble--received { animation: none; }
  .faq-chat__body { scroll-behavior: auto; }
}

/* ==========================================================================
   Контент-страницы
   ========================================================================== */
.content-page { max-width: 760px; margin: 0 auto; }
.content-page h2 { margin-top: var(--space-5); }
.breed-intro {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 980px;
  margin-top: var(--space-5);
  margin-bottom: var(--space-6);
}
.breed-intro__photo {
  width: 320px;
  height: 320px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.breed-intro__text {
  color: var(--color-fg-muted);
  font-size: var(--text-lg);
  line-height: 1.6;
  margin: 0;
  align-self: center;
}
@media (max-width: 640px) {
  .breed-intro { flex-direction: column; margin-top: var(--space-4); margin-bottom: var(--space-5); }
  .breed-intro__photo { width: 100%; height: auto; aspect-ratio: 1; }
}
.breed-kittens-heading { margin-bottom: var(--space-4); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--color-ink);
  border-top: none;
  padding: var(--space-6) 0 var(--space-4);
  margin-top: var(--space-section);
}
.site-footer h3 { color: var(--color-footer-fg-strong); letter-spacing: var(--tracking-label); }
.site-footer .muted { color: var(--color-footer-fg); }

/* Лого одна строкой над колонками ссылок; бейдж регистрации — см. .site-footer__bottom,
   он стоит рядом с копирайтом, а не здесь. */
.site-footer__top {
  display: flex;
  align-items: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-footer-border);
  margin-bottom: var(--space-5);
}
.site-footer__logo { display: inline-flex; }
.site-footer__logo .site-logo__full { height: 168px; }
/* Вордмарк лого в подвале уже белый (wordmark_color в макросе site_logo_svg),
   а кот сохраняет фирменные цвета — обычная заливка ниже не мешает. */
.site-footer .trust-line {
  color: #8fd39e;
  background: rgba(143, 211, 158, 0.12);
  border: 1px solid rgba(143, 211, 158, 0.22);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  margin: 0;
  font-size: var(--text-sm);
}
.site-footer .trust-line .icon { color: #8fd39e; width: 18px; height: 18px; flex-shrink: 0; }

.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-4);
  margin-bottom: var(--space-5);
}
.site-footer__grid > div { flex: 1 1 200px; min-width: 160px; }
.site-footer__grid h3 { font-size: var(--text-base-sm); margin-bottom: var(--space-3); }
.site-footer__grid a, .site-footer__grid span {
  display: block;
  color: var(--color-footer-fg);
  font-size: var(--text-base-sm);
  margin-bottom: 10px;
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.site-footer__grid a:hover { color: var(--color-accent); transform: translateX(2px); }

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  border-top: 1px solid var(--color-footer-border);
  padding-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-footer-fg);
}
.site-footer__bottom .trust-line { flex-shrink: 0; }
.site-footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.site-footer__cookie-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-footer-fg);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.site-footer__cookie-link:hover { color: var(--color-footer-fg-strong); }

/* Внутри колонки «Contacts», под текстовыми ссылками — не в нижней строке,
   иначе иконки визуально отрываются от подписанных под ними контактов.
   Отрицательный margin-left компенсирует зазор между кликабельной областью
   (64px) и самим кружком (46px), чтобы видимый край иконки, а не хитбокс,
   совпадал с левым краем текста колонки выше. */
.site-footer__socials { display: flex; gap: 4px; margin: var(--space-2) 0 0 -9px; }
.site-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  color: var(--color-footer-fg-strong);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}
/* .site-footer__grid a:hover задаёт всем ссылкам колонки transform: translateX(2px) —
   для этих круглых кнопок это читается как "иконка дёргается", а не как ссылка едет
   вбок, поэтому здесь его явно гасим. */
.site-footer__socials a:hover { color: var(--color-accent); transform: none; }
.site-footer__socials svg { width: 46px; height: 46px; }

@media (max-width: 700px) {
  .site-footer__top { flex-direction: column; align-items: flex-start; }
  .site-footer__grid > div { flex: 1 1 100%; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Анимации — только transform/opacity, respect reduced-motion.
   Карточки внутри .reveal-контейнера (сетки пород/котят/статей, шаги
   «как проходит покупка») проявляются не все разом, а по очереди —
   через transition-delay, привязанный к порядковому номеру дочернего
   элемента. Разлёт капается на 6-й карточке, чтобы длинные сетки не
   тянулись слишком долго. #}
.reveal > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}
.reveal > *:nth-child(1) { --reveal-delay: 0ms; }
.reveal > *:nth-child(2) { --reveal-delay: 45ms; }
.reveal > *:nth-child(3) { --reveal-delay: 90ms; }
.reveal > *:nth-child(4) { --reveal-delay: 135ms; }
.reveal > *:nth-child(5) { --reveal-delay: 180ms; }
.reveal > *:nth-child(6) { --reveal-delay: 225ms; }
.reveal > *:nth-child(n+7) { --reveal-delay: 270ms; }

/* ==========================================================================
   Утилиты
   ========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

.breadcrumbs {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-3);
}
.breadcrumbs a { color: var(--color-fg-muted); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Пословное появление заголовков сцен со скролл-джеком (сетка гарантий,
   «как проходит покупка»).

   Каждое слово лежит в своей маске .wordfx (overflow:hidden) и выезжает
   из-под неё снизу с доворотом. Маски ставит js/main.js — в шаблонах и в
   переводах остаётся обычный текст, поэтому без JS заголовок просто виден
   целиком (--w по умолчанию 1 = слово на месте, transform тождественный).

   Поля маски в em: без них тесная line-height заголовков срезала бы
   верхушки букв и угол слова при довороте, а отрицательные margin
   возвращают слова на их места в строке.
   ========================================================================== */
.wordfx {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.16em 0.08em;
  margin: -0.16em -0.08em;
}
.wordfx > span {
  --w: 1;
  display: inline-block;
  /* 130%, а не 100%: слово должно уйти под маску целиком вместе с наклоном. */
  transform:
    translateY(calc((1 - var(--w)) * 130%))
    rotate(calc((1 - var(--w)) * 7deg));
  transform-origin: 50% 100%;
  will-change: transform;
}
/* Подзаголовок проявляется последним, уже после слов заголовка. Своя
   прозрачность в покое — через --sub-opacity (по умолчанию 1). */
.subfx {
  --sub-reveal: 1;
  opacity: calc(var(--sub-opacity, 1) * var(--sub-reveal));
  transform: translateY(calc((1 - var(--sub-reveal)) * 14px));
}

/* ==========================================================================
   Главная: сетка гарантий — 4 одинаковые карточки (раньше видео было
   крупной акцентной плиткой, остальные три — строками списком).
   Вылетают по очереди по скроллу — тот же --reveal-y/--hover-y приём, что и
   у .breed-card/.article-card/.kitten-card: раздельные custom-property для
   scroll-reveal и hover, собранные в один transform, чтобы одно не
   перебивало другое при равной специфичности с .reveal > *.
   ========================================================================== */
/* Сцена: высокая секция, внутри которой __pin прилипает на высоту экрана.
   Пока сцена (две с небольшим высоты экрана) проезжает мимо, блок стоит на
   месте — это и есть «фиксируется», а разница высот и даёт ход скролла, по
   которому влетают карточки.
   --stage-vh не 100vh: на десктопе скроллится не окно, а карточка контента
   .layout__main внутри холста с зазором --canvas-gap с обеих сторон, и
   реальная видимая высота на 2×20px меньше вьюпорта. */
.guarantees-stage {
  /* dvh, а не vh: секция теперь пинится и на мобиле тоже, а там vh скачет
     при скрытии/появлении адресной строки браузера. */
  --stage-vh: calc(100dvh - var(--canvas-gap) * 2);
  /* 3 экрана, а не 2.2: первая треть хода уходит на вступление заголовка
     (проявляется по центру сцены), карточкам остаётся столько же, сколько
     было. */
  height: calc(var(--stage-vh) * 3);
  background: var(--color-accent) url("/assets/img/bg-orange.jpg") center / cover no-repeat;
  color: var(--color-on-accent);
}
.guarantees-stage__pin {
  position: sticky;
  top: 0;
  height: var(--stage-vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
/* Заголовок с подзаголовком едут одним блоком:
     --title-shift  0…1 — переезд из центра сцены на своё место наверху,
     --title-offset — насколько центр блока ниже его обычного места (меряет
       JS, потому что зависит от реальной высоты пина и карточек),
     --title-scale — заголовок в центре крупнее, к верху ужимается до 1.
   Само появление — не здесь, а пословно внутри заголовка (см. __word ниже):
   блок целиком только едет и масштабируется.
   Значения по умолчанию — конечное состояние: без JS, на мобиле и при
   prefers-reduced-motion блок просто стоит на своём месте. */
.guarantees-stage__head {
  --title-shift: 1;
  --title-offset: 0px;
  --title-scale: 1;
  transform:
    translateY(calc((1 - var(--title-shift)) * var(--title-offset)))
    scale(var(--title-scale));
  transform-origin: 50% 50%;
  will-change: transform;
}
.guarantees-stage__title {
  margin: 0 0 var(--space-3);
  text-align: center;
  color: var(--color-on-accent);
  font-family: 'Fredoka', var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
  /* Крупно, но по ширине И по высоте экрана: пин ростом в экран, и на
     низких окнах (ноутбучные 720–768px) слишком большой заголовок выдавливал
     бы карточки за край — поэтому в размере участвует min(vw, vh), а не одна
     ширина. Потолок берём с запасом: в центре сцены блок ещё и увеличен
     через --title-scale. */
  font-size: clamp(2.4rem, min(6.4vw, 9.6vh), 5.6rem);
  text-transform: uppercase;
}
:lang(en) .guarantees-stage__title {
  font-size: clamp(2.6rem, min(7.2vw, 10.4vh), 6.4rem);
}
/* Заголовок всегда в две строки — как в референсе "A Little Friend / Is a
   Big Love" — а не переносится по ширине контейнера. */
.guarantees-stage__title-line {
  display: block;
}

.guarantees-stage__subtitle {
  /* Приглушён на оранжевом — на .subfx это уходит как --sub-opacity, иначе
     общий opacity проявления перебил бы приглушение. */
  --sub-opacity: 0.86;
  /* Отступ до карточек тоже считается от высоты окна: на низких окнах лишние
     40px уводили нижний край карточек под обрез пина. */
  margin: 0 0 clamp(var(--space-3), 4.4vh, var(--space-5));
  text-align: center;
  color: var(--color-on-accent);
  /* На ступень крупнее обычного --text-lg: подзаголовок идёт в паре с
     сильно увеличенным заголовком и в центре сцены читается как его часть. */
  font-size: var(--text-xl);
}

/* Мобиль: без настоящего пина. В один экран здесь не поместится ни
   заголовок, ни тем более 4 больших карточки колонкой (они держат
   формат десктопных — с полноразмерной иллюстрацией), поэтому overflow:
   hidden на фиксированной высоте пина срезал бы заголовок и половину
   карточек, как только сцена выше экрана. Секция — обычный блок нужной
   высоты, а влёт карточек (JS, --scroll-progress и т.д.) при этом
   остаётся включён: он читает позицию всей сцены и её саму по себе не
   привязан к пину, так что карточки всё равно доезжают на место по
   мере скролла — просто без залипания экрана и без наезда заголовка на
   карточки. */
@media (max-width: 900px) {
  .guarantees-stage {
    height: auto;
    padding: var(--space-section) 0;
  }
  .guarantees-stage__pin {
    position: static;
    height: auto;
    overflow: visible;
  }
  .guarantees-stage__head {
    transform: none;
  }
}

.guarantees {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}

/* 32px — мимо шкалы --text-*, она заканчивается на 22px: заголовки этой
   сцены намеренно крупнее всего остального на странице (как и её h2,
   который тоже задан значением, а не токеном). */
.guarantee h3 {
  font-size: 2rem;
  line-height: 1.12;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
  /* Заголовок всегда переносится в две строки, а не по случайной ширине
     карточки: узкий max-width форсирует перенос при любой длине перевода. */
  max-width: 15ch;
}
/* Ключевые слова заголовка — акцентом, как в hero и quiz-баннере. Что
   именно выделено, решает перевод (guarantees.*_title_accent): в русском
   акцент падает на одни слова, в английском на другие. */
.guarantee__title-accent { color: var(--color-accent); }
.guarantee p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

/* Вертикальная крупная карточка: текстовый блок сверху, под ним цветной
   блок иллюстрации во всю ширину карточки до самого низа (overflow:hidden
   на карточке скругляет ему нижние углы по радиусу самой карточки).

   Все слагаемые движения — отдельными custom property, чтобы они
   складывались в один transform, а не перебивали друг друга (тот же приём,
   что у .breed-card, но здесь их больше):
     --scroll-progress  влёт по скроллу (0…1), 1 = карточка на месте;
     --float-y/--float-rot  бесконечное покачивание «в полёте»;
     --push-x           расталкивание соседей от наведённой карточки;
     --lift/--lift-scale подъём самой наведённой карточки.
   Все, кроме первой, ведёт покадрово js/main.js со сглаживанием (lerp) —
   поэтому transition на transform здесь НЕ вешаем: поверх покадрового
   сглаживания он даёт вязкое, запаздывающее управление. Значения по
   умолчанию — состояние покоя: без JS и при prefers-reduced-motion
   карточки просто стоят ровно. */
.guarantee {
  --scroll-progress: 1;
  --fly-rot: -7deg;
  /* С какой высоты карточка прилетает на место; на мобиле меньше (см. выше). */
  --fly-dist: 72vh;
  --float-y: 0px;
  --float-rot: 0deg;
  --push-x: 0px;
  --lift: 0px;
  --lift-scale: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  /* Тень заметно плотнее обычной --shadow-card: карточки лежат на ярком
     оранжевом фоне сцены, а не на нейтральном, и лёгкая дефолтная тень на
     нём почти не читается — здесь нужен собственный, более тёмный и
     широкий слой, чтобы карточки визуально приподнимались над сценой. */
  box-shadow: 0 22px 48px -14px rgba(24, 12, 4, 0.45), 0 10px 22px -8px rgba(24, 12, 4, 0.3);
  padding: var(--space-5) var(--space-4);
  overflow: hidden;
  /* Без прозрачности на влёте: полупрозрачная карточка набирала оранжевый
     от фона сцены и выглядела выцветшей. Карточки плотные, их появление
     держит только движение — снизу они всё равно скрыты overflow пина. */
  transform:
    translate(var(--push-x), calc((1 - var(--scroll-progress)) * var(--fly-dist)))
    translateY(var(--float-y))
    translateY(var(--lift))
    rotate(calc((1 - var(--scroll-progress)) * var(--fly-rot) + var(--float-rot)))
    scale(var(--lift-scale));
  transition: box-shadow var(--transition-base);
}
.guarantee:hover {
  box-shadow: 0 30px 60px -14px rgba(24, 12, 4, 0.55), 0 14px 28px -8px rgba(24, 12, 4, 0.35);
}
/* Разный наклон на влёте — карточки идут «колодой», а не одинаковым строем;
   к концу анимации все выравниваются в 0 (множитель 1 - progress). */
.guarantee:nth-child(1) { --fly-rot: -9deg; }
.guarantee:nth-child(2) { --fly-rot: 6deg; }
.guarantee:nth-child(3) { --fly-rot: -5deg; }
.guarantee:nth-child(4) { --fly-rot: 8deg; }

/* Иллюстрация теперь сверху карточки, а не снизу — тот же блок во всю
   ширину, той же пропорции 4:3 и с тем же полем под картинку, что и раньше,
   просто зеркально: order: -1 поднимает .guarantee__art над .guarantee__body
   (без правки разметки — картинка aria-hidden, DOM-порядок для скринридеров
   роли не играет), а отрицательные поля выводят блок теперь в верхние два
   угла карточки вместо нижних. Размер иллюстрации и текст под ней —
   без изменений, поменялся только порядок. */
.guarantee__art {
  order: -1;
  margin: calc(var(--space-5) * -1) calc(var(--space-4) * -1) var(--space-4);
  /* Было 4/3 — площе снизу вверх; квадрат даёт карточке заметно больше
     высоты, не трогая ширину колонки. */
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* width/height + object-fit, а не max-width: глобальный ресет img задаёт
   только max-width без height:auto, поэтому при зажатой ширине картинка
   оставалась с height из HTML-атрибута и плющилась (cat-video.svg 289×150
   рендерился как 232×146). */
/* Разные --art-pad-top/--art-pad-x по картинкам (подобранные на глаз в
   несколько заходов) давали разный видимый масштаб: у cat-vet поля были
   маленькие — кот раздувался почти во весь квадрат, у cat-small поля были
   большие с боков — кот съёживался. База 30% сверху / 15% с боков не
   произвольная: с одинаковым нижним полем у всех четырёх и квадратным
   .guarantee__art (высота = ширина блока) «высота блока минус 30%» и
   «ширина блока минус 2×15%» дают одно и то же число — область под
   картинку сама выходит квадратной. А раз область квадратная, object-fit:
   contain всегда упирает БОЛЬШУЮ сторону картинки ровно в эту область —
   независимо от того, портретная картинка (cat-vet) или альбомная
   (cat-small, cat-money): у всех трёх одинаковый видимый масштаб — и от
   него уже точечно уменьшены cat-money/cat-vet ниже. */
.guarantee__art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  /* Нижнее поле 25px — общее для всех четырёх: все коты одинаково
     приподняты над нижним краем блока, а не сидят впритык к нему. */
  padding: 30% 15% 25px;
}
/* cat-money и cat-vet — ещё на 30px меньше остальных: +15px сверху и по
   15px с боков (итого −30px что по ширине, что по высоте области), при
   том же нижнем поле 25px, что и у всех — масштаб меньше, но линия
   осталась общей. */
.guarantee__art--compact img { padding: calc(30% + 15px) calc(15% + 15px) 25px; } /* cat-money */
.guarantee__art--vet img { padding: calc(30% + 15px) calc(15% + 15px) 25px; }     /* cat-vet */
/* cat-video — другая, «сюжетная» композиция (не одиночный кот-мордочка, а
   сцена с руками и планшетом), намеренно без боковых/верхних полей и в
   обрез по правому нижнему углу: руки с планшетом уходят за нижний край
   самой картинки, срез совпадает с границей между иллюстрацией и текстом
   под ней. Нижнее поле 25px — тот же общий подъём, что и у остальных трёх. */
.guarantee__art--bleed img {
  padding: 0 0 25px;
  object-position: right bottom;
}

/* Мобиль: одна колонка, а не две. В два столбца карточка сжималась до
   полутора сотен пикселей — иллюстрация мельчала, заголовок ломался на
   четыре строки, и вся сцена переставала читаться как та же «колода»
   крупных карточек, что на десктопе. Колонка одна, но не во всю ширину
   контейнера: minmax(0, 460px) + justify-content:center держат карточку в
   тех же пропорциях, что и десктопная (иллюстрация квадратная во всю
   ширину — на широком планшете во всю строку она была бы гигантской).
   Размеры текста и полей при этом остаются десктопные: колонка одна, места
   хватает, а отдельная «мелкая» типографика для телефона делала карточку
   непохожей на ту, что на ПК. */
@media (max-width: 900px) {
  .guarantees {
    grid-template-columns: minmax(0, 460px);
    justify-content: center;
    /* Своё боковое поле, вопреки общему правилу «на телефоне .container без
       паддингов, карточки тянутся до края экрана» (см. выше по файлу): там
       карточка лежит на нейтральном фоне страницы, а здесь — на оранжевой
       сцене, и в одну колонку во всю ширину она закрывала бы её целиком.
       Полоса оранжевого по бокам нужна ещё и как место под наклон на влёте
       и покачивание: без неё и то и другое уходит за край экрана. */
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  /* Заголовок сцены тем же полем — .container на телефоне его не даёт, а
       текст на оранжевом иначе влипает в края экрана. */
  .guarantees-stage__head {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  /* Влёт снизу — короче десктопных 72vh: там карточку до прилёта прятал
     overflow пина, здесь пина нет (см. выше), и с полного экрана она летела
     бы поверх соседних секций. */
  .guarantee { --fly-dist: 30vh; }
  /* Заголовок — на ступень меньше десктопных 32px: карточка всё-таки уже,
     и 15ch при 2rem уводили бы его в три строки вместо двух. */
  .guarantee h3 { font-size: clamp(1.625rem, 6.4vw, 2rem); }
}

/* ==========================================================================
   30 дней поддержки — правая карточка .promo-duo (см. выше про .promo-card).
   Иконки — 5 равных колонок, без wrap-каши из 3+2.
   ========================================================================== */
.support-box__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
}
.support-box__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-base-sm);
  letter-spacing: var(--tracking-label);
  min-width: 0;
}
.support-box__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--color-accent-tint);
  color: var(--color-accent);
}
.support-box__icon svg { width: 24px; height: 24px; }
@media (max-width: 640px) {
  .support-box__list { gap: var(--space-1); }
  .support-box__list li { font-size: var(--text-xs); }
  .support-box__icon { width: 44px; height: 44px; }
}

/* ==========================================================================
   Главная: отстройка от агрегаторов (мы / они) — тёмная карточка-баннер
   с талисманом-котом вместо двух светлых колонок бок о бок.
   ========================================================================== */
.compare-banner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 0.9fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  background: var(--color-ink);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 64px);
}
.compare-banner__title {
  color: #fff;
  margin: 0 0 var(--space-2);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
}
.compare-banner__title-accent { color: var(--color-accent); }
.compare-banner__subtitle {
  color: var(--color-footer-fg);
  margin: 0 0 var(--space-5);
  max-width: 46ch;
}
.compare-banner__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
}
@media (max-width: 560px) { .compare-banner__grid { grid-template-columns: 1fr; } }
.compare-banner__plaque {
  padding: clamp(18px, 3vw, 28px);
  border-radius: var(--radius-lg);
}
.compare-banner__plaque--outline {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: transparent;
}
.compare-banner__plaque--filled {
  border: 2px solid #fff;
  background: #fff;
}
.compare-banner__col h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.55);
}
.compare-banner__col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.compare-banner__col li {
  position: relative;
  padding-left: 20px;
  font-size: var(--text-base-sm);
  line-height: 1.4;
  color: var(--color-footer-fg);
}
.compare-banner__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.compare-banner__col--us h3 { color: var(--color-accent); }
.compare-banner__col--us li { color: #fff; }
.compare-banner__col--us li::before { background: var(--color-accent); }
.compare-banner__col--us.compare-banner__plaque--filled li { color: var(--color-fg-muted); }
.compare-banner__col--us.compare-banner__plaque--filled li::before { background: var(--color-accent); }

/* Наведение на пункт «у них» зачёркивает его и подсвечивает соответствующий
   контраргумент «у нас» напротив — так колонки читаются как пара
   вопрос/ответ, а не два статичных независимых списка. :has() — рабочая
   деградация: без поддержки просто не подсвечивается, зачёркивание
   работает всегда. */
.compare-banner__col--them li {
  cursor: default;
  transition: opacity var(--transition-fast), text-decoration-color var(--transition-fast);
  text-decoration-line: line-through;
  text-decoration-color: transparent;
}
.compare-banner__col--them li:hover {
  text-decoration-color: rgba(255, 255, 255, 0.55);
  opacity: 0.7;
}
.compare-banner__col--us li {
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.compare-banner__grid:has(.compare-banner__col--them li:nth-child(1):hover) .compare-banner__col--us li:nth-child(1),
.compare-banner__grid:has(.compare-banner__col--them li:nth-child(2):hover) .compare-banner__col--us li:nth-child(2),
.compare-banner__grid:has(.compare-banner__col--them li:nth-child(3):hover) .compare-banner__col--us li:nth-child(3) {
  color: var(--color-accent);
  transform: translateX(4px);
}

.compare-banner__art { position: relative; display: flex; align-items: center; justify-content: center; }
/* Кот крупнее в 1.5 раза именно масштабом, а не шириной: его бокс в сетке
   остаётся прежним, поэтому колонки баннера не двигаются, а сам он остаётся
   внутри своей колонки и не попадает под overflow: hidden баннера. */
.compare-banner__cat {
  width: min(260px, 100%);
  height: auto;
  transform: scale(1.5);
}
@media (max-width: 900px) {
  .compare-banner { grid-template-columns: 1fr; text-align: center; }
  .compare-banner__subtitle { margin-left: auto; margin-right: auto; }
  .compare-banner__grid { text-align: left; }
  .compare-banner__art { margin-top: var(--space-2); }
  /* На узкой карточке (одна колонка) 100% — это почти вся ширина баннера,
     min(260px, 100%) упирается в потолок 260px и после scale(1.5) кот
     разрастается до ~390px — во весь экран на телефоне. Здесь его база
     меньше, чтобы после того же увеличения он остался иллюстрацией, а не
     занял всю карточку. */
  .compare-banner__cat { width: min(140px, 45%); }
}

/* ==========================================================================
   Главная: «Как проходит покупка» — лента шагов, едущая по скроллу.
   Сцена с пином, как у гарантий: высокая секция, внутри __pin прилипает на
   высоту экрана, и пока сцена проходит мимо, карточки шагов проезжают
   справа налево. Каждая набирает вес, входя в кадр, и слегка гаснет,
   уезжая за левый край; между карточками идёт след лапок, а заканчивается
   лента оранжевой плиткой-финишем с CTA.

   Ведёт всё js/main.js: он прокручивает окно ленты (scrollLeft), отдаёт
   каждому шагу --in/--out (насколько тот вошёл в кадр / ещё не ушёл из
   него) и data-on, а на секцию — --journey-progress (0…1) для полосы
   индикатора. Что с этими числами делать, решает CSS. Значения по
   умолчанию — «карточка стоит ровно», чтобы без JS, при
   prefers-reduced-motion и на мобиле блок читался как обычный список шагов.
   ========================================================================== */
.journey {
  --stage-vh: calc(100vh - var(--canvas-gap) * 2);
  --journey-progress: 0;
  /* Зазор ленты живёт в переменной: по нему же считается положение лапок
     между карточками. */
  --journey-gap: clamp(24px, 2.4vw, 44px);
  /* Запасная высота сцены: сколько скролла на неё уйдёт на самом деле,
     считает JS — ровно по реальному ходу ленты (см. measure() в main.js),
     иначе на широком экране сцена держала бы три экрана скролла ради
     семисот пикселей хода. */
  height: calc(var(--stage-vh) * 2.2);
}
/* Фон вешаем на пин, а не на .journey: сама сцена высотой в пару экранов и
   уезжает вместе со скроллом — фон был бы виден только куском. */
.journey__pin {
  position: sticky;
  top: 0;
  height: var(--stage-vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--color-bg);
}
/* Контент рисуется поверх фона: он позиционирован и идёт позже по порядку. */
.journey__pin > .container { position: relative; }
/* .container задаёт margin:0 auto, а авто-поля по поперечной оси отключают
   растягивание флекс-элемента — без явной ширины он схлопывается по
   содержимому. У сцены гарантий это не всплывало только потому, что её
   сетка сама шире max-width; ставим обеим, чтобы не зависеть от
   содержимого. */
.journey__pin > .container,
.guarantees-stage__pin > .container { width: 100%; }

.journey__header { text-align: center; margin-bottom: var(--space-5); }
.journey__header h2 {
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-2);
}
.journey__title-accent { color: var(--color-accent); }
.faq-title-accent { color: var(--color-accent); }
.final-cta__title-accent { color: var(--color-accent); }
.journey__header .muted { font-size: var(--text-lg); max-width: 620px; margin: 0 auto; }

/* Окно ленты — оно же скролл-контейнер, который ведёт JS. Во всю ширину
   карточки контента, но с боковым отступом ровно как у .container: первая
   карточка стоит по левому краю контента, а уезжают карточки за край самой
   карточки контента, а не обрываются по сетке. Формула повторяет
   центрирование .container: (свободное место / 2) + его боковой отступ.

   Вертикальные отступы — воздух под тени карточек: окно с overflow:hidden
   режет всё, что вышло за его padding-box. Снизу нужно 40px: тень текущего
   шага (--shadow-accent, 0 6px 22px) уходит под карточку на ~17px, а
   входящая справа карточка вдобавок опущена на 26px (--in в JS). Сверху
   хватает 12px — обе тени смещены вниз и выше карточки не выходят.
   Отступ до индикатора добираем margin'ом, чтобы общая высота ленты не
   выросла: 40 + 8 = те же 48px, что были до правки. */
.journey__rail-wrap {
  position: relative;
  overflow: hidden;
  padding: 12px max(var(--space-4), calc((100% - min(100%, var(--container-width))) / 2 + var(--space-4))) 40px;
  margin-bottom: var(--space-2);
  /* html{scroll-behavior:smooth} наследуется всеми элементами — с ним
     покадровый scrollLeft из JS браузер анимировал бы сам, и лента дрожала
     бы, догоняя собственные же кадры. */
  scroll-behavior: auto;
  /* Ленту можно не только скроллить страницей, но и тянуть мышью или
     трекпадом (см. main.js): курсор об этом и говорит. Вертикальные жесты
     оставляем странице — иначе на тач-устройстве лента съедала бы скролл. */
  cursor: grab;
  touch-action: pan-y;
}
.journey__rail-wrap.is-dragging {
  cursor: grabbing;
  /* Иначе протяжка выделяет тексты карточек вместо движения ленты. */
  user-select: none;
}
.journey__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: var(--journey-gap);
  /* Высота ленты задана здесь, а не содержимым: карточки одного размера
     независимо от длины описаний, и вертикальный бюджет сцены остаётся
     предсказуемым (заголовок + лента + индикатор влезают в экран
     ноутбука). Именно min-height, а не height: у карточки overflow:hidden,
     и на узком экране длинное описание (английские строки длиннее
     русских) обрезалось бы — лучше лента станет чуть выше. */
  min-height: clamp(256px, 28vh, 324px);
}
/* Хвост ленты: Chrome не считает правый padding окна частью прокручиваемой
   области, поэтому без распорки последняя плитка в конце пути упиралась бы
   ровно в край карточки контента. Псевдоэлемент флекс-контейнера сам
   становится флекс-элементом — отдельная разметка не нужна. */
.journey__rail::after {
  content: "";
  flex: 0 0 clamp(16px, 4vw, 120px);
}
/* Ширина в процентах от окна ленты: на любом экране в кадре примерно
   три с половиной карточки, то есть лента всегда длиннее кадра и ей всегда
   есть куда ехать. */
.journey__step {
  --in: 1;
  --out: 1;
  position: relative;
  flex: 0 0 clamp(240px, 27%, 440px);
  display: flex;
}
/* Влёт и уход ведёт JS двумя числами: --in (карточка входит справа) и
   --out (уезжает за левый край). transition на transform/opacity не
   вешаем: поверх покадрового ведения он даёт вязкое запаздывание (тот же
   принцип, что у карточек гарантий). */
.journey__card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  padding: clamp(20px, 2.2vw, 32px);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  opacity: calc(0.3 + 0.7 * min(var(--in), var(--out)));
  transform: translateY(calc((1 - var(--in)) * 26px)) scale(calc(0.95 + 0.05 * var(--in)));
  transition:
    box-shadow var(--transition-base),
    background var(--transition-base),
    color var(--transition-base);
}
.journey__card:hover { box-shadow: var(--shadow-card-hover); }
/* Номер шага стоит на месте бывшей иконки: прижат к верху, текст — к низу
   (margin-bottom:auto). Между ними воздух, заголовки всех шагов на одной
   линии, какой бы длины ни было описание. */
.journey__num {
  display: block;
  flex-shrink: 0;
  margin-bottom: auto;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
  pointer-events: none;
  transition: color var(--transition-base);
}
/* Текущий шаг (самый левый из ещё не уехавших, его же показывает счётчик) —
   оранжевая карточка: в кадре всегда ровно одна точка «вы здесь», остальные
   видимые карточки остаются белыми и спокойными. Заливка та же, что у
   плитки-финиша, поэтому лента читается как один маршрут: оранжевым отмечено
   «вы здесь» и «куда придёте».

   Цвета переводим с переходом (в отличие от transform/opacity, которые ведёт
   JS покадрово): смена текущего шага происходит разом, и без перехода
   карточка перекрашивалась бы щелчком. */
.journey__step[data-current="1"] .journey__card {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-accent);
}
.journey__step[data-current="1"] .journey__card-title { color: var(--color-on-accent); }
.journey__step[data-current="1"] .journey__card-text { color: rgba(255, 255, 255, 0.85); }
.journey__step[data-current="1"] .journey__num { color: var(--color-on-accent); }

/* Заголовок шага — обычным регистром: пять капслочных подписей подряд в
   ленте читались бы как крик (глобальный h3 в проекте uppercase). */
.journey__card-title {
  margin: var(--space-4) 0 var(--space-2);
  transition: color var(--transition-base);
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  line-height: 1.2;
  text-transform: none;
  letter-spacing: var(--tracking-tight);
}
.journey__card-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--color-fg-muted);
  transition: color var(--transition-base);
}

/* След лапок — в зазоре до следующей карточки; загорается вместе со своим
   шагом, поэтому маршрут «протаптывается» по ходу ленты. Смещение считается
   от того же --journey-gap, что и сам зазор, а разный наклон делает след
   походкой, а не пунктиром.
   По вертикали — середина карточки, не линия номеров: иначе лапка встаёт
   вплотную к цифре соседнего шага и читается как случайная точка. */
.journey__trail {
  --trail-rot: 96deg;
  position: absolute;
  top: 50%;
  left: 100%;
  width: clamp(26px, 2.4vw, 38px);
  height: clamp(26px, 2.4vw, 38px);
  transform: translate(calc(var(--journey-gap) / 2 - 50%), -50%) rotate(var(--trail-rot));
  color: var(--color-accent-tint);
  transition: color var(--transition-base);
}
.journey__trail svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.journey__step:nth-child(even) .journey__trail { --trail-rot: 74deg; }
.journey__step[data-on="1"] .journey__trail { color: var(--color-accent); }
.journey__step:last-child .journey__trail { display: none; }

/* Финиш маршрута — единственная цветная плитка ленты, она же CTA: путь
   заканчивается не подписью, а кнопкой. */
.journey__card--finale {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-accent);
}
.journey__card--finale .journey__card-title { color: var(--color-on-accent); }
.journey__card--finale .journey__card-text {
  color: rgba(255, 255, 255, 0.85);
  max-width: 26ch;
}
.journey__finale-paw {
  width: 54px;
  height: 54px;
  margin-bottom: var(--space-3);
  color: rgba(255, 255, 255, 0.9);
}
.journey__finale-paw svg { width: 100%; height: 100%; fill: currentColor; display: block; }
/* Белая пилюля на оранжевой плитке. Класс должен перебить и btn--whatsapp,
   и btn--primary (в него wa_cta превращает кнопку, пока номер WhatsApp не
   задан в настройках) — отсюда специфичность через .btn. */
.btn.journey__finale-btn {
  margin-top: var(--space-4);
  background: var(--color-surface);
  color: var(--color-accent);
  box-shadow: var(--shadow-card);
}
.btn.journey__finale-btn:hover {
  background: transparent;
  color: var(--color-on-accent);
  border-color: var(--color-on-accent);
  box-shadow: none;
}

/* Индикатор прохода сцены: номер текущего шага (его ведёт JS) + полоса. */
.journey__meter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 560px;
  margin: 0 auto;
}
.journey__meter-count {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.journey__meter-count b { color: var(--color-accent); font-size: var(--text-lg); }
.journey__meter-track {
  position: relative;
  flex: 1;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-accent-tint);
  overflow: hidden;
}
.journey__meter-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-accent);
  transform: scaleX(var(--journey-progress));
  transform-origin: left;
}

/* Мобиль и prefers-reduced-motion: ни настоящего пина, ни горизонтального
   хода — лента разворачивается в обычную колонку шагов (условия те же, при
   которых JS не запускает сцену и снимает свои переменные, jMotionOff в
   main.js: значений по умолчанию --in/--out=1 достаточно, карточки стоят
   ровно и видны целиком). Ниже это переопределяет отдельный блок: на
   мобиле/планшете без reduced-motion колонка становится sticky-стеком. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .journey { height: auto; padding: var(--space-section) 0; }
  /* pin остаётся relative, а не static: фоновая лапа позиционируется
     абсолютом от него, при static она ушла бы искать другого
     позиционированного предка. */
  .journey__pin {
    position: relative;
    height: auto;
    overflow: hidden;
  }
  .journey__rail-wrap { overflow: visible; padding-bottom: 0; cursor: auto; touch-action: auto; }
  .journey__rail { flex-direction: column; height: auto; gap: var(--space-3); }
  .journey__step { flex: 0 0 auto; }
  .journey__trail { display: none; }
  .journey__meter { display: none; }
  .journey__num { font-size: 2.4rem; margin-bottom: var(--space-3); }
  .journey__card { padding: var(--space-4); }
  .journey__card-text { max-width: 52ch; }
  /* В колонке карточка по содержимому: разгонять номер и текст по краям
     (margin:auto, как в ленте) здесь нечем — высота не задана, и между ними
     оставалась бы пустая полоса. */
  .journey__card-title { margin-top: 0; }
}

/* Мобиль/планшет с разрешённым движением: колонка шагов выше превращается
   в sticky-стек — карточки наслаиваются друг на друга и держатся зафикси-
   рованными, пока следующая не доедет до того же top. Не самодельный
   scroll-jacking (как у ленты и у сцены гарантий выше) — чистый
   position:sticky на каждой карточке, поэтому на тач-экране это обычный
   нативный скролл без JS и без риска дёрганой анимации. Ступенчатый top
   (nth-child) — чтобы верх предыдущей карточки чуть выглядывал из-под
   следующей, а не резалось ровным обрезом. Блок стоит ПОСЛЕ предыдущего
   намеренно: у правил одинаковая специфичность, и побеждает тот, что ниже. */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  /* overflow:hidden у пина (блок выше, ради обрезки фоновой лапы) сам стал
     бы «скролл-контейнером» для sticky-потомков вместо настоящего окна —
     тогда top считался бы от границ пина, а не от вьюпорта, и прилипание
     не работало бы вовсе. */
  .journey__pin { overflow: visible; }
  .journey__rail { display: block; flex-direction: row; min-height: 0; }
  .journey__rail::after { content: none; }
  .journey__step {
    flex: none;
    display: block;
    position: sticky;
    top: 84px;
    padding-bottom: var(--space-4);
  }
  .journey__step:nth-child(1) { top: 84px; }
  .journey__step:nth-child(2) { top: 98px; }
  .journey__step:nth-child(3) { top: 112px; }
  .journey__step:nth-child(4) { top: 126px; }
  .journey__step:nth-child(5) { top: 140px; }
  .journey__step:nth-child(6) { top: 154px; }
  .journey__card { box-shadow: var(--shadow-card-hover); }
}

.how-it-works {
  position: relative;
  isolation: isolate;
  background-size: auto 88%;
  background-position: 6% 58%;
  background-repeat: no-repeat;
  padding-top: calc(var(--space-section) * 1.1);
  padding-bottom: calc(var(--space-section) * 1.1);
}
.how-it-works::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to left,
    var(--color-bg) 0%,
    rgba(254, 252, 253, 0.94) 32%,
    rgba(254, 252, 253, 0.62) 52%,
    rgba(254, 252, 253, 0.08) 72%,
    rgba(254, 252, 253, 0) 100%
  );
}
.how-it-works__inner { display: flex; }
.how-it-works__content {
  margin-left: auto;
  width: 100%;
  max-width: 480px;
}
.how-it-works__content .section__header { text-align: left; }
.how-it-works__content .btn { width: 100%; text-align: center; }
@media (max-width: 720px) {
  .how-it-works::before {
    background: linear-gradient(
      180deg,
      var(--color-bg) 0%,
      rgba(254, 252, 253, 0.94) 22%,
      rgba(254, 252, 253, 0.9) 100%
    );
  }
  .how-it-works__content { max-width: 100%; }
}

.steps {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  counter-reset: step;
}
/* Шаг — плавающая белая пилюля-карточка вместо акцентной обводки. */
.step {
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent-tint);
  border: none;
  color: var(--color-accent);
  font-weight: 600;
  font-size: var(--text-base-sm);
}
.step__text { display: block; font-size: var(--text-base-sm); font-weight: 600; letter-spacing: var(--tracking-label); }

/* ==========================================================================
   Главная: галерея «Довольные владельцы»
   ========================================================================== */
.owners-slider-wrap { margin-top: var(--space-4); }
.owners-gallery {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2px 2px 12px;
  flex: 1;
  min-width: 0;
  scrollbar-width: thin;
}
/* См. .article-slider.is-fit — тот же класс от той же логики в main.js. */
.owners-gallery.is-fit { justify-content: center; }
.owner-card {
  flex: 0 0 288px;
  scroll-snap-align: start;
  margin: 0;
  background: var(--color-elevated);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.owner-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-inner);
  overflow: hidden;
  background: var(--color-muted-bg);
}
.owner-card__media img { width: 100%; height: 100%; object-fit: cover; }
.owner-card__demo-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-frost);
  backdrop-filter: blur(4px);
  color: var(--color-fg-muted);
  font-size: var(--text-3xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.owner-card__demo-badge--inline {
  position: static;
  display: inline-block;
  background: var(--color-muted-bg);
  color: var(--color-fg-muted);
  box-shadow: none;
}
.owner-card__body { padding: var(--space-4) var(--space-3) var(--space-3); }
.owner-card__stars { color: var(--color-accent); letter-spacing: 2px; margin-bottom: var(--space-2); }
.owner-card__text { margin: 0 0 var(--space-3); font-size: var(--text-base-sm); }
.owner-card__author { font-weight: 600; font-size: var(--text-base-sm); letter-spacing: var(--tracking-label); }
.owner-card__city {
  display: block;
  font-weight: 400;
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
}

/* ==========================================================================
   Карточка котёнка: пол
   ========================================================================== */
.kitten-card__sex {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
}
.icon-sex { width: 15px; height: 15px; }
.sex--male { color: #2f6f8f; }
.sex--female { color: var(--color-accent); }

/* ==========================================================================
   Главная: финальные секции
   ========================================================================== */
.safety-teaser { padding: var(--space-section) 0; }
.final-cta { padding: var(--space-section) 0; }

/* ==========================================================================
   Попап заявки (лид-модалка)
   ========================================================================== */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
}
.lead-modal[hidden] { display: none; }
.lead-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 19, 16, 0.55);
  backdrop-filter: blur(2px);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--transition-base);
}
.lead-modal.is-open .lead-modal__backdrop { opacity: 1; }
/* Появление — с лёгким разворотом и пружинным перелётом (overshoot в кривой),
   как у framer-motion spring; закрытие проще и быстрее, чтобы не тормозить уход. */
.lead-modal__dialog {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  cursor: default;
  transform: scale(0.4) rotate(10deg);
  opacity: 0;
  transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 220ms ease-out;
}
.lead-modal.is-open .lead-modal__dialog {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}
.lead-modal.is-closing .lead-modal__dialog {
  transition-duration: 160ms, 160ms;
  transition-timing-function: ease-in, ease-in;
}
.lead-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg);
  color: var(--color-fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lead-modal__close svg { width: 16px; height: 16px; }
.lead-modal__close:hover { background: var(--color-muted-bg); color: var(--color-fg); }

.lead-modal__title { margin: 0 var(--space-5) var(--space-1) 0; font-size: var(--text-2xl); }
.lead-modal__subtitle {
  color: var(--color-fg-muted);
  font-size: var(--text-base-sm);
  margin-bottom: var(--space-4);
}
.lead-modal__form { margin: 0; }
.lead-modal__phone-error { margin-top: 6px; }
.lead-modal__status {
  text-align: center;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-base-sm);
  margin: var(--space-3) 0 0;
}
.lead-modal__status--success { background: var(--color-trust-bg); color: var(--color-trust); }
.lead-modal__status--error { background: var(--color-error-bg); color: var(--color-error); }

.lead-modal__alt {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-hairline);
  text-align: center;
}
.lead-modal__alt span {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-2);
}
.lead-modal__alt-icons {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}
.lead-modal__alt-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-fg-muted);
}
.lead-modal__alt-icons a:hover { background: var(--color-trust-bg); color: var(--color-trust); }
.lead-modal__alt-icons svg { width: 19px; height: 19px; }

.lead-modal__methods {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.lead-modal__method {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 8px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-fg-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  cursor: pointer;
}
.lead-modal__method svg { width: 16px; height: 16px; flex-shrink: 0; }
.lead-modal__method:hover { background: var(--color-bg); }
.lead-modal__method.is-active {
  border-color: transparent;
  background: var(--color-trust-bg);
  color: var(--color-fg);
}

/* ==========================================================================
   Панель поиска — общий компонент главной и каталога
   ========================================================================== */
/* .section--search на главной оформлена в блоке «ГЛАВНЫЙ БЛОК» (карточка
   поиска, наезжающая на hero). Здесь — только сам компонент .search-panel,
   общий с каталогом. */

/* DESIGN.md: контейнеры UI не заливаем цветом — поле поиска живёт прямо
   на холсте, форму держит вместе только ритм пилюль. */
.search-panel {
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.search-panel__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.search-panel__row { display: flex; align-items: stretch; }
.search-panel__field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 150px;
  min-width: 0;
}
.search-panel__field--query {
  --search-inset: 6px;
  flex: 1 1 100%;
  align-items: stretch;
  gap: var(--search-inset);
  box-sizing: border-box;
  height: 50px;
  padding: var(--search-inset);
  border: 1px solid var(--color-hairline);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-panel__field--query:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-tint);
}
/* Прямой потомок (>), а не любой input где-то внутри: у пилюль
   породы/пола/возраста/цены radio-инпуты спрятаны глубоко в выпадающей
   панели (.filter-options) и должны остаться маленькими нативными
   радиокнопками, а не растягиваться в поле поиска на 100%/50px. */
.search-panel__field > input {
  width: 100%;
  height: 50px;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-fg);
  font: inherit;
  padding: 0 var(--space-4);
  appearance: none;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-panel__field--query { border-radius: var(--radius-pill); }
.search-panel__field--query > input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: auto;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0 4px 0 42px;
}
.search-panel__icon {
  position: absolute;
  top: 50%;
  left: calc(var(--search-inset, 6px) + 14px);
  width: 18px;
  height: 18px;
  color: var(--color-fg-muted);
  pointer-events: none;
  transform: translateY(-50%);
}
.search-panel__field > input:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-tint);
}
.search-panel__field--query > input:focus-visible {
  border: 0;
  box-shadow: none;
}
.search-panel__field-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--color-fg-muted);
}

/* Порода/пол/возраст/цена — не нативный <select>: его выпадающий список
   рисует ОС/браузер, и его нельзя оформить под остальной интерфейс
   (ни радиус, ни тень, ни акцентный цвет). Вместо него — та же пилюля
   .filter-dropdown/.filter-options, что и в фильтрах каталога: полностью
   наша разметка, значит и выглядит как часть сайта в любом браузере. */
.search-panel__field .filter-dropdown { width: 100%; }
.search-panel__field .filter-dropdown summary {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 0 20px;
  justify-content: space-between;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: normal;
  color: var(--color-fg);
}
.search-panel__chip-idle { display: none; }
.search-panel__field .filter-dropdown summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-panel__field .filter-dropdown.is-set summary {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.search-panel__field .filter-options { min-width: 100%; width: max-content; }
/* Акцентная pill-кнопка отправки — с подписью, а не только стрелкой
   (DESIGN.md: акцент усилен в тени кнопки). */
.search-panel__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: auto;
  padding: 0 20px;
  box-sizing: border-box;
  border: 1.5px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  font-size: var(--text-base-sm);
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.search-panel__submit svg { width: 17px; height: 17px; flex-shrink: 0; }
/* Тот же ховер, что у .btn/.hero-figma__cta: заливка гаснет, остаются
   акцентные обводка и текст. Без translate — иначе съедет inset. */
.search-panel__submit:hover {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.search-panel__count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-3) 0 0;
  font-size: var(--text-base-sm);
  color: var(--color-fg-muted);
}
.search-panel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-status-available);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(79, 111, 82, 0.16);
}
@media (max-width: 760px) {
  /* Поиск сверху, четыре компактных чипа в ряд — не стопка «Любая порода». */
  .search-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 10px;
  }
  .search-panel__row { display: contents; }
  .search-panel__field--query { grid-row: 1; width: 100%; min-width: 0; }
  .search-panel__filters {
    grid-row: 2;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
  }
  .search-panel__filters > .search-panel__field {
    flex: 1 0 auto;
    width: auto;
    min-width: max-content;
  }
  .search-panel__count { grid-row: 3; margin-top: 0; }
  .search-panel__field .filter-dropdown { width: auto; min-width: 100%; }
  .search-panel__field .filter-dropdown summary {
    width: max-content;
    min-width: 100%;
    height: 40px;
    padding: 0 6px 0 8px;
    justify-content: flex-start;
    gap: 3px;
    font-size: 12px;
    font-weight: 500;
  }
  .search-panel__field .filter-dropdown summary::after {
    margin-left: 1px;
    width: 5px;
    height: 5px;
  }
  .search-panel__field .filter-dropdown summary span {
    overflow: visible;
    text-overflow: unset;
  }
  .search-panel__field-icon { width: 14px; height: 14px; }
  .search-panel__field--query {
    height: 48px;
    --search-inset: 5px;
  }
  .search-panel__field--query > input { padding-left: 38px; }
  .search-panel__submit { padding: 0 14px; font-size: 12px; gap: 6px; }
  .search-panel__submit svg { width: 14px; height: 14px; }
  .search-panel__icon { left: calc(var(--search-inset, 5px) + 10px); width: 16px; height: 16px; }
  .search-panel .filter-dropdown:not(.is-set) .search-panel__chip-idle { display: inline; }
  .search-panel .filter-dropdown:not(.is-set) [data-pill-label] { display: none; }
}

/* Экран успеха в модалке заявки */
.lead-modal__success { text-align: center; padding-top: var(--space-2); }
.lead-modal__success-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-trust-bg);
  color: var(--color-trust);
}
.lead-modal__success-icon svg { width: 26px; height: 26px; }
.lead-modal__success-title { margin: 0 0 var(--space-2); }
.lead-modal__success-subject { margin: 0 0 var(--space-2); font-weight: 600; }
.lead-modal__success-eta,
.lead-modal__success-next {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base-sm);
  color: var(--color-fg-muted);
}
.lead-modal__success .btn + .btn { margin-top: var(--space-2); }

.kitten-card__cta { margin-top: var(--space-3); }
/* Имя котёнка на кнопке показывается только в одноколоночной мобильной
   раскладке — см. @media (max-width: 639px) ниже. */
.kitten-card__cta-name { display: none; }

/* Телефон: карточка котёнка идёт одна в строку и раскладывается иначе, чем
   в плотной сетке из 2–4 колонок. Крупное фото, под ним имя и цена одной
   строкой по краям, серая строка «порода · пол · возраст» и кнопка во всю
   ширину с именем. Ломается именно на 639px: с 640px сетка уходит в три
   колонки (см. .kitten-grid выше), и эта раскладка там уже не нужна. */
@media (max-width: 639px) {
  .kitten-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .kitten-card { padding: 10px; }
  /* Чуть шире квадрата: в одну колонку квадратное фото занимало почти весь
     экран по высоте, и под карточку целиком его уже не хватало. */
  .kitten-card__media { aspect-ratio: 5 / 4; }

  .kitten-card__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0;
    padding: 14px var(--space-2) var(--space-2);
  }
  /* Разрыв строки внутри флекса: имя с ценой держатся первой строкой, всё
     остальное уходит под них. Псевдоэлемент — единственный способ разорвать
     строку, не трогая разметку, общую с десктопом. */
  .kitten-card__body::before {
    content: "";
    order: 3;
    flex-basis: 100%;
    height: 0;
  }
  .kitten-card__name { order: 1; margin: 0; font-size: 1.5rem; }
  .kitten-card__price {
    order: 2;
    margin-left: auto;
    padding-left: var(--space-2);
    font-size: 1.5rem;
  }
  .kitten-card__meta { order: 4; margin: 6px 0 0; }
  /* Иконка пола и его цвет — деталь плотной сетки, где под породу и пол
     были две отдельные строки. В одну колонку это одна обычная подпись
     «порода · пол · возраст», поэтому иконка убирается, а строка
     дописывается к породе через точку (gap самой строки даёт отступ). */
  .kitten-card__sex {
    order: 5;
    margin: 6px 0 0 5px;
    color: var(--color-fg-muted);
    font-weight: 400;
    letter-spacing: 0;
  }
  .kitten-card__sex .icon-sex { display: none; }
  .kitten-card__sex::before { content: "·"; }

  .kitten-card__tags { order: 6; flex-basis: 100%; }
  .kitten-card__cta {
    order: 7;
    flex-basis: 100%;
    margin-top: var(--space-3);
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: var(--text-base);
  }
  .kitten-card__cta-name { display: inline; }
}

/* ==========================================================================
   Чипы активных фильтров и блок проданных
   ========================================================================== */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.filter-chips__count {
  font-size: var(--text-base-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  margin-right: var(--space-2);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-hairline);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-fg);
  font-size: var(--text-sm);
  text-decoration: none;
}
.filter-chip:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.filter-chip svg { width: 12px; height: 12px; }
.filter-chips__clear {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.sold-block {
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-hairline);
  padding-top: var(--space-4);
}
.sold-block > summary {
  cursor: pointer;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  margin-bottom: var(--space-3);
}

/* Лайтбокс галереи */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 12, 0.9);
}
.lightbox__dialog {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: min(1100px, 94vw);
  max-height: 92vh;
}
.lightbox__img {
  max-width: 100%;
  max-height: 86vh;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--color-muted-bg);
}
.lightbox__nav,
.lightbox__close {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--color-frost);
  backdrop-filter: blur(4px);
  color: var(--color-fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-float);
}
.lightbox__nav svg, .lightbox__close svg { width: 22px; height: 22px; }
/* Шеврон в спрайте один и смотрит влево — «вперёд» отражаем, как у .slider__nav. */
.lightbox__nav--next svg { transform: scaleX(-1); }
.lightbox__close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 1;
}
.lightbox__counter {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  margin: 0;
  color: #fff;
  font-size: var(--text-sm);
}
@media (max-width: 760px) {
  .lightbox__close { top: -6px; right: 4px; }
  .lightbox__nav { position: absolute; }
  .lightbox__nav--prev { left: 4px; }
  .lightbox__nav--next { right: 4px; }
}

/* Плейсхолдер фото */
.kitten-card__media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  background: var(--color-muted-bg);
}

/* ==========================================================================
   ГЛАВНЫЙ БЛОК — перенос из Figma (node 690:2)
   Крупный двухцветный заголовок Rubik uppercase, строка цены, акцентная
   кнопка с радиусом 15px, три факта-пилюли поверх светлого фото + белая
   карточка поиска, наезжающая на низ hero.
   ========================================================================== */
.hero-figma {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* min-height держится не только на vh, но и на vw: чистый vh не зависит
     от ширины, поэтому при сужении окна (высота почти та же, ширина
     падает) контейнер оставался таким же высоким, а cover-фото приходилось
     обрезать всё сильнее по бокам — визуально фото не уменьшалось, а
     «съезжало» в кроп. vw-слагаемое опускает высоту вместе с шириной, держа
     соотношение сторон контейнера ближе к фото на всех брейкпоинтах вплоть
     до мобильного, где .hero-figma__bg уже переключается на contain. */
  /* Блок — container query: всё внутри (высота, паддинги, кегли) меряется
     в cqw, то есть в долях ШИРИНЫ САМОЙ КАРТОЧКИ контента, а не вьюпорта.
     Иначе получалось так: высота hero задавалась содержимым и упиралась в
     потолки clamp() уже на ~1400px, поэтому от 1440px до 2560px оставалась
     одной и той же (~1117px), а ширина за это время падала вдвое. Пропорции
     бокса уезжали от 2:1 к 1:1, и object-fit: cover резал кадр по бокам —
     на 1440px уходило 44% ширины снимка, сфинкс справа обрезался. Теперь
     высота — 50cqw, то есть бокс всегда ~2:1 и кадр только масштабируется.
     vw тут не годится: между вьюпортом и hero стоит рельс навигации,
     который сам меняет ширину (264px / 72px в свёрнутом виде). */
  container-type: inline-size;
  min-height: 0;
  padding: 0;
  /* Тон фона подобран под сам снимок (фон фото ~#fdfbfc), а не взят
     нейтральным серым #f2f2f2: на мобильном фото садится через
     object-fit: contain и не растягивается на весь блок — если оттенки
     не совпадают день в день, прямоугольная рамка кадра видна прямо на
     сплошном фоне швом. Заодно то же значение, что --color-bg карточки
     контента, — секция сливается с карточкой вместо соседства двух
     разных «белых». */
  background-color: var(--color-bg);
}
/* Слой фото, сдвигаемый js/main.js при скролле (data-parallax).
   Обёртка держит и снимок, и рукописную подпись — на десктопе это
   абсолютный фон, на мобилке отдельный ряд. */
.hero-figma__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-figma__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  pointer-events: none;
  user-select: none;
}
.hero-figma__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: calc(var(--container-width) + var(--space-4) * 2);
  margin: 0 auto;
  /* Высота всего hero задаётся отсюда: .hero-figma — flex-контейнер с
     единственным потоковым потомком, так что его min-height и есть высота
     блока. 50cqw держит бокс в пропорции 2:1 (кадр 16:9 в неё вписывается
     по ширине целиком), потолок 1120px повторяет нынешнюю высоту на 2560px.
     Пол 520px — только страховка от схлопывания: на узком десктопе высоту
     и так задаёт само содержимое, и завышать пол там нельзя — каждый
     лишний пиксель высоты на такой ширине возвращает боковой кроп. */
  min-height: clamp(520px, 50cqw, 1120px);
  padding-block: clamp(52px, 6.7cqw, 150px)
    max(clamp(76px, 9.85cqw, 220px), calc(var(--hero-search-overlap) + 36px));
  padding-inline: var(--space-4);
}

.hero-figma__kickers {
  display: flex;
  flex-wrap: wrap;
  gap: 12px clamp(20px, 1.8cqw, 40px);
  margin-bottom: clamp(20px, 2.5cqw, 56px);
  font-family: var(--font-hero);
  font-size: clamp(0.85rem, 0.67cqw, 0.9375rem);
  color: rgba(255, 255, 255, 0.85);
}
.hero-figma__kickers-sep { display: none; }

.hero-figma__title {
  margin: 0;
  font-family: var(--font-hero);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 4.3cqw, 6rem);
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}
.hero-figma__title-main { color: #fff; }
.hero-figma__title-accent { color: #fff; }

.hero-figma__price {
  margin: clamp(10px, 1cqw, 22px) 0 0;
  font-family: var(--font-hero);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
  font-size: clamp(1.35rem, 1.86cqw, 2.6rem);
}

.hero-figma__actions { margin-top: clamp(18px, 1.97cqw, 44px); }
.hero-figma__cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 0.72cqw, 16px);
  padding: clamp(12px, 0.9cqw, 20px) clamp(20px, 1.97cqw, 44px);
  border: 1.5px solid transparent;
  border-radius: 15px;
  background: #fff;
  color: var(--color-accent);
  font-family: var(--font-hero);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.11cqw, 1.55rem);
  text-decoration: none;
  box-shadow: var(--shadow-accent);
  transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
/* Ховер инвертирует заливку: белая кнопка гаснет до прозрачной с белой
   обводкой, текст и стрелка (currentColor) остаются белыми. */
.hero-figma__cta:hover {
  text-decoration: none;
  transform: translateY(-2px);
  background: transparent;
  color: #fff;
  border-color: #fff;
  box-shadow: none;
}
.hero-figma__cta svg { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.hero-figma__facts {
  list-style: none;
  margin: clamp(20px, 2.33cqw, 52px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(7px, 0.54cqw, 12px);
}
.hero-figma__facts li {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.54cqw, 12px);
  max-width: 100%;
  box-sizing: border-box;
  padding: clamp(8px, 0.54cqw, 12px) clamp(13px, 0.9cqw, 20px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  background: transparent;
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: clamp(0.85rem, 0.67cqw, 0.9375rem);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.85);
}
.hero-figma__facts li span { min-width: 0; overflow-wrap: anywhere; }
.hero-figma__facts svg {
  width: clamp(15px, 0.8cqw, 18px);
  height: clamp(15px, 0.8cqw, 18px);
  flex-shrink: 0;
  color: #fff;
}
.hero-figma__facts strong { font-weight: 600; color: #fff; }
.hero-figma__facts em {
  font-style: normal;
  font-weight: 400;
}
.hero-figma__facts em::before { content: " "; }
.hero-figma__fact-mobile { display: none; }

.hero-figma__stock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: clamp(12px, 1.25cqw, 28px) 0 0;
  font-family: var(--font-hero);
  font-size: clamp(0.78rem, 0.63cqw, 0.875rem);
  color: rgba(255, 255, 255, 0.85);
}
.hero-figma__stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-status-available);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(79, 111, 82, 0.16);
}

/* Рукописная подпись-стрелка поверх фото — плашка в углу, не завязана
   на .hero-figma__inner/контейнер, чтобы не зависеть от ширины колонки
   текста и всегда сидеть у самого фото. */
.hero-figma__caption {
  /* Держим у самого котёнка (фон — background-position: center right),
     не у края вьюпорта: right в px, не vw — иначе на широких экранах
     подпись уезжает в пустой фон и стрелка перестаёт на что-либо указывать. */
  position: absolute;
  /* cqw, а не vw: кадр теперь всегда во всю ширину блока, поэтому котята
     стоят на фиксированной доле ширины — подпись держится за них сама. */
  top: clamp(24px, 4.3cqw, 96px);
  right: clamp(90px, 19.2cqw, 430px);
  z-index: 2;
  margin: 0;
  max-width: clamp(140px, 9.8cqw, 220px);
  pointer-events: none;
}
.hero-figma__caption-text {
  margin: 0;
  font-family: var(--font-handwritten);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.43cqw, 2rem);
  line-height: 1.15;
  color: #fff;
  transform: rotate(-2deg);
}
.hero-figma__caption-arrow {
  display: block;
  width: clamp(44px, 3.6cqw, 80px);
  height: auto;
  margin: 6px 0 0 clamp(16px, 1.25cqw, 28px);
}

/* Карточка поиска, наезжающая на низ hero. */
.section--search {
  position: relative;
  z-index: 3;
  margin-top: calc(var(--hero-search-overlap) * -1);
  padding-top: 0;
  padding-bottom: var(--space-section);
}
/* Та же колонка, что у .hero-figma__inner. Иначе .container уже на
   --container-width, плюс свой padding 24px — плашка уже пилюль
   фактов на 48px суммарно. */
.section--search > .container {
  max-width: calc(var(--container-width) + var(--space-4) * 2);
}
.find-kitten {
  background: var(--color-surface);
  border-radius: 30px;
  box-shadow: 0 4px 36px rgba(0, 0, 0, 0.15);
  padding: clamp(28px, 5vw, 56px) clamp(20px, 6vw, 80px);
  overflow: hidden;
}
/* overflow: hidden выше только ради скруглённых углов карточки — но он же
   обрезает выпадающий .filter-options пилюль породы/пола/возраста/цены
   (position: absolute), когда список длиннее оставшегося места до низа
   карточки. Пока внутри есть открытая пилюля — снимаем обрезку. */
.find-kitten:has(.filter-dropdown[open]) { overflow: visible; }
.find-kitten__title {
  margin: 0 0 clamp(20px, 4vw, 34px);
  text-align: center;
  font-family: var(--font-hero);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: #131313;
  font-size: clamp(1.7rem, 4.6vw, 3.4rem);
}
.find-kitten__title-accent { color: var(--color-accent); }

/* Поля поиска внутри карточки — чуть массивнее, первый селект акцентный.
   Submit сидит внутри поля справа (одинаковый inset со всех сторон). */
.find-kitten .search-panel__field > input,
.find-kitten .search-panel__field .filter-dropdown summary { height: 56px; }
.find-kitten .search-panel__field--query { height: 64px; }
.find-kitten .search-panel__field--query > input { height: auto; }
.find-kitten .search-panel__field:first-child .filter-dropdown summary {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.find-kitten .search-panel__count { justify-content: center; }

/* Телефон и планшет: один вертикальный кадр (hero-mobile.jpg) фоном на весь
   блок, весь текст — поверх него. Отдельной заливки под заголовок нет: на
   стыке с фото она даёт видимый шов (плоский цвет против градиента кадра),
   а у снимка сверху специально оставлена пустая оранжевая зона под текст.
   Горизонтальный кадр тут не годится: котята в нём по центру, и на узком
   блоке заголовок ложится прямо на них. */
@media (max-width: 900px) {
  .hero-figma {
    display: flex;
    flex-direction: column;
    aspect-ratio: 1080 / 1800;
    min-height: 0;
    padding: 0;
    /* Подложка на время загрузки кадра — средний тон самого снимка. */
    background-color: #ce5723;
  }
  .hero-figma__bg {
    /* Кадр прижат к низу: если режется по высоте, то пустой верх, а не котята. */
    object-position: 50% 100%;
  }
  .hero-figma__inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* На мобилке высоту задаёт aspect-ratio самого блока, а не cqw-минимум
       колонки, иначе он перебивает пропорцию вертикального кадра. */
    min-height: 0;
    padding: 28px var(--space-4) 20px;
  }
  .hero-figma__kickers {
    gap: 8px 24px;
    margin-bottom: 18px;
    font-size: 0.85rem;
  }
  .hero-figma__title {
    font-size: clamp(2.2rem, 11.5vw, 3.6rem);
    letter-spacing: -0.03em;
  }
  .hero-figma__price {
    margin-top: 10px;
    font-size: clamp(1.3rem, 5.2vw, 2rem);
  }
  .hero-figma__actions { margin-top: 18px; }
  .hero-figma__cta {
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    padding: 16px 24px;
    border-radius: 18px;
    font-size: 1.15rem;
  }
  /* Подпись — в просвете между кнопкой и головами котят; стрелка слева под
     текстом смотрит вниз, на серого котёнка. */
  .hero-figma__caption {
    top: 360px;
    right: 14%;
    left: auto;
    max-width: 200px;
    text-align: left;
  }
  .hero-figma__caption-text { font-size: 1.4rem; }
  .hero-figma__caption-arrow {
    width: 48px;
    margin: 2px 0 0 14px;
  }
  /* Плашки и счётчик прижаты к низу кадра — под лапы, а не поверх них. */
  .hero-figma__facts {
    align-items: stretch;
    gap: 8px;
    margin-top: auto;
  }
  .hero-figma__facts li {
    width: 100%;
    gap: 12px;
    padding: 12px 20px;
    font-size: var(--text-base-sm);
  }
  .hero-figma__facts svg { width: 18px; height: 18px; }
  .hero-figma__stock { margin-top: 10px; font-size: var(--text-sm); }
  .section--search { margin-top: 0; }
}
@media (max-width: 600px) {
  .hero-figma {
    /* Плашки со счётчиком занимают почти постоянные ~195px, а лапы котят
       всегда на ~76% высоты кадра — поэтому нужен минимум ~830px, чтобы
       плашки легли ниже лап. vw-часть держит пропорцию кадра на широких
       телефонах, где 830px уже мало и кадр начал бы резаться сверху. */
    min-height: max(830px, 178vw);
    /* Иначе min-height через aspect-ratio превращается в min-width, и блок
       становится шире экрана. */
    aspect-ratio: auto;
  }
  .hero-figma__inner { padding: 24px var(--space-4) 16px; }
  .hero-figma__kickers { font-size: 0.8rem; }
  .hero-figma__title { font-size: clamp(2.2rem, 11.5vw, 2.8rem); }
  .hero-figma__price { font-size: clamp(1.3rem, 5.2vw, 1.7rem); }
  .hero-figma__caption {
    top: 286px;
    right: 10%;
    max-width: 170px;
  }
  .hero-figma__caption-text { font-size: 1.25rem; }
  .hero-figma__caption-arrow { width: 44px; }
  .hero-figma__facts li {
    padding: 9px 14px;
    font-size: 0.85rem;
  }
}
@media (max-width: 760px) {
  .section--search { z-index: 8; }
  .section--search > .container { padding-left: 8px; padding-right: 8px; }
  .find-kitten { padding: 22px 8px 20px; overflow: visible; }
  .find-kitten__title { margin-bottom: 16px; font-size: 1.55rem; }
  .find-kitten .search-panel__field > input { height: 42px; }
  .find-kitten .search-panel__field .filter-dropdown summary { height: 40px; }
  .find-kitten .search-panel__field--query { height: 52px; }
  .find-kitten .search-panel__field--query > input { height: auto; }
  .find-kitten .search-panel__field:first-child .filter-dropdown summary {
    border-color: var(--color-hairline);
    color: var(--color-fg);
  }
  .find-kitten .search-panel__field:first-child .filter-dropdown.is-set summary,
  .find-kitten .search-panel__field:first-child .filter-dropdown[open] summary {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

/* ==========================================================================
   ГЛАВНАЯ: БЛОГ — оранжевая полоса
   Единственная секция страницы с залитым фирменным акцентом: блог должен
   читаться как отдельная глава, а не как очередной ряд белых карточек.
   Композиция: слева крупная обложка (меняется по таймеру/наведению, см.
   data-blog-stage в js/main.js), справа — нумерованный индекс строками.
   Обложки квадратные (800×800), поэтому кадры здесь 1:1 — фото не режется
   ни слева, ни в строке.
   ========================================================================== */
.blog-zone {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 var(--canvas-gap);
  padding: clamp(44px, 5.5vw, 84px) 0 clamp(48px, 6vw, 88px);
  border-radius: clamp(28px, 3.4vw, 56px);
  scroll-margin-top: 90px;
  background: url("/assets/img/bg-orange.jpg") no-repeat center center / cover, var(--color-accent);
}
.blog-zone__inner { position: relative; }

.blog-zone__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: end;
  gap: var(--space-3) clamp(24px, 4vw, 64px);
  padding-bottom: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.blog-zone__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding: 7px 16px 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.blog-zone__kicker svg { width: 15px; height: 15px; opacity: 0.85; }
.blog-zone__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  max-width: 15ch;
}
.blog-zone__head-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.blog-zone__subtitle {
  margin: 0;
  color: #fff;
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  max-width: 46ch;
}
.blog-zone__all {
  background: #fff;
  color: var(--color-ink);
  box-shadow: var(--shadow-float);
  flex-shrink: 0;
}
.blog-zone__all:hover { background: var(--color-ink); color: #fff; }
/* Шеврон в спрайте смотрит влево — «вперёд» отражаем (как у .slider__nav). */
.blog-zone__all-icon { width: 16px; height: 16px; transform: scaleX(-1); }

.blog-zone__layout {
  display: grid;
  /* Колонка индекса чуть шире квадратной обложки: заголовки статей длинные,
     а строки за счёт grid-auto-rows: 1fr растягиваются ровно до её низа. */
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(24px, 3vw, 40px);
}

/* --- Обложка слева. Слайды лежат стопкой в одной ячейке грида
   (grid-area: 1/1) — высота не скачет при переключении, и не нужен
   position:absolute на всю колонку. --- */
.blog-stage { display: grid; }
.blog-slide {
  grid-area: 1 / 1;
  position: relative;
  overflow: hidden;
  /* Обложки квадратные — держим 1:1, чтобы кадр не срезался по краям. */
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
  pointer-events: none;
}
.blog-slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}
.blog-slide:hover { text-decoration: none; }
.blog-slide__media {
  position: absolute;
  inset: 0;
  background: var(--color-accent-tint) center / cover no-repeat;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-slide:hover .blog-slide__media { transform: scale(1.05); }
.blog-slide__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(16, 9, 4, 0.94) 0%,
    rgba(16, 9, 4, 0.74) 30%,
    rgba(16, 9, 4, 0.2) 58%,
    rgba(16, 9, 4, 0.02) 100%
  );
}
.blog-slide__body {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: clamp(22px, 2.6vw, 38px);
}
.blog-slide__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.blog-slide__count { color: #fff; font-weight: 700; }
.blog-slide__count-sep { opacity: 0.5; margin: 0 2px; }
.blog-slide__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.3vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-heading);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 20ch;
}
.blog-slide__excerpt {
  color: rgba(255, 255, 255, 0.84);
  font-size: var(--text-base-sm);
  line-height: 1.5;
  max-width: 50ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-slide__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  min-height: 46px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-accent);
  font-size: var(--text-base-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  transition: transform var(--transition-fast), background var(--transition-fast);
}
.blog-slide__cta svg { width: 16px; height: 16px; transform: scaleX(-1); }
.blog-slide:hover .blog-slide__cta { background: var(--color-accent-hover); transform: translateY(-1px); }

/* --- Индекс справа: горизонтальные строки в одну колонку --- */
.blog-list {
  display: grid;
  grid-auto-rows: 1fr;
  gap: clamp(8px, 0.9vw, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.blog-row {
  --row-x: 0px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 1.2vw, 16px);
  height: 100%;
  padding: 10px 14px 10px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-fg);
  box-shadow: var(--shadow-card);
  transform: translateX(var(--row-x));
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.blog-row:hover { --row-x: 5px; box-shadow: var(--shadow-card-hover); text-decoration: none; }
.blog-row:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Активная строка = та, что сейчас на обложке слева. Инверсия: заливка
   уходит, остаётся белая обводка прямо по оранжевому фону полосы — строка
   «выпадает» из белой стопки, а не подкрашивается внутри неё. */
.blog-row.is-active {
  background: transparent;
  border-color: #fff;
  color: #fff;
  box-shadow: none;
}
.blog-row.is-active:hover { box-shadow: none; }
.blog-row.is-active .blog-row__num { color: #fff; }
.blog-row__thumb {
  width: clamp(58px, 5vw, 74px);
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--color-accent-tint) center / cover no-repeat;
}
.blog-row__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.blog-row__num {
  color: var(--color-accent);
  font-size: var(--text-3xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.blog-row__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base-sm);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-row__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-accent-tint);
  color: var(--color-accent);
  transition: background var(--transition-base), color var(--transition-base);
}
.blog-row__arrow svg { width: 15px; height: 15px; transform: scaleX(-1); }
.blog-row:hover .blog-row__arrow { background: var(--color-accent); color: var(--color-on-accent); }
.blog-row.is-active .blog-row__arrow,
.blog-row.is-active:hover .blog-row__arrow {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
}
/* Полоска автосмены: показывает, сколько осталось до следующей обложки.
   Длительность синхронизирована с DELAY в js/main.js. */
.blog-row__progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: #fff;
  opacity: 0;
}
.blog-row.is-active .blog-row__progress {
  opacity: 1;
  animation: blog-progress 6000ms linear forwards;
}
.blog-zone__layout.is-paused .blog-row__progress { animation-play-state: paused; }
@keyframes blog-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .blog-row.is-active .blog-row__progress { animation: none; opacity: 0; }
}

/* Строки индекса проявляются по очереди: под наблюдением .reveal только два
   прямых ребёнка (обложка и список), поэтому задержку раздаём отдельно. */
.blog-zone__layout > .blog-list > .blog-list__item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  transition-delay: var(--reveal-delay, 0ms);
}
.blog-zone__layout.is-visible > .blog-list > .blog-list__item {
  opacity: 1;
  transform: translateY(0);
}
.blog-list__item:nth-child(1) { --reveal-delay: 90ms; }
.blog-list__item:nth-child(2) { --reveal-delay: 135ms; }
.blog-list__item:nth-child(3) { --reveal-delay: 180ms; }
.blog-list__item:nth-child(4) { --reveal-delay: 225ms; }
.blog-list__item:nth-child(n+5) { --reveal-delay: 270ms; }

@media (max-width: 1100px) {
  /* Квадратная обложка во всю ширину была бы выше экрана — отдаём ей 4:3
     и уводим индекс под неё. Кадр всё ещё почти не режется. */
  .blog-zone__layout { grid-template-columns: minmax(0, 1fr); }
  .blog-list { grid-auto-rows: auto; }
  .blog-slide { aspect-ratio: 4 / 3; }
  .blog-slide__media { background-position: center 35%; }
}
@media (max-width: 860px) {
  .blog-zone__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .blog-zone__title { max-width: none; }
  .blog-zone__head-aside { align-items: stretch; }
  .blog-zone__all { align-self: flex-start; }
}
@media (max-width: 620px) {
  .blog-slide { aspect-ratio: 1; }
  .blog-slide__media { background-position: center; }
  .blog-slide__title { max-width: none; }
  .blog-slide__excerpt { -webkit-line-clamp: 2; }
}
@media (max-width: 520px) {
  .blog-row { padding: 8px 10px 8px 8px; gap: 10px; }
  .blog-row__arrow { width: 30px; height: 30px; }
  .blog-zone__all { width: 100%; }
}
/* На телефоне полоса блога идёт от края до края, как и остальная страница
   (см. блок про .layout): без бокового зазора скругление только показывало бы
   фон страницы в углах. Правило стоит здесь, а не рядом с .layout, потому что
   базовые margin/border-radius .blog-zone объявлены ниже по файлу. */
@media (max-width: 640px) {
  .blog-zone {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }
}

/* ==========================================================================
   Прелоадер
   Экран накрыт листом бумаги, по центру — полный логотип (кот моргает и ведёт
   хвостом). Затем из центра логотипа растёт круглое окно с чёткой границей —
   сквозь него открывается сайт, логотип уезжает в сайдбар, контент hero
   поднимается поэтапно. Окно — дыра в маске листа, поэтому лист остаётся одним
   слоем и швов нет в принципе. Перелёт логотипа считает main.js по реальным
   координатам .site-logo. Разметка и bootstrap-скрипт — partials/preloader.html.
   ========================================================================== */

/* Без регистрации браузер не умеет интерполировать кастомное свойство, и
   радиус окна прыгал бы скачком вместо плавного роста. */
@property --pl-hole {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.preloader { display: none; }

/* Класс ставит инлайновый скрипт в самом прелоадере — до первой отрисовки. */
html.is-preloading,
html.is-preloading body { overflow: hidden; }

/* Настоящий логотип в шапке прячем, пока летит его двойник из прелоадера:
   двойник приземляется ровно в его габариты, поэтому подмена в момент снятия
   слоя не видна. visibility, а не display — иначе поедет вёрстка шапки. */
.is-preloading .site-logo { visibility: hidden; }

.is-preloading .preloader {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 9000;
}

.is-opening .preloader { pointer-events: none; }

/* Подложка того же цвета под обеими половинками: стык двух clip-path даёт
   светлый шов от сглаживания, и линия разрыва просвечивает ещё до разрыва.
   На старте разрыва подложку убираем — трещина как раз должна проявиться. */
.is-preloading .preloader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 38%, #fffdf7 0%, #f8f2e6 52%, #ece0cc 100%);
}
.is-opening .preloader::before { opacity: 0; }

/* --- Лист --- */
/* Окно — прозрачная середина маски. Второй стоп отстоит всего на 1px: граница
   жёсткая, растушёвки нет, этот пиксель нужен только под сглаживание. */
.preloader__sheet {
  position: absolute;
  inset: 0;
  --pl-hole: 0px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--pl-hole), #000 calc(var(--pl-hole) + 1px));
  mask-image: radial-gradient(circle at 50% 50%, transparent var(--pl-hole), #000 calc(var(--pl-hole) + 1px));
}
.is-opening .preloader__sheet { animation: pl-open 900ms cubic-bezier(0.5, 0, 0.2, 1) forwards; }

/* 92vmax с запасом перекрывает полудиагональ любого окна (максимум ~71vmax).
   Затухание в конце — страховка: если маска браузеру не по зубам, лист уйдёт
   хотя бы затуханием, а не пропадёт скачком вместе со снятием слоя. */
@keyframes pl-open {
  0%   { --pl-hole: 0px; opacity: 1; }
  88%  { opacity: 1; }
  100% { --pl-hole: 92vmax; opacity: 0; }
}

/* Бумага: тёплое ивори вместо холодного фона сайта — лист должен читаться
   как физический объект поверх, а не как ещё одна секция. */
.preloader__paper {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 38%, #fffdf7 0%, #f8f2e6 52%, #ece0cc 100%);
}
/* Зерно бумаги — иначе заливка читается как обычный фон сайта, а не как лист. */
.preloader__paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: multiply;
}
/* Волокна: две почти невидимые штриховки под разными углами. */
.preloader__paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(101deg, rgba(92, 72, 46, 0.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(7deg, rgba(92, 72, 46, 0.022) 0 1px, transparent 1px 7px);
}

/* --- Логотип --- */
.preloader__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(46vw, 400px);
  transform: translate(-50%, -50%);
  /* Ориентир для FLIP в main.js: масштабирование идёт от центра лок-апа. */
  transform-origin: 50% 50%;
  /* Перелёт в сайдбар: конечный transform ставит main.js инлайном. Переход
     объявлен всегда, а не по .is-opening, — иначе свойство и значение меняются
     в одном пересчёте стилей и анимации не будет. */
  transition: transform 700ms cubic-bezier(0.62, 0.02, 0.2, 1) 140ms;
  will-change: transform;
}
.preloader__logo-svg {
  display: block;
  width: 100%;
  height: auto;
  /* Логотип летит в сайдбар поверх уже открывшегося оранжевого hero —
     без тени рыжий кот на нём теряется. */
  filter: drop-shadow(0 8px 22px rgba(24, 20, 15, 0.28));
  /* Буквы выезжают со сдвигом и наклоном — им нужно место за краями viewBox. */
  overflow: visible;
}

.preloader__mark,
.preloader__glyph {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 90%;
  animation: pl-glyph-in 620ms cubic-bezier(0.16, 1.2, 0.3, 1) forwards;
}
.preloader__mark {
  transform-origin: 50% 100%;
  animation-name: pl-mark-in;
  animation-duration: 720ms;
  animation-delay: 60ms;
}
/* nth-child, а не nth-of-type: первым в SVG идёт группа кота, буквы — со второй. */
.preloader__glyph:nth-child(2) { animation-delay: 300ms; }
.preloader__glyph:nth-child(3) { animation-delay: 366ms; }
.preloader__glyph:nth-child(4) { animation-delay: 432ms; }
.preloader__glyph:nth-child(5) { animation-delay: 498ms; }
.preloader__glyph:nth-child(6) { animation-delay: 564ms; }
.preloader__glyph:nth-child(7) { animation-delay: 630ms; }

/* Оранжевая точка — единственный акцент в вордмарке, поэтому у неё отдельный
   «отскок» вместо общего выезда. */
.preloader__glyph--dot {
  transform-origin: 50% 50%;
  animation-name: pl-dot-in;
  animation-duration: 520ms;
}

@keyframes pl-glyph-in {
  from { opacity: 0; transform: translateY(18px) rotate(-7deg) scale(0.86); }
  to   { opacity: 1; transform: none; }
}
@keyframes pl-mark-in {
  from { opacity: 0; transform: translateY(26px) rotate(-6deg) scale(0.78); }
  to   { opacity: 1; transform: none; }
}
@keyframes pl-dot-in {
  0%   { opacity: 0; transform: scale(0); }
  58%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* Кот в логотипе оживает, пока лист ещё цел: два моргания и пара взмахов
   хвостом. transform-box: view-box — чтобы transform-origin задавать прямо в
   координатах viewBox логотипа, как в остальных анимированных котах проекта
   (assets/img/*-anim.svg). Обе анимации конечные и укладываются в показ листа:
   зациклить их незачем, элемент всё равно снимается вместе с прелоадером. */
.preloader__tail,
.preloader__lid { transform-box: view-box; }

.preloader__tail {
  /* Ось — в месте реза, у основания тонкой части хвоста. */
  transform-origin: 18.8px 320.1px;
  animation: pl-tail 1050ms ease-in-out 680ms both;
}
@keyframes pl-tail {
  0%   { transform: rotate(0deg); }
  16%  { transform: rotate(-7deg); }
  32%  { transform: rotate(5deg); }
  46%  { transform: rotate(-5deg); }
  60%  { transform: rotate(6.5deg); }
  76%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

/* Веко закрыто = scaleY(1), открыто = scaleY(0): в покое его просто нет. */
.preloader__lid {
  fill: #e35b21;
  transform: scaleY(0);
  animation: pl-blink 800ms ease-in-out 700ms both;
}
@keyframes pl-blink {
  0%, 14%   { transform: scaleY(0); }
  18%       { transform: scaleY(0.95); }
  23%, 52%  { transform: scaleY(0); }
  56%       { transform: scaleY(0.95); }
  61%, 100% { transform: scaleY(0); }
}

@media (max-width: 900px) {
  .preloader__logo { width: min(72vw, 320px); }
}

/* Скрипт в партиале при prefers-reduced-motion даже не ставит класс, но на
   случай смены настройки на лету — снимаем лист мгновенно, без разлёта. */
@media (prefers-reduced-motion: reduce) {
  .is-preloading .preloader { display: none; }
  .is-preloading .site-logo { visibility: visible; }
  html.is-preloading,
  html.is-preloading body { overflow: visible; }
}

/* ==========================================================================
   Появление hero
   Контент главного экрана поднимается поэтапно — вместе с раскрытием окна в
   листе, а на повторных заходах сразу после загрузки. Стартовое (скрытое)
   состояние вешается только при js-intro, который ставит bootstrap-скрипт
   прелоадера: без JS и при prefers-reduced-motion ничего не прячется и блок
   виден как обычно. Запускает main.js классом is-hero-in (плюс страховочный
   таймер в самом bootstrap на случай, если main.js не загрузится).
   ========================================================================== */
html.js-intro [data-hero-in],
html.js-intro .hero-figma__photo { opacity: 0; }

.is-hero-in [data-hero-in] {
  animation: hero-in 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(220ms + var(--hero-i, 0) * 60ms);
}
/* Фото — отдельная анимация: наезд вместо подъёма, иначе на весь экран это
   читается как рывок вёрстки. Анимируем обёртку, а не <img>: на картинке
   уже живёт transform параллакса. */
.is-hero-in .hero-figma__photo {
  animation: hero-photo-in 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-photo-in {
  from { opacity: 0; transform: scale(1.07); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.js-intro [data-hero-in],
  html.js-intro .hero-figma__photo { opacity: 1; }
}

/* ==========================================================================
   Плашка согласия на cookie + попап настройки категорий
   ========================================================================== */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  padding: var(--space-3);
  transition: bottom var(--transition-base);
  /* Плашка тянется во всю ширину, но видима только карточка по центру:
     без этого её прозрачные поля съедали клики по плавающим виджетам справа. */
  pointer-events: none;
}
.cookie-bar__inner { pointer-events: auto; }
.cookie-bar[hidden] { display: none; }
/* На мобильном карточка котёнка держит липкий CTA внизу экрана — плашка
   поднимается над ним, чтобы не перекрывать кнопку брони/видео. */
.cookie-bar--raised { bottom: 72px; }

.cookie-bar__inner {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1), opacity 240ms ease-out;
}
.cookie-bar.is-open .cookie-bar__inner {
  transform: translateY(0);
  opacity: 1;
}
.cookie-bar__text { flex: 1 1 320px; }
.cookie-bar__text strong { display: block; font-size: var(--text-base-sm); margin-bottom: 4px; }
.cookie-bar__text p { margin: 0; color: var(--color-fg-muted); font-size: var(--text-sm); }
.cookie-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .cookie-bar__actions { width: 100%; }
  .cookie-bar__actions .btn { flex: 1 1 auto; }
}

.cookie-settings__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}
.cookie-settings__row {
  padding: var(--space-3);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}
.cookie-settings__row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.cookie-settings__row-title { font-weight: 600; font-size: var(--text-base-sm); }
.cookie-settings__row-text {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

/* Переключатель — чекбокс, спрятанный под дорожкой/бегунком. */
.cookie-toggle {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 44px;
  height: 26px;
}
.cookie-toggle input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cookie-toggle__track {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast);
}
.cookie-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}
.cookie-toggle input:checked + .cookie-toggle__track { background: var(--color-accent); }
.cookie-toggle input:checked + .cookie-toggle__track .cookie-toggle__thumb { transform: translateX(18px); }
.cookie-toggle input:focus-visible + .cookie-toggle__track { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cookie-toggle input:disabled { cursor: not-allowed; }
.cookie-toggle--locked { opacity: 0.6; }

/* ==========================================================================
   ПРОПОРЦИОНАЛЬНЫЙ РОСТ ВЫШЕ 1440 — главная страница
   --------------------------------------------------------------------------
   Все clamp() на странице брали потолок уже на ~1150-1440px, поэтому от 1440
   до 2560 не менялось ничего: ни кегли заголовков, ни вертикальный ритм —
   росла только пустота, и на большом мониторе страница читалась как мелкий
   текст в огромной раме. Здесь потолки продолжены линейно: на 1440 значения
   ровно те же, что были, на 2560 — примерно в 1.7 раза крупнее.

   Почему отдельный @media (min-width: 1441px), а не max()/clamp() прямо в
   исходных правилах: ниже 1441 этого блока попросту не существует, поэтому
   весь отлаженный диапазон (включая мобильные медиазапросы ниже по файлу)
   математически не может быть задет — ни каскадом, ни специфичностью.

   Почему vw, а не cqw как у hero: у hero ограничение геометрическое (кадр
   16:9 против реальной ширины бокса), там нужна точная ширина карточки
   контента. Здесь рост чисто стилевой, и разница между vw и шириной
   карточки — константа в ширину рельса; заводить ради неё container-контекст
   на .section (а с ним containment и новый containing block для fixed)
   не стоит.

   Карточки товаров, пород, статей и отзывов сознательно НЕ трогаем: у них
   свой кегль и свои внутренние отступы, сетка и так перестраивается
   колонками. Растёт оболочка страницы, а не содержимое карточек.
   ========================================================================== */
@media (min-width: 1441px) {
  /* Вертикальный ритм между секциями: 80px -> 140px. */
  body.page-public-home {
    --space-section: clamp(80px, calc(2.86px + 5.36vw), 140px);
  }
  body.page-public-home .section__header {
    margin-bottom: clamp(40px, calc(1.43px + 2.68vw), 70px);
  }

  /* Заголовки секций: 41.6px -> 71.3px. Формула у всех одна — базовый
     потолок * 1.714 на 2560, — меняются только числа под свой базовый
     кегль, поэтому пропорции между заголовками сохраняются. */
  body.page-public-home .section__header h2,
  body.page-public-home .final-cta h2 {
    font-size: clamp(2.6rem, calc(3.4px + 2.652vw), 4.45rem);
  }
  body.page-public-home .section__header .muted {
    /* Пояснительный текст растёт мягче заголовков (x1.4, а не x1.714):
       у мелкого кегля рост заметнее, и вровень с заголовком он начинает
       спорить с ним за внимание. */
    font-size: clamp(1.0625rem, calc(8.26px + 0.607vw), 1.49rem);
  }
  body.page-public-home .final-cta .muted {
    font-size: clamp(1.0625rem, calc(8.26px + 0.607vw), 1.49rem);
  }

  /* Крупные именные заголовки блоков — та же формула от своего потолка. */
  body.page-public-home .find-kitten__title,
  body.page-public-home .journey__header h2 {
    font-size: clamp(3.4rem, calc(4.45px + 3.468vw), 5.83rem);
  }
  body.page-public-home .compare-banner__title {
    font-size: clamp(2.7rem, calc(3.53px + 2.754vw), 4.63rem);
  }
  body.page-public-home .blog-zone__title {
    font-size: clamp(2.9rem, calc(3.8px + 2.958vw), 4.97rem);
  }
  body.page-public-home .journey__header .muted {
    font-size: clamp(1.0625rem, calc(8.26px + 0.607vw), 1.49rem);
  }
}