/* =========================================================
   NOISE — お店（shop.html / cart.html）
   白いカード枠は使わない。商品はシルバーの版面に直接置く。
   ========================================================= */

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

/* ---------- 店のヒーロー ---------- */
.sh{ padding:clamp(26px,3.6vw,58px) var(--pad) clamp(18px,2.4vw,34px) }
.sh .fit{ height:clamp(52px,10.4vw,150px) }   /* JS が出す実高さに合わせて CLS を出さない */
.sh__top{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--gap); flex-wrap:wrap }
.sh__note{ margin-top:clamp(10px,1.4vw,18px); font-size:clamp(13px,1vw,15.5px); line-height:1.85;
  max-width:32em; opacity:.86; min-height:5.55em }   /* 3行ぶんを先に確保して font swap で版面を動かさない */
.sh__stat{ display:flex; gap:clamp(14px,2.4vw,38px); align-items:baseline }
.sh__stat div{ display:flex; flex-direction:column; gap:2px }
.sh__stat b{ display:block; font-family:"Archivo",sans-serif; font-weight:900;
  font-variation-settings:"wdth" 112,"wght" 900; font-size:clamp(26px,3vw,44px); line-height:1.06;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; min-width:2.2em }
.sh__stat span{ opacity:.6 }

/* ---------- 絞り込みバー ---------- */
.fb{ position:sticky; top:calc(var(--tick-h) + var(--nav-h)); z-index:40;
  background:rgba(214,214,214,.95); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-top:1.5px solid var(--ink); border-bottom:1.5px solid var(--ink) }
.fb__row{ display:flex; align-items:center; gap:8px; padding:9px var(--pad); min-height:52px;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none }
.fb__row::-webkit-scrollbar{ display:none }
.fb__row + .fb__row{ border-top:1.5px solid var(--line2) }
.fb__row[hidden]{ display:none }
.fb__lbl{ flex:0 0 auto; opacity:.55; margin-right:4px; min-width:52px }
.fp{ flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px;
  border:1.5px solid var(--ink); border-radius:999px; background:transparent;
  font-family:"Azeret Mono",monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  white-space:nowrap; transition:background .16s var(--e-out), color .16s var(--e-out) }
.fp i{ font-style:normal; opacity:.5; font-size:10px }
.fp:hover{ background:var(--acid) }
.fp.is-on{ background:var(--ink); color:var(--bg) }
.fp.is-on i{ opacity:.7 }
.fp--sale.is-on{ background:var(--acid); color:var(--ink) }
.fp--reset{ border-style:dashed }

.fb__end{ margin-left:auto; display:flex; align-items:center; gap:10px; flex:0 0 auto }
.srch{ display:flex; align-items:center; gap:8px; height:34px; padding:0 14px;
  border:1.5px solid var(--ink); border-radius:999px; background:var(--white) }
.srch input{ border:0; background:none; outline:none; width:clamp(120px,14vw,190px);
  font-family:"Azeret Mono",monospace; font-size:11.5px; letter-spacing:.06em }
.srch input::placeholder{ color:rgba(5,5,5,.4) }
.sel{ height:34px; padding:0 12px; border:1.5px solid var(--ink); border-radius:999px; background:var(--white);
  font-family:"Azeret Mono",monospace; font-size:11px; letter-spacing:.08em }
.fb__count{ flex:0 0 auto; font-family:"Azeret Mono",monospace; font-size:11px; letter-spacing:.1em; opacity:.65 }

/* ---------- 商品グリッド（枠なし・地はシルバー） ---------- */
.plist{ min-height:70vh; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,34px) clamp(12px,1.6vw,26px);
  padding:clamp(22px,3vw,44px) var(--pad) clamp(52px,7vw,110px) }
.p{ position:relative; display:flex; flex-direction:column; gap:9px; padding-bottom:13px;
  border-bottom:1.5px solid var(--line2); content-visibility:auto; contain-intrinsic-size:auto 500px }
