/*!
 * en.css —— 英文内容栏目（/en/...）专用样式
 * ---------------------------------------------------------------------------
 * 为什么要单独一份、而不是复用 mobile-v5.css / hall-nav.js 那一套：
 *   中文站的外壳（顶栏、底栏、语言切换）全靠 `i18n.js` + `hall-nav.js` +
 *   `mobile-nav.js` 运行时注入，注入出来的文案是中文；英文页跟着走会被塞进中文
 *   导航，而且机翻层还会再翻一遍。所以英文页**只借用打包产物里的设计令牌
 *   （颜色/字体/圆角，来自 index-CfXowBzj.css）**，外壳标记自己写、样式自己写。
 *   → 英文页**不引入任何 JS**，纯静态，也不需要 `?v=` 自愈那一套。
 *
 * 字重/字号走英文排版口径（比中文略小、行高略大），中英混排时观感才一致。
 */

/* ---------- 顶栏（自己写，不复用 .main-nav 的注入态） ----------
 * ⚠️ 2026-09-26 重写（用户反馈「/en 手机顶部栏目样式」坏掉）：
 *   原版是「单行 flex + 按断点把第 n 个起的导航项 display:none」，390px 真机视口实测：
 *   内容需要 459px、容器只有 350px，而 .en-header-in 是 flex-wrap:nowrap + overflow:visible
 *   → 「Hebei Neijuan Network」「Home」「Get Quotes」「Product Directory」四个元素互相叠压，
 *     最右一项还伸出屏幕 69px 被裁掉。380~430px 档基本全中。
 *   两个根因，都改掉了：
 *   ① **靠隐藏入口来省空间是错的** —— 窄屏下 /quotes、/demands 直接从手机端消失。
 *      改成 .en-nav 自身可横向滚动（条目 flex:none 不压缩，滚动条隐藏，
 *      与中文站 .main-nav 同款做法），任何宽度都不会叠压、也不会丢入口。
 *   ② position:fixed 要求正文留出与顶栏**等高**的 padding-top，可顶栏高度一旦随断点
 *      变成两行，写死的 64px 就失配（这是本次崩坏的放大器）。改 position:sticky：
 *      顶栏由文档流自己撑高，正文再也不用对数字，加/改一行都不会再崩。
 */
