.catalog-toolbar {
  display: flex;

  justify-content: space-between;
  align-items: end;

  gap: 2rem;

  margin-bottom: 1.4rem;
}


.filter-tabs {
  display: flex;

  gap: 0.5rem;

  flex-wrap: wrap;
}


.filter-btn,
.subfilter-btn {
  padding: 0.72rem 1rem;

  border-radius: 999px;

  border: 1px solid var(--line);

  font-family: var(--font-heading);

  font-weight: 800;
  font-size: 0.82rem;

  color: var(--navy);

  cursor: pointer;
}


.filter-btn.is-active,
.subfilter-btn.is-active {
  background: var(--blue);

  color: white;

  border-color: var(--blue);
}


/* ==============================
   Search Product
============================== */

.search-box {
  position: relative;

  width: min(100%, 360px);

  display: block;
}


/* Sembunyikan label visual Search */
.search-box > span {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}


.search-box input {
  width: 100%;
  height: 50px;

  padding: 0 18px;

  border: 1px solid rgba(6, 43, 92, 0.16);

  border-radius: 14px;

  background: #F8FAFC;

  color: var(--graphite);

  font-size: 0.95rem;
  line-height: 1;

  outline: none;

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    background-color 220ms ease;
}


.search-box input::placeholder {
  color: #8A96A6;

  opacity: 1;
}


.search-box input:hover {
  border-color: rgba(6, 43, 92, 0.28);
}


.search-box input:focus {
  border-color: var(--ocean);

  background: var(--white);

  box-shadow:
    0 0 0 4px rgba(18, 97, 168, 0.08);
}


/* ==============================
   Chemical Subfilters
============================== */

.subfilters {
  display: flex;

  gap: 0.45rem;

  flex-wrap: wrap;

  margin: 0 0 1.4rem;
}


.subfilter-btn {
  padding: 0.5rem 0.8rem;

  background: var(--ice);

  font-size: 0.75rem;
}


.result-count {
  margin-bottom: 1.25rem;

  font-size: 0.88rem;
}


.empty-state {
  grid-column: 1 / -1;

  padding: 3rem;

  border: 1px dashed var(--line);

  border-radius: var(--radius-md);

  text-align: center;
}


/* ==============================
   Responsive
============================== */

@media (max-width: 760px) {

  .catalog-toolbar {
    align-items: stretch;

    flex-direction: column;

    gap: 1.2rem;
  }

  .search-box {
    width: 100%;
  }

  .search-box input {
    width: 100%;

    height: 48px;
  }

}