/**
 * Product gallery shortcode.
 */

.product-images-grid {
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.product-images-grid-desktop {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.product-images-grid--single .product-images-grid-desktop {
	grid-template-columns: minmax(0, 1fr);
}

.product-image-item {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
}

.product-image-item img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-images-swiper,
.product-images-swiper-mobile {
	display: none;
}

@media (max-width: 768px) {
	.product-images-grid-desktop {
		display: none;
	}

	.product-images-swiper {
		box-sizing: border-box;
		display: block;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	.product-images-swiper .swiper-wrapper {
		box-sizing: border-box;
		display: flex;
		width: 100%;
		height: 100%;
		transition-property: transform;
		will-change: transform;
	}

	.product-images-swiper .swiper-slide {
		box-sizing: border-box;
		display: block;
		flex-grow: 0;
		flex-shrink: 0;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		height: auto;
	}

	.product-images-swiper.swiper-container {
		overflow: hidden;
	}

	.product-images-swiper-mobile {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.product-images-counter {
		box-sizing: border-box;
		width: 100%;
		margin-top: 1rem;
		color: rgba(0, 0, 0, 0.6);
		font-size: 0.875rem;
		font-weight: 500;
		text-align: center;
	}

	.product-images-counter .counter-current {
		color: rgba(0, 0, 0, 0.9);
		font-weight: 600;
	}
}

@media (min-width: 769px) {
	.product-images-swiper,
	.product-images-swiper-mobile {
		display: none;
	}
}