.page-products{
  --pp-gap:12px;
  --pp-sticky-top:calc(var(--topline) + 24px);
  padding-bottom:clamp(40px,7vw,88px);
  background:var(--ink);
  color:var(--paper);
}

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

.page-products .pg-crumbs{
  margin-bottom:18px;
}
.page-products .pg-crumbs a{
  color:var(--mist);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.page-products .pg-crumbs a:hover,
.page-products .pg-crumbs a:focus-visible{
  color:var(--cyan);
  border-color:var(--cyan);
}
.page-products .pg-crumbs span[aria-hidden]{
  color:var(--hair);
  margin:0 8px;
}

/* 首屏声明 */
.page-products .pg-head{
  display:grid;
  gap:18px;
  border-top:1px solid var(--hair);
  padding:22px 0 34px;
}
.page-products .pg-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--cyan);
  margin:0;
}
.page-products .pg-head .display-statement{
  margin:0;
  max-width:22ch;
}
.page-products .pg-lead{
  margin:0;
  max-width:62ch;
  font-size:17px;
  line-height:1.75;
  color:var(--paper);
}
.page-products .pg-facts{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  list-style:none;
  margin:0;
  padding:12px 0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
}
.page-products .pg-fact{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--mist);
}
.page-products .pg-fact b{
  color:var(--gold);
  font-weight:600;
  font-size:13px;
  margin-right:4px;
}

.page-products .pg-jump{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  list-style:none;
  margin:0;
  padding:0;
}
.page-products .pg-jump a{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-size:14px;
  color:var(--paper);
  text-decoration:none;
  border-bottom:1px solid var(--hair);
  padding-bottom:3px;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease);
}
.page-products .pg-jump a:hover,
.page-products .pg-jump a:focus-visible{
  color:var(--cyan);
  border-color:var(--cyan);
}
.page-products .pg-jump .mono{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--gold);
}

/* 主栅格 8:4 */
.page-products .pg-grid-main{
  display:grid;
  gap:0;
  margin-top:clamp(24px,4vw,44px);
}
.page-products .pg-main{
  min-width:0;
}

/* 章节 */
.page-products .pg-chapter{
  padding:clamp(32px,5vw,52px) 0;
  border-top:1px solid var(--hair);
}
.page-products .chapter-head{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin-bottom:16px;
}
.page-products .pg-chapter .chapter-num{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--gold);
}
.page-products .pg-sub{
  max-width:64ch;
  color:var(--mist);
  margin:0 0 20px;
}
.page-products .pg-foot-note{
  margin-top:16px;
}
.page-products .pg-tail-note{
  margin-top:clamp(28px,4vw,48px);
  padding-top:16px;
  border-top:1px solid var(--hair);
}

/* 图片容器 */
.page-products .pg-banner{
  margin:0 0 22px;
  border:1px solid var(--hair);
  background:var(--slate);
  overflow:hidden;
}
.page-products .pg-banner img{
  width:100%;
  aspect-ratio:3 / 1;
  object-fit:cover;
}
.page-products .pg-banner--shift img{
  aspect-ratio:16 / 7;
}
.page-products .pg-shot{
  margin:0;
  background:var(--slate);
  border:1px solid var(--hair);
  overflow:hidden;
}
.page-products .pg-shot img{
  width:100%;
  object-fit:cover;
}
.page-products .pg-cap{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--mist);
  padding:10px 12px;
  border-top:1px solid var(--hair);
}

/* 筛选条 */
.page-products .pg-filter{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  padding:12px 0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  margin-bottom:4px;
}
.page-products .pg-filter .index-label{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--mist);
  margin-right:4px;
}
.page-products .pg-count{
  margin-left:auto;
  color:var(--cyan);
}
.page-products .chip{
  -webkit-appearance:none;
  appearance:none;
  background:transparent;
  color:var(--mist);
  border:1px solid var(--hair);
  border-radius:2px;
  padding:6px 12px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  cursor:pointer;
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.page-products .chip:hover{
  color:var(--paper);
  border-color:var(--mist);
}
.page-products .chip:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}
.page-products .chip[aria-pressed="true"]{
  color:var(--ink);
  background:var(--cyan);
  border-color:var(--cyan);
}

