/**
 * Agni Product Builder Frontend Styles
 * These styles are applied to the shop page when a product layout is active
 */

/* Base styles for product layout on shop page */
.has-product-layout .products {
    display: grid;
    gap: var(--product-layout-gap, 20px);
}

/* Product layout container */
.has-product-layout .product {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease;
}

/* Product image container */
.has-product-layout .product-layout-image {
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}

/* Product title */
.has-product-layout .woocommerce-loop-product__title {
    font-size: var(--product-layout-title-font-size, 16px);
    margin-bottom: 8px;
}

/* Product price */
.has-product-layout .price {
    font-size: var(--product-layout-price-font-size, 14px);
    margin-bottom: 10px;
}

/* Add to cart button */
.has-product-layout .add_to_cart_button {
    margin-top: auto;
    transition: all 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .has-product-layout .products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .has-product-layout .products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .has-product-layout .products {
        grid-template-columns: repeat(1, 1fr);
    }
}