/* Palette condivisa (Fase 3, 2026-08-12; rivista 2026-08-12b). theme.json
		   ha gia' una palette WordPress nativa completa (contrast, subtle,
		   border, accent): quella e' la vera fonte di verita', non ha senso
		   duplicarla qui. Quasi-nero, grigio chiaro e blu quindi NON sono
		   piu' custom property nostre: sono var(--wp--preset--color--*),
		   usate direttamente nei file sotto (con lo stesso fallback letterale
		   del preset, nel caso theme.json cambi senza rigenerare la cache).
		   Restano custom property solo i valori senza equivalente nel preset
		   WP: bianco puro, hover del nero, i due grigi testo secondario. */
		:root {
			--nsn-white: #fff;
			--nsn-black-hover: #333;
			--nsn-text-muted: #666;
			--nsn-text-faint: #999;
		}

		/* Rete di sicurezza: nessuna sezione dovrebbe mai creare scroll orizzontale.
		   "clip" e non "hidden": "overflow-x: hidden" forza il browser a calcolare
		   anche overflow-y come "auto" (specifica CSS), il che rompe silenziosamente
		   "position: sticky" in tutto il sito (bug reale trovato il 2026-08-08 mentre
		   si implementava lo sticky sulla pagina Chi Sono, verificato rimuovendo la
		   regola e vedendo lo sticky funzionare). "clip" blocca l'overflow orizzontale
		   allo stesso modo ma non tocca l'asse verticale. */
		html, body { overflow-x: clip; }

		/* Il tema padre aggiunge margin-block-start:1.2rem ad ogni figlio diretto di .wp-site-blocks:
		   su main crea un filo bianco tra header e primo blocco di pagina (es. hero in homepage). */
		.wp-site-blocks > main { margin-block-start: 0; }
		.wp-site-blocks > footer { margin-block-start: 0; }
		/* La riga interna adesso e alignfull (sfonda fino al bordo reale della viewport, non
		   solo del genitore): ignora quindi il padding laterale del wrapper .nsn-category-bar
		   che la contiene, serve un padding esplicito qui, stessa misura della pagina categoria
		   sotto (.nsn-category-page, 3rem) per restare allineati. */
		.nsn-category-bar .wp-block-group.alignfull { align-items: center; padding-left: 3rem; padding-right: 3rem; }
		/* Stile globale core: :where(.is-layout-constrained) > :first-child { margin-block-start:0 }
		   allunga la riga del menu perche il primo figlio "reale" di alcuni wrapper interni al menu
		   e nascosto (display:none) e la regola non copre il figlio visibile successivo. Neutralizzata
		   solo nella barra menu, non tocca il comportamento altrove sul sito. */
		.nsn-category-bar :where(.is-layout-constrained) > :first-child { margin-block-start: 0; padding-bottom: 0; }
		.nsn-header-brand { align-items: center; flex-shrink: 0; }
		.nsn-header-brand .wp-block-site-logo { line-height: 0; }
		.nsn-header-brand .wp-block-site-logo img { display: block; max-height: 34px; width: auto; }
		.nsn-header-actions { align-items: center; flex-shrink: 0; }
		.nsn-header-actions > * { display: flex; align-items: center; }
		.nsn-header-actions > .nsn-search-overlay,
		.nsn-header-actions > .nsn-wishlist-panel,
		.nsn-header-actions > .nsn-account-panel { display: block; }
		/* margin-left con !important: senza, il margine che il blocco Mini Cart riceve dal
		   layout vince e il carrello si sposta di 3px (misurato il 2026-10-16). */
		.nsn-mini-cart { flex-shrink: 0; margin-left: 3px !important; }
		/* Niente padding proprio del pulsante WooCommerce: lo spazio fra account, cuore e
		   carrello e solo il gap del contenitore, uguale per tutti (prima il carrello stava
		   circa 8px piu lontano, segnalato dall'utente 2026-10-16). */
		.nsn-mini-cart .wc-block-mini-cart__button { white-space: nowrap; padding: 0; position: relative; }
		/* Il carrello a linea occupa quasi tutto il suo riquadro, cuore e account no: un
		   pixel in meno e tre di margine (in .nsn-mini-cart qui sopra) lo rendono
		   visivamente pari agli altri due. */
		.nsn-mini-cart .wc-block-mini-cart__icon { width: 19px; height: 19px; }
		/* Stesso hover blu dell'icona wishlist (richiesta esplicita
		   dell'utente 2026-08-10, vedi ".nsn-wishlist-icon:hover" piu' sotto):
		   l'SVG del carrello usa "fill:currentColor", quindi basta cambiare
		   il "color" del pulsante. */
		.nsn-mini-cart .wc-block-mini-cart__button:hover {
			color: var(--wp--preset--color--accent, #26649d);
		}
		/* Stesso blu del numerino wishlist (richiesta esplicita dell'utente
		   2026-08-10), invece del grigio scuro di default del blocco nativo.
		   "!important" necessario solo sui due colori: arrivano da uno style
		   inline impostato dalla Interactivity API del blocco (attributo
		   colore del Mini Cart), che altrimenti vince su qualsiasi regola
		   esterna. Misure e posizione non ne hanno bisogno (verificato il
		   2026-10-16 togliendoli uno alla volta). */
		.wc-block-mini-cart__badge {
			background-color: var(--wp--preset--color--accent, #26649d) !important;
			color: var(--nsn-white) !important;
			/* Stessa dimensione del numerino wishlist (richiesta esplicita
			   dell'utente 2026-08-10): di default il blocco nativo lo rende
			   piu' grande (20px/14px di font contro 15px/10.4px della
			   wishlist), visibilmente diverso a schermo nonostante siano
			   affiancati nello stesso header. */
			font-family: Arial, sans-serif;
			font-size: 8px;
			font-weight: 700;
			box-sizing: border-box;
			min-width: 13px;
			height: 13px;
			padding: 0 2px;
			line-height: 13px;
			/* Stessa posizione del numerino del cuore: fuori dall'angolo in alto a destra. */
			position: absolute; top: -7px; right: -10px;
			left: auto; bottom: auto; transform: none; margin: 0;
		}
		/* Il blocco nativo Mini Cart mostra il proprio titolo "Il tuo carrello" solo a carrello
		   pieno (dentro il contenuto "filled"), lasciando lo stato vuoto senza intestazione:
		   diverso dai pannelli account/wishlist, che hanno sempre un titolo fisso in alto.
		   Aggiunta una barra titolo statica identica alle altre, nascosto il titolo nativo
		   duplicato quando il carrello è pieno. */
		.wc-block-mini-cart__drawer .wc-block-components-drawer__content::before {
			content: "Il tuo Carrello";
			display: block; text-align: center; font-weight: 600;
			padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--wp--preset--color--border, #ebebeb);
		}
		/* Senza questo, l'altezza della barra titolo qui sopra non veniva
		   sottratta da nessuna parte: il contenuto nativo sotto (lista
		   articoli + subtotale/pulsanti) usa "height:100%" a catena, non un
		   calcolo flessibile che tenga conto dei fratelli, quindi continuava
		   a credersi alto quanto l'intero drawer. Risultato: il subtotale
		   veniva spinto fuori dallo schermo, irraggiungibile anche scrollando
		   (bug reale segnalato dall'utente 2026-08-10, screenshot con
		   pulsanti tagliati in fondo). Trasformando questo contenitore in un
		   vero flex-column, lo pseudo-elemento sopra diventa un elemento
		   flessibile a tutti gli effetti: lo spazio che occupa viene
		   sottratto correttamente al figlio sotto, che si restringe di
		   conseguenza, e la lista articoli (gia' "overflow-y:auto" nel CSS
		   nativo di WooCommerce) puo' finalmente scorrere invece di
		   traboccare. */
		.wc-block-mini-cart__drawer .wc-block-components-drawer__content {
			display: flex; flex-direction: column; overflow: hidden;
		}
		.wc-block-mini-cart__drawer .wc-block-components-drawer__content > * {
			min-height: 0;
		}
		.wc-block-mini-cart__drawer .wc-block-mini-cart__title { display: none; }
		/* Da chiuso il cassetto era solo "aria-hidden": nascosto agli screen reader ma
		   ancora visibile al browser, quindi Tab finiva su Chiudi, Vai al carrello,
		   Checkout e Ritorna al negozio di un pannello che non si vede (PageSpeed,
		   accessibilita', 2026-10-23). Nascosto davvero quando e' chiuso; la visibilita'
		   torna subito all'apertura e sparisce solo a fine animazione alla chiusura. */
		.wc-block-mini-cart__drawer { transition: transform 0.3s, visibility 0s linear 0s; }
		.wc-block-mini-cart__drawer[aria-hidden="true"] { visibility: hidden; transition: transform 0.3s, visibility 0s linear 0.3s; }
		.nsn-wishlist-toast {
			position: fixed; left: 50%; bottom: 2rem; transform: translateX(-50%) translateY(1rem);
			background: var(--wp--preset--color--contrast, #23282d); color: var(--nsn-white); padding: 0.75rem 1.5rem; font-size: 0.9rem;
			z-index: 99999; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
		}
		.nsn-wishlist-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
		.nsn-wishlist-icon {
			color: var(--wp--preset--color--contrast, #23282d); display: inline-flex; align-items: center; position: relative;
			background: none; border: none; cursor: pointer; padding: 0;
		}
		.nsn-wishlist-icon:hover { color: var(--wp--preset--color--accent, #26649d); }
		/* Stesso cerchio del numerino del carrello (.wc-block-mini-cart__badge): 13px con
		   border-box, altrimenti il padding si sommava e il cerchio diventava un ovale
		   largo 21px che copriva meta' del cuore (segnalato dall'utente 2026-10-16).
		   Stessa posizione sull'angolo in alto a destra dell'icona. Carattere scritto
		   esplicito (Arial 8px grassetto): prima il cuore lo ereditava dal pulsante e il
		   carrello usava Jost, che a questa misura sembrava piu leggero. */
		.nsn-wishlist-count {
			position: absolute; top: -7px; right: -10px; background: var(--wp--preset--color--accent, #26649d);
			color: var(--nsn-white); font-family: Arial, sans-serif; font-size: 8px; font-weight: 700; line-height: 1;
			box-sizing: border-box; min-width: 13px; height: 13px; border-radius: 999px;
			display: flex; align-items: center; justify-content: center; padding: 0 2px;
		}

		/* Bottone cuore sui prodotti (pagina prodotto, shop, caroselli) */
		.nsn-wishlist-btn {
			background: rgba(255,255,255,0.9); border: none; border-radius: 50%; cursor: pointer;
			width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
			color: var(--wp--preset--color--contrast, #23282d); box-shadow: 0 1px 4px rgba(0,0,0,0.15);
		}
		.nsn-wishlist-btn.is-active { color: var(--wp--preset--color--accent, #26649d); }
		.nsn-wishlist-btn.is-active svg { fill: currentColor; }
		.nsn-wishlist-btn-wrap { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3; }
		li.product { position: relative; }
		/* Variante con testo, pagina prodotto: pulsante intero sotto "Aggiungi al carrello",
		   stessi angoli vivi degli altri pulsanti del sito (vedi .single_add_to_cart_button). */
		.nsn-wishlist-btn--labeled {
			width: 100%; height: auto; border-radius: 0; background: var(--nsn-white);
			border: 1px solid var(--wp--preset--color--border, #ebebeb); box-shadow: none; gap: 0.5rem;
			padding: 1rem; margin: 0.8rem 0 0; font-size: 0.9rem; font-weight: 600;
		}
		.nsn-wishlist-btn--labeled:hover { border-color: var(--wp--preset--color--contrast, #23282d); }
		.nsn-wishlist-btn--labeled.is-active { border-color: var(--wp--preset--color--accent, #26649d); }

		/* Pannello laterale wishlist: stessa animazione a scivolo + dissolvenza del Mini Cart */
		.nsn-wishlist-panel {
			position: fixed; inset: 0; z-index: 300;
			visibility: hidden; pointer-events: none;
		}
		.nsn-wishlist-panel.is-open { visibility: visible; pointer-events: auto; }
		.nsn-wishlist-panel-backdrop {
			position: absolute; inset: 0; background: rgba(95,95,95,0.35);
			opacity: 0; transition: opacity 0.3s;
		}
		.nsn-wishlist-panel.is-open .nsn-wishlist-panel-backdrop { opacity: 1; }
		.nsn-wishlist-panel-drawer {
			position: absolute; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%;
			background: var(--nsn-white); display: flex; flex-direction: column;
			box-shadow: -8px 0 24px rgba(0,0,0,0.2);
			transform: translateX(100%); transition: transform 0.3s;
		}
		.nsn-wishlist-panel.is-open .nsn-wishlist-panel-drawer { transform: translateX(0); }
		body.admin-bar .nsn-wishlist-panel-backdrop,
		body.admin-bar .nsn-wishlist-panel-drawer { top: var(--wp-admin--admin-bar--height, 32px); }
		@media (prefers-reduced-motion: reduce) {
			.nsn-wishlist-panel-backdrop, .nsn-wishlist-panel-drawer { transition: none; }
		}
		.nsn-wishlist-panel-header {
			display: flex; align-items: center; justify-content: center;
			position: relative;
			padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--wp--preset--color--border, #ebebeb); font-weight: 600;
		}
		.nsn-wishlist-panel-close {
			background: transparent; border: 0; color: inherit; cursor: pointer;
			position: absolute; right: 12px; top: 12px;
			padding: 1em; margin: -1em; opacity: 0.6;
		}
		.nsn-wishlist-panel-close:hover, .nsn-wishlist-panel-close:focus { opacity: 1; }
		.nsn-wishlist-panel-close svg { display: block; fill: currentColor; }
		.nsn-wishlist-panel-items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; display: flex; flex-direction: column; }
		.nsn-wishlist-panel-items:has(.nsn-wishlist-empty) { justify-content: center; align-items: center; }
		.nsn-wishlist-empty { text-align: center; }
		.nsn-wishlist-empty p { margin: 0 0 1rem; }
		.nsn-wishlist-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--wp--preset--color--border, #ebebeb); }
		.nsn-wishlist-item-img { flex-shrink: 0; width: 56px; height: 56px; display: block; background: var(--wp--preset--color--subtle, #ebebeb); }
		.nsn-wishlist-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
		.nsn-wishlist-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
		.nsn-wishlist-item-name { color: var(--wp--preset--color--contrast, #23282d); text-decoration: none; font-size: 0.9rem; }
		.nsn-wishlist-item-price { font-size: 0.85rem; font-weight: 600; }
		.nsn-wishlist-item-remove { background: none; border: none; font-size: 1.2rem; color: var(--nsn-text-faint); cursor: pointer; }
		.nsn-wishlist-item-remove:hover { color: var(--wp--preset--color--accent, #26649d); }

		.nsn-header-search-trigger {
			display: flex; align-items: center; gap: 0.5rem;
			background: var(--wp--preset--color--subtle, #ebebeb); border: none; border-radius: 999px;
			padding: 0.55rem 1rem; font-size: 0.85rem; color: var(--nsn-text-muted); cursor: pointer;
			min-width: 160px; text-align: left;
		}
		.nsn-header-search-trigger:hover { color: var(--wp--preset--color--contrast, #23282d); }

		.nsn-search-overlay-backdrop {
			position: fixed; inset: 0; z-index: 199;
			background: rgba(20,20,20,0.55); opacity: 0; pointer-events: none;
			transition: opacity 0.3s ease;
		}
		.nsn-search-overlay-backdrop.is-open { opacity: 1; pointer-events: auto; }
		.nsn-search-overlay {
			position: fixed; top: 0; left: 0; right: 0; z-index: 200;
			background: var(--nsn-white); overflow: hidden;
			max-height: 0; opacity: 0; pointer-events: none;
			box-shadow: 0 16px 40px rgba(0,0,0,0.3);
			transition: max-height 0.35s ease, opacity 0.25s ease;
		}
		.nsn-search-overlay.is-open { opacity: 1; pointer-events: auto; max-height: 280px; }
		.nsn-search-overlay.is-open.has-results { max-height: 640px; overflow-y: auto; }
		@media (prefers-reduced-motion: reduce) {
			.nsn-search-overlay-backdrop { transition: none; }
		}
		.nsn-search-overlay-bar {
			display: flex; align-items: center; gap: 1rem;
			max-width: 1280px; margin: 0 auto; padding: 2.5rem 2rem 1.2rem;
		}
		.nsn-search-overlay-inputwrap {
			flex: 1; display: flex; align-items: center; gap: 0.7rem;
			background: var(--wp--preset--color--subtle, #ebebeb); border-radius: 999px; padding: 0.9rem 1.3rem; color: var(--nsn-text-muted);
		}
		.nsn-search-overlay-inputwrap input {
			flex: 1; border: none; background: transparent; font-size: 1rem; color: var(--wp--preset--color--contrast, #23282d);
			outline: none; font-family: inherit;
		}
		.nsn-search-overlay-cancel {
			background: none; border: none; color: var(--wp--preset--color--contrast, #23282d); cursor: pointer;
			display: flex; align-items: center; justify-content: center; padding: 0.4em; margin: -0.4em;
			opacity: 0.7; flex-shrink: 0;
		}
		.nsn-search-overlay-cancel:hover, .nsn-search-overlay-cancel:focus { opacity: 1; }
		.nsn-search-overlay-cancel svg { display: block; }
		.nsn-search-overlay-body { max-width: 1280px; margin: 0 auto; padding: 0 2rem 2.5rem; }
		.nsn-search-suggestions-title {
			display: block; font-size: 0.8rem; color: var(--nsn-text-muted); margin-bottom: 1rem;
		}
		.nsn-search-chips { display: flex; flex-wrap: wrap; gap: 0.7rem; }
		.nsn-search-chip {
			background: var(--wp--preset--color--subtle, #ebebeb); border: none; border-radius: 999px; padding: 0.55rem 1.1rem;
			font-size: 0.9rem; color: var(--wp--preset--color--contrast, #23282d); cursor: pointer;
		}
		.nsn-search-chip:hover { background: var(--nsn-c1, var(--wp--preset--color--contrast, #23282d)); color: var(--nsn-c1-testo, var(--nsn-white)); }
		.nsn-search-results { display: none; position: relative; }
		.nsn-search-results-track {
			display: flex; gap: 1.5rem; overflow-x: auto; scroll-behavior: smooth;
			scrollbar-width: none; padding-bottom: 0.3rem;
		}
		.nsn-search-results-track::-webkit-scrollbar { display: none; }
		.nsn-search-result { flex: 0 0 180px; text-decoration: none; color: var(--wp--preset--color--contrast, #23282d); }
		.nsn-search-result-img { display: block; aspect-ratio: 1/1; overflow: hidden; background: var(--wp--preset--color--subtle, #ebebeb); margin-bottom: 0.6rem; }
		.nsn-search-result-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
		.nsn-search-result-name { display: block; font-size: 0.9rem; margin-bottom: 0.3rem; }
		.nsn-search-result-price { display: block; font-size: 0.9rem; font-weight: 600; }
		.nsn-search-empty { color: var(--nsn-text-muted); }
		/* Link verso la pagina risultati dedicata (stesso layout/filtri
		   della categoria prodotto) - richiesta esplicita dell'utente
		   2026-08-14, prima la ricerca restava solo un'anteprima senza
		   pagina propria. */
		.nsn-search-view-all {
			display: none; align-items: center; gap: 0.4rem; margin-top: 1.5rem;
			font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
			color: var(--wp--preset--color--contrast, #23282d); text-decoration: none;
		}
		.nsn-search-view-all:hover { text-decoration: underline; }
		.nsn-search-view-all svg { flex-shrink: 0; }
		.nsn-search-results-arrow {
			position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
			width: 2.5rem; height: 2.5rem; border-radius: 50%; border: none;
			background: rgba(255,255,255,0.95); box-shadow: 0 1px 6px rgba(0,0,0,0.2);
			font-size: 1.4rem; line-height: 1; cursor: pointer;
		}
		.nsn-search-results-prev { left: -0.5rem; }
		.nsn-search-results-next { right: -0.5rem; }
		@media (prefers-reduced-motion: reduce) {
			.nsn-search-overlay { transition: none; }
		}

		/* Anche fra 1025 e 1279 px, per lasciare spazio alle voci del menu sulla stessa riga. */
		@media (max-width: 900px), (min-width: 1025px) and (max-width: 1279px) {
			header .nsn-header-search-trigger span { display: none; }
			/* Sotto i 900px il trigger è solo icona: senza il testo "Cerca" lo sfondo/pillola
			   grigia diventa un cerchio pieno diverso dalle altre icone header (account,
			   wishlist, carrello, tutte senza sfondo): uniformato solo qui, non su desktop
			   dove il trigger resta un campo di ricerca con placeholder testuale. */
			header .nsn-header-search-trigger {
				min-width: 0; padding: 0.5rem; background: none; color: var(--wp--preset--color--contrast, #23282d);
			}
			header .nsn-header-search-trigger:hover { color: var(--wp--preset--color--accent, #26649d); }
		}
		@media (max-width: 900px) {
			header .nsn-site-title { display: none; }
			/* Su telefono reale la barra indirizzi del browser può coprire la parte alta di un
			   overlay position:fixed;top:0 (non riproducibile in emulazione desktop): margine
			   abbondante + rispetto della safe-area (notch/isola dinamica). */
			.nsn-search-overlay-bar { padding-top: max(5.5rem, calc(env(safe-area-inset-top, 0px) + 4rem)); }
		}
		.nsn-narrow-60 > .wp-block-paragraph.has-text-align-center { margin-bottom: 20px; }
		/* !important necessario: senza, i margini laterali del layout del core vincono
		   (misurato il 2026-10-16: margine destro -104px invece di 24px). */
		@media (min-width: 1025px) {
			.nsn-narrow-60 { max-width: 96% !important; margin-left: auto !important; margin-right: auto !important; }
		}
			.nsn-hero-search-trigger {
				display: flex; align-items: stretch; width: 60%; margin: 0 auto;
				background: var(--nsn-white); border: 1px solid var(--wp--preset--color--border, #ebebeb); padding: 0; cursor: pointer; font-family: inherit;
			}
			.nsn-hero-search-trigger-placeholder {
				flex: 1; text-align: left; padding: 0.9rem 1.2rem; color: var(--nsn-text-muted); font-size: 1.05rem;
			}
			.nsn-hero-search-trigger-cta {
				display: flex; align-items: center; white-space: nowrap;
				background: var(--nsn-c1, var(--wp--preset--color--contrast, #23282d)); color: var(--nsn-c1-testo, var(--nsn-white)); padding: 0.9rem 1.75rem; font-weight: 700; letter-spacing: 0.05em;
			}
			@media (max-width: 600px) { .nsn-hero-search-trigger { width: 100%; } }
			.nsn-narrow-60 .wp-block-column figure.wp-block-image { margin: 0; }
			.nsn-narrow-60 .wp-block-column h3.wp-block-heading { margin: 0; }

			/* Banner "Spedizione/Assistenza/Pagamenti": tre gradazioni di grigio a discesa, largo */
			.nsn-usp { background: linear-gradient(to bottom, var(--nsn-white) 50%, var(--wp--preset--color--contrast, #23282d) 50%); margin-bottom: 0; }
			.nsn-usp .wp-block-columns { max-width: 100%; gap: 0; }
			.nsn-usp .wp-block-column { padding: 3rem 2.5rem; margin: 0; background: var(--wp--preset--color--subtle, #ebebeb); }
			@media (min-width: 1025px) {
				/* .nsn-usp ha 2rem di padding laterale (il gruppo dei caroselli sopra e alignfull
				   e il suo 80% e calcolato sull intera viewport): per allinearsi esattamente,
				   il calcolo qui compensa quel padding invece di applicare un ingenuo 80%
				   sulla larghezza gia ridotta dal padding del genitore. */
				.nsn-usp .wp-block-columns {
					width: calc(80% + 3.2rem);
					max-width: calc(80% + 3.2rem);
					margin-left: calc(10% - 1.6rem);
					margin-right: calc(10% - 1.6rem);
				}
			}
			/* Sotto i 900px i tre box diventano un carosello a scorrimento con uno scatto alla
			   volta (scroll-snap) e avanzamento automatico via JS (vedi script nsn-mega-menu),
			   solo su mobile: da desktop restano le tre colonne fisse di sempre. */
			@media (max-width: 900px) {
				/* !important necessario: il blocco core Columns scrive flex-wrap:wrap !important. */
				.nsn-usp .wp-block-columns {
					display: flex !important; flex-wrap: nowrap !important;
					overflow-x: auto; scroll-snap-type: x mandatory;
					scrollbar-width: none; -ms-overflow-style: none;
				}
				.nsn-usp .wp-block-columns::-webkit-scrollbar { display: none; }
				/* Stesso selettore della regola core per lo stacking mobile
				   (.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column) con in piu
				   .nsn-usp davanti: la nostra vince per specificita. La base del flex resta
				   comunque quella del core (flex-basis:100% !important), che coincide con la
				   nostra; per questo qui non serve !important (verificato il 2026-10-16). */
				.nsn-usp .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
					flex: 0 0 100%; width: 100%; scroll-snap-align: start;
					/* Il box ha padding:3rem 2.5rem ma box-sizing:content-box (default browser,
					   non ereditava border-box): il nostro width:100% contava quindi solo
					   l area di contenuto, con 80px di padding sommati sopra, rendendo il box
					   80px piu largo del contenitore scrollabile (406px contro 326px reali).
					   Quell eccedenza tagliava fuori dalla porzione visibile l ultima parola
					   della prima riga di testo prima dello scroll. Con border-box, il 100%
					   include il padding e il box combacia esattamente col contenitore. */
					box-sizing: border-box;
				}
				/* Il padding verticale di 4rem del blocco (stile inline, pensato per il layout
				   desktop a 3 colonne affiancate) lasciava un vuoto vistoso sopra/sotto il box
				   mostrato uno alla volta su mobile, con lo sfondo bianco/scuro della sezione
				   che spuntava intorno: sembrava una card staccata e tagliata invece di
				   riempire la sezione. Ridotto solo qui. */
				/* !important: il padding arriva dallo style inline del blocco. */
				.nsn-usp { padding-top: 0 !important; padding-bottom: 0 !important; }
			}

			/* Hero (copertina con titolo, testo e i due pulsanti CTA): sotto i 600px il
			   padding laterale di default del blocco Cover (~14px, una clamp() del tema
			   core) non combacia con i 2rem usati ovunque nel resto della pagina su mobile
			   (caroselli, tab, banner USP, footer), spostando il testo della hero fuori
			   asse rispetto a tutto cio che segue. Uniformato a 2rem. */
			@media (max-width: 600px) {
				/* L altezza fissa di 640px del Cover e pensata per il formato widescreen
				   desktop: in verticale lascia troppo vuoto sopra il titolo (misurato via
				   CDP, il testo iniziava a piu della meta dell altezza della sezione).
				   Ridotta solo qui, il ritaglio dell immagine resta gestito da
				   object-fit:cover senza toccare il markup.
				   !important: padding e altezza arrivano dallo style inline del blocco. */
				.wp-block-cover { padding-left: 2rem !important; padding-right: 2rem !important; min-height: 460px !important; }
				/* Il gradiente scuro del Cover (inline, customGradient) e tarato in percentuale
				   sull altezza originale di 640px: con la cover piu bassa lo stesso 40%-100%
				   mostra una fetta diversa (piu alta) della foto, dove il titolo ora cade su
				   un area chiara e colorata (i rocchetti di filo), illeggibile in bianco.
				   Anticipato lo scurimento per la stessa foto, stesso linguaggio visivo.
				   !important per battere il gradiente inline. */
				.wp-block-cover .wp-block-cover__background {
					background: linear-gradient(180deg, rgba(17,17,17,0.2) 0%, rgba(17,17,17,0.6) 30%, rgba(17,17,17,0.88) 65%, rgba(17,17,17,0.9) 100%) !important;
				}
				/* I due pulsanti CTA ("Comincia Subito", "Tutti i Prodotti") erano stretti,
				   di larghezza diversa tra loro e centrati con molto spazio vuoto ai lati:
				   tap target piccoli e poco autorevoli sullo schermo intero. Ora occupano
				   tutta la larghezza disponibile, impilati, stessa larghezza. */
				.wp-block-cover .wp-block-buttons {
					flex-direction: column; width: 100%; gap: 0.75rem;
				}
				.wp-block-cover .wp-block-button { width: 100%; }
				.wp-block-cover .wp-block-button__link {
					width: 100%; box-sizing: border-box; justify-content: center; text-align: center;
					padding-top: 1rem; padding-bottom: 1rem;
				}
			}
			/* Blocchi solo desktop o solo mobile, stesso confine della hero (600px). In home:
			   il blocco "Cerca tra i lavori" solo da desktop, il pulsante "Cerca" della hero
			   solo da mobile (richiesta dell'utente 2026-10-16, con schermate).
			   !important: sono classi di servizio messe su blocchi qualsiasi, che hanno un
			   loro display (flex, grid) da regole del layout piu specifiche. */
			.nsn-solo-mobile { display: none !important; }
			@media (max-width: 600px) {
				.nsn-solo-mobile { display: block !important; }
				.nsn-solo-desktop { display: none !important; }
				/* Lo spazio fra blocchi del layout resta anche se il blocco prima e nascosto:
				   in home lasciava una striscia bianca fra hero e "Selezionati per te". */
				.nsn-solo-desktop + * { margin-block-start: 0 !important; }
			}
			.nsn-tile-caption {
				display: block; background: var(--wp--preset--color--contrast, #23282d); color: var(--nsn-white);
				text-align: center; margin: 0; padding: 0.9em 1em;
				text-decoration: none; letter-spacing: 1px;
			}

		/* Barra categorie: bianca stile Nike, testo scuro, letta dal menu 410 */
		.nsn-category-bar { padding: 0 2rem; position: relative; border-bottom: 1px solid var(--wp--preset--color--border, #ebebeb); }
		.nsn-primary-nav { flex-shrink: 0; }
		.nsn-nav-list { display: flex; list-style: none; margin: 0; padding: 0; gap: 0.5rem; }
		.nsn-nav-item { position: relative; }
		.nsn-nav-link, .nsn-nav-link:visited {
			display: flex; align-items: center; gap: 0.3rem;
			color: var(--wp--preset--color--contrast, #23282d); text-decoration: none;
			padding: 1rem 0.9rem;
			text-transform: none;
			letter-spacing: normal;
			font-weight: 500;
			font-size: 0.95rem;
			cursor: pointer;
		}
		.nsn-nav-link:hover { color: var(--wp--preset--color--contrast, #23282d); }
		.nsn-nav-item:hover .nsn-nav-link { color: var(--wp--preset--color--contrast, #23282d); }
		/* Voce dell'evento attivo (spec 0006): nel colore 2, anche al passaggio del mouse. */
		.nsn-nav-item--evento .nsn-nav-link, .nsn-nav-item--evento:hover .nsn-nav-link { color: var(--nsn-c2, var(--wp--preset--color--contrast, #23282d)); }
		/* Con la voce dell'evento le voci sono 8: a 1280 px servivano 93 px in più e la barra andava a
		   capo (misurato il 2026-10-18). Solo con l'evento, voci più strette; senza, la barra è quella di prima. */
		@media (min-width: 1280px) {
			.nsn-nav-list:has(> .nsn-nav-item--evento) { gap: 0.25rem; }
			.nsn-nav-list:has(> .nsn-nav-item--evento) .nsn-nav-link { padding-left: 0.55rem; padding-right: 0.55rem; }
		}
		/* Fra 1025 e 1279 px la barra andava a capo anche senza evento (a 1100 px 610 px di voci in
		   550, misurato il 2026-10-18): riga con margini più stretti, ricerca solo icona (regola della
		   ricerca più sotto) e padding delle voci che cresce con la larghezza, da 6 a 14 px.
		   Con e senza evento le voci stanno su una riga da 1025 px. */
		@media (min-width: 1025px) and (max-width: 1279px) {
			.nsn-category-bar .wp-block-group.alignfull { padding-left: 1.5rem; padding-right: 1.5rem; }
			.nsn-nav-list { gap: 0.25rem; }
			.nsn-nav-link, .nsn-nav-link:visited {
				white-space: nowrap;
				padding-left: clamp(0.4rem, calc(0.4rem + (100vw - 1025px) * 0.06), 0.9rem);
				padding-right: clamp(0.4rem, calc(0.4rem + (100vw - 1025px) * 0.06), 0.9rem);
			}
		}
		.nsn-primary-nav p, .nsn-mega-panel p { margin: 0; }

		/* Mega-menu a 4 colonne */
		.nsn-mega-panel {
			display: none;
			position: absolute;
			top: 100%; left: 50%;
			transform: translateX(-50%);
			width: 1280px;
			max-width: calc(100vw - 4rem);
			background: var(--nsn-white);
			border-top: 1px solid var(--wp--preset--color--contrast, #23282d);
			box-shadow: 0 16px 32px rgba(0,0,0,0.18);
			z-index: 50;
			padding: 2rem;
			gap: 2.5rem;
			box-sizing: border-box;
		}
		.nsn-mega-panel.is-open { display: flex; }
		.nsn-mega-col { flex: 1; min-width: 0; }
		.nsn-mega-col--feature { flex: 1.2; }
		.nsn-mega-col-title {
			display: block;
			font-size: 0.75rem;
			text-transform: uppercase;
			letter-spacing: 0.08em;
			font-weight: 600;
			color: var(--wp--preset--color--contrast, #23282d);
			margin-bottom: 0.9rem;
			border-bottom: 1px solid var(--wp--preset--color--border, #ebebeb);
			padding-bottom: 0.6rem;
		}
		.nsn-mega-linklist, .nsn-mega-plist { list-style: none; margin: 0; padding: 0; }
		.nsn-mega-linklist li a {
			display: block; padding: 0.4rem 0; color: var(--nsn-black-hover); text-decoration: none; font-size: 0.9rem;
		}
		.nsn-mega-linklist li a:hover { color: var(--wp--preset--color--accent, #26649d); }
		.nsn-mega-plist li a {
			display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0; text-decoration: none; color: var(--nsn-black-hover);
		}
		.nsn-mega-plist li a:hover .nsn-mega-pname { color: var(--wp--preset--color--accent, #26649d); }
		.nsn-mega-thumb { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--wp--preset--color--subtle, #ebebeb); }
		.nsn-mega-thumb img { width: 100%; height: 100%; object-fit: cover; }
		.nsn-mega-pname { font-size: 0.85rem; }
		.nsn-mega-slideshow { position: relative; }
		/* Altezza in rapporto alla larghezza della colonna (quadrata), non
		   fissa: le foto prodotto del catalogo sono quadrate (705x705 nel
		   file originale), un'altezza fissa di 200px le forzava in un
		   rettangolo panoramico, tagliandole (richiesta esplicita
		   dell'utente 2026-08-10, "si adattasse considerata la width
		   all'immagine prodotto"). */
		.nsn-mega-slides { position: relative; aspect-ratio: 1 / 1; }
		.nsn-mega-slide {
			display: none; text-decoration: none; position: absolute; inset: 0;
		}
		.nsn-mega-slide.is-active { display: block; }
		.nsn-mega-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
		.nsn-mega-feature-caption {
			position: absolute; left: 0; right: 0; bottom: 0; padding: 0.8rem 1rem;
			background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent);
			color: var(--nsn-white); font-size: 0.85rem; font-weight: 600;
		}
		.nsn-mega-slide-arrow {
			position: absolute; top: 50%; transform: translateY(-50%);
			width: 2rem; height: 2rem; border-radius: 50%; border: none;
			background: rgba(255,255,255,0.9); box-shadow: 0 1px 4px rgba(0,0,0,0.2);
			font-size: 1.2rem; line-height: 1; cursor: pointer; z-index: 2;
		}
		.nsn-mega-slide-prev { left: 0.5rem; }
		.nsn-mega-slide-next { right: 0.5rem; }

		/* Toggle/pannello mobile: nascosti di default, attivati sotto 1024px */
		.nsn-nav-toggle-wrap { display: flex; align-items: center; }
		.nsn-nav-toggle { display: none; background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--wp--preset--color--contrast, #23282d); flex-shrink: 0; }
		.nsn-nav-panel-backdrop, .nsn-nav-panel-header, .nsn-nav-caret, .nsn-nav-sublist { display: none; }

		@media (max-width: 1024px) {
			.nsn-nav-toggle { display: flex; align-items: center; }
				/* Grid, non flex: con flex i 4 pannelli .nsn-mega-panel (fratelli nascosti dello
				   shortcode nav) restavano comunque nel flusso come item flex a larghezza 0,
				   niente di rotto ma per sicurezza restano fuori dal flusso con grid-column
				   esplicito su tutti e tre i gruppi reali (nessun auto-placement coinvolto). */
				/* Lo stile globale core per .alignfull dentro un genitore "constrained" applica un
				   margine negativo fisso (calcolato dalla variabile di padding root del tema,
				   sempre 2rem, non collegata al padding ridotto che diamo qui sotto ai 1024px):
				   la riga sfondava oltre il contenitore ed usciva dal viewport da entrambi i lati.
				   Annullato: qui la riga deve solo riempire il genitore, il padding basta da solo. */
				.nsn-category-bar .wp-block-group.alignfull { display: grid; grid-template-columns: auto auto 1fr; column-gap: 0.75rem; padding-left: 1rem; padding-right: 1rem; margin-left: 0; margin-right: 0; width: 100%; }
				.nsn-nav-toggle-wrap { grid-column: 1; grid-row: 1; justify-self: start; }
				.nsn-header-brand { grid-column: 2; grid-row: 1; justify-self: start; }
				.nsn-header-actions { grid-column: 3; grid-row: 1; justify-self: end; }
				/* !important: deve battere .nsn-mega-panel.is-open (display:flex), piu specifica. */
				.nsn-mega-panel { display: none !important; grid-column: 1; grid-row: 1; }
			.nsn-nav-panel { position: fixed; inset: 0; z-index: 300; visibility: hidden; pointer-events: none; }
			.nsn-nav-panel.is-open { visibility: visible; pointer-events: auto; }
			.nsn-nav-panel-backdrop { display: block; position: absolute; inset: 0; background: rgba(95,95,95,0.35); opacity: 0; transition: opacity 0.3s; }
			.nsn-nav-panel.is-open .nsn-nav-panel-backdrop { opacity: 1; }
			.nsn-nav-panel-drawer {
				position: absolute; top: 0; left: 0; bottom: 0; width: 320px; max-width: 85%;
				background: var(--nsn-white); display: flex; flex-direction: column;
				box-shadow: 8px 0 24px rgba(0,0,0,0.2);
				transform: translateX(-100%); transition: transform 0.3s;
			}
			.nsn-nav-panel.is-open .nsn-nav-panel-drawer { transform: translateX(0); }
			body.admin-bar .nsn-nav-panel-backdrop,
			body.admin-bar .nsn-nav-panel-drawer { top: var(--wp-admin--admin-bar--height, 32px); }
			@media (prefers-reduced-motion: reduce) {
				.nsn-nav-panel-backdrop, .nsn-nav-panel-drawer { transition: none; }
			}
			.nsn-nav-panel-header {
				display: flex; align-items: center; justify-content: space-between;
				padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--wp--preset--color--border, #ebebeb); font-weight: 600;
			}
			.nsn-nav-panel-close { background: none; border: 0; color: inherit; cursor: pointer; padding: 0.5em; margin: -0.5em; opacity: 0.6; }
			.nsn-nav-panel-close:hover { opacity: 1; }
			.nsn-primary-nav { flex: 1; overflow-y: auto; padding: 0.5rem 0; }
			.nsn-nav-list { display: block; }
			.nsn-nav-item { position: relative; border-bottom: 1px solid var(--wp--preset--color--border, #ebebeb); }
			.nsn-nav-link { padding: 1rem 1.5rem; }
			.nsn-nav-caret {
				display: flex; align-items: center; justify-content: center;
				position: absolute; right: 0.5rem; top: 0.35rem;
				width: 2.4rem; height: 2.4rem; background: none; border: none; cursor: pointer; color: var(--wp--preset--color--contrast, #23282d);
			}
			.nsn-nav-caret svg { transition: transform 0.2s; }
			.nsn-nav-item.is-expanded .nsn-nav-caret svg { transform: rotate(180deg); }
			.nsn-nav-sublist { list-style: none; margin: 0; padding: 0 1.5rem 0.75rem 2.25rem; }
			.nsn-nav-item.is-expanded .nsn-nav-sublist { display: block; }
			.nsn-nav-sublist li a { display: block; padding: 0.55rem 0; color: var(--wp--preset--color--contrast, #23282d); text-decoration: none; font-size: 0.9rem; }
		}

		/* Telefoni stretti. Sta dopo il blocco dei 1024px, cosi a parita di selettore vince
		   per ordine e non servono !important (prima stava piu in alto e li aveva tutti). */
		@media (max-width: 480px) {
			/* !important necessario: il padding laterale di .nsn-category-bar arriva dallo
			   style inline del gruppo in parts/header.html (2rem per lato). */
			.nsn-category-bar { padding-left: 0.4rem !important; padding-right: 0.75rem !important; }
			/* Padding destro maggiore del sinistro (0.75rem contro 0.4rem): l'icona carrello,
			   ultima a destra nella grid, con il badge del contatore che sporge leggermente
			   oltre il proprio bordo, arrivava quasi a fondere con il bordo reale dello
			   schermo su telefono - tagliata visivamente e difficile da toccare col dito
			   (bug reale segnalato dall'utente 2026-08-12, screenshot con l'icona a ridosso
			   del bordo). Il lato sinistro (hamburger/logo) non ha lo stesso problema, resta
			   stretto. */
			.nsn-category-bar .wp-block-group.alignfull { padding-left: 0.4rem; padding-right: 0.75rem; }
			.nsn-header-actions { gap: 0.6rem; }
		}

		/* Box di notifica WooCommerce (es. "Conferma l'indirizzo e-mail",
		   "Non è stato ancora effettuato alcun ordine" su Il Mio Account):
		   mai avuto uno stile nostro, quindi prendevano il default del
		   plugin, con tre difetti segnalati esplicitamente dall'utente
		   2026-08-12: nessun border-radius, un blu non coerente con
		   l'accento del brand, e i link di azione a volte tutto MAIUSCOLO
		   e a volte no (incoerente). Copre sia il markup classico
		   (.woocommerce-info/.woocommerce-message, usato da Il Mio
		   Account/notifiche server-side) sia quello a blocchi
		   (.wc-block-components-notice-banner, usato in carrello/checkout):
		   stesso box in entrambi i casi. */
		/* Prima versione (poco dopo questo stesso giorno) non si vedeva:
		   il sito e' un block theme, quindi WooCommerce intercetta OGNI
		   notice classica (wc_print_notice/.woocommerce-info) e la
		   ri-renderizza come blocco (vedi
		   Blocks/Domain/Services/Notices.php, get_notices_template) - il
		   markup classico non arriva mai a schermo qui, solo quello a
		   blocchi conta davvero. E il CSS del plugin
		   (assets/client/blocks/store-notices.css) e' molto piu'
		   specifico di quanto pensassi: il colore vive su
		   ".wc-block-components-notice-banner.is-info" (due classi, non
		   una), l'icona e' un <svg> figlio diretto (non un div
		   ".__icon"), e il link vero ha classe ".wc-forward" con
		   "color:#2f2f2f !important" gia' scritto dal plugin - serve
		   pareggiare con altrettanto !important, source order da solo
		   non basta contro una regola piu' specifica o gia' !important. */
		/* Seconda versione confermata funzionante dall'utente 2026-08-12,
		   ma con l'azzurro dell'accento brand - richiesta successiva
		   2026-08-12: portarli "in tema" (grigio, come i riquadri grigi
		   gia' usati altrove sul sito - vedi single-product.css, gallery
		   controls/qty stepper), niente border-radius, icona e testo
		   neri. Stesso riquadro grigio del resto del sito: background
		   subtle #ebebeb + border 1px stesso tono. */
		.woocommerce-info, .woocommerce-message {
			border-radius: 0;
			color: var(--wp--preset--color--contrast, #23282d);
		}
		.woocommerce-error, .wc-block-components-notice-banner {
			border-radius: 0;
		}
		.wc-block-components-notice-banner.is-info,
		.wc-block-components-notice-banner.is-success {
			border-color: var(--wp--preset--color--border, #ebebeb) !important;
			background-color: var(--wp--preset--color--subtle, #ebebeb) !important;
		}
		.wc-block-components-notice-banner.is-info > svg,
		.wc-block-components-notice-banner.is-success > svg {
			background-color: var(--wp--preset--color--contrast, #23282d) !important;
		}
		.woocommerce-info::before, .woocommerce-message::before {
			color: var(--wp--preset--color--contrast, #23282d);
		}
		.wc-block-components-notice-banner .wc-block-components-notice-banner__content {
			color: var(--wp--preset--color--contrast, #23282d);
		}
		/* Il link ".wc-forward" (es. "Sfoglia prodotti"): a seconda del
		   template WooCommerce a volte porta anche la classe bottone del
		   tema (maiuscolo, per via di theme.json
		   styles.elements.button.textTransform:uppercase - lo stile
		   bottone ufficiale del sito) e a volte no (bug del core
		   WooCommerce, un template lo aggiunge e uno no per lo stesso
		   tipo di link - segnalato dall'utente 2026-08-12, "i pulsanti
		   sono in un caso maiusc e in uno minuscolo"). Uniformati
		   entrambi allo stile bottone del sito, che e' quello corretto,
		   non il contrario. */
		.woocommerce-info a, .woocommerce-message a, .woocommerce-error a,
		.wc-block-components-notice-banner a {
			color: var(--wp--preset--color--contrast, #23282d) !important;
		}
		/* Specificita' a parita' di !important: il selettore vero del
		   plugin e' ".wc-block-components-notice-banner>
		   .wc-block-components-notice-banner__content .wc-forward" - TRE
		   classi, non due (contate male al primo giro). Servono
		   altrettante classi per pareggiare: a parita' di !important e
		   specificita', vince l'ordine di caricamento (questo file arriva
		   dopo il CSS del plugin). */
		.wc-block-components-notice-banner .wc-block-components-notice-banner__content .wc-forward,
		.woocommerce-info .wc-forward, .woocommerce-message .wc-forward {
			color: var(--wp--preset--color--contrast, #23282d) !important;
			text-transform: uppercase !important;
			letter-spacing: 0.05em;
			font-weight: 500;
		}


/* Link 'Modifica carrello' nel riepilogo ordine del checkout (2026-08-23) */
.nsn-edit-cart-link {
	margin: 0 0 1rem;
	font-size: 0.9rem;
}
.nsn-edit-cart-link a {
	color: #999999;
	text-decoration: underline;
}
.nsn-edit-cart-link a:hover {
	color: var(--wp--preset--color--contrast, #23282d);
}

/* Avviso dello sconto del 10% sopra 500 euro, nel carrello e nel carrello a comparsa
   (mu-plugins/nsn-sconto-soglia.php, 2026-10-19). Stesso riquadro grigio delle notice.
   Nel carrello sta nello spazio OrderMeta, dove WooCommerce mette "padding: 16px 0" con
   .wc-block-components-totals-wrapper.slot-wrapper > * > * (due classi): il secondo
   selettore pareggia la specificita' e vince perche' questo file arriva dopo. */
.nsn-avviso-soglia,
.wc-block-components-order-meta .nsn-avviso-soglia {
	margin: 1rem 0 0;
	padding: 0.75rem 1rem;
	background-color: var(--wp--preset--color--subtle, #ebebeb);
	border: 1px solid var(--wp--preset--color--border, #ebebeb);
	color: var(--wp--preset--color--contrast, #23282d);
	font-size: 0.875rem;
	line-height: 1.4;
}
.nsn-avviso-soglia[hidden] { display: none; }
.wc-block-mini-cart__drawer .nsn-avviso-soglia { margin: 0 0 1rem; }