/* ==========================================================================
   9BAR — GLOBAL TYPOGRAPHY
   Единая типографика для всего сайта
   ========================================================================== */

:root {
  --bar-font-main:
    "TildaSans",
    "Tilda Sans",
    Arial,
    Helvetica,
    sans-serif;

  /* Крупные заголовки страниц и первого экрана */
  --bar-font-h1: clamp(52px, 5.6vw, 96px);
  --bar-line-h1: 0.94;

  /* Основные заголовки секций */
  --bar-font-h2: clamp(42px, 4.3vw, 72px);
  --bar-line-h2: 0.98;

  /* Заголовки крупных карточек */
  --bar-font-h3: clamp(24px, 2vw, 32px);
  --bar-line-h3: 1.08;

  /* Основной текст */
  --bar-font-body: 16px;
  --bar-line-body: 1.62;

  /* Увеличенный вводный текст */
  --bar-font-lead: clamp(18px, 1.35vw, 22px);
  --bar-line-lead: 1.5;

  /* Мелкий текст */
  --bar-font-small: 14px;
  --bar-line-small: 1.55;

  /* Подписи и кнопки */
  --bar-font-label: 12px;
  --bar-line-label: 1.15;

  --bar-weight-regular: 400;
  --bar-weight-medium: 500;
  --bar-weight-semibold: 600;
  --bar-weight-bold: 700;
  --bar-weight-black: 800;
}


/* ==========================================================================
   ОСНОВНОЙ ШРИФТ
   ========================================================================== */

