/* ==========================================================================
   通用 UI 组件（与具体页面无关，可在任何模板复用）

   命名规范：BEM —— block__element--modifier，全小写连字符。
   本轮新增类一律使用 --ink / --primary / --ink-3 系列变量，禁止再引入别名。
   ========================================================================== */

/* ==========================================================================
   按钮
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--tap-min);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: .9375rem; font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .1s;
  text-align: center;
}
.btn:active { transform: scale(.985); }

.btn--primary { background: var(--primary); color: var(--on-accent); }
.btn--primary:hover { background: var(--primary-hover); color: var(--on-accent); }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--outline:hover { border-color: var(--primary); color: var(--primary); }

.btn--ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn--ghost:hover { background: var(--bg-soft); color: var(--ink); }

.btn--danger { background: var(--err-strong); color: var(--on-accent); }
.btn--danger:hover { background: var(--err-strong-hover); color: var(--on-accent); }

.btn--sm { min-height: 38px; padding-inline: 14px; font-size: .875rem; }
.btn--lg { min-height: 52px; padding-inline: 28px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn[disabled], .btn.is-disabled {
  opacity: .55; cursor: not-allowed; pointer-events: none;
}

/* ==========================================================================
   第 93 轮：点击后的「正在处理」态（业主原话「进入灰度模式，避免反复点击」）
   ★ 与禁用态刻意区分：禁用＝"你不能点"（.55、not-allowed），
     灰度＝"已经点上了，正在走"（去色 + 略暗 + progress）。
   ★ 只用 filter / opacity：**不改文案、不改尺寸** —— 第 89 轮的教训是
     按钮一变宽，整行就抖；这里必须保证 boundingBox 一动不动。
   ★ pointer-events: none 是真正防连点的关键（<a> 没有 disabled 属性）。
   ========================================================================== */
.btn.is-busy,
.btn[aria-busy="true"],
.mobile-bar__btn.is-busy {
  filter: grayscale(1);
  opacity: .72;
  cursor: progress;
  pointer-events: none;
}

/* ==========================================================================
   表单（询盘表单 / 结算表单 / 购物车备注共用）
   ========================================================================== */
.form { display: grid; gap: 14px; }
.form__row { display: grid; gap: 14px; }

.form__label {
  display: block; font-size: .8125rem; font-weight: 500;
  margin-block-end: 6px; color: var(--ink-2);
}
.form__req { color: var(--primary); }

.form__input, .form__textarea, .form__select {
  width: 100%; min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 16px;                 /* ≥16px 防 iOS 自动放大 */
  font-family: inherit; color: var(--ink);
  background: var(--bg);
  transition: border-color .15s, box-shadow .15s;
}
.form__input:focus, .form__textarea:focus, .form__select:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.form__textarea { min-height: 110px; resize: vertical; }

/* ★ 第 80 轮：只读展示块（外观像输入框，但**能换行显示全**）。
   起因：询盘弹窗「感兴趣的产品」要显示「型号 · 标题」，长标题在单行 readonly
   input 里会被截成 "A535 10000mAh Rotating Power Bank with Rotatable Magnetic Ch…"，
   而这一栏的意义就是"看清楚是哪款货"。
   用 div 而不是 disabled input：① 能自动折行；② 不像可编辑控件，不会被误点。 */
.form__readonly {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 16px; line-height: 1.5;
  color: var(--ink); background: var(--bg-soft);
  overflow-wrap: anywhere;
}

/* 阿语输入自动切 RTL；但带 .ltr-value 的技术值（邮箱/电话）保持 LTR */
html[dir="rtl"] .form__input,
html[dir="rtl"] .form__textarea { direction: rtl; }
html[dir="rtl"] .form__input.ltr-value,
html[dir="rtl"] .form__textarea.ltr-value { direction: ltr; }

.form__hint { font-size: .75rem; color: var(--ink-3); }
.form__error { font-size: .75rem; color: var(--err); margin-block-start: 4px; }

