/* Product page Splide: the gallery thumbnails and the related-products grid. Moved out of the
   Code Snippets "Single Product - Splide Image Carousel" (#9) and "Splide - Related Products
   Grid" (#43) snippets. Splide itself and its base CSS come from the theme copies enqueued in
   inc/scripts.php (4.1.4, the same version the snippets pulled from jsdelivr). */

/* Gallery thumbnails (#9) */
.product-thumbnails .splide__arrows .splide__arrow {
	background: rgba(3, 186, 72, 0.1);
	transition: 0.4s ease-in-out;
}
.product-thumbnails .splide__arrows .splide__arrow:hover {
	background: rgb(3, 186, 72);
}

.product-thumbnails .splide__arrows .splide__arrow svg{
	fill: white;
}

.product-thumbnails .splide__slide{
	border-width: 1px !important;
}
.product-thumbnails  .splide__list{
	margin-top: 1px !important;
}

.product-thumbnails .splide__slide img{
	height: 100%;
	width: 100%;
	object-fit: cover;
}


.product-thumbnails .splide__track--nav>.splide__list>.splide__slide.is-active {
	border: 1px solid rgb(3, 186, 72);
}

/* Related products grid (#43) */
.related-prods-slider .splide__slide .front-image{
		width:100%;
	}

@media only screen and (min-width: 768px) {
	.related-prods-slider .splide__arrows {
	position: absolute;
	right: 0;
	width: auto;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	top: -10px;
	transform: translateY(-100%);
	gap: 4px;
}

.related-prods-slider .splide__arrows .splide__arrow {
	position: static !important;
	transform: none !important;
}
}
			  
.related-prods-slider .splide__arrows .splide__arrow {
	background: white;
	border-radius: 3px;
	border: 1px solid var(--arrow-color, #03ba48);
	transition: 0.2s ease-in-out;
}
						  
.related-prods-slider .splide__arrows .splide__arrow svg{
	fill: var(--arrow-color, #03ba48);
	transition: 0.2s ease-in-out fill;
}
			  
.related-prods-slider .splide__arrows .splide__arrow:hover{
	background-color: var(--arrow-color, #03ba48);
}
						  
.related-prods-slider .splide__arrows .splide__arrow:hover svg{
	fill:white;
}