.page-products {
  --pg-line: rgba(140, 107, 18, .38);
  --pg-line-soft: rgba(140, 107, 18, .20);
  --pg-card-shadow: 0 1px 0 rgba(140, 107, 18, .55), 7px 9px 0 -2px rgba(11, 36, 29, .08);
  --pg-card-shadow-hi: 0 1px 0 rgba(140, 107, 18, .8), 11px 15px 0 -2px rgba(11, 36, 29, .13);
  --pg-amber-band: rgba(199, 116, 26, .13);
}

/* ---------- 通用小节头 ---------- */
.page-products .pg-sec-head {
  max-width: 700px;
  margin-bottom: clamp(20px, 3vw, 30px);
}

.page-products .pg-sec-head h2 {
  font-family: var(--jh-serif);
  font-size: clamp(23px, 4.2vw, 38px);
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--jh-text);
  margin: 8px 0 10px;
}

.page-products .pg-sec-head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--jh-muted);
}

/* ---------- 首屏 ---------- */
.page-products .pg-hero {
  padding-top: clamp(22px, 4vw, 42px);
  background-image: radial-gradient(circle at 90% 4%, rgba(201, 162, 39, .22), transparent 44%);
  background-repeat: no-repeat;
}

.page-products .pg-hero__grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: center;
  margin-top: 14px;
}

.page-products .pg-hero__copy {
  max-width: 620px;
}

.page-products .pg-hero h1 {
  font-family: var(--jh-serif);
  font-size: clamp(32px, 7vw, 56px);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--jh-text);
  margin: 12px 0 18px;
}

.page-products .pg-lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.78;
  color: var(--jh-text);
  max-width: 34em;
}

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

.page-products .pg-hero__tags li {
  font-size: 14px;
  letter-spacing: .02em;
  color: var(--jh-ink);
  background: rgba(201, 162, 39, .16);
  border: 1px solid rgba(140, 107, 18, .5);
  padding: 6px 13px;
}

.page-products .pg-hero__fig {
  margin: 0;
  border: 1px solid var(--jh-gold-line);
  box-shadow: var(--pg-card-shadow);
  background: var(--jh-paper);
}

.page-products .pg-hero__fig img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 设备分段控件 ---------- */
.page-products .pg-tabs {
  margin-top: 6px;
}

.page-products .pg-tabbar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px;
  margin: 0 0 22px;
  background: rgba(11, 36, 29, .045);
  border: 1px solid var(--pg-line-soft);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.page-products .pg-tabbar .jh-tabs__btn {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--jh-ink);
  font-family: var(--jh-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .22s var(--jh-ease), color .22s var(--jh-ease), border-color .22s var(--jh-ease);
}

.page-products .pg-tabbar .jh-tabs__btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.page-products .pg-tabbar .jh-tabs__btn:hover {
  background: rgba(201, 162, 39, .16);
}

.page-products .pg-tabbar .jh-tabs__btn.is-active,
.page-products .pg-tabbar .jh-tabs__btn[aria-selected="true"] {
  background: var(--jh-ink);
  color: var(--jh-gold-hi);
  border-color: var(--jh-gold-line);
}

.page-products .pg-tabbar .jh-tabs__btn:focus-visible {
  outline: 2px solid var(--jh-gold);
  outline-offset: 2px;
}

.page-products .jh-tabs__panel {
  animation: pg-panel-in .26s var(--jh-ease) both;
}

@keyframes pg-panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 下载卡片 ---------- */
.page-products .pg-dl {
  position: relative;
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3.4vw, 36px);
  background: var(--jh-card);
  border: 1px solid var(--jh-gold-line);
  box-shadow: var(--pg-card-shadow);
  transition: transform .22s var(--jh-ease), box-shadow .22s var(--jh-ease);
}

.page-products .pg-dl:hover,
.page-products .pg-dl:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--pg-card-shadow-hi);
}

