/* =====================================================================
 * 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，完整还原设计字重层级。 */
/* 特性043：字体走在线 CDN(./)——
 * 源链 local → CDN woff2 → CDN ttf → 本地 ttf,前源失败(含跨域拦截)自动落后源,本地文件保留兜底 */
@font-face {
  font-family: "MiSans";
  font-weight: 300;
  font-display: swap;
  src: local("MiSans Light"), url("./MiSans-Light.woff2") format("woff2"), url("./MiSans-Light.ttf") format("truetype"), url("MiSans-Light.ttf") format("truetype");
}

@font-face {
  font-family: "MiSans";
  font-weight: 400;
  font-display: swap;
  src: local("MiSans Regular"), url("./MiSans-Regular.woff2") format("woff2"), url("./MiSans-Regular.ttf") format("truetype"), url("MiSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "MiSans";
  font-weight: 500;
  font-display: swap;
  src: local("MiSans Medium"), url("./MiSans-Medium.woff2") format("woff2"), url("./MiSans-Medium.ttf") format("truetype"), url("MiSans-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "MiSans";
  font-weight: 600;
  font-display: swap;
  src: local("MiSans Demibold"), url("./MiSans-Demibold.woff2") format("woff2"), url("./MiSans-Demibold.ttf") format("truetype"), url("MiSans-Demibold.ttf") format("truetype");
}

@font-face {
  font-family: "MiSans";
  font-weight: 700;
  font-display: swap;
  src: local("MiSans Semibold"), url("./MiSans-Semibold.woff2") format("woff2"), url("./MiSans-Semibold.ttf") format("truetype"), 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-subhero-ar-m: 5 / 4;
  /* 特性042：子页 Hero 移动（<960）宽高比（375宽→300高，锚改造前 clamp 地板不跳变）。同首页 --wl-hero-ar-m 模式，按 H5 设计可单令牌调整 */
  --wl-v1banner-ar-m: 4 / 3;
  /* 特性042：v1 banner（news/新闻详情/联系/益生生活/加入）移动宽高比（375→281，锚原 280 地板）。消费在 inner-v1.css */
  --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--grow {
  min-height: 0;
}

/* grow 页脚：高度跟随 .wl-footer__inner 内容（覆盖 664px 基准尾栏，仅 grow 页使用） */
.wl-footer--grow .wl-footer__inner {
  max-width: 1230px;
  padding-bottom: 52.8px;
}

/* grow 页脚：inner 最大宽度 1230px（覆盖 .wl-container 的 1392，双类特异性优先） */
.wl-footer__inner {
  width: 100%;
  /* min-height: clamp(361px, 25.05vw, 481px); */
  /* 内容整体 1920 基准 481px，钳制约 75% 最小值 */
  display: flex;
  flex-direction: column;
  padding-top: 33px;
  /* justify-content: center; */
  /* 第二十三轮：恢复整体垂直居中、上下等留白（取代 008 FR-022 顶部锚定+padding-top 双重叠加） */
}

.wl-footer__divider {
  border: 1px solid #FFFFFF;
  margin: 48px 0 8px;
}

/* grow 页脚：链接列下方 1px 白色分割线，上边距 48 下边距 8（设计稿） */
.wl-footer__copyright {
  font-family: MiSans;
  font-weight: 330;
  font-style: normal;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  color: #FFFFFF;
}

/* grow 页脚：版权/合规及链接文本 15px/330/白（设计稿 fontSize 15 fontWeight 330） */
.wl-footer__copyright--right {
  text-align: right;
}

/* grow 页脚：右对齐修饰类，仅版权/合规行使用 */
.wl-footer__logo {
  width: 185px;
  height: 130px;
  margin-bottom: 30px;
}

/* grow 页脚：logo 图片占位 185×130，下间距 30（设计稿 Logo 区域） */
.wl-footer__slogan {
  font-family: MiSans;
  font-weight: 380;
  font-size: 20px;
  line-height: 1.21;
  letter-spacing: 0%;
  color: #FFFFFF;
}

/* grow 页脚：品牌口号 20px/380/白（设计稿 fontSize 20 fontWeight 380） */
.wl-footer__links {
  display: flex;
  flex-direction: column;
}

/* grow 页脚：链接列容器，垂直排列；标题/链接间距由相邻选择器控制 */
.wl-footer__links .wl-footer__slogan {
  margin-bottom: 30.25px;
}

/* grow 页脚：列标题↔首个链接 37.5px */
.wl-footer__links .wl-footer__copyright+.wl-footer__copyright {
  /* margin-top: clamp(6px, 0.63vw, 12px); */
}

/* grow 页脚：链接↔链接 6-12px */
/* 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: 960px) {
  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: -109px;
  /* 右锚定、向左展开 + 镜像气泡：使 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-visible .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: 960px) {

  .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: 960px) {
  #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: 960px) {
  #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: 960px) {

  .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: 960px) {
  .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: clamp(16px, 1.25vw, 24px);
  /* 特性041 增补：随分辨率 16–24（24@1920，≤1280 档取 16；原固定 24px） */
  border-radius: 12px;
  padding: 0 6px;
  /* 特性041：纵向归零，垂直居中交由固定高度 + inline-flex */
  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: 960px) {
  .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: 960px) {

  .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);
  overflow: hidden;
  /* 035 折叠三点：①minmax(0,…) 显式把轨道最小强制为 0（iOS Safari 等会把 0fr 的 auto 最小值当 min-content 致折不动）；②去掉 transition——Chromium 对 grid-template-rows 的 fr 动画有 flaky bug：内容较高时折叠动画结束后轨道停在展开高度、不回 0（多行成分/答案折不动）；③overflow:hidden 裁掉内层 >div 的 padding（.wl-pd-buy__acc 给内层加了 padding-bottom，0 轨道下内层会撑出容器、露出一条）。即时收拢、跨浏览器可靠、完全无残留 */
}

.wl-faq-item.is-open .wl-faq-a {
  grid-template-rows: minmax(0, 1fr);
}

.wl-faq-a>div {
  overflow: hidden;
  min-height: 0;
}

.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: 960px) {
  .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: 960px) {
  .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 */
  }
}

/* 顶部组：标题 + 标签（距顶 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）
 * 特性041：限 ≥960——<960 为 2×2 移动版式（宪法IV），增高会侵入第二行（FR-004 不重叠） */
@media (hover: hover) and (min-width: 960px) {

  .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;
  }
}

