/* =========================================================
   NOISE — PDP（商品ページ）
   ========================================================= */

.is-pdp main{ padding-top:calc(var(--tick-h) + var(--nav-h)) }

.crumb{ display:flex; gap:8px; align-items:center; padding:clamp(14px,1.8vw,26px) var(--pad) 0; opacity:.66 }
.crumb a:hover{ background:var(--acid) }
.crumb em{ font-style:normal }

/* ---------- 上部 ---------- */
.pdp{ display:grid; grid-template-columns:1.22fr .78fr; gap:0;
  padding:clamp(14px,2vw,28px) var(--pad) clamp(40px,5vw,80px); align-items:start }
.pdp__gal{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) }
.pdp__gal .g{ position:relative; border:1.5px solid var(--ink); background:var(--white); overflow:hidden }
.pdp__gal .g img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover }
.pdp__gal .g.sk{ aspect-ratio:4/5; background:var(--bg2); border-color:var(--line2) }
.pdp__gal .g.is-lic img{ height:108%; object-fit:cover }
.pdp__gal .g:first-child{ grid-column:1 / -1 }
.pdp__gal .g__n{ position:absolute; left:0; top:0; background:var(--ink); color:var(--bg);
  font-family:"Azeret Mono",monospace; font-size:9.5px; letter-spacing:.12em; padding:5px 9px }

.pdp__buy{ padding-left:clamp(20px,3vw,56px) }
.pdp__stick{ position:sticky; top:calc(var(--tick-h) + var(--nav-h) + 22px);
  display:flex; flex-direction:column; gap:clamp(12px,1.5vw,20px) }
.pdp__brand{ align-self:flex-start; background:var(--ink); color:var(--bg);
  font-family:"Azeret Mono",monospace; font-size:10px; letter-spacing:.14em; padding:6px 11px }
.pdp__brand.is-vsw{ background:var(--red); color:var(--white) }
.pdp__t{ font-weight:800; font-size:clamp(19px,1.9vw,27px); line-height:1.42; letter-spacing:-.005em;
  min-height:2.84em }
.pdp__sku{ opacity:.55; margin-top:-8px }
.pdp__price{ display:flex; align-items:baseline; gap:10px; border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink); padding:clamp(10px,1.4vw,18px) 0 }
.pdp__yen{ font-family:"Archivo",sans-serif; font-weight:900;
  font-variation-settings:"wdth" var(--wd),"wght" 900;
  font-size:clamp(38px,4.6vw,68px); line-height:.9; letter-spacing:-.03em }
.pdp__price .mono{ opacity:.55 }

.opt__lbl{ display:flex; gap:10px; align-items:baseline; margin-bottom:9px; opacity:.62 }
.opt__lbl b{ color:var(--ink); opacity:1; font-weight:400; letter-spacing:.04em; text-transform:none }
.chips{ display:flex; flex-wrap:wrap; gap:9px }
.chip{ position:relative; width:46px; height:46px; border:1.5px solid var(--ink); border-radius:50%;
  transition:transform .2s var(--e-out), box-shadow .2s var(--e-out) }
.chip:hover{ transform:scale(1.08) }
.chip.is-on{ box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--ink) }
.chip.is-out::after{ content:""; position:absolute; inset:-1px; border-radius:50%;
  background:linear-gradient(to bottom right, transparent 46%, var(--ink) 46%, var(--ink) 54%, transparent 54%) }

.sizes{ display:flex; flex-wrap:wrap; gap:8px }
.size{ min-width:64px; height:44px; padding-inline:16px; border:1.5px solid var(--ink); border-radius:999px;
  font-family:"Azeret Mono",monospace; font-size:12px; letter-spacing:.08em;
  transition:background .18s var(--e-out), color .18s var(--e-out) }
.size:hover:not(:disabled){ background:var(--acid) }
.size.is-on{ background:var(--ink); color:var(--bg) }
.size:disabled{ opacity:.35; cursor:not-allowed; text-decoration:line-through }

.atc{ display:flex; align-items:center; justify-content:center; width:100%; min-height:62px;
  border:1.5px solid var(--ink); border-radius:999px; background:var(--red); color:var(--white);
  font-family:"Azeret Mono",monospace; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  box-shadow:6px 6px 0 var(--ink); margin-top:6px;
  transition:background .2s var(--e-out), color .2s var(--e-out), box-shadow .2s var(--e-out) }
.atc:hover{ background:var(--acid); color:var(--ink); box-shadow:2px 2px 0 var(--ink) }
.atc:disabled{ background:var(--bg2); color:rgba(5,5,5,.45); box-shadow:none; cursor:not-allowed }
.pdp__ext{ align-self:flex-start; border-bottom:1.5px solid var(--ink); padding-bottom:2px; opacity:.8 }
.pdp__ext:hover{ background:var(--acid); opacity:1 }

.pdp__dl{ border-top:1.5px solid var(--ink); margin-top:4px }
.pdp__dl>div{ display:grid; grid-template-columns:96px 1fr; gap:14px; padding:11px 0;
  border-bottom:1.5px solid var(--line2) }
.pdp__dl dt{ opacity:.6; padding-top:2px }
.pdp__dl dd{ font-size:12.5px; line-height:1.7 }

/* SOLD OUT スタンプ */
.stamp{ position:absolute; z-index:4; left:50%; top:46%; transform:translate(-50%,-50%) rotate(-11deg);
  border:5px solid var(--red); color:var(--red); background:rgba(255,255,255,.82);
  font-family:"Archivo",sans-serif; font-weight:900; font-variation-settings:"wdth" 90,"wght" 900;
  font-size:clamp(26px,3.4vw,52px); letter-spacing:.04em; padding:10px 22px; pointer-events:none;
  text-transform:uppercase }

/* ---------- DETAIL / RELATED ---------- */
.pdp__more{ border-top:1.5px solid var(--ink) }
.pdp__detail{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap);
  padding:0 var(--pad) clamp(46px,6vw,92px) }
.pdp__detail figure{ margin:0; border:1.5px solid var(--ink); background:var(--white); overflow:hidden }
.pdp__detail img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover }
.pdp__rel{ border-top:1.5px solid var(--ink) }
.pdp__rel .grid{ padding-bottom:clamp(46px,6vw,92px) }

/* ---------- SP 固定購入バー ---------- */
.bar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  align-items:center; gap:12px; padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:var(--bg); border-top:1.5px solid var(--ink); transform:translateY(102%);
  transition:transform .38s var(--e-snap) }
.bar.is-on{ transform:none }
.bar__l{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 }
.bar__t{ font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bar__p{ font-size:11px; opacity:.7 }
.bar__b{ flex:0 0 auto; min-height:48px; padding-inline:22px; border:1.5px solid var(--ink);
  border-radius:999px; background:var(--red); color:var(--white); font-size:13px; font-weight:800 }

@media (max-width:1180px){
  .pdp{ grid-template-columns:1fr .92fr }
}
@media (max-width:900px){
  .pdp{ grid-template-columns:1fr; gap:clamp(20px,3vw,32px) }
  .pdp__buy{ padding-left:0 }
  .pdp__stick{ position:static }
  .pdp__detail{ grid-template-columns:1fr 1fr }
}
@media (max-width:640px){
  .bar{ display:flex }
  .is-pdp main{ padding-bottom:84px }
  .pdp__gal{ grid-template-columns:1fr 1fr; gap:8px }
  .pdp__dl>div{ grid-template-columns:1fr; gap:3px }
  .chip{ width:44px; height:44px }
  .pdp__t{ font-size:18px }
}