/* ===== VST custom (поверх Webflow) ===== */

/* Задача 1: liquid glass подложка меню при скролле.
   Класс .nav-active вешает assets/js/slater/58006.js (Navigation) */
.nav {
  transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
.nav.nav-active {
  background: rgba(255, 255, 255, .55) !important;
  background-color: rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.8) !important;
  backdrop-filter: blur(22px) saturate(1.8) !important;
  box-shadow: 0 6px 24px rgba(20, 20, 43, .08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .4) !important;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.nav-active { background: rgba(255, 255, 255, .94); }
}
/* тёмная тема ОС не должна ломать читаемость — фон остаётся светлым, как весь сайт */

/* Задача 5: приглушить фоновое видео hero — мягче, не такое явное */
.w-background-video video {
  filter: saturate(.5) brightness(.8) contrast(.95);
}
/* лёгкая вуаль поверх видео (под контентом) */
.w-background-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,12,34,.30), rgba(24,12,34,.16));
  pointer-events: none;
  z-index: 1;
}
.w-background-video { position: relative; }
.w-background-video > *:not(video) { position: relative; z-index: 2; }
/* фирменный градиент поверх — слегка ослабить, чтобы видео не «кричало» */


/* Главная: компактный hero — быстрее скролл до цен (только страница главной) */
html.page-home .hero-block,
html.page-home .hero-block__img {
  min-height: 0 !important;
  height: auto !important;
}
html.page-home .hero-block__container {
  padding-top: 120px !important;
  padding-bottom: 48px !important;
  min-height: 0 !important;
}
html.page-home .hero-block__title {
  font-size: clamp(28px, 2.8vw, 40px) !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}
@media (max-width: 991px) {
  html.page-home .hero-block__title { white-space: normal; }
}
html.page-home .hero-block__txt-w {
  max-width: 1000px !important;
}
html.page-home .hero-block__desc {
  font-size: 18px !important;
  line-height: 1.5 !important;
}

/* Задача 11: подсветка активного раздела в меню */
.nav .nav__link.w--current .nav__link-txt,
.nav .nav__link.w--current {
  color: #e6007e !important;
  font-weight: 600;
}
.nav .nav__d-drop-link.w--current {
  color: #e6007e !important;
  font-weight: 600;
}
/* если активная страница внутри дропдауна — подсветить и его тогл */
.nav .nav__d-link:has(.w--current) .nav__link-txt {
  color: #e6007e;
  font-weight: 600;
}

