/* Anshine 独立站前台样式 —— 工业品 B2B：白底、深灰、橙红强调 */
:root{
  --ink:#16181d; --ink-2:#3d4552; --ink-3:#6b7688; --line:#e3e7ee; --line-2:#eef1f6;
  --bg:#ffffff; --bg-soft:#f6f8fb; --bg-alt:#f0f3f8;
  --brand:#E2492B; --brand-dark:#B9371F; --brand-soft:#FDF1EE;
  --ok:#1d7a4c; --warn:#a35a00; --warn-bg:#FFF6E6; --warn-line:#F0D9A8;
  --radius:8px; --shadow:0 1px 3px rgba(20,25,40,.06),0 8px 24px rgba(20,25,40,.05);
  /* 吸顶高度基准（2026-10-29）：
     顶栏 .site-hd 是 sticky，高度随语言/屏宽变化（桌面 116px、手机 173px）。
     所有吸顶元素统一用 calc(var(--hd-h) + 12px)，别再写死 82/86/96px——
     写死的值比顶栏矮时，内容会被顶栏盖住看不见（浮动栏「主要特点」标题就是这么丢的）。
     默认值给桌面 116px；页面 JS 会用真实高度覆盖（见 site.js 的 setHdH）。 */
  --hd-h:116px; --stick-gap:12px;
  /* 版心（2026-10-25 改自适应）：
     ① --wrap 只做「超宽屏上限」，1440/1600/1920 这类常见电脑屏一律铺满，不再固定 1200；
     ② --pad 左右留白随屏宽浮动（20~56px），小屏不挤、大屏不空；
     ③ --rail 左侧产品导航宽度（216 → 190，把版面让给正文）。 */
  --wrap:1920px; --pad:clamp(20px,3.2vw,56px); --rail:190px; --rail-gap:26px;
  /* 全站字体（2026-10-25）：后台「设置 → ⓪-b 全站字体」一键切换。
     这里只是默认值；选中的方案会在 <head> 末尾用同样的 --font-sans 覆盖它。
     body 与标题都读这个变量，所以改一处 = 全站生效（18 个语种一起）。 */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei","Hiragino Sans GB",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-size:16px;line-height:1.65;font-family:var(--font-sans);color:var(--ink);background:var(--bg)}
/* 表单控件默认不继承 body 字体（浏览器给的是系统 UI 字体），
   不显式 inherit 的话「全站换字体」会在搜索框/下拉/按钮上露出原字体。 */
button,input,select,textarea{font-family:inherit}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dark);text-decoration:none}
a:hover{text-decoration:underline}
/* 键盘导航焦点可见（无障碍）：只用键盘时才显示轮廓，鼠标点击不显示 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:2.1rem}
h2{font-size:1.5rem}
h3{font-size:1.1rem}
p{margin:0 0 1em}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:var(--bg-soft);padding:.1em .4em;border-radius:4px}
/* 版心：宽度跟着浏览器走（不再固定 1200px），只有超宽屏才封顶 */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--ink-3)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.fr{float:right}
.mt{margin-top:2.5rem}
.nav-row>.nav>.btn-quote{float:none}
/* ---------- 顶栏 ---------- */
.topbar{background:var(--ink);color:#c9cfda;font-size:.85rem}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:8px var(--pad);min-height:38px}
.topbar a{color:#e7ebf2}
.tb-right{display:flex;align-items:center;gap:10px}
.tb-sep{opacity:.4}
.lang{position:relative}
.lang-btn{background:transparent;border:1px solid #3a4150;color:#dfe4ed;border-radius:6px;padding:3px 10px;font:inherit;font-size:.82rem;cursor:pointer}
.lang-list{display:none;position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow);list-style:none;margin:0;padding:6px;min-width:150px;z-index:50;max-height:72vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.lang-list a{display:block;padding:6px 10px;color:var(--ink);border-radius:4px;font-size:.88rem}
.lang-list a:hover{background:var(--bg-soft);text-decoration:none}
.lang-list a[aria-current]{color:var(--brand);font-weight:600}
/* 「更多语言」二级分组：主推 8 种平铺，其余收起来，点一下才展开 */
.lang-more{margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}
.lang-more-btn{display:flex;align-items:center;gap:6px;width:100%;padding:6px 10px;background:none;border:0;border-radius:4px;color:var(--ink-3);font:inherit;font-size:.85rem;cursor:pointer;text-align:left}
.lang-more-btn:hover{background:var(--bg-soft);color:var(--ink)}
.lang-more-n{display:inline-block;min-width:18px;padding:0 5px;background:var(--bg-soft);border-radius:9px;font-size:.72rem;text-align:center;color:var(--ink-3)}
.lang-more-btn[aria-expanded="true"] .lang-more-n{background:var(--brand);color:#fff}
.lang-sub{list-style:none;margin:2px 0 0;padding:0 0 0 8px;border-left:1px solid var(--line);margin-left:10px}
.lang-sub a{padding:5px 10px;font-size:.85rem}
.lang.open .lang-list{display:block}
.site-hd{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;gap:24px;padding:12px var(--pad);min-height:66px}
.logo{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.logo:hover{text-decoration:none}
.logo-mark{font-size:26px;color:var(--brand);line-height:1}
/* 上传了 Logo 就显示图片。高度写死 40px，避免上传大图把导航栏撑变形；
   宽度按原图比例自适应，并设上限防止超宽 Logo 挤掉右侧导航。 */
.logo-img{height:40px;width:auto;max-width:220px;object-fit:contain;display:block}
.logo-text strong{display:block;color:var(--ink);font-size:1.15rem;letter-spacing:-.02em}
.logo-text small{display:block;color:var(--ink-3);font-size:.72rem;max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nav>a{color:var(--ink-2);padding:8px 11px;border-radius:6px;font-size:.95rem;font-weight:500}
.nav>a:hover{background:var(--bg-soft);color:var(--ink);text-decoration:none}
.has-sub{position:relative}
/* 顶部导航文字改为常规深色，悬停才显品牌色（修复「产品」栏红色） */
.site-hd .nav > a:not(.btn),.site-hd .nav .has-sub > a{color:var(--ink-2)}
.site-hd .nav > a:not(.btn):hover,.site-hd .nav .has-sub > a:hover{color:var(--brand-dark);text-decoration:none}
.has-sub>.sub{display:none;position:absolute;left:0;top:100%;padding-top:10px;z-index:60}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{display:block}
.sub-grid{display:grid;grid-template-columns:repeat(3,minmax(210px,1fr));gap:2px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:8px}
.sub-grid a{display:block;padding:10px 12px;border-radius:6px;color:var(--ink)}
.sub-grid a:hover{background:var(--bg-soft);text-decoration:none}
.sub-grid strong{display:block;font-size:.92rem;font-weight:600;color:var(--ink)}
.sub-grid small{display:block;color:var(--ink-3);font-size:.78rem;line-height:1.4}
.sub-dot{display:inline-block;width:6px;height:6px;background:var(--ink-3);border-radius:50%;margin-right:6px;vertical-align:middle}
/* 顶部「产品」下拉：一级分组作列标题，二级类目列在下面（与左侧导航栏同一棵树） */
.sub-col{min-width:0;padding:4px 2px}
.sub-head{display:flex;align-items:center;gap:2px;padding:8px 10px;border-radius:6px}
.sub-head:hover{background:var(--bg-soft);text-decoration:none}
.sub-kids{list-style:none;margin:0 0 6px;padding:0 0 0 12px;border-left:2px solid var(--line)}
.sub-kids li a{display:block;padding:6px 10px;border-radius:6px;color:var(--ink-2);font-size:.85rem}
.sub-kids li a:hover{background:var(--bg-soft);color:var(--ink);text-decoration:none}
.sub-all{display:block;margin:6px 8px 0;padding:9px 6px 2px;border-top:1px solid var(--line);text-align:right;font-weight:600;font-size:.86rem;color:var(--ink-2)}
.sub-all:hover{color:var(--ink);text-decoration:none}
.nav-toggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--line);border-radius:6px;width:40px;height:36px;font-size:1.1rem;cursor:pointer}
/* ---------- 按钮 ---------- */
.btn{display:inline-block;padding:11px 20px;border-radius:6px;font-size:.94rem;font-weight:600;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s;text-align:center}
.btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);text-decoration:none}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink-3);text-decoration:none}
.btn-link{background:transparent;color:var(--brand-dark);padding-left:6px;padding-right:6px}
.btn-sm{padding:6px 12px;font-size:.84rem}
.btn-block{width:100%}
.nav .btn-quote{margin-left:8px;padding:9px 16px}
/* ---------- 区块 ---------- */
.sec{padding:56px var(--pad)}
/* 首页区块是「塞进左右两栏的右栏」里的，外层 (.layout-rail/.layout-solo) 已经留过左右白，
   这里再留一次会二次缩进：标题和卡片会比左栏边缘缩进 4-5cm，看起来像没对齐。
   所以栏内的区块只保留上下留白，左右交给外层。 */
.rail-main .sec,.doc-main .sec,.layout-solo .sec{padding-left:0;padding-right:0}
.sec-alt{background:var(--bg-soft)}
.sec-h{font-size:1.5rem;margin-bottom:.4em}
.sec-lead{color:var(--ink-2);max-width:820px}
.sec-tag-row{margin:2px 0 10px}
.sec-tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.05em;padding:3px 11px;border-radius:999px;line-height:1.7}
.sec-tag--guide{background:rgba(37,99,235,.10);color:#1d4ed8;border:1px solid rgba(37,99,235,.18)}
.sec-tag--case{background:rgba(194,32,32,.10);color:#b42318;border:1px solid rgba(194,32,32,.18)}
/* 徽章做成链接时（首页「选品指南 / 客户案例」）：加下划线与加深反馈，明确可点 */
.sec-tag--link{text-decoration:none;transition:background .15s,border-color .15s}
.sec-tag--link:hover{text-decoration:underline;background:rgba(37,99,235,.16);border-color:rgba(37,99,235,.34)}
.sec-tag--case.sec-tag--link:hover{background:rgba(194,32,32,.16);border-color:rgba(194,32,32,.34)}
.lead-lg{font-size:1.12rem;color:var(--ink-2)}
.page-h{font-size:2rem;margin-bottom:.3em}
.crumb{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 auto;padding:10px var(--pad);max-width:var(--wrap);font-size:.85rem;color:var(--ink-3)}
.crumb a{color:var(--ink-2)}
.crumb .sep{margin:0 6px;opacity:.5}
/* Hero */
.hero{background:linear-gradient(160deg,#FBFCFE 0%,#F2F5FA 100%);border-bottom:1px solid var(--line)}
.hero-inner{padding:72px var(--pad)}
.hero-kicker{color:var(--brand);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;margin-bottom:.6em}
.hero h1{font-size:2.7rem;max-width:900px}
.hero-sub{font-size:1.15rem;color:var(--ink-2);max-width:760px}
.hero-facts{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;padding:0;margin:36px 0 0;max-width:900px}
.hero-facts li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.hero-facts strong{display:block;font-size:1.3rem;color:var(--brand)}
.hero-facts span{font-size:.83rem;color:var(--ink-3)}
/* Categories */
/* 分类卡片：auto-fill + 272px 下限，与 prod-grid（产品卡）完全同参 —— 卡片尺寸与其他模块一致，
   宽屏约 5-6 列、1440 屏约 4 列；分类少时卡片不再拉伸铺满整行（2026-11-03 用户反馈改小）。 */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px;margin-top:24px}
.cat-card{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.cat-card:hover{border-color:var(--brand);box-shadow:var(--shadow);text-decoration:none}
.cat-name{font-weight:600;font-size:1.02rem}
.cat-desc{color:var(--ink-3);font-size:.88rem;flex:1}
.cat-count{font-size:.78rem;color:var(--brand);font-weight:600}
.cat-card__img{display:block;width:calc(100% + 36px);margin:-18px -18px 12px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius) var(--radius) 0 0;background:var(--bg-2)}
/* Products */
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px;margin-top:24px}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink)}
.pcard:hover{border-color:var(--brand);box-shadow:var(--shadow);text-decoration:none}
.pcard-img{position:relative;aspect-ratio:4/3;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pcard-img.img-fallback::after{content:"产品图片待补充";color:var(--ink-3);font-size:.82rem}
.pcard-img img{width:100%;height:100%;object-fit:cover}
.pcard-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard-name{font-size:.98rem;line-height:1.4}
.pcard-short{color:var(--ink-3);font-size:.84rem;flex:1}
.pcard-meta{font-size:.8rem;color:var(--brand);font-weight:600}
.tag-verify{position:absolute;left:8px;top:8px;background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);font-size:.72rem;padding:3px 8px;border-radius:4px;z-index:2}
/* Why / steps / solutions */
/* 「为什么选择我们」「应用场景」都是 4 张卡片：中等宽度排 2×2，超宽屏才排成一行 4 张。
   避免 auto-fit 在 3 列时把第 4 张挤到下一行、旁边空出 2/3 版面。 */
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
.why-card{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--radius);padding:20px}
.why-card__img{display:block;width:100%;height:150px;object-fit:cover;border-radius:8px;margin:0 0 14px}
.why-card h3{margin-bottom:.4em}
.why-card p{margin:0;color:var(--ink-2);font-size:.94rem}
/* 流程 5 步：始终一排 5 个（桌面/平板单行，手机单列） */
.steps{list-style:none;counter-reset:s;padding:0;margin:24px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.steps li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.step-n{display:inline-block;font-size:.8rem;font-weight:700;color:#fff;background:var(--brand);border-radius:4px;padding:2px 8px;margin-bottom:8px}
.step-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;margin:0 0 12px}
.steps p{margin:0;font-size:.9rem;color:var(--ink-2)}
.sol-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;margin-top:24px}
.sol-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;color:var(--ink)}
.sol-card:hover{border-color:var(--brand);text-decoration:none}
.sol-card span{color:var(--ink-3);font-size:.9rem}
.sol-card__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;margin:0 0 4px}
/* 新闻 / 技术文章 / 客户案例 列表卡片：此前 .post-grid / .post-card 完全没有 CSS，
   导致这些列表的封面图按原始尺寸撑满、文字无样式、整块排版垮掉（用户反馈「太大、不协调」）。
   这里补齐与产品卡同款的卡片样式，保证全站卡片视觉一致。 */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-top:8px}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.post-card:hover{border-color:var(--brand);box-shadow:var(--shadow);text-decoration:none}
.post-cover{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg)}
.post-cover img{display:block;width:100%;height:100%;object-fit:cover}
.post-card:hover .post-cover img{transform:scale(1.03);transition:transform .25s}
.post-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.post-date{font-size:.78rem;color:var(--ink-3);font-weight:500}
.post-card strong{font-size:1.02rem;line-height:1.4;color:var(--ink)}
.post-ex{font-size:.88rem;color:var(--ink-2);line-height:1.55}
.sol-grid-lg{display:grid;gap:26px;margin-top:24px}
.sol-item{border-left:3px solid var(--line);padding-left:20px}
.sol-item.has-img{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start;border-left:0;padding-left:0;border-bottom:1px solid var(--line);padding-bottom:22px}
.sol-item__imgw{display:block}
.sol-item__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.sol-item.has-img h2{margin-top:0}
/* 有图时：h2/p/产品标签必须钉在右列（col 2）——否则 auto-placement 会把简介
   排进 220px 的图片列，正文被挤成细窄条（2026-11-08 老板报障 /solutions/） */
