/*
 * Carrello e cassa, rifatti.
 *
 * ⛔ Com'era: una tabella HTML nuda con i bordi di WooCommerce, la colonna «Totale carrello»
 * buttata sotto e centrata dopo 200 pixel di bianco, il pulsante «Procedi» perso in fondo.
 * Su un carrello da 686 euro, il pulsante che porta i soldi era la cosa meno visibile.
 *
 * ⭐ Com'è: due colonne — la lista a sinistra, il riepilogo a destra che RESTA IN VISTA
 * mentre si scorre. È lo schema di ogni negozio moderno, e non per moda: il totale e il
 * pulsante devono essere sempre a portata di pollice.
 *
 * ⚠️ La tabella di WooCommerce non si butta: si ridisegna. Buttarla vorrebbe dire copiare i
 * suoi modelli nel tema, cioè ereditarne la manutenzione — e il carrello è la parte che
 * WooCommerce aggiorna più spesso.
 */

/* ═════════════════════════════════════════════════════════════════════════
 * IL CARRELLO
 * ═══════════════════════════════════════════════════════════════════════ */

/* ⛔ NON `.ntct-negozio-principale`: carrello e cassa sono PAGINE con dentro un codice breve,
   quindi passano da `page.php` e quel contenitore non esiste. Misurato: il carrello usciva
   stretto a meta' pagina, con il riepilogo buttato sotto. Si aggancia il contenitore di
   WooCommerce, che c'e' sempre. */
.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 30px;
	align-items: start;
}

/* I messaggi vanno in cima, a tutta larghezza. */
.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }

.woocommerce-cart form.woocommerce-cart-form { margin: 0; min-width: 0; }

.woocommerce-cart .cart-collaterals {
	position: sticky;
	top: 18px;
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

.woocommerce-cart .cart-collaterals .cart_totals { width: 100% !important; float: none !important; }

/* ── Le righe: schede, non celle di tabella ────────────────────────────── */

.woocommerce-cart table.shop_table {
	display: block;
	border: 0;
	border-radius: 0;
	border-collapse: separate;
}

.woocommerce-cart table.shop_table thead { display: none; }   /* le intestazioni non servono: ogni riga si spiega da sé */
.woocommerce-cart table.shop_table tbody { display: block; }

.woocommerce-cart table.shop_table tr.cart_item {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto;
	grid-template-areas:
		"foto nome  prezzo"
		"foto quant prezzo";
	align-items: center;
	gap: 4px 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ntc-bordo);
}

.woocommerce-cart table.shop_table tr.cart_item td {
	display: block;
	padding: 0;
	border: 0;
}

.woocommerce-cart td.product-thumbnail { grid-area: foto; }

.woocommerce-cart td.product-thumbnail img {
	width: 92px !important;
	height: 92px;
	object-fit: contain;
	background: var(--ntc-chiaro);
	border-radius: var(--ntc-raggio);
}

.woocommerce-cart td.product-name { grid-area: nome; font-size: .92rem; line-height: 1.4; }
.woocommerce-cart td.product-name a { font-weight: 600; }

.woocommerce-cart td.product-quantity { grid-area: quant; }
.woocommerce-cart td.product-quantity .quantity input {
	width: 76px;
	height: 38px;
	text-align: center;
}

.woocommerce-cart td.product-subtotal {
	grid-area: prezzo;
	text-align: right;
	font-size: 1.05rem;
	font-weight: 800;
	white-space: nowrap;
}

/* Il prezzo unitario si nasconde: con quantità 1 ripete il totale, e con quantità 2 confonde.
   Sta nel sottototale, che è quello che si paga. */
.woocommerce-cart td.product-price { display: none !important; }

/* La ✕: piccola e grigia. Cancellare non è l'azione principale di un carrello. */
.woocommerce-cart td.product-remove {
	grid-area: nome;
	justify-self: end;
	align-self: start;
	/* ⛔ LA ✕ NON SI POTEVA CLICCARE. Divide l'area «nome» con la cella del nome, che nel codice
	   di WooCommerce viene DOPO e quindi le si dipinge sopra: trasparente, ma si prende il clic.
	   Misurato il 21/09/2026: al centro della ✕ c'era `TD.product-name`, e tre clic di fila non
	   hanno tolto niente dal carrello. Deve stare SOPRA. */
	position: relative;
	z-index: 2;
}

/* …e il nome si tiene alla larga dalla ✕, altrimenti un titolo lungo ci passa sotto.
   ⛔ Col selettore lungo: la regola delle celle (`tr.cart_item td { padding: 0 }`) è più forte
   di `td.product-name` e lo spazio non c'era — sul telefono la ✕ copriva il titolo. */
.woocommerce-cart table.shop_table tr.cart_item td.product-name { padding-right: 32px; }

.woocommerce-cart td.product-remove a.remove {
	width: 22px;
	height: 22px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: transparent !important;
	color: var(--ntc-tenue) !important;
	font-size: 17px;
	line-height: 1;
}

