.page-products {
  --prod-gap: 88px;
  --prod-slice: 6deg;
  --prod-line: rgba(217, 212, 196, .18);
  position: relative;
  display: block;
  overflow-x: clip;
}

.page-products::before,
.page-products::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-image: repeating-linear-gradient(to bottom, var(--cream) 0 5px, transparent 5px 16px);
  opacity: .16;
  pointer-events: none;
  z-index: 0;
}
.page-products::before { left: 6px; }
.page-products::after { right: 6px; }

/* ── 面包屑 ───────────────────────────── */
.page-products .breadcrumbs {
  padding: 22px 0 0;
  position: relative;
  z-index: 2;
}

/* ── 首屏 ─────────────────────────────── */
.page-products .prod-hero {
  position: relative;
  padding: 40px 0 72px;
  background: var(--ink-900);
  overflow: hidden;
  isolation: isolate;
}

.page-products .prod-hero::before {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -34%;
  width: 96%;
  height: 78%;
  background: var(--ink-700);
  border-radius: var(--radius-lg);
  transform: rotate(-7deg);
  z-index: -1;
}

.page-products .prod-hero::after {
  content: "";
  position: absolute;
  left: -20%;
  top: -30%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle at 40% 40%, var(--lime-soft), transparent 68%);
  z-index: -1;
}

.page-products .prod-hero__inner {
  position: relative;
  display: grid;
  gap: 40px;
}

.page-products .prod-hero .display-xl {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 8vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--warm);
  margin: 10px 0 20px;
}

.page-products .prod-hero .lede {
  max-width: var(--measure);
  color: var(--cream);
  font-size: 1rem;
  line-height: 1.85;
}

.page-products .prod-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-products .prod-hero__panel {
  background: var(--ink-700);
  border: 1px solid rgba(217, 212, 196, .12);
  border-radius: var(--radius-lg);
  padding: 22px;
  display: grid;
  gap: 18px;
  align-content: start;
}

.page-products .prod-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--warm);
  border-bottom: 1px dashed var(--prod-line);
  padding-bottom: 14px;
}

.page-products .prod-score .scoreboard__score {
  font-family: var(--font-mono);
  font-size: 1.7rem;
  letter-spacing: .04em;
  color: var(--lime);
}

.page-products .prod-hero__flags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: .875rem;
  color: var(--cream);
}

.page-products .prod-hero__flags li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-products .prod-hero__note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--stone);
}

.page-products .prod-mono {
  font-family: var(--font-mono);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.page-products .prod-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lime);
  flex: 0 0 auto;
}
.page-products .prod-dot--blue { background: var(--blue); }

.page-products .flag {
  display: inline-block;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  flex: 0 0 auto;
}

/* ── 刻度分隔带 ───────────────────────── */
.page-products .prod-rule {
  height: 26px;
  background-image: repeating-linear-gradient(to right, var(--cream) 0 2px, transparent 2px 14px);
  background-size: 100% 5px;
  background-position: left center;
  background-repeat: no-repeat;
  opacity: .28;
}

/* ── 通用章节微调 ─────────────────────── */
.page-products .section-head {
  display: grid;
  gap: 10px;
  margin-bottom: 32px;
}

.page-products .section-index {
  font-family: var(--font-mono);
  font-size: clamp(2.6rem, 11vw, 5.2rem);
  font-weight: 200;
  line-height: 1;
  color: var(--ink-500);
  letter-spacing: -.02em;
}

.page-products .section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 5.4vw, 2.4rem);
  line-height: 1.2;
  color: var(--warm);
  margin: 0;
}

.page-products .section-note {
  max-width: var(--measure);
  margin: 0;
  color: var(--cream);
  font-size: .9375rem;
  line-height: 1.8;
}

.page-products .eyebrow {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0;
}

.page-products .prose p {
  max-width: var(--measure);
  color: var(--cream);
  line-height: 1.85;
}
.page-products .prose p + p { margin-top: 14px; }

