/* Catalog infinite scroll (replaces Magetop_InfiniteScroll). Scoped to body.mb-infinite. */

/* the native bottom pager is redundant once JS scroll is active — hide it,
   but keep the bottom "Items X-Y of Z" amount + the top toolbar intact.
   (No-JS / crawlers never get body.mb-infinite, so the real pager stays.) */
body.mb-infinite .products.wrapper ~ .toolbar-products .pages { display: none; }

.mb-inf-status { min-height: 1px; margin: 8px 0 4px; text-align: center; }

.mb-inf-loading {
    display: inline-flex; align-items: center; gap: 10px;
    font: 600 13px/1 Manrope, sans-serif; color: #67707a; padding: 18px 0;
}
.mb-inf-spin {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #e6e0d5; border-top-color: #ef7622;
    animation: mbInfSpin .7s linear infinite;
}
@keyframes mbInfSpin { to { transform: rotate(360deg); } }

.mb-inf-end {
    font: 700 12.5px Manrope, sans-serif; letter-spacing: .04em; text-transform: uppercase;
    color: #a7aeb5; padding: 26px 0 10px; text-align: center;
}

.mb-inf-retry {
    display: inline-block; margin: 16px auto; padding: 11px 22px;
    background: #16202b; color: #fff; border-radius: 30px;
    font: 800 13px Manrope, sans-serif; text-decoration: none; cursor: pointer;
}
.mb-inf-retry:hover { filter: brightness(1.15); color: #fff; text-decoration: none; }

.mb-inf-sentinel { height: 1px; width: 100%; }

/* fade-in for appended items */
body.mb-infinite .product-items > .product-item.mb-inf-new {
    animation: mbInfRise .45s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes mbInfRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }