/* Reference outline pagination; server-rendered hrefs remain functional without JS. */
.colors-pagination {
    --pagination-ink: #35271f;
    --pagination-muted: #8d827a;
    --pagination-line: #dfd6cf;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    margin-block: 34px 12px;
    font-variant-numeric: tabular-nums;
}
.colors-pagination .colors-pagination__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.colors-pagination .colors-pagination__content--mobile,
.colors-pagination .colors-pagination__content--compact { display: none; }
.colors-pagination .colors-pagination__content > li { display: flex; flex: 0 0 auto; margin: 0; padding: 0; }
.colors-pagination .colors-pagination__control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--pagination-ink);
    font: inherit;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.colors-pagination .colors-pagination__arrow {
    border-color: var(--pagination-line);
    background: rgba(255, 255, 255, .72);
}
.colors-pagination .colors-pagination__control--active {
    border-color: #a94b31;
    background: rgba(255, 255, 255, .85);
    color: #863d29;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(69, 41, 25, .05);
}
.colors-pagination a.colors-pagination__control:hover {
    border-color: var(--pagination-line);
    background: #f1eae4;
}
.colors-pagination a.colors-pagination__control:focus-visible {
    outline: 2px solid #a94b31;
    outline-offset: 3px;
}
.colors-pagination .colors-pagination__control[aria-disabled="true"] {
    color: var(--pagination-muted);
    border-color: #e9e3dd;
    background: rgba(255, 255, 255, .25);
    opacity: .5;
}
.colors-pagination .colors-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 44px;
    color: var(--pagination-muted);
    line-height: 1;
}
@media (max-width: 600px) {
    .colors-pagination .colors-pagination__content--desktop { display: none; }
    .colors-pagination .colors-pagination__content--mobile { display: flex; }
    .colors-pagination .colors-pagination__content { gap: 3px; }
    .colors-pagination .colors-pagination__ellipsis { width: 14px; }
}
@media (max-width: 360px) {
    .colors-pagination .colors-pagination__content--mobile { display: none; }
    .colors-pagination .colors-pagination__content--compact { display: flex; }
    .colors-pagination .colors-pagination__content { gap: 1px; }
    .colors-pagination .colors-pagination__ellipsis { width: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .colors-pagination .colors-pagination__control { transition: none; }
}