/*
 * Product images are emitted by Next.js with their fill geometry in a style
 * attribute. The production CSP intentionally blocks style attributes, so the
 * browser otherwise falls back to the intrinsic srcset width and leaves many
 * product images looking much smaller than their frame. Keep the same fill
 * geometry in a shared external stylesheet instead.
 */
.catalog-product-visual {
  position: relative;
  overflow: hidden;
}

.catalog-product-card .catalog-product-image,
.product-detail-image-link .catalog-product-image {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-position: center !important;
}

.product-detail-image-link .catalog-product-image {
  object-fit: contain !important;
}

.product-detail-image-link .catalog-product-image--cutout {
  padding: clamp(16px, 4%, 26px) !important;
}

@media (max-width: 720px) {
  .product-detail-image-link .catalog-product-image--cutout {
    padding: clamp(12px, 3.5%, 18px) !important;
  }
}