/**
 * Complete Product Images for WoodMart & WooCommerce
 * The image frame stays 1:1; the image itself is fully visible via contain.
 */

.wmcpi-complete-images {
	--wmcpi-background: #fff;
	--wmcpi-inner-padding: 0px;
}

/* -------------------------------------------------------------------------
 * Product archives, WoodMart product grids, carousels and related products
 * ---------------------------------------------------------------------- */
.wmcpi-complete-images .product-grid-item .product-element-top,
.wmcpi-complete-images .wd-product .product-element-top,
.wmcpi-complete-images .products .product .product-element-top {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: auto !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wmcpi-background) !important;
}

.wmcpi-complete-images .product-element-top .product-image-link,
.wmcpi-complete-images .product-element-top .wd-product-image,
.wmcpi-complete-images .product-element-top .hover-img {
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	min-height: 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--wmcpi-background) !important;
}

.wmcpi-complete-images .product-element-top img,
.wmcpi-complete-images .product-grid-item .product-image-link img,
.wmcpi-complete-images .wd-product .product-image-link img {
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	padding: var(--wmcpi-inner-padding) !important;
	display: block;
	object-fit: contain !important;
	object-position: center center !important;
	background: var(--wmcpi-background) !important;
}

/* Standard WooCommerce loops and WooCommerce Blocks. */
.wmcpi-complete-images ul.products li.product img.attachment-woocommerce_thumbnail,
.wmcpi-complete-images ul.products li.product img.woocommerce-placeholder,
.wmcpi-complete-images .wc-block-grid__product-image img,
.wmcpi-complete-images .wc-block-components-product-image img,
.wmcpi-complete-images .wp-block-woocommerce-product-image img {
	box-sizing: border-box;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	margin: 0 !important;
	padding: var(--wmcpi-inner-padding) !important;
	display: block;
	object-fit: contain !important;
	object-position: center center !important;
	background: var(--wmcpi-background) !important;
}

.wmcpi-complete-images .wc-block-grid__product-image,
.wmcpi-complete-images .wc-block-components-product-image,
.wmcpi-complete-images .wp-block-woocommerce-product-image {
	background: var(--wmcpi-background) !important;
}

/* -------------------------------------------------------------------------
 * Main image on the single product page and WoodMart quick view
 * ---------------------------------------------------------------------- */
.wmcpi-complete-images .woocommerce-product-gallery__image,
.wmcpi-complete-images .woocommerce-product-gallery .product-image-wrap {
	box-sizing: border-box;
	width: 100%;
	height: auto !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wmcpi-background) !important;
}

.wmcpi-complete-images .woocommerce-product-gallery__image > a,
.wmcpi-complete-images .woocommerce-product-gallery .product-image-wrap > a {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--wmcpi-background) !important;
}

.wmcpi-complete-images .woocommerce-product-gallery__image img:not(.zoomImg),
.wmcpi-complete-images .woocommerce-product-gallery .product-image-wrap img:not(.zoomImg) {
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	padding: var(--wmcpi-inner-padding) !important;
	display: block;
	object-fit: contain !important;
	object-position: center center !important;
	background: var(--wmcpi-background) !important;
}

/* Keep WooCommerce/WoodMart hover magnification functional. */
.wmcpi-complete-images .woocommerce-product-gallery img.zoomImg {
	background: var(--wmcpi-background) !important;
}

/* -------------------------------------------------------------------------
 * Product gallery thumbnails: WooCommerce FlexSlider and WoodMart carousel
 * ---------------------------------------------------------------------- */
.wmcpi-complete-images .woocommerce-product-gallery .flex-control-thumbs li,
.wmcpi-complete-images .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item,
.wmcpi-complete-images .woocommerce-product-gallery .product-image-thumbnail.slick-slide {
	box-sizing: border-box;
	height: auto !important;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--wmcpi-background) !important;
}

.wmcpi-complete-images .woocommerce-product-gallery .flex-control-thumbs li img,
.wmcpi-complete-images .woocommerce-product-gallery .wd-gallery-thumb img,
.wmcpi-complete-images .woocommerce-product-gallery .product-image-thumbnail.slick-slide img,
.wmcpi-complete-images .woocommerce-product-gallery .thumbnails img {
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	padding: var(--wmcpi-inner-padding) !important;
	display: block;
	aspect-ratio: 1 / 1;
	object-fit: contain !important;
	object-position: center center !important;
	background: var(--wmcpi-background) !important;
}

/* Do not dim WoodMart's active thumbnail. */
.wmcpi-complete-images .woocommerce-product-gallery .wd-gallery-thumb .wd-thumb-active,
.wmcpi-complete-images .woocommerce-product-gallery .wd-gallery-thumb .wd-carousel-item:hover {
	opacity: 1 !important;
}

/* -------------------------------------------------------------------------
 * WooCommerce PhotoSwipe lightbox: original image, white canvas
 * ---------------------------------------------------------------------- */
.wmcpi-complete-images.single-product .pswp__bg {
	background: var(--wmcpi-background) !important;
	opacity: 1 !important;
}

.wmcpi-complete-images.single-product .pswp__img {
	background: var(--wmcpi-background) !important;
	object-fit: contain;
}

.wmcpi-complete-images.single-product .pswp__top-bar,
.wmcpi-complete-images.single-product .pswp__caption {
	background-color: rgba(0, 0, 0, 0.72) !important;
}

.wmcpi-complete-images.single-product .pswp__button--arrow--left,
.wmcpi-complete-images.single-product .pswp__button--arrow--right {
	background-color: rgba(0, 0, 0, 0.55) !important;
}

/* -------------------------------------------------------------------------
 * WoodMart/Magnific Popup fallback used by some gallery configurations
 * ---------------------------------------------------------------------- */
.wmcpi-complete-images.single-product .mfp-bg {
	background: var(--wmcpi-background) !important;
	opacity: 0.98 !important;
}

.wmcpi-complete-images.single-product .mfp-figure::after,
.wmcpi-complete-images.single-product img.mfp-img {
	background: var(--wmcpi-background) !important;
	box-shadow: none !important;
}

.wmcpi-complete-images.single-product img.mfp-img {
	object-fit: contain !important;
}

.wmcpi-complete-images.single-product .mfp-close {
	color: #111 !important;
}

.wmcpi-complete-images.single-product .mfp-arrow-left::after {
	border-right-color: #111 !important;
}

.wmcpi-complete-images.single-product .mfp-arrow-right::after {
	border-left-color: #111 !important;
}

/* Avoid a stale fixed height left by some sliders after responsive changes. */
@media (max-width: 1024px) {
	.wmcpi-complete-images .woocommerce-product-gallery .flex-viewport {
		background: var(--wmcpi-background) !important;
	}
}