@media (min-width: 901px){
  button.tabs-toggle,
  div#tabsMenu {
    display: none;
  }
}
@media (max-width: 900px){
  .tabs .wrapper > ul,
  .tabs .wrapper ul { 
    display: none !important; 
  }

  .tabs .wrapper .tabs-menu{ display: none; }
  .tabs .wrapper .tabs-menu.open{ display: block; }
  .tabs .wrapper .tabs-toggle{ display: inline-flex; }

  section.account div.tabs{
    border-radius: 8px;
    position: relative;
  }

  .tabs .wrapper{
    position: relative;
  }

  /* Скрываем горизонтальный список, показываем кнопку */
  .tabs .wrapper ul{
    display: none;
  }

  .tabs .wrapper .tabs-toggle{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 10px;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid #cbcbcb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
  }
  .tabs .wrapper .tabs-toggle:hover, 
  .tabs .wrapper .tabs-toggle:target {
    background: #3399CC;
    color: #fff;    
  }
  .tabs .wrapper .tabs-toggle:hover span, 
  .tabs .wrapper .tabs-toggle:target span {  
    color: #fff;    
  }
  .tabs .wrapper .tabs-toggle:hover span.bars,
  .tabs .wrapper .tabs-toggle:target span.bars {
    filter: invert(1);
  }
  .tabs .wrapper .tabs-toggle:focus {
    outline: none;
    outline-offset: 0;
  }

  /* Иконка-гамбургер */
  .tabs .wrapper .tabs-toggle .bars{
    width: 18px; height: 14px; position: relative; display: inline-block;
  }
  .tabs .wrapper .tabs-toggle .bars span{ top: 6px; }
  .tabs .wrapper .tabs-toggle .bars{ position: relative; }
  .tabs .wrapper .tabs-toggle .bars{
      background-image: url(../img/svg/menu-black.svg);
      background-size: 18px 18px;
      background-position: 0 -2px;
      background-repeat: no-repeat;
  }
  .tabs .wrapper .tabs-toggle[aria-expanded="true"] .bars::before{ transform: translateY(6px) rotate(45deg); }
  .tabs .wrapper .tabs-toggle[aria-expanded="true"] .bars::after{ transform: translateY(-6px) rotate(-45deg); }
  .tabs .wrapper .tabs-toggle[aria-expanded="true"] .bars span{ opacity: 0; }

  .tabs .wrapper .tabs-menu.open ul, 
  .tabs .wrapper .tabs-menu.open ul li {
    display: block !important;
  }
  .tabs .wrapper .tabs-menu.open ul li {
    width: 100%;
    height: 38px;
  }

  /* Выпадающее меню на базе твоего UL */
  .tabs .wrapper .tabs-menu{
    display: none;
    position: absolute;
    top: 52px; left: 10px; right: 10px;
    z-index: 20;
    background: #fff;
    border: 1px solid #cbcbcb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 8px;
  }
  .tabs .wrapper .tabs-menu.open {
    position: fixed;
    left: 35px;
    top: 118px;
    display: block;
    width: 300px;
    min-height: auto;
    border-radius: 0 4px 4px 4px;
  }

  /* Переиспользуем твои кнопки .tab внутри меню – делаем их блочными */
  .tabs .wrapper .tabs-menu ul{
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .tabs .wrapper .tabs-menu ul li{
    display: block;
    margin: 0;
  }
  .tabs .wrapper .tabs-menu ul li + li{ margin-top: 6px; }

  .tabs .wrapper .tabs-menu ul li button.tab{
    display: block;
    width: 100%;
    height: 38px;
    padding: 6px 14px;
    border-radius: 4px;
    border: none;
    background: #fff;
    text-align: left;
  }
  .tabs .wrapper .tabs-menu ul li button.tab:hover{
    background: #f1f1f1;
  }
  .tabs .wrapper .tabs-menu ul li button.tab.active{
    background: rgb(105 164 37 / 90%);
    border-color: rgb(105 164 37 / 90%);
    color: #fff;
  }

  /* Клик вне меню — перекрытие (для больших списков удобно) */
  .tabs .wrapper .tabs-overlay{
    display: none;
    position: fixed; inset: 0; z-index: 15; background: transparent;
  }
  .tabs .wrapper .tabs-overlay.show{ display: block; }
}
@media (max-width: 420px) {
    .tabs .wrapper .tabs-menu.open {
        position: fixed;
        left: 10px;
        top: 100px;
    }
    section.account div.tabs {
      border-radius: 0;
      position: relative;
    }
    section.account div.tabs div.wrapper {
      margin: 0;
      padding: 10px 0 0 0;
    }
}