/* Zoomag scoped audit UI revision, 2026-10-01.
 * Loaded after zm-layout-adaptation-20260930.css.
 * Only full search cards/toolbar and the phone home intro are changed.
 * Native commerce data, media, overlays and product safe mode stay intact.
 */

/* A search card should follow its content rather than the historic
 * 470/500px storefront minimum. The row still aligns its native controls. */
html body.zm-storefront-r19 #product-search.zm-search-page .zm-search-result-card > .petz-product-card {
  box-sizing: border-box !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
}
html body.zm-storefront-r19 #product-search.zm-search-page .petz-content-section {
  min-height: 0 !important;
  padding: 12px !important;
  gap: 8px !important;
}
html body.zm-storefront-r19 #product-search.zm-search-page .petz-product-name {
  min-height: 0 !important;
  margin: 0 !important;
}
html body.zm-storefront-r19 #product-search.zm-search-page .petz-product-name a {
  -webkit-line-clamp: 3 !important;
}
html body.zm-storefront-r19 #product-search.zm-search-page .petz-features:not(:has(.petz-feature)) {
  display: none !important;
}

/* Keep the label intact when the desktop select would otherwise shrink it. */
@media (min-width: 992px) {
  html body.zm-storefront-r19 #product-search.zm-search-page .zm-search-results-toolbar__controls {
    flex: 0 1 360px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 10px !important;
  }
  html body.zm-storefront-r19 #product-search.zm-search-page .zm-search-results-toolbar__controls > label {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    width: auto !important;
    white-space: nowrap !important;
    word-break: normal !important;
  }
  html body.zm-storefront-r19 #product-search.zm-search-page .zm-search-results-toolbar__controls > .form-select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Retain the complete H1, intro, three benefits and both home actions.
 * Phone visitors reach the category choices with less vertical scrolling. */
@media (max-width: 575.98px) {
  html body.zm-storefront-r19 #common-home.zm-home-layout-r34 .zm-home-intro-r99 {
    padding: 14px !important;
    margin-bottom: 12px !important;
    min-height: 0 !important;
  }
  html body.zm-storefront-r19 #common-home.zm-home-layout-r34 .zm-home-intro-r99 .zoomag-home-banner-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body.zm-storefront-r19 #common-home.zm-home-layout-r34 .zm-home-intro-r99 .zm-home-intro-r99__eyebrow {
    margin: 0 0 7px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: .035em !important;
  }
  html body.zm-storefront-r19 #common-home.zm-home-layout-r34 .zm-home-intro-r99 .zoomag-home-banner-title {
    margin: 0 0 9px !important;
    font-size: 26px !important;
    line-height: 1.16 !important;
  }
  html body.zm-storefront-r19 #common-home.zm-home-layout-r34 .zm-home-intro-r99 .zoomag-home-banner-subtitle {
    margin: 0 0 11px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  html body.zm-storefront-r19 #common-home.zm-home-layout-r34 .zm-home-intro-r99 .zoomag-home-banner-features {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  html body.zm-storefront-r19 #common-home.zm-home-layout-r34 .zm-home-intro-r99 .zoomag-home-feature-badge {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 5px 7px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }
  html body.zm-storefront-r19 #common-home.zm-home-layout-r34 .zm-home-intro-r99 .zm-home-intro-r99__actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  html body.zm-storefront-r19 #common-home.zm-home-layout-r34 .zm-home-intro-r99 .zm-home-intro-r99__actions > a {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 8px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    text-align: center !important;
    white-space: normal !important;
  }
}