/* THEME_FILTER_V1 — tags of the filter by theme (listing pages). Renderer: includes/theme-filter.php. */
.cms-theme-filter {
  width: min(100%, var(--container, 1220px));
  margin: clamp(18px, 2.4vw, 28px) auto clamp(22px, 3vw, 36px);
}
.cms-theme-filter__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cms-theme-filter__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid color-mix(in srgb, var(--color-text, #20212a) 14%, transparent);
  border-radius: 999px;
  color: var(--color-text, #20212a);
  background: var(--color-surface, #fff);
  font: 600 14px/1.2 var(--font-body, system-ui);
  text-decoration: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.cms-theme-filter__tag b {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--color-text-muted, #69707d);
  background: color-mix(in srgb, var(--color-text, #20212a) 7%, transparent);
  font-size: 12px;
  text-align: center;
}
.cms-theme-filter__tag:hover { border-color: color-mix(in srgb, var(--color-accent, #35d6c2) 60%, transparent); }
.cms-theme-filter__tag.is-active {
  border-color: var(--color-dark-bg, #161523);
  color: #fff;
  background: var(--color-dark-bg, #161523);
}
.cms-theme-filter__tag.is-active b { color: var(--color-dark-bg, #161523); background: var(--color-accent-2, #f3b44e); }
@media (max-width: 700px) {
  .cms-theme-filter__inner { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .cms-theme-filter__inner::-webkit-scrollbar { display: none; }
  .cms-theme-filter__tag { flex: 0 0 auto; }
}

/* HUB_FILTER_V1: a filtered-out item is hidden, whatever its own display. */
[data-filter-item][hidden], [data-filter-group][hidden] { display: none !important; }
