/* Product image container with 1:2 aspect ratio */
.product-image-container {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.4;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    background: #fafafa; /* Fallback background */
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 1 / 2) {
    .product-image-container {
        position: relative;
        height: 0;
        padding-bottom: 200%; /* 1:2 = 200% */
    }
}

/* Images inside container */
.product-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.3s ease;

    display: block;
    vertical-align: middle;
}

.product-image-container img:first-child {
    transform: scale(0.8);
}



ul.products {
    justify-content: center; /* Center items on smaller screens */
    gap: 20px;
}

ul.products li.product {
    width: 100%; /* Adjust for gap */
    list-style: none;
}

ul.products li.product .price {
    display:block;
}

@media(min-width: 768px) {
    ul.products {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start; /* Distribute space between items */
    }

    ul.products li.product {
        width: calc((100% / 3) - 20px); /* Adjust for gap */
        margin-bottom: 30px; /* Add space between rows */
    }
}


/* 1. Set the container to relative so we can stack images */
.woocommerce-loop-product__link {
    position: relative;
    display: block;
    overflow: hidden;
}

/* 2. Style the hover image to sit directly on top of the main image */
.secondary-hover-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.4s ease-in-out; /* Smooth fade effect */
    z-index: 2;
}

/* 3. The Hover Trigger */
.woocommerce-loop-product__link:hover .secondary-hover-image {
    opacity: 1;
}

.products-grid-normal a {
    text-decoration: none;
}

.explore-products-cta-row {
    text-align:center;
    margin-top: 3rem;
}

.explore-products-cta {
    font-weight: bold;
    padding: 0.8rem 1.8rem;
    text-decoration: none !important;
}

.products-grid-reversed {
    margin: 4rem auto !important;
}

ul.products {
    justify-content: center; /* Center items on smaller screens */
}

ul.products li.product {
    width: 100%; /* Adjust for gap */
}

@media(min-width: 768px) {
    ul.products {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start; /* Distribute space between items */
    }

    ul.products li.product {
        width: calc((100% / 3) - 20px); /* Adjust for gap */
        margin-bottom: 30px; /* Add space between rows */
    }
}

.products-grid-normal .woocommerce-Price-amount,
.products-grid-normal .woocommerce-Price-amount span,
.products-grid-normal .woocommerce-Price-currencySymbol {
    color: var(--toddle-green);
    font-size: 1.15rem;
    font-weight: 600;
}

h2.woocommerce-loop-product__title {
    color: var(--toddle-slate) !important;
    font-size: 1rem !important;
    margin-top: 1rem;
}