/* Zoom Image Effects - ONLY for Pricebox Images */

/* Ensure pricebox containers have proper containment */
.pricebox {
    overflow: hidden !important;
    position: relative;
}

/* Ensure pricebox columns maintain boundaries */
#pricebox-holder .col-xl-6,
#pricebox-holder .col-lg-6,
#pricebox-holder .col-sm-6,
#pricebox-holder .col-10 {
    overflow: hidden;
    position: relative;
}

/* Pricebox specific zoom-image styles */
.pricebox .zoom-image {
    overflow: hidden;
    margin-bottom: 1rem;
    position: relative;
    width: 100%;
    border-radius: 0;
    cursor: pointer;
}

.pricebox .zoom-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
    transform-origin: center center;
    border-radius: 0;
    transform: scale(1);
}

.pricebox .zoom-image img:hover {
    transform: scale(1.2);
}

.pricebox .zoom-image:active img {
    transform: scale(1.15);
}

/* Responsive adjustments for pricebox only */
@media screen and (max-width: 767px) {
    .pricebox .zoom-image img:hover {
        transform: scale(1.1);
    }
    
    .pricebox .zoom-image:active img {
        transform: scale(1.08);
    }
}

/* Carousel specific zoom-image styles */
#carousel .zoom-image,
#carousel-2 .zoom-image {
    margin-bottom: 0;
    width: 100%;
    height: 100%;
}

#carousel .zoom-image img,
#carousel-2 .zoom-image img {
    object-fit: cover;
}

#carousel .zoom-image img:hover,
#carousel-2 .zoom-image img:hover {
    transform: scale(1.05);
}

/* Touch device support for carousel */
#carousel .zoom-image:active img,
#carousel-2 .zoom-image:active img {
    transform: scale(1.08);
}

/* Ensure carousel slides have proper overflow */
#carousel .slick-slide,
#carousel-2 .slick-slide {
    overflow: hidden;
}

/* Responsive adjustments */
@media screen and (max-width: 767px) {
    .zoom-image img:hover {
        transform: scale(1.1);
    }
    
    .pricebox .zoom-image img:hover {
        transform: scale(1.02);
    }
    
    #carousel .zoom-image img:hover,
    #carousel-2 .zoom-image img:hover {
        transform: scale(1.03);
    }
}