/* =========================================================
   Homepage Hero Search Bar
   Shown only on index.php, right beside the logo, taking up
   most of the header row. Animated, professional look with a
   rotating placeholder and a live results dropdown.
   ========================================================= */

.home-search-wrap{
  flex:1 1 auto;max-width:900px;min-width:0;position:relative;
}

.home-search{
  position:relative;display:flex;align-items:center;gap:8px;
  background:#fff;border-radius:32px;padding:5px 5px 5px 18px;
  border:1.5px solid var(--border,#e7e4f5);
  box-shadow:0 2px 10px rgba(124,58,237,.06);
  transition:var(--trans,all .25s cubic-bezier(.4,0,.2,1));
}
.home-search:focus-within{
  border-color:var(--primary,#7c3aed);
  box-shadow:0 0 0 5px var(--primary-light,#ede9fe),0 8px 24px rgba(124,58,237,.14);
  transform:translateY(-1px);
}

.hs-icon{
  flex-shrink:0;width:19px;height:19px;color:var(--gray,#6b7280);
  transition:var(--trans,all .25s ease);
}
.home-search:focus-within .hs-icon{color:var(--primary,#7c3aed);}

.home-search input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:inherit;font-size:14.5px;color:var(--dark,#1f2333);padding:9px 0;
}

.hs-placeholder{
  position:absolute;left:45px;top:50%;transform:translateY(-50%);
  font-size:14.5px;color:var(--gray,#9691ab);pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100% - 130px);
  transition:opacity .25s ease;
}
.hs-placeholder em{font-style:normal;color:var(--primary-dark,#5b21b6);font-weight:600;}
.hs-placeholder.hidden{opacity:0;}
.hs-placeholder.swap{animation:hsSwap .35s ease;}
@keyframes hsSwap{
  0%{opacity:0;transform:translateY(-50%) translateY(6px);}
  100%{opacity:1;transform:translateY(-50%) translateY(0);}
}

.hs-submit{
  flex-shrink:0;border:none;border-radius:26px;padding:10px 22px;cursor:pointer;
  background:linear-gradient(135deg,var(--primary,#7c3aed) 0%,var(--primary-dark,#5b21b6) 100%);
  color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.2px;
  transition:var(--trans,all .25s cubic-bezier(.4,0,.2,1));
}
.hs-submit:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover,0 16px 40px rgba(124,58,237,.18));}
.hs-submit:active{transform:translateY(0);}

/* ---------- Live results dropdown ---------- */
.hs-results{
  position:absolute;top:calc(100% + 10px);left:0;right:0;z-index:600;
  background:#fff;border-radius:18px;box-shadow:0 20px 50px rgba(31,23,66,.16);
  border:1px solid var(--border,#e7e4f5);
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .3s ease,opacity .25s ease;
}
.hs-results.open{max-height:420px;opacity:1;overflow-y:auto;}
.hs-results-inner{padding:8px;}
.hs-hint{text-align:center;color:var(--gray,#9691ab);font-size:13px;padding:20px 12px;}
.hs-loading{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--gray,#9691ab);font-size:13px;padding:20px 12px;}
.hs-loading .mini-spinner{
  width:14px;height:14px;border:2px solid var(--primary-light,#ede9fe);border-top-color:var(--primary,#7c3aed);
  border-radius:50%;animation:spin .8s linear infinite;
}
.hs-item{
  display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;
  color:inherit;transition:background .2s ease;
}
.hs-item:hover{background:var(--primary-light,#ede9fe);}
.hs-item img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:#f2f0fa;flex-shrink:0;}
.hs-item-info{display:flex;flex-direction:column;gap:2px;min-width:0;}
.hs-item-title{font-size:13.5px;font-weight:600;color:var(--dark,#1f2333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hs-item-price{font-size:13px;font-weight:700;color:var(--primary-dark,#5b21b6);}
.hs-item-price s{font-weight:500;color:var(--gray,#9691ab);margin-left:4px;}
.hs-viewall{
  display:block;text-align:center;margin-top:4px;padding:11px;border-radius:12px;
  background:linear-gradient(150deg,var(--primary,#7c3aed) 0%,var(--primary-dark,#5b21b6) 100%);
  color:#fff;font-weight:700;font-size:13px;
}

@media (max-width:991px){
  .home-search-wrap{
    order:4;flex:0 0 100%;max-width:100%;
    margin-top:12px;
  }
}
@media (prefers-reduced-motion:reduce){
  .home-search,.hs-icon,.hs-placeholder,.hs-submit,.hs-results{transition:none !important;animation:none !important;}
}