@layer components {
  .quick-filter {
    padding: 12px 16px 15px;
  }

  /* Desktop shell merges the search input into the unified filter bar
     (see `_match_filters.html.twig`), so the standalone mobile bar
     is hidden at ≥1200px. */
  @media (width >= 1200px) {
    .has-desktop-shell .quick-filter {
      display: none;
    }
  }

  .quick-filter__wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  .quick-filter__icon {
    position: absolute;
    left: 12px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke: var(--color-text-muted);
    stroke-width: 2;
    fill: none;
    pointer-events: none;
  }

  .quick-filter__input {
    width: 100%;
    min-height: 44px;
    padding: 10px 36px;
    background: var(--color-surface);
    border: none;
    border-radius: 12px;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: var(--weight-normal);
    outline: none;
    min-width: 0;
  }

  .quick-filter__input:focus {
    box-shadow: 0 0 0 2px var(--color-accent);
  }

  .quick-filter__input::placeholder {
    color: var(--color-text-muted);
  }

  /* Light themes: surface bg has minimal contrast against white body — add explicit border */
  :root[data-theme^="light"] .quick-filter__input {
    border: 1px solid var(--color-border);
  }
}