/* ########################################################################## */
/* ############################# RUBY MEGA MENU ############################# */
/* ################################# V 1.0 ################################## */

/* ========================================================================== */
/* ─── HEADER AND WRAPPER  ───────────────────────────────────────────────────*/
#ruby-mega-menu div.ruby-menu-header{
  font-family: 'Open Sans', sans-serif;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
  z-index: 99999;
}

#ruby-mega-menu div.ruby-menu-description{
  position: relative;
  width: 980px;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

#ruby-mega-menu div.ruby-wrapper{
  position: relative;
  width: 980px;
  height: 50px;
  margin: 0 auto;
  background: #464646;
}

#ruby-mega-menu .ruby-wrapper .visible-xs{
  visibility: hidden;
  position: absolute;
}

#ruby-mega-menu div.ruby-wrapper.ruby-menu-full-width > ul.ruby-menu{
  width: 980px;
  margin: 0 auto;
}

#ruby-mega-menu img.ruby-logo{
  max-height: 20px;
  position: relative;
  float: left;
  margin: 15px 15px;
}

/* ─── MAIN LEVEL  ───────────────────────────────────────────────────────────*/
#ruby-mega-menu div.ruby-wrapper ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

#ruby-mega-menu div.ruby-wrapper > ul{
  position: relative;
}

#ruby-mega-menu ul.ruby-menu > li{
  float: left;
  font-size: 14px;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-right{
  float: right;
}

#ruby-mega-menu ul.ruby-menu > li > a{
  display: block;
  line-height: 50px;
  padding: 0 25px 0 15px;
  color: #efefef;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
}

#ruby-mega-menu ul.ruby-menu > li > a:only-child{
  padding: 0 15px 0 15px;
}

#ruby-mega-menu ul.ruby-menu > li > a:only-child:after,
#ruby-mega-menu ul.ruby-menu > li:hover > a:only-child:after{
	/* NO css down-arrows if DOES NOT have child item */
	content: '';
}

#ruby-mega-menu ul.ruby-menu > li > a .fa{
  position: relative;
  width: 24px;
}

#ruby-mega-menu ul.ruby-menu > li > a > img{
  max-width: 16px;
  display: block;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-social > a{
  padding: 0;
  width: 30px;
  padding: 0 8px;
  font-size: 16px;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-social > a > span{
  display: none;
}

/* ─── MENU DIVIDERS (optional)  ─────────────────────────────────────────────*/
#ruby-mega-menu ul.ruby-menu.ruby-menu-dividers > li > a,
#ruby-mega-menu ul.ruby-menu.ruby-menu-dividers > li.ruby-menu-social > a{
  border-left: 1px solid #111;
  border-right: 1px solid #666;
}

#ruby-mega-menu ul.ruby-menu.ruby-menu-dividers > li:first-child > a,
#ruby-mega-menu ul.ruby-menu.ruby-menu-dividers > li.ruby-menu-social:last-child > a{
  border-left: none;
}

#ruby-mega-menu ul.ruby-menu.ruby-vertical.ruby-menu-dividers > li > a{
  border: none;
  border-top: 1px solid #111;
  border-bottom: 1px solid #666;
}

#ruby-mega-menu ul.ruby-menu.ruby-vertical.ruby-menu-dividers > li:first-child > a{
  border-top: none;
}

#ruby-mega-menu ul.ruby-menu.ruby-menu-dividers > li > a:hover,
#ruby-mega-menu ul.ruby-menu.ruby-menu-dividers > li:hover > a{
  border-right: 1px solid #19ad86; /* theme main li:hover color */
}

#ruby-mega-menu ul.ruby-menu.ruby-vertical.ruby-menu-dividers > li > a:hover,
#ruby-mega-menu ul.ruby-menu.ruby-vertical.ruby-menu-dividers > li:hover > a{
  border-bottom: 1px solid #19ad86; /* theme main li:hover color */
}

#ruby-mega-menu ul.ruby-menu.ruby-menu-dividers > li.ruby-active-menu-item > a{
  border-right: 1px solid #17a47d;
}

#ruby-mega-menu ul.ruby-menu.ruby-vertical.ruby-menu-dividers > li.ruby-active-menu-item > a{
  border-bottom: 1px solid #17a47d;
}

/* ─── CLASSIC DROPDOWN : GENERIC  ───────────────────────────────────────────*/
#ruby-mega-menu ul.ruby-menu > li > ul,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul{
  position: absolute;
  -webkit-box-shadow: 0px 8px 24px -5px #ccc;
  -moz-box-shadow: 0px 8px 24px -5px #ccc;
  box-shadow: 0px 8px 24px -5px #ccc;
  border-top: 4px solid #19ad86;
}

#ruby-mega-menu ul.ruby-menu > li > ul > li,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li{
  position: relative;
  line-height: inherit; /* theme adaptation fix */
  margin: 0; /* theme adaptation fix */
  padding: 0; /* theme adaptation fix */
}

#ruby-mega-menu ul.ruby-menu > li > ul > li > a,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > a,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li > a{
  display: block;
  width: 220px;
  line-height: 40px;
  padding: 0 35px 0 25px;
  background: #fff;
  color: #666;
  text-decoration: none;
  font-size: 14px;
}

#ruby-mega-menu ul.ruby-menu > li > ul > li:hover > a,
#ruby-mega-menu ul.ruby-menu > li > ul > li > a:hover,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li:hover > a,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > a:hover,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li:hover > a,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li > a:hover{
  background: #efefef;
}

