@use '../../abstracts' as *;

// Открытый drawer ≤768 + макет 576 (Figma 126-13054): 30px контур у контактов, списка и поиска
@mixin header-nav-drawer-pad-576 {
  .dsm-head__nav-main.is-open {
    .dsm-head__mobile-info {
      padding: 30px;
    }

    > .nav__list > .nav__item:not(.nav__item--mobile-info) {
      padding-left: 30px;
      padding-right: 30px;
    }

    > .nav__list > .nav__item:nth-last-child(2) {
      padding-bottom: 30px;
    }

    .dsm-head__nav-search {
      padding: 30px;
    }

    .mega-menu__categories {
      padding: 0 30px;
    }

    .nav__item--services {
      padding-top: 30px;
    }
  }
}

// Открытое мегаменю: строка «Услуги» визуально приглушена
.nav__item--services.is-open > .nav__services-heading {
  opacity: 0.7;
}

// До 991px: «Ещё» — перенос .nav__item--collapsible в nav__more-list (JS 568–991px)
@include down-to($bp-header-below-md2) {
  .nav__item--more:not(.is-empty) {
    display: flex;
  }

  .nav__item--more.is-empty {
    display: none !important;
  }
}

// До 767px: в топбаре только «Записаться»; «Заказать звонок» — в оверлее меню (.dsm-head__mobile-cta-call).
// 768–992: обе кнопки в топбаре (см. .dsm-head__cta в _before-mega.scss).
@include down-to($until-767) {
  .dsm-head .dsm-head__cta .dsm-head__cta-call {
    display: none;
  }
}

