/*
 * Casavola — percorso d'acquisto.
 *
 * Il segno che tiene insieme carrello, cassa e conferma è il punzone: il marchio inciso che
 * ogni pezzo d'oreficeria porta con sé. Numera i passaggi e firma il piano di rateizzazione.
 *
 * Nessun font nuovo: il sito carica già Nunito Sans, qui è usato diversamente — titoli
 * leggeri a corpo largo, etichette in maiuscoletto spaziato, come una punzonatura.
 */

:root {
	--casavola-oro: #d7b56d;
	--casavola-brunito: #a3843f;
	--casavola-inchiostro: #2e2e2e;
	--casavola-cenere: #8a8480;
	--casavola-carta: #ffffff;
	--casavola-fondo: #f7f4ef;
	--casavola-filo: rgba(46, 46, 46, .12);
	--casavola-filo-forte: rgba(46, 46, 46, .22);
	--casavola-oro-velo: rgba(215, 181, 109, .12);
}

/* ——— elementi comuni ——— */

.casavola-etichetta,
.casavola-carrello .casavola-etichetta {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--casavola-cenere);
	margin: 0 0 10px;
}

.casavola-punzone {
	width: 26px;
	height: 26px;
	flex: none;
	display: grid;
	place-items: center;
	border: 1px solid var(--casavola-filo-forte);
	transform: rotate(45deg);
	background: var(--casavola-carta);
}

.casavola-punzone > span {
	transform: rotate(-45deg);
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--casavola-cenere);
	line-height: 1;
}

.casavola-punzone.fatto { background: var(--casavola-oro); border-color: var(--casavola-oro); }
.casavola-punzone.fatto > span { color: var(--casavola-inchiostro); }
.casavola-punzone.ora { border-color: var(--casavola-oro); background: var(--casavola-oro-velo); }
.casavola-punzone.ora > span { color: var(--casavola-inchiostro); }

.casavola-bottone,
.woocommerce .casavola-bottone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 24px;
	border: 1px solid var(--casavola-oro);
	border-radius: 0;
	background: var(--casavola-oro);
	color: var(--casavola-inchiostro);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.casavola-bottone:hover { background: var(--casavola-brunito); border-color: var(--casavola-brunito); color: #fff; }
/* Il tema colora ogni .button: per i bottoni secondari serve vincere quella regola. */
.casavola-bottone.vuoto,
.woocommerce .casavola-bottone.vuoto,
.woocommerce button.button.casavola-bottone.vuoto {
	background: transparent !important;
	color: var(--casavola-inchiostro) !important;
	border-color: var(--casavola-filo-forte) !important;
}

.casavola-bottone.vuoto:hover,
.woocommerce button.button.casavola-bottone.vuoto:hover {
	background: transparent !important;
	border-color: var(--casavola-inchiostro) !important;
	color: var(--casavola-inchiostro) !important;
}

/* Stessa altezza per i due bottoni del carrello. */
.casavola-carrello-azioni .casavola-bottone { min-height: 47px; padding: 13px 22px; }
.casavola-bottone:focus-visible { outline: 2px solid var(--casavola-brunito); outline-offset: 3px; }

/* ——— riga rate AppPago: scheda prodotto e carrello ——— */

.casavola-rate-riga {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 4px;
	margin: 8px 0 4px;
	font-size: 13px;
	line-height: 1.45;
	max-width: 100%;
}

.casavola-rate-riga * { font-size: 13px !important; line-height: 1.45 !important; }

.casavola-rate-riga > img {
	width: 55px !important;
	max-width: none;
	height: auto !important;
	object-fit: contain;
	margin: 0 16px 0 0 !important;
}

.casavola-rate-carrello {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--casavola-filo);
	color: var(--casavola-cenere);
}

.casavola-rate-carrello strong { color: var(--casavola-inchiostro); font-variant-numeric: tabular-nums; }

/* ——— carrello ——— */

.casavola-carrello {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr);
	gap: 40px;
	align-items: start;
}

.casavola-elenco-pezzi { border-top: 1px solid var(--casavola-filo); }

.casavola-pezzo {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 18px 0;
	border-bottom: 1px solid var(--casavola-filo);
}

.casavola-pezzo-foto img {
	width: 84px;
	height: 84px;
	object-fit: cover;
	display: block;
	border: 1px solid var(--casavola-filo);
}

.casavola-pezzo-nome {
	font-size: 16px;
	line-height: 1.35;
	margin: 0 0 8px;
}

.casavola-pezzo-nome a { color: inherit; text-decoration: none; }
.casavola-pezzo-nome a:hover { text-decoration: underline; }

.casavola-pezzo-azioni { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.casavola-pezzo-azioni .quantity input[type="number"] {
	width: 72px;
	padding: 8px;
	text-align: center;
	border: 1px solid var(--casavola-filo-forte);
	border-radius: 0;
	background: var(--casavola-carta);
}

.casavola-togli,
.casavola-carrello a.remove {
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--casavola-cenere) !important;
	background: none !important;
	width: auto !important;
	height: auto !important;
	line-height: 1.4 !important;
	border-radius: 0;
	text-decoration: none;
}

.casavola-togli:hover { color: var(--casavola-inchiostro) !important; text-decoration: underline; }

.casavola-pezzo-prezzo {
	font-size: 16px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}

.casavola-carrello-azioni {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	padding-top: 22px;
}

.casavola-coupon { flex: 1 1 280px; }
.casavola-coupon-riga { display: flex; gap: 8px; }

.casavola-coupon-riga input[type="text"] {
	flex: 1;
	padding: 12px;
	border: 1px solid var(--casavola-filo-forte);
	border-radius: 0;
	background: var(--casavola-carta);
	font-size: 15px;
	text-transform: uppercase;
}

.casavola-coupon-riga input[type="text"]::placeholder { text-transform: none; }

/* Il codice sconto va letto in maiuscolo, come sta scritto sul volantino. */
.casavola-carrello .cart-discount th,
.woocommerce-checkout .cart-discount th,
.casavola-carrello .woocommerce-remove-coupon { text-transform: uppercase; }

.casavola-carrello-riepilogo .cart_totals,
.woocommerce .casavola-carrello-riepilogo .cart_totals {
	background: var(--casavola-fondo);
	border: 1px solid var(--casavola-filo);
	padding: 24px;
	width: 100%;
	float: none;
}

.casavola-carrello-riepilogo .cart_totals h2 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--casavola-cenere);
	margin: 0 0 14px;
}

.casavola-carrello-riepilogo table.shop_table { border: 0; margin: 0; }
.casavola-carrello-riepilogo table.shop_table th,
.casavola-carrello-riepilogo table.shop_table td {
	border: 0;
	padding: 7px 0;
	font-size: 14px;
	background: none;
}
.casavola-carrello-riepilogo table.shop_table td { text-align: right; font-variant-numeric: tabular-nums; }
.casavola-carrello-riepilogo .order-total th,
.casavola-carrello-riepilogo .order-total td {
	padding-top: 14px;
	border-top: 1px solid var(--casavola-filo);
	font-size: 19px;
	font-weight: 600;
}
.casavola-carrello-riepilogo .wc-proceed-to-checkout { padding: 18px 0 0; }
.casavola-carrello-riepilogo .wc-proceed-to-checkout .checkout-button {
	display: flex;
	width: 100%;
	border-radius: 0;
	background: var(--casavola-oro);
	border: 1px solid var(--casavola-oro);
	color: var(--casavola-inchiostro);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 15px 20px;
}
.casavola-carrello-riepilogo .wc-proceed-to-checkout .checkout-button:hover {
	background: var(--casavola-brunito);
	border-color: var(--casavola-brunito);
	color: #fff;
}

/* ——— cassa: barra dei passaggi ——— */

.casavola-passaggi {
	display: flex;
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.casavola-passaggio {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	position: relative;
	text-align: center;
	list-style: none;
}

/* Il punzone è un quadrato di 26px ruotato di 45 gradi: la sua diagonale sporge 18,4px dal
   centro. La linea di collegamento si ferma a 20px, così tocca il vertice invece di
   attraversare il rombo. */
.casavola-passaggio::before {
	content: "";
	position: absolute;
	top: 13px;
	right: calc(50% + 20px);
	width: calc(100% - 40px);
	height: 1px;
	background: var(--casavola-filo);
}

.casavola-passaggio:first-child::before { display: none; }
.casavola-passaggio.superato::before,
.casavola-passaggio.attuale::before { background: var(--casavola-oro); }

.casavola-passaggio button {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font: inherit;
}

.casavola-passaggio button:focus-visible { outline: 2px solid var(--casavola-brunito); outline-offset: 4px; }

.casavola-voce {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--casavola-cenere);
}

.casavola-passaggio.attuale .casavola-voce { color: var(--casavola-inchiostro); font-weight: 700; }
.casavola-passaggio.superato .casavola-voce { color: var(--casavola-inchiostro); }

/* ——— cassa: i tre passaggi ——— */

/* Passaggio 1: dati del cliente e scelta della spedizione, che vive dentro il riepilogo.
   Passaggio 2: pagamento, con il riepilogo ancora sotto gli occhi. */
.casavola-passo-1 #payment { display: none !important; }
.casavola-passo-1 #place_order { display: none !important; }
.casavola-passo-2 #customer_details { display: none !important; }

.casavola-navigazione {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	clear: both;
	float: none;
	margin: 22px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--casavola-filo);
}

.casavola-avviso-passo {
	margin: 12px 0 0;
	padding: 10px 12px;
	font-size: 13.5px;
	line-height: 1.45;
	background: rgba(200, 60, 60, .08);
	border-left: 3px solid #c83c3c;
	color: #7a1f1f;
}

/* ——— cassa: metodi di pagamento ——— */

.woocommerce-checkout ul.payment_methods {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce-checkout ul.payment_methods li {
	list-style: none;
	margin: 0 0 6px;
	padding: 0;
	background: var(--casavola-carta);
	border: 1px solid var(--casavola-filo);
	border-radius: 0;
	overflow: hidden;
	transition: border-color .18s ease, background-color .18s ease;
}

.woocommerce-checkout ul.payment_methods li:hover { border-color: var(--casavola-filo-forte); }
.woocommerce-checkout ul.payment_methods li:focus-within { box-shadow: 0 0 0 3px var(--casavola-oro-velo); }

.woocommerce-checkout ul.payment_methods li > input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.woocommerce-checkout ul.payment_methods li > label {
	display: flex;
	align-items: flex-start;
	gap: 28px;
	cursor: pointer;
	margin: 0;
	padding: 14px 18px;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 500;
}

/* Icone sempre in alto a destra: l'occhio le trova nello stesso punto su ogni riga. */
.woocommerce-checkout ul.payment_methods li > label img,
.woocommerce-checkout ul.payment_methods li > label .casavola-circuiti {
	order: 2;
	margin: 0 0 0 auto !important;
	align-self: flex-start;
	flex: none;
	height: 22px !important;
	width: auto !important;
	max-width: 120px;
	object-fit: contain;
	float: none !important;
	display: inline-flex !important;
}

.casavola-circuiti { display: inline-flex; gap: 4px; align-items: center; }
.casavola-circuiti img { margin: 0 !important; width: auto !important; max-width: none; object-fit: contain; }

.woocommerce-checkout ul.payment_methods li.casavola-scelto,
.woocommerce-checkout ul.payment_methods li:has(> input[type="radio"]:checked) {
	border-color: var(--casavola-oro);
	box-shadow: inset 0 0 0 1px var(--casavola-oro);
	background: var(--casavola-oro-velo);
}

.woocommerce-checkout ul.payment_methods li.casavola-scelto > label,
.woocommerce-checkout ul.payment_methods li:has(> input[type="radio"]:checked) > label { font-weight: 700; }

/* Il riquadro grigio con la freccina è di WooCommerce: qui la descrizione è testo. */
.woocommerce-checkout ul.payment_methods li .payment_box {
	margin: 0 !important;
	padding: 0 18px 14px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 14px;
	line-height: 1.55;
	color: var(--casavola-cenere);
}

.woocommerce-checkout ul.payment_methods li .payment_box::before,
.woocommerce-checkout ul.payment_methods li .payment_box::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
}

