/*
 * Product gallery v4 — bento board mosaic
 * Info v4 floats over bottom — board keeps extra padding for overlap clearance
 */

body:has(.product-gallery-v4):has(.product-info-v4) .product-container {
	display: block !important;
	grid-template-columns: 1fr !important;
	position: relative;
}

body:has(.product-gallery-v4):not(:has(.product-info-v4)) .product-container {
	grid-template-columns: 1fr !important;
}

body:has(.product-gallery-v4) .product-gallery-v4 {
	width: 100%;
	min-width: 0;
}

.product-gallery-v4__board {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(108px, 22%);
	grid-template-rows: minmax(280px, 1fr) minmax(280px, 1fr) auto;
	grid-template-areas:
		"hero side-a"
		"hero side-b"
		"strip strip";
	gap: 10px;
	min-height: min(520px, 62vh);
	padding: 12px;
	padding-bottom: clamp(120px, 16vw, 200px);
	border-radius: 28px;
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--primary-brand-color, #c9a227) 10%, transparent), transparent 55%),
		color-mix(in srgb, var(--secondary-background-color, #f3f0eb) 55%, var(--primary-background-color, #fff) 45%);
	border: 1px solid var(--sc-product-gallery-v4-board-border, color-mix(in srgb, var(--primary-title-color, #111) 9%, transparent));
	box-shadow: 0 24px 54px color-mix(in srgb, var(--primary-title-color, #111) 10%, transparent);
}

.product-gallery-v4__hero {
	grid-area: hero;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	border-radius: 22px;
	overflow: hidden;
	background: var(--sc-product-gallery-v4-hero-bg, var(--primary-background-color, #fff));
	border: 1px solid var(--sc-product-gallery-v4-hero-border, color-mix(in srgb, var(--primary-title-color, #111) 7%, transparent));
	outline: none;
}

.product-gallery-v4__hero:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-brand-color, #c9a227) 40%, transparent);
}

.product-gallery-v4 .main-image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 280px;
	max-height: min(560px, 58vh);
	object-fit: contain;
	padding: clamp(14px, 2.5vw, 24px);
	margin: 0;
	cursor: grab;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	user-select: none;
}

.product-gallery-v4 .main-image:active {
	cursor: grabbing;
}

.product-gallery-v4__side {
	grid-row: 1 / 3;
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	position: relative;
	z-index: 2;
}

.product-gallery-v4__side-pick,
.product-gallery-v4__strip-pick {
	display: block;
	width: 100%;
	padding: 0;
	border: 2px solid var(--sc-product-gallery-v4-side-pick-border, color-mix(in srgb, var(--primary-title-color, #111) 10%, transparent));
	border-radius: 18px;
	overflow: hidden;
	background: var(--sc-product-gallery-v4-side-pick-bg, var(--primary-background-color, #fff));
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		transform 0.18s ease,
		box-shadow 0.2s ease;
}

.product-gallery-v4__side-pick {
	flex: 1 1 0;
	min-height: 0;
}

.product-gallery-v4__side-pick:hover,
.product-gallery-v4__strip-pick:hover {
	transform: translateY(-2px);
	border-color: var(--sc-product-gallery-v4-side-pick-hover-border, color-mix(in srgb, var(--primary-brand-color, #c9a227) 45%, transparent));
}

.product-gallery-v4__side-pick.is-active,
.product-gallery-v4__strip-pick.is-active {
	border-color: var(--sc-product-gallery-v4-side-pick-is-active-border, var(--primary-brand-color, #c9a227));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-brand-color, #c9a227) 24%, transparent);
}

.product-gallery-v4__side-pick .thumbnail,
.product-gallery-v4__strip-pick .thumbnail {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 88px;
	object-fit: cover;
	border: none;
	margin: 0;
	padding: 0;
	background: var(--sc-product-gallery-v4-thumbnail-bg, transparent);
}

.product-gallery-v4__strip-wrap {
	grid-area: strip;
	min-width: 0;
	position: relative;
	z-index: 2;
}

.product-gallery-v4 .thumbnail-container.product-gallery-v4__strip {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	padding: 4px 2px 2px;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
}

.product-gallery-v4__strip-pick {
	flex: 0 0 auto;
	width: 84px;
	height: 64px;
	scroll-snap-align: start;
	border-radius: 14px;
}

.product-gallery-v4__strip-pick .thumbnail {
	min-height: 0;
	height: 100%;
	object-fit: cover;
}

.product-gallery-v4__hero .out-of-stock-badge,
.product-gallery-v4__hero .discount-badge,
.product-gallery-v4__hero .product-badge {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	inset-inline-start: auto;
	z-index: 4;
}

.product-gallery-v4__board:not(:has(.product-gallery-v4__side)) {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "hero";
	min-height: min(460px, 55vh);
}

@media (max-width: 768px) {
	.product-gallery-v4__board {
		grid-template-columns: 1fr 92px;
		grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr) auto;
		min-height: 0;
		padding: 10px;
		padding-bottom: clamp(100px, 22vw, 150px);
		border-radius: 20px;
	}

	.product-gallery-v4 .main-image {
		min-height: 220px;
		max-height: min(420px, 50vh);
	}

	.product-gallery-v4__strip-pick {
		width: 72px;
		height: 56px;
	}
}

@media (max-width: 520px) {
	.product-gallery-v4__board:has(.product-gallery-v4__side) {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"hero"
			"side-a"
			"strip";
	}

	.product-gallery-v4__side {
		flex-direction: row;
		grid-area: side-a;
	}

	.product-gallery-v4__side-pick {
		flex: 1 1 0;
	}

	.product-gallery-v4__side-pick:last-child:nth-child(2) {
		max-width: 50%;
	}
}