/* v0.9.8 — the active-filter state must not stretch the hero. */
#ajax-content-wrap .container.main-content .te-classic-shell .te-classic-hero {
  min-height: 0 !important;
  height: auto !important;
  block-size: auto !important;
  grid-auto-rows: auto !important;
  align-content: start !important;
}

#ajax-content-wrap .container.main-content .te-classic-shell .te-classic-hero-copy,
#ajax-content-wrap .container.main-content .te-classic-shell .te-hero-side {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  align-self: start !important;
}

#ajax-content-wrap .container.main-content .te-classic-shell .te-active-filters {
  width: 100% !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
}

/* On desktop the selected-filter chips use their natural content width. */
@media (min-width: 561px) {
  #ajax-content-wrap .container.main-content .te-classic-shell .te-active-filter {
    flex: 0 0 auto !important;
    width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
  }

  #ajax-content-wrap .container.main-content .te-classic-shell .te-active-filter-label {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
}

/* On a narrow phone the chip still remains inside the viewport. */
@media (max-width: 560px) {
  #ajax-content-wrap .container.main-content .te-classic-shell .te-active-filter {
    max-width: 100% !important;
  }

  #ajax-content-wrap .container.main-content .te-classic-shell .te-active-filter-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}