.sol-item.has-img h2,.sol-item.has-img p,.sol-item.has-img .chip-list{grid-column:2}
/* 图片纵跨右列所有行：否则第一行高度被图片撑大，标题下留一大块空白，
   段落被顶到与图片底部对齐才开始（同一报障的红框空隙） */
.sol-item.has-img .sol-item__imgw{grid-row:1/span 3}
.sol-hero{display:block;width:100%;max-height:420px;object-fit:cover;border-radius:var(--radius);margin:6px 0 10px}
.sol-item h2 a{color:var(--ink)}
/* FAQ */
.faq-list{margin-top:20px;display:grid;gap:8px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.faq-item summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:.98rem;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--brand);font-weight:700;font-size:1.2rem;line-height:1;flex:0 0 auto}
.faq-item[open] summary::after{content:"–"}
.faq-item[open] summary{border-bottom:1px solid var(--line-2)}
.faq-answer{padding:14px 18px 18px;color:var(--ink-2);font-size:.94rem}
.faq-answer br+br{display:block;content:"";margin:.4em 0}
.faq-group{margin-bottom:32px}
/* Product detail —— 图片 + 视频区（阿里巴巴式排版）
   ① 主图区的比例 = 这张图片的**真实比例**（服务端读图算好，见 views-site.js aspectOf）
      → 图片是铺满的，框里不会出现上下/左右那条大白边（这就是之前看到的"空位"）
   ② 主图下面一排缩略图：4 张附图 + 1 个视频封面，格数由内联 --n 决定，不会多出空格子
   ③ 右栏（标题/参数/亮点）内容一字不动 */
/* padding-top 不再留白：让主图区、右侧标题的上边与左侧导航栏（cat-rail）上边齐平；
   2026-10-31 老板口径：主图「稍微小一点」，图片列从 1.35fr 收窄到 1.15fr，文字列更宽 */
.pdp-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;padding-top:0;align-items:start}
/* 既没有真实主图也没有视频 → 左栏整个撤掉，右栏占满一行，不留空白方块 */
.pdp-hero-nomedia{grid-template-columns:1fr}
.pdp-hero-nomedia .pdp-media{display:none}
/* 左栏跟随滚动：右栏更长时，图片区不会孤零零地留一大截空白在下面 */
.pdp-media{position:sticky;top:calc(var(--hd-h) + var(--stick-gap));z-index:30;min-width:0;display:flex;flex-direction:column;align-self:start}
/* 主图不要「框」（2026-10-31 老板口径）：去掉边框/白底/圆角，图片小了也不会显得填不满框；
   aspect-ratio 取图片真实比例（--ar 由模板内联写入），min/max-height 只兜极端比例 */
