/* ========================================
   汤臣倍健GEO 全局样式
   遵循 V1.0 文档
   主题风格：汤臣倍健官网风格
   ======================================== */

:root {
  /* 色彩：品牌红 + 语义表面（P0-2 纵深背景 / P1-1 统一描边） */
  --bg: #fcfcfd;                 /* 全局背景：近白微冷，告别纯白平铺 */
  --fg: #1a1a1a;                 /* 主文 */
  --card: #ffffff;              /* 卡片/浮层表面 */
  --muted-bg: #f7f7f7;
  --muted-fg: #666666;          /* 次级文字（≥ WCAG AA 4.5:1） */
  --primary: #ff1d25;           /* 汤臣倍健红 */
  --primary-dark: #a51218;
  --primary-fg: #ffffff;
  --primary-soft: #fef2f2;
  --accent: #c8161d;
  --accent-soft: #fef2f2;
  --brand: #c8161d;
  --brand-bright: #ff1d25;
  --brand-dark: #a51218;
  --brand-soft: #fef2f2;
  --ink: #1a1a1a;
  --ink-2: #666666;
  --border: #e5e7eb;            /* 统一描边（替代散落 #e5e5e5/#f0f0f0/var(--border-subtle)） */
  --border-light: #f0f0f0;
  --border-subtle: #eceef1;     /* 统一细描边 token */
  --ring: #c8161d;
  --surface: #ffffff;           /* 卡片表面 */
  --surface-sunken: #f6f7f9;    /* 区块底：带极淡冷灰，区别于纯白 */

  /* 圆角 3 档（P1-1） */
  --radius: 4px;
  --radius-sm: 8px;             /* 小元素：标签、按钮、表格单元格 */
  --radius-md: 12px;            /* 卡片、列表行、信息块 */
  --radius-lg: 16px;            /* Hero、产品详情大卡 */

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 1px 2px rgba(20,20,20,.03), 0 12px 32px -24px rgba(20,20,20,.10); /* 统一卡片阴影 */

  /* 字号刻度（P1-3 统一标题语言） */
  --fs-h1: clamp(28px, 3.4vw, 40px);   /* 栏目/Hero 主标题 */
  --fs-h2: clamp(20px, 2.2vw, 26px);   /* 区块标题 */
  --fs-h3: 18px;
  --fs-h4: 16px;
  --fs-body: 16px;

  /* 间距节奏（P2 统一区块上下间距） */
  --space-section: clamp(40px, 5vw, 64px);

  --content-max: 1200px;
  --article-max: 760px;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--fg); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; padding-top: 72px; overflow-x: hidden; overflow-x: clip; }
main { flex: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
    a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { line-height: 1.3; color: var(--fg); }
h1 { font-size: var(--fs-h1); font-weight: 700; }
h2 { font-size: 22px; font-weight: 600; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 16px; font-weight: 600; }
hr { color: var(--border-light);opacity:0.2; }
p { margin: 0.5em 0; }
.bg { background-color: var(--surface-sunken); }
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 20px; width: 100%; }
.sr-only{ position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  white-space: nowrap;  border: 0;}

/* ========================================
   头部 · 官网风格导航
   ======================================== */
.site-header { background: var(--muted-bg); border-bottom: 1px solid var(--border-light); position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: box-shadow 0.2s ease; max-width: 100vw; }
    .site-header:hover,
    .site-header:focus-within { box-shadow: var(--shadow-sm); }
.header-row { display: flex; align-items: center; gap: 24px; height: 72px; flex-wrap: nowrap; overflow: hidden; }
.site-logo { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 700; flex-shrink: 0; min-width: 0; max-width: calc(100% - 60px); }
    .site-logo:hover { text-decoration: none; }
.logo-mark { display: flex; align-items: center; justify-content: center; }
    .logo-mark img { height: 30px; }
.site-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
    .site-nav a { color: var(--fg); padding: 8px 14px; font-size: 15px; font-weight: 500; text-decoration: none; transition: color 0.15s ease; position: relative; }
        .site-nav a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 1px; background: var(--primary); transform: scaleX(0); transform-origin: center; transition: transform 0.25s ease; }
        .site-nav a:hover { color: var(--primary); text-decoration: none; }
        .site-nav a:hover::after,
        .site-nav a.active::after { transform: scaleX(1); }
        .site-nav a.active { color: var(--primary); }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 6px; align-items: center; justify-content: center; color: var(--fg); transition: background 0.15s ease; flex-shrink: 0; }
    .menu-btn:hover { background: var(--muted-bg); }
    .menu-btn svg { width: 24px; height: 24px; }
.mobile-nav { display: none; border-top: 1px solid var(--border-light); background: var(--card); }
    .mobile-nav.open { display: block; }
.mobile-nav-inner { padding: 16px 20px 24px; }
.mobile-nav nav { display: flex; flex-direction: column; gap: 0; }
    .mobile-nav nav a { padding: 14px 0; border-bottom: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; color: var(--fg); font-size: 15px; font-weight: 500; }
        .mobile-nav nav a:last-child { border-bottom: none; }
        .mobile-nav nav a::after { content: '›'; color: var(--muted-fg); font-size: 20px; }
        .mobile-nav nav a:hover { color: var(--primary); text-decoration: none; }
        .mobile-nav nav a.active { color: var(--primary); }
        .mobile-nav nav a.active::after { color: var(--primary); }

/* ========================================
   面包屑
   ======================================== */
