/**
 * Club a 4 Zampe — area account: soglie, buoni, pagina fedeltà, i tuoi prodotti.
 *
 * Qui l'utente viene per due domande: "quanti punti ho?" e "cosa ci faccio?".
 * Il saldo è quindi l'elemento più grande della pagina, e le soglie sono
 * presentate come scelte affiancate, non come una tabella da leggere.
 *
 * Valori da assets/css/tokens.css.
 */

/*
 * Ogni blocco dell'area account porta la propria superficie chiara.
 *
 * Lo sfondo della pagina, su questo sito, è il verde petrolio del brand: senza
 * un fondo nostro il testo sarebbe scuro su scuro. Il filetto sottile serve al
 * caso opposto — se un domani l'area account fosse già chiara, i blocchi
 * restano comunque distinti invece di sciogliersi nella pagina.
 */
.ndp-loyalty,
.ndp-your-products,
.ndp-redeem,
.ndp-coupons,
.ndp-profile-extras {
	background: #fff;
	border: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius );
	padding: var( --ndp-gap-lg ) var( --ndp-gap );
}

/* Soglie e buoni, quando vivono dentro la pagina fedeltà, non si ripetono. */
.ndp-loyalty .ndp-redeem,
.ndp-loyalty .ndp-coupons {
	background: transparent;
	border: 0;
	padding: 0;
}

/* ------------------------------------------------------------------ */
/* Soglie di riscatto                                                  */
/* ------------------------------------------------------------------ */

.ndp-redeem,
.ndp-coupons {
	margin-block: var( --ndp-gap-lg );
}

.ndp-redeem__balance {
	font-size: 1.05rem;
	margin-block-end: var( --ndp-gap );
}

.ndp-redeem__tiers {
	display: grid;
	gap: var( --ndp-gap-sm );
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ndp-tier {
	align-items: center;
	background-color: #fff;
	border: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius );
	display: flex;
	flex-wrap: wrap;
	gap: var( --ndp-gap-xs ) var( --ndp-gap-sm );
	padding: var( --ndp-gap );
}

.ndp-tier.is-available {
	border-color: var( --ndp-brand );
}

.ndp-tier.is-locked {
	background: transparent;
	color: var( --ndp-muted );
}

.ndp-tier__points {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: var( --ndp-label-spacing );
	text-transform: uppercase;
	width: 100%;
}

.ndp-tier__amount {
	color: var( --ndp-brand );
	font-family: var( --ndp-display );
	font-size: 2rem;
	font-weight: 300;
	line-height: 1;
	margin-inline-end: auto;
}

.ndp-tier.is-locked .ndp-tier__amount {
	color: var( --ndp-muted );
}

.ndp-tier__missing {
	color: var( --ndp-muted );
	flex-basis: 100%;
	font-size: 0.85rem;
}

.ndp-redeem .button.ndp-tier__button.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.ndp-redeem__feedback,
.ndp-coupons__feedback {
	margin-block-start: var( --ndp-gap-sm );
	min-height: 1.5em;
}

.ndp-redeem__feedback.is-error,
.ndp-coupons__feedback.is-error {
	color: var( --ndp-danger );
}

.ndp-redeem__empty,
.ndp-coupons__empty {
	background: var( --ndp-cream );
	border-radius: var( --ndp-radius );
	margin: 0;
	padding: var( --ndp-gap-lg );
}

/* ------------------------------------------------------------------ */
/* I miei buoni                                                        */
/* ------------------------------------------------------------------ */

.ndp-coupons__title {
	font-size: 1.3rem;
	margin-block: var( --ndp-gap-lg ) var( --ndp-gap-sm );
}

.ndp-coupons__group-title {
	color: var( --ndp-muted );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: var( --ndp-label-spacing );
	margin-block: var( --ndp-gap-lg ) var( --ndp-gap-sm );
	text-transform: uppercase;
}

.ndp-coupons__min {
	color: var( --ndp-muted );
	font-size: 0.85rem;
}

.ndp-coupons__list {
	display: grid;
	gap: var( --ndp-gap-sm );
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ndp-coupon {
	align-items: center;
	border: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius );
	display: flex;
	flex-wrap: wrap;
	gap: var( --ndp-gap-xs ) var( --ndp-gap-sm );
	padding: var( --ndp-gap );
}

.ndp-coupon.is-active {
	background: var( --ndp-cream );
	border-color: var( --ndp-brand );
}

.ndp-coupon__amount {
	color: var( --ndp-brand );
	font-family: var( --ndp-display );
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1;
	margin-inline-end: auto;
}

/* Il codice deve essere leggibile e selezionabile con un colpo d'occhio. */
.ndp-coupon__code {
	background: #fff;
	border: 1px dashed var( --ndp-line-strong );
	border-radius: var( --ndp-radius-sm );
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	padding: 0.3rem 0.6rem;
	user-select: all;
}

