/* PinkyDolly V2 · pd-v2-pdp (T7, SPEC §3)
 * 从 handover/v2/prototypes/pdp.html 抽出。整页包在 #pd-v2-pdp 下 —— 碰撞扫描
 * 发现 .sec、.b、.t2、.feel 在仓库里已经是共用类(分别来自 pd-v2-header.css、
 * pd-v2-collection.css、pd-v2-base.css、pd-v2-material.css),且数值和这页
 * 原型不完全一致,所以这几个用 #pd-v2-pdp 限定后覆盖,而不是改共用规则
 * (改共用规则会牵动首页和系列页)。.crumb、.pdp、.gal 系列、.buy 系列、.qty 系列、
 * .cta、.trust、.stick 系列、.acc 系列、.cross 系列、.other 系列,经扫描
 * 和仓库其余 pd-v2 样式表都没有同名冲突,按原样使用。
 *
 * T7c(SPEC-pdp-story.md)替换了原来的单段 Her story(.story*)和规格表
 * (.spec)——四章 .ps__*/.rd__*/.sz__* 规则见文件末尾,从
 * handover/v2/pages/pdp/styles.css 搬过来再接上真实数据。
 */

#pd-v2-pdp{display:block}

/* ══ 面包屑 ══ */
/* Was --tx-faint — contrast audit (feedback item 5): 2.95:1 in light mode against
   this page's own --bw background, same failing value as the footer's tx-faint
   uses. --tx-dim is the real breadcrumb text here (product name, collection name,
   the "·" separators), not a micro-label, so it needs to actually be readable. */
#pd-v2-pdp .crumb{max-width:var(--maxw);margin:0 auto;padding:18px var(--gut) 4px;
  font-size:14px;color:var(--tx-dim)}
#pd-v2-pdp .crumb a:hover{color:var(--tx)}
#pd-v2-pdp .crumb span{margin:0 8px}

/* ══ 主区:画廊 + 购买 ══ */
#pd-v2-pdp .pdp{max-width:var(--maxw);margin:0 auto;
  padding:clamp(14px,2vh,26px) var(--gut) clamp(36px,6vh,72px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.6vw,60px);align-items:start}
@media (max-width:980px){#pd-v2-pdp .pdp{grid-template-columns:1fr}}

/* 画廊 */
#pd-v2-pdp .gal{display:grid;gap:14px}
#pd-v2-pdp .gal__th{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;order:2}
@media (max-width:620px){#pd-v2-pdp .gal__th{grid-auto-columns:72px;overflow-x:auto;padding-bottom:4px}}
#pd-v2-pdp .gal__th button{aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  border:1.5px solid var(--line);background:var(--surface);position:relative;padding:0;
  transition:border-color .2s var(--e),transform .2s var(--e)}
#pd-v2-pdp .gal__th button img{width:100%;height:100%;object-fit:cover}
#pd-v2-pdp .gal__th button:hover{border-color:var(--tx-faint);transform:translateY(-2px)}
#pd-v2-pdp .gal__th button[aria-current="true"]{border-color:var(--act)}
#pd-v2-pdp .gal__m{order:1;position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--surface);cursor:zoom-in}
#pd-v2-pdp .gal__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .38s var(--e-out)}
#pd-v2-pdp .gal__m img.is-active{opacity:1}
#pd-v2-pdp .gal__b{position:absolute;top:12px;left:12px;z-index:3;display:flex;flex-direction:column;
  gap:6px;align-items:flex-start}
/* 徽章等宽 —— 折扣数值会变但要和 HOT 对齐,不改共用 .b,只在这页范围内加宽度/行高。
   这页原型的 .b 本身没有 letter-spacing(系列页的 .gal__b .b 有,是那一页自己的
   spec,不要照搬到这里 —— 混进来过一次,被这页自己的原型 diff 挑出来了)。 */
#pd-v2-pdp .gal__b .b{min-width:72px;padding:4px 10px;line-height:1.4}
#pd-v2-pdp .gal__zoom{position:absolute;right:12px;bottom:12px;z-index:3;
  min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:var(--pill);
  font-size:13px;font-weight:700;background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(8px);border:1px solid var(--line);color:var(--tx-dim);cursor:pointer}
#pd-v2-pdp .gal__zoom:focus-visible{outline:2px solid var(--act);outline-offset:2px}

/* ══ Gallery addendum (SPEC-addendum-hero-details-gallery.md §3) ══
   "+N" overflow tile on the 5th thumbnail once there are more than 5
   images — covers the thumbnail, not a separate element, so the existing
   aria-current highlight logic (JS) still applies to the same button. */
#pd-v2-pdp .gal__more{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(14,8,16,.62);color:#FFF7F1;font:800 15px/1 var(--ui)}

/* Prev/next arrows on the main stack — hidden until hover on a mouse, always
   on for touch (brief rule #23: a persistent path to the same action). Fixed
   colour regardless of mode since they sit on top of a photo (brief rule on
   photo/video-overlaid controls), same treatment as the hero's sound toggle. */
#pd-v2-pdp .gal__arrow{position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;
  background:rgba(14,8,16,.5);color:#FFF7F1;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .2s var(--e),background .2s var(--e)}
