/* СКОПИРОВАНО МАШИНОЙ — ПРАВИТЬ ЗДЕСЬ НЕЛЬЗЯ.
 * Источник: 02-ERFOLG/site/_shared/razdely/razdel.css
 * Правка в этой копии живёт до первой синхронизации и молча исчезает.
 * Разнести заново: python3 02-ERFOLG/site/sync_razdely.py
 */
/* ═══════════════════════════════════════════════════════════════════════════
   СТРАНИЦА РАЗДЕЛА КАТАЛОГА — оформление, одно на все витрины. 30.08.2026.

   ЗДЕСЬ ТОЛЬКО ТО, ЧЕГО НЕ БЫЛО. Плитка товара — сетка, снимок, пластина без
   снимка, имя, марка, цена, строка хода — уже описана в podborshchik.css
   (.pb-tovary, .pb-tovar…). Страница раздела берёт её ОТТУДА и второй копии не
   заводит: разошлись бы молча, и один и тот же плед выглядел бы в подборщике и
   в разделе двумя разными вещами. Поэтому <main> страницы несёт класс .pb —
   именно на нём объявлены --pb-* (podborshchik.css), а без него плитка
   осталась бы без цвета.

   ЦВЕТ ЧИСЛОМ ЗДЕСЬ НЕ ПИШЕТСЯ ВООБЩЕ. Все значения — var(--pb-*), то есть в
   конце концов палитра самого сайта. Вбитый числом цвет не переключается
   вместе с тёмной темой: :root обновится, а это место останется в прежней
   гамме (audit_site.py, check_color_in_css).

   РАЗМЕРЫ И РИТМ — общие токены _shared/tokens/core.css, нижняя граница шкалы:
   «все размашистые места плотнее — чтоб не скроллить клиенту» (Айгуль,
   28.08.2026). У страницы раздела это особенно важно: под шапкой идут сто с
   лишним плиток, и каждый лишний отступ множится на сто.
   ═══════════════════════════════════════════════════════════════════════════ */

.razdel {
  max-width: var(--wrap, 1200px);
  margin: 0 auto;
  padding: var(--space-4, 40px) var(--gutter, 32px) var(--space-5, 64px);
}

/* ── ШАПКА РАЗДЕЛА ──────────────────────────────────────────────────────── */

.rz-shapka { max-width: var(--measure, 65ch); }

.rz-nad {
  display: block;
  font-size: var(--fs-label, .75rem);
  font-weight: var(--fw-label, 500);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--pb-muted);
}
.rz-imya {
  margin: var(--space-1, 8px) 0 0;
  font-size: var(--fs-h2, 3rem);
  font-weight: var(--fw-h2, 400);
  line-height: var(--lh-h2, 1.08);
  letter-spacing: var(--tr-h2, -.01em);
}
.rz-lid {
  margin: var(--space-2, 16px) 0 0;
  font-size: var(--fs-lead, 1.25rem);
  line-height: var(--lh-lead, 1.5);
  color: var(--pb-muted);
}

/* ── РАЗБОРЫ В ЖУРНАЛЕ ──────────────────────────────────────────────────────
   Ссылка из раздела каталога в статью журнала. Стоит под шапкой раздела и до
   отбора: человек, пришедший выбирать, ещё не начал выбирать — здесь разбор
   ему полезен, а после сотни плиток он его уже не увидит. Заведено 09.09.2026
   вместе с журналом (sync_zhurnal.py, sync_razdely.py::полоса_разборов).

   Вид повторяет «таблетки» связей на странице статьи (zhurnal.css, .zh-svyaz):
   ссылка между разделами каталога и журналом выглядит одинаково с обеих
   сторон, чтобы читалась как одна и та же дорожка. Цвет числом не пишется —
   только var(--pb-*), иначе полоса не переключится вместе с тёмной темой. */

.rz-razbory {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2, 16px);
  margin-top: var(--space-3, 24px);
}
.rz-razbory-nad {
  font-size: var(--fs-label, .75rem);
  font-weight: var(--fw-label, 500);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--pb-muted);
}
.rz-razbor {
  display: inline-block;
  padding: 10px var(--space-2, 16px);
  border: 1px solid var(--pb-line);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-cap, .9375rem);
  transition: .25s var(--ease, ease);
}
.rz-razbor:hover { border-color: var(--pb-accent); color: var(--pb-accent); }

