/* 两列图集缩略图导航条，配 pd_images_pc_two_col_thumbnail_bar.liquid */
.pd-thumbnail-nav-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  flex-direction: column;
  align-items: flex-start;
  pointer-events: none;
}
/* 基准 top 在 liquid 行内（spz-sticky 挂载采样早于本外链文件就绪）；
   双类压过骨架内联的 visibility: hidden */
.pd-thumbnail-nav.pd-thumbnail-nav {
  visibility: visible;
}
.pd-thumbnail-nav {
  position: sticky;
  /* 上限 400（设计稿）；可视区变矮时收缩，顶部偏移用 spz-sticky 回写的实际值 */
  max-height: min(400px, calc(100vh - var(--i-spzcss-element-top, 60px) - 60px));
  margin-block: 60px;
  -webkit-margin-start: 40px;
          margin-inline-start: 40px;
  width: -moz-max-content;
  width: max-content;
  pointer-events: auto;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 6px;
  /* 设计稿固定值：白卡片 + 12px 柔和投影，不随配色方案 */
  background: #fff;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.08);
}
/* 新主图区的 40px 顶距在祖先上，收缩上限的 fallback 跟基准一致（top 本身在行内） */
.lg\:pt-10 .pd-thumbnail-nav {
  max-height: min(400px, calc(100vh - var(--i-spzcss-element-top, 100px) - 60px));
}
/* 蒙层模式下 spz-sticky 量不准（菜单行脱离文档流），改用 header 实际遮住的底边。
   :has 带 id 优先级高于下面的 is-pos-bottom，所以要排除左下档 */
body:has(#header.header--mask) .pd-thumbnail-nav-overlay:not(.is-pos-bottom) .pd-thumbnail-nav {
  top: calc(60px + var(--header-covered-bottom, 0px));
  max-height: min(400px, calc(100vh - 120px - var(--header-covered-bottom, 0px)));
}
.is-pos-bottom .pd-thumbnail-nav {
  top: auto;
  bottom: 60px;
  -webkit-margin-before: auto;
          margin-block-start: auto;
}
/* 箭头逐张跳图，组件反射 [at-start]/[at-end] 用于置灰 */
.pd-thumbnail-nav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 20px;
  cursor: pointer;
}
/* 设计稿固定黑；上箭头复用同一图标旋转 180° */
.pd-thumbnail-nav__icon {
  color: #000;
}
.pd-thumbnail-nav__arrow--up .pd-thumbnail-nav__icon {
  transform: rotate(180deg);
}
.pd-thumbnail-nav[at-start] .pd-thumbnail-nav__arrow--up,
.pd-thumbnail-nav[at-end] .pd-thumbnail-nav__arrow--down {
  opacity: 0.4;
  pointer-events: none;
}
/* 条子被 max-height 压矮时 strip 先收缩并内滚，箭头（flex-shrink: 0）不缩 */
.pd-thumbnail-nav__strip {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  gap: 6px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.pd-thumbnail-nav__item {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}
.pd-thumbnail-nav__item img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  pointer-events: none;
}
/* 设计稿固定值：高亮黑边 */
.pd-thumbnail-nav__item[active] {
  border-color: #000;
}
@media (prefers-reduced-motion: reduce) {
  .pd-thumbnail-nav__strip {
    scroll-behavior: auto;
  }
}