/* GC Product Gallery — layout is driven by CSS variables set from Elementor controls. */

.gcpg {
	--gcpg-dir: row;
	--gcpg-gap: 16px;
	--gcpg-thumb-w: 104px;
	--gcpg-thumb-ratio: 1/1;
	--gcpg-thumb-fit: cover;
	--gcpg-thumbs-gap: 12px;
	--gcpg-thumbs-dir: column;
	--gcpg-thumbs-w: var(--gcpg-thumb-w);
	--gcpg-thumbs-pos: absolute;
	--gcpg-thumbs-display: block;
	--gcpg-ratio: 4/5;
	--gcpg-main-h: auto;
	--gcpg-fit: cover;
	--gcpg-pos: center center;
	--gcpg-zoom: 2;
	--gcpg-arrows-display: flex;
	--gcpg-arrows-x: 16px;
	--gcpg-arrows-y: 16px;
	--gcpg-arrows-gap: 8px;
	--gcpg-speed: 450ms;
	--gcpg-easing: cubic-bezier(.22, .61, .36, 1);

	position: relative;
	display: flex;
	flex-direction: var(--gcpg-dir);
	gap: var(--gcpg-gap);
	width: 100%;
}

.gcpg *,
.gcpg *::before,
.gcpg *::after {
	box-sizing: border-box;
}

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

.gcpg__thumbs {
	display: var(--gcpg-thumbs-display);
	position: relative;
	flex: 0 0 auto;
	width: var(--gcpg-thumbs-w);
	min-width: 0;
}

/* Vertical strip is absolutely positioned so it never stretches the gallery taller than the main image. */
.gcpg__thumbs-inner {
	position: var(--gcpg-thumbs-pos);
	inset: 0;
	display: flex;
	flex-direction: var(--gcpg-thumbs-dir);
	gap: var(--gcpg-thumbs-gap);
	overflow: auto;
	overscroll-behavior: contain;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.gcpg__thumbs-inner::-webkit-scrollbar {
	display: none;
}

.gcpg .gcpg__thumb,
.gcpg .gcpg__thumb:hover,
.gcpg .gcpg__thumb:focus {
	appearance: none;
	display: block;
	flex: 0 0 auto;
	width: var(--gcpg-thumb-w);
	aspect-ratio: var(--gcpg-thumb-ratio);
	margin: 0;
	padding: 0;
	border: 0 solid transparent;
	border-radius: 0;
	background: transparent;
	color: inherit;
	box-shadow: none;
	line-height: 0;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .2s, opacity .2s, background-color .2s, box-shadow .2s;
}

.gcpg .gcpg__thumb:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.gcpg .gcpg__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: var(--gcpg-thumb-fit);
	pointer-events: none;
	transition: filter .2s;
}

/* Main image ---------------------------------------------------------- */

.gcpg__main {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.gcpg__viewport {
	position: relative;
	width: 100%;
	height: var(--gcpg-main-h);
	aspect-ratio: var(--gcpg-ratio);
	overflow: hidden;
	touch-action: pan-y;
}

.gcpg__track {
	display: flex;
	height: 100%;
	transition: transform var(--gcpg-speed) var(--gcpg-easing);
	will-change: transform;
}

.gcpg__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.gcpg__link {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

a.gcpg__link {
	cursor: zoom-in;
}

.gcpg .gcpg__image {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: var(--gcpg-fit);
	object-position: var(--gcpg-pos);
	user-select: none;
	-webkit-user-drag: none;
	transition: transform .25s ease-out, filter .2s;
}

/* Fade effect */
.gcpg--fade .gcpg__track {
	display: block;
	position: relative;
	transform: none !important;
}

.gcpg--fade .gcpg__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--gcpg-speed) var(--gcpg-easing), visibility 0s linear var(--gcpg-speed);
}

.gcpg--fade .gcpg__slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition: opacity var(--gcpg-speed) var(--gcpg-easing), visibility 0s;
}

.gcpg--dragging .gcpg__track,
.gcpg--no-anim .gcpg__track,
.gcpg--no-anim .gcpg__slide {
	transition: none !important;
}

.gcpg--dragging .gcpg__viewport {
	cursor: grabbing;
}

/* Hover zoom */
.gcpg--zoom .gcpg__slide.is-zooming .gcpg__image {
	transform: scale(var(--gcpg-zoom));
}

/* Arrows -------------------------------------------------------------- */

.gcpg__arrows {
	position: absolute;
	z-index: 3;
	top: var(--gcpg-arrows-y);
	right: var(--gcpg-arrows-x);
	display: var(--gcpg-arrows-display);
	gap: var(--gcpg-arrows-gap);
	pointer-events: none;
}

.gcpg .gcpg__arrow,
.gcpg .gcpg__arrow:hover,
.gcpg .gcpg__arrow:focus {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	margin: 0;
	padding: 0;
	border: 0 solid transparent;
	border-radius: 0;
	background-color: #F4F4EE;
	color: #0B0B0B;
	box-shadow: none;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
	transition: background-color .2s, color .2s, border-color .2s, opacity .2s, box-shadow .2s;
}

.gcpg .gcpg__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.gcpg .gcpg__arrow:disabled {
	cursor: default;
}

.gcpg__arrow i {
	font-size: inherit;
	line-height: 1;
}

.gcpg__arrow svg {
	display: block;
	width: 1em;
	height: 1em;
}

.gcpg__arrow svg:not(.gcpg__icon-default) {
	fill: currentColor;
}

/* Single image: nothing to navigate */
.gcpg--single .gcpg__arrows,
.gcpg--single .gcpg__thumbs {
	display: none;
}

/* Editor notice */
.gcpg-notice {
	margin-bottom: 8px;
	padding: 10px 14px;
	background: #FFF3CD;
	color: #664D03;
	font-size: 13px;
	line-height: 1.4;
}