.page-products {
  --pp-rule: rgba(28, 23, 21, .14);
  --pp-rule-gold: rgba(201, 164, 92, .34);
  --pp-soft: rgba(28, 23, 21, .62);
  --pp-gap: clamp(1.25rem, 3.5vw, 2.25rem);
  background: var(--pj-cream);
  color: var(--pj-ink);
  overflow-x: clip;
}

/* ============ 封面层 ============ */
.page-products .pp-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(var(--pj-header-h) + clamp(2.25rem, 7vw, 4.5rem)) var(--pj-gutter) clamp(2.25rem, 6vw, 3.75rem);
  background:
    radial-gradient(130% 100% at 92% -18%, rgba(201, 164, 92, .38), transparent 60%),
    linear-gradient(166deg, #FCF8F2 0%, #F5EEE3 52%, #EDE1D0 100%);
}

.page-products .pp-cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--pj-wine), var(--pj-gold));
  opacity: .85;
}

.page-products .pp-cover::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -44%;
  width: clamp(230px, 46vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 31, 44, .18), transparent 70%);
  z-index: -1;
}

.page-products .pp-cover__inner {
  max-width: var(--pj-shell-wide);
  margin-inline: auto;
}

.page-products .pp-cover__eyebrow {
  margin-top: clamp(1.25rem, 4vw, 2.25rem);
  color: var(--pj-wine);
}

.page-products .pp-cover__title {
  margin: .35rem 0 0;
  font-family: var(--pj-serif);
  font-weight: 900;
  font-size: clamp(2.75rem, 12vw, 7.25rem);
  line-height: .96;
  letter-spacing: -.03em;
  color: var(--pj-ink);
}

.page-products .pp-cover__claim {
  margin: clamp(.7rem, 2vw, 1.15rem) 0 0;
  font-family: var(--pj-serif);
  font-weight: 700;
  font-size: clamp(1.0625rem, 2.5vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--pj-wine);
}

.page-products .pp-cover__lead {
  margin: clamp(1rem, 2.5vw, 1.5rem) 0 0;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--pp-soft);
}

.page-products .pp-cover__facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.9rem, 3vw, 2.5rem);
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: clamp(.9rem, 2.5vw, 1.35rem) 0 0;
  list-style: none;
  border-top: 1px solid var(--pp-rule-gold);
}

.page-products .pp-cover__facts li {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.page-products .pp-cover__num {
  font-family: var(--pj-sans);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  letter-spacing: .08em;
  color: var(--pj-ink);
  font-variant-numeric: tabular-nums;
}

.page-products .pp-cover__cap {
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--pp-soft);
}

/* ============ 布局：左侧目录 + 右侧内容流 ============ */
.page-products .pp-layout {
  max-width: var(--pj-shell-wide);
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--pj-gutter) clamp(3rem, 8vw, 6rem);
  display: grid;
  gap: var(--pp-gap);
  align-items: start;
}

.page-products .pp-toc {
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .25rem;
}

.page-products .pp-toc::-webkit-scrollbar {
  display: none;
}

.page-products .pp-toc__caption {
  margin: 0 0 .6rem;
  font-family: var(--pj-serif);
  font-size: .8125rem;
  letter-spacing: .2em;
  color: var(--pj-wine);
}

