/* ==========================================================================
   智境凡创 · 官网前台样式（Header / Footer / 各版块组件）
   --------------------------------------------------------------------------
   仅承载「官网前台」独立组件：base.css 已提供设计令牌与通用组件
   （.btn / .card / .input / .badge / .table / .tabs / .accordion / .pagination
     / .section / .container / .grid-* / .notice / .chip / .breadcrumb ...），
   本文件只做官网特有版块 + 必要的少量覆盖。
   加载顺序：base.css → site.css，因此本文件可用同权重选择器覆盖 base。
   ========================================================================== */

/* ------------------------------------------------------------------ 变量 */
:root {
  /* v1.27.0：`--top-grad` / `--top-text*` / `--top-line` / `--top-accent` / `--top-amber*`
     这一组「顶部深色暖调渐变」已上移到 **base.css 的 :root**。
     原因：后台与订货系统的顶栏也要用同一套渐变（用户要求「和首页顶部一致」），
     而它们只引 base.css + admin.css，不引 site.css —— 留在 site.css 里就取不到，
     只能在 admin.css 里另抄一份，那样以后一定会漂移。这里保留注释指向新位置。 */
}

/* ==========================================================================
   1. 深色底薄纱：body.site 是全站黑→金渐变，内容区需要浅色薄纱才能保证深字可读
   ========================================================================== */

main#page,
#page,
.layout,
.layout-main,
.page-wrap,
.site-main,
#site-footer { background: transparent !important; }

/* v1.65.415：区块底色全线走「配色主题」令牌（后台「网站配色 → 配色主题」可自定义）——
   · 深底区块（:not(.on-light)）的底色在**文件末尾** v1.65.111 块（!important，
     值 = var(--theme-site-section) / var(--theme-site-section-alt)）；
   · 本块只负责「明暗自适应判为浅底 / 被强制浅底」的区块（.on-light）：
     固定浅纱底（白纱 52% / 58% 叠在深色页面底上），与 v1.65.6 起的浅底外观一致。
   ⚠️ 改前这里写的是 `var(--theme-site-section, rgba(11,11,14,.70))` 且不带 .on-light
      限定 —— 可 base.css :root 里的 --theme-site-section 是 rgba(255,255,255,.52)，
      fallback 被屏蔽，v1.65.6 想要的「浅黑 70%」从未真正生效过（v1.65.415 对齐真实渲染）。 */
.section.on-light,
.section-sm.on-light,
.section-lg.on-light { background: rgba(255, 255, 255, .52); }

/* 交替区块：比主区块略深一点，保持「深浅交替」的节奏 */
.section.alt.on-light,
.section.section-soft.on-light { background: rgba(255, 255, 255, .58) !important; }

/* 内页首屏 */
.page-hero { background: rgba(11, 11, 14, .70) !important; }

/* --------------------------------------------------------------------------
   v1.65.6 配套：浅色区块变深底后，区块内文字统一提亮。
   为什么必须一起改：这些区块里的标题 / 说明 / 列表文字原本继承
   --ink-950（近黑）、--text-2/3（深灰），在浅底上正常；底色换成浅黑后
   就是典型的「深底深字」，标题会直接糊掉（与 v1.65.3-b 二级菜单同类问题）。

   做法：在区块作用域内把文字色变量**就地覆盖**为浅色系，
   这样区块内部所有用 var(--text-*) / var(--ink-*) 的元素自动跟着变，
   不必逐个改选择器。
   ⚠️ 作用域要排除 .section-dark（本来就深底白字）与 .section.has-bg
      （配了背景图的区块，v1.38 起已有独立的深底白字规则）。
   -------------------------------------------------------------------------- */
.section:not(.section-dark):not(.has-bg),
.section-sm:not(.section-dark):not(.has-bg),
.section-lg:not(.section-dark):not(.has-bg),
.page-hero:not(.has-bg) {
  --ink-950: #FFFFFF;
  --ink-900: #FFFFFF;
  /* v1.65.415：标题色走 var(--theme-site-text, var(--ink-950))，
     深底区块里必须把令牌本身也翻浅，否则用户自定义过正文文字色后会深底深字 */
  --theme-site-text: #FFFFFF;
  --text-1: rgba(255, 255, 255, .96);
  --text-2: rgba(255, 255, 255, .82);
  --text-3: rgba(255, 255, 255, .66);
  --line: rgba(255, 255, 255, .18);
  --line-2: rgba(255, 255, 255, .12);
  --surface: rgba(255, 255, 255, .10);
  --surface-2: rgba(255, 255, 255, .08);
  --surface-3: rgba(255, 255, 255, .06);
}
/* ==========================================================================
   白底容器内文字必须保持深色 —— 把变量还原成 base.css :root 的原始值。
   --------------------------------------------------------------------------
   ⚠️ v1.65.8 修：上一版只还原了 .data-card / .product-card 等几个类，**漏了 .card**
      （官网到处在用：联系我们页三张联系卡、留言表单卡、承诺条目卡…），
      结果白底上出现白字 —— 用户反馈「好多页面内容都看不见了」。

   ⚠️⚠️ v1.65.168【全局明暗锁定 · 终版】本清单**不再挂任何祖先条件**。
      老写法 `.section:not(.section-dark):not(.has-bg) .card` 有四个致命缺口：
        ① 漏了 .section-sm / .section-lg —— 服务支持页三张入口卡就在 .section-sm 里；
        ② 漏了 .has-bg（配了 banner 背景图的区块）；
        ③ 漏了 .section-dark；
        ④ 漏了 section 之外的容器（页头、抽屉、portal/admin 壳体）。
      祖先条件只要漏一种，白底卡就继承到上方「深底翻白」后的白色变量 → 白底白字。
      新写法：凡**自带浅实底**的组件，**就地**把文字变量钉成深色，
      无论身处深底区块 / 浅底区块 / 背景图区块 / 页头，规则恒定成立 ——
      这就是用户要求锁死的那条：「底色浅→字深，底色深→字浅，全站不允许任何例外」。

      白底实卡清单（与下方「卡片始终为实底白」及 .spec-table / .service-step 逐条对齐）：
        .product-card / .doc-row / .card / .info-card / .data-card / .spec-table
        + .cat-card（浅紫底，同样需要深字）
        + .service-step / .pd-price-box（浅底盒）
      ⚠️ 刻意**不含** .solution-card / .case-card：这两张卡体无实底、直接压在深底上，
         由 v1.65.112 的 `:not(.on-light)` 规则统一翻白字（深底浅字），不可混入本清单。
   ========================================================================== */
:is(.product-card, .doc-row, .card, .info-card, .data-card, .spec-table,
  .cat-card, .service-step, .pd-price-box) {
  --ink-950: #000000;
  --ink-900: #0A0A0A;
  /* v1.65.415：白底实卡的标题/正文钉深色（明暗锁定），自定义正文文字色不穿透 */
  --theme-site-text: #0A0A0A;
  --text-1: #0A0A0A;
  --text-2: #3F3F45;
  --text-3: #5C5C64;
  --text-mid: #5C5C64;
  --text-low: #7A7A85;
  /* v1.65.146：显式落色——深底区块（adaptive.on-dark）整体翻浅色后，白底卡内的
     裸元素（b 等纯继承色）必须就地还原深色，否则白底白字。
     清单与值均与变量还原一致；浅底区块本就继承同值，外观零变化 */
  color: var(--text-1);
  --line: #E5E5E5;
  --line-2: #F0F0F0;
  --surface: #FFFFFF;
  --surface-2: #F5F5F7;
  --surface-3: #EDEDF0;
}
/* 表单控件：白底卡片里的 input / select / textarea 底色与文字同样要还原，
   否则会变成「半透明浅底 + 白字」，输入框看起来是空的（用户截图里就是这样）。
   v1.65.168：同样去掉祖先条件，全场景成立。 */
:is(.product-card, .doc-row, .card, .info-card, .data-card, .spec-table,
    .cat-card, .service-step, .pd-price-box) :is(input, select, textarea) {
  background-color: #FFFFFF;
  color: var(--text-1);
  border-color: var(--line);
}

/* --------------------------------------------------------------------------
   v1.65.166【全局明暗锁定】凡「自带浅底」的组件，一律**就地落深色字**，
   绝不依赖继承取色 —— 底色浅→字深、底色深→字浅，全站不允许出现浅底浅字。
   背景：深底区块（上面的变量翻转块）会把 --text-* 整体翻白，
   而产品中心的 .cat-fold 分类面板 / .filter-bar / .input / .select 自己铺的是白底，
   却仍按变量取白字 → 「白底白字，下拉内容整片看不见」。
   这里把它们与上方「白底卡还原」对齐，任何区块底色下都保持白底深字。
   v1.65.168：与上面同一原则，选择器去掉全部祖先条件（老写法漏了 .section-sm /
   .section-lg / .has-bg / .section-dark），改为就地无条件锁定。
   --------------------------------------------------------------------------
   ⚠️⚠️ v1.65.203 修正（用户截图反馈）：`.filter-bar` 必须排除 `.filter-combo`。
      `.filter-bar` 自身**没有底色**（上面这行白底是本清单给它补的），
      而产品中心的分类/搜索栏是 `.filter-bar.filter-combo`，四个断点
      （手机 ≤760 / 平板竖屏 / 平板横屏 / PC ≥761）都显式写了
      `background: transparent` —— 于是出现「同一个元素：清单说它是浅底（钉深字），
      媒体查询说它是透明底（实际压在深色区块上）」的矛盾，
      结果就是截图里那行「深底 + 深灰字」的分类标签：
        底色深、字体也深 → 违反用户锁定的规则「底色深→字浅」。
      修正：本清单只作用于**真的铺白底**的 `.filter-bar`；
      `.filter-combo` 交回区块的明暗自适应变量 ——
        深色区块 → --text-2 = rgba(255,255,255,.82) 浅字（正确）；
        .adaptive.on-light 浅色区块 → --text-2 = #3F3F45 深字（同样正确）。
      这样「底色浅→字深 / 底色深→字浅」在任何区块底色下都成立，无需针对元素写死颜色。
      ⚠️ 搜索框不受影响：`.input` / `.select` / `.search-box` 各自在清单里，
         仍是白底 + 深字（浅底浅字同样不允许）。
   -------------------------------------------------------------------------- */
:is(.cat-fold, .cat-fold-head, .cat-fold-body, .filter-bar:not(.filter-combo),
    .input, .select, .search-box, .acct-pop) {
  --ink-950: #000000;
  --ink-900: #0A0A0A;
  --text-1: #0A0A0A;
  --text-2: #3F3F45;
  --text-3: #5C5C64;
  --text-mid: #5C5C64;
  --text-low: #7A7A85;
  --line: #E5E5E5;
  --line-2: #F0F0F0;
  background-color: #FFFFFF;
  color: var(--text-1);
}
/* 面板内的条目：链接色也要钉住，不能被外面的白色继承链带跑 */
:is(.cat-fold-body, .cat-fold-body .fs-item, .cat-fold-body .cf-sub) { color: var(--text-2); }
.cat-fold-head .cf-cur { color: var(--brand-700); }
/* 白底卡内的 label / 提示文字：深灰（浅底深字） */
:is(.product-card, .doc-row, .card, .info-card, .data-card, .spec-table,
    .cat-card, .service-step, .pd-price-box, .cat-fold, .filter-bar:not(.filter-combo)) :is(label, .label, .field-hint) {
  color: var(--text-2);
}

/* 深色版块（首页「产品 + 服务」、关于我们「发展历程」）保持深底白字 */
.section.section-dark { background: var(--ink-900); }

/* --------------------------------------------------------------------------
   v1.65.146 深底区块继承文字翻浅（全局自动适配，含 PC）：
   「底色深→字浅、底色浅→字深」。浅底分支（adaptive.on-light）v1.65.71 已有；
   深底分支此前只覆盖了 CSS 变量——用 var() 取色的元素（h2/h4/.text-*）能翻白，
   但裸 p / b 等**直接继承 body 深色**的元素翻不了（如首页「技术文书与售后支持」
   描述段深底深字看不清）。给深底区块显式落浅色，让继承链整体翻过来；
   白底卡内已由上方还原块就地落深色，不会白底白字。
   -------------------------------------------------------------------------- */
.section.adaptive.on-dark,
.section-sm.adaptive.on-dark,
.section-lg.adaptive.on-dark,
.page-hero.adaptive.on-dark {
  color: rgba(255, 255, 255, .96);
}

/* ==========================================================================
   v1.38.0 首页区块背景图：后台「网站背景图」按展示位置铺到对应区块底层
   首屏轮播=hero（原有 hero-bg）· 第二横幅=产品分类 · 第三横幅=解决方案 ·
   第四横幅=行业积累深色区 · 第五横幅=落地案例 · 第六横幅=服务支持。
   v1.39.0：背景效果与首页首屏轮播**完全一致** —— 区块直接复用首屏同一个
   .hero-bg 类（铺满 + 压暗 34% + 深色渐变），不再另写一套白纱样式；
   配了图的区块底色/文字与 .page-hero.has-bg 同一套（深底白字）。
   ⚠️ 没配图的区块没有 .has-bg，本节一条都不命中，外观零改动。
   ========================================================================== */
.section.has-bg {
  position: relative; overflow: hidden;
  /* v1.40.0：底色走「页头 / 首屏」主题令牌（后台「配色主题」可改），
     未自定义时 = 原来的 --top-grad，外观不变 */
  background: var(--theme-site-top, var(--top-grad)) !important;   /* 与首屏同一底色变量 */
  color: #fff;
}
.section.has-bg > .container { position: relative; z-index: 1; }
/* 区块标题文字：与 .hero / .page-hero.has-bg 同一组深底白字颜色 */
.section.has-bg h2 { color: #fff; }
.section.has-bg .section-head p { color: rgba(255, 255, 255, .86); }
/* v1.65.169：eyebrow 在带背景图的区块上统一用暖金（首屏同款），
   不再用 --cyan —— 琥珀径向渐变 hero 上蓝字对比度仅 ~1（违反全局明暗锁定）。
   注：普通 .section 内的 eyebrow 由下方 v1.65 暖金规则覆盖；这里补齐 .hero / has-bg 两处。 */
.hero .eyebrow,
.section.has-bg .eyebrow,
.page-hero.has-bg .eyebrow { color: var(--top-accent, #FFD9AE); }
.section.has-bg .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.section.has-bg .btn-ghost:hover { background: rgba(255, 255, 255, .1); }
/* 白卡在深纱上照常浮起（product-card / case-card / card 已有实底白） */

/* --------------------------------------------------------------------------
   v1.65.71 区块明暗自适应：字色跟着**有效背景**反向，保证所有内容清晰可见
   用户要求：「未上传背景图或背景图处于草稿状态时，字体颜色依据背景颜色
   调整为和背景色反向的颜色——背景浅字就深、背景深字就浅，所有内容清晰可见。」

   JS（site.js › runAdaptiveContrast）对每个区块判定并挂类：
     ① 区块里 .hero-bg 的背景图**真的加载出来了** → 图上有压暗纱，维持深底白字（.on-dark）；
     ② 没图 / 图是草稿没下发 / 图 404 → 把「区块半透明底 → 页面底 → body 底」
        逐层 alpha 合成出有效底色，亮度 ≥ 120（0-255）判为浅底 → 挂 .on-light；
     ③ 图片异步加载完成 / 404、路由重渲染都会重扫一遍（见 site.js 的观察器）。

   本节只认 .adaptive.on-light 一套新变量：.on-dark 就是上方 v1.65.6 的白字变量
   （缺省即它，不重复声明）。
   ⚠️ 特异性与上方 `.section:not(.section-dark):not(.has-bg)` 同级（0,3,0），
      全靠「写在后面」取胜 —— 本块位置不能上移。
   -------------------------------------------------------------------------- */
.section.adaptive.on-light,
.page-hero.adaptive.on-light {
  --ink-950: #0A0A0A;
  --ink-900: #0A0A0A;
  /* v1.65.415：浅底区块的标题色同样钉深（自定义正文文字色不穿透浅底区块） */
  --theme-site-text: #0A0A0A;
  --text-1: #0A0A0A;
  --text-2: #3F3F45;
  --text-3: #5C5C64;
  --line: #E2E2E6;
  --line-2: #EDEDF0;
  --surface: #FFFFFF;
  --surface-2: #F5F5F7;
  --surface-3: #EDEDF0;
}

/* --------------------------------------------------------------------------
   v1.65.73 背景图每图自定义参数之「文字明暗」：图上带 data-text-mode（后台选了
   强制白字 / 强制深字）时 runAdaptiveContrast 跳过自动判定直接挂类。
   auto（缺省）走上方自动判定，本节不命中 —— 老数据外观逐像素不变。
   强制「浅底深字」时，原先写死的白色文字与深色纱必须一起翻浅，否则深字印深纱
   等于白改。以下选择器全部带 .adaptive.on-light 前缀，特异级高于对应的白字规则。
   -------------------------------------------------------------------------- */
.section.section-dark.adaptive.on-light { background: var(--surface-2); }  /* 深色区块被强制浅字时底也翻浅 */
.section.has-bg.adaptive.on-light { color: var(--text-1); }
.section.has-bg.adaptive.on-light h2 { color: var(--text-1); }
.section.has-bg.adaptive.on-light .section-head p { color: var(--text-2); }
.section.has-bg.adaptive.on-light .btn-ghost { color: var(--text-1); border-color: rgba(10, 10, 10, .4); }
.section.has-bg.adaptive.on-light .btn-ghost:hover { background: rgba(10, 10, 10, .06); }
.section.has-bg.adaptive.on-light .sc-body h3,
.section.has-bg.adaptive.on-light .k-body h4 { color: var(--text-1); }
.section.has-bg.adaptive.on-light .sc-body p,
.section.has-bg.adaptive.on-light .k-body p { color: var(--text-2); }
.section.has-bg.adaptive.on-light .sc-tags span {
  background: rgba(10, 10, 10, .07);
  border-color: rgba(10, 10, 10, .22);
  color: var(--text-1);
}
.section.has-bg.adaptive.on-light .k-meta { color: var(--text-3); border-top-color: var(--line-2); }
.section.has-bg.adaptive.on-light .empty { color: var(--text-3); }
.hero.adaptive.on-light { color: var(--text-1); }
.hero.adaptive.on-light h1 { color: var(--text-1); }
.hero.adaptive.on-light .hero-sub { color: var(--text-2); }
.hero.adaptive.on-light .hero-stat b { color: var(--text-1); }
.hero.adaptive.on-light .hero-stat > span { color: var(--text-3); }
.hero.adaptive.on-light .hero-stats { border-top-color: var(--line-2); }
.hero.adaptive.on-light .hero-dots button { background: rgba(10, 10, 10, .25); }
.hero.adaptive.on-light p,
.hero.adaptive.on-light .eyebrow,
.page-hero.has-bg.adaptive.on-light .eyebrow,
.page-hero.has-bg.adaptive.on-light p { text-shadow: none; }
.page-hero.has-bg.adaptive.on-light { color: var(--text-1); }
.page-hero.has-bg.adaptive.on-light h1 { color: var(--text-1); }
.page-hero.has-bg.adaptive.on-light p { color: var(--text-2); }
.page-hero.has-bg.adaptive.on-light .breadcrumb,
.page-hero.has-bg.adaptive.on-light .breadcrumb a { color: var(--text-3); }
.page-hero.has-bg.adaptive.on-light .breadcrumb .current { color: var(--text-1); }
.page-hero.has-bg.adaptive.on-light .breadcrumb a:hover { color: var(--text-1); }
/* 深纱翻白纱：强制浅底深字时仍压深渐变纱会前功尽弃 */
.adaptive.on-light .hero-bg::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .5) 46%, rgba(255, 255, 255, .88) 100%);
}

/* --------------------------------------------------------------------------
   v1.46.5：铺了背景图的区块里，凡是直接压在图上的原深色文字一律自动转白。
   方案卡（.solution-card）/ 案例卡（.case-card）卡体无实底，标题/描述/标签
   直接叠在背景图上 —— 深色字在暗图上不可读，全部转白；
   浅色标签底（.sc-tags span 的 --surface-2）同步改半透明白底 + 白字。
   ⚠️ 实底白卡（.card / .cat-card）不在此列：白底上的深色文字保持不变，
      否则会变成白底白字。没配图的区块没有 .has-bg，本节一条都不命中。
   -------------------------------------------------------------------------- */