/* 栏目总表 */
.page-products .pg-table{
  display:grid;
}
.page-products .pg-thead{
  display:none;
}
.page-products .col-row{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding:14px 10px;
  border-bottom:1px solid var(--hair);
  color:inherit;
  text-decoration:none;
  transition:background var(--dur-1) var(--ease);
}
.page-products .col-row:hover{
  background:var(--carbon);
}
.page-products a.col-row:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  background:var(--carbon);
}
.page-products .col-num{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--gold);
}
.page-products .col-name{
  font-size:17px;
  font-weight:600;
  color:var(--paper);
  transition:color var(--dur-1) var(--ease);
}
.page-products a.col-row:hover .col-name,
.page-products a.col-row:focus-visible .col-name{
  color:var(--cyan);
}
.page-products .col-scope{
  font-size:15px;
  line-height:1.6;
  color:var(--mist);
}
.page-products .col-scope::before{
  content:"内容 · ";
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--hair);
}
.page-products .col-freq{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--mist);
}
.page-products .col-freq::before{
  content:"更新 · ";
  font-size:11px;
  letter-spacing:.1em;
  color:var(--hair);
  flex:1 1 100%;
}
.page-products .freq-dot{
  width:8px;
  height:8px;
  flex:0 0 auto;
  display:inline-block;
}
.page-products .freq-dot--daily{background:var(--cyan);}
.page-products .freq-dot--issue{background:var(--gold);}
.page-products .freq-dot--week{background:var(--clay);}
.page-products .freq-dot--moss{background:var(--moss);}
.page-products .col-path{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--mist);
  overflow-wrap:anywhere;
}
.page-products .col-path::before{
  content:"路径 · ";
  color:var(--hair);
  letter-spacing:.1em;
  font-size:11px;
}
.page-products .col-row--static{
  background:var(--slate);
}

/* 标签分组 */
.page-products .pg-tag-grid{
  display:grid;
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
}
.page-products .pg-tag-group{
  background:var(--ink);
  padding:16px 16px 18px;
}
.page-products .pg-tag-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.page-products .pg-tag-count{
  color:var(--gold);
  white-space:nowrap;
}
.page-products .pg-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none;
  margin:0 0 12px;
  padding:0;
}
.page-products .pg-tag-note{
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--mist);
}

/* 电脑端专区 8:4 */
.page-products .pg-split{
  display:grid;
  gap:22px;
  margin-bottom:26px;
}
.page-products .pg-split-text p{
  margin:0 0 14px;
}
.page-products .pg-split-text p:last-child{
  margin-bottom:0;
}

.page-products .pg-res{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.page-products .res-panel{
  background:var(--carbon);
  border:1px solid var(--hair);
  padding:16px;
  transition:border-color var(--dur-3) var(--ease);
}
.page-products .res-panel--now{
  border-color:var(--cyan);
  background:var(--hl);
}
.page-products .res-spec{
  display:grid;
  gap:6px;
  margin:14px 0 16px;
}
.page-products .res-spec > div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding-bottom:6px;
  border-bottom:1px solid var(--hair);
}
.page-products .res-spec dt{
  font-size:14px;
  color:var(--mist);
}
.page-products .res-spec dd{
  margin:0;
  color:var(--gold);
}
.page-products .res-visual{
  position:relative;
  height:52px;
  border:1px dashed var(--hair);
  background:var(--slate);
}
.page-products .res-inner{
  position:absolute;
  top:6px;
  bottom:6px;
  left:6px;
  display:block;
  border:1px solid var(--cyan);
  background:rgba(79,227,208,.08);
}
.page-products .res-inner--narrow{right:22%;}
.page-products .res-inner--wide{right:8%;}

/* 刻度尺 */
.page-products .pg-ruler{
  position:relative;
  height:58px;
  margin-top:26px;
  border-top:1px solid var(--hair);
}
.page-products .pg-ruler-fill{
  position:absolute;
  top:-1px;
  left:8%;
  width:88%;
  height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--gold));
}
.page-products .tick{
  position:absolute;
  top:0;
  width:1px;
  height:10px;
  background:var(--hair);
}
.page-products .tick--glyph,
.page-products .tick--edge{
  height:10px;
  background:var(--mist);
}
.page-products .tick--gold{
  height:18px;
  background:var(--gold);
}
.page-products .tick--now{
  width:2px;
  height:26px;
  background:var(--cyan);
}
.page-products .tick-label{
  position:absolute;
  top:32px;
  transform:translateX(-50%);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--mist);
  white-space:nowrap;
}

/* 公告板 */
.page-products .pg-board{
  display:grid;
  gap:20px;
  margin-bottom:28px;
}
.page-products .pg-list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
}
.page-products .pg-list li{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  padding:9px 0;
  border-top:1px solid var(--hair);
  font-size:15px;
  line-height:1.6;
  color:var(--mist);
}
.page-products .pg-list .mono{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--gold);
}

/* 班次 */
.page-products .pg-shift{
  display:grid;
  gap:14px;
  margin-top:18px;
}
.page-products .shift-band{
  background:var(--carbon);
  border-top:4px solid var(--hair);
  padding:14px 16px 18px;
  transition:background var(--dur-2) var(--ease);
}
.page-products .shift-band:hover{
  background:var(--hl);
}
.page-products .shift-band--morning{border-top-color:var(--gold);}
.page-products .shift-band--mid{border-top-color:var(--cyan);}
.page-products .shift-band--night{border-top-color:var(--clay);}
.page-products .shift-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.page-products .shift-head .mono-data{
  color:var(--mist);
  white-space:nowrap;
}

