/* TOMBOL KATEGORI — SILVER CHROME */
#categoryList {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 6px 2px 10px !important;
  scrollbar-width: none !important;
}

#categoryList::-webkit-scrollbar {
  display: none !important;
}

#categoryList .category-btn {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  flex: 0 0 auto !important;
  padding: 7px 11px !important;
  border: 2px solid #c9d2dc !important;
  border-radius: 9px 12px 7px 12px !important;
  background: linear-gradient(155deg,#29252b,#09080b 55%,#020203) !important;
  color: #fff !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.55),
    inset 0 -3px 4px rgba(35,42,52,.8),
    0 0 0 1px #343b45,
    0 5px 14px rgba(0,0,0,.65) !important;
}

#categoryList .category-btn::after {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  width: 46% !important;
  height: 85% !important;
  border-radius: inherit !important;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,.75),
    rgba(185,195,215,.35) 25%,
    transparent 70%
  ) !important;
  clip-path: ellipse(100% 100% at 0% 0%);
  pointer-events: none !important;
}

#categoryList .category-btn.active {
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.55),
    0 0 0 1px #343b45,
    0 0 9px rgba(255,45,75,.35) !important;
}

/* KATEGORI LEBIH KECIL */
#categoryList .category-btn {
  padding: 4px 8px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  border-width: 1.5px !important;
}

#categoryList {
  gap: 6px !important;
}