/* Single-row, centered, JS-driven thumbnail slider with edge fades.
   Supersedes the plain drag-scroll-only version — replace, don't stack. */

.thumbs-slider {
	position: relative;
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.woocommerce div.product div.images .flex-control-thumbs::-webkit-scrollbar {
	display: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: auto;
	flex: 0 0 auto;
	scroll-snap-align: center;
}

.woocommerce div.product div.images .flex-control-thumbs li img {
	width: 100px;
	height: 100px;
}

/* Edge fades — adjust the white to match your actual gallery background if it isn't pure white. */
.thumbs-slider__fade {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 32px;
	pointer-events: none;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.thumbs-slider__fade--left {
	left: 0;
	background: linear-gradient( to right, #f1f4f4, rgba( 255, 255, 255, 0 ) );
}

.thumbs-slider__fade--right {
	right: 0;
	background: linear-gradient( to left, #f1f4f4, rgba( 255, 255, 255, 0 ) );
}

.thumbs-slider.is-scrolled-from-start .thumbs-slider__fade--left,
.thumbs-slider.is-scrolled-from-end .thumbs-slider__fade--right {
	opacity: 1;
}
.thumbs-slider__arrow:hover {
    background: #06b6c2;
}

.thumbs-slider__arrow:hover svg path {
    stroke: #fff;
}

/* Arrows */
.thumbs-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 3;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: #fff;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.25 );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.2s ease;
	padding: 0;
}

.thumbs-slider__arrow svg {
	width: 14px;
	height: 14px;
}

.thumbs-slider__arrow--prev {
	left: -4px;
}

.thumbs-slider__arrow--next {
	right: -4px;
}

.thumbs-slider__arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* Hide arrows/fades entirely when there aren't enough thumbnails to scroll. */
.thumbs-slider:not( .is-scrollable ) .thumbs-slider__arrow,
.thumbs-slider:not( .is-scrollable ) .thumbs-slider__fade {
	display: none;
}