/* stylelint-disable no-descending-specificity */

:root {
 --desktop-submenu-wrapper-width: 366px;
 --desktop-large-panel-width: 100%;
 --desktop-panel-min-height: 100svh;
 --desktop-panel-max-height: 100svh;
 --desktop-header-height: 97px;
 --desktop-submenu-padding-horizontal: 48px 40px;
 --desktop-submenu-padding: 48px 40px;
 --default-menu-font: var(--type-display-2-font);
 --default-menu-letter-spacing: var(--type-display-2-letter-spacing);
 --default-menu-level1-font: var(--type-display-3-font);
 --default-menu-level1-letter-spacing: var(--type-display-3-letter-spacing);
 --default-menu-level2-font: var(--type-headline-1-font);
 --default-menu-level2-letter-spacing: var(--type-headline-1-letter-spacing);
 --default-menu-level3-font: var(--type-body-1-default-font);
 --default-menu-level3-letter-spacing: var(--type-body-1-default-letter-spacing);
 --li-menu-padding: 12px 0;
}

/* ---------- BASE ---------- */
.img-brand {
 display: none;
}

.brands .submenu-title {
 display: none;
}

header nav .nav-sections .brands > .submenu-wrapper > .level-1 > .submenu-title {
 display: block;
}

header nav .nav-sections ul > li.nav-drop.brands .submenu-title a {
   margin: 0;
}

.nav-links div > a {
 display: flex;
 align-items: center;
 column-gap: 16px;
 font: var(--type-select-1-font);
 line-height: 1;
 letter-spacing: var(--type-body-2-default-font);
 position: relative;
}

.brands ul.level-2 {
 display: grid;
 grid-template-columns: repeat(var(--brands-grid-columns, auto-fit), 106px);
 gap: 40px 49px;
 justify-content: center;

 .img-brand {
  display: block;
 }

 a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  color: var(--color-black-100);

  span {
   flex-grow: 1;
   display: flex;
   align-items: center;
  }
 }
}

.desktop-link {
 display: none;
}

.label-container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
}

.nav-links {
 background: var(--color-gray-25);
 padding: 32px 16px;
 row-gap: 24px;
}

.submenu-header.level-1 {
 display: none;
}

.nav-links div > a::after {
 content: url('../../../../icons/ultaIcons/menu-right.svg');
 position: absolute;
 right: 0;
}

.nav-links img {
 vertical-align: middle;
}

.nav-links .account-register-login a::before {
 content: url('../../../../icons/user.svg');
 height: 20px;
 width: 20px;
 display: block;
}

header nav .nav-sections ul {
 list-style: none;
 padding-left: 0;
 margin: 0;
}

header nav .nav-sections ul > li ul {
 margin-top: 0;
}

.main-nav a:not(.dropin-design a),
.main-nav p {
 font: var(--default-menu-font);
 letter-spacing: var(--default-menu-letter-spacing);
}

header nav .nav-sections ul > li.nav-drop .submenu-title a {
 display: flex;
 align-items: center;
 column-gap: 8px;
 margin-bottom: 24px;
 text-decoration: none;
}

.main-nav .level-1 {
 --default-menu-font: var(--default-menu-level1-font);
 --default-menu-letter-spacing: var(--default-menu-level1-letter-spacing);
}

.main-nav .level-2 {
 --default-menu-font: var(--default-menu-level2-font);
 --default-menu-letter-spacing: var(--default-menu-level2-letter-spacing);
}

.main-nav .level-3 {
 --default-menu-font: var(--default-menu-level3-font);
 --default-menu-letter-spacing: var(--default-menu-level3-letter-spacing);
}

.submenu-wrapper {
 --submenu-wrapper-background-color: var(--background-color);
}

.main-nav .level-0.brands .level-2 {
   --default-menu-font: var(--type-body-1-default-font);
   --default-menu-letter-spacing: var(--type-body-1-default-letter-spacing);
}