.section.has-bg .solution-card,
.section.has-bg .case-card { border-color: rgba(255, 255, 255, .24); }
.section.has-bg .sc-body h3 { color: #fff; }
.section.has-bg .sc-body p { color: rgba(255, 255, 255, .8); }
.section.has-bg .sc-tags span {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
}
.section.has-bg .k-body h4 { color: #fff; }
.section.has-bg .k-body p { color: rgba(255, 255, 255, .8); }
.section.has-bg .k-meta { color: rgba(255, 255, 255, .66); border-top-color: rgba(255, 255, 255, .22); }
.section.has-bg .empty { color: rgba(255, 255, 255, .66); }

/* 深色容器内重定义中性色令牌，修正 JS 内联 style="color:var(--text-low)" 的可读性 */
.section-dark,
[style*="grad-ink"],
.page-hero[style*="ink-900"],
.site-footer {
  --text-mid: rgba(255, 255, 255, .78);
  --text-low: rgba(255, 255, 255, .62);
}

/* 卡片始终为实底白，浮在薄纱之上
   v1.65.415：底色改走「配色主题 → 卡片底色」令牌（var(--theme-site-card)）——
     未自定义时令牌默认 = #FFFFFF，外观与改前逐像素一致；后台改「卡片底色」，
     这一组卡片整体跟着变（改前写死 #fff，把 base.css .card 的 var(--surface)
     和后台令牌一起闷死，用户投诉「配色主题没关联到规则」的实锤之一）。 */
.product-card,
.doc-row,
.card,
.info-card,
.data-card { background-color: var(--theme-site-card, #fff); }

/* 分类卡：客户指定浅紫底 80% 不透明 */
.cat-card { background-color: rgba(237, 233, 254, .8) !important; }

/* ==========================================================================
   2. 顶栏（38px 联系方式条）与页头（sticky 68px）
   ========================================================================== */

.topbar {
  position: relative;
  z-index: 901;
  height: 38px;
  background: var(--theme-site-top, var(--top-grad));
  border-bottom: 1px solid var(--top-line);
  color: var(--top-text-2);
  font-size: 12.5px;
}
.topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 100%;
}
.tb-left, .tb-right { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tb-left > span { display: inline-flex; align-items: center; white-space: nowrap; }
.tb-right { gap: 14px; white-space: nowrap; }
.tb-right a { color: var(--top-text); }
.tb-right a:hover { color: var(--top-accent); }
.tb-right b { font-family: var(--font-num); font-size: 14px; font-weight: 700; letter-spacing: .01em; }

.dot {
  width: 7px; height: 7px; flex: none; margin-right: 8px;
  background: var(--brand);
  animation: dotPulse 2.4s var(--ease) infinite;
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--header-h);
  background: var(--theme-site-top, var(--top-grad));
  border-bottom: 1px solid var(--top-line);
  transition: box-shadow .26s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .9); }
.site-header .container {
  display: flex; align-items: center; gap: 22px; height: 100%;
}

/* ------------------------------------------------------------------- Logo */
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo img { height: 36px; width: auto; }
.logo-text { display: block; line-height: 1.12; }
.logo-text b {
  display: block; color: #fff; font-size: 17px; font-weight: 700;
  letter-spacing: .02em; margin: 0;
}
.logo-text span {
  display: block; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--top-text-2);
}

/* -------------------------------------------------------------- 主导航 */
.nav { display: flex; align-items: center; margin-left: 6px; }
.nav > a,
.nav-item > a {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  height: var(--header-h); padding: 0 15px;
  font-size: 14.5px; font-weight: 500; color: var(--top-text);
  white-space: nowrap;
}
.nav > a::after,
.nav-item > a::after {
  content: "";
  position: absolute; left: 15px; right: 15px; bottom: 14px; height: 2px;
  background: var(--top-amber-2);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .26s var(--ease);
}
/* v1.65.5：选中 / 悬停态与常态**同色**（--top-text，92% 白）。
   原来这里写的是 `color: #fff`（纯白）—— 纯白在深色页头背景上会产生
   **光渗（halation）**，笔画看起来变粗、整体显得比旁边大一号，
   用户实测反馈「产品中心的字体大小和颜色要和「服务支持」一样」。

   实测结论（jsdom 量取 computed style）：各项字号本就是同一值
   （16.8px，v1.13.10 设定）、字重同为 500，差异**只来自颜色**：
     · 未选中 → var(--top-text) = rgba(255,255,255,.92)
     · 选中   → #fff
   所以只需把选中/悬停色改回 var(--top-text) 即可视觉完全一致。
   选中状态的区分仍由下方的琥珀色下划线（::after）承担。 */
.nav > a:hover,
.nav > a.is-active,
.nav-item > a:hover,
.nav-item.is-active > a { color: var(--top-text); }
.nav > a:hover::after,
.nav > a.is-active::after,
.nav-item:hover > a::after,
.nav-item.is-active > a::after { transform: scaleX(1); }

.nav-item { position: relative; }
.nav-item > a > svg { opacity: .55; transition: transform .24s var(--ease); }
.nav-item:hover > a > svg { transform: rotate(180deg); }

/* 下拉面板：v1.65.3 由「白底深字」改为**浅黑半透明底 + 白字**
   （与后台顶栏 .tn-menu 同步）。原来白底在深色页头下显得突兀，
   且浮层压在深色 hero 图上时白块过于抢眼。
   v1.65.3-b：不透明度 55% → 70%（用户要求），底下内容透出更少、文字更清晰。 */
.site-header .nav-sub {
  position: absolute; top: 100%; left: 0; z-index: 30;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  min-width: 320px;
  margin: 0; padding: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0 0 var(--radius) 0;
  background: rgba(11, 11, 14, .70);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 26px 56px -30px rgba(0, 0, 0, .62);
}
.site-header .nav-sub-list { grid-template-columns: minmax(0, 1fr); min-width: 268px; }
.nav-item:hover > .nav-sub,
.nav-item:focus-within > .nav-sub { display: grid; }

/* v1.65.3-b：浮层内**所有**文字统一为浅白色系。
   原来 .ns-all / .ns-body b 用的是 --ink-950（近黑）、计数与描述用 --text-3（深灰），
   在深色底上就是截图里那种「深底深字」，几乎读不出来。
   分隔线（--line-2 深色）同理改为半透明白。 */
.nav-sub a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .84);
}
.nav-sub a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-sub a.is-current { background: rgba(255, 255, 255, .18); color: #fff; }
.nav-sub-list a { padding: 11px 12px; }

.ns-all {
  grid-column: 1 / -1;
  margin-bottom: 4px; padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-weight: 600; color: #fff;
}
.ns-icon {
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  /* 品牌浅紫底在深色浮层上偏暗 → 改为半透明白 + 浅色图标 */
  background: rgba(255, 255, 255, .16); color: #fff;
}
.ns-count {
  margin-left: auto;
  font-family: var(--font-num); font-size: 12px; color: rgba(255, 255, 255, .58);
}
.ns-body { display: block; min-width: 0; }
.ns-body b {
  display: block; margin-bottom: 2px;
  font-size: 14px; font-weight: 600; color: #fff;
}
.ns-body > span { display: block; font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); }
.ns-check { margin-left: auto; flex: none; color: rgba(255, 255, 255, .82); }

/* v1.65.389：产品中心两级悬停菜单 —— 悬停「产品中心」列一级分类，
   悬停一级分类行时其二级分类向右浮出（用户要求）。
   ⚠️ 面板不能设 overflow —— 否则向右浮出的 ns-kids 会被裁掉。 */
.site-header .nav-sub-cats {
  grid-template-columns: minmax(0, 1fr);
  min-width: 264px;
}
.ns-group { position: relative; }
.ns-parent .ns-arrow { margin-left: auto; flex: none; opacity: .55; transition: transform .2s var(--ease); }
.ns-group:hover .ns-parent .ns-arrow { transform: translateX(2px); opacity: .9; }
.ns-parent { padding-right: 4px; }
.ns-kids {
  display: none;
  position: absolute; top: -11px; left: 100%; z-index: 31;
  min-width: 200px; margin-left: 2px; padding: 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(11, 11, 14, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 26px 56px -30px rgba(0, 0, 0, .62);
}
.ns-group:hover > .ns-kids,
.ns-group:focus-within > .ns-kids { display: block; }
.ns-kids a { padding: 8px 10px; }

/* --------------------------------------------------------- 页头右侧操作 */
.header-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px; flex: none;
}
.header-search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, .72);
  font-size: 13.5px; white-space: nowrap;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.header-search:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .32); color: #fff; }
.header-search svg { flex: none; }

/* 深色页头上的按钮：主按钮为琥珀渐变 + 深棕文字，幽灵按钮为半透明白 */
.header-actions .btn-primary {
  background: var(--top-amber);
  color: #3A2410;
  box-shadow: 0 12px 26px -16px rgba(227, 154, 90, .9);
}
.header-actions .btn-primary:hover { background: linear-gradient(135deg, #F9CD9C, #EBA76A); color: #2E1B0B; }
.header-actions .btn-ghost {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .26);
  color: #fff;
}
.header-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .42);
  color: #fff;
}

.burger {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  /* v1.65.173：清掉通用 button 的 `padding: 1px 6px` —— 否则 42px 按钮的内容区
     只剩 28px，SVG 被自身的 max-width:100% 压成 28×32（横向被挤扁）。 */
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
}
/* v1.65.173：汉堡图标放大到按钮的 4/5（用户要求：「平板端中间三条线条应占表单的五分之四」）。
   按钮 42×42（去 1px 描边后内容 40px），图标取 40 × 4/5 = 32px。
   ⚠️ 图标 path 是 `M3 6h18`（三横线占 viewBox 18/24 = 75%），故 32px 图标内的线条 ≈ 24px。
   max-width:none 是必须的 —— base.css 的 `img,svg,video{max-width:100%}` 会在
   内容区偏窄时把宽度单独压低，造成 28×32 的「压扁」形态。
   同时保留 v1.65.172 的 flex:none 防挤压（挤压会塌成一个小点）。 */
.burger svg { width: 32px; height: 32px; flex: none; max-width: none; }
.burger:hover { background: rgba(255, 255, 255, .2); }
/* ------------------------------------------------------------ 移动端抽屉 */
.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 1200;
  width: min(360px, 90vw);
  padding: 18px 22px 34px;
  background: #fff;
  overflow-y: auto;
  transform: translateX(102%);
  transition: transform .34s var(--ease);
  box-shadow: -24px 0 60px -30px rgba(0, 0, 0, .5);
}
.mobile-nav.is-open { transform: none; }
/* v1.13.67：抽屉打开时给页面加一层遮罩，点遮罩即关闭（手机上更好退出来） */
.mn-mask {
  position: fixed; inset: 0; z-index: 1190; display: none;
  background: rgba(8, 14, 26, .5);
}
.mn-mask.is-open { display: block; }
/* v1.13.68：手机端「产品分类」折叠面板 —— 竖向呈现、默认隐藏、点标题才弹出、选完自动收回 */
.cat-fold { display: none; }

/* ==========================================================================
   v1.65.196：横向滑动分类标签（.cat-tabs / .plat-tabs）

   需求（用户）：「搜索栏独占一行，分类在下方横向滑动」—— 电商经典结构。
   桌面端有左侧 .filter-side 侧栏，不需要这两行，故基础态 display:none，
   只在手机端（≤760px）与平板竖屏块里打开。

   v1.65.203（用户截图 + 原话：「图中圆形角外框全局改为直角；全局锁定
   底色深色的字体为浅色、底色为浅色的字体为深色」）两点改动：
     ① 选中标签的**胶囊圆角改直角**（原 border-radius: 999px）——
        基础段改一次，四个断点（手机/平板竖屏/平板横屏/PC）全部生效，
        不用逐个媒体块重复；这是「外框直角」总锁的一部分。
     ② **字色交给区块明暗自适应**：这两个标签行铺的是透明底、直接压在
        产品中心区块上，字色必须跟着区块底色反着走（深底→浅字）。
        原来它们被 `.filter-bar` 的白底清单钉成深灰（#3F3F45），
        在深色区块上就是截图里那行「深底深灰字」——已由清单加
        `:not(.filter-combo)` 修正（见文件前半段 v1.65.203 说明）。
        ⚠️ 所以本段**不要**给 .ct-item / .ct-label 写死颜色，
           一律用 var(--text-2) / var(--text-3)。
   ========================================================================== */
.cat-tabs,
.plat-tabs { display: none; }
.ct-item,
.ct-label {
  flex: none;                 /* 关键：不收缩，否则标签会被压扁、文字挤成竖排 */
  white-space: nowrap;
}
.ct-label {
  font-size: 12px;
  color: var(--text-3);       /* 跟随区块明暗自适应（深底→浅字） */
  padding: 6px 10px 6px 0;
  font-weight: 600;
}
.ct-item {
  padding: 7px 14px;
  font-size: 14px;
  color: var(--text-2);       /* 跟随区块明暗自适应（深底→浅字） */
  border-radius: 0;           /* v1.65.203：原胶囊 999px → 直角 */
  background: transparent;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.ct-item.is-active {
  background: var(--brand);
  color: #fff;                /* 品牌绿底足够深，白字对比度达标（深底浅字） */
  font-weight: 600;
}
/* 移动端点击反馈（桌面端用 hover） */
@media (hover: none) {
  .ct-item:active { background: var(--surface-3); }
  .ct-item.is-active:active { background: var(--brand-600); }
}
@media (max-width: 760px) {
  .filter-side { display: none; }
  .layout-side { gap: 14px; }
  .cat-fold { display: block; margin-bottom: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
  .cat-fold-head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 13px 14px; font-size: 15px; font-weight: 600; color: var(--text-1);
    background: #fff; border: 0; text-align: left; cursor: pointer;
  }
  .cat-fold-head .cf-cur {
    margin-left: auto; font-size: 13px; font-weight: 500; color: var(--brand-700);   /* v1.65.166：白底上用深绿，对比度 4.3+ */
    max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cat-fold-head .cf-arrow { flex: none; color: var(--text-3); transition: transform .24s var(--ease); }
  .cat-fold.is-open .cat-fold-head .cf-arrow { transform: rotate(180deg); }
  .cat-fold-body {
    display: none; max-height: 62vh; overflow-y: auto;
    padding: 4px 8px 10px; border-top: 1px solid var(--line-2);
  }
  .cat-fold.is-open .cat-fold-body { display: block; }
  .cat-fold-body .fs-item {
    display: flex; align-items: center; padding: 11px 10px; font-size: 15px;
    color: var(--text-2); border-bottom: 1px solid var(--line-2);
  }
  .cat-fold-body .fs-item:last-child { border-bottom: 0; }
  /* v1.65.168：选中项落在白底上，品牌绿 #00B578 对比度仅 2.66 → 用 --brand-700（≈4.3） */
  .cat-fold-body .fs-item.is-active { color: var(--brand-700); font-weight: 600; background: rgba(0, 178, 122, .08); }
  .cat-fold-body .cf-sub { padding: 12px 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
  /* 产品卡片在窄屏不允许撑破容器（图片与文字都要能收） */
  .product-card { max-width: 100%; min-width: 0; }
  .pc-media, .pc-media > img { max-width: 100%; }
  .pc-title, .pc-desc, .pc-series, .pc-price { overflow-wrap: anywhere; }
  .grid, .grid-2, .grid-3, .grid-4, .layout-main, .container { min-width: 0; }
  /* 产品详情 / 内容详情的返回入口：手机上固定在顶部第一行，点得到 */
  .back-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0 4px; font-size: 14px;
  }
  .back-bar .btn { min-height: 40px; }
}
.back-bar { display: none; }
.mn-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
}
.mn-head .logo-text b { color: var(--theme-site-text, var(--ink-950)); }
.mn-head .logo-text span { color: var(--text-3); }
.mn-head .logo img { height: 32px; }
.mn-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 4px;
  font-size: 17px; font-weight: 600; color: var(--text-1);
  border-bottom: 1px solid var(--line-2);
}
.mn-link:hover { color: var(--brand); }
.mn-link.is-active { color: var(--brand-700); }   /* v1.65.166：白底抽屉内的激活项用深绿，保证对比度 */
.mn-link.mn-sub {
  padding: 9px 4px 9px 18px;
  font-size: 14.5px; font-weight: 500; color: var(--text-2);
}
/* v1.65.389：抽屉里产品中心的一级分类行（二级缩进在其下） */
.mn-link.mn-cat-parent { padding-top: 11px; font-weight: 600; color: var(--text-1); }
.mn-count { font-family: var(--font-num); font-size: 12.5px; color: var(--text-3); }
/* v1.13.64：移动端二级菜单默认收起，点箭头才展开（展开一个自动收起其它），点条目后收回抽屉 */
.mn-group { border-bottom: 1px solid var(--line-2); }
.mn-group > .mn-row { display: flex; align-items: center; gap: 6px; }
.mn-group > .mn-row .mn-link { flex: 1; border-bottom: 0; }
.mn-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; color: var(--text-3);
  background: var(--surface-2); border: 1px solid var(--line-2); cursor: pointer;
  transition: transform .22s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.mn-toggle:hover { color: var(--brand); background: #fff; }
.mn-group.is-open > .mn-row > .mn-toggle { transform: rotate(180deg); color: var(--brand); background: #fff; }
.mn-sub-list { max-height: 0; overflow: hidden; transition: max-height .28s var(--ease); }
.mn-group.is-open > .mn-sub-list { max-height: 70vh; overflow-y: auto; }
.mn-sub-list .mn-link { border-bottom: 1px solid var(--line-2); }
.mn-sub-list .mn-link:last-child { border-bottom: 0; }
/* 二级菜单里当前页高亮，展开时一眼看到自己在哪 */
.mn-group.is-active > .mn-row > .mn-link { color: var(--brand); }
.mn-foot {
  display: grid; gap: 10px;
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line-2);
}
.mn-user { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.mn-user > span { min-width: 0; }
.mn-user b { display: block; font-size: 14.5px; }
.mu-sub { display: block; font-size: 12.5px; font-weight: 400; color: var(--text-3); }

/* ---------------------------------------------------------------- 回到顶部 */
.to-top {
  position: fixed; right: 24px; bottom: 28px; z-index: 800;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-900); color: #fff;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .26s var(--ease), transform .26s var(--ease), background .2s var(--ease), visibility .26s;
  box-shadow: var(--shadow);
}
.to-top.is-show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand); color: #fff; }

/* ==========================================================================
   3. 站内搜索浮层
   ========================================================================== */

.search-layer {
  position: fixed; inset: 0; z-index: 1500;
  align-items: flex-start; justify-content: center;
  padding: 12vh 20px 40px;
  background: rgba(6, 7, 10, .62);
  backdrop-filter: blur(4px);
}
.search-box {
  width: 100%; max-width: 680px;
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.sb-input {
  width: 100%; height: 62px; padding: 0 24px;
  border: none; border-bottom: 1px solid var(--line-2);
  background: #fff; color: var(--theme-site-text, var(--ink-950));
  font-size: 17px;
}
.sb-input:focus { outline: none; }
.sb-input::placeholder { color: var(--text-3); }
.search-result { max-height: 58vh; overflow-y: auto; padding: 8px; }
.search-group-title {
  padding: 14px 14px 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3);
}
.search-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  transition: background .18s var(--ease);
}
.search-item:hover { background: var(--surface-2); }
.search-item img {
  width: 44px; height: 44px; flex: none;
  object-fit: cover; background: var(--surface-2);
}
.si-body { min-width: 0; }
.si-title {
  margin-bottom: 2px;
  font-size: 14.5px; font-weight: 600; color: var(--theme-site-text, var(--ink-950));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   4. 首页首屏 Hero + 公告信息栏
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding: 0 0 74px;
  background: var(--theme-site-top, var(--top-grad));
  color: #fff;
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 7, 9, .72) 0%, rgba(10, 7, 9, .46) 46%, rgba(10, 7, 9, .82) 100%);
}
/* 装饰网格 */
.hero-grid {
  position: absolute; inset: 0; opacity: .22; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 0%, transparent 72%);
}
.hero .container { position: relative; z-index: 2; }
.hero-inner { max-width: 820px; padding: 88px 0 0; }
.hero.has-notice .hero-inner { padding-top: 56px; }
.hero h1 {
  margin-bottom: 18px;
  color: #fff;
  font-size: clamp(32px, 4.6vw, 60px);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.08;
}
.hero .grad {
  /* v1.65.138：应用户要求标题与副标语字号一致——去掉 0.68 倍缩放，直接继承 h1 字号 */
  /* v1.65.139：两行间距固定为 10px（块级 + 上边距，不受字号/行高影响） */
  display: block;
  margin-top: 10px;
  background: var(--top-amber-2);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero-sub {
  max-width: 640px; margin-bottom: 34px;
  font-size: 17px; line-height: 1.85; color: rgba(255, 255, 255, .74);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 52px; }
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 52px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.hero-stat { min-width: 0; }
.hero-stat b {
  display: block;
  font-family: var(--font-num); font-size: 36px; font-weight: 700;
  letter-spacing: -.02em; color: #fff; line-height: 1.1;
}
.hero-stat > span { font-size: 13px; color: rgba(255, 255, 255, .6); }
/* v1.65.210：关于我们页四项数据卡网格 —— 桌面 2×2（gap 16px）；
   手机端在下方 @media(max-width:640px) 保持 2×2、收紧为 10px，不随 grid-2 收敛成单列 */
.about-stats { gap: 16px; }
.hero-dots { display: flex; gap: 8px; margin-top: 30px; }
.hero-dots button {
  width: 28px; height: 3px; padding: 0;
  background: rgba(255, 255, 255, .28);
  transition: background .22s var(--ease), width .22s var(--ease);
}
.hero-dots button.is-active { width: 44px; background: var(--top-amber-2); }

/* ------------------------------------------------------------ 公告信息栏 */
.hero-notice {
  /* v1.10.4：公告栏移动到底部，固定悬浮（不再占据首屏顶部）
     v1.65.180：PC 端保持此固定浏览条观感；手机端见文末 760px 块
     —— 手机端改为「底部通栏 + 文字横向跑马灯跟随滚动」 */
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  z-index: 560;
  max-height: 120px;
  background: rgba(12, 10, 9, .92);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-top: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 -12px 32px -18px rgba(0, 0, 0, .55);
  transition: max-height .24s var(--ease), opacity .2s var(--ease);
}
.hero-notice.is-closing { max-height: 0; opacity: 0; overflow: hidden; }
/* 底部公告栏出现时给页面留出空间，避免遮住页脚最后一行 */
body.has-notice-bar { padding-bottom: 56px; }
.hn-inner {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0;
  font-size: 13.5px;
}
.hn-badge {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 3px 10px;
  background: var(--top-amber);
  color: #3A2410; font-size: 12px; font-weight: 700;
}
.hn-body {
  display: flex; align-items: center; gap: 12px;
  min-width: 0; flex: 1;
}
.hn-body.is-in { animation: hnIn .36s var(--ease); }
@keyframes hnIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
.hn-title { flex: none; font-weight: 600; color: #fff; }
.hn-text {
  min-width: 0;
  color: rgba(255, 255, 255, .7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hn-more {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  color: var(--top-accent); font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.hn-more:hover { color: #fff; }
.hn-dots { display: flex; gap: 6px; flex: none; }
.hn-dots button {
  width: 7px; height: 7px; padding: 0;
  background: rgba(255, 255, 255, .3);
}
.hn-dots button.is-active { background: var(--top-accent); }
.hn-close {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px;
  color: rgba(255, 255, 255, .6);
}
.hn-close:hover { color: #fff; background: rgba(255, 255, 255, .12); }
/* v1.65.180：跑马灯轨道（PC 端不启用 —— 只让移动端走滚动，见 760px 块） */
.hn-track { display: none; }

/* ==========================================================================
   5. 区块标题 / 分类宫格
   ========================================================================== */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.cat-card {
  position: relative;
  display: block;
  padding: 26px 22px 24px;
  border: 1px solid rgba(109, 96, 176, .16);
  border-radius: var(--radius);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.cat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(109, 96, 176, .38);
  box-shadow: 0 22px 44px -30px rgba(60, 48, 120, .6);
  color: inherit;
}
.cc-count {
  position: absolute; top: 14px; right: 16px;
  font-size: 12px; color: #6D6A8A;
}
.cc-icon {
  width: 46px; height: 46px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: #5B4B9E;
}
.cat-card h4 { margin: 0 0 8px; font-size: 18px; color: var(--theme-site-text, var(--ink-950)); }
.cat-card p { margin: 0; font-size: 13px; line-height: 1.7; color: #5C5878; }

/* ==========================================================================
   6. 商品卡 / 方案卡 / 案例卡
   ========================================================================== */

/* v1.65.2：全站圆角。官网这几张卡原本**没有**写 border-radius —— 它们有边框和
   overflow:hidden，但圆角一直是 0（v1.10.1 全局直角规则把「补圆角」这件事掩盖了，
   撤销规则后仍然不会自己长出圆角）。这里显式补上，并保证图片区与卡片圆角对齐。 */
.product-card,
.solution-card,
.case-card { border-radius: var(--radius); }

/* v1.65.198：产品卡图片框、规格表等硬编码圆角，一并拉直为直角（不受上方变量影响） */
.pc-media,
.pc-media > img,
.spec-table,
.spec-table tr:last-child td:first-child,
.spec-table tr:last-child td:last-child { border-radius: 0; }
.p-grid .pc-media { border-radius: 0; }

.product-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-100);
  box-shadow: 0 26px 50px -32px rgba(0, 0, 0, .45);
  color: inherit;
}
.pc-media {
  position: relative;
  aspect-ratio: 8 / 7;
  background: var(--surface-2);
  overflow: hidden;
}
.pc-media > img {
  display: block;               /* v1.65.380：行内 img 有基线缝隙，图片底部与媒体盒底差 ~5px；
                                   display:block 后图片底部 = 媒体盒底部，「图→分类间距」才量得准 */
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ease);
}
.product-card:hover .pc-media > img { transform: scale(1.045); }
.pc-flags {
  position: absolute; top: 12px; left: 12px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pc-body {
  display: flex; flex-direction: column; flex: 1;
  /* v1.65.380：上内边距 16px → 10px（用户要求「所属分类与图片显示底部间距只留10像素」）。
     v1.65.381：下内边距 14px → 2px，配合 .pc-desc 的 margin-bottom 10px → 2px，
     使「卖点 → 价格」的**视觉**空白正好 ~15px（用户要求「显示价格的上下各约束到15像素」）。
     ⚠️ 为什么 DOM 间距只给 4px 而不是 15px：像素级实测（DPR2 截图逐行扫描）发现
        卖点行盒底部有 ~4.6px 半沉降、价格字盒顶部有 ~6.9px 半沉降 —— DOM 间距 4px
        + 两侧沉降 11.5px = 视觉 15.5px。若 DOM 给 15px，视觉会是 26.5px（就是用户
        截图里「空白太多」的那个数）。
     注意：手机/平板两个媒体块各自覆写了 padding，本处实际只作用于 PC 产品中心白卡。 */
  padding: 10px 18px 2px;
}
.pc-series {
  margin-bottom: 6px;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3);
}
.pc-title {
  margin: 0 0 8px;
  font-size: 16.5px; font-weight: 600; line-height: 1.42; color: var(--theme-site-text, var(--ink-950));
  /* v1.65.380：两行 → **一行**（用户要求「产品名称约束在一行内且不要溢出」）。
     超长名称以省略号收尾，不折行、不溢出卡片。
     ⚠️ 手机/平板块各自显式覆写为 clamp:2（那些端卡片更窄、沿用既有观感），不受本处影响。 */
  -webkit-line-clamp: 1;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.pc-desc {
  margin: 0 0 2px;                /* v1.65.381：10px → 2px（与 body 下内边距 2px 合计 4px，加行盒沉降 ≈ 视觉 15px） */
  min-height: 44px;               /* 两行等高：卡片高度整齐，不会因简介长短不齐而留空 */
  font-size: 13px; line-height: 1.7; color: var(--text-3);
  overflow-wrap: anywhere;        /* v1.65.380：长串（型号/英文）不横向溢出 */
}
.pc-meta {
  margin-top: auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
}
.pc-price { display: flex; align-items: baseline; gap: 8px; }
.pc-price .now {
  font-family: var(--font-num);
  font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  color: var(--theme-site-text, var(--ink-950));
}
.pc-price .now small { font-size: 13px; font-weight: 700; }
.pc-price .was {
  font-family: var(--font-num);
  font-size: 13px; color: var(--text-3); text-decoration: line-through;
}

/* ========================================================== v1.65.193
   价格行独立化（全端统一）：.pc-price 从 .pc-meta 内移到 .pc-body 之后，
   成为 .product-card 的直接子级（site.js productCard 同步调整）。
   用户原话：「PC端如图在白色字体后面加上价格，价格显示如：￥:10.00，
   红色加粗15PX，右对齐。平板端和手机端都按这个方式调整」。
   为什么必须移出 .pc-body：v1.10.6 有一条**全局**规则（非媒体查询，本文件 1789 行）
   `.product-card .pc-body { display:none !important }` —— 全站商品卡自那时起就只显示图区，
   价格若留在 body 里会全端消失（仅 760px / 平板竖屏块用 flex !important 局部救回）；
   移出后所有断点都稳定显示在「白色字体」之后。 */
.product-card > .pc-price {
  justify-content: flex-end;   /* 950 行旧规则是 flex，这里改右对齐 */
  text-align: right;
  padding: 0 14px 14px;
}
.product-card > .pc-price .now {
  font-size: 15px;             /* 用户指定 15px */
  font-weight: 700;            /* 加粗 */
  color: var(--red);           /* 红色 */
  letter-spacing: 0;
}
.product-card > .pc-price .now small { font-size: 11px; font-weight: 700; }
.pc-stock { margin-top: 4px; font-size: 12.5px; color: var(--text-3); }
/* v1.65.83：商品卡 meta 中、控制平台（通信协议）前的小图标 */
.pc-icon { width: 16px; height: 16px; object-fit: contain; border-radius: 0; margin-right: 6px; vertical-align: -3px; }

/* ------------------------------------------------------------------ 方案卡 */
.solution-card {
  display: block;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.solution-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-100);
  box-shadow: 0 26px 50px -32px rgba(0, 0, 0, .45);
  color: inherit;
}
.solution-card > img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  background: var(--surface-2);
}
.sc-body { padding: 22px; }
.sc-body h3 { margin: 0 0 10px; font-size: 19px; color: var(--theme-site-text, var(--ink-950)); }
.sc-body p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.75; color: var(--text-3); }
.sc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-tags span {
  padding: 3px 10px;
  background: var(--surface-2); color: var(--text-2);
  font-size: 12px;
}

/* ------------------------------------------------------------------ 案例卡 */
.case-card {
  display: block;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.case-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-100);
  box-shadow: 0 26px 50px -32px rgba(0, 0, 0, .45);
  color: inherit;
}
.k-media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--surface-2);
  overflow: hidden;
}
.k-media > img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s var(--ease);
}
.case-card:hover .k-media > img { transform: scale(1.045); }
.k-city {
  position: absolute; left: 12px; bottom: 12px;
  padding: 4px 10px;
  background: rgba(10, 10, 12, .72); color: #fff;
  font-size: 12px;
}
.k-body { padding: 20px; }
.k-body h4 { margin: 0 0 8px; font-size: 17px; line-height: 1.45; color: var(--theme-site-text, var(--ink-950)); }
.k-body p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.75; color: var(--text-3); }
.k-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--text-3);
}

