/* ListPager's own stylesheet, served as _content/CCP.UI.Components/list-pager.css and linked by every host that renders the shared pager (or the hand-built pager markup AuditTrail keeps).
   Moved here from CCP.Brand's theme.css and shared-grid.css (storefront navigation slice 3 review, M7), where the same rules served every host; the values are unchanged.
   Shared pager (DESIGN-SYSTEM.md §4.32 unification, Francie 2026-08-25): converges onto the platform grid's own pager structure (DESIGN-SYSTEM-GRIDS-AND-DIALOGS.md §4b-i, Difference 2, 2026-09-02) -- an
   "Items per page" select, first/previous/numbered/next/last buttons, and one "N of M pages (K items)" line. Every colour is a --brand-* token NAME. */
.list-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--brand-space-3); margin-top: var(--brand-space-3); }
.list-pager__group { display: flex; align-items: center; gap: var(--brand-space-2); }
.list-pager__status { font-size: var(--brand-font-size-sm); color: var(--brand-neutral-text); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Numbered/first/prev/next/last button, rest and disabled states. */
.list-pager__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--brand-space-8);
    min-height: var(--brand-space-8);
    padding: 0 var(--brand-space-2);
    border: 0;
    background: transparent;
    border-radius: var(--brand-radius-md);
    color: var(--brand-primary-hover);
    font-size: var(--brand-font-size-sm);
    cursor: pointer;
}

.list-pager__page:disabled {
    color: var(--brand-text-subtle);
    cursor: default;
}

/* Current-page fill and non-current hover: the same token mapping as the platform grid's own pager (`.e-pager .e-currentitem` in shared-grid.css) -- current page --brand-primary fill with
   --brand-text-on-brand text, hover --brand-primary-light. `!important` for the same reason as the grid block (a same-specificity tie with the vendor stylesheet that loads later). Change the
   two together. */
.list-pager__page--current, .list-pager__page--current:hover {
    background: var(--brand-primary) !important;
    color: var(--brand-text-on-brand) !important;
    border-radius: var(--brand-radius-md) !important;
}

.list-pager__page:not(.list-pager__page--current):hover {
    background: var(--brand-primary-light) !important;
    border-radius: var(--brand-radius-md) !important;
}