.ndp-coupon__expiry,
.ndp-coupon__state {
	color: var( --ndp-muted );
	flex-basis: 100%;
	font-size: 0.85rem;
}

.ndp-coupon__actions {
	display: flex;
	flex-basis: 100%;
	flex-wrap: wrap;
	gap: var( --ndp-gap-xs );
}

.ndp-coupon__gift {
	background: var( --ndp-brand );
	border-radius: var( --ndp-radius-pill );
	color: #fff;
	flex-basis: auto;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: var( --ndp-label-spacing );
	order: -1;
	padding: 0.2rem 0.6rem;
	text-transform: uppercase;
}

/* Esito di "Applica al carrello" senza lasciare la pagina. */
.ndp-coupon__in-cart {
	align-self: center;
	color: var( --ndp-brand );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: var( --ndp-label-spacing );
	text-transform: uppercase;
}

.ndp-coupon__feedback {
	color: var( --ndp-ink );
	flex-basis: 100%;
	font-size: 0.85rem;
}

.ndp-coupon__feedback:empty {
	display: none;
}

.ndp-coupon__feedback.is-error {
	color: var( --ndp-danger );
}

.ndp-coupons__list.is-muted .ndp-coupon {
	color: var( --ndp-muted );
	opacity: 0.75;
}

.ndp-coupons__list.is-muted .ndp-coupon__amount {
	color: var( --ndp-muted );
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                             */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Area account: menu a sinistra, contenuti a destra                    */
/* ------------------------------------------------------------------ */

/*
 * WooCommerce impagina "Il mio account" con i float (woocommerce-layout.css:
 * nav 30% a sinistra, contenuto 68% a destra). La nostra sidebar è un fratello
 * fra i due e non è flottata: prendeva tutta la larghezza del contenitore e
 * spingeva il contenuto sotto, che è il disastro che si vedeva a schermo.
 *
 * Qui le colonne diventano una griglia: i float spariscono, la sidebar sta
 * sotto al menu nella stessa colonna, e un eventuale blocco aggiunto domani da
 * un altro plugin va a tutta larghezza invece di rompere l'impaginazione.
 */
/*
 * I float di WooCommerce vanno tolti a ogni larghezza, non solo dove entra la
 * griglia: fra i 600 e i 767px restavano attivi e la sidebar tornava a
 * incastrarsi fra le due colonne.
 */
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* Menu e riquadro punti sono la stessa colonna: stessa superficie. */
.woocommerce-account .woocommerce-MyAccount-navigation {
	background: #fff;
	border: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius );
	overflow: hidden;
	padding: var( --ndp-gap-sm );
}

@media ( min-width: 768px ) {
	.woocommerce-account .woocommerce {
		align-items: start;
		column-gap: var( --ndp-gap-xl );
		display: grid;
		grid-template-columns: minmax( 0, 17rem ) minmax( 0, 1fr );
		/*
		 * Il contenuto occupa le righe 2 e 3. Se crescono entrambe, la sidebar
		 * (riga 3) scivola a metà pagina. `min-content` sulla riga del menu la
		 * blocca alla sua altezza: tutta l'eccedenza del contenuto finisce
		 * nell'ultima riga, e la sidebar resta attaccata sotto al menu.
		 */
		grid-template-rows: auto min-content 1fr;
	}

	/* Avvisi e blocchi non previsti: sopra le colonne, a tutta larghezza. */
	.woocommerce-account .woocommerce > * {
		grid-column: 1 / -1;
	}

	.woocommerce-account .woocommerce > .woocommerce-notices-wrapper {
		grid-row: 1;
	}

	/* Il saluto e il saldo stanno sopra il menu, non sotto. */
	.woocommerce-account .woocommerce > .ndp-account-sidebar {
		grid-column: 1;
		grid-row: 2;
	}

	.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
		grid-column: 1;
		grid-row: 3;
	}

	.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
		grid-column: 2;
		grid-row: 2 / span 2;
	}
}

/*
 * Il menu di WooCommerce: una lista pulita, non una pila di riquadri con i
 * link sottolineati. Le voci sono la navigazione principale della pagina e
 * devono leggersi come tali.
 */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border: 0;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	border-block-end: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius-sm ) var( --ndp-radius-sm ) 0 0;
	color: var( --ndp-ink-strong );
	display: block;
	padding: 0.7rem 0.9rem;
	text-decoration: none;
	transition: background 0.12s ease, color 0.12s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child a {
	border-block-end: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
	background: var( --ndp-cream );
	color: var( --ndp-brand );
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var( --ndp-brand );
	border-block-end-color: transparent;
	border-radius: var( --ndp-radius-sm );
	color: #fff;
}

.ndp-account-sidebar {
	background: #fff;
	border: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius );
	margin-block: 0 var( --ndp-gap );
	padding: var( --ndp-gap-lg );
}