.page-products .media-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-700);
  border: 1px solid var(--prod-line);
}
.page-products .media-frame__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ── 01 标签总览 ─────────────────────── */
.page-products .prod-banner { margin-bottom: 28px; }
.page-products .prod-banner .media-frame__img { aspect-ratio: 16 / 9; }

.page-products .prod-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.page-products .prod-filterbar .filter-btn {
  font-family: var(--font-sans);
  font-size: .8125rem;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(217, 212, 196, .22);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out);
}

.page-products .prod-filterbar .filter-btn[aria-pressed="true"] {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink-900);
  font-weight: 600;
}

.page-products .prod-filterbar .filter-btn:hover:not([aria-pressed="true"]) {
  border-color: var(--lime);
  color: var(--warm);
}

.page-products .filter-count {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--stone);
  letter-spacing: .04em;
}

.page-products .prod-tabgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-products .prod-tabcard {
  background: var(--ink-700);
  border: 1px solid var(--prod-line);
  border-radius: var(--radius-md);
  padding: 20px;
  display: grid;
  gap: 10px;
  align-content: start;
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}

.page-products .prod-tabcard:hover {
  border-color: rgba(200, 240, 42, .42);
  transform: translateY(-2px);
}

.page-products .prod-tabcard .fixture-card__meta {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--stone);
  display: flex;
  gap: 10px;
  margin: 0;
}

.page-products .prod-tabcard .fixture-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--warm);
  margin: 0;
}

.page-products .prod-tabcard .fixture-card__body p {
  margin: 0;
  color: var(--cream);
  font-size: .875rem;
  line-height: 1.75;
}

.page-products .prod-empty,
.page-products .prod-reset {
  margin-top: 20px;
}
.page-products .prod-empty {
  color: var(--cream);
  font-size: .9375rem;
}

/* ── 02 控球率与事件 ─────────────────── */
.page-products .prod-flow__grid {
  display: grid;
  gap: 32px;
}

.page-products .prod-meter .meter__track {
  position: relative;
  height: 14px;
  border-radius: var(--radius-pill);
  background: rgba(217, 212, 196, .14);
  overflow: hidden;
}

.page-products .prod-meter .meter__fill {
  height: 100%;
  border-radius: var(--radius-pill);
}

.page-products .prod-meter .meter__legend {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--cream);
  margin: 10px 0 0;
}

.page-products .prod-meter__mark {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 20px;
  background: var(--warm);
  transform: translateX(-1px);
  cursor: help;
}
.page-products .prod-meter__mark--red { background: var(--red); }

.page-products .prod-flow__meter { margin-top: 24px; }

.page-products .prod-shot .media-frame__img { aspect-ratio: 3 / 2; }

.page-products .prod-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-left: 1px solid var(--prod-line);
}

.page-products .prod-timeline .timeline__item {
  display: grid;
  grid-template-columns: 62px 16px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 0 12px 16px;
  border-bottom: 1px dashed var(--prod-line);
}

.page-products .prod-timeline .timeline__stamp {
  font-size: .82rem;
  color: var(--lime);
  letter-spacing: .04em;
}

.page-products .prod-timeline__text {
  color: var(--cream);
  font-size: .875rem;
  line-height: 1.65;
}

/* ── 03 案例合集 ─────────────────────── */
.page-products .prod-cases__grid {
  display: grid;
  gap: 28px;
  align-items: center;
}

.page-products .prod-cases__shot .media-frame__img { aspect-ratio: 3 / 2; }

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

.page-products .prod-cases__dims li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--ink-700);
  border-left: 3px solid var(--clay);
  color: var(--cream);
  font-size: .875rem;
}

.page-products .prod-cases__dims .prod-mono {
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--stone);
  grid-column: 1 / -1;
}

.page-products .prod-cases__dims strong { color: var(--warm); }

.page-products .prod-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 24px;
}

.page-products .prod-chiprow .chip {
  font-size: .8125rem;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(217, 212, 196, .2);
  color: var(--cream);
}

