/*
 * GOYN — carrello, cassa e pannello laterale
 *
 * Fonte: `CartPage` (src/CartPage.jsx), `CheckoutPage` (src/CheckoutPage.jsx) e
 * `CartDrawer` (src/components/CartDrawer.jsx), con le classi `.cart-*`, `.co-*` e
 * `.drawer-*` di src/styles.css.
 *
 * Un foglio per tre widget, ed è un'eccezione dichiarata alla regola "un foglio per
 * widget": le righe del carrello, i totali e la barra della spedizione gratuita
 * sono gli stessi in tutti e tre, e separarli vorrebbe dire ripeterli tre volte.
 * Stessa ragione di `product-sections.css`.
 *
 * ═════════════════════════════════════════════════════════════════════════
 * QUI SI VESTE IL MARKUP DI WOOCOMMERCE — TERZA VOLTA NEL PROGETTO
 * ═════════════════════════════════════════════════════════════════════════
 *
 * Dopo il modulo newsletter di Pro e l'area clienti. Il carrello e la cassa sono
 * `[woocommerce_cart]` e `[woocommerce_checkout]`: la tabella con le quantità, il
 * coupon, la scelta della spedizione, i gateway e il bottone che crea l'ordine sono
 * suoi, coi loro nonce. Le classi usate qui sono quelle pubbliche e stabili:
 *
 *   .shop_table.cart, .cart_item, .product-thumbnail…   la tabella del carrello
 *   .cart_totals, .cart-collaterals                     i totali
 *   .coupon, #coupon_code                               il codice sconto
 *   .checkout.woocommerce-checkout, #customer_details   il modulo della cassa
 *   #order_review, #order_review_heading                il riepilogo
 *   #payment, .wc_payment_methods, #place_order         il pagamento
 *   .woocommerce-order, .woocommerce-thankyou-order-*   la conferma
 *
 * ⚠️⚠️ I FOGLI DI WOOCOMMERCE ARRIVANO DOPO IL NOSTRO E USANO DUE ELEMENTI NEL
 *      SELETTORE (`.woocommerce table.shop_table td`, `.woocommerce form .form-row
 *      label`…). Dove una regola di questo foglio sembra non fare niente, il
 *      colpevole è quasi sempre la specificità: servono tre classi, o una classe in
 *      più dell'atteso. È la lezione già pagata due volte su `account.css`.
 *
 * ⚠️ Se un aggiornamento rinominasse quelle classi, carrello e cassa tornano
 *    impaginati come li impagina WooCommerce: **brutti, non rotti**. Nessuna regola
 *    qui è necessaria al funzionamento.
 *
 * ISOLAMENTO: prefissi `goyn-cart` (pagina), `goyn-co` (cassa),
 * `goyn-cart-drawer` (pannello). Ogni regola su classi di WooCommerce è discendente
 * da uno di quei tre.
 *
 * DAL TEMA: `.goyn-wrap`, `.goyn-line`, `.goyn-display`, `.goyn-label`,
 * `.goyn-accent`, `.goyn-btn` + varianti, `.goyn-link-sweep`, `.goyn-sr-only`.
 *
 * INDICE
 *   1. Variabili comuni
 *   2. La barra della spedizione gratuita
 *   3. Pagina carrello: cornice
 *   4. Pagina carrello: la tabella di WooCommerce
 *   5. Pagina carrello: totali e coupon
 *   6. Cassa: barra dei passi e cornice
 *   7. Cassa: il modulo
 *   8. Cassa: riepilogo e pagamento
 *   9. Cassa: la conferma dell'ordine
 *  10. Il pannello laterale
 *  11. Avvisi
 *  12. Responsive
 *  12b. Sotto i 768px: disattivare la tabella responsive di WooCommerce
 *  13. prefers-reduced-motion
 */

/* ============================================================
   1. Variabili comuni
   ============================================================ */

.goyn-cart,
.goyn-co,
.goyn-cart-drawer {
	--goyn-ck-bg: var(--goyn-cream, #e9e5d9);
	--goyn-ck-card: var(--goyn-cream-2, #efebe0);
	--goyn-ck-title: var(--goyn-petrol-deep, #163e46);
	--goyn-ck-accent: var(--goyn-rust, #c0603c);
	--goyn-ck-muted: var(--goyn-muted, #5e6e6e);
	--goyn-ck-line: var(--goyn-petrol, #1f535d);
	--goyn-ck-rule: rgba(31, 83, 93, 0.16);
	--goyn-ck-aside: 340px;
	/*
	 * La miniatura della riga del carrello. Una variabile e non due `clamp()` uguali
	 * scritti a mano: la larghezza della foto e il rientro del nome DEVONO combaciare,
	 * e con due valori gemelli bastava cambiarne uno per disallineare la colonna.
	 */
	--goyn-ck-thumb: clamp(48px, 7vw, 92px);
	--goyn-ck-thumb-gap: clamp(12px, 1.4vw, 18px);
}

.goyn-cart,
.goyn-co {
	padding: clamp(112px, 12vh, 150px) var(--goyn-pad) clamp(60px, 6vw, 100px);
	background-color: var(--goyn-ck-bg);
	color: var(--goyn-ck-title);
}

/* ============================================================
   2. La barra della spedizione gratuita
   ------------------------------------------------------------
   ⚠️ La larghezza del riempimento è un `calc()` su una variabile scritta nel
      markup, non una `width` inline: così senza JavaScript la barra è già nella
      posizione giusta — un valore animato da uno script sarebbe partito da zero e
      ci sarebbe rimasto.
   ============================================================ */

.goyn-cart__ship,
.goyn-cart-drawer__ship {
	margin: 0 0 clamp(20px, 2.4vw, 32px);
	padding: 14px 16px;
	background-color: var(--goyn-ck-card);
	border-left: 3px solid var(--goyn-ck-accent);
}

.goyn-cart-drawer__ship {
	margin: 0;
	border-left: 0;
	border-bottom: 1px solid var(--goyn-ck-rule);
	background-color: transparent;
}

.goyn-cart__ship-text,
.goyn-cart-drawer__ship-text {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--goyn-ck-muted);
}

.goyn-cart__ship-text strong,
.goyn-cart-drawer__ship-text strong {
	color: var(--goyn-ck-title);
}

.goyn-cart__ship-track,
.goyn-cart-drawer__ship-track {
	display: block;
	height: 3px;
	overflow: hidden;
	background-color: var(--goyn-ck-rule);
}

.goyn-cart__ship-fill,
.goyn-cart-drawer__ship-fill {
	display: block;
	width: calc(var(--goyn-ck-progress, var(--goyn-cd-progress, 0)) * 100%);
	height: 100%;
	background-color: var(--goyn-ck-accent);
	transition: width var(--goyn-dur-slow, 0.9s) var(--goyn-ease);
}

/* ============================================================
   3. Pagina carrello: cornice
   ============================================================ */

.goyn-cart__crumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 1.6px;
	color: var(--goyn-ck-muted);
}

/* La freccia è decorativa: in un `::after` e non nel markup, così non si legge. */
.goyn-cart__crumb-list li:not(:last-child)::after {
	content: '›';
	margin-left: 8px;
	color: var(--goyn-ck-rule);
}

.goyn-cart .goyn-cart__crumb-list a {
	color: var(--goyn-ck-muted);
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-cart .goyn-cart__crumb-list a:hover {
	color: var(--goyn-ck-accent);
}

.goyn-cart__title {
	margin: 0 0 clamp(30px, 3.4vw, 48px);
	font-size: clamp(34px, 4.6vw, 72px);
	line-height: 0.92;
	color: var(--goyn-ck-title);
}

.goyn-cart .goyn-cart__back {
	display: inline-block;
	margin-top: 28px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 1.8px;
	color: var(--goyn-ck-line);
}

.goyn-cart__usp {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: clamp(26px, 3vw, 40px) 0 0;
	padding: 0;
	list-style: none;
}

.goyn-cart__usp-item {
	position: relative;
	padding-left: 20px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--goyn-ck-muted);
}

.goyn-cart__usp-item::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--goyn-ck-accent);
}

/* ============================================================
   4. Pagina carrello: la tabella di WooCommerce
   ------------------------------------------------------------
   La tabella diventa il reticolo dell'app: fotografia, nome e variante a
   sinistra, quantità al centro, totale a destra.
   ============================================================ */

/*
 * ⚠️ Il carrello e i totali di WooCommerce vivono in due blocchi affiancati
 *    (`form.woocommerce-cart-form` e `.cart-collaterals`) che il suo foglio
 *    FLOTTA: `.woocommerce .cart-collaterals .cart_totals { float: right; width: 48% }`.
 *    Qui diventano una griglia — sui figli di una griglia il float viene ignorato,
 *    quindi non serve annullarlo. È la stessa scoperta fatta sui campi della
 *    registrazione, usata in positivo.
 */
/*
 * ⚠️⚠️ LE COLLOCAZIONI SONO ESPLICITE, E LA PRIMA VERSIONE ERA SBAGLIATA.
 *      Avevo messo `display: contents` su `.woocommerce` sperando che i suoi figli
 *      si sistemassero da soli in due colonne. I figli però sono TRE — gli avvisi,
 *      il modulo del carrello e `.cart-collaterals` — quindi il terzo andava a capo:
 *      in pagina l'avviso occupava la colonna sinistra, la tabella del carrello
 *      finiva in quella destra sbordando dallo schermo, e i totali comparivano in
 *      basso a sinistra accanto ai prodotti consigliati. Un disastro visibile al
 *      primo screenshot.
 *
 *      Con riga e colonna dichiarate su ognuno non c'è niente da indovinare. E
 *      `display: contents` su `.cart-collaterals` serve a un altro scopo: tirare
 *      FUORI i consigliati dalla colonna dei totali, dove starebbero in 340px, e
 *      mandarli a tutta larghezza sotto — che è dove li mette l'app.
 */
.goyn-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--goyn-ck-aside);
	gap: clamp(24px, 3vw, 56px);
	align-items: start;
}

