/* Virtual scrolling for the product grid.
 *
 * `content-visibility: auto` + `contain-intrinsic-size` are the browser's
 * native windowing primitive: off-screen cards are not laid out, painted or
 * parsed, so a 329-product page scrolls and jumps like a 20-product page.
 * The intrinsic-size hint prevents scrollbar jitter while the browser sizes
 * the not-yet-rendered region.
 */
.product-grid > div {
    content-visibility: auto;
    contain-intrinsic-size: auto 350px;
    break-inside: avoid;
}

/* The wishlist heart and add-to-cart are the only interactive parts that
 * live inside a possibly-skipped region; keep them focusable/clickable once
 * the browser decides to render their card. */
.product-grid > div:focus-within {
    contain-intrinsic-size: auto 490px;
}

@media (prefers-reduced-motion: reduce) {
    .product-grid > div {
        content-visibility: visible;
    }
}