.base__outer-wrapper.page-heading{
  border-bottom-left-radius: 50px;
}
.page-heading .module-title{
  margin-bottom:16px;
}
.dealer-search-title {
  background-image:url('https://47418537.fs1.hubspotusercontent-na1.net/hubfs/47418537/website-assests/images/page_title_background.png');
  background-size:cover;
  background-color:var(--primary-2);
  height:200px;
  display:flex;
  align-items:center;
  padding: 0 36px;
  border-bottom-left-radius: 50px;
}

/* Each selector must repeat the scope. Written as `.dealer-search-title h2,h3,h4`
   this matched the scoped h2 PLUS every h3 and h4 on any page loading this
   stylesheet. Verified safe to correct: disabling the rule in the live CSSOM
   changed no heading colours. */
.dealer-search-title h2,
.dealer-search-title h3,
.dealer-search-title h4 {
  color:#ffffff;
}

.dealer-search-wrapper {
  display:flex;
  align-items:stretch;
}

.dealer-search-left {
  max-width:50%;
  width:50%;
}

.dealer-search-right {
  max-width:50%;
  width:50%;
  padding: 0px 80px;
  /* min-height:800px; */
  
}

.dealer-search-map {
  background:var(--tertiary-3);
  border-radius:15px;
  overflow:hidden;
  /* min-height:600px;
  height:600px;
  max-height:90vh; */
}
.dealer-search-contact-data{
  display:flex;
  gap:16px;
  margin-bottom:10px;
}

.dealer-search-contact-data img{
 height:24px;
}


.dealer-search-contact-data p{
 margin:0px;
}

.dealer-search-brief {
  line-height:24px;
  margin-top:16px;
}

.dealer-search-tag-wrapper {
  margin-top:16px;
}

.dealer-search-tag-wrapper span {
  display:inline-block;
  font-size:12px;
  font-weight:700;
  padding:4px 16px;
  background: var(--primary-1);
  border-radius:100px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.dealer-search-tag {

}

.dealer-search-form {
  
}


.text-bold{
  font-weight:700 !important;
}

input.js-ds__keyword,select.js-ds__category {
  max-width:640px;
  /* -webkit-appearance:none;
  appearance:none; */
}


input.js-ds__keyword {
  margin:24px 0px;
}

input.js-ds__keyword::placeholder {
  opacity:1;
  font-weight:700;
  color:var(--primary-2);
}

.dealer-search-results-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Rows are implicit and auto-sized; each card spans 4 of them via subgrid. */
  grid-auto-rows: auto;
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  background:white;
  max-height: 800px;
  overflow-y:auto;
  margin-right:20px;
  background:#fcfcfc;
}

/* Subgrid so cards in the same row share row heights. Previously each card was
   its own flex column, so a two-line address or a wrapped dealer name pushed
   that card's tags and button out of step with its neighbour — measured at 27px,
   exactly one line. The card now inherits the parent grid's rows, so badge,
   name/address, tags and button each line up across the row whatever the
   content length.

   The four rows correspond to the card's four children, which is why the badge
   div is always rendered even when empty. */
.dealer-search-result {
  border-radius:15px;
  padding:20px;
  border:1px solid var(--tertiary-2);
  background:white;
  display:grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap:0;
}

/* Fallback for browsers without subgrid: the original flex column. Cards stay
   usable, they simply do not align across a row. */
@supports not (grid-template-rows: subgrid) {
  .dealer-search-result {
    display:flex;
    flex-direction:column;
  }
}

/* Flex so an empty slot hugs its (absent) content instead of holding a line box. */
.dealer-search-result-badge {
  display:flex;
  align-items:flex-start;
  line-height:0;
  min-height:0;
}

.dealer-search-result-info {
  padding:0px 0px 16px 0px;
  border-bottom:1px solid #d9d9d9;
}