#pd-v2-pdp .gal__arrow svg{width:20px;height:20px;max-width:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#pd-v2-pdp .gal__arrow--prev{left:10px}
#pd-v2-pdp .gal__arrow--next{right:10px}
#pd-v2-pdp .gal__arrow:focus-visible{opacity:1;outline:2px solid #FFF7F1;outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  #pd-v2-pdp .gal__m:hover .gal__arrow{opacity:1}
  #pd-v2-pdp .gal__arrow:hover{background:rgba(14,8,16,.74)}
}
@media (hover:none){#pd-v2-pdp .gal__arrow{opacity:1}}
#pd-v2-pdp .gal__count{position:absolute;left:12px;bottom:12px;z-index:3;
  padding:5px 11px;border-radius:var(--pill);font:700 12.5px/1 var(--ui);
  background:rgba(14,8,16,.5);color:#FFF7F1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* Mobile: swipe carousel instead of the desktop click-driven crossfade stack.
   Scroll-snap, one full-width tile per image; JS keeps the thumbnail
   highlight/counter in sync with scroll position (no separate mobile JS
   path — same data-pd-v2-gallery-image nodes, just laid out differently). */
@media (max-width:760px){
  #pd-v2-pdp .gal__m{cursor:auto;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch}
  #pd-v2-pdp .gal__m img{position:relative;inset:auto;flex:0 0 100%;scroll-snap-align:center;opacity:1}
  #pd-v2-pdp .gal__th{display:none}
}

/* ══ Zoom viewer — all images, arrows, swipe, Esc, thumbnail strip ══
   Fixed dark chrome regardless of site mode (photo-viewer convention, same
   rationale as .gal__arrow above). */
#pd-v2-pdp .gzv{position:fixed;inset:0;z-index:1200;display:grid;place-items:center}
#pd-v2-pdp .gzv[hidden]{display:none}
#pd-v2-pdp .gzv__scrim{position:absolute;inset:0;background:rgba(10,6,10,.92)}
#pd-v2-pdp .gzv__panel{position:relative;z-index:1;width:min(92vw,1100px);height:min(86vh,1100px);
  display:grid;grid-template-rows:1fr auto}
#pd-v2-pdp .gzv__stage{position:relative;min-height:0}
#pd-v2-pdp .gzv__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transition:opacity .3s var(--e-out)}
#pd-v2-pdp .gzv__stage img.is-active{opacity:1}
#pd-v2-pdp .gzv__close{position:absolute;top:-52px;right:0;z-index:2;width:44px;height:44px;
  border-radius:50%;border:0;display:grid;place-items:center;background:rgba(255,247,241,.12);
  color:#FFF7F1;cursor:pointer}
#pd-v2-pdp .gzv__close svg{width:20px;height:20px;max-width:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#pd-v2-pdp .gzv__close:focus-visible{outline:2px solid #FFF7F1;outline-offset:2px}
#pd-v2-pdp .gzv__arrow{position:absolute;top:50%;translate:0 -50%;z-index:2;width:48px;height:48px;
  border-radius:50%;border:0;display:grid;place-items:center;background:rgba(255,247,241,.12);
  color:#FFF7F1;cursor:pointer}
#pd-v2-pdp .gzv__arrow svg{width:24px;height:24px;max-width:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
#pd-v2-pdp .gzv__arrow:focus-visible{outline:2px solid #FFF7F1;outline-offset:2px}
#pd-v2-pdp .gzv__arrow--prev{left:-8px}
#pd-v2-pdp .gzv__arrow--next{right:-8px}
@media (hover:hover) and (pointer:fine){#pd-v2-pdp .gzv__arrow:hover{background:rgba(255,247,241,.22)}}
#pd-v2-pdp .gzv__count{position:absolute;top:-40px;left:0;font:700 13px/1 var(--ui);color:#FFF7F1}
#pd-v2-pdp .gzv__thumbs{margin-top:14px;display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
#pd-v2-pdp .gzv__thumb{flex:0 0 56px;width:56px;aspect-ratio:1;border-radius:8px;overflow:hidden;
  border:1.5px solid transparent;opacity:.55;padding:0;cursor:pointer;transition:opacity .2s,border-color .2s}
#pd-v2-pdp .gzv__thumb img{width:100%;height:100%;object-fit:cover;display:block}
#pd-v2-pdp .gzv__thumb[aria-current="true"]{opacity:1;border-color:#FFF7F1}
#pd-v2-pdp .gzv__thumb:focus-visible{outline:2px solid #FFF7F1;outline-offset:2px}
@media (max-width:640px){
  #pd-v2-pdp .gzv__panel{width:100vw;height:100vh;grid-template-rows:1fr auto;padding:16px}
  #pd-v2-pdp .gzv__close{top:16px;right:16px}
  #pd-v2-pdp .gzv__count{top:20px;left:16px}
  #pd-v2-pdp .gzv__arrow--prev{left:4px}
  #pd-v2-pdp .gzv__arrow--next{right:4px}
}

