/* ============================================================================
   ATLAS — live theme layer (2026-10-09)
   ----------------------------------------------------------------------------
   WHAT THIS IS
   The site has two page families and they do not look like each other:
     - 286 pages rendered by design.css + map.css  (.gera-* vocabulary)
     -  31 pages rendered by v6.css                (.g6 vocabulary)
   This file re-skins the FIRST family plus the shared shell (header / footer)
   to the ATLAS language, without touching a single page's HTML. It is loaded
   last, so same-specificity rules here win by order.

   WHY THIS ROUTE
   The content of the 286 pages is already good (product-line pages run ~1,365
   words). What was wrong was the visual layer: white sheet, soft 14px cards
   with drop shadows, 6px radii, a cool grey skeleton, no visual anchor. The
   fix is a re-skin, not a re-write: one file, 286 pages, one rollback.

   ATLAS RULES HELD HERE
     - warm paper base (#FCFBF9 / #F5F3EF), never a cool white
     - sharp geometry: 3px radius everywhere, no drop shadows
     - hairlines do the work that borders+shadows used to do
     - mono micro-labels carry the technical register
     - numbers are set with tabular figures
     - ONE accent (teal #0E7C7B, user-approved 2026-09-29)

   SCOPE GUARD
   Everything is prefixed body.gera, same as design.css. The .g6 (v6) family
   is deliberately NOT touched here.
   ========================================================================== */

:root {
  /* warm paper skeleton — replaces the cool grey/navy one */
  --ink:        #0B1416;
  --ink-2:      #17262B;
  --body:       #3E4A4E;
  /* 🔴 #77858A (the ATLAS prototype value) is only 3.69:1 on paper — it fails AA
     for the 11-13px mono labels this file uses everywhere. #5F6D72 is 5.18:1 on
     paper and 4.84:1 on paper-2, so it passes on both surfaces. */
  --muted:      #5A686D;
  --line:       #E5E2DC;
  --line-2:     #D4D0C8;
  --surface:    #F5F3EF;
  --white:      #FCFBF9;

  --paper:      #FCFBF9;
  /* 🔴 2026-10-10 实测（TEMPLATE_AUDIT §二.1）：纸白 #FCFBF9 vs 纸灰 #F5F3EF
     的对比度只有 **1.0716:1** —— 1.0 就是完全相同。这就是「分区看不见」。
     加深到 #EFEBE4 后为 **1.149:1**，肉眼可辨；配合 --line-2 的发丝线，
     分界从"没有"变成"清楚"。
     ⚠️ 代价：--muted 在纸灰上从 4.84:1 掉到 4.51:1（AA 临界），
     所以 --muted 一并从 #5F6D72 加深到 #5A686D（纸灰上 4.86:1）。
     --accent 在纸灰上只有 4.22:1 → 纸灰带上的强调字（眉标、页脚）改用 --accent-deep。 */
  --paper-2:    #EFEBE4;
  --paper-3:    #E5DFD5;
  /* 🔴 2026-10-12: form-control boundary. #E4E7EC (the old inline value) was
     1.30:1 against paper — a field you cannot find. WCAG 1.4.11 asks for 3:1
     on the boundary of a UI control; #7F8A87 gives 3.38:1 and still reads as a
     hairline rather than a box. */
  --field-line: #7F8A87;
  /* 🔴 Keep the original wash: #E9F2F1 drops accent-on-wash to 4.40:1 (below AA).
     #F1F8F7 gives 4.66:1 for accent text and 6.94:1 for accent-deep. */
  --accent-wash:#F1F8F7;

  /* sharp geometry, no shadows */
  --r-sm: 3px;
  --r-md: 3px;
  --shadow-1: none;
  --shadow-2: none;

  /* section rhythm — 3 tiers (was: every section exactly 77.76px, measured on
     /region/zhejiang/ where all 7 sections shared one padding → no rhythm). */
  --sec-s: clamp(38px, 4.4vw, 62px);
  --sec:   clamp(52px, 6vw, 92px);
  --sec-l: clamp(66px, 7.8vw, 128px);
}

/* ── base ───────────────────────────────────────────────────────────────── */
body.gera {
  font-size: 17px;
  line-height: 1.62;
  background: var(--paper);
  color: var(--body);
}

body.gera h1, body.gera h2, body.gera h3, body.gera h4 { color: var(--ink); }
/* 🔴 2026-10-10 字阶（TEMPLATE_AUDIT §三.1）：h1/h2 从 600 降到 **500** ——
   「大而不粗」是这次高级感的来源；h3/h4 保持 600 做「主/次」的第二层。
   标题与正文的色差靠 --ink(#0B1416) vs --body(#3E4A4E) = 2.04:1 不够，
   现在靠「字号 + 字重 + 字距」三者同时拉开。 */
body.gera h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.04;
               letter-spacing: -.03em; font-weight: 500; margin: 0 0 20px; }
body.gera h2 { font-size: clamp(27px, 3vw, 40px); line-height: 1.12;
               letter-spacing: -.022em; font-weight: 500; margin: 0 0 18px;
               max-width: 32ch; }
body.gera h3 { font-size: 19px; line-height: 1.32; letter-spacing: -.01em;
               font-weight: 600; margin: 0 0 8px; }
body.gera h4 { font-size: 15px; line-height: 1.38; font-weight: 600; margin: 0 0 6px; }
body.gera p { margin: 0 0 14px; }