.goyn-cart .woocommerce > .woocommerce-notices-wrapper {
	grid-column: 1 / -1;
	grid-row: 1;
}

.goyn-cart .woocommerce-cart-form {
	grid-column: 1;
	grid-row: 2;
	margin: 0;
}

/* I figli di `.cart-collaterals` diventano celle della griglia: vedi la nota sopra. */
.goyn-cart .cart-collaterals {
	display: contents;
}

/*
 * ⚠️⚠️ E I SUOI DUE PSEUDO-ELEMENTI DI CLEARFIX DIVENTANO CELLE ANCHE LORO.
 *      WooCommerce scrive `.woocommerce .cart-collaterals::before, ::after
 *      { content: " "; display: table }` — la clearfix di quando le colonne erano
 *      float. Con `display: contents` l'elemento esce dal layout ma i suoi
 *      pseudo-elementi restano e SALGONO di un livello: diventano figli della
 *      griglia, e quindi celle.
 *
 *      Qui il danno non si vedeva perché ogni pezzo ha riga e colonna dichiarate, e
 *      i due intrusi finivano in celle che nessuno guardava — ma bastava una riga
 *      implicita in più per aprire un buco. Sulla pagina degli indirizzi dell'area
 *      clienti lo stesso meccanismo ha messo le due schede in diagonale: la storia
 *      completa è in testa a `.woocommerce-Addresses` in account.css.
 */
.goyn-cart .cart-collaterals::before,
.goyn-cart .cart-collaterals::after,
.goyn-cart .woocommerce::before,
.goyn-cart .woocommerce::after,
.goyn-co .checkout.woocommerce-checkout::before,
.goyn-co .checkout.woocommerce-checkout::after {
	display: none;
}

/*
 * ⚠️⚠️ TERZA VOLTA LO STESSO SCONTRO, e stavolta la misura era vistosa.
 *      `.woocommerce .cart-collaterals .cart_totals { width: 48% }` è (0,3,0): la mia
 *      `.goyn-cart .cart_totals` (0,2,0) perdeva, e il riquadro dei totali veniva
 *      larga 163px dentro una colonna da 340 — con "TOTALE CARRELLO" su due righe e
 *      "Procedi con l'ordine" su tre. Misurato: 48% di 340 = 163,2.
 *
 *      `.cart-collaterals` resta nel selettore anche se è `display: contents`: quel
 *      valore lo toglie dal LAYOUT, non dall'albero, quindi come antenato vale
 *      ancora. Quattro classi (0,4,0) e la partita è chiusa.
 */
.goyn-cart .woocommerce .cart-collaterals .cart_totals {
	grid-column: 2;
	grid-row: 2;
	float: none;
	width: auto;
	padding: clamp(20px, 2.4vw, 30px);
	background-color: var(--goyn-ck-card);
}

/* Stessa specificità dei totali, e per la stessa ragione. */
.goyn-cart .woocommerce .cart-collaterals .cross-sells {
	grid-column: 1 / -1;
	grid-row: 3;
	float: none;
	width: auto;
	margin-top: clamp(30px, 3.6vw, 56px);
	padding-top: clamp(30px, 3.6vw, 56px);
	border-top: 1px solid var(--goyn-ck-rule);
}

/* Carrello vuoto: WooCommerce stampa solo il messaggio e il bottone, e vanno larghi. */
.goyn-cart .woocommerce > .cart-empty,
.goyn-cart .woocommerce > .wc-empty-cart-message,
.goyn-cart .woocommerce > .return-to-shop {
	grid-column: 1 / -1;
}

/* --- i consigliati (`cross-sells`) --- */

.goyn-cart .cross-sells > h2 {
	margin: 0 0 clamp(20px, 2.4vw, 32px);
	font-family: var(--goyn-font-display);
	font-size: clamp(26px, 3vw, 46px);
	line-height: 0.95;
	color: var(--goyn-ck-line);
}

.goyn-cart .cross-sells ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ⚠️ Il suo foglio flotta ogni `li.product` con una larghezza in percentuale: qui
   sono celle di una griglia, dove il float non si applica — ma la larghezza sì. */
