.page-products{
  --ps-tick:rgba(246,239,227,.26);
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  overflow-x:clip;
}

/* ---------- 首屏框景 ---------- */
.page-products .ps-hero{
  position:relative;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(255,90,31,.16) 0%, transparent 58%),
    var(--carbon);
  color:var(--on-dark);
  padding:20px 0 clamp(38px,4.4vw,64px);
  border-bottom:1px solid var(--line-dark);
}
.page-products .ps-hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:9px;
  background-image:repeating-linear-gradient(90deg, var(--ps-tick) 0 1px, transparent 1px 26px);
  opacity:.75;
  pointer-events:none;
}
.page-products .ps-hero .breadcrumb{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--on-dark-soft);
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:clamp(20px,3vw,36px);
}
.page-products .ps-hero .breadcrumb a{
  color:var(--on-dark-soft);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.page-products .ps-hero .breadcrumb a:hover{
  color:var(--lava);
  border-bottom-color:var(--lava);
}
.page-products .ps-hero .breadcrumb__sep{color:rgba(246,239,227,.4);}

.page-products .ps-hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px,3.4vw,48px);
  align-items:start;
}
.page-products .ps-hero .eyebrow{
  color:var(--lava);
  margin:0 0 14px;
}
.page-products .ps-hero h1{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(36px,6.2vw,76px);
  line-height:.98;
  letter-spacing:-.015em;
  margin:0 0 18px;
  color:var(--on-dark);
  max-width:16ch;
}
.page-products .ps-hero__lede{
  color:var(--on-dark-soft);
  font-size:clamp(15px,1.4vw,17px);
  line-height:1.75;
  max-width:52ch;
  margin:0;
}
.page-products .ps-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:clamp(20px,2.6vw,30px);
}

.page-products .ps-fig{
  margin:0;
  border:1px solid var(--line-light);
  background:
    repeating-linear-gradient(135deg, rgba(27,26,24,.055) 0 8px, transparent 8px 16px),
    var(--paper);
}
.page-products .ps-fig img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-products .ps-fig__cap{
  display:block;
  padding:9px 12px 10px;
  border-top:1px solid var(--line-light);
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-soft);
  background:rgba(246,239,227,.6);
}
.page-products .ps-fig--dark{
  border-color:var(--line-dark);
  background:
    repeating-linear-gradient(135deg, rgba(246,239,227,.06) 0 8px, transparent 8px 16px),
    #151618;
  box-shadow:0 24px 50px -40px rgba(0,0,0,.9);
}
.page-products .ps-fig--dark .ps-fig__cap{
  border-top-color:var(--line-dark);
  color:var(--on-dark-soft);
  background:rgba(246,239,227,.04);
}
.page-products .ps-hero__figure{margin-top:4px;}

