/*
Theme Name:   Atlas Barbershop
Theme URI:    https://atlas-barbershop.lviv.ua/
Description:  Дочірня тема Hello Elementor для ATLAS Barbershop. Міграція з Tilda.
Author:       Kofax Agency
Template:     hello-elementor
Version:      1.0.1
Text Domain:  atlas
*/

:root {
  /* Палітра з Tilda-донора */
  --atlas-black:      #000000;
  --atlas-hero-bg:    #0F0F0F;
  --atlas-contact-bg: #111111;
  --atlas-services-bg:#F2F2F2;
  --atlas-team-bg:    #EFEFEF;
  --atlas-white:      #FFFFFF;
  --atlas-accent:     #DB7857;
  --atlas-accent-alt: #FA876B;
  --atlas-muted:      #757575;
}

/* ------------------------------------------------------------------
   Шапка — поведінка Tilda T199:
   fixed 99px, прозора з білим текстом над hero,
   на скролі — біла з тінню і чорним текстом.
   ------------------------------------------------------------------ */

body.ehf-header #masthead,
#masthead {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 990;
  background-color: rgba(255, 255, 255, 0);
  color: var(--atlas-white);
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}

/* Elementor фарбує текстові віджети глобальним кольором тексту (чорним).
   У шапці все має успадковувати її колір: білий зверху, чорний на скролі. */
#masthead .atlas-lang,
#masthead .atlas-lang p,
#masthead .atlas-lang a,
#masthead a,
#masthead .atlas-logo .elementor-heading-title,
#masthead .atlas-logo .elementor-heading-title a,
#masthead .atlas-nav a,
#masthead .atlas-nav .menu-item a,
#masthead .atlas-lang a {
  color: inherit;
}

body.atlas-header-scrolled #masthead {
  background-color: var(--atlas-white);
  color: var(--atlas-black);
  box-shadow: rgba(0, 0, 0, .13) 0 4px 16px;
}

.atlas-logo {
  white-space: nowrap;
}

.atlas-lang p {
  margin: 0;
  display: flex;
  gap: 10px;
}

/* Контент починається під фіксованою шапкою */
body:not(.elementor-editor-active) .atlas-has-hero #content {
  padding-top: 0;
}

/* ------------------------------------------------------------------
   Hero — обкладинка T996: absolute справа, 60% ширини, на всю висоту.
   Позиціонування зроблене тут, а не контролами Elementor: вони дають
   лише offset без height, і блок сплющується.
   ------------------------------------------------------------------ */

.atlas-hero {
  position: relative;
  overflow: hidden;
}

.atlas-hero__cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: 60%;
  height: 100%;
  margin: 0;
}

.atlas-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
}

/* Мобільна: обкладинка йде фоном усього блоку, текст поверх */
@media (max-width: 640px) {
  .atlas-hero__cover {
    width: 100%;
    opacity: .25;
  }
}

/* Абзаци опису hero — без власних margin, інтервали дає padding віджета
   (так само, як у T996 на Tilda) */
.atlas-hero__descr p {
  margin: 0;
}

/* Розкладка шапки за оригіналом: лого зліва, меню і мови притиснуті вправо,
   між меню і перемикачем мов — 56px */
.atlas-header .atlas-nav {
  margin-left: auto;
}

.atlas-header .atlas-lang {
  margin-left: 33px;
}

/* Пункт «UA EN» усередині меню потрібен лише мобільній випадайці —
   на десктопі перемикач стоїть окремим віджетом праворуч від меню. */
.atlas-header .atlas-nav .atlas-lang-item {
  display: none;
}

.atlas-lang p {
  gap: 16px;
}

@media (max-width: 960px) {
  .atlas-header .atlas-lang {
    margin-left: 24px;
  }
}

/* Опис послуги — абзаци без власних margin (як у картках T844) */
.atlas-service__descr p {
  margin: 0;
}

/* Фото майстра — квадрат 360x360 з обрізкою по центру (як .t539__bgimg) */
.atlas-member__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.atlas-member__role p {
  margin: 0;
}

