.hkps-wrap{ position:relative; max-width:680px; }
.hkps-input-wrap{ position:relative; }
.hkps-input{ width:100%; padding:12px 40px 12px 12px; border:1px solid #ddd; border-radius:12px; outline:none; }
.hkps-input:focus{ border-color:#bbb; }
.hkps-spinner{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:18px; height:18px; border:2px solid #ccc; border-top-color:transparent; border-radius:50%; animation:hkps-spin 0.8s linear infinite; visibility:hidden; }
@keyframes hkps-spin{ to{ transform:translateY(-50%) rotate(360deg); } }
.hkps-dropdown{ position:absolute; left:0; right:0; margin-top:6px; background:#fff; border:1px solid #eee; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.06); z-index:9999; max-height:420px; overflow:auto; }
.hkps-item{ display:flex; gap:10px; align-items:center; text-decoration:none; padding:10px; border-bottom:1px solid #f3f3f3; outline:none; }
.hkps-item:last-child{ border-bottom:0; }
.hkps-item[aria-selected="true"]{ background:#f7f7f7; }
.hkps-thumb{ width:44px; height:44px; object-fit:cover; border-radius:8px; background:#fafafa; }
.hkps-body{ display:flex; flex-direction:column; line-height:1.2; }
.hkps-title{ font-weight:600; color:#222; }
.hkps-sku{ font-size:12px; color:#666; margin-top:2px; }
.hkps-price{ font-size:13px; margin-top:4px; }
.hkps-empty{ padding:12px; color:#666; }