/*
 * Riga del coupon allineata al resto del carrello.
 *
 * Misurato il 18/09 a 1440px: dentro il box dal bordo grigio il campo «Codice
 * Coupon» cominciava a 211 e il bottone «Applica coupon» finiva a 1229, mentre
 * tutto il resto della pagina sta su due linee sole — tabella dei prodotti e
 * «Aggiorna carrello» a 180/1260, titolo «Totale Carrello» e «Procedi al
 * pagamento» a 181/1259.
 *
 * LA CAUSA, che non è quella che sembra. Non c'erano margini, e non era la
 * centratura: la riga (`.form-row`) porta lo `::before` e lo `::after` del
 * clearfix di WooCommerce, `content: " "` con `display: table`. In un
 * contenitore flex quei due pseudo-elementi diventano **elementi flex larghi
 * zero**, e con `gap: 30px` si portano dietro uno spazio da 30px per lato. Il
 * conto tornava esatto: 0 + 638 + 350 + 0 di elementi più 90 di tre spazi =
 * 1078, cioè tutta la riga. Non avanzava niente da distribuire, ed è per questo
 * che né `justify-content` né `flex-grow` spostavano un pixel.
 *
 * Togliendo i due fantasmi dal flusso restano due elementi e un solo spazio: i
 * 60px che avanzano finiscono nel campo, che si distende fino al bordo, e il
 * bottone si appoggia al bordo destro.
 *
 * ⚠️ I selettori partono da `body` e passano per `.form-row` di proposito: lo
 * snippet di CSS a mano #1681 («Contenitore coupon») ha gli stessi selettori
 * con `!important` ed è stampato DOPO i fogli del plugin. Con la specificità
 * pari vinceva lui.
 */

/* I due pseudo-elementi del clearfix fuori dal flusso: sono loro i 30px. */
body .woocommerce .coupon .form-row.coupon-col::before,
body .woocommerce .coupon .form-row.coupon-col::after {
	display: none !important;
}

/*
 * E via l'imbottitura laterale del box: Stefano vuole il campo e il bottone
 * allineati al **bordo grigio**, non alla linea interna. Con i 30px per lato
 * restavano 31px di stacco visibile da ogni parte. Sopra e sotto l'imbottitura
 * resta, serve a tenere in mezzo la riga.
 */
body .woocommerce .coupon {
	padding-inline: 0 !important;
	/*
	 * E via i due bordi verticali grigio chiaro: con il campo e il bottone a
	 * filo restavano due trattini appiccicati ai loro bordi neri. Restano la
	 * riga sopra e quella sotto, che è come si comporta già la tabella dei
	 * prodotti.
	 */
	border-left: 0 !important;
	border-right: 0 !important;
}

body .woocommerce .coupon .form-row.coupon-col {
	justify-content: space-between !important;
}

/* Il campo prende lo spazio che avanza, invece di lasciarlo ai lati. */
body .woocommerce .coupon .form-row.coupon-col .coupon-col-start {
	flex: 1 1 auto !important;
	max-width: none !important;
	padding-right: 0 !important;
}

body .woocommerce .coupon .form-row.coupon-col .coupon-col-start input {
	width: 100% !important;
}

/* Il bottone tiene la sua misura (350px, come lo voleva lo snippet) e si
   appoggia al bordo destro. */
body .woocommerce .coupon .form-row.coupon-col .coupon-col-end {
	flex: 0 0 350px !important;
	width: 350px !important;
	max-width: 350px !important;
}

/*
 * Sul telefono la riga va a capo: lì «a destra e a sinistra» non vuol dire
 * niente, e prima il campo partiva da 71 mentre il bottone da 41. Uno sopra
 * l'altro, larghi uguali, allineati alla stessa linea del resto.
 */
@media (max-width: 767px) {
	body .woocommerce .coupon .form-row.coupon-col {
		flex-wrap: wrap !important;
		gap: 12px !important;
	}

	body .woocommerce .coupon .form-row.coupon-col .coupon-col-start,
	body .woocommerce .coupon .form-row.coupon-col .coupon-col-end {
		flex: 1 1 100% !important;
		width: 100% !important;
		max-width: none !important;
	}
}