/*
 * TABLET GRID LAYOUT FIX
 * Unified 3-column layout for tablets (768px-1199px)
 *
 * Solution: With vertical sidebar stacking, full width allows consistent 3-column grid
 */

/* TABLET LAYOUT: Unified 3-column for all tablets (768-1199px) */
@media (min-width: 768px) and (max-width: 1199.98px) {

    /* PURE FLEXBOX CONTAINER */
  .product-grid .item-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    overflow: hidden !important;
    justify-content: center;
  }

    /* 3-COLUMN LAYOUT: Consistent across all tablet sizes */
    .product-grid .item-grid .item-box.col-md-4 {
        flex: 0 0 33.333333% !important;
        width: 33.333333% !important;
        max-width: 33.333333% !important;

        padding: 12px !important;
        margin-bottom: 25px !important;

        float: none !important;
        clear: none !important;
        box-sizing: border-box !important;
    }

    /* Clear every 3rd item for 3-column layout */
    .product-grid .item-grid .item-box.col-md-4:nth-child(3n+1) {
        clear: left !important;
    }

    /* Thumbnail sizing for 3-column */
    .product-grid .item-grid .item-box.col-md-4 .thumbnail {
        min-height: 420px;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    /* Images for 3-column layout */
    .product-grid .item-grid .item-box.col-md-4 .picture {
        width: 100%;
        max-width: 220px;
        height: auto;
        margin: 0 auto;
    }

    .product-grid .item-grid .item-box.col-md-4 .picture img {
        width: 100%;
        max-width: 220px;
        height: auto;
        object-fit: contain;
    }
}

/* Fallback for older browsers that don't support flexbox */
@supports not (display: flex) {
    @media (min-width: 768px) and (max-width: 1199.98px) {
        .product-grid .item-grid {
            display: block !important;
        }

        .product-grid .item-grid .item-box.col-md-4 {
            float: left !important;
        }

        /* Enhanced clearfix for float-based layout */
        .product-grid .item-grid .item-box.col-md-4:nth-child(3n+1) {
            clear: left !important;
        }

        .product-grid .item-grid::after {
            content: "";
            display: table;
            clear: both;
        }
    }
}

/* DESKTOP GRID FIX: Force 3-column layout for screens 1200px+ */
@media (min-width: 1200px) {
    /* Force flexbox container */
  .product-grid .item-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    justify-content: center;
  }

    /* Force all items to display and take exact 33.33% width */
    .product-grid .item-grid .item-box.col-md-4 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 33.333333% !important;
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-bottom: 30px !important;
        float: none !important;
        clear: none !important;
    }
}