/* ============================================================
   product.css — PDP gallery, sticky info, accordions, lightbox
   ============================================================ */

.pdp{display:grid;grid-template-columns:1.32fr 1fr;gap:clamp(24px,3.4vw,72px);
  max-width:var(--maxw);margin:0 auto;padding:clamp(22px,2.6vw,44px) var(--pad) clamp(60px,7vw,120px)}

/* ---------- gallery ---------- */
.gal{display:flex;flex-direction:column;gap:var(--gut)}
.gal__main{
  position:relative;background:var(--char);overflow:hidden;aspect-ratio:4/5;cursor:zoom-in;
}
.gal__main img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--e-out)}
.gal__main.is-zoom img{transform:scale(2.1)}
.gal__badge{position:absolute;top:0;left:0;z-index:3;display:flex;flex-direction:column;align-items:flex-start}
.gal__nav{position:absolute;bottom:14px;right:14px;z-index:3;display:flex;gap:6px}
.gal__nav button{width:38px;height:38px;display:grid;place-items:center;
  background:rgba(8,8,10,.55);backdrop-filter:blur(10px);color:var(--bone);
  border:1px solid rgba(233,230,223,.16);transition:all .3s}
.gal__nav button:hover{background:var(--red);border-color:var(--red);color:#fff}
.gal__nav svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}
.gal__idx{position:absolute;bottom:14px;left:14px;z-index:3;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--bone);
  background:rgba(8,8,10,.55);backdrop-filter:blur(10px);padding:6px 11px}
.gal__zoomhint{position:absolute;top:14px;right:14px;z-index:3;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gray-2);opacity:0;transition:opacity .35s}
.gal__main:hover .gal__zoomhint{opacity:1}

.gal__thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.gal__thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--char);
  opacity:.42;transition:opacity .4s var(--e-out)}
.gal__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e-out)}
.gal__thumb:hover{opacity:.8}
.gal__thumb:hover img{transform:scale(1.07)}
.gal__thumb.is-on{opacity:1}
.gal__thumb.is-on::after{content:'';position:absolute;inset:0;border:1px solid var(--red-ui)}

/* ---------- info ---------- */
.pinfo{position:sticky;top:calc(var(--hdr-h) + 24px);align-self:start;
  display:flex;flex-direction:column;gap:0;max-height:calc(100vh - var(--hdr-h) - 48px);
  overflow-y:auto;overflow-x:hidden;padding-right:2px}
.pinfo::-webkit-scrollbar{width:3px}
.pinfo__cat{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.pinfo__cat i{display:block;width:22px;height:1px;background:var(--red-ui);font-style:normal}
.pinfo__name{font-family:var(--display);font-size:clamp(1.9rem,3.7vw,3.5rem);line-height:1;
  text-transform:uppercase;color:var(--warm);letter-spacing:-.012em}
.pinfo__jp{font-family:var(--jp);font-size:11px;letter-spacing:.3em;color:var(--steel-2);margin-top:10px}

.pinfo__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:22px 0;padding-bottom:22px;border-bottom:1px solid rgba(233,230,223,.1)}
.pinfo__now{font-family:var(--head);font-weight:600;font-size:clamp(22px,2.2vw,30px);
  letter-spacing:.02em;color:var(--bone)}
.pinfo__now.is-sale{color:var(--red-ui)}
.pinfo__was{font-size:15px;color:var(--steel-2);text-decoration:line-through}
.pinfo__save{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--red);padding:4px 9px}
.pinfo__vat{width:100%;font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--steel-2)}

.pinfo__desc{font-size:13.5px;line-height:1.8;color:var(--gray-2);font-weight:300;margin-bottom:26px}

.opt{margin-bottom:24px}
.opt__hd{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px}
.opt__hd .meta{letter-spacing:.28em}
.opt__hd b{font-family:var(--mono);font-size:10px;color:var(--bone);font-weight:400;letter-spacing:.14em}
.opt__guide{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gray);border-bottom:1px solid var(--steel);transition:color .25s,border-color .25s}
.opt__guide:hover{color:var(--red-ui);border-color:var(--red-ui)}
.opt__row{display:flex;gap:8px;flex-wrap:wrap}
.opt__row .swatch{height:44px;min-width:52px;font-size:11.5px;letter-spacing:.12em}
.opt.is-err .swatch{border-color:rgba(236,28,36,.55);animation:shake .45s}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.opt__err{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--red-ui);
  margin-top:9px;display:none}
.opt.is-err .opt__err{display:block}