/* ------------------------------------------------------------------
   ГАЛЕРЕЯ — плитка 3:4 на всю ширину
   ------------------------------------------------------------------ */

/* В оригіналі блок галереї на 18px вищий за плитки — зайвий відступ знизу */
.atlas-gallery {
  padding-bottom: 18px;
}

.atlas-gallery__img a {
  display: block;
  width: 100%;
}

.atlas-gallery__img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
}

/* ------------------------------------------------------------------
   КАРТА
   ------------------------------------------------------------------ */

.atlas-map__frame iframe {
  display: block;
  width: 100%;
  height: 500px;
  border: 0;
}

/* ------------------------------------------------------------------
   ПІДВАЛ — T452
   ------------------------------------------------------------------ */

.atlas-footer {
  min-height: 165px;
}

.atlas-footer__text p {
  margin: 0;
}

.atlas-footer__text a {
  color: inherit;
  text-decoration: none;
}

.atlas-footer__text a:hover {
  text-decoration: underline;
}

/* В оригіналі три іконки стоять на 18px лівіше центру колонки —
   там лишився порожній слот від четвертої. Відтворюємо зсув. */
.atlas-footer__icons {
  margin-right: 36px;
}

.atlas-footer__icons .elementor-social-icon {
  width: 30px;
  height: 30px;
  background-color: transparent;
  color: var(--atlas-white);
}

.atlas-footer__icons .elementor-social-icon:hover {
  opacity: .75;
}

/* ------------------------------------------------------------------
   CTA — вміст попапа (Zero Block rec851661626)
   Сітка 1200 по центру, координати з брейкпоінта 1440.
   Поза попапом секція прихована — в оригіналі вона теж не в потоці.
   ------------------------------------------------------------------ */

.atlas-cta {
  display: none;
}

.atlas-cta_open {
  /* контейнери Elementor працюють на flex — display:block ламає розкладку */
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  overflow: auto;
  background-color: rgba(0, 0, 0, .8);
}

.atlas-cta_open > .e-con-inner {
  width: 100%;
}

.atlas-cta__close {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 10001;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--atlas-white);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.atlas-cta__close:hover {
  opacity: .7;
}

.atlas-cta__stage {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  height: 680px;
  background-color: var(--atlas-black);
  overflow: hidden;
}

.atlas-cta__photo,
.atlas-cta__phone,
.atlas-cta__title,
.atlas-cta__sub,
.atlas-cta__btn {
  position: absolute;
  margin: 0;
}

.atlas-cta__photo { left: 532px; top: -3px;  width: 669px; height: 684px; }
.atlas-cta__phone { left: 320px; top: 666px; width: 200px; height: 253px; }
.atlas-cta__title { left: 42px;  top: 87px;  width: 660px; }
.atlas-cta__sub   { left: 43px;  top: 325px; width: 637px; }
.atlas-cta__btn   { left: 40px;  top: 511px; width: 380px; }

.atlas-cta__photo img,
.atlas-cta__phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.atlas-cta__btn .elementor-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 380px;
  height: 80px;
  padding: 0;
}

/* Адаптив CTA: нижче 1200 композиція перебудовується у стовпчик */
@media (max-width: 1199px) {
  .atlas-cta__stage {
    height: auto;
    padding: 48px 24px 56px;
  }

  .atlas-cta__photo,
  .atlas-cta__phone,
  .atlas-cta__title,
  .atlas-cta__sub,
  .atlas-cta__btn {
    position: static;
    width: 100%;
    height: auto;
  }

  .atlas-cta__phone { display: none; }
  .atlas-cta__photo { margin-bottom: 28px; }
  .atlas-cta__title .elementor-heading-title { font-size: 48px; line-height: 1.05; }
  .atlas-cta__sub   .elementor-heading-title { font-size: 28px; line-height: 1.15; }
  .atlas-cta__sub   { margin: 18px 0 28px; }
  .atlas-cta__btn .elementor-button { width: 100%; max-width: 380px; height: 64px; }
}

/* Стандартний підвал Hello Elementor з копірайтом — в оригіналі його немає.
   Ховаємо, бо роль підвалу виконує блок контактів (T452). */