.woocommerce-checkout ul.payment_methods li .payment_box p { margin: 0 0 10px; }
.woocommerce-checkout ul.payment_methods li .payment_box p:last-child { margin-bottom: 0; }

.woocommerce-checkout ul.payment_methods li .payment_box input[type="text"] {
	width: 100%;
	max-width: 340px;
	padding: 11px 12px !important;
	font-size: 15px !important;
	line-height: 1.4;
	border: 1px solid var(--casavola-filo-forte) !important;
	border-radius: 0;
	background: var(--casavola-carta);
}

/* ——— cassa: piani AppPago ——— */

.woocommerce-checkout li.payment_method_apppago_gateway .payment_box { display: flex; flex-direction: column; }
.woocommerce-checkout li.payment_method_apppago_gateway .payment_box > p { order: 1; }
.woocommerce-checkout li.payment_method_apppago_gateway .payment_box > .form-row { order: 3; margin-bottom: 0 !important; }
.woocommerce-checkout li.payment_method_apppago_gateway .payment_box > .casavola-apppago-piani { order: 2; }
.woocommerce-checkout li.payment_method_apppago_gateway .payment_box > .clear { display: none; }

.woocommerce-checkout .casavola-apppago-piani {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px !important;
	padding: 0;
	border: 0;
	background: none;
}

.woocommerce-checkout .casavola-apppago-piani > label {
	flex: 0 0 100%;
	margin: 0 0 2px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--casavola-inchiostro);
}

.woocommerce-checkout .casavola-apppago-piano {
	margin: 0;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--casavola-filo-forte);
	background: var(--casavola-carta);
	transition: border-color .15s ease, background-color .15s ease;
}

.woocommerce-checkout .casavola-apppago-piano:hover { border-color: var(--casavola-inchiostro); }
.woocommerce-checkout .casavola-apppago-piano input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.woocommerce-checkout .casavola-apppago-piano label {
	margin: 0;
	padding: 6px 14px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--casavola-inchiostro);
	cursor: pointer;
	white-space: nowrap;
}

.woocommerce-checkout .casavola-apppago-piano:has(input[type="radio"]:checked) {
	border-color: var(--casavola-oro);
	background: var(--casavola-oro-velo);
	box-shadow: inset 0 0 0 1px var(--casavola-oro);
}

.woocommerce-checkout .casavola-apppago-avviso {
	flex: 0 0 100%;
	margin: 12px 0 0 !important;
	padding: 10px 12px !important;
	font-size: 13px;
	line-height: 1.45;
	text-align: left;
	list-style: none;
	background: var(--casavola-oro-velo);
	border: 0;
	border-left: 3px solid var(--casavola-oro);
	color: #4a3a12;
}

.woocommerce-checkout .casavola-apppago-avviso::before { display: none; }

/* Informativa e consenso: testo di servizio, non deve pesare quanto i metodi. */
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .woocommerce-privacy-policy-text p {
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: var(--casavola-cenere) !important;
	margin: 0 0 12px !important;
}

/* ——— conferma ordine ——— */

.casavola-conferma { display: flex; flex-direction: column; gap: 26px; }

.casavola-conferma-testa {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--casavola-filo);
}

.casavola-numero-ordine {
	font-size: clamp(26px, 4vw, 34px);
	font-weight: 300;
	margin: 0;
	font-variant-numeric: tabular-nums;
}

.casavola-nota { margin: 0; max-width: 68ch; color: var(--casavola-cenere); font-size: 15px; }

.casavola-dettagli-conferma {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 22px;
	margin: 0;
}

.casavola-dettaglio dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--casavola-cenere);
	margin: 0 0 5px;
}

.casavola-dettaglio dd { margin: 0; font-size: 15px; }

.casavola-piano-conferma {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--casavola-filo);
	background: var(--casavola-fondo);
	font-size: 14px;
}

.casavola-rata { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ——— telefono ——— */

@media (max-width: 860px) {
	.casavola-carrello { grid-template-columns: 1fr; gap: 28px; }

	.casavola-pezzo { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
	.casavola-pezzo-foto img { width: 64px; height: 64px; }
	.casavola-pezzo-prezzo { grid-column: 2; text-align: left; }

	.casavola-carrello-azioni { flex-direction: column; align-items: stretch; }
	.casavola-carrello-azioni .casavola-bottone { width: 100%; }

	.casavola-voce { font-size: 10px; letter-spacing: .1em; }
	.casavola-passaggi { margin-bottom: 24px; }

	.woocommerce-checkout ul.payment_methods li > label { gap: 14px; padding: 13px 14px; font-size: 14.5px; }
	.woocommerce-checkout ul.payment_methods li > label img,
	.woocommerce-checkout ul.payment_methods li > label .casavola-circuiti { height: 20px !important; max-width: 92px; }

	.casavola-navigazione { flex-direction: column-reverse; align-items: stretch; }
	.casavola-navigazione .casavola-bottone { width: 100%; }

	.casavola-dettagli-conferma { grid-template-columns: 1fr 1fr; gap: 16px; }
}

@media (max-width: 480px) {
	.casavola-passaggio .casavola-voce { display: none; }
	.casavola-passaggio.attuale .casavola-voce { display: block; }
	.woocommerce-checkout .casavola-apppago-piano label { padding: 8px 16px; }
	.casavola-dettagli-conferma { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.casavola-bottone,
	.woocommerce-checkout ul.payment_methods li,
	.woocommerce-checkout .casavola-apppago-piano { transition: none; }
}

/* ———————————————————————————————————————————————
   Riepilogo del carrello: ordine e respiro
   ———————————————————————————————————————————————
   Dentro .wc-proceed-to-checkout finiscono, uno dopo l'altro e senza margini fra loro, la
   riga rate AppPago, il messaggio PayPal, il pulsante d'ordine e i pulsanti PayPal: quattro
   blocchi di fornitori diversi che si toccavano. Un contenitore flex con gap li distanzia
   tutti allo stesso modo, qualunque cosa aggiungano i plugin in futuro.
   ——————————————————————————————————————————————— */

.casavola-carrello-riepilogo .wc-proceed-to-checkout {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 18px 0 0;
}

.casavola-carrello-riepilogo .wc-proceed-to-checkout > * { margin: 0 !important; }

.casavola-carrello-riepilogo .casavola-rate-carrello {
	margin: 0 !important;
	padding: 14px 0 0;
	border-top: 1px solid var(--casavola-filo);
}

/* Il widget HeyLight dentro la tabella dei totali: riga sua, non incollata al totale. */
.casavola-carrello-riepilogo .heyLight-inline,
.casavola-carrello-riepilogo [id^="heidipay-container"] {
	display: block;
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--casavola-filo);
}

/* I pulsanti dei fornitori restano nelle loro forme, ma su una riga pulita. */
.casavola-carrello-riepilogo .ppc-button-wrapper { padding-top: 2px; }

/* ———————————————————————————————————————————————
   Bottoni secondari: devono sembrare bottoni
   ———————————————————————————————————————————————
   Il tema azzera il bordo su ogni .button, quindi "Applica" e "Aggiorna carrello"
   restavano testo su fondo bianco. Qui il bordo torna, per intero.
   ——————————————————————————————————————————————— */

.woocommerce .casavola-carrello-azioni button.button.casavola-bottone.vuoto,
.casavola-bottone.vuoto {
	border-width: 1px !important;
	border-style: solid !important;
	border-color: var(--casavola-filo-forte) !important;
}

.casavola-carrello-azioni { align-items: flex-end; gap: 12px; }
.casavola-carrello-azioni .casavola-bottone { flex: 0 0 auto; }

/* "Togli" è un'azione minore: testo sottolineato, non un bottone. */
.casavola-carrello a.remove.casavola-togli {
	text-decoration: underline;
	text-underline-offset: 3px;
	border: 0 !important;
	padding: 0 !important;
	min-width: 0;
}

/* ———————————————————————————————————————————————
   Riga del pezzo: prezzo in colonna, allineato in alto
   ——————————————————————————————————————————————— */

.casavola-pezzo { align-items: start; }
.casavola-pezzo-foto { grid-row: span 1; }
.casavola-pezzo-prezzo { padding-top: 2px; }
.casavola-pezzo-dati { display: flex; flex-direction: column; gap: 10px; }

/* Il tema disegna un cerchio attorno al link "Togli" con uno pseudo-elemento
   (border-radius: 100%): con una parola al posto della crocetta diventa un'ellisse che
   taglia il testo. Qui sparisce. */
.casavola-carrello a.remove.casavola-togli::before,
.casavola-carrello a.remove.casavola-togli::after {
	content: none !important;
	display: none !important;
	border: 0 !important;
}

/* ═══════════════════════════════════════════════
   MODULO E RIEPILOGO DELLA CASSA
   ═══════════════════════════════════════════════
   Fin qui erano rimasti con lo stile del tema, mentre metodi di pagamento e barra dei
   passaggi seguivano il nostro: due linguaggi nella stessa pagina. Qui il modulo prende
   la stessa punteggiatura del resto — etichette in maiuscoletto spaziato, campi senza
   raggio, oro solo dove serve.
   ═══════════════════════════════════════════════ */

/* Titoli di sezione: "Dettagli di fatturazione", "Il tuo ordine" e simili. */
.woocommerce-checkout .woocommerce h3,
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3 {
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	color: var(--casavola-cenere) !important;
	margin: 0 0 16px !important;
	padding: 0 0 10px !important;
	border-bottom: 1px solid var(--casavola-filo);
	line-height: 1.4 !important;
}

/* Etichette dei campi. */
.woocommerce-checkout .woocommerce form .form-row label,
.woocommerce-checkout #customer_details label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--casavola-cenere);
	margin: 0 0 6px;
	line-height: 1.4;
}

.woocommerce-checkout #customer_details label .required {
	color: var(--casavola-brunito);
	text-decoration: none;
	border: 0;
}

/* Il consenso e le caselle restano frasi, non etichette. */
.woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--casavola-inchiostro) !important;
}

/* Campi. */
.woocommerce-checkout #customer_details input[type="text"],
.woocommerce-checkout #customer_details input[type="tel"],
.woocommerce-checkout #customer_details input[type="email"],
.woocommerce-checkout #customer_details textarea,
.woocommerce-checkout #customer_details .select2-selection,
.woocommerce-checkout #customer_details select {
	border: 1px solid var(--casavola-filo-forte) !important;
	border-radius: 0 !important;
	background: var(--casavola-carta);
	font-size: 15px;
	padding: 11px 12px !important;
	min-height: 45px;
	box-shadow: none !important;
	transition: border-color .15s ease;
}

.woocommerce-checkout #customer_details input:focus,
.woocommerce-checkout #customer_details textarea:focus,
.woocommerce-checkout #customer_details select:focus {
	border-color: var(--casavola-oro) !important;
	outline: 2px solid var(--casavola-oro-velo);
	outline-offset: 0;
}

.woocommerce-checkout #customer_details textarea { min-height: 96px; }

