.sidebar-pc {
  display: block;
}

.sidebar-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.categories-nav {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e5e7eb;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0 1rem 0.3rem;
  cursor: pointer;
  text-align: left;
  font-size: 1rem;
  /* transition: all 0.2s ease; */
  border-bottom: 1px solid #e5e7eb;
  border-left: 2px solid transparent;
}
.category-item:hover {
  background: #F8F8F8;
}

.category-item.active {
  font-weight: 600;
  background: #F6F7FC;
  border-right: 2px solid #636880;
}

.category-item-mobile {
  background: #E9EAF2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 0;
}

.category-item-mobile svg{
  height: 36px;
  width: 36px;
}

/* ===== Mobile Sidebar ===== */
.sidebar-mobile {
  display: none;
  margin-bottom: 1.5rem;
}

/* Two-column grid used by the mobile category picker */
.content-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* =========================================================
   Tablet: max-width: 899px — swap desktop rail for mobile grid
   ========================================================= */
@media (max-width: 899px) {
  .sidebar-pc {
    display: none;
  }

  .sidebar-mobile {
    display: block;
  }
}