#sidebar {

  width: 14%;
  margin-top: 20px;
  margin-left: 20px;
  float: left;
}
.category {
  padding-bottom: 10px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  width: 100%;
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.35);
  font-family: var(--site-font);
  text-align: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.category h3 {
  font-size: 16px;
  color: rgba(0,0,0,.6);
  margin: 0 0 10px;
  padding: 0 5px;
  position: relative;
}
.category h3:after {
  width: 6px;
  height: 6px;
  background: #80C8A0;
  position: absolute;
  right: 5px;
  bottom: 2px;
  box-shadow: -8px -8px #80C8A0, 0 -8px #80C8A0, -8px 0 #80C8A0;
}
.category ul {
  list-style: none;
  margin: 0;
  padding: 0; 
}
.category li {margin: 12px 0 0 0px;}
.category a {
  text-decoration: none;
  display: block;  
  font-size: 22px;
  color:#FFF8DC;
  padding: 0px;
  position: relative;
  transition: .3s linear;
}
.category a:hover {
  /* keep hover highlight without overriding the glass background */
  background: transparent;
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-shadow: 
    1px 1px 3px #141414,  /* Чёрная тень для 3D эффекта */
    3px 3px 5px #c8c9ca,
    5px 5px 8px #868787,
    8px 8px 12px rgba(109, 106, 106, 0.5); /* Размытая тень для глубины */
}

/* по умолчанию второй уровень скрыт — теперь скрываем через измерение высоты из JS */
.subcategory-list {
  height: 0;                   /* collapsed (JS will animate actual height) */
  overflow: hidden;
  transition: height 320ms cubic-bezier(.2,.9,.2,1), padding 260ms ease, opacity 220ms ease, transform 280ms ease;
  opacity: 0;
  transform: translateY(-6px);
  margin: 0 0 0 12px;          /* небольшой отступ вправо */
  padding: 0;                  /* padding появится при раскрытии */
  list-style: none;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 30px rgba(2,6,23,0.45);
}

/* раскрытая версия — карточка похожая на auth-card (JS управляет height) */
#sidebar .brand-item.open .subcategory-list {
  height: auto;                /* JS will set explicit px during transition then clear to auto */
  opacity: 1;
  transform: translateY(0);
}

/* элементы списка внутри «карточки» */
.subcategory-list li {
  /* более плотная верстка второго уровня */
  padding: 4px 8px;
  margin-bottom: 2px;
  border-radius: 8px;
  color: #cfeff0;
  transition: background .12s ease, color .12s ease;
}
.subcategory-list li a { color: inherit; text-decoration: none; display: block; }
.subcategory-list li:hover { background: transparent; color: #fff; }

/* caret на бренде — SVG + аккуратный hover scale для caret и ссылки */
.brand-item.has-children > .brand-link {
  position: relative;
  padding-right: 34px;
  transition: transform .18s cubic-bezier(.2,.9,.2,1);
  display: inline-flex;
  align-items: center;
}
.brand-item.has-children > .brand-link::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%) rotate(0deg) scale(1);
  transition: transform .24s cubic-bezier(.2,.9,.2,1), opacity .12s ease, filter .12s ease;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  /* chevron SVG (stroke color uses hex) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfeff0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  opacity: 0.95;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35));
}

/* subtle scale on the entire brand link */
.brand-item.has-children > .brand-link:hover,
.brand-item.has-children > .brand-link:focus,
.brand-item.has-children > .brand-link:focus-visible {
  transform: translateY(-1px) scale(1.02);
}

/* scale the caret on hover/focus */
.brand-item.has-children > .brand-link:hover::after,
.brand-item.has-children > .brand-link:focus::after,
.brand-item.has-children > .brand-link:focus-visible::after {
  transform: translateY(-50%) rotate(0deg) scale(1.18);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
  opacity: 1;
}

/* keep rotated state when open, preserve scale for emphasis */
.brand-item.open > .brand-link::after {
  transform: translateY(-50%) rotate(90deg) scale(1.12);
}

/* keep mobile sensible */
@media (max-width:720px) {
  #sidebar { width: 100%; margin-left: 0; }
  #sidebar .brand-item.open .subcategory-list { height: auto !important; }
} 

/* элементы списка внутри «карточки» */
.subcategory-list li {
  /* ещё меньше пространства между пунктами */
  padding: 2px 6px;
  margin-bottom: 1px;
  border-radius: 6px;
  color: #cfeff0;
  transition: background .12s ease, color .12s ease;
}
.subcategory-list li a { color: inherit; text-decoration: none; display: block; }
.subcategory-list li:hover { background: transparent; color: #fff; }



/* необязательно — курсор и небольшой указатель, что есть подменю */
.brand-item.has-children > .brand-link {
  cursor: pointer;
}



@media (max-width: 480px) {
    #sidebar {
        width: 99%;
        margin-left: 0px;
    }
    .category {
      width: 48%;
    }
    .category li {margin: 6px 0 0 0px;}
    .category a {
      font-size: 20px;
    }
  };