/* =============================================================================
   字体：思源黑体（Source Han Sans SC ≡ Noto Sans SC，SIL OFL 1.1）
   
   ★ 三条落地动作（漏掉任何一条都是授权瑕疵）：
   1. **随附许可副本** —— OFL 要求再分发时保留许可文本。
      构建会把 OFL.txt 放进 dist/assets/fonts/，与字体文件同目录。
   2. **子集化属于"修改字体"** —— Noto Sans SC 的 OFL 首行**确实**声明了
      Reserved Font Name 'Source'（2026-10-14 已逐字核对）。因此修改后的版本
      不得沿用原字体名发布。本站子集产物已重命名为私有名 **LMSC**，
      字体内部 name 表亦同步改写，故不构成 RFN 违规。
   3. **不用外部字体 CDN** —— 既为国内访问速度，也为部署通用性：
      站点不应因为某个外链挂掉而变形。

   ★ 字体文件如何生成
   -----------------------------------------------------------------
   字体文件不随仓库提交（体积大、且属于可再生成的构建产物），
   同时**构建期也不生成字体**——子集化需要 17 MB 源字体与 fontTools，
   不该让每次构建都背上这个负担。做法是：在有网络的环境执行一次
   `.workbuddy/fontwork/make_subset.py`，产物落到 assets/fonts/。

   实测数据（2026-10-14）：
     源字体  Noto Sans SC 可变字体（wght 100–900），17.7 MB
     字符集  1036 字（其中汉字 932），从 dist/ 全部 html/js/xml/txt 实测
     字重    400 / 500 / 700 / 900，从合并后的 styles.css 实测
     产物    四个 woff2 合计 622 KB，单文件 154–157 KB

   ⚠️ 两条来自实践的更正如实记在这里：
     ① **不要试图按批调 CSS 接口再拼接**（例如用 Google Fonts 的
        `css2?text=` 每次 300 字、分多次取回再合并）——分片难组装、易漏字，
        且字符集靠人工圈定。本地 fontTools 的 instancer + pyftsubset
        一次成型，字符集直接来自构建产物。
     ② **必须先实例化、再子集化**，不要把可变字体直接子集化输出。
        源字体带 fvar/gvar/HVAR 等可变表，直接产出会得到浏览器解析异常的
        "描摹损坏"文件；经 `instantiateVariableFont` 抽取静态实例后
        这些表被正确展开。可复验：打开产物 woff2 应看不到 fvar/gvar/HVAR。

   ⚠️ **保留字体名（RFN）**：OFL 首行声明 Reserved Font Name 'Source'。
      子集化属"修改字体"，修改版不得沿用 RFN。产物一律改名 LMSC，
      字体内部 name 表亦同步改写。详见 assets/fonts/LMSC-NOTICE.txt。

   在字体文件就位之前：下方 @font-face 会 404，
   但 body 的回退栈（PingFang SC / Microsoft YaHei）会立即接管——
   **正文照常可读，不会白屏、不会阻塞渲染**。这是刻意的设计。
   ========================================================================== */

