/* load-more — @tokens: --load-more-gap */
/* ─── Load more ───────────────────────────────────────────────────────
   A centered "Load more" trigger + a count line. The button is a composed
   `.hzo-btn` and reuses the existing `.hzo-btn.is-loading` spinner — this
   file styles ONLY the wrapper + count and never touches `.hzo-btn` (its
   focus ring + disabled state are carried by the button component). The
   actual result-append is app-level; the JS just toggles the loading state
   and emits the integration event. */
.hzo-load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--load-more-gap, var(--space-sm));
    margin-top: var(--space-lg);
    text-align: center;
}

.hzo-load-more__count {
    font-size: var(--fs-75);
    color: var(--text-muted);
    margin: 0;
}