/* mono micro-label — the technical register, with the ATLAS tick */
body.gera .gera-eyebrow {
  font-family: var(--font-num); font-size: 11.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px;
}
body.gera .gera-eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--accent); flex: none;
}
body.gera .gera-sec--ink .gera-eyebrow { color: #2FBAB6; }
body.gera .gera-sec--ink .gera-eyebrow::before { background: #2FBAB6; }

body.gera .gera-lead { font-size: 19px; line-height: 1.58; max-width: 66ch; color: var(--body); }
body.gera .gera-micro { font-size: 15px; line-height: 1.5; color: var(--muted); }
body.gera small { font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ── section rhythm ─────────────────────────────────────────────────────── */
body.gera .gera-sec { padding: var(--sec) 0; }
body.gera .gera-sec--tight { padding: var(--sec-s) 0; }
/* 3 tiers applied by position, no markup change: the first section under the
   page head is a short lead-in, the last one is the close. Everything between
   keeps the standard beat. */
body.gera .gera-content > .gera-sec:first-child { padding-top: var(--sec-s); }
body.gera .gera-content > .gera-sec:last-child { padding-bottom: var(--sec-l); }
/* the band now reads: deeper paper + a 1px hairline (measured 1.149:1 + line) */
body.gera .gera-sec--surface {
  background: var(--paper-2); border-top: 1px solid var(--line-2);
}
/* --accent is only 4.22:1 on the deeper band → use accent-deep there (6.29:1) */
body.gera .gera-sec--surface .gera-eyebrow { color: var(--accent-deep); }
body.gera .gera-sec--surface .gera-eyebrow::before { background: var(--accent-deep); }
/* 🔴 2026-10-12 (UX_FIX_1012 · audit P0-3). The eyebrow fix above only covered the
   eyebrow — every ordinary link on the same band stayed on --accent (4.22:1, below
   AA for 13–17px text). Measured across 12 page types, the failures were all here:
     /region/zhejiang/  "All categories →"      (15px, in .gera-micro)
     /regions/          "All 31 provinces →"    (15px)
     /regions/          "Who we are →"          (17px)
     /data/             table links             (17px)
     /product-line/*    "Hardware & Tools"      (15px)
   The base link colour comes from design.css (`body.gera a { color: var(--accent) }`),
   so the fix has to be scoped to the band, not to one component.
   `:not([class*="btn"])` keeps the teal buttons white-on-teal. */
body.gera .gera-sec--surface a:not([class*="btn"]),
body.gera .gera-sec--surface button:not([class*="btn"]) { color: var(--accent-deep); }
body.gera .gera-sec--surface a:not([class*="btn"]):hover,
body.gera .gera-sec--surface button:not([class*="btn"]):hover { color: var(--accent-deep); }
/* the map breadcrumb ("All provinces / Zhejiang") is a <button>, and it sits on
   the --paper-2 .gera-mapcard, so it needs the same treatment. */
body.gera .gera-mapcard #gera-crumbs button { color: var(--accent-deep); }
body.gera .gera-sec--ink { background: var(--ink); }

/* ── page header (inner pages) = the ATLAS hero ─────────────────────────── */
body.gera .gera-pagehead {
  padding: clamp(46px, 5.6vw, 82px) 0 clamp(34px, 4vw, 54px);
  border-bottom: 1px solid var(--line); background: var(--paper);
}
body.gera .gera-pagehead h1 {
  font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05;
  letter-spacing: -.028em; font-weight: 500; max-width: 24ch; margin-bottom: 18px;
}
body.gera .gera-pagehead .gera-sub {
  font-size: 19px; line-height: 1.58; color: var(--body);
  max-width: 66ch; margin: 0;
}
body.gera .gera-crumb {
  font-family: var(--font-num); font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 20px;
}
body.gera .gera-crumb a { color: var(--muted); }
body.gera .gera-crumb a:hover { color: var(--accent); }

/* ── hairline grid: the ATLAS signature ───────────────────────────────────
   Built from cell borders (not a 1px-gap background) on purpose: several grids
   have a half-filled last row (e.g. /region/zhejiang/ runs a 4-column grid with
   3 cards), and the gap-background trick paints that empty slot as a grey
   rectangle. With borders, an unfilled slot simply shows paper.

   🔴 Scoped with :has(> .gera-card) — measured trap (2026-10-09): /contact/
   reuses .gera-grid--2 twice as a layout device (RFQ field rows, and a text
   column beside the form card). An unscoped rule boxed every form field,
   collapsed the 24px gap between field rows, and jammed the text column against
   the form. So the hairline treatment now requires every child to be a card or a
   trailing note <p> (the region/product-line grids all end with one). A grid
   with any other kind of child — a bare <div> column, a form field — keeps its
   original gap and gets no borders. Without :has() support the cards keep their
   own hairline and the original gap, which is still clean. */
body.gera .gera-grid { gap: var(--s3); background: none; border: 0; }
body.gera .gera-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 0;
  box-shadow: none; padding: 24px 22px;
  transition: background 150ms ease;
}
body.gera .gera-card:hover { background: var(--paper-2); transform: none; box-shadow: none; }
body.gera .gera-card h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.012em; }

/* ── 2026-10-16 (OPT_1016B · B) —— 卡片顶部配图（/region/ 的 31 张省卡）────────
   卡片本身有 24/22px 内边距，图要出血到卡片边缘，所以用负 margin 抵消。
   只对**卡里真有 .gera-cimg 的**生效 —— 全站 22 个枢纽页共用 .gera-card，
   没有这张图的地方一行样式都不会命中。
   高度 104px：1160 容器 / 4 列 ≈ 280px 宽，104px 是 2.7:1 的横条，
   不抢 h3 的位置，也不至于看不出是什么。 */
body.gera .gera-card > .gera-cimg { display: block; margin: -24px -22px 16px; }
body.gera .gera-card > .gera-cimg img {
  width: 100%; height: 104px; object-fit: cover; display: block; background: var(--paper-3);
}
@media (max-width: 640px) {
  body.gera .gera-card > .gera-cimg { margin: -20px -18px 14px; }
  body.gera .gera-card > .gera-cimg img { height: 88px; }
}
body.gera .gera-grid:has(> .gera-card):not(:has(> :not(.gera-card):not(p))) { gap: 0; }
body.gera .gera-grid:has(> .gera-card):not(:has(> :not(.gera-card):not(p))) > * {
  margin: 0 -1px -1px 0;
}

/* a card that is NOT inside a grid keeps a hairline of its own */
body.gera .gera-narrow > .gera-card,
body.gera .gera-content > .gera-card { border: 1px solid var(--line); }

/* footer grid is a link list, not a table of cells */
body.gera .gera-foot .gera-grid { gap: 32px; background: none; border: 0; }
body.gera .gera-foot .gera-grid > * { border: 0; margin: 0; background: none; }

/* ── page-level tick lists (verbatim product titles) ──────────────────────
   These run the full 1240px container, so a title like "Cnhawe 65t2500 Factory
   Price 4 1 6 1 8 1 Axis Servo Electro Hydraulic CNC Press Brake..." was a
   150-character line. Two columns puts it back in the 60-80 character band.
   Lists inside .gera-card (company bullets) are untouched. */
body.gera .gera-wrap > .gera-list { columns: 2; column-gap: 48px; }
body.gera .gera-wrap > .gera-list li { break-inside: avoid; }
@media (max-width: 900px) {
  body.gera .gera-wrap > .gera-list { columns: 1; }
}

/* ── page-level name lists (belts / product lines / other regions) ────────
   These arrive as one long <ul class="gera-mlist"> per heading. At 1240px that
   was 26 single-file rows of text with no rhythm, and — worse — a linked row
   and a plain row were drawn in near-identical colours, so the page looked
   like it had a bug. Two fixes: three columns of hairline rows, and the
   emphasis inverted so a LINK is the dark, clickable row and a name with no
   page behind it recedes. (The panel list inside .gera-mpanel is untouched:
   it is a narrow sidebar and is all links.) */
body.gera .gera-wrap > .gera-mlist {
  columns: 3; column-gap: 40px;
  border-top: 1px solid var(--line); margin: 0 0 8px;
}
body.gera .gera-wrap > .gera-mlist li {
  break-inside: avoid; padding: 11px 0; font-size: 15px; line-height: 1.4;
  border-bottom: 1px solid var(--line); color: var(--muted);
}
body.gera .gera-wrap > .gera-mlist li a { color: var(--ink); font-weight: 500; }
body.gera .gera-wrap > .gera-mlist li a:hover { color: var(--accent); }
@media (max-width: 900px) {
  body.gera .gera-wrap > .gera-mlist { columns: 2; column-gap: 28px; }
}
@media (max-width: 560px) {
  body.gera .gera-wrap > .gera-mlist { columns: 1; }
}

/* ── stats ──────────────────────────────────────────────────────────────── */
body.gera .gera-stat { border-top: 1px solid var(--line-2); padding-top: 18px; }
body.gera .gera-stat .n {
  font-family: var(--font-num); font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.05; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
body.gera .gera-stat .l {
  font-family: var(--font-num); font-size: 11.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted);
  margin-top: 8px;
}
body.gera .gera-statline { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body.gera .gera-statline .n { font-family: var(--font-num); font-size: 30px;
  font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
body.gera .gera-statline .l { font-size: 14px; color: var(--muted); }

/* 🔴 2026-10-11 —— 裸放的数据条会出血到视口边，数字贴 x=0。
   `.gera-statline` 自己只有上下边框（design.css: `padding: var(--s3) 0`），
   左右留白全靠父级 `.gera-wrap`。可它常被写成 `<section class="gera-sec">` 的
   **直接子元素**（.gera-wrap 之外）——于是整条横贯视口、第一个数字贴左边缘，
   与全站「一条左基线」矛盾。
   实测（1280 视口，/pricing/）：statline.x = 0，而 .gera-wrap.x = 20、正文左缘 60；
   6 位数字（12,951）在视觉上就像被切掉。
   修法：给这种**裸放**的 statline 补上 .gera-wrap 同款留白
   （容器居中留白 + wrap 自己的 40px 内边距；≤768px 时 wrap 是 20px）。
   选择器只命中 `.gera-sec` 的**直接子元素** → 已经写在 .gera-wrap /
   .gera-narrow 里的数据条（283 个生成页 + /data/ 全部）完全不受影响。 */
body.gera .gera-sec > .gera-statline {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width: 768px) {
  body.gera .gera-sec > .gera-statline { padding-left: 20px; padding-right: 20px; }
}

/* ── note / callout ─────────────────────────────────────────────────────── */
body.gera .gera-note {
  background: var(--accent-wash); border-left: 2px solid var(--accent);
  border-radius: 0 3px 3px 0; padding: 20px 24px; color: var(--ink-2);
}
body.gera .gera-note--warn { background: #FBF3E8; border-left-color: var(--warn); }

/* ── table ──────────────────────────────────────────────────────────────── */
body.gera table.gera-table { font-size: 15px; }
body.gera table.gera-table th {
  font-family: var(--font-num); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line-2);
}
body.gera table.gera-table th,
body.gera table.gera-table td { border-bottom: 1px solid var(--line); }
body.gera table.gera-table tbody tr:nth-child(even) { background: transparent; }
body.gera table.gera-table tbody tr:hover { background: var(--paper-2); }
body.gera .gera-table--doc td.num { font-family: var(--font-num); }

/* ── lists: a tick, not a bullet ────────────────────────────────────────── */
body.gera .gera-list li { padding-left: 30px; }
body.gera .gera-list li::before {
  content: ""; left: 0; top: 10px; width: 13px; height: 7px;
  background: none; border-radius: 0;
  border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
body.gera .gera-list--no li::before {
  border: 0; background: var(--stop); width: 7px; height: 7px;
  transform: none; top: 11px;
}

/* ── buttons ────────────────────────────────────────────────────────────── */
body.gera .gera-btn,
body.gera .wp-block-button__link {
  height: 44px; padding: 0 20px; font-size: 15px; font-weight: 600;
  letter-spacing: -.005em; border-radius: 3px;
}
body.gera .gera-btn--ghost,
body.gera .wp-block-button.is-style-outline .wp-block-button__link { border-color: var(--line-2); }
body.gera .gera-btn--ghost:hover,
body.gera .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--paper-2); border-color: var(--ink);
}

/* ── steps / faq ────────────────────────────────────────────────────────── */
body.gera .gera-steps > li::before { border-radius: 3px; font-family: var(--font-num); }
body.gera .gera-faq summary { font-size: 17.5px; }
body.gera .gera-faq summary::after { font-weight: 400; }

/* ── full-bleed photo band (any .gera-sec--ink with an image) ───────────── */
body.gera .gera-sec--ink { color: #B9C4C7; }
body.gera .gera-sec--ink h2, body.gera .gera-sec--ink h3,
body.gera .gera-sec--ink h4 { color: #fff; }
body.gera .gera-sec--ink p, body.gera .gera-sec--ink li { color: #9FB0B4; }
body.gera .gera-sec--ink a { color: #2FBAB6; }
/* 🔴 2026-10-12（axe-core 实测）：上面那条把**浅色按钮**也染成了 #2FBAB6 ——
   白底浅青字 = **2.38:1**，几乎看不见。实测命中 4 页 6 处：
   /who-we-are/「Send a request」· /faq/「Ask us」· /payment-security/「Start a conversation」
   · /category/hardware-tools/。
   （和 2026-10-11 修过的页脚 CTA 是同一类 bug：深色带里的 `a` 规则压过按钮自己的 color。
     所以这里显式把按钮的 color 拿回来，而不是去动那条通用规则。）
   `.gera-btn--ghost` 不用改：#2FBAB6 在深底上是 7.8:1，达标。 */
body.gera .gera-sec--ink a.gera-btn--light,
body.gera .gera-sec--ink a.gera-btn--light:hover { color: var(--ink); }
body.gera .gera-sec--ink a.wp-block-button__link { color: #fff; }

/* ── header shell ───────────────────────────────────────────────────────── */
body.gera .gera-top {
  background: rgba(252,251,249,.92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
body.gera .gera-top .gera-wrap { height: 70px; }
body.gera .gera-top .gera-brand { font-size: 18px; letter-spacing: -.02em; }
body.gera .gera-nav a { font-size: 14.5px; color: var(--body); }
body.gera .gera-nav a:hover { color: var(--ink); text-decoration: none; }
body.gera .gera-lang__on { background: var(--accent-wash); color: var(--accent-deep); }
body.gera .gera-lang__a,
body.gera .gera-lang__on { font-family: var(--font-num); }

/* ── footer shell: warm paper, not an ink slab ──────────────────────────── */
body.gera .gera-foot {
  background: var(--paper-2); color: var(--body);
  border-top: 1px solid var(--line); padding: 48px 0 34px;
}
body.gera .gera-foot h4 {
  color: var(--muted); font-family: var(--font-num); font-size: 11px;
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px;
}
body.gera .gera-foot a { color: var(--body); font-size: 14.5px; }
body.gera .gera-foot a:hover { color: var(--accent); text-decoration: none; }
body.gera .gera-foot .gera-colophon {
  border-top: 1px solid var(--line); color: var(--muted); margin-top: 36px; padding-top: 20px;
}
body.gera .gera-foot .gera-colophon a { color: var(--muted); font-size: 13px; }
body.gera .gera-foot .gera-colophon a:hover { color: var(--accent-deep); }

/* mobile footer accordion: the old rules drew white-on-dark hairlines */
@media (max-width: 720px) {
  body.gera .gera-foot .gera-fhead { border-bottom: 1px solid var(--line); }
  body.gera .gera-foot .gera-fhead i::before,
  body.gera .gera-foot .gera-fhead i::after { background: var(--muted); }
  body.gera .gera-foot .gera-fcol > a { border-bottom: 1px solid var(--line); }
}

/* ── map components ─────────────────────────────────────────────────────── */
body.gera .gera-mapcard {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 3px; padding: 22px 22px 18px;
}
/* 🔴 Measured on /region/zhejiang/: the map plate is 958px tall while the side
   panel beside it is 2,704px (it lists every belt, city and category the record
   holds). That left ~1,750px of empty paper under the map. The panel is
   JS-built, so the layout fix belongs here: pin the plate while the panel
   scrolls past it. Desktop only — at <=1024px the two stack and sticky would
   make the map ride over the panel. */
@media (min-width: 1025px) {
  body.gera .gera-mapcard { position: sticky; top: 86px; }
}
body.gera .gera-mapbox { background: var(--paper-2); border-radius: 0; }
/* ---- map plate colours (P2 fix 2026-10-12 · 2026-10-31 复核) --------------
   #BCCDC9 vs the --paper-2 card #EFEBE4 = 1.39:1, vs the paper strokes 1.60:1
   —— 这是"底板"色，现在只用于**两种情况**：
     ① 省级（城市）图：paintDensity 只按省名匹配，城市节点拿不到 t1..t4，
        所以 /region/zhejiang/ 整张图就是这个底色（2026-10-31 实测它比纸卡明显，
        陆地读得出来，不用再动）；
     ② 全国图里"索引里没有记录"的省市（现在只有台港澳）。
   有记录省份由国家图的 t1..t4 分档着色（见下一节）。
   label #2F4446 在这个底色上 6.24:1。
   Ladder preserved: dim .86 > default .59 > hover .33；选中态改描边（见 .sel，2026-10-31）。 */

/* ---- resting-state density tiers (OPT_1013B / C3, 2026-10-13 · 色阶 2026-10-31 重做)
   The national map used to be ONE flat fill, so the single asset this site
   actually owns — where the 12,951 records sit — was invisible: the plate was
   just "the shape of China". It is now banded by province record count.

   🔴 2026-10-31 为什么重做：第一版为了"不抢眼"把四档做成低饱和灰绿
   （#95AFAB → #C2D1CE），实测问题有两个 ——
     ① 相邻档 L 差只有 0.02–0.04，缩到卡片尺寸后肉眼分不出来；
     ② 最浅档在纸底 #FCFBF9 上只有 1.19:1，省界还是 0.35px 纯白头发线
        → 整张图"发灰、看不出哪里密"（这也是首页视觉审计里那条"地图发灰"的病根）。
   新四档恢复 brand teal 色相，相邻档 L 差 ≥0.10（实测 0.101 / 0.160 / 0.171），
   最浅档对纸底 1.26:1、对卡片纸灰 1.10:1 —— 仍然是"有颜色的一块"，但能分档。

   三条约束（全部现算，不是猜的）：
     1. 省名文字 `#22403F` 压在最深档 #368B88 上只有 2.78:1 —— **靠 map.css 里
        2.6px 白色 `paint-order:stroke` 光晕分界**（深底 choropleth 的标准做法）。
        单独量文字与底色会不达标，这是这套设计的已知取舍；不要因为这条再把色阶调浅。
     2. 最浅档要能在纸底/纸灰上都读成"有颜色"：实测 1.26:1 / 1.10:1。
     3. 不能和交互态撞：`.sel` 改成**描边**（#0E7C7B 2.2px，不再改填充），
        `.hover` / `.hot` 仍是饱和青绿 —— 密度只由明度表达，"我点了哪个"由描边表达。

   Placed BEFORE .hover/.sel/.dim: same specificity (0,3,2), so those must win.
   The 4-step category scale is an inline fill set by map.js, and an inline
   fill always beats this rule — selecting a category is unaffected.
   -------------------------------------------------------------------------- */
body.gera #gera-map path.region.t1 { fill: #368B88; }
body.gera #gera-map path.region.t2 { fill: #5FA39F; }
body.gera #gera-map path.region.t3 { fill: #8FC0BC; }
body.gera #gera-map path.region.t4 { fill: #BED7D4; }
/* Legend, absolutely positioned in the map box: it takes part in NO layout,
   so it cannot introduce CLS. Injected by map.js (it depends on the aggregate
   data), and simply absent when that data is unavailable. */
body.gera .gera-mapbox .gera-mdens {
  position: absolute; left: 14px; bottom: 14px; z-index: 5;
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  max-width: calc(100% - 28px);
  padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 3px;
  background: rgba(252, 251, 249, .93);
  font-size: 11.5px; color: var(--muted);
}
body.gera .gera-mapbox .gera-mdens span { margin-right: 2px; }
body.gera .gera-mapbox .gera-mdens i {
  display: inline-block; width: 15px; height: 11px; border: 1px solid var(--line-2);
}
body.gera .gera-mapbox .gera-mdens i.t1 { background: #368B88; }
body.gera .gera-mapbox .gera-mdens i.t2 { background: #5FA39F; }
body.gera .gera-mapbox .gera-mdens i.t3 { background: #8FC0BC; }
body.gera .gera-mapbox .gera-mdens i.t4 { background: #BED7D4; }
body.gera .gera-mapbox .gera-mdens b { font-weight: 500; }
@media (max-width: 560px) {
  /* 手机上绝对定位的图例（276px 宽、两行）会压住整块浙江南部 —— 实测它盖掉了
     Wenzhou 一带。改成**脱离绝对定位、落到地图下方**，并在 .gera-mapbox 上预留
     同高的 padding-bottom：预留是纯 CSS、先于 JS 存在，所以图例异步注入时不会
     产生位移（CLS 不涨）。 */
  body.gera .gera-mapbox { padding-bottom: 46px; }
  body.gera .gera-mapbox .gera-mdens {
    position: static; margin: 0 10px; max-width: none;
    font-size: 11px; gap: 5px; padding: 6px 8px;
  }
  body.gera .gera-mapbox .gera-mdens i { width: 12px; height: 9px; }
}

body.gera #gera-map path.region { fill: #BCCDC9; stroke: var(--paper); }
body.gera #gera-map path.region.hover { fill: #4FA9A7; }
/* 2026-10-31：选中态从"改填充"改成"描边"。
   原因：密度分档现在也用填充表达（t1..t4），再让 .sel 覆盖填充就会把该省的档次抹掉，
   而且旧的 #8FC9C6 与 t3 #8FC0BC 几乎同色 → 选中了看不出来。
   改成 #0E7C7B 2.4px 描边：选中 = 一个圈，密度 = 明度，两者互不抢。 */
body.gera #gera-map path.region.sel { stroke: #0E7C7B; stroke-width: 2.4; }
body.gera #gera-map path.region.dim { fill: #EDF0EE; }
body.gera #gera-map text.lbl { fill: #2F4446; stroke: var(--paper); }
body.gera #gera-map rect.inset-frame { stroke: var(--line-2); }
body.gera #gera-map path.scs { fill: #93A6A5; }
body.gera #gera-zoomhint { background: rgba(252,251,249,.92); border-radius: 3px; }
body.gera #gera-loading { background: rgba(252,251,249,.72); }
body.gera #gera-crumbs button { border-radius: 3px; }
body.gera .gera-mpanel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 3px; padding: 24px 22px;
}
/* 🔴🔴 2026-10-12：**地图面板的布局位移**（全站最严重的 Core Web Vital 问题）
   ────────────────────────────────────────────────────────────────────────
   病根：`<div class="gera-mpanel" id="gera-mpanel"></div>` 在服务端 HTML 里是**空的**，
   全部内容由 map.js 注入。面板最终有 2,270–2,900px 高，但加载期只有 **50px**
   → JS 一渲染，下面的内容整体被顶下去近 3 米。

   实测（Playwright + CDP 限速 400kbps/400ms）：
     CLS **0.962 / 1.105**（Google 阈值：>0.25 即 "poor"，>0.1 就不算 good）
     单次位移 +0.901 —— `DIV.gera-mpanel` 高度 50px → 630px（其后继续长到 2,900px）
   命中 **134 页**（`/regions/` + 133 个地域页）= 全站可索引页的 40%。
   ⚠️ 快网下测不出来（面板在第一帧之前就渲染完了，没东西可"位移"）——
      只有限速才复现，所以之前一直没发现。

   处置：按断点**预留面板最终高度**（值取自线上实测），空态给一句加载提示。
   · 快网：面板自然高度 ≥ min-height → 完全无感，零代价
   · 慢网：位置提前占住 → 不再位移，且不是一片空白而是有边框的占位块
   回滚 = 删掉这一段。 */
/* ⚠️ 2026-10-12 第一次尝试（**已撤回**）：给面板加固定 min-height 2850px。
   它确实把 CLS 压到 0.002，但**面板自然高度差异极大**（线上实测 @1440）：
     /region/zhejiang/ 2845 · /region/guangdong/ 2642 · /region/shandong/ 1967
     /region/anhui/anqing/ 1568 · /region/zhejiang/yiwu/ 272 · /region/qinghai/ 272
     /regions/（枢纽）459
   → 固定 min-height 会在短面板页（yiwu / qinghai / ningxia / 枢纽）留 **2,500px 空框**，
     比它修掉的位移还糟。**任何固定值都是错的。**
   正解 = **服务端把面板默认内容渲染出来**（高度天然正确，无预留、无空洞）。
   在那之前先不加 —— 宁可保留 CLS，也不要留一个 2.5 米空框。 */
body.gera .gera-mpanel:empty::before {
  content: "Loading the map data…";
  display: block; font-size: 15px; color: var(--muted);
  font-family: var(--font-num); letter-spacing: .04em;
}

/* ── 面板**内部**异步块的高度预留（2026-10-12 第二轮）──────────────────────
   给面板外层写了 min-height 之后，外层稳住了，但内部还在长：
   `.gera-magg`（聚合统计块）从 0px 长到 **1,138–1,358px**，把下面的
   "What it is known for" / "Industrial belts" 列表往下推。
   实测 `/region/anhui/anqing/` 残留 CLS **0.205**（其中 `UL.gera-mlist` 位移 0.164）。
   `/regions/` 的默认面板长的是 `.gera-midx`（277px）。
   ⚠️ 这两块都是 **map.js 动态创建**的，改不了 HTML —— 所以用**每页一个 CSS 变量**：
   页面上的 `#gera-mpanel` 带 `style="--magg-h:1247px"`，变量继承给 JS 造出来的子元素。
   没这个变量的页（本来就没有聚合块）取 0，零影响。 */
body.gera .gera-magg { min-height: var(--magg-h, 0px); }
body.gera .gera-midx { min-height: var(--midx-h, 0px); }
body.gera .gera-mpanel-t { font-size: 20px; }
body.gera .gera-mstat { border-top: 1px solid var(--line-2); }
body.gera .gera-mstat .n { font-family: var(--font-num); font-size: 32px; }
body.gera .gera-mlabel { font-family: var(--font-num); font-size: 11px; letter-spacing: .13em; }
body.gera .gera-mchip { border-radius: 3px; background: var(--paper); }
body.gera .gera-mtag { border-radius: 3px; }
body.gera .gera-mlist li { font-size: 14px; border-bottom: 1px solid var(--line); }
body.gera .gera-msearch input { border-radius: 3px; background: var(--paper); }
body.gera .gera-msugg { border-radius: 3px; }
body.gera .gera-mrow { border-radius: 3px; background: var(--paper); }

/* ── editorial components ───────────────────────────────────────────────── */
body.gera .gera-fig img { border-radius: 3px; }
body.gera .gera-visual { background: var(--paper-2); border-radius: 3px; }
body.gera .gera-visual::before { opacity: .5; }
body.gera .gera-herocard { background: var(--paper); border-radius: 3px; }
body.gera .gera-snapbox { background: var(--paper-2); border-radius: 0; }
body.gera .gera-pull { border-left: 2px solid var(--accent); }
body.gera .gera-num { font-family: var(--font-num); color: var(--accent-deep); }
/* 🔴 2026-10-12（axe-core）：原来是 `--accent`（#0E7C7B）。它落在**纸灰带**
   `--paper-2`（#EFEBE4）上只有 **4.22:1**，低于 AA 的 4.5（15px 正文）。
   实测命中 /faq/ 的 `01 / 03` 序号。换 `--accent-deep`（#0A5F5E）→
   纸灰上 **6.3:1**、白底 **7.6:1**，两处都过。
   （同批 2026-10-11 已经把「纸灰带上的强调字」改过一次，`.gera-num` 是漏网的一个。） */
body.gera .gera-toc h4 { font-family: var(--font-num); letter-spacing: .13em; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  body.gera .gera-pagehead { padding: clamp(40px, 5vw, 60px) 0 34px; }
}
@media (max-width: 768px) {
  body.gera .gera-sec { padding: 46px 0; }
  body.gera .gera-pagehead { padding: 46px 0 30px; }
  body.gera h1, body.gera .gera-pagehead h1 { font-size: 32px; }
  body.gera h2 { font-size: 27px; }
  body.gera .gera-grid--2,
  body.gera .gera-grid--3,
  body.gera .gera-grid--4 { grid-template-columns: 1fr; }
  body.gera .gera-card { padding: 20px 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-10 — EDITORIAL COMPONENTS  (P2 page rebuild)
   ---------------------------------------------------------------------------
   WHY THIS EXISTS
   User, 2026-10-10: "模板要做得好看一点，要有高端的感觉，不要就是一堆文字或者
   一堆表格在那里看着，真的是完全没有浏览的欲望".
   Measured on /region/zhejiang/ before this change: 8,637px tall, ~1,214 words,
   2 images. Three sections of 1,700-1,900px each held ZERO images, and two of
   them were 26-row and 15-row hairline name lists. That is exactly what the
   complaint describes.

   Three components, built from the vocabulary already in this file — hairline
   grid, warm paper, 3px radius, mono numerals, no shadows, one teal accent:
     .gera-tiles   image tile grid     — a list of names becomes something to scan
     .gera-band    wide image strip    — breaks the rhythm between text sections
     .gera-pills   compact name cloud  — long-tail lists (belts, product lines)
   ========================================================================== */

/* ── image tile grid ────────────────────────────────────────────────────── */
body.gera .gera-tiles {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 32px;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
}
body.gera .gera-tile {
  display: block; color: inherit; text-decoration: none; background: var(--paper);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
body.gera .gera-tile__ph {
  display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2);
}
body.gera .gera-tile__ph img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
body.gera .gera-tile:hover .gera-tile__ph img { transform: scale(1.04); }
body.gera .gera-tile__b { display: block; padding: 15px 17px 17px; }
body.gera .gera-tile__t {
  display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.005em;
  color: var(--ink); line-height: 1.3;
}
body.gera .gera-tile:hover .gera-tile__t { color: var(--accent); }
body.gera .gera-tile__m {
  display: block; margin-top: 4px; font-family: var(--font-num);
  font-size: 12.5px; color: var(--muted);
}

/* ── wide image strip ───────────────────────────────────────────────────── */
body.gera .gera-band { margin: 0; }
body.gera .gera-band img {
  display: block; width: 100%; height: auto; aspect-ratio: 21 / 8;
  object-fit: cover; border-radius: 3px;
}
body.gera .gera-band figcaption { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
body.gera .gera-sec--band { padding: 0 0 var(--sec); }

/* ── name cloud (long-tail lists) ───────────────────────────────────────── */
body.gera .gera-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
body.gera .gera-pill {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 3px;
  background: var(--paper); color: var(--ink); text-decoration: none;
  font-size: 14.5px; font-weight: 500; line-height: 1;
}
body.gera .gera-pill small {
  font-family: var(--font-num); font-size: 12px; font-weight: 400; color: var(--muted);
}
body.gera .gera-pill:hover { border-color: var(--accent); color: var(--accent); }
body.gera .gera-pill--plain { color: var(--muted); font-weight: 400; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  body.gera .gera-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  body.gera .gera-tiles { grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
  body.gera .gera-tile__b { padding: 12px 13px 14px; }
  body.gera .gera-tile__t { font-size: 14.5px; }
  body.gera .gera-band img { aspect-ratio: 16 / 9; }
}

/* ── certification / badge chips ──────────────────────────────────────────
   Measured 2026-10-10: 8,804 <span class="tag"> badges are emitted across the
   283 data pages (company cards, factory cards, belt cards). Until now the
   ONLY .tag rule in the codebase was scoped to `.gera-visual .tag`, so every
   badge on every card rendered as a run-on line of plain text —
   "BV on file CE FDA ISO14001" instead of four separate, scannable chips.
   That run-on line was a large part of the "一堆文字" the user described. */
body.gera .tag {
  display: inline-flex; align-items: center;
  padding: 5px 10px; margin: 0 6px 7px 0;
  border: 1px solid var(--line); border-radius: 3px;
  background: var(--paper); color: var(--ink-2);
  font-family: var(--font-num); font-size: 11.5px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; line-height: 1;
}
body.gera .gera-sec--ink .tag {
  border-color: rgba(255, 255, 255, .28); background: transparent;
  color: var(--white, #fff);
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-10 字阶归一（TEMPLATE_AUDIT §二.3 / §四）
   ---------------------------------------------------------------------------
   实测：/region/zhejiang/ 一页用了 **12 种字号**，其中 11 / 11.5 / 12 / 13 /
   13.5 / 14.5 六个挤在 3.5px 之内 —— 那不是层级，是微差；首页主用字号是
   12.5px 与 14px，大字号只有 13 + 11 个元素 → 「小字海」。
   本段把在用字号收敛到 **6 档**：

     11.5  meta     mono 标签 / 眉标 / 表头 / 面包屑
     14    small    卡内注脚、图注、小标签
     15    ui       按钮 / 表格正文 / 名单行 / 胶囊
     17    body     正文
     19    lead     段导语 / 卡标题 / FAQ 问题
     40    h2       段标题（clamp 27→40）
     60    h1       Display（clamp 36→60）

   规则：**只动 font-size，不动任何结构**；每一条都写清原来是多少。
   ═══════════════════════════════════════════════════════════════════════════ */

/* meta 级：11 / 12 / 12.5 → 11.5 */
body.gera .gera-fig figcaption,
body.gera .gera-mapbox,
body.gera table.gera-table th,
body.gera .gera-mlabel,
body.gera .gera-toc h4,
body.gera .gera-visual .tag { font-size: 11.5px; }

/* small 级：12.5 / 13 / 13.5 → 15（与 ui 级合并，砍掉 14px 这一档微差） */
body.gera .gera-tile__m,
body.gera .gera-band figcaption,
body.gera .gera-num,
body.gera .gera-pill small { font-size: 15px; }

/* ui 级：14 / 14.5 / 15.5 → 15 */
body.gera .gera-mlist li,
body.gera .gera-wrap > .gera-mlist li,
body.gera .gera-statline .l,
body.gera .gera-toc li,
body.gera .gera-tile__t,
body.gera .gera-pill,
body.gera .gera-steps > li::before,
body.gera.gera-factory details.gera-more > summary,
body.gera table.gera-table,
body.gera table.gera-table td,
body.gera .gera-table--doc,
body.gera .gera-btn,
body.gera .wp-block-button__link { font-size: 15px; }

/* body 级：16 / 16.5 → 17 */
body.gera .gera-note { font-size: 17px; }

/* lead 级：17.5 / 18 / 18.5 → 19 */
body.gera .gera-faq summary,
body.gera .gera-narrow p,
body.gera .gera-narrow li,
body.gera .gera-hero .gera-sub { font-size: 19px; }

/* h3 / 副标题 */
body.gera .gera-post h3 { font-size: 19px; }
body.gera .gera-post h2 { font-size: clamp(27px, 3vw, 40px); letter-spacing: -.022em; font-weight: 500; }
body.gera .gera-mpanel-t { font-size: 21px; }
body.gera .gera-faq summary::after { font-size: 21px; }
body.gera .gera-pull { font-size: 24px; }

/* hero（v6 之外仍有 .gera-hero 的旧模板页）*/
body.gera .gera-hero h1 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 500; letter-spacing: -.03em; }

/* ---- number settle emphasis (P1 fix, 2026-10-12) ----------------------------
   [data-count] used to be animated from 0 by v6.js, so any static render
   (screenshot service, social preview, crawler) read "USD 0". The final value
   in the HTML is now never rewritten; JS only adds .num-in for a brief
   fade + accent flash as emphasis. */
@keyframes geraNumIn {
  from { opacity: .45; color: var(--accent); }
  to   { opacity: 1;   color: inherit; }
}
body.gera [data-count].num-in { animation: geraNumIn .45s ease-out both; }
@media (prefers-reduced-motion: reduce) { body.gera [data-count].num-in { animation: none; } }

/* ---- phone-only collapse control (P4 fix, 2026-10-12) -----------------------
   Companion to assets/collapse.js. The class is only ever added by that script
   and only at <=640px, so nothing here can affect a desktop render.
   accent-deep (#0A5F5E) on --paper (#FCFBF9) = 7.0:1, well past AA for 15px. */
body.gera .gera-gc-hidden { display: none !important; }
body.gera .gera-more {
  display: block; width: 100%; margin: 14px 0 4px; min-height: 44px;
  padding: 10px 14px; font: inherit; font-size: 15px; line-height: 22px;
  color: var(--accent-deep); background: var(--paper);
  border: 1px solid var(--line); border-radius: 3px;
  text-align: center; cursor: pointer;
}
body.gera .gera-more:hover { border-color: var(--accent); }
body.gera .gera-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 641px) { body.gera .gera-more { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   FORM FIELDS (ATLAS) — 2026-10-12 (UX_FIX_1012 · 审核 P0-3)
   ---------------------------------------------------------------------------
   Until today the site had no field component at all: the RFQ form on
   /contact/ — the only real conversion point on the site — was styled with
   hardcoded inline CSS from before ATLAS (#8A94A6 labels = 2.96:1 on paper,
   #E4E7EC borders, 6px radii, #0B1220 text). This is the component that
   replaces it, so every future form reads from one place.

   MEASURED VALUES (on --paper #FCFBF9)
     label   --muted   #5A686D   5.59:1  (was 2.96:1 — below AA)
     border  #7F8A87             3.38:1  (WCAG 1.4.11 wants >=3:1 for the
                                          boundary of a user-interface control;
                                          the old #E4E7EC was 1.30:1)
     focus   --accent  #0E7C7B   5.01:1  ring + border, same as the rest of
                                          the site's :focus-visible treatment
   The border is deliberately a warm grey rather than a paper hairline: it has
   to be findable, not decorative. It still reads as a pen rule, not a box.
   ═══════════════════════════════════════════════════════════════════════════ */
body.gera .gera-field { margin: 0 0 18px; }
body.gera .gera-grid > .gera-field { margin-bottom: 0; }

body.gera .gera-field > label,
body.gera .gera-flabel {
  display: block; margin: 0 0 7px;
  font-family: var(--font-num); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
/* the required marker: accent-deep, not accent — 6.29:1 vs 4.22:1 would fail */
body.gera .gera-field .gera-req { color: var(--accent-deep); font-weight: 700; }

body.gera .gera-field input[type="text"],
body.gera .gera-field input[type="email"],
body.gera .gera-field input[type="tel"],
body.gera .gera-field input[type="number"],
body.gera .gera-field textarea {
  display: block; width: 100%; box-sizing: border-box;
  height: 48px; padding: 0 14px;
  font: inherit; font-size: 16px; line-height: 1.4; color: var(--ink);
  background: #fff; border: 1px solid var(--field-line); border-radius: 3px;
  transition: border-color 140ms ease;
}
body.gera .gera-field textarea {
  height: auto; min-height: 104px; padding: 12px 14px; resize: vertical;
}
body.gera .gera-field input::placeholder,
body.gera .gera-field textarea::placeholder { color: var(--muted); opacity: 1; }
body.gera .gera-field input:hover,
body.gera .gera-field textarea:hover { border-color: var(--muted); }
body.gera .gera-field input:focus,
body.gera .gera-field textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent); outline-offset: 1px;
}
body.gera .gera-fieldnote {
  margin: 12px 0 0; font-size: 13px; line-height: 1.65; color: var(--muted);
}
body.gera .gera-fieldnote strong { color: var(--ink); font-weight: 600; }
body.gera .gera-rfq { margin-top: 24px; }
body.gera .gera-rfq__act { margin: 24px 0 0; }
body.gera .gera-rfq__act .gera-btn { width: 100%; }
/* honeypot: off-screen, never a visual box */
body.gera .gera-hp { position: absolute; left: -9999px; }

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-12 (UX_FIX_1012 · 审核 C4) —— /factory/* 的「引用的产品标题」
   ---------------------------------------------------------------------------
   /factory/<company>/ 上有一份 `24 product listings we have read` 列表，页面上
   自己写明了「Titles copied from the public listings — not paraphrased」。
   所以**文字保持完整、不改写、不截断**（那是页面承诺的一部分）。
   改的只是它的**层级**：17px + 正文色读起来像「我们在卖这些东西」；
   15px + `--muted` 读起来才是它本来的身份 —— 引用来的原始资料。
   只作用于 `body.gera-factory`，全站通用的 `.gera-list`（勾号清单）不受影响。
   ═══════════════════════════════════════════════════════════════════════════ */
body.gera.gera-factory .gera-list li {
  font-size: 15px; line-height: 1.55; color: var(--muted);
}
body.gera.gera-factory .gera-list li::before { top: 9px; }

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-12 (TYPESET_1012 · C1) —— 窄栏块的右半页是空的
   ---------------------------------------------------------------------------
   实测（1440 视口）：`.gera-wrap` 的内容盒是 **1160px**，而 `.gera-narrow` 固定
   **640px** 且贴左基线 → 每个正文块右侧 **520px 永久空白**。而且这些块多数
   就在**首屏**：/regions/ /data/* /who-we-are/ /how-it-works/ /quality-control/
   /faq/ /not-specialized-in/ /case-studies/ /region/*（102）/ /product-line/*（78）
   ≈ 190 页第一眼就是「右边空的」，看起来像页面没做完。

   已有的一半修法（design.css）只给 statline/table/card 做了 `+160px` 出血
   （640 → 800），右边仍空 360px，而且 `figure` 根本没出血（照片 640 宽浮在
   半页空白里）。

   本层三条规则，**不改内容、不动左基线**：
     R1 结构件填满版心 —— statline / table / card / figure / map 从 640 拉到 1160。
        数字条 4 格不再挤成两行；照片不再像缩略图。
     R2 「引言 + 注记」双轨 —— 引言留左轨 640，注记进右轨（≈460）。
     R3 「编号 / 眉标 / 标题 + 问答」双轨 —— 标题组左轨 400，问答右轨（≈672）。
        文档站版式；/faq/ 有 5 个这种块。

   ⚠️ 安全策略：R1 用**白名单放开**而不是黑名单收窄 —— 子元素默认仍 cap 在
      `--content`，只有认识的结构件才放宽。将来出现没见过的块，最多保持原样，
      不会被拉成 1160px 的长行。
   ⚠️ 必须覆盖 design.css 的 `width: calc(100% + 160px)`：父级已经是 1160，
      再 +160 会到 1320 → 整页横向溢出。
   ⚠️ 只在 ≥1001px 生效；≤1000px 单栏原样。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1001px) {

  /* R1a — 窄栏块自身填满版心（左基线不动：margin-left 仍是 0） */
  body.gera .gera-wrap > .gera-narrow { max-width: none; }

  /* R1b — 默认：所有子元素保持阅读度量 640 */
  body.gera .gera-wrap > .gera-narrow > * { max-width: var(--content); }

  /* R1c — 白名单：结构件放开到满版心。
     ⚠️ figure 不在满宽名单里 —— 实测图片池只有 760x760 的底图
     （`floor.jpg` naturalWidth=760，且这些 <img> **没有 srcset**），
     放到 1160 就是 1.53 倍放大 = 肉眼可见的糊。图片上限单独走 R1e。 */
  body.gera .gera-wrap > .gera-narrow > .gera-statline,
  body.gera .gera-wrap > .gera-narrow > .gera-table,
  body.gera .gera-wrap > .gera-narrow > .gera-card,
  body.gera .gera-wrap > .gera-narrow > .gera-map,
  body.gera .gera-wrap > .gera-narrow > .gera-map-wrap { max-width: none; }

  /* R1e — 图片：放宽到 760px（= 底图原始宽度，1:1 不放大）。
     ⚠️ 这是「版心填不满」的真实原因：素材库最大 760，容器 1160。
        要真正填满得先有 >=1300 的图源 + 给 <img> 补 srcset，属素材层，不在这里假装。 */
  body.gera .gera-wrap > .gera-narrow > figure,
  body.gera .gera-wrap > .gera-narrow > .gera-fig { max-width: 760px; }

  /* R1d — 覆盖旧出血（父级已 1160，再 +160 会溢出） */
  body.gera .gera-wrap > .gera-narrow > .gera-table,
  body.gera .gera-wrap > .gera-narrow > .gera-card,
  body.gera .gera-wrap > .gera-narrow > .gera-statline { width: 100%; margin-left: 0; }

  /* R3 — 编号 + 眉标 + 标题 + 问答 的块 → 标题组左轨 / 问答右轨（文档站版式）
     🔴 `grid-template-rows: auto auto 1fr` 不是装饰：问答块跨 1-3 行，
        若三行都是 auto，它的高度会**平均摊到三行**，左轨的
        「01 / 眉标 / 标题」就被撑出 100px 级的随机空隙（实测 y=159→277→390）。
        显式给前两行 auto（按内容）、第三行 1fr（吸收剩余）后，左轨三项
        紧贴顶部，与右侧问答列表顶对齐。 */
  body.gera .gera-wrap > .gera-narrow:has(> .gera-num):has(> .gera-faq) {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(40px, 5vw, 96px);
    align-items: start;
  }
  body.gera .gera-wrap > .gera-narrow:has(> .gera-num):has(> .gera-faq) > .gera-num {
    grid-column: 1; grid-row: 1; min-width: 0; }
  body.gera .gera-wrap > .gera-narrow:has(> .gera-num):has(> .gera-faq) > .gera-eyebrow {
    grid-column: 1; grid-row: 2; min-width: 0; }
  body.gera .gera-wrap > .gera-narrow:has(> .gera-num):has(> .gera-faq) > h2 {
    grid-column: 1; grid-row: 3; min-width: 0; max-width: none; }
  body.gera .gera-wrap > .gera-narrow:has(> .gera-num):has(> .gera-faq) > .gera-faq {
    grid-column: 2; grid-row: 1 / span 3; min-width: 0; max-width: none;
    /* design.css 给 .gera-faq 留了 40px 上边距（堆叠版式用）；双轨里它把
       问答列表压到左轨「01」下方 40px，去掉才对得齐。 */
    margin-top: 0; }
  body.gera .gera-wrap > .gera-narrow:has(> .gera-num):has(> .gera-faq) > figure,
  body.gera .gera-wrap > .gera-narrow:has(> .gera-num):has(> .gera-faq) > .gera-fig {
    grid-column: 2; grid-row: 4; min-width: 0; }
}

/* R2 单独一档：右轨至少要 ~400px 才放得下一条注记。
   1024 视口下 wrap 只有 944，640 之后只剩 257 —— 注记会挤成 28 字符/行。
   1180 起右轨 ≥ 406，才开双轨。 */
@media (min-width: 1180px) {
  body.gera .gera-wrap > .gera-narrow:has(> .gera-lead):has(> .gera-note):not(:has(> :nth-child(3))) {
    display: grid;
    grid-template-columns: var(--content) minmax(0, 1fr);
    column-gap: clamp(40px, 4.6vw, 80px);
    align-items: start;
  }
  body.gera .gera-wrap > .gera-narrow:has(> .gera-lead):has(> .gera-note):not(:has(> :nth-child(3))) > .gera-lead {
    grid-column: 1; grid-row: 1; min-width: 0;
  }
  body.gera .gera-wrap > .gera-narrow:has(> .gera-lead):has(> .gera-note):not(:has(> :nth-child(3))) > .gera-note {
    grid-column: 2; grid-row: 1; min-width: 0; max-width: none; margin-top: 6px;
  }
}

/* R4 —— 首个孩子就是 h2 的块（全站只有 3 处：/case-studies/、
   /product-line/soft-bag-backpack/ ×2）→ 标题左轨 / 正文右轨。
   和 R3 同一个版式语言，只是没有编号与眉标。
   实测库存（337 页全扫）：`.gera-narrow` 的块形状共 19 种，
   其中 `statline + p` 一种就占 283 处（90%），由 R1 覆盖；
   `lead + note` 5 处（R2）；`num+eyebrow+h2+faq` 4 处（R3）；本规则 3 处。
   其余零散形状（/privacy/ /terms/ 的 h3+ul 长文、单个 lead 段）不做双轨 ——
   h3 与它自己的正文之间没有包裹元素，CSS 无法把它们配成一对，硬做会错行。 */
@media (min-width: 1180px) {
  body.gera .gera-wrap > .gera-narrow:has(> h2:first-child):has(> :nth-child(2)):not(:has(> .gera-faq)):not(:has(> .gera-num)) {
    display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    column-gap: clamp(40px, 5vw, 96px);
    align-items: start;
  }
  body.gera .gera-wrap > .gera-narrow:has(> h2:first-child):has(> :nth-child(2)):not(:has(> .gera-faq)):not(:has(> .gera-num)) > h2 {
    grid-column: 1; grid-row: 1; min-width: 0; max-width: none; }
  body.gera .gera-wrap > .gera-narrow:has(> h2:first-child):has(> :nth-child(2)):not(:has(> .gera-faq)):not(:has(> .gera-num)) > :not(h2) {
    grid-column: 2; min-width: 0; }
}

/* ── 2026-10-12 (OPT_1012C · A2) —— 询盘表单的行内校验态 ──────────────────────
   rfq.js 在失焦/提交时把「哪一项不对」写进 .gera-fieldnote--err，并给输入框
   加 .gera-input--bad。颜色只用已有 token：
     --warn #B45309 在纸底 #FCFBF9 上 6.0:1，达 AA（11.5px 也够）
   按钮的 :disabled 是提交中态（防止重复提交），必须看得出来被禁用了。 */
body.gera .gera-fieldnote--err { color: var(--warn); display: block; margin-top: 4px; }
body.gera .gera-fieldnote--err:empty { display: none; }
body.gera .gera-field input.gera-input--bad,
body.gera .gera-field textarea.gera-input--bad { border-color: var(--warn); }
body.gera .gera-rfq button[type="submit"][disabled] {
  opacity: .62; cursor: progress; pointer-events: none;
}

/* ── 2026-10-12 (OPT_1012C · T1+T2) —— 枢纽页的分组表头 ─────────────────────
   实测 `/product-line/` 51KB 页面 = **0 张图 / 0 个 h2 / 77 个 h3**，
   标题从 h1 直接跳到 h3；`/industry-belt/` 同病。这里给「分组表头」定样式：
   72px 类目插图 + h2 + 一行口径（多少条 / 多少家企业）。
   h2 用 clamp(21→27) —— 比页 h1(36–60) 低一档、比卡片 h3(19) 高一档，
   目录型页面不该用 40px 的巨型分组标题。
   插图是装饰性的（alt=""），名字由 h2 承担，所以不给它单独的语义。 */
body.gera .gera-grph {
  display: flex; align-items: center; gap: 20px;
  margin: 56px 0 26px; padding-top: 26px; border-top: 1px solid var(--line-2);
}
body.gera .gera-grph:first-of-type { margin-top: 44px; }
body.gera .gera-grpi { margin: 0; flex: 0 0 auto; }
body.gera .gera-grpi img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 3px; display: block; background: var(--paper-3);
}
body.gera .gera-grpt { min-width: 0; }
body.gera .gera-grpt h2 {
  font-size: clamp(21px, 2vw, 27px); line-height: 1.16; letter-spacing: -.018em;
  margin: 0; max-width: none;
}
body.gera .gera-grpmeta {
  margin: 6px 0 0; font-family: var(--font-num); font-size: 11.5px; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 640px) {
  body.gera .gera-grph { gap: 14px; margin: 40px 0 20px; padding-top: 20px; }
  body.gera .gera-grpi img { width: 56px; height: 56px; }
}

/* ── 2026-10-12 (OPT_1012C · T2) —— 法务页的章节标题 ────────────────────────
   /privacy/ 与 /terms/ 原来是 h1 下面**直接跳 h3**（标题层级断裂）。语义上必须是
   h2，但视觉上不该用页面默认的 clamp(27→40) 巨型标题 —— 法务页的章节是密集条款，
   40px 会把页面撑成海报。所以只在这两页把 h2 收回到 h3 的字号（19px/600），
   语义与视觉各归各位。.gera-legal 只加在 privacy/terms 的窄栏上，不外溢。 */
body.gera .gera-legal h2 {
  font-size: 19px; line-height: 1.32; letter-spacing: -.01em; font-weight: 600;
  margin: 34px 0 8px; max-width: none;
}
body.gera .gera-legal h2:first-child { margin-top: 0; }

/* 地图面板里的标签不是章节标题（map.js 原来是 <h4>，在 h2 下直接跳 h4；
   改成 <p class="gera-mlabel"> 后由 map.css 接管全部样式，这里只兜一个 margin）。 */
body.gera p.gera-mlabel { margin: var(--s3) 0 var(--s1); }

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-12 — MOBILE LEGIBILITY FLOOR  (只在 ≤768px 生效)
   ---------------------------------------------------------------------------
   实测（390px，真实浏览器）：
     首页      118 个元素落在 11.5px
     /region/zhejiang/  85 个，其中多个是**整句说明** ——
       .gera-mnote「Of the 1,991 records here that publish their…」
       .gera-fig figcaption「Illustrative photograph — not a customer order」
       .gera-mstat .l「company records in our index · #2 of 31 provinces」
       .gera-mlabel / .gera-mtag / .gera-mcov .k
   11.5px 是**桌面端的 mono 微标档**，不是手机阅读档。手机上 11.5px 的整句
   等于「看见了但读不动」。
   处置：只把 <13px 的那一档抬到 12.5px。正文 17px / lead 19px / 标题一律不动，
   所以除了这些小字本身，页面不会重排。
   （v6 页面走的是自己的 token，见 atlas-v6.css 里同一批改动。）
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body.gera .gera-eyebrow,
  body.gera .gera-crumb,
  body.gera .gera-crumb a,
  body.gera .tag,
  body.gera p.gera-mlabel,
  body.gera .gera-mtag,
  body.gera .gera-mnote,
  body.gera .gera-mcov .k,
  body.gera .gera-mlist li span,
  body.gera .gera-mstat .l,
  body.gera .gera-mapbox div,
  body.gera .gera-fig figcaption { font-size: 12.5px; }
}

/* ── 2026-10-12 MOBILE TAP TARGETS（内容区部分）────────────────────────────
   实测 390px：`.gera-card > h3 > a`（企业卡标题）只有 24px 高、
   `.gera-card > p.gera-micro > a`（"Source listing →"）只有 19px 高。
   WCAG 2.2 AA 的 24×24 已经达标，但手机上 19–24px 的独立链接极易点错。
   按移动端惯例抬到 44px（HIG / WCAG AAA）。
   ⚠️ 云状胶囊（.gera-pill）**故意不动**：一页 26–41 个，抬到 44 会把页面撑长
   一大截，而它们本身已 ≥24px 合规。
   （页脚 / 导航 / 语言胶囊在 navfoot.css 里，那边加载更晚。） */
@media (max-width: 768px) {
  body.gera .gera-card > h3 > a,
  body.gera .gera-card > p.gera-micro > a,
  body.gera .gera-wrap > p.gera-micro > a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* ⚠️ 页脚 colophon 的两个链接（Privacy policy / Terms）**不能放这里**：
     navfoot.css:237 有 `body.gera .gera-foot .gera-colophon a { display: inline }`（0,3,1），
     而 atlas.css 加载更早 —— 放在这里会被它压掉（实测 display 仍是 inline、min-height 0）。
     那一条搬到 navfoot.css 里去了。 */
}

/* ── 2026-10-12 WCAG 1.4.1：正文行内链接不能只靠颜色区分 ────────────────────
   axe-core 实测：14 页 / 38 个节点违规（`link-in-text-block`，serious）。
   命中的都是**没有 class 的行内链接**，例如：
     「…is on the <a href="/services/">services page</a>.」
     「…see <a href="/pricing/">what the 5% covers and what it does not</a>.」
   正文里它们和周围文字只有颜色之差 → 色觉障碍读者看不出这是链接。
   处置：给「段落/列表里、没有 class 的链接」加下划线。
   ⚠️ 只匹配 `:not([class])` —— 按钮（.gera-btn）、卡片（.gera-card a）、
   胶囊、页脚导航都带 class，一个都不会被下划线碰到；下划线不改变行高，不引起重排。 */
body.gera p a:not([class]),
body.gera li a:not([class]),
body.gera td a:not([class]),
body.gera th a:not([class]),
body.gera p a:not([class]):hover,
body.gera li a:not([class]):hover,
body.gera td a:not([class]):hover,
body.gera th a:not([class]):hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
/* ⚠️ 2026-10-12 补：第一版只写了 `p a` / `li a`，漏了**表格单元格**里的行内链接 ——
   /compliance/ 的 `<td>…<a href="/not-specialized-in/">see the conditions</a>…</td>`
   因此没被下划线覆盖，axe 仍在报。td/th 一并纳入。 */

/* ── 2026-10-13 搜索结果版式（HUNT_1013 第 3 项）──────────────────────────
   病根：搜索页那个 `<div id="gera-search" style="…max-width:760px">` 是当年
   「窄栏版心 640」时代写死的**行内**宽度。C1 版心留白改造把 .gera-narrow 放到
   1160 之后，只有这个行内宽度没跟上 —— 实测 /search/ 结果卡 760px，右侧 400px 空白。
   行内样式只能用 !important 覆盖（这里没有别的办法，也不打算动页面内容）。
   做法：容器放开到版心；输入框与说明行仍封 720（读起来不散）；结果卡改成两列网格
   （≥1025px），窄屏单列。卡片自带的 margin-bottom 在网格里要归零，否则 gap 叠加。 */
body.gera #gera-search { max-width: none !important; }
body.gera #gera-search > input,
body.gera #gera-search > #gs-meta { max-width: 720px; }
body.gera #gs-res { display: grid; gap: 12px; grid-template-columns: 1fr; }
body.gera #gs-res > .gera-card { margin-bottom: 0; }
body.gera #gs-res > .gera-micro { grid-column: 1 / -1; }
@media (min-width: 1025px) {
  body.gera #gs-res { grid-template-columns: 1fr 1fr; }
}

/* ── 2026-10-13 <picture> 全站兜底（HUNT_1013 第 6 项）────────────────────
   背景：`ops/webpify.py` 只改 `design/v6/**.html`，而 `build-v6.sh` 自己写着
   「生成器会重写 html → 先 webpify 再生成等于白做」。实测线上：351 个内容页里
   **319 页 / 1,698 张图**的正文里没有 <picture>（含首页 19 张、/inicio/ 19 张），
   这些图只有 JPEG，比全站其它页大 30–55%。webp 文件本身都在（主题 assets/img 192 个）。
   处置：`ops/webpify-db.php` 直接在 post_content 上补 <picture>（幂等、缺 webp 不包）。
   ⚠️ 必须先有这条规则：<picture> 默认是 inline 盒子，会参与布局；
   `display:contents` 让它**不生成盒子**，img 的排布与加包裹前逐像素相同。
   实测过的坑（v6.css 注释里记着）：漏掉它 → img 的 width:100% 会变成
   「img 占 picture 的 100%、picture 占 img 的宽度」的循环。
   另外确认过：全站 CSS 里 `> img` 直接子选择器只有 v6.css 的 .chero-hero 两处，
   且都已补 `>picture>img` 伴随规则 —— 加这一层不会让任何规则失配。 */
body.gera picture { display: contents; }

/* ---- map panel dense type on phones (MAPFONT_1013, 2026-10-13) ------------
   REGION_HERO2 deferred this on purpose: the panel's own type was still 11-12px
   on phones. Measured at 390px on /region/zhejiang/: 55 nodes under 12.5px —
   .gera-mstat .l 11px, .gera-mlabel 11.5px, .gera-mnote / .gera-mcov .k /
   .gera-mtag / the city rows 12px. Raising it makes the panel TALLER, and the
   CLS guards (--mpanel-h / --magg-h) were snapshotted against the old type, so
   the fonts and the re-measure have to ship together — that is this batch.
   Scoped to .gera-mpanel: nothing outside the map panel moves.
   NOT a blanket `span`/`p` selector on purpose — that would beat
   `.gera-mstat .n` (the 32px figures) on equal specificity and later order. */
@media (max-width: 768px) {
  body.gera .gera-mpanel .gera-mstat .l,
  body.gera .gera-mpanel .gera-mlabel,
  body.gera .gera-mpanel .gera-mnote,
  body.gera .gera-mpanel .gera-mcov .k,
  body.gera .gera-mpanel .gera-mtag,
  body.gera .gera-mpanel .gera-mlist.gera-mcmp li span { font-size: 13px; }
}

/* ---- paragraph-only links get a 24px target (FIXPLAN_1013 / #3) ----------
   Measured on /regions/ at 390px: the only remaining sub-24px target on the
   whole page was `<p><a href="/who-we-are/">Who we are &rarr;</a></p>` at
   110x22px. The WCAG 2.2 SC 2.5.8 inline exception does NOT cover it: the link
   is not inside a sentence, and its own text is what sets the line-height, so
   it is not "constrained by the line-height of non-target text" either.
   `p > a:only-child` is the honest selector for "a link that is the whole
   paragraph" — links inside prose (the exempt case) are not matched, because
   they have text siblings. 2px of block padding takes it to 26px. */
body.gera p > a:only-child { display: inline-block; min-height: 24px; padding-block: 1px; }


/* ═══════════════════════════════════════════════════════════════════════════
   🔴 2026-10-22 · 表单控件字体重置（全站）
   ───────────────────────────────────────────────────────────────────────────
   实测线上：首页 CTA 的「Get a quote」按钮 computed font-family = **Arial**，
   而全站其余文字都是 IBM Plex Sans —— 因为浏览器对 <button>/<input> 有
   **UA 默认字体**（Arial 13.33px），**不继承**父级 font-family。
   v6 的 `.btn` 只写了 font-size/font-weight，没写 family → 全站所有 .btn 都是 Arial。
   （`.faq summary` / `.seg button` / `.xp-tab` 同理。）
   只补 family，不动 size/weight —— 那两样各 class 已经给了。 */
body.gera button,
body.gera input,
body.gera select,
body.gera textarea {
  font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2026-10-29 — MOBILE /contact/: 询价表单提到说明文字之前
   ---------------------------------------------------------------------------
   实测（2026-10-29，390×844）：/contact/ 的表单起点在 1,927px = **2.3 屏**。
   之前是 hero 图 + 面包屑 + h1 + 一句 lead + 整段「WHAT TO SEND」说明 + 两个提示框，
   买家要先划过 1,000+ px 的散文才看到第一个输入框。桌面端表单在第一屏右侧（y≈415），
   没有这个问题 —— 所以只改手机，用 order 把表单卡提到同列最前。

   选择器限定得很死：只有「直接子级里有 .gera-card、且该卡里有 .gera-rfq」的
   .gera-grid--2 才重排 → 不会碰到 /contact/ 内部那些字段行网格（它们的子级是
   p.gera-field），也不会碰到别页的 .gera-grid--2。 */
@media (max-width: 768px) {
  body.gera .gera-grid--2:has(> .gera-card .gera-rfq) { display: flex; flex-direction: column; }
  body.gera .gera-grid--2:has(> .gera-card .gera-rfq) > .gera-card:has(.gera-rfq) { order: -1; }
}


/* ---- CTA band: 让照片透出来（2026-10-31，VISFIX_1022 遗留的"右侧深色空洞") -------
   实测病根（不是审美问题，是两层叠加把图压没了）：
     .cta-bg{opacity:.34} × scrIM 96%→72% → 右侧只剩约 **9.5%** 的图像，一张
     「浅木桌 + 笔记本 + 青绿件」的亮照片被压成一块黑，视觉上就是"右边 60% 是空的"。
   改法：图像 .34 → .72，scrim 从「整片压黑」改成「左侧压黑、右侧放行」。
   文字安全（按 1440 量）：h2 结尾 x≈885/1440=61% → 那里 alpha≈.71，白字对合成底
   4.3:1（h2 ≥40px，大字号门槛 3:1）；正文与表单都在 x<700（alpha≥.82，≈5.9:1）。
   手机档另有竖向渐变（mobile1017.css），这里用 min-width 限定，不碰手机。 */
@media (min-width: 769px) {
  body.gera .g6 .cta-bg { opacity: 1; }
  /* 压缩上下留白：原 112/128 的 padding 让这段高 553px，而内容到底部只到 312px
     → 下方 240px 是纯黑。收到 96/64，高度 553 → 473，黑色空洞少一半。 */
  body.gera .g6 .cta-tx { padding: var(--s7) var(--s3) var(--s6); }
  body.gera .g6 .cta-scrim {
    background: linear-gradient(105deg,
      rgba(5, 9, 18, .95) 0%,
      rgba(5, 9, 18, .90) 50%,
      rgba(5, 9, 18, .48) 74%,
      rgba(5, 9, 18, .12) 100%);
  }
}


/* ---- What we source：右面板"下半截空白"（2026-10-31）----------------------
   实测：.xp-stage 固定 520px，而 panel 内 media(4/3=290) + body(316) 都更矮，
   且 align-items:center → 上下各空约 100px，白卡片看上去是"半截空的"。
   改法（≥1081px）：图片撑满卡片高度（cover 裁两侧 26% 宽，产品居中不受影响），
   右列改 flex 纵向 + 末项 margin-top:auto，"Open the category →" 贴到卡片底边
   → 卡片四边都有内容，不再有空白带。手机/平板（≤1080）不动，那里是纵向堆叠。 */
@media (min-width: 1081px) {
  body.gera .g6 .xp-panel { align-items: stretch; }
  body.gera .g6 .xp-media { aspect-ratio: auto; height: 100%; min-height: 0; }
  /* 右列整体纵向居中（不是把末项推到底）：实测「末项贴底」会在标题与省份条之间
     拉出 185px 空洞；居中后上下留白各约 85px，读起来是一整块。 */
  body.gera .g6 .xp-body { display: flex; flex-direction: column; justify-content: center; }
}


/* ---- 品类页 hero：同一组数字说了两遍（2026-10-31）---------------------------
   实测 /category/hardware-tools/ 1440px：
     `.chero-txt > .eyebrow` = "● 1,731 company records in this category · 26 provinces"（y 452）
     `.chero` 右列统计         = "1,731 / records in this category"、"26 / provinces with records"、
                                 "358 / in the largest cluster (Zhejiang)"（y 683，同一屏）
   → 两个数字在 500px 内说两遍，读起来像凑内容。右列那份更全（多一个最大产业带），
     所以**只在两者并排的宽度隐藏 eyebrow**（≥1025px）；≤1024 时右列落到正文下方
     （实测 1024 时统计块 top 898、left 24，与文首隔了整段），此时 eyebrow 是首屏
     唯一的数字，必须保留。28 个品类页同构，一处规则覆盖全部。 */
@media (min-width: 1025px) {
  /* 必须写到 (0,5,1) 才压得住 v6 的 `body.gera .g6 .chero .eyebrow{display:flex}`
     （那条是 4 个类）；`> .eyebrow` 只用 3 个类，第一次写就是这个原因没生效。
     `:has(.chero-side)` 保证只在「右列统计块存在」的版式里隐藏 —— 没有统计块的
     版式（如 furniture-home-living 的 v-stack）仍保留 eyebrow 上的数字。 */
  body.gera .g6 .chero:has(.chero-side) .chero-txt > .eyebrow { display: none; }
}