/* Product photography: the photographed object, rather than the source canvas,
   determines its visible size. Per-image measurements live in the companion CSS. */
body [data-product-image-frame] {
  position: relative;
  display: block;
  width: var(--product-frame-width, 100%) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  background: var(--product-frame-background, #f8f8f7) !important;
}

body [data-product-image-frame] > img {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  width: var(--product-image-width, 100%) !important;
  height: var(--product-image-height, 100%) !important;
  min-width: 0;
  min-height: 0;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: var(--product-image-ratio, auto);
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  transform: translate(var(--product-image-x, -50%), var(--product-image-y, -50%)) !important;
  transform-origin: 0 0;
  mix-blend-mode: normal !important;
  background: transparent;
  filter: none;
}

/* Equal border widths stop the selected thumbnail changing the image size. */
.gallery-thumbs button[data-product-image-frame] {
  --product-frame-width: 70px;
  flex: 0 0 70px;
  min-width: 70px;
  border: 2px solid var(--line);
}
.gallery-thumbs button[data-product-image-frame][aria-pressed="true"] {
  border-color: var(--orange-dark);
}

.product-mini-visual[data-product-image-frame] {
  --product-frame-width: 104px;
  flex: 0 0 104px;
  border-radius: 8px;
}
.cart-image-visual[data-product-image-frame] {
  align-self: start;
  border-radius: 9px;
}
.combo-image-visual[data-product-image-frame] {
  --product-frame-width: 70px;
  flex: 0 0 70px;
  border-radius: 6px;
}

/* Existing editorial covers keep their 3:2 shape; the product inside uses the
   same measured square as the shop and gallery. */
body [data-product-image-backdrop] {
  background: var(--product-frame-background, #f8f8f7);
}
.editorial-product-visual[data-product-image-frame] {
  --product-frame-width: 66.666667%;
  margin-inline: auto;
}
.editorial-pair-visual[data-product-image-frame] {
  --product-frame-width: calc(50% - 4px);
  flex: 0 0 calc(50% - 4px);
}
.article-product-visual[data-product-image-frame] {
  border-radius: 8px;
}

@media (max-width: 700px) {
  .gallery-thumbs button[data-product-image-frame] {
    --product-frame-width: 56px;
    flex-basis: 56px;
    min-width: 56px;
  }
  .combo-image-visual[data-product-image-frame] {
    --product-frame-width: 56px;
    flex-basis: 56px;
  }
  .product-mini-visual[data-product-image-frame] {
    --product-frame-width: 90px;
    flex-basis: 90px;
  }
}