/* Store page: additions to styles.css */

.st { padding: 130px 0 clamp(64px, 9vw, 120px); }
.st__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 32px; align-items: end; margin-bottom: clamp(32px, 5vw, 56px); }
.st .hero__title { font-size: clamp(36px, 5.6vw, 80px); }
.st .hero__title .line { white-space: nowrap; }
.st__side p { margin: 0 0 20px; color: var(--ink-2); }

.st__shop { position: relative; }
.st__bar { display: flex; gap: 24px; padding: 14px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); color: var(--muted); opacity: .6; }
.st__basket { margin-left: auto; }

/* the shelf: laid out in full, greyed out and switched off */
.st__grid { list-style: none; margin: 0; padding: 20px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; opacity: .42; filter: grayscale(1); user-select: none; }
.si { background: var(--white); border: 1px solid var(--rule); display: flex; flex-direction: column; }
.si__img { border-bottom: 1px solid var(--rule); overflow: hidden; aspect-ratio: 1.6; }
.si__img--type { display: grid; place-items: center; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 20px 20px; }
.si__img--type span { font: 800 clamp(64px, 8vw, 120px)/1 var(--sans); font-variation-settings: "wdth" 125; color: transparent; -webkit-text-stroke: 1.5px var(--ink); letter-spacing: -.04em; }
.si__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.si__code { margin: 0; color: var(--muted); font-size: 11px; }
.si h2 { font-size: 24px; text-transform: none; font-variation-settings: "wdth" 108; letter-spacing: -.01em; line-height: 1; }
.si__body > p:not(.si__code) { margin: 0; color: var(--ink-2); font-size: 15px; }
.si__buy { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rule); }
.si__price { font: 600 15px/1 var(--mono); }
.si .btn { border: 0; cursor: not-allowed; }

.st__soon { position: absolute; inset: 60px 0 0; display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; padding: 24px; pointer-events: none; }
.st__stamp { display: inline-block; padding: 16px 30px; border: 3px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 5px; background: var(--accent); color: var(--ink);
  font: 800 clamp(28px, 4.4vw, 64px)/1 var(--sans); font-variation-settings: "wdth" 118; text-transform: uppercase; letter-spacing: -.02em; transform: rotate(-4deg); }
.st__soon p { margin: 0; max-width: 36ch; background: var(--white); border: 1px solid var(--ink); padding: 10px 14px; font-size: 15px; color: var(--ink-2); pointer-events: auto; }
.st__soon a { color: var(--ink); font-weight: 600; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 3px; }

.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

@media (max-width: 1000px) {
  .st { padding-top: 104px; }
  .st__head { grid-template-columns: 1fr; }
  .st__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .st .hero__title { font-size: 10.6vw; }
  .st__grid { grid-template-columns: 1fr; }
  .st__bar span:nth-child(2) { display: none; }
  .st__soon { place-content: start center; padding-top: 22vh; }
}
.st__cta { display: flex; flex-wrap: wrap; gap: 12px; }