.menu .cms_menu_item {
	cursor: pointer;
}

.menu.horizontal .cms_menu_item {
	display: inline-block;
}

/********** BOX_MENU / BOX_MENU_MEGA / BOX_MENU_CMS **********/

/*
I ".box_menu" sono i box:
	- dei filtri attributi (.box_menu.attributi)
	- delle categorie (.box_menu_categorie > .box_menu)
	- dei menu creati con la funzione js "create_box_menu_from_menunav" (.box_menu.box_menu_menunav)
	- dei menu creati con la funzione js "create_box_menu_from_filter" (.box_menu.box_menu_filter).

I ".box_menu.box_menu_mega" sono dei ".box_menu" ma costruiti da cms per #header_menu.

	Devono essere creati con stesso pattern dei ".box_menu" che è il seguente (.box_menu_images da specificare solo se effettivamente il menù contiene anche div.box_menu_item_image che è opzionale) :
		div.box_menu.box_menu_mega.box_menu_images -> div.box_menu_item -> div.box_menu_item_image + div.box_menu_item_text
		
		ATTENZIONE: a differenza dei ".box_menu" sono sempre DIV e non UL/LI per non ereditare classi di di oggetti jquery menu (.ui-menu, .ui-menu-item, .ui-menu-item-wrapper, ecc.)
		(I ".box_menu" non ereditano quelle classi perchè nascono sempre dopo che è stato creato il menù di testata con jquery menu)

	Inoltre la voce di menù cms principale (quella che apre il ".box_menu_mega") deve avere la classe (wec_cms_menu.css_class)
		.box_menu_mega_itemmenu
		
I ".box_menu_cms" sono i submenu cms dei menù cms di #header_menu. In sostanza è il menù che compare cliccando la voce del menù principale.
Questo quando la voce cms del menù principale ha una o più voci cms di submenu. Nel caso dei megamenu ce ne è uno per ogni sottomenu cms.

I ".box_menu" hanno anche la classe ".box_menu_images" se le voci di menu contengono anche immagini (.box_menu_item > .box_menu_item_image)

Opzioni (di stile) per i ".box_menu" in #header, esclusi quelli delle categorie :

	I ".box_menu" di default vengono visualizzati a cominciare da subito sotto la voce di menù che li apre e si estendono fino alla fine dello spazio contenitore
	e mostrano le voci al loro interno in maniera incolonnata.
	
	E' possibile impostare in wec_cms_menu.css_class (SOLO) UNA delle seguenti classi:
	
		- ".full_columns" : si vuole che il ".box_menu" si estenda per l'intero spazio contenitore (quindi cominciando ben prima della voce di menù che lo apre)
	
		- ".single_column" : si vuole che il ".box_menu" disponga le proprie voci di menù in una unica colonna (visualizzazione compatta e adatta per un numero molto ridotto di voci)
*/

	.box_menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;
		gap: 10px;
	}
	
	.box_menu > .box_menu_item {
		align-self: flex-start;
		min-width: 150px;
	}
	
	.box_menu > .box_menu_item .box_menu_item_text:hover,
	.box_menu > .box_menu_item .box_menu_item_text.my-ui-state-focus,
	.box_menu > .box_menu_item a:hover,
	.box_menu > .box_menu_item a.my-ui-state-focus,
	.box_menu_cms .cms_menu_item a:hover,
	.box_menu_cms .cms_menu_item a.my-ui-state-focus {
		color: var(--wec-color-focus);
		cursor: pointer;
	}
	
	.box_menu.box_menu_images > .box_menu_item {
		min-width: 200px; /* See templatetag draw_box_menu_item_image */
		max-width: 200px; /* See templatetag draw_box_menu_item_image */
	}
	
	.box_menu.box_menu_images > .box_menu_item > .box_menu_item_image {
		margin-bottom: 5px;
	}
	
	.box_menu.box_menu_images > .box_menu_item > .box_menu_item_image img {
		min-height: 133px; /* See templatetag draw_box_menu_item_image */
		max-height: 133px; /* See templatetag draw_box_menu_item_image */
	}
	
	.box_menu.box_menu_images > .box_menu_item > .box_menu_item_image,
	.box_menu.box_menu_images > .box_menu_item > .box_menu_item_text {
		text-align: center;
	}

  	.box_menu.box_menu_menunav > .box_menu_item,
	.box_menu.box_menu_filter > .box_menu_item,
	.box_menu_categorie .box_menu > .box_menu_item {
		flex: 1 0 24%;
	}
	
	/* Contesto header */
	
	#header .box_menu {
		color: var(--wec-color-fg);
		background: var(--wec-color-bg);
	}
	
	#header .cms_menu_item > a + .box_menu:hover,
	#header .cms_menu_item > a:hover + .box_menu,
	#header .cms_menu_item > a.my-ui-state-focus + .box_menu {
		display: flex !important;
	}
	
	#header .cms_menu_item > a:hover + .box_menu.force_display_none,
	#header .cms_menu_item > a.my-ui-state-focus + .box_menu.force_display_none {
		display: none !important;
	}
	
	/* Contesto header con opzioni .full_columns o .single_column */
	
	#header .cms_menu_item.cms_menu_item_mainmenu.full_columns > .box_menu {
		width: 100%;
		left: 0 !important;
	}
	
	#header .cms_menu_item.cms_menu_item_mainmenu.single_column > a + .box_menu:hover,
	#header .cms_menu_item.cms_menu_item_mainmenu.single_column > a:hover + .box_menu,
	#header .cms_menu_item.cms_menu_item_mainmenu.single_column > a.my-ui-state-focus + .box_menu {
		display: block !important;
	}
	
	#header .cms_menu_item.cms_menu_item_mainmenu.single_column > a:hover + .box_menu.force_display_none,
	#header .cms_menu_item.cms_menu_item_mainmenu.single_column > a.my-ui-state-focus + .box_menu.force_display_none {
		display: none !important;
	}

