/* ============================================================================
   Новый хедер msbaby.ru. Перенесён из вёрстки 25main 23.09.2026.
   Подключается из header.php только когда MS_NEW_HEADER === true.
   Старый хедер лежит в css/header-old.css и подключается вместо этого файла.

   СОБСТВЕННАЯ ЕДИНИЦА ВМЕСТО rem
   Обе вёрстки тянут размеры от html { font-size }, но опорные ширины разные:
   25main считает от 1440/360, msbaby от 1280/375, и диапазоны медиазапросов
   не совпадают (на 1281-1440 сайт уже на фиксированных 16px, а макет ещё
   тянется). Единого множителя между ними не существует, поэтому хедер не
   опирается на rem сайта вообще, а везде считает от своей --h25-u. Побочная
   польза: html.index из main-index.css со своей шкалой тоже больше не влияет.
   ============================================================================ */

@font-face {
  font-family: "Rotonda";
  src: url("../fonts/Rotonda/Rotonda-Bold.woff2") format("woff2"),
       url("../fonts/Rotonda/Rotonda-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Повторяет шкалу 25main один в один:
   выше 1440 — фиксированные 16px, ниже — 1.1111vw (=100vw*16/1440),
   на мобильном — 4.4444vw (=100vw*16/360).
   На :root, а не на .header, потому что от неё же считается компенсация
   высоты для .padding-top__new, а <main> хедеру не потомок. */
:root { --h25-u: 16px; }
@media (max-width: 1440px) { :root { --h25-u: 1.1111111111vw; } }
@media (max-width: 480px)  { :root { --h25-u: 4.4444444444vw; } }

/* ---------------------------------------------------------------- каркас -- */

.header {
  /* Цвета держим внутри хедера, а не в глобальном :root сайта: у msbaby свой
     --pink (#FF4F8E) и свой --black (#333), перебивать их глобально нельзя. */
  --h25-blue: #073998;
  --h25-pink: #F267AE;

  padding: calc(var(--h25-u) * 2) 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  /* Не 150, как в 25main, а 20, как у старого хедера msbaby. На карточках
     каталога живёт .modal_price — полноэкранное затемнение с z-index:30.
     При 150 шапка пробивала бы его насквозь. Между 20 и 2000 у сайта больше
     ничего нет, кроме кнопки «наверх» (100), а она с шапкой не пересекается.
     Fancybox сидит на 99992 и накрывает хедер в любом случае — так и надо. */
  z-index: 20;

  /* У сайта глобально a { color:#2972a6 } и a:hover { color:#368cc9 }.
     В 25main пункты меню наследуют цвет от body. Задаём явно и гасим
     глобальные ссылочные цвета, иначе меню будет серо-голубым. */
  color: var(--h25-blue);
  /* В 25main шапка наследует базовый RotondaC от body, а Rotonda стоит только
     на пунктах меню. Здесь наследоваться не от чего — задаём явно. */
  font-family: "RotondaC", sans-serif;

  /* Старая шапка msbaby была шириной 79.75rem и по бокам от неё кликалось то,
     что под ней. Новая растянута на всю ширину, и её прозрачные поля слева и
     справа от плашки перехватывали бы клики полосой во всю ширину экрана.
     Гасим события на самой подложке и возвращаем их плашке. Затемнение
     управляет ими само — через .header__backdrop.visible. */
  pointer-events: none;
}

.header__content,
.header__mobile {
  pointer-events: auto;
}

/* Цвет сбрасываем ТОЛЬКО у пунктов меню, а не у всех ссылок шапки.
   Раньше здесь стояло .header a со всеми состояниями — и оно перебивало
   кнопку поиска, из-за чего лупа выходила синей вместо белой.
   Специфичности 0-2-0 хватает, чтобы побить и глобальное a { color:#2972a6 }
   (0-0-1), и a:hover { color:#368cc9 } (0-1-1), поэтому отдельные правила на
   hover не нужны — а если бы они были, то перебивали бы розовый пункт.
   Подчёркивание гасим у всех ссылок, оно ничему не мешает. */
.header .menu__link { color: inherit; }
.header a { text-decoration: none; }

.header__container {
  width: calc(var(--h25-u) * 79.75);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.header__content {
  /* d-flex в разметке даёт bootstrap-grid.css, но дублируем явно:
     хедер не должен зависеть от того, подключён ли сеточный бутстрап. */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: calc(var(--h25-u) * 1.5) calc(var(--h25-u) * 2.75);
  background: #FFFFFF;
  border-radius: calc(var(--h25-u) * 7.5);
}

/* ----------------------------------------------------------------- лого -- */

.header__logo {
  width: calc(var(--h25-u) * 9.25);
  position: relative;
  height: 100%;
}

.header__logo img {
  width: 100%;
  position: absolute;
  bottom: calc(var(--h25-u) * -0.375);
  z-index: 3;
}

/* Белый круг, из-за которого логотип как бы выступает за нижнюю границу
   плашки. На главной виден на цветном фоне, на белых внутряках просто
   продолжает плашку. */
.header__logo::after {
  content: "";
  width: calc(var(--h25-u) * 6.5);
  height: calc(var(--h25-u) * 6.5);
  background: #FFFFFF;
  border-radius: 50%;
  position: absolute;
  bottom: calc(var(--h25-u) * -0.25);
  right: calc(var(--h25-u) * -1.5);
}

.header .logo {
  display: block;
  height: calc(var(--h25-u) * 3.125);
}

/* ----------------------------------------------------------------- меню -- */

.header .menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: "Rotonda", "RotondaC", sans-serif;
  font-weight: bold;
  gap: calc(var(--h25-u) * 1.875);
  font-size: calc(var(--h25-u) * 1.25);
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.header .menu__link--pink { color: var(--h25-pink); }

/* Полоска под пунктом при наведении. Перенесена из 25main как есть: цвет
   через currentColor (синяя под синими пунктами, розовая под «Нам 25 лет»),
   inline-block чтобы в мобильной панели считалась от текста, а не от всей
   ширины панели, и обёртка (hover:hover) чтобы на телефоне после тапа
   полоска не залипала. */
@media (hover: hover) {
  .header .menu__link {
    display: inline-block;
    position: relative;
  }
  .header .menu__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--h25-u) * -0.25);
    width: 73%;
    height: calc(var(--h25-u) * 0.1875);
    margin-left: auto;
    margin-right: auto;
    border-radius: calc(var(--h25-u) * 0.625);
    background: currentColor;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
  }
  .header .menu__link:hover::after {
    -webkit-transform: scaleX(1);
        -ms-transform: scaleX(1);
            transform: scaleX(1);
  }
}

