/*
 Theme Name: 翼泽铖（深色版）
 Theme URI: https://example.com
 Description: 中东矿产（磷矿 / 碳酸钙 / 铁黄）跨境供应中国的中文企业站主题·深色专业商务风（可切换对照版），响应式，无支付功能，主打获客登记。
 Version: 1.1.1-dark
 Author: WorkBuddy
 Requires at least: 5.8
 Tested up to: 6.6
 Tags: dark, business, chinese, responsive, custom-colors
 Text Domain: mem-cn
*/

:root {
  /* 背景层 */
  --bg-900: #080b10;
  --bg-800: #0c1119;
  --bg-700: #0f1622;
  --bg-600: #141d2b;
  --surface: #121a26;
  --surface-2: #182233;
  --border: #1f2c3d;
  --border-soft: #16202e;

  /* 文字 */
  --text: #e9eef5;
  --text-soft: #aab7c6;
  --text-mut: #6f7f92;

  /* 强调色 —— 矿石琥珀金 + 贸易青 */
  --gold: #e0a94e;
  --gold-soft: #f1c878;
  --teal: #2bb3a3;
  --teal-soft: #56d3c4;
  --up: #34c08a;
  --down: #e0584f;

  /* 间距 / 圆角 / 阴影 */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --shadow: 0 18px 50px -22px rgba(0,0,0,.75);
  --shadow-glow: 0 0 0 1px rgba(224,169,78,.18), 0 20px 60px -28px rgba(224,169,78,.35);
  --maxw: 1180px;
  --nav-h: 60px;

  --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  font-family: var(--font);
  background: var(--bg-900);
  color: var(--text);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* 背景纹理：细微的地质分层光感 */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(224,169,78,.10), transparent 60%),
    radial-gradient(800px 520px at 10% 6%, rgba(43,179,163,.08), transparent 60%),
    linear-gradient(180deg, var(--bg-900), var(--bg-800));
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ---------- 布局容器 ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }

/* 首页模块上下间距收紧（仅首页，不动产品/板块等内页） */
@media (min-width: 961px) {
  /* 2026-09-03 拉开：原值 40/32/40/32 偏挤（用户反馈上半部分挤），整体放大约 40% */
  body.home .section { padding: 56px 0; }
  body.home .section--tight { padding: 46px 0; }
  body.home .hero { padding-bottom: 64px; }
  body.home .section-head { margin-bottom: 44px; }
}

/* ---------- 文字 ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .7; }

h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(30px, 5vw, 50px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: 21px; }
.lead { color: var(--text-soft); font-size: 17px; max-width: 60ch; }
.about-company { margin-top: 12px; color: var(--text); font-size: 20px; font-weight: 600; }
/* 关于我们主标题：电脑端字号收小（桌面上限 50px → 38px），移动端保持 30px */
.hero__grid h1.about-title { font-size: clamp(30px, 3.4vw, 38px); line-height: 1.2; }
.muted { color: var(--text-mut); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; transition: .22s ease; white-space: nowrap;
}
.btn--primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: #1a1206; box-shadow: 0 14px 34px -16px rgba(224,169,78,.7);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -16px rgba(224,169,78,.85); }
.btn--ghost { border-color: var(--border); color: var(--text); background: rgba(255,255,255,.02); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-soft); }
.btn--teal { background: linear-gradient(135deg, var(--teal), var(--teal-soft)); color: #04201c; }
.btn--teal:hover { transform: translateY(-2px); }

/* ---------- 导航 ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 50;
  display: flex; align-items: center;
  background: rgba(10,14,20,.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.nav__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #14171d; font-size: 16px; font-weight: 800; flex: none; }
/* 品牌标记：原为「矿」字，2026-09-02 改为等距立方体线框（矿石块 / 集装箱，兼顾矿产与跨境物流）。
   内联 SVG 必须显式给尺寸——不给会按默认 300x150 渲染撑爆页眉（与 .theme-toggle 同一个坑）。
   图标用 currentColor：深色下 #14171d（金底），浅色下 #ffffff（青绿底，见浅色段 12），
   页脚在浅色下同为浅底，不再有深色例外（2026-09-03）。 */
.brand__mark svg { width: 17px; height: 17px; display: block; flex: none; }
.nav .brand__mark { display: none; }
.brand small { display: block; font-size: 11px; color: var(--text-mut); font-weight: 500; letter-spacing: .12em; }
.nav__links { display: flex; align-items: center; gap: 30px; }
/* 导航标签恒为单行（2026-09-24）：不给 nowrap 时，页眉可用内宽不够会把
   标签内部折行——中文「首页」会被压成「首/页」上下两字堆叠（1024px 实测
   每个标签宽 22px、高 2 行），导航条高矮不齐。改为 nowrap + 下方 961–1179
   区间收紧留白，从根上消除折行。 */
.nav__links a { color: var(--text-soft); font-size: 15px; font-weight: 500; transition: .2s; position: relative; white-space: nowrap; }
.nav__links a:hover, .nav__links a.is-active { color: var(--text); }
.nav__links > a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--gold); border-radius: 2px; }
.nav__cta { display: flex; align-items: center; gap: 14px; }
/* 导航右上角「免费寄样 / 免费询价」按钮：统一压扁上下高度（桌面端） */
.nav__cta .btn { padding: 5px 20px; font-size: 14px; }
.nav__toggle { display: none; background: none; border: 1px solid var(--border); width: 42px; height: 42px; border-radius: 10px; cursor: pointer; flex: none; }
.nav__toggle span { display: block; width: 18px; height: 2px; background: var(--text); margin: 3px auto; transition: .25s; }

/* ---------- 深浅模式切换按钮 ----------
   必须与汉堡按钮同款（方形描边、同尺寸），否则窄屏页眉会参差不齐。
   SVG 必须显式给 width/height —— 内联 <svg> 只写 viewBox 时浏览器按
   替换元素默认 300×150 渲染，会直接撑爆页眉。 */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--border);
  color: var(--text-soft);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { border-color: var(--gold); color: var(--gold-soft); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
/* 图标语义 = 点击后到达的模式（与 JS 里的 aria-label 一致）：
   深色下显示太阳「去浅色」，浅色下显示月亮「去深色」。 */
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* 语言切换：单个按钮，外观与「免费寄样」(btn--ghost) 一致；中文版显示 EN，英文版显示 中文 */
.lang-btn {
  min-width: 50px; font-weight: 600; letter-spacing: .04em;
}
/* 与 .nav__cta .btn 同特异度但写在后面，保证左右内边距生效（收窄一点，避免页眉拥挤） */
.nav__cta .lang-btn { padding-left: 13px; padding-right: 13px; }

/* 移动端菜单 */
.nav__links.is-open {
  display: flex; flex-direction: column; gap: 4px;
  position: absolute; top: var(--nav-h); left: 0; right: 0;
  background: var(--bg-800); border-bottom: 1px solid var(--border); padding: 14px 22px 22px;
}
.nav__links.is-open a { padding: 12px 4px; border-bottom: 1px solid var(--border-soft); }

/* ---------- 移动端页眉下快捷导航条（2026-09-18）----------
   背景：手机/平板页眉只露右上角三条横线，导航可发现性差，用户反馈「很多人找不到」。
   做法：在固定页眉下加一条 44px 窄条，横向铺开 6 个主入口，始终可见。
   尺寸依据：44px = Apple HIG 最小触摸目标；6 项在 320–430px 屏**一次放下**
   （等宽分栏 + vw 自适应字号），不依赖横滑——横滑会把末项藏在屏外，
   反而伤可发现性，正是本改造要解决的问题。仅在页面主区其余尺寸不变。
   默认隐藏，仅在下方响应式段（≤960px）启用。
   SEO 说明：桌面隐藏、移动显示，但同一组链接在主导航/页脚始终各有一份可见，
   不存在「只给搜索引擎看的隐藏链接」；服务端 HTML 对蜘蛛与用户完全一致（非 cloaking）。 */
.msub { display: none; }
[data-theme="light"] .msub { border-top-color: rgba(21, 82, 150, .14); }
[data-theme="light"] .msub__item { color: #3a4a5e; }            /* #3a4a5e on 白底 ≈ 9:1 */
[data-theme="light"] .msub__item.is-active { color: #96661f; }  /* 压深金，白底 ≈ 5.3:1，达正文级对比度 */

/* ---------- 页脚 ---------- */
.footer { background: var(--bg-800); border-top: 1px solid var(--border-soft); padding: 56px 0 30px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 36px; }
.footer h4 { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 16px; }
.footer a { color: var(--text-mut); font-size: 14.5px; display: block; padding: 6px 0; transition: .2s; }
.footer a:hover { color: var(--gold-soft); }
.footer__bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border-soft); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--text-mut); font-size: 13.5px; }
.footer__legal-note { margin: 14px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-mut); opacity: .85; }
.footer__about p { color: var(--text-soft); font-size: 14.5px; margin-top: 14px; max-width: 34ch; }

/* ---------- 通用卡片 ---------- */
.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-700));
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 26px; transition: .25s ease;
}
.card:hover { border-color: rgba(224,169,78,.45); transform: translateY(-3px); box-shadow: var(--shadow); }
.card__icon { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; background: rgba(224,169,78,.12); color: var(--gold); margin-bottom: 16px; }

.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* 产品网格：桌面 3 列，平板/手机直接单列（避免窄屏 2 列拥挤） */
.grid--prod { grid-template-columns: repeat(3, 1fr); }
/* 英文首页：磷矿按产地拆成埃及/约旦两张卡 → 共 4 张，桌面 2×2、≤960 单列。
   沿用 .grid--prod「平板不排 2 列」的意图；本类只出现在英文分支，
   中文首页仍走 .grid--prod 的 3 列，逐字节不变。 */
.grid--prod4 { grid-template-columns: repeat(2, 1fr); }

/* 区块头 */
.section-head { max-width: 64ch; margin: 0 auto 44px; text-align: center; }
.section-head .lead { margin-top: 14px; }

