/* PRODUCT PAGE */
.back{display:inline-block;margin:26px 0 22px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);transition:color .2s}
.back:hover{color:var(--ink)}
.pdp{display:grid;gap:40px;grid-template-columns:1fr;padding-bottom:72px}
@media(min-width:900px){.pdp{grid-template-columns:1.25fr 1fr;gap:64px}}
.gallery{display:grid;gap:10px;align-items:start}
@media(min-width:600px){.gallery{grid-template-columns:84px 1fr}}
.thumbs{display:flex;gap:8px;order:2}
@media(min-width:600px){.thumbs{flex-direction:column;order:0}}
.thumb{width:72px;aspect-ratio:1;overflow:hidden;border:1px solid transparent;opacity:.55;transition:all .25s;padding:0}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb:hover{opacity:.9}.thumb.on{opacity:1;border-color:var(--ink)}
.main{position:relative;aspect-ratio:1;overflow:hidden;background:var(--off)}
.main img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .25s,transform 1s var(--ease)}
.main:hover img{transform:scale(1.04)}
.details{align-self:start;position:sticky;top:110px}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.details h1{font-size:clamp(22px,2.6vw,32px);letter-spacing:.1em;margin:10px 0 16px}
.prices.big{font-size:20px;gap:14px}
.prices.big s{font-size:15px}
.tax{font-size:12px;color:var(--mute);margin-top:6px}
.desc{font-size:14px;line-height:1.75;color:#3a3a3a;margin:22px 0 26px}
.opt{margin-bottom:22px}
.opt h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line);padding:11px 18px;font-size:12px;letter-spacing:.08em;transition:all .25s}
.chip:hover{border-color:var(--ink)}.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.swatch{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);outline:1px solid var(--ink);outline-offset:3px}
.buy{display:flex;gap:12px;margin:28px 0 30px}
.qty{display:flex;align-items:center;border:1px solid var(--ink)}
.qty button{width:44px;height:52px;font-size:18px;transition:background .2s}
.qty button:hover{background:var(--off)}
.qty span{min-width:30px;text-align:center;font-size:14px}
.cta{flex:1;background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;transition:background .3s}
.cta:hover{background:var(--accent)}
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:16px 0;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;display:flex;justify-content:space-between}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-weight:400;font-size:16px;transition:transform .3s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc p{font-size:13px;line-height:1.75;color:#555;padding-bottom:18px}
.related{padding-bottom:72px;border-top:1px solid var(--line)}
.related h3{font-size:14px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:48px 0 28px}
.card a{color:inherit}

/* IN MOTION */
.motion{background:var(--off);border-top:1px solid var(--line);padding:88px 0}
.motion-in{display:grid;gap:40px;align-items:center;justify-items:center}
@media(min-width:800px){.motion-in{grid-template-columns:auto 1fr;gap:96px;justify-items:start;max-width:1100px;margin:0 auto}}
.vframe{position:relative;width:min(400px,82vw);aspect-ratio:9/16;background:#111;overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,0,0,.45)}
.vframe video,.vframe .pan{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vframe .pan{background-size:140% 140%;animation:pan 9s ease-in-out infinite alternate}
.vframe .live{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:7px;color:#fff;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.5);z-index:2}
.vframe .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
.vframe .snd{position:absolute;right:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;transition:background .25s;z-index:2}
.vframe .snd:hover{background:#fff}
.vframe .snd svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vframe .snd .on{display:none}.vframe .snd.unmuted .on{display:block}.vframe .snd.unmuted .off{display:none}
.mtext .eyebrow{margin-bottom:12px}
.mtext h3{font-size:clamp(28px,3.6vw,42px);font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;margin-bottom:18px}
.mtext p{font-size:15px;line-height:1.8;color:#444;max-width:460px;margin-bottom:26px}
.points{list-style:none;display:grid;gap:12px;margin-bottom:30px}
.points li{font-size:12px;letter-spacing:.14em;text-transform:uppercase;display:flex;gap:12px;align-items:center}
.points li::before{content:"";width:22px;height:1px;background:var(--ink)}
.watch{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}