/* ================================================================
   product-detail.css — 产品详情页专有样式
   （复用 products.css 的 .pl-sidebar / .pl-panel 类目面板样式）
   ================================================================ */

/* ============ 面包屑（复用 products.css .crumb） ============ */

/* ============ 页面主布局 ============ */
.pd-section{padding:48px 0}
.pd-layout{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:36px;
  align-items:flex-start;
}

/* ============ 右侧内容区 ============ */
.pd-content{min-width:0}

/* —— 上部：产品展示（左右两栏） —— */
.pd-show{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin-bottom:48px;
}

/* 左侧：主图 + 缩略图 */
.pd-gallery{}
.pd-gallery .main-img{
  width:100%;
  aspect-ratio:1 / 1;
  background:var(--c-bg);
  border:1px solid var(--c-line);
  overflow:hidden;
  position:relative;
}
.pd-gallery .main-img img{
  width:100%;height:100%;object-fit:cover;
  transition:.4s;
}
.pd-gallery .main-img .badge{
  position:absolute;top:14px;left:14px;
  background:var(--c-gold);color:#0f1a28;
  font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:5px 11px;text-transform:uppercase;
}
.pd-gallery .thumbs{
  display:flex;gap:10px;margin-top:14px;
}
.pd-gallery .thumbs .thumb{
  width:72px;height:72px;
  border:1.5px solid var(--c-line);
  overflow:hidden;cursor:pointer;
  transition:var(--t);background:var(--c-bg);
}
.pd-gallery .thumbs .thumb img{
  width:100%;height:100%;object-fit:cover;
  transition:var(--t);
}
.pd-gallery .thumbs .thumb:hover{border-color:var(--c-gold)}
.pd-gallery .thumbs .thumb.active{border-color:var(--c-navy);border-width:2px}

/* 右侧：产品标题 + 关键属性 */
.pd-info{}
.pd-info .cat-name{
  color:var(--c-gold-d);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;
}
.pd-info h1{
  font-size:28px;font-weight:800;color:var(--c-navy);
  line-height:1.25;margin-bottom:14px;
}
.pd-info .rating{
  display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.pd-info .rating .stars{color:var(--c-gold);font-size:15px;letter-spacing:2px}
.pd-info .rating .txt{font-size:13px;color:var(--c-mute)}
.pd-info .price{
  display:flex;align-items:baseline;gap:12px;
  padding:18px 0;border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);
  margin-bottom:22px;
}
.pd-info .price .lbl{font-size:13px;color:var(--c-mute);font-weight:600}
.pd-info .price .val{font-size:26px;font-weight:800;color:var(--c-navy)}
.pd-info .price .unit{font-size:13px;color:var(--c-mute)}
.pd-info .price .tag{
  margin-left:auto;background:var(--c-gold);color:#0f1a28;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;
  padding:5px 12px;
}
.pd-info .subtitle{
  display:flex;align-items:baseline;gap:12px;
  padding:18px 0;
  margin-bottom:22px;
}

