@charset "UTF-8";
/* Модуль ventolux_header.
   ПК  - Figma 2351:112699: верхній ряд 80 (py16, gap32), навбар 48 (py8, gap40).
   Моб - Figma 2346:75671: 60 (p8, gap12).
   Вигляд кнопок/пошуку/селектів живе в UI-кіті. */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  box-shadow: 0 1px 0 0 var(--c-grey-light);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

/* тінь зʼявляється тільки коли сторінку прокрутили - додає JS */
.header.is-stuck {
  box-shadow: 0 1px 0 0 var(--c-grey-light), var(--shadow-md);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--container);
  margin: 0 auto;
  min-height: 60px;
  padding: var(--space-2) var(--container-pad);
}

/* моб: рядок пошуку розкривається під шапкою */
.header__search-bar {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}

.header__search-bar.is-open {
  grid-template-rows: 1fr;
}

.header__search-bar-inner {
  overflow: hidden;
  min-height: 0;
  padding-inline: var(--container-pad);
}

.header__search-bar.is-open .header__search-bar-inner {
  padding-bottom: var(--space-2);
}

.header__logo {
  display: flex;
  flex: 0 0 auto;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.header__logo:hover {
  opacity: 0.8;
}

.header__logo img {
  width: 100px;
  height: 32px;
}

/* мобільна: лого по центру між бургером і пошуком */
.header__logo {
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .header__inner {
    gap: var(--space-8);
    min-height: 80px;
    padding-block: var(--space-4);
  }
  .header__logo {
    margin-inline: 0;
  }
  .header__logo img {
    width: 123px;
    height: 40px;
  }
  .header__search {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
  }
  .header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    flex: 0 0 auto;
  }
  .header__actions-group {
    display: flex;
    align-items: center;
    gap: var(--space-1);
  }
  .header__nav-inner {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    max-width: var(--container);
    margin: 0 auto;
    padding: var(--space-2) var(--container-pad);
  }
}