/* Category Pagination Module
   Standalone, reusable pager. Can sit inside a toolbar or on its own.
   Usage: <div class="pager"> ... </div> */

.pager {
  margin-left: auto;
  display: flex;
  gap: 4px;
  align-items: center;
}
.pager a, .pager span {
  min-width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.pager a.active,
.pager span.active,
.pager a:hover {
  background: var(--anthracite);
  border-color: var(--anthracite);
  color: #fff;
}

@media (max-width: 560px) {
  .pager { margin-left: 0; width: 100%; }
}