.ndp-account-sidebar__head {
	align-items: center;
	border-block-end: 1px solid var( --ndp-line );
	display: flex;
	gap: var( --ndp-gap-sm );
	margin-block-end: var( --ndp-gap );
	padding-block-end: var( --ndp-gap );
}

.ndp-account-sidebar__avatar {
	align-items: center;
	background: var( --ndp-cream );
	border-radius: 50%;
	color: var( --ndp-brand );
	display: inline-flex;
	flex: 0 0 auto;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

.ndp-account-sidebar__hello {
	color: var( --ndp-ink-strong );
	font-family: var( --ndp-display );
	font-size: 1.3rem;
	font-weight: 300;
	line-height: 1.2;
	margin: 0;
}

.ndp-account-sidebar__balance {
	margin: 0 0 var( --ndp-gap );
}

.ndp-account-sidebar__balance a {
	color: inherit;
	text-decoration: none;
}

.ndp-account-sidebar__balance strong {
	color: var( --ndp-brand );
	font-family: var( --ndp-display );
	font-size: 2.2rem;
	font-weight: 300;
	line-height: 1;
}

.ndp-account-sidebar__club {
	color: var( --ndp-muted );
	display: block;
	font-size: 0.72rem;
	letter-spacing: var( --ndp-label-spacing );
	text-transform: uppercase;
}

.ndp-account-sidebar__links {
	border-block-start: 1px solid var( --ndp-line );
	list-style: none;
	margin: 0 0 var( --ndp-gap );
	padding-block-start: var( --ndp-gap-sm );
}

.ndp-account-sidebar__links li + li {
	margin-block-start: var( --ndp-gap-xs );
}

.ndp-account-sidebar__links a {
	color: var( --ndp-ink );
	text-decoration: none;
}

.ndp-account-sidebar__links a:hover {
	color: var( --ndp-brand );
	text-decoration: underline;
}

.ndp-account-sidebar__help {
	border-block-start: 1px solid var( --ndp-line );
	padding-block-start: var( --ndp-gap );
}

.ndp-account-sidebar__help p {
	margin: 0 0 var( --ndp-gap-sm );
}

/* ------------------------------------------------------------------ */
/* Pagina fedeltà                                                      */
/* ------------------------------------------------------------------ */

/*
 * Colore esplicito, non ereditato dal contenitore.
 *
 * Il tema ha una regola `p { color: #666 }`, e una regola che tocca l'elemento
 * batte sempre l'ereditarietà, per quanto specifico sia l'antenato: dentro i
 * riquadri verdi i paragrafi senza colore proprio finivano grigi su verde, cioè
 * a 1,68:1. Chi ha già un colore suo (i testi volutamente smorzati) resta com'è.
 */
.ndp-loyalty__header .ndp-loyalty__balance,
.ndp-your-products__banner .ndp-your-products__banner-text,
.ndp-your-products__banner .ndp-your-products__banner-cta {
	color: #fff;
}

.ndp-loyalty__header {
	background: var( --ndp-brand );
	border-radius: var( --ndp-radius );
	color: #fff;
	margin-block-end: var( --ndp-gap-xl );
	padding: var( --ndp-gap-xl ) var( --ndp-gap-lg );
}

.ndp-loyalty__title {
	font-size: 1.35rem;
	margin: 0 0 var( --ndp-gap-xs );
}

.ndp-loyalty__intro,
.ndp-loyalty__note {
	color: rgba( 255, 255, 255, 0.85 );
	margin: 0;
	max-width: 46rem;
}

/* Il saldo è la risposta alla domanda per cui l'utente è qui. */
.ndp-loyalty__balance {
	font-family: var( --ndp-display );
	font-size: 1.3rem;
	font-weight: 300;
	margin-block: var( --ndp-gap-lg ) var( --ndp-gap-xs );
}

.ndp-loyalty__balance strong {
	display: block;
	font-size: 3.5rem;
	font-weight: 300;
	line-height: 1;
}


.ndp-earn-cards {
	display: grid;
	gap: var( --ndp-gap );
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ndp-earn-card {
	border: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius );
	display: flex;
	flex-direction: column;
	padding: var( --ndp-gap-lg );
}

.ndp-earn-card.is-soon {
	background: var( --ndp-cream );
	border-style: dashed;
	color: var( --ndp-muted );
}

.ndp-earn-card__title {
	color: var( --ndp-muted );
	margin: 0 0 var( --ndp-gap-sm );
}

.ndp-earn-card__headline {
	color: var( --ndp-brand );
	font-family: var( --ndp-display );
	font-size: 1.6rem;
	font-weight: 300;
	margin: 0 0 var( --ndp-gap-sm );
}

.ndp-earn-card__text {
	color: var( --ndp-muted );
	margin: 0 0 var( --ndp-gap );
}

.ndp-earn-card__cta {
	margin: auto 0 0;
}

.ndp-earn-card__badge {
	background: var( --ndp-line );
	border-radius: var( --ndp-radius-pill );
	color: var( --ndp-ink );
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: var( --ndp-label-spacing );
	margin: auto 0 0;
	padding: 0.25rem 0.75rem;
	text-transform: uppercase;
}

/* Storico */

.ndp-history {
	border-collapse: collapse;
	width: 100%;
}

.ndp-history th {
	border-block-end: 1px solid var( --ndp-line-strong );
	color: var( --ndp-muted );
	font-size: 0.75rem;
	letter-spacing: var( --ndp-label-spacing );
	padding: var( --ndp-gap-sm ) var( --ndp-gap-xs );
	text-align: start;
	text-transform: uppercase;
}

.ndp-history td {
	border-block-end: 1px solid var( --ndp-line );
	padding: var( --ndp-gap-sm ) var( --ndp-gap-xs );
	vertical-align: top;
}

.ndp-history__num {
	font-variant-numeric: tabular-nums;
	text-align: end;
	white-space: nowrap;
}

.ndp-history__num.is-positive {
	color: var( --ndp-brand );
	font-weight: 700;
}

.ndp-history__num.is-negative {
	color: var( --ndp-danger );
	font-weight: 700;
}

.ndp-history__nav {
	align-items: center;
	display: flex;
	gap: var( --ndp-gap );
	justify-content: space-between;
	margin-block-start: var( --ndp-gap );
}

.ndp-history__nav span {
	color: var( --ndp-muted );
	font-size: 0.85rem;
}

.ndp-loyalty__empty {
	background: var( --ndp-cream );
	border-radius: var( --ndp-radius );
	padding: var( --ndp-gap-lg );
}

/* ------------------------------------------------------------------ */
/* I tuoi prodotti                                                     */
/* ------------------------------------------------------------------ */

.ndp-your-products__intro {
	color: var( --ndp-muted );
	max-width: 46rem;
}

.ndp-your-products__banner {
	align-items: center;
	background: var( --ndp-brand );
	border-radius: var( --ndp-radius );
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	gap: var( --ndp-gap );
	justify-content: space-between;
	margin-block: var( --ndp-gap-lg );
	padding: var( --ndp-gap-lg );
}

.ndp-your-products__banner-text,
.ndp-your-products__banner-cta {
	margin: 0;
}

.ndp-your-products__banner-text strong {
	display: block;
	font-family: var( --ndp-display );
	font-size: 1.4rem;
	font-weight: 300;
}

.ndp-your-products .ndp-your-products__banner .button.button {
	background: var( --ndp-cream );
	border-color: var( --ndp-cream );
	color: var( --ndp-brand );
}




.ndp-product-cards {
	display: grid;
	gap: var( --ndp-gap );
	grid-template-columns: 1fr;
	list-style: none;
	margin: var( --ndp-gap ) 0 0;
	padding: 0;
}

.ndp-product-card {
	border: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius );
	display: flex;
	gap: var( --ndp-gap );
	padding: var( --ndp-gap );
}