#ruby-mega-menu ul.ruby-menu > li > ul > li > a:only-child:after,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > a:only-child:after,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li > a:only-child:after{
  content: "";
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > a:only-child:after,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > ul > li > a:only-child:after,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > ul > li > ul > li > a:only-child:after{
  content: "";
}

#ruby-mega-menu ul.ruby-menu > li > ul > li > a .fa,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > a .fa,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li > a .fa{
  position: relative;
  width: 24px;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul{
  right: 0;
}

/* ─── CLASSIC DROPDOWN : 3RD & 4TH LEVEL SPECIFIC  ──────────────────────────*/
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul{
  left: 220px;
  top: -4px;
  z-index: 100;
}

#ruby-mega-menu ul.ruby-menu > li > ul > li.ruby-open-to-left > ul,
#ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left > ul{
  left: auto;
  right: 220px;
}

/* ruby-menu-right */
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > ul,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > ul > li > ul {
  left: auto;
  right: 220px;
}

/* ACTIVE MENU ITEM STYLES */
#ruby-mega-menu ul.ruby-menu > li.ruby-active-menu-item > a{
  background: #17a47d;
}

/* ─── MEGA MENU: CLASSIC  ──────────────────────────────────────*/
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega > div,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div{
  position: absolute;
  width: 100%;
  height: auto;
  top: 50px;
  left: 0;
  background: #fff;
  border-top: 4px solid #19ad86;
  overflow: hidden;
  -webkit-box-shadow: 0px 8px 24px -5px #ccc;
  -moz-box-shadow: 0px 8px 24px -5px #ccc;
  box-shadow: 0px 8px 24px -5px #ccc;
}

/* ─── MEGA MENU: BLOG TYPE  ─────────────────────────────────────────────────*/
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav{
  position: relative;
  width: 200px;
  height: 100%;
  /* height: 500px;  if you don't want javascript to define height, use manual height */
  left: 0;
  top: 0;
  background: #efefef;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li{
  font-size: 14px;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > a{
  display: block;
  line-height: 40px;
  padding: 0 15px;
  background: #efefef;
  color: #666;
  text-decoration: none;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li.ruby-active-menu-item > a{
  background: #e6e6e6;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div{
  position: absolute;
  width: 780px;
  height: auto;
  min-height: 100%;
  left: 200px;
  top: 0;
  background: #fff;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li:hover > a{
  background: #ddd;
}

/* ─── MEGA MENU: SHOPPING TYPE  ─────────────────────────────────────────────*/
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div{
  text-align: center;
  z-index: 999999;
  /* height: 500px;
  IF YOU DONT WANT TO USE JAVASCRIPT,
  PLEASE SPECIFY A HEIGHT TO THIS CELL */
}
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul{
  width: 100%;
  background: #efefef;
  margin: 0 auto;
  padding: 0px;
  border-bottom: 1px solid #ddd;
  font-size: 0;
  z-index: 100;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li{
  display: inline-block;
  margin: 0;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a{
  display: block;
  padding: 20px 15px;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
  font-stretch: expanded;
  color: #666;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li:hover > a,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:hover,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li.ruby-active-menu-item > a{
  text-decoration: none;
}

/* Shop Category: underline-upperline effect */
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a{
  position: relative;
  text-decoration: none;
  display: inline-block;
}

/* ─── MEGA MENU: SHOPPING TYPE / Content ────────────────────────────────────*/
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div{
  position: absolute;
  width: 100%;
  left: 0;
  top: auto;
  margin-top: 1px;
  text-align: left;
  background: #fff;
  z-index: -1;
}

/* ─── MAIN LEVEL: SHOPPING CART  ────────────────────────────────────────────*/
/* Shopping Cart Icon */
#ruby-mega-menu span.ruby-menu-social-cart{
  position: relative;
  display: inline-block;
  float: right;
  width: 35px;
  padding: 13px 0px;
  font-size: 16px;
  line-height: 25px;
}
#ruby-mega-menu span.ruby-menu-social-cart > a{
  color: #efefef;
  width: 30px;
  display: block;
}

/* Shopping Cart Dropdown Box */
#ruby-mega-menu .ruby-cart-dropdown{
  display: none;
  position: absolute;
  top: calc(100%);
  right: 0;
  width: 250px;
  height: 100px;
  height: auto;
  background: #f8f8f8;
  color: #676767;
  -webkit-box-shadow: 0px 8px 24px -5px #ccc;
  -moz-box-shadow: 0px 8px 24px -5px #ccc;
  box-shadow: 0px 8px 24px -5px #ccc;
  z-index: 9999;
  padding: 10px 18px;
  font-size: 13px;
  box-sizing: border-box;
}

#ruby-mega-menu .ruby-cart-dropdown.open{
  display: block;
}

#ruby-mega-menu .ruby-cart-dropdown::before{ /* Triangle */
  content: '';
  position: absolute;
  top: -8px;
  right: 18px;
  width: 14px;
  height: 14px;
  background: #f8f8f8;
  -webkit-box-shadow: 0px 8px 24px -5px #ccc;
  -moz-box-shadow: 0px 8px 24px -5px #ccc;
  box-shadow: 0px 8px 24px -5px #ccc;
  transform: rotate(45deg);
}

