/**
 * Kush Art Gallery - Final Masonry CSS
 */

/* Force container to block mode so Masonry can control coordinates */
ul.products {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

/* Show container when JS is ready */
ul.products.masonry-ready {
    opacity: 1;
}

/* Sizer and Product Item Widths */
ul.products .grid-sizer,
ul.products li.product {
    width: 25% !important; /* 4 Columns */
}

/* KILL theme clears and floats that cause gaps */
ul.products li.product {
    display: block !important;
    float: left !important;
    clear: none !important; /* This is the fix for your second-row gap */
    margin: 0 !important;
    padding: 12px;         /* The space between paintings */
    box-sizing: border-box !important;
    position: absolute;    /* Masonry will handle the actual top/left values */
}

/* Ensure images fill the 'brick' correctly */
ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin-bottom: 10px;
}

/* Responsive: 3 Columns */
@media (max-width: 1100px) {
    ul.products .grid-sizer,
    ul.products li.product {
        width: 33.333% !important;
    }
}

/* Responsive: 2 Columns */
@media (max-width: 768px) {
    ul.products .grid-sizer,
    ul.products li.product {
        width: 50% !important;
        padding: 8px;
    }
}

/* Responsive: 1 Column (Mobile) */
@media (max-width: 480px) {
    ul.products {
        opacity: 1 !important; /* Force show on mobile */
    }
    ul.products li.product {
        width: 100% !important;
        position: static !important; /* Return to normal flow for mobile speed */
        float: none !important;
        padding: 15px 0;
    }
    ul.products .grid-sizer {
        display: none !important;
    }
}