.article-product-page {
  --article-card-surface: var(--ui-surface-card-overlay);
  --article-card-border: rgba(151, 190, 219, 0.38);
  --article-card-shadow: 0px 20px 30px rgba(31, 104, 178, 0.1);
  --article-card-radius: var(--ui-radius-md);
  --article-card-gradient: linear-gradient(#ffffff 00%, #F0F9FF 100%);
  --article-card-gradient-soft: linear-gradient(#ffffff 00%, #F8FBFF 100%);
  --article-page-safe-top: var(--navbar-layout-bar-height);
  --article-text-primary: var(--ui-color-text-strong);
  --article-text-secondary: var(--ui-color-text-body);
  --article-text-inverse: var(--ui-color-white);
  --article-text-inverse-soft: rgba(255, 255, 255, 0.92);
  --article-accent-line: var(--ui-color-brand-blue);
  --article-orbit-border-lg: rgba(0, 120, 212, 0.08);
  --article-orbit-border-md: rgba(0, 120, 212, 0.12);
  --article-orbit-border-sm: rgba(0, 120, 212, 0.50);
  --article-orbit-border-solid: rgba(0, 120, 212, 0.2);
  --article-orbit-surface-lg: rgba(206, 232, 255, 0.2);
  --article-orbit-surface-md: rgba(206, 232, 255, 0.4);
  --article-orbit-surface-sm: rgb(206, 232, 255);
  --article-orbit-surface-solid: rgb(206, 232, 255);
  --article-orbit-wave-duration: 3000ms;
  --article-orbit-wave-easing: cubic-bezier(0.3, 0, 1, 1);
  --article-orbit-wave-opacity: 1;
  --article-orbit-wave-base-size: 68%;
  --article-orbit-wave-scale-from: 1;
  --article-orbit-wave-scale-to: 1.75;
  --article-metric-radius: var(--ui-radius-md);
  --article-metric-surface-top: #E5F4FD;
  --article-metric-surface-bottom: var(--ui-color-brand-blue);
  --article-metric-shadow: 0px 10px 15px rgba(9, 84, 158, 0.08);
  --article-shell-width: min(1500px, 85%);
  /* 产品页复用公共 banner 变量并继续沿用 page-height 控高 */
  --page-banner-safe-top: var(--article-page-safe-top);
  --page-banner-pad-top: clamp(32px, 9vw, 52px);
  --page-banner-pad-bottom: clamp(32px, 9vw, 52px);
  --page-banner-pad-inline: clamp(16px, 5vw, 24px);
  --page-banner-overlay: rgba(0, 0, 0, 0.4);
  --page-banner-text-color: var(--article-text-inverse);
  --page-banner-title-color: var(--article-text-inverse);
  --page-banner-title-weight: 500;
  --page-banner-subtitle-color: var(--article-text-inverse-soft);
  color: var(--article-text-primary);
  background: var(--ui-color-page-bg);
}

html.article-product-page-root,
html.article-product-page-root body {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

/* 页面框架 */
.article-product-page .fullpage-container {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.article-product-page .page {
  position: relative;
  min-height: var(--page-height);
  height: auto;
  overflow: visible;
  scroll-snap-align: start;
}

/* 产品页首屏与内容区直接使用 lvh，避免地址栏伸缩导致段落高度跳动 */
.article-product-page .page-height-70 {
  --page-height: 70lvh;
}

.article-product-section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.article-product-section-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-product-page .page-content {
  position: relative;
  z-index: 1;
  align-items: stretch;
  min-height: inherit;
  height: auto;
  padding:
    clamp(32px, 9vw, 52px)
    clamp(16px, 5vw, 24px);
  text-align: left;
}

.article-product-page .ui-card {
  border: 1px solid var(--article-card-border);
  border-radius: var(--article-card-radius);
  background: var(--article-card-gradient);
  box-shadow: var(--article-card-shadow);
  backdrop-filter: blur(var(--ui-blur-card-elevated));
}

.article-product-section-stack {
  gap: clamp(20px, 2.8vw, 32px);
}

.article-product-kicker {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--article-text-primary);
  font-size: var(--font-title-lg);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: none;
}

/* Shared banner component mapping */
.article-product-page .page-banner {
  width: 100%;
}

.article-product-page .page-banner-page {
  --page-height: 55lvh;
  --page-banner-height: var(--page-height);
  --page-banner-bg-inset: 0;
}

.article-product-features-page,
.article-product-assurance-page {
  --article-section-target-height: var(--page-height, var(--default-page-height));
  --article-section-pad-top: clamp(56px, calc(var(--article-section-target-height) * 0.08), 92px);
  min-height: var(--article-section-target-height);
  height: var(--article-section-target-height);
}

.article-product-specifications-page {
  min-height: 0;
  height: auto;
}

.article-product-features-page .page-content,
.article-product-assurance-page .page-content,
.article-product-specifications-page .page-content {
  align-items: center;
  justify-content: center;
}

.article-product-features-page .ui-shell,
.article-product-assurance-page .ui-shell,
.article-product-specifications-page .ui-shell {
  width: 100%;
  max-width: var(--article-shell-width);
}

.article-product-features-page .section-heading,
.article-product-assurance-page .section-heading {
  margin-bottom: 0;
}

.article-product-features-page .article-product-section-stack,
.article-product-assurance-page .article-product-section-stack {
  gap: clamp(20px, 2.8vw, 32px);
}

@media (max-width: 1199.98px) {
  .article-product-page {
    --page-banner-height: 35lvh;
  }

  /* 移动端 ui-shell */
  .article-product-page .page-content > .ui-shell {
    max-width: none;
  }

  /* 移动端安全区 */

  .article-product-page .page,
  .article-product-page .article-product-features-page,
  .article-product-page .article-product-assurance-page,
  .article-product-page .article-product-specifications-page,
  .article-product-page .section-contact {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .article-product-page .page-content {
    min-height: inherit;
    padding:
      clamp(32px, 9vw, 52px)
      clamp(16px, 5vw, 24px);
  }

  .article-product-page .page-banner-page .page-content {
    padding-top: calc(var(--article-page-safe-top) + clamp(32px, 9vw, 52px));
  }

  /* 小卡片阴影 */
  .article-product-page {
    --article-metric-shadow: 0 0px 6px rgba(15, 91, 147, 0.16);
  }

  /* 产品页首屏单独收口 并覆盖 tokens.css 的首屏最小高度兜底 */
  .article-product-page .page-banner-page,
  .article-product-page .fullpage-container > main > .page:first-child {
    --page-height: 36lvh;
    min-height: var(--page-height);
  }

  /* 联系区留白 */
  .article-product-page .section-contact .page-content {
    padding: 52px 24px;
  }
}
