/* MOO_SERP_UI_FIX_V1
   Goal:
   - keep Sites results left-aligned instead of overly centered
   - let the main results column use the available width
   - prevent the loading strip/skeleton area from visually dominating the page
*/

body.moo-search-page.moo-ux-sites .moo-search-area,
body.moo-search-page .moo-search-area {
  max-width: none !important;
}

body.moo-search-page.moo-ux-sites .moo-search-content,
body.moo-search-page.moo-ux-sites .moo-search-layout,
body.moo-search-page.moo-ux-sites .moo-serp-layout,
body.moo-search-page.moo-ux-sites .moo-results-layout {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.moo-search-page.moo-ux-sites .moo-main-column,
body.moo-search-page.moo-ux-sites .moo-results-column,
body.moo-search-page.moo-ux-sites .moo-serp-main,
body.moo-search-page.moo-ux-sites .moo-site-results-wrap,
body.moo-search-page.moo-ux-sites .moo-site-results {
  width: 100% !important;
  max-width: 980px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.moo-search-page.moo-ux-sites .moo-site-results {
  justify-content: flex-start !important;
}

body.moo-search-page.moo-ux-sites .moo-site-results > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.moo-search-page.moo-ux-sites .moo-v3-panel,
body.moo-search-page.moo-ux-sites .moo-v3-web-grid {
  max-width: 980px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Make the “still retrieving” bar less intrusive when it is visible */
body.moo-search-page.moo-ux-sites .moo-retrieving-banner,
body.moo-search-page.moo-ux-sites .moo-loading-banner,
body.moo-search-page.moo-ux-sites .moo-source-loading-note {
  margin-top: 10px !important;
  margin-bottom: 14px !important;
  max-width: 980px !important;
}

/* Skeletons should line up with the real result width */
body.moo-search-page.moo-ux-sites .moo-skeleton-card,
body.moo-search-page.moo-ux-sites .moo-loading-skeleton,
body.moo-search-page.moo-ux-sites .moo-result-skeleton {
  max-width: 980px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 1100px) {
  body.moo-search-page.moo-ux-sites .moo-search-shell,
  body.moo-search-page.moo-ux-sites .moo-page-shell,
  body.moo-search-page.moo-ux-sites .moo-serp-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 980px) minmax(280px, 360px) !important;
    column-gap: 28px !important;
    align-items: start !important;
  }
}

@media (max-width: 1099px) {
  body.moo-search-page.moo-ux-sites .moo-main-column,
  body.moo-search-page.moo-ux-sites .moo-results-column,
  body.moo-search-page.moo-ux-sites .moo-serp-main,
  body.moo-search-page.moo-ux-sites .moo-site-results-wrap,
  body.moo-search-page.moo-ux-sites .moo-site-results {
    max-width: 100% !important;
  }
}