@charset "UTF-8";
/**
 * 产品详情页（single-products.php）专属样式
 * @package tongyong
 */

/* ===== 顶部工作区：面包屑 + 图文两栏 ===== */
.pdp-top{padding:44px 0 30px}
.pdp-crumbs{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#524d48;margin-bottom:40px;font-family:var(--futura-h)}
.pdp-back i{font-style:normal;font-size:14px;margin-right:2px}
.pdp-back{color:var(--gray);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .2s,border-color .2s}
.pdp-back:hover{color:var(--ink);border-color:var(--ink)}
.pdp-crumbs a:hover{color:var(--ink)}
.pdp-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:start}
/* 左右两栏：右栏文案比左栏（图集 + 徽标）高时，页面往下滚，左栏吸附在头部下方不动，
 * 右栏继续随页面正常滚动展示 —— 右栏自己不出滚动条。
 * 头部 .header 是 position:sticky;top:0，高度 76px（home.css:44），
 * 所以这里 top 取 76px + 24px 视觉间距。
 * ≤960px 变单栏，取消吸附，正常往下排。 */
@media(min-width:961px){
	.pdp-media{position:sticky;top:100px}
}
.pdp-img{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.pdp-img img{width:100%;display:block}

/* ===== 图集轮播 =====
 * 静态稿这一块只有一张 <img>，没有轮播。以下规则是应需求新增的：
 * 产品「高级内容 → 多图（pics）」上传多张时，横向滑动、一张一张切换。
 * 做法：.pdp-slides 是一条 flex 轨道，每张占满 100% 宽度，
 *       JS 给轨道加 translateX(-N×100%) 就得到「滚动」过渡（.pdp-img 的 overflow:hidden 负责裁掉画面外的）。
 * 箭头 / 圆点沿用站内既有的 .rel-arrow 语言（44px 圆形、1px 描边、米白底），
 * 圆点用 --ink 填充，不引入新颜色。
 */
.pdp-img.is-carousel{position:relative}
.pdp-slides{display:flex;align-items:flex-start;transition:transform .55s cubic-bezier(.4,0,.2,1),height .55s cubic-bezier(.4,0,.2,1)}
.pdp-slide{flex:0 0 100%;min-width:0}
.pdp-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0 0 2px;border-radius:50%;border:1px solid var(--line);background:rgba(246,246,244,.94);color:var(--ink);font-size:19px;line-height:1;cursor:pointer;transition:opacity .3s,background .2s}
.pdp-nav:hover{background:#fff}
.pdp-prev{left:10px}
.pdp-next{right:10px}
.pdp-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;background:rgba(246,246,244,.88)}
.pdp-dot{width:6px;height:6px;padding:0;border:0;border-radius:50%;background:rgba(46,52,68,.26);cursor:pointer;transition:background .2s}
.pdp-dot.on{background:var(--ink)}

/* ===== 图下徽标条 =====
 * 静态稿是固定的 8 列（repeat(8,minmax(0,1fr))），示例产品正好 8 个徽标。
 * 这里用 auto-fit：徽标满 8 个时算出来的列宽与固定 8 列完全一致（已实测 64.25px × 8），
 * 徽标少于 8 个时自动收拢，不会在右侧留出空白格子。
 */
/* 徽标条固定 8 列（与静态稿一致）：列宽恒为容器宽的 1/8，不随徽标数量变化。
 * 后台只填 5 条时右侧留 3 个空位，单个格子不会因此被撑宽。 */
