/* ===========================================================================
 * inner.css —— 国际站内页组件
 * ===========================================================================
 *
 * 与 home.css 的关系：**这一层只加，不改**。
 *
 * 设计令牌（--nv-900 / --nv-800 / --teal / --link / --ink / --line / --bg …）
 * 全部定义在 home.css 的 `.sm { }` 里，这个文件一个颜色都不新定义，
 * 只通过 var() 取。改一次主色，首页和内页一起变 —— 这是分两个文件的前提，
 * 也是唯一必须守住的纪律。
 *
 * 加载顺序：home.css 先，inner.css 后。少数刻意覆盖首页组件的规则
 * （比如内页的 .sm-h2 要左对齐而不是居中）依赖这个顺序。
 *
 * 所有选择器都锚在 `.sm` 之下。理由和首页一样：令牌与 box-sizing 重置
 * 都挂在 .sm 上，写在外面的元素会同时失去两者。
 *
 * 命名：内页组件统一 `in-` 前缀，与首页的 `sm-` / `pc-` 区分开。
 * 一眼能看出「这条规则属于哪一层」，删的时候才不会误伤。
 *
 * 目录
 *   1  页面骨架与页头带
 *   2  面包屑
 *   3  产品详情：两栏
 *   4  产品详情：图廊
 *   5  产品详情：关键参数速览
 *   6  内容区块与富文本
 *   7  数据表（技术参数 / 包装规格）
 *   8  资料下载
 *   9  右栏卡片
 *  10  按钮组与复制反馈
 *  11  标签与徽章
 *  12  列表页：筛选条 / 网格 / 分页
 *  13  品牌墙 / 分类墙
 *  14  知识库文章
 *  15  搜索页
 *  16  联系页
 *  17  空状态与提示
 *  18  窄屏
 *  19  打印
 * ======================================================================== */

/* ── 0. 内页版式令牌 ──────────────────────────────────────────────────────
   颜色令牌一律在 home.css，这里只放内页自己的版式尺寸。

   --doc-w        「正文 + 右侧栏」整块的宽度。980 = 主栏 664 + 间距 44 + 侧栏 272。
                  为什么不铺满 1400：主栏那时有 1044px，一行一百多个字符，
                  没人这么读；正文照旧收在 ~560px，于是文字和侧栏之间空出
                  四百多像素 —— 页面看上去就是「内容靠左、右边一大片白」。
   --doc-w-narrow  没有侧栏时的纯阅读宽度。

   两个值都是「一处改、行业方案 / 知识库 / 新闻 / 单页 一起变」。 */
.sm {
  --doc-w: 980px;
  --doc-w-narrow: 720px;
}

/* ── 1. 页面骨架与页头带 ──────────────────────────────────────────────── */

.sm .in-main {
  min-height: 50vh;
  padding-bottom: 56px;
  background: #fff;
}

/* 内页页头带。深蓝底、白字，和首页顶栏连成一片 ——
   内页没有 hero，这一条带子就是「你在哪儿」的视觉锚点。 */
.sm .in-hd {
  padding: 26px 0 30px;
  color: #fff;
  background: linear-gradient(180deg, var(--nv-800) 0%, var(--nv-900) 100%);
}

.sm .in-hd-in { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between; }

.sm .in-hd h1 {
  margin: 0;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.28;
  color: #fff;
  letter-spacing: -0.01em;
}

.sm .in-hd .in-hd-sub {
  max-width: 78ch;
  margin: 9px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgb(255 255 255 / 76%);
}

