/* ============================================================
   产品详情页 —— 通用版式 + 语义构件库（2026-10-31）
   外壳沿用案例详情页（信任条 / 面包屑条 / 居中标题 / 上下篇）
   正文只对「语义构件」写样式，不针对单个产品写样式
   ============================================================ */

/* ---------- 封面（受控尺寸，不再是通栏大图） ---------- */
.pd-about{padding:26px 30px 30px}
/* 宽度贴合图片本身，小图不被拉大、大图限幅，避免出现大片空白 */
.pd-cover{margin:0 auto 24px;width:fit-content;max-width:min(520px,100%);position:relative;
  border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;
  background:var(--bg);cursor:zoom-in;box-sizing:border-box}
.pd-cover img{display:block;width:auto;max-width:100%;max-height:300px;
  object-fit:contain;background:var(--bg)}
.pd-cover .zoom-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  background:rgba(9,31,60,.74);color:#fff;font-size:12px;line-height:1;
  padding:7px 14px;border-radius:999px;white-space:nowrap;pointer-events:none;opacity:1}
.pd-cover:hover .zoom-hint{background:rgba(9,31,60,.9)}
/* litpic 缺失时 DedeBIZ 会回落到 thumbnail.jpg（"抱歉，暂无缩略图"占位图）。
   该占位图挂在详情页顶部既占版面又不传递任何信息，等同空封面处理，整块隐藏；
   日后补上真实产品图（litpic 改为实拍地址）后会自动恢复显示。 */
.pd-about:has(.pd-cover img[src*="/static/web/img/thumbnail"]) .pd-cover{display:none}

/* ---------- 产品特性要点卡（图标置左，PC 两列 / 移动端单列） ---------- */
.pd-feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  margin:8px 0 22px;padding:0;list-style:none}
.pd-feat li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;
  background:#f7f9fc;border:1px solid var(--border);border-radius:var(--r-card)}