/* 三条路径 */
.page-products .pg-paths-wrap{
  display:grid;
  gap:22px;
}
.page-products .pg-paths{
  display:grid;
  gap:16px;
}
.page-products .path-card{
  border-top:1px solid var(--hair);
  padding-top:14px;
}
.page-products .pg-path-key{
  display:inline-block;
  color:var(--cyan);
  margin-bottom:6px;
}
.page-products .path-card .btn{
  margin-top:12px;
}

/* 旁注列 */
.page-products .pg-aside{
  margin-top:28px;
  border-top:1px solid var(--hair);
  padding-top:18px;
}
.page-products .pg-note{
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom:1px solid var(--hair);
}
.page-products .pg-note:last-child{
  border-bottom:0;
  margin-bottom:0;
  padding-bottom:0;
}
.page-products .pg-note .sub-title{
  margin:0 0 8px;
}
.page-products .pg-note p{
  margin:0;
  font-size:14px;
  line-height:1.7;
  color:var(--mist);
}
.page-products .pg-note-links{
  list-style:none;
  margin:0;
  padding:0;
}
.page-products .pg-note-links li{
  border-top:1px solid var(--hair);
}
.page-products .pg-note-links li:first-child{
  border-top:0;
}
.page-products .pg-note-links a{
  display:block;
  padding:8px 0;
  font-size:14px;
  color:var(--paper);
  text-decoration:none;
  transition:color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease);
}
.page-products .pg-note-links a:hover,
.page-products .pg-note-links a:focus-visible{
  color:var(--cyan);
  transform:translateX(2px);
}

/* 平板及以上 */
@media (min-width:760px){
  .page-products .pg-thead{
    display:grid;
    grid-template-columns:48px minmax(110px,1.1fr) minmax(180px,2.3fr) 120px minmax(120px,1fr);
    gap:var(--pp-gap);
    padding:10px;
    border-bottom:1px solid var(--hair);
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:.14em;
    color:var(--mist);
  }
  .page-products .col-row{
    grid-template-columns:48px minmax(110px,1.1fr) minmax(180px,2.3fr) 120px minmax(120px,1fr);
    align-items:baseline;
    gap:var(--pp-gap);
    padding:13px 10px;
  }
  .page-products .col-scope::before,
  .page-products .col-freq::before,
  .page-products .col-path::before{
    display:none;
  }
  .page-products .pg-tag-grid{
    grid-template-columns:repeat(3,1fr);
  }
  .page-products .pg-res{
    grid-template-columns:1fr 1fr;
  }
  .page-products .pg-shift{
    grid-template-columns:repeat(3,1fr);
  }
  .page-products .pg-paths{
    grid-template-columns:repeat(3,1fr);
  }
}

/* 桌面框架与 8:4 主栅格 */
@media (min-width:1080px){
  .page-products .pg-grid-main{
    grid-template-columns:minmax(0,8fr) minmax(240px,4fr);
    gap:clamp(24px,3vw,48px);
    align-items:start;
  }
  .page-products .pg-aside{
    position:sticky;
    top:var(--pp-sticky-top);
    margin-top:0;
    border-top:0;
    border-left:1px solid var(--hair);
    padding:4px 0 4px 22px;
    max-height:calc(100vh - var(--pp-sticky-top) - 24px);
    overflow:auto;
  }
  .page-products .pg-split{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    align-items:start;
  }
  .page-products .pg-board{
    grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    align-items:start;
  }
  .page-products .pg-paths-wrap{
    grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    align-items:start;
  }
  .page-products .pg-head{
    grid-template-columns:minmax(0,8fr) minmax(240px,4fr);
    gap:0 clamp(24px,3vw,48px);
  }
  .page-products .pg-head .pg-eyebrow,
  .page-products .pg-head .display-statement,
  .page-products .pg-head .pg-lead{
    grid-column:1;
  }
  .page-products .pg-head .pg-facts{
    grid-column:1 / -1;
    margin-top:6px;
  }
  .page-products .pg-head .pg-jump{
    grid-column:1 / -1;
  }
}

@media (min-width:1440px){
  .page-products .pg-shift{
    gap:18px;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-products .col-row,
  .page-products .col-name,
  .page-products .chip,
  .page-products .shift-band,
  .page-products .res-panel,
  .page-products .pg-note-links a,
  .page-products .pg-jump a,
  .page-products .pg-crumbs a{
    transition:color var(--dur-1) linear,background-color var(--dur-1) linear,border-color var(--dur-1) linear;
  }
  .page-products .pg-note-links a:hover,
  .page-products .pg-note-links a:focus-visible{
    transform:none;
  }
}