@import '../Headers/HeaderNoImg/headerNoImg.css';
@import "../components/Shop/woocommerce-message.css";

@import "../../../lib/photoswipe/dist/photoswipe.css";
@import "../components/Shop/product-preview.css";

.product-container-infos .stripe-container-inner {
    display: grid;
    grid-column-gap: 0;
    grid-template-areas:
        "A B"
        "C B";
    grid-template-columns: 1fr minmax(335px, 23.18vw); /*445*/
}
.pswp__img.pswp__img--placeholder {
    display: none !important;
}
.single-product-gallery {
    grid-area: A;
}
.summary-container {
    grid-area: B;
}
.single-product-infos {
    grid-area: C;
}
.single-product-gallery,
.single-product-infos {
    padding-right: 1.04vw; /*20*/
}

/* Product Gallery
----------------------------------------------------*/
    .thumbs-slider {
        display: none;
    }
    .product-gallery .swiper-wrapper {
        display: grid;
        grid-gap: 1.04vw; /*20*/
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: 35.21vw; /*676*/
    }
    .product-gallery.slides-2 .swiper-wrapper {
        grid-template-areas:
            "A A B B"
            "A A B B";
    }
    .product-gallery.slides-3 .swiper-wrapper {
        grid-template-areas:
            "A A B B"
            "A A C C";
    }
    .product-gallery.slides-4 .swiper-wrapper {
        grid-template-areas:
            "A A B C"
            "A A D D";
    }
    .product-gallery.slides-5 .swiper-wrapper {
        grid-template-areas:
            "A A B C"
            "A A D E";
    }
    .swiper-slide.slide-1 {
        grid-area: A;
        padding: 3.13vw; /*60*/
    }
    .swiper-slide.slide-2 {
        grid-area: B;
    }
    .swiper-slide.slide-3 {
        grid-area: C;
    }
    .swiper-slide.slide-4 {
        grid-area: D;
    }
    .swiper-slide.slide-5 {
        grid-area: E;
    }

    .product-gallery .swiper-slide {
        border: 1px solid var(--color-main-);
        overflow: hidden;
    }

    /* Full screen gallery */
		.pswp__bg {
		    background-color: var(--color-white);
		    opacity: 0.9 !important;
		}
		.pswp__icn {
		    fill: #000 !important;
		    color: #FFF !important;
		}
		.pswp__counter {
		    color: #000;
		}

