/* Базовые стили */
.mb-nav { position: relative; z-index: 9999; }
.mb-toggle {
  display: flex; align-items: center;
  cursor: pointer; user-select: none;
}
.mb-burger-icon, .mb-close-icon { flex-shrink: 0; }
.mb-close-icon { display: none; }
.mb-label {
  color: #fff; margin-left: .5rem;
  font-size: 1rem; line-height: 1;
  margin-top: -3px; text-transform: uppercase;
}
.mb-nav.open .mb-burger-icon { display: none; }
.mb-nav.open .mb-close-icon  { display: block; }
.mb-overlay {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 998; display: none;
}
.mb-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

.mb-nav.open .mb-overlay { display: block; }

.mb-menu, .mb-brands {
  position: fixed; top: 0; height: 100%;
  width: 380px; max-width: 85%;
  background: #333; color: #fff;
  overflow-y: auto; z-index: 999;
  transition: left .3s ease, right .3s ease;
}
.mb-menu { left: -380px; }
.mb-nav.open .mb-menu { left: 0; }

.mb-brands { right: -380px; padding-top: 2rem; }
.mb-nav.open .mb-brands { right: 0; }

.mb-close-btn {
  position: absolute; top: .5rem; cursor: pointer; color: #fff;
}
#mbClose { right: .5rem; }
#mbCloseBrand { left: .5rem; }

.mb-level1, .mb-level2, .mb-level3 {
  list-style: none; margin: 0; padding: 0;
}
.mb-level1 .mb-item-header, .mb-level2 .mb-item-header, .mb-level3 .mb-item-header {
  display: flex; justify-content: space-between;
  align-items: center; padding: .75rem 1rem;
}
.mb-level2 { padding-left: 1rem; }
.mb-level3 { padding-left: 0.7rem; }
.mb-item-header a, .mb-bottom-link {
  color: #fff; text-decoration: none;
}
.mb-level3 .mb-item-header a { color: #ddd; }

.mb-sub > ul { display: none; }
.mb-sub.open > ul { display: block; }
.mb-arrow {
  transition: transform .3s ease;
  cursor: pointer;
}
.mb-arrow.rotated {
  transform: rotate(180deg);
}

.mb-menu::-webkit-scrollbar,
.mb-brands::-webkit-scrollbar {
  width:3px;
}
.mb-menu::-webkit-scrollbar-thumb,
.mb-brands::-webkit-scrollbar-thumb {
  border-radius:5px; background:#80aa07;
}
.mb-menu::-webkit-scrollbar-track,
.mb-brands::-webkit-scrollbar-track {
  background:#000;
}

.logoinmenu {
  margin: 15px;
  text-align: left;
}
#first_logo_menu { font-size: 39px; font-weight: 900; color: #80aa07; }
#two_logo_menu   { font-size: 36px; font-weight: 100; color: #fff; }
.mb-level1 {margin-top: 5px;}


/* точка перед листьями 2-го уровня (без подменю) */
.mb-level2 li:not(.mb-sub) .mb-item-header a::before {
  content: '•';
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 0.6rem;
  line-height: 1;
  color: #fff;
}

/* точка перед листьями 3-го уровня */
.mb-level3 .mb-item-header a::before {
  content: '•';
  display: inline-block;
  margin-right: 0.5rem;
  font-size: 0.6rem;
  line-height: 1;
  color: #fff;
}

/* --- Мобильный режим --- */
.mb-mobile-panel { display: none; }
.mb-tabs {
  display: none;
  background: #222;
}
.mb-tabs button {
  flex: 1;
  padding: .75rem;
  background: none;
  border: none;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}
.mb-tabs button.active { background: #333; border-top: 1px dotted grey;}
.mb-mobile-content { display: none; }
.mb-mobile-content.active { display: block; }

@media (min-width: 1025px) {
  .mb-brand-search {margin-top: 40px;}
  .is-brands > .mb-search-clear {top: 70%;}
}

@media (max-width: 768px) {
  .mb-menu, .mb-brands { display: none !important; }

  .mb-mobile-panel {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #333; color: #fff;
    overflow-y: auto; z-index: 999;
  }
  .mb-nav.open .mb-mobile-panel { display: block; }

  .mb-tabs { display: flex; }

  .mb-mobile-close {
    position: absolute; top: .5rem; right: .5rem;
    cursor: pointer; color: #fff;
  }

  .mb-search-wrap.is-cats{
    margin-top: 20px;
  }
  .mb-search-wrap.is-brands{
    margin-top: 20px;
  }
}

/* ===== Быстрый поиск (категории/бренды) ===== */
.mb-search-wrap{
  padding: 0 1rem 0.75rem 1rem;
  position: relative;
}

/* меньше снизу у поиска категорий */
.mb-search-wrap.is-cats{
  padding-bottom: 0.35rem;
}

/* чуть больше сверху у поиска брендов (чтобы не наезжало на крестик закрытия) */
.mb-search-wrap.is-brands{
  padding-top: 0.35rem;
}

.mb-search-input{
  width: 100%;
  box-sizing: border-box;
  padding: .55rem 2.2rem .55rem .75rem; /* справа место под крестик очистки */
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  background: #222;
  color: #fff;
  outline: none;
}
.mb-search-input::placeholder{
  color: rgba(255,255,255,.6);
}

/* крестик очистки */
.mb-search-clear{
  position: absolute;
  right: 1.35rem;
  top: 45%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  color: #fff;
  cursor: pointer;
  display: none;
  line-height: 1;
}
.mb-search-clear:hover{
  background: rgba(255,255,255,.16);
}
.mb-search-clear:active{
  background: rgba(255,255,255,.22);
}
.mb-search-clear.is-visible{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}