.site-footer {
  display: none;
}

/* Заголовки карток послуг — мінімум два рядки, щоб ціни в ряду
   стояли на одній лінії. «Комплекс (стрижка + борода)» переноситься,
   решта — ні; без цього прайс виглядає нерівним (як і було на Tilda). */
.atlas-service__title .elementor-heading-title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
}

@media (max-width: 640px) {
  .atlas-service__title .elementor-heading-title {
    min-height: 0;
  }
}

/* ==================================================================
   АДАПТИВ
   Поведінка знята з оригіналу:
     ≤960  обкладинка hero під текстом · послуги 1 колонка ·
           команда 2 · галерея 2
     ≤640  дрібніша типографіка, шапка з бургером
   Ширини задаються через --width: саме цю змінну Elementor
   використовує для ширини контейнера.
   ================================================================== */

@media (max-width: 960px) {

  /* --- Hero: колонка замість двох, обкладинка знизу --- */
  /* Elementor тримає --flex-direction селектором із двох класів,
     тому змінну перебити не вдається — ставимо властивість напряму */
  .atlas-hero {
    flex-direction: column !important;
    min-height: 0;
  }

  .atlas-hero__cover {
    position: static;
    order: 2;
    --width: 100%;
    width: 100% !important;
    height: 270px;
    opacity: 1;
  }

  .atlas-hero__content {
    order: 1;
    --width: 100%;
    width: 100%;
    padding: 60px 0 30px;
  }

  /* В оригіналі на цій ширині колонка не розтягується,
     а центрується: 640px контенту + по 20px відступів */
  .atlas-hero__col {
    --width: 100%;
    width: 100%;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
  }

  .atlas-hero__title .elementor-heading-title {
    font-size: 48px;
    line-height: 1.18;
  }

  .atlas-hero__descr {
    padding: 30px 0 40px;
  }

  /* --- Послуги: одна колонка --- */
  .atlas-service {
    --width: 100%;
    width: 100%;
  }

  /* Проміжок між рядами Elementor тримає на .e-con-inner,
     а не на самому контейнері — правити треба саме його */
  .atlas-services__grid,
  .atlas-services__grid > .e-con-inner {
    --width: 100%;
    --row-gap: 59px;
    row-gap: 59px;
  }

  .atlas-team__grid > .e-con-inner {
    row-gap: 40px;
  }

  .atlas-service__title .elementor-heading-title {
    min-height: 0;
  }

  /* --- Команда: сітка стискається до 640px по центру, як в оригіналі:
         картка 320 (фото 280 + по 20 відступів), два ряди --- */
  .atlas-team__grid {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }

  .atlas-team__grid > .e-con-inner {
    column-gap: 0;
    row-gap: 40px;
  }

  .atlas-member {
    --width: 50%;
    width: 50%;
    padding: 0 20px;
  }

  .atlas-member__text {
    padding: 15px 20px 20px;
  }

  .atlas-member__name .elementor-heading-title {
    font-size: 20px;
    line-height: 27px;
  }

  .atlas-member__role .elementor-widget-container {
    font-size: 12px;
  }

  .atlas-team__title .elementor-heading-title {
    font-size: 40px;
  }

  .atlas-team__title {
    margin-bottom: 45px !important;
  }

  .atlas-gallery__tile {
    --width: 50%;
    width: 50%;
  }
}

