/**
 * HuePOS Product Listing Styles
 * Fixes column widths for Grid (4 cols) and List (2 cols) views
 */

/* =========================================
   GRID VIEW (.layout-grid)
   ========================================= */

/* Desktop: 4 Columns (25%) */
@media (min-width: 992px) {
    .products.layout-grid .product {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
        width: 25%;
    }
}

/* Tablet: 3 Columns (33.33%) */
@media (min-width: 768px) and (max-width: 991px) {
    .products.layout-grid .product {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        width: 33.333333%;
    }
}

/* Mobile: 2 Columns (50%) */
@media (max-width: 767px) {
    .products.layout-grid .product {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }
}

/* =========================================
   LIST VIEW (.layout-list)
   ========================================= */

/* Desktop: 2 Columns (50%) - Matches Reference */
@media (min-width: 768px) {
    .products.layout-list .product {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }
}

/* Mobile: 1 Column (100%) */
@media (max-width: 767px) {
    .products.layout-list .product {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
}

/* Reference Style Adjustments for List View */
.list-product-cat {
    margin-left: -7.5px;
    margin-right: -7.5px;
}

.layout-list .product-thumbnail {
    float: left;
    margin-bottom: 0;
    max-width: 140px;
    max-height: 140px;
    margin-right: 10px;
}

.layout-list .product .inner:after {
    content: "";
    display: table;
    clear: both;
}