/* 标签 / 徽章 */
.tag { display: inline-block; font-size: 12.5px; padding: 4px 11px; border-radius: 999px; background: rgba(43,179,163,.12); color: var(--teal-soft); border: 1px solid rgba(43,179,163,.25); font-weight: 600; }
.tag--gold { background: rgba(224,169,78,.12); color: var(--gold-soft); border-color: rgba(224,169,78,.25); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* 2026-09-03 上下拉开：顶部 30→52（固定页眉与首行标签之间留白）、底部 20→32 */
  padding: calc(var(--nav-h) + 52px) 0 32px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, rgba(8,11,16,.86) 0%, rgba(8,11,16,.74) 55%, rgba(8,11,16,.68) 130%), url('assets/img/jordan-phosphate-mine-08.webp') 70% 55%/cover no-repeat;
}
.hero__grid { display: grid; grid-template-columns: 1fr; gap: 0; align-items: center; text-align: center; }
/* 关于我们页 hero：桌面两栏（文字左 / 图片右），文字左对齐；移动端单栏左对齐更易读 */
.hero__grid.about-hero { text-align: left; }
@media (min-width: 961px) {
  .hero__grid.about-hero {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
  }
  .hero__grid.about-hero .hero__cta { justify-content: flex-start; }
}
@media (max-width: 960px) {
  .hero__grid.about-hero { text-align: left; gap: 28px; }
  .hero__grid.about-hero .hero__cta { justify-content: flex-start; }
}
.hero h1 { margin: 8px 0 10px; }
.hero .hero__title h1, .hero .hero__title p, .hero .hero__title h2 { font-size: clamp(34px, 4.8vw, 54px); line-height: 1.14; margin: 20px 0 0; display: inline-block; text-align: left; white-space: nowrap; font-weight: 700; color: #fff; }
.hero h1 em, .hero .hero__title p em, .hero .hero__title h2 em { font-style: normal; }
.hero .lead { color: rgba(255,255,255,.86); }
.hero__titles { display: grid; overflow: hidden; margin: 4px 0 0; }
.hero__title { grid-area: 1 / 1; transform: translateY(100%); transition: transform .6s ease; }
.hero__titles:not(.is-init) .hero__title:first-child { transform: translateY(0); }
.hero__title.is-active { transform: translateY(0); }
.hero__title.is-prev { transform: translateY(-100%); }
.hero__cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
.hero__stats { display: flex; gap: 30px; margin-top: 34px; flex-wrap: wrap; justify-content: center; }
.hero__stat b { font-size: 28px; color: #fff; display: block; }
.hero__stat b small { font-size: .5em; font-weight: inherit; margin-left: 2px; color: #fff; }
.hero__stats .hero__stat:first-child b { color: var(--teal-soft); }
.hero__stat span { font-size: 13px; color: rgba(255,255,255,.72); }
.hero__trust { list-style: none; display: flex; flex-wrap: wrap; gap: 28px; margin-top: 72px; justify-content: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-sm); padding: 20px 28px; }
.hero__trust li { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 11px 22px; }
.hero__trust li .num { color: var(--teal-soft); font-weight: 700; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.hero__visual { display: none; }
.hero .btn--ghost { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.05); }
.hero .btn--ghost:hover { border-color: var(--gold); color: var(--gold-soft); background: rgba(255,255,255,.10); }
/* Hero 副标题下方两个 CTA：略缩小（上下内边距与字号），与副标题比例更协调 */
.hero__cta .btn { padding: 8px 12px; font-size: 14px; }

/* 主视觉容器 */
.visual-frame {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: radial-gradient(120% 120% at 70% 10%, rgba(224,169,78,.10), transparent 60%), var(--surface);
  padding: 18px; box-shadow: var(--shadow);
}
.visual-frame svg { width: 100%; height: auto; border-radius: var(--r-md); }
.visual-frame img { width: 100%; height: auto; border-radius: var(--r-md); }

/* 产区直采图文块 */
.origin { align-items: center; gap: 40px; grid-template-columns: 0.9fr 1.1fr; }
.origin__text .checks { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 12px; }
.origin__text .checks li { position: relative; padding-left: 28px; color: var(--text-soft); font-size: 15px; }
.origin__text .checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; }
.origin__media { align-self: center; }
.origin__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.origin__supply { display: flex; gap: 34px; margin: 24px 0 2px; flex-wrap: wrap; }
.origin__supply .supply-item { display: flex; flex-direction: column; gap: 3px; }
.origin__supply .supply-item b { font-size: 30px; font-weight: 800; color: var(--gold); line-height: 1.05; letter-spacing: .5px; }
.origin__supply .supply-item b .unit { font-size: 15px; font-weight: 600; margin-left: 3px; color: var(--gold-soft); }
.origin__supply .supply-item .supply-label { font-size: 13px; color: var(--text-soft); }
@media (max-width: 680px) {
  .origin__supply { gap: 24px; margin: 20px 0 2px; }
  .origin__supply .supply-item b { font-size: 25px; }
}

/* 产区实景轮播（堆叠淡入：所有 slide 贴在轮播框内，靠 opacity 切换，
   不存在「移出视口」导致 Safari 不加载图片的问题；无 JS 时纵向排列可见首图） */
.carousel { position: relative; border-radius: var(--r-md); overflow: hidden; background: #0f172a; aspect-ratio: 16 / 9; }
.carousel__track { position: absolute; inset: 0; }
.carousel__slide { position: relative; }
.carousel__slide img { width: 100%; height: auto; display: block; }
/* 有 JS 时：slide 绝对叠放，仅当前张 opacity:1，切换即淡入 */
.carousel.is-active .carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.carousel.is-active .carousel__slide.is-active { opacity: 1; }
.carousel.is-active .carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 14px; background: linear-gradient(transparent, rgba(15,23,42,.82)); color: #fff; font-size: 14px; line-height: 1.4; pointer-events: none; }
.carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(15,23,42,.35); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.carousel__btn:hover, .carousel__btn:focus-visible { background: rgba(15,23,42,.55); color: #fff; }
.carousel__btn--prev { left: 12px; }
.carousel__btn--next { right: 12px; }
.carousel__dots { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; }
.carousel__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; transition: background .2s, transform .2s; }
.carousel__dot.is-active { background: var(--gold); transform: scale(1.2); }
.carousel__dot:hover, .carousel__dot:focus-visible { background: #fff; }
/* 质检报告轮播：报告多为竖版/方版，用 contain 完整显示，避免裁切 */
.carousel--contain { aspect-ratio: 4 / 3; }
.carousel--contain .carousel__slide img,
.carousel.is-active.carousel--contain .carousel__slide img { object-fit: contain; background: #f4f6f9; }
@media (prefers-reduced-motion: reduce) { .carousel.is-active .carousel__slide { transition: none; } }

/* 质检报告轮播（采购知识页）：报告以完整比例展示，并做基础防下载 */
.qc-report { margin-top: 8px; }
.qc-report .carousel { aspect-ratio: 4 / 3; }
.qc-report .carousel.is-active .carousel__slide img { object-fit: contain; background: #f4f6f9; }
.qc-report .carousel__slide img { -webkit-user-drag: none; user-select: none; }
.qc-report .qc-slide__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px 14px; background: linear-gradient(transparent, rgba(15,23,42,.85)); color: #fff; pointer-events: none; }
.qc-report .qc-slide__title { display: block; font-weight: 600; font-size: 15px; line-height: 1.4; }
.qc-report .qc-slide__date { display: block; font-size: 12px; opacity: .82; margin-top: 3px; }

/* 路线 / 流程 */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: step; }
.flow__step { position: relative; padding: 24px 20px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.flow__step::before { counter-increment: step; content: "0" counter(step); font-size: 13px; font-weight: 700; color: var(--gold); }
.flow__step h4 { margin: 10px 0 6px; font-size: 16px; }
.flow__step p { font-size: 14px; color: var(--text-mut); }
.flow__step { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.flow__go { display: inline-block; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--gold); letter-spacing: .3px; }
.flow__step:hover .flow__go { text-decoration: underline; }

/* 产品卡 */
.product {
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, var(--surface), var(--bg-700));
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 24px; transition: .25s;
}
.product:hover { border-color: rgba(224,169,78,.5); transform: translateY(-3px); box-shadow: var(--shadow); }
.product__art { aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--border-soft); background: var(--bg-800); display: grid; place-items: center; }
.product__art svg { width: 100%; height: 100%; }
.product__art img { width: 100%; height: 100%; object-fit: cover; padding: 0; }
.product__title { display: flex; align-items: center; justify-content: space-between; }
.product__title h3 { font-size: 19px; }
.product ul.spec { margin-top: 6px; display: grid; gap: 7px; }
.product ul.spec li { font-size: 14px; color: var(--text-soft); display: flex; gap: 9px; }
.product ul.spec li::before { content: "▹"; color: var(--gold); }

/* 列表文章（知识/新闻） */
.post { display: flex; align-items: center; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--border-soft); }
.post__date { flex: 0 0 92px; font-size: 13px; color: var(--text-mut); }
.post__date b { display: block; font-size: 26px; color: var(--gold); line-height: 1; }
.post__thumb { flex: 0 0 140px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--surface); }
.post__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post__main { flex: 1 1 auto; min-width: 0; }
.post h3 { font-size: 18.5px; }
.post h3 a:hover { color: var(--gold-soft); }
.post p { color: var(--text-mut); font-size: 14.5px; margin-top: 6px; }
.post__cat { font-size: 12.5px; color: var(--teal-soft); font-weight: 600; }

/* 采购知识页 FAQ（可见问答 + FAQPage 结构化数据，利于 AI/搜索引用） */
.faq { margin-top: 38px; }
.faq__item { border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: 0 18px; margin-bottom: 12px; background: var(--surface); }
.faq__item summary { cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--text); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--teal); font-size: 22px; font-weight: 700; line-height: 1; }
.faq__item[open] summary::after { content: "\2212"; }
.faq__item p { padding: 0 0 16px; color: var(--text-soft); margin: 0; line-height: 1.7; }

/* 产品目录页深度内容（2026-09-29）：规格速查表 + 订购流程。
   仅英文 /en/products/ 渲染这些节点（page-products.php 内用 memcn_is_en() 包裹），
   中文 /products/ 不引用上述任一类名，故对中文站零视觉影响。 */
.spec-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 10px; }
.spec-table { width: 100%; border-collapse: collapse; min-width: 700px; font-size: 14.5px; }
.spec-table th,
.spec-table td { border-bottom: 1px solid var(--border-soft); padding: 13px 14px; text-align: left; vertical-align: top; }
.spec-table th { color: var(--text); font-weight: 600; background: var(--surface-2); white-space: nowrap; }
.spec-table td { color: var(--text-soft); line-height: 1.65; }
.spec-table tr:last-child td { border-bottom: 0; }
.spec-table a { color: var(--gold-soft); text-decoration: none; }
.spec-table a:hover { text-decoration: underline; }

/* 产地页底部 Related guides（仅英文站输出，中文侧不出现该类） */
.related-guides { list-style: disc; padding-left: 22px; max-width: 760px; margin: 0 auto; display: grid; gap: 10px; color: var(--text-soft); }
.related-guides a { color: var(--gold-soft); text-decoration: none; }
.related-guides a:hover { text-decoration: underline; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 18px; margin-top: 28px; }
.step { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 20px 20px 22px; }
.step__no { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(224,169,78,.14); color: var(--gold); font-size: 13px; font-weight: 700; margin-bottom: 11px; }
.step h3 { font-size: 16px; margin: 0 0 8px; color: var(--text); }
.step p { margin: 0; font-size: 14px; color: var(--text-soft); line-height: 1.7; }
@media (max-width: 560px) {
  .post { gap: 12px; }
  .post__date { flex-basis: 60px; }
  .post__date b { font-size: 20px; }
  .post__thumb { display: none; }
  .post__main p { display: none; }
}

