/**
 * Product Listing Grid Block Styles
 * 
 * @package IMS_by_Soul_Country
 */

/* Editor preview styles */
.ims-product-listing-grid-editor .ims-product-preview-container {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ims-product-listing-grid-editor .ims-product-preview-container > div {
    border-bottom: none;
}

.ims-product-listing-grid-editor .ims-product-preview-container > div:first-child {
    border-radius: 8px 8px 0 0;
}

.ims-product-listing-grid-editor .ims-product-preview-container > div:last-child {
    border-radius: 0 0 8px 8px;
    border-bottom: 1px solid var(--color-border);
}

/* Grid layout styles */
.ims-products-grid {
    display: grid;
    gap: 1.5rem;
}

.ims-products-grid.ims-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.ims-products-grid.ims-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.ims-products-grid.ims-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

.ims-products-grid.ims-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

.ims-products-grid.ims-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

.ims-products-grid .ims-product-card {
    flex-direction: column;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.ims-products-grid .ims-product-image {
    width: 100%;
    height: 200px;
    margin-bottom: 1rem;
}

.ims-products-grid .ims-product-actions {
    align-items: flex-start;
    width: 100%;
}

.ims-products-grid .ims-price-section {
    text-align: left;
}

.ims-products-grid .ims-cart-section {
    align-items: flex-start;
    width: 100%;
}

.ims-products-grid .ims-quantity-row {
    justify-content: flex-start;
}

.ims-products-grid .ims-add-to-cart {
    width: 100%;
}

@media (max-width: 1024px) {
    .ims-products-grid.ims-columns-4,
    .ims-products-grid.ims-columns-5,
    .ims-products-grid.ims-columns-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .ims-products-grid.ims-columns-2,
    .ims-products-grid.ims-columns-3,
    .ims-products-grid.ims-columns-4,
    .ims-products-grid.ims-columns-5,
    .ims-products-grid.ims-columns-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ims-products-grid {
        grid-template-columns: 1fr !important;
    }
}