:root {
  --mainmenu-textalign: center;
  --mainmenu-weight:400;
  --megamenu-textalign: left;
  --megamenu-weight:400;
  --megamenu-subcat-weight:400;
  --megamenu-gap: min(0.75vw, 0.75rem) min(1vw, 1rem) min(1vw, 1rem) min(1vw, 1rem);
  --megamenu-maxwidth: 160px;
  --megamenu-button-padding-inline: 1rem;
  --megamenu-button-padding-vertical: 0.5rem;
  --megamenu-lineheight: 2;
}



#NaturePetMenu {
  background-color:inherit;
  text-align: var(--mainmenu-textalign);
  line-height: var(--megamenu-lineheight);
  padding: 0px;
  margin: 0px;
}


#NaturePetMenu #menu,
{
    position:relative;
}

#NaturePetMenu ul {
	list-style: none;
  list-style-type: none;
	margin: 0;
	padding: 0;
}


#NaturePetMenu #nav {
  display: inline-block;
  margin: 0;
}


#NaturePetMenu ul>li {
	display: block;
	float: none;
	margin: 0;
	display: inline-block;
}

#NaturePetMenu button.toggle{display:none;}

/* any li */
#NaturePetMenu li {
	display:inline-block ;
	width:auto;
	border-bottom: none;
}



/* top level li */
#NaturePetMenu #nav > li{
	position:initial!important;
}



/*------------------------------
MEGA MENU DROP DOWN - DROPDOWN 2ND LEVEL
------------------------------*/


ul#nav > li > ul {
    display:none;
}

#NaturePetMenu ul#nav > li:hover > ul {
  display: grid !important;
}


/*2nd Level*/
#NaturePetMenu ul > li > ul,
#NaturePetMenu ul#nav > li > ul {
  min-width: 0;
  max-width: none;
  background-color: [WSCOL_MENU];
}

/*3rd Level*/
#NaturePetMenu ul#nav ul ul{
    position:relative;
    display: block
}

#NaturePetMenu ul#nav ul > li:hover > ul{
  left: 0% !important;
}

/* 2nd level li */
  #NaturePetMenu li li {
    position: relative;
    display: inline-block;
    width: 100%;
  }


/*------------------------------
------------------------------*/

#NaturePetMenu ul#nav > li > ul{
    grid-template-columns: repeat(auto-fill, minmax(var(--megamenu-maxwidth), 1fr));
    gap: var(--megamenu-gap);
    background-color:[WSCOL_MENU];
    padding:var(--megamenu-gap);
    box-sizing:border-box;
    position: absolute;
    left: 0;
    right: 0;
    text-align:var(--megamenu-textalign);

    gap:min(1vw, 1rem);
    padding-bottom: min(1.5vw, 1.5rem);

-webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.10);
-moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.10);
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.10);

}



/*=============================
SECOND LEVEL INDICATOR ON HOVER OF FIRST LEVEL 
=============================*/

#menu #nav > li:hover:has(ul) > a:after {
    content: "";
    width: 0px;
    height: 0px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid currentcolor;
    position: absolute;
    bottom: 14px;
    left: 50%;
    margin-left: -10px;
}





/*------------------------------
MEGA BUTTON STYLING
------------------------------*/

#NaturePetMenu li a {
  color: black;
  color: [WSCOL_BUTTON_TEXT];
  padding:var(--megamenu-button-padding-vertical);
  padding-inline: var(--megamenu-button-padding-inline);
  text-decoration: none;
  display: block;
  font-weight:var(--mainmenu-weight);
}

#NaturePetMenu li>a:hover, 
#NaturePetMenu li:hover>a, 
#NaturePetMenu>a:visited:hover {
  color: white;
  color:[WSCOL_BUTTON_TEXT_HOVER];
}


/*Mega Menu top-level categories*/
#NaturePetMenu li li > a{
    font-weight:var(--megamenu-weight);
}
/*Mega Menu sub categories*/
#NaturePetMenu li li li > a{
    font-weight:var(--megamenu-subcat-weight);
    font-size:80%;
    line-height: 1.2;
}




/*=============================
 MENU BUTTONS LINKS
=============================*/



#NaturePetMenu ul#nav > li > a{
 text-transform:uppercase;
 padding-bottom:28px;
}

#NaturePetMenu li a {
    line-height: 1.2;
}


#NaturePetMenu a:link, 
#NaturePetMenu a:visited 
{
	color: [WSCOL_TEXT];
	color: [WSCOL_BUTTON_TEXT];
}



#menu #nav > li > a.menuactive,
#menu #nav > li:hover > a
{
  position:relative;
  color:[WSCOL_BUTTON_TEXT_HOVER];
}




/*=============================
 Nested Buttons
=============================*/


#NaturePetMenu #nav > li > ul > li > a{
	text-transform:uppercase;
}

#NaturePetMenu  #nav ul  ul li a{
	color:black;
}

#NaturePetMenu  li li li > a {
    line-height: 1.1;
    padding-block: 4px;
}






/*=============================
MENU BOOK BTN
=============================*/


#NaturePetMenu #mbtn654555 a{
    transition:margin-top 0.3s;
	color:white;
	background-color:[WSCOL_THEME_SECONDARY];
border:1px solid [WSCOL_THEME_SECONDARY];
    padding: var(--btnpadding) calc(var(--btnpadding)* 1.0);
    font-size: var(--btnfontsize);
    margin-top: var(--templategap-content);
    line-height: var(--heading-lineheight);
border-radius: var(--btnradius);
padding-block:var(--megamenu-button-padding-vertical)!important;
    text-transform: none !important;
margin-left:var(--megamenu-button-padding-vertical);
margin-bottom:18px;
}

#NaturePetMenu #mbtn654555 a:hover{
	background:white;
	color:[WSCOL_THEME_SECONDARY];
}