.p__m{ position:relative; aspect-ratio:4/5; overflow:hidden; isolation:isolate; background:var(--bg);
  display:block }
.p__m img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:opacity .26s var(--e-out) }
.p__m img.b{ opacity:0 }
.p:hover .p__m img.a{ opacity:0 }
.p:hover .p__m img.b{ opacity:1 }
.p.is-plain .p__m img{ mix-blend-mode:multiply }
.p.is-lic .p__m img{ top:0; height:108% }
.p__tag{ position:absolute; left:6px; bottom:8px; z-index:2; background:var(--white); color:var(--ink);
  border:1.5px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:5px 9px;
  font-family:"Azeret Mono",monospace; font-size:11px; letter-spacing:.04em; transform:rotate(-1.6deg) }
.p__tag s{ opacity:.5; margin-left:6px; font-size:9.5px; text-decoration-thickness:1.5px }
.p__tag.is-sale{ background:var(--acid) }
.p__so{ position:absolute; right:6px; top:6px; z-index:2; background:var(--ink); color:var(--bg);
  font-family:"Azeret Mono",monospace; font-size:9.5px; letter-spacing:.12em; padding:4px 8px }
.p__new{ position:absolute; left:6px; top:6px; z-index:2; background:var(--red); color:var(--white);
  font-family:"Azeret Mono",monospace; font-size:9.5px; letter-spacing:.12em; padding:4px 8px }