.form__msg { padding: 12px 16px; border-radius: var(--radius-sm); font-size: .875rem; }
.form__msg--ok  { background: var(--ok-bg); color: var(--ok); }
.form__msg--err { background: var(--err-bg); color: var(--err); }
/* 提交进行中的中性提示（询盘提交，2026-10-17） */
.form__msg--pending { background: var(--primary-soft); color: var(--primary); }
.form__msg[hidden] { display: none; }

/* ---------- 深底场景（询盘区是一整块深色，表单要反色） ---------- */
.on-dark { color: var(--on-accent); }
.on-dark .form__label { color: rgba(255, 255, 255, .9); }
.on-dark .form__hint  { color: rgba(255, 255, 255, .72); }
.on-dark .section__title { color: var(--on-accent); }
.on-dark .section__sub   { color: rgba(255,255,255,.8); }

/* ==========================================================================
   卡片 / 面板
   ========================================================================== */
.card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
  transition: border-color .15s, box-shadow .15s;
}
.card:hover { border-color: var(--primary-border); box-shadow: var(--shadow-md); }
.card__icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--primary-soft); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 700; margin-block-end: 12px;
}
.card__title { font-size: 1rem; margin-block-end: 6px; }
.card__text { color: var(--ink-3); font-size: .875rem; margin: 0; }
.card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.card--media .card__body { padding: 16px; }

.panel {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.panel__title { font-size: 1.0625rem; margin-block-end: 10px; }

/* ==========================================================================
   网格
   ========================================================================== */
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
/* 卡片数量不固定时用这个（如联系页 3~4 张信息卡）：
   auto-fit 会按可用宽度自行决定列数，永远不会出现「3+1」的孤儿行，
   加减卡片也不用回来改 CSS（第 25 轮新增）。 */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ==========================================================================
   区块（section）
   ========================================================================== */
.section { padding-block: 40px; }
.section--tight { padding-block: clamp(28px, 5vw, 52px) clamp(36px, 6vw, 64px); }
.section--soft { background: var(--bg-soft); }
.section__head { text-align: center; margin-block-end: 24px; }
.section__title { font-size: 1.5rem; margin-block-end: 8px; }
.section__sub { color: var(--ink-3); font-size: .9375rem; margin: 0; }

/* ==========================================================================
   标签 / 徽标
   ========================================================================== */
.tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--secondary-soft); color: var(--secondary);
  font-size: .6875rem; font-weight: 600;
}

/* chip：可点击的胶囊（分类筛选），与 .tag 的区别是它有交互态 */
.chip {
  display: inline-flex; align-items: center;
  min-height: 40px; padding-inline: 16px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--bg); color: var(--ink-2);
  font-size: 14px; font-weight: 600; line-height: 1;
  text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--primary); color: var(--primary); }
.chip--active { background: var(--primary); border-color: var(--primary); color: var(--on-accent); }

/* ==========================================================================
   图标（front/_icons.html 的内联 SVG）
   —— 1.25em = 跟着所在文字的字号缩放，不写死 px。
      颜色走 SVG 自己的 `stroke="currentColor"` → 后台改站点主色，图标跟着变。
   ⚠️ 第 35 轮从 35-page-contact.css 上移到这里：页头也用同一套图标，
      属于全站共用组件，不该锁在"联系页"文件里。
   ========================================================================== */
.ico {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: 0 0 auto;
}

/* ==========================================================================
   页头 / 页脚 / 移动端底部条
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-block-end: 1px solid var(--line);
}
/* 页头是**单行**布局：三块（品牌 / 导航 / 操作区）横向排开，永不允许换行。
   ⚠️ 第 35 轮血泪：以前这里没写 `nowrap`，加上各文字标签也没有 `nowrap`，
      一旦总宽超过容器（客户购物车 1000 件、阿语文案更长），
      浏览器就逐项**折行**，页头从 60px 长到 89px，看起来就是"顶栏变两行"。
      显式 nowrap + 下面各处的 `white-space: nowrap` 一起堵死这条路。 */