/* -------------------------------------------------------------- кнопки -- */

/* Имена свои, не .btn/.btn-circle из 25main: у msbaby уже есть глобальный
   .btn — оранжевая градиентная кнопка 50px с min-width:170px и Roboto 900.
   Совпадение имён превратило бы круглую кнопку поиска в оранжевую таблетку.

   Все правила кнопки намеренно писаны через .header. Кнопка поиска — это
   ссылка, а выше стоит .header a { color: inherit } со специфичностью 0-1-1.
   Одиночный .h25-btn (0-1-0) ему проигрывал, кнопка наследовала синий цвет
   шапки, и лупа получалась синей вместо белой. .header .h25-btn — это 0-2-0,
   и цвет снова задаёт кнопка. */

.header .h25-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  border: 0;
  outline: 0;
  cursor: pointer;
  background: var(--h25-pink);
  -webkit-box-shadow: inset 5.2093px 3.90698px 5.2093px #FCB0D7, inset -5.2093px -3.90698px 11.4605px #B83277;
          box-shadow: inset 5.2093px 3.90698px 5.2093px #FCB0D7, inset -5.2093px -3.90698px 11.4605px #B83277;
  color: #FFFFFF;
  fill: #FFFFFF;
  -webkit-transition: 0.2s linear;
  transition: 0.2s linear;
}

.header .h25-btn:hover {
  -webkit-box-shadow: inset 3.53488px 2.65116px 3.53488px #FCB0D7, inset -3.53488px -2.65116px 7.77674px #B83277;
          box-shadow: inset 3.53488px 2.65116px 3.53488px #FCB0D7, inset -3.53488px -2.65116px 7.77674px #B83277;
}

.header .h25-btn:active {
  -webkit-transform: scale(0.92);
      -ms-transform: scale(0.92);
          transform: scale(0.92);
}

.header .h25-btn--circle {
  border-radius: 50%;
  width: calc(var(--h25-u) * 3.125);
  height: calc(var(--h25-u) * 3.125);
}

