/* =====================================================================
 * WONDERLAB 万益蓝 · 官网 v2 设计系统 (Design System)
 * ---------------------------------------------------------------------
 * 统一色板 / 统一间距 / 统一圆角 / 统一字体层级 / 统一组件
 * 与 Tailwind CSS v3 配合使用（tailwind.config 见 tailwind.config.js）
 * 所有"统一组件"（按钮 / 卡片 / 标签 / 表单 / 导航 / 弹窗）均在此显式定义，
 * 避免框架自带样式"乱跑"。
 * ===================================================================== */

/* ---------- 字体 (Typography Faces) ----------
 * 设计稿使用 MiSans 五档字重，已全部本地化（css/ 目录），按 CSS 标准字重映射：
 *   Light → 300 / Regular → 400 / Medium → 500 / Demibold → 600 / Semibold → 700。
 * 移除 faux bold，完整还原设计字重层级。 */
@font-face {
  font-family: "MiSans";
  font-weight: 300;
  font-display: swap;
  src: local("MiSans Light"), url("MiSans-Light.ttf") format("truetype");
}
@font-face {
  font-family: "MiSans";
  font-weight: 400;
  font-display: swap;
  src: local("MiSans Regular"), url("MiSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "MiSans";
  font-weight: 500;
  font-display: swap;
  src: local("MiSans Medium"), url("MiSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "MiSans";
  font-weight: 600;
  font-display: swap;
  src: local("MiSans Demibold"), url("MiSans-Demibold.ttf") format("truetype");
}
@font-face {
  font-family: "MiSans";
  font-weight: 700;
  font-display: swap;
  src: local("MiSans Semibold"), url("MiSans-Semibold.ttf") format("truetype");
}

/* ---------- 设计令牌 (Design Tokens) ---------- */
:root {
  /* 统一色板 */
  --wl-brand: #0000e1;          /* 品牌蓝 */
  --wl-brand-600: #0000c4;
  --wl-brand-700: #0000a3;
  --wl-bg: #f8fafc;             /* 页面底色 */
  --wl-surface: #ffffff;        /* 卡片/面板底色 */
  --wl-bg-research-plain: #E5E6E5; /* 008 FR-015 第3栏「无底图」兜底底色（对禁止项#3 的已确认豁免，仅第3栏；有底图态不加） */
  --wl-glass: rgba(255, 255, 255, 0.3);   /* 玻璃拟态卡片背景（30%，FR-007 复用） */
  --wl-glass-weak: rgba(255, 255, 255, 0.2); /* 玻璃拟态弱档（20%，Figma 对比表外板/本品玻璃，R4 复用） */
  --wl-line-on-brand: rgba(255, 255, 255, 0.8); /* 品牌色上的分隔线（80% 白，Figma 对比表行分隔，R4） */
  /* 第2栏产品中心（特性 006）令牌 */
  --wl-glass-blur: 11px;                   /* 卡片毛玻璃模糊（FR-007） */
  --wl-glass-btn-bg: rgba(255, 255, 255, 0.5); /* 分页按钮默认背景（50%，FR-004） */
  --wl-pcard-w: clamp(241.5px, 16.77vw, 322px);   /* 卡片宽（1920 基准 322，约 75% 下限；实现期可调） */
  --wl-pcard-h: clamp(360px, 25vw, 480px);        /* 卡片默认高（480） */
  --wl-pcard-h-hover: clamp(397.5px, 27.6vw, 530px); /* 卡片 hover 高（530） */
  --wl-pcard-gap: clamp(12px, 1.25vw, 24px);      /* 卡片间距（24） */
  /* 顶栏 + Mega 弹层共用 */
  --wl-nav-glass-bg: rgba(5, 0, 80, 0.1);
  --wl-nav-glass-blur: blur(105px);
  --wl-nav-glass-border: rgba(0, 0, 225, 0.12);
  --wl-ink: #000000;            /* 主文字 */
  --wl-ink-80: rgba(0, 0, 0, 0.8);
  --wl-ink-50: rgba(0, 0, 0, 0.5);
  --wl-ink-30: rgba(0, 0, 0, 0.3);
  --wl-arrow-fill: rgba(7, 7, 7, 0.10);        /* 子页箭头按钮默认填充（Figma fill，R5/FR-032·033） */
  --wl-arrow-fill-hover: rgba(7, 7, 7, 0.30);  /* 子页箭头按钮 hover 填充（Figma fill，R5） */
  --wl-on-brand: #ffffff;       /* 品牌色上的文字 */
  --wl-on-brand-50: rgba(255, 255, 255, 0.5);
  --wl-line: rgba(0, 0, 0, 0.12);
  --wl-gold: #ffcc00;           /* 金色强调（专利源护菌徽标，Figma #FFCC00） */
  --wl-gold-gradient: linear-gradient(131deg, #f9cb99 0%, #b18426 100%, #d5a760 100%); /* 金色渐变（GOLDGUT-LA99 菌株芯片，Figma） */
  --wl-chip-active-coop: rgba(0, 0, 225, .1);  /* 合作页 chip 当前株底 = 品牌蓝 #0000e1 @10%（Figma 1832-5421） */
  /* 研究院培养皿 Figma@1920：643×637 → 33.49vw × 33.18vw */
  --wl-ri-dish-max-w: 643px;
  --wl-ri-dish-max-h: 637px;
  --wl-ri-dish-w: clamp(180px, 33.49vw, 643px);
  --wl-ri-dish-h: clamp(180px, 33.18vw, 637px);
  --wl-ri-min-h: clamp(560px, 40vw, 768px); /* 环绕布局区高度：原 660≈培养皿637 致文字贴皿，调高至 768 给四角文字呼吸空间（Figma 皿上方约留 130px）；如需更贴近设计可继续上调并微调四角偏移 */

  /* 统一圆角（与 tailwind.config.js 对齐：md12 / lg20 / card24 / xl28 / 2xl36）
     归并：Figma 32→pill(按钮)、34→2xl、84→pill */
  --wl-radius-sm: 8px;
  --wl-radius-md: 12px;   /* 卡片 / 标签 */
  --wl-radius-lg: 20px;
  --wl-radius-card: 24px; /* 菌株芯片 / 中型卡（Figma 24） */
  --wl-radius-xl: 28px;   /* 中大区块（Figma 28） */
  --wl-radius-2xl: 36px;  /* 大区块（Figma 36） */
  --wl-radius-chip: 32px;     /* 菌株详情页 chip 卡（Figma 1832-5036） */
  --wl-radius-card-sm: 16px;  /* 菌株详情页 证据等级白卡（Figma 1832-5173） */
  --wl-radius-pill: 999px;

  /* CTA「了解更多」按钮统一响应式尺寸（FR-097，1920 基准 88×36，钳制约 75% 最小值，Constitution IV） */
  --wl-cta-w: clamp(66px, 4.58vw, 88px);   /* 仅无背景下划线按钮 .wl-btn-underline 仍引用（特性010后） */
  --wl-cta-h: clamp(27px, 1.88vw, 36px);
  /* 特性010：有背景 CTA 内边距（1920 基准 左右12 / 上下7.5，响应式，下限约75%，宪法 IV/VII） */
  --wl-cta-pad-x: clamp(9px, 0.63vw, 12px);     /* 12/1920=0.625≈0.63vw */
  --wl-cta-pad-y: clamp(5.63px, 0.39vw, 7.5px); /* 7.5/1920=0.3906≈0.39vw */

  /* 第4栏菌株库（特性 009）双模糊层与第二层三块文字（1920 基准，clamp/vw 四档等比响应式，Constitution III/IV/VII） */
  --wl-strain-panel-w: clamp(340px, 70.83vw, 1360px);     /* 第一层宽 1360 */
  --wl-strain-panel-h: clamp(380px, 32.29vw, 620px);      /* 第一层高 620 */
  --wl-strain-glass-w: clamp(300px, 46.35vw, 890px);      /* 第二层宽 890 */
  --wl-strain-glass-h: clamp(280px, 29.90vw, 574px);      /* 第二层高 574 */
  --wl-strain-glass-left: clamp(0px, 23.23vw, 446px);     /* 第二层距第一层左 446 */
  --wl-strain-glass-gap: clamp(18px, 1.25vw, 24px);       /* 特性010 轮次3 FR-024：第二层 上/右/下 一致间距 24（24/1920=1.25vw，下限约75%）；保证右=上=下、跨分辨率不漂移。注：原 --wl-strain-glass-w/-h 改 inset 派生后不再被引用（孤立，待确认清理） */
  --wl-strain-logo-left: clamp(20px, 2.81vw, 54px);       /* GOLDGUT 距层左 54 */
  --wl-strain-logo-top: clamp(20px, 1.98vw, 38px);        /* GOLDGUT 距层上 38 */
  --wl-strain-tab-gap-1: clamp(12px, 1.15vw, 22px);       /* GOLDGUT→自研标题 22 */
  --wl-strain-tab-gap-2: clamp(8px, 0.83vw, 16px);        /* 自研→全球标题 16 */
  --wl-strain-chip-w: clamp(120px, 8.23vw, 158px);        /* 菌株芯片宽 158 */
  --wl-strain-chip-h: clamp(22px, 1.35vw, 26px);          /* 菌株芯片高 26 */
  --wl-strain-chip-gap: clamp(6px, 0.52vw, 10px);         /* 芯片间距 10 */
  --wl-strain-desc-top: clamp(239px, 22.81vw, 438px);     /* 特性010 轮次14 FR-058：描述距层顶固定 438（440→438；438/1920≈22.81vw）；foot 恢复绝对定位用此 */
  --wl-strain-more-gap: clamp(20px, 1.88vw, 36px);        /* 了解更多距描述 36 */
  --wl-strain-tl-left: clamp(16px, 2.19vw, 42px);         /* 左上方块距第二层左 42 */
  --wl-strain-tl-top: clamp(60px, 7.71vw, 148px);         /* 左上方块距第二层上 148 */
  --wl-strain-bl-rule-right: clamp(80px, 13.65vw, 262px); /* 左下方块横线右端距右 262 */
  --wl-strain-bl-rule-bottom: clamp(100px, 13.85vw, 266px);/* 左下方块横线右端距下 266 */
  --wl-strain-br-bottom: clamp(12px, 1.04vw, 20px);       /* 右下角块距第二层下 20 */
  --wl-strain-rule-len: clamp(40px, 4.17vw, 80px);        /* 横线长 80 */
  --wl-strain-rule-gap: clamp(6px, 0.52vw, 10px);         /* 文字↔横线间距 10 */
  --wl-strain-line1-size: clamp(18px, 1.46vw, 28px);      /* 块第1行 28 */
  --wl-strain-line2-size: clamp(12px, 0.73vw, 14px);      /* 块第2行 14（配 --wl-leading-14） */

  /* 统一间距（区块节奏） */
  --wl-space-section: 120px;  /* 桌面分屏间距 */
  --wl-gutter: 24px;          /* 栅格间距 */

  /* 浏览器模拟框高度（设计稿预览环境 chrome 预留） */
  --wl-browser-chrome: 64px;

  /* 栏位高度系统（Figma@1920 基准）
     实际页面间距 = top − 64px（浏览器模拟框） */
  /* 导航栏高度（第八轮 FR-099，1920 基准 88px；纠正原固定 64px、四档等比） */
  --wl-header-h: clamp(64px, 4.58vw, 88px);
  --wl-container-max: 1392px;  /* 全站内容容器最大宽（.wl-container 与导航 mega 遮层共用，单一事实来源） */
  --wl-capsule-bleed: clamp(21px, 1.458vw, 28px);  /* 特性010 轮次8：滚动态导航胶囊的左右"外溢量"（padding + 负 margin = 28@1920）；胶囊外缘 = 内容缘 ± 本值；mega 遮层左右对齐胶囊外缘亦用此（单一事实来源） */
  --wl-ri-stack-gap: clamp(32px, 8vw, 56px);  /* 特性010 轮次10 FR-047①：第3栏研究院「堆叠态(<960)」三段（intro/platforms/centers）上下间距，再调大（轮次9 的 24-48 仍太小）；默认 56@700、实现期视觉核定 */
  /* Mega 菜单遮层（第八轮 FR-100/FR-084~089，1920 基准、响应式；
     scrim 为设计指定半透明深蓝遮罩、仅限遮层、非品牌蓝来源） */
  --wl-mega-height: clamp(254px, 17.6vw, 338px); /* 特性010 轮次8 FR-039：遮层高 338@1920（取代 336）；338/1920≈17.6vw */
  --wl-mega-w: clamp(707px, 73.65vw, 1414px);    /* 特性010 轮次8 FR-039：原拟遮层宽 1414。胶囊对齐修订后面板改 width:auto + 负外边距对齐胶囊外缘（实测≈1400@1920），本令牌已无 var() 引用——孤立，待确认后清理（禁止私自删除） */
  --wl-mega-radius: 42px;                         /* 遮层圆角 */
  --wl-mega-panel-bg: rgba(0, 0, 43, 0.20);       /* 遮层半透明深蓝 scrim */
  --wl-mega-cta-bg: rgba(0, 0, 0, 0.30);          /* 图上「了解更多」按钮底 */
  --wl-mega-cta-radius: 32px;                     /* 图上按钮圆角 */
  --wl-mega-media-radius: 16px;                   /* 右侧配图圆角 */
  /* 特性010 诉求四⑤：遮层菜单文本行高 27 / 项上下间距 36（1920 基准、响应式，取代既有 lh:2 与 gap 4） */
  --wl-mega-sub-leading: clamp(20px, 1.41vw, 27px); /* 27/1920≈1.41vw；菜单专属行高（20px 不在宪法VI映射，注释依据） */
  --wl-mega-sub-gap: clamp(20px, 1.88vw, 36px);     /* 特性010 轮次5 FR-034：默认项上下间距 36@1920（取代轮次4 的 16、恢复轮次2 值）；36/1920=1.875≈1.88vw */
  /* 特性010 轮次9（2026-06-18）：Hero(#top) 高度改为「占满视口高度」100dvh——撤销轮次8 的 44.48vw 宽度驱动流式 + 诉求一的固定 854。
     根因：854 与 44.48vw 都是按「视口宽度」算高，永远填不满更高的视口（1080 高屏下 854<1080 必留底白；1920 以下 vw 越缩越矮、底白越大）。
     改 100dvh 后高度随「视口高度」自适应、始终满屏。dvh=动态视口高度（防移动端地址栏跳动；桌面等同 100vh）；#top 桌面规则另留 100vh 回退给不支持 dvh 的旧浏览器。
     仅作用于 ≥960 桌面（#top 桌面规则消费本令牌）；<960 移动端仍按背景图比 aspect-ratio 驱动（特性005 FR-013，未变）。h2/h3 仍为轮次8 clamp、h4–h8/尾栏固定（均未变）。
     ⚠️ 不再适用 1.6.0「栏目高度固定」例外（h1 改为视口高度自适应）——用户 2026-06-18 明确选择满屏。 */
  --wl-section-h1: 100dvh;                          /* 第1栏 Hero 轮播：占满视口高度（满屏，随屏幕高度自适应） */
  --wl-section-h2: clamp(700px, 45.57vw, 875px);   /* 第2栏 产品中心：875/1920=45.57vw；下限 700=960–1279 档值（1280 平滑）；1470≈700 */
  --wl-section-h3: clamp(960px, 64.06vw, 1230px);  /* 第3栏 微生态研究院：1230/1920=64.06vw；下限 960=960–1279 档值（1280 平滑、保证绝对定位内容不溢出）；1470≈960 */
  --wl-section-h4: 902px;    /* 第4栏 菌株（特性010）：固定高度、缩放不变（宪法1.6.0例外）；1920基准902 */
  --wl-section-h5: 852px;    /* 第5栏 权威临床验证（特性010）：固定高度、缩放不变；1920基准852（特性025 由 902 收窄 50，使 临床↔科研动态 接缝内容间距=200@1920） */
  --wl-section-h6: 700px;    /* 第6栏 科研动态（特性010）：固定高度、缩放不变；1920基准700（特性025 由 902 收窄） */
  --wl-section-h7: 700px;    /* 第7栏 用户口碑 */
  --wl-section-h8: 735px;    /* 第8栏 常见问题 */
  --wl-section-footer: 664px; /* 尾栏（700→664，用户澄清 2026-06-16） */

  /* 首屏缩放参数（特性 005 · FR-001~004）
     首屏满屏背景图与右侧轮播主图随窗口宽度等比缩放、不裁剪；
     区块高度 = 100vw × (1 / --wl-hero-ar)，使区块宽高比==背景图宽高比，cover 即恰好铺满。 */
  --wl-hero-ar: 1920 / 854;            /* 桌面首屏宽高比（≈2.25）。特性010 轮次8 #top 改回流式高度，本令牌仍无 var() 引用——孤立，待确认后清理（禁止私自删除） */
  --wl-hero-min-h: clamp(420px, 44.48vw, 854px); /* 区块高度地板。特性010 轮次9：#top 改为 100dvh 满屏后，h1 不再引用本令牌——本令牌已无 var() 消费、孤立，待确认后清理（禁止私自删除） */
  --wl-hero-img-w: clamp(280px, 36vw, 692px);    /* 右侧轮播主图宽度（宽度驱动，取代旧 60vh）。TODO(设计确认): 36vw/692px 为按既有视觉估值，待设计稿主图宽度核定 */
  /* 特性010 轮次9 FR-041：移动端首屏宽高比改为「单一固定值」（取代 FR-013 的 JS 按每帧图片固有比写入——不同图致栏高变化）。
     固定比 → 各帧高度一致、随视口宽度等比；背景图 cover 裁切填满、不撑高/不超出栏。默认 3/4（≈375 宽→500 高，贴近移动 520 地板）；
     ⚠️ 按 H5 banner 设计可调（单令牌改值即可）。js/main.js 的 updateMobileHeroAspect 已停写本变量（轮次9），此静态值生效。 */
  --wl-hero-ar-m: 3 / 4;

  /* 统一字体层级 */
  --wl-font: "MiSans", "PingFang SC", -apple-system, BlinkMacSystemFont,
    "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  /* 字号→行高映射（特性 007，单一事实来源；无单位比值随响应式字号等比缩放）
     可扩展：补一条令牌 + 对应字号元素引用即全站生效；其余字号待业务补全，本期不动。 */
  --wl-leading-30: 1.27;   /* 30→38 */
  --wl-leading-24: 1.33;   /* 24→32 */
  --wl-leading-14: 1.57;   /* 14→22 */
  --wl-leading-12: 1.5;    /* 12→18 */
  --wl-shadow-card: 0 12px 40px rgba(0, 0, 32, 0.08);
  --wl-shadow-soft: 0 8px 24px rgba(0, 0, 32, 0.06);

  /* ===== 子页面（特性 011）令牌 ===== 1920 基准、clamp 四档等比、≤2 位小数、品牌蓝令牌派生 */
  --wl-subhero-h: clamp(300px, 23.44vw, 450px);          /* 子页 Hero banner 高（450@1920） */
  --wl-subhero-h-compact: clamp(220px, 15.63vw, 300px);  /* 详情页压缩 Hero（300@1920） */
  --wl-sec-gap: clamp(40px, 4.17vw, 80px);               /* 区块标题↔主体间距（80@1920） */
  --wl-card-grid-gap: clamp(16px, 1.25vw, 24px);         /* 卡片网格间距（24@1920） */
  --wl-stat-num-size: clamp(36px, 3.13vw, 60px);         /* 数字统计大数字（60@1920，品牌蓝） */
  --wl-stat-num-size-lg: clamp(48px, 5.21vw, 100px);     /* 科研上排 5 栏大数字（100@1920，Figma） */
  --wl-stat-num-size-md: clamp(32px, 2.6vw, 50px);       /* 全维度科研成果 4 栏数字（50@1920，Figma 1723-305） */
  --wl-stat-grid-gap: clamp(20px, 1.67vw, 32px);         /* 统计项间距（32@1920） */
  --wl-panel-pad: clamp(24px, 2.5vw, 48px);              /* 菌株库面板/证据卡内边距（48@1920） */
  --wl-panel-bg: #e6e6e6;                                /* 菌株库面板/证据卡浅灰底（对齐 Figma #e6e6e6） */
  --wl-def-key-col: clamp(160px, 14.58vw, 280px);        /* 证据定义表键列宽（280@1920） */
  --wl-evidence-label-col: clamp(140px, 13.02vw, 250px); /* 证据满宽区块左标签列宽（250@1920） */
  --wl-chip-row-gap: clamp(12px, 1.04vw, 20px);          /* 详情页菌株 chip 间距（20@1920） */
  --wl-ph-from: var(--wl-brand);                         /* 占位块渐变起点（品牌蓝） */
  --wl-ph-to: var(--wl-brand-700);                       /* 占位块渐变终点（品牌深蓝） */

  /* ===== 子页面（特性 018：产品详情 / 品牌故事 / FAQ）令牌 ===== 1920 基准、clamp 四档、≤2 位小数、品牌蓝令牌派生 */
  --wl-pd-series-h: clamp(72px, 5.63vw, 108px);          /* 产品系列条卡片高（108@1920，Figma Frame 272） */
  --wl-pd-series-card-w: clamp(180px, 14.74vw, 283px);   /* 产品系列条卡片宽（283@1920，Figma Frame 272） */
  --wl-pd-series-band-h: clamp(150px, 17.97vw, 345px);   /* 产品系列条 banner 高（345@1920，Figma Frame 264） */
  --wl-pd-gallery-ratio: 875 / 774;                      /* 产品主图宽高比（Figma 875×774） */
  --wl-pd-main-w: clamp(360px, 45.57vw, 875px);          /* 产品主图宽（875/1920=45.57vw） */
  --wl-compare-pad: clamp(14px, 1.09vw, 21px);           /* 对比卡内边距（21@1920，由 Figma 面板605−玻璃563=42 推得） */
  --wl-compare-gap: clamp(16px, 1.25vw, 24px);           /* 对比卡两列间距（24@1920） */
  --wl-compare-bottle-h: clamp(96px, 8.33vw, 160px);     /* 对比卡瓶图高（160@1920，FR-064 放大） */
  --wl-timeline-dot: clamp(8px, 0.52vw, 10px);           /* 竖向时间线节点圆点（10@1920） */
  --wl-timeline-step-gap: clamp(16px, 1.25vw, 24px);     /* 时间线阶段间距（24@1920，119 跨距由内容撑） */
  --wl-award-card-w: clamp(220px, 19.43vw, 373px);       /* 奖项卡宽（373@1920） */
  --wl-award-card-ratio: 373 / 316;                      /* 奖项卡宽高比（Figma 373×316） */
  --wl-award-img-ratio: 285 / 139;                       /* 奖项卡内图比例（Figma 285×139，宽扁） */
  --wl-faq-cat-count-size: clamp(11px, 0.73vw, 14px);    /* FAQ 类别计数徽标字号（14@1920） */
  --wl-faq-group-gap: clamp(40px, 4.17vw, 80px);         /* FAQ 分类分组间距（80@1920） */
  --wl-faq-cats-col: clamp(120px, 11.46vw, 220px);       /* FAQ 类别侧栏列宽（220@1920） */
  --wl-img-bg: #f4f6fb;                                  /* 图片容器中性占位底（图片 cover 覆盖，仅加载态/透明区可见） */
  --wl-mv-band-h: clamp(380px, 35.42vw, 680px);         /* 使命愿景满宽带高（680@1920，Figma Group 207） */
}

/* ---------- 基础重置 (Base) ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--wl-bg); overflow-x: clip; }
/* 页面最外层宽度上限（FR-012）：max-width:1920 仅作外层上限并居中，
 * 超宽屏两侧留白由 html 底色承接；内容容器仍由 .wl-container 维持 1392 居中。 */
body {
  margin: 0 auto;
  max-width: 1920px;
  font-family: var(--wl-font);
  color: var(--wl-ink);
  background: var(--wl-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Tailwind preflight 的 body{margin:0}（在 theme.css 之后加载）会覆盖上面的
 * margin:0 auto，导致超宽屏整页左对齐、内容偏左。用更高特异性选择器锚定水平居中，
 * 不依赖样式表加载顺序，确保 >1920 视口下页面始终居中、两侧对称留白。 */
html > body { margin-inline: auto; max-width: 1920px; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* 防挤压：超长不可断内容（英文菌株名 / 链接 / 数字）允许换行，
 * 避免文字撑破所在块、与相邻图片或卡片重叠。 */
h1, h2, h3, h4, p, span, blockquote, li { overflow-wrap: break-word; word-break: break-word; }

/* ---------- 统一字体层级 (Type Scale) ----------
 * 断点显式字号（1920/1440 基准取 Figma 设计值，向下按 1200/平板/手机阶梯递减），
 * 不用全局 vw 缩放，避免中间分辨率字号溢出"看着过大"。下限 ≥14px（FR-014）。
 * 默认（移动 <768）= 最小档；min-width 媒体查询逐级抬高至 Figma 规范上限。 */
.wl-display { font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.wl-h1      { font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.wl-h2      { font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; }
.wl-h3      { font-size: 22px; font-weight: 600; line-height: var(--wl-leading-30); } /* 007 标称30→行高 */
.wl-title   { font-size: 18px; font-weight: 600; line-height: var(--wl-leading-24); letter-spacing: -0.015em; } /* 007 标称24 */
.wl-body-lg { font-size: 16px; line-height: 1.6; letter-spacing: -0.0094em; }
.wl-body    { font-size: 14px; line-height: var(--wl-leading-14); } /* 007 标称14 */
.wl-caption { font-size: 12px; line-height: var(--wl-leading-12); } /* 007 标称12 */
.wl-light   { font-weight: 300; }
@media (min-width: 960px) {
  .wl-display, .wl-h1 { font-size: 30px; }
  .wl-h2 { font-size: 28px; }
  .wl-h3 { font-size: 24px; }
  .wl-title { font-size: 20px; }
}
@media (min-width: 1280px) {
  .wl-display, .wl-h1 { font-size: 36px; }
  .wl-h2 { font-size: 34px; }
  .wl-h3 { font-size: 28px; }
  .wl-title { font-size: 22px; }
}
@media (min-width: 1920px) {
  .wl-display, .wl-h1 { font-size: 40px; }
  .wl-h2 { font-size: 40px; }
  .wl-h3 { font-size: 30px; }
  .wl-title { font-size: 24px; }
}

/* ---------- Figma 1920 语义字体类 (Typography Roles · 002-figma-typography-audit) ----------
 * 1920（≥1440）命中 Figma 精确 px；较小断点按工程阶梯递减。 */
.wl-type-nav { font-size: 16px; font-weight: 400; line-height: 1; letter-spacing: 0; }

.wl-type-hero-title { font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.wl-type-hero-body { font-size: 14px; font-weight: 400; line-height: var(--wl-leading-14); letter-spacing: 0; } /* 007 标称14 */
.wl-type-link-more { font-size: 16px; font-weight: 400; line-height: 22px; letter-spacing: -0.15px; }

.wl-type-products-heading { font-size: 24px; line-height: 1; letter-spacing: 0; }
.wl-type-products-heading__bold { font-weight: 600; }
.wl-type-products-heading__light { font-weight: 300; }

.wl-type-card-title-lg { font-size: 20px; font-weight: 700; line-height: var(--wl-leading-30); letter-spacing: 0; } /* 007 标称30 */
.wl-type-card-desc-lg { font-size: 16px; font-weight: 400; line-height: var(--wl-leading-24); letter-spacing: 0; } /* 007 标称24 */
.wl-type-card-link { font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0; }

.wl-type-section-semibold { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: 0; }
.wl-type-section-demibold { font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: 0; }

.wl-type-strain-lead { font-size: 18px; font-weight: 400; line-height: 1; letter-spacing: 0; }
.wl-type-strain-desc { color: #fff; font-size: clamp(18px, 1.25vw, 24px); font-weight: 330; line-height: var(--wl-leading-24); letter-spacing: normal; padding: 24px 0; max-width: 380px; } /* 009 标称24：行高遵循宪法 24→32 */
.wl-type-card-org { font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.wl-type-clinical-title { font-size: 18px; font-weight: 500; line-height: var(--wl-leading-24); letter-spacing: -0.015em; } /* 007 标称24 */
.wl-type-news-title { font-size: 14px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.wl-type-btn-medium { font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: 0; }

.wl-type-review-quote { font-size: 20px; font-weight: 600; line-height: var(--wl-leading-24); letter-spacing: -0.07em; } /* 007 标称24 */
.wl-type-review-meta { font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: -0.07em; }

.wl-type-footer-vision { font-size: 18px; font-weight: 520; line-height: var(--wl-leading-24); letter-spacing: 0; color: #fff; } /* 第二十三轮：#FFF/MiSans/字重520/行高32(宪法24→32)；字号 24@1920（步进 18/20/22/24，同 clinical-title） */
.wl-type-footer-cat { font-size: 12px; font-weight: 600; line-height: var(--wl-leading-12); letter-spacing: 0; } /* 007 标称12 */
.wl-type-footer-link { font-size: 11px; font-weight: 600; line-height: var(--wl-leading-12); letter-spacing: 0; } /* 007 标称12 */
/* 尾栏：内容整体在 700px 尾栏内垂直居中，上下留白相等（FR-096）；内容高度响应式 481px（FR-097） */
.wl-footer {
  min-height: var(--wl-section-footer);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wl-footer__inner {
  width: 100%;
  min-height: clamp(361px, 25.05vw, 481px);   /* 内容整体 1920 基准 481px，钳制约 75% 最小值 */
  display: flex;
  flex-direction: column;
  justify-content: center;                      /* 第二十三轮：恢复整体垂直居中、上下等留白（取代 008 FR-022 顶部锚定+padding-top 双重叠加） */
}
/* 008 FR-022 尾部间距（覆盖模板工具类，特异性高于 mt-*/gap-*；公共样式，无需改模板） */
.wl-footer .wl-type-footer-vision { margin-top: clamp(12px, 1.25vw, 24px); }   /* 第二十三轮：愿景↔logo 30→24px@1920；24/1920=1.25vw，钳制约 50% */
.wl-footer__inner > nav { margin-top: clamp(45px, 4.688vw, 90px); }            /* 第九轮 FR-077：分类导航列↔品牌区(logo+愿景) 90px（取代原愿景↔66px）；90/1920=4.688vw，钳制约 50% */
.wl-footer-addr { margin-top: clamp(24px, 1.88vw, 36px); }                     /* 027/FR-024 分隔横线↔地址 36px@1920（mt-9 未编译，改公共样式覆盖） */
.wl-footer .wl-logo__img { height: clamp(28px, 1.98vw, 38px); }               /* 第二十三轮：尾栏 logo 高 38px@1920（头部 logo 仍 28px）；38/1920=1.98vw */
.wl-footer__inner nav .wl-type-footer-link { gap: clamp(6px, 0.63vw, 12px); }  /* 菜单↔菜单上下间距 12px（覆盖 gap-1=4px）；12/1920=0.63vw，钳制约 50% */
/* 特性010 轮次10 FR-052：移动端(<960) 尾栏整体内容上下间距固定 30px——取代 min-height(481/440 钳制) 垂直居中分配的不可控上下留白；footer 与 inner 均改内容自适应高 + 30px 上下内边距 */
@media (max-width: 959px) {
  footer.wl-footer { min-height: auto; }
  .wl-footer__inner { min-height: auto; padding-block: 30px; justify-content: flex-start; }
}
/* 分类↔横线：模板 .mt-3=12px 已满足 FR-022，无需覆盖 */
.wl-footer-legal { display: flex; flex-direction: column; gap: 4px; }
.wl-footer-legal__line { margin: 0; word-break: break-word; }
@media (min-width: 960px) {
  .wl-footer-legal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1rem;
    row-gap: 4px;
  }
}

/* 页脚社交图标 Figma@1920：整行 147×18.25px → 7.656vw × 0.951vw
 * 四枚图标横向排满 147px（4×30 + 3×9 = 147），单枚 30px → 1.5625vw
 * 二维码弹层（wrapperewm 左上角凸起指向图标）：尺寸与偏移均按图标等比缩放，Figma@1920 基准 30px 图标 → 气泡 132×146、左移 20px */
.wl-footer-social {
  --wl-footer-social-w: clamp(92px, 6.41vw, 123px);   /* 028/FR-007 4×24 + 3×9 = 123@1920（原 147→30 基准） */
  --wl-footer-social-icon: clamp(18px, 1.25vw, 24px);  /* 028/FR-007 社交图标 24×24@1920（原 30；QR 令牌 calc 自动随之缩放） */
  --wl-footer-social-gap: clamp(5px, 0.46875vw, 9px);
  --wl-footer-social-qr-w: clamp(96px, calc(var(--wl-footer-social-icon) * 4.4), 132px);
  --wl-footer-social-qr-h: clamp(106px, calc(var(--wl-footer-social-icon) * 4.867), 146px);
  --wl-footer-social-qr-img: clamp(70px, calc(var(--wl-footer-social-icon) * 3.2), 96px);
  --wl-footer-social-qr-pointer: clamp(12px, calc(var(--wl-footer-social-icon) * 0.667), 20px);
  --wl-footer-social-qr-pad-top: clamp(17px, calc(var(--wl-footer-social-icon) * 0.933), 28px);
  --wl-footer-social-qr-pad-left: clamp(12px, calc(var(--wl-footer-social-icon) * 0.667), 20px);
  --wl-footer-social-qr-gap: clamp(5px, calc(var(--wl-footer-social-icon) * 0.267), 8px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: var(--wl-footer-social-w);
  gap: var(--wl-footer-social-gap);
  flex-shrink: 0;
}
.wl-footer-social__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--wl-footer-social-icon);
  width: var(--wl-footer-social-icon);
  height: var(--wl-footer-social-icon);
  line-height: 0;
  text-decoration: none;
}
.wl-footer-social__icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.wl-footer-social__qr {
  position: absolute;
  top: calc(100% + var(--wl-footer-social-qr-gap));
  /* 右锚定、向左展开 + 镜像气泡：使 wrapperewm 凸起转到右上对准图标，且最右图标(小红书)气泡不再超出视口右缘被裁 */
  left: auto;
  right: calc(-1 * var(--wl-footer-social-qr-pointer));
  transform: scaleX(-1);
  width: var(--wl-footer-social-qr-w);
  height: var(--wl-footer-social-qr-h);
  background-image: url(../images/wrapperewm.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 30;
}
.wl-footer-social__qr img {
  display: block;
  width: var(--wl-footer-social-qr-img);
  height: var(--wl-footer-social-qr-img);
  margin: var(--wl-footer-social-qr-pad-top) 0 0 var(--wl-footer-social-qr-pad-left);
  border-radius: clamp(6px, calc(var(--wl-footer-social-icon) * 0.333), 10px);
  transform: scaleX(-1); /* 抵消父级气泡镜像，二维码正常显示 */
}
.wl-footer-social__item:hover .wl-footer-social__qr,
.wl-footer-social__item.is-open .wl-footer-social__qr,
.wl-footer-social__item:focus-within .wl-footer-social__qr {
  opacity: 1;
  visibility: visible;
}
@media (hover: none) {
  .wl-footer-social__item:hover .wl-footer-social__qr {
    opacity: 0;
    visibility: hidden;
  }
  .wl-footer-social__item.is-open .wl-footer-social__qr {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/* 尾栏精确高度（FR-003） */
footer { min-height: var(--wl-section-footer, 700px); }

@media (min-width: 960px) {
  .wl-type-hero-title { font-size: 30px; }
  .wl-type-products-heading { font-size: 28px; }
  .wl-type-card-title-lg { font-size: 22px; }
  .wl-type-card-desc-lg { font-size: 18px; }
  .wl-type-card-link { font-size: 15px; }
  .wl-type-section-semibold,
  .wl-type-section-demibold { font-size: 30px; }
  .wl-type-strain-lead { font-size: 20px; }  .wl-type-card-org { font-size: 15px; }
  .wl-type-clinical-title { font-size: 20px; }
  .wl-type-news-title { font-size: 15px; }
  .wl-type-btn-medium { font-size: 15px; }
  .wl-type-review-quote { font-size: 22px; }
  .wl-type-review-meta { font-size: 13px; }
  .wl-type-footer-vision { font-size: 20px; }
  .wl-type-footer-cat { font-size: 13px; }
  .wl-type-footer-link { font-size: 11px; }
}
@media (min-width: 1280px) {
  .wl-type-hero-title { font-size: 36px; }
  .wl-type-products-heading { font-size: 32px; }
  .wl-type-card-title-lg { font-size: 26px; }
  .wl-type-card-desc-lg { font-size: 20px; }
  .wl-type-section-semibold,
  .wl-type-section-demibold { font-size: 36px; }
  .wl-type-strain-lead { font-size: 21px; }
  .wl-type-card-org { font-size: 15px; }
  .wl-type-clinical-title { font-size: 22px; }
  .wl-type-news-title { font-size: 15px; }
  .wl-type-review-quote { font-size: 23px; }
  .wl-type-review-meta { font-size: 14px; }
  .wl-type-footer-vision { font-size: 22px; }   /* 第二十三轮：21→22（步进至 24@1920） */
  .wl-type-footer-cat { font-size: 13px; }
}
@media (min-width: 1920px) {
  .wl-type-hero-title { font-size: 40px; }
  .wl-type-products-heading { font-size: 36px; }
  .wl-type-card-title-lg { font-size: 30px; }
  .wl-type-card-desc-lg { font-size: 24px; }
  .wl-type-card-link { font-size: 16px; }
  .wl-type-section-semibold,
  .wl-type-section-demibold { font-size: 40px; }
  .wl-type-strain-lead { font-size: 22px; }  .wl-type-card-org { font-size: 16px; }
  .wl-type-clinical-title { font-size: 24px; }
  .wl-type-news-title { font-size: 16px; }
  .wl-type-btn-medium { font-size: 16px; }
  .wl-type-review-quote { font-size: 24px; }
  .wl-type-review-meta { font-size: 16px; }
  .wl-type-footer-vision { font-size: 24px; }   /* 第二十三轮：22→24@1920 */
  .wl-type-footer-cat { font-size: 14px; }
  .wl-type-footer-link { font-size: 12px; }
}

/* ---------- 布局容器 (Container) ---------- */
/* 内容容器：对齐 Figma 内容区（≈1336）。max-width 1392 = 1336 + 24×2 内边距，
 * 使 ≥1280 桌面下可用文字宽度 = 1392 − 48 = 1344 ≈ Figma 1336，恢复设计稿行长，
 * 避免中等桌面（如 1470）因容器过窄而比 Figma 更早换行。 */
.wl-container {
  width: 100%;
  max-width: var(--wl-container-max);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 960px)  { .wl-container { padding-inline: 32px; } }
@media (min-width: 1280px) { .wl-container { padding-inline: 24px; } }

.wl-section { padding-block: clamp(56px, 4.58vw, 88px); } /* Figma：段上下各 88（@1920），两段间 176（对齐三大平台卡底→四大标题跨距 356） */

/* 满屏区块：每屏占满视口高度（首屏除外的各栏 + 首屏 Hero）
   各栏高度通过 CSS 自定义属性驱动，桌面基准取自设计稿（Figma@1920），
   移动端通过 clamp() 按视口等比例缩放 */
.wl-screen { min-height: var(--wl-section-h1, 100vh); }
.wl-screen--pad { padding-block: clamp(56px, 8vh, 104px); }

/* 各栏精确 min-height（FR-003 / 特性 005 四档）
   移动端（<960）按比例缩小，中屏（960–1279）过渡高度，≥1280 用设计高度 */
#products  { min-height: var(--wl-section-h2, 875px); }
#research  { min-height: var(--wl-section-h3, 1230px); }
#brand     { min-height: var(--wl-section-h4, 902px); }
#clinical  { min-height: var(--wl-section-h5, 902px); }
/* 第6栏 科研动态 section — 紧随第5栏 */
.wl-bg-news { min-height: var(--wl-section-h6, 902px); }
/* 028/FR-008 科研动态栏：内容与栏目上下间距 50px@1920（027 曾为 0，本期改 50）；取消固定栏高(min-height:0)、由内容+50padding 撑高。
   特异性 (0,2,0) 覆盖各档单类 .wl-bg-news / .wl-screen--pad min-height/padding */
.wl-screen.wl-bg-news { min-height: 0; padding-block: clamp(35px, 2.60vw, 50px); } /* 028/FR-008 科研动态栏内容上下↔栏目 50px@1920（取代 027 的 0）；特异性(0,2,0) 覆盖各档 */
#reviews   { min-height: var(--wl-section-h7, 700px); }
#faq       { min-height: var(--wl-section-h8, 735px); }
/* 特性010 轮次4 FR-032：产品中心 mega「了解更多」锚点 #products 平滑滚动（html scroll-behavior:smooth 已设 L183）时避开固定头 */
#products { scroll-margin-top: var(--wl-header-h); }

/* 栏位高度响应式（特性 005 四档断点）：移动端 <960 按比例缩小；
   中屏 960–1279 用过渡高度；≥1280 用 :root 设计高度。
   首屏 Hero 桌面（≥960）改由 aspect-ratio 驱动（见下方），仅移动端在此设高度。 */
@media (max-width: 959px) {
  .wl-screen, #top.wl-hero-carousel { min-height: 520px; }
  #products  { min-height: 560px; }
  #research  { min-height: 680px; }
  #brand     { min-height: 560px; }
  #clinical  { min-height: 560px; }
  .wl-bg-news { min-height: 560px; }
  #reviews   { min-height: 440px; }
  #faq       { min-height: 460px; }
  footer     { min-height: 440px; }
}
@media (min-width: 960px) and (max-width: 1279px) {
  #products  { min-height: 700px; }
  #research  { min-height: 960px; }
  #brand     { min-height: 720px; }
  #clinical  { min-height: 720px; }
  .wl-bg-news { min-height: 720px; }
  #reviews   { min-height: 560px; }
  #faq       { min-height: 590px; }
  footer     { min-height: 560px; }
}

/* 第2栏重叠布局（FR-014–018）
   第2栏与第1栏/第3栏各重叠 60px；第2栏位于下层；
   第1栏下角 + 第3栏上角圆角 36px */
#top.wl-hero-carousel {
  position: relative;
  z-index: 2;
  border-bottom-left-radius: 36px;
  border-bottom-right-radius: 36px;
  /* 特性010 诉求三①：Hero 背景满铺 100vw（full-bleed，复用 #products 模式，脱离 body max-width:1920）；
     内容仍由内部 .wl-container 1392 居中；html overflow-x:clip 防横向滚动；与诉求一固定高854+cover 协同 */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}
/* 特性 010 轮次9：桌面（≥960）首屏高度改为占满视口高度（--wl-section-h1=100dvh），撤销轮次8 的 44.48vw 宽度驱动流式 + 诉求一固定 854。
   854/44.48vw 都按宽度算高、填不满更高视口（底部留白）；100dvh 随视口高度自适应、始终满屏。
   先写 100vh 回退（不支持 dvh 的旧浏览器），再写 var(--wl-section-h1)=100dvh 覆盖（支持的浏览器取动态视口高、防移动端地址栏跳动）。
   背景 .wl-hero-bg-layer{background-size:cover} 在满屏高下自动裁切铺满（用户确认采 cover）。
   移动端(<960) 仍按移动背景图比驱动（见下，沿用既有）。 */
@media (min-width: 960px) {
  #top.wl-hero-carousel {
    height: 100vh;                 /* 回退：不支持 dvh 的旧浏览器 */
    height: var(--wl-section-h1);
    min-height: 100vh;             /* 回退：同上 */
    min-height: var(--wl-section-h1);
  }
}
/* 特性 005 FR-013：移动端（<960）首屏高度按移动背景图(prop3)固有比例随宽度变化，
   不裁剪。--wl-hero-ar-m 由 js/main.js 运行时按图片 naturalWidth/Height 写入；
   未设置时（图片未加载/无 prop3）aspect-ratio 失效，回退由内容撑高（不引入兜底比例）。
   覆盖上方 @media(max-width:959) 的 #top 固定 520px。 */
@media (max-width: 959px) {
  #top.wl-hero-carousel {
    aspect-ratio: var(--wl-hero-ar-m);
    min-height: 0;
    height: auto;
  }
}
#products {
  position: relative;
  z-index: 1;
  margin-top: clamp(-54px, -2.81vw, -40.5px);   /* 特性 006 FR-019a：与第1栏(Hero)重叠 54（取代 004 的 60），1920 基准响应式 */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}
#research {
  position: relative;
  z-index: 2;
  margin-top: clamp(-85px, -4.43vw, -63.75px);  /* 特性 006 FR-019a：与第2栏(#products)重叠 85（取代 004 的 60），1920 基准响应式 */
  border-top-left-radius: 36px;
  border-top-right-radius: 36px;
}
/* 特性010 轮次15 FR-059（修订轮次10 FR-050①）：移动端第2栏(#products)上下"受控重叠"遮住相邻栏圆角弧形（图1/图2）。
   机制：#products(z1) 填于 #top/#research(z2) 之后 → 重叠区内 products 填满相邻栏圆角扣角/露白 → 弧形被遮（同桌面）。
   ① 上：#products 负 margin-top 上移与 Hero 重叠、遮 Hero 底 36 圆角；② 下：#products padding-bottom 加长出底部空白区，#research 负 margin-top 上移与该空白重叠、其顶 36 圆角由 products 填后遮住；
   ③ 不压卡片：卡片 flex-start 靠上（padding-top 140），加长空白在卡片下方，#research 负 margin(40) ≤ 加长(48) → 重叠只落空白。值实现期真机视觉核定（须覆盖 36 圆角且不及卡片）。
   ⚠️ 本规则 MUST 置于 #products(L547)/#research(L555) 基态规则之后（源码顺序胜出，否则被基态覆盖，见轮次10 教训）。 */
@media (max-width: 959px) {
  #products { margin-top: -40px; padding-bottom: 48px; }
  #research { margin-top: -40px; }
}

/* =====================================================================
 * 区块背景 (Section Backgrounds) — FR-013
 * 渐变/遮罩/装饰光晕为「表现型」样式，集中定义为作用域类；
 * 底图 URL 为 CMS 动态注入值，由模板以 `--wl-bg-image` CSS 变量内联承载。
 * ===================================================================== */
.wl-bg-image,
.wl-bg-products, .wl-bg-research, .wl-bg-clinical,
.wl-bg-news, .wl-bg-family, .wl-bg-reviews, .wl-bg-faq {
  background-size: cover;              /* 特性010 轮次4 FR-031：等比铺满、大裁切小放大、不变形（撤销轮次3 100% 100% 拉伸） */
  background-position: center;
  background-repeat: no-repeat;
}
/* 满屏底图（FR-012 例外）：首屏轮播、各栏底图与页脚突破 body 1920 上限，
 * 宽度始终铺满视口，不随窗口缩放/超宽屏两侧留白；内容仍由 .wl-container 维持
 * 1392 居中，故文字/卡片视觉位置不变。
 * 原理：50% 相对父级内容盒（≤1920），50vw 相对视口——视口 ≤1920 时两者相等
 * （margin:0，无变化），>1920 时负外边距把区块横向拉满整屏。html{overflow-x:clip}
 * 已存在，可吸收 100vw 带来的横向溢出。 */
.wl-bg-image,
.wl-bg-products, .wl-bg-research, .wl-bg-clinical,
.wl-bg-news, .wl-bg-family, .wl-bg-reviews, .wl-bg-faq,
footer {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}
/* 第 2–8 栏底图：无底图纯白；有 CMS 底图时仅铺原图，无渐变/叠层 */
.wl-section-bg--plain,
.wl-bg-products--plain {
  background-color: #fff;
  background-image: none;
}
/* 008 FR-015 第3栏专属兜底底色：无底图(--plain)态用 #E5E6E5（令牌承载），
 * 特异性 (1,1,0) > .wl-section-bg--plain (0,1,0)；有底图态走下方 :not(--plain) 的 background-image，不叠底色。
 * 对禁止项#3「禁止给兜底值」的已确认单点豁免，仅作用 #research，不扩散。 */
#research.wl-section-bg--plain {
  background-color: var(--wl-bg-research-plain);
}
.wl-section-bg--has-bg,
.wl-bg-products--has-bg,
.wl-bg-products:not(.wl-bg-products--plain):not(.wl-section-bg--plain),
.wl-bg-research:not(.wl-section-bg--plain),
.wl-bg-clinical:not(.wl-section-bg--plain),
.wl-bg-news:not(.wl-section-bg--plain),
.wl-bg-reviews:not(.wl-section-bg--plain),
.wl-bg-faq:not(.wl-section-bg--plain),
.wl-bg-image:not(.wl-section-bg--plain) {
  background-image: var(--wl-bg-image, none);
}
@media (max-width: 959px) {
  .wl-section-bg--has-bg,
  .wl-bg-products--has-bg,
  .wl-bg-products:not(.wl-bg-products--plain):not(.wl-section-bg--plain),
  .wl-bg-research:not(.wl-section-bg--plain),
  .wl-bg-clinical:not(.wl-section-bg--plain),
  .wl-bg-news:not(.wl-section-bg--plain),
  .wl-bg-reviews:not(.wl-section-bg--plain),
  .wl-bg-faq:not(.wl-section-bg--plain),
  .wl-bg-image:not(.wl-section-bg--plain) {
    background-image: var(--wl-bg-image-mobile, var(--wl-bg-image, none));
  }
}

/* 遮罩 / 渐变叠层（绝对定位由模板的布局类承担，此处仅定义底色/渐变） */
.wl-scrim-hero  { background: linear-gradient(100deg, rgba(248,250,252,.92) 0%, rgba(248,250,252,.7) 38%, rgba(248,250,252,0) 70%); }

/* 首屏 Hero 轮播底图：满屏宽，仅 JS 层切换 prop2 原图，无渐变/遮罩/CSS 变量叠层 */
.wl-hero-carousel {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: none;
}
.wl-hero-carousel > .wl-container {
  position: relative;
  z-index: 1;
}
.wl-glow-soft   { background: radial-gradient(circle, rgba(255,255,255,.25), transparent 70%); }
.wl-glow-brand  { background: radial-gradient(circle, rgba(0,0,225,.12), transparent 70%); }
.wl-glow-footer { background: radial-gradient(120% 100% at 70% 0%, rgba(255,255,255,.28), transparent 60%); }

/* =====================================================================
 * 统一组件 (Unified Components)
 * ===================================================================== */

/* ---------- 按钮 (Button) ---------- */
.wl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--wl-radius-pill);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wl-btn:active { transform: translateY(1px); }
.wl-btn-sm { height: 36px; padding: 0 16px; font-size: 14px; line-height: var(--wl-leading-14); } /* 007 标称14 */
.wl-btn-lg { height: 48px; padding: 0 26px; font-size: 16px; }

/* 特性010：有背景填充的 CTA（品牌蓝 .wl-btn-primary / 白底 .wl-btn-on-brand）按文字内容自适应宽高，
   统一内边距 7.5/12（取代固定 min-width/height）；无背景按钮(underline/ghost/outline)不在此列。
   置于 .wl-btn-sm/.wl-btn-lg 之后，依源序覆盖其固定 height/padding。 */
.wl-btn-primary,
.wl-btn-on-brand {
  min-width: 0;
  height: auto;
  padding: var(--wl-cta-pad-y) var(--wl-cta-pad-x);
}

.wl-btn.wl-btn-primary:not(.wl-btn-sm) { font-size: 16px; font-weight: 500; line-height: 1; letter-spacing: 0; }
.wl-ri__intro .wl-btn-sm {
  padding: var(--wl-cta-pad-y) var(--wl-cta-pad-x);   /* 特性010：内容自适应 + 7.5/12（移除固定 min-width/height） */
  border-radius: 32px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.15px;
  margin-top: clamp(19px, 1.98vw, 38px); /* 008 C2 「了解更多」按钮↔副标题间距 响应式（1920 基准 38px），覆盖模板 mt-6(24px) */
}
.wl-btn-primary { background: var(--wl-brand); color: #fff; }
.wl-btn-primary:hover { background: var(--wl-brand-600); box-shadow: 0 8px 22px rgba(0, 0, 225, .28); }

.wl-btn-on-brand { background: #fff; color: var(--wl-brand); }
.wl-btn-on-brand:hover { background: rgba(255, 255, 255, .88); }

/* 双标记字色覆盖（FR-008）：第2个 [] 指定与底色默认字色相反时生效 */
.wl-btn-primary.wl-btn--ink-brand { color: var(--wl-brand); }
.wl-btn-on-brand.wl-btn--ink-white { color: #fff; }

/* CTA 胶囊按钮去掉 .wl-btn 的 1px 透明边框：使 min-width:88 下静止宽精确=88px
 * （文字64 + padding 12+12 = 88；含 border 则 box-sizing:border-box 下会变 90px）。
 * hover/focus 时 min-width 允许平滑变宽显示箭头。下划线按钮另有 border-bottom，不在此列。 */
.wl-hero-btn-pos,
.wl-card-glass .wl-btn-sm,
.wl-ri__intro .wl-btn-sm,
[data-wl-strain-more] { border: 0; }

/* 品牌色背景上的描边按钮（自研菌株「了解更多」） */
.wl-btn-on-brand-outline { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.wl-btn-on-brand-outline:hover { background: #fff; color: var(--wl-brand); border-color: #fff; }

.wl-btn-outline { background: transparent; border-color: var(--wl-brand); color: var(--wl-brand); }
.wl-btn-outline:hover { background: var(--wl-brand); color: #fff; }

.wl-btn-ghost { background: transparent; color: var(--wl-brand); padding-inline: 4px; height: auto; }
.wl-btn-ghost:hover { opacity: .75; }
.wl-btn-ghost .wl-btn-arrow { transition: transform .2s ease; }
.wl-btn-ghost:hover .wl-btn-arrow { transform: translateX(4px); }

/* 下划线文字按钮（Figma #030303 文字 + 底边 1px，临床区块 CTA） */
.wl-btn-underline {
  background: transparent;
  color: var(--wl-ink);
  min-width: var(--wl-cta-w);    /* min-width（非 width）：静止≈88px，hover/focus 时可变宽容纳 .wl-cta-arrow 箭头 */    /* FR-056/097 第5栏「了解更多」响应式 CTA 尺寸（保留下划线文字样式） */
  height: var(--wl-cta-h);
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid var(--wl-ink);
  border-radius: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.15px;
}
.wl-btn-underline:hover { opacity: .7; }
/* 第七轮：第5栏「了解更多」改用统一 `.wl-cta-arrow`（reveal），原 `.wl-btn-underline .wl-btn-arrow` 常驻箭头规则已移除 */

/* 第4栏菌株库「了解更多」：覆盖 .wl-btn-lg，统一为响应式 CTA 88×36（FR-049a/097，保留 16px 字号） */
[data-wl-strain-more] {
  padding: var(--wl-cta-pad-y) var(--wl-cta-pad-x);   /* 特性010：内容自适应 + 7.5/12（移除固定 min-width/height） */
  border-radius: 32px;
}

/* 圆形箭头按钮（轮播） */
/* 第2栏左右切换按钮（FR-020/021）：容器 88×36，单按钮 36×36，圆角 24px */
.wl-arrow-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  width: 88px;
  height: 36px;
}
.wl-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 24px;
  border: 1px solid var(--wl-ink-30);
  color: var(--wl-ink-80);
  background: transparent;
  opacity: 0.5;
  padding: 8px 7px 8px 8px;
  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
}
.wl-arrow-btn:hover { background: var(--wl-brand); border-color: var(--wl-brand); color: #fff; opacity: 1; }

/* R5/FR-032·033·034：品牌故事页（.wl-subpage--bs）的箭头按钮（奖项左右切换 + 新闻 more）采用中性填充态，
   覆盖全局描边/品牌蓝 hover；作用域隔离，products 等其他页全局 .wl-arrow-btn 不受影响 */
.wl-subpage--bs .wl-arrow-btn { background: var(--wl-arrow-fill); border-color: transparent; opacity: 1; color: var(--wl-ink-80); padding: 0; } /* R5/FR-036 padding:0 使 20×20 图标在 36×36 按钮内经 flex 水平垂直居中（覆盖全局不对称内边距） */
.wl-subpage--bs .wl-arrow-btn:hover { background: var(--wl-arrow-fill-hover); border-color: transparent; color: var(--wl-ink-80); }
/* R5/FR-037：奖项左右按钮 + 新闻 more 按钮内箭头图标白色 1px 描边（镜像 #products 写法，non-scaling-stroke 保 1px 不随缩放变化） */
.wl-subpage--bs .wl-arrow-btn svg path { stroke: #FFF; stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* ---------- 标签 / 胶囊 (Tag / Pill) ---------- */
.wl-tag {
  display: inline-flex;         /* FR-024 宽度随字数自适应（无固定宽度，由内容+padding 撑开） */
  align-items: center;
  width: auto;
  padding: 4px 6px;
  border: 1px solid currentColor;
  border-radius: var(--wl-radius-md);
  font-size: 12px;
  line-height: var(--wl-leading-12);   /* 007 标称12 */
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}
.wl-tag--gold { color: var(--wl-gold); }
.wl-tag--blue { color: var(--wl-brand); } /* 029/FR-004 标签蓝色（品牌蓝令牌），与 [蓝色] 标记配套 */

/* 金色标题文字（用于轮播图标题中的[金色]标记） */
.wl-text-golden { color: var(--wl-gold); }

/* 菌株名芯片（可点击切换：2 列网格，激活=实色填充） */
.wl-strain-chips {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;                    /* 第十轮：芯片组水平居中 */
  justify-items: center;
  gap: var(--wl-strain-chip-gap);             /* 菌株间距 10（特性 009） */
  max-width: 380px;
  margin-inline: auto;                        /* 芯片容器在左栏内居中 */
}
.wl-strain-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wl-strain-chip-w);             /* 158（特性 009，原 150） */
  height: var(--wl-strain-chip-h);            /* 26 */
  padding: 0 clamp(4px, 0.83vw, 16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--wl-radius-card);       /* 24px — Figma */
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease;
}
/* 窄屏（手机/大屏手机）：菌株芯片单列，避免 2 列容器超出视口被右侧裁切 */
@media (max-width: 959px) {
  .wl-strain-chips { grid-template-columns: minmax(0, 1fr); max-width: none; }
}
.wl-strain-chip:hover { background: rgba(255, 255, 255, .14); }
.wl-strain-chip.is-active {
  background: var(--wl-gold-gradient);
  color: #fff;
  border-color: #d5a760;
}
.wl-strain-chip[hidden] { display: none; }

/* ---------- 卡片 (Card) ---------- */
.wl-card {
  background: var(--wl-surface);
  border-radius: var(--wl-radius-md);
  box-shadow: var(--wl-shadow-soft);
  overflow: hidden;
}
.wl-card-lg { border-radius: var(--wl-radius-2xl); }

/* 玻璃拟态卡片（首屏产品卡） */
/* 第2栏产品卡片（FR-022–028） */
.wl-card-glass {
  min-width: 0;
  max-width: 100%;
  width: 322px;
  height: 470px;
  overflow-wrap: break-word;
  word-break: break-word;
  background: var(--wl-glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--wl-radius-md);
  padding-top: 40px;
  padding-bottom: 40px;
  gap: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wl-card-glass h3,
.wl-card-glass .wl-title {
  width: 318px;
  min-height: 30px;            /* FR-023 修订：最大宽=卡片宽(max-width:100%)，标题过长换行多行、高度随内容增长、不截断（原固定 height:30px 改 min-height） */
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  margin: 0 auto;
}
.wl-card-glass p,
.wl-card-glass .wl-tag {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* 卡片标签（FR-024/025） */
.wl-card-glass .wl-tag {
  width: auto;                 /* FR-024 修订：单个标签宽度随文字内容撑开（不固定 72px，72px 仅参考最小宽度） */
  height: 24px;
  border-radius: 12px;
  padding: 4px 6px;
  border-width: 1px;
  gap: 10px;
  font-family: var(--wl-font);
  font-weight: 330;
  font-size: 12px;
  line-height: var(--wl-leading-12);   /* 007 标称12 */
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* 卡片产品图片（FR-026） */
.wl-card-glass img:not(.wl-tag img) {
  width: 103.5px;
  height: 160px;
  object-fit: contain;
  flex-shrink: 0;
}
/* 卡片描述文字（FR-027） */
.wl-card-glass .wl-body-lg {
  width: 318px;
  height: 27px;
  max-width: 100%;
}
/* 卡片按钮（FR-028） */
.wl-card-glass .wl-btn-sm {
  padding: var(--wl-cta-pad-y) var(--wl-cta-pad-x);   /* 特性010：内容自适应 + 7.5/12（移除固定 min-width/height） */
  border-radius: 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* 卡片按钮三态交互（FR-029–031） */
.wl-card-glass .wl-btn-primary:hover,
.wl-card-glass .wl-btn-primary:focus-visible {
  background: #fff;
  color: var(--wl-brand);
  box-shadow: 0 8px 22px rgba(0, 0, 225, .28);
}
.wl-card-glass .wl-btn-sm:focus-visible {
  outline: 2px solid var(--wl-brand);
  outline-offset: 2px;
}

/* ---------- 表单 (Form) ---------- */
.wl-field { display: flex; flex-direction: column; gap: 8px; }
.wl-label { font-size: 14px; line-height: var(--wl-leading-14); color: var(--wl-ink-80); } /* 007 标称14 */
.wl-input,
.wl-textarea,
.wl-select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--wl-line);
  border-radius: var(--wl-radius-md);
  background: #fff;
  color: var(--wl-ink);
  font-size: 14px;
  line-height: var(--wl-leading-14);   /* 007 标称14 */
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.wl-textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; }
.wl-input::placeholder,
.wl-textarea::placeholder { color: var(--wl-ink-30); }
.wl-input:focus,
.wl-textarea:focus,
.wl-select:focus { border-color: var(--wl-brand); box-shadow: 0 0 0 3px rgba(0, 0, 225, .12); }

/* ---------- 全局聚焦 (Focus) ---------- */
/* 特性030 FR-008~010：抑制鼠标点击 / 程序化聚焦产生的浏览器默认蓝色聚焦环（全站 tab/按钮等，
   如导航二级项 .wl-nav-mega__sub、菌株 tab、各类 chip）；仅命中「非键盘」聚焦、仅改 outline，
   不影响表单 :focus 的 border/box-shadow 与既有 :focus-visible 描边。
   键盘 Tab 聚焦走 :focus-visible 分支，保留可见聚焦提示（可访问性不退化，FR-009）。 */
:focus:not(:focus-visible) { outline: none; }

/* ---------- 导航 (Navigation) — Figma 345:8134 · FR-020~022 顶栏三态 ---------- */
.wl-nav-link,
button.wl-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px clamp(4px, 0.521vw, 10px); /* 水平内边距随视口缩放（10px@1920）；垂直保持 10px 稳定胶囊高 */
  border: none;
  border-radius: var(--wl-radius-xl);
  font-size: clamp(14px, 0.833vw, 16px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  color: var(--wl-on-brand);
  text-decoration: none;
  transition: background-color .2s, backdrop-filter .2s, color .2s;
}

/* 页顶（.is-at-top）：全透明底 + 白字 */
.wl-header.is-at-top .wl-nav-link { color: var(--wl-on-brand); }
.wl-header.is-at-top .wl-nav-link:hover {
  background: rgba(255, 255, 255, .18);
  color: var(--wl-on-brand);
}

/* 第八轮(修订)①：页顶展开 → 文字保持白色(不变色)，仅加黑色胶囊底；与滚动后一致 */
/* 特性010 诉求四③：去掉「选中(is-active)」效果——胶囊底仅在 hover→展开(aria-expanded) 时出现 */
.wl-header.is-at-top .wl-nav-link[aria-expanded="true"] {
  border-radius: 28px;
  background: var(--wl-mega-panel-bg); /* 与 Mega 遮层同色 rgba(0,0,43,.20) */
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  color: var(--wl-on-brand);
}

/* 滚动后（.is-scrolled）：默认白字（与页顶一致） */
.wl-header.is-scrolled .wl-nav-link { color: var(--wl-on-brand); }
.wl-header.is-scrolled .wl-nav-link:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--wl-on-brand);
}

/* 第八轮(修订)①：滚动后展开 → 文字保持白色(不变色)，仅加黑色胶囊底；与页顶一致 */
/* 特性010 诉求四③：去掉「选中(is-active)」——胶囊底仅在 hover→展开(aria-expanded) 时出现 */
.wl-header.is-scrolled .wl-nav-link[aria-expanded="true"] {
  border-radius: 28px;
  background: var(--wl-mega-panel-bg); /* 与 Mega 遮层同色 rgba(0,0,43,.20) */
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  color: var(--wl-on-brand);
}

/* ---------- 头部外壳 + Mega 弹层（Figma 345:8134 · FR-024 毛玻璃令牌） ---------- */
.wl-nav-glass {
  background: var(--wl-nav-glass-bg);
  -webkit-backdrop-filter: var(--wl-nav-glass-blur);
  backdrop-filter: var(--wl-nav-glass-blur);
}
.wl-header-shell {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background .35s ease;
}
.wl-header {
  position: relative;
  background: transparent;
  transition:
    background-color .3s ease,
    box-shadow .3s ease,
    -webkit-backdrop-filter .3s ease,
    backdrop-filter .3s ease;
}
/* FR-020：页顶默认全透明（无底色） */
.wl-header.is-at-top {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
/* 特性010 轮次4 FR-027：页顶（未滚动）hover 弹 mega 时顶栏保持透明——移除原玻璃底（mega 遮层面板自身仍有 bg，见 L1154） */
.wl-header.is-at-top:has(.wl-nav-link[aria-expanded="true"]) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 第八轮②：滚动后导航 = 内容(1360)内浮动玻璃胶囊（取代整条毛玻璃底）；条带本身透明 */
.wl-header.is-scrolled {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
/* 左胶囊（logo+菜单）：高=条带高−24（上下各留12）、圆角42、半透明深蓝+blur50；logo距胶囊左28、logo→首菜单38 */
.wl-header.is-scrolled .wl-header__left {
  height: calc(var(--wl-header-h) - 24px);
  padding: 0 var(--wl-capsule-bleed);
  margin-left: calc(-1 * var(--wl-capsule-bleed));  /* 特性010 轮次3 FR-026：负外边距抵消胶囊左内边距，使 logo 横向位置与页顶一致、滚动时不跳移；外溢量令牌化（轮次8 与 mega 遮层对齐共用） */
  /* 特性010 轮次6 FR-035：移除滚动态 gap 覆盖（原 clamp(28px,1.979vw,38px)=38），继承基态 .wl-header__left gap=clamp(30px,2.083vw,40px)（40@1920），使 logo↔首菜单间距两态一致 */
  border-radius: 42px;
  background: var(--wl-mega-panel-bg);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}
/* 菜单「文本间距」统一 32px@1920 响应式：相邻菜单文字距 = 按钮 gap + 两侧水平内边距（各 10px@1920）。
   故 gap = 文本间距 − 2×水平内边距 → 12px@1920，两态一致。1920 基准；<960 桌面导航隐藏换汉堡。 */
.wl-header__nav { gap: calc(clamp(13px, 1.667vw, 32px) - 2 * clamp(4px, 0.521vw, 10px)); }
/* 右胶囊（商城+EN）：宽137、同款玻璃 */
.wl-header.is-scrolled .wl-header__actions {
  width: fit-content;                                   /* 特性010 轮次3 FR-026：取代固定 clamp(103,7.135vw,137)——胶囊随内容自适应、不强制对齐容器右缘 */
  padding: 0 var(--wl-capsule-bleed);                   /* 与左胶囊同款水平内边距，胶囊形态自然 */
  margin-right: calc(-1 * var(--wl-capsule-bleed));     /* 镜像左胶囊：负外边距抵消内边距，使右侧入口(天猫/EN)横向位置与页顶一致、不跳移 */
  height: calc(var(--wl-header-h) - 24px);
  justify-content: center;
  border-radius: 42px;
  background: var(--wl-mega-panel-bg);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}
/* 第十五轮修复：滚动后左胶囊不再绝对定位到视口 252px（曾导致胶囊左缘超出内容左缘）。
   左胶囊保持在 .wl-container 流内（bar 沿用 space-between）→ 左胶囊左缘 = 主体内容左缘、右胶囊右缘 = 内容右缘，两态对齐。 */
/* Mega 展开时顶栏与弹层已是同色玻璃、无缝衔接，不再加底部分割线（原 border-bottom 已移除） */
.wl-header-shell:has(.wl-nav-mega.is-open) .wl-nav-mega__panel {
  border-top: none;
}
/* 导航栏与主体内容对齐：header 直接沿用全站 .wl-container（max-width 1392 + 多档内边距 20/32/24），
   故 logo（页顶）/ 胶囊外缘（滚动）左缘 = 主体内容左缘（≈288@1920），两态一致、随容器响应式。 */
.wl-header__bar { display: flex; align-items: center; justify-content: space-between; height: var(--wl-header-h); gap: clamp(12px, 0.833vw, 16px); } /* 第八轮 FR-099：64→88px（响应式） */
/* 左侧分组：Logo 与导航。Figma@1920：logo 右缘→首个菜单项约 40px。 */
.wl-header__left { display: flex; align-items: center; gap: clamp(30px, 2.083vw, 40px); }
/* 右上角入口分组（FR-091/FR-092）：天猫图片入口 + 英文版本「EN」文字链接 */
.wl-header__actions { display: flex; align-items: center; gap: clamp(12px, 0.833vw, 16px); }
/* 天猫图片入口（FR-091）：默认 mall.png，hover 切 mallon.png（由 JS initTmallHover 切 src），移出复位 */
.wl-nav-tmall { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.wl-nav-tmall__img { height: clamp(18px, 1.25vw, 24px); width: auto; display: block; }
/* 英文版本「EN」链接（FR-092）：复用 .wl-nav-link 字号（16px）确保与导航菜单一致 */
.wl-nav-en { text-transform: uppercase; }
.wl-logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 18px; }
/* Logo（官网logo.png）：各顶栏态均原图展示，禁止 filter / 色彩变换 */
.wl-logo__img { height: clamp(22px, 1.458vw, 28px); width: auto; display: block; }

.wl-nav-item { position: relative; display: inline-flex; }

.wl-nav-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  /* 特性010 轮次8 FR-039（含胶囊对齐修订）：约束为与头部 .wl-container 同宽同位的居中盒（max 1392 居中 + 容器内边距），
     使本元素 content-box = 头部内容盒（logo/EN 所在）；面板再由负外边距外扩 ±胶囊外溢量 → 面板左右缘 = 滚动态导航胶囊左右外缘。
     padding-inline 仅在 ≥960 设（匹配 .wl-container 的 32/24），<960 为 0 → 移动端全屏遮层不受影响。overflow 默认可见，html overflow-x:clip 防横向滚动。 */
  max-width: var(--wl-container-max);
  margin-inline: auto;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -10px, 0);
  transition:
    opacity .32s ease,
    transform .32s ease,
    visibility 0s linear .32s;
}
.wl-nav-mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition:
    opacity .32s ease,
    transform .32s ease,
    visibility 0s;
}
.wl-nav-mega.is-closing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, -10px, 0);
}
/* 特性010 轮次8 FR-039：mega content-box 内边距匹配 .wl-container（≥960=32、≥1280=24；<960 为 0 → 移动端全屏不受影响） */
@media (min-width: 960px)  { .wl-nav-mega { padding-inline: 32px; } }
@media (min-width: 1280px) { .wl-nav-mega { padding-inline: 24px; } }
.wl-nav-mega__panel {
  /* 特性010 轮次8 FR-039（胶囊对齐）：338 高浮层卡片、半透明深蓝 scrim、blur50、圆角42（四角）。
     宽度 = mega content-box（=头部内容盒）经负外边距向左右各外扩「胶囊外溢量」→ 面板左右缘 = 滚动态导航胶囊左右外缘（取代固定 --wl-mega-w 1640/1414）。 */
  width: auto;
  margin-inline: calc(-1 * var(--wl-capsule-bleed));   /* 面板外扩到胶囊外缘：左缘=内容左缘−外溢、右缘=内容右缘+外溢（与左/右胶囊一致） */
  background: var(--wl-mega-panel-bg);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  border-radius: var(--wl-mega-radius);
  overflow: hidden;
  border-top: none;
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition:
    opacity .32s ease .05s,
    transform .32s ease .05s,
    background-color .3s ease,
    border-color .3s ease;
}
.wl-nav-mega.is-open .wl-nav-mega__panel {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Mega 菜单遮层精确高度（FR-003 修订 / 第八轮 FR-100：336，取代 395） */
.wl-nav-mega__panel { min-height: var(--wl-mega-height); }
.wl-nav-mega.is-closing .wl-nav-mega__panel {
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .wl-nav-mega,
  .wl-nav-mega__panel {
    transition: none;
    transform: none;
  }
}
.wl-header-shell:has(.wl-header.is-at-top) .wl-nav-mega__panel {
  border-top-color: rgba(255, 255, 255, .45);
}
.wl-header-shell:has(.wl-header.is-at-top:has(.wl-nav-link[aria-expanded="true"])) .wl-nav-mega__panel {
  border-top-color: var(--wl-line);
}
.wl-nav-mega__close {
  display: none;
}
.wl-nav-mega__inner {
  display: block;
  max-width: none;                   /* 第八轮：填满 1640 浮层（不再受 .wl-container 1360 限制） */
  min-height: var(--wl-mega-height);
  /* 特性010 轮次8 FR-039（胶囊对齐）：上下 24；左右内边距 = 胶囊外溢量 --wl-capsule-bleed——
     把菜单/右图从「面板缘(=胶囊外缘)」收回到「内容缘」→ 菜单项左缘 = logo 左缘、右图右缘 = EN/天猫右缘（即胶囊内容缘），与头部胶囊内容对齐 */
  padding-block: clamp(18px, 1.25vw, 24px);
  padding-inline: var(--wl-capsule-bleed);
}
.wl-nav-mega__view {
  display: none;
  grid-template-columns: 1fr auto;   /* 第八轮：左菜单弹性 + 右双图按内容(2×380+24) */
  gap: clamp(20px, 2.4vw, 44px);     /* 第八轮②：收窄以给左 2 列(2×360+36)留足空间 */
  align-items: start;                /* 第二十轮：菜单默认靠上（取代居中，对齐设计稿）；右图仍 align-self:center 居中 */
}
.wl-nav-mega__view.is-active { display: grid; }
.wl-nav-mega__aside { min-width: 0; }
/* 特性010 轮次4 FR-032：产品中心遮层菜单下方「了解更多」——复用 .wl-btn-underline，覆盖为白字（深色遮层可读）+ 解除 min-width/height + 置于菜单下方左对齐 */
.wl-nav-mega__more-link {
  min-width: 0;
  height: auto;
  margin-top: var(--wl-mega-sub-gap);
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: clamp(4px, 0.42vw, 8px);
  color: var(--wl-on-brand);
  border-bottom-color: var(--wl-on-brand);
}
.wl-nav-mega__subs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wl-mega-sub-gap); /* 特性010 诉求四⑤：项上下间距 36@1920（取代 4px） */
}
.wl-nav-mega__subs > li { list-style: none; }
/* 特性010 轮次4 FR-029：遮层菜单改单列——移除 ≥1280 的 2 列网格（.wl-nav-mega__subs 保持 flex column、项距 16） */
.wl-nav-mega__sub {
  --wl-mega-dot: clamp(24px, 1.667vw, 32px);     /* 左侧图标 32×32@1920，响应式 */
  --wl-mega-dot-gap: clamp(7px, 0.521vw, 10px); /* 图标↔菜单文字 10px@1920，响应式 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(7px, 0.521vw, 10px);                /* 菜单↔描述 10px@1920，响应式（第十八轮：16→10，已计入激活标题 line-height 行内余白） */
  width: 100%;
  margin: 0;
  padding: 0; /* 特性010 诉求四⑤：项上下间距改由 .wl-nav-mega__subs gap=36 承载，移除原 4px padding 防叠加 */
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: color .2s ease;
}
.wl-nav-mega__sub-row {
  display: flex;
  align-items: center;
  gap: var(--wl-mega-dot-gap);
  width: 100%;
  min-height: var(--wl-mega-sub-leading); /* 特性010 诉求四⑤：菜单文本高 27@1920（取代 20×lh2=40） */
  position: relative;
}
.wl-nav-mega__sub-label {
  flex: 1;
  min-width: 0;
  /* 第八轮③：移除左内边距预留——图标改为流内、仅选中项显示，名称随之被推到图标右侧 */
  font-family: var(--wl-font);
  font-size: clamp(15px, 1.042vw, 20px);       /* 菜单默认字号 20@1920，响应式 */
  font-style: normal;
  font-weight: 600; /* Figma 450 → MiSans Demibold */
  line-height: var(--wl-mega-sub-leading); /* 特性010 诉求四⑤：行高 27@1920（取代 lh:2） */
  color: var(--wl-on-brand);               /* 特性010 轮次4 FR-028：默认白（取代 --wl-on-brand-50）；有激活项时其余转灰见下 */
  transition: color .2s ease;
}
/* 第八轮 FR-084：菜单默认全档 16px（移除原 ≥960px 升 18px 的覆盖）；
   选中（激活）态字号 24px、颜色 #fff（复用既有 is-active，hover 联动右图预览机制不变） */
/* 第十九轮：激活标题 24px / 行高 30px（lh 1.25，上下行内余白各 3px）。
   注：偏离宪法 VI「24→32」映射——此为菜单激活态专属取值（原为 lh:2=48），按用户明确设计要求记录。 */
.wl-nav-mega__sub.is-active .wl-nav-mega__sub-label { font-size: clamp(18px, 1.25vw, 24px); line-height: 1.25; color: #fff; }
/* 特性010 轮次4 FR-028：有激活项时其余项标题转灰（复用 50% 白令牌作灰）；默认（无激活）全白 */
.wl-nav-mega__subs:has(.wl-nav-mega__sub.is-active) .wl-nav-mega__sub:not(.is-active) .wl-nav-mega__sub-label { color: var(--wl-on-brand-50); }
.wl-nav-mega__sub.is-active .wl-nav-mega__sub-row { min-height: clamp(22px, 1.56vw, 30px); } /* 第十九轮：24px × lh 1.25 = 30，行紧贴行高（取代原 48=lh200%），避免多余余白撑大标题↔描述间距 */
/* 第八轮③：图标在流内、仅选中项显示——选中项图标占最左（左缘与其它菜单名左缘对齐），名称被推到右侧 */
.wl-nav-mega__sub-dot {
  display: none;
  flex-shrink: 0;
  width: var(--wl-mega-dot);
  height: var(--wl-mega-dot);
}
.wl-nav-mega__sub.is-active .wl-nav-mega__sub-dot {
  display: block;
}
.wl-nav-mega__sub-desc {
  max-width: clamp(276px, 19.17vw, 368px); /* 第八轮 FR-085：宽 368（1920 基准、响应式） */
  max-height: 0;
  padding-left: 0; /* 第十六轮（特性004 头部导航）：描述左缘对齐「图标左缘」，移除图标宽+间距缩进 */
  overflow: hidden;
  opacity: 0;
  font-family: var(--wl-font);
  font-size: clamp(10px, 0.625vw, 12px);                          /* 12@1920，响应式 */
  font-style: normal;
  font-weight: 400; /* Figma 330 → MiSans Regular */
  line-height: var(--wl-leading-12);        /* 12→18（特性007 映射） */
  color: var(--wl-on-brand);
  overflow-wrap: break-word;
  word-break: break-word;
  transition: max-height .25s ease, opacity .2s ease;
}
.wl-nav-mega__sub.is-active .wl-nav-mega__sub-desc:not(:empty) {
  max-height: 12em;
  opacity: 1;
}
/* 特性010 轮次6 FR-034：有激活项时项距由默认 36 收紧为 20@1920（应用全部项距，沿用 :has(.is-active) 模式；值迭代 16→28→24→20）；20/1920=1.04vw，下限约75% */
.wl-nav-mega__subs:has(.wl-nav-mega__sub.is-active) {
  row-gap: clamp(15px, 1.04vw, 20px);
}
/* 第十七轮：未激活项描述隐藏（高度 0），去掉其「标题↔描述」18px 预留间距，使标题间距真正收紧
   （≈64→46px@1920）；激活项仍保留 18px（FR：描述展开时间距 18px）。 */
.wl-nav-mega__sub:not(.is-active) { gap: 0; }
.wl-nav-mega__cards {
  display: grid;
  grid-template-columns: repeat(2, clamp(311px, 21.61vw, 415px)); /* 特性010 轮次8 FR-039：单图宽 415@1920（取代 480）；415/1920≈21.61vw */
  gap: clamp(18px, 1.25vw, 24px);  /* 两图间距 24 */
  align-self: center;
  justify-self: end;               /* 靠右；最右图距遮层右 24（由 inner 右内边距） */
}
.wl-nav-mega__card {
  position: relative;   /* 第八轮 FR-087：「了解更多」按钮叠加定位基准 */
  min-width: 0;
}
.wl-nav-mega__media {
  display: block;
  border-radius: var(--wl-mega-media-radius); /* 第八轮 FR-086：16 */
  overflow: hidden;
  aspect-ratio: 415 / 290;          /* 特性010 轮次8 FR-039：右图 415×290@1920（取代 480×290） */
  width: 100%;
  text-decoration: none;
}
.wl-nav-mega__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .2s ease;
}
.wl-nav-mega__cards.is-swapping .wl-nav-mega__media img { opacity: .65; }
.wl-nav-mega__more {
  /* 第八轮 FR-087/089：叠加在配图左下角的半透明黑胶囊（左/下距图各 18px） */
  position: absolute;
  left: clamp(13px, 0.938vw, 18px);
  bottom: clamp(13px, 0.938vw, 18px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--wl-cta-pad-y) var(--wl-cta-pad-x);       /* 特性010：统一 7.5/12 内容自适应（移除固定 height） */
  border-radius: var(--wl-mega-cta-radius);   /* 32 */
  background: var(--wl-mega-cta-bg);           /* rgba(0,0,0,0.30) */
  -webkit-backdrop-filter: blur(3.85px);
  backdrop-filter: blur(3.85px);
  font-family: var(--wl-font);
  font-size: clamp(13px, 0.833vw, 16px);                             /* 16@1920，响应式 */
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  transition: opacity .2s ease, background-color .2s ease;
}
.wl-nav-mega__more:hover { opacity: .85; color: #fff; }
/* 第八轮①：右图「了解更多」改用统一 .wl-cta-arrow（默认隐藏）；悬停图片/卡片时该按钮淡入+右滑显示箭头（与其它栏 CTA 一致） */
.wl-nav-mega__card:hover .wl-nav-mega__more .wl-cta-arrow,
.wl-nav-mega__card:focus-within .wl-nav-mega__more .wl-cta-arrow {
  width: 16px;
  opacity: 1;
  transform: none;
  margin-left: 0;
}

/* Mega 弹层 · 移动端（<960px 全屏滚动，单列布局） */
@media (max-width: 959px) {
  .wl-nav-mega.is-open {
    z-index: 53;
  }
  .wl-nav-mega {
    position: fixed;
    top: var(--wl-header-h); /* 第八轮：随导航栏高度（FR-099） */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 53;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  body.wl-mega-open {
    overflow: hidden;
  }
  /* 特性010 轮次9 FR-045 / 轮次11 FR-053：移动端打开菜单(mega)时，导航栏整体加玻璃底、与菜单遮层同色（复用 --wl-mega-panel-bg + blur50）；关闭即恢复透明。
     ⚠️ 必须作用于 .wl-header（导航条、mega 的同级）而非 .wl-header-shell（mega 的祖先）——backdrop-filter 会使祖先成为 position:fixed mega 的包含块、致 mega 坍缩 0 高不可见（轮次9 回归，轮次11 修复）。 */
  body.wl-mega-open .wl-header {
    background: var(--wl-mega-panel-bg);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
  }
  .wl-nav-mega__panel {
    /* 第八轮：移动端复位为全屏，覆盖桌面 1640 居中浮层（var(--wl-mega-w) 最小 820 会溢出窄屏） */
    width: 100%;
    margin-inline: 0;
    border-radius: 0;
    min-height: 100%;
  }
  .wl-header-shell:has(.wl-header.is-at-top) .wl-nav-mega__close {
    border-bottom-color: rgba(255, 255, 255, .1);
    background: transparent;
    color: var(--wl-on-brand);
  }
  .wl-header-shell:has(.wl-header.is-at-top:has(.wl-nav-link[aria-expanded="true"])) .wl-nav-mega__close,
  .wl-header-shell:has(.wl-header.is-scrolled) .wl-nav-mega__close {
    border-bottom-color: var(--wl-line);
    background: transparent;
    color: var(--wl-on-brand);   /* 特性010 轮次9 FR-046③：移动端关闭 × 强制白（取代滚动态蓝 --wl-brand） */
  }
  .wl-header-shell:has(.wl-header.is-scrolled:not(:has(.wl-nav-link[aria-expanded="true"]))) .wl-nav-mega__close {
    color: var(--wl-on-brand);
    border-bottom-color: rgba(255, 255, 255, .1);
  }
  .wl-nav-mega__close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--wl-line);
    background: transparent;
    color: var(--wl-on-brand);   /* 特性010 轮次9 FR-046③：移动端关闭 × 默认白（取代 --wl-ink 蓝） */
    font-size: 28px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
  }
  .wl-nav-mega__inner {
    min-height: auto;
    padding-block: 16px 28px;
  }
  .wl-nav-mega__inner.wl-container {
    max-width: none;
    padding-inline: 20px;
  }
  .wl-nav-mega__view.is-active {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .wl-nav-mega__cards {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-self: start;   /* 特性010 轮次9 FR-046④：移动端预览图左对齐（覆盖桌面 justify-self:end 右对齐） */
  }
  .wl-nav-mega__card:nth-child(2) { display: none; }   /* 特性010 轮次9 FR-046④：移动端单图——仅显第 1 张预览卡 */
  .wl-nav-mega__media {
    max-height: none;
    aspect-ratio: 16 / 10;
  }
  .wl-nav-mega__sub {
    --wl-mega-dot-gap: 16px;
  }
  .wl-nav-mega__sub-row {
    min-height: 36px; /* 18px × lh 200% */
  }
  .wl-nav-mega__sub-label {
    font-size: 18px;
    line-height: 2;
    color: var(--wl-on-brand);   /* 特性010 轮次9 FR-046②：移动菜单文字默认白（取代灰 --wl-on-brand-50） */
  }
  .wl-nav-mega__sub-desc {
    font-size: 10px;
    line-height: 1.5;
    color: var(--wl-on-brand);
    max-width: none;
    max-height: none;   /* 特性010 轮次9 FR-046①：移动端描述常显（覆盖桌面「仅 .is-active 才展开」的 max-height:0/opacity:0） */
    opacity: 1;
  }
}

/* 汉堡按钮 */
.wl-burger { display: none; width: 44px; height: 44px; border: none; background: none; position: relative; cursor: pointer; }
.wl-burger span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: var(--wl-on-brand);
  border-radius: 2px;
  transition: transform .25s, opacity .2s, top .25s, background .2s;
}
.wl-header.is-at-top .wl-burger span,
.wl-header.is-scrolled .wl-burger span { background: var(--wl-on-brand); }
/* 特性010 诉求四③：去 is-active 依赖，burger 仅在 hover→展开(aria-expanded) 时变色 */
.wl-header.is-scrolled:has(.wl-nav-link[aria-expanded="true"]) .wl-burger span,
.wl-header.is-at-top:has(.wl-nav-link[aria-expanded="true"]) .wl-burger span {
  background: var(--wl-brand);
}
.wl-burger span:nth-child(1) { top: 16px; }
.wl-burger span:nth-child(2) { top: 22px; }
.wl-burger span:nth-child(3) { top: 28px; }
.wl-burger.is-open span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.wl-burger.is-open span:nth-child(2) { opacity: 0; }
.wl-burger.is-open span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* 移动端菜单面板 */
.wl-mobile-menu {
  position: fixed;
  inset: var(--wl-header-h) 0 0 0; /* 第八轮：随导航栏高度（FR-099） */
  z-index: 49;
  background: #fff;
  /* 安全区：横屏刘海/底部 Home 条不遮挡内容 */
  padding: 8px max(20px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  transform: translateX(100%);
  transition: transform .3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.wl-mobile-menu.is-open { transform: none; }
.wl-mobile-menu__group { display: flex; flex-direction: column; }
.wl-mobile-menu__link {
  display: block;
  width: 100%;
  padding: 14px 4px;
  font-size: 18px;
  font-weight: 400;
  font-family: inherit;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--wl-line);
  background: transparent;
  color: var(--wl-ink);
  text-decoration: none;
  cursor: pointer;
}
.wl-mobile-menu__link.is-active {
  color: var(--wl-brand);
  font-weight: 600;
}
/* 父项：标题 + 折叠箭头，点击就地展开子栏目 */
.wl-mobile-menu__parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wl-mobile-menu__parent-label { flex: 1 1 auto; }
.wl-mobile-menu__chev {
  flex: none;
  color: var(--wl-ink-50);
  transition: transform .25s ease, color .2s ease;
}
.wl-mobile-menu__parent[aria-expanded="true"] { color: var(--wl-brand); font-weight: 600; }
.wl-mobile-menu__parent[aria-expanded="true"] .wl-mobile-menu__chev { transform: rotate(180deg); color: var(--wl-brand); }
/* 子栏目列表：max-height 过渡展开（实际值由 JS 按内容高度写入） */
.wl-mobile-menu__sub {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, .02);
  transition: max-height .28s ease;
}
.wl-mobile-menu__sub > li { list-style: none; }
.wl-mobile-menu__sublink {
  display: block;
  padding: 13px 4px 13px 20px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--wl-ink-80);
  text-decoration: none;
  border-bottom: 1px solid var(--wl-line);
}
.wl-mobile-menu__sublink.is-active { color: var(--wl-brand); font-weight: 600; }

@media (max-width: 959px) {
  .wl-header__nav, .wl-header__actions { display: none !important; }
  .wl-burger { display: inline-block; }
  /* 打开抽屉时：导航条贴白底，与抽屉同色；汉堡 X 转品牌蓝以保可见
     （多一个 .wl-header 提升特异度，盖过 .wl-header.is-at-top/.is-scrolled .wl-burger span 的白色） */
  body.wl-menu-open .wl-header { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.wl-menu-open .wl-header .wl-burger span { background: var(--wl-brand); }
}
body.wl-menu-open { overflow: hidden; }
@media (min-width: 960px) {
  .wl-mobile-menu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-mobile-menu,
  .wl-mobile-menu__sub,
  .wl-mobile-menu__chev { transition: none; }
}

/* ---------- 弹窗 (Modal) ---------- */
.wl-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wl-modal.is-open { display: flex; }
.wl-modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 32, .5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.wl-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: var(--wl-radius-2xl);
  padding: 32px;
  box-shadow: var(--wl-shadow-card);
  animation: wl-modal-in .25s ease;
}
.wl-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--wl-radius-pill);
  background: var(--wl-bg);
  color: var(--wl-ink-80);
  font-size: 18px;
}
@keyframes wl-modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- FAQ 折叠 (Accordion) ---------- */
.wl-faq-item { border-top: 1px solid var(--wl-line); }
.wl-faq-item:last-child { border-bottom: 1px solid var(--wl-line); }
.wl-faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 24px 0;
  background: none;
  border: none;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--wl-ink);
  font-family: inherit;
}
.wl-faq-q__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.wl-faq-icon { flex: none; }
.wl-faq-a {
  display: grid;
  grid-template-rows: minmax(0, 0fr); /* 035 minmax 强制最小为 0：iOS Safari 等把 0fr 的 auto 最小值解析成 min-content 致折叠后内容仍全显，用 minmax(0,...) 跨浏览器收到 0 */
  transition: grid-template-rows .28s ease;
}
.wl-faq-item.is-open .wl-faq-a { grid-template-rows: minmax(0, 1fr); }
.wl-faq-a > div { overflow: hidden; }
.wl-faq-a p { margin: 0 0 24px; color: var(--wl-ink-80); font-size: 14px; line-height: var(--wl-leading-14); } /* 007 标称14 */
/* 第九轮 FR-073（取代 008 FR-021 的 58px）第8栏 FAQ 栏目标题距栏目顶 146px：由 items-center 改顶部锚定 + padding-top 覆盖 wl-screen--pad 顶距。
 * 特异性 (1,0,0) 覆盖 .items-center / .wl-screen--pad；146/1920=7.604vw，钳制约 75%。⚠️ 改顶部锚定后两列版式运行时核对（research R13）。 */
#faq { align-items: flex-start; padding-top: clamp(110px, 7.604vw, 146px); }

/* =====================================================================
 * 首屏 Hero 轮播（自动滚动 Banner + Figma Group 72 切换指示器）
 * ===================================================================== */
/* 背景轮播层：两层叠放 crossfade，随帧切换底图（“滚动图”效果） */
.wl-hero-bgs { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.wl-hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;              /* 特性010 轮次4 FR-031：等比铺满、不变形（撤销轮次3 100% 100% 拉伸） */
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  filter: none;
  opacity: 0;
  transition: opacity .8s ease;
}
.wl-hero-bg-layer.is-active { opacity: 1; }
/* 特性010 轮次10 FR-048（反转 FR-041 移动 cover）：移动端(<960) Hero 背景图拉伸填满固定比例框——整图完整显示、各帧框高一致；用户明示接受变形（记录性偏离宪法 III，类诉求七）。桌面(≥960，100dvh) 仍 cover。 */
@media (max-width: 959px) { .wl-hero-bg-layer { background-size: 100% 100%; } }
@media (prefers-reduced-motion: reduce) { .wl-hero-bg-layer { transition: none; } }

/* 文案多帧：激活帧占据文档流（决定高度），其余绝对定位叠放并淡出 */
.wl-hero-copies { position: relative; min-height: clamp(160px, 12.083vw, 232px); }
.wl-hero-copy {
  transition: opacity .7s ease, transform .7s ease;
}
.wl-hero-copy:not(.is-active) {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}
.wl-hero-copy.is-active { position: relative; z-index: 2; opacity: 1; transform: none; }
.wl-hero-copy:not(.is-active) { z-index: 1; }

/* Hero 文字颜色变体（FR-004/005）：通过 CMS 颜色标记驱动
   白色 / 黑色 / 品牌蓝 / 渐变金（由亮金向深金过渡） */
.wl-hero-text--white { color: #FFFFFF; }
.wl-hero-text--black { color: #000000; }
.wl-hero-text--blue  { color: var(--wl-brand); }
.wl-hero-text--gold {
  background: var(--wl-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero 元素精确定位（FR-009–013 · Figma@1920 基准）
   桌面端精确尺寸；移动端通过视口单位等比缩放 */
.wl-hero-title-pos {
  width: clamp(260px, 20.83vw, 400px);   /* 特性010 轮次12 FR-054：标题宽 400@1920（上限 380→400；400/1920≈20.83vw；值迭代 360→380→400） */
  height: auto;
  min-height: clamp(38px, 2.76vw, 53px);
  word-break: keep-all;        /* 008 C9 第1栏标题仅在空格/词边界换行（覆盖全局 word-break:break-word），保单词与「益生菌」整词不拆 */
  overflow-wrap: anywhere;     /* 008 C9 无空格超长串兜底断行防溢出 */
}
.wl-hero-subtitle-pos {
  width: clamp(260px, 18.75vw, 360px);
  height: auto;
  min-height: clamp(38px, 2.76vw, 53px);
}
.wl-hero-body-pos {
  width: clamp(280px, 19.53vw, 375px);
  height: auto;
  min-height: clamp(52px, 3.8vw, 73px);
}
.wl-hero-btn-pos {
  border-radius: var(--wl-radius-pill);               /* 特性010 轮次3 FR-022：固定 32px→胶囊半径，圆角占比不随分辨率失衡（亦修宪法 IV 固定 px） */
  padding: var(--wl-cta-pad-y) var(--wl-cta-pad-x);   /* 特性010：内容自适应 + 7.5/12（移除固定 min-width/height） */
}
.wl-hero-btn-text {
  width: auto;                                        /* 特性010 轮次3 FR-022：取消固定盒，文字内容撑开按钮（贴合诉求二 FR-007 内容自适应） */
  height: auto;
  display: inline-flex;
  align-items: center;
}

/* 右侧主图：同样叠放 crossfade，统一高度盒避免跳动 */
/* 特性 005 FR-002：右侧轮播主图改由视口宽度驱动（--wl-hero-img-w），
   随窗口宽度等比缩放、跟随放大放小；object-fit:contain 保证整图不裁剪不变形；
   max-height:100% 使其约束在 aspect 驱动的区块高度内。 */
.wl-hero-imgs { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; max-height: 100%; }
.wl-hero-img {
  width: var(--wl-hero-img-w);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity .7s ease, transform .7s ease;
}
.wl-hero-img:not(.is-active) {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: scale(.96);
  pointer-events: none;
}
.wl-hero-img.is-active { position: relative; opacity: 1; transform: none; }
.wl-hero-img.is-empty { visibility: hidden; }
.wl-hero-img.is-empty.is-active { position: absolute; }
@media (max-width: 959px) {
  .wl-hero-imgs:has(.wl-hero-img.is-active.is-empty) {
    display: none;
    min-height: 0;
  }
  .wl-hero-carousel > .wl-container .grid { gap: 1.5rem; }
}

/* 指示器：激活=带进度填充的胶囊，未激活=圆点（比例对齐 Figma Group 72） */
.wl-hero-dots { display: inline-flex; align-items: center; gap: 5px; }
.wl-hero-dot {
  position: relative;
  width: 9px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: var(--wl-radius-pill);
  background: rgba(255, 255, 255, .35);
  overflow: hidden;
  transition: width .45s ease, background-color .3s ease;
}
.wl-hero-dot.is-active { width: 48px; }
.wl-hero-dot i {
  position: absolute;
  inset: 0;
  width: 0;
  border-radius: inherit;
  background: #fff;
}
/* 进度填充：由 CSS 动画驱动（动画结束即切帧、可暂停），时长由 JS 注入 --wl-hero-dur。
 * 不使用独立定时器，进度条与切帧时序天然同步，避免偶发卡顿/错位。 */
.wl-hero-dot.is-active i { width: 100%; animation: wl-hero-fill var(--wl-hero-dur, 5000ms) linear; }
[data-wl-hero].is-hero-paused .wl-hero-dot.is-active i { animation-play-state: paused; }
.wl-hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes wl-hero-fill { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .wl-hero-copy, .wl-hero-img { transition: none; }
  .wl-hero-dot.is-active i { animation: none; }
}

/* ---------- CTA 悬停箭头（hover 时右侧滑出 →，颜色随按钮文字 currentColor） ---------- */
.wl-cta-arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;               /* 固定宽按钮内不被 flex 压缩回 0（与 min-width 配合显示箭头） */
  width: 0;
  margin-left: -6px;            /* 抵消按钮 gap，未悬停时不占位 */
  opacity: 0;
  overflow: hidden;
  transform: translateX(-4px);
  color: currentColor;
  transition: width .25s ease, opacity .2s ease, transform .25s ease, margin-left .25s ease;
}
.wl-btn:hover .wl-cta-arrow,
.wl-btn:focus .wl-cta-arrow,
.wl-btn:focus-visible .wl-cta-arrow,
a:hover > .wl-cta-arrow,
a:focus > .wl-cta-arrow,
a:focus-visible > .wl-cta-arrow,
.wl-strain-tab:hover .wl-cta-arrow { width: 16px; opacity: 1; transform: none; margin-left: 0; }
@media (prefers-reduced-motion: reduce) {
  .wl-cta-arrow { transition: none; }
}

/* ---------- 产品卡：悬停膨胀（配合连续滚动跑道） ----------
 * 跑道外层 overflow-hidden 会裁切，故 track 预留上下内边距留出膨胀空间。 */
[data-wl-loop-track] .wl-card-glass { position: relative; transition: transform .35s ease, box-shadow .35s ease; will-change: transform; }
[data-wl-loop-track] .wl-card-glass:hover {
  transform: scale(1.05);
  box-shadow: 0 16px 40px rgba(0, 0, 32, .26);
  border-color: rgba(255, 255, 255, .5);
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  [data-wl-loop-track] .wl-card-glass { transition: none; }
  [data-wl-loop-track] .wl-card-glass:hover { transform: none; }
}

/* 跑道内容不足以占满可视宽度时：不滚动，居中静止呈现（由 JS 切换 wl-loop--static） */
.wl-loop--static [data-wl-loop-track] {
  width: 100%;
  justify-content: center;
  transform: none !important;
}

/* ---------- 第2栏产品中心：离散分页（特性 006，替代 marquee） ----------
 * 整页 translateX 平移 + 横向滑动过渡（FR-006a）；末页不足整页左对齐留白（FR-006b）。 */
[data-wl-pager] { position: relative; }
/* 008 C11 第2栏标题↔卡片"可见顶"间距 42px。卡片轨道有 py-8(32px 上留白，hover 放大用)，
 * 故标题↔卡片可见顶 = 本 margin-top + 32px。取 10px 使可见间距 = 10+32 = 42px(1920 基准)。 */
#products [data-wl-pager] { margin-top: clamp(5px, 0.52vw, 10px); }
[data-wl-pager-track] {
  display: flex;
  justify-content: flex-start;        /* 末页左对齐留白 */
  gap: var(--wl-pcard-gap);           /* 卡片间距 24（FR-008） */
  width: max-content;
  will-change: transform;
  transition: transform .45s ease;    /* 横向滑动 */
}
@media (prefers-reduced-motion: reduce) {
  [data-wl-pager-track] { transition: none; }   /* 降级瞬切 */
}
/* 分页按钮（FR-004/003）：默认半透明白底；到头禁用置灰不可点 */
#products .wl-arrow-btn { background: var(--wl-glass-btn-bg); }
/* FR-004 修订：hover/选中背景仍为 50% 白（不变品牌蓝）；去除聚焦时蓝色边框（覆盖
   全局 .wl-arrow-btn:hover 的品牌蓝 bg/border 与 :focus 蓝描边），保留中性键盘聚焦可见性 */
#products .wl-arrow-btn:hover,
#products .wl-arrow-btn:focus-visible {
  background: var(--wl-glass-btn-bg);
  border-color: var(--wl-ink-30);
  color: var(--wl-ink-80);
  opacity: 1;
}
#products .wl-arrow-btn:focus-visible { outline: 2px solid var(--wl-ink-30); outline-offset: 2px; }
#products .wl-arrow-btn:disabled,
#products .wl-arrow-btn[aria-disabled="true"] {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
}
/* 第2栏分页按钮（1920 基准响应式）：容器 88×36、按钮 36×36 圆角24、gap16；图标 6×14 白细箭头 */
#products .wl-arrow-btn-group {
  width: clamp(66px, 4.583vw, 88px);
  height: clamp(27px, 1.875vw, 36px);
  gap: clamp(12px, 0.833vw, 16px);
}
#products .wl-arrow-btn {
  width: clamp(27px, 1.875vw, 36px);
  height: clamp(27px, 1.875vw, 36px);
  border-radius: clamp(18px, 1.25vw, 24px);
  padding: 0;
}
/* 选中/hover：50% 白底 + 圆角24（与 --wl-glass-btn-bg 一致，显式对齐设计规格） */
#products .wl-arrow-btn:hover,
#products .wl-arrow-btn:focus-visible {
  background: rgba(255, 255, 255, 0.50);
  border-radius: clamp(18px, 1.25vw, 24px);
}
#products .wl-arrow-btn svg {
  width: clamp(4.5px, 0.313vw, 6px);
  height: clamp(10.5px, 0.729vw, 14px);
  flex-shrink: 0;
}
#products .wl-arrow-btn svg path { stroke: #FFF; stroke-width: 1px; vector-effect: non-scaling-stroke; }