/* ── «КОМУ ВЫБИРАЕТЕ» — ВХОД ОДНИМ НАЖАТИЕМ ────────────────────────────────
   Заведено 12.09.2026 по её словам о разделе «Детское»: «я хочу купить подарок
   ребенку, я буду сидеть разбирать этот сложный путь клиента?». Отбор по
   граням остаётся ниже — им сужают; здесь вход: возраст, и в нём девочке или
   мальчику. Одно нажатие ставит сразу два условия.

   ПОЧЕМУ КРУПНЕЕ ГРАНЕЙ. Это первое, что человек делает на странице, и по
   размеру оно обязано отличаться от рядов отбора под ним — иначе на экране
   шесть одинаковых полос кнопок, и вход теряется среди них. Возраст —
   карточка, «девочке/мальчику» внутри неё мельче: они уточняют возраст, а не
   стоят рядом с ним.

   РИТМ — нижняя граница токенов: под этим блоком идут ещё отбор, счёт и сотня
   плиток («все размашистые места плотнее — чтоб не скроллить клиенту», Айгуль
   28.08.2026). Цвет числом не пишется нигде — только var(--pb-*), иначе блок
   не переключится вместе с тёмной темой.

   БЕЗ СКРИПТА НЕ ПОКАЗЫВАЕТСЯ — тот же приём, что у .rz-otbor ниже, и та же
   причина: нажимаемое обязано работать. Список раздела и без скрипта полон. */

.rz-vhody { display: none; }
.rz-zhivoy .rz-vhody { display: block; margin-top: var(--space-3, 24px); }

.rz-vhody-nad {
  display: block;
  font-size: var(--fs-label, .75rem);
  font-weight: var(--fw-label, 500);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--pb-ink);
}
.rz-vhody-lid {
  max-width: var(--measure, 65ch);
  margin: var(--space-1, 8px) 0 0;
  font-size: var(--fs-cap, .9375rem);
  line-height: var(--lh-body, 1.55);
  color: var(--pb-muted);
}
/* Сетка, а не flex-wrap: четыре возраста обязаны быть одной высоты и одной
   ширины — ряд читается как шкала, а разноширокие карточки читаются как
   случайный набор. auto-fit сам переносит их на телефоне. */
.rz-vhody-ryad {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-1, 8px);
  margin: var(--space-2, 16px) 0 0;
  padding: 0;
  list-style: none;
}
/* ОДНОЙ СТРОКОЙ, А НЕ СТОЛБИКОМ — 14.09.2026, её слово «не нравится» про
   высоту входа на телефоне. Было: возраст своей строкой, пол строкой под ним,
   карточка ~98 px, четыре карточки 392 px, весь блок 536 px при странице
   6689 px — две трети экрана телефона до первого товара. Стало: возраст и пол
   в одной строке, карточка ~60 px. Тап-цель 44 px у возраста сохранена: это
   --tap-min, и ужимать её ради вида нельзя. */
.rz-vhod {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px var(--space-1, 8px);
  padding: 2px var(--space-1, 8px);
  border: 1.5px solid var(--pb-line);
  border-radius: var(--radius-card, 16px);
  background: transparent;
  transition: .2s var(--ease, ease);
}
.rz-vhod:hover { border-color: var(--pb-accent); }
.rz-vhod-vozrast {
  min-height: var(--tap-min, 44px);
  padding: var(--space-1, 8px);
  border: 0;
  border-radius: var(--radius-btn, 12px);
  background: transparent;
  color: var(--pb-ink);
  font: inherit;
  font-size: var(--fs-body, 1rem);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: .2s var(--ease, ease);
}
.rz-vhod-vozrast:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; }
.rz-vhod-vozrast[aria-pressed="true"] {
  background: var(--pb-ink);
  color: var(--pb-belyy);
}
.rz-vhod-pol { display: flex; flex-wrap: wrap; gap: 2px; }
.rz-vhod-reb {
  min-height: 36px;
  padding: 6px var(--space-1, 8px);
  border: 0;
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--pb-muted);
  font: inherit;
  font-size: var(--fs-cap, .9375rem);
  cursor: pointer;
  transition: .2s var(--ease, ease);
}
.rz-vhod-reb:hover { color: var(--pb-accent); }
.rz-vhod-reb:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; }
.rz-vhod-reb[aria-pressed="true"] {
  background: var(--pb-ink);
  color: var(--pb-belyy);
}
/* Вход, который обнулил бы выдачу, гасится — тем же правилом, что кнопки
   отбора: начав с непустого экрана, в пустой попасть нельзя. */
