/* =========================================================
   STORE PRODUCT IMAGES
========================================================= */

.shop-product-image img,
.product-main-visual img,
.cart-item-visual img,
.checkout-order-item-visual img {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Hide placeholder shapes when an image exists */

.shop-product-image.has-product-image::before,
.shop-product-image.has-product-image::after,
.product-main-visual.has-product-image::before,
.product-main-visual.has-product-image::after,
.cart-item-visual.has-product-image::before,
.cart-item-visual.has-product-image::after,
.checkout-order-item-visual.has-product-image::before,
.checkout-order-item-visual.has-product-image::after {
  display: none;
}


/* Keep product labels and badges above images */

.shop-product-image.has-product-image .product-badge,
.product-main-visual.has-product-image .product-badge {
  z-index: 5;
}


/* =========================================================
   SHOP IMAGE
========================================================= */

.shop-product-image img {
  transition: transform 420ms ease;
}

.shop-product-card a:hover .shop-product-image img {
  transform: scale(1.035);
}


/* =========================================================
   PRODUCT DETAILS IMAGE
========================================================= */

.product-main-visual img {
  object-position: center;
}


/* =========================================================
   CART IMAGE
========================================================= */

.cart-item-visual img {
  border-radius: var(--radius-medium);
}


/* =========================================================
   CHECKOUT IMAGE
========================================================= */

.checkout-order-item-visual img {
  border-radius: var(--radius-small);
}


/* =========================================================
   BROKEN IMAGE FALLBACK
========================================================= */

.store-product-image[hidden] {
  display: none;
}