.breadcrumb-bar { position: sticky; top: 72px; z-index: 40; background: var(--bg); padding: 21px 0; box-shadow: 0 2px 10px -8px rgba(20, 20, 20, 0.18); }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--muted-fg); }
    .breadcrumb a { color: var(--muted-fg); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
        .breadcrumb a:hover { color: var(--primary); text-decoration: none; }
    .breadcrumb .current { color: var(--fg); }
    .breadcrumb .sep { display: inline-flex; color: #ccc; }
        .breadcrumb .sep svg { width: 12px; height: 12px; }

/* ========================================
   首页 Hero / 板块
   ======================================== */
.hero { /* background: linear-gradient(180deg, #ccc 0%, #ccc 30%, #ccc 60%, #ffffff 100%);
  */ padding: 40px 0 30px; text-align: center; position: relative; }
    .hero::after { display: none; }
    .hero .container { position: relative; z-index: 2; }
    .hero h1 { font-size: var(--fs-h1); max-width: 700px; margin: 0 auto 20px; color: var(--fg); font-weight: 700; letter-spacing: -0.5px; }

.hero2 { padding: 50px 0 15px; text-align: center; position: relative; }
    .hero2 h2 { margin: 10px auto 10px; }
    .hero2 .hero-lede { text-align: center; }
    .hero2::before, .hero2::after { display: none; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 14px 28px; border-radius: var(--radius-sm); font-weight: 600; font-size: 15px; text-decoration: none; transition: all 0.2s; letter-spacing: 0.5px; }
.btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: 0 2px 8px rgba(200, 22, 29, 0.25); }
    .btn-primary:hover { background: var(--primary-dark); text-decoration: none; box-shadow: 0 4px 12px rgba(200, 22, 29, 0.35); transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; }

.section { padding: var(--space-section) 0; }

/* 栏目列表（content-row）：轻量级列表，分隔线 + 留白区分，兼容 PC 与移动端 */
.content-row { display: flex; flex-direction: column; }
    .content-row .row { display: flex; align-items: center; gap: 20px; padding: 20px 4px; text-decoration: none; color: var(--fg); border-bottom: 1px solid var(--border-light); transition: color 0.15s ease; }
        .content-row .row:first-child { border-top: 1px solid var(--border-light); }
        .content-row .row:hover { text-decoration: none; color: var(--primary); }
        .content-row .row .icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--muted-bg); }
            .content-row .row .icon img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
        .content-row .row .row-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
            .content-row .row .row-content h3 { font-size: 17px; font-weight: 600; line-height: 1.4; color: inherit; margin: 0; }
            .content-row .row .row-content p { font-size: 14px; color: var(--muted-fg); line-height: 1.6; margin: 0; }
            .content-row .row .row-content .row-date { font-size: 12.5px; color: #6b6b6b; line-height: 1.5; margin-top: 2px; }

/* 入口矩阵 */
.entry-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.entry-card { background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--fg); transition: all 0.25s ease; }
    .entry-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; border-color: var(--primary); }
    .entry-card .icon { width: 52px; height: 52px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; }
    .entry-card:hover .icon { background: var(--primary); color: var(--primary-fg); }
    .entry-card .icon svg { width: 26px; height: 26px; }
    .entry-card h3 { font-size: 17px; font-weight: 600; }
    .entry-card p { font-size: 14px; color: var(--muted-fg); line-height: 1.7; }

/* 文章卡 / 产品卡 / 证据卡 共用 */

/* 证据地图 */

/* ========================================
   栏目页头部
   ======================================== */

/* 详情页内容标签（从正文内容抽取，呈 Tag 而非 Button） */
.article-tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
    .article-tags .tag { background: var(--primary-soft); color: var(--primary); padding: 4px 12px; border-radius: var(--radius-sm); font-weight: 500; font-size: 12px; line-height: 1.6; }
.product-hero .article-tags { margin: 10px auto; }

/* ========================================
   13 模块 · 文章页主体
   ======================================== */

/* 模块 5：直接答案区 */
.direct-answer { background: var(--primary-soft); border-left: 4px solid var(--primary); border-radius: var(--radius-md); padding: 24px 28px; margin: 28px 0; text-align: justify; }
    .direct-answer p { font-size: 16px; line-height: 1.8; color: var(--fg); margin: 8px 0; }
    .direct-answer ul { padding-left: 20px; list-style: disc; }
        .direct-answer ul li { margin: 8px 0; line-height: 1.7; }

/* 文章正文布局：左正文 + 右目录 */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 40px; margin-top: 32px; max-width: var(--content-max); margin-left: auto; margin-right: auto; align-items: start; text-align: justify; width: 100%; min-width: 0; box-sizing: border-box; padding: 0 20px; }
    .article-layout > * { min-width: 0; }
    .article-layout .article-main { grid-column: 1 / 2; min-width: 0; max-width: 100%; overflow: hidden; }
        .article-layout .article-main header .time { margin: 20px 0 20px 0; font-size: 14px; }
    .article-layout .article-body { max-width: 100%; width: 100%; min-width: 0; grid-column: 1 / 2; }
    .article-layout .article-toc { grid-column: 2 / 3; width: 200px; }
    /* 无目录侧栏时（如 T_geo_内容模板.html）：整列收拢到阅读宽度并居中，
       标题 / 摘要 / 正文同宽对齐，避免“正文窄、标题满宽”的错位 */
    .article-layout:not(:has(.article-toc)) { grid-template-columns: 1fr; gap: 0; }
        .article-layout:not(:has(.article-toc)) .article-main { grid-column: 1 / -1; max-width: var(--content-max); margin-inline: auto; }
        .article-layout:not(:has(.article-toc)) .article-body { grid-column: 1 / -1; max-width: 100%; }
    /* 回退：浏览器不支持 :has 时，同样收拢为单列阅读宽度，避免正文过宽 */
    @supports not selector(:has(*)) {
        .article-layout { grid-template-columns: 1fr; gap: 0; }
        .article-layout .article-main { grid-column: 1 / -1; max-width: var(--content-max); margin-inline: auto; }
        .article-layout .article-body { grid-column: 1 / -1; max-width: 100%; }
    }
.article-body { font-size: 16px; line-height: 1.85; max-width: var(--article-max); width: 100%; overflow-wrap: anywhere; min-width: 0; margin-top: 20px; }

/* ============================================================
   通用富文本样式：作用域限定在 .cms-content
   用于 {Content.Body} / {Channel.Content} 输出的正文，统一 h2~h6 间距与
   表格样式。仅作用于带 .cms-content 的容器，不影响导航 / 卡片 / 页脚等组件。
   注意：基类不设置 max-width / width，以免覆盖 .container 的居中最大宽度。
   ============================================================ */
