.product-gallery-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
    &.thumbnails-separate{
        .product-image-container{
            padding-left: 0;
            padding-right: 0;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            gap: 25px;
            @media screen and (max-width: 767px) {
                padding: 13px !important;
                gap: 10px;
            }
            .product-images__slide{
                width: calc(50% - 12.5px);
                display: block;
                &:nth-child(1){
                    width: 100%;
                }
                @media screen and (max-width: 767px) {
                    width: 58px !important;
                    height: 58px !important;
                    border-radius: 7px;
                    overflow: hidden;
                    &:nth-child(1){
                        width: 100% !important;
                        height: initial !important;
                    }
                }
                .product-single__media-zoom{
                    opacity: 0.0;
                    pointer-events: none;
                    @media screen and (max-width: 767px) {
                        width: 100%;
                        height: 100%;
                        opacity: 0 !important;
                        position: absolute;
                        top: 0; bottom: 0;
                        left: 0; right: 0;
                    }
                }
            }
            &.zoom-loaded{
                .product-single__media-zoom{
                    opacity: 0.0;
                    pointer-events: none;
                }
                .product-images__slide{
                    &:hover{
                        .product-single__media-zoom{
                            opacity: 1.0;
                            pointer-events: auto;
                        }
                    }
                }
                &:has(.product-single__media-zoom) .product-single__media img{
                    cursor: zoom-in;
                }
            }
        }
        scroll-shadow{
            margin-top: 25px;
            width: 100%;
            position: relative;
            #Product-Thumbnails{
                display: flex;
                flex-wrap: wrap;
                gap: 25px;
                .product-thumbnail{
                    width: calc(50% - 25px);
                    border-radius: 10px;
                    overflow: hidden;
                    border: 0px solid black !important;
                    &:after{
                        display: none;
                    }
                }
            }
        }
    }
}







