/* Единая «шапка» страницы: хлебные крошки + заголовок H1 + отступы.
   Эталон — страница «Безопасная сделка. Как это работает?» (параметры зафиксированы владельцем 2026-10-17).
   Значения — в переменных ниже: меняйте их здесь, и все страницы категорий/подкатегорий каталога обновятся разом.
   Применяется к: каталогу категорий и подкатегорий (main.category-page), «Услугам риелтора» (.rl-page), «Безопасной сделке» (.safe-deal). */
:root{
  --kl-page-width:1330px;      /* ширина контента */
  --kl-page-gutter:32px;       /* поля по бокам на узких экранах (по 16px) */
  --kl-page-pt:6px;            /* отступ сверху от шапки сайта до хлебных крошек */
  --kl-crumbs-fs:12px;         /* хлебные крошки: размер шрифта */
  --kl-crumbs-lh:1.4;          /* хлебные крошки: межстрочный интервал */
  --kl-crumbs-gap:7px;         /* хлебные крошки: расстояние между элементами */
  --kl-crumbs-mb:5px;          /* отступ от хлебных крошек до заголовка */
  --kl-h1-fs:30px;             /* заголовок страницы: размер */
  --kl-h1-lh:1.2;              /* межстрочный интервал */
  --kl-h1-fw:700;              /* насыщенность */
  --kl-h1-color:#151922;       /* цвет */
  --kl-h1-ls:-.01em;           /* межбуквенный интервал */
  --kl-h1-mb:18px;             /* отступ под заголовком */
}
@media (max-width:767px){
  :root{--kl-h1-fs:25px;--kl-h1-mb:14px}
}
@media (max-width:650px){
  :root{--kl-page-gutter:20px}   /* как у страниц каталога: по 10px */
}

/* хлебные крошки (только на страницах с едиными параметрами, остальные страницы сайта не затронуты) */
.safe-deal>nav.kl-crumbs,
.category-page>nav.breadcrumbs,
.rl-page>nav.kl-crumbs{gap:var(--kl-crumbs-gap);margin:0 0 var(--kl-crumbs-mb);padding:0;font-size:var(--kl-crumbs-fs);line-height:var(--kl-crumbs-lh)}

/* каталог: страница категории / подкатегории */
.category-page{padding-top:var(--kl-page-pt)}
.category-page__heading{margin:0 0 var(--kl-h1-mb)}
.category-page__heading h1{margin:0;font-size:var(--kl-h1-fs);line-height:var(--kl-h1-lh);font-weight:var(--kl-h1-fw);color:var(--kl-h1-color);letter-spacing:var(--kl-h1-ls);text-wrap:balance}

/* ============================================================
   Остальные страницы сайта (блог, тарифы, пакеты, статические и юридические страницы,
   корзина, оформление заказа, подача/редактирование объявления, личный кабинет и т.д.)
   Селекторы вида main.X — чтобы перебить собственные <style> страниц.
   Исключения (там заголовок — часть дизайна): /ceo, описание на /blog, название магазина,
   имя в профиле, названия компаний/риелторов в карточках, заголовок объявления (30px, как эталон по размеру).
   ============================================================ */

/* 1. Хлебные крошки: единый отступ до заголовка */
main nav.kl-crumbs,
main nav.breadcrumbs,
main nav.kl-detail__crumbs,
main nav.bl-crumbs{margin:0 0 var(--kl-crumbs-mb)}

/* 2. Контейнер: ширина 1330px, левый край = левому краю шапки, отступ сверху 6px */
main.bl-page,main.bs-wrap,main.pk-wrap,main.tf-wrap,main.kl-cart,main.kl-checkout,
main.kl-postad-pick,main.kl-postad,main.kl-mylistings,main.ss-page,main.kl-seller-reviews-page,
main.kl-page,main.market-main.catalog-page--modern{
  width:min(var(--kl-page-width),calc(100% - var(--kl-page-gutter)));max-width:var(--kl-page-width);
  margin-top:0;margin-left:auto;margin-right:auto;padding-top:var(--kl-page-pt);padding-left:0;padding-right:0}
/* у этих страниц ширина уже верная — выравниваем только верх */
main.kl-bp-page,main.kl-shop-page,main.profile-dashboard,main.kl-detail{margin-top:0;padding-top:var(--kl-page-pt)}
/* узкие колонки (текстовые страницы): колонка остаётся, верх по эталону */
main.legal-page,main.sp-wrap,main.kl-order-confirm{margin-top:0;padding-top:var(--kl-page-pt)}
main.kl-page.kl-page--narrow{width:min(640px,calc(100% - var(--kl-page-gutter)));max-width:640px}
main.kl-page{padding-bottom:60px}

/* 3. Заголовок H1: размер, вес, цвет, интервалы */
main.bs-wrap h1.bs-title,
main.kl-bp-page .kl-bp-head h1,
main.pk-wrap .pk-hero h1,
main.tf-wrap .tf-hero h1,
main.legal-page .legal-page__head h1,
main.sp-wrap h1.sp-title,
main.market-main.catalog-page--modern .catalog-head h1,
main h1.kl-page-title,
main h1.kl-cart__title,
main h1.kl-checkout__title,
main.kl-postad-pick .kl-postad-pick__head h1,
main.kl-postad .kl-postad__head h1,
main.kl-mylistings .kl-mylistings__head h1,
main.ss-page h1.ss-h1,
main.kl-order-confirm .kl-order-confirm__head h1,
main.kl-detail>h1{
  margin-top:0;font-size:var(--kl-h1-fs);line-height:var(--kl-h1-lh);font-weight:var(--kl-h1-fw);
  color:var(--kl-h1-color);letter-spacing:var(--kl-h1-ls)}

/* отступ под заголовком: если следом идёт подзаголовок/мета — он ближе (как было на странице) */
main h1.kl-page-title,main h1.kl-cart__title,main h1.kl-checkout__title,main.sp-wrap h1.sp-title{margin-bottom:var(--kl-h1-mb)}
main.bs-wrap h1.bs-title{margin-bottom:12px}
main.pk-wrap .pk-hero h1,main.tf-wrap .tf-hero h1{margin-bottom:10px}
main.legal-page .legal-page__head h1{margin-bottom:6px}
main.kl-postad-pick .kl-postad-pick__head h1{margin-bottom:8px}
main.kl-postad .kl-postad__head h1{margin-bottom:4px}
main.ss-page h1.ss-h1{margin-bottom:6px}
main.kl-order-confirm .kl-order-confirm__head h1{margin-bottom:6px}
main.kl-bp-page .kl-bp-head h1,main.kl-mylistings .kl-mylistings__head h1,main.market-main.catalog-page--modern .catalog-head h1{margin-bottom:0}
main.kl-detail>h1{margin-bottom:8px}

/* блоки-обёртки заголовка: без лишнего отступа сверху, под ними — как на эталоне */
main.kl-bp-page .kl-bp-head,
main.market-main.catalog-page--modern .catalog-head,
main.kl-mylistings .kl-mylistings__head,
main.kl-postad .kl-postad__head,
main.kl-postad-pick .kl-postad-pick__head{margin-top:0;margin-bottom:var(--kl-h1-mb)}
main.pk-wrap .pk-hero,main.tf-wrap .tf-hero{padding-top:0}
main.legal-page .legal-page__head{margin-top:0}
main.kl-order-confirm .kl-order-confirm__head{margin-top:0}