/* =========================================================
   GALLERY
   ========================================================= */

   .woocommerce div.product div.images img {
    width: auto!important;
   }

   /* =========================================================
   FIXED GALLERY FRAME
   ========================================================= */

.custom-product-main--fixed {
	position: relative;
	width: 100%;
	overflow: hidden;

/*	aspect-ratio: 4 / 5;*/
}


/*
 * Keep the slider frame stable even when images
 * have different aspect ratios.
 */
.custom-product-main--fixed .peSlider {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}


/*
 * Volo wrapper fills the fixed frame.
 */
.custom-product-main--fixed .peSlider > .peWrap {
	height: 100% !important;
}


/*
 * Every slide gets the same height.
 */
.custom-product-main--fixed .custom-product-slide {
	height: 100% !important;

	display: flex;
	align-items: center;
	justify-content: center;

	overflow: hidden;
}


/*
 * Images keep their original proportions.
 * They never stretch or crop.
 */
.custom-product-main--fixed .custom-product-slide img {
	/*display: block;

	width: 100%;
	height: 100%;

	max-width: 100%;
	max-height: 100%;
    */

	object-fit: contain;
	object-position: center center;

	margin: 0 auto;
}


/*
 * Make sure Volo itself does not calculate
 * a different height from individual images.
 */
.custom-product-main--fixed.peSlider {
	height: auto !important;
}


.custom-product-gallery {
	width: 100%;
	position: relative;
	box-sizing: border-box;
}

.custom-product-gallery *,
.custom-product-gallery *::before,
.custom-product-gallery *::after {
	box-sizing: border-box;
}


/* =========================================================
   MAIN
   ========================================================= */

.custom-product-main {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #fff;
}


/* =========================================================
   SLIDES
   ========================================================= */

.custom-product-slide {
	position: relative;
	width: 100%;
}


/* =========================================================
   MAIN IMAGE
   ========================================================= */

.custom-product-slide img {
	display: block;

	width: 100%;
	height: auto;

	max-width: 100%;

	margin: 0 auto;

	object-fit: contain;
}


/* =========================================================
   THUMBNAILS
   ========================================================= */

.custom-product-thumbnails {
	position: relative;

	width: 100%;

	margin-top: 14px;

	overflow: hidden;
}


/* =========================================================
   THUMBNAIL TRACK
   ========================================================= */

.custom-product-thumbnails-track {
	display: flex;

	align-items: center;

	gap: 10px;

	width: 100%;

	max-width: 100%;

	overflow-x: auto;

	overflow-y: hidden;

	padding: 2px 2px 8px;

	scroll-behavior: smooth;

	scrollbar-width: thin;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

.custom-product-thumbnails-track::-webkit-scrollbar {
	height: 5px;
}

.custom-product-thumbnails-track::-webkit-scrollbar-track {
	background: #eee;

	border-radius: 10px;
}

.custom-product-thumbnails-track::-webkit-scrollbar-thumb {
	background: #aaa;

	border-radius: 10px;
}


/* =========================================================
   THUMBNAIL BUTTON
   ========================================================= */

.custom-product-thumbnail {
	flex: 0 0 82px;

	width: 82px;
	height: 82px;

	padding: 0;

	margin: 0;

	border: 2px solid transparent;

	border-radius: 4px;

	background: #fff;

	cursor: pointer;

	overflow: hidden;

	opacity: .65;

	transition:
		border-color .2s ease,
		opacity .2s ease,
		transform .2s ease;

	-webkit-appearance: none;

	appearance: none;
}


/* =========================================================
   THUMBNAIL IMAGE
   ========================================================= */

.custom-product-thumbnail img {
	display: block;

	width: 100%;

	height: 100%;

	margin: 0;

	padding: 0;

	object-fit: cover;
}


/* =========================================================
   HOVER
   ========================================================= */

.custom-product-thumbnail:hover {
	opacity: 1;

	transform: translateY(-1px);
}


/* =========================================================
   ACTIVE
   ========================================================= */

.custom-product-thumbnail.is-active {
	opacity: 1;

	border-color: #111;
}


/* =========================================================
   FOCUS
   ========================================================= */

.custom-product-thumbnail:focus-visible {
	outline: 2px solid #111;

	outline-offset: 2px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.custom-product-thumbnails {
		margin-top: 10px;
	}

	.custom-product-thumbnails-track {
		gap: 7px;
	}

	.custom-product-thumbnail {
		flex: 0 0 64px;

		width: 64px;

		height: 64px;
	}

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 768px) {

	.custom-product-thumbnail {
		flex: 0 0 90px;

		width: 90px;

		height: 90px;
	}

}