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

/* ========================================================================== */
/* ############################ RESPONSIVE STYLES ########################### */

/* ─── SMALL DEVICES GENERAL STRUCTURE  ───────────────────────────────────── */
@media(max-width:1023px){
  #ruby-mega-menu div.ruby-menu-header{
  }

  #ruby-mega-menu div.ruby-menu-description{
    position: absolute;
    width: 100%;
    max-width: 100%;
    display: none;
    visibility: hidden;
  }

  #ruby-mega-menu div.ruby-wrapper{
    position: absolute;
    width: 100%;
    height: 50px;
    top: 0;
    background-color: rgba(0, 0, 0, 0.4);
  }

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

  #ruby-mega-menu div.ruby-wrapper.ruby-menu-full-width > ul.ruby-menu{
    width: 100%;
  }

  /* Reset transparent menu active menu item padding */
  #ruby-mega-menu div.ruby-wrapper ul.ruby-menu > li.ruby-active-menu-item > a{
    padding-left: 65px;
    color: #000;
  }
  #ruby-mega-menu .ruby-menu-transparent ul.ruby-menu > li.ruby-active-menu-item > a{
    padding-left: 65px;
    color: #000;
  }

  #ruby-mega-menu span.ruby-logo-container{
    position: absolute;
    width: 100%;
    height: 60px;
    text-align: center;
    z-index: 0;
  }

  #ruby-mega-menu img.ruby-logo{
    float: none;
    max-height: 26px;
    margin: 12px 10px;
  }
  /* ─── CLASSIC DROPDOWN 1ST LEVEL  ──────────────────────────────────────── */
  #ruby-mega-menu div.ruby-wrapper > ul{
    position: absolute;
    top: 50px;
    width: 100%;
    border-bottom: 4px solid #19ad86;
  }

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

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

  #ruby-mega-menu ul.ruby-menu > li > a{
    padding: 0 65px;
    background: #e5e5e5;
    color: #333;
    line-height: 50px;
  }

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

  #ruby-mega-menu ul.ruby-menu > li > a:hover,
  #ruby-mega-menu ul.ruby-menu > li:hover > a,
  #ruby-mega-menu ul.ruby-menu > li.ruby-active-menu-item > a:hover{
    background: #5dd5b5;
    color: #000;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-active-menu-item > a{
    background: #b2b2b2;
  }

  #ruby-mega-menu .ruby-menu-transparent ul.ruby-menu > li > a:hover,
  #ruby-mega-menu .ruby-menu-transparent ul.ruby-menu > li:hover > a,
  #ruby-mega-menu .ruby-menu-transparent ul.ruby-menu > li.ruby-active-menu-item > a:hover,
  #ruby-mega-menu .ruby-menu-transparent ul.ruby-menu > li.ruby-active-menu-item:hover > a{
    color: #000;
  }

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

  /* ─── CLASSIC DROPDOWN 2ND LEVEL  ──────────────────────────────────────── */
  #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: relative;
    width: 100%;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-top: none;
  }

  /* Reset right-aligned item sublevel offset on mobile — desktop rule
     pushes ruby-menu-right > ul > li > ul to right:170px which makes
     sublevels appear off-screen in the mobile drawer. Override that
     so sublevels stack normally full-width. */
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-right > ul,
  #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{
    right: auto;
    left: auto;
    width: 100%;
  }

  #ruby-mega-menu ul.ruby-menu > li,
  #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;
  }

  #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{
    width: 100%;
    line-height: 50px;
    padding: 0 80px;
    background: #edecec; /* 2nd level background */
    color: #222;
  }

  #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: #d9d9d9; /* 2nd level background:hover */
    color: #111;
  }

  /* ─── 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: auto;
    top: auto;
    z-index: auto;
  }

  #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: auto;
  }

  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > a{
    background: #f8f8f8; /* 3rd level background */
    padding: 0 95px;
    color: #222;
  }

  #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{
    background: #efefef; /* 3rd level background:hover */
    color: #111;
  }

  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li > a{
    background: #fff; /* 4th level background */
    padding: 0 110px;
    color: #222;
  }

  #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: #fff; /* 4th level background:hover */
    color: #111;
  }

  /* ─── CLASSIC MEGA MENU ────────────────────────────────────────────────── */
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop{
    position: relative;
  }

  #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: relative;
    top: auto;
    left: auto;
    border-top: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  /* ─── BLOG TYPE MEGA MENU ──────────────────────────────────────────────── */
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav{
    width: 100%;
    height: auto;
    left: auto;
    top: auto;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li{
    position: relative;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > a{
    line-height: 50px;
    padding: 0 75px;
    background: #EDECEC;
    color: #222;
  }

  #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: #EDECEC;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div{
    position: relative;
    width: 100%;
    min-height: auto;
    left: auto;
    top: auto;
    z-index: auto;
    background: #F8F8F8;
  }

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

  /* ─── SHOPPING TYPE MEGA MENU ──────────────────────────────────────────── */
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div{
    position: relative;
    text-align: left;
  }
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul{
    position: relative;
    border: none;
    font-size: 14px;
    margin-bottom: -1px; /* bug-fix */
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li{
    position: relative;
    display: block;
    margin-top: -1px; /* bug-fix */
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a{
    padding: 0px 80px;
    line-height: 50px;
    max-height: 50px;
    text-transform: none;
    font-weight: normal;
    background: #EDECEC;
    color: #222;
    border: none;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li.ruby-active-menu-item > a{
    background: #EDECEC;
  }

  #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{
    background: #d9d9d9;
  }

  /* ─── SHOPPING CATEGORY UPPERLINE & UNDERLINE EFFFECT ──────────────────── */
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a{
    display: block;
  }

  /* ─── SHOPPING CATEGORY CONTENT ────────────────────────────────────────── */
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div{
    position: relative;
    top: 0;
    z-index: 9999;
    margin: 0;
    background: #F8F8F8;
  }
  #ruby-mega-menu .ruby-menu-mega-shop h3.ruby-list-heading.ruby-image-list{
    margin-top: 0;
  }

  /* ─── SOCIAL ICONS ─────────────────────────────────────────────────────── */
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-social > a{
    border: none;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-social img{
    display: inline-table;
    position: absolute;
    top: 15px;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-social > a{
    width: 100%;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-social .fa{
    position: absolute;
    top: 17px;
  }

  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-social span{
    line-height: 50px;
    padding: 0 25px;
  }

  #ruby-mega-menu span.ruby-menu-social-cart{
    position: absolute;
    right: 10px;
    line-height: 25px;
  }

  /* ─── RUBY MENU HIDE/SHOW SUBMENUS - MOBILE ────────────────────────────── */
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul,
  #ruby-mega-menu ul.ruby-menu > li > ul,
  #ruby-mega-menu ul.ruby-menu,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega > div,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > 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{
      max-height: 0;
      transform: scaleY(0);
      overflow: hidden;
  }

  #ruby-mega-menu ul.ruby-menu > li > ul.ruby-mobile-sublevel-show,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul.ruby-mobile-sublevel-show,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul.ruby-mobile-sublevel-show,
  #ruby-mega-menu ul.ruby-menu.ruby-mobile-sublevel-show,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega > div.ruby-mobile-sublevel-show,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div.ruby-mobile-sublevel-show,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div.ruby-mobile-sublevel-show,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div.ruby-mobile-sublevel-show,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div.ruby-mobile-sublevel-show{
    max-height: 20000px;
    transform: scaleY(1);
    overflow: visible;
  }

  /* Disable all transitions in mobile — prevents animated open on max-height/scaleY change */
  #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,
  #ruby-mega-menu ul.ruby-menu > li > div,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > div,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > div{
    transition: none !important;
  }

  /* ─── RUBY MENU DROPDOWN TOGGLE - MOBILE ───────────────────────────────── */
  #ruby-mega-menu span.ruby-dropdown-toggle{
    position: absolute;
    width: 50px;
    height: 50px;
    max-width: 50px;
    max-height: 50px;
    left: 0;
    top: 0;
    padding: 10px 17px;
    z-index: 1000000;
    cursor: pointer;
    display: inline-block;
    line-height: 1;
  }

  #ruby-mega-menu span.ruby-dropdown-toggle::after {
    font-family: "FontAwesome";
    text-decoration: none;
    content: '\f107';
    color: #fff;
    font-size: 25px;
    right: 0;
    display: inline-block;
    transition: transform 0.2s ease;
  }

  #ruby-mega-menu span.ruby-dropdown-toggle.ruby-dropdown-toggle-rotate::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 > a:before,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > a:before,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > a:before,
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li > a:before,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > a:before,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:before{
    content: "";
    width: 50px;
    height: 50px;
    background: #333;
    position: absolute;
    left: 0;
    top: 0;
  }

  #ruby-mega-menu ul.ruby-menu > li > ul > li > a:before,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-blog > div > ul.ruby-menu-mega-blog-nav > li > a:before,
  #ruby-mega-menu ul.ruby-menu > li.ruby-menu-mega-shop > div > ul > li > a:before{
    background: #555;
  }
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > a:before{
    background: #777;
  }
  #ruby-mega-menu ul.ruby-menu > li > ul > li > ul > li > ul > li > a:before{
    background: #999;
  }


  /* ─── RUBY MENU HAMBURGER ICON ─────────────────────────────────────────── */
  #ruby-mega-menu .c-hamburger{
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 50px;
    /* Reset Astra/theme global button styles */
    border-style: none !important;
    border-width: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    height: 50px;
    font-size: 0;
    text-indent: -9999px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    border-radius: none;
    border: none;
    cursor: pointer;
    z-index: 999;
    -webkit-transition: background 0.3s;
            transition: background 0.3s;
  }

  #ruby-mega-menu .c-hamburger:focus{
    outline: none;
  }

  #ruby-mega-menu .c-hamburger span{
    display: block;
    position: absolute;
    top: 24px;
    left: 8px;
    right: 8px;
    height: 3px;
    background: white;
  }

  #ruby-mega-menu .c-hamburger span::before,
  #ruby-mega-menu .c-hamburger span::after{
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #fff;
    content: "";
  }

  #ruby-mega-menu .c-hamburger span::before{
    top: -10px;
  }

  #ruby-mega-menu .c-hamburger span::after{
    bottom: -10px;
  }

  /**
   * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
   * down to center and transform into an "x".
   */
  #ruby-mega-menu .c-hamburger--htx{
    background-color: #19ad86;
  }

  #ruby-mega-menu .c-hamburger--htx span{
    -webkit-transition: background 0s 0.3s;
            transition: background 0s 0.3s;
  }

  #ruby-mega-menu .c-hamburger--htx span::before,
  #ruby-mega-menu .c-hamburger--htx span::after{
    -webkit-transition-duration: 0.3s, 0.3s;
            transition-duration: 0.3s, 0.3s;
    -webkit-transition-delay: 0.3s, 0s;
            transition-delay: 0.3s, 0s;
  }

  #ruby-mega-menu .c-hamburger--htx span::before{
    -webkit-transition-property: top, -webkit-transform;
            transition-property: top, transform;
  }

  #ruby-mega-menu .c-hamburger--htx span::after{
    -webkit-transition-property: bottom, -webkit-transform;
            transition-property: bottom, transform;
  }

  /* active state, i.e. menu open */
  #ruby-mega-menu .c-hamburger--htx.is-active{
    background-color: #333333;
  }

  #ruby-mega-menu .c-hamburger--htx.is-active span{
    background: none;
  }

  #ruby-mega-menu .c-hamburger--htx.is-active span::before{
    top: 0;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }

  #ruby-mega-menu .c-hamburger--htx.is-active span::after{
    bottom: 0;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }

  #ruby-mega-menu .c-hamburger--htx.is-active span::before,
  #ruby-mega-menu .c-hamburger--htx.is-active span::after{
    -webkit-transition-delay: 0s, 0.3s;
            transition-delay: 0s, 0.3s;
  }

  /* ─── HIDE DIVIDERS ON MOBILE ──────────────────────────────────────────── */
  #ruby-mega-menu ul.ruby-menu.ruby-menu-dividers > li,
  #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,
  #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: none;
  }

  /* ─── CONTENT GRID ─────────────────────────────────────────────────────── */
  /* ─── DESKTOP — LG (1024px and greater) ────────────────────────────────── */
  #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-lg-1{ width: 8.33%; }
  #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-lg-2{ width: 16.66%; }
  #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-lg-3{ width: 25%; }
  #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-lg-4{ width: 33.33%; }
  #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-lg-5{ width: 41.66%; }
  #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-lg-6{ width: 50%; }
  #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-lg-7{ width: 58.33%; }
  #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-lg-8{ width: 66.66%; }
  #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-lg-9{ width: 75%; }
  #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-lg-10{ width: 83.33%; }
  #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-lg-11{ width: 91.66%; }
  #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-lg-12{ width: 100%; }

