/* ============================================================
   pdetail.css — 产品详情页模板样式（product.html 引入）
   新增模块（参数表/按钮/章节/规格/相关/步骤）仅电脑端 ≥1025px 显示，
   手机端与平板端保持原有展示。
   ============================================================ */

/* ---------- 首屏信息区：参数表 / 提示 / 按钮 ---------- */
.pdl-params{margin:18px 0 0;padding:0;}
.pdl-params .pdl-row{
  display:flex;align-items:baseline;gap:10px;
  padding:7px 0;border-bottom:1px dashed #E2E5E9;
}
.pdl-params dt{flex:0 0 92px;color:#8FA6B8;font:400 13px/1.6 Arial,sans-serif;}
.pdl-params dd{margin:0;color:#102A43;font:600 14px/1.6 Arial,sans-serif;}
.pdl-confirm{
  margin:16px 0 0;padding:10px 14px;
  background:#F0F5FA;border-radius:4px;
  color:#475569;font:400 13px/1.6 Arial,sans-serif;
}
.pdl-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px;}
.pdl-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 24px;border-radius:4px;box-sizing:border-box;
  font:700 14px/1.2 Arial,sans-serif;text-decoration:none;white-space:nowrap;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.pdl-btn span{display:inline-block;}
.pdl-primary{background:#1261A6;color:#FFF;border:1px solid #1261A6;}
.pdl-primary:hover{background:#0B4C87;border-color:#0B4C87;}
.pdl-ghost{background:transparent;color:#1261A6;border:1px solid #1261A6;}
.pdl-ghost:hover{background:#1261A6;color:#FFF;}

/* ---------- 章节（Description/Specifications/How to Order/Related）---------- */
.pdl-section{margin-top:32px;}
.pdl-h2{color:#102A43;font:700 22px/1.3 Arial,sans-serif;margin:0 0 18px;text-transform:none;}
.pdl-h3{color:#102A43;font:700 17px/1.4 Arial,sans-serif;margin:0 0 10px;}
.pdl-richtext{color:#475569;font:400 16px/1.7 Arial,sans-serif;}
.pdl-richtext p{margin:0 0 12px;}
.pdl-richtext p:last-child{margin-bottom:0;}
.pdl-richtext ul,.pdl-richtext ol{margin:0 0 12px;padding-left:20px;}
.pdl-richtext li{margin-bottom:6px;}

/* ---------- Specifications 表格 ---------- */
.pdl-spec-table-inner{
  width:100%;border-collapse:collapse;background:#FFF;
  border:1px solid #E2E5E9;
}
.pdl-spec-table-inner td{
  padding:10px 14px;border-bottom:1px solid #E8EAED;
  color:#475569;font:400 14px/1.6 Arial,sans-serif;
}
.pdl-spec-table-inner td:first-child{
  width:38%;color:#102A43;font-weight:600;background:#F7F9FB;
}
.pdl-spec-table-inner tr:last-child td{border-bottom:none;}

/* ---------- How to Order 步骤 ---------- */
.pdl-steps{list-style:none;counter-reset:pdlstep;margin:0;padding:0;}
.pdl-steps li{
  position:relative;padding:0 0 0 44px;margin:0 0 16px;
  color:#475569;font:400 15px/1.7 Arial,sans-serif;
}
.pdl-steps li::before{
  counter-increment:pdlstep;content:counter(pdlstep,decimal-leading-zero);
  position:absolute;left:0;top:2px;
  width:30px;height:30px;border-radius:50%;
  background:#F0F5FA;color:#1261A6;
  display:flex;align-items:center;justify-content:center;
  font:700 12px/1 Arial,sans-serif;
}
.pdl-steps li strong{display:block;color:#102A43;font-size:15px;margin-bottom:2px;}
.pdl-steps li span{display:block;}

/* ---------- Related Products ---------- */
.pdl-rel-grid{display:flex;flex-wrap:wrap;gap:20px;}
.pdl-rel-card{
  width:calc(25% - 15px);background:#FFF;
  border:1px solid #E2E5E9;border-radius:8px;overflow:hidden;
  text-decoration:none;color:inherit;display:block;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.pdl-rel-card:hover{border-color:#1261A6;box-shadow:0 4px 12px rgba(18,97,166,.10);}
.pdl-rel-img{display:block;aspect-ratio:1/1;overflow:hidden;background:#F7F8F9;}
.pdl-rel-img img{width:100%;height:100%;object-fit:contain;display:block;padding:8px;box-sizing:border-box;}
.pdl-rel-title{
  display:block;padding:10px 12px;
  color:#102A43;font:600 14px/1.4 Arial,sans-serif;
}

/* ---------- 电脑端 ≥1025px：左右布局微调 ---------- */
@media (min-width:1025px){
  .prodetails-top .preview-container{width:50%;}
  .prodetails-top .prodetails-info{width:calc(50% - 40px);}
  .pdl-section{margin-top:36px;}
  .pdl-h2{font-size:24px;}
}

/* ---------- 手机/平板：新增模块保持原页面结构，样式从简 ---------- */
@media (max-width:1024px){
  /* 手机/平板保持原有展示：隐藏电脑端新增的参数表/按钮/规格/订购步骤/章节 */
  .pdl-params,.pdl-confirm,.pdl-btns,.pdl-specs-wrap,
  .pdl-hide-when-empty,.pdl-steps{display:none;}
  .pdl-section{margin-top:28px;}
  .pdl-h2{font-size:20px;}
  .pdl-rel-grid{gap:14px;}
  .pdl-rel-card{width:calc(50% - 7px);}
}
@media (max-width:768px){
  .pdl-rel-card{width:100%;}
}