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

.pcint-product-gallery__main {
	margin-bottom: 15px;
	touch-action: pan-y;
	user-select: none;
	position: relative;
	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);
	padding: 15px;
}

.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;
}

/* 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;
}
@media (hover: none) {

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

}

/* Thumbs */
.pcint-gallery-thumbs-wrapper {
	display: grid;
	grid-template-columns: auto auto auto;
justify-content: center;
	align-items: center;
	gap: 10px;
}
.pcint-product-gallery__thumbs {
	display: flex;
	gap: 7px;

	margin: 0;
	padding: 0;

	list-style: none;
	
	flex: 1;

	overflow-x: auto;
	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
	);
}
.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;

	padding: 5px;
	border: 1px solid #ededed;
	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;
}

/* Thumb Nav */

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

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