/* =========================================================
   GLOBAL STYLE
   ========================================================= */



/* =========================================================
   STANDARD STYLE
   ========================================================= */
   
.pcint-product-gallery.pcint-product-gallery-style-standard {
	--thumb-padding: 5px;
	--thumb-border: 1px;
}
.pcint-product-gallery-style-standard .pcint-product-gallery__main {
	padding: 15px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.12);
}
.pcint-product-gallery-style-standard .pcint-gallery-thumb {
	padding: var(--thumb-padding);
	border: var(--thumb-border) solid #ededed;
}
   
   
/* =========================================================
   GAMING STYLE
   ========================================================= */
.pcint-product-gallery.pcint-product-gallery-style-prebuilt {
	--thumb-padding: 0px;
	--thumb-border: 1px;
}
.pcint-product-gallery-style-prebuilt .pcint-gallery-thumb {
	padding: var(--thumb-padding);
	border: var(--thumb-border) solid #ededed;
	border-radius: 10px;
}
.pcint-product-gallery-style-prebuilt .pcint-product-gallery__main,
.pcint-product-gallery-style-prebuilt .pcint-product-gallery__main img {
	border-radius: 10px;
}
.pcint-product-gallery-style-prebuilt .pcint-gallery-thumb,
.pcint-product-gallery-style-prebuilt .pcint-gallery-thumb img {
	border-radius: 10px;
}



/* =========================================================
   GLOBAL LAYOUT
   ========================================================= */

.pcint-product-gallery {
	width: 100%;
	--thumb-size: 80px;
	--thumb-gap: 7px;
}

.pcint-product-gallery__main {
	touch-action: pan-y;
	user-select: none;
	position: relative;
}


.pcint-product-gallery__main img {
	display: block;
	width: 100%;
	height: auto;

	-webkit-user-drag: none;
	user-select: none;

	opacity: 1;
	transition: opacity 0.2s ease;
}


.pcint-product-gallery__main img.is-changing {
	opacity: 0;
}

/*-------- Main Image Arrows --------*/

.pcint-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);

	width: 26px;
	height: 26px;

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

	border: 0;
	border-radius: 50%;

	background: rgba(80, 80, 80, 0.85);
	color: #fff;

	cursor: pointer;

	opacity: 0;
	visibility: hidden;

	transition:
		opacity 0.2s ease,
		background 0.2s ease;
}


.pcint-gallery-prev {
	left: -15px;
}


.pcint-gallery-next {
	right: -15px;
}


.pcint-gallery-arrow:hover {
	background: rgba(50, 50, 50, 0.95);
	transform: translateY(-50%) scale(1.05);
}


.pcint-product-gallery__main:hover .pcint-gallery-arrow {
	opacity: 1;
	visibility: visible;
}


.pcint-gallery-arrow i {
	font-size: 16px;
	line-height: 1;
	pointer-events: none;
}


/* Touch devices */

@media (hover: none) {

	.pcint-gallery-arrow {
		opacity: 1;
		visibility: visible;
	}

}


/*-------- Thumbnails --------*/

.pcint-gallery-thumbs-wrapper {
	display: grid;
	gap: var(--thumb-gap);
}
.pcint-product-gallery__thumbs::-webkit-scrollbar {
	display: none;
}

.pcint-product-gallery__thumbs li {
	margin: 0;
	padding: 0;

	scroll-snap-align: start;
	flex-shrink: 0;
}
.pcint-gallery-thumb {
	display: block;
	background: none;
	cursor: pointer;
}
.pcint-gallery-thumb:hover {
	transform: scale(1.08);
}
.pcint-gallery-thumb.active {
	border-color: #b44b4;
}
.pcint-gallery-thumb img {
	display: block;

	width: var(--thumb-size);
	height: var(--thumb-size);

	object-fit: cover;
}


/*-------- Thumbnail Navigation --------*/

.pcint-gallery-thumb-nav {
	border: 0;
	color: #080f5b;
	background: transparent;
	cursor: pointer;

	font-family: "Font Awesome 6 Free";
	font-weight: 900;

	width: 25px;
	height: 25px;

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

.pcint-gallery-thumb-nav.is-disabled {
	opacity: .4;
	cursor: default;
	pointer-events: none;
	color: #666;
}

.pcint-gallery-thumb-nav.is-disabled {
	opacity: .4;
	cursor: default;
	pointer-events: none;
	color: #666;
}




/* =========================================================
   HORIZONTAL LAYOUT
   ========================================================= */


#pcint-product-gallery-horizontal .pcint-product-gallery__main {
	margin-bottom: 15px;
	
}


/*-------- Thumbnails --------*/

