/* See ./product-hero-info.md for design notes and rationale. */

.product-hero-info-wrapper {
  margin-block-start: var(--ll-space-5);
}

.product-hero-info {
  display: block;
  width: 100%;
  color: var(--ll-color-text-secondary);
}

/* Reveal the decorated root past the styles.css FOUC failsafe */
.product-hero-info > .product-hero-info__inner {
  display: block;
  width: 100%;
}

/* Group rhythm */
.product-hero-info__inner > .trustpilot-rating {
  margin-block-start: var(--ll-space-5);
}

/* Tagline (plain review fallback) */
.product-hero-info__inner > .trustpilot-rating--plain {
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
}

.product-hero-info__name-group {
  width: 100%;
}

.product-hero-info__heading {
  margin: 0;
}

.product-hero-info__tag {
  display: block;
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  font-weight: var(--ll-text-body-xs-weight);
  opacity: 0.7;
  margin: 0;
}

.product-hero-info__name {
  display: block;
  font-family: var(--ll-text-h5-family);
  font-size: var(--ll-text-h5-size);
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h5-letter-spacing);
  font-weight: var(--ds-font-weight-medium); /* Figma PRIMARY/H5/Medium = 500, not LL's default semibold */
  margin: 0;
}

/* Pills row */
.product-hero-info__pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ll-space-3);
  margin: 0;
  margin-block-start: var(--ll-space-5);
  padding: 0;
  list-style: none;
}

.product-hero-info__pill {
  display: inline-flex;
  align-items: center;
  padding: var(--ll-space-2) var(--ll-space-4); /* 4px 12px at SM/MD */
  border-radius: 18px;
  background: color-mix(in srgb, var(--ll-color-bg-sale-accent) 25%, transparent);
  color: var(--ll-color-text-secondary);
  font-family: var(--ll-text-label-family);
  font-size: var(--ll-text-label-size);
  line-height: var(--ll-text-label-line-height);
  letter-spacing: var(--ll-text-label-letter-spacing);
  font-weight: 500;
}

.product-hero-info__description {
  max-width: 64ch;
  margin-block-start: var(--ll-space-5);
}

.product-hero-info__description-line {
  margin: 0;
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
}

.product-hero-info__description-line + .product-hero-info__description-line {
  margin-block-start: var(--ll-space-3);
}

/* LG/XL */
@media (width >= 1024px) {
  .product-hero-info__tag {
    font-family: var(--ll-text-body-sm-family);
    font-size: var(--ll-text-body-sm-size);
    line-height: var(--ll-text-body-sm-line-height);
    letter-spacing: var(--ll-text-body-sm-letter-spacing);
    font-weight: var(--ll-text-body-sm-weight);
  }

  .product-hero-info__name {
    font-family: var(--ll-text-h4-family);
    font-size: var(--ll-text-h4-size);
    line-height: var(--ll-text-h4-line-height);
    letter-spacing: var(--ll-text-h4-letter-spacing);
    font-weight: var(--ds-font-weight-medium); /* Figma PRIMARY/H4/Medium = 500, not LL's default semibold */
  }

  .product-hero-info__pills {
    margin-block-start: var(--ll-space-4);
  }

  .product-hero-info__pill {
    padding: 6px 20px;
  }

  .product-hero-info__description {
    max-width: 56ch;
  }
}