.template-product{
    .shopify-section.section-multicolumn{
        .multicolumn{
            margin-top: 65px;
            .multicolumn__inner{
                >.row{
                    max-width: 1677px;
                    @media screen and (max-width: 1067px) {
                        padding: 0 !important;
                    }
                    figure{
                        margin: 0;
                        @media screen and (max-width: 1067px) {
                            --ratio-percent: 90% !important;
                        }
                    }
                    .background_image{
                        position: relative;
                        figure{
                            &:after{
                                position: absolute;
                                top: 0; bottom: 0;
                                left: 0; right: 0;
                                content: "";
                                background-color: rgba(0,0,0,0.35);
                                z-index: 1;

                                @media screen and (max-width: 1067px) {
                                    content: none;
                                }
                            }
                        }
                        .block_content{
                            width: calc( 100% - 30px );
                            padding: 1.8vw 2.7vw;
                            position: absolute;
                            bottom: 0;
                            z-index: 1;
                            color: white;
                            @media screen and (min-width: 1700px) {
                                padding: 30.56px 45.84px;
                            }

                            @media screen and (max-width: 1067px) {
                                position: relative !important;
                                color: black;
                                position: absolute;
                                top: initial; bottom: initial;
                                left: initial; right: initial;
                                padding: 20px 0 0;
                            }
                            h2{
                                color: white;
                                /*font-size: 48px;*/
                                font-size: 2.2vw;
                                line-height: 1.1;
                                font-weight: 400;
                                margin-bottom: 16.1px;
                                @media screen and (max-width: 1067px) {
                                    font-size: 32px;
                                    color: black;
                                }
                                @media screen and (min-width: 1700px) {
                                    font-size: 37.4px;
                                }
                                @media screen and (max-width: 768px) {
                                    font-size: 24px;
                                }
                            }
                            .rte{
                                color: white;
                                /*font-size: 24px;*/
                                font-size: 1.2vw;
                                line-height: 1.2;
                                font-weight: 400;

                                @media screen and (max-width: 1067px) {
                                    font-size: 16px;
                                    color: black;
                                }
                                @media screen and (min-width: 1700px) {
                                    font-size: 20.4px;
                                }
                                @media screen and (max-width: 768px) {
                                    font-size: 16px;
                                }
                                p{
                                    color: inherit;
                                    font-size: inherit;
                                    line-height: inherit;
                                    font-weight: inherit;
                                    margin-bottom: 0;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}



/* PRODUCT INFORMATION */
.template-product{
    .thb-product-detail{
        max-width: 1600px;
        margin: auto;
        @media screen and (max-width: 1067px) {
            padding-left: 40px !important;
            padding-right: 40px !important;
            >div{
                padding-left: 0px !important;
                padding-right: 0px !important;
            }
        }
        @media screen and (max-width: 767px) {
            padding-left: 15px !important;
            padding-right: 15px !important;
            >div{
                // padding-left: 15px !important;
                // padding-right: 15px !important;
            }
        }
        .small-12.large-7.columns{
            padding-left: 0;
            @media screen and (max-width: 1067px) {
                padding-left: 0px !important;
                padding-right: 0px !important;
                // padding-right: 0 !important;
                // display: none !important;
            }
        }
        .product-title{
            @media screen and (max-width: 768px) {
                font-size: 24px !important;
            }
        }
        .product-information{
            @media screen and (max-width: 1067px) {
                padding-left: 0px !important;
                padding-right: 0px !important;
            }
            .product-information--inner{
                margin-top: -15px;
                padding-top: 15px;
                @media screen and (max-width: 1067px) {
                    max-width: initial;
                }
                .product-title-container{
                    .product-title{
                        font-size: 31.6px;
                        margin-bottom: 7.7px;
                    }
                    border-bottom: 0px solid black;
                    padding-bottom: 0px;
                    margin-bottom: 0px;
                    +.product--text{
                        font-size: 14.3px;
                        border-bottom: 1px solid black;
                        padding-bottom: 11px;
                        margin-bottom: 11px;
                    }
                }
                .product-price-container .price {
                    font-size: 21.6px;
                    line-height: 1.58;
                    flex-wrap: wrap;
                    gap: 10px;
                }
                .star-rating-container{
                    .star-rating{
                        font-size: 1.3rem;
                    }
                }

                
                .select_function_block{
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 11px;
                    // box-shadow: inset 0 0 10px rgba(red,0.3); //boxx ---
                }
                .select_finish {
                    top: 0 !important;
                    span{
                        font-weight: 600;
                        font-size: 16px;
                    }
                }

                .finishes_list {
                    margin-top: 6.4px;
                    padding-left: 2px;
                    .afinish {
                        width: 32px;
                        height: 32px;
                        display: inline-block;
                        border: 1px solid #111111;
                        box-shadow: 0vw 0vw 0.2vw rgba(0, 0, 0, 0.5);
                        opacity: 1.0;
                        border-radius: 50%;
                        margin-right: 8.3px;
                        cursor: pointer;
                        transition: opacity 0.3s ease 0.0s;
                        overflow: hidden;
                        &:hover{
                            opacity: 0.8;
                        }
                        .secondary-color {
                            transform: rotateZ(45deg);
                            display: block;
                            width: 50px;
                            height: 50px;
                            position: relative;
                            transform-origin: 50% 50%;
                            left: 15%;
                            top: 25%;
                        }
                    }
                }
                .variations{
                    display: flex;
                    gap: 17px;
                    fieldset{
                        width: 50%;
                    }
                    @media screen and (max-width: 1067px) {
                        flex-wrap: wrap;
                        gap: 0px;
                        fieldset{
                            width: 100%;
                        }
                    }
                }
                .product-form__input{
                    margin-bottom: 16px;
                    .form__label{
                        font-weight: 600;
                        font-size: 16px;
                    }
                    .select{
                        margin: 0;
                        max-width: 321px;
                        &:after{
                            content: "";
                            width: 20px;
                            height: 20px;
                            top: 30%;
                            right: 12px;
                            border: 0px solid black;
                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M297.4 470.6a32 32 0 0 0 45.3 0l192-192a32 32 0 0 0-45.3-45.3L320 402.7 150.6 233.4a32 32 0 0 0-45.3 45.3z'/%3E%3C/svg%3E");
                        }
                        select{
                            height: 45px;
                            border-radius: 5px;
                            border: 1px solid black;
                            width: 100%;
                            padding: 0.5em 0.7em;
                            font-size: 16px;
                        }
                    }
                }

                .product-popup-modal__opener{
                    margin-top: 40px;
                    display: block;
                    @media screen and (max-width: 1250px) {
                        margin-top: 0px;
                    }
                    @media screen and (max-width: 768px) {
                        margin-top: 0px;
                    }
                    button{
                        text-align: left;
                        color: #CCAA2C;
                        font-size: 17px !important;
                        letter-spacing: 0.018em;
                        margin-bottom: 17px;
                        display: block;
                        @media screen and (max-width: 767px) {
                            font-size: 17px !important;
                        }
                        span{
                            font-size: inherit !important;
                        }
                    }
                    ul{
                        list-style: none;
                        padding: 0;
                        margin: 0;
                        li{
                            padding-left: 2.2em;
                            line-height: 1.5;
                            margin-bottom: 6px;
                            font-size: 16px;
                            /* display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            align-content: center; */
                            @media screen and (max-width: 767px) {
                                font-size: 16px !important;
                            }
                            position: relative;
                            &:before{
                                content: "";
                                width: 22px;
                                height: 22px;
                                font-size: 20px;
                                position: absolute;
                                top: 1px; bottom: inital;
                                left: 3px; right: 0;
                                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cg fill='%23737373' stroke='%23fff' stroke-miterlimit='10' stroke-width='.5'%3E%3Cpath fill-rule='evenodd' d='m17 7.8.6.1.4.4.3.5v.6l-.2.6-4.1 7.5v.1h-.1v.2h-1.6l-4.7-3.2-.4-.5-.2-.5a2 2 0 0 1 .3-1.1 2 2 0 0 1 1-.6 2 2 0 0 1 1.1.3l2.8 2.3 3.3-6 .4-.5.5-.2z'/%3E%3Cpath d='M13 .3a4 4 0 0 1 2.8 1.1A5 5 0 0 0 19 2.6l1.6.3 1.4.9a4 4 0 0 1 1.2 2.9 5 5 0 0 0 1.4 3.5 4 4 0 0 1 0 5.6 5 5 0 0 0-1.4 3.3 4 4 0 0 1-3.8 3.9 6 6 0 0 0-3.6 1.6 4 4 0 0 1-5.6 0A6 6 0 0 0 6.6 23a4 4 0 0 1-3.8-3.9 5 5 0 0 0-1.4-3.3 4 4 0 0 1 0-5.6 6 6 0 0 0 1.4-3.5l.3-1.6.9-1.3a4 4 0 0 1 3-1.2 5 5 0 0 0 3.2-1.2A4 4 0 0 1 13 .3Zm0 3-.7.2a8 8 0 0 1-5.4 2.1l-.5.1-.5.6v.3a8 8 0 0 1-.7 3 8 8 0 0 1-1.7 2.7 1 1 0 0 0 0 1.4 8 8 0 0 1 2.3 5.4 1 1 0 0 0 1 1 9 9 0 0 1 3 .7 9 9 0 0 1 2.5 1.7 1 1 0 0 0 1.4 0 9 9 0 0 1 2.6-1.7 9 9 0 0 1 3-.7 1 1 0 0 0 1-1 8 8 0 0 1 2.2-5.4 1 1 0 0 0 0-1.4 8 8 0 0 1-1.7-2.6 8 8 0 0 1-.6-3v-.4l-.3-.3-.3-.3h-.4a8 8 0 0 1-5.5-2.1z'/%3E%3C/g%3E%3C/svg%3E");
                            }
                        }
                    }
                }

                .share-article {
                    .clipboard--bubble {
                        @media (max-width: 500px) {
                            position: fixed;
                            top: 100px;
                            left: 50%;
                            bottom: unset;
                            transform: translate( -50%, -50% );
                            z-index: 100;
                        }

                        &:after {
                            @media (max-width: 500px) {
                                content: none;
                            }
                        }
                    }
                }

            }
        }
    }
}
.product__accordion{
    summary{
        text-transform: initial !important;
        font-size: 16px !important;
        line-height: 1.2;
        margin-bottom: 0.4em;
        letter-spacing: 0em !important;
        padding: 17px 40px 16px 0;
        margin: 0;
        padding-right: 0;
    }
}

.ftab-block{
    h2{
        font-size: 20px !important;
        line-height: 1.2;
        margin-bottom: 0.4em;
        // font-family: "Crimson Text", serif;
        font-family: "Instrument Sans", sans-serif;
    }
}

.complementary-products--inner{
    border: 1px solid black !important;
    border-radius: 5px;
    margin-top: 35px !important;
    padding: 22px 20px !important;
    .complementary-products--heading{
        border: 0px solid red !important;
        position: relative;
        font-size: 22px !important;
        line-height: 1.2;
        margin: 0.0em;
        margin-bottom: 1em;
        padding: 0em;
        font-family: "Crimson Text", serif;
        text-transform: initial;
        letter-spacing: 0em;
        transform: none;
        left: 0;
        top: 0;

    }
    .complementary-products-holder{
        display: flex;
        gap: 30px;
        @media screen and (max-width: 767px) {
            flex-wrap: wrap;
        }
        .product-cart-item{
            display: flex;
            flex-direction: column;


            select{
                height: initial;
                border-radius: 5px;
                border: 1px solid black;
                width: 100%;
                padding: 0.5em 0.7em;
                font-size: 16px;
            }
            img{
                max-width: initial !important;
                @media screen and (max-width: 768px) {
                    /* max-height: 200px !important;
                    height: 200px !important; */
                    object-fit: contain;
                }
            }
            .product-featured-image-link.aspect-ratio--square {
                @media screen and (max-width: 768px) {
                    padding-bottom: 50% !important;
                }
            }

            .product-cart-item-image{
                width: 100%;
            }
            .product-card{
                // box-shadow: inset 0 0 10px rgba(red,0.3); //boxx ---
                width: 100%;
                margin: 0;
                figure{
                margin: 0;
                    // box-shadow: inset 0 0 10px rgba(red,0.3); //boxx ---
                    a{
                        width: 100%;
                        img{
                            width: 100% !important;
                            position: absolute;
                            top: 0; bottom: 0;
                            left: 0; right: 0;
                            max-width: initial !important;
                        }
                    }
                }
                // .product-featured-image{
                //     width: 100%;
                //     height: 300px;
                // }
                .product-card-info{
                    display: none !important;
                }
                .product-card--badges.right {
                    right: 0px;
                }
                .custombadge{
                    font-size: 12px;
                }
            }


            .product-cart-item-info{
                width: 100%;
                
                .product-form{
                    margin-top: 0;
                }
                .pbutton{
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    .from{
                        display: none;
                    }
                    button{
                        height: initial;
                        font-size: 14px !important;
                        line-height: 1.2;
                        margin-bottom: 0.4em;
                        letter-spacing: 0em;
                        padding: 0.75em 1em !important;
                        text-transform: initial;
                        font-family: "Instrument Sans", sans-serif;
                    }
                }
            }
        }
    }
}


.product__accordion.accordion{
    p{
        font-family: "Instrument Sans", sans-serif !important;
        span{
            font-family: "Instrument Sans", sans-serif !important;
        }
    }
}
/* MOBILE CHANGES */ 
.mobile-information{
    display: none;
    @media screen and (max-width: 1067px) {
        display: block;
        width: 100%;
        max-width: 100% !important;
        >div{
            max-width: 100% !important;
            width: 100% !important;
        }
        .mobile-top-tag{
            .price{
                >del, >ins, >small{
                    display: none !important;
                }
            }
        }
        .price-title{
            display: flex;
            justify-content: space-between;
            align-items: center;
            align-content: center;
            .price{
                display: block;
                margin-left: 1em;
                font-size: 24px;
                @media screen and (max-width: 768px) {
                    font-size: 18px;
                }
            }
        }
        .product-title{
            +div{
                .badges{
                    display: none;
                }
            }
        }
    }
}
@media screen and (max-width: 1067px) {
    .product-information{
        .product-title-container{
            display: none;
        }
    }
}





/* POPUP STYLES */

.product-popup-modal__content scroll-shadow{
    border: 0px solid red !important;
}
modal-dialog.product-popup-modal{
    .product-popup-modal__content{
        padding: 15px;
        // position: relative;
        border: 0px solid red !important;
        text-align: center;
        max-width: 1000px;
        max-height: 90vh;
        scroll-shadow{
            // box-shadow: inset 0 0 10px rgba(red,0.3); //boxx ---
            border: 0px solid red !important;
            border-radius: 5px;
        }
    }
    .product-popup-modal__content-info{
        padding: 25px;
        padding-right: 56px;
        overflow-y: auto;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        background: #FFFFFF;
        @media screen and (max-width: 991px) {
            flex-wrap: wrap;
            padding-right: 25px;
            padding-top: 25px;
        }
        @media screen and (max-width: 767px) {
            padding-top: 25px;
            display: block;
            max-height: 100%;
            overflow-y: auto !important;
        }
        .side-image{
            width: 55%;
            height: 100%;
            img{
                border-radius: 5px;;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
            @media screen and (max-width: 991px) {
                width: 50%;
            }
            @media screen and (max-width: 767px) {
                width: 100%;
                height: 200px;
            }
        }
        .guide-card{
            width: 50%;
            padding-top: 11px;
            padding-left: 27px;
            text-align: left;
            
            display: block !important;
            max-height: 100%;

            @media screen and (max-width: 991px) {
                /*overflow-y: auto;
                display: block !important;
                max-height: 100%;*/
            }
            @media screen and (max-width: 767px) {
                width: 100%;
                max-height: initial;
                padding-left: 0px;
                overflow-y: hidden;
            }

            .title {
                font-size: 35.6px;
                line-height: 1;
                color: #49574F;
                margin-bottom: 12px;
                font-weight: 500;
            }

            .subtitle {
                font-size: 14px;
                line-height: 1.1;
                color: #49574F;
                margin-bottom: 30px;
            }

            .steps {
                display: flex;
                flex-direction: column;
                gap: 20px;
                margin-bottom: 30px;
            }

            .step {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .step-number {
                width: 34px;
                height: 34px;
                min-width: 34px;
                border-radius: 50%;
                background: #49574F;
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 700;
                font-size: 20px;
            }

            .step-text {
                font-size: 16px;
                color: #66706a;
            }

            .download-btn {
                display: block;
                width: 100%;
                background: #49574F;
                color: white;
                text-align: center;
                text-decoration: none;
                padding: 0.4em 1em;
                border-radius: 4px;
                font-size: 20px;
                font-weight: 700;
                margin-bottom: 18px;
                transition: background 0.2s ease;
                &:hover{
                    background: #48524d;
                }
            }


            .footer-title {
                font-size: 14px;
                font-weight: 700;
                color: #49574F;
                margin-bottom: 4px;
                line-height: 1;
            }

            .footer-email {
                font-size: 14px;
                color: #49574F;
                line-height: 1;
            }

            // @media (max-width: 767px) {
            //     .guide-card {
            //         width: 100%;
            //     }

            //     .title {
            //         font-size: 42px;
            //     }

            //     .step-text {
            //         font-size: 18px;
            //     }
            // }
        }




    }
    // position: relative;
    .product-popup-modal__content-header {
        border-radius: 20px 20px 0 0;
        background-color: transparent !important;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 73px;
        text-align: center;
        color: black;
        top: 0;
        left: 0;
        flex-shrink: 0;
        position: absolute;
        right: 0;
        z-index: 1;
        button{
            z-index: 1;
            color: black;
            path{
                fill: black;
                stroke: black;
            }
        }

        .product-popup-modal__toggle {
            right: 25px;
            margin-top: -12px;
        }
    }
    // a{
    //     padding: 0.5em 1em;
    //     background-color: black;
    //     color: white;
    //     display: inline-flex;
    //     justify-content: center;
    //     align-items: center;
    //     align-content: center;
    //     transition: opacity 0.3s ease 0.0s;
    //     &:hover{
    //         opacity: 0.8;
    //     }
    //     &:before{
    //         content: "";
    //         display: inline-block;
    //         width: 32px;
    //         height: 32px;
    //         margin-right: 0.5em;
    //         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23FFF' d='M128 64a64 64 0 0 0-64 64v384a64 64 0 0 0 64 64h80V464a64 64 0 0 1 64-64h176V234.5a64 64 0 0 0-18.7-45.3L322.7 82.7A64 64 0 0 0 277.5 64zm261.5 176H296a24 24 0 0 1-24-24v-93.5zM272 444c-11 0-20 9-20 20v128c0 11 9 20 20 20s20-9 20-20v-28h12a60 60 0 0 0 0-120zm32 80h-12v-40h12c11 0 20 9 20 20s-9 20-20 20m96-80c-11 0-20 9-20 20v128c0 11 9 20 20 20h32a52 52 0 0 0 52-52v-64a52 52 0 0 0-52-52zm20 128v-88h12a12 12 0 0 1 12 12v64a12 12 0 0 1-12 12zm88-108v128c0 11 9 20 20 20s20-9 20-20v-44h28c11 0 20-9 20-20s-9-20-20-20h-28v-24h28c11 0 20-9 20-20s-9-20-20-20h-48c-11 0-20 9-20 20'/%3E%3C/svg%3E");
    //     }
    // }
}


.accordion .accordion__content {
    > p,
    > p > span,
    > p > span *,
    > ul,
    > ul > li,
    > ul > li > span,
    > ul > li *,
    > p > strong,
    > p > strong *{
        font-size: 15px !important;
        font-family: "Instrument Sans", sans-serif !important;
    }
    h3{
        font-family: "Instrument Sans", sans-serif !important;
    }
}

.price del+ins{
    margin: 0;
}
.badges{
    margin-left: 0px !important;
    @media screen and (max-width: 768px) {
        display: flex;
        flex-direction: row;
    }
}
.thb-product-detail .product-price-container .badge, .badge{
    border-radius: 30px;
    font-size: 14px;
    letter-spacing: 0.01em;
    background-color: #AC0606;
    text-transform: none;
    margin-right: 5px;
    @media screen and (max-width: 768px) {
        margin-bottom: 5px;
    }
    &.dark{
        background: #000;
    }
}


/* JUDGE ME PDP */
#judgeme_product_reviews{
    .jdgm-rev-widg__title{
        font-size: 46px;
        font-weight: 600;
        text-align: center;
        font-family: "Crimson Text", serif;
        @media screen and (max-width: 991px) {
            font-size: 30px;
        }
    }
}


.multicolumn{
    .multicolumn__column{
        @media screen and (max-width: 768px) {
            flex: 0 0 50% !important;
            max-width: 50% !important;
            margin-bottom: 20px;
        }
        @media screen and (max-width: 540px) {
            flex: 0 0 100% !important;
            max-width: 100% !important;
            margin-bottom: 15px;
        }
    }
}