/* =============================================================================
 * PROBAR - SCONTO A SCAGLIONI PER QUANTITA'
 * -----------------------------------------------------------------------------
 * LA SCHEDA PRODOTTO HA IL FONDO QUASI NERO (rgb(10,10,10), misurato dal vivo
 * il 21 agosto 2026): la prima stesura aveva il titolo in #1a1a1a e non si
 * leggeva. Qui si parte dal fondo scuro, non dal chiaro.
 *
 * LE PILLOLE COPIANO IL PULSANTE DELLA HOME (`prestige-btn-outline`), letto
 * dalla home e non inventato:
 *
 *     oro          rgb(201, 162, 39)
 *     bordo        1px, raggio 50px
 *     riempimento  uno ::before che entra da sinistra
 *     tempo        .55s cubic-bezier(.65, 0, .35, 1)
 *
 * Il riempimento va nei due sensi: scendendo di quantita' la pillola si svuota
 * dalla parte da cui era entrata. Non e' un vezzo, e' la stessa informazione
 * letta al contrario.
 * ========================================================================== */

:root {
	--abm-sq-oro: rgb(201, 162, 39);
	--abm-sq-oro-tenue: rgba(201, 162, 39, .35);
	--abm-sq-nero: #0a0a0a;
}

.abm-sq {
	margin: 16px 0 20px;
	padding: 16px 18px;
	border: 1px solid rgba(201, 162, 39, .22);
	border-radius: 8px;
	background: rgba(201, 162, 39, .04);
}

.abm-sq-titolo {
	font-family: "Playfair Display", Georgia, serif;
	font-size: 16px;
	letter-spacing: .3px;

	/* Bianco, perche' il fondo e' nero. */
	color: #fff;
	margin-bottom: 12px;
}

.abm-sq-scala {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* LA PILLOLA. Fuori e' il pulsante della home in piccolo: bordo oro, fondo
   trasparente, testo oro, lettere distanziate. */
.abm-sq-passo {
	position: relative;
	overflow: hidden;
	flex: 1 1 0;
	min-width: 96px;
	padding: 10px 14px;
	border: 1px solid var(--abm-sq-oro);
	border-radius: 50px;
	background: transparent;
	text-align: center;
	line-height: 1.35;
	transition: color .45s;
}

/* IL RIEMPIMENTO, che entra da sinistra. Sta sotto al testo e non lo tocca. */
.abm-sq-passo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--abm-sq-oro);
	transform: translateX(-100%);
	transition: transform .55s cubic-bezier(.65, 0, .35, 1);
	z-index: 0;
}

.abm-sq-passo > * {
	position: relative;
	z-index: 1;
}

.abm-sq-pezzi {
	display: block;
	font-size: 11px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
	transition: color .45s;
}

.abm-sq-pct {
	display: block;
	font-family: "Playfair Display", Georgia, serif;
	font-size: 19px;
	letter-spacing: .5px;
	color: var(--abm-sq-oro);
	transition: color .45s;
}

/* RAGGIUNTA: l'oro entra e il testo diventa nero.
   Mai oro su oro: sfondo e testo si dichiarano tutti e due. */
.abm-sq-passo.abm-sq-pieno::before {
	transform: translateX(0);
}

.abm-sq-passo.abm-sq-pieno .abm-sq-pct,
.abm-sq-passo.abm-sq-pieno .abm-sq-pezzi {
	color: var(--abm-sq-nero);
}

.abm-sq-passo.abm-sq-pieno .abm-sq-pezzi {
	color: rgba(10, 10, 10, .72);
}

/* Lo scaglione in cui sei adesso: un alone appena percettibile, per
   distinguerlo da quelli che hai gia' passato senza gridare. */
.abm-sq-passo.abm-sq-attivo {
	box-shadow: 0 0 0 1px var(--abm-sq-oro-tenue), 0 3px 18px rgba(201, 162, 39, .3);
}

.abm-sq-messaggio {
	margin-top: 12px;
	min-height: 19px;
	font-size: 13.5px;
	line-height: 1.55;
	letter-spacing: .1px;
	color: rgba(255, 255, 255, .68);
}