.page-products .pp-toc .pj-toc__list {
  display: flex;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-products .pp-toc .pj-toc__link {
  display: inline-block;
  white-space: nowrap;
  padding: .4rem .75rem;
  font-size: .8125rem;
  color: var(--pp-soft);
  text-decoration: none;
  border: 1px solid var(--pp-rule);
  border-radius: 2px;
  background: rgba(251, 247, 240, .72);
  transition: color .25s var(--pj-ease), border-color .25s var(--pj-ease), background-color .25s var(--pj-ease);
}

.page-products .pp-toc .pj-toc__link:hover,
.page-products .pp-toc .pj-toc__link.is-active {
  color: var(--pj-ink);
  border-color: var(--pj-gold);
  background: rgba(201, 164, 92, .18);
}

@media (min-width: 1000px) {
  .page-products .pp-layout {
    grid-template-columns: 208px minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
  }

  .page-products .pp-toc {
    position: sticky;
    top: calc(var(--pj-header-h) + 2rem);
    overflow: visible;
    padding-left: 1rem;
    border-left: 1px solid var(--pp-rule-gold);
  }

  .page-products .pp-toc .pj-toc__list {
    display: block;
  }

  .page-products .pp-toc .pj-toc__link {
    display: block;
    padding: .42rem 0;
    border: 0;
    background: none;
    border-radius: 0;
  }

  .page-products .pp-toc .pj-toc__link::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 1px;
    margin-right: .55rem;
    vertical-align: middle;
    background: currentColor;
    opacity: .35;
    transition: width .25s var(--pj-ease), opacity .25s var(--pj-ease);
  }

  .page-products .pp-toc .pj-toc__link:hover {
    border-color: transparent;
    background: none;
    color: var(--pj-wine);
  }

  .page-products .pp-toc .pj-toc__link.is-active {
    border-color: transparent;
    background: none;
    color: var(--pj-ink);
    font-weight: 600;
  }

  .page-products .pp-toc .pj-toc__link.is-active::before {
    width: 24px;
    opacity: 1;
    background: var(--pj-gold);
  }
}

/* ============ 内容流与纸面色块 ============ */
.page-products .pp-flow {
  min-width: 0;
  display: grid;
  gap: var(--pp-gap);
}

.page-products .pp-section {
  position: relative;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  border-radius: 3px;
  background: var(--pp-tint, transparent);
  scroll-margin-top: calc(var(--pj-header-h) + 1.5rem);
  transition: background-color .55s var(--pj-ease);
}

.page-products #index {
  --pp-tint: rgba(251, 247, 240, .82);
}

.page-products #compare {
  --pp-tint: rgba(110, 31, 44, .055);
}

.page-products #downloads {
  --pp-tint: rgba(76, 122, 107, .075);
}

.page-products #saved {
  --pp-tint: rgba(201, 164, 92, .14);
}

.page-products #account {
  background: linear-gradient(152deg, var(--pj-wine) 0%, var(--pj-wine-deep) 100%);
  color: var(--pj-warm);
}

.page-products #support {
  --pp-tint: rgba(28, 23, 21, .045);
}

.page-products .pp-section__note {
  max-width: 52ch;
  margin: .75rem 0 0;
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--pp-soft);
}

/* ============ 01 索引 ============ */
.page-products .pp-index__banner {
  position: relative;
  margin: 0 0 clamp(1.5rem, 4vw, 2.25rem);
  height: clamp(110px, 20vw, 190px);
  overflow: hidden;
  border-radius: 3px;
}

.page-products .pp-index__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(110, 31, 44, .34), transparent 64%);
}

.page-products .pp-index__banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-products .pp-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.page-products .pp-entry {
  padding: clamp(1.125rem, 3vw, 1.75rem);
  background: var(--pj-warm);
  border: 1px solid var(--pp-rule);
  border-top: 3px solid var(--pj-wine);
  border-radius: 2px;
  box-shadow: 0 18px 40px -34px rgba(28, 23, 21, .6);
  transition: transform .4s var(--pj-ease), box-shadow .4s var(--pj-ease);
}

.page-products .pp-entry:hover {
  transform: translateY(-3px);
  box-shadow: var(--pj-lift);
}

.page-products .pp-entry--key {
  border-top-color: var(--pj-gold);
  background: linear-gradient(160deg, rgba(201, 164, 92, .16), var(--pj-warm) 58%);
}

@media (min-width: 760px) {
  .page-products .pp-entry:nth-child(even) {
    margin-inline-start: clamp(1rem, 7vw, 4.5rem);
  }
}