/* ===== 第2栏产品卡片精确样式（特性 006）=====
 * 覆盖 004 的 flex 卡（仅 scope 到 .wl-card-glass--product）：改为绝对定位锚定
 * 「距卡片上/下边」的精确间距；hover 增高 530（负 margin 居中扩展，标题间距 42→17）。
 * 全部 1920 基准 px → clamp() 响应式（最小端点约 75%，实现期可调，≤2 位小数）。 */
.wl-card-glass.wl-card-glass--product {
  display: block;
  position: relative;
  flex: 0 0 auto;                                       /* 不收缩，宽度由每页填充计算（见下，FR-001/SC-008） */
  width: var(--wl-pcard-w);                             /* 兜底（无分页轨道时）；轨道内由 fill 覆盖 */
  height: var(--wl-pcard-h);
  padding: 0;
  gap: 0;
  border-radius: 12px;                                  /* FR-007 */
  -webkit-backdrop-filter: blur(var(--wl-glass-blur));  /* 11px FR-007 */
  backdrop-filter: blur(var(--wl-glass-blur));
  overflow: hidden;
  transition: height .3s ease, margin-top .3s ease;
}
/* 每页恰好填充：桌面(≥960) 4 张、移动(<960) 1 张占满每页视宽，多余卡片溢出由容器 overflow 裁剪
   （修复「目前全部都显示」，SC-008）。卡片宽 = (页宽 − (每页数−1)×间距) / 每页数。 */