#ruby-mega-menu span.ruby-menu-social-cart > a:hover{

}

#ruby-mega-menu span.ruby-menu-social-cart > a > span{
  position: absolute;
  margin-top: -25px;
  margin-left: 10px;
  background-color: #efefef;
  color: #000000;
  font-size: 8px;
  font-weight: 400;
  min-width: 12px;
  height: 12px;
  border-radius: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Shopping Cart Content */
#ruby-mega-menu .rmm-cart-empty{
  color: #888;
  text-align: center;
  padding: 16px 0;
  margin: 0;
}
#ruby-mega-menu .rmm-cart-items{
  list-style: none;
  margin: 0;
  padding: 0;
}
#ruby-mega-menu .rmm-cart-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
#ruby-mega-menu .rmm-cart-item:last-child{
  border-bottom: none;
}
#ruby-mega-menu .rmm-cart-item-img img{
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 3px;
}
#ruby-mega-menu .rmm-cart-item-info{
  flex: 1;
  min-width: 0;
}
#ruby-mega-menu .rmm-cart-item-img, #ruby-mega-menu .rmm-cart-item-info{
  float: left;
}
#ruby-mega-menu .rmm-cart-item-name{
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ruby-mega-menu .rmm-cart-item-name:hover{
  color: #19ad86;
}
#ruby-mega-menu .rmm-cart-item-qty-price{
  display: block;
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}
#ruby-mega-menu .rmm-cart-total{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 2px solid #f0f0f0;
  margin-top: 8px;
  font-size: 14px;
}
#ruby-mega-menu .rmm-cart-total strong{
  color: #19ad86;
  font-size: 15px;
}
#ruby-mega-menu .rmm-cart-btn{
  display: block;
  text-align: center;
  padding: 8px;
  background: #19ad86;
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
}
#ruby-mega-menu .rmm-cart-btn:hover{
  background: #17a47d;
  color: #fff;
}
#ruby-mega-menu .rmm-cart-btn-checkout{
  background: #333;
  margin-top: 4px;
}
#ruby-mega-menu .rmm-cart-btn-checkout:hover{
  background: #111;
}


/* ─── RUBY CONTENT GRID SYSTEM  ─────────────────────────────────────────────*/
#ruby-mega-menu div.ruby-grid,
#ruby-mega-menu div.ruby-grid-lined{
  position: relative;
  width: 100%;
  margin: 0;
}

/* Ruby Grid - Rows*/
#ruby-mega-menu div.ruby-grid > div.ruby-row{
  position: relative;
  width: 100%;
  height: auto;
}

#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-row [class^="ruby-col"]{
  margin-top: 16px;
}

#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-row:first-of-type [class^="ruby-col"]{
  margin-top: 0;
}

#ruby-mega-menu div.ruby-grid.ruby-grid-lined > div.ruby-row:after{
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  background: -webkit-linear-gradient(left,
    rgba(204,204,204,0) 0%,
    rgba(204,204,204,0.38) 24%,
    rgba(204,204,204,0.7) 50%,
    rgba(204,204,204,0.32) 79%,
    rgba(204,204,204,0) 100%);
}

#ruby-mega-menu div.ruby-grid.ruby-grid-lined > div.ruby-row:last-child:after{
  height: 0;
}

#ruby-mega-menu div.ruby-grid > div.ruby-row::after{
	content: "";
	display: table;
	clear: both;
}

/* Ruby Grid Columns*/
#ruby-mega-menu div.ruby-grid > div.ruby-row [class^="ruby-col"],
#ruby-mega-menu div.ruby-grid > div.ruby-row [class*=" ruby-col"]{
  position: relative;
  float: left;
  height: auto;
}

#ruby-mega-menu div.ruby-grid > div.ruby-row > [class^="ruby-col"],
#ruby-mega-menu div.ruby-grid > div.ruby-row > [class*=" ruby-col"]{
  padding: 16px;
  box-sizing: border-box;
}

#ruby-mega-menu div.ruby-grid > div.ruby-row > [class^="ruby-col"] [class^="ruby-col"],
#ruby-mega-menu div.ruby-grid > div.ruby-row > [class*=" ruby-col"] [class*=" ruby-col"]{
  padding-left: 16px;
}

#ruby-mega-menu div.ruby-grid > div.ruby-row > [class^="ruby-col"] [class^="ruby-col"]:first-of-type,
#ruby-mega-menu div.ruby-grid > div.ruby-row > [class*=" ruby-col"] [class*=" ruby-col"]:first-of-type{
  padding-left: 0;
}

/* Ruby Grid - Clean rows */
#ruby-mega-menu div.ruby-grid > div.ruby-row::after{
  content: "";
  display: table;
  clear: both;
}

#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-1{
  width: 8.33%;
}
#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-2{
  width: 16.66%;
}
#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-3{
  width: 25%;
}
#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-4{
  width: 33.33%;
}
#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-5{
  width: 41.66%;
}
#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-6{
  width: 50%;
}
#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-7{
  width: 58.33%;
}
#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-8{
  width: 66.66%;
}
#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-9{
  width: 75%;
}
#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-10{
  width: 83.33%;
}
#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-11{
  width: 91.66%;
}
#ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-12{
  width: 100%;
}

