.pg-nav {
    --pg-accent: var(--primary, var(--p, #2E4220));
    --pg-accent-soft: var(--primary-soft, var(--p-light, color-mix(in srgb, var(--pg-accent) 12%, transparent)));
    --pg-muted: var(--text-muted, #7c7267);
    --pg-border: var(--border-light, var(--glass-border, rgba(226, 222, 214, 0.85)));
    --pg-radius: var(--radius-pill, 9999px);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 40px auto 8px;
}

.pg-btn, .pg-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    border-radius: var(--pg-radius);
    border: 1.5px solid var(--pg-border);
    background: #fff;
    color: var(--pg-muted);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.pg-btn:hover, .pg-page:hover {
    border-color: color-mix(in srgb, var(--pg-accent) 35%, transparent);
    color: var(--pg-accent);
    background: var(--pg-accent-soft);
    transform: translateY(-1px);
}

.pg-btn.is-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

.pg-arrow-prev,
.pg-arrow-next {
    font-size: 0.85rem;
    line-height: 1;
}

.pg-page.is-active {
    background: var(--pg-accent);
    border-color: var(--pg-accent);
    color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--pg-accent) 35%, transparent);
}

.pg-page.is-active:hover {
    transform: none;
    color: #fff;
    background: var(--pg-accent);
}

.pg-pages {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pg-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 40px;
    color: var(--pg-muted);
    font-weight: 600;
    user-select: none;
}

[dir="rtl"] .pg-arrow-prev,
[dir="rtl"] .pg-arrow-next {
    transform: scaleX(-1);
}

@media (max-width: 576px) {
    .pg-nav { gap: 6px; margin: 28px auto 4px; }
    .pg-btn, .pg-page { min-width: 34px; height: 34px; font-size: 0.85rem; padding: 0 6px; }
    .pg-ellipsis { min-width: 20px; height: 34px; }
    .pg-pages { gap: 4px; }
}