.dealer-search-result-info p.business-name {
  font-weight:700;
  font-size:20px;
  margin-bottom:0px;
}

.dealer-search-result-info p.business-location {
  font-weight:700;
  color:var(--quaternary-3);
  margin-bottom:0px;
}

/* Distance label. Hidden until an origin is set. */
.dealer-search-result-distance {
  font-weight:700;
  font-size:13px;
  color:var(--primary-2);
  margin:4px 0 0 0;
  display:none;
}

.dealer-search-result-distance.is-shown {
  display:block;
}

.dealer-search-origin {
  max-width:640px;
  margin:0 0 16px 0;
  font-size:14px;
  color:var(--quaternary-3);
}



.dealer-search-result-products-wrapper {
  flex-grow:1;
}

/* Equal-width tags on a self-sizing grid. Previously flex with content-sized
   pills, which left a ragged right edge — on a full card the four rows ended
   43, 62, 8 and 157px short of the container.

   auto-fit rather than a fixed column count, so the same rule serves every
   breakpoint: 2 columns in the two-column results view (279px container),
   3 at 1024-1562px where results go full width (440px), and 1 below about
   280px. The 136px floor is what makes it safe — the widest label,
   "Commercial Vacuums", measures 119px at 12px/700, so 8px of horizontal
   padding leaves it fitting inside the narrowest column the grid can create.

   Deliberately no white-space:nowrap and no overflow:hidden. If a future
   category name is longer than the column, it wraps to two lines and the
   grid grows the row; it is never silently cut off. */
.dealer-search-result-products {
  margin:16px 0px 32px 0px;
  width:100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  column-gap:6px;
  row-gap:6px;
}

.dealer-search-result-product {
  background: var(--primary-1);
  border-radius:100px;
  font-size:12px;
  font-weight:700;
  padding:4px 8px;
  text-align:center;
}


.clear_filter_wrapper {
  max-width:640px;
  text-align:right;
  margin-bottom:20px;
  display:flex;
  justify-content: space-between;
}


.button--small {
  display:none;
}

.clear-filters {
  text-decoration:underline !important;
}

@media screen and (max-width: 1440px) {
  .dealer-search-left,.dealer-search-right {
    /* padding: 60px 100px; */
  }
}

@media screen and (max-width: 1200px) {
  .dealer-search-left,.dealer-search-right {
    /* padding: 60px 80px; */
  }
}

@media screen and (max-width: 1024px) {
  .dealer-search-wrapper {
    flex-direction:column;
    align-items:center;
  }
  .dealer-search-left,.dealer-search-right {
    /* padding: 60px 80px; */
    max-width:100%;
    width:100%;
  }
  .dealer-search-left {
    height:calc((100vh - 116px)/2);
    padding:0px !important;;
  }
  .js-map-key {
    min-height:calc((100vh - 116px)/2) !important;
  }
  .dealer-search-right {
    margin-top:40px; 
    padding: 0px;
  }
  input.js-ds__keyword,select.js-ds__category,.clear_filter_wrapper {
    max-width:100%;
    width:100% !important;
  }
}

@media screen and (max-width: 768px) {
  .dealer-search-left {
    height:calc((80vh - 116px)/2);
    padding:0px !important;
    position: sticky;
    top: 120px;
    z-index:20;
  }
  .js-map-key {
    min-height:calc((80vh - 116px)/2) !important;
  }

  .dealer-search-results-wrapper {
    grid-template-columns: auto;
    margin-right:0px;
  }
  .dealer-search-results-wrapper {
    row-gap:25px;
  }
}

@media screen and (max-width: 425px) {
  .dealer-search-left,.dealer-search-right {
    padding: 40px;
  }
  .dealer-search-right {
    margin-top: 0px;
    padding:30px 0 0 0;
  }
  .dealer-search-result-info {
    padding:0px;
  }
  .dealer-search-result {
   
  }
  .dealer-search-results-wrapper {
    row-gap:15px;
  }
  .dealer-search-result-info p.business-name {
    font-size:17px;
  }
  /* Only the margin is tightened here now. The gaps stay at the 6px the grid
     rule sets — a 15px column gap would shrink the columns below the width the
     longest label needs. */
  .dealer-search-result-products {
    margin: 16px 0 16px;
  }

}

