@charset "utf-8";
/* ==========================================================================
   porodoteka.ru — главная страница
   Значения токенов взяты из brand/brand-guide.html пакета передачи.
   Порядок: токены → база → примитивы → блоки → адаптив → доступность
   ========================================================================== */

/* --------------------------------------------------------------- 1. Токены */
:root {
  /* Поверхности */
  --color-paper: #FFFFFF;          /* фон страниц и карточек */
  --color-sand: #F6F5F1;           /* секции, кабинет, плашки, невыбранные чипы */
  --color-tile: #EFEEE8;           /* заглушки фото, пустые плитки */
  --color-line: #E7E6E0;           /* границы карточек, разделители */
  --color-line-strong: #DCDAD3;    /* контуры кнопок, полей, невыбранных чипов */
  --color-line-dashed: #A9ACB2;    /* пунктир: «не указано», рамка рекламы */

  /* Текст */
  --color-ink: #111216;            /* основной текст, чёрные кнопки, выбранное · 18,7 : 1 */
  --color-graphite: #3C3F47;       /* вторичный текст */
  --color-muted: #676B74;          /* подписи, даты, источники · 5,3 : 1 */

  /* Роли. Цвет — это роль, а не украшение */
  --color-action: #FF6A2A;         /* главный шаг; одна оранжевая кнопка на экран */
  --color-on-action: #111216;      /* на оранжевом только чёрный текст: 6,6 : 1 (белый — 2,9 : 1) */
  --color-action-text: #C2470F;    /* оранжевый для текста и ссылок на белом */
  --color-action-tint: #FFF4EE;    /* фон плашек действия, рубрик */

  --color-assistant: #6A4DFF;      /* всё, что делает ИИ: подбор, черновики, голос, импорт */
  --color-on-assistant: #FFFFFF;   /* 5,1 : 1 */
  --color-assistant-text: #5134E6; /* подписи «Помощник Породотеки» */
  --color-assistant-tint: #F0ECFF; /* фон ответов и плашек помощника */
  --color-assistant-line: #E0D9FF;

  --color-ok: #0B7A4B;             /* проверено, свободен, выполнено · 4,8 : 1 на своём фоне */
  --color-ok-tint: #E4F5EC;
  --color-warn: #8A5300;           /* на проверке, резерв, сроки в работе · 5,7 : 1 */
  --color-warn-tint: #FFF1D9;
  --color-alarm: #B42318;          /* срочно, сбой, срок сегодня · 5,8 : 1; рекламы рядом нет */
  --color-alarm-tint: #FEECEA;
  --color-alarm-line: #F3C4BF;
  --color-alarm-ink: #7A1A12;      /* длинный текст в срочном блоке */
  --color-waitlist: #9A3A0E;       /* статус «Лист ожидания» */
  --color-waitlist-tint: #FFE7DA;

  --color-ear: #FFB48A;            /* уголок знака: бренд и OG, не интерфейс */

  /* Шрифты: Onest — текст и интерфейс; Unbounded 600 — только крупные заголовки и цифры */
  --font-text: "Onest", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Unbounded", "Onest", sans-serif;

  /* Кегли */
  --type-display: clamp(38px, 4.3vw, 62px);   /* герой главной · Unbounded 600 · 1,04 · −0,035em */
  --type-h1: clamp(36px, 4vw, 58px);          /* заголовок страницы · Unbounded 600 · 1,05 · −0,035em */
  --type-h2: clamp(28px, 2.8vw, 40px);        /* заголовок секции · Unbounded 600 · 1,1 · −0,03em */
  --type-h3: 22px;                            /* блок кабинета, секция карточки · Unbounded 600 · −0,03em */
  --type-stat: 28px;                          /* цифры статистики · Unbounded 600 */
  --type-lead: 19px;                          /* лид · Onest 400 · 1,55 */
  --type-body: 17px;                          /* основной текст · Onest 400 · 1,55 */
  --type-title: 17px;                         /* заголовок карточки · Onest 700–800 · 1,2 */
  --type-ui: 15px;                            /* кнопки, вкладки, меню · Onest 600–700 */
  --type-small: 14px;
  --type-caption: 13px;                       /* источник, дата проверки, «со слов заводчика» */
  --type-micro: 12px;                         /* статусы-пилюли, метки */
  --leading-display: 1.04;
  --leading-h1: 1.05;
  --leading-h2: 1.1;
  --leading-body: 1.55;
  --tracking-display: -0.035em;
  --tracking-heading: -0.03em;

  /* Скругления: пилюли — действия и чипы; 20–28 — карточки; 12–16 — плитки и поля */
  --radius-xs: 8px;
  --radius-field: 12px;
  --radius-tile: 16px;
  --radius-card: 22px;
  --radius-block: 28px;
  --radius-pill: 999px;

  /* Отступы, шаг 4: между секциями 72–96, внутри карточки 12–20 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 96px;

  /* Сетка: контейнер 1376, поля 16–48, карточки auto-fit от 280 px */
  --layout-wrap: 1376px;
  --layout-gutter: clamp(16px, 3.3vw, 48px);
  --layout-card-min: 280px;

  /* Элементы управления */
  --control-h: 46px;        /* десктоп и кабинет: 44–46 */
  --control-h-touch: 48px;  /* телефон */
  --hit-min: 44px;          /* зона нажатия не меньше */

  /* Тени */
  --shadow-xs: 0 1px 2px rgba(17, 18, 22, 0.12);
  --shadow-pop: 0 18px 40px -28px rgba(17, 18, 22, 0.35);
  --shadow-hover: 0 22px 44px -24px rgba(17, 18, 22, 0.32);  /* карточка при наведении + translateY(-3px) */
  --shadow-panel: 0 30px 60px -36px rgba(17, 18, 22, 0.35);  /* панель помощника */

  --motion: 0.18s ease;
}

/* Телефон (артборды «Телефон: …», 390 px): заголовки 26/21, текст 16 */
@media (max-width: 600px) {
  :root {
    --type-display: 30px;
    --type-h1: 26px;
    --type-h2: 21px;
    --type-h3: 18px;
    --type-stat: 24px;
    --type-lead: 16px;
    --type-body: 16px;
  }
}

/* ── Совместимость: старые имена styles.css → новые значения ─────────────
 * Ставится вместо нынешнего :root. Значения, которых нет на макетах
 * (тёмные поверхности, линии статусов), подобраны в той же гамме и помечены.
 * Тёмная шапка и подвал в 2.0 не используются: шапка белая, подвал песочный. */
:root {
  --surface: var(--color-paper);
  --card: var(--color-paper);
  --inset: var(--color-sand);

  --dark: var(--color-ink);
  --dark-2: #1C1D22;        /* подобрано */
  --dark-3: var(--color-graphite);
  --dark-deep: #0B0C0F;     /* подобрано */
  --hairline-dark: #2A2C33; /* подобрано */
  --on-dark: #FFFFFF;
  --on-dark-2: #C9CBD1;
  --on-dark-3: #9A9DA6;     /* подобрано */

  --ink: var(--color-ink);
  --body: var(--color-graphite);
  --meta: var(--color-muted);

  --bronze: var(--color-action);
  --bronze-ink: var(--color-action-text);
  --bronze-lift: #F2601F;   /* подобрано: наведение = яркость 95 % */
  --bronze-soft: var(--color-action-tint);
  --on-bronze: var(--color-on-action);   /* было светлое: на оранжевом только чёрный */
  --gold: var(--color-ear);
  --gold-dim: #FFD9C2;
  --gold-line: var(--color-action-text);

  --line: var(--color-line);
  --line-dashed: var(--color-line-dashed);
  --line-photo: var(--color-line-strong);

  --alarm-bg: var(--color-alarm-tint);
  --alarm-line: var(--color-alarm-line);
  --alarm-mark: var(--color-alarm);
  --alarm-ink: var(--color-alarm);
  --ok-bg: var(--color-ok-tint);
  --ok-line: #BFE3CF;       /* подобрано */
  --ok-mark: var(--color-ok);
  --ok-ink: var(--color-ok);
  --warn-bg: var(--color-warn-tint);
  --warn-line: #F2D9A6;     /* подобрано */
  --warn-mark: #B26B00;     /* подобрано: значок, не текст */
  --warn-ink: var(--color-warn);

  --r-field: var(--radius-field);
  --r-card: var(--radius-card);
  --r-block: var(--radius-block);
  --r-pill: var(--radius-pill);

  --wrap: var(--layout-wrap);
  --gutter: var(--layout-gutter);
  --gap: var(--space-4);

  --font: var(--font-text);
  --fs-h1: var(--type-h1);
  --fs-h2: var(--type-h2);
  --fs-h2-sm: clamp(26px, 2.4vw, 34px);
  --fs-h3: clamp(18px, 0.6vw + 14px, 22px);  /* в старой вёрстке это заголовки карточек — Onest 700 */
  --fs-lead: var(--type-lead);
  --fs-body: var(--type-body);
  --fs-meta: var(--type-caption);

  --dur: 0.18s;

  /* сохранено из прежнего :root: в токенах 2.0 их нет, а старая вёрстка
     на них опирается (тень таб-бара, отступ прокрутки под шапку) */
  --shadow-tabbar: 0 -4px 20px rgb(36 29 23 / 6%);
  --header-h: 96px;
}

/* Брейкпоинты 2.0 (B10). Новые правила — только на этих ширинах:
 *   600        телефон: кегли и поля телефона (токены)
 *   767 / 768  телефон ↔ планшет: нижняя панель, зоны нажатия 48 px
 *   959 / 960  планшет ↔ ноутбук: шапка 56 px ↔ полная строка
 *   1199/1200  пять пунктов и «Ещё» ↔ все шесть пунктов
 *   1359/1360  значок поиска ↔ поле поиска 280 px
 * max-width — последняя ширина диапазона (767, 959, 1199, 1359),
 * min-width — первая (768, 960, 1200, 1360). */

/* ------------------------------------------------------------------ 2. База */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/* авторские display-правила не должны перебивать [hidden] */
[hidden] {
  display: none !important;
}

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

img {
  height: auto;
}

/* 2.0: ссылки — чернила, подчёркивание при наведении (артборд «Система»). */
a {
  color: var(--color-ink);
  text-decoration: none;
}

a:hover {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

input::placeholder {
  color: var(--meta);
  opacity: 1;
}

.on-dark input::placeholder,
input[data-dark]::placeholder {
  color: var(--on-dark-3);
}

strong,
b {
  font-weight: 700;
}

/* заголовки: h1 и h2 — Unbounded 600 (2.0), h3 и ниже — Onest 700 */
h1 {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  font-weight: 600;
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--type-h2);
  font-weight: 600;
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* -------------------------------------------------------- 3. Примитивы */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: 48px 8px;
}

.section--first {
  padding-top: 56px;
}

.section--last {
  padding-bottom: 56px;
}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}

.sec-head__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sec-head__more {
  flex: none;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

/* дубль ссылки «всё» — показывается только в мобильной вёрстке */
.sec-foot-more {
  display: none;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

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

.meta {
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--meta);
}

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.3;
  color: var(--bronze);
  text-transform: uppercase;
}

.eyebrow--gold {
  color: var(--gold);
  letter-spacing: 0.1em;
  font-size: 13px;
}

.num {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.028em;
}

.stack {
  display: flex;
  flex-direction: column;
}

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

/* карточки */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.card--dark {
  background: var(--dark);
  border-color: transparent;
  color: var(--on-dark);
}

/* Блочная карточка: заголовок и текст внутри рамки. Отступ здесь, а не у
   `.card`, потому что `.card` — только оболочка (фон, рамка, скругление):
   её носят и плитки инструментов, и карточки питомников, у которых своя
   внутренняя вёрстка со своими отступами. А `.card--block` живёт ровно
   в одном виде — текстовый блок, — и без отступа текст лежал на рамке.
   Так это и выглядело на хабах реестра и на страницах экспертности. */
.card--block {
  border-radius: var(--r-block);
  padding: 24px;
}

/* Ритм внутри блока. У сброса стилей отступы обнулены, а свои интервалы
   элементы в этой вёрстке получают от родителя — но `.card--block` держит
   обычный текстовый поток, и без интервалов заголовок, абзацы и строка
   ссылок под ними слипались в сплошную стену.

   Отступ сверху и только у соседей (`* + *`), а не margin у всех подряд:
   иначе первый элемент оттолкнулся бы от собственной рамки и внутренний
   отступ сверху оказался бы вдвое больше, чем снизу. Перед подзаголовком
   больше — на /avtory/ в одном блоке идёт несколько разделов подряд,
   и равный интервал сплющил бы их в один. */
.card--block > * + * {
  margin-top: 12px;
}

.card--block > * + h2,
.card--block > * + h3 {
  margin-top: 22px;
}

@media (max-width: 767px) {
  .card--block {
    padding: 18px;
  }
}

/* кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 14px 22px;
  border: none;
  border-radius: var(--r-field);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
}

.btn:hover {
  text-decoration: none;
}

.btn--primary {
  background: var(--bronze);
  color: var(--on-bronze);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--bronze-ink);
  color: var(--on-bronze);
}

.btn--on-dark:hover,
.btn--on-dark:focus-visible {
  background: var(--bronze-lift);
}

.btn--secondary {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--body);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--bronze);
  color: var(--bronze);
}

.btn--outline-bronze {
  background: transparent;
  border: 1.5px solid var(--bronze);
  color: var(--bronze);
}

.btn--outline-bronze:hover,
.btn--outline-bronze:focus-visible {
  background: var(--bronze-soft);
  color: var(--bronze-ink);
}

.btn--outline-ok {
  background: transparent;
  border: 1.5px solid var(--ok-line);
  color: var(--ok-ink);
  min-height: 48px;
}

.btn--outline-ok:hover,
.btn--outline-ok:focus-visible {
  background: #ddeee2;
}

.btn--wide {
  width: 100%;
}

.btn--tall {
  min-height: 52px;
  padding-block: 15px;
}

/* поля */
.input,
.select {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--r-field);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur), box-shadow var(--dur);
}

.input:hover,
.select:hover {
  border-color: #cfc4ae;
}

.input:focus,
.select:focus {
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgb(130 96 31 / 18%);
}

.input--date {
  font-weight: 600;
  font-size: 17px;
}

.input--dark {
  background: var(--dark-deep);
  border-color: var(--dark-3);
  color: var(--on-dark);
}

.input--dark:hover {
  border-color: #4d4433;
}

.input--dark:focus {
  border-color: var(--gold-line);
  box-shadow: 0 0 0 3px rgb(211 163 74 / 22%);
}

.input--dark-soft {
  background: var(--dark-2);
  border-color: var(--dark-3);
  color: var(--on-dark);
}

.input--dark-soft:hover {
  border-color: #4d4433;
}

.input--dark-soft:focus {
  border-color: var(--gold-line);
  box-shadow: 0 0 0 3px rgb(211 163 74 / 22%);
}

.select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9.5 6 5.5 6-5.5' stroke='%2382601F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

.label {
  font-size: 13px;
  font-weight: 600;
  color: var(--body);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.row {
  display: flex;
  gap: 10px;
}

.row > .input {
  flex: 1;
  min-width: 0;
}

.row > .btn {
  flex: none;
  white-space: nowrap;
}

/* пилюли и чипы */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.pill--bronze {
  background: var(--bronze-soft);
  color: var(--bronze-ink);
}

.pill--ok {
  background: var(--ok-bg);
  color: var(--ok-ink);
}

.pill--plain {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--body);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--bronze-soft);
  color: var(--bronze-ink);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.chip:hover,
.chip:focus-visible {
  background: #efdfc0;
  color: var(--bronze-ink);
  text-decoration: none;
}

/* Регион каталога: вся ссылка доступна для нажатия пальцем. */
[data-reg-regions] .chip {
  min-height: 44px;
}

/* иконки: цвет наследуется, geometry — из спрайта */
.i {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.i--thick {
  stroke-width: 3.2;
}

.i--thin {
  stroke-width: 1.5;
}

/* иконка в квадрате */
.icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--bronze-soft);
  color: var(--bronze);
}

.icon-box--alarm,
.icon-box--warn,
.icon-box--ok {
  color: var(--on-dark);
}

.icon-box--sm {
  width: 40px;
  height: 40px;
  border-radius: 11px;
}

.icon-box--alarm {
  background: var(--alarm-mark);
}

.icon-box--warn {
  background: var(--warn-mark);
}

.icon-box--ok {
  background: var(--ok-mark);
  border-radius: 12px;
  width: 44px;
  height: 44px;
}

/* смысловые плашки */
.note {
  padding: 12px 14px;
  border-radius: var(--r-field);
  font-size: 13.5px;
  line-height: 1.45;
}

.note--warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn-ink);
}

.note--ok {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  background: var(--ok-bg);
  border: 1px solid var(--ok-line);
  color: var(--ok-ink);
  font-size: 14px;
}

.note--error {
  color: var(--alarm-ink);
  font-size: 13.5px;
  font-weight: 600;
  padding: 0;
}

/* (удалён легаси-бейдж .tick 28x28 из старой дизайн-системы: единственный
   потребитель класса — <li class="tick"> из blocks.py, и width/height:28px
   отсюда сплющивали все 141 li-карточку; актуальное правило .tick — ниже,
   в «системе блоков») */

.link-quiet {
  border: none;
  background: transparent;
  padding: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ok-ink);
  text-decoration: underline;
  cursor: pointer;
}

/* слот фотографии — заглушка до реальной съёмки */
.photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--inset);
  color: var(--line-photo);
  overflow: hidden;
}

.photo--43 {
  aspect-ratio: 4 / 3;
}

.photo--169 {
  aspect-ratio: 16 / 9;
}

.photo > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* рекламный слот: высота зарезервирована, метка обязательна */
.ad {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 40px;
}

.ad__label {
  font-size: 11px;
  color: var(--meta);
}

.ad__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 250px;
  padding: 16px;
  border: 1px dashed var(--line-dashed);
  border-radius: 16px;
  background: var(--inset);
  color: var(--meta);
  font-size: 13px;
  text-align: center;
}

.ad__slot--mobile {
  display: none;
  width: 300px;
  border-radius: 14px;
  font-size: 12.5px;
}

/* -------------------------------------------------- 4. Пропуск навигации */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-field) var(--r-field);
  background: var(--bronze);
  color: var(--on-bronze);
  font-weight: 600;
  transition: top var(--dur);
}

.skip:focus {
  top: 0;
  color: var(--on-bronze);
  text-decoration: none;
}

/* Оставляем видимой обводку при прокрутке расчёта к краю экрана. */
[data-tool-inline="food"] [data-food-res],
[data-tool-inline="food"] [data-food-save] {
  scroll-margin-bottom: 8px;
}

/* подсказки поиска */
.search {
  position: relative;
}

.suggest__list {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% + 6px);
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 18px 40px rgb(36 29 23 / 14%);
}

.suggest__list:not([data-open]) {
  display: none;
}

.suggest__item {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.suggest__item:hover,
.suggest__item[aria-selected="true"] {
  background: var(--bronze-soft);
}

.suggest__item b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.suggest__item span {
  font-size: 13px;
  color: var(--meta);
}

.suggest__empty {
  padding: 12px;
  font-size: 14px;
  color: var(--meta);
}

/* ------------------------------------------------------------- 5. Герой */
.hero {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.hero__inner {
  display: flex;
  align-items: center;
  gap: 56px;
  padding-block: 56px 48px;
}

.hero__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.hero__lead {
  max-width: 34em;
}

.hero__aside {
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.searchbox {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.searchbox .search {
  max-width: 600px;
}

.searchbox__form {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 8px 6px 20px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color var(--dur), box-shadow var(--dur);
}

.searchbox__form:focus-within {
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgb(130 96 31 / 14%);
}

.searchbox__field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--meta);
}

.searchbox__input {
  flex: 1;
  min-width: 0;
  padding-block: 14px;
  border: none;
  background: transparent;
  font-size: 17px;
  color: var(--ink);
  outline: none;
}

.searchbox__submit {
  flex: none;
  min-height: 48px;
  padding: 14px 24px;
}

.searchbox__hints {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.searchbox__hints-label {
  font-size: 14px;
  color: var(--meta);
}

/* карточка выставки */
.showcard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
  border-radius: var(--r-block);
}

.showcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.showcard__body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.datechip {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 70px;
  padding-block: 10px;
  border-radius: 14px;
  background: var(--bronze-soft);
}

.datechip__day {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bronze-ink);
  font-variant-numeric: tabular-nums;
}

.datechip__mon {
  font-size: 12px;
  font-weight: 600;
  color: var(--bronze);
}

.datechip--sm {
  width: 64px;
  padding-block: 8px;
  border-radius: 12px;
}

.datechip--sm .datechip__day {
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.datechip--sm .datechip__mon {
  font-size: 12px;
  color: var(--bronze-ink);
}

.showcard__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.showcard__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.showcard__title:hover {
  color: var(--bronze);
}

/* пошаговые формы: idle → почта → готово */
.flow > [data-step] {
  display: none;
}

.flow--fill {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flow--fill > [data-step] {
  flex: 1;
}

.flow[data-state="idle"] [data-step="idle"],
.flow[data-state="pick"] [data-step="pick"],
.flow[data-state="done"] [data-step="done"] {
  display: flex;
}

.flow__idle {
  display: flex;
  gap: 10px;
}

.flow__idle .btn--primary {
  flex: 1;
}

.flow__pick {
  flex-direction: column;
  gap: 9px;
}

.flow__pick-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.flow__pick .input {
  min-height: 48px;
  padding: 13px 14px;
  background: var(--surface);
  border-width: 1px;
  font-size: 15px;
}

.flow__pick .btn {
  min-height: 48px;
  padding: 13px 18px;
  font-size: 15px;
}

/* ---------------------------------------------------------- 6. Инструменты */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.tool {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 196px;
  padding: 24px;
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color var(--dur), background var(--dur);
}

.tool:hover,
.tool:focus-visible {
  border-color: var(--bronze);
  text-decoration: none;
}

.tool__title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.tool__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}

.tool__desc--short {
  display: none;
  font-size: 13px;
  line-height: 1.35;
}

.tool__cta {
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--bronze);
}

.tool--dark {
  background: var(--dark);
  border-color: transparent;
}

.tool--dark:hover,
.tool--dark:focus-visible {
  background: var(--dark-2);
  border-color: transparent;
}

.tool--dark .tool__title {
  color: var(--on-dark);
}

.tool--dark .tool__desc {
  color: var(--on-dark-2);
}

.tool--dark .tool__cta {
  color: var(--gold);
}

/* ------------------------------------------------------------- 7. Триаж */
.triage {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px;
  border-radius: var(--r-block);
  background: var(--alarm-bg);
  border: 1px solid var(--alarm-line);
}

.triage__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.triage__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.triage__head h2 {
  font-size: clamp(20px, 0.7vw + 17.5px, 26px);
  line-height: 1.22;
  color: var(--alarm-ink);
}

.triage__text {
  max-width: 60ch;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--body);
}