/* ─── LINED VARIANT ──────────────────────────────────────────────────────── */
#ruby-mega-menu div.ruby-grid.ruby-grid-lined > div.ruby-row > div[class^="ruby-col"]:after,
#ruby-mega-menu div.ruby-grid.ruby-grid-lined > div.ruby-row > div[class*=" ruby-col"]:after{
  content: "";
  position: absolute;
  top: 5%;
  right: 0;
  width: 1px;
  height: 90%;
  background: linear-gradient(
    to bottom,
    rgba(204,204,204,0) 0%,
    rgba(204,204,204,0.38) 24%,
    rgba(204,204,204,1) 50%,
    rgba(204,204,204,0.32) 79%,
    rgba(204,204,204,0) 100%
  );
}

#ruby-mega-menu div.ruby-grid.ruby-grid-lined > div.ruby-row > div[class^="ruby-col"]:last-child:after,
#ruby-mega-menu div.ruby-grid.ruby-grid-lined > div.ruby-row > div[class*=" ruby-col"]:last-child:after{
  width: 0;
}

#ruby-mega-menu div.ruby-grid img{
  position: relative;
  max-width: 100%;
  height: auto;
  display: block;
}

/* ─── RUBY CONTENT RELATED STYLES  ──────────────────────────────────────────*/
/* Ruby List */
#ruby-mega-menu h3.ruby-list-heading{
  font-size: 14px;
  line-height: 24px;
  font-weight: bold;
  margin: 0;
}

/* Ruby list h3 heading with image */
#ruby-mega-menu .ruby-row img + h3 {
  margin-top: 10px;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega > div ul,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div ul{
  margin: 0;
  margin-top: 10px;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega > div ul li,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div ul > li{
  position: relative;
  font-size: 14px;
  line-height: 28px;
  display: block;
  width: 100%;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega > div ul li > a,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div ul > li > a{
  text-decoration: none;
  color: #555;
  display: inline-block;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega > div ul li > a:hover,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div ul > li > a:hover{
  color: #222;
  text-decoration: underline;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega > div ul li .fa,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div ul > li .fa{
  position: relative;
  width: 24px;
}

/* Ruby List With Images */
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega > div ul.ruby-list-with-images li{
  height: 50px;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega > div ul.ruby-list-with-images li span.ruby-list-desc{
  font-size: 11px;
  display: block;
  position: absolute;
  top: 16px;
  left: 72px;
  color: #999;
}

#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega > div ul li > a > img{
  float: left;
  width: 60px;
  margin-right: 12px;
}

#ruby-mega-menu span.ruby-c-title,
#ruby-mega-menu span.ruby-c-category,
#ruby-mega-menu span.ruby-c-date{
  position: relative;
  display: block;
}

#ruby-mega-menu span.ruby-c-title a,
#ruby-mega-menu span.ruby-c-category a,
#ruby-mega-menu span.ruby-c-date a{
  text-decoration: none;
}

#ruby-mega-menu span.ruby-c-title,
#ruby-mega-menu span.ruby-c-title a{
  font-size: 14px;
  font-weight: bold;
  text-transform: capitalize;
  line-height: 20px;
  margin-top: -5px;
  color: #222;
}

#ruby-mega-menu span.ruby-c-title a:hover{
  color: #444;
  text-decoration: underline;
}

#ruby-mega-menu span.ruby-c-category,
#ruby-mega-menu span.ruby-c-category a{
  font-size: 11px;
  margin: 9px 0;
  color: #444;
}

#ruby-mega-menu span.ruby-c-date,
#ruby-mega-menu span.ruby-c-date a{
  font-size: 11px;
  color: #444;
}

#ruby-mega-menu span.ruby-c-category a:hover,
#ruby-mega-menu span.ruby-c-date a:hover{
  color: #19ad86
}

/* Begin: Blog type article list */
#ruby-mega-menu ul.ruby-blog-article-list{
  list-style: none;
  margin: 0;
}

#ruby-mega-menu .ruby-article-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  margin: 0;
}

#ruby-mega-menu .ruby-article-thumb{
  width: 30px;
  height: 30px;
  object-fit: cover;
  flex-shrink: 0;
}

#ruby-mega-menu span.ruby-article-title, #ruby-mega-menu span.ruby-article-title a{
  font-size: 14px;
  font-weight: 600;
  color: #222;
  text-decoration: none;
  line-height: 1.4;
}
#ruby-mega-menu .ruby-article-title, #ruby-mega-menu .ruby-article-title a:hover{
  text-decoration: underline;
  color: #555;
}
/* End: Blog type article list */

/* Blog 4 column post title */
#ruby-mega-menu span.ruby-c-title.title-inside-blog4col {
  margin-top: 10px;
}

/*inline */
#ruby-mega-menu div.ruby-c-inline{
  display: block;
  position: relative;
  height: 14px;
  margin: 7px 0;
}

#ruby-mega-menu div.ruby-c-inline span.ruby-c-category,
#ruby-mega-menu div.ruby-c-inline span.ruby-c-date{
  position: absolute;
  display: inline-block;
}

#ruby-mega-menu div.ruby-c-inline span.ruby-c-date{
  right: 0;
}

#ruby-mega-menu div.ruby-c-inline span.ruby-c-category,
#ruby-mega-menu div.ruby-c-inline span.ruby-c-category a{
  margin: 0;
}

#ruby-mega-menu span.ruby-c-content{
  display: block;
  position: relative;
  top: 7px;
  font-size: 12px;
  line-height: 18px;
  text-align: left;
  color: #333;
}