@font-face {
  font-family: "LMSC";
  /* 相对路径 —— 相对本 CSS 文件（/assets/styles.css）解析，
     因此部署到任意子路径时自动成立，不需要改代码。 */
  src: url("fonts/LMSC-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}

@font-face {
  font-family: "LMSC";
  src: url("fonts/LMSC-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}

@font-face {
  font-family: "LMSC";
  src: url("fonts/LMSC-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}

/* 显示层字重用 Black（900）。它是四个字重里最大的一份，
   因此**不做首屏预载**——只在真正出现大字标题时才加载。 */
@font-face {
  font-family: "LMSC";
  src: url("fonts/LMSC-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
}

/* =============================================================================
   乐慕己 Liebe Mich — 设计令牌 Design Tokens
   来源：《乐慕己-视觉识别与设计语言》V1（2026-10-13 品牌方评审通过）
        《乐慕己主站-网站设计思路》2.3 / 2.4
        《乐慕己主站-站点地图与页面清单》7.3
   ⚠️ 本文件是唯一真源。任何页面不得写死色值 / 字号 / 间距。
   ========================================================================== */

:root {
  /* ---- 主色板 ------------------------------------------------------------
     森野绿为品牌主色。深潜绿用于深色底与页脚。
     云母白是全站主底——不是纯白，这是一处刻意的选择：
     纯白在长时间阅读里会显得薄，云母白更接近纸张。                        */
  --forest:     #123A2E;   /* 森野绿 · 主色 */
  --abyss:      #0A211A;   /* 深潜绿 · 深色底 / 页脚 */
  --moss:       #2F5E4A;   /* 苔原绿 · 次级文字 / 小标签 */
  --mist:       #A8C4B5;   /* 雾霭绿 · 深底上的次要文字 / 刻度 */
  --bone:       #F4F1E9;   /* 云母白 · 全站主底 */
  --paper:      #FFFFFF;   /* 纸白 · 卡片底 */
  --ink:        #0B0B0B;   /* 墨黑 · 正文 */
  --graphite:   #6E6E6E;   /* 石墨灰 · 注释 / 表下注 */
  --line:       #E3E0D8;   /* 细线灰 · 全站唯一的线色 */
  --nai:        #3E8E4E;   /* NAI 标识绿 · 仅用于自持标识语境，不得他用 */

  /* ---- 系列色标 ----------------------------------------------------------
     五个系列各自一色。仅用于系列标识、色标条与卡片顶边，不做大面积铺底。 */
  --no1: #2E4E7E;   /* NO.1 夜靛蓝 · 静谧星河 */
  --no2: #1F4D3A;   /* NO.2 深林绿 · 时光秘语 */
  --no3: #7FA06B;   /* NO.3 苔绿   · 燃·OFFICE */
  --no4: #4A7C59;   /* NO.4 草绿   · 悦·轻畅 */
  --no5: #C98A3C;   /* NO.5 暖橙   · 怡·慢生活 */

  /* ---- 子品牌 汪氏久元青 --------------------------------------------------
     青花蓝系。共用主品牌栅格、字阶与组件；只在色相上与主品牌区分。 */
  --porcelain:    #1F4E6B;   /* 青花蓝 */
  --porcelain-lt: #2C6E8F;   /* 青花浅 */
  --cool:         #EDF3F5;   /* 冷白 */

  /* ---- 字体 --------------------------------------------------------------
     单一字体族：思源黑体（Source Han Sans SC ≡ Noto Sans SC，OFL 1.1）。
     子集化产物以私有名 LMSC 内联加载，规避 RFN 约束。
     回退栈含 PingFang SC / Microsoft YaHei —— 字体不阻塞首屏文本渲染。   */
  --font-cn: "LMSC", "Source Han Sans SC", "Noto Sans SC", "思源黑体",
             "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* ---- 字阶（流体，不在断点处跳变）----------------------------------------
     两端锁定值来自设计思路 2.4；中间用 clamp() 过渡。                        */
  --fs-display: clamp(40px, 5.2vw, 72px);
  --fs-h1:      clamp(32px, 3.4vw, 48px);
  --fs-h2:      clamp(26px, 2.4vw, 34px);
  --fs-h3:      clamp(20px, 1.7vw, 24px);
  --fs-h4:      clamp(17px, 1.35vw, 19px);
  --fs-body-l:  clamp(17px, 1.25vw, 18px);
  --fs-body:    clamp(16px, 1.1vw, 17px);
  --fs-caption: 13px;
  --fs-overline: 12px;

  /* ---- 行高与字距 --------------------------------------------------------
     中文长文的行高 1.8 是硬值，不随屏幕缩小——这是阅读舒适度的底线。      */
  --lh-display: 1.00;
  --lh-h1: 1.10;
  --lh-h2: 1.20;
  --lh-h3: 1.30;
  --lh-h4: 1.40;
  --lh-body: 1.80;
  --lh-caption: 1.60;

  --ls-display: -0.02em;
  --ls-h1: -0.02em;
  --ls-h2: -0.01em;
  --ls-tight: -0.03em;      /* 显示层收敛后的补偿字距 */
  --ls-overline: 0.14em;    /* 小标签的大写字距 */
  --ls-caption: 0.01em;

  /* ---- 间距刻度 ---------------------------------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 16px;
  --s4: 24px;
  --s5: 32px;
  --s6: 48px;
  --s7: 64px;
  --s8: 96px;
  --s9: 128px;

  /* ---- 版式铁律 ----------------------------------------------------------
     ★ 圆角只有两种：0（直角）与 999px（全圆）。
     内容容器一律直角；全圆仅保留给取景器（圆镜）与公示刻度胶囊。
     这两种之外不存在任何第三值——包括 4px、8px 这类"看起来更柔和"的中间值。
     阴影几乎不用，层级靠留白与 1px 细线。                                  */
  --radius: 0;
  --radius-round: 999px;

  /* ---- 布局 -------------------------------------------------------------- */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-gap: clamp(64px, 9vw, 128px);   /* 区块间距 96–160px 的流体实现 */
  --rule: 1px solid var(--line);

  /* ---- 断点（供参考，CSS 媒体查询需写死数值）---------------------------- */
  /*  480 / 768 / 1024 / 1280  */
}

/* 深色区块：反色不靠 filter，靠显式的类。
   深底上的文字层级用雾霭绿而不是降低不透明度——降透明度在深底上会发灰发脏。 */
.is-dark {
  --section-bg: var(--abyss);
  --section-fg: var(--bone);
  --section-fg-dim: var(--mist);
  --section-rule: 1px solid rgba(244, 241, 233, .16);
}

.is-bone { --section-bg: var(--bone); --section-fg: var(--ink); --section-fg-dim: var(--graphite); --section-rule: var(--rule); }
.is-paper { --section-bg: var(--paper); --section-fg: var(--ink); --section-fg-dim: var(--graphite); --section-rule: var(--rule); }

/* =============================================================================
   乐慕己 Liebe Mich — 基础层 Base
   重置 + 排版 + 全站通用原子组件。只放"出现在两处以上"的东西。
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-cn);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* 焦点可见：这是无障碍底线，任何情况下不得 outline:none 了事 */
:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.is-dark :focus-visible { outline-color: var(--mist); }

/* 供读屏使用、视觉隐藏 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 跳至正文：键盘用户的第一个可聚焦元素 */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--forest); color: var(--bone);
  padding: var(--s3) var(--s4); font-size: var(--fs-caption); font-weight: 700;
}
.skip:focus { left: 0; }

/* ---- 排版 ---------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0; }

.t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 900;
}
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 700; }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 700; }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 700; }

.t-lead { font-size: var(--fs-body-l); line-height: var(--lh-body); }
.t-cap  { font-size: var(--fs-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); color: var(--graphite); }

/* Overline：小标签。用于模块序号、字段名、表头。
   大写 + 大字距 + 700，是这套系统里"最小的声音"，也是出现最多的一个件。 */
.t-overline {
  font-size: var(--fs-overline);
  line-height: var(--lh-caption);
  letter-spacing: var(--ls-overline);
  font-weight: 700;
  text-transform: uppercase;
}

/* 斜动势：字标的前倾是品牌基因。收敛为几何倾斜，只作用于短标题与编号，
   不作用于长句——长句斜切会显著降低可读性。 */
.t-skew { transform: skewX(-8deg); }

/* 数字：靠 tabular-nums 对齐数位，不靠换字体 */
.t-num { font-variant-numeric: tabular-nums; }

/* ---- 布局 ---------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-gap); background: var(--section-bg, var(--bone)); color: var(--section-fg, var(--ink)); }
.section + .section { border-top: var(--section-rule, var(--rule)); }

/* 模块头：序号 + 标题 + 说明。全站统一这一种排法。 */
.mhead { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s6); }
.mhead .idx { color: var(--section-fg-dim, var(--graphite)); }
.mhead .sub { color: var(--section-fg-dim, var(--graphite)); max-width: 62ch; }

/* ---- 细线列表 ------------------------------------------------------------
   1px 细线 + 两位编号 = 全站秩序系统。用于支柱、条目、流程、规格。       */
.ruled { border-top: var(--section-rule, var(--rule)); }
.ruled > li { list-style: none; border-bottom: var(--section-rule, var(--rule)); padding: var(--s4) 0; }
.ruled { margin: 0; padding: 0; }

/* ---- 按钮 ----------------------------------------------------------------
   只有两种：实心（主行动）与描边（次行动）。都是直角，都没有圆角、阴影、渐变。 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 44px;                 /* 触控目标 ≥44×44px，硬规则 */
  padding: var(--s3) var(--s5);
  border: 1px solid var(--forest);
  border-radius: var(--radius);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em;
  cursor: pointer; background: transparent; color: var(--forest);
  transition: background-color .18s, color .18s;
}
.btn--solid { background: var(--forest); color: var(--bone); }
.btn--solid:hover { background: var(--abyss); }
.btn--ghost:hover { background: rgba(18, 58, 46, .06); }
.is-dark .btn { border-color: var(--mist); color: var(--bone); }
.is-dark .btn--solid { background: var(--bone); color: var(--abyss); border-color: var(--bone); }

/* ---- 卡片（无阴影版）----------------------------------------------------- */
.card { background: var(--paper); border: var(--rule); }
.card--pad { padding: var(--s5); }

/* 系列色标条：桌面竖向贴左，移动横向贴顶。
   色标是唯一的"彩色面积"，宽度刻意压到 3px——它是指示，不是装饰。 */
.seriesbar { background: var(--series, var(--forest)); }

/* ---- 表格 ----------------------------------------------------------------
   ⚠️ 表格在移动端一律改为堆叠式定义列表，绝不横向滚动。
   需要横向滚动的表格 = 没有做完双端适配。                                */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: var(--s3) var(--s4); vertical-align: top; border-bottom: var(--rule); }
.tbl th { font-size: var(--fs-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; font-weight: 700; color: var(--section-fg-dim, var(--graphite)); border-bottom: 1px solid var(--section-fg, var(--ink)); }
.tbl tbody tr:last-child td { border-bottom: 0; }

/* 表下注：合规声明与修订说明都长在这里。字号小，但不可省略。 */
.tnote { font-size: var(--fs-caption); line-height: 1.7; color: var(--section-fg-dim, var(--graphite)); margin-top: var(--s4); }
.tnote b { color: var(--section-fg, var(--ink)); }

/* ---- 徽章 vs 文字条目：形制三分 -------------------------------------------
   这是一条合规要求，不是样式偏好（合规清单 3.5 / 3.5.1）：
   · 体系认证 / 行政许可 / 工厂注册 —— 一律用「文字条目」（细线分隔），
     因为它们都属于生产体系，同属一个类别；
   · NAI「100% 天然有效成分」—— 是品牌自持标识，用「徽章」（带描边与标识绿），
     因为它与前者不是一类东西，混排即构成引人误解。
   形制的差异本身就是"这两件事不一样"这句话。                             */
.badge-nai {
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--nai); color: var(--nai);
  padding: var(--s1) var(--s3);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em;
}
.cert-entry { border-bottom: var(--rule); padding: var(--s4) 0; }
.cert-entry:last-child { border-bottom: 0; }
.cert-entry .name { font-weight: 700; }
.cert-entry .kind {
  display: inline-block; margin-left: var(--s2);
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--section-fg-dim, var(--graphite));
  border: 1px solid var(--line); padding: 1px 6px;
}
.cert-entry .meta { font-size: var(--fs-caption); color: var(--section-fg-dim, var(--graphite)); margin-top: var(--s2); }
.cert-entry .means { font-size: var(--fs-caption); color: var(--section-fg, var(--ink)); margin-top: var(--s2); }

/* 固定声明条：认证区的三句声明任何屏宽都不删 */
.disclaim {
  border-left: 2px solid var(--forest);
  padding-left: var(--s4);
  font-size: var(--fs-caption); line-height: 1.7;
  color: var(--section-fg-dim, var(--graphite));
}
.is-dark .disclaim { border-left-color: var(--mist); }

/* ---- 图像 ----------------------------------------------------------------
   所有照片统一深绿暗调。遮罩用于文字压图，保证可读性达 WCAG AA。 */
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.scrim { position: relative; }
.scrim::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,33,26,.28) 0%, rgba(10,33,26,.62) 100%);
}
.scrim > * { position: relative; z-index: 1; }