// До 768px: полноэкранное меню по классу .dsm-head__nav-main.is-open
@include md {
  .dsm-head {
    &__topbar-inner {
      align-items: flex-end;
    }

    &__phone {
      font-size: 17px;
      font-weight: 600;
      line-height: normal;
    }

    &__schedule {
      font-size: 11px;
      line-height: normal;
    }

    &__addresses { display: none; }

    &.is-menu-open .dsm-head__topbar {
      border-bottom: 1px solid $color-dark-blue;
    }

    // Кнопка X внутри навбара — появляется когда меню открыто
    &__nav-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border: 0;
      border-radius: 10px;
      background: rgba($color-white, 0.15);
      color: $color-white;
      cursor: pointer;
      order: -1; // левый край навбара

      &:hover { background: rgba($color-white, 0.25); }
    }
  }

  // Открытое меню на всю ширину; у контейнера убираем боковые поля
  .dsm-head.is-menu-open .dsm-head__nav .container {
    padding-inline: 0;
    max-width: none;
  }

  // Раскрытая панель: список (скролл) + поиск снизу
  .dsm-head__nav-main.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    // Вход в меню по вертикали как в макете 576 — без щели под тёмной полосой
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
    animation: header-nav-drawer-in 0.32s $header-motion-ease both;
    z-index: 999;
    background: $color-white;
    border: 1px solid $color-nav-border;
    border-top: 0;
    border-radius: 0 0 16px 16px;
    padding: 0;
    max-height: calc(100dvh - 120px);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba($color-dark-blue, 0.1);
    box-sizing: border-box;

    > .nav__list {
      flex: 1 1 auto;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    // Верхний блок мобильного меню: адрес, мессенджеры, кнопки
    .dsm-head__mobile-info {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      row-gap: 12px;
      column-gap: 0;
      padding: 30px;
      background: $color-white;
      border-bottom: 1px solid $color-nav-border;
      box-sizing: border-box;
      container-type: inline-size;
      container-name: mobile-info-strip;
    }

    .dsm-head__mobile-address {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 3px;
      flex: 0 0 225px;
      width: 225px;
      max-width: 225px;
      min-width: 0;
      margin: 0;
      font-style: normal;

      .dsm-head__city {
        font-size: 11px;
        font-weight: 400;
        line-height: normal;
        letter-spacing: normal;
        color: $color-blue;
        margin: 0;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
        width: 100%;

        li {
          $bullet-size: 4px;
          $bullet-text-gap: 6px; // от правого края круга до текста

          position: relative;
          display: block;
          padding: 0 0 0 ($bullet-size + $bullet-text-gap);
          font-size: 14px;
          font-weight: 400;
          line-height: normal;
          color: $color-text;

          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            width: $bullet-size;
            height: $bullet-size;
            margin: 0;
            border-radius: 50%;
            background-color: $color-blue;
            transform: translateY(-50%);
          }
        }
      }
    }

    .dsm-head__mobile-messengers {
      display: flex;
      flex-direction: row;
      flex-shrink: 0;
      align-items: flex-start;
      align-self: center;
      gap: 8px;
      margin: 0;

      a {
        display: flex;
        width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }

      img {
        width: 24px;
        height: 24px;
        display: block;
      }
    }

    .dsm-head__mobile-cta-call {
      flex: 0 0 190px;
      width: 190px;
      max-width: 190px;
      margin: 0;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      line-height: normal;
      border-radius: $radius-sm;
      justify-content: center;
      box-sizing: border-box;
    }

    // Средняя ширина меню: вторая строка — кнопка на всю ширину
    @supports (container-type: inline-size) {
      @container mobile-info-strip (max-width: 480px) {
        .dsm-head__mobile-cta-call {
          flex: 1 1 100%;
          width: 100%;
          max-width: none;
        }
      }
    }

    // «Записаться» только в топбаре (копия в моб. блоке скрыта — см. порядок @use: buttons → header).
    .dsm-head__mobile-cta-appt {
      display: none;
    }

    .nav__item {
      > a {
        display: block;
        width: 100%;
        padding: 0;
        color: $color-text;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.3;
        text-decoration: none;
        border-bottom: 0;

        &:hover { color: $color-blue; }
      }
    }

    .nav__dropdown > a {
      display: block;
      padding: 6px 0 6px 30px;
      margin-left: 0;
      border-left: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.3;
      color: $color-text;
      text-decoration: none;
      border-bottom: 0;

      &:hover { color: $color-blue; }
    }

    .nav__item--collapsible { display: flex; }
    .nav__item--more     { display: none; }

    .nav__item--services .nav__services-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0;
      border-bottom: 0;
      color: $color-text;

      .nav__services-link {
        font-weight: 400;
        color: inherit;
        font-size: 14px;
        text-decoration: none;
        transition: color 0.25s ease, opacity 0.25s ease;

        &:hover {
          color: $color-blue;
        }

        &:focus-visible {
          outline: 2px solid $color-blue;
          outline-offset: 2px;
          border-radius: 2px;
        }
      }
    }

    // В оверлее меню бургер-кнопка «Услуги» тёмная (на белом фоне); стрелку справа скрываем
    .nav__item--services .nav__services-btn {
      display: inline-flex;
      color: $color-text;

      &:hover {
        opacity: 0.85;
      }
    }

    .nav__item--services .nav__services-trigger {
      display: none;
    }

    .nav__item--dropdown-split .nav__dropdown-split-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0;
      border-bottom: 0;
      color: $color-text;

      .nav__dropdown-split-link { font-weight: 400; color: inherit; font-size: 14px; }
      .nav__dropdown-split-trigger img { filter: invert(1) brightness(0); }
    }

    // Подменю в мобильном оверлее — статичный блок; в закрытом состоянии убираем из потока (иначе visibility:hidden даёт пустоту)
    .nav__item--dropdown-split:not(.is-open) .nav__dropdown {
      display: none;
    }

    // Подменю пункта «ссылка + шеврон» в мобильном оверлее — статичный блок, без absolute-позиционирования
    .nav__item--dropdown-split.is-open .nav__dropdown {
      display: flex;
      position: static;
      margin: 12px 0 4px;
      padding: 20px;
      border: 1px solid $color-nav-border;
      border-radius: 16px;
      background: $color-white;
      box-shadow: none;
      flex-direction: column;
      gap: 15px;
      transform: none;

      > a {
        padding: 0;
        margin: 0;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
        color: $color-text;
        border-bottom: 0;

        &:hover {
          color: $color-blue;
          background: transparent;
        }
      }
    }

    .nav__item--mobile-info {
      margin: 0;
    }

    // Без shorthand по вертикали — иначе :not() перебивает padding-top у «Услуги» после mobile-info (макет 30px).
    .nav__item:not(.nav__item--mobile-info) {
      padding-left: 30px;
      padding-right: 30px;
    }

    .nav__item--services {
      border-top: 1px solid $color-blue;
      padding-top: 30px;
      margin-top: 0;
    }

    .mega-menu__categories {
      padding: 0 30px;
      margin: 15px 0 0;
      gap: 10px 20px;
      border-bottom: 0;
    }

    .nav__item:not(.nav__item--mobile-info):not(.nav__item--more):not(:nth-last-child(2)) {
      margin-bottom: 15px;
    }

    // Нижняя граница синей зоны навигации (последний пункт перед «Ещё» — поиск вне ul)
    > .nav__list > .nav__item:nth-last-child(2) {
      margin-bottom: 0;
      padding-bottom: 30px;
      border-bottom: 1px solid $color-blue;
    }

    .nav__item--more {
      margin-bottom: 0;
    }

    .dsm-head__nav-search {
      margin-left: 0;
      margin-top: 0;
      margin-bottom: 0;
      padding: 30px;
      border-top: 0;
      flex: 0 0 auto;
      max-width: none;
      position: relative;

      .dsm-head__search-toggle {
        display: none;
      }

      .dsm-head__search-panel {
        display: block;
        position: static;
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
        z-index: auto;
        // 576–767: иначе правила 576–991 (иконка поиска в полосе) оставляют панель невидимой
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
      }

      .dsm-head__search-wrap {
        width: 100%;
        max-width: none;
      }

      // Поле поиска в оверлее: высота и обводка
      .dsm-head__search {
        width: 100%;
        height: 40px;
        min-height: 40px;
        max-height: 40px;
        background: $color-white;
        border: 1px solid $color-dark-blue;
        border-radius: 16px;
        padding: 0 15px 0 10px;
        gap: 8px;
        box-sizing: border-box;
      }

      .dsm-head__search-btn {
        width: 20px;
        height: 20px;
        color: $color-text;

        img {
          width: 20px;
          height: 20px;
        }
      }

      .dsm-head__search-input {
        display: block;
        flex: 1;
        min-width: 0;
        height: 100%;
        font-size: 14px;
        color: $color-text;
      }

      .dsm-head__search-clear {
        width: 20px;
        height: 20px;

        svg {
          width: 20px;
          height: 20px;
        }
      }
    }
  }

  .mega-menu {
    &__category { font-size: 14px; font-weight: 400; }
  }
}

