/* Share intrinsic content heights within each product row; keep list views and sliders unchanged. */
@supports (grid-template-rows: subgrid) {
    .products-grid > ul:has(> li > .gub-product-card-grid) {
        --gub-card-row-gap: 10px;
        row-gap: 0;
        align-items: stretch;
    }
    .products-grid > ul > li:has(> .gub-product-card-grid) {
        display: grid;
        grid-row: span 8;
        grid-template-rows: subgrid;
        min-width: 0;
        margin-bottom: var(--gub-card-row-gap);
    }
    .products-grid > ul > li > .gub-product-card-grid {
        display: grid;
        grid-row: 1 / span 8;
        grid-template-rows: subgrid;
        row-gap: 0;
        min-width: 0;
        height: auto;
    }
    .products-grid > ul > li > .gub-product-card-grid > .gub-card-info,
    .products-grid > ul > li > .gub-product-card-grid .gub-card-summary,
    .products-grid > ul > li > .gub-product-card-grid .gub-card-commerce {
        display: contents;
    }
    .products-grid > ul > li > .gub-product-card-grid .gub-card-image { grid-row: 1; width: 100%; align-self: start; }
    .products-grid > ul > li > .gub-product-card-grid .gub-card-image picture { width: 100%; aspect-ratio: 1; }
    .products-grid > ul > li > .gub-product-card-grid .gub-card-image img { width: 100%; height: 100%; object-fit: contain; }
    .products-grid > ul > li > .gub-product-card-grid .gub-card-heading { grid-row: 2; min-width: 0; }
    .products-grid > ul > li > .gub-product-card-grid .gub-card-description { grid-row: 3; min-width: 0; }
    .products-grid > ul > li > .gub-product-card-grid .gub-card-options { grid-row: 4; min-width: 0; }
    .products-grid > ul > li > .gub-product-card-grid .gub-card-sku { grid-row: 5; min-width: 0; overflow-wrap: anywhere; }
    .products-grid > ul > li > .gub-product-card-grid .gub-card-price { grid-row: 6; margin-top: 1.25rem; margin-bottom: 0; align-self: end; }
    .products-grid > ul > li > .gub-product-card-grid .gub-card-delivery { grid-row: 7; min-width: 0; }
    .products-grid > ul > li > .gub-product-card-grid .gub-card-actions { grid-row: 8; align-self: end; margin-top: 1rem; }
    @media (min-width: 1024px) {
        .products-grid > ul:has(> li > .gub-product-card-grid) { --gub-card-row-gap: 30px; }
    }
}