/* Custom layouts */
.level-1.nav-drop.search-by > .label-container {
 p {
  pointer-events: none;
  font: var(--type-details-caption-1-font);
  letter-spacing: var(--type-select-1-letter-spacing);
  color: var(--color-gray-600);
  text-transform: uppercase;
 }


 &::after {
  content: unset;
 }
}

.level-1.nav-drop.search-by > .submenu-wrapper {
 display: block;

 > .submenu-header,
 > .submenu-title {
  display: none;
 }

 .level-2 {
  --default-menu-font: var(--type-body-1-default-font);
  --default-menu-letter-spacing: var(--type-body-1-default-letter-spacing);

  > li {
   --li-menu-padding: 8px 0;
  }
 }
}

.level-0.nav-drop.new[aria-expanded='true'] li.submenu-title,
.level-0.nav-drop.new:has([aria-expanded='true']) li.submenu-title {
 display: block;

 .see-all {
  white-space: pre-line;
 }

 a {
  margin: 0;
 }
}

.level-0.nav-drop.new[aria-expanded='true'] > .submenu-wrapper > ul.level-1,
.level-0.nav-drop.new:has([aria-expanded='true']) > .submenu-wrapper > ul.level-1 {
 li.level-1 > .label-container {
  white-space: pre-line;
 }
}

@keyframes color-slide {
   0% {
       background-color: var(--color-primary-rosy-600);
       right: 100%;
       transform: skewX(0deg);
       width: 60%
   }

   20% {
       right: -20%;
       transform: skewX(-5deg)
   }

   50% {
       right: -20%;
       transform: skewX(-5deg);
       width: 60%
   }

   95% {
       right: 0;
       transform: skewX(0deg)
   }

   100% {
       background-color: var(--color-primary-sunset-300);
       right: 0;
       transform: skewX(0deg);
       width: 0
   }
}

