/*
 * Il megamenu — il pannello che si apre dal pulsante accanto al logo.
 *
 * ## Perche' esiste
 *
 * Il menu del sito aveva otto voci e nessun sottomenu: per arrivare a una
 * categoria o a un negozio bisognava passare da una pagina intermedia, e le
 * cinquantasette categorie e i centotrentanove negozi non si vedevano da
 * nessuna parte.
 *
 * Chiesto da Enzo il 19 settembre 2026, guardando scontify. Che poi si e'
 * scoperto non averne uno: il loro l'hanno scritto a mano, con un prefisso
 * `mm-` che in Rehub non esiste. Siamo nella stessa posizione, e questo e' il
 * nostro.
 *
 * ## I colori
 *
 * Sono quelli di `offerta.css`, ridichiarati qui perche' questo foglio si
 * carica su **tutte** le pagine mentre quello solo sulle schede offerta.
 * Stessi valori: se un giorno cambiano, cambiano in due posti — ed e' il
 * prezzo di non caricare sessantaquattro chilobyte su ogni pagina per averne
 * tre.
 *
 * ## Come si spegne
 *
 * `update_option( 'on1_megamenu', '0' )`. Il PHP non stampa piu' niente e il
 * menu torna quello di Rehub, senza ricaricare il plugin.
 */

/* ## Il menu di Rehub sparisce, ma solo a cose fatte
 *
 * Caricato il plugin la prima volta, il sito si e' ritrovato **due** menu: il
 * nostro sopra e quello di Rehub sotto, con le stesse voci. Enzo: «cosi' e' un
 * doppione di quello rehub».
 *
 * La classe la mette `menu.js` **dopo** aver collocato il pulsante. L'ordine
 * conta: se lo spostamento fallisce la classe non arriva, il menu di Rehub
 * resta al suo posto, e il sito e' navigabile come prima. Nasconderlo dal CSS
 * — che si applica sempre — lascerebbe il sito senza nessun menu ogni volta
 * che il JavaScript non parte.
 */
/* ## E solo sopra i 1025 pixel
 *
 * La riga del logo, dove sta il nostro pulsante, ha la classe `hideontablet`:
 * **Rehub la nasconde sotto i 1025 pixel**. Sotto quella soglia il menu del
 * sito e' l'hamburger dentro `.main-nav`.
 *
 * Nascondendolo a ogni larghezza, il 19 settembre 2026 il sito e' rimasto
 * senza nessun menu sul telefono: il nostro pulsante invisibile perche' sta in
 * una sezione nascosta, e quello di Rehub tolto da noi. Enzo: «su mobile e'
 * proprio sparito il menu hamburger!!».
 *
 * Quindi si toglie solo dove c'e' qualcosa che lo sostituisce. Sotto i 1025
 * resta il menu di Rehub, che sul telefono funziona bene.
 */
@media (min-width: 1025px) {
	.on1-mm-attivo .main-nav {
		display: none;
	}
}

/* ## I colori stanno su `:root`, e non e' un dettaglio
 *
 * Erano dichiarati su `.on1-mm`. Poi `menu.js` sposta le due scorciatoie
 * **fuori** da quel blocco, dentro la barra di ricerca: li' dentro
 * `var(--mm-verde)` non esiste piu', e una proprieta' che punta a un colore
 * inesistente non e' un colore sbagliato — e' una dichiarazione buttata via.
 * Ecco perche' Offerte e Promozioni restavano senza sfondo **anche con
 * `!important`**: l'`!important` vinceva una gara su un valore vuoto.
 *
 * Su `:root` valgono ovunque, comunque si sposti il markup.
 */
:root {
	--mm-accento: #e8710a;
	--mm-accento-scuro: #c25c05;
	--mm-inchiostro: #0f172a;
	--mm-inchiostro-lieve: #475569;
	--mm-tenue: #94a3b8;
	--mm-bordo: #e7e5df;
	--mm-fondo: #ffffff;
	--mm-fondo-lieve: #faf9f7;
	--mm-verde: #059669;
	--mm-verde-lieve: #ecfdf5;
	--mm-tessera: #ffffff;
	--mm-ombra: 0 24px 60px -18px rgba(15, 23, 42, 0.35);
}

