/* 横向滚动容器
   - 内容能 fit 时 children 居中；溢出滚动时退回为 start（居左）
   使用 justify-content: safe center 关键字：内容溢出时浏览器自动从 center 退到 start
*/
.navigator-collection__scroller {
  justify-content: safe center;
}

/* 始终隐藏滚动条（PC + 移动端） */
.navigator-collection__scroller::-webkit-scrollbar {
  display: none;
}

.navigator-collection__scroller {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* 子项：禁止被 flex 压缩，保证图片比例 */
.navigator-collection__scroller > * {
  flex-shrink: 0;
}

/* 箭头按钮
   - 默认隐藏
   - 当 <navigator-collection> 加上 .is-overflow（JS 检测到溢出时添加）且为 PC 端时显示
   - 移动端永远不显示箭头
*/
.navigator-collection__nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #ddd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.2s,
    background-color 0.2s,
    box-shadow 0.2s;
}

.navigator-collection__nav:hover:not(:disabled) {
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.navigator-collection__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.navigator-collection__nav--prev {
  left: 0;
}

.navigator-collection__nav--next {
  right: 0;
}

/* PC 端（>= 768px）且 overflow 时才显示箭头 */
/* @media (min-width: 768px) { */
.navigator-collection.is-overflow .navigator-collection__nav {
  display: flex;
}
/* } */

/* 吸顶定位
   - 由 theme-navigator-collection-sticky 接管
   - position: sticky 必须挂在"最近的 .section"容器上,才能在视口里完整保持吸顶
     （参见 announcement-bar.css / sticky-header.js 的同款做法）
   - top 值由 JS 根据 announcement-bar 是否吸顶 + 高度动态写入
     --navigator-collection-sticky-top
   - 阴影仅在真正"被吸住"时（即加了 --is-stuck 修饰类）才出现,
     避免未滚动或 announcement-bar 未吸顶时已经产生阴影
*/
.navigator-collection-sticky-section {
  position: sticky;
  top: var(--navigator-collection-sticky-top, 0);
  z-index: var(--z-index-sticky);
  background-color: inherit;
}

.is-sticky {
  box-shadow: var(--navigator-collection-sticky-shadow, 0 2px 6px rgba(0, 0, 0, 0.06));
}

/* 仅 PC 端吸顶：移除 < 768px 下的 sticky */
@media (max-width: 767px) {
  .navigator-collection__nav {
    width: 24px;
    height: 24px;
  }
  .navigator-collection__nav--prev {
    left: calc(-1 * var(--page-padding) + 4px);
  }
  .navigator-collection__nav--next {
    right: calc(-1 * var(--page-padding) + 4px);
  }
  .navigator-collection-sticky-section[data-sticky-mode="desktop"] {
    position: static;
  }

  .is-sticky theme-navigator-collection-sticky[data-show-mobile-image="false"] {
    background-color: var(--bg-color);
  }
  .is-sticky
    theme-navigator-collection-sticky[data-show-mobile-image="false"]
    .style\:spacing {
    padding-block-start: 0;
    padding-block-end: 0;
  }

  .is-sticky
    theme-navigator-collection-sticky[data-show-mobile-image="false"]
    .navigator-collection-item {
    padding-block-start: var(--s-padding-block-start);
    padding-block-end: var(--s-padding-block-end);
    border: none;
    box-shadow: none;
    border-radius: 0;
    background-color: transparent;
    color: var(--item-text-color);
  }

  .is-sticky
    theme-navigator-collection-sticky[data-show-mobile-image="false"]
    .navigator-collection-item
    > img {
    display: none;
  }
}

/* 仅移动端吸顶：移除 >= 768px 下的 sticky */
@media (min-width: 768px) {
  .navigator-collection-sticky-section[data-sticky-mode="mobile"] {
    position: static;
  }
}