/* ============ PXID 改版挑选器 · 共用样式（本地预览用，非线上样式） ============
   被 index.html / advantages/adv-why.html / services/process.html 等页面 <link> 引用。
   改样式只需改这一个文件，刷新即可，不必重跑注入脚本。
   ⚠️ 所有选择器都带 .pxlab / .pxsw / .pxfr / .pxrailbar 前缀，不碰站点既有样式。
   ⚠️ 只用深墨 + 金两种色，金只做线/小方块/编号 —— 与站点定稿语言一致。
   ⚠️ 不要用 backdrop-filter（滚动时浮层会每帧重采样、明显卡顿）。
============================================================================ */

.pxlab{position:relative;z-index:70}

/* 方案容器：默认隐藏，选中某套时才展开 */
.pxfr{display:none}
.pxlab:not([data-v="orig"]) .pxfr{display:block;background:#fff}
/* ⚠️ iframe 必须显式 overflow:hidden —— 不设的话某些引擎会给它一条内部纵向滚动条，
   而 iframe 是满幅的，于是「页面滚动条 + iframe 滚动条」并排出现两条（用户原话「怎么老是有两个啊」）。
   深色方案上尤其刺眼。 */
.pxlab:not([data-v="orig"]) .pxfr iframe{display:block;width:100%;height:600px;border:0;background:#fff;overflow:hidden}

/* 切换器：**每个 section 各钉一个，定在它自己的段上**（不切换、不消失、每段独立）。
   position:fixed + JS 逐帧把 `top` 钳在 [header 下方, 段底部−自身高度] 之间：
   段在视口里 → 它就一直粘在头部下方；段滚出去 → 它跟着段一起离开，下一段的自然接上。
   ⚠️ 不用 sticky 是因为它必须占据文档流（会把段内容往下推）、且需要父级有高度；
      这里用 fixed + 每帧算 top，等价效果且零结构改动。
   ⚠️ 站点右下角被 `.to-top`（回到顶部，46×46 @ right/bottom 26）占着 → 切换器走右上。
   ⚠️ 站点 `body>header` sticky top:0 z-index:50、移动端 `.menu` 落在 top:74px → 让开到 84px（窄屏 74px）。 */
.pxsw{position:fixed;top:84px;right:20px;z-index:9000;display:flex;gap:5px;align-items:center;flex-wrap:wrap;
  justify-content:flex-end;max-width:calc(100vw - 40px);
  background:rgba(19,22,23,.93);border:1px solid rgba(255,255,255,.13);padding:6px}

/* 段名 + 套数：金色小方块 + 灰字（站点语言：黄只做线/小方块，不做底块） */
.pxsw .pxswlb{display:flex;align-items:center;gap:8px;padding:0 12px 0 7px;
  font:800 10.5px/1 "SF Mono",Consolas,monospace;letter-spacing:.06em;
  color:rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.13);margin-right:2px;white-space:nowrap}
.pxsw .pxswlb::before{content:"";width:6px;height:6px;background:#FEDB00;flex:none}

/* ⚠️ font-size:0 让按钮里的方案名文本不显示（只留 <b> 金色编号）——
   方案名长的时候（如「大图压 150px 巨型序号」）整条会横到 1100px+、占掉大半屏。
   完整方案名保留在按钮的 title 属性里，鼠标停一下就有原生提示。 */
.pxsw button{appearance:none;display:inline-flex;align-items:baseline;gap:0;
  border:1px solid rgba(255,255,255,.15);background:transparent;color:rgba(255,255,255,.74);
  font:700 12.5px/1 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:0;letter-spacing:-.01em;padding:8px 11px;cursor:pointer;white-space:nowrap;border-radius:0;
  transition:background-color .15s,color .15s,border-color .15s}
/* 「原样」是纯文字按钮，不能吃掉字号 */
.pxsw button[data-pxv="orig"]{font-size:12.5px;padding:8px 12px}
.pxsw button b{font:800 11px/1 "SF Mono",Consolas,monospace;letter-spacing:.02em;color:#FEDB00}
.pxsw button:hover{background-color:rgba(255,255,255,.11);color:#fff;border-color:rgba(255,255,255,.3)}

/* 选中态：白底深字最清晰，且不抢金色（金只留给编号）
   ⚠️ 「原样」那条必须带 :not(.on)，否则特异性相同、写在后面会把选中态文字色覆盖成白底白字 */
.pxsw button[data-pxv="orig"]:not(.on){color:rgba(255,255,255,.6)}
.pxsw button.on{background-color:#fff;border-color:#fff;color:#15191A;font-weight:800}
.pxsw button.on b{color:#15191A}

/* 被替换掉的原 section */
section[data-pxid-hide]{display:none !important}

/* 窄屏：同样每段各钉一个，改成横向铺满、贴左右边（top 依旧由 JS 钳在段内）
   ⚠️ 必须 nowrap + 横向滚动：7 个按钮在 390px 下会折成 3 行、把 hero 压掉一半；
      单行横滑后整条只有 ~40px 高，遮不住内容。 */
@media (max-width:900px){
  .pxsw{left:8px;right:8px;max-width:none;justify-content:flex-start;z-index:9999;padding:5px 6px;gap:5px;
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pxsw::-webkit-scrollbar{display:none}
  .pxsw .pxswlb{display:none}
  .pxsw button{padding:7px 9px;font-size:12px;flex:0 0 auto}
}