/* ===========================================================================
 * 国际站首页样式 —— 由 x-admin/src/views/frontend/home.vue 及其四个子组件移植
 * ---------------------------------------------------------------------------
 * ⚠️ 这份文件是**搬过来的**，不是重写的。逐行照搬 home.vue 的 scoped 样式，
 *    是为了让直出首页与那张 Vue 首页在像素层面完全一致 —— 重写一遍必然漂移，
 *    而"哪里不一样"这种问题排查起来极贵。
 *
 * 来源与顺序（改动请回到源文件改，再重新生成这一份）：
 *   1. views/frontend/home.vue        <style scoped>  1556 行
 *   2. views/frontend/home.vue        <style>（全局）    45 行
 *   3. components/frontend/intl/ProductCard.vue        159 行
 *   4. components/frontend/intl/PackShot.vue            36 行
 *   5. components/frontend/intl/AiResultList.vue       272 行
 *   6. components/frontend/intl/ServiceWidget.vue      362 行
 *
 * 移植时只做了两处必要改动，其余一字未动：
 *   · 去掉 Vue 专有的 :deep(...) 包装（纯 CSS 里非法）——只出现在 AiResultList。
 *   · 把 .ic-* 六个轮播选择器收进 .sm 之下。它们原本在 home.vue 的非 scoped
 *     块里裸奔，而后台 5 个 intl-* 页的分页容器正好也叫 .ic-page，
 *     访问过首页之后那些分页会被强制变成 5 列 grid。
 *
 * 全站色板以这份为准：--nv-900 #12294f / --nv-800 #1b3a6b / --teal #0a8fa6。
 * site.css 里那套 --sm-navy #0b2545 / --sm-blue #1f6feb 是另一套，两者不同源，
 * 内页改造时一并收敛到这里。
 * =========================================================================== */


/* ───────────────────────────────────────────────────────────────
   home.vue · scoped 主样式
   ─────────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════════
   设计令牌。silmid 的配色骨架：两层深蓝导航 + 青色行动色 + 中性灰底
   ═══════════════════════════════════════════════════════════════ */
.sm {
  --nv-900: #12294f;   /* 顶栏 */
  --nv-800: #1b3a6b;   /* 二级导航 / 页脚 */
  --nv-700: #24488a;   /* 悬停 */
  --teal: #0a8fa6;     /* 主行动色 */
  --teal-d: #087d92;
  --link: #16478f;     /* 产品标题蓝 */
  --ink: #1f2933;
  --ink-2: #4a5568;
  --line: #dfe3e8;
  --bg: #f4f5f7;
  --bg-2: #eef0f3;

  min-height: 100vh;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #fff;
}
.sm-wrap {
  width: 100%;
  /* 2026-10-12：1400 → 1800。1920 屏上两侧留白从约 280px 收到约 100px，内容区约 1720px。
     左右内边距随屏宽在 16–40px 之间平滑变化：手机上不浪费，宽屏上不贴边。
     ⚠️ 想改整站宽度只改这里和 inner.css 的 .intl-* 外壳（同一个值），其它地方都跟着它走。 */
  max-width: 1800px;
  padding: 0 clamp(16px, 2.5vw, 40px);
  margin: 0 auto;
}
.sm-center { margin-top: 26px; text-align: center; }

.sm-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;
  transition: background 0.16s;
}
.sm-btn:hover { background: var(--teal-d); }
.sm-btn--lg { padding: 14px 30px; font-size: 15px; }
.sm-btn--block { width: 100%; }
.sm-arr { font-style: normal; font-size: 17px; line-height: 1; }

/* ── 顶栏 ─────────────────────────────────────────── */
.sm-top {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--nv-900);
}
.sm-top-in {
  display: flex;
  gap: 26px;
  align-items: center;
  height: 78px;
}
.sm-logo {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
  align-items: center;
  color: #fff;
  text-decoration: none;
}
.sm-logo-img { width: auto; height: 40px; }   /* width:auto + <img width/height> 属性 = 按比例提前占位（2026-10-17） */
/*
 * 浅底 LOGO 的保护垫。
 *
 * 不用纯白：纯白 + 投影在深蓝顶栏上是一块硬邦邦的贴纸。
 * 改成 92%→82% 的白色渐变，底色会透上来一点点，整块自然带上顶栏的冷调，
 * 像是同一套配色里的构件而不是贴上去的。投影换成内侧 1px 高光 ——
 * 玻璃质感靠高光而不是外阴影，后者只会让它更像浮在上面。
 *
 * 透明度不能再低。这块底板存在的唯一理由就是拉开对比度，实测：
 *   0.86 → LOGO 深蓝块 ↔ 底板 = 8.4  ✓
 *   0.70 → 6.05，开始发闷
 *   0.50 → 3.65，等于白垫了
 *   不垫 → 1.29，完全糊进背景
 * 想再淡，正确做法是让客户给反白版 LOGO（后台已有「深底版」图位），
 * 而不是继续降这里的 alpha。
 *
 * ⚠️ 必须显式写 box-sizing: content-box。
 * 页面顶部有一条 `.sm, .sm *` 的 border-box 全局重置（当初是为了修 cookie 条
 * 按钮被裁的问题加的）。在 border-box 下，`height:32 + padding:6` 表示**总高 32**，
 * 图片内容只剩 20px —— 实测这条规则原来渲染出的 LOGO 只有 24px 高，
 * 而不垫板时是 40px，同一个 LOGO 在两种模式下差了 40%，切换时明显跳。
 * 写死 content-box 之后：内容 32 + 上下各 6 = 总高 44，与原样的 40px 视觉重心相当。
 */
/* LOGO 自带不透明底色时：不再垫板（会露接缝），只把它自己的底色圆角化，
   当成一块品牌色块处理。overflow:hidden 对 <img> 无效，靠 border-radius 直接裁 */
.sm-logo-img.is-selfbacked {
  height: 40px;
  border-radius: 5px;
}