.rz-vhod-vozrast[disabled],
.rz-vhod-reb[disabled] { opacity: .4; cursor: not-allowed; }

/* ── ОТБОР ──────────────────────────────────────────────────────────────────
   Граней столько, сколько раздел заслужил данными: у пледов марка, размер и
   цена, у наматрасников будет своё. Ни одна не перечислена в разметке руками —
   их считает sync_razdely.py по самой витрине (см. его ГРАНИ).

   Форма, а не набор ссылок: без скрипта она просто не показывается (.rz-otbor
   спрятан до того, как razdel.js объявит себя живым). Показанный фильтр,
   который не фильтрует, хуже отсутствующего. */

.rz-otbor { display: none; }
.rz-zhivoy .rz-otbor { display: block; margin-top: var(--space-4, 40px); }

/* Слово «Отбор» над всеми гранями — ступенью выше имени грани: иначе
   «Отбор», «Марка» и «Размер» читаются как три равных заголовка подряд. */
.rz-otbor-imya {
  display: block;
  font-size: var(--fs-label, .75rem);
  font-weight: var(--fw-label, 500);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--pb-ink);
}
.rz-otbor-imya + .rz-gran { margin-top: var(--space-2, 16px); }

.rz-gran + .rz-gran { margin-top: var(--space-2, 16px); }

.rz-gran-imya {
  display: block;
  margin-bottom: var(--space-1, 8px);
  font-size: var(--fs-label, .75rem);
  font-weight: var(--fw-label, 500);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--pb-muted);
}

.rz-znacheniya { display: flex; flex-wrap: wrap; gap: 6px; }

/* Кнопка значения. Форма и поведение те же, что у ответа подборщика
   (.pb-otvet): выбранное заливается, невозможное гасится и не нажимается.
   Своего вида здесь не изобретаем — человек уже видел эти кнопки в подборщике
   на этом же сайте. */
.rz-znachenie {
  min-height: var(--tap-min, 44px);
  /* Отбивки по бокам узкие сознательно: у значений отбора текст короткий
     («37×50», «Пледы»), а таких кнопок в одной грани бывает больше двадцати.
     Широкая отбивка на каждой уносит ряды экрана, ничего не добавляя к
     читаемости. Высота остаётся 44 px — это цель для пальца, её не жмём. */
  padding: var(--space-1, 8px) 10px;
  /* Цель для пальца — не только высота: у короткого значения («XS», «S»)
     узкая отбивка сделала кнопку 39 px по ширине, и ворота это поймали.
     min-width держит 44 px у коротких, длинные по-прежнему жмутся отбивкой. */
  min-width: var(--tap-min, 44px);
  background: transparent;
  border: 1.5px solid var(--pb-line);
  border-radius: var(--radius-pill, 999px);
  color: inherit;
  font: inherit;
  font-size: var(--fs-cap, .9375rem);
  cursor: pointer;
  transition: .2s var(--ease, ease);
}
.rz-znachenie:hover,
.rz-znachenie:focus-visible { border-color: var(--pb-accent); outline: none; }
.rz-znachenie[aria-pressed="true"] {
  background: var(--pb-ink);
  border-color: var(--pb-ink);
  color: var(--pb-belyy);
}
/* Значение, которое обнулило бы список, гасится, но не исчезает: серая
   «240×260» говорит, что такого размера у выбранной марки не бывает, а
   исчезнувшая не говорит ничего. Правило и причина те же, что у
   otbor.js::доступныОтветы. */
.rz-znachenie[disabled] { opacity: .4; cursor: not-allowed; }

.rz-schyot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2, 16px);
  margin-top: var(--space-3, 24px);
  padding-top: var(--space-2, 16px);
  border-top: 1px solid var(--pb-line);
  font-size: var(--fs-cap, .9375rem);
  color: var(--pb-muted);
}
.rz-schyot b { color: var(--pb-ink); font-weight: 600; }

.rz-sbros {
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--pb-accent);
  font: inherit;
  font-size: var(--fs-cap, .9375rem);
  cursor: pointer;
}
.rz-sbros[hidden] { display: none; }