@media (max-width: 640px) {

  .atlas-hero__col {
    padding: 0 20px;
  }

  .atlas-hero__title .elementor-heading-title {
    font-size: 30px;
    line-height: 1.22;
  }

  .atlas-hero__descr .elementor-widget-container {
    font-size: 18px;
  }

  /* Кнопки лишаються в один ряд, як в оригіналі, — звужуються за рахунок падінгів */
  .atlas-hero__buttons {
    flex-wrap: nowrap;
  }

  .atlas-hero__buttons > .elementor-widget-button {
    flex: 1 1 0;
    min-width: 0;
  }

  .atlas-hero__buttons .elementor-button {
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
    white-space: nowrap;
  }

  .atlas-services__title .elementor-heading-title,
  .atlas-team__title .elementor-heading-title {
    font-size: 30px;
    line-height: 1.2;
  }

  .atlas-team {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  /* Картка майстра на мобільному: без бокових відступів,
     фото на всю ширину картки — як в оригіналі */
  .atlas-member {
    padding-left: 0;
    padding-right: 0;
  }

  /* Бокові відступи лишаємо: у тексту тепер біле тло, без них
     підписи впиралися б у край картки (в оригіналі тут 20px) */
  .atlas-member__text {
    padding: 14px 20px 16px;
  }

  .atlas-member__name .elementor-heading-title {
    font-size: 18px;
    line-height: 1.3;
  }

  .atlas-member__role .elementor-widget-container {
    font-size: 13px;
  }

  .atlas-services {
    padding-top: 60px;
    padding-bottom: 70px;
  }

  /* --- Підвал: у стовпчик, все по центру --- */
  .atlas-footer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 299px;
    padding: 40px 20px;
  }

  .atlas-footer__contacts {
    --width: 100%;
    width: 100%;
    padding: 0;
    text-align: center;
  }

  .atlas-footer__social {
    --width: 100%;
    width: 100%;
    padding: 24px 0 0;
  }

  .atlas-footer__icons {
    margin-right: 0;
  }

  /* --- Карта --- */
  .atlas-map {
    padding-left: 0;
    padding-right: 0;
  }

  /* В оригіналі карта лишається 500px і на мобільному */
  .atlas-map__frame iframe {
    height: 500px;
  }
}