.woocommerce-checkout .woocommerce-invalid input,
.woocommerce-checkout .woocommerce-invalid .select2-selection {
	border-color: #c83c3c !important;
}

.woocommerce-checkout form .form-row { margin: 0 0 16px; padding: 0; }

/* Riepilogo dell'ordine: l'unico blocco con un fondo, perché è quello che il cliente
   ricontrolla tre volte prima di pagare. */
.woocommerce-checkout #order_review {
	background: var(--casavola-fondo);
	border: 1px solid var(--casavola-filo);
	padding: 24px;
}

.woocommerce-checkout #order_review table.shop_table {
	border: 0;
	margin: 0 0 4px;
	background: none;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--casavola-filo);
	padding: 10px 0;
	font-size: 14px;
	background: none;
	vertical-align: top;
}

.woocommerce-checkout #order_review table.shop_table thead th {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--casavola-cenere);
	padding-bottom: 8px;
}

.woocommerce-checkout #order_review table.shop_table td.product-total,
.woocommerce-checkout #order_review table.shop_table .cart-subtotal td,
.woocommerce-checkout #order_review table.shop_table .cart-discount td,
.woocommerce-checkout #order_review table.shop_table .woocommerce-shipping-totals td,
.woocommerce-checkout #order_review table.shop_table .order-total td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.woocommerce-checkout #order_review .order-total th,
.woocommerce-checkout #order_review .order-total td {
	border-bottom: 0;
	padding-top: 14px;
	font-size: 19px;
	font-weight: 600;
}

/* Il codice sconto si legge in maiuscolo, come sta scritto sul volantino. */
.woocommerce-checkout .cart-discount th,
.woocommerce-checkout .cart-discount .woocommerce-remove-coupon { text-transform: uppercase; }

/* Scelta della spedizione: voci spaziate, non un elenco puntato compresso. */
.woocommerce-checkout #shipping_method { margin: 0; padding: 0; list-style: none; }
.woocommerce-checkout #shipping_method li { margin: 0 0 6px; padding: 0; text-align: right; }
.woocommerce-checkout #shipping_method li:last-child { margin-bottom: 0; }
.woocommerce-checkout #shipping_method label {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--casavola-inchiostro) !important;
	display: inline !important;
}

/* Pulsante d'ordine. */
.woocommerce-checkout #place_order {
	width: 100%;
	border-radius: 0;
	background: var(--casavola-oro);
	border: 1px solid var(--casavola-oro);
	color: var(--casavola-inchiostro);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 16px 20px;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.woocommerce-checkout #place_order:hover {
	background: var(--casavola-brunito);
	border-color: var(--casavola-brunito);
	color: #fff;
}

/* Il richiamo al codice sconto: una riga, non un cartello. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-cart .woocommerce-form-coupon-toggle .woocommerce-info {
	background: none !important;
	border: 0 !important;
	border-top: 1px solid var(--casavola-filo) !important;
	border-bottom: 1px solid var(--casavola-filo) !important;
	padding: 12px 0 !important;
	margin: 0 0 24px !important;
	text-align: left !important;
	font-size: 13.5px !important;
	color: var(--casavola-cenere) !important;
	border-radius: 0 !important;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-cart .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; }

.woocommerce-checkout .checkout_coupon {
	border: 1px solid var(--casavola-filo) !important;
	border-radius: 0 !important;
	padding: 18px !important;
	margin: 0 0 24px !important;
	background: var(--casavola-carta);
}

.woocommerce-checkout .checkout_coupon input[type="text"] { text-transform: uppercase; }
.woocommerce-checkout .checkout_coupon input[type="text"]::placeholder { text-transform: none; }

/* Una riga sola, larga quanto la cassa. WooCommerce impagina questo modulo con le sue due
   mezze colonne float: dentro la colonna si stringevano, il campo restava un quadratino e
   il bottone spezzava "Applica codice promozionale" su due righe. Il flex le rimette in
   fila — campo elastico, bottone della sua misura e senza andare a capo. */
.woocommerce-checkout .checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	/* `!important` come il blocco qui sopra: qualcosa a monte impone a questo modulo una
	   larghezza di metà colonna, e senza forzatura il flex si impagina dentro 490px invece
	   dei 980 della cassa. Misurato sulla pagina vera. */
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
}

/* L'eventuale riga di spiegazione sopra i campi occupa la larghezza intera, non una colonna. */
.woocommerce-checkout .checkout_coupon > p:not(.form-row) {
	flex: 1 0 100%;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--casavola-cenere);
}

.woocommerce-checkout .checkout_coupon .form-row {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

.woocommerce-checkout .checkout_coupon .form-row-first { flex: 1 1 200px; }
.woocommerce-checkout .checkout_coupon .form-row-last { flex: 0 0 auto; }

.woocommerce-checkout .checkout_coupon #coupon_code {
	width: 100%;
	padding: 12px;
	border: 1px solid var(--casavola-filo-forte);
	border-radius: 0;
	background: var(--casavola-carta);
	font-size: 15px;
}

.woocommerce-checkout .checkout_coupon button[name="apply_coupon"] {
	width: auto;
	padding: 12px 22px;
	white-space: nowrap;
}

/* Il clearfix di WooCommerce serviva ai float: dentro il flex sarebbe una riga vuota. */
.woocommerce-checkout .checkout_coupon .clear { display: none; }

/* Sul telefono stretto campo e bottone non ci stanno affiancati: una riga per uno. */
@media (max-width: 480px) {
	.woocommerce-checkout .checkout_coupon .form-row-first,
	.woocommerce-checkout .checkout_coupon .form-row-last { flex: 1 0 100%; }
	.woocommerce-checkout .checkout_coupon button[name="apply_coupon"] { width: 100%; }
}

@media (max-width: 860px) {
	.woocommerce-checkout #order_review { padding: 18px; }
	.woocommerce-checkout .woocommerce h3,
	.woocommerce-checkout #order_review_heading { margin-bottom: 12px !important; }
}

/* ═══════════════════════════════════════════════
   PRECISIONE: le due colonne sulla stessa griglia
   ═══════════════════════════════════════════════
   "Il tuo ordine" sta fuori dal riquadro del riepilogo, che ha 24px di respiro interno:
   il titolo risultava rientrato di 24px rispetto al contenuto che annuncia. Qui prende
   lo stesso margine interno, così le due colonne condividono la stessa incolonnatura.
   E i due titoli ricevono la stessa altezza di riga: differivano di un pixel.
   ═══════════════════════════════════════════════ */

.woocommerce-checkout #order_review_heading {
	padding-left: 24px !important;
	padding-right: 24px !important;
}

.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
	min-height: 26px;
	line-height: 16px !important;
	display: block;
}

/* Il riquadro parte esattamente dove finisce il titolo, senza scalini. */
.woocommerce-checkout #order_review { margin-top: 0; }

@media (max-width: 860px) {
	.woocommerce-checkout #order_review_heading { padding-left: 18px !important; padding-right: 18px !important; }
}

/* La tabella del riepilogo nasce con border-spacing: il contenuto partiva 6px più a destra
   del titolo che lo annuncia. Con le celle a filo, titolo e righe condividono la stessa
   incolonnatura al pixel. */
.woocommerce-checkout #order_review table.shop_table,
.casavola-carrello-riepilogo table.shop_table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Il tema dichiara sul riepilogo padding 0 30px e un bordo sinistro di 2px, e vinceva sulle
   nostre misure: il contenuto finiva 6px più a destra del titolo. Qui il riquadro torna a
   24px di respiro con bordo da 1px, e il titolo prende esattamente 25px (bordo + respiro),
   così testo del titolo e prima colonna della tabella cadono sulla stessa verticale. */
.woocommerce-checkout #order_review {
	padding: 24px !important;
	border: 1px solid var(--casavola-filo) !important;
}

.woocommerce-checkout #order_review_heading {
	padding-left: 23px !important;
	padding-right: 23px !important;
}

@media (max-width: 860px) {
	.woocommerce-checkout #order_review { padding: 18px !important; }
	.woocommerce-checkout #order_review_heading { padding-left: 17px !important; padding-right: 17px !important; }
}

/* ═══════════════════════════════════════════════
   SPAZIO IN TESTA ALLE PAGINE D'ACQUISTO
   ═══════════════════════════════════════════════
   Il tema mette 60px di margine sul contenuto più 80 di respiro interno sull'articolo:
   140px di vuoto prima del titolo, su pagine dove il cliente vuole arrivare subito ai
   propri dati. Qui scendono a 48 in tutto, e solo su carrello, cassa e conferma.
   ═══════════════════════════════════════════════ */

.woocommerce-cart .content-area.primary,
.woocommerce-checkout .content-area.primary { margin-top: 24px !important; }

.woocommerce-cart .site-main > article,
.woocommerce-checkout .site-main > article { padding-top: 24px !important; }

.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header { margin-bottom: 20px; }

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title { margin-bottom: 0; }

@media (max-width: 860px) {
	.woocommerce-cart .content-area.primary,
	.woocommerce-checkout .content-area.primary { margin-top: 16px !important; }

	.woocommerce-cart .site-main > article,
	.woocommerce-checkout .site-main > article { padding-top: 16px !important; }
}

/* Il tema disegna una cornice attorno ai titoli del checkout: sotto "Il tuo ordine"
   compariva un riquadro vuoto. Resta solo la riga di base. */
.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3 {
	border-top: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-bottom: 1px solid var(--casavola-filo) !important;
	background: none !important;
	box-shadow: none !important;
}

/* ═══════════════════════════════════════════════
   LE AZIONI RESTANO A PORTATA
   ═══════════════════════════════════════════════
   Il modulo della cassa è lungo: con il pulsante in fondo alla pagina il cliente doveva
   scorrere per capire come proseguire. "Continua" e "Effettua ordine" restano ora incollati
   al bordo inferiore finché non raggiungono la loro posizione naturale.
   Nessun nodo spostato: solo position sticky, che non tocca il DOM e quindi non fa scattare
   gli aggiornamenti del checkout.
   ═══════════════════════════════════════════════ */

.casavola-navigazione {
	position: sticky;
	bottom: 0;
	z-index: 5;
	background: var(--casavola-carta);
	box-shadow: 0 -6px 18px rgba(46, 46, 46, .07);
	padding: 16px 0;
	margin-top: 22px;
}

.woocommerce-checkout #place_order {
	position: sticky;
	bottom: 12px;
	z-index: 4;
	box-shadow: 0 6px 18px rgba(46, 46, 46, .10);
}

/* Su telefono il pulsante occupa la riga intera, con il respiro del pollice. */
@media (max-width: 860px) {
	.casavola-navigazione {
		padding: 14px 16px;
		margin-left: -16px;
		margin-right: -16px;
		bottom: 0;
	}

	.woocommerce-checkout #place_order { bottom: 8px; }
}

/* Chi ha ridotto le animazioni non vuole nemmeno elementi che inseguono lo scorrimento. */
@media (prefers-reduced-motion: reduce) {
	.casavola-navigazione,
	.woocommerce-checkout #place_order { position: static; box-shadow: none; }
}

/* ═══════════════════════════════════════════════
   SEGNALAZIONE DEGLI ERRORI
   ═══════════════════════════════════════════════
   Il tema colora di rosa l'intera riga e le aggiunge una barra rossa: con più campi da
   correggere metà modulo diventa rosso, comprese le righe facoltative che stanno in mezzo.
   Qui l'errore lo porta il campo, non la riga: bordo rosso e un'etichetta che cambia colore.
   ═══════════════════════════════════════════════ */