@media (min-width: 960px) {
  [data-wl-pager-track] .wl-card-glass--product {
    width: calc((100% - 3 * var(--wl-pcard-gap)) / 4);  /* 1920 下 ≈322 */
  }
}
@media (max-width: 959px) {
  /* 特性010 轮次10 FR-050①：移动端每屏 1 张占满（反转轮次9 的 2 张） */
  [data-wl-pager-track] .wl-card-glass--product { width: 100%; }
}
/* 顶部组：标题 + 标签（距顶 32；标题↔标签 32，标题换行 16 由 JS 加 .is-title-wrap） */
.wl-card-glass--product .wl-pcard-head {
  position: absolute;
  top: clamp(24px, 1.67vw, 32px);
  left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 1.67vw, 32px);
  padding-inline: clamp(12px, 1.25vw, 24px);
}
.wl-card-glass--product.is-title-wrap .wl-pcard-head { gap: clamp(8px, 0.83vw, 16px); }  /* FR-010 换行 16 */
.wl-card-glass--product .wl-title {
  width: auto; max-width: 100%;
  font-size: clamp(22.5px, 1.56vw, 30px);  /* 卡片标题 1920 基准 30px（用户反馈） */
  line-height: var(--wl-leading-30);        /* 007 标称30→38；2 行 ≈76 与 max-height 一致 */
  max-height: clamp(57px, 3.96vw, 76px);   /* FR-009 标题最大高 76（=2 行×38） */
  min-height: 0; overflow: hidden;
}
/* 产品图：默认 102×160、距顶 180（FR-011） */
.wl-card-glass--product .wl-pcard-img,
.wl-card-glass--product img:not(.wl-tag img) {
  position: absolute;
  top: clamp(135px, 9.38vw, 180px);
  left: 50%; transform: translateX(-50%);
  width: clamp(76.5px, 5.31vw, 102px);
  height: clamp(120px, 8.33vw, 160px);
  object-fit: contain;
  transition: top .3s ease, width .3s ease, height .3s ease;
}
/* 描述：距底 77（FR-012），hover 淡出 */
.wl-card-glass--product .wl-pcard-desc {
  position: absolute;
  bottom: clamp(57.75px, 4.01vw, 77px);
  left: 0; right: 0; width: auto; height: auto;
  padding-inline: clamp(12px, 1.25vw, 24px);
  transition: opacity .3s ease;
}
/* 按钮：距底 27、居中（宽 88=左右各 117）（FR-012） */
.wl-card-glass--product .wl-pcard-btn {
  position: absolute;
  bottom: clamp(20px, 1.41vw, 27px);
  left: 50%; transform: translateX(-50%);
  transition: bottom .3s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
/* hover / 键盘 focus-within：增高居中扩展 + 图片放大 + 标题上移 + 描述淡出 + 按钮下移（FR-013~017） */
@media (hover: hover) {
  .wl-card-glass--product:hover,
  .wl-card-glass--product:focus-within {
    height: var(--wl-pcard-h-hover);                                   /* 530 */
    margin-top: calc((var(--wl-pcard-h-hover) - var(--wl-pcard-h)) / -2);  /* 上移半个增量 → 标题间距 42→17 (FR-014) */
  }
  .wl-card-glass--product:hover .wl-pcard-head,
  .wl-card-glass--product:focus-within .wl-pcard-head { top: clamp(19.5px, 1.35vw, 26px); }   /* FR-016 */
  .wl-card-glass--product:hover .wl-pcard-img,
  .wl-card-glass--product:focus-within .wl-pcard-img,
  .wl-card-glass--product:hover img:not(.wl-tag img),
  .wl-card-glass--product:focus-within img:not(.wl-tag img) {
    top: clamp(136.5px, 9.48vw, 182px);
    width: clamp(96px, 6.67vw, 128px);
    height: clamp(150px, 10.42vw, 200px);                              /* FR-015 128×200 */
  }
  /* FR-017 修订：描述 hover 保持显示（移除原 opacity:0）。
     按钮：下移 + 卡片联动激活（白底蓝字，FR-017a）；宽度随文字内容扩展（width:auto，
     保留默认 min-width 88/height 36，取代固定 110）；高特异性覆盖 004 的
     .wl-card-glass .wl-btn-primary:hover 独立激活，使按钮仅随「卡片」聚焦而非自身。 */
  .wl-card-glass.wl-card-glass--product:hover .wl-pcard-btn,
  .wl-card-glass.wl-card-glass--product:focus-within .wl-pcard-btn {
    bottom: clamp(21.75px, 1.51vw, 29px);
    width: auto;                            /* 宽度随文字扩展 */
    background: var(--wl-surface);          /* 白底 */
    color: var(--wl-brand);                 /* 蓝字 */
    box-shadow: none;
  }
}
/* FR-017a 修订：去掉【了解更多】按钮自身的独立聚焦视觉（焦点描边由卡片 :focus-within 的
   激活态承载），按钮完全跟随卡片聚焦。 */
.wl-card-glass--product .wl-pcard-btn:focus-visible { outline: none; }

/* ===== 【了解更多】聚焦效果完全由「卡片」驱动（用户反馈修订）=====
 * 问题：① 箭头/变色仅在鼠标移到「按钮」上时触发（按钮自身效果未去除）；
 *       ② 鼠标移到「卡片」上时按钮不显示 hover 效果。
 * 修复：抑制按钮自身 hover/focus 的变色/阴影/箭头/描边；改由卡片 :hover/:focus-within 驱动。 */
/* ① 抑制按钮自身触发（覆盖 004 的 .wl-card-glass .wl-btn-primary:hover 与全局 .wl-btn:hover .wl-cta-arrow） */
.wl-card-glass--product .wl-pcard-btn:hover,
.wl-card-glass--product .wl-pcard-btn:focus,
.wl-card-glass--product .wl-pcard-btn:focus-visible {
  background: var(--wl-brand);   /* 维持默认蓝底白字 */
  color: #fff;
  box-shadow: none;
  outline: none;
}
.wl-card-glass--product .wl-pcard-btn:hover .wl-cta-arrow,
.wl-card-glass--product .wl-pcard-btn:focus .wl-cta-arrow,
.wl-card-glass--product .wl-pcard-btn:focus-visible .wl-cta-arrow { width: 0; opacity: 0; }
/* ② 卡片 hover/focus-within 驱动（更高特异性，覆盖①）：白底蓝字 + 箭头显示 + 宽度随文字 */
.wl-card-glass.wl-card-glass--product:hover .wl-pcard-btn,
.wl-card-glass.wl-card-glass--product:focus-within .wl-pcard-btn {
  background: var(--wl-surface);
  color: var(--wl-brand);
  box-shadow: none;
}
.wl-card-glass.wl-card-glass--product:hover .wl-pcard-btn .wl-cta-arrow,
.wl-card-glass.wl-card-glass--product:focus-within .wl-pcard-btn .wl-cta-arrow {
  width: 16px; opacity: 1; transform: none; margin-left: 0;
}
@media (prefers-reduced-motion: reduce) {
  .wl-card-glass--product,
  .wl-card-glass--product .wl-pcard-img,
  .wl-card-glass--product .wl-pcard-desc,
  .wl-card-glass--product .wl-pcard-btn { transition: none; }
}
/* 栏目标题/按钮定位（FR-019/020）：标题距栏目顶 140（顶对齐 + padding-top）。 */
#products.wl-screen { justify-content: flex-start; padding-top: clamp(105px, 7.29vw, 140px); }
/* 内容宽度＝1360 居中盒（非满屏）：第2栏为 100vw 满铺底图，但标题与卡片内容 MUST 限制在
   1360 宽并居中（1920 下两侧各 280 → 标题左缘 280，FR-019；4×322+3×24=1360，SC「整体内容 1360」）。
   表头(.wl-container) 与分页轨道(data-wl-pager) 共用同一 1360 盒以对齐；窄屏两侧留 20px 间距。 */
#products > .wl-container,
#products [data-wl-pager] {
  width: calc(100% - 40px);
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: 0;
}

