/* ==========================================================================
   Energvia — product.css
   产品详情页 + 系列页专用样式
   ========================================================================== */

/* 页面顶部留白（固定 header 74px） */
.page-top { padding-top: calc(74px + var(--space-lg)); }

/* ---------- 面包屑 ---------- */
.breadcrumb { font-size: var(--fs-small); color: var(--color-muted); margin-bottom: var(--space-md); }
.breadcrumb a { color: var(--color-muted); transition: color var(--dur) var(--ease); }
.breadcrumb a:hover { color: var(--color-gold); }
.breadcrumb span[aria-current] { color: var(--color-cream); }
.breadcrumb .sep { margin-inline: 0.5em; opacity: 0.5; }

/* ---------- 产品主区（图廊 + 信息） ---------- */
.product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }

/* 图廊 */
.gallery__main {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-graphite); aspect-ratio: 1;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__glow { position: absolute; inset: -10%; background: var(--glow-gold); z-index: 0; pointer-events: none; }
.gallery__thumbs { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.gallery__thumb {
  flex: 0 0 84px; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--color-border); cursor: pointer; transition: border-color var(--dur) var(--ease); background: var(--color-graphite);
}
.gallery__thumb.is-active { border-color: var(--color-gold); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 信息侧 */
.product-info__eyebrow { display: block; margin-bottom: var(--space-sm); }
.product-info__title { font-size: var(--fs-h1); margin-bottom: var(--space-sm); }
.product-info__price { font-family: var(--font-serif); font-size: 2rem; color: var(--color-cream); margin-bottom: var(--space-md); }
.product-info__price s { color: var(--color-muted); font-size: 1.3rem; margin-right: 0.5em; }
.product-info__price .save {
  font-family: var(--font-sans); font-size: var(--fs-small); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-black); background: var(--color-gold); padding: 0.2em 0.7em; border-radius: 999px; margin-left: 0.6em; vertical-align: middle;
}
.product-info__rating { color: var(--color-gold); margin-bottom: var(--space-md); font-size: var(--fs-small); }
.product-info__rating span { color: var(--color-muted); margin-left: 0.5em; }

/* 核心卖点（3条） */
.benefits { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.benefit { display: flex; gap: var(--space-sm); align-items: flex-start; }
.benefit__mark {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--color-gold); color: var(--color-gold); font-size: 0.9rem;
}
.benefit h3 { font-family: var(--font-sans); font-size: 1rem; letter-spacing: 0.02em; margin-bottom: 0.1em; color: var(--color-cream); }
.benefit p { font-size: var(--fs-small); }

/* CTA 区 */
.buy-box { display: flex; flex-direction: column; gap: var(--space-sm); }
.buy-box__row { display: flex; gap: var(--space-sm); }
.qty {
  display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden;
}
.qty button { width: 44px; height: 100%; font-size: 1.2rem; color: var(--color-cream); background: var(--color-graphite); }
.qty input { width: 48px; text-align: center; border: none; background: transparent; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-note { font-size: var(--fs-small); color: var(--color-muted); display: flex; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-sm); }
.buy-note span { display: inline-flex; align-items: center; gap: 0.4em; }

/* ---------- 内容区块（故事/材质/场景） ---------- */
.product-story blockquote {
  font-family: var(--font-serif); font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.5;
  color: var(--color-cream); max-width: 30ch; margin-bottom: var(--space-md);
}

/* 材质表 */
.spec-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.spec-item { text-align: center; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-graphite); }
.spec-item__icon { font-size: 1.6rem; color: var(--color-gold); margin-bottom: var(--space-sm); }
.spec-item h3 { font-family: var(--font-sans); font-size: 1rem; margin-bottom: 0.3em; }
.spec-item p { font-size: var(--fs-small); }

/* 使用场景 */
.scene-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.scene-item { padding: var(--space-md); border-left: 2px solid var(--color-gold); background: var(--color-charcoal); border-radius: 0 var(--radius) var(--radius) 0; }
.scene-item h3 { font-family: var(--font-sans); font-size: 1.05rem; margin-bottom: 0.3em; }
.scene-item p { font-size: var(--fs-small); }

/* ---------- 系列页 ---------- */
.collection-hero { text-align: center; padding-block: var(--space-lg) var(--space-md); }
.collection-hero .eyebrow { display: block; margin-bottom: var(--space-sm); }
.collection-hero h1 { margin-bottom: var(--space-sm); }
.collection-hero p { max-width: 60ch; margin-inline: auto; }
.collection-keywords { display: flex; gap: 0.6em; justify-content: center; flex-wrap: wrap; margin-top: var(--space-md); }
.collection-keywords span { font-size: var(--fs-small); color: var(--color-cream); border: 1px solid rgba(245,242,236,0.25); padding: 0.3em 1em; border-radius: 999px; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .product-hero { grid-template-columns: 1fr; gap: var(--space-lg); }
  .spec-list, .scene-list { grid-template-columns: 1fr; }
}