/* ────────────────────────────────────────────────────────────────────────── */

}

/* ─── END: SMALL DEVICES GENERAL STRUCTURE  ──────────────────────────────── */



  /* ─── TABLET PORTRAIT — MD (768px – 1023px) ────────────────────────────── */
  @media (max-width: 1023px) {
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-md-1{ width: 8.33%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-md-2{ width: 16.66%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-md-3{ width: 25%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-md-4{ width: 33.33%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-md-5{ width: 41.66%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-md-6{ width: 50%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-md-7{ width: 58.33%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-md-8{ width: 66.66%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-md-9{ width: 75%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-md-10{ width: 83.33%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-md-11{ width: 91.66%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-md-12{ width: 100%; }
    #ruby-mega-menu .hidden-tablet{ visibility: hidden; }
    /* Shop Mega */
    #ruby-mega-menu li.ruby-menu-mega-shop div.ruby-grid > .ruby-row:last-child{
      padding-bottom: 30px;
    }
    #ruby-mega-menu li.ruby-menu-mega-shop div.ruby-grid > .ruby-row ul{
      padding: 10px 30px;
    }
    #ruby-mega-menu li.ruby-menu-mega-shop div.ruby-grid > .ruby-row h3.ruby-list-heading{
      font-size: 16px;
      margin: 30px;
      margin-bottom: 5px;
    }
    #ruby-mega-menu li.ruby-menu-mega-shop div.ruby-grid > .ruby-row img{
      padding: 30px;
      padding-bottom: 0;
    }
    /* Blog Mega */
    #ruby-mega-menu li.ruby-menu-mega > div.ruby-grid > .ruby-row{
      padding: 30px;
    }
    #ruby-mega-menu li.ruby-menu-mega > div.ruby-grid > .ruby-row h3.ruby-list-heading{
      font-size: 16px;
      margin-bottom: 5px;
    }
    #ruby-mega-menu li.ruby-menu-mega > div.ruby-grid > .ruby-row ul li{
      font-size: 14px;
    }
    #ruby-mega-menu .ruby-grid.ruby-blog-4col > .ruby-row{
      margin-bottom: 20px;
    }
    #ruby-mega-menu .ruby-grid.ruby-blog-3col > .ruby-row:last-child{
      margin-bottom: 20px;
    }
    #ruby-mega-menu .ruby-grid.ruby-blog-2col > .ruby-row:last-child{
      margin-bottom: 20px;
    }
    #ruby-mega-menu .ruby-grid.ruby-blog-article-list > .ruby-row:last-child{
      margin-bottom: 15px;
    }


    #ruby-mega-menu .ruby-wrapper img.img-inside-blog4col{
      max-width: 30% !important;
      width: 30% !important;
      max-height: auto !important;
      margin: 20px 5%;
      float: left;
    }
    #ruby-mega-menu .ruby-wrapper img.img-inside-blog3col{
      padding-left: 20%;
      padding-top: 20px;
    }
    #ruby-mega-menu .ruby-wrapper img.img-inside-blog2col{
      padding: 20px;
      padding-bottom: 0;
    }



    #ruby-mega-menu div.ruby-c-inline{
      position: absolute;
      left: 35%;
      width: 50%;
      margin: 20px 5%;
    }

    #ruby-mega-menu div.ruby-c-inline.ruby-c-inline-blog2col{
      display: none;
    }

    #ruby-mega-menu span.ruby-c-title.title-inside-blog4col,
    #ruby-mega-menu span.ruby-c-title.title-inside-blog4col a{
      margin-top: 50px;
      font-size: 16px;
    }

    #ruby-mega-menu span.ruby-c-title.title-inside-blog3col,
    #ruby-mega-menu span.ruby-c-title.title-inside-blog3col a{
      padding-top: 20px;
      padding-left: 0px;
      font-size: 16px;
    }

    #ruby-mega-menu span.ruby-c-category,
    #ruby-mega-menu span.ruby-c-category a{
      font-size: 13px;
    }

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

    #ruby-mega-menu span.ruby-c-category.cat-inside-blog3col,
    #ruby-mega-menu span.ruby-c-category.cat-inside-blog3col a{
      padding-left: 0;
    }

    #ruby-mega-menu span.ruby-c-date.date-inside-blog3col,
    #ruby-mega-menu span.ruby-c-date.date-inside-blog3col a{
      padding-left: 0;
    }

    #ruby-mega-menu span.ruby-c-title.title-inside-blog-2col,
    #ruby-mega-menu span.ruby-c-title.title-inside-blog-2col a{
      margin-top: 20px;
      padding-right: 20px;
      font-size: 14px;
    }

    #ruby-mega-menu span.ruby-c-content{
      width: 60%;
      margin-left: 40%;
      font-size: 14px;
      line-height: 25px;
      padding-right: 5%;
    }

    #ruby-mega-menu .ruby-blog-article-list{
      margin-bottom: 20px;
    }
    #ruby-mega-menu .ruby-article-item{
      margin-top: 10px;
      margin-left: 20px;
      margin-right: 10px;
    }
    #ruby-mega-menu .ruby-article-thumb{
      width: 60px;
      height: 60px;
    }

    /* Remove gradient grid seperators for mobile */
    #ruby-mega-menu div.ruby-grid.ruby-grid-lined > div.ruby-row:after{
      height: 0;
      background: none;
    }
    #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{
      width: 0;
      background: none;
    }
  }
  /* ─── END: TABLET PORTRAIT — MD (768px – 1023px) ───────────────────────── */

  /* ─── MOBILE — SM (767px and less) ─────────────────────────────────────── */
  @media (max-width: 767px) {
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-sm-1{ width: 8.33%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-sm-2{ width: 16.66%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-sm-3{ width: 25%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-sm-4{ width: 33.33%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-sm-5{ width: 41.66%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-sm-6{ width: 50%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-sm-7{ width: 58.33%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-sm-8{ width: 66.66%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-sm-9{ width: 75%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-sm-10{ width: 83.33%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-sm-11{ width: 91.66%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-sm-12{ width: 100%; }
    #ruby-mega-menu .hidden-phone{ visibility: hidden; }

    #ruby-mega-menu li.ruby-menu-mega-blog div.ruby-grid > .ruby-row:last-child{
      padding-top: 0;
      padding-bottom: 20px;
      margin: 0;
    }

    /* ruby blog mega title, category and date */
    #ruby-mega-menu div.ruby-c-inline{
      position: absolute;
      left: 35%;
      width: 50%;
      margin: 20px 5%;
    }
    #ruby-mega-menu span.ruby-c-category,
    #ruby-mega-menu span.ruby-c-category a{
      font-size: 13px;
    }

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

    #ruby-mega-menu span.ruby-c-content{
      font-size: 14px;
      line-height: 25px;
      padding-right: 5%;
    }

    /* Ruby shop mega - collections */
    #ruby-mega-menu li.ruby-menu-mega-shop div.ruby-grid.ruby-shop-collections > .ruby-row{
      padding: 30px;
      padding-bottom: 0;
    }
    #ruby-mega-menu li.ruby-menu-mega-shop div.ruby-grid.ruby-shop-collections > .ruby-row:last-child{
      padding-top: 0;
      padding-bottom: 30px;
    }
    #ruby-mega-menu li.ruby-menu-mega-shop div.ruby-grid.ruby-shop-collections > .ruby-row img{
      padding: 0;
    }

    /* classic mega */
    #ruby-mega-menu li.ruby-menu-mega > div.ruby-grid > .ruby-row ul{
    }

    /* ruby blog mega 4 col */
    #ruby-mega-menu .ruby-grid.ruby-blog-4col > .ruby-row:last-child{
      margin-bottom: 20px;
    }
    #ruby-mega-menu span.ruby-c-title.title-inside-blog4col,
    #ruby-mega-menu span.ruby-c-title.title-inside-blog4col a{
      margin-top: 50px;
      font-size: 16px;
    }
    #ruby-mega-menu .ruby-wrapper img.img-inside-blog4col{
      max-width: 30% !important;
      height: auto !important;
      width: 30% !important;
      margin: 20px 5%;
      float: left;
    }

    /* ruby blog mega 3 col */
    #ruby-mega-menu .ruby-grid.ruby-blog-3col > .ruby-row:last-child{
      margin-bottom: 25px;
    }
    #ruby-mega-menu .ruby-wrapper img.img-inside-blog3col{
      max-height: 120px; /* change if you need */
    }
    #ruby-mega-menu span.ruby-c-title.title-inside-blog3col,
    #ruby-mega-menu span.ruby-c-title.title-inside-blog3col a{
      padding-top: 20px;
      padding-left: 5px;
      font-size: 16px;
    }
    #ruby-mega-menu span.ruby-c-category.cat-inside-blog3col,
    #ruby-mega-menu span.ruby-c-category.cat-inside-blog3col a{
      padding-left: 5px;
    }

    #ruby-mega-menu span.ruby-c-date.date-inside-blog3col,
    #ruby-mega-menu span.ruby-c-date.date-inside-blog3col a{
      padding-left: 10px;
    }

    /* ruby blog mega 2 col */
    #ruby-mega-menu .ruby-grid.ruby-blog-2col > .ruby-row:last-child{
      margin-bottom: 30px;
    }
    #ruby-mega-menu .ruby-wrapper img.img-inside-blog2col{
      max-height: 120px; /* change if you need */
      padding: 20px;
      padding-bottom: 0;
    }
    #ruby-mega-menu span.ruby-c-title.title-inside-blog-2col,
    #ruby-mega-menu span.ruby-c-title.title-inside-blog-2col a{
      margin-top: 30px;
      padding-right: 20px;
      font-size: 16px;
    }

    /* ruby blog mega article list */
    #ruby-mega-menu .ruby-grid.ruby-blog-articles > .ruby-row > .ruby-col-sm-12{
      padding: 20px;
      padding-bottom: 0;
    }
    #ruby-mega-menu .ruby-grid.ruby-blog-articles > .ruby-row > .ruby-col-sm-12:last-child{
      padding-top: 0;
      padding-bottom: 20px;
    }

    /* Remove gradient grid seperators for mobile */
    #ruby-mega-menu div.ruby-grid.ruby-grid-lined > div.ruby-row:after{
      height: 0;
      background: none;
    }
    #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{
      width: 0;
      background: none;
    }
    /* Search mobile */
    #ruby-mega-menu span.ruby-menu-search{
      right: 50px;
    }

    #ruby-mega-menu span.ruby-menu-search > a:hover,
    #ruby-mega-menu span.ruby-menu-search > a:hover{
      width: 80px;
    }

    #ruby-mega-menu span.ruby-menu-search > a > span input,
    #ruby-mega-menu span.ruby-menu-search > a > span input{
      right: 0;
      margin-right: 10px;
      background: none;
      color: #efefef;
      border: none;
      font-size: 14px;
    }

    #ruby-mega-menu span.ruby-menu-search > a > span input:focus{
      outline: none;
      color: #efefef;
    }

    #ruby-mega-menu span.ruby-menu-search > a > span input::-webkit-input-placeholder{
      color: #efefef;
    }
  }
  /* ─── END: MOBILE — SM (767px and less) ────────────────────────────────── */

  /* ─── MOBILE PHONE — XS (430px and less) ───────────────────────────────── */
  @media (max-width: 430px) {
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-xs-1{ width: 8.33%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-xs-2{ width: 16.66%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-xs-3{ width: 25%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-xs-4{ width: 33.33%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-xs-5{ width: 41.66%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-xs-6{ width: 50%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-xs-7{ width: 58.33%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-xs-8{ width: 66.66%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-xs-9{ width: 75%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-xs-10{ width: 83.33%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-xs-11{ width: 91.66%; }
    #ruby-mega-menu div.ruby-grid > div.ruby-row div.ruby-col-xs-12{ width: 100%; }
    #ruby-mega-menu .hidden-phone{ visibility: hidden; }
  }
  /* ─── END: MOBILE PHONE — XS (430px and less) ──────────────────────────── */

  /* ─── OVERRIDING MENU WIDTH FOR MOBILE VIEW ────────────────────────────── */
  @media (max-width: 1194px) {

    #ruby-mega-menu div.ruby-menu-description{
      max-width: 980px;
    }
    #ruby-mega-menu div.ruby-wrapper{
      max-width: 980px;
    }
    #ruby-mega-menu div.ruby-wrapper.ruby-menu-full-width>ul.ruby-menu{ max-width: 980px}
    #ruby-mega-menu div.ruby-wrapper > ul.ruby-menu{
      max-width: 980px;
    }
  }

  /* ─── WORDPRESS THEMES FIXES  ─────────────────────────────────────────────*/
  /* ─── Astra/theme mobile panel integration ──────────────────────────
     When menu renders inside a theme's mobile flyout panel
     (ast-mobile-header-content, ast-builder-menu-mobile, etc.)
     hide our hamburger button — the theme already provides one.
     The menu list itself stays visible (no collapse needed).        */
  .ast-mobile-header-content #ruby-mega-menu .c-hamburger,
  .ast-builder-menu-mobile #ruby-mega-menu .c-hamburger,
  .ast-desktop-header-content #ruby-mega-menu .c-hamburger {
    display: none !important;
  }

  /* Inside theme mobile panel: show the menu list always expanded */
  .ast-mobile-header-content #ruby-mega-menu .ruby-wrapper > ul.ruby-menu,
  .ast-builder-menu-mobile #ruby-mega-menu .ruby-wrapper > ul.ruby-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* ─── Mobile scroll fix ─────────────────────────────────────────────────────
     Menu is teleported to <body> with position:absolute so it sits at
     the top of the page and scrolls naturally with the document.
     Body scroll lock is no longer needed.                                    */

  /* Admin bar offsets */
  .admin-bar body > #ruby-mega-menu {
    top: 32px !important;
  }

  @media screen and (max-width: 782px) {
    .admin-bar body > #ruby-mega-menu {
      top: 46px !important;
    }
  }
  /* ─── END: Mobile scroll fix ───────────────────────────────────────────── */