/* ---------- 图例索引 ---------- */
.page-products .ps-legend{
  list-style:none;
  margin:clamp(28px,3.6vw,46px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  border-top:1px solid var(--line-dark);
}
.page-products .ps-legend li{border-bottom:1px solid var(--line-dark);}
.page-products .ps-legend a{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"num name" "num desc";
  gap:2px 12px;
  padding:13px 14px 15px;
  text-decoration:none;
  color:var(--on-dark);
  transition:background .25s var(--ease), padding-left .25s var(--ease);
}
.page-products .ps-legend a:hover,
.page-products .ps-legend a:focus-visible{
  background:rgba(255,90,31,.14);
  padding-left:20px;
}
.page-products .ps-legend__num{
  grid-area:num;
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:700;
  color:var(--lava);
  padding-top:3px;
  letter-spacing:.04em;
}
.page-products .ps-legend__name{
  grid-area:name;
  font-family:var(--f-display);
  font-weight:800;
  font-size:19px;
  letter-spacing:.01em;
}
.page-products .ps-legend__desc{
  grid-area:desc;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.05em;
  color:rgba(246,239,227,.62);
}

/* ---------- 数据条 ---------- */
.page-products .ps-stats{
  background:var(--paper);
  border-bottom:1px solid var(--line-light);
}
.page-products .ps-stats__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.page-products .ps-stat{
  padding:18px 14px 20px;
  border-right:1px solid var(--line-light);
  border-bottom:1px solid var(--line-light);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.page-products .ps-stat__num{
  font-family:var(--f-mono);
  font-size:clamp(28px,4.4vw,44px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--carbon);
  font-variant-numeric:tabular-nums;
}
.page-products .ps-stat__label{
  font-size:12px;
  line-height:1.5;
  color:var(--ink-soft);
  letter-spacing:.02em;
}

/* ---------- 筛选条 ---------- */
.page-products .ps-filterbar{
  position:sticky;
  top:var(--bar-h);
  z-index:6;
  background:rgba(246,239,227,.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-light);
  box-shadow:0 12px 24px -26px rgba(14,15,16,.9);
}
.page-products .ps-filterbar__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  padding-top:11px;
  padding-bottom:11px;
}
.page-products .ps-filterbar__label{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel-deep);
}
.page-products .filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.page-products .filter-btn{
  appearance:none;
  border:1px solid var(--line-light);
  background:transparent;
  color:var(--ink);
  font-family:var(--f-display);
  font-weight:700;
  font-size:14px;
  letter-spacing:.03em;
  padding:6px 12px;
  border-radius:var(--r);
  cursor:pointer;
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.page-products .filter-btn:hover{border-color:var(--lava);color:var(--lava-deep);}
.page-products .filter-btn.is-active{
  background:var(--lava);
  border-color:var(--lava);
  color:var(--carbon);
}
.page-products .filter-count{
  margin-left:auto;
  font-size:11px;
  letter-spacing:.06em;
  color:var(--steel-deep);
}

/* ---------- 模块 ---------- */
.page-products .ps-mod{
  padding:clamp(42px,5vw,84px) 0;
  border-bottom:1px solid var(--line-light);
}
.page-products .ps-mod[hidden],
.page-products .ps-mod.is-hidden{display:none;}

.page-products .ps-mod__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 14px;
  padding-bottom:16px;
  margin-bottom:clamp(20px,2.6vw,32px);
  border-bottom:1px solid var(--line-light);
}
.page-products .ps-mod__head h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(25px,3.4vw,40px);
  line-height:1.04;
  letter-spacing:-.01em;
  margin:0;
  color:var(--carbon);
  flex:1 1 260px;
}
.page-products .ps-mod__note{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel);
  white-space:nowrap;
}

.page-products .ps-mod__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(22px,3vw,40px);
  align-items:start;
}
.page-products .ps-mod__text p{
  margin:0;
  font-size:clamp(15px,1.3vw,16px);
  line-height:1.8;
  color:var(--ink-soft);
  max-width:56ch;
}

.page-products .ps-specs{
  list-style:none;
  margin:20px 0 0;
  padding:0;
  border-top:1px solid var(--line-light);
}
.page-products .ps-specs li{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  padding:11px 0 12px;
  border-bottom:1px solid var(--line-light);
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink);
}
.page-products .ps-specs .k{
  font-family:var(--f-mono);
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--steel-deep);
}

.page-products .ps-mod__media{display:flex;flex-direction:column;gap:14px;}
.page-products .ps-inline-link{
  margin:0;
  font-size:13.5px;
  line-height:1.6;
}
.page-products .ps-inline-link a{
  color:var(--lava-deep);
  text-decoration:none;
  border-bottom:1px solid rgba(185,50,8,.35);
}
.page-products .ps-inline-link a:hover{border-bottom-color:var(--lava-deep);}

/* 侧栏提示卡 */
.page-products .ps-note-card{
  border:1px solid var(--line-light);
  border-left:3px solid var(--lava);
  background:var(--paper);
  padding:20px 20px 22px;
  box-shadow:var(--shadow);
}
.page-products .ps-note-card__k{
  display:block;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--steel-deep);
  margin-bottom:10px;
}
.page-products .ps-note-card__t{
  margin:0 0 16px;
  font-size:15px;
  line-height:1.75;
  color:var(--ink);
}

/* 折叠面板 */
.page-products .ps-acc{
  border:1px solid var(--line-light);
  background:rgba(232,221,201,.35);
  margin-top:14px;
}
.page-products .ps-acc summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 15px;
  cursor:pointer;
  list-style:none;
  font-family:var(--f-display);
  font-weight:700;
  font-size:17px;
  letter-spacing:.01em;
  color:var(--carbon);
}
.page-products .ps-acc summary::-webkit-details-marker{display:none;}
.page-products .ps-acc summary::after{
  content:"+";
  font-family:var(--f-mono);
  font-size:17px;
  color:var(--lava);
  line-height:1;
}
.page-products .ps-acc[open] summary::after{content:"–";}
.page-products .ps-acc[open] summary{
  background:var(--paper);
  border-bottom:1px solid var(--line-light);
}
.page-products .ps-acc__body{
  padding:14px 15px 16px;
  background:var(--cream);
}

