/**
 * WooCommerce Default Style Overrides
 * These rules forcefully override WooCommerce's default product grid styles
 *
 * @package Flaman_Storefront
 */

/* Force full width on all product grid elements */
.woocommerce ul.products,
ul.products.columns-3,
.woocommerce .products,
.woocommerce-page .products {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: var(--spacing-lg) !important;
    list-style: none !important;
}

/* Remove WooCommerce ::before pseudo-element that creates blank grid spots */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after,
.woocommerce .products::before,
.woocommerce .products::after {
    display: none !important;
    content: none !important;
}

/* Hide any non-list-item children (prevents blank grid spots) */
.woocommerce ul.products > *:not(li),
ul.products > *:not(li),
.woocommerce .products > *:not(li) {
    display: none !important;
}

/* Hide empty product items */
.woocommerce ul.products li.product:empty,
ul.products li.product:empty {
    display: none !important;
}

/* Force product items to fill grid cells (skip scrollable rows — they use flex) */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products:not(.scrollable-row) li.product {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
}

/* List view override - single column */
.woocommerce ul.products.list-view,
ul.products.list-view,
.products-wrapper[data-view="list"] .products,
.woocommerce .products-wrapper[data-view="list"] .products {
    grid-template-columns: 1fr !important;
}

/* List view product cards - horizontal layout */
.products.list-view .product-card-inner,
.products-wrapper[data-view="list"] .product-card-inner,
.woocommerce ul.products.list-view li.product .product-card-inner {
    flex-direction: row !important;
    width: 100% !important;
}

/* List view images - fixed width on left, fill card height */
.products.list-view .product-card-image,
.products-wrapper[data-view="list"] .product-card-image,
.woocommerce ul.products.list-view li.product .product-card-image {
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
    flex-shrink: 0 !important;
    align-self: stretch;
    overflow: hidden;
}

.products.list-view .product-card-image img:not(.badge-canadian),
.products-wrapper[data-view="list"] .product-card-image img:not(.badge-canadian) {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    border-radius: 0 !important;
}

.products.list-view .product-card-image a,
.products-wrapper[data-view="list"] .product-card-image a {
    height: 100%;
}

/* List view info - fill remaining space */
.products.list-view .product-card-info,
.products-wrapper[data-view="list"] .product-card-info,
.woocommerce ul.products.list-view li.product .product-card-info {
    flex-grow: 1 !important;
    flex-basis: 0 !important;
    width: 100% !important;
}

/* Ensure product card fills the list item */
.woocommerce ul.products li.product .product-card,
ul.products li.product .product-card {
    width: 100% !important;
    height: 100% !important;
}

/* Remove any floating or inline-block that WooCommerce adds */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    clear: none !important;
}

/* Override WooCommerce columns classes */
.woocommerce .products.columns-1,
.woocommerce .products.columns-2,
.woocommerce .products.columns-3,
.woocommerce .products.columns-4,
.woocommerce .products.columns-5,
.woocommerce .products.columns-6 {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Tablet view */
@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce .products,
    .woocommerce .products.columns-1,
    .woocommerce .products.columns-2,
    .woocommerce .products.columns-3,
    .woocommerce .products.columns-4,
    .woocommerce .products.columns-5,
    .woocommerce .products.columns-6 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile view */
@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce .products,
    .woocommerce .products.columns-1,
    .woocommerce .products.columns-2,
    .woocommerce .products.columns-3,
    .woocommerce .products.columns-4,
    .woocommerce .products.columns-5,
    .woocommerce .products.columns-6 {
        grid-template-columns: 1fr !important;
    }
}

/* Mobile - List view becomes vertical */
@media (max-width: 768px) {
    .products.list-view .product-card-inner,
    .products-wrapper[data-view="list"] .product-card-inner,
    .woocommerce ul.products.list-view li.product .product-card-inner {
        flex-direction: column !important;
    }

    .products.list-view .product-card-image,
    .products-wrapper[data-view="list"] .product-card-image,
    .woocommerce ul.products.list-view li.product .product-card-image {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
    }
}