.goyn-cart .cross-sells ul.products li.product {
	width: auto;
	margin: 0;
	padding: clamp(14px, 1.6vw, 20px);
	background-color: var(--goyn-ck-card);
	text-align: left;
}

.goyn-cart .cross-sells ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 12px;
}

.goyn-cart .cross-sells ul.products .woocommerce-loop-product__title {
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--goyn-ck-title);
}

.goyn-cart .cross-sells ul.products .price {
	display: block;
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--goyn-ck-line);
}

.goyn-cart .cross-sells ul.products .add_to_cart_button {
	padding: 10px 16px;
	font-size: 10.5px;
	letter-spacing: 1.6px;
}

/* --- la tabella --- */

.goyn-cart .shop_table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	background-color: transparent;
}

/*
 * ⚠️ Le intestazioni si nascondono con `.goyn-sr-only` e non con `display: none`:
 *    sono le etichette delle colonne, e in una tabella servono a chi la legge con
 *    uno screen reader per sapere che "€ 5,80" è il totale della riga. Nell'app la
 *    riga delle intestazioni è nascosta sotto gli 860px per lo stesso motivo per cui
 *    qui è sempre fuori schermo: le righe sono schede, non celle.
 */
.goyn-cart .shop_table thead th {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Ogni riga diventa una scheda a tre colonne. `display: grid` su un `<tr>` è
 * lecito e sostituisce il modello tabellare — le celle diventano celle di griglia.
 */
.goyn-cart .shop_table .cart_item {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 14px clamp(14px, 2vw, 28px);
	padding: clamp(16px, 1.8vw, 22px) 0;
	border-bottom: 1px solid var(--goyn-ck-rule);
}

/* ⚠️ Tre classi: `.woocommerce table.shop_table td` del suo foglio è (0,2,2). */
.goyn-cart .shop_table .cart_item td {
	padding: 0;
	border: 0;
	background-color: transparent;
	vertical-align: middle;
	font-size: 14px;
	color: var(--goyn-ck-muted);
}

/*
 * Fotografia e nome nella stessa cella visiva: le due celle di WooCommerce
 * (`.product-thumbnail` e `.product-name`) diventano una coppia affiancata grazie
 * a `display: contents` sulla riga — no, meglio: la miniatura resta la prima
 * colonna e il nome le sta accanto dentro la stessa area.
 */
.goyn-cart .shop_table .product-remove {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
}

.goyn-cart .shop_table .product-thumbnail {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: var(--goyn-ck-thumb-gap);
}

.goyn-cart .shop_table .product-thumbnail img {
	width: var(--goyn-ck-thumb);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background-color: var(--goyn-petrol-deep, #163e46);
}

/*
 * ⚠️ Il selettore porta `td` e la classe della riga: `.woocommerce table.shop_table
 *    td { padding: 9px 12px }` del suo foglio è (0,2,2), e senza quei due pezzi in
 *    più il rientro non avrebbe effetto. Quattro classi più un elemento (0,4,1)
 *    bastano, e sono meglio di un `!important` — che qui era la prima stesura.
 *
 * Il nome vive accanto alla miniatura: lo spazio glielo fa il rientro, uguale alla
 * larghezza della foto più il suo distacco.
 */
.goyn-cart .shop_table .cart_item td.product-name {
	grid-column: 1;
	grid-row: 1;
	padding-left: calc(var(--goyn-ck-thumb) + var(--goyn-ck-thumb-gap));
}

.goyn-cart .shop_table .product-name a {
	display: block;
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--goyn-ck-title);
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-cart .shop_table .product-name a:hover {
	color: var(--goyn-ck-accent);
}

.goyn-cart .shop_table .cart_item td.product-price {
	grid-column: 1;
	grid-row: 2;
	padding-left: calc(var(--goyn-ck-thumb) + var(--goyn-ck-thumb-gap));
	font-size: 12.5px;
	color: var(--goyn-ck-muted);
}

.goyn-cart .shop_table .product-quantity {
	grid-column: 2;
	grid-row: 1 / span 2;
}

.goyn-cart .shop_table .product-subtotal {
	grid-column: 3;
	grid-row: 2;
	justify-self: end;
	font-family: var(--goyn-font-display);
	font-size: 20px;
	color: var(--goyn-ck-title);
}

/*
 * La crocetta "rimuovi" di WooCommerce è una `<a class="remove">×</a>`.
 *
 * ⚠️⚠️ QUI L'`!important` SERVE, ed è l'unico del progetto. WooCommerce scrive
 *      `.woocommerce a.remove { color: var(--wc-red) !important }`: contro un
 *      `!important` nessuna specificità basta, e la crocetta restava rosso mattone
 *      in mezzo a una tavolozza che non ha quel rosso. Un `!important` si può
 *      battere solo con un altro `!important` — e il commento serve perché il
 *      prossimo che lo trova non lo prenda per pigrizia.
 */
.goyn-cart .shop_table a.remove {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 0;
	background: none;
	font-size: 20px;
	line-height: 1;
	color: var(--goyn-ck-muted) !important;
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease),
		transform var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-cart .shop_table a.remove:hover {
	background: none;
	color: var(--goyn-ck-accent) !important;
	transform: rotate(90deg);
}

/* --- il campo quantità --- */

.goyn-cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--goyn-ck-rule);
}

.goyn-cart .quantity .qty {
	width: 54px;
	padding: 10px 6px;
	border: 0;
	background: none;
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 13px;
	text-align: center;
	color: var(--goyn-ck-title);
}

/* --- la riga delle azioni: coupon e "aggiorna carrello" --- */

.goyn-cart .shop_table td.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: clamp(18px, 2vw, 26px) 0 0;
	border: 0;
	text-align: left;
}

.goyn-cart .coupon {
	display: flex;
	flex: 1 1 260px;
	gap: 8px;
}

.goyn-cart .coupon #coupon_code {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	padding: 13px 14px;
	border: 1px solid var(--goyn-ck-rule);
	background-color: var(--goyn-ck-bg);
	font-family: var(--goyn-font-body);
	font-size: 13.5px;
	color: var(--goyn-ink, #1a2c30);
}

/*
 * I bottoni di WooCommerce. Non si aggiunge `.goyn-btn` al markup — quel markup
 * non è nostro e un aggiornamento la porterebbe via — quindi le proprietà si
 * ripetono qui, con l'interlinea 1,5 dell'app e non l'1 di `.goyn-btn`.
 */
.goyn-cart .button,
.goyn-co .button,
.goyn-co #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border: 1px solid var(--goyn-ck-line);
	border-radius: 0;
	background-color: var(--goyn-ck-line);
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1.5;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--goyn-cream, #e9e5d9);
	cursor: pointer;
	transition: background-color var(--goyn-dur, 0.5s) var(--goyn-ease),
		color var(--goyn-dur, 0.5s) var(--goyn-ease);
}

