/* ============================================================================
 * loadmore-guard.css
 * Infinite-scroll ("load more") loader stabiliser for SFCC campaign/category
 * pages (Samsonite / American Tourister storefronts).
 *
 * Pairs with loadmore-guard.js. Upload both to the site library static files
 * and reference them from the campaign content asset, e.g.:
 *   <link rel="stylesheet" href="css/content/loadmore-guard.css?$staticlink$" />
 *
 * WHAT IT FIXES
 * The loader (.scroll-loading-amimation) is ~100px tall and in document flow.
 * The campaign infinite-scroll handler shows/hides it on every scroll event near
 * the bottom. That caused two issues:
 *   1) toggling its height re-clamped the scroll position at the very bottom, so
 *      the page glitched up and down;
 *   2) the show/hide itself made the spinner flicker.
 * While more products remain (an .infinite-scroll-loading marker exists) we pin
 * the loader to a steady, always-visible 100px box, so the handler's per-scroll
 * toggling can no longer change it. Once the category is fully loaded there is no
 * marker, the rule stops matching, and the loader collapses away (no leftover gap).
 *
 * Note: uses :has() (supported in all current browsers). On a browser without
 * :has() support the page simply degrades to the prior behaviour (no error).
 * ========================================================================== */

.grid-footer:has(.infinite-scroll-loading) .scroll-loading-amimation,
.grid-footer:has(.infinite-scroll-loading) .scroll-loading-amimation.d-none {
    display: block !important;
    visibility: visible !important;
    min-height: 100px;
}