/* ============================================================
   shop.css — shop toolbar, filter drawer, grid
   ============================================================ */

.shop{display:block}

/* ---------- toolbar ---------- */
.tools{
  position:sticky;top:var(--hdr-h);z-index:120;
  background:rgba(8,8,10,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(233,230,223,.09);
  transition:top .45s var(--e-out);
}
.hdr.is-stuck ~ main .tools{top:64px}
.tools__in{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  max-width:var(--maxw);margin:0 auto;padding:13px var(--pad);
}
.tools__l,.tools__r{display:flex;align-items:center;gap:12px;min-width:0}
.tbtn{
  display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;
  border:1px solid rgba(233,230,223,.18);
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone);transition:all .3s var(--e-out);white-space:nowrap;
}
.tbtn:hover{border-color:var(--bone)}
.tbtn.is-on{background:var(--red);border-color:var(--red);color:#fff}
.tbtn em{font-style:normal;display:grid;place-items:center;min-width:17px;height:17px;
  background:var(--red);color:#fff;border-radius:9px;font-size:9px}
.tbtn.is-on em{background:#fff;color:var(--red)}
.tools__count{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--gray);white-space:nowrap}
.tools__count b{color:var(--bone);font-weight:400}

.selwrap{position:relative;display:inline-flex;align-items:center}
.selwrap select{
  appearance:none;-webkit-appearance:none;height:40px;padding:0 34px 0 16px;
  background:transparent;border:1px solid rgba(233,230,223,.18);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone);cursor:pointer;transition:border-color .3s;
}
.selwrap select:hover{border-color:var(--bone)}
.selwrap select:focus{outline:none;border-color:var(--red-ui)}
.selwrap select option{background:var(--ink-2);color:var(--bone)}
.selwrap svg{position:absolute;right:13px;pointer-events:none;width:10px;stroke:var(--gray);fill:none;stroke-width:1.6}

/* view toggle */
.vtog{display:flex;border:1px solid rgba(233,230,223,.18);height:40px}
.vtog button{width:38px;display:grid;place-items:center;color:var(--steel-2);transition:color .25s,background .25s}
.vtog button.is-on{color:var(--ink);background:var(--bone)}
.vtog svg{width:13px;height:13px}
@media (max-width:860px){.vtog,.tools__count{display:none}}

/* ---------- active chips ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 var(--pad) 14px;max-width:var(--maxw);margin:0 auto}
.chips:empty{display:none}
.chip{
  display:inline-flex;align-items:center;gap:8px;height:29px;padding:0 11px;
  border:1px solid rgba(236,28,36,.45);background:rgba(236,28,36,.08);color:var(--bone);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s;
}
.chip:hover{background:rgba(236,28,36,.2)}
.chip b{color:var(--red-ui);font-size:12px;line-height:1;font-weight:400}

/* ---------- filter drawer ---------- */
.fdraw{
  position:fixed;top:0;left:0;bottom:0;z-index:var(--z-cart);
  width:min(400px,100vw);background:var(--ink-2);
  border-right:1px solid rgba(233,230,223,.1);
  display:flex;flex-direction:column;
  transform:translateX(-101%);transition:transform .7s var(--e-io);
}
.fdraw.is-open{transform:translateX(0)}
.fdraw__top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 26px;border-bottom:1px solid rgba(233,230,223,.09);flex:0 0 auto}
.fdraw__body{flex:1;overflow-y:auto;padding:0 26px}
.fdraw__foot{flex:0 0 auto;padding:20px 26px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid rgba(233,230,223,.09);display:flex;gap:10px}

.fgroup{border-bottom:1px solid rgba(233,230,223,.08)}
.fgroup__hd{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 0;text-align:left;
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--bone);
}
.fgroup__hd i{font-style:normal;width:11px;height:11px;position:relative;flex:0 0 auto}
.fgroup__hd i::before,.fgroup__hd i::after{content:'';position:absolute;background:var(--red-ui);
  transition:transform .4s var(--e-out)}
