#header.main-header {
  z-index: 1000;
  position: fixed;
  width: 100%;
  height: 80px;
  transition: all 0.3s ease-in-out;
  top: 0;
  padding: 0 20px;
  background-color: theme('colors.white');
  background-image: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);

  @screen md {
    padding-left: 40px;
    padding-right: 40px;
    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  @screen xl {
    padding-left: 100px;
    padding-right: 100px;
  }
  .sub-menu {
    li[class*='current-'],
    .current-menu-item {
      position: relative;
      > a {
        position: relative;
        &:after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 100%;
          height: 1px;
          background-color: theme('colors.black');
        }
      }
    }
  }
  .nav-no-link {
    transform: translateX(-35px);
    // @screen max-lg {
    //   transform: translateX(0px);
    // }

    a {
      color: #000;
      font-family: theme('fontFamily.cursive');
      font-size: 0.9375rem;
      letter-spacing: 0.45px;
      font-style: italic;
      font-weight: 400;
      line-height: 230%;
      text-transform: none;
      // text-shadow: 0px 0px 1px black;

      &:hover {
        color: #000;
        text-shadow: none !important;
      }
    }
    &:not(:first-child) {
      padding-top: 20px;
    }
  }
}

/* stylelint-disable-next-line at-rule-no-unknown */
@screen max-lg {
  #newMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: theme('colors.white') !important;
    transform: translateX(100%);
    transition: all 0.3s ease-in-out;
    padding: 26px 0px 20px 0px;

    .logo {
      position: relative;
      display: block;
      // padding-left: 60px;
      text-align: center;
      img {
        margin: 0 auto;
        max-width: none;
        width: 220px;
      }
    }
    .menu {
      text-transform: uppercase;
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: calc(100% - 60px);
      padding-top: 60px;

      overflow: auto;

      > .menu-item {
        padding: 10px 0;
        position: relative;
        margin: 10px 0;
        padding-left: 85px;
        &.menu-item-has-children {
          &::before {
            content: '';
            position: absolute;
            left: 65px;
            top: 20px;
            margin-top: -3px;
            width: 10px;
            height: 10px;
            background-image: url(assets/svg/chevron-gold.svg);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            transition: all 0.5s ease-out;
            transform-origin: center;
          }
          > a {
            transition: all 0.5s ease-out;
            position: relative;
            &:focus {
              color: inherit;
            }
          }
        }
        &:not(:last-child) {
          // &:after {
          //   content: '';
          //   width: 100px;
          //   height: 1px;
          //   background-color: theme('colors.black');
          //   position: absolute;
          //   opacity: 0.3;
          //   bottom: 0;
          //   left: 50%;
          //   transform: translateX(-50%);
          // }
        }
        &.open {
          > a {
            color: theme('colors.gold') !important;
          }
          &::before {
            // transform: rotate(90deg) translateY(-50%);
            transform: rotate(90deg);
          }
        }
        &.loca_buy_button {
          font-style: italic;
          text-decoration: underline;
          text-underline-offset: 4px;
          text-transform: none;
          font-family: 'Bodoni Moda', serif;
          font-size: 24px;
          padding-left: 70px;
          // text-align: center;
          // justify-self: flex-end;
          margin-top: auto;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          gap: 5px;

          &:before {
            content: '';
            position: relative;
            left: -10px;
            // top: 50%;
            // transform: translate(0%, -50%);
            width: 28px;
            height: 28px;
            background-image: url(assets/svg/basket.svg);
            background-size: 13px 11px;
            background-position: center;
            background-repeat: no-repeat;
            transition: all 0.6s ease;
            transform-origin: center;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 100%;
            border: 1px solid theme('colors.gold');
          }
          a {
            transform: translateX(-10px);
          }
        }
      }
    }
    .sub-menu-wrap {
      visibility: collapse;
      height: auto;
      max-height: 0;
      transition: all 0.5s ease-out;
      overflow: hidden;
      &.open {
        // max-height: 400px;
        visibility: visible;
        height: auto;
      }
    }
    .sub-menu {
      padding: 20px 0px 0;
      display: flex;
      flex-direction: column;
      // font-family: theme('fontFamily.body');
      font-size: 14px;
      // text-transform: none;
      gap: 5px;
      .menu-item {
        font-size: 11px;
        &:not(.nav-no-link) {
          padding-left: 25px;
        }
      }
    }
  }
}

@screen lg {
  #newMenu {
    .menu {
      display: flex;
      position: relative;
      > .menu-item {
        text-transform: uppercase;
        font-size: 12px;
        padding: 32px 20px;
        position: relative;
        &:after {
          content: '';
          width: calc(100% - 40px);
          height: 1px;
          background-color: theme('colors.black');
          position: absolute;
          bottom: 15px;
          left: 20px;
          transition: all 0.3s ease;
          transform: scaleX(0);
          transform-origin: center;
        }
        &:hover,
        &.current-menu-item {
          &:after {
            transform: scaleX(1);
          }
        }
        a {
          position: relative;
          color: #000;
        }
      }
    }
    .sub-menu-wrap {
      position: absolute;
      background-color: theme('colors.white');
      padding: 30px 50px 50px 50px;
      top: 100%;
      width: auto;
      z-index: 1;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease-in-out;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      left: 0;
      right: auto;
      max-height: none !important;
      &.open {
        visibility: visible;
        opacity: 1;
      }
      &.right {
        right: 0;
        left: auto;
      }
    }
    .special-margin .sub-menu-wrap {
      padding: 30px 80px 50px 80px;
    }
    .sub-menu {
      > .menu-item {
        padding: 7px 0;
        font-size: 11px;
        // &:not(.nav-no-link) {
        //   padding-left: 35px;
        // }

        a {
          white-space: nowrap;
          &:hover {
            text-shadow: 0px 0px 1px black;
          }
        }
      }
    }
  }
}

body.scrolled:not(.js-menu-open) .main-header {
  transform: translateY(-100%);
}

body.js-menu-open {
  height: 100%;
  overflow: hidden;
  #newMenu {
    transform: translateX(0%);
  }
}

body.no_buy_button {
  .loca_buy_button {
    display: none;
  }
}

.fix-menus {
  .menu-champagne:after {
    transform: scaleX(0) !important;
  }
  .nav-no-link a:after {
    display: none !important;
  }
  .menu-maison:after {
    transform: scaleX(1) !important;
  }
}