/* Product Summary 
----------------------------------------------------*/
    .summary h1 {
        margin-bottom: 1.3vw; /*25*/
    }
	.summary-container {
	    position: relative;
	}
	.summary.entry-summary {
	    position: sticky;
	    top: 3.13vw; /*60*/
        padding: 1.04vw 1.04vw 2.08vw 1.04vw; /*20 20 40 20*/
        border: 1px solid var(--color-main-);
        box-shadow: 0px 0px 0.31vw 0px rgb(0 0 0 / 25%); /*0 0 6 0*/
        transition: top 0.3s ease-in-out;
	}
    .single-product-title {
        width: 80%;
    }

    /* Variation
    --------------------------------------------*/
        .product-variations .d-flex {
            gap: 0.52vw 1.3vw;
            padding*t: 1;
            padding-top: 0.78vw; /*15*/
        }
        .product-variations .col-image {
            height: 3.13vw; /*60*/
            min-height: 45px;
            border: 1px solid var(--color-main-);
            border-radius: 100%;
            overflow: hidden;
            padding: 0.31vw; /*6*/
        }
        .product-variations .col-image {
            width: 3.13vw; /*60*/
            min-width: 45px;
            margin: 0 auto;
        }
        .product-variations .col-text {
            width: 4.13vw;
            min-width: 65px;
            padding-top: 0.1vw; /*2*/
        }
        .product-variations a:hover .col-image {
            border-color: var(--color_1);
        }

    /* Stock
    --------------------------------------------*/
        p.stock {
            display: none;
        }
        p.stock.out-of-stock {
            display: block;
        }

    /* Quantity
    --------------------------------------------*/    
        .quantity-box {
            padding-top: 0.78vw; /*15*/
        }
        .quantity-box .quantity-label {
            padding-bottom: 0.52vw; /*10*/
        }
        .quantity-box input.qty {
            margin: unset;
            border: unset;
            border-radius: unset;
            padding: 0.73vw 1.04vw; /*14 20*/
            font-size: 0.83vw; /*16*/
            text-align: center;
            position: relative;
            z-index: 1;
            border: 1px solid var(--color-main-);
            border-radius: 0.52vw; /*10*/
        }
        .quantity-box .quantity-button.minus,
        .quantity-box .quantity-button.plus {
            height: 1.56vw; /*30*/
            width: 1.56vw; /*30*/
            font-size: 1.3vw; /*25*/
            line-height: 1;
            background-color: var(--color-main---);
            border-radius: 100%;
            color: var(--color-main-);
            cursor: pointer;
            z-index: 2;
        }
        .quantity-box .quantity-button.minus {
            left: 0.52vw; /*10*/
        }
        .quantity-box .quantity-button.plus {
            right: 0.52vw; /*10*/
        }
        .quantity-box .quantity-button.minus:hover,
        .quantity-box .quantity-button.plus:hover {
            color: var(--color-main);
        }
        .quantity-button {
            user-select: none;
        }        

    /* Paypal Message
    --------------------------------------------*/
        .ppcp-messages {
            margin-top: 0.78vw;
        }

    /* Price
    --------------------------------------------*/
        .summary .price bdi,
        .summary .price bdi * {
            color: var(--color_2);
            font-family: var(--bd-font);
            font-size: 1.56vw; /*30*/
        }
        .summary span.tax-label {
            padding-bottom: 0.26vw; /*5*/
            padding-left: 0.26vw; /*5*/
            color: var(--color-main);
            font-family: var(--md-font);
            font-size: 0.73vw; /*14*/
            letter-spacing: -0.03em;
        }

		.summary p.price bdi {
		    display: flex;
		}
		.summary span.price-numbers-wrapper {
		    order: 2;
		}
		.summary span.woocommerce-Price-currencySymbol {
		    order: 1;
		    display: block;
            margin-right: -0.26vw; /*5*/
		    margin-left: -0.26vw; /*5*/
		}
		.summary ins {
		    text-decoration: unset !important;
		}
		.summary span.price-numbers-wrapper:before {
		    content: '';
		    display: inline-block;
		    width: 0.26vw; /*5*/
		    height: 0.26vw; /*5*/
		}
        .summary .price del {
            margin-right: 0.52vw; /*10*/
            width: 100%;
            display: inline-flex;
        }
		.summary .price del * {
		    font-size: 1.04vw !important; /*20*/
            font-family: var(--sbd-font);
		}

    /* Sale Label
    --------------------------------------------*/
        .product-container-infos .sale-label {
            position: absolute !important;
            top: 1.04vw; /* 20 */
            left: 1.04vw; /* 20 */
            background-color: #4DB346;
            padding: 0.78vw 1.04vw; /*15 20*/
            border-radius: 2.6vw; /*50*/
            z-index: 3 !important;
            pointer-events: none;
        }

    /* PRODUCT META
    --------------------------------------------*/
        .summary .product_meta {
            justify-content: space-between;
        }
        .summary span.shipping-icon {
            margin-right: 0.26vw; /*5*/
        }
        .summary span.shipping-icon svg {
            width: 0.68vw; /*13*/
            height: 0.52vw; /*10*/
        }

    /* ADD TO CART
    --------------------------------------------*/
        .summary .add-to-cart-custom-container {
            position: absolute;
            top: 100%;
            width: 100%;
            left: 0;
        }
        .summary .add-to-cart-custom-container * {
            margin-top: 1.04vw; /*20*/
        }
        .summary .single_add_to_cart_button.btn {
            width: 100% !important;
        }

/* Product Infos
----------------------------------------------------*/
    .product-info .apply-pad-full {
        padding-bottom: 2.6vw; /*50*/
    }
    .product-info .product-info-row {
        display: grid;
        grid-template-columns: 56% 44%;
    }
    .product-info .product-info-grid {
        border-top: 1px solid var(--color-main-);
    }
    .product-info .product-info-row {
        border-bottom: 1px solid var(--color-main-);
    }
    .product-info .product-info-row > .col {
        padding: 1.09vw 0; /*21 0*/
    }
    .product-info .product-info-row .col-text {
        padding-left: 1.56vw; /*30*/
        border-left: 1px solid var(--color-main-);
    }