/* ---- 工具 ---------------------------------------------------------------- */
.stack > * + * { margin-top: var(--s4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.grid { display: grid; gap: var(--s5); }
.nowrap { white-space: nowrap; }

/* 打印：只保留正文，去掉装饰。报告与合规材料常需要打印留档。 */
@media print {
  .skip, .site-nav, .site-footer, .btn { display: none !important; }
  body { background: #fff; }
  .section { padding-block: var(--s5); break-inside: avoid; }
}

/* =============================================================================
   乐慕己 Liebe Mich — 页面与组件样式
   依赖 tokens.css + base.css。本文件只放具体组件的排版。

   全局铁律复述（写在这里，因为最容易被无意破坏）：
   · 圆角只有 0 与全圆两种。内容容器一律直角。
   · 不用阴影。层级靠留白与 1px 细线。
   · 2×2 从来不是答案：四列在移动端一律竖排，不折成两行两列。
   ========================================================================== */

/* ==========================================================================
   页头
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 241, 233, .92);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: var(--rule);
}
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: 72px; }
.site-header .brand { display: flex; align-items: center; flex: 0 0 auto; }
.site-header .logo { height: 30px; width: auto; }
.site-header .logo-fallback { font-weight: 900; letter-spacing: .06em; font-size: 15px; }

.site-nav.desk { display: flex; gap: var(--s5); flex-wrap: wrap; }
.site-nav a {
  position: relative; font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em;
  color: var(--graphite); padding: var(--s2) 0;
}
.site-nav a:hover { color: var(--forest); }
.site-nav a.on { color: var(--forest); }
.site-nav a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--forest);
}
.site-nav.mob { display: none; }

@media (max-width: 1023px) {
  .site-nav.desk { display: none; }
  .site-nav.mob { display: block; position: relative; }
  .site-nav.mob summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: var(--rule);
  }
  .site-nav.mob summary::-webkit-details-marker { display: none; }
  .site-nav.mob .panel {
    position: absolute; right: 0; top: calc(100% + 10px);
    min-width: 220px; background: var(--paper); border: var(--rule);
    padding: var(--s3) var(--s4); display: grid; gap: var(--s3);
  }
  .site-nav.mob .panel a { font-size: 15px; padding: var(--s1) 0; }
}

/* ==========================================================================
   页脚
   ========================================================================== */

.site-footer { padding-block: var(--s8) var(--s6); }
.site-footer .fgrid {
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s7) var(--s5);
}
.site-footer .fbrand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.site-footer .logo { height: 26px; filter: brightness(0) invert(1); opacity: .92; }
.site-footer .logo-fallback { color: var(--bone); font-weight: 900; letter-spacing: .06em; }
.site-footer .fgroup ul { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); }
.site-footer .fgroup a { font-size: var(--fs-caption); color: var(--mist); }
.site-footer .fgroup a:hover { color: var(--bone); }
.site-footer .fnote {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid rgba(244, 241, 233, .16);
  display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
}
.site-footer .fnote p { max-width: 68ch; color: var(--mist); }
/* 备案号：与版权同处最底一行，靠分隔符隔开；下划线用 border 而非 text-decoration，
   免得和中文字形的底部笔画粘在一起。 */
.site-footer .fnote .fsep { margin: 0 .55em; opacity: .45; }
.site-footer .fnote .icp {
  color: var(--mist); text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 233, .28);
  transition: color .25s ease, border-color .25s ease;
}
.site-footer .fnote .icp:hover { color: var(--bone); border-color: var(--bone); }
.site-footer .t-overline { color: var(--mist); }