.symptoms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.symptom {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: var(--r-field);
  background: var(--card);
  border: 1px solid var(--alarm-line);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur), background var(--dur);
}

.symptom:hover,
.symptom:focus-visible {
  border-color: var(--alarm-mark);
  color: var(--alarm-ink);
  text-decoration: none;
}

.symptom--all {
  color: var(--alarm-ink);
}

.vetcard {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: 16px;
  background: var(--card);
}

.vetcard__pill {
  align-self: flex-start;
  padding: 6px 11px;
  font-size: 13px;
}

.vetcard__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
}

/* --------------------------------------------------------------- 8. Щенок */
.puppy-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--gutter);
  align-items: stretch;
}

.vaccine-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  border-radius: var(--r-block);
}

.vaccine-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vaccine-card__head h2 {
  font-size: var(--fs-h2-sm);
  line-height: 1.22;
}

.vaccine-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.vaccine-form .field {
  flex: 1;
}

.vaccine-form .btn {
  min-height: 52px;
  padding: 15px 22px;
  white-space: nowrap;
}

.timeline {
  display: flex;
  flex-direction: column;
}

.timeline__row {
  display: flex;
  align-items: stretch;
  gap: 14px;
}

.timeline__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 28px;
}

.timeline__rail::after {
  content: "";
  flex: 1;
  width: 2px;
  background: var(--line);
}

.timeline__row:last-child .timeline__rail::after {
  background: transparent;
}

.timeline__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
}

.timeline__title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}

/* на десктопе дата и срок — прямые элементы строки, на мобильном — своя строка */
.timeline__dates {
  display: contents;
}

.timeline__date {
  font-size: 15px;
  font-weight: 600;
  color: var(--bronze);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.timeline__when {
  width: 90px;
  font-size: 13px;
  color: var(--meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.vaccine-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.link-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-field);
  font-size: 15px;
  font-weight: 600;
  color: var(--body);
  text-decoration: none;
  transition: border-color var(--dur), color var(--dur);
}

.link-box:hover,
.link-box:focus-visible {
  border-color: var(--bronze);
  color: var(--bronze);
  text-decoration: none;
}

.puppy-side {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.remind {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  padding: 28px;
  border-radius: var(--r-block);
}

.remind h2,
.remind__title {
  font-size: clamp(22px, 0.5vw + 20.5px, 26px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.026em;
}

.remind--dark {
  background: var(--dark);
}

.remind--dark .remind__title {
  color: var(--on-dark);
}

.remind--dark .remind__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-dark-2);
}

.remind--dark .remind__fine {
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-dark-3);
}

.remind--ok {
  background: var(--ok-bg);
  border: 1px solid var(--ok-line);
}

.remind--ok .remind__title {
  color: var(--ok-ink);
}

.remind--ok .remind__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}

.quarantine {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: var(--r-block);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
}

.quarantine__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--warn-ink);
}

.quarantine__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}

/* --------------------------------------------------------- 9. Каталоги */
.rail {
  display: grid;
  gap: var(--gap);
}

.rail--3 {
  grid-template-columns: repeat(3, 1fr);
}

.rail--4 {
  grid-template-columns: repeat(4, 1fr);
}

.rail__more {
  display: none;
}

/* три щенка + памятка ровно в четыре одинаковых колонки */
.puppies-layout {
  --col4: calc((100% - 3 * var(--gap)) / 4);

  display: grid;
  grid-template-columns: calc(var(--col4) * 3 + var(--gap) * 2) var(--col4);
  gap: var(--gap);
  align-items: stretch;
}

.puppies-layout .rail--4 {
  grid-template-columns: repeat(3, 1fr);
}

.kennel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--dur);
}

.kennel:hover,
.kennel:focus-visible {
  border-color: var(--bronze);
  text-decoration: none;
}

.kennel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 18px;
}

.kennel__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.kennel__name {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.kennel__where {
  font-size: 14px;
  color: var(--meta);
}

.score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex: none;
}

.score__value {
  font-size: 27px;
  line-height: 1.05;
  color: var(--bronze);
}

.score__of {
  font-size: 11px;
  color: var(--meta);
}

.kennel__tags {
  margin-top: auto;
}

.banner {
  display: flex;
  align-items: center;
  gap: var(--gutter);
  margin-top: var(--gap);
  padding: 22px 26px;
  border-radius: var(--r-card);
  background: var(--dark);
}

.banner__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.banner__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--on-dark);
}

.banner__sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-dark-3);
}

.banner .btn {
  flex: none;
  min-height: 50px;
  padding: 15px 26px;
}

/* щенки */
.puppy {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--dur);
}

.puppy:hover,
.puppy:focus-visible {
  border-color: var(--bronze);
  text-decoration: none;
}

.puppy__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.puppy__price {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.puppy__what {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}

.puppy__docs {
  font-size: 13px;
  line-height: 1.4;
  color: var(--meta);
}

.puppy__from {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--bronze-ink);
}

.memo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
}

.memo__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--warn-ink);
}

.memo__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--body);
}

.memo__link {
  margin-top: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--bronze-ink);
}

/* ----------------------------------------------------------- 10. Мифы */
.myths {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  padding: 36px;
  border-radius: var(--r-block);
}

.myths .sec-head {
  margin-bottom: 0;
}

.myths__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.myth {
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
}

.myth__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 22px 22px 12px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: default;
}

/* на десктопе надзаголовок «МИФ» стоит своей строкой над утверждением */
.myth__tag {
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.3;
  color: var(--alarm-mark);
}

.myth__claim {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.myth__sign {
  display: none;
  flex: none;
  width: 22px;
  font-size: 20px;
  line-height: 1;
  color: var(--bronze-ink);
  text-align: center;
}

.myth__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 22px 22px;
}

.myth__rule {
  height: 1px;
  background: var(--line);
}

.myth__fact-tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ok-ink);
}

.myth__fact {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}

.myths__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* -------------------------------------------------------- 11. Выставки */
.shows-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--gutter);
  align-items: start;
}

.shows__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.show {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-radius: 16px;
  text-decoration: none;
  transition: border-color var(--dur);
}

.show:hover,
.show:focus-visible {
  border-color: var(--bronze);
  text-decoration: none;
}

.show__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.show__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.show__where {
  font-size: 14px;
  line-height: 1.4;
  color: var(--meta);
}

.show__cta {
  flex: none;
  padding: 9px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--body);
  white-space: nowrap;
}

.region {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  border-radius: var(--r-block);
  background: var(--inset);
}

.region__title {
  font-size: clamp(19px, 0.5vw + 17px, 23px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.026em;
}

.region__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}

/* -------------------------------------------------------- 12. Материалы */
.posts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

.post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--dur);
}

.post:hover,
.post:focus-visible {
  border-color: var(--bronze);
  text-decoration: none;
}

.post__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px;
}

.post__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
}

.post__meta {
  margin-top: auto;
  font-size: 13px;
  color: var(--meta);
}

.post .pill {
  font-size: 12px;
  padding: 5px 10px;
}

/* ------------------------------------------------------- 13. Подписка */
.cta-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--gap);
}

.mailer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 36px;
  border-radius: var(--r-block);
  background: var(--dark);
}

.mailer__title {
  max-width: 22ch;
  font-size: clamp(25px, 1vw + 21px, 32px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.026em;
  color: var(--on-dark);
}

.mailer__text {
  max-width: 56ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--on-dark-2);
}

.mailer__form {
  display: flex;
  gap: 10px;
  max-width: 520px;
  margin-top: 4px;
}

.mailer__form .input {
  min-height: 54px;
  padding: 16px;
}

.mailer__form .btn {
  min-height: 54px;
  padding: 16px 26px;
}

.tg {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  border-radius: var(--r-block);
}

.tg__title {
  font-size: clamp(21px, 0.6vw + 18.5px, 25px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.026em;
}

.tg__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}

.tg .btn {
  margin-top: auto;
}

.icon-box--lg {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

/* ============================================== 16. Адаптив: ≤1199 px */

@media (max-width: 1199px) {
  :root {
    --gutter: 20px;
  }

}

/* ============================================== 17. Адаптив: ≤1023 px */
@media (max-width: 1023px) {
  :root {
    --header-h: 92px;
  }

  .shows-grid {
    grid-template-columns: 1fr;
  }

  .banner {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .banner .btn {
    align-self: flex-start;
  }

}

/* =============================================== 18. Адаптив: ≤767 px */
@media (max-width: 767px) {
  :root {
    --gutter: 16px;
    --gap: 10px;
    --header-h: 60px;
    --r-card: 16px;
    --r-block: 18px;
  }

  html {
    scroll-padding-top: calc(var(--header-h) + 8px);
  }

  body {
    padding-bottom: 92px;
  }

  /* Автопрокрутка результата и Tab к сохранению учитывают нижний таб-бар. */
  [data-tool-inline="food"] [data-food-res],
  [data-tool-inline="food"] [data-food-save] {
    scroll-margin-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }

  /* Здесь стояла мобильная пересортировка главной: `main` делался флексом,
     и одиннадцать разделов прежней главной получали свой `order`, чтобы
     триаж поднимался над инструментами. От той главной не осталось ничего —
     после переустройства разделов пять, и зовутся они иначе: #home, #tools,
     #baza, #zhurnal. Из одиннадцати правил совпадали два, .hero и #tools,
     а остальные разделы падали в order:0 — то есть обгоняли развилку и
     уезжали наверх. На телефоне главная открывалась четвёртым экраном:
     ни H1, ни поиска, ни четырёх дверей, сразу «База РКФ». Порядок в разметке
     и есть нужный порядок, поэтому сортировка убрана целиком, а не поправлена. */

  .section {
    padding-block: 28px 4px;
  }

  .section--first {
    padding-top: 24px;
  }

  .section--last {
    padding-bottom: 32px;
  }

  .sec-head {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    margin-bottom: 16px;
  }

  .sec-head__more {
    display: none;
  }

  .chip {
    flex: none;
    padding: 8px 13px;
    white-space: nowrap;
  }

  /* инструменты */
  .tool {
    gap: 10px;
    min-height: 138px;
    padding: 15px;
    border-radius: 15px;
  }

  .icon-box {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .icon-box svg {
    width: 21px;
    height: 21px;
  }

  .icon-box--sm {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .symptom {
    justify-content: center;
    min-height: 46px;
    padding: 12px;
    border-radius: 11px;
    text-align: center;
  }

  .link-box {
    width: 100%;
  }

  .kennel__body {
    gap: 10px;
    padding: 15px;
  }

  .kennel__name {
    font-size: 17px;
  }

  .kennel__where {
    font-size: 13px;
  }

  .pill {
    padding: 5px 9px;
    font-size: 11.5px;
  }

  .banner {
    padding: 18px;
    border-radius: 16px;
  }

  .banner__title {
    font-size: 17px;
  }

  .banner__sub {
    font-size: 14px;
  }

  .banner .btn {
    align-self: stretch;
    min-height: 48px;
    padding: 14px;
  }

  .myth {
    background: var(--card);
    border: 1px solid var(--line);
  }

  .myth__head {
    padding: 16px;
    cursor: pointer;
  }

  .myth__sign {
    display: block;
  }

  /* выставки */
  .show {
    gap: 14px;
    padding: 15px;
  }

  .show__title {
    font-size: 15.5px;
  }

  .show__where {
    font-size: 12.5px;
  }

  .region {
    gap: 11px;
    padding: 18px;
  }

  .region__text {
    font-size: 14.5px;
  }

}

/* ==================================== 19. Переход по якорю и фокус */
:target {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* карточка, на которую привёл якорь из меню («Питание», «Право и быт») */
.tool:target,
.post:target {
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgb(130 96 31 / 18%);
}

.tool--dark:target {
  box-shadow: 0 0 0 3px rgb(211 163 74 / 40%);
}

:focus-visible {
  outline: 2.5px solid var(--bronze);
  outline-offset: 2px;
  border-radius: 4px;
}

.tool--dark :focus-visible,
.mailer :focus-visible,
.banner :focus-visible,
.remind--dark :focus-visible {
  outline-color: var(--gold);
}

.tool--dark:focus-visible,
.mailer .btn:focus-visible {
  outline: 2.5px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (forced-colors: active) {
  .card,
  .tool,
  .myth,
  .show,
  .kennel,
  .puppy,
  .post {
    border: 1px solid CanvasText;
  }
}

/* ------------------------------------------------------------ 20. Печать */
@media print {
  .ad,
.suggest__list {
    display: none !important;
  }

  body {
    padding-bottom: 0;
    background: #fff;
  }

  .card,
  .tool,
  .myth {
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 11px;
    color: #555;
  }
}

/* ==========================================================================
   21. Редизайн 2026-07: ритм, воздух, рекламные слоты, инструменты-диалоги
   Слой переопределений — ниже базовых правил, выигрывает по каскаду.
   ========================================================================== */

/* ----------------------------------------------- 21.1 Вертикальный ритм */
.section {
  padding-block: 72px;
}

.section--first {
  padding-top: 64px;
}

.section--last {
  padding-bottom: 80px;
}

/* чередование фонов: белые и тёплые светлые полосы */
.section--alt {
  background: #f5f2ec;
}

/* Контраст мелких рубрик на тёплом фоне; золотой вариант сохраняет свой цвет. */
.section--alt .eyebrow:not(.eyebrow--gold) {
  color: var(--bronze-ink);
}

.sec-head {
  margin-bottom: 36px;
}

.sec-head__text {
  gap: 10px;
  max-width: 62ch;
}

.sec-head .eyebrow {
  margin-bottom: 2px;
}

.sec-head__more {
  border-radius: var(--r-pill);
  padding: 9px 16px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 15px;
  transition: border-color var(--dur), color var(--dur);
}

.sec-head__more:hover {
  border-color: var(--bronze);
  text-decoration: none;
}

/* ------------------------------------------------------ 21.2 Герой */
.hero {
  padding-block: 56px 64px;
}

@media (min-width: 1024px) {
  .hero__inner {
    align-items: center;
    gap: 48px;
  }
}

.hero__lead {
  max-width: 56ch;
}

.searchbox {
  margin-top: 28px;
}

/* карточка выставки — мягче и легче */
.showcard {
  box-shadow: 0 1px 2px rgb(35 32 25 / 4%), 0 16px 40px -12px rgb(35 32 25 / 12%);
  border-color: var(--line);
}

/* ------------------------------------------------- 21.3 Карточки-инструменты */
.tool {
  gap: 12px;
  padding: 26px;
  min-height: 208px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 1px 2px rgb(35 32 25 / 3%);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
  text-align: left;
  cursor: pointer;
}

.tool:hover,
.tool:focus-visible {
  border-color: var(--bronze-lift);
  box-shadow: 0 2px 4px rgb(35 32 25 / 4%), 0 14px 32px -10px rgb(193 78 42 / 22%);
  transform: translateY(-2px);
}

.tool__cta::after {
  content: " →";
}

/* акцентная карточка (симптом-чекер) — терракота вместо чёрного */
.tool--dark {
  background: linear-gradient(150deg, #c14e2a 0%, #a83f1e 100%);
}

.tool--dark:hover,
.tool--dark:focus-visible {
  background: linear-gradient(150deg, #cb5730 0%, #b04422 100%);
  border-color: transparent;
}

.tool--dark .tool__desc {
  color: #ffd9c9;
}

.tool--dark .tool__cta {
  color: #ffe9df;
}

.tool--dark .icon-box--alarm {
  background: rgb(255 255 255 / 16%);
  color: #fff;
}

/* кнопочные карточки без дефолтного вида <button> */
button.tool {
  font: inherit;
}

/* ------------------------------------------------- 21.4 Рекламные слоты */
.adslot {
  position: relative;
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--inset);
}

.adslot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.adslot__tag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #55504a;
  background: rgb(255 255 255 / 88%);
  padding: 3px 9px;
  border-radius: var(--r-pill);
  pointer-events: none;
}

.adslot--dark .adslot__tag {
  background: rgb(25 23 19 / 72%);
  color: #d8d3cc;
}

/* A1: билборд после инструментов */
.adslot--billboard {
  aspect-ratio: 970 / 250;
  max-height: 300px;
}

/* A2: видеослот в контенте */
.adslot--video {
  aspect-ratio: 16 / 9;
  max-width: 760px;
  margin-inline: auto;
}

.adslot__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(rgb(20 17 14 / 8%), rgb(20 17 14 / 26%));
}

.adslot__play-btn {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgb(20 17 14 / 30%);
}

.adslot__play-btn::after {
  content: "";
  display: block;
  margin-left: 5px;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent var(--bronze);
}

.adslot__duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: rgb(25 23 19 / 72%);
  padding: 3px 8px;
  border-radius: 6px;
}

/* A3: нативная карточка в ленте щенков */
.puppy--ad .photo {
  position: relative;
}

.puppy--ad img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A4: строчный баннер перед подпиской */
.adslot--leader {
  aspect-ratio: 970 / 250;
  max-height: 250px;
}

.ad-wrap {
  padding-block: 28px;
}

.ad-note {
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--meta);
}

/* ------------------------------------------------- 21.5 Диалоги-инструменты */
.tooldlg {
  width: min(600px, calc(100vw - 32px));
  max-height: min(86vh, 780px);
  padding: 0;
  border: none;
  border-radius: var(--r-block);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 30px 90px -20px rgb(20 17 14 / 45%);
}

.tooldlg::backdrop {
  background: rgb(25 22 18 / 52%);
  backdrop-filter: blur(2px);
}

.tooldlg__head {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.tooldlg__title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1;
}

.tooldlg__close {
  flex: none;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  cursor: pointer;
  color: var(--body);
  transition: border-color var(--dur), color var(--dur);
}

.tooldlg__close:hover {
  border-color: var(--bronze);
  color: var(--bronze);
}

.tooldlg__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tooldlg .field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.tooldlg__grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tooldlg__note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--meta);
}

/* шаги визардов */
.qsteps {
  display: flex;
  gap: 6px;
}

.qsteps__dot {
  height: 5px;
  flex: 1;
  border-radius: 999px;
  background: var(--inset);
}

.qsteps__dot--on {
  background: var(--bronze);
}

.qtitle {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

.opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--card);
  font-size: 15.5px;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color var(--dur), background var(--dur);
}

.opt:hover {
  border-color: var(--bronze-lift);
  background: #fdf6f2;
}

.opt--on {
  border-color: var(--bronze);
  background: var(--bronze-soft);
  font-weight: 600;
}

.opt small {
  display: block;
  color: var(--meta);
  font-size: 13px;
  margin-top: 2px;
  font-weight: 400;
}

/* вердикты */
.verdict {
  border-radius: var(--r-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid;
}

.verdict__label {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.verdict__text {
  font-size: 15.5px;
  line-height: 1.55;
}

.verdict--ok {
  background: var(--ok-bg);
  border-color: var(--ok-line);
  color: var(--ok-ink);
}

.verdict--warn {
  background: var(--warn-bg);
  border-color: var(--warn-line);
  color: var(--warn-ink);
}

.verdict--alarm {
  background: var(--alarm-bg);
  border-color: var(--alarm-line);
  color: var(--alarm-ink);
}

/* результат нормы корма */
.res-big {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.res-big__num {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bronze);
  font-variant-numeric: tabular-nums;
}

.res-big__unit {
  font-size: 17px;
  font-weight: 600;
  color: var(--body);
}

.res-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}

.res-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}