.pd-feat .pf-ic{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#fff;
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.pd-feat .pf-ic img{width:24px;height:24px;object-fit:contain}
.pd-feat .pf-b{display:block;min-width:0}
.pd-feat b{display:block;font-size:14px;font-weight:700;color:#091f3c;line-height:1.4;margin-bottom:3px}
.pd-feat i{display:block;font-style:normal;font-size:13px;line-height:1.7;color:#5b6b80}

/* ---------- 图集（带标题的工艺图 / 证书图，点击看大图） ---------- */
.pd-figset{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:6px 0 22px}
.pd-fig{margin:0;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-card);overflow:hidden;cursor:zoom-in}
.pd-fig img{display:block;width:100%;height:auto}
.pd-fig figcaption{padding:9px 10px;font-size:13px;line-height:1.5;color:#5b6b80;
  text-align:center;border-top:1px solid var(--border);background:#f7f9fc}

/* ---------- 相关工程案例 ---------- */
.pd-rel{margin:40px 0 0}
.pd-rel .sec-title-row h2{font-size:22px}

/* ---------- 正文容器 ---------- */
.product-detail{font-size:14px;line-height:1.85;color:var(--text);max-width:none;margin:0;padding:0}
.product-detail *{font-family:inherit;box-sizing:border-box}

/* ---------- 1 图片基础 ---------- */
.product-detail img{max-width:100%;height:auto;display:block;margin:14px auto;border-radius:8px}
.product-detail figure{margin:0}
/* 小图标：统一装进主题色徽标圆底，避免透明小图在白底发虚 */
.product-detail img.pd-icon-img{display:inline-block;width:44px;height:44px;object-fit:contain;
  margin:0;padding:7px;border-radius:50%;background:#f0f4fa;border:1px solid var(--border);
  vertical-align:middle}
/* 透明长条/标题图：给浅底托住，避免文字图在白底消失 */
.product-detail img.pd-strip-img{display:block;width:auto;max-width:100%;
  padding:10px 14px;margin:12px auto;background:#f0f4fa;border-radius:8px}

/* ---------- 1.5 适用范围：通用图标 + 文字（全站共用一套图标，不逐产品画图） ---------- */
.product-detail ul.uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;margin:14px 0 14px;padding:0;list-style:none}
.product-detail ul.uses li{display:flex;align-items:center;gap:10px;min-width:0;
  padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#f7f9fc}
.product-detail ul.uses .ui{flex:0 0 36px;width:36px;height:36px;border-radius:50%;
  background:#e3ecf9;color:#0d2444;border:1px solid rgba(9,31,60,.06);
  display:flex;align-items:center;justify-content:center}
.product-detail ul.uses .ui svg{width:21px;height:21px;display:block;stroke-width:1.9}
.product-detail ul.uses .ut{font-size:14px;line-height:1.35;font-weight:600;
  color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 早期产品的四宫格卡片里放 3~6 个场景，收成两列避免挤压 */
.product-detail .card.pd-spec ul.uses{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.product-detail .card.pd-spec ul.uses .ui{flex-basis:30px;width:30px;height:30px}
.product-detail .card.pd-spec ul.uses .ui svg{width:17px;height:17px}
.product-detail .card.pd-spec ul.uses .ut{font-size:13px}
.product-detail p.pd-note{margin:2px 0 0;padding:8px 10px;border-radius:6px;background:#fff8f0;
  border-left:3px solid #e8a33d;color:#7a5a22;font-size:12.5px;line-height:1.7}

/* ---------- 2 导语 ---------- */
.product-detail p.intro{font-size:14.5px;line-height:1.9;color:var(--text);
  background:var(--bg);border-left:4px solid var(--navy);
  padding:14px 18px;border-radius:0 8px 8px 0;margin:0 0 6px;text-align:justify}
.product-detail p.para{margin:12px 0;text-align:justify}

/* ---------- 3 小节标题（任何 h2/h3/h4 + 各类私有标题类统一） ---------- */
.product-detail h2,.product-detail h3{font-size:20px;color:var(--heading);font-weight:600;
  margin:32px 0 16px;padding-left:12px;border-left:4px solid var(--primary);line-height:1.4}
.product-detail h4{font-size:15px;color:var(--heading);font-weight:600;margin:0 0 6px;line-height:1.5}
.product-detail .poptit1,.product-detail .bluetit,.product-detail .blockTitle,
.product-detail .bigtit,.product-detail .tit,.product-detail .bottit,
.product-detail .tabtitle,.product-detail .tzdesc,.product-detail .advtitle,
.product-detail .effecttitle,.product-detail .sgtitle,.product-detail .yycjtitle,
.product-detail .jzfgtitle{display:block;font-size:16px;font-weight:600;
  color:var(--heading);margin:24px 0 10px;padding-left:12px;border-left:4px solid var(--primary)}
.product-detail section.block{margin:0 0 30px}
.product-detail div:empty{display:none}

/* ---------- 4 要点清单 ---------- */
.product-detail ul.check-list,.product-detail ul.para,
.product-detail .pd-flat ul{padding:0;margin:14px 0;list-style:none}
.product-detail ul.check-list li{position:relative;padding:8px 0 8px 24px;
  border-bottom:1px dashed var(--border)}
.product-detail ul.check-list li:last-child{border-bottom:0}
.product-detail ul.check-list li:before{content:'';position:absolute;left:5px;top:17px;
  width:6px;height:6px;border-radius:50%;background:var(--primary)}

/* ---------- 5 特性卡片栅格 ---------- */
.product-detail ul.feature-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:14px;margin:16px 0;padding:0;list-style:none}
.product-detail ul.feature-list li{background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:16px 18px;box-shadow:var(--shadow-1)}
.product-detail ul.feature-list .ft-tit{display:block;font-weight:600;color:var(--heading);
  font-size:14px;margin-bottom:4px}
.product-detail ul.feature-list .ft-info{display:block;font-size:13px;color:var(--text);line-height:1.8}

/* ---------- 6 图集栅格 ---------- */
.product-detail .gallery,.product-detail .systemSlide .gallery,
.product-detail .itemlist,.product-detail .imglist,.product-detail .imageShow,
.product-detail .pic-content,.product-detail .chucai_cont,.product-detail .gongxulist,
.product-detail .yingyongcj,.product-detail .jzstyle,.product-detail .stepsMain,
.product-detail .anlilist,.product-detail .wordlist,.product-detail .sekalist,
.product-detail .effectshow,.product-detail .cjphotocon,.product-detail .cjalbumcon,
.product-detail .changjingphoto,.product-detail .txadvantage
{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin:16px 0}
.product-detail .gallery-item{margin:0;background:#fff;border:1px solid var(--border);
  border-radius:10px;overflow:hidden}
.product-detail .gallery-item img{width:100%;margin:0;border-radius:0}
.product-detail .gallery-item figcaption{padding:8px 10px;font-size:13px;text-align:center;color:var(--text)}
.product-detail .gallery>figure,.product-detail .gallery>div{margin:0}

/* ---------- 7 图标 + 文案 条目 ---------- */
.product-detail .explain{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;margin:14px 0}
.product-detail .explain .item{background:#fff;border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;font-size:13.5px}
.product-detail .item{display:flex;gap:12px;align-items:flex-start}
.product-detail .item .icon{flex:none}
.product-detail .item .con{flex:1;min-width:0}
.product-detail .item .con h4{margin:0 0 4px}
.product-detail .item .con p{margin:0;font-size:13.5px;color:var(--text)}
.product-detail .item .des{font-size:13.5px;color:var(--text)}
.product-detail .imgText{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin:16px 0}
.product-detail .imgText .image img{width:100%;border-radius:8px}

/* ---------- 8 参数表 ---------- */
.product-detail table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13.5px;
  background:#fff;border-radius:8px;overflow:hidden}
.product-detail th,.product-detail td{border:1px solid var(--border);padding:9px 12px;
  text-align:left;vertical-align:top}
.product-detail th{background:var(--navy);color:#fff;font-weight:600;white-space:nowrap}
.product-detail tr:nth-child(even) td{background:#fafbfd}
.product-detail tr.tabheader td{background:var(--navy);color:#fff;font-weight:600}
.product-detail tr.white td{background:#fff}
.product-detail table img{margin:0 auto}

/* ---------- 9 由嵌套表格还原出来的块（pd-flat） ---------- */
.product-detail .pd-flat>div{padding:2px 0}
.product-detail .pd-flat .check-list,.product-detail .pd-flat p{margin:10px 0}

/* ---------- 10 无用装饰 / 滑块控件 ---------- */
/* 只隐藏纯控件：翻页箭头、遮罩、视频播放器外壳、轮播分页点、空按钮
   注意：pageT / pageB / btns 在部分专题页里是真正的正文容器，不能隐藏 */
.product-detail .pageArrow,.product-detail .btn:empty,.product-detail .shade,
.product-detail .pause,.product-detail .swiper-pagination{display:none}
/* 视频封面本身是有效内容，保留；只去掉播放按钮 */

/* ---------- 11 图片流自动网格（JS 打标，兜住没有容器类的内联图串） ---------- */
.product-detail .pd-autogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;margin:16px 0;align-items:stretch}
.product-detail .pd-autogrid>img{width:100%;height:auto;margin:0;padding:6px;
  background:#fafbfd;border:1px solid var(--border);border-radius:8px;object-fit:contain}
/* 网格里的小图标不再单独套圆底，避免双重边框 */
.product-detail .pd-autogrid>img.pd-icon-img{width:100%;height:auto;max-height:150px;
  padding:10px;border-radius:8px}
.product-detail .cd-prevnext .pnn.empty,
.cd-prevnext .pnn.empty{color:var(--muted)}

/* ---------- 12 早期产品：正文为若干 .card.pd-spec 卡片 -> 双列排布 ---------- */
.product-detail>.card.pd-spec{padding:20px 24px}
.product-detail p.bd{font-size:14px;line-height:1.85;color:var(--text);margin:8px 0 0}
@supports selector(:has(*)){
  .product-detail:has(>.card.pd-spec){display:grid;grid-template-columns:1fr 1fr;
    gap:16px;align-items:stretch}
  .product-detail:has(>.card.pd-spec)>*{grid-column:1/-1}
  .product-detail:has(>.card.pd-spec)>.card.pd-spec{grid-column:auto;margin:0}
}

/* ---------- 移动端 ---------- */
@media (max-width:768px){
  .pd-about{padding:16px 14px 20px}
  .product-detail:has(>.card.pd-spec){grid-template-columns:1fr}
  .pd-cover{margin:0 auto 16px}
  .pd-cover img{max-height:220px}
  .pd-figset{grid-template-columns:1fr;gap:12px}
  .pd-fig figcaption{font-size:12.5px;padding:8px 10px}
  .pd-feat{grid-template-columns:1fr;gap:10px}
  .pd-feat li{padding:12px 13px}
  .pd-feat b{font-size:13.5px}
  .pd-feat i{font-size:12.5px;line-height:1.65}
  .pd-rel{margin-top:26px}
  .pd-rel .sec-title-row h2{font-size:19px}
  .product-detail h2,.product-detail h3{font-size:18px;margin:24px 0 12px}
  .product-detail .poptit1,.product-detail .bluetit,.product-detail .blockTitle,
  .product-detail .bigtit,.product-detail .tit,.product-detail .bottit,
  .product-detail .tabtitle,.product-detail .tzdesc{font-size:15px}
  .product-detail .gallery,.product-detail .itemlist,.product-detail .imglist,
  .product-detail .imageShow,.product-detail .pic-content,.product-detail .chucai_cont,
  .product-detail .gongxulist,.product-detail .yingyongcj,.product-detail .jzstyle,
  .product-detail .stepsMain,.product-detail .anlilist,.product-detail .effectshow,
  .product-detail .cjphotocon,.product-detail .cjalbumcon,.product-detail .txadvantage
  {grid-template-columns:repeat(2,1fr);gap:10px}
  .product-detail .pd-autogrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .product-detail ul.feature-list{grid-template-columns:1fr}
  .product-detail ul.uses{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .product-detail ul.uses li{padding:8px 10px;gap:8px}
  .product-detail ul.uses .ui{flex-basis:28px;width:28px;height:28px}
  .product-detail ul.uses .ui svg{width:16px;height:16px}
  .product-detail ul.uses .ut{font-size:12.5px}
  .product-detail .explain{grid-template-columns:1fr}
  .product-detail .imgText{grid-template-columns:1fr;gap:14px}
  .product-detail table{display:block;overflow-x:auto;white-space:nowrap}
}