/* F.A.M.E. X — collection pages (rides on styles.css tokens) */
.shop{max-width:min(1500px,100vw);margin:0 auto;padding:118px 4vw 48px}

/* header */
.shop-head{margin-bottom:30px}
.shop-head .eyebrow{margin:0 0 10px}
.shop-title{position:relative;font-family:'Horizon',Impact,sans-serif;text-transform:uppercase;line-height:.9;
  font-size:clamp(44px,8vw,120px);color:var(--white);margin:0}
/* always-on RGB-split glitch (reuses the wall WE GO keyframes from styles.css) */
.shop-title[data-ab]::before{animation:wego-r 3.4s steps(1,end) infinite}
.shop-title[data-ab]::after{animation:wego-c 3.4s steps(1,end) infinite}
.shop-count{color:var(--dim);font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:14px 0 0}
.shop-tabs{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px}
.shop-tab{color:var(--dim);text-decoration:none;border:1px solid #3a3a40;padding:9px 16px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;transition:all .15s ease}
.shop-tab:hover{border-color:var(--white);color:var(--white)}
.shop-tab.is-active{background:var(--white);border-color:var(--white);color:var(--black)}

/* grid */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.shop-card{text-decoration:none;display:block}
.shop-card-img{aspect-ratio:4/5;background:var(--panel);border:1px solid #202024;overflow:hidden;transition:border-color .2s ease}
.shop-card:hover .shop-card-img{border-color:var(--accent)}
.shop-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.shop-card:hover .shop-card-img img{transform:scale(1.05)}
/* pants: 2:3 render (pant centred, ~26% grey studio margin each side) in a 4:5 card.
   Show the full pant via contain over a matching STUDIO-GREY gradient (a blurred *cover*
   copy would crop to the colourful pant centre → coloured side bars that don't match the
   grey edge — that was the boxy seam). The image's grey margins then feather into the
   identical grey over a wide 2→22% band, so the rectangle dissolves with no visible edge. */
.shop-card-img.is-pad{position:relative}
/* fill = the image's OWN sampled studio grey (--pad-bg, set by samplePadBg per product) so
   there's no shading step; #d4d3d5 is only the fallback before the sample lands / on taint */
.shop-card-img.is-pad::before{content:'';position:absolute;inset:0;z-index:0;
  background:var(--pad-bg,#d4d3d5)}
.shop-card-img.is-pad img{position:relative;z-index:1;object-fit:contain;
  -webkit-mask-image:linear-gradient(to right,transparent 2%,#000 22%,#000 78%,transparent 98%);
  mask-image:linear-gradient(to right,transparent 2%,#000 22%,#000 78%,transparent 98%)}
.shop-card-info{padding-top:11px}
.shop-card-name{display:block;font-family:'Horizon',Impact,sans-serif;text-transform:uppercase;color:var(--white);
  font-size:15px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-card-meta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:4px;
  color:var(--dim);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.shop-card-price{color:var(--accent);font-weight:600;white-space:nowrap}

.shop-empty{padding:60px 0;color:var(--dim);text-align:center;grid-column:1/-1}
.shop-empty[hidden]{display:none}
.shop-empty a{color:var(--accent);text-decoration:none}

.marquee-static{position:static}

@media (max-width:600px){
  .shop{padding-top:96px}
  .shop-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}