.goyn-cart .button:hover,
.goyn-co .button:hover,
.goyn-co #place_order:hover {
	background-color: var(--goyn-petrol-deep, #163e46);
	border-color: var(--goyn-petrol-deep, #163e46);
	color: var(--goyn-peach, #e8c39f);
}

/*
 * ⚠️⚠️ I BOTTONI `alt` DI WOOCOMMERCE VOGLIONO QUATTRO CLASSI.
 *      `.woocommerce a.button.alt { background-color: #7f54b3 }` è (0,3,1), e la mia
 *      `.goyn-cart .button` (0,2,0) perdeva: in pagina "Procedi con l'ordine" era
 *      VIOLA — il colore di WooCommerce — dentro un riquadro crema, e con il testo
 *      che sbordava perché nemmeno la larghezza aveva effetto.
 *
 *      Sono i bottoni "principali" di WooCommerce: quello del carrello verso la
 *      cassa e l'ordine finale. Qui prendono lo stesso vestito degli altri.
 */
.goyn-cart .woocommerce a.button.alt,
.goyn-cart .woocommerce button.button.alt,
.goyn-cart .woocommerce input.button.alt,
.goyn-co .woocommerce a.button.alt,
.goyn-co .woocommerce button.button.alt,
.goyn-co .woocommerce input.button.alt {
	background-color: var(--goyn-ck-line);
	border-color: var(--goyn-ck-line);
	color: var(--goyn-cream, #e9e5d9);
}

.goyn-cart .woocommerce a.button.alt:hover,
.goyn-cart .woocommerce button.button.alt:hover,
.goyn-cart .woocommerce input.button.alt:hover,
.goyn-co .woocommerce a.button.alt:hover,
.goyn-co .woocommerce button.button.alt:hover,
.goyn-co .woocommerce input.button.alt:hover {
	background-color: var(--goyn-petrol-deep, #163e46);
	border-color: var(--goyn-petrol-deep, #163e46);
	color: var(--goyn-peach, #e8c39f);
}

/*
 * "Procedi con l'ordine". Il suo foglio lo definisce con tre selettori che
 * cominciano da una classe sul BODY (`.woocommerce-cart .wc-proceed-to-checkout a.checkout-button`),
 * quindi (0,3,1): serve una classe in più, e la misura non può stare sulla regola
 * generica dei bottoni.
 */
.goyn-cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 15px 20px;
	font-size: 11.5px;
}

/* "Aggiorna carrello" è un'azione secondaria: contornata, non piena. */
.goyn-cart .shop_table td.actions button[name='update_cart'] {
	background-color: transparent;
	color: var(--goyn-ck-line);
}

.goyn-cart .shop_table td.actions button[name='update_cart']:hover {
	background-color: var(--goyn-ck-line);
	color: var(--goyn-cream, #e9e5d9);
}

/* ============================================================
   5. Pagina carrello: totali e coupon
   ============================================================ */

.goyn-cart .cart_totals h2 {
	margin: 0 0 18px;
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 12.5px;
	line-height: normal;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--goyn-ck-title);
}

.goyn-cart .cart_totals table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.goyn-cart .cart_totals table th,
.goyn-cart .cart_totals table td {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--goyn-ck-rule);
	background-color: transparent;
	font-size: 13.5px;
	font-weight: 400;
	text-align: left;
	color: var(--goyn-ck-muted);
}

.goyn-cart .cart_totals table td {
	text-align: right;
	color: var(--goyn-ck-title);
}

.goyn-cart .cart_totals .order-total th,
.goyn-cart .cart_totals .order-total td {
	border-bottom: 0;
	padding-top: 16px;
}

.goyn-cart .cart_totals .order-total th {
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--goyn-ck-title);
}

.goyn-cart .cart_totals .order-total td {
	font-family: var(--goyn-font-display);
	font-size: 26px;
}

.goyn-cart .cart_totals .order-total td .amount {
	font-weight: 400;
}

/*
 * La riga della spedizione si incolonna: in 340px l'etichetta e "Spedizione
 * standard: € 4,90" affiancate al 50% davano due colonne strette con il valore che
 * andava a capo tre volte. Misurato a schermo.
 */
.goyn-cart .cart_totals .woocommerce-shipping-totals {
	display: block;
}

.goyn-cart .cart_totals .woocommerce-shipping-totals th,
.goyn-cart .cart_totals .woocommerce-shipping-totals td {
	display: block;
	width: auto;
	text-align: left;
}

.goyn-cart .cart_totals .woocommerce-shipping-totals th {
	padding-bottom: 4px;
	border-bottom: 0;
}

/* Le opzioni di spedizione: un elenco senza pallini, con i radio a filo. */
.goyn-cart .shipping ul,
.goyn-co .shipping ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.goyn-cart .shipping ul li,
.goyn-co .shipping ul li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 6px;
}

.goyn-cart .woocommerce-shipping-destination,
.goyn-co .woocommerce-shipping-destination {
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--goyn-ck-muted);
}

.goyn-cart .shipping-calculator-button {
	font-size: 11.5px;
	font-family: var(--goyn-font-label);
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--goyn-ck-accent);
}

.goyn-cart .wc-proceed-to-checkout {
	margin-top: 20px;
	padding: 0;
}

.goyn-cart .wc-proceed-to-checkout .checkout-button {
	display: flex;
	width: 100%;
}

/* --- carrello vuoto --- */

.goyn-cart .cart-empty,
.goyn-cart .wc-empty-cart-message {
	margin: 0 0 22px;
	font-family: var(--goyn-font-accent);
	font-style: italic;
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.4;
	color: var(--goyn-ck-line);
}

.goyn-cart .return-to-shop {
	margin: 0;
}

/* ============================================================
   6. Cassa: barra dei passi e cornice
   ============================================================ */

.goyn-co__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(24px, 3vw, 40px);
	padding-bottom: 16px;
	border-bottom: 1px solid var(--goyn-ck-rule);
}

.goyn-co__steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 1.8px;
	color: var(--goyn-ck-muted);
}

.goyn-co__step:not(:last-child)::after {
	content: '›';
	margin-left: 10px;
	color: var(--goyn-ck-rule);
}

/*
 * Il passo attivo e quelli già fatti si distinguono per PESO e colore, non solo
 * per colore: chi non distingue le tinte vede comunque dove si trova. E
 * `aria-current="step"` nel markup lo dice a chi non vede affatto.
 */
.goyn-co__step.is-on {
	font-weight: 600;
	color: var(--goyn-ck-accent);
}

.goyn-co__step.is-done {
	color: var(--goyn-ck-line);
}

.goyn-co__safe {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 1.6px;
	color: var(--goyn-ck-muted);
}

.goyn-co__title {
	margin: 0 0 clamp(26px, 3vw, 42px);
	font-size: clamp(30px, 4vw, 60px);
	line-height: 0.94;
	color: var(--goyn-ck-title);
}

/* ============================================================
   7. Cassa: il modulo
   ============================================================ */

/*
 * ⚠️ Anche qui una griglia invece dei float di WooCommerce
 *    (`#customer_details .col-1 { float: left; width: 48% }`): sui figli di una
 *    griglia il float non si applica, quindi non c'è niente da annullare.
 */
