/* 强化：统一自定义菜单与默认菜单的颜色（覆盖先前规则与浏览器 visited 默认紫色） */
/* 默认方案（当未选择 brand/white/custom 时生效） */
.navbar:not(.header-color-brand):not(.header-color-white):not(.header-color-custom) .primary-menu a,
.navbar:not(.header-color-brand):not(.header-color-white):not(.header-color-custom) .primary-menu a:link,
.navbar:not(.header-color-brand):not(.header-color-white):not(.header-color-custom) .primary-menu a:visited { color: var(--text); }
.navbar:not(.header-color-brand):not(.header-color-white):not(.header-color-custom) .primary-menu a:hover,
.navbar:not(.header-color-brand):not(.header-color-white):not(.header-color-custom) .primary-menu a:focus,
.navbar:not(.header-color-brand):not(.header-color-white):not(.header-color-custom) .primary-menu .current-menu-item > a { color: var(--primary); }

/* 品牌方案 */
.navbar.header-color-brand .primary-menu a,
.navbar.header-color-brand .primary-menu a:link,
.navbar.header-color-brand .primary-menu a:visited { color: var(--primary) !important; }
.navbar.header-color-brand .primary-menu a:hover,
.navbar.header-color-brand .primary-menu a:focus,
.navbar.header-color-brand .primary-menu .current-menu-item > a { color: var(--secondary) !important; }

