/*
 * Mediband_Core — lazy-render blocks (Phase 1: CSS-only)
 * ------------------------------------------------------
 * Uses `content-visibility: auto` so browsers skip layout + paint for off-screen
 * blocks until the user scrolls near them. SEO-safe: HTML stays in the DOM and
 * is fully crawlable. Pair with `contain-intrinsic-size` to reserve space and
 * avoid CLS.
 *
 * Supported on Chrome 85+, Edge 85+, Safari 18+. Older browsers ignore both
 * properties (no regression — they just paint everything as before).
 */

/* Page footer — always below the fold, never in critical render path.
   Real rendered height on LOCAL: ~585px Mediband, ~617px Handband. */
.page-footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 620px;
}

/* PDP — related products carousel */
.block.related,
.products-grid.products-related {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
}

/* PDP — up-sell carousel */
.block.upsell,
.products-grid.products-upsell {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
}

/* Cart — cross-sell ("you may also like") */
.block.crosssell,
.products-grid.products-crosssell {
    content-visibility: auto;
    contain-intrinsic-size: auto 520px;
}

/* PDP — Stamped.io reviews widget (Phase 1 just defers paint; Phase 2 will defer the JS itself) */
.stamped-main-widget,
.stamped-product-reviews-badge {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* PDP — Magefan blog widget (recent posts mentioning this product) */
.block.widget.blog-posts,
.magefan-blog-widget {
    content-visibility: auto;
    contain-intrinsic-size: auto 400px;
}

/* Mobile menu footer slot (the "mm-mobile__footer" carousel) — only present in
   the off-canvas drawer, never visible on initial render */
.mm-mobile__footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
}