.buyrow{display:flex;gap:10px;align-items:stretch;margin-bottom:14px}
.buyrow .qty{height:62px;border-color:rgba(233,230,223,.2)}
.buyrow .qty button{width:40px;height:100%;font-size:15px}
.buyrow .qty span{min-width:34px;font-size:13px}
.addbtn{flex:1;height:62px;display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--bone);color:var(--ink);position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--head);font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  transition:color .35s var(--e-out)}
.addbtn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--red);
  transform:translateY(101%);transition:transform .5s var(--e-out)}
.addbtn:hover{color:#fff}
.addbtn:hover::before{transform:translateY(0)}
.addbtn.is-done{background:#14a34a;color:#fff}
.wishbtn{width:62px;height:62px;display:grid;place-items:center;
  border:1px solid rgba(233,230,223,.2);color:var(--bone);transition:all .3s}
.wishbtn:hover{border-color:var(--red-ui);color:var(--red-ui)}
.wishbtn.is-on{color:var(--red-ui);border-color:var(--red-ui)}
.wishbtn.is-on svg{fill:var(--red-ui)}
.wishbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.4}

.trust{display:flex;flex-direction:column;gap:11px;padding:20px 0;
  border-block:1px solid rgba(233,230,223,.1);margin-bottom:8px}
.trust__row{display:flex;align-items:center;gap:11px;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.trust__row svg{width:14px;height:14px;stroke:var(--red-ui);fill:none;stroke-width:1.5;flex:0 0 auto}
.trust__row b{color:var(--bone);font-weight:400}

/* accordions */
.acc{border-bottom:1px solid rgba(233,230,223,.1)}
.acc__hd{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 0;text-align:left;
  font-family:var(--head);font-weight:500;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--bone);transition:color .3s}
.acc__hd:hover{color:var(--red-ui)}
.acc__hd i{font-style:normal;width:11px;height:11px;position:relative;flex:0 0 auto}
.acc__hd i::before,.acc__hd i::after{content:'';position:absolute;background:var(--red-ui);transition:transform .4s var(--e-out)}
.acc__hd i::before{left:0;top:5px;width:11px;height:1px}
.acc__hd i::after{left:5px;top:0;width:1px;height:11px}
.acc.is-open .acc__hd i::after{transform:scaleY(0)}
.acc__bd{overflow:hidden;max-height:0;transition:max-height .6s var(--e-io)}
.acc.is-open .acc__bd{max-height:640px}
.acc__inner{padding-bottom:24px;font-size:13px;line-height:1.85;color:var(--gray-2);font-weight:300}
.acc__inner ul{display:flex;flex-direction:column;gap:8px}
.acc__inner li{display:flex;gap:11px;align-items:flex-start}
.acc__inner li::before{content:'//';color:var(--red-ui);font-family:var(--mono);font-size:10px;
  line-height:1.9;flex:0 0 auto}
.sizetable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px}
.sizetable th,.sizetable td{padding:9px 8px;text-align:left;border-bottom:1px solid rgba(233,230,223,.08)}
.sizetable th{color:var(--red-ui);font-weight:400;letter-spacing:.16em;font-size:9.5px;text-transform:uppercase}
.sizetable td{color:var(--gray-2)}

@media (max-width:980px){
  .pdp{grid-template-columns:1fr;gap:32px}
  .pinfo{position:static;max-height:none;overflow:visible}
  .gal__thumbs{grid-template-columns:repeat(4,1fr)}
}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:var(--z-menu);background:rgba(6,6,8,.97);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .5s var(--e-out)}
.lb.is-open{opacity:1;pointer-events:auto}
.lb img{max-width:min(1200px,92vw);max-height:86vh;object-fit:contain;
  transform:scale(.94);transition:transform .6s var(--e-out)}
.lb.is-open img{transform:scale(1)}
.lb__close{position:absolute;top:22px;right:22px;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid rgba(233,230,223,.2);color:var(--bone);transition:all .3s}
.lb__close:hover{background:var(--red);border-color:var(--red)}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;
  display:grid;place-items:center;color:var(--bone);border:1px solid rgba(233,230,223,.2);transition:all .3s}
.lb__nav:hover{background:var(--red);border-color:var(--red)}
.lb__nav--p{left:22px}.lb__nav--n{right:22px}
.lb__idx{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--gray)}

/* ---------- related ---------- */
.rel{border-top:1px solid rgba(233,230,223,.1)}
.rel__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
@media (max-width:900px){.rel__grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- pdp marquee band ---------- */
.pband{background:var(--red);overflow:hidden}
.pband .marquee{border:0;background:var(--red)}
.pband .marquee__item{font-family:var(--mono);font-size:10.5px;letter-spacing:.32em;
  color:#fff;padding:12px 0;gap:34px}
.pband .sep{color:rgba(255,255,255,.5)}