/* Migrated from WPCode #7084: Elso Hero Clearance + Polish */
/* Elso - Hero clearance + premium polish.
   The Motors theme wraps its header in .header-position-absolute, so the
   header is OUT OF FLOW and overlays the first section of the page. Custom
   heroes therefore need top clearance or the H1 hides behind the nav. */

/* ---- 1. Header clearance ---- */
#ejv .ejv-hero,
#efq .efq-hero,
#efn .efn-hero {
  padding-top: clamp(118px, 13vw, 186px) !important;
  padding-bottom: clamp(46px, 6vw, 88px) !important;
}
.elso-about__hero-copy {
  padding-top: clamp(118px, 13vw, 186px) !important;
}

/* ---- 2. Premium hero typography ---- */
#ejv .ejv-hero h1,
#efq .efq-hero h1,
#efn .efn-hero h1 {
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-wrap: balance;
}
#ejv .ejv-hero p,
#efq .efq-hero p,
#efn .efn-hero p { line-height: 1.6; }

#ejv .ejv-hero,
#efq .efq-hero,
#efn .efn-hero { position: relative; overflow: hidden; }
#ejv .ejv-hero::after,
#efq .efq-hero::after,
#efn .efn-hero::after {
  content: "";
  position: absolute;
  right: -12%;
  top: -40%;
  width: 62%;
  height: 180%;
  background: radial-gradient(closest-side, rgba(217,35,50,.16), transparent 72%);
  pointer-events: none;
}
#ejv .ejv-hero > *,
#efq .efq-hero > *,
#efn .efn-hero > * { position: relative; z-index: 1; }

#ejv .ejv-search { box-shadow: 0 18px 44px rgba(0,0,0,.28); }
#ejv .ejv-search input { height: 54px; padding-block: 0; }
#ejv .ejv-search button { letter-spacing: .6px; }

/* ---- 3. Sticky category bar ---- */
#ejv .ejv-pillbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.94);
}

/* ---- 4. Mobile ---- */
@media (max-width: 900px) {
  #ejv .ejv-hero,
  #efq .efq-hero,
  #efn .efn-hero { padding-top: clamp(104px, 22vw, 150px) !important; }
  .elso-about__hero-copy { padding-top: clamp(104px, 22vw, 150px) !important; }
}
/* ---- 5. About Us: solid white menu bar (match the rest of the site) ---- */
/* The theme marks this page transparent-header, so the nav floated over the
   photo. Give the header the same solid white treatment as every other page
   and restore the standard dark nav + full-colour logo. */
