/*
 * 产品详情页专属样式（product-detail.html）
 * 设计稿：1:3591「产品中心-详情-定」（1920×5865，底色 #F2F2F2）
 * 结构：banner(700，与产品中心共用图) → 二级菜单 6 项(100) →
 *       面包屑 → 产品主展示（左图 810×650 + 3 缩略图 / 右信息区） →
 *       产品描述规格表（27 行：380/1120 双列） → 相关产品推荐（4 卡）
 * 二级菜单（.cat-*）与产品卡（.prod-card）为公共组件（common.css）
 */

/* ---------- 产品主展示（设计稿 容器55：1576×770，左图右信息，间距 46） ---------- */
.pd-hero {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (min-width: 1024px) {
  .pd-hero {
    flex-direction: row;
    gap: 46px; /* 856 - 810 */
  }
  .pd-gallery { flex: 0 0 51.4%; }  /* 810 / 1576 */
  .pd-info    { flex: 1; }
}

/* 大图（设计稿 矩形190：810×650，图为 800×800 居中裁切感——按 object-contain 保完整） */
.pd-main-img {
  display: block;
  width: 100%;
  aspect-ratio: 810 / 650;
  object-fit: cover;
}

/* 缩略图行（设计稿 小缩略图：3×100×100，间距 40，两侧 30×30 箭头按钮）；
   图集图片多时可横向滚动，箭头按钮在滚动容器内吸边 */
.pd-thumbs {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pd-thumbs::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .pd-thumbs {
    gap: 40px;
    margin-top: 20px; /* 670 - 650 */
  }
}
.pd-thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid #D8D8D8;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
}
.pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pd-thumb.is-active {
  border-color: #0971CE;
}
@media (min-width: 1024px) {
  .pd-thumb {
    width: 100px;
    height: 100px;
  }
}
/* 缩略图左右箭头按钮（设计稿 组1418/组1423：30×30 radius 5 边框） */
.pd-thumb-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #D8D8D8;
  border-radius: 5px;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.2s;
}
.pd-thumb-btn:hover {
  border-color: #0971CE;
}
/* 箭头按钮吸边并加底色，避免横向滚动时被缩略图从底下穿过 */
.pd-thumbs .pd-thumb-btn:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #F2F2F2;
}
.pd-thumbs .pd-thumb-btn:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: #F2F2F2;
}

/* ---------- 右侧信息区（设计稿 x=856 列） ---------- */
.pd-title {
  font-size: 22px;
  line-height: 36px;
  font-weight: 600;       /* font_1:3714（28 SemiBold） */
  color: #000000;         /* paint_1:3716 */
}
.pd-subtitle {
  margin-top: 14px;
  font-size: 15px;
  line-height: 26px;
  color: #3D3D3D;         /* font_1:3628 */
}
.pd-info-divider {
  margin: 18px 0;
  border-top: 1px solid #D8D8D8; /* 设计稿 直线36：720 宽 */
}
.pd-label {
  /* 现挂在 <td> 上，勿设 display:block（会破坏表格单元格布局） */
  font-size: 15px;
  line-height: 30px;
  color: #333333;         /* font_1:3615 */
}
@media (min-width: 1024px) {
  .pd-title { font-size: 28px; }
  .pd-subtitle { margin-top: 20px; font-size: 20px; line-height: 40px; }
  .pd-info-divider { margin: 26px 0; }
  .pd-label { font-size: 20px; line-height: 40px; }
}

/* 信息表（介绍/特点/咨询三行：标签列 w-[4em] + 内容列，单元格顶对齐） */
.pd-info table {
  width: 100%;
  border-collapse: collapse;          /* 去默认 2px 单元格间隙 */
}
.pd-info td {
  vertical-align: top;                /* td 默认 middle，改顶对齐使标签与内容首行平齐 */
}
.pd-info tr + tr > td { padding-top: 26px; }     /* 行距（原 .pd-features 的 margin-top） */
.pd-info tr:last-child > td { padding-top: 0; }  /* 咨询行间距由 .pd-consult 自带 margin-top 提供 */
@media (min-width: 1024px) {
  .pd-info tr + tr > td { padding-top: 40px; }
}

/* 介绍段落（font_1:3620：20 Light #3D3D3D；首段与标签顶对齐故 margin 0） */
.pd-info table p {
  margin: 0;
  font-size: 14px;
  line-height: 26px;
  font-weight: 300;
  color: #3D3D3D;
}
.pd-info table p + p { margin-top: 12px; }
@media (min-width: 1024px) {
  .pd-info table p { font-size: 20px; line-height: 34px; }
}

/* 特点标签（设计稿 矩形204：160×45 radius 10，#D8D8D8 底；文字超长自动拉宽） */
.pd-feature-list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}
.pd-feature-list li {
  min-width: 110px;             /* 容纳 6 个字的最小宽度（设计稿红字备注的要求） */
  padding: 8px 16px;
  background: #D8D8D8;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  line-height: 26px;
  color: #3D3D3D;
}
.pd-feature-list li a {
  color: inherit;
  text-decoration: none;
}
.pd-feature-list li a:hover {
  color: #0971CE;
}
@media (min-width: 1024px) {
  .pd-feature-list { gap: 20px; }
  .pd-feature-list li {
    min-width: 160px;
    padding: 8px 20px;
    font-size: 20px;
    line-height: 29px;
  }
}