.page-products .pg-dl__badge {
  position: absolute;
  top: -11px;
  right: 18px;
  box-shadow: 0 2px 0 rgba(11, 36, 29, .22);
}

.page-products .pg-dl h3 {
  font-family: var(--jh-serif);
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0 0 12px;
  color: var(--jh-text);
}

.page-products .pg-dl__size {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  font-family: var(--jh-serif);
  font-size: 34px;
  line-height: 1;
  color: var(--jh-gold-line);
  letter-spacing: -.01em;
}

.page-products .pg-dl__size span {
  font-family: var(--jh-sans);
  font-size: 15px;
  color: var(--jh-muted);
}

.page-products .pg-dl__size--word {
  font-size: 26px;
  color: var(--jh-copper);
}

.page-products .pg-dl__note {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--jh-muted);
}

.page-products .pg-dl__facts {
  margin: 0;
  display: grid;
  gap: 11px;
}

.page-products .pg-dl__facts > div {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}

.page-products .pg-dl__facts dt {
  font-size: 15px;
  color: var(--jh-muted);
}

.page-products .pg-dl__facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--jh-text);
}

.page-products .pg-dl__link {
  display: inline-block;
  margin-top: 16px;
  font-size: 15px;
}

.page-products .pg-dl__hover {
  margin: 0;
  padding-top: 15px;
  border-top: 1px dashed var(--pg-line);
  font-size: 14px;
  line-height: 1.7;
  color: var(--jh-muted);
  opacity: .62;
  transition: opacity .22s var(--jh-ease);
}

.page-products .pg-dl:hover .pg-dl__hover,
.page-products .pg-dl:focus-within .pg-dl__hover {
  opacity: 1;
}

/* ---------- 完整包 / 增量包 ---------- */
.page-products .pg-packs {
  display: grid;
  gap: 20px;
}

.page-products .pg-pack {
  position: relative;
  padding: clamp(24px, 3.2vw, 34px);
  border: 1px solid var(--jh-gold-line);
  box-shadow: var(--pg-card-shadow);
  background: var(--jh-card);
}

.page-products .pg-pack h3 {
  font-family: var(--jh-serif);
  font-size: clamp(20px, 3vw, 27px);
  line-height: 1.3;
  margin: 0 0 14px;
}

.page-products .pg-pack__vol {
  margin: 0;
  font-family: var(--jh-serif);
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1;
  letter-spacing: -.01em;
}

.page-products .pg-pack__vol span {
  font-family: var(--jh-sans);
  font-size: 15px;
  margin-left: 8px;
  letter-spacing: 0;
}

.page-products .pg-pack__desc {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.75;
}

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

.page-products .pg-pack__list li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.7;
}

.page-products .pg-pack__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 2px;
  background: currentColor;
  opacity: .55;
}

.page-products .pg-pack__meter {
  margin-top: 24px;
  height: 10px;
  background: rgba(140, 107, 18, .18);
  overflow: hidden;
}

.page-products .pg-pack__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--jh-gold-line), var(--jh-gold));
}

.page-products .pg-pack__fill--delta {
  width: 18%;
  background: linear-gradient(90deg, var(--jh-copper), var(--jh-gold-hi));
}

.page-products .pg-pack__cap {
  margin: 10px 0 0;
  font-size: 14px;
  letter-spacing: .02em;
}

.page-products .pg-pack--full {
  background: var(--jh-ink);
  color: var(--jh-paper);
  border-color: rgba(201, 162, 39, .55);
}

.page-products .pg-pack--full h3,
.page-products .pg-pack--full .pg-pack__vol {
  color: var(--jh-gold-hi);
}

.page-products .pg-pack--full .pg-pack__desc,
.page-products .pg-pack--full .pg-pack__cap {
  color: rgba(246, 241, 228, .76);
}

.page-products .pg-pack--full .pg-pack__list li {
  color: rgba(246, 241, 228, .92);
}

.page-products .pg-pack--full .pg-pack__meter {
  background: rgba(246, 241, 228, .18);
}

