/* Wrap-positioning trick: the strip itself stays the scroll container, but
 * we put a position:relative wrapper around it via JS so the ::before/::after
 * fade overlays can sit on top of the strip's edges without scrolling with it.
 * (CSS-only edge fades would scroll with the content using mask-image.) */
.woocommerce-product-gallery .ym-thumb-wrap {
	position: relative;
}
.woocommerce-product-gallery .ym-thumb-wrap::before,
.woocommerce-product-gallery .ym-thumb-wrap::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	width: 40px;
	pointer-events: none;
	z-index: 2;
	transition: opacity .2s ease;
}
.woocommerce-product-gallery .ym-thumb-wrap::before {
	left: 0;
	background: linear-gradient(to right, #fff 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0) 100%);
}
.woocommerce-product-gallery .ym-thumb-wrap::after {
	right: 0;
	background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0.85) 40%, rgba(255,255,255,0) 100%);
}
.woocommerce-product-gallery .ym-thumb-wrap.ym-at-start::before { opacity: 0; }
.woocommerce-product-gallery .ym-thumb-wrap.ym-at-end::after   { opacity: 0; }
.woocommerce-product-gallery .ym-thumb-wrap.ym-no-overflow::before,
.woocommerce-product-gallery .ym-thumb-wrap.ym-no-overflow::after { opacity: 0; }

/* The actual scroll-container: single row, finger-swipeable, no scrollbar. */
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: none !important;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
	/* pan-y allows the page to still scroll vertically through the strip
	 * area, while forcing horizontal motion to fire DOM events instead of
	 * being interpreted as a native pan-x. We drive scrollLeft from JS so
	 * we don't depend on native horizontal pan working — any ancestor that
	 * calls preventDefault on touchmove (Customily etc.) won't break us. */
	touch-action: pan-y;
	cursor: grab;
	gap: 6px;
	padding: 6px 2px;
	margin: 0;
	width: 100%;
}
.woocommerce-product-gallery .flex-control-thumbs.ym-grabbing { cursor: grabbing; }
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
	display: none;
	width: 0; height: 0;
}
.woocommerce-product-gallery .flex-control-thumbs > li {
	flex: 0 0 96px;
	max-width: 96px;
	width: 96px;
	margin: 0;
	float: none !important;
}
@media (max-width: 768px) {
	.woocommerce-product-gallery .flex-control-thumbs > li {
		flex: 0 0 72px;
		max-width: 72px;
		width: 72px;
	}
}

/* One-time wiggle: on first load, the strip briefly scrolls a few pixels
 * right and back, telling the user "you can swipe me". Implemented via a
 * JS-applied animation class because pure-CSS animation can't actually
 * scroll a container; the JS uses scrollLeft + requestAnimationFrame. */