:root {
	--main-size: 100%;
	--thumb-size: 96px;
	--thumb-gap: 10px;
	--nav-w-mobile: 30px;
	--thumbs-visible-mobile: 3;

	--thumbs-row-gap-mobile: 8px; /* must match .thumbs-slider gap on mobile */
}

.zoom-wrap {
	width: var(--main-size);
	height: var(--main-size);
	max-width: none;
	aspect-ratio: 1;
	height: auto;
	position: relative;
	overflow: hidden;
	display: inline-block;
	text-align: center;
}
.zoom-wrap > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.zoom-wrap .drift-zoom-pane.drift-inline {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	transform: none !important;
	z-index: 10 !important;
}

.thumbs .item {
	width: auto;
	height: 150px;
	aspect-ratio: 1;
}
.thumbs img {
	max-width: 100%;
	max-height: 100%;
	cursor: pointer;
	opacity: .7;
}
.thumbs img.is-active { opacity: 1; outline: 2px solid #333; }

.product-view {
	display: flex;
	gap: 15px;
	align-items: flex-start;
}

/* Slider base */
.thumbs-slider {
	width: var(--thumb-col);
	height: var(--main-size);
	display: flex;
	flex-direction: column; /* vertical by default */
	gap: 8px;
}

@media(min-width: 768px) {
	.thumbs-slider {
		max-height: 500px;
	}
}


.thumbs-nav {
	height: var(--nav-size);
	width: 100%;
	cursor: pointer;
	user-select: none;
}

.thumbs-viewport {
	flex: 1 1 auto;
	overflow: hidden;
	position: relative;
	border: 0;
}

.thumbs-track {
	display: flex;
	flex-direction: column;
	gap: var(--thumb-gap);
	will-change: transform;
	transform: translate3d(0,0,0);
	transition: transform 180ms ease;
}

.zoom-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--thumb-size);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	opacity: .7;
}


.zoom-thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.thumb.is-active {
	opacity: 1;
	outline: 2px solid #333;
}

/* Disabled state for arrows */
.thumbs-nav[disabled] {
	opacity: .35;
	cursor: default;
}

.thumb,
.thumbs-nav {
	box-sizing: border-box;
	padding: 0;
	border: 0;
	background: transparent;
	min-width: 0;
	line-height: 1;
}

/* Responsive: small screens -> horizontal under image */
@media (max-width: 768px) {

	.product-view {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.zoom-wrap { order: 1; }
	.thumbs-slider { order: 2; }

	.thumbs-slider {
		width: 100%;
		height: auto;
		flex-direction: row;
		align-items: stretch;
		gap: var(--thumbs-row-gap-mobile);
		justify-content: center; /* optional: nicer alignment */
	}

	.thumbs-nav {
		flex: 0 0 var(--nav-w-mobile);
		width: var(--nav-w-mobile);
		height: var(--thumb-size);
		padding: 0;
		box-sizing: border-box;
	}

	.thumbs-viewport {
		flex: 0 1 auto;
		height: var(--thumb-size);
		overflow: hidden;

		/* desired width for N thumbs */
		--desired: calc(
			(var(--thumbs-visible-mobile) * var(--thumb-size)) +
			((var(--thumbs-visible-mobile) - 1) * var(--thumb-gap))
		);

		/* available width inside the row (100% minus 2 arrows minus 2 gaps) */
		--available: calc(
			100% - (2 * var(--nav-w-mobile)) - (2 * var(--thumbs-row-gap-mobile))
		);

		/* take the smaller of desired vs available (prevents next button overflow) */
		width: min(var(--desired), var(--available));
	}

	.thumbs-track {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: nowrap;
		width: max-content;
		gap: var(--thumb-gap);
	}

	.zoom-thumb {
		flex: 0 0 var(--thumb-size);
		width: var(--thumb-size);
		height: var(--thumb-size);
		min-width: var(--thumb-size);
		padding: 0;
		border: 0;
		background: transparent;
		box-sizing: border-box;
	}

	.thumbs-prev span,
	.thumbs-next span {
		display: inline-block;
		transform: rotate(-90deg);
	}
}