/*
 * Art Masonry v4.0.0 — specific to the real Artista/PrestaShop category markup.
 * The module leaves product-card typography, pricing, flags and actions to the theme.
 */

body#category #js-product-list .wb-product-grid.ps-artmasonry-grid,
body.page-category #js-product-list .wb-product-grid.ps-artmasonry-grid {
    position: relative !important;
    display: block !important;
    flex: none !important;
    flex-wrap: initial !important;
    align-items: initial !important;
    height: 0;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

/* Bootstrap .row clearfix pseudo-elements must not add height to the grid. */
body#category #js-product-list .wb-product-grid.ps-artmasonry-grid::before,
body#category #js-product-list .wb-product-grid.ps-artmasonry-grid::after,
body.page-category #js-product-list .wb-product-grid.ps-artmasonry-grid::before,
body.page-category #js-product-list .wb-product-grid.ps-artmasonry-grid::after {
    content: none !important;
    display: none !important;
}

/* Direct children of the real grid: .item-product.col-... */
body#category #js-product-list .wb-product-grid.ps-artmasonry-grid > .item-product,
body.page-category #js-product-list .wb-product-grid.ps-artmasonry-grid > .item-product {
    position: absolute !important;
    float: none !important;
    clear: none !important;
    display: block !important;
    flex: none !important;
    width: 33.333333% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 10px 25px !important;
    box-sizing: border-box !important;
    left: 0;
    top: 0;
}

/* Artista nests an article.product-miniature inside every outer column. */
body#category #js-product-list .wb-product-grid.ps-artmasonry-grid > .item-product > article.product-miniature,
body.page-category #js-product-list .wb-product-grid.ps-artmasonry-grid > .item-product > article.product-miniature {
    display: block !important;
    position: relative !important;
    float: none !important;
    clear: none !important;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Let images keep their individual proportions; do not force a square crop. */
body#category #js-product-list .wb-product-grid.ps-artmasonry-grid .thumbnail-container,
body#category #js-product-list .wb-product-grid.ps-artmasonry-grid .thumbrel,
body#category #js-product-list .wb-product-grid.ps-artmasonry-grid .wb-image-block,
body#category #js-product-list .wb-product-grid.ps-artmasonry-grid a.product-thumbnail,
body.page-category #js-product-list .wb-product-grid.ps-artmasonry-grid .thumbnail-container,
body.page-category #js-product-list .wb-product-grid.ps-artmasonry-grid .thumbrel,
body.page-category #js-product-list .wb-product-grid.ps-artmasonry-grid .wb-image-block,
body.page-category #js-product-list .wb-product-grid.ps-artmasonry-grid a.product-thumbnail {
    height: auto !important;
    min-height: 0 !important;
}

body#category #js-product-list .wb-product-grid.ps-artmasonry-grid .thumbnail-container,
body.page-category #js-product-list .wb-product-grid.ps-artmasonry-grid .thumbnail-container {
    overflow: visible !important;
}

body#category #js-product-list .wb-product-grid.ps-artmasonry-grid a.product-thumbnail,
body.page-category #js-product-list .wb-product-grid.ps-artmasonry-grid a.product-thumbnail {
    display: block !important;
}

body#category #js-product-list .wb-product-grid.ps-artmasonry-grid a.product-thumbnail img,
body.page-category #js-product-list .wb-product-grid.ps-artmasonry-grid a.product-thumbnail img {
    display: block;
    max-width: 100%;
    height: auto !important;
}

/* Keep pagination and list controls after the calculated grid height. */
body#category #js-product-list .pagination,
body#category #js-product-list-bottom,
body#category .product-list-bottom,
body.page-category #js-product-list .pagination,
body.page-category #js-product-list-bottom,
body.page-category .product-list-bottom {
    clear: both !important;
}

@media (max-width: 767px) {
    body#category #js-product-list .wb-product-grid.ps-artmasonry-grid > .item-product,
    body.page-category #js-product-list .wb-product-grid.ps-artmasonry-grid > .item-product {
        width: 50% !important;
    }
}