/* ==================== 产品详情主图轮播组件 _pd-hero ==================== */
.pdh {
  position: relative;
  background: #fff;
}

/* 横版大图视口：宽度随屏幕/容器自适应（不设固定宽度），高度由图片撑起 */
.pdh-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #fff;
  /* 水平手势归组件（拖拽切图），垂直滚动归页面；避免触发浏览器返回/前进手势 */
  touch-action: pan-y;
}

/* 左右滑动：图片横排，translateX 平移切换 */
.pdh-track {
  position: relative;
  display: flex;
  height: auto;
  transition: transform 0.5s ease;
  will-change: transform;
}

.pdh-track.dragging {
  transition: none;
}

.pdh-track.no-anim {
  transition: none;
}

.pdh-slide {
  flex: 0 0 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdh-slide.active {
  opacity: 1;
}

/* 图片固定 400x400：视口更窄时自适应收缩（移动端不溢出），保持正方形不变形 */
.pdh-slide img {
  display: block;
  width: min(400px, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: contain;
  background: #fff;
  -webkit-user-drag: none;
  user-select: none;
}

/* 小圆点：位于整个组件（含图下信息栏）的右下角，不遮挡图片 */
.pdh-dots {
  position: absolute;
  right: 20px;
  bottom: 24px;
  display: flex;
  gap: 8px;
  z-index: 3;
}

.pdh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  /* border: 1px solid rgba(255, 255, 255, 0.9); */
  cursor: pointer;
  transition: background 0.2s;
}

.pdh-dot.active {
  transform: scale(1.2);
  background: #111;
}

/* 左右切换箭头：半透明圆钮，居中偏两侧；桌面悬停图片时显示，触屏常显；箭头为纯 CSS 绘制（无字符） */
.pdh-prev,
.pdh-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 3;
  user-select: none;
  display: none;
  align-items: center;
  justify-content: center;
  /* no mobile tap highlight block */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  outline: none;
}

/* press feedback: slight shrink (keep the translateY centering) */
.pdh-prev:active,
.pdh-next:active {
  transform: translateY(-50%) scale(0.9);
  transition: background 0.2s, transform 0.15s;
}

.pdh-prev::before,
.pdh-next::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.5);
}

.pdh-prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}

.pdh-next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}

.pdh-prev {
  left: 14px;
}

.pdh-next {
  right: 14px;
}

.pdh:hover .pdh-prev,
.pdh:hover .pdh-next {
  display: flex;
}

.pdh-prev:hover,
.pdh-next:hover {
  background: rgba(255, 255, 255, 0.95);
}

/* 图下固定信息栏（位于图片外、pd-hero-wrap 内）：型号/名称/副标题居中，轮播时不动 */
.pdh-info {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 18px 16px 18px;
}

.pdh-model {
  font-family: "Gilroy-Bold";
  font-size: 26px;
  font-weight: 600;
  color: var(--p-black);
}

.pdh-name {
  font-family: "SourceHanSans-ExtraLight";
  margin: 6px 0 0;
  font-size: 16px;
  color: var(--p-gray);
}

/* 图下信息区（组别/简介/参数要点/咨询按钮） */
.pd-info-under {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 30px;
}

.pd-info-under .pd-summary {
  margin: 0;
}

.pd-info-under .pd-inquiry {
  margin-top: 22px;
}

/* 应用场景大图轮播区 */
.pd-app {
  position: relative;
  border-top: 1px solid #eee;
  margin-top: 26px;
}

/* 详情页内应用图轮播压缩高度：首页 hero 高度（calc(100vh - 70px)）在详情页会占满手机屏，
   此处改为 16:9 比例自适应；图片完整显示不裁切（contain），黑边由黑色背景吸收 */
.pd-app .bc-window {
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
}

.pd-app .bc-slide img {
  object-fit: contain;
}

/* 应用图轮播左右箭头：样式与主图轮播（pd-hero）一致——半透明白圆钮 + 纯CSS深色箭头，
   默认隐藏、鼠标悬停图片区时显示、按钮悬停更白；仅作用于详情页 .pd-app，不影响首页大图轮播 */
.pd-app .bc-arrow {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: none;
  align-items: center;
  justify-content: center;
}
.pd-app:hover .bc-arrow {
  display: flex;
}
.pd-app .bc-arrow::after {
  position: static;
  width: 10px;
  height: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  border-right: 1px solid rgba(0, 0, 0, 0.5);
}
.pd-app .bc-prev::after {
  transform: rotate(-135deg);
  margin-left: 4px;
}
.pd-app .bc-next::after {
  transform: rotate(45deg);
  margin-right: 4px;
}
.pd-app .bc-prev {
  left: 14px;
}
.pd-app .bc-next {
  right: 14px;
}
.pd-app .bc-arrow:hover {
  background: rgba(255, 255, 255, 0.95);
}

@media (max-width: 860px) {
  /* 移动端：视口已全宽自适应，无需额外规则；图片由 min(400px, 100%) 自动收缩 */

  /* 移动端应用图轮播：容器适配手机版竖图（3:4），高度明显提升；72vh 上限防止再次占满整屏 */
  .pd-app .bc-window {
    aspect-ratio: 3 / 4;
    max-height: 72vh;
  }

  /* 移动端不显示左右箭头（拖拽/圆点即可切换） */
  .pdh-prev,
  .pdh-next,
  .pd-app .bc-arrow {
    display: none;
  }

  .pdh-dots {
    right: 12px;
    bottom: 18px;
  }

  .pdh-info {
    max-width: 100%;
    padding: 14px 12px 14px;
  }

  .pdh-name {
    font-size: 14px;
  }

  .pdh-model {
    font-size: 22px;
  }

  .pd-info-under {
    padding: 0 16px 24px;
  }

  .pd-app {
    margin-top: 18px;
  }

  .pdh-viewport {
    padding: 20px;
  }
}