/* Product Other Infos
----------------------------------------------------*/
    .product-other-infos .media-container {
        height: 27.08vw; /*520*/
    }
    .product-other-infos .b-rd_02 {
        overflow: hidden;
    }
    .product-other-infos .two-col-grid {
        grid-gap: 1.04vw; /*20*/
    }


@media screen and (max-width: 1920px) {
    .product-gallery .swiper-wrapper {
        grid-gap: 20px; /*20*/
    }

	.single-product-gallery,
	.single-product-infos {
	    padding-right: 20px; /*20*/
	}

	/* Product Summary 
	----------------------------------------------------*/
		.summary.entry-summary {
		    position: sticky;
		    top: 60px; /*60*/
	        padding: 20px 20px 40px 20px; /*20 20 40 20*/
	        box-shadow: 0px 0px 6px 0px rgb(0 0 0 / 25%); /*0 0 6 0*/
		}

	    /* Variation
	    --------------------------------------------*/
            .product-variations .col-image {
                padding: 5px;
            }
            .product-variations .d-flex {
                padding-top: 15px;
            }
	        .product-variations .col-text {
	            padding-top: 2px; /*2*/
	        }

	    /* Quantity
	    --------------------------------------------*/
	        .quantity-box {
	            padding-top: 15px; /*15*/
	        }
            .quantity-box .quantity-label {
                padding-bottom: 10px;
            }
	        .quantity-box input.qty {
                padding: 14px 20px; /*14 20*/
                font-size: 16px; /*16*/
	            border-radius: 10px; /*10*/
	        }
	        .quantity-box .quantity-button.minus,
	        .quantity-box .quantity-button.plus {
	            height: 30px; /*30*/
	            width: 30px; /*30*/
	            font-size: 25px; /*25*/
	        }
	        .quantity-box .quantity-button.minus {
	            left: 10px; /*10*/
	        }
	        .quantity-box .quantity-button.plus {
	            right: 10px; /*10*/
	        }

        /* Paypal Message
        --------------------------------------------*/
            .ppcp-messages {
                margin-top: 15px;
            }

	    /* Price
	    --------------------------------------------*/
	        .summary span.woocommerce-Price-currencySymbol {
                margin-left: -5px; /*5*/
	            margin-right: -5px; /*5*/
	        }
	        .summary span.tax-label {
                padding-bottom: 5px;
                padding-left: 5px;                
	        }
            .summary span.price-numbers-wrapper:before {
                width: 5px; /*5*/
                height: 5px; /*5*/
            }
            .summary .price del {
                margin-right: 10px; /*10*/
            }

	    /* PRODUCT META
	    --------------------------------------------*/
	        .summary span.shipping-icon {
	            margin-right: 5px; /*5*/
	        }
	        .summary span.shipping-icon svg {
	            width: 13px; /*13*/
	            height: 10px; /*10*/
	        }

	    /* ADD TO CART
	    --------------------------------------------*/
	        .summary .add-to-cart-custom-container * {
	            margin-top: 20px; /*20*/
	        }


	/* Product Infos
	----------------------------------------------------*/
	    .product-info .apply-pad-full {
	        padding-bottom: 50px; /*50*/
	    }
	    .product-info .product-info-row > .col {
	        padding: 21px 0; /*21 0*/
	    }
	    .product-info .product-info-row .col-text {
	        padding-left: 30px; /*30*/
	    }

	/* Product Other Infos
	----------------------------------------------------*/
	    .product-other-infos .media-container {
	        height: 520px; /*520*/
	    }
	    .product-other-infos .two-col-grid {
	        grid-gap: 20px; /*20*/
	    }
}


