/* v6.9.361 — selected-product information panel presentation fix.
   The legacy carousel detail stylesheet forced all three information cards into
   equal-height rows inside a fixed-height panel. Products with longer copy
   (especially Tankwatch) then overflowed those rows, causing labels/text to
   collide. Let each card size to its own content instead. */

@media (min-width:1181px){
  .hero#home .hero-feature-panel.showroom-v199{
    height:auto!important;
    min-height:0!important;
    grid-template-rows:auto auto!important;
    gap:12px!important;
    padding:18px!important;
    overflow:visible!important;
  }

  .hero#home .showroom-panel-head{
    gap:8px!important;
  }

  .hero#home .showroom-panel-kicker{
    font-size:9.5px!important;
    line-height:1.1!important;
  }

  .hero#home .showroom-panel-name{
    font-size:clamp(30px,2vw,38px)!important;
    line-height:1.02!important;
    letter-spacing:.01em!important;
  }

  .hero#home .showroom-panel-intro{
    max-width:none!important;
    font-size:13px!important;
    line-height:1.48!important;
  }

  .hero#home .showroom-panel-grid{
    display:grid!important;
    grid-template-rows:none!important;
    grid-auto-rows:auto!important;
    gap:9px!important;
    min-height:0!important;
    align-content:start!important;
  }

  .hero#home .showroom-panel-card{
    display:block!important;
    min-height:0!important;
    height:auto!important;
    padding:13px 14px 14px!important;
    border-radius:15px!important;
    overflow:visible!important;
  }

  .hero#home .showroom-panel-card small{
    display:block!important;
    margin:0 0 7px!important;
    font-size:9px!important;
    line-height:1.1!important;
    letter-spacing:.12em!important;
  }

  .hero#home .showroom-panel-card p{
    margin:0!important;
    font-size:12.5px!important;
    line-height:1.43!important;
    overflow-wrap:anywhere!important;
  }
}

/* Slightly tighter copy on narrower desktops while retaining natural card
   height. This keeps the panel clear of the metric strip without clipping. */
@media (min-width:1181px) and (max-width:1500px){
  .hero#home .hero-feature-panel.showroom-v199{
    padding:16px!important;
    gap:10px!important;
  }
  .hero#home .showroom-panel-name{font-size:30px!important}
  .hero#home .showroom-panel-intro{font-size:12.25px!important;line-height:1.42!important}
  .hero#home .showroom-panel-grid{gap:8px!important}
  .hero#home .showroom-panel-card{padding:11px 12px 12px!important}
  .hero#home .showroom-panel-card small{font-size:8.5px!important;margin-bottom:6px!important}
  .hero#home .showroom-panel-card p{font-size:11.75px!important;line-height:1.39!important}
}