/* 购买区 */
#pd-v2-pdp .buy{position:sticky;top:calc(var(--navh) + 18px)}
@media (max-width:980px){#pd-v2-pdp .buy{position:static}}
/* color was --bk (verbatim from the prototype) — contrast audit (feedback item 5)
   measured 4.16:1 against --btn2, just under the 4.5:1 a 12px label needs. Pure
   black clears 5.47:1 against the same background; visually near-identical to
   --bk (#262026 is already a near-black "warm ink"), not a real design change. */
#pd-v2-pdp .buy__tag{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--pill);
  background:var(--btn2);color:#000;font-size:13px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase}
#pd-v2-pdp .buy h1{margin-top:14px;font-size:clamp(25px,3.2vw,38px);font-weight:650;letter-spacing:-.028em}
#pd-v2-pdp .buy__sub{margin-top:7px;color:var(--tx-dim);font-size:14.5px}
#pd-v2-pdp .buy__pr{margin-top:18px;display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
#pd-v2-pdp .buy__pr b{font-family:var(--disp);font-variation-settings:var(--fr-display);font-weight:650;
  font-size:clamp(28px,3.4vw,38px);letter-spacing:-.02em;color:var(--tx)}
/* .buy__pr s and .buy__st.s-out were --tx-faint, .s-in's light value was #0E8F5F —
   same three contrast-audit fixes (feedback item 5) as their twins in
   pd-v2-collection.css: tx-faint measures 2.95–3.08:1 here (s was caught directly;
   s-out wasn't, no out-of-stock product sampled, but it's the identical pair) and
   #0E8F5F measured 3.88:1, under the 4.5:1 this text size needs. */
#pd-v2-pdp .buy__pr s{color:var(--tx-dim);font-size:17px}
#pd-v2-pdp .buy__pr em{font-style:normal;font-size:14px;font-weight:800;color:var(--bk);
  background:var(--lemon);padding:3px 9px;border-radius:var(--pill)}
#pd-v2-pdp .buy__st{margin-top:9px;font-size:14.5px;font-weight:700}
#pd-v2-pdp .buy__st.s-in{color:var(--mint)} html[data-mode="light"] #pd-v2-pdp .buy__st.s-in{color:#0A7850}
#pd-v2-pdp .buy__st.s-out{color:var(--tx-dim)}
#pd-v2-pdp .buy__lede{margin-top:18px;color:var(--tx-dim);font-size:15px;max-width:46ch}

#pd-v2-pdp .qty{margin-top:22px;display:flex;align-items:center;gap:12px}
#pd-v2-pdp .qty__l{font-size:14px;font-weight:700;color:var(--tx-dim)}
#pd-v2-pdp .qty__b{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
#pd-v2-pdp .qty__b button{width:44px;height:48px;display:grid;place-items:center;font-size:17px;
  padding:0;background:none;border:0;color:var(--tx-dim);transition:background .18s,color .18s}
#pd-v2-pdp .qty__b button:hover{background:var(--raise);color:var(--tx)}
#pd-v2-pdp .qty__b input{width:52px;height:48px;text-align:center;border:0;background:none;
  font-size:15px;font-weight:700;-moz-appearance:textfield}
#pd-v2-pdp .qty__b input::-webkit-outer-spin-button,
#pd-v2-pdp .qty__b input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

#pd-v2-pdp .pd-v2-variant{margin-top:18px}
#pd-v2-pdp .pd-v2-variant label{display:block;font-size:14px;font-weight:700;color:var(--tx-dim);margin-bottom:8px}
#pd-v2-pdp .pd-v2-variant select{width:100%;height:46px;padding:0 14px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);color:var(--tx);font-size:15px;font-weight:600}

#pd-v2-pdp .cta{margin-top:18px;display:grid;gap:10px}
#pd-v2-pdp .cta .pd-v2-action{width:100%}
/* Was --tx-faint — contrast audit (feedback item 5): 2.95:1, same failure as every
   other tx-faint text use. This is real policy wording a buyer needs to read
   (VERIFY #4), not a micro-label. */
#pd-v2-pdp .buy__note{margin-top:14px;font-size:13.5px;color:var(--tx-dim)}

#pd-v2-pdp .trust{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:13px}
#pd-v2-pdp .trust div{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--tx-dim)}
#pd-v2-pdp .trust svg{flex:0 0 auto;margin-top:2px;color:var(--mint)}
#pd-v2-pdp .trust b{color:var(--tx);font-weight:700}

/* ══ 吸底加购条 ══ */
#pd-v2-pdp .stick{position:fixed;inset:auto 0 0;z-index:55;
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(100%);transition:transform .45s var(--e-out)}
#pd-v2-pdp .stick.on{transform:translateY(0);transition:transform .42s var(--e-in)}
#pd-v2-pdp .stick__in{max-width:var(--maxw);margin:0 auto;padding:11px var(--gut);
  display:flex;align-items:center;gap:16px}
/* Not in the prototype — Yimei asked for a product thumbnail here afterwards.
   flex-shrink:0 so the price/button never eat into it; object-fit:cover since the
   source is product.featured_image at its own aspect ratio, not necessarily square. */
#pd-v2-pdp .stick__th{flex:none;width:56px;height:56px;border-radius:6px;overflow:hidden;
  background:var(--surface)}
#pd-v2-pdp .stick__th img{width:100%;height:100%;object-fit:cover}
#pd-v2-pdp .stick__n{min-width:0;font-family:var(--disp);font-variation-settings:var(--fr-text);font-optical-sizing:auto;
  font-weight:600;font-size:15px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pd-v2-pdp .stick__p{margin-left:auto;font-family:var(--disp);font-variation-settings:var(--fr-text);font-optical-sizing:auto;
  font-weight:600;font-size:19px;letter-spacing:.02em;white-space:nowrap}