// Контакты внутри раскрытого мобильного меню
.nav__item--mobile-info {
  display: none; // скрыт на десктопе и в обычном навбаре
}

// Показываем только в открытом меню-оверлее
.dsm-head__nav-main.is-open .nav__item--mobile-info {
  display: block;
}

// Grid: адрес (колонка 1) | мессенджеры (колонка 2), кнопки — на всю ширину
.dsm-head__mobile-info {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  padding: 12px 20px;
  background: $color-header-subnav-bg;
  border-bottom: 1px solid $color-header-subnav-border;
}

.dsm-head__mobile-address {
  grid-column: 1;
  font-style: normal;

  .dsm-head__city {
    display: block;
    color: $color-blue;
    font-size: 11px;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
  }

  ul {
    list-style: none;
    padding-left: 0;
    margin: 0;

    li {
      position: relative;
      padding-left: 14px;
      color: $color-text;
      font-size: 12px;
      line-height: 1.45;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.35em;
        width: 4px;
        height: 10px;
        border-radius: 2px;
        background-color: $color-blue;
      }
    }
  }
}

.dsm-head__mobile-messengers {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: flex-start;

  a {
    display: flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
  }
}

.dsm-head__mobile-cta-call {
  grid-column: 1 / -1; // на всю ширину грида
  width: 100%;
  justify-content: center;
  font-size: 13px;
  padding: 10px 16px;
}

.dsm-head__mobile-cta-appt {
  grid-column: 1 / -1;
  display: none;
  width: 100%;
  justify-content: center;
  font-size: 13px;
  padding: 10px 16px;
}

// Очень узкая ширина: «Записаться» переносится в меню, в топбаре CTA скрыты
@include menu-narrow {
  .dsm-head__mobile-cta-appt {
    display: inline-flex;
  }

  .dsm-head__cta {
    display: none;
  }
}