/* ---------- 通用连续滚动跑道（JS 复制内容实现无缝循环） ---------- */
[data-wl-loop] { position: relative; }
[data-wl-loop-track] { will-change: transform; }

/* 研究院平台/中心：横向连续滚动 + 两侧模糊淡出 */
.wl-ri-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.wl-ri-marquee__track { display: flex; gap: clamp(33px, 2.292vw, 44px); width: max-content; padding-inline: clamp(18px, 1.25vw, 24px); }
.wl-ri-marquee .wl-ri-item { width: 230px; flex: none; }
@media (min-width: 960px) { .wl-ri-marquee .wl-ri-item { width: 265px; } }
/* 008 FR-017 滚动卡片↔中心视频间距 66px（覆盖模板 mt-12=48px）。66/1920=3.44vw，钳制约 50%。
 * ⚠️ 中心视频为绝对定位、底缘动态：此为名义值，MUST 运行时按视频实际底缘校准至 66px（research R10）。 */
#research .wl-ri-marquee { margin-top: clamp(29px, 3.02vw, 58px); }   /* 用户澄清 2026-06-16：卡片行上间距 58（图标↔视频区）；58/1920≈3.02vw */

/* =====================================================================
 * 微生态研究院（Figma：中央培养皿 + 环绕文字 + 底部图标行）
 * ===================================================================== */
.wl-ri { position: relative; }
/* 培养皿媒体：Figma@1920 643×637 换算 vw，盒内原比例（无遮罩、无 object-fit 裁切） */
.wl-ri__dish {
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  max-width: min(86vw, var(--wl-ri-dish-w));
  max-height: var(--wl-ri-dish-h);
}
video.wl-ri__dish {
  background: transparent;
}
/* 第3栏中央内容为视频时：Crop + 50% 半透明（FR-040）。
 * 注：原 difference 混合会把视频白底反相成灰色方块，已按澄清去除；视频白底直接融入白色页面。
 * 默认 opacity:0 隐藏，避免 <video autoplay> 首帧解码前的黑框在刷新时一闪（FR-040a）。 */
video.wl-ri__dish {
  width: var(--wl-ri-dish-w);
  height: var(--wl-ri-dish-h);
  object-fit: cover;            /* Scale: Crop */
  opacity: 0;                   /* FR-040a 默认隐藏，避免首帧黑框刷新一闪 */
  mix-blend-mode: difference;   /* FR-040: 视频为黑底，difference 把黑底→白（融入白色页面）、培养皿反相显示——即 Figma 的做法。需视频背后为纯白 */
  transition: opacity .35s ease;/* 就绪后淡入 */
  /* 已还原临时圆形裁切（clip-path）—— Figma 用 difference 混合处理黑底视频，无需裁切 */
}
video.wl-ri__dish.is-ready { opacity: 0.5; } /* Opacity 50%（FR-040），JS 在可播放后添加 */
.wl-ri__dish--share {
  display: block;
  margin: 0 auto;
  max-width: min(86vw, var(--wl-ri-dish-w));
  max-height: var(--wl-ri-dish-h);
  overflow: hidden;
  opacity: 0;                    /* 008 C5：SHARE/iframe 路径同样默认隐藏，避免嵌入播放器黑底闪现 */
  transition: opacity .35s ease; /* 就绪后淡入 */
}
.wl-ri__dish--share.is-ready { opacity: 1; } /* 008 C5：JS 在 iframe 就绪后添加 */
.wl-ri__dish--share iframe {
  border: 0;
  max-width: 100%;
}
/* 研究院标题/副标：Figma 1920 = 40px（标题 Semibold / 副标 Light）。
 * 组标题"三大研发平台/四大联合研究中心"：Figma = 24px Demibold（此前 36px 偏大，已修正）。 */
.wl-ri__title { font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: 0; }
.wl-ri__subtitle { font-size: 24px; font-weight: 300; line-height: 1; letter-spacing: 0; margin-top: clamp(6px, 0.63vw, 12px); } /* 008 C1 主标题↔副标题间距 响应式（1920 基准 12px，钳制约 50%；取代 FR-033 的 32px） */
.wl-ri__group-title { font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: 0; color: var(--wl-ink-80); }
.wl-ri__group-desc { font-size: 14px; font-weight: 400; line-height: var(--wl-leading-14); letter-spacing: 0; color: var(--wl-ink-80); max-width: 340px; } /* 007 标称14 */
/* 008 C3 组标题↔描述间距 16px：覆盖模板里的 .mt-3(12px)，特异性 (0,2,0) > (0,1,0)（取代 FR-035/037 的 40px） */
.wl-ri .wl-ri__group-desc { margin-top: clamp(8px, 0.83vw, 16px); } /* 008 平台·中心标题↔描述间距 响应式（1920 基准 16px，钳制约 50%） */
@media (min-width: 960px) {
  .wl-ri__title { font-size: 30px; }
  .wl-ri__subtitle { font-size: 28px; }
  .wl-ri__group-title { font-size: 28px; }
}
@media (min-width: 1280px) {
  .wl-ri__title { font-size: 36px; }
  .wl-ri__subtitle { font-size: 34px; }
  .wl-ri__group-title { font-size: 32px; }
}
@media (min-width: 1920px) {
  .wl-ri__title { font-size: 40px; }
  .wl-ri__subtitle { font-size: 40px; }
  .wl-ri__group-title { font-size: 36px; }
}

/* 底部图标项：图标 + 标题(Demibold 24) + 副标(14) */
.wl-ri-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 1.458vw, 28px) clamp(18px, 1.25vw, 24px); }
.wl-ri-item { display: flex; flex-direction: column; gap: 0; cursor: pointer; } /* 027/FR-023 悬停光标手势；卡片：图标→机构标题 20、子标题固定距图标 132 */
.wl-ri-item__icon { width: clamp(35px, 2.431vw, 46.67px); height: clamp(37px, 2.577vw, 49.48px); margin-bottom: clamp(10px, 1.04vw, 20px); } /* FR-038 尺寸；图标↔机构标题=原始间距 20px（还原，1920 基准 1.04vw） */
.wl-ri-item__icon img { width: 100%; height: 100%; object-fit: contain; }
/* 标题占固定高 112（=132−图标间距20）：内容顶对齐、高度不随行数变化，故子标题始终落在距图标 132 处、各卡对齐 */
.wl-ri-item__title { min-height: clamp(56px, 5.83vw, 112px); font-size: 18px; font-weight: 600; line-height: var(--wl-leading-24); letter-spacing: 0; color: var(--wl-ink); word-break: keep-all; overflow-wrap: anywhere; } /* 007 标称24；008 C10 卡片标题仅在空格处换行（保「益生菌」/单词不拆）。特性010 轮次10 FR-047②：固定 height→min-height，长标题随内容增高、不溢出压描述 */
.wl-ri-item__sub { font-size: 14px; font-weight: 400; line-height: var(--wl-leading-14); letter-spacing: 0; color: var(--wl-ink-50); margin-top: clamp(8px, 0.83vw, 16px); } /* 007 标称14。特性010 轮次10 FR-047②：补标题↔描述上间距（取代 margin-top:0），长标题把描述往下推、不重叠 */
@media (min-width: 960px) {
  .wl-ri-item__title { font-size: 20px; }
}
@media (min-width: 1280px) {
  .wl-ri-item__title { font-size: 22px; }
}
@media (min-width: 1920px) {
  .wl-ri-item__title { font-size: 24px; }
}

