.gpc-gallery-wrapper {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 100%;
}

.gpc-main-image-container {
	position: relative;
	width: 100%;
	height: 600px;
	overflow: hidden;
	background-color: #f9f9f9;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gpc-main-image {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Can be overridden by controls */
	transition: opacity 0.3s ease-in-out, transform 0.2s ease-out;
	will-change: transform, opacity;
}

.gpc-main-image.fade-out {
	opacity: 0;
}

/* Zoom effect */
.gpc-gallery-wrapper[data-zoom="true"] .gpc-main-image-container {
	cursor: zoom-in;
}

.gpc-gallery-wrapper.is-zoomed .gpc-main-image-container {
	cursor: zoom-out;
}

.gpc-thumbnails-wrapper {
	width: 100%;
	overflow-x: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
}

.gpc-thumbnails-wrapper::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

.gpc-thumbnails-container {
	display: flex;
	gap: 15px;
	padding: 5px 0;
}

.gpc-thumbnail {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	transition: opacity 0.3s ease;
	opacity: 0.6;
}

.gpc-thumbnail:hover {
	opacity: 0.8;
}

.gpc-thumbnail.active {
	opacity: 1;
}

.gpc-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Can be overridden by controls */
	display: block;
}

@media (max-width: 767px) {
	.gpc-main-image-container {
		height: 400px;
	}
	.gpc-thumbnail {
		width: 60px;
		height: 60px;
	}
}