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

/* The app appends a 23px rating line with 6px/4px margins in its own wrapper.
   Replace this initial spacer in the same style calculation that inserts the real
   row. A card without reviews (or a coming-soon card) has no spacer. */
.block-product-card--has-rating:not(.block-product-card--coming-soon)::after {
  display: block;
  min-block-size: 33px;
  content: "";
}

.block-product-card--has-rating:has(> div > .product-plugin-comment-rate-star)::after {
  display: none;
}

.block-product-card--has-rating:not(.block-product-card--coming-soon) > div:has(> .product-plugin-comment-rate-star) {
  min-block-size: 33px;
}

/* The metafields are authoritative even if the app inserts an empty/zero-review row. */
.block-product-card:not(.block-product-card--has-rating) > div:has(> .product-plugin-comment-rate-star),
.block-product-card--coming-soon > div:has(> .product-plugin-comment-rate-star) {
  display: none;
}

.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;
  }
}