.res-row b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.res-row span {
  color: var(--body);
}

/* закон: список правил */
.lawlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lawitem {
  display: flex;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  font-size: 14.5px;
  line-height: 1.55;
}

.lawitem .i {
  flex: none;
  margin-top: 2px;
  color: var(--bronze);
}

.lawitem--warn {
  background: var(--warn-bg);
  border-color: var(--warn-line);
}

.lawitem--alarm {
  background: var(--alarm-bg);
  border-color: var(--alarm-line);
}

.lawrefs {
  font-size: 12.5px;
  color: var(--meta);
  line-height: 1.6;
}

/* трекер веса */
.wt-chart {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: #fffdfb;
}

@media (max-width:767px) {
  .wt-chart text { font-size:22px; }
}

.wt-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow: auto;
}

.wt-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}

.wt-row button {
  border: none;
  background: none;
  color: var(--meta);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
}

.wt-row button:hover {
  color: var(--alarm-mark);
}

/* автодополнение Dadata */
.ac {
  position: relative;
}

.ac__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  box-shadow: 0 18px 44px -12px rgb(20 17 14 / 22%);
  overflow: hidden;
  max-height: 240px;
  overflow-y: auto;
}

.ac__list[data-open] {
  display: flex;
}

.ac__item {
  padding: 11px 14px;
  border: none;
  background: none;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
}

.ac__item:hover,
.ac__item[aria-selected="true"] {
  background: var(--bronze-soft);
}

.ac__hint {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--meta);
  border-top: 1px solid var(--line);
}

/* (удалён легаси-«калькулятор возраста в мифах»: .agecalc/.agecalc__res.
   Единственная реальная форма .agecalc — в /instrumenty/vozrast-sobaki/,
   её стилизует правило .agecalc в «системе блоков» ниже; отсюда протекали
   align-items:end (сжимал и прижимал поля вправо) и вторая карточка-рамка
   внутри .toolhost) */

/* баннер питомника с фото */
.banner {
  overflow: hidden;
}

.banner__photo {
  flex: none;
  width: 240px;
  align-self: stretch;
  border-radius: var(--r-field);
  overflow: hidden;
}

.banner__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 120px;
}

/* ---------------------------------------------- 21.6 Адаптив нового слоя */
@media (max-width: 1023px) {
  .section {
    padding-block: 56px;
  }
}

@media (max-width: 767px) {
  .section {
    padding-block: 44px;
  }

  .section--first {
    padding-top: 44px;
  }

  .sec-head {
    margin-bottom: 24px;
  }

  .adslot--leader {
    aspect-ratio: 300 / 250;
    max-height: none;
    max-width: 400px;
    margin-inline: auto;
  }

  .tooldlg__grid2 {
    grid-template-columns: 1fr;
  }

  .tool {
    min-height: 0;
  }
}

@media print {
  .adslot,
  .ad-wrap,
  .tooldlg {
    display: none !important;
  }
}

/* кнопки-симптомы и прочие конвертированные в <button> элементы */
button.symptom,
button.tool {
  font-family: var(--font);
}

button.symptom {
  cursor: pointer;
}

.myths__actions {
  margin-top: 22px;
}

/* Порядок рекламных вставок в той же мобильной флекс-раскладке main — она
   убрана вместе с прежней главной. Модификаторов --a1/--a2/--a4 в разметке
   тоже больше нет: единственный уцелевший .ad-wrap на /shchenki/ идёт без них. */

/* центровка нижнего лидерборда и билборда, когда они уже wrap */
.adslot--leader,
.adslot--billboard {
  margin-inline: auto;
}

/* щенки: 2×2 на широких экранах — нативная карточка не оставляет дыру */
@media (min-width: 1024px) {
  .puppies-layout .rail--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------------------------------------------- 22. Внутренние страницы */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 20px;
  font-size: 13px;
  color: var(--meta);
}

.crumbs a {
  color: var(--meta);
}

.crumbs a:hover {
  color: var(--bronze);
}

.crumbs span[aria-current] {
  color: var(--ink);
  font-weight: 600;
}

.page-hero {
  padding-block: 28px 8px;
}

.page-hero h1 {
  font-size: clamp(28px, 2.6vw + 16px, 44px);
  max-width: 22ch;
}

.page-hero .lead {
  max-width: 62ch;
  margin-top: 12px;
}

/* The calendar intro must not resize when the Latin font's 0 glyph loads. */
main:has(#kalendar) .page-hero .lead {
  max-width: 46.5rem;
}

.page-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

/* сетка карточек пород */
.breeds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.breedcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}

.breedcard__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.breedcard__meta {
  font-size: 13px;
  color: var(--meta);
}

.breedcard__text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body);
}

.breedcard .pill-row {
  margin-top: auto;
  padding-top: 10px;
}

/* простая контентная таблица */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.tbl th,
.tbl td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}

.tbl th {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--meta);
  background: var(--inset);
}

.tbl tr:last-child td {
  border-bottom: none;
}

.tbl--wrap {
  display: block;
  overflow-x: auto;
}

/* текстовые статьи-блоки */
.prose {
  max-width: 72ch;
  line-height: 1.7;
}

/* div.prose-обёртки (о-проекте, новости, terms): вертикальный ритм детей,
   который раньше давал flex-gap; у p/ul/ol margin обнулён глобальным резетом */
div.prose > * + * {
  margin-top: 14px;
}

/* во flex-версии gap 14px складывался с margin-top у h2 — сохраняем 28px */
div.prose > * + h2 {
  margin-top: 28px;
}

.prose h2 {
  font-size: var(--fs-h2-sm);
  margin-top: 14px;
}

.prose h3 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 8px;
}

.prose ul,
.prose ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 22px;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li::marker {
  color: var(--bronze);
  font-weight: 700;
}

/* сетка «карточки в два столбца» */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.infocard {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.infocard__title {
  font-size: 17px;
  font-weight: 700;
}

.infocard__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--body);
}

@media (max-width: 1023px) {
  .breeds,
  .grid3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .breeds,
  .grid2,
  .grid3 {
    grid-template-columns: 1fr;
  }

  .page-hero {
    padding-block: 18px 4px;
  }
}

/* ==========================================================================
   23. Аккаунт, комментарии, тосты, новости, видео (формат amivisible/zaezzd)
   ========================================================================== */

/* тосты */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
}

.toast {
  background: var(--dark);
  color: var(--on-dark);
  font-size: 14.5px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  box-shadow: 0 12px 32px rgb(20 17 14 / 30%);
  transition: opacity 0.25s ease;
  max-width: min(92vw, 480px);
}

/* кнопка аккаунта в шапке */

/* страница входа */
.auth {
  max-width: 460px;
  margin-inline: auto;
  padding-block: 40px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth__card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth__lead {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body);
}

.auth__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth__code {
  font-size: 26px;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.auth__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.auth__resend {
  border: none;
  background: none;
  color: var(--bronze);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
}

.auth__resend:disabled {
  color: var(--meta);
  cursor: default;
}

.auth__note {
  font-size: 13px;
  color: var(--meta);
  text-align: center;
  line-height: 1.5;
}

.auth__devhint {
  font-size: 12.5px;
  color: var(--warn-ink);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-field);
  padding: 10px 12px;
  line-height: 1.55;
}

/* личный кабинет */
.lk {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 760px;
}

.lk__card {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lk__title {
  font-size: 18px;
  font-weight: 700;
}

.lk__profile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
}

.lk__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: inherit;
}

.lk__row:last-child { border-bottom: none; }

.lk__row-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.lk__row:hover { text-decoration: none; }
a.lk__row:hover .lk__row-main { color: var(--bronze); }

.lk__row-meta {
  flex: none;
  font-size: 12.5px;
  color: var(--meta);
  font-variant-numeric: tabular-nums;
}

.lk__danger {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* комментарии */
.cmts {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
}

.cmts__head h2 {
  font-size: var(--fs-h2-sm);
}

.cmts__n {
  color: var(--bronze);
  font-variant-numeric: tabular-nums;
}

.cmts__empty {
  color: var(--meta);
  font-size: 14.5px;
}

.cmts__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cmt {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cmt--child {
  border: none;
  border-left: 2px solid var(--line);
  border-radius: 0;
  padding: 8px 0 4px 14px;
  background: none;
}

.cmt__kids {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.cmt__head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.cmt__ava {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bronze-soft);
  color: var(--bronze-ink);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.cmt__author { font-weight: 700; font-size: 14.5px; }
.cmt__date { font-size: 12.5px; color: var(--meta); }
.cmt__you { font-size: 11px; }

.cmt__body {
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.cmt__deleted {
  font-size: 13.5px;
  color: var(--meta);
  font-style: italic;
}

.cmt__act {
  display: flex;
  gap: 14px;
  align-items: center;
}

.cmt__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  color: var(--meta);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 0;
}

.cmt__btn:hover { color: var(--bronze); }
.cmt__like.is-on { color: var(--alarm-mark); }
.cmt__del:hover { color: var(--alarm-mark); }

.cmt__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cmt__ta {
  resize: vertical;
  min-height: 76px;
  line-height: 1.55;
  padding-top: 12px;
}

.cmt__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.cmt__rules {
  font-size: 12.5px;
  color: var(--meta);
  line-height: 1.5;
  max-width: 46ch;
}

.cmt__login {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 18px;
  border: 1px dashed var(--line-dashed);
  border-radius: var(--r-card);
  font-size: 14.5px;
  color: var(--body);
}

.cmt__reply { margin-top: 6px; }

/* новости и события */
.newsline {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.newscard {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  padding: 20px;
  color: inherit;
}

.newscard:hover { text-decoration: none; border-color: var(--bronze-lift); }
.newscard:hover .newscard__title { color: var(--bronze); }

.newscard__date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--bronze-ink);
}

.newscard__day { font-size: 26px; font-weight: 800; line-height: 1.1; }
.newscard__mon { font-size: 13px; color: var(--meta); }

.newscard__body { min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 6px; }
.newscard__title { font-size: 18px; font-weight: 700; line-height: 1.3; }
.newscard__text { font-size: 14.5px; color: var(--body); line-height: 1.55; }

.newscard__meta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--meta);
}

/* видео-фасад: ноль запросов до клика */
.videobox {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--dark);
  cursor: pointer;
  padding: 0;
  display: block;
  width: 100%;
}

.videobox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity var(--dur), transform 0.4s ease;
}

.videobox:hover img { opacity: 1; transform: scale(1.02); }

.videobox__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.videobox__play::after {
  content: "";
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgb(255 255 255 / 92%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5.5v13l11-6.5z" fill="%23c14e2a"/></svg>') center / 26px no-repeat;
  box-shadow: 0 10px 30px rgb(20 17 14 / 35%);
  transition: transform var(--dur);
}

.videobox:hover .videobox__play::after { transform: scale(1.06); }

.videobox__label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 1;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-shadow: 0 1px 6px rgb(0 0 0 / 60%);
  text-align: left;
  padding-right: 12px;
}

.videobox__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.videobox__src {
  font-size: 12px;
  color: var(--meta);
  margin-top: 8px;
}

@media (max-width: 767px) {
  .newscard { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .newscard__day { font-size: 21px; }
  .lk__profile { grid-template-columns: 1fr; }
  .toast-host { bottom: 96px; }
}

/* ==========================================================================
   ПЕРЕУСТРОЙСТВО СТРУКТУРЫ — 2026-08
   Одна строка навигации с мега-меню вместо двух рядов и четырёх
   несогласованных меню. Плитки-двери на главной. Карточки пород и
   питомников. Сквозной блок «Дальше».
   ========================================================================== */

:root {
  --header-h: 64px;
}

/* ------------------------------------------- 4. Главная: плитки-двери */
.doors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.door {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 216px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  background: var(--card);
  color: var(--ink);
  overflow: hidden;
  transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur);
}

.door:hover,
.door:focus-visible {
  transform: translateY(-3px);
  border-color: var(--line-photo);
  box-shadow: 0 16px 34px rgb(36 29 23 / 12%);
  text-decoration: none;
}

.door__art {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.door__art svg {
  width: 100%;
  height: 100%;
  display: block;
}

.door__body {
  position: relative;
  z-index: 1;
}

.door__name {
  display: block;
  font-size: clamp(18px, 1vw + 15px, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.door__hint {
  display: block;
  margin-top: 5px;
  font-size: 13.6px;
  line-height: 1.35;
  color: var(--body);
}

.door__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bronze-ink);
}

.door--alarm {
  border-color: var(--alarm-line);
}

.door--alarm .door__go {
  color: var(--alarm-ink);
}

/* --------------------------------------------- 5. Счётчики базы РКФ */
.counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.count {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 22px;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--r-block);
  background: var(--dark-2);
  color: var(--on-dark);
  transition: background var(--dur), border-color var(--dur);
}

.count:hover,
.count:focus-visible {
  background: var(--dark-3);
  border-color: var(--gold-line);
  text-decoration: none;
}

.count__n {
  font-size: clamp(30px, 2.6vw + 18px, 46px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--gold-dim);
}

.count__t {
  font-size: 16px;
  font-weight: 600;
}

.count__h {
  font-size: 13.4px;
  line-height: 1.4;
  color: var(--on-dark-3);
}

/* ------------------------------------------------- 6. Карточки пород */
.breedgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.breedtile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--ink);
  overflow: hidden;
  transition: transform var(--dur), box-shadow var(--dur);
}

.breedtile:hover,
.breedtile:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgb(36 29 23 / 11%);
  text-decoration: none;
}

.breedtile__art {
  aspect-ratio: 4 / 3;
  background: var(--inset);
  /* Обрезаем то, что не влезло в слот: пропорции снимков разные, и без
     этого высокий кадр вылезал бы за скруглённый угол плитки. */
  overflow: hidden;
}

.breedtile__art svg {
  width: 100%;
  height: 100%;
  display: block;
}

.breedtile__body {
  padding: 12px 14px 14px;
}

.breedtile__name {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.25;
}

.breedtile__meta {
  display: block;
  margin-top: 4px;
  font-size: 12.8px;
  color: var(--meta);
}

/* ------------------------------------------ 7. Карточка питомника */
.kennelcard {
  display: flex;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--ink);
  transition: box-shadow var(--dur), border-color var(--dur);
}

.kennelcard:hover,
.kennelcard:focus-visible {
  border-color: var(--line-photo);
  box-shadow: 0 10px 24px rgb(36 29 23 / 10%);
  text-decoration: none;
}

.kennelcard__logo {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--inset);
  object-fit: cover;
  overflow: hidden;
}

.kennelcard__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--on-bronze);
  background: var(--bronze);
  letter-spacing: -0.02em;
}

.kennelcard__body {
  min-width: 0;
}

.kennelcard__name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.kennelcard__meta {
  display: block;
  margin-top: 3px;
  font-size: 13.2px;
  color: var(--meta);
}

.kennelcard__breeds {
  display: block;
  margin-top: 6px;
  font-size: 13.2px;
  line-height: 1.4;
  color: var(--body);
}

.kennelgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

/* профиль питомника */
.profile {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 22px;
  align-items: start;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  background: var(--card);
}

.profile__logo {
  width: 132px;
  height: 132px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--inset);
  object-fit: cover;
  overflow: hidden;
}

.profile__logo.kennelcard__initials {
  font-size: 46px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--line);
  overflow: hidden;
}

.fact {
  padding: 13px 16px;
  background: var(--card);
}

.fact__k {
  display: block;
  font-size: 12.4px;
  color: var(--meta);
}

.fact__v {
  display: block;
  margin-top: 2px;
  font-size: 15.5px;
  font-weight: 600;
}

/* ---------------------------------------------- 8. Блок «Дальше» */
.next {
  margin-block: 34px 6px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  background: var(--inset);
}

.next__title {
  display: block;
  margin-bottom: 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--meta);
}

.next__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

.next__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  color: var(--ink);
}

.next__item:hover,
.next__item:focus-visible {
  border-color: var(--bronze);
  text-decoration: none;
}

.next__item .i {
  flex: none;
  margin-top: 2px;
  color: var(--bronze);
}

.next__name {
  display: block;
  font-size: 14.6px;
  font-weight: 600;
  line-height: 1.3;
}

.next__hint {
  display: block;
  margin-top: 1px;
  font-size: 12.8px;
  color: var(--meta);
}

/* -------------------------------------------- 9. Подразделы раздела */
.subgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.subcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--ink);
  overflow: hidden;
  transition: transform var(--dur), box-shadow var(--dur);
}

.subcard:hover,
.subcard:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgb(36 29 23 / 11%);
  text-decoration: none;
}

.subcard__art {
  aspect-ratio: 16 / 7;
}

.subcard__art svg {
  width: 100%;
  height: 100%;
  display: block;
}

.subcard__body {
  padding: 14px 16px 16px;
}

.subcard__name {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.25;
}

.subcard__hint {
  display: block;
  margin-top: 4px;
  font-size: 13.6px;
  line-height: 1.4;
  color: var(--body);
}

/* --------------------------------------------- 10. Витрина инструментов */
.toolgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

/* ----------------------------------------------- 11. Страница поиска */
.results {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--ink);
}

.result:hover,
.result:focus-visible {
  border-color: var(--bronze);
  text-decoration: none;
}

.result__k {
  display: inline-block;
  margin-bottom: 4px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--inset);
  font-size: 11.6px;
  font-weight: 600;
  color: var(--meta);
}

.result__t {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
}

.result__h {
  display: block;
  margin-top: 3px;
  font-size: 13.6px;
  color: var(--body);
}

.results__empty {
  padding: 30px 22px;
  border: 1px dashed var(--line-dashed);
  border-radius: var(--r-block);
  text-align: center;
  color: var(--meta);
}

/* ------------------------------------------------------ 12. Адаптив */

@media (max-width: 1023px) {
  :root {
    --header-h: 62px;
  }

  .profile {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
  }

  .profile__logo {
    width: 96px;
    height: 96px;
  }
}

@media (max-width: 767px) {
  :root {
    --header-h: 60px;
  }

  .counts {
    grid-template-columns: 1fr;
  }

  .profile {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .next {
    padding: 16px;
  }
}

@media (max-width: 400px) {

  .breedgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   СИСТЕМА БЛОКОВ — вёрстка кирпичей из scripts/seo/blocks.py
   Ими набраны все содержательные подстраницы разделов. Без этих правил
   шаги нумеровались дважды, таблицы рвали мобильную вёрстку, а карточки
   склеивались в один текстовый абзац.
   ========================================================================== */

/* ------------------------------------------------------------- 1. Проза */
.prose {
  max-width: 68ch;
  margin: 0 0 14px;
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--body);
}

.prose:last-child {
  margin-bottom: 0;
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------------------------------------------------------- 2. Шаги */
.steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 76ch;
  margin: 0;
  padding: 0;
  /* Свой номер в .step__n — маркер списка убираем, иначе «1. 1 Шаг» */
  list-style: none;
  counter-reset: none;
}

.step {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

.step__n {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--bronze-soft);
  color: var(--bronze-ink);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.step__body {
  display: block;
  min-width: 0;
}

.step__name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.step__text {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--body);
}

/* ------------------------------------------------------- 3. Чек-листы */
.ticks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 76ch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tick {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border: 1px solid var(--ok-line);
  border-radius: var(--r-field);
  background: var(--ok-bg);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
}

.tick .i {
  flex: none;
  margin-top: 2px;
  color: var(--ok-mark);
}

/* -------------------------------------------- 4. Тревожный блок */
.alarm-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 76ch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alarm-list > li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 16px;
  border: 1px solid var(--alarm-line);
  border-radius: var(--r-field);
  background: var(--alarm-bg);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--alarm-ink);
}

.alarm-list .i {
  flex: none;
  margin-top: 2px;
  color: var(--alarm-mark);
}

.alarm-list strong {
  color: var(--alarm-ink);
  font-weight: 700;
}

.alarm__note {
  max-width: 72ch;
  margin: 12px 0 0;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--meta);
}

/* --------------------------------------------------------- 5. Таблицы */
.table-wrap {
  /* Горизонтальная прокрутка вместо разъехавшейся страницы: таблица
     «продукт / можно / комментарий» на телефон не помещается никогда. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

.grid {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.grid th,
.grid td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}

.grid thead th {
  position: sticky;
  top: 0;
  background: var(--inset);
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.grid tbody tr:last-child th,
.grid tbody tr:last-child td {
  border-bottom: none;
}

.grid tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--inset) 45%, transparent);
}

.grid td:first-child {
  font-weight: 600;
  color: var(--ink);
}

.table-note {
  max-width: 72ch;
  margin: 11px 0 0;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--meta);
}

/* ----------------------------------------------------- 6. Мини-карточки */
.minicards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.minicard {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--ink);
  transition: border-color var(--dur), box-shadow var(--dur);
}

a.minicard:hover,
a.minicard:focus-visible {
  border-color: var(--bronze);
  box-shadow: 0 10px 22px rgb(36 29 23 / 9%);
  text-decoration: none;
}