#pd-v2-pdp .stick .pd-v2-action{min-height:46px;padding:0 22px;white-space:nowrap;width:auto}
/* Previously hid the title outright below 620px instead of truncating it (the
   prototype itself never deals with a thumbnail, so it just dropped the name and
   kept price+button). Yimei asked for the title to stay and truncate instead, now
   that there's a thumbnail anchoring what the price belongs to either way. */
@media (max-width:620px){
  #pd-v2-pdp .stick__in{gap:10px}
  #pd-v2-pdp .stick__th{width:44px;height:44px}
  #pd-v2-pdp .stick__n{font-size:14px}
}

/* ══ 内容区段 ══
   共用 .sec 只管水平居中+留白(首页版本,没有分割线);这页原型每个板块之间
   要一条线,且上下内边距数值也不一样 —— 加边框和改内边距,水平居中/宽度交给
   共用规则,不重复。 */
#pd-v2-pdp .sec{padding:clamp(30px,5vh,62px) var(--gut);border-top:1px solid var(--line)}
#pd-v2-pdp .sec--nb{border-top:0}
#pd-v2-pdp .sec__h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:clamp(18px,3vh,32px)}
/* Same dark-mode swap as .head .cap in pd-v2-header.css — see that comment. */
#pd-v2-pdp .sec__h .cap{color:var(--act2);display:block;margin-bottom:9px}
/* .t2 on this page specifically tops out at 38px, not the shared 44px — this
   page already has larger headings (the T7c chapter titles), so its own
   secondary headings ("The material", "Before you ask") stay smaller.
   Parity audit (SPEC-parity.md) caught this: prototype 38px, theme was
   silently falling through to the shared 44px with no scoped override. */
#pd-v2-pdp .t2{font-size:clamp(24px,3.8vw,38px)}
html[data-mode="dark"] #pd-v2-pdp .sec__h .cap{color:var(--main1)}

/* 折叠 */
#pd-v2-pdp .acc{border-top:1px solid var(--line)}
#pd-v2-pdp .acc details{border-bottom:1px solid var(--line)}
/* Never two dividers back to back — the last item's own border-bottom was doubling
   up with the next section's border-top (same rule, same fix shape as
   .pd-v2-mnav a:last-child in pd-v2-header.css). */
#pd-v2-pdp .acc details:last-child{border-bottom:0}
#pd-v2-pdp .acc summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;
  align-items:center;justify-content:space-between;gap:18px;
  font-family:var(--disp);font-variation-settings:var(--fr-text);font-optical-sizing:auto;font-weight:600;font-size:17px;
  letter-spacing:.02em;transition:color .18s}
#pd-v2-pdp .acc summary:hover{color:var(--act)}
#pd-v2-pdp .acc summary::-webkit-details-marker{display:none}
#pd-v2-pdp .acc summary::after{content:"+";font-family:var(--ui);font-size:28px;font-weight:300;
  line-height:1;color:var(--tx-faint);transition:transform .25s var(--e),color .18s var(--e)}
#pd-v2-pdp .acc details[open] summary::after{color:var(--tx-dim)}
#pd-v2-pdp .acc summary:hover::after,
#pd-v2-pdp .acc details[open] summary:hover::after{color:var(--act)}
#pd-v2-pdp .acc details[open] summary::after{transform:rotate(45deg)}
#pd-v2-pdp .acc__c{padding:0 0 20px;color:var(--tx-dim);font-size:14.5px;max-width:76ch}
#pd-v2-pdp .acc__c ul{margin:10px 0 0;padding-left:19px;display:grid;gap:7px}

/* 材质三栏 —— 首页已有 .feel(3 栏网格,间距 22–58px,子项是 .feel__i 的上边框卡片),
   这页原型的 .feel 间距更紧(14–24px)、子项是带边框底色的卡片而不是上边框,数值不一样、
   子节点也不叫 .feel__i(这里没有用那个类,不会动到首页的 .feel__i 规则),所以网格本身
   和卡片样式都限定在这个 id 下,不改共用的 .feel。 */
#pd-v2-pdp .feel{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:820px){#pd-v2-pdp .feel{grid-template-columns:1fr}}
#pd-v2-pdp .feel div{padding:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
#pd-v2-pdp .feel h3{font-family:var(--disp);font-variation-settings:var(--fr-text);font-optical-sizing:auto;
  font-weight:600;font-size:18px;letter-spacing:.02em}
#pd-v2-pdp .feel p{margin-top:9px;font-size:14px;color:var(--tx-dim)}

/* 交叉推荐 */
#pd-v2-pdp .cross{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
@media (max-width:900px){#pd-v2-pdp .cross{grid-template-columns:repeat(2,1fr)}}
#pd-v2-pdp .cross a{display:block}
#pd-v2-pdp .cross__m{aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);
  background:var(--surface);position:relative;
  transition:border-color .3s var(--e),box-shadow .3s var(--e)}
