theme-sticky-header {
  --theme-sticky-header-top: 0;

  position: relative;
  inset-block-start: 0;
  /*
   * 不可再用 calc(sticky - 1)=999：会与主内容里 facets-position-sticky(1000) 兄弟比较时整段 header
   *（含下拉）被压在下面；子 .header-section 的 z-index 无法突破本层叠上下文。
   */
  z-index: var(--z-index-header-sticky-layer);
  display: block;
}

theme-sticky-header.theme-sticky-header--sticky {
  /* Keep container in flow as placeholder */
}

theme-sticky-header.theme-sticky-header--sticky > .header-section {
  position: fixed;
  inset-block-start: var(--theme-sticky-header-top);
  left: 0;
  width: 100%;
  /* 层级由外层 theme-sticky-header 承担，此处不必重复 z-index */
  animation: animation-header-sticky 0.26s ease-out forwards;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

theme-sticky-header.theme-sticky-header--sticky-collapse > .header-section {
  animation-name: animation-header-sticky-collapse;
}

@keyframes animation-header-sticky {
  0% {
    transform: translateY(calc(-100% + var(--theme-sticky-header-top) * -1));
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes animation-header-sticky-collapse {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(calc(-100% + var(--theme-sticky-header-top) * -1));
  }
}

@media (max-width: 959px) {
  body:has(.promotion-banner) theme-sticky-header,
  body:has(.promotion-banner) theme-sticky-header.theme-sticky-header--sticky,
  body:has(.promotion-banner) theme-sticky-header.theme-sticky-header--sticky-collapse {
    position: fixed !important;
    inset-block-start: var(--promotion-banner-height, 27px) !important;
    inset-inline-start: 0 !important;
    inset-inline-end: 0 !important;
    width: 100% !important;
    min-height: var(--club-header-outer-height-mobile, 72px) !important;
    height: var(--club-header-outer-height-mobile, 72px) !important;
    max-height: var(--club-header-outer-height-mobile, 72px) !important;
    transform: none !important;
  }

  body:has(.promotion-banner) theme-sticky-header > .header-section,
  body:has(.promotion-banner) theme-sticky-header.theme-sticky-header--sticky > .header-section,
  body:has(.promotion-banner) theme-sticky-header.theme-sticky-header--sticky-collapse > .header-section {
    position: relative !important;
    inset-block-start: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
    animation: none !important;
  }
}