@media (max-width: 960px) {

  /* 特性041 FR-001/002：移动端分页轨道 2×2 网格（取代特性010 轮次10 的每屏 1 张）。
   * 列向流动 + dense 回填，nth-child 锁行（每组前 2 张第 1 行、后 2 张第 2 行）→ 先行后列；
   * 组=2 列，translateX 分页与桌面共用；选择器 (0,2,0) 胜过后载 tailwind .flex；
   * 本块置于产品卡基础规则之后（同特异性靠源序覆盖）。 */
  [data-wl-pager] [data-wl-pager-track] {
    display: grid;
    grid-auto-flow: column dense;
    grid-template-rows: repeat(2, 1fr);
    /* 1fr：两行取最高卡等高，整轨卡片高度统一 */
    grid-auto-columns: calc((100% - var(--wl-pcard-gap)) / 2);
    width: 100%;
  }

  [data-wl-pager] [data-wl-pager-track]>article:nth-child(4n+1),
  [data-wl-pager] [data-wl-pager-track]>article:nth-child(4n+2) {
    grid-row: 1;
  }

  [data-wl-pager] [data-wl-pager-track]>article:nth-child(4n+3),
  [data-wl-pager] [data-wl-pager-track]>article:nth-child(4n+4) {
    grid-row: 2;
  }

  /* 特性041 FR-004：半宽卡等比紧凑化（澄清确认：整宽版式按半宽比例缩、文字取可读下限；
   * 375 基准锚定、320–959 带内 vw 流式，上限≈整宽版现值不反超）。
   * 2026-07-09 用户反馈修订：标签多行时与产品图重叠 → 移动端改流式布局（弃绝对锚点），
   * 图↔标签 与 图↔描述 用同一间距值（等距），按钮 margin-top:auto 贴底吸收弹性空间。 */
  [data-wl-pager-track] .wl-card-glass--product {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    /* 高度随内容，行高由轨道 1fr 对齐 */
    min-height: clamp(280px, 74.67vw, 380px);
    padding-bottom: clamp(12px, 3.2vw, 20px);
    /* 原按钮距底锚点转为卡底内边距 */
  }

  .wl-card-glass--product .wl-pcard-head {
    position: static;
    width: 100%;
    padding-top: clamp(14px, 3.73vw, 22px);
    /* 原距顶锚点转为内边距 */
    gap: clamp(10px, 2.67vw, 16px);
    padding-inline: clamp(10px, 2.67vw, 16px);
  }

  .wl-card-glass--product.is-title-wrap .wl-pcard-head {
    gap: clamp(6px, 1.6vw, 10px);
  }

  .wl-card-glass--product .wl-title {
    font-size: clamp(15px, 4vw, 20px);
    max-height: clamp(38px, 10.14vw, 51px);
    /* 2 行 × 行高比 1.27 */
  }

  .wl-card-glass--product .wl-pcard-tags .wl-tag {
    padding: 0 5px;
    /* 纵向交由固定高度+flex 居中（.wl-card-glass .wl-tag 高度 16–24 响应式） */
    font-size: clamp(10px, 2.67vw, 12px);
  }

  .wl-card-glass--product .wl-pcard-img,
  .wl-card-glass--product img:not(.wl-tag img) {
    position: static;
    transform: none;
    margin: clamp(14px, 4.27vw, 24px) auto 0;
    /* 图↔标签间距 G（与图↔描述等值） */
    width: clamp(56px, 14.93vw, 76px);
    height: clamp(88px, 23.47vw, 120px);
  }

  .wl-card-glass--product .wl-pcard-desc {
    position: static;
    width: 100%;
    margin-top: clamp(14px, 4.27vw, 24px);
    /* 图↔描述间距 = G（用户等式） */
    margin-bottom: clamp(8px, 2.13vw, 12px);
    /* 描述↔按钮最小间隔 */
    padding-inline: clamp(10px, 2.67vw, 16px);
    font-size: clamp(11px, 2.93vw, 14px);
  }

  .wl-card-glass--product .wl-pcard-btn {
    position: static;
    transform: none;
    margin-top: auto;
    /* 行内等高卡的富余空间收敛于此，按钮贴底对齐 */
    height: clamp(28px, 7.47vw, 34px);
    padding: 0 clamp(10px, 2.67vw, 14px);
    font-size: clamp(11px, 2.93vw, 13px);
  }
}

/* 栏目标题/按钮定位（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: 960px) {
  .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: 960px) {

  .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: 960px) {
  .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: 960px) {

  /* ① 「了解更多」按钮 + 描述文字左对齐（取代 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: 960px) {
  .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: fill;
  display: block;
}

/* 039：填充语义（撑满/允许变形/不裁剪不留白，原则VIII 默认） */
.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);
}

/* ============================================================
 * 特性042：模板页 banner 移动端专用图 + 移动固定宽高比
 * 图源：桌面=栏目 logo，移动=栏目 logoH5（后台栏目现成字段，线上 wylen_h5 同款取法）；
 *       product-detail 系列条：桌面=首条 article 内容 prop1，移动=同内容 prop3（002 映射 prop3=移动）。
 * 机制：模板行内只注入变量 --wl-banner-bg / --wl-banner-bg-m，由本块按断点选图
 *       （行内直写 background-image 特异性压死媒体查询，故改变量注入；
 *       历史已发布页的行内直写仍胜出生效，桌面无回归、待重发布后获得移动图能力）。
 * 几何：子页 Hero <960 改固定宽高比（--wl-subhero-ar-m，同首页 --wl-hero-ar-m 模式），
 *       出图按比例即无变形无裁剪；系列条几何不动（带高与卡片行耦合，仍轻度拉伸，选耐拉伸底纹）。
 * 本块置于文件末：同特异性后置胜出，覆盖组件段 .wl-subpage .wl-subhero__bg 的 ph-tech 直写底图。
 * ============================================================ */
.wl-subpage .wl-subhero__bg {
  background-image: var(--wl-banner-bg, url(../images/ph-tech.jpg));
}

.wl-pd-series-band {
  background-image: var(--wl-banner-bg, none);
}

@media (max-width: 960px) {
  .wl-subpage .wl-subhero {
    aspect-ratio: var(--wl-subhero-ar-m);
    /* 375宽→300高，锚改造前 min-height 地板，视觉不跳变 */
    min-height: 0;
  }

  .wl-subpage .wl-subhero__bg {
    background-image: var(--wl-banner-bg-m, var(--wl-banner-bg, url(../images/ph-tech.jpg)));
  }

  .wl-pd-series-band {
    background-image: var(--wl-banner-bg-m, var(--wl-banner-bg, none));
  }
}

/* ===== Tailwind 工具类（自 css/tailwind.css 并入） ===== */
*,
:after,
:before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style:
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style:
}

/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
*,
:after,
:before {
  box-sizing: border-box;
  border: 0 solid #e5e7eb
}

:after,
:before {
  --tw-content: ""
}

:host,
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: MiSans, PingFang SC, -apple-system, BlinkMacSystemFont, Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent
}

body {
  margin: 0;
  line-height: inherit
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit
}

a {
  color: inherit;
  text-decoration: inherit
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
pre,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -.25em
}

sup {
  top: -.5em
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0
}

button,
select {
  text-transform: none
}

button,
input:where([type=button]),
input:where([type=reset]),
input:where([type=submit]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none
}

:-moz-focusring {
  outline: auto
}

:-moz-ui-invalid {
  box-shadow: none
}

progress {
  vertical-align: baseline
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

summary {
  display: list-item
}

blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin: 0
}

fieldset {
  margin: 0
}

fieldset,
legend {
  padding: 0
}

menu,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0
}

dialog {
  padding: 0
}

textarea {
  resize: vertical
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af
}

[role=button],
button {
  cursor: pointer
}

:disabled {
  cursor: default
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
  display: block;
  vertical-align: middle
}

img,
video {
  max-width: 100%;
  height: auto
}

[hidden]:where(:not([hidden=until-found])) {
  display: none
}

.pointer-events-none {
  pointer-events: none
}

