/* ============================================================
   ARC CATEGORY BAR — baris tautan kategori

   File terpisah, class sendiri (.arc-catbar*), tanpa JS. Tidak berbagi
   satu baris pun dengan widget ARC yang lain, dan cuma dimuat kalau
   widget ini benar-benar dipasang.
   ============================================================ */

.arc-catbar {
  --arc-cb-gap: 22px;
  --arc-cb-justify: flex-start;
  --arc-cb-fg: #9a9a9a;
  --arc-cb-fg-h: #000000;
  --arc-cb-fg-active: #000000;
  --arc-cb-line: #000000;
  --arc-cb-weight-active: 700;

  width: 100%;
}

.arc-catbar__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: var(--arc-cb-justify);
  align-items: center;
  gap: var(--arc-cb-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.arc-catbar__item {
  margin: 0;
}

.arc-catbar__link {
  display: inline-block;
  color: var(--arc-cb-fg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.arc-catbar__link:hover,
.arc-catbar__link:focus-visible {
  color: var(--arc-cb-fg-h);
}

/* Halaman yang sedang dibuka.

   Warna DAN tebal huruf dua-duanya berubah, bukan warna saja. Di layar
   kecil atau di bawah sinar matahari, beda abu-abu dengan hitam bisa
   nyaris tidak terlihat - tebal huruf tetap terbaca. */
.arc-catbar__item.is-active .arc-catbar__link {
  color: var(--arc-cb-fg-active);
  font-weight: var(--arc-cb-weight-active);
}

.arc-catbar--underline .arc-catbar__item.is-active .arc-catbar__link {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--arc-cb-line);
}

/* ------------------------------------------------------------
   SATU BARIS YANG BISA DIGESER

   Dipakai kalau kategorinya kebanyakan untuk satu baris. scrollbar-nya
   disembunyikan karena baris ini pendek dan garis abu-abu di bawah
   teks terbaca seperti garis bawah yang salah pasang.
   ------------------------------------------------------------ */

.arc-catbar--scroll .arc-catbar__list {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.arc-catbar--scroll .arc-catbar__list::-webkit-scrollbar {
  display: none;
}

/* ------------------------------------------------------------
   MOBILE: HANYA YANG AKTIF

   Di layar sempit, sepuluh kategori jadi tiga baris dan memakan
   setengah layar sebelum satu produk pun terlihat. Yang ditampilkan
   cukup kategori yang sedang dibuka - fungsinya di sini berubah dari
   "pindah kategori" jadi "kamu sedang di mana".

   Perpindahan kategorinya diurus panel Sort & Filter, yang di mobile
   memang jalur yang lebih pas.
   ------------------------------------------------------------ */

@media (max-width: 767px) {
  .arc-catbar--mobile-solo .arc-catbar__item {
    display: none;
  }

  .arc-catbar--mobile-solo .arc-catbar__item.is-active {
    display: block;
  }
}

/* ------------------------------------------------------------
   PESAN DI EDITOR
   ------------------------------------------------------------ */

.arc-catbar-notice {
  padding: 18px;
  border: 1px dashed #c3c3c3;
  background: #fafafa;
  color: #6b6b6b;
  font-size: 13px;
  text-align: center;
}