@media (max-width: 767px) {
  .site-footer .fgrid { grid-template-columns: 1fr 1fr; }
  .site-footer .fbrand { grid-column: 1 / -1; }
}

/* ==========================================================================
   01 首屏
   ========================================================================== */

.hero { padding-block: clamp(48px, 7vw, 96px) clamp(64px, 9vw, 128px); }
.hero .hgrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero .kicker { color: var(--moss); }
.hero h1 { margin: var(--s4) 0 var(--s5); }
.hero .hsub { color: var(--graphite); max-width: 40ch; }
.hero .hact { margin-top: var(--s6); }
.hero .hmedia { position: relative; }
.hero .hmedia img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

@media (max-width: 767px) {
  /* 移动端：图在上、字在下（与线框的双端重排表一致） */
  .hero .hgrid { grid-template-columns: 1fr; }
  .hero .hmedia { order: -1; }
  .hero .hmedia img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   02 品牌定义
   ========================================================================== */

.define {
  font-size: clamp(20px, 2.4vw, 30px); line-height: 1.6; font-weight: 500;
  max-width: 28ch; letter-spacing: -.01em;
}
.define em { font-style: normal; border-bottom: 2px solid var(--forest); padding-bottom: 2px; }
.defmeta { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s6); flex-wrap: wrap; }

/* ==========================================================================
   03 NPTD 四支柱
   ★ 手机端（≤599px）**1 列竖直堆叠，不折成 2×2**——保证阅读节奏。
     平板（600–1023px）为两列，与 8 栏栅格一致。
   ⚠️ 早期版本的注释写成"移动端一律 1 列、不折 2×2"，与下方的平板规则冲突。
      注释比代码更"绝对"时，后来者会以为代码写错了——所以这里把断点写清楚。
   ========================================================================== */

.pillars {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: var(--rule); border-left: var(--rule);
}
.pillar {
  border-right: var(--rule); border-bottom: var(--rule);
  padding: var(--s5) var(--s4) var(--s6);
  display: flex; flex-direction: column; gap: var(--s2);
}
.pillar .pnum { color: var(--mist); }
.pillar .pen { color: var(--forest); letter-spacing: -.01em; }
.pillar .pcn { color: var(--graphite); }
.pillar .pd { color: var(--graphite); font-size: var(--fs-caption); line-height: 1.7; margin-top: var(--s2); }

@media (max-width: 1023px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .pillars { grid-template-columns: 1fr; } }

/* ==========================================================================
   04 道地溯源
   ========================================================================== */

.srcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
/* 产区面板：底图是**抽象地形纹理**，只提供质感，不承担地理信息。
   地理事实由右侧清单承担 —— 图不冒充地图，文字不冒充证据。 */
.srcmap {
  position: relative;
  aspect-ratio: 4 / 3; border: var(--rule);
  background-color: #14281f;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.srcmapcap {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  padding: var(--s2) var(--s3);
  color: rgba(244, 241, 233, .78);
  background: linear-gradient(to top, rgba(9, 22, 16, .74), rgba(9, 22, 16, 0));
}
.aitag {
  border: 1px solid rgba(244, 241, 233, .3);
  padding: 2px 7px; font-size: 10px; letter-spacing: .14em; white-space: nowrap;
}
.srclist { list-style: none; }
.srclist li { display: grid; grid-template-columns: 1.1fr auto; gap: var(--s1) var(--s4); align-items: baseline; }
.srclist .splace { color: var(--forest); }
.srclist .scrop { font-weight: 700; font-size: var(--fs-caption); text-align: right; }
.srclist .snote { grid-column: 1 / -1; }

@media (max-width: 767px) { .srcgrid { grid-template-columns: 1fr; } }

/* ==========================================================================
   05 系列卡 / 单品卡
   ========================================================================== */

.sgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: var(--rule); border-left: var(--rule); }
.scard {
  position: relative; border-right: var(--rule); border-bottom: var(--rule);
  padding: var(--s5) var(--s4) var(--s6) calc(var(--s4) + 14px);
  display: block; background: var(--paper);
  transition: background-color .2s;
}
.scard:hover { background: var(--bone); }
.scard .sbar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--series);
}
.scard .sbody { display: flex; flex-direction: column; gap: var(--s2); }
.scard .sno { color: var(--series); }
.scard .sname { color: var(--forest); }
.scard .sscene { color: var(--graphite); }
.scard .sline { font-size: var(--fs-caption); color: var(--ink); margin-top: var(--s2); }

@media (max-width: 1023px) {
  .sgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  /* 移动端：单列。若改为横向滑动，卡片宽度取 78vw（见站点地图 5.1） */
  .sgrid { grid-template-columns: 1fr; }
}

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
@media (max-width: 1023px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .pgrid { grid-template-columns: 1fr; } }

.pcard {
  position: relative; display: flex; gap: var(--s4);
  background: var(--paper); border: var(--rule);
  padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 6px);
  transition: border-color .2s;
}
.pcard:hover { border-color: var(--forest); }
.pcard .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--series); }
.pcard .pbody { display: flex; flex-direction: column; gap: var(--s2); }
.pcard .pno { color: var(--graphite); }
.pcard .pname { color: var(--forest); }
.pcard .pmeta { color: var(--graphite); }

.sgroup { margin-bottom: var(--s7); }
.sgrouphead { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.sgrouphead .sbar { width: 3px; height: 22px; background: var(--series); }
.sgrouphead .t-cap { margin-left: auto; }

/* ==========================================================================
   06 生活方式
   ========================================================================== */

.lifegrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: var(--rule); }
.lifegrid li { border-bottom: var(--rule); }
.lifegrid a, .lifegrid .lbody {
  display: grid; grid-template-columns: 200px 1fr auto; gap: var(--s4);
  align-items: baseline; padding: var(--s5) 0;
}
.lifegrid .lname { color: var(--forest); }
.lifegrid .ld { color: var(--graphite); }
.lifegrid .lgo { color: var(--forest); opacity: .5; }
.lifegrid a:hover .lgo { opacity: 1; }

@media (max-width: 767px) {
  .lifegrid a, .lifegrid .lbody { grid-template-columns: 1fr; gap: var(--s2); }
  .lifegrid .lgo { display: none; }
}

/* ==========================================================================
   07 署名专家
   ========================================================================== */