#ruby-mega-menu .margin-top15, #ruby-mega-menu h3.margin-top15{
  margin-top: 15px;
}

/* Blog 4-column thumbnails */
#ruby-mega-menu .ruby-wrapper img.img-inside-blog4col {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
    max-height: 120px; /* change if you need */
    object-fit: cover;
    object-position: center;
}

/* Blog 3-column and 2-column thumbnails */
#ruby-mega-menu .ruby-wrapper img.img-inside-blog3col,
#ruby-mega-menu .ruby-wrapper img.img-inside-blog2col {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
    max-height: 80px; /* change if you need */
    object-fit: cover;
    object-position: center;
}


/* ─── CSS STYLES SPECIFIC FOR DEVICES EXCEPT MOBILE  ────────────────────────*/
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* IMPORTANT: RUBY MEGA MENU USES 1024px AS A BREAKPOINT. ────────────────────*/
/* CHANGING IT REQUIRES NECESSARY CHANGES IN ruby-main.js AS WELL ────────────*/
@media(min-width:1024px) {

  /* Ruby Transparent */
  #ruby-mega-menu div.ruby-wrapper.ruby-menu-transparent{
    background: none;
  }

  #ruby-mega-menu div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li.ruby-active-menu-item > a{
    background: none;
    color: #19ad86;
  }

  #ruby-mega-menu div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li.ruby-menu-social > a{
    border: none;
  }

  #ruby-mega-menu div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu.ruby-menu-dividers > li > a{
    border: none;
  }

  #ruby-mega-menu div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li:hover > a,
  #ruby-mega-menu div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li > a:hover,
  #ruby-mega-menu div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu.ruby-menu-dividers > li:hover > a,
  #ruby-mega-menu div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu.ruby-menu-dividers > li > a:hover{
    background: none;
    color: #5EE8C3;
  }

  #ruby-mega-menu div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li.ruby-menu-social.ruby-menu-search > a:hover,
  #ruby-mega-menu div.ruby-wrapper.ruby-menu-transparent > ul.ruby-menu > li.ruby-menu-social.ruby-menu-search:hover > a{
    background: none;
  }

  /* RUBY CLASSIC 2ND, 3RD, 4TH LEVEL --> HIDE ON NON-MOBILE */
  #ruby-mega-menu ul.ruby-menu > li > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul{
    /* hide */
    visibility: hidden;
    opacity: 0;
  }

  /* RUBY CLASSIC 2ND, 3RD, 4TH LEVEL --> SHOW ON NON-MOBILE WHEN HOVERED TO PARENT */
  #ruby-mega-menu ul.ruby-menu > li:hover > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul > li:hover > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li:hover > ul{
    /* show */
    visibility: visible;
    opacity: 1;
  }

  /* RUBY MEGA, MEGA BLOG, MEGA SHOP --> HIDE ON NON-MOBILE */
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega > div,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div{
    /* hide */
    visibility: hidden;
    opacity: 0;
  }

  /* RUBY MEGA, MEGA BLOG, MEGA SHOP --> SHOW ON NON-MOBILE */
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega:hover > div,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog:hover > div,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop:hover > div{
    visibility: visible;
    opacity: 1;
  }

  /* RUBY MEGA BLOG */
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div{
    /* hide */
    visibility: hidden;
    opacity: 0;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog:hover > div > ul.ruby-menu-mega-blog-nav > li.ruby-active-menu-item > div{
    visibility: visible;
    opacity: 1;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li:hover > div{
    visibility: visible;
    opacity: 1;
    z-index: 101;
  }

  /* RUBY MENU MEGA SHOP */
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div{
    /*hide*/
    visibility: hidden;
    opacity: 0;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop:hover > div > ul > li.ruby-active-menu-item > div,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li:hover > div{
    visibility: visible;
    opacity: 1;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:before,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:after{
    height: 1px;
    position: absolute;
    content: '';
    background-color: #19ad86;
    width: 0;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:before{
    top: 10px;
    left: 5%;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:after{
    bottom: 10px;
    right: 5%;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:hover,
  #ruby-mega-menu .snip1217 .current a{
    color: #333;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:hover:before,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li.ruby-active-menu-item > a:before,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:hover:after,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li.ruby-active-menu-item > a:after,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li:hover > a:before,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li:hover > a:after{
    width: 90%;
  }

  #ruby-mega-menu ul.ruby-menu > li > a:after{
  	/* css down-arrows if has child item */
  	font-family: "FontAwesome";
  	text-decoration: none;
  	content: '\f107';
  	position: absolute;
  	margin-left: 5px;
  }

  #ruby-mega-menu ul.ruby-menu > li:hover > a:after{
    -webkit-transform: rotate(-180deg);
  	-moz-transform: rotate(-180deg);
  	-o-transform: rotate(-180deg);
  	-ms-transform: rotate(-180deg);
  	transform: rotate(-180deg);
  }

  #ruby-mega-menu ul.ruby-menu > li > ul > li > a:after,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > a:after,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li > a:after{
  	/* css right-arrows if has child item */
  	font-family: "FontAwesome";
  	text-decoration: none;
  	font-size: 16px;
  	padding: 0;
  	content: '\f105';
  	position: absolute;
  	right: 15px;
  }

  #ruby-mega-menu ul.ruby-menu > li > ul > li:hover > a:after,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li:hover > a:after,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li:hover > a:after{
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }

  #ruby-mega-menu ul.ruby-menu > li > ul > li.ruby-open-to-left > a:after,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left > a:after,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li.ruby-open-to-left > a:after{
  	/* css down-arrows if has child item */
  	content: '\f104';
  	right: auto;
  	left: 10px;
  }

  #ruby-mega-menu ul.ruby-menu > li > ul > li.ruby-open-to-left:hover > a:after,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left:hover > a:after,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li.ruby-open-to-left:hover > a:after{
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > a:after,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > ul > li > a:after,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > ul > li > ul > li > a:after{
    /* css down-arrows if has child item */
    content: '\f104';
    right: auto;
    left: 10px;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li:hover > a:after,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > ul > li:hover > a:after,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > ul > li > ul > li:hover > a:after{
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li.ruby-active-menu-item > a:after,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li:hover > a:after{
    content: "";
    position: absolute;
    right: 0;
    margin-top: 13px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 8px 6px 0;
    border-color: transparent #fff transparent transparent;
  }


  /* ─── TRANSITION EFFECTS  ─────────────────────────────────────────────────*/

  /* Arrows */
  #ruby-mega-menu ul.ruby-menu > li > a:after{
  	transition: all 0.3s ease;
  }

  #ruby-mega-menu ul.ruby-menu > li > ul > li > a:after,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > a:after,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li > a:after{
  	transition: all 0.3s ease;
  }

  /* 1st level move-up effect */
  #ruby-mega-menu ul.ruby-menu > li > ul,
  #ruby-mega-menu ul.ruby-menu > li > div{
  	transform: translateY(25px);
  	transition: all 0.3s ease;
  }

  #ruby-mega-menu ul.ruby-menu > li:hover > ul,
  #ruby-mega-menu ul.ruby-menu > li:hover > div{
  	transform: translateY(0);
  }

  /* 1st level move-left effect --> For Vertical Menu Orientation */
  #ruby-mega-menu ul.ruby-menu.ruby-vertical > li > ul,
  #ruby-mega-menu ul.ruby-menu.ruby-vertical > li > div{
  	transform: translateX(25px);
  	transition: all 0.3s ease;
  }

  #ruby-mega-menu ul.ruby-menu.ruby-vertical > li:hover > ul,
  #ruby-mega-menu ul.ruby-menu.ruby-vertical > li:hover > div{
  	transform: translateX(0);
  }

  /* 2nd 3rd 4th level move-left/right effect */
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li > ul{
  	transform: translateX(25px);
  	transition: all 0.3s ease;
  }

  #ruby-mega-menu ul.ruby-menu > li > ul > li:hover > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li:hover > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li:hover > ul{
  	transform: translateX(0);
  }

  #ruby-mega-menu ul.ruby-menu > li > ul > li.ruby-open-to-left > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li.ruby-open-to-left > ul{
  	transform: translateX(-25px);
  	transition: all 0.3s ease;
  }

  #ruby-mega-menu ul.ruby-menu > li > ul > li.ruby-open-to-left:hover > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li.ruby-open-to-left:hover > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li.ruby-open-to-left:hover > ul{
  	transform: translateX(0);
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > ul,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > ul > li > ul,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > ul > li > ul > li > ul{
    transform: translateX(-25px);
    transition: all 0.3s ease;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li:hover > ul,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > ul > li:hover > ul,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul > li > ul > li > ul > li:hover > ul{
    transform: translateX(0);
  }

  /* Ruby Mega Menu Blog list content move-down effect */
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div{
  	transform: translateY(-50px);
  	transition: all 0.5s ease;
  }
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog:hover > div > ul.ruby-menu-mega-blog-nav > li.ruby-active-menu-item > div,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li:hover > div{
  	transform: translateY(0);
  }

  /* Ruby Mega Menu Blog list content move-left effect --> For Vertical Menu Orientation */
  #ruby-mega-menu ul.ruby-menu.ruby-vertical > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div{
  	transform: translateX(50px);
  	transition: all 0.5s ease;
  }
  #ruby-mega-menu ul.ruby-menu.ruby-vertical > li.ruby-menu-mega-blog:hover > div > ul.ruby-menu-mega-blog-nav > li.ruby-active-menu-item > div,
  #ruby-mega-menu ul.ruby-menu.ruby-vertical > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li:hover > div{
  	transform: translateX(0);
  }

  /* Ruby Mega Menu Shop List content move-down effect */
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div{
  	transform: translateY(-50px);
  	transition: all 0.5s ease;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop:hover > div > ul > li.ruby-active-menu-item > div,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li:hover > div{
  	transform: translateY(0);
  }

  /* Ruby Mega Menu Shop List content move-down effect --> For Vertical Menu Orientation */
  #ruby-mega-menu ul.ruby-menu.ruby-vertical > li.ruby-menu-mega-shop > div > ul > li > div{
  	transform: translateX(50px);
  	transition: all 0.5s ease;
  }

  #ruby-mega-menu ul.ruby-menu.ruby-vertical > li.ruby-menu-mega-shop:hover > div > ul > li.ruby-active-menu-item > div,
  #ruby-mega-menu ul.ruby-menu.ruby-vertical > li.ruby-menu-mega-shop > div > ul > li:hover > div{
  	transform: translateX(0);
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:before,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:after{
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }

}