.minicard b {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
}

.minicard span {
  font-size: 13.4px;
  line-height: 1.45;
  color: var(--meta);
}

.minicard--flat {
  background: var(--inset);
  border-style: dashed;
  border-color: var(--line-dashed);
}

/* --------------------------------------------- 7. Врезка с инструментом */
.toolbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 20px 22px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-block);
  background: linear-gradient(180deg, var(--warn-bg), var(--card) 78%);
  color: var(--ink);
  transition: box-shadow var(--dur);
}

.toolbox:hover,
.toolbox:focus-visible {
  box-shadow: 0 14px 30px rgb(36 29 23 / 12%);
  text-decoration: none;
}

.toolbox__body {
  min-width: 0;
  flex: 1 1 260px;
}

.toolbox__name {
  display: block;
  font-size: clamp(17px, 0.7vw + 15px, 20px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.toolbox__hint {
  display: block;
  margin-top: 4px;
  max-width: 60ch;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--body);
}

.toolbox__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 11px 18px;
  border-radius: var(--r-field);
  background: var(--bronze);
  color: var(--on-bronze);
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}

.toolbox:hover .toolbox__cta {
  background: var(--bronze-ink);
}

/* ---------------------------------------------------- 8. Вопрос-ответ */
.qas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 80ch;
}

.qa {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

.qa > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.qa > summary::-webkit-details-marker {
  display: none;
}

.qa > summary .i {
  flex: none;
  color: var(--meta);
  transition: transform var(--dur);
}

.qa[open] > summary .i {
  transform: rotate(180deg);
}

.qa > p {
  margin: 0;
  padding: 0 18px 16px;
  max-width: 72ch;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--body);
}

/* --------------------------------------------- 9. Карточки материалов */
.post__art {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--inset);
}

.post__art svg,
.post__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post__kicker {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bronze-ink);
}

.post__name {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.post__hint {
  display: block;
  margin-top: 5px;
  font-size: 13.6px;
  line-height: 1.45;
  color: var(--body);
}

/* ------------------------------------------- 10. Инструмент на странице */
.toolhost {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  background: var(--card);
  box-shadow: 0 12px 30px rgb(36 29 23 / 7%);
}

.toolhost > .tooldlg__body {
  padding: 0;
}

/* календарь прививок */
.vac {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}

.vac__list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--line);
  overflow: hidden;
}

.vac__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  background: var(--card);
}

.vac__name {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--ink);
}
.vac__name b { display: block; margin-bottom: 3px; }
.vac__result { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 4px; }
.vac__state { font-size: var(--type-small, 13px); color: var(--meta); }
.vac__summary { margin: 0; color: var(--body); line-height: 1.5; }
.tool-error { margin: 8px 0; padding: 12px 14px; border-left: 3px solid #bf301c; border-radius: 6px; background: #fff2ee; color: #922416; line-height: 1.45; }
@media (max-width: 767px) {
  .vac__row { flex-direction: column; align-items: stretch; gap: 8px; }
  .vac__result { align-items: flex-start; }
}
@media print {
  body:has([data-vaccine]) .ch-header,
  body:has([data-vaccine]) .ch-footer,
  body:has([data-vaccine]) .ch-bar,
  body:has([data-vaccine]) .ch-actionbar,
  body:has([data-vaccine]) .crumbs,
  body:has([data-vaccine]) [data-print] { display: none !important; }
  .vac__row { break-inside: avoid; }
  .vac .tooldlg__note { color: #222; }
}

.vac__date {
  flex: none;
  font-size: var(--fs-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--bronze-ink);
}

/* калькулятор возраста */
.agecalc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}

.agecalc__out {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-field);
  background: var(--inset);
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink);
  min-height: 52px;
}

.agecalc__out:empty {
  display: none;
}

/* --------------------------------------------- 11. Первый экран главной */
.hero--split {
  padding-block: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 44px);
}

.hero__lead {
  max-width: 60ch;
  margin: 12px 0 0;
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--body);
}

.search--hero {
  max-width: 680px;
  margin-top: 22px;
}

.hero__search,
.poisk__form {
  display: flex;
  gap: 10px;
}

.input--lg {
  flex: 1;
  min-height: 54px;
  font-size: 16.5px;
}

.doors__title {
  margin: 26px 0 12px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
}

/* ------------------------------------------ 12. Карточка инструмента */
.tool__body {
  display: block;
  min-width: 0;
}

.tool__name {
  display: block;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
}

.tool__hint {
  display: block;
  margin-top: 5px;
  font-size: 13.6px;
  line-height: 1.45;
  color: var(--body);
}

.tool__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bronze-ink);
}

a.tool {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  color: var(--ink);
  transition: transform var(--dur), box-shadow var(--dur);
}

a.tool:hover,
a.tool:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgb(36 29 23 / 11%);
  text-decoration: none;
}

/* --------------------------------------------------- 13. Тёмная секция */
.section--dark {
  background: var(--dark);
  color: var(--on-dark);
}

.section--dark h2 {
  color: var(--on-dark);
}

.section--dark .lead {
  color: var(--on-dark-3);
}

/* ------------------------------------------------- 14. Страница поиска */
.search--page {
  max-width: 720px;
  margin-bottom: 22px;
}

.results__count {
  margin: 0 0 12px;
  font-size: var(--fs-meta);
  color: var(--meta);
}

/* ------------------------------------------------------- 15. Остальное */
.breedtile--flat {
  border-style: dashed;
  border-color: var(--line-dashed);
  background: var(--inset);
}

.breedtile--flat .breedtile__name {
  color: var(--meta);
}

.profile__body {
  min-width: 0;
}

.profile__about {
  max-width: 68ch;
  margin: 14px 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--body);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

/* --------------------------------------------------------- 16. Адаптив */
@media (max-width: 767px) {
  .step {
    padding: 14px;
    gap: 11px;
  }

  .toolbox {
    padding: 16px;
  }

  .toolbox__cta {
    width: 100%;
    justify-content: center;
  }

  .poisk__form {
    flex-direction: column;
  }

  .toolhost {
    padding: 15px;
  }

  .minicards {
    grid-template-columns: 1fr;
  }

  .grid th,
  .grid td {
    padding: 10px 13px;
  }
}

/* ==========================================================================
   ПРАВКИ ПОСЛЕ ПРОВЕРКИ НА ЖИВОМ САЙТЕ
   ========================================================================== */

/* ---------------------------------------- счётчики базы РКФ: анимация */
.count__n {
  font-variant-numeric: tabular-nums;
  /* Ширина не прыгает, пока число досчитывается: без табличных цифр
     подпись под счётчиком дёргается на каждом кадре. */
}

.count[data-counting] .count__n {
  color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
  /* Досчёт — украшение. Если человек попросил систему не анимировать,
     число просто стоит на месте. */
  .count[data-counting] .count__n {
    color: var(--gold-dim);
  }
}

/* ------------------------------------ фото пород с Викисклада
   Блок фото на странице породы и снимки в плитках каталога.
   Пропорцию держит контейнер (aspect-ratio), а не картинка: снимки с
   Викисклада приезжают какого угодно формата, и без фиксированной рамки
   страница дёргалась бы на каждой загрузке. */
.breedphoto {
  max-width: 640px;
  margin: 20px 0 4px;
}

.breedphoto__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--inset);
}

/* Подпись — мелко, но читаемо: автор и лицензия обязательны по CC BY. */
.breedphoto__credit {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--meta);
}

.breedphoto__credit a {
  color: var(--meta);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Плитка каталога: фото занимает тот же слот 4:3, что и рисунок-заглушка.
   Пропорция задана самой картинке, а не только слоту вокруг неё. Со слотом
   одним это не работало: `height: 100%` разрешается в процент от высоты
   родителя, а та у него сама выводится из aspect-ratio и содержимого —
   определённой величины нет, и браузер откатывался к натуральному размеру
   файла. Слот раздувался под снимок, и каталог шёл ступеньками: при ширине
   196 px высоты выходили 269, 157, 147, 159 — у каждой породы своя, потому
   что снимки с Викисклада все разного формата. object-fit: cover при этом
   ничего не обрезал: коробка и так была подогнана под картинку. */
.breedtile__art img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}

/* Свёрнутый список источников в конце каталога: на плитках подписи
   не помещаются, а лицензии требуют назвать автора. */
.photocred {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

.photocred summary {
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.photocred__note {
  margin: 10px 0 0;
  font-size: 13.4px;
  color: var(--meta);
}

.photocred__list {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 13.4px;
  line-height: 1.7;
  color: var(--meta);
}

/* ==========================================================================
   РОДОСЛОВНЫЕ (/sobaki/)
   ==========================================================================

   Дерево предков — единственный блок на сайте, который принципиально не
   помещается в колонку текста: четыре поколения это тридцать карточек.
   Поэтому оно живёт в горизонтальной прокрутке и держит собственный ритм,
   а не растягивает сетку остальных страниц.

   Цвет в ячейке — подсказка, а не носитель смысла: пол читается из позиции
   в дереве (верхняя половина — отцовская линия), а повтор предка помечен
   буквой, которую видно и в чёрно-белой печати. */

.pedstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.pedstat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

.pedstat__num {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.pedstat__cap {
  font-size: 14px;
  font-weight: 600;
  color: var(--body);
}

.pedstat__hint {
  font-size: 13.4px;
  line-height: 1.55;
  color: var(--meta);
}

/* Уровень инбридинга: полоса слева. Само число остаётся графитовым —
   красная цифра читается как ошибка ввода, а не как характеристика собаки. */
.pedstat--low {
  border-left: 4px solid var(--ok-line);
}

.pedstat--medium {
  border-left: 4px solid var(--gold-line);
}

.pedstat--high {
  border-left: 4px solid var(--alarm-line);
}

.pedstat--unknown {
  border-left: 4px solid var(--line-dashed);
}

.ped {
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.ped__scroll-hint {
  margin: 0 0 12px;
}

.ped__grid {
  display: flex;
  gap: 10px;
  min-width: min-content;
}

.ped__col {
  display: grid;
  gap: 8px;
  flex: 1 0 190px;
  align-content: stretch;
}

.ped__colhead {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--meta);
}

.ped__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  position: relative;
}

.ped__cell--m {
  border-left-color: var(--gold-line);
}

.ped__cell--f {
  border-left-color: var(--bronze);
}

.ped__cell--thin {
  background: var(--inset);
}

.ped__cell--empty {
  background: transparent;
  border-style: dashed;
  border-left-style: dashed;
}

.ped__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  word-break: break-word;
}

a.ped__name {
  color: var(--bronze-ink);
  text-decoration: none;
}

a.ped__name:hover,
a.ped__name:focus-visible {
  text-decoration: underline;
}

.ped__meta {
  font-size: 12.4px;
  line-height: 1.4;
  color: var(--meta);
}

.ped__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-bottom: 2px;
  border-radius: var(--r-pill);
  background: var(--bronze);
  color: var(--on-bronze);
  font-size: 12px;
  font-weight: 700;
}

.ped__legend {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

.ped__legend h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.ped__legend-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--body);
}

.ped__legend-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ped__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* Кнопка-контур: у сайта есть заливка и есть обводка бронзой, но не было
   спокойного варианта для вторичного действия внутри блока. */
.btn--ghost {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
}

/* Ряд кнопок «поделиться». Своего вида у кнопок нет — берут готовый
   .btn--ghost, чтобы ряд не выбивался из остального интерфейса. Здесь
   только раскладка: перенос по строкам обязателен, на узком экране пять
   кнопок в строку не встают и распирали бы карточку вбок. */
.share {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.share__btn {
  flex: 0 1 auto;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--bronze);
  color: var(--bronze-ink);
}

.btn--sm {
  min-height: 36px;
  padding: 8px 14px;
  font-size: 14px;
}

/* ─── Список собак ───────────────────────────────────────────────── */
.dogs-freshness {
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow-wrap: anywhere;
}

.dogs-freshness p {
  margin: 0 0 8px;
}

.dogs-freshness ul {
  margin: 0 0 8px;
  padding-left: 20px;
}

.dogs-freshness li + li {
  margin-top: 8px;
}

.dogs-freshness p:last-child {
  margin-bottom: 0;
}

.doggrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.dogcard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}

.dogcard__name {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--bronze-ink);
  text-decoration: none;
}

.dogcard__name:hover,
.dogcard__name:focus-visible {
  text-decoration: underline;
}

.dogcard__meta {
  font-size: 13.6px;
  line-height: 1.5;
  color: var(--body);
}

.dogcard__tags {
  font-size: 12.8px;
  line-height: 1.5;
  color: var(--meta);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.field--grow {
  flex: 1 1 260px;
}

/* ─── Подбор пары ────────────────────────────────────────────────── */
.matingform {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.matingform__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.matingform__hits {
  display: grid;
  gap: 6px;
}

.matinghit {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: var(--card);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
}

.matinghit:hover,
.matinghit:focus-visible {
  border-color: var(--bronze);
}

.matingpick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--bronze);
  border-radius: var(--r-card);
  background: var(--bronze-soft);
}

.matingresult {
  margin-top: 22px;
}

.matingresult h3 {
  margin: 22px 0 4px;
  font-size: 18px;
}

@media (max-width: 767px) {
  .ped__col {
    flex-basis: 165px;
  }

  .pedstat__num {
    font-size: 26px;
  }
}

/* ── 27. События и итоги (news.js + scripts/seo/news.py) ─────────────── */
/* Видео-фасад без локального превью: карточки событий создаёт суточный
   агент, и картинок у него нет — вместо <img> тёмная подложка с лапой.
   Поведение то же: iframe youtube-nocookie появляется только по клику. */
.videobox__ph {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 82% 18%, rgb(193 78 42 / 32%), transparent 55%),
    radial-gradient(90% 80% at 15% 85%, rgb(193 78 42 / 18%), transparent 50%),
    var(--dark);
}

.videobox__ph::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 6%;
  width: 96px;
  height: 96px;
  opacity: 0.16;
  transform: rotate(-14deg);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="%23ffffff"><ellipse cx="12" cy="16.4" rx="5.4" ry="4.5"/><ellipse cx="8.7" cy="6.7" rx="2.25" ry="3.05"/><ellipse cx="15.3" cy="6.7" rx="2.25" ry="3.05"/><ellipse cx="4.3" cy="11.1" rx="2.05" ry="2.75"/><ellipse cx="19.7" cy="11.1" rx="2.05" ry="2.75"/></g></svg>') center / contain no-repeat;
}

/* Счётчик комментариев на карточках витрин: news.js открывает его,
   только когда в треде правда что-то есть. */
.newscard__meta [data-thread-count] { color: var(--meta); font-weight: 400; }

/* Long event names and breeds must wrap inside mobile news cards. */
.newscard__meta .pill { max-width:100%; white-space:normal; overflow-wrap:anywhere; }

/* ── 28. Перезагрузка: окна в Django на статических страницах ──────────
   «Щенки сейчас» и подписка на породу (scripts/seo/relaunch.py,
   catalog-widget.js, waitlist-form.js), кнопка «Это мой питомник» на
   карточке реестра. Карточки помётов — те же .card.puppy, что в каталоге
   Django: одинаковые, без выделений. */
.catalog-now__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}

.catalog-now__main {
  min-width: 0;
}

.catalog-now__list {
  min-height: 72px;
}

.catalog-now__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
}

.catalog-now__card {
  color: var(--ink);
}

.catalog-now__photo {
  border-bottom: 1px solid var(--line);
}

.catalog-now__nophoto {
  padding: 12px;
  font-size: 13px;
  color: var(--meta);
  text-align: center;
}

.catalog-now__badge {
  align-self: flex-start;
}

.catalog-now__avail {
  font-size: 14px;
  font-weight: 600;
  color: var(--ok-ink);
}

.catalog-now__avail--none {
  font-weight: 500;
  color: var(--meta);
}

.catalog-now__empty {
  padding: 20px;
  border: 1px dashed var(--line-dashed);
  border-radius: var(--r-card);
  background: var(--inset);
  color: var(--body);
  line-height: 1.5;
}

.catalog-now__more {
  margin-top: 14px;
  font-weight: 600;
}

.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: var(--r-block);
}

/* «Сообщить о помёте» (У0 модуля puppies): одна форма без списка рядом. */
.catalog-now--waitlist .waitlist-form {
  max-width: 560px;
}

.waitlist-form__title {
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.waitlist-form__text {
  color: var(--body);
  font-size: 15px;
  line-height: 1.5;
}

.waitlist-form__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--body);
  cursor: pointer;
}

.waitlist-form__consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--bronze);
}

.waitlist-form .btn {
  align-self: flex-start;
}

.waitlist-form .btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.claim-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  margin-top: 14px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-block);
  background: var(--inset);
}

.claim-box__text {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.claim-box__title {
  font-size: 16px;
  line-height: 1.3;
}

.claim-box__hint {
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
}

.claim-box__btn {
  flex: none;
}

@media (min-width: 1024px) {
  .catalog-now__layout {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

@media (max-width: 767px) {
  .waitlist-form {
    padding: 18px;
  }

  .waitlist-form .btn,
  .claim-box__btn {
    width: 100%;
  }

  .claim-box {
    padding: 16px;
  }
}

/* Кнопка подписки выключена в разметке, пока waitlist-form.js её не включит;
   «ждите» (progress) — только во время отправки. */
.waitlist-form:not([aria-busy]) .btn[disabled] {
  cursor: not-allowed;
}

/* ==== Породотека 2.0 ==== */
/* Всё ниже — правила 2.0 (задачи 18, 20, 21 плана запуска). Брейкпоинты — только B10. */

/* ==== 2.0 · Основа ==== */
/* Вид концепта 2.0 для всего сайта: классы артборда «Система»
   (handoff/porodoteka-2.0/tokens/components.css) и перевод старых классов —
   .section, .sec-head, .page-hero, .crumbs, .btn, .chip, .pill, .note, .card,
   .tbl, .input — на те же значения. Только токены, без сырых цветов.
   Шрифты: Onest — текст и интерфейс, Unbounded 600 — h1, h2 и цифры. */

/* ---- Типографика концепта */
.pp-display,
.pp-h1,
.pp-h2,
.pp-h3,
.pp-stat {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
}

.pp-display { font-size: var(--type-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
.pp-h1 { font-size: var(--type-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-display); }
.pp-h2 { font-size: var(--type-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-heading); }
.pp-h3 { font-size: var(--type-h3); line-height: 1.15; letter-spacing: var(--tracking-heading); }
.pp-stat { font-size: var(--type-stat); line-height: 1; letter-spacing: var(--tracking-heading); font-variant-numeric: tabular-nums; }
.pp-lead { margin: 0; font-size: var(--type-lead); line-height: var(--leading-body); color: var(--color-graphite); max-width: 62ch; }
.pp-caption { font-size: var(--type-caption); line-height: 1.45; color: var(--color-muted); }
.pp-eyebrow { font-size: var(--type-small); font-weight: 700; line-height: 1.3; color: var(--color-action-text); }

/* ---- Сетка и секции: контейнер 1376, поля 16–48, карточки auto-fit от 280 */
.pp-wrap {
  width: 100%;
  max-width: var(--layout-wrap);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.pp-section { padding-block: var(--space-8); }
.pp-section--sand { background: var(--color-sand); }
.pp-section--line { border-top: 1px solid var(--color-line); }

.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--layout-card-min), 100%), 1fr));
  gap: var(--space-4);
}

/* Заголовок секции: h2 слева, ссылка «Все … →» справа, перенос на телефоне. */
.pp-sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}

.pp-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--hit-min);
  color: var(--color-ink);
  font: 700 var(--type-ui)/1.2 var(--font-text);
  white-space: nowrap;
}

/* Герой: песочная секция, рубрика оранжевым текстом, Unbounded-заголовок,
   лид 19; справа — белая карточка с тенью (артборды Main, Library). */
.pp-hero {
  background: var(--color-sand);
  border-bottom: 1px solid var(--color-line);
}

.pp-hero__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 40px var(--space-7);
  max-width: var(--layout-wrap);
  margin-inline: auto;
  padding: 52px var(--layout-gutter) 56px;
}

.pp-hero__text {
  display: flex;
  flex: 1.15 1 560px;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.pp-hero__aside {
  display: flex;
  flex: 1 1 440px;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-block);
  background: var(--color-paper);
  box-shadow: var(--shadow-panel);
}

.pp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Цифры статистики: «219 пород с описаниями». */
.pp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.pp-stats__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pp-stats__label {
  color: var(--color-muted);
  font-size: var(--type-small);
  line-height: 1.35;
}

/* Плитка-значок 44 × 44 с тинтом и список-строки со стрелкой (как в
   артбордах телефона: белые строки на песке). */
.pp-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--color-sand);
  color: var(--color-ink);
}

.pp-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  overflow: hidden;
}

.pp-list > li + li {
  border-top: 1px solid var(--color-line);
}

.pp-list__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: 12px var(--space-4);
  color: var(--color-ink);
  font: 700 var(--type-body)/1.3 var(--font-text);
  text-decoration: none;
}