.persongrid { display: grid; grid-template-columns: 300px 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.persongrid.wide { grid-template-columns: 320px 1fr; }
.portrait {
  aspect-ratio: 1 / 1; border-radius: var(--radius-round);
  border: 1px solid rgba(244, 241, 233, .28);
  display: flex; align-items: center; justify-content: center;
  color: var(--mist); font-size: var(--fs-caption); letter-spacing: .12em;
  background: rgba(244, 241, 233, .04);
  overflow: hidden;
}
/* 真实肖像。**只做裁切与极轻的影调统一**，不改人物外貌——
   磨皮、液化、换背景都属于"让人看起来像另一个人"，
   而肖像的全部价值就在于"这就是他"。
   ⚠️ 只给一个方向的尺寸：`height: 100%` 在网格里解析的是**整行**的高度
      （由右侧文字决定），图片会被拉成胶囊形。`aspect-ratio` + `height:auto` 才是方形的。 */
img.portrait {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; align-self: start;
  object-fit: cover; object-position: 50% 15%;
  filter: saturate(.94) contrast(1.02);
}
.section:not(.is-dark) .portrait { border-color: var(--line); color: var(--graphite); background: var(--bone); }
.pbody { display: flex; flex-direction: column; gap: var(--s3); }
.pname { font-size: var(--fs-h2); font-weight: 700; }

.cred { list-style: none; margin: var(--s4) 0 0; }
.cred li { padding: var(--s3) 0; border-bottom: var(--section-rule, var(--rule)); font-size: var(--fs-caption); }

.authored { margin-top: var(--s6); display: grid; gap: var(--s4); }
.authored.wide { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
.acard { border: var(--section-rule, var(--rule)); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.is-dark .acard { border-color: rgba(244, 241, 233, .18); background: rgba(244, 241, 233, .03); }
.acard .akind { color: var(--moss); }
.is-dark .acard .akind { color: var(--mist); }
.acard p { color: var(--section-fg-dim, var(--graphite)); }
/* 品牌源流专栏：跨满两列，与上方署名卡片形成"作者不同"的版面分界 */
.acard--wide { grid-column: 1 / -1; }
.acard--wide p { max-width: 62ch; }

@media (max-width: 767px) {
  .persongrid, .persongrid.wide { grid-template-columns: 1fr; }
  .portrait { max-width: 200px; }
  .authored.wide { grid-template-columns: 1fr; }
}

/* ==========================================================================
   08 生产体系与品控
   ========================================================================== */

.factory { border-top: 1px solid var(--ink); padding-top: var(--s4); margin-bottom: var(--s6); }
.factory .t-overline { color: var(--graphite); }
.factory .fname { font-size: var(--fs-h3); font-weight: 700; margin: var(--s2) 0 var(--s2); }
.factory .t-cap { color: var(--graphite); max-width: 66ch; }

.certs { border-top: var(--rule); }
/* 认证区下半部分：NAI 自持标识 —— **分区分形制**。
   上方形制 = 细线文字条目；这里 = 描边卡片 + 标识绿。
   两者形制不同，读者一眼就知道"这不是一类东西"。 */
.selfclaim { margin-top: var(--s7); }
.nai-card {
  border: 1px solid var(--nai); padding: var(--s5);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
  max-width: 68ch; background: var(--paper);
}
.nai-card p { font-size: var(--fs-caption); color: var(--graphite); line-height: 1.7; }

.section .disclaim, .disclaim { margin-top: var(--s7); }

/* ==========================================================================
   09 官方渠道
   ★ 只给「复制」，不给「前往」：无箭头、无跳转态、无 target="_blank"。
   ========================================================================== */

.chan td { border-bottom: var(--rule); }
.chan .plat { font-weight: 700; white-space: nowrap; width: 1%; }
.chan .shop {
  display: inline-block; border: var(--rule); background: var(--bone);
  padding: 2px 8px; margin: 0 var(--s2) var(--s2) 0; font-size: var(--fs-caption);
}
.chan .act { white-space: nowrap; width: 1%; text-align: right; }
.chan .copy {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px var(--s3); margin: 0 0 var(--s2) var(--s2);
  border: var(--rule); background: transparent; color: var(--graphite);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; cursor: pointer;
}
.chan .copy:hover { border-color: var(--forest); color: var(--forest); }
.chan .copy.ok { border-color: var(--nai); color: var(--nai); }

@media (max-width: 767px) {
  .chan thead { display: none; }
  .chan tr { display: block; padding: var(--s4) 0; border-bottom: var(--rule); }
  .chan td { display: block; border: 0; padding: 0 0 var(--s2); }
  .chan .act { text-align: left; }
  .chan .copy { margin-left: 0; }
}

/* ==========================================================================
   信任条
   ========================================================================== */

.trustbar { padding-block: var(--s6); }
.trustbar .tbrow { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; justify-content: space-between; }
.trustbar p { color: var(--mist); font-size: var(--fs-caption); max-width: 60ch; }

/* ==========================================================================
   身份卡（含公示刻度）
   ========================================================================== */

.idc { background: var(--paper); border: var(--rule); }
.idh {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  padding: var(--s4) var(--s5); flex-wrap: wrap;
}
.idh b { font-size: var(--fs-h4); color: var(--forest); }
.idh span { font-size: var(--fs-caption); color: var(--graphite); }

/* ---- 公示刻度 -------------------------------------------------------------
   设计意图（勿"统一"）：
   · 框内四项命名齐全，**框外一律不命名**。留白本身就是表述。
   · 不是进度条——无百分比、无填充。刻度隐喻的是"间隔"，不是"完成度"。
   · 刻度文字用问法，与表格列头的字段名**故意不同**：
     列头是字段名，刻度是读者的范围声明。两者是两个视角。
   -------------------------------------------------------------------------- */

.sfr {
  display: flex; align-items: center; gap: 24px;
  padding: 16px 28px; border-top: var(--rule); border-bottom: var(--rule);
  background: var(--bone);
}
.sfr > .cap {
  flex: 0 0 auto; font-size: 11px; letter-spacing: .13em; font-weight: 700;
  color: var(--moss); white-space: nowrap; margin: 0; border: 0; padding: 0;
}
.frm {
  position: relative; display: flex; flex: 0 1 520px; justify-content: space-between;
  height: 56px; padding: 9px 26px 0;
  border: 1px solid var(--forest); border-radius: var(--radius-round);
  overflow: hidden;
  /* 命名空间防御：这页可能有全局的 .cap / .tick 之类规则 */
  margin: 0; border-left-width: 1px;
}
.frm > .tick { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; }
.frm > .tick > span {
  font-size: 12.5px; font-weight: 700; line-height: 18px; color: var(--forest);
  white-space: nowrap; margin: 0;
}
.frm > .tick > i {
  display: block; width: 1px; height: 13px; margin-top: 5px; background: var(--forest); font-style: normal;
}
/* 轴线：细线母题的功能化落点 */
.frm::before {
  content: ""; position: absolute; left: 26px; right: 26px; top: 41px; height: 1px; background: var(--mist);
}
/* 框外递减渐隐刻度：表达"范围到此为止"。
   ⚠️ 绝不在此处标注任何未公示项的名称——那会把缺席做成版面焦点。 */
.sfr > .ext {
  flex: 0 0 120px; height: 13px; align-self: flex-end; margin-bottom: 12px;
  background: repeating-linear-gradient(90deg, var(--mist) 0 1px, transparent 1px 16px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent);
  mask-image: linear-gradient(90deg, #000, transparent);
}

@media (max-width: 767px) {
  /* 双端保持横向形制，只改排布：说明文字上移、胶囊占满、隐去框外刻度。
     **不旋转成竖向**——竖向刻度要另起一套读法，收益不抵成本。 */
  .sfr { display: block; padding: 14px 18px 16px; }
  .sfr > .cap { display: block; margin-bottom: 10px; }
  .frm { height: 52px; padding: 8px 18px 0; flex: 1 1 auto; }
  .frm::before { left: 18px; right: 18px; top: 39px; }
  .sfr > .ext { display: none; }
}

.idt { width: 100%; border-collapse: collapse; font-size: 14px; }
.idt th {
  text-align: left; padding: var(--s3) var(--s5); font-weight: 700;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--graphite); border-bottom: var(--rule); white-space: nowrap;
}
.idt td { padding: var(--s4) var(--s5); border-bottom: var(--rule); vertical-align: top; }
.idt tr:last-child td { border-bottom: 0; }
.idt td.nm { font-weight: 700; color: var(--forest); }

/* 移动端：身份卡改为堆叠式定义列表，**绝不横向滚动**（硬规则） */
.idl { display: none; }
.idi { padding: var(--s4) var(--s5); border-bottom: var(--rule); }
.idi:last-child { border-bottom: 0; }
.idi .nm { font-weight: 700; color: var(--forest); margin-bottom: var(--s2); }
.idi dl { margin: 0; display: grid; grid-template-columns: 108px 1fr; gap: var(--s1) var(--s3); }
.idi dt { font-size: 12px; color: var(--graphite); }
.idi dd { margin: 0; font-size: var(--fs-caption); }

.idc .tnote { padding: 0 var(--s5) var(--s4); margin-top: var(--s4); }

@media (max-width: 767px) {
  .idt { display: none; }
  .idl { display: block; }
  .idh, .idi { padding-inline: var(--s4); }
  .idc .tnote { padding-inline: var(--s4); }
}

/* 待补标记 —— 让"占位"在视觉上不可忽略，防止误上线 */
.todo {
  display: inline-block; border: 1px dashed var(--graphite); padding: 0 6px;
  font-size: 12px; color: var(--graphite);
}

/* ==========================================================================
   单品页 / 系列页
   ========================================================================== */

.pdp-hero { padding-block: clamp(32px, 5vw, 64px); border-top: 6px solid var(--series); }
.pdphead { display: grid; grid-template-columns: 3px 1fr; gap: var(--s4); align-items: start; margin: var(--s5) 0 var(--s6); }
.pdphead .sbar { background: var(--series); align-self: stretch; }
.pdphead .t-overline { color: var(--graphite); }
.pdphead h1 { margin: var(--s2) 0 var(--s3); }
.pdphead .t-lead { color: var(--graphite); max-width: 56ch; }

/* 规格：桌面左右分栏 */
.spec2 { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.speclist { margin: 0; display: grid; grid-template-columns: 120px 1fr; gap: var(--s3) var(--s4); border-top: var(--rule); padding-top: var(--s4); }
.speclist dt { font-size: var(--fs-caption); color: var(--graphite); }
.speclist dd { margin: 0; font-size: var(--fs-caption); }
.specnote { background: var(--paper); border: var(--rule); padding: var(--s5); }
.specnote .t-cap { color: var(--graphite); }

@media (max-width: 767px) {
  .spec2 { grid-template-columns: 1fr; }
  .speclist { grid-template-columns: 1fr; gap: var(--s1); }
  .speclist dt { margin-top: var(--s3); }
}

/* 配方原则 / 质量控制 / 固定说法 */
.principles, .qc, .fixed { list-style: none; }
.principles li, .qc li, .fixed li {
  display: grid; grid-template-columns: 48px 240px 1fr; gap: var(--s4);
  align-items: baseline; padding: var(--s4) 0;
}
.principles .pn { color: var(--mist); }
.principles .ph { color: var(--forest); }
.principles .pd, .qc li, .fixed li { font-size: var(--fs-caption); color: var(--graphite); }
.qc li, .fixed li { grid-template-columns: 200px 1fr; }
.qc b, .fixed b { color: var(--ink); }

@media (max-width: 767px) {
  .principles li { grid-template-columns: 36px 1fr; }
  .principles .pd { grid-column: 1 / -1; }
  .qc li, .fixed li { grid-template-columns: 1fr; gap: var(--s1); }
}

/* 成分 chips */
.ingchips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.ingchips a, .ingchips span {
  display: flex; flex-direction: column; gap: 2px;
  border: var(--rule); background: var(--paper); padding: var(--s3) var(--s4);
  min-height: 44px; justify-content: center;
}
.ingchips a:hover { border-color: var(--forest); }
.ingchips .icname { font-weight: 700; font-size: var(--fs-caption); color: var(--forest); }
.ingchips .iclat { color: var(--graphite); font-size: 11px; }

/* 营养成分摘要
   ⚠️ 外层 `.section` / `.wrap` 由 nutritionSummary() 自己带（与 certBlock 一致）。
      这里**刻意不再有 `.nutri` 规则**——早期版本由组件返回裸 div、靠 `.nutri` 给内边距，
      结果桌面端这张表顶到了视口边缘。外壳的责任归组件，不留"外部补丁式"的样式。
   营养标签为 1+6（能量 / 蛋白质 / 脂肪含饱和脂肪 / 碳水含糖 / 钠），见 GB 28050—2025。 */
.nut { max-width: 420px; margin-top: var(--s4); }
.nut td.todo { border: 0; }

/* ==========================================================================
   成分百科
   ========================================================================== */

.inggrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--rule); border-left: var(--rule); }
.inggrid > li { border-right: var(--rule); border-bottom: var(--rule); }
.inggrid a { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5) var(--s4); height: 100%; background: var(--paper); }
.inggrid a:hover { background: var(--bone); }
.inggrid .iname { color: var(--forest); }
.inggrid .ilat { font-style: italic; color: var(--graphite); }
.inggrid .ifam { color: var(--moss); }
.inggrid .ifact { color: var(--graphite); line-height: 1.7; }
.inggrid .igo { margin-top: auto; color: var(--forest); opacity: .4; }
.inggrid a:hover .igo { opacity: 1; }
@media (max-width: 1023px) { .inggrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .inggrid { grid-template-columns: 1fr; } }

.factlist { margin: var(--s6) 0 0; display: grid; grid-template-columns: 160px 1fr; gap: var(--s4) var(--s5); border-top: var(--rule); padding-top: var(--s5); }
.factlist dt { font-size: var(--fs-caption); font-weight: 700; color: var(--forest); }
.factlist dd { margin: 0; }
@media (max-width: 767px) { .factlist { grid-template-columns: 1fr; gap: var(--s2); } .factlist dd { margin-bottom: var(--s4); } }

/* ==========================================================================
   FAQ / 折叠
   ========================================================================== */

.faqs { border-top: var(--rule); }
.faqs details { border-bottom: var(--rule); }
.faqs summary {
  cursor: pointer; padding: var(--s4) 0; font-weight: 700; font-size: var(--fs-h4);
  list-style: none; display: flex; justify-content: space-between; gap: var(--s4); align-items: baseline;
}
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary::after { content: "＋"; color: var(--moss); flex: 0 0 auto; font-weight: 400; }
.faqs details[open] summary::after { content: "－"; }
.faqs .an { padding: 0 0 var(--s5); font-size: var(--fs-caption); color: var(--graphite); max-width: 74ch; line-height: 1.8; }

/* ==========================================================================
   文本块 / 其他
   ========================================================================== */

.prose { display: grid; gap: var(--s4); max-width: 68ch; }
.prose p { font-size: var(--fs-body-l); line-height: 1.8; }
.prose.wide { max-width: none; }

.bigquote {
  margin-top: var(--s7); font-size: clamp(24px, 3vw, 40px); font-weight: 900;
  letter-spacing: -.02em; color: var(--forest);
}

.twobrand { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.bc { border: var(--rule); background: var(--paper); padding: var(--s6) var(--s5); display: flex; flex-direction: column; gap: var(--s2); align-items: flex-start; }
.bc.porcelain { border-top: 3px solid var(--porcelain); }
.bc .t-overline { color: var(--graphite); }
@media (max-width: 767px) { .twobrand { grid-template-columns: 1fr; } }

.scope2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.scope2 .sc { border: var(--rule); background: var(--paper); padding: var(--s5); }
.scope2 .t-overline { color: var(--moss); margin-bottom: var(--s3); display: block; }
.scope2 ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s2); }
.scope2 li { font-size: var(--fs-caption); color: var(--graphite); line-height: 1.7; }
@media (max-width: 767px) { .scope2 { grid-template-columns: 1fr; } }

