.page-products{
  --pd-line:rgba(18,22,28,.12);
  --pd-card:rgba(255,255,255,.62);
  --pd-gap:clamp(1rem,2.2vw,1.4rem);
  padding-bottom:clamp(3rem,7vw,5rem);
}

/* 面包屑与首屏 */
.page-products .breadcrumb{margin-top:clamp(1rem,3vw,1.6rem);}
.page-products .pd-hero{padding-top:clamp(.9rem,2.5vw,1.6rem);}
.page-products .pd-hero .eyebrow{margin:0 0 .85rem;}
.page-products .pd-hero__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.9rem,6.4vw,3.35rem);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--storm-deep);
  text-wrap:balance;
}
.page-products .pd-hero__lead{
  margin:1rem 0 0;
  max-width:38ch;
  font-size:clamp(.975rem,2.2vw,1.0625rem);
  line-height:1.75;
  color:var(--ink);
}

.page-products .pd-facts{
  list-style:none;
  margin:1.75rem 0 0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:.85rem;
}
.page-products .pd-facts li{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.4rem;
  padding:.7rem 0 .7rem 1rem;
  border-left:3px solid var(--cyan);
}
.page-products .pd-facts__num{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:clamp(1.7rem,5vw,2.15rem);
  line-height:1;
  color:var(--storm);
}
.page-products .pd-facts__unit{
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--storm);
}
.page-products .pd-facts__label{
  flex-basis:100%;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--mist);
}

/* 工具状态栏 */
.page-products .pd-status{
  list-style:none;
  margin:1.9rem 0 0;
  padding:.65rem;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem .5rem;
  border:1px solid var(--pd-line);
  border-radius:18px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.page-products .pd-status__item{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .8rem;
  border:1px solid rgba(18,22,28,.08);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.58);
  font-size:.8125rem;
  font-weight:600;
  line-height:1.4;
  color:var(--storm-deep);
  white-space:nowrap;
  cursor:default;
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.page-products .pd-status__item:hover,
.page-products .pd-status__item:focus-visible{
  border-color:var(--storm-bright);
  background:#fff;
  outline:none;
}
.page-products .pd-status__item::after{
  content:attr(data-note);
  position:absolute;
  left:0;
  top:calc(100% + .55rem);
  z-index:12;
  width:max-content;
  max-width:min(260px,70vw);
  padding:.6rem .8rem;
  border-radius:12px;
  background:var(--storm-deep);
  color:var(--paper);
  font-size:.8125rem;
  font-weight:400;
  line-height:1.55;
  white-space:normal;
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease);
}
.page-products .pd-status__item:hover::after,
.page-products .pd-status__item:focus-visible::after{
  opacity:1;
  transform:translateY(0);
}
.page-products .pd-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 0 3px rgba(23,201,184,.18);
  animation:pd-breathe 2.4s var(--ease) infinite;
  flex:none;
}
.page-products .pd-dot--ember{
  background:var(--ember);
  box-shadow:0 0 0 3px rgba(255,90,43,.18);
}
@keyframes pd-breathe{
  0%,100%{opacity:1;}
  50%{opacity:.32;}
}

/* 功能卡片网格 */
.page-products .pd-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:clamp(2rem,5vw,3.25rem);
}
.page-products .pd-tool{
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:clamp(1.25rem,3vw,2rem);
  border:1px solid var(--pd-line);
  border-radius:var(--radius-card);
  background:var(--pd-card);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:0 18px 34px -30px rgba(11,31,58,.9);
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.page-products .pd-tool:hover{
  background:#fff;
  border-color:var(--storm);
  box-shadow:var(--shadow-card);
}
.page-products .pd-tool__body{min-width:0;}
.page-products .pd-tool__index{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin:0;
  font-family:var(--font-mono);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--storm-bright);
}
.page-products .pd-flag{
  display:inline-block;
  padding:.2rem .55rem;
  border-radius:var(--radius-pill);
  background:var(--ember);
  color:#fff;
  font-family:var(--font-body);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:none;
}
.page-products .pd-tool__title{
  margin:.6rem 0 .7rem;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.125rem,2.6vw,1.5rem);
  line-height:1.26;
  letter-spacing:-.01em;
  color:var(--storm-deep);
}
.page-products .pd-tool__body > p,
.page-products .pd-tool > p{
  margin:0 0 .7em;
  font-size:.9375rem;
  line-height:1.75;
  color:var(--ink);
}
.page-products .pd-tool__body > p:last-child,
.page-products .pd-tool > p:last-child{margin-bottom:0;}
.page-products .pd-tool > .pd-shot{margin-top:auto;}

