/*
 * Rows render on the server; the reserved height keeps the page from shifting while images load.
 * Heights were measured on Flatsome product boxes (image, badges, name, rating, price): one row of
 * cards is about 28rem on desktop (re-measured in 0.6.2: 27.5rem), 29rem on tablets (3 columns) and
 * 23.5rem on phones (2 columns), plus about 5rem for the title and reason line. Override the custom properties in a child theme
 * if the product boxes are taller or shorter.
 */
.tp-reco {
  --tp-reco-row-height: 28rem;
  --tp-reco-head-height: 5rem;
  min-height: calc(var(--tp-reco-rows, 1) * var(--tp-reco-row-height) + var(--tp-reco-head-height));
  margin: 1.5em 0 0.5em;
}

.tp-reco--no-header {
  --tp-reco-head-height: 0rem;
}

/* An empty fallback stays invisible until a usable personal answer arrives. */
.tp-reco[hidden] {
  display: none !important;
}

.tp-reco__reason {
  margin: -0.5em auto 1em;
  font-size: 0.9em;
  opacity: 0.75;
}

/* Give IntersectionObserver a measurable target below the product grid. */
.tp-reco__more {
  clear: both;
  min-height: 1px;
  width: 100%;
  text-align: center;
}

@media (min-width: 550px) and (max-width: 849px) {
  .tp-reco {
    --tp-reco-row-height: 29rem;
    min-height: calc(var(--tp-reco-rows-tablet, 2) * var(--tp-reco-row-height) + var(--tp-reco-head-height));
  }
}

@media (max-width: 549px) {
  .tp-reco {
    --tp-reco-row-height: 23.5rem;
    min-height: calc(var(--tp-reco-rows-mobile, 2) * var(--tp-reco-row-height) + var(--tp-reco-head-height));
  }
}

/*
 * Personal rows (0.8.0): every item of a swapped-in row carries a short reason line from its
 * data-tp-reco-why attribute. It is plain CSS content, so nothing in the theme's product box is
 * edited. The line adds about 1.2rem to a product box; if the reserved row height is tight on a
 * store, raise --tp-reco-row-height for .tp-reco--personalised in the child theme.
 */
.tp-reco--personalised [data-tp-reco-why]::after {
  content: attr(data-tp-reco-why);
  display: block;
  margin-top: 0.25em;
  font-size: 0.75em;
  line-height: 1.3;
  text-align: center;
  opacity: 0.7;
}