.imagery { border: var(--rule); background: var(--paper); padding: var(--s6); max-width: 78ch; }
.imagery .t-h4 { margin-bottom: var(--s3); }
.imagery .t-cap { margin-bottom: var(--s3); line-height: 1.8; }
.imagery .hardnote {
  margin-top: var(--s4); padding-top: var(--s4); border-top: var(--rule);
  font-size: var(--fs-caption); font-weight: 700; color: var(--forest);
}

.crumbs { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; font-size: var(--fs-caption); color: var(--graphite); margin-bottom: var(--s5); }
.crumbs a:hover { color: var(--forest); }
.crumbs .sep { color: var(--line); }
.crumbs [aria-current] { color: var(--ink); }

/* 子品牌页：青花蓝替换主色，但共用同一套栅格与字阶 */
.sub-jiuyuanqing .section.is-bone { background: var(--cool); }
.sub-jiuyuanqing .mhead .idx,
.sub-jiuyuanqing .crumbs { color: var(--porcelain-lt); }
.sub-jiuyuanqing .principles .ph { color: var(--porcelain); }
.sub-jiuyuanqing .bigquote { color: var(--porcelain); }

/* ==========================================================================
   2026-10-14 新增：组合装 / 完整配料表 / 不适宜人群
   --------------------------------------------------------------------------
   这一组组件的共同任务，是把"不能单独销售"和"法定标签信息"
   从文案变成**结构**——它们必须在没有色彩、没有图片、只剩文字的
   情况下依然读得出来。
   ========================================================================== */

