/* ====================================================================
   Polo80 - Pagina Menu digitale.
   Estende le classi del design system già definite nel CSS del Kit
   Elementor (.pop-card, .pop-badge, variabili --pop-border-*,
   --e-global-color-*, --e-global-typography-*) invece di duplicarle.
   ==================================================================== */

/* ---- Header ridotto per smartphone e tablet (solo pagina Menu) ----
   Solo da desktop "vero" in su (oltre il breakpoint tablet di Elementor, qui
   1024px) la pagina Menu mostra l'header/footer completi del sito, come
   tutte le altre pagine. Sotto quella soglia, dove header e footer completi
   lascerebbero troppo poco spazio al menu, li nascondiamo (solo su questa
   pagina, grazie alla classe sul body) e mostriamo al loro posto una barra
   ridotta con logo + titolo, stesso sfondo verde scuro dell'header reale. ---- */
@media (max-width: 1024px) {
	body.pop-pagina-menu .elementor-location-header,
	body.pop-pagina-menu .elementor-location-footer {
		display: none !important;
	}

	/* Il titolo "Menù" della pagina è ripetuto: la barra ridotta qui sopra
	   (".pop-menu-header-mobile__titolo") mostra già la scritta "Menù".
	   Nascosto solo qui sotto i 1024px: da desktop l'header ridotto non
	   c'è, quindi lì resta l'unico titolo della pagina. */
	.elementor-element-menupagetitolo1 {
		display: none;
	}

	/* Il contenitore della sezione ha 60px di spazio vuoto in alto,
	   pensato per stare sopra al titolo "Menù" appena nascosto qui sopra:
	   senza più il titolo a "consumarlo" visivamente, restava un vuoto
	   eccessivo sopra la tendina di selezione categoria. Ridotto solo qui
	   sotto i 1024px (da desktop il titolo c'è ancora, quindi lo spazio
	   pieno resta corretto lì). "!important": il valore di base arriva da
	   una custom property di Elementor (--padding-top) con una regola più
	   specifica di questa. */
	.elementor-element-menupage001 {
		padding-top: 10px !important;
	}
}

.pop-menu-header-mobile {
	display: none;
	position: relative;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	background-color: var(--e-global-color-secondary);
	border-bottom: var(--pop-border-width) solid var(--pop-border-color);
}
@media (max-width: 1024px) {
	.pop-menu-header-mobile {
		display: flex;
	}
}
.pop-menu-header-mobile__logo {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	line-height: 0;
}
/* Selettore doppiamente qualificato (".pop-menu-header-mobile .pop-menu-header-mobile__logo img")
   per battere in specificità ".elementor img" del core Elementor (height:auto;
   max-width:100%), che a parità di specificità con un selettore più corto
   vincerebbe lui sulla cascata e farebbe apparire il logo enorme. */
.pop-menu-header-mobile .pop-menu-header-mobile__logo img {
	display: block;
	height: 36px;
	width: auto;
	max-width: none;
}
.pop-menu-header-mobile__titolo {
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	text-transform: uppercase;
	font-size: 20px;
	color: var(--e-global-color-panna-crema);
	margin: 0;
}

/* ---- Card voce di menu ---- */
.pop-menu-card {
	background-color: var(--e-global-color-panna-crema);
	border: var(--pop-border-width) solid var(--pop-border-color);
	border-radius: 0;
	box-shadow: 6px 6px 0 var(--pop-border-color);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: visible;
}

.pop-menu-card__media {
	position: relative;
	border-bottom: var(--pop-border-width) solid var(--pop-border-color);
}
.pop-menu-card__media img {
	display: block;
	width: 100%;
	height: 180px;
	max-height: 180px;
	object-fit: cover;
	object-position: center;
}

/* Segnaposto (logo del sito, prodotto senza foto propria, vedi
   ct_shortcode_menu_item_card()): "cover" andrebbe bene per una foto ma
   ritaglierebbe male un logo (di solito con molto spazio vuoto intorno,
   pensato per essere visto intero) — qui "contain" lo mostra tutto,
   rimpicciolito, su uno sfondo pieno invece che ritagliato a riempire. */
.pop-menu-card__media--segnaposto {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--e-global-color-panna-crema);
}
.pop-menu-card__media--segnaposto img {
	width: auto;
	max-width: 55%;
	height: auto;
	max-height: 55%;
	object-fit: contain;
}

/* Adesivi diagonali: riservati a "Novità" (giallo), "Offerta" (arancione) e
   "Sold Out" (nero). Sono indipendenti tra loro (un prodotto può essere allo
   stesso tempo nuovo e in offerta) e si impilano in quest'ordine fisso di
   priorità quando più di uno è attivo, spostandosi più in basso via
   .pop-menu-badge--secondaria (2° adesivo) e --terziaria (3°).
   Selettore composto con ".pop-badge" (invece del solo modificatore): il CSS
   custom del Kit Elementor definisce anche lui ".pop-badge { color: ...;
   background-color: ... }", caricato DOPO questo file — stessa specificità
   di un selettore a una classe, quindi a parità vinceva lui, lasciando ad
   es. "Sold Out" con testo quasi nero sul suo stesso sfondo quasi nero
   (invisibile) invece del crema dichiarato qui. Due classi battono la sua
   una, stesso principio già usato per ".pop-menu-tabs__bar .pop-menu-tabs__btn". */