.rz-poryadok { margin-left: auto; display: flex; gap: var(--space-2, 16px); }
.rz-poryadok button {
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  font-size: var(--fs-cap, .9375rem);
  cursor: pointer;
}
.rz-poryadok button[aria-pressed="true"] {
  color: var(--pb-ink);
  border-bottom: 1px solid var(--pb-accent);
}

/* ── СПИСОК ─────────────────────────────────────────────────────────────────
   .pb-tovary держит сетку и промежутки, здесь только сброс списочной разметки:
   <ul> ради того, чтобы экранный диктор назвал число позиций, а не читал сто
   ссылок подряд без счёта. */

.rz-spisok { list-style: none; padding: 0; }
.rz-spisok > li { display: flex; }
.rz-spisok > li > .pb-tovar { width: 100%; }
.rz-spisok > li[hidden] { display: none; }

/* «Показать ещё» держится на классе, а не на атрибуте hidden в разметке, и
   вот почему. Прятать лишние плитки обязан ТОЛЬКО живой скрипт: он же умеет их
   вернуть кнопкой. Спрятанные прямо в файле, они у человека без скрипта не
   открылись бы ничем — раздел из 121 модели навсегда показывал бы 24. Правило
   .rz-zhivoy .rz-sverh срабатывает лишь после того, как razdel.js объявил себя
   живым; до того и без него страница остаётся полным списком раздела.
   Тот же приём, что у .rz-otbor выше: показанное должно работать. */
.rz-zhivoy .rz-spisok > li.rz-sverh { display: none; }

/* ПОДГРУППА РАЗДЕЛА — вещи того же раздела, но другого назначения (подушка для
   ног и под колено в разделе подушек). Отделяется линией и заголовком, а не
   пустотой: пустотой человек прочитал бы её как конец страницы и не пошёл
   дальше. Отступ берётся по нижней границе шкалы — размашистость на HOME уже
   стоила отдельного замечания Айгуль 04.09.2026 на /tovar/. */
.rz-podgruppa {
  margin-top: var(--space-4, 40px);
  padding-top: var(--space-3, 24px);
  border-top: 1px solid var(--line, rgba(0,0,0,.12));
}
.rz-podgruppa-imya {
  margin: 0 0 var(--space-1, 8px);
  font-size: var(--fs-h3, 1.375rem);
  font-weight: var(--fw-h1, 300);
}
.rz-podgruppa-lid {
  margin: 0 0 var(--space-3, 24px);
  max-width: 62ch;
  font-size: var(--fs-lead, 1.125rem);
  color: var(--muted, #6b6257);
}

/* ПОДГРУППА ИДЁТ ОДНИМ РЯДОМ, а не сеткой основного списка. Замер 04.09.2026:
   тремя обычными плитками она занимала 997 px — на телефоне это плюс полтора
   экрана прокрутки к разделу, при том что позиций всего три и спрос на них
   редкий. Основной список показывает 24 модели и прячет остальное за «Показать
   ещё»; подгруппа показана всегда и целиком, поэтому её высота ложится на
   страницу без остатка — это и дало рост.
   Три в ряд даже на узком экране: названия здесь короткие («Подушка под
   колено»), а снимок в трети ширины телефона всё ещё узнаваем. Прятать их за
   сворачиванием не стала — Айгуль просила «вынести в отдельную группу», а не
   убрать с глаз. */
.rz-spisok-podgruppa.pb-tovary {
  grid-template-columns: repeat(3, 1fr);
}


/* Размер прямо в плитке. Для пледа это первое, что спрашивают, и он есть у
   всех 121 модели — в отличие от снимка. Строка тихая, той же ступенью, что
   марка: имя вещи крупно, факты о ней отдельной строкой (решение Айгуль
   29.08.2026 по карточке «Одеяло Xdream…»). */
.rz-razmer {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-cap, .875rem);
  color: var(--pb-ink);
}

/* Срок и наличие — рисуются ТОЛЬКО когда в разделе они разные. В разделе, где
   все позиции со склада, строка «со склада» на каждой плитке повторяла бы одно
   слово сто двадцать один раз (тот же шум, что надзаголовок раздела в выдаче
   одного раздела, найденный Айгуль 29.08.2026). */