.absolute {
  position: absolute
}

.relative {
  position: relative
}

.inset-0 {
  inset: 0
}

.inset-x-0 {
  left: 0;
  right: 0
}

.-left-40 {
  left: -10rem
}

.-right-32 {
  right: -8rem
}

.bottom-0 {
  bottom: 0
}

.top-0 {
  top: 0
}

.top-1\/3 {
  top: 33.333333%
}

.order-first {
  order: -9999
}

.mx-2 {
  margin-left: .5rem;
  margin-right: .5rem
}

.mx-auto {
  margin-left: auto;
  margin-right: auto
}

.mt-1 {
  margin-top: .25rem
}

.mt-10 {
  margin-top: 2.5rem
}

.mt-12 {
  margin-top: 3rem
}

.mt-2 {
  margin-top: .5rem
}

.mt-3 {
  margin-top: .75rem
}

.mt-4 {
  margin-top: 1rem
}

.mt-5 {
  margin-top: 1.25rem
}

.mt-6 {
  margin-top: 1.5rem
}

.mt-7 {
  margin-top: 1.75rem
}

.mt-8 {
  margin-top: 2rem
}

.inline-block {
  display: inline-block
}

.flex {
  display: flex
}

.grid {
  display: grid
}

.hidden {
  display: none
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3
}

.aspect-square {
  aspect-ratio: 1/1
}

.h-40 {
  height: 10rem
}

.h-\[420px\] {
  height: 420px
}

.min-h-\[52px\] {
  min-height: 52px
}

.min-h-\[inherit\] {
  min-height: inherit
}

.w-72 {
  width: 18rem
}

.w-\[260px\] {
  width: 260px
}

.w-\[420px\] {
  width: 420px
}

.w-auto {
  width: auto
}

.w-full {
  width: 100%
}

.w-max {
  width: -moz-max-content;
  width: max-content
}

.max-w-3xl {
  max-width: 48rem
}

.max-w-md {
  max-width: 28rem
}

.max-w-xl {
  max-width: 36rem
}

.flex-none {
  flex: none
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.flex-col {
  flex-direction: column
}

.flex-wrap {
  flex-wrap: wrap
}

.content-center {
  align-content: center
}

.items-start {
  align-items: flex-start
}

.items-center {
  align-items: center
}

.justify-center {
  justify-content: center
}

.justify-between {
  justify-content: space-between
}

.gap-1 {
  gap: .25rem
}

.gap-10 {
  gap: 2.5rem
}

.gap-2 {
  gap: .5rem
}

.gap-3 {
  gap: .75rem
}

.gap-4 {
  gap: 1rem
}

.gap-5 {
  gap: 1.25rem
}

.gap-6 {
  gap: 1.5rem
}

.gap-8 {
  gap: 2rem
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
  column-gap: 1.5rem
}

.gap-y-10 {
  row-gap: 2.5rem
}

.space-y-1>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(.25rem*(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(.25rem*var(--tw-space-y-reverse))
}

.overflow-hidden {
  overflow: hidden
}

.rounded-2xl {
  border-radius: 36px
}

.rounded-\[28px\] {
  border-radius: 28px
}

.rounded-full {
  border-radius: 9999px
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px
}

.border-t {
  border-top-width: 1px
}

.border-dashed {
  border-style: dashed
}

.border-\[color\:var\(--wl-line\)\] {
  border-color: var(--wl-line)
}

.border-white\/30 {
  border-color: hsla(0, 0%, 100%, .3)
}

.border-white\/40 {
  border-color: hsla(0, 0%, 100%, .4)
}

.bg-brand {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 225/var(--tw-bg-opacity, 1))
}

.bg-brand-orange {
  --tw-bg-opacity: 1;
  background-color: rgb(255 78 0/var(--tw-bg-opacity, 1))
}

.bg-canvas {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252/var(--tw-bg-opacity, 1))
}

.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.object-contain {
  -o-object-fit: contain;
  object-fit: contain
}

.object-cover {
  -o-object-fit: cover;
  object-fit: cover
}

.p-5 {
  padding: 1.25rem
}

.p-6 {
  padding: 1.5rem
}

.p-8 {
  padding: 2rem
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem
}

.pb-16 {
  padding-bottom: 4rem
}

.pt-28 {
  padding-top: 7rem
}

.text-center {
  text-align: center
}

.align-super {
  vertical-align: super
}

.text-body {
  font-size: 14px;
  line-height: 1.71
}

.text-caption {
  font-size: 12px;
  line-height: 1.5
}

.text-lead {
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -.02em
}

.text-stat {
  font-size: 48px;
  line-height: 1
}

.text-subtitle {
  font-size: 22px;
  line-height: 1.4
}

.text-title {
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -.015em
}

.font-light {
  font-weight: 300
}

.font-medium {
  font-weight: 500
}

.font-normal {
  font-weight: 400
}

.font-semibold {
  font-weight: 600
}

.leading-loose {
  line-height: 2
}

.leading-none {
  line-height: 1
}

.leading-relaxed {
  line-height: 1.625
}

.text-brand {
  --tw-text-opacity: 1;
  color: rgb(0 0 225/var(--tw-text-opacity, 1))
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(0 0 0/var(--tw-text-opacity, 1))
}

.text-ink-50 {
  color: rgba(0, 0, 0, .5)
}

.text-ink-80 {
  color: rgba(0, 0, 0, .8)
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.text-white\/50 {
  color: hsla(0, 0%, 100%, .5)
}

.text-white\/75 {
  color: hsla(0, 0%, 100%, .75)
}

.text-white\/80 {
  color: hsla(0, 0%, 100%, .8)
}

.text-white\/85 {
  color: hsla(0, 0%, 100%, .85)
}

.opacity-40 {
  opacity: .4
}

.opacity-50 {
  opacity: .5
}

.shadow-card {
  --tw-shadow: 0 12px 40px rgba(0, 0, 32, .08);
  --tw-shadow-colored: 0 12px 40px var(--tw-shadow-color)
}

.shadow-card,
.shadow-soft {
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-soft {
  --tw-shadow: 0 8px 24px rgba(0, 0, 32, .06);
  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color)
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  transition-duration: .15s
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.hover\:text-brand:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 225/var(--tw-text-opacity, 1))
}

.hover\:text-white\/70:hover {
  color: hsla(0, 0%, 100%, .7)
}

.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:text-brand {
  --tw-text-opacity: 1;
  color: rgb(0 0 225/var(--tw-text-opacity, 1))
}

@media (min-width:640px) {
  .sm\:w-\[300px\] {
    width: 300px
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media (min-width:768px) {
  .md\:order-none {
    order: 0
  }

  .md\:flex {
    display: flex
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .md\:flex-row {
    flex-direction: row
  }

  .md\:items-end {
    align-items: flex-end
  }

  .md\:items-center {
    align-items: center
  }

  .md\:justify-between {
    justify-content: space-between
  }

  .md\:p-12 {
    padding: 3rem
  }

  .md\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem
  }

  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem
  }

  .md\:pt-24 {
    padding-top: 6rem
  }
}

@media (min-width:1024px) {
  .lg\:col-span-1 {
    grid-column: span 1/span 1
  }

  .lg\:col-span-2 {
    grid-column: span 2/span 2
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr))
  }

  .lg\:items-center {
    align-items: center
  }

  .lg\:gap-12 {
    gap: 3rem
  }

  .lg\:col-start-1 {
    grid-column-start: 1
  }

  .lg\:col-start-3 {
    grid-column-start: 3
  }

  .lg\:grid-cols-\[215px_1fr_689px\] {
    grid-template-columns: 215px 1fr 689px
  }

  .lg\:p-14 {
    padding: 3.5rem
  }
}

