@charset "utf-8";
/* -----------------Menu nella versione mobile-----------------*/

#menu-visibility{
	overflow:auto;/* permette lo scroll quando il menu è aperto*/
	background-color:var(--menu-back-mobile);/*sfondo menu mobile*/
	position:fixed;
	width: 100%;
	height: calc(100% - 44px);
	visibility:hidden;
	/*margin-top: 44px;*/
	padding-bottom: 20px;/*spazio sotto al menu*/;
	padding-top: 10px;/*lo stacco un pochino*/
}

#menu-visibility ul li{
	margin-bottom:0;/*reset*/
}

#menu-visibility ul li a{
	color: var(--txt-menu-tendina-mobile);
	font-size: 18px;
	display: block;
	font-weight: normal;
	border-radius: var(--border-radius);
	padding: 10px;
	margin:0 5px;
	text-align:left;
	text-decoration: none;
}

#menu-visibility ul li a:hover, #menu-visibility ul li a:focus{
	color: var(--txt-menu-tendina-mobile);
}

#menu-visibility ul ul{
	padding-top:0;
	padding-bottom: 0;
}

#menu-visibility ul ul li a{/* lev 2*/
	margin-left: 10px;
	margin-bottom: 5px;
}

#menu-visibility ul ul ul  { /* lev 3*/
	padding-left: 10px;
}

/* #menu-visibility ul ul ul ul { lev 4
	display: flex;
	flex-wrap: wrap;	
}*/

#menu-visibility ul ul ul li a{/* lev 3*/
	font-size: 16px;
	margin-bottom:5px;
	margin-left: 20px;
}

#menu-visibility ul ul ul ul a { /* lev 4*/
	margin-left: 35px;
}

#menu-visibility ul ul ul ul li a{ /* lev 4*/
	font-size: 15px;
	/*border: var(--border-style) var(--txt-menu-tendina-mobile);
	border-radius: var(--border-radius);
	padding: 4px 8px;
	margin-bottom:8px;
	margin-right: 8px;
	margin-left: 0;*/
}

#menu-visibility ul ul li:first-child {
	border-top: none;
}

#menu-visibility ul li a:before {
 	content: url("../img/svg/arrow-right.svg");
	display: inline-block;
	padding-right: 4px;
	filter:var(--menu-arrow-filter);
	width: 16px;
}

#menu-visibility input{/*nascondere l'input*/
	display:none}

/* ----------------- div bar per l'attivazione del menu ------------------ */

#bar{
	background-color:var(--menu-bar-mobile); 
	height:44px;
	width:100%;
	z-index:1006;
	position:fixed;
	box-shadow: 1px 3px 4px 0px rgb(0 0 0 / 10%);
	top:0;
}

#bar #logo, #bar #logo span {
	height: 44px;
	width: 130px;
	display: block;
	margin:auto;
	font-size: 20px;
}

#bar img{
	width: 100%;
}

/* ----------------- Hamburger animation ------------------ */

#hamburger {
  	display: none;
}

.menuicon {
 	position:fixed;
	height:44px;
	width:44px;
	margin-left:5px;
	z-index:2003;
	top: 0;
}

.menuicon  span {
    display: block;
    top: 21px;
    width: 30px;
    height:2px;
    left:8px;
    background-color: var(--txt-color);
    position: relative;
	border-radius: var(--border-radius);
    transition-duration: 0;  
    transition-delay: .1s;
}
    
.menuicon  span::after, .menuicon  span::before {
    display: block;
    content: '';
    position: absolute;
    width: 30px;
    height:2px;
    background-color: var(--txt-color);
	border-radius:var(--border-radius);
    transition-duration: .1s;
	-webkit-transition-delay: .1s, 0;
    transition-delay: .1s, 0;
}

.menuicon  span::before {
      margin-top: -8px;
}
.menuicon  span::after {
      margin-top: 8px;
}

#hamburger:checked ~ .menuicon span{
    background-color: rgba(0,0,0,0);
}
    
#hamburger:checked ~ .menuicon span::before {
      margin-top: 0px;
      -webkit-transition-delay: 0, .3s;
      -moz-transition-delay: 0, .3s;
      -ms-transition-delay: 0,.3s;
      -o-transition-delay: 0, .3s;
      transition-delay: 0, .3s;
}
	
#hamburger:checked ~ .menuicon span::after {
      margin-top: 0px;
      -webkit-transition-delay: 0, .3s;
      -moz-transition-delay: 0, .3s;
      -ms-transition-delay: 0,.3s;
      -o-transition-delay: 0, .3s;
      transition-delay: 0, .3s;
}

#hamburger:checked ~ .menuicon span::before {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
}

#hamburger:checked ~ .menuicon span::after {
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
}

