/* Pagination (.pager). Own class names on purpose: the old theme has several conflicting .pagination rules. */
.pager { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 40px 0 8px; }
.pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pager li { margin: 0; padding: 0; }
:root body .pager-link { min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid #e3e6f0; background: #fff; color: #3b4160; font-size: var(--fs-body); font-weight: var(--fw-strong); line-height: 1; text-decoration: none; transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; }
:root body a.pager-link:hover { border-color: var(--brand, #d41478); color: var(--brand, #d41478); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(20, 23, 43, .08); }
:root body .pager-link.active { background: var(--brand, #d41478); border-color: var(--brand, #d41478); color: #fff; box-shadow: 0 8px 18px rgba(var(--brand-rgb, 212, 20, 120), .3); cursor: default; }
:root body .pager-link.is-disabled { opacity: .4; cursor: not-allowed; background: #f6f7fb; }
.pager-arrow { font-size: 14px; }
.pager-gap { min-width: 28px; display: inline-flex; align-items: center; justify-content: center; height: 44px; color: #8a90a8; letter-spacing: 2px; }
:root body .pager-info { margin: 0; font-size: var(--fs-small); color: #7a8196; }

@media (max-width: 575px) {
    /* on a phone: previous, current page, next, plus the "Page x of y" line (the number row would not fit on one line) */
    .pager li:has(> a.pager-link:not(.pager-arrow)), .pager li:has(> .pager-gap) { display: none; }
    .pager ul { gap: 10px; }
    :root body .pager-link { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; }
}