@layer components {
  .site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 100;
    padding-block-start: var(--sp-16);
    pointer-events: none;
  }

  .site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--sp-16);
    min-height: 60px;
    padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-16);
    background: var(--surface-glass-1);
    box-shadow: inset 0 0 0 .5px var(--surface-separator);
    border-radius: var(--r-16);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    pointer-events: auto;
  }

  .site-header__logo {
    display: flex;
    align-items: center;
    flex: none;
    color: var(--label-primary);
    text-decoration: none;
  }

  .site-header__logo-full {
    display: block;
    width: 155.43px;
    height: 32px;
  }

  .site-header__logo-full svg {
    width: 155.43px;
    height: 32px;
  }

  .site-header__logo-mark { display: none; }

  .site-nav {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-8);
    list-style: none;
  }

  .site-nav__item { position: relative; }

  .site-nav__link,
  .site-header__phone,
  .language-switcher__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    min-height: 36px;
    padding: var(--sp-8) 10px var(--sp-8) var(--sp-12);
    background: none;
    border: 0;
    border-radius: var(--r-8);
    color: var(--label-primary);
    font-size: var(--fs-body-2);
    font-weight: 500;
    line-height: 1.32;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }

  .site-nav__link:hover,
  .site-nav__link[aria-expanded="true"],
  .site-nav__link[aria-current="page"],
  .site-header__phone:hover { background: var(--surface-glass-2); }

  .site-nav__link[aria-expanded="true"] {
    color: var(--accent-primary);
    background: var(--surface-glass-1);
  }

  .site-nav__chevron { transition: transform var(--dur) var(--ease); }
  .site-nav__link[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); }

  .nav-dropdown {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 84px;
    z-index: 99;
  }

  .nav-dropdown[hidden] { display: none; }

  /* Панель вирівнюється по лівому краю кнопки «Послуги», а не по центру
     контейнера: у макеті вона висить саме під своїм пунктом меню.
     Зсув = логотип (155.43) + його відступ (24) + падінг панелі (24). */
  .nav-dropdown__inner {
    width: fit-content;
    margin-inline-start: 203px;
    padding: var(--sp-24) var(--sp-32);
    /* Було 72% — на фоні героя крізь панель читались і заголовок, і поля
       віджета розрахунку. Скло лишається (розмиття нижче), але меню має
       бути читабельним само по собі, а не залежати від того, що під ним. */
    background: color-mix(in srgb, var(--surface-primary) 96%, transparent);
    box-shadow: inset 0 0 0 .5px var(--surface-separator);
    border-radius: var(--r-16);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
  }

  .nav-dropdown__columns {
    display: grid;
    /* Колонки за вмістом, а не рівні третини: у макеті панель вужча за
       контейнер і притиснута до кнопки «Послуги», а не розтягнута на всю
       ширину з порожнечею між колонками. */
    grid-template-columns: repeat(3, max-content);
    gap: var(--sp-56);
    list-style: none;
  }

  .nav-dropdown__title {
    display: block;
    padding: var(--sp-8) var(--sp-12);
    color: var(--label-primary);
    font-size: var(--fs-overline);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
  }

  .nav-dropdown__links {
    display: grid;
    list-style: none;
  }

  .nav-dropdown__link {
    display: block;
    width: fit-content;
    padding: var(--sp-8) var(--sp-12);
    border-radius: var(--r-8);
    color: var(--label-secondary);
    font-size: var(--fs-body-2);
    font-weight: 500;
    line-height: 1.32;
    text-decoration: none;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }

  .nav-dropdown__link:hover {
    color: var(--label-primary);
    background: var(--surface-glass-2);
  }

  .language-switcher { position: relative; flex: none; }

  .language-switcher__current {
    width: 44px;
    padding-inline: var(--sp-12);
    color: var(--accent-primary);
    background: var(--surface-glass-1);
  }

  .language-switcher__list {
    position: absolute;
    inset-block-start: calc(100% + var(--sp-12));
    inset-inline-end: 0;
    display: grid;
    min-width: 168px;
    padding: var(--sp-8);
    list-style: none;
    background: color-mix(in srgb, var(--surface-primary) 86%, transparent);
    box-shadow: inset 0 0 0 .5px var(--surface-separator);
    border-radius: var(--r-12);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
  }

  .language-switcher__list[hidden] { display: none; }

  .language-switcher__list a {
    display: block;
    padding: var(--sp-8) var(--sp-12);
    border-radius: var(--r-8);
    color: var(--label-secondary);
    font-size: var(--fs-body-2);
    font-weight: 500;
    text-decoration: none;
  }

  .language-switcher__list a:hover,
  .language-switcher__list a[aria-current="page"] {
    color: var(--accent-primary);
    background: var(--surface-glass-1);
  }

  .site-header__phone { flex: none; }
  .site-header__cta { flex: none; }

  .burger {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 6px;
    background: transparent;
    border: 0;
    border-radius: var(--r-8);
    cursor: pointer;
  }

  .burger__bars {
    display: grid;
    gap: 6px;
    width: 24px;
  }

  .burger__bars i {
    display: block;
    height: 2px;
    background: var(--label-primary);
    border-radius: 2px;
  }

  @media (max-width: 1100px) {
    .site-nav,
    .language-switcher,
    .site-header__phone,
    .site-header__cta { display: none; }

    .burger { display: flex; margin-inline-start: auto; }
  }

  @media (max-width: 767px) {
    .site-header { padding-block-start: 0; }

    .site-header__bar {
      width: 100%;
      min-height: 68px;
      margin: 0;
      padding: var(--sp-12) 10px var(--sp-12) var(--sp-16);
      gap: var(--sp-24);
      border-radius: 0;
      box-shadow: inset 0 -.5px 0 var(--surface-separator);
    }

    /* Замовник 04.09: у мобільній панелі повний логотип і бургер, без
       кнопки — кнопка переїхала вниз відкритого меню. Знак більше не
       потрібен, місця вистачає. */
    .site-header__logo-full { display: block; width: 155.43px; height: 32px; }
    .site-header__logo-full svg { width: 100%; height: 100%; }
    .site-header__logo-mark { display: none; }

    .site-header__cta { display: none; }

    .burger { display: flex; margin-inline-start: auto; }
  }
}