.woocommerce-cart td.product-remove a.remove:hover {
	background: var(--ntc-chiaro) !important;
	color: var(--ntc-rosso) !important;
}

/* ── Codice promozionale e aggiorna ────────────────────────────────────── */

.woocommerce-cart tr.ntct-riga-azioni,
.woocommerce-cart td.actions {
	display: flex !important;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 18px 0 0 !important;
	border: 0 !important;
}

.woocommerce-cart td.actions .coupon {
	display: flex;
	gap: 8px;
	flex: 1 1 320px;
	padding: 0 !important;
	border: 0 !important;
}

.woocommerce-cart td.actions .coupon label { display: none; }
.woocommerce-cart td.actions .coupon input[type="text"] { flex: 1 1 auto; width: auto !important; height: 42px; }
.woocommerce-cart td.actions .coupon .button { height: 42px; white-space: nowrap; }

/* «Aggiorna carrello» è secondario: si preme solo dopo aver cambiato una quantità. */
.woocommerce-cart td.actions > button[name="update_cart"] {
	background: transparent !important;
	border-color: var(--ntc-bordo) !important;
	color: var(--ntc-testo) !important;
	height: 42px;
}

.woocommerce-cart td.actions > button[name="update_cart"]:disabled { opacity: .45; }

/* ── Il riepilogo ──────────────────────────────────────────────────────── */

.woocommerce-cart .cart_totals h2 {
	margin: 0 0 12px;
	font-size: 1.05rem;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.woocommerce-cart .cart_totals table.shop_table {
	display: table;
	width: 100%;
	margin: 0;
	border: 1px solid var(--ntc-bordo);
	border-radius: var(--ntc-raggio);
	overflow: hidden;
	background: #fff;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	padding: 12px 14px;
	border: 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: .9rem;
	vertical-align: top;
}

.woocommerce-cart .cart_totals table.shop_table th {
	width: 42%;
	background: transparent;
	color: var(--ntc-tenue);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
	border-bottom: 0;
	background: var(--ntc-chiaro);
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--ntc-testo);
}

.woocommerce-cart .cart_totals ul#shipping_method { margin: 0; padding: 0; list-style: none; }
.woocommerce-cart .cart_totals ul#shipping_method li { margin: 0 0 7px; padding: 0; }
.woocommerce-cart .cart_totals .woocommerce-shipping-destination { margin: 8px 0 0; font-size: .82rem; color: var(--ntc-tenue); }

.woocommerce-cart .wc-proceed-to-checkout { padding: 14px 0 0; }

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	height: 52px;
	line-height: 52px;
	padding: 0;
	font-size: .95rem;
	text-align: center;
}

/* Le rassicurazioni sotto il pulsante: sono il momento in cui si esita. */
.ntct-carrello-promesse {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	font-size: .82rem;
	color: var(--ntc-tenue);
}

.ntct-carrello-promesse li { position: relative; padding-left: 21px; margin-bottom: 5px; }
.ntct-carrello-promesse li::before { content: "✓"; position: absolute; left: 0; color: var(--ntc-verde); font-weight: 800; }

/* ⛔ Il vuoto in mezzo: WooCommerce lascia margini calcolati per un impianto a colonne
   flottanti che qui non c'è più. Erano i «200 pixel di bianco» fra la lista e il totale. */
.woocommerce-cart .woocommerce::after,
.woocommerce-cart .woocommerce::before { content: none !important; }
.woocommerce-cart .cross-sells { grid-column: 1 / -1; margin-top: 30px; }

/* ═════════════════════════════════════════════════════════════════════════
 * LA CASSA
 * ⚠️ Si tocca il MINIMO: e' la pagina che fa entrare i soldi, e ogni riga in piu' e' un
 * rischio in piu'. Solo due colonne e i campi leggibili.
 * ═══════════════════════════════════════════════════════════════════════ */

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) 380px;
	gap: 34px;
	align-items: start;
}

/* ⛔⛔ OGNUNO AL SUO POSTO, DICHIARATO. Niente collocazione automatica.
 *
 * Misurato il 02/09/2026 sulla cassa vera: il PRIMO figlio del modulo e'
 * `div.wcpay-express-checkout-wrapper`, il guscio dei pagamenti rapidi di WooCommerce
 * Payments. E' alto ZERO pixel e non si vede — ma occupa lo stesso una casella, si prendeva
 * la colonna larga di sinistra e spingeva TUTTI i dati di fatturazione nella colonnina di
 * destra: campi larghi 182 pixel accanto a 800 pixel di bianco.
 *
 * La collocazione automatica e' fragile per costruzione: basta che un plugin infili un
 * guscio vuoto in cima e tutta la pagina slitta di una casella. Qui si dice a ognuno dove
 * sta, e chi arriva dopo (guscio dei pagamenti rapidi compreso) prende una fascia sua a
 * tutta larghezza invece di rubare una colonna.
 */