// Кнопка «Услуги» в тёмной полосе: два SVG в одной ячейке сетки — кроссфейд бургер ↔ крест
.nav__services-btn {
  display: none;
  place-items: center;
  // padding: 8px 10px;
  background: transparent;
  border: 0;
  color: $color-white;
  cursor: pointer;
  flex-shrink: 0;

  &__burger,
  &__close {
    grid-area: 1 / 1;
    transition:
      opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.42s cubic-bezier(0.33, 1, 0.53, 1);
  }

  &__close {
    opacity: 0;
    transform: scale(0.88) rotate(-40deg);
    pointer-events: none;
  }

  &.is-open {
    .nav__services-btn__burger {
      opacity: 0;
      transform: scale(0.85);
      pointer-events: none;
    }

    .nav__services-btn__close {
      opacity: 1;
      transform: scale(1) rotate(0deg);
      pointer-events: auto;
    }
  }

  &:hover:not(.is-open) { opacity: 0.8; }
}

// Кнопка закрытия «Услуги» на тёмной полосе
.dsm-head__wrapper .nav__services-btn.is-open {
  background: rgba($color-white, 0.15);
  border-radius: 10px;
}

// Моб. оверлей (белый фон): без тёмного чипа, крестик в цвет текста
.dsm-head__nav-main.is-open .nav__item--services .nav__services-btn.is-open {
  background: transparent;
  border-radius: 0;
}

@include up($bp-header-tablet-min) {
  .nav__services-btn {
    display: inline-grid;
  }

  // В полосе навбара открытие услуг — через бургер; стрелка только в моб. оверлее
  .nav__item--services .nav__services-trigger {
    display: none;
  }
}

// Область поиска и блок подсказок (данные с сервера)
.dsm-head__search-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

// Подсказки поиска (.dsm-head__search-suggestions — как в боевом бандле)
.dsm-head__search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 141;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  margin: -1px 0 0;
  background: $color-white;
  border: 1px solid $color-nav-border;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba($color-dark-blue, 0.08);
  font-size: 14px;
  line-height: 1.3;
  color: $color-text;
  box-sizing: border-box;

  &[hidden] {
    display: none;
  }

  &:not([hidden]) {
    display: flex;
  }

  a,
  button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;

    &:hover {
      color: $color-blue;
    }
  }
}

// 1920+ (Figma Dr Smile — подсказки поиска в шапке, node 124:8215)
@include viewport-desktop-xl {
  .dsm-head__search-suggestions {
    gap: 8px;
    padding: 12px;
    border-radius: $radius-md;
    box-shadow: 0 16px 48px rgba($color-dark-blue, 0.12);
    font-size: $font-size-sm;
    line-height: 1.28;

    a,
    button {
      padding: 10px 12px;
      margin: 0;
      border-radius: $radius-sm;
      transition:
        color 0.15s ease,
        background-color 0.15s ease;

      &:hover {
        color: $color-blue;
        background-color: rgba($color-blue, 0.08);
      }
    }
  }
}

// Крестик очистки — показываем только когда что-то введено
.dsm-head__nav-search .dsm-head__search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.dsm-head__nav-search .dsm-head__search-input:not(:placeholder-shown) ~ .dsm-head__search-clear {
  opacity: 1;
  pointer-events: auto;
}