/* Il blocco vive dentro `.logo-section`, che e' una riga flex: senza `flex: 0
   0 auto` si stirerebbe per tutta la riga e spingerebbe fuori la ricerca. Lo
   stacco dal logo lo fa il `margin-right: 15px` che il tema da' gia' a `.logo`,
   quindi qui non serve nessun margine. */
.on1-mm {
	flex: 0 0 auto;
	position: static;
	z-index: 300;
	line-height: 1.5;
}

/* Il pannello si apre sotto l'intestazione, che su questo sito e' scura: il
   pulsante prende il fondo chiaro per staccare, come fa il resto della barra. */
.on1-mm__bar {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ## Il pulsante sta **accanto** al logo, e stavolta funziona
 *
 * Tre versioni su questa riga, e vale la pena scrivere perche'.
 *
 * Le prime due lo mettevano accanto al logo e la distanza non si chiudeva:
 * sembrava un problema di CSS e non lo era — meta' dell'immagine del logo e'
 * trasparente (vedi sotto), e il pulsante era gia' attaccato, solo attaccato a
 * del vuoto.
 *
 * La terza l'ha messo **dentro** `.logo` per non dipendere piu' dal tema. Ha
 * risolto la distanza e ne ha aperta una peggiore: `header .logo` ha
 * `line-height: 0` — il trucco classico per togliere lo spazio sotto
 * un'immagine — e tutto il pannello ereditava righe alte zero. Le lettere
 * finivano una sopra l'altra. Enzo: «sembra tutto schiacciato».
 *
 * Quella e' una scatola fatta per contenere un'immagine e nient'altro:
 * `line-height: 0`, `float: left`, `max-width` che in certe larghezze scende a
 * 250 px. Non e' un posto dove mettere un menu.
 *
 * Quindi: fuori, accanto al logo come all'inizio. Ora ci sta bene davvero,
 * perche' nel frattempo il vuoto dentro l'immagine e' stato tolto — la causa
 * vera e' risolta alla causa vera, non aggirata.
 */

/* L'altezza delle righe la dichiariamo noi — sopra su `.on1-mm` e qui — invece
   di ereditarla. L'intestazione e' un quartiere ostile e ci siamo gia' passati:
   una riga sola del tema ha accavallato tutto il pannello. */
.on1-mm__pannello {
	line-height: 1.5;
}

/* ## Il vuoto era dentro l'immagine del logo, e vale solo per quel file
 *
 * Due giri di correzioni a spostare il pulsante, e la distanza non si muoveva.
 * Misurato il file: `logo_desktop_2x_trasparente_N_bianca.png` e' 600 x 120
 * pixel, ma il disegno finisce al pixel 280. **Il 53% dell'immagine e' vuoto**,
 * e l'`<img>` lo rende largo 500: circa 250 pixel di niente fra la scritta e
 * tutto quello che le sta accanto. Nessuna regola di CSS poteva chiuderli,
 * perche' quel vuoto e' nei pixel.
 *
 * Qui il collegamento fa da finestra larga quanto il disegno, e l'immagine ci
 * scorre dentro. Il conto: 280 x 500 / 600 = 233 px, finestra a 250 con un po'
 * di margine. Verificato ritagliando davvero il file, non a occhio.
 *
 * ## Perche' e' legato a `on1-logo-vecchio`
 *
 * Il logo nuovo non ha quel vuoto, e questa stessa finestra glielo
 * taglierebbe a meta'. La classe la mette `menu.js` guardando **che file c'e'
 * davvero**, cosi' l'ordine in cui si cambiano plugin e logo non conta.
 *
 * Il caso di fabbrica — nessuna classe — e' il logo senza vuoto: nessuna
 * finestra, nessun ritaglio. Il giorno che questo file sparisce dal sito,
 * tutto questo blocco si puo' togliere.
 */
.on1-mm-attivo.on1-logo-vecchio .logo-section .logo,
.on1-mm-attivo.on1-logo-vecchio .logo-section .logo_image {
	display: block;
	flex: 0 0 auto;
	max-width: 250px;
	overflow: hidden;
}

/* Il tema ha `img { max-width: 100% }`: dentro una finestra da 250 px
   rimpicciolirebbe il logo invece di ritagliarlo, ed e' l'unica cosa da
   disfare. Niente `width`, niente `height`: quelle le decide la pagina, e
   `width: auto` manderebbe l'immagine alla sua misura vera facendola crescere
   del 20% — errore gia' fatto e corretto. */
.on1-mm-attivo.on1-logo-vecchio .logo-section .logo_image img {
	max-width: none;
	display: block;
}

/* ## Un tetto al logo nuovo, qualunque misura dicano le impostazioni
 *
 * Il logo vive su una riga che deve contenere anche il pulsante del menu, la
 * ricerca e i preferiti. Le sue misure si impostano nel tema, e sono un campo
 * che si puo' sbagliare: senza un tetto, un numero grosso li' dentro
 * spingerebbe fuori la ricerca su ogni pagina del sito.
 *
 * 320 px e' il massimo che quella riga regge a 1200: logo 320 + stacco 15 +
 * pulsante 98 + margini della ricerca 48 + ricerca 600 + preferiti 90 = 1171.
 */
.on1-mm-attivo:not(.on1-logo-vecchio) .logo-section .logo_image img {
	max-width: 320px;
	height: auto;
}

/* Il pannello si aggancia alla riga, non al pulsante: cosi' parte dal bordo
   sinistro del contenitore invece che da meta' intestazione. */
.on1-mm-attivo .logo-section {
	position: relative;
}

/* Contornato, non pieno di bianco: l'intestazione e' scura e una pastiglia
   bianca ci finiva sopra come una toppa. Enzo: «il pulsante menu bianco non mi
   piace». Il contorno lo fa leggere come un comando senza urlare — il colore
   pieno in quella riga ce l'hanno gia' Offerte e Promozioni, e due accenti che
   si contendono l'attenzione a dieci centimetri l'uno dall'altro non aiutano
   nessuno. */
.on1-mm__apri {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	padding: 9px 18px 9px 14px;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font: inherit;
	font-weight: 650;
	font-size: 14.5px;
	line-height: 1.2;
	cursor: pointer;
}

.on1-mm__apri:hover {
	border-color: var(--mm-accento);
	color: var(--mm-accento);
	background: rgba(232, 113, 10, 0.1);
}

.on1-mm__apri:hover .on1-mm__righe i {
	background: var(--mm-accento);
}

.on1-mm__apri:focus-visible,
.on1-mm__chiudi:focus-visible,
.on1-mm a:focus-visible {
	outline: 2px solid var(--mm-accento);
	outline-offset: 2px;
}

.on1-mm__righe {
	display: grid;
	gap: 3.5px;
}

.on1-mm__righe i {
	display: block;
	width: 17px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

/* ── Le scorciatoie ─────────────────────────────────────────────────────── */

/* Sotto la barra di ricerca, dentro il suo contenitore: sono scorciatoie
   **della ricerca**, e allinearle sotto di essa lo dice senza scriverlo. */
.on1-mm__vie {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 9px;
}

.on1-mm__vie a.on1-mm__via {
	border-radius: 999px !important;
	padding: 6px 15px !important;
	font-size: 13px !important;
	font-weight: 650 !important;
	text-decoration: none !important;
}

.on1-mm__via {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 650;
	line-height: 1.3;
	text-decoration: none;
	border: 1px solid transparent;
}

/* ## `!important` qui e' la scelta giusta, non una scorciatoia
 *
 * Le scorciatoie finiscono **dentro** il contenitore della ricerca di Rehub,
 * che ha regole sue per i link li' dentro: il 19 settembre sono uscite come
 * testo bianco senza sfondo, «non sono piu' dentro il pulsante verde e
 * arancione».
 *
 * Non si tratta di vincere una gara di specificita' con noi stessi: e' un
 * tema di terze parti che non possiamo modificare, e questi tre valori sono
 * l'identita' visiva dei due pulsanti. Senza, non sono pulsanti.
 *
 * I selettori non nominano nessun contenitore, di proposito: su schermo largo
 * queste pastiglie stanno sotto la ricerca, sul telefono dentro il pannello.
 * Un selettore che dipendesse da dove si trovano funzionerebbe in un posto
 * solo — ed e' gia' successo.
 */
.on1-mm__vie a.on1-mm__via--offerte {
	background: var(--mm-verde) !important;
	color: #fff !important;
	border-color: transparent !important;
}

.on1-mm__vie a.on1-mm__via--offerte:hover {
	background: #047857 !important;
}

.on1-mm__vie a.on1-mm__via--promozioni {
	background: var(--mm-accento) !important;
	color: #fff !important;
	border-color: transparent !important;
}

.on1-mm__vie a.on1-mm__via--promozioni:hover {
	background: var(--mm-accento-scuro) !important;
}

/* ── Il pannello ────────────────────────────────────────────────────────── */

.on1-mm__pannello {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	width: min(1140px, calc(100vw - 32px));
	background: var(--mm-fondo);
	border: 1px solid var(--mm-bordo);
	border-radius: 14px;
	box-shadow: var(--mm-ombra);
	overflow: hidden;
	color: var(--mm-inchiostro);
}

.on1-mm__pannello[hidden] {
	display: none;
}

.on1-mm__testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--mm-bordo);
	background: var(--mm-fondo-lieve);
}

