/* ===== HEADER: полноэкранный по ширине, НЕ фиксируется ===== */

.navbar{
  position: relative;            /* было absolute — из-за этого казалось «фиксируется» */
  width: 100%;
  height: 5.2rem;
  padding: 0;
  background:#0e0e12;
  z-index: 10;
  display:flex;
  align-items:center;
}

/* если какие-то скрипты навешивают affix/is-fixed — тоже остаёмся в потоке */
.navbar.affix, .js-navbar.affix,
.navbar.is-fixed, .js-navbar.is-fixed{
  position: relative !important;
  top: auto !important;
  box-shadow: none !important;
}

.header-inner{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:100%;
  width:100%;
  padding:0 25px;
}

/* Бургер слева (3 полоски) */
.header-left{ display:flex; align-items:center; z-index:5; }
.navbar-toggle.hh-toggle{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:40px; height:40px; padding:0; margin-right:12px;
  border:0; background:none; cursor:pointer;
}
.navbar-toggle .icon-bar{
  display:block; width:26px; height:2px; background:#fff; transition:opacity .3s;
}
.navbar-toggle:hover .icon-bar{ opacity:.85; }

/* Логотип по центру */
.brand{
  position:absolute; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center;
  color:#fff; text-decoration:none; z-index:3;
}
.brand img{ height:3.0rem; display:block; margin:0 .65rem 0 10px; }