/* ===== grow 页面样式（自 static_html/grow.html <style> 迁移） ===== */

/* grow 品牌色覆盖 */
:root {
  --grow-brand: #FF4E00;
  --grow-brand-hover: #E64600;
  --grow-bg: #F7F5F1;
  --grow-beige: #F7EDDA;
  --grow-ink: #4B1F0B;
  --grow-ink-light: rgba(75, 31, 11, 0.7);
  --grow-white: #FFFFFF;
  --grow-shadow: rgba(229, 176, 118, 0.25);
}

html,
body {
  font-family: MiSans, PingFang SC, -apple-system, BlinkMacSystemFont, Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
  background: var(--grow-bg);
  color: var(--grow-ink);
}

/* 覆盖 header 品牌色 */
.wl-header.is-grow {
  background: rgba(247, 245, 241, 0.95);
  backdrop-filter: blur(10px);
}

.wl-header.is-grow .wl-nav-link {
  color: var(--grow-ink);
}

.wl-header.is-grow .wl-nav-link:hover {
  color: var(--grow-brand);
}

.wl-header.is-grow .wl-logo__img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(11%) saturate(3607%) hue-rotate(346deg) brightness(94%) contrast(94%);
}

/* ===== Hero ===== */
.grow-hero {
  position: relative;
  height: 939px;
  background: var(--grow-brand);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grow-hero__mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.grow-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: rotate(-1.57deg);
  opacity: 0.85;
}

.grow-hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  padding: 0 24px;
}

.grow-hero__title {
  font-size: 40px;
  font-weight: 450;
  letter-spacing: 0;
  line-height: 1.33;
  color: #FFFFFF;
  margin-bottom: 16px;
}

.grow-hero__subtitle {
  font-size: 40px;
  font-weight: 450;
  letter-spacing: -2px;
  line-height: 1.33;
  color: var(--grow-ink);
}

/* ===== 导航栏 ===== */
.grow-nav {
  position: fixed;
  top: 21px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1388px;
  /* height: 124.18px; */
  border-radius: 82px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease;
  /* box-shadow:
    0px 6px 24px rgba(0, 0, 0, 0.2),
    inset 0 0 8px -5px #ffffff; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding: 0 32.99px; */
  z-index: 50;
  box-sizing: border-box;
  /* position: relative; */
  overflow: hidden;
  /* padding-top: 17.03px; */
  /* padding-bottom: 30.79px; */
  height: 86.172px;
}

.nav-img{
  position: absolute;
  width: 76px;
  left: 38px;
  top: 16px;
}

