.page-products {
  --pg-card-bg: rgba(243, 239, 230, 0.05);
  --pg-card-line: rgba(243, 239, 230, 0.1);
  --pg-gap: 22px;
}

/* 首屏动作区 */
.page-products .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* 积分比率带 */
.page-products .ratio-band {
  display: grid;
  gap: 26px;
  padding: 30px 22px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(91, 75, 255, 0.28) 0%, rgba(91, 75, 255, 0) 58%),
    radial-gradient(90% 120% at 6% 96%, rgba(63, 224, 208, 0.16) 0%, rgba(63, 224, 208, 0) 62%),
    linear-gradient(158deg, #10352d 0%, var(--moss) 58%, #131a17 100%);
  border: 1px solid var(--gold-40);
  box-shadow: var(--shadow-panel);
}

.page-products .ratio-band__lead .section__title {
  margin: 10px 0 14px;
}

.page-products .ratio-band__figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 22px 14px;
  border-radius: var(--radius-lg);
  background: rgba(17, 22, 20, 0.46);
  border: 1px dashed var(--gold-40);
}

.page-products .ratio-num {
  font-family: var(--font-num);
  font-size: clamp(3.6rem, 16vw, 6.4rem);
  font-weight: 700;
  line-height: 0.9;
  color: var(--gold);
  letter-spacing: -0.03em;
  text-shadow: 0 0 26px rgba(212, 175, 55, 0.35);
  transition: transform 0.45s var(--ease), text-shadow 0.45s var(--ease);
  transform-origin: center bottom;
}

.page-products .ratio-band__figure:hover .ratio-num,
.page-products .ratio-band__figure:focus-within .ratio-num {
  transform: scale(1.12);
  text-shadow: 0 0 38px rgba(212, 175, 55, 0.6);
}

.page-products .ratio-eq {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cream-70);
  letter-spacing: 0.08em;
}

.page-products .ratio-op {
  font-family: var(--font-num);
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  color: var(--neon);
}

/* 设备适配 */
.page-products .spec-split {
  display: grid;
  gap: 26px;
}

.page-products .spec-media,
.page-products .flow-media,
.page-products .merge-media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-products .spec-media .media__img,
.page-products .flow-media .media__img,
.page-products .merge-media .media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-products .redeem-hero,
.page-products .vendor-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 26px;
}

.page-products .redeem-hero .media__img,
.page-products .vendor-media .media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-products .spec-body {
  display: grid;
  gap: 20px;
  align-content: start;
}

.page-products .spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-products .spec-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 18px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  background: var(--pg-card-bg);
  border-left: 3px solid var(--gold);
}

.page-products .spec-list__k {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--cream-45);
}

.page-products .spec-list__v {
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--cream);
}

.page-products .tip-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 积分档位瀑布流 */
.page-products .waterfall {
  columns: 1;
  column-gap: var(--pg-gap);
  margin-top: 6px;
}

.page-products .waterfall > .tier {
  display: block;
  break-inside: avoid;
  margin: 0 0 var(--pg-gap);
  padding: 22px 20px;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(31, 74, 58, 0.6) 0%, rgba(17, 22, 20, 0.72) 100%);
  border: 1px solid var(--pg-card-line);
}

.page-products .waterfall > .tier:nth-child(3n + 2) {
  background: linear-gradient(165deg, rgba(42, 47, 46, 0.72) 0%, rgba(17, 22, 20, 0.72) 100%);
}

.page-products .waterfall > .tier:nth-child(3n + 3) {
  background: linear-gradient(165deg, rgba(185, 106, 75, 0.26) 0%, rgba(17, 22, 20, 0.74) 100%);
}

.page-products .tier__points {
  display: block;
  font-family: var(--font-num);
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
  letter-spacing: -0.02em;
}

.page-products .tier__units {
  margin: 8px 0 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--neon);
}

.page-products .tier__note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.72;
  color: var(--cream-70);
}

/* 使用流程 */
.page-products .flow-split {
  display: grid;
  gap: 28px;
}

