@layer components {
  .product-query-form {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--block-space);

    .text {
      grid-column: span 2;
    }

    .category {
      grid-column: span 1;

      select {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .order {
      grid-column: span 1;
    }
  }

  .products-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: var(--block-space);

    .product-card {
      display: grid;
      grid-template-rows: auto 1fr;
      gap: var(--block-space-half);

      .product-image {
        width: 100%;
        aspect-ratio: 1/1;
        background-color: color-mix(in oklch, var(--color-text), transparent 90%);
      }

      .product-name {
        color: var(--color-text-deep);
        font-size: medium;
        margin-bottom: var(--block-space-half);
      }
    }
  }

  .product-banner {
    width: 100%;
    padding: var(--block-space) var(--inline-space);
    border: 1px solid gray;
    border-radius: var(--border-radius, 0.5em);
    display: grid;
    gap: var(--inline-space);
    grid-template-columns: 1fr auto;

    .product-name {
      font-size: 1.25rem;
    }
  }

  .product-counter {
    font-size: 1rem;
  }

  .product-data-minimal {
    display: flex;
    justify-content: space-between;
    gap: var(--block-space-half);

    h2 {
      font-size: 1rem;

      a {
        text-decoration: none;
      }
    }
  }
}