/* Compact category intro: keep the first product row visible in the opening viewport. */
.listing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  margin: 8px auto 10px;
  padding: 12px 18px 12px 24px;
  border-radius: 15px;
  box-shadow: 0 6px 16px rgba(16, 25, 35, .035);
}

.listing-hero .eyebrow {
  display: none;
}

.listing-hero h1 {
  margin: 0 0 4px;
  color: #131d29;
  font-size: clamp(22px, 2.15vw, 28px);
  font-weight: 790;
  letter-spacing: -.035em;
  line-height: 1.08;
}

.listing-hero p {
  display: -webkit-box;
  max-width: 920px;
  margin: 0;
  overflow: hidden;
  color: #627187;
  font-size: 12.5px;
  font-weight: 520;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.listing-hero > strong {
  align-self: center;
  justify-self: end;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 760;
  white-space: nowrap;
}

.listing-hero + .listing,
.listing-hero + .section {
  margin-top: 0;
}

@media (max-width: 720px) {
  .listing-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 60px;
    margin: 6px auto 8px;
    padding: 9px 10px 9px 16px;
    border-radius: 12px;
  }

  .listing-hero h1 {
    margin: 0;
    font-size: clamp(18px, 5.2vw, 21px);
    line-height: 1.12;
  }

  .listing-hero p {
    display: none;
  }

  .listing-hero > strong {
    padding: 5px 8px;
    font-size: 10.5px;
  }
}

@media (max-width: 380px) {
  .listing-hero {
    padding-left: 13px;
  }

  .listing-hero h1 {
    font-size: 17px;
  }
}