.ndp-product-card.is-active {
	border-color: var( --ndp-brand );
}

.ndp-product-card.is-done {
	background: var( --ndp-cream );
}

.ndp-product-card__thumb img {
	border-radius: var( --ndp-radius-sm );
	display: block;
	height: auto;
	max-width: 88px;
}

.ndp-product-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.ndp-product-card__name {
	font-size: 1.1rem;
	margin: 0 0 var( --ndp-gap-xs );
}

.ndp-product-card__name a {
	color: inherit;
	text-decoration: none;
}

.ndp-product-card__name a:hover {
	text-decoration: underline;
}

.ndp-product-card__meta,
.ndp-product-card__hint,
.ndp-product-card__countdown,
.ndp-product-card__expired {
	color: var( --ndp-muted );
	font-size: 0.85rem;
	margin: 0 0 var( --ndp-gap-xs );
}

.ndp-product-card__points {
	color: var( --ndp-brand );
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: var( --ndp-label-spacing );
	margin: var( --ndp-gap-sm ) 0 var( --ndp-gap-xs );
	text-transform: uppercase;
}

.ndp-product-card__breakdown {
	color: var( --ndp-muted );
	display: flex;
	flex-wrap: wrap;
	font-size: 0.82rem;
	gap: var( --ndp-gap-xs ) var( --ndp-gap );
	list-style: none;
	margin: 0 0 var( --ndp-gap-sm );
	padding: 0;
}

.ndp-product-card__countdown {
	color: var( --ndp-warning );
}

.ndp-product-card__stars {
	margin: 0 0 var( --ndp-gap-xs );
}

.ndp-product-card__pending {
	color: var( --ndp-warning );
	font-size: 0.85rem;
	margin: 0 0 var( --ndp-gap-xs );
}