/* ----------------- menu animation faccio apparire il menu --------------------------------------------- */

#hamburger:checked ~ #menu-visibility {
  visibility: visible;
  z-index: 1005;
}

html,body{
	font-family: var(--font-primary);
  	font-style: normal;
	color:var(--txt-color);
	/*height:100%;
	width:100%;*/
}

.super-wrapper {
	width: calc (100% - 44px);
	/*height: 100%;
	overflow: auto;*/
	background-color: var(--sfondo-color);
	margin-top: 44px;
	position: relative;/* ----per evitare lo scroll di un div fixed sopra il contenitore---- */
}

/* quando il menu è aperto, il body non scorre */
body:has(#hamburger:checked) {
  overflow: hidden;
  height: 100%;
}

#hamburger:checked ~ .super-wrapper  {
	overflow: hidden;
}

.icona-carrello-chef:before {
    content: url(../img/svg/cart.svg)!important;
    display: inline-block;
	filter: var(--icon-color-filter);
    vertical-align: middle;
	width: 25px!important;
}

@media screen and (min-width: 980px){

.super-wrapper {
	position:inherit;
}
}

/* -----------------icone------------------ */

.icona-account-chef:before {
	content: url("../img/svg/account.svg") ;
	display: inline-block;
    filter: var(--icon-color-filter);
    width: 22px;
	vertical-align: middle;
	margin-right: 4px;
}

.cart-container-mobile{
	height:44px;
	z-index:1007;
	top: 0;
	right: 0;
	position:fixed;
	padding: 8px 5px;
}

.cart-container-mobile .cart-contents-count{/* ---in alto a dx su mobile-- */
	margin-left: -5px;
} 

.cart-contents-count{
	margin-left: -10px;
	color: var(--above-color);
	background-color: var(--super-color)!important;
	border-radius: var(--border-radius)!important;
	padding: 3px!important;
}

.sub-menu{
	padding-left: 10px;
	margin-top:5px;
}

/* avvisi */ 
.avviso-contenitore{
	text-align: center;
}

.avviso-contenitore p {
	color: var(--sfondo-color);
	font-size: 14px;
	margin-bottom: 0;/*reset*/
	/*padding-top:5px;*/
	/*padding-bottom: 5px*/
}

.avviso-principale{
	background-color: var(--txt-color);
}

.avviso-secondario{
	background-color: var(--secondary-color);
}

@media screen and (min-width: 980px){
	
html,body{
	height:auto;/* per fare la barra stycky */
}
	
.super-wrapper {
	/*position:inherit;*/
	margin-top: 0;
}
	
#menu-visibility{
	height: 80px;
	margin-top: 0;/*reset*/
	padding-bottom:0;/*reset*/;
	padding-top:0;/*reset*/
}
	
#hamburger:checked ~ .super-wrapper  {
position:inherit;/* ----resetto--- */
}
	
#bar{
	display: none;
	/*position: sticky;
	top: 0;
	background-color: blue;*/
}
	
.cart-container-mobile{
	display: none;
}
	
.parola-account-nel-menu{
	display: none;
}
	
/*.cart-contents:before {
    content: "\e01d";
}*/
	
/*#menu-visibility .cart-contents:before {
    content: "\e01d";
}*/
	
/*.cart-contents::first-letter {
	margin-right:0;
}*/
	
#menu-visibility .icona-carrello-chef:before{
    content: url(../img/svg/cart.svg)!important;
    display: inline-block;
	filter: var(--icon-color-filter);
    vertical-align: middle;
    padding-right: 0;
	width: 22px!important;
}
	
.icona-account-chef:before {
	margin-right: 0;
}

.cart-contents-count{
	margin-left: -5px;
}

.menuicon{
	display:none; /* togliere icona hambuger icon */
}
	
#bar #logo{
	display: none;
	float:left;
	/*margin-left:10px;*/
}

#menu-visibility{
	z-index:1008;
	background-color: var(--menu-bar-desktop);
	visibility:visible;
	overflow:visible;
	position: sticky;/* potrei mettere fixed ma poi dovrei aggiungere il padding al contentore */
	top: 0;	
	width:100%;
	/* box-shadow: 1px 3px 4px 0px rgb(0 0 0 / 10%);*/
	display: block;
	transition: top 0.3s;/* menù che compare quando scrolli su*/;
	height: 80px;
		/*box-shadow: 1px 3px 4px 0px rgb(0 0 0 / 10%);*/
}
	
#menu-visibility{
	max-width: 100%;
}
	
#menu-visibility ul li a:hover, #menu-visibility ul li a:focus{
	color: var(--txt-menu-desktop);
	border: var(--border-style) var(--txt-menu-desktop);
}
	
