/* 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;
}

.block-product-card--coming-soon .block-product-price,
.block-product-card--coming-soon .product-plugin-comment-rate-star {
  display: none !important;
}

.block-product-card__release-date {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-block: 6px 0;
  color: rgb(var(--color-text));
  font-size: 12px;
  line-height: 1.4;
}

.block-product-card__release-date time {
  font-weight: 600;
}

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