/* ---- 组合装：不单独销售声明 ---------------------------------------------
   刻意做成整块深色条，而不是一行小字。
   理由：整页最容易被误解的一件事就是"这些片能不能单买"，
   权重必须与风险匹配。 */
.boxnote {
  background: var(--forest);
  color: var(--bone);
  padding: var(--s5) var(--s6);
  margin-bottom: var(--s6);
  display: grid;
  gap: var(--s2);
  max-width: 78ch;
}
.boxnote b { color: var(--paper); font-weight: 700; }
@media (max-width: 767px) { .boxnote { padding: var(--s5); } }

/* ---- 组合装：内容物列表 ---------------------------------------------------
   每支自成一张卡：名称 + 限定徽标 + 配料 + 用法 + 身份卡 + 营养表。
   信息给足，是为了让"这是内容物、不是商品"这件事
   在读完之后依然成立——而不是靠一句免责把信息抽干。 */
.complist { display: grid; gap: var(--s6); }
.comp { border: var(--rule); background: var(--paper); padding: var(--s6) var(--s6) var(--s5); }
.comp .chead {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5);
  padding-bottom: var(--s4); border-bottom: var(--rule);
}
/* 名称与徽标仍按基线对齐——图是"贴片"，不该把文字基线拉歪 */
.comp .cnamebox { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s4); }
.comp .chead .t-h4 { color: var(--forest); margin: 0; }
/* 形制铁律：圆角只有 0 与全圆两种。徽标走 1px 描边，不做圆角填充。 */
.cbadge {
  font-size: 11px; letter-spacing: .08em; color: var(--moss);
  border: 1px solid var(--mist); padding: 2px 8px; white-space: nowrap;
}
.comp .cing { margin: var(--s4) 0 0; font-size: var(--fs-caption); color: var(--graphite); line-height: 1.9; }
.comp .t-cap { margin-top: var(--s3); color: var(--graphite); }
.comp .idc { margin-top: var(--s5); }
/* 内容物锚点被深链时的落点提示——不改变版式，只加一条上边线 */
.comp:target { border-color: var(--forest); }

/* ---- 完整配料表 ----------------------------------------------------------
   用有序列表而不是段落：配料表的**顺序本身就是信息**（递减顺序），
   浏览器默认的序号正好把它显性化，且不依赖样式表也能成立。 */
