:root {
 --nav-hamburger-height: 64px;
}

/* header and nav layout */
header .nav-wrapper {
 background-color: var(--background-color);
 width: 100%;
 z-index: 6;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 border-bottom: 1px solid var(--color-neutral-300);

 .nav-links {
  grid-area: links;
  display: none;
 }
}

header nav {
 box-sizing: border-box;
 display: grid;
 grid-template:
    'hamburger brand tools' var(--nav-height)
    'search search search' auto
    'sections sections sections' 1fr / 24px 1fr auto;
 align-items: center;
 margin: auto;
 max-width: 1440px;
 width: 100%;
 padding: 0 !important;
 /* padding: 0 12px 10px; */
}

header nav[aria-expanded='true'] {
 grid-template:
    'hamburger hamburger' max-content
    'sections sections' max-content
    'links links' max-content;

 /* La altura del panel la fija .nav-wrapper contra el viewport dinámico (mobile.css) y aquí solo
    se hereda. Con 100svh el <nav> se quedaba clavado en el viewport "pequeño" —el de la barra de
    direcciones desplegada—: al retraerse esa barra el panel quedaba más corto que la pantalla
    (banda blanca al fondo) y el final del menú caía fuera del área con scroll. */
 height: 100%;
 min-height: 100%;
 overflow-x: hidden;
 overflow-y: auto;
 overscroll-behavior: contain;
 -webkit-overflow-scrolling: touch;

 &:has([aria-expanded='true']) div.nav-links {
  display: none;
 }
}

header nav p {
 margin: 0;
 line-height: 1;
}

/* brand */
header nav .nav-brand {
 grid-area: brand;
 justify-self: center;
}

header nav .nav-brand a {
 display: block;
 line-height: 0;
}

/* hamburger */
header nav .nav-hamburger {
 grid-area: hamburger;
 height: 24px;
 display: flex;
 align-items: center;
}

header nav .nav-hamburger button {
 cursor: pointer;
 height: 24px;
 width: 24px;
 margin: 0;
 border: 0;
 border-radius: 0;
 padding: 0;
 background-color: var(--color-neutral-50);
 color: inherit;
 overflow: initial;
 text-overflow: initial;
 white-space: initial;
}

header nav .nav-hamburger-icon,
header nav .nav-hamburger-icon::before,
header nav .nav-hamburger-icon::after {
 box-sizing: border-box;
 display: block;
 position: relative;
}

header nav .nav-hamburger-icon {
 width: 18px;
}

header nav .nav-hamburger-icon::before {
 width: 24px;
}

header nav .nav-hamburger-icon::after {
 width: 12px;
}

header nav .nav-hamburger-icon::before,
header nav .nav-hamburger-icon::after {
 content: '';
 position: absolute;
 background: currentcolor;
}

header nav[aria-expanded='false'] .nav-hamburger-icon,
header nav[aria-expanded='false'] .nav-hamburger-icon::before,
header nav[aria-expanded='false'] .nav-hamburger-icon::after {
 height: 2px;
 border-radius: 2px;
 background: currentcolor;
}

header nav[aria-expanded='false'] .nav-hamburger-icon::before {
 top: -10px;
}

header nav[aria-expanded='false'] .nav-hamburger-icon::after {
 bottom: -10px;
}

header nav[aria-expanded='true'] .nav-hamburger {
  height: var(--nav-hamburger-height);
  border-bottom: 1px solid var(--color-neutral-300);
  margin: 0 -16px;
  box-sizing: border-box;
  justify-content: space-between;
  padding: 0 16px;
}

