/* Product Image Zoom Enhancement for Featured Products */

/* Override the existing product image styling for better zoom and visibility */
.shop-one__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Changed from contain to cover for better zoom */
    object-position: center !important;
    padding: 10px !important; /* Reduced padding from 20px to 10px for more image visibility */
    border-radius: 12px !important;
    filter: brightness(1.05) contrast(1.1) !important;
    transition: all 0.4s ease !important;
    transform: scale(1.1) !important; /* Add slight zoom by default */
}

/* Enhanced hover effect for even more zoom */
.shop-one__item:hover .shop-one__image img {
    transform: scale(1.2) !important; /* Increased zoom on hover */
    opacity: 0.95 !important;
}

/* Alternative approach: Use background-image for better control */
.shop-one__image.bg-style {
    background-size: 80% auto !important; /* Show 80% of container for better zoom */
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.shop-one__item:hover .shop-one__image.bg-style {
    background-size: 90% auto !important; /* Zoom in on hover */
}

/* For product cards that use the product-card class */
.product-card__image {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important; /* Changed from contain to cover */
    object-position: center !important;
    transform: scale(1.1) !important; /* Default zoom */
    transition: transform 0.3s ease !important;
}

.product-card:hover .product-card__image {
    transform: scale(1.25) !important; /* Enhanced zoom on hover */
}

/* Adjust the image container to accommodate the zoom */
.shop-one__image {
    overflow: hidden !important; /* Ensure zoomed images don't overflow */
    border-radius: 12px 12px 0 0 !important;
}

.product-card__image-container {
    overflow: hidden !important;
    border-radius: 12px !important;
}

/* Fine-tune for different screen sizes */
@media (max-width: 768px) {
    .shop-one__image img {
        transform: scale(1.05) !important; /* Slightly less zoom on mobile */
        padding: 8px !important;
    }
    
    .shop-one__item:hover .shop-one__image img {
        transform: scale(1.15) !important;
    }
    
    .product-card__image {
        transform: scale(1.05) !important;
    }
    
    .product-card:hover .product-card__image {
        transform: scale(1.2) !important;
    }
}

@media (max-width: 576px) {
    .shop-one__image img {
        transform: scale(1.0) !important; /* Normal scale on very small screens */
        padding: 5px !important;
    }
    
    .shop-one__item:hover .shop-one__image img {
        transform: scale(1.1) !important;
    }
    
    .product-card__image {
        transform: scale(1.0) !important;
    }
    
    .product-card:hover .product-card__image {
        transform: scale(1.15) !important;
    }
}

/* Ensure text and badges remain visible with zoomed images */
.shop-one__sale,
.product-card__badge {
    z-index: 10 !important;
    position: relative !important;
}

.shop-one__btns {
    z-index: 10 !important;
}

/* Improve image quality for zoomed images */
.shop-one__image img,
.product-card__image {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* Optional: Add a subtle border to define image boundaries */
.shop-one__image img {
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.product-card__image {
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}