/* Shared, progressively enhanced collection selector. */
.collection-carousel { margin: 40px var(--gutter) 88px; padding-top: 40px; border-top: 1px solid var(--line); }
.collection-carousel__heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.collection-carousel__heading h2 { margin: 0; font: 500 clamp(40px, 5vw, 68px)/1.1 var(--display); letter-spacing: -.055em; }
.collection-carousel__heading p { max-width: 320px; margin: 0 0 4px; color: var(--muted); font: 400 14px/1.65 var(--body); }
.collection-carousel__stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 1440px; margin: 40px auto 0; }
.collection-carousel__card { position: relative; display: block; aspect-ratio: 2.5; background: var(--surface); color: #fff; text-decoration: none; }
.collection-carousel__card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.collection-carousel__card > span { position: absolute; inset: auto 0 0; padding: 45px 20px 20px; color: #fff; background: linear-gradient(transparent, #142018c9); font: 500 11px/1.5 var(--body); text-transform: uppercase; letter-spacing: .12em; pointer-events: none; }
.collection-carousel__card:focus-visible, .collection-carousel__arrow:focus-visible, .collection-carousel__explore:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.collection-carousel__controls { display: none; }
.collection-carousel__note { margin: 22px 0 0; text-align: center; font: 400 11px/1.6 var(--body); color: var(--muted); }
.collection-carousel__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.collection-carousel.is-ready .collection-carousel__stage { position: relative; display: block; aspect-ratio: 3.25; min-height: 175px; overflow: hidden; perspective: 1200px; isolation: isolate; touch-action: pan-y; user-select: none; }
.collection-carousel.is-ready .collection-carousel__card { position: absolute; left: 50%; top: 20px; width: 60%; backface-visibility: hidden; box-shadow: 0 26px 30px -26px #15251599; transition: transform 650ms cubic-bezier(.22,.8,.25,1), filter 650ms; }
.collection-carousel.is-ready .collection-carousel__card[data-position="center"] { transform: translateX(-50%) translateZ(35px); z-index: 3; }
.collection-carousel.is-ready .collection-carousel__card[data-position="left"] { transform: translateX(-80%) translateY(12px) translateZ(-130px) rotateY(34deg); z-index: 2; filter: brightness(.84) saturate(.8); }
.collection-carousel.is-ready .collection-carousel__card[data-position="right"] { transform: translateX(-20%) translateY(12px) translateZ(-130px) rotateY(-34deg); z-index: 2; filter: brightness(.84) saturate(.8); }
.collection-carousel.is-ready .collection-carousel__card[data-position="far-left"] { transform: translateX(-132%) translateY(26px) translateZ(-240px) rotateY(40deg); z-index: 1; filter: brightness(.7) saturate(.7); }
.collection-carousel.is-ready .collection-carousel__card[data-position="far-right"] { transform: translateX(32%) translateY(26px) translateZ(-240px) rotateY(-40deg); z-index: 1; filter: brightness(.7) saturate(.7); }
.collection-carousel.is-ready .collection-carousel__card[data-position="hidden"] { visibility: hidden; pointer-events: none; }
.collection-carousel.is-ready .collection-carousel__card:not([data-position="center"]) > span { opacity: 0; }
.collection-carousel.is-ready .collection-carousel__controls { display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; gap: 28px; max-width: 430px; margin: 22px auto 0; align-items: center; }
.collection-carousel .collection-carousel__arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font: 400 22px var(--body); transition: background 150ms; }
.collection-carousel__arrow:hover { background: var(--surface); }
.collection-carousel__caption { text-align: center; }
.collection-carousel__count { color: var(--muted); font: 400 11px var(--body); letter-spacing: .14em; }
.collection-carousel__name { margin: 9px 0 10px; font: 500 23px/1.25 var(--display); letter-spacing: -.035em; }
.collection-carousel__explore { display: inline-block; padding: 8px 0; border-bottom: 1px solid currentColor; font: 400 13px var(--body); color: var(--ink); text-decoration: none; }
html[data-editorial-motion="off"] .collection-carousel__card { transition: none; }
@media (max-width: 700px) {
  .collection-carousel { margin-top: 32px; margin-bottom: 56px; padding-top: 28px; }
  .collection-carousel__heading { align-items: start; flex-direction: column; gap: 14px; }
  .collection-carousel__heading p { max-width: 360px; font-size: 13px; }
  .collection-carousel.is-ready .collection-carousel__stage { margin-top: 22px; min-height: 145px; aspect-ratio: 2.9; perspective: 800px; }
  .collection-carousel.is-ready .collection-carousel__card { width: 68%; }
  .collection-carousel.is-ready .collection-carousel__card[data-position="left"] { transform: translateX(-85%) translateY(10px) translateZ(-130px) rotateY(38deg); }
  .collection-carousel.is-ready .collection-carousel__card[data-position="right"] { transform: translateX(-15%) translateY(10px) translateZ(-130px) rotateY(-38deg); }
  .collection-carousel.is-ready .collection-carousel__card[data-position="far-left"] { transform: translateX(-119%) translateY(21px) translateZ(-220px) rotateY(42deg); }
  .collection-carousel.is-ready .collection-carousel__card[data-position="far-right"] { transform: translateX(19%) translateY(21px) translateZ(-220px) rotateY(-42deg); }
  .collection-carousel.is-ready .collection-carousel__controls { gap: 12px; margin-top: 12px; }
  .collection-carousel__name { font-size: 20px; }
  .collection-carousel__card > span { padding: 20px 10px 9px; font-size: 10px; letter-spacing: .05em; }
  .collection-carousel__stage { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .collection-carousel__card, .collection-carousel__arrow { transition: none !important; }
}