body.transparent-header .header-position-absolute{
  background:#fff !important;
  z-index:5;
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
body.transparent-header .header-position-absolute::before{display:none !important}
body.transparent-header .listing-menu > li > a{
  color:#111 !important;
  text-shadow:none !important;
}
body.transparent-header .listing-menu > li > a:hover,
body.transparent-header .listing-menu > li.current-menu-item > a{color:var(--elso-red,#d92332) !important}
body.transparent-header .listing-logo-main img{filter:none !important;opacity:1 !important}

/* ---- 6. Social wall rhythm ---- */
#ejv .ejv-smedia{aspect-ratio:4/3;max-height:300px}
#ejv .ejv-scard:focus-visible{outline:2px solid var(--r);outline-offset:2px}

/* ---- 7. About hero: photo anchored right, copy column clear ---- */
/* Source image is only 514x510, so object-position cannot shift it
   horizontally at full bleed. Constrain the media to the right instead. */
.elso-about__hero{background:#0b0e10 !important}
.elso-about__hero-media{
  left:auto !important;
  right:0 !important;
  width:min(62%,900px) !important;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 28%,#000 100%) !important;
  mask-image:linear-gradient(to right,transparent 0%,#000 28%,#000 100%) !important;
}
.elso-about__hero-media img{object-position:50% 30% !important}
@media (max-width:900px){
  .elso-about__hero-media{
    width:100% !important;opacity:.42 !important;
    -webkit-mask-image:none !important;mask-image:none !important;
  }
}
/* ---- 8. Mobile: stop content being cut off ---- */
@media (max-width: 900px) {
  /* Trust badges were a 5 x 168px grid (840px) inside a ~370px screen
     with overflow-x:auto, so 3 of 5 were invisible. Wrap them instead. */
  .elso-trust__inner {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    overflow-x: visible !important;
    gap: 14px !important;
  }
  .elso-trust__item { width: auto !important; min-width: 0 !important; }

  /* Showroom widget: the quick-tab strip min-content width (~679px) was
     stretching the main column past the viewport, cutting off cards,
     the price/CTA column and the filter button. */
  #esw-root .esw-wrap { max-width: 100%; overflow-x: clip; }
  #esw-root .esw-main {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #esw-root .esw-tabs {
    min-width: 0 !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  #esw-root .esw-grid,
  #esw-root .esw-card,
  #esw-root .esw-bar,
  #esw-root .esw-body,
  #esw-root .esw-priceCol { min-width: 0 !important; max-width: 100% !important; }
  #esw-root .esw-title { overflow-wrap: anywhere; }

  /* Same guard for the other custom pages. */
  #ejv .ejv-wrap, #efq .efq-wrap, #efn .efn-wrap { max-width: 100%; overflow-x: clip; }
  #ejv .ejv-pills, #efn .efn-chips { min-width: 0; max-width: 100%; }
}
/* ---- 9. Mobile: trust badges strip must flow, not overlap ---- */
/* .elso-trust is position:absolute with a fixed 170px height (one row on
   desktop). Wrapped to 2 columns it needs ~377px, so it overlapped the
   next section. Put it back in normal flow on small screens. */
@media (max-width: 900px) {
  .elso-showroom-hero { height: auto !important; }
  .elso-trust {
    position: static !important;
    height: auto !important;
    margin-top: 18px;
  }
  .elso-trust__inner { height: auto !important; }
}
/* ---- 10. Mobile: About team cards + footer widget spill ---- */
/* .elso-about__team-grid is flex/nowrap with overflow-x:auto, so the second
   team card sat off-screen with no scroll affordance. Stack them instead. */
@media (max-width: 900px) {
  .elso-about__team-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow-x: visible !important;
    gap: 14px !important;
  }
  .elso-about__team-card { width: auto !important; min-width: 0 !important; }
  .widget-wrapper, .socials_widget_wrapper { max-width: 100% !important; overflow-x: hidden; }
}
/* ---- 11. Mega menu, finance gap, about cards, contact icons ---- */

/* A. Showroom mega menu: fit the whole panel without scrolling (desktop). */
@media (min-width: 981px) {
  .elso-nav-mega { padding: 16px 26px 14px !important; }
  .elso-nav-mega__grid { gap: 24px !important; }
  .elso-nav-mega__column { padding-right: 22px !important; }
  .elso-nav-mega__heading { font-size: 16px !important; gap: 8px !important; margin-bottom: 8px !important; }
  .elso-nav-mega__heading-icon { width: 22px !important; height: 22px !important; }
  .elso-nav-mega__rule { margin-bottom: 10px !important; }
  .elso-nav-mega__feature { gap: 13px !important; }
  .elso-nav-mega__feature-media { height: auto !important; }
  .elso-nav-mega__feature-media img { object-fit: contain !important; }
  .elso-nav-mega__feature-copy { font-size: 13px !important; line-height: 1.45 !important; }
  .elso-nav-mega__type-list { grid-auto-rows: 58px !important; row-gap: 0 !important; }
  .elso-nav-mega__type-row { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; }
  .elso-nav-mega__outline { padding-top: 8px !important; padding-bottom: 8px !important; min-height: 0 !important; }
}

/* B. Finance hero: the clearance padding was far more than this page needs
   (its hero already starts below the header), leaving a big empty gap. */
@media (min-width: 981px) {
  #efn .efn-hero { padding-top: clamp(54px, 5vw, 78px) !important; }
}

/* C. About Us "standards" cards: 4 across on desktop (was 3 + 1 wrapping). */
@media (min-width: 1100px) {
  .elso-about__reasons,
  .elso-about__reasons--four {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .elso-about__reasons { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* D. Contact action icons: Font Awesome loads but renders blank glyphs, so
   draw the icons inline instead (phone / WhatsApp / directions). */
.elso-contact-action__icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.elso-contact-action__icon::before {
  content: "" !important;
  display: block;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.elso-contact-action__icon.fa-phone::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11.4 21 3 12.6 3 4c0-.6.4-1 1-1h3.4c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1L6.6 10.8z'/%3E%3C/svg%3E"); }
.elso-contact-action__icon.fa-whatsapp::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5.1-1.3A10 10 0 1 0 12 2zm5.6 14.1c-.2.7-1.3 1.3-1.9 1.4-.5.1-1.1.1-1.8-.1-.4-.1-1-.3-1.7-.6-2.9-1.3-4.8-4.2-4.9-4.4-.2-.2-1.2-1.6-1.2-3s.7-2.1 1-2.4c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2 0 .4-.1.5l-.3.4c-.1.2-.3.3-.1.6.1.2.6 1.1 1.3 1.7.9.8 1.7 1.1 1.9 1.2.2.1.4.1.5-.1l.7-.8c.2-.2.3-.2.5-.1l1.9 1c.2.1.4.2.4.3.1.1.1.6-.1 1.3z'/%3E%3C/svg%3E"); }
.elso-contact-action__icon.fa-map-marker-alt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E"); }

/* E. fa-youtube-play is a Font Awesome 4 name that FA6 no longer ships, so
   it rendered blank. Draw it inline. */
[class*="fa-youtube-play"]::before{
  content:"" !important;
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-0.125em;
  background-color:currentColor;
  -webkit-mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M23 7.5a3 3 0 0 0-2.1-2.1C19 4.9 12 4.9 12 4.9s-7 0-8.9.5A3 3 0 0 0 1 7.5C.5 9.4.5 12 .5 12s0 2.6.5 4.5a3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1c.5-1.9.5-4.5.5-4.5s0-2.6-.5-4.5zM9.8 15.4V8.6l6 3.4-6 3.4z'/%3E%3C/svg%3E");
  mask:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M23 7.5a3 3 0 0 0-2.1-2.1C19 4.9 12 4.9 12 4.9s-7 0-8.9.5A3 3 0 0 0 1 7.5C.5 9.4.5 12 .5 12s0 2.6.5 4.5a3 3 0 0 0 2.1 2.1c1.9.5 8.9.5 8.9.5s7 0 8.9-.5a3 3 0 0 0 2.1-2.1c.5-1.9.5-4.5.5-4.5s0-2.6-.5-4.5zM9.8 15.4V8.6l6 3.4-6 3.4z'/%3E%3C/svg%3E");
}

/* ---- 12. Desktop mega menu: suppress Motors submenu chevrons ---- */
@media (min-width: 1024px) {
  .elso-nav-mega a::before {
    display: none !important;
    content: none !important;
  }
}


/* Migrated from WPCode #6834: Listings Grid - Price Font Size & Padding Fix */
.stm-template-car_dealer_two_elementor.no_margin #wrapper #main .stm-directory-grid-loop:not(.mvl-card-skins) .listing-car-item-meta .car-meta-top .price .normal-price {
	font-size: 16px;
	padding: 8px 0 8px 1px;
}

/* Migrated from WPCode #6833: Single Listing Gallery - Increase Image Max Height */
.motors-elementor-single-listing-gallery .motors-elementor-big-gallery .stm-single-image a img {
  width: 100%;
  height: 100vw;
  max-height: 510px;
  object-fit: cover;
}

.stm-filter-pro-item-heading {
  display: none;
}