.pp-list__row::after {
  content: "→";
  margin-left: auto;
  color: var(--color-muted);
  font-weight: 600;
}

a.pp-list__row:hover {
  background: var(--color-sand);
  text-decoration: none;
}

/* ---- Ссылки в тексте: чернила и подчёркивание; карточки и меню — без него */
:where(p, dd, td, figcaption, .prose li, .note) > a:not([class]) {
  text-decoration: underline;
  text-decoration-color: var(--color-line-dashed);
  text-underline-offset: 3px;
}

:where(p, dd, td, figcaption, .prose li, .note) > a:not([class]):hover {
  text-decoration-color: currentColor;
}

/* ---- Старые классы в виде 2.0 */
.eyebrow {
  font-size: var(--type-small);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  color: var(--color-action-text);
}

.lead {
  font-size: var(--type-lead);
  line-height: var(--leading-body);
  color: var(--color-graphite);
}

.meta {
  font-size: var(--type-caption);
  color: var(--color-muted);
}

.num {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
}

/* Секции: ритм 72, чередование — песок, карточки на песке белые. */
.section {
  padding-block: var(--space-8);
}

.section--first {
  padding-top: var(--space-7);
}

.section--alt {
  background: var(--color-sand);
}

.section--alt .eyebrow:not(.eyebrow--gold) {
  color: var(--color-action-text);
}

.sec-head {
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
}

.sec-head__text {
  gap: var(--space-3);
}

.sec-head__more {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-min);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--color-ink);
  font: 700 var(--type-ui)/1.2 var(--font-text);
}

.sec-head__more:hover {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Крошки и шапка страницы: песочная полоса во всю ширину (Library, Catalog). */
.crumbs {
  gap: 4px 8px;
  padding-top: var(--space-5);
  font-size: var(--type-caption);
  line-height: 1.4;
  color: var(--color-muted);
}

.crumbs a {
  color: var(--color-muted);
}

.crumbs a:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

.crumbs span[aria-current] {
  color: var(--color-ink);
  font-weight: 600;
}

main > .wrap:has(> .page-hero) {
  max-width: none;
  padding-inline: max(var(--layout-gutter), calc((100% - var(--layout-wrap)) / 2 + var(--layout-gutter)));
  background: var(--color-sand);
  border-bottom: 1px solid var(--color-line);
}

main > .wrap:has(> .page-hero) + .wrap {
  margin-top: var(--space-6);
}

.page-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-block: var(--space-6) var(--space-7);
}

.page-hero h1 {
  max-width: 20ch;
  font-size: var(--type-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-display);
}

.page-hero .lead {
  max-width: 62ch;
  margin-top: 0;
}

.page-hero__cta {
  margin-top: var(--space-1);
  gap: var(--space-2);
}

/* Кнопки: пилюли. Оранжевая — только главное действие экрана
   ([data-main-action]), чёрный текст; прочие «primary» — чёрные. */
.btn {
  min-height: var(--control-h);
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 700 var(--type-ui)/1.2 var(--font-text);
  transition: filter var(--motion), background var(--motion), border-color var(--motion);
}

.btn:hover {
  filter: brightness(0.95);
}

.btn:focus-visible {
  outline: 3px solid var(--color-assistant);
  outline-offset: 2px;
}

.btn--primary,
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-ink);
  color: var(--color-paper);
}

.btn--primary[data-main-action],
.btn--primary[data-main-action]:hover,
.btn--primary[data-main-action]:focus-visible,
[data-main-action] .btn--primary,
[data-main-action] .btn--primary:hover,
[data-main-action] .btn--primary:focus-visible {
  background: var(--color-action);
  color: var(--color-on-action);
}

.btn--secondary,
.btn--ghost,
.btn--outline-bronze {
  border: 1px solid var(--color-line-strong);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: 600;
}

.btn--secondary:hover,
.btn--secondary:focus-visible,
.btn--ghost:hover,
.btn--ghost:focus-visible,
.btn--outline-bronze:hover,
.btn--outline-bronze:focus-visible {
  border-color: var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
  filter: none;
}

.btn--outline-ok {
  border: 1px solid var(--ok-line);
  background: var(--color-paper);
  color: var(--color-ok);
}

.btn--outline-ok:hover,
.btn--outline-ok:focus-visible {
  border-color: var(--color-ok);
  background: var(--color-ok-tint);
  filter: none;
}

@media (max-width: 767px) {
  .btn {
    min-height: var(--control-h-touch);
  }
}

/* Поля: скругление 12, контур — линия 2, в фокусе — чернила. */
.input,
.select {
  min-height: var(--control-h-touch);
  padding: 12px 16px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-field);
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-size: 16px;
}

.input:hover,
.select:hover {
  border-color: var(--color-muted);
}

.input:focus,
.select:focus {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 1px var(--color-ink);
}

.label {
  font-size: var(--type-caption);
  font-weight: 700;
  color: var(--color-graphite);
}

.field {
  gap: var(--space-2);
}

/* Чипы: контур, выбранный — чёрная обводка; метки-пилюли — статусы 2.0. */
.chip {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font: 600 var(--type-small)/1.2 var(--font-text);
}

.chip:hover,
.chip:focus-visible {
  border-color: var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
}

.chip[aria-current],
.chip[aria-pressed="true"],
.chip[aria-selected="true"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
}

.pill {
  padding: 5px 11px;
  font: 700 var(--type-caption)/1.2 var(--font-text);
}

.pill--bronze {
  background: var(--color-action-tint);
  color: var(--color-action-text);
}

.pill--ok {
  background: var(--color-ok-tint);
  color: var(--color-ok);
}

.pill--plain {
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  color: var(--color-graphite);
}

/* Плашки: тинт роли без рамки, скругление 16. */
.note {
  padding: 12px 14px;
  border-radius: var(--radius-tile);
  font-size: var(--type-small);
  line-height: 1.5;
}

.note--warn {
  border: 0;
  background: var(--color-warn-tint);
  color: var(--color-warn);
}

.note--ok {
  border: 0;
  background: var(--color-ok-tint);
  color: var(--color-ok);
}

/* Карточки: линия, скругление 22, при наведении −3 px и тень. */
.card,
.minicard,
.subcard,
.kennelcard,
.tool {
  border-color: var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}

.card--block {
  border-radius: var(--radius-block);
}

a.card,
a.minicard,
a.subcard,
a.kennelcard,
a.tool,
a.newscard {
  transition: transform var(--motion), box-shadow var(--motion);
}

a.card:hover,
a.minicard:hover,
a.subcard:hover,
a.kennelcard:hover,
a.tool:hover,
a.newscard:hover {
  border-color: var(--color-line);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  text-decoration: none;
}

.infocard {
  padding: 20px;
}

.infocard__title {
  font: 800 var(--type-title)/1.25 var(--font-text);
}

.infocard__text {
  font-size: var(--type-small);
  color: var(--color-graphite);
}

.toolbox {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-sand);
}

/* Блок «Дальше» внизу страниц: песочная плитка, белые ссылки-карточки. */
.next {
  border-color: transparent;
  border-radius: var(--radius-block);
  background: var(--color-sand);
}

.next__title {
  color: var(--color-ink);
  font: 800 var(--type-ui)/1.3 var(--font-text);
  letter-spacing: 0;
  text-transform: lowercase;
}

.next__title::first-letter {
  text-transform: uppercase;
}

.next__item {
  border-radius: var(--radius-tile);
}

.next__item:hover,
.next__item:focus-visible {
  border-color: var(--color-ink);
}

.next__item .i {
  color: var(--color-ink);
}

/* Таблицы: шапка песком, подписи без капслока. */
.tbl,
.table-wrap {
  border-color: var(--color-line);
  border-radius: var(--radius-card);
}

.tbl th,
.grid thead th {
  background: var(--color-sand);
  color: var(--color-muted);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.grid tbody tr:nth-child(even) {
  background: transparent;
}

/* Текст материала: 17/1,55, подзаголовки — Unbounded. */
.prose {
  line-height: var(--leading-body);
}

.prose h2 {
  font-size: clamp(22px, 1.6vw + 12px, 30px);
  line-height: 1.15;
}

.prose li::marker {
  color: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
  a.card,
  a.minicard,
  a.subcard,
  a.kennelcard,
  a.tool,
  a.newscard,
  .btn {
    transition: none;
  }

  a.card:hover,
  a.minicard:hover,
  a.subcard:hover,
  a.kennelcard:hover,
  a.tool:hover,
  a.newscard:hover {
    transform: none;
  }
}
/* Выпадающие списки — как поля: без системного вида, своя стрелка
   (на macOS и iOS системный select серый и ниже соседних полей). */
select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  appearance: none;
  min-height: var(--control-h-touch);
  padding: 12px 44px 12px 16px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-field);
  background: var(--color-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111216' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 16px center / 16px 16px;
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.25;
  cursor: pointer;
}

select:not([multiple]):not([size]):hover {
  border-color: var(--color-muted);
}

select:not([multiple]):not([size]):focus-visible {
  outline: none;
  border-color: var(--color-ink);
  box-shadow: 0 0 0 1px var(--color-ink);
}

select:not([multiple]):not([size]):disabled {
  cursor: default;
  opacity: .6;
}

/* Плитки-ссылки (.link-box): как поля 2.0 — линия, чернила, перенос по центру. */
.link-box {
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-field);
  color: var(--color-ink);
  font: 600 var(--type-ui)/1.3 var(--font-text);
  text-align: center;
}

.link-box:hover,
.link-box:focus-visible {
  border-color: var(--color-ink);
  color: var(--color-ink);
}

/* Песочная секция последней перед песочным подвалом — без белой полосы. */
main:has(> :last-child:is(.section--alt, .pp-section--sand)) + .ch-footer {
  margin-top: 0;
}

/* Мини-карточки по 3, 6, 9 — рядами по три, без полупустого ряда. */
@media (min-width: 768px) {
  .minicards:has(> :nth-child(3):last-child),
  .minicards:has(> :nth-child(6):last-child),
  .minicards:has(> :nth-child(9):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* .grid3 из трёх карточек на планшете остаётся в ряд, а не 2 + 1. */
@media (min-width: 768px) {
  .grid3:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* No-fill geometry belongs to monetization.css. A slot already reached by
   the reader keeps a stable editorial fallback; only unseen slots below the
   viewport may collapse. */

/* Телефон: ритм секций 48 вместо 72 — меньше пустоты между блоками. */
@media (max-width: 767px) {
  .section,
  .pp-section {
    padding-block: var(--space-7);
  }

  /* Место под нижнюю панель — внутри песочного подвала, а не белой
     полосой под ним, когда панель спрятана при прокрутке. */
  body:has(.ch-bar):has(> .ch-footer) {
    padding-bottom: 0;
  }

  body:has(.ch-bar) > .ch-footer {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* Крошка «‹ Главная» — зона нажатия 44 без сдвига вёрстки. */
  .crumbs a {
    display: inline-block;
    padding-block: 13px;
    margin-block: -13px;
  }
}
/* ==== /2.0 · Основа ==== */

/* ---------------------------------------------------- 2.0 · Компоненты */
/* Из handoff/porodoteka-2.0/tokens/components.css: оранжевая кнопка — одна
   на экран и только с чёрным текстом; чёрная — подтверждение. */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-h); padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 700 var(--type-ui)/1 var(--font-text); text-decoration: none; cursor: pointer;
  transition: filter var(--motion), background var(--motion);
}
.pp-btn:hover { filter: brightness(0.95); text-decoration: none; }
.pp-btn:focus-visible { outline: 3px solid var(--color-assistant); outline-offset: 2px; }
.pp-btn--action { background: var(--color-action); color: var(--color-on-action); }
.pp-btn--ink { background: var(--color-ink); color: var(--color-paper); }
.pp-btn--outline { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-line-strong); font-weight: 600; }
@media (max-width: 767px) {
  .pp-btn { min-height: var(--control-h-touch); }
}

.pp-chip {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill);
  background: transparent; color: var(--color-ink); font: 600 var(--type-small)/1 var(--font-text);
  cursor: pointer;
}
.pp-chip:hover { border-color: var(--color-ink); }
.pp-chip[aria-pressed="true"], .pp-chip[aria-checked="true"] { border-color: var(--color-ink); background: var(--color-paper); }

.pp-urgent {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px;
  background: var(--color-alarm-tint); color: var(--color-alarm-ink); font-size: var(--type-caption); line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .pp-btn { transition: none; }
}

.pp-btn--alarm { background: var(--color-paper); color: var(--color-alarm); border-color: var(--color-alarm-line); }
.pp-chip--solid[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }

/* Статусы: всегда словом, цвет только помогает. */
.pp-status {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: var(--radius-pill);
  font: 700 var(--type-caption)/1.2 var(--font-text); white-space: nowrap;
}
.pp-status--free { color: var(--color-ok); background: var(--color-ok-tint); }
.pp-status--reserve { color: var(--color-warn); background: var(--color-warn-tint); }
.pp-status--waitlist { color: var(--color-waitlist); background: var(--color-waitlist-tint); }
.pp-status--stays { color: var(--color-graphite); background: var(--color-tile); }
.pp-status--due { color: var(--color-alarm); background: var(--color-alarm-tint); }

/* Метки факта: «✓ Проверено 14.10», «◐ На проверке», «Со слов …», «Не указано». */
.pp-fact {
  display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px;
  border-radius: var(--radius-pill); font: 700 var(--type-micro)/1.2 var(--font-text);
}
.pp-fact--checked { color: var(--color-ok); background: var(--color-ok-tint); }
.pp-fact--pending { color: var(--color-warn); background: var(--color-warn-tint); }
.pp-fact--said,
.pp-fact--unknown { color: var(--color-graphite); border: 1px dashed var(--color-line-dashed); background: transparent; }

/* Карточка: линия, скругление 22, внутри 20; ссылка-карточка поднимается. */
.pp-card {
  display: flex; flex-direction: column; gap: var(--space-3); padding: 20px;
  border: 1px solid var(--color-line); border-radius: var(--radius-card);
  background: var(--color-paper); color: inherit; text-decoration: none;
  transition: transform var(--motion), box-shadow var(--motion);
}
a.pp-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); text-decoration: none; }
.pp-card--sand { border-color: transparent; background: var(--color-sand); }
.pp-card__photo { aspect-ratio: 4 / 3; border-radius: var(--radius-tile); overflow: hidden; background: var(--color-tile); }
.pp-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-card__title { margin: 0; font: 800 var(--type-title)/1.25 var(--font-text); color: var(--color-ink); }
.pp-card__text { margin: 0; color: var(--color-graphite); font-size: var(--type-small); line-height: 1.5; }
.pp-card__meta { margin-top: auto; color: var(--color-muted); font-size: var(--type-caption); }

/* Реклама: пунктирная рамка и подпись «Реклама · рекламодатель · ERID». */
.pp-ad { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px dashed var(--color-line-dashed); border-radius: 18px; }
.pp-ad__label { font-size: var(--type-micro); color: var(--color-muted); }
.pp-ad__why { font-size: var(--type-micro); color: var(--color-muted); text-decoration: underline; }

/* Поле запроса: чёрная обводка, кнопка внутри. */
.pp-field {
  display: flex; align-items: center; gap: var(--space-3); padding: 6px 6px 6px 16px;
  border: 1.5px solid var(--color-ink); border-radius: var(--radius-card); background: var(--color-paper);
}
.pp-field input,
.pp-field textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px/1.4 var(--font-text); color: var(--color-ink); }
.pp-field input::placeholder,
.pp-field textarea::placeholder { color: var(--color-muted); opacity: 1; }
.pp-field:focus-within { box-shadow: 0 0 0 3px var(--color-line); }

@media (prefers-reduced-motion: reduce) {
  .pp-card { transition: none; }
  a.pp-card:hover { transform: none; }
}

/* ------------------------------------------------------- 2.0 · Каркас */
/* Шапка, панели разделов, диалог поиска, лист «Меню», подвал, нижняя
   панель и панель действия (scripts/seo/chrome.py, site/assets/js/chrome.js).
   Вид — артборды Main и Library концепта 2.0: белая шапка с линией, логотип
   «[П]ородотека» высотой 30, пункты-пилюли (активный — песок), круглые
   кнопки поиска и «Меню», контурная «Войти»; песочный подвал с логотипом.
   Ширины — B10: ≥1360 поле поиска 280; 1200–1359 значок поиска;
   960–1199 пять пунктов и «Ещё», от логотипа остаётся знак;
   <960 шапка 56 и «Меню» с подписью; <768 нижняя панель. */
.ch-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-text);
  /* Панели выходят за нижний край шапки. В Safari overflow-x: clip
     обрезает их целиком, хотя overflow-y остаётся visible. */
  overflow: visible;
  transition: transform var(--motion);
}

.ch-utility__bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-5);
  max-width: var(--layout-wrap);
  min-height: 32px;
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
  background: var(--color-sand);
  font: 600 var(--type-caption)/1.2 var(--font-text);
}

.ch-utility-link {
  color: var(--color-graphite);
  text-decoration: none;
}

.ch-utility-link:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

.ch-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: var(--layout-wrap);
  min-height: 72px;
  margin: 0 auto;
  padding-inline: var(--layout-gutter);
}

/* Логотип: высота 30 на компьютере, на телефоне — по ширине экрана. */
.ch-logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  margin-right: var(--space-3);
  padding: 10px 0;
  color: var(--color-ink);
}

.ch-logo img {
  display: block;
  width: auto;
  max-width: none;
  height: 30px;
}

/* Пункты не сжимаются — уступает поле поиска. */
.ch-nav {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  gap: 2px;
}

/* Пункт — пилюля: название ведёт в раздел, шеврон открывает панель. */
.ch-item {
  display: flex;
  flex: none;
  align-items: center;
  border-radius: var(--radius-pill);
  transition: background var(--motion);
}

.ch-item:hover,
.ch-item[data-open],
.ch-item[aria-current="true"] {
  background: var(--color-sand);
}

/* Кегль 14: шесть пунктов с шевронами, поиск и «Войти» в одной строке
   до 1440 px (у концепта пять пунктов без шевронов — 15). */
.ch-item__link {
  padding: 12px 1px 12px 10px;
  color: var(--color-ink);
  font: 600 var(--type-small)/1.2 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
}

.ch-item__link:hover {
  color: var(--color-ink);
  text-decoration: none;
}

.ch-item__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 22px;
  min-height: var(--hit-min);
  padding: 0 7px 0 1px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-muted);
  font: 600 var(--type-ui)/1 var(--font-text);
  cursor: pointer;
}

.ch-item__chev:hover {
  color: var(--color-ink);
}

.ch-item__chev svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform var(--motion);
}

.ch-item__chev[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.ch-item__chev:focus-visible,
.ch-search-open:focus-visible,
.ch-menu-open:focus-visible,
.ch-close:focus-visible,
.ch-bar__cell:focus-visible,
.ch-link:focus-visible,
.ch-avatar:focus-visible {
  outline: 3px solid var(--color-assistant);
  outline-offset: 2px;
}

.ch-item__more {
  padding: 0 10px 0 12px;
  color: var(--color-ink);
}

.ch-item--more {
  display: none;
}

/* Панель раздела: во всю ширину под шапкой, колонки как в подвале. */
.ch-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 61;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-paper);
  box-shadow: var(--shadow-pop);
}

.ch-panel[hidden] {
  display: none;
}

.ch-panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5) var(--space-6);
  max-width: var(--layout-wrap);
  margin: 0 auto;
  padding: 28px var(--layout-gutter) 36px;
}

.ch-panel__title {
  margin: 0 0 var(--space-2);
  color: var(--color-muted);
  font: 700 var(--type-caption)/1.3 var(--font-text);
}

.ch-panel ul,
.ch-menu ul,
.ch-footer ul,
.ch-account-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ch-panel li a {
  display: block;
  padding: 7px 0;
  color: var(--color-ink);
  font: 500 var(--type-ui)/1.35 var(--font-text);
  text-decoration: none;
}

.ch-panel li a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ch-panel li a.pp-urgent {
  display: flex;
  margin: 4px 0;
  padding: 10px 12px;
  font-weight: 700;
}

.ch-panel--more .ch-panel__grid {
  grid-template-columns: minmax(200px, 280px);
  justify-content: end;
}

/* Поиск в строке, значок поиска, «Меню», «Закрыть». */
.ch-search,
.ch-search-dialog__search,
.ch-menu__search {
  position: relative;
}

/* Поле поиска — до 280 px, уступает место пунктам (не уже 180). */
.ch-search {
  display: none;
  flex: 0 1 280px;
  min-width: 180px;
}

.ch-search input {
  width: 100%;
  min-height: var(--hit-min);
  padding: 0 18px;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-pill);
  background: var(--color-sand);
  color: var(--color-ink);
  font: 400 var(--type-ui)/1.2 var(--font-text);
}

.ch-search-dialog__search input,
.ch-menu__search input {
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 16px/1.2 var(--font-text);
}

.ch-search input:focus,
.ch-search-dialog__search input:focus,
.ch-menu__search input:focus {
  border-color: var(--color-ink);
  background: var(--color-paper);
  outline: none;
  box-shadow: 0 0 0 3px var(--color-line);
}