// От 992px: поиск как развёрнутое поле в полосе навбара
@include up($bp-md2) {
  // Пункты без лишнего горизонтального padding — интервал задаёт gap у .nav__list
  .nav__item:not(.nav__item--services):not(.nav__item--dropdown-split):not(.nav__item--more):not(.nav__item--mobile-info) > a {
    padding: 10px 0;
  }

  // Макет (в т.ч. 1920): колонка поиска до 329px (basis), внутри — 100%; при нехватке места сжимается
  .dsm-head__nav-search {
    flex: 0 1 329px;
    max-width: 329px;
    min-width: 0;

    @include between($bp-lg, $until-1919) {
      flex: 0 1 221px;
      max-width: 221px;
    }
  }

  .dsm-head__nav-search .dsm-head__search-toggle {
    display: none;
  }

  .dsm-head__nav-search .dsm-head__search-panel {
    flex: 1 1 auto;
    align-self: stretch;
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .dsm-head__nav-search .dsm-head__search-wrap {
    width: 100%;
    max-width: none;
  }

  .dsm-head__nav-search .dsm-head__search {
    width: 100%;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    background: $color-white;
    border: none;
    border-radius: $radius-sm;
    padding: 0 15px 0 10px;
    gap: 8px;
    box-sizing: border-box;
  }

  .dsm-head__nav-search .dsm-head__search-btn {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: $color-text;

    img {
      width: 20px;
      height: 20px;
    }
  }

  .dsm-head__nav-search .dsm-head__search-input {
    display: block;
    flex: 1;
    min-width: 0;
    height: 100%;
    color: $color-text;
    font-size: 14px;
    padding: 0;

    &::placeholder {
      color: $color-text-secondary;
    }
  }

  .dsm-head__nav-search .dsm-head__search-clear {
    width: 20px;
    height: 20px;

    svg {
      width: 20px;
      height: 20px;
    }
  }
}

// 992–1440: отдельная калибровка под макет 1440 (1920 не трогаем)
@include between($bp-md2, $until-1439) {
  // 992–1440 (как в макете): в полосе навбара только иконка поиска,
  // а поле показываем по клику (через .is-search-open).
  .dsm-head__wrapper {
    padding: 0 20px; // только горизонтальные поля по 20px
  }

  .nav__item--services .nav__services-row {
    padding: 0; // в макете на 992–1440 без внутренних отступов у ряда
  }

  .dsm-head__nav-search {
    position: static;
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
  }

  .dsm-head__nav-search .dsm-head__search-toggle {
    display: inline-flex;
  }

  .dsm-head__nav-search .dsm-head__search-toggle-icon {
    width: 24px;
    height: 24px;
  }

  .dsm-head__nav-search .dsm-head__search-panel {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 140;
    flex: none;
    width: auto;
    min-width: 0;
    max-width: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
      opacity $header-motion-duration $header-motion-ease,
      visibility $header-motion-duration $header-motion-ease,
      transform $header-motion-duration $header-motion-ease;
  }

  .dsm-head__nav-search.is-search-open .dsm-head__search-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .dsm-head__nav-search .dsm-head__search-wrap {
    width: 100%;
    max-width: none;
  }

  .dsm-head__nav-search .dsm-head__search {
    width: 100%;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    background: $color-white;
    border: 1px solid $color-dark-blue;
    border-radius: 16px;
    padding: 0 15px 0 10px;
    gap: 8px;
    box-sizing: border-box;
    justify-content: flex-start;
  }

  .dsm-head__nav-search .dsm-head__search-input {
    display: block;
    flex: 1;
    min-width: 0;
    height: 100%;
    font-size: 14px;
    color: $color-header-strong-text;
    padding: 0;

    &::placeholder {
      color: $color-text-secondary;
    }
  }

  .dsm-head__nav-search .dsm-head__search-clear {
    width: 20px;
    height: 20px;

    svg {
      width: 20px;
      height: 20px;
    }
  }

  // Пункты меню равномерно растягиваются по ширине полосы навбара
  .nav__list {
    gap: 0;
    justify-content: space-between;
  }

  .dsm-head__nav-main {
    gap: 30px;
  }

  .nav__item > a,
  .nav__item > .nav__services-trigger,
  .nav__item--dropdown-split .nav__dropdown-split-trigger {
    color: var(--white, #{$color-white});
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .dsm-head__nav-search .dsm-head__search-input {
    // оставляем из базового блока, но важно не конфликтовать с правилами выше
    font-size: 14px;
  }

  // 992–1440: фиксируем межпунктовый интервал (как в макете)
  .nav__list {
    gap: 30px;
  }
}

// До 991px: мегаменю и поиск на тач; топбар с бургером — отдельные правила для ≤576px
@include down-to($bp-header-below-md2) {
  // Поиск: иконка в полосе, панель под ней (у li не задаём relative, чтобы панель не обрезалась)
  @include up($bp-sm) {
    .dsm-head__nav-search {
      position: static;
      flex: 0 0 auto;
      min-width: 0;
      max-width: none;
    }

    .dsm-head__nav-search .dsm-head__search-toggle {
      display: inline-flex;
    }

    .dsm-head__nav-search .dsm-head__search-toggle-icon {
      width: 20px;
      height: 20px;
    }

    .dsm-head__nav-search .dsm-head__search-panel {
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 8px);
      z-index: 140;
      flex: none;
      width: auto;
      min-width: 0;
      max-width: none;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      pointer-events: none;
      transition:
        opacity $header-motion-duration $header-motion-ease,
        visibility $header-motion-duration $header-motion-ease,
        transform $header-motion-duration $header-motion-ease;
    }

    .dsm-head__nav-search.is-search-open .dsm-head__search-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }

    .dsm-head__nav-search .dsm-head__search-wrap {
      width: 100%;
      max-width: none;
    }

    .dsm-head__nav-search .dsm-head__search {
      width: 100%;
      height: 40px;
      min-height: 40px;
      max-height: 40px;
      background: $color-white;
      border: 1px solid $color-dark-blue;
      border-radius: 16px;
      padding: 0 15px 0 10px;
      gap: 8px;
      box-sizing: border-box;
      justify-content: flex-start;
    }

    .dsm-head__nav-search .dsm-head__search-btn {
      width: 20px;
      height: 20px;

      img {
        width: 20px;
        height: 20px;
      }
    }

    .dsm-head__nav-search .dsm-head__search-input {
      flex: 1;
      min-width: 0;
      height: 100%;
      font-size: 14px;
      color: $color-header-strong-text;
      padding: 0;

      &::placeholder {
        color: $color-text-secondary;
      }
    }

    .dsm-head__nav-search .dsm-head__search-clear {
      width: 20px;
      height: 20px;

      svg {
        width: 20px;
        height: 20px;
      }
    }
  }

  @include between($bp-sm, $until-767) {
    .dsm-head__nav-search .dsm-head__search-toggle-icon {
      width: 24px;
      height: 24px;
    }
  }

  // «О клинике» на средних ширинах — та же карточка-дропдаун что и на десктопе
  @include up($bp-header-tablet-min) {
    .nav__item--dropdown-split > .nav__dropdown {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: auto;
      min-width: 240px;
      width: max-content;
      max-width: min(360px, calc(100vw - 48px));
      padding: 30px 20px;
      border: 1px solid $color-nav-border;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba($color-text, 0.12);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin: 0;
      background: $color-white;

      > a {
        padding: 0;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
        color: $color-text;
        background: transparent;
        white-space: nowrap;

        &:hover {
          color: $color-blue;
          background: transparent;
        }
      }
    }
  }

  // В drawer до 576px: сетка категорий в две колонки со скроллом
  @include sm {
    .dsm-head__nav-main.is-open .mega-menu {
      position: relative;
      top: auto;
      left: auto;
      right: auto;
      inset: auto;
      width: 100%;
      min-height: 0;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      padding: 0;

      &__close { display: none; }
      &__grid { display: block; min-height: 0; }

      &__categories {
        margin: 15px 0 0;
        padding: 0 30px 4px 30px;
        background: transparent;
        border: 0;
        border-radius: 0;
        max-height: min(380px, 52vh);
        overflow-x: hidden;
        overflow-y: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 20px;
        scrollbar-width: thin;
        scrollbar-color: $color-blue $color-nav-border;

        &::-webkit-scrollbar {
          width: 4px;
        }

        &::-webkit-scrollbar-track {
          background: $color-nav-border;
          border-radius: 20px;
        }

        &::-webkit-scrollbar-thumb {
          background: $color-blue;
          border-radius: 20px;
        }
      }

      &__category {
        padding: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.3;
        color: $color-text;

        &.is-active { color: $color-text; }
      }

      &__content,
      &__panel,
      &__columns,
      &__banner { display: none; }
    }
  }

  // Мегаменю «Услуги» ≤991: одна длительность + ease-out (без visibility в transition — даёт рывки)
  $mega-services-dur: 0.34s;
  $mega-services-dur-close: 0.28s;

  .nav__item--services {
    .mega-menu {
      display: block;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      pointer-events: none;
      transition:
        opacity $mega-services-dur ease-out,
        transform $mega-services-dur ease-out;
    }

    &.is-open .mega-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }
  }

  // ≤576: max-height + overflow:hidden без смены overflow на visible (инаке скачок в конце)
  @include sm {
    .dsm-head__nav-main.is-open .nav__item--services:not(.is-open) .mega-menu {
      max-height: 0;
      margin: 0;
      padding: 0;
      overflow: hidden;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px);
      pointer-events: none;
      transition:
        max-height $mega-services-dur-close ease-out,
        opacity $mega-services-dur-close ease-out,
        transform $mega-services-dur-close ease-out;
    }

    .dsm-head__nav-main.is-open .nav__item--services:not(.is-open) .mega-menu .mega-menu__categories {
      margin-top: 0;
    }

    .dsm-head__nav-main.is-open .nav__item--services.is-open .mega-menu {
      max-height: min(560px, 78vh);
      overflow: hidden;
      margin: 0;
      padding: 0;
      transition:
        max-height $mega-services-dur ease-out,
        opacity $mega-services-dur ease-out,
        transform $mega-services-dur ease-out;
    }
  }
}