.grow-nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.grow-nav::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 82px;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.65) 80%, transparent 98%) top left,
    linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.65) 60%, transparent 80%) top left,
    linear-gradient(to left, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.55) 80%, transparent 98%) bottom right,
    linear-gradient(to top, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.55) 60%, transparent 80%) bottom right;
  background-size: 1000px 0.35px, 0.35px 48px, 1000px 0.35px, 0.35px 48px;
  background-repeat: no-repeat;
  box-shadow:
    inset 0.35px 0.35px 0 0 rgba(255, 255, 255, 0.6),
    inset -0.35px -0.35px 0 0 rgba(255, 255, 255, 0.5);
  mask-image:
    linear-gradient(135deg, white 0%, white 48%, transparent 56%),
    linear-gradient(-45deg, white 0%, white 48%, transparent 56%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: top left, bottom right;
  mask-composite: add;
  -webkit-mask-image:
    linear-gradient(135deg, white 0%, white 48%, transparent 56%),
    linear-gradient(-45deg, white 0%, white 48%, transparent 56%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top left, bottom right;
  -webkit-mask-composite: source-over;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.grow-nav.is-scrolling {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.grow-nav.is-scrolling::before,
.grow-nav.is-scrolling::after {
  opacity: 1;
}

.grow-nav__logo {
  display: flex;
  align-items: center;
  gap: 69.54px;
}

.grow-nav__logo img {
  width: 109px;
  height: 76.36px;
  flex-shrink: 0;
  object-fit: contain;
}

.grow-nav__menu {
  display: flex;
  align-items: center;
  gap: 28px;
  white-space: nowrap;
  /* transform: translateY(10.38px); */
  padding-left: 216.54px;
}

.grow-nav__link {
  font-family: MiSans;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  letter-spacing: 0%;
  color: #4B1F0B;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
  transform: translateY(3px);
}

.grow-nav__link:hover,
.grow-nav__link.is-active {
  color: #FF4E00;
  border-bottom-color: #FF4E00;
}

.grow-nav__cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 136.5px;
  height: 43.09px;
  border-radius: 43px;
  padding: 12px;
  gap: 10px;
  background: #FF4E00;
  color: #FFFFFF;
  font-family: MiSans;
  font-weight: 500;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: 0%;
  text-decoration: none;
  white-space: nowrap;
}

.grow-nav__right {
  display: flex;
  align-items: center;
  gap: 12px;
  /* transform: translateY(6.88px); */
  padding-right: 32.99px;
}

.grow-nav__burger {
  display: none;
}

/* ===== 轮播图 ===== */
.grow-carousel {
  position: relative;
  z-index: 3;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 100vh;
  margin-top: 0;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
}

@media (max-width: 960px) {
  .grow-carousel {
    width: 100%;
    margin-left: 0;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 0 0 24px 24px;
  }
  .grow-carousel__content {
    padding: 60% 20px 0;
  }
  .grow-carousel__title {
    font-size: 24px;
  }
  .grow-carousel__subtitle {
    font-size: 14px;
    margin-top: 12px;
    margin-bottom: 20px;
  }
  .grow-carousel__slide {
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #1A4B8C;
  }
}

.grow-carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
}

.grow-carousel__slide {
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

.grow-carousel__content {
  position: relative;
  z-index: 2;
  max-width: 1338px;
  margin: 0 auto;
  padding: 306px 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.grow-carousel__title {
  font-family: MiSans;
  font-weight: 600;
  font-size: 40px;
  line-height: 48.4px;
  letter-spacing: 0%;
  color: #FFFFFF;
}

.grow-carousel__subtitle {
  font-family: MiSans;
  font-weight: 600;
  font-size: 20px;
  line-height: 31.4px;
  letter-spacing: 0%;
  color: #FFFFFF;
  margin-top: 13.62px;
  margin-bottom: 67.35px;
}

.grow-carousel__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: MiSans;
  font-weight: 500;
  font-size: 16px;
  line-height: calc(16px * 1.21);
  letter-spacing: 0%;
  color: #FFFFFF;
  /* text-decoration: underline; */
  /* text-decoration-style: solid; */
  /* text-decoration-offset: 0%; */
  /* text-decoration-thickness: 0%; */
  /* text-decoration-skip-ink: auto; */
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

.grow-carousel__link:hover .grow-more-cta__arrow {
  width: 16px;
  opacity: 1;
  transform: none;
  margin-left: 0;
}

.grow-carousel__dots {
  position: absolute;
  bottom: 39px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 12px;
}

.grow-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  border: 0.5px solid #FFFFFF;
  background: transparent;
}

.grow-carousel__dot.is-active {
  background: #FFFFFF;
  border-color: #FFFFFF;
}

/* ===== 围绕儿童成长需求 ===== */
.grow-solution {
  background-image: var(--wl-bg-image, none);
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 180px 0 80px;
  margin-top: -47px;
  position: relative;
  z-index: 2;
  padding-top: 124px;
  padding-bottom: 102px;
}

.grow-solution__inner {
  max-width: 1338px;
  margin: 0 auto;
  padding-inline: 24px;
}

.grow-solution__title {
  font-family: MiSans;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.21;
  letter-spacing: 0%;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 33px;
}

.grow-solution__slider {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  align-items: flex-start;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 30px 24px;
  margin-top: -30px;
  margin-bottom: -30px;
  cursor: grab;
  touch-action: pan-y;
  box-sizing: border-box;
}

.grow-solution__slider.is-dragging,
.grow-solution__slider.is-dragging .grow-solution__card {
  cursor: grabbing;
}

.grow-solution__slider::-webkit-scrollbar {
  display: none;
}

.grow-solution__card {
  --wl-pcard-h: 470px;
  flex: 0 0 361px;
  width: 361px;
  min-height: var(--wl-pcard-h);
  border-radius: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 29px;
  padding-bottom: 32px;
  position: relative;
  isolation: isolate;
  cursor: pointer;
  overflow: hidden;
  /* box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.2); */
  transition: margin-top 0.3s ease, margin-bottom 0.3s ease, box-shadow 0.3s ease;
  padding-bottom: 0px;
}

.grow-solution__card:first-child {
  margin-left: auto;
}

.grow-solution__card:last-child {
  margin-right: auto;
}

.grow-solution__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 48px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

.grow-solution__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 48px;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.6) 25%, transparent 35%) top left,
    linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.6) 50%, transparent 65%) top left,
    linear-gradient(to left, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.5) 25%, transparent 35%) bottom right,
    linear-gradient(to top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.5) 50%, transparent 65%) bottom right;
  background-size: 120px 0.5px, 0.5px 320px, 120px 0.5px, 0.5px 320px;
  background-repeat: no-repeat;
  box-shadow:
    inset 1px 1px 0 0 rgba(255, 255, 255, 0.6),
    inset -1px -1px 0 0 rgba(255, 255, 255, 0.5);
  mask-image:
    linear-gradient(135deg, white 0%, white 35%, transparent 48%),
    linear-gradient(-45deg, white 0%, white 35%, transparent 48%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: top left, bottom right;
  mask-composite: add;
  -webkit-mask-image:
    linear-gradient(135deg, white 0%, white 35%, transparent 48%),
    linear-gradient(-45deg, white 0%, white 35%, transparent 48%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top left, bottom right;
  -webkit-mask-composite: source-over;
}

.grow-solution__card:hover {
  margin-top: -22.8px;
  margin-bottom: -22.8px;
  /* box-shadow: 0 16px 48px rgba(255, 78, 0, 0.25); */
  z-index: 2;
}

.grow-solution__card:hover .grow-solution__more {
  background: #FF4E00;
  color: #ffffff;
}

.grow-solution__card:hover .grow-solution__more::before,
.grow-solution__card:hover .grow-solution__more::after {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .grow-solution__card,
  .grow-solution__card-img {
    transition: none;
  }
}

.grow-solution__card-title {
  font-family: MiSans;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.21;
  letter-spacing: -5%;
  text-align: center;
  vertical-align: middle;
  color: #FFFFFF;
}

.grow-solution__card-subtitle {
  font-family: MiSans;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.21;
  letter-spacing: -5%;
  text-align: center;
  vertical-align: middle;
  color: #FFFFFF;
  margin-bottom: 12px;
  margin-top: 6px;
}

.grow-solution__card-img {
  width: 139px;
  height: 228px;
  overflow: visible;
  transition: width 0.3s ease, height 0.3s ease;
}

.grow-solution__card-img img {
  width: 100%;
  height: 100%;
}

.grow-solution__card:hover .grow-solution__card-img {
  width: 166.8px;
  height: 273.6px;
}

.grow-solution__tags {
  display: flex;
  justify-content: center;
  gap: 3.11px;
  margin-top: 31px;
  margin-bottom: 32px;
}

.grow-solution__tag {
  min-width: 77.67px;
  min-height: 15.53px;
  border-radius: 200px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: MiSans;
  font-weight: 500;
  font-size: 10px;
  line-height: 1.21;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #FFFFFF;
  padding-left: 6px;
  padding-right: 6px;
}

.grow-solution__more {
  height: 28px;
  border-radius: 43px;
  padding: 12px 16px;
  gap: 6px;
  overflow: hidden;
  /* box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.2); */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: MiSans;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.21;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  color: #FF4E00;
  text-decoration: none;
  white-space: nowrap;
  margin-bottom: 36px;
  position: relative;
  isolation: isolate;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, backdrop-filter 0.2s ease;
}

.grow-solution__more::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 43px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.grow-solution__more::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 43px;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.65) 80%, transparent 98%) top left,
    linear-gradient(to bottom, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.65) 60%, transparent 80%) top left,
    linear-gradient(to left, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.55) 80%, transparent 98%) bottom right,
    linear-gradient(to top, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.55) 60%, transparent 80%) bottom right;
  background-size: 1000px 0.35px, 0.35px 24px, 1000px 0.35px, 0.35px 24px;
  background-repeat: no-repeat;
  box-shadow:
    inset 0.35px 0.35px 0 0 rgba(255, 255, 255, 0.6),
    inset -0.35px -0.35px 0 0 rgba(255, 255, 255, 0.5);
  mask-image:
    linear-gradient(135deg, white 0%, white 48%, transparent 56%),
    linear-gradient(-45deg, white 0%, white 48%, transparent 56%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: top left, bottom right;
  mask-composite: add;
  -webkit-mask-image:
    linear-gradient(135deg, white 0%, white 48%, transparent 56%),
    linear-gradient(-45deg, white 0%, white 48%, transparent 56%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: top left, bottom right;
  -webkit-mask-composite: source-over;
  transition: opacity 0.2s ease;
}

.grow-solution__more:hover {
  background: rgba(255, 78, 0, 0.15);
  /* box-shadow: 0 8px 22px rgba(255, 78, 0, 0.28); */
}

.grow-solution__more-arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 0;
  margin-left: -6px;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-4px);
  color: currentColor;
  transition: width 0.25s ease, opacity 0.2s ease, transform 0.25s ease, margin-left 0.25s ease;
}

.grow-solution__more:hover .grow-solution__more-arrow {
  width: 16px;
  opacity: 1;
  transform: none;
  margin-left: 0;
}

.grow-solution__card:hover .grow-solution__more-arrow {
  width: 16px;
  opacity: 1;
  transform: none;
  margin-left: 0;
}