.page-products .pg-pack--delta .pg-pack__vol {
  color: var(--jh-copper);
}

/* ---------- 安装步骤 ---------- */
.page-products .pg-install__fig {
  margin: 0 0 clamp(24px, 3vw, 34px);
  border: 1px solid var(--jh-gold-line);
  box-shadow: var(--pg-card-shadow);
  background: var(--jh-paper);
}

.page-products .pg-install__fig img {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .pg-step {
  background: var(--jh-card);
  border: 1px solid var(--pg-line);
  box-shadow: var(--pg-card-shadow);
}

.page-products .pg-step + .pg-step {
  margin-top: 16px;
}

.page-products .pg-step__sum {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px clamp(18px, 2.6vw, 26px);
  cursor: pointer;
  list-style: none;
}

.page-products .pg-step__sum::-webkit-details-marker {
  display: none;
}

.page-products .pg-step__sum:focus-visible {
  outline: 2px solid var(--jh-gold);
  outline-offset: -2px;
}

.page-products .pg-step__no {
  font-family: var(--jh-serif);
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1;
  color: var(--jh-gold-line);
  letter-spacing: -.02em;
}

.page-products .pg-step__name {
  font-family: var(--jh-serif);
  font-size: clamp(18px, 2.6vw, 23px);
  line-height: 1.3;
  color: var(--jh-text);
}

.page-products .pg-step__sum::after {
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--jh-gold-line);
  border-bottom: 2px solid var(--jh-gold-line);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s var(--jh-ease);
}

.page-products .pg-step[open] .pg-step__sum::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.page-products .pg-step__body {
  padding: 4px clamp(18px, 2.6vw, 26px) 24px;
  border-top: 1px dashed var(--pg-line);
  margin-top: 2px;
  padding-top: 16px;
  font-size: 15px;
  line-height: 1.78;
  color: var(--jh-text);
}

.page-products .pg-step__body > p {
  margin: 0 0 12px;
  max-width: 62ch;
}

.page-products .pg-step__body > p:last-child {
  margin-bottom: 0;
}

.page-products .pg-step__snag {
  padding: 11px 15px;
  background: rgba(169, 102, 58, .10);
  border-left: 3px solid var(--jh-copper);
  font-size: 14px;
  color: var(--jh-text);
}

.page-products .pg-step__snag strong {
  color: var(--jh-copper);
  margin-right: 8px;
  letter-spacing: .02em;
}

/* ---------- 入口变更通栏 ---------- */
.page-products .pg-shift {
  background: var(--pg-amber-band);
  border-top: 1px solid rgba(199, 116, 26, .38);
  border-bottom: 1px solid rgba(199, 116, 26, .38);
}

.page-products .pg-shift__band {
  display: grid;
  gap: clamp(24px, 4vw, 46px);
  align-items: center;
  padding-left: clamp(18px, 3vw, 32px);
  border-left: 4px solid var(--jh-amber);
}

.page-products .pg-shift__copy {
  max-width: 640px;
}

.page-products .pg-shift h2 {
  font-family: var(--jh-serif);
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1.26;
  letter-spacing: -.01em;
  color: var(--jh-text);
  margin: 14px 0 12px;
}

.page-products .pg-shift p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--jh-text);
}

.page-products .pg-shift__list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-products .pg-shift__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.72;
  color: var(--jh-text);
}

.page-products .pg-shift__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .58em;
  width: 10px;
  height: 10px;
  background: var(--jh-amber);
  border-radius: 50%;
}

.page-products .pg-shift__btn {
  margin-top: 24px;
}

.page-products .pg-shift__fig {
  margin: 0;
  border: 1px solid rgba(199, 116, 26, .5);
  box-shadow: 0 1px 0 rgba(199, 116, 26, .5), 7px 9px 0 -2px rgba(11, 36, 29, .09);
  background: var(--jh-paper);
}

