/* public/css/styles.css */

/* Category Icons */
.category-icon img {
    width: 60px; /* Adjust as needed */
    height: 60px;
    object-fit: cover; /* Ensure images fill the circle */
}


.product-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
/* Product Listing */
.product {
    /* Removed height constraints.  Let content determine height. */
    display: flex; /* Use flexbox for layout */
    width: 100%;
   /* No need for aspect-ratio now that we're using flexbox */

}
.product img {
    width: 100%;
    height: auto; /* Let the height adjust proportionally */
    object-fit: cover;
}

/* Mobile-First Responsive Adjustments */
@media (max-width: 600px) { /* Adjust breakpoint as needed */
    .product-container{
        flex: 45% 0 0;
    }
  .product {
        flex-direction: column; /* Stack image and content vertically on small screens */
  }
    /*  */
}