.page-products .ps-steps{
  list-style:none;
  counter-reset:psstep;
  margin:0;
  padding:0;
}
.page-products .ps-steps li{
  counter-increment:psstep;
  display:grid;
  grid-template-columns:26px 1fr;
  gap:10px;
  padding:9px 0;
  border-bottom:1px dotted var(--line-light);
  font-size:14.5px;
  line-height:1.65;
  color:var(--ink-soft);
}
.page-products .ps-steps li:last-child{border-bottom:0;}
.page-products .ps-steps li::before{
  content:counter(psstep,decimal-leading-zero);
  font-family:var(--f-mono);
  font-size:11.5px;
  font-weight:700;
  color:var(--steel);
  padding-top:3px;
}

/* ---------- 深色带：设备差异 ---------- */
.page-products .ps-band{
  background:var(--carbon);
  color:var(--on-dark);
  border-bottom:1px solid var(--line-dark);
}
.page-products .ps-band .ps-mod__head{border-bottom-color:var(--line-dark);}
.page-products .ps-band .ps-mod__head h2{color:var(--on-dark);}
.page-products .ps-band .ps-mod__note{color:var(--steel-lt);}
.page-products .ps-band .sec-index{background:var(--lava);color:var(--carbon);}
.page-products .ps-band__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.page-products .ps-band__card{
  border:1px solid var(--line-dark);
  background:rgba(246,239,227,.04);
  padding:20px 18px 22px;
}
.page-products .ps-band__card p{
  margin:0;
  font-size:14.5px;
  line-height:1.8;
  color:var(--on-dark-soft);
}
.page-products .ps-band__k{
  display:block;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lime);
  margin-bottom:10px;
}
.page-products .ps-band__card--wide{
  border-color:rgba(199,255,63,.32);
  background:rgba(199,255,63,.06);
}
.page-products .ps-band__card--wide .ps-band__k{color:var(--lime);}

/* ---------- 收尾 CTA ---------- */
.page-products .ps-mod__grid--single{grid-template-columns:1fr;}
.page-products .ps-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}
.page-products .btn--ghost--light{
  border-color:var(--line-light);
  color:var(--ink);
}
.page-products .btn--ghost--light:hover{
  border-color:var(--lava);
  color:var(--lava-deep);
}

/* ---------- 响应式 ---------- */
@media (min-width:600px){
  .page-products .ps-legend{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-products .ps-legend li:nth-last-child(-n+1){border-bottom:1px solid var(--line-dark);}
  .page-products .ps-specs li{
    grid-template-columns:minmax(88px,128px) 1fr;
    gap:16px;
    align-items:baseline;
  }
  .page-products .ps-specs .k{padding-top:2px;}
  .page-products .ps-band__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-products .ps-band__card--wide{grid-column:1 / -1;}
}

@media (min-width:900px){
  .page-products .ps-hero__grid{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:clamp(30px,4vw,56px);
  }
  .page-products .ps-stats__grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .page-products .ps-stat{border-bottom:0;padding:26px 20px 28px;}
  .page-products .ps-legend{grid-template-columns:repeat(5,minmax(0,1fr));}
  .page-products .ps-legend li{border-bottom:0;border-right:1px solid var(--line-dark);}
  .page-products .ps-legend li:last-child{border-right:0;}
  .page-products .ps-legend a{padding:16px 16px 18px;}
  .page-products .ps-mod__grid{
    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
    gap:clamp(28px,3.6vw,52px);
  }
  .page-products .ps-mod--flip .ps-mod__grid{
    grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  }
  .page-products .ps-mod--flip .ps-mod__text{order:2;}
  .page-products .ps-mod--flip .ps-mod__media{order:1;}
}

@media (min-width:1100px){
  .page-products .ps-mod__head{gap:0 18px;}
  .page-products .ps-mod__note{margin-left:auto;}
}

@media (prefers-reduced-motion:reduce){
  .page-products .ps-legend a,
  .page-products .filter-btn{
    transition:none;
  }
  .page-products .ps-legend a:hover,
  .page-products .ps-legend a:focus-visible{padding-left:14px;}
}
</main>