.glozin-shoppable-images-carousel {
    ~ .shoppable-images-modal {
        --gz-modal-content-width: 1060px;
        --gz-modal-content-padding-y: 0px;
        --gz-modal-content-padding-x: 0px;
    }
}

.glozin-shoppable-images-carousel__item {
    cursor: pointer;
}

.glozin-shoppable-images-carousel__icon {
    --gz-button-width: 30px;
    --gz-button-height: 30px;
    --gz-button-font-size: 12px; 
    display: flex;

    &.loading {
        position: absolute;
    }
}

.glozin-shoppable-images-carousel--middle {
    .glozin-shoppable-images-carousel__icon{
        --gz-button-width: 50px;
        --gz-button-height: 50px;
        --gz-button-font-size: 16px;

        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0.8);
        transition: var(--gz-transition);
    }

    .glozin-shoppable-images-carousel__item {
        &:hover {
            .glozin-shoppable-images-carousel__icon {
                opacity: 1;
                pointer-events: auto;
                transform: translate(-50%, -50%) scale(1);
            }
        }
    }
}

.shoppable-images-modal {
    .modal__button-close {
        --gz-button-color: #666;
        --gz-button-color-hover: var(--gz-color-dark);
        --gz-button-bg-color: var(--gz-color-light);
        --gz-button-bg-color-hover: var(--gz-color-light);
        --gz-button-border-color: transparent;
        --gz-button-border-color-hover: transparent;
        --gz-button-font-size: 11px;
        opacity: 1;
        color: #666;
        top: 10px;
        inset-inline-end: 10px;

        &:hover {
            color: var(--gz-color-dark);
        }
    }

    .e-con-inner {
        --gz-container-spacing: 0px;
    }

    .modal__container {
        height: 100%;
    }

    .modal__wrapper {
        height: 100%;
    }

    .modal__content {
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        pointer-events: auto;
        scroll-behavior: smooth;
        scrollbar-width: auto;
        scrollbar-color: var(--gz-color-light-grey);

        &::-webkit-scrollbar {
            width: 4px;
            border-radius: 30px;
        }
    
        &::-webkit-scrollbar-track {
            background: #fff;
        }
    
        &::-webkit-scrollbar-thumb {
            background-color: var(--gz-color-light-grey);
            border-radius: 30px;
        }
    
        &::-webkit-scrollbar-thumb:hover {
            background-color: var(--gz-color-dark);
        }
    }
}

.elementor-editor-active .glozin-shoppable-images-carousel__button-link,
.elementor-editor-active .glozin-shoppable-images-carousel__button-shoppable {
    pointer-events: none;
}

// Shoppable Images
.glozin-shoppable-images {
    --col-width: 55%;
    --col-gap: 0px;
}

.glozin-shoppable-images__thumbnail {
    --gz-image-rounded: 0px;
}

.glozin-shoppable-images__hotspot {
    transform: translate(var(--gz-shoppable-images-hotspot-x, 0), var(--gz-shoppable-images-hotspot-y, 0));

    .gz-button {
        --gz-button-width: 30px;
        --gz-button-height: 30px;
        --gz-button-font-size: 10px;
    }
}

.glozin-shoppable-images__products {
    --products-gap: 15px;

    ul.products {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: auto;
        gap: var(--products-gap);
        margin: 0;
        padding: 0;

        li.product {
            width: calc(50% - var(--products-gap) / 2);
            padding: 0;
            margin: 0;
            flex-shrink: 0;

            .product-thumbnail {
                > * {
                    display: none;
                }

                > a,
                .product-video-loop-thumbnail {
                    display: block;
                }

                > .glozin-shoppable-images__active {
                    display: inline-flex;
                }
            }

            .product-variation-items,
            .gz-button-add-to-cart-mobile {
                display: none;
            }

            &.active {
                .glozin-shoppable-images__active {
                    opacity: 1;
                }
            }
        }

        &.has-scrollbar {
            li.product {
                margin-bottom: 20px;
            }
        }

        &::-webkit-scrollbar {
            height: 4px;
        }

        &::-webkit-scrollbar-track {
            background: #EBEBEB;
        }

        &::-webkit-scrollbar-thumb {
            background: var(--gz-color-dark);
        }

        &::-webkit-scrollbar-thumb:hover {
            background: var(--gz-color-dark);
        }
    }

    .glozin-shoppable-images__active {
        --gz-button-width: 35px;
        --gz-button-height: 35px;
        --gz-button-font-size: 14px;

        position: absolute;
        inset-inline-end: 10px;
        bottom: 10px;
        z-index: 1;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }
}

.glozin-shoppable-images__tag {
    color: var(--gz-color-base);
}

.glozin-shoppable-images__button {
    --gz-button-icon-size: 15px;
}

@media (min-width: 768px) {
    // Shoppable Images Carousel
    .shoppable-images-modal {
        .modal__button-close {
            --gz-button-bg-color: transparent;
            --gz-button-bg-color-hover: transparent;
            --gz-button-border-color: transparent;
            --gz-button-border-color-hover: transparent;
            --gz-button-padding: 0px;
            --gz-button-rounded: 0px;
            --gz-button-font-size: 13px;

            top: 0px;
            inset-inline-end: 0px;
        }

        .modal__container {
            height: auto;
        }

        .modal__wrapper {
            --gz-modal-content-padding-y: 0px;
            overflow: hidden;
        }

        .glozin-shoppable-images__summary {
            position: absolute;
            top: 0;
            inset-inline-end: 0; 
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;

            scroll-behavior: smooth;
            scrollbar-width: auto;
            scrollbar-color: #c8c8c8;
            border-radius: var(--gz-modal-content-border-radius);

            &::-webkit-scrollbar {
                width: 4px;
                border-radius: 30px;
            }

            &::-webkit-scrollbar-track {
                background: #fff;
            }

            &::-webkit-scrollbar-thumb {
                background-color: #c8c8c8;
                border-radius: 30px;
            }

            &::-webkit-scrollbar-thumb:hover {
                background-color: var(--gz-color-grey);
            }
        }
    }

    // Shoppable Images
    .glozin-shoppable-images__products {
        --products-gap: 20px;
    }
}