.pdp-img{position:relative;background:transparent;border:0;border-radius:0;overflow:hidden;display:block;aspect-ratio:var(--ar,1.333);min-height:260px;max-height:min(60vh,620px);width:100%;flex:0 0 auto}
.pdp-img img{width:100%;height:100%;object-fit:contain;display:block;border-radius:0}
/* 附图排：格数 = 实际有几格就分几列，永远填满整行 */
.pdp-thumbs{display:grid;gap:10px;margin-top:12px;flex:0 0 auto;grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
.pdp-tile{position:relative;aspect-ratio:1/1;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer;padding:0;display:block}
.pdp-tile img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-tile.on{border-color:var(--brand)}
.pdp-tile:hover{border-color:var(--brand)}
.pdp-tile:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* 视频封面格：附图排末尾的一格，画面取自视频片头一帧（见 site.js），
   不用后台上传封面图；点击后在**主图位置**放大播放 */
.pdp-tile-video{background:#0e1116;border-color:var(--ink-3)}
.pdp-tile-video .pdp-cover-vid{width:100%;height:100%;object-fit:cover;display:block;background:#0e1116;pointer-events:none}
/* 取帧失败时的兜底：退回到后台那张封面图，同样铺满格子 */
.pdp-tile-video .pdp-cover-fallback{width:100%;height:100%;object-fit:cover;display:block}
.pdp-tile-video .pdp-cover-img{width:100%;height:100%;object-fit:cover;display:block;background:#0e1116;pointer-events:none}
.pdp-tile-video:hover{border-color:var(--brand)}
.pdp-tile-video:hover .pdp-play{background:#fff;transform:translate(-50%,-50%) scale(1.08)}
.pdp-tile-video.on{border-color:var(--brand)}
.pdp-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.35);z-index:3;pointer-events:none}
.pdp-play::after{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);
  border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #0e1116}
/* 视频层：铺满整个主图区，点封面时接管主图位置做「放大播放」 */
.pdp-vid-layer{position:absolute;inset:0;z-index:4;background:#0e1116;display:flex;align-items:center;justify-content:center}
.pdp-vid-layer .media-el{width:100%;height:100%;object-fit:contain;display:block;background:#0e1116;border:0}
.pdp-vid-layer .vid-frame,.pdp-vid-layer iframe{width:100%;height:100%;border:0;display:block}
.pdp-vid-layer .media-empty{display:none}
/* 关键：凡带 display 的元素用 .hidden 切换显隐，都必须补这条，否则 hidden 失效 */
.pdp-vid-layer[hidden]{display:none !important}
.pdp-img.pdp-video-on{cursor:default}
.pdp-video-close{position:absolute;top:8px;right:8px;z-index:5;width:30px;height:30px;border:0;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.pdp-video-close:hover{background:rgba(0,0,0,.85)}
/* 视频文件缺失时的兜底提示：替代播不了的纯黑框 */
.vid-missing{margin:0;padding:22px 18px;background:#0e1116;color:#9aa3b2;font-size:.9rem;line-height:1.5;text-align:center;min-height:120px;display:flex;align-items:center;justify-content:center}
.pdp-img.pdp-zoomable{cursor:crosshair}
.pdp-lens{position:absolute;display:none;pointer-events:none;z-index:6;border:2px solid var(--brand);border-radius:5px;background:rgba(255,255,255,.22)}
.pdp-zoom{position:absolute;top:0;left:calc(100% + 18px);width:clamp(340px,38vw,540px);max-height:580px;background-color:#fff;background-repeat:no-repeat;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);z-index:60;display:none;pointer-events:none}
@media (max-width:1100px){.pdp-zoom,.pdp-lens{display:none !important}}
.pdp-main{min-width:0}
.pdp-lead{font-size:1.04rem;line-height:1.55;color:var(--ink-2);border-left:3px solid var(--brand);padding-left:14px;margin:14px 0 0}
/* 🔴 2026-11-02 老板口径：首屏参数速览固定 6 格、3 列 2 行排列，右下角不留空格。
   原来用 auto-fit，格数一多就排成 4+2 / 3+1，视觉上不齐。 */
.pdp-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:10px;margin:24px 0 0}
.pdp-quick div{background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:11px 13px;text-align:center;min-width:0}
.pdp-quick dt{font-size:.74rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;overflow-wrap:anywhere}
/* 值可能很长（如 "AC85-265V 50/60Hz"、"3-year battery, 5-year other parts"），
   超长时自动缩小字号并允许在连接符处断行，避免撑破格子。 */
.pdp-quick dd{margin:3px 0 0;font-weight:600;font-size:1.02rem;overflow-wrap:anywhere;word-break:break-word;line-height:1.3}
.pdp-quick dd.long{font-size:.9rem;letter-spacing:-.01em}

/* 验收 H1：长文案 / 长无空格串（型号、URL、证书号）防溢出撑破容器 */
.pdp-lead, .pdp-cols-main p, .pdp-cols-main li, .pdp-rail-feat-list li,
.spec-table td, .spec-table th, .pdp-rail-specs dd, .scene-item figcaption,
.trust-band li, .qa-a, .card-title, .prod-name-cell strong { overflow-wrap: anywhere; word-break: break-word; }

/* 两步验证（MFA）卡片 */
.mfa-card{margin-top:18px}
.mfa-card h3{margin:14px 0 4px;font-size:.95rem}
.mfa-steps{margin:8px 0 10px;padding-left:20px;color:var(--ink-2);font-size:.9rem;line-height:1.6}
.mfa-secret{margin:6px 0}
.mfa-secret code{font-size:1.05rem;letter-spacing:.04em}
.mfa-uri code{font-size:.82rem}
.recovery-codes{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px}
.recovery-codes code{background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:5px 9px;font-size:.95rem;letter-spacing:.06em}
/* 手机首屏参考价（桌面隐藏，避免与右侧浮动栏价格重复；仅手机端显示） */
.pdp-m-price{display:none}
@media (max-width:768px){
  .pdp-m-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:10px 0 2px;padding:10px 14px;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px}
  .pdp-m-price-lbl{font-size:.82rem;color:var(--ink-3)}
  .pdp-m-price strong{font-size:1.22rem;color:var(--brand-dark);font-weight:800;line-height:1}
  .pdp-m-price-note{font-size:.72rem;color:var(--ink-3);flex:1 1 100%;margin-top:2px}
}
/* 交货期卡片（2026-10-30）：产品页第一屏最显眼处，按订单数量分档。
   老板要求「显眼一点」——用品牌色描边 + 浅橙底 + 大号数值，与旁边的灰色参数卡明显区分。 */
.lead-card{margin:18px 0 0;border:1.5px solid var(--brand);border-radius:12px;background:var(--brand-soft);padding:14px 16px 13px;box-shadow:0 2px 10px rgba(226,73,43,.08)}
.lead-head{display:flex;align-items:baseline;gap:8px;margin:0 0 9px;padding-bottom:8px;border-bottom:1px solid rgba(226,73,43,.22)}
.lead-title{font-size:.86rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-dark)}
.lead-unit{font-size:.76rem;color:var(--brand-dark);opacity:.72;font-weight:600}
.lead-rows{display:grid;gap:0}
.lt-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px dashed rgba(226,73,43,.2)}
.lt-row:last-child{border-bottom:0}
.lt-model{border-bottom:1px solid rgba(226,73,43,.28);background:rgba(255,255,255,.55);border-radius:6px;padding:7px 9px;margin-bottom:2px}
.lt-scope{font-size:.92rem;color:var(--ink-2);font-weight:600}
.lt-val{font-weight:700;font-size:1.06rem;color:var(--brand-dark);white-space:nowrap}
.lead-hint{margin:9px 0 0;font-size:.78rem;color:var(--ink-3);line-height:1.5}
/* 产品视频：绑定且已填源才渲染，未绑定不留空位 */
.pdp-video{position:relative;aspect-ratio:16/9;max-width:900px;background:#0e1116;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pdp-video .media-el{width:100%;height:100%;object-fit:contain;display:block;background:#0e1116;border:0}
.pdp-video .media-empty{display:none}
.spec-table{width:100%;border-collapse:collapse;margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.spec-table th,.spec-table td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line-2);font-size:.92rem;vertical-align:middle}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{width:38%;color:var(--ink-3);font-weight:500;background:var(--bg-soft)}
.tick-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.tick-list li{position:relative;padding-left:26px;font-size:.95rem;color:var(--ink-2)}
.tick-list li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.tick-neg li::before{content:"!";color:var(--warn)}
.chip-list{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chip-list li{background:var(--bg-soft);border:1px solid var(--line);border-radius:100px;padding:5px 14px;font-size:.86rem}
.chip-list a{color:var(--ink-2)}
/* display:flow-root（2026-10-31）：正文容器必须「关住」内部浮动——
   老板报障：后台把图/文字浮动排版后，图比文字高时会伸出正文容器，
   把后面的「Downloads / 电池合规 / FAQ」等区块顶到图片旁边。
   flow-root 让容器高度包含浮动，后续区块永远从正文真正结束后开始排列。 */
.prose{max-width:820px;font-size:1rem;color:var(--ink-2);display:flow-root}
/* 详情页/分类页等内容栏（rail-main）比全宽页窄一截，且左有分类栏、右有客服预留位；
   这里若再卡 820px，正文右侧会空一大片（看着"窄且偏左"）。
   故放开内容栏内的 prose，让它填满栏宽；全宽页面的 prose 仍保持 820px 阅读宽度。 */
.rail-main .prose{max-width:none}
.notice-lang,.notice-verify{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);padding:10px var(--pad);font-size:.86rem}
.notice-verify{background:#FFF4F0;border-color:#F3C6B4;color:#93331A}
.price-note{font-size:.85rem;color:var(--ink-3);margin-top:12px}
/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;margin-top:28px;align-items:start}
.inq-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.form-row{margin-bottom:16px}
.form-row>label{display:block;font-size:.86rem;font-weight:600;margin-bottom:6px;color:var(--ink-2)}
.form-row input,.form-row select,.form-row textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:10px 12px;font:inherit;font-size:.95rem;background:#fff}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}
.form-row .hint{display:block;margin-top:5px;font-size:.78rem;color:var(--ink-3);font-weight:400}
.req{color:var(--brand)}
.form-consent label{display:flex;gap:8px;align-items:flex-start;font-size:.85rem;color:var(--ink-2);font-weight:400}
.form-consent input{margin-top:3px}
/* Cookie 同意横幅 */
.cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ink-1,#1d2530);color:#fff;box-shadow:0 -4px 18px rgba(0,0,0,.18)}
.cc-banner[hidden]{display:none}
.cc-inner{max-width:1180px;margin:0 auto;padding:14px 18px;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cc-text{font-size:.85rem;line-height:1.5;flex:1 1 320px}
.cc-text strong{display:block;font-size:.95rem;margin-bottom:2px}
.cc-text a{color:#fff;text-decoration:underline}
.cc-actions{display:flex;gap:10px;flex:0 0 auto}
.cc-btn{cursor:pointer;border:1px solid #fff;border-radius:8px;padding:9px 16px;font-size:.85rem;font-weight:600;background:transparent;color:#fff;transition:.15s}
.cc-btn:hover{opacity:.85}
.cc-accept{background:var(--brand,#e23b2e);border-color:var(--brand,#e23b2e);color:#fff}
.cc-reject{background:transparent}
.cc-settings{cursor:pointer}
@media(max-width:640px){.cc-inner{padding:12px 14px}
.cc-actions{width:100%}
.cc-btn{flex:1}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin:12px 0 0;font-size:.9rem;min-height:1.2em}
.form-msg.ok{color:var(--ok)}
.form-msg.bad{color:var(--brand)}
.contact-side{background:var(--bg-soft);border-radius:var(--radius);padding:22px}
.contact-side h2{font-size:1.05rem;margin-top:0}
.contact-side ul{list-style:none;padding:0;margin:0 0 22px;font-size:.9rem}
.contact-side li{padding:5px 0;border-bottom:1px solid var(--line-2);color:var(--ink-2)}
.contact-side li strong{display:inline-block;min-width:96px;color:var(--ink-3);font-weight:500}
.side-note{font-size:.84rem;color:var(--ink-3);margin:0}
/* 微信二维码块：联系页侧栏 + 全站页脚共用 */
.wx-qr{margin:22px 0 0;text-align:center}
.wx-qr img{width:140px;height:140px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#fff;padding:6px;display:inline-block}
.wx-qr-cap{margin:8px 0 0;font-size:.86rem;color:var(--ink-2)}
.search-form{display:flex;gap:10px;margin:24px 0}
.search-form input{flex:1;border:1px solid var(--line);border-radius:6px;padding:11px 14px;font:inherit}
/* CTA band */
.cta-band{background:var(--ink);color:#fff;margin-top:56px}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:44px var(--pad);flex-wrap:wrap}
.cta-inner h2{color:#fff;margin-bottom:.3em}
.cta-inner p{color:#b9c1cf;margin:0;max-width:560px}
.cta-bar{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.cta-inner .btn-link{color:#dfe4ed}
/* Footer */
.site-ft{background:#12141a;color:#a7b0bf;font-size:.9rem;margin-top:0}
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:32px;padding:48px var(--pad)}
.ft-col h4{color:#fff;font-size:.92rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
.ft-col ul{list-style:none;padding:0;margin:0}
.ft-col li{padding:4px 0}
.ft-col a{color:#a7b0bf}
.ft-col a:hover{color:#fff}
.cat-sub-h{font-size:1.15rem}
.idx-group{margin-bottom:8px}
.ft-logo{color:#fff;font-size:1.05rem;display:block;margin-bottom:12px}
.ft-brand p{color:#8b95a5;max-width:340px;font-size:.88rem}
.ft-social{display:flex;gap:12px}
/* 页脚 Follow Us 列：图标 + 文字，两列网格排布 */
.ft-social-col{flex-direction:column;gap:9px}
.ft-social-col li{padding:2px 0}
.ft-follow .ft-social-col a{font-size:.88rem}
.ft-muted{color:#7c8595}
.ft-bottom{border-top:1px solid #23262e;padding:18px var(--pad);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem}
.ft-copy{margin:0;color:#7c8595}
.ft-copy .ft-note,.ft-copy .ft-icp{display:block;margin-top:4px}
.ft-legal{margin:0}
.ft-legal a{color:#7c8595}
/* 响应式 */
@media (max-width:1024px){
  .pdp-hero{grid-template-columns:1fr;gap:28px}
  .pdp-media{position:static}          /* 单列时不跟随滚动 */
  .contact-grid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
  .sub-grid{grid-template-columns:1fr 1fr}
  /* 平板/手机：标题+价格(桌面栏在上方)+参数速览 提到主图之前，首屏不滚动即可见核心参数 */
  .pdp-hero{display:flex;flex-direction:column;gap:16px}
  .pdp-hero .pdp-media{order:2}
  .pdp-hero .pdp-main{order:1;margin-top:0}
}
@media (max-width:768px){h1{font-size:1.7rem}
.hero h1{font-size:1.9rem}
.hero-inner{padding:48px 20px}
.nav-toggle{display:block}
.nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:12px 20px;gap:2px;box-shadow:var(--shadow)}
.nav.open{display:flex}
.nav>a{padding:10px 0;border-bottom:1px solid var(--line-2)}
.has-sub>.sub{position:static;padding-top:0;display:none}
.has-sub:hover>.sub{display:none}
.sub-grid{grid-template-columns:1fr;border:0;box-shadow:none;padding:4px 0}
.logo-text small{display:none}
.cta-inner{flex-direction:column;align-items:flex-start}
.ft-grid{grid-template-columns:1fr}
/* 6 格速览：平板 2 列（3 行），手机 1 列（6 行），始终排满不留空格 */
.pdp-quick{grid-template-columns:repeat(2,minmax(0,1fr))}
.spec-table th{width:45%}
}
@media (max-width:420px){.pdp-quick{grid-template-columns:1fr}}
/* ============================================================
   新增：首屏轮播 / 视频 / 图廊 / 新闻资讯 / 文档下载 / 门控表单
   ============================================================ */

/* ---------- 首屏（带背景媒体） ---------- */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28;z-index:0}
.hero-inner{position:relative;z-index:1}
.hero-hasmedia .hero-inner{background:rgba(255,255,255,.55)}
/* ---------- 首屏轮播 ---------- */
.hero-slider{position:relative;background:#10131a;overflow:hidden}
.hero-slider .slides{position:relative;height:520px}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.slide.is-active{opacity:1;pointer-events:auto}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,13,20,.55) 0%,rgba(10,13,20,.30) 45%,rgba(10,13,20,.72) 100%)}
.slide-inner{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) 40px;color:#fff}
.slide-title{font-size:1.7rem;max-width:820px;margin-bottom:.35em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.slide-sub{max-width:700px;color:#e6eaf2;font-size:1.02rem;margin-bottom:1.2em}
.sl-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(15,18,25,.35);color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:3}
.sl-btn:hover{background:rgba(15,18,25,.65)}
.sl-prev{left:16px}
.sl-next{right:16px}
.sl-dots{position:absolute;bottom:26px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:3}
.sl-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0}
.sl-dots button.on{background:var(--brand);width:26px;border-radius:5px}
/* ---------- 导航栏搜索框（替代原本压在大图上的 .hero-search） ---------- */
.nav-search{display:flex;align-items:center;flex:0 0 auto;margin-left:18px;width:200px;background:#fff;border:1px solid var(--line);border-radius:999px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.nav-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.nav-search-input{flex:1;min-width:0;border:0;outline:0;padding:0 14px;height:38px;font-size:.9rem;color:var(--ink-2);background:transparent}
.nav-search-input::placeholder{color:#9aa0ad}
.nav-search-input::-webkit-search-cancel-button{display:none}
.nav-search-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;background:transparent;color:var(--brand);cursor:pointer}
.nav-search-btn:hover{color:var(--brand-dark)}
.nav-search-btn svg{display:block}
@media (max-width:768px){.nav-search{order:9;flex:1 1 100%;width:auto;margin:10px 0 0}.nav-row{flex-wrap:wrap;gap:12px}}
/* ---------- 认证信任条 ---------- */
.trust-band{background:var(--bg-alt);border-bottom:1px solid var(--line)}
.trust-inner{padding:18px var(--pad)}
.cert-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0 0 8px}
.cert-chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-size:.82rem;color:var(--ink-2);font-weight:500}
.trust-note{margin:0;font-size:.78rem;color:var(--ink-3);max-width:900px}
/* ---------- 视频 ---------- */
.vid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;margin-top:24px}
.vid-grid-lg{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.vid-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.vid-media{position:relative;aspect-ratio:16/9;background:#0e1116;overflow:hidden}
.vid-el,.vid-media video,.vid-media img{width:100%;height:100%;object-fit:cover}
.vid-frame{position:relative;width:100%;height:100%}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-pending{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.65);color:#fff;font-size:.72rem;padding:4px 9px;border-radius:4px}
.vid-body{padding:16px 18px}
.vid-body h3{font-size:1rem;margin-bottom:.3em}
.vid-body p{font-size:.88rem;color:var(--ink-2);margin:0}
.vid-dur{color:var(--ink-3);font-size:.8rem;margin-top:.5em}
/* 列表卡片播放按钮（封面图懒加载，点击才弹窗播放真视频） */
.vid-play{position:relative;display:block;width:100%;height:100%;border:0;padding:0;background:#0e1116;cursor:pointer}
.vid-play-ico{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;background:rgba(20,25,40,.6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:4px;transition:transform .15s ease,background .15s ease}
.vid-play:hover .vid-play-ico{transform:scale(1.08);background:rgba(20,25,40,.85)}
/* 视频弹窗 */
/* 视频卡片：点击播放 → 在卡片封面位置原地展开播放器（不弹窗） */
.vid-media.is-playing .vid-play{display:none}
.vid-play[hidden]{display:none}
.vid-inline-wrap{position:absolute;inset:0;z-index:2;background:#000}
/* 特异性要压过上面的 .vid-media video（否则被 object-fit:cover 裁掉竖屏画面） */
.vid-media .vid-inline{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.vid-inline-x{position:absolute;top:8px;right:8px;z-index:3;width:34px;height:34px;border:0;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}
.vid-inline-x:hover,.vid-inline-x:focus-visible{background:rgba(0,0,0,.9)}
/* 兜底弹窗（仅在卡片结构异常、无法原地播放时使用）：必须 fixed 居中。
   曾经写成 position:relative，结果弹窗排在 <body> 末尾、被遮罩盖住 → 视频跑到页面最下面且发灰。 */
.vid-modal-mask{position:fixed;inset:0;background:rgba(10,13,20,.82);z-index:90;display:flex;align-items:center;justify-content:center;padding:24px}
.vid-modal-mask[hidden]{display:none}
.vid-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:91;width:min(960px,92vw);background:#000;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.vid-modal[hidden]{display:none}
.vid-modal-inner{position:relative;width:100%}
.vid-modal video{width:100%;display:block;background:#000;max-height:82vh}
.vid-modal-x{position:absolute;top:8px;right:8px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.vid-modal-x:hover{background:rgba(0,0,0,.85)}
/* ---------- 图廊 ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:20px}
.gal-item{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);background:var(--bg)}
.gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.gal-item:hover img{transform:scale(1.04)}
/* ---------- 新闻 / 资讯 ---------- */
.news-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:24px}
.col-h{font-size:1rem;padding-bottom:.5em;border-bottom:2px solid var(--brand);margin-bottom:1em}
.col-h a{color:var(--ink)}
.post-row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2);color:var(--ink)}
.post-row:hover{text-decoration:none}
.post-row:hover strong{color:var(--brand-dark)}
.post-thumb{flex:0 0 84px;width:84px;height:64px;border-radius:6px;overflow:hidden;background:var(--bg)}
.post-thumb img{width:100%;height:100%;object-fit:cover}
.post-body{display:block;min-width:0}
.post-date{display:block;font-size:.76rem;color:var(--ink-3);margin-bottom:2px}
.post-body strong{display:block;font-size:.98rem;line-height:1.4;color:var(--ink)}
.post-ex{display:block;font-size:.84rem;color:var(--ink-3);margin-top:3px}
/* 2026-11-08：auto-fit 在内容少时折叠空轨道——只有 2 篇文章时 4 轨道塌成 2 条，
   每卡霸占半屏宽（老板报障「大的没法看」）。统一 auto-fill：空轨道保留，卡片恒定 280px 档。 */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin-top:24px}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;color:var(--ink)}
.post-card:hover{text-decoration:none;border-color:var(--brand)}
.post-cover{display:block;aspect-ratio:16/9;background:var(--bg);overflow:hidden}
.post-cover img{width:100%;height:100%;object-fit:cover}
.post-card .post-body{padding:16px 18px}
/* 资讯页分类筛选标签（合并原独立「公司新闻」页：公司新闻只是 news 的一个分类） */
.post-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.post-tab{display:inline-block;padding:7px 15px;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);font-size:.86rem;font-weight:500;background:#fff;line-height:1.2}
.post-tab:hover{text-decoration:none;border-color:var(--brand);color:var(--brand)}
.post-tab.active{background:var(--brand);border-color:var(--brand);color:#fff}
/* ---------- 文档下载 ---------- */
.doc-rail{position:sticky;top:calc(var(--hd-h) + var(--stick-gap));align-self:start;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px 14px;max-height:calc(100vh - var(--hd-h) - 2*var(--stick-gap));overflow:auto}
.doc-rail .rail-h{font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.doc-rail .rail-list{list-style:none;margin:0;padding:0}
.doc-rail .rail-item{margin-bottom:2px}
.doc-rail .rail-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;color:var(--ink-2);font-size:.9rem;font-weight:500}
.doc-rail .rail-top:hover{background:#fff;color:var(--ink);text-decoration:none}
.doc-rail .rail-sub li a{display:block;padding:5px 10px;font-size:.83rem;color:var(--ink-3);border-radius:5px}
/* 子项也走「名称 | 计数」两端对齐（上面 display:block 会盖掉 .rail-top 的 flex，这里抬回优先级） */
.doc-rail .rail-sub li .rail-row .rail-top{display:flex;justify-content:space-between}
.doc-rail .rail-sub li a:hover{background:#fff;color:var(--ink);text-decoration:none}
.doc-rail .rail-count{font-size:.72rem;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:20px;padding:0 7px;flex:0 0 auto}
/* —— 分类树（2026-10-30：与后台一样的分级 + 可折叠）——
   服务端按 parent 渲染嵌套 .rail-sub；默认整支收起，点箭头展开/收起，
   当前选中的分支由 site.js initDocFold 自动展开（自动折叠，桌面 / 手机同一行为）。 */
.doc-rail .rail-row{display:flex;align-items:center;gap:2px;min-width:0}
.doc-rail .rail-row .rail-top{flex:1;min-width:0}
.doc-rail .rail-caret{background:none;border:0;cursor:pointer;font:inherit;font-size:.72rem;line-height:1;color:var(--ink-3);width:16px;height:26px;flex:0 0 16px;text-align:center;padding:0}
.doc-rail .rail-caret:hover{color:var(--ink)}
.doc-rail .rail-sub{display:none;list-style:none;margin:2px 0 6px;padding:2px 0 2px 10px;border-left:2px solid var(--line)}
.doc-rail .rail-item.open > .rail-sub{display:block}
.doc-rail .rail-item.open > .rail-row .rail-caret{color:var(--ink)}
/* （2026-10-31）「📁 选」弹窗样式已搬去 admin.css：弹窗只在后台出现，
   而后台不加载 site.css —— 放这里等于没写，曾导致按钮点了没反应。 */
/* 右侧主内容区：作为 .layout-rail 的单个网格单元，min-width:0 防止内部网格溢出 */
.doc-main{min-width:0}
/* 当前分类标题：与媒体库主区一致，点文件夹后顶部显示“分类名 (数量)” */
.doc-cat-h{font-size:1.02rem;margin:0 0 4px;display:flex;align-items:baseline;gap:8px}
.doc-cat-n{font-size:.82rem;font-weight:500;color:var(--ink-3)}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:20px}
/* 超宽屏时锁定为每行最多 6 个，符合“每行 4-6 个”的要求 */
@media (min-width:1600px){.doc-grid{grid-template-columns:repeat(6,1fr)}}
.doc-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column}
.doc-card.is-gated{border-left:3px solid var(--brand)}
.doc-ext{display:inline-block;align-self:flex-start;background:var(--bg-soft);border:1px solid var(--line);color:var(--ink-2);font-size:.72rem;font-weight:700;letter-spacing:.06em;padding:3px 9px;border-radius:4px;margin-bottom:8px}
.doc-ext-lg{font-size:.85rem;padding:6px 12px}
.doc-card h3{font-size:.92rem;margin-bottom:.25em}
.doc-card p{font-size:.8rem;color:var(--ink-2)}
.doc-meta{margin:0 0 14px;font-size:.8rem;color:var(--ink-3)}
.tag-lock,.tag-open{display:inline-block;font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:4px}
.tag-lock{background:var(--brand-soft);color:var(--brand-dark)}
.tag-open{background:#EAF6EF;color:var(--ok)}
.tag-cat{background:#EEF1F6;color:#54607a}
.doc-card .btn{margin-top:auto}
/* ---------- 门控下载页 ---------- */
.gate-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:16px}
.gate-doc h1{font-size:1.7rem}
.gate-note{font-size:.85rem;color:var(--ink-3);background:var(--bg-soft);border-left:3px solid var(--line);padding:10px 14px}
.gate-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.gate-form h2{font-size:1.1rem;margin-bottom:1em}
.gate-ready{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.ok-line{color:var(--ok);font-weight:600;margin-bottom:.8em}
/* ---------- 文章页 ---------- */
.article{max-width:820px}
/* 2026-11-08：带「左封面右正文」双栏的文章容器要更宽——820px 的单栏阅读限宽
   会把右栏正文挤成 ~390px 细条、大屏两侧大片留白（老板报障 /insights/ /news/）。
   :has() 现代浏览器全支持；不支持的老浏览器回落 820px 单栏视觉，不破。 */
.article:has(.art-layout){max-width:1240px}
.article .page-h{margin-bottom:.2em}
.art-meta{color:var(--ink-3);font-size:.85rem}
.art-cover{margin:18px 0 24px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
/* 2026-11-08：不再强制 16:9 裁切——证书/文件类竖横图会被切边、占屏巨大。
   改为原始比例、限高、居中，任何封面完整可见。 */
.art-cover img{display:block;width:auto;height:auto;max-width:100%;max-height:540px;margin:0 auto}
/* 2026-11-08 资讯/案例详情：左封面 + 右正文双栏，消除大屏两侧留白 */
.art-layout{display:grid;grid-template-columns:minmax(260px,400px) minmax(0,1fr);gap:32px;align-items:start;margin:20px 0 10px}
.art-layout .art-cover{margin:0;position:sticky;top:calc(var(--hd-h) + var(--stick-gap) + 10px)}
.art-layout .art-cover img{max-height:min(540px,68vh)}
.art-main{min-width:0}
.art-main .art-lead{margin-top:0}
@media(max-width:900px){
  .art-layout{grid-template-columns:1fr;gap:14px}
  .art-layout .art-cover{position:static}
  .art-layout .art-cover img{max-height:440px}
}
/* 客户案例详情 */
.case-metric{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);padding:16px 22px;margin:0 0 22px}
.case-metric strong{font-size:1.7rem;color:var(--brand);line-height:1}
.case-metric span{color:var(--ink-2);font-size:.95rem}
.case-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:26px 0}
.case-gallery img{width:100%;border-radius:10px;object-fit:cover;max-height:360px}
.art-lead{font-size:1.08rem;color:var(--ink-2);border-left:3px solid var(--brand);padding-left:14px;margin-bottom:1.6em}
.prose h2{font-size:1.25rem;margin-top:1.8em}
.prose h3{font-size:1.05rem;margin-top:1.4em}
.prose-list{padding-left:1.2em;margin:0 0 1em}
.prose-list li{margin-bottom:.4em;color:var(--ink-2)}
/* ---------- 占位与空态 ---------- */
.media-empty,.img-missing{display:flex;align-items:center;justify-content:center;min-height:120px;background:repeating-linear-gradient(45deg,#f2f5fa,#f2f5fa 10px,#e9edf4 10px,#e9edf4 20px);color:#9aa4b4;font-size:.8rem}
img.img-missing{width:100%;min-height:180px;object-fit:none}
.media-empty span{padding:8px 14px}
.empty-state{background:var(--bg-soft);border:1px dashed var(--line);border-radius:var(--radius);padding:28px;text-align:center}
@media (max-width:1024px){.hero-slider .slides{height:440px}
.news-split{grid-template-columns:1fr;gap:28px}
.gate-grid{grid-template-columns:1fr;gap:28px}

}
@media (max-width:768px){.hero-slider .slides{height:auto}
/* 手机端轮播收矮贴合媒体比例（2026-11-04 老板需求）：媒体按自身比例显示（零黑边零裁剪），
   由绝对堆叠改为单张流式显示，文字正常接在媒体下面，整卡高度自适应 */
.slide{position:relative;inset:auto;display:none;opacity:1;transition:none;pointer-events:auto}
.slide.is-active{display:block;animation:sliceFadeIn .4s ease}
@keyframes sliceFadeIn{from{opacity:0}to{opacity:1}}
.hero-slider .hero-media{position:static;display:block;width:100%;height:auto;object-fit:contain;transform:none!important;animation:none!important}
.slide-inner{position:static;padding:16px 20px 58px}
.slide-title{font-size:1.5rem;margin-bottom:.3em}
.slide-sub{font-size:.92rem;margin-bottom:1em}
.sl-btn{width:34px;height:34px;font-size:20px;opacity:.55;top:50%;transform:translateY(-50%);bottom:auto}
.sl-dots{bottom:20px}
.vid-grid,.vid-grid-lg,.post-grid,.doc-grid{grid-template-columns:1fr}

}
/* ---------- 左侧产品导航栏 ---------- */
/* 左栏宽度（216→190）+ 间距（40→26），把空间让给正文；
   自带 max-width/margin:auto —— 这样即使页面没套 .wrap，也不会横着铺满整个屏幕。 */
.layout-rail{display:block;padding:36px var(--pad) 8px;width:100%;max-width:var(--wrap);margin:0 auto}
/* 小笔记本档位（1101-1320px）：左栏再收窄一档 */
@media (min-width:1101px) and (max-width:1320px){
  .layout-rail{grid-template-columns:176px minmax(0,1fr);gap:22px}
}
.layout-solo{padding:36px var(--pad) 8px;width:100%;max-width:var(--wrap);margin:0 auto}
/* 左侧产品分类导航：贴左缘吸顶的折叠条
   默认只显示竖排「PRODUCT CATEGORIES」标签；鼠标移入自动展开分类树，移开缩回；
   点击标签钉住 / 再点收起（与右侧 .fb-btn 悬浮按钮一致的悬浮体感）。 */
.cat-rail{
  position:fixed;left:0;top:calc(var(--hd-h) + var(--stick-gap) + 6px);z-index:39;
  width:50px;
}
.rail-toggle{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:50px;min-height:200px;padding:22px 7px;margin:0;
  writing-mode:vertical-rl;
  background:#fff;border:1px solid var(--line);border-left:0;border-radius:0 14px 14px 0;
  box-shadow:var(--shadow);font:inherit;font-weight:600;font-size:1rem;letter-spacing:.08em;
  color:var(--ink);cursor:pointer;
}
.rail-toggle:hover{color:var(--brand-dark);background:var(--bg-soft)}
.rail-toggle .rail-caret{margin-top:8px;font-size:.8em;transition:transform .2s ease}
.cat-rail.pinned .rail-caret{transform:rotate(180deg)}
.rail-h{display:none}
/* 展开面板：从竖排标签右侧浮出，不挤占正文宽度 */
.rail-panel{
  display:none;position:absolute;left:100%;top:0;z-index:45;
  width:280px;max-width:calc(100vw - 74px);max-height:74vh;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:12px 14px;
}
.cat-rail:hover .rail-panel,.cat-rail.pinned .rail-panel{display:block}
/* 压制后台自定义模块内联的旧版左栏 CSS（该模块把 rail-toggle/rail-list/rail-card 全部
   display:none、把 .cat-rail 改 absolute 56px，与本版 fixed 折叠栏叠加后变成 56px 空壳，
   左栏因此"消失"。内联样式在文档靠后且同特异性会胜出，只能用 !important 反压制。） */
.cat-rail{position:fixed!important;left:0!important;top:calc(var(--hd-h) + var(--stick-gap) + 6px)!important;width:50px!important;padding:0!important;overflow:visible!important}
/* 桌面端主内容给贴左缘的折叠栏（50px）让位：正文左内边距加宽 62px（栏宽+12px 间隙），
   通栏区块（Hero/认证条/CTA）背景仍全幅，只收窄内部 .wrap 内容。 */
@media (min-width:980px){
  main .wrap{padding-left:calc(var(--pad) + 62px)}
}
.cat-rail .rail-h{display:none!important}
.cat-rail .rail-toggle{display:flex!important}
.cat-rail .rail-list{display:block!important}
.cat-rail .rail-card{display:block!important}
.rail-list{list-style:none;margin:0;padding:0}
.rail-item{margin-bottom:2px}
.rail-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;color:var(--ink-2);font-size:.9rem;font-weight:500}
.rail-top:hover{background:var(--bg-soft);color:var(--ink);text-decoration:none}
.rail-item.open>.rail-top,.rail-top[aria-current="page"]{background:var(--bg-soft);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
.rail-count{font-size:.72rem;color:var(--ink-3);background:#fff;border:1px solid var(--line);border-radius:20px;padding:0 7px;flex:0 0 auto}
.rail-sub{list-style:none;margin:4px 0 8px;padding:0 0 0 10px;border-left:2px solid var(--line)}
.rail-sub li a{display:block;padding:5px 10px;font-size:.83rem;color:var(--ink-3);border-radius:5px}
.rail-sub li a:hover{background:var(--bg-soft);color:var(--ink);text-decoration:none}
.rail-sub a[aria-current="page"]{color:var(--ink);font-weight:600}
/* 二级类目：比三级产品链接更醒目一级 */
.rail-sub .rail-sub-link{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;font-size:.85rem;color:var(--ink-2);border-radius:5px}
.rail-sub .rail-sub-link:hover{background:var(--bg-soft);color:var(--ink);text-decoration:none}
.rail-sub .rail-sub-link[aria-current="page"]{color:var(--ink);font-weight:600}
.rail-sub.rail-l3{margin:2px 0 6px;padding-left:10px;border-left:2px solid var(--line-2)}
/* 桌面端：左侧导航默认只显示一级，点击一级才展开其二级/三级（手风琴） */
@media (min-width:601px){
  .cat-rail .rail-sub{display:none}
  .cat-rail .rail-item.open > .rail-sub{display:block}
}
.rail-l3 li a{font-size:.8rem;color:var(--ink-3)}
.rail-card{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.rail-card h3{font-size:.92rem;margin-bottom:6px}
.rail-card p{font-size:.82rem;color:var(--ink-3);margin-bottom:10px}
.rail-mail{display:block;margin-top:10px;font-size:.8rem;word-break:break-all}
/* ---------- 全站浮动客服栏 ---------- */
.float-bar{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px}
.fb-quick{display:flex;flex-direction:column;gap:8px}
.fb-btn,.fb-toggle{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink-2);cursor:pointer}
.fb-btn svg{width:24px;height:24px}
.fb-btn:hover{color:var(--brand);border-color:var(--brand);text-decoration:none}
/* 品牌官方色：一眼就能认出是哪家（企业微信官方蓝 #2E7DE0 / WhatsApp 官方绿 #25D366） */
.fb-wa{color:#25d366}
.fb-wx{color:#2e7de0}
.fb-wx:hover{color:#2e7de0;border-color:#2e7de0}
/* 在线客服：在线时整颗变绿 + 右上角绿点呼吸，离线（或还没探测到）灰掉。
   状态由 lib/chat.js 定期调 Tawk_API.getStatus() 后打 is-online / is-offline 类。 */
.fb-chat{position:relative;transition:color .2s,border-color .2s}
.fb-chat.is-online{color:#16a34a;border-color:#86efac}
.fb-chat.is-offline{color:#9aa4b2;border-color:var(--line)}
.fb-chat::after{
  content:'';position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-radius:50%;
  background:#c8ced8;border:2px solid #fff;box-sizing:content-box;
}
.fb-chat.is-online::after{background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:fbPulse 2s infinite}
@keyframes fbPulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}
  70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
@media (prefers-reduced-motion:reduce){.fb-chat.is-online::after{animation:none}}
/* 只在手机那一排出现的按钮（购物车 / 在线客服）：桌面不渲染出来。
   .fb-btn 本身 display:flex，所以要靠更高特异性盖掉 */
.float-bar .fb-mobonly{display:none}
/* 手机排里的购物车圆钮：带件数角标（原来的 .cart-fab 已废弃） */
.fb-cart{position:relative}
.fb-cart .cf-count{position:absolute;top:-3px;right:-3px;background:var(--brand);color:#fff;border:2px solid #fff;border-radius:999px;min-width:18px;height:18px;padding:0 4px;font-size:.66rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center}
.fb-cart .cf-count[hidden]{display:none}
/* 微信弹窗：点击微信图标后展示微信号，可复制 */
.fb-wx-pop{position:absolute;right:62px;top:0;width:236px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:12px 14px;z-index:62}
.fb-wx-pop[hidden]{display:none}
.wx-pop-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.wx-pop-head strong{font-size:.95rem;color:var(--ink)}
.wx-pop-x{background:transparent;border:0;cursor:pointer;color:var(--ink-3);font-size:1.05rem;line-height:1;padding:2px 4px}
.wx-pop-x:hover{color:var(--ink)}
.wx-pop-sub{font-size:.78rem;color:var(--ink-3);margin:0 0 8px}
.wx-pop-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.wx-pop-list li{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.wx-id{font-size:.84rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-copy{border:1px solid var(--brand);background:#fff;color:var(--brand-dark);border-radius:6px;padding:4px 10px;font-size:.78rem;cursor:pointer;flex:0 0 auto}
.wx-copy:hover{background:var(--brand);color:#fff}
/* 微信二维码：点击微信图标直接弹出，可扫码添加 */
.wx-qr{text-align:center;margin:4px 0 10px}
.wx-qr-img{width:200px;height:200px;max-width:100%;border-radius:8px;border:1px solid var(--line);object-fit:contain;background:#fff}
.wx-qr-cap{font-size:.82rem;color:var(--ink);margin:6px 0 0;font-weight:600}
/* WhatsApp 二维码弹窗：点击 WhatsApp 图标直接弹出，可扫码/复制号码 */
.fb-wa-pop{position:absolute;right:62px;top:0;width:236px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:12px 14px;z-index:62}
.fb-wa-pop[hidden]{display:none}
.wa-pop-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.wa-pop-list li{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:10px 8px}
.wa-qr-img{width:160px;height:160px;max-width:100%;border-radius:8px;border:1px solid var(--line);object-fit:contain;background:#fff}
.wa-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.wa-num{font-size:.84rem;font-weight:600;color:#1d7a4c;text-decoration:none;word-break:break-all}
.wa-num:hover{text-decoration:underline}
.fb-toggle{background:var(--brand);color:#fff;border-color:var(--brand);width:56px;height:56px;flex-direction:column;gap:1px;padding:0}
.fb-toggle:hover{background:var(--brand-dark)}
.fb-toggle svg{width:22px;height:22px}
/* 桌面的「询价」是 56px 圆 + 两行文字，塞个图标会挤成一团（截图实测确实挤）；
   桌面只留文字，手机那一排没有文字、靠图标说话，所以在下面的媒体查询里再放出来。 */
.fb-toggle svg{display:none}
.fb-label{font-size:.55rem;font-weight:700;line-height:1.05;text-align:center;padding:0 3px;letter-spacing:.01em}
.float-mask{position:fixed;inset:0;background:rgba(15,20,30,.38);z-index:65}
.float-panel{position:fixed;right:0;top:0;bottom:0;width:384px;max-width:92vw;background:#fff;z-index:70;box-shadow:-8px 0 32px rgba(20,25,40,.16);overflow-y:auto;padding:20px 20px 32px;transform:translateX(102%);transition:transform .22s ease}
.float-panel.open{transform:translateX(0)}
.float-panel[hidden],.float-mask[hidden]{display:none}
.fp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.fp-head strong{font-size:1.05rem}
.fp-close{background:transparent;border:1px solid var(--line);border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer}
.fp-close svg{width:18px;height:18px}
.fp-sub{font-size:.85rem;color:var(--ink-3);margin-bottom:16px}
/* 询价抽屉顶部的「直接联系」快捷行：只在手机上出现（底部那排固定 7 个，邮件放不进去）。
   邮件按钮带预填主题，点开就是写好的邮件。 */
.fp-quick{display:none}
@media (max-width:768px){.fp-quick{display:flex;gap:8px;margin:-6px 0 14px}
.fp-quick .fpq{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
    padding:9px 4px;border:1px solid var(--line);border-radius:9px;background:#fff;
    font-size:.78rem;font-weight:600;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.fp-quick .fpq svg{width:18px;height:18px;flex:0 0 auto}
.fp-quick .fpq:active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}

}
.fp-form{background:transparent;border:0;padding:0}
.fp-form .form-row{margin-bottom:12px}
.fp-done{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.fp-done p{font-size:.9rem;color:var(--ink-2)}
.fp-done .ok-line{color:var(--ok);font-weight:600}
body.fp-open{overflow:hidden}
@media (max-width:1100px){.layout-rail{padding-top:24px}}
@media (max-width:768px){/* 手机：底部一排 7 个圆钮 —— 购物车 · 微信 · WhatsApp · **AI** · 电话 · 询价 · 在线客服。
     整排贴底居中、等大（AI 正中且放大）；原来的 .cart-fab 圆钮已并入这一排，
     Tawk 原生气泡在手机上由脚本 hideWidget() 收掉（见 lib/chat.js），
     所以这里不再需要给客服气泡让出 bottom 空间。 */
  .float-bar{
    top:auto;bottom:10px;left:0;right:0;transform:none;
    flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:flex-end;
    gap:clamp(3px,1.1vw,7px);padding:0 6px;
  }
/* display:contents 把 .fb-quick 这一层「取消」，让 7 个按钮都成为同一行的直接子项，
     否则 AI 会被包在容器 div 里，没法靠 order 排到整排正中间。 */
  .fb-quick{display:contents}
.float-bar .fb-btn,.float-bar .fb-toggle{
    flex:0 0 auto;border-radius:50%;
    width:clamp(34px,9.4vw,46px);height:clamp(34px,9.4vw,46px);
  }
.float-bar .fb-btn svg,.float-bar .fb-toggle svg{width:clamp(19px,5.2vw,24px);height:clamp(19px,5.2vw,24px)}
.float-bar .fb-toggle svg{display:block}
.float-bar .fb-mobonly{display:flex}
/* hidden 属性优先级：客服按钮在 Tawk 没加载出来之前必须是隐藏的 */
  .float-bar .fb-chat[hidden]{display:none}
/* 顺序：购物车(1) 微信(2) WhatsApp(3) AI(4) 电话(5) 询价(6) 在线客服(7) */
  .float-bar .fb-cart{order:1}
.float-bar .fb-wx{order:2}
.float-bar .fb-wa{order:3}
.float-bar .fb-ai{order:4}
.float-bar .fb-tel{order:5}
.float-bar .fb-toggle{order:6}
.float-bar .fb-chat{order:7}
/* Tawk 没配置、或访客还没同意 Cookie（客服脚本此时根本不加载）时，客服圆钮是隐藏的，
     一排只剩 6 个 → AI 会偏右半格。用一个等宽空占位补上第 7 格，保证 AI 永远在正中间。
     :has() 不支持的老浏览器只是差半格，不影响使用。 */
  .float-bar:has(.fb-chat[hidden])::after{
    content:'';order:7;flex:0 0 auto;
    width:clamp(34px,9.4vw,46px);height:1px;
  }
/* AI：正中间那颗。红底白字、比左右各圈大约 25%，再抬高 4px 跳出来。
     必须写 .float-bar .fb-ai —— 桌面 .fb-ai 规则在文件更后面，同特异性会盖掉这里。 */
  .float-bar .fb-ai{
    width:clamp(46px,12.2vw,58px);height:clamp(46px,12.2vw,58px);
    min-width:0;padding:0;gap:0;flex-direction:column;
    margin-bottom:4px;border-radius:50%;
    background:var(--brand);color:#fff;border-color:var(--brand);
    box-shadow:0 6px 18px rgba(28,122,214,.45);animation:none;
  }
.float-bar .fb-ai:hover{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark)}
.float-bar .fb-ai svg{width:clamp(17px,4.6vw,21px);height:clamp(17px,4.6vw,21px)}
.float-bar .fb-ai-label{font-size:clamp(7px,2vw,9px);font-weight:800;letter-spacing:.08em;line-height:1;margin-top:1px}
/* 询价按钮（.fb-toggle）：浅底 + 品牌描边，一排里只留 AI 一颗实心红，不会看成一模一样的重复按钮 */
  .float-bar .fb-toggle{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}
.float-bar .fb-toggle:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
.fb-label{display:none}
/* 邮件圆钮收起来：咨询面板和页脚都有邮箱，手机这一排要留给 7 个主入口 */
  .fb-mail{display:none}
.float-panel{width:100%;max-width:100%}
/* 微信 / WhatsApp 弹窗：贴在这一排上方居中，别压住按钮。
     宽度 236（和桌面一致）：200 时 "+8613822382118" 这种长号码会被折成两行。 */
  .fb-wx-pop,.fb-wa-pop{right:auto;left:50%;top:auto;bottom:calc(100% + 8px);margin-left:-118px;width:236px}

}
@media print{.float-bar,.float-panel,.float-mask,.cat-rail{display:none}

}
/* ---------- 社媒图标与视频分享 ---------- */
.soc-ic{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
  color:#fff;font-size:.66rem;font-weight:700;line-height:1;letter-spacing:.02em;flex:0 0 auto;text-transform:lowercase}
.ft-social a{display:inline-flex;align-items:center;gap:7px}
.ft-social .soc-ic{width:24px;height:24px}
.vid-share{display:flex;align-items:center;gap:7px;margin-top:10px;flex-wrap:wrap}
.vid-share .vs-label{font-size:.78rem;color:var(--ink-3);margin-right:2px}
.vid-share .soc-share{display:inline-flex;opacity:.92;transition:opacity .15s ease,transform .15s ease}
.vid-share .soc-share:hover{opacity:1;transform:translateY(-1px)}
@media print{.vid-share{display:none}
 }
/* 首页「关注我们」社媒区 */
.social-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;list-style:none;padding:0}
.social-pill{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-1);font-weight:600;font-size:.95rem;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.social-pill:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:transparent}
.social-pill .soc-ic{width:26px;height:26px;font-size:.7rem}
@media (max-width:600px){.social-pill{padding:10px 14px;font-size:.88rem}
 }
/* ============================================================
   新增：询价车 / 物流查询 / 移动端增强
   ============================================================ */

/* ---------- 产品卡：外框 + 加入询价 ---------- */
.pcard-wrap{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pcard-wrap:hover{border-color:var(--brand);box-shadow:var(--shadow)}
.pcard{display:flex;flex-direction:column;flex:1;color:var(--ink)}
.pcard:hover{text-decoration:none}
.pcard-add{margin:0 14px 16px;align-self:flex-start}
.pcard-add.added{background:var(--ok);border-color:var(--ok);color:#fff}
.pdp-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.pdp-actions .cta-bar{margin-top:0}
/* ---------- 询价车浮动按钮 + 抽屉 ---------- */
/* 桌面端：购物车放在头部右上角（nav-cart）；移动端：浮动按钮在右下角 */
.cart-fab{position:fixed;display:none;z-index:60;width:56px;height:56px;border-radius:50%;background:var(--brand);color:#fff;border:0;box-shadow:var(--shadow);cursor:pointer;align-items:center;justify-content:center}
.cart-fab:hover{background:var(--brand-dark)}
.cart-fab .cf-ico{width:24px;height:24px;display:flex}
.cart-fab .cf-ico svg{width:24px;height:24px}
.cart-fab .cf-count{position:absolute;top:-4px;right:-4px;background:#fff;color:var(--brand);border:2px solid var(--brand);border-radius:999px;min-width:22px;height:22px;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px}
/* 头部右上角购物车按钮 */
.nav-cart{position:relative;flex:0 0 auto;width:40px;height:40px;margin-left:4px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s}
.nav-cart:hover{background:var(--bg-soft);color:var(--brand-dark);border-color:var(--brand)}
.nav-cart .nc-ico{width:22px;height:22px;display:flex}
.nav-cart .nc-ico svg{width:22px;height:22px}
.nav-cart .nc-count{position:absolute;top:-7px;right:-7px;background:var(--brand);color:#fff;border:2px solid #fff;border-radius:999px;min-width:20px;height:20px;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px rgba(0,0,0,.15)}
/* hidden 属性优先于上面的 display:flex，空车时不显示角标 */
.nav-cart .nc-count[hidden],.cart-fab .cf-count[hidden]{display:none}
.cart-mask{position:fixed;inset:0;background:rgba(15,20,30,.38);z-index:65}
.cart-panel{position:fixed;left:0;top:0;bottom:0;width:380px;max-width:92vw;background:#fff;z-index:70;box-shadow:8px 0 32px rgba(20,25,40,.16);overflow-y:auto;padding:20px 20px 32px;transform:translateX(-102%);transition:transform .22s ease}
.cart-panel.open{transform:translateX(0)}
.cart-panel[hidden],.cart-mask[hidden]{display:none}
.cp-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.cp-head strong{font-size:1.05rem}
.cp-close{background:transparent;border:1px solid var(--line);border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer}
.cp-close svg{width:18px;height:18px}
.cp-sub{font-size:.85rem;color:var(--ink-3);margin-bottom:14px}
.cp-items{display:flex;flex-direction:column;gap:10px;margin-bottom:10px}
.cp-empty{font-size:.88rem;color:var(--ink-3);background:var(--bg-soft);border:1px dashed var(--line);border-radius:6px;padding:16px;text-align:center}
.cp-item{border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.cp-item-name{font-size:.9rem;font-weight:600;color:var(--ink);min-width:0}
.cp-item-ctrl{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.cp-qty{font-size:.78rem;color:var(--ink-3);display:flex;align-items:center;gap:4px}
.cp-qty input{width:56px;border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit}
.cp-remove{width:30px;height:30px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink-2);font-size:1.1rem;line-height:1;cursor:pointer}
.cp-remove:hover{border-color:var(--brand);color:var(--brand)}
.cp-foot{margin-bottom:8px}
.cp-clear{font-size:.85rem;padding:0;color:var(--brand-dark)}
.cp-form{border-top:1px solid var(--line);padding-top:16px;margin-top:6px}
.cp-form .form-row{margin-bottom:12px}
.cp-done{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-top:12px}
.cp-done .ok-line{color:var(--ok);font-weight:600}
body.cart-open{overflow:hidden}
@media (max-width:768px){/* 独立购物车圆钮：只在关掉浮动栏（site.float_enabled === false）时才会渲染出来兜底，
     正常配置下购物车已经并入底部那一排（.fb-cart），这里不再出现第二个按钮。 */
  .cart-fab{display:flex;top:auto;bottom:14px;left:14px;right:auto;transform:none;width:52px;height:52px}
.cart-panel{width:100%;max-width:100%}

}
/* ---------- 物流查询页 ---------- */
.track-form{max-width:560px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-top:20px}
.track-form .form-row{margin-bottom:16px}
.track-form .form-row>label{display:block;font-size:.86rem;font-weight:600;margin-bottom:6px}
.track-form input{width:100%;border:1px solid var(--line);border-radius:6px;padding:10px 12px;font:inherit}
.track-form .req{color:var(--brand)}
.trk-result{display:grid;gap:14px;margin-top:24px}
.trk-card{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:#fff}
.trk-row{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px solid var(--line-2);font-size:.92rem}
.trk-row:last-child{border-bottom:0}
.trk-row span{color:var(--ink-3)}
.trk-row strong{color:var(--ink);text-align:right}
.trk-note{margin:10px 0 0;font-size:.84rem;color:var(--ink-3)}
.home-custom{background:var(--bg-soft);border-radius:var(--radius)}
/* ---------- 移动端：规格表横滚（分类悬浮条样式见上文，桌面/移动一致） ---------- */
@media (max-width:768px){.spec-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
.spec-table th,.spec-table td{white-space:normal}
.prod-grid{grid-template-columns:repeat(2,1fr);gap:14px}
.cat-grid{grid-template-columns:repeat(2,1fr)}
.pcard-add{margin:0 10px 12px}

}
/* 富文本详情正文：插入的图片 / 视频 / 引用响应式排版 */
.prose h4{font-size:1rem;margin:1.3em 0 .4em}
.prose p{margin:0 0 1em;line-height:1.7}
.prose img{max-width:100%;height:auto;border-radius:8px;display:block;margin:1em 0}
/* 应用场景图组（2026-10-27 老板要求）：一行 4 张、窄屏自适应 3/2/1 张；
   每张 = 图片 + 正下方居中的图注（服务端 sceneGridHtml 拆成 figure 卡片）。
   网格统一管大小与对齐，编辑器里设置过的内联宽度/浮动在网格里一律覆盖掉。

   2026-10-27 二次调整（老板截图：前台 4 张图大小不齐、跟后台编辑差不多大）：
   ① 场景区不再受 .prose 的 820px 上限约束（--scene-ar 不改，只放开宽度）→ 图更大、铺满整行；
   ② 每格固定 1:1 画框 + object-fit:cover → 一排严格等宽等高、边缘齐平、图注也对齐。
      以前 height:auto 是各按原图比例走，一张 334×356 的图就比同排 190 的图高 13px，看着大小不一。 */
.prose.prose-scene{max-width:none}
/* 应用场景图组（2026-10-27 老板要求；2026-11-09 改为 CSS Grid 自动平均铺满）：
   不再写死 4/3 张，而是按容器宽度自动决定列数，每张图等宽等高、均匀填满整行 —
   不管产品有 2/3/4/5/6 张场景图都平均分布；窄屏自动减到 2 列 / 手机 1 列。
   老板在后台给单卡设的自定义宽度仍生效（左对齐、不撑满）。 */
.scene-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;margin:1.2em 0;align-items:start}
.scene-item{margin:0;min-width:0;max-width:100%}
.scene-grid:not(.scene-solo) .scene-item[style]{justify-self:start}
.scene-pic{aspect-ratio:1/1;overflow:hidden;border-radius:10px;background:var(--bg)}
.scene-pic img{width:100%!important;height:100%!important;float:none!important;display:block;margin:0!important;border-radius:0;object-fit:cover;object-position:center}
.scene-item figcaption{text-align:center;margin-top:8px;font-size:.92rem;line-height:1.55;color:var(--ink-2);word-break:break-word}
.scene-pre{margin:0 0 1em;line-height:1.7;max-width:820px}
/* 只有 1 张图时不裁切，保持原图比例居中放 */
.scene-grid.scene-solo{grid-template-columns:minmax(0,560px);justify-content:center}
.scene-grid.scene-solo .scene-item{width:100%}
.scene-grid.scene-solo .scene-pic{aspect-ratio:auto;border-radius:10px}
.scene-grid.scene-solo .scene-pic img{height:auto!important}
@media(max-width:760px){.scene-grid{gap:14px;grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.scene-grid{grid-template-columns:1fr}}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1em}
.prose ul li,.prose ol li{margin-bottom:.45em;color:var(--ink-2)}
.prose blockquote{margin:1em 0;padding:.6em 1em;border-left:3px solid var(--brand);background:var(--bg-alt);color:var(--ink-2);border-radius:0 8px 8px 0}
.prose blockquote p{margin:0}
.prose figure{margin:1em 0}
.prose figcaption{font-size:.82rem;color:var(--ink-3);text-align:center;margin-top:.4em}
.prose iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:8px;display:block;margin:1em 0;max-width:100%}
.prose video{max-width:100%;height:auto;border-radius:8px;display:block;margin:1em 0}
.prose a{color:var(--brand);text-decoration:underline}
/* 富文本插入的表格 / 分隔线（2026-10-30 新增 Word 级功能，前台与后台一致） */
.prose table{border-collapse:collapse;width:100%;margin:1em 0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.prose table td,.prose table th{border:1px solid var(--line-2);padding:9px 12px;vertical-align:top;text-align:left;font-size:.92rem}
.prose table th{background:var(--bg-soft);font-weight:600;color:var(--ink-2)}
.prose table caption{padding:8px 12px;background:var(--bg-soft);font-weight:600;color:var(--ink-2);text-align:left}
.prose hr{border:0;border-top:1px solid var(--line);margin:1.4em 0}
/* 文本框（带边框浅底的提示框）由编辑器写入内联样式，这里只兜底保证间距 */

/* 联系页 Direct contact 联系人卡片 */
.contact-cards{display:grid;gap:12px;margin-bottom:14px}
.contact-card{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:#fff}
.contact-card.is-primary{border-color:color-mix(in srgb, var(--brand) 45%, white)}
.cc-name{display:block;font-size:1rem;color:var(--ink-1)}
.cc-title{display:block;font-size:.82rem;color:var(--ink-3);margin:2px 0 6px}
.contact-card ul{list-style:none;margin:0;padding:0}
.contact-card li{padding:3px 0;font-size:.9rem}
.contact-card li strong{display:inline-block;min-width:74px;color:var(--ink-3);font-weight:600}
.contact-card .cc-wechat{user-select:all}
/* ---------- AI 助手（浮动栏入口按钮，常驻右侧栏、醒目） ---------- */
/* 取消圆形 50x50 限制，改为胶囊按钮 + “AI”文字 + 呼吸光晕，让客户一眼看到可随时打开 */
.fb-ai{
  width:auto;height:auto;min-width:50px;padding:9px 14px;gap:7px;flex-direction:row;
  border-radius:24px;background:var(--brand);color:#fff;border-color:var(--brand);
  font-weight:700;font-size:.8rem;line-height:1;
  box-shadow:0 4px 14px rgba(28,122,214,.42);
  animation:aiPulse 2.4s ease-in-out infinite;
}
.fb-ai:hover{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark)}
.fb-ai svg{width:21px;height:21px;flex:0 0 auto}
.fb-ai-label{font-size:.86rem;font-weight:800;letter-spacing:.04em}
@keyframes aiPulse{
  0%,100%{box-shadow:0 4px 14px rgba(28,122,214,.42)}
  50%{box-shadow:0 6px 24px rgba(28,122,214,.72)}
}
/* 缩小尺寸 + 用 100dvh 替代 100vh：移动端 iOS Safari 的 100vh 含地址栏/工具栏，
   比实际可见区大，会导致面板顶部被浏览器 UI 裁掉（"上边被隐藏"）。dvh 随可见区伸缩。
   顶部留出 150px 安全区，保证标题栏/关闭键永远在可视范围内、不会压住页头。 */
.fb-ai-pop{position:fixed;right:16px;bottom:92px;width:min(320px,calc(100vw - 24px));height:min(400px,calc(100dvh - 150px));display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(20,25,40,.18);z-index:70;overflow:hidden}
.fb-ai-pop[hidden]{display:none}
.fb-ai-pop .wx-pop-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line-2);margin:0}
/* 关闭按钮：做成明显的圆形按钮，一眼能找到；悬停变品牌橙 */
.fb-ai-pop .wx-pop-x{font-size:1.2rem;width:32px;height:32px;margin:-2px -4px -2px 0;padding:0;border-radius:50%;background:var(--bg-soft);color:var(--ink-2);display:flex;align-items:center;justify-content:center}
.fb-ai-pop .wx-pop-x:hover{background:var(--brand);color:#fff}
.ai-head-btns{display:flex;align-items:center;gap:10px}
.ai-clear-btn{border:none;background:none;color:var(--ink-3);font-size:.75rem;cursor:pointer;padding:2px 4px}
.ai-clear-btn:hover{color:var(--brand-dark);text-decoration:underline}
.ai-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg-soft)}
.ai-msg{max-width:86%;padding:9px 13px;border-radius:14px;font-size:.9rem;line-height:1.55;word-break:break-word}
.ai-msg-bot{background:#fff;border:1px solid var(--line-2);align-self:flex-start;border-top-left-radius:4px}
.ai-msg-user{background:var(--brand);color:#fff;align-self:flex-end;border-top-right-radius:4px}
.ai-msg a{color:var(--brand-dark);word-break:break-all}
.ai-msg-bot a{color:var(--brand-dark)}
.ai-msg-user a{color:#fff;text-decoration:underline}
.ai-thinking::after{content:"…";animation:aiDots 1.2s steps(4) infinite}
@keyframes aiDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.ai-input-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line-2);background:#fff}
.ai-input{flex:1;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:.9rem;font-family:inherit}
.ai-input:focus{outline:2px solid var(--brand-soft);border-color:var(--brand)}
.ai-send{border:none;background:var(--brand);color:#fff;border-radius:8px;padding:9px 16px;font-size:.9rem;font-weight:600;cursor:pointer}
.ai-send:disabled{opacity:.55;cursor:default}
.ai-disc{margin:0;padding:7px 14px 10px;font-size:.7rem;color:var(--ink-3);background:#fff}
/* AI 转询盘按钮：低调文字链，客户不点就只是背景 */
.ai-inq-btn{border:none;background:none;color:var(--ink-3);font-size:.75rem;cursor:pointer;padding:6px 14px 0;text-align:center;text-decoration:underline;text-underline-offset:2px}
.ai-inq-btn:hover{color:var(--brand-dark)}
.ai-inq-btn:disabled{opacity:.55;cursor:default;text-decoration:none}
/* 询盘表单「AI 帮写」小按钮：嵌在留言标签旁，不抢视觉 */
.ai-draft-btn{margin-left:8px;font-size:.7rem;padding:1px 9px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);color:var(--ink-2);cursor:pointer;font-family:inherit}
.ai-draft-btn:hover{border-color:var(--brand);color:var(--brand-dark)}
.ai-draft-btn:disabled{opacity:.55;cursor:default}
@media (max-width:640px){/* 移动端同样用 dvh，并把高度降到 54dvh、底部留 80px，
     顶部安全区更大，彻底避免被地址栏裁掉；宽度贴边 10px */
  .fb-ai-pop{right:10px;left:10px;width:auto;bottom:80px;height:min(54dvh,400px)}

}
/* ---------- FAQ 页：双栏布局 + 本页搜索 ---------- */
/* FAQ / 资料下载等带 .doc-rail 侧栏的页面：恢复「左栏 + 正文」双栏网格。
   背景：c1a8bbd 为首页悬浮分类栏把 .layout-rail 改成 display:block，
   连带把这里的 sticky 侧栏变成全宽块——吸顶后直接盖住正文回答（用户截图 bug）。 */
.layout-rail-cols{display:grid;grid-template-columns:minmax(190px,230px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:900px){
  .layout-rail-cols{display:block}
  .layout-rail-cols .doc-rail{position:static;max-height:none}
}
.faq-main{min-width:0}
.faq-search{margin-bottom:10px}
.faq-search input{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:.9rem;font-family:inherit;background:#fff}
.faq-search input:focus{outline:2px solid var(--brand-soft);border-color:var(--brand)}
.faq-count{font-size:.78rem;color:var(--ink-3);margin:0 0 8px}
.faq-item{scroll-margin-top:90px}
.faq-group h2{scroll-margin-top:90px}
.faq-item[hidden]{display:none}
.faq-noresult{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);border-radius:var(--radius);padding:14px 16px;font-size:.92rem}
@media (max-width:600px){.doc-rail{position:static}

}
/* 产品详情页：资料下载区（AI 建档自动挂上的说明书/认证） */
.dl-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.dl-list li{margin:0}
.dl-link{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink-1);text-decoration:none;font-size:.9rem;transition:border-color .15s,background .15s}
.dl-link:hover{border-color:var(--ink-2);background:var(--bg-soft)}
.dl-link span{color:var(--ink-3);font-weight:500}
/* 门禁开启时下载项改为按钮（弹窗填表）；门禁关闭时仍是直链 */
.dl-btn{font:inherit;cursor:pointer;text-align:left}
.dl-btn:hover{border-color:var(--ink-2);background:var(--bg-soft)}
/* 下载区收窄、向左缩进，红框位置不再空荡 */
#downloads .dl-list{max-width:640px;margin-left:0;gap:8px 10px}
/* 产品页资料下载「填表换下载」弹窗 */
.gate-modal{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:20px}
.gate-modal[hidden]{display:none}
.gate-modal-mask{position:absolute;inset:0;background:rgba(15,23,42,.55)}
.gate-modal-box{position:relative;width:min(460px,100%);max-height:90vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.gate-modal-box .sec-h{margin-bottom:.2em}
.gate-modal-box .sec-lead{margin-bottom:14px}
.gate-modal-x{position:absolute;top:8px;right:10px;width:34px;height:34px;border:0;background:transparent;font-size:1.7rem;line-height:1;color:var(--ink-3);cursor:pointer;border-radius:8px}
.gate-modal-x:hover{background:var(--bg-soft);color:var(--ink-1)}
.gate-modal .gate-form{padding:0;border:0;background:transparent}
.gate-modal .gate-form h2{display:none}
.noscroll{overflow:hidden}
/* ---------- 首页「销售团队」区块 ---------- */
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:18px}
@media (max-width:1024px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.team-grid{grid-template-columns:1fr}}
.team-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center;display:flex;flex-direction:column;align-items:center}
.team-photo{position:relative;width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--brand-soft,#eef4ff);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.team-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.team-avatar{font-size:2rem;font-weight:700;color:var(--brand,#1677ff);letter-spacing:1px}
.team-name{display:block;font-size:1.02rem;color:var(--ink-1,#1f2329)}
.team-title{display:block;font-size:.82rem;color:var(--ink-3,#8a9099);margin-bottom:10px}
.team-lines{list-style:none;margin:0 0 14px;padding:0;font-size:.86rem;color:var(--ink-2,#4a5159);width:100%}
.team-lines li{display:flex;align-items:center;gap:6px;justify-content:center;padding:2px 0}
.team-lines .ic{color:var(--brand,#1677ff)}
.team-inq{margin-top:auto}
/* 联系页：定向到某业务员的提示条 */
.inq-assign-banner{background:var(--brand-soft,#eef4ff);border:1px solid rgba(22,119,255,.25);color:var(--ink-1,#1f2329);border-radius:var(--radius);padding:10px 14px;margin:0 0 16px;font-size:.92rem}
.inq-assign-banner .muted{color:var(--ink-3,#8a9099)}
/* 浮动栏弹层里的「查看全部销售代表」 */
.wx-pop-foot{margin:10px 0 0;font-size:.82rem;text-align:center}
.wx-pop-foot a{color:var(--brand,#1677ff);text-decoration:none;font-weight:600}
.wx-pop-foot a:hover{text-decoration:underline}
/* 无障碍：跳到主内容链接（默认隐藏，键盘聚焦时显现） */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--brand,#1677ff);color:#fff;padding:8px 14px;border-radius:0 0 var(--radius,8px) 0;font-size:.9rem;text-decoration:none}
.skip-link:focus{left:0;outline:2px solid #fff;outline-offset:-2px}
/* 视频加载状态（2026-10-24）：黑框干等是最糟的体验，三态都要有明确反馈 */
.vid-tip{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:8px;
  padding:10px 12px;font-size:13px;line-height:1.5;color:#fff;text-align:left;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));pointer-events:none}
.vid-tip.is-err{background:rgba(0,0,0,.82);pointer-events:auto;flex-wrap:wrap}
.vid-tip-t{flex:1 1 auto;min-width:0}
.vid-spin{flex:0 0 auto;width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:vidspin .8s linear infinite}
@keyframes vidspin{to{transform:rotate(360deg)}}
.vid-tip.is-slow .vid-spin{border-top-color:#ffd479}
.vid-tip.is-err .vid-spin{display:none}
.vid-dl{flex:0 0 auto;color:#fff;text-decoration:underline;font-weight:600;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.vid-spin{animation:none}}
/* ========== 自适应版心 · 收尾规则（2026-10-25） ==========
   1) 版心不再固定 1200px：1440/1600/1920 等常见电脑屏一律铺满，只有超宽屏才封顶 --wrap；
   2) 左右留白统一走 --pad（clamp 20~56px），顶栏/导航/面包屑/首屏/页脚与正文严格同一条竖线；
   3) 卡片网格按「整行排满」而不是「塞进去几张算几张」，杜绝 3+1 的孤儿行。 */
@media (min-width:1360px){
  .why-grid,.sol-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:600px){.why-grid,.sol-grid,.steps{grid-template-columns:1fr}
.sol-item.has-img{grid-template-columns:1fr}

}
/* 4) 桌面端右侧安全边距：浮动客服栏是 position:fixed 贴在右边（AI 胶囊 ≈74px + 右边距 14px），
      版心一旦铺满就会压到卡片右边缘（联系页「直接联系」框被 AI 按钮盖住就是这个）。
      右边统一预留 96px，全站（顶栏/导航/首屏/正文/CTA/页脚）一起让位，竖线仍然对齐。 */
@media (min-width:1100px){
  .wrap,.layout-rail,.layout-solo{padding-right:max(var(--pad),96px)}
}
/* 破图兜底（site.js 破图降级配套）：万一 JS 降级没接住，至少不显示裂图 */
img.img-missing{display:none!important}
/* ⚠ 产品详情页「自由排版区」样式已于 2026-10-30 整块删除
   （老板：前台看起来乱，不要了）。后台编辑器与前台渲染一并移除。 */
/* ========== 详情页富详情区：左内容 + 右侧浮动参数栏（2026-10-29，阿里式版面） ==========
   桌面端两栏：左边从上到下是规格/描述/资料/电池合规/FAQ/相关产品/应用场景，
   右边一条 sticky 参数栏（价格 + 主要参数 + 询价/联系商家）——
   随左栏滚动一直可见，   滚到两栏区末尾自动收场（sticky 被容器底部截断）。
   关键：右栏必须拉伸到和左栏等高（align-items:stretch），里面的 sticky 子元素才有空间
   一路跟着滚；若用 align-items:start，右栏只有自己内容那么高，sticky 滚一小段就跟着滚走。
   1024px 以下降级为单列：参数栏变静态、提到内容最上方（价格和询盘入口先看到）。

   2026-10-29 老板口径：右栏（主要特点）宽度跟左侧产品导航栏一样宽（--rail = 190px），
   两栏视觉对称；正文（参数表）因此多出 130px，不再一行折三行。
   等高由 JS 量左侧导航栏实际高度写进 --cat-h，右栏 sticky 容器按它撑开，
   特点卡跟着长高 → 左右两栏底边落在同一条线上。 */
.pdp-cols{display:grid;grid-template-columns:minmax(0,1fr) var(--rail);gap:36px;align-items:stretch}
.pdp-cols-main{min-width:0}
/* 详情页区块间距收紧（2026-10-31 老板口径：整页协调紧凑）：
   .sec 默认上下 56px，两个区块间 112px 空白太松。详情页内收紧到 32px（区间 64px），
   保留 sec-alt 交替底色的呼吸感，但不至于大段留白。 */
.pdp-cols-main .sec{padding-left:0;padding-right:0;padding-top:32px;padding-bottom:32px}
/* 「应用场景」区块在左栏正文里（2026-10-30 老板口径）：左栏较窄，用 auto-fit 让
   场景图按容器宽度自动平均铺满 —— 最小列宽 200px，在 ~1300px 左栏里最多排 6 列，
   所以 3/4/5/6 张场景图都能在一行里等宽均匀铺满（不再写死列数、不再换行留缺口）。 */
.pdp-cols-main .scene-grid{gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media (max-width:760px){.pdp-cols-main .scene-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.pdp-cols-main .scene-grid{grid-template-columns:1fr}}
/* 「相关产品」推荐位（2026-10-30）：放在原「应用场景」的整页宽位置（两栏区之下、CTA 之上）。
   卡片最多 8 个，但整页宽铺开会每张被拉到 400px+ 显得空荡 → 限宽居中，
   固定 4 列（和站内其它产品网格一致），不够 4 个时也不会撑成巨无霸。 */
.pdp-related-sec .pdp-related-grid{max-width:1180px;margin-left:auto;margin-right:auto}
@media (max-width:1100px){.pdp-related-sec .pdp-related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

}
@media (max-width:768px){.pdp-related-sec .pdp-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

}
.pdp-rail{min-width:0}
/* 右栏整体下移，与左栏第一个区块标题（技术参数）水平平行对齐：
   左栏 .sec 顶部内边距 56px（h2 上边距已归零）→ 标题就在栏顶下方 56px；
   右栏卡片外边距同样取 56px → 两个区块顶边落在同一条水平线上。

   吸顶位置（2026-10-29 修）：原来写死 top:82px，比顶栏(.site-hd,桌面 116px)还矮，
   一滚动「主要特点」标题就被顶栏压在下面看不见 → 统一改成「顶栏高度 + 12px」。
   另外加 max-height：窗口很矮时栏体不超出可视区，特点列表自己内部滚动，
   「价格 + 索取报价 / 联系我们」永远露在外面，不会被切掉。
   min-height 取「左侧导航栏高度」与「可视区高度」的较小者 → 两栏等高但不越界。 */
.pdp-rail-in{position:sticky;top:calc(var(--hd-h) + var(--stick-gap));display:flex;flex-direction:column;gap:14px;margin-top:56px;max-height:calc(100vh - var(--hd-h) - var(--stick-gap) - 20px);min-height:min(var(--cat-h,0px),calc(100vh - var(--hd-h) - var(--stick-gap) - 20px))}
.pdp-rail-price{background:var(--brand-soft,#eef4ff);border:1px solid rgba(22,119,255,.25);border-radius:var(--radius);padding:12px 14px;flex:0 0 auto}
.pdp-rail-lbl{font-size:.78rem;color:var(--ink-3)}
.pdp-rail-price strong{display:block;font-size:1.22rem;color:var(--ink-1);margin-top:2px;line-height:1.25}
.pdp-rail-note{font-size:.75rem;color:var(--ink-3);margin:6px 0 0}
.pdp-rail-specs{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
/* 特点卡：保持自然高度（窗口不够高时才压缩），标题和列表都不被切 */
.pdp-rail-feat{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
/* 价格 + 召唤按钮沉到底部 —— 和左侧产品导航「列表在上、CTA 在底」的结构对称，
   两栏底边落在同一条线上（左右等宽等高用）。 */
.pdp-rail-bottom{margin-top:auto;display:flex;flex-direction:column;gap:14px;flex:0 0 auto}
.pdp-rail-h{font-size:.95rem;margin:0 0 6px;flex:0 0 auto}
/* 右栏「主要特点」列表：紧凑的勾选式条目；超高时内部滚动 */
.pdp-rail-feat-list{list-style:none;padding:0;margin:0;display:grid;gap:7px;flex:1 1 auto;min-height:0;overflow-y:auto}
.pdp-rail-feat-list li{position:relative;padding-left:18px;font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.pdp-rail-feat-list li::before{content:"✓";position:absolute;left:0;top:0;color:var(--ok);font-weight:700}
.pdp-rail-specs dl{margin:0;display:flex;flex-direction:column}
.pdp-rail-specs dl>div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:.85rem}
.pdp-rail-specs dl>div:last-child{border-bottom:0}
.pdp-rail-specs dt{color:var(--ink-3);flex:0 0 auto}
.pdp-rail-specs dd{margin:0;text-align:right;color:var(--ink-1);word-break:break-word}
.pdp-rail-cta{display:flex;flex-direction:column;gap:8px;flex:0 0 auto}
.pdp-rail-cta .btn-block{width:100%;text-align:center}
@media (max-width:1024px){.pdp-cols{grid-template-columns:1fr;gap:0}
.pdp-rail{order:-1;margin-bottom:4px}
/* 单列时右栏提到最上方，不需要再跟左栏标题对齐 → 取消上边距；
     也不再吸顶、也不需要内部滚动限制 */
  .pdp-rail-in{position:static;flex-direction:row;flex-wrap:wrap;gap:10px;margin-top:0;max-height:none;min-height:0}
.pdp-rail-feat{flex:1 1 260px;display:block;overflow:visible}
.pdp-rail-feat-list{overflow:visible;min-height:0}
.pdp-rail-bottom{flex:1 1 260px;margin-top:0;gap:10px}
.pdp-rail-price{flex:0 0 auto}
.pdp-rail-cta{flex:0 0 auto;flex-direction:row}
.pdp-rail-cta .btn-block{flex:1}

}
/* 左导航栏在 1101~1320px 之间会收窄到 176px（见 .layout-rail 的同名规则），
   右栏跟着一起收窄，两边始终一样宽。 */
@media (min-width:1101px) and (max-width:1320px){
  .pdp-cols{grid-template-columns:minmax(0,1fr) 176px}
}
/* ========== 规格表 4 列布局（2026-10-29 老板要求：原来两列占满整行太宽） ==========
   每行放 2 对「名称|值」，共 4 列，紧凑网格；列间用 inset 竖线分隔。

   2026-10-30 老板反馈「4 列宽度不直观」，实测线上（1440px / 表宽 856px）四列是
   188 / 169 / 188 / 309 —— 两个名称列一样宽，但两个值列一窄一宽：
     · 右边值列空掉一大片，左边值列被挤到「表面壳度」折 4 行；
     · 行高跟着内容走（47px vs 72px），整张表高低不齐。
   根因：table-layout:auto → 浏览器按内容自动分配列宽，宽度不可控。

   改法：
   ① 桌面（≥769px）：table-layout:fixed + <colgroup> 显式定列宽 —— 名称 22% | 值 28% | 名称 22% | 值 28%。
      名称列保持原来 188px（英文长名如 Minimum Order Quantity 也能一行放下），
      值列统一 240px（比原来最窄的 169px 宽 40%，长参数少折 1~2 行）。
      第 2、3 列之间（两组之间）用更深的分隔线 → 一眼分清「左一组 / 右一组」。
      ⚠ 列宽必须写在 <colgroup> 的 col 上（HTML 里 specTable() 输出），
        只写 CSS 的 th{width:…}
无效：本表有个 <caption class="sr-only">，
        而 .sr-only 是 position:absolute —— 绝对定位的 caption 会让 Chrome 在
        table-layout:fixed 下放弃按单元格宽度定列，四列直接均分成 25%。
   ② 手机（≤560px）：350px 里塞 4 列必然把值切成竖条（实测每列仅 87px，
      「200 - 1000Lm (Smoothly adjustable brightness)」被切成 5 行）。
      改成每组「名称|值」竖排成 2×2 网格（名称 36% / 值 64%）：
      一个 tr = 「名称1 值1」+「名称2 值2」上下两行，值独占大半宽度，不再被挤成碎条。
      断点定 560px 而不是 768px：平板/小笔记本上表格还有 600~700px 宽，
      4 列（名称 130px / 值 165px）完全放得下，没必要拉成 2×2 浪费纵向空间。
      （display 必须保持 table / tr 变 grid，不能用上面 .spec-table 的 display:block，
       否则 4 列会退回自动布局、在窄屏把页面撑出横向滚动条。） */
.spec-table.spec-table-4{table-layout:fixed;width:100%}
.spec-table.spec-table-4 col.sc-name{width:22%}
.spec-table.spec-table-4 col.sc-val{width:28%}
.spec-table.spec-table-4 th,
.spec-table.spec-table-4 td{box-shadow:inset 1px 0 0 var(--line-2);overflow-wrap:anywhere;word-break:break-word}
.spec-table.spec-table-4 th:first-child{box-shadow:none}
.spec-table.spec-table-4 td:last-child{box-shadow:none}
.spec-table.spec-table-4 tr:last-child th,
.spec-table.spec-table-4 tr:last-child td{border-bottom:0}
@media (min-width:769px){/* 两组之间（第2列右边界）的分隔线加深，视觉上分成左右两块 */
  .spec-table.spec-table-4 tr>*:nth-child(3){box-shadow:inset 1px 0 0 var(--line)}

}
@media (max-width:768px){/* 平板竖屏(768)与手机：4 列表改「名称|值」两列堆叠网格，
    避免 4 列在窄屏被压窄、文字挤成多行（与 ≤560 规则一致；≥769 仍用固定 4 列）。 */
  .spec-table.spec-table-4{display:block;table-layout:auto;width:100%}
  .spec-table.spec-table-4 tbody{display:block}
  .spec-table.spec-table-4 colgroup{display:none}
  .spec-table.spec-table-4 tr{display:grid;grid-template-columns:36% 64%}
  .spec-table.spec-table-4 th,.spec-table.spec-table-4 td{width:auto;box-shadow:none}
  .spec-table.spec-table-4 th{border-right:1px solid var(--line-2)}
}
@media (max-width:560px){.spec-table.spec-table-4{display:block;table-layout:auto;width:100%}
.spec-table.spec-table-4 tbody{display:block}
/* colgroup 在 grid 布局下不参与计算，这里清掉以免干扰 */
  .spec-table.spec-table-4 colgroup{display:none}
/* 一个 tr 的 4 个单元格按 2 列填充 → 变成「名称1|值1」「名称2|值2」上下两行 */
  .spec-table.spec-table-4 tr{display:grid;grid-template-columns:36% 64%}
.spec-table.spec-table-4 th,.spec-table.spec-table-4 td{width:auto;box-shadow:none}
/* 名称与值之间留一条竖线（原来靠 inset 阴影，grid 下改用 border） */
  .spec-table.spec-table-4 th{border-right:1px solid var(--line-2)}

}
/* ========== 修：带左栏布局的内层「重复留白」（2026-10-29 老板反馈：详情页右边空槽太宽） ==========
   现状：外层 .layout-rail / .layout-solo 自己带 wrap（桌面端右侧额外留 96px 给浮动客服栏），
   它里面的内容又套了一层 .wrap —— 详情页的 .pdp-hero / .pdp-cols，以及各页面的
   <section class="wrap sec"> 都是。同一块留白被算了两遍：
     详情页右边那条空槽 = 96(外层) + 96(内层) = 192px（用户截图里红框那条竖空白）。
   修法：内层 .wrap 的左右留白清零（外层已经留好），内容直接贴到外层留白线上。
     → 详情页右边空槽 192px → 96px（= 客服栏占位 88 + 8px 间隙，不再有多余空槽）
     → 正文左边也多出 56px，版心不再「窄且偏左」
     → 右竖线与顶栏/导航/首屏/页脚重新对齐（原来详情页右边比全站多缩进一层）。
   ⚠ 写在文件末尾：特异性 (.layout-rail .wrap = 0,2,0) 必须压过前面的 .wrap / .sec。 */
.layout-rail .wrap,
.layout-solo .wrap{padding-left:0;padding-right:0;max-width:none}

/* ========== 首屏轮播：产品图「侧边淡入 + 10%→120% 缩放」入场（2026-11-03 老板需求） ==========
   需求：产品图从侧边淡入，淡入过程中从产品的 10% 放大到 120%，停住后轮播再切下一张。
   实现：只动 img.hero-media（视频帧不参与，保持原样）；
     · 入场动画 2.4s：透明度 0→1，translateX ±56%→0（侧边飞入），scale .1→1.2；
     · 奇数帧从左侧进、偶数帧从右侧进（nth-child 基于 .slides 的子元素序）；
     · 非当前帧恒定 scale(1.2)：切走瞬间不会从 1.2 跳回 1 再淡出；
     · 轮播间隔 6s（site.js），入场 2.4s 后停在 120% 等待切换。
   ⚠ 写在文件末尾，压过上方 .hero-media 基础规则。 */
@keyframes heroImgInL{
  0%{opacity:0;transform:translateX(-56%) scale(.1)}
  55%{opacity:1}
  100%{opacity:1;transform:translateX(0) scale(1.2)}
}
@keyframes heroImgInR{
  0%{opacity:0;transform:translateX(56%) scale(.1)}
  55%{opacity:1}
  100%{opacity:1;transform:translateX(0) scale(1.2)}
}
.slide img.hero-media{transform:scale(1.2)}
.slide.is-active img.hero-media{animation:heroImgInL 2.4s cubic-bezier(.22,.61,.36,1) both;will-change:transform,opacity}
.slide.is-active:nth-child(even) img.hero-media{animation-name:heroImgInR}
@media (prefers-reduced-motion:reduce){
  .slide img.hero-media{transform:none}
  .slide.is-active img.hero-media{animation:none}
}


/* 🔴 2026-11-03 防御：手机端加载瞬间个别区块把页面撑出横向滚动（320px 实测瞬态 19-2568px 后自愈）。
   clip 不产生滚动容器、不破坏 .site-hd sticky 吸顶（overflow:hidden 会），旧浏览器不识别则自动忽略。 */
@media (max-width:768px){body{overflow-x:clip}}


/* ========== 轮播切换方式（2026-11-04 老板需求：后台「首页轮播」顶部可选） ==========
   side = 侧边飞入 + 放大（默认，上面的 heroImgInL/R）；
   fade = 纯渐入淡出（关掉入场动画，只走 .slide opacity 0.5s 过渡）；
   zoom = 原地放大渐入（0.9 → 1.2，无左右位移）。
   ⚠ 必须写在本文件末尾：要压过上面 nth-child(even) 的 animation-name 规则。 */
@keyframes heroZoomIn{
  0%{opacity:0;transform:scale(.9)}
  55%{opacity:1}
  100%{opacity:1;transform:scale(1.2)}
}
.hero-slider.effect-fade .slide img.hero-media{transform:none}
.hero-slider.effect-fade .slide.is-active img.hero-media,
.hero-slider.effect-fade .slide.is-active:nth-child(even) img.hero-media{animation:none}
.hero-slider.effect-zoom .slide.is-active img.hero-media,
.hero-slider.effect-zoom .slide.is-active:nth-child(even) img.hero-media{animation-name:heroZoomIn}
@media (prefers-reduced-motion:reduce){
  .hero-slider.effect-fade .slide img.hero-media,
  .hero-slider.effect-zoom .slide img.hero-media{transform:none}
  .hero-slider.effect-fade .slide.is-active img.hero-media,
  .hero-slider.effect-zoom .slide.is-active img.hero-media,
  .hero-slider.effect-zoom .slide.is-active:nth-child(even) img.hero-media{animation:none}
}

/* 遮罩深浅（后台「首页轮播→遮罩深浅」，2026-11-04 老板需求）
   标准档 = .slide-shade 原值 rgba(10,13,20,.55/.30/.72)；浅档约打 55 折，深档约乘 1.35 封顶 */
.hero-slider.dim-light .slide-shade{background:linear-gradient(180deg,rgba(10,13,20,.30) 0%,rgba(10,13,20,.16) 45%,rgba(10,13,20,.42) 100%)}
.hero-slider.dim-dark .slide-shade{background:linear-gradient(180deg,rgba(10,13,20,.74) 0%,rgba(10,13,20,.46) 45%,rgba(10,13,20,.85) 100%)}

/* 视频页「加载更多」按钮行（2026-11-05：104 个视频一页太重，改为 24 个/批） */
.vid-more-wrap{text-align:center;margin-top:28px}

/* 「Why Buyers」卡片收矮（2026-11-05）：插图完整显示不裁切；描述默认折叠 */
.why-card{padding:16px 18px}
.why-card__img{height:140px;object-fit:contain;margin-bottom:10px}
.why-card h3{font-size:1.02rem;line-height:1.35}
.why-card details.why-more{margin-top:8px}
.why-card details.why-more summary{cursor:pointer;user-select:none;list-style:none;color:var(--brand);font-size:.85rem;font-weight:600}
.why-card details.why-more summary::-webkit-details-marker{display:none}
.why-card details.why-more summary:after{content:' +'}
.why-card details.why-more[open] summary:after{content:' –'}
.why-card details.why-more p{margin-top:8px;font-size:.9rem;line-height:1.6}

/* 首页区块间距收紧（2026-11-05 老板反馈）：.sec 默认上下 56px，相邻区块间 112px 太松；
   首页区块（secWrap 带 .sec-home）收到 34px，区间 68px。写在文件末尾压过前面的 .sec */
.sec-home{padding-top:34px;padding-bottom:34px}

/* 首页模块间距二次收紧（2026-11-05 老板反馈「还是有点空」）：
   区块上下 34→22px；网格距标题 24→16px；按钮行/引言段落下边距清零；CTA 横幅上边距 56→24px */
.sec-home{padding-top:22px;padding-bottom:22px}
.sec-home .sec-h{margin-bottom:.35em}
.sec-home .sec-lead{margin-bottom:0}
.sec-home .center{margin-bottom:0}
.sec-home .prod-grid,.sec-home .cat-grid,.sec-home .why-grid,.sec-home .vid-grid,
.sec-home .post-grid,.sec-home .sol-grid,.sec-home .sol-grid-lg,.sec-home .news-split,
.sec-home .gal-grid{margin-top:16px}
.cta-band{margin-top:24px}

/* ========== 2026-11-07 首页版式微调（老板反馈） ==========
   ① 主推产品区一行固定 4 张，与上方 4 列模块对齐，卡片不再被拉成 3 个大块；
   ② 流程卡 / 应用场景卡的文字区收矮：视觉限行 + 字号行高收紧；
   ③ 图片尺寸、比例、裁切一律不动（.pcard-img / .step-img / .sol-card__img 保持原样）；
   ④ 限行只是视觉裁切，文案全文仍在页面 HTML 里，点卡片进详情可看完整，SEO 不受影响。 */
@media (min-width:1000px){
  .sec-home .prod-grid--home4{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
}
@media (min-width:769px) and (max-width:999px){
  .sec-home .prod-grid--home4{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}
/* 4 列后卡片变窄，标题略收字号，避免挤成四五行 */
.sec-home .prod-grid--home4 .pcard-name{font-size:.92rem}
.sec-home .prod-grid--home4 .pcard-short{font-size:.8rem;line-height:1.45}
/* 产品不足 4 个时的占位卡：与其它卡等高，补齐整行 */
.pcard-wrap--more{border-style:dashed;background:var(--bg-2)}
.pcard-wrap--more .pcard{align-items:center;justify-content:center;gap:10px;padding:24px 14px;
  text-align:center;background:transparent;border:0;color:var(--brand)}
.pcard-more__plus{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:50%;background:var(--brand);color:#fff;font-size:1.7rem;font-weight:300;line-height:1}
.pcard-more__title{font-size:.94rem;line-height:1.4}
/* 流程 5 步：描述限 4 行，标题/编号间距略收；图片规则不动 */
.sec-home .steps h3{font-size:.98rem;line-height:1.35;margin-top:0}
.sec-home .steps p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;
  overflow:hidden;font-size:.85rem;line-height:1.45}
.sec-home .step-n{margin-bottom:6px}
/* 应用场景卡：描述限 3 行；图片规则不动 */
.sec-home .sol-card{gap:6px}
.sec-home .sol-card span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;
  overflow:hidden;font-size:.85rem;line-height:1.45}

/* 2026-11-07 布局修复：原用于 grid 列的 sticky!important 已废弃 —— 现 .cat-rail 改为 fixed 贴左缘吸顶，
   主内容区不再依赖 grid 第二列，删除该强制规则以免覆盖 fixed 定位。 */

/* 2026-11-07 老板反馈：证书自定义模块（.home-custom）的版式与其它首页模块不一致
   ① 标题/副标题原本跟随 .cert-show 的 text-align:center，与全站其它模块的 .sec-h（左对齐）错位；
      用更高特异性选择器覆盖为 left，使其与「Meet Our Sales Team」等模块标题左对齐。
   ② 该模块是 .sec 但不是 .sec-home，于是继承了 .sec 默认 56px 上下内边距，
      而其它首页模块已被收紧到 16px —— 导致「销售团队 → 证书」之间出现大段空白、整体显散；
      统一收成 16px，整页模块节奏一致。 */
.sec.home-custom .cert-show__title,
.sec.home-custom .cert-show__sub{ text-align:left; }
.sec.home-custom{ padding-top:16px; padding-bottom:16px; }

/* ============================================================
   2026-11-07 首页布局整体优化（让客户「舒服 / 整洁 / 耐看」）
   目标：① Hero 不再空旷、行动按钮清晰双档；② 全站按钮三级统一；
   ③ 认证信任条可读；④ 导航桌面端尽量单行不换行；⑤ 右侧浮动挂件收敛不拥挤；
   ⑥ 缺图时显示干净占位（取代硬灰块）；⑦ 模块间距节奏统一。
   ============================================================ */

/* —— ① Hero 轮播：增强可读性 + 双按钮行动区，告别「大片黑留白」—— */
.hero-slider .slides{height:560px}
.slide-shade{background:linear-gradient(180deg,rgba(10,13,20,.35) 0%,rgba(10,13,20,.18) 42%,rgba(10,13,20,.82) 100%)}
.slide-inner{bottom:0;padding:0 var(--pad) 56px}
.slide-title{font-size:2.1rem;line-height:1.16;max-width:780px}
.slide-sub{font-size:1.08rem;line-height:1.6;margin-bottom:1.5em}
.slide-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.slide-cta-2{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:6px;
  border:1.5px solid rgba(255,255,255,.82);color:#fff;font-weight:600;background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:background .15s,border-color .15s,transform .15s}
.slide-cta-2:hover{background:rgba(255,255,255,.2);border-color:#fff;text-decoration:none;transform:translateY(-1px)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0}
.hero-actions .btn{margin:0}
@media (max-width:768px){.hero-slider .slides{height:460px}.slide-title{font-size:1.6rem}.slide-sub{font-size:.98rem}}

/* —— ② 按钮三级体系：主 CTA 实心橙 / 次 CTA 描边 / 文字链接；统一悬浮微动 —— */
.btn{transition:background .15s,border-color .15s,box-shadow .15s,transform .15s}
.btn-primary{box-shadow:0 2px 8px rgba(226,73,43,.20)}
.btn-primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);transform:translateY(-1px);box-shadow:0 5px 16px rgba(226,73,43,.28);text-decoration:none}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-dark);transform:translateY(-1px)}
/* 产品卡「加入购物车」用主色实心，和「查看全部」描边次级区分开，行动更清晰 */
.pcard-add.btn-primary{width:100%}

/* —— ③ 认证信任条：字更大更清晰、与白底模块拉开层次 —— */
.trust-band{background:var(--bg-soft);border-bottom:1px solid var(--line)}
.trust-inner{padding:20px var(--pad)}
.cert-chips{gap:8px;margin-bottom:6px}
.cert-chips li{font-size:.86rem;color:var(--ink);padding:6px 15px;border-color:var(--line-2)}
.trust-note{font-size:.82rem;color:var(--ink-2);margin-top:2px}

/* —— ④ 导航：桌面端收紧，尽量避免两行换行 —— */
.nav{gap:2px}
.nav>a{padding:8px 9px;font-size:.92rem}
.nav-row{gap:18px}
.nav .btn-quote{margin-left:6px;padding:9px 15px;font-size:.9rem}
.nav-search{width:172px;margin-left:14px}
@media (min-width:1200px) and (max-width:1320px){.nav>a{padding:8px 7px;font-size:.88rem}.nav-search{width:150px}.nav-row{gap:14px}}

/* —— ⑤ 右侧浮动挂件：收敛尺寸与间距，不再拥挤 —— */
.float-bar{right:12px;gap:7px}
.fb-btn,.fb-toggle{width:46px;height:46px}
.fb-toggle{width:52px;height:52px}
.fb-btn svg{width:22px;height:22px}
.fb-label{font-size:.52rem}

/* —— ⑥ 缺图占位：干净中性占位图，取代生硬灰块（全语言通用，无中文硬编码）——
   注：真实产品/分类/案例图需老板在后台上传，这是「图未填」时的体面兜底。 */
:root{--ph-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa4b2' stroke-width='1.4'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.6'/%3E%3Cpath d='M21 17l-5-5-4 4-3-3-6 6'/%3E%3C/svg%3E")}
.pcard-img,.cat-card__imgw,.sol-card__img,.gal-item,.post-cover{background-color:var(--bg-2);background-image:var(--ph-icon);background-repeat:no-repeat;background-position:center;background-size:46px}
.pcard-img.img-fallback::after{content:""}
.cat-card__imgw{background-size:54px}
.sol-card__img{background-size:50px}
.gal-item{background-size:40px}
/* 分类卡图片：与产品卡同款「外层占位容器 + 内层图片」结构——
   破图时 onerror 隐藏 img，外层保持同尺寸占位块，整行卡片高度一致 */
.cat-card__imgw{display:block;width:calc(100% + 36px);margin:-18px -18px 12px;aspect-ratio:4/3;border-radius:var(--radius) var(--radius) 0 0;overflow:hidden}
.cat-card__ph{display:block;width:100%;height:100%;object-fit:cover}

/* —— ⑧ 首页「产品分类」固定 4 列：4 个分类正好一排，不再出现 3+1 孤行 —— */
.sec-home .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:18px}
@media (max-width:1024px){.sec-home .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.sec-home .cat-grid{grid-template-columns:1fr}}

/* —— ⑦ 模块间距节奏：首页区块统一呼吸感 —— */
.sec-home{padding-top:40px;padding-bottom:40px}
.sec-home .sec-h{font-size:1.5rem}
.sec-home .sec-lead{font-size:1.04rem;color:var(--ink-2);margin-bottom:4px}

/* ===== W11：RTL 镜像（阿拉伯语 ar / 波斯语 fa）=====
   仅追加，不改动上方任何既有规则；html 的 dir 属性由视图层依据
   lib/i18n.js 的 LANG_META[lang].dir 输出（ar/fa 为 rtl）。
   全部规则以 [dir="rtl"] 限定作用域，LTR 页面零影响。 */

/* 1) 书写方向：设为 rtl 后，text-align 初始值(start)、flex row 主轴、
      grid 行内轴都会自动跟随书写方向镜像，无需逐容器写 row-reverse。 */
[dir="rtl"], [dir="rtl"] body { direction: rtl; }

/* 2) 文本对齐：把显式的物理 left/right 互换（居中保持居中） */
[dir="rtl"] .center, [dir="rtl"] .text-center { text-align: center; }
[dir="rtl"] .text-left, [dir="rtl"] .lang-more-btn,
[dir="rtl"] [style*="text-align:left"] { text-align: right; }
[dir="rtl"] .text-right, [dir="rtl"] .sub-all,
[dir="rtl"] [style*="text-align:right"] { text-align: left; }
[dir="rtl"] .text-start { text-align: right; }
[dir="rtl"] .text-end { text-align: left; }

/* 3) flex / grid 方向：direction:rtl 已让 row / grid 行内轴自动反向；
     这里只对显式反向工具类与 justify 起止做抵消，不覆盖任何现有容器的 flex-direction。 */
[dir="rtl"] .flex-row-reverse { flex-direction: row; }
[dir="rtl"] .justify-content-start { justify-content: flex-end; }
[dir="rtl"] .justify-content-end { justify-content: flex-start; }
[dir="rtl"] .grid-flow-col { direction: rtl; }

/* 4) margin / padding / float 左右互换（命中方向性工具类与常用物理间距） */
[dir="rtl"] .fr { float: left; }
[dir="rtl"] .fl { float: right; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }
[dir="rtl"] .ml-1, [dir="rtl"] .ml-2, [dir="rtl"] .ml-3 { margin-left: 0; margin-right: .5rem; }
[dir="rtl"] .mr-1, [dir="rtl"] .mr-2, [dir="rtl"] .mr-3 { margin-right: 0; margin-left: .5rem; }
[dir="rtl"] .pl-1, [dir="rtl"] .pl-2, [dir="rtl"] .pl-3 { padding-left: 0; padding-right: .5rem; }
[dir="rtl"] .pr-1, [dir="rtl"] .pr-2, [dir="rtl"] .pr-3 { padding-right: 0; padding-left: .5rem; }
/* 站点里 list / lead 用 padding-left + border-left 做左缩进，RTL 下把内边距改到右侧并去掉左装饰边框 */
[dir="rtl"] .lang-sub, [dir="rtl"] .rail-sub.rail-l3,
[dir="rtl"] .sol-item, [dir="rtl"] .pdp-lead, [dir="rtl"] .art-lead,
[dir="rtl"] .tick-list li { padding-left: 0; padding-right: 1em; border-left: 0; }

/* 5) 列表 / 表格对齐 */
[dir="rtl"] ul, [dir="rtl"] ol,
[dir="rtl"] .prose-list, [dir="rtl"] .tick-list { padding-left: 0; padding-right: 1.3em; }
[dir="rtl"] th, [dir="rtl"] td,
[dir="rtl"] .spec-table th, [dir="rtl"] .spec-table td,
[dir="rtl"] caption { text-align: right; }
[dir="rtl"] table { direction: rtl; }

/* 6) 右侧固定定位元素翻到左侧（物理 left/right 不跟随 direction） */
[dir="rtl"] .float-bar { right: auto; left: 12px; }
[dir="rtl"] .vid-inline-x { right: auto; left: 8px; }
[dir="rtl"] .fb-cart .cf-count { right: auto; left: -3px; }

/* 7) 方向性箭头 / 雪佛龙 / 播放三角水平镜像（精确命中，不翻普通图片） */
[dir="rtl"] .icon-arrow, [dir="rtl"] .icon-chevron,
[dir="rtl"] .arrow-icon, [dir="rtl"] .chevron-icon,
[dir="rtl"] .arrow, [dir="rtl"] .chevron,
[dir="rtl"] .rail-caret, [dir="rtl"] .vid-play-ico { transform: scaleX(-1); }