/* 桌面：文字绝对定位环绕培养皿（≥1280 不堆叠，与工程断点 1280 对齐）。 */
@media (min-width: 1280px) {
  .wl-ri { min-height: var(--wl-ri-min-h); }
  .wl-ri__dish {
    position: absolute;
    top: clamp(172px, 13.44vw, 258px); /* 008 C12 ≥1280 视频距栏目顶 258px(1920基准,等比),取代垂直居中 */
    left: 50%;
    transform: translateX(-50%);        /* 008 C12 去掉 Y 居中,仅水平居中 */
    max-width: var(--wl-ri-dish-w);
    max-height: var(--wl-ri-dish-h);
    margin: 0;
  }
  /* 008 FR-016 第3栏内容容器 band 顶锚定（≥1280）：使 .wl-ri 顶 = 栏目(band)顶，
   * 令 platforms/centers 的 top 即「距栏目顶」，与视频(top:258)同 band 参考系。.wl-container
   * 仍保留 max-width:1392 居中（left:50%+translateX），故 platforms(right:0)/centers(left:0) 横向对齐不变。
   * ⚠️ 运行时校准（research R10）：① intro top 已设 clamp(99,6.88vw,132)（标题距栏目顶 132px）；
   *   ② centers top:608 需 .wl-ri 足够高（min-height 768），不足则上调 --wl-ri-min-h；③ <1280 沿用既有堆叠流式（移动堆叠，已锁定）。 */
  #research > .wl-container { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
  /* 008 FR-017 滚动卡片 band 顶锚定于「视频底缘 + 66px」= 视频top + 培养皿高 + 间距66（运行时按实际底缘校准） */
  #research > .wl-ri-marquee {
    position: absolute; left: 0; right: 0; margin-top: 0;
    top: calc(clamp(172px, 13.44vw, 258px) + var(--wl-ri-dish-h) + clamp(33px, 3.44vw, 66px));
  }
  .wl-ri__intro   { position: absolute; top: clamp(99px, 6.88vw, 132px); left: 0; max-width: 600px; text-align: left; } /* 标题距栏目顶 132px（band 参考系，6.88vw，钳制约 75%；取代原 top:0，副标题/按钮随块整体下移） */
  .wl-ri__platforms { position: absolute; top: clamp(247px, 17.14vw, 329px); right: 0; max-width: 300px; text-align: left; } /* 008 FR-016 三大平台标题距栏目顶 329px（band 参考系，17.14vw，钳制约 75%） */
  .wl-ri__centers { position: absolute; top: clamp(456px, 31.67vw, 608px); bottom: auto; left: 0; max-width: 300px; text-align: left; } /* 008 FR-016 四大研发中心标题距栏目顶 608px（31.67vw，钳制约 75%） */
  .wl-ri__group-desc { text-align: left; margin-inline: 0; }
}
/* 1280–1391：1280 大屏档内部的微调（非四档边界），略收紧培养皿与侧栏宽度，降低环绕布局挤压感 */
@media (min-width: 1280px) and (max-width: 1391px) {
  .wl-ri__intro { max-width: 520px; }
  .wl-ri__platforms,
  .wl-ri__centers { max-width: 280px; }
}
/* 中等宽度与桌面（≥960）均显示 7 列图标行（与绝对环绕断点解耦） */
@media (min-width: 960px) {
  .wl-ri-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .wl-ri-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* <1280：堆叠流式——培养皿居中、三段文字整体居中（平板/手机）。 */
@media (max-width: 1279px) {
  .wl-ri__intro, .wl-ri__platforms, .wl-ri__centers { max-width: 560px; margin-inline: auto; text-align: center; }
  .wl-ri__group-desc { margin-inline: auto; }
}
/* 特性010 轮次9 FR-043：仅 <960 真静态堆叠时给平台/中心段加上下间距（960–1279 为绝对定位、不加 margin 以免偏离 top 锚点）。
   调大「了解更多↔三大研发平台」「描述↔四大联合研究中心」纵向间距（图2 现贴太近）。 */
@media (max-width: 959px) {
  .wl-ri__platforms, .wl-ri__centers { margin-top: var(--wl-ri-stack-gap); }
}
/* ---------- 自研菌株：第2模糊层·磨砂玻璃面板（Figma@1920: 818×575 r=12 top=37 left=509）
   三列等分 · 左右文案垂直居中 · 虚线指向中图 */
.wl-strain-glass {
  position: absolute;                           /* 桌面：相对第一层面板定位·特性 009；特性010 轮次3 FR-024 改对称 inset */
  left: var(--wl-strain-glass-left);            /* 距第一层左 446（左侧留文案列，非对称） */
  top: var(--wl-strain-glass-gap);              /* 特性010 轮次3 FR-024：上=右=下 一致 gap；宽高由 inset 派生（取代固定 width/height + top:50%/translateY） */
  right: var(--wl-strain-glass-gap);
  bottom: var(--wl-strain-glass-gap);
  border-radius: var(--wl-radius-md);           /* 12px */
  background-color: rgba(228, 228, 228, 0.19);  /* 半透明底；无菌株图时仅此底（FR-014 不兜底图） */
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  overflow: hidden;
}
/* 第二层底图（特性 009 第二轮）：原图、居中、最大不超过模糊层宽高（不裁切、不放大超原图） */
.wl-strain-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.wl-strain-bg:not([src]) { display: none; }     /* 无图留空、不兜底 */
/* 三块文字：position:absolute 角锚点 + 每秒淡入淡出切换（inner copy 由 JS 切换）。
   块默认可见（渐进增强：无 JS/无 IO 仍可读首条，Constitution V）；数字递增在进视口时触发 */
.wl-strain-block {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--wl-strain-rule-gap);               /* 文字↔横线 10 */
}
.wl-strain-block__copy { min-width: 0; transition: opacity .35s ease; }   /* 切换淡入淡出 */
.wl-strain-block__l1 {
  margin: 0;
  font-family: "MiSans", var(--wl-font);
  font-size: var(--wl-strain-line1-size);       /* 第1行 28 */
  font-weight: 520;                             /* MiSans Semibold */
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: normal;                          /* 支持空格换行（FR-020） */
  overflow-wrap: break-word;
}
.wl-strain-block__l2 {
  margin: .35em 0 0;
  font-size: var(--wl-strain-line2-size);       /* 第2行 14 */
  font-weight: 400;
  line-height: var(--wl-leading-14);            /* 14→22 */
  letter-spacing: -0.02em;
  white-space: normal;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, .82);
}
.wl-strain-block__l1:empty,
.wl-strain-block__l2:empty { display: none; }   /* 字段缺该行不渲染、不兜底 */

/* 左上方块（标签）：距第二层左 42 / 上 148；横线在文字右侧、向右延伸 */
.wl-strain-block--tl {
  left: var(--wl-strain-tl-left);               /* 42 */
  top: var(--wl-strain-tl-top);                 /* 148 */
  max-width: calc(100% - var(--wl-strain-tl-left) - var(--wl-strain-rule-len));
}
/* 右下方块（关键词）·特性 009 第六轮：以横线为锚——块=横线本身（宽=横线长80），块右缘=横线右端锁右262/下266；
   内容绝对定位在横线右侧（+10gap）、与横线同排垂直居中（靠面板右下角） */
.wl-strain-block--bl {
  display: block;                               /* 覆盖基类 flex：块即横线 */
  right: var(--wl-strain-bl-rule-right);        /* 横线右端距右 262 */
  bottom: var(--wl-strain-bl-rule-bottom);      /* 横线距下 266 */
  width: var(--wl-strain-rule-len);             /* 块宽=横线长 80，故块右缘=横线右端 */
}
.wl-strain-block--bl .wl-strain-rule { width: 100%; }   /* 横线充满块(80) */
.wl-strain-block--bl .wl-strain-block__copy {
  position: absolute;
  left: calc(100% + var(--wl-strain-rule-gap));         /* 横线右端 + 间距10 */
  bottom: 0;
  transform: translateY(50%);                           /* 内容中心落在横线上（同排垂直居中） */
  width: max-content;
  max-width: calc(var(--wl-strain-bl-rule-right) - var(--wl-strain-rule-gap)); /* 不超过到右缘的空间(≈252) */
}
/* 右下角块（摘要）：右下角，距下 20；14，无横线 */
.wl-strain-block--br {
  display: block;                               /* 单块文本（无横线），覆盖基类 flex 以使右对齐生效 */
  right: var(--wl-strain-tl-left);              /* 距右 42（与左上对称内缩） */
  bottom: var(--wl-strain-br-bottom);           /* 20 */
  max-width: 45%;
  font-size: var(--wl-strain-line2-size);       /* 14 */
  line-height: var(--wl-leading-14);            /* 14→22 */
  font-weight: 400;
  letter-spacing: -0.02em;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: right;
  color: rgba(255, 255, 255, .82);
}

/* 横线（特性 009 · FR-013a）：文字右侧、同排、向右延伸；长 80、文字↔线 10（虚线 2,2 沿用 FR-051） */
.wl-strain-rule {
  display: block;                               /* span 默认 inline 会忽略宽高；关键词块 display:block 下须显式 block 才可见（修复「横线不见」） */
  flex: none;
  width: var(--wl-strain-rule-len);             /* 80 */
  height: 1px;
  background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.85) 0 2px, transparent 2px 4px);
}

/* 数字递增（FR-027）：复用 .wl-strain-stat-num 作计数目标，尺寸随所在行（不放大），不改既有递增逻辑 */
.wl-strain-stat-num { font-size: inherit; }

/* 移动端（<960）：第二层与三块回退文档流纵向堆叠，不绝对定位、不重叠 */
@media (max-width: 959px) {
  .wl-strain-glass {
    position: static;
    transform: none;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: clamp(280px, 70vw, 420px);
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 24px;
  }
  .wl-strain-block {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    top: auto;
    max-width: 100%;
  }
  .wl-strain-block--bl { width: auto; }         /* 窄屏取消「块=横线80」固定宽 */
  .wl-strain-block--bl .wl-strain-block__copy { position: static; left: auto; bottom: auto; transform: none; width: auto; max-width: 100%; }
  .wl-strain-block--br { text-align: left; }
  .wl-strain-rule { display: none; }            /* 窄屏隐藏装饰横线 */
}

/* GOLDGUT 徽标（特性 009 第二轮：图片 Union.png 99×37 替代原文字徽标）；按原图高度等比响应式，宽自适应 */
.wl-strain-logo {
  display: block;
  height: clamp(26px, 1.93vw, 37px);        /* 原图高 37（37/1920≈1.93vw），等比缩放 */
  width: auto;
}
.wl-strain-logo.is-hidden { visibility: hidden; }   /* 全球菌株组隐藏 GOLDGUT，但保留布局占位（间距不变） */

/* 第一层左栏（特性 009 第十轮）：恢复原**垂直锚点**（GOLDGUT 距上 38、描述距层顶 440），
   内容改为**水平居中**（取消左缩 54，GOLDGUT/标题/芯片/描述/按钮在左栏宽内左右居中）；移动端回流纵向堆叠 */
.wl-strain-left { position: static; }
.wl-strain-head .wl-strain-tabs { margin-top: var(--wl-strain-tab-gap-1); }   /* GOLDGUT→自研标题 22 */
.wl-strain-head .wl-strain-chips { margin-top: clamp(12px, 1.46vw, 28px); }   /* 标题→芯片 ≈28 */
.wl-strain-foot .wl-type-strain-desc { padding: 0; text-align: center; }      /* 描述水平居中 */
.wl-strain-foot .wl-btn { margin-top: var(--wl-strain-more-gap); }            /* 描述→了解更多 36 */
@media (min-width: 960px) {
  .wl-strain-left {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--wl-strain-glass-left);        /* 占第二层左侧区域（446 宽） */
    padding-top: var(--wl-strain-logo-top);    /* 特性010 轮次12 FR-055：head 从顶 38 起（取代 head 自身 top 锚点）；head/foot 改流式堆叠 */
  }
  .wl-strain-head {
    /* 特性010 轮次12 FR-055：去绝对定位 top 锚点、改流式堆叠（避免 head 内容过高时压住 foot/重叠，见图1） */
    display: flex; flex-direction: column; align-items: flex-start;
  }
  /* 第十一/十二轮：GOLDGUT + 自研/全球标题 靠左（距左 54、同左缘）。特性010 轮次4 FR-033：芯片也补 54 左缘，全列左对齐 */
  .wl-strain-head .wl-strain-logo,
  .wl-strain-head .wl-strain-tabs,
  .wl-strain-head .wl-strain-chips { align-self: flex-start; margin-left: var(--wl-strain-logo-left); }
  .wl-strain-foot {
    /* 特性010 轮次14 FR-058（部分撤销轮次12 FR-055）：描述恢复绝对定位、距模糊层顶固定 438；
       依赖轮次13 FR-057 标题连续缩放使 head 在 438 内不溢出（设计数据下不重叠）；按钮在 foot 内紧跟描述 */
    position: absolute;
    left: 0; right: 0;
    top: var(--wl-strain-desc-top);            /* 描述距层顶固定 438 */
    display: flex; flex-direction: column; align-items: flex-start;   /* 特性010 轮次4 FR-033：整列左对齐 */
  }
  /* 第十九轮（特性009）：「了解更多」按钮靠左、同 54 左缘。特性010 轮次4 FR-033：描述也靠左、同 54 左缘、文本左对齐 */
  .wl-strain-foot .wl-btn,
  .wl-strain-foot .wl-type-strain-desc { align-self: flex-start; margin-left: var(--wl-strain-logo-left); }
  .wl-strain-foot .wl-type-strain-desc { text-align: left; }
}
/* 特性010 轮次10 FR-051：移动端(<960) 菌株左栏左对齐 + 右图随第二模糊层等比缩放（取代基态居中、取代右图绝对定位逃出 static glass） */
@media (max-width: 959px) {
  /* ① 「了解更多」按钮 + 描述文字左对齐（取代 L2330 的 text-align:center 及继承居中） */
  .wl-strain-head, .wl-strain-foot { align-items: flex-start; text-align: left; }
  .wl-strain-foot .wl-type-strain-desc { text-align: left; }
  .wl-strain-foot .wl-btn { align-self: flex-start; margin-left: 0; }
  /* 特性010 轮次12 FR-056：移动端菌株芯片（菌株按钮）左对齐——取代基态 justify-content/items:center + margin-inline:auto 居中，与左栏 logo/描述同左缘 */
  .wl-strain-chips { justify-content: flex-start; justify-items: start; margin-inline: 0; }
  /* ② 右图入第二模糊层(.wl-strain-glass, 移动 static flex)流内、随其宽高等比 contain（取代 position:absolute 相对 panel 居中、逃出 glass） */
  .wl-strain-bg { position: static; transform: none; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
}

/* 菌株 Banner 面板：第1模糊层（特性 009：1360×620，1920 基准、四档等比；去预览内边距，桌面以绝对锚点定位子元素） */
.wl-strain-panel {
  position: relative;
  max-width: var(--wl-strain-panel-w);      /* 1360 */
  min-height: var(--wl-strain-panel-h);     /* 620 */
  margin-inline: auto;
  background: rgba(0, 0, 0, 0.1);
  border-radius: var(--wl-radius-card);     /* 24px */
  border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px -34px rgba(0, 0, 40, .5);
}
/* 移动端（<960）：面板回流、加内边距，左栏与第二层纵向堆叠 */
@media (max-width: 959px) {
  .wl-strain-panel { min-height: 0; padding: 24px; }
  .wl-strain-foot { margin-top: 24px; }
}

/* ---------- 自研菌株：可点击切换标题（竖向堆叠，激活=白色）·特性 009 间距 22/16 ---------- */
.wl-strain-tabs { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wl-strain-tab-gap-2); }   /* 自研→全球标题 16；第十二轮：标题左对齐（与 GOLDGUT 绑定同左缘） */
.wl-strain-tab {
  display: inline-block;
  background: none;
  border: 0;
  padding: 2px 0;
  font-family: inherit;
  font-size: clamp(26px, 2.08vw, 40px);   /* 特性010 轮次13 FR-057：标题字号由断点步进(26/30/36/40)改连续 vw（40@1920，2.08vw=40/1920），与面板同基准缩放 → 标题↔第二模糊层间距比例跨分辨率恒定（消除 1470 等中宽下间距塌缩） */
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: left;
  color: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: color .25s ease;
}
.wl-strain-tab:hover { color: rgba(255, 255, 255, .7); }
.wl-strain-tab.is-active { color: #fff; }

/* ---------- 工具 (Utilities) ---------- */
.wl-eyebrow {
  display: inline-block;
  height: 4px;
  width: 120px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--wl-brand), rgba(0, 0, 225, 0));
}
/* ---------- 用户评价滚动卡片（图片卡 + 评价文本卡交替） ---------- */
.wl-review-img-card {
  width: clamp(120px, 9.635vw, 185px);   /* FR-068 设计稿 185×278，按 1920 基准响应式（宽高同 vw 保比例） */
  height: clamp(180px, 14.479vw, 278px);
  flex: none;
  cursor: pointer; /* 027/FR-023 悬停光标手势 */
  overflow: hidden;
  border-radius: 12px;
  background: var(--wl-surface);
  box-shadow: var(--wl-shadow-soft);
}
.wl-review-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wl-review-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0,0,225,0.06), rgba(0,0,225,0.12));
}
.wl-review-text-card {
  width: clamp(156px, 12.5vw, 240px);    /* FR-069 设计稿 240×278，按 1920 基准响应式（宽高同 vw 保比例） */
  height: clamp(180px, 14.479vw, 278px);
  flex: none;
  cursor: pointer; /* 027/FR-023 悬停光标手势 */
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(175, 175, 175, 0.16) 0%, rgba(73, 73, 73, 0.16) 100%);
  box-shadow: var(--wl-shadow-soft);
  /* 008 FR-020 评价内容↔卡顶 86px / 用户信息↔卡底 50px（覆盖原上下 28px）；左右维持 24px。
   * 86/1920=4.48vw、50/1920=2.60vw，钳制约 50%。space-between：评价内容贴顶、用户信息贴底。
   * ⚠️ 卡片固定 240×278px：MUST 运行时核对内容不溢出/裁切（research R12）。 */
  padding: clamp(43px, 4.48vw, 86px) clamp(12px, 1.25vw, 24px) clamp(25px, 2.60vw, 50px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(8px, 0.625vw, 12px);
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.wl-review-quote {
  font-family: var(--wl-font);
  font-weight: 600;
  font-size: 14px;       /* 第十轮 FR-070：评价内容 24→14px 固定（14px 可读下限，不随断点放大/缩小） */
  line-height: var(--wl-leading-14);
  letter-spacing: -0.07em;
  color: var(--wl-brand);
  margin: 0;
  text-align: center;
}
.wl-review-author {
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: var(--wl-ink-50);
  font-style: normal;
  text-align: center;
}
.wl-review-product {
  font-size: 12px;
  line-height: var(--wl-leading-12);   /* 007 标称12 */
  color: var(--wl-ink-30);
  margin: 0;
  text-align: center;
}
@media (min-width: 960px) {
  /* 卡片尺寸固定 185/240×278（FR-068/069 设计稿实测）；评价内容字号第十轮起固定 14px（不再升档），仅用户名随断点增大 */
  .wl-review-author { font-size: 14px; }
}
@media (min-width: 1280px) {
  .wl-review-author { font-size: 15px; }
}
@media (min-width: 1920px) {
  .wl-review-author { font-size: 16px; }
}
.wl-type-news-title {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
#clinical .wl-card-lg .p-6 {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  padding-top: clamp(7px, 0.73vw, 14px); /* 008 FR-006(重写) 机构↔图片 14px：覆盖 .p-6 顶内边距(24px)，钳制约 50% */
  padding-left: 0; padding-right: 0; /* 第二十轮（特性004/第5栏 #clinical）：机构/标题左缘与图片左缘对齐、文字块宽=图片宽（移除 .p-6 左右 24 内边距；文字默认左对齐） */
}
#clinical .wl-type-card-org {
  color: #0000004D;
}
/* 008 FR-006(重写) 第5栏卡片「图片↔标题=58px」：以图片为基准纵向量至标题(跨机构)。
 * 名义 margin-top≈28px@1920 = 58 − 机构↔图片(14) − 机构高(≈16,lh1)；依机构字号(14/15/15/16)推导，
 * 运行时校准至图片↔标题=58px。覆盖模板 mt-2(8px)。原「机构↔标题 20px」口径已作废。 */
#clinical .wl-type-clinical-title { margin-top: clamp(14px, 1.46vw, 28px); }
/* FR-057 合作机构卡片图：6px 白色边框 + 12px 圆角（设计稿 band-05-clinical.png 确认白框；第七轮加圆角） */
#clinical .wl-card-lg > img { border: 6px solid #fff; border-radius: 12px; }
/* FR-066 第6栏右侧配图圆角 36px：用 border-radius 令牌覆盖 .rounded-2xl，
 * 选择器特异性 (0,1,1) 高于 .rounded-2xl (0,1,0)，无需改模板/重建 Tailwind 即生效 */
.wl-bg-news img { border-radius: var(--wl-radius-2xl); }
/* 008 C7 第6栏「科研动态」左列内容水平左对齐 + 在列内垂直居中（取代 FR-098 的左列靠顶对齐）。
 * 网格保持 align-items:start（右图维持靠顶、圆角/位置不变），仅左列 align-self:center 垂直居中。
 * 选择器 (0,2,0)/(0,2,?) 在 lg+(≥1280) 生效。 */
@media (min-width: 1280px) {
  .wl-bg-news .grid { align-items: start; }
  .wl-bg-news .grid > .wl-reveal:first-child { align-self: center; }
}
/* FR-057a 第5栏卡片容器无背景/无阴影（透明，显示栏目背景）；图片 6px 白框保留。
 * 选择器 (1,1,0) 高于 .bg-surface/.shadow-card (0,1,0)，免改模板即覆盖 */
#clinical .wl-card-lg { background: transparent; box-shadow: none; }
/* 008 FR-018 第5栏栏目标题距栏目顶 190px：由 items-center 改顶部锚定 + padding-top 覆盖 wl-screen--pad 顶距。
 * 特异性 (1,0,0) 覆盖 .items-center / .wl-screen--pad；190/1920=9.90vw，钳制约 75%（沿用 #products padding-top 先例）。
 * ⚠️ 改顶部锚定后整栏版式 MUST 运行时四档核对（research R11）。 */
#clinical { align-items: flex-start; padding-top: clamp(143px, 9.90vw, 190px); }
/* 008 FR-019 第7栏滚动卡片区↔栏目标题间距 58px（覆盖模板 mt-12=48px）。58/1920=3.02vw，钳制约 50%。 */
#reviews .wl-marquee { margin-top: clamp(29px, 3.02vw, 58px); }
.wl-marquee-track { display: flex; gap: 16px; width: max-content; animation: wl-marquee 36s linear infinite; } /* FR-072 评价图文卡间距 16px */
.wl-marquee:hover .wl-marquee-track { animation-play-state: paused; }
/* 内容不足以占满可视宽度时：停止滚动、居中静止（隐藏用于无缝循环的复制组） */
.wl-marquee--static .wl-marquee-track { animation: none; width: 100%; justify-content: center; }
.wl-marquee--static .wl-marquee-track > [aria-hidden="true"] { display: none; }
@keyframes wl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 进入视口动画 */
.wl-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.wl-reveal.is-in { opacity: 1; transform: none; }

/* FR-090 全局关键词整词不拆行：JS（initKeywordNowrap）将「益生菌」包裹为本类，确保三字一起换行 */
.wl-nowrap { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .wl-marquee-track { animation: none; }
  .wl-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
 * 子页面（特性 011）组件 — 公共样式 / 令牌承载 / .wl- 前缀 / 1920 基准四档响应式
 * 通用：占位 .wl-ph · 子页 Hero .wl-subhero · 区块标题 .wl-sec-head · 统计 .wl-stat
 * 科研：.wl-platform-* / .wl-org-* / .wl-clinical-*
 * 品质：.wl-feature-card / .wl-band-brand / .wl-supply-* / .wl-banner-photo / .wl-promise
 * 菌株库：.wl-strainlib-* / .wl-strain-card / .wl-microbe-card
 * 详情：.wl-chip-row / .wl-evidence-* / .wl-def-* / .wl-outcome-* / .wl-moa-* / .wl-limit-*
 * 缺失图片以占位块呈现（v2 替换为真实图 / CMS 动态数据）。
 * ===================================================================== */

/* ---------- 占位块（图片资源 v2 替换） ---------- */
.wl-ph {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 64px;
  background: linear-gradient(135deg, var(--wl-ph-from), var(--wl-ph-to));
  border-radius: var(--wl-radius-md);
  overflow: hidden;
}
.wl-ph--photo  { background: linear-gradient(135deg, #060633, #03031f 55%, #01010f); }
.wl-ph--gold   { background: var(--wl-gold-gradient); }
.wl-ph--circle { border-radius: var(--wl-radius-pill); aspect-ratio: 1 / 1; min-height: 0; }
.wl-ph--icon   { min-height: 0; }

/* ---------- 子页 Hero banner ---------- */
.wl-subhero {
  position: relative;
  width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); /* 满铺，复用首页 full-bleed */
  min-height: var(--wl-subhero-h);
  display: flex; align-items: center;
  overflow: hidden;
}
.wl-subhero--compact { min-height: var(--wl-subhero-h-compact); }
.wl-subhero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 16% 28%, rgba(255, 255, 255, .18), transparent 60%),
    radial-gradient(54% 72% at 84% 78%, rgba(0, 0, 90, .55), transparent 65%),
    linear-gradient(135deg, var(--wl-brand-600), var(--wl-brand-700));
}
.wl-subhero > .wl-container { position: relative; z-index: 1; }
.wl-subhero__copy {
  color: var(--wl-on-brand);
  padding-top: calc(var(--wl-header-h) + clamp(16px, 1.5vw, 28px));
  padding-bottom: clamp(16px, 1.5vw, 28px);
  max-width: 52rem;
}
.wl-subhero--compact .wl-subhero__copy { max-width: none; }
.wl-subhero__title    { color: var(--wl-on-brand); font-size: clamp(32px, 3.13vw, 60px); font-weight: 450; line-height: 1.37; } /* Figma 子页 Hero 标题 60px/450@1920 */
.wl-subpage--bs .wl-subhero__title { color: var(--wl-ink-50); } /* R7/FR-052 仅 brand-story banner「关于我们」改灰；其他子页 Hero 标题仍白 */
.wl-subhero__subtitle { color: var(--wl-on-brand); margin-top: clamp(8px, 0.83vw, 16px); }

/* 子页标题对齐 Figma：黑色由模板去除 text-brand 承载；字重 ~450（用 500），不改全局 .wl-h2/.wl-h3 以免影响首页（首页沿用 600） */
.wl-subpage :is(.wl-h2, .wl-h3),
.wl-subpage :is(.wl-h2, .wl-h3) :is(.font-semibold, .font-light) { font-weight: 500; }
.wl-subpage .wl-h2 { line-height: 1.3; } /* Figma 子页区块标题行高 52/40=1.3（基类 1.25 偏紧） */

/* ---------- 区块标题行（左标题 + 右「了解更多」） ---------- */
.wl-sec-head { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 960px) {
  .wl-sec-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
}
.wl-sec-head__title { margin: 0; }

/* 子页区块主体距标题间距 */
.wl-sec-body { margin-top: var(--wl-sec-gap); }
.wl-subpage .wl-sec-body { margin-top: clamp(28px, 2.71vw, 52px); } /* Figma 子页 标题↔主体 52@1920；单一来源（FAQ-2col 仍由下方 margin-top:0 覆盖） */

