.c-mmenu {
  position        : fixed;
  bottom          : 0;
  left            : 0;
  width           : 100%;
  height          : var(--main-menu-mobile-height);
  border-top      : var(--border-thin) solid var(--main-fg);
  background-color: var(--main-bg);
  box-shadow      : 0 var(--n-margin-xxs) var(--margin-xs) 0 rgba(0, 0, 0, 0.25);
  z-index         : 4;
}

.c-mmenu-list {
  display: flex;
  margin : var(--margin-sm) 0;
  padding: 0;
}

.c-mmenu-item {
  flex-grow      : 1;
  list-style-type: none;
  margin-bottom  : 0;
}

.c-mmenu-button {
  display         : flex;
  flex-direction  : column;
  width           : 100%;
  align-items     : center;
  border          : none;
  background-color: var(--main-bg);
  color           : var(--main-fg);
  text-decoration : none;
  font-family     : var(--font-standard);
  font-stretch    : var(--font-condensed);
  font-size       : var(--font-size-sm);
  font-weight     : var(--font-weight-normal);
  padding         : 0;
  cursor          : pointer;
}

.c-mmenu-button>svg {
  margin-bottom: var(--margin-xxxs);
}

.c-mmenu-button:visited {
  color: var(--main-fg);
}

.c-mmenu-submenu {
  display         : none;
  position        : fixed;
  bottom          : var(--main-menu-height);
  margin-bottom   : var(--main-menu-margin);
  left            : 0;
  width           : 100%;
  background-color: var(--main-fg);
  color           : var(--main-bg);
  max-height      : calc(100vh - calc(var(--main-menu-height) + var(--main-menu-margin)));
  overflow-y      : scroll;
}

.c-mmenu-open {
  display: block;
}

#c-mmenu-search,
#c-mmenu-account {
  padding: var(--margin-xs) var(--margin-md) var(--margin-md);
}

#c-mmenu-search form {
  display    : flex;
  align-items: center;
  gap        : var(--margin-xxs);
}

#c-mmenu-search .form-type-search {
  flex-grow: 1;
}

#c-mmenu-search input[type="search"] {
  width: 100%;
}

#c-mmenu-search h2,
#c-mmenu-account h2 {
  color    : var(--reverse-fg);
  font-size: var(--font-size-xl);
}

#c-mmenu-search h2::before,
#c-mmenu-account h2::before {
  display: none;
}

@media (min-width: 48rem) {
  .c-mmenu {
    position  : relative;
    z-index   : 1;
    width     : unset;
    height    : unset;
    box-shadow: unset;
    border    : unset;
  }

  .c-mmenu-submenu {
    position  : absolute;
    width     : 30rem;
    max-width : var(--max-content-width);
    top       : var(--main-menu-height);
    bottom    : unset;
    right     : 0;
    left      : unset;
    margin-top: var(--n-margin-sm);
    overflow-y: auto;
  }

  #c-mmenu-search {
    right: -5rem;
  }

  #c-mmenu-account {
    right: -17rem;
  }

  .c-mmenu-list {
    gap            : var(--margin-xxxl);
    justify-content: end;
    padding-right  : var(--margin-xs);
  }

  .c-mmenu-item {
    position : relative;
    flex-grow: 0;
  }
}