/* ========================================================
   DESKTOP STYLES
======================================================== */
@media (width >= 1024px) {
 .menu-slide {
   animation: color-slide .8s cubic-bezier(.5,0,.15,1) forwards;
   height: 100%;
   position: absolute;
   top: 0;
   z-index: 2;
 }

 .nav-sections a:has(.see-all) svg {
  transition: transform 200ms ease-in-out;
 }

 .nav-sections a:has(.see-all):hover svg {
  transform: translateX(.5rem);
 }
   
 .main-nav-overlay {
  position: fixed;
  top: var(--desktop-header-height);
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-black);
  opacity: .4;
  z-index: 99;
 }

 ul.level-2 .label-container {
  max-width: max-content;
 }

 .search-by ul.level-2 .label-container {
  max-width: unset;
 }

 .label-container {
  height: 100%;
 }

 .label-container:hover::after {
   transform: translateX(.5rem);
 }

 li.level-3 .label-container > a {
   max-width: 100%;
   white-space: break-spaces;
 }

 .submenu-wrapper {
  --submenu-wrapper-left: 0;
 }

 .level-1 .submenu-wrapper {
  --submenu-wrapper-background-color: var(--color-gray-50);
 }

 header nav .nav-sections .submenu-wrapper {
  background-color: var(--submenu-wrapper-background-color);
  box-sizing: border-box;
  left: var(--submenu-wrapper-left, 0);
  top: var(--desktop-header-height);
  z-index: 100;
 }

 header nav .nav-sections .level-0 > .submenu-wrapper {
   width: 0;
   box-sizing: border-box;
 }

 .level-1 > .submenu-wrapper {
  overflow: hidden;
  max-width: 0;
  transition:
    max-width .6s ease-in-out,
    padding-left .6s ease-in-out,
    padding-right .6s ease-in-out;
 }

 .search-by .submenu-wrapper {
  overflow: unset;
  max-width: unset;
 }

 .level-1[aria-expanded='true'] > .submenu-wrapper {
  --submenu-wrapper-left: var(--desktop-submenu-wrapper-width);
  --desktop-header-height: 0;

  position: absolute;
  max-height: 100%;
  overflow-y: auto;
  padding: var(--desktop-submenu-padding);
  max-width: calc(100vw - var(--desktop-submenu-wrapper-width));
  min-height: 100%;
 }

 .level-1.nav-drop > .label-container {
  &::after {
   content: url('../../../../icons/ultaIcons/menu-right.svg');
   height: 16px;
   transition: transform 200ms ease-in-out;
  }
 }

 li.level-2 > .label-container {
  .desktop-link {
   display: block;
  }

  .normal-label {
   display: none;
  }
 }

 header .main-nav {
  --default-menu-font: var(--type-display-5-font);
  --default-menu-letter-spacing: var(--type-body-1-default-letter-spacing);
  --default-menu-level1-font: var(--type-display-3-font);
  --default-menu-level1-letter-spacing: var(--type-display-3-letter-spacing);
  --default-menu-level2-font: var(--type-display-3-font);
  --default-menu-level2-letter-spacing: var(--type-display-3-letter-spacing);
  --default-menu-level3-font: var(--type-display-4-font);
  --default-menu-level3-letter-spacing: var(--type-display-4-letter-spacing);
 }

 header nav .nav-sections .submenu-title,
 header nav .nav-sections .submenu-header {
  display: none;
 }

 .nav-sections a,
 .nav-sections .label-container {
  cursor: pointer;
 }

 header nav .nav-sections .default-content-wrapper > ul > li a {
  text-decoration: none;
 }

 header nav .nav-sections .default-content-wrapper > ul > li ul.level-2 a:hover,
 header nav .nav-sections .default-content-wrapper > ul > li .new.level-1 a:hover {
  text-decoration: underline;
 }

 header nav .nav-sections ul:not(.level-3) {
  display: flex;
  justify-content: center;
 }

 header nav .nav-sections ul.level-0 {
  gap: clamp(1.5rem, -2.699rem + 4.096vw, 1.8rem);
 }

 header nav .nav-sections ul.level-1 {
  gap: 24px;
 }

 header nav .nav-sections ul.level-0,
 header nav .nav-sections .level-0 li.level-0,
 header nav .nav-sections .default-content-wrapper {
  height: 100%;
  align-items: center;
 }

 header nav .nav-sections li.level-0 > .label-container::before {
  background-color: var(--color-black);
  border-radius: .188rem;
  content: '';
  height: .188rem;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  transition: width .2s ease;
  width: 0;
 }

 header nav .nav-sections li.level-0:has([aria-expanded='true']) li.level-1 > .label-container,
 header nav .nav-sections li.level-0:has([aria-expanded='true']) li.level-1 > .label-container a {
  color: var(--color-gray-600);

  &::after {
    filter: invert(47%) sepia(0%) saturate(476%) hue-rotate(216deg) brightness(89%) contrast(83%);
  }
 }

 header nav .nav-sections li.level-0:has([aria-expanded='true']) li.level-1 > .label-container:hover,
 header nav .nav-sections li.level-0:has([aria-expanded='true']) li.level-1 > .label-container:hover a {
  color: var(--color-black);

  &::after {
    filter: unset
  }
 }

 header nav .nav-sections li.level-1[aria-expanded='true'] > .label-container p.normal-label {
  color: var(--color-black);
 }

 header nav .nav-sections li.level-0 li.level-1[aria-expanded='true'] > span.label-container::after {
   filter: unset;
 }

 header nav .nav-sections li.level-0:hover > .label-container::before,
 header nav .nav-sections li.level-0[aria-expanded='true'] > .label-container::before {
  width: 100%;
 }

 header nav .nav-sections .default-content-wrapper > ul > li {
  flex: 0 1 auto;
 }

 header nav .nav-sections .default-content-wrapper > ul > li ul:not(.level-3) {
  display: none;
 }

 /* Open level 1 */
 header nav .nav-sections li.level-0[aria-expanded='true'] ul.level-1,
 header nav .nav-sections .level-0 ul.level-1:has(.level-1[aria-expanded='true']),
 header nav .nav-sections .level-0 .level-1:has(.search-by [aria-expanded='true']) {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden auto;
  padding: var(--desktop-submenu-padding);

  /* Show search by layout */
  /* stylelint-disable */
  .search-by.level-1 > .submenu-wrapper > ul {
   display: flex;
   flex-direction: column;
  }
  /* stylelint-enable */
 }

 /* Submenu level 0 */
 header nav .nav-sections li.level-0[aria-expanded='true'] > .submenu-wrapper,
 header nav .nav-sections .level-0:has(.level-1[aria-expanded='true']) > .submenu-wrapper,
 header nav .nav-sections .level-0:has(.level-2[aria-expanded='true']) > .submenu-wrapper {
  position: absolute;
  width: var(--desktop-submenu-wrapper-width);
  max-height: calc(var(--desktop-panel-max-height) - var(--desktop-header-height));
  height: calc(var(--desktop-panel-min-height) - var(--desktop-header-height));
  box-sizing: border-box;
  transition:
    width .6s cubic-bezier(.5,0,.15,1),
    padding-left .6s cubic-bezier(.5,0,.15,1),
    padding-right .6s cubic-bezier(.5,0,.15,1);
 }

 /* Show see all */
 header nav .nav-sections .nav-drop:not(.brands) [aria-expanded='true'].level-1 > .submenu-wrapper > .submenu-title {
  display: flex;
  margin-bottom: 24px;
 }

 /* Open level 2 */
 header nav .nav-sections .level-1[aria-expanded='true'] .submenu-wrapper > ul.level-2 {
  display: var(--level-2-expanded-display, block);
  column-count: var(--level-2-expanded-column-count, 3);
  max-width: var(--level-2-expanded-max-width, max-content);
  width: var(--level-2-expanded-width, max-content);
  gap: 40px;

  > li {
   margin-bottom: var(--level-2-expanded-li-margin-bottom, 40px);
   break-inside: avoid;
   max-width: 298px;
  }

  li {
   &.level-2 > .label-container {
    height: 100%;

    p,
    a {
     white-space: pre-line;
    }
   }
  }

  /* stylelint-disable */
  ul {
   margin-top: 8px;
  }
  /* stylelint-enable */
 }

 header nav .nav-sections .level-0.brands .level-1[aria-expanded='true'] .submenu-wrapper > ul.level-2 {
  --level-2-expanded-display: grid;
  --level-2-expanded-max-height: unset;
  --level-2-expanded-max-width: 100%;
  --level-2-expanded-width: 568px;
  --level-2-expanded-li-margin-bottom: 0;
  --brands-grid-columns: 4;
 }

 .level-1.search-by > .submenu-wrapper .nav-drop.level-2 > .label-container::after {
  content: url('../../../../icons/ultaIcons/menu-left.svg');
  transform: rotate(180deg);
 }

 /* stylelint-disable */
 .search-by.level-1 {
  a,
  p {
   color: var(--color-gray-600);
  }

  > .label-container {
   margin-bottom: 8px;
   cursor: default;
   pointer-events: none;
  }

  .submenu-wrapper .label-container::after {
    filter: invert(47%) sepia(0%) saturate(476%) hue-rotate(216deg) brightness(89%) contrast(83%);
  }

  li.level-2[aria-expanded='true'] .submenu-wrapper {
    p {
      color: var(--color-black);
    }

    .label-container::after {
      filter: unset;
    }
  }

  .submenu-wrapper .label-container:hover {
    a,
    p {
      color: var(--color-black);
    }

    &::after {
      filter: unset;
    }
  }

  ul.level-2 > li {
   padding: 8px 0;
  }

  .submenu-wrapper {
   --submenu-wrapper-background-color: inherit;

   ul {
    display: none;

    .desktop-link {
     display: none;
    }

    .normal-label {
     display: block;
    }
   }
  }

  .level-2[aria-expanded='true'] {
   .submenu-wrapper {
    --submenu-wrapper-background-color: var(--color-gray-50);
    --submenu-wrapper-left: var(--desktop-submenu-wrapper-width);
    --desktop-header-height: 0;

    position: absolute;
    max-height: 100%;
    height: 100%;
    overflow-y: auto;
    padding: var(--desktop-submenu-padding);
    max-width: max-content;

    a,
    p {
     --default-menu-font: var(--default-menu-level1-font);
     --default-menu-letter-spacing: var(--default-menu-level1-letter-spacing);

     color: var(--color-black);
    }

    .submenu-title {
     display: block;
     margin-bottom: 40px;

     a {
      margin: 0;
     }
    }
   }

   ul.level-3 {
    display: flex;
    flex-direction: column;
    row-gap: 40px;
   }
  }
 }
 /* stylelint-enable */
}

