/* Smart Search Plugin - Responsive Breakpoints */

  @media (max-width: 768px) {
    .smart-search-inner {
      flex-direction: column;
    }
    .smart-search-results .column {
      width: 100% !important;
      flex: none !important;
    }
    .template2-active .smart-search-results .column {
      padding-left: 35px;
      padding-right: 35px;
    }
    .smart-search-results .column ul {
      max-height: 250px !important;
      overflow-y: auto !important;
      height: auto !important;
    }
  }
@media screen and (max-width: 1440px) {
	.hero-search-wrapper.home-page-search.active-results.has-search-results {
	    width: calc(69.82% + 104px);
	}
	
}
@media (max-width: 1230px) {
	.hero-search-wrapper.home-page-search.sticky-bottom-search.active-results {
	    width: 93%;
	}
}
@media (max-width: 1140px) {
	.hero-search-wrapper.home-page-search.active-results.has-search-results {
	    width: 100%;
	}
	
	.hero-tabs {
	    display: none;
	}


}
@media (max-width: 768px) {
  .hero-search-wrapper {
    width: 96% !important;
    left: 2% !important;
    transform: none !important;
    bottom: 10px !important;
  }

  .hero-search-wrapper .search-bar-container {
    gap: 8px;
  }

  .hero-search-wrapper .services-search__submit {
    padding: 0 20px;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
  }

  .hero-search-bar {
    height: 46px;
    padding: 6px 10px 6px 16px;
  }

  .hero-search-wrapper .smart-search-results {
    flex-direction: column !important;
    max-height: calc(100vh - 200px) !important;
  }

  .hero-search-wrapper .smart-search-results .column {
    width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
  }

  .hero-search-wrapper .smart-search-results .column.products ul {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    gap: 10px;
    max-height: 40vh;
    padding-bottom: 10px !important;
  }

  .hero-search-wrapper .smart-search-results .column.products ul li {
    width: 100%;
    min-width: unset;
  }

  .hero-search-wrapper .smart-search-results .column.products ul li a {
    flex-direction: row !important;
    gap: 12px;
  }

  .hero-search-wrapper .smart-search-results img {
    height: 80px !important;
    width: 80px !important;
    min-width: 80px;
    border-radius: 12px !important;
  }

  .hero-search-wrapper .smart-search-results h3 {
    font-size: 14px;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  .inner-result-container {
    padding: 12px 16px 0 !important;
  }

  .hero-search-wrapper #speech-to-text-button {
    right: 100px !important;
  }

  .hero-search-wrapper #smart-search-category {
    font-size: 12px !important;
    min-width: 50px !important;
    max-width: 60px !important;
  }

  #smart-search-input {
    font-size: 14px !important;
  }

  /* Close button inside blue panel on mobile */
  .hero-search-wrapper .close-btn {
    top: 12px !important;
    right: 12px !important;
  }

  /* Hide the products column bottom fade on mobile */
  .hero-search-wrapper .column.template1.products:after {
    display: none !important;
  }

  /* Consistent scrollbar position across all columns on mobile */
  .hero-search-wrapper .smart-search-results .column ul {
    padding-right: 8px !important;
    padding-left: 0 !important;
  }

  /* Show scrollbar on mobile */
  .hero-search-wrapper .smart-search-results .column ul::-webkit-scrollbar {
    width: 4px !important;
    display: block !important;
  }
  .hero-search-wrapper .smart-search-results .column ul::-webkit-scrollbar-track {
    background: transparent !important;
  }
  .hero-search-wrapper .smart-search-results .column ul::-webkit-scrollbar-thumb {
    background: var(--smart-secondary-color, rgba(255,255,255,0.6)) !important;
    border-radius: 0 !important;
  }

  /* Remove products column border-right on mobile */
  .hero-search-wrapper .column.template1.products {
    border-right: none !important;
    width: 100% !important;
    min-width: 100% !important;
  }

  /* Main results container scrollbar on mobile */
  .hero-search-wrapper .smart-search-results::-webkit-scrollbar {
    width: 4px !important;
    display: block !important;
  }
  .hero-search-wrapper .smart-search-results::-webkit-scrollbar-track {
    background: transparent !important;
  }
  .hero-search-wrapper .smart-search-results::-webkit-scrollbar-thumb {
    background: var(--smart-secondary-color, rgba(255,255,255,0.6)) !important;
    border-radius: 0 !important;
  }
}

/* ===== Mobile results tabs (Template 1 / Hero) ===== */
/* Hidden on desktop; the tab bar is only injected by JS on mobile. */
.ss-mobile-tabs { display: none; }

/* While results are loading, hide the text caret so it can't flash at the top
   of the panel during the first search's layout settle. */
.hero-search-wrapper.ss-loading .smart-search-input,
.hero-search-wrapper.ss-loading #smart-search-input {
  caret-color: transparent !important;
}

@media (max-width: 768px) {
  .ss-mobile-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--smart-results-bg-color, #ffffff);
  }
  .ss-mobile-tabs::-webkit-scrollbar { display: none; }

  /* Tabs use the brand primary colour; label auto-contrasts (WCAG) black/white */
  .ss-mobile-tabs .ss-tab {
    flex: 1 1 auto;
    white-space: nowrap;
    padding: 9px 14px;
    border: 0;
    border-radius: 999px;
    background: var(--smart-title-color, #2F3F8F);
    color: var(--smart-title-contrast-color, #ffffff);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease;
  }
  .ss-mobile-tabs .ss-tab.active {
    opacity: 1;
    font-weight: 700;
  }

  /* Tabbed mode: show only the active section (no cramped stacked columns) */
  .smart-search-inner.ss-tabbed .column { display: none !important; }
  .smart-search-inner.ss-tabbed .column.ss-col-active { display: block !important; }

  /* One section now owns the sheet — give it room instead of a 40vh sliver */
  .smart-search-inner.ss-tabbed .column.ss-col-active ul,
  .hero-search-wrapper .smart-search-inner.ss-tabbed .column.products ul {
    max-height: 60vh !important;
  }
}

/* ===== Mobile hero: input stays docked at the BOTTOM (deterministic) ===== */
/* Force a column order for the open hero so the input can't float above the
   results under a sticky-state combo: close (top) -> results -> input (bottom). */
@media (max-width: 768px) {
  .hero-search-wrapper.home-page-search.active-results .inner-result-container {
    display: flex !important;
    flex-direction: column !important;
  }
  .hero-search-wrapper.home-page-search.active-results .inner-result-container .close-btn {
    order: 0 !important;
  }
  .hero-search-wrapper.home-page-search.active-results .inner-result-container .search-results-append {
    order: 1 !important;
  }
  .hero-search-wrapper.home-page-search.active-results .inner-result-container .hero-search-bar.search-bar-wrap {
    order: 2 !important;
    margin-top: 8px !important;
  }
}