.ch-search-open,
.ch-menu-open,
.ch-close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: var(--hit-min);
  min-height: var(--hit-min);
  padding: 0 10px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font: 600 var(--type-ui)/1 var(--font-text);
  cursor: pointer;
}

.ch-close {
  padding: 0 18px;
  border-color: var(--color-line-strong);
}

.ch-search-open svg,
.ch-menu-open svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.ch-search-open:hover,
.ch-menu-open:hover,
.ch-close:hover {
  border-color: var(--color-ink);
}

.ch-search-open {
  margin-left: auto;
}

.ch-utility-inline {
  display: inline-flex;
  flex: none;
}

.ch-utility-inline .ch-utility-link {
  padding: 0 6px;
  font: 600 var(--type-ui)/1.2 var(--font-text);
}

.ch-login {
  flex: none;
  min-height: var(--hit-min);
  padding: 0 18px;
  border-color: var(--color-line);
}

.ch-login:hover {
  border-color: var(--color-ink);
  filter: none;
}

.ch-account {
  position: relative;
  flex: none;
}

.ch-avatar {
  width: var(--hit-min);
  height: var(--hit-min);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-sand);
  color: var(--color-ink);
  font: 700 var(--type-ui)/1 var(--font-text);
  cursor: pointer;
}

.ch-account-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 62;
  min-width: 240px;
  padding: 8px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-tile);
  background: var(--color-paper);
  box-shadow: var(--shadow-pop);
}

.ch-account-menu[hidden] {
  display: none;
}

.ch-account-menu a,
.ch-account-menu .ch-link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--hit-min);
  padding: 0 12px;
  border-radius: var(--radius-xs);
  color: var(--color-ink);
  font-size: var(--type-small);
  text-align: left;
  text-decoration: none;
}

.ch-account-menu a:hover,
.ch-account-menu .ch-link:hover {
  background: var(--color-sand);
}

.ch-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* Подсказки: ответ-факт первой строкой. */
.suggest__answer {
  padding: 10px 12px;
  border-radius: var(--radius-field);
  background: var(--color-sand);
  color: var(--color-graphite);
  font-size: var(--type-caption);
  line-height: 1.45;
}

/* Диалог поиска и лист «Меню»: поверх страницы, прокрутка внутри.
   Лист «Меню» — песок с белыми карточками-списками (артборды телефона). */
html.ch-locked,
html.ch-locked body {
  overflow: hidden;
}

.ch-search-dialog,
.ch-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-paper);
}

.ch-menu {
  background: var(--color-sand);
}

.ch-search-dialog[hidden],
.ch-menu[hidden] {
  display: none;
}

.ch-search-dialog__inner,
.ch-menu__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-3) var(--layout-gutter) var(--space-7);
}

.ch-search-dialog__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.ch-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  margin-bottom: var(--space-2);
}

.ch-menu__title {
  font: 600 var(--type-h3)/1 var(--font-display);
  letter-spacing: var(--tracking-heading);
}

.ch-menu__fallback ul,
.ch-menu__group ul {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  overflow: hidden;
}

.ch-menu__fallback li + li,
.ch-menu__group li + li {
  border-top: 1px solid var(--color-line);
}

.ch-menu__fallback a,
.ch-menu__group li a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 52px;
  padding: 8px var(--space-4);
  color: var(--color-ink);
  font: 600 var(--type-body)/1.3 var(--font-text);
  text-decoration: none;
}

.ch-menu__fallback a::after,
.ch-menu__group li a::after {
  content: "→";
  margin-left: auto;
  color: var(--color-muted);
  font-weight: 600;
}

.ch-menu__fallback a:hover,
.ch-menu__group li a:hover {
  background: var(--color-sand);
  text-decoration: none;
}

.ch-menu:has(.ch-menu__frag) .ch-menu__fallback {
  display: none;
}

.ch-menu__search form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ch-menu__search input {
  flex: 1 1 100%;
}

.ch-menu__search .pp-chip {
  background: var(--color-paper);
}

.ch-menu__group {
  margin-top: var(--space-5);
}

.ch-menu__group h2 {
  margin: 0 0 var(--space-2);
  padding-inline: 4px;
  color: var(--color-ink);
  font: 800 var(--type-ui)/1.3 var(--font-text);
  letter-spacing: 0;
}

.ch-menu__group h2 a {
  color: inherit;
}

.ch-menu__group li a.pp-urgent {
  border-radius: 0;
  font-weight: 700;
}

.ch-menu__group li a.pp-urgent::after {
  color: var(--color-alarm);
}

.ch-menu__group li a .ch-count {
  margin-left: auto;
}

.ch-menu__group li a:has(.ch-count)::after {
  margin-left: 0;
}

.ch-count {
  color: var(--color-muted);
  font-size: var(--type-small);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Подвал: песок, линия сверху, логотип с подписью и колонки ссылок. */
.ch-footer {
  margin-top: var(--space-7);
  border-top: 1px solid var(--color-line);
  background: var(--color-sand);
  color: var(--color-graphite);
  font-family: var(--font-text);
}

.ch-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: var(--layout-wrap);
  margin: 0 auto;
  padding: 56px var(--layout-gutter) 36px;
}

.ch-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-6);
}

.ch-footer__brand {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 14px;
}

.ch-footer__logo {
  display: inline-flex;
  align-self: flex-start;
}

.ch-footer__logo img {
  display: block;
  width: auto;
  height: 30px;
}

.ch-footer__brand p {
  max-width: 340px;
  margin: 0;
  color: var(--color-graphite);
  font-size: var(--type-small);
  line-height: 1.55;
}

.ch-footer__cols {
  display: grid;
  flex: 3 1 680px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-5);
  min-width: 0;
}

.ch-fcol summary {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-ink);
  font: 800 var(--type-small)/1.2 var(--font-text);
  list-style: none;
  cursor: pointer;
}

.ch-fcol summary::-webkit-details-marker {
  display: none;
}

.ch-fcol ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.ch-fcol li a {
  display: inline-block;
  padding: 4px 0;
  color: var(--color-ink);
  font-size: var(--type-small);
  line-height: 1.4;
  text-decoration: none;
}

.ch-fcol li a:hover {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ch-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px var(--space-5);
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: var(--type-caption);
  line-height: 1.5;
}

.ch-footer__legal p {
  max-width: 72ch;
  margin: 0;
}

.ch-footer__legal a,
.ch-footer__legal .ch-link {
  color: inherit;
  text-decoration: none;
}

.ch-footer__legal a:hover,
.ch-footer__legal .ch-link:hover {
  color: var(--color-ink);
  text-decoration: underline;
}

/* Нижняя панель (B6): только на телефоне; активный раздел — песочная пилюля. */
.ch-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 55;
  display: none;
  grid-template-columns: repeat(5, 1fr);
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--color-line);
  background: var(--color-paper);
  transition: transform var(--motion);
}

.ch-bar__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 48px;
  min-height: 56px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--color-graphite);
  font: 600 11px/1.1 var(--font-text);
  text-decoration: none;
  cursor: pointer;
}

.ch-bar__cell svg {
  box-sizing: content-box;
  padding: 2px 14px;
  border-radius: var(--radius-pill);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: background var(--motion);
}

.ch-bar__cell:hover,
.ch-bar__cell[aria-current] {
  color: var(--color-ink);
  text-decoration: none;
}

.ch-bar__cell[aria-current] {
  font-weight: 700;
}

.ch-bar__cell[aria-current] svg {
  background: var(--color-sand);
}

/* Панель действия: копия главного действия экрана вместо нижней панели. */
.ch-actionbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 56;
  display: flex;
  gap: var(--space-2);
  padding: 8px var(--layout-gutter) calc(8px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-line);
  background: var(--color-paper);
}

.ch-actionbar[hidden] {
  display: none;
}

.ch-actionbar__main {
  flex: 1 1 auto;
}

html.ch-action-on .ch-bar {
  display: none !important;
}

@media (max-width: 1359px) {
  .ch-search {
    display: none;
  }
}

@media (min-width: 1360px) {
  .ch-search {
    display: block;
    margin-left: auto;
  }

  .ch-search-open {
    display: none;
  }
}

@media (min-width: 1200px) {
  .ch-menu-open {
    padding: 0;
  }

  .ch-menu-open span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* 960–1199: пять пунктов и «Ещё»; логотип целиком, ниже — 22 px. */
@media (min-width: 960px) and (max-width: 1199px) {
  .ch-item[data-ch-item="instrumenty"] {
    display: none;
  }

  .ch-item--more {
    display: flex;
  }

  .ch-row {
    gap: var(--space-1);
  }

  .ch-logo {
    margin-right: var(--space-2);
  }

  .ch-logo img {
    height: 20px;
  }

  .ch-login {
    padding: 0 14px;
  }

  .ch-item__link {
    padding-left: 7px;
  }

  .ch-item__chev {
    padding-right: 4px;
  }

  .ch-menu-open {
    padding: 0;
  }

  .ch-menu-open span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@media (max-width: 959px) {
  .ch-row {
    min-height: 56px;
    gap: 6px;
  }

  /* Логотип не сжимается (в Safari кнопки шире, и сжатый знак
     становился крошечным): место освобождает «Меню» — круглая кнопка. */
  .ch-logo {
    flex: none;
    margin-right: auto;
    padding: 8px 0;
  }

  .ch-logo img {
    width: auto;
    max-width: none;
    height: clamp(22px, 6.4vw, 28px);
  }

  .ch-nav,
  .ch-search {
    display: none;
  }

  .ch-search-open {
    margin-left: 0;
  }

  .ch-menu-open {
    width: var(--hit-min);
    padding: 0;
  }

  .ch-menu-open span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .ch-search-dialog__inner,
  .ch-menu__inner {
    max-width: none;
  }

  .ch-footer__inner {
    padding-top: var(--space-7);
  }
}

@media (max-width: 767px) {
  .ch-search-open {
    display: none;
  }

  /* В шапке 56 px кнопки 44 — зона нажатия не меньше 44 (B10). */
  .ch-login {
    padding: 0 16px;
  }

  .ch-close {
    min-height: var(--control-h-touch);
  }

  .ch-bar {
    display: grid;
  }

  body:has(.ch-bar) {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  html.ch-scrolled-down .ch-header {
    transform: translateY(-100%);
  }

  html.ch-scrolled-down .ch-bar,
  html.ch-input-focus .ch-bar {
    transform: translateY(100%);
  }

  .ch-footer {
    margin-top: var(--space-6);
  }

  .ch-footer__top {
    gap: var(--space-5);
  }

  .ch-footer__cols {
    flex-basis: 100%;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ch-fcol {
    border-bottom: 1px solid var(--color-line);
  }

  .ch-fcol summary {
    min-height: 52px;
    font-size: var(--type-ui);
  }

  .ch-fcol summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin: -4px 4px 0 auto;
    border-right: 2px solid var(--color-muted);
    border-bottom: 2px solid var(--color-muted);
    transform: rotate(45deg);
    transition: transform var(--motion);
  }

  .ch-fcol[open] summary::after {
    margin-top: 4px;
    transform: rotate(225deg);
  }

  .ch-fcol ul {
    margin: 0 0 var(--space-3);
  }

  .ch-fcol li a {
    padding: 12px 0;
    font-size: var(--type-ui);
  }

  .ch-footer__legal {
    flex-direction: column;
  }

  .ch-search-dialog__tools .pp-chip {
    min-height: var(--control-h-touch);
  }

  /* Крошки (B8): на телефоне только родитель — «‹ Раздел». */
  nav.crumbs > span,
  nav.crumbs > a:not(:last-of-type) {
    display: none;
  }

  nav.crumbs > a:last-of-type::before {
    content: "‹ ";
  }
}

@media (min-width: 768px) {
  .ch-bar {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ch-header,
  .ch-bar,
  .ch-item,
  .ch-item__chev svg,
  .ch-bar__cell svg,
  .ch-fcol summary::after {
    transition: none;
  }
}

/* ------------------------------------------------- 2.0 · Баннер cookie */
/* seo.consent.banner_html, site/assets/js/consent.js. Над нижней панелью
   2.0, над прежним таб-баром (76 px) на страницах без неё; кнопки равные. */
.ch-consent {
  position: fixed;
  right: 12px;
  bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  left: 12px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 140px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-tile);
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-panel);
  font: 400 var(--type-small)/1.45 var(--font-text);
}

.ch-consent[hidden] {
  display: none;
}

body:not(:has(.ch-bar)) .ch-consent {
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

.ch-consent__title {
  margin: 0;
  font-size: var(--type-body);
  font-weight: 700;
}

.ch-consent__text {
  margin: 0;
  color: var(--color-graphite);
}

.ch-consent__text a {
  color: inherit;
  text-decoration: underline;
}

.ch-consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ch-consent__actions .pp-btn {
  width: 100%;
  padding: 0 12px;
  line-height: 1.2;
  text-align: center;
}

html.ch-consent-pending .ch-actionbar {
  display: none;
}

@media (min-width: 768px) {
  .ch-consent,
  body:not(:has(.ch-bar)) .ch-consent {
    right: 20px;
    bottom: 20px;
    left: auto;
    width: 480px;
    max-width: calc(100vw - 40px);
  }
}

/* ==== 2.0 · Главная ==== */
/* Главная по артборду Main (handoff/porodoteka-2.0/concept/Main.dc.html):
   песочный герой в две колонки — поле поиска с оранжевой «Найти» и белая
   карточка «С чего начнём?» с плитками и цифрами реестра; ниже — секции
   концепта на белом и песке. Разметка — scripts/seo/home.py. */

/* ---- Герой */
.home-hero .pp-hero__grid {
  padding-top: 56px;
  padding-bottom: 64px;
}

.home-hero .pp-hero__text {
  flex: 1 1 520px;
  gap: 22px;
  padding-top: 10px;
}

.home-hero .pp-hero__aside {
  flex: 1 1 520px;
  gap: var(--space-4);
  /* Карточка своей высоты по центру текста, без пустоты внизу. */
  align-self: center;
}

.home-hero__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  min-height: 34px;
  padding: 0 14px 0 5px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-graphite);
  font: 600 var(--type-small)/1.25 var(--font-text);
}

.home-hero__tag-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-paper);
}

.home-hero__tag-mark .i {
  width: 14px;
  height: 14px;
}

/* Поле запроса концепта: белое, чёрная обводка 1,5, скругление 22, тень. */
.home-search {
  margin: 0;
}

.home-search__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 14px 20px;
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  box-shadow: var(--shadow-pop);
}

.home-search__field:focus-within {
  box-shadow: 0 0 0 3px var(--color-line), var(--shadow-pop);
}

.home-search__label {
  color: var(--color-muted);
  font: 600 var(--type-caption)/1.3 var(--font-text);
}

.home-search__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.home-search__input {
  flex: 1;
  min-width: 0;
  height: var(--control-h);
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-ink);
  font: 400 18px/1.45 var(--font-text);
  appearance: none;
}

.home-search__input::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

.home-search__go {
  flex: none;
  padding: 0 22px;
}

.home-search .suggest__list {
  top: calc(100% + 8px);
  border-color: var(--color-line);
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-panel);
}

.home-hero__scopes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.home-hero__scopes .pp-chip {
  min-height: var(--hit-min);
  background: var(--color-paper);
  text-decoration: none;
}

.home-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) 22px;
  margin: 0;
  padding: 6px 0 0;
  list-style: none;
  color: var(--color-graphite);
  font-size: var(--type-small);
  line-height: 1.4;
}

.home-hero__trust li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.home-hero__trust .i {
  display: block;
  width: 18px;
  height: 18px;
  color: var(--color-ink);
}

.home-hero__trust .home-hero__ok .i {
  color: var(--color-ok);
}

/* Карточка «С чего начнём?»: плитки на песке, «Собаке плохо» — красная. */
.home-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-doors li {
  display: flex;
  min-width: 0;
}

.home-door {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--color-sand);
  color: var(--color-ink);
  text-decoration: none;
  transition: transform var(--motion), box-shadow var(--motion);
}

.home-door::after {
  content: "→";
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--color-muted);
  font-weight: 700;
}

.home-door:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  text-decoration: none;
}

.home-door__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-1);
  border-radius: 14px;
  background: var(--color-paper);
  color: var(--color-ink);
}

.home-door__name {
  font: 700 18px/1.2 var(--font-text);
}

.home-door__hint {
  color: var(--color-graphite);
  font-size: var(--type-small);
  line-height: 1.5;
}

.home-door--alarm {
  background: var(--color-alarm-tint);
}

.home-door--alarm .home-door__icon,
.home-door--alarm .home-door__name,
.home-door--alarm::after {
  color: var(--color-alarm);
}

.home-door--alarm .home-door__hint {
  color: var(--color-alarm-ink);
}

/* Цифры реестра: Unbounded, каждая — ссылка. */
.home-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--color-line);
  list-style: none;
}

.home-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: var(--hit-min);
  color: var(--color-ink);
  text-decoration: none;
}

.home-stat .pp-stat {
  font-size: var(--type-h3);
  white-space: nowrap;
}

.home-stat__label {
  color: var(--color-muted);
  font-size: var(--type-caption);
  line-height: 1.35;
}

.home-stat:hover {
  text-decoration: none;
}

.home-stat:hover .home-stat__label {
  color: var(--color-ink);
  text-decoration: underline;
}

/* ---- Секции: белые подряд делят один отступ, как в концепте */
.home-sec:not(.pp-section--sand) + .home-sec:not(.pp-section--sand) {
  padding-top: 0;
}

.home-sec__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 760px;
}

.home-sec .pp-lead {
  font-size: var(--type-body);
}

/* «Сейчас обсуждают»: карточки событий сеткой auto-fit. */
.home-news {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--layout-card-min), 100%), 1fr));
  gap: var(--space-4);
}

.home-news .newscard {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 20px;
  border: 1px solid var(--color-line);
}

.home-news .newscard__date {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  color: var(--color-ink);
}

.home-news .newscard__day {
  font: 600 var(--type-stat)/1 var(--font-display);
  letter-spacing: var(--tracking-heading);
}

.home-news .newscard__mon {
  color: var(--color-muted);
  font-size: var(--type-caption);
}

.home-news .newscard__body {
  flex: 1;
}

.home-news .newscard__title,
.home-news .newscard:hover .newscard__title {
  color: var(--color-ink);
  font: 700 18px/1.25 var(--font-text);
}

.home-news .newscard__text {
  color: var(--color-graphite);
  font-size: var(--type-small);
  line-height: 1.5;
}

.home-news .newscard__meta {
  display: flex;
  min-width: 0;
  margin-top: auto;
  padding-top: var(--space-1);
}

/* Длинный тип выставки («Международная монопородная (…)») — одной строкой. */
.home-news .newscard__meta .pill {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Текст слева, карточки или список справа («Что мы проверяем», инструменты). */
.home-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-6) var(--space-7);
}

.home-split__text {
  display: flex;
  flex: 1 1 360px;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.home-scam {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 10px;
  margin-top: var(--space-2);
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--color-warn-tint);
}

.home-scam__title {
  color: var(--color-warn);
  font: 800 var(--type-ui)/1.3 var(--font-text);
}

.home-scam ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding-left: 18px;
  list-style: disc;
  color: var(--color-graphite);
  font-size: var(--type-ui);
  line-height: 1.55;
}

.home-scam li::marker {
  color: var(--color-warn);
}

.home-scam a {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Четыре источника и пометка: 3 + 2 (пометка на две колонки) без пустой
   клетки; на телефоне — 2 × 2 + пометка, на узком — столбиком. */
.home-checks {
  display: grid;
  flex: 2 1 640px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  min-width: 0;
}

.home-checks .home-check--note {
  grid-column: span 2;
}

.home-check {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  color: var(--color-ink);
  text-decoration: none;
  transition: transform var(--motion), box-shadow var(--motion);
}

a.home-check:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  text-decoration: none;
}

.home-check__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--color-ok-tint);
  color: var(--color-ok);
}

.home-check__name {
  font: 700 18px/1.2 var(--font-text);
}

.home-check__text {
  color: var(--color-graphite);
  font-size: var(--type-ui);
  line-height: 1.5;
}

.home-check--note {
  justify-content: center;
  border-color: transparent;
  background: var(--color-sand);
}

.home-check--note .home-check__name {
  font-size: var(--type-ui);
}

.home-check--note .home-check__text {
  color: var(--color-muted);
  font-size: var(--type-small);
}

/* Рейтинг: белые карточки на песке. */
.home-rating {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-4);
}

.home-rating__card {
  position: relative;
  min-height: 132px;
  padding-right: 44px;
}

.home-rating__card::after {
  content: "→";
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--color-muted);
  font-weight: 700;
}

.home-rating__card .pp-card__text {
  overflow-wrap: anywhere;
}

/* Инструменты: список-строки на белом, подсказка второй строкой. */
.home-tools {
  flex: 2 1 560px;
  min-width: 0;
}

/* Заголовок слева короче списка справа: на широком экране он едет вместе
   со списком под шапкой, а не оставляет пустую колонку. */
@media (min-width: 1200px) {
  .home-split:not(.home-split--trust) > .home-split__text {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }
}

