/* ============================================================
   product-detail.html 专用样式（pd- 前缀）
   对应设计稿 2-产品中心-详情 (2).jpg（1920 × 2513）
   复用 style2.css（头部/页脚/右侧悬浮工具）
   复用 style-product1.css（Banner、面包屑、大标题、页脚校准值）
   Tab 正文区（说明段落 + 技术参数表）以图片方式输出，后期接后台
   ============================================================ */

/* ---------------- 页面骨架 ---------------- */
.pd-page .pc1-title { margin-bottom: 54px; }
.pd-body { padding-bottom: 92px; }

/* ---------------- 产品简介：左图 + 右文 ---------------- */
/* 设计稿：左图 170–958（789）、右栏 1021–1749（729）、间距 62 */
.pd-intro {
  display: flex;
  align-items: flex-start;
  gap: 62px;
}
.pd-intro__pic {
  flex: 0 0 49.94%;
  max-width: 49.94%;
}
.pd-intro__pic img { width: 100%; }

.pd-intro__txt {
  flex: 1 1 auto;
  min-width: 0;
}

.pd-intro__title {
  margin-top: 7px;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  color: #333;
}

/* 简介两行，24px / 35px，#b3b3b3 */
.pd-intro__lead {
  margin-top: 18px;
  font-size: 18px;
  line-height: 35px;
  color: #b3b3b3;
}

/* 分隔线：2px 青色 */
.pd-intro__rule {
  display: block;
  height: 2px;
  margin-top: 18px;
  background: var(--gc-teal);
}

/* 正文四行，18px / 32px */
.pd-intro__text {
  margin-top: 17px;
  font-size: 14px;
  line-height: 32px;
  color: #333;
}

/* 产品咨询胶囊按钮（62 高、31 圆角、2px 浅灰蓝描边） */
.pd-intro__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 63px;
  margin-top: 18px;
  padding: 0 34px 0 30px;
  border: 2px solid #c3cecf;
  border-radius: 32px;
  background: #fff;
  font-size: 24px;
  line-height: 1;
  color: var(--gc-teal);
  transition: border-color .3s, background .3s;
}
.pd-intro__btn:hover {
  border-color: var(--gc-teal);
  background: #f4fbfb;
}
.pd-intro__btn svg { flex: 0 0 auto; }

/* ---------------- Tab 栏 ---------------- */
.pd-tabs { margin-top: 61px; }

.pd-tabs__list {
  display: flex;
  gap: 46px;
  border-bottom: 4px solid #e0e0e0;
}

.pd-tabs__item {
  position: relative;
  padding: 0 0 20px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  color: #666;
  cursor: pointer;
  transition: color .3s;
}
.pd-tabs__item:hover { color: var(--gc-teal); }
.pd-tabs__item.is-on { color: var(--gc-teal); }
.pd-tabs__item.is-on::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 5px;
  background: var(--gc-teal);
}

/* ---------------- Tab 内容（图片，后期由后台输出） ---------------- */
.pd-panes { margin-top: 1px; }
.pd-pane { display: none; }
.pd-pane.is-on { display: block; }
.pd-pane img { width: 100%; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1500px) {
  .pd-intro { gap: 48px; }
  .pd-intro__title { font-size: 38px; }
  .pd-intro__lead { font-size: 21px; line-height: 32px; }
  .pd-intro__text { font-size: 17px; line-height: 30px; }
  .pd-intro__btn { height: 56px; padding: 0 30px 0 22px; border-radius: 28px; font-size: 21px; }
  .pd-tabs { margin-top: 46px; }
  .pd-tabs__item { font-size: 21px; padding-bottom: 28px; }
}

@media (max-width: 1200px) {
  .pd-intro__title { font-size: 34px; }
  .pd-intro__lead { font-size: 19px; line-height: 30px; }
  .pd-intro__text br, .pd-intro__lead br { display: none; }
}

@media (max-width: 1024px) {
  .pd-intro { flex-direction: column; gap: 28px; }
  .pd-intro__pic { flex: none; max-width: 100%; }
  .pd-intro__title { margin-top: 0; }
  .pd-intro__lead { margin-top: 10px; }
  .pd-intro__rule { margin-top: 18px; }
  .pd-tabs { margin-top: 38px; }
  .pd-tabs__list { gap: 32px; }
}

@media (max-width: 640px) {
  .pd-intro__title { font-size: 26px; }
  .pd-intro__lead { font-size: 16px; line-height: 26px; }
  .pd-intro__text { font-size: 15px; line-height: 26px; }
  .pd-intro__btn { height: 46px; padding: 0 22px 0 16px; border-radius: 23px; font-size: 17px; gap: 8px; }
  .pd-intro__btn svg { width: 28px; height: 26px; }
  .pd-tabs { margin-top: 28px; }
  .pd-tabs__list { gap: 22px; }
  .pd-tabs__item { font-size: 16px; padding-bottom: 18px; letter-spacing: 0; }
  .pd-tabs__item.is-on::after { height: 4px; }
}