.on1-mm__titolo {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--mm-inchiostro);
}

.on1-mm__chiudi {
	border: 1px solid var(--mm-bordo);
	background: var(--mm-fondo);
	color: var(--mm-inchiostro-lieve);
	border-radius: 999px;
	width: 30px;
	height: 30px;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.on1-mm__griglia {
	display: grid;
	grid-template-columns: 200px 1fr 1fr 250px;
}

.on1-mm__col {
	padding: 20px;
	border-right: 1px solid var(--mm-bordo);
	min-width: 0;
}

.on1-mm__col:last-child {
	border-right: 0;
}

.on1-mm__col--canale {
	display: flex;
	flex-direction: column;
}

.on1-mm__et {
	display: block;
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--mm-tenue);
}

/* Le voci */

.on1-mm__voci {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
}

.on1-mm__voci li {
	margin: 0;
}

.on1-mm__voci a {
	display: block;
	padding: 7px 10px;
	margin-inline: -10px;
	border-radius: 9px;
	color: var(--mm-inchiostro);
	text-decoration: none;
	font-weight: 550;
	font-size: 14.5px;
}

.on1-mm__voci a:hover {
	background: var(--mm-fondo-lieve);
	color: var(--mm-accento);
}

/* Le tessere di negozi e categorie */