.cms-content { font-size: 16px; line-height: 1.85; }
    .cms-content > * { max-width: 100%; }
    .cms-content * { max-width: 100%; }
    .cms-content section { margin-bottom: 44px; }
    .cms-content h2 { font-size: 22px; margin: 16px 0; padding-bottom: 12px; font-weight: 700; }
    .cms-content h3 { font-size: 18px; margin: 24px 0; font-weight: 600; }
    .cms-content h4 { font-size: 16px; margin: 20px 0; }
    .cms-content h5, .cms-content h6 { font-size: 15px; margin: 18px 0; font-weight: 600; }
    .cms-content p { margin: 14px 0; line-height: 1.85; }
	.cms-content hr { margin: 21px 0;}
    .cms-content ul, .cms-content ol { padding-left: 24px; margin: 12px 0; }
    .cms-content ul { list-style: disc; }
    .cms-content ol { list-style: decimal; }
    .cms-content li { margin: 6px 0; line-height: 1.7; }
    .cms-content blockquote { background: var(--muted-bg); padding: 16px 24px; margin: 20px 0; border-radius: 0 var(--radius) var(--radius) 0; color: var(--fg); font-style: normal; line-height: 1.8; }
    .cms-content code { font-family: var(--font-mono); font-size: 0.92em; background: var(--muted-bg); padding: 2px 8px; border-radius: var(--radius-sm); }
    .cms-content a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s ease; }
        .cms-content a:hover { color: var(--primary-dark); }
    .cms-content strong { color: var(--fg); font-weight: 600; }
    .cms-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* 表格美化（同样限定在 .cms-content 内） */
.cms-content table {
    width: 100% !important;
    height: auto !important;
    margin: 24px 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    font-size: 14px;
    line-height: 1.6;
}
    .cms-content table th,
    .cms-content table td {
        padding: 12px 16px;
        text-align: left;
        border-bottom: 1px solid var(--border-light);
        vertical-align: top;
    }
    .cms-content table thead th {
        background: var(--muted-bg);
        color: var(--fg);
        font-weight: 600;
        border-bottom: 1px solid var(--border-light);
    }
    .cms-content table tbody tr:nth-child(even) { background: var(--muted-bg); }
    .cms-content table tbody tr:hover { background: #efefef; }
    .cms-content table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 768px) {
    .cms-content .qualification-table { font-size: 0.82rem; }
        .cms-content .qualification-table th,
        .cms-content .qualification-table td { padding: 8px 10px; }
            .cms-content .qualification-table th:nth-child(3),
            .cms-content .qualification-table td:nth-child(3) { display: none; }
    .cms-content table th,
    .cms-content table td { padding: 8px 10px; }
}

/* 模块 6：正文目录（右侧） */
.article-toc { position: sticky; top: 90px; align-self: start; background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 20px 24px; max-height: calc(100vh - 120px); overflow-y: auto; box-shadow: var(--shadow-sm); }
    .article-toc h4 { font-size: 13px; margin-bottom: 14px; color: var(--muted-fg); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
    .article-toc nav a { display: block; padding: 8px 0 8px 12px; color: var(--muted-fg); font-size: 13px; text-decoration: none; border-left: 2px solid transparent; transition: all 0.15s ease; line-height: 1.5; }
        .article-toc nav a:hover { border-left-color: var(--primary); color: var(--primary); background: var(--primary-soft); margin-left: -12px; padding-left: 12px; }

/* 模块 8：上下文证据链接 */

/* 模块 9：证据与来源 */

/* 合并后 related-blocks 作为 section 首元素时，避免与 section padding 叠加；
   与下方 related-links 之间保留适度间距 */
.section > .container > .related-blocks:first-child { margin-top: 0; margin-bottom: 28px; }

/* 当 related-blocks 不在合并 section 内（仍与 article-body 同 section）时维持原间距 */
.related-blocks { margin-top: 0; display: flex; flex-direction: column; gap: 14px; }

/* 页面底部：相关证据 / 相关产品 */
.related-group { margin-bottom: 10px; }
    .related-group h3 { font-size: 18px; font-weight: 600; margin-bottom: 18px; }
    .related-group a { display: inline-block; margin: 8px 10px 8px 0; padding: 6px 14px; background: var(--primary-soft); border-radius: 20px; font-size: 14px; color: var(--primary); text-decoration: none; transition: all 0.15s ease; }
        .related-group a:hover { background: var(--primary); color: var(--primary-fg); text-decoration: none; }

.product-page { padding-bottom: 20px; }
/* 移动端：相关内容标签间距适当收敛，保持可读与点击区域 */
@media (max-width: 640px) {
    .related-group h3 { margin-bottom: 14px; }
    .related-group a { margin: 6px 8px 6px 0; padding: 5px 12px; font-size: 13px; }
}

/* 页面底部：证据与来源 */
.evidence-sources { margin: 0; padding: 0 0 50px; text-align: left; }
    .evidence-sources h2 { font-size: 18px; font-weight: 600; margin-bottom: 12px; text-align: left; }
    .evidence-sources ul { list-style: disc; padding-left: 20px; color: var(--muted-fg); font-size: 14px; line-height: 1.8; }
    .evidence-sources li { margin: 4px 0; }

/* 模块 13：合规说明与纠错入口 */

/* 上一篇/下一篇导航 */

/* ========================================
   产品事实页（SKU）
   ======================================== */
body[data-page="product-detail"] .product-page { padding: 40px 0 50px; }
    body[data-page="product-detail"] .product-page > .container,
    body[data-page="product-detail"] .qanda-section > .container { max-width: 1280px; }
body[data-page="product-detail"] .product-hero { display: block; text-align: center; background: var(--card); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 40px; padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 44px); margin-bottom: 28px; box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03), 0 12px 32px -24px rgba(20, 20, 20, 0.10); }
    body[data-page="product-detail"] .product-hero h1 { font-size: 26px; font-size: clamp(23px, 2.6vw, 32px); margin-bottom: 12px; font-weight: 700; line-height: 1.25; letter-spacing: 0.02em; }
    body[data-page="product-detail"] .product-hero .ph-sub { color: var(--muted-fg); margin-bottom: 14px; font-size: 16px; line-height: 1.7; }
    body[data-page="product-detail"] .product-hero .article-tags { justify-content: center; margin-top: 10px; }

.product-sections { display: grid; gap: 24px; }
.product-section { background: var(--card); border: 1px solid var(--border-subtle); border-radius: 14px; padding: 28px; }
    .product-section h2 { font-size: 18px; margin-bottom: 16px; font-weight: 600; }
    .product-section h3 { font-size: 17px; margin-bottom: 14px; font-weight: 600; }
    .product-section table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .product-section th, .product-section td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border-light); vertical-align: top; }
