.page-products {
  --pr-line: rgba(51, 214, 208, 0.14);
  --pr-line-warm: rgba(255, 106, 31, 0.3);
  --pr-body: #C4CED4;
  --pr-ink: #2B3036;
}

.page-products .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-block: 26px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ash);
}

.page-products .crumbs a {
  color: var(--cyan);
  text-decoration: none;
  transition: color 0.12s ease;
}

.page-products .crumbs a:hover {
  color: var(--lava);
}

.page-products .crumbs__sep {
  color: rgba(168, 176, 184, 0.4);
}

.page-products h2 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.45rem, 4.2vw, 2.15rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--ice);
}

.page-products h3 {
  margin: 0;
  font-family: var(--font-geo);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--ice);
}

.page-products p {
  margin: 0;
}

/* ---------- 首屏 ---------- */
.page-products .pr-head {
  padding-block: 24px 46px;
}

.page-products .pr-head h1 {
  max-width: 18ch;
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.95rem, 6vw, 3.4rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: var(--ice);
}

.page-products .pr-lede {
  max-width: 60ch;
  margin-top: 20px;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--pr-body);
}

.page-products .pr-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 32px 0 0;
  background: var(--pr-line);
  border: 1px solid var(--pr-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.page-products .pr-metrics > div {
  padding: 14px 16px;
  background: var(--slate);
}

.page-products .pr-metrics dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--ash);
}

.page-products .pr-metrics dd {
  margin: 6px 0 0;
  font-family: var(--font-geo);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--lava);
}

/* ---------- 通用图容器 ---------- */
.page-products .pr-figure {
  margin: 26px 0 0;
  border: 1px solid var(--pr-line);
  background: var(--slate);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.page-products .pr-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-products .pr-figure .media__cap {
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ash);
  border-top: 1px solid var(--pr-line);
}

/* ---------- 总览 ---------- */
.page-products .pr-overview {
  padding-block: 46px 52px;
  border-top: 1px solid var(--pr-line);
}

.page-products .pr-overview__top {
  display: grid;
  gap: 14px;
}

.page-products .pr-overview__note {
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--ash);
}

.page-products .pr-paths {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pr-paths > li {
  position: relative;
  padding: 20px 20px 22px;
  background: var(--slate);
  border: 1px solid var(--pr-line);
  border-left: 3px solid var(--lava);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.page-products .pr-paths > li:hover {
  transform: translateY(-2px);
  border-color: var(--pr-line-warm);
  border-left-color: var(--cyan);
}

.page-products .pr-paths__code {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-products .pr-paths h3 {
  margin-top: 10px;
}

.page-products .pr-paths p {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--pr-body);
}

.page-products .pr-paths__link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--lava);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 106, 31, 0.4);
  transition: color 0.12s ease, border-color 0.12s ease;
}

.page-products .pr-paths__link:hover {
  color: var(--ember);
  border-bottom-color: var(--ember);
}

/* ---------- 类型分区 ---------- */
.page-products .pr-types {
  padding-block: 52px;
  border-top: 1px solid var(--pr-line);
}

.page-products .pr-split {
  display: grid;
  gap: 26px;
}

.page-products .pr-index__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pr-index__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  font-size: 0.86rem;
  color: var(--ice);
  text-decoration: none;
  background: var(--slate);
  border: 1px solid var(--pr-line);
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}

.page-products .pr-index__list a:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(51, 214, 208, 0.07);
}

.page-products .pr-index__list .mono {
  font-size: 10px;
  color: var(--lava);
}

.page-products .pr-types__lede {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.78;
  color: var(--pr-body);
}

.page-products .pr-zones {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: zone;
}

.page-products .pr-zone {
  position: relative;
  padding: 20px 20px 22px;
  background: var(--slate);
  border: 1px solid var(--pr-line);
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.page-products .pr-zone:hover {
  transform: translateY(-2px);
  border-color: var(--pr-line-warm);
  box-shadow: 0 10px 24px -16px rgba(255, 106, 31, 0.6);
}

.page-products .pr-zone:nth-child(even) {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

.page-products .pr-zone:nth-child(odd) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

.page-products .pr-zone__code {
  display: block;
  font-size: 11px;
  letter-spacing: 0.07em;
  color: var(--lava);
}

.page-products .pr-zone h3 {
  margin-top: 10px;
  font-size: 1.12rem;
}

.page-products .pr-zone p {
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.74;
  color: var(--pr-body);
}

.page-products .pr-zone__scene {
  padding-left: 12px;
  border-left: 2px solid var(--cyan);
  color: var(--ash);
  font-size: 0.85rem;
}

.page-products .pr-zone__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pr-figure--types {
  margin-top: 30px;
}

/* ---------- 地区坐标 ---------- */
.page-products .pr-geo {
  padding-block: 52px;
  border-top: 1px solid var(--pr-line);
}

.page-products .pr-geo__lede {
  margin-top: 16px;
  max-width: 66ch;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--pr-body);
}

.page-products .pr-nodes {
  display: grid;
  gap: 14px;
  margin: 30px 0 0;
  padding: 0 0 8px;
  list-style: none;
}

.page-products .pr-node {
  padding: 16px 18px 18px;
  background: linear-gradient(160deg, #1C2028 0%, var(--slate) 62%);
  border: 1px solid var(--pr-line);
  border-bottom: 2px solid rgba(51, 214, 208, 0.22);
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.page-products .pr-node:hover {
  transform: translateY(-2px);
  border-bottom-color: var(--lava);
}

.page-products .pr-node__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.page-products .pr-node__head .mono {
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: 0.06em;
}

.page-products .pr-node__head h3 {
  font-size: 1.05rem;
}

.page-products .pr-node__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.page-products .pr-node__stats div {
  min-width: 0;
}

.page-products .pr-node__stats dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ash);
}

.page-products .pr-node__stats dd {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 0.94rem;
  color: var(--ice);
}

.page-products .pr-heatbar {
  display: block;
  height: 4px;
  margin-top: 14px;
  background: rgba(51, 214, 208, 0.12);
  overflow: hidden;
}

.page-products .pr-heatbar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--lava));
  transition: width 0.4s ease;
}