.goyn-co .checkout.woocommerce-checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--goyn-ck-aside);
	/*
	 * ⚠️⚠️ `min-content 1fr` E NON DUE RIGHE AUTOMATICHE. Il modulo dei dati copre
	 *      entrambe le righe, e con due tracce `auto` il browser gli distribuisce
	 *      l'altezza fra le due: la prima riga diventava alta ~450px invece dei 35 del
	 *      titolo, e fra "Il tuo ordine" e la tabella si apriva un buco di 90px.
	 *      Misurato: titolo a y = 425, riepilogo a y = 566.
	 *
	 *      Con la seconda traccia FLESSIBILE (`1fr`) la regola cambia: un elemento che
	 *      attraversa una traccia flessibile non contribuisce al dimensionamento
	 *      intrinseco delle altre. La prima riga torna alta quanto il titolo e il
	 *      riepilogo gli sta subito sotto.
	 */
	grid-template-rows: min-content 1fr;
	gap: clamp(24px, 3vw, 56px);
	align-items: start;
}

/*
 * ⚠️⚠️ LE RIGHE VANNO DICHIARATE, o il riepilogo finisce mille pixel più in basso.
 *      Il modulo dei dati è alto ~900px e occupa la riga 1; il titolo del riepilogo
 *      va in riga 1 colonna 2, ma il riepilogo — collocato solo per colonna — cade
 *      in riga 2, che comincia DOPO la riga 1. Misurato: il titolo a y = 425 e la
 *      tabella a y = 1365, con un buco di novecento pixel in mezzo.
 *
 *      Con il modulo che copre entrambe le righe (`1 / span 2`), la riga 1 è alta
 *      quanto il titolo e il riepilogo gli sta subito sotto. `align-self: start`
 *      perché non deve stirarsi fino in fondo alla colonna.
 */
.goyn-co #customer_details {
	grid-column: 1;
	grid-row: 1 / span 2;
}

/* Il distacco dal riepilogo lo dà già il `gap` della griglia: il margine è di troppo. */
.goyn-co #order_review_heading {
	grid-column: 2;
	grid-row: 1;
	margin-bottom: 0;
}

.goyn-co #order_review {
	grid-column: 2;
	grid-row: 2;
	align-self: start;
}

.goyn-co #customer_details .col2-set,
.goyn-co #customer_details .col-1,
.goyn-co #customer_details .col-2 {
	float: none;
	width: auto;
}

.goyn-co #customer_details .col-2 {
	margin-top: clamp(22px, 2.6vw, 34px);
}

.goyn-co h3,
.goyn-co #order_review_heading {
	margin: 0 0 16px;
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 12.5px;
	line-height: normal;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: var(--goyn-ck-title);
}

/* --- i campi --- */

.goyn-co .form-row {
	display: block;
	margin: 0 0 12px;
	padding: 0;
}

.goyn-co .woocommerce-billing-fields label,
.goyn-co .woocommerce-shipping-fields label,
.goyn-co .woocommerce-additional-fields label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--goyn-font-label);
	font-weight: 500;
	font-size: 10.5px;
	line-height: normal;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--goyn-ck-muted);
}

.goyn-co .required {
	color: var(--goyn-ck-accent);
	text-decoration: none;
}

/*
 * ⚠️ Tre classi e le proprietà tutte dichiarate: `.woocommerce form .form-row
 *    .input-text` del suo foglio è (0,2,2), e i reset del tema colpiscono `input`
 *    e `select` a (0,1,1). Una classe sola non basterebbe mai.
 */
.goyn-co .woocommerce-checkout .input-text,
.goyn-co .woocommerce-checkout select,
.goyn-co .woocommerce-checkout textarea {
	display: block;
	width: 100%;
	appearance: none;
	padding: 15px 16px;
	border: 1px solid rgba(31, 83, 93, 0.2);
	border-radius: 0;
	background-color: var(--goyn-ck-card);
	outline: none;
	font-family: var(--goyn-font-body);
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--goyn-ink, #1a2c30);
	transition: border-color 0.4s var(--goyn-ease), background-color 0.4s var(--goyn-ease);
}

.goyn-co .woocommerce-checkout .input-text:focus,
.goyn-co .woocommerce-checkout select:focus,
.goyn-co .woocommerce-checkout textarea:focus {
	border-color: var(--goyn-ck-line);
	background-color: #fff;
}

.goyn-co .form-row-first,
.goyn-co .form-row-last {
	width: calc(50% - 6px);
}

.goyn-co label.checkbox,
.goyn-co .woocommerce-form__label-for-checkbox {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--goyn-font-body);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--goyn-ck-muted);
}

/* ============================================================
   8. Cassa: riepilogo e pagamento
   ============================================================ */

.goyn-co #order_review {
	padding: clamp(20px, 2.4vw, 30px);
	background-color: var(--goyn-ck-card);
}

.goyn-co .woocommerce-checkout-review-order-table {
	width: 100%;
	margin: 0 0 18px;
	border: 0;
	border-collapse: collapse;
}

.goyn-co .woocommerce-checkout-review-order-table th,
.goyn-co .woocommerce-checkout-review-order-table td {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid var(--goyn-ck-rule);
	background-color: transparent;
	font-size: 13.5px;
	font-weight: 400;
	text-align: left;
	color: var(--goyn-ck-muted);
}

.goyn-co .woocommerce-checkout-review-order-table td {
	text-align: right;
	color: var(--goyn-ck-title);
}

.goyn-co .woocommerce-checkout-review-order-table thead th {
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--goyn-ck-title);
}

.goyn-co .woocommerce-checkout-review-order-table .order-total th,
.goyn-co .woocommerce-checkout-review-order-table .order-total td {
	border-bottom: 0;
	padding-top: 16px;
}

.goyn-co .woocommerce-checkout-review-order-table .order-total td {
	font-family: var(--goyn-font-display);
	font-size: 26px;
}

.goyn-co .product-quantity {
	color: var(--goyn-ck-muted);
}

/* --- i metodi di pagamento --- */

.goyn-co #payment {
	background: none;
	border-radius: 0;
}

.goyn-co .wc_payment_methods {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
}

.goyn-co .wc_payment_method {
	margin: 0 0 10px;
}

.goyn-co .wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--goyn-ck-title);
	cursor: pointer;
}

.goyn-co .payment_box {
	margin: 10px 0 0;
	padding: 14px 16px;
	background-color: var(--goyn-ck-bg);
	border-radius: 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--goyn-ck-muted);
}

.goyn-co .payment_box::before {
	display: none;
}

.goyn-co #place_order {
	width: 100%;
	margin-top: 16px;
	float: none;
}

.goyn-co .woocommerce-terms-and-conditions-wrapper {
	margin: 16px 0 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--goyn-ck-muted);
}

/* ============================================================
   9. Cassa: la conferma dell'ordine
   ------------------------------------------------------------
   `order-received`: qui il riepilogo è l'unico contenuto, quindi la griglia a due
   colonne non serve e il blocco torna in colonna singola centrata.
   ============================================================ */

.goyn-co--done .goyn-co__woo {
	max-width: 760px;
}