.site-header__inner {
  display: flex; align-items: center; gap: 12px;
  /* ★★ 这里必须用 `--header-min-h`（固定 60px），**不能**用 `--header-h`。
     --header-h 是 front.js 量出真实页头高度后写回 documentElement 的**运行时值**。
     若拿它当本元素（页头容器自身）的 min-height，就形成自反馈环：
       量高度 → 写 --header-h → 本元素 min-height 变大 → 元素变高 → 再量到更大值 …
     2026-10-13 事故实证：Safari/WebKit 的 DOMContentLoaded **不等样式表加载完**
     （Chromium 会等），那一刻页头还是「无样式 block」，图标按钮纵向堆叠高 1015px；
     JS 把 1015 写回变量 → 样式生效后 min-height 把它**永久钉在 1015px**
     （此后每次测量读数不变，去抖逻辑判定「值没变」反而不写，永不自我修复）
     → hero 与全部内容被推到屏幕外 = 「iPhone 15 Pro Max 打开完全没有内容」。
     断开这个环：页头容器的高度只由**内容**和固定设计值决定，永不受运行时变量影响。 */
  min-height: var(--header-min-h);
  flex-wrap: nowrap;
}
/* 操作区（一组图标按钮）永远保持自身宽度，不参与收缩。 */
.site-header__inner > .header-actions { flex: 0 0 auto; }
/* ★★ 品牌是**唯一**能收缩的一块（移动端）。
   页头内容比视口宽时，必须有人吸收这个差额 —— 否则 Flex 只会把
   overflow 交给浏览器，页面就长出横向滚动条（业主实测：手机能左右拖）。
   让品牌（logo 等比缩小）来当这个"缓冲垫"，比让页头溢出体面得多。
   宽屏（≥900px）再把品牌锁死，那时该让位的是中间的导航（见文件末尾媒体查询）。 */
.site-header__inner > .brand { flex: 0 1 auto; min-width: 0; }

.brand { display: flex; align-items: center; min-width: 0; }
.brand__logo {
  height: 34px; width: auto; max-width: 100%;
  /* 宽度被容器压缩时用 contain 保比例（不拉伸变形）；
     object-position 让它**靠外侧**停靠，否则会缩到框中间去。 */
  object-fit: contain; object-position: left center;
}
[dir="rtl"] .brand__logo { object-position: right center; }
.brand__text {
  font-size: 1.125rem; font-weight: 700; color: var(--secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 移动端抽屉：checkbox 驱动，无 JS 也能开 */
.nav-toggle-label {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; margin-inline-start: auto;
  cursor: pointer; flex: 0 0 auto;
}
.nav-toggle-label span {
  display: block; height: 2px; width: 22px;
  background: var(--ink); border-radius: 2px;
  transition: transform .2s, opacity .2s;
  margin-inline: auto;
}
.nav-toggle:checked ~ .header-actions .nav-toggle-label span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle:checked ~ .header-actions .nav-toggle-label span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .header-actions .nav-toggle-label span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
  display: none;
  position: absolute; inset-block-start: 100%; inset-inline: 0;
  background: var(--bg); border-block-end: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: 8px 0;
  flex-direction: column;
}
.nav-toggle:checked ~ .site-nav { display: flex; }
.site-nav a {
  padding: 14px 20px; color: var(--ink-2); font-weight: 500;
  min-height: 48px; display: flex; align-items: center;
  border-block-end: 1px solid var(--line);
  white-space: nowrap;   /* 「OEM / ODM」「About Us」折成两行会顶高页头 */
}
.site-nav a:last-child { border-block-end: 0; }
.site-nav a.is-active { color: var(--primary); background: var(--primary-soft); }

.header-actions {
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto; flex-wrap: nowrap;
}

/* 语言切换 */
.lang-switch { position: relative; }
.lang-switch__btn {
  min-height: 40px; padding: 0 12px;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: .875rem; color: var(--ink-2);
}
.lang-switch__menu {
  display: none; position: absolute; inset-block-start: calc(100% + 4px);
  inset-inline-end: 0; min-width: 120px; margin: 0; padding: 6px;
  list-style: none; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); z-index: 60;
}
.lang-switch.is-open .lang-switch__menu { display: block; }
.lang-switch__menu a {
  padding: 10px 12px; border-radius: 6px;
  color: var(--ink-2); min-height: 44px; display: flex; align-items: center;
}
.lang-switch__menu a:hover { background: var(--bg-soft); color: var(--primary); }

