.header__icon--menu {
  position:initial
}

.js menu-drawer>details>summary:before,.js menu-drawer>details[open]:not(.menu-opening)>summary:before {
  content:"";
  position:absolute;
  cursor:default;
  width:100%;
  height:calc(100vh - 100%);
  height:calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  top:100%;
  left:0;
  background:rgba(var(--color-foreground),.5);
  opacity:0;
  visibility:hidden;
  z-index:2;
  transition:opacity 0s,visibility 0s
}

menu-drawer>details[open]>summary:before {
  visibility:visible;
  opacity:1;
  transition:opacity var(--duration-default) ease,visibility var(--duration-default) ease
}

.menu-drawer {
  position:absolute;
  transform:translate(-100%);
  visibility:hidden;
  z-index:3;
  left:0;
  top:100%;
  width:calc(100vw - 4rem);
  padding:0;
  border-width:0 var(--drawer-border-width) 0 0;
  background-color:rgb(var(--color-background));
  overflow-x:hidden;
  border-style:solid;
  border-color:rgba(var(--color-foreground),var(--drawer-border-opacity));
  filter:drop-shadow(var(--drawer-shadow-horizontal-offset) var(--drawer-shadow-vertical-offset) var(--drawer-shadow-blur-radius) rgba(var(--color-shadow),var(--drawer-shadow-opacity)))
}

.js .menu-drawer {
  height:calc(100vh - 100%);
  height:calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)))
}

.js details[open]>.menu-drawer,.js details[open]>.menu-drawer__submenu {
  transition:transform var(--duration-default) ease,visibility var(--duration-default) ease
}

.no-js details[open]>.menu-drawer,.js details[open].menu-opening>.menu-drawer,details[open].menu-opening>.menu-drawer__submenu {
  transform:translate(0);
  visibility:visible
}

.js .menu-drawer__navigation .submenu-open {
  visibility:hidden
}

@media screen and (min-width: 750px) {
  .menu-drawer {
    width:40rem
  }
  .no-js .menu-drawer {
    height:auto
  }

}

.menu-drawer__inner-container {
  position:relative;
  height:100%
}

.menu-drawer__navigation-container {
  display:grid;
  grid-template-rows:1fr auto;
  align-content:space-between;
  overflow-y:auto;
  height:100%
}

.menu-drawer__navigation {
  padding:5.6rem 0
}

.menu-drawer__inner-submenu {
  height:100%;
  overflow-x:hidden;
  overflow-y:auto
}

.no-js .menu-drawer__navigation {
  padding:0
}

.no-js .menu-drawer__navigation>ul>li {
  border-bottom:.1rem solid rgba(var(--color-foreground),.04)
}

.no-js .menu-drawer__submenu ul>li {
  border-top:.1rem solid rgba(var(--color-foreground),.04)
}

.js .menu-drawer__menu li {
  margin-bottom:.2rem
}

.menu-drawer__menu-item {
  padding:1.1rem 3.2rem;
  text-decoration:none;
  font-size:1.8rem
}

.no-js .menu-drawer__menu-item {
  font-size:1.6rem
}

.no-js .menu-drawer__submenu .menu-drawer__menu-item {
  padding:1.2rem 5.2rem 1.2rem 6rem
}

.no-js .menu-drawer__submenu .menu-drawer__submenu .menu-drawer__menu-item {
  padding-left:9rem
}

.menu-drawer summary.menu-drawer__menu-item {
  padding-right:5.2rem
}

.no-js .menu-drawer__menu-item .icon-caret {
  right:3rem
}

.menu-drawer__menu-item--active,.menu-drawer__menu-item:focus,.menu-drawer__close-button:focus,.menu-drawer__menu-item:hover,.menu-drawer__close-button:hover {
  color:rgb(var(--color-foreground));
  background-color:rgba(var(--color-foreground),.04)
}

.menu-drawer__menu-item--active:hover {
  background-color:rgba(var(--color-foreground),.08)
}

.js .menu-drawer__menu-item .icon-caret,.no-js .menu-drawer .icon-arrow {
  display:none
}

.menu-drawer__menu-item>.icon-arrow {
  position:absolute;
  right:2.5rem;
  top:50%;
  transform:translateY(-50%)
}

.js .menu-drawer__submenu {
  position:absolute;
  top:0;
  width:100%;
  bottom:0;
  left:0;
  background-color:rgb(var(--color-background));
  border-left:.1rem solid rgba(var(--color-foreground),.2);
  z-index:1;
  transform:translate(100%);
  visibility:hidden
}

.js .menu-drawer__submenu .menu-drawer__submenu {
  overflow-y:auto
}

.menu-drawer__close-button {
  margin-top:1.5rem;
  padding:1.2rem 2.6rem;
  text-decoration:none;
  display:flex;
  align-items:center;
  font-size:1.4rem;
  width:100%;
  background-color:transparent;
  font-family:var(--font-body-family);
  font-style:var(--font-body-style);
  text-align:left
}

.no-js .menu-drawer__close-button {
  display:none
}

.menu-drawer__close-button .icon-arrow {
  transform:rotate(180deg);
  margin-right:1rem
}

.menu-drawer__utility-links {
  padding:2rem;
  background-color:rgba(var(--color-foreground),.03)
}

.menu-drawer__account {
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  padding:1.2rem;
  margin-left:-1.2rem;
  font-size:1.4rem;
  color:rgb(var(--color-foreground))
}

.menu-drawer__account .icon-account {
  height:2rem;
  width:2rem;
  margin-right:1rem
}

.menu-drawer__account:hover .icon-account {
  transform:scale(1.07)
}

.menu-drawer .list-social {
  justify-content:flex-start;
  margin-left:-1.25rem;
  margin-top:2rem
}

.menu-drawer .list-social:empty {
  display:none
}

.menu-drawer .list-social__link {
  padding:1.3rem 1.25rem
}