/* ---------- 数字统计 ---------- */
.wl-stat-grid { display: grid; gap: var(--wl-stat-grid-gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .wl-stat-grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .wl-stat-grid--5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 960px) { .wl-stat-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.wl-stat-grid + .wl-stat-grid { margin-top: var(--wl-stat-grid-gap); }
.wl-stat { padding-top: clamp(14px, 1.25vw, 24px); border-top: 1px solid var(--wl-line); }
.wl-stat__num {
  display: flex; align-items: baseline; gap: 4px;
  font-size: var(--wl-stat-num-size); font-weight: 600; line-height: 1;
  color: var(--wl-brand); letter-spacing: -0.02em; white-space: nowrap;
}
.wl-stat__unit { font-size: 0.33em; font-weight: 500; }
/* 科研「全维度科研成果」上排 5 栏大数字 100px@1920（Figma），单位 ~40px(0.4em) */
.wl-stat-grid--5 .wl-stat__num  { font-size: var(--wl-stat-num-size-lg); }
.wl-stat-grid--5 .wl-stat__unit { font-size: 0.4em; }
.wl-stat__label { margin-top: clamp(8px, 0.83vw, 16px); color: var(--wl-ink); font-size: clamp(14px, 1.25vw, 24px); line-height: var(--wl-leading-24); } /* Figma 统计标签 24px@1920 近黑 */
.wl-promise__stats .wl-stat__label { color: var(--wl-ink-50); } /* R7/FR-050 质量三指标标签改灰（数字 .wl-stat__num 不变；仅本区，不影响他页统计标签） */
/* Figma 子页统计单位：0.4em（24/60、40/100）+ 黑色半透（原继承品牌蓝为误）；上排5栏更深 0.76 */
.wl-subpage .wl-stat__unit { font-size: 0.4em; color: rgba(0, 0, 0, .7); }
.wl-subpage .wl-stat-grid--5 .wl-stat__unit { color: rgba(0, 0, 0, .76); }
/* Figma 上排5栏：标签在上、数字在下（下排4栏仍数字在上） */
.wl-subpage .wl-stat-grid--5 .wl-stat { display: flex; flex-direction: column-reverse; }
.wl-subpage .wl-stat-grid--5 .wl-stat__label { margin-top: 0; margin-bottom: clamp(8px, 0.83vw, 16px); }
/* 017 全维度科研成果改版（Figma 1723-305）：4 栏，数字 50px@1920(Medium) + 数字下满宽分隔线 + 标签；仅作用本模块 */
.wl-subpage .wl-stat-grid--4 { gap: clamp(16px, 1.25vw, 24px); }   /* Figma 列间距 24@1920（列宽 322），覆盖共享 32 令牌 */
.wl-subpage .wl-stat-grid--4 .wl-stat__num { font-size: var(--wl-stat-num-size-md); font-weight: 500; align-items: flex-end; gap: clamp(4px, 0.42vw, 8px); }
.wl-subpage .wl-stat-grid--4 .wl-stat__unit { font-size: 0.48em; }
.wl-subpage .wl-stat-grid--4 .wl-stat__rule { display: block; width: 100%; height: 0; margin-top: clamp(10px, 0.94vw, 18px); border-top: 1px solid var(--wl-ink); }   /* Figma 分隔线纯黑 #000（--wl-ink） */
.wl-subpage .wl-stat-grid--4 .wl-stat__label { margin-top: clamp(8px, 0.73vw, 14px); color: rgba(19, 0, 0, .5); } /* 027/FR-011 全维成果横线下文字色 rgba(19,0,0,0.5) */

/* ===================== 科研创新页 ===================== */
/* 三大研发平台大图卡 */
.wl-platform-card {
  position: relative; overflow: hidden;
  border-radius: var(--wl-radius-2xl);
  min-height: clamp(280px, 23vw, 440px);
  color: var(--wl-on-brand);
  display: flex;
}
.wl-platform-card__bg { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; } /* 三大平台背景图撑满：拉伸填满整块（可变形）、不裁剪、不留白 */
.wl-platform-card__inner {
  position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: 1fr; gap: clamp(24px, 2.5vw, 40px);
  padding: clamp(28px, 3vw, 56px);
  align-content: center;
}
@media (min-width: 960px) { .wl-platform-card__inner { grid-template-columns: repeat(3, 1fr); } }
.wl-platform-item__icon { width: clamp(44px, 3vw, 56px); height: clamp(44px, 3vw, 56px); border-radius: var(--wl-radius-md); background-size: 100% 100%; background-repeat: no-repeat; } /* 027/FR-012 平台 logo 图撑满不裁剪不留白（原则 VIII） */
.wl-platform-item__title { margin-top: clamp(12px, 1vw, 20px); color: var(--wl-on-brand); font-size: clamp(18px, 1.25vw, 24px); } /* Figma 平台名 24px/450@1920（字重由 .wl-subpage .wl-h3=500 承载） */
.wl-platform-item__desc { margin-top: clamp(8px, 0.63vw, 12px); color: var(--wl-on-brand); font-size: 14px; line-height: var(--wl-leading-14); } /* Figma 平台描述全白 */
@media (min-width: 960px) {
  .wl-platform-item:not(:first-child) { border-left: 1px solid rgba(255, 255, 255, .18); padding-left: clamp(20px, 2vw, 40px); }
}

/* 四大联合研究中心卡片网格 */
.wl-card-grid { display: grid; gap: var(--wl-card-grid-gap); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .wl-card-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .wl-card-grid--4 { grid-template-columns: repeat(4, 1fr); } }
.wl-org-card { display: flex; flex-direction: column; }
.wl-org-card__media { width: 100%; aspect-ratio: 286 / 188; border-radius: var(--wl-radius-lg); }
.wl-org-card__title { margin-top: clamp(14px, 1.25vw, 24px); }
.wl-org-card__sub { margin-top: 6px; color: var(--wl-ink-50); }
.wl-org-card__desc { margin-top: clamp(10px, 0.83vw, 16px); color: rgba(0, 0, 0, .57); font-size: 14px; line-height: var(--wl-leading-14); } /* Figma 机构卡描述 rgba(0,0,0,0.57) */
.wl-org-card__more { margin-top: auto; padding-top: clamp(14px, 1.25vw, 24px); } /* 底对齐：长标题卡片的「了解更多」与同行其它卡对齐 */

/* 临床研究双栏 + 手风琴行 */
.wl-clinical { display: grid; gap: clamp(32px, 4vw, 64px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .wl-clinical { grid-template-columns: 1fr minmax(0, 644px); } } /* Figma：右图列 644（@1920） */
.wl-clinical__media { width: 100%; aspect-ratio: 588 / 520; border-radius: var(--wl-radius-2xl); }
.wl-clinical-q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.wl-clinical-q__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wl-brand); flex: none; }
.wl-clinical-q__org { margin-left: auto; color: var(--wl-ink); font-weight: 400; font-size: 16px; } /* Figma 机构名 16px / 黑（与研究标题字号对调） */
.wl-subpage .wl-clinical-q { font-size: 14px; }   /* Figma 临床研究标题 14px（基类 .wl-faq-q 16px） */
.wl-subpage .wl-org-card__more { font-size: 14px; } /* Figma 机构卡 CTA 14px（区块标题行 CTA 才 16px） */
.wl-clinical-abstract { color: var(--wl-ink-50); font-size: 14px; line-height: var(--wl-leading-14); }

/* ===================== 品质智造页 ===================== */
/* 全链路三图卡（图背景 + 底部玻璃标签） */
.wl-feature-grid { display: grid; gap: var(--wl-card-grid-gap); grid-template-columns: 1fr; }
.wl-feature-card {
  position: relative; overflow: hidden;
  border-radius: var(--wl-radius-xl);
  min-height: clamp(340px, 28vw, 520px);
  display: flex; align-items: flex-end;
  color: var(--wl-on-brand);
}
/* 桌面三列；卡片沿用基础 flex（min-height + align-items:flex-end）：图铺满、玻璃标签贴底。
   （此前 subgrid「1fr 图行 + auto 标签行」方案在容器无固定高时图行塌缩为 0，卡片仅剩标签高度，故改回 flex） */
@media (min-width: 960px) {
  .wl-feature-grid { grid-template-columns: repeat(3, 1fr); }
}
.wl-feature-card__bg { position: absolute; inset: 0; }
.wl-feature-card__label {
  position: relative; z-index: 1; width: 100%;
  margin: clamp(12px, 1vw, 20px);
  padding: clamp(16px, 1.5vw, 28px);
  border-radius: var(--wl-radius-md);
  background: var(--wl-glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .3);
}
.wl-feature-card__title { color: var(--wl-on-brand); }
.wl-feature-card__desc { margin-top: clamp(6px, 0.63vw, 12px); color: var(--wl-on-brand-50); font-size: 14px; line-height: var(--wl-leading-14); }
.wl-feature-card__label .wl-btn-underline { margin-top: clamp(12px, 1vw, 20px); color: var(--wl-on-brand); border-color: var(--wl-on-brand); }

/* 满宽蓝色带（全球供应链整合） */
.wl-band-brand {
  width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw);
  background: var(--wl-brand); color: var(--wl-on-brand);
  padding-block: clamp(56px, 7.55vw, 145px); overflow: hidden; /* Figma 蓝带带内上下留白 145@1920（原 104 偏小，致蓝带矮 ~80px） */
}
.wl-band-brand__title { color: var(--wl-on-brand); }
.wl-band-brand__sub { margin-top: clamp(8px, 0.83vw, 16px); color: var(--wl-on-brand); max-width: 48rem; } /* Figma 副标题为全白 #ffffff */

/* 品质·认证区双栏（Figma：左标题 + 右手风琴居右）；<960 堆叠 */
.wl-faq-2col { display: grid; gap: clamp(24px, 3vw, 64px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) {
  .wl-faq-2col { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }   /* 左标题 : 右手风琴 ≈ 2:3，右栏起点对齐 Figma x≈857 */
  .wl-faq-2col > [data-wl-faq] { margin-top: 0; }                          /* 去 .wl-sec-body 的 margin-top，右栏与左标题顶对齐 */
}
.wl-faq-2col .wl-faq-a p { white-space: pre-line; } /* 权威认证副标题保留后台文本域回车换行（\n→换行），行内空格仍正常折叠 */
.wl-subpage .wl-faq-2col .wl-faq-q { font-size: clamp(18px, 1.25vw, 24px); } /* Figma 认证问题标题 24px@1920（基类 16px；不影响科研临床手风琴，其不在 .wl-faq-2col 内） */
/* 蓝带 .wl-supply*（时间线节点 + 三列）已移除：Figma 蓝带仅含标题 + 副标题 */

/* 地球横幅占位 */
.wl-banner-photo { width: 100%; aspect-ratio: 1232 / 420; border-radius: var(--wl-radius-2xl); }

/* 质量承诺双栏（左统计 / 右产线图） */
.wl-promise { display: grid; gap: clamp(32px, 4vw, 64px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .wl-promise { grid-template-columns: 1fr 1fr; } }
.wl-promise__stats { display: flex; flex-direction: column; gap: clamp(63px, 4.95vw, 95px); margin-top: clamp(66px, 5.16vw, 99px); } /* 027/FR-015 标题↔指标 99@1920、指标间距 95@1920 */
.wl-promise__stats .wl-stat__rule { display: block; width: 100%; height: 0; margin-top: clamp(10px, 0.94vw, 18px); border-top: 1px solid var(--wl-ink); } /* 027/FR-014 数字下分隔线（纯黑 #000） */
.wl-promise__stats .wl-stat__label { margin-top: clamp(8px, 0.73vw, 14px); } /* 027/FR-014 线↔文本（保留 R7 灰色） */
.wl-promise__media { width: 100%; max-width: 762px; aspect-ratio: 762 / 660; border-radius: var(--wl-radius-2xl); } /* Figma 零容忍右侧产线图 762×660 */

/* 认证清单 */
.wl-cert-list { margin: 0 0 24px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wl-cert-list li { color: rgba(0, 0, 0, .5); font-size: 14px; line-height: var(--wl-leading-14); } /* Figma 认证清单：其余行 50% 黑 */
.wl-cert-list li:first-child { color: var(--wl-ink); }                                            /* Figma 首行纯黑 #000 */

/* ===================== 菌株库列表页 ===================== */
.wl-strainlib-panel {
  background: var(--wl-panel-bg); border-radius: var(--wl-radius-2xl);
  padding: var(--wl-panel-pad);
  display: grid; gap: clamp(24px, 3vw, 56px); grid-template-columns: 1fr;
}
@media (min-width: 960px) { .wl-strainlib-panel { grid-template-columns: minmax(0, 226px) 1fr; gap: clamp(24px, 5vw, 96px); } } /* Figma：侧栏文本列 226 + 列间距 96（@1920：首卡左缘 x=650、卡宽 298） */
.wl-strainlib-aside__title { margin: 0; }
.wl-strainlib-aside__logo { margin-top: clamp(16px, 1.5vw, 28px); height: clamp(26px, 1.98vw, 38px); width: auto; }
.wl-strainlib-aside__desc { margin-top: clamp(16px, 1.5vw, 28px); color: var(--wl-ink); font-size: 14px; line-height: var(--wl-leading-14); text-align: justify; } /* Figma 侧栏描述为黑 #000000 / 两端对齐 */
.wl-strainlib-aside__cta { margin-top: clamp(20px, 2vw, 36px); }
.wl-strain-grid { display: grid; gap: var(--wl-card-grid-gap); grid-template-columns: 1fr; justify-content: center; } /* 035 卡片随容器填充、上限 298（minmax 199–298），居中收尾余量；取代原 clamp(vw)定宽+space-between 致中屏卡钉死 199、大间距 */
@media (min-width: 640px)  { .wl-strain-grid { grid-template-columns: repeat(2, minmax(199px, 298px)); } }
@media (min-width: 960px)  { .wl-strain-grid { grid-template-columns: repeat(3, minmax(199px, 298px)); } } /* 三列断点 1280→960：中屏即三列填满，避免 2 列+大间距 */
.wl-strain-card, .wl-microbe-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border-radius: var(--wl-radius-md); padding: clamp(16px, 1.5vw, 24px) clamp(8px, 0.63vw, 12px); /* Figma 卡内边距 py24 / px12 */
  min-height: clamp(279px, 21.77vw, 418px); /* 027/FR-016 卡高 418@1920（宽 298 由列宽承载）；028 改 min-height：媒体 250 锁死(flex-shrink:0) 后卡随内容增高、四档不裁切不溢出 */
}
/* 自研菌株名为金色「渐变」文字（Figma grad(#f9cb99,#d7a963,#f9cb99)，非纯色） */
.wl-strain-card__name, .wl-strain-card__code {
  background: var(--wl-gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wl-strain-card__name { font-weight: 500; font-size: 16px; line-height: 1.4; } /* Figma 16px/520（用 500） */
.wl-strain-card__code { font-weight: 500; font-size: 16px; }
.wl-strain-card__media { width: clamp(167px, 13.02vw, 250px); aspect-ratio: 1 / 1; margin: clamp(12px, 1.25vw, 20px) 0; flex-shrink: 0; } /* 028/US2 flex-shrink:0 锁死 250×250 不被卡固定高弹性压缩；自研菌株图 250×250@1920 */
.wl-strain-card__more, .wl-microbe-card__more { margin-top: auto; padding-top: clamp(12px, 1vw, 16px); }
.wl-microbe-card__name { color: var(--wl-ink); font-weight: 600; font-size: clamp(14px, 1vw, 16px); line-height: 1.4; }
.wl-microbe-card__media { width: clamp(120px, 11vw, 176px); margin: clamp(16px, 1.5vw, 24px) auto; }
.wl-microbe-card__desc { color: rgba(0, 0, 0, .5); font-size: 12px; line-height: 1.33; } /* Figma 12px / rgba(0,0,0,0.5) / 行高 16/12=1.33 */

/* 列表卡「查看证据卡」文字链 */
.wl-card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--wl-ink-80); font-size: 14px; }
.wl-card-link:hover { color: var(--wl-brand); }
/* Figma 菌株卡 CTA「查看证据卡」：#000 / 字距 -0.15px / 文字下划线（箭头不带） */
.wl-subpage .wl-card-link { color: var(--wl-ink); letter-spacing: -0.15px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.wl-subpage .wl-card-link .wl-cta-arrow { text-decoration: none; }

/* ===================== 菌株库详情 / 证据卡页 ===================== */
.wl-chip-row { display: flex; gap: var(--wl-chip-row-gap); overflow-x: auto; padding-bottom: 8px; }
/* 详情页菌株 chip 横排：全屏出血横向滚动（轨道铺满视口、首/末 chip 对齐容器内容边）+ 隐藏滚动条 */
.wl-subpage--sd .wl-chip-row { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); scrollbar-width: none; -ms-overflow-style: none; }
.wl-subpage--sd .wl-chip-row::-webkit-scrollbar { display: none; }
.wl-subpage--sd .wl-chip-row { cursor: grab; } /* 鼠标可按住拖动滑动（JS drag-to-scroll） */
.wl-subpage--sd .wl-chip-row.is-dragging, .wl-subpage--sd .wl-chip-row.is-dragging .wl-sd-chip { cursor: grabbing; user-select: none; } /* 拖动中：抓取态 + 禁选中 */
.wl-chip-card {
  flex: 0 0 auto; width: clamp(220px, 22vw, 320px);
  display: flex; align-items: center; gap: 12px;
  padding: clamp(12px, 1vw, 18px);
  border-radius: var(--wl-radius-md);
  background: var(--wl-panel-bg); color: var(--wl-ink);
}
.wl-chip-card.is-active { background: var(--wl-gold-gradient); color: var(--wl-on-brand); }
.wl-chip-card__media { width: clamp(44px, 4vw, 56px); aspect-ratio: 1 / 1; flex: none; }
.wl-chip-card__name { font-weight: 600; font-size: 13px; line-height: 1.35; }
.wl-chip-card__desc { margin-top: 2px; font-size: 12px; color: var(--wl-ink-50); line-height: var(--wl-leading-12); }
.wl-chip-card.is-active .wl-chip-card__desc { color: var(--wl-on-brand-50); }

.wl-evidence-card { background: var(--wl-panel-bg); border-radius: var(--wl-radius-2xl); padding: var(--wl-panel-pad); }
.wl-evidence-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.wl-evidence-head__title { margin: 0; }
.wl-evidence-head__logo { height: clamp(28px, 2.5vw, 48px); width: auto; }
.wl-evidence-main { margin-top: clamp(24px, 2.5vw, 40px); display: grid; gap: clamp(24px, 2.5vw, 40px); grid-template-columns: 1fr; }
@media (min-width: 960px) { .wl-evidence-main { grid-template-columns: minmax(0, 420px) 1fr; } }
.wl-evidence-main__media { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--wl-radius-lg); }

/* 双语定义表 */
.wl-def-table { display: flex; flex-direction: column; }
.wl-def-row { display: grid; grid-template-columns: var(--wl-def-key-col) 1fr; gap: clamp(16px, 1.5vw, 32px); padding: clamp(12px, 1vw, 18px) 0; border-top: 1px solid var(--wl-line); }
.wl-def-row:last-child { border-bottom: 1px solid var(--wl-line); }
.wl-def-key__cn, .wl-def-key__en { display: block; font-weight: 600; color: var(--wl-ink); font-size: 14px; line-height: 20px; } /* Figma：CN 在上 + EN 在下，均黑 Demibold */
.wl-def-val { color: var(--wl-ink-80); font-size: 14px; line-height: var(--wl-leading-14); }
@media (max-width: 639px) { .wl-def-row { grid-template-columns: 1fr; gap: 6px; } }

/* 满宽证据区块（标签 + 内容两栏） */
.wl-evidence-block { margin-top: clamp(20px, 2vw, 32px); padding-top: clamp(20px, 2vw, 32px); border-top: 1px solid var(--wl-line); display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.5vw, 24px); }
@media (min-width: 960px) { .wl-evidence-block { grid-template-columns: var(--wl-evidence-label-col) 1fr; } }
.wl-evidence-label__cn, .wl-evidence-label__en { display: block; font-weight: 600; color: var(--wl-ink); font-size: 14px; line-height: 20px; } /* Figma：CN 在上 + EN 在下，均黑 Demibold */

/* 目标健康成效（3 列要点） */
.wl-outcome-grid { display: grid; gap: clamp(16px, 1.5vw, 28px); grid-template-columns: 1fr; }
@media (min-width: 960px) { .wl-outcome-grid { grid-template-columns: repeat(3, 1fr); } }
.wl-outcome-col { display: flex; flex-direction: column; gap: clamp(8px, 0.83vw, 14px); } /* Figma：CN 句 + EN 句各一项点 */
.wl-outcome-col__cn, .wl-outcome-col__en { position: relative; padding-left: 16px; color: var(--wl-ink-50); font-size: 14px; line-height: var(--wl-leading-14); }
.wl-outcome-col__cn::before, .wl-outcome-col__en::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--wl-brand); }

/* 证据等级 / 局限文本 */
.wl-evidence-text { color: var(--wl-ink-80); font-size: 14px; line-height: var(--wl-leading-14); }
.wl-evidence-text--cn { color: var(--wl-ink-50); margin-top: 6px; }

/* 作用机制证据类型表 + 可用性对勾徽标 */
.wl-moa-table { border: 1px solid var(--wl-line); border-radius: var(--wl-radius-md); background: #fff; padding: clamp(12px, 1vw, 20px); }
.wl-moa-head, .wl-moa-row { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 10px 0; }
.wl-moa-row { border-top: 1px solid var(--wl-line); }
.wl-moa-head { font-size: 14px; color: var(--wl-ink); }
.wl-moa-type { position: relative; padding-left: 16px; font-size: 14px; color: var(--wl-ink-80); }
.wl-moa-type::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--wl-brand); }
.wl-moa-type__cn { color: var(--wl-ink-50); }
/* Figma：可用性=蓝色实心圆 + 白对勾（25@1920），各证据类型均标记可用 */
.wl-avail-check { display: inline-flex; align-items: center; justify-content: center; width: clamp(20px, 1.3vw, 25px); aspect-ratio: 1; border-radius: 50%; background: var(--wl-brand); }
.wl-avail-check::after { content: ""; width: 28%; height: 52%; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-10%) rotate(45deg); }

/* 已知局限列表 */
.wl-limit-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(8px, 0.83vw, 14px); }
.wl-limit-list li { position: relative; padding-left: 16px; color: var(--wl-ink-50); font-size: 14px; line-height: var(--wl-leading-14); } /* Figma：CN<br>EN 整段 50% 灰 */
.wl-limit-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--wl-brand); }

/* ============================================================================
 * 子页面 Figma 视觉对齐 override（特性 011 视觉走查 49 条）
 * 全部以 .wl-subpage 作用域承载——不污染首页共享令牌/组件（--wl-glass / .wl-ph--photo / .wl-h2 / --wl-panel-bg 等首页仍用原值）。
 * 占位图 v1 仍为渐变（v2 换真图/CMS），但色调/尺寸/圆角/玻璃对齐 Figma。
 * ========================================================================== */

/* — Hero：高度 485@1920、亮蓝气泡感（去深角、加亮高光）— */
.wl-subpage { --wl-subhero-h: clamp(300px, 25.26vw, 485px); }
.wl-subpage .wl-subhero__bg { background: url(../images/ph-tech.jpg) center / 100% 100% no-repeat; } /* 图片位不叠色；banner 精确填满不溢出（可变形） */

/* — 图片位：真实图片占位（background-image url，区别于纯色底色）；v2 换各自真实图/CMS — */
/* 三大平台背景：改由模板动态取 research_wonderLabInfo_platforms 栏目引导图；无图时 .wl-ph--photo 占位（原 ph-tech.jpg 默认图已移除） */
.wl-subpage .wl-org-card__media   { background: url(../images/ph-tech.jpg) center / cover no-repeat; }          /* 四大中心配图 */
.wl-subpage .wl-clinical__media   { background: url(../images/ph-banner.jpg) center / cover no-repeat; }        /* 临床实景图 */
.wl-subpage .wl-feature-card__bg  { background: url(../images/ph-tech.jpg) center / cover no-repeat; }          /* 品质三卡配图 */
/* .wl-subpage .wl-band-brand 背景已移除：蓝带背景改由模板内联 background（CMS 图，自带 cover）承载；无图时回退基类 var(--wl-brand) 蓝 */
.wl-subpage .wl-banner-photo      { background: url(../images/ph-banner.jpg) center / cover no-repeat; aspect-ratio: 1360 / 521; border-radius: var(--wl-radius-card); } /* 地球横幅图，比例 2.61，r24 */

/* — 三大研发平台大卡：尺寸 1360x640、圆角 30、内层玻璃条 — */
.wl-subpage .wl-platform-card { min-height: clamp(360px, 33.3vw, 640px); border-radius: 30px; }
.wl-subpage .wl-platform-card__inner {
  background: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px);
  border-radius: 20px;
  margin: auto clamp(16px, 1.5vw, 29px) clamp(20px, 2vw, 40px);
  padding: clamp(20px, 2vw, 40px);
}

/* — 四大联合研究中心卡配图：圆角 5、比例 322/200 — */
.wl-subpage .wl-org-card__media { border-radius: 5px; aspect-ratio: 322 / 200; }

/* — 临床研究右图：Figma 644×693 — */
.wl-subpage .wl-clinical__media { aspect-ratio: 644 / 693; }

/* — 平台描述：字重 330、行高 1.43 — */
.wl-subpage .wl-platform-item__desc { font-weight: 330; line-height: var(--wl-leading-14); } /* Figma 平台描述行高 22/14=1.57 */

