/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here... */ 

flex-control-thumbs {
	width: 90%;
	position: absolute;
	bottom: 0px; 
	text-align: center;
	display:flex;
	flex-wrap:nowrap;
	
	border: 1px solid red;
	overflow-x:auto;
	padding-bottom:10px;
}

.flex-control-thumbs li {
	margin: 0 6px;
	display: inline-block;
	zoom: 1;
}


.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
	width: 16%;
	vertical-align: top;
	margin: 5px 1% 0 0;
	min-width: 100px;
}

.flex-control-thumbs img {
	width: 100%;
	display: block;
	opacity: 0.8;
	cursor: pointer;
}

.flex-control-thumbs img:hover {
	opacity: 0.5;
}

.flex-control-thumbs .flex-active {
	opacity: 1;
	cursor: default;
}

.product_slider .flex-active-slide a:hover {
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
}

/***************************/

ul.flex-direction-nav {
	position: absolute;
	top: 30%;
	z-index: 99999;
	width: 100%;
	left: 0;
	margin: 0;
	padding: 0px;
	list-style: none;
}

li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}
a.flex-next::after {visibility:visible;content: '\f105';
	font-family: FontAwesome;margin-right: 10px;font-size: 70px;    
}
a.flex-prev::before {
	visibility:visible;
	content: '\f104';
	font-family: FontAwesome;    margin-left: 10px;font-size: 70px;
}

/***************************/

.woocommerce-product-gallery {
	display: grid;
	gap: 10px }
	@media only screen and (max-width: 35.999em) {
		.woocommerce-product-gallery {
			gap: 6px; 
		} 
	}
	.woocommerce-product-gallery .flex-control-thumbs {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 17%;
		gap: 1rem;
		overflow-x: auto !important;
		overscroll-behavior-inline: contain; 
	}
	@media screen and (max-width: 47.999em) {
		.woocommerce-product-gallery .flex-control-thumbs {
			grid-auto-columns: 12.5%;
			gap: 6px; 
		} 
	}
	.woocommerce-product-gallery .flex-control-thumbs li {
		float: none !important;
		width: 100% !important;
		display: grid; 
	}
	.woocommerce-product-gallery .flex-control-thumbs li img {
		inline-size: 100%;
		aspect-ratio: 1/1;
		-o-object-fit: cover;
		object-fit: cover;
		border-radius: 5px; 
	}
	.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
		border: 5px solid #f2f2f2; 
	}
	@media screen and (max-width: 47.999em) {
		.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
			border: 2px solid #f2f2f2; 
		} 
	}
	.woocommerce-product-gallery .flex-control-nav {
		-ms-scroll-snap-type: inline mandatory;
		scroll-snap-type: inline mandatory;
		scroll-padding-inline: 10px; 
	}
	.woocommerce-product-gallery .flex-control-nav > * {
		scroll-snap-align: start; 
	}