/* ==========================================================================
   页头右侧操作区（第 35 轮重做）
   —— 账户 / 购物车改成**纯图标按钮**（见 _header.html 注释），
      所以两个按钮都是等宽等高的方形，视觉成组、不折行。
      `.account-link` 的规则从 41-page-account.css 挪到这里：它跟 `.cart-link`
      是一对，分居两个文件，改一个忘一个高度就对不齐。
   ========================================================================== */
.account-link,
.cart-link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 40px; min-height: 40px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: 1.0625rem;   /* 图标按 em 缩放，17px 视觉≈20px */
  text-decoration: none;
}
.account-link:hover,
.cart-link:hover { border-color: var(--primary); color: var(--primary); }

/* 购物车件数角标。
   ★ 关键：**绝对定位叠加在图标右上角**，不占布局宽度。
     件数无上界（客户可能下 1000 件），若按普通流内元素排，数字越大按钮越宽，
     页头会被挤到折行。叠加之后，无论 1 还是 9999，按钮始终是 40px 宽。
   ★ 显示值封顶 `99+`（见 _header.html 与 front.js），
     保证角标自身也不会横向膨胀到盖住图标。
   ★ 用逻辑属性（inset-inline-end）：阿语 RTL 下自动翻到左上角。 */
.cart-link__badge {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -6px;
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 17px; block-size: 17px; padding-inline: 4px;
  border-radius: var(--radius-pill);
  /* 2px 与页头同色描边 —— 角标压在图标上时，这圈描边把它"抠"出来，
     不加的话深色图标会和角标糊在一起。 */
  border: 2px solid var(--bg);
  background: var(--primary); color: var(--on-accent);
  font-size: .625rem; font-weight: 700; line-height: 1;
  white-space: nowrap; pointer-events: none;
}
.cart-link__badge[hidden] { display: none; }

.site-footer {
  background: var(--bg-soft); border-block-start: 1px solid var(--line);
  padding-block: 32px 24px; color: var(--ink-3); font-size: .875rem;
}
.site-footer__grid { display: grid; gap: 24px; margin-block-end: 20px; }
/* 栅格子项默认 `min-width:auto` —— 一条超长且**没有空格**的串（长邮箱、
   长 URL）会把列顶破、把整页撑出横向滚动条。显式允许收缩。 */
.site-footer__brand { min-width: 0; }
.site-footer h4 {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-2); margin-block-end: 10px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-block-end: 8px; }
.site-footer a { color: var(--ink-3); }
.site-footer a:hover { color: var(--primary); }
.site-footer__bottom {
  border-block-start: 1px solid var(--line); padding-block-start: 16px;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between;
  font-size: .8125rem;
}

/* 蜜罐锚点（第 39 轮反爬）：真人看不见、爬虫会跟。
   ⚠️ 用 `display: none`，不要用"移出屏幕"（`position:absolute; left:-9999px`）——
      位移法在部分读屏/自动化工具里仍会被当作可见链接解析，
      而这里要的恰恰是"只有解析 HTML 并盲跟链接的机器人才会请求它"。
      锚点本体在 front/_footer.html 末尾（带 nofollow + aria-hidden + tabindex=-1）。 */
.hp-trap { display: none; }

/* ==========================================================================
   页脚改版（第 27 轮定稿）：联系方式键值对 + 一栏 Quick Links + 底行
   ★ 只用逻辑属性 —— 阿语 RTL 下自动镜像，不必写第二份样式。
   ❌ 曾经的「物流 / 支付 / 认证」三段信息带已删除（业主明确不要）。
   ========================================================================== */