.page-products .pp-entry__no {
  display: inline-block;
  margin-bottom: .55rem;
  padding-bottom: .2rem;
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--pj-gold);
  border-bottom: 1px solid var(--pp-rule-gold);
  font-variant-numeric: tabular-nums;
}

.page-products .pp-entry__name {
  margin: 0;
  font-family: var(--pj-serif);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  line-height: 1.4;
  color: var(--pj-ink);
}

.page-products .pp-entry__desc {
  margin: .6rem 0 0;
  max-width: 46ch;
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--pp-soft);
}

.page-products .pp-spec {
  margin: 1.1rem 0 0;
  padding: .7rem 0 0;
  border-top: 1px dashed var(--pp-rule);
  font-size: .8125rem;
}

.page-products .pp-spec__row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: .75rem;
  padding: .4rem .45rem;
  margin-inline: -.45rem;
  border-radius: 2px;
  transition: background-color .25s var(--pj-ease);
}

.page-products .pp-spec__row + .pp-spec__row {
  border-top: 1px dashed var(--pp-rule);
}

.page-products .pp-spec__row:hover {
  background: rgba(201, 164, 92, .2);
}

.page-products .pp-spec dt {
  letter-spacing: .04em;
  color: var(--pj-ink-soft);
}

.page-products .pp-spec dd {
  margin: 0;
  line-height: 1.7;
  color: var(--pj-ink);
}

.page-products .pp-spec a {
  color: var(--pj-wine);
  text-decoration: underline;
  text-decoration-color: var(--pj-gold);
  text-underline-offset: .22em;
}

.page-products .pp-spec a:hover {
  color: var(--pj-wine-deep);
  text-decoration-color: var(--pj-wine);
}

/* ============ 02 对照阅读 ============ */
.page-products .pp-compare__media {
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  overflow: hidden;
  border-radius: 3px;
}

.page-products .pp-compare__media img,
.page-products .pp-download__media img,
.page-products .pp-saved__media img,
.page-products .pp-account__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

.page-products .pp-dims {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

@media (min-width: 720px) {
  .page-products .pp-dims {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.page-products .pp-dim {
  padding-left: 1rem;
  border-left: 2px solid var(--pj-gold-light);
}

.page-products .pp-dim__no {
  font-size: .8125rem;
  letter-spacing: .08em;
  color: var(--pj-ochre);
  font-variant-numeric: tabular-nums;
}

.page-products .pp-dim__name {
  margin: .3rem 0 .45rem;
  font-family: var(--pj-serif);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--pj-ink);
}

.page-products .pp-dim__text {
  margin: 0;
  font-size: .875rem;
  line-height: 1.8;
  color: var(--pp-soft);
}

.page-products .pp-order {
  margin: clamp(1.5rem, 3.5vw, 2rem) 0 0;
  padding: 1rem 1.25rem;
  background: rgba(251, 247, 240, .85);
  border-left: 3px solid var(--pj-wine);
  border-radius: 2px;
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--pj-ink);
}

/* ============ 03 资料下载 ============ */
.page-products .pp-download {
  display: grid;
  gap: clamp(1.25rem, 3.5vw, 2rem);
}

@media (min-width: 800px) {
  .page-products .pp-download {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: start;
  }
}

.page-products .pp-download__media {
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
}

.page-products .pp-download__lead {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--pp-soft);
}

.page-products .pp-files {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: .8rem;
}

.page-products .pp-files li {
  padding: .9rem 1rem;
  background: var(--pj-warm);
  border: 1px solid var(--pp-rule);
  border-radius: 2px;
  font-size: .875rem;
  line-height: 1.8;
  color: var(--pp-soft);
}

.page-products .pp-files__code {
  display: inline-block;
  min-width: 3.6rem;
  margin-right: .5rem;
  padding: .1rem .4rem;
  font-family: var(--pj-sans);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .12em;
  text-align: center;
  color: var(--pj-wine);
  border: 1px solid var(--pp-rule-gold);
  border-radius: 2px;
}