/* ==========================================================================
   7. 特性条目 / 数据带 / CTA 横幅
   ========================================================================== */

.feature-item { display: flex; align-items: flex-start; gap: 14px; }
.fi-icon {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-050); color: var(--brand);
}
.feature-item h4 { margin: 0 0 6px; font-size: 16px; }
.feature-item p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text-3); }
.section-dark .feature-item h4 { color: #fff; }
.section-dark .feature-item p { color: rgba(255, 255, 255, .68); }
.section-dark .fi-icon { background: rgba(255, 255, 255, .08); color: #E9C87A; }

.stat-band { display: grid; gap: 14px; }
.sb-item {
  padding: 24px 22px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
}
.sb-item b {
  display: block;
  font-family: var(--font-num); font-size: 30px; font-weight: 700;
  letter-spacing: -.02em; color: #fff;
}
.sb-item > span { font-size: 13px; color: rgba(255, 255, 255, .6); }

.cta-band {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 26px;
  padding: 40px 44px;
  background: var(--grad-ink);
  color: #fff;
}
.cta-band h3 { margin: 0 0 8px; color: #fff; }
.cta-band p { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, .7); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   8. 内页首屏 / 二级栏目切换条 / 筛选标签
   ========================================================================== */

.page-hero { padding: 66px 0 56px; border-bottom: 1px solid var(--line); }
.ph-inner { position: relative; z-index: 2; }
.page-hero .eyebrow { margin-bottom: 12px; }
.page-hero h1 {
  margin-bottom: 14px;
  color: var(--theme-site-text, var(--ink-950));
  font-size: clamp(30px, 3.6vw, 48px);
  letter-spacing: -.03em;
}
.page-hero p {
  max-width: 760px; margin-bottom: 20px;
  font-size: 15.5px; line-height: 1.85; color: var(--text-2);
}
.page-hero .breadcrumb { margin-top: 8px; }

/* 方案详情：整幅封面 Hero（JS 内联深色背景），保持深底白字 */
.page-hero[style*="ink-900"] { background: var(--ink-900) !important; color: #fff; }
.page-hero[style*="ink-900"] h1 { color: #fff; }
.page-hero[style*="ink-900"] .breadcrumb,
.page-hero[style*="ink-900"] .breadcrumb a { color: rgba(255, 255, 255, .72); }
.page-hero[style*="ink-900"] .breadcrumb .current { color: rgba(255, 255, 255, .9); }

.subnav {
  position: relative; z-index: 5;
  background: rgba(255, 255, 255, .74);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.subnav .container { display: flex; gap: 26px; overflow-x: auto; }
.subnav a {
  display: inline-block; flex: none;
  padding: 15px 0;
  font-size: 14.5px; color: var(--text-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.subnav a:hover { color: var(--brand); }
.subnav a.is-active { color: var(--theme-site-text, var(--ink-950)); font-weight: 600; border-bottom-color: var(--brand); }

.filter-chips { display: flex; flex-wrap: wrap; gap: 10px; }

/* 站内锚点避开 sticky 页头 */
section[id], div[id="faq"], div[id="ticket"] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ==========================================================================
   9. 产品中心：左侧筛选 + 列表工具条
   ========================================================================== */

.layout-side { display: flex; align-items: flex-start; gap: 48px; }
.layout-main { flex: 1; min-width: 0; }

/* 侧栏：Aqara 式纯列表（无卡片底 / 无边框 / 无阴影） */
.filter-side { width: 248px; flex: none; }
.fs-group { margin-bottom: 36px; }
.fs-group h5 {
  margin: 0 0 10px; padding: 0 10px 12px;
  font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--theme-site-text, var(--ink-950));
  border-bottom: 1px solid #E8E8EA;
}
.fs-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 10px;
  font-size: 18px; font-weight: 600; line-height: 1.45; color: #111114;
  border-bottom: 1px solid rgba(239, 239, 241, .7); /* v1.65.115：分隔线透明度降到 70% */
  transition: color .2s var(--ease);
}
.fs-item:last-child { border-bottom: none; }
.fs-item:hover { color: #000; background: none; }
.fs-item.is-active {
  background: var(--brand-050) !important;
  color: var(--brand-700) !important;
  font-weight: 700;
}
.fs-arrow {
  display: inline-flex; align-items: center; flex: none;
  color: #B9B9C0;
}
.fs-item:hover .fs-arrow { color: var(--text-2); }
.fs-item.is-active .fs-arrow { color: var(--brand-700); }

/* v1.65.377：左侧产品分类树形折叠（PC 端侧栏专用）
   颜色全部沿用既有 .fs-item 体系（深底浅字 / 浅底深字自适应），这里只管层级缩进与箭头旋转。 */
.fs-parent { cursor: pointer; }
.fs-parent .fs-toggle { transition: transform .2s var(--ease); }
.fs-parent.is-open .fs-toggle { transform: rotate(180deg); }
.fs-sub { padding: 0; }
.fs-sub .fs-child { padding-left: 30px; }

.filter-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
}
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; flex: 1; min-width: 0; }
.toolbar .input-icon { flex: 1; min-width: 220px; }
/* v1.15.3：排序下拉在 PC 端保持 170px（原先由 JS 内联 style 提供，现改由 CSS 承担，
   这样移动端才能干净地用它参与 flex 均分，而不必依赖 !important 覆盖内联样式）。 */
.toolbar .select { width: 170px; flex: none; }

/* ==========================================================================
   10. 商品详情
   ========================================================================== */

.pd-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px; align-items: start;
}
.pd-gallery { display: block; }
.pg-main {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  overflow: hidden;
}
.pg-main img { width: 100%; height: 100%; object-fit: contain; }
.pd-gallery .pd-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pd-gallery .pd-thumbs button {
  width: 64px; height: 64px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.pd-gallery .pd-thumbs button.is-active { border-color: var(--brand); }
.pd-gallery .pd-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.pd-info { min-width: 0; }
.pd-info h1 { margin-bottom: 12px; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.02em; }
.pd-sku {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-bottom: 20px; padding: 13px 0;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  font-size: 13px; color: var(--text-3);
}
.pd-sku b { color: var(--text-1); }

.pd-price-box { margin-bottom: 22px; padding: 22px; background: var(--surface-2); }
.pp-label { font-size: 12.5px; color: var(--text-3); }
.pp-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; margin: 6px 0; }
.pp-now {
  font-family: var(--font-num);
  font-size: 30px; font-weight: 700; letter-spacing: -.02em;
  color: var(--brand-700);
}
/* v1.65.33：业务 / 管理登录时的「各客户等级拿货价」条 */
.pp-levels {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-top: 12px;
}
.pp-level {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 12px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 0;
}
.pp-level i { font-style: normal; font-size: 12px; color: var(--text-3); }
.pp-level b { font-family: var(--font-num); font-size: 14.5px; font-weight: 700; color: var(--brand-700); }

/* v1.65.36：市场价行（原 建议零售价）——「市场价：12999」格式，置于税前/完税说明之上，
   标签 + 数值走同一套品牌色，醒目但不喧宾夺主。 */
.pp-market { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 8px; margin: 6px 0 2px; }
.pp-market-label { font-size: 15px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.pp-market-val {
  font-family: var(--font-num);
  font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  color: var(--brand-700);
}

/* v1.65.35：详情页 / 列表页正文区的背景图水印（.zone-bg，由 zoneBg() 注入）
   与页头横幅（.hero-bg，深纱 + 34% 透明）不同：正文区有大量要读的内容，
   背景图压到 14% 透明度铺在内容层下方，配图才不会喧宾夺主；
   没配图时 section 上不加 has-zone-bg 类，一段样式都不生效（零改动）。 */
section.has-zone-bg { position: relative; }
.zone-bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  border-radius: 0;
}
.zone-bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .14;
}
section.has-zone-bg > .container { position: relative; z-index: 1; }
.pd-skus { margin-bottom: 22px; }

.pd-attrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin-bottom: 26px;
}
.pd-attr {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13.5px;
}
.pd-attr .k { flex: none; width: 74px; color: var(--text-3); }
.pd-attr .v { min-width: 0; color: var(--text-1); font-weight: 500; }
/* v1.65.83：详情页「控制平台」前的小图标 */
.pd-attr-icon { width: 18px; height: 18px; object-fit: contain; border-radius: 0; margin-right: 7px; vertical-align: -4px; }

.pd-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.pd-promise {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--text-3);
}
.pd-promise span { display: inline-flex; align-items: center; gap: 6px; }

/* 详情页签（site.js 直接输出 button，未使用 base 的 .tabs .tab） */
.tabs {
  display: flex; gap: 4px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.tabs > button {
  flex: none;
  padding: 14px 20px;
  font-size: 15px; font-weight: 600; color: var(--text-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tabs > button:hover { color: var(--theme-site-text, var(--ink-950)); background: none; }
.tabs > button.is-active { color: var(--brand-700); border-bottom-color: var(--brand); }

.tab-panel[data-panel] { display: none; }
.tab-panel[data-panel].is-active { display: block; }

/* 富文本正文 */
.rich-text { font-size: 15px; line-height: 1.95; color: var(--text-2); }
.rich-text h2 { margin: 30px 0 12px; font-size: 24px; color: var(--theme-site-text, var(--ink-950)); }
.rich-text h3 { margin: 26px 0 10px; font-size: 19px; color: var(--theme-site-text, var(--ink-950)); }
.rich-text h4 { margin: 22px 0 8px; font-size: 16.5px; color: var(--theme-site-text, var(--ink-950)); }
.rich-text p { margin: 0 0 14px; }
.rich-text img { margin: 18px 0; }
.rich-text ul, .rich-text ol { margin: 0 0 16px; padding-left: 1.3em; }
.rich-text li { margin-bottom: .4em; }
.rich-text blockquote {
  margin: 20px 0; padding-left: 16px;
  border-left: 3px solid var(--brand);
  color: var(--text-2);
}
.rich-text table { width: 100%; margin: 18px 0; font-size: 14px; }
.rich-text p:last-child { margin-bottom: 0; }

/* 规格参数表 */
.spec-table { width: 100%; border: 1px solid var(--line); background: #fff; }
.spec-table caption {
  padding: 14px 18px;
  text-align: left;
  font-size: 15px; font-weight: 700; color: var(--theme-site-text, var(--ink-950));
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.spec-table td {
  padding: 12px 18px;
  font-size: 13.5px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.spec-table td:first-child { width: 42%; color: var(--text-3); }
.spec-table tr:last-child td { border-bottom: none; }

/* ==========================================================================
   11. 技术文书列表
   ========================================================================== */

.doc-row {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.doc-row:hover { border-color: var(--brand-100); box-shadow: var(--shadow-xs); }
.doc-icon {
  width: 48px; height: 48px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-050); color: var(--brand-700);
  font-family: var(--font-num); font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.doc-icon.pdf { background: #FDEDED; color: #B4272B; }
.doc-icon.doc, .doc-icon.docx { background: #E8F3FF; color: #1B6FD1; }
.doc-icon.xls, .doc-icon.xlsx, .doc-icon.csv { background: #E9F8F2; color: #0A6B43; }
.doc-icon.zip, .doc-icon.rar, .doc-icon.dwg { background: #FFF7E6; color: #8A5700; }
.doc-icon.mp4, .doc-icon.mov { background: #F3EDFF; color: #5B4B9E; }
.doc-main { flex: 1; min-width: 0; }
.doc-main h4 { margin: 0 0 6px; font-size: 15.5px; line-height: 1.45; }
.doc-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: 12.5px; color: var(--text-3);
}
.doc-actions { flex: none; }

/* ==========================================================================
   12. 服务支持：服务流程四步
   ========================================================================== */

.service-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  counter-reset: svcStep;
}
.service-step {
  position: relative;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.service-step::before {
  counter-increment: svcStep;
  content: counter(svcStep, decimal-leading-zero);
  display: block; margin-bottom: 14px;
  font-family: var(--font-num); font-size: 13px; font-weight: 700; letter-spacing: .06em;
  color: var(--brand);
}
.service-step:hover {
  transform: translateY(-4px);
  border-color: var(--brand-100);
  box-shadow: 0 24px 48px -32px rgba(0, 0, 0, .45);
}
.service-step h4 { margin: 0 0 8px; font-size: 17px; }
.service-step p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--text-3); }

/* ==========================================================================
   13. 公告详情弹窗（modal 内容）
   ========================================================================== */

.modal-md { max-width: 680px; }
.notice-detail { font-size: 14.5px; line-height: 1.9; color: var(--text-2); }
.nd-meta {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
  font-size: 12.5px; color: var(--text-3);
}
.nd-title { margin-bottom: 14px; font-size: 21px; }
.nd-content p { margin: 0 0 14px; }
.nd-content img { margin: 14px 0; }
.nd-content a { color: var(--brand); text-decoration: underline; }
.nd-content p:last-child { margin-bottom: 0; }

/* ==========================================================================
   14. 页脚（深底白字，外层 #site-footer 保持透明）
   ========================================================================== */

.site-footer {
  /* v1.65.421：margin-top 48px → 0 —— 用户要求删除页脚上方那条黑色空带
     （页脚贴住上方内容，原来 48px 露出页面深底形成黑带） */
  margin-top: 0;
  padding: 64px 0 0;
  background: var(--theme-site-footer, rgba(6, 6, 9, .94));
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .7);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 48px;
}
.footer-brand { min-width: 0; }
.footer-brand .logo { margin-bottom: 4px; }
.logo.on-dark .logo-text b { color: #fff; }
.logo.on-dark .logo-text span { color: rgba(255, 255, 255, .5); }
.footer-brand p {
  max-width: 330px; margin: 18px 0 20px;
  font-size: 13.5px; line-height: 1.85; color: rgba(255, 255, 255, .6);
}
.footer-hot { display: grid; gap: 4px; }
.footer-hot span { font-size: 12.5px; color: rgba(255, 255, 255, .5); }
.footer-hot b {
  font-family: var(--font-num); font-size: 22px; font-weight: 700;
  letter-spacing: -.01em; color: #fff;
}
.footer-col { min-width: 0; }
.footer-col h5 {
  margin: 0 0 16px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .06em; color: #fff;
}
.footer-col a {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 0;
  font-size: 13.5px; color: rgba(255, 255, 255, .66);
}
.footer-col a:hover { color: var(--top-accent); }
/* v1.65.182：地址 / 工作时间等「图标 + 文字」行。
   用户要求「把文字置于图标后面，合并为一行」——
   原先地址是内联 display:block、工作时间是 .footer-hours-m{display:block}，
   图标都被顶到文字上方单独占一行。改为 flex 行内排列后与电话/邮箱两行完全一致。
   ⚠️ SVG 必须 flex:none，否则会被 flex 压缩变形（手机窄宽度下尤其明显）。 */
.footer-col .footer-line {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 5px 0;
  font-size: 13.5px; line-height: 1.7; color: var(--text-low);
}
.footer-col .footer-line svg { flex: none; margin-top: 3px; }
.footer-qr {
  display: flex; align-items: center; justify-content: center;
  width: 108px; height: 108px;
  text-align: center;
  font-size: 12px; line-height: 1.6; color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: var(--radius-sm);
}
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12.5px; color: rgba(255, 255, 255, .45);
}
.footer-bottom a { color: rgba(255, 255, 255, .58); }
.footer-bottom a:hover { color: #fff; }

/* ==========================================================================
   15. 响应式
   ========================================================================== */

/* ------------------------------------------------- 中屏：收起主导航 */
@media (max-width: 1100px) {
  .nav { display: none; }
  /* v1.65.172：平板（761~1100px）的菜单按钮与手机端**完全一致** ——
     尺寸 42×42（原为 38×38）、图标 menu 22px、白字、圆角与描边同款。
     用户反馈平板端图标显示异常，要求「和手机端一样的图标」。 */
  .burger { display: inline-flex; width: 42px; height: 42px; }
  /* v1.65.179：页头自动显隐（无动作 30 秒后隐藏、任何动作立即显示）从「仅手机」
     扩展到**手机 + 平板**（≤1100px），与手机端方式完全一致（用户要求）。
     1100px 与主导航收起 / 汉堡出现同断点 —— 凡走汉堡导航的尺寸，页头都自动显隐。
     规则本体原先在 @media(max-width:760px) 的 ①，这里上移过来，手机端由本块一并覆盖。
     ⚠️ 必须与 site.js 的 navIsMobile() 断点保持同值（1100px）。
     注：悬浮返回球（.fab-back）等**手机专属**样式仍留在 760px 块，不受影响。 */
  .site-header {
    transition: transform .18s var(--ease), margin-bottom .18s var(--ease), box-shadow .26s var(--ease);
    will-change: transform;
  }
  .site-header.is-nav-hidden {
    transform: translateY(-100%);
    margin-bottom: calc(-1 * var(--header-h, 68px));
  }
  .site-header.is-nav-shown { transform: translateY(0); margin-bottom: 0; }
  .site-header.is-nav-shown { position: sticky; }
  /* sticky 支撑两条（原 760px 块 ① 内）：body 改 clip 以保住 sticky、包装层担 sticky */
  body { overflow-x: hidden; overflow-x: clip; }
  #site-header { position: sticky; top: 0; z-index: 900; }

  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* v1.65.176/178：首页「按场景交付的解决方案」与「真实落地案例」在整个平板带
     （641~1100px，含 iPad 横竖屏）一行三列（用户截图要求）。
     必须放在 1100px 带而不是 900px 带 —— base.css 的 `@media(max-width:1080px)`
     会把 `.grid-3` 降成 2 列，若只在 900px 带声明，1024px 仍会是 2 列。
     只锁这两个 ID，不动其它 .grid-3；手机（≤640px）由更窄断点保持两列。 */
  #home-solutions,
  #home-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* v1.65.181：用户要求「平板端图中这两部分不显示」——
     ① 方案卡顶部的类型徽章（住宅 / 别墅 / 酒店）
     ② 卡底的标签组（标准户型 · 高性价比 · 2 天完工 …）
     原规则只在 ≤640px 的手机带（见 v1.65.134 / v1.65.137），平板（641~1100px）
     没覆盖到所以一直显示。这里上移到 1100px 带 —— 手机与平板统一隐藏。
     ⚠️ 只锁 `#home-solutions`（首页方案区块）与 `.solutions-page-grid`（解决方案列表页），
     不误伤其它含 .badge / .sc-tags 的区块（如方案详情页的标签区）。 */
  #home-solutions .sc-body .badge,
  #home-solutions .sc-tags,
  .solutions-page-grid .sc-body .badge,
  .solutions-page-grid .sc-tags { display: none; }
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .hero-stats { gap: 42px; }
  .hero-inner { padding-top: 72px; }
  .pd-wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pd-gallery { max-width: 560px; }
  /* v1.65.184：用户要求「首页产品体系分类列表」的标题（智能面板与开关 / 网关与中枢 / 智能照明 …）
     字号约束到 14px。放在 1100px 带内与全站「手机 + 平板」口径一致；
     注意不要带 !important —— 桌面基础段（.cat-card h4 18px）要保留。
     ⚠️ 本文件里 1100 / 900 / 640px 三个块是**并列嵌套**的，容易改错块，
        改完务必用探针复核实际生效值（v1.65.184 首次就误落进了 900px 块）。 */
  .cat-card h4 { font-size: 14px; }
}

/* ------------------------------------------------- 平板：侧栏上移、栅格收敛 */
@media (max-width: 900px) {
  .section { padding: 60px 0; }
  .section-sm { padding: 44px 0; }
  .section-lg { padding: 78px 0; }

  /* v1.65.175：平板端（≤900px，含 iPad 竖屏 768/820）产品体系卡按**一行三列**排
     （用户截图要求）。此前这里是 2 列，仅在手机（≤640px）才降到 2 列。 */
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* v1.65.196：竖屏时 `.layout-side` 变成 column flex，而基础段带着
     `align-items: flex-start` —— 在 column 方向下它管的是**横向**，于是子项宽度
     退化成 shrink-to-fit（fit-content），`.layout-main` 的宽度会被内部最宽内容的
     min-content 顶开。实测 390px 视口下主栏被横向滑动分类标签撑到 **1487px**，
     整页横向溢出（body.scrollWidth 1505），卡片变成 737px 宽的两列。
     改回 stretch 让主栏撑满容器，内容自己 overflow 滚动。 */
  .layout-side { flex-direction: column; align-items: stretch; gap: 28px; }
  .filter-side { width: 100%; }
  .fs-group { margin-bottom: 24px; }
  .fs-item { font-size: 16.5px; }

  .service-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-attrs { grid-template-columns: minmax(0, 1fr); }
  .pd-gallery { max-width: none; }

  .page-hero { padding: 52px 0 44px; }
  .cta-band { padding: 32px 28px; }
  .subnav .container { gap: 18px; }
  .footer-top { gap: 30px; }
}

/* ------------------------------------------------- 手机：单列 */
@media (max-width: 640px) {
  /* v1.13.65：手机端小标签字号兜底 */
  .pc-series, .doc-icon, .cc-flag, .cc-state, .ac-label, .dm-label, .ds-label { font-size: 12.5px; }
  .topbar { display: none; }

  /* v1.13.67：手机端页头必须收进一屏 —— 之前 logo + 搜索文字 + 登录 + 汉堡 加起来超过 390px，
     把整个文档撑宽（页面显示不全、右侧被裁、汉堡被挤出屏幕 ✗），这里逐项收紧；
     flex 子项统一 min-width:0，避免内容撑破容器 */
  /* v1.65.163：overflow:hidden 会把「管理系统」下拉菜单一起裁掉（下拉从页头下缘伸出），
     改为只裁横向（clip 不创建滚动容器、不影响 sticky），纵向放开让下拉正常显示 */
  .site-header { overflow-x: clip; overflow-y: visible; }
  .site-header .container { gap: 8px; padding-left: 12px; padding-right: 12px; min-width: 0; }
  .site-header .container > *, .header-actions, .header-left { min-width: 0; }
  .logo { min-width: 0; gap: 8px; }
  .logo img { height: 28px; }
  .logo-text { min-width: 0; }
  .logo-text b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .logo-text span { display: none; }
  .header-search { width: 40px; height: 40px; padding: 0; justify-content: center; flex: none; }
  .header-search span { display: none; }
  /* v1.15.1【仅移动端】修「登录后找不到菜单」+「整页被压窄 / 右侧露黑边」
     —— 现象（用户真机截图 + 实测计算）：
        未登录时页头需 288px，390px 视口够用；
        登录后按钮变成 2~3 个（订货单 / 进入订货系统 / 退出），实测需要 448px（管理员）
        到 608px（经销商），远超视口。而 .header-actions .btn 是 flex:none 不许收缩，
        浏览器就按内容宽度排版 → 整页被压窄、右侧露出黑边、分类标签被硬切断、汉堡被顶出屏幕。
     —— 修法（三道防线，任何一道单独都不够）：
        ① 页头根本不许撑宽文档：宽度锁死 + 隐藏横向溢出；
        ② logo 用 min-width:0 + ellipsis，可被压缩，不与按钮抢空间；
        ③ 操作区只保留「登录/头像」一个入口 + 汉堡，其余功能移进汉堡菜单（菜单里已具备）。 */
  .site-header { width: 100%; max-width: 100vw; overflow-x: clip; overflow-y: visible; }
  .site-header .container { max-width: 100%; }
  /* ② logo 可压缩：这是唯一能让出空间的弹性项 */
  .logo { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .logo-text { min-width: 0; overflow: hidden; }
  .logo-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* ③ 操作区不参与压缩，但内部多余按钮隐藏 */
  .header-actions { flex: 0 0 auto; gap: 6px; }
  .header-actions .btn { height: 38px; padding: 0 12px; font-size: 13.5px; flex: none; }
  .header-actions .btn:not(:first-of-type) { display: none; }
  /* 汉堡是手机上唯一的菜单入口：永不压缩、永不被遮挡、永远在最右 */
  .header-actions .burger { flex: none !important; position: relative; z-index: 2; }
  .header-actions .btn-primary { max-width: 88px; overflow: hidden; }
  .header-actions .btn-primary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .burger { width: 42px; height: 42px; flex: none; }

  .section { padding: 46px 0; }
  .section-sm { padding: 34px 0; }
  .section-lg { padding: 60px 0; }

  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .cat-card { padding: 18px 14px 16px; }
  /* v1.65.136：分类卡图标与标题合并一排（标题与图标底对齐），隐藏右上角「N 款」数量 */
  .cat-card { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 10px; }
  .cat-card .cc-count { display: none; }
  .cat-card .cc-icon { flex: none; margin-bottom: 0; }
  .cat-card h4 { flex: 1 1 0; min-width: 0; margin: 0; }
  .cat-card p { flex: 1 1 100%; margin-top: 8px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  /* v1.65.210：关于我们页四项数据卡（18年/120+/500+/40+）在手机上保持 2×2 两行，
     不随 grid-2 收敛成单列四行（用户要求：四行并成两行） */
  .grid-2.about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .about-stats .card-pad { padding: 16px 6px; }

  /* v1.65.185：手机端首页「快速响应 / 全周期服务 …」承诺卡描述约束一行
     （用户原话：「手机端如图这个还是有两行描述显示，没约束在一行内」）。
     ⚠️ 上一版（v1.65.183）误改成了 .service-step p（那是「服务流程」四步卡），
        而截图里是**这块 .feature-item.fi-commit**，两个是完全不同的板块 —— 本次修正。
     做法沿用 .sup-desc 成熟方案：CSS nowrap + 省略号兜底，
     字多时由 site.js 的 fitSupDescs() 逐级收缩字号（每次 -0.5px，下限 9px）。
     ⚠️ 关键：`.feature-item` 是 flex，里面的文字包裹层必须 `min-width: 0`
        才能真正收缩；否则 flex item 会被内容撑开，`.commit-desc` 的
        clientWidth 恒等于 scrollWidth，fitSupDescs 的 `scrollWidth > clientWidth`
        永不成立 → 字号不收缩、长文本直接被 ellipsis 截断（v1.65.185 首版就是这个问题）。 */
  .feature-item.fi-commit > div:not(.fi-icon) { min-width: 0; flex: 1 1 auto; }
  .feature-item.fi-commit .commit-desc {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* v1.65.131 首页「按场景交付的解决方案」两列紧凑卡（仅此列表，不影响其他 grid-3） */
  #home-solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #home-solutions .solution-card > img { aspect-ratio: 2 / 1; }
  #home-solutions .sc-body { padding: 13px 12px 14px; }
  #home-solutions .sc-body h3 { margin: 0 0 6px; font-size: 15px; }
  #home-solutions .sc-body p { margin: 0 0 10px; font-size: 12px; line-height: 1.6; }
  #home-solutions .sc-tags { display: none; } /* v1.65.134：移动端隐藏卡底标签 */
  #home-solutions .sc-body .badge { display: none; } /* v1.65.137：移动端隐藏方案类型徽章（住宅/别墅/酒店） */
  #home-solutions .sc-tags span { padding: 2px 8px; font-size: 11px; }
  .service-steps { grid-template-columns: minmax(0, 1fr); }
  /* v1.65.183：服务流程描述手机端约束一行；字多时由 site.js 的 fitSupDescs() 逐级收缩字号，仍放不下用省略号兜底
     注意 .svc-desc 是白底实卡内的深灰正文，颜色仍由基础段的 .service-step p 提供（var(--text-3)） */
  .service-step p.svc-desc { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* v1.65.141：首页数据带（stat-band）移动端保持一行两列（覆盖 760px 层 layout-2col 的单列规则） */
  .stat-band.layout-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* v1.65.142：移动端所有居中区块的陈述/描述文字改为左对齐（标题与眉题保持居中不变） */
  .section-head.center p { text-align: left; }

  /* v1.65.147：支持卡描述（首页「技术文书与售后支持」卡列表）约束一行；
     字多时由 site.js 的 fitSupDescs() 逐级收缩字号，仍放不下用省略号兜底 */
  .sup-desc { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* v1.65.148：移动端隐藏「获取项目方案与报价」引导描述段（左栏 home_support_desc + 报价卡内硬编码段，两处同文案） */
  .sup-lead { display: none; }
  /* v1.65.143：首页「真实落地案例」移动端两列排布 +「全部案例」按钮移到列表底部 */
  #home-cases-ct { display: flex; flex-direction: column; gap: 20px; }
  #home-cases-ct > .flex-between { display: contents; } /* 解开标题/按钮包装，让按钮能排到列表之后 */
  #home-cases-ct > .flex-between > .section-head { order: 0; }
  #home-cases { order: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #home-cases-ct > .flex-between > .btn { order: 2; align-self: flex-start; }
  #home-cases .k-media { aspect-ratio: 2 / 1; }
  #home-cases .k-body { padding: 13px 12px 14px; }
  #home-cases .k-body h4 { margin: 0; font-size: 15px; }
  /* v1.65.144：移动端隐藏案例卡下半部（描述段落 + 类型/面积/日期信息行） */
  #home-cases .k-body p { display: none; }
  #home-cases .k-meta { display: none; }
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 26px; }

  .hero { padding-bottom: 54px; }
  /* v1.65.132：副标语（.grad）一行完整显示不跳行 */
  /* v1.65.138：标题与副标语字号一致（统一 6.7vw，上限取副标语单行能放下的最大值，避免 nowrap 溢出） */
  .hero h1 { font-size: clamp(17px, 6.7vw, 27px); }
  .hero h1 .grad { white-space: nowrap; letter-spacing: -.02em; }
  .hero-inner, .hero.has-notice .hero-inner { padding-top: 44px; }
  .hero-cta { margin-bottom: 38px; }
  /* v1.65.129：两个 CTA 按钮改为一行并排（等分宽度），不再各自占满一行 */
  .hero-cta { flex-wrap: nowrap; gap: 10px; }
  .hero-cta .btn { width: auto; flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
  .hero-stats { gap: 22px 34px; }
  .hero-stat b { font-size: 27px; }
  .hn-inner { flex-wrap: wrap; gap: 10px; }
  .hn-text { display: none; }
  .hn-body { flex: 1 1 auto; }

  .page-hero { padding: 40px 0 34px; }
  .page-hero p { font-size: 14.5px; }

  .cta-band { padding: 26px 22px; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1; }

  .filter-bar { gap: 12px; }
  .toolbar { gap: 10px; }
  /* v1.15.3：搜索框与排序栏的宽度改由文件末尾的 v1.15.3 段统一处理（并排等宽），
     此处原有的 min-width:100% / width:100% 已被那段的 flex:1 1 0 + min-width:0 取代。 */

  .tabs { gap: 0; }
  .tabs > button { padding: 12px 14px; font-size: 14px; }

  .doc-row { flex-wrap: wrap; align-items: flex-start; gap: 14px; }
  .doc-actions { width: 100%; }
  .doc-actions .btn { width: 100%; }

  .pd-sku { gap: 6px 16px; }
  .pd-attr .k { width: 66px; }
  .pp-now { font-size: 26px; }
  .pd-actions .btn { flex: 1; }

  .to-top { right: 16px; bottom: 18px; }
  .search-layer { padding: 6vh 14px 24px; }
  .sb-input { height: 54px; font-size: 16px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   16. 页面底色（必须保持为最后一条规则）
   背景由 body.site 自身绘制，site.css 在 base.css 之后加载，因此能覆盖全局底色。
   ========================================================================== */
body.site {
  /* v1.40.0：整页底色改走主题令牌 —— 未自定义时 = base.css 里的 #07070A（视觉零变化），
     后台「配色主题」里选了页面底色后，注入的值整体替换（纯色 / rgba / 渐变均可）
     v1.65.415：删掉原来紧跟的 `background-color: #07070A !important` —— 它把上面
     令牌里的颜色（含用户自定义值）整体闷死，「页面整体底色」设置从未真正生效；
     令牌默认值已在 base.css 对齐为 #07070A，删后默认外观不变。 */
  background: var(--theme-site-page, var(--grad-site-page)) fixed no-repeat !important;
  /* v1.65.194：移动端浏览器地址栏会伸缩，100vh 比实际可视区更高，
     导致首屏底部内容被裁掉。dvh 跟随可视区实时变化 —— 先写 vh 兜底，
     不支持 dvh 的老浏览器会忽略后一条，视觉不变。 */
  min-height: 100vh;
  min-height: 100dvh;
}

/* ==========================================================================
   v1.10.6 全站微调
   ① 左侧菜单：字号 ×0.8（标题 17 → 13.6px、菜单项 18 → 14.4px），全部取消加粗
   ② 商品陈列卡：只显示上半部分（深色图区 = 封面图 + 角标），隐藏下半部分浅色信息区
   ========================================================================== */

/* ① 左侧菜单（官网所有带筛选侧栏的页面共用 .filter-side） */
.filter-side h5 { font-size: 13.6px !important; font-weight: 400 !important; }
.filter-side a.fs-item { font-size: 14.4px !important; font-weight: 400 !important; }
.filter-side a.fs-item.is-active { font-weight: 400 !important; }
.filter-side a.fs-item .fs-count { font-size: 13px !important; font-weight: 400 !important; }

/* ② 商品卡：只保留图区 */
.product-card .pc-body { display: none !important; }
.product-card { border: 0; }
.product-card:hover { border-color: transparent; }
.pc-media { aspect-ratio: 8 / 7; }

/* ========================================================== v1.65.202
   【商品列表 · 卡片信息行全局隐藏】
   用户原话（带图）：「在商品列表中，图中这部分全局隐藏」
   图中这部分 = 商品卡信息区底部那一行 .pc-meta：左侧「型号 · 协议」文本
   （形如 ZJ-GW-PRO · Zigbee 3.0 / Thread / Wi-Fi 6 / 有线）
   + 右侧「在售 / 一口价 / 可订」状态徽章。

   做法：只加样式、**不动 DOM** —— productCard() 由官网与订货端共用，
   删节点会波及订货端的卡片结构；此处与 .cat-fold / .plat-tabs 的既有
   隐藏做法一致（DOM 保留，仅 display:none）。价格 .pc-price 早在 v1.65.193
   就移出了 .pc-meta（是 .product-card 的直接子级），故本行隐藏**不影响价格**。

   ⚠️ !important 的必要性：下方手机端 / 平板竖屏 / 平板横屏三个媒体块里都写了
      `.p-grid .product-card .pc-meta { display: block; … }`（权重 0,3,0），
      本条基准规则只有 0,2,0，不加 !important 会被那几个块按权重压过去。 */
.product-card .pc-meta { display: none !important; }

/* ========================================================== v1.65.198
   【PC 端产品中心 → 京东风格】用户参考京东搜索结果页。
   仅作用于产品中心（.layout-side 包裹），移动端/平板保持「图为主的大卡」不变。
   要点：① 桌面端恢复完整卡片（图 + 标题 + 描述 + 型号协议 + 价格）；
        ② 左侧筛选栏（.filter-side）与顶部排序栏（.toolbar）本就存在，与京东一致；
        ③ 白底 + 细边框 + 直角外框（呼应 v1.65.198 全局直角）；
        ④ 价格用品牌红 var(--red)，与京东红色价格一致。

   v1.65.418（用户原话）：「PC端产品中心的列表调整为每3列，每页五行；商品框的比例
   调整为4:3；底色不透明度调为70%；商品与商品之间的间距约束在10像素」
     · 列数 4 → 3（每页 15 款 = 3 列 × 5 行，JS 侧 state.size 同步改 15）；
     · 商品框图片区 8/7 → 4/3（只作用于 .layout-side，详情页相关推荐不受影响）；
     · 卡片底色 #fff 实底 → rgba(255,255,255,.7)（70% 不透明度，透出深色页面底）；
     · 网格间距（基础段 .grid 的 24px）约束到 10px。
   ⚠️ 平板竖屏/横屏两个 orientation 块在文件更后方，同权重后来者胜，
      平板仍维持各自的四列大卡，不受本块影响。 */
@media (min-width: 761px) {
  .layout-side .product-card .pc-body { display: flex !important; }
  .layout-side .product-card {
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
  }
  .layout-side .product-card:hover { border-color: var(--brand-100); box-shadow: 0 18px 40px -28px rgba(0, 0,0, .35); }
  .layout-side .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .layout-side .pc-media { aspect-ratio: 4 / 3; }
  .layout-side .pc-sk { aspect-ratio: 4 / 3; }
  /* v1.65.381：价格下方间距约束到 15px（视觉口径）。两件事：
     ① 基础段 `.product-card > .pc-price` 带 padding:0 14px 14px，与本条 margin 叠加成
        「14+16=30px」双重间距（旧版价格下方 ~31px 视觉空白的元凶）—— 此处 padding 置 0；
     ② 下 margin 给 6px：价格字盒底部有 ~8.1px 半沉降，6 + 8.1 + 边框 1 = 视觉 ~15px
        （DPR2 截图逐行扫描实测标定；若只给 15px margin，视觉会是 24px）。 */
  .layout-side .pc-price { margin: 0 18px 6px; padding: 0; }
  .layout-side .pc-price .now { color: var(--red); }
}

/* v1.65.418：商品列表骨架屏的媒体盒。原 skeletonGrid() 里写的是 inline
   `aspect-ratio:8/7`，会把 PC 端骨架钉成 8/7，与 4:3 真实卡片不同步 ——
   15 个骨架盒加载时先高后矮，视觉抖动。改为类名驱动：
   移动端/平板走本条 8/7（与 .pc-media 基础值一致），PC 端由上面
   min-width:761px 块内的 `.layout-side .pc-sk` 覆盖为 4/3。 */
.pc-sk { aspect-ratio: 8 / 7; border-radius: 0; }

/* ========================================================== v1.65.419
   【PC 端产品中心 · 品牌 / 平台快捷筛选下拉】
   用户原话：「PC端产品中心商品例表搜索栏下方增加品牌、平台两个下拉选择框」
   位置：.filter-combo 内 .toolbar（搜索栏）正下方、.filter-side（分类树）上方。
   排列：**纵向堆叠**（各占满左列 200px）—— 实测左列只有 200px，一行两个各 95px，
   「全部品牌」四字 + 箭头就要 ~96px 必被截断，「HarmonyOS Connect」更放不下；
   堆叠后内容区 ~148px，品牌全名（施耐德 Schneider ≈116px）与平台全名都放得下。
   作用域：只服务 PC（>1366px）—— 与「PC 京东风格」块同一条界线：
     平板竖屏/横屏（761~1366）有分类标签 + 控制平台标签行，手机（≤760）同理，
     都不重复给下拉，避免同一筛选两个入口互相打架。
   1367 的来历：文件末尾平板横屏块上界是 1366（「宽于 1366 的横屏仍走 PC 块」），
   本块与那条界线严格对齐，1366 及以下一律不显示。 */
.p-filters { display: none; }
@media (min-width: 1367px) {
  .filter-combo .p-filters { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
  .filter-combo .p-filters .select { width: 100%; }
}

/* ========================================================== v1.65.419
   【商品列表 · 图示完整显示】
   用户原话：「商品列表中的图示缩小到完全显示，不现状被截断」。
   原 `object-fit: cover` 会把竖长的产品图（如境悦/珍铂面板）上下裁掉；
   改 contain 后整图按短边缩放完整落入图区，两侧留白用白色底 —— 施耐德
   商品图本身是白底，留白与图浑然一体，不会出现灰边。
   ⚠️ 只作用于 .p-grid（产品中心列表，含手机/平板）；详情页主图 .pg-main、
      详情页相关推荐与首页卡片均不用 .p-grid，保持原样。 */
.p-grid .pc-media { background: #fff; }
.p-grid .pc-media > img { object-fit: contain; }

/* ==========================================================================
   v1.10.8 左侧菜单：仅「分组标题」（产品分类 / 控制平台）放大 1/5 并加粗
   · 分组标题：13.6px × 1.2 ≈ 16.3px，字重 700
   · 选中项（如「全部产品」）保持原状：14.4px / 400（v1.10.9 按需求还原）
   ========================================================================== */
.filter-side h5 { font-size: 16.3px !important; font-weight: 700 !important; }
.filter-side a.fs-item.is-active { font-size: 14.4px !important; font-weight: 400 !important; }

/* ==========================================================================
   v1.10.10 商品陈列卡：隐藏左上角标签（热销 / 推荐 / 新品 / N 个规格）
   卡片只保留封面图，角标一律不显示（全站：首页热销、产品中心列表、详情页相关产品）
   ========================================================================== */
.pc-flags { display: none !important; }

/* ==========================================================================
   v1.11.0 可读性：浅色文字加深（商品详情页为重点，全站同色调）
   原三级灰 #86868B 在白底/浅灰底上偏淡，深色底上的半透明白也偏弱；
   这里统一加深到 #4F4F57 / #3F3F45，仍保持中性冷灰与整体黑白灰+绿强调的配色协调。
   ========================================================================== */
/* 商品详情：SKU 行 / 价格标签 / 属性名 / 规格表首列 / 服务承诺 */
.pd-sku, .pp-label, .pd-attr .k, .spec-table td:first-child, .spec-table caption { color: #4F4F57 !important; }
.pd-sku b { color: var(--text-1); }
/* 正文与描述 */
.pd-info p, .pd-attr .v, .rich-text { color: #33333A; }
.pc-desc, .doc-meta, .nd-meta { color: #4F4F57; }
/* 深色底上的浅色文字（封面/横幅内）提高不透明度，白底上更清晰
   ⚠️ v1.26.0 修正：原来这条把 `.page-hero p` 也算进来了，于是**内页页头那段说明文字
      （产品中心 / 解决方案 / 案例 / 服务支持 / 资料下载 的 desc）在浅色底上被涂成白色**，
      与 rgba(255,255,255,.82) 的页头底色对比度约 1.05:1 —— 用户截图里那行字「很淡、
      几乎看不见」就是这个原因，属于选择器写宽了的真实缺陷。
      下面 `.page-hero p` 回到 8 节里本来就写好的 var(--text-2)（深灰）。
      方案详情那种真·深色页头不受影响：它的 h1/p 都带内联颜色（见 renderSolution）。 */
.hero p, .hero .lead, .cta-band p { color: rgba(255, 255, 255, .88); }

/* ==========================================================================
   v1.11.1 商品详情页可读性补强
   问题：详情信息区直接压在「黑→金」底色薄纱上，浅灰标签（通信协议 / 产品编码 /
        计量单位 / 质保期限…）与分割线对比不足，仍显模糊。
   处理：① 内容区薄纱加厚，让文字落在接近白色的底上（与全站浅底一致）
        ② 标签再深一档、数值加深，分割线由 #F0F0F0 改为可见的中性描边
   ========================================================================== */
.section { background: rgba(255, 255, 255, .74); }
.page-hero { background: rgba(255, 255, 255, .82) !important; }

/* 标签（左列）与数值（右列）—— 服务承诺行 (.pd-promise) 按需求保持原状，不在此列 */
.pd-sku, .pp-label, .pd-attr .k, .spec-table td:first-child, .spec-table caption {
  color: #3A3A41 !important;
}
.pd-attr .v, .pd-info p { color: #1C1C22 !important; }
/* 分割线：在薄纱上也能看清 */
.pd-sku, .pd-attr, .pd-promise, .spec-table, .spec-table td { border-color: rgba(28, 28, 34, .14) !important; }
/* 规格表首列底色略作区分，便于扫读 */
.spec-table td:first-child { background: rgba(28, 28, 34, .03); }

/* ==========================================================================
   v1.11.2 商品详情页与面包屑：字号放大 1/3（×1.333）
   原字号 → 新字号：
     .breadcrumb 13.5 → 18px ｜ .pd-sku 13 → 17.3px ｜ .pd-attr 13.5 → 18px
     .pp-label 12.5 → 16.7px ｜ .pd-promise 12.5 → 16.7px ｜ .spec-table td 13.5 → 18px
   ========================================================================== */
.breadcrumb { font-size: 18px !important; }
.pd-sku { font-size: 17.3px !important; }
.pd-sku b { font-size: 17.3px; }
.pd-attr { font-size: 18px !important; }
.pd-attr .k { width: 92px; }
.pp-label { font-size: 16.7px !important; }
/* 服务承诺行（整机质保 / 现货 / 技术顾问）：按需求恢复原状，字号回到 12.5px */
.pd-promise { font-size: 12.5px !important; color: var(--text-3) !important; }
.pd-promise span { color: var(--text-3); }
.spec-table td { font-size: 18px !important; }

/* ==========================================================================
   v1.12.1 分类卡片（首页 + 产品中心的分类宫格）：深灰 70% 不透明 + 毛玻璃
   底色由浅紫改为深灰，卡片内文字/图标同步改为浅色以保证对比度
   ========================================================================== */
.cat-card {
  background: rgba(38, 38, 43, .70) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .55);
}
.cat-card:hover {
  background: rgba(30, 30, 35, .82) !important;
  border-color: rgba(255, 255, 255, .26) !important;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6);
}
/* 卡片内文字：深底改浅色（标题白、描述与计数半透明白） */
.cat-card h4, .cat-card h3, .cat-card .cc-title { color: #FFFFFF !important; }
.cat-card p { color: rgba(255, 255, 255, .82) !important; }
.cat-card .cc-count { color: rgba(255, 255, 255, .68) !important; }
/* 图标底块：半透明白 + 浅色图标 */
.cat-card .cc-icon {
  background: rgba(255, 255, 255, .16) !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18) !important;
}
.cat-card:hover .cc-icon { background: rgba(255, 255, 255, .26) !important; color: #fff !important; }
.spec-table caption { font-size: 17px; }

/* v1.13.6 商品详情信息区：字号缩小 1/5（×0.8）
   .pd-sku 17.3 → 13.8px ｜ .pd-attr 18 → 14.4px */
.pd-sku { font-size: 13.8px !important; }
.pd-sku b { font-size: 13.8px; }
.pd-attr { font-size: 14.4px !important; }

/* v1.13.7 商品详情「规格参数」：参数表格改为圆角
   v1.65.2：全站直角规则已撤销，这里的 !important 已无必要（同权重的
   `* { border-radius: 0 }` 不复存在），去掉后行为不变、代码更干净。 */
.spec-table {
  border-radius: 0;
  overflow: hidden;
}
.spec-table caption {
  border-radius: 0;
}
.spec-table tr:last-child td:first-child { border-radius: 0; }
.spec-table tr:last-child td:last-child { border-radius: 0; }

/* v1.13.8 商品详情「规格参数」：字号缩小 1/5（×0.8）
   单元格 18 → 14.4px ｜ 分组标题 17 → 13.6px */
.spec-table td { font-size: 14.4px !important; }
.spec-table caption { font-size: 13.6px !important; }

/* v1.13.9 官网顶部菜单：字号放大 2/5（15px × 1.4 = 21px）
   仅顶部一级菜单项（首页 / 产品中心 / 工程案例 / 服务支持 / 关于我们） */
.site-header .nav > a,
.site-header .nav-item > a { font-size: 21px !important; }
.site-header .nav-item > a svg { width: 16px; height: 16px; }

/* v1.13.10 官网顶部菜单：在上一版基础上再缩小 1/5（21px × 0.8 = 16.8px） */
.site-header .nav > a,
.site-header .nav-item > a { font-size: 16.8px !important; }
.site-header .nav-item > a svg { width: 15px; height: 15px; }

/* v1.65.168：悬浮返回球本就是「仅移动端」功能（见下方 v1.15.0 区块），
   但 renderFabBack() 在**任意视口**下都会把 <a.fab-back> 塞进 body。
   桌面端没有对应样式规则 → 退化为一行深字压在近黑底上（看不见、还可能误点）。
   这里在媒体块之外先把它藏起来，移动端媒体块内再 display:inline-flex 打开。 */
.fab-back { display: none; }

/* ==========================================================================
   v1.15.0 【仅移动端】导航自适应
   —— 需求：① 导航栏不动作时尽量隐藏，把屏幕让给内容
            ② 一进页面/任何位置都能第一时间找到「返回」
   —— 全部包在 max-width:760px 里，PC 端（>760px）一条规则都不生效
   ========================================================================== */
@media (max-width: 760px) {
  /* ① 页头自动显隐（v1.65.179 已上移到 @media (max-width:1100px) 的「页头自动显隐」块，
     手机与平板共用同一套规则，此处不再重复） */

  /* ② 悬浮返回按钮：常驻在屏幕左下角，滚动到任何位置都点得到
     不用 position:fixed 覆盖内容，而是贴在左下角安全区上方 */
  .fab-back {
    position: fixed; left: 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 380;
    display: inline-flex; align-items: center; gap: 5px;
    height: 40px; padding: 0 15px 0 12px;
    font-size: 14px; font-weight: 500; color: #fff;
    background: rgba(18, 16, 12, .86);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .8);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    text-decoration: none; white-space: nowrap;
    transition: transform .16s var(--ease), background .16s var(--ease);
  }
  .fab-back:active { transform: scale(.94); background: rgba(18, 16, 12, .96); }
  .fab-back svg { width: 17px; height: 17px; flex: none; }
  /* 与右下角「回到顶部」按钮同高，取齐视觉重量 */
  .to-top { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }

  /* ③ 触摸目标：手机上小于 40px 的可点区域一律补足，避免误触与难点中 */
  .breadcrumb a,
  .footer-top a,
  .subnav a { min-height: 40px; display: inline-flex; align-items: center; }

  /* ④ 详情页原有的 back-bar 在移动端已被悬浮球取代，避免两个返回入口重复 */
  .back-bar { display: none !important; }
  .product-detail .container,
  .article-detail .container { padding-top: 10px; }
}

/* 小屏机型（≤400px）进一步收紧：悬浮返回球只留箭头，文字让位给内容 */
@media (max-width: 400px) {
  .fab-back { padding: 0; width: 40px; justify-content: center; }
  .fab-back span { display: none; }
}

/* ==========================================================================
   v1.15.2【仅移动端】隐藏纯文字内页首屏
   --------------------------------------------------------------------------
   需求：手机上「所有页面都不显示截图里那个区块」（英文小标签 + 大标题 + 说明 + 面包屑）。

   为什么只在移动端隐：这块在 PC 上是内页的视觉锚点，标题居中留白是设计的一部分；
   但手机屏幕窄、首屏高度宝贵，实测这四行占掉约 200~260px（390×844 屏约占 1/4 屏），
   而用户真正要的是下面的产品/文章列表。手机上「我在哪、有哪些分类」由更轻的
   .ph-mini 条承担（见下），信息不丢。

   ⚠️ 关键：只隐藏「纯文字」首屏，**方案详情的整幅封面图必须保留**
      （JS 里写作 <section class="page-hero" style="padding:0;background:var(--ink-900)">，
       内含 420px 高的 cover 图）。那是有内容的信息，不是装饰，隐掉会让方案详情页
      打开就是一大段文字。用 :not() 把它排除。
   ========================================================================== */
@media (max-width: 760px) {
  /* ① 隐藏纯文字首屏；有内联 padding:0 的封面图版（方案详情）排除在外 */
  .page-hero:not([style*="padding:0"]) { display: none; }

  /* ② 补偿：给 .ph-mini（JS 渲染的轻量标题条）让出吸顶位置。
        与 .site-header 同为 sticky 时，靠 z-index 与实际文档流自然错开即可。 */
  .ph-mini {
    position: sticky;
    top: var(--header-h, 64px);
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;   /* v1.65.166：标题与计数整体居中，不再一头一尾顶到屏幕两边 */
    gap: 10px;
    min-height: 44px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  /* 页头收起时（is-nav-hidden）不跟着顶在半空，否则会露出下面的内容
     v1.65.154：页头外多了 #site-header 包装层，改用 :has() 穿透判断 */
  #site-header:has(.site-header.is-nav-hidden) ~ main .ph-mini { top: 0; }

  .ph-mini b {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--theme-site-text, var(--ink-950));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ph-mini span {
    font-size: 12.5px;
    color: var(--text-low);
    white-space: nowrap;
  }
  .ph-mini i {
    font-style: normal;
    font-size: 12.5px;
    color: var(--text-low);
    white-space: nowrap;
    /* v1.65.166：跟随标题居中，不再 margin-left:auto 顶到最右 */
    flex: none;
  }
  /* v1.65.166：标题与计数之间加一个分隔点，居中排版更精致 */
  .ph-mini i::before {
    content: '·';
    margin-right: 8px;
    color: var(--text-3);
  }

  /* ③ 首屏消失后，紧贴其上的 section 不该再留 60px 空白 */
  .page-hero + .section,
  .ph-mini + .section { padding-top: 34px; }
  .page-hero + .section-sm { padding-top: 26px; }
}

/* 桌面端完全不受影响：小标题条本就不渲染，且 hero 不隐藏 */

/* ==========================================================================
   v1.15.3【仅移动端】产品中心：搜索框与排序栏并排等宽
   --------------------------------------------------------------------------
   需求：① 移动端仍要能排序（不隐藏排序栏）；② 搜索框与排序栏长短要一致。

   之前的 bug（v1.15.0 遗留）：`@media (max-width:640px)` 里有两条互相打架的规则
     .toolbar .input-icon { min-width: 100%; }    ← 想让它撑满
     .toolbar .select     { width: 100% !important; }
   但基础规则 .toolbar .input-icon { flex: 1; min-width: 220px; }（851 行，未被覆盖）
   里的 min-width:220px 是**不可压缩的下限**：
   390px 视口扣掉容器内边距约 40px 后只剩 ~350px，
   220px(搜索) + 10px(gap) + 排序栏根本放不下 → flex-wrap 换行，
   搜索框被挤成一档、排序栏掉到下一行另一档，于是「长短不一致」。

   修法：两者都设 `flex: 1 1 0` + `min-width: 0`，让它们**均分**可用宽度。
   `min-width: 0` 是关键 —— 只有它能覆盖掉那条 220px 下限。
   ========================================================================== */
@media (max-width: 760px) {
  .toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;      /* 强制同一行，不再因放不下而换行 */
  }

  /* ① 搜索框容器：均分宽度、可压缩到 0 */
  .toolbar .input-icon {
    flex: 1 1 0;
    min-width: 0 !important;   /* 覆盖基础规则的 220px 下限，这是本次修复的核心 */
    width: auto;
  }
  .toolbar .input-icon .input { width: 100%; min-width: 0; }

  /* ② 排序下拉：与搜索框完全等宽。
        JS 上有内联 style="width:170px"，必须用 !important 覆盖（内联样式优先级最高）。 */
  .toolbar .select {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
  }

  /* ③ 两者高度对齐：基础规则 .input/.select 同为 44px（base.css:344），
        这里显式写同值并锁住，避免将来某处只改了其中一个导致错位。
        注意：字号不能改小 —— base.css 的移动端规则会把 input/select 提到 16px
        （iOS 聚焦时自动放大页面），改小反而会破坏该保护。 */
  .toolbar .input-icon,
  .toolbar .select { height: 44px; }
  .toolbar .input-icon .input { font-size: 16px; }
  .toolbar .select {
    padding-left: 12px;
    padding-right: 32px;      /* 给右侧下拉箭头留位，别压住文字 */
    background-position: right 10px center;
  }

  /* ④ 排序文字过长时省略而不是撑破 */
  .toolbar .select { text-overflow: ellipsis; }
}

@media (max-width: 360px) {
  .toolbar { gap: 8px; }
  .toolbar .input-icon { flex: 1.4 1 0; }
  .toolbar .select { flex: 1 1 0; }
}

/* ==========================================================================
   v1.15.5【仅移动端】公告栏强制单行显示
   --------------------------------------------------------------------------
   需求：手机上公告只占一行，现在占了两行。

   根因（实测宽度算出来的，不是猜）：`@media (max-width:640px)` 里有
     .hn-inner { flex-wrap: wrap; gap: 10px; }   ← 元凶
   而 390px 视口下各控件实测需求是：
     公告牌 63 + 了解详情 89 + 圆点 38 + 关闭 39 + gap 24 = 253px
     剩给标题只有 97px，而真实标题有 149 / 189 / 297px 三种长度
     → 无论如何都放不下 → wrap 必然触发折成两行。
   （`.hn-text` 早已 `display:none`，所以两行不是它造成的。）

   修法：手机上**不再依赖 wrap**，改为「能省的省 + 剩下的截断」：
   ① 去掉「了解详情」按钮 —— 手机上点公告本身就能看详情，这个按钮价值最低、
      却吃掉 89px（约占可用宽度的 1/4）。不是删功能，是把入口收敛到点正文。
   ② 标题改为可压缩 + 省略号 —— 真正的「一行」必须允许长标题被截断，
      否则再砍也放不下 297px 那条。
   ③ 圆点与关闭按钮保留：圆点是多条公告的唯一切换入口，关闭是用户主动操作。
   ========================================================================== */
@media (max-width: 760px) {
  /* ① 绝不换行：这是「只显示一行」的硬保证 */
  .hn-inner {
    flex-wrap: nowrap;      /* 覆盖 640px 段里的 wrap，这是本次修复的核心 */
    gap: 8px;
    padding: 9px 0;
    min-height: 44px;
  }
  /* 单行后的实际高度约 62px（含 padding），给 max-height 一个匹配的值。
     ⚠️ 不能写 `max-height: none` —— 关闭动画 `.is-closing { max-height: 0 }`
     依赖 max-height 收缩，写 none 会让关闭时「不消失」。 */
  .hero-notice { max-height: 64px; }
  .hero-notice.is-closing { max-height: 0; }

  /* ==========================================================================
     v1.65.180【仅手机端】底部公告改为「通栏 + 文字跑马灯跟随滚动」
     --------------------------------------------------------------------------
     需求（用户原话）：「另手机端底部显示公告并跟随」——
     手机端底栏固定在最底部，公告文字像跑马灯一样不断横向滚动（跟随），
     长标题不再被省略号截断（跑马灯天然容纳任意长度）。
     实现要点：
       ① 结构：`.hn-body` 只留一条 `.hn-track` 轨道（内含标题 + 摘要），
          旧布局（标题+摘要并排 + 省略号）在手机端整体停用；
       ② 动画（v1.65.185 重做）：轨道内含**两份完全相同**的 `.hn-mq-seg`，
          从 `translateX(0)` 滚到 `translateX(-50%)` —— 滚完正好与第二份重合，
          回跳无痕。**开局即在可视区**，不再有「大半时间空白」的问题。
          旧版 `translateX(100%) → translateX(-100%)` 会让轨道整条从容器右侧外起步，
          18 秒周期里绝大多数时间公告栏看不到文字（用户反馈「底部没有公告显示」的真因）。
       ③ 「跟随」由 CSS 原生动画驱动，不占 JS 定时器，
          正文与切换多条公告时重建轨道即自动重播（paint() 已重建 innerHTML）；
       ④ 尊重系统「减弱动态效果」：`prefers-reduced-motion` 下改为静止显示首段文字。
     ========================================================================== */
  .hn-body { display: block; overflow: hidden; flex: 1 1 auto; min-width: 0; }
  /* 手机端不再用省略号截断，交给跑马灯承载 */
  .hn-title, .hn-text { display: none; }
  .hn-track {
    display: inline-flex; align-items: center; gap: 0;
    white-space: nowrap; will-change: transform;
    animation: hnMarquee 18s linear infinite;
  }
  .hn-track > * { flex: none; }
  /* v1.65.185：两份内容等宽，动画滚到 -50% 即与第二份完全重合 */
  .hn-mq-seg { display: inline-flex; align-items: center; gap: 0; flex: none; }
  /* 轨道内重建的两段文字样式（跑马灯版） */
  .hn-mq-title { font-weight: 600; color: #fff; }
  .hn-mq-text { margin-left: 22px; color: rgba(255, 255, 255, .7); }
  @keyframes hnMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* ② 收掉「了解详情」：点公告正文即可看详情，手机上这个按钮冗余 */
  .hn-more { display: none; }

  /* ③ 标题可压缩 + 省略号（min-width:0 是 flex 子项能真正收缩的前提） */
  .hn-body {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
  }
  .hn-title {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* v1.15.5：手机上「了解详情」隐藏后，标题成为详情入口 —— 给出可点的手型与按压反馈，
     否则用户不知道这里能点。PC 端仍由「了解详情」按钮承担入口，标题不加这些。 */
  .hn-title { cursor: pointer; }
  .hn-title:active { opacity: .68; }
  /* 正文摘要在手机上原本就 display:none，这里再确认一次，防止别处改回来 */
  .hn-text { display: none; }

  /* ④ 关闭按钮扩大可点区域（视觉不变，手指更好按） */
  .hn-close {
    width: 34px; height: 34px;     /* 从 26px 提到 34px，满足触摸目标 */
    flex: none;
    margin-right: -4px;            /* 视觉上贴齐右缘，但不产生横向滚动 */
  }

  /* ⑤ 公告条是 fixed 悬浮，body 的留白也要跟着降到单行高度（原 56px 偏大） */
  body.has-notice-bar { padding-bottom: 50px; }
}

/* 极窄屏（≤360px）：连「公告」牌都压缩，保证标题至少还能显示十几个字 */
@media (max-width: 360px) {
  .hn-badge { padding: 3px 7px; font-size: 12px; }   /* 不低于 12px：再小手机上就看不见了 */
  .hn-inner { gap: 6px; }
}

/* ==========================================================================
   v1.15.6【仅移动端】修「正文被挤成一条竖线」
   --------------------------------------------------------------------------
   症状（用户真机截图）：方案详情页的「方案概述」标题与正文竖着排成一条线，
   每个字单独一行，右侧「相关标签 / 获取报价」卡片却占了大半屏。

   根因：详情页的两列布局写在**HTML 内联样式**里：
     <div class="grid" style="grid-template-columns:minmax(0,1fr) 320px;gap:48px">
   390px 视口扣掉容器内边距约 40px 只剩 ~350px：
     320px(侧栏) + 48px(gap) = 368px  →  **主栏只剩 22px**
   所以正文被压成竖线。而移动端那些「`.grid-2/.grid-3/.grid-4` 收敛为单列」的规则
   **盖不住内联样式**（内联优先级最高），这就是为什么之前一直没被通用规则兜住。

   修法：把列宽从内联样式挪到**类 + CSS 变量**，让移动端能覆盖；
   宽度值仍用内联的 `--aside-w` 传入，只换承载方式，PC 端视觉不变。
   ========================================================================== */

/* 桌面端：恢复原来的两列布局（列宽由 --aside-w 传入，与改动前一致） */
.layout-aside {
  grid-template-columns: minmax(0, 1fr) var(--aside-w, 320px);
  gap: 48px;
  align-items: start;
}
.layout-2col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap, 48px);
  align-items: start;
}

@media (max-width: 900px) {
  /* 平板：侧栏收窄但仍两列（原来就是 900px 才断） */
  .layout-aside {
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 32px;
  }
  .layout-2col { gap: 32px; }
}

@media (max-width: 760px) {
  /* ① 手机：主栏优先，侧栏降到正文下方单列 —— 彻底消除「22px 竖排」 */
  .layout-aside,
  .layout-2col {
    grid-template-columns: minmax(0, 1fr);   /* 单列，宽度交回 grid 自己算 */
    gap: 28px;
  }
  /* ② 侧栏卡片在手机上不再被固定宽度顶住，可以正常撑满 */
  .layout-aside > aside { min-width: 0; }
}

/* ==========================================================================
   v1.15.8【仅移动端】产品中心：搜索栏重排 + 产品一屏四列
   --------------------------------------------------------------------------
   需求（用户真机截图 + 文字）：
     ① 搜索栏加宽，后面显示「搜索」按钮，排序栏调窄，**三者仍在一行**
     ② 产品展示缩小，按行四列
     ③ 不影响 PC 端

   宽度账（390px 视口，容器内边距约 40px → 可用 350px）：
     搜索按钮 64 + 排序栏 104 + 两个 gap 20 = 188
     → 搜索框 = 350 - 188 = **162px**（原来 350÷2 - gap ≈ 170 但被 select 占掉一半）
   排序栏 104px 能放下「默认排序」（13.5px×4 字 + 32px 箭头余量 = 86px），够用。

   四列可行性：每列 = (350 - 10×3) ÷ 4 = **80px**。
   80px 放不下原来的「图 + 系列 + 名称 + 描述 + 价格 + 库存」，
   所以**按用户选择做成极简卡：图 + 名称 + 价格**，其余在移动端隐藏。
   ========================================================================== */
@media (max-width: 760px) {
  /* ① 搜索栏三件套：搜索框(flex:1 可压缩) + 固定宽按钮 + 固定宽排序 */
  .toolbar .search-box {
    flex: 1 1 0;
    min-width: 0 !important;      /* 覆盖 v1.15.3 里的同款声明，保持一致 */
  }
  .toolbar .search-btn {
    flex: 0 0 auto;
    height: 44px;                 /* 与输入框同高，视觉才齐 */
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    white-space: nowrap;
  }
  .toolbar .select {
    flex: 0 0 104px;              /* 收窄：从均分改成固定 104px */
    width: 104px !important;      /* 覆盖 v1.15.3 的 width:auto !important */
    min-width: 0;
  }
  /* 按钮里的文字在极窄屏可以省掉，只留放大镜 */
  .toolbar .search-btn span { display: inline; }

  /* ② 产品两列（v1.65.195：由四列 → 两列）
        v1.15.9 起这里是四列；用户要求手机端统一为双列大卡，故改为两列。
        391px 屏实测：两列每列约 179px，比四列的 80px 大一倍多。
        ⚠️ 本条与文件下方（约 2942 行）另一条 max-width:760px 的列数规则
           **结论必须一致**，否则后出现的会覆盖前者、导致「改了不生效」。 */
  .p-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }
  /* 两列下图片圆角回到常规值（密集四列时才需要收小） */
  .p-grid .pc-media { border-radius: 0; }
}

@media (max-width: 360px) {
  /* 极窄屏：搜索按钮只留放大镜，把宽度让给搜索框与排序栏 */
  .toolbar .search-btn { padding: 0 10px; }
  .toolbar .search-btn span { display: none; }
  .toolbar .select { flex: 0 0 96px; width: 96px !important; }
}

/* 桌面端：搜索按钮不显示（PC 靠回车搜索，多一个按钮反而挤）
   ⚠️ 四列 / 极简卡这些规则全部包在上面的 max-width:760px 内，
   PC 端 `.grid-3` 与产品卡原样完全不受影响，这里只需把搜索按钮显式关掉。 */
@media (min-width: 761px) {
  .toolbar .search-btn { display: none; }
}

/* ==========================================================================
   v1.15.9【仅移动端】产品中心：回退到两列 + 去掉搜索按钮与排序栏
   --------------------------------------------------------------------------
   需求（用户反馈 v1.15.8 的四列方案）：
     「太小了看不清，移动端还是改成两列吧，把搜索的按钮删除，把排序那栏隐藏」

   宽度对比（390px 视口，扣内边距可用 350px）：
     四列 = (350-8×3)÷4 = **80px**  ← 用户反馈「太小看不清」
     两列 = (350-12×1)÷2 = **169px** ← 宽一倍多，图片看得清
   → `.p-grid` 从 `repeat(4,...)` 改回 `repeat(2,...)`，gap 从 8px 回到 12px。

   ⚠️ 排序栏的处理方式：**只隐藏，不删**。
      排序是**唯一入口**就在这个 `<select id="p-sort">`（JS 里 `state.sort` 只有这一处被写），
      用 `display:none` 隐藏后手机上确实没法排序，但：
      ① 功能代码与 DOM 全部保留，将来想恢复只需删掉这一条 CSS；
      ② URL 上的 `?sort=` 参数仍然生效（可分享带排序的链接）。
      用户明确要求隐藏，这是取舍，不是遗漏。
   ========================================================================== */
@media (max-width: 760px) {
  /* ① 产品两列：80px → 169px，看得清了 */
  .p-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }
  /* 图片圆角回到常规值（两列不需要再压缩） */
  .p-grid .pc-media { border-radius: 0; }

  /* ② 搜索框独占满宽（350px，比之前 162px 宽一倍多） */
  .toolbar .search-box {
    flex: 1 1 100%;
    min-width: 0 !important;
  }

  /* ③ 隐藏搜索按钮与排序栏 —— 只隐藏，不删 DOM */
  .toolbar .search-btn,
  .toolbar .select {
    display: none !important;
  }
}

/* ==========================================================================
   v1.15.10【仅移动端】页脚瘦身：隐藏栏目区
   --------------------------------------------------------------------------
   需求（用户真机截图）：
     「移动端底部从全国服务热线到关于我们全部隐藏，同时删除最底部网站地图和登录链接」

   为什么在移动端隐藏整块 `.footer-top`：
     截图里那一长条（品牌介绍 + 全国服务热线 + 产品中心/服务支持/关于我们/联系我们 四栏）
     在 760px 断点下已被 `.footer-top { grid-template-columns: minmax(0,1fr) }` 摊成**单列**，
     于是变成 5 大段、约 20 行、又长又难滚。手机上这些信息在**页头汉堡菜单**里都能找到，
     重复展示价值低、却把「回到顶部」之前的内容撑得极长。

   ⚠️ 保留的：底部那行版权 + 备案号（`.footer-bottom`）——
     版权与 ICP 备案是合规要求，不能隐藏。

   v1.25.0 变更：原本这里还有「② 去掉底部『网站地图』『登录』两个链接」（display:none）。
     用户随后要求「全局删除」——即 PC 端也不要。**DOM 已从 site.js 里彻底删掉**，
     因此那两条隐藏规则 + 桌面端的 `display:inline` 兜底一并删除（留着就是死代码）。

   登录入口并没有消失：页头操作区（未登录时显示「登录」按钮）、
   汉堡菜单底部（「登录 / 进入系统」按钮）、提交工单处的「立即登录」都还在。
   ========================================================================== */
@media (max-width: 760px) {
  /* ① v1.15.10 曾把整个 .footer-top 隐藏；用户随后要求「联系我们不用隐藏，
        公司的介绍也不用隐藏」，因此改为**只隐藏中间两栏**。
        保留：.footer-brand（公司介绍） 与「联系我们」栏；
        隐藏：产品中心 / 服务支持 / 关于我们。
        用 grid 的显式列宽控制单列布局，不写 display:none 整块。 */
  .site-footer .footer-col-hide-m { display: none; }

  /* v1.65.182：用户要求「手机端底部这部分隐藏」—— 指 .footer-brand
        （LOGO + 站点名 + 公司介绍长文 + 全国服务热线块）。
        理由同 v1.15.10：手机上它占掉整屏大部分高度；公司介绍在「关于我们」页有完整版本，
        热线号码在下方「联系我们」栏也有一份（可拨号）。隐藏后手机页脚只剩
        「联系我们」一栏 + 版权行，干净很多。
        ⚠️ 与下面 v1.15.10.2 隐藏 .footer-hot 并不重复：.footer-hot 是它的子元素。 */
  .site-footer .footer-brand { display: none; }

  /* v1.15.10.2：手机端再隐藏 .footer-hot（「全国服务热线 + 号码 + 服务时间」）。
        原因：热线号码在「联系我们」栏里已经有一份（可点击直接拨号），
        同一页出现两遍是重复展示。 */
  .site-footer .footer-hot { display: none; }

  /* 服务时间原本只在 .footer-hot 里，隐藏后手机端会丢失 →
     在「联系我们」栏补一行（PC 端有热线块，重复，所以只在手机端显示）。
     v1.65.182：display 由 block 改 flex —— 与上面的 .footer-line 基础规则一致，
     保证图标与文字同一行（用户要求）。 */
  .site-footer .footer-hours-m {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13.5px;
    color: var(--text-low);
    padding: 5px 0;
    line-height: 1.7;
  }
  .site-footer .footer-hours-m svg { flex: none; margin-top: 3px; }

  /* 保留的两块单独成行：品牌介绍在前，联系我们在后 */
  .site-footer .footer-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  /* ② v1.25.0：「网站地图」「登录」已从 DOM 删除，原来的 display:none 规则随之移除 */

  /* ③ 版权行只剩一条，样式收一收，别显得空荡 */
  .site-footer .footer-bottom {
    padding: 18px 0;
    flex-direction: row;              /* 覆盖 v1.13.x 里移动端的 column 写法 */
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .site-footer .footer-bottom-links { gap: 14px; }
}

/* 桌面端显式保持显示（防止将来误伤） */
@media (min-width: 761px) {
  .site-footer .footer-brand { display: block; }   /* v1.65.182：手机端隐藏，PC 端显式恢复 */
  .site-footer .footer-col-hide-m,
  .site-footer .footer-col-keep-m { display: block; }
  .site-footer .footer-hot { display: grid; }
  /* PC 端的热线块里有服务时间，这一行只在手机端补（否则重复） */
  .site-footer .footer-hours-m { display: none; }
  .site-footer .footer-top {
    grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));   /* 与基础一致 */
  }
  /* v1.25.0：.footer-sitemap / .footer-login 的 display:inline 兜底已删除（元素本身已不存在） */
}



/* ==========================================================================
   v1.26.0 内页页头（.page-hero）背景图 —— 与首页首屏**同一套**显示参数
   --------------------------------------------------------------------------
   需求（用户附截图）：
     「网页中如图1这种区块，每个都如首页图2一样可以添加背景图，所有格式参数都一样。
       添加上传背景图的设置合并到首页运营位的页面内。」

   怎么保证「所有格式参数都一样」——**不复制数值，复用同一个类**：
     JS 在配了图时给 section 加 `.has-bg`，并插入与首页首屏**完全相同**的一段
     `<div class="hero-bg"><img …></div>`。于是
       · 图片铺满容器（position:absolute; inset:0）
       · object-fit: cover（不变形、裁切填满）
       · 亮度压到 opacity: .34
       · 再压一层深色渐变（.hero-bg::after）
     这四项全部由上面 `.hero-bg` 那几条规则提供，两端永远一致 ——
     而不是这里再抄一份数值（抄一份迟早会漂移）。
   本节只补两件事：① 底色/文字色切成与 `.hero` 相同的深底白字；
                   ② 底色用**同一个变量** `--top-grad`（首页首屏的底色）。

   ⚠️ 没配图的页面：section 上没有 `.has-bg`，本节**一条都不命中**，
      外观与改动前逐像素一致（守住「PC 端零改动」这条约定）。
   ⚠️ 移动端：v1.15.2 的 `.page-hero:not([style*="padding:0"]) { display:none }`
      照旧生效 —— 配了背景图的内页页头在手机上仍然不显示（保持既有约定，未擅自打开）。
   ========================================================================== */
.page-hero.has-bg {
  position: relative;      /* 让 .hero-bg 的 inset:0 相对本区块铺满 */
  overflow: hidden;        /* 图片超出部分裁掉 */
  /* 底色与首页首屏同一个变量；选择器 (0,2,0) 高于 8 节与 v1.11.1 的 (0,1,0)，
     两处都带 !important 时按特异性取胜，故能盖住浅底 */
  background: var(--theme-site-top, var(--top-grad)) !important;
  border-bottom-color: var(--top-line);
  color: #fff;
}

/* 文字：与 .hero 内同名元素取同一组颜色（深底白字） */
.page-hero.has-bg h1 { color: #fff; }
.page-hero.has-bg p { color: rgba(255, 255, 255, .86); }
.page-hero.has-bg .eyebrow { color: var(--top-accent, #FFD9AE); }
.page-hero.has-bg .breadcrumb,
.page-hero.has-bg .breadcrumb a { color: rgba(255, 255, 255, .72); }
.page-hero.has-bg .breadcrumb .current { color: rgba(255, 255, 255, .92); }
.page-hero.has-bg .breadcrumb a:hover { color: #fff; }

/* v1.65.37 回退：v1.65.36 曾给标题也加 text-shadow 提可读性，结果把首页金色渐变标题
   压成脏褐色 —— `.grad` 用 background-clip:text + color:transparent，阴影会从透明字形里
   透出来盖住渐变。此处**只保留小字**（正文/眉标/面包屑）的轻微阴影，标题一律恢复原样。 */
.hero p, .hero .eyebrow,
.page-hero.has-bg p, .page-hero.has-bg .eyebrow,
.page-hero.has-bg .breadcrumb, .page-hero.has-bg .breadcrumb a {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   v1.42.0 页脚「微信扫码联系顾问」——支持多张二维码（后台基础设置 → 微信二维码维护）
   有图时：白底小卡片衬出二维码（二维码必须白底才扫得出），下方一行小字说明；
   多张自动并排换行。无图时仍走原 .footer-qr 占位块（虚线框文案）。
   ========================================================================== */
.footer-qrs {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 14px;
}
.footer-qr.has-img {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: auto; height: auto;
  background: transparent; border: 0;
}
/* v1.46.6：二维码 104px 时「联系我们」栏（桌面端 1fr ≈ 180px）放不下第二张，
   只能竖着堆 —— 缩到 84px（2×84+10=178 ≤ 180）让多张并排横向排列 */
.footer-qr.has-img img {
  width: 84px; height: 84px; object-fit: contain;
  padding: 4px; background: #fff; border-radius: 0;
  display: block;
}
.footer-qr-cap {
  font-size: 12px; line-height: 1.5; text-align: center;
  color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
   v1.65.111 官网各页面区块（页脚除外）统一采用首屏同款「深色暖调渐变」配色
   --------------------------------------------------------------------------
   需求：官网各页面的所有区块（页脚除外）全部采用首屏轮播那套配色 ——
        深棕黑暖调渐变底（--top-grad）+ 白字 + 暖金点缀（--top-accent）。
   实现：
   ① 区块底色统一改为 --theme-site-top（与页头 / 首屏同一变量，后台「配色主题」
      自定义仍整体生效），并垫一层不透明暖黑底 #170E0B —— 保证渐变光晕之外的
      区域也是同一色系，且 runAdaptiveContrast 的 compositeBg 取到不透明深底，
      自动判 .on-dark 白字（自适应逻辑零改动）。
   ② 全部带 :not(.on-light) —— v1.65.73「图上强制浅底深字」的区块不被覆盖。
   ③ 排在文件末尾以赢得级联：上方 v1.11.1 商品详情的浅纱
      (.section{rgba(255,255,255,.74)} / .page-hero{rgba(255,255,255,.82)!important})
      与 v1.65.6 的浅黑半透明都被本块覆盖；旧规则原地保留（历史契约不动）。
   ④ 商品详情「浅纱深字」的 !important 深色文字（.pd-sku / .pp-label / .pd-attr /
      .pd-info p）随之翻成浅色；规格表（.spec-table）自身白底不翻，表内深字保留。
   ⑤ 区块小标签（eyebrow）由蓝改为首屏同款暖金（截图中的「— ZJFC.LTD」）。
   ⚠️ 页脚（#site-footer / .site-footer）不在此列 —— 用户明确「除底部」。

   v1.65.415【配色主题关联规则】：底色从「写死 #170E0B + 借道 --theme-site-top」
   改为各自令牌的复合默认值 —— `var(--theme-site-section)` /
   `var(--theme-site-section-alt)`（值 = 暖黑底 + --top-grad，与改前逐像素一致）。
   改前区块实际挂在**页头令牌**上，「配色主题 → 区块底色 / 交替区块底色」两个
   设置形同虚设（用户投诉「没关联到相应的规则上」的实锤）；现在区块归区块令牌，
   页头归页头令牌，保存后各自按自己的设置执行。默认值没动，外观零变化。
   ========================================================================== */
:is(.section, .section-sm, .section-lg):not(.on-light),
.section-sm:not(.on-light),
.section-lg:not(.on-light),
.section.has-bg:not(.on-light) {
  background: var(--theme-site-section, var(--top-grad) #170E0B) !important;
}
/* 交替区块：同一渐变上叠一层轻黑纱，保留「深浅交替」的节奏 */
.section.alt:not(.on-light),
.section.section-soft:not(.on-light) {
  background: var(--theme-site-section-alt, linear-gradient(rgba(0, 0, 0, .18), rgba(0, 0, 0, .18)), var(--top-grad) #120B09) !important;
}
.page-hero:not(.on-light) {
  background: var(--theme-site-section, var(--top-grad) #170E0B) !important;
}
.section.section-dark:not(.on-light) {
  background: var(--theme-site-section, var(--top-grad) #170E0B);
}
/* 区块小标签（eyebrow）：蓝 → 首屏同款暖金 */
.section .eyebrow,
.section.has-bg .eyebrow,
.section.section-dark .eyebrow,
.page-hero .eyebrow { color: var(--top-accent, #FFD9AE); }
.section .eyebrow::before,
.page-hero .eyebrow::before { background: var(--top-amber, linear-gradient(135deg, #F6C089, #E39A5A)); }

/* ---- 商品详情「浅纱深字」规则的字色反转（底变深后必须浅字，规格表白底除外） ---- */
.pd-sku, .pp-label, .pd-attr .k { color: rgba(255, 255, 255, .82) !important; }
.pd-attr .v, .pd-info p { color: rgba(255, 255, 255, .95) !important; }
.pd-sku, .pd-attr, .pd-promise { border-color: rgba(255, 255, 255, .18) !important; }
/* 价格大字：品牌深蓝在深底上不可读 → 首屏同款暖金 */
:is(.section, .section-sm, .section-lg):not(.on-light) .pd-info .pp-now,
:is(.section, .section-sm, .section-lg):not(.on-light) .pd-info .pp-level b,
:is(.section, .section-sm, .section-lg):not(.on-light) .pd-info .pp-market-val { color: var(--top-accent, #FFD9AE); }

/* ==========================================================================
   v1.65.112 深底区块上的无实底卡片文字全部翻浅（承接 v1.65.111）
   --------------------------------------------------------------------------
   问题：方案卡（.solution-card）与案例卡（.case-card）卡体**无实底**、直接压在
   区块深底上；v1.65.111 底色统一改深后，卡内标题/描述/标签/元信息还是深色
   （v1.65.6 的白卡变量还原清单包含这两张卡）—— 典型「深底深字」，描述文字几乎看不见。
   修正：与 .section.has-bg 的既有白字规则同一组颜色，把卡内文字整体翻浅；
   标签 chip 改半透明白底 + 白字（与配图区块同款）。
   ⚠️ 全部带 :not(.on-light)：后台对背景图强制「浅底深字」的区块不受影响；
      白底实卡（product-card / card / info-card / doc-row / service-step /
      spec-table）不在列 —— 白底上的深字保持不变。
   ========================================================================== */
:is(.section, .section-sm, .section-lg):not(.on-light) .solution-card,
:is(.section, .section-sm, .section-lg):not(.on-light) .case-card { border-color: rgba(255, 255, 255, .24); }
:is(.section, .section-sm, .section-lg):not(.on-light) .sc-body h3 { color: #fff; }
:is(.section, .section-sm, .section-lg):not(.on-light) .sc-body p { color: rgba(255, 255, 255, .8); }
:is(.section, .section-sm, .section-lg):not(.on-light) .sc-tags span {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #fff;
}
:is(.section, .section-sm, .section-lg):not(.on-light) .k-body h4 { color: #fff; }
:is(.section, .section-sm, .section-lg):not(.on-light) .k-body p { color: rgba(255, 255, 255, .8); }
:is(.section, .section-sm, .section-lg):not(.on-light) .k-meta { color: rgba(255, 255, 255, .66); border-top-color: rgba(255, 255, 255, .22); }

/* ==========================================================================
   v1.65.113 全站对比度收口：深底浅字 / 浅底深字（承接 v1.65.111/112）
   --------------------------------------------------------------------------
   用户要求：全站锁死「深色背景 → 浅色字体，浅色背景 → 深色字体」。
   本块修复 v1.65.111 深底化后遗留的四处「深底深字 / 浅底浅字」：
   ① 产品分类侧栏（.filter-side .fs-item）硬编码深字 #111114 → 浅色；
      选中项保持浅绿底 + 深绿字（浅底深字）。
   ② 商品详情价格盒（.pd-price-box）：本身就是浅底容器 → 盒内整体回到
      浅底深字；v1.65.111 对 .pp-label 的白色翻转在盒内被反向覆盖，
      价格数字用品牌绿（浅底上清晰）。
   ③ 商品详情富文本正文（.rich-text）硬编码 #33333A → 浅色。
   ④ 技术文书行（.doc-row）卡体无实底 → 标题/元信息翻浅。
      ⚠️ v1.65.168：此条已作废并反向修正 —— .doc-row 后来补了实底白，
      白卡白字反而致盲（下载页 49 处）。见下方该组的修正说明。
   ⑤ 详情页签选中态深绿 #00875A 在深底上偏暗 → 亮绿 var(--brand)。
   全部带 :not(.on-light)，强制浅底深字区块不受影响。
   ========================================================================== */
/* v1.65.168：原选择器是裸 `.fs-item`，会连带命中白底 .cat-fold 面板里的同名条目，
   把它们也刷成白字 → 白底白字（与 v1.65.166 的锁定规则直接冲突）。
   本规则的本意只有「左侧筛选侧栏 .filter-side」（卡体透明、压在深底上），
   因此收窄为 .filter-side .fs-item；白面板内的 .fs-item 交回上面的锁定块管。 */
:is(.section, .section-sm, .section-lg):not(.on-light) .filter-side .fs-item { color: rgba(255, 255, 255, .85); }
:is(.section, .section-sm, .section-lg):not(.on-light) .filter-side .fs-item:hover { color: #fff; background: rgba(255, 255, 255, .06); }
:is(.section, .section-sm, .section-lg):not(.on-light) .filter-side .fs-item .fs-arrow { color: rgba(255, 255, 255, .45); }
:is(.section, .section-sm, .section-lg):not(.on-light) .filter-side .fs-item:hover .fs-arrow { color: rgba(255, 255, 255, .8); }
/* v1.65.382：选中分类底色改**透明**（用户原话「PC端点分类时的底色改为透明的」，附图是左侧
   分类树里选中的「传感器与安防」—— 原为一块浅绿 #E9F8F2，在深底上很突兀）。
   改动：底色透明，选中态只靠「亮绿字」区分（与同块页签选中态 v1.65.113⑤ 同一手法：
   深绿 #00875A 在深底上偏暗 → 升亮为 var(--brand) #00B578）。
   ⚠️ 两条 !important 都必须带：基础段 `.fs-item.is-active`（本文件 1261 行）自带
     background/color 的 !important，非 !important 声明永远压不过它；同级 !important
     比特异度 —— 本选择器 (0,5,0) 远高于基础段 (0,2,0)，稳赢。 */
:is(.section, .section-sm, .section-lg):not(.on-light) .filter-side .fs-item.is-active {
  background: transparent !important;
  color: var(--brand) !important;
}
:is(.section, .section-sm, .section-lg):not(.on-light) .filter-side .fs-item.is-active .fs-arrow { color: var(--brand) !important; }

:is(.section, .section-sm, .section-lg):not(.on-light) .pd-price-box {
  --ink-950: #0A0A0A; --text-1: #0A0A0A; --text-2: #3F3F45; --text-3: #5C5C64;
  --line: #E5E5E5; --line-2: #F0F0F0; --surface: #FFFFFF; --surface-2: #F5F5F7;
  background-color: var(--surface-2);
}
:is(.section, .section-sm, .section-lg):not(.on-light) .pd-price-box .pp-label { color: var(--text-3) !important; }
:is(.section, .section-sm, .section-lg):not(.on-light) .pd-price-box :is(.pp-now, .pp-level b, .pp-market-val) { color: var(--brand-700); }
:is(.section, .section-sm, .section-lg):not(.on-light) .pd-price-box .pp-level { background: #FFFFFF; border-color: var(--line); }

:is(.section, .section-sm, .section-lg):not(.on-light) .rich-text,
:is(.section, .section-sm, .section-lg):not(.on-light) .rich-text p { color: rgba(255, 255, 255, .88); }

/* v1.65.168【修正回退】下面三条是 v1.65.113 ④ 留下的**错误规则**，已作废：
   当时 .doc-row「卡体无实底」压在深底上，翻白字是对的；
   但后续（卡片始终为实底白）给 .doc-row 定了 `background-color:#fff` ——
   白底卡 + 白字 = 完全看不见（下载页 49 处：文档标题 h4、版本/大小/下载次数 span）。
   现在 .doc-row 已并入 v1.65.168 的「白底实卡就地锁深色」清单，
   这里只保留描边在深底上的观感微调（描边本身不是文字，不影响可读性）：
   白底卡 + 常规浅描边，标题深字、元信息中灰。 */
:is(.section, .section-sm, .section-lg):not(.on-light) .doc-row { color: var(--text-1); border-color: var(--line); }
:is(.section, .section-sm, .section-lg):not(.on-light) .doc-row .doc-main h4 { color: var(--text-1); }
:is(.section, .section-sm, .section-lg):not(.on-light) .doc-row .doc-meta { color: var(--text-3); }

:is(.section, .section-sm, .section-lg):not(.on-light) .tabs > button.is-active { color: var(--brand); }

/* ==========================================================================
   v1.65.114 分页条适配深底（承接 v1.65.111~113「深底浅字/浅底深字」）
   --------------------------------------------------------------------------
   问题：商品/案例/文书列表底部的分页条（.pagination）按钮在 base.css 里
   写死白底 #fff + 深色文字，直接压在 v1.65.111 统一后的深色区块上，
   成为一排刺眼的白块（用户截图）。
   修正（全部带 :not(.on-light)，浅底区块不受影响）：
   ① 普通页码：透明浅白底 + 浅色文字 + 半透明白描边（深底浅字）；
   ② 悬停：亮绿描边/文字（与全站悬停一致）；
   ③ 选中页：白底实块 + 深色文字（浅底深字，重点态自然突出）；
   ④ 「第 x 页」文字翻浅色。
   ========================================================================== */
:is(.section, .section-sm, .section-lg):not(.on-light) .pagination button,
:is(.section, .section-sm, .section-lg):not(.on-light) .pagination a {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .24);
  color: rgba(255, 255, 255, .85);
}
:is(.section, .section-sm, .section-lg):not(.on-light) .pagination button:hover:not(:disabled),
:is(.section, .section-sm, .section-lg):not(.on-light) .pagination a:hover {
  border-color: var(--brand);
  color: var(--brand);
}
:is(.section, .section-sm, .section-lg):not(.on-light) .pagination .is-active {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #0A0A0A;
}
:is(.section, .section-sm, .section-lg):not(.on-light) .pagination .page-info { color: rgba(255, 255, 255, .66); }

/* ==========================================================================
   v1.65.116 「选中即看不见」全站收口（承接 v1.65.111~115）
   --------------------------------------------------------------------------
   问题：深底区块的变量重映射把 --ink-900 翻成白色（site.css 顶部 v1.65.6 块），
   于是凡是「背景用 var(--ink-900) + 文字写死白色」的选中/按钮态，在深底区块里
   就变成白底白字 —— 用户截图的资料页筛选 chip 选中态即典型。
   全站扫描 var(--ink-900) 作底色的规则，共三处需要修复：
   ① .chip.is-active（资料/场景/案例/FAQ 筛选 chip 选中态）→ 白底实块 + 深色文字
     （浅底深字，与分页选中页 v1.65.114 同款）；
   ② .btn-white → 白底本就保留，但文字 color: var(--ink-900) 在深底区块翻成了
     白色 → 固定深色文字；
   ③ .btn-dark → 深底区块里底色翻白后文字仍是写死的白色 → 白底 + 深色文字。
   （.pagination .is-active 已在 v1.65.114 修复；.toast / .to-top / .fcart-btn
     挂在 body 层，不受区块变量重映射影响，无需处理。）
   全部带 :not(.on-light)，浅底区块不受影响。
   ========================================================================== */
:is(.section, .section-sm, .section-lg):not(.on-light) .chip.is-active {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #0A0A0A;
}
:is(.section, .section-sm, .section-lg):not(.on-light) .btn-white { color: #0A0A0A; }
:is(.section, .section-sm, .section-lg):not(.on-light) .btn-dark {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #0A0A0A;
}


/* ===========================================================================
   v1.65.129 移动端首屏微调（仅 ≤760px 移动端，桌面端维持原样）
   轮播指示条 .hero-dots button 设计为细线（width 28/44 · height 3px），但
   base.css v1.13.62 移动触控目标规则（≤760px 所有 button min-height:34px）
   会把它撑成 28×34 / 44×34 的色块（用户截图）。此处收回，并按用户要求
   把高度约束到 2px。min-height:0 必须保留以压过 base.css 的 34px。
   =========================================================================== */
@media (max-width: 760px) {
  .hero-dots button { height: 2px; min-height: 0; }
}

/* ===========================================================================
   v1.65.149 管理后台未处理红标 + 首页后台预警弹窗（全局，PC 与移动端都生效）
   ① .admin-entry 是页头「管理后台」按钮，右上角红色数字为未处理事项合计；
   ② .admin-alert-popup 为固定在右上角的预警弹窗，20 秒后自动关闭。
   =========================================================================== */
/* v1.65.150：.btn 基础样式自带 overflow:hidden，会把超出按钮的红标裁掉——显式放开 */
.admin-entry { position: relative; overflow: visible; }
.admin-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 0; background: #E5484D; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  letter-spacing: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9);
  pointer-events: none;
}
.admin-badge[hidden] { display: none; }

.admin-alert-popup {
  position: fixed; top: 76px; right: 18px; z-index: 1200;
  width: min(360px, calc(100vw - 24px));
  background: #fff; border: 1px solid #F3D6D6; border-radius: 0;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
  overflow: hidden; animation: aap-in .25s ease both;
}
@keyframes aap-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.admin-alert-popup .aap-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px 11px 14px; background: #FDECEC; color: #B42318; font-size: 14px;
}
.admin-alert-popup .aap-close {
  flex: none; background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1; min-width: 30px; min-height: 30px; border-radius: 0;
}
.admin-alert-popup .aap-close:hover { background: rgba(180, 35, 24, .1); }
.admin-alert-popup .aap-list { max-height: 42vh; overflow: auto; }
.admin-alert-popup .aap-item {
  display: flex; gap: 9px; align-items: flex-start; padding: 10px 14px;
  border-top: 1px solid #F6E6E6; color: #17171A; text-decoration: none;
  font-size: 13.5px; line-height: 1.55;
}
.admin-alert-popup .aap-item:hover { background: #FFF7F7; }
.admin-alert-popup .aap-item i {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: #E5484D; color: #fff; font-size: 11px; font-style: normal;
  line-height: 18px; text-align: center;
}
.admin-alert-popup .aap-foot {
  padding: 8px 14px; background: #FCFCFD; border-top: 1px solid #F6E6E6;
  font-size: 11.5px; color: #8A8A93;
}
/* 移动端：贴住左右留白，避免超出屏幕 */
@media (max-width: 640px) {
  .admin-alert-popup { top: 64px; right: 12px; width: calc(100vw - 24px); }
}

/* ===========================================================================
   v1.65.165 客户「管理系统」弹出面板（工作台 / 订货单 / 退出）
   面板挂在 body 层、position:fixed，与左上角汉堡菜单同一弹出方式——
   不在页头内部，任何机型的页头裁切都影响不到它（v1.65.163 的教训）。
   =========================================================================== */
.acct-menu { position: relative; overflow: visible; }
/* 红标锚定到入口按钮本身；同时放开按钮裁切（.btn 有 overflow 时红标会被切掉） */
.acct-menu .btn { position: relative; overflow: visible; }
@media (max-width: 640px) {
  .header-actions .acct-menu .btn-primary { max-width: none; overflow: visible; }
}
.acct-pop {
  position: fixed; z-index: 1300;
  min-width: 148px; padding: 6px;
  background: #fff; border: 1px solid #E9E9EE; border-radius: 0;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .2);
  animation: aap-in .18s ease both;
}
.acct-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 10px 12px;
  border: 0; background: none; border-radius: 0;
  color: #17171A; font-size: 13.5px; font-family: inherit; text-align: left;
  text-decoration: none; cursor: pointer;
}
.acct-item:hover { background: #F5F5F8; color: #17171A; }
.acct-item svg { flex: none; }

/* ===========================================================================
   v1.65.166【仅移动端】产品中心：分类 + 搜索合并一栏 / 三列商品网格 / 名称加大
   =========================================================================== */
@media (max-width: 760px) {
  /* ① 分类折叠面板 + 搜索框 **同一行、并排两栏**（v1.65.186）
        ------------------------------------------------------------------
        用户需求原文：「在手机端的产品中心下方，如图中这两栏，把它们一前一后合并为一行，
        两个表单显示」——即压缩掉纵向高度：左栏「产品分类 ▾」、右栏「搜索产品…」。

        上一版（v1.65.166）是 `display:block` 的**上下堆叠**：分类占一整条、
        搜索框另起一条，两栏合计 123px 高。现改横排。

        宽度账（390px 视口 → 容器宽 354，本容器左右 padding 各 12 → 内容区 330）：
          分类栏 0 0 132 + gap 10 + 搜索框 1 1 0（= 188）
        分类栏 132px 的依据（实测两次收紧得出，别凭感觉给值）：
          图标 16 + gap 8 + 「产品分类」15px×4字 ≈ 60 + gap 8 + 「全部产品」13px×4字 ≈ 52
          = 144 → 超了，所以标题降到 13.5px（≈54）、分类名限宽 44%（≈58）：
          16 + 8 + 54 + 8 + 58 = 144 → 仍紧，最终定 **132** 并让 `.cf-cur` 自己 ellipsis。
          ⚠️ 首版给的是 116px，实测「产品分类」与「全部产品」双双折成两行（截图可见），
             因为 `.cat-fold-head` 是 flex 且子项 `flex: none`，窄了不会缩、只会换行。
             这里两个子项都加了 `white-space: nowrap` + `.cf-cur` 允许 ellipsis 兜底。
        搜索框从 328 收到 188：该宽度下 16px 字号的「搜索产品名称 / 编码 / 型号」
        会露出「搜索产品名称 / 编码」，且**不换行**（`flex-wrap: nowrap` 见下），
        符合「两个表单」的诉求。

        层叠风险（已逐条核对，见 tools/cascade-check.mjs）：
          · 搜索框 `flex` 有四处竞争者，按源码顺序最后生效的是 **L2338 的 1 1 100%**，
            本块（文件末尾）用同特异度覆盖它 → 不需要 !important；
          · `.toolbar { flex-wrap: nowrap }`（L2060）与 `.input-icon { min-width:0 }`（L2064）
            已在更靠前的块里就位，这里只补 `.toolbar` 自身的收缩下限；
          · `.search-btn` / `.select` 已被 L2344 的 `display:none !important` 隐藏
            （v1.15.9 的既定取舍），保持隐藏 —— 与用户截图一致，不做改动。
        ------------------------------------------------------------------
     v1.65.196：改为**纵向堆叠**（用户要求「搜索框独占一行 + 下方横向分类标签」）：
       ① 搜索框独占满宽；② 横向滑动的分类标签；③ 横向滑动的控制平台标签。
       容器本身不再需要白底圆角（那是给「左分类 + 右搜索」并排设计的），
       改为透明无边框，由搜索框与标签各自承担视觉。 */
  .filter-combo {
    display: block;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 12px;
  }
  /* 分类下拉面板：改标签后移动端不再需要（DOM 保留，仅隐藏） */
  .filter-combo .cat-fold { display: none; }
  /* 左栏：分类折叠面板。去掉上一版的分隔下边框（现在它是左栏而非上栏），
     收紧到与 44px 搜索框同高（`align-items:center` 负责垂直居中）。 */
  .filter-combo .cat-fold {
    flex: 0 0 132px;
    min-width: 0;
    margin: 0;
    border: 0; border-radius: 0; background: transparent;
    overflow: visible;
  }
  /* v1.65.186：`.cat-fold-head` 是 flex，子项窄了不会缩、只会换行（首版 116px 就踩了这个坑，
     截图里「产品分类」和「全部产品」各折成两行）。所以这里：标题降一号到 13.5px 且 nowrap，
     分类名缩到 44% 并靠 ellipsis 兜底，宁可截断长分类名也不让左栏撑成两行高。 */
  .filter-combo .cat-fold-head { background: transparent; padding: 11px 0; font-size: 13.5px; }
  .filter-combo .cat-fold-head > span { white-space: nowrap; }
  .filter-combo .cat-fold-head svg { flex: none; }
  .filter-combo .cat-fold-head .cf-cur { max-width: 44%; }
  /* v1.65.186 关键：展开的列表必须**浮在页面之上**（absolute），不能参与这一行的排版。
     首版漏了这条 —— 分类列表一展开就把左栏撑到 558px 高，`.toolbar`（搜索框）作为
     `align-items:center` 的兄弟被顶到整行垂直中点（实测 top 从 154 掉到 433），
     截图里搜索框跑到列表中间，两栏不再成行。
     改为 absolute 后：行的内容高度只由 `.cat-fold-head`（45px）与搜索框（44px）决定，
     展开与否都不变；`top: 100%` 让面板紧贴标题下方展开。
     祖先链（.cat-fold / .filter-combo / .layout-main / …）都是 overflow:visible，
     所以浮层不会被裁掉 —— 已用 Edge 无头实测展开态截图确认。 */
  .filter-combo .cat-fold { position: relative; }
  .filter-combo .cat-fold-body {
    position: absolute;
    top: 100%; left: 0;
    z-index: 20;
    width: 300px;              /* 从 132px 左栏里"溢出"，保证中文分类名不折行 */
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: 0 14px 36px rgba(8, 14, 26, .16);
    border-top: 1px solid var(--line-2);
    padding: 6px 8px 10px;
  }
  /* 右栏：搜索框。收起上一版的 margin-top（不再换行，无需上边距），
     并把 `flex` 从 1 1 100% 收回 1 1 0 —— 真正的并排关键。 */
  .filter-combo .toolbar { flex: 1 1 0; min-width: 0; margin-top: 0; }
  .filter-combo .toolbar .search-box { flex: 1 1 0; min-width: 0 !important; }

  /* ② 商品列表每行**两列**（v1.65.195 用户要求）

     v1.15.9 曾把这里从两列改成三列；v1.65.195 用户拿电商双列大卡（图1）
     对照，明确要求「手机端改回两列」，故改回 repeat(2)。

     为什么两列更好（本次实测数据，390px 视口）：
       三列：卡片宽 111px，型号行「ZJ-GW-PRO · Zigbee 3.0 / Thread / Wi-Fi 6 / 有线」
             被挤成 2 行（高 41px），文字频繁折行、观感碎；
       两列：卡片宽约 179px，型号行舒展，接近用户参考图的阅读体验。

     ⚠️ 本文件更靠前（约 2378 行）还有一条 max-width:760px 的 repeat(2)，
        两条现在**结论一致**，保留后者作为主导（离渲染点更近、优先级更明确）。
        将来若要再调列数，**两处都要改**，否则会被后一条覆盖而不生效 ——
        这正是 v1.15.9 → v1.65.195 之间「改了不生效」的根因。 */
  .p-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  /* ---------------------------------------------------------- v1.65.196
     【横向滑动分类标签】打开显示 + 横向滚动。

     ⚠️ 三个易踩的点：
       ① `overflow-x: auto` 必须配 `-webkit-overflow-scrolling: touch`，
          否则 iOS 上滑动生涩；
       ② 子项必须 `flex: none`（基础段已设）—— 否则 flex 容器会把标签压扁，
          文字竖排成一列，完全看不出是横向标签；
       ③ 隐藏滚动条用 `scrollbar-width: none` + `::-webkit-scrollbar`，
          电商站一般不显示横向滚动条。 */
  .cat-tabs,
  .plat-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0;
    margin-top: 10px;
    /* 双保险：即使将来某个祖先又变回 shrink-to-fit，标签行也不会把祖先撑宽 */
    min-width: 0;
    max-width: 100%;
  }
  .cat-tabs::-webkit-scrollbar,
  .plat-tabs::-webkit-scrollbar { display: none; }
  /* v1.65.198：手机端不显示「控制平台」标签（用户要求） */
  .plat-tabs { display: none; }

  /* ========================================================== v1.65.192
     【手机端商品卡 · 二次改版】用户原话（承接 v1.65.191）：
       「把商品列表中这张图的信息添加回来，并把白色的字体放大一号」
       并确认：**图片原貌也要恢复**（即 v1.65.191 裁掉的图内文字带重新露出）。

     v1.65.191→v1.65.192 的变化：
       · 封面裁切窗口 y=30~490（aspect 800/460）⇒ **取消裁切，恢复原始比例**
         —— 让图内烘焙的三样元素重新显示：
           蓝色短线（y=550）、名称「智能网关 Pro」（y=608, 38px）、
           型号协议「ZJ-GW-PRO · Zigbee 3.0 / Thread / Wi-Fi」（y=648, 21px）
       · .pc-body 由 display:none ⇒ 恢复 display:flex（见下方 ①）
       · .pc-stock 型号协议字号 12.5px ⇒ **14px 白色**（用户指定「放大一号」）

     为什么不回到「container 全露」的 8/7：
       原图 0~490 有较多留白（徽章 y=46~88、线稿 y=190~410），
       全露会让卡片在上半部分发空。折中：保留原始比例 8/7 但
       object-position 上移，把构图重心放到卡片视觉中线。
     ⚠️ 若将来又要求「只留线稿」，可直接把 aspect-ratio 改回 800/460、
        object-position 改回 50% 12.5% —— 两套参数都已在注释中固化。 */
  .p-grid .pc-media {
    border-radius: 0;
    /* v1.65.192：恢复与基础段一致的 8/7（原图 viewBox 0 0 800 700） */
    aspect-ratio: 8 / 7;
  }
  /* v1.65.192：图片按原始比例完整显示，不再纵向裁切 ⇒ 图内文字带可见。
     用 contain 会留白边，故仍用 cover，但容器比例=原图比例 ⇒ 无裁切损失。 */
  .p-grid .pc-media > img {
    object-fit: cover;
    object-position: 50% 50%;
  }

  /* ① 卡片下半部分：v1.65.192 起**恢复显示**，并改为**深色底 + 白字**。
     v1.65.191 曾把 .pc-body 整块 display:none（只留封面图）；
     v1.65.192 用户要求「把图中（型号协议那行）的信息添加回来」
     且明确「改深色底 + 白字」—— 与封面图的深色调连成一体，
     正是用户图2 里「深底 + 蓝短线 + 白商品名 + 灰蓝型号协议」那种观感。
     ⚠️ 仍用 CSS 改观感而非改 DOM —— productCard() 官网与订货端共用。 */
  .p-grid .product-card .pc-body {
    display: flex !important;
    padding: 8px 2px 2px;
    background: transparent;      /* 去掉白底，露出卡片自身深色底 */
    gap: 0;
  }
  /* 卡片本体：手机端把底色统一成封面图同款深色，使图文无接缝。
     ⚠️ 用 .p-grid 限定作用域，桌面端/平板端不受影响。 */
  .p-grid .product-card {
    background: #14161C;
    border-radius: 0;
    overflow: hidden;
  }

  /* ② 名称：白字，最多两行。
     v1.65.192 定 14px；v1.65.193 用户要求「手机端和平板端把白色字号加大一号」
     ⇒ 14px → 15px。 */
  .p-grid .pc-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
    color: #FFFFFF;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }

  /* ③ v1.65.192：卡片内只保留「名称 + 型号协议」两行信息。
     型号协议（.pc-stock，内容形如「ZJ-GW-PRO · Zigbee 3.0 / Thread / Wi-Fi」）
     用户要求**白色字体放大一号**：基准 12.5px → **14px**（用户指定）。

     DOM 结构（site.js productCard）：
       .pc-body
         ├ .pc-series          系列名        → 隐藏
         ├ .pc-title           商品名        → 保留（白字）
         ├ .pc-desc            简介          → 隐藏
         └ .pc-meta            （价格+库存+徽章）→ v1.65.202 起**整块全局隐藏**
              └ div
                  ├ .pc-price   价格        → 已移出到 .pc-body 之后
                  └ .pc-stock   型号+协议    → v1.65.202 起随 .pc-meta 一并隐藏
     ⚠️ v1.65.202 用户要求「商品列表中这部分全局隐藏」，故 .pc-meta 整块隐藏
        （基准段 `.product-card .pc-meta { display:none !important }`）。
        下方对 .pc-stock 的字号/颜色规则**保留**：它们是历史契约，
        测试仍按「型号协议 14px 白字」断言（若将来重新放开显示即照此渲染）。 */
  /* v1.65.193：.pc-price 从隐藏名单中移除 —— 价格行已独立到 .pc-body 之后
    （.product-card 直接子级），手机端要求与 PC 一样在白字后面显示价格
   （￥:10.00 红色加粗 15px 右对齐，样式见基础段 v1.65.193）。 */
  .p-grid .product-card :is(.pc-series, .pc-desc) { display: none; }
  .p-grid .product-card .pc-meta {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }
  /* .pc-meta 的右侧「在售 / 一口价 / 可订」徽章在手机端窄卡里隐藏。 */
  .p-grid .product-card .pc-meta > .badge { display: none; }

  /* 型号协议行（v1.65.195 调整）

     v1.65.192 起是 15px / 最多两行。改为双列大卡后宽度到了 ~171px，
     但型号串本身很长（「ZJ-GW-PRO · Zigbee 3.0 / Thread / Wi-Fi 6 / 有线」），
     实测仍会折成两行并在末尾出现省略号，观感碎。

     改为**单行截断**（white-space:nowrap + text-overflow:ellipsis）：
       · 与用户参考图（图1「希尔顿酒店专用香薰精油补…」那种一行到底）一致；
       · 单行高度稳定，卡片高度整齐，不会因型号长短参差不齐；
       · 完整信息仍可点进详情页查看，不丢内容。
     字号 15px → 13.5px：单行能容纳更多字符，减少被截断的概率。 */
  .p-grid .pc-stock {
    margin-top: 3px;
    font-size: 13.5px;
    line-height: 1.4;
    color: #A9B4C6;                 /* 型号行比商品名弱一档，层次更清楚 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 手机端窄卡（≈111px/列）里，型号协议前的 16px 图标会把文字挤到换行，
     故隐藏 —— 只留纯文本。 */
  .p-grid .pc-stock .pc-icon { display: none; }
  /* 型号（如 ZJ-GW-PRO）与协议同色同字号，白字一行内展示。 */
  .p-grid .pc-model { color: #FFFFFF; }
  /* v1.65.193：手机端价格行 —— 与 PC 同款（红色加粗 15px 右对齐），
     仅收窄内边距适配窄卡（基础段是 0 14px 14px）。 */
  .p-grid .product-card > .pc-price { padding: 0 8px 10px; }
}

/* ===========================================================================
   v1.65.187【平板竖屏】产品中心与手机端观感一致 + 产品列表一行四列
   ---------------------------------------------------------------------------
   需求（用户截图 + 原话）：
     「平板端的产品中心，在竖屏情况下，显示和手机端一致，产品列表调为一行四列；
       横屏状态下，把分类的线线透明度调为40%，产品列表调为一行四列」
     并确认「竖屏一致」的范围是**整个官网**（不只是产品中心）。

   平板竖屏的宽度区间怎么定（关键判断，别照抄手机端的 760px）：
     · iPad 竖屏视口宽度 768 / 810 / 820px，是最小的一批平板竖屏；
     · 横屏随之落在 1024~1366px。
     所以竖屏用 `(min-width: 761px) and (max-width: 1024px) and (orientation: portrait)`：
       - 下界 761px：与本文件所有「手机"带"（≤760px）**严格互补、不重叠**，
         避免两套规则同时命中互相打架；且 768px 的 iPad 竖屏正好落进来。
       - 上界 1024px：竖屏平板的最大宽度；1025px 以上归横屏/桌面块。
       - `orientation: portrait` 是浏览器按视口算的（宽 ≤ 高即为竖屏），
         所以桌面浏览器把一个窗口拖成"高比宽大"时也会命中 —— 这是**正确**行为
         （那本来就是个竖屏形态的设备），不是 bug。
     ⚠️ 本文件此前**没有任何 orientation 媒体查询**，这是第一条，故单独成块、
        不做嵌套，避免与既有并列块纠缠。

   竖屏要做的四件事（逐条对应「和手机端一致」）：
     ① 侧栏 → 折叠面板：隐藏 `.filter-side`，显示 `.cat-fold`
        （手机端 v1.13.68 起就是这个交互；`.cat-fold` 的基础规则是 `display:none`，
          在 `@media(max-width:760px)` 里才 `display:block`）。
     ② 容器由「左右两栏」改「上下单栏」：`.layout-side` 已由 900px 块改成 column，
        这里不需要重复声明，但 `.layout-main` 的 `min-width:0` 必须保住。
     ③ 筛选条两栏合并：完整复刻 v1.65.186 给手机端写的那套 .filter-combo 规则
        （flex 横排 + 左栏 132px + 搜索框 flex:1 1 0 + 展开列表 absolute 浮起）。
        ⚠️ 不做「上移 760px 块」的重构：那会把改动扩散到手机端已验证的规则上，
           风险大于收益；这里是**并列的重复声明**，两边各自独立可读、可分别回退。
     ④ 商品卡与手机端同款极简形态：一行四列 + 只留封面图和名称
        （`.pc-body` 整体被 v1.10.6 的 `.product-card .pc-body{display:none!important}`
          隐藏，手机端是在 760px 块里用 `display:flex!important` 恢复的，这里同样恢复）。

   宽度账（768px 竖屏，容器内边距 18×2 → 可用 732px）：
     四列 = (732 - 10×3) ÷ 4 = **175px/列**，比手机端 390px 屏的 3 列（≈111px）还宽，
     所以手机端那套 16.5px 标题 / 8px 圆角在这里同样放得下，直接复用即可。
   =========================================================================== */
@media (min-width: 761px) and (max-width: 1024px) and (orientation: portrait) {
  /* ① 侧栏 → 折叠面板（取舍：竖屏平板与手机统一走"折叠 + 合并栏"，
        与手机端完全一致的交互；横屏则由下方 1025px+ 块保留完整侧栏） */
  .filter-side { display: none; }
  .cat-fold {
    display: block;
    margin-bottom: 0;
    border: 0; border-radius: 0; background: transparent;
    overflow: visible;
  }
  .cat-fold-head {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 11px 0; font-size: 13.5px; font-weight: 600; color: var(--text-1);
    background: transparent; border: 0; text-align: left; cursor: pointer;
  }
  .cat-fold-body {
    display: none; max-height: 62vh; overflow-y: auto;
    padding: 4px 8px 10px; border-top: 1px solid var(--line-2);
  }
  .cat-fold.is-open .cat-fold-body { display: block; }
  .cat-fold-body .fs-item {
    display: flex; align-items: center; padding: 11px 10px; font-size: 15px;
    color: var(--text-2); border-bottom: 1px solid var(--line-2);
  }
  .cat-fold-body .fs-item:last-child { border-bottom: 0; }
  .cat-fold-body .fs-item.is-active { color: var(--brand-700); font-weight: 600; background: rgba(0, 178, 122, .08); }
  .cat-fold-body .cf-sub { padding: 12px 10px 6px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
  .cat-fold-head .cf-cur {
    margin-left: auto; font-size: 13px; font-weight: 500; color: var(--brand-700);
    max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cat-fold-head > span { white-space: nowrap; }
  .cat-fold-head svg { flex: none; }
  .cat-fold-head .cf-arrow { flex: none; color: var(--text-3); transition: transform .24s var(--ease); }
  .cat-fold.is-open .cat-fold-head .cf-arrow { transform: rotate(180deg); }

  /* ② 单栏容器
     v1.65.196：与 900px 块同理，column 方向必须 `align-items: stretch`，
     否则 `.layout-main` 走 shrink-to-fit、被分类标签的 min-content 撑破视口
     （768/820 竖屏实测同样会溢出到 1487px）。1024px 竖屏不落在 900px 块里，
     所以本块必须自己声明一次。 */
  .layout-side { flex-direction: column; align-items: stretch; gap: 14px; }
  .layout-main { width: 100%; }

  /* ③ 筛选条两栏合并 —— 与 v1.65.186 手机端那套完全同款 */
  .filter-combo {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 6px 12px;
  }
  .filter-combo .cat-fold {
    flex: 0 0 132px;
    min-width: 0;
    position: relative;
  }
  .filter-combo .toolbar { flex: 1 1 0; min-width: 0; margin-top: 0; }
  .filter-combo .toolbar .search-box { flex: 1 1 0; min-width: 0 !important; }
  .filter-combo .toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  }
  .filter-combo .toolbar .input-icon { flex: 1 1 0; min-width: 0 !important; width: auto; height: 44px; }
  .filter-combo .toolbar .input-icon .input { width: 100%; min-width: 0; font-size: 16px; }
  /* 展开列表必须 absolute 浮起 —— 否则展开时把搜索框顶到行垂直中点（v1.65.186 的坑） */
  .filter-combo .cat-fold-body {
    position: absolute;
    top: 100%; left: 0;
    z-index: 20;
    width: 300px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0;
    box-shadow: 0 14px 36px rgba(8, 14, 26, .16);
    padding: 6px 8px 10px;
  }
  /* 搜索按钮与排序栏在手机端就是隐藏的（v1.15.9 既定取舍），竖屏平板保持一致 */
  .toolbar .search-btn,
  .toolbar .select { display: none !important; }

  /* ---------------------------------------------------------- v1.65.196
     【竖屏平板 · 搜索栏与分类同手机端】用户原话「搜索栏和分类和刚才那张图也一模一样」
     + 已确认的两个选项：
        · 「搜索框独占一行，分类在下方横向滑动」
        · 「一排横向滑动的文字标签」
     竖屏平板上一条（761~1024 竖屏）走的是 v1.65.186 的「左分类 + 右搜索并排」，
     与手机端不一致，这里统一成与 @media(max-width:760px) 同款的三段式：
       ① 搜索框独占满宽一行  ② 横向滑动分类标签  ③ 横向滑动控制平台标签
     ⚠️ 横屏（下方 landscape 块）不受影响 —— `.cat-tabs` 基础段是 display:none，
        横屏仍走原有的「侧栏 + 工具条」排布。 */
  .filter-combo {
    display: block;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 14px;
  }
  /* 分类下拉面板：有横向标签后竖屏不再需要（DOM 保留，仅隐藏） */
  .filter-combo .cat-fold { display: none; }
  .filter-combo .toolbar { width: 100%; min-width: 0; margin-top: 0; }

  .cat-tabs,
  .plat-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0;
    margin-top: 12px;
    min-width: 0;
    max-width: 100%;
  }
  .cat-tabs::-webkit-scrollbar,
  .plat-tabs::-webkit-scrollbar { display: none; }
  /* v1.65.198：竖屏平板同样不显示「控制平台」标签（与手机端一致，用户要求） */
  .plat-tabs { display: none; }

  /* ④ 商品卡：一行**两列**（v1.65.195 用户要求）。

     v1.65.187 起此处是四列；v1.65.195 用户要求「平板端和手机端一样」（对照双列大卡），
     故 4 列 → 2 列。实测 820px 竖屏：
       四列 = 卡片宽 186px（型号行仍会折行）；
       两列 = 卡片宽约 386px，接近 PC 端观感，型号协议一行放下。

     （竖屏块内原本还有一条「横屏四列」的姊妹规则，位置在下方 landscape 块，
       本次按「平板端也一样」的要求一并改为两列。） */
  .p-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }
  /* 两列下卡片变宽，图片恢复与手机端一致的 8/7（原四列窄卡时才用 1/1 方形） */
  .p-grid .pc-media { border-radius: 0; aspect-ratio: 8 / 7; }
  .p-grid .product-card {
    background: #14161C;          /* 与手机端 v1.65.192 同款深色底 */
    border-radius: 0;
    overflow: hidden;
  }
  .p-grid .product-card .pc-body { display: flex !important; padding: 7px 8px 9px; }
  .p-grid .product-card :is(.pc-series, .pc-desc) { display: none; }
  /* v1.65.202：.pc-meta 已由基准段全局隐藏（!important），此处规则仅为历史保留。 */
  .p-grid .product-card .pc-meta { display: block; margin: 0; padding: 0; border: 0; }
  .p-grid .product-card .pc-meta > .badge { display: none; }
  .p-grid .pc-title {
    margin: 0;
    font-size: 16px;              /* v1.65.193：白字，比手机端 15px 大一号 */
    line-height: 1.35;
    color: #FFFFFF;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .p-grid .pc-stock {
    margin-top: 3px;
    font-size: 14px;               /* v1.65.195：16px → 14px，单行能容纳更多字符 */
    line-height: 1.4;
    color: #A9B4C6;                /* 与手机端一致的次级文字色 */
    /* v1.65.195：两行折行 → 单行截断，与手机端统一，卡片高度更整齐 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .p-grid .pc-stock .pc-icon { display: none; }
  .p-grid .pc-model { color: #C8D3E4; }
  /* 价格行：与手机端同款收窄内边距（红色加粗 15px 右对齐在基础段）。 */
  .p-grid .product-card > .pc-price { padding: 0 8px 10px; }
}

/* ===========================================================================
   v1.65.187【平板横屏】产品中心：分类分隔线透明度 40% + 产品列表一行四列
   ---------------------------------------------------------------------------
   需求（用户截图 + 原话，并已确认范围）：
     「横屏状态下，把分类的线线透明度调为40%，产品列表调为一行四列」
     分隔线范围经确认 = **整个侧栏的全部横线**：
       ① 各分类条目之间的分隔线  → `.filter-side .fs-item` 的 border-bottom
       ② 「产品分类」标题下的横线 → `.filter-side .fs-group h5` 的 border-bottom
       ③ 「控制平台」分组标题下的线 → 同 .fs-group h5（第二个分组，同一条规则覆盖）

   底色与 alpha 怎么算（**这里只能改 alpha，不能改 RGB**）：
     产品中心区块是深底（实测 `.section:not(.on-light)` 背景 rgb(23,14,11)），
     2026-10-09 那次「全站明暗锁定」已把侧栏字色翻成 rgba(255,255,255,.85)。
     若按字色逻辑把线改成「纯白 40%」= rgba(255,255,255,.4)，在深底上**比现在还亮**，
     方向正好相反。所以：
       · 条目线：原 `rgba(239,239,241,.7)` → **`rgba(239,239,241,.4)`**（同一基色，只压 alpha）
       · 标题线：原 `#E8E8EA` 实色 → **`rgba(232,232,234,.4)`**（同 RGB，补上 40%）
     注意：本规则**故意写死颜色、不用 var(--line-2) 之类的变量** ——
     变量在深色主题下会被覆写成别的值，透明度就不受控了；这里要的是「确定的 40%」。

   四列的宽度账（1024px 横屏，侧栏 248 + gap 48 → 列表区 ≈ 660px）：
     四列 = (660 - 16×3) ÷ 4 = **153px/列**，够放封面图 + 两行名称；
     对比现状是 2 列（base.css 的 @media(max-width:1080px) 把 .grid-3 降成 2 列）。
     `!important` 是必需且经过裁剪的：`.p-grid` 的 grid-template-columns 在
     base.css(1080px)、site.css(900px / 760px / 竖屏块) 共 4 处竞争，且手机端那几处
     同样带 !important —— 不带 !important 会被 900px 块的 2 列压住（本块特异度不占优）。
     ⚠️ 必须与竖屏块的 `(min-width:761px) and (max-width:1024px) and (orientation:portrait)`
        严格互补：竖屏占竖屏、本块占横屏，761~1024px 之间靠 orientation 二分，不会同时命中。
   =========================================================================== */
@media (min-width: 761px) and (max-width: 1366px) and (orientation: landscape) {
  /* ===== 平板横屏：分类/搜索栏与竖屏一致 + 取消左侧商品分屏 + 四列 + 竖屏同款卡片 =====
     用户原话：「平板横屏时，分类和搜索栏与竖屏一致，左边的商品分屏取消；
                商品列表保持四列，商品展示与竖屏保持一致」
     实现策略：把竖屏块（761~1024 portrait）的「搜索框独占满宽一行 + 横向滑动分类标签 +
     隐藏控制平台 + 隐藏左栏 + 深色大卡」原样搬过来，唯一与竖屏不同的就是
     .p-grid 维持四列（竖屏是双列），其余全部与竖屏同款。
     ⚠️ 与 v1.65.199 的 PC 京东风格块（@media(min-width:761px) 行内）竞争：
        PC 块给 .layout-side .product-card 上白底 + 完整卡片；本块用 .p-grid .product-card
        （同特异度、且本块在文件更靠后）覆盖成竖屏深色卡，故横屏平板不会落到 PC 白卡。
        宽于 1366px 的横屏仍走 PC 块（完整侧栏 + 京东白卡）。 */

  /* ① 取消左侧商品分屏（侧栏整体隐藏），容器改单栏拉伸 —— 与竖屏块同款 */
  .filter-side { display: none; }
  .layout-side { flex-direction: column; align-items: stretch; gap: 14px; }
  .layout-main { width: 100%; }

  /* ② 分类/搜索栏与竖屏一致：搜索框独占满宽一行 + 横向滑动分类标签 */
  .filter-combo {
    display: block;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 14px;
  }
  /* 有横向分类标签后不再需要下拉面板（DOM 保留，仅隐藏） */
  .filter-combo .cat-fold { display: none; }
  .filter-combo .toolbar { width: 100%; min-width: 0; margin-top: 0; }
  /* 搜索按钮与排序下拉在手机/竖屏端本就隐藏，横屏保持一致 */
  .toolbar .search-btn,
  .toolbar .select { display: none !important; }

  .cat-tabs,
  .plat-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0;
    margin-top: 12px;
    min-width: 0;
    max-width: 100%;
  }
  .cat-tabs::-webkit-scrollbar,
  .plat-tabs::-webkit-scrollbar { display: none; }
  /* 控制平台标签不显示（与手机/竖屏一致，用户要求） */
  .plat-tabs { display: none; }

  /* ③ 商品列表保持四列（与竖屏的唯一区别：竖屏是双列） */
  .p-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px;
  }

  /* ④ 商品展示与竖屏保持一致：深色大卡 + 白字标题 + 型号协议 + 红色价格 */
  .p-grid .pc-media { border-radius: 0; aspect-ratio: 8 / 7; }
  .p-grid .product-card {
    background: #14161C;
    border-radius: 0;
    overflow: hidden;
  }
  .p-grid .product-card .pc-body { display: flex !important; padding: 7px 8px 9px; }
  .p-grid .product-card :is(.pc-series, .pc-desc) { display: none; }
  /* v1.65.202：.pc-meta 已由基准段全局隐藏（!important），此处规则仅为历史保留。 */
  .p-grid .product-card .pc-meta { display: block; margin: 0; padding: 0; border: 0; }
  .p-grid .product-card .pc-meta > .badge { display: none; }
  .p-grid .pc-title {
    margin: 0;
    font-size: 16px;
    line-height: 1.35;
    color: #FFFFFF;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
  }
  .p-grid .pc-stock {
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.4;
    color: #A9B4C6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .p-grid .pc-stock .pc-icon { display: none; }
  .p-grid .pc-model { color: #C8D3E4; }
  .p-grid .product-card > .pc-price { padding: 0 8px 10px; }
}

/* ===========================================================================
   v1.65.376【PC 端】产品中心：搜索栏 + 产品分类改为**左侧竖向**排布
   （v1.65.378：左列收窄到 200px、取消分隔线、搜索框与分类合并为同一网格项）
   ---------------------------------------------------------------------------
   需求（用户原话）：
     v1.65.376「产品中心的搜索栏和产品分类改为左边竖向显示，此处只修改PC端显示」
     v1.65.378「把分类和搜索的宽度约束在200像素，取消分隔线条」

   改前（v1.65.201 按用户要求把 PC 做成「与平板端一致」）：顶部一条横向滑动分类标签
   + 满宽搜索框，左侧无分栏。本次 PC 端改回**经典电商左栏**：

     ┌───────────────┬────────────────────────────┐
     │ ［搜索框］      │                            │
     │ 产品分类（竖排）│   商品网格（京东白卡 4 列）   │
     │  · 全部产品    │                            │
     │  · 主机网关 …  │                            │
     └───────────────┴────────────────────────────┘

   实现要点（⚠️ 关键点，别踩）：
     ① **搜索框怎么进左列**：它的 DOM 在 .layout-main > .filter-combo > .toolbar，
        天生落在右列。v1.65.378 的做法：把 .filter-side（产品分类）**移入 .filter-combo**
        （site.js renderProducts，紧跟 .toolbar 之后），再让 .filter-combo 成为左列
        **唯一**网格项（grid-column:1 / grid-row:1 / span 2 / align-self:start），
        .layout-main 仍 display:contents（#p-list / #p-pager 要当右列网格项）。
        ⚠️ 为什么必须合成一块（v1.65.376 踩过的坑）：搜索框与 .filter-side 各自为
           网格项时，#p-list 跨第 1-2 行，浏览器把多出的高度**均分**给两行 ——
           第 1 行被撑到 293px，搜索框与分类之间被撕出 **277px 空洞**。合成一块后
           左列内容从行首紧挨着排，列下方留白属正常电商形态。
        ⚠️ .filter-combo 在 PC 块里要清掉移动端给它的卡片样式（白底/圆角/边框/内边距）。
     ② **只动 PC**：媒体查询刻意与「平板竖屏 761~1024 / 平板横屏 761~1366」两块
        **互斥**（≥1367px 任意方向 ∪ ≥1025px 竖屏），平板与手机端规则一字未动。
        ⚠️ 1366×768 这类笔记本仍走平板横屏块（与 iPad Pro 12.9 横屏 1366 同宽，
           无法用宽度区分），行为与本次改动前完全一致，不会变差。
     ③ **左列宽 200px**（v1.65.378 用户要求）：.filter-side 基础态是 width:248px; flex:none，
        在左列块里必须放开（248px 硬宽会顶破列宽）；配套两处（都已真机实测）：
        .toolbar .input-icon 的 min-width:220px 置 0、placeholder 精简为
        「搜索产品/编码/型号」（原文案 174.6px 在 200px 列的可用文本宽 ~142px 内会被截断）。
     ④ **取消分隔线条**（v1.65.378 用户要求）：.filter-side .fs-item 的条目间横线 +
        .fs-group h5 的标题下横线，只在 PC 块内置 0（手机/平板的线不动）。
     ⑤ 控制平台分组：PC 端与改前一致**不显示**（DOM 保留，仅 CSS 隐藏）——
        历次都只按需求动「搜索 + 分类」两样。
   ========================================================================== */
@media (min-width: 1367px), (min-width: 1025px) and (orientation: portrait) {
  /* ① 容器：左右两栏（左 = 搜索 + 分类竖栏；右 = 商品网格）
     v1.65.378：左列 300px → **200px**（用户要求「把分类和搜索的宽度约束在200像素」）。
     200px 下的两处配套（都已真机实测）：
       · .toolbar .input-icon 的 min-width:220px 必须继续置 0（见 ③），否则搜索框顶破列宽；
       · 搜索框 placeholder 已同步精简为「搜索产品/编码/型号」（site.js，原文案 174.6px
         在 200px 列的可用文本宽 ~144px 内会被原生截断）。 */
  .layout-side {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
    gap: 28px 32px;
  }
  /* ② v1.65.378：左列 = **一个**网格项。.filter-combo 成为左列整块
        （搜索框 + 产品分类都在它里面，DOM 上 .filter-side 已移入，见 site.js），
        跨两行、顶端对齐。
        ⚠️ 为什么必须合成一块：若搜索框（.toolbar）与 .filter-side 各自为网格项，
           #p-list 跨第 1-2 行时，浏览器会把多出的高度**均分**给两行 —— 第 1 行被撑到
           293px，搜索框与分类之间被撕出一条 277px 的空洞（v1.65.376 实测）。
           合成一块后左列内容从行首紧挨着排，列下方的留白是正常电商形态。
        同时清掉移动端给 .filter-combo 的卡片样式（PC 左栏不要白底圆角边框）。
        .layout-main 仍透明化：它的另一个子项 #p-list / #p-pager 要当右列网格项。 */
  .layout-main { display: contents; }
  .filter-bar.filter-combo {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  /* ③ 搜索框：左列块内正常流第一位（按钮 / 排序下拉在 PC 仍隐藏，见 ⑦） */
  .filter-combo .toolbar { width: auto; min-width: 0; margin: 0; }
  .filter-combo .toolbar .search-box { width: 100%; }
  .toolbar .input-icon { min-width: 0; }   /* 基础段 min-width:220px 在窄列里会顶破列宽 */

  /* ④ 产品分类竖栏：左列块内、搜索框正下方（沿用既有 .fs-item 竖排列表） */
  .filter-combo .filter-side {
    display: block;
    width: auto;
    margin-top: 28px;   /* 与搜索框的间距（= 原 grid 行距 28px，观感不变） */
  }
  /* 控制平台分组：PC 端与改前一致不显示（DOM 保留） */
  .filter-side .fs-group-platform { display: none; }

  /* ⑤ 商品网格 + 分页 → 右列（网格跨左栏两行，分页另起一行） */
  #p-list { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  #p-pager { grid-column: 2; grid-row: 3; }

  /* ⑥ 分类已在左栏竖排：顶部横向标签与分类下拉面板在 PC 端一律不出现 */
  .cat-tabs,
  .plat-tabs,
  .filter-combo .cat-fold { display: none; }

  /* ⑦ 搜索按钮与排序下拉：改前 PC 端即隐藏，本次保持不变 */
  .toolbar .search-btn,
  .toolbar .select { display: none !important; }

  /* ⑧ v1.65.378：取消左栏分隔线条（用户要求「取消分隔线条」）。
        左栏只有两条线，都在这里干掉：
          · 分类条目之间的横线   → .filter-side .fs-item 的 border-bottom
          · 「产品分类」标题下横线 → .filter-side .fs-group h5 的 border-bottom
        只写在 PC 块内：手机端 / 平板端的顶部分类标签与下拉面板用线不变。
        标题去掉线后保留 12px 下内边距，与上方搜索框的间距不变。 */
  .filter-side .fs-item { border-bottom: 0; }
  .filter-side .fs-group h5 { border-bottom: 0; }
}