.goyn-co .woocommerce-thankyou-order-received {
	margin: 0 0 24px;
	font-family: var(--goyn-font-accent);
	font-style: italic;
	font-size: clamp(20px, 2.2vw, 30px);
	line-height: 1.4;
	color: var(--goyn-ck-line);
}

.goyn-co .woocommerce-thankyou-order-details {
	display: flex;
	flex-wrap: wrap;
	gap: 14px clamp(20px, 3vw, 44px);
	margin: 0 0 clamp(24px, 3vw, 40px);
	padding: clamp(18px, 2vw, 26px);
	background-color: var(--goyn-ck-card);
	list-style: none;
}

.goyn-co .woocommerce-thankyou-order-details li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border: 0;
	font-family: var(--goyn-font-label);
	font-size: 10px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--goyn-ck-muted);
}

.goyn-co .woocommerce-thankyou-order-details li strong {
	font-family: var(--goyn-font-body);
	font-size: 15px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--goyn-ck-title);
}

/* ============================================================
   10. Il pannello laterale
   ------------------------------------------------------------
   ⚠️ `<dialog>`: senza l'attributo `open` lo nasconde il foglio del BROWSER, non
      il nostro — senza JavaScript non copre la pagina e non entra nel giro di
      tabulazione. Stessa scelta dell'overlay ricerca, e qui serve anche il livello
      superiore, perché l'header è `position: fixed`.
   ============================================================ */