/* «Частые вопросы» на главной — в той же раскладке: заголовок слева,
   вопросы справа во всю колонку (старые классы блока faq). */
.home-hero ~ .section > .wrap:has(> .qas) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5) var(--space-7);
}

.home-hero ~ .section > .wrap:has(> .qas) > .sec-head {
  flex: 1 1 360px;
  margin-bottom: 0;
}

.home-hero ~ .section > .wrap:has(> .qas) > .qas {
  flex: 2 1 560px;
  min-width: 0;
  max-width: none;
}

.home-tool__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.home-tool__name {
  font: 700 var(--type-title)/1.3 var(--font-text);
}

.home-tool__hint {
  color: var(--color-graphite);
  font: 400 var(--type-small)/1.45 var(--font-text);
}

/* Журнал: карточки библиотеки концепта — рубрика, заголовок, дата. */
.home-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--layout-card-min), 100%), 1fr));
  gap: var(--space-4);
}

.home-post {
  gap: 10px;
  min-height: 200px;
}

.home-post__kicker {
  color: var(--color-action-text);
  font: 700 var(--type-caption)/1.3 var(--font-text);
}

.home-post .pp-card__title {
  font-size: 18px;
}

/* ---- 404 (site/404.html): колонка по центру, разделы плитками, поиск
   полем концепта с оранжевой «Найти». */
.nf__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  max-width: 880px;
  text-align: center;
}

.nf__wrap .pp-lead {
  max-width: 56ch;
}

.nf__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-3);
}

.nf__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-tile);
  background: var(--color-paper);
  color: var(--color-ink);
  font: 600 var(--type-ui)/1.3 var(--font-text);
  text-decoration: none;
  transition: transform var(--motion), box-shadow var(--motion);
}

.nf__link:hover,
.nf__link:focus-visible {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  text-decoration: none;
}

.nf__search {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  width: 100%;
  max-width: 600px;
  margin-top: var(--space-4);
  text-align: left;
}

.nf__label {
  color: var(--color-graphite);
  font: 700 var(--type-caption)/1.3 var(--font-text);
}

.nf__field input {
  min-height: var(--control-h);
}

.nf__field .pp-btn {
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .nf__link {
    transition: none;
  }

  .nf__link:hover,
  .nf__link:focus-visible {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-door,
  .home-check {
    transition: none;
  }

  .home-door:hover,
  a.home-check:hover {
    transform: none;
  }
}

/* ---- Телефон: одна колонка, плитки строками, цифры 2 × 2 */
@media (max-width: 767px) {
  .home-hero .pp-hero__grid {
    gap: var(--space-5);
    padding-top: 28px;
    padding-bottom: var(--space-6);
  }

  .home-hero .pp-hero__text {
    gap: var(--space-4);
    padding-top: 0;
  }

  .home-hero .pp-hero__aside {
    padding: var(--space-4);
    border-radius: var(--radius-card);
  }

  .home-search__field {
    padding: 12px 12px 12px 16px;
  }

  .home-search__input {
    height: var(--control-h-touch);
    font-size: 16px;
  }

  .home-search__go {
    padding: 0 18px;
  }

  .home-hero__trust {
    flex-direction: column;
  }

  .home-doors {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .home-door {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 2px var(--space-3);
    padding: 14px 40px 14px 14px;
  }

  .home-door__icon {
    grid-row: span 2;
    margin-bottom: 0;
  }

  .home-door__name {
    font-size: var(--type-title);
  }

  .home-door::after {
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
  }

  .home-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .home-split {
    gap: var(--space-5);
  }

  .home-check {
    padding: 18px;
  }

  .home-sec {
    padding-block: var(--space-7);
  }

  .home-rating__card {
    min-height: 0;
  }

  .home-checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .home-checks .home-check--note {
    grid-column: 1 / -1;
  }

  .nf__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .nf__link {
    min-height: 56px;
    padding: var(--space-2) var(--space-3);
    font-size: var(--type-small);
  }
}

@media (max-width: 600px) {
  .home-checks {
    grid-template-columns: 1fr;
  }

  .home-checks .home-check--note {
    grid-column: auto;
  }

  /* Столбиком карточки компактнее: значок слева, как плитки героя. */
  .home-checks a.home-check {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 2px 14px;
  }

  .home-checks a.home-check .home-check__icon {
    grid-row: span 2;
  }
}
/* ==== /2.0 · Главная ==== */

/* ==== 2.0 · Породы ==== */
/* Хаб породы /porody/<порода>/ и каталог /porody/katalog/ в виде концепта
   (артборды Library и Litter): песочная шапка с фото справа, цифры реестра
   Unbounded, зелёная метка сверки с датой, одна оранжевая кнопка; карточки
   пород — фото со скруглением 20 и подпись под ним; реклама — пунктир. */

/* ---- Шапка породы: текст слева, фото справа (с 960 px), на телефоне фото
   под лидом. Порядок в разметке = порядок на телефоне. */
.page-hero--breed h1 {
  overflow-wrap: break-word;
}

.page-hero--breed .breedphoto {
  width: 100%;
  max-width: none;
  margin: 0;
}

.page-hero--breed .breedphoto__img {
  border: 0;
  border-radius: var(--radius-block);
  background: var(--color-tile);
}

.page-hero--breed .breedphoto__credit {
  margin-top: var(--space-2);
  font-size: var(--type-caption);
  color: var(--color-muted);
}

.page-hero--breed .breedphoto__credit a {
  color: var(--color-muted);
}

.breedhero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) 40px;
  list-style: none;
}

.breedhero__stats .pp-stats__label {
  font-size: var(--type-caption);
}

.breedhero__fact {
  margin: 0;
}

.breedhero__actions {
  margin-top: var(--space-1);
}

@media (min-width: 960px) {
  .page-hero--photo {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-rows: repeat(6, auto) 1fr;
    align-items: start;
    gap: 18px var(--space-7);
    padding-bottom: var(--space-7);
  }

  .page-hero--photo > * {
    grid-column: 1;
  }

  .page-hero--photo > .breedphoto {
    grid-column: 2;
    grid-row: 1 / -1;
  }
}

@media (max-width: 767px) {
  .breedhero__actions .pp-btn {
    flex: 1 1 auto;
  }
}

/* ---- «Сообщить о помёте»: песочный блок со скруглением, как подписка
   в концепте; справа белая карточка формы. Кнопка формы — чёрная: оранжевая
   на экране одна, в шапке. Секция идёт сразу за белой «Что здесь есть» —
   верхний отступ не удваиваем. */
.catalog-now--waitlist {
  padding-top: 0;
}

.catalog-now--waitlist > .wrap {
  display: grid;
  gap: var(--space-5) var(--space-7);
  width: calc(100% - 2 * var(--layout-gutter));
  max-width: calc(var(--layout-wrap) - 2 * var(--layout-gutter));
  padding: var(--space-6);
  border-radius: var(--radius-block);
  background: var(--color-sand);
}

.catalog-now--waitlist .sec-head {
  margin: 0;
}

.catalog-now--waitlist .sec-head h2 {
  font-size: var(--type-h2);
}

.catalog-now--waitlist .waitlist-form {
  width: 100%;
  max-width: none;
  border-color: var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}

.waitlist-form__consent input {
  accent-color: var(--color-ink);
}

@media (min-width: 960px) {
  .catalog-now--waitlist > .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    align-items: start;
    padding: 40px;
  }
}

@media (max-width: 767px) {
  .catalog-now--waitlist > .wrap {
    padding: 20px;
  }

  .catalog-now--waitlist .waitlist-form {
    padding: var(--space-4);
  }

  .waitlist-form .btn {
    align-self: stretch;
    min-height: var(--control-h-touch);
  }
}

/* ---- Каталог пород: карточка концепта — фото 20, название 18/800,
   подпись серым. Рамки и подложки у карточки нет, поднимается фото. */
.breedgrid {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--space-5) 18px;
}

.breedtile {
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-ink);
  overflow: visible;
  transition: none;
}

.breedtile:hover,
.breedtile:focus-visible {
  transform: none;
  box-shadow: none;
}

.breedtile__art {
  border-radius: 20px;
  background: var(--color-tile);
  transition: transform var(--motion), box-shadow var(--motion);
}

a.breedtile:hover .breedtile__art,
a.breedtile:focus-visible .breedtile__art {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.breedtile__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 var(--space-1);
}

.breedtile__name {
  font: 800 18px/1.25 var(--font-text);
}

a.breedtile:hover .breedtile__name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breedtile__meta {
  margin-top: 0;
  font-size: var(--type-caption);
  color: var(--color-muted);
}

.breedtile--flat .breedtile__name {
  color: var(--color-graphite);
}

.photocred {
  padding: var(--space-4) var(--space-5);
  border-color: var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}

.photocred summary {
  font: 700 var(--type-ui)/1.3 var(--font-text);
}

.photocred__note,
.photocred__list {
  font-size: var(--type-caption);
  color: var(--color-muted);
}

@media (max-width: 600px) {
  .breedgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  .breedtile__art {
    border-radius: var(--radius-tile);
  }

  .breedtile__name {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .breedtile__art {
    transition: none;
  }

  a.breedtile:hover .breedtile__art,
  a.breedtile:focus-visible .breedtile__art {
    transform: none;
  }
}

/* ---- Рекламное место РСЯ (ads.SLOT): пунктирная рамка и подпись «Реклама»
   слева, в ширину контейнера. Размер слота (min-height) и скрытие по
   согласию остаются за monetization.css: display здесь не трогаем. */
main > .ad-slot {
  width: calc(100% - 2 * var(--layout-gutter));
  max-width: calc(var(--layout-wrap) - 2 * var(--layout-gutter));
  margin: var(--space-6) auto;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 1px dashed var(--color-line-dashed);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}

main > .ad-slot .ad-slot__label {
  margin-bottom: var(--space-2);
  text-align: left;
  font: 700 var(--type-micro)/1.4 var(--font-text);
  letter-spacing: 0;
  color: var(--color-muted);
}

main > .ad-slot .ad-slot__fallback {
  color: var(--color-graphite);
  font: 400 var(--type-small)/1.55 var(--font-text);
}

/* ---- Сетки без полупустого ряда. Подразделы хаба (/porody/ и другие
   разделы: 4, 5 или 6 карточек) и пять ссылок «Разделы» рейтинга: шесть —
   3 + 3, пять — в один ряд, а не 4 + 2 и 4 + 1. На телефоне подразделы
   в две колонки с низкой заставкой вместо шести высоких заглушек подряд. */
@media (min-width: 768px) {
  .subgrid:not(.subgrid--editorial):has(> .subcard:nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .subgrid:not(.subgrid--editorial):has(> .subcard:nth-child(5):last-child),
  .minicards:has(> a.minicard:nth-child(5):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .subgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .subcard__art {
    aspect-ratio: 16 / 9;
  }

  /* Нечётная последняя карточка (5 подразделов) — во всю ширину, с той же
     высотой заставки, а не одна в половине ряда. */
  .subgrid > .subcard:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .subgrid > .subcard:last-child:nth-child(odd) .subcard__art {
    aspect-ratio: 32 / 9;
    overflow: hidden;
  }

  .subcard__body {
    padding: var(--space-3);
  }

  .subcard__name {
    font-size: var(--type-ui);
    overflow-wrap: break-word;
  }

  /* «Где искать ближе» на странице породы: до восьми коротких регионов —
     две колонки, а не восемь строк во всю ширину. */
  main:has(> .wrap > .page-hero--breed) .minicards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  main:has(> .wrap > .page-hero--breed) .minicard {
    overflow-wrap: break-word;
  }

  main:has(> .wrap > .page-hero--breed) .minicards > .minicard:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---- Инструменты (/instrumenty/*): карточка инструмента не прилипает
   к следующей секции; пошаговые тесты, прививки и возраст — в карточке
   своей ширины (поля и варианты не тянутся на 1180 px), варианты ответа
   сеткой. Кнопка «Добавить» трекера — обычная чёрная кнопка (её гасило
   старое правило кнопки удаления .wt-row button). */
main > .wrap:has(> .toolhost) {
  margin-bottom: var(--space-7);
}

.toolhost[data-tool-inline="breed"],
.toolhost[data-tool-inline="symptom"],
.toolhost:has(> .vac),
.toolhost:has(> .agecalc) {
  max-width: 880px;
}

.toolhost > .vac,
.toolhost > .agecalc {
  max-width: none;
}

.toolhost .opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--space-2) 10px;
}

.toolhost .opt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--control-h);
}

.wt-row .btn--primary,
.wt-row .btn--primary:hover {
  padding: 10px 22px;
  border: 1px solid transparent;
  background: var(--color-ink);
  color: var(--color-paper);
  font: 700 var(--type-ui)/1.2 var(--font-text);
}

@media (max-width: 767px) {
  main > .wrap:has(> .toolhost) {
    margin-bottom: var(--space-6);
  }

  .toolhost .opt {
    min-height: var(--control-h-touch);
  }
}

/* ---- Таблицы рейтинга (семь колонок: # · собака · порода · питомник ·
   лучший результат · результатов · баллы) на телефоне: длинная колонка
   «Лучший результат» не сжимается до слова в строку — иначе строка
   вырастает до 260 px пустоты. Таблица по-прежнему листается вбок. */
@media (max-width: 767px) {
  .grid:has(> thead > tr > th:nth-child(7):last-child) td:nth-child(2),
  .grid:has(> thead > tr > th:nth-child(7):last-child) td:nth-child(3) {
    min-width: 9.5em;
  }

  .grid:has(> thead > tr > th:nth-child(7):last-child) td:nth-child(5) {
    min-width: 17em;
    font-size: var(--type-small);
  }
}
/* ==== /2.0 · Породы ==== */

/* ==== 2.0 · Питомники, выставки, собаки ==== */
/* Реестр РКФ: каталог питомников и регионы, карточка питомника, календарь
   и страница выставки, карточка собаки, поиск. Образцы — артборды концепта:
   Catalog (строки питомников с монограммой), Litter (шапка питомника, сетка
   фактов, метки «проверено» / «со слов»), Library (блок «Реестр РКФ»: поле
   поиска, плитки чисел, плитки дат). Разметка — scripts/seo/registry_ui.py,
   registry_pages.py, registry_profiles.py, dogs_pages.py и registry.js. */

/* Поле поиска — пилюля с линией, как «Название питомника, город или порода». */
.rg-search {
  flex: 2 1 320px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 6px 6px 6px 18px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
}

.rg-search:focus-within {
  border-color: var(--color-ink);
  box-shadow: 0 0 0 3px var(--color-line);
}

.rg-search .input,
.rg-search .input:focus {
  flex: 1;
  min-width: 0;
  height: 40px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  font: 400 16px/1.4 var(--font-text);
  color: var(--color-ink);
}

.rg-search .input::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

/* Большое поле страницы поиска: кнопка «Найти» внутри пилюли. */
.poisk__form.rg-search {
  flex-direction: row;
  max-width: 760px;
  min-height: 58px;
}

.rg-search--lg .input,
.rg-search--lg .input:focus {
  height: 46px;
  font-size: 17px;
}

.rg-search--lg .btn {
  flex: none;
  height: 46px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
}

.rg-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  font-size: var(--type-small);
  line-height: 1.5;
  color: var(--color-graphite);
}

.rg-note::before {
  content: "i";
  flex: none;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border: 2px solid currentColor;
  border-radius: var(--radius-pill);
  font: 800 11px/14px var(--font-text);
  text-align: center;
}

/* Метка без роли: федерация, ранг, «Клуб», год. Не статус и не проверка. */
.rg-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--color-tile);
  color: var(--color-graphite);
  font: 700 var(--type-micro)/1.2 var(--font-text);
  white-space: nowrap;
}

/* Монограмма питомника: квадрат 54, скругление 16; в шапке карточки — круг. */
.rg-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--color-ink);
  color: var(--color-paper);
  font: 800 15px/1 var(--font-text);
  letter-spacing: 0.02em;
}

.rg-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rg-mark--round {
  border-radius: var(--radius-pill);
}

/* Та же монограмма в карточках питомников на страницах пород. */
.kennelcard__initials {
  border: 0;
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-text);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Строки каталога питомников — как «Подходят частично» в Catalog. */
.rg-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
  gap: 14px;
}

.rg-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px 18px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  transition: transform var(--motion), box-shadow var(--motion);
}

.rg-card:has(.rg-card__name a):hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.rg-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rg-card__name {
  margin: 0;
  font: 800 var(--type-title)/1.25 var(--font-text);
  letter-spacing: 0;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.rg-card__name a {
  color: inherit;
  text-decoration: none;
}

/* Вся строка нажимается, фокус остаётся один — на названии. */
.rg-card__name a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.rg-card__name a:hover {
  text-decoration: underline;
}

.rg-card__meta {
  margin: 0;
  font-size: var(--type-small);
  line-height: 1.45;
  color: var(--color-graphite);
  overflow-wrap: anywhere;
}

.rg-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 0;
}

.rg-more {
  gap: 10px;
  margin-top: 22px;
  align-items: flex-start;
}

/* Календарь выставок: плитка даты песком, ранги метками. */
.rg-col {
  gap: 20px;
}

.rg-itogi {
  gap: 10px;
  margin-top: 12px;
}

.rg-date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 60px;
  border-radius: var(--radius-tile);
  background: var(--color-sand);
  line-height: 1.1;
}

.rg-date__day {
  font: 600 20px/1.1 var(--font-display);
  color: var(--color-ink);
}

.rg-date__mon {
  font-size: var(--type-micro);
  color: var(--color-muted);
}

.rg-date--lg {
  width: 76px;
  height: 84px;
}

.rg-date--lg .rg-date__day {
  font-size: var(--type-stat);
}

.rg-show,
a.rg-show {
  position: relative;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  cursor: default;
}

.rg-show .show__title {
  font: 700 var(--type-ui)/1.35 var(--font-text);
  letter-spacing: 0;
  color: var(--color-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

a.rg-show .show__title,
.rg-show a.show__title {
  cursor: pointer;
}

.rg-show a.show__title::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.rg-show:has(a.show__title):hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.rg-show a.show__title:hover {
  text-decoration: underline;
}

.rg-show .show__where {
  font-size: var(--type-caption);
  color: var(--color-muted);
}

.rg-show .rg-card__tags {
  margin-top: 4px;
}

/* Ссылка ZOOпортала поверх растянутой ссылки на страницу выставки. */
.rg-show .show__meta > a.meta {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Лист фактов: карточка питомника, выставки и собаки (сетка из Litter). */
.rg-sheet,
.profile.rg-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(18px, 2.2vw, 28px);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-block);
  background: var(--color-paper);
  align-items: stretch;
}

.rg-sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.rg-sheet__head .rg-mark,
.rg-sheet__head .profile__logo {
  width: 64px;
  height: 64px;
  border: 0;
  font-size: 18px;
}

.rg-sheet__head img.profile__logo {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.rg-sheet__id {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rg-sheet__kind {
  margin: 0;
  font: 700 var(--type-ui)/1.35 var(--font-text);
  color: var(--color-graphite);
  overflow-wrap: anywhere;
}

.rg-sheet .rg-card__tags {
  margin: 0;
}

.rg-sheet + .meta {
  margin-top: var(--space-3);
}

.rg-facts.facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  column-gap: var(--space-5);
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.rg-facts .fact {
  min-width: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-line);
  background: transparent;
}

.rg-facts .fact__k {
  display: block;
  font-size: var(--type-caption);
  font-weight: 400;
  color: var(--color-muted);
}

.rg-facts .fact__v {
  display: block;
  margin: 4px 0 0;
  font: 700 16px/1.4 var(--font-text);
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.rg-facts .fact__v a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rg-sheet .profile__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* «О питомнике» — текст самого питомника, с пунктирной меткой «Со слов». */
.rg-about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px;
  border-radius: var(--radius-card);
  background: var(--color-sand);
}

.rg-about .profile__about {
  max-width: 72ch;
  margin: 0;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--color-graphite);
}

/* «Это мой питомник» — главный шаг владельца на странице: оранжевая плашка
   действия (как «Плановый помёт» в Catalog), кнопка оранжевая, текст чёрный. */
.rg-sheet ~ .claim-box {
  margin: var(--space-3) 0 0;
  padding: 16px 18px;
  border: 1px solid var(--color-action-tint);
  border-radius: var(--radius-card);
  background: var(--color-action-tint);
}

.rg-sheet ~ .claim-box .claim-box__title {
  font: 800 var(--type-title)/1.25 var(--font-text);
  color: var(--color-ink);
}

.rg-sheet ~ .claim-box .claim-box__hint {
  font-size: var(--type-small);
  color: var(--color-graphite);
}

.rg-sheet ~ .claim-box .claim-box__btn,
.rg-sheet ~ .claim-box .claim-box__btn:hover,
.rg-sheet ~ .claim-box .claim-box__btn:focus-visible {
  min-height: var(--control-h);
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-action);
  color: var(--color-on-action);
  font: 800 var(--type-ui)/1 var(--font-text);
  text-decoration: none;
}

