/* WooCommerce Product Card */
ul.products li.product {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 90%;
    margin: 10px;
    margin-left: 10px;
    list-style: none;
    transition: all 0.3s ease;
}

/* Hover effect */
ul.products li.product:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(1,107,97,0.2);
}

/* Product Image - full width, top cover */
ul.products li.product .woocommerce-loop-product__link img {
    width: 100%;
    height: 200px; /* fixed height for uniformity */
    object-fit: cover;
    display: block;
    margin: 0;
}

/* Content container */
ul.products li.product .woocommerce-loop-product__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    text-align: center;
    flex-grow: 1;
}

/* Product title */
ul.products li.product .woocommerce-loop-product__title {
    font-size: 18px;
    font-weight: 700;
    color: #016b61;
    margin: 5px 0 5px 0; /* minimal spacing */
}

/* Price */
ul.products li.product .price {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px; /* tighter spacing */
}

/* Add to Cart Button */
ul.products li.product .button {
    background: #016b61;
    color: #fff !important;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    text-transform: uppercase;
    font-weight: 600;
    transition: background 0.3s ease;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
}

ul.products li.product .button:hover {
    background: #014f48;
}

/* View Cart Link Styling */
ul.products li.product .added_to_cart {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px 20px;
    background: #f0f0f0;
    color: #016b61 !important;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease, color 0.3s ease;
}

ul.products li.product .added_to_cart:hover {
    background: #016b61;
    color: #fff !important;
}


/* Large screens (1024px) - 3 cards per row */
@media (max-width: 1024px) {
    ul.products li.product {
        width: calc(33.33% - 20px); /* 3 cards per row */
    }

    ul.products li.product .woocommerce-loop-product__link img {
        height: 180px;
    }
}

/* Medium screens (768px) - 2 cards per row */
@media (max-width: 768px) {
    ul.products li.product {
        width: calc(50% - 15px); /* 2 cards per row */
    }

    ul.products li.product .woocommerce-loop-product__link img {
        height: 150px;
    }

    ul.products li.product .woocommerce-loop-product__title {
        font-size: 16px;
    }

    ul.products li.product .price {
        font-size: 14px;
    }

    ul.products li.product .button,
    ul.products li.product .added_to_cart {
        padding: 10px 15px;
        font-size: 14px;
    }
}

/* Small screens (480px) - 1 card per row */
@media (max-width: 480px) {
    ul.products {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; /* center the cards */
        gap: 10px; /* space between cards */
        padding: 0; /* remove default padding if any */
        margin: 0 auto; /* center the container */
    }

    ul.products li.product {
        flex: 1 1 calc(50% - 10px); /* 2 cards per row */
        min-width: 140px; /* prevent cards from shrinking too much */
        max-width: calc(50% - 10px);
        margin: 0; /* spacing handled by gap */
    }

    ul.products li.product .woocommerce-loop-product__link {
        padding: 10px; /* inner padding for the card */
    }
}