@media screen and (max-width: 1600px) {
    /* Product Summary 
    ----------------------------------------------------*/
        .summary.entry-summary {
            padding: 20px 20px 30px 20px;
        }

    /* Quantity
    --------------------------------------------*/
        .quantity-box input.qty {
            padding: 12px 18px;
            font-size: 14px;
        }
        .quantity-box .quantity-button.minus,
        .quantity-box .quantity-button.plus {
            height: 27px;
            width: 27px;
            font-size: 22px;
        }

    /* Price
    ----------------------------------------------------*/
        .summary span.tax-label {
            font-size: 12px;
        }

    /* Product Infos
    ----------------------------------------------------*/
        .product-info .product-info-row > .col {
            padding: 18px 0;
        }
        .product-info .product-info-row .col-text {
            padding-left: 26px;
        }
}


@media screen and (max-width: 1440px) {
    /* Product Summary 
    ----------------------------------------------------*/
        .summary h1 {
            margin-bottom: 20px;
        }
        .summary.entry-summary {
            box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 20%);
        }

        /* Variation
        ----------------------------------------------------*/
            .product-variations .d-flex {
                padding-top: 10px;
                gap: 10px 25px;
            }

        /* Quantity
        ----------------------------------------------------*/
            .quantity-box .quantity-label {
                padding-bottom: 8px;
            }

    /* Sale Label
    --------------------------------------------*/
        .product-container-infos .sale-label {
            top: 15px;
            left: 15px;
            padding: 10px 15px;
        }

    /* Price
    --------------------------------------------*/
        .summary .price bdi,
        .summary .price bdi * {
            font-size: 23px;
        }

    /* Product Infos
    ----------------------------------------------------*/
        .product-info .apply-pad-full {
            padding-bottom: 40px;
        }
        .product-info .product-info-row .col-text {
            padding-left: 22px;
        }
}


@media screen and (max-width: 1280px) {
    /* Product Summary 
    ----------------------------------------------------*/    
        .product-gallery .swiper-wrapper,
        .product-other-infos .two-col-grid{
            grid-gap: 15px;
        }
        .single-product-gallery,
        .single-product-infos {
            padding-right: 15px;
        }
        .summary .add-to-cart-custom-container * {
            margin-top: 15px;
        }

    /* Price
    --------------------------------------------*/
        .quantity-box .quantity-button.minus,
        .quantity-box .quantity-button.plus {
            font-size: 19px;
        }
        .summary .price bdi,
        .summary .price bdi * {
            font-size: 22px;
        }
        .summary span.tax-label {
            font-size: 11px;
        }
        .summary .price del * {
            font-size: 15px !important;
        }

    /* Product Infos
    ----------------------------------------------------*/
        .product-info .apply-pad-full {
            padding-bottom: 35px;
        }
}


@media screen and (max-width: 1150px) {
    .product-container-infos .stripe-container-inner {
        grid-template-columns: 1fr minmax(300px, 23.18vw);
    }
    .product-variations .col-image {
        min-height: 40px;
    }
    .product-variations .col-image {
        min-width: 40px;
    }
    .product-variations .col-text {
        min-width: 55px;
    }
    .product-variations .d-flex {
        gap: 10px 20px;
    }
}


