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));
  }
}