/* Product media: match the frame to the source before using cover.
   The small remaining crops below remove image background, not the sock. */

/* Essential Crew 01: two square details and one wide packaging scene. */
body[data-product-media="essential-crew-01"] .essential-benefit-media {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  aspect-ratio: 11 / 10;
}
body[data-product-media="essential-crew-01"] .essential-benefit-media img {
  object-fit: cover;
  object-position: center;
}
body[data-product-media="essential-crew-01"] .related-img {
  position: relative;
  aspect-ratio: 900 / 760;
}
body[data-product-media="essential-crew-01"] .related-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Essential Quarter 01: the first row uses wide scenes, the second square details. */
body[data-product-media="essential-quarter-01"] .quarter-detail-grid img {
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
body[data-product-media="essential-quarter-01"] .quarter-detail-grid figure:nth-child(-n+3) img {
  aspect-ratio: 3 / 2;
}
body[data-product-media="essential-quarter-01"] .quarter-related-grid img {
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Ribbed Crew 01: square construction details and aligned range cards. */
body[data-product-media="ribbed-crew-01"] .ribbed-detail-grid img {
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
body[data-product-media="ribbed-crew-01"] .ribbed-range-grid img {
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Grip Low 01: portrait photos no longer sit inside landscape slots. */
body[data-product-media="grip-low-01"] .hero-art .hero-photo,
body[data-product-media="grip-low-01"] .hero-thumbs img,
body[data-product-media="grip-low-01"] .fit-images img,
body[data-product-media="grip-low-01"] .custom-art img {
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
body[data-product-media="grip-low-01"] .grip-visual img {
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
body[data-product-media="grip-low-01"] .range-card img {
  object-fit: cover;
}

/* Keep the Grip Low hero close to the height of its buying information.
   The main photo keeps its 4:5 ratio; only the supporting thumbnails are square. */
@media (min-width: 801px) {
  body[data-product-media="grip-low-01"] .hero-grid {
    grid-template-columns: minmax(0, clamp(320px, 36vw, 420px)) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
  }
  body[data-product-media="grip-low-01"] .hero-gallery {
    width: 100%;
    max-width: 420px;
  }
  body[data-product-media="grip-low-01"] .hero-copy {
    width: 100%;
    max-width: 560px;
  }
}
body[data-product-media="grip-low-01"] .hero-thumbs img {
  aspect-ratio: 1;
}
@media (max-width: 800px) {
  body[data-product-media="grip-low-01"] .hero-gallery {
    width: 100%;
    max-width: 500px;
    margin-inline: auto;
  }
}

/* Performance Crew 01 and Running Quarter 01 share a portrait media system. */
body:is([data-product-media="performance-crew-01"],[data-product-media="running-quarter-01"]) .primary-image > img,
body:is([data-product-media="performance-crew-01"],[data-product-media="running-quarter-01"]) .thumb img,
body:is([data-product-media="performance-crew-01"],[data-product-media="running-quarter-01"]) .zone-image,
body:is([data-product-media="performance-crew-01"],[data-product-media="running-quarter-01"]) .custom-img img,
body:is([data-product-media="performance-crew-01"],[data-product-media="running-quarter-01"]) .eval-img,
body:is([data-product-media="performance-crew-01"],[data-product-media="running-quarter-01"]) .range-media img,
body:is([data-product-media="performance-crew-01"],[data-product-media="running-quarter-01"]) .pack-img {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}
body[data-product-media="performance-crew-01"] .primary-image > img {
  aspect-ratio: 737 / 999;
}
body[data-product-media="running-quarter-01"] .shoe-image {
  position: relative;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 5;
}
body[data-product-media="running-quarter-01"] .shoe-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}
body[data-product-media="running-quarter-01"] .custom-stack {
  grid-template-rows: auto auto;
}
body[data-product-media="running-quarter-01"] .mini-pack img {
  width: 90px;
  height: auto;
  flex: 0 0 90px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* Lifestyle pages: frame proportions mirror the supplied 4:5 photography. */
body:is([data-product-media="retro-sport-01"],[data-product-media="varsity-crew-01"],[data-product-media="colorblock-crew-01"]) main :is(.hero-photo,.sample-photo,.pack-photo) {
  position: relative;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 5;
}
body[data-product-media="retro-sport-01"] main .card .photo,
body[data-product-media="varsity-crew-01"] main .card-photo {
  position: relative;
  height: auto;
  min-height: 0;
  aspect-ratio: 4 / 5;
}
body[data-product-media="colorblock-crew-01"] main .card-photo {
  position: relative;
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
}
body:is([data-product-media="retro-sport-01"],[data-product-media="varsity-crew-01"],[data-product-media="colorblock-crew-01"]) main :is(.hero-photo,.card-photo,.sample-photo,.pack-photo,.card .photo) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}