/* ============================================================

   PODLOCK — product / group / catalogue pages
   Only the new templates use these classes; app.css is untouched so the
   home page keeps rendering exactly as before.

   ============================================================ */

/* 卡片里的型号名现在是链接：app.css 已经给了 a{color:inherit;text-decoration:none}，
   这里只补图片链接的 display，否则 <a> 是 inline，74×88 的盒子撑不开。 */
a.pcard-visual{display:block}
.pcard-name a{display:block}
.pcard-name a:hover{color:var(--accent)}

#product,#group,#catalogue{padding-bottom:20px}

/* ---------- breadcrumb ---------- */
.pd-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:22px 0 0;font-size:10.5px;letter-spacing:.08em;color:var(--dim-2)}
.pd-crumb a{color:var(--dim)}
.pd-crumb a:hover{color:var(--accent)}
.pd-crumb span[aria-hidden]{color:var(--line-2)}
.pd-crumb-here{color:var(--text)}

/* ---------- product hero ---------- */
.pd-hero{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);
  gap:46px;align-items:start;padding-top:26px;padding-bottom:44px}

.pd-media{position:relative;border:1px solid var(--line);border-radius:12px;
  background:#f3f3ef;padding:14px;aspect-ratio:4/5;
  display:flex;align-items:center;justify-content:center}
.pd-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pd-media-badge{position:absolute;top:14px;left:14px;margin:0}

.pd-eye{margin:0 0 10px;color:var(--accent)}
.pd-top h1{margin:0 0 12px;font-size:clamp(26px,3.2vw,38px);line-height:1.12;
  letter-spacing:-.03em;font-weight:700}
.pd-tag{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--dim);max-width:58ch}

.pd-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.pd-add,.pd-cta{display:inline-flex;align-items:center;justify-content:center;
  padding:12px 20px;border-radius:6px;font-size:13px;font-weight:600;
  font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}
