/* quick view */
.styler-quickview-wrapper {
    padding: 40px;
}
.mfp-styler-quickview .styler-panel-close-button {
	position: absolute;
	top: 15px;
	right: 15px;
    padding: 0;
}

.mfp-styler-quickview .styler-panel-close-button:hover {
	background-color: var(--styler-bg-soft);
}

.styler-quickview-wrapper .styler-quickview-thumbnails {
	margin-top: 15px;
}

.styler-quickview-wrapper .styler-product-title {
	margin-bottom: 0px;
}

.styler-quickview-wrapper form.cart {
    gap: 10px;
}

.styler-quickview-wrapper.product-protected {
    max-width: 400px;
    padding: 50px 20px 20px;
}

.styler-quickview-wrapper .single_add_to_cart_button {
    flex: 1 0 auto;
}

@media(min-width1025px) {
    .styler-quickview-wrapper .styler-swiper-slider-wrapper {
        position: sticky;
        top: 0;
    }
}

@media(max-width:992px){
    .styler-quickview-product-details.styler-product-summary {
        margin-top: 30px;
    }
}

@media(max-width:768px) {
	.styler-quickview-wrapper {
		max-width: 560px;
	}

	.styler-mfp-slide-bottom button.mfp-arrow,
    .mfp-styler-quickview button.mfp-arrow {
		overflow: hidden;
		visibility: hidden;
		display: none;
	}

	.single-product .styler-mfp-slide-bottom button.mfp-arrow {
		visibility: visible;
		display: block;
	}
}

@media(max-width:480px) {
	.mfp-arrow {
		-webkit-transform: scale(0.55);
		transform: scale(0.55);
	}
	.styler-quickview-wrapper {
		padding: 20px;
		padding-bottom: 86px;
	}

	.mfp-styler-quickview .styler-panel-close-button {
		top: 10px;
		right: 0;
	}
}
/* styler quickview */

.thumbs-top .styler-swiper-slider-wrapper {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    max-width: 100%;
}
.thumbs-top .styler-swiper-slider-wrapper>div {
    max-width: 100%;
}
.styler-quickview-wrapper.thumbs-top .styler-quickview-thumbnails {
    margin-top: 0;
}
@media(min-width:600px){
    .thumbs-left .styler-swiper-slider-wrapper,
    .thumbs-right .styler-swiper-slider-wrapper {
        display: flex;
        gap: 10px;
    }
    .thumbs-left .styler-swiper-slider-wrapper {
        flex-direction: row-reverse;
    }
    .thumbs-left.styler-quickview-wrapper .styler-quickview-thumbnails,
    .thumbs-right.styler-quickview-wrapper .styler-quickview-thumbnails {
        margin-top: 0;
        max-width: 80px;
        height: 100%;
    }
    .thumbs-left .styler-quickview-thumbnails,
    .thumbs-right .styler-quickview-thumbnails {
        padding-bottom: 40px;
    }
    
    .thumbs-left .styler-quickview-thumbnails .nav-wrapper,
    .thumbs-right .styler-quickview-thumbnails .nav-wrapper {
        position: absolute;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1;
        bottom: 0;
        width: 100%;
        transform: translateY(40px);
        -moz-transition: -moz-transform ease 0.25s, opacity ease 0.25s;
        -webkit-transition: -webkit-transform ease 0.25s, opacity ease 0.25s;
        -o-transition: -o-transform ease 0.25s, opacity ease 0.25s;
        -ms-transition: -ms-transform ease 0.25s, opacity ease 0.25s;
        transition: transform ease 0.25s, opacity ease 0.25s;
    }
    
    .thumbs-left .styler-quickview-thumbnails:hover .nav-wrapper,
    .thumbs-right .styler-quickview-thumbnails:hover .nav-wrapper {
        transform: none;
    }
    .thumbs-left .styler-quickview-thumbnails:hover .nav-wrapper>div {
        background-color: #fff;
    }
    .thumbs-left .styler-quickview-thumbnails:hover .nav-wrapper>div:hover {
        background-color: #000;
        color: #fff;
    }
    
    .thumbs-left .styler-quickview-thumbnails .nav-wrapper .swiper-button-next,
    .thumbs-left .styler-quickview-thumbnails .nav-wrapper .swiper-button-prev,
    .thumbs-left .styler-quickview-thumbnails .nav-wrapper .swiper-button-next:hover,
    .thumbs-left .styler-quickview-thumbnails .nav-wrapper .swiper-button-prev:hover,
    .thumbs-right .styler-quickview-thumbnails .nav-wrapper .swiper-button-next,
    .thumbs-right .styler-quickview-thumbnails .nav-wrapper .swiper-button-prev,
    .thumbs-right .styler-quickview-thumbnails .nav-wrapper .swiper-button-next:hover,
    .thumbs-right .styler-quickview-thumbnails .nav-wrapper .swiper-button-prev:hover {
        top: auto;
        left: auto;
        right: auto;
        bottom: 0;
        position: relative;
        opacity: 1;
        transform: none;
        margin: 0;
        width: 50%;
        height: 100%;
    }
    
    .thumbs-left .styler-quickview-thumbnails .nav-wrapper>div:after,
    .thumbs-right .styler-quickview-thumbnails .nav-wrapper>div:before {
        height: 100%;
        width: 100%;
        transform: rotate(-90deg);
        font-size: 14px;
    }
}