.simple-topmenu{ position:relative; z-index:9999; }

.simple-topmenu__toggle{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; background:#111; color:#fff; border:0; cursor:pointer;
  border-radius:6px;
}

.simple-topmenu__overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:9998;
}

.simple-topmenu__drawer{
  position:fixed; top:0; right:0; height:100vh; width:min(380px, 92vw);
  background:#fff; z-index:9999;
  transform:translateX(110%); transition:transform .25s ease;
  box-shadow:-10px 0 30px rgba(0,0,0,.25);
  display:flex; flex-direction:column;
}

.simple-topmenu__drawer[aria-hidden="false"]{ transform:translateX(0); }

.simple-topmenu__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px; border-bottom:1px solid #eee;
}

.simple-topmenu__close{
  background:#f2f2f2; border:0; cursor:pointer; font-size:24px; line-height:1;
  width:40px; height:40px; border-radius:6px;
}

.simple-topmenu__m-list{
  list-style:none; padding:10px; margin:0; overflow:auto;
}

.simple-topmenu__m-li{ border-bottom:1px solid #f0f0f0; }

.simple-topmenu__m-cat{
  width:100%;
  text-align:left;
  background:transparent; border:0; cursor:pointer;
  padding:14px 6px; font-weight:700; font-size:16px;
}

.simple-topmenu__m-drop{
  display:none;
  padding:0 6px 14px;
}

.simple-topmenu__m-li.open > .simple-topmenu__m-drop{ display:flex; flex-direction:column; }

.simple-topmenu__link{
  padding:10px 10px;
  text-decoration:none; color:#111;
  border:1px solid #eee; border-radius:10px;
  margin:6px 0;
}

@media (min-width: 900px){
  /* If you want this only for mobile, keep these: */
  .simple-topmenu__toggle{ display:none; }
  .simple-topmenu__drawer, .simple-topmenu__overlay{ display:none; }
}