/* ============================================================
   PieSMP Store — catalogue page (route /store)
   Product cards for ranks and crates, a pricing strip, and the
   three-step "how buying works" band. Same gem-cut language as
   the rest of the site: no fills, one accent per product, drop
   shadows instead of borders. Every card is a reveal target —
   app.js runs revealOnScroll over [data-reveal] on this route.
   ============================================================ */

.st-page { padding-bottom: clamp(56px, 8vw, 120px); }

/* The site's page hero carries a negative top margin that tucks it under the
   fixed nav; inner-polish zeroes it only when the hero is a direct child of
   <main>. This page wraps its content in .st-page, so opt back in here — left
   alone the negative margin collapses through body and drags the whole page
   up by the nav height. */
.st-page > .v3-phero { margin-top: 0; }

/* ---------- hero ---------- */
.st-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.st-hero-note {
  margin-top: 18px;
  font: 400 15px/1.6 var(--font-text);
  color: var(--muted);
  max-width: 52ch;
}

/* ---------- section shell ---------- */
.st-block { padding: clamp(48px, 6vw, 84px) 0; }
.st-block + .st-block { padding-top: 0; }
.st-block-head { max-width: 62ch; margin-bottom: clamp(24px, 3vw, 40px); }
.st-block-head h2 {
  font: 900 clamp(30px, 4vw, 54px)/0.94 var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 10px 0 12px;
}
.st-block-head p { font: 400 16px/1.65 var(--font-text); color: var(--muted); margin: 0; }
.st-block-head .v3-eyebrow { color: var(--c-diamond); }

/* ---------- rank grid ---------- */
.st-ranks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
.st-rank {
  --k: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 22px 22px;
  background: var(--c-slab);
  color: var(--text);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  transition: transform .16s ease, box-shadow .16s ease;
  will-change: transform;
}
.st-rank::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--c);
}
.st-rank:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 16px 34px -18px var(--c);
}
.st-rank-name {
  font: 800 22px/1.1 var(--font-mc);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--c);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}
.st-rank-tag { font: 600 12px/1.4 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.st-rank-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; flex: 1; }
.st-rank-perks li { font: 500 14px/1.45 var(--font-text); color: #c9d6e0; padding-left: 16px; position: relative; }
.st-rank-perks li::before { content: "✦"; position: absolute; left: 0; color: var(--c); font-size: 10px; top: 3px; }
.st-rank-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  font: 700 14px var(--font-text);
  color: #0a1117;
  background: var(--c);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  text-decoration: none;
  transition: filter .12s ease, transform .12s ease;
}
.st-rank-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }

/* ---------- crate grid ---------- */
.st-crates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.st-crate {
  --k: 12px;
  position: relative;
  padding: 20px;
  background: var(--c-slab);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .16s ease;
}
.st-crate:hover { transform: translateY(-3px); }
.st-crate-name { font: 800 16px/1.2 var(--font-mc); color: var(--c); text-transform: uppercase; letter-spacing: .02em; }
.st-crate p { font: 400 13.5px/1.5 var(--font-text); color: var(--muted); margin: 0; }
.st-crate-key { margin-top: auto; padding-top: 10px; font: 600 12px/1.4 var(--font-text); color: #9fb3c2; }
.st-crate-key code { font-family: var(--font-mc); font-size: 11.5px; color: var(--c); }

/* ---------- steps ---------- */
.st-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: st; }
.st-steps li {
  --k: 12px;
  counter-increment: st;
  position: relative;
  padding: 22px 22px 22px 60px;
  background: var(--c-slab);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.st-steps li::before {
  content: counter(st, decimal-leading-zero);
  position: absolute;
  left: 22px;
  top: 20px;
  font: 900 22px/1 var(--font-display);
  color: var(--c-diamond);
}
.st-steps h3 { font: 800 17px/1.3 var(--font-text); margin: 0 0 6px; }
.st-steps p { font: 400 14px/1.6 var(--font-text); color: var(--muted); margin: 0; }

/* ---------- closing band ---------- */
.st-close {
  --k: 16px;
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(140deg, rgba(46, 230, 240, .14), rgba(10, 17, 23, .9) 55%);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  box-shadow: inset 0 0 0 1px rgba(46, 230, 240, .22);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.st-close h2 { font: 900 clamp(24px, 3vw, 40px)/1 var(--font-display); text-transform: uppercase; margin: 0 0 8px; }
.st-close p { font: 400 15px/1.6 var(--font-text); color: var(--muted); margin: 0; max-width: 46ch; }
.st-close-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 600px) {
  .st-ranks { grid-template-columns: 1fr; }
  .st-steps li { padding: 18px 18px 18px 54px; }
  .st-close { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .st-rank, .st-crate, .st-rank-cta { transition: none; }
  .st-rank:hover, .st-crate:hover { transform: none; }
}