.header .h25-btn--circle svg {
  width: calc(var(--h25-u) * 1.75);
  height: calc(var(--h25-u) * 1.75);
  fill: currentColor;
}

/* Бургер. Имя тоже своё: старый openMenu() в js/main.js ищет .open-menu и
   следом дёргает .header__group, которого в новой разметке нет. Другое имя —
   и старый обработчик просто не находит кнопку. */
.h25-open-menu {
  --line-width: calc(var(--h25-u) * 1.625);
  --line-height: calc(var(--h25-u) * 0.1875);
}

.h25-open-menu span {
  position: relative;
  display: block;
  width: var(--line-width);
  height: calc(var(--h25-u) * 0.3125);
  background: transparent;
}

.h25-open-menu span::before,
.h25-open-menu span::after {
  content: "";
  display: block;
  width: var(--line-width);
  height: var(--line-height);
  background: #FFFFFF;
  position: absolute;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  border-radius: calc(var(--h25-u) * 0.5);
}

.h25-open-menu span::before { top: calc(var(--h25-u) * -0.1875); }
.h25-open-menu span::after  { bottom: calc(var(--h25-u) * -0.1875); }

.h25-open-menu.active span { background: transparent; }

.h25-open-menu.active span::before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 0;
}

.h25-open-menu.active span::after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 0;
}

/* ------------------------------------------------- мобильная шторка -- */

.header__m-menu {
  display: none;
  position: relative;
  z-index: 3;
}

.header__mobile {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
  grid-template-rows: 0fr;
  -webkit-transition: grid-template-rows 0.3s ease;
  transition: grid-template-rows 0.3s ease;
  display: none;
}

.header__mobile.opened { grid-template-rows: 1fr; }

.header__mobile-inner {
  background: #FFFFFF;
  border-radius: calc(var(--h25-u) * 1.875) calc(var(--h25-u) * 1.875);
  min-height: calc(var(--h25-u) * 3.875);
  overflow: hidden;
}

.header__mobile-content {
  padding: calc(var(--h25-u) * 1.5);
  padding-top: calc(var(--h25-u) * 5.375);
}

.header__mobile-line {
  height: calc(var(--h25-u) * 0.25);
  width: calc(var(--h25-u) * 10.75);
  margin: calc(var(--h25-u) * 1.1875) 0;
  border-radius: calc(var(--h25-u) * 0.5);
  background: #BFE9FF;
}

.header__backdrop {
  background: #000000;
  position: fixed;
  height: 200vh;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
}

.header__backdrop.visible {
  opacity: 0.5;
  pointer-events: auto;
}

/* Своя блокировка скролла, а не .no-scroll шаблона: тот описан как
   .page.no-scroll и вдобавок к overflow ставит height/width 100%. Зависеть
   от наличия класса .page на body не хочется. */
.h25-no-scroll { overflow: hidden; }

/* ------------------------------------------------- тень на внутряках -- */

/* Класс .header-inner вешает PHP на все страницы кроме главной. Тень нужна
   именно там: у msbaby body { background:#fff }, и белая плашка на белом
   фоне без тени пропадает. Вешаем на саму плашку, а не на .header — он
   прозрачная подложка во всю ширину, получилась бы полоса через весь экран.

   На круг под логотипом тень НЕ вешаем. Круг не отдельная фигура, а выступ
   поверх плашки: он выходит за её верхний край, чтобы логотип мог торчать
   вверх. Своя тень рисовала бы дугу прямо по белому полю плашки и обводила
   выступ отдельной шишкой. Без неё круг сливается с плашкой и с белым фоном
   страницы — ровно так, как он выглядит на главной. Верхний край плашки
   тень почти не рисует (смещение 0 2px идёт вниз), так что разрыв обводки
   в месте выступа незаметен.

   Сужение до 80% от 1300px из старого хедера намеренно не переносим. */
.header-inner .header__content {
  -webkit-box-shadow: 0 2px 6px rgba(55, 77, 77, 0.15);
          box-shadow: 0 2px 6px rgba(55, 77, 77, 0.15);
}

/* --------------------------------------------- компенсация высоты -- */