/* — 品质特性卡：尺寸 437x578、圆角 32；玻璃标签 #fff@0.2 blur80 r16；描述全白 — */
.wl-subpage .wl-feature-card { border-radius: 32px; min-height: clamp(360px, 30.1vw, 578px); }
.wl-subpage .wl-feature-card__label {
  background: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(80px); backdrop-filter: blur(80px);
  border-radius: 16px;
}
.wl-subpage .wl-feature-card__desc { color: #ffffff; }

/* — 蓝带副标题/三列字号 — */
.wl-subpage .wl-band-brand__sub   { font-size: clamp(16px, 1.25vw, 24px); line-height: 1.33; }

/* — 菌株库面板：半透灰 #e6e6e6@0.44、圆角 32 — */
.wl-subpage .wl-strainlib-panel { background: rgba(0, 0, 0, .03); border-radius: 32px; } /* Figma 面板底 rgba(0,0,0,0.03) */

/* — 进口卡 / 自研卡 各自底色与圆角（拆开覆盖合并规则）— */
.wl-subpage .wl-microbe-card { background: rgba(0, 0, 225, .1); border-radius: 16px; }
.wl-subpage .wl-strain-card  { background: rgba(0, 0, 0, .05); border-radius: 10px; }
/* 进口卡占位：方形 212（去圆形 pill），亮蓝菌株球色调 */
.wl-subpage .wl-microbe-card__media {
  width: clamp(150px, 11vw, 212px); aspect-ratio: 1 / 1; border-radius: var(--wl-radius-md);
  background: url(../images/ph-tech.jpg) center / cover no-repeat;
}

/* — 详情页 chip 横排：大卡 444x181 r20、活跃浅金 #fbd39a、非活跃 #e6e6e6、大缩略 — */
.wl-subpage .wl-chip-card {
  width: clamp(280px, 23.1vw, 444px); min-height: clamp(120px, 9.4vw, 181px);
  border-radius: 32px; background: rgba(0, 0, 0, .03); color: var(--wl-ink);
  gap: clamp(16px, 1.5vw, 24px); padding: clamp(16px, 1.5vw, 24px); /* Figma chip：r32 / 底 .03 / gap24 / pad24 */
}
.wl-subpage .wl-chip-card__name { font-size: 14px; }           /* Figma 14px（基类 13） */
.wl-subpage .wl-chip-card__desc { line-height: 1.33; }          /* Figma 16/12=1.33（基类 1.5） */
.wl-subpage .wl-chip-card.is-active { background: #fbd39a; color: var(--wl-ink); }
.wl-subpage .wl-chip-card.is-active .wl-chip-card__desc { color: var(--wl-ink-50); }
.wl-subpage .wl-chip-card__media { width: clamp(96px, 7.81vw, 150px); aspect-ratio: 1 / 1; flex: none; border-radius: 10px; background: url(../images/ph-tech.jpg) center / cover no-repeat; } /* Figma 150×150 方 */
.wl-subpage .wl-chip-card.is-active .wl-chip-card__media { background: url(../images/ph-strain.jpg) center / cover no-repeat; }
.wl-subpage .wl-strain-card__media { background: url(../images/ph-strain.jpg) center / 100% 100% no-repeat; border-radius: var(--wl-radius-md); } /* 028/US2 撑满 250×250 不信箱化（原则 VIII 100% 100%，取代 contain） */

/* — 证据卡：面板半透 #e6e6e6@0.44；主体大图黑玻璃 #000@0.05 blur65 r24、比例 658/571 — */
.wl-subpage .wl-evidence-card { background: rgba(0, 0, 0, .03); } /* Figma 证据卡面板底 rgba(0,0,0,0.03) */
/* Figma 证据卡内分隔线：0.5px rgba(0,0,0,0.3)（基类 1px/.12 偏粗偏淡）；仅子页作用域 */
.wl-subpage :is(.wl-def-row, .wl-evidence-block, .wl-moa-row) { border-top-color: rgba(0, 0, 0, .3); border-top-width: .5px; }
.wl-subpage .wl-def-row:last-child { border-bottom: 0; } /* 027/FR-018 规格表末行去底线（self+coop） */
/* 027/FR-019 合作页作用机制段：指定字体样式 + 段首前缀圆点（仅 coop，.wl-evidence-text 专用于该段） */
.wl-subpage--sd-coop .wl-evidence-text { position: relative; padding-left: 14px; color: rgba(0, 0, 0, .5); font-family: var(--wl-font); font-size: 14px; line-height: 22px; } /* 028/FR-010 去 font-weight（继承默认字重） */
.wl-subpage--sd-coop .wl-evidence-text::before { content: ""; position: absolute; left: 0; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; } /* 装饰性前缀圆点 */
.wl-subpage .wl-evidence-main__media {
  background: url(../images/ph-strain.jpg) center / cover no-repeat;
  border-radius: 24px; aspect-ratio: 658 / 571;
}
.wl-subpage { --wl-evidence-label-col: clamp(180px, 18.7vw, 359px); --wl-def-key-col: clamp(180px, 15.8vw, 303px); }
@media (min-width: 960px) {
  .wl-subpage .wl-evidence-main { grid-template-columns: minmax(0, clamp(360px, 34.3vw, 658px)) 1fr; }
}

/* — MoA 白盒圆角 20 — */
.wl-subpage .wl-moa-table { border-radius: 20px; }

/* — 质量承诺产线图：中蓝产线占位 + 黑玻璃遮罩 + 底部免责玻璃条（Figma Q-09）— */
.wl-subpage .wl-promise__media { position: relative; overflow: hidden; }
.wl-promise__media-bg { position: absolute; inset: 0; border-radius: inherit; }
.wl-subpage .wl-promise__media-bg { background: url(../images/ph-banner.jpg) center / cover no-repeat; } /* 图片位不叠色 */
.wl-promise__disclaimer {
  position: absolute; left: clamp(16px, 1.5vw, 28px); right: clamp(16px, 1.5vw, 28px); bottom: clamp(16px, 1.5vw, 28px);
  margin: 0; padding: clamp(12px, 1.04vw, 20px) clamp(16px, 1.5vw, 28px);
  background: rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px);
  border-radius: 20px; color: #ffffff; font-size: 14px; line-height: 1.43; /* Figma 免责声明行高 20/14≈1.43 */
}

/* — 「了解更多」下划线文字链：下划线仅贴文字宽（去首页第5栏 min-width:88/flex 拉伸/固定高），箭头常显且不带下划线（Figma：文字下划线 + 右侧箭头→）。inline-flex 箭头天然中断 text-decoration，不会被下划线覆盖。 */
.wl-subpage .wl-btn-underline {
  min-width: 0; width: -moz-fit-content; width: fit-content; height: auto;
  padding: 0; border-bottom: 0;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.wl-subpage .wl-btn-underline .wl-cta-arrow { width: auto; opacity: 1; transform: none; margin-left: 6px; }

/* ============================================================================
 * 特性 012 视觉精修：多余装饰清理（D1–D3）+ 标题去负字距（T1–T4）
 * 盘点 Figma 几何（/tmp/figma011/*.visual.txt 的 LINE/stroke 节点）后确认：
 *   证据卡定义表/满宽块/MoA 的分隔线 Figma 确有（Line 16/22-27）→ 保留；
 *   仅以下三处为 Figma 不存在的多余装饰 → 删除。全部 .wl-subpage 作用域，不污染首页。
 * ========================================================================== */
.wl-subpage .wl-feature-card__label { border: 0; }                 /* D1 特性卡玻璃标签：Figma 无描边 */
.wl-subpage .wl-stat { border-top: 0; padding-top: 0; }            /* D3 统计项：Figma 无顶部分隔线（间距由 grid gap 承载） */
/* T1–T3 子页标题去除 Figma 未指定的负字距（Figma 标题 ls=0）；T4 统计数字同 */
.wl-subpage :is(.wl-h2, .wl-h3),
.wl-subpage .wl-display,
.wl-subpage .wl-subhero__title,
.wl-subpage .wl-stat__num { letter-spacing: 0; }
/* US2 临床区：标题行右侧「了解更多」+ 展开项 CTA 右对齐（Figma） */
.wl-subpage .wl-clinical-head { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(16px, 1.5vw, 24px); }
/* 三大平台项之间：删除 Figma 不存在的竖线分隔（项间靠 grid gap 分隔） */
.wl-subpage .wl-platform-item:not(:first-child) { border-left: 0; padding-left: 0; }
/* 子页内容容器对齐 Figma 内容区 1360（x280→1640）：max 1408 + padding 24 → 内容 1360、左缘 x=280。
   修正图片框/网格宽度比 Figma 窄 16px 的问题。仅 .wl-subpage 作用域，不动全局 1392（首页/导航 mega 仍用）。 */
@media (min-width: 1280px) { .wl-subpage .wl-container { max-width: 1408px; } }
/* 卡片网格行对齐：标题行数不等时用 min-height 统一标题区高，使下方副标题/描述/CTA 在各卡同水平对齐 */
.wl-subpage .wl-org-card__title { min-height: 4em; }       /* 四大中心：机构名 2–3 行 → 对齐（最长 3 行≈4em） */
.wl-subpage .wl-promise { align-items: start; }            /* 质量承诺：左栏标题与右产线图顶对齐（Figma，非居中） */
/* Figma：右侧产线图为定宽 762 列（左统计列自适应），非 1fr/1fr 均分——否则图被压到约 672 宽。
   仅 ≥1280（内容≥1232，762+gap64+左列仍有余）启用；960–1280 仍按 1fr/1fr 等比缩放，避免左列被挤窄。 */
@media (min-width: 1280px) { .wl-subpage .wl-promise { grid-template-columns: minmax(0, 1fr) minmax(0, 762px); } }

/* ===== 轮次 4（FR-012/017/018）===== */
/* FR-012 三大平台项短标题（平台名与描述之间，14px 白 50%）*/
.wl-subpage .wl-platform-item__sub { margin-top: 4px; color: var(--wl-on-brand-50); font-size: 14px; line-height: 1.43; }
/* FR-017 供应链时间线：横贯实线连线 + 3 节点（对齐阶段列）+ 3 阶段 */
.wl-supply { margin-top: clamp(40px, 5.99vw, 115px); } /* Figma 标题块↔供应链时间线 115@1920（原 72 偏小） */
.wl-supply-cols { display: grid; gap: clamp(24px, 2.5vw, 40px); grid-template-columns: 1fr; }
@media (min-width: 960px) {
  .wl-supply-cols { grid-template-columns: repeat(3, 1fr); position: relative; }
  .wl-supply-cols::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 3px; background-image: radial-gradient(circle, rgba(255, 255, 255, .85) 0 1.5px, transparent 1.6px); background-size: 14.5px 3px; background-repeat: repeat-x; background-position: left center; } /* 横贯连线：3px 白色圆点虚线（周期≈14.5px，对齐 Figma Line 28 dash0.5/gap14 ROUND cap），节点用 z-index 盖于其上 */
}
.wl-supply-col { position: relative; }
.wl-supply-node { display: block; width: 25px; height: 25px; border-radius: 50%; background: rgba(255, 255, 255, .5); position: relative; z-index: 1; } /* Figma Ellipse：白 50% 半透明 */
.wl-supply-col__title { margin-top: clamp(20px, 2vw, 36px); color: var(--wl-on-brand); font-size: clamp(18px, 1.25vw, 24px); }
.wl-supply-col__desc { margin-top: clamp(6px, 0.63vw, 12px); color: var(--wl-on-brand); font-size: 14px; line-height: var(--wl-leading-14); } /* Figma 供应链描述纯白 #fff（非 50%） */
/* FR-018 strain-library 侧栏「查看更多」hover 反馈（子页作用域，不改全局）*/
.wl-subpage .wl-btn-primary { transition: background-color .2s ease, transform .2s ease; }
.wl-subpage .wl-btn-primary:hover { background: var(--wl-brand-700); transform: translateY(-2px); }

/* ===== 子页区块纵向间距：单边承载，杜绝上下 padding 叠加（防双倍间距）=====
   段间 = 下段 padding-top（单一来源，非「上段 pb + 下段 pt」叠加）；hero→首段 100；
   末段→页脚由 .wl-sec--to-footer 单独 padding-bottom 承载。
   菌株库 .wl-strainlib-* 在下方有显式覆盖，源序在后，保持其既有数值不受影响。 */
.wl-subpage .wl-section { padding-top: clamp(96px, 10.42vw, 200px); padding-bottom: 0; }
.wl-subpage .wl-subhero + .wl-section { padding-top: clamp(48px, 5.21vw, 100px); } /* 共用：banner→首栏 100@1920（strain-detail/strain-library 维持，R8/FR-062） */
.wl-subpage--bs .wl-subhero + .wl-section { padding-top: clamp(72px, 7.81vw, 150px); } /* R8/FR-060 brand-story banner→品牌简介 150@1920（覆盖共用 100，不动 strain） */
.wl-subpage--pd .wl-pd-series-band + .wl-section { padding-top: clamp(72px, 7.81vw, 150px); } /* R8/FR-061 product-detail 系列条→产品主区 150@1920（覆盖默认 section 200） */
.wl-subpage .wl-sec--to-footer { padding-bottom: clamp(120px, 15.63vw, 300px); }
.wl-subpage .wl-sec--authcert { padding-top: clamp(39px, 2.71vw, 52px); } /* 025/US2 权威认证标题↔上方引导图 52px@1920（覆盖子页默认段间 200，源序后置胜出） */
.wl-subpage--sd .wl-sec--to-footer { padding-bottom: clamp(96px, 10.42vw, 200px); } /* 自研/合作菌株：证据卡→页脚间距 200@1920 */
.wl-subpage .wl-band-brand { margin-top: clamp(96px, 10.42vw, 200px); } /* 满宽蓝带不是 .wl-section：上方间距改由 margin 承载（原靠上段 pb，现 pb=0） */

/* ===== 轮次 5（FR-020）strain-library 纵向间距对齐 Figma ===== */
/* 规则：区块间距由「下方 section 的 padding-top」承担、上方 padding-bottom=0；末区块 padding-bottom 接 footer。subhero(0/0) 与 footer 不改。@1920 命中 100/52/100/200 */
.wl-subpage .wl-strainlib-intro { padding-top: clamp(48px, 5.21vw, 100px); padding-bottom: 0; }
.wl-subpage .wl-strainlib-block { padding-top: clamp(28px, 2.71vw, 52px); padding-bottom: 0; }
.wl-subpage .wl-strainlib-block--last { padding-top: clamp(48px, 5.21vw, 100px); padding-bottom: clamp(96px, 10.42vw, 200px); }

/* ============================================================
   子页面（特性 018：产品详情 / 品牌故事 / FAQ）组件区
   1920 基准、clamp 四档、≤2 位小数、品牌蓝令牌、MiSans、复用优先
   ============================================================ */

/* ---------- 产品详情：产品系列条（满宽蓝带，Figma Frame 264） ---------- */
.wl-pd-series-band {
  width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw);
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat; /* 027/US2 去掉原渐变兜底底色；动态底图(行内 prop1)撑满不裁剪不留白（原则 VIII） */
  min-height: var(--wl-pd-series-band-h); /* Figma Frame 264 banner 345@1920 */
  display: flex; align-items: flex-start; padding-top: clamp(63px, 10vw, 192px); /* 产品卡片距顶 192@1920；距 banner 底 45@1920（= min-height 345 − padding-top 192 − 卡片 108，vw 各档精确） */
}
/* R3-01 真全屏：卡片行两侧均出血至视口边（首卡贴视口左、末卡到右），margin-inline 标准 full-bleed idiom（与 .wl-pd-series-band 一致） */
.wl-pd-series { display: flex; gap: clamp(12px, 1.25vw, 24px); list-style: none; margin: 0; padding: 0; margin-inline: calc(50% - 50vw); overflow-x: auto; }
.wl-pd-series { scrollbar-width: none; -ms-overflow-style: none; cursor: grab; } /* 隐藏滚动条 + 鼠标可按住拖动滑动（JS drag-to-scroll） */
.wl-pd-series::-webkit-scrollbar { display: none; }
.wl-pd-series.is-dragging, .wl-pd-series.is-dragging .wl-pd-series__link { cursor: grabbing; user-select: none; } /* 拖动中：抓取态 + 禁选中 */
.wl-pd-series__item { flex: 0 0 var(--wl-pd-series-card-w); }   /* Figma 卡片定宽 283，不等分铺满 */
.wl-pd-series__link {
  display: flex; align-items: center; justify-content: flex-start; gap: clamp(8px, 0.83vw, 16px);
  height: var(--wl-pd-series-h); padding: 0 clamp(14px, 1.25vw, 24px);
  border-radius: var(--wl-radius-card-sm); background: var(--wl-glass-weak);
  -webkit-backdrop-filter: blur(var(--wl-glass-blur)); backdrop-filter: blur(var(--wl-glass-blur)); /* 玻璃透明：20%白底 + 11px 毛玻璃模糊（复用玻璃令牌） */
  color: var(--wl-on-brand); transition: background .2s, color .2s;
}
.wl-pd-series__item.is-active .wl-pd-series__link,
.wl-pd-series__link:hover { background: rgba(255, 255, 255, .95); color: var(--wl-brand); }
.wl-pd-series__icon { width: clamp(30px, 2.66vw, 51px); height: clamp(47px, 4.17vw, 80px); flex: none; object-fit: fill; } /* 卡内图 51x80@1920 响应式，撑满不留白 */
.wl-pd-series__name { font-size: clamp(12px, 0.73vw, 14px); font-weight: 600; line-height: 1.3; } /* 卡内名 14@1920 响应式 */

/* ---------- 产品详情：产品主区（Figma Group 251） ---------- */
.wl-pd-hero__grid { display: grid; gap: clamp(24px, 2.92vw, 56px); grid-template-columns: 1fr; }
@media (min-width: 960px) { .wl-pd-hero__grid { grid-template-columns: 1fr clamp(291px, 22.76vw, 437px); align-items: start; } }  /* 右购买信息列锁 437@1920 响应式（Figma 437）；左图集 1fr 吸收余量 */
.wl-pd-gallery__main { width: 100%; aspect-ratio: var(--wl-pd-gallery-ratio); border-radius: var(--wl-radius-xl); overflow: hidden; background: var(--wl-img-bg); }
.wl-pd-gallery__main img { width: 100%; height: 100%; object-fit: fill; display: block; }  /* 撑满不裁切不留白（允许变形） */
.wl-pd-gallery__thumbs { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(12px, 1.25vw, 24px); margin-top: clamp(12px, 1.25vw, 24px); } /* Figma 左副图窄 279、右副图宽 573 */
.wl-pd-gallery__thumb { width: 100%; aspect-ratio: 0.97 / 1; object-fit: fill; border-radius: var(--wl-radius-lg); background: var(--wl-img-bg); } /* 左副图 279×289；撑满不裁切不留白 */
.wl-pd-gallery__thumb:last-child { aspect-ratio: 1.98 / 1; } /* 右副图 573×289 */
.wl-pd-buy__name { font-size: clamp(26px, 2.08vw, 40px); font-weight: 600; line-height: 1.3; } /* Figma 产品名 40@1920 */
.wl-pd-buy__sub { margin-top: clamp(16px, 1.25vw, 24px); color: var(--wl-ink-50); font-size: clamp(16px, 1.25vw, 24px); line-height: var(--wl-leading-24); } /* 027/FR-001 子标题↔标签 24@1920；Figma 副标题 24@1920、50%黑 */
.wl-pd-buy__chips { display: flex; flex-wrap: wrap; gap: clamp(8px, 0.83vw, 16px); list-style: none; margin: clamp(11px, 0.83vw, 16px) 0 0; padding: 0; } /* 027/FR-001 标签↔标题 16@1920 */
.wl-pd-buy__chips .wl-tag { font-size: clamp(12px, 0.94vw, 14px); } /* Figma 规格 chip 文字偏大 */
.wl-pd-buy__cta { display: flex; flex-direction: column; align-items: stretch; gap: clamp(8px, 0.83vw, 16px); margin-top: clamp(35px, 2.71vw, 52px); } /* 027/FR-001 购买按钮↔子标题 52@1920；Figma 满宽按钮在上、说明居中在下 */
.wl-pd-buy__btn { width: 100%; height: clamp(44px, 3.13vw, 60px); padding-block: 0; border-radius: var(--wl-radius-pill); } /* Figma 437x60 块按钮，显式高度（不依赖 .wl-btn-primary 的 height:auto） */
.wl-pd-buy__acc { margin-top: clamp(20px, 1.88vw, 36px); }
/* 027/FR-002~005 产品主区手风琴（仅 .wl-pd-buy__acc，不影响全局 .wl-faq-*）：标题行定高 69@1920、内容↔标题 0、内容↔下一项 15、末项去底线 */
.wl-pd-buy__acc .wl-faq-q { height: clamp(46px, 3.59vw, 69px); padding: 0; align-items: center; }
.wl-pd-buy__acc .wl-faq-a > div { padding: 0 0 clamp(10px, 0.78vw, 15px); }
.wl-pd-buy__acc .wl-pd-spec li:first-child { margin-top: 0; }
.wl-pd-buy__acc .wl-pd-spec li:last-child { margin-bottom: 0; }
.wl-pd-buy__acc .wl-faq-item:last-child { border-bottom: 0; }
.wl-pd-spec { margin: 0; padding-left: 1.2em; list-style: disc; }
.wl-pd-spec li { color: var(--wl-ink-80); font-size: 14px; line-height: var(--wl-leading-24); margin: 6px 0; }
/* R6/FR-041 成分清单恒单列（移除 ≥640px 双列） */
.wl-pd-ingredient { display: flex; align-items: center; gap: clamp(10px, 1vw, 20px); height: clamp(48px, 3.54vw, 68px); padding: 0 clamp(10px, 0.94vw, 18px); border-radius: var(--wl-radius-md); background: var(--wl-panel-bg); margin-bottom: clamp(10px, 0.94vw, 18px); } /* R6/FR-041 首个成分卡高 68px@1920 响应式、按钮圆角；纵向内边距 0 使图标在 68px 内垂直居中 */
.wl-pd-ingredient__icon { width: clamp(36px, 3.13vw, 60px); aspect-ratio: 1 / 1; min-height: 0; flex: none; object-fit: fill; } /* Figma 1681:7496 分子图；撑满不裁切不留白 */
.wl-pd-ingredient__name { font-weight: 600; }

/* ---------- 产品详情：内源肠道保养对比卡（FR-064 重设计：左标题+脚注 / 右双列卡，依设计图） ---------- */
.wl-compare { position: relative; overflow: hidden; display: grid; gap: clamp(24px, 2.6vw, 50px); grid-template-columns: 1fr; border-radius: clamp(24px, 2.08vw, 40px); background-size: 100% 100%; background-repeat: no-repeat; background-position: center; padding: clamp(28px, 3.13vw, 60px); color: var(--wl-on-brand); min-height: clamp(435px, 34.01vw, 653px); }  /* 去掉原蓝色渐变底色，改由模板行内动态底图(文章 prop1)撑满(原则 VIII 100% 100%)；产品规格高度 653@1920 响应式；min-height 防溢出 */
@media (min-width: 960px) { .wl-compare { grid-template-columns: 5fr 11fr; align-items: stretch; } } /* 左标题区 : 右对比卡 ≈ 1:2.2（设计图比例） */
.wl-compare__intro { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(24px, 3.13vw, 60px); }
.wl-compare__title { color: var(--wl-on-brand); } /* 设计图：两行白色标题 */
.wl-compare__notes { color: var(--wl-on-brand-50); font-size: clamp(11px, 0.63vw, 12px); line-height: 1.6; } /* 左下角脚注（备注） */
.wl-compare__table { position: relative; display: flex; flex-direction: column; background: var(--wl-glass-weak); border-radius: 16px; padding: var(--wl-compare-pad); } /* Figma 第一层玻璃 867×605：rgba(255,255,255,.20)、圆角16、无 blur */
.wl-compare__glass { position: absolute; top: var(--wl-compare-pad); height: calc(100% - 2 * var(--wl-compare-pad)); left: var(--wl-compare-pad); width: calc(50% - var(--wl-compare-pad)); border-radius: var(--wl-radius-sm); background: var(--wl-glass-weak); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); z-index: 0; pointer-events: none; } /* Figma 第二层玻璃 446×563（≈面板左半幅）：rgba(255,255,255,.20)、圆角8、blur50；覆盖本品（第4代）列 */
.wl-compare__head, .wl-compare__row { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--wl-compare-gap); }
.wl-compare__head { align-items: flex-end; padding-top: clamp(12px, 1.18vw, 22px); padding-bottom: clamp(10px, 0.94vw, 18px); }
.wl-compare__row { padding-block: clamp(10px, 0.94vw, 18px); }
.wl-compare__row + .wl-compare__row { border-top: 1px solid var(--wl-line-on-brand); } /* 行分隔细线（80% 白，毛玻璃上） */
.wl-compare__cell { font-size: clamp(12px, 0.83vw, 16px); line-height: 1.5; color: var(--wl-on-brand); text-align: center; } /* 0.2 毛玻璃上为白字 */
.wl-compare__cell--own { font-weight: 600; } /* 本品列（第4代）Demibold */
.wl-compare__cell--muted { font-weight: 400; } /* 对照列（第3代）Regular */
.wl-compare__cell--head { display: flex; justify-content: center; align-items: flex-end; }
.wl-compare__cell--head img { height: var(--wl-compare-bottle-h); width: auto; }

/* ---------- 产品详情：推荐周期服用计划（Figma Group 249，满宽浅底） ---------- */
.wl-pd-cycle { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); background: rgba(0, 0, 0, 0.03); }  /* Figma 周期带底 rgba(0,0,0,0.03) */
/* 满宽带间距【单源·防双倍】：上间距 margin-top（白，单源）；padding-block 为带内内容内衬（带色内，不计入段间）；下间距由下一段 padding-top 承载（白，单源）。Figma 上/下白间距各 115。 */
.wl-subpage .wl-pd-cycle { margin-top: clamp(64px, 5.99vw, 115px); padding-block: clamp(40px, 4.17vw, 80px); min-height: clamp(606px, 47.34vw, 909px); display: flex; flex-direction: column; justify-content: center; }  /* 029/US3 内容在栏内垂直居中→配图上下间距一致；浅灰底/margin-top 分隔保留不顶上栏；周期栏高 909@1920 响应式 */
.wl-subpage .wl-pd-cycle + .wl-section { padding-top: clamp(64px, 5.99vw, 115px); }
/* 产品详情段间距对齐 Figma（单源、上段 pb=0）：主区→对比表 150；末段→页脚 172（覆盖共享 300） */
.wl-subpage--pd .wl-pd-hero + .wl-section { padding-top: clamp(72px, 7.81vw, 150px); }
.wl-subpage--pd .wl-sec--to-footer { padding-bottom: clamp(96px, 8.96vw, 172px); }
/* 特性035：FAQ 右下角「查看注释」——站点属性 annotation 配置时显示（首页 + 产品详情共用）；右对齐灰色小字贴手风琴右缘，hover 转品牌蓝 */
.wl-faq-annotation { display: block; width: fit-content; margin-left: auto; margin-top: clamp(40px, 4.17vw, 80px); color: var(--wl-ink-50); font-size: clamp(13px, 0.83vw, 16px); line-height: 1.4; text-decoration: none; transition: color .2s ease; }
.wl-faq-annotation:hover, .wl-faq-annotation:focus-visible { color: var(--wl-brand); }
.wl-pd-cycle__title { text-align: left; } /* R6/FR-042 标题左对齐（已移入左列、顶边与右图齐平） */
.wl-pd-cycle__left { display: flex; flex-direction: column; } /* R6/FR-042 左列：标题 + 时间轴 */
.wl-pd-cycle__left .wl-pd-cycle__title { margin-bottom: clamp(53px, 4.17vw, 80px); } /* 027/FR-007 标题↔时间轴 80@1920 */
.wl-pd-cycle__grid { display: grid; gap: clamp(24px, 2.5vw, 48px); grid-template-columns: 1fr; align-items: stretch; margin-top: 0; } /* 028/US1 stretch 左列高=右配图高、囊贴底对齐；029/US3 去 margin-top 使栏内垂直居中对称（配图上下间距一致） */
@media (min-width: 960px) { .wl-pd-cycle__grid { grid-template-columns: 1fr clamp(500px, 43.7vw, 839px); } } /* 026/US2 周期配图 839×739@1920（右列宽 839→aspect-ratio 派生 739；floor 500 保 960 档左列时间轴不溢出） */
.wl-timeline-v { list-style: none; margin: 0; padding: 0; }
.wl-timeline-v__node { position: relative; padding-left: clamp(24px, 2vw, 40px); padding-bottom: clamp(20px, 2.08vw, 40px); }
.wl-timeline-v__node:last-child { padding-bottom: 0; }
.wl-timeline-v__node::before { content: ""; position: absolute; left: calc(var(--wl-timeline-dot) / 2 - 0.5px); top: var(--wl-timeline-dot); bottom: 0; width: 1px; background: var(--wl-line); }
.wl-timeline-v__node:last-child::before { display: none; }
.wl-timeline-v__dot { position: absolute; left: 0; top: 5px; width: var(--wl-timeline-dot); height: var(--wl-timeline-dot); border-radius: 50%; background: var(--wl-brand); }
.wl-timeline-v__head { font-size: clamp(18px, 1.25vw, 24px); font-weight: 600; line-height: 1.27; } /* 027/FR-008 周期节点标题 24@1920 */
.wl-timeline-v__desc { margin-top: clamp(6px, 0.63vw, 12px); color: var(--wl-ink-50); font-size: 14px; line-height: var(--wl-leading-14); } /* 027/FR-008 周期节点描述 14px（行高映射 22） */
.wl-pd-cycle__media { border-radius: 32px; overflow: hidden; aspect-ratio: 839 / 739; align-self: start; } /* 028/US1 align-self:start 防图随左列 stretch 拉伸变形；Figma 配图 839×739 */
.wl-pd-cycle__media img { width: 100%; height: 100%; object-fit: fill; display: block; }  /* 撑满不裁切不留白（允许变形） */
.wl-pd-cycle__note { margin: auto 0 0; display: inline-flex; align-items: center; justify-content: center; width: clamp(315px, 26.04vw, 500px); max-width: 100%; height: clamp(33px, 2.60vw, 50px); padding: 0 clamp(16px, 1.25vw, 24px); border-radius: var(--wl-radius-pill); background: rgba(0, 0, 0, .03); font-weight: 500; text-align: center; } /* 028/US1 食用方法囊高 50@1920；035 宽 500@1920（26.04vw=500/1920）；margin-top:auto 贴左列底，与右配图底对齐 */

/* ---------- 产品详情：微生态研究院图组（Figma Group 245） ---------- */
.wl-pd-inst__title { text-align: center; } /* R6/FR-043 研究院标题居中（图网格保持现状） */
.wl-pd-inst { display: grid; gap: clamp(12px, 1.25vw, 24px); grid-template-columns: repeat(2, 1fr); align-items: end; }
@media (min-width: 960px) { .wl-pd-inst { display: flex; } .wl-pd-inst__cell { flex: 286 1 0; } .wl-pd-inst__cell.is-active { flex-grow: 422; } } /* Figma 首图 422、其余 286；点击哪张哪张变 422（原位放大），底对齐、非弹窗 */
.wl-pd-inst__cell { border-radius: var(--wl-radius-lg); overflow: hidden; background: var(--wl-img-bg); aspect-ratio: 1 / 1; cursor: pointer; }
.wl-pd-inst__cell:focus-visible { outline: 2px solid var(--wl-brand); outline-offset: 2px; }
.wl-pd-inst__cell img { width: 100%; height: 100%; object-fit: fill; display: block; }  /* 撑满不裁切不留白（允许变形） */

/* ---------- 品牌故事：区块标题行变体（标题 + 右侧 CTA/箭头同行） ---------- */
.wl-sec-head--row { flex-direction: row; align-items: center; justify-content: space-between; gap: clamp(16px, 1.67vw, 32px); }

/* ---------- 品牌故事：品牌简介 / 会员故事（图文两栏） ---------- */
.wl-bs-intro, .wl-bs-member { display: grid; gap: clamp(24px, 3.13vw, 60px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) {
  .wl-bs-intro { grid-template-columns: 1fr clamp(320px, 34.9vw, 668px); }
  .wl-bs-member { grid-template-columns: 1fr clamp(320px, 35.26vw, 677px); } /* Figma 会员故事：文字左、图右 */
}
.wl-bs-intro__text .wl-h2 .font-light { font-size: clamp(16px, 1.25vw, 24px); } /* Figma 品牌简介标题第二行 24px（第一行 40px 两级） */
.wl-bs-intro__text .wl-h2 .font-semibold { color: var(--wl-brand); } /* R7/FR-053 品牌简介标题改品牌蓝（后代锁死，不污染全局 .font-semibold） */
.wl-bs-intro__text .wl-h2 .font-light { color: rgba(0, 0, 0, .5); display: inline-block; margin-top: clamp(16px, 1.25vw, 24px); } /* 027/FR-020 子标题色 rgba(0,0,0,0.5)；028/FR-005 标题↔子标题 24px@1920（后代锁死，不污染全局 .font-light） */
.wl-bs-intro__desc, .wl-bs-member__desc { margin-top: clamp(16px, 1.46vw, 28px); color: var(--wl-ink-80); font-size: 14px; line-height: var(--wl-leading-14); } /* 品牌简介/会员故事描述统一 14px；行高用统一 14px 标准令牌 --wl-leading-14(1.57→22) */
.wl-bs-intro__desc { margin-top: clamp(48px, 3.75vw, 72px); max-width: clamp(432.75px, 30.05vw, 577px); } /* 027/FR-020 子标题↔描述 72px@1920；描述折行宽 577@1920 */
.wl-bs-member__desc { max-width: clamp(321px, 22.29vw, 428px); margin-top: clamp(36px, 2.5vw, 48px); } /* 025/US3 会员描述折行宽 428@1920、标题↔描述 48@1920（覆盖共享 28） */
.wl-bs-intro__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 32px; display: block; } /* R2-01 品牌简介图 677×677 方、圆角 32 */
.wl-bs-member__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 32px; display: block; } /* Figma 1725:605 圆角 32 */
.wl-bs-member__text .wl-btn-underline { margin-top: clamp(48.75px, 3.39vw, 65px); } /* 025/US3 了解更多按钮↔描述 65px@1920 */
.wl-bs-stats { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(16px, 1.46vw, 28px); row-gap: clamp(20px, 2.08vw, 40px); margin: clamp(60px, 6.25vw, 120px) 0 0; } /* R10/FR-070 描述↔数字组 120px@1920、行距 40px@1920；列距维持 28px */
.wl-bs-stat { padding-top: clamp(10px, 0.83vw, 16px); } /* 025/US3 移除 border-top 分隔线（仅删边框，保留 padding-top） */
.wl-bs-stat__title { font-weight: 700; font-size: clamp(20px, 1.56vw, 30px); color: var(--wl-ink); line-height: 1.3; } /* Figma 数字标题 30px 黑色 */
.wl-bs-stat__label { margin-top: 6px; color: var(--wl-ink-50); font-size: 14px; line-height: var(--wl-leading-14); }

/* ---------- 品牌故事：使命愿景（满宽分子底带，Figma Group 207） ---------- */
.wl-mv-band { position: relative; width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); overflow: hidden; margin-top: clamp(96px, 10.42vw, 200px); min-height: var(--wl-mv-band-h); display: flex; align-items: flex-start; } /* 027/FR-021 内容顶对齐（标题↔栏顶由 padding-top 承载）；Figma Group 207 带高 680@1920 */
.wl-subpage .wl-mv-band { padding-block: clamp(40px, 4.17vw, 80px); padding-top: clamp(67px, 5.21vw, 100px); } /* 027/FR-021 使命愿景标题↔栏顶 100@1920 */
.wl-mv-band__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.wl-mv-band__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 225, .35); } /* Figma 蓝带：品牌蓝叠加压暗，承载白字 */
.wl-mv-band > .wl-container { position: relative; z-index: 1; }
.wl-mv-band__grid { display: grid; gap: clamp(20px, 2.08vw, 40px); grid-template-columns: 1fr; }
@media (min-width: 960px) { .wl-mv-band__grid { grid-template-columns: clamp(407px, 31.82vw, 611px) minmax(0, 1fr); gap: clamp(54px, 4.22vw, 81px); align-items: start; } } /* 027/FR-021 标题列宽 611@1920、列距 81@1920、顶对齐 */
.wl-mv-band__title { color: var(--wl-on-brand); } /* Figma 使命愿景标题白色 */
.wl-mv-band__body p { color: var(--wl-on-brand); font-size: clamp(15px, 1.25vw, 24px); line-height: var(--wl-leading-24); } /* Figma 正文白色 */
.wl-mv-band__body p + p { margin-top: clamp(14px, 1.25vw, 24px); }