/* ===== 通用下划线了解更多（参考 wl-btn-underline + wl-cta-arrow） ===== */
.grow-more-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  padding: 0 0 4px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  font-family: MiSans;
  font-weight: 380;
  font-size: 14px;
  line-height: 1.21;
  letter-spacing: 0;
  color: var(--grow-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.grow-more-cta:hover {
  opacity: 0.7;
}

.grow-more-cta__arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 0;
  margin-left: -6px;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-4px);
  color: currentColor;
  transition: width 0.25s ease, opacity 0.2s ease, transform 0.25s ease, margin-left 0.25s ease;
}

.grow-more-cta:hover .grow-more-cta__arrow {
  width: 16px;
  opacity: 1;
  transform: none;
  margin-left: 0;
}

/* ===== 精准营养体系 ===== */
.grow-system {
  padding: 100px 0;
  max-width: 1338px;
  margin: 0 auto;
  padding-inline: 24px;
  padding-bottom: 43px;
  padding-top: 113px;
}

.grow-system__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-bottom: 41px;
}

.grow-system__lab {
  width: 111px;
  height: 40px;
  border-radius: 20px;
}

.grow-system__title {
  font-family: MiSans;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.21;
  letter-spacing: -5%;
  text-align: justify;
  color: #4B1F0B;
}

.grow-system__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(48px, 15vw, 204px);
  justify-content: center;
}

.grow-system__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  text-align: center;
}

.grow-system__card+.grow-system__card::before {
  content: '';
  position: absolute;
  left: calc(clamp(48px, 15vw, 204px) / -2);
  top: 27px;
  width: 1px;
  height: calc(100% - 27px);
  background: #CDCDCD;
}

.grow-system__card-icon {
  width: 100%;
  max-width: 246px;
  height: 246px;
  margin-bottom: 5px;
}

.grow-system__card-icon img {
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
}

.grow-system__card-text {
  width: 100%;
  max-width: 246px;
  padding-left: 18px;
  box-sizing: border-box;
}

.grow-system__card-title {
  font-family: MiSans;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -5%;
  text-align: justify;
  color: #FF4E00;
  margin-bottom: 20px;
}

.grow-system__card-desc {
  font-family: MiSans;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 24px;
  letter-spacing: -5%;
  text-align: justify;
  color: var(--grow-ink-light);
}

.grow-system__footer {
  text-align: center;
  margin-top: 42px;
}

.grow-system__footer a {
  font-family: MiSans;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.21;
  letter-spacing: 0%;
  text-align: center;
  color: #4B1F0B;
}

/* ===== 产品卡片 ===== */
.grow-products {
  padding: 80px 0 100px;
  max-width: 1392px;
  margin: 0 auto;
  padding-inline: 24px;
}

.grow-products__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.grow-product__card {
  position: relative;
  width: 361px;
  height: 536px;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.grow-product__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px var(--grow-shadow);
}

.grow-product__glass {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(60px);
  -webkit-backdrop-filter: blur(60px);
  border-radius: 20px;
  z-index: 1;
  box-shadow:
    inset 0 0 2px rgba(255, 255, 255, 0.7),
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 15px 30px rgba(255, 255, 255, 0.2),
    inset 0 0 15px rgba(255, 255, 255, 0.69);
}

.grow-product__img-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 60%;
  width: 100%;
}

.grow-product__img {
  max-width: 85%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 15px var(--grow-shadow));
}

.grow-product__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.grow-product__lab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 111px;
  height: 40px;
  border: 2px solid var(--grow-brand);
  border-radius: 20px;
  font-size: 20px;
  font-weight: 330;
  color: var(--grow-brand);
  letter-spacing: 0;
  line-height: 1.5;
}

.grow-product__name {
  font-size: 26px;
  font-weight: 380;
  letter-spacing: -1.3px;
  line-height: 1.33;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  text-align: center;
}

.grow-product__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 20px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 49px;
  font-size: 20px;
  font-weight: 380;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.grow-product__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 24px;
  background: var(--grow-brand);
  color: #FFFFFF;
  border-radius: 43px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.33;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  text-decoration: none;
}

.grow-product__btn:hover {
  background: var(--grow-brand-hover);
  transform: scale(1.03);
}

/* ===== 四大研发平台 ===== */
.grow-lab {
  background: var(--grow-beige);
}

.grow-lab__inner {
  max-width: 1338px;
  margin: 0 auto;
  padding: 105px 24px 125px;
  padding-bottom: 43px;
  padding-top: 113px;
}

.grow-lab__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-bottom: 30px;
}

.grow-lab__top-left {
  display: flex;
  align-items: center;
  gap: 13px;
}

.grow-lab__badge {
  /* width: 111px; */
  height: 40px;
  border-radius: 20px;
  object-fit: cover;
}

.grow-lab__title {
  font-family: MiSans;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.21;
  letter-spacing: -5%;
  text-align: justify;
  color: #4B1F0B;
}

.grow-lab__more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.grow-lab__more {
  font-family: MiSans;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.21;
  letter-spacing: 0%;
  text-align: center;
  color: #4B1F0B;
}

.grow-lab__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
}

.grow-lab__card {
  display: flex;
  flex-direction: column;
}

.grow-lab__card-img {
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  max-width: 288.44px;
  /* height: 174px; */
}

.grow-lab__card-img img {
  width: 100%;
  /* height: 100%; */
}

.grow-lab__card-text {
  font-family: MiSans;
  font-weight: 400;
  font-size: 10px;
  line-height: 19px;
  letter-spacing: -5%;
  color: #4B1F0B;
  margin-top: 13px;
}

.grow-lab__card-title {
  font-family: MiSans;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.21;
  letter-spacing: 0%;
  color: #4B1F0B;
  margin-top: 31px;
}

/* ===== 核心专利成分 ===== */
/* ===== 核心专利成分（专利卡） ===== */
.grow-patent-core {
  padding: 100px 0;
  background-image: var(--wl-bg-image, none);
  background-size: cover;
  background-position: center;
  padding-top: 56px;
  padding-bottom: 43px;
  padding-top: 113px;
}

.grow-patent-core__inner {
  max-width: 1338px;
  margin: 0 auto;
  padding-inline: 24px;
  text-align: center;
}

.grow-patent-core__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-bottom: 30px;
}

.grow-patent-core__badge {
  width: 111px;
  height: 40px;
  border-radius: 20px;
  object-fit: cover;
}

.grow-patent-core__title {
  font-family: MiSans;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.21;
  letter-spacing: -5%;
  text-align: justify;
  color: #4B1F0B;

}

.grow-patent-core__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 27px;
}

.grow-patent-core__card {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 60px;
  /* box-shadow:
    0px 6px 24px rgba(0, 0, 0, 0.2),
    inset 0 0 8px -5px #ffffff; */
  padding: 24px;
  position: relative;
  overflow: hidden;
  padding-left: 50px;
  padding-right: 0px;
  box-shadow: 0px 15px 30px 0px #FFFFFF33 inset, 0px 0px 15px 0px #FFFFFF33 inset, 0px 1px 1px 0px #FFFFFF40 inset, 0px 0px 2px 0px #FFFFFFB2 inset;

}

.grow-patent-core__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: -1;
  background: rgba(255, 255, 255, 0.3);
}

