/* 
 * Homepage Product Section Fixes
 * Target only homepage products (homepage-products-2 class)
 * Use !important to override Shoptet defaults
 */

/* Fix image scaling - make images fill their containers properly */
.homepage-products-2 .product .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Set fixed aspect ratio for image containers */
.homepage-products-2 .product .image {
    display: block !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 75% !important; /* 4:3 aspect ratio */
    position: relative !important;
}

/* Position images absolutely within their containers */
.homepage-products-2 .product .image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Limit maximum width of product cards */
.homepage-products-2 .product {
    max-width: 450px !important;
}

/* Center products when they hit max width */
.homepage-products-2 .products-block {
    justify-content: center !important;
}

/* Responsive adjustments */
@media (min-width: 1400px) {
    /* On very large screens, keep product cards from getting too wide */
    .homepage-products-2 .product {
        max-width: 400px !important;
    }
}

@media (max-width: 768px) {
    /* On mobile, allow full width but maintain aspect ratio */
    .homepage-products-2 .product {
        max-width: 100% !important;
    }
    
    /* Adjust padding for better mobile display */
    .homepage-products-2 .product .image {
        padding-bottom: 70% !important;
    }
}

/* Fix flags/badges overlay positioning */
.homepage-products-2 .bottom-overlay-strip {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2 !important;
}