/* E22: supplied garments stay whole and move only when the reader navigates. */
.merch { position: relative; z-index: 3; overflow: clip; background: var(--paper); }
#merch-protein, .merch__anchor { display: block; scroll-margin-top: 112px; }
.merch__intro { margin: 0; }
.merch__direction { margin-top: var(--gap-section); scroll-margin-top: 112px; }
.merch__head { margin: 0 0 clamp(32px, 4vw, 64px); }
.merch__head h3 { max-width: 11ch; margin: 0; font-size: clamp(46px, 7.2vw, 112px); font-weight: 650; letter-spacing: var(--track); line-height: .96; }
.merch__head h3.merch__head--partner { max-width: none; font-size: clamp(26px, 7vw, 88px); }
.merch__partner-lock, .merch__collection-name { white-space: nowrap; }
.merch__head h3.merch__head--collection { max-width: none; }
.merch__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 40px); align-items: start; overflow: clip; }
.merch__figure { grid-column: span 6; aspect-ratio: 1; min-width: 0; margin: 0; overflow: hidden; background: var(--paper); }
.merch__image { display: block; width: 90%; height: 90%; margin: 5%; cursor: zoom-in; }
.merch__image:focus-visible { outline: 3px solid var(--ink); outline-offset: -4px; }
.merch__image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.merch__stage--anthropic .merch__figure--hoodie-white { grid-column: span 7; aspect-ratio: 1.08; }
.merch__stage--anthropic .merch__figure--shirt-raster { grid-column: span 5; margin-top: 18%; aspect-ratio: .82; }
.merch__stage--anthropic .merch__figure--worn { grid-column: span 7; aspect-ratio: .88; }
.merch__stage--anthropic .merch__figure--hoodie-blue { grid-column: span 5; margin-top: 20%; }
.merch__stage--anthropic .merch__figure--shirt-blue { grid-column: 2 / span 5; }
.merch__stage--anthropic .merch__figure--protein-trikot { grid-column: span 6; margin-top: 14%; }
.merch__stage--daily .merch__figure--keys-shirt { grid-column: span 6; aspect-ratio: .92; }
.merch__stage--anthropic .merch__figure--points-worn { grid-column: span 5; aspect-ratio: .82; }
.merch__stage--daily .merch__figure--fun-polo { margin-top: 20%; }
.merch__stage--daily .merch__figure--captcha-blue { margin-top: 20%; }
.merch__carousel { position: relative; }
.merch__stage.is-carousel {
  --merch-carousel-gap: clamp(16px, 2.6vw, 40px);
  display: flex;
  align-items: center;
  gap: var(--merch-carousel-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
}
.merch__stage.is-carousel::-webkit-scrollbar { display: none; }
.merch__stage.is-carousel .merch__figure {
  flex: 0 0 calc((100% - var(--merch-carousel-gap)) / 2);
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.merch__carousel-controls { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.merch__carousel-controls[hidden] { display: none; }
.merch__carousel-button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.merch__carousel-button:hover { color: var(--orange); }
.merch__carousel-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.merch__carousel-button:disabled { opacity: .3; cursor: default; }
.merch__extra { width: min(42vw, 480px); margin: clamp(48px, 7vw, 112px) 7% 0 auto; }
.merch__extra p { margin: 0 0 16px; font-size: 18px; line-height: 1.5; }
.merch__extra .merch__image { width: 100%; height: auto; margin: 0; }
.merch__extra .merch__image img { width: 100%; height: auto; object-fit: contain; }
.merch__objects { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: clamp(64px, 8vw, 128px); }
.merch__objects .merch__extra { width: 100%; margin: 0; }
/* The point cloud separates the collaboration from Adaptyv's own collection. */
.merch__transition { position: relative; height: clamp(300px, 38vw, 560px); margin: 96px 0 64px; }
.ambient-protein--merch { inset: 0; width: min(100%, 760px); height: 100%; margin: auto; }
.merch__transition + .merch__direction { margin-top: 0; }
@media (max-width: 760px) {
  .merch__transition { height: 280px; margin: 64px 0 48px; }

  .merch__direction { scroll-margin-top: 88px; }
  .merch__direction + .merch__direction { margin-top: var(--gap-chapter); }
  .merch__head { margin-bottom: 32px; }
  .merch__head h3 { max-width: 9ch; font-size: clamp(48px, 14vw, 68px); }
  .merch__head h3.merch__head--partner { max-width: none; font-size: clamp(26px, 7vw, 40px); }
  .merch__stage { grid-template-columns: 1fr; gap: 32px; }
  .merch__stage .merch__figure { grid-column: 1; grid-row: auto; width: min(80vw, 300px); margin: 0 auto; aspect-ratio: .94; }
  .merch__stage .merch__figure--worn, .merch__stage .merch__figure--points-worn { aspect-ratio: .82; }
  .merch__stage.is-carousel { --merch-carousel-gap: 16px; display: flex; gap: var(--merch-carousel-gap); }
  .merch__stage.is-carousel .merch__figure { flex-basis: 100%; width: 100%; margin: 0; }
  .merch__stage.is-carousel .merch__image { width: min(78vw, 300px); margin-inline: auto; }
  .merch__carousel-controls { margin-top: 8px; }
  .merch__extra { width: min(80vw, 300px); margin: 56px auto 0; }
  .merch__extra p { margin-bottom: 12px; font-size: 16px; }
  .merch__objects { grid-template-columns: 1fr; gap: 64px; margin-top: 64px; }
  .merch__objects .merch__extra { width: min(80vw, 300px); margin-inline: auto; }
  .merch__objects .merch__extra--lamps { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .merch__stage.is-carousel { scroll-behavior: auto; }
}