.woocommerce-checkout .woocommerce-invalid,
.woocommerce-checkout .woocommerce-invalid-required-field {
	background: none !important;
	border-left: 0 !important;
	box-shadow: none !important;
	padding-left: 0 !important;
}

.woocommerce-checkout .woocommerce-invalid > label { color: #a52f2f !important; }

.woocommerce-checkout .woocommerce-invalid input[type="text"],
.woocommerce-checkout .woocommerce-invalid input[type="tel"],
.woocommerce-checkout .woocommerce-invalid input[type="email"],
.woocommerce-checkout .woocommerce-invalid textarea,
.woocommerce-checkout .woocommerce-invalid .select2-selection {
	border-color: #a52f2f !important;
	box-shadow: inset 0 0 0 1px rgba(165, 47, 47, .35) !important;
}

/* Nessuna marcatura sulle righe facoltative, qualunque cosa faccia il tema. */
.woocommerce-checkout .form-row:not(.validate-required) {
	background: none !important;
	border-left: 0 !important;
	box-shadow: none !important;
}

.woocommerce-checkout .form-row:not(.validate-required) > label { color: var(--casavola-cenere) !important; }

/* ═══════════════════════════════════════════════
   NIENTE OMBRE, PULSANTI A TUTTA LARGHEZZA
   ═══════════════════════════════════════════════
   Le ombre dei pulsanti fissi sbordavano ai lati e sporcavano il bordo oro. Al loro posto
   una linea netta, che è anche più coerente con il resto del percorso: qui non ci sono
   superfici sollevate, solo fili.
   ═══════════════════════════════════════════════ */

.casavola-navigazione {
	box-shadow: none !important;
	border-top: 1px solid var(--casavola-filo);
}

.woocommerce-checkout #place_order {
	box-shadow: none !important;
	width: 100% !important;
	display: block;
}

.casavola-carrello-riepilogo .wc-proceed-to-checkout .checkout-button {
	box-shadow: none !important;
	width: 100%;
}

/* Al secondo passaggio resta solo "Indietro": occupa la riga intera, come il pulsante
   d'ordine che ha accanto nel riepilogo. */
.casavola-passo-2 .casavola-navigazione .casavola-indietro { width: 100%; }

@media (max-width: 860px) {
	.casavola-navigazione .casavola-bottone { width: 100%; }
}

/* ═══════════════════════════════════════════════
   PASSAGGIO DEL PAGAMENTO: TUTTA LA LARGHEZZA
   ═══════════════════════════════════════════════
   Al secondo passaggio i dati del cliente sono nascosti e la colonna sinistra resta vuota,
   mentre metodi di pagamento e riepilogo si stringono in mezza pagina. Qui il riquadro
   occupa la larghezza intera e dispone le due cose affiancate: a sinistra cosa si compra,
   a destra come lo si paga.
   ═══════════════════════════════════════════════ */

.casavola-passo-2 #order_review_heading,
.casavola-passo-2 #order_review {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
}

@media (min-width: 861px) {
	.casavola-passo-2 #order_review {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: 36px;
		align-items: start;
	}

	.casavola-passo-2 #order_review > table.shop_table { grid-column: 1; margin: 0; }
	.casavola-passo-2 #order_review > .woocommerce-checkout-payment { grid-column: 2; }
	.casavola-passo-2 #order_review > .ppc-button-wrapper { grid-column: 2; }
	.casavola-passo-2 #order_review > script { display: none; }

	/* La colonna del pagamento porta la sua intestazione, come la tabella ha la propria. */
	.casavola-passo-2 #order_review > .woocommerce-checkout-payment::before {
		content: "Metodo di pagamento";
		display: block;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: var(--casavola-cenere);
		padding-bottom: 8px;
		margin-bottom: 14px;
		border-bottom: 1px solid var(--casavola-filo);
	}
}

/* L'attributo hidden vale display:none, ma i nostri pulsanti dichiarano inline-flex e
   vincevano: "Vai al pagamento" restava in pagina anche quando il passaggio era finito. */
.casavola-bottone[hidden],
.casavola-navigazione button[hidden] { display: none !important; }

/* La barra fissa copriva l'ultima parte del modulo: qui sotto resta lo spazio che occupa. */
.woocommerce-checkout form.checkout { padding-bottom: 12px; }
.woocommerce-checkout #order_review { margin-bottom: 8px; }

/* I piani sono pulsanti, non etichette: la regola del maiuscoletto spaziato vale per i nomi
   dei campi, non per il testo che si clicca. */
.woocommerce-checkout .casavola-apppago-piano label {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 14px !important;
	color: var(--casavola-inchiostro) !important;
}

/* ═══════════════════════════════════════════════
   LE TRE RIGHE RATEALI SULLA SCHEDA PRODOTTO
   ═══════════════════════════════════════════════
   HeyLight, PayPal e AppPago arrivano da tre fornitori diversi e ognuno porta le proprie
   misure: il marchio AppPago finiva su una riga e il testo sotto, e i tre testi partivano da
   tre punti diversi. Qui il marchio occupa una colonna fissa di 74px, la stessa dove HeyLight
   fa partire il proprio testo, e la riga non va mai a capo.
   ═══════════════════════════════════════════════ */

.casavola-rate-riga {
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 0 !important;
	margin: 10px 0 !important;
	min-height: 26px;
}

.casavola-rate-riga > img {
	flex: 0 0 74px;
	width: 55px !important;
	max-width: 55px !important;
	height: auto !important;
	object-fit: contain;
	margin: 0 !important;
}

.casavola-rate-riga > div,
.casavola-rate-riga > span {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 4px;
}

/* Stesso ritmo verticale per i widget degli altri due fornitori. */
.single-product .heyLight-inline,
.single-product [id^="heidipay-container"],
.single-product .casavola-rate-paypal {
	margin: 10px 0 !important;
	min-height: 26px;
	display: flex;
	align-items: center;
}

/* Le righe rateali parlano con la stessa voce di HeyLight, che è quella già presente sulla
   scheda: 11px, interlinea 20, grigio #666, peso normale. Non importiamo il loro font
   proprietario — è un marchio di terzi e una dipendenza esterna in più — ma ne adottiamo
   le misure, che è ciò che l'occhio legge come "stesso carattere".
   PayPal resta fuori: il suo messaggio è dentro un iframe servito da loro. */
.casavola-rate-riga,
.casavola-rate-riga * {
	font-size: 11px !important;
	line-height: 20px !important;
	font-weight: 400 !important;
	color: #666 !important;
	letter-spacing: normal !important;
}

.casavola-rate-riga > img { height: 20px !important; width: auto !important; max-width: 60px !important; }

/* Il testo deve partire a 74px dal bordo, dove parte quello di HeyLight: il marchio misura
   55px e i 19 di distacco completano la colonna. (Il max-width precedente accorciava la
   colonna a 60 e disallineava le righe di 14px.) */
.casavola-rate-riga > img {
	flex: 0 0 auto;
	width: 55px !important;
	max-width: 55px !important;
	margin: 0 19px 0 0 !important;
}

/* ═══════════════════════════════════════════════
   PREZZO E RATEALI: UNA COLONNA ALLINEATA
   ═══════════════════════════════════════════════
   Affiancare PayPal e AppPago non funziona: il messaggio PayPal vive in un iframe largo
   300px fissi con dentro un testo più corto, quindi fra i due restava un vuoto che non si
   può chiudere da fuori. Meglio una colonna sola, con i tre marchi incolonnati e le
   distanze verticali ridotte: si legge come una sequenza e non allunga la pagina.
   ═══════════════════════════════════════════════ */

.single-product .elementor-widget-woocommerce-product-price .elementor-widget-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	/* Elementor impone qui `margin-bottom: -37px`: il blocco del prezzo risultava alto 76px
	   con dentro 113px di contenuto, e le righe rateali sbordavano sotto il proprio widget
	   finendo sopra disponibilità e risparmio. Stesso trucco del margine negativo già visto
	   sulla descrizione breve. Misurato in pagina, non dedotto. */
	margin-bottom: 12px !important;
}

.single-product .elementor-widget-woocommerce-product-price .elementor-widget-container > * {
	margin: 0 !important;
	max-width: 100%;
}

.single-product .elementor-widget-woocommerce-product-price .elementor-widget-container > p.price {
	margin-bottom: 4px !important;
}

.single-product .elementor-widget-woocommerce-product-price .elementor-widget-container > script { display: none; }

/* Il valore della spedizione incolonnato a destra come tutti gli altri importi del
   riepilogo: è la stessa colonna, e allinearlo altrove spezzava la lettura. */
.woocommerce-checkout #order_review .woocommerce-shipping-totals td,
.woocommerce-checkout #order_review .woocommerce-shipping-totals td *,
.casavola-carrello-riepilogo .woocommerce-shipping-totals td,
.casavola-carrello-riepilogo .woocommerce-shipping-totals td * {
	text-align: right !important;
}

/* Le righe rateali dentro il riepilogo della cassa, sotto il totale. */
.casavola-riga-rateale td {
	padding-top: 14px !important;
	border-bottom: 0 !important;
}

.casavola-rate-riepilogo { margin: 0 !important; }

/* Il riepilogo perde la campitura beige e resta definito dal solo bordo: sul resto del
   percorso non ci sono superfici piene, e quella macchia era l'unica eccezione. */
.woocommerce-checkout #order_review,
.casavola-carrello-riepilogo .cart_totals,
.woocommerce .casavola-carrello-riepilogo .cart_totals {
	background: var(--casavola-carta) !important;
}

/* Un po' di respiro fra una scheda di pagamento e l'altra: attaccate sembravano una lista
   sola invece di scelte distinte. */
.woocommerce-checkout ul.payment_methods li { margin: 0 0 10px !important; }
.woocommerce-checkout ul.payment_methods li:last-child { margin-bottom: 0 !important; }

/* Il testo del chip ereditava il margine inferiore delle etichette dei campi (0 0 6px) e
   restava alto di 6px dentro il suo bordo: 1px sopra, 7 sotto. Azzerato, torna centrato. */
.woocommerce-checkout .casavola-apppago-piano label {
	margin: 0 !important;
	padding: 8px 16px !important;
	display: block;
}

.woocommerce-checkout .casavola-apppago-piano { align-items: stretch; }

/* "Spedire a un indirizzo diverso" stava incollato al campo e-mail: è l'inizio di una
   sezione nuova, non la coda di quella sopra. */
.woocommerce-checkout .woocommerce-shipping-fields {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--casavola-filo);
}

.woocommerce-checkout .woocommerce-shipping-fields h3 { margin-bottom: 0 !important; border-bottom: 0 !important; padding-bottom: 0 !important; }
.woocommerce-checkout .woocommerce-shipping-fields h3 label { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.woocommerce-checkout .woocommerce-additional-fields { margin-top: 22px; }

/* Il punzone del carrello è un collegamento: deve sembrarlo. */
.casavola-passaggio a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}

.casavola-passaggio a:hover .casavola-voce { text-decoration: underline; }
.casavola-passaggio a:focus-visible { outline: 2px solid var(--casavola-brunito); outline-offset: 4px; }

/* Indietro a sinistra, avanti a destra: al secondo passaggio Indietro non occupa più
   tutta la riga, perché adesso è sempre in coppia con qualcosa. */
.casavola-passo-2 .casavola-navigazione .casavola-indietro { width: auto; }
.casavola-navigazione .casavola-indietro { margin-right: auto; }
.casavola-navigazione .casavola-avanti { margin-left: auto; }

@media (max-width: 860px) {
	.casavola-navigazione { flex-direction: row; gap: 10px; }
	.casavola-navigazione .casavola-bottone { width: auto; flex: 1 1 0; }
}

