.pagination {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;

	& a {
		min-width: 36px;
		border: 1.5px solid #e0ddd8;
		border-radius: var(--radius-pill);
		padding: 5px 10px;
		text-align: center;
		font-weight: 600;
		color: #1a1a1a;
		background: #fff;
		transition:
			border-color var(--transition),
			background var(--transition);
		&:hover {
			border-color: #aaa;
			background: var(--surface-muted);
			text-decoration: none;
		}
	}

	& span {
		min-width: 36px;
		border: 1.5px solid transparent;
		border-radius: var(--radius-pill);
		padding: 5px 10px;
		text-align: center;
		font-weight: 600;
		color: #888;
		background: transparent;
	}

	& .is-current {
		font-weight: 800;
		color: #fff;
		background: var(--brand);
		border-color: var(--brand);
	}
}

.pagination--compact {
	margin: 0 0 0 auto;
	justify-content: flex-end;

	& a,
	& span {
		min-width: 24px;
		padding: 2px 4px;
		font-size: 0.95rem;
	}
}

.pagination-ellipsis {
	letter-spacing: 0.08em;
}