.goyn-cart-drawer {
	--goyn-cd-bg: var(--goyn-cream, #e9e5d9);
	--goyn-cd-title: var(--goyn-petrol-deep, #163e46);
	--goyn-cd-accent: var(--goyn-rust, #c0603c);
	--goyn-cd-veil: rgba(12, 36, 41, 0.55);
	/*
	 * Il TETTO della larghezza, non la larghezza: il pannello occupa un terzo della
	 * finestra e si ferma qui. È la stessa forma dei `clamp()` delle testate — il
	 * controllo del pannello regola il valore su uno schermo grande, il termine
	 * centrale decide su tutti gli altri.
	 *
	 * Perché un terzo e non i 430px fissi dell'app: su un monitor da 2560 quei 430px
	 * sono una striscia, su un portatile da 1280 sono un terzo. Il pavimento (340px)
	 * è la larghezza sotto la quale le righe del carrello si stringono troppo.
	 */
	--goyn-cd-width: 480px;

	/* Le misure del dialog nativo, azzerate: il pannello sta a destra, a tutta altezza. */
	width: clamp(340px, 33vw, var(--goyn-cd-width));
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0 0 0 auto;
	border: 0;
	padding: 0;
	overflow: hidden;
	color: var(--goyn-cd-title);
	background-color: var(--goyn-cd-bg);
}

.goyn-cart-drawer::backdrop {
	background-color: var(--goyn-cd-veil);
}

/*
 * L'entrata: il pannello scivola da destra, il velo sfuma. I valori dell'originale
 * (0,55s per il pannello, 0,4s per il velo).
 *
 * ⚠️ Sta su `[open]`, l'attributo che mette `showModal()`: così lo stato iniziale
 *    non esiste prima che il pannello sia davvero aperto.
 */
.goyn-cart-drawer[open] {
	animation: goyn-cd-in 0.55s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.goyn-cart-drawer[open]::backdrop {
	animation: goyn-cd-veil 0.4s var(--goyn-ease, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes goyn-cd-in {
	from {
		transform: translateX(100%);
	}

	to {
		transform: none;
	}
}

@keyframes goyn-cd-veil {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*
 * ⚠️ Il contenuto sta in un `__inner`, e non è decorazione: i clic sul velo di un
 *    `<dialog>` arrivano al dialog stesso, quindi lo script chiude quando il
 *    bersaglio È il dialog. Senza un contenitore interno, ogni clic nel pannello
 *    avrebbe il dialog come bersaglio e il pannello si chiuderebbe da solo.
 */
.goyn-cart-drawer__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.goyn-cart-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex: none;
	padding: 20px clamp(18px, 2vw, 26px);
	border-bottom: 1px solid var(--goyn-ck-rule);
}

.goyn-cart-drawer__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-weight: 600;
	font-size: 12.5px;
	line-height: normal;
	letter-spacing: 2.2px;
	color: var(--goyn-cd-title);
}

/*
 * Il contatore dentro il titolo: qui è una pastiglia in linea e non il badge
 * sull'icona, quindi si riposiziona. È lo stesso elemento — un solo frammento
 * aggiorna entrambi i posti.
 */
.goyn-cart-drawer__title .goyn-cart-count {
	position: static;
	top: auto;
	right: auto;
}

.goyn-cart-drawer .goyn-cart-drawer__close {
	flex: none;
	display: grid;
	place-items: center;
	padding: 4px;
	border: 0;
	background: none;
	line-height: 0;
	color: var(--goyn-ck-line);
	cursor: pointer;
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease),
		transform var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-cart-drawer .goyn-cart-drawer__close:hover,
.goyn-cart-drawer .goyn-cart-drawer__close:focus-visible {
	color: var(--goyn-cd-accent);
	transform: rotate(90deg);
}

.goyn-cart-drawer__scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.goyn-cart-drawer__body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/* Mentre una richiesta è in volo il pannello si smorza: dice che sta lavorando. */
.goyn-cart-drawer.is-busy .goyn-cart-drawer__body {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-cart-drawer__ship {
	padding: 16px clamp(18px, 2vw, 26px);
}

.goyn-cart-drawer__lines {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.goyn-cart-drawer__line {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px clamp(18px, 2vw, 26px);
	border-bottom: 1px solid var(--goyn-ck-rule);
}

.goyn-cart-drawer__photo {
	flex: none;
	width: 64px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--goyn-petrol-deep, #163e46);
}

/* ⚠️ Discendente: `.elementor img` e `.goyn-widget img` del tema sono (0,1,1). */
.goyn-cart-drawer .goyn-cart-drawer__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.goyn-cart-drawer__line-body {
	flex: 1 1 0;
	min-width: 0;
}

.goyn-cart-drawer .goyn-cart-drawer__name {
	display: block;
	font-weight: 600;
	font-size: 11.5px;
	line-height: 1.4;
	letter-spacing: 1.6px;
	color: var(--goyn-cd-title);
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-cart-drawer .goyn-cart-drawer__name:hover {
	color: var(--goyn-cd-accent);
}

.goyn-cart-drawer__variant {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--goyn-ck-muted);
}

.goyn-cart-drawer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 10px;
}

.goyn-cart-drawer__qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--goyn-ck-rule);
}

.goyn-cart-drawer .goyn-cart-drawer__qty-field {
	width: 42px;
	padding: 6px 2px;
	border: 0;
	background: none;
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 12.5px;
	text-align: center;
	color: var(--goyn-cd-title);
	appearance: textfield;
}

/* Le frecce native del campo numerico: via, ci sono i due bottoni. */
.goyn-cart-drawer .goyn-cart-drawer__qty-field::-webkit-outer-spin-button,
.goyn-cart-drawer .goyn-cart-drawer__qty-field::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

.goyn-cart-drawer .goyn-cart-drawer__step {
	width: 26px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	line-height: 1;
	color: var(--goyn-ck-muted);
	cursor: pointer;
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-cart-drawer .goyn-cart-drawer__step:hover {
	color: var(--goyn-cd-accent);
}

/*
 * ⚠️ Il bottone "Aggiorna" è fuori schermo, NON assente: senza JavaScript è l'unico
 *    modo di applicare una quantità digitata nel campo. Con lo script il modulo si
 *    invia da sé al cambio del campo, e il bottone non serve a nessuno che lo veda.
 */
.goyn-cart-drawer .goyn-cart-drawer__qty-go {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.goyn-cart-drawer__price {
	font-family: var(--goyn-font-label);
	font-weight: 600;
	font-size: 12.5px;
	color: var(--goyn-cd-title);
}

.goyn-cart-drawer .goyn-cart-drawer__remove {
	flex: none;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	color: var(--goyn-ck-muted);
	transition: color var(--goyn-dur-fast, 0.35s) var(--goyn-ease),
		transform var(--goyn-dur-fast, 0.35s) var(--goyn-ease);
}

.goyn-cart-drawer .goyn-cart-drawer__remove:hover {
	color: var(--goyn-cd-accent);
	transform: rotate(90deg);
}

.goyn-cart-drawer__foot {
	flex: none;
	padding: 18px clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 28px);
	border-top: 1px solid var(--goyn-ck-rule);
	background-color: var(--goyn-cd-bg);
}

.goyn-cart-drawer__total-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	font-size: 13.5px;
	color: var(--goyn-ck-muted);
}

.goyn-cart-drawer__total-row--total {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--goyn-ck-rule);
	color: var(--goyn-cd-title);
}

.goyn-cart-drawer__total-row--total .goyn-label {
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: 2.2px;
}

.goyn-cart-drawer__total-row--total .goyn-display {
	font-size: 26px;
	line-height: 1;
}

.goyn-cart-drawer .goyn-cart-drawer__go {
	display: flex;
	width: 100%;
	justify-content: center;
	margin-top: 10px;
}

.goyn-cart-drawer__empty {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 22px;
	padding: clamp(24px, 3vw, 40px) clamp(18px, 2vw, 26px);
}

.goyn-cart-drawer__empty-text {
	margin: 0;
	font-size: clamp(19px, 1.9vw, 26px);
	line-height: 1.4;
	color: var(--goyn-ck-line);
}

/* L'anteprima nel pannello di Elementor: un riquadro nel flusso, non a tutta pagina. */
.goyn-cart-drawer--preview {
	width: min(var(--goyn-cd-width), 100%);
	height: auto;
	min-height: 320px;
	margin: 0;
	border: 1px solid var(--goyn-ck-rule);
	animation: none;
}

/* ============================================================
   11. Avvisi
   ------------------------------------------------------------
   Gli avvisi di WooCommerce sono l'unica via con cui carrello e cassa dicono
   «coupon non valido» o «nessun metodo di pagamento disponibile». Devono farsi
   vedere, e non sembrare un guasto.
   ============================================================ */

.goyn-cart .woocommerce-notices-wrapper:empty,
.goyn-co .woocommerce-notices-wrapper:empty {
	display: none;
}

/*
 * ⚠️ Gli avvisi di WooCommerce hanno un'icona in un `::before` che arriva dal suo
 *    font di icone. Quel font qui non è caricato — il tema disattiva i font che non
 *    usa — e al suo posto si vedeva un glifo casuale davanti al messaggio, che
 *    sembra un errore di codifica. Il filetto colorato a sinistra dice già di che
 *    genere di avviso si tratta, quindi l'icona si toglie.
 */
.goyn-cart .woocommerce-error::before,
.goyn-cart .woocommerce-message::before,
.goyn-cart .woocommerce-info::before,
.goyn-co .woocommerce-error::before,
.goyn-co .woocommerce-message::before,
.goyn-co .woocommerce-info::before {
	display: none;
}

.goyn-cart .woocommerce-error,
.goyn-cart .woocommerce-message,
.goyn-cart .woocommerce-info,
.goyn-co .woocommerce-error,
.goyn-co .woocommerce-message,
.goyn-co .woocommerce-info {
	margin: 0 0 20px;
	padding: 14px 16px;
	background-color: var(--goyn-ck-card);
	border: 0;
	border-left: 3px solid var(--goyn-ck-line);
	list-style: none;
	font-size: 13px;
	line-height: 1.6;
	color: var(--goyn-ck-title);
}

.goyn-cart .woocommerce-error,
.goyn-co .woocommerce-error {
	border-left-color: var(--goyn-ck-accent);
}

.goyn-cart .woocommerce-message .button,
.goyn-co .woocommerce-message .button {
	float: none;
	margin-left: 14px;
	padding: 9px 16px;
	font-size: 10px;
	letter-spacing: 1.6px;
}

.goyn-cart .woocommerce-error li,
.goyn-cart .woocommerce-message li,
.goyn-co .woocommerce-error li,
.goyn-co .woocommerce-message li {
	margin: 0;
	list-style: none;
}

/*
 * L'avviso "nessun metodo di pagamento": occupa la colonna del pagamento e va
 * dentro il riquadro del riepilogo, o sembra un errore del sito invece di una
 * configurazione mancante.
 */
.goyn-co #payment .woocommerce-notice,
.goyn-co #payment .woocommerce-info {
	margin: 0;
}

/* ============================================================
   12. Responsive
   ------------------------------------------------------------
   ⚠️ Dal più largo al più stretto.
   ============================================================ */

@media (max-width: 1080px) {
	.goyn-cart .woocommerce,
	.goyn-co .checkout.woocommerce-checkout {
		grid-template-columns: minmax(0, 1fr);
	}

	/* In colonna singola i totali scendono sotto il carrello, e i consigliati dopo. */
	.goyn-cart .woocommerce .cart-collaterals .cart_totals {
		grid-column: 1;
		grid-row: 3;
	}

	.goyn-cart .woocommerce .cart-collaterals .cross-sells {
		grid-row: 4;
	}

	/*
	 * Alla cassa il riepilogo passa SOPRA il modulo: prima si guarda cosa si sta
	 * comprando, poi si compila. È l'ordine dell'originale (`order: -1` su
	 * `.co-summary`).
	 */
	/*
	 * In colonna singola le righe esplicite andrebbero riscritte una per una: si
	 * torna all'auto (`grid-row: auto`) e l'ordine lo decide `order`, che su una
	 * griglia funziona come su un flex.
	 */
	.goyn-co #customer_details,
	.goyn-co #order_review_heading,
	.goyn-co #order_review {
		grid-column: 1;
		grid-row: auto;
	}

	.goyn-co #order_review_heading {
		order: -2;
	}

	.goyn-co #order_review {
		order: -1;
		margin-bottom: clamp(22px, 2.6vw, 34px);
	}

	.goyn-co #customer_details {
		order: 1;
	}
}