/* 白色方案 */
.navbar.header-color-white .primary-menu a,
.navbar.header-color-white .primary-menu a:link,
.navbar.header-color-white .primary-menu a:visited { color: #fff !important; }
.navbar.header-color-white .primary-menu a:hover,
.navbar.header-color-white .primary-menu a:focus,
.navbar.header-color-white .primary-menu .current-menu-item > a { color: #e5e7eb !important; }

/* 自定义方案：使用内联 CSS 变量 --nav-link / --nav-hover */
.navbar.header-color-custom { --nav-link: var(--text); --nav-hover: var(--primary); }
.navbar.header-color-custom .primary-menu a,
.navbar.header-color-custom .primary-menu a:link,
.navbar.header-color-custom .primary-menu a:visited { color: var(--nav-link) !important; }
.navbar.header-color-custom .primary-menu a:hover,
.navbar.header-color-custom .primary-menu a:focus,
.navbar.header-color-custom .primary-menu .current-menu-item > a { color: var(--nav-hover) !important; }
/* Override to ensure latest homepage UI applies even under cache/minifiers */
:root{ --gray-50:#f9fafb; }
/* 取消全局容器宽度强制，使用主题原生容器宽度，避免局部宽度不一致 */
/* .container{ max-width:1140px !important; } */
.section{ padding:80px 0 !important; background:#fff; }
.section.alt{ background:var(--gray-50) !important; }

/* Hero 区域：全宽与背景模式（变量由模板传入） */
.hero{ position:relative; overflow:hidden; }
.hero.is-fullwidth .container{ max-width:100% !important; padding-left:24px; padding-right:24px; }

/* 背景：纯色 */
.hero.hero--bg-solid{ background: var(--hero-bg1, #1e3a8a); color:#fff; }

/* 背景：渐变 */
.hero.hero--bg-gradient{ background: linear-gradient(var(--hero-angle,135deg), var(--hero-bg1,#1e3a8a) 0%, var(--hero-bg2,#3730a3) 100%); color:#fff; }

/* 背景：图片（用伪元素承载以控制透明度） */
.hero.hero--bg-image{ background: var(--hero-bg1, #0b1020); color:#fff; }
.hero.hero--bg-image::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image: var(--hero-bg-image);
  background-size: cover; background-position: center;
  opacity: var(--hero-bg-opacity, .8);
}
.hero .container, .hero *{ position:relative; z-index:1; }

/* 背景：JS 预设（颜色用渐变打底，具体效果由 JS 叠加） */
.hero.hero--bg-js{ background: var(--hero-bg1, #1e3a8a); color:#fff; }
.hero .hero-js-layer{ position:absolute; inset:0; z-index:0; pointer-events:none; }
/* Features */
.features .features-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; margin-top:32px; }
.features .feature-card{ border-radius:16px; box-shadow:0 8px 28px rgba(16,24,40,.08); }
.features .feature-card .feature-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.features .feature-card .feature-head .feature-icon{ margin:0; }
.features .feature-card .feature-title{ font-weight:700; margin:0; }
/* Workflow */
.workflow .step{ border-radius:12px; box-shadow:0 6px 20px rgba(16,24,40,.06); }
/* Quick Start */
.quick-start .step-card .card{ border-radius:12px; box-shadow:0 6px 20px rgba(16,24,40,.06); }
/* Why Us：根据示例 UI 改为“无卡片状”扁平展示 */
.why-us .benefit-item{ border-radius:0; box-shadow:none; background:transparent; padding:0; gap:12px !important; }
.why-us .benefit-icon{ width:32px; height:32px; border-radius:6px; background:transparent !important; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:2px; }
.why-us .benefit-content h3{ margin-top:2px; line-height:1.3; }
/* FAQ */
.faq .faq-item{ border-radius:10px; box-shadow:0 4px 16px rgba(16,24,40,.05); }
.faq .faq-question{ font-weight:600; cursor:pointer; }
.faq .faq-answer[hidden]{ display:none !important; }

/* Footer 4 columns alignment (use flex for broader compatibility) */
.footer .footer-content{ display:flex !important; flex-wrap:wrap; gap:32px; align-items:flex-start; }
/* 四列栅格（无 Logo 列） */
.footer .footer-content > .footer-column{ flex:0 0 calc((100% - 32px*3)/4); max-width:calc((100% - 32px*3)/4); min-width:200px; }
.footer .footer-column h3, .footer .footer-column .widget-title{ font-size:16px; font-weight:700; margin:0 0 12px; color:#e6edf3; }
.footer .footer-content > .footer-column{ margin-top:0 !important; }
.footer .footer-column .widget{ margin-top:0 !important; }
.footer .footer-column p{ margin-top:0; }
.footer .footer-column ul{ list-style:none; margin:0; padding:0; }
.footer .footer-column li{ margin:8px 0; line-height:1.7; }
.footer .footer-column a{ color:#cfd8e3; text-decoration:none; }
.footer .footer-column a:hover{ color:#e6edf3; }
.footer .footer-bottom{ width:100%; margin-top:16px; text-align:center; }
/* Footer logo occupy its own row (sample UI without logo in columns) */
.footer .footer-logo{ display:block; flex:0 0 100%; max-width:100%; margin-bottom:16px; }
/* 隐藏空的小工具块（Gutenberg block widgets 可能输出空 section）*/
.footer .footer-content > section.widget.widget_block:empty{ display:none !important; }
.footer .footer-content > section.widget.widget_block:not(:has(*)){ display:none !important; }

@media (max-width: 992px){
  .footer .footer-content{ gap:24px; }
  .footer .footer-content > .footer-column{ flex:0 0 calc((100% - 24px)/2); max-width:calc((100% - 24px)/2); }
}
@media (max-width: 480px){
  .footer .footer-content > .footer-column{ flex:0 0 100%; max-width:100%; }
}

/* 移动端菜单显示逻辑（与 assets/js/navigation.js 的 .is-open 对应） */
@media (max-width: 768px){
  /* 主菜单：默认隐藏，.is-open 显示为列方向 */
  .primary-menu{ display:none; flex-direction:column; gap:1rem; }
  .primary-menu.is-open{ display:flex; }

  /* 子菜单：默认隐藏，.is-open 显示 */
  .primary-menu .sub-menu{ display:none; }
  .primary-menu .sub-menu.is-open{ display:block; }
}

/* 无侧边栏：主体拉伸全宽 */
.content-area.no-sidebar{ display:block; }
.content-area.no-sidebar .main-content{ width:100%; max-width:100%; flex:1 1 100%; }

/* 统一三种布局：右侧栏 / 左侧栏 / 无侧栏 */
.content-area{ display:flex; align-items:flex-start; gap:24px; }
.content-area .main-content{ flex:1 1 0; min-width:0; }
.content-area .sidebar{ flex:0 0 300px; max-width:300px; position:relative; overflow:visible; }
/* 保证 sticky 在 flex 布局下工作更稳定 */
.content-area .sidebar{ align-self:flex-start; }

/* 显式方向类（若有） */
.content-area.layout-left .sidebar{ order:0; }
.content-area.layout-left .main-content{ order:1; }
.content-area.layout-right .main-content{ order:0; }
.content-area.layout-right .sidebar{ order:1; }

/* 平板及以下：堆叠 */
@media (max-width: 992px){
  .content-area{ flex-direction:column; }
  .content-area .sidebar{ flex:0 0 auto; max-width:100%; width:100%; }
}

/* 白色卡片化：当站点背景非白色时，主体与侧边栏以白色卡片承载内容 */
.content-area .main-content,
.content-area .sidebar{
  background-color:#fff;
  border-radius:5px;
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
}
.content-area .main-content{ padding:20px; }
.content-area .sidebar{ padding:16px; }

/* 卡片与容器的间距优化 */
.content-area{ padding-top:8px; padding-bottom:24px; }
@media (max-width: 768px){
  .content-area .main-content{ padding:16px; }
  .content-area .sidebar{ padding:14px; }
}

/* 侧边栏最后一个区块：悬浮（Sticky）
   新结构：.sidebar-area 为外层；其直接子级 .sidebar 为每个区块容器 */
body.sidebar-sticky-last .content-area .sidebar-area > .sidebar:last-of-type{
  position: -webkit-sticky;
  position: sticky;
  top: var(--df-sticky-top, 84px) !important;
  z-index: 2;
}
/* 移除过宽的选择器，避免将整个包裹容器设为 sticky 导致“整列悬浮”错觉 */
/* body.sidebar-sticky-last .content-area .sidebar > *:last-child{ ... }  -- removed */
@media (max-width: 768px){
  body.sidebar-sticky-last .content-area .sidebar-area > .sidebar:last-of-type{ position: static; top:auto; }
  /* 同步移除移动端下对包裹容器的回退规则 */
  /* body.sidebar-sticky-last .content-area .sidebar > *:last-child{ position: static; top:auto; }  -- removed */
}

/* 桌面端兜底（column 模式）：让整个侧边栏列 sticky */
@media (min-width: 769px){
  /* 兼容旧结构：当最后一个 sticky 元素是 .sidebar 内部的最后一个 .widget 时（而非 .sidebar 本身） */
  body.sidebar-sticky-last .content-area .sidebar > .widget:last-of-type{
    position: -webkit-sticky;
    position: sticky;
    top: var(--df-sticky-top, 84px) !important;
    z-index: 2;
  }
  body.sidebar-sticky-column .content-area .sidebar-area.df-sticky-fallback{ position: sticky; top: var(--df-sticky-top, 84px); align-self:flex-start; }
}

/* JS 兜底启用时，关闭 CSS sticky，避免双重逻辑互相抢占 */
@media (min-width: 769px){
  body.df-sticky-fallback-on.sidebar-sticky-last .content-area .sidebar-area > .sidebar:last-of-type,
  body.df-sticky-fallback-on.sidebar-sticky-last .content-area .sidebar > .widget:last-of-type{
    position: static !important;
    top: auto !important;
  }
}

/* 返回顶部按钮：确保显示在最前 */
.back-to-top, #back-to-top, .scroll-to-top, .gotop, .go-top{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  pointer-events: auto;
}

/* 文章上下篇导航标题过长时省略号处理 */
/* 上下篇导航：左右各占一半，标题溢出省略 */
.post-navigation .nav-links,
.navigation.post-navigation .nav-links,
.nav-links.post-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.post-navigation .nav-previous, .post-navigation .nav-next,
.navigation.post-navigation .nav-previous, .navigation.post-navigation .nav-next,
.nav-links.post-nav .nav-previous, .nav-links.post-nav .nav-next{ flex:1 1 0; max-width:50%; }
.post-navigation .nav-previous a, .post-navigation .nav-next a,
.navigation.post-navigation .nav-previous a, .navigation.post-navigation .nav-next a,
.nav-links.post-nav .nav-previous a, .nav-links.post-nav .nav-next a{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.post-navigation .nav-previous a, .navigation.post-navigation .nav-previous a, .nav-links.post-nav .nav-previous a{ text-align:left; }
.post-navigation .nav-next a, .navigation.post-navigation .nav-next a, .nav-links.post-nav .nav-next a{ text-align:right; }

/* 适配自定义结构 .article-navigation */
.article-navigation{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.article-navigation .nav-previous, .article-navigation .nav-next{ flex:1 1 0; max-width:50%; }
.article-navigation .nav-title{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.article-navigation .nav-previous .nav-title{ text-align:left; }
.article-navigation .nav-next .nav-title{ text-align:right; }

/* 面包屑（与主体风格一致的白色卡片化） */
.breadcrumb-bar{
  background:transparent; /* 不再使用全宽白色背景 */
  border:0;
  box-shadow:none;
  color: var(--text);
}
.breadcrumb-bar .container{ 
  padding-top:10px; 
  padding-bottom:10px; 
  color: var(--text);
  background:#fff;              /* 白色背景，仅限主体宽度区域 */
  border-radius:5px;            /* 与主体卡片统一 */
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
}
.breadcrumb-bar a{ color: var(--text) !important; text-decoration:none; }
.breadcrumb-bar a:hover{ color: var(--primary) !important; }
/* 强化面包屑文本颜色统一（兼容不同主题/插件输出结构） */
.breadcrumb-bar,
.breadcrumb-bar .breadcrumb,
.breadcrumb-bar .breadcrumb li,
.breadcrumb-bar .breadcrumb a,
.breadcrumb-bar .breadcrumbs,
.breadcrumb-bar .breadcrumbs a{ color: var(--text) !important; }

/* 当面包屑显示在主体上方（内容区内）时的微调 */
.article-breadcrumb{ 
  background:#fff;
  border-radius:5px;
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  padding:10px 14px; 
  margin-bottom:12px;
}
.article-breadcrumb, .article-breadcrumb a{ color: var(--text) !important; }
.article-breadcrumb a:hover{ color: var(--primary) !important; }

/* 导航下方若已渲染 .breadcrumb-bar，则紧随其后的 .page-spacer 一律隐藏（文章/搜索/归档） */
body.single .breadcrumb-bar + .page-spacer,
body.search .breadcrumb-bar + .page-spacer,
body.archive .breadcrumb-bar + .page-spacer{ display:none !important; height:0 !important; }

/* ========================= Slogan 单列模块 ========================= */
.slogan{
  --s1-bg: #fff;
  --s1-color: #111827;
  --s1-pad-y: 56px;
  --s1-pad-x: 0px;
  --s1-title-size: 2rem;
  --s1-grad: none; /* 通过类赋值，优先层叠在纯色之上 */
  background: var(--s1-grad), var(--s1-bg);
  color: var(--s1-color);
  padding: var(--s1-pad-y) var(--s1-pad-x);
}
.slogan .container{ text-align: center; max-width: 940px; margin-left:auto; margin-right:auto; }
.slogan .slogan-title{ margin:0 0 .5rem; font-size: var(--s1-title-size); line-height:1.3; font-weight:700; }
.slogan .slogan-desc{ margin:0; opacity:.85; font-size:1.05rem; line-height:1.8; }
.slogan.has-divider{ border-top: 1px solid rgba(17,24,39,.08); }
.slogan.grad-soft1{ --s1-grad: linear-gradient(180deg, rgba(59,130,246,0.06) 0%, rgba(168,85,247,0.06) 100%); }
.slogan.grad-soft2{ --s1-grad: linear-gradient(180deg, rgba(243,244,246,0.85) 0%, rgba(255,255,255,0.85) 100%); }

/* ========================= Slogan 2-column 模块 ========================= */
.slogan-2col{
  /* 接收自定义器注入的 CSS 变量 */
  --s2-bg: #fff;
  --s2-color: #111827;
  --s2-fit: contain;
  --s2-radius: 8px;
  --s2-shadow: none;
  --s2-grad: none; /* 通过类赋值，优先层叠在纯色之上 */
  background: var(--s2-grad), var(--s2-bg);
  color: var(--s2-color);
  padding: 56px 0;
}
.slogan-2col.has-divider{ border-top: 1px solid rgba(17,24,39,.08); }
.slogan-2col.grad-soft1{ --s2-grad: linear-gradient(180deg, rgba(59,130,246,0.06) 0%, rgba(168,85,247,0.06) 100%); }
.slogan-2col.grad-soft2{ --s2-grad: linear-gradient(180deg, rgba(243,244,246,0.85) 0%, rgba(255,255,255,0.85) 100%); }
.slogan-2col .container{
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 28px;
  align-items: center;
}
.slogan-2col.align-center .slogan2-left,
.slogan-2col.align-center .slogan2-title,
.slogan-2col.align-center .slogan2-desc{ text-align: center; margin-left:auto; margin-right:auto; }
.slogan-2col .slogan2-right{ text-align: center; }
.slogan-2col .slogan2-right img{
  max-width: 100%;
  height: auto;
  object-fit: var(--s2-fit);
  border-radius: var(--s2-radius);
  box-shadow: var(--s2-shadow);
}

/* 响应式断点（按类控制） */
.slogan-2col.bp-1200 .container{ grid-template-columns: 3fr 2fr; }
@media (max-width: 1200px){ .slogan-2col.bp-1200 .container{ grid-template-columns: 1fr; } }
.slogan-2col.bp-992 .container{ grid-template-columns: 3fr 2fr; }
@media (max-width: 992px){ .slogan-2col.bp-992 .container{ grid-template-columns: 1fr; } }
.slogan-2col.bp-768 .container{ grid-template-columns: 3fr 2fr; }
@media (max-width: 768px){ .slogan-2col.bp-768 .container{ grid-template-columns: 1fr; } }

/* ========================= Hero 区高度与布局稳定 ========================= */
/* 目的：在多产品切换时，标题/副标题/按钮/右图的占位保持一致，避免视觉跳动 */
.hero{
  /* 桌面端为英雄区提供稳定的最小高度，避免整体高度抖动 */
  min-height: 560px;
}

.hero .hero-content{
  /* 确保内容列参与高度撑起，而不是随文本塌陷 */
  display: block;
}

/* 统一标题占位：依照 hero.php 的内联字号 font-size:3rem 与 line-height:1.2 进行计算 */
.hero .hero-title{
  /* 可按需调整行数（桌面端默认 2 行） */
  --hero-title-lines: 2;
  /* 与内联 line-height 保持一致 */
  line-height: 1.2;
  /* 计算占位：字号 × 行高 × 行数 */
  min-height: calc(3rem * 1.2 * var(--hero-title-lines));
  /* 避免极端长词导致布局抖动 */
  overflow-wrap: anywhere;
}

/* 统一副标题占位：hero.php 默认 font-size:1.25rem，未强制 line-height，这里以 1.5 推断 */
.hero .hero-description{
  --hero-desc-lines: 3; /* 桌面端默认 3 行占位，可按需调整 */
  line-height: 1.5;
  min-height: calc(1.25rem * 1.5 * var(--hero-desc-lines));
  overflow-wrap: anywhere;
}

/* 按钮区占位：即便单按钮/双按钮切换，高度也不致抖动 */
.hero .hero-buttons{
  --hero-btn-min: 44px; /* 单行按钮高度（含内外边距的经验值） */
  min-height: var(--hero-btn-min);
  align-items: center;
}

/* 右侧图片区域：给出稳定的占位比例或最小高度，避免随图片尺寸浮动 */
.hero .hero-image{
  /* 若浏览器支持，优先用比例锁定占位；不支持时以 min-height 兜底 */
  aspect-ratio: 3 / 2;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .hero-image .hero-image-media{
  /* 图片自身随最大宽度变化，但容器已稳定，不会影响整体高度 */
  max-width: 100%;
  height: auto;
}

/* 响应式微调：在较窄视口下降低占位，避免小屏出现过度留白 */
@media (max-width: 992px){
  .hero{ min-height: 480px; }
  .hero .hero-title{ --hero-title-lines: 2; }
  .hero .hero-description{ --hero-desc-lines: 3; }
  .hero .hero-image{ min-height: 300px; }
}
@media (max-width: 600px){
  .hero{ min-height: 420px; }
  .hero .hero-title{ --hero-title-lines: 2; }
  .hero .hero-description{ --hero-desc-lines: 2; }
  .hero .hero-image{ aspect-ratio: auto; min-height: 220px; }
}

/* 可选：当不希望截断而只想“保证至少占位”时，以上 min-height 将避免跳动；
   若需要严格限制最大行数，可自行添加 line-clamp，但注意与多语言内容兼容性。 */

/* ========================= Hero 固定栅格布局（避免随文案推挤） ========================= */
/* 思路：
   1) 覆盖内联 align-items:center → stretch，让左列可充满高度；
   2) 左列使用 Grid 固定三行（标题/副标题/按钮），多文案在各自区域内滚动或隐藏，不再推挤按钮或图片；
   3) 保持右侧图片容器居中对齐与固定占位；
   注：仅使用 CSS，不改变现有 HTML/JS 结构与事件。 */
.hero > .container{
  align-items: stretch !important; /* 覆盖内联样式，令列满高以便网格生效 */
}

.hero .hero-content{
  display: grid;
  /* 标题/副标题/按钮 三行固定高度（可由响应式覆盖变量） */
  --df-hero-title-h: calc(3rem * 1.2 * 2);      /* 约两行标题高度 */
  --df-hero-desc-h:  calc(1.25rem * 1.5 * 3);   /* 约三行副标题高度 */
  --df-hero-tabs-h:  40px;                      /* Tabs 固定高度 */
  --df-hero-btn-h:   52px;                      /* 按钮区固定高度 */
  /* 标题/副标题/按钮/Tabs 四行固定高度（Tabs 位于按钮下方） */
  grid-template-rows: var(--df-hero-title-h) var(--df-hero-desc-h) var(--df-hero-btn-h) var(--df-hero-tabs-h);
  row-gap: 16px;
  height: 100%; /* 占满左列可用高度 */
}

/* 让标题/副标题在自己的网格行内，不再把按钮往下挤 */
.hero .hero-title,
.hero .hero-description{
  margin: 0; /* 避免额外 margin 叠加影响行高计算 */
  overflow: hidden; /* 默认裁剪，配合 clamp 保持固定占位且有省略效果 */
}

/* 对标题/副标题添加行数裁剪，保证固定占位且不因超长文本撑高 */
.hero .hero-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* 与 --df-hero-title-h 的两行占位一致 */
  -webkit-box-orient: vertical;
}
.hero .hero-description{
  display: -webkit-box;
  -webkit-line-clamp: 3;          /* 与 --df-hero-desc-h 的三行占位一致（移动端在媒体查询中整体降为2行） */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.hero .hero-buttons{
  display: flex; /* 保持原有行内布局 */
  align-items: center;
  grid-row: 3; /* 按钮在第三行 */
}

/* Tabs 固定行：不让其推挤按钮与图片位置 */
.hero .hero-content > .df-hero-tabs{
  grid-row: 4; /* Tabs 移至第四行，显示在按钮下方 */
  min-height: var(--df-hero-tabs-h);
  display: flex;
  flex-wrap: nowrap;         /* 禁止换行，避免高度被撑高 */
  align-items: center;
  gap: .5rem;
  overflow-x: auto;          /* 横向滚动以容纳更多标签 */
  overflow-y: hidden;
}

/* Tabs 按钮自身也保持单行与稳定高度 */
.hero .df-hero-tab{
  white-space: nowrap;
  flex: 0 0 auto;            /* 保持按钮宽度自适应，但不折行 */
}

/* 右侧图片列：占满高度并居中，避免随左列变化而上下跳动 */
.hero .hero-image{
  height: 100%;
  min-height: 360px; /* 与上文一致，作为兜底 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .hero-image .hero-image-media{
  max-height: 100%;          /* 图片不超过容器高度，防止撑高 */
  height: auto;
  width: auto;
  object-fit: contain;       /* 保持比例，避免拉伸 */
}

/* 响应式：在窄屏下减小固定行高，避免留白过多 */
@media (max-width: 992px){
  .hero .hero-content{
    --df-hero-title-h: calc(2.4rem * 1.2 * 2); /* 若标题在窄屏变小，可相应调低 */
    --df-hero-desc-h:  calc(1.1rem * 1.5 * 3);
    --df-hero-tabs-h:  36px;
    --df-hero-btn-h:   48px;
  }
}
@media (max-width: 600px){
  .hero .hero-content{
    --df-hero-title-h: calc(2rem * 1.2 * 2);
    --df-hero-desc-h:  calc(1rem * 1.5 * 2);  /* 移动端副标题以两行为主 */
    --df-hero-tabs-h:  32px;
    --df-hero-btn-h:   44px;
  }
  .hero .hero-description{ -webkit-line-clamp: 2; }
  /* 小屏时右图占位进一步减小，避免首屏被撑高 */
  .hero .hero-image{ min-height: 220px; }
}

/* ========================= Hero 丝滑过渡效果（辅助样式） ========================= */
.hero .df-fx{
  transition: opacity var(--df-hero-fx-dur, 280ms) var(--df-hero-fx-ease, cubic-bezier(.22,.61,.36,1)),
              transform var(--df-hero-fx-dur, 280ms) var(--df-hero-fx-ease, cubic-bezier(.22,.61,.36,1));
  will-change: opacity, transform;
}
.hero .df-fx.is-out{
  opacity: 0;
  transform: translateY(var(--df-hero-shift, 6px));
}
.hero.no-translate .df-fx.is-out{
  transform: none !important; /* 当关闭位移或计算得0px时，确保原地淡隐显现 */
}
.hero .df-hero-tab{
  transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}

/* ========================= Products Tabs 模块 ========================= */
.products{ padding: 40px 0; background: #fff; }
.products .container{ border-radius: 12px; background:#fff; box-shadow: 0 10px 30px rgba(0,0,0,.06); overflow:hidden; }

/* 顶部按钮条 */
.products .tab-buttons{ display:flex; background:#f8f9fa; border-bottom:1px solid #e9ecef; overflow:auto; }
.products .tab-button{ flex:1 1 auto; padding:18px 20px; background:none; border:0; font-size:16px; font-weight:600; color:#6c757d; cursor:pointer; transition:all .3s ease; position:relative; white-space:nowrap; }
.products .tab-button:hover{ background-color: rgba(0,123,255,.05); color:#495057; }
.products .tab-button.active{ color:#007bff; }
.products .tab-button.active::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background:#007bff; }
/* 去除点击/聚焦时浏览器默认描边导致的两侧细线 */
.products .tab-button{ border:0; outline:0; appearance:none; -webkit-appearance:none; box-shadow:none; }
.products .tab-button:focus, .products .tab-button:focus-visible{ outline:none; box-shadow:none; }
.products .tab-button:active{ outline:0; box-shadow:none; }

/* 面板区，与示例一致：激活为 flex 布局 */
.products .tab-content{ display:none; padding:30px; opacity:0; transform: translateY(6px); transition: opacity var(--df-hero-fx-dur, 280ms) var(--df-hero-fx-ease, cubic-bezier(.22,.61,.36,1)), transform var(--df-hero-fx-dur, 280ms) var(--df-hero-fx-ease, cubic-bezier(.22,.61,.36,1)); }
.products .tab-content.active{ display:flex; gap:30px; opacity:1; transform: translateY(0); }

/* 左图右文 */
.products .tab-image{ flex:1; border-radius:10px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,.1); }
.products .tab-image img{ width:100%; height:100%; object-fit:cover; transition: transform var(--df-hero-fx-dur, 280ms) ease; }
.products .tab-image:hover img{ transform: scale(1.05); }

.products .tab-text{ flex:1; display:flex; flex-direction:column; justify-content:center; }
.products .tab-text h2{ font-size:28px; margin:0 0 15px; color:#343a40; }
/* 富文本排版：与宣传图文（2列）一致的风格基线 */
.products .tab-text{ --pr-text:#6c757d; --pr-head:#343a40; }
.products .tab-text p{ font-size:16px; line-height:1.8; color:var(--pr-text); margin:0 0 20px; }
.products .tab-text ul, .products .tab-text ol{ padding-left:1.2em; margin:0 0 20px; color:var(--pr-text); }
.products .tab-text li{ margin:6px 0; }
.products .tab-text a{ color:#0d6efd; text-decoration:none; border-bottom:1px dashed rgba(13,110,253,.35); }
.products .tab-text a:hover{ color:#0b5ed7; border-bottom-color:rgba(13,110,253,.6); }
.products .tab-text h3, .products .tab-text h4{ color:var(--pr-head); margin:16px 0 10px; line-height:1.4; }
.products .tab-text blockquote{ margin:0 0 20px; padding:12px 14px; background:#f8f9fa; border-left:3px solid #0d6efd; color:#495057; border-radius:4px; }
.products .tab-text code{ background:#f1f3f5; padding:2px 6px; border-radius:4px; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:.95em; }
.products .tab-text pre{ background:#0b1220; color:#e6edf3; padding:12px; border-radius:6px; overflow:auto; font-size:.95em; line-height:1.6; }

.products .detail-btn{ display:inline-block; padding:12px 25px; background:#007bff; color:#fff; text-decoration:none; border-radius:30px; font-weight:600; transition: all .3s ease; align-self:flex-start; box-shadow:0 4px 15px rgba(0,123,255,.2); }
.products .detail-btn:hover{ background:#0056b3; transform: translateY(-2px); box-shadow:0 6px 20px rgba(0,123,255,.3); }

@media (max-width: 768px){
  .products .tab-content.active{ flex-direction:column; }
  .products .tab-buttons{ flex-direction:column; }
  .products .tab-button.active::after{ width:3px; height:100%; top:0; left:0; }
}