// 568–1024: мегаменю «Услуги» на ширину тёмной полосы
@include between($bp-header-tablet-min, $bp-header-nav-tablet-max) {
  .dsm-head__wrapper {
    position: relative;
  }

  .nav__item--services {
    position: static;
  }

  .nav__item--services .mega-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    border: 1px solid $color-nav-border;
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(17, 26, 59, 0.12);
    background: $color-white;
    z-index: 130;
    box-sizing: border-box;
  }
}

// До 576px: компактный топбар и выезжающий список навигации
@include sm {
  .dsm-head {
    &.is-menu-open .dsm-head__topbar {
      border-bottom: 1px solid $color-dark-blue;
    }

    &__topbar {
      padding: 7px 0 20px;
    }

    &__topbar-inner {
      flex-wrap: nowrap;
      align-items: flex-end;
      gap: $header-topbar-pack-gap;
    }

    &__logo {
      flex-shrink: 0;
    }

    &__awards { display: none; }

    &__addresses { display: none; }

    &__topbar-actions {
      flex: 1;
      min-width: 0;
      margin-left: 0;
      justify-content: space-between;
      align-items: center;
      gap: 0;
      flex-wrap: nowrap;
    }

    &__contacts {
      flex: 0 0 138px;
      width: 138px;
      max-width: 138px;
      min-width: 0;
      align-items: center;
      text-align: center;
    }

    &__phone {
      font-size: 17px;
      font-weight: 600;
      line-height: normal;
    }

    &__schedule {
      font-size: 11px;
      line-height: normal;
      white-space: normal;
    }

    &__messengers { display: none; }

    &__cta {
      flex-shrink: 0;
      flex-direction: row;
      width: auto;
      min-width: 0;
    }

    &__cta-appt {
      font-size: 14px;
      font-weight: 600;
      padding: 8px 16px;
      white-space: nowrap;
    }

    &__nav-close { display: none; }

    &__menu-toggle {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: $color-dark-blue;
      color: $color-white;
      display: inline-flex;
      margin-left: 0;

      // Иконка close-square в SVG — фон кнопки не дублируем (см. _before-mega.scss)
      &.is-open {
        background: transparent;
      }
    }

    &__nav {
      padding: 0;

      .container {
        padding-inline: 0;
        max-width: none;
      }
    }

    &__wrapper {
      min-height: 0;
      height: 0;
      padding: 0;
      background: transparent;
      border-radius: 0;
      overflow: visible;
    }
  }

  // ≤576: панель меню — .dsm-head__nav-main (список + поиск), а не только ul
  .dsm-head__nav-main {
    display: none;

    &.is-open {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      max-height: calc(100dvh - 160px);
      animation: header-nav-drawer-in 0.32s $header-motion-ease both;

      > .nav__list {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }
  }

  .nav__list {
    display: none;
  }

  @include menu-narrow {
    .dsm-head {
      &__topbar-inner {
        align-items: flex-end;
        gap: 12px;
      }

      &__topbar-actions {
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
      }

      &__contacts {
        flex: 0 0 auto;
        width: 138px;
        max-width: 138px;
        align-items: center;
        text-align: center;
      }

      &__phone {
        font-weight: 600;
        line-height: normal;
      }

      &__schedule {
        font-size: 11px;
        line-height: normal;
      }
    }

    .dsm-head__nav-main.is-open {
      .nav__item:not(.nav__item--mobile-info) {
        padding-left: 30px;
        padding-right: 30px;
      }

      .dsm-head__nav-search {
        padding: 30px;
      }

      .dsm-head__mobile-info {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        align-items: start;
        row-gap: 15px;
        column-gap: 12px;
        padding: 30px;
        background: $color-white;
        border-bottom: 1px solid $color-nav-border;
      }
    }

    .dsm-head__mobile-address {
      display: flex;
      flex-direction: column;
      gap: 3px;
      grid-column: 1;
      grid-row: 1;
      flex: unset;
      max-width: none;

      .dsm-head__city {
        margin-bottom: 0;
        letter-spacing: normal;
      }
    }

    .dsm-head__mobile-messengers {
      grid-column: 2;
      grid-row: 1;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      align-self: start;

      a {
        width: 24px;
        height: 24px;
      }

      img {
        width: 24px;
        height: 24px;
      }
    }

    .dsm-head__mobile-cta-call {
      grid-column: 1 / -1;
      grid-row: 2;
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: $radius-sm;
      flex: unset;
      width: 100%;
      max-width: none;
    }

    .dsm-head__mobile-cta-appt {
      grid-column: 1 / -1;
      grid-row: 3;
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: $radius-sm;
    }

    // Перебивает скрытие .dsm-head__mobile-cta-appt в md-оверлее — узкая полоса: кнопка в меню.
    .dsm-head__nav-main.is-open .dsm-head__mobile-cta-appt {
      display: inline-flex;
    }

    .dsm-head__nav-main.is-open .mega-menu__categories {
      padding: 0 30px;
      margin-top: 15px;
      gap: 10px 20px;
    }

    // Средний блок меню: ограничение по высоте как в макете (~318px минус строки)
    .dsm-head__nav-main.is-open .nav__item--services .mega-menu__categories {
      max-height: 220px;
      overflow-y: auto;
    }
  }
}

// Уточнения для ширины до 576px при открытом меню (Figma: моб. меню 576)
@include sm {
  @include header-nav-drawer-pad-576;

  .dsm-head__nav-main.is-open .nav__item--services.is-open .nav__services-btn {
    display: none;
  }

  .dsm-head__nav-main.is-open .nav__item--services.is-open .nav__services-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    // arrow-down.svg в проекте со stroke white — на белом оверлее без фильтра «пустой» плейсхолдер
    img {
      filter: invert(1) brightness(0);
    }
  }

  .dsm-head__nav-main.is-open .dsm-head__nav-search .dsm-head__search {
    border: 1px solid $color-nav-border;
    border-radius: 8px;
    min-height: 40px;
    height: auto;
    max-height: none;
    padding: 10px 15px 10px 10px;

    &:focus-within {
      border-color: $color-dark-blue;
    }
  }

  .dsm-head__nav-main.is-open .dsm-head__nav-search .dsm-head__search-input::placeholder {
    color: $color-text-secondary;
  }

  .dsm-head__nav-main.is-open .nav__item--dropdown-split.is-open .nav__dropdown {
    margin: 15px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    gap: 10px;
    background: transparent;

    > a {
      padding: 0 0 0 30px;
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.3;
    }
  }
}