/* ─── WORDPRESS THEMES FIXES  ───────────────────────────────────────────────*/
/* =============================================================================
   ISSUE 1 — CRITICAL: overflow:hidden

   Avada: nav { overflow: hidden }

   ruby-menu-header lives inside the nav element.
   overflow:hidden clips all dropdown panels (mega, blog, shop)
   as soon as they extend beyond the nav boundary → invisible.

   Fix: reset overflow on the ruby wrapper.
   ========================================================================== */

nav #ruby-mega-menu.ruby-menu-header,
nav #ruby-mega-menu .ruby-wrapper {
    overflow: visible !important;
}

/* =============================================================================
   ISSUE 2 — li { float: left }

   Avada: nav li { float: left }

   This rule cascades to ALL li elements inside ruby-menu.
   Notably, ruby-menu-mega-blog-nav (vertical tab list) and
   ruby-menu-mega-shop > ul > li items get float:left,
   breaking their vertical layout. Dropdown ul > li items
   also end up in a horizontal row.
   ========================================================================== */

/* Remove float from all ruby li elements */
nav #ruby-mega-menu .ruby-wrapper ul li,
nav #ruby-mega-menu .ruby-wrapper .ruby-menu li {
    float: none !important;
}

/* Only top-level li items should be horizontal */
nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu > li {
    float: left !important;
}
nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu > li.ruby-menu-right {
    float: right !important;
}