/* Форма «Напомнить о выставке»: поле и одна оранжевая кнопка. */
.rg-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.rg-inline-form .input {
  flex: 2 1 240px;
  min-width: 0;
  border-radius: var(--radius-pill);
  padding-inline: 18px;
}

.rg-inline-form .btn {
  border-radius: var(--radius-pill);
}

/* Региональные хабы: таблица реестра — название жирным. */
[data-kennel-hub] .tbl--wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}

[data-kennel-hub] .tbl--wrap .tbl {
  border: 0;
  border-radius: 0;
}

[data-kennel-hub] .tbl--wrap + .meta {
  margin-top: var(--space-3);
}

[data-kennel-hub] .tbl td:first-child {
  font-weight: 700;
  color: var(--color-ink);
}

[data-kennel-hub] .tbl td:first-child a {
  color: inherit;
  text-underline-offset: 3px;
}

/* Дерево предков: белые плитки на песке, неизвестные — пунктиром. */
.pedstat {
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-paper);
}

.pedstat__num {
  font: 600 var(--type-stat)/1.1 var(--font-display);
  letter-spacing: var(--tracking-heading);
  color: var(--color-ink);
}

.pedstat__cap {
  font: 700 var(--type-small)/1.3 var(--font-text);
  color: var(--color-ink);
}

.pedstat__hint {
  font-size: var(--type-caption);
  color: var(--color-muted);
}

.ped__colhead {
  font: 700 var(--type-caption)/1.3 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted);
}

.ped__cell {
  min-height: 48px;
  padding: 8px 11px;
  border-color: var(--color-line);
  border-radius: var(--radius-field);
  background: var(--color-paper);
}

.ped__cell--m {
  border-left-color: var(--color-ink);
}

.ped__cell--f {
  border-left-color: var(--color-muted);
}

.ped__cell--thin {
  background: var(--color-paper);
}

.ped__cell--empty {
  border-color: var(--color-line-dashed);
  background: transparent;
}

.ped__name {
  font-weight: 700;
  color: var(--color-ink);
}

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

/* Каталог собак: карточки как строки реестра. */
.dogcard {
  gap: 4px;
  padding: 14px 16px;
  border-color: var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
}

.dogcard__name {
  font: 800 var(--type-title)/1.25 var(--font-text);
  color: var(--color-ink);
}

.dogcard__meta {
  font-size: var(--type-small);
  color: var(--color-graphite);
}

.dogcard__tags {
  font-size: var(--type-caption);
  color: var(--color-muted);
}

.dogs-freshness {
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-sand);
}

/* Поиск по сайту: вкладки чипами (выбранная — чёрная), результаты строками. */
.rg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}

.rg-tabs [role="tab"] {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font: 600 var(--type-small)/1 var(--font-text);
  cursor: pointer;
}

.rg-tabs [role="tab"]:hover {
  border-color: var(--color-ink);
}

.rg-tabs [role="tab"][aria-selected="true"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: 700;
}

.rg-tabs ~ .results {
  margin-bottom: var(--space-7);
}

.rg-tabs ~ .results .result {
  padding: 14px 18px;
  border-color: var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  transition: transform var(--motion), box-shadow var(--motion);
}

.rg-tabs ~ .results .result:hover,
.rg-tabs ~ .results .result:focus-visible {
  border-color: var(--color-line);
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.rg-tabs ~ .results .result__k {
  padding: 0;
  background: transparent;
  font: 700 var(--type-caption)/1.3 var(--font-text);
  color: var(--color-action-text);
}

.rg-tabs ~ .results .result__t {
  font: 800 var(--type-title)/1.3 var(--font-text);
  color: var(--color-ink);
}

.rg-tabs ~ .results .result__h {
  font-size: var(--type-small);
  color: var(--color-graphite);
}

@media (max-width: 767px) {
  .rg-search {
    min-height: var(--control-h-touch);
    height: auto;
  }

  .rg-card {
    gap: 12px;
    padding: 12px 14px;
  }

  .rg-mark {
    width: 46px;
    height: 46px;
    font-size: 14px;
  }

  .rg-show,
  a.rg-show {
    gap: 12px;
    padding: 12px 14px;
  }

  .rg-date {
    width: 50px;
    height: 54px;
  }

  .rg-date--lg {
    width: 64px;
    height: 70px;
  }

  .rg-search--lg .btn {
    padding: 0 16px;
    height: var(--control-h-touch);
  }

  .rg-inline-form .btn {
    flex: 1 1 100%;
    min-height: var(--control-h-touch);
  }

  .rg-facts.facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }

  .rg-sheet ~ .claim-box .claim-box__btn {
    min-height: var(--control-h-touch);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rg-card,
  .rg-tabs ~ .results .result {
    transition: none;
  }

  .rg-card:has(.rg-card__name a):hover,
  .rg-show:has(a.show__title):hover,
  .rg-tabs ~ .results .result:hover {
    transform: none;
  }
}

/* ---- Гармония блоков реестра: без пустых клеток и без тесноты ---- */

/* Длинный факт (список пород выставки) — во всю ширину листа обычным
   начертанием, а не жирным столбиком в четверть ширины. */
.rg-facts > .fact--wide {
  grid-column: 1 / -1;
}

.rg-facts > .fact--wide .fact__v {
  font: 400 var(--type-small)/1.65 var(--font-text);
  color: var(--color-graphite);
  overflow-wrap: break-word;
}

/* Плитка-ссылка «заголовок + дата»: строка под заголовком, а не тесный
   столбец справа. Архив событий и итогов, соседние выставки. */
.link-box:has(> b + span) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 14px 18px;
  border-color: var(--color-line);
  border-radius: var(--radius-card);
  background: var(--color-paper);
  text-align: left;
}

.link-box:has(> b + span) > b {
  font: 700 var(--type-ui)/1.4 var(--font-text);
  color: var(--color-ink);
}

.link-box:has(> b + span) > span {
  font: 400 var(--type-caption)/1.45 var(--font-text);
  color: var(--color-muted);
}

/* Три карточки в двухколоночной сетке — рядом по три, без полупустого ряда. */
@media (min-width: 960px) {
  .grid2:has(> .infocard:nth-child(3):last-child),
  .grid2:has(> .link-box:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Полоса из одних плиток-ссылок без заголовка (хаб событий) — узкая. */
.section:has(> .wrap > .grid2:only-child > .link-box) {
  padding-block: var(--space-6);
}

/* Календарь: правая колонка («Итоги и архив», «По регионам») едет вместе
   со списком, а не оставляет пустую полосу на всю его длину. */
@media (min-width: 960px) {
  [data-registry-shows] .shows-grid > .rg-col:last-child {
    position: sticky;
    top: var(--header-h);
  }
}

/* Карточка-блок на хабе региона и в источниках события: заголовок
   карточки, а не секции; текст строкой читаемой длины. */
main:has([data-kennel-hub]) .card--block > h2,
.section[aria-label="Источники"] .card--block > h2 {
  font-size: var(--type-h3);
}

main:has([data-kennel-hub]) .card--block > p:not(.meta) {
  max-width: 72ch;
}

.section[aria-label="Источники"] .card--block > ul.meta {
  list-style: disc;
}

.section[aria-label="Источники"] .card--block > ul.meta li + li {
  margin-top: var(--space-2);
}

/* Длинное слово в заголовке (Bundessiegerzuchtschau) не выдавливает
   страницу шире экрана. */
main h1 {
  overflow-wrap: anywhere;
}

/* Каталог собак: фильтры — та же песочная панель и поля-пилюли, что
   у питомников и выставок. */
[data-dogs-filters].filters {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, .8fr);
  align-items: end;
  gap: 12px;
  margin-bottom: var(--space-5);
  padding: clamp(20px, 2.6vw, 32px);
  border-radius: var(--radius-block);
  background: var(--color-sand);
}

[data-dogs-filters] .field {
  min-width: 0;
  gap: 6px;
}

[data-dogs-filters] .field__label {
  font: 700 var(--type-caption)/1.3 var(--font-text);
  color: var(--color-graphite);
}

[data-dogs-filters] :is(input, select).input {
  width: 100%;
  height: 54px;
  padding-inline: 18px;
  border-color: var(--color-line-strong);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
  font-size: 16px;
}

[data-dogs-filters] select.input {
  padding-inline: 18px 40px;
  font: 600 var(--type-ui)/1.2 var(--font-text);
  color: var(--color-ink);
}

/* Строка «Архив» (выставка, событие) — ближе к содержимому, без пустой
   полосы: у её секции нет нижнего отступа, у следующей — уменьшенный верхний. */
.section[style*="padding-bottom:0"] + .section {
  padding-top: var(--space-5);
}

/* Дерево предков: строка заголовка поколения своей высоты, клетки делят
   остальное поровну — I поколение встаёт напротив своих половин дерева,
   а не уезжает вниз. Буква повторяющегося предка — в углу клетки. */
.ped__col {
  grid-template-rows: auto;
  grid-auto-rows: 1fr;
}

.ped__cell:has(> .ped__mark) {
  padding-right: 36px;
}

.ped__cell > .ped__mark {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
}

/* Дальним поколениям — больше ширины: клички в одну строку, дерево ниже. */
@media (min-width: 960px) {
  .ped__col[data-gen="1"],
  .ped__col[data-gen="2"] {
    flex-grow: .8;
  }

  .ped__col[data-gen="4"] {
    flex-grow: 1.4;
  }
}

.ped__legend-list li {
  display: block;
  position: relative;
  padding-left: 30px;
}

.ped__legend-list li > .ped__mark {
  position: absolute;
  top: 2px;
  left: 0;
  margin: 0;
}

@media (max-width: 767px) {
  /* Регионы — две колонки плиток вместо 85 строк по одной. */
  [data-reg-regions].pill-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  [data-reg-regions] .chip {
    justify-content: flex-start;
    min-width: 0;
    min-height: 44px;
    padding: 6px 12px;
    border-radius: var(--radius-field);
    font-size: var(--type-caption);
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Таблица региона — строками-карточками: название, город и федерация,
     породы; без горизонтальной прокрутки и обрезанного столбца. */
  [data-kennel-hub] .tbl--wrap {
    overflow: hidden;
  }

  [data-kennel-hub] .tbl,
  [data-kennel-hub] .tbl tbody {
    display: block;
  }

  [data-kennel-hub] .tbl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  [data-kennel-hub] .tbl tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    padding: 4px 16px 12px;
    border-bottom: 1px solid var(--color-line);
  }

  [data-kennel-hub] .tbl tbody tr:last-child {
    border-bottom: 0;
  }

  [data-kennel-hub] .tbl td {
    display: block;
    padding: 0;
    border: 0;
    font-size: var(--type-small);
    line-height: 1.45;
  }

  [data-kennel-hub] .tbl td:first-child,
  [data-kennel-hub] .tbl td:nth-child(4) {
    grid-column: 1 / -1;
  }

  [data-kennel-hub] .tbl td:first-child {
    font-size: 16px;
  }

  [data-kennel-hub] .tbl td:nth-child(2) {
    color: var(--color-graphite);
  }

  [data-kennel-hub] .tbl td:nth-child(3) {
    color: var(--color-muted);
    text-align: right;
  }

  [data-kennel-hub] .tbl td:nth-child(4) {
    color: var(--color-graphite);
  }

  [data-kennel-hub] .tbl [data-hub-profile] {
    padding: 8px 0 2px;
    min-height: 44px;
  }

  /* Шапка листа: плитка даты/монограмма — по верху текста, не по центру. */
  .rg-sheet__head {
    align-items: flex-start;
  }

  /* Фильтры собак: поиск во всю ширину, порода и пол — в ряд. */
  [data-dogs-filters].filters {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    padding: 18px;
  }

  [data-dogs-filters] .field--grow {
    grid-column: 1 / -1;
  }
}
/* ==== /2.0 · Питомники, выставки, собаки ==== */

/* ==== 2.0 · Библиотека ==== */
/* Журнал (/zhurnal/, scripts/seo/journal.py) по артборду Library, блок
   «Разборы»: крупная белая карточка во всю ширину (заголовок Unbounded слева,
   анонс справа — без пустого низа), под ней строка песочных, остальные —
   сеткой auto-fit. Рубрика — оранжевым текстом 13/700, дата — «Обновлено
   30.09.2026». Ридер /knowledge/ оформлен в
   web/apps/knowledge/static/knowledge/reader.css: его разметка живёт
   в шаблонах Django и в статической сборке не встречается. */
.jr-feature { display: flex; flex-direction: column; gap: var(--space-4); }
.jr-feature__side {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-4); min-width: 0;
}
.jr-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--layout-card-min), 100%), 1fr));
  gap: var(--space-4); margin-top: var(--space-4);
}
.jr-card { gap: var(--space-2); min-width: 0; color: var(--color-ink); }
.jr-card--feature { justify-content: flex-start; gap: var(--space-3); padding: 28px; border-radius: var(--radius-block); }
.jr-card__kicker { color: var(--color-action-text); font: 700 var(--type-caption)/1.3 var(--font-text); }
.jr-card__title { color: var(--color-ink); font: 700 19px/1.25 var(--font-text); }
.jr-card--feature .jr-card__title {
  max-width: 24ch; font: 600 clamp(24px, 2.2vw, 32px)/1.12 var(--font-display); letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
.jr-card__text { color: var(--color-graphite); font-size: var(--type-small); line-height: 1.5; }
.jr-card--feature .jr-card__text { max-width: 60ch; font-size: 16px; line-height: var(--leading-body); }
.jr-card__meta { margin-top: auto; padding-top: 4px; color: var(--color-muted); font-size: var(--type-caption); }
a.jr-card:hover .jr-card__title { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 960px) {
  .jr-card--feature {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto;
    column-gap: 48px; row-gap: var(--space-3); padding: 32px 36px;
  }
  .jr-card--feature .jr-card__kicker { grid-column: 1; grid-row: 1; }
  .jr-card--feature .jr-card__title { grid-column: 1; grid-row: 2 / 4; align-self: start; }
  .jr-card--feature .jr-card__text { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  .jr-card--feature .jr-card__meta { grid-column: 2; grid-row: 3; margin-top: 0; }
}

@media (max-width: 767px) {
  .jr-card--feature { padding: 20px; border-radius: var(--radius-card); }
  .jr-card--feature .jr-card__title { font-size: 24px; }
}
/* ==== /2.0 · Библиотека ==== */

/* Public breeder introduction stays visible outside the kennel directory. */
.ch-utility--business {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 40px;
  padding-inline: max(var(--layout-gutter), calc((100vw - var(--layout-wrap)) / 2 + var(--layout-gutter)));
  background: var(--color-sand);
}
.ch-utility--business .ch-utility__bar { min-height: 40px; margin: 0; padding: 0; }
.ch-business-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin-left: auto;
  color: var(--color-ink);
  font: 600 var(--type-caption)/1.2 var(--font-text);
  text-decoration: none;
}
.ch-business-link:hover { color: var(--color-ink); text-decoration: underline; }
@media (max-width: 959px) { .ch-utility--business { display: none; } }

/* Breeder product entrance — one compact demonstration on the home page. */
.home-business__inner{display:grid;grid-template-columns:1.3fr 1fr;gap:64px;padding:42px;border-radius:24px;background:#f5f3ed;border:1px solid #e4e4da;align-items:center}
.home-business__eyebrow{font:600 11px/1.5 Onest,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6e775f}
.home-business__inner h2{font:500 clamp(25px,3vw,37px)/1.2 Onest,sans-serif;letter-spacing:-.04em;margin:17px 0}
.home-business__inner p{font-size:14px;line-height:1.8;color:#62695a;max-width:440px;margin:0 0 23px}
.home-business__inner .pp-btn{font-size:13px;gap:20px}
.home-business__path{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.home-business__path li{display:grid;grid-template-columns:25px 1fr;column-gap:12px;padding:15px 17px;background:white;border:1px solid #dedfd6;border-radius:13px}
.home-business__path li>span{grid-row:1/3;font-size:10px;color:#6a7756;padding-top:4px}
.home-business__path strong{font-size:14px;font-weight:500}.home-business__path small{font-size:11px;color:#717b63}
@media(max-width:767px){.home-business__inner{grid-template-columns:1fr;gap:28px;padding:25px 22px}.home-business__inner h2{font-size:28px}.home-business__inner p{font-size:13px}.home-business__inner .pp-btn{font-size:11px;min-height:48px}.home-business__path li{padding:14px}.home-business__path strong{font-size:13px}.home-business__path small{font-size:10px}}

/* One lockup for breeder-facing pages; see brand/README.md. */
.pt-breeder-brand{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;text-decoration:none;color:inherit}
.pt-breeder-brand>img{display:block;width:var(--brand-width,184px);height:auto;flex-shrink:0}
.pt-breeder-brand__audience{position:relative;align-self:flex-start;top:-11px;flex-shrink:0;padding:3px 7px;border-radius:6px 6px 6px 0;background:linear-gradient(110deg,#7650db,#5833b7);color:#fff;font:500 10px/1.1 Onest,Arial,sans-serif;letter-spacing:.015em;white-space:nowrap}
@media(max-width:767px){.pt-breeder-brand{gap:5px}.pt-breeder-brand__audience{top:-9px;padding-inline:5px;font-size:9px}}

/* Small editorial art inside existing home cards, below the search. */
/* Task illustrations replace small generic badges without covering labels. */
.home-door__visual{display:flex;align-items:center;justify-content:center;height:112px;margin:-6px 0 2px;color:var(--color-alarm)}
.home-door-art{display:block;width:168px;max-width:100%;mix-blend-mode:multiply}
.home-door-art img{display:block;width:100%;height:136px;object-fit:cover}
.home-emergency-mark{display:block;max-width:100%;height:112px}
@media(max-width:767px){
 .home-door:has(.home-door__visual){grid-template-columns:clamp(64px,20vw,88px) minmax(0,1fr);gap:4px 10px;padding:14px 32px 14px 12px}
 .home-door__visual{grid-row:span 2;height:92px;margin:0}
 .home-door-art{width:100%}.home-door-art img,.home-emergency-mark{width:100%;height:92px}
 .home-door:has(.home-door__visual)::after{top:14px;right:12px}
}

/* Editorial navigation: real topic spots, compact semantic fallbacks. */
.subgrid--editorial .subcard { position: relative; min-width: 0; }
.subgrid--editorial .subcard__art {
  display: block;
  height: clamp(140px, 17vw, 190px);
  aspect-ratio: auto;
  background: #f7f5f0;
  overflow: hidden;
}
.subgrid--editorial .subcard__art picture,
.subgrid--editorial .subcard__art img {
  display: block;
  width: 100%;
  height: 100%;
}
.subgrid--editorial .subcard__art img {
  object-fit: contain;
  mix-blend-mode: multiply;
}
.subgrid--editorial .subcard__body { padding-right: 38px; }
.subcard__arrow {
  position: absolute;
  right: 16px;
  bottom: 17px;
  color: var(--accent, #c84410);
  font-size: 20px;
}
.subcard__symbol {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 20px 16px 4px;
  border-radius: 16px;
  background: #fbefe6;
  color: #bd461c;
}
.subgrid--editorial .subcard--compact { background: #fffdfa; }
.subgrid.subgrid--editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .subgrid--editorial:has(> .subcard--compact) .subcard {
    min-height: 160px;
    align-items: center;
  }
  .subgrid--editorial:has(> .subcard--compact) .subcard--illustrated {
    display: grid;
    grid-template-columns: 40% minmax(0, 1fr);
  }
  .subgrid--editorial:has(> .subcard--compact) .subcard__art { height: 160px; }
  .subgrid--editorial:has(> .subcard--compact) .subcard--compact { flex-direction: row; }
  .subgrid--editorial:has(> .subcard--compact) .subcard__symbol { flex: 0 0 56px; margin: 16px 0 16px 16px; }
}
@media (min-width: 960px) {
  .subgrid.subgrid--editorial { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .subgrid--editorial > .subcard { grid-column: span 2; }
  .subgrid--editorial:has(> .subcard:nth-child(5):last-child) > .subcard:nth-child(-n+2),
  .subgrid--editorial:has(> .subcard:nth-child(4):last-child) > .subcard { grid-column: span 3; }
}
@media (min-width: 768px) and (max-width: 959px) {
  .subgrid--editorial > .subcard:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    align-items: center;
  }
}
@media (max-width: 767px) {
  .subgrid--editorial .subcard__art { height: 116px; }
  .subgrid--editorial > .subcard:last-child:nth-child(odd) {
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    align-items: center;
  }
  .subgrid--editorial > .subcard:last-child:nth-child(odd) .subcard__art {
    height: 100%;
    min-height: 128px;
    aspect-ratio: auto;
  }
  .subgrid.subgrid--editorial:has(> .subcard--compact) { grid-template-columns: minmax(0, 1fr); }
  .subgrid--editorial:has(> .subcard--compact) > .subcard {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 128px;
    align-items: center;
  }
  .subgrid--editorial:has(> .subcard--compact) .subcard__art { height: 100%; min-height: 128px; }
  .subgrid--editorial:has(> .subcard--compact) .subcard__symbol { margin: 16px; }
}