.ndp-product-card__earned {
	margin: 0 0 var( --ndp-gap-sm );
}

.ndp-product-card__earned strong {
	color: var( --ndp-brand );
}

.ndp-product-card__cta {
	margin: var( --ndp-gap-sm ) 0 0;
}

.ndp-your-products__empty {
	background: var( --ndp-cream );
	border-radius: var( --ndp-radius );
	padding: var( --ndp-gap-xl );
	text-align: center;
}

.ndp-your-products__more {
	margin-block: var( --ndp-gap-lg );
	text-align: center;
}

.ndp-your-products__link {
	border-block-start: 1px solid var( --ndp-line );
	margin-block-start: var( --ndp-gap-xl );
	padding-block-start: var( --ndp-gap );
}

/* ------------------------------------------------------------------ */
/* Profilo consolidato                                                 */
/* ------------------------------------------------------------------ */

.ndp-profile-extras__block {
	border-block-start: 1px solid var( --ndp-line );
	margin-block-start: var( --ndp-gap-xl );
	padding-block-start: var( --ndp-gap-lg );
}

/* Box "I tuoi amici a 4 zampe" (profilo e pagina del Club). */
.ndp-pets__intro {
	color: var( --ndp-muted );
	font-size: 0.9rem;
	margin-block: 0 var( --ndp-gap );
}

/* Le regole del regalo: un riquadro chiaro sopra le schede, con il filo del brand. */
.ndp-pets__gift {
	background: #fff;
	border-inline-start: 3px solid var( --ndp-brand );
	border-radius: 0 var( --ndp-radius ) var( --ndp-radius ) 0;
	margin-block: 0 var( --ndp-gap );
	padding: var( --ndp-gap-sm ) var( --ndp-gap );
}

.ndp-pets__gift-title {
	color: var( --ndp-brand );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: var( --ndp-label-spacing );
	margin: 0 0 var( --ndp-gap-xs );
	text-transform: uppercase;
}

.ndp-pets__gift-rules {
	color: var( --ndp-ink );
	font-size: 0.92rem;
	margin: 0;
	padding-inline-start: 1.1rem;
}

.ndp-pets__gift-rules li + li {
	margin-block-start: 0.2rem;
}

.ndp-pets__message {
	border-inline-start: 3px solid var( --ndp-brand );
	border-radius: 0 var( --ndp-radius ) var( --ndp-radius ) 0;
	background: #fff;
	color: var( --ndp-ink );
	margin-block: 0 var( --ndp-gap );
	padding: var( --ndp-gap-sm ) var( --ndp-gap );
}

.ndp-pets__message.is-error {
	border-inline-start-color: var( --ndp-danger );
	color: var( --ndp-danger );
}

/* Un animale = una scheda bianca: nome, specie e data affiancati, azioni sotto. */
.ndp-pet {
	background: #fff;
	border: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius );
	margin-block-end: var( --ndp-gap-sm );
	padding: var( --ndp-gap ) var( --ndp-gap-lg );
}

.ndp-pet--new {
	background: transparent;
	border-color: var( --ndp-line-strong );
	border-style: dashed;
}

.ndp-pet__form {
	align-items: start;
	display: grid;
	gap: 0 var( --ndp-gap );
	grid-template-columns: 1fr;
}

.ndp-pet__field {
	margin: 0 0 var( --ndp-gap-sm );
}

.ndp-pet__field label,
.ndp-pet__label {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: var( --ndp-label-spacing );
	margin-block-end: var( --ndp-gap-xs );
	text-transform: uppercase;
}

.ndp-pet__field input,
.ndp-pet__field select {
	width: 100%;
}

.ndp-pet__new-title {
	color: var( --ndp-ink-strong );
	font-weight: 700;
	margin: 0 0 var( --ndp-gap-sm );
}

/* La data già salvata si legge come un valore, non come un campo spento. */
.ndp-pet__birthday {
	color: var( --ndp-ink-strong );
	display: block;
	font-size: 1.05rem;
	padding-block: 0.55rem 0.2rem;
}

.ndp-pet__hint {
	color: var( --ndp-muted );
	display: block;
	font-size: 0.8rem;
}

.ndp-pet__save {
	margin: 0 0 var( --ndp-gap-sm );
}

.ndp-pet__footer {
	border-block-start: 1px solid var( --ndp-line );
	font-size: 0.85rem;
	padding-block-start: var( --ndp-gap-xs );
	text-align: end;
}

.ndp-pet__footer .ndp-pet__hint {
	display: inline;
}

.ndp-pet__remove-form {
	display: inline;
	margin: 0;
}