#pd-v2-pdp .cross__m img{width:100%;height:100%;object-fit:cover}
#pd-v2-pdp .cross a:hover .cross__m{border-color:var(--tx-faint);box-shadow:0 12px 30px -16px rgba(20,8,18,.6)}
#pd-v2-pdp .cross__n{margin-top:11px;font-family:var(--disp);font-variation-settings:var(--fr-text);font-optical-sizing:auto;
  font-weight:600;font-size:15.5px;line-height:1.3;letter-spacing:.02em;color:var(--tx);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .2s}
#pd-v2-pdp .cross a:hover .cross__n{color:var(--act)}
#pd-v2-pdp .cross__p{margin-top:5px;font-family:var(--disp);font-variation-settings:var(--fr-text);font-optical-sizing:auto;
  font-weight:600;font-size:16px;letter-spacing:.02em;color:var(--tx)}

/* 另一侧横幅 */
/* margin-top and min-height both bumped per feedback: this band sits right
   after the related-products grid with too little separation for "a
   different part," and its own height was purely content-driven (no floor),
   reading thinner than the ~2:1 (w:h) presence asked for — min-height alone,
   not aspect-ratio (rule #35: never combine the two), so copy length can
   still grow this band taller without being clipped. */
#pd-v2-pdp .other{position:relative;margin-top:clamp(64px,10vh,104px);min-height:clamp(260px,24vw,440px);
  border-radius:var(--r);
  overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
  padding:clamp(30px,4vw,52px);background:linear-gradient(100deg,#3A1240,#6B1A86)}
@media (max-width:700px){#pd-v2-pdp .other{grid-template-columns:1fr}}
#pd-v2-pdp .other__art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
#pd-v2-pdp .other::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(96deg,rgba(14,6,16,.86) 0%,rgba(14,6,16,.58) 46%,rgba(14,6,16,.24) 100%)}
#pd-v2-pdp .other h3{color:var(--bw);font-size:clamp(20px,2.8vw,30px);font-weight:650;letter-spacing:.02em}
#pd-v2-pdp .other p{margin-top:8px;color:rgba(255,247,241,.84);font-size:14.5px;max-width:48ch}
#pd-v2-pdp .other .pd-v2-action{background:var(--bw);color:var(--bk);border-color:var(--bw)}
@media (hover:hover) and (pointer:fine){
  #pd-v2-pdp .other .pd-v2-action:hover{background:var(--act);color:#fff;border-color:var(--act)}
}

/* ══ T7c · 商品故事四章(SPEC-pdp-story.md)—— ported from
   handover/v2/pages/pdp/styles.css's own .ps__/.rd__/.sz__ rules, scoped
   under #pd-v2-pdp. --sd/--sd-l follow data-side (pinky/dolly/other), same
   mode-pairing pattern as .chero[data-c] elsewhere in this project:
   --act/--main2 for pinky (and the "other" fallback), --act2/--main1 for
   dolly. 占位图块(.slt)和示例数字(.ph)是原型专用,整段没有移植——真实
   版本永远渲染真图或完全不渲染那一行,没有"图片位置待补"这种占位态。 ══ */
#pd-v2-pdp .ps{--sd:var(--act);--sd-l:var(--main2)}
#pd-v2-pdp .ps[data-side="dolly"]{--sd:var(--act2);--sd-l:var(--main1)}
#pd-v2-pdp .ps .cap{color:var(--sd-l)} html[data-mode="light"] #pd-v2-pdp .ps .cap{color:var(--sd)}
#pd-v2-pdp .ps__t{font-size:clamp(24px,2.3vw,30px);line-height:1.1;margin:0 0 14px}
#pd-v2-pdp .ps__p,#pd-v2-pdp .ps__list li{font-size:16px;line-height:1.7;color:var(--tx-dim)}
#pd-v2-pdp .ps__p{margin:0;max-width:68ch}

/* 第一行:视频 | 描述 | 人物立绘(两张图固定 3:4) */
#pd-v2-pdp .ps__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,36px);align-items:center}
#pd-v2-pdp .ps__txt{min-width:0;max-width:44ch;justify-self:center}
#pd-v2-pdp .ps__row.no-vid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
#pd-v2-pdp .ps__row.no-render{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
#pd-v2-pdp .ps__row.no-vid.no-render{grid-template-columns:minmax(0,1fr)}
#pd-v2-pdp .ps__row.no-vid.no-render .ps__txt{max-width:70ch;justify-self:start}
#pd-v2-pdp .ps__render{aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--raise)}
#pd-v2-pdp .ps__render img{width:100%;height:100%;object-fit:cover;display:block}
#pd-v2-pdp .ps__ja{margin:2px 0 10px;font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP","Noto Serif CJK JP",serif;
  font-weight:500;font-size:clamp(16px,1.6vw,19px);line-height:1.5;letter-spacing:.06em;color:var(--sd-l)}
html[data-mode="light"] #pd-v2-pdp .ps__ja{color:var(--sd)}

#pd-v2-pdp .ps__vid{min-width:0}
#pd-v2-pdp .ps__frame{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:#0E0810;cursor:pointer}
#pd-v2-pdp .ps__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#pd-v2-pdp .ps__pp{position:absolute;left:50%;top:50%;z-index:2;translate:-50% -50%;width:60px;height:60px;border-radius:50%;
  border:1px solid rgba(255,247,241,.5);background:rgba(14,8,16,.5);color:#FFF7F1;display:grid;place-items:center;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s,visibility 0s .25s}
#pd-v2-pdp .ps__pp svg{width:22px;height:22px;max-width:none;fill:currentColor;margin-left:3px}
#pd-v2-pdp .ps__frame.is-paused .ps__pp{opacity:1;visibility:visible;transition:opacity .25s}
#pd-v2-pdp .ps__pp:focus-visible{outline:2px solid #FFF7F1;outline-offset:3px}
#pd-v2-pdp .ps__snd{position:absolute;right:6px;bottom:6px;z-index:2;width:40px;height:40px;display:grid;place-items:center;padding:0;
  border:0;background:none;color:#FFF7F1;opacity:.62;cursor:pointer;transition:opacity .25s}
#pd-v2-pdp .ps__snd svg{width:20px;height:20px;max-width:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55))}
#pd-v2-pdp .ps__snd .spk{fill:currentColor;stroke:none} #pd-v2-pdp .ps__snd .on{display:none}
#pd-v2-pdp .ps__snd[aria-pressed="true"] .on{display:block} #pd-v2-pdp .ps__snd[aria-pressed="true"] .off{display:none}
#pd-v2-pdp .ps__snd[aria-pressed="true"]{opacity:.9}
@media (hover:hover){#pd-v2-pdp .ps__snd:hover{opacity:1}}
#pd-v2-pdp .ps__snd:focus-visible{opacity:1;outline:2px solid #FFF7F1;outline-offset:0;border-radius:50%}

/* 2026-10-13(反馈 #6): 细进度条,贴视频底边——跟 .gal__arrow 同样道理,铺在
   视频上的控件用固定颜色,不跟明暗模式走。.ps__seektrack/.ps__seekfill 只管
   视觉(背景线 + 已播放填充,JS 更新 fill 的宽度);真正能拖动/点击跳转、
   键盘方向键这些交互全部来自叠在上面、完全透明的原生 <input type=range>,
   只重置外观,不隐藏它(隐藏了键盘/触屏都没法操作)。悬停/聚焦时才出现的
   圆形手柄,呼应"细"这个要求,平时只有一条 2px 线。 */
#pd-v2-pdp .ps__seektrack{position:absolute;left:0;right:0;bottom:7px;z-index:1;height:2px;
  background:rgba(255,247,241,.3);pointer-events:none}
#pd-v2-pdp .ps__seekfill{height:100%;width:0;background:#FFF7F1}
#pd-v2-pdp .ps__seek{position:absolute;left:0;right:0;bottom:0;z-index:2;width:100%;margin:0;
  height:16px;padding:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
#pd-v2-pdp .ps__seek::-webkit-slider-runnable-track{height:2px;background:transparent}
#pd-v2-pdp .ps__seek::-moz-range-track{height:2px;background:transparent;border:0}
#pd-v2-pdp .ps__seek::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;
  background:#FFF7F1;margin-top:-4.5px;opacity:0;transition:opacity .2s}
#pd-v2-pdp .ps__seek::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#FFF7F1;border:0;opacity:0;transition:opacity .2s}
#pd-v2-pdp .ps__seek:hover::-webkit-slider-thumb,
#pd-v2-pdp .ps__seek:focus-visible::-webkit-slider-thumb{opacity:1}
#pd-v2-pdp .ps__seek:hover::-moz-range-thumb,
#pd-v2-pdp .ps__seek:focus-visible::-moz-range-thumb{opacity:1}
#pd-v2-pdp .ps__seek:focus-visible{outline:none}
#pd-v2-pdp .ps__frame:has(.ps__seek:focus-visible) .ps__seektrack{background:rgba(255,247,241,.5)}

/* 第二段:工艺与设计(标题左,卖点两列) */
#pd-v2-pdp .ps__craft{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,2fr);gap:clamp(18px,3vw,40px);align-items:start;
  margin-top:clamp(24px,3.4vh,34px);padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--line)}