.pd-add{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.pd-add:hover{background:#ff6a29;border-color:#ff6a29}
.pd-cta{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.pd-cta:hover{border-color:var(--accent);color:var(--accent)}

.pd-spec{margin:0;border-top:1px solid var(--line)}
.pd-spec>div{display:grid;grid-template-columns:minmax(120px,.42fr) minmax(0,1fr);
  gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.pd-spec dt{margin:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim-2);align-self:center}
.pd-spec dd{margin:0;font-size:13.5px;font-weight:500}

.pd-note{margin:16px 0 0;font-size:12px;line-height:1.65;color:var(--dim-2);max-width:60ch}

/* ---------- product body ---------- */
.pd-body{display:grid;grid-template-columns:minmax(0,1fr) 308px;gap:52px;
  padding-bottom:10px;border-top:1px solid var(--line);padding-top:38px}
.pd-prose{min-width:0}
.pd-prose p{margin:0 0 16px;font-size:14.5px;line-height:1.75;color:#CFCDC8;max-width:68ch}
.pd-prose h2{margin:34px 0 14px;font-size:19px;letter-spacing:-.02em;font-weight:600}
.pd-prose h2:first-child{margin-top:0}
.pd-prose a{color:var(--accent);border-bottom:1px solid rgba(255,77,0,.35)}
.pd-prose a:hover{border-bottom-color:var(--accent)}

.pd-apps{margin:0;padding:0;list-style:none;display:grid;gap:9px;max-width:68ch}
.pd-apps li{position:relative;padding-left:20px;font-size:13.5px;color:#CFCDC8;line-height:1.6}
.pd-apps li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
  border-radius:1px;background:var(--accent)}

.pd-compat{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:0 0 16px !important;
  padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.pd-compat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim-2)}
.pd-compat b{font-size:15px;color:var(--text)}
.pd-compat em{font-size:12.5px;font-style:normal;color:var(--dim)}

.pd-faq{border-top:1px solid var(--line);max-width:68ch}
.pd-faq details{border-bottom:1px solid var(--line)}
.pd-faq summary{cursor:pointer;padding:13px 0;font-size:14px;font-weight:600;
  list-style:none;position:relative;padding-right:26px}
.pd-faq summary::-webkit-details-marker{display:none}
.pd-faq summary::after{content:"+";position:absolute;right:2px;top:11px;
  font-family:var(--mono);font-size:15px;color:var(--accent)}
.pd-faq details[open] summary::after{content:"−"}
.pd-faq details p{margin:0 0 14px;font-size:13.5px;line-height:1.7;color:var(--dim)}

/* ---------- sidebar ---------- */
.pd-side{display:grid;gap:14px;align-content:start}
.pd-box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
.pd-box h2{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);font-weight:600}
.pd-box p{margin:0 0 14px;font-size:12.5px;line-height:1.65;color:var(--dim)}
.pd-side-cta{display:block;text-align:center;padding:11px 14px;border-radius:5px;
  background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;
  font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.pd-side-cta:hover{background:#ff6a29}
.pd-side-wa{display:block;text-align:center;padding:10px 14px;border-radius:5px;
  border:1px solid var(--line-2);color:var(--dim);font-size:11.5px;font-family:var(--mono)}
.pd-side-wa:hover{border-color:var(--accent);color:var(--accent)}
.pd-links{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.pd-links a{display:block;padding:8px 0;font-size:13px;color:#CFCDC8;
  border-bottom:1px solid var(--line)}
.pd-links li:last-child a{border-bottom:0}
.pd-links a:hover{color:var(--accent)}
.pd-box-facts ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pd-box-facts li{font-size:12px;color:var(--dim);display:flex;gap:8px;align-items:baseline}
.pd-box-facts b{font-family:var(--mono);font-size:12.5px;color:var(--text);font-weight:700}

/* ---------- related ---------- */
.pd-rel{padding-top:46px;margin-top:40px;border-top:1px solid var(--line);padding-bottom:34px}
.pd-rel .pod-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.pd-rel-all{font-size:10.5px;color:var(--accent);white-space:nowrap}
.pd-rel-all:hover{color:#ff6a29}

/* ---------- group / catalogue heads ---------- */
.gr-head{padding-top:20px;padding-bottom:30px;max-width:1240px}
.gr-head h1{margin:8px 0 14px;font-size:clamp(27px,3.4vw,40px);line-height:1.1;
  letter-spacing:-.035em;font-weight:700;max-width:22ch}
.gr-lead{margin:0;font-size:15px;line-height:1.7;color:var(--dim);max-width:76ch}
.gr-meta{margin:18px 0 0;color:var(--dim-2)}
.gr-block{padding-top:34px;padding-bottom:8px}
.gr-notes{padding-top:40px;padding-bottom:30px;border-top:1px solid var(--line);margin-top:34px}
.gr-notes h2{margin:0 0 12px;font-size:19px;font-weight:600;letter-spacing:-.02em}
.gr-notes p{margin:0 0 12px;font-size:14px;line-height:1.75;color:#CFCDC8;max-width:76ch}
.gr-notes-more{font-size:13px !important;color:var(--dim) !important}
.gr-notes-more a{color:var(--accent)}
.gr-notes-more a:hover{color:#ff6a29}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .pd-hero{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:32px}
  .pd-body{grid-template-columns:minmax(0,1fr);gap:34px}
  .pd-side{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
}
@media (max-width:820px){
  .pd-hero{grid-template-columns:minmax(0,1fr);gap:26px}
  .pd-media{aspect-ratio:1/1;max-width:420px;margin:0 auto}
  .pd-rel .pod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pd-body{padding-top:30px}
  .pd-spec>div{grid-template-columns:minmax(104px,.5fr) minmax(0,1fr)}
}
@media (max-width:560px){
  .pd-actions{display:grid}
  .pd-add,.pd-cta{width:100%}
}