#pcint-product-gallery-horizontal .pcint-gallery-thumbs-wrapper {
	grid-template-columns: auto auto auto;
	justify-content: center;
	align-items: center;
}
#pcint-product-gallery-horizontal .pcint-product-gallery__thumbs {
	display: flex;
	gap: var(--thumb-gap);

	margin: 0;
	padding: 0;

	list-style: none;

	flex: 1;

	overflow-x: auto;
	overflow-y: hidden;

	scroll-behavior: smooth;

	scrollbar-width: none;
	-ms-overflow-style: none;

	scroll-snap-type: x proximity;

	width: calc(
		(var(--thumb-size) * 3) +
		(var(--thumb-gap) * 2) +
		30px
	);
}

/*-------- Thumbnail Navigation --------*/

#pcint-product-gallery-horizontal .pcint-gallery-thumb-prev::before {
	content: "\f104";
}


#pcint-product-gallery-horizontal .pcint-gallery-thumb-next::before {
	content: "\f105";
}


/* =========================================================
   VERTICAL LAYOUT
   ========================================================= */

#pcint-product-gallery-vertical {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 15px;
}


#pcint-product-gallery-vertical .pcint-product-gallery__main {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
}




/*-------- Thumbnails --------*/

#pcint-product-gallery-vertical .pcint-gallery-thumbs-wrapper {
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr auto;
	gap: var(--thumb-gap);
	flex: 0 0 calc(
		var(--thumb-size) +
		(var(--thumb-padding) * 2) +
		(var(--thumb-border) * 2)
	);

	width: calc(
		var(--thumb-size) +
		(var(--thumb-padding) * 2) +
		(var(--thumb-border) * 2)
	);
}

#pcint-product-gallery-vertical .pcint-product-gallery__thumbs {
	display: flex;
	flex-direction: column;

	gap: var(--thumb-gap);

	margin: 0;
	padding: 0;

	list-style: none;

	width: calc(
		var(--thumb-size) +
		(var(--thumb-padding) * 2) +
		(var(--thumb-border) * 2)
	);

	overflow-x: hidden;
	overflow-y: auto;

	scroll-behavior: smooth;

	scrollbar-width: none;
	-ms-overflow-style: none;

	scroll-snap-type: y proximity;
}

@media (min-width: 700px) {
		#pcint-product-gallery-vertical .pcint-product-gallery__thumbs {
	
			height: calc(
				(
					var(--thumb-size) +
					(var(--thumb-padding) * 2) +
					(var(--thumb-border) * 2)
				) * 5
				+
				(var(--thumb-gap) * 4)
			);

			max-height: calc(
				(
					var(--thumb-size) +
					(var(--thumb-padding) * 2) +
					(var(--thumb-border) * 2)
				) * 5
				+
				(var(--thumb-gap) * 4)
			);
	}
}
@media (min-width: 600px) and (max-width: 699.99px) {
		#pcint-product-gallery-vertical .pcint-product-gallery__thumbs {
	
			height: calc(
				(
					var(--thumb-size) +
					(var(--thumb-padding) * 2) +
					(var(--thumb-border) * 2)
				) * 4
				+
				(var(--thumb-gap) * 3)
			);

			max-height: calc(
				(
					var(--thumb-size) +
					(var(--thumb-padding) * 2) +
					(var(--thumb-border) * 2)
				) * 4
				+
				(var(--thumb-gap) * 3)
			);
	}
}
@media (min-width: 500px) and (max-width: 599.99px) {
		#pcint-product-gallery-vertical .pcint-product-gallery__thumbs {
	
			height: calc(
				(
					var(--thumb-size) +
					(var(--thumb-padding) * 2) +
					(var(--thumb-border) * 2)
				) * 3
				+
				(var(--thumb-gap) * 2)
			);

			max-height: calc(
				(
					var(--thumb-size) +
					(var(--thumb-padding) * 2) +
					(var(--thumb-border) * 2)
				) * 3
				+
				(var(--thumb-gap) * 2)
			);
	}
}
@media (max-width: 500px) {
	#pcint-product-gallery-vertical .pcint-product-gallery__thumbs {
	
			height: calc(
				(
					var(--thumb-size) +
					(var(--thumb-padding) * 2) +
					(var(--thumb-border) * 2)
				) * 2
				+
				(var(--thumb-gap) * 1)
			);

			max-height: calc(
				(
					var(--thumb-size) +
					(var(--thumb-padding) * 2) +
					(var(--thumb-border) * 2)
				) * 2
				+
				(var(--thumb-gap) * 1)
			);
	}
}



/*-------- Thumbnail Navigation --------*/

#pcint-product-gallery-vertical .pcint-gallery-thumb-nav {
	margin: 0 auto;
}

#pcint-product-gallery-vertical .pcint-gallery-thumb-prev::before {
	content: "\f106";
}


#pcint-product-gallery-vertical .pcint-gallery-thumb-next::before {
	content: "\f107";
}