/* ---------- product page ---------- */
.pd{ padding-top:calc(var(--nav-h) + clamp(24px,4vw,56px)) }
.pd-top{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,5vw,72px); align-items:start }
.pd-gallery{ position:sticky; top:calc(var(--nav-h) + 24px) }
.pd-main{ position:relative; margin:0; border-radius:var(--r-card); overflow:hidden; background:var(--void-2); border:1px solid var(--edge); aspect-ratio:16/9 }
.pd-main img{ width:100%; height:100%; object-fit:cover; display:block; transition:opacity .35s } .pd-main img.swap{ opacity:0 }
.pd-main figcaption{ position:absolute; left:16px; bottom:14px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--bone); background:rgba(5,10,12,.55); padding:6px 10px; border-radius:var(--pill); backdrop-filter:blur(6px) }
.pd-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid var(--edge); background:rgba(5,10,12,.55); color:var(--bone); display:grid; place-items:center; cursor:pointer; padding:0; backdrop-filter:blur(6px); opacity:0; transition:opacity .25s,border-color .25s }
.pd-arrow svg{ width:16px; height:16px } .pd-arrow.prev{ left:12px } .pd-arrow.next{ right:12px } .pd-main:hover .pd-arrow,.pd-arrow:focus-visible{ opacity:1 } .pd-arrow:hover{ border-color:var(--ice) }
@media (hover:none){ .pd-arrow{ opacity:1 } }
.pd-thumbs{ display:grid; grid-template-columns:repeat(8,1fr); gap:8px; margin-top:10px; padding:2px }
.pd-thumb{ appearance:none; padding:0; border:1px solid var(--edge); border-radius:10px; overflow:hidden; background:var(--void-2); cursor:pointer; aspect-ratio:16/10; opacity:.6; transition:opacity .25s,border-color .25s }
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block } .pd-thumb:hover{ opacity:.9 } .pd-thumb.on{ opacity:1; border-color:var(--ice) }
.pd-buy{ display:grid; gap:18px; align-content:start }
.pd-batch{ margin:0; font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ash) }
.pd h1{ font-size:clamp(40px,4.6vw,64px); max-width:none; margin:-6px 0 0 }
.pd-lede{ font-size:clamp(16px,1.25vw,18px); line-height:1.5; color:var(--ash); margin:0; max-width:44ch }
.pd-price{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:18px 0; border-top:1px solid var(--edge); border-bottom:1px solid var(--edge) }
.pd-price b{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; font-family:var(--ff-display); font-weight:600; font-size:clamp(48px,4.5vw,64px); letter-spacing:-.035em; line-height:1.1; color:var(--ice) }
.pd-sub{ font-family:var(--ff-display); font-size:clamp(21px,2vw,28px); font-weight:600; letter-spacing:-.01em; color:var(--bone) }
.pd-plus{ width:100%; font-size:17px; font-weight:600; color:var(--bone); margin-left:0 }
.pd-opts{ margin:0; display:grid; gap:0 } .pd-opts > div{ display:grid; grid-template-columns:72px 1fr; gap:14px; padding:10px 0; border-bottom:1px solid var(--edge); font-size:15px }
.pd-opts dt{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ash); padding-top:3px } .pd-opts dd{ margin:0 } .pd-opts .count{ font-weight:500 }
.pd-cta{ display:grid; gap:10px; margin-top:4px } .pd-cta .btn{ width:100%; justify-content:center }
.pd-trust{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:13px; color:var(--ash) }
.pd-trust li::before{ content:"●"; color:var(--ice); font-size:6px; vertical-align:2px; margin-right:8px }
.pd-acc{ margin-top:8px; border-top:1px solid var(--edge) }
.pd-acc details{ border-bottom:1px solid var(--edge) }
.pd-acc summary{ list-style:none; cursor:pointer; padding:16px 0; font-family:var(--ff-display); font-size:18px; letter-spacing:-.01em; display:flex; justify-content:space-between; align-items:center; gap:12px }
.pd-acc summary::-webkit-details-marker{ display:none }
.pd-acc summary::after{ content:""; width:9px; height:9px; border-right:1px solid var(--ash); border-bottom:1px solid var(--ash); transform:rotate(45deg); transition:transform .25s; flex:none; margin-right:4px }
.pd-acc details[open] summary::after{ transform:rotate(-135deg) }
.pd-acc details > *:not(summary){ margin:0 0 16px } .pd-acc p{ font-size:15px; line-height:1.55; color:var(--ash) } .pd-acc p + p{ margin-top:-6px }
.pd-list{ list-style:none; padding:0; display:grid; gap:8px; font-size:15px } .pd-list li::before{ content:"●"; color:var(--ice); font-size:6px; vertical-align:2px; margin-right:10px }
.pd-specs{ display:grid; gap:0 } .pd-specs > div{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:9px 0; border-top:1px solid var(--edge); font-size:14.5px } .pd-specs > div:first-child{ border-top:0 }
.pd-specs dt{ color:var(--ash) } .pd-specs dd{ margin:0 }
.pd-flow{ margin-top:clamp(56px,8vw,112px); padding-bottom:clamp(56px,8vw,112px) }
.pd-flow-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,40px); border-top:1px solid var(--edge); padding-top:28px }
.pd-flow-grid h2{ font-size:22px; margin-bottom:8px; letter-spacing:-.015em; line-height:1.15 } .pd-flow-grid p{ margin:0; color:var(--ash); font-size:15px; line-height:1.5 }
@media (max-width:900px){
  .pd-top{ grid-template-columns:1fr; gap:24px } .pd-gallery{ position:static }
  .pd-thumbs{ grid-template-columns:repeat(4,1fr); gap:8px } .pd-thumb{ border-radius:10px; aspect-ratio:16/9 }
  .pd h1{ font-size:40px } .pd-price{ padding:14px 0 } .pd-acc summary{ padding:14px 0; font-size:17px }
  .pd-plus{ margin-left:0; width:100% }
  .pd-flow-grid{ grid-template-columns:1fr; gap:22px }
}