// 576–767: те же поля, что в макете 576 (≤576 задаёт sm выше; здесь — 577–767)
@include viewport-mobile {
  @include header-nav-drawer-pad-576;
}

@include xs {
  .dsm-head {
    &__phone {
      font-size: 17px;
    }
  }
}

// Устройства без hover: отключаем декоративные эффекты наведения
@media (hover: none), (pointer: coarse) {
  .dsm-head {
    &__address-list a:hover { color: inherit; }
    &__phone:hover,
    &__menu-toggle:hover,
    &__burger:hover { opacity: 1; }
  }

  .messenger-link:hover {
    transform: none;
    opacity: 1;
  }

  .nav {
    &__item {
      > a:hover,
      > .nav__services-trigger:hover,
      .nav__services-heading .nav__services-trigger:hover { color: inherit; }
    }
  }

  .mega-menu {
    &__category:hover,
    &__columns a:hover {
      color: inherit;
      text-decoration: none;
    }

    &__close:hover { color: $color-header-meta-muted; }
  }

  .dsm-head__search-toggle:hover {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  @keyframes header-nav-drawer-in {
    from,
    to {
      opacity: 1;
      transform: none;
    }
  }

  .dsm-head {
    .burger-line {
      transition-duration: 0.01ms !important;
    }
  }

  .nav__services-btn__burger,
  .nav__services-btn__close {
    transition-duration: 0.01ms !important;
  }

  .nav__item--services .mega-menu {
    transition-duration: 0.01ms !important;
  }

  .dsm-head__nav-search .dsm-head__search-panel {
    transition-duration: 0.01ms !important;
  }

  .nav__dropdown {
    transition-duration: 0.01ms !important;
  }

  .dsm-head__nav-main.is-open {
    animation: none;
  }
}