/* Paginazione: cerchi con numero, pagina corrente piena */
@layer components {
  .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .pagination__item {
    min-width: 48px; height: 48px; padding: 0 14px; border-radius: var(--radius-pill);
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px var(--color-line); color: var(--color-ink); font-size: 16px; font-weight: 600;
    &:hover { box-shadow: inset 0 0 0 1px var(--color-ink); color: var(--color-ink); }
    &.current { background: var(--color-primary); color: var(--color-on-primary); box-shadow: none; }
    &.dots { box-shadow: none; }
  }
}