/* second story — shop.css (Batch 4): shop + product pages */
.shop__head{padding-block:var(--s4) var(--s3);display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap}
.shop__bar{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.shop__bar input[type=search],.shop__bar select{padding:.7rem 1rem;border:1px solid var(--line);border-radius:99px;background:var(--cream);min-width:0}
.shop__bar input[type=search]{flex:1;min-width:160px;max-width:320px}
.shop__bar select{margin-left:auto}
#filtBtn{display:none;padding:.7rem 1.2rem}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem;min-height:2rem}
.chips button{border:1px solid var(--ink);border-radius:99px;padding:.3rem .9rem;font-size:.85rem;font-weight:600}
.chips button::after{content:" ×"}
.shop__body{display:grid;grid-template-columns:240px 1fr;gap:var(--s4);padding-block:var(--s3) var(--s6);align-items:start}
.filters{position:sticky;top:90px;display:grid;gap:1.6rem;max-height:calc(100vh - 110px);overflow:auto;padding-right:.5rem}
.filters fieldset{border:0}.filters legend{font:600 1rem var(--f-display);letter-spacing:-.02em;margin-bottom:.6rem}
.filters label{display:flex;gap:.6rem;align-items:center;padding:.22rem 0;cursor:pointer;font-size:.93rem}
.filters input{accent-color:var(--rust);width:1rem;height:1rem}
.filters__x{display:none}
.pgrid--3{grid-template-columns:repeat(3,1fr)}
.empty{padding:var(--s5) 0;text-align:center}.empty p{margin:1rem auto}

/* product */
.pdp{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s4);padding-block:var(--s4) var(--s5);align-items:start}
.crumbs{font-size:.85rem;opacity:.65;padding-top:var(--s3)}
.gal{display:grid;grid-template-columns:84px 1fr;gap:var(--s2)}
.gal__th{display:grid;gap:.6rem;align-content:start}
.gal__th button{aspect-ratio:3/4;border-radius:4px;background:var(--tone);border:2px solid transparent;font-size:.7rem;font-weight:600;color:rgba(0,0,0,.7)}
.gal__th button[aria-current=true]{border-color:var(--ink)}
.gal__main{aspect-ratio:4/5;border-radius:6px;background:var(--tone);display:grid;place-items:center;position:relative;overflow:hidden}
.gal__main b{font:700 clamp(1.6rem,3vw,2.6rem) var(--f-display);letter-spacing:-.04em;color:rgba(0,0,0,.5);text-align:center;transition:opacity .3s}
.gal__main .play{width:76px;height:76px;border-radius:50%;background:var(--cream);display:grid;place-items:center;margin-top:1rem}
.buy{position:sticky;top:96px;display:grid;gap:1.1rem}
.buy h1{font-size:clamp(1.8rem,3.2vw,2.8rem)}
.buy__price{display:flex;gap:.8rem;align-items:baseline;font:600 1.6rem var(--f-display);letter-spacing:-.03em}
.buy__price s{font:400 1rem var(--f-body);opacity:.5}.buy__price em{font:600 .85rem var(--f-body);font-style:normal;color:var(--sage)}
.pill{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:.25rem .8rem;font-size:.82rem;font-weight:600;background:var(--cream)}
.story-q{font:600 1.15rem/1.3 var(--f-display);letter-spacing:-.02em;color:var(--rust)}
.buy__cta{display:flex;gap:.7rem}.buy__cta .btn{flex:1}
.buy__cta .sv{flex:0 0 52px;padding:0}
.sellerbox{display:flex;gap:1rem;align-items:center;border:1px solid var(--line);border-radius:10px;padding:1rem;background:var(--cream)}
.avatar{width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--cream);display:grid;place-items:center;font:700 1.1rem var(--f-display)}
.prot{border-radius:10px;padding:1.1rem;background:var(--ink);color:var(--cream)}
.prot ul{list-style:none;margin-top:.6rem;display:grid;gap:.4rem;font-size:.9rem;opacity:.85}
details{border-top:1px solid var(--line);padding:1rem 0}details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font:600 1.05rem var(--f-display);letter-spacing:-.02em;list-style:none;display:flex;justify-content:space-between}
summary::after{content:"+";transition:transform .3s}details[open] summary::after{transform:rotate(45deg)}
details>div{padding-top:.8rem}
.mtable{width:100%;border-collapse:collapse;font-size:.93rem}.mtable td{padding:.5rem 0;border-bottom:1px dashed var(--line)}.mtable td:last-child{text-align:right;font-weight:600}
.reviews{display:grid;gap:1rem}.reviews blockquote{border-left:2px solid var(--rust);padding-left:1rem}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--ink);color:var(--cream);padding:.9rem 1.4rem;border-radius:99px;z-index:80;transition:transform .5s var(--ease);display:flex;gap:1rem}
.toast.on{transform:translate(-50%,0)}.toast a{text-decoration:underline}

@media (max-width:980px){
  .shop__body,.pdp{grid-template-columns:1fr}.pgrid--3{grid-template-columns:repeat(2,1fr)}
  #filtBtn{display:inline-flex}.shop__bar select{margin-left:0}
  .filters{position:fixed;inset:0 25% 0 0;z-index:70;background:var(--paper);padding:var(--s3);max-height:none;transform:translateX(-102%);transition:transform .5s var(--ease)}
  body.filters-open .filters{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.4)}.filters__x{display:block;justify-self:end}
  .gal{grid-template-columns:1fr}.gal__th{grid-auto-flow:column;grid-auto-columns:64px;order:2;overflow:auto}.buy{position:static}
}