/* Keep content centered and consistent */
.container, .stm-container, .vc_container, .wpb_wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

/* Prevent full-width rows from stretching unpredictably before CSS/JS inits */
.vc_row[data-vc-full-width],
.vc_row.vc_row-fluid {
  overflow: visible;
}

/* Reserve space for hero/headers to reduce CLS */
.hero, .homepage-hero, .stm-header {
  min-height: 280px;
}

/* Image elements: keep boxes stable before images load */
img {
  height: auto;
  max-width: 100%;
}

/* If your font files swap late, reduce layout shift */
html { font-display: swap; }

/* Hide default 'no results' placeholder in homepage car search widget */
#filterResultBox {
  display: none;
}

/* Fix Inventory mega menu (boxed) width/positioning - was constrained to trigger width causing narrow single-column dropdown with big gaps */
.stm-layout-header-car_magazine #header .header-magazine .container .magazine-service-right ul.magazine-menu > li.stm_megamenu {
  position: static !important;
}


/* Homepage gold accent touches - match site brand gold (#D99405) */
body.home .stm_widget_recent_news .recent-top::before,
body.home .stm_widget_recent_entries .recent-top::before {
	  background: #D99405 !important;
}
body.home .recent_news_cat.active span,
body.home .recent_news_cat:hover span {
	  color: #D99405 !important;
}
body.home .stm-listing-search-with-car-rating button[type="submit"],
body.home button[style*="7ed321"] {
	  background-color: #D99405 !important;
	  box-shadow: none !important;
}
body.home .btn-magazine-green {
	  background-color: #D99405 !important;
	  box-shadow: rgb(163, 116, 0) 0px 2px 0px !important;
}
body.home .stm_dynamic_listing_filter_with_rating .top-filter-wrap .container::before {
	  background: #D99405 !important;
}
body.home .stm-features-posts-main .features-top::before {
	  background: #D99405 !important;
}
body.home .features-cat-list li.active span,
body.home .features-cat-list li:hover span {
	  color: #D99405 !important;
}


/* Fix INVENTORY mega menu dropdown - restore original tab-style behavior (only one section visible at a time via hover), working around a bug in the theme's "SubMenu Use PostId" menu item option */
html body ul li.menu-item-2701.stm_megamenu > .sub-menu {
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
	  justify-content: flex-start;
	  min-height: 260px;
	  padding: 5px 0px;
}
html body ul li.menu-item-2701.stm_megamenu > .sub-menu::before {
	  content: "";
	  display: block;
	  width: 1px;
	  height: auto;
	  position: absolute;
	  top: 5px;
	  bottom: 5px;
	  left: 18.4%;
	  background: rgb(222, 222, 222);
	  z-index: 0;
	  opacity: 1;
}
html body ul li.menu-item-2701.stm_megamenu > .sub-menu > li {
	  display: flex;
	  flex-flow: row;
	  justify-content: space-between;
	  border: none;
	  position: unset;
	  margin: 0px;
	  padding: 0px;
	  width: 100%;
}
html body ul li.menu-item-2701.stm_megamenu > .sub-menu > li > .menu-title {
	  display: block;
	  width: 18.5%;
	  border-left: 3px solid #fff;
	  font-size: 12px;
	  font-weight: 700;
	  color: #153e4d;
	  text-transform: uppercase;
	  position: relative;
	  transition: 0.2s ease-in-out;
	  cursor: pointer;
	  padding: 15px 10px 13px 15px !important;
}
html body ul li.menu-item-2701.stm_megamenu > .sub-menu > li > .menu-title::after {
	  content: "";
	  font-family: "Font Awesome 6 Free";
	  display: block;
	  position: absolute;
	  font-size: 10px;
	  color: #aaa;
	  right: 10px;
	  top: 50%;
	  transform: translateY(-50%);
}
html body ul li.menu-item-2701.stm_megamenu > .sub-menu > li .stm_mm_post_content {
	  display: none;
	  width: 81.6%;
	  position: absolute;
	  top: 5px;
	  right: 0px;
	  height: 246px;
	  overflow: hidden;
	  padding: 0px 20px 0px 25px;
}
html body ul li.menu-item-2701.stm_megamenu > .sub-menu > li .stm_mm_post_content .nav-tabs .nav-item:hover a {
	  color: rgb(27, 199, 68) !important;
}
html body ul li.menu-item-2701.stm_megamenu > .sub-menu > li:hover > .menu-title {
	  border-left-color: rgb(27, 199, 68);
	  color: rgb(27, 199, 68);
	  background: rgb(245, 247, 247) !important;
}
html body ul li.menu-item-2701.stm_megamenu > .sub-menu > li:hover > .menu-title::after {
	  color: rgb(21, 62, 77);
}
html body ul li.menu-item-2701.stm_megamenu > .sub-menu > li:hover .stm_mm_post_content {
	  display: block;
}
html body ul li.menu-item-2701.stm_megamenu > .sub-menu > li .vc_row .vc_col-sm-4:first-child {
	  position: relative;
}
html body ul li.menu-item-2701.stm_megamenu > .sub-menu > li .vc_row .vc_col-sm-4:first-child::before {
	  content: "";
	  display: block;
	  width: 1px;
	  height: 100%;
	  background: rgb(222, 222, 222);
	  position: absolute;
	  top: 0px;
	  right: 0px;
}
html body.theme-motors #wrapper #header ul li.menu-item-2701.stm_megamenu > .sub-menu > li.active > .menu-title {
	  border-left-color: var(--motors-base-color);
	  color: var(--motors-base-color);
}