.fgroup__hd i::before{left:0;top:5px;width:11px;height:1px}
.fgroup__hd i::after{left:5px;top:0;width:1px;height:11px}
.fgroup.is-open .fgroup__hd i::after{transform:rotate(90deg) scaleX(0)}
.fgroup__bd{overflow:hidden;max-height:0;transition:max-height .55s var(--e-io)}
.fgroup.is-open .fgroup__bd{max-height:460px}
.fgroup__inner{padding-bottom:22px;display:flex;flex-direction:column;gap:2px}

.fopt{
  display:flex;align-items:center;gap:12px;padding:8px 0;cursor:pointer;
  font-size:12.5px;color:var(--gray-2);transition:color .25s;
}
.fopt:hover{color:var(--bone)}
.fopt input{position:absolute;opacity:0;width:0;height:0}
.fopt .box{
  width:15px;height:15px;border:1px solid rgba(233,230,223,.3);flex:0 0 auto;position:relative;
  transition:all .25s var(--e-out);
}
.fopt .box::after{content:'';position:absolute;left:4px;top:0px;width:5px;height:9px;
  border:solid var(--ink);border-width:0 1.6px 1.6px 0;transform:rotate(45deg) scale(0);
  transition:transform .25s var(--e-out)}
.fopt input:checked ~ .box{background:var(--red);border-color:var(--red)}
.fopt input:checked ~ .box::after{transform:rotate(45deg) scale(1);border-color:#fff}
.fopt .n{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--steel-2)}
.fopt input:checked ~ .t{color:var(--bone)}

.fsizes{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:22px}
.fsizes .swatch{cursor:pointer}

/* price range */
.frange{padding-bottom:24px}
.frange__vals{display:flex;justify-content:space-between;margin-bottom:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--bone)}
.frange__slider{position:relative;height:26px}
.frange__slider input{
  position:absolute;left:0;top:0;width:100%;height:26px;margin:0;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;
}
.frange__slider input::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;width:15px;height:15px;border-radius:50%;
  background:var(--red-ui);border:2px solid var(--ink);cursor:pointer;
  box-shadow:0 0 0 1px var(--red-ui);transition:transform .2s}
.frange__slider input::-webkit-slider-thumb:hover{transform:scale(1.2)}
.frange__slider input::-moz-range-thumb{pointer-events:auto;width:13px;height:13px;border-radius:50%;
  background:var(--red-ui);border:2px solid var(--ink);cursor:pointer}
.frange__bar{position:absolute;left:0;right:0;top:12px;height:2px;background:rgba(233,230,223,.14)}
.frange__on{position:absolute;top:12px;height:2px;background:var(--red-ui)}

/* ---------- product grid ---------- */
.pgrid{
  display:grid;gap:clamp(14px,1.8vw,34px) var(--gut);
  grid-template-columns:repeat(4,1fr);
  padding-block:clamp(26px,3.4vw,52px);
}
.pgrid[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.pgrid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
@media (max-width:1280px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.pgrid,.pgrid[data-cols="3"]{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){.pgrid,.pgrid[data-cols="3"]{grid-template-columns:1fr}}

.pgrid .pcard{animation:pcIn .7s var(--e-out) both}
@keyframes pcIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.noresults{
  grid-column:1/-1;padding:clamp(50px,9vw,120px) 0;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.noresults .d3{color:var(--steel-2)}

/* load more */
.loadmore{display:flex;flex-direction:column;align-items:center;gap:18px;
  padding-bottom:clamp(50px,8vw,110px)}
.loadmore__bar{width:min(260px,60vw);height:2px;background:rgba(233,230,223,.12);position:relative}
.loadmore__bar i{position:absolute;inset:0;background:var(--red);transform-origin:left;
  transition:transform .7s var(--e-out)}

/* ---------- shop hero title ---------- */
.shophead__title{display:flex;align-items:flex-end;gap:clamp(14px,2.4vw,40px);flex-wrap:wrap}
.shophead__title .d1{line-height:.76;font-size:clamp(4rem,13vw,13rem)}
.shophead__jp{writing-mode:vertical-rl;font-family:var(--jp);font-weight:700;
  font-size:clamp(13px,1.3vw,18px);letter-spacing:.36em;color:var(--red-ui);padding-bottom:12px}
.shophead__note{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--gray);
  padding-bottom:16px;max-width:28ch;line-height:2}