/* 联系方式：左边小标签 + 右边值，窄屏自动换行 */
.site-footer__contact li {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
}
.site-footer__k {
  flex: 0 0 auto; min-inline-size: 62px;
  color: var(--ink-4, var(--ink-3)); opacity: .85;
}
/* 同一字段的第二条起：缩进对齐到「值」那一列，不再重复打标签 */
.site-footer__sub { margin-inline-start: 70px; }
.site-footer__contact a { word-break: break-all; }

/* ★ 第 117 轮：320px 极窄屏下「Privacy · Terms · Cookie」不换行会比容器宽 1px，
   导致整页出现横向滚动条。窄屏允许换行，桌面仍单行。 */
.site-footer__links { white-space: nowrap; max-inline-size: 100%; }
@media (max-width: 400px) { .site-footer__links { white-space: normal; } }

/* 移动端常驻底部条：B2B 站在手机上最重要的转化入口 */
.mobile-bar {
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 80;
  display: flex; gap: 8px; padding: 8px 12px;
  padding-block-end: calc(8px + env(safe-area-inset-bottom, 0px));  /* iPhone 安全区 */
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(8px);
  border-block-start: 1px solid var(--line);
  /* ★ 第 78 轮：原来写死 `height: 60px`，再加上面的 safe-area 内边距 → iPhone 上
     内容比盒子高 34px，按钮被裁一小截；而 body 只按 60px 留白，末段文字被条遮住。
     改成 `min-height` + body 用同一个公式（`01-base.css`）才对得上。 */
  min-height: var(--mobile-bar-h);
}

/* ★★ 第 78 轮：触摸设备上 `backdrop-filter` 太贵 —— 页头是 sticky、底部条是 fixed，
   滚动时每帧都要重算模糊，Android / 华为浏览器上直接掉帧，手感变成"一顿一跳"。
   这两块背景本来就接近纯白（.98），去掉模糊肉眼几乎无差，质感换流畅。 */
@media (hover: none), (max-width: 759px) {
  .site-header,
  .mobile-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg);
  }
}
.mobile-bar__btn {
  flex: 1; min-height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 600; color: var(--on-accent);
}
.mobile-bar__btn--wa { background: var(--wa); }
.mobile-bar__btn--quote { background: var(--primary); }
.mobile-bar__btn:hover { color: var(--on-accent); filter: brightness(.95); }