@media (min-width: 1024px) and (max-width: 1562px) {
  .dealer-search-results-wrapper {
    grid-template-columns:auto
  }
  .dealer-search-result {
  
  }
}

/*
//////////////////////////////////////////
Google Map Module Styles
//////////////////////////////////////////
*/

.js-map-key {
  height:100%;
  /* max-height:850px; */
  min-height:850px;

}

.gm-style iframe + div { border:none!important; } /* hides focus border */

.map__google-map {
  border-radius: 0;
  height: 100%;
  min-height: 100%;
}

.map__google-map button::before {
  content:none;
}


.map__locations--hidden {
  display: none;
}

.map__infowindow-wrapper {
  word-wrap: break-word;
  max-height: 100%;
  padding: 0 0 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-start;
  position: relative;
  z-index: 0;
  min-width: 200px;
  margin-right: 20px;
}

.map__infowindow-direction a {
    margin-top: 0;
}

.map__infowindow-title {
  font-weight: 800;
  width: 90%;
  text-decoration: none;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1.1;
  
}

.map__infowindow-body {
   
  margin-bottom: auto;
    
}

.map__infowindow-operatingHours {
   
  margin-bottom: auto;
    
}


.poi-info-window div, 
.poi-info-window a {
   
}

.map__infowindow-cta-container {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* override google maps infowindow class styling */
.gm-style-iw {
  padding: 0px !important;
  max-width: 280px !important;
}
  
.gm-style-iw-d {
  padding: 0px !important;
}
  
.gm-ui-hover-effect {
  background-color: #000000 !important;
  min-height: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  width: 20px !important;
  right: 16px !important;
  top: 16px !important;
}

.gm-ui-hover-effect>span {
  background-color: #ffffff !important;
  margin: auto !important;
  width: 20px !important;
  height: 20px !important;
}

.gm-control-active {
  min-height: auto !important;
  min-width: auto !important;
}

.poi-info-window.gm-style {
  padding: 16px 24px 16px 16px;
}

.map__infowindow-email a, .map__infowindow-phone a {
  text-decoration:none;
  color: var(--primary-1) !important;
}
.dealer-search-origin-note {
  font-size:12px;
  color:var(--tertiary-2);
}

.dealer-search-locate {
  max-width:640px;
  margin:0 0 16px 0;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.dealer-search-locate-status {
  font-size:13px;
  color:var(--quaternary-3);
}

.js-ds__locate[disabled] {
  opacity:0.6;
  cursor:default;
}

/* Rank badges. The number on a result card matches the number on its map pin,
   so the list and the map can be read against each other. */
/* Hidden by DEFAULT, shown only when JS gives it a number. Previously this was
   display:inline-flex with a background, so before any filter ran every card
   rendered an empty black circle — the badge element with no text in it. The
   hiding lived in #RenderOrder, which does not run on a plain page load. */
.dealer-search-result-rank {
  display:none;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 5px;
  margin-right:8px;
  border-radius:100px;
  background:var(--primary-2);
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  line-height:1;
  vertical-align:middle;
}

.dealer-search-result-rank.is-shown {
  display:inline-flex;
}

.ds-pin {
  position:relative;
  width:40px;
  height:40px;
}

.ds-pin__num {
  display:none;
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 4px;
  border-radius:100px;
  background:var(--primary-2);
  color:#ffffff;
  font-size:11px;
  font-weight:700;
  line-height:20px;
  text-align:center;
  box-shadow:0 1px 3px rgba(0,0,0,0.4);
}

.ds-pin__num.is-shown {
  display:block;
}