#menu-visibility ul ul li  a:hover, #menu-visibility ul ul li a:focus{
	color: var(--txt-menu-tendina-desktop);
}
	
.logo-desktop{
	max-width: var(--site-width);
	margin: auto;
}
	
.logo-desktop img, .logo-desktop span {
	width: 200px;
	margin-top: 7px;
	margin-left: 10px;
	position: absolute;
	font-size: 30px;
}
	
.menu-header{
	max-width: var(--site-width);
	text-align: right;
	margin: auto;
}

#menu-visibility ul li a:before {/*togliere freccette*/
	display: none;
}
	
#menu-visibility ul ul li a:before {
	content: url("../img/svg/arrow-right.svg");
	display: inline-block;
	width: 16px;
}

#menu-visibility ul{
	margin:0;
	display: inline-block;
	height: 40px;
	margin-bottom: 0!important;
	margin-top: 0;
}
	
#menu-visibility ul ul{
	height: auto;
}
	
#menu-visibility ul ul{
	display:block;/*nego questa per far andare al 100 le voci del menu*/
}
	
#menu-visibility ul li {	
	margin: 0;
	float:left;
	position:relative;
	height: 80px;
}
	
#menu-visibility ul li a {
	font-size:18px;
	background-color: transparent;
	transition: all 0.3s ease;
	color: var(--txt-menu-desktop);
	padding:5px 10px;
	margin: 0 0 0 5px;
	border-radius: var(--border-radius); 
	border: var(--border-style) transparent;
	/*height: 40px;*/
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;	
	margin-top: 22px;/*dovrebbe essere 20 per la tendina ma va bene a 22*/
}

#menu-visibility ul ul li {	
	height: auto;
}

#menu-visibility ul ul li a {
	margin-top: 0;/*dovrebbe essere 20 per la tendina ma va bene a 22*/
}
	
#menu-visibility ul ul li a {
	height: auto;
	padding: 8px 10px;
}	
	
#menu-visibility ul li li a:hover {
	/*color: var(--txt-menu-desktop);*/
	border: var(--border-style) var(--menu-back-desktop);
	background-color: transparent;
}

/* animazione tendina*/
#menu-visibility ul li li a {
	color: var(--txt-menu-tendina-desktop);
	transition: all 0.2s ease;
}	
	
#menu-visibility ul li li a:hover {
	background-color: var(--bonus-color);
}	
	
#menu-visibility ul li li a:before {
	transition: all 0.2s ease;
}

#menu-visibility ul li li a:hover:before {
	margin-left: -3px;
	margin-right: 3px;
}
	
/*#menu-visibility ul:hover ul ul ul li a{ 
	border: var(--border-style) var(--txt-menu-tendina-desktop);
}*/
	
/* ----------------- dropdown - attivare il menu a tendina con hover ------------------ */
	
#menu-visibility ul li .sub-menu { 
	display: none;
  	position: fixed;
	background-color: var(--menu-back-desktop);
	padding: 10px 10px 5px 0;
	z-index:1001!important;
	top: 80px; /* contollare sempre*/
  	left: 0;
  	width: 100%;
  	height: auto;
}
	
#menu-visibility ul li:hover .sub-menu{
	display: block;
}

	/*resetto gli ul per liv 2 3 e 4*/
#menu-visibility ul ul .sub-menu { 
	display: block;
  	position:relative;
	background-color: transparent;
	/*left: 0;verso della tendina*/
	border-top: none; 
	z-index:1001!important;
	padding: 0;
	top: 0;
  	left: 0;
  	width: auto;
  	height: auto;
	box-shadow: none;
}

/*#menu-visibility ul ul ul .sub-menu{	
	display: flex!important;
    flex-wrap: wrap;
}	
/*fine reset gli ul per liv 2 3 e 4*/
	
.sub-menu{
	padding-left: 0px;
	margin-top:0;
}

#menu-visibility ul ul li {
	font-size: 14px;
	font-weight: normal;
	float:none;
	/*border-top: 1px solid var(--secondary-light-color);*/
	margin-top:0;
	max-width: var(--site-width);
	margin: auto;
	background-color: var(--menu-back-desktop);
}	
	
#menu-visibility ul ul ul li {
	margin: 0;	
}
	
.menu li.has-children > a:after {
    content: url("../img/svg/arrow-down.svg");
    display: inline-block;
	margin-left: 6px;
	filter: var(--menu-arrow-filter);
	width: 12px;
	transition: all 0.2s ease;
}
	
.menu li:hover.has-children:hover > a:after {
  will-change: transform;
  transform: rotate(180deg);
}
	
.menu li li.has-children > a:after {
	display: none;
}
	
.avviso-contenitore {
	padding-top: 0px;
}	

}