.merch-page {
  --merch-paper: #f4f2eb;
  --merch-white: #fffefa;
  --merch-ink: #090909;
  --merch-red: #fa3c2f;
  --merch-blue: #1f78ff;
  --merch-yellow: #f5d84c;
  background: var(--merch-paper);
  overflow-x: clip;
}

.merch-page main {
  overflow: clip;
}

.merch-page .system-bar {
  background: rgba(244, 242, 235, 0.95);
}

.merch-page .nav-links a[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
}

.merch-system-label {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.merch-bag-link {
  border-left: 1px solid var(--line);
}

.merch-hero {
  display: grid;
  min-height: calc(100vh - 72px);
  border-bottom: 1px solid var(--ink);
}

.merch-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 38rem;
  align-content: space-between;
  background-color: var(--merch-paper);
  background-size: 56px 56px;
  padding: clamp(1.4rem, 5vw, 5.4rem);
}

.merch-hero-copy > .pixel {
  margin: 0;
}

.merch-hero h1 {
  max-width: 9ch;
  margin: auto 0;
  font-size: clamp(4.9rem, 14vw, 12.5rem);
  font-weight: 900;
  letter-spacing: -0.09em;
  line-height: 0.73;
  text-transform: uppercase;
}

.merch-hero h1 span {
  color: var(--merch-red);
}

.merch-hero-bottom {
  display: grid;
  gap: 1.4rem;
  align-items: end;
}

.merch-hero-bottom p {
  max-width: 36rem;
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.14;
}

.merch-arrow-link {
  display: flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.merch-arrow-link span {
  font-size: 1.4rem;
}

.merch-arrow-link:hover,
.merch-arrow-link:focus-visible {
  padding-inline: 0.8rem;
  background: var(--ink);
  color: var(--paper);
  outline: 0;
}

.merch-hero-product {
  position: relative;
  display: grid;
  min-height: 35rem;
  overflow: hidden;
  place-items: center;
  border-top: 1px solid var(--ink);
  background: #efede7;
  padding: 0;
  text-align: left;
}

.merch-hero-product::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0 solid var(--merch-blue);
  transition: border-width 180ms ease;
  pointer-events: none;
}

.merch-hero-product:hover::after,
.merch-hero-product:focus-visible::after {
  border-width: 0.55rem;
}

.merch-hero-product:focus-visible {
  outline: 0;
}

.merch-hero-media {
  position: absolute;
  inset: 0;
  display: block;
  background: #efede7;
}

.merch-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: contain;
  object-position: center;
  transform: scale(1.015);
  transition:
    opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 5.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.merch-hero-media img.is-active {
  z-index: 1;
  opacity: 1;
  transform: scale(1);
}

.merch-hero-product:hover .merch-hero-media img.is-active,
.merch-hero-product:focus-visible .merch-hero-media img.is-active {
  transform: scale(1.025);
}

.merch-hero-progress {
  position: absolute;
  z-index: 2;
  top: 1rem;
  right: 1rem;
  left: 1rem;
  height: 2px;
  overflow: hidden;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
}

.merch-hero-progress::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}

.merch-hero-progress.is-running::after {
  animation: merch-hero-progress 5.2s linear forwards;
}

@keyframes merch-hero-progress {
  to { transform: scaleX(1); }
}

.merch-hero-tag,
.merch-hero-state {
  position: absolute;
  z-index: 2;
  bottom: 1rem;
  min-height: 2.15rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  background: var(--merch-white);
  padding: 0 0.75rem;
}

.merch-hero-tag {
  left: 1rem;
}

.merch-hero-state {
  right: 1rem;
  background: var(--ink);
  color: var(--paper);
}

.merch-status {
  display: grid;
  gap: 0.6rem;
  align-items: center;
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  padding: 0.9rem clamp(1rem, 3vw, 2.4rem);
}

.merch-status p,
.merch-status a {
  margin: 0;
}

.merch-status .pixel {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.merch-status .pixel span {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--merch-yellow);
  box-shadow: 0 0 0 0.22rem rgba(245, 216, 76, 0.2);
}

.merch-status > p:not(.pixel) {
  color: rgba(251, 250, 245, 0.7);
  font-size: 0.86rem;
}

