/* ============================================================
   Pagination – light, airy, teal accent only for active page
   ============================================================ */
.navigation.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 3rem auto;
    font-family: var(--salelifter-font-base, 'Inter', 'DM Sans', sans-serif);
    border: none !important;
    box-shadow: none !important;
}

/* ── Base: all page-number elements ── */
.navigation.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.55rem;
    border-radius: 9999px;
    background: transparent;
    color: #b0b0b8;
    text-decoration: none;
    font-weight: 400;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    transition: background 0.2s ease, color 0.2s ease;
}

/* ── Hover on plain numbers ── */
.navigation.pagination .page-numbers:hover {
    background: rgba(76, 201, 194, 0.1);
    color: #4cc9c2;
}

/* ── Active / current page → teal filled circle ── */
.navigation.pagination .page-numbers.current {
    background: #4cc9c2;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(76, 201, 194, 0.35);
}

/* ── Dots (…) ── */
.navigation.pagination .page-numbers.dots {
    background: transparent;
    color: #d0d0d8;
    pointer-events: none;
    letter-spacing: 0.05em;
}

/* ── Prev / Next → rounded pill, light gray background ── */
.navigation.pagination .prev,
.navigation.pagination .next {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1.1rem;
    border-radius: 9999px;
    background: #f2f2f5;
    color: #888;
    font-weight: 400;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
    margin: 0 0.25rem;
}

.navigation.pagination .prev:hover,
.navigation.pagination .next:hover {
    background: rgba(76, 201, 194, 0.12);
    color: #4cc9c2;
}

/* ── Keep SVG arrows proportional inside pills ── */
.navigation.pagination .prev svg,
.navigation.pagination .next svg {
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    flex-shrink: 0;
}