/* =========================================================
   单品页 · 展台版（product.css）
   思路：商品是主角。大展台 + 类型色 + 数据块，少表格、无侧栏
========================================================= */
.pv{--tc:#1da6ba;--tc2:#0d6f7d;--tcl:#e3f6f8;background:#f4f4f2}
.pv-atk{--tc:#e5432d;--tc2:#a82413;--tcl:#fde9e5}
.pv-def{--tc:#2f6fdc;--tc2:#1a47a0;--tcl:#e6eefc}
.pv-sta{--tc:#17a368;--tc2:#0c6d44;--tcl:#e2f5ec}
.pv-bal{--tc:#8a4fd8;--tc2:#5c2aa3;--tcl:#f0e8fb}

/* ---------- 首屏展台 ---------- */
.pv-hero{position:relative;overflow:hidden;padding:76px 0 0;background:#fff}
.pv-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:76px;background:#141210}
.pv-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(180deg,rgba(244,244,242,0),#f4f4f2)}
.pv-wm{position:absolute;right:-1vw;top:96px;font:900 clamp(110px,17vw,260px)/.9 Impact,"Arial Black",sans-serif;letter-spacing:-4px;color:transparent;-webkit-text-stroke:2px var(--tcl);white-space:nowrap;pointer-events:none;user-select:none}
.pv-hero .wrap{position:relative;z-index:2}
.pv-crumb{padding:18px 0 0;font-size:12px;color:#8a8a8a}
.pv-crumb a:hover{color:var(--tc)}
.pv-crumb i{font-style:normal;margin:0 6px;color:#c4c4c4}
.pv-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center;padding:18px 0 64px}
.pv-stage{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.pv-ring{position:absolute;inset:4%;border-radius:50%;background:
  radial-gradient(circle at 50% 50%,#fff 0 38%,transparent 38.4%),
  radial-gradient(circle at 50% 50%,var(--tcl) 0 52%,transparent 52.4%),
  repeating-radial-gradient(circle at 50% 50%,transparent 0 22px,rgba(0,0,0,.035) 22px 23px),
  radial-gradient(circle at 50% 50%,#f1f1ef 0 70%,#e7e7e4 70.5%);
  box-shadow:inset 0 0 0 10px #fff,0 30px 60px -30px rgba(0,0,0,.35)}
.pv-ring::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:2px dashed var(--tc);opacity:.35;animation:pvspin 40s linear infinite}
@keyframes pvspin{to{transform:rotate(360deg)}}
.pv-img{position:relative;width:62%;aspect-ratio:1/1;border-radius:26px;overflow:hidden;background:#fff;box-shadow:0 26px 50px -22px rgba(0,0,0,.45);transform:rotate(-3deg)}
.pv-img img{width:100%;height:100%;object-fit:cover}
.pv-code{font:700 13px/1 var(--font);letter-spacing:3px;color:var(--tc)}
.pv-info h1{font-size:clamp(28px,3.2vw,44px);line-height:1.18;font-weight:900;color:#111;margin:12px 0 8px;letter-spacing:.5px}
.pv-sub{font-size:16px;color:#777}
.pv-badges{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 26px}
.pv-type{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px 0 12px;background:var(--tc);color:#fff;font-weight:700;font-size:15px;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.pv-type i{width:14px;height:14px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--tc2)}
.pv-type em{font-style:normal;font-size:11px;letter-spacing:2px;opacity:.75;margin-left:2px}
.pv-kind{display:inline-flex;align-items:center;height:36px;padding:0 16px;border:1.5px solid #222;color:#222;font-size:14px;font-weight:700}
.pv-tiles{display:grid;grid-template-columns:1.45fr 1.15fr .9fr .75fr;border-top:3px solid #111}
.pv-tile{padding:14px 12px 16px 0;border-right:1px solid #e3e3e3;margin-right:12px}
.pv-tile:last-child{border-right:0;margin-right:0}
.pv-tile span{display:block;font-size:12px;color:#8a8a8a;letter-spacing:1px}
.pv-tile b{display:block;font-size:18px;white-space:nowrap;font-weight:800;color:#111;margin-top:4px;line-height:1.3}
.pv-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.pv .btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 26px;font-size:15px;font-weight:700;width:auto;margin:0;transition:.2s}
.pv .btn.buy{background:#111;color:#fff}
.pv .btn.buy:hover{background:var(--tc)}
.pv .btn.line{background:#fff;border:1.5px solid #111;color:#111}
.pv .btn.line:hover{border-color:var(--tc);color:var(--tc)}

/* ---------- 吸顶目录 ---------- */
.pv-tabs{position:sticky;top:0;z-index:15;background:rgba(20,18,16,.96);backdrop-filter:blur(6px)}
.pv-tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.pv-tabs .wrap::-webkit-scrollbar{display:none}
.pv-tabs a{flex:none;color:rgba(255,255,255,.7);font-size:14px;padding:15px 18px;border-bottom:3px solid transparent}
.pv-tabs a:hover,.pv-tabs a.on{color:#fff;border-bottom-color:var(--tc)}

/* ---------- 正文 ---------- */
.pv-body{padding-top:56px;padding-bottom:40px}
.pv-sec{margin-bottom:64px;scroll-margin-top:70px}
.pv-sec>h2{display:flex;align-items:baseline;gap:14px;font-size:26px;font-weight:900;color:#111;margin-bottom:24px}
.pv-sec>h2::before{content:"";flex:none;width:8px;height:26px;align-self:center;background:var(--tc);transform:skewX(-14deg)}
.pv-intro{display:grid;grid-template-columns:minmax(0,1fr);max-width:900px}
.pv-intro p{font-size:17px;line-height:2;color:#333}

/* 零件拆解：三张大卡 + 号连接 */
.pv-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;counter-reset:pp}
.pv-parts .partcard{position:relative;background:#fff;border:0;box-shadow:0 2px 0 #e2e2e0;transition:.2s}
.pv-parts .partcard:not(:last-child)::after{content:"+";position:absolute;right:-34px;top:38%;font:300 40px/1 var(--font);color:#bbb}
.pv-parts .partcard:hover{transform:translateY(-4px);box-shadow:0 16px 30px -16px rgba(0,0,0,.35)}
.pv-parts .partcard .ph{aspect-ratio:4/3;background:#fafaf8}
.pv-parts .partcard .ph img{object-fit:contain;padding:18px}
.pv-parts .partcard .pt{padding:16px 18px 18px;border-top:4px solid var(--tc)}
.pv-parts .partcard .code{display:inline-block;font-size:12px;font-weight:700;color:var(--tc);letter-spacing:1px}
.pv-parts .partcard h3{font-size:19px;margin-top:4px}
.pv-parts .partcard .en{font-size:13px}
.pv-parts .partcard .meta{font-size:13px;color:#555;margin-top:8px}
.pv-sec .btip{font-size:13px;color:#8a8a8a;margin-top:14px}

/* 规格：数据格 */
.pv-spec{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#fff;border:1px solid #e4e4e1}
.pv-cell{background:#fff;box-shadow:0 0 0 1px #e4e4e1;padding:16px 18px 18px;min-height:86px}
.pv-cell span{display:block;font-size:12px;color:#8a8a8a;letter-spacing:1px}
.pv-cell b{display:block;font-size:16px;font-weight:700;color:#111;margin-top:6px;line-height:1.45;word-break:break-word}
.pv-names{display:grid;grid-template-columns:auto 1fr 1fr;gap:0;margin-top:16px;background:#141210;color:#fff}
.pv-names div{padding:16px 22px;border-right:1px solid rgba(255,255,255,.1)}
.pv-names div:last-child{border-right:0}
.pv-names span{display:block;font-size:11px;letter-spacing:2px;color:rgba(255,255,255,.5)}
.pv-names b{display:block;font-size:16px;margin-top:4px}

/* 动画出场：海报 */
.pv-anime{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:24px}
.pv-anime>a{display:block;background:#fff;transition:.2s}
.pv-anime>a:hover{transform:translateY(-4px);box-shadow:0 18px 30px -18px rgba(0,0,0,.4)}
.pv-anime .ph{aspect-ratio:3/4;background:#ddd}
.pv-anime .ph img{object-fit:cover}
.pv-anime>a>div:last-child{padding:12px 14px 14px}
.pv-anime b{display:block;font-size:15px;color:#111}
.pv-anime small{display:block;font-size:12px;color:#777;margin-top:4px;line-height:1.6}

/* 同系列：横向滑轨 */
.pv-railwrap{position:relative}
.pv-rail{display:grid;grid-auto-flow:column;grid-auto-columns:220px;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 18px;scrollbar-width:thin}
.pv-rail .pcard{scroll-snap-align:start;border-bottom:0;box-shadow:0 2px 0 #e2e2e0}
.pv-rail .pcard:hover{box-shadow:0 16px 28px -16px rgba(0,0,0,.35);transform:translateY(-3px)}
.pv-rail .pcard .ph img{padding:14px}
.pv-rail .pcard .pt{padding:12px 14px 14px;border-top:3px solid var(--tc)}
.pv-rail .pcard h3{font-size:14px}
.pv-arr{position:absolute;top:38%;z-index:3;width:44px;height:44px;border:0;border-radius:50%;background:#111;color:#fff;font-size:26px;line-height:1;cursor:pointer;opacity:.85}
.pv-arr:hover{background:var(--tc)}
.pv-arr.l{left:-22px}.pv-arr.r{right:-22px}

/* 问答：折叠 */
.pv-faq details{background:#fff;margin-bottom:10px;border-left:4px solid transparent;transition:.2s}
.pv-faq details[open]{border-left-color:var(--tc)}
.pv-faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;font-size:16px;font-weight:700;color:#111;position:relative}
.pv-faq summary::-webkit-details-marker{display:none}
.pv-faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:300;color:var(--tc)}
.pv-faq details[open] summary::after{content:"−"}
.pv-faq details div{padding:0 22px 20px;font-size:15px;line-height:1.9;color:#444}

/* 购买通栏 */
.pv-buy{display:flex;align-items:center;justify-content:space-between;gap:30px;margin:0 0 56px;padding:34px 40px;background:#141210 linear-gradient(110deg,transparent 60%,var(--tc) 60%,var(--tc) 61%,transparent 61%);color:#fff;scroll-margin-top:70px}
.pv-buy h2{font-size:22px;font-weight:900}
.pv-buy p{font-size:14px;color:rgba(255,255,255,.7);margin-top:6px;max-width:560px}
.pv-buy-btns{display:flex;gap:12px;flex:none}
.pv-buy .btn.buy{background:var(--tc);color:#fff}
.pv-buy .btn.buy:hover{background:#fff;color:#111}
.pv-buy .btn.line{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}

/* 页脚小块 */
.pv-foot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px;margin-bottom:30px}
.pv-mini{background:#fff;padding:20px 22px}
.pv-mini h3{font-size:14px;color:#8a8a8a;font-weight:700;margin-bottom:12px;letter-spacing:1px}
.pv-mini .sib a{display:flex;gap:12px;align-items:center}
.pv-mini .sib .ph{width:54px;height:72px;flex:none}
.pv-mini .sib b{display:block;font-size:15px}
.pv-mini .sib small{font-size:12px;color:#8a8a8a}
.pv-gens{display:flex;flex-wrap:wrap;gap:10px}
.pv-gens a{padding:10px 18px;background:#f4f4f2;font-size:14px;font-weight:700;color:#222;transition:.2s}
.pv-gens a:hover{background:#111;color:#fff}

/* ---------- 平板 / 手机 ---------- */
@media (max-width:980px){
  .pv-grid{grid-template-columns:1fr;gap:20px;padding-bottom:40px}
  .pv-stage{max-width:520px;margin:0 auto;width:100%}
  .pv-spec{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pv-parts{gap:28px}
  .pv-parts .partcard:not(:last-child)::after{right:-24px;font-size:30px}
}
@media (max-width:600px){
  .pv-hero{padding-top:66px}
  .pv-hero::before{height:66px}
  .pv-wm{top:80px;-webkit-text-stroke-width:1.5px}
  .pv-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-tile b{white-space:normal}
  .pv-tile{margin-right:0;padding-left:0;border-right:0;border-bottom:1px solid #e3e3e3}
  .pv-btns .btn{flex:1 1 100%}
  .pv-body{padding-top:36px}
  .pv-sec{margin-bottom:44px}
  .pv-sec>h2{font-size:21px}
  .pv-intro p{font-size:15px;line-height:1.9}
  .pv-parts{grid-template-columns:1fr;gap:34px}
  .pv-parts .partcard:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-34px;transform:translateX(-50%)}
  .pv-parts .partcard{display:grid;grid-template-columns:120px 1fr}
  .pv-parts .partcard .ph{aspect-ratio:1/1}
  .pv-parts .partcard .pt{border-top:0;border-left:4px solid var(--tc)}
  .pv-spec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-names{grid-template-columns:1fr}
  .pv-names div{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
  .pv-anime{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .pv-rail{grid-auto-columns:62%}
  .pv-arr{display:none}
  .pv-buy{flex-direction:column;align-items:stretch;padding:26px 22px}
  .pv-buy-btns{flex-direction:column}
  .pv-foot{grid-template-columns:1fr}
}

/* ---------- 样式 B：深色竞技台 ---------- */
.pv{background:#0e1116}
.pv .pv-hero{background:radial-gradient(ellipse 60% 70% at 28% 55%,color-mix(in srgb,var(--tc) 38%,transparent),transparent 70%),linear-gradient(160deg,#0b0d12,#151a24 60%,#0b0d12)}
.pv .pv-hero::after{background:linear-gradient(180deg,rgba(14,17,22,0),#0e1116)}
.pv .pv-wm{-webkit-text-stroke-color:color-mix(in srgb,var(--tc) 45%,transparent)}
.pv .pv-ring{background:repeating-radial-gradient(circle,transparent 0 22px,rgba(255,255,255,.05) 22px 23px),radial-gradient(circle,#1c222e 0 70%,#121620 70.5%);box-shadow:inset 0 0 0 8px rgba(255,255,255,.04),0 0 80px -10px var(--tc)}
.pv .pv-ring::after{border-color:var(--tc);opacity:.7}
.pv .pv-crumb{color:rgba(255,255,255,.45)}
.pv .pv-info h1{color:#fff}
.pv .pv-sub{color:rgba(255,255,255,.55)}
.pv .pv-kind{border-color:rgba(255,255,255,.6);color:#fff}
.pv .pv-tiles{border-top-color:var(--tc)}
.pv .pv-tile{border-right-color:rgba(255,255,255,.12)}
.pv .pv-tile span{color:rgba(255,255,255,.45)}
.pv .pv-tile b{color:#fff}
.pv .btn.buy{background:var(--tc)}
.pv .btn.line{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.pv .pv-sec>h2{color:#fff}
.pv .pv-intro p{color:rgba(255,255,255,.78)}
.pv .pv-parts .partcard,.pv .pv-anime>a,.pv .pv-rail .pcard,.pv .pv-faq details,.pv .pv-mini{background:#171c26;box-shadow:none}
.pv .pv-parts .partcard .ph,.pv .pv-rail .pcard .ph{background:#fff}
.pv .partcard h3,.pv .pcard h3,.pv .pv-anime b,.pv .pv-faq summary,.pv .pv-mini .sib b{color:#fff}
.pv .pv-faq details div,.pv .pv-parts .partcard .meta{color:rgba(255,255,255,.7)}
.pv .pv-spec{background:#171c26;border-color:#252c3a}
.pv .pv-cell{background:#171c26;box-shadow:0 0 0 1px #252c3a}
.pv .pv-cell b{color:#fff}
.pv .pv-names{background:var(--tc)}
.pv .pv-gens a{background:#232a37;color:#fff}
.pv .pv-buy{background:#171c26 linear-gradient(110deg,transparent 60%,var(--tc) 60%,var(--tc) 61%,transparent 61%)}

/* 零件页：官方参数条、同类零件网格 */
.pv-bars{margin-top:18px;display:grid;gap:8px;max-width:520px}
.pv-bars div{display:grid;grid-template-columns:44px 1fr 34px;align-items:center;gap:10px;font-size:13px}
.pv-bars span{color:#777;font-weight:700}
.pv-bars i{display:block;height:10px;background:#ececea;position:relative;overflow:hidden}
.pv-bars em{position:absolute;left:0;top:0;bottom:0;background:var(--tc)}
.pv-bars b{font:900 16px/1 var(--font);color:#111;text-align:right}
.pv .pv-bars i{background:#232a37}.pv .pv-bars b{color:#fff}
.pv-pgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.pv-pgrid .partcard{border-bottom:0;box-shadow:0 2px 0 #e2e2e0;transition:.2s}
.pv-pgrid .partcard:hover{transform:translateY(-3px);box-shadow:0 14px 24px -14px rgba(0,0,0,.35)}
.pv-pgrid .partcard .pt{border-top:3px solid var(--tc)}
.pv .pv-pgrid .partcard{background:#171c26;box-shadow:none}.pv .pv-pgrid .partcard h3{color:#fff}
@media (max-width:980px){.pv-pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:600px){.pv-pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pv-names.n2{grid-template-columns:1fr 1fr}
.pv-railwrap.short .pv-arr{display:none}