html,
body,
[class^="bar-"],
[class*=" bar-"],
[class^="bar-"] *,
[class*=" bar-"] * {
  font-family: var(--bar-font-main) !important;
  font-stretch: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================================
   ЗАГОЛОВКИ
   ========================================================================== */

[class^="bar-"] h1,
[class*=" bar-"] h1 {
  margin-top: 0;
  font-family: var(--bar-font-main) !important;
  font-size: var(--bar-font-h1);
  line-height: var(--bar-line-h1);
  letter-spacing: -0.035em !important;
  font-weight: var(--bar-weight-black) !important;
  font-stretch: normal;
}

[class^="bar-"] h2,
[class*=" bar-"] h2 {
  margin-top: 0;
  font-family: var(--bar-font-main) !important;
  font-size: var(--bar-font-h2);
  line-height: var(--bar-line-h2);
  letter-spacing: -0.032em !important;
  font-weight: var(--bar-weight-black) !important;
  font-stretch: normal;
}

[class^="bar-"] h3,
[class*=" bar-"] h3 {
  margin-top: 0;
  font-family: var(--bar-font-main) !important;
  font-size: var(--bar-font-h3);
  line-height: var(--bar-line-h3);
  letter-spacing: -0.022em !important;
  font-weight: var(--bar-weight-bold) !important;
  font-stretch: normal;
}

[class^="bar-"] h4,
[class*=" bar-"] h4 {
  margin-top: 0;
  font-family: var(--bar-font-main) !important;
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -0.015em !important;
  font-weight: var(--bar-weight-bold) !important;
}


/* ==========================================================================
   ОСНОВНОЙ ТЕКСТ
   ========================================================================== */

[class^="bar-"] p,
[class*=" bar-"] p,
[class^="bar-"] li,
[class*=" bar-"] li {
  font-family: var(--bar-font-main) !important;
  font-size: var(--bar-font-body);
  line-height: var(--bar-line-body);
  letter-spacing: 0 !important;
  font-weight: var(--bar-weight-regular);
  font-stretch: normal;
}


/* ==========================================================================
   ВВОДНЫЕ АБЗАЦЫ
   ========================================================================== */

[class*="__lead"],
[class*="__intro-text"],
[class*="__description--large"] {
  font-family: var(--bar-font-main) !important;
  font-size: var(--bar-font-lead) !important;
  line-height: var(--bar-line-lead) !important;
  letter-spacing: -0.008em !important;
  font-weight: var(--bar-weight-medium) !important;
}


/* ==========================================================================
   МЕЛКИЕ ОПИСАНИЯ
   ========================================================================== */

[class*="__caption"],
[class*="__note"],
[class*="__meta"],
[class*="__small"],
[class*="__subtitle"],
[class*="__item-content"] p,
[class*="__card"] p {
  font-family: var(--bar-font-main) !important;
  font-size: var(--bar-font-small);
  line-height: var(--bar-line-small);
  letter-spacing: 0 !important;
  font-weight: var(--bar-weight-regular);
}


/* ==========================================================================
   МАЛЕНЬКИЕ ВЕРХНИЕ ПОДПИСИ
   ========================================================================== */

[class*="__label"],
[class*="__eyebrow"],
[class*="__tag"],
[class*="__kicker"] {
  font-family: var(--bar-font-main) !important;
  font-size: var(--bar-font-label) !important;
  line-height: var(--bar-line-label) !important;
  letter-spacing: 0.13em !important;
  font-weight: var(--bar-weight-bold) !important;
  font-stretch: normal;
}


/* ==========================================================================
   КНОПКИ И ССЫЛКИ
   ========================================================================== */

[class^="bar-"] button,
[class*=" bar-"] button,
[class^="bar-"] a[class*="__link"],
[class*=" bar-"] a[class*="__link"],
[class^="bar-"] a[class*="__button"],
[class*=" bar-"] a[class*="__button"],
[class^="bar-"] a[class*="__btn"],
[class*=" bar-"] a[class*="__btn"] {
  font-family: var(--bar-font-main) !important;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.055em !important;
  font-weight: var(--bar-weight-bold) !important;
  font-stretch: normal;
}


/* ==========================================================================
   ЦИФРЫ И СТАТИСТИКА
   ========================================================================== */

[class*="__number"],
[class*="__stat"] strong,
[class*="__counter"],
[class*="__value"] {
  font-family: var(--bar-font-main) !important;
  font-stretch: normal;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}


/* ==========================================================================
   УБИРАЕМ ЧРЕЗМЕРНОЕ СЖАТИЕ ТЕКСТА
   ========================================================================== */

[class^="bar-"] h1,
[class*=" bar-"] h1,
[class^="bar-"] h2,
[class*=" bar-"] h2,
[class^="bar-"] h3,
[class*=" bar-"] h3,
[class*="__title"] {
  font-stretch: normal !important;
}


/* ==========================================================================
   ПЛАНШЕТ
   ========================================================================== */

@media (max-width: 1180px) {
  :root {
    --bar-font-h1: clamp(50px, 7vw, 78px);
    --bar-font-h2: clamp(40px, 6vw, 64px);
    --bar-font-h3: clamp(23px, 2.7vw, 29px);
  }
}


/* ==========================================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ========================================================================== */

@media (max-width: 760px) {
  :root {
    --bar-font-h1: clamp(42px, 12vw, 58px);
    --bar-line-h1: 0.97;

    --bar-font-h2: clamp(36px, 10vw, 50px);
    --bar-line-h2: 1;

    --bar-font-h3: 24px;
    --bar-line-h3: 1.1;

    --bar-font-body: 15px;
    --bar-line-body: 1.58;

    --bar-font-lead: 17px;
    --bar-line-lead: 1.5;

    --bar-font-small: 14px;
    --bar-line-small: 1.52;

    --bar-font-label: 11px;
  }

  [class^="bar-"] h1,
  [class*=" bar-"] h1 {
    letter-spacing: -0.028em !important;
  }

  [class^="bar-"] h2,
  [class*=" bar-"] h2 {
    letter-spacing: -0.026em !important;
  }

  [class^="bar-"] h3,
  [class*=" bar-"] h3 {
    letter-spacing: -0.018em !important;
  }
}


/* ==========================================================================
   МАЛЕНЬКИЕ ЭКРАНЫ
   ========================================================================== */

@media (max-width: 430px) {
  :root {
    --bar-font-h1: 42px;
    --bar-font-h2: 38px;
    --bar-font-h3: 22px;
  }
}




/* ==========================================================================
   9BAR — ЕДИНОЕ НАЧАЛО ВНУТРЕННИХ СТРАНИЦ
   ========================================================================== */

:root {

    /* Высота фиксированной шапки */
    --bar-header-height: 70px;

    /* Воздух между шапкой и первым экраном */
    --bar-page-gap: 40px;

    /* Итоговый отступ */
    --bar-page-top-space: calc(
        var(--bar-header-height) +
        var(--bar-page-gap)
    );

}


/* ==========================================================================
   ЕДИНЫЙ ВЕРХНИЙ ОТСТУП
   ========================================================================== */

.bar-catalog.bar-page-start,
.bar-about.bar-page-start,
.bar-business.bar-page-start,
.bar-delivery.bar-page-start,
.bar-contacts.bar-page-start,
.bar-journal.bar-page-start {
  padding-top: var(--bar-page-top-space) !important;
}


/* ==========================================================================
   УБИРАЕМ ВЕРХНИЙ ОТСТУП У ПЕРВОЙ СЕТКИ
   ========================================================================== */

.bar-page-start .bar-catalog__hero,
.bar-page-start .bar-about__hero,
.bar-page-start .bar-business__hero,
.bar-page-start .bar-delivery__hero,
.bar-page-start .bar-contacts__top,
.bar-page-start .bar-journal__inner {
  margin-top: 0 !important;
}


/* ==========================================================================
   ВЫРАВНИВАНИЕ КОНТЕНТА ПО ВЕРХУ
   ========================================================================== */

.bar-page-start .bar-catalog__hero,
.bar-page-start .bar-about__hero,
.bar-page-start .bar-business__hero,
.bar-page-start .bar-delivery__hero,
.bar-page-start .bar-contacts__top,
.bar-page-start .bar-journal__inner {
  align-items: start !important;
}


/* ==========================================================================
   ВЕРХНИЕ ПОДПИСИ
   ========================================================================== */

.bar-page-start .bar-catalog__label,
.bar-page-start .bar-about__label,
.bar-page-start .bar-business__label,
.bar-page-start .bar-delivery__label,
.bar-page-start .bar-contacts__label,
.bar-page-start .bar-journal__label {
  margin-top: 0 !important;
}


@media (max-width:1180px){

:root{

    --bar-header-height:70px;
    --bar-page-gap:34px;

    --bar-page-top-space:
        calc(
            var(--bar-header-height)
            + var(--bar-page-gap)
        );

}

}

@media (max-width:760px){

:root{

    --bar-header-height:64px;
    --bar-page-gap:24px;

    --bar-page-top-space:
        calc(
            var(--bar-header-height)
            + var(--bar-page-gap)
        );

}

}

@media (max-width:430px){

:root{

    --bar-header-height:60px;
    --bar-page-gap:20px;

    --bar-page-top-space:
        calc(
            var(--bar-header-height)
            + var(--bar-page-gap)
        );

}

}