.block-product-card {
  position: relative;
}

.block-product-card.product-card-style--card {
  background-color: rgb(var(--color-card-background));
}

.block-product-card.product-card-style--card .block-product-price,
.block-product-card.product-card-style--card .block-product-title {
  padding-inline: 8px;
}

/* ========================================================================
   Product card equal-height alignment
   Keeps titles, prices and Add to cart / Sold Out buttons aligned in grids.
   ======================================================================== */
.product-card-shadow-space {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.product-card-shadow-space > .block-product-card,
.block-product-card {
  width: 100%;
  height: 100%;
  min-width: 0;
}

.block-product-card {
  display: flex !important;
  flex-direction: column !important;
}

.block-product-card > .block-product-card-info:not(.block-product-card-info--layer) {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

/* Reserve the same title space for every product card. */
.block-product-card .block-product-title {
  flex: 0 0 auto !important;
  width: 100%;
}

.block-product-card .block-product-title span {
  display: -webkit-box !important;
  min-height: 2.7em;
  max-height: 2.7em;
  overflow: hidden !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/* Keep the price area consistent even when compare-at prices differ. */
.block-product-card .block-product-price {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  width: 100%;
  min-height: 2.8em;
}

.block-product-card .block-product-price .product-price {
  align-content: flex-start;
}

/* Push the action to the bottom and give all states the same dimensions. */
.block-product-card .block-product-buy-button-wrapper {
  display: block;
  width: 100%;
  margin-top: auto !important;
}

.block-product-card .block-product-buy-button {
  width: 100%;
  min-height: 48px;
  height: 48px;
  padding-block: 8px;
  line-height: 1.2;
}

@media (max-width: 959px) {
  /* Three lines work better for two-column mobile product grids. */
  .block-product-card .block-product-title span {
    min-height: 4.05em;
    max-height: 4.05em;
    -webkit-line-clamp: 3 !important;
  }

  .block-product-card .block-product-price {
    min-height: 2.8em;
  }

  .block-product-card .block-product-buy-button {
    min-height: 48px;
    height: 48px;
  }
}