.shp-universal-search{--shp-search-width:100%;position:relative!important;width:var(--shp-search-width)!important;max-width:100%!important;margin:auto;font-family:inherit;z-index:0!important}
.shp-universal-search *{box-sizing:border-box}.shp-universal-search .shp-us-bar{width:100%;display:grid;grid-template-columns:32% minmax(0,1fr) 52px;gap:10px;align-items:center}
.shp-universal-search .shp-us-field{position:relative;width:100%;height:48px;min-height:48px;display:flex;align-items:center;background:#fff;border:1px solid #333;border-radius:7px;overflow:hidden;box-shadow:0 3px 8px rgba(0,0,0,.1)}
.shp-universal-search .shp-us-field:focus-within{border-color:#1677ff;box-shadow:0 3px 8px rgba(0,0,0,.1),0 0 0 2px rgba(22,119,255,.08)}
.shp-us-icon{width:20px;height:20px;flex:0 0 20px;margin-left:14px;color:#999}.shp-us-icon svg{width:20px;height:20px}
.shp-universal-search input{width:100%!important;height:100%!important;padding:0 12px!important;margin:0!important;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;font:inherit!important;font-size:14px!important;color:#222!important}
.shp-universal-search input::placeholder{color:#808080!important;opacity:1}.shp-universal-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.shp-us-button{width:52px!important;height:48px!important;min-height:48px!important;display:flex!important;align-items:center;justify-content:center;padding:0!important;margin:0!important;border:0!important;border-radius:7px!important;background:#1677ff!important;color:#fff!important;cursor:pointer;box-shadow:0 3px 8px rgba(22,119,255,.25)!important}
.shp-us-button svg{width:21px;height:21px;stroke:#fff!important}.shp-us-button:hover{background:#0867e8!important}
.shp-us-results{display:none;position:absolute!important;top:calc(100% + 7px);left:0;width:100%;max-height:500px;overflow:auto;background:#fff;border:1px solid #e1e1e1;border-radius:9px;box-shadow:0 12px 30px rgba(0,0,0,.15);z-index:10!important}
.shp-us-section{padding:9px 14px;background:#f7f8fa;border-bottom:1px solid #eee;color:#777;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.shp-us-result{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid #eee;cursor:pointer}.shp-us-result:hover{background:#f5f8fc}
.shp-us-result-icon{width:40px;height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:8px;background:#f1f3f6;font-size:16px;font-weight:600}.shp-us-result-icon img{width:100%;height:100%;object-fit:cover}
.shp-us-info{flex:1;min-width:0}.shp-us-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shp-us-meta{margin-top:3px;color:#777;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shp-us-badge{padding:4px 8px;border-radius:20px;background:#edf4ff;color:#1677ff;font-size:10px;font-weight:600}.shp-us-message{padding:20px 15px;text-align:center;color:#777;font-size:13px}
@media(max-width:1024px) and (min-width:768px){.shp-universal-search .shp-us-bar{grid-template-columns:30% minmax(0,1fr) 48px;gap:8px}.shp-us-button{width:48px!important}}
@media(max-width:767px){.shp-universal-search .shp-us-bar{grid-template-columns:34% minmax(0,1fr) 44px;gap:5px}.shp-universal-search .shp-us-field{height:44px;min-height:44px}.shp-universal-search input{padding:0 6px!important;font-size:11px!important}.shp-us-icon{width:15px;height:15px;flex-basis:15px;margin-left:7px}.shp-us-icon svg{width:15px;height:15px}.shp-us-button{width:44px!important;height:44px!important;min-height:44px!important}.shp-us-badge{display:none}.shp-us-results{max-height:420px}}
@media(max-width:420px){.shp-universal-search .shp-us-bar{grid-template-columns:33% minmax(0,1fr) 42px;gap:4px}.shp-us-button{width:42px!important}}


/* =========================================================
   v3 NORMAL FLOW MODE
   The SHP search itself is NEVER sticky/fixed.
   These rules only affect the SHP search widget, not the header.
========================================================= */
.shp-universal-search,
.elementor-widget-shp_universal_search .shp-universal-search {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  transform: none !important;
  translate: none !important;
  will-change: auto !important;
  z-index: 0 !important;
}

.shp-universal-search .shp-us-bar,
.elementor-widget-shp_universal_search .shp-us-bar {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  transform: none !important;
  translate: none !important;
  will-change: auto !important;
}

/* Keep only the suggestions dropdown positioned under the bar. */
.shp-universal-search .shp-us-results {
  position: absolute !important;
  top: calc(100% + 7px) !important;
}

/* If Elementor sticky/motion classes are accidentally applied to this
   widget itself, neutralize them without changing the website header. */
.elementor-widget-shp_universal_search.elementor-sticky,
.elementor-widget-shp_universal_search.elementor-sticky--active,
.elementor-widget-shp_universal_search.elementor-sticky--effects {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Elementor's inner widget container remains normal document flow. */
.elementor-widget-shp_universal_search > .elementor-widget-container {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
}


/* =========================================================
   v4 RESULT VISIBILITY + CLICKABLE SEARCH BUTTON FIX
   Scoped only to SHP Universal Search.
========================================================= */

/* Search remains normal/non-sticky. */
.shp-universal-search,
.elementor-widget-shp_universal_search .shp-universal-search {
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Results must be fully opaque and above normal page content. */
.shp-universal-search .shp-us-results {
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
  z-index: 999 !important;
  overflow-x: hidden !important;
}

/* Every result layer gets a solid background so content behind cannot show through. */
.shp-universal-search .shp-us-section {
  background: #f7f8fa !important;
  opacity: 1 !important;
}

.shp-universal-search .shp-us-result,
.shp-universal-search .shp-us-message {
  background: #ffffff !important;
  opacity: 1 !important;
}

.shp-universal-search .shp-us-result:hover {
  background: #f5f8fc !important;
}

/* Make the blue search icon/button reliably clickable on all devices. */
.shp-universal-search .shp-us-button {
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.shp-universal-search .shp-us-button svg,
.shp-universal-search .shp-us-button svg * {
  pointer-events: none !important;
}

/* Inputs remain clickable too. */
.shp-universal-search .shp-us-field,
.shp-universal-search .shp-us-field input {
  pointer-events: auto !important;
}

/* Keep the dropdown usable on touch devices. */
.shp-universal-search .shp-us-results,
.shp-universal-search .shp-us-result {
  pointer-events: auto !important;
}

/* Ensure the Elementor widget itself doesn't clip the result panel. */
.elementor-widget-shp_universal_search,
.elementor-widget-shp_universal_search > .elementor-widget-container {
  overflow: visible !important;
}

/* Desktop */
@media (min-width: 1025px) {
  .shp-universal-search .shp-us-button {
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  .shp-universal-search .shp-us-button {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .shp-universal-search .shp-us-button {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
}


/* =========================================================
   v5 DROPDOWN LAYER FIX
   Keep search normal/non-sticky, but place its results above
   banners/sliders and other page content.
   No header selectors are changed.
========================================================= */

/* Lift only the Elementor search widget's stacking context. */
.elementor-widget-shp_universal_search {
  position: relative !important;
  z-index: 9000 !important;
  overflow: visible !important;
}

.elementor-widget-shp_universal_search > .elementor-widget-container {
  position: relative !important;
  z-index: 9000 !important;
  overflow: visible !important;
}

/* Also support shortcode use. */
.shp-universal-search {
  position: relative !important;
  z-index: 9000 !important;
  overflow: visible !important;
}

/* Search bar itself is still normal document flow. */
.shp-universal-search .shp-us-bar {
  position: relative !important;
  z-index: 2 !important;
}

/* Dropdown floats over banners/sliders/services. */
.shp-universal-search .shp-us-results {
  position: absolute !important;
  top: calc(100% + 7px) !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 999999 !important;
  background: #ffffff !important;
  opacity: 1 !important;
  isolation: isolate !important;
}

/* Modern Elementor containers that directly contain this widget:
   raise only that page-content container, never the site header. */
.e-con:has(> .elementor-element.elementor-widget-shp_universal_search),
.elementor-column:has(.elementor-widget-shp_universal_search) {
  position: relative !important;
  z-index: 9000 !important;
  overflow: visible !important;
}

/* Do not allow common Elementor overflow settings to clip the dropdown
   on the immediate search container. */
.elementor-element:has(> .elementor-widget-container > .shp-universal-search) {
  overflow: visible !important;
}

/* Mobile/tablet retain same layer behavior. */
@media (max-width: 1024px) {
  .elementor-widget-shp_universal_search,
  .elementor-widget-shp_universal_search > .elementor-widget-container,
  .shp-universal-search {
    z-index: 9000 !important;
    overflow: visible !important;
  }

  .shp-universal-search .shp-us-results {
    z-index: 999999 !important;
  }
}


/* =========================================================
   v6 HIGH-CONTRAST RESULT CARDS
   Forces clear/dark text and crisp vendor/supplier images.
========================================================= */

.shp-universal-search .shp-us-results {
  color: #111111 !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

.shp-universal-search .shp-us-result {
  background: #ffffff !important;
  color: #111111 !important;
  opacity: 1 !important;
  filter: none !important;
}

.shp-universal-search .shp-us-name {
  color: #111111 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-shadow: none !important;
}

.shp-universal-search .shp-us-meta {
  color: #4b4b4b !important;
  opacity: 1 !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  text-shadow: none !important;
}

.shp-universal-search .shp-us-section {
  color: #4a4a4a !important;
  background: #f3f4f6 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}

.shp-universal-search .shp-us-badge {
  color: #0867e8 !important;
  background: #eaf2ff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}

/* Crisp result image box */
.shp-universal-search .shp-us-result-icon {
  background: #f1f3f6 !important;
  color: #111111 !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

.shp-universal-search .shp-us-result-icon img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  visibility: visible !important;
}

/* Prevent theme link/text rules from fading anything inside results */
.shp-universal-search .shp-us-results *,
.shp-universal-search .shp-us-result * {
  visibility: visible !important;
}

.shp-universal-search .shp-us-result:hover .shp-us-name {
  color: #000000 !important;
}

/* Slightly larger/clearer on desktop */
@media (min-width: 1025px) {
  .shp-universal-search .shp-us-result {
    min-height: 68px !important;
  }
  .shp-universal-search .shp-us-result-icon {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }
  .shp-universal-search .shp-us-name {
    font-size: 15px !important;
  }
  .shp-universal-search .shp-us-meta {
    font-size: 12.5px !important;
  }
}

/* Mobile stays compact but high contrast */
@media (max-width: 767px) {
  .shp-universal-search .shp-us-name {
    color: #111111 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }
  .shp-universal-search .shp-us-meta {
    color: #444444 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
  }
  .shp-universal-search .shp-us-result-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
  }
}


/* =========================================================
   v7 FINAL HEADER / STACKING FIX
   Goal:
   1) Search bar is ordinary page content (never sticky/fixed).
   2) WoodMart header is NOT modified.
   3) When the header appears while scrolling, it naturally covers
      the search bar instead of the search bar covering the header.
   4) Search results still appear above banners/page content.
========================================================= */

/* IMPORTANT: remove the artificial high stacking level from the widget. */
.elementor-widget-shp_universal_search,
.elementor-widget-shp_universal_search > .elementor-widget-container,
.shp-universal-search {
    position: relative !important;
    z-index: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
}

/* Never make the actual bar sticky/fixed. */
.shp-universal-search .shp-us-bar {
    position: relative !important;
    z-index: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    inset: auto !important;
    transform: none !important;
}

/* Neutralize Elementor sticky state ONLY if applied to this search widget. */
.elementor-widget-shp_universal_search.elementor-sticky,
.elementor-widget-shp_universal_search.elementor-sticky--active,
.elementor-widget-shp_universal_search.elementor-sticky--effects {
    position: relative !important;
    z-index: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* Undo v5 parent stacking escalation.
   We do not touch any WoodMart/header selector. */
.e-con:has(> .elementor-element.elementor-widget-shp_universal_search),
.elementor-column:has(.elementor-widget-shp_universal_search),
.elementor-element:has(> .elementor-widget-container > .shp-universal-search) {
    z-index: auto !important;
}

/* Results stay above ordinary banners/content, while the search wrapper
   itself remains in the normal page stacking order. */
.shp-universal-search .shp-us-results {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 300 !important;
    background: #ffffff !important;
    opacity: 1 !important;
    visibility: visible;
    isolation: isolate !important;
}

/* Keep immediate widget containers from clipping the dropdown. */
.elementor-widget-shp_universal_search,
.elementor-widget-shp_universal_search > .elementor-widget-container {
    overflow: visible !important;
}

/* Desktop / tablet / mobile: same normal-flow behavior. */
@media (max-width: 1024px) {
    .elementor-widget-shp_universal_search,
    .elementor-widget-shp_universal_search > .elementor-widget-container,
    .shp-universal-search,
    .shp-universal-search .shp-us-bar {
        position: relative !important;
        z-index: auto !important;
        top: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    .shp-universal-search .shp-us-results {
        z-index: 300 !important;
    }
}


/* =========================================================
   v8 PORTAL DROPDOWN — FINAL STACKING ARCHITECTURE
   Search bar stays in normal Elementor/page flow.
   Results are moved to <body> by JS so banner/slider stacking
   contexts cannot cover them. No header selector is modified.
========================================================= */

/* The search widget itself must remain ordinary page content. */
.elementor-widget-shp_universal_search,
.elementor-widget-shp_universal_search > .elementor-widget-container,
.shp-universal-search,
.shp-universal-search .shp-us-bar {
    position: relative !important;
    z-index: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}

/* Portal result panel after JS moves it under BODY. */
body > .shp-us-results.shp-us-portal {
    display: none;
    position: absolute !important;
    margin: 0 !important;
    max-height: 500px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 9px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.18) !important;
    opacity: 1 !important;
    visibility: visible;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    isolation: isolate !important;

    /* Above normal page banners/sliders, but deliberately not an extreme
       999999 layer that would compete with the site's sticky header. */
    z-index: 300 !important;
}

/* Strong, opaque result rendering in the body portal. */
body > .shp-us-results.shp-us-portal .shp-us-section {
    background: #f3f4f6 !important;
    color: #4a4a4a !important;
    opacity: 1 !important;
    font-weight: 800 !important;
}
body > .shp-us-results.shp-us-portal .shp-us-result,
body > .shp-us-results.shp-us-portal .shp-us-message {
    background: #ffffff !important;
    color: #111111 !important;
    opacity: 1 !important;
}
body > .shp-us-results.shp-us-portal .shp-us-result:hover {
    background: #f5f8fc !important;
}
body > .shp-us-results.shp-us-portal .shp-us-name {
    color: #111111 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}
body > .shp-us-results.shp-us-portal .shp-us-meta {
    color: #444444 !important;
    opacity: 1 !important;
    font-weight: 500 !important;
}
body > .shp-us-results.shp-us-portal .shp-us-result-icon,
body > .shp-us-results.shp-us-portal .shp-us-result-icon img {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}
body > .shp-us-results.shp-us-portal .shp-us-result-icon img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
body > .shp-us-results.shp-us-portal .shp-us-badge {
    color: #0867e8 !important;
    background: #eaf2ff !important;
    opacity: 1 !important;
    font-weight: 700 !important;
}

@media (max-width: 767px) {
    body > .shp-us-results.shp-us-portal {
        max-height: 420px !important;
        border-radius: 8px !important;
    }
}