.abm-sq-messaggio strong {
	color: var(--abm-sq-oro);
	font-weight: 600;
}

/* Chi ha chiesto di non vedere animazioni non le vede: l'oro resta, il
   movimento sparisce. */
@media (prefers-reduced-motion: reduce) {
	.abm-sq-passo,
	.abm-sq-passo::before,
	.abm-sq-pct,
	.abm-sq-pezzi {
		transition: none;
	}
}

@media (max-width: 480px) {
	.abm-sq { padding: 13px; }
	.abm-sq-passo { min-width: 0; padding: 9px 6px; }
	.abm-sq-pct { font-size: 17px; }
	.abm-sq-pezzi { font-size: 10px; letter-spacing: 1px; }
	.abm-sq-messaggio { font-size: 13px; }
}

/* =============================================================================
 * LA RIGA NEL CARRELLO E NEL CASSETTO
 * -----------------------------------------------------------------------------
 * Nel carrello a blocchi la nota e' testo, perche' quella e' la sola cosa che
 * il filtro ufficiale di WooCommerce lascia passare, ed e' meglio del markup
 * infilato a forza dentro React. Nel cassetto invece l'HTML e' statico e si
 * puo' mettere la pillola vera.
 * ========================================================================== */

.abm-sq-nota {
	display: inline-block;
	margin-top: 3px;
	padding: 1px 9px;
	border: 1px solid var(--abm-sq-oro);
	border-radius: 50px;
	color: var(--abm-sq-oro);
	background: transparent;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .6px;
	white-space: nowrap;
	line-height: 1.7;
}

/* DENTRO IL CASSETTO SERVE ALZARE LA VOCE, e chi batteva l'oro siamo noi.
 *
 * `shop-ui.css` porta una regola che dipinge di bianco tutto quello che sta
 * dentro ModernCart, e lo fa con l'asterisco e con !important:
 *
 *     [class*="moderncart"][class*="..."] * {
 *         color: #fff !important;
 *         border-color: rgba(255,255,255,.1) !important;
 *     }
 *
 * Nata per rendere scuro il riepilogo del cassetto, si mangia anche questa
 * pillola: dal vivo usciva bianca su bianco. Per batterla serve una specificita'
 * piu' alta E l'!important, perche' contro un !important la sola specificita'
 * non basta. Tre classi contro due, e si dichiara tutto: colore, bordo e fondo.
 */
[class*="moderncart"] .moderncart-cart-item-product .abm-sq-nota {
	/* LA PILLOLA ERA TAGLIATA IN BASSO. Nel cassetto la riga e' stretta e il
	   bordo inferiore finiva sotto il riquadro: serve aria attorno, non solo
	   dentro. Da qui il margine sopra e sotto, l'interlinea piu' alta e la
	   riga propria invece di stare in coda al nome. */
	display: block;
	width: fit-content;
	/* La riga e' un flex in colonna: senza questo la pillola si stirerebbe
	   per tutta la larghezza. */
	align-self: flex-start;
	margin: 2px 0 6px;
	padding: 2px 10px;
	font-size: 11px;
	line-height: 1.75;
	letter-spacing: .5px;
	color: rgb(201, 162, 39) !important;
	border-color: rgb(201, 162, 39) !important;
	background: transparent !important;

	/* Se il contenitore taglia, la pillola resta sopra invece che sotto. */
	position: relative;
	z-index: 1;
}

/* Il carrello a blocchi sta su fondo chiaro: l'oro tenue non si leggerebbe. */
.wc-block-cart .abm-sq-nota,
.wp-block-woocommerce-cart .abm-sq-nota {
	color: #8a6d00;
	border-color: rgba(201, 162, 39, .75);
	background: #fffdf6;
}

