/* Preserve the approved campaign hero and shared site logo. The new floating
   collection uses the shared site canvas in either appearance. */
.apparel-page {
  --apparel-canvas: #e5ecec;
  --apparel-canvas-light: #eef2f1;
  --apparel-ink: #172b31;
  --apparel-muted: #435b61;
  --apparel-accent: #006c76;
  --apparel-border: #91aeb44d;
  --apparel-glass: #ffffff82;
  --apparel-glass-strong: #f6f9f8df;
  --apparel-shadow: #233e4712;
  --apparel-photo-wash: #e6eded;
}
:root[data-theme="light"] .apparel-page {
  --apparel-canvas: #f2f5f5;
  --apparel-canvas-light: #fafbf9;
  --apparel-glass: #ffffffa6;
  --apparel-glass-strong: #ffffffed;
  --apparel-photo-wash: #f2f5f5;
}
.apparel-page main { color: var(--apparel-ink); background: var(--apparel-canvas); }
/* The logo inherits the same asset proportions and sizing as every page. */
.apparel-page .apparel-accent, .apparel-page .apparel-eyebrow { color: var(--apparel-accent); }
.apparel-page .apparel-inline-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding-block: 9px; border-bottom: 1px solid currentColor; color: var(--apparel-ink); font-size: 14px; line-height: 1.4; }
.apparel-page .apparel-inline-link:hover { color: var(--apparel-accent); }
.apparel-page main :focus-visible, .apparel-page .apparel-product-dialog :focus-visible { outline-color: var(--apparel-accent); }