/* Считаем от НИЖНЕГО КРАЯ БЕЛОЙ ПЛАШКИ, а не от высоты блока .header:
   снизу у .header ещё 2u прозрачного поля, отступ под него не нужен.
       верх плашки   = 2u                        (padding-top у .header)
       высота плашки = 1.5u + 3.125u + 1.5u = 6.125u
       низ плашки    = 8.125u  ≈ 130px при u=16
   Старая плашка: padding 1.5rem сверху и снизу плюс логотип. Логотип там —
   img/general/logo.png 1275x438, при max-width 9.3125rem его высота 3.199rem,
   то есть выше кнопки 3.125rem и именно он задаёт высоту. Итого 6.199rem,
   низ на 99px при rem 16. Новая плашка ниже на 31px.

   .padding-top__new стоит на <main> на всех страницах кроме главной, в
   шаблоне это жёсткие 105px. Сразу под ним идут хлебные крошки со своим
   margin-top (28px выше 1279px, 38px ниже), поэтому реальный просвет под
   старой шапкой был 105 + 28 - 99 = 34px. Держим такой же:
   8.5u + 28px = 164px при низе плашки 130px, просвет снова 34px.

   Селектор из ДВУХ классов — подстраховка. Этот файл подключается сразу
   после ShowCSS(), то есть уже после template_styles.css, и одиночного
   .padding-top__new хватило бы. Но у <main> всё равно есть оба класса,
   js-main и padding-top__new, так что правило переживёт и случайный перенос
   подключения обратно в <head>. */
.js-main.padding-top__new { padding-top: calc(var(--h25-u) * 8.5); }

/* У главной своей компенсации нет: первый экран держит отступ сам, через
   .sectionOne { padding-top: 7.0625rem } из main-index.css — 113px при низе
   старой плашки 99px, просвет 14px. Держим тот же: 9u = 144px при низе 130px.
   Через .content-index, чтобы не задеть .sectionOne на других страницах. */
.content-index .sectionOne { padding-top: calc(var(--h25-u) * 9); }

/* --------------------------------------------------- мобильный ≤480 -- */

@media (max-width: 480px) {
  .header {
    padding-top: calc(var(--h25-u) * 1.75);
    padding-bottom: calc(var(--h25-u) * 1.75);
  }
  .header.opened {
    height: 100%;
    overflow: auto;
  }
  .header__container {
    padding-left: calc(var(--h25-u) * 0.625);
    padding-right: calc(var(--h25-u) * 0.625);
  }
  .header__menu   { display: none; }
  .header__search { display: none; }
  .header__m-menu { display: block; }
  .header__mobile { display: grid; }

  .header__logo { width: calc(var(--h25-u) * 5.75); }
  .header__logo::after {
    width: calc(var(--h25-u) * 3.875);
    height: calc(var(--h25-u) * 3.875);
    bottom: calc(var(--h25-u) * 0.5);
    right: calc(var(--h25-u) * -0.75);
  }
  .header__logo img { bottom: calc(var(--h25-u) * 0.25); }

  /* z-index поднимает плашку над затемнением: .header__backdrop лежит в
     разметке после .header__container и без этого перекрыл бы и шторку. */
  .header__content {
    padding: calc(var(--h25-u) * 0.375) calc(var(--h25-u) * 0.5)
             calc(var(--h25-u) * 0.375) calc(var(--h25-u) * 1.375);
    position: relative;
    z-index: 9;
  }

  .header .menu {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(var(--h25-u) * 1.1875);
  }

  /* Мобильная плашка: верх 1.75u, высота 0.375u + 3.125u + 0.375u = 3.875u,
     низ 5.625u ≈ 94px на экране 375px. У старой логотип тут ужат до
     max-width 8.125rem, его высота 2.791rem — ниже кнопки 3.125rem, поэтому
     высоту задаёт кнопка: 1.5 + 3.125 = 4.625rem, низ на 74px. Просвет под
     старой шапкой был 105 + 38 - 74 = 69px. Держим его:
     7.5u + 38px = 163px при низе плашки 94px.
     Два класса — по той же причине, что и в десктопном правиле выше. */
  .js-main.padding-top__new { padding-top: calc(var(--h25-u) * 7.5); }

  /* У главной на мобильном было 5.875rem = 94px при низе старой плашки 74px,
     просвет 20px. Держим тот же: 6.85u = 114px при низе плашки 94px. */
  .content-index .sectionOne { padding-top: calc(var(--h25-u) * 6.85); }
}