@charset "UTF-8";
/**
 * Ventolux - база: скид, шрифт, сітка, глобальні класи типографіки.
 * У модулях використовувати ТІЛЬКИ ці класи й змінні з tokens.css.
 */
@import url("../fonts/onest.css");
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
  color: var(--c-text);
  background: var(--c-white);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

/* --- Сітка: контейнер Bootstrap під розміри макета ---
   .container-xxl тягнеться на всю ширину до 1440 і далі стоїть рівно 1440.
   Бокові поля задаються жолобом: 32/2 = 16 на мобільній, 140/2 = 70 на ПК. --- */
.container-xxl {
  --bs-gutter-x: 32px;
}

@media (min-width: 1024px) {
  .container-xxl {
    --bs-gutter-x: 140px;
  }
}
/* --- Типографіка: класи 1:1 зі стилями Figma --- */
.v-h1 {
  font: var(--t-h1);
  letter-spacing: var(--t-h1-ls);
}

.v-h2 {
  font: var(--t-h2);
  letter-spacing: var(--t-h2-ls);
}

.v-h3 {
  font: var(--t-h3);
  letter-spacing: var(--t-h3-ls);
}

.v-subtitle {
  font: var(--t-subtitle);
  letter-spacing: var(--t-subtitle-ls);
}

.v-body {
  font: var(--t-body);
  letter-spacing: var(--t-body-ls);
}

.v-body-medium {
  font: var(--t-body-medium);
  letter-spacing: var(--t-body-ls);
}

.v-subbody {
  font: var(--t-subbody);
  letter-spacing: var(--t-subbody-ls);
}

.v-subbody-medium {
  font: var(--t-subbody-medium);
  letter-spacing: var(--t-subbody-ls);
}

.v-caption {
  font: var(--t-caption);
  letter-spacing: var(--t-caption-ls);
}

.v-caption-medium {
  font: var(--t-caption-medium);
  letter-spacing: var(--t-caption-ls);
}

/* --- Показ/сховок по брейкпоінту (макети є тільки на 390 і 1440).
   display: revert - щоб не ламати flex/inline-flex елементів. --- */
/* Ховаємо тільки в потрібному діапазоні і нічого не нав'язуємо в іншому -
   так клас не ламає inline-flex у кнопок. */
@media (max-width: 1023.98px) {
  .v-hide-mobile {
    display: none !important;
  }
}
@media (min-width: 1024px) {
  .v-hide-desktop {
    display: none !important;
  }
}
/* сторінка не скролиться, поки відкрите меню або мобільна шторка */
body.is-locked {
  overflow: hidden;
}

/* Роздільник (Figma «Divider» - лінія 1px #ebebeb). Використовують усі сторінки,
   тому живе в базі, а не в стилях окремої сторінки. */
.v-divider {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--c-grey-light);
  opacity: 1;
}