/* =========================================================================
   Paginazione dello Shop.
   -------------------------------------------------------------------------
   Tutto sotto `.pdgt-pager`, che il plugin non conosce: nessuna regola può
   incrociarsi con le sue. L'unica cosa che tocchiamo di suo è `.pdg-more`,
   e solo per nasconderlo quando le pagine numerate lo sostituiscono —
   `display` non è dichiarato dal plugin su quella classe, quindi non c'è
   nessuna gara di specificità da vincere.
   ========================================================================= */

.pdgt-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	padding-top: clamp(1.25rem, 3vw, 2rem);
	border-top: 1px solid var(--pdgt-line-soft, rgba(120, 100, 89, .07));
	font-family: var(--pdgt-sans);
}
.pdgt-pager[hidden] { display: none; }

.pdgt-pager__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 .75rem;
	border: 1px solid var(--pdgt-line, rgba(120, 100, 89, .12));
	border-radius: 999px;
	background: transparent;
	font-family: var(--pdgt-sans);
	font-size: var(--pdgt-t-micro, .625rem);
	font-weight: 600;
	letter-spacing: .1em;
	line-height: 1;
	color: var(--pdgt-ink, #786459);
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color .35s var(--pdgt-ease), color .35s var(--pdgt-ease), border-color .35s var(--pdgt-ease);
}
.pdgt-pager__btn:hover:not(:disabled):not(.is-on) {
	border-color: var(--pdgt-nude, #D9B6A5);
	background: var(--pdgt-ivory, #F8F3F0);
}
.pdgt-pager__btn.is-on {
	background: var(--pdgt-ink, #786459);
	border-color: var(--pdgt-ink, #786459);
	color: var(--pdgt-warm-white, #FFFDFC);
}
.pdgt-pager__btn:disabled { opacity: .3; cursor: default; }
.pdgt-pager__btn--arrow { font-size: .9rem; letter-spacing: 0; }

.pdgt-pager__gap {
	min-width: 24px;
	text-align: center;
	color: var(--pdgt-ink-faint, rgba(120, 100, 89, .62));
	font-size: var(--pdgt-t-small, .78rem);
}

/* Con le pagine numerate, «mostra altri prodotti» sarebbe un secondo modo di
   fare la stessa cosa. Resta nel markup per chi ha JavaScript disattivato:
   la classe che lo nasconde la mette lo script. */
body.pdgt-pager-on .pdg-more { display: none; }

@media (max-width: 520px) {
	.pdgt-pager__btn { min-width: 36px; height: 36px; padding: 0 .55rem; }
}

@media (prefers-reduced-motion: reduce) {
	.pdgt-pager__btn { transition-duration: .001ms; }
}