.rz-srok {
  display: inline-block;
  margin-top: var(--space-1, 8px);
  padding: 2px var(--space-1, 8px);
  border: 1px solid var(--pb-line);
  border-radius: var(--radius-pill, 999px);
  font-size: var(--fs-cap, .875rem);
  color: var(--pb-ink);
}

/* ── ЧИТАЕМОСТЬ ПЛИТКИ — правка по слову Айгуль 31.08.2026 ───────────────────
   Её слова с живого: «на странице самих пледов они неяркие и с моим зрением
   немного трудно разглядеть названия пледов». Замер Оркестратора на 375 px:
   имя — 14px (мелко для заголовка плитки), марка/цена — 12px блёклым серым
   (~3:1, ниже нормы 4.5:1 для мелкого текста).

   Общая плитка (.pb-tovar…) — из podborshchik.css, её держит другая сессия и
   ею же пользуется живой подборщик на других страницах: править её здесь
   значило бы менять чужой файл ради одной страницы. Поэтому три роли
   переопределены СКОБКОЙ .razdel — уже, чем podborshchik.css, специфичность
   выше и media-запрос мобильного подборщика (тот же .pb-tovar-imya) её не
   перебивает ни при какой ширине экрана.

   Кегль взят из уже объявленных ступеней (--fs-body, --fs-cap) — не на глаз;
   серый заменён на --pb-ink (тот же тёмный тон, что у имени): контраст держит
   размер и вес, а не цвет — так рекомендует WCAG там, где яркость самого
   серого поднять нельзя, не сломав палитру остальной витрины. */
.razdel .pb-tovar-imya {
  font-size: var(--fs-body, 1rem);
}
.razdel .pb-tovar-brend,
.razdel .pb-tovar-cena {
  font-size: var(--fs-cap, .875rem);
  color: var(--pb-ink);
}

/* ── ХВОСТ ──────────────────────────────────────────────────────────────── */

.rz-eshchyo {
  display: block;
  margin: var(--space-4, 40px) auto 0;
  min-height: var(--tap-min, 44px);
  padding: var(--space-1, 8px) var(--space-4, 40px);
  background: transparent;
  border: 1.5px solid var(--pb-line);
  border-radius: var(--radius-pill, 999px);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.rz-eshchyo:hover { border-color: var(--pb-accent); }
.rz-eshchyo[hidden] { display: none; }

.rz-pusto {
  margin-top: var(--space-4, 40px);
  color: var(--pb-muted);
}
.rz-pusto[hidden] { display: none; }

/* ── ПОЛОСА РАЗДЕЛОВ НА ГЛАВНОЙ ────────────────────────────────────────────
   Плитка — готовые классы главной страницы (.tile/.meta/.subs/.go из
   home.css): раздел каталога выглядит той же вещью, что и грид «Разделы
   сайта» чуть ниже, а не отдельным компонентом. Здесь только раскладка —
   auto-fit вместо фиксированных 12 колонок catmega, потому что число открытых
   разделов растёт по одному, а не шестёркой сразу: с одним разделом сетка не
   должна тянуть его на всю ширину экрана, с пятью — не должна ужиматься в
   нечитаемые колонки. minmax(240px, 1fr) держит и то, и другое без точки
   переключения, которую пришлось бы двигать при каждом новом разделе. */
/* ПЕРЕСМОТРЕНО 11.09.2026, слово Айгуль: «самописный раздел был красивый и
   вёл в товары — теперь два раздела ведут в подбор — реши сама, сделай красиво
   и профессионально». Сказано после того, как рядом сняли рукописную полосу
   «Разделы сайта» (четыре крупные плитки .catmega). auto-fit minmax(240px)
   ставил четырнадцать одинаковых плиток ровной таблицей — вход в каталог
   выглядел описью, а не витриной, и рядом с крупными плитками рукописной
   полосы читался как мелкий шрифт.
   Теперь раскладка с иерархией, как на любой витрине: первые две плитки —
   разворот на половину ширины каждая (самые крупные разделы каталога, их
   лицо и должно быть видно), остальные ровной сеткой по четыре. Высота
   больше прежней, но блок стал КОРОЧЕ: 380 + три ряда по 280 против четырёх
   рядов ровной сетки — меньше прокрутки, а не больше (её же правило «не
   переборщить с пустотами»).
   Лестница 3→2→1 повторяет .catmega в home.css намеренно: две полосы стояли
   рядом, и ломаться на разной ширине они обязаны одинаково. */
.rz-glavnaya-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  margin-top: 50px;
}
.rz-glavnaya-grid > .tile { grid-column: span 3; min-height: 280px }
.rz-glavnaya-grid > .tile.rz-shirokaya { grid-column: span 6; min-height: 380px }