.pop-badge.pop-menu-badge--novita {
	background-color: var(--e-global-color-primary);
	color: var(--e-global-color-text);
}
.pop-badge.pop-menu-badge--offerta {
	background-color: var(--e-global-color-accent);
	/* Regola di contrasto del sito (vedi ".pop-alt-sezione .elementor-widget-heading
	   .elementor-heading-title" più sotto): testo verde scuro su sfondo
	   arancione, non crema. */
	color: var(--e-global-color-secondary);
}
.pop-badge.pop-menu-badge--sold_out {
	background-color: var(--e-global-color-text);
	color: var(--e-global-color-panna-crema);
}
.pop-menu-badge--secondaria {
	/* !important: stessa specificità di ".pop-badge" (che imposta top:16px nel
	   custom_css del Kit), l'ordine di caricamento dei fogli di stile non è
	   garantito a nostro favore. */
	top: 56px !important;
}
.pop-menu-badge--terziaria {
	top: 96px !important;
}
/* Senza foto sotto: il badge non "galleggia" più sopra un'immagine, quindi lo mostriamo in linea */
.pop-menu-badge--no-media {
	position: static;
	display: inline-block;
	transform: none;
	margin: 12px 0 0 12px;
}
.pop-menu-badge--no-media.pop-menu-badge--secondaria,
.pop-menu-badge--no-media.pop-menu-badge--terziaria {
	margin-top: 4px;
}

/* Etichette (Piccante, Vegano, Vegetariano, Senza Glutine, e qualunque altra
   aggiunta da wp-admin): tassonomia gestibile liberamente, quindi nessun
   colore per singolo nome nel codice — stesso chip bordato uniforme per
   tutte, identico nello spirito a quello già usato per gli allergeni. */
.pop-menu-card__etichette {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
}
.pop-menu-card__etichetta {
	display: inline-flex;
	align-items: center;
	background-color: transparent;
	border: 1.5px solid var(--pop-border-color);
	border-radius: 3px;
	padding: 3px 9px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
}

.pop-menu-card__body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex-grow: 1;
}

.pop-menu-card__title {
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	text-transform: uppercase;
	font-size: 19px;
	line-height: 1.15;
	margin: 0;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
}
.pop-menu-card__asterisco {
	color: var(--e-global-color-accent);
	font-weight: 700;
}

.pop-menu-card__desc {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 13.5px;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
	opacity: 0.75;
	margin: 0;
	line-height: 1.4;
}

