header {
  details > .header__icon--menu .icon {
    z-index: 9999;
    cursor: pointer;
    width: 48px;
    height: 48px;
    padding: 16px;
    display: block;

    &:hover {transform: unset;}
  }
  @media screen and (max-width: 479px) {
    details > .header__icon--menu .icon {left: 0;}
  }
  @media screen and (max-width: 767px) {
    details>.header__icon--menu .icon {left: 8px; top: 24px;}
  }
  details:not(.menu-opening) .header__icon--menu .icon {transform: translate(-100%);}
  details[open].menu-opening .header__icon--menu .icon {transform: translate(0);}
  
  /*details[open] > .header__icon--menu .menu-toggle {display: none;}*/

  .header__icon--menu:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(139, 134, 126, 0.5);
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    pointer-events: none;
  }

  .header__icon--menu[aria-expanded=true]:before {
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(139, 134, 126, 0.5);
    opacity: 1;
    position: fixed;
  }

  details > .header__icon--menu span.toggle-container {
    display: flex;
    justify-content: flex-start;
  }

  details > .header__icon--menu .menu-toggle {
    letter-spacing: .2em;
    text-transform: uppercase;
    cursor: pointer;
    align-items: center;
    width: 56px;
    height: auto;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    inset: 0% auto auto 0%;
  }
  @media screen and (max-width: 767px) {
    details > .header__icon--menu .menu-toggle {
      width: 32px;
    }
  }
  
  .menu-drawer {
    &.ev-menu-drawer {
      z-index: 999;
      background-color: var(--ev-vellum-white);
      flex-direction: column;
      width: 480px;
      max-width: 100%;
      position: fixed;
      inset: 0% auto 0% 0%;
      overflow: auto;
      height: 100vh;
      height: 100dvh;
      min-height: -webkit-fill-available;

      .menu-drawer__inner-container {
        padding: 40px;

        button.ev-close {
          border: transparent;
          background: transparent;
          cursor: pointer;
          padding: 0;
          margin-bottom: 16px;
          img {width: 16px;}
        }

        .menu-drawer__navigation-container {
          overflow: unset;
        
          nav {

            &.ev-primary-drawer-menu {padding-top: 0; padding-bottom: 0;}
      
            .menu-drawer__menu {
      
              li {
                margin-bottom: 0;
      
                a.menu-drawer__menu-item, summary.menu-drawer__menu-item {
                  font-family: "Schnyder Light", Times New Roman, sans-serif;
                  font-size: 20px;
                  font-weight: 300;
                  color: var(--ev-blue);
                  line-height: 50px;
                  text-transform: uppercase;
                  margin-top: 0;
                  margin-bottom: 0;
                  border-top: 1px solid var(--ev-mist);
                  padding: 0;
                  background-color: transparent;
      
                  &:hover {background-color: transparent;}
                }
      
                .ev-parent-menu-item {
                  font-family: "Schnyder Light", Times New Roman, sans-serif;
                  font-size: 20px;
                  font-weight: 300;
                  color: var(--ev-blue);
                  line-height: 50px;
                  text-transform: uppercase;
                  margin-top: 0;
                  margin-bottom: 0;
                  border-top: 1px solid var(--ev-mist);
                  padding: 0;
                }

                a.ev-child-menu-item {
                  font-family: futura-pt, sans-serif;
                  font-size: 16px;
                  color: var(--ev-dark-mist);
                  line-height: 1.4em;
                  text-transform: none;
                  border-top: none;
                  font-weight: 400;
                  padding-top: 4px;
                  padding-bottom: 4px;
                }
      
                /* Specific Menu Items */
                a.ev-menu-item-fabrics, summary.ev-menu-item-fabrics,
                a.ev-menu-item-fabric-archive, summary.ev-menu-item-fabric-archive,
                a.ev-menu-item-accessories, summary.ev-menu-item-accessories {
                  font-size: 40px;
                  margin-top: 24px;
                  margin-bottom: 16px;
                  border: none;
                }
                a.ev-menu-item-fabrics, summary.ev-menu-item-fabrics {margin-top: 0;}
      
                a.menu-drawer__menu-item--active {background-color: unset;}

                @media screen and (max-width: 767px) {
                  a.ev-menu-item-fabrics, summary.ev-menu-item-fabrics,
                  a.ev-menu-item-fabric-archive, summary.ev-menu-item-fabric-archive,
                  a.ev-menu-item-accessories, summary.ev-menu-item-accessories {
                      font-size: 32px;
                  }
                }
              }
            }
      
            /* If the child sub-menu has been opened */
            .submenu-open {}
      
            .ev-child-menu {column-count: 2;}
          }
        }
        
        @media screen and (max-width: 479px) {
          .menu-drawer__navigation-container {
            /*margin-top: 40px;*/
          }
        }
      }

      @media screen and (max-width: 767px) {
        .menu-drawer__inner-container {
          padding-bottom: 24px;
          padding-left: 24px;
          padding-right: 24px;
        }
      }

      @media screen and (max-width: 479px) {
        .menu-drawer__inner-container {
          padding-bottom: 16px;
          padding-left: 16px;
          padding-right: 16px;
        }
      }
    }
  }
}

/* Altering the default theme behaviour of the menu drawer */
.js details:not(.menu-opening)>.menu-drawer {transition: 0.5s cubic-bezier(0.93, 0.02, 0.15, 1), opacity 0.4s cubic-bezier(0.29, 0.29, 0, 0.92) !important;}
.js details:not(.menu-opening) .header__icon--menu .icon {}
.js details[open].menu-opening>.menu-drawer {transition: 0.5s cubic-bezier(0.93, 0.02, 0.15, 1), opacity 0.4s cubic-bezier(0.29, 0.29, 0, 0.92) !important;}
.js details[open].menu-opening .header__icon--menu .icon {}

.js details:not(.menu-opening) > .menu-drawer, .js details:not(.menu-opening) > .menu-drawer__submenu {
    transform: translateX(-100%);
    visibility: hidden;
}

.js .menu-drawer__navigation .submenu-open {
    visibility: visible;
}

.js .menu-drawer__submenu {
  position: relative;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: rgb(var(--color-background));
  z-index: 1;
}

.menu-drawer__close-button {
  display: none;
}

.mydropdown-menu {
  transition: max-height 1.2s ease, opacity 1.2s ease !important;
  max-height: 0;
  overflow: hidden;

  transform: unset !important;
  visibility: unset !important;
}
.mydropdown-menu.show {
  display: block;
  position: relative;
  padding-bottom: 28px;
  top: unset;
  max-height: 500px;
  transition: max-height 0.4s ease, opacity 0.4s ease !important;

  transform: unset !important;
  visibility: unset !important;
}

@media screen and (min-width: 750px) {
  header {
    .menu-drawer {
        width: 48rem;
    }
  }
}

/* Bottom Drawer Menu */
header .menu-drawer.ev-menu-drawer {
  .ev-bottom-drawer-menu {
    flex-direction: column;
    flex: 1;
    justify-content: flex-end;
    align-items: stretch;
    padding-top: 40px;
    display: flex;
  
    .ev-menu-link {
      color: var(--ev-dark-mist);
      padding-top: 4px;
      padding-bottom: 4px;
      padding-right: 24px;
      display: block;
    }
  }
}

header .menu-drawer__utility-links {display: none;}