/* 图片容器 */
.page-products .pd-shot{
  margin:0;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(18,22,28,.08);
  background:linear-gradient(135deg,rgba(18,60,110,.92),rgba(30,107,214,.7));
}
.page-products .pd-shot img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}

/* 展开说明 */
.page-products .pd-more{
  margin-top:.9rem;
  padding-top:.75rem;
  border-top:1px dashed rgba(18,22,28,.2);
}
.page-products .pd-more summary{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  cursor:pointer;
  list-style:none;
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--storm-bright);
}
.page-products .pd-more summary::-webkit-details-marker{display:none;}
.page-products .pd-more summary::after{
  content:"+";
  font-family:var(--font-mono);
  font-size:1rem;
  line-height:1;
  color:var(--cyan);
}
.page-products .pd-more[open] summary::after{content:"−";}
.page-products .pd-more summary:hover{text-decoration:underline;text-underline-offset:3px;}
.page-products .pd-more p{
  margin:.7rem 0 0;
  font-size:.875rem;
  line-height:1.72;
  color:var(--mist);
}

/* 深色工具卡 */
.page-products .pd-tool--ink{
  background:linear-gradient(155deg,#0B1F3A 0%,#123C6E 82%);
  border-color:rgba(23,201,184,.3);
  color:var(--paper);
}
.page-products .pd-tool--ink:hover{
  background:linear-gradient(155deg,#0d2547 0%,#17478a 82%);
  border-color:var(--cyan);
}
.page-products .pd-tool--ink .pd-tool__index{color:var(--cyan);}
.page-products .pd-tool--ink .pd-tool__title{color:var(--paper);}
.page-products .pd-tool--ink p{color:rgba(246,241,231,.84);}
.page-products .pd-tool--ink .pd-more{border-top-color:rgba(246,241,231,.24);}
.page-products .pd-tool--ink .pd-more summary{color:var(--cyan);}
.page-products .pd-tool--ink .pd-more p{color:rgba(246,241,231,.72);}
.page-products .pd-shot--ink{
  margin-top:.4rem;
  border-color:rgba(23,201,184,.28);
  background:linear-gradient(135deg,rgba(23,201,184,.28),rgba(30,107,214,.35));
}

/* 筛选演示 */
.page-products .pd-demo{
  position:relative;
  min-width:0;
  padding-top:.25rem;
}
.page-products .pd-demo__radio{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.page-products .pd-demo__tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.page-products .pd-demo__tabs label{
  cursor:pointer;
  padding:.4rem .8rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(18,22,28,.16);
  background:rgba(255,255,255,.62);
  font-size:.8125rem;
  font-weight:600;
  line-height:1.4;
  color:var(--storm-deep);
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.page-products .pd-demo__tabs label:hover{
  border-color:var(--storm-bright);
  color:var(--storm-bright);
}
.page-products .pd-demo__panel{
  display:none;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:.3rem 1rem;
  margin-top:.9rem;
  padding:1rem 1.1rem;
  border-radius:14px;
  border:1px solid rgba(23,201,184,.42);
  background:rgba(168,245,238,.38);
}
.page-products .pd-demo__num{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:1.75rem;
  line-height:1;
  color:var(--storm);
}
.page-products .pd-demo__text{
  font-size:.875rem;
  line-height:1.7;
  color:var(--ink);
}
.page-products #pd-league-all:checked ~ .pd-demo__tabs label[for="pd-league-all"],
.page-products #pd-league-football:checked ~ .pd-demo__tabs label[for="pd-league-football"],
.page-products #pd-league-basketball:checked ~ .pd-demo__tabs label[for="pd-league-basketball"],
.page-products #pd-league-volleyball:checked ~ .pd-demo__tabs label[for="pd-league-volleyball"],
.page-products #pd-league-badminton:checked ~ .pd-demo__tabs label[for="pd-league-badminton"],
.page-products #pd-league-tabletennis:checked ~ .pd-demo__tabs label[for="pd-league-tabletennis"]{
  background:var(--storm);
  border-color:var(--storm);
  color:var(--paper);
}
.page-products #pd-league-all:checked ~ .pd-demo__panels .pd-demo__panel--all,
.page-products #pd-league-football:checked ~ .pd-demo__panels .pd-demo__panel--football,
.page-products #pd-league-basketball:checked ~ .pd-demo__panels .pd-demo__panel--basketball,
.page-products #pd-league-volleyball:checked ~ .pd-demo__panels .pd-demo__panel--volleyball,
.page-products #pd-league-badminton:checked ~ .pd-demo__panels .pd-demo__panel--badminton,
.page-products #pd-league-tabletennis:checked ~ .pd-demo__panels .pd-demo__panel--tabletennis{
  display:grid;
}

/* 延伸入口 */
.page-products .pd-next{
  display:grid;
  gap:1.5rem;
  margin-top:clamp(2.5rem,6vw,4rem);
  padding:clamp(1.5rem,4vw,2.5rem);
  border-radius:var(--radius-soft);
  background:
    radial-gradient(120% 140% at 100% 0%,rgba(23,201,184,.24),transparent 62%),
    linear-gradient(140deg,#0B1F3A 0%,#12315a 100%);
  color:var(--paper);
}
.page-products .pd-next .eyebrow{color:var(--cyan);margin:0 0 .7rem;}
.page-products .pd-next__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.25rem,3.4vw,1.75rem);
  line-height:1.24;
  letter-spacing:-.01em;
  color:var(--paper);
}
.page-products .pd-next__text{
  margin:.75rem 0 0;
  font-size:.9375rem;
  line-height:1.75;
  color:rgba(246,241,231,.8);
}
.page-products .pd-next__links{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:.6rem;
}
.page-products .pd-next__links a{
  display:block;
  padding:.85rem 1rem;
  border:1px solid rgba(246,241,231,.22);
  border-radius:14px;
  background:rgba(255,255,255,.06);
  color:var(--paper);
  font-weight:700;
  font-size:.9375rem;
  text-decoration:none;
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
}
.page-products .pd-next__links a:hover,
.page-products .pd-next__links a:focus-visible{
  border-color:var(--cyan);
  background:rgba(23,201,184,.16);
  transform:translateY(-1px);
  outline:none;
}
.page-products .pd-next__links span{
  display:block;
  margin-top:.3rem;
  font-weight:400;
  font-size:.8125rem;
  line-height:1.6;
  color:rgba(246,241,231,.72);
}

/* 响应式 */
@media (min-width:640px){
  .page-products .pd-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;}
  .page-products .pd-next__links{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (min-width:900px){
  .page-products .pd-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pd-gap);}
  .page-products .pd-tool--wide{grid-column:1 / -1;}
  .page-products .pd-tool--split{
    display:grid;
    grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
    align-items:start;
    gap:clamp(1.25rem,3vw,2.25rem);
  }
  .page-products .pd-tool--split .pd-shot{margin-top:0;}
  .page-products .pd-next{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    align-items:start;
    gap:2rem;
  }
}

@media (hover:none){
  .page-products .pd-status__item::after{display:none;}
}

@media (max-width:420px){
  .page-products .pd-status__item{white-space:normal;}
  .page-products .pd-demo__panel{grid-template-columns:1fr;gap:.45rem;}
}