/* ═══════════════════════════════════════════════
   DISPONIBILITÀ COME CHIP
   ═══════════════════════════════════════════════
   Tre stati, tre colori, tutti smorzati: su una scheda di gioielleria un verde acceso
   griderebbe più del prezzo. Il chip porta lo stato, l'etichetta "Disponibilità:" sparisce
   perché la parola dentro il chip dice già tutto.
   ═══════════════════════════════════════════════ */

/* `p.stock` a volte CONTIENE il chip (con Astra: `.ast-stock-detail > span.stock`) e a
   volte È il chip — succede su "Disponibile su ordinazione" e su "Esaurito". Azzerare il
   respiro in entrambi i casi lasciava il testo attaccato ai bordi della pillola. Il reset
   vale solo quando dentro c'è davvero un chip da contenere. */
.single-product .ast-stock-detail,
.single-product p.stock:has(.stock) {
	margin: 14px 0 !important;
	padding: 0;
}

.single-product .ast-stock-avail { display: none; }

.single-product .stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: .01em;
}

/* Niente pallino: il colore del chip basta a dire lo stato. */
.single-product .stock::before { content: none; }

.single-product .stock.in-stock {
	background: rgba(76, 125, 86, .12);
	color: #3f6b48 !important;
}

.single-product .stock.available-on-backorder {
	background: rgba(184, 134, 58, .14);
	color: #8a5f18 !important;
}

.single-product .stock.out-of-stock {
	background: rgba(165, 47, 47, .10);
	color: #8c2f2f !important;
}

/* ═══════════════════════════════════════════════
   RIGA UNICA: PAYPAL E APPPAGO
   ═══════════════════════════════════════════════
   HeyLight tiene il proprio widget, con la rata calcolata e il link alle condizioni.
   Sotto, PayPal e AppPago stanno su una riga sola: dichiarano solo una durata, e
   incolonnarli uno sotto l'altro allungava la scheda senza aggiungere niente.
   ═══════════════════════════════════════════════ */

.casavola-rateali {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	/* Margine negativo: il widget HeyLight è alto 43px per una riga di testo e porta con sé
	   dello spazio interno che dall'esterno non si toglie. Questi 14px lo recuperano quasi
	   tutto, lasciando le due righe vicine ma non a contatto. */
	margin: -14px 0 0;
	font-size: 12.5px;
	line-height: 20px;
	color: #666;
}

/* La riga parte dal bordo, incolonnata con il badge HeyLight sopra: marchio sotto marchio. */
.casavola-rateali { padding-left: 0; }

/* Allineamento sulla linea di base, non sul centro: i due marchi hanno la parte scritta
   appoggiata in basso dentro l'immagine, e centrandoli il testo sembrava più alto. */
.casavola-rateale-voce { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }

.casavola-rateale-voce img {
	align-self: baseline;
	height: 18px !important;
	width: auto !important;
	max-width: 54px;
	object-fit: contain;
	margin: 0 !important;
	flex: none;
}

.casavola-rateale-sep { color: var(--casavola-filo-forte); }

/* Il messaggio PayPal a tutta riga non serve più: la sua informazione è nella riga unica. */
.single-product .casavola-rate-paypal { display: none !important; }

@media (max-width: 620px) {
	.casavola-rateale-sep { display: none; }
	.casavola-rateale-voce { flex: 0 0 100%; }
}

/* Le due voci come una sequenza, non due blocchi: distanze uguali fra marchio e testo e
   fra una voce e l'altra, separatore leggibile. */
.casavola-rateali { gap: 4px 10px; }
.casavola-rateale-voce { gap: 8px; }
.casavola-rateale-sep { color: rgba(46,46,46,.35); font-weight: 700; }

/* ═══════════════════════════════════════════════
   SCHEDA PRODOTTO: LA COLONNA D'ACQUISTO
   ═══════════════════════════════════════════════
   Righe rateali e pillola "Disponibile" restano come sono: vanno già bene così.
   Qui cambia solo l'ordine di lettura — prezzo, gesto, rassicurazione — e il peso
   relativo delle parti.
   ═══════════════════════════════════════════════ */

/* Il prezzo scontato è il fatto principale della pagina; il listino è un riferimento,
   e come tale va sopra, piccolo. Sulla stessa riga avevano quasi lo stesso peso. */
/* Il blocco del prezzo è una griglia di due colonne e due righe:

       € 931,00      € 980,00
       IVA INCLUSA

   Il prezzo da pagare apre la riga tutto a sinistra ed è il primo numero che si legge; il
   listino gli sta a destra, barrato, abbastanza grande da leggersi ma non da competere;
   "IVA inclusa" scende sotto in maiuscoletto spaziato, dove fa la didascalia che è, invece
   di stare in coda al prezzo come se ne facesse parte.

   Il widget HeyLight vive dentro questo stesso paragrafo: prende la riga intera sotto,
   altrimenti la griglia lo infilerebbe in una cella. */
.single-product p.price {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: baseline;
	column-gap: 14px;
	row-gap: 2px;
}

.single-product p.price ins {
	grid-column: 1;
	grid-row: 1;
	background: none;
	text-decoration: none;
	font-size: 32px;
	font-weight: 600 !important;
	letter-spacing: -.02em;
	line-height: 1.1;
}

/* Il listino barrato è il termine di paragone: se non si legge, lo sconto non si capisce.
   Segnalato dal negozio su un pezzo da 1.300 € barrati contro 871. Cresce di corpo e basta:
   il colore resta quello di prima, perché deve restare un riferimento e non competere col
   prezzo da pagare. */
.single-product p.price del {
	display: block !important;
	grid-column: 2;
	grid-row: 1;
	margin: 0;
	font-size: 23px;
	color: var(--casavola-cenere);
	opacity: 1;
}

.single-product p.price small.woocommerce-price-suffix {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--casavola-cenere);
}

.single-product p.price [id^="heidipay-container"],
.single-product p.price .heyLight-inline {
	grid-column: 1 / -1;
	margin-top: 6px;
}

/* Le voci nascoste dei lettori di schermo non devono occupare una cella della griglia. */
.single-product p.price .screen-reader-text { display: none; }

/* Telefono: prezzo e listino su una riga sola non ci stanno più.
   Misurato il 2026-09-26 con le font vere della scheda: su un prezzo a cinque cifre
   (€ 12.345,00 barrato € 15.999,00) la riga chiede 318px fra 32px di prezzo, 23px di
   listino e 14px di gap — più della larghezza utile di un iPhone SE o mini. I due corpi
   scendono insieme, così il rapporto fra i due numeri resta quello di prima. */
@media (max-width: 480px) {
	.single-product p.price { grid-template-columns: auto 1fr; column-gap: 10px; }
	.single-product p.price ins { font-size: 28px; }
	.single-product p.price del { font-size: 19px; }
}

/* Il risparmio in euro: una cifra che si riconosce, non un calcolo da fare.
   La targhetta usa l'oro del punzone, lo stesso segno di carrello e cassa. */
/* L'aria sopra sta sulla riga, non sulla targhetta: il widget HeyLight qui sopra ha altezza
   compressa (line-height 1.25, padding e min-height azzerati) e senza quel margine la
   targhetta gli finiva addosso — il bordo tagliava il marchio. */
.single-product .casavola-risparmio {
	display: inline-block;
	margin: 0;
	padding: 5px 11px;
	border: 1px solid var(--casavola-oro);
	background: var(--casavola-oro-velo);
	color: var(--casavola-brunito);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Quantità e "Aggiungi al carrello" sulla stessa riga: lo stepper era un francobollo
   appoggiato sopra un bottone a tutta larghezza, e rubava un'altezza che non vale. */
/* `nowrap`: con `wrap` e una base di 210px il bottone scendeva sotto lo stepper appena la
   colonna si stringeva — bastava lo zoom del browser. Sul telefono torna a capo, ma per
   decisione esplicita, non per un calcolo che scatta da solo. */
.single-product form.cart {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 10px;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Stepper e bottone rientravano di 10px per lato mentre il WhatsApp e le garanzie
   arrivavano al bordo, e nel modulo non c'era né respiro interno né margine. Il colpevole
   è il clearfix del tema: dentro un flex `::before` e `::after` diventano elementi a tutti
   gli effetti, larghi zero, e il `gap` li spaziava come fossero contenuto. */
.single-product form.cart::before,
.single-product form.cart::after { display: none !important; }

.single-product form.cart .quantity {
	flex: 0 0 auto;
	margin: 0 !important;
	float: none;
}

/* Stepper e bottone devono chiudere alla stessa altezza. Non la fisso a un numero: le
   due misure verrebbero da regole diverse e basterebbe un padding del tema a sfasarle di
   due pixel, come è successo. Si allungano insieme, e restano pari per costruzione. */
.single-product form.cart .quantity,
.single-product form.cart .quantity .qty,
.single-product form.cart .single_add_to_cart_button {
	align-self: stretch;
	height: auto !important;
	min-height: 52px !important;
}

/* Il tema dà al bottone `width: 100%`: dentro il flex lo mandava da solo su una riga.
   Tutte le proprietà contese portano `!important` perché a vincere erano selettori del
   tema più specifici dei nostri — verificato leggendo lo stile calcolato in pagina, non
   a occhio. */
.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
}

/* ——— prodotti variabili ———

   Su un prodotto con varianti il modulo del carrello contiene DUE blocchi: la tabella delle
   opzioni ("Carature disponibili") e il blocco quantità + bottone. Il flex li affiancava,
   dando 290px a testa: la tabella a sinistra e, a destra, il bottone che finiva sotto lo
   stepper perché in 290px non ci stavano in fila.

   Qui il modulo torna al flusso normale — i due blocchi uno sotto l'altro — e la riga
   quantità + carrello si ricompone dentro il secondo blocco, dove vive davvero. */
.single-product form.cart.variations_form {
	display: block !important;
}

.single-product form.cart.variations_form table.variations {
	width: 100%;
	margin: 0 0 14px;
	border: 0;
}

.single-product form.cart.variations_form table.variations th,
.single-product form.cart.variations_form table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	text-align: left;
	border: 0;
}

.single-product form.cart.variations_form table.variations th.label {
	margin-bottom: 6px;
	font-weight: 700;
}

.single-product form.cart.variations_form table.variations select {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid var(--casavola-filo-forte);
	border-radius: 0;
	background-color: var(--casavola-carta);
}

/* Le carature come bottoni, non come tendina: le opzioni sono poche e si scelgono meglio
   viste tutte insieme. La tendina resta nel DOM, nascosta ma viva: è sempre lei a parlare
   con WooCommerce. Nascosta con `clip`, non con `display: none`, perché un campo tolto dal
   flusso non è più raggiungibile da tastiera né leggibile dai lettori di schermo. */