/* Blog nav li items must stay vertical */
nav #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li {
    float: none !important;
    display: block !important;
}

/* Shop category li items (CLOTHING, OUTERWEAR etc.) are inline-block — side by side */
nav #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li {
    float: none !important;
    display: inline-block !important;
}

/* ruby-col > ul > li items inside shop tab content — normal list items */
nav #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div ul > li {
    float: none !important;
    display: list-item !important;
}

/* =============================================================================
   ISSUE 3 — ul a { display: block; box-sizing: content-box }

   Avada: nav ul a { display: block; box-sizing: content-box }

   box-sizing: content-box adds padding/border on top of width,
   which can break ruby's grid calculations.
   ========================================================================== */

nav #ruby-mega-menu .ruby-wrapper a,
nav #ruby-mega-menu .ruby-wrapper ul a {
    box-sizing: border-box !important;
}

/* =============================================================================
   ISSUE 4 — li { cursor: pointer }

   Avada: nav li { cursor: pointer }

   Ruby menu manages its own cursor behavior.
   Avada's cursor:pointer can conflict, especially on
   non-clickable heading areas inside the menu.
   ========================================================================== */

nav #ruby-mega-menu .ruby-wrapper li {
    cursor: default !important;
}

nav #ruby-mega-menu .ruby-wrapper li a,
nav #ruby-mega-menu .ruby-wrapper li > a {
    cursor: pointer !important;
}

/* =============================================================================
   ISSUE 5 — li { margin: 0; padding: 0 }

   Avada: nav li { margin: 0; padding: 0 }

   Resets ruby's own li margin/padding values.
   ruby-main.css already declares these so it rarely causes
   visible problems, but re-declare for the blog nav to be safe.
   ============================================================ */

nav #ruby-mega-menu .ruby-wrapper .ruby-menu-mega-blog-nav > li {
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================================================
   ISSUE 6 — nav li:hover > .sub-menu { visibility:visible; opacity:1 }

   Ruby's dropdown ul elements do not use class="sub-menu",
   but the generic li:hover rule can still interfere with
   z-index or visibility stacking.
   ========================================================================== */

/* Let ruby's own visibility/opacity logic take priority */
nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu > li > ul,
nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu > li > div {
    visibility: hidden;
    opacity: 0;
}

nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu > li:hover > ul,
nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu > li.ruby-open > ul,
nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu > li:hover > div,
nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu > li.ruby-open > div {
    visibility: visible;
    opacity: 1;
}

/* =============================================================================
   ISSUE 7 — img { max-width: 100%; height: auto }

   Avada & WordPress normalize: img { max-width:100%; height:auto }

   Small thumbnail images inside ruby-menu (blog, shop,
   list-with-images) can end up at the wrong size.
   ========================================================================== */

/* Blog 4-column thumbnails */
nav #ruby-mega-menu .ruby-wrapper img.img-inside-blog4col {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
}

/* Blog 3-column and 2-column thumbnails */
nav #ruby-mega-menu .ruby-wrapper img.img-inside-blog3col,
nav #ruby-mega-menu .ruby-wrapper img.img-inside-blog2col {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
}

/* Article list thumbnails */
nav #ruby-mega-menu .ruby-wrapper img.ruby-article-thumb {
    height: auto !important;
}

/* Shop images — preserve aspect ratio */
nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu > li.ruby-menu-mega-shop img {
    max-width: 100% !important;
    height: auto !important;
}

/* Icons inside list-with-images — let ruby control the size */
nav #ruby-mega-menu .ruby-wrapper ul.ruby-list-with-images li a img {
    max-width: none !important;
}

/* =============================================================================
   ISSUE 8 — CRITICAL #2: position:relative conflict
   → Dropdowns open at the width of their parent li

   Avada: nav li { position: relative }

   An absolutely positioned element uses the nearest ancestor
   with position != static as its containing block.
   Ruby's mega/blog/shop divs are position:absolute, so
   Avada's position:relative on every li causes them to anchor
   to the parent <li> instead of .ruby-wrapper, trapping them
   at the li's narrow width.

   Fix:
   - Reset position on all ruby-menu li elements to static
   - Make .ruby-wrapper the sole containing block
   - Classic dropdowns still need position:relative on the
     first-level li (for their own sub-ul positioning)
   ========================================================================== */

