/*Estilos para el menu desk y movil*/


.mega-menu-img * {
  -ms-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.img-menu-heading {
  font-weight: 500;
}

/* .img-menu-action:hover span,
.main-menu .menu-list-item.active .nav-link,
.main-menu .menu-list-item:hover .nav-link,
.main-menu .nav-text-sub:hover {
  color: var(--primary-color);
} */

.img-menu-action:hover .icon-right-long {
  fill: var(--primary-color);
}

.nav-link-sub:hover img.menu-img {
  -webkit-filter: brightness(0.9);
  filter: brightness(0.9);
}

.main-menu .nav-link {
  padding: 0;
}

.drawer-heading {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 20px;
  color: var(--body-color);
}

.nav-link {
  cursor: pointer;
}

.menu-list-item {
  width: 100%;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#menu-desk-version .menu-list-item {
  border: none;
  font-size: 18px;
}

.offcanvas-wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  /* overflow: hidden; */
}

.offcanvas.show .menu-list-item.active .submenu-transform {
  /* -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); */
  display: block;
} 



/*************************/
/* ESTILOS DESKTOP START */
/*************************/

@media (min-width: 992px) {
  #drawer-menu-desk {
    /* width: 89%; */
    height: 90vh;
  }

  .main-menu .menu-list-item.active .icon,
  .main-menu .menu-list-item:hover .open-submenu,
  .main-menu .menu-level-2:hover .icon,
  .btn-menu-back:hover .icon {
    stroke: var(--primary-color);
  }

  .btn-menu-back:hover span {
    color: var(--primary-color);
  }

  .header-bottom {
    position: relative;
  }

  .nav-item-sub {
    padding: 8px 30px;
  }

  .submenu {
    /* padding: 10px 0; */
    max-height: 90vh;
    overflow-y: auto;
  }

  .main-menu {
    width: 90% !important;
    overflow-y: auto;
  }

  .main-menu>.menu-list-item {
    /* padding: 12px 20px;
    cursor: pointer; */
  }

  .header-1 .main-menu>.menu-list-item {
    /* padding: 28px 20px;
    cursor: pointer; */
  }

  .main-menu-2>.menu-list-item {
    padding: 29px 20px;
  }

  .has-dropdown {
    position: relative;
  }

  .mega-menu-header {
    -ms-display: flex;
    -webkit-display: flex;
    display: -webkit-box;
    display: flex;
    -ms-align-items: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
  }

  .open-submenu {
    /* padding-left: 5px; */
  }

  .submenu-transform {
    /* position: absolute;
    z-index: 99;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    top: 90%;
    left: 0;
    width: auto;
    min-width: 200px; */
  }

  .has-megamenu .submenu-transform {
    /* width: 100%;
    background-color: #fff; */
  }

  .has-dropdown .submenu-transform {
    left: -10px;
  }

  .megamenu-container {
    /* -ms-display: flex;
    -webkit-display: flex;
    display: -webkit-box;
    display: flex;
    -ms-justify-content: center;
    -webkit-justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 0 35px;
    margin-left: -40px; */
  }

  .megamenu-container>.nav-item-sub {
    width: auto;
    min-width: 20%;
    padding: 0;
    padding-left: 40px;
    padding-top: 60px;
  }

  .has-megamenu .megamenu-transform {
    position: relative;
    top: 0;
    left: 0;
    border: none;
  }

  .has-megamenu .megamenu-transform .nav-item-sub {
    padding: 20px 0 0;
  }

  .submenu-transform>.container {
    padding: 0;
  }

  .megamenu-heading,
  .megamenu-heading:focus,
  .megamenu-heading:hover {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    /* border-bottom: 1px solid #ccc; */
    margin-bottom: 7px;
    /* text-transform: uppercase; */
  }

  .submenu-transform-desktop {
    /* opacity: 0;
    visibility: hidden;
    -ms-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; */
    display: none;
    position: absolute;
    top: 0;
    left: 400px;
    width: calc(100vw - 500px);
    background-color: white;
    min-height: 90vh;
    /* max-width: 100%;
    width: 1400px; */
  }

  .submenu .menu-list-item {
    padding-left: 0rem !important;
  }

  .menu-list-item:hover .submenu-transform-desktop {
    /* opacity: 1;
    visibility: visible;
    top: 100%; */
  }

  .menu-list-item.active {
    /* background: linear-gradient(90deg, rgba(43,42,42,0.8) 0%, rgba(43,42,42,1) 100%); */
    background: linear-gradient(90deg, rgba(167,208,45,0.8) 0%, rgba(167,208,45,1) 100%);
    border-radius: 0px 50px 50px 0px;
  }

  .menu-list-item.active .menu-cat-title,
  .menu-list-item.active .mega-menu-header .nav-link {
    color: white !important;
  }

  .cat-root-title {
    font-size: 18px;
    font-weight: bold;
  }

  .category-item {
    padding-top: 15px !important;
  }

  .menu-first-link {
    width: 100%;
  }
}

/***********************/
/* ESTILOS DESKTOP END */
/***********************/


/***********************/
/* ESTILOS MÓVIL START */
/***********************/

@media (max-width: 991px) {
  .main-menu .menu-list-item.active>.mega-menu-header .icon,
  .main-menu .menu-list-item:hover>.mega-menu-header .icon {
    stroke: var(--secondary-color);
  }

  .submenu-transform>.container {
    padding: 0;
  }

  .offcanvas-wrapper {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }

  .navbar-nav .dropdown-menu {
    /* position: fixed; */
    border: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    max-width: 400px;
    background: red;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    -ms-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -ms-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }

  .navbar-nav .dropdown-menu.active {
    opacity: 1;
    visibility: visible;
    -ms-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }

  .nav-item-sub {
    color: #000;
    font-weight: 500;
    font-size: 15px;
  }

  .open-submenu {
    /* display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; */
  }

  .submenu-transform {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 400px;
    height: 100%;
    -webkit-transform: translate3d(400px, 0, 0);
    transform: translate3d(400px, 0, 0);
    -webkit-transition: -webkit-transform 0.35s;
    transition: -webkit-transform 0.35s;
    -o-transition: transform 0.35s;
    transition: transform 0.35s;
    transition: transform 0.35s, -webkit-transform 0.35s;
    z-index: 1;
    overflow: hidden;
    background-color: #fff;
  }

  .submenu-transform.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .menu-list-item {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .icon-menu-back {
    margin-left: -.7rem;
    margin-right: 7px;
  }

  .nav-text-sub {
    font-size: 13px;
    font-weight: 500;
  }

  .mega-menu-header {
    /* -ms-display: flex;
    -webkit-display: flex;
    display: -webkit-box;
    display: flex;
    -ms-align-items: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-justify-content: space-between;
    -webkit-justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between; */
  }

  .utilty-icon-wrapper {
    display: inline-block;
    margin-right: 7px;
  }

  .utility-menu>li {
    padding: 0.8rem 1rem;
  }

  .utilty-menu-item .icon {
    width: 18px;
    height: 18px;
  }

  .utilty-menu-item .icon-phone {
    width: 21px;
    height: 21px;
  }
}

@media (max-width: 991px) {
  .fa-whatsapp {
    margin-left: 0 !important;
  }

  .header-action-item.header-wishlist {
    padding: 0 !important;
  }
}

/**********************/
/* ESTILOS MÓVIL END */
/**********************/