.single-product .casavola-tendina-nascosta {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.single-product .casavola-varianti {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* `!important` perché il tema dipinge ogni `button` di nero: qui i bottoni sono una scelta
   da leggere, non un gesto da compiere, e devono avere il peso di un'etichetta. */
.single-product .casavola-variante {
	/* `!important` anche sul respiro interno e sul corpo del testo: il tema impone i propri
	   su ogni `button`, e senza forzatura il telefono si ritrovava bottoni alti tre righe. */
	padding: 11px 20px !important;
	font-size: 14px !important;
	border: 1px solid var(--casavola-filo-forte) !important;
	border-radius: 0 !important;
	background: var(--casavola-carta) !important;
	color: var(--casavola-inchiostro) !important;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease;
}

.single-product .casavola-variante:hover:not(:disabled) { border-color: var(--casavola-brunito) !important; }
.single-product .casavola-variante:focus-visible { outline: 2px solid var(--casavola-brunito); outline-offset: 2px; }

.single-product .casavola-variante.scelto {
	border-color: var(--casavola-oro) !important;
	background: var(--casavola-oro-velo) !important;
	font-weight: 700;
}

/* Una combinazione che non esiste si vede che non è scegliebile, ma resta leggibile. */
.single-product .casavola-variante:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* Il prezzo della variante prende il posto di quello in cima: stessa griglia, stessi corpi.
   L'originale non viene cancellato ma nascosto, così togliendo la scelta torna com'era. */
.single-product p.price .casavola-prezzo-live {
	display: none;
	grid-column: 1 / -1;
	grid-row: 1;
	grid-template-columns: auto auto 1fr;
	align-items: baseline;
	column-gap: 14px;
	row-gap: 2px;
}

.single-product p.price.casavola-prezzo-variante .casavola-prezzo-live { display: grid; }

/* Elencare i pezzi da nascondere non bastava: il trattino della forbice sta dentro uno
   SPAN senza classe, che nessun elenco prevedeva. Qui si spegne TUTTO quello che c'era
   prima e si tiene solo il prezzo della variante — salvo il riquadro HeyLight, che su
   alcune schede vive dentro questo stesso paragrafo e non va toccato. */
.single-product p.price.casavola-prezzo-variante > *:not(.casavola-prezzo-live):not([id^="heidipay-container"]):not(.heyLight-inline) {
	display: none !important;
}

.single-product .casavola-prezzo-live > ins,
.single-product .casavola-prezzo-live > .woocommerce-Price-amount {
	grid-column: 1;
	grid-row: 1;
	background: none;
	text-decoration: none;
	font-size: 32px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.1;
}

.single-product .casavola-prezzo-live > del {
	grid-column: 2;
	grid-row: 1;
	font-size: 20px;
	color: var(--casavola-cenere);
	opacity: 1;
}

.single-product .casavola-prezzo-live > small.woocommerce-price-suffix {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--casavola-cenere);
}

/* Il prezzo della variante che WooCommerce stampa in fondo al modulo è di troppo, perché
   quello vero è tornato in cima — ma il blocco NON si può spegnere: dentro ci vive il
   riquadro HeyLight, che su un prodotto a varianti nasce lì e da nessun'altra parte.
   Spegnendolo tutto avevo tolto HeyLight da queste schede senza accorgermene; riacceso il
   blocco, il riquadro si apre e dice la rata giusta. Qui si spegne solo il prezzo. */
.single-product .woocommerce-variation-price { display: block !important; }

.single-product .woocommerce-variation-price > span.price > *:not([id^="heidipay-container"]):not(.heyLight-inline) {
	display: none !important;
}

/* La nota AppPago chiude la scheda, sotto la descrizione: una nota a piè di pagina. */
.single-product .casavola-nota-fondo {
	margin: 22px 0 0 !important;
	padding-top: 14px;
	border-top: 1px solid var(--casavola-filo);
	max-width: none;
}

.single-product form.cart .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 10px;
}

/* Stepper e carrello restano affiancati anche sul telefono: separarli allungava la colonna
   e allontanava il gesto dal prezzo. Lo stepper tiene la sua misura, il bottone si prende
   quello che resta.

   Sotto i 340px — telefoni piccoli, o testo ingrandito dalle impostazioni — non ci stanno
   davvero: lì e solo lì tornano su due righe. */
@media (max-width: 860px) {
	.single-product form.cart,
	.single-product form.cart .woocommerce-variation-add-to-cart {
		flex-wrap: nowrap !important;
		align-items: stretch;
	}

	.single-product form.cart .quantity {
		flex: 0 0 auto !important;
		width: auto !important;
	}

	.single-product form.cart .single_add_to_cart_button {
		flex: 1 1 auto !important;
		width: auto !important;
		min-width: 0;
	}
}

@media (max-width: 339px) {
	.single-product form.cart,
	.single-product form.cart .woocommerce-variation-add-to-cart { flex-wrap: wrap !important; }
	.single-product form.cart .quantity,
	.single-product form.cart .single_add_to_cart_button { flex: 1 0 100% !important; width: 100% !important; }
}

/* L'ordine di lettura della colonna.

   PHP può stampare risparmio e garanzie solo dentro il widget del carrello, ma il bottone
   WhatsApp è un widget a parte che viene dopo: così le garanzie finivano fra il carrello e
   il WhatsApp, mentre i due gesti devono stare attaccati.

   `display: contents` scioglie i contenitori del widget: i suoi figli diventano figli
   diretti della colonna, e da lì `order` può metterli in fila con il bottone verde. Nessun
   nodo spostato — in cassa muovere un campo aveva innescato un ciclo infinito, e quella
   lezione vale anche qui.

   Gli elementi sotto (descrizione, meta, desideri, social) prendono un `order` alto:
   senza, resterebbero a 0 e risalirebbero sopra il gruppo d'acquisto. */
.single-product .elementor-widget-woocommerce-product-add-to-cart,
.single-product .elementor-widget-woocommerce-product-add-to-cart > .elementor-widget-container,
.single-product .elementor-add-to-cart {
	display: contents;
}

/* Sciolti i contenitori, questi elementi sono figli diretti di una colonna che impagina
   in riga: senza una base del 100% si affiancherebbero fra loro. Una riga per uno —
   tranne disponibilità e risparmio, che stanno bene insieme e così risparmiano una riga. */
.single-product form.cart,
.single-product .casavola-garanzie {
	flex: 0 0 100%;
	max-width: 100%;
}

/* Ogni pezzo della colonna occupa la sua riga intera. Sciolti i contenitori del carrello,
   la colonna impagina in riga: senza questa base i blocchi più stretti della colonna — il
   prezzo, le righe rateali — si vedevano affiancare disponibilità e risparmio, con i testi
   uno sull'altro.

   Il `:has()` limita la regola alla SOLA colonna d'acquisto: prendere tutte le colonne
   Elementor della pagina toccherebbe anche il piè di pagina. */
.single-product .elementor-widget-wrap:has(> .elementor-widget-woocommerce-product-add-to-cart) > * {
	flex: 0 0 100%;
	max-width: 100%;
}

/* Il titolo del prodotto porta da WooCommerce `margin: 0 0 .5em 0`: mezza riga di stacco
   prima del prezzo, che nella colonna si sommava al respiro del widget e allontanava il
   numero dal nome del pezzo. */
.single-product .product_title {
	margin-bottom: 0 !important;
}

/* Il nastro "creato da Casavola Gioielli" porta il fondo oro sul CONTENITORE del widget,
   non sul titolo — misurato: il titolo è uno span di 217px dentro un contenitore dorato di
   597. Dando al widget la riga intera il fondo si stendeva da bordo a bordo e il taglio
   obliquo finiva in fondo alla colonna. Qui il widget torna largo quanto il suo contenuto,
   com'era prima; la riga se la prende lo stesso, perché quello che segue è a tutta larghezza. */
.single-product .elementor-widget-wrap:has(> .elementor-widget-woocommerce-product-add-to-cart) > .elementor-widget-heading {
	flex: 0 0 auto;
	max-width: 100%;
}

/* Disponibilità e risparmio condividono la riga: sono due etichette brevi, e affiancate
   accorciano la colonna di un passo intero prima del gesto d'acquisto. */
.single-product .ast-stock-detail,
.single-product .elementor-add-to-cart p.stock {
	order: 1;
	flex: 0 0 auto;
	align-self: center;
	margin: 0 10px 14px 0 !important;
}

.single-product .casavola-risparmio-riga {
	order: 2;
	flex: 0 0 auto;
	align-self: center;
	margin: 0 0 14px !important;
}

.single-product form.cart { order: 3; }
.single-product .elementor-widget-button:has(a[href*="wa.me"]) { order: 4; }
.single-product .casavola-garanzie { order: 5; }

/* La descrizione breve porta da Elementor un `margin-top: -30px` sul proprio contenitore:
   serviva ad accostarla a ciò che aveva sopra nel vecchio ordine. Ora sopra ci sono le
   garanzie, e quel tiro di 30px portava il testo ADDOSSO all'ultima riga — testo su testo.
   Misurato: il contenitore partiva 30px sopra il proprio widget. */
.single-product .elementor-widget-woocommerce-product-short-description { order: 20; }
.single-product .elementor-widget-woocommerce-product-short-description > .elementor-widget-container {
	margin-top: 22px !important;
}

/* Prodotti venduti singolarmente: WooCommerce stampa un campo quantità nascosto
   (`input[type=hidden]`). Il riquadro restava lì largo zero e si mangiava comunque uno
   spazio del flex. Senza stepper il bottone prende tutta la riga, che è giusto così. */
.single-product form.cart .quantity:has(input.qty[type="hidden"]) { display: none !important; }
.single-product .elementor-widget-button:not(:has(a[href*="wa.me"])) { order: 21; }
.single-product .elementor-widget-woocommerce-product-meta { order: 22; }

/* Le tre garanzie stampate sotto il carrello, con le parole della cassa. I riquadri
   grigi che dicevano il contrario (reso 10 giorni, spedizione 24 ore) restano spenti
   più sotto: due promesse diverse sullo stesso acquisto non possono convivere. */
.casavola-garanzie {
	flex: 1 0 100%;
	list-style: none;
	margin: 8px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid var(--casavola-filo);
	display: grid;
	gap: 9px;
}

.casavola-garanzie li {
	position: relative;
	margin: 0;
	padding-left: 18px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--casavola-inchiostro);
}

/* Il punzone, lo stesso segno che numera i passaggi della cassa. */
.casavola-garanzie li::before {
	content: "◆";
	position: absolute;
	left: 0;
	top: .1em;
	color: var(--casavola-brunito);
	font-size: 10px;
}

.casavola-garanzie strong { font-weight: 700; }

/* Il bottone WhatsApp resta verde pieno: è il colore con cui la gente lo riconosce.
   Cambiano solo le proporzioni — una riga sola, un filo più basso del gesto principale,
   così i due non hanno lo stesso peso pur restando entrambi pieni.

   Il selettore va sull'indirizzo e non sul widget: nella colonna ci sono due bottoni
   Elementor, questo e "Leggi la descrizione completa", e solo questo porta a wa.me.
   L'indirizzo non si tocca: dentro c'è il messaggio già scritto col nome del prodotto. */
.single-product .elementor-button[href*="wa.me"] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	margin-top: 8px;
	padding: 10px 18px;
	border-radius: 0;
	font-size: 14.5px;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
}

/* Il marchio WhatsApp accanto alla parola: alto quanto una maiuscola, non di più. */
.single-product .elementor-button[href*="wa.me"] .casavola-wa {
	display: inline-block;
	width: 17px;
	height: 17px;
	margin-left: 7px;
	vertical-align: -3px;
}

.single-product .elementor-button[href*="wa.me"] .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* Su schermo stretto la frase intera non ci sta: lì può andare a capo, invece di
   sbordare o di rimpicciolirsi fino a non leggersi più. */
@media (max-width: 600px) {
	.single-product .elementor-button[href*="wa.me"] { white-space: normal; }
}

/* Le stesse promesse in fondo alla scheda, nei tre riquadri grigi: spente perché ora
   stanno sopra, e perché il loro testo contraddice la cassa. */
.single-product .elementor-widget-icon-box { display: none !important; }

/* Spegnere il solo widget lasciava in pagina tre strisce grigie vuote: i contenitori
   Elementor che lo avvolgono tengono il proprio respiro anche da vuoti. Via anche quelli.
   `:has()` regge su tutti i browser correnti; dove non reggesse, resterebbe la striscia,
   non un danno. */