header nav .nav-hamburger-open-label {
 color: var(--color-black);
 display: block;
 flex: 1 1 auto;
 font: var(--type-headline-2-default-font, var(--type-headline-2-strong-font));
 letter-spacing: var(--type-headline-2-default-letter-spacing, var(--type-headline-2-strong-letter-spacing));
 line-height: 1;
 max-width: calc(100% - 56px);
 min-width: 0;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

header nav .nav-hamburger-open-label.has-back-arrow {
 margin-left: 40px;
 max-width: calc(100% - 96px);
}

header nav[aria-expanded='true'] .nav-hamburger-icon {
 height: 22px;
}

header nav[aria-expanded='true'] .nav-hamburger-icon::before,
header nav[aria-expanded='true'] .nav-hamburger-icon::after {
 top: 5px;
 left: 1px;
 transform: rotate(45deg);
 transform-origin: 2px 1px;
 width: 21px;
 height: 2px;
 border-radius: 2px;
}

header nav[aria-expanded='true'] .nav-hamburger-icon::after {
 top: unset;
 bottom: 3px;
 transform: rotate(-45deg);
}

/* sections */
header nav .nav-sections {
 grid-area: sections;
 flex: 1 1 auto;
 display: none;
 visibility: hidden;
}

header nav[aria-expanded='true'] .nav-sections {
 display: block;
 visibility: visible;
 align-self: start;
 overflow-x: hidden;
 overflow-y: visible;
}

/* Los submenús se posicionan en absoluto contra .nav-sections con height: 100%, así que la
   sección necesita altura completa SOLO cuando hay uno abierto (ahí el grid del móvil ya le da
   su propia fila 1fr). En el nivel 0 ese min-height estiraba la sección hasta el alto del panel
   y empujaba .nav-links —donde va el último enlace, "Ulta Beauty Benefits"— fuera de la vista. */
header nav[aria-expanded='true']:has(.nav-sections .nav-drop[aria-expanded='true']) .nav-sections {
 min-height: 100%;
}

/* search */
header nav .nav-search {
 grid-area: search;
 width: 100%;
}

header nav[aria-expanded='true'] .nav-hamburger,
header nav[aria-expanded='true'] .nav-sections {
 /* padding: 0 16px; */
}

header nav[aria-expanded='true'] .nav-search {
 display: none;
}

/* tools */
header nav .nav-tools {
 --nav-tools-gap: 13px;

 grid-area: tools;
 display: flex;
 height: auto;
 gap: var( --nav-tools-gap);
 align-items: center;
 justify-content: flex-end;
 background: var(--background-color);
 z-index: 3;
}

header nav .nav-tools-wrapper {
 display: inline-flex;
 align-items: center;
 gap: 8px;
}

header nav .nav-tool-label {
 display: none;
}

header nav .nav-tool-label:empty {
 display: none;
}

header nav .nav-tools-wrapper > button {
 color: var(--color-brand-700);
 background: transparent;
 padding: 0;
 border: unset;
 cursor: pointer;
 height: 24px;
 width: 24px;
}

header nav .nav-tools-wrapper > .nav-tool-action {
 border: 0;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 height: auto;
 width: auto;
 padding: 0;
 background: transparent;
 color: var(--color-brand-700);
 cursor: pointer;
 text-decoration: none;
}

header nav .nav-tools-wrapper > .button {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 24px;
 width: 24px;
}

header nav .nav-tools .nav-account-icon {
 display: block;
 width: 24px;
 height: 24px;
 font-size: 0;
 background-image: url('../../../icons/user.svg');
 background-repeat: no-repeat;
 background-position: center;
}

/* PreHeader */
.pre-header-container {
 border-bottom: 1px solid var(--color-gray-300);
 background-color: var(--color-primary-rosy-500);

 .columns-2-cols {
  > div {
   --pre-header-container-links-display: none;
   --pre-header-container-links-height: var(--pre-header-height);
   --pre-header-container-links-content-max-width: 340px;

   > div {
    flex: 0 1 auto;
   }

   height: var(--pre-header-container-links-height);
   justify-content: center;
   align-items: center;
   flex-direction: row;
   font: var(--type-details-caption-1-font);
   letter-spacing: var(--type-button-2-letter-spacing);

   div:has(ul) {
    display: var( --pre-header-container-links-display);
   }

   p {
    max-width: var(--pre-header-container-links-content-max-width);
    color: #ffffff;
    padding: 2px;
   }

  }
 }
}

header nav .nav-brand img {
 vertical-align: middle;
}

header nav .avatar-wrapper.account-avatar {
   width: 24px;
   height: 24px;
   font: var(--type-body-20-regular-font);
 }
 
@media (width <= 1024px) {
   header .nav-wrapper{
      border: none;
   }
}

@media (width <= 1360px) {
   header nav{
      padding: 0 12px 10px !important;

   }
}