/* 关键属性列表 */
.pd-specs{margin-bottom:24px}
.pd-specs h3{
  font-size:14px;font-weight:700;color:var(--c-navy);
  letter-spacing:.06em;text-transform:uppercase;
  padding-bottom:12px;border-bottom:2px solid var(--c-navy);
  margin-bottom:0;
  display:inline-block;
}
.pd-specs ul{
  list-style:none;border:1px solid var(--c-line);border-top:none;
}
.pd-specs ul li{
  display:flex;padding:12px 0;
  border-bottom:1px solid var(--c-bg);
}
.pd-specs ul li:last-child{border-bottom:none}
.pd-specs ul li .k{
  width:130px;flex-shrink:0;
  font-size:13px;color:var(--c-mute);font-weight:600;
  padding-left:18px;
}
.pd-specs ul li .v{
  flex:1;font-size:13.5px;color:var(--c-text);font-weight:600;
  display:flex;align-items:center;
}
.pd-specs ul li .v .in-stock{color:#2e7d32;font-weight:700}
.pd-specs ul li .v .out-stock{color:#c62828;font-weight:700}

/* CTA 按钮组 */
.pd-actions{display:flex;gap:14px;flex-wrap:wrap}
.pd-actions .btn-inquire{
  flex:1;min-width:160px;
  background:var(--c-navy);color:#fff;border:none;cursor:pointer;
  padding:16px 28px;font-size:14px;font-weight:700;letter-spacing:.06em;
  font-family:inherit;transition:var(--t);text-decoration:none;text-align:center;
  clip-path:polygon(0 0,100% 0,92% 100%,0 100%);
}
.pd-actions .btn-inquire:hover{background:var(--c-gold);color:#0f1a28}
.pd-actions .btn-sample{
  flex:1;min-width:160px;
  background:#fff;border:1.5px solid var(--c-navy);color:var(--c-navy);
  cursor:pointer;padding:16px 28px;font-size:14px;font-weight:700;
  letter-spacing:.06em;font-family:inherit;transition:var(--t);
  text-decoration:none;text-align:center;
}
.pd-actions .btn-sample:hover{background:var(--c-navy);color:#fff}
.pd-actions .btn-wish{
  width:54px;height:54px;background:#fff;border:1.5px solid var(--c-line);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:var(--t);font-size:18px;color:var(--c-mute);
}
.pd-actions .btn-wish:hover{border-color:var(--c-gold);color:var(--c-gold)}

/* —— 下部：详情描述 + 附加信息 —— */
.pd-tabs{
  display:flex;border-bottom:2px solid var(--c-line);
  margin-bottom:0;
}
.pd-tabs .tab{
  padding:14px 24px;font-size:14px;font-weight:700;color:var(--c-mute);
  cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;
  transition:var(--t);letter-spacing:.03em;
}
.pd-tabs .tab:hover{color:var(--c-navy)}
.pd-tabs .tab.active{color:var(--c-navy);border-bottom-color:var(--c-gold)}

.pd-tab-content{
  padding:40px 0 0;
}
.pd-tab-panel{display:none}
.pd-tab-panel.active{display:block;animation:fadeIn .3s ease}

@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.pd-tab-panel h3{
  font-size:18px;font-weight:800;color:var(--c-navy);
  margin-bottom:18px;line-height:1.3;
}
.pd-tab-panel p{
  font-size:15px;color:var(--c-text);line-height:1.85;margin-bottom:16px;
}
.pd-tab-panel p:first-of-type::first-letter{
  font-size:32px;font-weight:800;color:var(--c-gold);
  float:left;line-height:1;margin-right:6px;
}
.pd-tab-panel ul.pd-list{
  list-style:none;margin:20px 0;
  display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;
}
.pd-tab-panel ul.pd-list li{
  display:flex;gap:10px;font-size:14.5px;color:var(--c-text);font-weight:500;
}
.pd-tab-panel ul.pd-list li::before{
  content:"✓";color:var(--c-gold);font-weight:800;flex-shrink:0;
}

.pd-tab-panel .pd-img-row{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin:28px 0;
}
.pd-tab-panel .pd-img-row div{
  aspect-ratio:4/3;overflow:hidden;background:var(--c-bg);border:1px solid var(--c-line);
}
.pd-tab-panel .pd-img-row img{width:100%;height:100%;object-fit:cover}

/* 规格表（Specifications tab） */
.pd-spec-table{width:100%;border-collapse:collapse}
.pd-spec-table th,
.pd-spec-table td{
  padding:14px 20px;text-align:left;font-size:14px;
  border-bottom:1px solid var(--c-line);
}
.pd-spec-table th{
  background:var(--c-bg);color:var(--c-navy);font-weight:700;
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  width:200px;
}
.pd-spec-table td{color:var(--c-text)}

/* 询盘表单（Inquiry tab） */
.pd-inquiry{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.pd-inquiry .full{grid-column:1/-1}
.pd-inquiry label{
  display:block;font-size:13px;font-weight:600;color:var(--c-navy);
  margin-bottom:6px;letter-spacing:.03em;
}
.pd-inquiry input,
.pd-inquiry textarea,
.pd-inquiry select{
  width:100%;border:1.5px solid var(--c-line);background:#fff;
  padding:12px 14px;font-size:14px;color:var(--c-text);
  font-family:inherit;transition:var(--t);
}
.pd-inquiry input:focus,
.pd-inquiry textarea:focus,
.pd-inquiry select:focus{
  outline:none;border-color:var(--c-gold);
}
.pd-inquiry textarea{resize:vertical;min-height:130px}
.pd-inquiry .submit-row{grid-column:1/-1;display:flex;gap:14px;justify-content:flex-end}
.pd-inquiry button{
  background:var(--c-navy);color:#fff;border:none;cursor:pointer;
  padding:14px 32px;font-size:14px;font-weight:700;letter-spacing:.06em;
  font-family:inherit;transition:var(--t);
  clip-path:polygon(0 0,100% 0,92% 100%,0 100%);
}
.pd-inquiry button:hover{background:var(--c-gold);color:#0f1a28}

/* ========== 侧栏小卡片：相关产品（可选项） ========== */
.pd-related{
  margin-top:20px;background:#fff;border:1px solid var(--c-line);
}
.pd-related .rh{
  background:var(--c-navy);color:#fff;padding:14px 20px;
  font-size:13.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.pd-related .items{padding:10px 0}
.pd-related .items a{
  display:flex;gap:12px;padding:10px 16px;transition:var(--t);
  border-bottom:1px solid var(--c-bg);
}
.pd-related .items a:last-child{border-bottom:none}
.pd-related .items a:hover{background:var(--c-bg)}
.pd-related .items a img{
  width:56px;height:56px;object-fit:cover;border:1px solid var(--c-line);flex-shrink:0;
}
.pd-related .items a span{
  font-size:12.5px;font-weight:600;color:var(--c-navy);
  line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  align-self:center;
}

/* ============ 响应式 ============ */
@media(max-width:1024px){
  .pd-show{grid-template-columns:1fr;gap:30px}
  .pd-tab-panel ul.pd-list{grid-template-columns:1fr}
  .pd-tab-panel .pd-img-row{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .pd-layout{grid-template-columns:1fr;gap:24px}
  .pd-show{grid-template-columns:1fr}
  .pd-info h1{font-size:22px}
  .pd-info .price .val{font-size:22px}
  .pd-specs ul li{flex-direction:column;gap:4px}
  .pd-specs ul li .k{width:auto;padding-left:0}
  .pd-actions{flex-direction:column}
  .pd-actions .btn-inquire,
  .pd-actions .btn-sample{flex:1}
  .pd-actions .btn-wish{width:100%}
  .pd-inquiry{grid-template-columns:1fr}
  .pd-inquiry .submit-row{flex-direction:column}
  .pd-inquiry button{width:100%}
  .pd-tabs{flex-wrap:wrap}
  .pd-tabs .tab{padding:10px 16px;font-size:13px}
  .pd-tab-panel .pd-img-row{grid-template-columns:1fr}
  .pd-spec-table{font-size:13px}
  .pd-spec-table th,
  .pd-spec-table td{padding:10px 12px}
}