/* ==========================================================================
   Global Pagination Styles
   ========================================================================== */
.navigation.pagination,
.woocommerce-pagination {
    grid-column: 1 / -1;
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-xl);
    text-align: center;
    width: 100%;
    display: block;
    clear: both;
}

.nav-links,
.woocommerce-pagination ul.page-numbers {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Reset ul.page-numbers strictly */
ul.page-numbers,
ul.page-numbers li {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Target actual pagination items strictly */
span.page-numbers,
a.page-numbers {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: white !important;
    color: var(--text-black) !important;
    text-decoration: none !important;
    border-radius: 50% !important;
    font-weight: 600 !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

span.page-numbers.current {
    background: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 8px 20px rgba(76, 54, 150, 0.25) !important;
}

a.page-numbers:hover {
    background: var(--accent-color) !important;
    color: var(--primary-color) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

/* Arrow adjustments */
.page-numbers .fas,
.page-numbers .fa {
    font-size: 14px;
}

@media (max-width: 768px) {

    span.page-numbers,
    a.page-numbers {
        width: 44px !important;
        height: 44px !important;
        font-size: 14px !important;
    }

    .navigation.pagination,
    .woocommerce-pagination {
        margin-top: var(--space-xl);
    }
}