#pd-v2-pdp .ps__craft .ps__t{margin:0}
#pd-v2-pdp .ps__list{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(18px,2.6vw,36px)}
#pd-v2-pdp .ps__list li{display:flex;gap:12px;align-items:flex-start;break-inside:avoid;margin-bottom:12px}
#pd-v2-pdp .ps__list svg{flex:none;width:14px;height:14px;margin-top:6px;fill:var(--sd-l)}
html[data-mode="light"] #pd-v2-pdp .ps__list svg{fill:var(--sd)}
#pd-v2-pdp .ps__det{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px;margin-top:clamp(18px,3vh,28px)}
#pd-v2-pdp .ps__det img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);display:block;cursor:pointer}
#pd-v2-pdp .ps__det img:focus-visible{outline:2px solid var(--act);outline-offset:2px}

/* 第三段:通道 */
#pd-v2-pdp .ps__ch{margin-top:clamp(32px,5vh,52px);padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--line)}
#pd-v2-pdp .ps__ch-img{width:100%;height:auto;border-radius:var(--r);display:block;margin-top:4px}
#pd-v2-pdp .ps__lv{list-style:none;margin:14px 0 16px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#pd-v2-pdp .ps__lv li{padding:12px 14px;border-radius:var(--r);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:4px}
#pd-v2-pdp .ps__lv b{font:800 12px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--sd-l)}
html[data-mode="light"] #pd-v2-pdp .ps__lv b{color:var(--sd)}
#pd-v2-pdp .ps__lvn{font-size:16px;line-height:1.2}
#pd-v2-pdp .ps__lvd{font-size:13px;color:var(--tx-dim)}