.page-products .flow-split .path {
  margin: 0;
}

.page-products .flow-split .path__body h3 {
  margin: 0 0 6px;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--cream);
}

.page-products .flow-split .path__body p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.74;
  color: var(--cream-70);
}

/* 厂商轨道 */
.page-products .vendor-track {
  margin-top: 4px;
}

.page-products .vendor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  padding: 20px 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, rgba(31, 74, 58, 0.5) 0%, rgba(17, 22, 20, 0.8) 100%);
  border: 1px solid var(--pg-card-line);
  border-top: 3px solid var(--clay);
}

.page-products .vendor__no {
  font-family: var(--font-num);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cream-24);
  line-height: 1;
}

.page-products .vendor__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cream);
}

.page-products .vendor__cat {
  margin: 0;
  font-size: 0.84rem;
  letter-spacing: 0.1em;
  color: var(--cream-45);
}

.page-products .vendor .tag {
  align-self: flex-start;
}

.page-products .vendor-foot {
  margin: 22px 0 0;
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--cream-45);
}

.page-products .vendor-foot a {
  color: var(--neon);
  text-decoration: none;
  border-bottom: 1px solid rgba(63, 224, 208, 0.42);
}

.page-products .vendor-foot a:hover,
.page-products .vendor-foot a:focus-visible {
  color: var(--gold);
  border-bottom-color: var(--gold-40);
}

/* 换分区并入 */
.page-products .merge-band {
  display: grid;
  gap: 26px;
  padding: 28px 22px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(110% 130% at 92% 92%, rgba(91, 75, 255, 0.24) 0%, rgba(91, 75, 255, 0) 60%),
    linear-gradient(200deg, rgba(42, 47, 46, 0.9) 0%, rgba(17, 22, 20, 0.94) 100%);
  border: 1px solid var(--pg-card-line);
}

.page-products .merge-band__text .section__title {
  margin: 10px 0 14px;
}

.page-products .merge-list {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--pg-card-line);
}

.page-products .merge-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 13px 16px;
  background: rgba(17, 22, 20, 0.86);
}

.page-products .merge-list__k {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--amber);
}

.page-products .merge-list__v {
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--cream);
}

/* 场景选择 */
.page-products .scenario {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(158deg, rgba(243, 239, 230, 0.07) 0%, rgba(243, 239, 230, 0.02) 100%);
  border: 1px solid var(--pg-card-line);
}

.page-products .scenario__title {
  margin: 0;
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--cream);
}

.page-products .scenario p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.76;
  color: var(--cream-70);
}

.page-products .scenario__link {
  margin-top: auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-40);
}

.page-products .scenario__link:hover,
.page-products .scenario__link:focus-visible {
  color: var(--neon);
  border-bottom-color: rgba(63, 224, 208, 0.5);
}

/* 下一步 */
.page-products .next-band {
  display: grid;
  gap: 24px;
  align-items: center;
  padding: 30px 24px;
  border-radius: var(--radius-xl);
  background: linear-gradient(140deg, rgba(185, 106, 75, 0.3) 0%, rgba(11, 43, 38, 0.9) 52%, rgba(17, 22, 20, 0.94) 100%);
  border: 1px solid var(--gold-40);
}

.page-products .next-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (min-width: 640px) {
  .page-products .waterfall {
    columns: 2;
  }

  .page-products .ratio-band,
  .page-products .merge-band,
  .page-products .next-band {
    padding: 40px 36px;
  }
}

@media (min-width: 900px) {
  .page-products .ratio-band {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 40px;
  }

  .page-products .spec-split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 44px;
  }

  .page-products .flow-split {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: start;
    gap: 40px;
  }

  .page-products .merge-band {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 42px;
  }

  .page-products .spec-media .media__img,
  .page-products .merge-media .media__img {
    aspect-ratio: 4 / 5;
  }

  .page-products .next-band {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 34px;
  }

  .page-products .next-band__actions {
    justify-content: flex-end;
  }
}

@media (min-width: 1080px) {
  .page-products .waterfall {
    columns: 3;
  }
}