/* Product hero layout unification (2026-10-22).
   Desktop only: the main photo box and the info column share one fixed height,
   and the Request Datasheet / Quote buttons sit on the bottom edge of the info
   column, so they line up with the bottom of the main photo and land at the
   same height on every product page. Tagline is held to two lines and the chips
   and spec cards are compacted so pages fit inside that height. */
@media (min-width: 901px) {
  body .product-hero { align-items: start; }
  body .product-hero .gal-main { min-height: 575px; }
  body .product-hero .product-info {
    display: flex;
    flex-direction: column;
    min-height: 575px;
  }
  body .product-hero .product-tagline {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
    line-height: 1.45;
    margin-bottom: 1.1rem;
  }
  body .product-hero .badges {
    gap: .45rem;
    margin-bottom: 1.2rem;
  }
  body .product-hero .badge {
    padding: .34rem .62rem;
    font-size: .74rem;
    gap: .3rem;
  }
  body .product-hero .quick-specs { gap: .6rem; margin-bottom: 1.2rem; }
  body .product-hero .qs-item { padding: .7rem .5rem; }
  body .product-hero .product-actions { margin-top: auto; }
}

/* Dense pages (many chips, long spec values or a two-line name): a tighter
   version of the same layout so they still fit the shared height. */
@media (min-width: 901px) {
  body.hero-dense .product-hero .product-name { font-size: clamp(1.9rem, 3vw, 2.4rem); }
  body.hero-dense .product-hero .product-tagline { margin-bottom: .8rem; }
  body.hero-dense .product-hero .badges { gap: .35rem; margin-bottom: .9rem; }
  body.hero-dense .product-hero .badge { padding: .28rem .5rem; font-size: .7rem; }
  body.hero-dense .product-hero .quick-specs { gap: .45rem; margin-bottom: .9rem; }
  body.hero-dense .product-hero .qs-item { padding: .5rem .4rem; }
  body.hero-dense .product-hero .qs-value { font-size: .85rem; line-height: 1.25; }
  body.hero-dense .product-hero .qs-label { font-size: .62rem; }
  body.hero-dense .product-hero .height-variants { margin-bottom: 0; }
  body.hero-dense .product-hero .product-info > div:has(.height-variants) { margin-bottom: .8rem !important; }
}