@layer components {
  .product-filter-form {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-lg-x1);
    row-gap: var(--space-sm-x2);
    width: 100%;
    max-width: var(--max-reach-lg-x6);
    margin-inline: auto;
  }

  .product-filter-form__field {
    display: flex;
    align-items: center;
    gap: var(--space-sm-x2);
  }

  .product-filter-form__label {
    font-weight: var(--font-weight-semi-bold);
  }

  .product-filter-form__select {
    background-color: var(--color-white);
    border-radius: var(--border-radius-2);
    border: var(--border-width-2) solid var(--color-primary-1);
    padding: var(--space-sm-x3) var(--space-sm-x2);
    cursor: pointer;

    &:hover,
    &:focus,
    &:active {
      border-color: var(--color-primary-2);
    }
  }

  /* --- Media queries (smallest → largest) --- */

  /* break-sm-x1: 40rem (640px) */
  @media (width >= 40rem) {
  }

  /* break-md: 48rem (768px) */
  @media (width >= 48rem) {
  }

  /* break-lg-x1: 64rem (1024px) */
  @media (width >= 64rem) {
  }

  /* break-lg-x2: 80rem (1280px) */
  @media (width >= 80rem) {
  }
}