.sm-logo-img.is-plate,
.sm-foot-logo.is-plate {
  box-sizing: content-box;
  height: 32px;
  padding: 6px 13px;
  /* 冷白而不是纯白：顶部纯白、底部微微偏冷，底板自己带一点顶栏的色温，
     不像一张白贴纸。下沿 1px 暗影 + 内侧极淡描边给出厚度，深蓝与白之间
     因此有了过渡，而不是硬碰硬的一刀切。 */
  background: linear-gradient(180deg, #fff, #f2f6fb);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgb(0 0 0 / 18%), inset 0 0 0 1px rgb(18 41 79 / 6%);
}
/*
 * 单色反白。brightness(0) 先把所有像素压成纯黑（透明区不受影响，
 * filter 只作用于有 alpha 的像素），invert(1) 再翻成纯白。
 * 两步合起来 = "不管原来什么颜色，一律变白"，透明底保持透明。
 * 只用 invert(1) 是错的：深蓝会翻成浅橙，比原来更花。
 */
.sm-logo-img.is-mono,
.sm-foot-logo.is-mono { filter: brightness(0) invert(1); }

/* 首访等待态的占位块：只占位，不画任何东西。
   高度取 44 = 垫板模式的总高，取两种模式里较大的那个，
   这样无论最终走哪条分支，版式都不会在数据回来时跳一下。 */
.sm-logo-hold { display: block; width: 96px; height: 44px; }

/* 2026-10-17：去掉 LOGO 的 200ms 淡入。
   这段动画是给早期 SPA「等数据回来再出 LOGO」准备的；直出页每打开一页都会重播一次 ——
   LOGO 从透明变出来，就是用户看到的「每次打开都闪一下」。直出页里 LOGO 首帧就是最终形态，不需要淡入。 */

.sm-logo-mark { width: 38px; height: 38px; color: #6fd0e2; }
.sm-logo-mark svg { width: 100%; height: 100%; }
.sm-logo-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.sm-logo-txt b { font-size: 21px; font-weight: 700; letter-spacing: 0.3px; }
.sm-logo-txt em { font-size: 11px; font-style: normal; color: #9fc0e0; }
/* 2026-11-03 字标两行左右对齐：副标题（em）与名称（b）同宽。
   字距由 _home_top.php 里紧跟 LOGO 的内联脚本按实测宽度算出来写到行内样式上，
   因为副标题文案在后台可改、中英文长度也不同，写死 letter-spacing 换一次文案就错位。
   align-items: flex-start 让两行各自按内容收缩，脚本才量得到真实宽度。
   .is-fit 只在脚本完成对齐后加上：对齐后的行不允许再折行。 */
.sm-logo-txt.is-fit b,
.sm-logo-txt.is-fit em { white-space: nowrap; }

.sm-search {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  /* ⚠️ min-width: 0 不能省。弹性项目的默认 min-width 是 auto，也就是
     "不许缩到内容的最小宽度以下"，而这个表单的最小宽度里包含了 <input>
     浏览器默认的固有宽度（约 187px）。加上模式按钮和「AI 选型」按钮，
     整条搜索框的最小宽度是 363px —— 比 360px 的手机视口还宽。
     结果是整个页面横向溢出 23px：不是某个元素跑出去，是**整站**在
     360px（最常见的手机宽度）上能左右拖动。英文更长，1000–1071px 这一段
     也会溢出，正好卡在 992px 换行断点之上，所以桌面窄窗口同样中招。
     首页、列表页、产品页全都用这个头，一处漏写全站都晃。 */
  min-width: 0;
  max-width: 840px;            /* 2026-10-12：整站加宽后顶栏有余量，720 → 840 */
  background: #eef1f5;
  border: 2px solid transparent;
  border-radius: 6px;
  transition: border-color .16s, background-color .16s, box-shadow .16s;
}
/* 2026-10-17 搜索框优化：悬停稍亮；聚焦时白底 + 青色描边 + 外发光 ——
   原来 outline:none 之后聚焦没有任何视觉变化，键盘用户和「我点进去了没有」都看不出来 */
.sm-search:hover { background: #f5f7fa; }
.sm-search:focus-within {
  background: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgb(10 143 166 / 28%);
}
.sm-search.is-ai { border-color: var(--teal); }
.sm-search-mode {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 700;
  color: #7a8592;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-inline-end: 1px solid #d3d7dc;
}
.sm-search.is-ai .sm-search-mode { color: var(--teal); }
.sm-search-mode svg { width: 16px; height: 16px; }
.sm-search-in {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  font-size: 14.5px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: none;
}
.sm-search-in::placeholder { color: #6f7b88; opacity: 1; }
.sm-search-in::-webkit-search-cancel-button { cursor: pointer; }
.sm-search-go {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 0 26px;
  margin: -2px -2px -2px 0;      /* 盖住外框的 2px 描边，按钮与框严丝合缝 */
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: var(--teal);
  border: 0;
  border-radius: 0 6px 6px 0;
}
.sm-search-go-ic { width: 17px; height: 17px; }
/* 「/」快捷键提示：只在电脑（有鼠标悬停能力）上显示；聚焦或已输入内容时隐藏 */
.sm-search-kbd {
  display: none;
  align-self: center;
  min-width: 22px;
  height: 22px;
  margin-inline-end: 10px;
  font: 600 12px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #7a8592;
  text-align: center;
  background: #fff;
  border: 1px solid #cfd5dc;
  border-bottom-width: 2px;
  border-radius: 4px;
}
@media (hover: hover) and (pointer: fine) {
  .sm-search-kbd { display: block; }
}
.sm-search:focus-within .sm-search-kbd,
.sm-search-in:not(:placeholder-shown) ~ .sm-search-kbd { display: none; }
.sm-search-go:hover { background: var(--teal-d); }
.sm-search-go:disabled { cursor: default; opacity: 0.7; }

.sm-tips {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  inset-inline-start: 0;
  z-index: 20;
  padding: 12px 14px 14px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 14px 40px rgb(10 30 60 / 22%);
}
.sm-tips-h { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.sm-tips-i {
  display: block;
  width: 100%;
  padding: 8px 10px;
  font-size: 13.5px;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  background: #f6f8fa;
  border: 0;
  border-radius: 2px;
}
.sm-tips-i + .sm-tips-i { margin-top: 6px; }
.sm-tips-i:hover { color: var(--teal); background: #eaf5f8; }

.sm-top-act { display: flex; flex: 0 0 auto; gap: 6px; align-items: center; justify-content: flex-end; margin-inline-start: auto; }

/* ── 顶栏三栏：搜索框真正居中（2026-10-17）────────────────────────────
   原来是 flex：LOGO | 搜索框(占满剩余) | 右侧按钮。两侧宽度不同，搜索框的中线跟着偏。
   改成三栏网格，两侧各 1fr、中间搜索框限宽：两侧等宽，搜索框正好落在页面中线上。
   两侧用 max-content 兜底 —— 右侧内容（电话 + 语言 + 登录 + 询价单）放不下时，
   宁可让搜索框窄一点、略偏，也不能让按钮被挤出顶栏。
   ≤992px 仍沿用下方的换行布局（搜索框独占第二行），不受影响。 */
@media (min-width: 993px) {
  .sm-top-in {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, 820px) minmax(max-content, 1fr);
    gap: 24px;
  }
  .sm-top-in > .sm-logo { justify-self: start; }
  .sm-top-in > .sm-search { justify-self: center; width: 100%; max-width: 820px; }
  .sm-top-in > .sm-top-act { justify-self: end; margin-inline-start: 0; }
  /* 两侧给同一个最小宽度：网格只有在两侧最小宽度相等时才会平分剩余空间，
     搜索框才真正落在中线上（实测 LOGO 一侧约 280px、不带电话的按钮一侧约 260px）。
     写的是 min-width 不是 width：英文站名更长时照样撑开，不会把内容挤出去。 */
  .sm-top-in > .sm-logo,
  .sm-top-in > .sm-top-act { min-width: 290px; }
}
/* 英文站名（MORUN International + 英文副标题）比中文长约 60px：1280–1599 两侧放宽到 352px 保持对称；
   更窄时宁可偏一点，也不把搜索框压得太窄 */
@media (min-width: 1280px) and (max-width: 1599px) {
  html[lang="en"] .sm-top-in > .sm-logo,
  html[lang="en"] .sm-top-in > .sm-top-act { min-width: 352px; }
}

/* 400 电话（2026-10-17 再调整）：从顶栏移到第二行导航右侧，样式见 .sm-nav-tel */
.sm-lang, .sm-acct, .sm-rfq {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 8px 12px;
  font-size: 13px;
  color: #dce7f4;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 2px;
}
.sm-lang:hover, .sm-acct:hover, .sm-rfq:hover { color: #fff; background: rgb(255 255 255 / 10%); }
.sm-lang svg { width: 17px; height: 17px; }
.sm-acct-ava {
  display: grid;
  width: 26px;
  height: 26px;
  font-size: 12px;
  font-weight: 700;
  color: var(--nv-900);
  background: #6fd0e2;
  border-radius: 50%;
  place-items: center;
}
.sm-rfq-ic { position: relative; display: block; }
.sm-rfq-ic svg { display: block; width: 22px; height: 22px; }
.sm-rfq-n {
  position: absolute;
  top: -6px;
  inset-inline-end: -8px;
  min-width: 17px;
  padding: 0 4px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 17px;
  color: #fff;
  text-align: center;
  background: var(--teal);
  border-radius: 9px;
}

/* 吸顶总高度。**改顶栏或导航高度时必须同步改这里。**
   桌面端 = .sm-top-in 的 78px + .sm-nav-i 的 46px = 124px
   （.sm-progress 是 absolute 覆盖在导航上的，不占高度，不计入）。

   为什么抽成变量：这个数被三处用到 —— 右侧栏 sticky 的 top、
   正文标题的 scroll-margin-top、以及将来任何吸顶元素。
   此前三处各写各的 96px，比真实高度少 30px，
   于是侧栏卡片顶部被导航压掉一截、点目录跳转标题也被挡住。 */
.sm { --sticky-h: 124px; }

/* ── 二级导航 ─────────────────────────────────────── */
.sm-nav {
  position: sticky;
  top: 78px;
  z-index: 55;
  background: var(--nv-800);
}
.sm-nav-in { display: flex; align-items: center; }
.sm-nav-l, .sm-nav-r { display: flex; gap: 2px; padding: 0; margin: 0; list-style: none; }
.sm-nav-r { margin-inline-start: auto; }
.sm-nav-i {
  display: flex;
  gap: 7px;
  align-items: center;
  height: 46px;
  padding: 0 16px;
  font-size: 14.5px;
  font-weight: 600;
  color: #e6eefa;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.sm-nav-i:hover, .sm-nav-i.is-on { color: #fff; background: var(--nv-700); }

/* ── 首项与 logo 左对齐（2026-09-15 → 2026-09-21 改法）─────────────────────
   目标：第一项的**文字**和上面 logo 左对齐（.sm-nav-i 有 16px 左内边距，不处理会右移 16px）。

   09-15 的做法是去掉第一项的左内边距 —— 文字对齐了，但「首页」自己的
   悬停底色和当前页色条就变成左 0、右 16px，**明显偏右**，看起来像坏了。
   现在改成：每一项保持左右对称的 16px，把**整排**往左挪 16px。
   文字仍与 logo 对齐，每一项的底色和色条都是居中的。

   负 margin 只用在桌面端：窄屏下 .sm-nav-in 是 overflow-x:auto 的滚动容器，
   负 margin 会让首项开头那一段滚不出来，所以 ≤760px 时归零（见媒体查询）。
   .sm-wrap 两侧内边距在 760px 以上至少 19px（clamp 16–40px），挪 16px 不会顶出页面。 */
.sm-nav-l { margin-inline-start: -16px; }

/* ── 当前页标记 ────────────────────────────────────────────────────────────
   用底部色条而不是背景色：背景色是 hover / 大菜单展开时的状态，
   两者共用会让人以为鼠标正停在上面。色条是"你在这里"，语义不冲突，
   而且 hover 时两种效果可以叠加显示。 */
/* 2026-09-21：色条从「整个按钮宽度的内阴影」改成与文字同宽、居中的短条 ——
   和两侧留白对称，视觉上落在文字正下方；圆角让它像指示器而不是一道边框。 */
.sm-nav-i { position: relative; }
.sm-nav-i.is-cur { color: #fff; }
.sm-nav-i.is-cur::after {
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  height: 3px;
  content: "";
  background: var(--teal);
  border-radius: 3px 3px 0 0;
}

/* ── [hidden] 兜底（2026-09-09）───────────────────────────────────────────
   浏览器给 [hidden] 的 `display:none` 只是一条**作者可覆盖**的 UA 样式：
   任何写了 display 的类选择器都比它强。站里 .sm-btn、.in-cta、.sm-nav-n
   都设了 display，于是「先渲染成 hidden、有 JS 再打开」这个模式会整个失效 ——
   没有 JS 的访客看到的是一排点了没反应的按钮，比没有按钮更伤信任。
   放在 home.css 而不是 inner.css：首页也用这个模式（导航角标），
   而 inner.css 首页不加载。 */
.sm [hidden] { display: none !important; }

/*
 * 导航项上的数字角标（2026-09-09，目前只有「在线订购」用）。
 * .sm-nav-i 已经是 flex + gap:7px，角标作为第二个子元素自然排在文字右边。
 *
 * 服务端渲染成 hidden 的空标签，由 island 按 localStorage 填数字 ——
 * 清单存在浏览器里，服务端渲染任何数字都一定是错的。
 * 用青色而不是红色：红色角标是「有问题要处理」的语义，
 * 而这里是「你攒了 3 件」，是个中性的提示。
 */
.sm-nav-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  color: #06282c;
  background: var(--teal);
  border-radius: 9px;
}

/*
 * 导航最右侧的「品牌合作」胶囊（2026-09-09）。
 *
 * 圆角 + 虚线 + 更小的字号：这一排其余六个入口面向采购，品牌方入驻是
 * **另一批人的另一条动线**。做成同款导航项就是在跟「产品中心」抢采购的注意力；
 * 形状明显不同的一枚轻量胶囊，采购扫过去会自动跳过，而品牌方反而更容易注意到。
 *
 * 深蓝底上的边框用白色透明度而不是灰色 —— 灰边在 --nv-800 上会发脏发浑。
 */
.sm-nav-cta-li { display: flex; align-items: center; padding-inline-start: 10px; }
/* 400 电话（2026-10-17）：「帮助与支持」与「品牌合作」之间，白色加粗、比导航项大一号，一眼就能看到 */
.sm-nav-tel-li { display: flex; align-items: center; }
.sm-nav-tel {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 8px 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.sm-nav-tel:hover { color: #7fd3e0; }
/* 中等宽度第二行放不下：先收起电话（页脚、联系页都有号码） */
@media (max-width: 1200px) { .sm-nav-tel-li { display: none; } }
.sm-nav-cta {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: #b9cbe4;
  white-space: nowrap;
  background: transparent;
  border: 1px dashed rgb(255 255 255 / 34%);
  border-radius: 999px;
  transition: color 0.16s, border-color 0.16s, background 0.16s;
}
.sm-nav-cta:hover {
  color: #fff;
  background: rgb(255 255 255 / 10%);
  border-color: var(--teal);
  border-style: solid;   /* 悬停转实线：确认"这确实是个可点的东西" */
}
.sm-caret {
  width: 0;
  height: 0;
  border-top: 4px solid currentcolor;
  border-inline-end: 4px solid transparent;
  border-inline-start: 4px solid transparent;
}

.sm-progress {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  z-index: 56;
  height: 2px;
  overflow: hidden;
  background: rgb(255 255 255 / 10%);
}
.sm-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), #6fd0e2);
  /* transform 而不是 width：宽度变化会触发布局，transform 只走合成层 */
  transform: scaleX(0);
  transform-origin: left center;
}

.sm-mega {
  position: absolute;
  inset-inline-end: 0;
  inset-inline-start: 0;
  z-index: 54;
  background: #fff;
  border-bottom: 3px solid var(--teal);
  box-shadow: 0 16px 34px rgb(10 30 60 / 16%);
}
.sm-mega-in {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding-top: 18px;
  padding-bottom: 20px;
}
.sm-mega-i {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  text-align: start;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 2px;
}
.sm-mega-i:hover { background: #f2f6fa; }
.sm-mega-i b { font-size: 14.5px; color: var(--link); }
.sm-mega-i em { font-size: 12.5px; font-style: normal; color: var(--ink-2); }
.sm-mega-i--sm { padding: 8px 13px; }

/* ── AI 结果面板 ──────────────────────────────────── */
.sm-aip { padding: 26px 0 32px; background: #eaf3f6; border-bottom: 1px solid #cfe2e8; }
.sm-aip-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sm-aip-t { display: flex; gap: 10px; align-items: center; margin: 0; font-size: 20px; font-weight: 700; color: var(--nv-900); }
.sm-aip-badge {
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  background: var(--teal);
  border-radius: 2px;
}
.sm-aip-badge.is-off { background: #8a97a5; }
.sm-aip-q { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.sm-aip-x {
  font-size: 26px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  background: transparent;
  border: 0;
}
.sm-aip-load { padding: 34px 0; text-align: center; }
.sm-aip-load p { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); }
.sm-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 3px;
  background: var(--teal);
  border-radius: 50%;
  animation: smBlink 1.05s infinite ease-in-out;
}
.sm-dot:nth-child(2) { animation-delay: 0.15s; }
.sm-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes smBlink {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}
.sm-aip-reply { margin: 14px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--ink); }
.sm-aip-warn {
  padding: 9px 12px;
  margin: 14px 0 0;
  font-size: 13.5px;
  color: #8a5a12;
  background: #fdf3e2;
  border-inline-start: 3px solid #d99b25;
}
.sm-aip-intent { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.sm-aip-intent-k { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.sm-chip {
  padding: 4px 10px;
  font-size: 12.5px;
  color: var(--nv-800);
  background: #fff;
  border: 1px solid #c9dde4;
  border-radius: 12px;
}
.sm-chip i { margin-inline-end: 5px; font-style: normal; font-weight: 700; color: var(--teal); }
.sm-aip-follow {
  padding: 9px 14px;
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff6e6;
  border-inline-start: 3px solid #e0a02a;
  border-radius: 2px;
}
.sm-aip-follow b { margin-inline-end: 6px; font-weight: 700; color: #9a6a10; }
.sm-aip-empty { padding: 26px 0; font-size: 14px; color: var(--ink-2); text-align: center; }

/* ── 首屏 ─────────────────────────────────────────── */
.sm-hero { padding: 22px 0 6px; background: var(--bg); }
.sm-hero-box {
  display: grid;
  grid-template-columns: 1fr 380px;
  overflow: hidden;
  background: linear-gradient(102deg, #12294f 0%, #1b3a6b 52%, #24488a 100%);
  border-radius: 2px;
}
.sm-hero-l { padding: 40px 44px 42px; }
.sm-hero-eye {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #6fd0e2;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.sm-hero-t { margin: 0 0 12px; font-size: 34px; font-weight: 700; line-height: 1.28; color: #fff; }
.sm-hero-s { max-width: 640px; margin: 0 0 24px; font-size: 15px; line-height: 1.7; color: #c6d8ee; }
/* 设了通栏图就把首屏当成一整张 banner：右侧紫色面板收起，
   文案区加宽并靠左，避免图被分栏切碎。
   面板里的四条优势不会跟着消失，改由下方的 .sm-hero-strip 承接。 */
.sm-hero-box.is-banner { grid-template-columns: 1fr; }
.sm-hero-box.is-banner .sm-hero-l { max-width: 720px; padding-bottom: 30px; }

/* 通栏模式的优势条：压在 banner 下沿。
   底色用深色半透明而不是实色 —— 让下面的图透出来，条子才像 banner 的一部分，
   而不是又贴上去一块。运营传什么图，白字都有足够对比度。 */
.sm-hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  padding: 13px 44px;
  margin: 0;
  list-style: none;
  background: rgb(9 24 47 / 46%);
  border-top: 1px solid rgb(255 255 255 / 12%);
}
.sm-hero-strip li { display: flex; gap: 8px; align-items: baseline; }
.sm-hero-strip b { font-size: 13.5px; font-weight: 700; color: #6fd0e2; white-space: nowrap; }
.sm-hero-strip em { font-size: 12.5px; font-style: normal; color: #dbe6f4; }
/* 徽标那一项不是"键+值"结构，单独覆盖掉上面的 flex 排布 */
.sm-hero-strip .sm-hero-strip-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #3a2470;
  background: #ffd76e;
  border-radius: 2px;
}

.sm-hero-r {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 30px;
  background: linear-gradient(160deg, #6a2f8f 0%, #3a2470 100%);
}
.sm-hero-badge {
  position: absolute;
  top: 18px;
  inset-inline-end: 22px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #3a2470;
  background: #ffd76e;
  border-radius: 2px;
}
.sm-hero-facts { display: grid; gap: 12px; }
.sm-hero-fact { display: flex; gap: 10px; align-items: baseline; }
.sm-hero-fact b { flex: 0 0 44px; font-size: 15px; color: #fff; }
.sm-hero-fact em { font-size: 12.5px; font-style: normal; line-height: 1.5; color: #d8c9ec; }

.sm-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px 0 26px; }
.sm-promo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 24px 26px 22px;
  color: #fff;
  text-align: start;
  cursor: pointer;
  border: 0;
  border-radius: 2px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.sm-promo:hover { box-shadow: 0 10px 26px rgb(16 40 80 / 22%); transform: translateY(-2px); }
.sm-promo--0 { background: linear-gradient(120deg, #14406f, #2a6ca8); }
.sm-promo--1 { background: linear-gradient(120deg, #0d5a63, #12909f); }
.sm-promo--2 { background: linear-gradient(120deg, #3f2a63, #6b3f9e); }
.sm-promo b { font-size: 17px; }
.sm-promo em { font-size: 13px; font-style: normal; line-height: 1.6; color: rgb(255 255 255 / 82%); }
.sm-promo-cta { margin-top: 10px; font-size: 13.5px; font-weight: 600; }

/* ── 通用区块 ─────────────────────────────────────── */
.sm-sec { padding: 42px 0 48px; }
.sm-sec--alt { background: var(--bg); }
.sm-sec--grey { background: var(--bg-2); }
.sm-h2 {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 0 0 26px;
  font-size: 24px;
  font-weight: 700;
  color: var(--nv-800);
  text-align: center;
}
.sm-demo {
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: #8a5a12;
  cursor: help;
  background: #fdf3e2;
  border: 1px solid #edd6a8;
  border-radius: 2px;
}

.sm-h2--light { color: #fff; }
.sm-sub {
  max-width: 760px;
  margin: -14px auto 26px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-2);
  text-align: center;
}
.sm-sub--light { color: #b9cbe4; }
.sm-note {
  margin: 22px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: #7b8797;
  text-align: center;
}
.sm-note--strong {
  max-width: 720px;
  padding: 10px 16px;
  margin: 22px auto 0;
  color: #6b5a2a;
  background: #fdf6e6;
  border: 1px solid #ecd9a8;
  border-radius: 2px;
}

/* ── 信任数据条 ───────────────────────────────────── */
/* 2026-10-29：宽度与 hero / 推广卡对齐（白卡在 .sm-wrap 内层）；顶部品牌色细线、
   柔和投影、等宽数字、分隔线内缩、悬停高亮。 */
.sm-trust { padding: 2px 0 34px; background: var(--bg); }
.sm-trust-in {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-top: 28px;
  padding-bottom: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgb(16 40 80 / 4%), 0 8px 22px rgb(16 40 80 / 6%);
}
.sm-trust-in::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  content: '';
  background: linear-gradient(90deg, var(--nv-800) 0%, var(--teal) 55%, #6fd0e2 100%);
}
.sm-trust-i {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  padding: 2px 12px;
  text-align: center;
}
.sm-trust-i + .sm-trust-i { border-inline-start: 1px solid var(--line); }
.sm-trust-i b {
  font-size: 32px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--nv-800);
  letter-spacing: -0.5px;
  transition: color 0.18s;
}
.sm-trust-i:hover b { color: var(--teal); }
.sm-trust-i em {
  position: relative;
  padding-top: 8px;
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: 0.3px;
}
.sm-trust-i em::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 18px;
  height: 2px;
  content: '';
  background: var(--teal);
  border-radius: 1px;
  opacity: 0.55;
  transform: translateX(-50%);
  transition: width 0.18s, opacity 0.18s;
}
.sm-trust-i:hover em::before { width: 28px; opacity: 1; }

/* ── 全球仓储与时区（整页唯一深色块） ─────────────── */
.sm-globe {
  position: relative;
  padding: 48px 0 52px;
  overflow: hidden;
  background: linear-gradient(140deg, #12294f 0%, #1b3a6b 55%, #1d4a8a 100%);
}
/* 背景经纬网格：不是真地图，只是给深色块一点"地球"的暗示 */
.sm-globe::before {
  position: absolute;
  inset: -20% -10%;
  content: '';
  background:
    repeating-linear-gradient(0deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 62px);
  transform: perspective(600px) rotateX(58deg);
  transform-origin: center 120%;
  pointer-events: none;
}
.sm-globe > * { position: relative; }
.sm-hubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sm-hub {
  padding: 24px 26px 22px;
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 3px;
  backdrop-filter: blur(2px);
}
.sm-hub-pin {
  display: grid;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  background: rgb(111 208 226 / 18%);
  border-radius: 50%;
  place-items: center;
}
.sm-hub-pin i {
  width: 9px;
  height: 9px;
  background: #6fd0e2;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgb(111 208 226 / 60%);
  animation: smPulse 2.4s ease-out infinite;
}
@keyframes smPulse {
  0%   { box-shadow: 0 0 0 0 rgb(111 208 226 / 55%); }
  70%  { box-shadow: 0 0 0 11px rgb(111 208 226 / 0%); }
  100% { box-shadow: 0 0 0 0 rgb(111 208 226 / 0%); }
}
.sm-hub-city { display: block; font-size: 22px; font-weight: 700; color: #fff; }
.sm-hub-country { display: block; margin-bottom: 16px; font-size: 12.5px; color: #9fbcdd; }
.sm-hub-clock, .sm-hub-cov {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  padding: 9px 0;
  border-top: 1px solid rgb(255 255 255 / 12%);
}
.sm-hub-clock-k { font-size: 12px; color: #8fa9c9; }
.sm-hub-clock time {
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #6fd0e2;
  letter-spacing: 1px;
}
.sm-hub-cov span:last-child { font-size: 12.5px; color: #dbe7f5; text-align: end; }
/* 卡片背景图（2026-11-03，后台「国际站图片 → 首页 · 全球仓储与服务时区」）。
   图与遮罩由 home.php 写在行内 style 上（$bgLayer + $SCRIM_HUB），这里只调卡片本身：
   去掉玻璃模糊（有实图时没意义且费性能）、加一点投影把卡片从深色底上托起来，文字加轻微阴影兜底。 */
/* 2026-11-04 修复描边断续：背景图默认铺到边框下面（background-clip: border-box），
   半透明白边框叠在图上，亮处显、暗处消失，看起来一截一截的。
   改为只铺到边框内侧（padding-box），边框下面是模块的统一深蓝底，描边四边一致。 */
.sm-hub.has-img {
  background-color: #12294f;
  background-clip: padding-box;
  background-origin: padding-box;
  border-color: rgb(255 255 255 / 18%);
  backdrop-filter: none;
  box-shadow: 0 14px 32px rgb(0 0 0 / 28%);
}
.sm-hub.has-img .sm-hub-city,
.sm-hub.has-img .sm-hub-country,
.sm-hub.has-img .sm-hub-clock,
.sm-hub.has-img .sm-hub-cov { text-shadow: 0 1px 6px rgb(0 0 0 / 35%); }
.sm-hub.has-img .sm-hub-country { color: #c4d6ec; }

/* ── 交付与物流 ───────────────────────────────────── */
.sm-deliv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sm-deliv-i {
  padding: 24px 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: 2px;
}
.sm-deliv-i h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: var(--nv-800); }
.sm-deliv-i p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.sm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-tags span {
  padding: 3px 9px;
  font-size: 11.5px;
  color: var(--nv-800);
  background: #eef3f9;
  border-radius: 2px;
}

/* ── 典型应用场景 ─────────────────────────────────── */
.sm-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sm-case {
  padding: 24px 26px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.sm-case-ind {
  display: inline-block;
  padding: 4px 11px;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--nv-800);
  border-radius: 2px;
}
.sm-case-b { padding-inline-start: 13px; margin-bottom: 12px; border-inline-start: 3px solid #dbe2ea; }
.sm-case-b--sol { border-inline-start-color: var(--teal); }
.sm-case-k {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: 0.6px;
}
.sm-case-b--sol .sm-case-k { color: var(--teal); }
.sm-case-b p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--ink); }

/* ── 技术资源 ─────────────────────────────────────── */
.sm-res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.sm-res-i {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 22px 20px;
  overflow: hidden;
  text-align: start;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.sm-res-i:hover { border-color: var(--teal); box-shadow: 0 8px 22px rgb(16 40 80 / 10%); transform: translateY(-2px); }
.sm-res-n {
  position: absolute;
  top: 10px;
  inset-inline-end: 14px;
  font-size: 34px;
  font-weight: 800;
  color: #eef2f7;
  letter-spacing: -1px;
}
.sm-res-i b { position: relative; font-size: 15.5px; color: var(--nv-800); }
.sm-res-i em { flex: 1; font-size: 13px; font-style: normal; line-height: 1.7; color: var(--ink-2); }
.sm-res-cta { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--teal); }

/* ── 最近浏览 ─────────────────────────────────────── */
.sm-recent-sec { padding-top: 34px; padding-bottom: 34px; background: var(--bg); }
.sm-recent-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sm-h2--left { justify-content: flex-start; margin: 0; font-size: 19px; text-align: start; }
.sm-recent-x {
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  background: transparent;
  border: 0;
}
.sm-recent-x:hover { color: var(--teal); text-decoration: underline; }
/*
 * 最近浏览。横向一排、可左右滚。
 *
 * ⚠️ 轨道上限**必须是固定值，不能是 1fr**。
 *    原来写的是 `minmax(150px, 1fr)` + `grid-auto-flow: column`：
 *    只看过 1 个产品时，那唯一一列拿到 1fr = 整个 1400px，
 *    卡片被拉成一条横贯全屏的白带，中间一张小到看不清的产品图 ——
 *    而这正是刚看过一个产品的新访客必然看到的样子。
 *    与首页品牌墙那条是同一类问题（少数据时 1fr 会把仅有的一项拉满行）。
 *
 *    改成 minmax(150px, 190px)：一张卡就是 190px，十张卡就横向滚动。
 *    justify-content: start 保证它靠左而不是被居中拉开。
 */
/* 2026-10-12：改为固定 6 列一行（最多显示 6 个）。显式写 6 条轨道，
   只看过 1 个产品时它也只占 1/6，不会被拉成整行 —— 上面那条注释说的问题同样避免了 */
.sm-recent {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 992px) { .sm-recent { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sm-recent { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.sm-recent-i {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 16px 14px 14px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.16s, box-shadow 0.16s;
}
.sm-recent-i:hover { border-color: var(--teal); box-shadow: 0 6px 18px rgb(16 40 80 / 9%); }
.sm-recent-shot { display: block; width: 100%; height: 110px; margin-bottom: 6px; }
.sm-recent-i b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--link);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sm-recent-i em { font-size: 11px; font-style: normal; color: #8a97a5; }

/* ── 合作方式 ─────────────────────────────────────── */
.sm-how {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.sm-how-i {
  position: relative;
  padding: 24px 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
}
/* 步骤之间的连接箭头：最后一格不画 */
.sm-how-i:not(:last-child)::after {
  position: absolute;
  top: 50%;
  inset-inline-end: -11px;
  z-index: 1;
  font-size: 18px;
  line-height: 1;
  color: #c3ccd8;
  content: '›';
  transform: translateY(-50%);
}
.sm-how-k {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: 1.5px;
}
.sm-how-i b { display: block; margin-bottom: 6px; font-size: 15.5px; color: var(--nv-800); }
.sm-how-i em { font-size: 13px; font-style: normal; line-height: 1.7; color: var(--ink-2); }

/* ── 分类 ─────────────────────────────────────────── */
.sm-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.sm-cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 22px 14px 20px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.sm-cat:hover { border-color: var(--teal); box-shadow: 0 8px 22px rgb(16 40 80 / 10%); transform: translateY(-2px); }
.sm-cat-ic {
  display: grid;
  width: 46px;
  height: 46px;
  color: #fff;
  border-radius: 50%;
  place-items: center;
}
.sm-cat-ic svg { width: 24px; height: 24px; }
.sm-cat b { font-size: 14.5px; color: var(--nv-800); }
.sm-cat em { font-size: 12px; font-style: normal; line-height: 1.5; color: var(--ink-2); }

/* ── 品牌墙 ───────────────────────────────────────── */
/*
 * 品牌墙（2026-09-09 重做）。
 *
 * 原来是 `repeat(6, 1fr)` 的细线网格：容器画 border-top + border-left，
 * 每格画 border-right + border-bottom，拼成一张表格。24 个品牌时很好看，
 * 但**品牌少的时候会露馅** —— 只有 1 个已发布品牌时，那两条容器边框仍然
 * 横贯整个 1400px，右边是一大片什么都没有的空白，看起来像页面没加载完。
 *
 * 现在：固定宽度轨道 + auto-fill + justify-content: center。
 *   · 轨道是 minmax(168px, 208px) 而不是 1fr —— 1fr 会让仅有的一张卡片
 *     被拉成一整行那么宽，比留白更难看；
 *   · 边框回到每张卡片自己身上，没有卡片的地方就什么都没有；
 *   · 居中：1 张卡片时它在正中，24 张时铺满一行、居中是无操作。
 *     一条规则同时管住"很少"和"很多"两种状态。
 */
/* 2026-10-17：与品牌中心（/brands）统一 —— 一行 8 个、铺满与其它模块相同的内容宽度、LOGO 放大。
   列数按屏宽：8 → 6（≤1280）→ 4（≤992）→ 3（≤760）→ 2（≤480），与 inner.css 的品牌中心同一套断点。
   只显示整行、最多 4 行由 home-island.js fitBrandRows() 负责（读的是这里的实际列数）。 */
.sm-brands {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1280px) { .sm-brands { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 992px)  { .sm-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 760px)  { .sm-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 480px)  { .sm-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sm-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding: 16px 12px 14px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
.sm-brand:hover {
  border-color: var(--teal);
  box-shadow: 0 6px 18px rgb(16 40 80 / 9%);
  transform: translateY(-1px);
}

/*
 * logo 展示区。固定高度 + object-fit: contain 是这里的关键：
 * 品牌 logo 的长宽比从细长字标到方形徽章都有，给 <img> 写死 width/height
 * 一定会压扁其中一批。容器负责占位（所以不产生 CLS），图片自己保持比例。
 * 56px 比原来的一格 112px 里那张小图大得多 —— 工业品牌多是细笔画字标，
 * 小于这个尺寸基本认不出是谁。
 */
.sm-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 84px;            /* 2026-10-17：56 → 84，细笔画字标也认得出 */
  padding: 0 4px;
  margin-bottom: 4px;
}
.sm-brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sm-brand b { font-size: 19px; font-weight: 800; letter-spacing: 0.4px; }

/* 品牌名。两行封顶：德语、日语品牌全称很长，不封顶会把这一排卡片撑成参差不齐的高度 */
.sm-brand-n {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--nv-800);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.sm-brand:hover .sm-brand-n { color: var(--teal-d); }
.sm-brand em { font-size: 11.5px; font-style: normal; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ── 服务领域 ─────────────────────────────────────── */
.sm-exp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }   /* 2026-10-12：4 × 3 */
@media (max-width: 1200px) { .sm-exp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 992px)  { .sm-exp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sm-exp-i {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  justify-content: flex-end;
  height: 150px;
  padding: 20px 22px;
  overflow: hidden;
  text-align: start;
  cursor: pointer;
  background: linear-gradient(140deg, var(--exp-a), var(--exp-b));
  border: 0;
  border-radius: 2px;
}
.sm-exp-i::after {
  position: absolute;
  top: -30%;
  inset-inline-end: -14%;
  width: 180px;
  height: 180px;
  content: '';
  background: rgb(255 255 255 / 8%);
  border-radius: 50%;
}
.sm-exp-t { position: relative; font-size: 18px; font-weight: 700; color: #fff; }
.sm-exp-d { position: relative; font-size: 12.5px; color: rgb(255 255 255 / 78%); }

/* ── 资质墙 ───────────────────────────────────────── */
.sm-qa { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.sm-qa-i {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  padding: 24px 12px 20px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.sm-qa-i:hover { border-color: var(--teal); box-shadow: 0 8px 22px rgb(16 40 80 / 8%); }
.sm-qa-badge {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 4px;
  color: var(--nv-800);
  place-items: center;
}
.sm-qa-badge svg { width: 100%; height: 100%; }
.sm-qa-i b { font-size: 14.5px; font-weight: 700; color: var(--nv-800); }
.sm-qa-i em { font-size: 12px; font-style: normal; line-height: 1.5; color: var(--ink-2); }

/* ── 关于 ─────────────────────────────────────────── */
/* 2026-09-09：三段裸文字改成卡片。
   这一块底色是 --bg（.sm-sec--alt），所以卡片用白底 —— 和「质量与合规」
   (.sm-qa-i)、「新闻」(.sm-news-i) 是同一套：白底 + 1px --line + 2px 圆角，
   hover 换青色描边加一层浅投影。三处刻意保持一致，站点的"卡片"只有一种长相。

   固定 3 列（不是 auto-fill）：内容是写死的三节，永远只有三张，
   不存在少于 3 张被 1fr 拉满的问题。 */
.sm-about { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sm-sec-hd + .sm-about { margin-top: 18px; }
/* 未发布时是 <article>，发布后是 <a>：同一套样式，只有 <a> 才有 cursor 与 hover。
   text-decoration / color 写在本规则里，而不是加进 2736 行那张
   `.sm a.xxx` 白名单 —— 那张表的特异度是 (0,2,1)，专门用来盖住深底上的
   反色文字；这里的卡片是白底深字，本来就该继承正文色，走本地规则更简单。 */
.sm-about-i {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 24px 20px;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
a.sm-about-i { cursor: pointer; }
a.sm-about-i:hover { border-color: var(--teal); box-shadow: 0 8px 22px rgb(16 40 80 / 10%); }
/* 键盘焦点单独写：整张卡片是一个 Tab 停靠点，浏览器默认那圈细轮廓在
   白底浅边框上几乎看不见 —— 三张卡连着 Tab 过去会不知道自己在哪一张 */
a.sm-about-i:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.sm-about-i h3 { margin: 0; font-size: 17px; font-weight: 700; color: var(--nv-800); }
a.sm-about-i:hover h3 { color: var(--teal-d); }
.sm-about-i p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--ink-2); }
/* margin-top:auto 把出口压到卡片底部 —— 三段正文长短不一，
   不压底的话三个「查看详情」会各自吊在半空，一排看起来是坏的。
   （与 .sm-news-go 同一处理，那里有更长的说明） */
.sm-about-go {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  /* align-self 收住宽度：flex 项默认 stretch 会把这一行拉满整张卡的宽度，
     虽然看不出来，但以后给它加底色或下划线时会露馅 */
  align-self: flex-start;
  margin-top: auto;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
}

/* ── 新闻 ─────────────────────────────────────────── */
/* 区块标题行：标题在左、「全部 →」在右。
   2026-09-09 为新闻块加的，其它区块想用同一套写法直接套 .sm-sec-hd 即可 */
.sm-sec-hd { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.sm-sec-hd .sm-h2 { margin-bottom: 0; }
.sm-sec-more {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
  white-space: nowrap;
}
.sm-sec-more:hover { color: var(--teal-d); text-decoration: underline; }
.sm-sec-hd + .sm-news { margin-top: 18px; }

.sm-news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* 2026-09-09：从 <article> 改成 <a> —— cursor:pointer 一直写在这里，
   但此前根本没有可点过去的详情页。改成链接后要显式收回 a 的默认色与下划线，
   否则整张卡片会变成蓝色带下划线的一坨。 */
.sm-news-i {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 20px;
  color: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.sm-news-i:hover { border-color: var(--teal); box-shadow: 0 8px 22px rgb(16 40 80 / 10%); }
.sm-news-i time { font-size: 12px; color: #8a97a5; font-variant-numeric: tabular-nums; }
.sm-news-i b { font-size: 15.5px; line-height: 1.5; color: var(--link); }
.sm-news-i:hover b { color: var(--teal-d); }
/* 摘要压成三行：卡片高度不齐会让这一排看起来是坏的 */
.sm-news-i em {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  font-style: normal;
  line-height: 1.7;
  color: var(--ink-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
/* margin-top:auto 把它压到卡片底部，三张卡的「阅读全文」才会对齐成一条线 */
.sm-news-go { margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--teal); }

/* ── 页脚 ─────────────────────────────────────────────
 * 深底上的层次全靠**明度**，不能靠边框：白色描边在深蓝上会发灰发脏。
 * 这里只用三档文字色（#fff 标题 / #cfdcec 正文 / #9db3cd 辅助）
 * 加两档分隔线透明度（14% / 9%），刻意保持克制。
 * 页脚整体给了一层从 --nv-800 到更深的渐变，让页面收口时"沉下去"，
 * 而不是一块平的色卡 —— 这是"大气"最省成本的做法。
 */
.sm-foot {
  padding: 0 0 22px;
  color: #cfdcec;
  background: linear-gradient(180deg, var(--nv-800) 0%, #16305a 62%, #122748 100%);
}

/* ① 顶带：左品牌 + 渠道，右订阅（2026-09-09 由原「品牌带 + 数据凭证」改） */
.sm-foot-brand {
  display: grid;
  /* 右栏给 340px 下限：订阅框是「输入框 + 按钮」并排，再窄按钮会挤到换行。
     两栏都写 minmax(0, …)，否则 grid 项的 min-width:auto 会被长邮箱撑破栅格。 */
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
  gap: 26px 48px;
  align-items: center;
  /* ⚠️ 只能写纵向 padding。这几条带子都挂着 .sm-wrap，而 .sm-wrap 的
     `padding: 0 20px` 靠 padding 简写实现；这里再写一次简写会把左右内边距
     一起清零，1400px 以下整个页脚顶到浏览器边缘。踩过一次，别改回简写。 */
  padding-top: 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}
.sm-foot-brand-l { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; min-width: 0; }
.sm-foot-idy { display: flex; gap: 14px; align-items: center; min-width: 0; }
.sm-foot-brand-r { min-width: 0; }
.sm-foot-brand-r h4 { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: #fff; }
.sm-foot-brand-r .sm-foot-sub { margin-top: 10px; }
.sm-foot-logo { height: 40px; }
.sm-foot-logo.is-selfbacked { border-radius: 5px; }
/* 页脚的 .is-plate 与顶栏共用同一条规则（见 .sm-logo-img.is-plate）——
   之前两处各写一份，改了顶栏忘了页脚就会出现两种底板样式 */
.sm-foot-mark { width: 38px; height: 38px; color: #6fd0e2; }
.sm-foot-mark svg { width: 100%; height: 100%; }
.sm-foot-brand-t { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
/* 2026-11-03 名称放大到接近顶栏字标；副标题保持 12.5px —— 长文案放弃对齐时仍易读，
   需要对齐时由 _home_top.php 的 smFitBrand 按需收小（与 x-admin utils/fitBrandLine.ts 同一算法） */
.sm-foot-brand-t b { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: 0.2px; line-height: 1.2; }
.sm-foot-brand-t em { font-size: 12.5px; font-style: normal; line-height: 1.5; color: #9fc0e0; }
.sm-foot-brand-t.is-fit b,
.sm-foot-brand-t.is-fit em { white-space: nowrap; }


/* ② 四列 */
.sm-foot-in { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 34px; padding-top: 30px; padding-bottom: 6px; }
/* 标题上方一道短青线：给每列一个视觉起点，比单纯加粗更有秩序 */
.sm-foot-c h4 {
  position: relative;
  padding-top: 11px;
  margin: 0 0 14px;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
}
.sm-foot-c h4::before {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 22px;
  height: 2px;
  content: '';
  background: var(--teal);
}
.sm-foot-c p { margin: 0 0 7px; font-size: 13px; line-height: 1.7; }
.sm-foot-c ul { padding: 0; margin: 0; list-style: none; }
.sm-foot-c li { margin-bottom: 7px; }
.sm-foot-c a { font-size: 13px; color: #cfdcec; text-decoration: none; cursor: pointer; }
.sm-foot-c a:hover { color: #fff; text-decoration: underline; }

/* 联系列：图标 + 文字两栏对齐，多行地址不会缩回图标下面 */
.sm-foot-meta li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; margin-bottom: 11px; font-size: 13px; line-height: 1.65; }
.sm-foot-ic { width: 18px; height: 18px; margin-top: 1px; color: #6fd0e2; }
.sm-foot-meta a { font-size: 13px; }
.sm-foot-strong { font-size: 15px !important; font-weight: 700; color: #fff !important; letter-spacing: 0.3px; }

/* 仓储列：城市与国别同行、覆盖区域另起一行，三个仓共省下三行高度，
   否则这一列会比左边的联系列高出一百多像素，四列底边参差 */
.sm-foot-hubs li { margin-bottom: 10px; line-height: 1.5; }
.sm-foot-hubs b { margin-inline-end: 7px; font-size: 13.5px; color: #fff; }
.sm-foot-hubs span { font-size: 12px; color: #cfdcec; }
.sm-foot-hubs em { display: block; font-size: 11.5px; font-style: normal; color: #8ba5c4; }
.sm-foot-note--hub { margin: -4px 0 12px; }

/* 关注渠道：现在挂在 ① 顶带的左栏里，纵向间距交给 .sm-foot-brand-l 的 gap */
.sm-foot-social { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-foot-soc {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 7px 13px;
  font-size: 12.5px;
  color: #dce7f4;
  cursor: pointer;
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 18px;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.sm-foot-soc:hover { color: #fff; background: rgb(255 255 255 / 14%); border-color: rgb(111 208 226 / 55%); }
.sm-foot-soc i { font-size: 10px; font-style: normal; color: #8ba5c4; }
.sm-foot-soc:hover i { color: #6fd0e2; }

.sm-foot-sub { display: flex; }
.sm-foot-sub input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  border: 0;
  outline: none;
}
.sm-foot-sub button {
  padding: 0 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: var(--teal);
  border: 0;
}
.sm-foot-sub button:hover { background: var(--teal-d); }
.sm-foot-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.6; color: #9db3cd; }

/* ④ 底栏：法务左、版权右。居中排一长串"|"是十年前的做法，
   两端对齐既省一行高度，也让页脚有明确的收口边。 */
.sm-foot-b {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / 14%);
}
.sm-foot-legal { margin: 0; font-size: 12.5px; }
.sm-foot-legal a { color: #cfdcec; text-decoration: none; cursor: pointer; }
.sm-foot-legal a:hover { color: #fff; text-decoration: underline; }
.sm-foot-legal i { padding: 0 7px; font-style: normal; color: #5c7ba1; }
.sm-foot-copy { margin: 0; font-size: 12.5px; color: #9db3cd; }
.sm-foot-copy i { padding: 0 5px; font-style: normal; color: #5c7ba1; }
.sm-foot-copy a { color: #9db3cd; text-decoration: none; }
.sm-foot-copy a:hover { color: #fff; }

/* ── 询价单抽屉（2026-10-29 改版） ─────────────────────
   遮罩可点收起；左缘「收起」把手；右缘停靠条；三步指示；滑入滑出。 */
.sm-drawer { position: fixed; inset: 0; z-index: 120; }
.sm-drawer-mask {
  position: absolute;
  inset: 0;
  cursor: pointer;
  /* 只压暗不模糊：访客常要对照页面上的型号，糊掉就看不清了 */
  background: rgb(12 28 54 / 32%);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.sm-drawer.is-in .sm-drawer-mask { opacity: 1; }
.sm-drawer.is-out .sm-drawer-mask { opacity: 0; }

.sm-panel {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(460px, 92vw);
  background: #fff;
  box-shadow: -18px 0 50px rgb(10 30 60 / 24%);
  transform: translateX(100%);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sm-drawer.is-in .sm-panel { transform: none; }
.sm-drawer.is-out .sm-panel { transform: translateX(100%); transition-duration: 0.2s; }

/* 收起把手：抽屉左缘正中的青色竖条。比 × 大得多，鼠标从页面移过来第一眼就能看到 */
.sm-panel-fold {
  position: absolute;
  top: 50%;
  inset-inline-start: -38px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 38px;
  padding: 14px 0 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: var(--teal);
  border: 0;
  border-radius: 10px 0 0 10px;
  box-shadow: -6px 4px 18px rgb(10 30 60 / 22%);
  transform: translateY(-50%);
  transition: background 0.15s, width 0.15s, inset-inline-start 0.15s;
}
.sm-panel-fold:hover { inset-inline-start: -44px; width: 44px; background: var(--teal-d); }
.sm-panel-fold:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
.sm-panel-fold-ic { display: grid; width: 22px; height: 22px; background: rgb(255 255 255 / 18%); border-radius: 50%; place-items: center; }
.sm-panel-fold-ic svg { width: 15px; height: 15px; }
.sm-panel-fold-t { line-height: 1.2; letter-spacing: 2px; writing-mode: vertical-rl; }

.sm-panel-h {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 18px 18px 24px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(10 143 166 / 34%) 0%, transparent 55%),
    linear-gradient(135deg, var(--nv-800) 0%, var(--nv-900) 100%);
}
.sm-panel-h-l { min-width: 0; }
.sm-panel-h h2 { display: flex; gap: 8px; align-items: center; margin: 0 0 5px; font-size: 19px; font-weight: 700; }
.sm-panel-cnt {
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  color: var(--nv-900);
  text-align: center;
  background: #6fd0e2;
  border-radius: 11px;
}
.sm-panel-h p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #c3d4ea; }
.sm-panel-x {
  display: grid;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  color: #c3d4ea;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
  place-items: center;
}
.sm-panel-x svg { width: 19px; height: 19px; }
.sm-panel-x:hover { color: #fff; background: rgb(255 255 255 / 14%); }

/* 三步指示 */
.sm-steps {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 12px 24px;
  margin: 0;
  list-style: none;
  background: #f6f8fb;
  border-bottom: 1px solid var(--line);
}
.sm-steps li { display: flex; flex: 1; gap: 7px; align-items: center; font-size: 12px; color: #97a2b0; white-space: nowrap; }
.sm-steps li + li::before { flex: 0 0 14px; height: 1px; margin-inline-end: 2px; content: ''; background: #d5dbe3; }
.sm-steps i {
  display: grid;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  color: #97a2b0;
  background: #fff;
  border: 1.5px solid #d5dbe3;
  border-radius: 50%;
  place-items: center;
}
.sm-steps li.is-on { font-weight: 700; color: var(--nv-800); }
.sm-steps li.is-on i { color: #fff; background: var(--teal); border-color: var(--teal); }
.sm-steps li.is-done { color: var(--teal-d); }
.sm-steps li.is-done i { color: var(--teal); background: #eaf6f8; border-color: #a9d9e2; }

.sm-panel-b { flex: 1; padding: 6px 24px; overflow-y: auto; overscroll-behavior: contain; }
.sm-panel-f { padding: 14px 24px 20px; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 16px rgb(10 30 60 / 4%); }

/* 空清单 */
.sm-panel-empty { padding: 42px 16px 26px; text-align: center; }
.sm-panel-empty-ic { display: inline-grid; width: 64px; height: 64px; margin-bottom: 14px; color: var(--teal); background: #eaf6f8; border-radius: 50%; place-items: center; }
.sm-panel-empty-ic svg { width: 30px; height: 30px; }
.sm-panel-empty .sm-panel-empty-t { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--nv-900); }
.sm-panel-empty .sm-panel-empty-s { max-width: 300px; margin: 0 auto 20px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }

/* 右缘停靠条：收起后留下的入口，显示件数，一点即开 */
.sm-rfq-dock {
  position: fixed;
  top: 50%;
  inset-inline-end: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  width: 40px;
  padding: 12px 0 14px;
  font-family: inherit;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, var(--nv-700) 0%, var(--nv-800) 100%);
  border: 0;
  border-radius: 10px 0 0 10px;
  box-shadow: -6px 6px 22px rgb(10 30 60 / 26%);
  transform: translateY(-50%);
  transition: width 0.16s, background 0.16s;
  animation: smDockIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.sm-rfq-dock:hover { width: 46px; background: linear-gradient(180deg, var(--teal) 0%, var(--teal-d) 100%); }
.sm-rfq-dock:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.sm-rfq-dock-ic svg { display: block; width: 20px; height: 20px; }
.sm-rfq-dock-n {
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  font-size: 11.5px;
  line-height: 20px;
  color: var(--nv-900);
  text-align: center;
  background: #6fd0e2;
  border-radius: 10px;
}
.sm-rfq-dock-t { font-size: 12.5px; font-weight: 700; letter-spacing: 2px; writing-mode: vertical-rl; }
@keyframes smDockIn { from { opacity: 0; transform: translate(100%, -50%); } to { opacity: 1; transform: translateY(-50%); } }

.sm-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sm-panel, .sm-drawer-mask { transition: none; }
  .sm-rfq-dock { animation: none; }
}
/* 手机：抽屉铺满，把手挪进抽屉顶部（屏幕外没有地方放它），停靠条缩小 */
@media (max-width: 560px) {
  .sm-panel { width: 100%; }
  .sm-panel-fold {
    top: 20px;
    inset-inline-start: auto;
    inset-inline-end: 58px;
    z-index: 1;
    flex-direction: row;
    width: auto;
    padding: 6px 12px 6px 8px;
    background: rgb(255 255 255 / 16%);
    border-radius: 16px;
    box-shadow: none;
    transform: none;
  }
  .sm-panel-fold:hover { inset-inline-start: auto; width: auto; background: rgb(255 255 255 / 24%); }
  .sm-panel-fold-ic { transform: rotate(90deg); background: transparent; }
  .sm-panel-fold-t { letter-spacing: 0; writing-mode: horizontal-tb; }
  .sm-panel-h { padding-inline-end: 14px; }
  .sm-panel-h-l { padding-inline-end: 84px; }
  .sm-steps { padding: 10px 16px; }
  .sm-steps li { font-size: 11.5px; }
  .sm-panel-b { padding: 6px 16px; }
  .sm-panel-f { padding: 12px 16px max(16px, env(safe-area-inset-bottom)); }
  .sm-rfq-dock { width: 34px; padding: 10px 0; }
  .sm-rfq-dock-t { display: none; }
}

/* ── 第二步：联系方式表单 ─────────────────────────── */
/* 返回清单：做成一整条可点区域而不是一个小箭头。
   右侧带上"几个型号、合计多少"，客户填表时始终看得见自己要问的是什么。 */
.sm-lead-back {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  margin: 8px 0 14px;
  font-size: 13px;
  color: var(--nv-800);
  cursor: pointer;
  background: #f2f6fb;
  border: 0;
  border-radius: 3px;
}
.sm-lead-back:hover { background: #e8eff8; }
.sm-lead-back i { font-size: 17px; font-style: normal; line-height: 1; }
.sm-lead-back span { margin-inline-start: auto; font-size: 12px; color: var(--ink-2); }

.sm-lead-fail {
  padding: 11px 13px;
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #8a4b12;
  background: #fff6e6;
  border-inline-start: 3px solid #e0a02a;
  border-radius: 2px;
}
.sm-lead-fail b { display: block; margin-bottom: 2px; color: #7a3f0c; }
.sm-lead-fail a { margin-inline-start: 4px; color: var(--link); text-decoration: underline; }

.sm-lead { display: grid; gap: 13px; padding-bottom: 8px; }
.sm-lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.sm-lead-f { display: block; }
.sm-lead-f > span { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
/* 必填/选填标记压到最小：字段名才是要读的，标记只是余光扫到 */
.sm-lead-f i { margin-inline-start: 5px; font-size: 11px; font-style: normal; font-weight: 400; color: #9aa5b1; }
.sm-lead-f i.sm-lead-req { color: #c0392b; }
.sm-lead-f input,
.sm-lead-f textarea {
  width: 100%;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d5dbe3;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sm-lead-f textarea { resize: vertical; }
.sm-lead-f input:focus,
.sm-lead-f textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgb(10 143 166 / 12%); }
.sm-lead-f input.is-bad { border-color: #c0392b; background: #fff8f7; }
/* 错误提示挂在字段下方而不是弹 toast：toast 不告诉人哪一格错了 */
.sm-lead-f em { display: block; margin-top: 4px; font-size: 11.5px; font-style: normal; color: #c0392b; }

.sm-btn--block[disabled] { cursor: not-allowed; opacity: 0.6; }

/* 成功态占满面板，是一个交代而不是一闪而过的提示 */
.sm-lead-done {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 30px 30px 40px;
  text-align: center;
}
.sm-lead-done-ic { width: 54px; height: 54px; color: var(--teal); }
.sm-lead-done-ic svg { width: 100%; height: 100%; }
.sm-lead-done h3 { margin: 6px 0 0; font-size: 18px; font-weight: 700; color: var(--nv-900); }
.sm-lead-done p { max-width: 320px; margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.sm-lead-done-mail { font-weight: 600; color: var(--ink) !important; }
.sm-lead-done .sm-btn { margin-top: 12px; }

@media (max-width: 420px) {
  .sm-lead-row { grid-template-columns: 1fr; }

  /* 320px（还在用的最窄机型）上英文站会横向溢出几个像素：
     LOGO 那行「MORUN International / Specialty Lubricants Distributor」
     和页脚那两栏的标题都比 280px 的内容区宽。
     溢出只有 6px，但表现是**整页可以左右拖动** —— 用户会以为页面坏了。
     这里不改字号层级，只允许它们换行、并给栅格项一个 min-width。 */
  .sm-logo-txt b { font-size: 18px; }
  .sm-logo-txt em { font-size: 10.5px; }
  .sm-logo-txt b, .sm-logo-txt em { overflow-wrap: anywhere; }
  .sm-foot-brand > *, .sm-foot-in > * { min-width: 0; }
  .sm-foot-brand-r h4, .sm-foot-brand-r p { overflow-wrap: anywhere; }
}
.sm-panel-sum {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.sm-panel-sum b { font-size: 15px; color: var(--nv-800); }
.sm-panel-clear {
  padding: 4px 8px;
  margin-inline-start: auto;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.sm-panel-clear:hover { color: #c0392b; }
.sm-panel-clear.is-armed { font-weight: 600; color: #fff; background: #c0392b; border-color: #c0392b; }
.sm-panel-hint { margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: #8a97a5; }
.sm-panel-hint a { margin-inline-start: 2px; color: var(--teal-d); text-decoration: underline; text-underline-offset: 2px; }
.sm-btn--next { gap: 8px; }
.sm-btn--next svg { width: 16px; height: 16px; }

/* 清单 */
.sm-inq-l { padding: 0; margin: 0; list-style: none; }
.sm-inq-l li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  animation: smInqIn 0.2s ease-out both;
}
@keyframes smInqIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sm-inq-shot {
  flex: 0 0 60px;
  height: 64px;
  padding: 4px;
  background: #f6f8fb;
  border: 1px solid #edf0f4;
  border-radius: 8px;
}
.sm-inq-t { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.sm-inq-name {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
a.sm-inq-name:hover { color: var(--teal-d); text-decoration: underline; text-underline-offset: 2px; }
.sm-inq-pn { font-size: 11.5px; color: #8a97a5; }
.sm-inq-q { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 8px; }

/* 数量加减器 */
.sm-qty {
  display: inline-flex;
  align-items: stretch;
  height: 32px;
  overflow: hidden;
  border: 1px solid #d5dbe3;
  border-radius: 8px;
}
.sm-qty:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgb(10 143 166 / 12%); }
.sm-qty-b {
  width: 30px;
  font-size: 16px;
  line-height: 1;
  color: var(--nv-800);
  cursor: pointer;
  background: #f6f8fb;
  border: 0;
  transition: background 0.15s, color 0.15s;
}
.sm-qty-b:hover:not(:disabled) { color: var(--teal-d); background: #eaf6f8; }
.sm-qty-b:disabled { cursor: default; color: #c3cad3; }
.sm-qty input {
  width: 52px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  border: 0;
  border-inline: 1px solid #e3e7ec;
  outline: none;
  -moz-appearance: textfield;
}
.sm-qty input::-webkit-outer-spin-button,
.sm-qty input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.sm-inq-x {
  padding: 4px 6px;
  font-family: inherit;
  font-size: 12px;
  color: #8a97a5;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 6px;
}
.sm-inq-x:hover { color: #c0392b; background: #fdf0ef; }

/* 撤销条 */
.sm-inq-undo {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  margin: 10px 0 2px;
  font-size: 12.5px;
  color: #fff;
  background: var(--nv-800);
  border-radius: 8px;
  animation: smInqIn 0.2s ease-out both;
}
.sm-inq-undo span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-inq-undo button {
  flex: 0 0 auto;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #6fd0e2;
  cursor: pointer;
  background: rgb(255 255 255 / 10%);
  border: 0;
  border-radius: 6px;
}
.sm-inq-undo button:hover { color: #fff; background: rgb(255 255 255 / 20%); }

/* 空清单里的「最近浏览」 */
.sm-inq-recent-w { padding: 4px 0 18px; }
.sm-inq-recent-w h3 { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); letter-spacing: 0.5px; }
.sm-inq-recent { padding: 0; margin: 0; list-style: none; }
.sm-inq-recent li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.sm-inq-recent .sm-inq-shot { flex-basis: 46px; height: 50px; }
.sm-inq-recent .sm-inq-name { font-size: 12.5px; -webkit-line-clamp: 1; }
.sm-inq-add {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal-d);
  cursor: pointer;
  background: #eaf6f8;
  border: 1px solid #cfe7ec;
  border-radius: 16px;
}
.sm-inq-add:hover { color: #fff; background: var(--teal); border-color: var(--teal); }

/* ── 弹窗通用（登录 / Cookie 设置） ───────────────── */
.sm-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(12 28 54 / 55%);
  backdrop-filter: blur(2px);
}
.sm-modal-box {
  position: relative;
  width: 100%;
  max-height: 88vh;
  padding: 34px 34px 30px;
  overflow-y: auto;
  background: #fff;
  border-top: 3px solid var(--teal);
  border-radius: 2px;
  box-shadow: 0 26px 70px rgb(10 30 60 / 32%);
}
.sm-modal-box--auth { max-width: 420px; }
.sm-modal-box--cookie { max-width: 640px; }
.sm-modal-x {
  position: absolute;
  top: 12px;
  inset-inline-end: 16px;
  font-size: 26px;
  line-height: 1;
  color: #b3bcc7;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.sm-modal-x:hover { color: var(--ink); }
.sm-modal-t { margin: 0 0 6px; font-size: 21px; font-weight: 700; color: var(--nv-800); }
.sm-modal-s { margin: 0 0 22px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.sm-modal-foot { margin: 18px 0 0; font-size: 13px; color: var(--ink-2); text-align: center; }
.sm-modal-act { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }

.sm-link {
  font-size: 13px;
  color: var(--teal);
  cursor: pointer;
  background: transparent;
  border: 0;
}
.sm-link:hover { text-decoration: underline; }
.sm-link--light { color: #6fd0e2; }

/* ── 表单 ─────────────────────────────────────────── */
.sm-field { display: block; margin-bottom: 16px; }
.sm-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.sm-field input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d8dde3;
  border-radius: 2px;
  outline: none;
  transition: border-color 0.16s;
}
.sm-field input:focus { border-color: var(--teal); }
.sm-form-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.sm-check { display: flex; gap: 7px; align-items: center; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.sm-check input { width: 15px; height: 15px; accent-color: var(--teal); }
.sm-form-err {
  padding: 8px 11px;
  margin: 0 0 14px;
  font-size: 12.5px;
  color: #a8322a;
  background: #fdeceb;
  border-inline-start: 3px solid #d9534f;
}
.sm-btn--line {
  color: var(--nv-800);
  background: transparent;
  border: 1px solid #d8dde3;
}
.sm-btn--line:hover { color: var(--teal); background: #f3f8fa; border-color: var(--teal); }
.sm-btn--ghost {
  color: #fff;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 38%);
}
.sm-btn--ghost:hover { background: rgb(255 255 255 / 12%); }

/* ── Cookie 条与设置 ──────────────────────────────── */
/*
 * Cookie 同意：不做通栏横条，收成与页面内容同宽（1400 栅格）的悬浮卡片。
 *
 * 外层只负责定位且 pointer-events:none —— 它横跨整个视口，
 * 不放行点击的话会把卡片两侧的页面内容全挡住。
 */
.sm-cookie {
  position: fixed;
  inset-inline-end: 0;
  bottom: 0;
  inset-inline-start: 0;
  /*
   * z-index 层级（改之前先对一遍，这里踩过一次）：
   *   100 客服浮层 < 105 Cookie 卡 < 120 询价面板 < 130 登录/Cookie 设置弹窗
   * Cookie 卡要压过客服浮层，但绝不能压过它自己点开的「管理设置」弹窗 ——
   * 一度写成 140，结果设置弹窗打开后被这张卡挡在下面。
   * 而客服浮层现在由 --sw-offset 主动让位，两者其实已经不重叠了。
   */
  z-index: 105;
  padding: 0 20px 18px;
  pointer-events: none;
}
.sm-cookie-in {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  pointer-events: auto;
  background: var(--nv-900);
  border-radius: 8px;
  box-shadow: 0 16px 44px rgb(8 22 45 / 34%);
}
.sm-cookie-t { max-width: 760px; margin: 0; font-size: 13px; line-height: 1.7; color: #cfdcec; }
.sm-cookie-act { display: flex; flex-wrap: wrap; gap: 8px; }
.sm-cookie-act .sm-btn { padding: 9px 18px; font-size: 13px; }

.sm-cookie-cats { padding: 0; margin: 0 0 8px; list-style: none; }
.sm-cookie-cats li { padding: 14px 0; border-top: 1px solid var(--line); }
.sm-cookie-cat-h { display: flex; gap: 12px; align-items: center; margin-bottom: 5px; }
.sm-cookie-cat-h b { font-size: 14.5px; color: var(--nv-800); }
.sm-cookie-cats p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-2); }
.sm-cookie-lock {
  margin-inline-start: auto;
  font-size: 11.5px;
  color: #8a97a5;
}
.sm-switch { margin-inline-start: auto; cursor: pointer; }
.sm-switch input { position: absolute; opacity: 0; pointer-events: none; }
.sm-switch i {
  position: relative;
  display: block;
  width: 38px;
  height: 21px;
  background: #ccd4dd;
  border-radius: 11px;
  transition: background 0.18s;
}
.sm-switch i::after {
  position: absolute;
  top: 2.5px;
  inset-inline-start: 2.5px;
  width: 16px;
  height: 16px;
  content: '';
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s;
}
.sm-switch input:checked + i { background: var(--teal); }
.sm-switch input:checked + i::after { transform: translateX(17px); }
.sm-switch input:focus-visible + i { outline: 2px solid var(--teal); outline-offset: 2px; }

.sm-cookie-ph { margin: 22px 0 8px; font-size: 14.5px; font-weight: 700; color: var(--nv-800); }
.sm-cookie-policy { padding: 16px 18px; background: var(--bg); border-radius: 2px; }
.sm-cookie-policy p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.8; color: var(--ink-2); }
.sm-cookie-policy p:last-child { margin-bottom: 0; }
.sm-cookie-note { color: #8a97a5 !important; font-style: italic; }

/* ── 浮层动画 ─────────────────────────────────────── */
.sm-slide-enter-active, .sm-slide-leave-active { transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1); }
.sm-slide-enter-from, .sm-slide-leave-to { transform: translateX(100%); }
.sm-pop-enter-active, .sm-pop-leave-active { transition: opacity 0.2s ease; }
.sm-pop-enter-from, .sm-pop-leave-to { opacity: 0; }
.sm-rise-enter-active, .sm-rise-leave-active { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.sm-rise-enter-from, .sm-rise-leave-to { transform: translateY(100%); }
@media (prefers-reduced-motion: reduce) {
  .sm-slide-enter-active, .sm-slide-leave-active,
  .sm-rise-enter-active, .sm-rise-leave-active { transition: none; }
}

/* ═══════════════════════════════════════════════════
   响应式
   ═══════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .sm-cats { grid-template-columns: repeat(3, 1fr); }
  .sm-qa { grid-template-columns: repeat(3, 1fr); }
  .sm-deliv, .sm-res, .sm-how { grid-template-columns: repeat(2, 1fr); }
  /* 两列布局下第 2 格右侧没有下一格，箭头会指向空气 */
  .sm-how-i:nth-child(2)::after { content: none; }
}
@media (max-width: 992px) {
  .sm-trust-in { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
  .sm-trust-i:nth-child(3n + 1) { border-inline-start: 0; }
  .sm-hubs { grid-template-columns: 1fr; }
  .sm-cases { grid-template-columns: 1fr; }
  .sm-top-in { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; }
  .sm-search { order: 3; flex: 1 0 100%; max-width: none; }
  .sm-nav { top: 0; }
  /* 窄屏顶栏不再吸顶（.sm-top-in 变成 auto 高度、随页面滚走），
     只剩导航吸在 0 —— 吸顶高度因此只算导航自己 */
  .sm { --sticky-h: 46px; }
  .sm-hero-box { grid-template-columns: 1fr; }
  .sm-hero-l { padding: 30px 26px 28px; }
  .sm-hero-t { font-size: 26px; }
  .sm-promos { grid-template-columns: 1fr; }
  .sm-about, .sm-news, .sm-exp { grid-template-columns: 1fr; }
  .sm-mega-in { grid-template-columns: repeat(2, 1fr); }
  .sm-foot-in { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  /* 顶带在窄屏改为上下堆叠：横排会把定位语挤成两三行碎句，
     而订阅框那栏的 340px 下限也会撑破两栏栅格 */
  .sm-foot-brand { grid-template-columns: minmax(0, 1fr); row-gap: 24px; align-items: start; }
}
@media (max-width: 760px) {
  .sm-nav-in { overflow-x: auto; }
  .sm-nav-i { padding: 0 12px; font-size: 13.5px; white-space: nowrap; }
  /* 窄屏是横向滚动容器，整排左挪会让首项滚不出来：归零 */
  .sm-nav-l { margin-inline-start: 0; }
  .sm-nav-i.is-cur::after { right: 12px; left: 12px; }
  /* 导航在窄屏是横向滚动的，胶囊要跟着不换行、不被压扁 */
  .sm-nav-cta-li { flex: 0 0 auto; padding-inline-start: 6px; }
  .sm-nav-cta { height: 28px; padding: 0 12px; font-size: 12.5px; }
  .sm-cats { grid-template-columns: repeat(2, 1fr); }
  /* 手机上两列，轨道用 1fr 铺满 —— 375px 宽再留固定轨道会剩一条空边 */
  .sm-brand-logo { height: 64px; }   /* 2026-10-17：与品牌中心手机端一致（46 → 64） */
  .sm-qa { grid-template-columns: repeat(2, 1fr); }
  .sm-deliv, .sm-res, .sm-how { grid-template-columns: 1fr; }
  .sm-how-i::after { content: none !important; }
  .sm-trust-in { grid-template-columns: repeat(2, 1fr); }
  .sm-trust-i { border-inline-start: 0 !important; }
  /* 两列时第 5 项落单 → 占满整行居中，不再孤零零贴左 */
  .sm-trust-i:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sm-trust-i b { font-size: 25px; }
  .sm-foot-in { grid-template-columns: 1fr; }
  .sm-foot-b { flex-direction: column; align-items: flex-start; }
  .sm-acct-nm, .sm-rfq-t { display: none; }
  .sm-h2 { font-size: 20px; }
  /* 窄屏回落成通栏：375px 宽的屏幕再留左右边距，按钮会被挤到换行两次 */
  .sm-cookie { padding: 0; }
  .sm-cookie-in { flex-direction: column; align-items: stretch; border-radius: 0; }
  .sm-cookie-act { justify-content: stretch; }
  .sm-cookie-act .sm-btn { flex: 1; }
  .sm-modal-box { padding: 28px 20px 24px; }
}

/* ───────────────────────────────────────────────────────────────
   home.vue · 全局块（box-sizing 与轮播）
   ─────────────────────────────────────────────────────────────── */
/*
 * 这一页所有元素统一 border-box。
 * 项目里没有全局 box-sizing 重置，而本页大量使用「width:100% + 左右 padding」
 * 的容器（.sm-wrap 就是）—— content-box 下它们会比父级宽出 40px，
 * 表现是 Cookie 条最右侧的「全部接受」按钮被视口切掉一半。
 * 放在非 scoped 块里，作用域仍被 .sm 限死，但能覆盖到 ProductCard 等子组件。
 */
.sm,
.sm *,
.sm *::before,
.sm *::after { box-sizing: border-box; }

.sm .ic-rail { overflow: hidden; }
.sm .ic-track { display: flex; transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1); }
.sm .ic-page {
  display: grid;
  flex: 0 0 100%;
  grid-template-columns: repeat(var(--per, 5), minmax(0, 1fr));
  gap: 12px;
}
.sm .ic-nav { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 18px; }
.sm .ic-arrow {
  width: 34px;
  height: 34px;
  font-size: 22px;
  line-height: 1;
  color: #1b3a6b;
  cursor: pointer;
  background: transparent;
  border: 1px solid #dfe3e8;
  border-radius: 50%;
}
.sm .ic-arrow:hover:not(:disabled) { color: #fff; background: #0a8fa6; border-color: #0a8fa6; }
.sm .ic-arrow:disabled { cursor: default; opacity: 0.35; }
.sm .ic-dots { display: flex; gap: 7px; }
.sm .ic-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  cursor: pointer;
  background: #c8d0da;
  border: 0;
  border-radius: 50%;
}
.sm .ic-dot.is-on { background: #1b3a6b; }

/* ───────────────────────────────────────────────────────────────
   ProductCard.vue
   ─────────────────────────────────────────────────────────────── */
.pc {
  display: flex;
  flex-direction: column;
  padding: 18px 14px 16px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.pc:hover {
  border-color: #dfe3e8;
  box-shadow: 0 6px 22px rgb(16 40 80 / 10%);
  transform: translateY(-2px);
}

.pc-shot {
  position: relative;
  height: 148px;
  margin-bottom: 14px;
}
.pc-fav {
  position: absolute;
  top: -2px;
  inset-inline-start: -2px;
  display: grid;
  width: 30px;
  height: 30px;
  color: #b3bcc7;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 50%;
  opacity: 0;
  transition: color 0.16s, opacity 0.16s, background 0.16s;
  place-items: center;
}
.pc-fav svg { width: 20px; height: 20px; }
/* 默认隐藏，hover 卡片才浮出；已收藏的恒显示，否则用户找不到自己收藏过什么 */
.pc:hover .pc-fav,
.pc-fav.is-on,
.pc-fav:focus-visible { opacity: 1; }
.pc-fav:hover { color: #d9534f; background: #f6f7f9; }
.pc-fav.is-on { color: #d9534f; }

.pc-score {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: #0a8fa6;
  border-radius: 2px;
}

.pc-title {
  min-height: 60px;
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
}
.pc-title a {
  display: -webkit-box;
  overflow: hidden;
  color: #16478f;
  text-decoration: none;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.pc-title a:hover {
  text-decoration: underline;
}

.pc-meta {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #4a5568;
}
.pc-meta dt {
  font-weight: 400;
}
.pc-meta dd {
  margin: 0;
  font-weight: 600;
  color: #1f2933;
}

.pc-stock {
  margin: 0 0 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}
.pc-stock.is-in { color: #2e8b3d; }
.pc-stock.is-lead { color: #b06a12; }

.pc-reason {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #445;
  background: #f2f8fa;
  border-inline-start: 3px solid #0a8fa6;
  padding: 7px 9px;
}
.pc-reason-k {
  margin-inline-end: 6px;
  font-weight: 700;
  color: #0a8fa6;
}

.pc-price {
  margin: auto 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #09398b;   /* 2026-10-12：「现货供应」用品牌深蓝 */
  text-align: center;
}

/* 产品简介（2026-10-12）：三行省略；空简介也保留高度，同排卡片标题对齐 */
.pc-intro {
  display: -webkit-box;
  min-height: calc(1.6em * 3);
  margin: 0 0 10px;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.6;
  color: #6b7480;
  text-align: center;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.pc-act {
  display: flex;
  border: 1px solid #d8dde3;
}
.pc-qty {
  width: 52px;
  height: 40px;
  font-size: 14px;
  color: #1f2933;
  text-align: center;
  background: #fff;
  border: 0;
  border-inline-end: 1px solid #d8dde3;
  outline: none;
  -moz-appearance: textfield;
}
.pc-qty::-webkit-outer-spin-button,
.pc-qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.pc-add {
  flex: 1;
  height: 40px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: #0a8fa6;
  border: 0;
  transition: background 0.16s;
}
.pc-add:hover { background: #087d92; }
.pc-add.is-done { background: #2e8b3d; }

/* ───────────────────────────────────────────────────────────────
   PackShot.vue
   ─────────────────────────────────────────────────────────────── */
.ps {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.ps-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.ps-svg {
  width: 100%;
  height: 100%;
}
.ps-body {
  fill: var(--ps-accent);
  opacity: 0.92;
}
.ps-top {
  fill: var(--ps-accent);
  opacity: 0.62;
}
.ps-cap {
  fill: #4a5568;
}
.ps-handle {
  stroke: #4a5568;
  stroke-width: 3;
  stroke-linecap: round;
}
.ps-label {
  fill: #fff;
  opacity: 0.92;
}

/* ───────────────────────────────────────────────────────────────
   AiResultList.vue
   ─────────────────────────────────────────────────────────────── */
.ar {
  --nv-800: #1b3a6b;
  --teal: #0a8fa6;
  --teal-d: #087d92;
  --link: #16478f;
  --ink: #1f2933;
  --ink-2: #4a5568;
  --line: #dfe3e8;

  margin-top: 18px;
}
.ar * { box-sizing: border-box; }

/* 通用件 */
.ar-pn { margin: 0 0 4px; font-size: 12.5px; color: var(--ink-2); }
.ar-pn b { color: var(--ink); }
.ar-stock { margin: 0; font-size: 12.5px; font-weight: 600; }
.ar-stock.is-in { color: #2e8b3d; }
.ar-stock.is-lead { color: #b06a12; }
.ar-price { font-size: 15px; font-weight: 700; color: #09398b; }

.ar-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ar-tags span {
  padding: 2px 8px;
  font-size: 11.5px;
  color: var(--nv-800);
  background: #eef3f9;
  border-radius: 2px;
}

.ar-add {
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  background: var(--teal);
  border: 0;
  border-radius: 2px;
}
.ar-add:hover { background: var(--teal-d); }

.ar-fine { margin: 0; font-size: 11.5px; line-height: 1.6; color: #8a97a5; }
.ar-cta {
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nv-800);
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #c9dde4;
  border-radius: 2px;
}
.ar-cta:hover { color: #fff; background: var(--nv-800); border-color: var(--nv-800); }

.ar-q {
  padding: 7px 11px;
  font-size: 12.5px;
  color: var(--teal);
  text-align: start;
  cursor: pointer;
  background: #fff;
  border: 1px solid #c9dde4;
  border-radius: 14px;
}
.ar-q:hover { color: #fff; background: var(--teal); border-color: var(--teal); }

/* 匹配度条 */
.ar-match { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.ar-match-k { font-size: 11.5px; color: var(--ink-2); }
.ar-match-bar {
  position: relative;
  flex: 1;
  max-width: 160px;
  height: 5px;
  overflow: hidden;
  background: #e3e8ee;
  border-radius: 3px;
}
.ar-match-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--teal), #6fd0e2);
  border-radius: 3px;
}
.ar-match-n { font-size: 12px; font-weight: 700; color: var(--teal); }

/* ── hero：1~2 款 ─────────────────────────────────── */
.ar-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.ar-hero-main { display: grid; gap: 14px; }
.ar-hero-main.is-two { grid-template-columns: 1fr 1fr; }

.ar-card {
  position: relative;
  padding: 20px 22px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.ar-best {
  position: absolute;
  top: 0;
  inset-inline-end: 20px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: var(--teal);
  border-radius: 0 0 3px 3px;
}
.ar-card-top { display: flex; gap: 18px; align-items: flex-start; }
.ar-card-shot { flex: 0 0 92px; height: 108px; }
.ar-card-id { flex: 1; min-width: 0; }
.ar-card-id h3 { margin: 0 0 7px; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--link); }

.ar-reason {
  padding: 11px 14px;
  margin: 14px 0 12px;
  background: #f2f8fa;
  border-inline-start: 3px solid var(--teal);
}
.ar-reason-k { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 700; color: var(--teal); }
.ar-reason p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--ink); }

.ar-card-act {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.ar-aside {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 18px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.ar-aside h4 { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: var(--nv-800); }
.ar-aside .ar-fine { margin-top: 4px; }
.ar-aside .ar-cta { width: 100%; margin-top: 4px; }

/* ── rows：≥3 款 ──────────────────────────────────── */
.ar-rows { padding: 0; margin: 0; list-style: none; }
.ar-row {
  display: grid;
  grid-template-columns: 54px 56px minmax(0, 1.25fr) minmax(0, 1.5fr) 168px;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.ar-row + .ar-row { margin-top: 8px; }
.ar-row:hover { border-color: var(--teal); }

.ar-row-rank { text-align: center; }
.ar-row-rank b { display: block; font-size: 19px; font-weight: 700; color: #c3ccd8; }
.ar-row-rank em {
  display: inline-block;
  padding: 1px 7px;
  margin-top: 3px;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 700;
  color: #fff;
  background: var(--teal);
  border-radius: 2px;
}
.ar-row-shot { height: 62px; }
.ar-row-id { min-width: 0; }
.ar-row-id h3 {
  display: -webkit-box;
  margin: 0 0 5px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--link);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ar-row-reason { min-width: 0; }
.ar-row-reason p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }
.ar-row-act { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

.ar-foot { margin-top: 16px; }
.ar-foot-q { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 12px; }
.ar-foot-k { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ar-foot-b { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.ar-foot-b .ar-fine { max-width: 700px; }

/* ── 同类可选 ─────────────────────────────────────── */
.ar-related { padding-top: 16px; margin-top: 18px; border-top: 1px dashed #c9d5e0; }
.ar-related h4 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ar-related h4 span { margin-inline-start: 8px; font-weight: 400; color: #8a97a5; }
.ar-related ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.ar-related li {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 3px;
}
.ar-rel-shot { flex: 0 0 30px; height: 38px; }
.ar-related li div { flex: 1; min-width: 0; }
.ar-related li b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--link);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ar-related li div span { font-size: 11px; color: #8a97a5; }
.ar-rel-add {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  font-size: 16px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  background: var(--teal);
  border: 0;
  border-radius: 50%;
}
.ar-rel-add:hover { background: var(--teal-d); }

/* ── 响应式 ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .ar-hero { grid-template-columns: 1fr; }
  .ar-hero-main.is-two { grid-template-columns: 1fr; }
  /* 行式在窄屏塌成两行：五列硬挤会把理由压成一列单字 */
  .ar-row {
    grid-template-columns: 44px 48px minmax(0, 1fr);
    grid-template-areas:
      'rank shot id'
      'reason reason reason'
      'act act act';
    row-gap: 10px;
  }
  .ar-row-rank { grid-area: rank; }
  .ar-row-shot { grid-area: shot; }
  .ar-row-id { grid-area: id; }
  .ar-row-reason { grid-area: reason; }
  .ar-row-act { grid-area: act; flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 560px) {
  .ar-card-top { flex-direction: column; }
  .ar-card-shot { height: 90px; }
  .ar-foot-b { flex-direction: column; align-items: stretch; }
  .ar-foot-b .ar-cta { width: 100%; }
}

/* ───────────────────────────────────────────────────────────────
   在线咨询浮窗（ServiceWidget.vue / home-island.js 共用）
   2026-10-29 改版：头像式头部、分段标签、访客气泡、时间戳、未读角标、
   开场快捷话题、提交成功态、手机全屏。类名只增不减，Vue 版继续可用。
   ─────────────────────────────────────────────────────────────── */
.sw {
  --nv-900: #12294f;
  --nv-800: #1b3a6b;
  --nv-700: #24488a;
  --teal: #0a8fa6;
  --teal-d: #087d92;
  --teal-50: #eaf6f8;
  --ink: #1f2933;
  --ink-2: #4a5568;
  --ink-3: #8a97a5;
  --line: #e3e7ec;
  --ok: #2fae55;
  --warn: #d99b25;
  --danger: #c2413a;

  position: fixed;
  inset-inline-end: 22px;
  /* --sw-offset 由页面注入：底部有 Cookie 卡片之类的浮层时整体上抬 */
  bottom: calc(22px + var(--sw-offset, 0px));
  z-index: 100;
  transition: bottom 0.24s cubic-bezier(0.4, 0, 0.2, 1);
  /* 右下角浮动栈：回到顶部在上、客服在下，间距交给 gap 而不是硬编码的 bottom 偏移 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sw * { box-sizing: border-box; }
.sw button { font-family: inherit; }
.sw :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
/* 输入框自带聚焦光晕，不再叠一圈描边，否则是双层边框 */
.sw input:focus-visible, .sw textarea:focus-visible { outline: none; }

/* 快商通站点（2026-11-06）：容器里只剩「回到顶部」，整体上移给快商通自己的右下角按钮让位。
   让位距离用变量，快商通后台改了按钮位置 / 大小时只改这一个值 */
.sw.sw--ext { --sw-ext-gap: 96px; bottom: calc(var(--sw-ext-gap) + var(--sw-offset, 0px)); }

/* ── 回到顶部 ─────────────────────────────────────── */
/* 刻意做成从属元素：比客服按钮小一号、无文字、默认半透明描边，hover 才实心 */
.sw-top {
  display: grid;
  width: 40px;
  height: 40px;
  color: var(--nv-800);
  cursor: pointer;
  background: rgb(255 255 255 / 92%);
  border: 1px solid rgb(27 58 107 / 14%);
  border-radius: 50%;
  box-shadow: 0 4px 14px rgb(16 40 80 / 14%);
  backdrop-filter: blur(4px);
  transition: background 0.16s, color 0.16s, transform 0.16s, border-color 0.16s;
  place-items: center;
}
.sw-top svg { width: 19px; height: 19px; }
.sw-top:hover { color: #fff; background: var(--nv-800); border-color: var(--nv-800); transform: translateY(-2px); }

/* ── 启动按钮 ─────────────────────────────────────── */
.sw-launch {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 22px 12px 14px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--nv-700) 0%, var(--nv-800) 55%, var(--nv-900) 100%);
  border: 0;
  border-radius: 40px;
  box-shadow: 0 10px 28px rgb(16 40 80 / 32%), inset 0 1px 0 rgb(255 255 255 / 12%);
  transition: transform 0.18s, box-shadow 0.18s;
  animation: swIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.sw-launch:hover { box-shadow: 0 14px 34px rgb(16 40 80 / 38%), inset 0 1px 0 rgb(255 255 255 / 12%); transform: translateY(-2px); }
.sw-launch-ic {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  background: rgb(255 255 255 / 14%);
  border-radius: 50%;
  place-items: center;
}
.sw-launch-ic svg { display: block; width: 20px; height: 20px; }
.sw-dot-on {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 10px;
  height: 10px;
  background: var(--ok);
  border: 2px solid var(--nv-800);
  border-radius: 50%;
}
.sw-dot-on::after {
  position: absolute;
  inset: -2px;
  content: '';
  border: 2px solid var(--ok);
  border-radius: 50%;
  animation: swPulse 2.2s ease-out infinite;
}
.sw-badge {
  position: absolute;
  top: -6px;
  inset-inline-end: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background: var(--danger);
  border: 2px solid #fff;
  border-radius: 10px;
}
.sw-launch.has-unread { animation: swIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both, swNudge 2.8s ease-in-out 0.6s 2; }

/* ── 面板 ─────────────────────────────────────────── */
.sw-panel {
  display: flex;
  flex-direction: column;
  width: min(392px, calc(100vw - 32px));
  height: min(640px, calc(100vh - 110px));
  overflow: hidden;
  background: #fff;
  border: 1px solid rgb(16 40 80 / 8%);
  border-radius: 14px;
  box-shadow: 0 24px 64px rgb(10 30 60 / 28%), 0 2px 8px rgb(10 30 60 / 8%);
  transform-origin: bottom right;
  animation: swPanel 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.sw-h {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 14px 16px 18px;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgb(10 143 166 / 38%) 0%, transparent 55%),
    linear-gradient(135deg, var(--nv-800) 0%, var(--nv-900) 100%);
}
.sw-av {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  color: #fff;
  background: rgb(255 255 255 / 14%);
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 50%;
  place-items: center;
}
.sw-av svg { width: 21px; height: 21px; }
.sw-av.is-live::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  content: '';
  background: var(--ok);
  border: 2px solid var(--nv-800);
  border-radius: 50%;
}
.sw-h-l { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.sw-h-l b { font-size: 16px; font-weight: 700; letter-spacing: 0.2px; }
.sw-h-s { font-size: 12px; line-height: 1.5; color: #c3d4ea; }
.sw-x {
  display: grid;
  flex: 0 0 auto;
  align-self: flex-start;
  width: 32px;
  height: 32px;
  color: #c3d4ea;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
  place-items: center;
  font-size: 22px;
  line-height: 1;
}
.sw-x svg { width: 18px; height: 18px; }
.sw-x:hover { color: #fff; background: rgb(255 255 255 / 14%); }

.sw-status {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 7px 18px;
  margin: 0;
  font-size: 12px;
  color: #2a6b3b;
  background: #effaf2;
  border-bottom: 1px solid #dcefe1;
}
.sw-status i { flex: 0 0 auto; width: 7px; height: 7px; background: var(--ok); border-radius: 50%; box-shadow: 0 0 0 3px rgb(47 174 85 / 18%); }
.sw-status em { flex: 0 0 auto; margin-inline-start: auto; font-style: normal; color: #6b8a74; font-variant-numeric: tabular-nums; }
.sw-status.is-off { color: #85570f; background: #fdf7e9; border-bottom-color: #f0e2bd; }
.sw-status.is-off i { background: var(--warn); box-shadow: 0 0 0 3px rgb(217 155 37 / 18%); }
.sw-status.is-off em { color: #a08553; }

/* 分段式标签 */
.sw-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 12px 14px 4px;
  background: #f1f4f7;
  border-radius: 10px;
}
.sw-tabs button {
  position: relative;
  flex: 1;
  padding: 8px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 7px;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.sw-tabs button:hover { color: var(--nv-800); }
.sw-tabs button.is-on { color: var(--nv-800); background: #fff; box-shadow: 0 1px 3px rgb(16 40 80 / 14%); }
.sw-tab-dot {
  position: absolute;
  top: 6px;
  margin-inline-start: 4px;
  width: 7px;
  height: 7px;
  background: var(--danger);
  border-radius: 50%;
}

/* ── 对话区 ───────────────────────────────────────── */
.sw-b {
  flex: 1;
  padding: 14px 16px 10px;
  overflow-y: auto;
  background: #fff;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.sw-msg { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 12px; animation: swMsg 0.2s ease-out both; }
.sw-msg--user, .sw-msg--me { align-items: flex-end; }
.sw-bubble {
  max-width: 86%;
  padding: 10px 13px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #f3f6f9;
  border-radius: 4px 14px 14px 14px;
}
.sw-msg--user .sw-bubble,
.sw-msg--me .sw-bubble {
  color: #fff;
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-d) 100%);
  border-radius: 14px 4px 14px 14px;
}
.sw-msg--me.is-fail .sw-bubble { opacity: 0.6; }
.sw-msg--sys { align-items: center; }
.sw-msg--sys .sw-bubble {
  max-width: 100%;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--ink-2);
  text-align: center;
  background: #f6f7f9;
  border-radius: 12px;
}
.sw-meta { display: flex; gap: 8px; align-items: center; margin: 4px 4px 0; font-size: 11px; color: var(--ink-3); }
.sw-meta-err { color: var(--danger); }
.sw-retry {
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
}

.sw-bubble--wait { display: flex; gap: 4px; align-items: center; color: var(--ink-2); }
.sw-bubble--wait i, .sw-wait i {
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
  animation: swBlink 1.05s infinite ease-in-out;
}
.sw-bubble--wait i:nth-child(2), .sw-wait i:nth-child(2) { animation-delay: 0.15s; }
.sw-bubble--wait i:nth-child(3), .sw-wait i:nth-child(3) { animation-delay: 0.3s; }
.sw-bubble--wait span { margin-inline-start: 6px; font-size: 12px; }
.sw-wait { display: flex; gap: 4px; align-items: center; justify-content: center; padding: 6px 0 2px; font-size: 12px; color: var(--ink-2); }
.sw-wait span { margin-inline-start: 6px; }

/* 非工作时间提示卡 */
.sw-note {
  padding: 12px 14px;
  margin: 0 0 12px;
  background: #fdf7e9;
  border: 1px solid #f0e2bd;
  border-radius: 10px;
}
.sw-note p { margin: 0; font-size: 12.5px; line-height: 1.6; color: #6e4c10; }
.sw-note .sw-note-s { margin-top: 4px; font-size: 11.5px; color: #a08553; }
.sw-note .sw-mini { margin-top: 10px; }

/* 推荐卡片 */
.sw-recos { width: 100%; margin-top: 9px; }
.sw-reco {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  margin-bottom: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sw-reco:hover { border-color: #c9dde4; box-shadow: 0 4px 12px rgb(16 40 80 / 8%); }
.sw-reco-shot { flex: 0 0 34px; height: 42px; }
.sw-reco-b { flex: 1; min-width: 0; }
.sw-reco-b b {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #16478f;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sw-reco-pn { display: block; font-size: 11px; color: var(--ink-3); }
.sw-reco-b em { display: block; margin-top: 3px; font-size: 11.5px; font-style: normal; line-height: 1.5; color: var(--ink-2); }
.sw-reco-add {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  font-size: 17px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
  background: var(--teal);
  border: 0;
  border-radius: 50%;
}
.sw-reco-add:hover { background: var(--teal-d); }
.sw-reco-act { display: flex; gap: 7px; margin-top: 9px; }
.sw-mini {
  flex: 1;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: var(--teal);
  border: 0;
  border-radius: 8px;
}
.sw-mini:hover { background: var(--teal-d); }
.sw-mini--ghost { color: var(--nv-800); background: #fff; border: 1px solid var(--line); }
.sw-mini--ghost:hover { color: var(--teal); background: var(--teal-50); border-color: var(--teal); }
.sw-fine { margin: 8px 0 0; font-size: 11px; line-height: 1.6; color: #97a2b0; }

/* 快捷话题 / 追问 */
.sw-qs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.sw-qs--topics { margin: 2px 0 12px; }
.sw-q {
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--teal-d);
  text-align: start;
  cursor: pointer;
  background: var(--teal-50);
  border: 1px solid #cfe7ec;
  border-radius: 16px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sw-q:hover { color: #fff; background: var(--teal); border-color: var(--teal); }

/* 其他联系方式 */
.sw-cts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  padding: 9px 16px;
  font-size: 12px;
  border-top: 1px solid var(--line);
  background: #fafbfc;
}
.sw-cts-h { color: var(--ink-3); }
.sw-ct { display: inline-flex; gap: 5px; align-items: center; font-weight: 600; color: var(--nv-800); text-decoration: none; }
.sw-ct span { display: inline-flex; color: var(--teal); }
.sw-ct svg { width: 14px; height: 14px; }
.sw-ct:hover { color: var(--teal); }

/* 输入条 */
.sw-in { display: flex; gap: 8px; align-items: center; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.sw-in input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: #f3f6f9;
  border: 1px solid transparent;
  border-radius: 21px;
  outline: none;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.sw-in input:focus { background: #fff; border-color: var(--teal); box-shadow: 0 0 0 3px rgb(10 143 166 / 14%); }
.sw-in button {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: var(--teal);
  border: 0;
  border-radius: 21px;
  transition: background 0.15s, transform 0.15s;
}
.sw-in button svg { width: 16px; height: 16px; }
.sw-in button:hover:not(:disabled) { background: var(--teal-d); }
.sw-in button:active:not(:disabled) { transform: scale(0.97); }
.sw-in button:disabled, .sw-in input:disabled { cursor: default; opacity: 0.55; }

/* ── 留言表单 ─────────────────────────────────────── */
.sw-form { display: flex; flex: 1; flex-direction: column; overflow: hidden; }
.sw-form-b { flex: 1; padding: 14px 18px 8px; overflow-y: auto; overscroll-behavior: contain; }
.sw-f { display: block; margin-bottom: 12px; }
.sw-f > span { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.sw-f > span i { font-style: normal; color: var(--danger); }
.sw-f input, .sw-f textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #d8dde3;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sw-f textarea { min-height: 88px; resize: vertical; }
.sw-f input:focus, .sw-f textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgb(10 143 166 / 14%); }
.sw-f-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.sw-attach {
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--teal-50);
  border-inline-start: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
}
.sw-attach-h { margin: 0 0 5px; font-size: 11.5px; font-weight: 700; color: var(--teal-d); }
.sw-attach-l { margin: 0 0 3px; font-size: 11.5px; line-height: 1.6; color: var(--ink-2); word-break: break-word; }
.sw-attach-l b { color: var(--ink); }

.sw-err, .sw-ok {
  padding: 9px 12px;
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.55;
  border-radius: 8px;
}
.sw-err { color: #9b2f28; background: #fdeeed; border: 1px solid #f5cfcc; }
.sw-ok { color: #2a6b3b; background: #effaf2; border: 1px solid #cdebd5; }

.sw-form-f { padding: 12px 18px 14px; border-top: 1px solid var(--line); }
.sw-submit {
  width: 100%;
  height: 44px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: var(--teal);
  border: 0;
  border-radius: 10px;
  transition: background 0.15s;
}
.sw-submit:hover:not(:disabled) { background: var(--teal-d); }
.sw-submit:disabled { cursor: default; opacity: 0.6; }

/* 提交成功 */
.sw-done {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 24px 28px;
  text-align: center;
}
.sw-done-ic { display: grid; width: 56px; height: 56px; color: var(--ok); background: #effaf2; border-radius: 50%; place-items: center; }
.sw-done-ic svg { width: 32px; height: 32px; }
.sw-done b { font-size: 17px; color: var(--nv-800); }
.sw-done p { max-width: 280px; margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.sw-done .sw-mini { flex: 0 0 auto; margin-top: 6px; }
.sw-done .sw-cts { margin-top: 14px; background: transparent; border-top: 0; justify-content: center; }

/* ── 动画 ─────────────────────────────────────────── */
@keyframes swBlink { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }
@keyframes swPulse { 0% { opacity: 0.7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes swIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes swPanel { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes swMsg { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes swNudge { 0%, 100% { transform: none; } 10% { transform: translateY(-4px); } 20% { transform: none; } 30% { transform: translateY(-2px); } 40% { transform: none; } }
.sw-pop-enter-active, .sw-pop-leave-active { transition: opacity 0.16s ease, transform 0.16s ease; transform-origin: bottom right; }
.sw-pop-enter-from, .sw-pop-leave-to { opacity: 0; transform: scale(0.94) translateY(10px); }
.sw-fade-enter-active, .sw-fade-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; }
.sw-fade-enter-from, .sw-fade-leave-to { opacity: 0; transform: translateY(8px); }
@media (prefers-reduced-motion: reduce) {
  .sw-pop-enter-active, .sw-pop-leave-active,
  .sw-fade-enter-active, .sw-fade-leave-active { transition: none; }
  .sw-launch, .sw-panel, .sw-msg, .sw-dot-on::after, .sw-launch.has-unread { animation: none; }
}

/* ── 手机：面板铺满全屏，像原生聊天页 ─────────────── */
@media (max-width: 520px) {
  .sw { inset-inline-end: 14px; bottom: calc(14px + var(--sw-offset, 0px)); }
  .sw.sw--ext { --sw-ext-gap: 84px; bottom: calc(var(--sw-ext-gap) + var(--sw-offset, 0px)); }
  .sw-launch-t { display: none; }
  .sw-launch { padding: 9px; border-radius: 50%; }
  .sw-launch-ic { width: 40px; height: 40px; }
  .sw-launch-ic svg { width: 22px; height: 22px; }
  /* 全屏时盖住 Cookie 条（105），但仍在询价抽屉（120/130）与 toast（200）之下 */
  .sw.is-open { inset: 0; bottom: 0; z-index: 110; gap: 0; }
  .sw.is-open .sw-panel {
    width: 100%;
    height: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation-name: swIn;
  }
  .sw-h { padding-top: max(14px, env(safe-area-inset-top)); }
  .sw-in { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  /* iOS 输入框字号小于 16px 会在聚焦时自动放大页面 */
  .sw-in input, .sw-f input, .sw-f textarea { font-size: 16px; }
  .sw-f-2 { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────────
   直出补充
   ---------------------------------------------------------------
   home.vue 是挂在 Vue 应用里的一个组件，它的外层（body 重置、跳转链接、
   轮播的响应式列数）由别的地方提供。直出页没有那个外层，这几条补上。
   除此之外不往这份文件里加任何东西 —— 它的价值就在于「和 home.vue 一模一样」。
   ─────────────────────────────────────────────────────────────── */

body.sm-body {
  margin: 0;
  background: #fff;
  -webkit-text-size-adjust: 100%;
}

/* 跳到正文。样式取自 site.css，色值换成首页的 --nv-900 */
.intl-skip {
  position: absolute;
  top: 0;
  inset-inline-start: -9999px;
  z-index: 100;
  padding: 10px 16px;
  color: #fff;
  background: #12294f;
  border-radius: 0 0 8px 0;
}
.intl-skip:focus { inset-inline-start: 0; }

/*
 * 轮播每页几列。
 *
 * Vue 版由 syncPerPage() 按视口宽度算出 per，再同时用于「分页切片」和「网格列数」。
 * 直出时没有 JS，只能靠媒体查询 —— 断点与 syncPerPage 逐个对齐：
 *   ≥1200 → 5 ／ ≥992 → 4 ／ ≥760 → 3 ／ ≥520 → 2 ／ 其余 → 1
 *
 * island 挂载后会把 --per 写成行内样式（行内优先级更高，会盖掉这里），
 * 并按同一套断点重新切片，与 Vue 版行为一致。所以这几条只在「JS 还没上」
 * 和「JS 挂不上」两种情况下生效 —— 而那正是它存在的意义。
 */
.sm .ic-page { --per: 1; }
@media (min-width: 520px)  { .sm .ic-page { --per: 2; } }
@media (min-width: 760px)  { .sm .ic-page { --per: 3; } }
@media (min-width: 992px)  { .sm .ic-page { --per: 4; } }
@media (min-width: 1200px) { .sm .ic-page { --per: 6; } }   /* 2026-10-12：6×2 一屏 */

/*
 * 轻提示。
 * home.vue 用的是 Element Plus 的 ElMessage，直出页不引框架，所以自绘一个。
 * 位置、圆角、阴影按首页的令牌来，视觉上与页面其余部分是一套。
 */
.sm-toast-host {
  position: fixed;
  /* 顶栏是双层吸顶（品牌行 + 导航行）共约 108px。
     top:18px 会把提示条正好压在 AI 选型搜索框上 —— 用户看到的是
     "搜索框里冒出来一块灰底文字"，而不是一条提示。压到顶栏底下。 */
  top: 122px;
  inset-inline-start: 50%;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  transform: translateX(-50%);
}
.sm-toast {
  max-width: min(90vw, 460px);
  padding: 9px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #1f2933;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgb(18 41 79 / 14%);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.sm-toast.is-ok   { color: #0d5a4a; background: #eefaf5; border-color: #bfe6d8; }
.sm-toast.is-warn { color: #8a4b09; background: #fff6e8; border-color: #f0d9b5; }
.sm-toast.is-out  { opacity: 0; transform: translateY(-8px); }

@media (prefers-reduced-motion: reduce) {
  .sm-toast { transition: none; }
}

/*
 * AI 搜索的失败态。
 *
 * 这是**新加的一种状态**，home.vue 里没有：那边把网络失败也渲染成
 * 「关键词匹配结果 · 没有找到匹配的产品」，客户看到的是"这家没有我要的产品"，
 * 实际是接口挂了（审计 P1-03）。搞混这两件事的代价是直接丢掉一个询盘。
 */
.sm-aip-fail {
  padding: 22px 24px;
  margin: 6px 0 18px;
  background: #fff8f6;
  border: 1px solid #f3d5cd;
  border-radius: 10px;
}
.sm-aip-fail p {
  max-width: 62ch;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.7;
  color: #7a3428;
}
.sm-aip-fail-act { display: flex; flex-wrap: wrap; gap: 10px; }

/*
 * <button> → <a> 的补正。
 *
 * home.vue 里这些元素是 <button @click="scrollTo()">，因为那一版
 * ROUTE_ENABLED=false，所有跳转都被改成了页内滚动（审计 P2-03）。
 * 直出版把它们换回真链接 —— 爬虫要顺着走、用户要能中键开新标签页。
 *
 * 代价是浏览器默认给 <a> 加下划线。原来的样式表没写 text-decoration
 * （按钮不需要），所以这里补一次。
 */
.sm a.sm-nav-i,
.sm a.sm-nav-cta,
.sm a.sm-btn,
.sm a.sm-promo,
.sm a.sm-cat,
.sm a.sm-brand,
.sm a.sm-exp-i,
.sm a.sm-res-i,
.sm a.sm-recent-i,
.sm a.sm-mega-i,
.sm a.sm-lang,
.sm a.ar-cta {
  /* ⚠️ 这里**只能**改 text-decoration，不能顺手加 color: inherit。
     `.sm a.sm-nav-i` 的特异度(0,2,1)高过 `.sm-nav-i`(0,1,0)，加了 color 会把
     深蓝导航上的浅色文字、青色按钮上的白字、服务位上的白字一起压成正文的深灰。
     这些元素的文字颜色原本就各自写死了，不需要在这里兜底。 */
  text-decoration: none;
}
.sm a.sm-nav-i:hover,
.sm a.sm-nav-cta:hover,
.sm a.sm-btn:hover,
.sm a.sm-promo:hover,
.sm a.sm-cat:hover,
.sm a.sm-brand:hover,
.sm a.sm-exp-i:hover,
.sm a.sm-res-i:hover,
.sm a.sm-recent-i:hover,
.sm a.sm-mega-i:hover,
.sm a.sm-lang:hover,
.sm a.ar-cta:hover { text-decoration: none; }

/* 这几个原本是 button（inline-block 由 UA 给），换成 a 之后要显式声明，
   否则 padding 与宽度在行内元素上表现不一致 */
.sm a.sm-btn { display: inline-flex; align-items: center; justify-content: center; }
.sm a.sm-cat,
.sm a.sm-exp-i,
.sm a.sm-res-i,
.sm a.sm-promo,
.sm a.sm-recent-i { display: flex; }
.sm a.sm-brand { display: inline-flex; align-items: center; justify-content: center; }


/* ═══════════════════════════════════════════════════════════════════════
   登录卡片与登录弹窗（2026-08-26）

   ⚠️ 这一段**必须放在 home.css**，不能放 inner.css。
      首页（layout_home.php）只挂 home.css，而登录弹窗可以从**任何**页面打开 ——
      放 inner.css 的结果是：内页上弹窗正常，首页上弹窗完全没样式
      （tab 变成裸按钮、输入框缩成默认大小、弹窗横跨整屏）。已经踩过一次。

      只有登录**页**独有的排版（.in-auth / .in-auth-wrap / .in-auth-why）
      留在 inner.css —— 那一页本来就走 layout.php。
   ═══════════════════════════════════════════════════════════════════════ */
.sm .in-auth-card { min-width: 0; padding: 28px 30px; border: 1px solid var(--line); border-radius: 3px; }
.sm .in-auth-card h1 { margin: 0 0 6px; font-size: 22px; }
.sm .in-auth-sub { margin: 0 0 18px; font-size: 13px; color: var(--ink-2); }
.sm .in-auth-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.sm .in-auth-tabs button {
  padding: 8px 14px; font-size: 13px; color: var(--ink-2); cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
}
.sm .in-auth-tabs button.is-on { font-weight: 600; color: var(--teal); border-bottom-color: var(--teal); }
.sm .in-auth-form { display: flex; flex-direction: column; gap: 6px; }
/* ⚠️ display:block 不能省。<label> 默认是 inline，后面紧跟 <input>（inline-block）
   时两个会挤在同一行 —— 「密码」标签跑到输入框左边，而且输入框只剩半截宽。
   验证码那一栏碰巧没露馅，因为它后面跟的是 <div class="in-auth-row">（块级），
   把标签挤到了上一行。同一段 HTML，两种表现，全靠下一个元素是不是块级 —— 
   这种"碰巧对了"的地方最容易在改版时爆掉。 */
.sm .in-auth-form label { display: block; margin-top: 8px; font-size: 13px; font-weight: 600; }
/* 面板内部也要成列，否则 label 与 input 之间没有间距节奏 */
.sm .in-auth-form [data-auth-pane] { display: flex; flex-direction: column; gap: 6px; }
.sm .in-auth-form [data-auth-pane] > label { margin-top: 0; }
.sm .in-auth-form [data-auth-pane][hidden] { display: none; }
.sm .in-auth-form input {
  padding: 10px 12px; font-size: 14px; border: 1px solid var(--line); border-radius: 2px; min-width: 0;
}
.sm .in-auth-form input:focus { border-color: var(--teal); outline: none; }
.sm .in-auth-form > button[type="submit"] { margin-top: 16px; }
.sm .in-auth-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.sm .in-auth-tip { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.sm .in-auth-msg { margin: 10px 0 0; min-height: 18px; font-size: 13px; color: #b3261e; }
.sm .in-auth-msg.is-ok { color: #14663f; }
.sm .in-auth-alt { margin: 18px 0 0; padding-top: 16px; font-size: 13px; border-top: 1px solid var(--line); color: var(--ink-2); }
.sm .sm-auth-modal .sm-modal-box {
  max-width: 460px; width: calc(100% - 32px); margin: auto;
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.sm .sm-auth-modal .in-auth-card { border: 0; padding: 4px 4px 8px; }
.sm .sm-auth-modal .in-auth-card h2 { margin: 0 0 6px; font-size: 20px; }

/* 产品卡：图区整块可点进详情（2026-09-21） */
.pc-shot-a { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; cursor: pointer; }
.pc-shot-a:hover img { opacity: .92; }

/* 关注渠道配了跳转链接时是 <a>（2026-09-29）：与纯文字胶囊外观一致，去掉链接下划线 */
a.sm-foot-soc { text-decoration: none; cursor: pointer; }
a.sm-foot-soc:focus-visible { outline: 2px solid #6fd0e2; outline-offset: 2px; }
/* 没配链接的关注渠道：纯文字胶囊，不给可点的暗示 */
.sm-foot-soc.is-text { cursor: default; }
.sm-foot-soc.is-text:hover { color: #dce7f4; background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 12%); }

/* ── 顶栏搜索框（2026-09-29 改版）───────────────────────────────────────────
   按钮 = 放大镜 + 文字。AI 选型关闭（默认）时没有左侧「AI」切换，
   输入框聚焦时给青色描边，与开启 AI 时的外观一致，焦点状态清楚。 */
.sm-search:focus-within { border-color: var(--teal); }
.sm-search-go {
  display: inline-flex;
  flex: none;
  gap: 6px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.sm-search-go-ic { flex: none; width: 17px; height: 17px; }
@media (max-width: 480px) {
  .sm-search-go { padding: 0 16px; }
  .sm-search-in { font-size: 13px; }
}

/* 页脚最底下的「技术支持」一行（2026-09-30）
   独占一行、右对齐；整体比版权行再弱一档，靠细节显得讲究而不是靠醒目：
   字距拉开的小标签 · 青色小星芒 · 品牌名略亮 · 细竖线 · 定位语更淡；悬停品牌名亮起渐变。 */
.sm-foot-tech {
  display: flex;
  flex: 1 0 100%;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin: -2px 0 0;
  font-size: 12px;
  line-height: 1.6;
}
.sm-foot-tech-k {
  font-size: 11px;
  color: #7f9bbd;              /* 对 #152c52 底 4.84:1，满足 WCAG AA（原 #6f8bb0 只有 3.96） */
  letter-spacing: 0.12em;
}
.sm-foot-tech-a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: #9db3cd;
  text-decoration: none;
}
.sm-foot-tech-ic {
  flex: none;
  width: 13px;
  height: 13px;
  color: #6fd0e2;
  opacity: 0.8;
  transition: transform 0.4s ease, opacity 0.2s;
}
.sm-foot-tech-a b {
  font-weight: 600;
  color: #c9d7e9;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.sm-foot-tech-a sup { margin-left: 1px; font-size: 8px; font-weight: 400; vertical-align: super; }
.sm-foot-tech-a i { width: 1px; height: 10px; background: rgb(255 255 255 / 20%); }
.sm-foot-tech-a em { font-style: normal; color: #86a0c1; letter-spacing: 0.04em; transition: color 0.2s; }
.sm-foot-tech-a:hover .sm-foot-tech-ic { opacity: 1; transform: rotate(45deg) scale(1.08); }
.sm-foot-tech-a:hover b {
  color: transparent;
  background: linear-gradient(90deg, #ffffff 0%, #9fe6f2 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.sm-foot-tech-a:hover em { color: #c9d7e9; }
.sm-foot-tech-a:focus-visible { outline: 1px solid #6fd0e2; outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sm-foot-tech-ic { transition: none; }
  .sm-foot-tech-a:hover .sm-foot-tech-ic { transform: none; }
}
@media (max-width: 992px) {
  /* 窄屏底栏是纵向排列：按内容撑开、左对齐 */
  .sm-foot-tech { flex: none; justify-content: flex-start; margin: 0; }
}

/* ── 整站加宽（2026-10-12）：产品卡图片区随卡片宽度等比放大 ─────────────
   原来写死 148px 高：页面加宽后卡片有 330px 宽，图却还是 148px，卡片上半截空荡荡。
   改成 5:3 的比例，并夹在 140–230px 之间（窄屏卡片小也不至于缩成一条，宽屏也不会大成方块）。 */
.pc-shot {
  height: auto;
  aspect-ratio: 5 / 3;
  min-height: 140px;
  max-height: 230px;
}

/* ══════════════════════════════════════════════════════════════════════
   按系列选购 · 图片卡片（2026-10-12）
   图片区带系列色的柔光底与编号；子项是真实链接；底部是含下级的型号数
   ══════════════════════════════════════════════════════════════════════ */
.sm .sm-cats--rich { gap: 16px; align-items: stretch; }
.sm .sm-catc {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgb(18 41 79 / 8%);
  transition: box-shadow .22s, transform .22s;
}
.sm .sm-catc:hover { box-shadow: 0 14px 32px rgb(18 41 79 / 13%); transform: translateY(-3px); }
.sm a.sm-catc-shot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 7 / 5;
  padding: 16px 18px 10px;
  text-decoration: none;
  background: #f5f8fb;   /* 不支持 color-mix 的老浏览器 */
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cc) 30%, transparent) 0, transparent 34%),
    radial-gradient(120% 90% at 50% 100%, #fff 0, color-mix(in srgb, var(--cc) 7%, #fff) 100%);
}
.sm .sm-catc-shot img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.sm .sm-catc:hover .sm-catc-shot img { transform: scale(1.04); }
.sm .sm-catc-shot .sm-cat-ic { width: 64px; height: 64px; }
.sm .sm-catc-shot .sm-cat-ic svg { width: 32px; height: 32px; }
.sm .sm-catc-no {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cc);
}
.sm .sm-catc-b { display: flex; flex: 1; flex-direction: column; padding: 4px 20px 18px; }
.sm .sm-catc-b h3 { margin: 6px 0 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.sm .sm-catc-b h3 a { color: var(--nv-800); text-decoration: none; }
.sm .sm-catc-b h3 a:hover { color: var(--cc); }
.sm .sm-catc-d { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.sm .sm-catc-l { display: grid; gap: 4px; padding: 0; margin: 14px 0 0; list-style: none; }
.sm .sm-catc-l a {
  position: relative;
  display: block;
  padding: 4px 0 4px 14px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  color: var(--cc);
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.sm .sm-catc-l a::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  content: "";
  background: currentColor;
  border-radius: 50%;
  opacity: .45;
  transform: translateY(-50%);
}
.sm .sm-catc-l a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sm .sm-catc-all {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  align-self: flex-start;
  padding: 7px 14px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--cc);
  text-decoration: none;
  background: #eef3f7;
  background: color-mix(in srgb, var(--cc) 9%, #fff);
  border-radius: 999px;
  transition: background .2s, color .2s;
}
.sm .sm-catc-d, .sm .sm-catc-l { margin-bottom: 16px; }
.sm .sm-catc-all:hover { color: #fff; background: var(--cc); }
.sm .sm-catc-all i { font-style: normal; transition: transform .2s; }
.sm .sm-catc-all:hover i { transform: translateX(3px); }
@media (max-width: 560px) {
  .sm .sm-catc-b { padding: 2px 14px 14px; }
  .sm .sm-catc-b h3 { font-size: 15px; }
  .sm .sm-catc-l a { font-size: 13px; }
}

/* ── 主导航：761–1180px 中间档（2026-10-12 修）──────────────────────────────
   英文 10 个导航项加「Brand partnership」胶囊约 975px，平板 / 小笔记本宽度下会顶出页面，
   整页出现横向滚动条（≤760px 早已是横向滚动容器，没问题）。这一档：收紧内边距与字号，
   放不下的部分在导航条内横向滑动，隐藏滚动条。大菜单 .sm-mega 挂在 .sm-nav 上，不会被裁切。
   负 margin 跟着内边距同步改成 -11px（.sm-wrap 在这一档两侧内边距 ≥ 19px，挪 11px 不会被裁）。 */
@media (min-width: 761px) and (max-width: 1180px) {
  .sm-nav-in { overflow-x: auto; scrollbar-width: none; }
  .sm-nav-in::-webkit-scrollbar { display: none; }
  .sm-nav-i { padding: 0 11px; font-size: 13.5px; white-space: nowrap; }
  .sm-nav-l { margin-inline-start: -11px; }
  .sm-nav-i.is-cur::after { right: 11px; left: 11px; }
  .sm-nav-cta-li { flex: 0 0 auto; padding-inline-start: 6px; }
}