.page-products .prod-chiprow .chip--active {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink-900);
  font-weight: 600;
}

.page-products .prod-chiprow .chip--muted { color: var(--stone); }

.page-products .prod-samples {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-products .prod-sample {
  background: var(--ink-700);
  border: 1px solid var(--prod-line);
  border-radius: var(--radius-md);
  padding: 18px;
  display: grid;
  gap: 10px;
}

.page-products .prod-sample__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--stone);
}

.page-products .prod-sample__score {
  margin: 0;
  font-size: 1.5rem;
  color: var(--warm);
}

.page-products .prod-sample__meter {
  display: grid;
  gap: 8px;
  margin: 0;
  font-size: .72rem;
  color: var(--cream);
}

.page-products .prod-bar {
  display: block;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(217, 212, 196, .14);
  overflow: hidden;
}
.page-products .prod-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--blue);
}

.page-products .prod-sample__flags {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--cream);
}

/* ── 04 收藏看板 ─────────────────────── */
.page-products .prod-board__grid {
  display: grid;
  gap: 26px;
  align-items: end;
}
.page-products .prod-board__head { margin-bottom: 0; }
.page-products .prod-board__shot .media-frame__img { aspect-ratio: 4 / 3; }
.page-products .prod-board__prose { margin-top: 26px; }

.page-products .prod-wall {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.page-products .prod-wall__card {
  background: var(--ink-700);
  border: 1px solid var(--prod-line);
  border-radius: var(--radius-md);
  padding: 18px;
  display: grid;
  gap: 12px;
}

.page-products .prod-wall__card:nth-child(even) { transform: translateY(8px); }

.page-products .prod-wall__title {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--stone);
}

.page-products .prod-wall__score {
  margin: 0;
  font-size: 1.4rem;
  color: var(--lime);
}

.page-products .prod-meter--slim .meter__track { height: 6px; }

.page-products .prod-wall__stats {
  display: grid;
  gap: 6px;
  border-top: 1px dashed var(--prod-line);
  padding-top: 12px;
}

.page-products .prod-wall__stats .data-list__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: .8125rem;
  color: var(--cream);
}

/* ── 05 赛前 30 分钟 ─────────────────── */
.page-products .prod-lineup__shot { margin-bottom: 28px; }
.page-products .prod-lineup__shot .media-frame__img { aspect-ratio: 12 / 7; }

.page-products .prod-lineup__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.page-products .prod-panel {
  background: var(--ink-700);
  border: 1px solid var(--prod-line);
  border-radius: var(--radius-md);
  padding: 18px;
}

.page-products .prod-panel .panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.page-products .prod-panel .panel__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--warm);
  margin: 0;
}

.page-products .prod-roster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.page-products .prod-roster li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
  color: var(--cream);
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--prod-line);
}

.page-products .prod-roster .prod-mono {
  color: var(--lime);
  min-width: 22px;
}

.page-products .prod-roster__more { color: var(--stone); border-bottom: none; }

.page-products .prod-lineup__prose { margin-top: 22px; }

/* ── 06 榜单 ─────────────────────────── */
.page-products .prod-ranks__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.page-products .prod-rank {
  background: var(--ink-700);
  border: 1px solid var(--prod-line);
  border-radius: var(--radius-md);
  padding: 18px;
  display: grid;
  gap: 10px;
}

.page-products .prod-rank__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 4px;
}

.page-products .prod-rank__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--lime);
}

.page-products .prod-rank--blue .prod-rank__name { color: var(--blue); }
.page-products .prod-rank--red .prod-rank__name { color: var(--red); }

.page-products .prod-rank__unit {
  font-size: .7rem;
  letter-spacing: .12em;
  color: var(--stone);
}

.page-products .prod-rank__row {
  display: grid;
  grid-template-columns: 44px 1fr 52px;
  align-items: center;
  gap: 10px;
  font-size: .8125rem;
  color: var(--cream);
}

.page-products .prod-rank__tag { color: var(--stone); }

