.woocommerce-pagination,
.pagination,
.blog-pagination {
display: flex;
justify-content: center;
align-items: center;
margin: 3rem 0;
padding: 2rem 0;
}
.woocommerce-pagination ul,
.pagination ul,
.blog-pagination ul {
display: flex;
align-items: center;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
} .woocommerce-pagination ul li,
.pagination ul li,
.blog-pagination li {
margin: 0;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.pagination ul li a,
.pagination ul li span,
.blog-pagination a,
.blog-pagination span {
display: flex;
align-items: center;
justify-content: center;
min-width: 48px;
height: 48px;
padding: 0 1rem;
background: var(--color-white, #FEFEFE);
border: 2px solid rgba(127, 179, 163, 0.3);
border-radius: 12px;
font-family: 'Inter', sans-serif;
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text, #2C3E50);
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
} .woocommerce-pagination ul li a:hover,
.pagination ul li a:hover,
.blog-pagination a:hover {
background: rgba(127, 179, 163, 0.1);
border-color: var(--color-primary, #7FB3A3);
color: var(--color-primary, #7FB3A3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(127, 179, 163, 0.2);
} .woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li .current,
.pagination ul li span.current,
.pagination ul li .current,
.blog-pagination .current {
background: var(--color-primary, #7FB3A3);
border-color: var(--color-primary, #7FB3A3);
color: white;
cursor: default;
box-shadow: 0 4px 16px rgba(127, 179, 163, 0.3);
} .woocommerce-pagination ul li span:not(.current),
.pagination ul li span:not(.current) {
opacity: 0.5;
cursor: not-allowed;
} .woocommerce-pagination ul li a.prev,
.woocommerce-pagination ul li a.next,
.pagination ul li a.prev,
.pagination ul li a.next {
padding: 0 1.5rem;
gap: 0.5rem;
}
.woocommerce-pagination ul li a.prev svg,
.woocommerce-pagination ul li a.next svg,
.pagination ul li a.prev svg,
.pagination ul li a.next svg {
width: 16px;
height: 16px;
stroke: currentColor;
transition: transform 0.3s ease;
}
.woocommerce-pagination ul li a.prev:hover svg,
.pagination ul li a.prev:hover svg {
transform: translateX(-4px);
}
.woocommerce-pagination ul li a.next:hover svg,
.pagination ul li a.next:hover svg {
transform: translateX(4px);
} .woocommerce-pagination ul li span.dots,
.pagination ul li span.dots {
border: none;
background: transparent;
color: var(--color-text-light, #5A6C7D);
cursor: default;
min-width: auto;
padding: 0 0.5rem;
} .woocommerce-result-count,
.result-count {
font-size: 0.875rem;
color: var(--color-text-light, #5A6C7D);
margin-bottom: 1rem;
text-align: center;
} .pagination-info {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
padding: 1rem 0;
border-top: 1px solid rgba(127, 179, 163, 0.2);
border-bottom: 1px solid rgba(127, 179, 163, 0.2);
}
.pagination-info .results-count {
font-size: 0.875rem;
color: var(--color-text-light, #5A6C7D);
}
.pagination-info .results-count strong {
color: var(--color-text, #2C3E50);
font-weight: 700;
} .load-more-container {
display: flex;
justify-content: center;
margin: 3rem 0;
}
.load-more-btn {
padding: 1rem 2.5rem;
background: var(--color-white, #FEFEFE);
border: 2px solid var(--color-primary, #7FB3A3);
border-radius: 12px;
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--color-primary, #7FB3A3);
cursor: pointer;
transition: all 0.3s ease;
}
.load-more-btn:hover {
background: var(--color-primary, #7FB3A3);
color: white;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(127, 179, 163, 0.3);
}
.load-more-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.load-more-btn.loading {
position: relative;
color: transparent;
}
.load-more-btn.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 3px solid rgba(127, 179, 163, 0.3);
border-top-color: var(--color-primary, #7FB3A3);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
} @media (max-width: 768px) {
.woocommerce-pagination ul,
.pagination ul,
.blog-pagination ul {
gap: 0.25rem;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.pagination ul li a,
.pagination ul li span,
.blog-pagination a,
.blog-pagination span {
min-width: 40px;
height: 40px;
padding: 0 0.75rem;
font-size: 0.75rem;
}
.woocommerce-pagination ul li a.prev,
.woocommerce-pagination ul li a.next,
.pagination ul li a.prev,
.pagination ul li a.next {
padding: 0 1rem;
} .woocommerce-pagination ul li:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)),
.pagination ul li:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
display: none;
}
.pagination-info {
flex-direction: column;
gap: 1rem;
text-align: center;
}
} .woocommerce-pagination ul li a:focus,
.pagination ul li a:focus,
.blog-pagination a:focus,
.load-more-btn:focus {
outline: 3px solid var(--color-primary, #7FB3A3);
outline-offset: 2px;
}