.en-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255, 253, 249, .95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.en-header-in {
  display: flex; align-items: center; gap: 18px; height: 64px;
  max-width: 1180px; margin: 0 auto; padding: 0 20px;
}
.en-logo { display: inline-flex; align-items: center; gap: 9px; flex: none; }
.en-logo-mark {
  width: 36px; height: 36px; border-radius: 10px; background: var(--c-primary);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.en-logo-mark svg { width: 29px; height: 29px; display: block; }
.en-logo-mark svg text {
  font-family: STKaiti, KaiTi, SimSun, serif; font-size: 46px; font-weight: 900;
}
.en-logo-txt { line-height: 1.12; min-width: 0; }
.en-logo-txt b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.en-logo-txt span { display: block; font-size: 10.5px; color: var(--c-ink-light); letter-spacing: .04em; }

/* 栏目条：可横向滚动，滚动条隐藏。
   `flex:1 1 auto` + `min-width:0` 是能滚的前提（没有 min-width:0，flex 项的
   min-content 宽度会顶住收缩，overflow 永远不触发 —— 这正是原来"看着像溢出"的成因）。
   条目 `flex:none`：不允许被压缩成半截单词，宁可滚。 */
.en-nav {
  display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
}
.en-nav::-webkit-scrollbar { display: none; }
.en-nav a {
  flex: none;
  padding: 7px 11px; font-size: 13.5px; font-weight: 600; color: var(--c-ink-soft);
  border-radius: 8px; white-space: nowrap; transition: .15s;
}
.en-nav a:hover { background: #f1e9de; color: var(--c-ink); }
.en-nav a.active { color: var(--c-primary); background: #fbeae6; }

/* 语言切换按钮的挂载位（i18n.js 会在这里把 .lang-btn 换成 .i18n-switch）
   ⚠️ 必须先有一个 .lang-btn —— ensureSwitch() 优先拿它的父节点当挂载点；
      没有它就会去猜 MOUNT_SEL（.header-right / header .wrap / .wrap），
      英文页这些全不存在 → 按钮根本不会出现。
   ⚠️ 空壳**必须自己藏掉**：打包 CSS（index-CfXowBzj.css）里有 .lang-btn 的可见样式，
      而 i18n.js 要等 defer 执行完才接管，中间这一瞬会闪出一颗点了没反应的白按钮。
      这里 display:none 只影响「能否看见」，querySelector 照样找得到它。 */
.en-header-lang { display: inline-flex; align-items: center; flex: none; }
.en-header-lang .lang-btn { display: none; }
.en-header-cta {
  flex: none; padding: 8px 16px; border-radius: 9px; background: var(--c-ink);
  color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; transition: .15s;
}
.en-header-cta:hover { background: #000; }
/* 账号入口按钮（2026-09-26）：原本只写在 en-func.css（只有 6 张功能页引入），
   普通页面顶栏的 Sign in 是裸链接、还会被 flex 压成两行（用户截图反馈「太丑」）。
   移到这里全站生效 + nowrap 保证单行。 */
.en-header-acc {
  flex: none; padding: 7px 13px; font-size: 13px; font-weight: 700;
  color: var(--c-ink); background: #fff; border: 1px solid #e5dbcf; border-radius: 9px;
  white-space: nowrap; line-height: 1.2; transition: .15s;
}
.en-header-acc:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* ---------- 回中文站入口（2026-09-26 用户要求：/en 上要有一颗"明显"的按钮） ----------
 * ⚠️ 必须与语言切换按钮（.i18n-switch）在**视觉上彻底分清**，否则用户会点错：
 *     · 语言按钮 = 白底灰字下拉，动作是「把本页机翻成某语种」，**地址栏仍是 /en**；
 *     · 本按钮   = 品牌红实心 + 国旗，动作是「真的跳回中文站首页 /」，**换页面**。
 *   → 做法：语言按钮保持中性浅色，本按钮用品牌红实心 + 白字 + 红色投影，
 *     它是顶栏里唯一一颗红按钮，扫一眼就能找到。
 * ⚠️ 不再保留无 JS 兜底的裸文字版（原 .en-header-zh 没被任何模板用过，已删）——
 *    这颗按钮本身就写成静态 <a>，本来就不依赖 JS，不需要兜底。 */
.en-zh-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 8px 13px 8px 11px; border-radius: 9px;
  background: var(--c-primary); color: #fff;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 5px 14px -8px rgba(201, 54, 40, .9);
  transition: .15s;
}
.en-zh-btn:hover { background: var(--c-primary-deep); color: #fff; transform: translateY(-1px); }
.en-zh-btn:active { transform: none; }
.en-zh-btn svg { width: 17px; height: 11.5px; border-radius: 2px; display: block; flex: none; }

/* 正文区的大号版本（栏目首页 hero、文章结尾的转化块、页脚）——
   小按钮在长报价单式的页面里容易被忽略，正文区用大一号的。 */
.en-zh-big {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 10px;
  background: var(--c-primary); color: #fff;
  font-size: 14.5px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 10px 24px -14px rgba(201, 54, 40, .95);
  transition: .15s;
}
.en-zh-big:hover { background: var(--c-primary-deep); color: #fff; transform: translateY(-1px); }
.en-zh-big svg { width: 21px; height: 14px; border-radius: 2.5px; display: block; flex: none; }
.en-zh-big small { font-size: 12px; font-weight: 600; opacity: .85; }
.en-zh-note { margin: 10px 0 0; font-size: 12.5px; color: var(--c-ink-light); }
/* 页脚里的文字链版本 */
.en-foot-zh {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--c-primary) !important;
}
.en-foot-zh svg { width: 16px; height: 10.7px; border-radius: 2px; display: block; flex: none; }

/* ---------- 侧边 / 角落漂浮的回中文站入口（每个页面都有） ----------
 * 用户要求：「每个页面加一个引导 或者顶部栏目 或者侧边漂浮按钮」。
 * 顶栏那颗会在窄屏被挤到第二行、长页面往下滚时也容易被忽略，所以再补一颗粒子：
 *   · ≥1280px：从**右侧屏幕边缘垂挂**一颗红色书签（竖排文字），正文宽 1180+40，
 *     视口 ≥1280 时右侧还有 ≥20px 净空，压不到正文；
 *   · <1280px：切**右下角胶囊**（移动端惯用的悬浮位），不遮正文中段。
 * ⚠️ 为什么不用 `right:-100%` 之类的滑入动画：那是营销页的写法，出现在采购文档旁
 *    会显得像广告；这里要的是「一直都在、一眼能看见」，静止即可。
 * ⚠️ z-index 900 < 顶栏 1000：滚起来时让顶栏压住它，不要浮在顶栏上。
 * ⚠️ 打印时隐藏 —— 采购文档经常被打印，红色漂浮按钮会落到纸上。 */
.en-zh-side { display: none; }
@media print { .en-zh-side { display: none !important; } }

@media (min-width: 1280px) {
  .en-zh-side {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 900;
    display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 12px; border-radius: 13px 0 0 13px;
    background: var(--c-primary); color: #fff;
    box-shadow: -8px 10px 26px -14px rgba(201, 54, 40, .95);
    transition: .18s;
  }
  .en-zh-side:hover { background: var(--c-primary-deep); color: #fff; padding-right: 16px; }
  .en-zh-side svg { width: 19px; height: 12.7px; border-radius: 2px; display: block; flex: none; }
  .en-zh-side span {
    writing-mode: vertical-rl; text-orientation: upright;
    letter-spacing: .16em; font-size: 13px; font-weight: 800; line-height: 1;
  }
}

@media (max-width: 1279px) {
  .en-zh-side {
    position: fixed; right: 14px; z-index: 900;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 14px; border-radius: 999px;
    background: var(--c-primary); color: #fff;
    font-size: 12.5px; font-weight: 800; white-space: nowrap;
    box-shadow: 0 12px 28px -12px rgba(201, 54, 40, 1), 0 0 0 3px rgba(255, 255, 255, .55);
    transition: .18s;
  }
  .en-zh-side:hover { background: var(--c-primary-deep); color: #fff; }
  .en-zh-side svg { width: 17px; height: 11.5px; border-radius: 2px; display: block; flex: none; }
  /* 右下角胶囊是 fixed 的，会一直悬在视口右下 —— 页面滚到最底部时正好压住页脚最后一行。
     给页脚补一段下净空（约一颗胶囊的高度），保证最后一行永远读得完。 */
  .en-foot { padding-bottom: 84px; }
}

/* 顶栏没固定高度了，锚点跳转要自己让开（否则标题会被顶栏压住）。
   ⚠️ 这条故意挂在 .en-body（= <body>）而不是 .en-prose —— 锚点可能在文章的 H2 上，
   也可能在 about/rfq 页手写的 H2 上，全局生效才不漏。 */
.en-body h2[id], .en-body h3[id] { scroll-margin-top: 88px; }

/* 窄屏：顶栏排成两行 —— 第一行「Logo + 语言 + 中文站 + 报价」，第二行整宽可滚的栏目条。
   两行而不是「藏起来」：所有入口都留着，只是要横向滑一下。
   ⚠️ 2026-09-26 把这一层从 **flex-wrap 换成 grid**，因为加了「中文站」按钮后手机端崩了：
      flex-wrap:wrap 的算法**优先换行、根本不收缩**（`flex-shrink` / `min-width:0` 在
      换行容器里全都不起作用）。390px 实测第一行需要
      `logo 202 + gap 10 + 语言 76 + gap 10 + 中文站 75 = 373px` > 可用 358px
      → 中文站按钮被换到第二行、靠左，看着像坏了，还把栏目条顶到第三行。
      grid 用 `minmax(0, 1fr)` 给 logo 一个**可压缩列**，品牌名超宽就省略号截断，
      三颗按钮永远在同一行；并且用显式的 grid-row/grid-column 定死位置，
      不靠自动排布（栏目条是 `grid-column:1/-1`，自动排布会把它挤到第一行中间）。 */
/* 汉堡菜单按钮（2026-09-26 用户要求：移动端改三横杠折叠菜单）
   桌面端隐藏；≤900px 显示在顶栏第一行，点击展开 .en-nav 成宫格面板。 */
.en-menu-btn { display: none; }
/* ≤560 专属的汉堡面板 Sign in（桌面隐藏；见 header() 注释） */
.en-nav-acc { display: none; }

/* ==========================================================================
 * ⭐ 桌面「装得下」两档（2026-09-26 用户截图反馈：栏目条里 QR Booth 被截成「QR Boa」）
 * ---------------------------------------------------------------------------
 * 实测（无头 Edge，`.workbuddy/tmp/en-nav-fit.mjs`，1440/1366/1280 三档窗口同值，
 * 因为容器 `max-width:1180` 已经封顶）：
 *   容器可用 1140  |  右侧控件占 586  |  间距 5×18=90  →  栏目条只分到 465
 *   而 9 条栏目项**需要 678** → 每档都只能显示 6 条，`QR Booth` 从第 7 条起被裁。
 *   `.en-nav` 是 `overflow-x:auto`，所以它不报错、不换行，就是**默默切掉半个单词**
 *   —— 这正是那颗 `.en-nav` 当初为了「窄屏不丢入口」而做的滚动条，在**够宽**的
 *   屏幕上反而变成了 bug：用户不会想到还能横向滑。
 * 只靠收紧是补不上 213px 的，所以分两步（两档都是纯 CSS，不动 JS）：
 *   ① ≥901：**去掉重复入口 + 整体收紧**，单行需求 1354 → 约 1085（省 ~270px）；
 *   ② 901~1180：一行确实放不下，把**栏目条整宽落到第二行**（顶栏是 sticky、
 *      高度由文档流自己撑，不需要任何补偿值），1085 > 1140 的那一段也就能全显示了。
 * 为什么不干脆全站两行：≥1181 的桌面单行是够的（1140 > 1085），
 *   顶栏矮 = 首屏多一条内容，没必要为了整齐牺牲它。
 * 为什么是 1180 而不是更紧的 1125：留 55px 余量给系统字体差异
 *   （Windows 的 Segoe UI / 200% 缩放下的字宽都会上下浮动 3~5%）。
 * ========================================================================== */
@media (min-width: 901px) {
  /* ① 栏目条里的 `Get Quotes` 与右侧黑色按钮是**同一个 /en/rfq**（重复入口，-96px）。
     桌面留按钮（实心、更醒目），栏目条去掉文字版。
     ⚠️ 只在 ≥901 隐藏：≤900 时右侧按钮让位给汉堡，这条必须留在宫格面板里。 */
  .en-nav > a[href="/en/rfq"] { display: none; }
  /* ② 收紧：间距 18→9、栏目项 padding 11→7、字号 13.5→13、logo 收 4px */
  .en-header-in { gap: 9px; }
  .en-nav { gap: 1px; }
  .en-nav a { padding: 7px 7px; font-size: 13px; }
  /* logo 是这一行里最占位的**非导航**元素（实测 243px，其中副标题
     `Sourcing guides & supplier directory` 因字距 .04em 反而比品牌名还宽）。
     收紧字距与字号能拿回 ~24px，视觉上几乎看不出差别。 */
  .en-logo-mark { width: 32px; height: 32px; }
  .en-logo-mark svg { width: 26px; height: 26px; }
  .en-logo-txt b { font-size: 14.5px; }
  .en-logo-txt span { font-size: 10px; letter-spacing: .01em; }
  .en-header-acc { padding: 7px 10px; }
  .en-header-cta { padding: 8px 12px; }
  .en-zh-btn { padding: 8px 11px 8px 9px; font-size: 12.5px; }
  /* 语言按钮（.i18n-switch 来自 i18n.css，桌面档 75px）也只收一点点边距，不动高度 */
  .en-header-lang .i18n-switch { padding: 0 6px; gap: 3px; }
}

/* 901~1180：栏目条整宽换到第二行 —— 第一行只剩 logo + 语言 + 中文站 + Sign in + Get Quotes，
   栏目条拿到整条容器宽（≥861px，需求约 492px），再把 9 条一次摆开也不会被裁。 */
@media (min-width: 901px) and (max-width: 1180px) {
  .en-header-in {
    display: grid; height: auto;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    align-items: center; gap: 7px 11px;
    padding: 9px 20px 8px;
  }
  .en-logo { grid-row: 1; grid-column: 1; min-width: 0; }
  .en-header-lang { grid-row: 1; grid-column: 2; }
  .en-zh-btn { grid-row: 1; grid-column: 3; }
  .en-header-acc { grid-row: 1; grid-column: 4; }
  .en-header-cta { grid-row: 1; grid-column: 5; }
  /* 第二行整宽；靠左对齐，与第一行 logo 左边缘同一条竖线。
     ⚠️ 不要用 justify-content:center —— 内容一旦超宽（极端字体/缩放），
        居中会让**左侧**条目滑出可滚动区、滚不回去。靠左永远能从第一条读起。 */
  .en-nav { grid-row: 2; grid-column: 1 / -1; padding-bottom: 1px; }
  .en-logo-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* 顶栏在这一档变成两行（103px 高），文章里 h2/h3 的目录锚点得跟着让开，
     否则跳转后标题被顶栏咬掉一截（88px 是按单行的 65px 定的）。 */
  .en-body h2[id], .en-body h3[id] { scroll-margin-top: 126px; }
}

/* ⭐ 一个必须一起修的「兄弟 bug」：这些页也引 i18n.js，访客把页面机翻成德语/法语时，
   栏目文案会一起被翻（Directory→Verzeichnis、News→Nachrichten…），实测需求宽
   492px → 约 580px（+18%），单行那 65px 余量不够 → **又会被切掉半截单词**。
   i18n.js 在「翻译成非本页语言」时会把 `html[lang]` 从 en 改成目标语种
   （setLangAttrs()，默认英文态**一个字都不改**）—— 正好可以当纯 CSS 的开关用：
     触发 → 栏目条自己占满一整行（flex-wrap + `flex:1 0 100%`，第一行只剩
     logo + 四颗控件 ≈ 628px，901 断点最窄也有 861px，换行绝不会误伤第一行）。
   ⚠️ 只在 ≥901 生效；≤900 本来就是汉堡面板，不参与。
   ⚠️ 不要改成 `.hb-i18n-foreign`：那个类在 /en 的**默认英文态也是 true**
      （foreign = 「不是中文」，见 i18n.js setLangAttrs），拿它当条件等于常开。 */
@media (min-width: 901px) {
  html:not([lang='en']) .en-header-in { flex-wrap: wrap; height: auto; padding: 9px 20px 8px; row-gap: 5px; }
  html:not([lang='en']) .en-nav { flex: 1 0 100%; order: 9; }
  /* 同上：机翻态顶栏也是两行（≈100px），锚点一起让开 */
  html:not([lang='en']) .en-body h2[id],
  html:not([lang='en']) .en-body h3[id] { scroll-margin-top: 124px; }
}

@media (max-width: 900px) {
  .en-header-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    align-items: center; gap: 8px 10px; height: auto;
    padding: 9px 16px 10px;
  }
  .en-logo { grid-row: 1; grid-column: 1; min-width: 0; }
  .en-header-lang { grid-row: 1; grid-column: 2; }
  .en-zh-btn { grid-row: 1; grid-column: 3; }
  .en-header-acc { grid-row: 1; grid-column: 4; }
  /* ≤900：Get Quotes 与汉堡重复，让位给汉堡按钮（导航宫格里已有 Get Quotes） */
  .en-header-cta { display: none; }
  .en-menu-btn {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    grid-row: 1; grid-column: 5;
    width: 38px; height: 34px; padding: 0 9px;
    border: 1px solid #e5dbcf; border-radius: 9px; background: #fff; cursor: pointer;
  }
  .en-menu-btn span { display: block; height: 2px; border-radius: 2px; background: var(--c-ink); transition: .2s; }
  .en-menu-btn.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .en-menu-btn.open span:nth-child(2) { opacity: 0; }
  .en-menu-btn.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  /* 导航默认收起（不再换行平铺占三行——用户反馈挡内容），点汉堡展开成宫格面板 */
  .en-nav { display: none; grid-row: 2; grid-column: 1 / -1; margin: 0; padding: 10px 0 4px; }
  .en-nav.open {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    border-top: 1px solid #f0e7db;
  }
  .en-logo-txt { min-width: 0; }
  .en-logo-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .en-nav a { padding: 8px 10px; font-size: 13px; text-align: center;
    border: 1px solid #eee5d8; border-radius: 9px; background: #fffdfa; }
  .en-nav a.active { border-color: var(--c-primary); background: #fbeae6; }
  /* 汉堡面板里的 Sign in（仅 ≤560 显示，桌面与 561-900 都用顶栏那颗） */
  @media (max-width: 560px) { .en-nav.open .en-nav-acc { display: block; } }
  .en-header-acc { padding: 6px 10px; font-size: 12px; }
  .en-header-cta { padding: 7px 12px; font-size: 12px; }
  /* 回中文站按钮在任何宽度都**不隐藏**（它是本页唯一的跨站出口），只收窄内边距 */
  .en-zh-btn { padding: 7px 11px 7px 9px; font-size: 12.5px; gap: 5px; }
  .en-zh-btn svg { width: 16px; height: 10.7px; }
}
@media (max-width: 560px) {
  /* 两行顶栏（2026-09-26 用户反馈「没显示全字母」）：
     单行时 5 控件总需求 ~445px > 375px 视口，logo 只分到 104px（需要 174px），
     品牌名被省略号截断。改为第一行 logo 独占整行、第二行靠右放三个控件，
     360px 小屏也放得下，不再吃省略号。 */
  .en-logo { grid-row: 1; grid-column: 1 / -1; min-width: 0; }
  .en-header-lang { grid-row: 2; grid-column: 2; }
  .en-zh-btn { grid-row: 2; grid-column: 3; }
  .en-menu-btn { grid-row: 2; grid-column: 4; }
  /* ≤900 块把 .en-nav 定在 grid-row:2，这里 logo 占了第一行，导航面板顺延到第三行 */
  .en-nav { grid-row: 3; }
  .en-logo-txt span { display: none; }
  .en-logo-txt b { font-size: 13px; }
  /* ≤560：顶栏只留 Logo / 语言 / 中文站 / 汉堡 四个控件（Get Quotes 已在 ≤900 让位），
     Sign in 也收进汉堡面板 —— 375px 下 5 个控件放不下（实测 452px 会溢出） */
  .en-header-acc { display: none; }
  .en-header-in { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; padding: 9px 14px 10px; }
  .en-menu-btn { grid-column: 4; width: 34px; padding: 0 8px; }
  /* ⚠️ i18n.css 的窄屏收敛值挂在 `.header-right`（中文站顶栏），英文站挂载点是
     `.en-header-lang`，那些规则一条都不命中 —— 所以要自己收一档，别指望继承。 */
  .en-header-lang .i18n-switch { padding: 0 5px; gap: 3px; height: 26px; }
  .en-zh-btn { padding: 5px 9px 5px 7px; font-size: 11.5px; gap: 4px; }
  .en-zh-btn svg { width: 15px; height: 10px; }
  /* ≤560 顶栏是两行（实测 98px），而 88px 的锚点让位值是按 561~900 的 57px 定的
     —— 跳目录时标题会被顶栏咬掉 10px。这一档单独抬到 120px。 */
  .en-body h2[id], .en-body h3[id] { scroll-margin-top: 120px; }
}
/* 再窄（320~360）就把品牌名收掉，只留「冀」字标 —— 与中文站 i18n.css 的
   `@media (max-width:360px){ .logo-txt{display:none} }` 同一口径，避免出现
   `Hebei Ne…` 这种只剩三个字母的省略。品牌全名在页脚与 H1 里仍有。 */
@media (max-width: 360px) {
  .en-logo-txt { display: none; }
}

/* ---------- 通用容器 ---------- */
.en-wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.en-narrow { max-width: 800px; margin: 0 auto; }
/* ⚠️ 不要给正文加 padding-top 来「让开顶栏」—— 顶栏已改 sticky，本身就在文档流里。
   更要紧的是必须**显式归零**：英文页复用了打包产物 index-CfXowBzj.css，
   那份 CSS 里有 `body{padding-top:64px}`（是配中文站那套 fixed 顶栏用的）。
   不写 padding-top:0 的话，sticky 顶栏的上方会凭空多出一条 58~64px 的空白带
   —— 手机端最明显，看起来就像顶栏"飘"在页面中间。
   specificity：body.en-body(0,1,1) > body(0,0,1)，能盖住。 */
body.en-body {
  background: var(--c-bg); padding-top: 0;
  font-size: 15.5px; line-height: 1.82; color: var(--c-ink);
}

/* ---------- 面包屑 ---------- */
.en-crumb { padding: 18px 0 0; font-size: 12.5px; color: var(--c-ink-light); }
.en-crumb a { color: var(--c-ink-soft); }
.en-crumb a:hover { color: var(--c-primary); }
.en-crumb span { color: var(--c-ink-light); }

/* ---------- 文章 ---------- */
.en-article { padding: 18px 0 46px; }
.en-article h1 {
  font-size: 33px; font-weight: 900; line-height: 1.22; letter-spacing: -.025em;
  margin: 0 0 14px;
}
.en-article-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--c-line);
}
.en-chip {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: #f6f0e8; color: var(--c-ink-soft); font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
.en-chip.series { background: #fbeae6; color: var(--c-primary); }
.en-lead {
  font-size: 16px; line-height: 1.75; color: var(--c-ink-soft);
  padding: 16px 18px; margin: 0 0 26px; background: #fffdf9;
  border: 1px solid var(--c-line); border-left: 3px solid var(--c-primary);
  border-radius: 0 12px 12px 0;
}
/* ---------- 正文排版（容器类 = .en-prose，**不要**用 .en-body） ----------
 * ⚠️ 2026-09-26 修：正文容器以前叫 .en-body，而 <body> 也叫 en-body，
 *    两者同名 → 「正文段落下边距 / 链接下划线 / H2 上边框」这些规则把
 *    顶栏、页脚、卡片、hero 全部一起命中了（顶栏导航链接全被加下划线，
 *    就是这次手机端截图里最扎眼的那处）。改名 .en-prose 之后互不干扰。 */
.en-prose { font-size: 15.5px; line-height: 1.82; color: var(--c-ink); }
.en-prose h2 {
  font-size: 21px; font-weight: 800; letter-spacing: -.015em;
  margin: 38px 0 12px; padding-top: 20px; border-top: 1px dashed var(--c-line);
}
.en-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.en-prose h3 { font-size: 17px; font-weight: 800; margin: 26px 0 9px; }
.en-prose p { margin: 0 0 15px; }
.en-prose ul, .en-prose ol { margin: 0 0 16px; padding-left: 22px; }
.en-prose li { margin: 0 0 8px; }
.en-prose strong { font-weight: 700; }
.en-prose em { font-style: italic; }
.en-prose a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
.en-prose hr { border: 0; border-top: 1px solid var(--c-line); margin: 30px 0; }

/* ---------- 转化块 ---------- */
.en-cta {
  margin: 36px 0 0; padding: 22px 24px; border-radius: 14px;
  background: linear-gradient(160deg, #fffaf2, #fdf1e5);
  border: 1px solid var(--c-line);
}
.en-cta h3 { font-size: 17px; font-weight: 800; margin: 0 0 8px; }
.en-cta p { font-size: 14px; line-height: 1.7; color: var(--c-ink-soft); margin: 0 0 16px; }
.en-cta-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.en-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 11px 20px;
  border-radius: 10px; font-size: 14px; font-weight: 700; transition: .15s;
}
.en-btn.primary { background: var(--c-primary); color: #fff; }
.en-btn.primary:hover { background: var(--c-primary-deep); }
.en-btn.ghost { background: #fff; color: var(--c-ink); border: 1px solid var(--c-line-2); }
.en-btn.ghost:hover { border-color: var(--c-ink); }
.en-note { margin: 14px 0 0; font-size: 12.5px; color: var(--c-ink-light); }

/* 转化块里的「中文站」小分区：一条浅色分隔线把它和上面那组按钮分开 ——
   上面是"留在英文站"的动作（询价 / 换专题），下面是"跨站去中文版"的动作，
   两种动作性质不同，视觉上必须分组，否则用户会以为都是同一类入口。
   用品牌红的极淡底色（#fbeae6 系）呼应按钮，不引入新颜色。 */
.en-cta-zh {
  margin: 20px 0 0; padding: 18px 20px; border-radius: 12px;
  background: #fdf4f1; border: 1px dashed #f0d3cc;
}
.en-cta-zh p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.72; color: var(--c-ink-soft); }
.en-cta-zh strong { color: var(--c-primary); }
@media (max-width: 560px) {
  .en-cta-zh { padding: 15px 15px; }
  .en-zh-big { width: 100%; justify-content: center; }
}

/* ---------- 相关文章 ---------- */
.en-related { margin: 40px 0 0; padding-top: 24px; border-top: 1px solid var(--c-line); }
.en-related h3 { font-size: 17px; font-weight: 800; margin: 0 0 14px; }
.en-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.en-related-grid a {
  display: block; padding: 13px 15px; background: #fff; border: 1px solid var(--c-line);
  border-radius: 11px; transition: .15s;
}
.en-related-grid a:hover { border-color: var(--c-primary); box-shadow: 0 6px 18px -10px rgba(38,33,29,.3); }
.en-related-grid b { display: block; font-size: 14px; font-weight: 700; line-height: 1.45; }
.en-related-grid small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--c-ink-light); }
@media (max-width: 700px) { .en-related-grid { grid-template-columns: 1fr; } }

/* ---------- 栏目首页 ---------- */
.en-hero {
  padding: 48px 0 40px; border-bottom: 1px solid var(--c-line);
  background: linear-gradient(160deg, #fffaf2, #f8f1e6 55%, #fdf1e5);
}
.en-hero h1 { font-size: 36px; font-weight: 900; letter-spacing: -.03em; line-height: 1.2; margin: 0 0 12px; }
.en-hero p { font-size: 15.5px; line-height: 1.75; color: var(--c-ink-soft); max-width: 760px; margin: 0; }
.en-hero-stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 24px; }
.en-hero-stats div b { display: block; font-size: 22px; font-weight: 900; color: var(--c-primary); }
.en-hero-stats div span { font-size: 12px; color: var(--c-ink-light); }
@media (max-width: 640px) {
  .en-hero h1 { font-size: 27px; }
  .en-hero { padding: 30px 0 26px; }
  /* 390px 下三组统计用 flex 会各自折行（"words of sourcing detail" 一撑就换行），
     看起来像三行大标题。改成定宽三列，数字缩小一档，一行放得下。 */
  .en-hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .en-hero-stats div b { font-size: 19px; }
  .en-hero-stats div span { font-size: 11px; line-height: 1.35; display: block; }
}

.en-section-title {
  display: flex; align-items: baseline; gap: 10px; margin: 34px 0 14px;
}
.en-section-title h2 { font-size: 20px; font-weight: 900; letter-spacing: -.02em; margin: 0; }
.en-section-title span { font-size: 12.5px; color: var(--c-ink-light); }

.en-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.en-cards a {
  display: flex; flex-direction: column; padding: 17px 18px; background: #fff;
  border: 1px solid var(--c-line); border-radius: 13px; transition: .15s; min-width: 0;
}
.en-cards a:hover { border-color: var(--c-primary); box-shadow: 0 10px 24px -14px rgba(38,33,29,.35); transform: translateY(-2px); }
.en-cards b { font-size: 15px; font-weight: 800; line-height: 1.4; }
.en-cards p { margin: 8px 0 0; font-size: 13px; line-height: 1.65; color: var(--c-ink-soft); }
.en-cards small { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--c-line); font-size: 11.5px; color: var(--c-ink-light); }
@media (max-width: 900px) { .en-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .en-cards { grid-template-columns: 1fr; } }

/* ---------- 页脚二维码区（2026-09-26 用户要求：底部按中文版加上二维码） ----------
 * 中文站首页侧栏那组「扫码直达」是浏览器端用 qr.js 现场画的；
 * 英文站是纯静态页，二维码在**构建期**生成成内联 SVG（见 build-en-site.mjs 的 qrSvg）。
 * 因此这里只需要排版：三张码横排，窄屏两列、再窄一列。 */
.en-qr {
  margin: 20px 0 0; padding: 18px 20px; border-radius: 13px;
  background: #fdf9f3; border: 1px solid var(--c-line);
}
.en-qr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.en-qr-head b { font-size: 13.5px; font-weight: 800; letter-spacing: .01em; }
.en-qr-head span { font-size: 12px; color: var(--c-ink-light); }
.en-qr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.en-qr-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 11px;
  transition: .15s; min-width: 0;
}
.en-qr-item:hover { border-color: var(--c-primary); box-shadow: 0 8px 20px -14px rgba(38, 33, 29, .4); }
/* 二维码固定尺寸、不许被 flex 压缩 —— 一旦被压小，静区不足就扫不出来 */
.en-qr-box { flex: none; display: block; line-height: 0; border-radius: 7px; overflow: hidden; }
.en-qr-svg { display: block; width: 92px; height: 92px; }
.en-qr-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.en-qr-txt b { font-size: 13px; font-weight: 800; line-height: 1.3; }
.en-qr-txt small { font-size: 12px; color: var(--c-primary); font-weight: 700; }
.en-qr-txt em { font-size: 11px; font-style: normal; color: var(--c-ink-light); line-height: 1.45; }
@media (max-width: 900px) {
  .en-qr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .en-qr { padding: 15px 15px; }
  .en-qr-grid { grid-template-columns: 1fr; }
}

/* ---------- 转化块「两种买法」 ---------- */
.en-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 6px; }
.en-way {
  padding: 20px 22px; border-radius: 13px; background: #fff;
  border: 1px solid var(--c-line); border-left: 3px solid var(--c-primary);
}
.en-way b { display: block; font-size: 16.5px; font-weight: 900; margin-bottom: 8px; }
.en-way p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.72; color: var(--c-ink-soft); }
.en-way small { display: block; margin-top: 10px; font-size: 11.5px; color: var(--c-ink-light); }
@media (max-width: 760px) { .en-ways { grid-template-columns: 1fr; } }

/* ---------- 页脚 ---------- */
.en-foot { margin-top: 40px; padding: 26px 0 40px; border-top: 1px solid var(--c-line); background: #fffdf9; }
.en-foot-in {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  font-size: 12.5px; color: var(--c-ink-light);
}
.en-foot a { color: var(--c-ink-soft); }
.en-foot a:hover { color: var(--c-primary); }
.en-foot .sep { color: var(--c-line-2); }
.en-foot-note { margin: 12px 0 0; font-size: 12px; color: var(--c-ink-light); line-height: 1.7; }

/* ==========================================================================
 * 列表页 / 专题页 / 页脚（2026-09-26 新增：英文站从 20 篇扩到 324 篇后才有）
 * ========================================================================== */

/* 列表页的矮 hero：内页不需要首页那种大标题区，占屏太多会让首屏一条内容都看不到 */
.en-hero--slim { padding: 30px 0 24px; }
.en-hero--slim h1 { font-size: 29px; margin-bottom: 8px; }
.en-hero--slim p { font-size: 14.5px; max-width: 720px; }
.en-hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.en-list-wrap { padding-bottom: 48px; }

/* 专题条：横向滚动的胶囊行。每一页都挂一遍全部专题 —— 324 篇文章的横向发现
   全靠它，光靠"上一页/下一页"只能串成一条线。 */
.en-chips {
  display: flex; gap: 8px; margin: 16px 0 20px;
  /* 2026-09-26 用户反馈「显示全或者可以滑动」：13 个专题在窄屏下被 nowrap 截断、
     滚动条又隐藏，看不出还能滑。改为换行平铺 —— 全部专题直接可见。 */
  flex-wrap: wrap; overflow-x: visible; overflow-y: visible;
  padding-bottom: 2px;
}
.en-chips a {
  flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--c-line);
  background: #fff; font-size: 12.5px; font-weight: 600; color: var(--c-ink-soft); white-space: nowrap;
  transition: .15s;
}
.en-chips a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.en-chips a.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* 列表页的卡片：两列。三列在 1180px 下每张只有 370px，塞不下 170 字的摘要 */
.en-cards--list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.en-cards--list .en-card p { min-height: 0; }

.en-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.en-topic-grid a {
  display: flex; flex-direction: column; padding: 18px; background: #fff;
  border: 1px solid var(--c-line); border-radius: 13px; transition: .15s; min-width: 0;
}
.en-topic-grid a:hover { border-color: var(--c-primary); box-shadow: 0 10px 24px -14px rgba(38,33,29,.35); transform: translateY(-2px); }
.en-topic-grid b { font-size: 15.5px; font-weight: 800; line-height: 1.35; }
.en-topic-grid p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--c-ink-soft); }
.en-topic-grid small { margin-top: auto; padding-top: 12px; font-size: 11.5px; color: var(--c-ink-light); }