/* ============================================================
   INVENTORY mega menu -- brand restyle (black/gold) + real bug fixes
   Root causes found and fixed:
   1) .stm_mm_post_content was hard-capped at height:246px + overflow:hidden,
      which clipped real content -- e.g. "Top Makes" has 6 makes in the DOM
      but only the first was visible. Fixed with a taller cap + scroll.
   2) Vehicle/make title links had white-space:nowrap + text-overflow:ellipsis
      on narrow columns, truncating names like "BMW X3 M...". Now they wrap.
   3) Menu was unstyled (theme default white/green) -- now matches site's
      black/gold/Archivo/Inter/JetBrains Mono branding used across the site.
   Scoped to ul.magazine-menu (desktop) only, so the mobile off-canvas menu
   (ul.magazine-menu-mobile), which also uses .stm_megamenu, is untouched.
   ============================================================ */

html body #wrapper #header ul.magazine-menu li.stm_megamenu > .sub-menu {
  background: #141418 !important;
  border: 1px solid #26262c !important;
  border-top: 2px solid #d99405 !important;
  box-shadow: 0 26px 54px rgba(0,0,0,.6) !important;
}

html body #wrapper #header ul.magazine-menu li.stm_megamenu > .sub-menu > li > .menu-title {
  color: #94949c !important;
  font-family: 'Archivo', Arial, sans-serif !important;
  font-weight: 700 !important;
}
html body #wrapper #header ul.magazine-menu li.stm_megamenu > .sub-menu > li:hover > .menu-title,
html body #wrapper #header ul.magazine-menu li.stm_megamenu > .sub-menu > li.active > .menu-title {
  color: #d99405 !important;
  background: #1a1a20 !important;
  border-left-color: #d99405 !important;
}
html body #wrapper #header ul.magazine-menu li.stm_megamenu > .sub-menu > li > .menu-title::after {
  color: #6f6f77 !important;
  content: "\203a" !important;
  font-family: Arial, sans-serif !important;
  font-size: 15px !important;
}
html body #wrapper #header ul.magazine-menu li.stm_megamenu > .sub-menu > li:hover > .menu-title::after,
html body #wrapper #header ul.magazine-menu li.stm_megamenu > .sub-menu > li.active > .menu-title::after {
  color: #d99405 !important;
}

html body #wrapper #header ul.magazine-menu li.stm_megamenu > .sub-menu > li .stm_mm_post_content {
  height: auto !important;
  max-height: 420px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #141418 !important;
}

html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm_mm_post_content .nav-tabs {
  border-bottom: 1px solid #26262c !important;
}
html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm_mm_post_content .nav-tabs .nav-link {
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: #94949c !important;
  font-family: 'Inter', Arial, sans-serif !important;
  font-weight: 500 !important;
}
html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm_mm_post_content .nav-tabs .nav-item:hover a,
html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm_mm_post_content .nav-tabs .nav-item.active a {
  color: #d99405 !important;
  border-bottom-color: #d99405 !important;
  background: none !important;
}

html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm-mm-vehicle .vehicle-img {
  border: 1px solid #26262c !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm-mm-vehicle:hover .vehicle-img {
  border-color: #d99405 !important;
}
html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm-mm-vehicle .heading-font.price {
  background: rgba(10,10,11,.82) !important;
  color: #d99405 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  padding: 8px 13px !important;
}
html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm-mm-vehicle .title.heading-font a {
  color: #fff !important;
  font-family: 'Archivo', Arial, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
}
html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm-mm-vehicle:hover .title.heading-font a {
  color: #d99405 !important;
}

html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm_mm_top_categories_wrap h3,
html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm-mm-top-vehicles h3 {
  color: #f6f4ef !important;
  font-family: 'Archivo', Arial, sans-serif !important;
}
html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm_mm-cats-grid a,
html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm_mm-cats-grid a .name {
  color: #94949c !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
}
html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm_mm-cats-grid a:hover,
html body #wrapper #header ul.magazine-menu li.stm_megamenu .stm_mm-cats-grid a:hover .name {
  color: #d99405 !important;
}
html body #wrapper #header ul.magazine-menu li.stm_megamenu .top-vehicles li a.normal_font {
  color: #94949c !important;
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
  display: inline-block;
  line-height: 1.4;
}
html body #wrapper #header ul.magazine-menu li.stm_megamenu .top-vehicles li a.normal_font:hover {
  color: #d99405 !important;
}