/* Задача 12: аккуратный выпадающий блок меню */
.nav .nav__d-drop {
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  backdrop-filter: blur(24px) saturate(1.7);
  border-radius: 16px;
  border: 1px solid rgba(107, 4, 207, .08);
  box-shadow: 0 18px 44px rgba(31, 15, 55, .14), 0 2px 8px rgba(31, 15, 55, .06);
  overflow: visible;
  margin-top: 8px;
  min-width: 240px;
  animation: vstDropIn .22s cubic-bezier(.3, .9, .3, 1);
}
@keyframes vstDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* невидимый мостик — ховер не срывается в зазоре между пунктом и меню */
.nav .nav__d-drop::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px; height: 14px;
}
.nav .nav__d-drop-list {
  padding: 8px;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
}
.nav .nav__d-drop-link {
  border-radius: 10px;
  padding: 10px 14px;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.nav .nav__d-drop-link:hover {
  background: rgba(107, 4, 207, .07);
  color: #6b04cf;
  padding-left: 18px;
}

/* (3) Hero главной: высота подстраивается под высоту окна.
   Правило: на высоком экране — базовая высота; на низком уменьшается так,
   чтобы hero + карточки цен помещались целиком. Текст всегда по центру,
   40px до верха блока и 40px до карточек цен, которые заходят на блок снизу. */
html.page-home .hero-block {
  --hero-base: 369px;      /* базовая высота на просторном экране */
  --hero-top-offset: 100px; /* отступ секции сверху (под фиксированное меню) */
  --prices-overlap: 81px;   /* насколько карточки цен заходят на блок */
  --prices-visible: 99px;   /* часть карточек ниже блока + запас снизу */
  --hero-gap: 40px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
html.page-home .hero-block__container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  padding-top: var(--hero-gap) !important;
  /* снизу: зазор до карточек + та часть блока, которую карточки перекрывают */
  padding-bottom: calc(var(--hero-gap) + var(--prices-overlap)) !important;
  min-height: max(
    274px,
    min(var(--hero-base), calc(100vh - var(--hero-top-offset) - var(--prices-visible)))
  );
}
@media (max-width: 767px) {
  html.page-home .hero-block__container {
    /* на телефоне блок компактный: высота по содержимому + свои поля */
    min-height: auto !important;
    padding: 32px 24px 36px !important;
  }
  html.page-home .hero-block {
    border-radius: 28px;
  }
  html.page-home .hero-block__title {
    font-size: 26px !important;
    line-height: 1.22 !important;
  }
  html.page-home .hero-block__desc {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
  html.page-home .hero-block__txt-w {
    max-width: 100% !important;
  }
}
@media (max-width: 479px) {
  html.page-home .hero-block__container {
    padding: 28px 20px 32px !important;
  }
  html.page-home .hero-block__title {
    font-size: 23px !important;
  }
  html.page-home .hero-block__desc {
    font-size: 14px !important;
  }
}

/* (8) «Більше ніж просто АЗС»: цены временно скрыты (только главная) */
html.page-home .product-promo__price-w { display: none !important; }

/* (10) отступ между серым блоком футера и низом страницы = 48px (24 паддинг + 24 марджин) */
.footer { margin-bottom: 24px; }

/* (11) живой градиент в hero — эффект «эмбеда» */
/* Живая подложка hero: один и тот же градиент на всех страницах.
   Свечение на фоне и заливка самого блока крутятся с одним периодом (18с),
   чтобы цвет переливался целиком, а не двумя независимыми слоями. */
.hero-bg-gd {
  background: linear-gradient(
    115deg,
    #ff6600,
    #ff2d78 22%,
    #ff0066 42%,
    #9731ff 64%,
    #6b04cf 80%,
    #ff6600 98%
  ) !important;
  background-size: 340% 340% !important;
  animation:
    vstGradientShift 18s ease-in-out infinite,
    vstGlowBreath 18s ease-in-out infinite;
}
@keyframes vstGradientShift {
  0%   { background-position: 0% 40%; }
  50%  { background-position: 100% 60%; }
  100% { background-position: 0% 40%; }
}
/* свечение чуть дышит вместе с переливом — амплитуда намеренно мелкая */
@keyframes vstGlowBreath {
  0%   { opacity: .52; }
  50%  { opacity: .64; }
  100% { opacity: .52; }
}

/* Заливка самого hero-блока переливается в такт подложке */
.hero-overlay {
  background-image: linear-gradient(
    135deg,
    #ff6600,
    #ff2d78 20%,
    #ff0066 38%,
    #9731ff 56%,
    #6b04cf 72%,
    #ff0066 88%,
    #ff6600
  ) !important;
  background-size: 300% 300% !important;
  animation: vstHeroFlow 18s ease-in-out infinite;
}
@keyframes vstHeroFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Кому анимация мешает — статичная картинка */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-gd,
  .hero-overlay { animation: none !important; }
}


/* сабтайтл hero без тени (по фидбеку) */
html.page-home .hero-block__desc {
  text-shadow: none;
  font-weight: 500;
}



/* «Про VST в цифрах»: фиксированная высота — контент ниже не скачет.
   Держим её впритык к самому высокому слайду: запас превращался в пустоту
   между картой, цифрами и «Чому обирають». */
.numbers-w {
  min-height: 200px;
}
@media (max-width: 767px) {
  .numbers-w { min-height: 225px; }
}
/* отступы вокруг блока цифр — умеренно меньше, чем у остальных секций */
.section:has(.numbers-w) > .s-padding-80 {
  padding-top: 56px;
  padding-bottom: 56px;
}
@media (max-width: 991px) {
  .section:has(.numbers-w) > .s-padding-80 {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}
.numbers-w .numbers-track { align-items: flex-start; }



/* Hero подстраниц: высота как на главной, текст по центру */
.section-hero.sub-page .hero-block.is-sub-page {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 84px !important;
  padding-bottom: 0 !important;
}
.section-hero.sub-page .hero-block__container {
  min-height: 0 !important;
  padding-top: 56px !important;
  padding-bottom: 64px !important;
  justify-content: center !important;
}
.section-hero.sub-page .hero-block__title {
  font-size: clamp(28px, 2.8vw, 40px) !important;
  line-height: 1.2 !important;
}
.section-hero.sub-page .hero-block__desc {
  font-size: 18px !important;
  line-height: 1.5 !important;
}

/* Чекбоксы фильтров карьеры: убрать серую обводку */
.filter-check .w-checkbox-input {
  border: 1px solid #efe9f4 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Все кнопки с градиентной обводкой (.button-p): родной градиент,
   на ховере градиент медленно течёт по обводке + кнопка приподнимается */
.button-p {
  background-image: linear-gradient(135deg, #f60, #f06 26%, #9731ff 51%, #f06 76%, #f60) !important;
  background-size: 300% 300% !important;
  background-position: 0% 50%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.button-p:hover {
  animation: vstBorderFlow 5s linear infinite;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(151, 49, 255, .15);
}
@keyframes vstBorderFlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}


/* Фильтры вакансий: показываем список целиком, без внутреннего скролла */
.vacancies__filter-item .cms-c-filter__wrap {
  max-height: none !important;
  overflow: visible !important;
}

/* Детальные страницы (вакансии и т.п.): меньший верхний отступ */
.s-padding-hero {
  padding-top: 120px !important;
}

/* Единый вертикальный ритм: все секции с шагом 48/48 */
.s-padding-40 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
html.page-home .section-hero {
  padding-bottom: 48px !important;
}

/* ===== Карта на сайте: красивый блок вместо голого фрейма ===== */
.map {
  position: relative;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(31, 15, 55, .10);
  z-index: 0;
}
.map .map-embed,
.map .map-embed iframe {
  border-radius: 40px;
  display: block;
}
/* высота карты на главной — просторнее */
html.page-home .map .map-embed,
html.page-home .map .map-embed iframe {
  min-height: 560px;
}
/* скелетон-прелоадер, пока карта грузится */
.map .map-embed {
  position: relative;
}
.map .map-embed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #f5f3f7 40%, #edeaf2 50%, #f5f3f7 60%);
  background-size: 200% 100%;
  animation: vstShimmer 1.5s linear infinite;
  z-index: 2;
  opacity: 1;
  transition: opacity .6s ease;
  pointer-events: none;
}
.map .map-embed.map-loaded::before {
  opacity: 0;
}
@keyframes vstShimmer {
  to { background-position: -200% 0; }
}

/* ===== Revolut-анимация цен: катящиеся цифры ===== */
.vst-roll {
  display: inline-flex;
  /* по базовой линии текста, а не по низу боксов */
  align-items: baseline;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.vst-roll__digit {
  display: inline-block;
  height: 1.2em;
  line-height: 1.2em;
  /* clip-path обрезает ленту, не ломая базовую линию (в отличие от overflow:hidden) */
  overflow: visible;
  clip-path: inset(0);
  vertical-align: baseline;
}
.vst-roll__strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  transition: transform .65s cubic-bezier(.23, 1, .32, 1);
  will-change: transform;
}
.vst-roll__strip span {
  height: 1.2em;
  line-height: 1.2em;
  text-align: center;
}
.vst-roll__static {
  display: inline-block;
  height: 1.2em;
  line-height: 1.2em;
}

/* ===== Визуальный редактор (активен только в режиме редактирования) ===== */
.vste-bar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(20, 14, 30, .92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #fff;
  border-radius: 16px;
  padding: 10px 16px;
  font-size: 13px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.vste-bar__count { color: #ffb04c; font-weight: 600; }
.vste-bar__btn {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  color: #fff;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 13px;
  transition: background .15s ease;
}
.vste-bar__btn:hover { background: rgba(255, 255, 255, .12); }
.vste-bar__btn--save {
  background: linear-gradient(135deg, #f60, #f06 51%, #9731ff);
  border-color: transparent;
  font-weight: 600;
}
.vste-bar__btn--save:disabled { opacity: .5; cursor: wait; }
.vste-flash {
  position: fixed;
  left: 50%;
  bottom: 72px;
  transform: translateX(-50%) translateY(8px);
  z-index: 99999;
  background: #161616;
  color: #fff;
  border-radius: 12px;
  padding: 9px 16px;
  font-size: 13px;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.vste-flash--show { opacity: 1; transform: translateX(-50%) translateY(0); }
.vste-on .vste-editable:hover {
  outline: 2px dashed rgba(151, 49, 255, .6);
  outline-offset: 3px;
  cursor: text;
}
.vste-on .vste-editable[contenteditable="true"] {
  outline: 2px solid #9731ff;
  outline-offset: 3px;
  background: rgba(151, 49, 255, .05);
}
.vste-on .vste-editable-img:hover {
  outline: 3px dashed rgba(255, 102, 0, .8);
  outline-offset: 3px;
  cursor: pointer;
  filter: brightness(.85);
}
.vste-login {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: rgba(15, 10, 25, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vste-login__box {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
}
.vste-login__title { font-weight: 700; font-size: 18px; }
.vste-login__input {
  border: 1px solid #e3ddea;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.vste-login__err { color: #ff3e3e; font-size: 12px; min-height: 14px; }

/* Значок гривны: меньше и по нижнему краю цены */
.prices__price-w {
  align-items: flex-end !important;
}
.prices__price-w .prices__price:nth-child(2) {
  font-size: .62em !important;
  line-height: 1.55 !important;
  margin-left: 2px;
}

/* Превью новостей: тонкая внутренняя обводка (1px, чёрный 10%) */
.news-c__img-w {
  outline: 1px solid rgba(0, 0, 0, .1);
  outline-offset: -1px;
}

/* Временно скрытые секции (снять — удалить атрибут data-vst-hidden в разметке) */
[data-vst-hidden] { display: none !important; }

/* (12) Кнопка «Надіслати» — та же градиентная рамка, что у «Особистий кабінет».
   input не поддерживает ::before, поэтому рамка рисуется двойным фоном. */
.button-form {
  border: 2px solid transparent !important;
  border-radius: 16px !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #f60, #f06 26%, #9731ff 51%, #f06 76%, #f60) border-box !important;
  background-size: auto, 300% 300% !important;
  background-position: 0% 0%, 0% 50% !important;
  color: #161616 !important;
  font-weight: 600;
  transition: transform .25s ease, box-shadow .25s ease, background-position .4s ease;
}
.button-form:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(151, 49, 255, .15);
  animation: vstFormBorderFlow 5s linear infinite;
}
@keyframes vstFormBorderFlow {
  0%   { background-position: 0% 0%, 0% 50%; }
  100% { background-position: 0% 0%, 300% 50%; }
}

/* (13) Адрес офиса: город и улица на разных строках (перенос задан <br> в разметке).
   Ширину НЕ режем: max-width в ch ломало «вул. Транспортна 5/1» посреди улицы. */
.footer-adr__link[href*="maps.app.goo.gl"],
.feature-c__link[href*="maps.app.goo.gl"] {
  display: inline-block;
  text-wrap: balance;
}

/* Форма входа редактора: кнопка всегда видна, свои стили поверх сайта */
.vste-login__box .vste-bar__btn--save {
  display: block !important;
  width: 100%;
  padding: 11px 16px !important;
  color: #fff !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #f60, #f06 51%, #9731ff) !important;
  border: none !important;
  font-weight: 600;
}
.vste-login__box .vste-bar__btn--save:disabled { opacity: .7; }

/* (14) раньше включать подложку меню при скролле */
.nav.nav-active-early {
  background: rgba(255, 255, 255, .55) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.8) !important;
  backdrop-filter: blur(22px) saturate(1.8) !important;
  box-shadow: 0 6px 24px rgba(20, 20, 43, .08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .4) !important;
}

/* (10) «Про VST в цифрах»: объёмная, плавная смена — эффект цилиндра */
.numbers-w { perspective: 900px; }
.numbers-w .numbers-track { transform-style: preserve-3d; }
.numbers-w .numbers-slide {
  transition:
    transform .6s cubic-bezier(.22, 1, .3, 1),
    opacity .5s ease,
    filter .5s ease;
  transform-origin: center center;
}
/* вертикальный барабан: строки ровные, боковые грани уходят вглубь по горизонтали */
.numbers-w .numbers-slide:not(.is-active) {
  transform: rotateY(34deg) scale(.9);
  opacity: .32;
  filter: blur(.5px);
}
.numbers-w .numbers-slide.is-active ~ .numbers-slide:not(.is-active) {
  transform: rotateY(-34deg) scale(.9);
}
.numbers-w .numbers-slide.is-active {
  transform: rotateY(0deg) scale(1);
  opacity: 1;
  filter: none;
}
.numbers-w .numbers-track .numbers-slide .numbers-slide__num {
  transition:
    font-size .6s cubic-bezier(.22, 1, .3, 1),
    opacity .45s ease !important;
}

/* (2) Карта внутри скруглённой обёртки: фрейм заполняет её целиком, без тёмных полей */
.content-block-img-w-2 {
  overflow: hidden;
}
.content-block-img-w-2 .map-embed,
.content-block-img-w-2 .map-embed iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: inherit;
}
.content-block-img-w-2 .map-embed {
  position: absolute;
  inset: 0;
}

/* Единый формат цены: копейки и разделитель мельче целой части */
.vst-roll__small { font-size: .72em; }

/* на «тихом прыжке» карусели цифр гасим и анимацию слайдов — иначе рывок на стыке */
.numbers-w .numbers-track--no-transition,
.numbers-w .numbers-track--no-transition .numbers-slide,
.numbers-w .numbers-track--no-transition .numbers-slide__num,
.numbers-w .numbers-track--no-transition .numbers-slide__text-w {
  transition: none !important;
  animation: none !important;
}

/* Свечение под hero — единое правило для ВСЕХ страниц.
   Раньше это была картинка-градиент, которую секция обрезала по своему
   прямоугольнику — отсюда острые края и плотная засветка под меню.
   Теперь края растворяются маской: максимум свечения на уровне контента,
   к верху (под меню) и к низу оно уходит в ноль. */
.hero-bg-gd {
  --hero-glow-mask: radial-gradient(
    64% 32% at 50% 68%,
    #000 0%,
    rgba(0, 0, 0, .85) 38%,
    rgba(0, 0, 0, .35) 70%,
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: var(--hero-glow-mask);
  mask-image: var(--hero-glow-mask);
}
@media (max-width: 991px) {
  .hero-bg-gd {
    opacity: .45 !important;
    --hero-glow-mask: radial-gradient(
      75% 34% at 50% 66%,
      #000 0%,
      rgba(0, 0, 0, .8) 36%,
      rgba(0, 0, 0, .3) 68%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* Цены: высота строки не зависит от того, загрузились цены или ещё нет.
   Простой текст «00.00» занимает 1.4em, барабан из цифр — меньше,
   из-за чего вся карточка подпрыгивала в момент подстановки цены. */
.prices-cell .prices__price-w {
  align-items: flex-end;
}
/* Распорка ростом со строку цены: 22px * 1.4 = 30.8px.
   min-height на обёртке не годится — у неё свой кегль 16px, и 1.4em дало бы 22px.
   Барабан из цифр ниже простого текста (26.4 против 30.8), распорка держит ряд
   одинаковым в обоих состояниях, а цифры остаются прижатыми к низу. */
.prices-cell .prices__price-w::before {
  content: "";
  width: 0;
  font-size: 22px;
  height: 1.4em; /* 30.8px — ровно строка цены; line-height у пустого флекс-элемента высоту не даёт */
}
/* место под стрелку занято всегда — при скрытой стрелке ряд не смещается */
.prices-cell .prices__price-arrow-w {
  display: inline-flex;
  align-items: flex-end;
}

/* Теги на карточках новостей скрыты (в контенте лежали заглушки «Tag» и даты) */
.news-c__tag-w-b,
.news-c__tag-w-s {
  display: none !important;
}

/* Кнопка в hero страницы паливних карток: класс наш, в макете его нет —
   задаём отступ от текста явно */
.hero-p__btn-w {
  margin-top: 32px;
}
@media (max-width: 767px) {
  .hero-p__btn-w { margin-top: 24px; }
}

/* Кнопки магазинів. iOS-застосунок вийшов 14.09.2026 — кнопку App Store показуємо
   і ведемо на картку. У Google Play застосунку ще немає, тому та кнопка схована:
   кнопка або працює, або її немає. Коли Android вийде — прибрати .vst-store-hidden. */
.vst-store-hidden {
  display: none !important;
}
/* нижній блок у футері поки без кнопок — там був лише той самий набір */
.footer__btn-s {
  display: none !important;
}


/* Мини-вьювер PDF (паспорти якості на /documents/): модалка з <iframe>,
   PDF вантажиться лише при відкритті — на сторінці одразу нічого не тягнеться. */
.pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.pdf-modal.is-open { display: flex; }
.pdf-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(24, 12, 34, .55);
  backdrop-filter: blur(4px);
}
.pdf-modal__card {
  position: relative;
  width: min(880px, 100%);
  height: min(86vh, 1000px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(31, 15, 55, .28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pdf-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.pdf-modal__title {
  font-weight: 600;
  font-size: 15px;
  color: var(--_colors---text--title, #101010);
}
.pdf-modal__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pdf-modal__download {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .10);
  font-size: 13px;
  font-weight: 600;
  color: #6b04cf;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.pdf-modal__download svg { flex-shrink: 0; color: #6b04cf; }
.pdf-modal__download:hover { background: rgba(0, 0, 0, .05); }
.pdf-modal__close {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, .10);
  background: transparent;
  cursor: pointer;
  color: #6b04cf;
  flex-shrink: 0;
}
.pdf-modal__close:hover { background: rgba(0, 0, 0, .05); }
.pdf-modal__close:focus,
.pdf-modal__close:focus-visible { outline: none; }
.pdf-modal__frame {
  flex: 1;
  width: 100%;
  border: 0;
}
@media (max-width: 767px) {
  .pdf-modal { padding: 0; }
  .pdf-modal__card { width: 100%; height: 100%; border-radius: 0; }
}

/* Карточки документів: дві дії поруч замість однієї */
.news-c__btn-w.is-doc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Контактные карточки: адресу нужна ширина под строку «вул. Транспортна 5/1» */
.content-s__btn-wrap .feature-c__txt-w {
  min-width: 170px;
}
@media (max-width: 479px) {
  .content-s__btn-wrap .feature-c__txt-w {
    min-width: 0;
  }
}

/* (18) Мобільне підменю (< 992px) — власне розкриття замість логіки Webflow.
   Причина: у реальному браузері (зокрема вбудованому в Instagram) тап по пункту
   або не розкривав список, або одразу закривав усе меню. Керуємо класом is-open. */
@media screen and (max-width: 991px) {
  .nav .nav__d-drop {
    display: none !important;
  }
  .nav .nav__d-link.is-open .nav__d-drop {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  /* стрілка повертається, коли список розкритий */
  .nav .nav__d-toogle-icn {
    transition: transform .25s ease;
  }
  .nav .nav__d-link.is-open .nav__d-toogle-icn {
    transform: rotate(180deg);
  }
}

/* (19) Мобільне підменю — акордеон, а не спливаюча картка.
   На вузькому екрані картка з тінню накривала сусідні пункти; тут список
   вбудований у потік меню, з відступом і роздільниками, як решта пунктів. */
@media screen and (max-width: 991px) {
  .nav .nav__d-link.is-open .nav__d-drop {
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    animation: none !important;
  }
  .nav .nav__d-drop-list {
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  .nav .nav__d-drop-link {
    display: block;
    padding: 14px 0 14px 16px !important;
    border-radius: 0 !important;
    border-top: 1px solid rgba(107, 4, 207, .1);
    font-size: 16px;
    color: #222;
  }
  .nav .nav__d-drop-link:hover,
  .nav .nav__d-drop-link:active {
    background: transparent !important;
    color: #6b04cf;
    padding-left: 16px !important;
  }
}

/* (20) Мобільний блок цін: усі ціни в одній білій картці під hero.
   Було: фон прозорий, а тінь зі зсувом 0 64px -64px — смуга «від'їжджала»
   від блоку й висіла окремо під ним. */
@media screen and (max-width: 991px) {
  .prices__section {
    margin-top: 16px;
  }
  .prices-hero {
    background: #fff !important;
    border: 1px solid rgba(107, 4, 207, .1) !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(31, 15, 55, .08) !important;
    padding: 8px 16px !important;
  }
  .prices-hero .prices-cell {
    padding: 16px 0 !important;
  }
  .prices-hero .prices-loyalty {
    margin-top: 4px;
  }
}

/* (21) Мобільне меню — власне, без Webflow.
   Причина: Webflow при відкритті переносить меню в свій оверлей, а при тапі
   по пункту з підменю вирішує, що це «клік повз», і закриває все. Боротися
   з його механікою не вийшло — тому керуємо станом самі, класом на .nav. */
@media screen and (max-width: 991px) {
  .nav .nav__menu {
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 92px !important;
    bottom: 0 !important;
    width: auto !important;
    background: #fff !important;
    padding: 0 16px 40px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 1000 !important;
    transform: none !important;
  }
  .nav.vst-menu-open .nav__menu {
    display: block !important;
  }
  /* сховати оверлей Webflow — він більше не бере участі */
  .w-nav-overlay {
    display: none !important;
  }
  /* три смужки перетворюються на хрестик власними силами */
  .navbar-menu-btn .nb-l-1,
  .navbar-menu-btn .nb-l-2,
  .navbar-menu-btn .nb-l-3 {
    transition: transform .25s ease, opacity .2s ease;
  }
  .nav.vst-menu-open .navbar-menu-btn .nb-l-1 {
    transform: translateY(6px) rotate(45deg);
  }
  .nav.vst-menu-open .navbar-menu-btn .nb-l-2 {
    opacity: 0;
  }
  .nav.vst-menu-open .navbar-menu-btn .nb-l-3 {
    transform: translateY(-6px) rotate(-45deg);
  }
  /* під блоком Carma+ трохи більше повітря в картці з пальним */
  .prices-hero {
    padding-bottom: 24px !important;
  }
}

/* (22) Метан ховаємо одразу стилями, а не скриптом після завантаження цін:
   інакше при оновленні сторінки картка встигала блимнути. Жодної АЗК з
   метаном у мережі зараз немає; щойно ціна з'явиться — скрипт покаже картку. */
.prices-cell[data-fuel="metan"] {
  display: none;
}

/* ===================== Акційна сторінка: купон СТІНОЛ ===================== */
/* Практики купонних лендінгів: код над згином, великий і копіюється в один тап,
   умови поруч (розкривний блок), CTA дублюється внизу. */

.vst-promo-hero__col2 {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 18px 40px rgba(20, 20, 43, .18));
}
.vst-promo-hero__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.vst-promo-hero__tel {
  font-size: 17px;
  font-weight: 600;
  color: #1c1917;
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 4, 207, .35);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.vst-promo-hero__tel:hover { color: #6b04cf; border-color: #6b04cf; }

/* ---- сам купон ---- */
.vst-coupon {
  --rip: 168px;              /* висота верхньої частини — де «відрив» */
  --notch: 15px;
  width: 100%;
  max-width: 400px;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  -webkit-mask:
    radial-gradient(circle var(--notch) at left var(--rip), transparent 98%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at right var(--rip), transparent 98%, #000 100%) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle var(--notch) at left var(--rip), transparent 98%, #000 100%) left / 51% 100% no-repeat,
    radial-gradient(circle var(--notch) at right var(--rip), transparent 98%, #000 100%) right / 51% 100% no-repeat;
}
.vst-coupon__top {
  position: relative;
  height: var(--rip);
  padding: 26px 28px 0;
  color: #fff;
  background: linear-gradient(135deg, #6b04cf 0%, #9731ff 45%, #ff0066 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.vst-coupon__brand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .82;
}
.vst-coupon__percent {
  font-size: 62px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 4px 0 2px;
}
.vst-coupon__for { font-size: 13px; line-height: 1.35; opacity: .9; }

.vst-coupon__rip {
  position: relative;
  height: 0;
  display: flex;
  align-items: center;
}
.vst-coupon__dash {
  position: absolute;
  left: 22px; right: 22px;
  border-top: 2px dashed rgba(0, 0, 0, .16);
}
.vst-coupon__notch { display: none; }

.vst-coupon__bottom {
  padding: 26px 24px 24px;
  text-align: center;
  background: #fff;
}
.vst-coupon__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7c708e;
  margin-bottom: 10px;
}
.vst-coupon__code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 8px 8px 18px;
  border: 0;
  border-radius: 14px;
  background: #f5f3f7;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
  cursor: pointer;
  font: inherit;
  transition: background .2s ease, box-shadow .2s ease;
}
.vst-coupon__code:hover { background: #f2edf5; box-shadow: inset 0 0 0 1px rgba(107, 4, 207, .35); }
.vst-coupon__code:focus-visible { outline: 2px solid #6b04cf; outline-offset: 2px; }
.vst-coupon__code-text {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .10em;
  color: #6b04cf;
  font-variant-numeric: tabular-nums;
}
.vst-coupon__copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: #6b04cf;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .2s ease;
}
.vst-coupon__code:hover .vst-coupon__copy { background: #5703a8; }
.vst-coupon__copy svg { width: 17px; height: 17px; flex: none; }
.vst-coupon__code.is-copied .vst-coupon__copy { background: #0f9d58; }
.vst-coupon__hint { margin-top: 12px; font-size: 13px; line-height: 1.4; color: #7c708e; }

/* ---- заголовок секції ---- */
.vst-sec-head { max-width: 720px; margin-bottom: 40px; }
.vst-sec-head h2 { margin: 0 0 12px; }
.vst-sec-head p { margin: 0; font-size: 17px; line-height: 1.55; color: #5d6c7b; }

/* ---- категорії ---- */
.vst-cats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.vst-cat {
  padding: 26px 24px 28px;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}
.vst-cat__icn {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: #f2edf5;
  color: #6b04cf;
  margin-bottom: 16px;
}
.vst-cat__icn svg { width: 24px; height: 24px; }
.vst-cat__title { font-size: 17px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; color: #1c1917; }
.vst-cat__txt { font-size: 15px; line-height: 1.5; color: #5d6c7b; }

/* ---- CTA внизу ---- */
.vst-promo-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  padding: 34px 38px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(120deg, #6b04cf 0%, #9731ff 52%, #ff0066 100%);
}
.vst-promo-cta__title { font-size: 26px; font-weight: 700; line-height: 1.25; margin-bottom: 8px; }
.vst-promo-cta__txt { font-size: 16px; line-height: 1.5; opacity: .92; }
.vst-promo-cta__r { display: flex; gap: 12px; flex-wrap: wrap; }
.vst-promo-cta__btn {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 26px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
  transition: background .2s ease, color .2s ease;
}
.vst-promo-cta__btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.vst-promo-cta__btn--main { background: #fff; color: #6b04cf; box-shadow: none; }
.vst-promo-cta__btn--main:hover { background: #f2edf5; color: #6b04cf; }

/* ---- умови ---- */
.vst-terms { margin-top: 28px; }
.vst-terms__d {
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
  overflow: hidden;
}
.vst-terms__sum {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-size: 17px;
  font-weight: 600;
  color: #1c1917;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vst-terms__sum::-webkit-details-marker { display: none; }
.vst-terms__sum::after {
  content: "";
  width: 10px; height: 10px;
  border-right: 1.6px solid #6b04cf;
  border-bottom: 1.6px solid #6b04cf;
  transform: rotate(45deg);
  margin-left: 16px;
  transition: transform .25s ease;
  flex: none;
}
.vst-terms__d[open] .vst-terms__sum::after { transform: rotate(-135deg); }
.vst-terms__body { padding: 0 24px 22px; }
.vst-terms__body ul { margin: 0; padding-left: 20px; }
.vst-terms__body li { font-size: 15px; line-height: 1.6; color: #5d6c7b; margin-bottom: 8px; }
.vst-terms__body li:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
  .vst-cats { grid-template-columns: repeat(2, 1fr); }
  .vst-promo-hero__col2 { margin-top: 32px; }
  .vst-coupon { max-width: 100%; }
  .vst-promo-cta { padding: 28px 24px; }
  .vst-promo-cta__title { font-size: 22px; }
}
@media (max-width: 640px) {
  .vst-cats { grid-template-columns: 1fr; gap: 14px; }
  .vst-coupon { --rip: 150px; }
  .vst-coupon__percent { font-size: 54px; }
  .vst-coupon__code { padding-left: 14px; }
  .vst-coupon__code-text { font-size: 23px; }
  .vst-coupon__copy-txt { display: none; }
  .vst-coupon__copy { padding: 0 12px; }
  .vst-promo-hero__actions { gap: 14px; }
  .vst-promo-cta__r { width: 100%; }
  .vst-promo-cta__btn { flex: 1 1 auto; justify-content: center; }
}

/* картка акції без фото — замість зображення показуємо сам купон */
.vst-card-coupon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #6b04cf 0%, #9731ff 48%, #ff0066 100%);
}
.vst-card-coupon__pct {
  font-size: clamp(44px, 5.6vw, 72px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

/* акційний hero з фотографією + секція «про акцію» з купоном збоку */
.vst-promo-hero__img {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
  margin-left: auto;
  /* фото більше за колонку і «пірнає» під нижній зріз hero —
     section.bg-color-shapes має overflow:hidden, тому зайве обрізається */
  margin-bottom: -32px;
}
.vst-promo-hero__col2 {
  filter: none;
  align-items: flex-end;
  justify-content: flex-end;
}

.vst-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 56px;
  align-items: start;
}
.vst-about__txt h2 { margin: 0 0 18px; }
.vst-about__txt p { font-size: 17px; line-height: 1.6; color: #5d6c7b; margin: 0 0 14px; }
.vst-about__txt p:last-child { margin-bottom: 0; }
.vst-about__coupon { filter: drop-shadow(0 18px 40px rgba(20, 20, 43, .16)); }

/* купон у секції «про акцію» — на 15% дрібніший за базовий і вирівняний по верху тексту */
.vst-about__coupon .vst-coupon { --rip: 143px; --notch: 13px; max-width: 340px; border-radius: 22px; }
.vst-about__coupon .vst-coupon__top { padding: 22px 24px 0; }
.vst-about__coupon .vst-coupon__percent { font-size: 53px; }
.vst-about__coupon .vst-coupon__for { font-size: 12px; }
.vst-about__coupon .vst-coupon__brand { font-size: 11px; }
.vst-about__coupon .vst-coupon__bottom { padding: 22px 20px 20px; }
.vst-about__coupon .vst-coupon__code { min-height: 48px; padding-left: 15px; }
.vst-about__coupon .vst-coupon__code-text { font-size: 22px; }
.vst-about__coupon .vst-coupon__copy { height: 34px; padding: 0 12px; font-size: 12px; }
.vst-about__coupon .vst-coupon__hint { font-size: 12px; margin-top: 10px; }


@media (max-width: 991px) {
  .vst-about { grid-template-columns: 1fr; gap: 28px; }
  .vst-promo-hero__img { margin: 0 auto -70px; max-width: 560px; }
}

/* ===== Логотип Carma+ замість набраного слова ===== */
/* У блоці цін замість градієнтної плашки з написом — фірмовий логотип. */
.carma.carma--logo {
  height: auto;
  padding: 0;
  border-radius: 0;
  background-image: none;
  background: none;
}
.carma--logo .carma-logo {
  height: 46px;
  width: auto;
  display: block;
}
/* У заголовках сторінки застосунку слово CARMA+ замінене логотипом */
.carma-inline {
  /* логотип-«бульбашка» вищий за рядок: щоб слово carma читалось нарівні
     з текстом заголовка, беремо ~1.9 висоти шрифта і опускаємо на хвостик */
  height: 1.45em;
  width: auto;
  display: inline-block;
  vertical-align: -0.36em;
  margin: 0 .08em;
}
@media (max-width: 991px) {
  .carma--logo .carma-logo { height: 38px; }
}

/* Hero сторінки застосунку: логотип замість заголовка — більший і з повітрям до тексту */
.carma-inline--hero {
  display: block;
  height: 3.1em;
  vertical-align: baseline;
  margin: 0 0 22px;
}
@media (max-width: 991px) {
  .carma-inline--hero { height: 2.9em; margin-bottom: 18px; }
}

/* ===== Сірі блоки: картинка оформлена так само, як у блоках пального =====
   Було: знімок на всю колонку без скруглення, впритул до нижнього краю секції
   (у .s-padding-sub-hero відступ лише зверху). Робимо картку: 4/3, cover,
   скруглення й тонка рамка — і таке саме повітря знизу, як згори. */
.section.bg-grey .s-padding-sub-hero {
  padding-bottom: 120px;
}
.section.bg-grey .hero-p__col2 .gsdg {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--_sizes---ui--radius-40, 40px);
  border: 1px solid rgba(0, 0, 0, .10);
}
@media (max-width: 991px) {
  .section.bg-grey .s-padding-sub-hero { padding-bottom: 64px; }
  .section.bg-grey .hero-p__col2 .gsdg { border-radius: 28px; }
}

/* ===== Один підхід до всіх картинок у блоках «текст + зображення» =====
   Було: знімок на всю колонку без скруглення, притиснутий до низу секції
   (.content-s2__col1 має justify-content:flex-end і min-height:500px).
   Стало: всюди однакова картка — 4/3, cover, скруглення й тонка рамка,
   з таким самим повітрям згори й знизу, як у текстовій колонці (64px). */
.content-s2__col1 {
  justify-content: center;
  min-height: 0;
  padding-top: var(--_sizes---64px, 64px);
  padding-bottom: var(--_sizes---64px, 64px);
}
.content-s2__img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--_sizes---ui--radius-40, 40px);
  border: 1px solid rgba(0, 0, 0, .10);
}
/* макет застосунку — предмет на прозорому тлі: рамка й обрізання йому не підходять */
.content-s2__img.is-plain {
  aspect-ratio: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
}
@media (max-width: 991px) {
  .content-s2__col1 { padding-top: 32px; padding-bottom: 32px; }
  .content-s2__img { border-radius: 28px; }
}