@charset "utf-8";
/* ==========================================================
   产品详情页 独立样式
   ========================================================== */
.pd-sec{background:var(--bg-light);}
.pd-layout{display:flex;gap:26px;align-items:flex-start;}
.pd-main{flex:1;min-width:0;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:8px;padding:34px 38px 44px;overflow:hidden;} /* overflow:hidden 兜底：内部任何超宽内容只裁剪/内部滚动，不把白卡与页面顶宽 */
.pd-side{width:300px;flex:none;position:sticky;top:calc(var(--header-h) + 20px);}
/* 侧栏分类为跳转链接时的排版 */
.sc-cats.sc-link li{padding:0;}
.sc-cats.sc-link li a{display:flex;align-items:center;gap:14px;width:100%;padding:15px 22px;color:inherit;}
.sc-cats.sc-link li a svg,.sc-cats.sc-link li a img{width:30px;height:30px;stroke:var(--blue);fill:none;stroke-width:1.6;flex:none;object-fit:contain;}
.sc-cats.sc-link li:hover{color:var(--blue);background:#f3f7fc;}
/* 当前分类（URL 中的 CatID 命中）：左 5px 橙条 + 深蓝底 + 白字，图标由后台高亮图 CatAttrC 输出；
   .on:hover 一并覆盖，保证鼠标经过当前项时不跳回悬停色 */
.sc-cats.sc-link li.on,.sc-cats.sc-link li.on:hover{border-left:5px solid #ff9000;background:#003a8f;color:#fff;}
.sc-cats.sc-link li.on a{padding-left:17px;} /* 22-5：抵消左边框宽度，图标与文字和其它项保持对齐 */

/* 标题区 */
.pd-head{min-width:0;}
.pd-head h1,.pd-head .sub,.pd-head .specs{overflow-wrap:break-word;word-break:break-word;} /* 型号/英文长串窄屏折行，不撑宽 */
.pd-head h1{font-size:clamp(20px,2.4vw,28px);color:var(--ink);}
.pd-head .sub{color:var(--blue);font-size:14px;margin:8px 0 14px;}
.pd-head .specs span{background:var(--blue);color:#fff;}
.specs{display:flex;gap:8px;flex-wrap:wrap;}
.specs span{background:#eef1f5;border-radius:12px;padding:3px 14px;font-size:12px;color:#57606d;}

/* 图册：主图为 Swiper（相册每张一个 slide，电脑端可拖拽/点箭头、手机端可触屏左右滑动），缩略图/前后箭头联动；均为后台数据输出的 img */
.gal{margin-top:26px;width:100%;}
.gal-main{position:relative;width:100%;max-width:100%;box-sizing:border-box;height:clamp(260px,32vw,420px);border:1px solid var(--line);background-color:#fff;overflow:hidden;}
.gal-main .swiper-wrapper,.gal-main .swiper-slide{height:100%;}
.gal-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;}
.gal-zoom{position:absolute;right:10px;bottom:10px;width:30px;height:30px;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;}
.gal-zoom svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2;}
/* 缩略图整条内部横向滚动（电脑端与手机端一致）：图多时不撑破页面，隐藏滚动条保持观感 */
.gal-thumbs{display:flex;align-items:center;gap:12px;margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.gal-thumbs::-webkit-scrollbar{display:none;}
.gal-prev,.gal-next{width:26px;height:34px;color:#8a94a6;font-size:16px;flex:none;}
.gal-prev:hover,.gal-next:hover{color:var(--blue);}
.g-thumb{width:76px;height:64px;flex:none;border:2px solid transparent;background-color:#fff;border-radius:4px;overflow:hidden;}
.g-thumb img{width:100%;height:100%;object-fit:contain;display:block;}
.g-thumb.on{border-color:var(--blue);}
/* 手机端圆点分页：默认（电脑端）隐藏，窄屏显示；缩略图在手机端隐藏后由圆点作位置指示/点击切换 */
.gal-main .swiper-pagination{display:none;}
.gal-main .swiper-pagination-bullet{background:#c8ced8;opacity:1;}
.gal-main .swiper-pagination-bullet-active{background:var(--orange);}

/* 正文：内容来自后台编辑器，统一用 .prodnr 下裸标签(h3/h4/p/table/ol/ul/li/img/strong)，不用 class 与 div */
.prodnr{color:var(--muted);font-size:14px;line-height:1.9;min-width:0;overflow-wrap:break-word;word-break:break-word;}
/* 编辑器常给 div/p/section 带 inline 定宽（如 width:1200px），窄屏会把 .pd-main 顶宽：
   直接子级一律钳到 100%，块级超宽时改为内部横向滚动（.table-wrapper 内的 table 除外） */
.prodnr>*{max-width:100%;}
.prodnr>div,.prodnr>section,.prodnr>p,.prodnr>ul,.prodnr>ol{overflow-x:auto;}
.prodnr .table-wrapper>table{max-width:none;} /* 表格在滚动容器内按自身宽度铺开，不受钳制 */
.prodnr video,.prodnr iframe,.prodnr embed{max-width:100%!important;height:auto;}
/* h3=橙条小节标题（复刻子页公共 .bar-title，避免改动公共样式） */
.prodnr h3{display:flex;align-items:center;gap:10px;font-size:clamp(17px,1.8vw,21px);color:var(--ink);margin:36px 0 16px;}
.prodnr h3::before{content:"";flex:none;width:4px;height:20px;background:var(--orange);}
/* h4=蓝色子标题（原 .feat h4 / .pd-h4） */
.prodnr h4{color:var(--blue);font-size:15px;margin:16px 0 4px;}
/* p=正文段落（原 .pd-p / .feat p），颜色字号继承 .prodnr */
.prodnr p{margin:0 0 10px;}
/* 表格（原 .pd-table）：后台正文里的宽表由 jQuery 外套 .table-wrapper，内部横向滚动而不撑破页面（编辑器可能带 inline width，仅靠表格自身 display:block 会被定宽顶开） */
.prodnr .table-wrapper{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* !important：编辑器给 table 带的 inline width（如 style="width:1200px"）优先级高于样式表，必须强制覆盖才能被 .table-wrapper 约束 */
.prodnr table{width:100%!important;max-width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 12px;}
.prodnr th,.prodnr td{border:1px solid var(--line);padding:9px 12px;text-align:left;color:#3c4a5c;font-weight:400;}
.prodnr th{background:#f2f5f9;color:var(--ink);}

    .prodnr table tr:nth-child(1) td {
        background: #f2f5f9;
        color: var(--ink);
    }
    /* 列表（原 .pd-ol） */
    .prodnr ol, .prodnr ul {
        padding-left: 20px;
        margin: 0 0 12px;
        font-size: 13px;
        line-height: 2;
    }
.prodnr li{margin-bottom:4px;}
/* 图片（原 .pd-chart 背景图→img），居中自适应 */
.prodnr img{display:block;width:100%;max-width:100%!important;height:auto;margin:10px auto;}
/* 加粗（b 用 strong 替换） */
.prodnr strong{font-weight:700;color:var(--ink);}

/* ---------- 自适应 ---------- */
@media (max-width:992px){
  .pd-layout{flex-direction:column;}
  .pd-side{width:100%;min-width:0;position:static;display:flex;gap:16px;}
  .pd-side .side-card{flex:1;min-width:0;} /* min-width:0：分类名过长时卡片不被内容撑宽，文字改为折行 */
  .pd-side .side-card + .side-card{margin-top:0;}
  .pd-main{padding:24px 22px 32px;}
}
@media (max-width:768px){
  .pd-main{padding:20px 14px 28px;} /* 手机上收窄内边距，给正文/图册留出更多可用宽度 */
  .gal{margin-top:18px;}
  .gal-thumbs{display:none;}                          /* 手机端隐藏缩略图条：主图靠触屏滑动 + 底部圆点分页切换 */
  .gal-main .swiper-pagination{display:block;}
  /* 正文宽表：表格按内容自然宽度铺开（不挤压列），超出则由 .table-wrapper 左右拖动查看完整表格；
     !important 同样用于压过编辑器的 inline width，否则该规则不生效、表格被定宽顶破 */
  .prodnr .table-wrapper table{width:max-content!important;min-width:100%!important;max-width:none!important;}
  .pd-side{flex-direction:column;}
  .pd-side .side-card + .side-card{margin-top:24px;}
}