.nsn-footer { background: var(--wp--preset--color--contrast, #23282d); color: var(--nsn-white); padding: 3.5rem 2rem 0; margin-top: 0; }
		.nsn-footer a { color: var(--nsn-white); text-decoration: none; }
		.nsn-footer-main { display: flex; flex-wrap: wrap; gap: 3.5rem; padding-bottom: 2.5rem; }
		.nsn-footer-col { flex: 0 0 calc(20% - 2.1rem); min-width: 160px; }
		.nsn-footer-col--about { flex: 0 0 calc(40% - 4.2rem); min-width: 280px; }
		@media (max-width: 600px) {
			.nsn-footer-col--about, .nsn-footer-col { flex: 1 1 100%; }
		}
		.nsn-footer-heading { font-size: 0.85rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; margin: 0 0 1rem; color: var(--nsn-white); }
		/* Colonne "Naviga", "Shop", "Legale": su desktop restano le tre colonne fisse di
		   sempre (i pulsanti tab sono nascosti, tutti i pannelli visibili). Su mobile
		   diventano vere tab cliccabili (stesso pattern gia usato per "Selezionati per
		   te" in home, vedi inc/product-carousel.php): un pulsante alla volta attivo,
		   un solo pannello visibile, cambio istantaneo via JS senza reload. */
		.nsn-footer-tabs-nav { display: none; }
		@media (max-width: 600px) {
			.nsn-footer-tabs-nav {
				display: flex; gap: 1.75rem; flex: 1 1 100%;
				border-bottom: 1px solid rgba(255,255,255,0.15);
			}
			.nsn-footer-tab-btn {
				background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer;
				font-family: inherit; font-size: 0.85rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
				padding: 0 0 0.9rem; border-bottom: 2px solid transparent;
			}
			.nsn-footer-tab-btn.is-active { color: var(--nsn-white); border-bottom-color: var(--nsn-white); }
			.nsn-footer-tab-panel { display: none; }
			.nsn-footer-tab-panel.is-active { display: block; }
			/* Il pulsante tab fa gia da etichetta, l intestazione ripetuta dentro al
			   pannello ("NAVIGA" sopra i link "Naviga") sarebbe ridondante solo qui. */
			.nsn-footer-tab-panel .nsn-footer-heading { display: none; }
		}
		.nsn-footer-col--about p { color: var(--nsn-white); opacity: 0.85; line-height: 1.6; margin: 0 0 1.75rem; max-width: 38em; }
		.nsn-footer-links { list-style: none; margin: 0; padding: 0; }
		.nsn-footer-links li { margin-bottom: 0.75rem; }
		.nsn-footer-links a, .nsn-footer-link-btn {
			color: rgba(255,255,255,0.85); font-size: 0.95rem; background: none; border: none; outline: none;
			padding: 0; cursor: pointer; font-family: inherit; text-align: left; display: inline-block;
		}
		.nsn-footer-links a:hover, .nsn-footer-link-btn:hover { color: var(--nsn-white); }
		.nsn-footer-social { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
		.nsn-footer-social a {
			width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid rgba(255,255,255,0.29);
			display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); flex-shrink: 0;
		}
		.nsn-footer-social a:hover { color: var(--nsn-white); border-color: var(--nsn-white); }
		.nsn-footer-bottom {
			padding: 1.5rem 0; border-top: 1px solid rgba(255,255,255,0.15);
			display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
		}
		.nsn-footer-impressum { margin: 0; color: rgba(255,255,255,0.54); font-size: 0.85rem; }
		.nsn-footer-payments { flex: 0 0 auto; width: 160px; max-width: 100%; height: auto; display: block; }

/* Modulo di iscrizione ai nuovi arrivi, nel footer (21/09/2026).
   Le regole stanno qui e non in un foglio a parte perche' il footer c e' su
   ogni pagina: un file in piu' sarebbe una richiesta in piu' ovunque.
   Qui sotto lo stile di base del modulo; quello della colonna del footer
   (.nsn-footer-col--feed) viene subito dopo e lo adatta. */

.nsn-feed-modulo { max-width: 320px; }

.nsn-feed-modulo-testo { margin: 0 0 12px; font-size: 13px; line-height: 1.5; opacity: 0.8; }

.nsn-feed-form { display: flex; gap: 8px; flex-wrap: wrap; }

/* box-sizing: senza, il campo sborda dalla colonna (il tema non ha un box-sizing
   globale, quindi padding e bordo si sommano alla larghezza) */
.nsn-feed-form input[type="email"] {
	flex: 1 1 160px;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
	border-radius: 4px;
	font-size: 14px;
	box-sizing: border-box;
}

.nsn-feed-form input[type="email"]::placeholder { color: inherit; opacity: 0.55; }

.nsn-feed-form button {
	flex: 0 0 auto;
	padding: 10px 18px;
	border: 0;
	border-radius: 4px;
	background: #fff;
	color: #111;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-sizing: border-box;
}

.nsn-feed-form button:hover { opacity: 0.85; }

/* la trappola per i bot: presente nel modulo, invisibile a chi guarda */
.nsn-feed-esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.nsn-feed-grazie { font-size: 13px; line-height: 1.5; margin: 0; }

.nsn-feed-errore { font-size: 13px; line-height: 1.5; margin: 0; color: #ffb4b4; }

/* la casella nell area cliente */
.nsn-feed-account { margin: 28px 0 8px; padding: 0; border: 0; }
.nsn-feed-account legend { font-weight: 700; margin-bottom: 10px; padding: 0; }
.nsn-feed-account label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.nsn-feed-account input { margin-top: 3px; }
.nsn-feed-account .nsn-feed-nota { margin: 8px 0 0 28px; font-size: 13px; color: #777; }
/* Pagina di grazie: informativa per chi è cliente senza consenso (spec 0007, tappa 2). */
.nsn-proposte { margin: 32px 0 0; padding: 16px 18px; background: #f6f6f6; border-radius: 6px; font-size: 14px; line-height: 1.6; color: #444; }
.nsn-proposte p { margin: 0 0 8px; }
.nsn-proposte p:last-child { margin: 0; }
.nsn-proposte-no { font-weight: 700; }

/* Il modulo sta nella terza colonna, larga un quinto: campo e bottone uno
   sopra l altro, che affiancati non ci starebbero (21/09/2026). */
.nsn-footer-col--feed .nsn-feed-modulo { max-width: none; }
.nsn-footer-col--feed .nsn-feed-form { flex-direction: column; align-items: stretch; gap: 14px; }

/* Stessi caratteri delle altre colonne (segnalato dall'utente 2026-10-16): testo a 0,95rem
   come i link del footer invece di 13px, campo e bottone in Jost invece dell'Arial dei
   moduli, che il browser non eredita da solo. */
.nsn-footer-col--feed .nsn-feed-modulo-testo { font-size: 0.95rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); opacity: 1; }
.nsn-footer-col--feed .nsn-feed-grazie,
.nsn-footer-col--feed .nsn-feed-errore { font-size: 0.95rem; line-height: 1.6; }

/* Campo: riga sottile con il solo bordo sotto, come il resto del footer, invece
   del riquadro a tutta larghezza che pesava troppo in una colonna stretta.
   flex 0 0 auto: la regola generale gli da' flex 1 1 160px, che in un form
   messo in colonna non e' piu' la larghezza ma l altezza (il campo veniva
   alto 160px). */
.nsn-footer-col--feed .nsn-feed-form input[type="email"] {
	flex: 0 0 auto;
	width: 100%;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 0;
	padding: 6px 0;
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--nsn-white);
}

.nsn-footer-col--feed .nsn-feed-form input[type="email"]:focus {
	outline: none;
	border-bottom-color: var(--nsn-white);
}

.nsn-footer-col--feed .nsn-feed-form input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

/* Bottone bianco pieno e a tutta larghezza: bordato si perdeva nel fondo
   scuro, cosi' si vede ed e' un bersaglio comodo anche da telefono. */
.nsn-footer-col--feed .nsn-feed-form button {
	width: 100%;
	align-self: stretch;
	padding: 11px 18px;
	font-family: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	background: var(--nsn-white, #fff);
	border: 0;
	border-radius: 3px;
	color: #111;
}

.nsn-footer-col--feed .nsn-feed-form button:hover {
	background: rgba(255, 255, 255, 0.85);
	border-color: var(--nsn-white);
	color: #111;
	opacity: 1;
}

/* Riga legale: link legali e carte sulla stessa riga, la ragione sociale subito
   sotto (erano tre blocchi distanti, adesso sembrano una cosa sola). I link sono
   cinque voci lunghe, quindi vanno a capo da sole sugli schermi stretti. */
.nsn-footer-legal-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: 1.25rem 0 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.nsn-footer-legal-row .nsn-footer-links {
	flex: 1 1 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	align-items: center;
}

.nsn-footer-legal-row .nsn-footer-links li { margin-bottom: 0; }

.nsn-footer-legal-row .nsn-footer-links a {
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.54);
}

.nsn-footer-legal-row .nsn-footer-links a:hover { color: var(--nsn-white); }

.nsn-footer-legal-row .nsn-footer-payments { flex: 0 0 auto; margin: 0; }

/* La riga legale porta gia' il suo bordo: due righe di seguito farebbero doppio.
   Fra i link legali e la ragione sociale restavano 34px (14 di spazio sotto la
   riga e 19 di margine sopra al blocco, che arriva dal tema e non si vedeva):
   sono due righe della stessa cosa, ne bastano 8 (il padding sotto della riga). */
.nsn-footer-legal-row + .nsn-footer-bottom {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 1.5rem;
}

@media (max-width: 600px) {
	.nsn-footer-legal-row .nsn-footer-links { gap: 0.5rem 1.25rem; }
	.nsn-footer-legal-row .nsn-footer-links a { font-size: 0.8rem; }
}

/* Fra il telefono e il desktop largo quattro colonne starebbero solo
   riducendole a colonnine da 120px. Meglio due righe ordinate: la
   presentazione prende tutta la larghezza, le altre tre si dividono il resto.
   La riga di about va dopo quella generica, non prima: hanno la stessa
   specificita' e about porta anche la classe nsn-footer-col, quindi messa
   sopra perdeva e si ritrovava stretta come le altre. */
@media (min-width: 601px) and (max-width: 1000px) {
	.nsn-footer-main > .nsn-footer-col { flex: 1 1 0; min-width: 120px; }
	.nsn-footer-main > .nsn-footer-col--about { flex: 1 1 100%; min-width: 0; }
}

/* Quattro colonne. Niente percentuali fisse: sommate ai tre spazi chiedevano
   946px dove ce n erano 945, e il modulo finiva a capo. Con basi piccole e
   crescita libera le colonne si adattano invece di pretendere una larghezza
   esatta. Il modulo cresce quasi quanto la presentazione, che ora e' corta. */
@media (min-width: 1001px) {
	.nsn-footer-main { gap: 2.5rem 3rem; }
	.nsn-footer-main > .nsn-footer-col { flex: 1 1 140px; min-width: 140px; }
	.nsn-footer-main > .nsn-footer-col--about { flex: 1.6 1 240px; min-width: 240px; }
	.nsn-footer-main > .nsn-footer-col--feed { flex: 1.5 1 220px; min-width: 200px; }
}

/* Su desktop la scritta FOLLOW non serve: le tre icone si riconoscono da sole
   e il titolo allontanava i social dal testo. Su telefono resta, perche' li'
   le sezioni sono impilate e un appiglio aiuta. */
@media (min-width: 601px) {
	.nsn-footer-col--about .nsn-footer-heading + .nsn-footer-social,
	.nsn-footer-col--about p + .nsn-footer-heading { margin-top: 0; }
	.nsn-footer-col--about p.nsn-footer-heading ~ p.nsn-footer-heading { display: none; }
	.nsn-footer-col--about p { margin-bottom: 1.1rem; }
	.nsn-footer-social { margin-top: 0; }
}