/* CanCapperZ /shop — dark navy catalog. Linked after style.css + charmz-combos.css.
   No inline styles (CSP style-src 'self'). */

:root{
  --shop-navy:#0b1220;
  --shop-navy-2:#101a2e;
  --shop-slate:#161f33;
  --shop-ink:#e8eef8;
  --shop-muted:#b7c0d4;
  --shop-gold:#e0c07a;
  --shop-blue:rgba(80,150,255,.45);
  --shop-orange-glow:rgba(255,106,19,.35);
}

.shop-body{
  background:var(--shop-navy);
  color:var(--shop-ink);
}

/* ----- Page stage ----- */
.shop-page{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(70% 50% at 50% -10%,rgba(255,106,19,.22),transparent 58%),
    radial-gradient(50% 40% at 100% 0%,rgba(60,130,255,.18),transparent 55%),
    radial-gradient(45% 35% at 0% 20%,rgba(60,130,255,.12),transparent 50%),
    linear-gradient(180deg,var(--shop-navy) 0%,var(--shop-navy-2) 45%,#0d1526 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:2.4rem 0 4.5rem;
  overflow:hidden;
}
.shop-page::before{
  content:"";
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1.2px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(80% 60% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(80% 60% at 50% 0%,#000 20%,transparent 75%);
  opacity:.7;
}
.shop-page .wrap{position:relative;z-index:1}

.shop-page .kicker{color:var(--shop-gold)}
.shop-page h1{
  color:#fff;
  text-shadow:0 6px 30px rgba(0,0,0,.45),0 0 40px rgba(255,106,19,.18);
}
.shop-lead{
  color:var(--shop-muted);
  margin:0 auto 1.75rem;
  max-width:40rem;
  text-align:center;
  font-size:1.02rem;
}
.shop-lead strong{color:#fff;font-weight:800}

/* ----- Sticky toolbar ----- */
.shop-toolbar{
  position:sticky;top:56px;z-index:40;
  margin:0 auto 1.5rem;
  padding:.9rem 1rem 1rem;
  border-radius:22px;
  background:rgba(12,18,32,.94);
  border:1px solid rgba(120,180,255,.22);
  box-shadow:
    0 0 0 1px rgba(255,106,19,.1),
    0 16px 40px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.1);
}
@supports ((-webkit-backdrop-filter:blur(16px)) or (backdrop-filter:blur(16px))){
  .shop-toolbar{
    background:rgba(12,18,32,.72);
    -webkit-backdrop-filter:blur(16px) saturate(1.35);
    backdrop-filter:blur(16px) saturate(1.35);
  }
}

.shop-search{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin:0 0 .85rem;
}
.shop-search-label{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--shop-gold);
}
.shop-search-input{
  width:100%;
  font:inherit;
  font-size:1rem;
  color:#fff;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:.75rem 1.15rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 0 3px transparent;
}
.shop-search-input::placeholder{color:#8b95ab}
.shop-search-input:hover{border-color:rgba(255,106,19,.45)}
.shop-search-input:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:2px;
  border-color:var(--orange);
}

.shop-toolbar-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.75rem 1rem;
}

.shop-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}
.shop-chips-legend,
.shop-grid-legend{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.shop-chip{
  font:inherit;
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--shop-ink);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:.42rem .85rem;
  cursor:pointer;
  box-shadow:0 0 0 0 transparent;
}
.shop-chip:hover{
  border-color:rgba(255,180,80,.5);
  color:#fff;
}
.shop-chip[aria-pressed="true"]{
  color:#fff;
  background:linear-gradient(180deg,var(--orange-2),var(--orange));
  border-color:transparent;
  box-shadow:0 6px 18px rgba(255,106,19,.4),0 0 16px rgba(255,106,19,.25);
}
.shop-chip:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
}

.shop-grid-toggle{
  display:flex;
  align-items:center;
  gap:.35rem;
  margin:0;
  padding:0;
  border:0;
}
.shop-grid-btn{
  width:2.5rem;height:2.5rem;
  display:inline-grid;place-items:center;
  font:inherit;
  color:#d5dbe8;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  cursor:pointer;
  padding:0;
}
.shop-grid-btn svg{width:1.15rem;height:1.15rem;display:block}
.shop-grid-btn:hover{border-color:rgba(255,180,80,.5);color:#fff}
.shop-grid-btn[aria-pressed="true"]{
  color:#fff;
  background:rgba(255,106,19,.22);
  border-color:rgba(255,106,19,.7);
  box-shadow:0 0 14px rgba(255,106,19,.3);
}
.shop-grid-btn:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
}

