.site-header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 30;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.site-header-sticky.is-visible {
  transform: translateY(0);
}

.site-header-sticky__pill {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 11px;
  height: 69px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: var(--shadow-step-card);
}

/*
  На мобильном хедер-капсула сама
  уже position:fixed и всегда видна (header.css) — отдельного варианта
  "появляется при скролле вверх" макет для мобильного не показывает, и
  header.njk внутри этого блока рендерился бы вторым экземпляром (см.
  комментарий в partials/mobile-nav.njk про дублирование) — проще и
  корректнее выключить весь sticky-вариант целиком.
*/
@media (max-width: 599.98px) {
  .site-header-sticky {
    display: none;
  }
}