/**
 * Shop / Archive pagination styling (canonical).
 * Used by template-shop.php and woocommerce/archive-product.php.
 */
.pcp-shop-pagination-wrap ul.page-numbers,
.uct-shop-pagination-wrap ul.page-numbers {
    display: flex;
    gap: var(--uct-shop-pagination-gap, 8px);
}

.pcp-shop-pagination-wrap ul.page-numbers li,
.uct-shop-pagination-wrap ul.page-numbers li {
    display: inline-block;
}

.pcp-shop-pagination-wrap ul.page-numbers li a,
.pcp-shop-pagination-wrap ul.page-numbers li span,
.uct-shop-pagination-wrap ul.page-numbers li a,
.uct-shop-pagination-wrap ul.page-numbers li span {
    width: var(--uct-shop-pagination-item-size, 40px);
    height: var(--uct-shop-pagination-item-size, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 10px;
    border: var(--uct-shop-pagination-border-width, 2px) solid var(--uct-shop-pagination-border-color, var(--pcp-shop-pagination-border-color, #f3f4f6));
    border-radius: var(--uct-shop-pagination-radius, 0px);
    background: var(--uct-shop-pagination-bg, var(--pcp-shop-pagination-bg, #fff));
    color: var(--uct-shop-pagination-text-color, var(--pcp-shop-pagination-text-color, #4b5563));
    transition: all 0.2s;
    text-decoration: none;
}

.pcp-shop-pagination-wrap ul.page-numbers li a:hover,
.uct-shop-pagination-wrap ul.page-numbers li a:hover {
    border-color: var(--uct-shop-pagination-hover-border-color, var(--pcp-shop-pagination-hover-border-color, var(--brand-navy, #0673b4)));
    color: var(--uct-shop-pagination-hover-text-color, var(--pcp-shop-pagination-hover-text-color, var(--brand-navy, #0673b4)));
    background: var(--uct-shop-pagination-hover-bg, var(--pcp-shop-pagination-hover-bg, #f9fafb));
}

.pcp-shop-pagination-wrap ul.page-numbers li span.current {
    background: var(--uct-shop-pagination-active-bg, var(--pcp-shop-pagination-active-bg, var(--brand-navy, #0673b4)));
    border-color: var(--uct-shop-pagination-active-border-color, var(--pcp-shop-pagination-active-border-color, var(--brand-navy, #0673b4)));
    color: var(--uct-shop-pagination-active-text-color, var(--pcp-shop-pagination-active-text-color, #fff));
}

@media (min-width: 768px) {
    .pcp-shop-pagination-wrap ul.page-numbers li a,
    .pcp-shop-pagination-wrap ul.page-numbers li span,
    .uct-shop-pagination-wrap ul.page-numbers li a,
    .uct-shop-pagination-wrap ul.page-numbers li span {
        width: var(--uct-shop-pagination-item-size, 48px);
        height: var(--uct-shop-pagination-item-size, 48px);
    }
}