@media (width >= 1024px) and (width <= 1440px) {
 header nav .nav-sections .level-1[aria-expanded='true'] .submenu-wrapper > ul.level-2 {
  --level-2-expanded-column-count: 2;
 }
}


/* ========================================================
   MOBILE STYLES
======================================================== */
@media (width < 1024px) {
 header nav .nav-sections {
  position: relative;
  max-width: calc(100% - 32px);
 }

 /* Level 2 config */
 .main-nav .level-1.nav-drop:not(.search-by) .level-2 {
  --li-menu-padding: 17.5px 0;
 }

 .main-nav .level-1.nav-drop:not(.search-by) .level-2.nav-drop {
  border-bottom: 1px solid var(--color-gray-300);
 }

 .main-nav .level-1.nav-drop:not(.search-by) .level-3 {
  --li-menu-padding: 8px 0;
 }

 /* END Level 2 config */
 header nav .nav-sections ul li {
  padding: var(--li-menu-padding);
 }

 header nav .nav-sections .submenu-title {
  display: none;
 }

 header nav .nav-sections ul > li.nav-drop {
  cursor: pointer;
 }

 header nav .nav-sections ul > li.nav-drop > .label-container::after {
  content: url('../../../../icons/ultaIcons/menu-right.svg');
  height: 16px;
 }

 /* Level 2 icons */
 header nav .nav-sections .level-1.nav-drop:not(.search-by) ul > .nav-drop.level-2 > .label-container::after {
  content: url('../../../../icons/icon-accordion-plus.svg');
  height: 16px;
 }

 header nav .nav-sections .level-1.nav-drop:not(.search-by) ul > .nav-drop.level-2[aria-expanded='true'] > .label-container::after {
  content: url('../../../../icons/icon-accordion-minus.svg');
  height: 16px;
 }

 header nav [aria-expanded='false'] .submenu-wrapper > .submenu-header,
 header nav [aria-expanded='false'] .submenu-wrapper > .submenu-title {
  display: none;
 }

 header [aria-expanded='true'] ul .submenu-wrapper:not(:has([aria-expanded='true'])),
 header [aria-expanded='false'].level-0:not(:has([aria-expanded='true'])) > .submenu-wrapper {
  display: none;
 }

 header nav .level-0[aria-expanded='true'] > .submenu-header.level-1,
 header nav [aria-expanded='true']:not(.level-2) .submenu-wrapper > .submenu-header,
 header nav [aria-expanded='true'] .submenu-wrapper > .submenu-title {
  display: flex;
 }

 header nav .nav-sections ul > li.nav-drop[aria-expanded='true'] > .submenu-wrapper,
 header nav .nav-sections .level-1[aria-expanded='false']:has(.level-2[aria-expanded='true']) > .submenu-wrapper {
  background: var(--submenu-wrapper-background-color);
  display: block;
  height: calc(100svh - (var(--nav-hamburger-height) + 32px));
  min-height: calc(100svh - (var(--nav-hamburger-height) + 32px));
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
  padding: 0 16px;
  box-sizing: border-box;
  overflow-y: auto;
 }

 header nav .nav-sections ul > li.nav-drop[aria-expanded='true'] > .label-container,
 header nav .nav-sections .level-1[aria-expanded='false']:has(.level-2[aria-expanded='true']) > .label-container {
  display: none;
 }

 /* Custom layout */
 .level-1.nav-drop.search-by > .submenu-wrapper ul {
  --li-menu-padding: 12px 0;

  a {
   --default-menu-font: var(--type-display-2-font);
   --default-menu-letter-spacing: var(--type-display-2-letter-spacing);
  }
 }

 .level-1.nav-drop.search-by > .submenu-wrapper .submenu-title {
  --default-menu-font: var(--type-display-2-font);
  --default-menu-letter-spacing: var(--type-display-2-letter-spacing);

  padding-bottom: 12px;

  a {
   margin: 0;
  }
 }

 .level-1.nav-drop.search-by > .submenu-wrapper li.level-2:not(.nav-drop) {
  a {
    --default-menu-font: var(--type-body-1-default-font);
    --default-menu-letter-spacing: var(--type-body-1-default-letter-spacing);
   }
 }

 /* LEVEL 2 CUSTOMIZATION */
 header nav .nav-sections .level-1.nav-drop:not(.search-by) .level-2 > .submenu-wrapper > .submenu-title a {
  --default-menu-font: var(--default-menu-level3-font);
  --default-menu-letter-spacion: var(--default-menu-level3-letter-spacing);
  --li-menu-padding: 8px 0;

  margin: 10px 0 0;
  padding: var(--li-menu-padding);
 }

 header nav .nav-sections .level-1.nav-drop:not(.search-by) .level-2 > .submenu-wrapper > .submenu-title a svg {
  display: none;
 }

 header nav .nav-sections .level-1[aria-expanded='false']:has(.level-2[aria-expanded='true']) > .submenu-wrapper > .submenu-title,
 header nav .nav-sections .level-1[aria-expanded='false']:has(.level-2[aria-expanded='true']) > .submenu-wrapper > .submenu-header {
  display: flex;
 }

 header nav .nav-sections .level-1.nav-drop:not(.search-by) .level-2[aria-expanded='true'] {
  border-width: 0;
  padding: 0;
 }

 /* stylelint-disable */
 header nav .level-0.brands [aria-expanded='true'] .submenu-wrapper > .submenu-title {
  display: none;
 }

 header nav .nav-sections .level-1.nav-drop:not(.search-by) ul > li.nav-drop.level-2[aria-expanded='true'] > .label-container {
  display: flex;
 }

 header nav .nav-sections .level-1.nav-drop:not(.search-by) ul > li.nav-drop.level-2[aria-expanded='true'] > .submenu-wrapper {
  display: block;
  height: max-content;
  min-height: max-content;
  position: unset;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
 }

 header nav .nav-sections .level-2[aria-expanded='true'] > .label-container {
  border-bottom: 1px solid var(--color-gray-300);
  padding: var(--li-menu-padding);
 }

 /* End customization level 2 */
 header nav .nav-sections ul > li.nav-drop .submenu-header {
  align-items: center;
  height: var(--nav-hamburger-height);
  left: 0;
  position: fixed;
  top: 0;
  width: 90%;
  z-index: 3;
 }

 /* stylelint-enable */
 header nav .nav-sections ul > li.nav-drop .submenu-header .back-link {
  display: flex;
  align-items: center;
  column-gap: 8px;
  font: var(--type-details-caption-1-font);
  letter-spacing: var(--type-button-2-letter-spacing);
  padding: 0 16px;
  text-transform: uppercase;
 }

 header nav .nav-sections ul > li .submenu-header .back-link::before {
  content: url('../../../../icons/ultaIcons/menu-left.svg');
  height: 12px;
 }
}
/* Resalta el enlace de Hot Sale en el menú principal durante la campaña */
.main-nav a[href="/hot-sale"],
.main-nav a[href="/hot-sale"]:hover,
.main-nav a[href="/descuentos"],
.main-nav a[href="/descuentos"]:hover {
  color: #e9095b !important;
  font-weight: 700 !important;
}

.main-nav li.level-0:not([aria-expanded]) {
  .label-container {
    a {
      height: 100%;
      display: grid;
      align-items: center;
    }
  }
}