.elementor-619 .elementor-element.elementor-element-a1e79e3{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-619 .elementor-element.elementor-element-a1e79e3.elementor-element{--align-self:flex-start;}.woocommerce .elementor-619 .elementor-element.elementor-element-a1e79e3 .woocommerce-product-gallery__trigger + .woocommerce-product-gallery__wrapper,
					.woocommerce .elementor-619 .elementor-element.elementor-element-a1e79e3 .flex-viewport{border-radius:0px 0px 0px 0px;}.woocommerce .elementor-619 .elementor-element.elementor-element-a1e79e3 .flex-control-thumbs img{border-radius:0px 0px 0px 0px;}/* Start custom CSS for woocommerce-product-images, class: .elementor-element-a1e79e3 *//**
 * ================================================================
 * Ferrin-Art — WooCommerce Product Gallery
 * ================================================================
 * Created by: Ondamoov Lab
 * Author: Rodrigo Fernandez
 * Version: 1.1.0
 * Last update: 2026-09-01
 *
 * Scope:
 * Elementor "Product Images" widget only.
 * ================================================================
 */


/* ----------------------------------------------------------------
 * 1. SALE BADGE
 * Changes the WooCommerce "Sale!" badge to Ferrin-Art brand colors.
 * ---------------------------------------------------------------- */
.elementor-619 .elementor-element.elementor-element-a1e79e3 > .onsale {
	background-color: #72B8AE !important;
	color: #F5EADA !important;
	border-color: #72B8AE !important;
}


/* ----------------------------------------------------------------
 * 2. THUMBNAIL STRIP
 * Creates one horizontal, non-wrapping thumbnail row.
 * The 16px top margin creates the gap below the main product image.
 * ---------------------------------------------------------------- */
.elementor-619 .elementor-element.elementor-element-a1e79e3 .flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 16px !important;
	margin: 16px 0 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	list-style: none !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: #72B8AE transparent;
}


/* ----------------------------------------------------------------
 * 3. THUMBNAIL SIZE
 * Forces every thumbnail wrapper into a fixed 100 × 100px square.
 * Prevents WooCommerce/FlexSlider from expanding them or wrapping.
 * ---------------------------------------------------------------- */
.elementor-619 .elementor-element.elementor-element-a1e79e3 .flex-control-thumbs > li {
	display: block !important;
	flex: 0 0 100px !important;
	width: 100px !important;
	min-width: 100px !important;
	max-width: 100px !important;
	height: 100px !important;
	min-height: 100px !important;
	max-height: 100px !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	overflow: hidden !important;
}


/* ----------------------------------------------------------------
 * 4. THUMBNAIL IMAGE
 * Crops landscape or portrait supporting images without distortion.
 * ---------------------------------------------------------------- */
.elementor-619 .elementor-element.elementor-element-a1e79e3 .flex-control-thumbs > li > img {
	display: block !important;
	width: 100px !important;
	height: 100px !important;
	max-width: 100px !important;
	max-height: 100px !important;
	margin: 0 !important;
	object-fit: cover !important;
	opacity: 1 !important;
	cursor: pointer;
}


/* ----------------------------------------------------------------
 * 5. SCROLLBAR
 * Keeps the scrollbar track transparent.
 * The thumb retains the turquoise brand color as a visual indicator.
 * ---------------------------------------------------------------- */
.elementor-619 .elementor-element.elementor-element-a1e79e3 .flex-control-thumbs::-webkit-scrollbar {
	height: 8px;
}

.elementor-619 .elementor-element.elementor-element-a1e79e3 .flex-control-thumbs::-webkit-scrollbar-track {
	background: transparent;
}

.elementor-619 .elementor-element.elementor-element-a1e79e3 .flex-control-thumbs::-webkit-scrollbar-thumb {
	background-color: #72B8AE;
	border-radius: 0;
}


/* ----------------------------------------------------------------
 * 6. MOBILE
 * Reduces visual spacing to 8px; thumbnails remain 100 × 100px
 * for comfortable touch interaction and horizontal finger scrolling.
 * ---------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-619 .elementor-element.elementor-element-a1e79e3 .flex-control-thumbs {
		gap: 8px !important;
		margin-top: 8px !important;
	}
}/* End custom CSS */