/* 首页文章摘要卡片（动态调取真实文章 + 特色图） */
.home-posts .section-head { margin-bottom: 18px; }
.home-posts .section-head h2 { font-size: clamp(22px, 2.8vw, 30px); }
.home-posts__list { display: grid; gap: 14px; }
.post-card { display: flex; gap: 14px; align-items: stretch; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); text-decoration: none; color: inherit; transition: border-color .2s, transform .2s, background .2s; }
.post-card:hover, .post-card:focus-visible { border-color: var(--gold); transform: translateY(-2px); background: var(--bg-800); outline: none; }
.post-card__thumb { flex: 0 0 116px; aspect-ratio: 4 / 3; align-self: center; border-radius: 10px; overflow: hidden; background: var(--bg-800); display: block; }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.post-card__cat { font-size: 12px; font-weight: 600; color: var(--gold-soft); letter-spacing: .03em; }
.post-card__title { font-size: 16px; line-height: 1.4; color: #f1f5f9; font-weight: 600; }
.post-card__excerpt { font-size: 13px; line-height: 1.5; color: var(--text-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-posts__empty { color: var(--text-mut); font-size: 14px; }

/* ---------- 表单 ---------- */
.form { display: grid; gap: 18px; max-width: 640px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 14px; color: var(--text-soft); font-weight: 500; }
.field label .req { color: var(--gold); }
.field input, .field select, .field textarea {
  background: var(--bg-700); border: 1px solid var(--border); color: var(--text);
  padding: 13px 15px; border-radius: var(--r-sm); font-size: 15px; font-family: inherit; transition: .2s; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(224,169,78,.14); }
.field textarea { min-height: 120px; resize: vertical; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__note { font-size: 13px; color: var(--text-mut); }
.form__ok { display: none; padding: 16px 18px; border-radius: var(--r-sm); background: rgba(52,192,138,.12); border: 1px solid rgba(52,192,138,.3); color: var(--up); font-size: 14.5px; }
.form__ok.is-show { display: block; }

/* CTA 横幅 */
.cta-band {
  background: linear-gradient(135deg, rgba(224,169,78,.14), rgba(43,179,163,.10)), var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
/* 首页底部 CTA：居中 + 高清底图（仅首页，不影响内页） */
body.home .cta-band{
  display:block; text-align:center;
  background:linear-gradient(rgba(13,23,38,.74),rgba(13,23,38,.74)),url('assets/img/jordan-phosphate-mine-08.webp') center/cover no-repeat;
  border-color:rgba(224,169,78,.35);
}
body.home .cta-band::before{display:none}
body.home .cta-band h2, body.home .cta-band .lead{color:#fff}
body.home .cta-band .btn{margin-top:22px}

/* 面包屑 */
.crumb { font-size: 13.5px; color: var(--text-mut); padding-top: calc(var(--nav-h) + 10px); }
/* 内页（非首页）：收窄顶部留白——crumb 已承担固定导航的补偿高度，section 顶部不必再留一大段空白 */
body:not(.home) .section--tight { padding-top: 22px; }
.crumb a:hover { color: var(--gold-soft); }

/* WordPress 基础兼容 */
.alignwide, .alignfull { max-width: none; }
.wp-caption { max-width: 100%; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; }

/* ---------- 无障碍增强 ---------- */
/* 键盘焦点可见性：链接与按钮在键盘导航（Tab）时显示描边，鼠标点击不触发 */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}
/* 跳到主内容链接：默认移出视口，键盘聚焦时滑入可见 */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--gold); color: #1a1206; padding: 11px 18px;
  border-radius: 8px; font-weight: 700; transition: top .2s ease;
}
.skip-link:focus { top: 12px; }

/* 内页主标题：语义用 h1，视觉沿用原 h2 字号，保持设计一致 */
.section-head h1, .hero__grid h1 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.2; }

/* 表单校验状态 */
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--down); }
.form__err { color: var(--down); font-size: 13.5px; margin-top: 4px; }

/* 动画 —— 默认可见，仅 JS 启用(html.js)才隐藏初始态，保证无 JS / 百度抓取时内容照常显示 */
.reveal { transition: .6s cubic-bezier(.22,.61,.36,1); }
html.js .reveal { opacity: 0; transform: translateY(18px); }
html.js .reveal.is-in { opacity: 1; transform: none; }

/* 卡片 / 产品悬浮光效（鼠标跟随径向光 + 边框发光），纯 CSS hover，JS 仅提供坐标 */
.card, .product { position: relative; overflow: hidden; }
.card::after, .product::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--mx, 30%) var(--my, 0%), rgba(224,169,78,.14), transparent 42%);
}
.card:hover::after, .product:hover::after { opacity: 1; }

/* 按钮 hover 流光（纯 CSS，不遮挡文字、不影响点击） */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; z-index: -1;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .55s ease; pointer-events: none;
}
.btn:hover::before { left: 130%; }

/* 导航滚动变色 */
.nav.is-scrolled { background: rgba(8,11,16,.92); box-shadow: 0 10px 30px -14px rgba(0,0,0,.6); }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  /* 导航：宽度不足时收起为汉堡菜单（新增「实景展示」后共 6 项，需更多空间） */
  .nav__links { display: none; }
  .nav__toggle { display: block; }

  /* —— 页眉下快捷导航条启用（2026-09-18）——
     .nav 改纵向排列，条作为第二个子块；--nav-h 抬到「顶部行 + 窄条」总高，
     既有 calc(var(--nav-h) + …) 顶部留白会**自动**跟着变，无需逐条修改。 */
  :root { --nav-h: 104px; }              /* 60 顶部行 + 44 快捷条 */
  .nav { flex-direction: column; align-items: stretch; }
  .nav__inner { flex: 1 1 auto; min-height: 0; }
  .msub {
    --msub-h: 44px;                      /* 高度单一来源，下划线用同一变量对齐 */
    display: flex; flex: none; align-items: stretch;
    height: var(--msub-h); padding: 0 6px; gap: 0;
    border-top: 1px solid var(--border-soft);
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .msub::-webkit-scrollbar { display: none; }
  .msub__item {
    flex: 1 1 0; min-width: 0;           /* 等宽分栏：6 项各占 1/6，不挤不溢 */
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 2px; white-space: nowrap; line-height: 1;
    font-size: clamp(11px, 3.3vw, 13px); /* 320px→11 / 360px→11.9 / ≥394px→13 */
    font-weight: 500; letter-spacing: .02em;
    color: var(--text-soft);
    -webkit-tap-highlight-color: transparent;
  }
  .msub__item.is-active { color: var(--gold); font-weight: 700; }
  .msub__label { position: relative; display: block; }
  /* 下划线跟随「文字宽度」而非整格：长短标签都精准对齐，视觉更整。
     bottom 用 (条高 - 1em)/2 抵消垂直居中偏移，保证下划线贴合条底。 */
  .msub__item.is-active .msub__label::after {
    content: ""; position: absolute; left: 0; right: 0;
    bottom: calc((var(--msub-h) - 1em) / -2);
    height: 2px; background: var(--gold); border-radius: 2px;
  }
  /* 窄屏页眉元素变多（询价按钮 + 语言钮 + 深浅切换 + 汉堡），间距收紧避免挤在一起 */
  .nav__cta { gap: 9px; }
  /* 语言切换在窄屏必须保留（2026-09-28 老皮要求）：
     原写法 .nav__cta .btn--ghost { display:none } 会连同语言钮一起藏掉
     ——语言钮也是 btn--ghost。改成按类名精确排除：寄样仍隐藏，lang-btn 单独恢复。 */
  .nav__cta .btn--ghost:not(.lang-btn) { display: none; }
  .nav__cta .lang-btn { display: inline-flex; }
  /* 移动端：页眉保留一个主 CTA（2026-09-28 C6）
     原逻辑是「留寄样、藏询价」，但询价才是成交路径上的主入口，寄样只是辅助 → 对调。
     宽度风险为零：中文「免费询价」与「免费寄样」同为 4 字；
     英文 "Get a Quote"（11 字符）比 "Request Sample"（14 字符）更短。
     尺寸沿用原寄样标签（34px 高 / 13px 字），与右侧 38px 方圆钮视觉对齐。
     375px 屏实测占位：品牌 114 + 间距 27 + 按钮 80 + 两钮 76 + 内边距 32 ≈ 329px，余量充足。 */
  .nav__cta .btn--primary {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 34px; padding: 0 14px; font-size: 13px; border-radius: 999px;
    box-shadow: none; /* 小尺寸不挂重阴影，避免页眉视觉噪点 */
  }
  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--prod { grid-template-columns: 1fr; }
  .grid--prod4 { grid-template-columns: 1fr; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  /* 产区直采：窄屏下文字在上、矿区轮播整宽在下（避免右栏窄列太小） */
  .origin { grid-template-columns: 1fr; gap: 28px; }
  /* 信任条：手机/平板改为 2x2 方阵，避免 3+1 别扭 */
  .hero__trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 12px; padding: 14px; }
  .hero__trust li { justify-content: center; font-size: 15px; padding: 10px 12px; }
  /* Hero 内部间距在小屏回退一档：母版 56/72/40 是按桌面首屏定的，
     照搬到 ≤960 会把「三项数据」推出首屏。这里按比例收回，
     仍比 2026-09-03 改前的 14/46/60/26 略松，保持「松而不空」。 */
  .hero h1, .hero .hero__title h1, .hero .hero__title p, .hero .hero__title h2 { margin-top: 12px; }
  .hero__cta { margin-top: 26px; }
  .hero__stats { margin-top: 30px; }
  .hero__trust { margin-top: 60px; }
  /* 平板：首页间距同步收紧，避免回落到默认 84px */
  body.home .section { padding: 50px 0; }
  body.home .section--tight { padding: 42px 0; }
  body.home .hero { padding-bottom: 30px; }
  body.home .section-head { margin-bottom: 38px; }
}
@media (max-width: 680px) {
  /* 收窄固定页眉：释放小屏浏览空间（50 顶部行 + 44 快捷条 = 94） */
  :root { --nav-h: 94px; }
  .nav__inner { padding: 0 16px; }
  /* 页眉按钮统一收到 38px：--nav-h 只有 50px，42px 会顶到上下边 */
  .nav__toggle, .theme-toggle { width: 38px; height: 38px; border-radius: 9px; }
  .theme-toggle svg { width: 16px; height: 16px; }
  .nav .brand { font-size: 14px; gap: 8px; }
  .nav .brand [data-memcn-setting="company_name"] { white-space: nowrap; }
  /* 语言钮 = 34×34 圆角方块（2026-10-08 第二批：老皮「中文切英文太挤了，那个 EN 都瘪了」）
     第一批只修了高度（22.4→34），宽度仍是 25.5–27.5px → 比高还窄，成了竖条，视觉上「瘪」。
     本次把宽度也对齐到 34px（min-width），并统一圆角 10px，与「深浅 / 汉堡」两个方块钮一致。
     🔴 腾位来源见文件末尾「≤420px」同名区块：gap 4→3、两个方块钮 38→34，共约 11px。
     实测最紧的 360px 档：中文余量 5px、英文 2.5px；右侧留白全程保住 16px（未侵占内边距）。 */
  .nav__cta .lang-btn { min-width: 34px; padding: 0 4px; font-size: 12px; min-height: 34px; border-radius: 10px; }
  /* 多一个语言钮，间距再收，保证 375px 小屏仍在单行内 */
  .nav__cta { gap: 6px; }
  .nav .brand .brand__mark { display: inline-flex; width: 26px; height: 26px; font-size: 14px; border-radius: 7px; }
  /* 移动端方块收窄到 26px，图标同步缩到 15px（SVG 不吃 font-size，必须单独给） */
  .nav .brand .brand__mark svg { width: 15px; height: 15px; }
  .nav .brand small { display: none; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
  .form__row { grid-template-columns: 1fr; }
  .cta-band { padding: 30px; }
  .section { padding: 48px 0; }
  body.home .section { padding: 38px 0; }
  body.home .section--tight { padding: 34px 0; }
  body.home .hero { padding-bottom: 26px; }
  body.home .section-head { margin-bottom: 32px; }
  .hero { padding-top: calc(var(--nav-h) + 28px); }
  /* 手机再收一档：三项数据在窄屏会折行，gap 30 太散 */
  .hero__cta { margin-top: 22px; }
  .hero__stats { margin-top: 26px; gap: 22px; }
  .hero__trust { margin-top: 52px; }
  /* 移动端压缩文章封面高度，确保标题+正文首屏可见（避免客户误以为无正文） */
  .article__cover { max-width: 100%; margin: 4px auto 18px; }
  .article__cover img { max-height: 200px; object-fit: cover; }
  /* 移动端：首页主标题调大（nowrap 已禁止段内错乱换行；最长一行 9 字，≤680px 屏宽安全） */
  .hero h1, .hero .hero__title h1, .hero .hero__title p, .hero .hero__title h2 { font-size: clamp(28px, 8vw, 40px); line-height: 1.22; }
  .hero__stat b { font-size: 22px; }
  .hero__stat span { font-size: 12.5px; }
}

/* ---------- 单篇文章（新闻 / 知识） ---------- */
.article { padding-bottom: 84px; }
.article__head { max-width: 880px; margin: 0 auto 26px; }
.article__head h1 { font-size: clamp(23px, 3vw, 30px); margin: 12px 0 14px; }
.article__meta { color: var(--text-mut); font-size: 14px; display: flex; gap: 10px; align-items: center; }
.article__meta .dot { opacity: .5; }
.article__cover { max-width: 720px; margin: 6px auto 28px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); }
.article__cover img { width: 100%; height: auto; }
/* 平板/手机（≤900px）：封面与正文图片限高限宽，避免大图占满首屏或溢出（解决"正文第一张图太大"） */
@media (max-width: 900px) {
  .article__cover img { max-height: 200px; object-fit: cover; }
  .article__body img { max-width: 100%; height: auto; }
}
.article__body { max-width: 880px; margin: 0 auto; font-size: 17px; color: var(--text-soft); }
.article__inline-img { display: block; width: 100%; max-width: 100%; height: auto; margin: 28px auto; border-radius: 10px; }
.article__body h2 { font-size: 26px; color: var(--text); margin: 34px 0 12px; }
.article__body h3 { font-size: 21px; color: var(--text); margin: 26px 0 10px; }
.article__body p { margin: 0 0 18px; }
.article__body ul, .article__body ol { margin: 0 0 18px 22px; color: var(--text-soft); list-style: revert; }
.article__body li { margin: 6px 0; }
.article__body a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.article__body strong { color: var(--text); }
.article__body img { border-radius: var(--r-sm); margin: 10px 0; height: auto; }
.article__body blockquote { border-left: 3px solid var(--gold); padding-left: 16px; color: var(--text); margin: 0 0 18px; font-style: italic; }
.article__foot { max-width: 880px; margin: 40px auto 0; }