.p__b{ font-family:"Azeret Mono",monospace; font-size:9.5px; letter-spacing:.11em; opacity:.55;
  text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.p__t{ font-size:12.5px; font-weight:800; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.p__sw{ display:flex; gap:4px; flex-wrap:wrap; margin-top:auto }
.p__sw span{ width:13px; height:13px; border:1.5px solid var(--ink); border-radius:50% }
.p__buy{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; height:34px;
  padding-inline:11px; border:1.5px solid var(--ink); border-radius:999px; background:transparent;
  font-family:"Azeret Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  transition:background .16s var(--e-out) }
.p__buy:hover{ background:var(--acid) }
.p__buy:disabled{ opacity:.38; cursor:not-allowed }

.empty{ grid-column:1/-1; padding:clamp(40px,7vw,110px) 0; text-align:center }
.empty p{ font-size:15px; margin-bottom:16px }

/* ---------- cart.html ---------- */
.is-cart main{ padding-top:calc(var(--tick-h) + var(--nav-h)) }
.ct{ padding:clamp(26px,3.6vw,58px) var(--pad) clamp(52px,7vw,110px) }
.ct__wrap{ display:grid; grid-template-columns:1.5fr .5fr; gap:clamp(24px,4vw,64px); align-items:start;
  margin-top:clamp(20px,2.6vw,40px) }
.ct__list{ border-top:1.5px solid var(--ink) }
.ln{ display:grid; grid-template-columns:96px 1fr auto auto; gap:clamp(12px,2vw,28px); align-items:center;
  padding:clamp(14px,1.8vw,24px) 0; border-bottom:1.5px solid var(--line2) }
.ln__m{ position:relative; aspect-ratio:4/5; overflow:hidden; isolation:isolate; background:var(--bg) }
.ln__m img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply }
.ln__t{ font-size:13.5px; font-weight:800; line-height:1.5 }
.ln__v{ font-family:"Azeret Mono",monospace; font-size:10.5px; letter-spacing:.06em; opacity:.6; margin-top:5px }
.ln__x{ font-family:"Azeret Mono",monospace; font-size:10.5px; letter-spacing:.08em; opacity:.55; margin-top:7px;
  border-bottom:1.5px solid transparent }
.ln__x:hover{ opacity:1; color:var(--red); border-bottom-color:var(--red) }
.qty{ display:flex; align-items:center; border:1.5px solid var(--ink); border-radius:999px; height:38px }
.qty button{ width:36px; height:100%; font-size:15px; line-height:1 }
.qty button:hover{ background:var(--acid); border-radius:999px }
.qty b{ min-width:30px; text-align:center; font-family:"Azeret Mono",monospace; font-size:12px; font-weight:400 }
.ln__p{ font-family:"Archivo",sans-serif; font-weight:900; font-variation-settings:"wdth" 108,"wght" 900;
  font-size:clamp(17px,1.6vw,23px); letter-spacing:-.02em; white-space:nowrap; text-align:right; min-width:6.2em }
.ct__side{ position:sticky; top:calc(var(--tick-h) + var(--nav-h) + 24px);
  border:1.5px solid var(--ink); background:var(--white); box-shadow:7px 7px 0 var(--ink);
  padding:clamp(18px,2.2vw,28px); display:flex; flex-direction:column; gap:14px }
.ct__sum{ display:flex; justify-content:space-between; align-items:baseline;
  border-top:1.5px solid var(--ink); padding-top:14px }
.ct__sum b{ font-family:"Archivo",sans-serif; font-weight:900; font-size:clamp(26px,2.8vw,38px); letter-spacing:-.03em }
.ct__note{ opacity:.6; line-height:1.7 }
.ct__empty{ padding:clamp(40px,7vw,110px) 0; border-top:1.5px solid var(--ink) }
.ct__empty p{ font-size:16px; margin-bottom:20px }

/* ---------- PDP 追記（説明・寸法・素材） ---------- */
.pdp__lead{ font-size:clamp(13.5px,1.05vw,16px); line-height:1.85; font-weight:800; white-space:pre-line }
.pdp__pts{ display:grid; gap:7px; margin-top:2px }
.pdp__pts li{ position:relative; padding-left:17px; font-size:12.5px; line-height:1.7; opacity:.88 }
.pdp__pts li::before{ content:""; position:absolute; left:0; top:.62em; width:8px; height:1.5px; background:var(--red) }
.pdp__was{ font-family:"Azeret Mono",monospace; font-size:13px; opacity:.5; text-decoration:line-through;
  text-decoration-thickness:1.5px; margin-left:4px }
.pdp__saletag{ align-self:flex-start; background:var(--acid); border:1.5px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink); padding:4px 9px;
  font-family:"Azeret Mono",monospace; font-size:10px; letter-spacing:.12em }
.spec{ border-top:1.5px solid var(--ink) }
.spec__h{ display:flex; align-items:baseline; gap:12px; padding:14px 0 8px }
.sizetbl{ width:100%; border-collapse:collapse; font-family:"Azeret Mono",monospace; font-size:11.5px }
.sizetbl th,.sizetbl td{ border:1.5px solid var(--line2); padding:7px 9px; text-align:center }
.sizetbl thead th{ background:var(--bg2); letter-spacing:.06em }
.sizetbl tbody th{ background:var(--ink); color:var(--bg) }
.sizenote{ margin-top:8px; font-size:11.5px; opacity:.6; line-height:1.6 }

@media (min-width:1700px){ .plist{ grid-template-columns:repeat(5,1fr) } }
@media (max-width:1180px){
  .plist{ grid-template-columns:repeat(3,1fr) }
  .ct__wrap{ grid-template-columns:1fr }
  .ct__side{ position:static }
}
@media (max-width:640px){
  .plist{ grid-template-columns:repeat(2,1fr); gap:20px 9px }
  .p__t{ font-size:12px }
  .p__tag{ font-size:10px; padding:4px 7px }
  .fb__lbl{ display:none }
  .fb__end{ margin-left:0 }
  .fb__row{ padding:8px var(--pad) }
  .srch input{ width:120px }
  .sh__stat{ gap:18px }
  .ln{ grid-template-columns:72px 1fr; gap:12px; row-gap:10px }
  .ln .qty{ grid-column:1/2 }
  .ln__p{ grid-column:2/3; text-align:right; align-self:center }
}