.page-products .prod-rank__track {
  display: block;
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgba(217, 212, 196, .12);
  overflow: hidden;
}

.page-products .prod-rank__bar {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--ink-500), var(--lime));
}

.page-products .prod-rank--blue .prod-rank__bar { background: linear-gradient(90deg, var(--ink-500), var(--blue)); }
.page-products .prod-rank--red .prod-rank__bar { background: linear-gradient(90deg, var(--ink-500), var(--red)); }

.page-products .prod-rank__num { text-align: right; color: var(--warm); }

.page-products .prod-ranks__prose { margin-top: 26px; }

/* ── 07 访问方式 ─────────────────────── */
.page-products .prod-access__grid {
  display: grid;
  gap: 30px;
}

.page-products .prod-access__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.page-products .prod-access__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-content: start;
}

.page-products .prod-access__card {
  background: var(--ink-700);
  border: 1px solid var(--prod-line);
  border-radius: var(--radius-md);
  padding: 18px;
  border-left: 3px solid var(--ink-500);
}

.page-products .prod-access__card-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--warm);
}

.page-products .prod-access__card-body {
  margin: 0;
  font-size: .875rem;
  line-height: 1.75;
  color: var(--cream);
}

.page-products .prod-access__card .text-link { color: var(--lime); }

/* ── 显现 ─────────────────────────────── */
.page-products [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .34s var(--ease-out), transform .34s var(--ease-out);
}
.page-products [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}
.page-products .prod-wall__card:nth-child(even)[data-reveal],
.page-products .prod-wall__card:nth-child(even).is-inview {
  transform: translateY(8px);
}

/* ── 平板 ─────────────────────────────── */
@media (min-width: 720px) {
  .page-products .prod-hero { padding: 56px 0 96px; }

  .page-products .prod-tabgrid { grid-template-columns: repeat(2, 1fr); gap: 18px; }

  .page-products .prod-samples { grid-template-columns: repeat(3, 1fr); }

  .page-products .prod-wall { grid-template-columns: repeat(2, 1fr); }

  .page-products .prod-lineup__grid { grid-template-columns: repeat(3, 1fr); }

  .page-products .prod-ranks__list { grid-template-columns: repeat(2, 1fr); }

  .page-products .prod-access__cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── 桌面 ─────────────────────────────── */
@media (min-width: 1000px) {
  .page-products .prod-hero { padding: 72px 0 124px; }

  .page-products .prod-hero__inner {
    grid-template-columns: 7fr 5fr;
    align-items: center;
    gap: 56px;
  }

  .page-products .prod-hero__panel { padding: 26px; }

  .page-products .prod-tabgrid { grid-template-columns: repeat(4, 1fr); }

  .page-products .prod-flow__grid {
    grid-template-columns: 7fr 5fr;
    grid-template-areas:
      "copy aside"
      "timeline aside";
    align-items: start;
    gap: 40px;
  }
  .page-products .prod-flow__copy { grid-area: copy; }
  .page-products .prod-flow__aside { grid-area: aside; position: sticky; top: 76px; }
  .page-products .prod-timeline { grid-area: timeline; }

  .page-products .prod-cases__grid { grid-template-columns: 7fr 5fr; gap: 44px; }

  .page-products .prod-board__grid {
    grid-template-columns: 4fr 8fr;
    gap: 44px;
  }

  .page-products .prod-wall { grid-template-columns: repeat(4, 1fr); gap: 20px; }

  .page-products .prod-ranks__list { grid-template-columns: repeat(5, 1fr); }

  .page-products .prod-access__grid { grid-template-columns: 7fr 5fr; gap: 48px; }
  .page-products .prod-access__cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── 减少动效 ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page-products [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .page-products .prod-tabcard,
  .page-products .prod-filterbar .filter-btn {
    transition: none;
  }
}
</｜｜DSML｜｜ parameter>
</｜｜DSML｜｜ invoke>
</｜｜DSML｜｜ calls>