/* ==========================================================================
   LA RIGA DEL RISPARMIO TOTALE, nel riquadro dei conti del cassetto
   --------------------------------------------------------------------------
   Due cose che questa riga deve sapere del posto in cui va a stare, e nessuna
   delle due si indovina leggendo il markup.

   1. IL RIQUADRO E' UN FLEX RIORDINATO A MANO. In `shop-ui.css` le quattro
      voci del plugin hanno un `order` esplicito da 1 a 4, perche' l'ordine in
      cui le stampa lui non e' quello che si legge meglio. Una riga aggiunta
      senza `order` vale zero, e zero viene PRIMA di uno: senza questa
      dichiarazione il risparmio comparirebbe in cima, sopra il totale
      parziale. Va in fondo, quindi cinque.

   2. LA REGOLA GENERALE DIPINGE DI BIANCO TUTTO QUELLO CHE STA QUI DENTRO:

          [class*="moderncart"][class*="line-items"] * { color: #fff !important }

      vale (0,2,0) e ha l'`!important`. E' la quarta volta che si mangia
      qualcosa di nostro (le pillole, il badge, la nota, adesso questa riga).
      Contro un `!important` la sola specificita' non basta e viceversa:
      servono tutte e due, quindi il selettore dell'oro pesa (0,4,0) e
      dichiara `!important` a sua volta.
   ========================================================================== */

#moderncart-slide-out .moderncart-cart-line-items .abm-sq-totale,
.moderncart-modal .moderncart-cart-line-items .abm-sq-totale {
	order: 5 !important;
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 12px !important;
	margin-top: 4px !important;
	padding-top: 8px !important;
	border-top: 1px solid rgba(255, 206, 83, .22) !important;
}

[class*="moderncart"] .moderncart-cart-line-items .abm-sq-totale .abm-sq-totale-etichetta,
[class*="moderncart"] .moderncart-cart-line-items .abm-sq-totale .abm-sq-totale-valore {
	color: #FFCE53 !important;
	background: transparent !important;
}

[class*="moderncart"] .moderncart-cart-line-items .abm-sq-totale .abm-sq-totale-etichetta {
	font-size: 13px;
	letter-spacing: .2px;
}

[class*="moderncart"] .moderncart-cart-line-items .abm-sq-totale .abm-sq-totale-valore {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

/* ==========================================================================
   IL "HAI RISPARMIATO" DI MODERNCART SI SPEGNE QUI, E NON A COLPI DI JAVASCRIPT
   --------------------------------------------------------------------------
   Lui quella frase la stampa sui prodotti in promozione di catalogo, e dice la
   distanza dal listino barrato: dal 21 agosto 2026 quel numero non lo
   raccontiamo piu' (v. l'intestazione di js/sconto-quantita-carrello.js). Al
   suo posto scriviamo il nostro, che conta solo gli sconti veri.

   LA PRIMA STESURA GLIELO RISCRIVEVA, e dal vivo perdeva sempre: lui rifa' il
   pannello dopo di noi, e su un nodo suo l'ultima parola ce l'ha lui. Misurato
   con una spia sul nodo: noi a 407 ms e 2933 ms, lui a 2062 ms e 3090 ms.

   Il CSS quella corsa non la corre: vale anche sull'HTML che lui deve ancora
   generare, quindi non c'e' nessun ordine da vincere. Si spegne il suo
   `<small>` dentro `.moderncart-price` e si lascia vivo il nostro, che ha una
   classe. E' l'unico `<small>` che lui mette li' dentro (e' il motivo per cui
   il nostro e' stato costruito uguale, il 21 agosto): se un giorno ce ne
   mettesse un altro per un'altra ragione, questa regola lo spegnerebbe, ed e'
   il punto da guardare per primo.
   ========================================================================== */
[class*="moderncart"] .moderncart-price > small:not(.abm-sq-risparmio) {
	display: none !important;
}

/* La nota "IVA escl." che stava qui accanto all'etichetta e' stata tolta il 21
   agosto 2026, insieme alla decisione di misurare il totale IVA INCLUSA: la
   riga sta sotto "Totale ordine", che e' ivato, quindi i due numeri parlano
   gia' la stessa lingua e la precisazione rispondeva a una domanda che li' non
   nasce. Le note di riga restano IVA esclusa, perche' stanno accanto a prezzi
   IVA esclusa, e quelle la domanda non la fanno nascere. */