/* ---------- 通用页面（展示型：矿场 / 物流 / 质检） ---------- */
.hero--page .container { max-width: 900px; }
.hero--page h1 { font-size: clamp(28px, 4.4vw, 46px); margin: 8px 0 16px; }
.hero--page .lead { color: var(--text-soft); font-size: 18px; max-width: 70ch; }

.page-content { max-width: 1080px; margin: 0 auto; font-size: 16.5px; line-height: 1.75; color: var(--text-soft); }
.page-content > p:first-child { margin-top: 0; }

/* 古腾堡相册块 / 经典相册 shortcode 统一响应式网格 */
.wp-block-gallery, .gallery { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 24px 0; padding: 0; }
.wp-block-gallery .wp-block-image, .gallery-item { margin: 0; }
.wp-block-gallery img { width: 100%; height: auto; border-radius: var(--r-md); display: block; transition: transform .3s ease, box-shadow .3s ease; }
.gallery-item img, .gallery-icon img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); display: block; transition: transform .3s ease, box-shadow .3s ease; }
.wp-block-gallery figure:hover img, .gallery-item:hover img { transform: translateY(-3px); box-shadow: 0 16px 36px -16px rgba(0,0,0,.6); }
.wp-block-gallery figcaption, .gallery-item .wp-caption-text { font-size: 13px; color: var(--text-mut); margin-top: 8px; text-align: center; }
.gallery-item dt { padding: 0; }
@media (max-width: 900px) { .wp-block-gallery, .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wp-block-gallery, .gallery { grid-template-columns: 1fr; } }

/* ---------- 导航下拉（实景展示） ---------- */
.nav__item { position: relative; }
.nav__submenu { position: absolute; top: 100%; left: 0; min-width: 168px; background: var(--bg-800); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px; display: none; flex-direction: column; gap: 2px; box-shadow: 0 18px 44px -18px rgba(0,0,0,.75); z-index: 60; }
.nav__item.has-children:hover .nav__submenu,
.nav__item.has-children:focus-within .nav__submenu { display: flex; }
.nav__submenu a { padding: 9px 12px; border-radius: 9px; white-space: nowrap; font-size: 14.5px; }
.nav__submenu a:hover, .nav__submenu a.is-active { background: rgba(255,255,255,.07); color: var(--text); }
/* 移动端：展开菜单里子项纵向平铺 */
.nav__links.is-open .nav__submenu { position: static; display: flex; box-shadow: none; border: 0; background: transparent; padding: 2px 0 2px 14px; }

