/* Angka dari habits-site/Shop.dc.html: sidebar 236px, gap blok 30px. */
.hbt-filter { font-family: var(--hbt-font); }

.hbt-filter__blocks { display: flex; flex-direction: column; gap: 30px; }
.hbt-filter__blocks--panel { gap: 26px; }

.hbt-filter__title {
  font-size: 13px; font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hbt-border-2);
}

.hbt-filter__list { display: flex; flex-direction: column; margin-top: 10px; }
.hbt-filter__link {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0;
  font-size: 14px; color: var(--hbt-body); text-decoration: none;
}
.hbt-filter__link:hover { color: var(--hbt-ink); }
.hbt-filter__link.is-active { color: var(--hbt-ink); font-weight: 500; }
.hbt-filter__count { color: #A9A9A1; font-size: 13px; }

.hbt-filter__checks { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.hbt-filter__check {
  display: flex; gap: 10px; align-items: center;
  font-size: 14px; color: var(--hbt-body); text-decoration: none;
}
.hbt-filter__check:hover { color: var(--hbt-ink); }
.hbt-filter__box {
  width: 15px; height: 15px; flex: none;
  border: 1px solid #C9C9C3; border-radius: 3px;
}
.hbt-filter__check.is-active { color: var(--hbt-ink); }
.hbt-filter__check.is-active .hbt-filter__box {
  background: var(--hbt-ink); border-color: var(--hbt-ink);
}

.hbt-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hbt-chip {
  font-size: 13px; color: var(--hbt-ink); text-decoration: none;
  border: 1px solid #E2E2DE; border-radius: var(--hbt-pill);
  padding: 6px 13px;
}
.hbt-chip:hover { border-color: var(--hbt-ink); }
.hbt-chip.is-active { background: var(--hbt-ink); border-color: var(--hbt-ink); color: #fff; }

.hbt-filter__reset {
  align-self: flex-start;
  font-size: 13px; color: var(--hbt-muted); text-decoration: underline;
}
.hbt-filter__reset:hover { color: var(--hbt-ink); }

/* display:none di sini; media query per-instance yang menyalakannya. */
.hbt-filter__mobile { display: none; gap: 10px; margin-bottom: 18px; }
.hbt-filter__mbtn,
.hbt-filter__mbtn:hover,
.hbt-filter__mbtn:focus,
.hbt-filter__mbtn:active {
  flex: 1; height: 46px;
  display: flex; gap: 8px; align-items: center; justify-content: center;
  border: 1px solid #E2E2DE; border-radius: var(--hbt-radius);
  background: #fff; color: var(--hbt-ink);
  font-family: inherit; font-size: 14px; cursor: pointer;
}
.hbt-filter__mbtn:hover,
.hbt-filter__mbtn:focus { border-color: var(--hbt-ink); }
.hbt-filter__mbtn:focus { outline: none; }
.hbt-filter__mbtn:focus-visible { outline: 2px solid var(--hbt-accent); outline-offset: 2px; }

[data-hbt-results].is-busy { opacity: .55; pointer-events: none; }