/* Boutique dos Tecidos - WC Thumbnail Slider
   Keeps the MAIN image intact and turns ONLY the thumbnail list into a slider.
*/

.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
	/* Ensure classic layout: main image first, thumbs below (even inside Divi modules) */
	display: flex;
	flex-direction: column;
}

/* Main image wrapper stays on top */
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
	order: 1;
}

/* Thumbnails below */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs,
.woocommerce div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
	order: 2;
	margin-top: 12px;
}

/* Host element (thumbs parent) so arrows align with the thumbs row
   We don't move/rewrap the UL to avoid breaking Woo/variation scripts.
*/
.btd-gallery-thumbs-host {
	position: relative;
}

/* Slider track (UL.flex-control-thumbs) */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs.btd-slider-track,
.woocommerce div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs.btd-slider-track {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding: 8px 44px 10px; /* room for arrows */
	margin: 0 !important;
	list-style: none !important;
}

/* Each LI snaps */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs.btd-slider-track > li,
.woocommerce div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs.btd-slider-track > li {
	flex: 0 0 auto !important;
	scroll-snap-align: start;
	width: 88px; /* desktop thumb size */
	max-width: 120px;
	cursor: pointer;
	margin: 0 !important;
}

/* Keep images inside li responsive */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs.btd-slider-track > li img {
	display: block;
	width: 100%;
	height: auto;
}

/* Hide scrollbar (best effort) */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs.btd-slider-track {
	scrollbar-width: none; /* Firefox */
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs.btd-slider-track::-webkit-scrollbar {
	display: none; /* Chrome/Safari */
}

/* Arrows positioned relative to thumbs host */
.btd-gallery-thumbs-host .btd-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.15);
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,.10);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	user-select: none;
}

.btd-gallery-thumbs-host .btd-gallery-arrow:focus {
	outline: 2px solid rgba(0,0,0,.25);
	outline-offset: 2px;
}

.btd-gallery-thumbs-host .btd-gallery-arrow[disabled] {
	opacity: .35;
	cursor: not-allowed;
}

.btd-gallery-thumbs-host .btd-gallery-arrow--prev { left: 8px; }
.btd-gallery-thumbs-host .btd-gallery-arrow--next { right: 8px; }

/* Simple chevrons */
.btd-gallery-thumbs-host .btd-gallery-arrow::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid rgba(0,0,0,.65);
	border-bottom: 2px solid rgba(0,0,0,.65);
}

.btd-gallery-thumbs-host .btd-gallery-arrow--prev::before { transform: rotate(135deg); margin-left: 2px; }
.btd-gallery-thumbs-host .btd-gallery-arrow--next::before { transform: rotate(-45deg); margin-right: 2px; }

/* Mobile: larger touch targets */
@media (max-width: 767px) {
	.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs.btd-slider-track > li {
		width: 86px;
	}
	.btd-gallery-thumbs-host .btd-gallery-arrow {
		width: 38px;
		height: 38px;
	}
}