/*
 * Product gallery v2 — vertical thumbnail rail + framed hero stage
 * Research: premium PDP pattern (side thumbs + large stage; scrollable rail for many images).
 * Scoped to .product-gallery-v2 — does not affect v1.
 */

.product-gallery-v2 {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow-x: clip;
	--pg2-rail-width: 84px;
	--pg2-stage-radius: 22px;
	--pg2-thumb-size: 76px;
}

.product-gallery-v2__layout {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: clamp(14px, 2.2vw, 24px);
	min-width: 0;
}

/* Thumbnail rail */
.product-gallery-v2 .thumbnail-container.product-gallery-v2__thumbs {
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--pg2-rail-width);
	width: var(--pg2-rail-width);
	min-width: 0;
	gap: 10px;
	max-height: min(560px, 72vh);
	overflow-y: auto;
	overflow-x: hidden;
	padding: 6px 4px 6px 2px;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--primary-brand-color, #c9a227) 45%, transparent) transparent;
}

.product-gallery-v2 .thumbnail-container.product-gallery-v2__thumbs::-webkit-scrollbar {
	width: 6px;
}

.product-gallery-v2 .thumbnail-container.product-gallery-v2__thumbs::-webkit-scrollbar-thumb {
	background: var(--sc-product-gallery-v2-thumbs-bg, color-mix(in srgb, var(--primary-brand-color, #c9a227) 40%, transparent));
	border-radius: 999px;
}

.product-gallery-v2 .thumbnail {
	width: var(--pg2-thumb-size);
	height: var(--pg2-thumb-size);
	min-height: var(--pg2-thumb-size);
	object-fit: contain;
	border-radius: 14px;
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.18s ease,
		background 0.2s ease;
	border: 2px solid var(--sc-product-gallery-v2-thumbnail-border, color-mix(in srgb, var(--primary-title-color, #111) 10%, transparent));
	background: var(--sc-product-gallery-v2-thumbnail-bg, color-mix(in srgb, var(--primary-background-color, #fff) 92%, var(--secondary-background-color, #f5f2ed) 8%));
	box-shadow: 0 1px 0 color-mix(in srgb, var(--primary-title-color, #111) 6%, transparent);
}

.product-gallery-v2 .thumbnail:hover {
	transform: translateY(-2px);
	border-color: var(--sc-product-gallery-v2-thumbnail-hover-border, color-mix(in srgb, var(--primary-brand-color, #c9a227) 45%, transparent));
	box-shadow: 0 8px 22px color-mix(in srgb, var(--primary-title-color, #111) 12%, transparent);
}

.product-gallery-v2 .thumbnail.active {
	border-color: var(--sc-product-gallery-v2-thumbnail-active-border, var(--primary-brand-color, #c9a227));
	box-shadow:
		0 0 0 3px color-mix(in srgb, var(--primary-brand-color, #c9a227) 28%, transparent),
		0 10px 26px color-mix(in srgb, var(--primary-title-color, #111) 14%, transparent);
	transform: translateY(-1px);
}

/* Hero stage */
.product-gallery-v2__stage {
	flex: 1;
	min-width: 0;
	display: flex;
}

.product-gallery-v2__stage-inner {
	width: 100%;
	border-radius: var(--pg2-stage-radius);
	padding: clamp(12px, 2vw, 20px);
	background:
		linear-gradient(
			145deg,
			color-mix(in srgb, var(--secondary-background-color, #f5f2ed) 55%, var(--primary-background-color, #fff) 45%),
			color-mix(in srgb, var(--primary-background-color, #fff) 88%, var(--secondary-background-color, #f5f2ed) 12%)
		);
	border: 1px solid var(--sc-product-gallery-v2-stage-inner-border, color-mix(in srgb, var(--primary-title-color, #111) 9%, transparent));
	box-shadow:
		0 1px 0 color-mix(in srgb, var(--primary-title-color, #111) 5%, transparent),
		0 22px 50px color-mix(in srgb, var(--primary-title-color, #111) 10%, transparent);
	position: relative;
	overflow: hidden;
}

.product-gallery-v2__stage-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(
		120% 80% at 50% 0%,
		color-mix(in srgb, var(--primary-brand-color, #c9a227) 14%, transparent),
		transparent 55%
	);
	opacity: 0.35;
}

.product-gallery-v2 .main-image {
	position: relative;
	z-index: 1;
	width: 100%;
	height: min(520px, 58vh);
	max-height: 560px;
	object-fit: contain;
	border-radius: calc(var(--pg2-stage-radius) - 8px);
	margin: 0;
	cursor: zoom-in;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-gallery-v2 .main-image:hover {
	transform: scale(1.015);
}

/* Tag badge over hero image (inside stage, not full gallery — avoids RTL thumb overlap) */
.product-gallery-v2__stage-inner .product-badge,
.product-gallery-v2__stage-inner .out-of-stock-badge,
.product-gallery-v2__stage-inner .discount-badge {
	position: absolute;
	top: clamp(16px, 2.5vw, 28px);
	inset-inline-end: clamp(16px, 2.5vw, 28px);
	inset-inline-start: auto;
	width: fit-content;
	max-width: calc(100% - 32px);
	white-space: nowrap;
	z-index: 3;
}

.product-gallery-v2__stage-inner .product-badge {
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-title-color, #111) 18%, transparent);
}

/* RTL: rail on the visual right */
[dir="rtl"] .product-gallery-v2__layout,
html[dir="rtl"] .product-gallery-v2__layout {
	flex-direction: row-reverse;
}

@media (max-width: 992px) {
	.product-gallery-v2 {
		--pg2-rail-width: 76px;
		--pg2-thumb-size: 68px;
	}

	.product-gallery-v2 .main-image {
		height: min(440px, 52vh);
	}
}

@media (max-width: 768px) {
	.product-gallery-v2__layout {
		flex-direction: column-reverse;
		gap: 14px;
	}

	.product-gallery-v2 .thumbnail-container.product-gallery-v2__thumbs {
		flex-direction: row;
		flex-wrap: nowrap;
		width: 100%;
		flex: 0 0 auto;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 4px 2px 8px;
		gap: 10px;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}

	.product-gallery-v2 .thumbnail {
		flex: 0 0 var(--pg2-thumb-size);
		scroll-snap-align: start;
	}

	.product-gallery-v2 .main-image {
		height: min(380px, 48vh);
	}

	[dir="rtl"] .product-gallery-v2__layout,
	html[dir="rtl"] .product-gallery-v2__layout {
		flex-direction: column-reverse;
	}
}

@media (max-width: 576px) {
	.product-gallery-v2 {
		--pg2-thumb-size: 64px;
		--pg2-rail-width: 100%;
	}

	.product-gallery-v2 .main-image {
		height: min(320px, 45vh);
	}
}