.single-product .e-con:has(.elementor-widget-icon-box) { display: none !important; }

/* Lista dei desideri e icone social occupavano il punto migliore della pagina, subito
   sotto il gesto d'acquisto. L'ordine di stampa non si tocca: si sposta la lettura. */
.single-product .elementor-widget-shortcode { order: 90; }
.single-product .elementor-widget-share-buttons { order: 91; }

/* Il marchio PayPal senza cornice è più stretto: pareggiato otticamente ad AppPago. */
/* Le due caselle erano già allineate: lo scarto sta DENTRO il disegno. Misurato rendendo
   i due file a 16px e contando i pixel scritti: PayPal riempie 15,25px, AppPago solo 12,25
   perché il suo file porta 3,75px di vuoto in testa. A parità di casella il secondo marchio
   sembrava più piccolo e più basso.

   Qui AppPago sale a 20px, che è 16 × (15,25 / 12,25): i due marchi tornano della stessa
   altezza scritta, e appoggiano sulla stessa linea perché il flex li allinea sul fondo. */
.casavola-rateale-voce img[alt="PayPal"] { height: 16px !important; max-width: 68px; }
.casavola-rateale-voce img[alt="AppPago"] { height: 20px !important; max-width: 66px; }

/* Il chip della disponibilità, un poco più grande. */
.single-product .stock {
	padding: 8px 18px;
	font-size: 14px !important;
}

/* Il widget HeyLight è alto 43px per una riga di testo da 20: l'aria è tutta sua, interna.
   Qui si comprime l'interlinea del suo contenitore, senza toccare il contenuto. */
.single-product .heyLight-inline,
.single-product [id^="heidipay-container"] {
	line-height: 1.25 !important;
	padding: 0 !important;
	min-height: 0 !important;
}

.single-product .heyLight-inline > * { margin-top: 0 !important; margin-bottom: 0 !important; }

/* Il rimando e la sua nota: la condizione sullo sconto non sta sulla riga, che è già piena,
   ma subito sotto, in corpo piccolo. */
/* L'asterisco appartiene alla parola che precede: attaccato, non a distanza. Il gap del
   contenitore lo staccava come fosse una voce a sé. */
.casavola-rimando {
	font-size: 11px;
	line-height: 1;
	margin-left: -2px;
	color: var(--casavola-brunito);
	vertical-align: super;
}

.casavola-rateale-voce { white-space: nowrap; }

.casavola-rateali-nota {
	margin: 4px 0 0 !important;
	font-size: 11px;
	line-height: 1.45;
	color: var(--casavola-cenere);
	max-width: 62ch;
}

/* Il gap della voce separava anche l'asterisco dalla parola: lo spazio lo tiene il marchio
   con un proprio margine, così il rimando resta attaccato al testo a cui si riferisce. */
.casavola-rateale-voce { gap: 0 !important; }
.casavola-rateale-voce img { margin-right: 8px !important; }
.casavola-rimando { margin-left: 0; }

/* ═══════════════════════════════════════════════
   CARRELLO: RIORDINO DEL RIEPILOGO
   ═══════════════════════════════════════════════ */

/* "Modifica indirizzo" finiva nella stessa cella di "Gratuita", su due righe, e sembrava
   parte del valore. Diventa un collegamento piccolo sotto la riga. */
.casavola-carrello-riepilogo .shipping-calculator-button {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	color: var(--casavola-cenere);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Il pulsante d'ordine sale sopra le condizioni di pagamento: chi è arrivato al carrello
   vuole procedere, i rateali restano sotto per chi li cerca. */
.casavola-carrello-riepilogo .wc-proceed-to-checkout { gap: 10px; }
.casavola-carrello-riepilogo .wc-proceed-to-checkout > .checkout-button { order: 1; margin: 0 !important; }
.casavola-carrello-riepilogo .wc-proceed-to-checkout > .ppc-button-wrapper { order: 2; }
.casavola-carrello-riepilogo .wc-proceed-to-checkout > .casavola-rate-carrello { order: 3; }
.casavola-carrello-riepilogo .wc-proceed-to-checkout > div:not([class]) { order: 4; }

/* I rateali come un gruppo solo: stessa interlinea, niente margini propri per ciascuno. */
.casavola-carrello-riepilogo .casavola-rate-carrello,
.casavola-carrello-riepilogo .wc-proceed-to-checkout > div:not([class]) {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 11.5px;
	line-height: 1.5;
}

.casavola-carrello-riepilogo .heyLight-inline,
.casavola-carrello-riepilogo [id^="heidipay-container"] {
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.35 !important;
	min-height: 0 !important;
}

/* "Aggiorna quantità" è un'azione minore: un collegamento, non un secondo pulsante. */
.casavola-carrello-azioni .casavola-aggiorna {
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: 12.5px;
	color: var(--casavola-cenere);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	align-self: center;
}

.casavola-carrello-azioni .casavola-aggiorna:hover { color: var(--casavola-inchiostro); }

/* Le garanzie riempiono lo spazio sotto i pezzi. */
.casavola-garanzie {
	list-style: none;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--casavola-filo);
	font-size: 12px;
	line-height: 1.8;
	color: var(--casavola-cenere);
}

.casavola-garanzie li { margin: 0; }
.casavola-garanzie strong { color: var(--casavola-inchiostro); font-weight: 600; }

/* ═══════════════════════════════════════════════
   TELEFONO: CARRELLO
   ═══════════════════════════════════════════════ */

@media (max-width: 860px) {
	.casavola-carrello-azioni { flex-direction: column; align-items: stretch; gap: 10px; }
	.casavola-carrello-azioni .casavola-aggiorna { align-self: flex-start; }
	.casavola-coupon-riga { flex-direction: column; }
	.casavola-coupon-riga .casavola-bottone { width: 100%; }

	.casavola-garanzie { margin-top: 18px; padding-top: 14px; }

	/* Il riepilogo scende sotto i pezzi: il pulsante resta comunque raggiungibile. */
	.casavola-carrello-riepilogo .wc-proceed-to-checkout > .checkout-button {
		position: sticky;
		bottom: 8px;
		z-index: 4;
	}
}

@media (max-width: 480px) {
	.casavola-pezzo-nome { font-size: 15px; }
	.casavola-garanzie { font-size: 11.5px; line-height: 1.7; }
}

/* La colonna di sinistra tiene insieme pezzi, codice sconto e garanzie: è una cella sola
   della griglia, non tre elementi sparsi. */
.casavola-carrello-colonna { min-width: 0; }

/* ═══════════════════════════════════════════════
   IL MENU DEVE STARE SOPRA I PULSANTI DEI FORNITORI
   ═══════════════════════════════════════════════
   I pulsanti PayPal sono iframe, e l'intestazione del sito non dichiara alcun z-index:
   senza un contesto di impilamento gli iframe le finiscono sopra, e aprendo il megamenu
   comparivano in mezzo alle voci. Qui l'intestazione prende un piano suo, i pulsanti
   restano nel loro.
   ═══════════════════════════════════════════════ */

.woocommerce-cart #masthead,
.woocommerce-cart .site-header,
.woocommerce-checkout #masthead,
.woocommerce-checkout .site-header {
	position: relative;
	z-index: 99;
}

.woocommerce-cart .ppc-button-wrapper,
.woocommerce-checkout .ppc-button-wrapper,
.casavola-carrello-riepilogo .ppc-button-wrapper {
	position: relative;
	z-index: 0;
}

/* ═══════════════════════════════════════════════
   RIEPILOGO: LINEE INTERE, CELLE ALLINEATE
   ═══════════════════════════════════════════════
   Il filo di separazione stava sulle singole celle: con la riga della spedizione più alta
   delle altre (contiene anche "Modifica indirizzo") le due metà finivano a quote diverse e
   la linea sembrava spezzata. Ora il filo appartiene alla riga, e le celle si allineano in
   alto: etichetta e valore partono dalla stessa base.
   ═══════════════════════════════════════════════ */

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td,
.casavola-carrello-riepilogo table.shop_table th,
.casavola-carrello-riepilogo table.shop_table td {
	border-bottom: 0 !important;
	vertical-align: top;
	padding: 11px 0 !important;
}

.woocommerce-checkout #order_review table.shop_table tr,
.casavola-carrello-riepilogo table.shop_table tr {
	border-bottom: 1px solid var(--casavola-filo);
}

.woocommerce-checkout #order_review table.shop_table tr:last-child,
.casavola-carrello-riepilogo table.shop_table tr:last-child {
	border-bottom: 0;
}

/* "Modifica indirizzo" resta legato al valore, ma senza alzarne la riga. */
.casavola-carrello-riepilogo .woocommerce-shipping-totals td,
.woocommerce-checkout #order_review .woocommerce-shipping-totals td { line-height: 1.5; }

/* Il widget HeyLight si assegna una larghezza fissa di 345px e ignora il riquadro che lo
   contiene: dentro un riepilogo da 355px con 24 di respiro interno sbordava di 15px, e la
   scritta "scopri di più" finiva oltre il bordo. Qui è obbligato a stare nello spazio che ha. */
.casavola-carrello-riepilogo .heyLight-inline,
.casavola-carrello-riepilogo [id^="heidipay-container"],
.woocommerce-checkout #order_review .heyLight-inline,
.woocommerce-checkout #order_review [id^="heidipay-container"] {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
	overflow: hidden;
}

.casavola-carrello-riepilogo .heyLight-inline *,
.woocommerce-checkout #order_review .heyLight-inline * {
	max-width: 100% !important;
	overflow-wrap: anywhere;
}

/* La cella dei totali è allineata a destra e il widget ne ereditava l'allineamento: la frase
   andava a capo e "scopri di più" finiva a filo destro, staccato da ciò che completa. Qui il
   widget torna a sinistra, così la seconda riga cade sotto la prima.

   Su una riga sola non ci sta e non è un difetto da correggere con la CSS: marchio più frase
   chiedono circa 500px a 14px, la colonna dei totali ne misura 342. Per averla su una riga il
   widget va portato fuori dalla colonna del riepilogo, a tutta larghezza della cassa. */
.woocommerce-checkout #order_review .heyLight-inline,
.woocommerce-checkout #order_review [id^="heidipay-container"] {
	display: block;
	text-align: left;
	line-height: 1.3;
}

/* I prodotti consigliati sotto il carrello: una griglia, non un elenco in colonna. */
.woocommerce-cart .cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 26px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
}

.woocommerce-cart .cross-sells ul.products::before,
.woocommerce-cart .cross-sells ul.products::after { display: none; }

.woocommerce-cart .cross-sells ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

.woocommerce-cart .cross-sells { margin-top: 48px; }

.woocommerce-cart .cross-sells > h2 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--casavola-cenere);
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--casavola-filo);
}

/* HeyLight apre il gruppo dei rateali: è quello che porta la rata calcolata, quindi è la riga
   che dice di più. Niente filo sopra: il pulsante d'ordine basta già a separare. */
.casavola-carrello-riepilogo .wc-proceed-to-checkout .heyLight-inline,
.casavola-carrello-riepilogo .wc-proceed-to-checkout > .heidipay-container-2,
.casavola-carrello-riepilogo .wc-proceed-to-checkout > [id^="heidipay-container"] {
	order: 2;
	border-top: 0 !important;
	padding-top: 0 !important;
	margin-top: 14px !important;
}

/* Senza l'intestazione sopra, l'elenco dei pezzi non ha bisogno del filo superiore: la
   pagina si chiama già Carrello. */