/* ---------- 首页：物流 / 质检 单图展示模块 ---------- */
.home-showcase { gap: 24px; }
/* 物流与质检并排时两栏轮播框同高，避免左扁右方显得一大一小 */
.home-showcase .carousel { aspect-ratio: 4 / 3; }
.showcase-card { display: flex; flex-direction: column; background: var(--bg-800, #142033); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.showcase-card:hover, .showcase-card:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 50px -28px rgba(0,0,0,.8); border-color: var(--gold); }
.showcase-card__media { display: block; overflow: hidden; background: #0f172a; }
.showcase-card__media img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.showcase-card:hover .showcase-card__media img { transform: scale(1.04); }
.showcase-card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; }
.showcase-card__cat { align-self: flex-start; font-size: 12.5px; letter-spacing: .08em; color: var(--gold); border: 1px solid var(--gold); border-radius: 999px; padding: 3px 12px; }
.showcase-card__title { font-size: 20px; font-weight: 700; margin: 2px 0 0; }
.showcase-card__desc { color: var(--muted, #9fb0c3); font-size: 14.5px; line-height: 1.65; }
.showcase-card__more { margin-top: 4px; font-weight: 600; color: var(--gold); }
.showcase-card:hover .showcase-card__more { text-decoration: underline; }
.showcase-card__ports { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.showcase-card__ports > span { font-size: 13px; color: var(--text-soft, #c3d0de); background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; }

/* 物流专门页：图片墙 */
.media-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.media-wall__item { margin: 0; border-radius: var(--r-md); overflow: hidden; background: var(--bg-800, #142033); border: 1px solid var(--border); }
.media-wall__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.media-wall__item figcaption { padding: 12px 14px; font-size: 13.5px; color: var(--muted, #9fb0c3); }
@media (max-width: 760px) { .media-wall { grid-template-columns: 1fr; } }

/* 物流专门页：视频占位 / 视频 */
.video-placeholder { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; display: grid; place-content: center; text-align: center; gap: 14px; padding: 24px; background: linear-gradient(135deg, #16202e, #0f172a); border: 1px dashed rgba(255,255,255,.2); }
.video-placeholder__icon { width: 72px; height: 72px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #0f172a; background: var(--gold); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); }
.video-placeholder__text { font-size: 18px; font-weight: 700; color: #e7eef7; margin: 0; }
.video-placeholder__hint { font-size: 13.5px; color: #9fb0c3; max-width: 460px; margin: 0 auto; line-height: 1.6; }
.logi-video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); display: block; background: #000; }

/* 卡片序号（克制版，替代 emoji 图标） */
.card__num { font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--gold); margin-bottom: 4px; }
@media (max-width: 760px) { .home-showcase { grid-template-columns: 1fr; } }

/* ---------- 矿种板块：视频占位（素材整理后替换为 <video> 或嵌入） ---------- */
.video-placeholder { display: grid; place-items: center; min-height: 170px; border: 1px dashed var(--border); border-radius: var(--r-md); background: var(--bg-800); color: var(--text-mut); font-size: 14px; padding: 24px; text-align: center; line-height: 1.6; }
.gallery-item .video-placeholder { min-height: 100%; width: 100%; }

/* ---------- 矿种板块：产品目录卡片（整卡可点击） ---------- */
.card.product-link { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card.product-link:hover { transform: translateY(-4px); box-shadow: 0 22px 50px -28px rgba(0,0,0,.8); border-color: var(--gold); }

/* ======================================================================
   美化增强版 (v2) —— 在母版基础上叠加，可整体删除还原
   设计意图：强化“金+青”高级质感，增加区块节奏与悬浮微交互
   ====================================================================== */

/* 1) 区块标题：金→青渐变点缀条，提升层级与精致度 */
.section-head { position: relative; }
.section-head h2 { position: relative; padding-bottom: 16px; }
.section-head h2::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 56px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
}
.section-head h2.about-title { font-size: clamp(18px, 2.1vw, 22px); line-height: 1.3; }
.section-head .eyebrow { margin-bottom: 14px; }

/* 2) Hero 主标题强调词：金→青渐变文字，更具高级感（第一段 h1 与第二段 h2 一致） */
.hero h1 em, .hero .hero__title p em, .hero .hero__title h2 em {
  background: linear-gradient(115deg, var(--gold-soft), var(--teal-soft));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* 3) 卡片 / 产品卡：悬浮金辉光 + 内层高光，质感升级 */
.card, .product, .card.product-link { box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; }
.card:hover, .product:hover, .card.product-link:hover {
  border-color: rgba(224,169,78,.55);
  transform: translateY(-4px);
  box-shadow: var(--shadow), var(--shadow-glow);
}

/* 4) 卡片图标：渐变底 + 描边，更精致 */
.card__icon {
  background: linear-gradient(135deg, rgba(224,169,78,.20), rgba(43,179,163,.14));
  border: 1px solid rgba(224,169,78,.28);
}

/* 5) 产品图框：顶部微光，画面更通透 */
.product__art {
  background: radial-gradient(120% 90% at 50% 0%, rgba(224,169,78,.05), var(--bg-800));
}

/* 6) 流程步骤卡：悬浮上浮 + 金边 */
.flow__step { transition: .25s ease; }
.flow__step:hover { transform: translateY(-3px); border-color: rgba(224,169,78,.42); box-shadow: var(--shadow); }
.flow__step::before { color: var(--gold-soft); }

/* 7) CTA 横幅：静态金辉光 + 顶部流光，成为视觉收尾锚点 */
.cta-band { position: relative; overflow: hidden; border-color: rgba(224,169,78,.35); box-shadow: var(--shadow-glow); }
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 240px at 12% -20%, rgba(224,169,78,.16), transparent 60%),
              radial-gradient(600px 240px at 92% 120%, rgba(43,179,163,.14), transparent 60%);
}

/* 8) 首页区块节奏：区块之间加一条居中渐隐分隔线，增强层次 */
body.home .section { position: relative; }
body.home .section + .section::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1100px, 92%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* 9) 图片类卡片（物流/质检展示卡）悬浮也带金辉光，统一体验 */
.showcase-card:hover, .showcase-card:focus-visible {
  box-shadow: 0 22px 50px -28px rgba(0,0,0,.8), var(--shadow-glow);
}

/* 10) 文章摘要卡悬浮：金辉光一致化 */
.post-card:hover, .post-card:focus-visible {
  box-shadow: 0 16px 40px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(224,169,78,.30);
}

/* ======================================================================
   联系入口：企业微信悬浮 + 页脚关注区 + 联系页二维码墙
   企业微信活码已上线；公众号 / 抖音 / 小红书为预留位（YZC_SOCIAL_READY 开关控制）
   ====================================================================== */

/* 通用二维码占位（虚线框，未来替换为 <img src="...">） */
.qr-placeholder {
  display: grid; place-items: center; text-align: center; gap: 4px;
  border: 2px dashed var(--border); border-radius: var(--r-sm);
  background: var(--bg-800); color: var(--text-mut); padding: 12px; line-height: 1.4;
}
.qr-placeholder b { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.qr-placeholder small { font-size: 11px; opacity: .85; }
.qr-placeholder--lg { width: 150px; height: 150px; }
.fab__qr { display: block; width: 150px; max-width: 100%; height: auto; margin: 0; border-radius: 10px; }
a.fab__qr-link { display: block; width: 150px; max-width: 100%; margin: 10px auto 2px; cursor: pointer; }
a.fab__qr-link:hover .fab__qr { opacity: .92; }
.contact-qr__img { display: block; width: 150px; height: auto; margin: 0; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }
a.contact-qr__link { display: block; width: 150px; margin: 0 auto 14px; cursor: pointer; }
a.contact-qr__link:hover .contact-qr__img { opacity: .92; }
.qr-placeholder--sm { width: 74px; height: 74px; }

/* 企业微信右下角悬浮按钮（<details> 原生折叠，零 JS） */
.fab { position: fixed; right: 22px; bottom: 22px; z-index: 80; }
.fab > summary {
  list-style: none; cursor: pointer; width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; border: 0;
  background: linear-gradient(135deg, var(--teal), var(--teal-soft));
  box-shadow: 0 14px 30px -10px rgba(0,0,0,.45); transition: transform .2s ease;
}
.fab > summary::-webkit-details-marker { display: none; }
.fab > summary:hover { transform: translateY(-2px) scale(1.05); }
.fab > summary:focus-visible { outline: 2px solid var(--teal-soft); outline-offset: 3px; }
.fab__panel {
  position: absolute; right: 0; bottom: 70px; width: 260px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 16px; box-shadow: var(--shadow); display: none;
}
.fab[open] .fab__panel { display: block; }
.fab__panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.fab__panel-head strong { font-size: 15px; color: var(--text); }
.fab__panel-head span { font-size: 11px; color: var(--text-mut); }
.fab__cta {
  display: block; margin-top: 12px; padding: 10px 14px; border-radius: 8px;
  background: linear-gradient(135deg, var(--teal), var(--teal-soft)); color: #fff;
  text-align: center; font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: transform .15s ease;
}
.fab__cta:hover { transform: translateY(-1px); }
.fab__tip { margin-top: 10px; font-size: 12.5px; color: var(--text-mut); line-height: 1.6; }
/* 英文站 WhatsApp 悬浮钮面板没有二维码，CTA 是面板内第一个内容 → 去掉为二维码预留的上间距 */
.fab--wa .fab__cta { margin-top: 0; }
.fab--wa .fab__tip a { color: var(--gold-soft); }

/* ============================================================
 * 英文站 WhatsApp 悬浮钮配色（2026-09-29）
 *
 * 改用 WhatsApp 品牌绿 #25D366（原为站点青 --teal）。
 * 理由：悬浮钮是功能性入口、不参与站点主色体系，绿色气泡是海外用户的
 * 条件反射；且 #25D366 与站点青同属青绿系，换色不突兀。
 *
 * 实现方式：**在 .fab--wa 作用域内重定义 --teal / --teal-soft**，
 * 而非另写 background 规则。因为原有的两处背景都引用这两个变量：
 *   ① 桌面：.fab > summary { background: linear-gradient(135deg, var(--teal), var(--teal-soft)) }
 *   ② 窄屏（≤680px）：.fab > summary { background: color-mix(in srgb, var(--teal) 60%, transparent) }
 *      —— 移动端刻意用「半透明 + backdrop-filter 毛玻璃」，让按钮更轻、不遮挡内容
 *   CSS 变量按元素作用域解析、与规则书写顺序无关 → 一处重定义即可同时生效，
 *   并且**自动保留移动端的半透明毛玻璃设计**，无需重复编写、也不受后续规则顺序影响。
 *   同页面其他元素不受影响（CSS 变量只向下继承）。
 *
 * 色值：#1da851（深端）→ #25D366（WhatsApp 官方主绿，亮端）。
 *   沿用原设计的「深→亮」渐变方向；深端取同色相压暗版而非官方深青绿 #128C7E，
 *   避免又偏回青调。深端也保证浅色模式下白图标/白字的对比度（#25D366 单独用
 *   白字对比度仅约 1.75，偏紧）。
 *
 * 只作用于 .fab--wa（英文站专用）。中文站的悬浮钮是**企业微信**
 * （.fab + .fab__qr 二维码面板），保持原青色不变 —— 两者由 header.php
 * 按语言分支输出，类名不同，互不影响。
 * ============================================================ */
.fab--wa { --teal: #1da851; --teal-soft: #25D366; }

/* 页脚「关注我们」区 */
.footer__social {
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.footer__social-intro { max-width: 320px; }
.footer__social-intro h4 { font-size: 15px; letter-spacing: .08em; color: var(--text); margin-bottom: 6px; }
.footer__social-intro p { font-size: 13.5px; color: var(--text-mut); line-height: 1.6; }
.footer__social-list { display: flex; gap: 14px; flex-wrap: wrap; }
.social-card {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 16px; transition: border-color .2s ease, transform .2s ease;
}
.social-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.social-card__icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: #fff; }
.social-card__icon--wx { background: #07C160; }
.social-card__icon--dy { background: #161823; }
.social-card__icon--xhs { background: #FF2442; }
.social-card__body { display: flex; flex-direction: column; gap: 3px; }
.social-card__body strong { font-size: 14.5px; color: var(--text); }
.social-card__body small { font-size: 12px; color: var(--text-mut); }
.social-card__link { font-size: 12.5px; font-weight: 600; color: var(--teal); }

/* 页脚「产业链伙伴 / 行业重点企业」区 */
.footer__partners { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.footer__partners h4 { font-size: 14px; letter-spacing: .08em; color: var(--text); margin: 0 0 6px; }
.footer__partners-note { font-size: 12px; color: var(--text-mut); margin: 0 0 12px; }
.partner-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.partner-links a { font-size: 13.5px; color: var(--text-mut); text-decoration: none; transition: color .2s ease; }
.partner-links a:hover { color: var(--teal); }

/* 联系页二维码墙 */
.contact-qr { margin-top: 0; }
/* 桌面：左栏(介绍) + 右栏(表单)，二维码作为第三个网格项落在左栏底部 */
.contact-layout { grid-template-columns: 1fr 1fr; grid-template-areas: "intro form" "qr form"; align-items: start; }
.contact-intro { grid-area: intro; min-width: 0; }
.contact-form-wrap { grid-area: form; min-width: 0; }
.contact-qr-block { grid-area: qr; min-width: 0; }
.contact-qr h3 { font-size: 19px; margin-bottom: 18px; color: var(--text); }
.contact-qr__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, max-content)); gap: 18px; justify-content: start; }
.qr-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px;
  text-decoration: none; color: inherit; transition: border-color .2s ease, transform .2s ease;
}
.qr-card:hover { border-color: var(--teal); transform: translateY(-2px); }
.qr-card strong { font-size: 15px; color: var(--text); }
.qr-card small { font-size: 12.5px; color: var(--text-mut); }

/* 窄屏适配 */
@media (max-width: 680px) {
  .fab { right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
  .fab > summary {
    width: 44px; height: 44px;
    background: var(--teal);
    background: color-mix(in srgb, var(--teal) 60%, transparent);
    border: 1px solid rgba(255,255,255,.35);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .fab__panel, .fab[open] .fab__panel { display: none !important; }
  .footer__social { flex-direction: column; align-items: flex-start; }
  .contact-qr__grid { grid-template-columns: repeat(2, 1fr); }
  /* 手机端：介绍 → 表单 → 二维码，二维码排在表单下方 */
  .contact-layout { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "qr"; }
}
@media (max-width: 420px) {
  .contact-qr__grid { grid-template-columns: 1fr; }
}

/* 类目页翻页导航（与商务蓝 .pager 协调） */
.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 34px 0 8px; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--text-soft); font-weight: 600; font-size: 14px; text-decoration: none; transition: border-color .2s ease, color .2s ease; }
.pager a:hover { border-color: var(--gold); color: var(--gold); }
.pager .current { background: var(--gold); border-color: var(--gold); color: #0f172a; }
.pager .dots { border: 0; color: var(--text-mut); }

/* ============================================================
   浅色模式（data-theme="light"）—— 2026-09-02 借鉴英文站浅色模板
   视觉语言：浅蓝主调 + 整页细蓝网格（56px 间距）+ Hero 工业线稿图 +
            英文站风格标签（uppercase + 大字距 + 金）+ 底部深青 + 蓝色网格。
   默认（无 data-theme）= 原有深色 + 琥珀金方案，行为完全不变。
   由页眉切换按钮控制，localStorage 持久化（见 header.php / main.js）。
   ============================================================ */
/* ---- 1) 语义变量覆盖：浅蓝主调（借鉴英文站浅色模板）---- */
[data-theme="light"] {
  /* 层次阶梯：浅蓝主调，英文站风格。极浅蓝白 + 纯白卡片 + 浅蓝带 */
  --bg-900: #e0eaf5;   /* 顶/底沉 */
  --bg-800: #eef4fb;   /* 主底 */
  --bg-700: #d8e6f4;   /* 底沉 */
  --bg-600: #c8d9eb;   /* 备用深浅带 */
  --surface: #ffffff;   /* 卡片 */
  --surface-2: #f1f6fc;
  --border: #c9d6e4;
  --border-soft: #dbe4ee;

  --text: #101a26;       /* 深蓝黑 */
  --text-soft: #4c5b6e;  /* 正文 */
  --text-mut: #66768c;   /* 弱化 */
  --link: #0b6d62;       /* 链接=品牌青（蓝主调下青绿作为辅色仍可读）*/
  --link-hover: #07554d;

  /* 金/青压深：金端参考英文站 oklch(72% .17 62) ≈ #d99842，更暖更橙 */
  --gold: #b07d2c;
  --gold-soft: #d99842;  /* 浅底用 */
  --teal: #0b6d62;
  --teal-soft: #0e7d70;
  --up: #12805a;
  --down: #c0362c;

  --shadow: 0 18px 50px -22px rgba(16, 26, 38, .22);
  --shadow-glow: 0 0 0 1px rgba(21, 82, 150, .14), 0 20px 60px -28px rgba(21, 82, 150, .18);
}

/* ---- 2) 页面底：浅蓝垂直渐变 + 整页细蓝色网格（英文站灵魂）---- */
[data-theme="light"] body {
  background:
    /* 1px 蓝网格，56px 间距 */
    linear-gradient(rgba(21, 82, 150, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 82, 150, .07) 1px, transparent 1px),
    /* 顶深底浅蓝渐变 */
    linear-gradient(180deg, #d8e6f4 0%, #eef4fb 18%, #eef4fb 74%, #d2dfef 100%);
  background-size: 56px 56px, 56px 56px, 100% 100%;
  background-attachment: scroll, scroll, scroll;
  min-height: 100vh;
  color: var(--text);
}

/* ---- 3) 导航栏：浅色毛玻璃（已删 .nav::after 渐变细线）---- */
[data-theme="light"] .nav {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(21, 82, 150, .16);
}
[data-theme="light"] .nav.is-scrolled { background: rgba(255, 255, 255, .96); }
/* 浅色：页眉「免费寄样」改为白底 + 深蓝黑字，做中性次按钮。
   历史：暗金 #8a5c17 → 品牌青绿实底白字（第 7 轮，为与浅色下 .btn--primary 的青绿统一，
   见本文件「9) 通用按钮」段）。但统一后，页眉「免费寄样」与「免费询价」两个都是青绿实底，
   主次不分，用户反馈「2 个都是绿色不好看」→ 第 8 轮改回中性白底黑字。
   #101a26 on #ffffff = 17.53:1。导航栏是白色毛玻璃，白底按钮靠描边 + 微阴影立边界，
   否则白底白边会糊在导航栏里看不见。hover 转品牌青绿字 + 青绿描边（6.22:1）。 */
[data-theme="light"] .nav__cta .btn--ghost {
  background: #ffffff;
  border-color: rgba(21, 82, 150, .30);
  color: var(--text);
  box-shadow: 0 2px 8px -3px rgba(21, 82, 150, .20);
}
[data-theme="light"] .nav__cta .btn--ghost:hover {
  background: #ffffff;
  border-color: var(--teal);
  color: var(--teal);
  box-shadow: 0 3px 12px -3px rgba(11, 109, 98, .30);
}
/* 展开菜单里的子项 hover：原 rgba(255,255,255,.07) 在浅底等于没有反馈 */
[data-theme="light"] .nav__submenu a:hover,
[data-theme="light"] .nav__submenu a.is-active { background: rgba(21, 82, 150, .08); color: var(--text); }

/* ---- 4) Hero：浅蓝渐变 + 工业线稿图（hero-line.webp）+ 蓝色网格 + 弱光晕 ---- */
/* 图在右下 60%，左侧留白给标题 */
[data-theme="light"] .hero {
  position: relative;
  color: var(--text);
  background:
    /* 蓝色细网格 */
    linear-gradient(rgba(21, 82, 150, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 82, 150, .06) 1px, transparent 1px),
    /* 左上渐隐遮罩（保证文字可读） */
    linear-gradient(105deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .78) 38%, rgba(255, 255, 255, .10) 65%, rgba(255, 255, 255, 0) 100%),
    /* 工业线稿图 */
    url('assets/img/hero-line.webp') right bottom / cover no-repeat,
    /* 底色：极浅蓝渐变 */
    linear-gradient(180deg, #d8e7f5 0%, #e3edf8 55%, #eaf2fa 100%);
  background-size: 56px 56px, 56px 56px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: scroll, scroll, scroll, scroll, scroll;
}
/* 容器抬高 z-index，避免被网格层盖 */
[data-theme="light"] .hero > .container { position: relative; z-index: 1; }
/* 底部 110px 渐隐到下一区块 */
[data-theme="light"] .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px;
  z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(232, 240, 250, 0), #d8e6f4);
}

/* Hero 文字转深色 */
[data-theme="light"] .hero .hero__title h1,
[data-theme="light"] .hero .hero__title p,
[data-theme="light"] .hero .hero__title h2 { color: var(--text); }
[data-theme="light"] .hero .lead { color: var(--text-soft); }
[data-theme="light"] .hero__stat b,
[data-theme="light"] .hero__stat b small { color: var(--text); }
[data-theme="light"] .hero__stat span { color: var(--text-soft); }
[data-theme="light"] .hero .eyebrow { color: #07554d; }   /* 强对比小标签 */

/* 强调词：英文站风格——纯金到深蓝渐变文字 */
[data-theme="light"] .hero .hero__title h1 em,
[data-theme="light"] .hero .hero__title p em,
[data-theme="light"] .hero .hero__title h2 em {
  background: linear-gradient(115deg, var(--gold) 0%, #0b6d62 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* 信任胶囊：白卡 + 蓝色描边 + 阴影 */
[data-theme="light"] .hero__trust {
  background: rgba(255, 255, 255, .88);
  border-color: rgba(21, 82, 150, .22);
  box-shadow: 0 14px 34px -26px rgba(16, 26, 38, .45);
}
[data-theme="light"] .hero__trust li {
  border-color: rgba(21, 82, 150, .20);
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 8px 20px -16px rgba(16, 26, 38, .40);
}
[data-theme="light"] .hero__trust li .num { color: var(--teal); }

/* ---- 5) 标签（eyebrow / 章节眉）：英文站风格——uppercase + 大字距 + 金色 ---- */
[data-theme="light"] .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: 12px;
  color: var(--gold);
}
[data-theme="light"] .eyebrow--alt,
[data-theme="light"] .section-head__eyebrow { color: var(--teal); }

/* ---- 6) 区块过渡：偶数区块叠浅蓝白带（中部过渡）---- */
[data-theme="light"] body.home #main > .section:nth-of-type(even) {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .88) 9%,
    rgba(255, 255, 255, .88) 91%,
    rgba(255, 255, 255, 0) 100%);
}

/* ---- 7) 卡片常态阴影 ---- */
[data-theme="light"] .card:not(:hover),
[data-theme="light"] .product:not(:hover),
[data-theme="light"] .showcase-card:not(:hover),
[data-theme="light"] .post-card:not(:hover) {
  box-shadow: 0 1px 2px rgba(16, 26, 38, .05), 0 12px 28px -22px rgba(16, 26, 38, .40);
}
/* 卡片标题（硬编码白修复） */
[data-theme="light"] .post-card__title { color: var(--text); }
[data-theme="light"] .showcase-card__desc { color: var(--text-soft); }

/* ---- 8) 底部 CTA：深青底 + 蓝色细网格（英文站风格）---- */
[data-theme="light"] body.home .cta-band {
  color: #ffffff;
  background:
    linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px),
    linear-gradient(135deg, #0b6d62 0%, #149a8b 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  border: 0;
  box-shadow: 0 24px 60px -30px rgba(11, 109, 98, .55);
}
/* CTA 标题/副标白字 */
[data-theme="light"] body.home .cta-band h2 { color: #ffffff; }
[data-theme="light"] body.home .cta-band .lead { color: rgba(255, 255, 255, .85); }
/* CTA 标签金色 */
[data-theme="light"] body.home .cta-band .eyebrow { color: var(--gold-soft); }

/* CTA 按钮：白底青字（深青底上对比 8.69） */
[data-theme="light"] body.home .cta-band .btn--primary {
  background: #ffffff;
  color: #07554d;
  border-color: #ffffff;
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, .45);
}
[data-theme="light"] body.home .cta-band .btn--primary:hover {
  background: #f2fbf9;
  color: #04443e;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
}

/* ---- 9) 通用按钮：浅底对比度 ---- */
[data-theme="light"] .btn--primary {
  background: var(--teal);
  color: #ffffff;
}
[data-theme="light"] .btn--teal,
[data-theme="light"] .btn--gold { color: #ffffff; }

/* ---- 10) 链接色 ---- */
[data-theme="light"] a:not([class]) { color: var(--link); }

/* ---- 11) 页脚：浅色下跟随全局浅色变量（2026-09-03 改浅底，不再整块反转深色）
   --text-mut 单独压深：全局 #66768c 在本页脚底 #dfe9f4 上只有 4.18，改 #55677d = 4.72。
   链接 hover 改 --teal：原 --gold-soft #d99842 在浅底仅 2.14，等于看不见。 ---- */
[data-theme="light"] .footer {
  --text-mut: #55677d;
  background: linear-gradient(180deg, #eaf1f9 0%, #dfe9f4 100%);
  border-top-color: var(--border);
}
[data-theme="light"] .footer a:hover { color: var(--teal); }
/* 二维码占位：浅底上用白块 + 实色虚线，避免与页脚底糊在一起 */
[data-theme="light"] .footer .qr-placeholder {
  background: #ffffff;
  border-color: #b9cadb;
}

/* ---- 12) 杂项硬编码修复（按场景修补）---- */
[data-theme="light"] .nav__cta { color: var(--text); }
/* 品牌标记：浅色下随主色改青绿底（页面主按钮 .btn--primary 也是青绿实底，保持一套）。
   底变深 → 图标必须反转为白，沿用深蓝黑 var(--text) 只有 2.82 会看不见。
   白 #fff on --teal #0b6d62 = 6.22，on --teal-soft #0e7d70 = 5.02。
   深色模式不动：金渐变底 + #14171d（8.51）。 */
[data-theme="light"] .brand__mark {
  background: linear-gradient(135deg, var(--teal), var(--teal-soft));
  color: #ffffff;
}
/* 页脚已不再做深色反转，品牌标记沿用上面全局浅色规则（青绿底 + 白图标 6.22）。 */
[data-theme="light"] .skip-link { color: #ffffff; }
[data-theme="light"] .pager span,
[data-theme="light"] .pager a { color: var(--text); }
[data-theme="light"] .video-placeholder { background: #e8eef6; color: var(--text-soft); }
[data-theme="light"] .video-placeholder__icon,
[data-theme="light"] .video-placeholder__text,
[data-theme="light"] .video-placeholder__hint { color: var(--text-soft); }
[data-theme="light"] .social-card__title { color: var(--text); }
[data-theme="light"] .social-card { background: #ffffff; border-color: var(--border); }
[data-theme="light"] .carousel__btn { color: var(--text); }
[data-theme="light"] .carousel__cap { color: var(--text); }
[data-theme="light"] .qc-slide__name { color: var(--text); }
[data-theme="light"] .qc-slide__desc { color: var(--text-soft); }
[data-theme="light"] .fab > summary,
[data-theme="light"] .fab__cta { color: #ffffff; }
[data-theme="light"] .post-card__cat,
[data-theme="light"] .showcase-card__tag { color: var(--teal); }
[data-theme="light"] .media-wall { background: #e8eef6; }
[data-theme="light"] .logi-video { background: #e8eef6; }

/* 硬编码白卡片描边微调 */
[data-theme="light"] .card.product-link:hover { box-shadow: 0 22px 50px -28px rgba(16, 26, 38, .30); }

/* ---- 13) 分隔线：与新蓝调一致 ---- */
[data-theme="light"] body.home .section + .section::before {
  background: linear-gradient(90deg, transparent, rgba(21, 82, 150, .20) 25%, rgba(21, 82, 150, .20) 75%, transparent);
}
[data-theme="light"] body.home #main > .section:last-of-type::before { display: none; }

/* ============================================================
   7) 2026-09-02 补充修复：页眉标签配色统一 + Hero 次按钮隐形
   ① 移动端页眉「免费寄样」：放大到 34px 高（原约 20px，与右侧 38px 方圆钮比例失调）；
      浅色下由暗金改为品牌青绿实底白字，与页面主按钮 .btn--primary 统一。
   ② Hero 次按钮「查看矿产产品」：母版 .hero .btn--ghost 是
      color:#fff + rgba(255,255,255,.35) 边 + rgba(255,255,255,.05) 底，
      深色 hero 上正常，浅色 hero 底变浅蓝后白字白底完全隐形。
      浅色下改白底深字 + 蓝灰描边，hover 转青绿。
   ============================================================ */

/* ---- ② Hero 次按钮：浅色下从「白字白边」反转为「深字蓝灰边」 ---- */
[data-theme="light"] .hero .btn--ghost {
  border-color: rgba(21, 82, 150, .42);
  color: var(--text);
  background: rgba(255, 255, 255, .78);
}
[data-theme="light"] .hero .btn--ghost:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: #ffffff;
}
/* 平板/手机 Hero：按钮内边距略放大，避免浅底小方块显得局促 */
@media (max-width: 960px) {
  [data-theme="light"] .hero__cta .btn { padding: 10px 16px; font-size: 14px; }
}


/* 真实图形标志 2026-09-18 */
/* 去掉占位方块的渐变底与圆角，图形按现有尺寸规则(桌面30px/手机26px)缩放；
   深色主题显示深底版、浅色主题显示浅底版。 */
.brand__mark,
[data-theme="light"] .brand__mark { background: none; border-radius: 0; color: inherit; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand__mark .mark-on-light { display: none; }
[data-theme="light"] .brand__mark .mark-on-dark { display: none; }
[data-theme="light"] .brand__mark .mark-on-light { display: block; }

/* 页头显示图形标志 2026-09-18：主题原为 .nav .brand__mark{display:none}（桌面只留文字），
   现改为与文字并排显示；桌面 34px，≤680px 沿用主题 26px 规则。 */
.nav .brand__mark { display: inline-flex; width: 34px; height: 34px; }
@media (max-width: 960px) { .nav .brand__mark { width: 30px; height: 30px; } }

/* ============================================================
 * 英文站移动端页眉修正（2026-09-24）
 * 问题：英文品牌名与导航标签比中文长得多。390px 视口下实测
 *   .brand 中文 134px / 英文 249px，
 *   导致 .nav__cta（Request Sample + 深浅切换 + 语言钮 + 汉堡）
 *   右边界到 525px，超出视口 135px 被裁掉；
 *   .msub 的 6 等分 63px 格子装不下 "Procurement Guide" 这类标签，
 *   相邻项文字互相压字。
 * 处理：全部只作用于 html[lang^="en"]（英文站 lang="en-US"，中文站 lang="zh-CN"），
 *   中文站保持像素级不变。
 * ============================================================ */
.brand__short { display: none; }

  @media (max-width: 960px) {
    /* 快捷导航条：标签按内容宽度排布（不收缩）+ 横向滑动，项间 padding 0 10px 保证间距。
       英文站自 2026-09-24 即用此法（标签长短不一，等宽压缩会压字）。
       🔴 2026-09-30：中文站因导航新增「实时价格」变 7 项，390px 下等宽分栏每格仅 ~55px，
       文字粘连（「矿产产品实时价格采购知识」挤成一条）→ 中文站同样改此法（老皮反馈）。 */
    .msub__item { flex: 0 0 auto; padding: 0 10px; }
  }

/* 品牌名：英文全称「JinNianHua International Trade」261px 太长，本区间改用
   短名 JinNianHua（113px）。
   下限 360px —— 与中文站的隐藏断点对齐（≤359px 时由下方全局规则隐藏品牌文字）。
   ⚠️ 2026-09-29 修订：原为 `@media (max-width: 680px)` + 另一条 `@media (max-width:
   430px)` 把品牌文字整个隐藏。当时的前提是页眉有四个控件（品牌 + Request
   Sample + 深浅切换 + **语言钮** + 汉堡），语言钮已于 9-29 移除（MEMCN_SHOW_LANG_SWITCH
   =false），腾出约 33px。CDP 实测：语言钮移除后，360/375/390/430px 显示品牌短名
   均零溢出（340px 起即放得下），故把下限收到 360px，与中文站一致。
   ✅ 2026-10-08 恢复语言钮：实测**下限无需上调，360px 保持不动**。
   原注记「需上调到 390px（实测 373px）」的前提，是语言钮被下方 ≤680px 的
   `html[lang^="en"] .nav__cta .btn--ghost{padding:0 10px}` 一并套住而宽到 47px；
   该条本意只针对 Request Sample，已改为 `:not(.lang-btn)` → 语言钮回落
   `padding:0 4px`（英文 35px，与中文站同源口径）。CDP 实测：
     ≤359px 只留标志 右留白 16px ✓ ｜ 360–369px 短名 6–15px ｜ ≥370px 恢复 16px ✓
     （375 / 390 / 414 / 430 全为标准 16px）
   ⚠️ 日后若语言钮再变宽（换成长文案、加图标），必须重新复测 360–375px 档。 */
@media (min-width: 360px) and (max-width: 680px) {
  html[lang^="en"] .brand__long { display: none; }
  html[lang^="en"] .brand__short { display: inline; }
}

@media (max-width: 680px) {
  /* Request Sample 比「免费寄样」宽约 50px，内边距与字号再收一档，
     保证 320–430px 下页眉四个控件仍在单行内。
     注：本条**不设宽度下限** —— ≤359px 隐藏品牌文字后，CTA 仍需收窄才不溢出。 */
  /* 🔴 2026-10-08：加 :not(.lang-btn) —— 本条本意只收窄 Request Sample（ghost CTA，
     ≤960px 已隐藏），但语言钮同为 .btn--ghost 被一并套住 → 英文站 47px
     （中文站仅 27px），页眉因此被迫上调品牌名隐藏断点。排除后可回落
     ≤680 的 `.nav__cta .lang-btn{padding:0 4px}`，360px 起即放得下。 */
  html[lang^="en"] .nav__cta .btn--ghost:not(.lang-btn) { padding: 0 10px; font-size: 12px; }
}

/* 中文站 ≤359px（iPhone SE 1 代 320px 这类极窄屏）修复：
   「中文品牌名 134px + 免费寄样 82px + 深浅切换 38px + 语言钮 27px + 汉堡 38px
     + 4 处 6px 间距 + 两侧 16px 内边距」合计约 359px，
   即完整显示品牌名最少需要 359px 视口；375px 实测右边界 359，
   375px 以下（320/360）汉堡按钮会被挤出视口 → 访客打不开菜单。
   此宽度下隐藏品牌文字、只留图形标志（.brand 锚点已带 aria-label，
   无障碍与 SEO 不受影响），保证四个功能控件都在单行内。
   断点取 359 而不是 360：360px 实测刚好放得下（右边界 353），
   360px 是主流安卓机宽度，品牌名应保留。
   注意：只作用于 ≤359px，360px 及以上中文站保持原样。 */
@media (max-width: 359px) {
  .brand__long,
  .brand__short { display: none; }
}

/* ============================================================
 * 英文站首屏（hero）超宽裁切修复（2026-09-24）
 *
 * 现象：英文首页 390px 下 hero 标题「Middle East minerals / delivered to
 *   Chinese plants」被横向裁掉一半，两个 CTA 按钮也只露出一个。
 *
 * 成因（两个叠加）：
 *   1. .hero__grid 用 grid-template-columns: 1fr，而 1fr 的最小尺寸是
 *      min-content——标题被强制 nowrap（滑动轮播需要单行），英文长句的
 *      min-content 达 694px，把网格列撑到 694，连带 .hero__cta / .hero__stats
 *      一起超出视口 390。
 *   2. .hero .hero__title h1/p/h2 的 white-space: nowrap 让英文标题不换行，
 *      即使列宽正常也会溢出，再被 .hero__titles 的 overflow: hidden 裁掉。
 *      中文标题短（「把中东的优质矿产」8 字），从不触发。
 *
 * 处理：
 *   ① 网格列改 minmax(0, 1fr)：允许列收缩到容器宽度，不再被内容撑破。
 *      中文站原本就没有溢出（min-content < 容器宽），结果像素级不变。
 *   ② 仅英文站放开标题换行（html[lang^="en"] 作用域），中文站保持 nowrap。
 * ============================================================ */
.hero__grid { grid-template-columns: minmax(0, 1fr); }

html[lang^="en"] .hero .hero__title h1,
html[lang^="en"] .hero .hero__title p,
html[lang^="en"] .hero .hero__title h2 {
  white-space: normal;
  overflow-wrap: break-word;
}

/* 英文站 hero 标题字号（2026-10-08）
 * 新文案首屏最长行「Directly Sourced from Mines in Egypt and Jordan」45 字符，
 * 沿用中文站字号 clamp(34px,4.8vw,54px) 时桌面端会折行，且最长行占容器
 * 1440px→93%、1024px→98%、960px→99%、768px→100%（≥95% 视觉上就是顶到边）。
 * 故仅英文站、仅 ≥681px 收一档 clamp(28px,2.75vw,38px)。
 * 2026-10-08 二轮（老皮「文字挤压」）：文案砍掉冗余词（46→37 字符）
 *   后再收一档 → CDP 实测桌面端全部行占比 ≤60%。
 * ≤680px 保持原移动端规则 clamp(28px,8vw,40px) 不变（手机端本来就是多行折行）。
 * 中文站因 html[lang^="en"] 作用域，逐字节不受影响。 */
@media (min-width: 681px) {
  html[lang^="en"] .hero .hero__title h1,
  html[lang^="en"] .hero .hero__title p,
  html[lang^="en"] .hero .hero__title h2 {
    font-size: clamp(28px, 2.75vw, 38px);
  }
}

/* ============================================================
 * 英文站页眉「单行锁定」（2026-09-24）
 *
 * 现象（CDP 实测 1024 / 1280 / 1440 / 1680px 完全一致）：
 *   ① 品牌名 .brand__long「JinNianHua International Trade」17px 实测 261px，
 *      在全部桌面宽度都折成 2 行（高 53px，行高 29px）；再加 tagline 一行，
 *      .brand 实测高 76–95px，而 --nav-h 只有 60px → 文字溢出页眉 16–35px。
 *   ② .nav__links a 没有 nowrap，「Procurement Guide」(137px) 与
 *      「Industry News」(100px) 也全部折成 2 行，.nav__links 实测高 51px
 *      → 5 个单行 + 2 个双行混排，导航条高矮不齐。
 *   ③ 页眉可用内宽有硬上限：--maxw 1180 − 两侧 44px = 1136px，
 *      1440/1680px 视口下并不会变宽。故「只加 nowrap」会把整行需求推到
 *      1288px（溢出 152px），必须先收窄品牌与标签宽度。
 *
 * 处理（全部只作用于 html[lang^="en"]，中文站像素级不变）：
 *   ① 品牌行 1 由「JinNianHua International Trade」(261px) 精简为
 *      「JinNianHua」(≈93px)，行 2 副标题由「MIDDLE EAST MINERALS · CN」
 *      (261px) 改为「MINERAL TRADING」(≈155px) —— 见 header.php。
 *      → .brand 由 306px 降到约 200px，且两行都 nowrap。
 *   ② 导航标签精简为 Guides / News / Sites（见 header.php 的 $nav_en），
 *      并 nowrap → 每个标签恒为单行。
 *   ③ flex: none 防止 flex 收缩把 nowrap 的文字挤出容器（会横向溢出）。
 *
 * 收窄后实测：≥1080px 需求 970px < 可用 1136px；961–1079px 见下方规则。
 * ============================================================ */
html[lang^="en"] .brand,
html[lang^="en"] .nav__links,
html[lang^="en"] .nav__cta { flex: none; }

html[lang^="en"] .brand__long,
html[lang^="en"] .brand__short,
html[lang^="en"] .brand small,
html[lang^="en"] .nav__links a { white-space: nowrap; }

/* ============================================================
 * 桌面导航「紧凑区间」961–1139px 收紧（2026-09-24 重订）
 *
 * 页眉可用内宽有硬上限：--maxw 1180 − 两侧 44px = 1136px。
 * 视口从 961px 到 1139px，可用内宽 917–1095px，而两种语言的完整页眉
 * 自然宽度都超过它 → flex 收缩 → 标签内部折行（截图确认）：
 *   中文 1024px：「首页」被压成「首/页」上下堆叠，6 个标签全部 2 行；
 *   英文 1024px：「Procurement Guide」「Industry News」同样 2 行。
 *
 * 处理（纯留白 + 隐藏品牌副标题，不改字号、不改结构）：
 *   ① 导航项间距 30→14px、CTA 间距 14→8px、CTA 按钮内边距 20→12px；
 *   ② 中文站隐藏品牌副标题「MIDDLE EAST MINERALS · CN」(196px)——
 *      它是中文页眉最宽的一块（比品牌名 121px 还宽），此区间放不下；
 *      英文站副标题「MINERAL TRADING」仅 121px，仍有富余，故保留。
 *
 * 实测（961px，可用 917px）：中文 880px、英文 817px，均有余量。
 * ⚠️ 区间上限原取 1139 而非 1079：中文站同宽度原本也放不下（实测 1051px
 *    vs 可用 1036px @1080），一并覆盖。
 *
 * 🔴 2026-10-08 恢复页眉语言钮后重订：区间上限 1139 → 1179。
 *   ① 1140–1179px 原按「--maxw 未触顶、可用 ≥1096px」判定为宽裕，但 CDP 实测
 *      该区间中文页眉自然宽 241+570+266 = 1077px，仅剩 9.5px/gap —— 本就是勉强
 *      放下；语言钮再占 50+8px → 溢出 45px。故紧凑区间延长到容器触顶的临界
 *      1179px（--maxw 1180 含两侧 44px 内边距 → 视口 ≥1180 时可用恒为 1136px）。
 *   ② 语言钮在本区间无从腾挪（961px 可用 917px，原已 100% 满），故隐藏 ghost
 *      CTA「免费寄样」——与 ≤960px 既有规则同源（询价才是成交主入口，寄样为辅）。
 *   ③ ≥1180px 由紧随其后的 @media (min-width: 1180px) 块单独处理。
 *   实测（CDP 1440→360 全宽度）：中文 961px 余 43px、1440px 余 27px，均达标。
 * ============================================================ */
@media (min-width: 961px) and (max-width: 1179px) {
  html[lang^="zh"] .nav .brand small { display: none; }
  .nav__links { gap: 14px; }
  .nav__cta { gap: 8px; }
  .nav__cta .btn { padding-left: 12px; padding-right: 12px; }
  /* 语言钮同为 .btn--ghost，必须精确排除；本区间放不下「寄样 + 询价 + 语言钮」 */
  .nav__cta .btn--ghost:not(.lang-btn) { display: none; }
}

/* 完整桌面页眉（2026-10-08 恢复语言钮后新增）：容器触顶，可用内宽恒为 1136px。
   恢复语言钮后自然宽 1141px 超出 5px，故导航间距 30→22px、语言钮 50→39px，
   实测中文站余量 27px/gap、英文站 77px/gap。 */
@media (min-width: 1180px) {
  .nav__links { gap: 22px; }
  .nav__cta .lang-btn { min-width: 0; padding-left: 9px; padding-right: 9px; font-size: 13px; }
}

/* ============================================================
 * 英文站窄屏按钮防溢出兜底（2026-09-24）
 *
 * 现象：/en/knowledge/ 320px 下正文底部 CTA 按钮
 *   「Questions? Talk to our sales team →」实测 319px，
 *   而其容器内宽只有 276px（320 − 两侧 22px 内边距）。
 *
 * 后果放大：该按钮把整页内容撑到 scrollWidth 341px，
 *   而吸顶页眉是 width:100% 跟随内容宽度 → 页眉被拉到 342px，
 *   右侧「中文」按钮和汉堡一起被挤出视口（实测右边界 326 > 320）。
 *   即：正文一个按钮超宽 → 页眉点不到菜单。
 *
 * 成因：全局 .btn { white-space: nowrap }（style.css:114），
 *   中文按钮文案短不触发；英文文案长（34 字符）时 nowrap 让按钮
 *   停在 min-content 宽度，无法收缩。
 *
 * 处理：英文站 ≤420px 放开按钮换行——只在「放不下」时才换行，
 *   放得下（如页眉 Request Sample 115px）行为完全不变。
 *   ≥375px 时该按钮容器内宽 331px ≥ 319px，仍是单行原样。
 * ============================================================ */
@media (max-width: 420px) {
  html[lang^="en"] .btn {
    white-space: normal;
    max-width: 100%;
  }
}

/* 承接上条：页眉按钮必须保持单行。
   ≤420px 放开按钮换行后，页眉 .nav__cta 的总宽恰好等于可用宽度（256px），
   flex 会顺手把 Request Sample 从 115px 压到 113px → 文案被折成两行
   （实测 320px 出现「Request/Sample」「中/文」竖排），视觉变拥挤。
   正文按钮需要换行能力，页眉按钮不需要，故在此单独还原。 */
@media (max-width: 420px) {
  html[lang^="en"] .nav__cta .btn {
    white-space: nowrap;
    max-width: none;
  }
}

/* ============================================================
 * 小屏页眉为「语言切换」腾位（2026-09-28 老皮要求窄屏也要显示语言钮）
 *
 * 现象：≤960px 原本把 .btn--ghost 全隐藏，语言钮（同为 ghost）一并消失。
 *   恢复显示后，360px 这档最紧——中文站品牌名在 ≤359px 才隐藏，
 *   360–374px 是「品牌全名 + 询价 + 语言钮 + 深浅 + 汉堡」同屏的最坏组合，
 *   CDP 实测 .nav__cta 右边界 353px > 容器内边界 344px（右侧留白只剩 7px，贴边）。
 *
 * 处理：≤420px 收一档间距与内边距（gap 6→4、语言钮 4→3、询价钮 14→12），
 *   共腾出约 12px > 缺口 9px。≥375px 本就留白充足，收紧后只是更松，无害。
 *   中英两站同时生效（英文站 360–680px 用品牌短名 113px，比中文站全名 134px 更窄）。
 *
 * 🔴 2026-10-08 第二批（语言钮加宽到 34×34 后再次腾位）：本档再收
 *   ① 间距 gap 4→3（.nav__cta 内 3 处 = 3px）；
 *   ② 两个方块钮（深浅模式 / 汉堡）38→34，与其余按钮同高（2×4px = 8px）；
 *   合计再腾 11px，覆盖语言钮加宽的 8.5px 并留余量。
 *   副作用是好的：本档所有控件统一 34px 高（此前 38 vs 34 差 4px，本就不齐）。
 * ============================================================ */
@media (max-width: 420px) {
  .nav__cta { gap: 3px; }
  .nav__cta .lang-btn { padding-left: 3px; padding-right: 3px; }
  .nav__cta .btn--primary { padding-left: 12px; padding-right: 12px; }
  .nav__cta .theme-toggle,
  .nav__cta .nav__toggle { width: 34px; height: 34px; }
}

/* ============================================================
 * 英文站 hero「01–04」流程药丸窄屏修正（2026-09-24）
 *
 * 现象：≤960px 该条是 repeat(2, 1fr) 两列网格，390px 下每格仅 153px，
 *   而英文标签比中文长得多——「Third-Party Inspection」15px 实测 165px，
 *   加内边距 24px = 189px > 153px → 药丸内部折行，
 *   实测出现「Cross- / Border / Logistics」三行、四个高度不等的胶囊。
 *   中文标签 4 字（约 60px）不触发，故中文站不需要改。
 *
 * 处理：① ≤960px 英文标签 15→14px、内边距 22→14px（缩小约 10%……），
 *   ② ≤560px 改单列：实测 561–960px 两列每格 ≥238px 已够放，
 *      520px 起两列每格 218px 也仍够；≤560px 单列后每个胶囊独占 318px（390px 实测），
 *      四个标签全部单行，且总高度比「两列 + 折行」更矮（省掉折行行高）。
 * ============================================================ */
@media (max-width: 960px) {
  html[lang^="en"] .hero__trust li { font-size: 14px; padding: 10px 14px; }
}
@media (max-width: 560px) {
  html[lang^="en"] .hero__trust { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
 * 磷化工原料价格观察（/market-watch/，2026-09-29）
 *
 * 全部使用主题 CSS 变量 → 深浅两种模式自动同步，无需单独适配。
 * 涨跌配色按下标域惯例：**涨=红、跌=绿**（与主题既有 --up/--down 语义相反，
 * 那两个用于表单成功/错误提示，不用于行情，故另立变量）。
 * ============================================================ */
:root {
  --price-up:   #e0584f;
  --price-down: #34c08a;
}
[data-theme="light"] {
  --price-up:   #c0362c;
  --price-down: #12805a;
}

/* 关键品种摘要卡（首页模块复用同一套） */
.grid--price { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .grid--price { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .grid--price { grid-template-columns: minmax(0, 1fr); } }

.price-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.price-card__name { color: var(--text); font-weight: 600; font-size: 15px; }
.price-card__en { color: var(--text-mut); font-size: 11.5px; letter-spacing: .4px; }
.price-card__num {
  margin-top: 10px;
  color: var(--gold-soft);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.price-card__num i { font-style: normal; font-size: 12px; color: var(--text-mut); margin-left: 5px; font-weight: 400; }
.price-card__num.is-empty { font-size: 15px; color: var(--text-mut); font-weight: 400; }
.price-card__chg { font-size: 12.5px; margin-top: 3px; }
.price-card__chg.is-up   { color: var(--price-up); }
.price-card__chg.is-down { color: var(--price-down); }
.price-card__chg.is-flat { color: var(--text-mut); }

/* 完整价格表（基础版式复用 .spec-table） */
.price-table__group td {
  background: var(--surface-2);
  color: var(--gold);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1.2px;
  padding: 9px 14px;
}
.price-table__en { color: var(--text-mut); font-size: 11.5px; margin-left: 7px; }
.price-table__tag {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 5px;
  font-size: 11px;
  line-height: 1.65;
  background: rgba(224, 169, 78, .14);
  color: var(--gold-soft);
}
.price-table__tag--alt { background: rgba(43, 179, 163, .14); color: var(--teal-soft); }
.price-table__num {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-table__date { color: var(--text-mut); font-size: 13px; white-space: nowrap; }
.price-table__chg { margin-left: 8px; font-size: 12px; font-weight: 400; }
.price-table__chg.is-up   { color: var(--price-up); }
.price-table__chg.is-down { color: var(--price-down); }
.price-table__chg.is-flat { color: var(--text-mut); }

/* 解读段 */
.prose p { color: var(--text-soft); line-height: 1.85; margin-bottom: 14px; }
.prose p:last-child { margin-bottom: 0; }

/* 来源与免责 */
.notice {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-left: 3px solid var(--gold);
  border-radius: var(--r-sm);
  padding: 20px 22px;
}
.notice > b { display: block; color: var(--gold-soft); font-size: 14.5px; margin-bottom: 10px; }
.notice p { color: var(--text-mut); font-size: 13.5px; line-height: 1.8; margin-bottom: 8px; }
.notice p:last-child { margin-bottom: 0; }
.notice__meta { font-size: 12.5px; }

/* 首页价格模块标题：比默认 section-head h2 小一档（默认 clamp(26px,3.4vw,38px)） */
.section-head h2.price-title-sm { font-size: clamp(22px, 2.8vw, 30px); }

/* 价格表「点击获取报价」链接（磷矿石行，无公开日更时引导询价） */
.price-table__quote {
  color: var(--gold-soft);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  border-bottom: 1px dashed var(--gold);
  white-space: nowrap;
}
.price-table__quote:hover { color: var(--gold); border-bottom-style: solid; }

/* 手机端价格表适配（2026-09-30，老皮反馈：基准价被裁看不见）
   原 .spec-table 强制 min-width:700px，390px 视口下第 2、3 列被切。
   现：≤560px 取消最小宽、字号收紧一档、padding 收窄 → 3 列一屏放下；
   极窄（320px）仍放不下时由外层 .spec-table-wrap 横向滚动兜底。 */
@media (max-width: 560px) {
  .spec-table { min-width: 0; font-size: 12.5px; }
  .spec-table th,
  .spec-table td { padding: 9px 8px; }
  .price-table__en { font-size: 10px; margin-left: 5px; }
  .price-table__num { font-size: 12.5px; }
  .price-table__date { font-size: 11px; }
  .price-table__quote { font-size: 11px; }
  .price-table__chg { font-size: 10.5px; margin-left: 5px; }
  .price-table__group td { font-size: 11px; padding: 7px 8px; }
  .price-table__tag { font-size: 10px; padding: 0 5px; }
}

/* 价格页模块间距收紧（2026-09-30，老皮反馈「上下空太多」）
   仅作用于价格页（body class = page-template-page-market-watch，
   WP 自定义模板页的稳定类；实测 slug 类 page-market-watch 不输出），
   其它页面的 section 间距不受影响。
   section--tight 56px×2 + section-head 44px 的块间空隙在价格页显得松散。 */
body.page-template-page-market-watch .section--tight { padding: 22px 0; }
body.page-template-page-market-watch .section-head { margin-bottom: 14px; }
body.page-template-page-market-watch .section-head .lead { margin-top: 8px; }
body.page-template-page-market-watch .section-head .eyebrow { margin-bottom: 8px; }