/* Fixed card layout (no editor layout setting): one column, the image block then the info block. */
.block-product-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 0;
  --info-row-gap: 16px;
}

@media (max-width: 959px) {
  .block-product-card {
    --info-row-gap: 8px;
  }
}

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

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

/* The image-to-text gap sits on the info block only, so anything after it (e.g. the reviews app's
   star rating) follows the price closely instead of taking the 16px card gap. */
.block-product-card > .block-product-card-info {
  margin-top: 16px;
}

.block-product-card .block-product-title {
  padding-block: 0;
}

.block-product-card .product-plugin-comment-rate-star {
  margin-top: 6px;
  margin-bottom: 0;
}

@media (max-width: 959px) {
  .block-product-card > .block-product-card-info {
    margin-top: 8px;
  }
}