/* 立即咨询按钮（设计稿 组60：170×50 radius 80 橙 + 客服图标） */
.pd-consult {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  height: 50px;
  padding: 0 24px;
  border-radius: 80px;
  background: #F18903;    /* paint_1:3218 */
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 600;       /* font_1:3902（22 SemiBold，缩小适配） */
  transition: opacity 0.2s;
}
.pd-consult:hover { opacity: 0.9; }

/* ---------- 产品描述规格表（设计稿 1:4190：1600×2615 白底 + 表头 + 27 行） ---------- */
.pd-spec {
  margin-top: 50px;
  background: #FFFFFF;    /* 矩形192 */
  padding: 20px;
}
@media (min-width: 1024px) {
  .pd-spec {
    margin-top: 80px;
    padding: 29px 47px 47px;
  }
}

/* 表头：蓝 tab（280×100 radius 20 20 0 0）叠在底线上，右侧温馨提示 */
.pd-spec-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border-bottom: 1px solid #D8D8D8; /* 矩形193 底边框 */
}
.pd-spec-tab {
  margin: -20px 0 -1px -20px; /* 抵消容器 padding，贴住表卡左上角（设计稿 tab 左突于表头线） */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 56px;
  border-radius: 20px 20px 0 0;
  background: rgba(9, 113, 206, 0.76); /* 矩形194 */
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 600;      /* font_1:4222（42 SemiBold，缩小适配） */
}
.pd-spec-tip {
  margin-left: auto;
  font-size: 13px;
  line-height: 25px;
  color: #F18903;        /* paint_1:3218 */
}
@media (min-width: 1024px) {
  .pd-spec-tab {
    margin: -29px 0 -1px -47px;
    width: 280px;
    height: 100px;
    font-size: 42px;
  }
  .pd-spec-tip { font-size: 18px; } /* font_1:4413 */
}

/* 规格表（设计稿：左列 380 居中 24px #3D3D3D / 右列 1120 居中 20px #666，边框 D8D8D8） */
.pd-spec-table {
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
  table-layout: fixed;
}
.pd-spec-table th,
.pd-spec-table td {
  border: 1px solid #D8D8D8;
  padding: 10px 14px;
  text-align: center;
  vertical-align: middle;
  word-break: break-all;
}
.pd-spec-table th {
  width: 38%;
  font-size: 16px;
  font-weight: 400;
  color: #3D3D3D;        /* font_1:3143（24 Regular） */
}
.pd-spec-table td {
  font-size: 14px;
  color: #666666;        /* font_1:4197（20 Regular） */
}
@media (min-width: 1024px) {
  .pd-spec-table { margin-top: 44px; } /* 173 - 129 表头底 */
  .pd-spec-table th,
  .pd-spec-table td { padding: 22px 24px; }
  .pd-spec-table th { width: 25.3%; font-size: 24px; }   /* 380/1500 */
  .pd-spec-table td { font-size: 20px; }
}

/* ---------- 相关产品推荐（设计稿 1:4147：标题 42 SemiBold + 4 卡，间距 40） ---------- */
.pd-rec { margin-top: 60px; }
.pd-rec-title {
  font-size: 26px;
  line-height: 40px;
  font-weight: 600;
  color: #333333;        /* font_1:4151（42 SemiBold） */
}
.pd-rec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 24px;
}
@media (min-width: 640px) {
  .pd-rec-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 26px; }
}
@media (min-width: 1024px) {
  .pd-rec { margin-top: 80px; }
  .pd-rec-title { font-size: 42px; }
  .pd-rec-grid {
    grid-template-columns: repeat(4, 1fr); /* 设计稿 4 卡 × 间隔 40 */
    gap: 40px;
    margin-top: 40px;    /* 99 ≈ 标题行高 */
  }
}

/* ===== DedeCMS 正文规格表适配（编辑器输出的 table 复用 .pd-spec-table 视觉） ===== */
.pd-spec-body table{width:100%;margin-top:24px;border-collapse:collapse;table-layout:fixed}
.pd-spec-body th,.pd-spec-body td{border:1px solid #D8D8D8;padding:10px 14px;text-align:center;vertical-align:middle;word-break:break-all}
.pd-spec-body th{width:38%;font-size:16px;font-weight:400;color:#3D3D3D}
.pd-spec-body td{font-size:14px;color:#666666}
.pd-spec-body p{margin:0;text-align:left}
@media (min-width:1024px){
  .pd-spec-body table{margin-top:44px}
  .pd-spec-body th,.pd-spec-body td{padding:22px 24px}
  .pd-spec-body th{width:25.3%;font-size:24px}
  .pd-spec-body td{font-size:20px}
}