.grow-patent-core__card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.8),
      transparent,
      rgba(255, 255, 255, 0.3));
}

.grow-patent-core__card-body {
  display: flex;
  align-items: center;
}

.grow-patent-core__layers {
  width: 303px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.grow-patent-core__row {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.grow-patent-core__row-img {
  width: 100px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}

.grow-patent-core__row-title {
  font-family: MiSans;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -5%;
  text-align: justify;
  color: #4B1F0B;
}

.grow-patent-core__desc {
  font-family: MiSans;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -5%;
  text-align: justify;
  color: #4B1F0B;
}

.grow-patent-core__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.grow-patent-core__tags + .grow-patent-core__tags {
  margin-top: 14px;
}

.grow-patent-core__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* min-width: 201px; */
  height: auto;
  min-height: 43px;
  /* padding: 10px 20px; */
  border: 0.5px solid #F1954A;
  border-radius: 5px;
  font-family: MiSans;
  font-weight: 400;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -5%;
  text-align: justify;
  color: #F1954A;
  padding-left: 13px;
  padding-right: 13px;
}

.grow-patent-core__card-img {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  width: 281px;
  height: 281px;
  border-radius: 20px;
  overflow: hidden;
}

.grow-patent-core__card-img img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
}

.grow-patent-core__more {
  display: inline-flex;
  align-items: center;
  font-family: MiSans;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.21;
  letter-spacing: 0%;
  color: #4B1F0B;
  margin-top: 48px;
  /* text-decoration: underline;
      text-decoration-color: #4B1F0B;
      text-decoration-thickness: 1px; */
  text-underline-offset: 6px;
}

@media (max-width: 960px) {

  .grow-solution,
  .grow-patent-core,
  .grow-knowledge {
    background-image: var(--wl-bg-image-mobile, var(--wl-bg-image, none));
  }

  .grow-patent-core__card {
    padding-left: 25px;
    padding-right: 25px;
  }

  .grow-patent-core__card-body {
    flex-direction: column;
  }

  .grow-patent-core__layers {
    width: 100%;
  }

  .grow-patent-core__row {
    flex-wrap: wrap;
  }

  .grow-patent-core__row-title,
  .grow-patent-core__desc {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .grow-patent-core__card-img {
    position: static;
    transform: none;
    width: 281px;
    height: 281px;
    margin: 0 auto;
  }



  .grow-patent-core__cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1306px) and (min-width: 961px) {

  .grow-patent-core__card {
    padding-left: 25px;
    padding-right: 25px;
  }

  .grow-patent-core__card-body {
    flex-direction: column;
  }

  .grow-patent-core__layers {
    width: 100%;
  }

  .grow-patent-core__row-title,
  .grow-patent-core__desc {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .grow-patent-core__card-img {
    position: static;
    transform: none;
    width: 281px;
    height: 281px;
    margin: 0 auto;
  }

  .grow-patent-core__cards {
    grid-template-columns: 1fr;
  }
}




.grow-patent {
  padding: 100px 0 109px;
  max-width: 1338px;
  margin: 0 auto;
  padding-inline: 24px;
  padding-bottom: 0px;
  padding-top: 113px;
}

.grow-patent__split {
  display: grid;
  grid-template-columns: 437px 1fr;
  gap: 141px;
  align-items: start;
}

.grow-patent__left {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 30.58px;
}

.grow-patent__left .grow-more-cta {
  align-self: flex-start;
}

.grow-patent__slogan {
  font-family: MiSans;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.21;
  letter-spacing: -5%;
  text-align: justify;
  color: #4B1F0B;
  margin-bottom: 30px;
}

.grow-patent__desc {
  font-family: MiSans;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;
  text-align: justify;
  color: #4B1F0B;
  margin-bottom: 70px;
}

.grow-patent__btn {
  display: flex;
  /* justify-content: center; */

  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 5.47px;
  /* width: 136px; */
  /* padding: 10.29px 21.42px; */
  box-sizing: border-box;
  background: #FF4E00;
  border-radius: 43px;
  font-family: MiSans;
  font-weight: 500;
  font-size: 10px;
  line-height: 33.94px;
  letter-spacing: 0%;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
      padding-left: 21.42px;
    padding-right: 21.42px;
}

.grow-patent__btn img {
  width: 0;
  height: 0;
  opacity: 0;
  flex-shrink: 0;
  margin-left: -5.47px;
  overflow: hidden;
  transition: width 0.25s ease, height 0.25s ease, opacity 0.2s ease;
}

.grow-patent__btn:hover img {
  width: 23.56px;
  height: 23.56px;
  margin-left: 0;
  opacity: 1;
}

.grow-patent__btn:hover {
      padding-right: 5px !important;
    /* text-indent: 29px; */
  /* padding-right: 6.31px; */
  /* padding-top: 4.625px; */
  /* padding-bottom: 4.625px; */
}

.grow-patent__right {
  display: flex;
  justify-content: center;
}

.grow-patent__pic {
  width: 100%;
  height: 389px;
  /* object-fit: cover; */
  border-radius: 60px;
}

/* ===== 儿童营养知识库 ===== */
.grow-knowledge {
  background-image: var(--wl-bg-image, none);
  background-size: cover;
  background-position: center;
  padding: 100px 0;
  padding-top: 113px;
  padding-bottom: 87px;
}

.grow-knowledge__inner {
  max-width: 1338px;
  margin: 0 auto;
  padding-inline: 24px;
}

.grow-knowledge__title {
  font-family: MiSans;
  font-size: 40px;
  text-align: center;
  color: #4B1F0B;
  margin-bottom: 23px;


  font-weight: 500;
  line-height: 1.21;
  letter-spacing: -5%;

}

.grow-knowledge__desc {
  margin-bottom: 50px;
}

.grow-knowledge__desc p {
  font-family: MiSans;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;
  text-align: center;
  color: #4B1F0B;
  margin: 0;
}

.grow-knowledge__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1254px;
  margin: 0 auto;
}

.grow-knowledge__card {
  width: 291px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0px 6px 24px rgba(0, 0, 0, 0.05),
    inset 0 0 8px -5px #ffffff;
  text-align: center;
  padding: 24px 16px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: margin-top 0.3s ease, margin-bottom 0.3s ease, box-shadow 0.3s ease;
}

.grow-knowledge__card:hover {
  margin-top: -22.8px;
  margin-bottom: -22.8px;
  /* box-shadow: 0 16px 48px rgba(255, 78, 0, 0.25), inset 0 0 8px -5px #ffffff; */
  z-index: 2;
  background: #ffffff;
}

.grow-knowledge__card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.2);
}