.casavola-elenco-pezzi { border-top: 0; }
.casavola-elenco-pezzi .casavola-pezzo:first-child { padding-top: 0; }

/* Rete di sicurezza: se il plugin PayPal dovesse stampare comunque i propri pulsanti rapidi
   nel carrello, restano nascosti. In cassa continuano a funzionare normalmente. */
.woocommerce-cart .ppc-button-wrapper,
.woocommerce-cart .wc-proceed-to-checkout .ppc-button-wrapper { display: none !important; }

/* ═══════════════════════════════════════════════
   TELEFONO: LA BARRA D'ACQUISTO
   ═══════════════════════════════════════════════
   Clarity, 2026-09-26, scroll map di una scheda orologio: il 100% dei visitatori arriva al
   5% della pagina, il 41% al 20%, il 6% al 30%. L'84% delle sessioni è da telefono. Quello
   che decide l'acquisto — prezzo, risparmio, rate, i due gesti — scende qui e resta in vista
   per tutta la scheda.

   Resta visibile anche quando il carrello vero è sullo schermo: il gesto compare due volte
   in quel tratto, ed è un prezzo accettabile per non farlo mai sparire.
   ═══════════════════════════════════════════════ */

.casavola-barra-acquisto {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	display: none;
	padding: clamp(12px, 2.1vh, 20px) 14px calc(clamp(14px, 2.4vh, 22px) + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--casavola-filo-forte, rgba(46, 46, 46, .18));
}

/* Sopra gli 860px la colonna d'acquisto sta accanto all'immagine e il carrello si vede
   comunque: lì la barra ruberebbe solo schermo. */
@media (max-width: 860px) {
	.casavola-barra-acquisto { display: block; }

	/* Il respiro sotto al contenuto, perché l'ultima riga non finisca sotto la barra. */
	/* Rete di sicurezza: il valore giusto lo scrive il JS misurando la barra. */
	body.casavola-ha-barra { padding-bottom: 130px; }
}

/* Prima riga: il prezzo apre, il listino lo segue, il risparmio chiude. */
/* Una colonna sola, in ordine di lettura: il prezzo, il listino barrato, quanto si
   risparmia. La targhetta del risparmio stava a destra con fondo e cornice e pesava più
   del prezzo — qui torna a essere una nota in oro accanto ai numeri, non un secondo
   protagonista. */
.casavola-barra-riga {
	display: block;
}

.casavola-barra-sinistra {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 3px 9px;
	min-width: 0;
}

.casavola-barra-destra {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.casavola-barra-attuale {
	font-size: clamp(21px, 3vh, 26px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--casavola-inchiostro, #2e2e2e);
}

.casavola-barra-listino {
	font-size: 14px;
	text-decoration: line-through;
	color: var(--casavola-cenere, #7a7a7a);
}

/* La targhetta del risparmio porta l'oro del punzone, come sulla scheda e in cassa. */
.casavola-barra-risparmio {
	color: var(--casavola-brunito);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.casavola-barra-rate {
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--casavola-cenere, #7a7a7a);
}

/* I due gesti sulla stessa riga: il carrello prende più spazio, ma WhatsApp tiene le sue
   parole — "Prezzo riservato" è una proposta, e una proposta va detta, non intuita da
   un'icona. */
.casavola-barra-gesti {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}

.casavola-barra-bottone,
.casavola-barra-whatsapp {
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: clamp(13px, 1.9vh, 18px) 8px;
	border: 0;
	border-radius: 2px;
	font-size: clamp(13px, 1.75vh, 15px);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.casavola-barra-bottone {
	flex-grow: 1.25;
	background: var(--casavola-inchiostro, #2e2e2e);
	color: #fff;
}

/* "Prezzo riservato" non va mai a capo: il bottone prende la larghezza che gli serve —
   con il suo respiro ai lati, perché stretto sembrava schiacciato — e il carrello si
   stringe di conseguenza. */
.casavola-barra-whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding-left: 15px;
	padding-right: 15px;
	background: #2f8f4e;
	color: #fff;
}

/* Senza sconto e senza rate la barra resta a due righe — provato a metterle in linea e i
   due gesti si stringevano al punto che "Aggiungi al carrello" usciva dal suo bottone —
   ma il prezzo da solo occupa meno, quindi la riga sopra si accorcia. */
.casavola-barra-compatta .casavola-barra-gesti { margin-top: 7px; }

.casavola-barra-bottone:active,
.casavola-barra-whatsapp:active { opacity: .85; }

/* Sotto i 380px "Prezzo riservato" e "Aggiungi al carrello" non stanno affiancati senza
   spezzarsi: il verde resta come solo marchio, quadrato, e il carrello si prende la riga.
   L'etichetta sparisce dallo schermo ma non dai lettori vocali. */
@media (max-width: 379px) {
	.casavola-barra-bottone { font-size: 13px; padding-left: 4px; padding-right: 4px; }

	.casavola-barra-whatsapp {
		padding-left: 0;
		padding-right: 0;
		width: 48px;
		flex: 0 0 48px;
	}

	.casavola-barra-whatsapp span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.casavola-barra-wa { width: 19px; height: 19px; }
}

/* Il pulsante "torna su" di Astra vive a 30px dal fondo, cioè sotto la barra d'acquisto.
   Qui sale sopra di essa, e per strada si fa più discreto: una freccia col filo del negozio
   invece della pastiglia oro piena, che gridava quanto il carrello. */
@media (max-width: 860px) {
	body.casavola-ha-barra #ast-scroll-top {
		bottom: calc(138px + env(safe-area-inset-bottom, 0px)) !important;
	}

	#ast-scroll-top {
		width: 34px;
		height: 34px;
		line-height: 34px;
		padding: 0;
		background-color: rgba(255, 255, 255, .92) !important;
		border: 1px solid var(--casavola-filo-forte, rgba(46, 46, 46, .18));
		color: var(--casavola-cenere, #7a7a7a) !important;
		font-size: 13px !important;
		opacity: .75;
	}
}

/* Il marchio WhatsApp dentro la barra: clonato da quello del bottone verde, alto quanto
   la parola che accompagna. */
.casavola-barra-whatsapp { gap: 6px; }

.casavola-barra-wa {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

/* Il tema colora i collegamenti: qui il testo deve restare bianco sul verde, sempre. */
.casavola-barra-whatsapp,
.casavola-barra-whatsapp:link,
.casavola-barra-whatsapp:visited,
.casavola-barra-whatsapp:hover,
.casavola-barra-whatsapp:active,
.casavola-barra-whatsapp span { color: #fff !important; }

/* Le varianti sul telefono: incolonnate in una griglia invece che in fila libera.
   Con etichette corte — "0.36 ct.", "0.38 ct." — quattro o cinque carature stanno in due
   righe ordinate, e non in cinque righe di bottoni di larghezza diversa. */
/* Sul telefono le varianti stanno in griglia: due per riga quando ci stanno, una sola
   quando l'etichetta è lunga. La misura minima è 140px, quindi su uno schermo da 390px
   entrano due colonne; sotto quella soglia la griglia ne fa una sola da sé.

   Il corpo scende a 12px e il respiro interno si stringe: a 14px con 20px di padding per
   lato — la misura pensata per il desktop — i bottoni sul telefono diventavano enormi. */
@media (max-width: 860px) {
	.single-product .casavola-varianti {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
		gap: 6px;
	}

	.single-product .casavola-variante {
		padding: 11px 10px !important;
		font-size: 14px !important;
		line-height: 1.3 !important;
		text-align: center;
		/* Chrome e Safari su telefono ingrandiscono da soli il testo dei blocchi larghi
		   ("font boosting"): è il motivo per cui un 12px dichiarato può arrivare a schermo
		   molto più grande. Qui si disattiva. */
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	.single-product .casavola-varianti {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	/* Anche il nome dell'attributo scende di corpo: era 15px in grassetto. */
	.single-product table.variations th,
	.single-product .variations label { font-size: 13px !important; }
}

/* Lo spazio fra le varianti e il resto del modulo.
   Misurato sul prodotto a carature: la tabella delle varianti porta 14px di margine, la riga
   interna altri 7,5px e il riquadro del prezzo-variante — che a scelta non fatta è ALTO ZERO
   ma tiene il suo margine — ne aggiunge 18. Sommati, sul telefono diventano un vuoto che
   stacca la scheda in due. */
.single-product form.cart table.variations { margin-bottom: 10px !important; }
.single-product form.cart table.variations tbody tr { margin-bottom: 0 !important; }

/* Il riquadro del prezzo della variante quando è vuoto non deve occupare spazio. */
.single-product .woocommerce-variation.single_variation:empty { margin: 0 !important; }

@media (max-width: 860px) {
	/* Lo stacco fra l'ultima variante e la riga quantità + carrello: azzerato era troppo,
	   il gesto finiva incollato alle etichette. */
	.single-product form.cart table.variations { margin-bottom: 16px !important; }
	.single-product .woocommerce-variation.single_variation { margin-bottom: 8px !important; }
}

/* Sul telefono la tabella delle varianti resta una TABELLA: l'etichetta occupa la prima
   colonna e i bottoni si stringono nella seconda, che è metà schermo. Sciolta in blocchi,
   i bottoni prendono tutta la larghezza e ce ne stanno due per riga invece di uno.
   Misurato il 2026-09-26 su una scheda a carature: i bottoni stavano incolonnati a sinistra
   con mezza pagina vuota accanto. */
@media (max-width: 860px) {
	.single-product form.cart table.variations,
	.single-product form.cart table.variations tbody,
	.single-product form.cart table.variations tr,
	.single-product form.cart table.variations th,
	.single-product form.cart table.variations td {
		display: block;
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.single-product form.cart table.variations th { margin-bottom: 6px; }

	/* Lo stacco fra i bottoni e ciò che segue: il modulo è in flex, e senza questo il
	   distacco lo decidevano i margini sommati dei singoli pezzi. */
	.single-product form.cart { row-gap: 14px !important; }
	.single-product .single_variation_wrap { margin-top: 0 !important; }
	.single-product .woocommerce-variation-add-to-cart { margin-top: 0 !important; }
}

/* Il carrello prima che la variante sia scelta.
   WooCommerce gli mette `disabled wc-variation-selection-needed`; il tema però continua a
   trattarlo come un bottone vivo e al passaggio del dito o del mouse ne cambia il colore,
   promettendo un gesto che non si può ancora compiere. Qui lo stato resta lo stesso in
   quiete, al passaggio, al fuoco e alla pressione: un bottone spento che si vede spento. */
.single-product form.cart .single_add_to_cart_button.disabled,
.single-product form.cart .single_add_to_cart_button.disabled:hover,
.single-product form.cart .single_add_to_cart_button.disabled:focus,
.single-product form.cart .single_add_to_cart_button.disabled:active,
.single-product form.cart .single_add_to_cart_button.wc-variation-selection-needed,
.single-product form.cart .single_add_to_cart_button.wc-variation-selection-needed:hover,
.single-product form.cart .single_add_to_cart_button.wc-variation-selection-needed:focus,
.single-product form.cart .single_add_to_cart_button.wc-variation-selection-needed:active,
.single-product form.cart .single_add_to_cart_button[disabled],
.single-product form.cart .single_add_to_cart_button[disabled]:hover,
.single-product form.cart .single_add_to_cart_button[disabled]:focus,
.single-product form.cart .single_add_to_cart_button[disabled]:active {
	background-color: #0c0c0c !important;
	border-color: #0c0c0c !important;
	color: #fff !important;
	opacity: .42 !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
	transform: none !important;
}