/* ---------- 品牌故事：奖项与荣誉（横排可滚，Figma Group 264） ---------- */
/* 奖项→连续跑马灯（data-wl-loop / initLoopMarquee：右→左连续平移 + data-wl-prev/next 左右切换一卡，JS 克隆做无缝、悬停暂停、reduce-motion 静止）；取代旧 .wl-award-row 横滚 */
.wl-award-marquee { position: relative; overflow: hidden; margin-top: clamp(29px, 3.02vw, 58px); }
.wl-award-marquee__track { display: flex; gap: var(--wl-card-grid-gap); list-style: none; margin: 0; padding: 0; width: max-content; }
.wl-award-card { flex: 0 0 var(--wl-award-card-w); border-radius: 32px; background: #fff; padding: clamp(24px, 2.29vw, 44px); cursor: pointer; display: flex; flex-direction: column; } /* 029→年份对齐：flex 列 + 年份 margin-top:auto 贴卡底，同行卡等高→各卡年份基线一致（不受标题 1/2/3 行影响）；027 光标手势 */
.wl-award-card__media { width: 100%; aspect-ratio: var(--wl-award-img-ratio); border-radius: var(--wl-radius-md); overflow: hidden; background: #fff; } /* Figma 卡内图 285×139 */
.wl-award-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* R5/FR-030 卡内图填满 285×139 媒体框（媒体框 overflow:hidden 裁剪干净） */
.wl-award-card__name { margin-top: clamp(12px, 1vw, 20px); padding-top: clamp(10px, 0.83vw, 16px); border-top: 1px solid var(--wl-line); text-align: center; font-weight: 600; font-size: clamp(16px, 1.25vw, 24px); line-height: 1.3; } /* 029→标题 1/2/3 行不定高（年份改贴卡底对齐，不再靠 min-height 预留）；Figma 24px 居中 + 上分隔线 */
.wl-award-card__year { margin-top: auto; padding-top: clamp(6px, 0.52vw, 10px); text-align: center; color: var(--wl-ink-50); font-size: clamp(16px, 1.25vw, 24px); } /* 029→年份贴卡底（margin-top:auto），各卡年份对齐；padding-top 保证与标题最小间距；Figma 24px 居中 50%黑 */

/* ---------- 品牌故事：公益基金会 banner（Figma Group 270） ---------- */
.wl-bs-foundation__heading { margin-bottom: clamp(20px, 2.08vw, 40px); } /* Figma「基金会」40px 黑色区块标题，位于 banner 上方 */
.wl-bs-foundation { position: relative; border-radius: 32px; overflow: hidden; min-height: clamp(220px, 26.56vw, 510px); display: flex; align-items: flex-start; } /* Figma banner 510 高、圆角 32、内容顶部对齐 */
.wl-bs-foundation__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.wl-bs-foundation__copy { position: relative; z-index: 1; padding: clamp(24px, 2.55vw, 49px); color: var(--wl-on-brand); } /* Figma 文案左上 49 */
.wl-bs-foundation__title { color: var(--wl-on-brand); font-weight: 600; font-size: clamp(18px, 1.25vw, 24px); line-height: 1.3; } /* Figma「传递温暖…」24px 白色 */

/* ---------- 品牌故事：新闻动态（蓝卡网格，Figma Group 271） ---------- */
.wl-news-grid { display: grid; gap: var(--wl-card-grid-gap); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .wl-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .wl-news-grid { grid-template-columns: repeat(4, 1fr); } }
/* Figma 1725:472：新闻为「图头 + 黑字」，无卡片底色/内边距 */
.wl-news-card { background: transparent; } /* R5/FR-031 移除固定 aspect-ratio：卡高随内容自适应（同行网格 stretch 等高），避免固定高度下 flex-shrink 压缩标题致末行被切 */
.wl-news-card__link { display: flex; flex-direction: column; gap: clamp(8px, 0.83vw, 10px); height: 100%; color: var(--wl-ink); }
.wl-news-card__media { aspect-ratio: 322 / 200; border-radius: 5px; overflow: hidden; background: var(--wl-img-bg); margin-bottom: clamp(6px, 0.63vw, 14px); }
.wl-news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-news-card__title { font-size: clamp(16px, 1.25vw, 24px); font-weight: 600; line-height: var(--wl-leading-24); color: var(--wl-ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Figma 标题 24px 黑 行高32；限 4 行整洁截断（R5：卡高已改自适应，截断由 line-clamp 承担） */
.wl-news-card__date { margin-top: auto; font-size: 14px; color: var(--wl-ink-50); } /* Figma 日期 14px rgba(0,0,0,.5)；margin-top:auto 贴卡片底，整行各卡日期对齐同一水平线（标题行数不一时仍齐平） */
.wl-news-card__desc { margin-top: clamp(6px, 0.63vw, 12px); font-size: 14px; line-height: var(--wl-leading-14); color: rgba(0, 0, 0, .57); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* Figma 摘要 14px rgba(0,0,0,.57) 行高22，限 4 行 */
.wl-news-card__more { align-self: flex-start; margin-top: auto; } /* Figma 1725:481：仅圆形箭头按钮（了解更多文字隐藏），复用 .wl-arrow-btn 圆形样式；左对齐。R5：margin-top:auto 在内容自适应卡高下贴底（同行等高时仍齐底），与上方简述的间距由 flex gap 承担（不再加内边距以免挤偏图标，FR-036） */

/* ---------- FAQ：两栏布局（左类别筛选 + 右分类分组手风琴，Figma Frame 292 + Group 427319289） ---------- */
.wl-faq-layout { display: grid; gap: clamp(24px, 3.13vw, 60px); grid-template-columns: 1fr; }
@media (min-width: 960px) { .wl-faq-layout { grid-template-columns: var(--wl-faq-cats-col) 1fr; align-items: start; } }
/* 027/FR-025 左侧分类悬浮固定（≥960，桌面）；scroll-spy 高亮见 main.js initFaqScrollSpy */
@media (min-width: 960px) { .wl-faq-cats { position: sticky; top: clamp(80px, 8vw, 120px); align-self: start; } }
.wl-faq-cats__head { font-size: clamp(16px, 1.25vw, 24px); font-weight: 600; margin: 0; }
.wl-faq-cats__list { list-style: none; margin: clamp(12px, 1vw, 20px) 0 0; padding: 0; display: flex; flex-direction: column; gap: clamp(4px, 0.42vw, 8px); }
@media (max-width: 959.98px) { .wl-faq-cats__list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 6px; } }
.wl-faq-cats__item { display: flex; align-items: center; gap: 6px; padding: clamp(6px, 0.52vw, 10px) 0; color: #000; font-size: clamp(14px, 0.83vw, 16px); font-weight: 600; white-space: nowrap; transition: color .2s; } /* Figma 类别为纯文本 16px 黑、无填充胶囊 */
.wl-faq-cats__item:hover { color: var(--wl-brand); }
.wl-faq-cats__item.is-active { color: var(--wl-brand); } /* 激活＝品牌蓝文字，去掉填充蓝底 */
.wl-faq-cats__count { font-size: clamp(14px, 0.83vw, 16px); color: var(--wl-ink-50); } /* Figma 计数同字号、50%黑 */
.wl-faq-cats__item.is-active .wl-faq-cats__count { color: var(--wl-brand); }
.wl-faq-main__intro { font-size: clamp(20px, 1.88vw, 36px); font-weight: 600; line-height: 1.4; margin: 0 0 clamp(20px, 2.08vw, 40px); }
.wl-faq-group { scroll-margin-top: clamp(80px, 8vw, 120px); }
.wl-faq-group + .wl-faq-group { margin-top: var(--wl-faq-group-gap); }
.wl-faq-group__title { display: flex; align-items: center; gap: 12px; font-size: clamp(20px, 1.56vw, 30px); font-weight: 600; margin: 0 0 clamp(12px, 1vw, 20px); } /* Figma 分类标题 30px、图标↔标题 12 */
.wl-faq-group__ic { width: clamp(26px, 1.93vw, 37px); height: clamp(26px, 1.93vw, 37px); object-fit: contain; flex: none; } /* Figma 分类图标 ~37x37 */
.wl-subpage--faq .wl-faq-a p { color: rgba(0, 0, 0, .5); } /* Figma FAQ 答案 rgba(0,0,0,.5) */
.wl-faq-group__empty { color: var(--wl-ink-50); font-size: 14px; padding: clamp(12px, 1vw, 20px) 0; border-top: 1px solid var(--wl-line); margin: 0; }

/* ============================================================================
 * 菌株详情页（自研/合作）— 特性 020，Figma 1832-5022 / 1832-5314
 * 全部以 .wl-subpage--sd 作用域承载；复用既有 .wl-subhero / .wl-evidence-card /
 * .wl-evidence-head / .wl-evidence-main / .wl-def-* / .wl-evidence-block /
 * .wl-avail-check 与令牌，仅新增 chip 大卡、证据等级白卡分栏、临床文献列表三组类
 * 及少量作用域覆盖；不改既有规则取值（strain-detail 0 回归）。
 * ========================================================================== */

/* — 作用域令牌覆盖：键列/标签列对齐 Figma 298；媒体大图比例 620×374 — */
.wl-subpage--sd { --wl-def-key-col: clamp(160px, 15.52vw, 298px); --wl-evidence-label-col: clamp(160px, 15.52vw, 298px); }
.wl-subpage--sd .wl-def-val { color: var(--wl-ink-50); }                 /* Figma 定义值 rgba(0,0,0,.5) */
.wl-subpage--sd .wl-evidence-main__media { aspect-ratio: 620 / 374; }    /* Figma 菌株大图 620×374 */
@media (min-width: 960px) {
  .wl-subpage--sd .wl-evidence-main { grid-template-columns: minmax(0, clamp(320px, 32.29vw, 620px)) 1fr; } /* 媒体 620 + 定义表 */
}

/* — 菌株库 chip 大卡（复用 .wl-chip-row 横向滚动容器）— */
.wl-subpage--sd .wl-sd-chip {
  flex: none;
  width: clamp(300px, 22.76vw, 437px);
  display: flex; align-items: center; gap: clamp(14px, 1.25vw, 24px);
  padding: clamp(16px, 1.25vw, 24px);
  background: rgba(0, 0, 0, .03);
  border-radius: var(--wl-radius-chip);
  color: var(--wl-ink);
}
.wl-subpage--sd .wl-sd-chip.is-active { background: var(--wl-gold-gradient); color: var(--wl-on-brand); }
.wl-subpage--sd .wl-sd-chip__media { width: clamp(96px, 7.81vw, 150px); aspect-ratio: 1 / 1; flex: none; border-radius: var(--wl-radius-md); overflow: hidden; }
.wl-subpage--sd .wl-sd-chip__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 0.42vw, 8px); }
.wl-subpage--sd .wl-sd-chip__name { font-weight: 600; font-size: 14px; line-height: var(--wl-leading-14); }
.wl-subpage--sd .wl-sd-chip__desc { font-size: 12px; color: var(--wl-ink-50); line-height: 1.33; } /* Figma 描述 12→16 */
.wl-subpage--sd .wl-sd-chip.is-active .wl-sd-chip__desc { color: var(--wl-on-brand-50); }

/* — 证据等级白卡（复用 .wl-evidence-block 标签左+内容；内部类型列 + 可用性列分栏）— */
.wl-subpage--sd .wl-sd-evidence-card {
  background: #fff; border-radius: var(--wl-radius-card-sm);
  padding: clamp(16px, 1.25vw, 24px);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(16px, 1.25vw, 24px); align-items: start;
}
.wl-subpage--sd .wl-sd-ev-types { display: flex; flex-direction: column; gap: clamp(10px, 0.83vw, 16px); }
.wl-subpage--sd .wl-sd-ev-types__head { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--wl-ink); }
.wl-subpage--sd .wl-sd-ev-type { position: relative; min-height: 25px; display: flex; align-items: center; padding-left: 21px; font-size: 14px; line-height: var(--wl-leading-14); color: var(--wl-ink-50); }
.wl-subpage--sd .wl-sd-ev-type::before { content: ""; position: absolute; left: 6px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: currentColor; }
/* 前缀点跟随当前文本色（健康预期功效 / 局限性；自研+合作，不动旧版 strain-detail） */
.wl-subpage--sd .wl-outcome-col__cn::before,
.wl-subpage--sd .wl-outcome-col__en::before,
.wl-subpage--sd .wl-limit-list li::before { background: currentColor; }
.wl-subpage--sd .wl-sd-ev-avail { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 0.83vw, 16px); }
.wl-subpage--sd .wl-sd-ev-avail__head { font-weight: 600; font-size: 14px; line-height: 20px; color: var(--wl-ink); }
.wl-subpage--sd .wl-sd-ev-avail .wl-avail-check { width: 25px; height: 25px; flex: none; } /* 固定 25px 正圆：与类型行固定 25px 对齐；勿用 min-height（会与 clamp 宽度冲突致竖椭圆变形） */

/* — 临床研究文献列表 — */
.wl-subpage--sd .wl-sd-refs { display: flex; flex-direction: column; margin-top: clamp(20px, 2vw, 32px); }
.wl-subpage--sd .wl-sd-ref { display: flex; align-items: flex-start; gap: clamp(16px, 1.25vw, 24px); padding: clamp(14px, 1.04vw, 20px) 0; border-bottom: .5px solid var(--wl-ink-30); }
.wl-subpage--sd .wl-sd-ref:last-child { border-bottom: none; }
.wl-subpage--sd .wl-sd-ref__icon { flex: none; width: 36px; height: 43px; display: flex; color: var(--wl-ink); }
.wl-subpage--sd .wl-sd-ref__icon svg { width: 100%; height: 100%; }
.wl-subpage--sd .wl-sd-ref__title { flex: 1; min-width: 0; margin: 0; font-size: 14px; line-height: 20px; color: var(--wl-ink); }
.wl-subpage--sd .wl-sd-ref__source { flex: none; width: clamp(120px, 15.52vw, 298px); font-size: 14px; line-height: var(--wl-leading-14); color: var(--wl-ink-50); }

/* — 合作页变体（Figma 1832-5314）：chip 当前株浅蓝（非金）、菌株大图 488×488 方形 — */
.wl-subpage--sd-coop .wl-sd-chip.is-active { background: var(--wl-chip-active-coop); color: var(--wl-ink); }
.wl-subpage--sd-coop .wl-sd-chip.is-active .wl-sd-chip__desc { color: var(--wl-ink-50); }
.wl-subpage--sd-coop .wl-evidence-main__media { aspect-ratio: 1 / 1; background: url(../images/ph-tech.jpg) center / cover no-repeat; } /* Figma 菌株大图 488×488 方形（蓝调占位） */
/* 菌株卡片图 + 菌株主图：撑满容器（允许变形、不裁剪、不留白）；覆盖上方 cover/默认平铺 */
.wl-subpage--sd .wl-sd-chip__media,
.wl-subpage--sd .wl-evidence-main__media { background-size: 100% 100%; background-repeat: no-repeat; }
@media (min-width: 960px) {
  .wl-subpage--sd-coop .wl-evidence-main { grid-template-columns: minmax(0, clamp(280px, 25.42vw, 488px)) 1fr; } /* 媒体 488 + 定义表 */
}

/* =====================================================================
   特性032：内页（新闻列表/详情 · 益生生活 · 加入我们 · 联系我们）公共组件
   - 全部公共样式（无页面级私有样式）；色彩取令牌（蓝＝--wl-brand）；
   - 四档断点 640/960/1280/1920（960 为桌面↔移动唯一硬切换）；
   - 图像位默认撑满容器（object-fit:fill / background-size:100% 100%，宪法 VIII）。
   ===================================================================== */

/* ---------- 通用·可见面包屑 .wl-crumb（T003，5 页共用） ---------- */
.wl-crumb { padding-block: clamp(16px, 1.25vw, 24px); }
.wl-crumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; line-height: var(--wl-leading-14); color: var(--wl-ink-50); }
.wl-crumb__link { color: var(--wl-ink-50); text-decoration: none; transition: color .2s; }
.wl-crumb__link:hover { color: var(--wl-brand); }
.wl-crumb__sep { color: var(--wl-ink-30); user-select: none; }
.wl-crumb__current { color: var(--wl-ink-80); }

/* 注：原“新闻列表·卡片网格 .wl-news-grid / .wl-news-card（T007）”重复定义已移除——
   该套用 __body/__img 结构无任何模板引用（news 页用 v1-news-item），却因同名把 brand-story
   的 .wl-news-card（透明卡/四列/322×200/标题24px）覆盖成白底卡/三列/16:10/20px，挡住内容。
   brand-story 卡片样式以本文件上方首套（约 .wl-news-grid / .wl-news-card 区块）为单一事实来源。 */

/* ---------- 通用·分批加载提示（T004 配套样式） ---------- */
.wl-loadmore-bar { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(32px, 2.92vw, 56px); }
.wl-loadmore-done { font-size: 14px; line-height: var(--wl-leading-14); color: var(--wl-ink-50); }

/* ---------- 新闻详情·富文本 .wl-richtext（T012） ---------- */
.wl-article { }
.wl-article__head { display: flex; flex-direction: column; gap: clamp(12px, 1.04vw, 20px); margin-bottom: clamp(24px, 2.08vw, 40px); padding-bottom: clamp(20px, 1.67vw, 32px); border-bottom: 1px solid var(--wl-line); }
.wl-article__date { font-size: 14px; line-height: var(--wl-leading-14); color: var(--wl-ink-50); }
.wl-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(24px, 2.08vw, 40px); list-style: none; padding: 0; }
.wl-article__tag { padding: 4px 12px; border-radius: var(--wl-radius-pill); background: var(--wl-panel-bg); font-size: 12px; color: var(--wl-ink-80); }
.wl-richtext { max-width: 900px; margin-inline: auto; color: var(--wl-ink-80); font-size: clamp(14px, 0.94vw, 16px); line-height: 1.9; }
.wl-richtext > * + * { margin-top: 1.2em; }
.wl-richtext h2, .wl-richtext h3, .wl-richtext h4 { color: var(--wl-ink); font-weight: 600; line-height: 1.4; margin-top: 1.6em; }
.wl-richtext h2 { font-size: clamp(20px, 1.46vw, 28px); }
.wl-richtext h3 { font-size: clamp(18px, 1.25vw, 24px); }
.wl-richtext img { width: 100%; height: auto; object-fit: fill; display: block; border-radius: var(--wl-radius-md); margin-block: 1.2em; } /* 配图撑满容器宽（宪法 VIII） */
.wl-richtext a { color: var(--wl-brand); text-decoration: underline; text-underline-offset: 3px; }
.wl-richtext ul, .wl-richtext ol { padding-left: 1.4em; }
.wl-richtext li + li { margin-top: .5em; }

/* ---------- 加入我们（T019）：Hero CTA / 公司介绍 / 价值观 / 职位 / 画廊 ---------- */
.wl-subpage--join .wl-subhero__copy { max-width: 880px; }
.wl-subhero__subtitle--rich { color: var(--wl-on-brand); margin-top: clamp(12px, 1.04vw, 20px); font-size: clamp(14px, 0.94vw, 16px); line-height: 1.7; }
.wl-subhero__cta { margin-top: clamp(20px, 1.67vw, 32px); }
/* 公司介绍·图文行 */
.wl-info-row { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 2.5vw, 48px); align-items: center; }
.wl-info-row + .wl-info-row { margin-top: clamp(40px, 3.33vw, 64px); }
@media (min-width: 960px) {
  .wl-info-row { grid-template-columns: 1fr 1fr; }
  .wl-info-row--media-left .wl-info-row__media { order: -1; }
}
.wl-info-row__media { border-radius: var(--wl-radius-xl); overflow: hidden; aspect-ratio: 16 / 10; background: var(--wl-panel-bg); }
.wl-info-row__media img { width: 100%; height: 100%; object-fit: fill; display: block; }
.wl-info-row__title { font-size: clamp(22px, 1.67vw, 32px); font-weight: 600; line-height: 1.3; color: var(--wl-ink); }
.wl-info-row__sub { margin-top: 8px; color: var(--wl-ink-50); }
.wl-info-row__desc { margin-top: clamp(12px, 1.04vw, 20px); color: var(--wl-ink-80); line-height: 1.8; }
.wl-info-stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 2.08vw, 40px); margin-top: clamp(20px, 1.67vw, 32px); }
.wl-info-stat__num { font-size: var(--wl-stat-num-size-md); font-weight: 600; color: var(--wl-brand); line-height: 1; }
.wl-info-stat__label { margin-top: 8px; font-size: 14px; color: var(--wl-ink-50); }
/* 价值观卡片网格 */
.wl-pursue-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wl-card-grid-gap); }
@media (min-width: 960px)  { .wl-pursue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wl-pursue-card { position: relative; display: flex; align-items: flex-end; min-height: clamp(160px, 14.58vw, 280px); padding: clamp(16px, 1.25vw, 24px); border-radius: var(--wl-radius-xl); overflow: hidden; background: var(--wl-brand); color: var(--wl-on-brand); }
.wl-pursue-card__bg { position: absolute; inset: 0; object-fit: fill; width: 100%; height: 100%; z-index: 0; }
.wl-pursue-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.45) 100%); z-index: 1; }
.wl-pursue-card__title { position: relative; z-index: 2; font-size: clamp(18px, 1.25vw, 24px); font-weight: 600; }
/* 职位区：城市 tab + 列表 */
.wl-jobs__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 2.08vw, 40px); }
.wl-jobs__tab { padding: 8px 20px; border: 1px solid var(--wl-line); border-radius: var(--wl-radius-pill); background: #fff; color: var(--wl-ink-80); font-size: 14px; cursor: pointer; transition: all .2s; }
.wl-jobs__tab:hover { border-color: var(--wl-brand); color: var(--wl-brand); }
.wl-jobs__tab.is-active { background: var(--wl-brand); border-color: var(--wl-brand); color: #fff; }
.wl-jobs__panel { display: none; flex-direction: column; gap: clamp(12px, 1.04vw, 16px); }
.wl-jobs__panel.is-active { display: flex; }
.wl-job { display: block; padding: clamp(20px, 1.67vw, 32px); border: 1px solid var(--wl-line); border-radius: var(--wl-radius-md); background: #fff; color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
a.wl-job:hover { border-color: var(--wl-brand); box-shadow: 0 8px 22px rgba(0,0,0,.06); }
.wl-job[hidden] { display: none; }
.wl-job__title { display: block; font-size: clamp(16px, 1.04vw, 20px); font-weight: 600; color: var(--wl-ink); }
.wl-job__meta { display: block; margin-top: 6px; font-size: 14px; color: var(--wl-ink-50); }
.wl-job__text { display: block; margin-top: clamp(10px, 0.83vw, 14px); font-size: 14px; line-height: 1.8; color: var(--wl-ink-80); }
a.wl-job .wl-job__title::after { content: " →"; color: var(--wl-brand); }
/* 企业画廊横滚 */
.wl-join-gallery { display: flex; gap: var(--wl-card-grid-gap); overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.wl-join-gallery__item { flex: none; width: clamp(220px, 26vw, 420px); aspect-ratio: 4 / 3; border-radius: var(--wl-radius-md); overflow: hidden; background: var(--wl-panel-bg); }
.wl-join-gallery__item img { width: 100%; height: 100%; object-fit: fill; display: block; }

/* ---------- 联系我们（T026）：联系卡 / 公司信息 / 反馈表单 ---------- */
.wl-contact-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--wl-card-grid-gap); }
@media (min-width: 640px) { .wl-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .wl-contact-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wl-contact-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: clamp(20px, 1.67vw, 32px); border-radius: var(--wl-radius-xl); background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.05); color: inherit; text-decoration: none; }
.wl-contact-card__icon { width: 48px; height: 48px; object-fit: fill; }
.wl-contact-card__qr { width: clamp(96px, 8vw, 128px); height: clamp(96px, 8vw, 128px); object-fit: fill; border-radius: var(--wl-radius-sm); }
.wl-contact-card__title { font-size: clamp(16px, 1.04vw, 18px); font-weight: 600; color: var(--wl-ink); }
.wl-contact-card__value { font-size: 14px; color: var(--wl-ink-50); word-break: break-all; }
.wl-contact-info { display: flex; flex-direction: column; gap: 8px; margin: clamp(24px, 2.08vw, 40px) 0 0; font-size: 14px; line-height: 1.8; color: var(--wl-ink-80); }
.wl-contact-info > div { display: flex; flex-wrap: wrap; gap: 6px; }
.wl-contact-info dt { color: var(--wl-ink-50); }
.wl-contact-info dt::after { content: "："; }
.wl-contact-info dd { margin: 0; }
.wl-contact-info a { color: var(--wl-brand); text-decoration: none; }
.wl-contact-info a:hover { text-decoration: underline; }
.wl-feedback { display: flex; flex-direction: column; gap: clamp(16px, 1.25vw, 20px); max-width: 640px; }
.wl-feedback__hint { font-size: 12px; color: var(--wl-ink-50); }
.wl-feedback .wl-field.is-error .wl-input,
.wl-feedback .wl-field.is-error .wl-textarea,
.wl-feedback .wl-field.is-error .wl-select { border-color: #d23; box-shadow: 0 0 0 3px rgba(221,51,51,.12); }
.wl-feedback__error { display: none; font-size: 12px; color: #d23; }
.wl-feedback .wl-field.is-error .wl-feedback__error { display: block; }
.wl-feedback__status { font-size: 14px; }
.wl-feedback__status.is-ok { color: var(--wl-brand); }
.wl-feedback__status.is-fail { color: #d23; }

/* ---------- 益生生活（T031）：四大模块纵向交替 + 空瓶回程计划 ---------- */
.wl-life-block { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 2.5vw, 48px); align-items: center; }
@media (min-width: 960px) {
  .wl-life-block { grid-template-columns: 1fr 1fr; }
  .wl-life-block--alt .wl-life-block__media { order: -1; }
}
.wl-life-block__media { border-radius: var(--wl-radius-2xl); overflow: hidden; aspect-ratio: 4 / 3; background: var(--wl-panel-bg); }
.wl-life-block__media img { width: 100%; height: 100%; object-fit: fill; display: block; }
.wl-life-block__sub { color: var(--wl-brand); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.wl-life-block__title { margin-top: 8px; font-size: clamp(24px, 2.08vw, 40px); font-weight: 600; line-height: 1.3; color: var(--wl-ink); }
.wl-life-block__desc { margin-top: clamp(12px, 1.04vw, 20px); color: var(--wl-ink-80); line-height: 1.9; }
.wl-life-bottle { border-radius: var(--wl-radius-2xl); background: var(--wl-brand); color: var(--wl-on-brand); padding: clamp(32px, 3.33vw, 64px); text-align: center; }
.wl-life-bottle__title { font-size: clamp(22px, 1.67vw, 32px); font-weight: 600; }
.wl-life-bottle__body { margin-top: clamp(20px, 1.67vw, 32px); }
.wl-life-bottle__body :is(.num, strong) { color: var(--wl-on-brand); font-weight: 700; }
/* 特性032 核对补遗 */
.wl-life-bottle__eyebrow { color: var(--wl-on-brand-50); font-size: 14px; font-weight: 600; letter-spacing: .04em; margin-bottom: 8px; }
.wl-info-stat__link { display: block; color: inherit; text-decoration: none; }
.wl-info-stat__link:hover .wl-info-stat__num { text-decoration: underline; }
.wl-pursue__title { margin-bottom: clamp(20px, 1.67vw, 32px); }
.wl-jobs__more { margin-top: clamp(24px, 2.08vw, 40px); text-align: center; }

/* =====================================================================
   特性033：防伪查询页（.wl-subpage--auth）专属版式
   - 复用 .wl-crumb / .wl-richtext / .wl-faq-* / .wl-subhero（公共件）
   - 四档断点 640/960/1280/1920；图片撑满；蓝＝--wl-brand
   ===================================================================== */

/* 01 声明区：品牌蓝整段 + 白字（对齐 v1 强调），图文两栏（≥960 文左图右；<960 堆叠） */
.wl-auth-statement { background: var(--wl-brand); color: var(--wl-on-brand); }
.wl-auth-statement .wl-h2 { color: var(--wl-on-brand); }
.wl-auth-statement .wl-richtext { color: rgba(255, 255, 255, .9); }
.wl-auth-statement .wl-richtext :is(h2, h3, h4, strong, a) { color: var(--wl-on-brand); }
.wl-auth-statement__grid { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 2.5vw, 48px); align-items: center; }
@media (min-width: 960px) { .wl-auth-statement__grid { grid-template-columns: 1.1fr 0.9fr; } }
.wl-auth-statement__media { border-radius: var(--wl-radius-xl); overflow: hidden; }
.wl-auth-statement__media img { width: 100%; height: auto; object-fit: fill; display: block; mix-blend-mode: screen; } /* 撑满（宪法 VIII）+ screen 混合（对齐 v1） */

/* 02 步骤区：两步并排（≥960），每步含徽标 + 说明 + 新/旧两组图 */
.wl-auth-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--wl-card-grid-gap); }
@media (min-width: 960px) { .wl-auth-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wl-auth-step { display: flex; flex-direction: column; gap: clamp(12px, 1.04vw, 20px); padding: clamp(20px, 1.67vw, 32px); background: #fff; border-radius: var(--wl-radius-xl); box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.wl-auth-steps__title { color: var(--wl-brand); margin-bottom: clamp(24px, 2.08vw, 40px); }
.wl-auth-step__badge { align-self: flex-start; padding: 4px 16px; border-radius: var(--wl-radius-pill); background: var(--wl-brand); color: var(--wl-on-brand); font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.wl-auth-step__text { font-size: clamp(15px, 1.04vw, 18px); line-height: 1.6; color: var(--wl-brand); font-weight: 600; } /* v1：步骤说明品牌蓝加粗 */
/* 步骤区脚注 + 底部分隔线（对齐 v1 蓝线） */
.wl-auth-steps__note { margin-top: clamp(20px, 1.67vw, 32px); padding-bottom: clamp(20px, 1.67vw, 32px); border-bottom: 2px solid var(--wl-brand); font-size: 13px; line-height: 1.6; color: var(--wl-ink-50); }
.wl-auth-step__media-row { display: flex; flex-wrap: wrap; gap: clamp(16px, 1.25vw, 24px); }
.wl-auth-step__media { flex: 1 1 0; min-width: 0; margin: 0; }
.wl-auth-step__media img { width: 100%; height: auto; object-fit: fill; display: block; border-radius: var(--wl-radius-md); }
.wl-auth-step__media figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--wl-ink-50); text-align: center; }

/* 03 结果示例 + 覆盖产品 */
/* 结果区：≥960 两栏（左 说明+示例图 / 右 覆盖产品图文），<960 堆叠 */
.wl-auth-result__grid { margin-top: clamp(20px, 1.67vw, 40px); display: grid; grid-template-columns: 1fr; gap: clamp(24px, 2.5vw, 48px); }
@media (min-width: 960px) { .wl-auth-result__grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.wl-auth-result__desc { color: var(--wl-ink-80); line-height: 1.9; }
.wl-auth-result__media { margin-top: clamp(16px, 1.67vw, 32px); border-radius: var(--wl-radius-xl); overflow: hidden; }
.wl-auth-result__media img { width: 100%; height: auto; object-fit: fill; display: block; }
/* 覆盖产品名（含 ™ / 长名）四档不溢出 */
.wl-auth-result__rich, .wl-auth-result__rich :is(p, li, td) { overflow-wrap: anywhere; word-break: break-word; }

/* 04 问答标题间距 */
.wl-auth-faq__title { margin-bottom: clamp(20px, 1.67vw, 32px); }