/**
 * LICKNOSE: единая шапка и главное меню для всех страниц сайта.
 *
 * До этого файла шапка отличалась на трёх группах страниц:
 *   /            — 78px, #ffcf02, контейнер 1228px, меню 13px/600
 *   /katalog     — 72px, #ffcf02, контейнер 1320px, меню 16px/400
 *   остальные    — 80px, #fed70d, тень, меню 16px/400
 * Здесь задаётся один канонический вид; страничные файлы
 * (licknose-home-redesign.css, licknose-catalog-hero-bg.css)
 * оставляют себе только градиент-растворение под шапкой.
 *
 * @since 2026-09-22
 */

:root {
  --ln-header-h: 76px;
  --ln-header-yellow: #ffcf02;
  --ln-header-ink: #15130f;
  --ln-header-logo-h: 46px;
  --ln-header-nav-size: 15px;
}

/* ---------- Полоса шапки ---------- */

#sp-header {
  height: var(--ln-header-h) !important;
  min-height: var(--ln-header-h) !important;
  background: var(--ln-header-yellow) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none;
  position: relative;
  z-index: 4;
  isolation: isolate;
}

#sp-header > .container {
  position: relative;
  z-index: 2;
}

#sp-header > .container,
#sp-header .container-inner,
#sp-header > .container > .container-inner > .row,
#sp-header #sp-logo,
#sp-header #sp-menu,
#sp-header #sp-menu > .sp-column {
  min-height: var(--ln-header-h) !important;
  height: var(--ln-header-h) !important;
}

/* Липкая шапка: тот же фон, лёгкая тень как признак отрыва от страницы. */
#sp-header.header-sticky {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: var(--ln-header-yellow) !important;
  box-shadow: 0 6px 20px rgba(63, 48, 6, 0.14) !important;
}

/* Градиент-растворение под шапкой рисуют страничные файлы; в залипшем
   состоянии он не нужен ни на одной странице. */
#sp-header.header-sticky::after {
  display: none !important;
}

/* ---------- Логотип ----------
   Файл 300×68. Без явных width/height у <img> браузер брал натуральный
   размер, и на страницах без speed-оптимизатора логотип выходил мельче.
   Адаптивные размеры остаются за licknose-header-logo.css. */

@media (min-width: 992px) {
  #sp-header .logo-image {
    height: var(--ln-header-logo-h) !important;
    width: auto !important;
    max-height: var(--ln-header-logo-h) !important;
  }
}

/* ---------- Пункты меню ---------- */

#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
  position: relative;
  height: var(--ln-header-h) !important;
  line-height: var(--ln-header-h) !important;
  padding: 0 15px;
  color: var(--ln-header-ink) !important;
  font-size: var(--ln-header-nav-size) !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  transition: opacity 180ms ease;
}

#sp-header .sp-megamenu-parent > li > a:hover,
#sp-header .sp-megamenu-parent > li > a:focus-visible {
  opacity: 0.68;
}

#sp-header .sp-megamenu-parent > li > a:focus-visible {
  outline: 2px solid var(--ln-header-ink);
  outline-offset: -4px;
  border-radius: 6px;
  opacity: 1;
}

/* Активный раздел — подчёркивание, одинаковое на всех страницах. */
#sp-header .sp-megamenu-parent > li.current-item > a::after,
#sp-header .sp-megamenu-parent > li.active > a::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 16px;
  height: 3px;
  border-radius: 3px;
  background: var(--ln-header-ink);
}

#sp-header .sp-megamenu-parent > li.current-item > a,
#sp-header .sp-megamenu-parent > li.active > a {
  font-weight: 600 !important;
}

/* ---------- Иконки справа ---------- */

#sp-header .sppb-icon-inner,
#sp-header .easystore-cart-icon {
  transition: transform 200ms ease, background-color 200ms ease;
}

#sp-header .sppb-icon-inner:hover,
#sp-header .easystore-cart-icon:hover {
  transform: translateY(-2px);
}

/* ---------- Планшет ---------- */

@media (max-width: 991.98px) {
  :root {
    --ln-header-h: 66px;
  }
}

/* ---------- Телефон ---------- */

@media (max-width: 767.98px) {
  /* Соцсети из шапки убираем: рядом логотип, профиль, корзина и бургер —
     на 390px им вместе тесно. На главной так было и раньше, теперь везде.
     Первый селектор — класс, который вешает JS главной, второй — тот же
     модуль на остальных страницах, где класса нет. */
  #sp-header #sp-menu .ln-home-header-socials,
  #sp-header #sp-menu .sp-module:has(.sppb-icon-inner) {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  :root {
    --ln-header-h: 60px;
  }
}