/* Un'azione rara e irreversibile per 12 mesi: link sobrio, non un pulsante. */
.ndp-pet .ndp-pet__remove {
	background: none;
	border: 0;
	color: var( --ndp-danger );
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media ( min-width: 900px ) {
	.ndp-pet__form {
		grid-template-columns: 1.3fr 1fr 1.2fr auto;
	}

	/* In riga coi campi: scende di quanto è alta l'etichetta sopra di loro. */
	.ndp-pet__save {
		padding-block-start: 1.45rem;
	}
}

/* ------------------------------------------------------------------ */
/* Da tablet in su                                                     */
/* ------------------------------------------------------------------ */

@media ( min-width: 768px ) {
	.ndp-redeem__tiers,
	.ndp-coupons__list {
		grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	}

	.ndp-earn-cards {
		grid-template-columns: repeat( auto-fit, minmax( 16rem, 1fr ) );
	}

	.ndp-product-cards {
		grid-template-columns: repeat( auto-fit, minmax( 21rem, 1fr ) );
	}

	.ndp-loyalty__balance strong {
		font-size: 4.5rem;
	}
}

/* ------------------------------------------------------------------ */
/* Bacheca: come funziona il Club                                       */
/* ------------------------------------------------------------------ */

.ndp-dashboard__header {
	margin-block-end: var( --ndp-gap-lg );
}

.ndp-dashboard__title {
	font-size: 1.5rem;
	margin-block: 0 var( --ndp-gap-xs );
}

.ndp-dashboard__intro {
	color: var( --ndp-muted );
	margin: 0;
}

.ndp-dashboard__cta {
	margin-block-start: var( --ndp-gap );
}

/* ------------------------------------------------------------------ */
/* Estratto "da recensire" nella pagina del Club                        */
/* ------------------------------------------------------------------ */


/* ------------------------------------------------------------------ */
/* Bacheca: i riquadri delle sezioni                                    */
/* ------------------------------------------------------------------ */

.ndp-tiles {
	display: grid;
	gap: var( --ndp-gap );
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ndp-tile {
	background: #fff;
	border: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius );
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var( --ndp-gap-lg );
}

/* Il riquadro del Club è il motivo per cui questa pagina esiste: si distingue. */
.ndp-tile--club {
	background: var( --ndp-brand );
	border-color: var( --ndp-brand );
	color: #fff;
}

.ndp-tile__eyebrow {
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: var( --ndp-label-spacing );
	margin: 0 0 var( --ndp-gap-xs );
	text-transform: uppercase;
}

.ndp-tile__balance {
	align-items: baseline;
	color: #fff;
	display: flex;
	gap: var( --ndp-gap-xs );
	margin: 0 0 var( --ndp-gap-xs );
}

.ndp-tile__balance strong {
	font-family: var( --ndp-display );
	font-size: 2.6rem;
	font-weight: 300;
	line-height: 1;
}

.ndp-tile__title {
	font-size: 1.15rem;
	margin: 0 0 var( --ndp-gap-xs );
}

/*
 * Colore esplicito, non ereditato: il tema colora ogni `p` di grigio e su
 * fondo verde il testo sparirebbe (è lo stesso inciampo del box CTA).
 */
.ndp-tile__text {
	color: var( --ndp-muted );
	margin: 0 0 var( --ndp-gap );
}

.ndp-tile--club .ndp-tile__text {
	color: rgba( 255, 255, 255, 0.85 );
}

/* Le azioni restano in fondo: i riquadri di una riga finiscono allineati. */
.ndp-tile__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var( --ndp-gap-sm ) var( --ndp-gap );
	margin: auto 0 0;
}

.ndp-tile__link {
	color: var( --ndp-brand );
	font-weight: 700;
}

.ndp-tile--club .ndp-tile__link,
.ndp-tile--club .ndp-tile__actions {
	color: #fff;
}

.woocommerce-account .ndp-tile--club .button.button {
	background: var( --ndp-cream );
	border-color: var( --ndp-cream );
	color: var( --ndp-brand );
}

.woocommerce-account .ndp-tile--club .button.button:hover {
	background: #fff;
	border-color: #fff;
}

