/* Only the main catalog grid opts in; widgets and list mode keep their layout. */
.products-grid > .ca-catalog-grid {
    --ca-listing-default-columns: 2;
    --ca-listing-grid-gap: var(--ca-product-column-gap, 2%);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--ca-listing-grid-gap);
    row-gap: var(--ca-product-row-gap, 30px);
    width: 100%;
    margin-inline: 0;
    list-style: none;
}

.products-grid > .ca-catalog-grid--hyva {
    --ca-listing-grid-gap: var(--ca-product-column-gap, calc(var(--spacing, .25rem) * 4));
}

/* Replace Blank's percentage widths and nth-child margins only in this grid. */
.products-grid > .ca-catalog-grid > li {
    width: auto !important;
    min-width: 0;
    max-width: none;
    margin: 0 !important;
    padding: 0;
    float: none;
}

.products-grid > .ca-catalog-grid::before,
.products-grid > .ca-catalog-grid::after {
    display: none;
}

@media (min-width: 640px) {
    .products-grid > .ca-catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .products-grid > .ca-catalog-grid {
        --ca-listing-target-columns: var(--ca-listing-columns, var(--ca-listing-default-columns));
        /* auto-fill keeps incomplete rows aligned to the full grid, unlike auto-fit. */
        grid-template-columns: repeat(auto-fill, minmax(min(100%, max(
            var(--ca-listing-min-card-width, 180px),
            calc((100% - (var(--ca-listing-target-columns) - 1) * var(--ca-listing-grid-gap)) / var(--ca-listing-target-columns))
        )), 1fr));
    }

    .products-grid > .ca-catalog-grid--hyva {
        --ca-listing-grid-gap: var(--ca-product-column-gap, calc(var(--spacing, .25rem) * 6));
    }

    .page-layout-1column .products-grid > .ca-catalog-grid {
        --ca-listing-default-columns: 3;
    }
}

@media (min-width: 1024px) {
    .products-grid > .ca-catalog-grid {
        --ca-listing-default-columns: 3;
    }

    .products-grid > .ca-catalog-grid--hyva {
        --ca-listing-grid-gap: var(--ca-product-column-gap, calc(var(--spacing, .25rem) * 8));
    }

    .page-layout-1column .products-grid > .ca-catalog-grid {
        --ca-listing-default-columns: 4;
    }

    .page-layout-3columns .products-grid > .ca-catalog-grid--blank {
        --ca-listing-default-columns: 2;
    }
}

/* A cart cross-sell occupies the content column beside the summary even when
 * the page itself uses 1column. Resolve theme defaults in that local context. */
@media (min-width: 768px) {
    [data-ca-grid-layout="two_columns"] .products-grid > .ca-catalog-grid {
        --ca-listing-default-columns: 2;
    }
}

@media (min-width: 1024px) {
    [data-ca-grid-layout="two_columns"] .products-grid > .ca-catalog-grid {
        --ca-listing-default-columns: 3;
    }
}