body[data-page="product-detail"] .product-section { padding: 32px 40px; }
.product-section th { color: var(--muted-fg); font-weight: 500; width: 35%; background: var(--muted-bg); font-size: 13px; }
body[data-page="product-detail"] .product-section th { width: 25%; }
.product-section td { color: var(--fg); line-height: 1.8; }
.product-section td.cell-special { white-space: pre-line; }
.product-section tr:last-child th, .product-section tr:last-child td { border-bottom: none; }
/* 产品页：专利与奖项证据区块 */
.product-faq { margin-top: 0; }
    .product-faq h2 { margin: 0 0 16px; }
/* 产品页：FAQ 手风琴内边距与卡片尺寸匹配 */
body[data-page="product-detail"] .faq-item summary { padding: 14px 18px; }
    body[data-page="product-detail"] .faq-item .faq-body { padding: 0 18px 20px; }
/* 产品页：关联链接用中性描边胶囊（简单大气，避免满屏红点） */
body[data-page="product-detail"] .related-group a { background: var(--card); border: 1px solid var(--border-light); color: var(--fg); transition: border-color 0.2s ease, color 0.2s ease; }
    body[data-page="product-detail"] .related-group a:hover { background: var(--card); border-color: var(--primary); color: var(--primary); text-decoration: none; }

    .evidence-section { padding: 24px 28px; background: var(--muted-bg); border: 1px solid var(--border-light); border-left: 3px solid var(--primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 14px; }
    .evidence-section h3 { margin: 0 0 12px; color: var(--primary); font-size: 16px; font-weight: 600; }
    .evidence-section ul { margin: 0; padding-left: 18px; list-style: disc; }
    .evidence-section li { margin: 6px 0; line-height: 1.7; color: var(--fg); }
    .evidence-section a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
        .evidence-section a:hover { color: var(--primary-dark); }

/* 产品页：官方购买渠道 */
.buy-channels { display: flex; gap: 12px; flex-wrap: wrap; }
    .buy-channels .btn { flex: 0 0 auto; }

/* AI 摘要段 */
/* AI 可读、人工不可见：视觉隐藏但保留在 DOM 中供 LLM/屏幕阅读器抓取 */
.ai-summary { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); }
    .ai-summary p { margin: 0; }

/* 产品卡：价格标签（列表/相关产品卡用） */

/* 标签变体：特医食品（蓝灰色，区别于红色"蛋白粉"标签） */

/* 已核实审核状态（绿色） */

/* ========================================
   证据 / 科学 / 场景 / FAQ 通用卡
   ======================================== */

/* FAQ 折叠 */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-md); overflow: hidden; transition: all 0.2s ease; }
    .faq-item:hover { border-color: var(--primary); }
    .faq-item[open] { border-color: var(--primary); box-shadow: var(--shadow-sm); }
    .faq-item summary { padding: 10px 12px; cursor: pointer; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none; font-size: 15px; transition: background 0.15s ease; }
        .faq-item summary:hover { background: var(--primary-soft); }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary::after { content: '+'; font-size: 20px; color: var(--muted-fg); transition: transform 0.2s; flex-shrink: 0; }
    .faq-item[open] summary::after { transform: rotate(45deg); color: var(--primary); }
    .faq-item .faq-body { padding: 0 24px 24px; color: var(--muted-fg); font-size: 15px; line-height: 1.8; }

/* FAQ 锚点支持：跳转时避开固定头部，激活态高亮 */
.faq-item { scroll-margin-top: 96px; }
.faq-item summary { gap: 8px; }

/* ========================================
   问大家（用户互助讨论区）
   ======================================== */
