/* Preserve natural proportions and keep product photography in a bounded media stage. */
body[data-site][class*="framework-"] :is(.product-card > .product-image, .product-hero .detail-image, .product-angle-image) {
  --product-tint: color-mix(in srgb, var(--site-accent) 12%, #e4e7e8);
  background: radial-gradient(ellipse at 50% 30%, #fff 15%, var(--product-tint) 125%);
}

.product-image > img,
.detail-image > img,
.product-angle-image > img {
  display: block;
  min-inline-size: 0;
  object-fit: scale-down;
  object-position: center;
  mix-blend-mode: multiply;
}

body[data-site][class*="framework-"] :is(.product-grid, .home-collection) > .product-card > .product-image {
  min-inline-size: 0;
  overflow: hidden;
}

body[data-site][class*="framework-"] :is(.product-grid, .home-collection) > .product-card > .product-image > img {
  inline-size: 100%;
  block-size: clamp(8.5rem, 17vw, 13.5rem);
  max-inline-size: 25rem;
  max-block-size: 100%;
}

.product-hero .product-detail-media {
  min-width: 0;
  margin: 0;
}

body[data-site][class*="framework-"] .product-hero .detail-image {
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.25rem);
}

body[data-site][class*="framework-"] .product-hero .detail-image > img {
  inline-size: 100%;
  block-size: clamp(12rem, 29vw, 22.5rem);
  max-inline-size: 32rem;
  border-radius: 0;
}

.product-detail-media > figure {
  margin: 0;
}

.product-detail-media > figure > .image-reference {
  margin: 0.6rem 0 0;
}

.product-angle-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.product-angle-list figure {
  margin: 0;
}

.product-angle-image {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0.5rem;
  border: 1px solid var(--site-line);
  border-radius: 0.8rem;
  overflow: hidden;
}

.product-angle-image > img {
  inline-size: 100%;
  block-size: clamp(4.5rem, 11vw, 7rem);
}

.product-angle-image:hover,
.product-angle-image:focus-visible {
  outline: 2px solid var(--site-accent);
  outline-offset: 2px;
}

.product-angle-list figcaption {
  margin: 0.4rem 0.15rem 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--site-muted);
}

@media (max-width: 600px) {
  body[data-site][class*="framework-"] :is(.product-grid, .home-collection) > .product-card > .product-image > img {
    block-size: clamp(8.5rem, 45vw, 11.75rem);
  }

  body[data-site][class*="framework-"] .product-hero .detail-image > img {
    block-size: clamp(10rem, 58vw, 15rem);
  }
}