/* Show 1/2-up on small screens, 2/3/4-up from 760px. */
.shop-grid-desktop{display:none}
.shop-grid-mobile{display:flex;gap:.35rem}
@media (min-width:760px){
  .shop-grid-mobile{display:none}
  .shop-grid-desktop{display:flex;gap:.35rem}
}

.shop-count{
  margin:.7rem 0 0;
  font-size:.86rem;
  font-weight:700;
  color:var(--shop-muted);
  text-align:left;
}
.shop-count strong{color:#fff}

.shop-noscript{
  margin:0 auto 1.25rem;
  max-width:40rem;
  text-align:center;
  color:var(--shop-gold);
  font-size:.92rem;
  font-weight:700;
}

/* ----- Grid ----- */
.shop-grid{
  display:grid;
  gap:1.1rem;
  grid-template-columns:repeat(var(--shop-cols, 2), minmax(0,1fr));
  align-items:stretch;
}
/* No-JS / default: 1-up on very narrow, 2-up otherwise, 3-up desktop. */
@media (max-width:419px){
  .shop-grid{--shop-cols:2}
}
@media (min-width:760px){
  .shop-grid{--shop-cols:3;gap:1.25rem}
}
.shop-grid[data-cols="1"]{--shop-cols:1}
.shop-grid[data-cols="2"]{--shop-cols:2}
.shop-grid[data-cols="3"]{--shop-cols:3}
.shop-grid[data-cols="4"]{--shop-cols:4}
/* Mobile clamps: 3- and 4-up only apply from 760px. A saved "4" falls back to 2. */
@media (max-width:759px){
  .shop-grid[data-cols="3"],
  .shop-grid[data-cols="4"]{--shop-cols:2}
}

.shop-group-title{
  grid-column:1 / -1;
  margin:1.15rem 0 .15rem;
  font-size:clamp(1.25rem,3.4vw,1.7rem);
  font-weight:900;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#fff;
  display:flex;
  align-items:center;
  gap:.75rem;
}
.shop-group-title::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(255,106,19,.55),rgba(80,150,255,.15),transparent);
}
.shop-group-title:first-child{margin-top:.15rem}
.shop-group-title[hidden]{display:none}

/* ----- Cards ----- */
.shop-card{
  display:flex;
  flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  color:var(--shop-ink);
  min-width:0;
}
.shop-card:hover{
  transform:translateY(-5px);
  border-color:rgba(255,106,19,.5);
  box-shadow:
    0 18px 40px rgba(0,0,0,.4),
    0 0 24px rgba(255,106,19,.18),
    0 0 32px rgba(60,130,255,.1);
}
.shop-card[hidden]{display:none}

.shop-card-media{
  position:relative;
  background:
    radial-gradient(60% 70% at 80% 0%,rgba(255,106,19,.28),transparent 60%),
    radial-gradient(60% 70% at 10% 100%,rgba(60,130,255,.28),transparent 60%),
    #1c2433;
  padding:14px;
}
.shop-card-media img{
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:12px;
  background:transparent;
  display:block;
  box-shadow:none;
}
.shop-card-media a{
  display:block;
  position:relative;
  z-index:0;
}
.shop-card-media a:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:12px;
}
/* Beat `.shop-card-media a {display:block}` so collages actually grid. */
.shop-card-media a.shop-collage{
  display:grid;
  gap:6px;
  width:100%;
  aspect-ratio:1;
  align-items:stretch;
  justify-items:stretch;
}
.shop-card-media a.shop-collage-2{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr;
  align-items:center;
}
.shop-card-media a.shop-collage-3{
  grid-template-columns:1.2fr 1fr;
  grid-template-rows:1fr 1fr;
}
.shop-card-media a.shop-collage-3 img:first-child{
  grid-row:1 / -1;
}
.shop-card-media a.shop-collage-4{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
}
.shop-card-media a.shop-collage img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:contain;
  min-height:0;
  min-width:0;
  background:rgba(8,12,20,.25);
  border-radius:10px;
}
.shop-card-media::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:12px;
  box-shadow:inset 0 0 48px 10px rgba(8,12,20,.4);
  pointer-events:none;
  z-index:1;
}
.shop-card .badge-render{
  left:1.05rem;
  bottom:.85rem;
  z-index:2;
}

