/* 产品列表 / 详情 — 共用 Banner 媒体区与顶栏叠放 */
.product-page,
.productdetail-page {
  --product-primary: #00a85a;
  /* 一屏一模块：Banner 占满视口高度 */
  --product-banner-size: 100vh;
}

@supports (height: 100dvh) {
  .product-page,
  .productdetail-page {
    --product-banner-size: 100dvh;
  }
}

/* 产品页顶栏交互由 home-common.css .has-immersive-header 统一提供 */

body.product-page .site-header .site-header__nav-link.is-active,
body.productdetail-page .site-header .site-header__nav-link.is-active {
  color: var(--product-primary);
}

body.product-page .site-header:not(.is-scrolled):not(.is-hovering-nav) .site-header__nav-link.is-active,
body.productdetail-page .site-header:not(.is-scrolled):not(.is-hovering-nav) .site-header__nav-link.is-active {
  color: #b8f5d4;
}

.product-banner {
  position: relative;
  width: 100%;
  min-height: var(--product-banner-size);
  background: #0a1628;
  overflow: hidden;
}

/* 详情页 Hero */
.product-hero--with-copy {
  position: relative;
  width: 100%;
  min-height: var(--product-banner-size);
  overflow: hidden;
  color: #fff;
}

.product-hero--with-copy .product-banner {
  position: absolute;
  inset: 0;
  min-height: 100%;
}

/* 列表页：整屏 Banner */
.product-hero--banner-only {
  position: relative;
  width: 100%;
  min-height: var(--product-banner-size);
  overflow: hidden;
}

.product-hero--banner-only .product-banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #0a1628;
  overflow: hidden;
}

.product-banner__media {
  position: absolute;
  inset: 0;
}

.product-banner__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(16, 24, 40, 0.72) 0%,
    rgba(16, 24, 40, 0.2) 55%,
    rgba(16, 24, 40, 0.35) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.product-banner__image,
.product-banner__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-banner__video {
  position: absolute;
  inset: 0;
}

.product-banner__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0d3d28 0%, #00a85a 45%, #0a1628 100%);
}

.product-banner__controls {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  display: flex;
  gap: 10px;
}

.product-banner__control {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(16, 24, 40, 0.35);
  color: #fff;
  cursor: pointer;
}

.product-banner__control--audio.is-muted .hero-icon-volume,
.product-banner__control--play:not(.is-paused) .hero-icon-play {
  display: none;
}

.product-banner__control--audio:not(.is-muted) .hero-icon-muted,
.product-banner__control--play.is-paused .hero-icon-pause {
  display: none;
}

.hero-icon-play::before {
  content: '▶';
  font-size: 12px;
}

.hero-icon-pause::before {
  content: '❚❚';
  font-size: 11px;
  letter-spacing: -2px;
}

.hero-icon-volume::before {
  content: '🔊';
  font-size: 14px;
}

.hero-icon-muted::before {
  content: '🔇';
  font-size: 14px;
}

/* 响应式见 public/css/site-responsive.css */