.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), 0.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: translateX(-100%);
  visibility: hidden;
  z-index: 3;
  left: 0;
  top: 100%;
  width: 100%;
  padding: 0;
  background-color: transparent;
  overflow-x: hidden;
  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))
  );

  .link--text {
    color: var(--neutral-100);
  }
}

.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;
}

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

.js .menu-drawer__navigation .submenu-open {
  visibility: hidden; /* hide menus from screen readers when hidden by submenu */
}

@media screen and (min-width: 750px) {
  .menu-drawer {
    width: 40rem;
    border-width: 0 var(--drawer-border-width) 0 0;
    border-style: solid;
    border-color: rgba(var(--color-foreground), var(--drawer-border-opacity));
  }
}

.menu-drawer__inner-container {
  position: relative;
  height: 100%;
  background-color: var(--neutral-100);
}

.menu-drawer__navigation-container {
  display: flex;
  flex-direction: column;
  align-content: space-between;
  overflow-y: auto;
  height: 100%;
  height: fit-content;
  max-height: 100%;
  padding-bottom: 2.5rem;

  &::after {
    content: '';
    height: 1.25rem;
    width: 100vw;
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 32" preserveAspectRatio="none"><path d="M0 23.2673C7.50146 24.1295 16.24 24.4013 23.4155 24.557C35.9673 24.8296 48.563 24.752 61.1454 24.6744C67.0619 24.638 72.9753 24.6016 78.88 24.6016C94.7841 24.6016 110.611 23.9992 126.434 23.3971C142.252 22.7951 158.067 22.1933 173.953 22.1933C177.661 22.1933 181.376 22.1948 185.096 22.1964C217.42 22.2101 250.158 22.2238 282.378 21.2121C299.563 20.6725 316.709 20.646 333.886 20.6195C338.541 20.6123 343.197 20.6051 347.857 20.5877C358.863 20.5466 369.433 21.3723 380.039 22.2008C389.23 22.9188 398.448 23.6389 408 23.7988C435.105 24.2526 463.496 25.8417 490.959 27.3788C496.008 27.6614 501.027 27.9423 506 28.2141C547.096 30.4596 588.161 31.4591 629.416 31.8265C658.576 32.0862 687.101 32.0003 715.849 31.9138C730.307 31.8702 744.821 31.8265 759.5 31.8265C857.182 31.8265 955.484 30.4435 1053.04 28.2141C1061.85 28.0128 1070.68 27.4289 1079.52 26.8452C1090.42 26.1247 1101.32 25.4044 1112.16 25.4044H1160.57C1168.81 25.4044 1177.06 25.4158 1185.3 25.4272C1201.79 25.4501 1218.29 25.4729 1234.78 25.4044C1245.54 25.3595 1256.27 24.982 1267.01 24.6044C1278.46 24.2017 1289.91 23.7988 1301.41 23.7988C1304.54 23.7988 1307.67 23.7966 1310.81 23.7944C1344.33 23.7709 1378.68 23.7469 1411.83 26.3855C1421.42 27.1493 1430.68 27.5729 1440 27.5126V0H0V23.2673Z" fill="black" /></svg>');
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--neutral-900);
    position: absolute;
    bottom: 0;
    z-index: 0;
  }

  &:before {
    content: '';
    position: absolute;
    width: 100vw;
    height: calc(100% - 1rem);
    left: 0;
    top: 0;
    background-color: var(--neutral-900);
  }
}

.menu-drawer__navigation {
  padding: 2rem 0 0;
}

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

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

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

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

.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), var(--neutral-100));
  background-color: rgba(var(--color-foreground), 0.04);
}

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

.js .menu-drawer__menu-item .icon-caret {
  display: none;
}

.menu-drawer__menu-item > .svg-wrapper {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  right: 0rem;
  top: 50%;
  transform: translateY(-50%);
}

.js .menu-drawer__submenu {
  position: absolute;
  top: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: var(--neutral-900);
  z-index: 2;
  transform: translateX(100%);
  visibility: hidden;
}

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

.menu-drawer__close-button {
  margin-top: 0.725rem;
  padding: 1.5rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  width: 100%;
  background-color: transparent;
  text-align: left;
}

.menu-drawer__close-button .svg-wrapper {
  transform: rotate(180deg);
  margin-right: 0.5rem;
  width: 1.5rem;
  height: 1.5rem;
}

.menu-drawer__utility-links {
  padding: 0;
  background-color: rgba(var(--color-foreground), 0.03);
  position: relative;
}

.header--has-social .menu-drawer__utility-links {
  padding: 2rem 3rem;
}

@media screen and (max-width: 749px) {
  .header--has-account:where(:not(.header--has-social):not(.header--has-localizations)) .menu-drawer__utility-links {
    padding: 2rem 3rem;
  }
}

@media screen and (max-width: 989px) {
  .header--has-localizations:where(:not(.header--has-social)) .menu-drawer__utility-links {
    padding: 2rem 3rem;
  }
}

.menu-drawer__account {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 1rem 0;
  font-size: 1.4rem;
  color: var(--neutral-100);
  margin-bottom: 0;
}

.menu-drawer__utility-links:has(.menu-drawer__localization) .menu-drawer__account {
  margin: 0;
}

.menu-drawer__account account-icon > .svg-wrapper {
  height: 1.5rem;
  width: 1.5rem;
  margin-right: 0.5rem;
}

.menu-drawer__account shop-user-avatar {
  --shop-avatar-size: 2.4rem;
  margin-right: 0.55rem;
  margin-left: -0.45rem;
}

.menu-drawer__account:hover account-icon > .svg-wrapper {
  transform: scale(1.07);
}

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

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

.menu-drawer .list-social__link {
  padding: 1.1rem 1.1rem;
}

@media screen and (max-width: 749px) {
  .menu-drawer.country-selector-open {
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}