.page-products .pg-shift__fig img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 下载不顺 ---------- */
.page-products .pg-trouble__fig {
  margin: 0 0 clamp(24px, 3vw, 34px);
  border: 1px solid var(--pg-line);
  box-shadow: var(--pg-card-shadow);
  background: var(--jh-paper);
}

.page-products .pg-trouble__fig img {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .pg-issue {
  padding: clamp(20px, 2.8vw, 28px);
  background: var(--jh-card);
  border: 1px solid var(--pg-line);
  box-shadow: var(--pg-card-shadow);
  transition: transform .22s var(--jh-ease), box-shadow .22s var(--jh-ease);
}

.page-products .pg-issue:hover {
  transform: translateY(-4px);
  box-shadow: var(--pg-card-shadow-hi);
}

.page-products .pg-issue h3 {
  font-family: var(--jh-serif);
  font-size: 19px;
  line-height: 1.35;
  margin: 0 0 12px;
  color: var(--jh-text);
}

.page-products .pg-issue h3::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 14px;
  background: linear-gradient(90deg, var(--jh-gold-line), var(--jh-gold-hi));
}

.page-products .pg-issue p {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--jh-muted);
}

.page-products .pg-trouble__more {
  margin: clamp(26px, 3vw, 36px) 0 16px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.75;
  color: var(--jh-text);
}

/* ---------- 更新节奏 ---------- */
.page-products .pg-cadence__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
}

.page-products .pg-cadence__copy {
  max-width: 620px;
}

.page-products .pg-cadence h2 {
  font-family: var(--jh-serif);
  font-size: clamp(23px, 4.2vw, 38px);
  line-height: 1.24;
  letter-spacing: -.01em;
  margin: 8px 0 14px;
  color: var(--jh-text);
}

.page-products .pg-cadence__copy > p {
  margin: 0;
  font-size: 16px;
  line-height: 1.78;
  color: var(--jh-text);
}

.page-products .pg-stats {
  list-style: none;
  margin: 28px 0 28px;
  padding: 0;
  display: grid;
  gap: 18px;
  border-top: 1px solid var(--pg-line-soft);
  padding-top: 22px;
}

.page-products .pg-stats li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.page-products .pg-stat__n {
  font-family: var(--jh-serif);
  font-size: clamp(30px, 5.4vw, 44px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--jh-copper);
  min-width: 66px;
}

.page-products .pg-stat__l {
  font-size: 15px;
  line-height: 1.6;
  color: var(--jh-muted);
}

.page-products .pg-cadence__fig {
  margin: 0;
  border: 1px solid var(--jh-gold-line);
  box-shadow: var(--pg-card-shadow);
  background: var(--jh-paper);
}

.page-products .pg-cadence__fig img {
  display: block;
  width: 100%;
  height: auto;
}

.page-products .pg-cadence__foot {
  margin: clamp(24px, 3vw, 34px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--pg-line-soft);
  font-size: 15px;
  line-height: 1.75;
  color: var(--jh-muted);
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-products .pg-dl {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    align-items: start;
    gap: 18px clamp(20px, 3vw, 40px);
  }

  .page-products .pg-dl__hover {
    grid-column: 1 / -1;
  }

  .page-products .pg-packs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }

  .page-products .pg-shift__band {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  }

  .page-products .pg-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .page-products .pg-stats li {
    flex-direction: column;
    gap: 8px;
  }

  .page-products .pg-stat__n {
    min-width: 0;
  }
}

@media (min-width: 1024px) {
  .page-products .pg-hero__grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  }

  .page-products .pg-cadence__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-products .jh-tabs__panel {
    animation: none;
  }

  .page-products .pg-dl,
  .page-products .pg-issue,
  .page-products .pg-step__sum::after,
  .page-products .pg-dl__hover {
    transition: none;
  }

  .page-products .pg-dl:hover,
  .page-products .pg-dl:focus-within,
  .page-products .pg-issue:hover {
    transform: none;
  }
}
<<<END>>>