/* `minmax(0, 1fr)` e non `1fr`: una traccia `1fr` non scende sotto la
   larghezza del contenuto, e un nome lungo come «Elettrodomestici» allargava
   la sua colonna spingendo le altre dentro quella accanto. */
.on1-mm__tessere {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.on1-mm__tessere--categorie {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.on1-mm__tessera {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	aspect-ratio: 1 / 0.74;
	padding: 8px;
	border: 1px solid var(--mm-bordo);
	border-radius: 10px;
	background: var(--mm-tessera);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.on1-mm__tessera:hover {
	border-color: var(--mm-accento);
	transform: translateY(-1px);
}

.on1-mm__tessera img {
	max-width: 100%;
	max-height: 26px;
	width: auto;
	object-fit: contain;
}

.on1-mm__quante {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--mm-tenue);
	font-variant-numeric: tabular-nums;
}

.on1-mm__tessera--cat {
	align-items: flex-start;
	justify-content: flex-end;
	aspect-ratio: auto;
	padding: 11px 12px;
	gap: 2px;
	background: var(--mm-fondo-lieve);
}

.on1-mm__nome {
	font-size: 13.5px;
	font-weight: 650;
	color: var(--mm-inchiostro);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.on1-mm__tutti {
	display: block;
	margin-top: 10px;
	padding: 9px 14px;
	border: 1px solid var(--mm-bordo);
	border-radius: 10px;
	background: var(--mm-fondo-lieve);
	color: var(--mm-inchiostro);
	font-size: 13px;
	font-weight: 650;
	text-align: center;
	text-decoration: none;
}

.on1-mm__tutti:hover {
	border-color: var(--mm-accento);
	color: var(--mm-accento);
}

/* Il canale */

/* `min-height: 0` diceva al riquadro che poteva stringersi sotto il suo
   contenuto, e il riquadro obbediva: le tre righe finivano una sopra l'altra,
   illeggibili. Enzo: «si e' tutto compresso all'interno del menu». Un blocco
   di testo non ha una misura minima da negoziare — o ci sta, o si allarga. */
.on1-mm__canale {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 12px;
	padding: 16px;
	border-radius: 12px;
	background: var(--mm-verde-lieve);
	border: 1px solid rgba(5, 150, 105, 0.22);
}

/* E nessun figlio si lascia comprimere: in una colonna flex e' `flex-shrink`
   a decidere, e il suo valore di fabbrica e' «sì, comprimimi pure». */
.on1-mm__canale > * {
	flex: 0 0 auto;
}

.on1-mm__numero {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--mm-verde);
	font-variant-numeric: tabular-nums;
}

.on1-mm__sotto {
	font-size: 12px;
	color: var(--mm-inchiostro-lieve);
	margin: 4px 0 0;
}

.on1-mm__canale ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 7px;
	font-size: 13px;
	color: var(--mm-inchiostro-lieve);
}

.on1-mm__canale li {
	padding-left: 18px;
	position: relative;
	margin: 0;
}

.on1-mm__canale li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--mm-verde);
}