.page-products .pp-download__foot {
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--pp-rule);
  font-size: .875rem;
  line-height: 1.8;
  color: var(--pp-soft);
}

/* ============ 04 收藏与换设备 ============ */
.page-products .pp-saved {
  display: grid;
  gap: clamp(1.25rem, 3.5vw, 2rem);
}

@media (min-width: 800px) {
  .page-products .pp-saved {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
  }
}

.page-products .pp-saved__media {
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
}

.page-products .pp-steps {
  list-style: none;
  counter-reset: ppstep;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: .9rem;
}

.page-products .pp-steps li {
  counter-increment: ppstep;
  position: relative;
  padding-left: 2.5rem;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--pp-soft);
}

.page-products .pp-steps li::before {
  content: counter(ppstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .18rem;
  padding-bottom: .1rem;
  font-family: var(--pj-sans);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--pj-gold);
  border-bottom: 1px solid var(--pp-rule-gold);
  font-variant-numeric: tabular-nums;
}

.page-products .pp-steps a {
  color: var(--pj-wine);
  text-decoration: underline;
  text-decoration-color: var(--pj-gold);
  text-underline-offset: .22em;
}

/* ============ 05 账户入口（深色块） ============ */
.page-products .pp-account {
  display: grid;
  gap: clamp(1.25rem, 3.5vw, 2.25rem);
  align-items: center;
}

@media (min-width: 760px) {
  .page-products .pp-account {
    grid-template-columns: minmax(0, .58fr) minmax(0, 1fr);
  }
}

.page-products .pp-account__media {
  margin: 0;
  overflow: hidden;
  border-radius: 3px;
  max-width: 320px;
}

.page-products #account .pj-eyebrow {
  color: var(--pj-gold);
}

.page-products #account .pj-section__title {
  color: var(--pj-warm);
}

.page-products #account .pp-account__body p {
  margin: .9rem 0 0;
  font-size: .9375rem;
  line-height: 1.85;
  color: rgba(251, 247, 240, .8);
}

.page-products #account .pj-btn--solid {
  margin-top: 1.35rem;
  background: var(--pj-gold);
  border-color: var(--pj-gold);
  color: var(--pj-wine-deep);
}

.page-products #account .pj-btn--solid:hover {
  background: var(--pj-gold-light);
  border-color: var(--pj-gold-light);
}

/* ============ 06 更新与支持 ============ */
.page-products .pp-cadence {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}

.page-products .pp-cadence li {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 1rem;
  padding: .85rem 0;
  border-top: 1px dashed var(--pp-rule);
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--pp-soft);
}

.page-products .pp-cadence li:first-child {
  border-top: 0;
  padding-top: 0;
}

.page-products .pp-cadence__key {
  font-family: var(--pj-serif);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--pj-wine);
}

.page-products .pp-support__line {
  margin: 1.15rem 0 0;
  font-size: .9375rem;
  line-height: 1.85;
  color: var(--pp-soft);
}

.page-products .pp-support__line a {
  color: var(--pj-wine);
  text-decoration: underline;
  text-decoration-color: var(--pj-gold);
  text-underline-offset: .22em;
}

.page-products .pp-support__line a:hover {
  color: var(--pj-wine-deep);
}

/* ============ 窄屏收尾 ============ */
@media (max-width: 460px) {
  .page-products .pp-spec__row {
    grid-template-columns: minmax(0, 1fr);
    gap: .1rem;
  }

  .page-products .pp-spec dt {
    font-size: .75rem;
    letter-spacing: .1em;
  }

  .page-products .pp-cadence li {
    grid-template-columns: minmax(0, 1fr);
    gap: .2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .pp-entry,
  .page-products .pp-spec__row,
  .page-products .pp-toc .pj-toc__link {
    transition: none;
  }

  .page-products .pp-entry:hover {
    transform: none;
  }
}