/* 第四段:手感与尺寸 */
#pd-v2-pdp .ps__fs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:clamp(32px,5vh,52px);
  padding-top:clamp(28px,4vh,40px);border-top:1px solid var(--line)}
#pd-v2-pdp .ps__fs.is-one{grid-template-columns:1fr}
#pd-v2-pdp .ps__card{padding:22px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
#pd-v2-pdp .rd{margin:0;display:grid;gap:14px;justify-items:center}
#pd-v2-pdp .rd svg{width:100%;max-width:340px;height:auto;overflow:visible}
#pd-v2-pdp .rd__g{fill:none;stroke:var(--line)}
#pd-v2-pdp .rd__p{fill:color-mix(in srgb,var(--sd-l) 30%,transparent);stroke:var(--sd-l);stroke-width:2;stroke-linejoin:round}
html[data-mode="light"] #pd-v2-pdp .rd__p{stroke:var(--sd);fill:color-mix(in srgb,var(--sd) 30%,transparent)}
#pd-v2-pdp .rd__d{fill:var(--sd-l)} html[data-mode="light"] #pd-v2-pdp .rd__d{fill:var(--sd)}
#pd-v2-pdp .rd__l{fill:var(--tx-dim);font:700 10.5px var(--ui)}
#pd-v2-pdp .rd__v{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:8px;width:100%;max-width:440px}
#pd-v2-pdp .rd__v li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--tx-dim);border-bottom:1px dashed var(--line);padding-bottom:6px}
#pd-v2-pdp .rd__v b{color:var(--tx);font-variant-numeric:tabular-nums}
#pd-v2-pdp .sz{margin:0 auto;max-width:520px}
/* 2026-10-10:160px 太矮——.sz__photo 是 position:absolute,撑不高父容器,
   父容器唯一的高度来源就是这个 min-height,而图片自己的高度又是父容器高度
   的百分比(inset:0 0 34px 54px 换算出来的 height:calc(100% - 34px)),两边
   互相依赖的结果是图再怎么调都卡在 ~126px,看起来挤在卡片里很小。
   2026-10-13(反馈 #4):改成固定 360px 后又产生了新问题——这个高度不随
   卡片宽度变化,手机上卡片变窄但高度没变,.sz__photo 的 object-fit:contain
   只能在一个比例严重失真的框里居中,两侧或上下留出大片空白。换成
   aspect-ratio(不跟 min-height 混用,踩过的坑见 brief layout-traps #35),
   框的高度跟着宽度走,标注线仍按容器的百分比/固定偏移定位,不用改。 */
#pd-v2-pdp .sz__stage{position:relative;padding:0 0 34px 54px;aspect-ratio:4/3}
/* 2026-10-13(反馈):inset 原来是 0 0 34px 54px——只在左边(给竖直标注线)
   留了 54px,右边是 0,图片贴着舞台右边缘,看起来明显偏向一侧。改成左右各
   留 54px,图片在舞台里水平居中;.sz__h 的 right 跟着从 0 改成 54px,量尺
   横线才继续正好卡在图片的实际左右边缘上,不会量到右边新让出来的空白。 */
#pd-v2-pdp .sz__photo{position:absolute;inset:0 54px 34px 54px;width:calc(100% - 108px);height:calc(100% - 34px);object-fit:contain}
#pd-v2-pdp .sz__v{position:absolute;left:14px;top:6%;bottom:46px;border-left:1.5px solid var(--tx-dim)}
#pd-v2-pdp .sz__v::before,#pd-v2-pdp .sz__v::after{content:"";position:absolute;left:-7px;width:13px;border-top:1.5px solid var(--tx-dim)}
#pd-v2-pdp .sz__v::before{top:0} #pd-v2-pdp .sz__v::after{bottom:0}
#pd-v2-pdp .sz__v span{position:absolute;left:8px;top:50%;translate:0 -50%;font:700 13px var(--ui);white-space:nowrap}
#pd-v2-pdp .sz__h{position:absolute;left:54px;right:54px;bottom:12px;border-top:1.5px solid var(--tx-dim)}
#pd-v2-pdp .sz__h::before,#pd-v2-pdp .sz__h::after{content:"";position:absolute;top:-7px;height:13px;border-left:1.5px solid var(--tx-dim)}
#pd-v2-pdp .sz__h::before{left:0} #pd-v2-pdp .sz__h::after{right:0}
#pd-v2-pdp .sz__h span{position:absolute;left:50%;top:6px;translate:-50% 0;font:700 13px var(--ui)}
#pd-v2-pdp .sz__f{margin:14px 0 0;display:flex;gap:10px;flex-wrap:wrap}
#pd-v2-pdp .sz__f div{padding:8px 12px;border-radius:var(--r);background:var(--raise);box-shadow:inset 0 0 0 1px var(--line)}
#pd-v2-pdp .sz__f dt{font:800 10px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-dim)}
#pd-v2-pdp .sz__f dd{margin:4px 0 0;font-weight:700}
/* .more ("Full care guide" / "See all pieces") had no rule of its own at
   all — a bare inline link, tap target as tall as its own 15px text (2026-10-11
   mobile audit). Padding, not bigger type, per that audit's own instruction. */