.woocommerce-checkout form.checkout > *:not( #customer_details ):not( #order_review_heading ):not( #order_review ) {
	grid-column: 1 / -1;
}

.woocommerce-checkout #customer_details {
	min-width: 0;
	grid-column: 1;
	grid-row: 2 / span 2;
}

.woocommerce-checkout h3 { font-size: 1.05rem; }

.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 2; }
.woocommerce-checkout #order_review         { grid-column: 2; grid-row: 3; }

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
	position: sticky;
	top: 18px;
}

/* ⚠️ Dentro i dati di fatturazione, le due colonne di WooCommerce galleggiano ancora come
   nel 2015: `float` con larghezza al 48%. In una casella di griglia stretta diventano due
   colonnine da 182 pixel. Qui tornano una sotto l'altra, a tutta larghezza. */
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none;
	width: 100%;
}

.woocommerce-checkout #order_review {
	padding: 16px;
	border: 1px solid var(--ntc-bordo);
	border-radius: var(--ntc-raggio);
	background: #fff;
}

.woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table td {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid #f0f0f0;
	font-size: .88rem;
}

.woocommerce-checkout #place_order {
	width: 100%;
	height: 52px;
	font-size: .95rem;
}

.woocommerce-checkout .form-row { margin-bottom: 14px; }

/* ═════════════════════════════════════════════════════════════════════════
 * TELEFONO
 * ⭐ Da telefono si compra piu' che da computer: qui il carrello deve essere MEGLIO, non una
 * versione ristretta. Il riepilogo va sotto la lista, e il pulsante di pagamento resta
 * incollato in basso — sempre a portata di pollice, senza dover scorrere.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; gap: 22px; }

	/* ⛔ Su una colonna sola le righe dichiarate vanno ANNULLATE, o restano i buchi delle
	   caselle vuote: il riepilogo comparirebbe staccato di 800 pixel dai campi. */
	.woocommerce-cart .cart-collaterals,
	.woocommerce-checkout #customer_details,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review { position: static; grid-column: 1; grid-row: auto; }
}

/* ⛔ Sotto i 768px il foglio «smallscreen» di WooCommerce scrive davanti a ogni cella
   «Prodotto:», «Quantità:», «Subtotale:» (e un «:» orfano accanto alla foto), allinea tutto a
   destra e colora a righe alterne. Le nostre righe sono schede: si spiegano da sole. */
@media (max-width: 768px) {
	.woocommerce-cart table.shop_table_responsive tr.cart_item td::before { content: none !important; display: none !important; }
	.woocommerce-cart table.shop_table_responsive tr.cart_item td { text-align: left !important; background: none !important; }
	.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal { text-align: right !important; }
}

@media (max-width: 640px) {
	.woocommerce-cart table.shop_table tr.cart_item {
		grid-template-columns: 76px minmax(0, 1fr);
		grid-template-areas:
			"foto nome"
			"foto quant"
			"foto prezzo";
		gap: 6px 12px;
		padding: 14px 0;
	}

	.woocommerce-cart td.product-thumbnail img { width: 76px !important; height: 76px; }
	.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-subtotal { text-align: left !important; font-size: 1.02rem; }
	.woocommerce-cart table.shop_table tr.cart_item td.product-name { font-size: .88rem; padding-right: 28px; }

	/* ⛔ La riga del codice sconto allargava la pagina a 525px su un telefono da 412: il pulsante
	   «Applica codice promozionale» su una riga sola misura 245px e la casella non scendeva
	   sotto la sua larghezza di serie. Casella che si stringe, pulsante su due righe. */
	.woocommerce-cart td.actions .coupon { flex: 1 1 100%; min-width: 0; }
	.woocommerce-cart td.actions .coupon input[type="text"] { flex: 1 1 0; min-width: 0; }
	.woocommerce-cart td.actions .coupon .button {
		flex: 0 0 auto;
		width: auto !important;
		max-width: 48%;
		padding: 0 12px;
		white-space: normal;
		line-height: 1.15;
		font-size: .72rem;
	}
	.woocommerce-cart td.actions > button[name="update_cart"] { flex: 1 1 100%; }

	/* L'avviso «aggiunto al carrello» si attacca a quello che segue: 70px di vuoto sul telefono. */
	.woocommerce-cart .woocommerce-notices-wrapper,
	.woocommerce-cart .woocommerce-notices-wrapper > :last-child { margin-bottom: 0 !important; }

	/* Il pulsante che porta al pagamento non si perde mai di vista. */
	.woocommerce-cart .wc-proceed-to-checkout {
		position: sticky;
		bottom: 0;
		z-index: 20;
		margin: 0 -15px;
		padding: 12px 15px calc(12px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96);
		border-top: 1px solid var(--ntc-bordo);
		backdrop-filter: blur(6px);
	}
}