/* ---- Elenco formati/prezzi ---- */
.pop-menu-card__prezzi {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pop-menu-card__prezzi li {
	display: flex;
	align-items: baseline;
	gap: 6px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 14px;
}
.pop-menu-card__formato {
	display: flex;
	flex-direction: column;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
	opacity: 0.7;
}
.pop-menu-card__formato-etichetta {
	white-space: nowrap;
}
/* Nota facoltativa del formato (es. "Contorno di Patatine"), vedi il campo
   "Prodotto abbinato" del repeater "Formati e Prezzi": a differenza
   dell'etichetta può andare a capo, un nome prodotto può essere lungo. */
.pop-menu-card__formato-nota {
	font-size: 11px;
	font-style: italic;
	white-space: normal;
}
.pop-menu-card__linea {
	flex-grow: 1;
	border-bottom: 1px dotted var(--pop-border-color);
	opacity: 0.4;
	transform: translateY(-3px);
}
.pop-menu-card__prezzo {
	font-weight: 700;
	white-space: nowrap;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
}
/* Offerta attiva: prezzo pieno barrato accanto al nuovo prezzo già calcolato
   (nessuna percentuale mostrata al cliente, solo i due prezzi). */
.pop-menu-card__prezzo--barrato {
	font-weight: 400;
	text-decoration: line-through;
	opacity: 0.55;
}
.pop-menu-card__prezzo--offerta {
	color: var(--e-global-color-accent);
}
/* Nota libera per le promozioni che non si riducono a un calcolo automatico
   (es. "Mangi in due, paghi 1", "Offerta riservata alle donne"). */
.pop-menu-card__dettagli-offerta {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 12px;
	font-style: italic;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
	opacity: 0.75;
	margin: 4px 0 0;
}

/* ---- Piè di card: nota surgelato/gradazione + blocco allergeni ---- */
.pop-menu-card__footer {
	margin-top: auto;
	padding-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pop-menu-card__note {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
.pop-menu-card__surgelato {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	border: 1.5px solid var(--e-global-color-accent);
	border-radius: 3px;
	padding: 2px 7px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--e-global-color-accent);
}
.pop-menu-card__gradazione {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 12px;
	font-weight: 600;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
	opacity: 0.65;
}
.pop-menu-card__allergeni-blocco {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pop-menu-card__allergeni-titolo {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
	opacity: 0.55;
}
.pop-menu-card__allergeni {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
}
/* Allergeni scritti per esteso in piccoli chip (non icone numerate): niente
   legenda da consultare a parte, il cliente legge subito cosa contiene. */
.pop-menu-card__allergene {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--pop-border-color);
	border-radius: 3px;
	padding: 2px 7px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
	opacity: 0.8;
	white-space: nowrap;
}

/* ---- Pagina Menu: card orizzontale compatta (miniatura a sinistra, testo
   a destra) invece della card verticale con foto a piena larghezza usata
   nel resto del sito (teaser Home, ecc., che restano invariati: non è
   scoped qui sopra ma solo dentro ".pop-pagina-menu", la classe sul <body>
   di questa pagina). Il menu qui è consultato dal cliente al tavolo via
   QR-code: la foto grande in cima a ogni card obbligava a vedere una sola
   portata per schermata anche su desktop; con la foto ridotta a miniatura
   il testo comincia subito, dimezzando circa l'altezza di ogni card a
   parità di contenuto, sia in colonna singola (mobile) sia nella griglia
   a più colonne (tablet/desktop, breakpoint invariati). Vale anche per la
   card combo, senza eccezioni: stessa miniatura, stesso stile di tutte
   le altre card della pagina Menu. ---- */
.pop-pagina-menu .pop-menu-card {
	flex-direction: row;
	align-items: stretch;
}
.pop-pagina-menu .pop-menu-card__media {
	flex: 0 0 96px;
	width: 96px;
	border-bottom: none;
	border-right: var(--pop-border-width) solid var(--pop-border-color);
}
.pop-pagina-menu .pop-menu-card__media img {
	width: 96px;
	height: 100%;
	min-height: 96px;
	max-height: none;
}
.pop-pagina-menu .pop-menu-card__body {
	padding: 10px 14px;
	gap: 4px;
	min-width: 0;
}
.pop-pagina-menu .pop-menu-card__title {
	font-size: 16px;
}
.pop-pagina-menu .pop-menu-card__desc {
	font-size: 12.5px;
	/* Al massimo due righe: con la card più bassa, una descrizione lunga
	   spingerebbe troppo in basso prezzo/allergeni sottostanti. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.pop-pagina-menu .pop-menu-card__footer {
	padding-top: 4px;
	gap: 4px;
}

/* Adesivi diagonali (Novità/Offerta/Sold Out): la ribbon ruotata è pensata
   per una foto larga, su una miniatura di 96px sporgerebbe troppo. Diventa
   un piccolo chip dritto, impilato nell'angolo in alto a sinistra invece
   che a destra (dove la larghezza è ancora più risicata). */
.pop-pagina-menu .pop-badge {
	top: 4px;
	right: auto;
	left: 4px;
	padding: 2px 5px;
	font-size: 8px;
	letter-spacing: 0.01em;
	transform: none;
	border-width: 1.5px;
}
.pop-pagina-menu .pop-menu-badge--secondaria {
	top: 22px !important;
}
.pop-pagina-menu .pop-menu-badge--terziaria {
	top: 40px !important;
}

/* ---- Tab orizzontali sticky per categoria (generate a runtime in PHP), pensate
   per lo scroll da smartphone: la barra è sticky, i pannelli sotto no.

   La barra è generata in PHP come più "righe" (".pop-menu-tabs__riga"),
   suddivise in parti uguali quando le tab sono troppe per una sola riga
   comoda (vedi ct_shortcode_menu_tabs). Di default ogni riga ha
   "display:contents": si "dissolve" nel genitore e le sue tab diventano
   di fatto figlie dirette della barra, che così resta un'unica striscia
   scrollabile orizzontalmente come prima, comportamento invariato su
   smartphone/tablet dove lo scroll col dito è naturale. Da desktop in su
   (media query più sotto) le righe tornano "vere" e si impilano, per non
   perdere mai una tab fuori dallo spazio visibile senza un modo ovvio per
   raggiungerla. ---- */
.pop-menu-tabs__bar {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	/* "safe center": centra le tab quando ci stanno tutte nella barra (tipico da
	   desktop, o con poche categorie); se invece non ci stanno (mobile, tante
	   categorie) ripiega da sola sull'allineamento a sinistra, così lo scroll
	   orizzontale parte comunque dalla prima tab senza tagliarla fuori. */
	justify-content: safe center;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	background-color: var(--e-global-color-panna-crema);
	border: var(--pop-border-width) solid var(--pop-border-color);
}
.pop-menu-tabs__bar::-webkit-scrollbar {
	display: none;
}
.pop-menu-tabs__riga {
	display: contents;
}
/* Selettore qualificato con il genitore (".pop-menu-tabs__bar .pop-menu-tabs__btn")
   per battere in specificità la regola sitewide ".elementor-kit-80 button"
   del design system, che altrimenti colorerebbe di giallo tutti i pulsanti.
   Ogni tab ha un bordo a destra (nessuna eccezione per l'ultima: con le
   righe suddivise non è possibile isolare in CSS "l'ultima tab in
   assoluto" da "l'ultima della propria riga", e un bordo in più a fine
   barra è comunque impercettibile). */
.pop-menu-tabs__bar .pop-menu-tabs__btn {
	flex-shrink: 0;
	appearance: none;
	background: none;
	border: none;
	border-right: 2px solid var(--pop-border-color);
	padding: 14px 20px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 0.03em;
	/* Regola di contrasto del sito: la barra è sempre crema o arancione
	   (vedi sotto), quindi il testo è sempre verde scuro. */
	color: var(--e-global-color-secondary);
	cursor: pointer;
	white-space: nowrap;
}
.pop-menu-tabs__btn.is-active {
	background-color: var(--e-global-color-accent);
}
/* Una regola generica del Kit di Elementor ("button:focus", "button:hover"
   ecc., stesso genere di CSS "nascosto" del Kit già trovato per il numero
   di telefono nell'header) forza il testo dei pulsanti a bianco quando
   hanno il focus — e su smartphone un pulsante appena toccato resta a
   fuoco senza che il dito continui a "passarci sopra", quindi la scheda
   selezionata restava con testo bianco su sfondo chiaro, illeggibile.
   Colore forzato qui per coprire tutti gli stati (normale, focus, hover),
   non solo quello di base. */
.pop-menu-tabs__btn.is-active,
.pop-menu-tabs__btn.is-active:focus,
.pop-menu-tabs__btn.is-active:hover {
	color: var(--e-global-color-secondary) !important;
}
/* Categorie di portata, vetrine curate (Offerte, Novità, Consigliato) e
   filtri dietetici condividono tutti lo stesso stile di pulsante qui sopra,
   per scelta esplicita: niente trattamento differenziato per gruppo, tutte
   le tab della barra si leggono come "pari grado" a colpo d'occhio. */

/* Da desktop "vero" in su, le righe tornano elementi reali e si impilano
   (invece di dissolversi in un'unica striscia scrollabile): ciascuna riga è
   centrata e già suddivisa in parti uguali dal PHP. L'overflow-x resta come
   rete di sicurezza nel caso estremo di una singola riga comunque troppo
   stretta per il viewport. Niente più bordo esterno sul blocco (rimosso per
   prova su richiesta) né bordo divisorio tra una riga e l'altra: solo lo
   spazio vuoto tra le due righe a separare i pulsanti, il resto del
   contrasto con lo sfondo lo fa la scheda attiva arancione più il bordo a
   destra di ogni singola tab. */
@media (min-width: 1025px) {
	.pop-menu-tabs__bar {
		flex-direction: column;
		overflow-x: visible;
		border: none;
		gap: 10px;
	}
	.pop-menu-tabs__riga {
		display: flex;
		justify-content: safe center;
		overflow-x: auto;
		/* Senza questo, il browser accoppia da solo "overflow-y: auto" a
		   "overflow-x: auto" quando non è dichiarato esplicitamente (regola
		   CSS poco nota), mostrando a certe larghezze uno scrollbar
		   verticale con tanto di frecce anche se la riga non ne ha bisogno
		   in verticale — qui serve solo lo scroll orizzontale. */
		overflow-y: hidden;
	}
}

/* ---- Pagina Menu, sotto i 1024px: la barra di categoria a scorrimento
   orizzontale diventa un pulsante "categoria corrente" con freccina
   (".pop-menu-tabs__toggle") che apre/chiude un menu a tendina con tutte
   le categorie impilate verticalmente. Con tante categorie (Novità,
   Offerte, Burger, Panini, ... Senza Glutine) lo scroll orizzontale
   costringeva a scorrere parecchio col dito per arrivare alle ultime;
   così restano tutte visibili in un colpo d'occhio appena si apre.
   Scoped a ".pop-pagina-menu" (classe sul <body> di questa pagina): il
   gruppo Novità/Offerte/Eventi in Home e le tab della pagina Eventi
   riusano lo stesso componente ".pop-menu-tabs" ma non hanno il pulsante
   toggle nel loro markup (solo la pagina Menu lo genera), quindi restano
   con la barra a scorrimento come prima. ---- */
.pop-pagina-menu .pop-menu-tabs__toggle {
	display: none;
}
@media (max-width: 1024px) {
	.pop-pagina-menu .pop-menu-tabs__toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		position: sticky;
		top: 0;
		z-index: 31;
		padding: 14px 20px;
		background-color: var(--e-global-color-accent);
		border: var(--pop-border-width) solid var(--pop-border-color);
		font-family: var(--e-global-typography-accent-font-family), sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		font-size: 14px;
		letter-spacing: 0.03em;
		/* Regola di contrasto del sito: sfondo arancione (o crema, vedi
		   ".pop-alt-sezione--chiaro .pop-menu-tabs__toggle" più sotto) -> testo
		   verde scuro. "!important": stessa regola generica del Kit di
		   Elementor già incontrata altrove ("button:focus/:hover { color:
		   #fff }", stessa specificità, caricata dopo) — su smartphone un
		   pulsante appena toccato resta a fuoco, quindi il testo tornava
		   bianco/illeggibile subito dopo l'apertura della tendina. */
		color: var(--e-global-color-secondary) !important;
		cursor: pointer;
	}
	.pop-pagina-menu .pop-menu-tabs__toggle:focus,
	.pop-pagina-menu .pop-menu-tabs__toggle:hover {
		color: var(--e-global-color-secondary) !important;
	}
	.pop-pagina-menu .pop-menu-tabs__toggle-icona {
		flex-shrink: 0;
		width: 20px;
		height: 20px;
		fill: currentColor;
		transition: transform 0.2s ease;
	}
	.pop-pagina-menu .pop-menu-tabs.is-categorie-aperte .pop-menu-tabs__toggle-icona {
		transform: rotate(180deg);
	}

	/* La barra classica diventa il contenuto della tendina: nascosta di
	   default, mostrata subito sotto il pulsante quando aperta (in flusso
	   normale, non sovrapposta: sposta semplicemente più in basso la
	   lista prodotti finché resta aperta), con le categorie impilate
	   invece che in fila.
	   Niente "position: absolute" qui: il calcolo di "top" in percentuale
	   si sarebbe basato sull'altezza dell'INTERO blocco ".pop-menu-tabs"
	   (che contiene anche tutti i pannelli prodotto sottostanti, molto
	   più alto del solo pulsante), facendo comparire la tendina centinaia
	   di pixel più in basso, fuori dallo schermo. ---- */
	.pop-pagina-menu .pop-menu-tabs__bar {
		display: none;
		flex-direction: column;
		max-height: 70vh;
		overflow-y: auto;
		overflow-x: hidden;
		box-shadow: 0 8px 16px rgba(17, 17, 17, 0.3);
	}
	.pop-pagina-menu .pop-menu-tabs.is-categorie-aperte .pop-menu-tabs__bar {
		display: flex;
	}
	.pop-pagina-menu .pop-menu-tabs__riga {
		display: flex;
		flex-direction: column;
	}
	/* Bordo tra una voce e l'altra della tendina più leggero di quello
	   (nero pieno) usato altrove nel sito: qui si ripete per ogni singola
	   riga di un elenco potenzialmente lungo (categorie + sottocategorie),
	   e un bordo pieno ripetuto tante volte dava un effetto "impilato"
	   pesante. Il bordo esterno della tendina (".pop-menu-tabs__bar",
	   sopra) resta invece quello pieno standard del sito: qui si alleggerisce
	   solo la ripetizione interna, non la cornice che la contiene. */
	.pop-pagina-menu .pop-menu-tabs__bar .pop-menu-tabs__btn {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		text-align: left;
		border-right: none;
		border-bottom: 1px solid rgba(17, 17, 17, 0.18);
	}

	/* Freccina di espansione (solo sulle categorie che hanno sottocategorie):
	   stessa logica visiva della freccina del pulsante "categoria corrente"
	   qui sopra, ruota quando il gruppo sottostante è aperto (vedi
	   "aria-expanded", gestito da menu-tabs.js). Esiste solo qui nella
	   tendina mobile: da desktop in su la barra non è un accordion, quindi
	   l'icona resta nascosta di default (vedi fuori media query). */
	.pop-pagina-menu .pop-menu-tabs__bar .pop-menu-tabs__btn-icona {
		display: block;
		flex-shrink: 0;
		width: 18px;
		height: 18px;
		fill: currentColor;
		transition: transform 0.2s ease;
	}
	.pop-pagina-menu .pop-menu-tabs__bar .pop-menu-tabs__btn[aria-expanded="true"] .pop-menu-tabs__btn-icona {
		transform: rotate(180deg);
	}

	/* Gruppo delle sottocategorie di una categoria: nascosto (attributo
	   nativo "hidden", stesso pattern di pannello-menu-accordion.js) finché
	   la sua categoria non è quella attiva, invece di restare sempre
	   impilato ed espanso insieme a tutti gli altri gruppi (accordion a due
	   livelli: si apre una categoria alla volta). */
	.pop-pagina-menu .pop-menu-tabs__sottocategorie {
		display: flex;
		flex-direction: column;
	}
	.pop-pagina-menu .pop-menu-tabs__sottocategorie[hidden] {
		display: none;
	}

	/* Sottocategorie (es. "Birre" sotto "Bevande"): sfondo più marcato e
	   bordo a sinistra colorato, per leggersi chiaramente come "dentro" la
	   categoria padre appena sopra invece che come un'altra voce di pari
	   livello (con la tinta quasi invisibile di prima si distinguevano solo
	   dal rientro). */
	.pop-pagina-menu .pop-menu-tabs__subbtn {
		display: block !important;
		width: 100%;
		text-align: left;
		padding: 9px 20px 9px 33px;
		border: none;
		border-left: 3px solid var(--pop-border-color);
		border-bottom: 1px solid rgba(17, 17, 17, 0.15);
		background-color: rgba(17, 17, 17, 0.16);
		font-family: var(--e-global-typography-accent-font-family), sans-serif;
		font-weight: 600;
		font-size: 12px;
		letter-spacing: 0.02em;
		color: var(--e-global-color-text);
		cursor: pointer;
	}
}
/* Le sottocategorie della tendina esistono solo per il salto rapido su
   mobile: sul resto del sito (desktop, e qualunque pagina diversa dal
   Menu, dove ".pop-menu-tabs__subbtn" comunque non viene mai generato)
   restano nascoste.
   "!important": stesso conflitto con il reset.css di Elementor/WooCommerce
   già documentato per ".pop-menu-tabs__torna-su" più sotto — è un
   <button>, e "[type="button"], [type="submit"], button { display:
   inline-block }" ha la stessa specificità di questo singolo selettore di
   classe mentre è caricato dopo, quindi senza "!important" vince lui e i
   pulsanti sottocategoria restano visibili (e cliccabili) anche su
   desktop, rompendo lo scroll calcolato solo per la tendina mobile. */
.pop-menu-tabs__subbtn {
	display: none !important;
}

/* Gruppo delle sottocategorie e freccina di espansione: idem, esistono solo
   per l'accordion a due livelli della tendina mobile della pagina Menu (vedi
   sopra), nascosti ovunque altro. */
.pop-menu-tabs__sottocategorie {
	display: none;
}
.pop-menu-tabs__btn-icona {
	display: none;
}

/* ---- Ricerca nel menu: nascosta su richiesta esplicita nella versione
   mobile (unico posto dove compariva finora, vedi sotto), quindi di fatto
   ovunque per ora. Il campo resta nel markup PHP e la logica JS resta
   collegata (".pop-menu-tabs--ricerca-attiva" e affini più sotto): basta
   rimuovere il "display: none" qui sotto per riattivarla in futuro, senza
   dover ritoccare PHP o JS. ---- */
.pop-menu-tabs__ricerca {
	display: none;
}
@media (max-width: 1024px) {
	.pop-pagina-menu .pop-menu-tabs__ricerca-input {
		width: 100%;
		box-sizing: border-box;
		padding: 12px 16px;
		border: var(--pop-border-width) solid var(--pop-border-color);
		background-color: #FFFFFF;
		font-family: var(--e-global-typography-text-font-family), sans-serif;
		font-size: 15px;
		color: var(--e-global-color-text);
	}
	.pop-pagina-menu .pop-menu-tabs__ricerca-input::placeholder {
		color: var(--e-global-color-text);
		opacity: 0.5;
	}
	.pop-pagina-menu .pop-menu-tabs__ricerca-vuoto {
		margin: 0 0 10px;
		padding: 10px 4px;
		font-family: var(--e-global-typography-text-font-family), sans-serif;
		font-size: 14px;
		/* Regola di contrasto del sito: verde scuro su crema/arancione. */
		color: var(--e-global-color-secondary);
	}

	/* Con la ricerca attiva tutti i pannelli (categorie) si mostrano insieme,
	   non solo quello scelto dalla tab: le card che non corrispondono si
	   nascondono via JS (".pop-menu-card--nascosta-ricerca"), così come i
	   pannelli/sottocategorie rimasti senza risultati (".is-vuoto-ricerca").
	   Toggle e torna-su non hanno senso mentre si cerca, spariscono anche
	   loro. */
	.pop-pagina-menu .pop-menu-tabs--ricerca-attiva .pop-menu-tabs__panel {
		display: block !important;
	}
	.pop-pagina-menu .pop-menu-tabs--ricerca-attiva .pop-menu-tabs__panel.is-vuoto-ricerca,
	.pop-pagina-menu .pop-menu-tabs--ricerca-attiva .pop-menu-sottocategoria__titolo.is-vuoto-ricerca {
		display: none !important;
	}
	.pop-pagina-menu .pop-menu-tabs--ricerca-attiva .pop-menu-tabs__toggle,
	.pop-pagina-menu .pop-menu-tabs--ricerca-attiva .pop-menu-tabs__torna-su {
		display: none !important;
	}
}
.pop-menu-card--nascosta-ricerca {
	display: none !important;
}

/* ---- Pulsante "torna su" dinamico (solo pagina Menu, sotto i 1024px):
   flottante in basso a destra, mostrato/nascosto via JS con l'attributo
   nativo "hidden" (vedi menu-tabs.js) in base a categoria/sottocategoria
   corrente e distanza di scroll. Il markup esiste solo per la pagina Menu,
   stesso motivo del pulsante "categoria corrente".
   "!important" su tutti i "display": è un <button>, e il reset.css di
   Elementor/WooCommerce ha una regola "[type="button"], [type="submit"],
   button { display: inline-block; ... }" con la STESSA specificità di un
   singolo selettore di classe, caricata dopo menu.css — senza "!important"
   quella regola vince e il pulsante resta visibile anche su desktop
   nonostante "display: none" qui sotto (stesso tipo di conflitto già
   incontrato con ".polo80-phone-desktop" nel CSS del Kit di Elementor). ---- */
.pop-menu-tabs__torna-su {
	display: none !important;
}
@media (max-width: 1024px) {
	.pop-pagina-menu .pop-menu-tabs__torna-su {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: fixed;
		right: 16px;
		bottom: 16px;
		z-index: 32;
		width: 46px;
		height: 46px;
		padding: 0;
		border-radius: 50%;
		background-color: var(--e-global-color-accent);
		border: var(--pop-border-width) solid var(--pop-border-color);
		box-shadow: 3px 3px 0 var(--pop-border-color);
		cursor: pointer;
	}
	.pop-pagina-menu .pop-menu-tabs__torna-su[hidden] {
		display: none !important;
	}
	.pop-pagina-menu .pop-menu-tabs__torna-su svg {
		width: 22px;
		height: 22px;
		fill: var(--e-global-color-text);
	}
}

.pop-menu-tabs__panel {
	display: none;
	padding: 20px 4px 0;
}
.pop-menu-tabs__panel.is-active {
	display: block;
}

.pop-menu-vuoto {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
	padding: 32px 4px;
}

/* ---- Griglia prodotti: 1 colonna mobile, 2 tablet, 3 desktop.
   Le card sono elementi di una CSS grid: si allineano automaticamente alla
   stessa altezza per via del comportamento predefinito "stretch" della grid,
   quindi non serve altro codice per uniformarle.
   "minmax(0, 1fr)" invece del solo "1fr": una card con contenuto che non si
   può comprimere abbastanza (es. la riga orizzontale della card combo, vedi
   più sotto) farebbe altrimenti allargare la colonna della grid oltre lo
   spazio disponibile per farcelo stare, spingendo l'intera griglia (e la
   card) fuori dallo schermo. Con "minmax(0, ...)" la colonna resta sempre
   contenuta nello spazio assegnato; è la card stessa, con il proprio
   overflow interno, a decidere come gestire un contenuto più largo di lei
   (scroll orizzontale sulla card combo). ---- */
.pop-menu-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	/* Più ampio del gap interno tra le card (20px sopra): serve a far
	   staccare visivamente la fine di una sottocategoria dal titolo di
	   quella successiva, non solo dalla card più vicina. Il margine
	   superiore del titolo (".pop-menu-sottocategoria__titolo", più sotto)
	   collassa con questo per via delle normali regole CSS sui margini tra
	   fratelli: essendo più piccolo, vince questo valore. */
	margin-bottom: 36px;
}
@media (min-width: 600px) {
	.pop-menu-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1000px) {
	.pop-menu-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---- Titolo di sottocategoria (usato quando una categoria ha sottocategorie,
   es. Bevande -> Birre/Acqua/Bibite), profondità variabile a seconda del livello. ---- */
.pop-menu-sottocategoria__titolo {
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	text-transform: uppercase;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
	margin: 8px 0 12px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--pop-border-color);
}
.pop-menu-sottocategoria__titolo--livello-0 {
	font-size: 20px;
}
.pop-menu-sottocategoria__titolo--livello-1 {
	font-size: 16px;
	opacity: 0.85;
}

/* ---- Alternanza colore di sfondo tra sezioni impilate della stessa pagina
   (qualunque pagina, non solo la Home): la prima resta il crema chiaro di
   sempre, la seconda diventa arancione, la terza di nuovo chiara, e così
   via. Il colore effettivo è deciso da assets/js/sezioni-alternate.js in
   base all'ordine reale nel DOM, non da un selettore CSS nth-child: una
   sezione può sparire del tutto quando non ha contenuto (es. "Offerte"
   senza promozioni attive), e in quel caso non deve "consumare" un posto
   nell'alternanza. Il colore chiaro qui sotto è solo il valore di
   partenza prima che il JS giri, per evitare un flash senza sfondo. ---- */
.pop-alt-sezione {
	background-color: var(--e-global-color-panna-crema);
}
.pop-alt-sezione--chiaro {
	background-color: var(--e-global-color-panna-crema);
}
.pop-alt-sezione--arancio {
	background-color: var(--e-global-color-accent);
}

/* ---- La barra di tab (".pop-menu-tabs__bar", riusata da Menu, Eventi e dal
   gruppo Novità/Offerte/Eventi in Home) mantiene sempre i suoi colori di
   base a prescindere dalla sezione ".pop-alt-sezione" che la contiene: crema
   di fondo, verde scuro il testo, arancione la scheda attiva (vedi le
   regole base più sopra) — mai il contrario. In precedenza si invertiva
   (arancione di fondo / scheda attiva crema) quando la sezione capitava
   crema, per evitare che la barra vi si confondesse; il bordo pieno della
   barra la delimita già a sufficienza dallo sfondo, quindi l'inversione è
   stata rimossa su richiesta esplicita: i pulsanti restano sempre
   riconoscibili con lo stesso schema colore ovunque compaiano. Nessuna
   regola equivalente serve più nemmeno per ".pop-menu-tabs__toggle" (il
   pulsante "categoria corrente" sotto i 1024px), che resta anch'esso al suo
   colore di base in ogni sezione. Stesso discorso non vale per
   ".pop-galleria-tabs__bar" (vedi galleria.css), che resta un componente
   separato con le sue regole. ---- */

/* ---- Titoli colorati in coerenza con lo sfondo della sezione: verde scuro
   su crema/arancione, crema su sfondo verde pieno (".pop-sezione-scura",
   classe "gemella" di ".pop-alt-sezione" da aggiungere anche alle sezioni
   future con sfondo verde pieno, es. header di pagina in stile "La Storia
   di Polo80"). Regola di contrasto valida in tutto il sito, non solo per i
   titoli: crema/arancione -> testo verde scuro, verde scuro pieno -> testo
   crema, mai il contrario (usata anche per i badge, vedi
   ".pop-menu-badge--offerta" e ".pop-combo-card__omaggio-tag" più sotto).
   Il giallo (var(--e-global-color-primary)) resta riservato ad altri usi
   (badge "Novità", accenti hover) e non entra in questa regola. Contrasto
   verificato sui valori esatti del kit: l'accoppiamento inverso proposto in
   origine (arancione su crema) scendeva sotto la soglia minima di
   leggibilità WCAG. Si applica solo ai titoli senza un colore già impostato
   a mano sul singolo widget, che ha sempre la priorità per via della
   maggiore specificità del CSS generato da Elementor per quel widget.
   Il selettore include ".elementor-widget-heading" (non solo
   ".elementor-heading-title") perché Elementor genera per ogni titolo senza
   colore esplicito una regola ".elementor-widget-heading .elementor-heading-title"
   nel CSS della singola pagina: stessa specificità di un selettore a due
   classi come il nostro, e in caso di parità vince quella caricata per
   ultima nell'head (il CSS di pagina di Elementor, dopo menu.css) — la
   scritta risultava quindi gialla anche su sfondo crema/arancione. Con tre
   classi la nostra regola vince sempre, restando comunque meno specifica
   di un colore impostato a mano sul singolo widget (quello resta protetto,
   es. i sottotitoli delle card "Cosa Ci Trovi"). Stesso principio già
   applicato a ".pop-menu-tabs__bar .pop-menu-tabs__btn" per battere la
   regola sitewide ".elementor-kit-80 button" che altrimenti colorerebbe di
   giallo tutti i pulsanti. ---- */
.pop-alt-sezione .elementor-widget-heading .elementor-heading-title {
	color: var(--e-global-color-secondary);
}
.pop-sezione-scura .elementor-widget-heading .elementor-heading-title {
	color: var(--e-global-color-panna-crema);
}

/* ---- Sezioni dinamiche Home (Offerte, Novità): il contenuto (card, combo)
   riusa già le classi della pagina Menu, qui serve solo lo stile
   dell'intestazione e dello spazio della sezione. ---- */
.pop-home-sezione {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}
/* Selettore col genitore ".pop-home-sezione" (due classi) per battere in
   specificità ".elementor-kit-80 h2" del kit Elementor (un tag h2 pesa
   quanto una classe: a parità di classi vince chi ha anche l'elemento, e
   quella regola del kit è caricata dopo questo file), che altrimenti
   colorerebbe il titolo di nero anche su sfondo crema/arancione. */
.pop-home-sezione .pop-home-sezione__titolo {
	font-family: var(--e-global-typography-primary-font-family), sans-serif;
	text-transform: uppercase;
	color: var(--e-global-color-secondary);
	font-size: 32px;
	margin: 0 0 8px;
}
.pop-home-sezione__sottotitolo {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
	opacity: 0.75;
	margin: 0 0 28px;
}
.pop-home-sezione .pop-menu-grid {
	text-align: left;
	margin-bottom: 28px;
}
/* La barra di tab del gruppo Novità/Offerte/Eventi resta larga come prima
   (100% del contenitore, come la barra tab della pagina Menu), ma con le
   schede allineate a destra invece che centrate. Selettore scoped a
   ".pop-home-sezione" apposta: non deve toccare la barra tab della pagina
   Menu, che vive fuori da questo contenitore. */
.pop-home-sezione .pop-menu-tabs__bar {
	justify-content: safe flex-end;
}
.pop-home-sezione__pulsante {
	display: inline-block;
}

/* ---- Teaser "Chi Siamo" in Home: foto piccola (miniatura) accanto al
   testo, solo per dare un tocco di colore, non un blocco visivo a metà
   sezione. Sotto i 700px la miniatura si sposta sopra al testo, centrata. ---- */
.pop-home-chisiamo {
	display: flex;
	align-items: center;
	gap: 28px;
	text-align: left;
	margin-bottom: 8px;
}
.pop-home-chisiamo__media {
	flex: 0 0 160px;
	width: 160px;
	border: var(--pop-border-width) solid var(--pop-border-color);
	box-shadow: 6px 6px 0 var(--pop-border-color);
}
.pop-home-chisiamo__media img {
	display: block;
	width: 100%;
	height: 160px;
	object-fit: cover;
	object-position: center;
}
.pop-home-chisiamo__testo {
	flex: 1;
}
.pop-home-chisiamo__testo .pop-home-sezione__titolo,
.pop-home-chisiamo__testo .pop-home-sezione__sottotitolo {
	text-align: left;
}
@media ( max-width: 700px ) {
	.pop-home-chisiamo {
		flex-direction: column;
		text-align: center;
	}
	.pop-home-chisiamo__media {
		flex-basis: auto;
		width: 130px;
	}
	.pop-home-chisiamo__media img {
		height: 130px;
	}
	.pop-home-chisiamo__testo .pop-home-sezione__titolo,
	.pop-home-chisiamo__testo .pop-home-sezione__sottotitolo {
		text-align: center;
	}
}

/* ---- Card offerta combo: stessa struttura di base della card prodotto
   (.pop-menu-card), stessa dimensione (una sola colonna della griglia,
   nessuno "span" su più colonne): così un'offerta combo si affianca alle
   altre card nella stessa riga invece di spiccare per dimensione. ---- */
.pop-combo-card {
	position: relative;
	padding: 16px;
	gap: 10px;
}
/* Nella pagina Menu la combo condivide la card compatta con la miniatura
   (vedi ".pop-pagina-menu .pop-menu-card" più sopra): il padding/gap qui
   sopra è pensato per il vecchio stile a foto piena larghezza (usato ancora
   nei teaser Home) e in quel contesto scostava la foto dai bordi e
   aggiungeva spazio extra prima del corpo testo, allungando la card oltre
   le altre. Azzerato solo qui: la spaziatura interna resta quella di
   ".pop-menu-card__body", identica alle card prodotto. */
.pop-pagina-menu .pop-combo-card {
	padding: 0;
	gap: 0;
}
/* Il badge "Offerta" sta ora dentro ".pop-menu-card__media" (quando la
   combo ha la foto generata) esattamente come sulle card prodotto normali,
   quindi il titolo non deve più farle spazio. Il padding-right resta solo
   per il caso raro senza foto (nessun prodotto incluso ne ha una), dove il
   badge sta ancora sopra al titolo. */
.pop-combo-card--senza-foto .pop-menu-card__title {
	padding-right: 90px;
}
.pop-combo-card__prodotti {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Centra l'intero gruppo (prodotti + "+") in orizzontale nella card. */
	justify-content: center;
	gap: 12px;
}
.pop-combo-card__prodotto {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 6px;
}
.pop-combo-card__prodotto-nome {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 12px;
	font-weight: 600;
	/* Regola di contrasto del sito: verde scuro su crema/arancione. */
	color: var(--e-global-color-secondary);
}
.pop-combo-card__prodotto-prezzo {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 12px;
	color: var(--e-global-color-secondary);
	opacity: 0.7;
}
.pop-combo-card__piu {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	color: var(--e-global-color-accent);
}
.pop-combo-card__totale {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 10px;
	border-top: 1px dotted var(--pop-border-color);
}
.pop-combo-card__totale .pop-menu-card__prezzo {
	font-size: 18px;
}
.pop-combo-card__omaggio-tag {
	flex-shrink: 0;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	/* Regola di contrasto del sito: testo verde scuro su sfondo crema o
	   arancione, testo crema su sfondo verde scuro pieno (mai il contrario). */
	color: var(--e-global-color-secondary);
	background-color: var(--e-global-color-accent);
	padding: 3px 8px;
	border-radius: 3px;
}
/* ---- Pulsante "Staff" nell'header (accanto al numero di telefono),
   collegato a /accesso-staff/: stile discreto ("ghost", solo bordo
   sottile) apposta, per non competere visivamente con "Prenota" che resta
   l'unico invito in evidenza per i clienti — questo è un accesso interno,
   pensato per lo staff, non un'azione da proporre ai visitatori. ---- */
.pop-header-staff {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1.5px solid rgba(247, 240, 222, 0.4);
	border-radius: 3px;
	color: var(--e-global-color-panna-crema);
	text-decoration: none;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.pop-header-staff:hover,
.pop-header-staff:focus-visible {
	border-color: var(--e-global-color-primary);
	color: var(--e-global-color-primary);
}

/* ---- Numero di telefono nell'header: il pulsante che avvia la chiamata
   deve comparire solo su smartphone, mai su desktop (dove non avrebbe
   comunque senso, un desktop non "chiama" da solo). Il link testuale
   ".polo80-phone-desktop" resta nascosto sempre: nessuna delle due varianti
   deve mostrarsi su desktop, solo quella mobile deve apparire sotto il
   breakpoint 767px (lo stesso già usato altrove nel tema, es.
   accesso-staff.css, contatti.css).
   "!important" sul solo "display": ".polo80-phone-desktop" ha già una sua
   regola nel CSS personalizzato del Kit di Elementor (non in questo file,
   quindi introvabile cercando solo nei file del tema — "display:
   inline-flex" più lo stile "pillola" visibile in Styles > post-80.css nel
   pannello sviluppatore), caricata DOPO questo file e con la stessa
   specificità (una sola classe): senza "!important" quella regola vince e
   il pulsante resta visibile anche su desktop nonostante questa. ---- */
.polo80-phone-desktop,
.polo80-phone-mobile {
	display: none !important;
}
@media (max-width: 767px) {
	.polo80-phone-mobile {
		display: block !important;
	}
}

/* ---- Icona del menu hamburger nell'header: di base è grigio scuro
   (#33373d, colore fisso del widget Nav Menu di Elementor Pro), che sullo
   sfondo verde scuro dell'header (#1C4741) risulta praticamente invisibile
   per il basso contrasto tra i due toni scuri. Stesso crema già usato per
   le voci del menu e per il pulsante "Staff", per restare visibile e
   coerente con tutto il resto dell'header. Selettore con "!important":
   il CSS di Elementor Pro per questa icona ha già ".elementor-menu-toggle
   .e-font-icon-svg" (due classi) più uno stile inline via "fill" sull'SVG,
   entrambi altrimenti più specifici o caricati dopo di una nostra regola
   "normale" sullo stesso selettore. ---- */
.elementor-element-adbc1a9 .elementor-menu-toggle,
.elementor-element-adbc1a9 .elementor-menu-toggle .e-font-icon-svg {
	color: var(--e-global-color-panna-crema) !important;
	fill: var(--e-global-color-panna-crema) !important;
}

.pop-header-staff i {
	font-size: 13px;
}