/* Shop — Drop 01. Night field, copper sun on the ridge, three pieces as an editorial row. */

/* drop banner */
.p-shop .drop {
  min-height: 92vh; min-height: 92svh;
  display: flex; align-items: flex-start;
  padding-top: clamp(3rem, 8vw, 6rem);
  padding-bottom: calc(46vh + 2rem);
  overflow: hidden;
  background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 48%, color-mix(in srgb, var(--rust) 42%, var(--night)) 100%);
}
.p-shop .drop-inner { position: relative; z-index: 2; width: 100%; }
.p-shop .drop-num { font-family: var(--display); font-weight: 700; font-stretch: 112%; color: var(--copper); font-size: 1.1rem; margin: 0 0 .6rem; }
.p-shop .drop h1 { max-width: 12ch; }
.p-shop .drop .lede { color: var(--bone-soft); }

.p-shop .count { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.p-shop .count-label { font-weight: 600; margin: 0 0 .4rem; color: var(--bone-soft); }
.p-shop .count-units { display: flex; gap: clamp(1rem, 4vw, 2.5rem); align-items: baseline; }
.p-shop .unit { display: grid; gap: .1rem; }
.p-shop .num {
  font-family: var(--display); font-weight: 800; font-stretch: 112%; letter-spacing: -.03em; line-height: 1;
  font-size: clamp(3rem, 10vw, 6rem); color: #fff; font-variant-numeric: tabular-nums; min-width: 2ch;
}
.p-shop .lbl { font-size: .95rem; color: var(--bone-soft); }
.p-shop .count-open { font-family: var(--display); font-weight: 800; font-stretch: 112%; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1; color: #fff; margin: 0; }
.p-shop .count-when { margin: .9rem 0 0; color: var(--bone-soft); font-size: .95rem; }
.p-shop .count.is-open .count-units, .p-shop .count.is-open .count-label, .p-shop .count.is-open .count-when { display: none; }
.p-shop .drop .btn { color: var(--bone); border-color: var(--bone); }
.p-shop .drop .btn:hover { color: #fff; border-color: #fff; }

/* the sun sits on the far ridge; the ridges clip it, so the ridges draw after it */
.p-shop .sun {
  position: absolute; left: 60%; bottom: 54%;
  width: clamp(96px, 15vw, 190px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--copper) 70%, #fff) 0%, var(--copper) 55%, var(--rust) 100%);
  box-shadow: 0 0 60px 18px color-mix(in srgb, var(--copper) 35%, transparent), 0 0 160px 60px color-mix(in srgb, var(--rust) 30%, transparent);
  transform: translateY(14%);  /* resting position before JS; JS eases it the rest of the way up */
}
@media (max-width: 46rem) { .p-shop .sun { left: auto; right: 6%; bottom: 50%; } }
.p-shop .drop .ridges { z-index: 1; }
.p-shop .ridges svg { overflow: visible; } /* ridge fills run below the box so the parallax lift never shows a gap */

/* pieces: an editorial row — tall tee, square cap, small coin stepped down */
.p-shop .pieces { padding-bottom: clamp(2rem, 6vw, 4rem); }
.p-shop .row { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
.p-shop .piece { display: grid; gap: 1.1rem; align-content: start; }
.p-shop .piece h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: .2rem; }
.p-shop .price { font-family: var(--display); font-weight: 700; font-stretch: 110%; font-size: 1.5rem; color: var(--rust); margin: 0 0 .6rem; }
.p-shop .size-run { color: var(--ink-soft); font-size: .95rem; margin-bottom: .4rem; }
.p-shop .piece .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.p-shop .piece .btn[disabled]:hover { background: var(--copper); border-color: var(--copper); transform: none; }
.p-shop .piece-coin .ph { max-width: 20rem; }

@media (min-width: 42rem) and (max-width: 64rem) {
  .p-shop .row { grid-template-columns: 1fr 1fr; }
  .p-shop .piece-tee { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}
@media (min-width: 64rem) {
  .p-shop .row { grid-template-columns: 5fr 4fr 3fr; align-items: start; }
  .p-shop .piece-cap { margin-top: 5rem; }
  .p-shop .piece-coin { margin-top: 11rem; }
  .p-shop .piece-coin .ph { max-width: none; }
}

/* how it works */
.p-shop .how { border-top: 1px solid var(--sand-deep); }
.p-shop .how-grid { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .p-shop .how-grid { grid-template-columns: 2fr 3fr; gap: clamp(2rem, 6vw, 5rem); } }
.p-shop .how-list { margin: 0; }
.p-shop .how-list > div { padding: 1.2rem 0; border-top: 1px solid var(--sand-deep); }
.p-shop .how-list > div:first-child { border-top: 0; padding-top: 0; }
.p-shop .how-list dt { font-family: var(--display); font-weight: 700; font-stretch: 110%; font-size: 1.2rem; margin-bottom: .3rem; }
.p-shop .how-list dd { margin: 0; color: var(--ink-soft); max-width: var(--measure); }

/* notify */
.p-shop .notify .field { margin-top: 1.5rem; }
.p-shop .notify { border-top: 1px solid var(--sand-deep); }