/* --------- BOX_MENU / BOX_MENU_MEGA / BOX_MENU_CMS --------- */

/********** BOX_MENU CATEGORIE (.box_menu_categorie .box_menu) **********/

/*
	Widget types: .step, .list, .list_expand
*/

	.box_menu_categorie .box_menu {
	}

	.box_menu_categorie .box_menu.box_menu_depth:not(.box_menu_depth_0) { /* Livelli dal secondo in poi */
	}
	
	.box_menu_categorie:not(.full_width) .box_menu.box_menu_depth:not(.box_menu_depth_0) { /* Livelli dal secondo in poi */
	}
	
	.box_menu_categorie .box_menu.box_menu_depth:not(.box_menu_depth_0) .box_menu_item .box_menu_item_text { /* Livelli dal secondo in poi */
	}
	
	.box_menu_categorie:not(.full_width) .box_menu.box_menu_depth:not(.box_menu_depth_0) .box_menu_item .box_menu_item_text { /* Livelli dal secondo in poi */
	}
	
	.box_menu_categorie .box_menu.box_menu_depth:not(.box_menu_depth_0, .box_menu_depth_1) .box_menu_item .box_menu_item_text { /* Livelli dal terzo in poi */
	}
	
	.box_menu_categorie .box_menu > .box_menu_item .box_menu_item_text {
	    display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.areaside .box_menu_categorie .box_menu.box_menu_images > .box_menu_item {
		min-width: inherit;
		max-width: inherit;
	}
	
	.areaside .box_menu_categorie .box_menu.box_menu_images > .box_menu_item > .box_menu_item_image,
	.areaside .box_menu_categorie .box_menu.box_menu_images > .box_menu_item > .box_menu_item_text,
	#header .box_menu_categorie .box_menu.box_menu_images > .box_menu_item > .box_menu_item_image,
	#header .box_menu_categorie .box_menu.box_menu_images > .box_menu_item > .box_menu_item_text {
		text-align: left;
	}
	
	.areaside .box_menu_categorie .box_menu.box_menu_images > .box_menu_item > .box_menu_item_image img {
		margin: 0 auto;
	}
	
	/* Contesto widget step by step */

	/* ... actions */
	
	.box_menu_categorie.step .box_menu > .breadcrumb,
	.box_menu_categorie.step .box_menu > .box_menu_item.actions {
		flex-basis: 100%;
	}
	
	.box_menu_categorie.step .box_menu.box_menu_images > .box_menu_item.actions {
		min-width: unset;
		max-width: unset;
	}
	
	.box_menu_categorie.step .box_menu > .box_menu_item.actions:hover {
		color: var(--wec-color-fg);
	}
	
	.box_menu_categorie.step .box_menu > .box_menu_item.actions > ul {
	    display: flex;
	    flex-wrap: wrap;
	}
	
	.box_menu_categorie.step .box_menu > .box_menu_item.actions > ul > .box_menu_item {
		align-self: flex-start;
		min-width: 150px;
		flex: 1;
		text-transform: uppercase;
		font-weight: 500;
	}
	
	.box_menu_categorie.step .box_menu > .box_menu_item.actions > ul > .box_menu_item:hover {
		color: var(--wec-color-focus);
	}
	
	.box_menu_categorie.step .box_menu > .box_menu_item.categoria_item > .box_menu_item_text > svg {
		display: none;
	}
	
	.areaside .box_menu_categorie.step .box_menu,
	.areaside .box_menu_categorie.step .box_menu > .box_menu_item.actions > ul {
		flex-wrap: nowrap;
		flex-direction: column;
	}
	
	.areaside .box_menu_categorie.step .box_menu > .box_menu_item,
	.areaside .box_menu_categorie.step .box_menu > .box_menu_item.actions > ul > .box_menu_item {
		width: 100%;
	}
	
	.areaside .box_menu_categorie.step .box_menu > .box_menu_item.categoria_item > .box_menu_item_text > svg {
		display: inherit;
		rotate: 270deg;
	}

	/* Contesto widget list (non deve lavorare in modalità flex) */
	
	.box_menu_categorie.list {
		width: 100%;
	}
	
	.box_menu_categorie.list .box_menu {
		display: block;
		padding: calc(var(--spacing) * 2); /* Vedi dropdown.css p-2 */
		max-width: 250px;
	}
	
	.box_menu_categorie.list .box_menu > .box_menu_item,
	.box_menu_categorie.list .box_menu.box_menu_images > .box_menu_item {
		min-width: inherit;
		max-width: inherit;
	}
	
	.box_menu_categorie.list .box_menu .flowbite_dropdown {
		min-width: 150px;
	}
	
	.box_menu_categorie.list .box_menu.box_menu_images .flowbite_dropdown {
		min-width: 200px; /* See templatetag draw_box_menu_item_image */
		max-width: 200px; /* See templatetag draw_box_menu_item_image */
	}
	
	.areaside .box_menu_categorie.list {
		width: 100%;
	}

	.areaside .box_menu_categorie.list .box_menu > .box_menu_item.categoria_item {
		width: 100%;
	}
	
	/* Contesto widget list_expand (può lavorare in modalità flex) */
	
	.box_menu_categorie.list_expand {
	}

	.box_menu_categorie.list_expand .box_menu {
		overflow-x: hidden;
	}
	
	.box_menu_categorie.list_expand .box_menu > .box_menu_item.categoria_item > .box_menu_item_text > svg {
		display: none;
	}
	
	.box_menu_categorie.list_expand .box_menu.box_menu_depth_0 > .box_menu_item.categoria_item > .box_menu_item_text {
		text-transform: uppercase;
		font-weight: 500;
	}
	
	.box_menu_categorie.list_expand .box_menu.box_menu_depth_1 > .box_menu_item.categoria_item > .box_menu_item_text {
		text-transform: uppercase;
		font-size: 0.9em;
	}

/* --------- BOX_MENU CATEGORIE (.box_menu_categorie .box_menu) --------- */