.mobile-menu,
.mobile-menu-overlay {
  display: none;
}

@media (max-width: 850px) {
  .mobile-menu {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 70;
    width: min(86vw, 360px);
    min-height: 100dvh;
    padding: 22px 24px 28px;
    flex-direction: column;
    background: #fffdfa;
    box-shadow: -20px 0 45px rgba(37, 27, 39, .14);
    transform: translateX(105%);
    transition: transform .25s ease;
  }

  .mobile-menu.open {
    transform: translateX(0);
  }

  .mobile-menu-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    background: rgba(37, 27, 39, .42);
    transition: opacity .25s ease, visibility .25s ease;
  }

  .mobile-menu-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  .mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 22px;
    border-bottom: 1px solid #e9e1dc;
  }

  .mobile-menu-head img {
    width: 92px;
    height: auto;
    object-fit: contain;
  }

  .mobile-menu-close {
    border: 0;
    background: transparent;
    color: #251b27;
    padding: 4px 0 4px 14px;
    font: 32px/1 sans-serif;
    cursor: pointer;
  }

  .mobile-menu nav {
    display: grid;
    margin-top: 18px;
  }

  .mobile-menu nav a {
    padding: 17px 0;
    border-bottom: 1px solid #e9e1dc;
    color: #251b27;
    font: 600 18px 'DM Sans', sans-serif;
    text-decoration: none;
  }

  .mobile-menu nav a:hover,
  .mobile-menu nav a:focus-visible {
    color: #be6c86;
  }

  .mobile-menu-whatsapp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: 14px 16px;
    border-radius: 2px;
    background: #502048;
    color: #fff;
    font: 700 13px 'DM Sans', sans-serif;
    text-decoration: none;
  }

  .mobile-menu-whatsapp span {
    font-size: 18px;
  }

  body.mobile-menu-open {
    overflow: hidden;
  }
}