.pdp-badges{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-top:18px}
.pbadge{position:relative;height:64px;background:var(--ink2);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:var(--r);cursor:default}
.pbadge b{font-family:var(--futura-h);font-weight:400;font-size:9px;letter-spacing:.04em;text-transform:uppercase;opacity:.72;white-space:nowrap}
.pbadge i{font-style:normal;font-family:var(--futura-h);font-weight:500;font-size:14px;letter-spacing:.03em;line-height:1;white-space:nowrap}
.pbadge svg{width:20px;height:20px;display:block}
.pbadge::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 11px);left:50%;transform:translateX(-50%) translateY(3px);background:#4d4a47;color:#f6f6f4;font-size:11px;font-weight:300;letter-spacing:.03em;text-transform:none;padding:8px 13px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:20}
.pbadge::before{content:'';position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#4d4a47;opacity:0;pointer-events:none;transition:opacity .18s;z-index:20}
.pbadge:hover::after,.pbadge:hover::before{opacity:1}
.pbadge:hover::after{transform:translateX(-50%) translateY(0)}
.pdp-badges .pbadge{padding:6px 2px;top:auto;left:auto}

/* ===== 右侧标题区 ===== */
.pdp-h1{font-weight:300;font-size:clamp(30px,3.6vw,46px);letter-spacing:.05em;text-transform:uppercase;line-height:1.12;font-family:var(--futura-h)}
.pdp-h1 .h1-sub{display:block;font-size:.58em;letter-spacing:.06em;margin-top:6px}
.pdp-model{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray);margin-top:14px}
.pdp-sub{margin-top:12px;font-weight:300;font-size:15px;color:var(--gray);letter-spacing:.04em}
.pdp-scene{display:inline-block;margin-top:14px;font-weight:400;font-size:13px;letter-spacing:.06em;color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--gray);padding-bottom:2px;transition:border-color .2s}
.pdp-scene i{font-style:normal;color:var(--gray);margin-left:5px;transition:margin-left .25s}
.pdp-scene:hover{border-bottom-color:var(--ink)}
.pdp-scene:hover i{margin-left:9px}
.pdp-desc{margin-top:24px;font-weight:300;font-size:14.5px;line-height:1.85;color:var(--ink)}
.pdp-desc p+p{margin-top:12px}

/* 正文区限高 265px：超出后右侧出现滚动条（只在超出时出现）。
 * 滚动条不用系统默认样式 —— 换成 6px 细条 + 圆角滑块，颜色取 --ink 的低透明度色阶，
 * hover 时加深。
 * 注意：Chrome 一旦读到标准属性 scrollbar-width / scrollbar-color，就会忽略
 * ::-webkit-scrollbar 的定制（退回浏览器默认细条），所以标准属性只在
 * 不支持 ::-webkit-scrollbar 的浏览器（Firefox）里生效。
 * 不加 overscroll-behavior:contain —— 滚到底后要让滚动自然传给整页，否则小区域里会“卡住”。 */
.pdp-desc{
	max-height:265px;
	overflow-y:auto;
	padding-right: 10px;
}
.pdp-desc::-webkit-scrollbar{width:6px;height:6px}
.pdp-desc::-webkit-scrollbar-track{background:transparent;border-radius:999px}
.pdp-desc::-webkit-scrollbar-thumb{background:rgba(43,41,41,.30);border-radius:999px}
.pdp-desc::-webkit-scrollbar-thumb:hover{background:rgba(43,41,41,.52)}
.pdp-desc::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){
	.pdp-desc{scrollbar-width:thin;scrollbar-color:rgba(43,41,41,.32) transparent}
}
.pdp-tip{display:inline-block;margin-top:14px;font-weight:300;font-size:13.5px;color:var(--gray)}

/* ===== CTA：报价 + 下载 ===== */
.btn-solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-solid:hover{background:transparent;color:var(--ink)}
.pdp-ctarow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
.pdp-ctarow .btn-solid{grid-column:1/-1;display:block;text-align:center}
/* 下载按钮容器：p1_down 的每一项一个 .pdp-doc，一排 2 个，多出来的自动换到下一排。
 * 静态稿里两个 .pdp-doc 是 .pdp-ctarow 的直接子项，这里多包一层 .pdp-cont 是为了循环输出。 */
.pdp-cont{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pdp-doc{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border:1px solid rgba(43,41,41,.45);border-radius:var(--r);font-family:var(--futura-h);font-size:11px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:all .25s}
.pdp-doc svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}
.pdp-doc i{font-style:normal;color:var(--gray);margin-left:2px;transition:color .25s}
.pdp-doc:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pdp-doc:hover i{color:var(--paper)}