/* Combo collage layout lives on `.shop-card-media a.shop-collage`. */

.shop-card-body{
  padding:.95rem 1rem 1.15rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.4rem;
  flex:1;
}
.shop-cat{
  margin:0;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--shop-gold);
  background:rgba(224,192,122,.1);
  border:1px solid rgba(224,192,122,.32);
  border-radius:999px;
  padding:.18rem .6rem;
}
.shop-card h3{
  margin:0;
  font-size:clamp(1.02rem,2.4vw,1.28rem);
  font-weight:900;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:.01em;
  color:#fff;
  line-height:1.15;
}
.shop-card h3 a{
  color:inherit;
  text-decoration:none;
}
.shop-card h3 a:hover,
.shop-card h3 a:focus-visible{
  color:var(--orange);
  text-decoration:underline;
  text-underline-offset:3px;
}
.shop-desc{
  margin:0;
  color:var(--shop-muted);
  font-size:.9rem;
  flex:1;
  line-height:1.45;
}
.shop-price{
  margin:.15rem 0 0;
  font-size:.95rem;
  font-weight:800;
  color:var(--shop-gold);
  letter-spacing:.01em;
  white-space:nowrap;
}
.shop-price-soon,
.shop-price-tbd{color:#ffc49a}
.shop-price-mto{color:var(--shop-gold)}

.shop-card .actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.45rem;
  margin-top:.45rem;
  width:100%;
}
.shop-card .btn{
  padding:.55rem 1rem;
  font-size:.86rem;
}
.shop-card .btn-ghost{
  background:rgba(255,255,255,.05);
  color:#fff;
  border-color:rgba(255,255,255,.28);
}
.shop-card .btn-ghost:hover{border-color:#fff;color:#fff}

.shop-empty{
  grid-column:1 / -1;
  text-align:center;
  padding:2.5rem 1rem;
  color:var(--shop-muted);
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.16);
  border-radius:18px;
}
.shop-empty[hidden]{display:none}
.shop-empty h2{
  color:#fff;
  margin:0 0 .4rem;
  font-size:1.4rem;
}
.shop-empty p{margin:0}

.shop-fine{
  margin:2rem auto 0;
  max-width:42rem;
  text-align:center;
  color:var(--shop-muted);
  font-size:.88rem;
}

@media (max-width:419px){
  .shop-toolbar{padding:.75rem .75rem .85rem;border-radius:18px;top:52px}
  .shop-chip{font-size:.78rem;padding:.38rem .7rem}
  .shop-card-body{padding:.8rem .75rem 1rem}
  .shop-card h3{font-size:1rem}
  .shop-desc{font-size:.84rem}
  .shop-page{padding:1.6rem 0 3rem}
  .shop-grid[data-cols="1"] .shop-card-media img,
  .shop-grid[data-cols="1"] .shop-collage{aspect-ratio:4/3}
}
@media (min-width:760px){
  .shop-search{max-width:none}
  .shop-grid[data-cols="4"] .shop-card h3{font-size:1.02rem}
  .shop-grid[data-cols="4"] .shop-desc{font-size:.82rem}
  .shop-grid[data-cols="4"] .shop-card-media{padding:10px}
  .shop-grid[data-cols="4"] .shop-card-media::after{inset:10px}
}

@media (prefers-reduced-motion:reduce){
  .shop-card,
  .shop-card:hover,
  .shop-chip,
  .shop-grid-btn{transition:none;transform:none}
}

/* Current-page Shop link (used on shop.html). */
.nav-links a[aria-current="page"]{color:var(--orange)}

.shop-nowrap{white-space:nowrap}

@media (max-width:419px){
  .shop-card .actions{flex-direction:column;align-items:stretch}
  .shop-card .btn{width:100%;font-size:.8rem;padding:.5rem .7rem;white-space:normal;text-wrap:balance}
  .shop-price{font-size:.86rem}
}