@media (max-width: 1100px) {
  .rz-glavnaya-grid > .tile { grid-column: span 4 }
}
@media (max-width: 900px) {
  .rz-glavnaya-grid > .tile,
  .rz-glavnaya-grid > .tile.rz-shirokaya { grid-column: span 6; min-height: 260px }
}
@media (max-width: 640px) {
  .rz-glavnaya-grid > .tile,
  .rz-glavnaya-grid > .tile.rz-shirokaya { grid-column: 1 / -1; min-height: 230px }
}

/* ── ТЕЛЕФОН ────────────────────────────────────────────────────────────────
   Сетка плиток сжимается сама (podborshchik.css, ≤900 и ≤600 px). Здесь только
   то, что принадлежит этой странице: заголовок и лид в общий ритм телефона,
   порядок сортировки уходит на свою строку — на 375 px он не помещается рядом
   со счётчиком и выдавливал бы его за край. */
/* ── ОПИСЬ ОТКРЫТЫХ РАЗДЕЛОВ (razdel/index.html) ────────────────────────────
   Список короткий (столько, сколько разделов Айгуль открыла), поэтому карточка
   крупнее плитки товара — здесь не сто двадцать одна строка, а одна-две. */
.rz-spisok-razdelov {
  list-style: none;
  padding: 0;
  margin-top: var(--space-4, 40px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-2, 16px);
}
.rz-spisok-razdelov a {
  display: block;
  /* Высота карточки — от ряда, а не от длины подписи. Без этого рамка
     обнимала свой текст: «Текстиль в новый дом» в одну строку и «Полотенце,
     плед, косметичка» в две давали в одном ряду две разные высоты рамок,
     и ряд читался как рваный. Ячейка сетки и так растянута по ряду —
     карточке остаётся её занять. Заведено 10.09.2026 по замечанию Айгуль
     о странице подарков; на описи разделов работает так же. */
  height: 100%;
  box-sizing: border-box;
  padding: var(--space-3, 24px);
  border: 1.5px solid var(--pb-line);
  border-radius: var(--radius-card, 16px);
  color: inherit;
  transition: .2s var(--ease, ease);
}
.rz-spisok-razdelov a:hover { border-color: var(--pb-accent); }
.rz-spisok-razdelov b {
  display: block;
  font-size: var(--fs-h3, 1.375rem);
  font-weight: var(--fw-h3, 500);
}
.rz-spisok-razdelov span {
  display: block;
  margin-top: var(--space-1, 8px);
  font-size: var(--fs-cap, .9375rem);
  color: var(--pb-muted);
}

/* ── ТА ЖЕ ОПИСЬ, НО СО СНИМКОМ (podarki/index.html) ────────────────────────
   Отдельного класса карточки здесь нет намеренно: плитка подарка — это плитка
   раздела, у которой сверху появился кадр. Второй набор правил про рамку,
   радиус и наведение разошёлся бы с соседним при первой же правке.

   Что добавляет модификатор — ровно три вещи, и каждая про то, чтобы высота
   карточки НЕ зависела ни от кадра, ни от длины подписи:
     · кадр в постоянной пропорции 4:3, обрезка по месту (object-fit);
     · все ряды одной высоты (grid-auto-rows: 1fr) — «Подарок новорождённому»
       переносится на две строки, «Приданое» стоит в одну, и без этого второй
       ряд карточек выходил на строку ниже первого;
     · число колонок приходит числом из разносчика (data-kolonok), а не
       подбирается браузером. Шесть наборов при auto-fill вставали 4 + 2, и
       полэкрана справа во втором ряду пустовало.

   Отступы — только токены ритма (_shared/tokens/core.css), нижняя граница
   шкалы: «все размашистые места плотнее — чтоб не скроллить клиенту»
   (Айгуль, 28.08.2026). Своих чисел здесь нет ни одного. */

