/* 横向滚动容器
   - 内容能 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;
  }
}