@layer customer {
  .product-cards {
    --grid-columns: 1;

    display: grid;
    gap: var(--size-4);
    grid-template-columns: repeat(var(--grid-columns), 1fr);
  }

  @container content (width >= 560px) {
    .product-cards {
      --grid-columns: 2;
    }
  }

  @container content (width >= 800px) {
    .product-cards {
      --grid-columns: 3;
    }
  }

  .product-card {
    border-radius: var(--radius-2);
    border: solid 1px var(--product-color);
    box-shadow: var(--shadow-1);
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &:hover {
      box-shadow: var(--shadow-2);
    }
  }

  .product-card\/summary {
    padding: var(--size-2) var(--size-1) 0 var(--size-1);
  }

  .product-card\/name {
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-5);
    margin-bottom: var(--size-2);
    order: 1;
    overflow: hidden;
    padding: 0 var(--size-2);
    text-overflow: ellipsis;
    text-wrap: nowrap;
  }

  .product-card\/price-and-status {
    column-gap: var(--size-1);
    display: flex;
    justify-content: space-between;
    order: 2;
    padding-left: var(--size-2);
  }

  .product-card\/price-label {
    margin-bottom: var(--size-2);
    margin-top: var(--size-1);
  }

  .product-card\/price {
    color: var(--green-9);
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-5);
    white-space: nowrap;
  }

  .product-card\/image {
    aspect-ratio: 1 / 1;
    display: block;
    height: unset;
    margin-bottom: var(--size-1);
    order: 0;
    padding: var(--size-2) var(--size-2) 0 var(--size-2);
    width: 100%;
  }

  .product-card\/status {
    color: var(--product-status-text-color);
    background-color: var(--product-color);
    border-top-left-radius: var(--radius-2);
    min-width: 0;
    overflow: hidden;
    padding: var(--size-1) var(--size-2) var(--size-1) var(--size-2);
    text-align: right;
    text-overflow: ellipsis;
  }

  .product-card\:no_order,
  .product-card\:available {
    --product-color: var(--gray-2);
    --product-status-text-color: inherit;
  }

  .product-card\:ordered {
    --product-color: var(--green-7);
    --product-status-text-color: white;
  }

  .product-card\:unavailable {
    --product-color: var(--gray-2);
    opacity: 0.5;
  }

  .product-card\:overordered,
  .product-card\:backordered {
    --product-color: var(--red-6);
    --product-status-text-color: white;
  }
}