/* container keeps the dropdown positioned */
.wc-live-search { position: relative; }

/* -------------------------------------------------
   Results panel – colours copied from your YITH skin
   ------------------------------------------------- */
.wc-live-search__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 20px;
  list-style: none;
  border-radius: 20px;
  background: #0D0F10;
  border: 1px solid rgba(45,190,193,.5);
  box-shadow: 3px 0 15px rgba(45,190,193,.15);
  z-index: 9999;
}

/* scrollbar (WebKit) */
.wc-live-search__results::-webkit-scrollbar        { width: 10px; background:#0D0F10; }
.wc-live-search__results::-webkit-scrollbar-track  { background:#0D0F10; border:1px solid #022f32; border-radius:50px; }
.wc-live-search__results::-webkit-scrollbar-thumb  { background:#022f32; border-radius:5px; }
.wc-live-search__results::-webkit-scrollbar-corner { background:#0D0F10; }
/* scrollbar (Firefox) */
.wc-live-search__results { scrollbar-width: thin; scrollbar-color:#022f32 #0D0F10; }

/* -------------------------------------------------
   Individual item
   ------------------------------------------------- */
.search-result-item {
  display: flex;
  gap: 12px;
  padding: 20px;
  border: 1px solid rgba(45,190,193,.3);
  border-radius: 15px;
  transition: all .1s ease;
}

.search-result-item:hover {
  background: #0D0F10;
  border-color: rgba(45,190,193,.5);
  transform: scale(1.02);
}

/* Thumbnail */
.search-result-item__thumbnail{display: flex !important;}
.search-result-item__thumbnail img { border: none; }

/* Name / price */
.search-result-item__name,
.search-result-item__price { color:#C5D0D7; transition: color .3s ease; }

.search-result-item:hover .search-result-item__name { color:rgba(45,190,193,1); }

/* (Optional) Hide summary if you add it later */
.search-result-item__summary { display:none; }

/* Link resets */
.search-result-item__link { display:flex; gap:12px; text-decoration:none; align-items:center; }

/* ---------------------------------------------
   1.  Search input: black pill, cyan outline
   --------------------------------------------- */
.wc-live-search__input{
  width:100% !important;
  padding:10px 25px !important;
  background:#0c1011 !important;
  border:1px solid rgba(45,190,193,.7) !important;
  border-radius:50px !important;
  color:#C5D0D7 !important;
  font-size:18px !important;
  outline:none !important;
}
/* remove the default "clear (x)" icon (WebKit) */
.wc-live-search__input::-webkit-search-cancel-button{
  -webkit-appearance:none;
  display:none;
}

.no-results{
 color:#C5D0D7
}

/* ---------------------------------------------
   2.  Result panel starts HIDDEN
   --------------------------------------------- */
.wc-live-search__results{
  display:none;            /* will be flipped to block by JS */
}

/* ---------------------------------------------
   3.  Loading spinner
   --------------------------------------------- */
.wc-live-search__loading{
  display:none;            /* toggled by JS                     */
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  padding:8px 16px;
  background:#0D0F10;
  border:1px solid rgba(45,190,193,.5);
  border-radius:8px;
  color:#C5D0D7;
  font-size:14px;
  z-index:10000;
}

/* ---------------------------------------------
   4.  Card layout tweaks
   --------------------------------------------- */
.search-result-item{
  align-items:flex-start;
  min-height:110px;            /* uniform height for all cards */
  gap:16px;
  margin-bottom:10px;
}
.search-result-item__thumbnail{
  flex:0 0 110px;              /* fixed width/height */
  height:110px;
  display: flex !important;
  overflow:hidden;
}
.search-result-item__thumbnail img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.search-result-item__price{ display:block; }
.search-result-item__desc {
  color:#8f9da5;
  font-size:14px;
  margin-top:4px;
}



/* Responsive: drop side padding on mobiles */
@media (max-width:900px){
  .wc-live-search__results { right:0; left:0; }
  .search-result-item__link { display:flex;flex-direction: column; gap:12px; text-decoration:none; align-items:center; }
.search-result-item__info{
display: flex
;
    flex-direction: column;
    align-items: center;
}  
.search-result-item__desc{
text-align: center;
}  
}