/* 右上角的计数。用等宽数字，翻页时数字不会左右抖 */
.sm .in-hd-count {
  flex: 0 0 auto;
  font-size: 13px;
  color: rgb(255 255 255 / 70%);
  font-variant-numeric: tabular-nums;
}
.sm .in-hd-count b { font-size: 19px; font-weight: 700; color: #fff; }

/* 浅色页头（详情页用）。产品名是页面上最重的信息，
   放在深蓝底上会和顶栏抢注意力，所以详情页用白底。 */
.sm .in-hd--plain { color: var(--ink); background: #fff; border-bottom: 1px solid var(--line); }
.sm .in-hd--plain h1 { color: var(--ink); }
.sm .in-hd--plain .in-hd-sub { color: var(--ink-2); }

/* ── 2. 面包屑 ────────────────────────────────────────────────────────── */

/* 面包屑不只是导航。它是搜索结果里那一行路径的来源（配合 BreadcrumbList），
   也是访客从产品页往上走到分类页的唯一入口 —— 20 万页的站，
   没有面包屑等于每个产品页都是死胡同。 */
.sm .in-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 11px 0;
  font-size: 12.5px;
  color: var(--ink-2);
}
.sm .in-crumb a { color: var(--ink-2); }
.sm .in-crumb a:hover { color: var(--teal); text-decoration: underline; }
.sm .in-crumb i { font-style: normal; color: #b6bec7; }
/* 末项是当前页，不是链接。用 aria-current 而不是把它做成链接指向自己 */
.sm .in-crumb [aria-current] { font-weight: 600; color: var(--ink); }
/* 深色页头里的面包屑 */
.sm .in-hd .in-crumb,
.sm .in-hd .in-crumb a { color: rgb(255 255 255 / 72%); }
.sm .in-hd .in-crumb a:hover { color: #fff; }
.sm .in-hd .in-crumb i { color: rgb(255 255 255 / 40%); }
.sm .in-hd .in-crumb [aria-current] { color: #fff; }

/* ⚠️ 浅色页头（.in-hd--plain）必须把上面那组白字改回来。
   缺了这一段的后果是**白底白字，面包屑完全隐形** —— 而且它不报错、
   不影响布局、DOM 里字也在，只有肉眼看或量取计算色才发现。
   影响 contact / kb / product / search 四类页面，产品页还是全站流量最大的那类。
   加新的 --plain 变体时，配色覆盖要一并加，别只加背景。 */
.sm .in-hd--plain .in-crumb,
.sm .in-hd--plain .in-crumb a { color: var(--ink-2); }
.sm .in-hd--plain .in-crumb a:hover { color: var(--teal); }
.sm .in-hd--plain .in-crumb i { color: #b6bec7; }
.sm .in-hd--plain .in-crumb [aria-current] { color: var(--ink); }

/* ── 3. 产品详情：两栏 ────────────────────────────────────────────────── */

/* 左主栏给事实与证据，右栏给决策（型号、资料、询价、联系）。
   右栏 sticky：产品页往下滚很长，询价入口不该滚出视野 —— 这是转化路径。 */
.sm .in-2col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 34px;
  align-items: start;
  padding-top: 26px;
}
.sm .in-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }

/* ── 4. 产品详情：图廊 ────────────────────────────────────────────────── */

/* 首屏是「图 + 关键参数」并排，不是图占满一行。
   图独占一行的话，1440 宽的屏上主图会有 660px 高，
   把描述和参数表整个推到折线以下 —— 而选型的人首屏就想看到粘度和温域。 */
.sm .in-top {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}
.sm .in-top-b { display: flex; flex-direction: column; gap: 12px; }

.sm .in-gal { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }

.sm .in-gal-thumbs { display: flex; flex-direction: column; gap: 8px; }

.sm .in-gal-thumbs button {
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  aspect-ratio: 1;
  transition: border-color 0.15s;
}
.sm .in-gal-thumbs button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sm .in-gal-thumbs button[aria-selected='true'] { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.sm .in-gal-thumbs button:hover { border-color: var(--nv-700); }

.sm .in-gal-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  /* 方形而不是 4:3：润滑剂是罐、桶、管，实物照片基本都是竖长的，
     4:3 会在两侧留下大片空白 */
  aspect-ratio: 1;
}
.sm .in-gal-main img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* 没有图的时候不要留一个空框：画一个和卡片同款的容器占位，
   比一个灰色方块体面，也比什么都不放更能说明"这是个实物产品" */
.sm .in-gal-none { display: flex; align-items: center; justify-content: center; padding: 28px; }
.sm .in-gal-none svg { width: 120px; height: auto; }
/* 无图时不要正方形：400×400 的灰框里搁一个 120px 的占位图形，
   空出来的灰面积是图形的八倍，看起来像图片加载失败而不是"这个型号没上图"。 */
.sm .in-gal-main--none { aspect-ratio: 4 / 3; }

/* 首屏右列在「没有答案块、没有速览、没有认证、没有简介」时的替代内容。
   这批产品（旧站导入、参数尚未整理）此前的首屏是右半屏纯白。
   与其留白，不如把这一屏最有价值的动作放上来。 */
.sm .in-top-ask {
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-2);
  background: var(--bg);
  border-radius: 3px;
}
.sm .in-top-ask p { margin: 0; }
.sm .in-top-ask-a { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px !important; }
.sm .in-top-ask-a .sm-btn { min-width: 150px; }

/* ── 5. 产品详情：关键参数速览 ────────────────────────────────────────── */

/* 首屏就要看到粘度、温域、认证。老站要滚到底才有参数，
   而选型工程师判断"这个型号值不值得细看"只用三秒。 */
/* ⚠️ 分隔线用「格子投影」而不是「容器铺灰底 + 1px 缝隙」。
   两种做法在格子填满时看不出区别，但速览一共 6 格、而绝大多数产品
   凑不满 6 条参数 —— 旧写法下最后一行没填满的位置会露出容器的灰底，
   页面上就是一个**纯灰色方块**，看起来像内容没加载完。
   3 条参数（很常见）在两列布局下必然露一格。
   box-shadow 往外扩 1px，正好把 1px 的 gap 填成分隔线，空位则保持白色。 */
.sm .in-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.sm .in-fact { padding: 11px 13px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.sm .in-fact dt {
  margin: 0 0 3px;
  overflow: hidden;
  font-size: 11.5px;
  color: var(--ink-2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sm .in-fact dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--nv-800);
  word-break: break-word;
}
.sm .in-fact dd u { font-size: 12px; font-weight: 400; color: var(--ink-2); text-decoration: none; }

/* 包装表里的交期提示与空格占位。
   lead_hint_zh/en 这两列在 xp_intl_product_spec 里一直存在，
   但模板从来没渲染过 —— 「什么时候能到」是 B2B 客户在「有没有货」
   之后立刻要问的第二个问题，让他为此发一封邮件是很贵的。 */
.sm .in-lead { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-2); }
.sm .in-tbl .in-void { color: #c2c9d1; }

/* ══ 供应商与合作伙伴申请页（2026-08-29）═════════════════════════════════
   复用联系页那一套 .intl-ct-* / .in-sup-*，这里只加这一页特有的四样东西。 */

/* 路径选择：两张卡片式单选。比下拉摊得开，也让"这是两条不同的路"一眼看得出 */
/* 跨满两列。不跨的话它占左列、而「具体方向」那个下拉占右列，
   下拉下面空出一大块（radio 卡片比 select 高得多），页面像没写完。
   真渲染截图才看出来的。 */
.sm .pa-kind { grid-column: 1 / -1; margin: 0 0 4px; padding: 0; border: 0; }
.sm .pa-kind legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.sm .pa-kind-i { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin-bottom: 8px;
                 cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 3px;
                 transition: border-color .15s, background .15s; }
.sm .pa-kind-i:hover { border-color: var(--teal); }
.sm .pa-kind-i input { margin-top: 3px; flex: none; }
.sm .pa-kind-i b { display: block; font-size: 14px; color: var(--ink); }
.sm .pa-kind-i em { display: block; margin-top: 2px; font-size: 12.5px; font-style: normal; color: var(--ink-2); line-height: 1.6; }
/* 选中态：:has() 不支持时只是没有高亮，不影响功能 */
.sm .pa-kind-i:has(input:checked) { background: #f2fafc; border-color: var(--teal); }

/* 表单里的小节标题 */
.sm .pa-h { grid-column: 1 / -1; margin: 22px 0 2px; font-size: 14px; font-weight: 700; color: var(--nv-800); }
.sm .pa-h:first-of-type { margin-top: 8px; }

/* ⚠️ 两条路的专属字段：**默认显示**，只在 :has() 命中时隐藏不相关的那组。
   反过来写（默认隐藏、支持时显示）在不支持 :has() 的浏览器上
   会让字段永久消失 —— 用户根本填不了，而且没有任何报错。
   这样写最坏的情况是两组都显示，啰嗦但不丢数据。 */
/* 三条路：选中一条，隐藏另外两条的专属块。默认全显示 —— 不支持 :has() 时
   最坏是三组都显示，啰嗦但不丢数据（理由见上）。 */
.sm .pa-form:has(#pa-k-supplier:checked) .pa-only-partner,
.sm .in-sup:has(#pa-k-supplier:checked) .pa-only-partner,
.sm .pa-form:has(#pa-k-supplier:checked) .pa-only-brand,
.sm .in-sup:has(#pa-k-supplier:checked) .pa-only-brand { display: none; }
.sm .pa-form:has(#pa-k-partner:checked) .pa-only-supplier,
.sm .in-sup:has(#pa-k-partner:checked) .pa-only-supplier,
.sm .pa-form:has(#pa-k-partner:checked) .pa-only-brand,
.sm .in-sup:has(#pa-k-partner:checked) .pa-only-brand { display: none; }
.sm .pa-form:has(#pa-k-brand:checked) .pa-only-supplier,
.sm .in-sup:has(#pa-k-brand:checked) .pa-only-supplier,
.sm .pa-form:has(#pa-k-brand:checked) .pa-only-partner,
.sm .in-sup:has(#pa-k-brand:checked) .pa-only-partner { display: none; }

/* 字段级错误。红边 + 红字，且错误文案挂在 aria-describedby 上（见模板） */
.sm .intl-ct-f.is-bad input,
.sm .intl-ct-f.is-bad textarea,
.sm .intl-ct-f.is-bad select { border-color: #c0392b; }
/* ⚠️ 错误文案用 #a33227 而不是常见的 #d9534f。
   #d9534f 在白底上对比度只有 3.96，达不到 WCAG AA 的 4.5 —— 而这是
   **12.5px 的小字**，本来就是全页最难读的一处，偏偏又是最需要被读到的一处。
   #a33227 是 6.4，且与顶部 .intl-ct-err 用的是同一个红，整页错误提示一个色系。
   实测出来的：真渲染 + 对比度计算，肉眼看 #d9534f 并不觉得浅。 */
.sm .pa-err { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: #a33227; }

/* 「这些我们暂时不接」 */
.sm .pa-no { margin: 10px 0 0; padding-left: 20px; font-size: 13.5px; line-height: 1.9; color: var(--ink-2); }
.sm .pa-no li { margin-bottom: 2px; }

/* ── 6. 内容区块与富文本 ──────────────────────────────────────────────── */

.sm .in-sec { padding-top: 34px; }
.sm .in-sec:first-child { padding-top: 0; }

/* 内页的区块标题左对齐。首页的 .sm-h2 是居中的（那是着陆页的排法），
   在正文流里居中会让人读不出层级 —— 这一条是刻意覆盖 home.css。 */
.sm .in-sec > h2,
.sm .in-h2 {
  display: flex;
  gap: 9px;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 9px;
  margin: 0 0 15px;
  font-size: 18px;
  font-weight: 700;
  color: var(--nv-800);
  text-align: start;
  border-bottom: 2px solid var(--nv-800);
}
/* 标题右侧的次要动作（复制参数、查看全部…）推到最右 */
.sm .in-h2-act { margin-inline-start: auto; font-size: 12.5px; font-weight: 400; }

/* 富文本。旧站的描述是编辑器产出的，什么标签都可能有 ——
   这一段的职责是让它在新版式里不难看，而不是去纠正它。 */
.sm .in-rt { font-size: 14.5px; line-height: 1.85; color: var(--ink); }
.sm .in-rt > :first-child { margin-top: 0; }
.sm .in-rt > :last-child { margin-bottom: 0; }
.sm .in-rt p { margin: 0 0 13px; }
.sm .in-rt h2,
.sm .in-rt h3,
.sm .in-rt h4 { margin: 22px 0 10px; font-size: 16px; font-weight: 700; color: var(--nv-800); }
.sm .in-rt ul,
.sm .in-rt ol { padding-inline-start: 1.3em; margin: 0 0 13px; }
.sm .in-rt li { margin-bottom: 5px; }
.sm .in-rt a { color: var(--link); text-decoration: underline; }
.sm .in-rt strong,
.sm .in-rt b { font-weight: 600; }
/* 富文本里的图片一律限宽。旧站的 <img> 常带 width="800" 这类硬属性，
   不覆盖的话窄屏会整页横向溢出 */
.sm .in-rt img { max-width: 100%; height: auto; margin: 8px 0; border-radius: 2px; }
.sm .in-rt table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.sm .in-rt table td,
.sm .in-rt table th { padding: 7px 11px; font-size: 13.5px; border: 1px solid var(--line); }
.sm .in-rt blockquote {
  padding: 8px 0 8px 14px;
  margin: 0 0 13px;
  color: var(--ink-2);
  border-inline-start: 3px solid var(--line);
}

/* 2026-08-30：后台描述/特点改用 aieditor 后，编辑器里能点出来的这几个
   标签在前台原本是**没有样式**的 —— <sub>/<sup> 会把行高顶开、<hr> 是浏览器
   默认那条粗灰线、<s> 倒是有默认样式但和正文一样粗。
   工具栏给了什么，这里就得接住什么，否则「编辑器里排好的」和「页面上看到的」
   还是两回事，只不过从"内容丢了"变成了"样子不对"。 */
.sm .in-rt s,
.sm .in-rt del { color: var(--ink-2); text-decoration-thickness: 1px; }
/* 上下标不撑行高：默认 vertical-align 会让含 mm²/s 的那一行比别的行高 */
.sm .in-rt sub,
.sm .in-rt sup { font-size: 0.72em; line-height: 0; position: relative; vertical-align: baseline; }
.sm .in-rt sup { top: -0.48em; }
.sm .in-rt sub { bottom: -0.22em; }
.sm .in-rt hr {
  height: 0;
  margin: 20px 0;
  border: 0;
  border-top: 1px solid var(--line);
}
/* code/pre 早就在白名单里，只是一直没样式；工具栏没给这两个按钮，
   但导入的旧站内容里有，裸着渲染会溢出 */
.sm .in-rt code {
  padding: 1px 5px;
  font-size: 0.9em;
  background: var(--bg-2, #f5f7fa);
  border-radius: 3px;
}
.sm .in-rt pre {
  max-width: 100%;
  padding: 12px 14px;
  overflow-x: auto;
  font-size: 13px;
  background: var(--bg-2, #f5f7fa);
  border-radius: 4px;
}
.sm .in-rt pre code { padding: 0; background: none; }

/* ── 7. 数据表 ────────────────────────────────────────────────────────── */

/* 用真 <table> 而不是 div 堆砌：表格的行列语义让抽取模型能可靠还原
   「属性 → 值」，div 只能靠位置猜。这一条是 GEO 的硬要求，不是排版偏好。 */
.sm .in-tblwrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 3px; }
.sm .in-tbl { width: 100%; font-size: 14px; border-collapse: collapse; }
.sm .in-tbl th,
.sm .in-tbl td { padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--line); }
.sm .in-tbl tbody tr:last-child th,
.sm .in-tbl tbody tr:last-child td { border-bottom: 0; }
.sm .in-tbl thead th {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  background: var(--bg);
}
/* 参数表是「行头 + 值」的两列形态：行头占固定比例，值可换行 */
.sm .in-tbl tbody th {
  width: 34%;
  min-width: 130px;
  font-weight: 500;
  color: var(--ink-2);
  vertical-align: top;
  background: var(--bg);
}
.sm .in-tbl tbody td { color: var(--ink); word-break: break-word; }
.sm .in-tbl tbody tr:hover td { background: #fafbfc; }
/* 数值列对齐：同一列的小数点要对上，不然一眼看不出大小 */
.sm .in-tbl .in-num { font-variant-numeric: tabular-nums; }
.sm .in-tbl td u { font-size: 12.5px; color: var(--ink-2); text-decoration: none; }

/* 库存三态。用色块而不是纯文字：一屏十几行包装规格时，
   颜色能让人一眼扫出哪几个有现货。 */
.sm .in-stk { display: inline-block; padding: 2px 8px; font-size: 12px; border-radius: 10px; white-space: nowrap; }
.sm .in-stk--in { color: #0a6b3d; background: #e4f4ec; }
.sm .in-stk--lead { color: #8a5a09; background: #fdf2dc; }
.sm .in-stk--ask { color: var(--ink-2); background: var(--bg-2); }

/* ── 8. 资料下载 ──────────────────────────────────────────────────────── */

.sm .in-docs { padding: 0; margin: 0; list-style: none; }
.sm .in-docs li { border-bottom: 1px solid var(--line); }
.sm .in-docs li:last-child { border-bottom: 0; }
.sm .in-doc { display: flex; gap: 11px; align-items: center; padding: 11px 2px; color: var(--ink); }
.sm .in-doc:hover .in-doc-t { color: var(--teal); text-decoration: underline; }
.sm .in-doc-ic {
  display: flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  height: 34px;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  background: var(--nv-700);
  border-radius: 2px;
}
.sm .in-doc-ic--lock { background: #8a939c; }
.sm .in-doc-b { min-width: 0; }
.sm .in-doc-t { display: block; overflow: hidden; font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sm .in-doc-m { font-size: 11.5px; color: var(--ink-2); }

/* ── 9. 右栏卡片 ──────────────────────────────────────────────────────── */

.sm .in-card { padding: 15px 16px; background: #fff; border: 1px solid var(--line); border-radius: 3px; }
.sm .in-card--tint { background: var(--bg); }
.sm .in-card > h2,
.sm .in-card > h3 {
  padding-bottom: 8px;
  margin: 0 0 11px;
  font-size: 14px;
  font-weight: 700;
  color: var(--nv-800);
  border-bottom: 1px solid var(--line);
}

/* 核心标识：品牌 / 货号 / 型号 / 产品线。
   用 <dl> 是因为这确实是「名—值」对，不是列表 —— 结构化数据抽取器认这个。 */
.sm .in-idl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: 13.5px; }
.sm .in-idl dt { color: var(--ink-2); white-space: nowrap; }
.sm .in-idl dd { margin: 0; font-weight: 600; color: var(--ink); word-break: break-word; }
.sm .in-idl dd a { color: var(--link); }
.sm .in-idl dd a:hover { text-decoration: underline; }
/* 货号要能被选中复制，等宽体让 3346-DR 这类不容易看错 */
.sm .in-idl dd code {
  padding: 1px 5px;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 13px;
  background: var(--bg-2);
  border-radius: 2px;
  user-select: all;
}

/* 联系块 —— 产品详情页右栏那一小块「电话 / 邮箱」。
   ⚠️ 这个名字很短，很容易被后来的模板当成「contact 页」的缩写抢走。
   2026-08-26 就真的出过一次：联系页把两栏页面栅格也叫 .in-ct，
   写在文件更靠后的位置，于是产品页右栏这一小块变成了
   `display:grid; 1fr + 320px` —— 在一个 300px 宽的侧栏里塞 320px 的第二列。
   联系页那一套现在叫 .in-sup-*。往这里加东西前先确认没有第二处同名。 */
.sm .in-ct { font-size: 13px; line-height: 1.85; color: var(--ink-2); }
.sm .in-ct a { color: var(--link); }
.sm .in-ct a:hover { text-decoration: underline; }
.sm .in-ct b { display: block; font-size: 12px; font-weight: 400; color: #8a939c; }

/* ── 10. 按钮组与复制反馈 ─────────────────────────────────────────────── */

.sm .in-cta { display: flex; flex-direction: column; gap: 8px; }
.sm .in-cta .sm-btn { width: 100%; }
/* 白底上的次级按钮。home.css 的 .sm-btn--ghost 是给深底用的（白边白字），
   直接拿到白底上会变成隐形按钮 —— 这里补一个浅底版本。 */
.sm .in-btn2 {
  color: var(--nv-800);
  background: #fff;
  border: 1px solid #cfd6de;
}
.sm .in-btn2:hover { background: var(--bg); border-color: var(--nv-700); }

/* 轻动作：复制参数 / 复制 Markdown。做成文字按钮而不是实心按钮，
   免得和「询价」抢视觉重量 —— 那才是主动作。 */
.sm .in-mini {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 3px 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.sm .in-mini:hover { color: var(--teal); border-color: var(--teal); }
.sm .in-mini[data-done='1'] { color: #0a6b3d; border-color: #9fd3b8; }
.sm .in-minis { display: flex; flex-wrap: wrap; gap: 7px; }

/* ── 11. 标签与徽章 ───────────────────────────────────────────────────── */

.sm .in-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.sm .in-tag {
  padding: 4px 11px;
  font-size: 12.5px;
  color: var(--nv-800);
  background: #fff;
  border: 1px solid #c9dde4;
  border-radius: 12px;
  transition: background 0.15s;
}
.sm .in-tag:hover { color: #fff; background: var(--teal); border-color: var(--teal); }

/* 认证徽章（NSF H1 / ISO 21469 …）。这些是工业品最强的信任信号，
   值得从参数表里提出来单独放一排。 */
.sm .in-certs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sm .in-cert {
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 600;
  color: #0a6b3d;
  background: #e9f5ee;
  border: 1px solid #bfe0cd;
  border-radius: 2px;
}

/* ── 12. 列表页 ───────────────────────────────────────────────────────── */

/* 筛选条。做成 chip 而不是下拉：一屏能看见所有可选项，
   而下拉要点开才知道有什么 —— 目录站的筛选是浏览行为，不是表单填写。 */
.sm .in-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.sm .in-filter-k { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-2); }
.sm .in-filter a {
  padding: 4px 12px;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.sm .in-filter a:hover { border-color: var(--teal); }
.sm .in-filter a[aria-current] { color: #fff; background: var(--nv-800); border-color: var(--nv-800); }
/* 已选筛选的清除按钮 */
.sm .in-filter .in-clear { color: var(--teal); background: transparent; border: 0; }
.sm .in-filter .in-clear:hover { text-decoration: underline; }

/* ── 结果条：左「第 X–Y 个，共 N 个」/ 右排序 ─────────────────────────
   排序项是真链接（<a href>），不是 JS 下拉。两个理由：
   下拉框的选项爬虫读不到，而且没有 JS 的环境里直接失效。
   当前项渲染成 <span aria-current>，不是一个指向自己的链接 —— 指向自己的
   链接在读屏软件里是纯噪音，在链接图上是一条自环。 */
.sm .in-lbar {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  align-items: baseline; justify-content: space-between;
  padding: 20px 0 12px;
}
.sm .in-lbar-n { margin: 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sm .in-sort { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; font-size: 13px; }
.sm .in-sort-k { margin-right: 4px; color: #8a939c; font-size: 12.5px; }
.sm .in-sort a,
.sm .in-sort span[aria-current] {
  padding: 3px 10px; border-radius: 2px; line-height: 1.5;
}
.sm .in-sort a { color: var(--ink-2); }
.sm .in-sort a:hover { color: var(--teal); background: var(--bg); }
.sm .in-sort span[aria-current] { font-weight: 700; color: var(--nv-800); background: var(--bg); }

/* 下级产品线那一块原来写的是 style="padding-top:22px" */
.sm .in-sec--sub { padding-top: 22px; }

@media (max-width: 560px) {
  /* 窄屏两行：计数一行、排序一行，排序靠左对齐而不是被挤成两个字一行 */
  .sm .in-lbar { justify-content: flex-start; }
  .sm .in-lbar-n { flex: 1 0 100%; }
}

/* 产品网格。卡片本体复用首页的 .pc（home.css 里那套），
   这里只负责排布 —— 两处各画一套卡片是「首页和内页长得不一样」的根源。

   ⚠️ list-style / margin 这两行不是"顺手加的重置"，少了会真的看得见：
   _cards.php 用的是 <ul>/<li>（列表语义是给抽取模型看的，要保留），
   而这个项目没有全局的 `ul { list-style: none }`。少了这一行，
   每张产品卡左边都会挂一个圆点 —— 产品列表、分类页、品牌页、
   以及产品详情页的「相关型号」两块，一共 12 个页面全中。
   首页没事，是因为首页那套卡片不放在 <ul> 里，所以一直没人发现。

   li 用 flex + 子元素 flex:1：让 .pc 撑满整行的高度。不撑满的话，
   同一行里标题两行和标题三行的卡片，底部的「加入询价单」不在一条线上 —— 
   这在示例数据里看不出来（标题都一样长），真实目录里每一行都不齐。 */
.sm .in-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
  padding: 22px 0;
  margin: 0;
  list-style: none;
}
.sm .in-grid > li { display: flex; min-width: 0; }
.sm .in-grid > li > * { flex: 1 1 auto; min-width: 0; }

/* 简卡：品牌墙、产品线墙、知识库列表用。比产品卡轻，没有询价动作。 */
.sm .in-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 14px;
  padding: 20px 0;
}
.sm .in-c {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 15px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.sm .in-c:hover { border-color: var(--nv-700); box-shadow: 0 2px 10px rgb(18 41 79 / 8%); }
/* logo 展示区。2026-09-09：46px → 64px。
   工业品牌多是细笔画字标（Klüber、Molykote 这类），46px 高的容器里
   实际渲染出来只有二三十像素，认不出是谁 —— 而"认出来"正是品牌卡片存在的理由。
   容器固定高度负责占位（不产生 CLS），object-fit: contain 让各种长宽比的
   logo 都保持比例，不会被压扁。 */
.sm .in-c-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 2px 0;
}
.sm .in-c-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sm .in-c-t { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--link); }
.sm .in-c:hover .in-c-t { text-decoration: underline; }
.sm .in-c-d {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.sm .in-c-n { margin-top: auto; font-size: 12px; color: #8a939c; font-variant-numeric: tabular-nums; }

/* 分页。数字大而稀，手机上要点得中 —— 44px 是触摸目标的下限。 */
.sm .in-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; padding: 26px 0 6px; }
.sm .in-pager a,
.sm .in-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 11px;
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
.sm .in-pager a:hover { color: var(--teal); border-color: var(--teal); }
.sm .in-pager [aria-current] { font-weight: 700; color: #fff; background: var(--nv-800); border-color: var(--nv-800); }
.sm .in-pager .in-gap { color: #b6bec7; background: transparent; border: 0; }

/* ── 13. 品牌墙 / 分类墙 ──────────────────────────────────────────────── */

/* ── A–Z 字母条（2026-09-21 改版，参考 silmid.com/brands）──────────────────
   ① 满宽等分 27 格（A–Z + #）。没有品牌的字母也占位、灰掉 ——
      只输出有品牌的字母时，缺一个 X 后面整排就错位，眼睛没法记住位置。
   ② 吸顶，贴在主导航下面（--sticky-h 是主导航的吸顶总高度，见 home.css）。
      --az-h 是这条自己的高度，锚点的 scroll-margin 要把两者都让开。
   ③ 链接不要下划线：27 个带下划线的字母就是一排噪点。 */
.sm { --az-h: 64px; }
.sm .in-alpha {
  position: sticky;
  top: var(--sticky-h, 124px);
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(27, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 0;
  margin: 6px 0 0;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.sm .in-alpha a,
.sm .in-alpha span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  font-size: 14px;
  font-weight: 600;
  color: var(--nv-800);
  text-decoration: none;
  background: var(--bg-2);
  border-radius: 3px;
  transition: background 0.12s, color 0.12s;
}
.sm .in-alpha a:hover,
.sm .in-alpha a:focus-visible { color: #fff; background: var(--teal); outline: none; }
.sm .in-alpha a.is-on { color: #fff; background: var(--nv-800); }
/* 没有品牌的字母（服务端输出的 span），以及筛选后暂时没有结果的字母（JS 加 aria-disabled） */
.sm .in-alpha span[aria-disabled],
.sm .in-alpha a[aria-disabled] { color: #b8bfc8; pointer-events: none; background: var(--bg); }

/* 窄屏：27 格挤进 360px 每格不到 12px，点不中。改成横向滑动的一排，每格 36px */
@media (max-width: 760px) {
  .sm { --az-h: 56px; }
  .sm .in-alpha {
    display: flex;
    gap: 5px;
    padding: 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sm .in-alpha::-webkit-scrollbar { display: none; }
  .sm .in-alpha a,
  .sm .in-alpha span { flex: 0 0 36px; height: 36px; }
}

.sm .in-group { padding-top: 22px; }
.sm .in-group > h2 {
  padding-bottom: 6px;
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  color: var(--nv-800);
  border-bottom: 1px solid var(--line);
}

/* 分类树：产品线是两级的，子级平铺在父级下面 */
.sm .in-tree { padding: 0; margin: 0; list-style: none; }
.sm .in-tree > li { padding: 15px 0; border-bottom: 1px solid var(--line); }
.sm .in-tree > li:last-child { border-bottom: 0; }
.sm .in-tree-t { display: flex; gap: 9px; align-items: baseline; margin: 0 0 7px; font-size: 15.5px; font-weight: 700; }
.sm .in-tree-t a { color: var(--link); }
.sm .in-tree-t a:hover { text-decoration: underline; }
.sm .in-tree-t span { font-size: 12px; font-weight: 400; color: #8a939c; }
.sm .in-tree-k { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sm .in-tree-k a { font-size: 13px; color: var(--ink-2); }
.sm .in-tree-k a:hover { color: var(--teal); text-decoration: underline; }

/* ── 14. 知识库文章 ───────────────────────────────────────────────────── */

.sm .in-art { max-width: 74ch; }
.sm .in-art-meta { display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: 14px; margin-bottom: 20px; font-size: 12.5px; color: var(--ink-2); border-bottom: 1px solid var(--line); }
/* 正文比产品描述宽松一档：知识库是拿来读的，产品描述是拿来扫的 */
.sm .in-art .in-rt { font-size: 15.5px; line-height: 1.95; }
.sm .in-art .in-rt:not(.in-rt--wide) h2 { padding-top: 6px; margin: 30px 0 12px; font-size: 19px; }
.sm .in-art .in-rt:not(.in-rt--wide) h3 { margin: 24px 0 10px; font-size: 16.5px; }

/* 目录（长文用）。sticky 在右侧，短文不渲染。 */
.sm .in-toc { padding: 13px 15px; font-size: 13px; background: var(--bg); border-inline-start: 3px solid var(--teal); border-radius: 0 3px 3px 0; }
.sm .in-toc ol { padding-inline-start: 1.1em; margin: 0; }
.sm .in-toc li { margin-bottom: 5px; }
.sm .in-toc a { color: var(--ink-2); }
.sm .in-toc a:hover { color: var(--teal); text-decoration: underline; }

/* FAQ 折叠。用 <details> 而不是 JS —— 没有脚本也能展开，
   而且抽取模型能从 summary/内容的从属关系里读出问答对。 */
.sm .in-faq { border: 1px solid var(--line); border-radius: 3px; }
.sm .in-faq details { border-bottom: 1px solid var(--line); }
.sm .in-faq details:last-child { border-bottom: 0; }
.sm .in-faq summary {
  padding: 13px 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--nv-800);
  cursor: pointer;
  list-style: none;
}
.sm .in-faq summary::-webkit-details-marker { display: none; }
.sm .in-faq summary::after { float: right; margin-inline-start: 10px; color: var(--teal); content: '+'; }
.sm .in-faq details[open] summary::after { content: '−'; }
.sm .in-faq summary:hover { background: var(--bg); }
.sm .in-faq-b { padding: 0 16px 14px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }

/* ── 15. 搜索页 ───────────────────────────────────────────────────────── */

.sm .in-searchbar { display: flex; gap: 8px; padding: 18px 0; }
.sm .in-searchbar input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd6de;
  border-radius: 2px;
}
.sm .in-searchbar input:focus { border-color: var(--teal); outline: 2px solid rgb(10 143 166 / 18%); outline-offset: 0; }
.sm .in-hit { padding: 15px 0; border-bottom: 1px solid var(--line); }
.sm .in-hit h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 600; }
.sm .in-hit h3 a { color: var(--link); }
.sm .in-hit h3 a:hover { text-decoration: underline; }
.sm .in-hit-u { font-size: 12px; color: #2e8b57; }
.sm .in-hit-d { margin: 5px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.sm .in-hit-d mark { padding: 0 2px; color: inherit; background: #fff3c4; }

/* ── 16. 联系页 ───────────────────────────────────────────────────────── */

.sm .in-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sm .in-form .in-f--full { grid-column: 1 / -1; }
.sm .in-f label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.sm .in-f label em { font-style: normal; color: #c0392b; }
.sm .in-f input,
.sm .in-f select,
.sm .in-f textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd6de;
  border-radius: 2px;
}
.sm .in-f textarea { min-height: 118px; resize: vertical; }
.sm .in-f input:focus,
.sm .in-f select:focus,
.sm .in-f textarea:focus { border-color: var(--teal); outline: 2px solid rgb(10 143 166 / 18%); }
.sm .in-f-hint { margin: 5px 0 0; font-size: 12px; color: #8a939c; }

/* ── 17. 空状态与提示 ─────────────────────────────────────────────────── */

.sm .in-empty { padding: 46px 20px; font-size: 14.5px; color: var(--ink-2); text-align: center; }
.sm .in-empty b { display: block; margin-bottom: 7px; font-size: 16px; color: var(--ink); }
/* ⚠️ :not(.sm-btn) 不能省。这条规则本意是给空态里那个「全部产品」纯文本链接上色，
   但它的特异性（0,2,1）压过 .sm-btn（0,1,0）—— 结果是同在空态里的
   「索取报价」按钮变成**青字青底**，一个纯色方块，一个字都看不见。
   按钮是 <a> 而不是 <button>，容器级的 a 规则就会误伤它。
   以后在任何容器里写 `xxx a { color: ... }` 之前，先想想里面有没有按钮。 */
.sm .in-empty a:not(.sm-btn) { color: var(--teal); text-decoration: underline; }

/* 空状态的正文与两个按钮。
   此前这三行是写在 list.php 的行内 style 里的（margin:14px auto 0 / max-width:46ch），
   行内样式在这个项目里有个具体代价：整页静态化后每个空列表页都带着一份，
   而且响应式断点改不动它。 */
.sm .in-empty-p { max-width: 52ch; margin: 10px auto 0; line-height: 1.75; }
.sm .in-empty-a { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 20px 0 0; }
.sm .in-empty-a .sm-btn { min-width: 168px; }
.sm .in-empty-x { margin: 16px 0 0; font-size: 13px; }

.sm .in-note {
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--bg);
  border-inline-start: 3px solid var(--teal);
  border-radius: 0 2px 2px 0;
}
.sm .in-note--warn { border-inline-start-color: #e0a02a; background: #fff8ec; }

/* ── 18. 窄屏 ─────────────────────────────────────────────────────────── */

@media (width <= 1080px) {
  .sm .in-2col { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
}

@media (width <= 860px) {
  /* 图与速览上下堆。图再限一下高度：竖屏上一张占满宽度的方图
     会把首屏全吃掉，看不到任何参数。 */
  .sm .in-top { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .sm .in-gal-main { max-height: 46vh; aspect-ratio: auto; min-height: 220px; }
}

@media (width <= 900px) {
  /* 右栏落到主栏下面，并且**取消 sticky** ——
     一个占满整个视口宽度的粘性块会把内容顶掉，那比不粘更糟 */
  .sm .in-2col { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sm .in-side { position: static; }
  .sm .in-hd h1 { font-size: 22px; }
}

@media (width <= 620px) {
  /* 缩略图改成横排，主图上方一条 —— 竖排在窄屏会把主图挤成一条 */
  .sm .in-gal { grid-template-columns: minmax(0, 1fr); }
  .sm .in-gal-thumbs { flex-direction: row; order: 2; overflow-x: auto; }
  .sm .in-gal-thumbs button { flex: 0 0 60px; width: 60px; }
  .sm .in-gal-main { order: 1; aspect-ratio: 1; }
  .sm .in-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
  .sm .in-cards { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 10px; }
  .sm .in-form { grid-template-columns: minmax(0, 1fr); }
  .sm .in-tbl tbody th { width: 40%; min-width: 0; }
  .sm .in-tbl th,
  .sm .in-tbl td { padding: 9px 10px; font-size: 13.5px; }
  .sm .in-hd { padding: 18px 0 22px; }
  .sm .in-facts { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}

/* ── 19. 打印 ─────────────────────────────────────────────────────────── */

/* 采购会把产品页打印出来附在申请单后面。这是工业品站真实存在的用法，
   而默认打印出来会带着整条深蓝导航和页脚四列链接，浪费两页纸。 */
@media print {
  .sm .sm-top,
  .sm .sm-foot,
  .sm .in-side .in-cta,
  .sm .in-crumb,
  .sm .sm-widget,
  .sm .sm-cookie,
  .sm .in-minis { display: none !important; }

  .sm .in-2col { display: block; }
  .sm .in-tblwrap { overflow: visible; }
  /* 表格跨页时行不要被切成两半 */
  .sm .in-tbl tr { page-break-inside: avoid; }
  .sm .in-hd { color: #000; background: none; border-bottom: 1px solid #999; }
  .sm .in-hd h1 { color: #000; }
  .sm a { color: #000; text-decoration: none; }
}

/* 首屏那句简介。比正文小一档、颜色浅一档 ——
   它是「这是什么」的一句话，不是内容主体。 */
.sm .in-brief {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
}

/* ===========================================================================
 * 20  品牌页头
 * ======================================================================== */

.sm .in-brandhd { display: flex; gap: 16px; align-items: center; }

/* 品牌 LOGO 多半是深色的，直接放在深蓝页头上会看不见。垫一块白底。
   这是实际会踩的坑 —— 1145 个品牌里深色 LOGO 占大多数。 */
.sm .in-brandhd-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 64px;
  padding: 7px;
  background: #fff;
  border-radius: 3px;
}
.sm .in-brandhd-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sm .in-brandhd-m { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.sm .in-brandhd-m a { color: #fff; text-decoration: underline; }

@media (width <= 620px) {
  .sm .in-brandhd { gap: 12px; }
  .sm .in-brandhd-logo { width: 68px; height: 48px; }
}

/* ===========================================================================
 * 21  过渡层：还没重写成 in-* 的那几个模板
 * ===========================================================================
 *
 * 搜索页、联系页、受限资料页、404 这四个模板的 HTML 结构本身没有问题
 * （表单校验、线索预填、两级权限入口都是对的），只是类名还是 site.css 那套。
 *
 * 与其为了统一样式去重写它们、顺带把已经跑通的逻辑冒一次险，
 * 不如在这里把那些类名按新令牌重新定义一遍 —— 视觉上立刻并轨，
 * HTML 一个字都不用动。
 *
 * ⚠️ 这一段是**过渡**，不是终态。这四个模板逐个重写成 in-* 之后，
 *    对应的规则就可以从这里删掉。删的时候按下面的分组整段删，别零敲碎打。
 * ======================================================================== */

/* ── 通用外壳：这四个模板的最外层都不是 .sm-wrap，给它们补上居中与内边距 ── */
.sm .intl-search,
.sm .intl-ct,
.sm .intl-gate,
.sm .intl-404 {
  width: 100%;
  max-width: 1800px;           /* 与 .sm-wrap 同宽（2026-10-12） */
  padding: 26px clamp(16px, 2.5vw, 40px) 56px;
  margin: 0 auto;
  background: #fff;
}

/* ── 页头 / 标题 ── */
.sm .intl-list-h { padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.sm .intl-list-h h1,
.sm .intl-gate h1,
.sm .intl-search h1,
.sm .intl-ct h1 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.sm .intl-lead,
.sm .intl-gate-lead { max-width: 74ch; margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }
.sm .intl-count { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.sm .intl-h2 {
  display: block;
  padding-bottom: 8px;
  margin: 30px 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--nv-800);
  text-align: start;
  border-bottom: 2px solid var(--nv-800);
}
.sm .intl-h3 { margin: 20px 0 9px; font-size: 15px; font-weight: 700; color: var(--ink); }

/* ── 旧面包屑（这四个模板还在用）── */
.sm .intl-crumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 11px 0; font-size: 12.5px; color: var(--ink-2); }
.sm .intl-crumb a { color: var(--ink-2); }
.sm .intl-crumb a:hover { color: var(--teal); text-decoration: underline; }
.sm .intl-crumb span { color: #b6bec7; }
.sm .intl-crumb strong { font-weight: 600; color: var(--ink); }

/* ── 旧按钮 ── */
.sm .intl-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: var(--teal);
  border: 0;
  border-radius: 2px;
}
.sm .intl-btn:hover { background: var(--teal-d); }
.sm .intl-btn-lg { padding: 13px 30px; font-size: 15px; }
.sm .intl-btn-ghost { color: var(--nv-800); background: #fff; border: 1px solid #cfd6de; }
.sm .intl-btn-ghost:hover { background: var(--bg); }

/* ── 蜜罐字段（联系页）────────────────────────────────────────────────
 *
 * ⚠️ 这一条不是样式，是**功能**。
 *
 * contact.php 里那个 name="website" 的输入框是给爬虫填的蜜罐：
 * 服务端（Catalog.php / publicapi/Lead.php）只要看到它非空，就返回「已收到」
 * 但**不落库**。所以它一旦对真人可见，任何一个顺手填了公司官网的客户
 * 都会看到「提交成功」，而线索一条都不会进 CRM，日志里也没有痕迹。
 *
 * 隐藏规则原来只写在 site.css 里。2026-08-25 内页换壳之后 site.css 不再加载，
 * 这个框就露出来了 —— 全站唯一的转化页，静默丢线索。
 *
 * 所以这条规则必须留在 inner.css（内页唯一必然加载的样式表）里，
 * 而且不能只写 color。删 contact.php 里那个 div 之前，别删这一条。
 */
.sm .intl-hp {
  position: absolute !important;
  inset-inline-start: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ── 搜索页 ── */
.sm .intl-search-box { display: flex; gap: 8px; padding: 16px 0 20px; }
.sm .intl-search-box input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 14px;
  font-size: 15px;
  border: 1px solid #cfd6de;
  border-radius: 2px;
}
.sm .intl-search-box input:focus { border-color: var(--teal); outline: 2px solid rgb(10 143 166 / 18%); }
.sm .intl-facets { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.sm .intl-facet { padding: 4px 12px; font-size: 13px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.sm .intl-facet:hover { border-color: var(--teal); }
.sm .intl-facet[aria-current] { color: #fff; background: var(--nv-800); border-color: var(--nv-800); }
.sm .intl-search-res { padding-top: 6px; }
.sm .intl-sr { padding: 15px 0; border-bottom: 1px solid var(--line); }
.sm .intl-sr h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 600; }
.sm .intl-sr h3 a { color: var(--link); }
.sm .intl-sr h3 a:hover { text-decoration: underline; }
.sm .intl-sr p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.sm .intl-sr mark { padding: 0 2px; color: inherit; background: #fff3c4; }
.sm .intl-degraded { padding: 10px 14px; margin: 12px 0; font-size: 13px; color: var(--ink-2); background: #fff8ec; border-inline-start: 3px solid #e0a02a; }
.sm .intl-hint { font-size: 13px; color: #8a939c; }
.sm .intl-chip-x { padding: 3px 10px; font-size: 12.5px; color: var(--teal); border: 1px solid var(--teal); border-radius: 12px; }

/* ── 联系页 ── */
.sm .intl-ct-row { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.sm .intl-ct-side { display: flex; flex-direction: column; gap: 14px; }
.sm .intl-ct-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sm .intl-ct-f { display: flex; flex-direction: column; }
.sm .intl-ct-f label { margin-bottom: 5px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.sm .intl-ct-f input,
.sm .intl-ct-f select,
.sm .intl-ct-f textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 14px;
  border: 1px solid #cfd6de;
  border-radius: 2px;
}
.sm .intl-ct-f textarea { min-height: 118px; resize: vertical; }
.sm .intl-ct-f input:focus,
.sm .intl-ct-f select:focus,
.sm .intl-ct-f textarea:focus { border-color: var(--teal); outline: 2px solid rgb(10 143 166 / 18%); }
.sm .intl-ct-body { grid-column: 1 / -1; }
.sm .intl-req { color: #c0392b; }
.sm .intl-ct-note,
.sm .intl-ct-tip { margin: 4px 0 0; font-size: 12px; color: #8a939c; }
.sm .intl-ct-ok { padding: 12px 16px; font-size: 14px; color: #0a6b3d; background: #e9f5ee; border-inline-start: 3px solid #2f9e68; }
.sm .intl-ct-err { padding: 12px 16px; font-size: 14px; color: #a33227; background: #fdeceb; border-inline-start: 3px solid #c0392b; }
.sm .intl-ct-product { padding: 13px 15px; font-size: 13.5px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; }
.sm .intl-ct-pn { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 13px; color: var(--nv-800); }
.sm .intl-ct-pv { font-weight: 600; }
.sm .intl-ct-list { padding: 0; margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--ink-2); list-style: none; }
.sm .intl-ct-list a { color: var(--link); }

/* ── 受限资料页 ── */
.sm .intl-gate { max-width: 720px; text-align: center; }
.sm .intl-gate-doc { margin: 0 0 10px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12px; color: var(--ink-2); }
.sm .intl-gate-act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 14px; }
.sm .intl-gate-alt,
.sm .intl-gate-note { font-size: 13px; color: var(--ink-2); }
.sm .intl-gate-back { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--teal); }

/* ── 404 ── */
.sm .intl-404 { max-width: 660px; text-align: center; }
.sm .intl-404-code { margin: 0; font-size: 68px; font-weight: 800; line-height: 1; color: var(--line-2, #dfe3e8); letter-spacing: -0.03em; }
.sm .intl-404-lead { margin: 12px 0 0; font-size: 15px; color: var(--ink-2); }
.sm .intl-404-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 24px 0 18px; }
.sm .intl-404-links { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 13.5px; }
.sm .intl-404-links a { color: var(--link); }

/* ── 旧空状态（列表族已经换成 in-empty，这里给还没换的用）── */
.sm .intl-empty { padding: 40px 20px; font-size: 14.5px; color: var(--ink-2); text-align: center; }

@media (width <= 900px) {
  .sm .intl-ct-row { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (width <= 620px) {
  .sm .intl-ct-form { grid-template-columns: minmax(0, 1fr); }
  .sm .intl-404-code { font-size: 52px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §22  RTL（阿拉伯语 / 希伯来语 / 波斯语）
   2026-08-25 新增

   全站的 margin / padding / border / inset / text-align 都已经换成逻辑属性，
   所以 <html dir="rtl"> 一加，绝大部分布局自动镜像，这里**不需要**重复写一遍。

   这一节只收逻辑属性覆盖不到的那几类：

     1. float —— `float: inline-start` 在 Chromium 里不支持（实测 computed 变 none），
        只能保留物理值 + 在这里翻。
     2. 方向性图标 —— 箭头、面包屑分隔符、"更多 →" 这类。它们的含义是"向前"，
        在 RTL 里"向前"是向左，所以要水平翻转。
     3. transform 里的位移 —— translateX 不跟着书写方向走。
     4. 数字与代码 —— 型号、参数值、URL 在 RTL 段落里必须保持 LTR，
        否则 "ISO VG 46" 会显示成 "46 VG ISO"。这一条是工业品站的硬伤，
        没处理的话整张参数表都是乱的。
   ═══════════════════════════════════════════════════════════════════════════ */

[dir="rtl"] .sm .in-faq summary::after { float: left; }

/* 方向性图标整体镜像。用 :where() 让特异度为 0，不会盖掉组件自己的 transform */
[dir="rtl"] :where(.sm .in-crumb-sep,
                   .sm .sm-arrow,
                   .sm .in-more::after,
                   .sm .sm-card-more::after,
                   .sm .in-pager-prev svg,
                   .sm .in-pager-next svg) {
  transform: scaleX(-1);
}

/* 轮播与抽屉的位移方向 */
[dir="rtl"] .sm .sm-slider-track { direction: ltr; }   /* 轨道本身仍按 LTR 计算位移 */
[dir="rtl"] .sm .sm-slider-track > * { direction: rtl; }

/* ── 数字 / 型号 / 代码 在 RTL 段落里保持 LTR ──────────────────────────────
   工业品站没有这一条，参数表会全乱：
   "ISO VG 46" 在 RTL 上下文里按双向算法会被重排成 "46 VG ISO"，
   "-30 ~ 120 °C" 会变成 "°C 120 ~ 30-"。
   bdi 元素与 unicode-bidi: isolate 是标准解法。 */
[dir="rtl"] .sm :where(.in-attr-val,
                       .in-fact-v,
                       .in-id-v,
                       .sm-price,
                       code, kbd, samp, time,
                       .in-model, .in-sku) {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;   /* 隔离之后要显式贴回行尾 */
}

/* 表格里的数字列同理 */
[dir="rtl"] .sm .in-attrs td:nth-child(2),
[dir="rtl"] .sm .in-packs td { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* ── 阿拉伯语字体 ─────────────────────────────────────────────────────────
   拉丁字体渲染阿拉伯语会掉进系统兜底，字形连写经常断。
   这里只声明字体族，不加载字体文件 —— 装什么字体是部署时的事，
   把 woff2 塞进仓库会让每个客户的部署都多背几百 KB。 */
[dir="rtl"] .sm {
  font-family: "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic",
               "Segoe UI", Tahoma, sans-serif;
  /* 阿拉伯字形比拉丁高，行高不放宽会显得挤 */
  line-height: 1.9;
}

/* ── §23  答案块与第二单位（2026-08-25 GEO 深化）─────────────────────────
   答案块是全页第一段成句的文字，也是被 AI 摘录率最高的结构。
   视觉上要**看起来像结论**，不像导语：左侧一道实色竖条 + 略大的字号，
   让人一眼知道"这段是答案"。 */
.sm .in-answer {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-inline-start: 3px solid var(--teal, #0b6e77);
  background: var(--wash, rgba(11, 110, 119, .06));
  border-radius: 2px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink-2, #3d4950);
}
.sm .in-answer:first-child { margin-top: 0; }

/* 第二套单位。要明显比主值弱 —— 它是补充，不是并列 */
.sm .in-fact-alt {
  font-style: normal;
  font-size: .82em;
  opacity: .62;
  margin-inline-start: 4px;
  white-space: nowrap;
}

@media print {
  /* 打印时答案块要留着：采购把产品页附在申请单后面时，
     这一段正是审批人唯一会读的部分 */
  .sm .in-answer { border-inline-start-width: 2px; background: none; }
}

/* ── §24  对比矩阵（2026-08-25）────────────────────────────────────────────
   这一页的排版目标不是好看，是**被整段搬走时仍然可读**。
   所以：真表格、表头带单位、首行冻结、横向滚动包在自己的容器里。 */
.sm .in-cmp { margin: 0 0 40px; }
.sm .in-cmp-h { margin: 0 0 20px; }
.sm .in-cmp-h h1 { margin: 0 0 8px; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.25; }
.sm .in-cmp-lead { margin: 0; color: var(--ink-3, #6b7880); font-size: 15px; }

/* ⚠️ 横向滚动必须在这一层。8 列的表在手机上一定超宽，
      让 body 横向滚动会把整个页面拖歪，而且顶栏会跟着错位。 */
.sm .in-cmp-wrap {
  overflow-x: auto;
  border: 1px solid var(--line, #d9e0e1);
  border-radius: 3px;
  background: var(--surface, #fff);
  -webkit-overflow-scrolling: touch;
}
.sm .in-cmp-wrap:focus-visible { outline: 2px solid var(--teal, #0b6e77); outline-offset: 2px; }

.sm .in-cmp-t { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 640px; font-size: 14px; }

.sm .in-cmp-t thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2, #eff1ee);
  padding: 12px 14px; text-align: start; vertical-align: bottom;
  border-bottom: 1px solid var(--line-2, #c7cec8);
  font-weight: 600; line-height: 1.4; min-width: 132px;
}
.sm .in-cmp-t thead th a { color: inherit; text-decoration: none; }
.sm .in-cmp-t thead th a:hover { text-decoration: underline; }
.sm .in-cmp-t thead th em {
  display: block; font-style: normal; font-size: 12px; font-weight: 400;
  opacity: .6; margin-top: 2px;
}

/* 首列冻结：横向滚动时参数名要一直看得见，否则滚到第 6 列就不知道这一行是什么了 */
.sm .in-cmp-t th[scope="row"],
.sm .in-cmp-corner {
  position: sticky; inset-inline-start: 0; z-index: 1;
  background: var(--surface, #fff);
  text-align: start; font-weight: 500;
  padding: 11px 14px; min-width: 148px;
  border-inline-end: 1px solid var(--line, #d9e0e1);
}
.sm .in-cmp-corner { z-index: 3; background: var(--surface-2, #eff1ee); }

/* 单位放表头，格子里只放值 —— 每格重复单位会让抓取器自己去剥 */
.sm .in-cmp-t th[scope="row"] u {
  text-decoration: none; font-weight: 400; opacity: .55; font-size: 12.5px;
  margin-inline-start: 5px; white-space: nowrap;
}

.sm .in-cmp-t td {
  padding: 11px 14px; border-bottom: 1px solid var(--line, #d9e0e1);
  vertical-align: top; font-variant-numeric: tabular-nums;
}
.sm .in-cmp-t th[scope="row"] { border-bottom: 1px solid var(--line, #d9e0e1); }
.sm .in-cmp-t tbody tr:last-child td,
.sm .in-cmp-t tbody tr:last-child th { border-bottom: none; }

/* 速览级参数整行加重 —— 这几行是真正用来做判断的 */
.sm .in-cmp-t tr.in-cmp-key th[scope="row"],
.sm .in-cmp-t tr.in-cmp-key td { background: var(--teal-wash, rgba(11,110,119,.045)); }
.sm .in-cmp-t tr.in-cmp-key .in-cmp-v { font-weight: 600; }

/* 第二套单位在对比表里**另起一行**。
   产品页上并排是对的（一行一个参数，有空间），但对比表六列并排时
   "130 ≈ 603 SUS" 会把每一格撑到两倍宽，扫读成本陡增。 */
.sm .in-cmp-t .in-fact-alt {
  display: block; margin-inline-start: 0; margin-top: 2px;
  font-size: .8em; opacity: .55;
}

/* 有来源的格子给一个很轻的下划虚线，鼠标停上去看 title */
.sm .in-cmp-t td[title] .in-cmp-v {
  border-bottom: 1px dotted var(--line-2, #c7cec8);
  cursor: help;
}

.sm .in-cmp-t tfoot td { border-top: 1px solid var(--line-2, #c7cec8); border-bottom: none; padding: 12px 14px; }

/* ⚠️ 这里**不能**给 <td> 用 display:flex。
      flex 会把这个格子从表格布局里摘出去 —— 表现是六列的按钮全部堆到第一列，
      而 DOM 结构、列数、行数检查全部通过，只有真渲染才看得出来。
      要竖排就在格子里包一层 div，或者像这里让按钮自己 block。 */
.sm .in-cmp-act > .in-btn-sm { display: block; }
.sm .in-cmp-act > .in-btn-sm + .in-btn-sm { margin-top: 6px; }

.sm .in-btn-sm {
  display: inline-block; text-align: center; font-size: 13px; padding: 6px 10px;
  border: 1px solid var(--line-2, #c7cec8); border-radius: 2px;
  color: var(--ink-2, #414b47); text-decoration: none; white-space: nowrap;
}
.sm .in-btn-sm:hover { border-color: var(--teal, #0b6e77); color: var(--teal, #0b6e77); }
.sm .in-btn-pri { background: var(--teal, #0b6e77); border-color: var(--teal, #0b6e77); color: #fff; }
.sm .in-btn-pri:hover { opacity: .9; color: #fff; }

.sm .in-cmp-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-3, #6b7880); line-height: 1.7; }
.sm .in-cmp-back { margin: 20px 0 0; font-size: 14px; }

@media print {
  /* 采购会把对比表打印出来带去开会。冻结列在打印时是多余的 */
  .sm .in-cmp-wrap { overflow: visible; border: none; }
  .sm .in-cmp-t thead th, .sm .in-cmp-t th[scope="row"] { position: static; }
  .sm .in-cmp-t { font-size: 11px; min-width: 0; }
  .sm .in-cmp-act, .sm .in-cmp-back { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   §25  会员中心与登录（2026-08-26）

   这几页恒 noindex、永不落静态 —— 内容因人而异。样式跟着 inner.css 走，
   与产品页同一套壳，用户不会觉得"换了个网站"。

   ⚠️ 所有网格项都显式写了 min-width: 0。网格项默认 min-width: auto，
      长型号、长公司名、<pre> 里的工况描述都会把格子撑破 —— 表现是整页横向滚动，
      而排查时几乎不会想到是网格项的最小宽度。本项目在首页和 GEO 工作台各踩过一次。
   ═══════════════════════════════════════════════════════════════════════ */

.sm .gw-dim { color: var(--ink-2); font-size: 13px; }

/* ── 布局：侧栏 + 主区 ────────────────────────────────────────────── */
.sm .in-acct {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px; padding: 26px 0 60px; align-items: start;
}
.sm .in-acct-nav { min-width: 0; }
.sm .in-acct-main { min-width: 0; }
.sm .in-acct-main h1 { margin: 0 0 16px; font-size: 24px; }
.sm .in-acct-main h2 { margin: 26px 0 10px; font-size: 16px; }

.sm .in-acct-me {
  padding: 12px 14px; margin-bottom: 10px; border-radius: 3px;
  background: var(--bg-2); min-width: 0;
}
.sm .in-acct-me b { display: block; font-size: 14px; word-break: break-word; }
.sm .in-acct-me em { display: block; margin-top: 2px; font-size: 12px; font-style: normal; color: var(--ink-2); }
.sm .in-acct-nav nav { display: flex; flex-direction: column; }
.sm .in-acct-nav nav a {
  padding: 9px 14px; font-size: 14px; color: var(--ink);
  border-left: 3px solid transparent;
}
.sm .in-acct-nav nav a:hover { color: var(--teal); background: var(--bg); }
.sm .in-acct-nav nav a.is-on { font-weight: 600; color: var(--teal); border-left-color: var(--teal); background: var(--bg); }
.sm .in-acct-out { margin-top: 8px; color: var(--ink-2) !important; border-top: 1px solid var(--line); padding-top: 12px !important; }

/* ── 概览卡 ──────────────────────────────────────────────────────── */
.sm .in-acct-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.sm .in-acct-card {
  min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 3px;
  display: flex; flex-direction: column; gap: 2px;
}
.sm .in-acct-card:hover { border-color: var(--teal); }
.sm .in-acct-card b { font-size: 30px; line-height: 1.1; color: var(--nv-900); }
.sm .in-acct-card span { font-size: 13px; color: var(--ink-2); }

.sm .in-acct-list { margin: 0; padding: 0; list-style: none; }
.sm .in-acct-list li { padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.sm .in-acct-li-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sm .in-acct-at { font-size: 12px; color: var(--ink-2); }
.sm .in-acct-pns { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sm .in-acct-pns code {
  font-size: 12px; padding: 1px 7px; border-radius: 2px;
  background: var(--bg-2); word-break: break-all;
}
.sm .in-acct-pns em { font-size: 12px; font-style: normal; color: var(--ink-2); }

/* 状态：对客三档。CRM 的 invalid/dup 是内部判断，不映射到这里 */
.sm .in-acct-st { font-size: 12px; padding: 1px 9px; border-radius: 10px; white-space: nowrap; }
/* 「在线订购」标（2026-09-09）。只有订购单挂它，询价不挂 ——
   默认情形也贴标签，等于没标。用描边而不是实底：右边紧挨着的是状态标，
   两个实底色块并排会打架。 */
.sm .in-acct-kind {
  font-size: 12px;
  padding: 0 8px;
  white-space: nowrap;
  color: var(--teal-d);
  border: 1px solid var(--teal);
  border-radius: 10px;
}
/* 交期 / 收货地。一行里放两条，窄屏自动折行 */
.sm .in-inq-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.sm .in-inq-meta b { font-weight: 600; color: var(--ink); }
.sm .in-acct-st.is-received  { color: #5a6672; background: var(--bg-2); }
.sm .in-acct-st.is-following { color: #8a5a00; background: #fff5e0; }
.sm .in-acct-st.is-done      { color: #14663f; background: #e6f6ee; }

.sm .in-acct-empty { padding: 34px 20px; text-align: center; border: 1px dashed var(--line); border-radius: 3px; }
.sm .in-acct-empty p { margin: 0 0 10px; }
.sm .in-acct-warn { padding: 20px 22px; border-left: 3px solid var(--teal); background: var(--bg-2); border-radius: 0 3px 3px 0; }
.sm .in-acct-warn b { display: block; margin-bottom: 6px; }
.sm .in-acct-warn p { margin: 0 0 14px; line-height: 1.75; }
.sm .in-acct-ok  { padding: 9px 14px; color: #14663f; background: #e6f6ee; border-radius: 3px; }
.sm .in-acct-err { color: #b3261e; }

/* ── 询价列表 ────────────────────────────────────────────────────── */
.sm .in-inq { display: flex; flex-direction: column; gap: 14px; }
.sm .in-inq-c { min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 3px; }
.sm .in-inq-c > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
/* 表格自己横向滚，不能让 body 横向滚 —— 后者会把整页拖歪 */
.sm .in-inq-t { width: 100%; border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; }
.sm .in-inq-t th, .sm .in-inq-t td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sm .in-inq-t thead th { font-size: 12px; font-weight: 600; color: var(--ink-2); background: var(--bg-2); }
.sm .in-inq-t code { font-size: 12px; }
.sm .in-inq-note { margin-top: 12px; }
.sm .in-inq-note b { display: block; margin-bottom: 4px; font-size: 12px; color: var(--ink-2); }
.sm .in-inq-note pre {
  margin: 0; padding: 10px 12px; border-radius: 3px; background: var(--bg-2);
  font-family: inherit; font-size: 13px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;   /* 长工况描述要换行，不是横向滚 */
}
.sm .in-inq-foot { margin-top: 16px; }

/* ── 收藏 ────────────────────────────────────────────────────────── */
.sm .in-fav-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.sm .in-fav-c { position: relative; min-width: 0; }
.sm .in-fav-a { display: block; min-width: 0; }
.sm .in-fav-pn { margin: 4px 0; }
.sm .in-fav-pn code { font-size: 12px; padding: 1px 6px; background: var(--bg-2); border-radius: 2px; }
.sm .in-fav-x {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  font-size: 18px; line-height: 1; color: var(--ink-2); cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 50%;
}
.sm .in-fav-x:hover { color: #b3261e; border-color: #b3261e; }

/* ── 资料表单 ────────────────────────────────────────────────────── */
.sm .in-acct-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 20px; margin-top: 14px; }
.sm .in-acct-form > button { grid-column: 1 / -1; justify-self: start; }
.sm .in-acct-f { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sm .in-acct-f label { font-size: 13px; font-weight: 600; }
.sm .in-acct-f input {
  padding: 9px 11px; font-size: 14px; border: 1px solid var(--line); border-radius: 2px; min-width: 0;
}
.sm .in-acct-f input:focus { border-color: var(--teal); outline: none; }
.sm .in-acct-f input:disabled { color: var(--ink-2); background: var(--bg-2); }
.sm .in-acct-f small { font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.sm .in-acct-pw { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); }
.sm .in-acct-pwf { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.sm .in-acct-pwf input { padding: 9px 11px; font-size: 14px; border: 1px solid var(--line); border-radius: 2px; min-width: 0; }
.sm .in-acct-msg { font-size: 13px; }

/* ── 登录页 ──────────────────────────────────────────────────────── */
.sm .in-auth { padding: 40px 0 70px; }
.sm .in-auth-wrap { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 44px; align-items: start; }
















.sm .in-auth-why { min-width: 0; padding-top: 14px; }
.sm .in-auth-why h2 { margin: 0 0 12px; font-size: 16px; }
.sm .in-auth-why ul { margin: 0; padding-left: 20px; }
.sm .in-auth-why li { margin-bottom: 10px; line-height: 1.75; color: var(--ink-2); }

@media (max-width: 860px) {
  .sm .in-acct { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* 窄屏侧栏改横排：竖着排会把主内容顶到第二屏，用户以为页面是空的 */
  .sm .in-acct-nav nav { flex-direction: row; flex-wrap: wrap; gap: 2px; }
  .sm .in-acct-nav nav a { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 12px; }
  .sm .in-acct-nav nav a.is-on { border-left: 0; border-bottom-color: var(--teal); }
  .sm .in-acct-out { border-top: 0; padding-top: 8px !important; }
  .sm .in-auth-wrap { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sm .in-auth-card { padding: 22px 20px; }
}
.sm .in-inq-thin { margin: 6px 0 0; line-height: 1.7; }

/* 登录弹窗。
   .sm-modal-box 是给询价单那种宽面板用的（默认接近整屏宽），
   套在登录表单上会得到一个 1240px 宽的输入框 —— 一眼就是坏的。
   这里只收窄这一个弹窗，不动通用的 .sm-modal-box。 */



/* ═══════════════════════════════════════════════════════════════════════
   §26  联系 / 帮助与支持（2026-08-26 重写布局）

   此前这一页用 .intl-ct-row，而那个 class **同时**被当作页面两栏和表单内
   的字段对 —— 同一个名字两种用途。表现是：国家/地区 单独占半行、下面空出
   一大块，提交按钮又只有半宽。这里把页面栅格（in-sup）与字段栅格
   （intl-ct-form 保持不动）彻底分开，HTML 里的字段名一个都没动，
   表单提交链路零风险。

   ── 08-26 二次修正：页面栅格一开始叫 .in-ct，而 .in-ct 在本文件 §9
   早就存在，是产品详情页右栏那一小块联系方式（13px 小字）。同名的后果
   不是"样式串了一点"，是产品页侧栏被强行变成两列栅格、第二列 320px
   塞进 300px 的容器。改名 .in-sup-*（support / 帮助与支持）。

   教训：新版块起名前先 grep 一遍全文件。这个仓库里 .in-* 前缀已经很密，
   两个字母的缩写几乎一定撞。
   ═══════════════════════════════════════════════════════════════════════ */

.sm .in-sup { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: start; }
.sm .in-sup-main { min-width: 0; }
.sm .in-sup-side { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.sm .in-sup-box { padding: 18px 20px; border: 1px solid var(--line); border-radius: 3px; }
.sm .in-sup-box h2 { margin: 0 0 12px; font-size: 15px; }
.sm .in-sup-box p { margin: 0; }

.sm .in-sup-ways { margin: 0; padding: 0; list-style: none; }
.sm .in-sup-ways li { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; min-width: 0; }
.sm .in-sup-ways span { flex: 0 0 44px; font-size: 12px; color: var(--ink-2); }
.sm .in-sup-ways a { min-width: 0; font-weight: 600; word-break: break-all; }
.sm .in-sup-hours { margin-top: 10px !important; padding-top: 10px; font-size: 12px; color: var(--ink-2); border-top: 1px dashed var(--line); }

.sm .in-sup-need ol { margin: 0; padding-left: 18px; }
.sm .in-sup-need li { margin-bottom: 9px; font-size: 13px; line-height: 1.6; }
.sm .in-sup-need li b { display: block; }
.sm .in-sup-need li em { font-style: normal; color: var(--ink-2); }
.sm .in-sup-tip { margin-top: 10px !important; font-size: 12px; line-height: 1.7; color: var(--ink-2); }
.sm .in-sup-kb { font-weight: 600; }

/* ── 提交之后 / 全球仓储 ─────────────────────────────────────────── */
.sm .in-sup-sec { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.sm .in-sup-sec h2 { margin: 0 0 8px; font-size: 19px; }
.sm .in-sup-lead { margin: 0 0 18px; line-height: 1.75; color: var(--ink-2); }

.sm .in-sup-steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: none;
}
.sm .in-sup-steps li { min-width: 0; padding-top: 12px; border-top: 2px solid var(--teal); }
.sm .in-sup-k { font-size: 12px; font-weight: 700; color: var(--teal); }
.sm .in-sup-steps b { display: block; margin: 4px 0 5px; font-size: 14px; }
.sm .in-sup-steps p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-2); }

.sm .in-sup-hubs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.sm .in-sup-hub { min-width: 0; padding: 14px 16px; background: var(--bg); border-radius: 3px; }
.sm .in-sup-hub b { display: block; font-size: 15px; }
.sm .in-sup-hub em { display: block; margin: 2px 0 6px; font-style: normal; font-size: 12px; color: var(--ink-2); }
.sm .in-sup-hub span { font-size: 12px; line-height: 1.6; color: var(--ink-2); }

@media (max-width: 900px) {
  .sm .in-sup { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* 工况框与提交行跨满两列。
   不跨的话 textarea（六行高）会和矮矮的「国家/地区」并排，左列空出一大块，
   页面看起来像没写完；提交按钮也会莫名其妙只占半行宽。 */
.sm .intl-ct-f--wide { grid-column: 1 / -1; }
.sm .in-sup-submit { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 4px; }
.sm .in-sup-submit .intl-btn { min-width: 200px; }
.sm .in-sup-submit .intl-ct-note { margin: 0; }

/* ⚠️ .intl-ct-row 在这个模板里被用作两种东西：
      ① 页面两栏（表单 + 侧栏）—— 已经换成 .in-sup，不再用它
      ② 表单内的字段对（姓名|公司、邮箱|电话）
   而它的定义是 `minmax(0,1fr) 320px`，套到字段对上就得到
   「姓名框很窄、公司框很宽」这种一眼看去就没对齐的表单。
   限定在表单内改成等分两列；那条 1fr/320px 留给别的模板用。 */
.sm .intl-ct-form .intl-ct-row {
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}
@media (max-width: 900px) {
  .sm .intl-ct-form .intl-ct-row { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   特殊标记 / 生命周期 / 产品视频   2026-09-09
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 徽章排 ───────────────────────────────────────────────────────────────
   .in-hd-in 是 `flex + space-between`，徽章作为 h1 的兄弟元素默认会被推到
   右边去和标题并排。给它 flex-basis:100% 强制换行，落在标题正下方 ——
   徽章是标题的修饰，不是与标题并列的另一块内容。 */
.sm .in-badges {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  gap: 7px;
  margin: 10px 0 0;
}

.sm .in-badge {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  color: #334155;
  white-space: nowrap;
  background: #eef1f5;
  border: 1px solid #cfd8e3;
  border-radius: 4px;
}
.sm .in-badge i { font-size: 11px; font-style: normal; }

/* ── 营销位 ───────────────────────────────────────────────────────────────
   配色是按**白色页头**（.in-hd--plain，产品详情页用的就是它）调的，不是
   深蓝页头。之前这几条是浅色字压半透明白底，落在白页头上对比度只有 1.2~1.3，
   等于看不见 —— 现在统一改成「深色字 + 极浅同色底 + 一道同色描边」，
   每条都过 WCAG AA 4.5:1，底色之间又留了可分辨的色相差。
   底色接近白色，所以描边不能省，它才是徽章的轮廓。 */
.sm .in-badge.is-best   { color: #8a4b04; background: #fff1de; border-color: #f3d6ac; } /* 6.12 */
.sm .in-badge.is-new    { color: #0b5c6d; background: #e2f6fa; border-color: #b9e4ee; } /* 6.80 */
/* 「热门」故意留中性灰蓝：一排里已经有橙(爆款)/青(新品)/绿(授权)，
   再给它一个高饱和色就全是重点=没有重点。 */
.sm .in-badge.is-hot    { color: #334155; background: #eef1f5; border-color: #cfd8e3; } /* 9.14 */
.sm .in-badge.is-custom { color: #3b4a9c; background: #eceffb; border-color: #c8d0ef; } /* 6.92 */
/* 授权代理是这一排里最值钱的一个信号：海外买家判断「找不找你买」，
   看的就是你是不是原厂授权。用绿色单独拉开，不和其它营销标签混色。 */
.sm .in-badge.is-auth   { color: #136c41; background: #e3f7ec; border-color: #bde9d1; } /* 5.78 */

/* ── 风险位 ───────────────────────────────────────────────────────────────
   刻意不用和营销位一样的观感：这三个标签的作用是让人**停下来读**，
   而不是被当成卖点扫过去。红/黄的**实心饱和底** + 深色字，和上面那排
   「极浅底 + 描边」在视觉重量上拉开一个档位。
   这三条本来就是深色字压不透明浅底，白页头上对比度 8.49 / 9.32 / 9.79，
   已经达标，本次不动。 */
.sm .in-badge--warn { font-weight: 700; }
.sm .in-badge.is-stop   { color: #3a0d0d; background: #ff9d9d; border-color: #f07575; }
.sm .in-badge.is-repack { color: #402a05; background: #ffcf7a; border-color: #eeb54c; }
.sm .in-badge.is-haz    { color: #402a05; background: #ffd84d; border-color: #e7bd21; }

/* ── 状态提示条 ───────────────────────────────────────────────────────── */
.sm .in-note {
  padding: 14px 16px;
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.65;
  border: 1px solid;
  border-radius: 8px;
  /* 左侧一道粗边：这几条是要被读的，不是背景装饰 */
  border-inline-start-width: 4px;
}
.sm .in-note b { display: block; margin-bottom: 3px; font-size: 14px; }
.sm .in-note p { margin: 0; }

.sm .in-note--stop   { color: #7a1c1c; background: #fff2f2; border-color: #f3b7b7; }
.sm .in-note--repack { color: #6b4708; background: #fff8e8; border-color: #f0d79a; }
.sm .in-note--haz    { color: #6b4708; background: #fffbe6; border-color: #f2dd8a; }
.sm .in-note--custom { color: #1b4f8a; background: #f1f7ff; border-color: #bcd8f5; }

/* 替代型号卡：停产提示里最重要的东西，做成可点的一整块而不是一句话里的链接 ——
   这是这一页唯一还能走通的路径，点击区域就该是整块。 */
.sm .in-note-succ {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  margin-top: 12px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid #f3b7b7;
  border-radius: 6px;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.sm .in-note-succ:hover { border-color: var(--teal); box-shadow: 0 2px 10px rgb(0 0 0 / 8%); }
.sm .in-note-succ img { flex: 0 0 46px; width: 46px; height: 46px; object-fit: contain; }
.sm .in-note-succ span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sm .in-note-succ em { font-size: 11.5px; font-style: normal; color: var(--ink-2); }
.sm .in-note-succ b { margin: 0; font-size: 14px; color: var(--nv-800); }
.sm .in-note-succ u { font-size: 12px; color: var(--ink-2); text-decoration: none; }
.sm .in-note-succ .sm-arr { margin-inline-start: auto; font-size: 20px; color: var(--teal); }

/* ── 产品视频 ─────────────────────────────────────────────────────────────
   跨列铺满图廊那一栏。aspect-ratio 先把位置占住，视频元数据回来之前
   不会有一次二次布局 —— 这一页 CLS 的另一个来源。 */
.sm .in-video { grid-column: 1 / -1; margin: 12px 0 0; }
.sm .in-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0d1b2f;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.sm .in-video figcaption { margin-top: 6px; font-size: 12px; color: var(--ink-2); }
/* <video> 的兜底文案。只有不支持该元素的浏览器才会渲染它，
   现代浏览器根本不会走到这条规则 —— 写它是为了那种环境下不是一块空白。 */
.sm .in-video-fb { padding: 14px; margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.sm .in-video-fb a { color: var(--link); }

/* 正文里的产品视频（2026-10-12）：上传了视频就自动出现，居中、最宽 960px */
.sm .in-pvideo { max-width: 960px; margin: 6px auto 0; }
.sm .in-pvideo video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0d1b2f;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgb(18 41 79 / 14%);
}

@media (max-width: 560px) {
  .sm .in-badge { font-size: 11.5px; padding: 2px 8px; }
  .sm .in-note { padding: 12px 13px; font-size: 13px; }
  .sm .in-note-succ img { flex-basis: 38px; width: 38px; height: 38px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   行业解决方案：头图 / 正文 / 视频   2026-09-09
   工况页（/applications/<slug>）此前只有"页头一句导语 + 产品列表"，
   这三块是把它从筛选页变成真正的行业页所需要的最小结构。
   ═════════════════════════════════════════════════════════════════════════ */

/* 头图：aspect-ratio 先把位置占住，图到之前下面的正文不会被顶下去（CLS） */
.sm .in-hero { margin: 0; }
.sm .in-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  border-radius: 10px;
}

/* ⚠️ 必须写成 .in-sec.in-sec--body（两个类）才生效。
   上面第 317 行有 `.sm .in-sec:first-child { padding-top: 0 }`，特异度 (0,3,0)；
   而 `.sm .in-sec--body` 只有 (0,2,0)，会被它压成 0 ——
   行业页的正文正好是头部深色带之后的第一个区块，于是标题直接贴着色带，
   右侧目录卡也顶到边上，整页看着像没排版。
   叠一个类把特异度提到 (0,3,0)，同分时后写的赢。 */
.sm .in-sec.in-sec--body { padding-top: 44px; }

/* ── 知识库详情：与行业页共用 .in-solution 两栏 ─────────────────────────
   知识库文章是全站最长的内容，也是唯一读者会「读到一半跳着看」的地方，
   目录不是装饰。以下几条把原来写在模板里的内联 style 收拢过来 ——
   内联样式改一次要翻模板，而且同类页面很容易改漏一个。 */
/* 2026-09-09：容器宽度交给 .in-solution（主栏 + 侧栏）统一决定并居中。
   原来这里沿用 .in-art 的 max-width:74ch，两栏被压在左半屏，右边空一大片。 */
.sm .in-art--kb { max-width: var(--doc-w); margin-inline: auto; padding-top: 30px; }
.sm .in-kb-h1 {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.32;
  color: var(--ink);
}
/* 结论段：它与 JSON-LD 的 acceptedAnswer.text 是同一段文字，
   视觉上必须一眼认出「这就是答案」，所以比正文再大半号 */
.sm .in-kb-answer { font-size: 15.5px; line-height: 1.85; }
.sm .in-sec--kbbody { padding-top: 24px; }
/* 详情页的两栏比行业页略窄：这里主栏上方已经有 h1 与结论段，
   正文本身不需要再占满 */
.sm .in-art--kb .in-solution { gap: 40px; }

/* ── 知识库列表 ─────────────────────────────────────────────────────────
   网格原来写在模板的 inline style 里（minmax(300px,1fr)），
   一是改样式要翻模板，二是 1fr 在条目少的时候会把卡片拉得很宽 ——
   今天在首页品牌墙和最近浏览上已经踩过两次同样的坑。
   定宽上限 + justify-content 才是稳的写法。 */
.sm .in-cards--kb {
  grid-template-columns: repeat(auto-fill, minmax(300px, 380px));
  justify-content: start;
}
/* ── 新闻：头条位 ────────────────────────────────────────────────────────
   列表第一条放大。图更大、摘要给足行数、标题升一号 ——
   每条长得一样时读者只会扫标题，最新那条并不会被"看见"。
   不需要运营勾"置顶"，排序本身决定谁在头条位。 */
.sm .in-news-i--lead { align-items: stretch; padding: 20px 0 24px; }
.sm .in-news-i--lead .in-news-th {
  flex: 0 0 340px;
  aspect-ratio: 16 / 10;
}
.sm .in-news-i--lead .in-news-t { font-size: 20px; line-height: 1.4; }
.sm .in-news-i--lead .in-news-s {
  font-size: 14.5px;
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

/* ── 新闻：上一篇 / 下一篇 ───────────────────────────────────────────────
   两栏等宽。缺一侧时用 .in-pn-i--none 占位，
   否则「下一篇」会滑到左边，读者会误点成上一篇。 */
.sm .in-pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.sm .in-pn-i {
  display: block;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: border-color .18s, box-shadow .18s;
}
.sm a.in-pn-i:hover { border-color: var(--teal); box-shadow: 0 6px 18px rgb(16 40 80 / 8%); }
.sm .in-pn-i--none { background: none; border-color: transparent; }
.sm .in-pn-l {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-2);
}
.sm .in-pn-i--next { text-align: end; }
.sm .in-pn-i b { font-size: 14.5px; line-height: 1.55; color: var(--nv-800); }
.sm a.in-pn-i:hover b { color: var(--teal-d); }

@media (max-width: 640px) {
  .sm .in-pn { grid-template-columns: 1fr; }
  .sm .in-pn-i--none { display: none; }
  .sm .in-pn-i--next { text-align: start; }
  .sm .in-news-i--lead .in-news-th { flex-basis: auto; }
}

/* 条目数：跟在分组标题后面的小字，不抢标题的重量 */
.sm .in-group-n {
  margin-inline-start: 8px;
  font-size: 12.5px;
  font-style: normal;
  font-weight: 600;
  color: var(--ink-2);
  vertical-align: 2px;
}
/* 正文比产品描述宽一点，但仍然收在 82ch —— 满屏 1400px 的通栏长文一行八十多个字，
   读到行尾找不回下一行的行首，这是排版上最基本的一条 */
.sm .in-rt--wide { max-width: 72ch; font-size: 15.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   行业解决方案页：正文 + 右侧栏      2026-09-09
   ---------------------------------------------------------------------------
   改之前是一条 82ch 的单栏，1600px 以上的屏幕右边空掉一半，而正文是三段
   没有层次的文字墙。客户点进「汽车制造」要在几秒内判断"你懂不懂我的工况"，
   一屏纯文字回答不了。

   ⚠️ 这里的所有排版都**按语义标签写**，不依赖 class。原因：正文是运营在
   富文本编辑器里写的，白名单只放行 h2/h3/p/ul/li/strong/figure/video，
   他们既加不了 class 也不该被要求懂 class。样式必须对"任何合规的 HTML"成立。
   ═══════════════════════════════════════════════════════════════════════════ */

/* 整块定宽并居中。sm-wrap 是 1400px，两栏若铺满，主栏有 1044px 而正文
   只有 72ch（约 560px）—— 文字与侧栏之间会空出四百多像素。
   把两栏整体收到 980px：主栏 ~664px 正好是一行 40 出头个汉字的舒适宽度，
   侧栏紧跟其后，左右余白对称。 */
.sm .in-solution {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 44px;
  align-items: start;
  max-width: var(--doc-w);
  margin-inline: auto;
}
/* 没有侧栏时不该还占 980px：正文自己收窄到阅读宽度 */
.sm .in-solution--single { display: block; max-width: var(--doc-w-narrow); }
.sm .in-solution-main { min-width: 0; }
/* 主栏本身已经是阅读宽度，正文不必再叠一层 72ch 的上限 ——
   两个上限叠在一起就是「文字左边一条、右边一条空白」的来源。
   78ch 只在窄屏两栏折叠成单栏时才起作用。 */
.sm .in-solution-main .in-rt--wide { max-width: 78ch; }

/* 侧栏跟随滚动。96px = 吸顶导航高度 + 一点呼吸，与 h2[id] 的
   scroll-margin-top 是同一个数，锚点跳过去不会被导航压住 */
.sm .in-solution-rail {
  position: sticky;
  /* +16px 是呼吸量：正好贴着导航下沿会显得卡片被"焊"在上面 */
  top: calc(var(--sticky-h, 124px) + 16px);
  display: grid;
  gap: 14px;
}

/* ── 目录卡 ─────────────────────────────────────────────────────────────── */
.sm .in-toc-card {
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.sm .in-toc-card > b {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-2);
}
.sm .in-toc-card ul { padding: 0; margin: 0; list-style: none; }
.sm .in-toc-card li { margin: 0 0 8px; }
.sm .in-toc-card li:last-child { margin-bottom: 0; }
.sm .in-toc-card a {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--nv-800);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 10px;
  display: block;
  transition: border-color .15s, color .15s;
}
.sm .in-toc-card a:hover { color: var(--teal-d); border-left-color: var(--teal); }

/* ── 询价卡：这一页唯一的转化点 ─────────────────────────────────────────── */
.sm .in-ask-card {
  padding: 18px;
  color: #fff;
  background: var(--nv-800);
  border-radius: 3px;
}
.sm .in-ask-card > b { display: block; margin-bottom: 8px; font-size: 15px; }
.sm .in-ask-card > p {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: rgb(255 255 255 / 78%);
}
/* ⚠️ .sm-btn 在深底上要显式给色：它的默认态是浅底深字，
   直接放进这张深色卡片里会糊成一块 */
.sm .in-ask-card .sm-btn {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
  text-decoration: none;
}
.sm .in-ask-card .sm-btn:hover { background: var(--teal-d); border-color: var(--teal-d); }

/* ── 正文层次：让三段文字墙变得可扫 ─────────────────────────────────────── */
/* h2 之间加一条分隔线比单纯拉大 margin 有效得多 —— 读者需要的是
   "这里换话题了"这个信号，而不是多一点空白。首段不加，避免与上方重复。 */
.sm .in-rt--wide > h2 {
  margin: 38px 0 12px;
  padding-top: 24px;
  font-size: 20px;
  line-height: 1.35;
  border-top: 1px solid var(--line);
}
.sm .in-rt--wide > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* h2 后面紧跟的那一段是"导语"——通常是这一节最值得读的一句
   （比如"食品级不等于能用"）。放大、加左侧色条，让它从列表里跳出来。 */
.sm .in-rt--wide > h2 + p {
  padding-left: 14px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink);
  border-left: 3px solid var(--teal);
}

/* 列表：自定义标记。默认的圆点在 15px 正文里太轻，
   而这些条目是"判断依据"，值得有点重量 */
.sm .in-rt--wide > ul { padding-inline-start: 0; margin: 14px 0 16px; list-style: none; }
.sm .in-rt--wide > ul > li {
  position: relative;
  padding-inline-start: 20px;
  margin-bottom: 9px;
  line-height: 1.8;
}
.sm .in-rt--wide > ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 4px;
  top: .72em;
  width: 5px;
  height: 5px;
  background: var(--teal);
  border-radius: 50%;
}

/* 窄屏退回单栏：目录挪到正文上方，仍然有用（长页面尤其）；
   询价卡跟到正文之后 —— 读完再问，顺序是对的 */
@media (max-width: 1100px) {
  .sm .in-solution { display: block; }
  .sm .in-solution-rail {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 26px;
  }
  .sm .in-toc-card { order: -1; margin-bottom: 4px; }
}
@media (max-width: 760px) {
  .sm .in-rt--wide > h2 { margin-top: 30px; padding-top: 20px; font-size: 18px; }
  .sm .in-rt--wide > h2 + p { font-size: 15px; }
}


.sm .in-sec--video { padding-top: 6px; }

/* ── 富文本里的图文块与视频 ─────────────────────────────────────────────
   白名单 2026-09-09 放开了 figure/figcaption/video/source，样式得跟上，
   否则运营插进去的图注就是一行和正文一样的裸字。 */
.sm .in-rt figure { margin: 18px 0; }
.sm .in-rt figure img { margin: 0; border-radius: 6px; }
.sm .in-rt figcaption {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-2);
  text-align: center;
}
.sm .in-rt video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin: 18px 0;
  background: #0d1b2f;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.sm .in-rt figure video { margin: 0; }

@media (max-width: 760px) {
  .sm .in-hero img { aspect-ratio: 16 / 9; border-radius: 6px; }
  .sm .in-rt--wide { font-size: 14.5px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   新闻资讯与独立单页   2026-09-09
   ═════════════════════════════════════════════════════════════════════════ */

/* ── 新闻列表 ─────────────────────────────────────────────────────────────
   一列而不是网格：新闻是"扫标题、看日期、挑一条读"，
   三列卡片会把摘要压成两行省略号，那正好毁掉这一页存在的理由。 */
.sm .in-news { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; }

.sm .in-news-i {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 18px;
  padding: 16px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
/* 没有配图时标题区占满整行，不留一块 200px 的空白 */
.sm .in-news-i:not(:has(.in-news-th)) { grid-template-columns: minmax(0, 1fr); }
.sm .in-news-i:hover {
  border-color: var(--teal);
  box-shadow: 0 4px 16px rgb(0 0 0 / 7%);
  transform: translateY(-1px);
}

.sm .in-news-th {
  display: block;
  overflow: hidden;
  background: var(--bg);
  border-radius: 7px;
  aspect-ratio: 16 / 10;   /* 先占位，图到之前下面的卡片不会被顶下去 */
}
.sm .in-news-th img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sm .in-news-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sm .in-news-d { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sm .in-news-t { font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--nv-800); }
.sm .in-news-i:hover .in-news-t { color: var(--teal-d); }
.sm .in-news-s {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  font-style: normal;
  line-height: 1.7;
  color: var(--ink-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.sm .in-news-more { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--link); }
.sm .in-news-more .sm-arr { font-size: 15px; }

/* ── 文章正文页（新闻详情 + 独立单页共用）───────────────────────────────── */
/* 2026-09-09：与知识库同一套宽度。82ch 是「单栏正文」时代的遗留值，
   加了右侧栏之后它把整块内容锁在左半屏 —— 这就是页面看上去「全靠左」的原因。 */
.sm .in-art--doc { max-width: var(--doc-w); margin-inline: auto; padding-top: 26px; }
/* 没有侧栏（正文短、h2 不足 3 个）时按纯阅读宽度居中，而不是留半屏空白 */
.sm .in-art--doc.in-art--narrow { max-width: var(--doc-w-narrow); }
.sm .in-art-h1 { margin: 0 0 12px; font-size: 26px; line-height: 1.32; color: var(--ink); }
/* 摘要用比正文大一号的字：它是这一页的结论段，也是 meta description 与
   .md 摘要用的同一段文字，视觉上就该比正文重 */
.sm .in-art-lead {
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink);
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--teal);
}
.sm .in-art-cover { margin: 0 0 20px; }
.sm .in-art-cover img { display: block; width: 100%; border-radius: 10px; }
.sm .in-art-empty { padding: 18px 0; font-size: 14.5px; color: var(--ink-2); }

.sm .in-art-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding-top: 22px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
.sm .in-art-back { font-size: 14px; color: var(--link); text-decoration: none; }
.sm .in-art-back:hover { text-decoration: underline; }
.sm .in-art-help { flex: 1; min-width: 220px; font-size: 13.5px; color: var(--ink-2); }

@media (max-width: 760px) {
  /* 窄屏改成上下：200px 的缩略图 + 文字并排，文字栏只剩一百多像素 */
  .sm .in-news-i { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sm .in-news-th { aspect-ratio: 16 / 9; }
  .sm .in-news-t { font-size: 16px; }
  .sm .in-art-h1 { font-size: 22px; }
}

/* ── 单页目录（帮助与支持、条款这类查阅型页面）2026-09-09 ─────────────────
   新闻不渲染这一块：叙述型内容加目录反而碍事。
   少于 3 个 h2 时后端返回空 toc，这一块整块不出现。 */
.sm .in-toc {
  padding: 14px 18px;
  margin: 0 0 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.sm .in-toc-h { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.02em; }
.sm .in-toc ul { padding: 0; margin: 0; list-style: none; }
.sm .in-toc li { margin-bottom: 5px; font-size: 13.5px; line-height: 1.6; }
.sm .in-toc li:last-child { margin-bottom: 0; }
/* h3 缩进一级：目录要能看出层级，否则八条平铺等于没有结构 */
.sm .in-toc-l3 { padding-inline-start: 16px; font-size: 13px; }
.sm .in-toc a { color: var(--link); text-decoration: none; }
.sm .in-toc a:hover { text-decoration: underline; }

/* 锚点跳转时标题不要贴在吸顶导航下面被挡住 */
.sm .in-rt h2[id],
.sm .in-rt h3[id] { scroll-margin-top: calc(var(--sticky-h, 124px) + 20px); }

/* ── 正文里的按钮链接   2026-09-09 ───────────────────────────────────────
   运营在后台用「插入按钮」工具条生成，保存时 IntlAdmin 把 class 收成
   sm-btn / sm-btn--dash 两档枚举，写别的一律退回普通链接。

   ⚠️ `.in-rt a` 那条规则给所有正文链接上了色和下划线（特异性 0,2,1），
      而 .sm-btn 是 0,1,0 —— 不在这里显式压回去，按钮会变成一个
      带下划线的蓝色方块。同样的坑 .in-empty a 那里已经踩过一次（见该处注释）。 */
.sm .in-rt a.sm-btn { color: #fff; text-decoration: none; }
.sm .in-rt a.sm-btn:hover { text-decoration: none; }
/* 段落里只有一个按钮时，让它自己占一行并留出上下气口 */
.sm .in-rt p > a.sm-btn:only-child { margin: 6px 0; }

/* 轻量按钮：圆角虚线。
   用途是**另一条动线**上的动作 —— 帮助与支持页上的「品牌合作」就是典型：
   这一页的读者是采购，主动作是询价与联系；品牌方入驻是另一批人的另一条路。
   实心按钮会把采购往错的方向引，虚线在视觉上说清"这条不是给你的，
   但如果你是那类人，在这儿"。所以它必须**明显比主按钮弱**，不能只是换个颜色。 */
.sm .in-rt a.sm-btn--dash,
.sm a.sm-btn--dash {
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nv-800);
  background: transparent;
  border: 1px dashed #c3cbd4;
  border-radius: 999px;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
.sm .in-rt a.sm-btn--dash:hover,
.sm a.sm-btn--dash:hover {
  color: var(--teal-d);
  background: #f3f8fa;
  border-color: var(--teal);
  border-style: solid;   /* 悬停时实线：告诉用户"这确实是个可点的东西" */
}


/* ── 品牌分组列表（A–Z 各组内）2026-09-09 ─────────────────────────────────
   原来是 .in-tree-k 的一行行纯文字链接。文字在"已经知道品牌名"时效率最高，
   但丢掉了品牌页最该做的事：让人**认出来**。折中成带小 logo 的紧凑行 ——
   logo 只占 44px，一行仍能排 3–4 个，1000 个品牌也不会拖慢页面（图片全部 lazy）。 */
.sm .in-brand-l {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 8px;
}
.sm .in-brand-i {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background 0.14s, border-color 0.14s;
}
/* 默认无边框、悬停才出现：几十上百行都描边会让整页变成一张网格纸 */
.sm .in-brand-i:hover { background: #fff; border-color: var(--line); }

.sm .in-brand-th {
  display: flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 34px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.sm .in-brand-th img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 没有 logo 时的首字母占位 */
.sm .in-brand-th i {
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
  color: var(--nv-700);
}

.sm .in-brand-b { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* 品牌名单行截断：德语全称很长，换行会让这一排高低不齐 */
.sm .in-brand-b b {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--link);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sm .in-brand-i:hover .in-brand-b b { text-decoration: underline; }
.sm .in-brand-b em { font-size: 11.5px; font-style: normal; color: var(--ink-2); }

@media (max-width: 560px) {
  .sm .in-brand-l { grid-template-columns: minmax(0, 1fr); }
}

/* ── A–Z 索引：报纸式多栏（2026-09-21）──────────────────────────────────
   原来每个字母组独占一整行、组内再横排：品牌少的时候（每组 1–5 个）
   满屏都是留白，25 个字母要滚好几屏。改成多栏自上而下排，读法和纸质目录一致。

   为什么用 CSS columns 而不是 grid：各组高度差很大（A 组可能 100 个、X 组 0 个），
   grid 按行对齐会在矮组下面留出大块空洞；columns 是按内容流式填满的。
   断栏规则（实测过，不是想当然）：
   · Chrome 在多栏里**不认 h2 的 break-after: avoid** —— 只靠它的话，
     字母标题会孤零零留在上一栏底部，它的品牌跑到下一栏顶上。
   · 所以普通组整组 break-inside: avoid，标题和品牌永远在一起；
   · 超过 12 个品牌的大组（.is-long）才允许跨栏续排 —— 否则一个 100 行的组
     会把一栏撑得奇长、其它栏全空。大组续排时标题最多只孤立一次，可以接受。 */
.sm .in-az {
  column-width: 230px;
  column-gap: 32px;
  padding-top: 22px;
}
.sm .in-az-g { padding-bottom: 16px; break-inside: avoid; }
.sm .in-az-g.is-long { break-inside: auto; }
.sm .in-az-g > h2 {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0 6px;
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--nv-800);
  border-bottom: 2px solid var(--nv-800);
  break-after: avoid;
  break-inside: avoid;
  /* 让开主导航 + 字母条两层吸顶，再留一点呼吸。
     原来没有这一行：点字母后标题正好藏在吸顶导航底下，看起来像"没跳" */
  scroll-margin-top: calc(var(--sticky-h, 124px) + var(--az-h, 64px) + 14px);
}
.sm .in-az-g > h2 small { font-size: 12px; font-weight: 500; color: var(--ink-2); }
/* 从字母条跳过来时闪一下，告诉用户"是这一组" */
.sm .in-az-g > h2:target { animation: in-az-flash 1.4s ease-out; }
@keyframes in-az-flash {
  0%, 35% { color: var(--teal); border-bottom-color: var(--teal); }
  100%    { color: var(--nv-800); border-bottom-color: var(--nv-800); }
}
@media (prefers-reduced-motion: reduce) {
  .sm .in-az-g > h2:target { animation: none; color: var(--teal); }
}

/* 栏内的品牌行：单列纵排，行本身不跨栏断开 */
.sm .in-az .in-brand-l { display: flex; flex-direction: column; gap: 2px; }
.sm .in-az .in-brand-i { padding: 6px 8px; margin: 0 -8px; break-inside: avoid; }

/* 顶部：一句说明 + 筛选框 */
.sm .in-az-top {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 4px;
}
.sm .in-az-intro { flex: 1 1 420px; margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.sm .in-az-intro a { font-weight: 600; color: var(--teal); text-decoration: none; }
.sm .in-az-intro a:hover { text-decoration: underline; }
.sm .in-az-q { flex: 0 1 320px; }
.sm .in-az-q input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.sm .in-az-q input:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgb(10 143 166 / 15%); }
@media (max-width: 760px) {
  .sm .in-az-q { flex-basis: 100%; }
}
/* 品牌搜索框用品牌青色突出（2026-10-29）：与顶栏主搜索框同一套视觉 ——
   青色描边 + 右侧青色放大镜块。这里是边输入边筛选，没有提交动作，
   所以放大镜块是 label 的伪元素（纯装饰、不可点、不进 Tab 顺序）。 */
.sm .in-az-q { position: relative; flex: 0 1 380px; }
.sm .in-az-q input {
  height: 46px;
  padding: 0 60px 0 16px;
  font-size: 14px;
  background: #fff;
  border: 2px solid var(--teal);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgb(10 143 166 / 12%);
  transition: box-shadow .18s, background .18s;
}
.sm .in-az-q input::placeholder { color: #7b8794; }
.sm .in-az-q input:hover { box-shadow: 0 6px 18px rgb(10 143 166 / 18%); }
.sm .in-az-q input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgb(10 143 166 / 18%); }
.sm .in-az-q::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  content: '';
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat center;
  border-radius: 0 8px 8px 0;
}
/* 浏览器自带的「清空 ×」挪开一点，别贴在青色块上 */
.sm .in-az-q input::-webkit-search-cancel-button { margin-right: 2px; cursor: pointer; }
@media (max-width: 760px) {
  .sm .in-az-q { flex-basis: 100%; }
}

/* 筛选无结果：给出路，而不是一句"无结果" */
.sm .in-az-empty {
  max-width: 560px;
  padding: 28px 24px;
  margin: 26px auto 8px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
  text-align: center;
  background: var(--bg);
  border-radius: 6px;
}
.sm .in-az-empty p { margin: 0 0 8px; }
.sm .in-az-empty b { color: var(--ink); }
.sm .in-az-cta {
  display: inline-block;
  padding: 9px 20px;
  margin-top: 6px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: var(--teal);
  border-radius: 4px;
}
.sm .in-az-cta:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }

/* ═══════════════════════════════════════════════════════════════════════════
 * 在线订购 /{lang}/order（2026-09-09）
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * 为什么不套 .in-solution 的 980px 两栏：这一页的主体是一张 5 列的表格，
 * 主栏只有 664px 时「备注」列会被压到两三个字一行，客户写不下东西。
 * 表单页也不需要侧栏目录 —— 它不是拿来读的。
 * 所以单独给一个 1040px 的居中容器：表格舒展，左右余白仍然对称。
 *
 * 表格在窄屏不横向滚动，而是整行重排成「标签 + 输入框」的卡片
 * （见文件末尾的媒体查询）。手机上左右拖着填表是最劝退的交互之一。
 */
/* 2026-09-21：不再单独收窄居中 —— 页头标题是贴着 .sm-wrap 左边的，
   内容区另起一个居中容器会让标题和表单左边缘错开 60px。与页头同宽对齐。 */
.sm .in-order { padding: 26px 0 8px; }

/* 2026-09-21：表单 + 右侧跟随卡片两栏。表单列约 900px，五列表格仍然舒展 */
.sm .in-order-lay {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 36px;
  align-items: start;
}
.sm .in-order-f { min-width: 0; }
.sm .in-order-side {
  position: sticky;
  top: calc(var(--sticky-h, 124px) + 16px);
  display: grid;
  gap: 14px;
}
.sm .in-order-card {
  padding: 16px 18px;
  font-size: 13.5px;
  line-height: 1.7;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.sm .in-order-card > b { display: block; margin-bottom: 10px; font-size: 14.5px; color: var(--ink); }
.sm .in-order-card--sum { background: #fff; border-top: 3px solid var(--teal); }
.sm .in-order-card--sum dl { margin: 0 0 12px; }
.sm .in-order-card--sum dl > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.sm .in-order-card--sum dt { color: var(--ink-2); }
.sm .in-order-card--sum dd { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--nv-800); }
.sm .in-order-card-empty { margin: -4px 0 10px; font-size: 12.5px; color: var(--ink-2); }
.sm .in-order-card--sum .sm-btn { display: flex; justify-content: center; width: 100%; padding: 11px 16px; }

/* 流程：带序号的三步，告诉客户「按下提交之后会发生什么」 */
.sm .in-order-steps { padding: 0; margin: 0; list-style: none; counter-reset: od; }
.sm .in-order-steps li {
  position: relative;
  padding: 0 0 10px 32px;
  color: var(--ink-2);
  counter-increment: od;
}
.sm .in-order-steps li:last-child { padding-bottom: 0; }
.sm .in-order-steps li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  content: counter(od);
  background: var(--nv-700);
  border-radius: 50%;
}
.sm .in-order-card--more p { margin: 0 0 8px; color: var(--ink-2); }
.sm .in-order-card--more a { font-weight: 600; color: var(--teal-d); text-decoration: none; }
.sm .in-order-card--more a:hover { text-decoration: underline; }

.sm .in-order-paste { margin-top: 10px; }
.sm .in-order-paste span { margin-right: 2px; }

@media (max-width: 1100px) {
  .sm .in-order-lay { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  /* 窄屏：卡片排到表单后面；摘要卡里的提交按钮与表单底部重复，藏掉 */
  .sm .in-order-side { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .sm .in-order-card--sum { display: none; }
}

/* 提交结果条。两条都用左侧色条而不是整块底色：
   整块彩色底会把它变成页面上最重的一块，而它只是一句反馈。 */
.sm .in-order-ok,
.sm .in-order-err {
  margin: 0 0 22px;
  padding: 13px 16px;
  font-size: 14.5px;
  line-height: 1.7;
  border-radius: 3px;
  border-inline-start: 3px solid var(--teal);
  background: var(--bg);
}
.sm .in-order-err { border-inline-start-color: #c0392b; }

.sm .in-order-sec { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--line); }
.sm .in-order-sec:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.sm .in-order-sec > h2 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.sm .in-order-h { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; }
.sm .in-order-h > h2 { margin-bottom: 14px; }
.sm .in-order-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.sm .in-order-tools .sm-btn { padding: 7px 14px; font-size: 13px; }

.sm .in-order-hint,
.sm .in-order-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink-2);
}
.sm .in-order-hint a { color: var(--link); }

/* ── 明细表 ──────────────────────────────────────────────────────────────
   overflow-x 是兜底：窄屏走下面的重排，这里防的是超宽内容撑破布局。 */
.sm .in-order-tw { overflow-x: auto; }
.sm .in-order-t { width: 100%; border-collapse: collapse; }
.sm .in-order-t th {
  padding: 0 8px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-2);
  text-align: start;
  border-bottom: 1px solid var(--line);
}
.sm .in-order-t td { padding: 6px 8px; vertical-align: middle; }
.sm .in-order-t td:first-child, .sm .in-order-t th:first-child { padding-inline-start: 0; }
.sm .in-order-t td:last-child,  .sm .in-order-t th:last-child  { padding-inline-end: 0; }
/* 列宽写在 th 上而不是用 colgroup：改一列不必去数 col 的位置 */
.sm .in-order-t .c-pn   { width: 22%; }
.sm .in-order-t .c-name { width: 34%; }
.sm .in-order-t .c-qty  { width: 90px; }
.sm .in-order-t .c-note { width: auto; }
.sm .in-order-t .c-x    { width: 34px; }

.sm .in-order-t input {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.sm .in-order-t input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
/* 从产品页加进来的行：货号是快照，改了就对不上那个产品了，所以只读。
   要换型号请删掉这一行重新加，而不是就地改成另一个货号。 */
.sm .in-order-t input[readonly] { background: var(--bg); color: var(--ink-2); }

.sm .in-order-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 17px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
}
.sm .in-order-x:hover { color: #c0392b; border-color: var(--line); }

.sm .in-order-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.sm .in-order-foot .sm-btn { padding: 8px 15px; font-size: 13px; }
.sm .in-order-sum { font-size: 13px; color: var(--ink-2); }

/* 「没有 JS 时手工填」那一句，脚本跑起来之后就没有意义了 —— 由 island 隐藏 */
.sm .in-order-nojs { margin-top: 12px; }

/* ── 字段栅格 ───────────────────────────────────────────────────────────── */
.sm .in-order-g {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 20px;
}
.sm .in-order-fd { margin: 0; }
.sm .in-order-fd--wide { margin-top: 14px; }
.sm .in-order-fd label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
/* 必填标记做成轻量的小字而不是红星：红星在一屏十个框里会变成噪声，
   而这一页真正必填的只有两个 */
.sm .in-order-fd label i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--ink-2); }
.sm .in-order-fd input,
.sm .in-order-fd textarea {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.sm .in-order-fd textarea { line-height: 1.7; resize: vertical; }
.sm .in-order-fd input:focus-visible,
.sm .in-order-fd textarea:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.sm .in-order-fd small { display: block; margin-top: 5px; font-size: 12px; line-height: 1.6; color: var(--ink-2); }

.sm .in-order-submit { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding-top: 24px; margin-top: 26px; border-top: 1px solid var(--line); }
.sm .in-order-submit .sm-btn { padding: 12px 30px; }
.sm .in-order-disclaim { flex: 1; min-width: 240px; margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }

/* 蜜罐：移出视口而不是 display:none —— 有些填表脚本会跳过不可见字段 */
.sm .in-order-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 只给读屏器的文本 */
.sm .in-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
  /* 表格重排成卡片：每行是一块，每格自带标签。
     手机上左右拖着填一张五列的表，是最劝退的交互之一。 */
  .sm .in-order-t thead { display: none; }
  .sm .in-order-t, .sm .in-order-t tbody, .sm .in-order-t tr, .sm .in-order-t td { display: block; width: auto; }
  .sm .in-order-t tr {
    position: relative;
    padding: 12px 40px 12px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
  }
  .sm .in-order-t td { padding: 5px 0; }
  .sm .in-order-t td::before {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
    content: attr(data-l);
  }
  .sm .in-order-t td:last-child { position: absolute; top: 8px; inset-inline-end: 8px; padding: 0; }
  .sm .in-order-t td:last-child::before { content: none; }
}

/* ── 产品详情页的「加入订购单」（2026-09-09）─────────────────────────────
   与上面三颗询价按钮同在 .in-card--tint 里，但用一条分隔线隔开：
   那三颗是「问」，这一颗是「要」，承诺程度不同，不该看起来像同一组。 */
.sm .in-cta--order {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed var(--line);
}
.sm .in-cta--order .sm-btn { flex: 1; width: auto; min-width: 132px; }
.sm .in-cta-qty { display: flex; flex-direction: column; gap: 5px; }
.sm .in-cta-qty > span { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sm .in-cta-qty input {
  width: 76px;
  padding: 9px 8px;
  font: inherit;
  font-size: 14px;
  text-align: center;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd6de;
  border-radius: 3px;
}
.sm .in-cta-qty input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
/* 「已加入」是 1.6 秒的即时反馈，不是一个新状态 —— 只换配色，不换形状，
   按钮宽度一变，整块会跳一下 */
.sm .in-cta--order .sm-btn.is-done { color: var(--teal-d); border-color: var(--teal); background: var(--bg); }


/* ═══════════════════════════════════════════════════════════════════════════
 * 品牌详情：介绍 + 品牌档案 两栏（2026-09-21）
 * ═══════════════════════════════════════════════════════════════════════════
 * 原来介绍是一栏 80ch，1400 宽的页面右边空出一半。现在：
 *   左 = 品牌介绍 + 产品线入口；右 = 授权 / 原产国 / 官网 / 型号数 / 资料 + 询价。
 * 两栏共用下面产品网格的整页宽度，左右边缘与网格对齐，不再单独收窄居中。
 */
.sm .in-bintro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
  padding: 30px 0 8px;
}
.sm .in-bintro-main { min-width: 0; }
/* 正文仍保持舒适行宽；多出来的宽度留给右栏，而不是拉长每一行 */
.sm .in-bintro-main .in-rt { max-width: 82ch; }

/* 产品线入口：胶囊按钮 + 型号数，比一行灰色文字链接更像「可以点进去」 */
.sm .in-bcats { margin-top: 22px; }
.sm .in-bside-t {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-2);
}
.sm .in-bcats-l { display: flex; flex-wrap: wrap; gap: 8px; }
.sm .in-bcat {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--nv-800);
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color .15s, color .15s, background .15s;
}
.sm .in-bcat em {
  padding: 0 7px;
  font-size: 11.5px;
  font-style: normal;
  line-height: 18px;
  color: var(--ink-2);
  background: #fff;
  border-radius: 999px;
}
.sm .in-bcat:hover { color: var(--teal-d, #0a7489); background: #fff; border-color: var(--teal); }

/* 右栏：跟随滚动，读长介绍时询价入口一直在手边 */
.sm .in-bside {
  position: sticky;
  top: calc(var(--sticky-h, 124px) + 16px);
  display: grid;
  gap: 14px;
}
.sm .in-bfact {
  padding: 16px 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
}
/* 授权代理：海外买家判断「找不找你买」最看重的一条，放在卡片最上面 */
.sm .in-bfact-auth {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: #136c41;
  background: #e3f7ec;
  border: 1px solid #bde9d1;
  border-radius: 3px;
}
.sm .in-bfact-auth span { font-weight: 800; }
.sm .in-bfact dl { margin: 0; }
.sm .in-bfact dl > div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13.5px;
  border-bottom: 1px dashed var(--line);
}
.sm .in-bfact dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.sm .in-bfact dt { flex: 0 0 auto; color: var(--ink-2); }
.sm .in-bfact dd { min-width: 0; margin: 0; overflow: hidden; font-weight: 600; color: var(--ink); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.sm .in-bfact dd a { color: var(--link); text-decoration: none; }
.sm .in-bfact dd a:hover { text-decoration: underline; }

/* 询价卡复用 .in-ask-card（行业页那张），这里只补「在线下单」次级入口 */
.sm .in-ask-sub {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: rgb(255 255 255 / 82%);
  text-align: center;
  text-decoration: none;
}
.sm .in-ask-sub:hover { color: #fff; text-decoration: underline; }

/* 空状态的两个按钮并排 */
.sm .in-empty p { max-width: 560px; margin: 8px auto 0; line-height: 1.7; }
.sm .in-empty .in-empty-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }

/* ══════════════════════════════════════════════════════════════════════
   品牌详情页改版（2026-10-17，view/intl/brand.php）
   页头：居中的大 LOGO 白卡 + 大标题 + 原产国 / 官网；
   正文（有视频时）：左 介绍 + 产品线标签 + 获取报价 / 右 视频 + 视频大标题
   ══════════════════════════════════════════════════════════════════════ */
.sm .in-bhero { padding-bottom: 34px; }
.sm .in-bhero-in {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  justify-content: center;
  padding: 18px 0 0;
}
.sm .in-bhero-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 100px;
  padding: 12px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgb(8 20 44 / 28%);
}
.sm .in-bhero-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sm .in-bhero-t { min-width: 0; }
.sm .in-hd.in-bhero h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.2; letter-spacing: .01em; }
.sm .in-bhero-m {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 26px;
  margin: 10px 0 0;
  font-size: clamp(15px, 1.35vw, 19px);
  color: rgb(255 255 255 / 86%);
}
.sm .in-bhero-m a { color: #fff; text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.sm .in-bhero-m a:hover { color: #7fd3e0; }
.sm .in-bhero-tags { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 12px 0 0; font-size: 13px; }
.sm .in-bhero-tags:empty { display: none; }
.sm .in-bhero-auth {
  padding: 3px 10px;
  font-weight: 600;
  color: #b9f0dc;
  background: rgb(46 160 110 / 22%);
  border: 1px solid rgb(126 220 180 / 35%);
  border-radius: 999px;
}
.sm .in-bhero-n { color: rgb(255 255 255 / 72%); }
.sm .in-bhero-n b { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }

/* 有视频：左右两栏等分 */
.sm .in-bintro--video { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; padding-top: 40px; }
.sm .in-bintro--video .in-bintro-main .in-rt { max-width: none; font-size: 15px; line-height: 1.85; }

/* 介绍下方：产品线标签 + 获取报价，同一行 */
.sm .in-bact { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; margin-top: 26px; }
.sm .in-bact .in-bcats { margin-top: 0; }
.sm .in-bintro:not(.in-bintro--video) .in-bact { display: block; }
/* 2026-10-18 无视频：介绍不再限 82ch —— 宽屏下正文只占 640px、和右侧信息卡之间空出一大块。
   正文铺满左栏，字号行距与有视频版一致；右栏稍加宽，两栏比例更均衡。 */
.sm .in-bintro:not(.in-bintro--video) { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; }
.sm .in-bintro:not(.in-bintro--video) .in-bintro-main .in-rt { max-width: none; font-size: 15px; line-height: 1.85; }
.sm .in-bact-ask {
  min-width: 186px;
  padding: 10px 28px;
  font-size: 16px;
  letter-spacing: .12em;
  background: var(--nv-800);
  border-color: var(--nv-800);
  border-radius: 4px;
}
.sm .in-bact-ask:hover { background: var(--nv-700); border-color: var(--nv-700); }

/* 视频 + 大标题 */
.sm .in-bvideo { min-width: 0; margin: 0; }
.sm .in-bvideo video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;     /* 封面 / 视频不是标准 16:9 时铺满裁切，不出现上下黑边 */
  background: #0d1b2f;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgb(18 41 79 / 16%);
}
.sm .in-bvideo-t {
  position: relative;
  padding-left: 14px;
  margin: 18px 0 0;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
}
.sm .in-bvideo-t::before {
  content: "";
  position: absolute;
  top: .22em;
  bottom: .22em;
  left: 0;
  width: 5px;
  background: var(--nv-800);
  border-radius: 2px;
}

@media (max-width: 1100px) {
  .sm .in-bintro { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sm .in-bintro:not(.in-bintro--video) { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sm .in-bside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  /* 窄屏：视频放到介绍上面 —— 视频是这一块最抓眼的内容，不该被长介绍压到很下面 */
  .sm .in-bintro--video { gap: 26px; padding-top: 26px; }
  .sm .in-bintro--video .in-bvideo { order: -1; }
}
@media (max-width: 620px) {
  .sm .in-bhero-in { gap: 14px; justify-content: flex-start; }
  .sm .in-bhero-logo { width: 104px; height: 70px; padding: 8px; }
  .sm .in-bhero-m { gap: 2px 16px; }
  .sm .in-bact-ask { width: 100%; }
}
@media (max-width: 560px) {
  .sm .in-bintro { padding-top: 20px; }
  .sm .in-bside { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 品牌页 · 优选品牌卡片（2026-09-21）
 *   logo 1:1 方框、logo 与品牌名水平居中、品牌名无下划线。
 *   只作用于 .in-cards--brand，不影响产品线 / 知识库等共用 .in-c 的卡片。
 * ═══════════════════════════════════════════════════════════════════════════ */
.sm .in-cards--brand { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.sm a.in-c--brand {
  align-items: center;
  gap: 12px;
  padding: 18px 16px 16px;
  text-align: center;
  text-decoration: none;
}
.sm .in-c--brand .in-c-logo {
  width: 100%;
  max-width: 132px;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
/* 宽字标（BEL-RAY、TotalEnergies）在方框里按比例缩放，不被压扁也不被裁掉 */
.sm .in-c--brand .in-c-logo img { width: 100%; height: 100%; object-fit: contain; }
.sm .in-c--brand .in-c-logo i { font-size: 40px; font-style: normal; font-weight: 800; color: var(--nv-700); }
.sm .in-c--brand .in-c-t { color: var(--nv-800); text-decoration: none; }
.sm .in-c--brand:hover .in-c-t { color: var(--teal-d); text-decoration: none; }
.sm .in-c--brand:hover .in-c-logo { border-color: var(--teal); }

/* 型号数（2026-11-03）：与首页 .sm-brand em 同一套字号与颜色 */
.sm .in-c--brand .in-c-n { margin-top: -8px; font-size: 11.5px; font-style: normal; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sm .in-brand-b em { font-variant-numeric: tabular-nums; }

/* A–Z 列表里的品牌名也不要下划线（悬停只变色） */
.sm a.in-brand-i { text-decoration: none; }
.sm .in-brand-i:hover .in-brand-b b { color: var(--teal-d); text-decoration: none; }

@media (max-width: 560px) {
  .sm .in-cards--brand { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sm .in-c--brand .in-c-logo { max-width: 104px; }
}

/* ── 单页正文里的「链接清单」→ 卡片网格（IntlPage::markLinkLists 打标，2026-09-21）── */
.sm .in-rt ul.in-linkgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;
  padding: 0; margin: 6px 0 18px; list-style: none;
}
.sm .in-rt ul.in-linkgrid li { margin: 0; padding: 0; }
.sm .in-rt ul.in-linkgrid li::before { display: none; }
.sm .in-rt ul.in-linkgrid li > p { margin: 0; height: 100%; }
.sm .in-rt ul.in-linkgrid a {
  position: relative; display: flex; align-items: center; min-height: 52px; height: 100%;
  padding: 12px 38px 12px 16px; font-size: 14px; font-weight: 600; line-height: 1.45;
  color: var(--nv-800); text-decoration: none; background: #fff;
  border: 1px solid var(--line, #e3e8ee); border-radius: 4px;
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.sm .in-rt ul.in-linkgrid a::after {
  content: "→"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--teal); transition: transform .15s;
}
.sm .in-rt ul.in-linkgrid a:hover { color: var(--teal-d); border-color: var(--teal); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.sm .in-rt ul.in-linkgrid a:hover::after { transform: translate(3px, -50%); }
/* 单页正文小标题：左侧一条青色短线，段落分区更清楚 */
.sm .in-art--doc .in-rt h2 { position: relative; padding-left: 12px; margin-top: 28px; scroll-margin-top: 90px; }
.sm .in-art--doc .in-rt h2::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; background: var(--teal); border-radius: 2px; }
.sm .in-art--doc .in-rt > h2:first-child { margin-top: 0; }

/* ── 简卡整张是 <a>：去掉浏览器默认下划线（应用工况、产品线、知识库等共用 .in-c，2026-09-21）── */
.sm a.in-c, .sm a.in-c:hover { color: var(--ink); text-decoration: none; }
.sm a.in-c:hover .in-c-t { text-decoration: none; }

/* ── 应用工况总览（2026-09-21）── */
.sm .in-hd-main { flex: 1 1 520px; min-width: 0; }
.sm .in-app-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.sm .in-app-jump a {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px;
  font-size: 13.5px; font-weight: 600; color: #fff; text-decoration: none;
  background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 22%); border-radius: 999px;
  transition: background .15s, border-color .15s;
}
.sm .in-app-jump a:hover { background: rgb(255 255 255 / 16%); border-color: rgb(255 255 255 / 45%); }
.sm .in-app-jump em { font-style: normal; font-size: 12px; font-weight: 600; color: rgb(255 255 255 / 65%); }

.sm .in-app-group { scroll-margin-top: 80px; padding-top: 30px; }
.sm .in-app-group > h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; border-bottom: 0; padding-bottom: 0; }
.sm .in-app-ico {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  font-size: 13px; font-style: normal; color: var(--teal); background: #e6f4f6; border-radius: 50%;
}
.sm .in-app-lead { margin: 0 0 2px; font-size: 13.5px; color: var(--ink-2); }
.sm .in-cards--app { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); padding-top: 14px; }
.sm a.in-c--app {
  position: relative; gap: 8px; padding: 18px 18px 14px; border-radius: 6px;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.sm a.in-c--app::before {
  content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px;
  background: var(--teal); border-radius: 0 2px 2px 0; opacity: 0; transition: opacity .16s;
}
.sm a.in-c--app:hover { border-color: var(--teal); box-shadow: 0 6px 18px rgb(18 41 79 / 9%); transform: translateY(-2px); }
.sm a.in-c--app:hover::before { opacity: 1; }
.sm .in-c--app .in-c-t { font-size: 16px; font-weight: 700; color: var(--nv-800); }
.sm a.in-c--app:hover .in-c-t { color: var(--teal-d); }
.sm .in-c--app .in-c-d { min-height: 3.3em; font-size: 13px; }
.sm .in-c--app .in-c-d.is-auto { color: #8a939c; }
.sm .in-c-ft {
  display: flex; align-items: center; justify-content: space-between; margin-top: auto;
  padding-top: 10px; border-top: 1px dashed var(--line);
}
.sm .in-c--app .in-c-n { margin: 0; }
.sm .in-c-go { color: var(--teal); font-weight: 700; transition: transform .16s; }
.sm a.in-c--app:hover .in-c-go { transform: translateX(3px); }

.sm .in-app-cta {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
  margin-top: 40px; padding: 24px 28px; color: #fff;
  background: linear-gradient(120deg, var(--nv-800) 0%, var(--nv-900) 100%); border-radius: 8px;
}
.sm .in-app-cta b { display: block; font-size: 18px; margin-bottom: 6px; }
.sm .in-app-cta p { margin: 0; max-width: 62ch; font-size: 14px; line-height: 1.7; color: rgb(255 255 255 / 78%); }
.sm .in-app-cta-act { display: flex; flex-wrap: wrap; gap: 10px; }
.sm .in-app-cta .sm-btn--line { color: #fff; border-color: rgb(255 255 255 / 55%); background: transparent; }
.sm .in-app-cta .sm-btn--line:hover { background: rgb(255 255 255 / 12%); }
@media (max-width: 640px) {
  .sm .in-cards--app { grid-template-columns: 1fr; }
  .sm .in-app-cta { padding: 20px; }
  .sm .in-app-cta-act, .sm .in-app-cta-act .sm-btn { width: 100%; }
}

/* ── 产品详情首屏：视频并进图廊 + 中列速览补充（2026-09-21）──────────────
   原来视频铺在图廊下方，左列比中列高出一整个视频，中列下面一大块白。 */
.sm .in-gal-thumbs button.in-gal-vthumb { position: relative; background: #0d1b2f; }
.sm .in-gal-vthumb img { opacity: .72; }
.sm .in-gal-vthumb i {
  position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center; padding-left: 2px;
  font-size: 11px; font-style: normal; color: #fff; background: rgb(10 143 166 / 92%);
  border-radius: 50%; box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
}
.sm .in-gal-main video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0d1b2f; border-radius: 2px; }
.sm .in-gal-main video[hidden], .sm .in-gal-main img[hidden] { display: none; }
.sm .in-gal-main.is-video { padding: 0; background: #0d1b2f; }

.sm .in-quick { display: flex; flex-direction: column; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.sm .in-quick-r { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sm .in-quick dt { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.sm .in-quick dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.sm .in-qchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  font-size: 13px; font-weight: 600; color: var(--nv-800); text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; transition: border-color .15s, color .15s;
}
.sm .in-qchip em { font-size: 11.5px; font-style: normal; font-weight: 500; color: var(--ink-2); }
.sm .in-qchip:hover { color: var(--teal-d); border-color: var(--teal); }
.sm .in-qchip--tag { font-weight: 500; background: var(--bg); border-color: transparent; }
.sm .in-qdot { width: 7px; height: 7px; border-radius: 50%; background: #9aa5b1; }
.sm .in-qdot.is-1 { background: #1f9d55; }
.sm .in-qdot.is-2 { background: #d69e2e; }
.sm .in-qmore { align-self: center; font-size: 12.5px; color: var(--teal); text-decoration: none; }
.sm .in-qmore:hover { text-decoration: underline; }

.sm .in-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 2px 0; font-size: 13px; }
.sm .in-jump b { font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin-inline-end: 2px; }
.sm .in-jump a { color: var(--link); text-decoration: none; }
.sm .in-jump a::after { content: " ↓"; font-size: 11px; color: var(--teal); }
.sm .in-jump a:hover { color: var(--teal-d); text-decoration: underline; }
.sm #desc, .sm #specs, .sm #packs, .sm #apps, .sm #docs { scroll-margin-top: 80px; }

/* ── 列表页一行固定 5 个，每页 25 条正好 5 行（2026-09-21）──
   auto-fill 在 1000–1250px 之间会排成 4 列，25 条最后一行只剩 1 个；
   这里按视口定列数：≥1100 五列、≥860 四列，更窄交回上面的 auto-fill。 */
@media (min-width: 1100px) { .sm .in-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 860px) and (max-width: 1099.98px) { .sm .in-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ═══════════════════════════════════════════════════════════════════════════
 * 品牌 A–Z：每个字母一行、组内横排 1:1 logo 卡片（2026-09-22）
 *   撤掉上面的「报纸式多栏」：字母一行一行往下读更直观；
 *   组内卡片与「优选品牌」同一套 —— logo 方框、品牌名居中、不显示型号数与国家。
 * ═══════════════════════════════════════════════════════════════════════════ */
.sm .in-az { column-width: auto; columns: auto; column-gap: normal; padding-top: 18px; }
.sm .in-az-g,
.sm .in-az-g.is-long { padding-bottom: 22px; break-inside: auto; }
.sm .in-az-g > h2 { font-size: 18px; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 14px; }
.sm .in-az .in-brand-l {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
  gap: 14px;
}
.sm .in-az .in-brand-i {
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 8px 10px;
  margin: 0;
  text-align: center;
  border-radius: 6px;
}
.sm .in-az .in-brand-th {
  flex: none;
  width: 100%;
  max-width: 104px;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: 6px;
  transition: border-color .15s;
}
.sm .in-az .in-brand-th img { width: 100%; height: 100%; object-fit: contain; }
.sm .in-az .in-brand-th i { font-size: 34px; }
.sm .in-az .in-brand-b { align-items: center; width: 100%; }
/* 品牌名最多两行、居中；长的德语全称不再被一刀截成一个字 */
.sm .in-az .in-brand-b b {
  display: -webkit-box;
  width: 100%;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--nv-800);
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sm .in-az .in-brand-i:hover { background: #fff; border-color: transparent; }
.sm .in-az .in-brand-i:hover .in-brand-th { border-color: var(--teal); }
.sm .in-az .in-brand-i:hover .in-brand-b b { color: var(--teal-d); }
@media (max-width: 560px) {
  .sm .in-az .in-brand-l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sm .in-az .in-brand-th { max-width: 84px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
 * 品牌中心与首页品牌墙统一（2026-10-17）
 *   一行 8 个、铺满内容宽度、LOGO 放大到 84px 高的横向展示区 —— 与首页 .sm-brand 同一种卡片：
 *   白底细边框卡片，LOGO 在上、品牌名在下，悬停描青色边。
 *   原来是 1:1 小方框：宽字标（BEL-RAY、TotalEnergies）在方框里被缩得很小，反而认不出。
 *   断点与 home.css 的 .sm-brands 一致：8 → 6（≤1280）→ 4（≤992）→ 3（≤760）→ 2（≤480）。
 *   覆盖「优选品牌」(.in-cards--brand) 与 A–Z 列表 (.in-az .in-brand-l) 两处，写在它们之后以便覆盖。
 * ═══════════════════════════════════════════════════════════════════════════ */
.sm .in-cards--brand,
.sm .in-az .in-brand-l {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px;
}
.sm a.in-c--brand,
.sm .in-az .in-brand-i {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 16px 12px 14px;
  margin: 0;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.sm a.in-c--brand:hover,
.sm .in-az .in-brand-i:hover {
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 6px 18px rgb(16 40 80 / 9%);
  transform: translateY(-1px);
}
.sm .in-c--brand .in-c-logo,
.sm .in-az .in-brand-th {
  flex: none;
  width: 100%;
  max-width: none;
  height: 84px;
  aspect-ratio: auto;
  padding: 0 4px;
  margin-bottom: 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.sm .in-c--brand .in-c-logo img,
.sm .in-az .in-brand-th img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.sm .in-c--brand .in-c-logo i,
.sm .in-az .in-brand-th i { font-size: 30px; font-style: normal; font-weight: 800; color: var(--nv-700); }
.sm .in-c--brand .in-c-t,
.sm .in-az .in-brand-b b {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--nv-800);
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sm .in-c--brand:hover .in-c-t,
.sm .in-az .in-brand-i:hover .in-brand-b b { color: var(--teal-d); text-decoration: none; }
.sm .in-az .in-brand-i:hover .in-brand-th { border-color: transparent; }
@media (max-width: 1280px) {
  .sm .in-cards--brand, .sm .in-az .in-brand-l { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
  .sm .in-cards--brand, .sm .in-az .in-brand-l { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 760px) {
  .sm .in-cards--brand, .sm .in-az .in-brand-l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .sm .in-c--brand .in-c-logo, .sm .in-az .in-brand-th { height: 64px; max-width: none; }
}
@media (max-width: 480px) {
  .sm .in-cards--brand, .sm .in-az .in-brand-l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 点字母跳过来时标题闪一下（JS 加 .is-flash，见 inner-island.js initAz） */
.sm .in-az-g > h2.is-flash { animation: in-az-flash 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .sm .in-az-g > h2.is-flash { animation: none; } }

/* ── 产品线页：下级产品线卡片（2026-09-22）──────────────────────────────── */
.sm .in-sec--sub .in-h2 { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 14px; }
.sm .in-subcats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px;
  padding: 0; margin: 0 0 8px; list-style: none;
}
.sm .in-subcats li { display: flex; min-width: 0; }
.sm a.in-subcat {
  position: relative; display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0;
  padding: 14px 16px 12px; color: var(--ink); text-decoration: none;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sm a.in-subcat::before {
  content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px;
  background: var(--teal); border-radius: 0 2px 2px 0; opacity: 0; transition: opacity .15s;
}
.sm a.in-subcat:hover { border-color: var(--teal); box-shadow: 0 4px 14px rgb(18 41 79 / 8%); transform: translateY(-1px); }
.sm a.in-subcat:hover::before { opacity: 1; }
.sm .in-subcat b { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--nv-800); }
.sm a.in-subcat:hover b { color: var(--teal-d); }
.sm .in-subcat-d {
  display: -webkit-box; overflow: hidden; font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.sm .in-subcat-n {
  display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px;
  font-size: 12px; color: #8a939c; border-top: 1px dashed var(--line);
}
.sm .in-subcat-n i { margin-left: auto; font-style: normal; font-weight: 700; color: var(--teal); transition: transform .15s; }
.sm a.in-subcat:hover .in-subcat-n i { transform: translateX(3px); }
@media (max-width: 560px) {
  .sm .in-subcats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sm a.in-subcat { padding: 12px; }
}

/* ── 产品详情：长标题与面包屑（2026-09-22）──────────────────────────────
   ① 面包屑一行显示，末项（当前页名称）过长时以「…」收尾，完整名称在下面的标题里；
   ② 标题按长度分三档字号 + 各行等长折行；末尾包装规格不拆开、颜色浅一档。 */
.sm .in-crumb { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.sm .in-crumb > a, .sm .in-crumb > i { flex: none; white-space: nowrap; }
.sm .in-crumb [aria-current] {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.sm .in-hd h1.in-pd-title {
  max-width: 1080px;
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: 0;
  text-wrap: balance;
  word-break: normal;
  overflow-wrap: anywhere;
}
.sm .in-hd h1.in-pd-title.is-long { font-size: 23px; line-height: 1.4; }
.sm .in-hd h1.in-pd-title.is-xlong { font-size: 20px; line-height: 1.45; }
/* 规格（如「16 OZ/瓶」）与标题同色同粗（2026-10-12：原为灰色，客户要求整行统一黑色）；只保留不断行 */
.sm .in-pd-pack { font-weight: inherit; color: inherit; white-space: nowrap; }
@media (max-width: 900px) {
  .sm .in-hd h1.in-pd-title { font-size: 21px; }
  .sm .in-hd h1.in-pd-title.is-long { font-size: 19px; }
  .sm .in-hd h1.in-pd-title.is-xlong { font-size: 17.5px; }
}

/* ── 危险品：轻量一行提示（2026-09-22）─────────────────────────────────── */
.sm .in-haz {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin: 0; padding: 7px 12px; font-size: 12.5px; line-height: 1.5;
  color: #7a5200; background: #fff8e6; border: 1px solid #f3dfa6; border-radius: 6px;
}
.sm .in-haz-ic {
  display: inline-grid; flex: none; place-items: center; width: 16px; height: 16px;
  font-size: 11px; font-weight: 800; color: #fff; background: #e0a100; border-radius: 50%;
}
.sm .in-haz b { font-weight: 700; color: #6b4708; }
.sm .in-haz-t { flex: 1 1 220px; min-width: 0; color: #86652a; }
.sm .in-haz a { flex: none; font-weight: 600; color: #9a6400; text-decoration: none; white-space: nowrap; }
.sm .in-haz a:hover { color: #6b4708; text-decoration: underline; }

/* ── 产品详情右栏吸顶修复（2026-09-22）─────────────────────────────────
   原来整个右栏 sticky 且 top: 16px —— 顶部导航本身吸顶 124px，右栏上半截被压在导航下面；
   右栏又比屏幕高时，下面的资料、联系卡片永远滚不出来。
   现在：右栏跟随页面正常滚动，只有「询价 / 加入订购单」这张卡吸顶，停在导航下方 14px。 */
.sm .in-side { position: static; align-self: stretch; }
.sm .in-card--sticky {
  position: sticky;
  top: calc(var(--sticky-h, 124px) + 14px);
  z-index: 5;
  box-shadow: 0 6px 18px rgb(18 41 79 / 8%);
}
.sm .in-cta-for {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; padding-bottom: 10px;
  font-size: 12px; color: var(--ink-2); border-bottom: 1px dashed var(--line);
}
.sm .in-cta-for b {
  overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; color: var(--nv-800); text-overflow: ellipsis; white-space: nowrap;
}
@media (width <= 900px) {
  .sm .in-card--sticky { position: static; box-shadow: none; }
}

/* ── 产品标识卡：堆叠行 + 复制（2026-09-22）─────────────────────────────── */
.sm .in-idl--stack { display: flex; flex-direction: column; gap: 0; }
.sm .in-idl-r { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sm .in-idl-r:first-child { padding-top: 2px; }
.sm .in-idl-r:last-child { border-bottom: 0; padding-bottom: 0; }
.sm .in-idl--stack dt { font-size: 12.5px; }
.sm .in-idl--stack dd { font-size: 13.5px; line-height: 1.5; }
.sm .in-idl-code { display: flex; align-items: flex-start; gap: 8px; }
.sm .in-idl-code span { flex: 1; min-width: 0; font-weight: 600; color: var(--nv-800); overflow-wrap: anywhere; }
.sm .in-idl-copy {
  flex: none; padding: 1px 7px; font-size: 11.5px; font-weight: 500; line-height: 1.6; color: var(--ink-2);
  cursor: pointer; background: #fff; border: 1px solid var(--line); border-radius: 4px;
  opacity: .65; transition: opacity .15s, color .15s, border-color .15s;
}
.sm .in-idl-r:hover .in-idl-copy, .sm .in-idl-copy:focus-visible { opacity: 1; }
.sm .in-idl-copy:hover { color: var(--teal-d); border-color: var(--teal); }
.sm .in-idl-copy[data-done] { color: #1f9d55; border-color: #1f9d55; opacity: 1; }
.sm .in-idl--stack dd a { text-decoration: none; }
.sm .in-idl--stack dd a:hover { text-decoration: underline; }

/* ── 产品标识 + 询价 一起吸顶（2026-09-22）─────────────────────────────
   两张卡作为一组停在导航下方；一组比屏幕还高时组内自己滚动，底部不会被截掉。 */
.sm .in-card--sticky { position: static; box-shadow: none; }
.sm .in-side-stick {
  position: sticky;
  top: calc(var(--sticky-h, 124px) + 14px);
  z-index: 5;
  display: flex; flex-direction: column; gap: 14px;
  max-height: calc(100vh - var(--sticky-h, 124px) - 28px);
  overflow-y: auto;
  /* 2026-10-29：去掉 overscroll-behavior:contain —— 它让光标停在右侧栏时滚轮滚不动整页 */
  scrollbar-width: thin;
}
.sm .in-side-stick > .in-card { flex: none; }
.sm .in-side-stick .in-card--tint { box-shadow: 0 6px 18px rgb(18 41 79 / 8%); }
/* 已经有产品标识卡一直在，询价卡里的「当前型号」就重复了 */
.sm .in-side-stick .in-cta-for { display: none; }
@media (width <= 900px) {
  .sm .in-side-stick { position: static; max-height: none; overflow: visible; }
}

/* ══════════════════════════════════════════════════════════════════════
   站内搜索结果页（2026-09-29 改版，view/intl/search.php）
   深蓝页头 + 大搜索框 · 左侧筛选（带条数）· 右侧与产品中心同款卡片
   ══════════════════════════════════════════════════════════════════════ */
.sm .in-srch-hd { padding-bottom: 26px; }
.sm .in-srch-hd h1 { word-break: break-word; }

/* 大搜索框：与顶栏同一套外观（浅灰底 + 青色按钮），放在深蓝页头里 */
.sm .in-sbox {
  display: flex;
  max-width: 820px;
  margin: 18px 0 0;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgb(4 18 40 / 22%);
  transition: border-color 0.16s;
}
.sm .in-sbox:focus-within { border-color: var(--teal); }
.sm .in-sbox input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
}
.sm .in-sbox button {
  display: inline-flex;
  flex: none;
  gap: 7px;
  align-items: center;
  padding: 0 26px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: var(--teal);
  border: 0;
  border-radius: 0 2px 2px 0;
}
.sm .in-sbox button:hover { background: var(--teal-d); }
.sm .in-sbox button svg { width: 18px; height: 18px; }
.sm .in-sbox-hint { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: rgb(255 255 255 / 66%); }

.sm .in-srch-note {
  padding: 10px 14px;
  margin: 18px 0 0;
  font-size: 13px;
  color: #7a5a12;
  background: #fff8e8;
  border-inline-start: 3px solid #e3a008;
  border-radius: 3px;
}

/* 两栏：左 240 筛选 / 右结果 */
.sm .in-srch {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding-top: 22px;
}
.sm .in-srch-main { min-width: 0; }
.sm .in-srch-main > .in-filter { padding-top: 0; }
.sm .in-srch-main .in-grid { padding-top: 10px; }

.sm .in-srch-side { position: sticky; top: calc(var(--sticky-h, 124px) + 12px); }
.sm .in-srch-fold > summary {
  display: none;               /* 宽屏不需要折叠开关 */
  cursor: pointer;
  list-style: none;
}
.sm .in-srch-fold > summary::-webkit-details-marker { display: none; }

.sm .in-fc {
  padding: 14px 14px 10px;
  margin-bottom: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.sm .in-fc h2 { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: var(--nv-800); }
.sm .in-fc ul { padding: 0; margin: 0; list-style: none; }
.sm .in-fc li a {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  margin: 0 -8px;
  font-size: 13.5px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 5px;
}
.sm .in-fc li a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm .in-fc li a em {
  flex: none;
  min-width: 22px;
  padding: 0 6px;
  font-size: 11.5px;
  font-style: normal;
  line-height: 18px;
  color: var(--ink-2);
  text-align: center;
  background: var(--bg);
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
}
.sm .in-fc li a:hover { color: var(--teal); background: var(--bg); }
.sm .in-fc li a.is-on { font-weight: 600; color: #fff; background: var(--nv-800); }
.sm .in-fc li a.is-on em { color: var(--nv-800); background: #fff; }
.sm .in-srch-side.is-js .in-fc:not(.is-open) li.is-more { display: none; }
.sm .in-fc-more {
  padding: 4px 0 2px;
  font-size: 12.5px;
  color: var(--teal);
  cursor: pointer;
  background: none;
  border: 0;
}
.sm .in-srch-side:not(.is-js) .in-fc-more { display: none; }

/* 已选条件：每个都能单独去掉 */
.sm .in-filter .in-chip-x { display: inline-flex; gap: 6px; align-items: center; }
.sm .in-filter .in-chip-x i { font-size: 15px; font-style: normal; line-height: 1; opacity: 0.8; }

/* 零结果 */
.sm .in-srch-empty { padding: 40px 20px 30px; background: var(--bg); border-radius: 8px; }
.sm .in-srch-tips {
  display: inline-block;
  max-width: 560px;
  padding-inline-start: 18px;
  margin: 12px auto 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
  text-align: start;
}

/* 还没输入搜索词：三组入口 */
.sm .in-srch-start { padding: 26px 0 8px; }
.sm .in-srch-start section { margin-bottom: 22px; }
.sm .in-srch-start h2 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--nv-800); }
.sm .in-srch-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sm .in-srch-chips a {
  padding: 6px 14px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.sm .in-srch-chips a:hover { color: var(--teal); border-color: var(--teal); }

@media (max-width: 859.98px) {
  .sm .in-srch { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sm .in-srch-side { position: static; }
  .sm .in-srch-fold > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--nv-800);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 8px;
  }
  .sm .in-srch-fold > summary::after { content: '▾'; color: var(--ink-2); }
  .sm .in-srch-fold[open] > summary { margin-bottom: 10px; }
  .sm .in-srch-fold[open] > summary::after { content: '▴'; }
  .sm .in-sbox input { height: 44px; font-size: 14px; }
  .sm .in-sbox button { padding: 0 16px; }
}
.sm .in-srch--full { grid-template-columns: minmax(0, 1fr); }

/* ══════════════════════════════════════════════════════════════════════
   整站加宽（2026-10-12）：.sm-wrap 1400 → 1800
   ══════════════════════════════════════════════════════════════════════
   产品列表 / 品牌页：≥1600px 一行 6 个（每页 30 = 5 行），1100–1599 一行 5 个（6 行）。
   卡片宽度因此始终落在 250–330px，不会因为页面变宽而被拉成大方块。
   搜索页左边有筛选栏，主区窄一截，保持一行 5 个（30 条 = 6 行）。 */
@media (min-width: 1600px) {
  .sm .in-grid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
  .sm .in-srch-main .in-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* 品牌 A–Z、品牌卡片等 auto-fill 栅格本来就会自动多排几列，无需改 */
}

/* ══════════════════════════════════════════════════════════════════════
   知识库 · 技术资料下载（2026-10-12，view/intl/docs.php + _kb_tabs.php）
   ══════════════════════════════════════════════════════════════════════ */

/* 知识库分栏：知识文章 / 技术资料下载 */
.sm .in-kbtabs {
  display: flex;
  gap: 4px;
  margin: 22px 0 18px;
  border-bottom: 1px solid var(--line);
}
.sm .in-kbtab {
  padding: 10px 18px;
  margin-bottom: -1px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.sm a.in-kbtab:hover { color: var(--teal); }
.sm .in-kbtab.is-on { color: var(--nv-800); border-bottom-color: var(--teal); }

/* 知识库分栏 · 通栏两等分按钮（2026-10-17）：资料下载 / 知识文章
   当前项品牌青实色填充、白字；其余白底细边框。两格共用中间那条边框，看起来是一整条。
   只挂在 _kb_tabs 的 .in-kbtabs--seg 上 —— 新闻分类栏复用 .in-kbtabs，不受影响。 */
.sm .in-kbtabs--seg {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0;
  margin: 24px 0 22px;
  border-bottom: 0;
}
.sm .in-kbtabs--seg .in-kbtab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  transition: color .15s, background .15s, border-color .15s;
}
.sm .in-kbtabs--seg .in-kbtab + .in-kbtab { margin-left: -1px; }
.sm .in-kbtabs--seg .in-kbtab:first-child { border-radius: 6px 0 0 6px; }
.sm .in-kbtabs--seg .in-kbtab:last-child  { border-radius: 0 6px 6px 0; }
.sm .in-kbtabs--seg a.in-kbtab:hover { position: relative; color: var(--teal-d); border-color: var(--teal); }
.sm .in-kbtabs--seg .in-kbtab.is-on {
  position: relative;
  z-index: 1;
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
}
@media (max-width: 560px) {
  .sm .in-kbtabs--seg { margin: 18px 0 16px; }
  .sm .in-kbtabs--seg .in-kbtab { min-height: 40px; font-size: 14px; }
}

/* ① 产品线大胶囊 */
.sm .in-dl-cats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.sm .in-dl-cat {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  min-width: 132px;
  justify-content: center;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--nv-800);
  text-decoration: none;
  background: #eef2f8;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background .15s, border-color .15s, color .15s;
}
.sm .in-dl-cat em {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  color: #7a8797;
  font-variant-numeric: tabular-nums;
}
.sm .in-dl-cat:hover { background: #fff; border-color: var(--teal); color: var(--teal); }
.sm .in-dl-cat.is-on { color: #fff; background: var(--nv-800); }
.sm .in-dl-cat.is-on em { color: rgb(255 255 255 / 70%); }

/* ②③④ 筛选面板 */
.sm .in-dl-panel {
  padding: 6px 18px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.sm .in-dl-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 0;
  border-bottom: 1px dashed var(--line);
}
.sm .in-dl-row--sub { padding-top: 0; }
.sm .in-dl-k { padding-top: 5px; font-size: 13px; font-weight: 600; color: var(--ink-2); }

.sm .in-dl-seg,
.sm .in-dl-brands { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.sm .in-dl-seg a,
.sm .in-dl-brands a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 15px;
}
.sm .in-dl-seg a em,
.sm .in-dl-brands a em { font-size: 11.5px; font-style: normal; color: #8a939c; font-variant-numeric: tabular-nums; }
.sm .in-dl-seg a:hover,
.sm .in-dl-brands a:hover { color: var(--teal); border-color: var(--teal); }
.sm .in-dl-seg a.is-on,
.sm .in-dl-brands a.is-on { color: #fff; background: var(--nv-800); border-color: var(--nv-800); }
.sm .in-dl-seg a.is-on em,
.sm .in-dl-brands a.is-on em { color: rgb(255 255 255 / 70%); }

.sm .in-dl-az { display: flex; flex-wrap: wrap; gap: 5px; }
.sm .in-dl-az a,
.sm .in-dl-az span {
  display: inline-grid;
  width: 32px;
  height: 30px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 5px;
  place-items: center;
}
.sm .in-dl-az a { color: var(--nv-800); text-decoration: none; background: #eef2f8; }
.sm .in-dl-az a:hover { color: #fff; background: var(--teal); }
.sm .in-dl-az a.is-on { color: #fff; background: var(--nv-800); }
.sm .in-dl-az span { color: #c3cad3; background: #f6f7f9; cursor: default; }

.sm .in-dl-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}
.sm .in-dl-sort { display: flex; gap: 4px; font-size: 13px; }
.sm .in-dl-sort a,
.sm .in-dl-sort span { padding: 5px 12px; border-radius: 4px; }
.sm .in-dl-sort a { color: var(--ink-2); text-decoration: none; }
.sm .in-dl-sort a:hover { color: var(--teal); background: var(--bg); }
.sm .in-dl-sort span { font-weight: 700; color: var(--nv-800); background: var(--bg); }

.sm .in-dl-q {
  display: flex;
  flex: 0 1 460px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: border-color .15s;
}
.sm .in-dl-q:focus-within { border-color: var(--teal); }
.sm .in-dl-q input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; font-size: 13.5px; border: 0; outline: none; background: transparent; }
.sm .in-dl-q button {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 0 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: var(--teal);
  border: 0;
  border-radius: 0 3px 3px 0;
}
.sm .in-dl-q button:hover { background: var(--teal-d); }
.sm .in-dl-q button svg { width: 16px; height: 16px; }

.sm .in-dl-n { margin: 14px 0 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* 资料卡片：≥1600 一行 6 个，1100–1599 一行 5 个；每页 30 份，最后一行总是满的 */
.sm .in-dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  padding: 14px 0 22px;
  margin: 0;
  list-style: none;
}
@media (min-width: 1100px) { .sm .in-dl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .sm .in-dl-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.sm .in-dl-c {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.sm .in-dl-c:hover { border-color: #d3dbe6; box-shadow: 0 10px 26px rgb(16 40 80 / 10%); transform: translateY(-2px); }

/* 封面：A4 比例的纸张，放在浅灰台面上 */
.sm .in-dl-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 4.4;
  padding: 16px 18px 0;
  overflow: hidden;
  text-decoration: none;
  background: linear-gradient(180deg, #f3f6fa, #e9eef5);
}
.sm .in-dl-cover > img,
.sm .in-dl-sheet {
  width: 100%;
  max-width: 220px;
  height: 100%;
  object-fit: cover;
  object-position: top;
  background: #fff;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 2px 10px rgb(16 40 80 / 12%);
  transition: transform .25s;
}
.sm .in-dl-c:hover .in-dl-cover > img,
.sm .in-dl-c:hover .in-dl-sheet { transform: translateY(-3px); }

/* 没有缩略图时画的「资料封面」 */
.sm .in-dl-sheet { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 0; overflow: hidden; }
.sm .in-dl-sheet-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--dl-accent, var(--teal));
}
.sm .in-dl-sheet-h img { max-width: 58%; max-height: 22px; object-fit: contain; }
.sm .in-dl-sheet-h b { overflow: hidden; font-size: 11px; color: var(--nv-800); text-overflow: ellipsis; white-space: nowrap; }
.sm .in-dl-sheet-h i {
  flex: none;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  color: var(--dl-accent, var(--teal));
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sm .in-dl-sheet-t {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--nv-800);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.sm .in-dl-sheet-img { display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; }
.sm .in-dl-sheet-img img { max-width: 80%; max-height: 100%; object-fit: contain; }
.sm .in-dl-sheet-lines {
  flex: 1;
  background: repeating-linear-gradient(180deg, #e7ebf1 0 4px, transparent 4px 11px);
  opacity: .9;
  mask-image: linear-gradient(90deg, #000 70%, rgb(0 0 0 / 40%));
}

/* 左上角类型角标 */
.sm .in-dl-badge {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .03em;
  background: var(--dl-accent, var(--teal));
  border-radius: 0 0 8px 0;
}
.sm .in-dl-badge svg { width: 11px; height: 11px; }
.sm .in-dl-c--tds   { --dl-accent: #0a8fa6; }
.sm .in-dl-c--sds   { --dl-accent: #c2721a; }
.sm .in-dl-c--other { --dl-accent: #5a4fa0; }

.sm .in-dl-b { display: flex; flex: 1; flex-direction: column; gap: 5px; padding: 12px 14px 14px; }
.sm .in-dl-t { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.45; }
.sm .in-dl-t a {
  display: -webkit-box;
  min-height: 2.9em;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sm .in-dl-t a:hover { color: var(--teal); }
.sm .in-dl-m { margin: 0; overflow: hidden; font-size: 12.5px; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.sm .in-dl-i {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  justify-content: space-between;
  margin: 0;
  font-size: 11.5px;
  color: #8a939c;
  font-variant-numeric: tabular-nums;
}
.sm .in-dl-a { display: flex; gap: 10px; align-items: center; margin-top: auto; padding-top: 8px; }
.sm .in-dl-btn {
  display: inline-flex;
  flex: 1;
  gap: 6px;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: var(--nv-800);
  border-radius: 5px;
  transition: background .15s;
}
.sm .in-dl-btn svg { width: 16px; height: 16px; }
.sm .in-dl-btn:hover { background: var(--teal); }
.sm .in-dl-btn.is-lock { color: #8a5310; background: #fdf3e4; border: 1px solid #f0d6ad; }
.sm .in-dl-btn.is-lock:hover { color: #fff; background: #c2721a; border-color: #c2721a; }
.sm .in-dl-p { flex: none; font-size: 12.5px; color: var(--teal); text-decoration: none; white-space: nowrap; }
.sm .in-dl-p:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .sm .in-dl-cats { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .sm .in-dl-cat { flex: none; min-width: 0; padding: 9px 16px; font-size: 14px; }
  .sm .in-dl-panel { padding: 4px 12px; }
  .sm .in-dl-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sm .in-dl-row--sub .in-dl-k { display: none; }
  .sm .in-dl-q { flex-basis: 100%; }
  .sm .in-dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sm .in-dl-b { padding: 10px; }
  .sm .in-dl-a { flex-direction: column; align-items: stretch; gap: 6px; }
  .sm .in-dl-p { text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════
   新闻分类（2026-10-12，view/intl/news.php / article.php）
   分类栏复用知识库的 .in-kbtabs；这里只补篇数与分类标签
   ══════════════════════════════════════════════════════════════════════ */
.sm .in-newstabs { flex-wrap: wrap; margin-top: 0; }
.sm .in-kbtab i {
  margin-left: 6px;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  color: var(--ink-2);
  opacity: .7;
  font-variant-numeric: tabular-nums;
}
.sm .in-news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sm .in-news-cat {
  display: inline-block;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 20px;
  color: var(--teal-d);
  text-decoration: none;
  white-space: nowrap;
  background: rgb(10 143 166 / 9%);
  border-radius: 10px;
}
/* 分类标签配色（2026-10-17）：分类由后台维护，颜色在「管理分类」里选，
   与 app/service/IntlNewsCat::COLORS 一一对应 —— 加颜色两边一起加。
   teal 就是上面的默认样式，不用再写。 */
.sm .in-news-cat--c-amber  { color: #a8521b; background: rgb(194 114 26 / 11%); }
.sm .in-news-cat--c-violet { color: #4f479b; background: rgb(90 79 160 / 10%); }
.sm .in-news-cat--c-blue   { color: #1f5fae; background: rgb(36 103 196 / 10%); }
.sm .in-news-cat--c-green  { color: #2d7a3e; background: rgb(46 140 70 / 11%); }
.sm .in-news-cat--c-rose   { color: #b0384b; background: rgb(196 56 80 / 10%); }
.sm .in-news-cat--c-slate  { color: #4a5563; background: rgb(74 85 99 / 10%); }
/* 旧 class（按分类 slug 命名）：尚未重建的静态页里还在用，保留到下一次全站刷新之后即可删 */
.sm .in-news-cat--announcements { color: #a8521b; background: rgb(194 114 26 / 11%); }
.sm .in-news-cat--industry { color: #4f479b; background: rgb(90 79 160 / 10%); }
.sm a.in-news-cat:hover { filter: brightness(.9); }
.sm .in-art-meta { align-items: center; }
@media (max-width: 760px) {
  .sm .in-newstabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sm .in-newstabs .in-kbtab { flex: none; padding: 10px 12px; font-size: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════
   关于摩润（2026-10-12，view/intl/about.php）
   品牌页：用底色、留白和卡片分区，不用分隔线与色条
   ══════════════════════════════════════════════════════════════════════ */
/* ── 首屏（2026-10-18）：背景视频 + 动效 ───────────────────────────────
   分层（下 → 上）：
     .ab-hero-media  绝对定位铺满：封面图 → 视频 → 极光 → 遮罩 → 光带
     .ab-hero-body   正文（面包屑 / 标题 / 导语 / 按钮 / 数据条）
     .ab-hero-toggle 暂停按钮
   所有动画只动 transform / opacity，走合成层，不触发重排。
   ⚠️ 不要给视频加 filter（blur / brightness）：会让每一帧都走 CPU 重绘，
      低端笔记本上风扇立刻起飞。压暗靠上面那层 .ab-hero-shade。 */
.sm .ab-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: clamp(560px, 80vh, 780px);
  padding: 0;
  background: var(--nv-900);
}
.sm .ab-hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sm .ab-hero-poster,
.sm .ab-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 视频先透明，真正开始出帧（playing）后由脚本加 .is-on 淡入：避免先闪一下黑帧 */
.sm .ab-hero-video { opacity: 0; transition: opacity .9s ease; }
.sm .ab-hero-video.is-on { opacity: 1; }

/* 极光：无视频时它就是主角（动得明显一点），有视频时只是一层淡淡的品牌色氛围 */
.sm .ab-hero-aurora {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 46% at 82% 18%, rgb(10 143 166 / 46%), transparent 70%),
    radial-gradient(34% 40% at 12% 92%, rgb(36 72 138 / 70%), transparent 72%),
    radial-gradient(30% 34% at 58% 70%, rgb(127 211 224 / 16%), transparent 70%);
  opacity: .9;
}
.sm .ab-hero[data-media="none"] .ab-hero-media { background: linear-gradient(180deg, var(--nv-800) 0%, var(--nv-900) 100%); }
.sm .ab-hero:not([data-media="none"]) .ab-hero-aurora { opacity: .38; mix-blend-mode: screen; }

/* 遮罩：左深右浅（文字在左），底部再压一道，让数据条与下方白色正文之间过渡干净 */
.sm .ab-hero-shade {
  position: absolute;
  inset: 0;
  --sh-l: .86; --sh-r: .34; --sh-b: .78;
  background:
    linear-gradient(90deg, rgb(18 41 79 / var(--sh-l)) 0%, rgb(18 41 79 / calc(var(--sh-l) * .82)) 38%, rgb(18 41 79 / var(--sh-r)) 100%),
    linear-gradient(0deg, rgb(18 41 79 / var(--sh-b)) 0%, rgb(18 41 79 / 0) 42%),
    linear-gradient(180deg, rgb(18 41 79 / .55) 0%, rgb(18 41 79 / 0) 22%);
}
.sm .ab-hero[data-overlay="light"]  .ab-hero-shade { --sh-l: .74; --sh-r: .16; --sh-b: .68; }
.sm .ab-hero[data-overlay="strong"] .ab-hero-shade { --sh-l: .93; --sh-r: .58; --sh-b: .86; }
.sm .ab-hero[data-media="none"]     .ab-hero-shade { display: none; }

/* 光带：一道斜向的品牌色高光，每 11 秒掠过一次 */
.sm .ab-hero-sweep {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent 0%, rgb(127 211 224 / 0) 30%, rgb(127 211 224 / 13%) 50%, rgb(127 211 224 / 0) 70%, transparent 100%);
  transform: translateX(-120%) skewX(-14deg);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
}

.sm .ab-hero-body {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 0;
}
.sm .ab-hero-in { max-width: 820px; padding: clamp(40px, 9vh, 96px) 0 8px; margin-top: auto; }
.sm .ab-eyebrow {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  color: #7fd3e0;
}
.sm .ab-hero h1 {
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.16;
  letter-spacing: .02em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgb(8 20 44 / 35%);
}
.sm .ab-lead { max-width: 62ch; margin: 20px 0 0; font-size: 16.5px; line-height: 1.9; color: rgb(255 255 255 / 86%); text-shadow: 0 1px 12px rgb(8 20 44 / 40%); }
.sm .ab-hero-act { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.sm .ab-hero .sm-btn--ghost { background: rgb(255 255 255 / 6%); }
.sm .ab-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  padding: 24px 28px;
  margin: clamp(32px, 7vh, 64px) 0 36px;
  list-style: none;
  background: rgb(18 41 79 / 42%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}
.sm .ab-stats li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sm .ab-stats b { font-size: clamp(26px, 2.5vw, 36px); font-weight: 700; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.sm .ab-stats span { font-size: 13px; color: rgb(255 255 255 / 72%); }

/* 暂停 / 播放按钮（WCAG 2.2.2：超过 5 秒的自动播放必须能停） */
.sm .ab-hero-toggle {
  position: absolute;
  /* 放右上角（与面包屑同一行）：放右下角会压到数据条的边框 */
  top: clamp(12px, 1.4vw, 16px);
  right: clamp(14px, 2vw, 28px);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: #fff;
  cursor: pointer;
  background: rgb(18 41 79 / 45%);
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .2s ease, border-color .2s ease;
}
.sm .ab-hero-toggle:hover { background: rgb(18 41 79 / 70%); border-color: rgb(255 255 255 / 55%); }
.sm .ab-hero-toggle:focus-visible { outline: 2px solid #7fd3e0; outline-offset: 3px; }
.sm .ab-hero-toggle svg { width: 16px; height: 16px; }
.sm .ab-hero-toggle .i-play,
.sm .ab-hero-toggle.is-paused .i-pause { display: none; }
.sm .ab-hero-toggle.is-paused .i-play { display: block; }
.sm .ab-hero-toggle[hidden] { display: none; }

/* ── 动效（data-fx="full"；减少动态效果时整段不生效）──────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* 画面推近：进场 2.6 秒从 1.08 缩到 1，之后静止 —— 一直缩放会让视频边缘发虚 */
  .sm .ab-hero[data-fx="full"] .ab-hero-poster,
  .sm .ab-hero[data-fx="full"] .ab-hero-video { animation: ab-push 2.6s cubic-bezier(.2, .7, .2, 1) both; }
  .sm .ab-hero[data-fx="full"] .ab-hero-sweep { animation: ab-sweep 11s ease-in-out 1.6s infinite; }
  .sm .ab-hero[data-fx="full"] .ab-hero-aurora { animation: ab-aurora 18s ease-in-out infinite alternate; }
  .sm .ab-hero[data-fx="full"][data-media="none"] .ab-hero-aurora { animation-duration: 12s; }

  /* 文字依次浮入：终态就是正常排版，没有 JS 也照常播放并停在终态 */
  .sm .ab-hero[data-fx="full"] .ab-rise {
    animation: ab-rise .9s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(.15s + var(--i, 0) * .12s);
  }
}
@keyframes ab-push   { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes ab-rise   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ab-sweep {
  0%   { opacity: 0; transform: translateX(-120%) skewX(-14deg); }
  12%  { opacity: 1; }
  38%  { opacity: 1; }
  50%  { opacity: 0; transform: translateX(320%) skewX(-14deg); }
  100% { opacity: 0; transform: translateX(320%) skewX(-14deg); }
}
@keyframes ab-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) rotate(4deg) scale(1.05); }
  100% { transform: translate3d(2%, -2%, 0) rotate(-3deg) scale(1.02); }
}

/* 打印：媒体层与按钮都不要，回到白底黑字 */
@media print {
  .sm .ab-hero { min-height: 0; color: #000; background: none; }
  .sm .ab-hero h1, .sm .ab-stats b { color: #000; text-shadow: none; }
  .sm .ab-lead, .sm .ab-stats span { color: #333; text-shadow: none; }
  .sm .ab-hero-media, .sm .ab-hero-toggle { display: none; }
  .sm .ab-stats { background: none; border-color: #999; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 2026-10-29：各项平分且居中 —— 格子本来就是等宽的，但内容靠左，视觉上像没有平分。
   内容在格内水平 + 垂直居中，项与项之间加细分隔线（与首页统计条一致）；换行布局时去掉分隔线。 */
.sm .ab-stats { padding-inline: 12px; column-gap: 0; }
.sm .ab-stats li { align-items: center; justify-content: center; padding: 4px 12px; text-align: center; }
.sm .ab-stats li + li { border-inline-start: 1px solid rgb(255 255 255 / 14%); }

.sm .ab { padding-bottom: 0; }
.sm .ab-sec { padding: clamp(48px, 6vw, 84px) 0; }
.sm .ab-sec--tint { background: var(--bg); }
.sm .ab-kicker { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.sm .ab h2 { margin: 0; font-size: clamp(24px, 2.3vw, 32px); font-weight: 700; line-height: 1.28; color: var(--nv-800); }
.sm .ab-head { max-width: 780px; margin: 0 0 30px; }
.sm .ab-head p { margin: 14px 0 0; font-size: 15.5px; line-height: 1.9; color: var(--ink-2); }

/* 公司简介 */
.sm .ab-intro { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 84px); align-items: start; }
.sm .ab-flow {
  margin: 30px 0 0;
  padding: 26px 28px 24px;
  color: #fff;
  background: linear-gradient(140deg, var(--teal) 0%, var(--nv-800) 100%);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgb(18 41 79 / 18%);
}
.sm .ab-flow-t { margin: 0 0 14px; font-size: 17px; font-weight: 700; }
.sm .ab-flow ol { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.sm .ab-flow li { display: flex; gap: 12px; align-items: center; padding: 8px 12px; font-size: 14.5px; background: rgb(255 255 255 / 9%); border-radius: 8px; }
.sm .ab-flow i {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  color: var(--nv-800);
  background: #fff;
  border-radius: 50%;
}
.sm .ab-intro-r > p { margin: 0 0 16px; font-size: 16px; line-height: 1.95; color: var(--ink); }
.sm .ab-facets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 28px; }
.sm .ab-facet { padding: 22px 24px; background: var(--bg); border-radius: 12px; }
.sm .ab-facet h3 { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--nv-800); }
.sm .ab-series { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 16px; padding: 0; margin: 0; list-style: none; }
.sm .ab-series li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.5; color: var(--ink); }
.sm .ab-series i { flex: none; font-size: 12px; font-style: normal; font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }
.sm .ab-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.sm .ab-chips li { padding: 5px 13px; font-size: 13.5px; color: var(--nv-800); background: #fff; border-radius: 999px; box-shadow: 0 1px 2px rgb(18 41 79 / 8%); }

/* 2026-10-29：右侧两张灰卡下移，与左侧蓝绿色块底边对齐。
   两栏拉成等高（stretch）并各自做成纵向 flex：左栏的流程块、右栏的两张卡都用 margin-top:auto 贴底，
   中间的空白由 auto 吸收；标题与正文下方各留一段最小间距，内容再多也不会贴在一起。
   单栏布局（≤860px）时两栏高度都是自然高度，auto 不产生多余空白。 */
.sm .ab-intro { align-items: stretch; }
.sm .ab-intro-l, .sm .ab-intro-r { display: flex; flex-direction: column; min-width: 0; }
.sm .ab-intro-l h2 { margin-bottom: 30px; }
.sm .ab-intro-l .ab-flow { margin-top: auto; }
.sm .ab-intro-r > p:last-of-type { margin-bottom: 28px; }
.sm .ab-intro-r .ab-facets { align-items: stretch; margin-top: auto; }

/* 灰卡细节 */
.sm .ab-facet {
  display: flex;
  flex-direction: column;
  padding: 24px 26px 26px;
  background: var(--bg);
  border: 1px solid #e7ebf0;
  border-radius: 14px;
  transition: box-shadow .2s, border-color .2s;
}
.sm .ab-facet:hover { border-color: #d9e3ec; box-shadow: 0 10px 26px rgb(18 41 79 / 8%); }
.sm .ab-facet h3 { display: flex; gap: 10px; align-items: center; margin: 0 0 16px; font-size: 16px; letter-spacing: .02em; }
.sm .ab-facet h3::before { flex: none; width: 4px; height: 16px; content: ''; background: linear-gradient(180deg, var(--teal), var(--nv-800)); border-radius: 2px; }

.sm .ab-series { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* 系列卡内容更多，多分一点宽度；中等屏幕上系列也能保持两列，卡片不会被拉得过高 */
.sm .ab-intro-r .ab-facets { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.sm .ab-series li {
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  font-size: 14px;
  line-height: 1.4;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(18 41 79 / 6%);
}
.sm .ab-series i {
  display: inline-grid;
  min-width: 26px;
  height: 20px;
  padding: 0 5px;
  font-size: 11.5px;
  color: var(--teal-d);
  background: #e7f5f8;
  border-radius: 5px;
  place-items: center;
}

.sm .ab-chips { gap: 8px 10px; }
.sm .ab-chips li {
  padding: 6px 15px;
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid #e3e8ee;
  box-shadow: none;
  transition: color .15s, border-color .15s, background .15s;
}
.sm .ab-chips li:hover { color: var(--teal-d); background: #f2fafb; border-color: #bfe2e9; }

/* 合作品牌 */
.sm .ab-brands { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
/* 品牌墙列数五档（2026-10-29）。⚠️ 与 view/intl/about.php 里的 $wallCols 必须一一对应：
   模板按这五个列数算每档显示几个，超出的打上 bw-x{列数}，在对应区间隐藏。 */
@media (min-width: 1440px) { .sm .ab-brands li.bw-x9 { display: none; } }
@media (min-width: 1100px) and (max-width: 1439.98px) {
  .sm .ab-brands { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .sm .ab-brands li.bw-x7 { display: none; }
}
@media (min-width: 861px) and (max-width: 1099.98px) {
  .sm .ab-brands { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sm .ab-brands li.bw-x5 { display: none; }
}
@media (min-width: 561px) and (max-width: 860.98px) {
  .sm .ab-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm .ab-brands li.bw-x4 { display: none; }
}
@media (max-width: 560.98px) {
  .sm .ab-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm .ab-brands li.bw-x2 { display: none; }
}
.sm .ab-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 112px;
  padding: 8px 14px;
  text-decoration: none;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(18 41 79 / 7%);
  transition: box-shadow .2s, transform .2s;
}
.sm a.ab-brand:hover { box-shadow: 0 10px 24px rgb(18 41 79 / 12%); transform: translateY(-2px); }
/* 品牌 LOGO 多是带留白的方图（品牌中心 1:1 卡片用的同一张），按高度撑满卡片才不会显得太小 */
.sm .ab-brand img { width: 100%; height: 100%; object-fit: contain; }
.sm .ab-brand b { font-size: 14.5px; font-weight: 700; line-height: 1.35; letter-spacing: .02em; color: var(--nv-800); text-align: center; }
.sm .ab-more { margin: 24px 0 0; }
.sm .ab-more a { font-size: 14.5px; font-weight: 600; color: var(--teal-d); text-decoration: none; }
.sm .ab-more a:hover { color: var(--teal); }

/* 我们在哪里 */
.sm .ab-where { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 76px); align-items: center; }
.sm .ab-where-l > p { margin: 16px 0 0; font-size: 15.5px; line-height: 1.9; color: var(--ink-2); }
.sm .ab-hq { display: flex; gap: 14px; padding: 18px 20px; margin-top: 24px; background: var(--bg); border-radius: 12px; }
.sm .ab-hq svg { flex: none; width: 24px; height: 24px; color: var(--teal); }
.sm .ab-hq b { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.sm .ab-hq span { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--nv-800); }
.sm .ab-hubs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.sm .ab-hub {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 200px;
  padding: 22px;
  color: #fff;
  background: linear-gradient(160deg, var(--nv-700, #24488a) 0%, var(--nv-900) 100%);
  border-radius: 14px;
}
.sm .ab-hub.is-hq { background: linear-gradient(160deg, var(--teal) 0%, var(--nv-800) 100%); }
.sm .ab-hub i { font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: .12em; opacity: .6; }
.sm .ab-hub b { margin-top: auto; font-size: 24px; font-weight: 700; }
.sm .ab-hub-c { font-size: 13px; opacity: .75; }
.sm .ab-hub-r { font-size: 13.5px; font-weight: 600; line-height: 1.5; }

/* 仓储中心卡片背景图（2026-10-29）。
   图放在一个真实的 <img> 上（懒加载、可被搜索引擎识别为图片资源），铺满卡片后压一层遮罩：
   顶部浅、底部深 —— 编号在顶部只需要一点点对比度，城市名和说明在底部需要最多。
   总部那张遮罩带青色，保留「总部 = 青色」这层既有的视觉区分。没传图的卡片完全不受影响。 */
.sm .ab-hub { position: relative; overflow: hidden; isolation: isolate; }
.sm .ab-hub-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.sm .ab-hub.has-img::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: '';
  background: linear-gradient(180deg, rgb(18 41 79 / 30%) 0%, rgb(18 41 79 / 45%) 40%, rgb(12 28 54 / 92%) 100%);
}
.sm .ab-hub.is-hq.has-img::before {
  background: linear-gradient(180deg, rgb(10 143 166 / 34%) 0%, rgb(14 86 120 / 48%) 40%, rgb(12 34 66 / 92%) 100%);
}
.sm .ab-hub.has-img { box-shadow: 0 12px 30px rgb(18 41 79 / 16%); }
.sm .ab-hub.has-img b, .sm .ab-hub.has-img span { text-shadow: 0 1px 8px rgb(0 0 0 / 28%); }
.sm .ab-hub.has-img i { opacity: .85; }
.sm .ab-hub:hover .ab-hub-bg { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { .sm .ab-hub-bg { transition: none; } .sm .ab-hub:hover .ab-hub-bg { transform: none; } }

/* 我们的优势 */
.sm .ab-adv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 0; margin: 0; list-style: none; }
.sm .ab-adv li {
  padding: 28px 24px 30px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgb(18 41 79 / 7%);
  transition: box-shadow .2s, transform .2s;
}
.sm .ab-adv li:hover { box-shadow: 0 12px 28px rgb(18 41 79 / 11%); transform: translateY(-2px); }
.sm .ab-adv-ic { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; color: var(--teal); background: rgb(10 143 166 / 10%); border-radius: 12px; }
.sm .ab-adv-ic svg { width: 26px; height: 26px; }
.sm .ab-adv h3 { margin: 18px 0 10px; font-size: 18px; font-weight: 700; color: var(--nv-800); }
.sm .ab-adv p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--ink-2); }

/* 从这里开始 */
.sm .ab-start { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 0; margin: 0; list-style: none; }
.sm .ab-start a {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 20px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--nv-800);
  text-decoration: none;
  background: var(--bg);
  border-radius: 12px;
  transition: background .2s, color .2s;
}
.sm .ab-start a:hover { color: #fff; background: var(--teal); }
.sm .ab-start i { font-style: normal; color: var(--teal); transition: transform .2s, color .2s; }
.sm .ab-start a:hover i { color: #fff; transform: translateX(3px); }

/* 底部行动 */
.sm .ab-cta { padding: 46px 0; color: #fff; background: linear-gradient(120deg, var(--nv-800) 0%, var(--nv-900) 100%); }
.sm .ab-cta-in { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
.sm .ab .ab-cta h2 { font-size: clamp(21px, 2vw, 26px); color: #fff; }
.sm .ab-cta p { max-width: 66ch; margin: 10px 0 0; font-size: 15px; line-height: 1.8; color: rgb(255 255 255 / 78%); }

@media (max-width: 1100px) {
  .sm .ab-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 22px; }
  .sm .ab-stats li + li { border-inline-start: 0; }
  .sm .ab-adv, .sm .ab-start { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sm .ab-intro, .sm .ab-where, .sm .ab-facets, .sm .ab-intro-r .ab-facets { grid-template-columns: minmax(0, 1fr); }
  .sm .ab-hubs { grid-template-columns: minmax(0, 1fr); }
  .sm .ab-hub { min-height: 0; }
  .sm .ab-hub b { margin-top: 8px; }
}
@media (max-width: 760px) {
  /* 手机：首屏不再强撑到 80vh —— 竖屏上那样会把数据条挤到第二屏 */
  .sm .ab-hero { min-height: 0; }
  .sm .ab-hero-in { padding-top: 28px; }
  .sm .ab-hero h1 { font-size: clamp(28px, 8vw, 36px); }
  /* 手机上文字占满宽度，遮罩改为整体压暗而不是左深右浅 */
  .sm .ab-hero-shade {
    background:
      linear-gradient(180deg, rgb(18 41 79 / calc(var(--sh-l) * .8)) 0%, rgb(18 41 79 / calc(var(--sh-l) * .72)) 55%, rgb(18 41 79 / var(--sh-b)) 100%);
  }
  .sm .ab-hero-toggle { width: 34px; height: 34px; }
}
@media (max-width: 560px) {
  .sm .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 20px; }
  .sm .ab-stats li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sm .ab-series { grid-template-columns: minmax(0, 1fr); }
  .sm .ab-adv, .sm .ab-start { grid-template-columns: minmax(0, 1fr); }
  .sm .ab-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm .ab-brand { height: 92px; }
  .sm .ab-lead, .sm .ab-intro-r > p { font-size: 15px; }
}

/* 单页 / 新闻正文去掉装饰线（2026-10-12）：小标题左侧色条、导语左侧竖线、小标题上方分隔线 */
.sm .in-art--doc .in-rt h2 { padding-left: 0; }
.sm .in-art--doc .in-rt h2::before { content: none; }
.sm .in-art--doc .in-rt--wide > h2 { padding-top: 0; border-top: 0; }
.sm .in-art--doc .in-rt--wide > h2 + p { padding-left: 0; border-left: 0; }

/* ══════════════════════════════════════════════════════════════════════
   帮助与支持（2026-10-12，view/intl/support.php）—— 与关于页同一套 ab-* 版式
   ══════════════════════════════════════════════════════════════════════ */
.sm .sp-contact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: center;
  padding: 22px 28px;
  margin: 34px 0 36px;
  list-style: none;
  background: rgb(255 255 255 / 6%);
  border-radius: 14px;
}
.sm .sp-contact li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sm .sp-contact span { font-size: 12.5px; color: rgb(255 255 255 / 66%); }
.sm .sp-contact a, .sm .sp-contact b { font-size: 18px; font-weight: 700; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.sm .sp-contact a:hover { color: #7fd3e0; }
.sm .sp-contact-act .sm-btn { align-self: flex-start; padding: 9px 18px; font-size: 14px; }
/* 2026-10-29：四项平分且居中（与关于页统计条同一做法）：格内水平 + 垂直居中，项间细分隔线；
   换成两列 / 一列时去掉分隔线，避免出现错位的竖线。 */
.sm .sp-contact { column-gap: 0; padding-inline: 12px; }
.sm .sp-contact li { align-items: center; justify-content: center; padding: 4px 14px; text-align: center; }
.sm .sp-contact li + li { border-inline-start: 1px solid rgb(255 255 255 / 14%); }
.sm .sp-contact-act .sm-btn { align-self: center; }

.sm .sp-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.sm .sp-quick a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 24px 24px 22px;
  text-decoration: none;
  background: var(--bg);
  border-radius: 14px;
  transition: background .2s, box-shadow .2s, transform .2s;
}
.sm .sp-quick a:hover { background: #fff; box-shadow: 0 12px 28px rgb(18 41 79 / 11%); transform: translateY(-2px); }
.sm .sp-quick b { margin-top: 8px; font-size: 17px; font-weight: 700; color: var(--nv-800); }
.sm .sp-quick em { padding-right: 24px; font-size: 14px; font-style: normal; line-height: 1.7; color: var(--ink-2); }
.sm .sp-quick i { position: absolute; right: 22px; bottom: 22px; font-style: normal; color: var(--teal); transition: transform .2s; }
.sm .sp-quick a:hover i { transform: translateX(3px); }

.sm .sp-topics { display: grid; gap: 18px; }
.sm .sp-topic {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(24px, 3vw, 38px);
  scroll-margin-top: 120px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgb(18 41 79 / 7%);
}
.sm .sp-topic-n { display: block; margin: 16px 0 4px; font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: .12em; color: var(--teal); }
.sm .sp .sp-topic h2 { font-size: clamp(20px, 1.8vw, 24px); }
.sm .sp-topic-l p { margin: 10px 0 0; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.sm .sp-topic-r p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.95; color: var(--ink); }
.sm .sp-topic-a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 9px 16px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal-d);
  text-decoration: none;
  background: rgb(10 143 166 / 9%);
  border-radius: 999px;
  transition: background .2s, color .2s;
}
.sm .sp-topic-a:hover { color: #fff; background: var(--teal); }
.sm .sp-topic-a i { font-style: normal; }

.sm .sp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 0; margin: 0; list-style: none; }
.sm .sp-steps li { padding: 26px 24px 28px; background: var(--bg); border-radius: 14px; }
.sm .sp-steps i { font-size: 30px; font-style: normal; font-weight: 700; line-height: 1; color: var(--teal); font-variant-numeric: tabular-nums; }
.sm .sp-steps h3 { margin: 14px 0 8px; font-size: 17px; font-weight: 700; color: var(--nv-800); }
.sm .sp-steps p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink-2); }

.sm .sp-partner-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sm a.sp-pcard { min-height: 180px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.sm a.sp-pcard:hover { box-shadow: 0 14px 30px rgb(18 41 79 / 22%); transform: translateY(-2px); }
.sm .sp-pcard b { margin-top: 0; font-size: 22px; }
.sm .sp-pcard .ab-hub-r { font-weight: 500; opacity: .86; }
.sm .sp-pcard-btn { margin-top: auto; font-size: 14px; font-weight: 700; }

@media (max-width: 1100px) {
  .sm .sp-contact, .sm .sp-quick, .sm .sp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm .sp-contact { row-gap: 20px; }
  .sm .sp-contact li + li { border-inline-start: 0; }
}
@media (max-width: 860px) {
  .sm .sp-topic, .sm .sp-partner-g { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sm .sp-contact, .sm .sp-quick, .sm .sp-steps { grid-template-columns: minmax(0, 1fr); }
  .sm .sp-contact { padding: 20px; }
  .sm .sp-topic-r p { font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════════════════
   产品图放大（2026-10-12，inner-island.js initZoom）
   桌面悬停：主图框内 2.5 倍放大镜；点击：全屏大图（切换 / 缩放 / 拖动 / 滑动）
   ══════════════════════════════════════════════════════════════════════ */
.sm .in-gal-main.has-zoom { position: relative; overflow: hidden; }
.sm .in-gal-main.has-zoom img[data-gal-main] { cursor: zoom-in; }
.sm .in-zoom-lens {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-color: #fff;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .15s;
}
.sm .in-gal-main.is-zooming .in-zoom-lens { opacity: 1; }
.sm .in-zoom-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 5px 10px 5px 8px;
  font-size: 12px;
  color: #fff;
  pointer-events: none;
  background: rgb(18 41 79 / 62%);
  border-radius: 999px;
  transition: opacity .2s;
}
.sm .in-zoom-hint svg { width: 15px; height: 15px; }
.sm .in-gal-main.is-zooming .in-zoom-hint,
.sm .in-gal-main.is-video .in-zoom-hint,
.sm .in-gal-main.is-video .in-zoom-lens { opacity: 0; }

/* 全屏大图 */
html.in-lb-lock, html.in-lb-lock body { overflow: hidden; }
.sm .in-lb {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgb(8 16 30 / 94%);
  animation: in-lb-in .18s ease;
}
.sm .in-lb[hidden] { display: none; }
@keyframes in-lb-in { from { opacity: 0; } to { opacity: 1; } }
.sm .in-lb-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}
.sm .in-lb-img {
  max-width: min(92vw, 1400px);
  max-height: calc(100vh - 170px);
  object-fit: contain;
  cursor: zoom-in;
  background: #fff;
  border-radius: 6px;
  transform-origin: center center;
  will-change: transform;
}
.sm .in-lb.is-zoomed .in-lb-img { cursor: grab; }
.sm .in-lb.is-zoomed .in-lb-img:active { cursor: grabbing; }
.sm .in-lb button { font-family: inherit; cursor: pointer; border: 0; }
.sm .in-lb-x {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  width: 44px;
  height: 44px;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  background: rgb(255 255 255 / 12%);
  border-radius: 50%;
}
.sm .in-lb-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 48px;
  height: 64px;
  margin-top: -32px;
  font-size: 38px;
  line-height: 1;
  color: #fff;
  background: rgb(255 255 255 / 10%);
  border-radius: 10px;
}
.sm .in-lb-prev { left: 18px; }
.sm .in-lb-next { right: 18px; }
.sm .in-lb-x:hover, .sm .in-lb-nav:hover, .sm .in-lb-bar button:hover { background: var(--teal); }
.sm .in-lb.is-single .in-lb-nav { display: none; }
.sm .in-lb-bar {
  position: absolute;
  bottom: 86px;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 4px;
  color: #fff;
  background: rgb(255 255 255 / 12%);
  border-radius: 999px;
  transform: translateX(-50%);
}
.sm .in-lb-bar button { width: 34px; height: 34px; font-size: 20px; line-height: 1; color: #fff; background: transparent; border-radius: 50%; }
.sm .in-lb-n { min-width: 56px; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.sm .in-lb-thumbs {
  position: absolute;
  bottom: 16px;
  left: 50%;
  z-index: 2;
  display: flex;
  gap: 8px;
  max-width: 92vw;
  overflow-x: auto;
  transform: translateX(-50%);
}
.sm .in-lb-thumbs button {
  flex: none;
  width: 56px;
  height: 56px;
  padding: 3px;
  background: #fff;
  border-radius: 6px;
  opacity: .55;
  transition: opacity .15s;
}
.sm .in-lb-thumbs button[aria-current='true'] { opacity: 1; box-shadow: 0 0 0 2px var(--teal); }
.sm .in-lb-thumbs img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 760px) {
  .sm .in-lb-img { max-width: 100vw; max-height: calc(100vh - 150px); border-radius: 0; }
  .sm .in-lb-nav { display: none; }   /* 手机上左右滑动翻页 */
  .sm .in-lb-bar { bottom: 80px; }
}

/* ══════════════════════════════════════════════════════════════════════
   产品详情首屏改版（2026-10-12）：图更大、中列「简介 → 速览 → 规格 → 跳转 → 按钮」
   ══════════════════════════════════════════════════════════════════════ */
/* 图廊约占主栏一半（原来固定 400px，主图只有 314px） */
.sm .in-top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 30px; }
@media (min-width: 1500px) { .sm .in-top { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); } }
.sm .in-gal { position: relative; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: stretch; }
/* 缩略图列高度 = 主图高度（纯 CSS，不等 JS）：height:0 让它不参与撑高这一行，
   min-height:100% 再拉回到主图那么高；缩略图多了就在列内上下滑动 */
.sm .in-gal-thumbs {
  height: 0;
  min-height: 100%;
  padding: 2px 4px 2px 2px;
  overflow-y: auto;
  /* 2026-10-29：去掉 overscroll-behavior:contain —— 缩略图不多时，光标停在这一列滚轮滚不动整页 */
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scrollbar-width: thin;
}
.sm .in-gal-thumbs button { scroll-snap-align: start; }
/* 上下翻动按钮：缩略图超出时由 inner-island 插入 */
.sm .in-gal-arrow {
  position: absolute;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 26px;
  padding: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--nv-800);
  cursor: pointer;
  background: rgb(255 255 255 / 92%);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 2px 6px rgb(18 41 79 / 10%);
  transition: opacity .15s, background .15s;
}
.sm .in-gal-arrow:hover { color: #fff; background: var(--teal); border-color: var(--teal); }
.sm .in-gal-arrow--up { top: 0; }
.sm .in-gal-arrow--down { bottom: 0; }
.sm .in-gal-arrow[disabled] { pointer-events: none; opacity: 0; }
.sm .in-gal-thumbs button { flex: none; border-radius: 8px; }
.sm .in-gal-thumbs button[aria-selected='true'] { border-color: var(--teal); box-shadow: 0 0 0 2px rgb(10 143 166 / 25%); }
.sm .in-gal-main { padding: 22px; background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgb(18 41 79 / 6%); }
.sm .in-gal-vthumb i { width: 34px; height: 34px; font-size: 13px; }

/* 中列 */
.sm .in-top-b { gap: 16px; }
.sm .in-tsec-h {
  padding-bottom: 8px;
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 700;
  color: var(--nv-800);
  border-bottom: 3px solid #09398b;
}
.sm .in-tsec-body {
  max-height: 9.3em;   /* 约 5 行，超出在框内滚动 */
  padding-right: 8px;
  overflow-y: auto;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--ink);
  white-space: pre-line;
  scrollbar-width: thin;
}
.sm .in-tsec-body:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.sm .in-tcta { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin-top: 4px; }
.sm .in-tcta a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 6px;
  transition: background .18s, transform .18s, box-shadow .18s;
}
.sm .in-tcta-main { letter-spacing: .08em; background: #d9232d; box-shadow: 0 6px 16px rgb(217 35 45 / 25%); }
.sm .in-tcta-main:hover { background: #b91c25; transform: translateY(-1px); }
.sm .in-tcta-doc { background: #09398b; }
.sm .in-tcta-doc:hover { background: #072c6b; transform: translateY(-1px); }

/* 首屏中列与大图底边对齐（2026-10-29，仅两栏并排时）
   · 这一行拉伸（stretch），中列跟着拉到与图廊同高；图廊自己 align-self:start，不会被拉变形。
   · 「产品简介」正文用 contain:size —— 它的文字多少不参与撑高这一行，只吃剩余空间：
     简介短就留白，长了在框内滚动。
   · 包装规格 / 应用领域 / 本页内容 / 按钮整组贴底，按钮下沿 = 大图下沿。
   · 兜底：屏幕偏窄、规格标签又多、整组放不进大图高度时，这一行自然长高（按钮落在大图下沿稍下方），
     绝不会溢出压住下面的内容 —— 这是不用 height:0 硬锁高度的原因。 */
@media (width > 860px) {
  .sm .in-top { align-items: stretch; }
  .sm .in-top > .in-gal { align-self: start; }
  .sm .in-top-b > * { flex: none; }
  .sm .in-top-b > .in-tsec { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  .sm .in-top-b .in-tsec-body {
    flex: 1 1 auto;
    min-height: 3.7em;   /* 至少露出两行开头 */
    max-height: none;
    padding-right: 12px;
    contain: size;
    /* 不要 overscroll-behavior:contain（2026-10-29 修）：Chrome 下它会让简介框拦住滚轮 ——
       简介短、框里根本没东西可滚时，光标停在空白处整页也滚不动；简介长时滚到底也不会接着滚页面。
       浏览器默认行为正好是想要的：框内能滚先滚框内，滚到头再滚页面。 */
    scrollbar-color: #c3cdd8 transparent;
    /* 滚动阴影：还有内容时底部出现渐隐阴影，滚到底消失；滚过开头后顶部也出现。
       前两层随内容滚动（local）负责「盖住」阴影，后两层固定在框边（scroll）就是阴影本身 —— 纯 CSS，不需要 JS 判断是否溢出 */
    background:
      linear-gradient(#fff 30%, rgb(255 255 255 / 0%)) 0 0 / 100% 26px no-repeat local,
      linear-gradient(rgb(255 255 255 / 0%), #fff 70%) 0 100% / 100% 26px no-repeat local,
      linear-gradient(rgb(18 41 79 / 9%), rgb(18 41 79 / 0%)) 0 0 / 100% 12px no-repeat scroll,
      linear-gradient(rgb(18 41 79 / 0%), rgb(18 41 79 / 11%)) 0 100% / 100% 16px no-repeat scroll;
  }
  .sm .in-top-b .in-tsec-body::-webkit-scrollbar { width: 6px; }
  .sm .in-top-b .in-tsec-body::-webkit-scrollbar-thumb { background: #c3cdd8; border-radius: 3px; }
  .sm .in-top-b .in-tsec-body::-webkit-scrollbar-thumb:hover { background: #9aa8b8; }
  .sm .in-top-b .in-tsec-body::-webkit-scrollbar-track { background: transparent; }
  /* 底部这一组的第一块吃掉剩余空白，整组贴底；有简介时简介已占满，这条不产生效果 */
  .sm .in-top-b > :is(.in-quick, .in-jump, .in-tcta):not(:is(.in-quick, .in-jump, .in-tcta) ~ *) { margin-top: auto; }
}

/* 右栏品牌 LOGO */
.sm a.in-blogo { display: flex; align-items: center; justify-content: center; height: 108px; padding: 14px 20px; text-decoration: none; }
.sm .in-blogo img { max-width: 100%; max-height: 80px; object-fit: contain; }

/* 正文「产品图片」 */
.sm .in-photos { display: grid; gap: 22px; justify-items: center; }
.sm .in-photo { width: 100%; max-width: 760px; margin: 0; }
.sm .in-photo img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(18 41 79 / 8%);
}
.sm #video, .sm #photos { scroll-margin-top: 80px; }

@media (width <= 860px) {
  .sm .in-top { grid-template-columns: minmax(0, 1fr); }
  .sm .in-tcta { grid-template-columns: 1fr 1fr; }
  .sm .in-tcta-main { grid-column: 1 / -1; }
}
@media (width <= 620px) {
  .sm .in-gal-thumbs { height: auto; min-height: 0; overflow-y: visible; scroll-snap-type: none; }
  .sm .in-gal-arrow { display: none; }
  .sm .in-gal-thumbs button { flex: 0 0 64px; width: 64px; }
}

/* ── 右栏只留一组吸顶卡片（2026-10-12）────────────────────────────────
   原来「产品标识 + 询价」吸顶，后面还跟着资料下载、复制给 AI、联系我们 —— 往下滚时
   吸顶块会盖住它们。现在：联系我们并进吸顶栈、复制给 AI 收进产品标识卡、资料下载移到主栏，
   吸顶块后面不再有任何内容，也就不存在遮挡。 */
.sm .in-idl + .in-minis { padding-top: 12px; margin-top: 12px; border-top: 1px dashed var(--line); }
.sm .in-side-stick .in-ct a { overflow-wrap: anywhere; }
.sm .in-docs--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sm .in-docs--grid li, .sm .in-docs--grid li:last-child { border: 0; }
.sm .in-docs--grid .in-doc {
  height: 100%;
  padding: 14px 16px;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.sm .in-docs--grid .in-doc:hover { border-color: var(--teal); box-shadow: 0 6px 16px rgb(18 41 79 / 8%); }

/* ═══════════════════════════════════════════════════════════════════════════
   新闻详情 /{lang}/news/{slug}（2026-10-12 改版，模板 view/intl/news_item.php）
   左：正文 ≤ 800px（中文一行约 45 字，读起来不累）；右：320px 吸顶侧栏。
   与关于页 / 帮助页同一套语言：不用分隔线和色条，靠留白、浅底与卡片分区。
   ═══════════════════════════════════════════════════════════════════════════ */
.sm .nw .nw-grid,
.sm .nw-rel .sm-wrap { max-width: 1260px; }
.sm .nw-grid {
  display: grid;
  grid-template-columns: minmax(0, 800px) 320px;
  justify-content: space-between;
  gap: 48px;
  padding-top: 34px;
  padding-bottom: 8px;
}

/* ── 头部 ── */
.sm .nw-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.sm .nw-meta .in-news-cat { font-size: 12px; line-height: 24px; padding: 0 11px; border-radius: 12px; }
.sm .nw-head h1 {
  margin: 0;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.38;
  color: var(--nv-800);
  letter-spacing: .01em;
}
.sm .nw-lead {
  margin: 16px 0 0;
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink-2);
}
.sm .nw-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 22px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
}
.sm .nw-share > span { margin-right: 2px; }
.sm .nw-share button,
.sm .nw-share a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 13px;
  font: inherit;
  color: var(--nv-800);
  text-decoration: none;
  cursor: pointer;
  background: var(--bg);
  border: 0;
  border-radius: 15px;
  transition: color .15s, background .15s;
}
.sm .nw-share button:hover,
.sm .nw-share a:hover { color: var(--teal-d); background: rgb(10 143 166 / 10%); }
.sm .nw-share [data-done] { color: var(--teal-d); background: rgb(10 143 166 / 12%); }

/* ── 封面与正文 ── */
.sm .nw-cover { margin: 28px 0 0; }
.sm .nw-cover img {
  /* 2026-10-17：去掉灰底。原来是 width:100% + object-fit:contain + 浅灰底，
     图片比例比容器窄（方图 / 竖图 / logo）时两侧会露出两条灰边。
     改为按图片自身比例显示、水平居中：宽图照样占满一行，窄图不再被灰底包住。 */
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 520px;
  margin: 0 auto;
  border-radius: 12px;
}
.sm .nw-body { margin-top: 30px; font-size: 16px; line-height: 1.95; }
.sm .nw-body p { margin: 0 0 18px; }
.sm .nw-body h2 { margin: 34px 0 14px; font-size: 21px; line-height: 1.45; }
.sm .nw-body h3 { margin: 28px 0 12px; font-size: 18px; line-height: 1.5; }
.sm .nw-body h4 { margin: 22px 0 10px; font-size: 16px; }
.sm .nw-body ul,
.sm .nw-body ol { margin-bottom: 18px; }
.sm .nw-body li { margin-bottom: 7px; }
.sm .nw-body img { display: block; margin: 22px auto; border-radius: 10px; }
.sm .nw-body table td,
.sm .nw-body table th { font-size: 14px; }
.sm .nw-empty {
  margin-top: 30px;
  padding: 28px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
  background: var(--bg);
  border-radius: 12px;
}
.sm .nw-empty p { margin: 0 0 16px; }

/* ── 上一篇 / 下一篇 ── */
.sm .nw-pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 44px;
}
.sm .nw-pn-i {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 20px;
  text-decoration: none;
  background: var(--bg);
  border-radius: 12px;
  transition: background .15s;
}
/* 2026-10-17：下一篇的标题改为左对齐（与上一篇一致，多行时不再参差不齐）；
   只把「下一篇 ›」小标签留在右侧，保留方向提示 */
.sm .nw-pn-i--next { text-align: left; }
.sm .nw-pn-i--next > span { align-self: flex-end; }
.sm .nw-pn-i--none { background: transparent; }
.sm .nw-pn-i > span { font-size: 12.5px; color: var(--ink-2); }
.sm .nw-pn-i > b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--nv-800);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sm a.nw-pn-i:hover { background: rgb(10 143 166 / 9%); }
.sm a.nw-pn-i:hover > b { color: var(--teal-d); }

/* ── 右栏 ── */
/* 右栏整列约 860px 高，比 1080p 屏的可视高度还高 —— 整列吸顶会让底部卡片永远露不出来。
   所以分类 / 最新资讯随页面走，只让最后的询价卡吸顶（rail-in 撑满整列高度，给它留出滑动轨道） */
.sm .nw-rail-in {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sm .nw-card {
  padding: 18px 18px 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(18 41 79 / 7%), 0 6px 20px rgb(18 41 79 / 6%);
}
.sm .nw-card-t { display: block; margin: 0 0 10px; font-size: 15px; color: var(--nv-800); }
.sm .nw-cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 -8px;
  padding: 8px;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.sm .nw-cats a i {
  min-width: 26px;
  padding: 0 7px;
  font-size: 12px;
  font-style: normal;
  line-height: 20px;
  text-align: center;
  color: var(--ink-2);
  background: var(--bg);
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.sm .nw-cats a:hover { color: var(--teal-d); background: var(--bg); }
.sm .nw-cats a.is-on { font-weight: 600; color: var(--teal-d); background: rgb(10 143 166 / 9%); }
.sm .nw-cats a.is-on i { color: #fff; background: var(--teal); }

.sm .nw-latest a {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  text-decoration: none;
}
.sm .nw-latest img,
.sm .nw-latest-ph {
  display: block;
  width: 64px;
  height: 48px;
  object-fit: cover;
  background: var(--bg);
  border-radius: 6px;
}
.sm .nw-latest-ph { background: linear-gradient(135deg, #e8eef5, #dfe7f0); }
.sm .nw-latest a > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sm .nw-latest b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sm .nw-latest time { font-size: 12px; color: var(--ink-2); opacity: .8; font-variant-numeric: tabular-nums; }
.sm .nw-latest a:hover b { color: var(--teal-d); }

.sm .nw-ask {
  position: sticky;
  top: calc(var(--sticky-h, 124px) + 16px);
  padding: 22px 20px;
  color: #fff;
  background: linear-gradient(140deg, var(--nv-800), var(--nv-900, #12294f));
  box-shadow: 0 8px 24px rgb(18 41 79 / 18%);
}
.sm .nw-ask > b { display: block; margin-bottom: 8px; font-size: 16px; }
.sm .nw-ask > p { margin: 0 0 16px; font-size: 13px; line-height: 1.75; color: rgb(255 255 255 / 78%); }
.sm .nw-ask .sm-btn {
  display: flex;
  justify-content: center;
  width: 100%;
  color: #fff;
  text-decoration: none;
  background: var(--teal);
  border-color: var(--teal);
}
.sm .nw-ask .sm-btn:hover { background: var(--teal-d); border-color: var(--teal-d); }

/* ── 相关资讯 ── */
.sm .nw-rel { margin: 56px 0 -56px; padding: 52px 0 60px; background: var(--bg); }
.sm .nw-rel-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.sm .nw-rel-h h2 { margin: 0; font-size: 22px; color: var(--nv-800); }
.sm .nw-rel-h a { font-size: 14px; color: var(--teal-d); text-decoration: none; white-space: nowrap; }
.sm .nw-rel-h a:hover { text-decoration: underline; }
.sm .nw-rel-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sm .nw-rel-i {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(18 41 79 / 6%);
  transition: transform .18s, box-shadow .18s;
}
.sm .nw-rel-i:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgb(18 41 79 / 12%); }
.sm .nw-rel-th {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #e8eef5, #dfe7f0);
}
.sm .nw-rel-th img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.sm .nw-rel-i:hover .nw-rel-th img { transform: scale(1.04); }
.sm .nw-rel-b { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px 18px 18px; }
.sm .nw-rel-b time { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.sm .nw-rel-b b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--nv-800);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sm .nw-rel-b em {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  font-style: normal;
  line-height: 1.7;
  color: var(--ink-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sm .nw-rel-b i { margin-top: auto; padding-top: 4px; font-size: 13px; font-style: normal; color: var(--teal-d); }
.sm .nw-rel-i:hover .nw-rel-b b { color: var(--teal-d); }

@media (max-width: 1080px) {
  .sm .nw-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .sm .nw-rail-in { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .sm .nw-ask { position: static; grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .sm .nw-grid { padding-top: 22px; }
  .sm .nw-lead { font-size: 15.5px; }
  .sm .nw-cover { margin-top: 22px; }
  .sm .nw-cover img { border-radius: 10px; }
  .sm .nw-body { margin-top: 24px; font-size: 15.5px; line-height: 1.9; }
  .sm .nw-pn { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 32px; }
  .sm .nw-pn-i--next { text-align: left; }
  .sm .nw-pn-i--next > span { align-self: auto; }   /* 手机上下堆叠，标签也回到左侧 */
  .sm .nw-pn-i--none { display: none; }
  .sm .nw-rail-in { grid-template-columns: minmax(0, 1fr); }
  .sm .nw-rel { margin-top: 40px; padding: 36px 0 44px; }
  .sm .nw-rel-g { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}