/* Product Catalog Photo Fixes */

/* Fix voor product catalogus foto's - GEEN SPACING */
.impl_fea_car_img .impl_frst_car_img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 8px 8px 0 0;
    transition: transform 0.3s ease;
    display: block;
    margin: 0;
    padding: 0;
}

.impl_fea_car_img .impl_frst_car_img:hover {
    transform: scale(1.05);
}

/* CRITICAL: Fix voor alle product afbeeldingen om uitrekking EN afsnijding te voorkomen */
.impl_fea_car_img img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    object-position: center !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* EXTRA PROTECTION: Product afbeeldingen mogen NOOIT worden afgesneden */
.impl_fea_car_img img,
.product-slider img,
.thumbnail-item img {
    object-fit: contain !important;
    object-position: center !important;
}

/* Specifieke overrides voor slider afbeeldingen */
.slider-image img,
.modern-slider-container img,
#productSlider img {
    object-fit: contain !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Fix voor lazy-load afbeeldingen */
.impl_fea_car_img .lazy-load {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #f8f9fa;
}

/* Ensure consistent height for product image containers - GEEN SPACING */
.impl_fea_car_img {
    min-height: auto;
    max-height: auto;
    margin: 0;
    padding: 0;
    border-bottom: none;
}

/* Remove spacing between image and card data */
.impl_fea_car_box {
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.impl_fea_car_data {
    margin-top: 0 !important;
    padding-top: 30px !important;
    border-radius: 0 0 8px 8px;
}

/* Homepage foto fixes */
.impl_service_img img,
.revolution-slider img {
    object-fit: cover !important;
    object-position: center !important;
}

/* Revolution slider fixes voor homepage */
.rev-slidebg {
    object-fit: cover !important;
    object-position: center !important;
}

/* Onlangs toegevoegd sectie foto fixes - GEEN SPACING */
.impl_fea_car_wrapper .impl_fea_car_img img,
.homepage-product-img {
    object-fit: contain !important;
    object-position: center !important;
    height: 270px;
    width: 100%;
    max-width: 400px;
    border-radius: 8px 8px 0 0;
    display: block;
    margin: 0;
    padding: 0;
}

/* Homepage product card styling */
.impl_fea_car_wrapper .impl_fea_car_box {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.impl_fea_car_wrapper .impl_fea_car_data {
    margin-top: 0 !important;
    border-radius: 0 0 8px 8px;
}

/* RESPONSIVE DESIGN FIXES */

/* Tablet (768px and down) */
@media (max-width: 768px) {
    .impl_fea_car_img {
        height: 180px !important;
    }
    
    .impl_fea_car_img img {
        height: 180px !important;
        width: 100% !important;
    }
    
    /* Make product cards stack better */
    .product.col-lg-4.col-md-6 {
        width: 50% !important;
        float: left;
        padding: 10px;
    }
    
    /* Fix product slider on tablets */
    .main-slider {
        height: 350px !important;
    }
    
    /* Thumbnail navigation responsive */
    .thumbnail-item {
        width: 50px !important;
        height: 50px !important;
    }
    
    /* Homepage tablet fixes */
    .homepage-product-img {
        height: 220px !important;
        max-width: 100% !important;
    }
}

/* Mobile (480px and down) */
@media (max-width: 480px) {
    .impl_fea_car_img {
        height: 200px !important;
        margin: 0 auto;
    }
    
    .impl_fea_car_img img {
        height: 200px !important;
        width: 100% !important;
    }
    
    /* Single column on mobile */
    .product.col-lg-4.col-md-6 {
        width: 100% !important;
        float: none;
        padding: 15px;
        margin-bottom: 20px;
    }
    
    /* Product slider mobile fixes */
    .main-slider {
        height: 300px !important;
    }
    
    .modern-slider-container {
        margin: 0 -15px;
    }
    
    /* Thumbnail navigation mobile */
    .thumbnail-item {
        width: 45px !important;
        height: 45px !important;
    }
    
    .thumbnail-nav {
        padding: 8px !important;
        gap: 4px !important;
    }
    
    /* Product data responsive */
    .impl_fea_car_data {
        padding: 20px 30px !important;
        min-height: auto !important;
    }
    
    .impl_fea_car_data h2 {
        font-size: 18px !important;
        line-height: 24px !important;
    }
    
    /* Homepage specific mobile fixes */
    .homepage-product-img {
        height: 200px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Very small screens (320px and down) */
@media (max-width: 320px) {
    .impl_fea_car_img {
        height: 180px !important;
    }
    
    .impl_fea_car_img img {
        height: 180px !important;
    }
    
    .main-slider {
        height: 250px !important;
    }
    
    .impl_fea_car_data {
        padding: 15px 20px !important;
    }
}

/* Container responsive fixes */
@media (max-width: 1200px) {
    .container {
        max-width: 100% !important;
        padding: 0 15px;
    }
}

/* Bootstrap column fixes for better responsiveness */
@media (max-width: 768px) {
    .col-lg-4, .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 480px) {
    .col-lg-4, .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}