@media screen and (max-width: 992px) {
    .product-container-infos .stripe-container-inner {
        display: block;
    }
    .product-container-infos .stripe-container-full {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .single-product-gallery,
    .summary-container,
    .single-product-infos  {
        padding: 0 2em 0 2em;
    }
    .mobile-breadcrumbs #breadcrumbs {
        padding-bottom: 20px;
    }

    /* Product Gallery
    ----------------------------------------------------*/    
        .product-gallery .swiper-wrapper {
            height: 45.97vw;
        }
        .swiper-slide.slide-1 {
            padding: 30px;
        }
        .product-gallery .swiper-wrapper {
            grid-gap: 10px;
        }

    /* Product Summary 
    ----------------------------------------------------*/    
        .summary-container {
            margin-top: 0;
        }
        .summary.entry-summary {
            box-shadow: unset;
            border: unset;
            border-radius: unset;
            padding: 40px 0px 40px 0px;
        }
        .summary .single-product-title {
            width: unset
        }

        /* Variations
        ----------------------------------------------------*/    
            .product-variations .d-flex {
                padding-top: 15px;
            }
            .product-variations .col-image {
                min-width: 45px;
            }
            .product-variations .col-image {
                min-height: 45px;
            }
            .product-variations .col-text {
                min-width: 60px;
                font-size: 10px !important;
            }            

        /* Quantity
        ----------------------------------------------------*/    
            .quantity-box {
                padding-top: 20px;
            }
            .quantity-box .quantity-label {
                padding-bottom: 10px;
            }

        /* Price
        ----------------------------------------------------*/    
            .price-container {
                padding-top: 25px;
            }
            .summary .price bdi,
            .summary .price bdi * {
                font-size: 25px;
            }
            .summary .price del * {
                font-size: 18px !important;
            }
            .product-container-infos .sale-label {
                padding: 8px 12px;
            }

        /* Meta
        ----------------------------------------------------*/    
            .product_meta {
                padding-top: 25px;
            }
            body .summary .xxxsm-sz,
            body .summary .xxxsm-sz * {
                font-size: 11px;
            }

        /* Add to cart
        ----------------------------------------------------*/    
        .summary .single_add_to_cart_button.btn {
            margin-top: 0;
        }

    /* Product Description
    ----------------------------------------------------*/
        .product-description {
            padding-top: 60px;
        }

    /* Product Infos
    ----------------------------------------------------*/
        .product-other-infos .two-col-grid {
            grid-template-columns: 1fr;
        }
        .product-other-infos .two-col-grid {
            grid-gap: 14px;
        }        

}


@media screen and (max-width: 767px) {
    .single-product-gallery,
    .summary-container,
    .single-product-infos {
        padding: 0 1.5em 0 1.5em;
    }

    /* Product Summary 
    ----------------------------------------------------*/    

        /* Variations
        ----------------------------------------------------*/   
            .product-variations .d-flex {
                padding-top: 10px;
            }

        /* Quantity
        ----------------------------------------------------*/    
            .quantity-box {
                padding-top: 15px;
            }

        /* Price
        ----------------------------------------------------*/
            .price-container {
                padding-top: 20px;
            }
            .summary .price del * {
                font-size: 19px !important;
            }
            .summary .price bdi,
            .summary .price bdi * {
                font-size: 25px;
            }

        /* Meta
        ----------------------------------------------------*/
            .product_meta {
                padding-top: 17px;
            }

    /* Product Description
    ----------------------------------------------------*/
        .product-description {
            padding-top: 40px;
        }

    /* Product Infos
    ----------------------------------------------------*/
        .product-other-infos .media-container {
            height: 68.28vw;
            min-height: 297px;
            max-height: 400px;
        }
        .product-info .product-info-row {
            grid-template-columns: 52% 50%;
        }
        .product-info .product-info-row > .col {
            padding: 17px 0;
        }
        .product-info .product-info-row > .col:first-child {
            padding-right: 20px;
        }
        .product-info .product-info-row .col-text {
            padding-left: 20px;
        }
}


@media screen and (max-width: 600px) {
    /* Product Gallery
    ----------------------------------------------------*/        
        .single-product-gallery {
            padding: 0;
        }
        .product-gallery .swiper-wrapper {
            display: flex;
            grid-gap: unset;
            height: 100vw;
            max-height: 450px;            
        }
        .product-gallery .swiper-slide {
            border-radius: unset;
            border: unset;
            grid-area: unset;
        }
        .swiper-slide.slide-1 {
            padding: 20px;
        }
        .product-gallery .swiper-wrapper img {
            object-fit: contain;
        }
        .single-product-gallery:after {
            content: '';
            display: block;
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 1;
            height: 20px;
            width: 20px;
            background: url('data:image/svg+xml,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="3 3 18 18"><path d="M4 12H20M12 4V20" stroke="%23c3c3c3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>');
            background-size: contain;
            background-repeat: no-repeat;
            pointer-events: none;
        }

        /* Product Gallery Thumbs
        ----------------------------------------------------*/    
            .thumbs-slider {
                display: block;
            }
            .thumbs-slider .swiper-wrapper {
                justify-content: center;
            }
            .thumbs-slider .swiper-slide {
                width: 45px !important;
                height: 45px;
                margin: 0 5px;
                border: 1px solid var(--color-main-);
            }
}