/* Правая часть: телефон + соц-иконки */
.header-right{ margin-left:auto; display:flex; align-items:center; gap:16px; z-index:4; }
.navbar-address{
  display:flex; align-items:center; font-style:normal; font-weight:500;
  text-transform:uppercase; white-space:nowrap;
}
.navbar-address a{ color:#fff; text-decoration:none; font-style:normal; }
.navbar-divider{ width:1px; height:2.6rem; background:#3c3c3c; display:inline-block; margin:0 12px; }
.navbar .social-list{ display:flex; align-items:center; gap:20px; white-space:nowrap; }
.navbar .social-list a{ color:#fff; font-size:1.5rem; text-decoration:none; }
.navbar .social-list a:hover{ color:#af0b0b; }

/* ===== Off-canvas (уникальные классы, чтобы не конфликтовать с футером) ===== */
.hh-overlay{ position:fixed; inset:0; visibility:hidden; z-index:999; }

.hh-offcanvas{
  position:fixed; top:0; bottom:0; left:0;
  width:33.333vw; max-width:560px; min-width:340px;
  background:#0e0e12; z-index:1000;
  transform:translate3d(-110%,0,0);           /* полностью скрыто — не «торчит» */
  transition:transform .6s ease; will-change:transform;
  box-shadow:8px 0 25px rgba(0,0,0,.15);
}
.hh-close{
  position:absolute; top:1.4rem; right:1.4rem;
  background:none; border:0; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer;
}
.hh-close:hover{ opacity:.85; }

.hh-menu-list{
  opacity:0; position:absolute; left:0; top:7rem; bottom:6rem; padding-left:15%;
  overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;
  font-weight:300; letter-spacing:-.025rem; list-style:none; margin:0;
  transform:translateY(3rem); transition:transform .5s .6s ease, opacity .5s .6s ease;
}
.hh-menu-list li a{ color:#7e7e7e; text-decoration:none; }
.hh-menu-list .active > a, .hh-menu-list li a:hover{ color:#fff; }
.hh-menu-list > li{ font-size:1.5rem; line-height:1; margin-top:1.5rem; }
.hh-menu-list > li:first-child{ margin-top:0; }

.hh-menu-list ul{ display:none; list-style:none; padding:0; margin:0; }
.hh-menu-list li.current > ul{ display:block; }
.hh-menu-list ul li{ font-size:1.142rem; margin-top:1.142rem; }
.hh-menu-list ul li:first-child{ margin-top:2.4rem; }
.hh-menu-list ul li ul:last-child{ margin-bottom:2.4rem; }

/* стрелочки (Font Awesome вместо Linearicons) */
.hh-menu-list > .menu-item-has-children .menu-item-has-children > a:after{
  font-family:"Font Awesome 6 Free"; font-weight:900; content:"\f105"; margin-left:.8rem; font-size:.8rem;
}
.hh-menu-list > .menu-item-has-children .current > a:after{
  font-family:"Font Awesome 6 Free"; font-weight:900; content:"\f107";
}

/* футер внутри меню */
.hh-menu-footer{ position:absolute; left:15%; bottom:4rem; }
.hh-menu-footer .social-list{ opacity:0; transform:translateY(3rem); transition:all .5s .7s ease; }
.hh-menu-footer .social-list a{ color:#7e7e7e; }
.hh-menu-footer .social-list a:hover{ color:#af0b0b; }

/* состояния */
.hh-off-open .hh-overlay{ visibility:visible; }
.hh-off-open .hh-offcanvas{ transform:translate3d(0,0,0); }
.hh-off-open .hh-menu-list, .hh-off-open .hh-menu-footer .social-list{
  transform:translate(0); opacity:1;
}

/* адаптив */
@media (max-width:1100px){ .hh-offcanvas{ width:40vw; min-width:320px; } }
@media (max-width:991px){
  .navbar{ height:5rem; }
  .brand img{ height:2.4rem; }
  .navbar-divider{ display:none; }
  .navbar .social-list{ gap:14px; }
  .hh-offcanvas{ width:50vw; }
}
@media (max-width:575px){
  .navbar{ height:4.6rem; }
  .brand img{ height:2.2rem; }
  .hh-offcanvas{ width:86vw; min-width:0; }
  .hh-menu-list{ top:6rem; bottom:5rem; padding-left:10%; }
  .hh-menu-list > li{ font-size:1.6rem; }
}

/* ===== Mobile/header fix ===== */
@media (max-width: 767px){
  .navbar{ height: 4.6rem; }

  /* делаем 3 колонки: [бургер] [логотип] [телефон/иконки] */
  .header-inner{
   /* padding: 0 10px; */
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    justify-content: stretch;
  }

  .header-left{
    grid-column: 1;
    justify-content: flex-start;
    z-index: 5;
  }
  .navbar-toggle.hh-toggle{
    width: 40px; height: 40px; margin-right: 0;
    gap: 4px;
  }
  .navbar-toggle .icon-bar{ width: 24px; height: 2px; }

  /* логотип больше НЕ absolute на мобилке */
  .brand{
    position: static;
    transform: none;
    justify-self: center;     /* визуально по центру */
    z-index: 3;
  }
  .brand img{ height: 2.6rem; margin: 0; }

  .header-right{
    grid-column: 3;
    margin-left: 0;
    justify-content: flex-end;
    gap: 12px;
    z-index: 4;
  }

  .navbar-address{
    font-size: 14px;
    line-height: 1;
    text-transform: none;     /* читаемее на мобилке */
    white-space: nowrap;
  }
  .navbar-divider{ display: none; }

  /* соц-иконки можно оставить, но уменьшим чуть размер */
  .navbar .social-list{ gap: 12px; }
  .navbar .social-list a{ font-size: 1.25rem; }
}

/* узкие телефоны */
@media (max-width: 360px){
  .navbar .social-list{ display: none; }        /* при дефиците места прячем иконки */
  .navbar-address{ font-size: 13px; }
}

/* --- HEADER: на мобильных соц-иконки скрываем полностью --- */
@media (max-width: 991px){
  .navbar .social-list{ display: none !important; }
  .header-right{ gap: 10px; }           /* компактнее справа */
  .navbar-address{ font-size: 15px; }   /* лучше читается */
}
@media (max-width: 360px){
  .navbar-address{ font-size: 14px; }
}

/* --- OFFCANVAS: отступы у соц-иконок в футере меню --- */
.hh-menu-footer .social-list{
  gap: 18px;                 /* расстояние между иконками */
  margin-top: 12px;
}
.hh-menu-footer .social-list a{
  margin-right: 18px;        /* доп. отступы (поддержка старых браузеров без gap) */
  font-size: 1.5rem;
}
.hh-menu-footer .social-list a:last-child{ margin-right: 0; }

/* --- Mobile: телефон как иконка вместо текста --- */
@media (max-width: 991px){
  .navbar-address a{
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 0;               /* скрываем текст цифр визуально */
    line-height: 0;
    text-decoration: none;
  }
  .navbar-address a::before{
    content: "\f095";           /* FA6: phone */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;           /* solid */
    font-size: 1.35rem;
    line-height: 1;
    color: inherit;
    display: inline-block;
  }
  .navbar-address a:hover::before{
    color: #af0b0b;
  }
}
/* --- Тонкий крестик в кнопке закрытия off-canvas --- */
.hh-close{
  width: 40px;                 /* кликабельная область */
  height: 40px;
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
}

/* прячем иконку Font Awesome, рисуем свой тонкий крест */
.hh-close i{ display: none !important; }

.hh-close::before,
.hh-close::after{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 22px;                  /* длина линий */
  height: 1.6px;                /* толщина — тонкая */
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition: opacity .2s ease, background-color .2s ease;
}

.hh-close::before{ transform: translate(-50%, -50%) rotate(45deg); }
.hh-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.hh-close:hover{ opacity: .9; }
.hh-close:focus-visible{
  outline: 2px solid rgba(255,255,255,.35);
  outline-offset: 2px;
}

/* чуть компактнее на очень узких экранах */
@media (max-width: 360px){
  .hh-close{ width: 36px; height: 36px; }
  .hh-close::before,
  .hh-close::after{ width: 20px; }
}

.hh-off-open .hh-overlay{ visibility:visible; opacity:1; }
.hh-off-open .hh-offcanvas{ transform:translate3d(0,0,0); }