@media ( min-width: 640px ) {
	.ndp-tiles {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	/* Il Club prende tutta la riga: è il riquadro con il numero grande. */
	.ndp-tile--club {
		align-items: center;
		display: grid;
		gap: var( --ndp-gap-lg );
		grid-column: 1 / -1;
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	}
}

.ndp-tile__club-title {
	color: #fff;
	font-size: 1.35rem;
	margin: 0 0 var( --ndp-gap-xs );
}

.ndp-tile__note {
	color: rgba( 255, 255, 255, 0.85 );
	font-size: 0.92rem;
	margin: 0 0 var( --ndp-gap );
}

/* La riga di servizio: c'è, ma non compete con i riquadri. */
.ndp-dashboard__note {
	color: var( --ndp-muted );
	font-size: 0.92rem;
	margin-block: var( --ndp-gap-lg ) 0;
}

/*
 * Il saluto è un titolo per la struttura della pagina, non per l'aspetto: il
 * tema veste gli h2 con il carattere display in corpo grande, e qui servirebbe
 * solo a gridare. `inherit` lo riporta al carattere del testo.
 */
.ndp-dashboard__greeting {
	color: var( --ndp-ink );
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	margin-block: 0 var( --ndp-gap );
}

.ndp-dashboard__greeting strong {
	color: var( --ndp-ink-strong );
}

/* ------------------------------------------------------------------ */
/* Uniformazione dell'area account                                      */
/* ------------------------------------------------------------------ */

/*
 * Le pagine "Il mio profilo", "Ordini" e "Indirizzi" sono di WooCommerce e
 * arrivano vestite dal tema: caratteri, campi e tabelle non parlano la stessa
 * lingua dei nostri moduli. Qui si allineano agli stessi token, così l'area
 * account si legge come una cosa sola invece che come tre plugin diversi.
 *
 * I selettori restano dentro `.woocommerce-account`: fuori di lì, carrello e
 * checkout compresi, non cambia nulla.
 */

/* ---- Titoli di sezione ---------------------------------------------- */

/*
 * Solo i figli diretti e i titoli dei componenti di WooCommerce: i titoli dei
 * nostri moduli sono annidati e restano quelli che abbiamo già deciso.
 */
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content > h3,
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content form legend {
	color: var( --ndp-ink-strong );
	font-family: var( --ndp-display );
	font-size: 1.25rem;
	font-weight: 300;
	line-height: 1.25;
	margin-block: 0 var( --ndp-gap );
	padding: 0;
	width: auto;
}

/* ---- Campi ----------------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content label {
	color: var( --ndp-ink-strong );
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: var( --ndp-label-spacing );
	margin-block-end: var( --ndp-gap-xs );
	text-transform: uppercase;
}

/* La checkbox tiene la sua etichetta in riga, in corpo normale. */
.woocommerce-account .woocommerce-MyAccount-content label.checkbox,
.woocommerce-account .woocommerce-MyAccount-content label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce-account .woocommerce-MyAccount-content .required {
	color: var( --ndp-danger );
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="date"],
.woocommerce-account .woocommerce-MyAccount-content input[type="number"],
.woocommerce-account .woocommerce-MyAccount-content select,
.woocommerce-account .woocommerce-MyAccount-content textarea {
	/* `background-color` e non la scorciatoia: `background` azzererebbe anche
	   l'immagine, e con essa la freccetta dei menu a tendina. */
	background-color: #fff;
	border: 1px solid var( --ndp-line-strong );
	border-radius: var( --ndp-radius-sm );
	box-shadow: none;
	color: var( --ndp-ink );
	font-size: 1rem;
	padding: 0.6rem 0.8rem;
	width: 100%;
}

/*
 * Il tema azzera l'aspetto nativo dei `select`, e con esso sparisce la
 * freccetta: senza, il menu a tendina è indistinguibile da un campo di testo.
 * La si ridisegna con un SVG in linea, che prende il colore dai token e non
 * aggiunge una richiesta.
 */
.woocommerce-account .woocommerce-MyAccount-content select {
	appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b6b68' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-position: right 0.8rem center;
	background-repeat: no-repeat;
	background-size: 0.7rem;
	padding-inline-end: 2.4rem;
}

.woocommerce-account .woocommerce-MyAccount-content input:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content select:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content textarea:focus-visible {
	border-color: var( --ndp-brand );
	box-shadow: var( --ndp-focus );
	outline: none;
}

.woocommerce-account .woocommerce-MyAccount-content .form-row {
	margin-block: 0 var( --ndp-gap );
}

/* Il testo di servizio sotto un campo: piccolo e smorzato, non un paragrafo. */
.woocommerce-account .woocommerce-MyAccount-content .form-row span em,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-hint {
	color: var( --ndp-muted );
	display: block;
	font-size: 0.85rem;
	font-style: normal;
	margin-block-start: var( --ndp-gap-xs );
}

/* ---- Gruppi di campi -------------------------------------------------- */

.woocommerce-account .woocommerce-MyAccount-content form fieldset {
	background: var( --ndp-cream );
	border: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius );
	margin-block: var( --ndp-gap-lg ) var( --ndp-gap );
	padding: var( --ndp-gap-lg ) var( --ndp-gap );
}

/* Dentro il gruppo i campi restano bianchi: si distinguono dal fondo crema. */
.woocommerce-account .woocommerce-MyAccount-content form fieldset input,
.woocommerce-account .woocommerce-MyAccount-content form fieldset select {
	background-color: #fff;
}

/* ---- Tabella ordini --------------------------------------------------- */

