.whci-search-wrap {
  position: relative;
  margin: 10px 0;
	padding:6px;
}
#whci-product-search {
    border: 2px solid transparent !important;

    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(
            120deg,
            #1b0b3a 0%,
            #3d1263 30%,
            #8b1e4f 55%,
            #e84a18 78%,
            #ff9800 100%
        ) border-box !important;

    border-radius: 12px !important;
    box-sizing: border-box;
    outline: none !important;
    width:100% !important;
    height:45px;
}

/* Gradient border when user clicks the search bar */
#whci-product-search:focus {
    border-width: 2px !important;
    box-shadow: 0 0 8px rgba(232, 74, 24, 0.25) !important;
}
.whci-suggestions {
  position: absolute;
  left: 0; right: 0;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  z-index: 9999;
  max-height: 320px;
  overflow-y: auto;
  display: block;
  padding: 6px;
}
.whci-suggestion {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px;
  cursor: pointer;
  border-radius: 4px;
}
.whci-suggestion:hover { background: #f7f7f7; }
.whci-suggestion-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.whci-suggestion-title { font-size: 14px; color: black; }
.whci-no-results { padding: 8px; color: #666; }



/* Typewriter caret effect on placeholder */
.whci-search-wrap { position: relative; }
#whci-product-search.placeholder-caret { font-family: inherit; }
/* small caret displayed via :after on container when input is empty and has placeholder animation active */
.whci-search-wrap.typewriter:after {
  content: "|";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  opacity: 0.9;
  animation: whci-caret-blink 1s steps(1) infinite;
  pointer-events: none;
}
@keyframes whci-caret-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}