.page-products .pr-node:nth-child(1) .pr-heatbar i { width: 100%; }
.page-products .pr-node:nth-child(2) .pr-heatbar i { width: 86%; }
.page-products .pr-node:nth-child(3) .pr-heatbar i { width: 78%; }
.page-products .pr-node:nth-child(4) .pr-heatbar i { width: 66%; }
.page-products .pr-node:nth-child(5) .pr-heatbar i { width: 58%; }
.page-products .pr-node:nth-child(6) .pr-heatbar i { width: 52%; }
.page-products .pr-node:nth-child(7) .pr-heatbar i { width: 46%; }
.page-products .pr-node:nth-child(8) .pr-heatbar i { width: 38%; }

.page-products .pr-geo__foot {
  margin-top: 30px;
  max-width: 66ch;
  font-size: 0.92rem;
  line-height: 1.78;
  color: var(--ash);
}

.page-products .pr-inline-link {
  color: var(--lava);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 106, 31, 0.45);
  padding-bottom: 1px;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.page-products .pr-inline-link:hover {
  color: var(--ember);
  border-bottom-color: var(--ember);
}

.page-products .pr-inline-link--dark {
  color: #B03A0C;
  border-bottom-color: rgba(176, 58, 12, 0.4);
}

.page-products .pr-inline-link--dark:hover {
  color: var(--signal);
  border-bottom-color: var(--signal);
}

/* ---------- 价格档位（浅色反转） ---------- */
.page-products .pr-price {
  margin-block: 18px;
  padding-block: 48px 44px;
  background: linear-gradient(150deg, var(--cream) 0%, #FBE6CE 100%);
  color: var(--pr-ink);
  clip-path: polygon(0 26px, 100% 0, 100% calc(100% - 26px), 0 100%);
}

.page-products .pr-price h2 {
  color: #12151A;
}

.page-products .pr-eyebrow--dark {
  color: #8A4A18;
}

.page-products .pr-price__head {
  display: grid;
  gap: 24px;
}

.page-products .pr-price__intro p {
  margin-top: 14px;
  max-width: 60ch;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--pr-ink);
}

.page-products .pr-figure--price {
  margin: 0;
  border-color: rgba(18, 21, 26, 0.14);
  background: rgba(18, 21, 26, 0.06);
}

.page-products .pr-figure--price .media__cap {
  color: #5A6068;
  border-top-color: rgba(18, 21, 26, 0.12);
}