.ico-wa {
  width: 16px; height: 16px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.3-.5 0-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6a11 11 0 0 1-4.2-3.7c-.3-.5-.7-1.1-.7-1.8 0-.7.4-1.1.5-1.3.2-.2.4-.2.5-.2h.4c.1 0 .3 0 .4.3l.6 1.4c0 .1.1.3 0 .4l-.2.4-.3.3c-.1.1-.2.2-.1.4.1.2.5.9 1.1 1.4.8.7 1.5 1 1.7 1.1.2.1.3.1.5-.1l.5-.6c.2-.2.3-.2.5-.1l1.4.7c.2.1.3.2.3.3v.3z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.3-.5 0-1 .1-1.6-.1-.4-.1-.9-.3-1.5-.6a11 11 0 0 1-4.2-3.7c-.3-.5-.7-1.1-.7-1.8 0-.7.4-1.1.5-1.3.2-.2.4-.2.5-.2h.4c.1 0 .3 0 .4.3l.6 1.4c0 .1.1.3 0 .4l-.2.4-.3.3c-.1.1-.2.2-.1.4.1.2.5.9 1.1 1.4.8.7 1.5 1 1.7 1.1.2.1.3.1.5-.1l.5-.6c.2-.2.3-.2.5-.1l1.4.7c.2.1.3.2.3.3v.3z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ==========================================================================
   内页页头 / 面包屑
   ========================================================================== */
.page-hero {
  padding-block: 40px 32px;
  background: var(--bg-soft);
  border-block-end: 1px solid var(--line);
}
.page-hero__title { font-size: 1.625rem; margin-block-end: 10px; }
.page-hero__sub {
  color: var(--ink-3); font-size: .9375rem; margin: 0; max-width: 62ch;
}

.crumbs {
  border-block-end: 1px solid var(--line);
  background: var(--bg);
  font-size: 13px;
}
.crumbs .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-block: 12px;
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs__sep { color: var(--ink-3); }
.crumbs__cur { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   空态 / 结果提示
   ========================================================================== */
.empty-state {
  display: grid; justify-items: center; gap: 16px;
  padding-block: clamp(36px, 8vw, 72px);
  text-align: center; color: var(--ink-2);
}
.empty-state p { margin: 0; max-width: 46ch; }

.result-note { margin-block: 0 18px; color: var(--ink-2); font-size: 14px; }

/* ==========================================================================
   工具类（尽量少用，优先写语义类）
   ========================================================================== */
.text-center { text-align: center; }
.mt-3 { margin-block-start: 16px; }
.mt-4 { margin-block-start: 24px; }
.hide-sm { display: none; }

/* ==========================================================================
   宽屏增强（移动优先：基础写给手机，这里只做增强）
   ========================================================================== */
@media (min-width: 640px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  /* 三栏：品牌+联系方式 / 产品 / 关于。品牌那栏内容多，给宽一点，
     否则地址、邮箱会挤成三四行（页脚是给客户找联系方式的，别让它难读）。 */
  /* 两栏：品牌+联系方式（宽） / Quick Links（窄）。
     ❌ 曾是 1.6fr 1fr 1fr（三个链接栏）—— 业主要求链接不分类，合并成一栏。 */
  .site-footer__grid { grid-template-columns: 2fr 1fr; }
}

@media (min-width: 900px) {
  body { padding-block-end: 0; }              /* 宽屏不用底部条 */
  .mobile-bar { display: none; }
  .nav-toggle-label { display: none; }
  .hide-sm { display: inline-flex; }
  .site-nav {
    display: flex; position: static; flex-direction: row;
    background: transparent; border: 0; box-shadow: none;
    padding: 0; margin-inline-start: 20px; gap: 2px;
    /* 导航是页头里唯一可以收缩的一块（品牌/操作区都锁死），
       留 min-width:0 才允许它真的让位，否则 flex 子项默认不肯小于内容宽。 */
    min-width: 0;
  }
  .site-nav a {
    padding: 8px 10px; border: 0; min-height: 40px;
    border-radius: var(--radius-sm); font-size: .9375rem;
    white-space: nowrap;
  }
  .site-nav a.is-active { background: var(--primary-soft); }
  .header-actions { margin-inline-start: auto; }
  /* 宽屏：品牌恢复固定宽（该让位的是导航），操作区本来就锁死。 */
  .site-header__inner > .brand { flex: 0 0 auto; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .section { padding-block: 56px; }
  .section__title { font-size: 1.75rem; }
}


/* ---- 统计条（about 页关键数据）---- */
.stat-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 760px; margin: 0 auto; }
.stat { text-align: center; padding: 28px 20px; background: var(--surface, #fff); border: 1px solid rgba(127,127,127,.18); border-radius: 14px; }
.stat__value { display: block; font-size: 42px; font-weight: 700; line-height: 1.1; color: var(--primary, #EF8337); }
.stat__label { display: block; margin-top: 8px; color: var(--ink-3, #6B7280); font-size: 14px; }
@media (max-width: 640px) { .stat-strip { gap: 12px; } .stat__value { font-size: 32px; } }


/* ---- 超长详情图切段容器（第 84 轮｜app/img_size.py::_expand_long）----
   ★ 为什么要这个容器：17000px 高的单张图在任何手机上都解不出来（显存/解码上限），
     后端把它切成若干 2400px 的段，这里负责让它们**看起来仍然是一张图**。
   ★ 边框与外圆角**挪到容器上**、图片上全部清零 —— 否则每一段自带 1px 边框，
     叠起来就是一道一道的接缝。 */
.rt-stack {
  display: block;
  margin-block: 1.2em;
  border: 1px solid var(--line, #E5E7EB);
  border-radius: var(--radius, 10px);
  overflow: hidden;          /* 让第一段/最后一段跟着容器圆角走 */
  line-height: 0;            /* 杀掉 img 之间的行内空隙（1~4px 白线） */
}
.rt-stack img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
}