/* Products page: hero background image, filter bar, and empty/error states. */

@layer pages {
  .hero--products {
    background-image: url("../../assets/images/hero/products-hero.svg");
  }

  .product-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-end: var(--space-7);
  }

  .product-state {
    text-align: center;
    padding: var(--space-8) var(--space-5);
    color: var(--color-text-secondary);
  }

  .product-state[hidden] {
    display: none;
  }

  .products-disclaimer {
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
    margin-block-start: var(--space-6);
    font-size: var(--font-size-sm);
  }
}