/* ============================================================
   ANS DHIVYAM
   PRODUCT ARCHIVE GRID
   ============================================================

   DESKTOP  : 5 PRODUCTS PER ROW
   TABLET   : 3 PRODUCTS PER ROW
   MOBILE   : 2 PRODUCTS PER ROW

   SIDEBAR  : HIDDEN
   CARD     : EQUAL CONTENT HEIGHT
   HOVER    : KEEP EXISTING THEME HOVER
   ALIGNMENT: KEEP EXISTING THEME ALIGNMENT

   HTML / BLADE / PHP / JS : NO CHANGES
   ============================================================ */


/* ============================================================
   1. SHOP CONTAINER - FULL WIDTH
   ============================================================ */

.sidebar.shop-layout-full .container {
    width: 100% !important;
    max-width: 100% !important;
}

.sidebar.shop-layout-full .main-archive-product {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* ============================================================
   2. HIDE LEFT SIDEBAR
   ============================================================ */

.main-archive-product > .bwp-sidebar.sidebar-product {
    display: none !important;
}


/* ============================================================
   3. PRODUCT MAIN AREA - FULL WIDTH
   ============================================================ */

.main-archive-product
> .col-xl-9.col-lg-9.col-md-12.col-12 {

    width: 100% !important;
    max-width: 100% !important;

    flex: 0 0 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* ============================================================
   4. PRODUCT CONTENT AREA
   ============================================================ */

.main-archive-product .content-products-list {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   5. PRODUCT GRID
   ============================================================ */

.main-archive-product
.content-products-list
ul.products-list.grid {

    display: flex !important;
    flex-wrap: wrap !important;

    align-items: flex-start !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;

    box-sizing: border-box !important;
}


/* ============================================================
   6. REMOVE DEFAULT CLEAR
   ============================================================ */

.main-archive-product
.content-products-list
ul.products-list.grid::before,

.main-archive-product
.content-products-list
ul.products-list.grid::after {

    display: none !important;
    content: none !important;
}


/* ============================================================
   7. PRODUCT COLUMN BASE
   ============================================================ */

.main-archive-product
.content-products-list
ul.products-list.grid > li {

    position: relative !important;

    display: block !important;

    align-self: flex-start !important;

    height: auto !important;

    margin-top: 0 !important;

    box-sizing: border-box !important;
}


/* ============================================================
   8. DESKTOP
   1200px AND ABOVE

   5 PRODUCTS PER ROW
   ============================================================ */

@media (min-width: 1200px) {

    .main-archive-product
    .content-products-list
    ul.products-list.grid > li {

        width: 20% !important;
        max-width: 20% !important;

        flex: 0 0 20% !important;

        padding-left: 8px !important;
        padding-right: 8px !important;
    }


    /* Bootstrap column override */

    .main-archive-product
    .content-products-list
    ul.products-list.grid > li.col-lg-4,
    .main-archive-product
    .content-products-list
    ul.products-list.grid > li.col-md-4,
    .main-archive-product
    .content-products-list
    ul.products-list.grid > li.col-sm-6,
    .main-archive-product
    .content-products-list
    ul.products-list.grid > li.col-6 {

        width: 20% !important;
        max-width: 20% !important;

        flex: 0 0 20% !important;
    }
}


/* ============================================================
   9. TABLET
   768px - 1199px

   3 PRODUCTS PER ROW
   ============================================================ */

@media (min-width: 768px) and (max-width: 1199px) {

    .main-archive-product
    .content-products-list
    ul.products-list.grid > li {

        width: 33.333333% !important;
        max-width: 33.333333% !important;

        flex: 0 0 33.333333% !important;

        padding-left: 7px !important;
        padding-right: 7px !important;
    }


    /* Bootstrap column override */

    .main-archive-product
    .content-products-list
    ul.products-list.grid > li.col-lg-4,
    .main-archive-product
    .content-products-list
    ul.products-list.grid > li.col-md-4,
    .main-archive-product
    .content-products-list
    ul.products-list.grid > li.col-sm-6,
    .main-archive-product
    .content-products-list
    ul.products-list.grid > li.col-6 {

        width: 33.333333% !important;
        max-width: 33.333333% !important;

        flex: 0 0 33.333333% !important;
    }
}


/* ============================================================
   10. MOBILE
   BELOW 768px

   2 PRODUCTS PER ROW
   ============================================================ */

@media (max-width: 767px) {

    .main-archive-product
    > .col-xl-9.col-lg-9.col-md-12.col-12 {

        width: 100% !important;
        max-width: 100% !important;

        flex: 0 0 100% !important;

        padding-left: 5px !important;
        padding-right: 5px !important;
    }


    .main-archive-product
    .content-products-list
    ul.products-list.grid > li {

        width: 50% !important;
        max-width: 50% !important;

        flex: 0 0 50% !important;

        padding-left: 4px !important;
        padding-right: 4px !important;
    }


    /* Bootstrap column override */

    .main-archive-product
    .content-products-list
    ul.products-list.grid > li.col-lg-4,
    .main-archive-product
    .content-products-list
    ul.products-list.grid > li.col-md-4,
    .main-archive-product
    .content-products-list
    ul.products-list.grid > li.col-sm-6,
    .main-archive-product
    .content-products-list
    ul.products-list.grid > li.col-6 {

        width: 50% !important;
        max-width: 50% !important;

        flex: 0 0 50% !important;
    }
}


/* ============================================================
   11. SMALL MOBILE
   BELOW 480px

   STILL 2 PRODUCTS
   ============================================================ */

@media (max-width: 480px) {

    .main-archive-product
    .content-products-list
    ul.products-list.grid > li {

        width: 50% !important;
        max-width: 50% !important;

        flex: 0 0 50% !important;

        padding-left: 3px !important;
        padding-right: 3px !important;
    }
}


/* ============================================================
   12. EQUAL IMAGE AREA
   ============================================================

   Only makes the image box equal.

   DOES NOT change:
   - hover
   - transition
   - image swap
   - buttons
   - wishlist
   - quick view
   - alignment
   ============================================================ */

.main-archive-product
.products-entry
.products-thumb {

    aspect-ratio: 1 / 1 !important;

    overflow: hidden !important;
}


/* ============================================================
   13. EQUAL TITLE AREA
   ============================================================

   Only reserves the same title space.

   DOES NOT set text-align.
   ============================================================ */

.main-archive-product
.products-entry
.product-title {

    min-height: 40px !important;
    max-height: 40px !important;

    overflow: hidden !important;
}


/* ============================================================
   14. MOBILE TITLE HEIGHT
   ============================================================ */

@media (max-width: 767px) {

    .main-archive-product
    .products-entry
    .product-title {

        min-height: 34px !important;
        max-height: 34px !important;
    }
}


/* ============================================================
   15. SMALL MOBILE TITLE HEIGHT
   ============================================================ */

@media (max-width: 480px) {

    .main-archive-product
    .products-entry
    .product-title {

        min-height: 32px !important;
        max-height: 32px !important;
    }
}


/* ============================================================
   16. DO NOT STRETCH CARDS
   ============================================================ */

.main-archive-product
.content-products-list
ul.products-list.grid > li {

    align-self: flex-start !important;
}

.main-archive-product
.content-products-list
ul.products-list.grid > li
.products-entry.product-wapper {

    height: auto !important;
}


/* ============================================================
   17. DO NOT CHANGE EXISTING PRODUCT CONTENT ALIGNMENT
   ============================================================ */

/*
   IMPORTANT:
   No text-align rule here.
   Your existing theme alignment remains unchanged.
*/


/* ============================================================
   18. DO NOT CHANGE EXISTING HOVER
   ============================================================ */

/*
   IMPORTANT:
   No transform.
   No transition.
   No opacity.
   No hover styling.
   Your existing theme hover remains unchanged.
*/


/* ============================================================
   END
   ============================================================ */