/* ================================================================
   PRODUCTS COMMON — 产品列表 / 产品详情 共用
     · 返回按钮（白胶囊 + 绿圆 ↖ 斜箭头，同新闻详情风格）
     · 标题块（三角 + 红中文 + 绿英文）
     · 六边形产品图（竖向六边形）
   依赖：tokens.css、base.css、hero-image.css、footer-cta.css
   ================================================================ */

/* ── 返回按钮 ─────────────────────────────────────────────────── */
.prod-back {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 8px 32px 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(47, 131, 78, 0.30);
  color: var(--green);
  font-family: var(--font-cn);
  font-size: 15px; font-weight: 400; letter-spacing: .06em;
  box-shadow: 0 8px 22px -16px rgba(31, 92, 54, 0.5);
  transition: background .3s var(--ease-out), color .3s var(--ease-out),
              border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.prod-back .circle {
  width: 25px; height: 25px; border-radius: 50%;
  background: var(--green);
  display: grid; place-items: center;
  transition: background .3s var(--ease-out), transform .3s var(--ease-out);
}
.prod-back .circle svg { width: 17px; height: 17px; display: block; stroke: #fff; transition: stroke .3s var(--ease-out); }
.prod-back:hover { background: var(--green); border-color: var(--green); color: #fff; }
.prod-back:hover .circle { background: #fff; transform: translateX(-3px); }
.prod-back:hover .circle svg { stroke: var(--green); }

/* ── 标题块：三角 + 红中文 + 绿英文 ──────────────────────────────── */
.prod-title {
	padding-left: 40px;
}
.prod-title .triangle {
  display: block; width: 46px; aspect-ratio: 54 / 33;
  background: url('../../../images/half-green-logo.svg') no-repeat center / contain;
  margin-bottom: 16px;
  margin-left: -40px;
}
.prod-title .cn {
  font-family: var(--font-display);
  color: var(--red);
  font-size: clamp(21px, 2.2vw, 35px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.4;
}
.prod-title .en {
  margin-top: 12px;
  font-family: var(--font-en);
  color: var(--green);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: .12em;
  line-height: 1.6;
  text-transform: uppercase;
  font-weight: 600;
}

/* ── 六边形产品图（竖向六边形：尖顶尖底） ───────────────────────── */
.prod-hex {
  position: relative;
  aspect-ratio: 1 / 1.08;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  overflow: hidden;
  background: var(--green-deep);
}
.prod-hex img,
.prod-hex video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 页脚视频广告位 V mask：白色衔接（上方表格区是 #fff） ────────── */
section.vision::before { background: #fff; }