#pd-v2-pdp .more{display:inline-flex;align-items:center;min-height:44px;padding:4px 0;color:var(--tx);font-weight:700;text-underline-offset:3px}

@media (max-width:1000px){
  #pd-v2-pdp .ps__row,#pd-v2-pdp .ps__row.no-vid,#pd-v2-pdp .ps__row.no-render{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #pd-v2-pdp .ps__txt{grid-column:1/-1;order:3;max-width:none}
  #pd-v2-pdp .ps__row.no-vid .ps__txt,#pd-v2-pdp .ps__row.no-render .ps__txt{order:0;grid-column:auto}
  #pd-v2-pdp .ps__craft{grid-template-columns:1fr}
  #pd-v2-pdp .ps__fs{grid-template-columns:1fr}
  #pd-v2-pdp .ps__lv{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  #pd-v2-pdp .ps__row.no-vid,#pd-v2-pdp .ps__row.no-render{grid-template-columns:1fr}
  #pd-v2-pdp .ps__list{columns:1}
  #pd-v2-pdp .rd__v{grid-template-columns:1fr}
}

/* Fraunces(SPEC-typography.md):五个章节标题统一 Display(--fr-display token · 650,
   +0.02em);通道层级名称统一 Text(auto · 600,+0.02em)——跟这个文件其余
   地方(.buy h1/.stick__n 等)同一套 --fr-display/--fr-text token,不是
   原型自己那个已废弃的单一字重覆盖块。 */
#pd-v2-pdp .ps__t{font-family:var(--disp);font-variation-settings:var(--fr-display);font-weight:650;
  letter-spacing:.02em}
#pd-v2-pdp .ps__lvn{font-family:var(--disp);font-variation-settings:var(--fr-text);font-optical-sizing:auto;
  font-weight:600;letter-spacing:.02em}

/* ══ "Two ways from here." (SPEC-cart-voices-twoways-mobile.md §C) ══
   Two identical bands: character card (shared .fc component, see
   components/pd-v2-card.html) + 2 products from that side's collection. */
#pd-v2-pdp .xs2 .sec__h{margin-bottom:18px}
#pd-v2-pdp .xb2{padding:clamp(16px,2vw,24px);border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-left:4px solid}
#pd-v2-pdp .xb2+.xb2{margin-top:16px}
#pd-v2-pdp .xb2--p{border-left-color:var(--act)}#pd-v2-pdp .xb2--d{border-left-color:var(--act2)}
html[data-mode="dark"] #pd-v2-pdp .xb2--p{border-left-color:var(--main2)}html[data-mode="dark"] #pd-v2-pdp .xb2--d{border-left-color:var(--main1)}
#pd-v2-pdp .xb2__t{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
#pd-v2-pdp .xb2__k{font:800 12px/1 var(--ui);letter-spacing:.18em;text-transform:uppercase}
#pd-v2-pdp .xb2--p .xb2__k{color:var(--act)}#pd-v2-pdp .xb2--d .xb2__k{color:var(--act2)}
html[data-mode="dark"] #pd-v2-pdp .xb2--p .xb2__k{color:var(--main2)}html[data-mode="dark"] #pd-v2-pdp .xb2--d .xb2__k{color:var(--main1)}
#pd-v2-pdp .xb2__t a{font-weight:700;font-size:14.5px;color:var(--tx);text-underline-offset:3px}
#pd-v2-pdp .xb2__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);align-items:start}
#pd-v2-pdp .xb2 .flip.xb2__card{display:block;margin:0;max-width:none;width:100%}
#pd-v2-pdp .xb2 .flip.xb2__card .fc{width:100%;max-width:none}
#pd-v2-pdp .xp{display:block;text-decoration:none;color:inherit}
#pd-v2-pdp .xp__img{aspect-ratio:1;border-radius:12px;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;transition:box-shadow .2s}
#pd-v2-pdp .xp__img img{width:100%;height:100%;object-fit:cover;display:block}
@media (hover:hover) and (pointer:fine){#pd-v2-pdp .xp:hover .xp__img{box-shadow:inset 0 0 0 1.5px var(--tx)}}
#pd-v2-pdp .xp__n{margin:12px 0 4px;font-family:var(--disp);font-variation-settings:"SOFT" 0,"WONK" 0;font-weight:600;font-size:17px;letter-spacing:.02em;color:var(--tx)}
#pd-v2-pdp .xp__p{margin:0;font-family:var(--disp);font-variation-settings:"SOFT" 0,"WONK" 0;font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--tx)}
#pd-v2-pdp .xp__p s{margin-left:6px;font-family:var(--ui);font-weight:600;font-size:13px;color:var(--tx-dim)}
@media (max-width:760px){#pd-v2-pdp .xb2__g{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:70%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  #pd-v2-pdp .xb2__g>*{scroll-snap-align:start}}
html[data-mode="dark"] #pd-v2-pdp .xs2 .cap{color:var(--main1)}