.on1-mm__vai {
	margin-top: auto;
	display: block;
	text-align: center;
	padding: 11px 14px;
	border-radius: 10px;
	background: var(--mm-verde);
	color: #fff;
	font-weight: 650;
	font-size: 14px;
	text-decoration: none;
}

.on1-mm__vai:hover {
	background: #047857;
	color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * IL TELEFONO
 *
 * Sotto i 1025 pixel la riga del logo non esiste: Rehub le da' `hideontablet`
 * e la nasconde. L'intestazione li' e' la barra scura con l'hamburger, e il
 * megamenu ci va dentro — `menu.js` lo sposta e mette `on1-mm-stretto`.
 *
 * L'hamburger di Rehub sparisce **solo** con quella classe, cioe' solo a
 * spostamento riuscito. Se fallisce resta il cassetto di Rehub, che funziona
 * bene ed e' gia' curato nelle Theme Options: voci con le icone arancioni,
 * barra sulla voce attiva, «Trova regalo IA» in oro. Il 19 settembre il sito
 * e' rimasto un giro senza nessun menu sul telefono, e non deve ricapitare.
 * ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
	.on1-mm-stretto #dl-trigger {
		display: none !important;
	}

	/* Il pulsante prende il posto dell'hamburger, e la sua misura: il logo
	   mobile di Rehub e' piazzato in assoluto a 55 px dal bordo, quindi un
	   pulsante piu' largo o piu' stretto glielo farebbe finire addosso. */
	.on1-mm-stretto .on1-mm__apri {
		width: 54px;
		height: 54px;
		padding: 0;
		gap: 0;
		justify-content: center;
		border-radius: 13px;
		/* Il testo «Menu» sta nel pulsante come testo semplice e non si puo'
		   nascondere da solo. A zero sparisce alla vista ma resta nella
		   pagina, quindi chi naviga con la voce lo sente lo stesso. Le tre
		   righe hanno misure loro e non si accorgono di niente. */
		font-size: 0;
	}

	.on1-mm-stretto .on1-mm__righe i {
		width: 21px;
		height: 2px;
	}

	.on1-mm-stretto .on1-mm__bar {
		gap: 0;
	}

	/* ## Il logo sul telefono: piu' piccolo di quanto dicono le Theme Options
	 *
	 * Il CSS personalizzato del tema dice `max-width: 280px` per il logo
	 * mobile. Era giusto per il logo vecchio, che per meta' era trasparente:
	 * 280 px di immagine facevano circa 130 px di disegno. Il logo nuovo non
	 * ha quel vuoto, quindi quei 280 px sono tutti disegno e riempiono mezza
	 * barra. Enzo: «su mobile sembra un po' troppo prominente».
	 *
	 * 190 px sono 39 px di altezza: sta in riga con il pulsante del menu, che
	 * e' 54, senza fargli ombra. La regola batte quella delle Theme Options
	 * perche' la nomina piu' precisamente — e vale **solo** col logo nuovo,
	 * quindi tornando al vecchio torna anche la misura di prima.
	 *
	 * Le Theme Options non hanno un campo per la misura del logo mobile: e'
	 * per questo che sta qui e non li'.
	 */
	.on1-mm-stretto:not(.on1-logo-vecchio) #dl-menu a.logo_image_mobile img,
	.on1-mm-stretto:not(.on1-logo-vecchio) a.logo_image_mobile img {
		max-width: 190px !important;
		max-height: 44px !important;
		width: auto !important;
		height: auto !important;
	}

	/* ## Il pannello copre lo schermo, e non e' pigrizia
	 *
	 * Su schermo largo il pannello e' un foglio che scende sotto
	 * l'intestazione. Sul telefono quel foglio sarebbe largo quanto lo schermo
	 * e alto piu' dello schermo: tanto vale che lo sia davvero, con il suo
	 * scorrimento e il suo pulsante di chiusura sempre a portata.
	 *
	 * Cosi' non serve calcolare dove comincia l'intestazione — che cambia
	 * quando la barra si attacca in alto scorrendo, ed e' una misura che
	 * sbagliavamo di sicuro.
	 */
	.on1-mm-stretto .on1-mm__pannello {
		position: fixed;
		inset: 0;
		width: auto;
		max-width: none;
		height: auto;
		max-height: none;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 100000;
	}

	/* La chiusura resta appesa in cima: su un pannello che si scorre, dover
	   tornare su per chiuderlo e' il fastidio classico dei menu a schermo
	   pieno. */
	.on1-mm-stretto .on1-mm__testa {
		position: sticky;
		top: 0;
		z-index: 2;
	}

	.on1-mm-stretto .on1-mm__chiudi {
		width: 38px;
		height: 38px;
		font-size: 21px;
	}

	/* Le scorciatoie qui non stanno sotto la ricerca — la ricerca e'
	   nascosta — ma in cima al pannello, dove si vedono per prime. */
	.on1-mm-stretto .on1-mm__pannello .on1-mm__vie {
		margin: 0;
		padding: 14px 20px 0;
	}

	.on1-mm-stretto .on1-mm__pannello .on1-mm__vie a.on1-mm__via {
		flex: 1;
		justify-content: center;
		padding-block: 11px !important;
		font-size: 14px !important;
	}

	/* Lo scuro del pannello, dal 24 settembre 2026, vale a ogni larghezza:
	   vedi «Scuro dappertutto» in fondo al file. */

	/* La pagina sotto non scorre mentre il menu e' aperto: con un pannello a
	   schermo pieno si finirebbe per scorrere quella invece di questo. */
	.on1-mm-aperto,
	.on1-mm-aperto body {
		overflow: hidden;
	}
}

