/* product_card.css */

.product-card .card-body {
    background-color: white;
    padding: 1rem;
    border-radius: 0 0 5px 5px; /* Slight rounding on bottom edges */
}
/* Make sure button text is always white */
.product-card .card-body .btn.btn-detail {
    background-color: #101212 !important;
    border-color: #202223 !important;
    color: #fff !important;
}

/* Make sure button text is always white */
.product-card .card-body .btn.btn-detail:hover {
    background-color: #aaa83b !important;
    border-color: #aaa83b !important;
    color: #202223 !important;
}

/* =========================================
   Responsive Product Grid
========================================= */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    width: 100%;
}
/* Mobile: 1 per row */
@media (max-width: 767px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

/* Tablet: 2 per row */
@media (min-width: 768px) and (max-width: 1199px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Laptop / Small Desktop: ALWAYS 3 per row */
@media (min-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large Desktop: 4 per row */
@media (min-width: 1600px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
.product-card img {
    width: 100%;
    aspect-ratio: 3 / 4;   /* Keeps proportions */
    object-fit: contain;
    background: #fff;
    padding: 1.5rem;
}

.product-item {
    min-width: 0;
}