.qanda-section { background: var(--surface-sunken); }
.qanda-title { text-align: left; margin-bottom: 24px; }
    .qanda-title h2 { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.qanda-badge { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; background: var(--primary); color: #fff; font-size: 15px; font-weight: 700; }
.qanda-title > p { color: var(--muted-fg); font-size: 14px; line-height: 1.7; max-width: 100%; margin-top: 8px; }
.qanda-item { background: #fff; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.qanda-hd { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
    .qanda-hd .qanda-tag { flex-shrink: 0; width: 22px; height: 22px; border-radius: 5px; background: var(--primary); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
    .qanda-hd h3 { flex: 1; font-size: 16px; font-weight: 600; line-height: 1.5; margin: 0; color: var(--fg); }
    .qanda-hd time { flex-shrink: 0; font-size: 13px; color: #6b6b6b; margin-top: 3px; }
.qanda-replies { display: flex; flex-direction: column; gap: 14px; }
.qanda-reply { padding: 14px 16px; border-radius: 10px; background: var(--bg-subtle, #f8f9fa); }
    .qanda-reply.official { background: #fff7f7; border: 1px solid #ffe0e0; }
    /* 折叠态：问大家超过 2 条回答时，由产品页模板内联脚本添加/移除 .is-collapsed。
       此前缺少该规则，导致脚本切换类名却没有任何视觉效果（回答始终全部展开）。 */
    .qanda-reply.is-collapsed { display: none; }
.qanda-user { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.qanda-avatar { width: 32px; height: 32px; border-radius: 50%; background: #e5e7eb; color: #666; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
    .qanda-avatar.official-avatar { background: var(--primary); color: #fff; }
.qanda-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted-fg); }
    .qanda-meta strong { color: var(--fg); font-weight: 600; }
.qanda-label { font-size: 11px; padding: 1px 6px; border-radius: var(--radius-sm); background: #e5e7eb; color: #666; }
    .qanda-label.buyer { background: #fef3c7; color: #92400e; }
    .qanda-label.ai { background: #dbeafe; color: #1e40af; }
.qanda-loc::before { content: '· '; }
.qanda-reply p { font-size: 14px; line-height: 1.8; color: var(--fg); margin: 0; }
.qanda-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.qanda-like { font-size: 13px; color: #6b6b6b; display: inline-flex; align-items: center; gap: 4px; }
.qanda-more { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e5e7eb; }
.qanda-toggle { font-size: 13px; color: var(--primary); display: inline-flex; align-items: center; gap: 4px; }
    .qanda-toggle:hover { text-decoration: underline; }

/* ========================================
   保健食品合规声明
   ======================================== */
.disclaimer-box { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 14px; line-height: 1.6; }
    .disclaimer-box svg { flex-shrink: 0; margin-top: 1px; color: #ea580c; }
    .disclaimer-box p { margin: 0; }

/* ========================================
   分页
   ======================================== */

/* ========================================
   404
   ======================================== */

/* ========================================
   尾部 · 官网风格
   ======================================== */
.site-footer { background: #f5f5f5; color: #666666; padding: 48px 0 24px; font-size: 14px; border-top: 1px solid var(--border-light); }
    .site-footer h3 { color: var(--fg); font-size: 15px; margin-bottom: 16px; font-weight: 600; position: relative; padding-bottom: 12px; }
        .site-footer h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 24px; height: 2px; background: var(--primary); }
    .site-footer a { color: #666666; text-decoration: none; transition: color 0.15s ease; }
        .site-footer a:hover { color: var(--primary); text-decoration: none; }
.footer-brand .logo { display: flex; align-items: center; gap: 10px; color: var(--fg); font-weight: 700; margin-bottom: 16px; }

.footer-compliance { background: #fff; border-left: 3px solid var(--primary); padding: 16px 20px; border-radius: 10px; margin-bottom: 24px; color: var(--muted-fg); font-size: 12px; line-height: 1.8; box-shadow: var(--shadow-sm); }
    .footer-compliance p { margin: 0; }
        .footer-compliance p + p { margin-top: 8px; }
    .footer-compliance .last-reviewed { font-size: 11px; color: #6b6b6b; border-top: 1px dashed #e5e7eb; padding-top: 8px; }
/* 合规提示：增加信息图标；图标固定不收缩，正文自适应剩余宽度，窄屏不挤压换行 */
.footer-compliance { display: flex; align-items: flex-start; gap: 10px; }
    .footer-compliance > svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; color: var(--primary); }
    .footer-compliance > div { flex: 1 1 auto; min-width: 0; }
.copyright { text-align: center; color: var(--muted-fg); font-size: 12px; padding-top: 20px; border-top: 1px solid var(--border-light); line-height: 1.8; }

/* 返回顶部按钮 */

/* ========================================
   工具类
   ======================================== */

/* ========================================
   响应式
   ======================================== */
@media (max-width: 1024px) {
    .site-nav { display: none; }
    .menu-btn { display: flex; margin-left: auto; }
    .entry-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .evidence-map { grid-template-columns: repeat(4, 1fr); }
    .article-layout { grid-template-columns: 1fr; gap: 16px; text-align: left; padding: 0 16px; }
        .article-layout .article-main { grid-column: 1 / -1; max-width: 100%; }
        .article-layout .article-toc { position: static; max-height: none; order: -1; grid-column: 1 / -1; width: 100%; }
        .article-layout .article-body { grid-column: 1 / -1; max-width: 100%; }
        .article-layout .article-main > * { max-width: 100%; min-width: 0; }
    .product-hero { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-contact { text-align: left; }
        .footer-contact .social-icons { justify-content: flex-start; }
    .hero h1 { font-size: 28px; }
}

/* ============================================================
   返回顶部按钮：默认隐藏，滚动超过阈值后由页尾 JS 添加 .visible 淡入显示。
   移动端尺寸与安全区适配见下方 @media (max-width: 768px)。
   ============================================================ */
.back-to-top {
    position: fixed;
    right: 24px;
    bottom: 32px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    background: var(--card);
    color: var(--primary);
    box-shadow: 0 2px 8px rgba(20, 20, 20, 0.06), 0 10px 28px -14px rgba(20, 20, 20, 0.20);
    cursor: pointer;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
    .back-to-top.visible { opacity: 1; visibility: visible; transform: none; }
    .back-to-top:hover { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
    .back-to-top:active { transform: scale(0.94); }
    .back-to-top:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
    .back-to-top svg { width: 22px; height: 22px; }

@media (max-width: 768px) {
    body { padding-top: 60px; }
    .breadcrumb-bar { top: 60px; }
    h1 { font-size: 22px; }
    .hero { padding: 40px 0 30px; }
        .hero h1 { font-size: 24px; }
    .section { padding: 30px 0; }
    .container { padding: 0 16px; }
    .entry-grid { grid-template-columns: 1fr; }
    .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
    .evidence-map { grid-template-columns: repeat(2, 1fr); }
    .content-row .row { gap: 14px; padding: 16px 4px; }
        .content-row .row .icon { width: 48px; height: 48px; }
        .content-row .row .row-content h3 { font-size: 16px; }
        .content-row .row .row-content p { font-size: 13px; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    body[data-page="product-detail"] .product-hero { padding: 24px 20px; }
    body[data-page="product-detail"] .product-section { padding: 24px 20px; }
        body[data-page="product-detail"] .product-section th, body[data-page="product-detail"] .product-section td { padding: 12px 12px; }
        body[data-page="product-detail"] .product-section th { width: 32%; }
    .buy-channels .btn { flex: 1 1 100%; }
    .article-meta-card { padding: 20px; }
        .article-meta-card h1 { font-size: 22px; }
    .section-head.with-tail { flex-direction: column; align-items: flex-start; }
    .breadcrumb-bar .container { flex-wrap: wrap; }
    .back-btn { display: none; }
    .header-row { height: 60px; }
    .logo-text { font-size: 16px; }
    .article-nav { flex-direction: column; gap: 12px; }
        .article-nav .nav-prev, .article-nav .nav-next { width: 100%; }
}

@media (max-width: 540px) {
    body { padding-top: 56px; }
    .breadcrumb-bar { top: 56px; }
    .header-row { height: 56px; gap: 10px; }
    .logo-text { font-size: 15px; letter-spacing: 1px; }
    .product-line-badge { padding: 3px 8px; font-size: 12px; }
    .logo-mark img { height: 24px; }
    .menu-btn { width: 36px; height: 36px; }
    .hero { padding: 30px 0 20px; }
        .hero h1 { font-size: 22px; }
        .hero p { font-size: 14px; }
    .section { padding: 24px 0; }
    .container { padding: 0 14px; }
    .entry-grid { grid-template-columns: 1fr; gap: 12px; }
    .entry-card { padding: 16px; }
    .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; gap: 12px; }
    .evidence-map { grid-template-columns: 1fr; gap: 10px; }
    .content-row .row { gap: 12px; padding: 14px 2px; }
        .content-row .row .icon { width: 44px; height: 44px; }
        .content-row .row .row-content h3 { font-size: 15px; }
        .content-row .row .row-content p { font-size: 12.5px; }
    .section-head h2 { font-size: 18px; }
    .section-head .en { font-size: 12px; }
    .breadcrumb-bar { font-size: 12px; }
    .article-meta-card { padding: 16px; }
        .article-meta-card h1 { font-size: 20px; }
    .article-content { font-size: 15px; line-height: 1.7; }
        .article-content h2 { font-size: 18px; }
        .article-content h3 { font-size: 16px; }
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
        .footer-bottom .copyright { text-align: center; }
    .compliance { padding: 16px; font-size: 12px; }
    .article-nav { gap: 10px; }
        .article-nav .nav-prev, .article-nav .nav-next { padding: 12px; font-size: 13px; }
    .back-to-top,
    .back-to-top-static { width: 44px; height: 44px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: 16px; }
        .back-to-top svg { width: 20px; height: 20px; }
}

/* ========================================
   蛋白粉产品中心 · 产品卡片列表（T_geo_产品栏目模板）
   ======================================== */
body[data-page="product-list"] .product-list { display: flex; flex-direction: column; gap: 16px; }
body[data-page="product-list"] .product-row { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 24px 28px; color: var(--fg); text-decoration: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
    body[data-page="product-list"] .product-row:hover { border-color: rgba(200, 22, 29, 0.35); box-shadow: var(--shadow-card); transform: translateY(-4px); text-decoration: none; color: var(--fg); }
    /* 第一个产品高亮，与截图保持一致 */
    body[data-page="product-list"] .product-row:first-child { background: linear-gradient(180deg, #fff5f5 0%, #fffafa 100%); border-color: #ffd6d6; }
    body[data-page="product-list"] .product-row .p-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
    body[data-page="product-list"] .product-row .p-header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
        body[data-page="product-list"] .product-row .p-header h3 { font-size: 18px; font-weight: 700; margin: 0; color: var(--primary); line-height: 1.4; }
    body[data-page="product-list"] .product-row .p-slogan { font-size: 14px; color: var(--muted-fg); line-height: 1.7; margin: 0; }
    body[data-page="product-list"] .product-row .p-attrs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; font-size: 14px; line-height: 1.7; }
    body[data-page="product-list"] .product-row .p-attr { display: flex; gap: 6px; }
        body[data-page="product-list"] .product-row .p-attr b { color: var(--fg); font-weight: 600; flex-shrink: 0; }
        body[data-page="product-list"] .product-row .p-attr span { color: var(--muted-fg); min-width: 0; }

@media (max-width: 768px) {
    body[data-page="product-list"] .product-row { padding: 20px; }
        body[data-page="product-list"] .product-row .p-attrs { grid-template-columns: 1fr; gap: 6px; }
        body[data-page="product-list"] .product-row .p-header { gap: 10px; }
}

@media (max-width: 540px) {
    body[data-page="product-list"] .product-row { padding: 16px; border-radius: var(--radius-sm); }
        body[data-page="product-list"] .product-row .p-header h3 { font-size: 16px; }
        body[data-page="product-list"] .product-row .p-slogan { font-size: 13px; }
        body[data-page="product-list"] .product-row .p-attrs { font-size: 13px; gap: 5px; }
}

/* ========================================
   栏目页（T_geo_栏目模板）间距优化 · 简洁大方
   仅作用于 data-page="home"，不影响文章/产品页
   ======================================== */
body[data-page="home"] .breadcrumb-bar { padding: 16px 0; }

/* 首页 Hero：更大留白 + 双侧品牌红光晕，标题上方渐变装饰线（编辑排版风格），
   padding/字号用 clamp 平滑适配各尺寸屏幕 */
body[data-page="home"] .hero {
    padding: 48px 0 36px;
    padding: clamp(48px, 6.5vw, 84px) 0 clamp(36px, 5vw, 64px);
  
}
/* 栏目页（区别于首页）：栏目描述常较短，收紧 Hero 上下留白，避免内容少时大片空白；
   h1 字号同步收一档，使紧凑 Hero 比例协调。仅作用于 .page-channel，首页不受影响 */
body.page-channel .hero { padding: clamp(28px, 3.4vw, 44px) 0 clamp(14px, 1.8vw, 26px); }
    body.page-channel .hero h1 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 14px; }
    body.page-channel .section { padding-top: clamp(24px, 3vw, 36px); }
    body[data-page="home"] .hero h1 {
        margin: 0 auto 22px;
        font-size: 28px;
        font-size: clamp(26px, 4vw, 44px);
        letter-spacing: 0.02em;
    }   
    body[data-page="home"] .hero .hero-lede {
        text-align: left; max-width: 760px; margin: 0 auto;
        color: #565656; font-size: 15px; font-size: clamp(14.5px, 1.05vw, 16px); line-height: 2;
    }

body[data-page="home"] .section { padding: 36px 0; padding: clamp(36px, 4.5vw, 56px) 0; }

body[data-page="home"] .content-row .row { transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
    /* 简单大气：中性浅灰底替代浅红底，去掉阴影，仅以标题/箭头变色做反馈 */
    body[data-page="home"] .content-row .row:hover { color: var(--primary); background: #fafafa; border-radius: 10px; }

    /* 栏目列表首行：去掉顶部边框，使与上方标题间距比例协调（简洁大方） */
    body[data-page="home"] .content-row .row:first-child { border-top: none; }
    body[data-page="home"] .content-row .row:first-child { padding-top: 0; }
/* 标题区(.section-head)下方 40px，首行内容顶部内边距收敛为 0，
   由 .section-head 的 margin-bottom 主导上方间距，避免双份留白、上下节奏统一 */
body[data-page="home"] .content-row { margin-top: 0; }

/* 设备兼容：窄屏列表行更紧凑，保持可读与点击区域 */
@media (max-width: 640px) {
    body[data-page="home"] .content-row .row { padding: 16px 2px; gap: 14px; }
        body[data-page="home"] .content-row .row .row-content h3 { font-size: 16px; }
        body[data-page="home"] .content-row .row .row-content p { font-size: 13px; }
        body[data-page="home"] .content-row .row .row-arrow { width: 16px; height: 16px; }
}

/* ========================================================
   首页（T_geo_首页模版）视觉升级 · 2026-09 v2
   目标：更高级的留白节奏、卡片质感与克制的品牌红点缀
   全部作用域限定在 body[data-page="home"]，不影响其他页面
   ======================================================== */

/* 1. 区块标题：eyebrow 小标 + 更大主标题，拉开字体层级 */
body[data-page="home"] .hero2 {
    padding: 48px 0 12px;
    padding: clamp(44px, 6vw, 76px) 0 clamp(10px, 2vw, 20px);
}
    body[data-page="home"] .hero2 h2 {
        display: flex; flex-direction: column; align-items: center; gap: 10px;
        margin: 0 auto;
        font-size: 21px;
        font-size: clamp(21px, 2.3vw, 26px);
        letter-spacing: 0.02em;
    }
    body[data-page="home"] .hero2 h2::before {
        content: attr(data-eyebrow); font-size: 11px; font-weight: 600;
        letter-spacing: 4px; line-height: 1.2; color: rgba(200, 22, 29, 0.85);
    }
    body[data-page="home"] .hero2 .hero-lede {
        max-width: 700px; margin: 14px auto 0;
        font-size: 15px; line-height: 1.9; color: #6b6b6b;
    }

/* 2. 入口卡片：大圆角、细边框、分层柔和阴影 + hover 顶部红渐变发丝线与图标渐变填充 */
body[data-page="home"] .entry-grid { gap: 24px; align-items: stretch; }
body[data-page="home"] .entry-card {
    position: relative; border-radius: 14px; padding: 22px 26px; gap: 16px;
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center;
    height: 100%;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03), 0 12px 32px -24px rgba(20, 20, 20, 0.10);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
    body[data-page="home"] .entry-card::before {
        content: ''; position: absolute; top: -1px; left: 26px; right: 26px; height: 2px; border-radius: 2px;
        background: linear-gradient(90deg, rgba(255, 29, 37, 0), rgba(255, 29, 37, 0.85), rgba(255, 29, 37, 0));
        opacity: 0; transition: opacity 0.35s ease;
    }
    body[data-page="home"] .entry-card:hover {
        transform: translateY(-6px); border-color: rgba(255, 29, 37, 0.30);
        box-shadow: 0 22px 48px -22px rgba(200, 22, 29, 0.28), 0 4px 12px rgba(20, 20, 20, 0.05);
    }
    body[data-page="home"] .entry-card:hover::before { opacity: 1; }
    body[data-page="home"] .entry-card .icon {
        flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px;
        background: linear-gradient(135deg, #fef2f2, #ffe9eb);
        box-shadow: inset 0 0 0 1px rgba(255, 29, 37, 0.10);
        transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
    }
    body[data-page="home"] .entry-card:hover .icon {
        background: linear-gradient(135deg, #ff3b41, #c8161d); color: var(--primary-fg);
        box-shadow: 0 12px 24px -10px rgba(255, 29, 37, 0.55);
        transform: scale(1.05) rotate(-5deg);
    }
    body[data-page="home"] .entry-card h3 { flex: 1 1 auto; margin: 0; font-size: 17px; letter-spacing: 0.02em; transition: color 0.25s ease; }
    body[data-page="home"] .entry-card:hover h3,
    body[data-page="home"] .entry-card:focus-visible h3 { color: var(--primary); }
    body[data-page="home"] .entry-card p { flex: 1 1 100%; margin: 0; color: #757575; line-height: 1.75; }
    body[data-page="home"] .entry-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
    /* 描述固定两行保持卡片等高；不支持 line-clamp 的旧浏览器自动退化为不截断 */
    body[data-page="home"] .entry-card p {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
        line-clamp: 2; overflow: hidden;
        min-height: 3.5em; /* 预留两行高度，单行描述也与其他卡片等高 */
    }

/* 2.1 首页两大模块明确区分（法规：知识科普 vs 保健食品 须可辨识，但克制不抢眼）
       策略：用清晰文字徽章做“明确区分”主体 + 冷灰/柔粉的克制色温差异，而非大色块 */
/* 模块徽章：明确标注监管类别，描边+柔和底色，文字级区分不抢眼 */
body[data-page="home"] .hero2--knowledge .container,
body[data-page="home"] .hero2--products .container { display: flex; flex-direction: column; align-items: center; }

/* 知识科普：冷灰调，白卡中性图标，eyebrow 中性灰，去红发丝线 */
body[data-page="home"] .hero2--knowledge h2::before { color: var(--ink-2); }
body[data-page="home"] .entry-grid--knowledge .entry-card::before { display: none; }
body[data-page="home"] .entry-grid--knowledge .entry-card .icon {
    background: linear-gradient(135deg, #f1f3f5, #e6e9ee); color: #6b7280;
    box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.06);
}
body[data-page="home"] .entry-grid--knowledge .entry-card:hover {
    border-color: rgba(20, 20, 20, 0.18);
    box-shadow: 0 22px 48px -22px rgba(20, 20, 20, 0.22), 0 4px 12px rgba(20, 20, 20, 0.05);
}
body[data-page="home"] .entry-grid--knowledge .entry-card:hover .icon {
    background: linear-gradient(135deg, #5b6470, #3a414b); color: #fff;
    box-shadow: 0 12px 24px -10px rgba(20, 20, 20, 0.35); transform: scale(1.05);
}

/* 保健食品：克制的柔粉调（非大红块），eyebrow 用沉稳红，卡片柔粉底+红描边+常驻红图标，
   模块顶部加一道极淡发丝线，明确划出“另一类”区块 */
body[data-page="home"] .hero2--products { border-top: 1px solid var(--border-subtle); }
body[data-page="home"] .hero2--products h2::before { color: #c8161d; }
body[data-page="home"] .entry-grid--products .entry-card {
    background: #fdeaea; border-color: #f3c9c9;
}
body[data-page="home"] .entry-grid--products .entry-card .icon {
    background: linear-gradient(135deg, #ff3b41, #c8161d); color: var(--primary-fg);
    box-shadow: 0 10px 20px -10px rgba(255, 29, 37, 0.5);
}
body[data-page="home"] .entry-grid--products .entry-card:hover {
    border-color: #e89a9a;
    box-shadow: 0 22px 48px -20px rgba(200, 22, 29, 0.34), 0 4px 12px rgba(20, 20, 20, 0.05);
}
body[data-page="home"] .entry-grid--products .entry-card:hover .icon { transform: scale(1.06); }

/* 3. 品牌背书区：长文阅读排版（限宽、2 倍行距）+ 区块间距 */
body[data-page="home"] .brand-block .hero-lede {
    text-align: left; max-width: 880px; margin-top: 16px;
    font-size: 15px; line-height: 2.05; color: #565656;
}
body[data-page="home"] .brand-block .hero-lede + h2 { margin-top: 56px; }

/* 3.1 栏目内容列表（T_geo_栏目模板）：全宽简单大气 + 行尾箭头引导
      首页无 .content-row，此组规则只影响栏目列表页；不限宽，保持整页通透 */
body[data-page="home"] .content-row .row { padding: 24px 12px; gap: 18px; border-radius: 10px; border-bottom-color: #f2f2f2; }
    body[data-page="home"] .content-row .row .row-content { gap: 6px; }
        body[data-page="home"] .content-row .row .row-content h3 { font-size: 18px; letter-spacing: 0.01em; }
        body[data-page="home"] .content-row .row .row-content p {
            display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
            line-clamp: 2; overflow: hidden;
        }
        body[data-page="home"] .content-row .row .row-content .row-date { font-size: 12px; letter-spacing: 0.02em; color: #6b6b6b; }
    body[data-page="home"] .content-row .row .row-arrow {
        flex: 0 0 auto; width: 18px; height: 18px; color: #b0b0b0;
        opacity: 0.45; transition: transform 0.25s ease, color 0.25s ease, opacity 0.25s ease;
    }
    body[data-page="home"] .content-row .row:hover .row-arrow { color: var(--primary); opacity: 1; transform: translateX(3px); }
/* 栏目页 Hero 短描述：单行短句与居中标题同轴 */
body[data-page="home"] .hero .hero-lede-center { text-align: center; }

/* 4. 进场动效：Hero 载入上浮；下方区块滚动进入视口时淡入上移（渐进增强） */
@keyframes homeRise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
}
/* 全站统一进场动效：Hero/标题载入上浮；下方区块滚动进入视口时淡入上移（渐进增强）。
   已去除 data-page="home" 限定，作用于首页/栏目/文章/产品/列表等所有页面 */
body .hero h1,
body .product-hero h1,
body article h1 { animation: homeRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.05s both; }
body .hero .hero-lede { animation: homeRise 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.16s both; }
/* 仅当页尾脚本成功添加 .anim-ready 后才隐藏；脚本被禁用时内容始终可见 */
body .reveal { transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1); }
/* 初始隐藏态：仅在页尾脚本成功添加 .anim-ready 后生效，保证无 JS 时内容始终可见（渐进增强） */
body.anim-ready .reveal { opacity: 0; transform: translateY(24px); }
body.anim-ready .reveal.is-visible { opacity: 1; transform: none; }

/* 设备兼容：中等屏收紧网格间距 */
@media (max-width: 1024px) {
    body[data-page="home"] .entry-grid { gap: 16px; }
}
@media (max-width: 768px) {
    body[data-page="home"] .entry-card { padding: 24px 20px 20px; border-radius: 12px; }
    body[data-page="home"] .entry-card .icon { width: 50px; height: 50px; border-radius: 12px; }
    body[data-page="home"] .brand-block .hero-lede { line-height: 1.95; }
}
@media (max-width: 540px) {
    body[data-page="home"] .entry-grid { gap: 12px; }
    body[data-page="home"] .entry-card { padding: 20px 16px 16px; gap: 12px; }
    body[data-page="home"] .entry-card .icon { width: 46px; height: 46px; border-radius: 11px; }
    body[data-page="home"] .entry-card .icon svg { width: 22px; height: 22px; }
    body[data-page="home"] .entry-card h3 { font-size: 16px; }
    body[data-page="home"] .entry-card p { font-size: 13.5px; }
    body[data-page="home"] .hero2 h2::before { letter-spacing: 3px; }
}

/* 设备兼容：触屏关闭粘滞 hover 位移，仅保留色彩反馈 */
@media (hover: none) {
    body[data-page="home"] .entry-card:hover { transform: none; box-shadow: 0 1px 2px rgba(20, 20, 20, 0.03), 0 12px 32px -24px rgba(20, 20, 20, 0.10); }
        body[data-page="home"] .entry-card:hover .icon { transform: none; }
}
/* 设备兼容：尊重系统“减少动效”设置 */
@media (prefers-reduced-motion: reduce) {
    body .hero h1,
    body .hero .hero-lede,
    body .product-hero h1,
    body article h1 { animation: none; }
    body .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    body[data-page="home"] .entry-card,
    body[data-page="home"] .entry-card .icon,
    body[data-page="home"] .entry-card h3,
    body[data-page="home"] .entry-card::before,
    body[data-page="home"] .content-row .row,
    body[data-page="home"] .content-row .row .row-content h3,
    body[data-page="home"] .content-row .row .row-arrow,
    .site-nav a::after { transition: none; }
    body[data-page="home"] .entry-card:hover { transform: none; }
        body[data-page="home"] .entry-card:hover .icon { transform: none; }
}

/* ============================================================
   P0-1 / P3 全局增强：从首页 v2 抽出的“页面无关”通用能力
   覆盖 FAQ / 产品中心 / 文章详情 / 科普证据 等所有页面，
   使其加载同一套 CSS 即获得与首页一致的视觉语言与可访问性基线
   ============================================================ */

/* 键盘焦点可见性（a11y）：统一品牌红描边焦点环 */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: var(--radius-sm); }
:focus:not(:focus-visible) { outline: none; }

/* 尊重系统“减少动效”：全站兜底降级（首页 v2 已有针对性规则） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 极窄屏（≤360px）：长站点名防溢出固定高度头部 */
@media (max-width: 360px) {
  .header-row { height: auto; flex-wrap: wrap; padding: 8px 0; gap: 6px; }
  .logo-text { font-size: 13px; letter-spacing: 0.5px; }
  .logo-mark img { height: 22px; }
}