.rz-spisok-razdelov.rz-s-foto {
  /* Узкий экран решает сам: на телефоне колонка одна при любом data-kolonok. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  grid-auto-rows: 1fr;
}
@media (min-width: 900px) {
  .rz-spisok-razdelov.rz-s-foto[data-kolonok="2"] { grid-template-columns: repeat(2, 1fr); }
  .rz-spisok-razdelov.rz-s-foto[data-kolonok="3"] { grid-template-columns: repeat(3, 1fr); }
  .rz-spisok-razdelov.rz-s-foto[data-kolonok="4"] { grid-template-columns: repeat(4, 1fr); }
}
.rz-s-foto a {
  padding: 0;
  overflow: hidden;          /* кадр обязан лечь в скруглённый угол рамки */
  display: flex;
  flex-direction: column;
}
.rz-s-foto img {
  display: block;
  width: 100%;
  /* height: auto ОБЯЗАТЕЛЕН, и это не украшение. У тега проставлены width и
     height числом (иначе страница дёргается под курсором, пока кадр грузится),
     а размер из атрибута — тот же definite height, что и из стилей: пока он
     стоит, aspect-ratio браузером не применяется вовсе. Кадр 736×552 так и
     вставал высотой 552 px при ширине карточки 278 px. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--pb-line);  /* пока кадр грузится, место уже занято */
}
.rz-s-foto .rz-plitka-tekst { padding: var(--space-2, 16px); }
.rz-s-foto span { line-height: var(--lh-body, 1.55); }

@media (max-width: 600px) {
  .razdel { padding: var(--space-3, 24px) var(--space-2, 16px) var(--space-4, 40px); }
  .rz-lid { font-size: var(--fs-body, 1rem); }
  .rz-poryadok { margin-left: 0; width: 100%; }
}

/* ФЛАГМАН РАЗДЕЛА — вещь, которую показывают, а не подбирают. Заведено
   12.09.2026 по решению Айгуль об эйдердауне: «вроде и хочу поднять престиж,
   в то же время боюсь напугать ценами».

   ПОЧЕМУ ОН НЕ ПЛИТКА. Плитка ставит вещь в ряд, а в ряду её единственное
   отличие — цифра, и читается это как «самая дорогая», а не как флагман.
   Поэтому здесь другая раскладка (снимок и текст рядом, не столбиком), свой
   фон и линия — вещь видно как отдельную лигу с первого взгляда, до чтения.

   ЦЕНЫ В БЛОКЕ НЕТ — и класса под неё тоже нет намеренно. Появится класс —
   появится соблазн вернуть цифру на первый экран.

   Отступы по нижней границе шкалы: блок и так самый крупный на странице,
   размашистость к нему добавлять нельзя (её замечание о пустотах). */
.rz-flagman {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-3, 24px);
  align-items: center;
  margin: var(--space-3, 24px) 0 var(--space-4, 40px);
  padding: var(--space-3, 24px);
  background: var(--pb-paper, #faf8f5);
  border: 1px solid var(--pb-line, rgba(0,0,0,.12));
}
.rz-flagman-foto {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--pb-fon, #f2efea);
}
.rz-flagman-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rz-flagman-nad {
  display: block;
  margin-bottom: var(--space-1, 8px);
  font-size: var(--fs-small, .8125rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pb-muted, #6b6257);
}
.rz-flagman-imya {
  margin: 0 0 var(--space-2, 16px);
  font-size: var(--fs-h2, 1.75rem);
  font-weight: var(--fw-h1, 300);
  color: var(--pb-ink, #2b2620);
}
.rz-flagman-lid {
  margin: 0 0 var(--space-2, 16px);
  max-width: 54ch;
  font-size: var(--fs-lead, 1.125rem);
  line-height: 1.6;
  color: var(--pb-muted, #6b6257);
}
.rz-flagman-hod {
  display: inline-block;
  color: var(--pb-ink, #2b2620);
  border-bottom: 1px solid var(--pb-accent, #9a7b4f);
  text-decoration: none;
}
.rz-flagman-hod:hover { color: var(--pb-accent, #9a7b4f); }

/* На телефоне снимок встаёт над текстом: в две колонки на 375 px и снимок, и
   строка текста становятся нечитаемо узкими. */
@media (max-width: 700px) {
  .rz-flagman {
    grid-template-columns: 1fr;
    padding: var(--space-2, 16px);
  }
}