@layer customer {
  .product {
    display: flex;
    flex-direction: column;
  }

  .product\/image {
    display: block;
    height: unset;
    margin: 0 auto var(--size-4) auto;
    max-width: 512px;
    width: 100%;
  }

  @media (min-width: 1024px) {
    .product {
      flex-direction: row;
      column-gap: var(--size-4);
      align-items: start;
    }

    .product\/image {
      width: 256px;
    }
  }

  @media (min-width: 1100px) {
    .product\/image {
      width: 384px;
    }
  }


  @media (min-width: 1200px) {
    .product\/image {
      width: 512px;
    }
  }

  .product\/content {
    flex: 1 1 auto;
  }

  .product\/status-container {
    background-color: var(--gray-2);
    border-radius: var(--radius-2);
    margin-bottom: var(--size-2);
    overflow: clip;
    padding: var(--size-2);
  }

  .product\/status {
    display: flex;
    flex-direction: row;
    column-gap: var(--size-2);
    align-items: center;
    justify-content: space-between;

    .product\/status-container[data-product-count-show] & {
      display: none;
    }
  }

  .product\/price-container {
    color: var(--gray-7);
    margin-bottom: var(--size-4);
    text-align: right;
  }

  .product\/price {
    color: var(--green-9);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-5);
  }

  .product\/description {
    margin-bottom: var(--size-4);
  }

  .product\/quantity {
    font-weight: var(--font-weight-6);
  }

  .product\/price {
    content: var(--gray-12);
    font-weight: var(--font-weight-6);
  }

  .product\/count-container {
    position: static;
    width: 100%;
    background: transparent;
  }

  .product\/count-form {
    display: flex;
    flex-direction: row;
    column-gap: var(--size-2);
    align-items: center;
    justify-content: space-between;
  }

  .product\/count-actions {
    display: flex;
    flex-direction: row;
    column-gap: var(--size-1);
  }

  .product\/count\:error {
    animation: var(--animation-shake-x);
  }
}