/* ===== tab 区 ===== */
.pdp-tabs{margin:34px 0 40px;border-top:1px solid var(--line)}
.ptab-bar{display:flex;flex-wrap:wrap;gap:12px;padding:26px 0 0}
.ptab{border:1px solid var(--line);background:transparent;padding:11px 22px;font-family:var(--futura-h);font-weight:400;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);cursor:pointer;border-radius:var(--r);transition:all .2s}
.ptab:hover{border-color:var(--ink)}
.ptab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ptab-panel{display:none;padding:36px 0 8px}
.ptab-panel.on{display:block}

/* ===== 参数表 ===== */
.pspec{width:100%;border-collapse:collapse;margin-top:44px}
.pspec th{font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#524d48;text-align:left;padding:17px 24px 17px 0;border-bottom:1px solid var(--line);width:230px;vertical-align:top}
.pspec td{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:400}
.pspec tr:first-child th,.pspec tr:first-child td{border-top:1px solid var(--ink)}

/* 页签里中继器下方的编辑器内容（p_tab1_cont / p_tab2_cont）。
 * 排版沿用正文 .pdp-desc 的规格，但不限高、不出现滚动条。 */
.ptab-cont{margin-top:34px;font-weight:300;font-size:14.5px;line-height:1.85;color:var(--ink)}
.ptab-cont p+p{margin-top:12px}

/* ===== Ordering Options ===== */
.oblk{margin-bottom:34px}
.olabel{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#524d48;margin-bottom:8px}
.orow{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;max-width:100%}
.orow span{flex:0 0 130px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#524d48;padding-top:2px;white-space:pre-line}
.orow b{font-weight:400;white-space:pre-line}
/* b（描述）为空时，span 不再固定 130px，按自身内容宽度显示 —— class 由模板在 value 为空时输出 */
.orow.orow-empty span{flex:0 0 auto}
.oline{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:400;max-width:760px}

/* ===== 相关产品 ===== */
.pdp-rel{padding:72px 0 92px}
.rel-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:16px}
.rel-title{font-family:var(--futura-h);font-weight:400;font-size:15px;letter-spacing:.18em;text-transform:uppercase}
.rel-all{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s}
.rel-all:hover{color:var(--ink);border-color:var(--ink)}
.rel-all i{font-style:normal}
/* 横向滚动条是 overflow-x:auto —— 一开 overflow，垂直方向也一起被裁剪，
 * .pcard:hover 上浮 4px（product-card.css:23）时卡片顶部会被切掉一截。
 * 所以这里给容器留 10px 顶部内边距，同时把 margin-top 等量从 40px 减到 30px，
 * 卡片在页面上的位置不变，只是多出上浮所需的空间。 */
.pdp-rel .pgrid{display:flex;gap:22px;margin-top:30px;padding-top:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:8px}
.pdp-rel .pgrid::-webkit-scrollbar{display:none}
.pdp-rel .pgrid .pcard{flex:0 0 calc(25% - 16.5px);min-width:0;scroll-snap-align:start}
.relstrip-wrap{position:relative}
.rel-arrow{position:absolute;top:38%;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(246,246,244,.94);color:var(--ink);font-size:19px;line-height:1;cursor:pointer;transition:opacity .3s,background .2s;padding:0 0 2px}
.rel-arrow:hover{background:#fff}
.rel-arrow.ra-l{left:8px}
.rel-arrow.ra-r{right:8px}
.relstrip-wrap.no-l .ra-l,.relstrip-wrap.no-r .ra-r{opacity:0;pointer-events:none}

/* ===== 响应式（原稿断点：1100 / 960 / 560） ===== */
@media(max-width:1100px){.pdp-rel .pgrid .pcard{flex-basis:calc(50% - 11px)}}
@media(max-width:960px){.pdp-grid{grid-template-columns:1fr;gap:36px}.pspec th{width:150px}}
@media(max-width:560px){.pdp-rel .pgrid .pcard{flex-basis:calc(50% - 11px)}
/* 手机端相关产品轮播一排 1 个（覆盖上方 1100/560 的两列 basis） */
.pdp-rel .pgrid .pcard{flex-basis:100%}
/* 手机端徽标条一排 4 个（PC 端仍为静态稿的 8 列） */
.pdp-badges{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 手机端相关产品区上下内间距收窄 */
.pdp-rel{padding:40px 0}}