.grow-knowledge__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 40px;
  border: 1.2px solid rgba(255, 255, 255, 0.9);
  pointer-events: none;
  -webkit-mask: linear-gradient(to top right, transparent 10.5%, #000 24%, #000 76%, transparent 89.5%);
  mask: linear-gradient(to top right, transparent 10.5%, #000 24%, #000 76%, transparent 89.5%);
}

.grow-knowledge__card > * {
  position: relative;
  z-index: 2;
}

.grow-knowledge__card-icon {
  width: 57px;
  height: 57px;
  margin-bottom: 14px;
  transition: width 0.3s ease, height 0.3s ease;
}

.grow-knowledge__card:hover .grow-knowledge__card-icon {
  width: 68.4px;
  height: 68.4px;
}

.grow-knowledge__card-icon img {
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
}

.grow-knowledge__card-title {
  font-family: MiSans;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.21;
  letter-spacing: 0%;
  text-align: center;
  color: #4B1F0B;
  margin-bottom: 4px;
}

.grow-knowledge__card-text {
  font-family: MiSans;
  font-weight: 400;
  font-size: 10px;
  line-height: 19px;
  letter-spacing: -5%;
  text-align: center;
  color: #4B1F0B;
}

@media (max-width: 960px) {
  .grow-knowledge__card {
    width: 100%;
  }
}



/* ===== 最新动态 ===== */
.grow-news {
  padding: 80px 0 151px;
  max-width: 1338px;
  margin: 0 auto;
  padding-inline: 24px;
  padding-bottom: 43px;
  padding-top: 113px;
}

.grow-news__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 34px;
}

.grow-news__heading {
  font-family: MiSans;
  font-weight: 600;
  font-size: 40px;
  line-height: 1.21;
  letter-spacing: 0%;
  color: var(--grow-ink);
}

.grow-news__more {
  font-family: MiSans;
  font-weight: 380;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0;
  text-align: right;
  text-decoration: underline;
  color: var(--grow-ink);
}

.grow-news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45.55px;
}

.grow-news__card {}

.grow-news__img-wrap {
  /* height: 244px; */
  overflow: hidden;
  border-radius: 20px;
}

.grow-news__img-wrap img {
  width: 100%;
  /* height: 100%; */
  /* object-fit: cover;  */
}

.grow-news__content {
  padding: 19px 0;
}

.grow-news__date {

  color: #B4B4B4;
  font-family: MiSans;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 0%;

}

.grow-news__text {
  font-family: MiSans;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0%;

  color: var(--grow-ink);
}

.grow-news__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.grow-news__read {
  font-family: MiSans;
  font-weight: 500;
  font-size: 10px;
  line-height: 1.21;
  letter-spacing: 0%;
  text-align: right;
  text-decoration: underline;
  text-decoration-style: solid;
  text-decoration-offset: 0%;
  text-decoration-thickness: 0%;
  text-decoration-skip-ink: auto;
  color: #CEC5B2;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.grow-news__read:hover {
  color: #FF4E00;
}

.grow-news__desc {
  font-family: MiSans;
  font-weight: 400;
  font-size: 10px;
  line-height: 17px;
  letter-spacing: 0%;
  text-align: justify;
  color: #4B1F0B;
  margin-top: 13px;
}

/* ===== Footer ===== */
.grow-footer {
  background: var(--grow-brand);
  padding: 64px 0 32px;
  color: #FFFFFF;
}

.grow-footer__inner {
  max-width: 1392px;
  margin: 0 auto;
  padding-inline: 24px;
}

.grow-footer__main {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: flex-start;
}

.grow-footer__brand {
  grid-column: 1;
}

.grow-footer__links-row {
  display: flex;
  grid-column: 2;
  flex-wrap: wrap;
  gap: 99px;
  justify-content: flex-end;
  padding-top: 23px;
}

.wl-footer__logo {
  width: 160px;
  height: auto;
  filter: brightness(0) invert(1);
}

.wl-footer__slogan {
  font-size: 20px;
  font-weight: 500;
  /* margin-bottom: 16px; */
}

.wl-footer__links {
  flex-shrink: 0;
}

.wl-footer__copyright {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 21.175px;
  letter-spacing: 0%;
  color: rgb(255, 255, 255);
  text-decoration: none;
  transition: opacity 0.2s;
  cursor: pointer;
}

.wl-footer__copyright:hover {
  color: rgba(255, 255, 255, .7);
}

.wl-footer__divider {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 33px;
  margin-bottom: 13px;
}

.grow-footer__social {
  display: flex;
  align-items: center;
  gap: 19.48px;
}

.grow-footer__copyright {
  cursor: default;
  transition: none;
  font-size: 15px;
  line-height: 1.21;
}

.grow-footer__copyright:hover {
  opacity: 1;
  color: rgb(255, 255, 255);
}

.grow-footer__social-icon {
  width: 28.12px;
  height: 28.12px;
  object-fit: contain;
}

.wl-footer__legal {
  font-family: MiSans;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.21;
  letter-spacing: 0%;
  text-align: right;
  color: #FFFFFF;
  padding-bottom: 20px;
  padding-right: 20px;
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .wl-footer__inner .flex.justify-between {
    flex-direction: column;
    gap: 12px;
  }

  .wl-footer-social__qr {
    left: 0;
  }

  .grow-nav {
    position: fixed;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .grow-nav.is-scrolling {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .grow-nav__logo {
    margin-left: 11px;
  }

  .grow-nav::before,
  .grow-nav::after {
    display: none;
  }

  .grow-nav__menu,
  .grow-nav__cart {
    display: none;
  }

  .grow-nav__burger {
    display: block;
  }

  .wl-mobile-menu {
    top: 0;
    padding-top: 90px;
  }

  body.wl-menu-open .grow-nav__burger span {
    background: #FF4E00;
  }

  .grow-footer__main {
    gap: 24px;
  }

  .grow-footer__links-row {
    justify-content: flex-end;
    gap: 99px;
  }

  .grow-system__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grow-products__list {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
  }

  .grow-products__card {
    width: 100%;
  }

  .grow-lab__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .grow-lab__card-img {
    width: 100%;
  }

  .grow-patent__split {
    grid-template-columns: 1fr;
  }

  .grow-news__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grow-footer__top {
    grid-template-columns: repeat(3, 1fr);
  }



  .grow-hero {
    height: 600px;
  }

  .grow-footer__main {
    grid-template-columns: 1fr;
    gap: 24px;
    justify-items: center;
  }

  .grow-footer__brand,
  .grow-footer__links-row {
    grid-column: 1;
  }

  .grow-footer__brand {
    text-align: center;
  }

  .grow-footer__brand .wl-footer__logo {
    margin-left: auto;
    margin-right: auto;
  }

  .grow-footer__links-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 99px;
    justify-content: center;
  }

  .grow-footer__links-row .wl-footer__links {
    text-align: center;
  }

  .grow-hero__title,
  .grow-hero__subtitle {
    font-size: 28px;
  }

  .grow-system__header,
  .grow-patent-core__head,
  .grow-lab__top-left {
    flex-wrap: wrap;
    justify-content: center;
  }

  .grow-system__title,
  .grow-patent-core__title,
  .grow-lab__title {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* 任一头部触发换行时，JS 给三处统一加 is-stacked，强制竖排保证视觉一致 */
  .grow-system__header.is-stacked,
  .grow-patent-core__head.is-stacked,
  .grow-lab__top-left.is-stacked {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 24px;
  }

  .grow-system__grid {
    grid-template-columns: 1fr;
  }

  .grow-products__list {
    grid-template-columns: 1fr;
  }

  .grow-news__grid {
    grid-template-columns: 1fr;
  }

  .grow-lab__cards {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .grow-lab__card {
    align-items: center;
    text-align: center;
  }

  .grow-lab__card-img {
    width: 100%;
  }
}

.link-title {
  line-height: 30.25px;
  font-weight: 600;
}