.woocommerce-account .woocommerce-orders-table {
	/*
	 * Fondo esplicito: i contenitori del tema sono trasparenti sopra un body
	 * verde, e sotto i 768px WooCommerce impila la tabella in schede — senza
	 * questo, il testo scuro finisce sul verde.
	 */
	background-color: #fff;
	border: 1px solid var( --ndp-line );
	border-collapse: separate;
	border-radius: var( --ndp-radius );
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

.woocommerce-account .woocommerce-orders-table th,
.woocommerce-account .woocommerce-orders-table td {
	border: 0;
	border-block-end: 1px solid var( --ndp-line );
	padding: 0.8rem var( --ndp-gap );
	text-align: start;
	vertical-align: middle;
}

.woocommerce-account .woocommerce-orders-table thead th {
	background: var( --ndp-cream );
	color: var( --ndp-ink-strong );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: var( --ndp-label-spacing );
	text-transform: uppercase;
}

.woocommerce-account .woocommerce-orders-table tbody tr:last-child td {
	border-block-end: 0;
}

.woocommerce-account .woocommerce-orders-table tbody tr:hover td {
	background: var( --ndp-brand-soft );
}

/* ---- Indirizzi -------------------------------------------------------- */

.woocommerce-account .woocommerce-Address {
	background: #fff;
	border: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius );
	padding: var( --ndp-gap-lg ) var( --ndp-gap );
}

.woocommerce-account .woocommerce-Address-title {
	align-items: baseline;
	border-block-end: 1px solid var( --ndp-line );
	display: flex;
	gap: var( --ndp-gap );
	justify-content: space-between;
	margin-block-end: var( --ndp-gap );
	padding-block-end: var( --ndp-gap-sm );
}

.woocommerce-account .woocommerce-Address-title h2 {
	margin-block-end: 0;
}

.woocommerce-account .woocommerce-Address address {
	color: var( --ndp-ink );
	font-style: normal;
	line-height: 1.7;
	margin: 0;
}

/* ---- Avvisi ----------------------------------------------------------- */

.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	background: #fff;
	border: 1px solid var( --ndp-line );
	border-inline-start: 3px solid var( --ndp-brand );
	border-radius: 0 var( --ndp-radius ) var( --ndp-radius ) 0;
	color: var( --ndp-ink );
	list-style: none;
	margin-block: 0 var( --ndp-gap );
	padding: var( --ndp-gap ) var( --ndp-gap-lg );
}

.woocommerce-account .woocommerce-error {
	border-inline-start-color: var( --ndp-danger );
	color: var( --ndp-danger );
}

.woocommerce-account .woocommerce-error ul,
.woocommerce-account .woocommerce-error li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- Paginazione ------------------------------------------------------ */

.woocommerce-account .woocommerce-pagination {
	display: flex;
	gap: var( --ndp-gap-sm );
	margin-block-start: var( --ndp-gap );
}

/* ------------------------------------------------------------------ */
/* Sezioni: pannelli alternati                                          */
/* ------------------------------------------------------------------ */

/*
 * Ogni sezione è un pannello con il suo titolo e il suo filetto, e i pannelli
 * si alternano bianco e crema: sono pagine lunghe, e a scorrerle senza stacchi
 * si perde il filo di dove finisce una cosa e ne comincia un'altra.
 *
 * Le carte dentro le sezioni restano sempre bianche: stanno *sopra* il
 * pannello, e cambiando colore con esso sparirebbero un giro sì e uno no.
 */
.woocommerce-account .ndp-loyalty > section,
.woocommerce-account .ndp-your-products > section,
.woocommerce-account .ndp-dashboard > section {
	background-color: #fff;
	border: 1px solid var( --ndp-line );
	border-radius: var( --ndp-radius );
	margin-block: 0 var( --ndp-gap-lg );
	padding: var( --ndp-gap-lg ) var( --ndp-gap );
}

.woocommerce-account .ndp-loyalty > section:nth-of-type( even ),
.woocommerce-account .ndp-your-products > section:nth-of-type( even ),
.woocommerce-account .ndp-dashboard > section:nth-of-type( even ) {
	background-color: var( --ndp-cream );
}

/* Il titolo apre il pannello, separato da un filetto. */
.woocommerce-account .ndp-loyalty > section > h3,
.woocommerce-account .ndp-your-products > section > h3,
.woocommerce-account .ndp-dashboard > section > h3 {
	border-block-end: 1px solid var( --ndp-line );
	color: var( --ndp-ink-strong );
	font-family: var( --ndp-display );
	font-size: 1.25rem;
	font-weight: 300;
	margin-block: 0 var( --ndp-gap );
	padding-block-end: var( --ndp-gap-sm );
}

/* Le carte non prendono il colore della sezione: restano sopra. */
.woocommerce-account .ndp-earn-card,
.woocommerce-account .ndp-coupon,
.woocommerce-account .ndp-product-card {
	background-color: #fff;
}

/* Il pulsante di coda ha bisogno d'aria: prima toccava le schede. */
.ndp-loyalty__todo-cta {
	margin-block: var( --ndp-gap-lg ) 0;
}