/* Strip position:relative from all ruby li elements */
nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu li {
    position: static !important;
}

/* .ruby-wrapper becomes the containing block for all absolute dropdowns */
nav #ruby-mega-menu .ruby-wrapper {
    position: relative !important;
    z-index: 300;
}

/* Classic dropdown (plain ul) — first-level li must be the
   containing block for its child ul.
   Mega / blog / shop types excluded — plain ul only. */
nav #ruby-mega-menu ul.ruby-menu > li:not(.ruby-menu-mega):not(.ruby-menu-mega-blog):not(.ruby-menu-mega-shop) {
    position: relative !important;
}

/* 2nd and 3rd level li items in classic dropdowns also need
   position:relative for their own nested sub-ul */
nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu > li > ul > li,
nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu > li > ul > li > ul > li {
    position: relative !important;
}

/* =============================================================================
   ISSUE 9 — z-index conflict

   Avada header uses z-index: 200.
   Ruby dropdowns must stack above it.
   ========================================================================== */

nav #ruby-mega-menu ul.ruby-menu > li > ul,
nav #ruby-mega-menu ul.ruby-menu > li > div {
    z-index: 301 !important;
}

/* =============================================================================
   ISSUE 10 — nav ul a { display: block }

   Ruby menu uses inline-flex or flex in some places.
   Avada's display:block can override this.
   ========================================================================== */

/* Top-level links stay block (ruby uses block here anyway) */
nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu > li > a {
    display: block !important;
}

/* =============================================================================
   ISSUE 11 — Hamburger button visibility

   Avada's button resets can affect the hamburger button.
   ============================================================ */

nav #ruby-mega-menu .ruby-wrapper .c-hamburger {
    display: none; /* hidden on desktop — ruby-responsive.css handles visibility */
    cursor: pointer !important;
}

/* =============================================================================
   ISSUE 12 — Ruby mobile menu z-index

   Avada elements like the privacy bar use z-index: 99999.
   Ensure the ruby mobile menu stacks above them.
   ========================================================================== */

@media (max-width: 767px) {
    nav #ruby-mega-menu .ruby-wrapper ul.ruby-menu {
        z-index: 100000 !important;
    }
}

/* =============================================================================
   ISSUE 13 — ruby-list-desc spans stacking on top of each other

   Avada: nav ul a { display: block }
   Fix (ISSUE 8): nav ul.ruby-menu li { position: static }

   <span.ruby-list-desc> is position:absolute, positioned
   relative to its parent <li> (e.g. left: 72px, top: ...).
   ISSUE 8's fix resets ALL li positions to static, which
   destroys the containing block for the span.

   Fix: restore position:relative on ruby-list-with-images li
   so the absolute span can anchor to it correctly again.
   ========================================================================== */

nav #ruby-mega-menu .ruby-wrapper ul.ruby-list-with-images li {
    position: relative !important;
}

nav #ruby-mega-menu .ruby-wrapper ul.ruby-list-with-images li span.ruby-list-desc {
    position: absolute !important;
}

/* =============================================================================
   ISSUE 14 — Top-level arrow icon color broken

   Ruby adds a FontAwesome down-arrow via:
     ul.ruby-menu > li > a:after { content: '\f107'; color: inherit; ... }

   Avada declares globally:
     a, a:after, a:before {
       transition-property: color, background-color, border-color;
     }

   This by itself is harmless, but Avada also sets explicit
   color values on nav a elements in some themes, which
   overrides the inherited color on :after pseudo-elements.

   Fix: force the :after pseudo-element to inherit its color
   from the parent <a> so it always matches the link color,
   whether default, hover, or active.
   ========================================================================== */

nav #ruby-mega-menu ul.ruby-menu > li > a:after {
    color: inherit !important;
}

/* ISSUE 15 — ruby-col */
#ruby-mega-menu div.ruby-wrapper div.ruby-grid div.ruby-row div[class*="ruby-col-"] {
    display: block !important;
    float: left !important;
    box-sizing: border-box !important;
}

#ruby-mega-menu div.ruby-wrapper div.ruby-grid div.ruby-row {
    display: block !important;
    float: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ── FSE theme stacking context fix ───────────────────────────────────────────
   FSE block wrappers (wp-block-group, wp-block-template-part) often
   create stacking contexts that trap dropdown z-indexes inside them.
   We break out by forcing isolation on the menu header and resetting
   any stacking context on common FSE wrappers around the menu.      */

/* Break the stacking context of FSE block wrappers containing our menu */
.wp-block-template-part:has(#ruby-mega-menu),
.wp-block-group:has(#ruby-mega-menu) {
    isolation: auto !important;
    transform: none !important;
    will-change: auto !important;
    contain: none !important;
    z-index: auto !important;
    position: static !important;
}

/* Ensure dropdowns escape any remaining stacking context */
#ruby-mega-menu ul.ruby-menu > li > ul,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega > div,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div,
#ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div {
    z-index: 999999 !important;
}

/* FSE themes (ul > li > a) sizing fix */
#ruby-mega-menu ul a,
#ruby-mega-menu ul li a {
    box-sizing: border-box;
}