/* 分页 */
.en-pager {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
  margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--c-line);
}
.en-pager a {
  padding: 8px 15px; border-radius: 9px; border: 1px solid var(--c-line);
  background: #fff; font-size: 13px; font-weight: 600; color: var(--c-ink-soft);
}
.en-pager a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.en-page-cur { font-size: 12.5px; color: var(--c-ink-light); }

/* 页脚：四栏。英文站的页脚要承担导航职责 —— 中文站那套底栏/顶栏在这里不可用，
   324 篇文章如果只靠正文里的内链，爬虫和人都很难横向走通。 */
.en-foot-cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 26px;
  padding-bottom: 22px; border-bottom: 1px solid var(--c-line);
}
.en-foot-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.en-foot-col b { font-size: 12.5px; font-weight: 800; color: var(--c-ink); letter-spacing: .02em; margin-bottom: 3px; }
.en-foot-col a { font-size: 12.5px; color: var(--c-ink-soft); line-height: 1.45; }
.en-foot-col a:hover { color: var(--c-primary); }
.en-foot-brand p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--c-ink-light); }
.en-foot-in { margin-top: 16px; }
.en-foot-in span { font-size: 12px; color: var(--c-ink-light); }

@media (max-width: 900px) {
  .en-cards--list { grid-template-columns: 1fr; }
  .en-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .en-foot-cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  .en-foot-brand { grid-column: 1 / -1; }
  .en-hero--slim h1 { font-size: 25px; }
}
@media (max-width: 560px) {
  .en-topic-grid { grid-template-columns: 1fr; }
  .en-foot-cols { grid-template-columns: 1fr; }
  .en-article h1 { font-size: 26px; }
  .en-hero--slim { padding: 22px 0 18px; }
  .en-hero--slim h1 { font-size: 23px; }
}

/* ---------- 2026-09-26 功能层补充（en-func.css 之外的少量口径） ---------- */
/* 账户页收到的报价卡片 */
.en-offer { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 10px; padding: 9px 0; border-top: 1px dashed #eadfd2; font-size: 13px; }
.en-offer:first-of-type { border-top: 0; }
.en-offer b { font-weight: 800; }
.en-offer small { color: var(--c-ink-light); }
.en-offer p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--c-ink-soft); }