:root {
  --main-bg: #ffffff;
  --main-text: #222222;
  --main-hover-bg: #f3f3f3;
  --main-active-bg: #5C724A;
  --main-active-text: #ffffff;
  --sub-bg: #fafafa;
  --sub-text: #333333;
  --sub-hover-bg: #eeeeee;
  --sub-active-bg: #5C724A;
  --sub-active-text: #ffffff;
  --border-color: #dddddd;
  --border-radius: 12px;
  --icon-size: 22px;
  --main-font-size: 14px;
  --sub-font-size: 13px;
  --padding: 12px 18px;
  --gap: 10px;
  --transition: 0.3s ease;
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.cat-nav-395 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cat-nav-main-wrapper, .cat-nav-sub-group {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap);
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-nav-main-wrapper::-webkit-scrollbar, .cat-nav-sub-group::-webkit-scrollbar {
  display: none;
}

.cat-nav-main-item, .cat-nav-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--padding);
  background: var(--main-bg);
  color: var(--main-text);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  border: 1px solid var(--border-color);
  font-size: var(--main-font-size);
}

.cat-nav-main-item:hover {
  background: var(--main-hover-bg);
}

.cat-nav-main-item.active {
  background: var(--main-active-bg);
  color: var(--main-active-text);
  border-color: var(--main-active-bg);
}

.cat-nav-main-item .cat-icon i,
.cat-nav-main-item .cat-icon svg {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: currentColor;
  font-size: var(--icon-size);
}

.cat-nav-sub-group {
  display: none;
}
.cat-nav-sub-group.show {
  display: flex;
}

.cat-nav-sub-item {
  background: var(--sub-bg);
  color: var(--sub-text);
  font-size: var(--sub-font-size);
}
.cat-nav-sub-item:hover {
  background: var(--sub-hover-bg);
}
.cat-nav-sub-item.active {
  background: var(--sub-active-bg);
  color: var(--sub-active-text);
}

.cat-nav-content-item {
  display: none;
  animation: fadeIn 0.4s ease;
}
.cat-nav-content-item.show {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}