.page-products .pr-tiers {
  display: grid;
  gap: 12px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pr-tier {
  position: relative;
  padding: 20px 18px 22px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(18, 21, 26, 0.12);
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.page-products .pr-tier:hover {
  transform: translateY(-3px);
  background: #FFFFFF;
  border-color: rgba(18, 21, 26, 0.24);
}

.page-products .pr-tier__code {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #7A828A;
}

.page-products .pr-tier h3 {
  margin-top: 10px;
  color: #12151A;
  font-size: 1.12rem;
}

.page-products .pr-tier__range {
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.74;
  color: #33393F;
}

.page-products .pr-tier__scene {
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid rgba(18, 21, 26, 0.2);
  font-size: 0.85rem;
  line-height: 1.7;
  color: #5A6068;
}

.page-products .pr-tier__bar {
  display: block;
  height: 6px;
  margin-top: 16px;
  background: rgba(18, 21, 26, 0.08);
}

.page-products .pr-tier__bar i {
  display: block;
  height: 100%;
}

.page-products .pr-tier--cold .pr-tier__bar i {
  width: 34%;
  background: linear-gradient(90deg, var(--cyan), #7FE3DF);
}

.page-products .pr-tier--warm .pr-tier__bar i {
  width: 66%;
  background: linear-gradient(90deg, #FFC38A, var(--ember));
}

.page-products .pr-tier--hot .pr-tier__bar i {
  width: 100%;
  background: linear-gradient(90deg, var(--lava), var(--signal));
}

.page-products .pr-price__foot {
  margin-top: 28px;
  max-width: 66ch;
  font-size: 0.9rem;
  line-height: 1.78;
  color: #4A5056;
}

/* ---------- 六个维度 ---------- */
.page-products .pr-dims {
  padding-block: 54px 46px;
}

.page-products .pr-dims__lede {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.78;
  color: var(--pr-body);
}

.page-products .pr-dims__list {
  display: grid;
  gap: 1px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  background: var(--pr-line);
  border: 1px solid var(--pr-line);
}

.page-products .pr-dims__list > li {
  padding: 18px 18px 20px;
  background: var(--void);
  transition: background 0.16s ease;
}

.page-products .pr-dims__list > li:hover {
  background: var(--slate);
}

.page-products .pr-dims__no {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--lava);
}

.page-products .pr-dims__list h3 {
  margin-top: 8px;
  font-size: 1rem;
}

.page-products .pr-dims__list p {
  margin-top: 8px;
  font-size: 0.88rem;
  line-height: 1.72;
  color: var(--pr-body);
}

/* ---------- 检索 ---------- */
.page-products .pr-find {
  padding-block: 46px 54px;
  border-top: 1px solid var(--pr-line);
}

.page-products .pr-find__head {
  display: grid;
  gap: 14px;
}

.page-products .pr-find__note {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--ash);
}

.page-products .pr-find__toolbar {
  display: grid;
  gap: 12px;
  margin-top: 26px;
  padding: 18px;
  background: var(--slate);
  border: 1px solid var(--pr-line);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.page-products .pr-find__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cyan);
}

.page-products .pr-find__modes,
.page-products .pr-find__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.page-products .pr-find__modes li {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--ice);
  background: rgba(51, 214, 208, 0.08);
  border: 1px solid var(--pr-line);
}

.page-products .pr-find__modes .mono {
  font-size: 12px;
}

.page-products .pr-figure--find {
  margin-top: 24px;
}

.page-products .pr-find__examples {
  margin-top: 28px;
}

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

.page-products .pr-find__ex a {
  display: block;
  padding: 14px 16px;
  text-decoration: none;
  background: var(--slate);
  border: 1px solid var(--pr-line);
  transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.page-products .pr-find__ex a:hover {
  transform: translateY(-2px);
  border-color: var(--cyan);
  background: rgba(51, 214, 208, 0.06);
}

.page-products .pr-find__ex .mono {
  display: block;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--lava);
}

.page-products .pr-find__ex em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--ash);
}

/* ---------- 维护节奏 ---------- */
.page-products .pr-fresh {
  padding-block: 46px 56px;
  border-top: 1px solid var(--pr-line);
}

.page-products .pr-fresh__lede {
  margin-top: 14px;
  max-width: 64ch;
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--pr-body);
}

.page-products .pr-fresh__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  background: var(--pr-line-warm);
  border: 1px solid var(--pr-line-warm);
}

.page-products .pr-fresh__facts > li {
  padding: 18px 16px;
  background: var(--slate);
}

.page-products .pr-fresh__num {
  display: block;
  font-family: var(--font-geo);
  font-size: 1.32rem;
  line-height: 1.15;
  color: var(--lava);
}

.page-products .pr-fresh__cap {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ash);
}

.page-products .pr-fresh__foot {
  margin-top: 26px;
  max-width: 66ch;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--ash);
}

/* ---------- 响应式 ---------- */
@media (min-width: 720px) {
  .page-products .pr-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .page-products .pr-paths {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pr-zones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .pr-nodes {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    padding-bottom: 30px;
  }

  .page-products .pr-nodes > li:nth-child(even) {
    transform: translateY(26px);
  }

  .page-products .pr-nodes > li:nth-child(even):hover {
    transform: translateY(23px);
  }

  .page-products .pr-tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pr-dims__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-products .pr-find__toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .page-products .pr-fresh__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .page-products .pr-split {
    grid-template-columns: 208px minmax(0, 1fr);
    gap: 46px;
    align-items: start;
  }

  .page-products .pr-index {
    position: sticky;
    top: 96px;
  }

  .page-products .pr-index__list {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .page-products .pr-index__list a {
    justify-content: flex-start;
    width: 100%;
    padding: 9px 12px;
  }

  .page-products .pr-overview__top {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: end;
    gap: 32px;
  }

  .page-products .pr-price__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: start;
    gap: 40px;
  }

  .page-products .pr-find__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
    align-items: end;
    gap: 32px;
  }

  .page-products .pr-find__ex {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-products .pr-dims__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .page-products .pr-head h1 {
    max-width: 16ch;
  }

  .page-products .pr-nodes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (hover: none) {
  .page-products .pr-tier:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.62);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pr-paths > li,
  .page-products .pr-zone,
  .page-products .pr-node,
  .page-products .pr-tier,
  .page-products .pr-find__ex a,
  .page-products .pr-heatbar i {
    transition: none;
  }

  .page-products .pr-nodes > li:nth-child(even) {
    transform: none;
  }
}