.aguara__single-product-grid-wrapper {
    display: block;

    .aguara__single-product-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, 1fr);

        &.count-1 {
            grid-template-columns: 1fr;
        }

        &.count-2 {
            grid-template-columns: repeat(2, 1fr);

            .aguara__single-product-item:first-child {
                grid-column: auto; 
            }
        }
        
        .aguara__single-product-item {
            &:first-child {
                grid-column: 1 / -1; 
            }

            .aguara__single-product-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                cursor: pointer;
            }
        }
    }
}

.aguara__single-product-gallery-slider-wrapper {
    display: none;
}

.aguara__image-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;

    &.active {
        display: flex;
    }

    .aguara__image-popup-content {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
    }

    .aguara__image-popup-close {
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 40px;
        color: #fff;
        cursor: pointer;
    }
}

@media (max-width: 767px) {
    .aguara__single-product-grid-wrapper {
        display: none;
    }

    .aguara__single-product-gallery-slider-wrapper {
        display: block;

        .aguara-custom-swiper {
            width: 100%;
            overflow: initial !important;

            .swiper-pagination.swiper-pagination.swiper-pagination.swiper-pagination {
                display: block !important;
                bottom: -25px !important;

                .swiper-pagination-bullet {
                    background-color: #f16e28;
                    block-size: 12px;
                    inline-size: 12px;

                    &:not(.swiper-pagination-bullet-active) {
                        opacity: 20%;
                    }
                }
            }

            .swiper-slide {
                width: 100%;
            }
        }
    }
}