/* Шапка потребує бокових відступів на всіх ширинах нижче контейнера */
@media (max-width: 1199px) {

  .atlas-header {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Відступи секцій — лише в діапазоні 961–1199.
   Нижче 960 кожна секція має власні правила, і цей блок
   (він іде пізніше у файлі) їх би перебивав. */
@media (min-width: 961px) and (max-width: 1199px) {

  .atlas-services__grid,
  .atlas-team__grid,
  .atlas-services > .e-con-inner,
  .atlas-team > .e-con-inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  .atlas-services__title,
  .atlas-team__title {
    padding-left: 0;
    padding-right: 0;
  }

  /* Hero: відступи як у t-container (20px), інакше колонка вужча
     за оригінальну і заголовок переноситься зайвий раз */
  .atlas-hero__content {
    padding-left: 20px;
    padding-right: 20px;
  }

  .atlas-hero__title .elementor-heading-title {
    font-size: 48px;
  }
}

/* Бургер зʼявляється саме тут, тож і розкладка шапки — звідси */
@media (max-width: 1024px) {

  /* --- Шапка на мобільному: лого зліва, мови і бургер справа, один рядок ---
     Три речі доводиться перебивати силою:
       1) напрям контейнера Elementor задає змінною --flex-direction;
       2) перенос — власним правилом на брейкпоінт (звідси !important);
       3) віджети всередині контейнера отримують ширину 100%
          через --container-widget-width, тому меню розпирало на 408px. */

  #masthead {
    background-color: var(--atlas-black);
    color: var(--atlas-white);
  }

  .atlas-header {
    padding: 0 20px;
    min-height: 60px;
    --flex-direction: row;
    --align-items: center;
  }

  /* Лого по центру смуги. Elementor тримає вирівнювання змінною
     --justify-content, і пише її селектором `.elementor-52 .elementor-element-…`
     (0,2,0) — тому `.atlas-header` тут програє, потрібен #masthead. */
  #masthead .atlas-header {
    --justify-content: center;
  }

  .atlas-header > .e-con-inner {
    position: relative;
    flex-direction: row;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
  }

  .atlas-header .atlas-logo {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .atlas-header .atlas-logo .elementor-heading-title {
    font-size: 16px !important;
    letter-spacing: 1px;
    white-space: nowrap;
  }

  .atlas-header .atlas-lang,
  .atlas-header .atlas-nav {
    flex: 0 0 auto;
    width: auto !important;
    --container-widget-width: auto;
  }

  /* Як в оригіналі (T199 на ≤1024): бургер притиснутий абсолютом до лівого
     краю, лого центроване в смузі. Перемикач мов в оригіналі тут захований
     у випадайці — ми лишаємо його видимим і кладемо симетрично справа.
     Обидва виносимо з потоку, інакше лого центрується не по смузі,
     а по залишку місця між ними — і зʼїжджає на різницю їхніх ширин. */
  /* Центруємо флексом, а НЕ transform: translateY(-50%).
     Трансформ на предку робить його системою координат для
     position: fixed усередині — панель меню тоді відлічує top: 60px
     від бургера, а не від вікна, і під шапкою зʼявляється зазор. */
  .atlas-header .atlas-nav {
    order: 1;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    margin: 0;
  }

  .atlas-header .atlas-logo {
    order: 2;
    margin: 0;
    text-align: center;
  }

  /* В оригіналі на ≤1024 перемикача у смузі немає — він усередині
     відкритої панелі. Пункт меню для нього додає фільтр у functions.php. */
  .atlas-header .atlas-lang {
    display: none;
  }

  /* Прихований список меню лишається display:flex і розпирає віджет
     на всю ширину пунктів. Виносимо його з потоку — у віджеті
     лишається тільки бургер, а меню випадає під шапкою. */
  .atlas-header .atlas-nav .hfe-nav-menu__layout-horizontal {
    position: relative;
  }

  /* Панель як у донора (.t199__mmenu на ≤1024): на весь екран під шапкою,
     біле тло, чорний текст, виїзд зліва. HFE ховає список через
     visibility і вішає .menu-is-active на обгортку, тому transform
     і opacity анімуються — display він не чіпає. */
  /* #masthead потрібен, бо HFE при відкритті ставить списку
     position: relative правилом із пʼяти класів — без цього панель
     перестає бути привʼязаною до вікна і сповзає вниз від шапки. */
  #masthead .atlas-header .atlas-nav ul.hfe-nav-menu {
    position: fixed;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    flex-direction: column;
    /* без nowrap колонка загортається у другу, щойно пункти перестають
       вміщатися по висоті — перемикач мов відʼїжджав за край екрана */
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
    padding: 10vh 0;
    overflow-y: auto;
    background-color: var(--atlas-white);
    color: var(--atlas-black);
    opacity: 0;
    transform: translateX(-140%);
    transition: opacity .4s ease, transform .4s ease;
  }

  #masthead .atlas-header .atlas-nav .menu-is-active ul.hfe-nav-menu {
    opacity: 1;
    transform: none;
  }

  /* HFE малює відкрите меню на білому тлі і ставить білий фон пунктам —
     на темній шапці виходить біле на білому */
  .atlas-header .atlas-nav .hfe-nav-menu__layout-horizontal {
    background-color: transparent !important;
  }

  /* Випадайка на всю ширину шапки — надійніше, ніж боротися
     з власним позиціонуванням HFE */
  .atlas-header .atlas-nav ul.hfe-nav-menu {
    left: 0 !important;
    right: 0 !important;
  }

  /* HFE малює роздільні лінії між пунктами — в оригіналі їх немає */
  .atlas-header .atlas-nav ul.hfe-nav-menu .menu-item,
  .atlas-header .atlas-nav ul.hfe-nav-menu .menu-item a {
    border: 0 !important;
  }

  /* Власні відступи пунктів від HFE — висоту тут задає line-height,
     як в оригіналі (12vh), інакше список не вміщається в екран */
  .atlas-header .atlas-nav ul.hfe-nav-menu .menu-item {
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
  }

  .atlas-header .atlas-nav ul.hfe-nav-menu .menu-item a {
    display: block;
    padding: 0;
    text-align: center;
    font-size: 4vh;
    line-height: 12vh;
    background-color: transparent !important;
    color: var(--atlas-black) !important;
  }

  /* В оригіналі ховер фарбує пункт у #fff — на білій панелі це біле
     на білому. Лишаємо підкреслення, колір не чіпаємо. */
  .atlas-header .atlas-nav ul.hfe-nav-menu .menu-item a:hover {
    text-decoration: underline;
  }

  /* Перемикач мов — останнім пунктом, дрібніший за пункти меню */
  .atlas-header .atlas-nav ul.hfe-nav-menu .atlas-lang-item {
    display: block;
    text-align: center;
  }

  .atlas-header .atlas-nav ul.hfe-nav-menu .atlas-lang-item a {
    display: inline-block;
    margin: 0 6px;
    padding: 0;
    font-size: 3vh;
    line-height: 15vh;
  }


  /* Іконка бургера успадковує колір шапки, інакше чорне на чорному */
  .atlas-header .atlas-nav .hfe-nav-menu-icon,
  .atlas-header .atlas-nav .hfe-nav-menu-icon svg,
  .atlas-header .atlas-nav .hfe-nav-menu__toggle {
    color: inherit;
    fill: currentColor;
  }

  /* Бургер як у донора (.t-menuburger_first, без __big):
     чотири смужки по 3px у полі 28×20 — верхня, дві злиті посередині
     і нижня. На відкритті крайні стискаються в нуль, середні
     розходяться в хрест. HFE замість цього підставляє іконку «вікно
     з хрестиком» у рамці — ховаємо її, а смужки збираємо на
     псевдоелементах: дві на кнопці, дві на іконці. */
  .atlas-header .atlas-nav .hfe-nav-menu__toggle {
    position: relative;
    width: 28px;
    height: 20px;
    padding: 0;
  }

  .atlas-header .atlas-nav .hfe-nav-menu__toggle svg {
    display: none;
  }

  .atlas-header .atlas-nav .hfe-nav-menu-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .atlas-header .atlas-nav .hfe-nav-menu__toggle::before,
  .atlas-header .atlas-nav .hfe-nav-menu__toggle::after,
  .atlas-header .atlas-nav .hfe-nav-menu-icon::before,
  .atlas-header .atlas-nav .hfe-nav-menu-icon::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: currentColor;
    transition: .25s ease-in-out;
  }

  .atlas-header .atlas-nav .hfe-nav-menu__toggle::before {
    top: 0;
  }

  .atlas-header .atlas-nav .hfe-nav-menu__toggle::after {
    top: 16px;
  }

  .atlas-header .atlas-nav .hfe-nav-menu-icon::before,
  .atlas-header .atlas-nav .hfe-nav-menu-icon::after {
    top: 8px;
  }

  /* Ховер: крайні смужки підтискаються до середини (як _first) */
  .atlas-header .atlas-nav .hfe-nav-menu__toggle:hover::before {
    transform: translateY(1px);
  }

  .atlas-header .atlas-nav .hfe-nav-menu__toggle:hover::after {
    transform: translateY(-1px);
  }

  /* Відкрито: крайні в нуль, середні в хрест */
  .atlas-header .atlas-nav .hfe-nav-menu__toggle.hfe-active-menu::before,
  .atlas-header .atlas-nav .hfe-nav-menu__toggle.hfe-active-menu::after {
    top: 8px;
    left: 50%;
    width: 0;
    transform: none;
  }

  .atlas-header .atlas-nav .hfe-active-menu .hfe-nav-menu-icon::before {
    transform: rotate(45deg);
  }

  .atlas-header .atlas-nav .hfe-active-menu .hfe-nav-menu-icon::after {
    transform: rotate(-45deg);
  }
}

/* Низькі екрани: в оригіналі при висоті ≤380px пункти переходять
   з вимірів у vh на фіксовані, інакше меню не влазить. */
@media (max-width: 1024px) and (max-height: 380px) {

  .atlas-header .atlas-nav ul.hfe-nav-menu {
    padding: 16px 0;
  }

  .atlas-header .atlas-nav ul.hfe-nav-menu .menu-item a {
    font-size: 18px;
    line-height: 20px;
    margin: 15px 0;
  }

  .atlas-header .atlas-nav ul.hfe-nav-menu .atlas-lang-item a {
    font-size: 14px;
    line-height: 20px;
  }
}