/* Structure */
.woocommerce-product-gallery{
	position: relative;
    float: left;
	margin-bottom: 20px;
}
.woocommerce-product-gallery__wrapper{
	width: 100%;
}

.woocommerce-product-gallery__wrapper img{
	cursor: zoom-in;
}

/* Product gallery */
@media screen and (min-width: 782px){
	.gallery-slider{
		width: calc(100% - 110px);
		display: flex;
		margin-left: 110px;
	}
	.woocommerce-product-gallery{
		width: 50%;
		margin-bottom: 70px;
	}
}

.gallery-slider.swiper{
	padding: 0;
	border-radius: var(--border-radius);
}

.gallery-slider .swiper-wrapper{
	border-radius: var(--border-radius);
	margin-bottom: 16px;
}

.gallery-slider .swiper-slide{
	height: auto;
	border-radius: var(--border-radius);
}

.woocommerce-product-gallery__image{
	height: 100%;
    height: 580px;
	border-radius: var(--border-radius);
}

.woocommerce-product-gallery__image a{
	border-radius: var(--border-radius);
	height: 100%;
	display: flex;
}

.woocommerce-product-gallery__image img{
	display: block;
    width: 100%;
    height: 100%;
    box-shadow: none;
	object-fit: cover;
    border-radius: var(--border-radius);
}

.woocommerce-product-gallery__wrapper.single-image img{
	height: auto;
    object-fit: cover;
}

/* Product gallery thumbs */
.gallery-thumbs{
	overflow: hidden;
	cursor: grab;
	position: relative;
	padding-inline: 16%;
}

.gallery-thumbs .swiper-slide{
	width: auto;
	height: auto;
 	overflow: hidden;
	-webkit-transition: opacity var(--transition);
	transition: opacity var(--transition);
	border: var(--border);
	display: flex;
	border-radius: 16px;
	border: 3px solid transparent;
}

.gallery-thumbs .swiper-slide img{
	border-radius: 12px;
	object-fit: cover;
	height: 100%;
}

.gallery-thumbs .swiper-slide.swiper-slide-thumb-active{
	border-color: var(--color-primary);
}

.gallery-thumbs .swiper-slide:hover img:not(.video-thumb-badge img),
.gallery-thumbs .swiper-slide.swiper-slide-thumb-active img:not(.video-thumb-badge img){
	filter: brightness(0.7);
}

.gallery-thumbs:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100%;
	background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%);
	z-index: 2;
}

.gallery-thumbs:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	height: 100%;
	background: linear-gradient(270deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 0) 100%);
	z-index: 2;
}

/* Navigation */
.gallery-slider .swiper-button-next, .gallery-slider .swiper-button-prev{
	bottom: unset;
    top: 50%;
    transform: translateY(-50%);
    left: 22px;
    right: unset;
}

.gallery-slider .swiper-button-next{
	left: unset;
    right: 22px;
}

.gallery-slider .swiper-button-next:after{
	-webkit-mask-image: url('../../../icons/arrow-right-white.svg');
    mask-image: url('../../../icons/arrow-right-white.svg');
	background-color: var(--color-text);
}

.gallery-slider .swiper-button-prev:after{
	-webkit-mask-image: url('../../../icons/arrow-right-white.svg');
    mask-image: url('../../../icons/arrow-right-white.svg');
	background-color: var(--color-text);
}

.gallery-slider .swiper-button-prev:after{
	transform: rotate(180deg);
}

/* VIDEO */
.product-video-slide { 
	position: relative; 
}

.product-video{
	width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    object-fit: cover;
	object-position: 55% 50%;
}

.video-overlay-play {
	position: absolute; 
	inset: 0; 
	display: grid; 
	place-items: center;
	background: transparent; 
	border: 0; 
	color: #fff; 
	font-size: 3rem;
	cursor: pointer; 
	opacity: 1; 
	transition: background .2s ease, 
	opacity .2s ease;
}

.video-overlay-play:focus { 
	outline: 2px solid #fff; 
	outline-offset: 2px; 
}

.product-video-slide.playing .video-overlay-play { 
	opacity: 0; 
	pointer-events: none; 
}

.gallery-thumbs .video-thumb { 
	position: relative; 
	display: inline-block; 
}

.gallery-thumbs .video-thumb-badge {
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-thumb-badge:after{
	content: '';
	display: inline-block;
	-webkit-mask-image: url('/wp-content/uploads/2025/10/video-360.svg');
	mask-image: url('/wp-content/uploads/2025/10/video-360.svg');
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
	background-color: #fff;
	width: 51px;
	height: 27px;
}

.product-video-slide .video-thumb-badge{
	position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.product-video-slide .video-thumb-badge:after{
	filter: invert(1);
	width: 74px;
    height: 39px;
}

/* Mobile */
@media screen and (max-width: 992px){
	.gallery-thumbs{
		padding-inline: 8%;
	}
}

@media screen and (max-width: 781px){
	.woocommerce-product-gallery{
		width: calc(100% + 30px);
        float: none;
        margin-bottom: 20px;
        margin-inline: -15px;
		padding-top: 15px;
	}
	.woocommerce-product-gallery .gallery-slider{
		padding-inline: 10%;
	}
	.gallery-slider .swiper-button-prev,
	.gallery-slider .swiper-button-next,
	.gallery-thumbs{
		display: none;
	}
}

@media screen and (max-width: 480px){
	.woocommerce-product-gallery__image{
		height: 302px;
	}
	.product-video-slide .video-thumb-badge:after{
		width: 38px;
    	height: 20px;
	}
}