/* ── Le sezioni apribili, e perche' solo sul telefono ───────────────────────
 *
 * In colonna unica il pannello diventa alto millequattrocento pixel: quasi due
 * schermate di scorrimento per un menu, che e' l'opposto di quello che serve a
 * chi vuole arrivare da qualche parte in fretta.
 *
 * Sono `<details>`, quindi **funzionano senza JavaScript**: se il codice non
 * parte restano aperte. Il JavaScript le chiude sul telefono, non le apre —
 * nessuno resta chiuso fuori da niente.
 */
.on1-mm__col--sez > summary {
	display: none;
}

.on1-mm__col--sez > summary::-webkit-details-marker {
	display: none;
}

@media (max-width: 1100px) {
	.on1-mm__griglia {
		grid-template-columns: 1fr 1fr;
	}

	.on1-mm__col:nth-child(2n) {
		border-right: 0;
	}

	.on1-mm__col {
		border-bottom: 1px solid var(--mm-bordo);
	}
}

@media (max-width: 1024px) {
	.on1-mm__griglia {
		grid-template-columns: 1fr;
	}

	.on1-mm__col {
		border-right: 0;
	}

	.on1-mm__tessere {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Piu' basse: su uno schermo alto 800 pixel nove tessere quadrate sono
	   tre schermate di scorrimento per scegliere un negozio. */
	.on1-mm__tessera {
		aspect-ratio: 1 / 0.5;
	}

	.on1-mm__col--sez > summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		cursor: pointer;
		list-style: none;
		padding-block: 4px;
	}

	.on1-mm__col--sez > summary::after {
		content: "+";
		color: var(--mm-accento);
		font-size: 15px;
		font-weight: 700;
	}

	.on1-mm__col--sez[open] > summary::after {
		content: "\2212";
	}

	.on1-mm__col--sez:not([open]) {
		padding-block: 14px;
	}

	.on1-mm__col--sez:not([open]) > summary {
		margin-bottom: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.on1-mm__tessera {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
 * SCURO DAPPERTUTTO
 *
 * Il 19 settembre 2026 il pannello era diventato scuro solo sul telefono: a
 * schermo pieno un foglio bianco che copre tutto, di sera, acceca. Sullo
 * schermo grande era rimasto chiaro, per staccare dall'intestazione scura.
 *
 * Il 24 settembre Enzo l'ha chiesto scuro anche li', con lo scuro del sito.
 * I colori sono quelli dell'intestazione, `#1c1917`: il pannello sembra la
 * barra che si apre, non un'altra cosa che ci arriva sopra. Lo stacco che
 * prima dava il bianco adesso lo danno il bordo, un'ombra piu' profonda e,
 * sullo schermo grande, un filo arancione in cima — lo stesso dell'orlo
 * sotto l'intestazione.
 *
 * Si riscrivono i nomi dei colori e basta: ogni pezzo del pannello li legge
 * da qui, quindi cambiano tutti insieme e nessuno resta indietro. Stanno sul
 * pannello e non su `:root`, perche' le due scorciatoie Offerte e Promozioni
 * vivono fuori, nella barra di ricerca, e devono restare come sono.
 * ═══════════════════════════════════════════════════════════════════════════ */

.on1-mm__pannello {
	--mm-fondo: #1c1917;
	--mm-fondo-lieve: #272220;
	--mm-inchiostro: #f5f5f4;
	--mm-inchiostro-lieve: #b6afa9;
	--mm-tenue: #a8a29e;
	--mm-bordo: #3c3532;
	--mm-verde-lieve: rgba(5, 150, 105, 0.14);
	--mm-ombra: 0 28px 70px -20px rgba(0, 0, 0, 0.6);
}

@media (min-width: 1025px) {
	.on1-mm__pannello {
		border-top: 2px solid var(--mm-accento);
	}
}

/* ## Le tessere dei negozi restano bianche, ed e' voluto
 *
 * Sono loghi di marchi — Amazon, Samsung, Acer — disegnati per stare su fondo
 * chiaro, molti con le lettere nere. Su fondo scuro meta' di loro sparirebbe:
 * una griglia di riquadri vuoti. La tessera bianca fa da cartoncino, come sui
 * volantini.
 *
 * Il conteggio sotto il logo si scrive allora col grigio da fondo chiaro, non
 * con quello da fondo scuro che vale per tutto il resto.
 */
.on1-mm__tessera:not(.on1-mm__tessera--cat) {
	background: #fff;
}

.on1-mm__tessera:not(.on1-mm__tessera--cat) .on1-mm__quante {
	color: #78716c;
}

/* Il verde pieno e' fatto per il testo su bianco: su fondo scuro si spegne.
   Il numero grande prende la versione chiara, mentre il pulsante «Entra nel
   canale» tiene il pieno, che col testo bianco sopra funziona su tutti e due
   i fondi. */
.on1-mm__numero {
	color: #34d399;
}

.on1-mm__canale {
	border-color: rgba(52, 211, 153, 0.3);
}

.on1-mm__canale li::before {
	background: #34d399;
}