/* Nuzzelo Product Image System
 * This layer deliberately uses contain, not cover, so product edges and
 * proportions remain visible on both the card and the product gallery.
 */

:root {
  --nuzzelo-image-bg: #ffffff;
  --nuzzelo-image-line: rgba(36, 50, 61, 0.08);
}

.woocommerce ul.products li.product figure,
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.wc-block-grid__product-image,
.wc-block-grid__product-image a {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  min-height: 0 !important;
  background: var(--nuzzelo-image-bg) !important;
  overflow: hidden !important;
}

.woocommerce ul.products li.product figure .ct-media-container,
.woocommerce ul.products li.product figure .woocommerce-loop-product__link,
.wc-block-grid__product-image a {
  display: grid !important;
  place-items: center !important;
  padding: 12px !important;
}

.woocommerce ul.products li.product figure img,
.woocommerce ul.products li.product .ct-media-container img,
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.wc-block-grid__product-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--nuzzelo-image-bg) !important;
}

.woocommerce ul.products li.product figure img {
  transition: transform 220ms ease;
}

.woocommerce ul.products li.product:hover figure img {
  transform: scale(1.02);
}

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery__wrapper,
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image a,
.woocommerce div.product .woocommerce-product-gallery .flexy-item,
.woocommerce div.product .woocommerce-product-gallery .ct-media-container {
  width: 100% !important;
  min-height: 0 !important;
  background: var(--nuzzelo-image-bg) !important;
}

.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image a,
.woocommerce div.product .woocommerce-product-gallery .flexy-item {
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .woocommerce-product-gallery .flexy-item img,
.woocommerce div.product .woocommerce-product-gallery .ct-media-container img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--nuzzelo-image-bg) !important;
}

.single-product .flexy-pills[data-type="thumbs"] li,
.single-product .flexy-pills[data-type="thumbs"] .ct-media-container,
.single-product .flexy-pills[data-type="thumbs"] a,
.single-product .flexy-pills[data-type="thumbs"] img {
  aspect-ratio: 1 / 1 !important;
  background: var(--nuzzelo-image-bg) !important;
}

.single-product .flexy-pills[data-type="thumbs"] .ct-media-container,
.single-product .flexy-pills[data-type="thumbs"] a {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.single-product .flexy-pills[data-type="thumbs"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

.woocommerce-cart-form .product-thumbnail img,
.woocommerce-mini-cart .mini_cart_item img,
.woocommerce ul.products li.product img {
  background: var(--nuzzelo-image-bg) !important;
}

@media (max-width: 767px) {
  .woocommerce ul.products li.product figure .ct-media-container,
  .woocommerce ul.products li.product figure .woocommerce-loop-product__link,
  .wc-block-grid__product-image a {
    padding: 8px !important;
  }

  .woocommerce div.product .woocommerce-product-gallery__image,
  .woocommerce div.product .woocommerce-product-gallery__image a,
  .woocommerce div.product .woocommerce-product-gallery .flexy-item {
    aspect-ratio: 1 / 1 !important;
  }

  .single-product .flexy-pills[data-type="thumbs"] .ct-media-container,
  .single-product .flexy-pills[data-type="thumbs"] a,
  .single-product .flexy-pills[data-type="thumbs"] img {
    object-fit: contain !important;
  }
}