/* Compact the Shopify clip popup when exactly one product is assigned.
   Multi-product trays retain their existing horizontal carousel layout. */

@media (max-width: 699px) {
  .v2-vec-clip-commerce.is-single-product {
    right: auto;
    width: min(292px, calc(100vw - 100px));
  }

  .v2-vec-clip-commerce.is-single-product .v2-vec-clip-commerce-row {
    display: block;
    overflow: hidden;
  }

  .v2-vec-clip-commerce.is-single-product .v2-vec-clip-product {
    width: 100%;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 3px;
  }

  .v2-vec-clip-commerce.is-single-product .v2-vec-clip-product > span {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .v2-vec-clip-commerce.is-single-product .v2-vec-clip-product > b {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin-top: 0;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .v2-vec-clip-commerce.is-single-product .v2-vec-clip-product > small {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 0;
  }
}

@media (min-width: 700px) {
  .v2-vec-clip-commerce.is-single-product {
    width: min(350px, calc(100vw - 56px));
  }

  .v2-vec-clip-commerce.is-single-product .v2-vec-clip-commerce-row {
    display: block;
    overflow: hidden;
  }

  .v2-vec-clip-commerce.is-single-product .v2-vec-clip-product {
    width: 100%;
    display: grid;
    grid-template-columns: 105px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
  }

  .v2-vec-clip-commerce.is-single-product .v2-vec-clip-product > span {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .v2-vec-clip-commerce.is-single-product .v2-vec-clip-product > b {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin-top: 0;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .v2-vec-clip-commerce.is-single-product .v2-vec-clip-product > small {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 0;
  }
}