body[data-page="store"] {
  --store-cream: #ede7da;
  --store-charcoal: #101113;
  --store-rust: #9e2c21;
}

body[data-page="store"] .store-hero {
  background:
    radial-gradient(circle at 78% 28%, #a6281e40, transparent 31rem),
    linear-gradient(135deg, #090a0c, #17191d 58%, #08090b);
}

.store-hero-mark {
  aspect-ratio: 4 / 5;
  color: var(--store-cream);
  background: #0d0e10;
  border: 1px solid #ffffff24;
  box-shadow: 0 2.5rem 7rem #000b;
  padding: clamp(2rem, 5vw, 4.5rem);
  display: grid;
  align-content: center;
  position: relative;
  overflow: hidden;
}

.store-hero-mark::before,
.store-hero-mark::after {
  content: "";
  position: absolute;
  border: 1px solid #ffffff19;
  transform: rotate(45deg);
}

.store-hero-mark::before { width: 75%; aspect-ratio: 1; top: -24%; right: -22%; }
.store-hero-mark::after { width: 54%; aspect-ratio: 1; bottom: -18%; left: -17%; }
.store-hero-mark span,
.store-hero-mark strong,
.store-hero-mark small { z-index: 1; position: relative; }
.store-hero-mark span { letter-spacing: .32em; text-transform: uppercase; font-size: .78rem; font-weight: 900; }
.store-hero-mark strong { font-family: FS Display, Impact, sans-serif; font-size: clamp(3.6rem, 7vw, 6.8rem); line-height: .82; text-transform: uppercase; }
.store-hero-mark strong em { color: var(--fs-red); font-style: normal; display: block; }
.store-hero-mark small { border-top: 1px solid #ffffff38; margin-top: 2rem; padding-top: 1rem; font-weight: 800; }

.store-status {
  color: var(--fs-ink);
  background: var(--fs-surface);
  border-bottom: 1px solid var(--fs-line);
  padding: 1rem max(1.5rem, calc((100vw - var(--fs-shell-max)) / 2));
  text-align: center;
  font-weight: 800;
}

.store-status::before {
  content: "";
  background: #c98e22;
  border-radius: 50%;
  width: .65rem;
  height: .65rem;
  margin-right: .65rem;
  display: inline-block;
}

[data-store-status="live"] .store-status::before { background: #2f8f5b; }

.store-intro,
.store-collection,
.store-standard,
.store-handoff {
  width: min(calc(100% - 3rem), var(--fs-shell-max));
  margin-inline: auto;
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

.store-intro {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}

.store-intro h2,
.store-collection h2,
.store-standard h2,
.store-handoff h2 {
  margin: 0;
  font-family: FS Display, Impact, sans-serif;
  font-size: clamp(2.8rem, 6vw, 5.8rem);
  line-height: .9;
  text-transform: uppercase;
}

.store-intro-copy { max-width: 45rem; font-family: FS Reading, Georgia, serif; font-size: 1.18rem; }
.store-intro-copy p:first-child { margin-top: 0; }

.store-collection { border-top: 1px solid var(--fs-line); }
.store-section-heading { max-width: 58rem; margin-bottom: 3rem; }
.store-section-heading > p:last-child { max-width: 44rem; }
.store-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); }
.store-product-card { background: var(--fs-surface); border: 1px solid var(--fs-line); min-width: 0; }
.store-product-visual { aspect-ratio: 4 / 5; background: #0c0d0f; display: grid; place-items: center; overflow: hidden; position: relative; }
.store-product-visual::after { content: "Concept"; color: #fff; background: #a6281e; padding: .42rem .7rem; position: absolute; top: 1rem; right: 1rem; letter-spacing: .12em; text-transform: uppercase; font-size: .65rem; font-weight: 900; }
.store-garment { width: 68%; aspect-ratio: 1 / 1.08; background: #202328; clip-path: polygon(22% 4%, 39% 0, 43% 11%, 57% 11%, 61% 0, 78% 4%, 100% 24%, 85% 40%, 76% 30%, 76% 100%, 24% 100%, 24% 30%, 15% 40%, 0 24%); display: grid; place-items: center; filter: drop-shadow(0 1.2rem 1.6rem #000); }
.store-garment span { color: #fff; width: 58%; text-align: center; font-family: FS Display, Impact, sans-serif; font-size: clamp(1.15rem, 2.5vw, 2rem); line-height: .88; text-transform: uppercase; }
.store-garment span strong { color: var(--fs-red); display: block; }
.store-product-card:nth-child(2) .store-garment { background: #d9d2c5; }
.store-product-card:nth-child(2) .store-garment span { color: #151618; }
.store-print { width: 64%; aspect-ratio: 4 / 5; color: #fff; background: linear-gradient(155deg, #1e2227, #08090b); border: .7rem solid #d7cdbd; outline: .85rem solid #18191b; box-shadow: 0 1.5rem 2.5rem #000a; display: grid; place-content: center; text-align: center; font-family: FS Display, Impact, sans-serif; text-transform: uppercase; }
.store-print b { color: var(--fs-red); font-size: clamp(2.3rem, 5vw, 4.8rem); line-height: .8; }
.store-product-copy { padding: 1.4rem; }
.store-product-copy p { color: var(--fs-muted); margin-bottom: 0; }
.store-product-copy h3 { margin: 0; font-size: 1.35rem; }

.store-standard { background: var(--store-charcoal); color: #fff; width: 100%; max-width: none; padding-inline: max(1.5rem, calc((100vw - var(--fs-shell-max)) / 2)); }
.store-standard .root-kicker { color: #fff; }
.store-standard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 3rem; }
.store-standard-grid article { border-top: 3px solid var(--fs-red); padding-top: 1.3rem; }
.store-standard-grid h3 { font-size: 1.2rem; margin: 0 0 .55rem; }
.store-standard-grid p { color: #fff; margin: 0; }

.store-handoff { text-align: center; }
.store-handoff h2 { max-width: 14ch; margin-inline: auto; }
.store-handoff > p:not(.root-kicker) { max-width: 43rem; margin: 1.25rem auto 0; }
.store-handoff .root-actions { justify-content: center; margin-top: 2rem; }
[data-store-link][aria-disabled="true"] { opacity: .62; cursor: not-allowed; pointer-events: none; }
.store-fine { color: var(--fs-muted); font-size: .92rem; }

@media (width <= 820px) {
  .store-intro,
  .store-product-grid,
  .store-standard-grid { grid-template-columns: 1fr; }
  .store-product-visual { aspect-ratio: 5 / 4; }
  .store-garment { width: min(58%, 18rem); }
  .store-print { width: min(52%, 15rem); }
}

@media (width <= 620px) {
  .store-intro,
  .store-collection,
  .store-handoff { width: min(calc(100% - 2rem), var(--fs-shell-max)); }
  .store-hero-mark { width: min(100%, 24rem); }
}