.merch-status a {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.merch-category-nav {
  position: sticky;
  top: 72px;
  z-index: 15;
  display: grid;
  border-bottom: 1px solid var(--ink);
  background: rgba(244, 242, 235, 0.96);
  backdrop-filter: blur(12px);
}

.merch-category-nav > .pixel {
  display: none;
  margin: 0;
  align-items: center;
  border-right: 1px solid var(--ink);
  padding: 0 1rem;
}

.merch-category-buttons {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.merch-category-buttons::-webkit-scrollbar {
  display: none;
}

.merch-category-buttons button {
  display: flex;
  flex: 0 0 auto;
  min-height: 3.6rem;
  min-width: 8.8rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-right: 1px solid var(--ink);
  padding: 0 1rem;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.merch-category-buttons button span {
  color: rgba(9, 9, 9, 0.48);
}

.merch-category-buttons button:hover,
.merch-category-buttons button:focus-visible,
.merch-category-buttons button.is-active {
  background: var(--ink);
  color: var(--paper);
  outline: 0;
}

.merch-category-buttons button:hover span,
.merch-category-buttons button:focus-visible span,
.merch-category-buttons button.is-active span {
  color: rgba(251, 250, 245, 0.55);
}

.merch-inventory {
  padding: clamp(2.2rem, 6vw, 6rem) clamp(1rem, 3vw, 2.6rem);
}

.merch-inventory-head {
  display: grid;
  gap: 2rem;
  align-items: end;
  margin-bottom: 2rem;
}

.merch-inventory-head p,
.merch-inventory-head h2 {
  margin: 0;
}

.merch-inventory-head h2 {
  margin-top: 1rem;
  font-size: clamp(4rem, 11vw, 9.5rem);
  font-weight: 900;
  letter-spacing: -0.085em;
  line-height: 0.76;
  text-transform: uppercase;
}

.merch-inventory-tools {
  display: grid;
  gap: 1rem;
}

.merch-inventory-tools label {
  display: grid;
  gap: 0.55rem;
}

.merch-inventory-tools input,
.merch-inventory-tools select {
  width: 100%;
  min-height: 3.25rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: 0 0.9rem;
}

.merch-inventory-tools input:focus,
.merch-inventory-tools select:focus {
  background: var(--merch-white);
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.merch-results {
  margin: 0 0 0.75rem;
  color: rgba(9, 9, 9, 0.55);
}

.merch-product-grid {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.merch-product-card {
  display: grid;
  grid-template-rows: minmax(22rem, 62vw) auto;
  min-width: 0;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--merch-white);
}

.merch-product-card[hidden] {
  display: none;
}

.merch-card-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}

.merch-product-image {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  background: #efede7;
  touch-action: pan-y pinch-zoom;
}

.merch-card-open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1), filter 180ms ease;
}

.merch-card-open:hover img,
.merch-card-open:focus-visible img {
  transform: scale(1.018);
}

.merch-card-open:focus-visible,
.merch-product-info:focus-visible {
  outline: 0.35rem solid var(--merch-blue);
  outline-offset: -0.35rem;
}

.merch-card-badge,
.merch-card-number {
  position: absolute;
  top: 0.8rem;
  display: grid;
  min-height: 1.9rem;
  place-items: center;
  border: 1px solid var(--ink);
  background: var(--merch-white);
  padding: 0 0.55rem;
}

.merch-card-badge {
  left: 0.8rem;
}

.merch-card-number {
  right: 0.8rem;
}

.merch-card-image-nav {
  position: absolute;
  inset: 50% 0.75rem auto;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  transform: translateY(-50%);
}

.merch-card-image-nav button,
.merch-image-arrow {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border: 1px solid rgba(9, 9, 9, 0.38);
  border-radius: 50%;
  background: rgba(255, 254, 250, 0.78);
  color: rgba(9, 9, 9, 0.58);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  backdrop-filter: blur(8px);
  transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
}

.merch-card-image-nav button:hover,
.merch-card-image-nav button:focus-visible,
.merch-image-arrow:hover,
.merch-image-arrow:focus-visible {
  background: var(--ink);
  color: var(--paper);
  outline: 0;
}

.merch-card-image-nav svg,
.merch-image-arrow svg {
  width: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.5;
}

.merch-card-image-count {
  position: absolute;
  right: 0.85rem;
  bottom: 0.8rem;
  z-index: 3;
  min-height: 1.8rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(9, 9, 9, 0.42);
  background: rgba(255, 254, 250, 0.84);
  padding: 0 0.5rem;
}

.merch-product-info {
  display: grid;
  width: 100%;
  min-height: 100%;
  align-content: space-between;
  gap: 0.9rem;
  background: var(--merch-white);
  padding: 1rem;
  text-align: left;
}

.merch-product-info > div {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.merch-product-info h3,
.merch-product-info p {
  margin: 0;
}

.merch-product-info h3 {
  max-width: 14ch;
  font-size: clamp(1.55rem, 3vw, 2.65rem);
  letter-spacing: -0.055em;
  line-height: 0.92;
  text-transform: uppercase;
}

.merch-product-info .pixel {
  color: rgba(9, 9, 9, 0.52);
  line-height: 1.35;
  white-space: normal;
}

.merch-product-swatches {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.merch-product-swatches i {
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
}

.merch-product-swatches i[data-swatch="White"] {
  background: var(--merch-white);
}

.merch-card-footline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(9, 9, 9, 0.14);
  padding-top: 0.8rem;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.merch-card-footline span:last-child {
  color: rgba(9, 9, 9, 0.5);
}

.merch-empty {
  display: grid;
  min-height: 22rem;
  place-items: center;
  align-content: center;
  border: 1px solid var(--ink);
  text-align: center;
}

.merch-empty h3 {
  margin: 0.75rem 0 1.5rem;
  font-size: clamp(2.8rem, 8vw, 6rem);
  letter-spacing: -0.07em;
  line-height: 0.82;
  text-transform: uppercase;
}

.merch-empty button {
  min-height: 2.8rem;
  border: 1px solid var(--ink);
  padding: 0 1rem;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.merch-empty button:hover,
.merch-empty button:focus-visible {
  background: var(--ink);
  color: var(--paper);
  outline: 0;
}

.merch-manifesto {
  display: grid;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.merch-manifesto-mark {
  display: grid;
  min-height: 22rem;
  place-items: center;
  border-bottom: 1px solid rgba(251, 250, 245, 0.3);
  background-image:
    linear-gradient(to right, rgba(251, 250, 245, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(251, 250, 245, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
}

.merch-manifesto-mark img {
  width: min(19rem, 60vw);
  animation: merch-slow-spin 32s linear infinite;
}

.merch-manifesto > div:last-child {
  display: grid;
  align-content: center;
  padding: clamp(2rem, 7vw, 7rem);
}

.merch-manifesto p,
.merch-manifesto blockquote {
  margin: 0;
}

.merch-manifesto blockquote {
  margin: clamp(2rem, 5vw, 4rem) 0;
  font-size: clamp(3.4rem, 9vw, 8.6rem);
  font-weight: 900;
  letter-spacing: -0.08em;
  line-height: 0.77;
  text-transform: uppercase;
}

.merch-manifesto > div:last-child > p:last-child {
  max-width: 42rem;
  color: rgba(251, 250, 245, 0.7);
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  line-height: 1.2;
}

.merch-recommendations {
  padding: clamp(2.5rem, 7vw, 7rem) clamp(1rem, 3vw, 2.6rem);
}

.merch-recommendations > header {
  display: grid;
  gap: 1.4rem;
  align-items: end;
  margin-bottom: 2rem;
}

.merch-recommendations h2,
.merch-recommendations p {
  margin: 0;
}

.merch-recommendations h2 {
  margin-top: 0.85rem;
  font-size: clamp(3.6rem, 9vw, 8rem);
  letter-spacing: -0.075em;
  line-height: 0.8;
  text-transform: uppercase;
}

.merch-recommendations > header > p {
  max-width: 20rem;
  font-size: 1.05rem;
}

.merch-recommendation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.merch-recommendation-card {
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--merch-white);
}

.merch-recommendation-card button {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: left;
}

.merch-recommendation-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  border-bottom: 1px solid var(--ink);
}

.merch-recommendation-card span {
  padding: 0.75rem;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.merch-recommendation-card button:hover,
.merch-recommendation-card button:focus-visible {
  background: var(--ink);
  color: var(--paper);
  outline: 0;
}

.merch-release-notes {
  display: grid;
  border-top: 1px solid var(--ink);
  background-color: var(--merch-paper);
  background-size: 52px 52px;
}

.merch-release-notes > div:first-child {
  display: grid;
  align-content: end;
  padding: clamp(2rem, 6vw, 5rem);
}

.merch-release-notes h2,
.merch-release-notes p {
  margin: 0;
}

.merch-release-notes h2 {
  margin-top: 1.4rem;
  font-size: clamp(3.5rem, 9vw, 8rem);
  letter-spacing: -0.08em;
  line-height: 0.78;
  text-transform: uppercase;
}

.merch-release-grid {
  display: grid;
  border-top: 1px solid var(--ink);
}

.merch-release-grid article {
  min-height: 16rem;
  border-bottom: 1px solid var(--ink);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}

.merch-release-grid h3 {
  margin: 2rem 0 0.75rem;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.06em;
  line-height: 0.9;
  text-transform: uppercase;
}

.merch-release-grid p {
  max-width: 34rem;
  line-height: 1.25;
}

/* Product dialog */
.merch-product-dialog {
  width: min(96rem, 100vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  overflow: auto;
  border: 0;
  border-left: 1px solid var(--ink);
  background: var(--merch-paper);
  color: var(--ink);
  padding: 0;
}

.merch-product-dialog[open] {
  animation: merch-dialog-in 220ms ease both;
}

.merch-product-dialog::backdrop {
  background: rgba(9, 9, 9, 0.68);
  backdrop-filter: blur(4px);
}

.merch-dialog-shell {
  min-height: 100%;
}

.merch-dialog-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ink);
  background: rgba(244, 242, 235, 0.96);
  backdrop-filter: blur(12px);
  padding-left: 1rem;
}

.merch-dialog-head p {
  margin: 0;
}

.merch-dialog-head button {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border-left: 1px solid var(--ink);
}

.merch-dialog-head button:hover,
.merch-dialog-head button:focus-visible {
  background: var(--ink);
  color: var(--paper);
  outline: 0;
}

.merch-dialog-main {
  display: grid;
}

.merch-dialog-gallery {
  min-width: 0;
  border-bottom: 1px solid var(--ink);
}

.merch-dialog-image-wrap {
  position: relative;
  min-height: 55vh;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  background: #efede7;
  touch-action: pan-y pinch-zoom;
}

.merch-dialog-zoom {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: zoom-in;
}

.merch-dialog-image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 55vh;
  object-fit: contain;
  object-position: center;
}

.merch-dialog-zoom:focus-visible {
  outline: 0.35rem solid var(--merch-blue);
  outline-offset: -0.35rem;
}

.merch-dialog-image-wrap > span.pixel:not(.merch-dialog-image-count) {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  min-height: 1.9rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  background: rgba(255, 254, 250, 0.92);
  padding: 0 0.55rem;
}

.merch-dialog-image-wrap > .merch-image-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
}

.merch-dialog-image-wrap > .merch-image-arrow--previous {
  left: 0.85rem;
}

.merch-dialog-image-wrap > .merch-image-arrow--next {
  right: 0.85rem;
}

.merch-dialog-image-count {
  position: absolute;
  right: 0.8rem;
  bottom: 0.75rem;
  z-index: 3;
  min-height: 1.9rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  background: rgba(255, 254, 250, 0.92);
  padding: 0 0.55rem;
}

.merch-thumbnails {
  display: flex;
  overflow-x: auto;
  background: var(--merch-white);
}

.merch-thumbnail {
  position: relative;
  flex: 0 0 6.4rem;
  height: 6.4rem;
  border-right: 1px solid var(--ink);
  padding: 0;
}

.merch-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.merch-thumbnail.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.3rem solid var(--merch-blue);
}

.merch-thumbnail:focus-visible {
  outline: 0.3rem solid var(--merch-blue);
  outline-offset: -0.3rem;
}

.merch-dialog-details {
  display: grid;
  align-content: start;
  padding: clamp(1.4rem, 5vw, 4.5rem);
}

.merch-dialog-details > .pixel,
.merch-dialog-details h2,
.merch-dialog-details p {
  margin: 0;
}

.merch-dialog-details h2 {
  margin: 1.3rem 0;
  font-size: clamp(3.4rem, 7vw, 7rem);
  letter-spacing: -0.085em;
  line-height: 0.8;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.merch-dialog-description {
  max-width: 42rem;
  color: rgba(9, 9, 9, 0.72);
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  line-height: 1.25;
}

.merch-product-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2.25rem 0 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.merch-product-meta div {
  min-height: 5.25rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 0.75rem;
}

.merch-product-meta dt {
  color: rgba(9, 9, 9, 0.5);
}

.merch-product-meta dd {
  margin: 0.55rem 0 0;
  font-size: 0.9rem;
}

.merch-option-group {
  min-width: 0;
  margin: 2rem 0 0;
  border: 0;
  padding: 0;
}

.merch-option-group legend {
  margin-bottom: 0.65rem;
}

.merch-option-group > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.merch-option-group button {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.merch-option-group button i {
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
}

.merch-option-group button[data-color="White"] i {
  background: var(--merch-white);
}

.merch-option-group button:hover:not(:disabled),
.merch-option-group button:focus-visible:not(:disabled),
.merch-option-group button.is-active {
  background: var(--ink);
  color: var(--paper);
  outline: 0;
}

.merch-option-group button.is-active i {
  border-color: var(--paper);
}

.merch-option-group button:disabled {
  color: rgba(9, 9, 9, 0.3);
  cursor: not-allowed;
  text-decoration: line-through;
}

.merch-size-options > div {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.merch-size-options > p {
  margin-top: 0.65rem;
  color: rgba(9, 9, 9, 0.55);
  font-size: 0.75rem;
}

.merch-coming-soon-button {
  display: flex;
  min-height: 4.2rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: not-allowed;
  opacity: 1;
  padding: 0 1rem;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.merch-coming-soon-button span {
  font-size: 1.25rem;
}

.merch-lock-note {
  margin-top: 0.75rem !important;
  color: rgba(9, 9, 9, 0.5);
  text-align: center;
}

.merch-dialog-related {
  border-top: 1px solid var(--ink);
  padding: clamp(1.4rem, 4vw, 3rem);
}

.merch-dialog-related header p,
.merch-dialog-related header h3 {
  margin: 0;
}

.merch-dialog-related header h3 {
  margin-top: 0.65rem;
  font-size: clamp(2.4rem, 5vw, 4.8rem);
  letter-spacing: -0.07em;
  line-height: 0.86;
  text-transform: uppercase;
}

.merch-dialog-related > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.5rem;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}

.merch-dialog-related .merch-recommendation-card span {
  min-height: 3.5rem;
}

/* Full-screen image viewer */
.merch-image-viewer {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  overflow: hidden;
  border: 0;
  background: #090909;
  color: var(--paper);
  padding: 0;
}

.merch-image-viewer::backdrop {
  background: rgba(9, 9, 9, 0.92);
}

.merch-image-viewer-shell {
  display: grid;
  height: 100%;
  grid-template-rows: 4rem minmax(0, 1fr);
}

.merch-image-viewer header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(251, 250, 245, 0.38);
  padding-left: 1rem;
}

.merch-image-viewer header p {
  margin: 0;
}

.merch-image-viewer header button {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border-left: 1px solid rgba(251, 250, 245, 0.38);
  color: var(--paper);
}

.merch-image-viewer header button:hover,
.merch-image-viewer header button:focus-visible {
  background: var(--paper);
  color: var(--ink);
  outline: 0;
}

.merch-image-viewer-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}

.merch-image-viewer-stage > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
}

.merch-image-viewer-stage > .merch-image-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  border-color: rgba(251, 250, 245, 0.5);
  background: rgba(9, 9, 9, 0.5);
  color: rgba(251, 250, 245, 0.8);
  transform: translateY(-50%);
}

.merch-image-viewer-stage > .merch-image-arrow--previous {
  left: 1rem;
}

.merch-image-viewer-stage > .merch-image-arrow--next {
  right: 1rem;
}

.merch-image-viewer-stage > .merch-image-arrow:hover,
.merch-image-viewer-stage > .merch-image-arrow:focus-visible {
  background: var(--paper);
  color: var(--ink);
}

.merch-image-viewer-hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  z-index: 2;
  margin: 0;
  border: 1px solid rgba(251, 250, 245, 0.38);
  background: rgba(9, 9, 9, 0.64);
  padding: 0.6rem 0.75rem;
  text-align: center;
  transform: translateX(-50%);
}

.merch-image-arrow[hidden] {
  display: none;
}

@keyframes merch-dialog-in {
  from { opacity: 0; transform: translateX(2rem); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes merch-slow-spin {
  to { transform: rotate(360deg); }
}

@media (min-width: 700px) {
  .merch-status {
    grid-template-columns: 1fr auto auto;
    gap: 2rem;
  }

  .merch-category-nav {
    grid-template-columns: 8rem minmax(0, 1fr);
  }

  .merch-category-nav > .pixel {
    display: flex;
  }

  .merch-inventory-head,
  .merch-recommendations > header {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.6fr);
  }

  .merch-inventory-tools {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.48fr);
  }

  .merch-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .merch-product-card {
    grid-template-rows: minmax(26rem, 45vw) auto;
  }

  .merch-manifesto {
    grid-template-columns: minmax(20rem, 0.65fr) minmax(0, 1.35fr);
  }

  .merch-manifesto-mark {
    min-height: 42rem;
    border-right: 1px solid rgba(251, 250, 245, 0.3);
    border-bottom: 0;
  }

  .merch-recommendation-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .merch-release-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .merch-release-grid article {
    border-right: 1px solid var(--ink);
  }

  .merch-dialog-main {
    grid-template-columns: minmax(0, 1.2fr) minmax(25rem, 0.8fr);
  }

  .merch-dialog-gallery {
    border-right: 1px solid var(--ink);
    border-bottom: 0;
  }

  .merch-dialog-image-wrap,
  .merch-dialog-zoom,
  .merch-dialog-image-wrap img {
    min-height: calc(100dvh - 10.5rem);
  }

  .merch-dialog-details {
    position: sticky;
    top: 4rem;
    min-height: calc(100dvh - 4rem);
  }
}

@media (min-width: 1000px) {
  .merch-hero {
    grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
  }

  .merch-hero-copy,
  .merch-hero-product {
    min-height: calc(100vh - 72px);
  }

  .merch-hero-product {
    border-top: 0;
    border-left: 1px solid var(--ink);
  }

  .merch-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .merch-product-card {
    grid-template-rows: minmax(28rem, 31vw) auto;
  }

  .merch-release-notes {
    grid-template-columns: minmax(22rem, 0.72fr) minmax(0, 1.28fr);
  }

  .merch-release-grid {
    border-top: 0;
    border-left: 1px solid var(--ink);
  }
}

@media (max-width: 620px) {
  .merch-page .system-bar {
    grid-template-columns: 64px 1fr 104px;
  }

  .merch-page .mark {
    margin: 13px;
  }

  .merch-hero-copy {
    min-height: 34rem;
  }

  .merch-hero h1 {
    font-size: clamp(4.15rem, 22vw, 6.5rem);
  }

  .merch-hero-product {
    min-height: 29rem;
  }

  .merch-hero-product img {
    object-position: center;
  }

  .merch-status > p:not(.pixel) {
    display: none;
  }

  .merch-category-nav {
    top: 64px;
  }

  .merch-category-buttons button {
    min-height: 3.25rem;
    min-width: 7.5rem;
  }

  .merch-product-card {
    grid-template-rows: minmax(24rem, 108vw) auto;
  }

  .merch-recommendation-card:nth-child(n + 3) {
    display: none;
  }

  .merch-dialog-details h2 {
    font-size: clamp(3.4rem, 17vw, 5.7rem);
  }

  .merch-image-viewer-hint {
    width: calc(100% - 8rem);
    font-size: 0.55rem;
  }

  .merch-image-viewer-stage > .merch-image-arrow--previous {
    left: 0.65rem;
  }

  .merch-image-viewer-stage > .merch-image-arrow--next {
    right: 0.65rem;
  }

  .merch-dialog-related > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .merch-dialog-related .merch-recommendation-card:nth-child(3) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .merch-manifesto-mark img,
  .site-footer-logo {
    animation: none;
  }

  .merch-hero-product img,
  .merch-product-image img {
    transition: none;
  }

  .merch-hero-progress::after {
    animation: none;
  }
}