.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 119;
  background: rgba(0, 0, 0, .48);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

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

.mobile-nav-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 120;
  width: min(360px, 88vw);
  height: 100dvh;
  background: #fff;
  box-shadow: 12px 0 38px rgba(0, 0, 0, .2);
  transform: translateX(-102%);
  transition: transform .28s ease;
  overflow-y: auto;
}

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

.mobile-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19px 18px;
  background: linear-gradient(105deg, #ffe000, #fff184);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.mobile-nav-logo {font-size: 25px;font-weight: 950;line-height: .8}
.mobile-nav-logo small {display: block;font-size: 8px;text-align: center;margin-top: 8px}
.mobile-nav-close {width: 36px;height: 36px;border: 0;border-radius: 50%;background: #111;color: #fff;font-size: 21px;cursor: pointer}
.mobile-nav-user {padding: 16px 18px;background: #fffbed;border-bottom: 1px solid #eee}
.mobile-nav-user strong,.mobile-nav-user span {display: block}
.mobile-nav-user span {margin-top: 4px;color: #777;font-size: 11px}
.mobile-nav-section {padding: 14px 10px;border-bottom: 1px solid #eee}
.mobile-nav-section h3 {margin: 0 8px 8px;font-size: 11px;color: #777;text-transform: uppercase;letter-spacing: .08em}
.mobile-nav-link {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 11px 10px;border-radius: 8px;color: #222;font-size: 13px;font-weight: 650;text-decoration: none}
.mobile-nav-link:hover,.mobile-nav-link:focus {background: #fff7c4;outline: none}
.mobile-nav-link span:last-child {color: #999}
.mobile-nav-actions {display: grid;grid-template-columns: 1fr 1fr;gap: 9px;padding: 15px 18px 22px}
.mobile-nav-actions a,.mobile-nav-actions button {border: 0;border-radius: 8px;padding: 11px 8px;text-align: center;font-size: 12px;font-weight: 850;cursor: pointer}
.mobile-nav-actions a {background: #ffdf00;color: #111}
.mobile-nav-actions button {background: #111;color: #fff}

@media (max-width: 900px) {
  .header-menu {display: grid !important}
  body.mobile-nav-open {overflow: hidden}
}