/* Новая шапка вёрстки (.site-header, project.min.css) в Bitrix-шаблоне. Подключается
   из header.php на всех страницах после changes-new.css.

   1. Страницы СТАРОГО шаблона (без body.page: /about, /articles, /diet, /exercise,
      /foresttherapy, /authors, /sitemap, /specislists). Они свёрстаны в px:
      .wrapper { padding-top: 156 / 80 / 60px } под прежнюю белую шапку той же высоты.
      Новая шапка — absolute поверх контента, высота в rem от корня project.min.css
      (10px на 1440, 11.7px на 375, 7.2px на 1024 — он грузится на всех страницах),
      поэтому отступ задаём в тех же rem (= .js-padding новых страниц, header-height-*
      в variables.styl): при любом корне контент начинается ровно под шапкой.
      На страницах вёрстки (body.page) отступ обёртки обнуляет project.min.css
      (blocks/server-template.styl) — место даёт .js-padding первой секции. */

body:not(.page) .wrapper {
    padding-top: 5.8rem;
}

@media (min-width: 768px) {
    body:not(.page) .wrapper {
        padding-top: 10.6rem;
    }
}

@media (min-width: 1024px) {
    body:not(.page) .wrapper {
        padding-top: 11.2rem;
    }
}

/* project.min.css ставит body { font-family: Ubuntu } и грузится после style.min.css —
   на старых страницах возвращаем их шрифт; шапка наследует его же. Ubuntu — только на
   страницах вёрстки (заказчик, 23.10.2026). */
body:not(.page) {
    font-family: "Circe";
}

/* 2. changes.css (подключается на /about, /diet, в статьях) стилизует любой .button:
      оранжевый фон, обводка 2px, радиус 4, кегль 20, min-width 163. Кнопка «Где купить»
      в шапке и «Заказать» в баннере меню — тоже .button; возвращаем им значения макета
      (header-main.styl). Специфичность (0,3,0): changes.css подключён ниже по странице. */
.site-header .site-header__row .site-header__buy {
    min-width: 0;
    min-height: 3.4rem;
    padding: 1rem 1.8rem;
    border: 0;
    border-radius: 10em;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
    color: #fff;
    background-color: #252525;
    transition: background-color 0.3s cubic-bezier(0.71, 0.48, 0.28, 0.88);
}

@media (min-width: 768px) {
    .site-header .site-header__row .site-header__buy {
        min-height: 6rem;
        padding: 1.2rem 2.8rem;
        font-size: 2.4rem;
    }
}

@media (min-width: 1024px) {
    .site-header .site-header__row .site-header__buy {
        min-height: 4.7rem;
        padding: 1.4rem 3.2rem;
        font-size: 1.9rem;
    }
}

@media (any-hover: hover) {
    .site-header .site-header__row .site-header__buy:hover {
        background-color: #F64D3A;
    }
}

@media (max-width: 1023px) {
    .site-header.is-opened .site-header__row .site-header__buy {
        background-color: #F64D3A;
    }
}

.site-header .menu-banner .menu-banner__button,
.site-header .menu-banner .menu-banner__button:hover {
    min-width: 0;
    min-height: 3.6rem;
    padding: 1rem 1.4rem 1rem 1.8rem;
    border: 0;
    border-radius: 10em;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0;
    color: #F64D3A;
    background-color: #fff;
}

/* 3. Страницы вёрстки без первого экрана — /faq/, деталка FAQ, /buying/: первый блок —
      крошки в плоской разметке бэкендера (.l-container > .breadcrumbs, у вёрстки —
      <nav class="breadcrumbs">), .js-padding там нет — место под шапку даём здесь.
      В локальной вёрстке на этих страницах крошки тоже под шапкой — см. отчёт. */
.page .page__main > .l-container:first-child {
    padding-top: 5.8rem;
}

@media (min-width: 768px) {
    .page .page__main > .l-container:first-child {
        padding-top: 10.6rem;
    }
}

@media (min-width: 1024px) {
    .page .page__main > .l-container:first-child {
        padding-top: 11.2rem;
    }
}