/* Store page: a normal scrolling page (the home and archive pages are fixed to the viewport). */

html, body {
  height: auto;
  overflow: auto;
}

/* Fixed nav floats over photos while scrolling: invert against whatever is behind it. */
.nav { mix-blend-mode: difference; }
.nav a { color: #fff; }

.store {
  max-width: 1100px;
  margin: 0 auto;
  padding: 120px 20px 120px;
}

/* ---- Heading ------------------------------------------------------------ */
.store-head { text-align: center; }
.store-head h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
}
.store-head p {
  max-width: 640px;
  margin: 26px auto 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-dim);
}
.store-head p + p { margin-top: 18px; }
.store-back a { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg); text-decoration: none; }
.store-back a:hover { opacity: 0.4; }
.store-thanks { min-height: 100vh; display: flex; align-items: center; justify-content: center; }

/* ---- Gallery ------------------------------------------------------------ */
.store-gallery { margin-top: 56px; }
.store-main img.swap { animation: develop 0.17s steps(5, end) both; }
.store-main { aspect-ratio: 1967 / 1181; overflow: hidden; }
.store-main img { display: block; width: 100%; height: 100%; object-fit: contain; }

.store-gallery { position: relative; }
.store-strip {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.store-strip::-webkit-scrollbar { display: none; }

.thumb {
  position: relative;
  flex: 0 0 auto;
  height: 76px;
  aspect-ratio: 3 / 2;
  scroll-snap-align: center;
  overflow: hidden;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 0.2s ease;
}
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { outline-color: var(--hair); }
.thumb.active { outline-color: var(--fg); }

/* ---- Facts -------------------------------------------------------------- */
.store-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 56px;
  margin-top: 72px;
  text-align: center;
}
.store-facts dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.store-facts dd {
  margin-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.1;
}

.store-rule { border: 0; border-top: 1px solid var(--rule); margin: 56px 0; }

/* ---- Purchase ----------------------------------------------------------- */
.store-status {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.store-delivery {
  margin: 36px 0 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
}
.store-delivery legend {
  width: 100%;
  margin-bottom: 14px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.store-delivery label { cursor: pointer; }
.store-delivery input { position: absolute; opacity: 0; pointer-events: none; }
.store-delivery span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.store-delivery em { font-style: normal; margin-left: 6px; }
.store-delivery label:hover span { color: var(--fg); }
.store-delivery input:checked + span { color: var(--fg); border-bottom-color: var(--fg); }
.store-delivery input:focus-visible + span { outline: 1px solid var(--fg); outline-offset: 4px; }

.store-left {
  min-height: 1.4em;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.store-fine {
  margin-top: 28px;
  text-align: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
}

.store-editions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}
@media (min-width: 768px) { .store-editions { grid-template-columns: 1fr 1fr; } }

.store-card {
  position: relative;
  padding: 48px 24px;
  text-align: center;
  border: 1px solid var(--card-edge);
  border-radius: 20px;
}
.store-kicker {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.store-card h2 {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
}
.store-meta {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 1.9;
  color: var(--fg-dim);
}
.store-price {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.06em;
}
.store-price span { font-size: 10px; letter-spacing: 0.14em; color: var(--fg-dim); }

.store-cta {
  position: static;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color 0.2s ease;
}
.store-cta:hover { color: var(--fg); }
.store-cta[disabled] { opacity: 0.5; cursor: progress; }
.store-cta[data-soldout] { cursor: default; }

/* The whole card is the button: the CTA's hit area stretches over the card. */
.store-card { cursor: pointer; transition: border-color 0.25s linear; }
.store-card:has(.store-cta[data-soldout]) { cursor: default; }
.store-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.store-card:hover { border-color: var(--fg-dim); }
.store-card:hover .store-cta:not([data-soldout]) { color: var(--fg); }
.store-cta:focus-visible { outline: none; }
.store-cta:focus-visible::after { outline: 1px solid var(--fg); outline-offset: 4px; border-radius: 20px; }

.store-note {
  min-height: 1.4em;
  margin-top: 28px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
}

:root { --card-edge: rgba(0, 0, 0, 0.12); }
@media (prefers-color-scheme: dark) { :root { --card-edge: rgba(255, 255, 255, 0.16); } }

@media (max-width: 768px) {
  .store { padding-top: 100px; }
  .store-head p { font-size: 17px; }
}