@media (max-width: 860px) {
	/* I consigliati passano a due colonne: tre da ~100px non sono schede. */
	.goyn-cart .cross-sells ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/*
	 * Le righe del carrello perdono la colonna centrale: quantità e totale scendono
	 * sotto il nome. È il riflusso dell'originale (`grid-template-areas`).
	 */
	.goyn-cart .shop_table .cart_item {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.goyn-cart .shop_table .cart_item td.product-quantity {
		grid-column: 1;
		grid-row: 3;
		padding-left: calc(var(--goyn-ck-thumb) + var(--goyn-ck-thumb-gap));
	}

	.goyn-cart .shop_table .product-subtotal {
		grid-column: 2;
		grid-row: 3;
	}

	.goyn-cart .shop_table .product-remove {
		grid-column: 2;
		grid-row: 1;
	}
}

@media (max-width: 560px) {
	.goyn-cart .cross-sells ul.products {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Il pannello a tutta larghezza, come nell'originale. Si scrive la `width` e non
	 * la variabile: il `clamp()` ha un pavimento di 340px, che su uno schermo da 320
	 * sborderebbe.
	 */
	.goyn-cart-drawer {
		width: 100vw;
	}

	.goyn-co .form-row-first,
	.goyn-co .form-row-last {
		float: none;
		width: 100%;
	}

	/*
	 * La fotografia RESTA anche sul telefono, come nell'app — una riga di carrello
	 * senza immagine è un rigo di testo — e si rimpicciolisce: il `clamp()` la porta
	 * al pavimento di 48px, e nome, prezzo e quantità seguono il rientro perché
	 * leggono la stessa variabile.
	 *
	 * ⚠️ Provato prima a nascondere la cella: la sua area di griglia è la stessa del
	 *    nome (riga 1, colonna 1), quindi restava un elemento sovrapposto largo zero.
	 *    Se un giorno servisse toglierla, va nascosta la CELLA e non l'immagine.
	 */
	/*
	 * ⚠️⚠️ LA RIGA DEL COUPON FACEVA SBORDARE LA PAGINA DI 21px.
	 *      `td.actions` è una fila con il campo del codice e due bottoni, e la sua
	 *      larghezza MINIMA non stava nei 460px disponibili: una `<table>` in layout
	 *      automatico può crescere oltre il proprio `width: 100%` quando il contenuto
	 *      non si stringe, e la riga si trascinava dietro tutta la tabella. Misurato:
	 *      riga larga 471,64 in un contenitore da 460, e `scrollWidth` del documento
	 *      521 contro 500 di finestra — cioè la pagina scorreva di lato.
	 *
	 *      Su un telefono i tre pezzi vanno incolonnati e larghi tutta la riga: così
	 *      la larghezza minima diventa quella del bottone più largo, che ci sta.
	 */
	.goyn-cart .shop_table td.actions {
		flex-direction: column;
		align-items: stretch;
	}

	.goyn-cart .coupon {
		flex: 1 1 auto;
		flex-direction: column;
	}

	.goyn-cart .coupon #coupon_code,
	.goyn-cart .shop_table td.actions .button {
		width: 100%;
		min-width: 0;
	}

}

/* ============================================================
   12b. Sotto i 768px: WooCommerce reimpagina la tabella, e va fermato
   ------------------------------------------------------------
   ⚠️⚠️ `woocommerce-smallscreen.css` non "aggiusta" la tabella del carrello sui
        telefoni: la RIFÀ. Nasconde la testata, trasforma ogni cella in un blocco
        allineato a destra, ci mette davanti un'etichetta presa da `data-title`,
        colora a bande le righe alterne e dà al campo del coupon e al suo bottone
        una larghezza del 48% con `float`. È un buon ripiego per un tema che non ha
        un'impaginazione propria — e qui la impaginazione propria c'è, ed è la
        griglia dell'app.

        Misurato a 390px prima di questo blocco: davanti a nome, prezzo e quantità
        comparivano le etichette «Prodotto:», «Prezzo:», «Quantità:», «Subtotale:»;
        tutto era allineato a destra; il bottone "Applica codice" era largo 167px
        dentro una colonna da 348 con il testo che sbordava dal proprio fondo; e le
        righe alterne avevano una banda grigia.

        La soglia è la sua, 768px, e non i nostri 860/560: così il suo trattamento
        e la sua disattivazione cominciano insieme, senza una fascia in cui i due
        disegni si sovrappongono.

   ⚠️ Due `!important` in questo blocco, e sono l'unico modo: `text-align: right`
      di WooCommerce è dichiarato `!important`, e contro un `!important` nessuna
      specificità basta. Sono il secondo e il terzo del progetto dopo la crocetta
      "rimuovi", e per la stessa ragione.
   ============================================================ */

@media (max-width: 768px) {
	/* Le etichette da `data-title`: la griglia dice già cosa è cosa. */
	.goyn-cart .shop_table.shop_table_responsive tr td::before {
		content: none;
	}

	/* L'allineamento lo decide la griglia, cella per cella. */
	.goyn-cart .shop_table.shop_table_responsive tr td {
		display: block;
		text-align: left !important;
	}

	.goyn-cart .shop_table.shop_table_responsive .cart_item td.product-subtotal {
		text-align: right !important;
	}

	/* Le bande sulle righe alterne: la separazione è il filetto, non il fondo. */
	.goyn-cart .shop_table.shop_table_responsive tr:nth-child(2n) td {
		background-color: transparent;
	}

	/*
	 * Il campo del coupon e i bottoni a tutta larghezza. Sei classi e due elementi
	 * (0,6,2) per battere i (0,5,2) di `…table.cart td.actions .coupon .button`, che
	 * impone il 48%.
	 */
	.goyn-cart .woocommerce table.cart td.actions .coupon .button,
	.goyn-cart .woocommerce table.cart td.actions .coupon .input-text,
	.goyn-cart .woocommerce table.cart td.actions .coupon input,
	.goyn-cart .woocommerce table.cart td.actions .button {
		float: none;
		width: 100%;
		min-width: 0;
	}

	/*
	 * ⚠️ E di nuovo i due pseudo-elementi di clearfix: `.coupon::before/::after` in
	 *    un contenitore flex in colonna diventano due ELEMENTI FLEX, cioè due righe
	 *    vuote fra il campo e il bottone. Terzo posto del progetto in cui succede.
	 */
	.goyn-cart .coupon::before,
	.goyn-cart .coupon::after {
		display: none;
	}
}

/* ============================================================
   13. prefers-reduced-motion
   ------------------------------------------------------------
   ⚠️ Si annullano le ANIMAZIONI: hanno `fill: both` e partono da uno stato
      spostato, quindi con una durata azzerata dal tema il pannello resterebbe
      fuori schermo per sempre. Vedi la nota in testa a reveal.css.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.goyn-cart-drawer[open],
	.goyn-cart-drawer[open]::backdrop {
		animation: none;
	}

	.goyn-cart__ship-fill,
	.goyn-cart-drawer__ship-fill {
		transition: none;
	}

	.goyn-cart-drawer .goyn-cart-drawer__close:hover,
	.goyn-cart-drawer .goyn-cart-drawer__remove:hover,
	.goyn-cart .shop_table a.remove:hover {
		transform: none;
	}
}