.nav-content {
  display: grid;
  grid-template-columns: 80% 20%;
  position: fixed;
  width: 100%;
  height: auto;
  z-index: var(--z-dropdown);
  margin: 0;
  background-color: var(--newwhite);
}

.nav-content__left {
   padding: .6em 0 .6em 1em;
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

.nav-content__right {
   padding: .6em 1em .6em 0;
   display: flex;
   align-items: center;
   justify-content: flex-end;
}

.nav-nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  font-weight: var(--font-medium);
  color: var(--newblack);
  text-transform: uppercase;
  padding-left: 1em;
  transition: opacity 0.3s ease, height 0.3s ease;
}

ul.nav-nav__ul {
  display: flex;
  gap: 1.2em;
  align-items: center;
}

ul.nav-nav__ul li {
  display: block;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

ul.nav-nav__ul li a {
  font-size: 0.85rem;
  font-weight: var(--font-regular);
  text-transform: uppercase;
  color: var(--newblack);
  transition: var(--transition-normal);
}

ul.nav-nav__ul li a:hover {
  opacity: 0.5;
}

ul.nav-nav__ul li a[data-active="true"] {
  font-weight: 500 !important;
}

.nav-content__right a {
  font-size: var(--font-size-sm);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  color: var(--newblack);
  display: inline-block;
}

.menu-cart {
   position: relative;
   width: 40px;
   height: 40px;
   background: none;
   border: none;
   cursor: default;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition-normal);
   outline: none;
}

.menu-button-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}

.right {
   justify-content: right;
   padding-right: .6em;
}

.menu-button {
   position: relative;
   width: 40px;
   height: 40px;
   background: none;
   border: none;
   cursor: default;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all var(--transition-normal);
}

.menu-button:hover {
   opacity: .5;
}

.menu-line {
    position: absolute;
    background-color: var(--newblack);
    transition: transform 0.3s ease;
}

.menu-line--vertical {
    width: 2px;
    height: 16px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: transform 0.3s ease;
}

.menu-line--horizontal {
    width: 16px;
    height: 2px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transition: transform 0.3s ease;
}