.inglist {
  list-style: decimal;
  margin: 0;
  padding-left: 1.6em;
  columns: 2;
  column-gap: var(--s8);
  border-top: var(--rule);
  padding-top: var(--s5);
}
.inglist li {
  font-size: var(--fs-caption);
  line-height: 2.1;
  color: var(--ink);
  break-inside: avoid;
}
@media (max-width: 767px) { .inglist { columns: 1; } }

/* ---- 不适宜人群 ----------------------------------------------------------
   深色 + 大字。它是这一页唯一的"谁不该吃"，不是脚注。 */
.unsuit {
  border: 1px solid var(--forest);
  background: var(--forest);
  color: var(--bone);
  padding: var(--s5);
  margin-bottom: var(--s5);
  display: grid;
  gap: var(--s2);
}
.unsuit .t-overline { color: var(--mist); }
.unsuit .who { font-size: var(--fs-h4); font-weight: 700; color: var(--paper); line-height: 1.5; }
.unsuit .t-cap { color: var(--mist); }

/* 规格表里的补充说明：换行显示，不与值同行挤压 */
.speclist dd .t-cap.d { display: block; margin-top: var(--s2); color: var(--graphite); }

/* ---- 营养成分表：数值右对齐 ---------------------------------------------
   数值列用 tabular-nums 对齐小数点——这是数据表的可读性底线。 */
.nut td.v, .nut td.n { text-align: right; font-variant-numeric: tabular-nums; }
.nut td.n { color: var(--graphite); }
.nutri .t-overline { color: var(--moss); margin-bottom: var(--s3); }

/* ---- 成分出现记录表 ----------------------------------------------------- */
.tbl.occ td .sub { display: block; color: var(--graphite); margin-top: 2px; }
@media (max-width: 767px) {
  .tbl.occ, .tbl.occ thead, .tbl.occ tbody, .tbl.occ tr, .tbl.occ td { display: block; width: 100%; }
  .tbl.occ thead { display: none; }
  .tbl.occ tr { border-bottom: var(--rule); padding: var(--s4) 0; }
  .tbl.occ td { border: 0; padding: 2px 0; }
}

/* 身份卡的「位置」列：等宽数字，避免"第 2 位 / 第 10 位"宽度跳动 */
.idt td.pos { font-variant-numeric: tabular-nums; color: var(--moss); white-space: nowrap; }

/* ==========================================================================
   产品图 —— 包装图与片型图
   
   ★ 核心手法：**不改图片字节，用 CSS 裁掉四周余量。**
     包装图是 1280² 的平面打样图，四周有大片中性灰底；片型图是透明 PNG，
     但片剂本体只占画面 8–12%。两者的余量比例都是"对图片实测"得来的
     （见 src/data/assets.mjs），写进内联的 aspect-ratio + background-size。

   ★ 为什么必须按方向分两个类：
     aspect-ratio 只能"由一边推另一边"。同时给死 width 与 height 会压过它，
     图片就变形了。所以竖版按高度定、横版按宽度定，永远只给一个方向。
     两类各自只给一边尺寸，另一边交给 aspect-ratio —— 这是不变的。

   ★ 为什么图位底色用纸白而不是灰：
     灰底是**打样图的背景**，不是我们的设计元素。裁掉之后，
     包装就落在自己的底色上，与全站的暖白体系一致。
   ========================================================================== */

.crop {
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%; /* 内联样式总会覆盖它；仅作兜底 */
}
.crop.is-tall { height: 100%; width: auto; }
.crop.is-wide { width: 100%; height: auto; }

/* ---- 产品页首屏：左文右图 ------------------------------------------------ */
.pdphero2 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 32%);
  gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: var(--s5);
}
.pdphero2 .pdphead { margin: 0; }
/* 没有包装图时（子品牌线）不留空栏——单列铺满，而不是空着半页 */
.pdphero2.nofig { grid-template-columns: 1fr; }
.pdpfig {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--s4);
  background: var(--paper); border: var(--rule); padding: var(--s5);
}
.pdpfig figcaption { text-align: center; }

/* 图框。图在框内「一边撑满、另一边居中」——
   竖版（ar≈0.5）按高度定、宽按比例；横版（ar≈2.2）按宽度定、高按比例。
   ★ 框本身**不给 aspect-ratio**：给死正方形的话，横版包装（2.2:1）
     在正方形里只占 45% 的高度，上下会空出一大片。
     让框高随方向走，两种方向都能拿到紧凑的版面——
     代价只是不同产品页的首屏高度略有差异，而这几页本来也不需要等高。 */
.pdpbox {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.pdpbox .crop.is-wide { width: 100%; height: auto; }
.pdpbox .crop.is-tall { height: clamp(300px, 34vw, 440px); width: auto; }

@media (max-width: 767px) { .pdphero2 { grid-template-columns: 1fr; } }

/* 包装代号（LPA / 40+ / 50+）—— 取自包装实物，是识别项，不是卖点 */
.packcode { color: var(--graphite); margin-top: var(--s3); }
.packcode b { color: var(--moss); letter-spacing: .08em; }

/* ---- 法定提示语 ---------------------------------------------------------
   与「不适宜人群」同为法定标签信息，但层级不同：
   不适宜人群回答"谁不能吃"（深色块），提示语回答"它不是什么"（细竖条）。
   两者都不与美国 FDA 或任何认证相关，纯粹是包装上印了什么就写什么。 */
.statutory {
  border-left: 3px solid var(--ink);
  padding-left: var(--s4);
  margin: var(--s4) 0 0;
  font-size: var(--fs-caption); color: var(--ink); line-height: 1.85;
}

/* ---- 卡片上的包装缩略图 -------------------------------------------------- */
.pcard .pfig {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 92px; height: 78px;
}
.pcard .pfig .crop.is-tall { height: 78px; }
.pcard .pfig .crop.is-wide { width: 92px; }
@media (max-width: 767px) {
  .pcard .pfig { width: 72px; height: 62px; }
  .pcard .pfig .crop.is-tall { height: 62px; }
  .pcard .pfig .crop.is-wide { width: 72px; }
}

/* ---- 内容物卡的片型图 ----------------------------------------------------
   12 支里有多支配料高度重叠（白芸豆 / 桑叶 / 菊粉各出现两次），
   片型是读者最快区分它们的线索，所以它不是装饰。 */
.comp .cpiece { flex: 0 0 auto; align-self: center; }
.comp .cpiece.is-wide { width: 84px; height: auto; }
@media (max-width: 767px) { .comp .cpiece.is-wide { width: 64px; } }