.apparel-page .apparel-hero { --hero-title: clamp(84px, 9.2vw, 150px); min-height: 760px; background: var(--apparel-canvas-light); border-color: var(--apparel-border); }
.apparel-page .apparel-campaign-photo { position: absolute; inset: 84px 0 0; display: block; }
.apparel-page .apparel-campaign-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.apparel-page .apparel-photo-wash { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #edf2efb8 0%, #edf2ef88 22%, #edf2ef14 53%, transparent 72%), linear-gradient(0deg, var(--apparel-photo-wash), transparent 25%); }
.apparel-page .apparel-hero-inner { padding-block: calc(var(--header-height) + 105px) 110px; }
.apparel-page .apparel-hero-copy { width: 66%; max-width: 800px; padding-top: 0; }
.apparel-page .apparel-hero-copy h1 { color: var(--apparel-ink); margin-top: 22px; margin-bottom: 24px; }
.apparel-page .apparel-hero .hero-subline { font-size: clamp(20px, 2vw, 30px); }
.apparel-page .apparel-campaign-credit { position: absolute; z-index: 4; left: var(--gutter); bottom: 22px; max-width: calc(100% - 2 * var(--gutter)); color: var(--apparel-muted); font-size: 11px; line-height: 1.5; }
.apparel-page .apparel-placeholder-label { position: absolute; z-index: 4; top: 10px; left: 10px; max-width: calc(100% - 20px); margin: 0; padding: 7px 9px; border: 1px solid #ffffffdf; border-radius: 7px; background: #f6f9f8f2; color: #172b31; font: 700 10px/1.35 var(--body); letter-spacing: .05em; pointer-events: none; }
.apparel-page .apparel-hero-placeholder { top: calc(var(--header-height) + 18px); left: var(--gutter); max-width: calc(100% - 2 * var(--gutter)); }

/* The garments sit directly over the shared athletic texture. No product
   frames, image fills or glass tiles are present in this horizontal row. */
body.apparel-page main.smf-inner-page > section.apparel-stage {
  --apparel-stage-accent: #03d6df;
  --apparel-product-shadow: #0009;
  position: relative;
  isolation: isolate;
  padding-block: 56px 12px;
  color: var(--ink);
  background-color: var(--canvas-color);
  background-image: var(--canvas-image);
  background-size: var(--canvas-size);
  /* The shared html scroll-padding already clears the fixed mobile header. */
  scroll-margin-top: 20px;
}
:root[data-theme="light"] body.apparel-page main.smf-inner-page > section.apparel-stage {
  --apparel-stage-accent: #006e78;
  --apparel-product-shadow: #183b463b;
}
.apparel-stage :is(.apparel-accent, .apparel-eyebrow) { color: var(--apparel-stage-accent); }
.apparel-stage :focus-visible { outline-color: var(--apparel-stage-accent); }
.apparel-stage .apparel-section-heading { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 18px 32px; margin-bottom: 18px; }
.apparel-stage .apparel-section-heading h2 { margin-top: 12px; font: italic 900 clamp(44px, 4.8vw, 74px)/1 var(--display); letter-spacing: .005em; text-shadow: 1px 2px 0 var(--apparel-product-shadow); }
.apparel-stage .apparel-browse-hint { color: var(--muted); font-size: 14px; }
.apparel-stage .apparel-pending-notice { max-width: 68ch; margin-bottom: 22px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.apparel-stage .apparel-catalog-error { margin-bottom: 18px; color: var(--muted); font-size: 14px; }
.apparel-stage .apparel-carousel { min-width: 0; }
.apparel-stage .apparel-look-track { --look-width: calc((100% - 90px) / 3.25); display: flex; align-items: stretch; gap: 30px; margin: 0 -10px; padding: 14px 10px 26px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 10px; scrollbar-width: none; list-style: none; }
.apparel-stage .apparel-look-track::-webkit-scrollbar { display: none; }
.apparel-stage .apparel-look-item { flex: 0 0 var(--look-width); min-width: 0; scroll-snap-align: start; }
.apparel-stage .apparel-look-link { display: flex; flex-direction: column; align-items: center; min-height: 44px; height: 100%; padding-bottom: 10px; color: var(--ink); text-align: center; }
.apparel-stage .apparel-floating-photo { display: block; width: 100%; height: clamp(240px, 27vw, 400px); object-fit: contain; filter: drop-shadow(0 14px 12px var(--apparel-product-shadow)); transition: transform .22s ease; }
.apparel-stage .apparel-look-name { position: relative; display: block; margin-top: 14px; padding-bottom: 8px; font-size: 17px; line-height: 1.35; overflow-wrap: anywhere; }
.apparel-stage .apparel-look-name::after { content: ''; position: absolute; height: 3px; left: 50%; right: 50%; bottom: 0; border-radius: 3px; background: var(--apparel-stage-accent); transition: left .2s ease, right .2s ease; }
.apparel-stage .apparel-look-link[aria-current="location"] .apparel-look-name::after,
.apparel-stage .apparel-look-link:focus-visible .apparel-look-name::after { left: 22%; right: 22%; }
.apparel-stage .apparel-sample-label { margin-top: 7px; color: var(--muted); font: 700 10px/1.5 var(--body); letter-spacing: .12em; text-align: center; }
.apparel-stage .apparel-product-list { padding-top: 8px; }
.apparel-stage .apparel-product-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: 'photos heading' 'photos content'; align-content: start; gap: 0 clamp(28px, 5vw, 80px); padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.apparel-stage .apparel-product-card:focus:not(:focus-visible) { outline: none; }
.apparel-stage .apparel-product-heading { grid-area: heading; min-width: 0; padding-top: 20px; }
.apparel-stage .apparel-product-heading .eyebrow { font-size: 13px; letter-spacing: .12em; }
.apparel-stage .apparel-product-heading h3 { margin-top: 13px; font: italic 900 clamp(36px, 4vw, 60px)/1.05 var(--display); letter-spacing: .01em; overflow-wrap: anywhere; }
.apparel-stage .apparel-product-photos { grid-area: photos; min-width: 0; align-self: start; }
.apparel-stage .apparel-detail-photo { width: 100%; height: clamp(300px, 37vw, 530px); object-fit: contain; filter: drop-shadow(0 18px 16px var(--apparel-product-shadow)); }
.apparel-stage .apparel-photo-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 20px; }
.apparel-stage .apparel-photo-choice { display: grid; justify-items: center; gap: 7px; min-width: 64px; min-height: 44px; padding: 4px 6px 8px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--muted); font-size: 12px; }
.apparel-stage .apparel-photo-choice img { width: 64px; height: 64px; object-fit: contain; }
.apparel-stage .apparel-photo-choice[aria-pressed="true"] { border-bottom-color: var(--apparel-stage-accent); color: var(--ink); }
.apparel-stage .apparel-product-description { grid-area: content; min-width: 0; padding-top: 20px; }
.apparel-stage .apparel-detail-description { max-width: 46ch; color: var(--muted); line-height: 1.65; }
.apparel-stage .apparel-detail-price { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 20px; font-weight: 700; }
.apparel-stage .apparel-item-specifications { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 26px 0 32px; font-size: 15px; line-height: 1.5; }
.apparel-stage .apparel-item-specifications > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.apparel-stage .apparel-item-specifications dt { margin-bottom: 6px; color: var(--apparel-stage-accent); font-size: 13px; }
.apparel-stage .apparel-item-specifications dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.apparel-stage .apparel-product-description > .button { width: 100%; max-width: 460px; justify-content: center; }
.apparel-stage .apparel-back-link { display: flex; width: fit-content; align-items: center; min-height: 44px; margin: 18px auto 0; color: var(--apparel-stage-accent); font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
/* Enhancement is width-independent: a centered garment and two smaller
   neighbours, with a single detail card in the normal flow beneath them. */
.apparel-stage .apparel-carousel[data-carousel-ready] { --carousel-height: clamp(260px, 29vw, 380px); --carousel-item-width: 44%; position: relative; }
.apparel-stage [data-carousel-ready] .apparel-look-track { position: relative; display: block; height: var(--carousel-height); margin: 0; padding: 0; overflow: hidden; scroll-snap-type: none; touch-action: pan-y; }
.apparel-stage [data-carousel-ready] .apparel-look-item { position: absolute; inset: 0 auto 0 50%; width: var(--carousel-item-width); height: 100%; transform: translate3d(-50%, 0, 0); opacity: 0; pointer-events: none; transition: none; backface-visibility: hidden; }
.apparel-stage [data-carousel-ready] .apparel-look-item:is([data-position="current"], [data-position="previous"], [data-position="next"], [data-carousel-animating]) { will-change: transform, opacity; }
.apparel-stage [data-carousel-ready] .apparel-look-item[data-position="current"] { z-index: 3; opacity: 1; pointer-events: auto; }
.apparel-stage [data-carousel-ready] .apparel-look-item[data-position="previous"] { z-index: 1; transform: translate3d(-125%, 0, 0) scale(.64); opacity: .8; pointer-events: auto; }
.apparel-stage [data-carousel-ready] .apparel-look-item[data-position="next"] { z-index: 1; transform: translate3d(25%, 0, 0) scale(.64); opacity: .8; pointer-events: auto; }
.apparel-stage [data-carousel-ready] .apparel-look-item[data-position="offstage-previous"] { transform: translate3d(-200%, 0, 0) scale(.5); }
.apparel-stage [data-carousel-ready] .apparel-look-item[data-position="offstage-next"] { transform: translate3d(100%, 0, 0) scale(.5); }
.apparel-stage [data-carousel-ready] .apparel-look-link { height: 100%; padding: 0; }
.apparel-stage [data-carousel-ready] .apparel-floating-photo { height: 100%; min-height: 0; transform: none; }
.apparel-stage [data-carousel-ready] .apparel-look-link:hover .apparel-floating-photo { transform: none; }
.apparel-stage [data-carousel-ready] :is(.apparel-look-name, .apparel-look-link > .apparel-sample-label) { display: none; }
.apparel-stage .apparel-carousel-controls { display: none; }
.apparel-stage [data-carousel-ready] .apparel-carousel-controls {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(0, 3fr) minmax(72px, 1fr);
  align-items: center;
  gap: 12px;
  max-width: 460px;
  margin: 14px auto 22px;
}
.apparel-stage .apparel-carousel-control {
  justify-self: start;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 700 14px/1.25 var(--body);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.apparel-stage .apparel-carousel-control:last-child { justify-self: end; }
.apparel-stage .apparel-carousel-control:hover { color: var(--apparel-stage-accent); }
.apparel-stage .apparel-carousel-caption { margin: 0; min-height: 46px; color: var(--ink); text-align: center; font-size: 16px; overflow-wrap: anywhere; }
.apparel-stage .apparel-carousel-caption .apparel-sample-label { display: block; margin-top: 4px; }
.apparel-stage [data-apparel-products]:empty { padding: 0; }
.apparel-stage .apparel-product-description .apparel-detail-price { margin-top: 0; padding-top: 0; border: 0; font-size: 22px; font-weight: 400; }
[data-apparel-state="samples"] .apparel-detail-description { display: none; }
.apparel-stage .apparel-item-specifications { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-block: 24px 28px; }
.apparel-stage .apparel-item-specifications > div + div { padding-left: 0; border: 0; }
.apparel-stage .apparel-item-specifications dt { margin-bottom: 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.apparel-stage .apparel-option-list { display: flex; flex-wrap: wrap; gap: 12px; }
.apparel-stage .apparel-option { display: grid; place-items: center; min-width: 46px; min-height: 46px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; background: transparent; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.apparel-stage .apparel-option[aria-pressed="true"] { border-color: var(--apparel-stage-accent); box-shadow: inset 0 0 0 1px var(--apparel-stage-accent); color: var(--apparel-stage-accent); }
.apparel-stage .apparel-color-option { width: 46px; height: 46px; padding: 4px; border-radius: 50%; border-color: var(--ink); background: var(--option-color) content-box; }
.apparel-stage .apparel-color-option[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--apparel-stage-accent); }
.apparel-stage .apparel-option-selection { display: block; margin-top: 9px; font-size: 14px; }
.apparel-stage .apparel-inquiry-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 6px; border-bottom: 1px solid currentColor; color: var(--ink); font-size: 20px; font-weight: 600; }
.apparel-stage .apparel-options-note { margin-top: 18px; color: var(--muted); font-size: 12px; line-height: 1.6; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .apparel-stage .apparel-look-link:hover .apparel-floating-photo { transform: translateY(-5px); }
  .apparel-stage .apparel-look-link:hover .apparel-look-name::after { left: 22%; right: 22%; }
}
@media (max-width: 1100px) {
  .apparel-page .apparel-hero { min-height: 700px; }
  .apparel-page .apparel-hero-inner { padding-top: calc(var(--header-height) + 94px); }
  .apparel-stage .apparel-look-track { --look-width: calc((100% - 48px) / 2.25); gap: 24px; }
}
@media (max-width: 900px) {
  .apparel-page .apparel-hero-placeholder { top: 18px; }
  .apparel-page .apparel-campaign-photo { inset: 0; }
  .apparel-page .apparel-hero { --hero-title: clamp(72px, 10.4vw, 110px); min-height: 650px; }
  .apparel-page .apparel-hero-inner { padding-top: 250px; padding-bottom: 100px; }
  .apparel-page .apparel-hero-copy { width: 83%; max-width: none; }
  .apparel-stage .apparel-floating-photo { height: clamp(220px, 33vw, 300px); }
}
@media (max-width: 600px) {
  .apparel-page .apparel-hero { --hero-title: clamp(49px, 12.5vw, 75px); min-height: 0; }
  .apparel-page .apparel-campaign-photo img { object-position: 62% top; }
  .apparel-page .apparel-photo-wash { background: linear-gradient(0deg, var(--apparel-photo-wash) 0%, #edf2efef 13%, #edf2efbd 36%, #edf2ef05 68%); }
  .apparel-page .apparel-hero-inner { padding-top: 270px; padding-bottom: 80px; }
  .apparel-page .apparel-hero-copy { width: 100%; }
  .apparel-page .apparel-hero-copy .eyebrow { font-size: 12px; letter-spacing: .12em; }
  .apparel-page .apparel-hero-copy h1 { margin-top: 17px; margin-bottom: 18px; }
  .apparel-page .apparel-hero .hero-subline { font-size: 21px; }
  .apparel-page .apparel-campaign-credit { bottom: 19px; font-size: 11px; max-width: 32ch; }
  body.apparel-page main.smf-inner-page > section.apparel-stage { padding-block: 35px 0; }
  .apparel-stage .apparel-section-heading { gap: 12px; margin-bottom: 16px; }
  .apparel-stage .apparel-section-heading .eyebrow { font-size: 12px; }
  .apparel-stage .apparel-section-heading h2 { font-size: 47px; margin-top: 8px; }
  .apparel-stage .apparel-browse-hint { font-size: 13px; }
  .apparel-stage .apparel-pending-notice { font-size: 12px; margin-bottom: 10px; }
  .apparel-stage .apparel-look-track { --look-width: 85%; gap: 18px; padding-top: 18px; }
  .apparel-stage .apparel-floating-photo { height: clamp(270px, 83vw, 380px); }
  .apparel-stage .apparel-carousel[data-carousel-ready] { --carousel-height: clamp(210px, 57vw, 300px); --carousel-item-width: 66%; }
  .apparel-stage .apparel-look-name { font-size: 18px; }
  .apparel-stage .apparel-product-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: 'photos' 'heading' 'content'; gap: 18px; padding-block: 24px 40px; }
  .apparel-stage .apparel-product-heading { padding-top: 0; }
  .apparel-stage .apparel-product-heading .eyebrow { font-size: 11px; }
  .apparel-stage .apparel-product-heading h3 { font-size: clamp(36px, 10vw, 48px); margin-top: 10px; }
  .apparel-stage .apparel-detail-photo { height: clamp(270px, 83vw, 380px); }
  .apparel-stage .apparel-product-description { padding-top: 0; }
  .apparel-stage .apparel-detail-description { font-size: 15px; }
  .apparel-stage .apparel-detail-price { font-size: 18px; margin-top: 20px; padding-top: 18px; }
  .apparel-stage .apparel-item-specifications { font-size: 14px; margin-block: 22px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .apparel-stage .apparel-floating-photo, .apparel-stage .apparel-look-name::after, .apparel-stage [data-carousel-ready] .apparel-look-item { transition: none; }
  .apparel-stage .apparel-look-track { scroll-behavior: auto; }
}

/* Approved Coming Soon presentation and responsive couple framing. */
.apparel-stage .apparel-section-heading { display: block; }
.apparel-stage .apparel-coming-soon-banner {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 22px 20px 25px;
  border-block: 1px solid var(--apparel-stage-accent);
  background: linear-gradient(90deg, transparent, #03d6df12 28%, #03d6df12 72%, transparent);
  text-align: center;
}
.apparel-stage .apparel-coming-soon-banner h2 {
  margin-top: 0;
  font-size: clamp(48px, 5.6vw, 80px);
  letter-spacing: .025em;
}
.apparel-stage .apparel-section-heading .apparel-browse-hint {
  margin-top: 20px;
  text-align: center;
}
.apparel-stage .apparel-pending-notice { margin-inline: auto; text-align: center; }
@media (max-width: 600px) {
  .apparel-page .apparel-campaign-photo img {
    height: 360px;
    object-position: right top;
    -webkit-mask-image: linear-gradient(#000 70%, transparent 100%);
    mask-image: linear-gradient(#000 70%, transparent 100%);
  }
}