/**
 * Frixy Product Gallery
 * Vignettes horizontales sous l'image principale + flèches latérales.
 */

:root {
	--frixy-gallery-active: #0a5248;
	--frixy-gallery-border: #e0e0e0;
}

@media (min-width: 420px) {
	.woocommerce div.product div.images,
	.woocommerce-page div.product div.images,
	.et-db #et-boc .et-l .et_pb_wc_images div.images {
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		align-self: stretch !important;
	}

	.woocommerce div.product div.images .flex-viewport,
	.woocommerce-page div.product div.images .flex-viewport,
	.et-db #et-boc .et-l .et_pb_wc_images div.images .flex-viewport {
		order: -1 !important;
		width: 100% !important;
		flex: none !important;
	}

	.frixy-gallery-thumbs {
		order: 0 !important;
	}
}

.frixy-gallery-thumbs {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin: 12px 0 0;
}

.frixy-gallery-thumbs__arrow--prev {
	order: 1;
	flex: 0 0 20px;
}

.frixy-gallery-thumbs__arrow--next {
	order: 3;
	flex: 0 0 20px;
}

.frixy-gallery-thumbs__track,
.woocommerce div.product div.images .frixy-gallery-thumbs ol.flex-control-thumbs.frixy-gallery-thumbs__track,
.woocommerce-page div.product div.images .frixy-gallery-thumbs ol.flex-control-thumbs.frixy-gallery-thumbs__track,
.et-db #et-boc .et-l .et_pb_wc_images div.images .frixy-gallery-thumbs ol.flex-control-thumbs.frixy-gallery-thumbs__track,
.woocommerce div.product div.images ol.flex-control-thumbs.frixy-gallery-thumbs__track,
.woocommerce-page div.product div.images ol.flex-control-thumbs.frixy-gallery-thumbs__track,
.et-db #et-boc .et-l .et_pb_wc_images div.images ol.flex-control-thumbs.frixy-gallery-thumbs__track {
	order: 2 !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	width: auto !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	gap: 8px;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	justify-content: flex-start !important;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.frixy-gallery-thumbs__track::-webkit-scrollbar,
.woocommerce div.product div.images ol.flex-control-thumbs.frixy-gallery-thumbs__track::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.frixy-gallery-thumbs__track li,
.woocommerce div.product div.images ol.flex-control-thumbs.frixy-gallery-thumbs__track li,
.woocommerce-page div.product div.images ol.flex-control-thumbs.frixy-gallery-thumbs__track li,
.et-db #et-boc .et-l .et_pb_wc_images div.images ol.flex-control-thumbs.frixy-gallery-thumbs__track li {
	width: auto !important;
	flex: 0 0 auto !important;
	max-width: 72px;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
}

.frixy-gallery-thumbs__track li img,
.et-db #et-boc .et-l .et_pb_wc_images div.images ol.flex-control-thumbs.frixy-gallery-thumbs__track li img {
	display: block;
	width: 100%;
	height: auto;
}

.frixy-gallery-thumbs__arrow {
	width: 20px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
}

.frixy-gallery-thumbs__arrow span {
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
}

.frixy-gallery-thumbs__arrow--prev span {
	border-width: 9px 12px 9px 0;
	border-color: transparent var(--frixy-gallery-active) transparent transparent;
}

.frixy-gallery-thumbs__arrow--next span {
	border-width: 9px 0 9px 12px;
	border-color: transparent transparent transparent var(--frixy-gallery-active);
}

.frixy-gallery-thumbs__arrow:hover:not(:disabled) span {
	filter: brightness( 1.1 );
}

.frixy-gallery-thumbs__arrow:disabled {
	cursor: default;
}

.frixy-gallery-thumbs__arrow:disabled span {
	opacity: 0.3;
}

.frixy-gallery-thumbs:not(.frixy-gallery-thumbs--has-nav) .frixy-gallery-thumbs__arrow {
	display: none;
}