/* WooCommerce Product Gallery Thumbnail Horizontal Scroll */

/* Target the container for the thumbnails (adjust selector if needed based on theme/plugins) */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
	overflow-x: auto !important; /* Enable horizontal scrollbar and force override */
	overflow-y: hidden !important; /* Hide vertical scrollbar and force override */
	white-space: nowrap; /* Prevent thumbnails from wrapping to the next line */
	padding-bottom: 10px; /* Add some space for the scrollbar */
	margin: 0; /* Reset default margin */
	margin-top: 0.5em !important;
	list-style: none; /* Remove list bullets */
	text-align: left; /* Align thumbnails to the left */
	/* Optional: Add a subtle scrollbar style for WebKit browsers */
	/* scrollbar-width: thin; */ /* Firefox */
	/* scrollbar-color: #ccc #f0f0f0; */ /* Firefox */
}

/* WebKit scrollbar styling (optional) */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
	height: 6px; /* Height of the scrollbar */
}
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-track {
	background: #f1f1f1; /* Track color */
	border-radius: 3px;
}
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb {
	background: #ccc; /* Handle color */
	border-radius: 3px;
}
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb:hover {
	background: #aaa; /* Handle color on hover */
}


/* Style individual thumbnail list items */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li {
	display: inline-block; /* Align items horizontally */
	vertical-align: top; /* Align items to the top */
	margin-right: 10px; /* Space between thumbnails */
	width: auto !important; /* Override potential fixed width from theme/WC */
	float: none !important; /* Override potential floats */
}

/* Ensure the last item doesn't have extra margin */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li:last-child {
	margin-right: 0;
}

/* Style the thumbnail images themselves (optional adjustments) */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li img {
	cursor: pointer;
	/* Adjust size if needed, but usually handled by WC/theme */
	/* max-width: 80px; */
	/* height: auto; */
	display: block; /* Remove extra space below image */
}