/* WC SearchWP Lite - UI styles
   You can override these via CSS variables on a parent element:
   --wcswpl-input-bg, --wcswpl-input-border, --wcswpl-input-radius,
   --wcswpl-btn-bg, --wcswpl-btn-text, --wcswpl-btn-radius
*/
.wcswpl-form{margin:0}
.wcswpl-wrap{
  position:relative;
  max-width:100%;
  display:flex;
  gap:18px;
  align-items:center;
}
.wcswpl-input{
  flex:1;
  width:100%;
  height:56px;
  padding:14px 18px;
  border:1px solid var(--wcswpl-input-border, #e6e6e6);
  border-radius:var(--wcswpl-input-radius, 4px);
  background:var(--wcswpl-input-bg, #ffffff);
  font-size:18px;
  line-height:1;
  outline:none;
}
.wcswpl-input:focus{
  border-color: var(--wcswpl-input-border-focus, #d5d5d5);
}

.wcswpl-btn{
  height:56px;
  padding:0 28px;
  border:0;
  border-radius:var(--wcswpl-btn-radius, 9999px);
  background:var(--wcswpl-btn-bg, #4a332d);
  color:var(--wcswpl-btn-text, #ffffff);
  cursor:pointer;
  font-size:14px;
  letter-spacing:3px;
  text-transform:uppercase;
  font-weight:700;
}
.wcswpl-btn:hover{ filter:brightness(1.05); }
.wcswpl-btn:active{ filter:brightness(0.98); }

.wcswpl-results{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 10px);
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  z-index:9999;
  max-height:380px;
  overflow:auto;
}
.wcswpl-list{list-style:none;margin:0;padding:8px}
.wcswpl-item{margin:0;padding:0}
.wcswpl-link{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:10px;
  text-decoration:none;
}
.wcswpl-link:hover{background:#f6f6f6}
.wcswpl-thumb{width:44px;height:44px;object-fit:cover;border-radius:10px}
.wcswpl-title{flex:1;font-size:15px;color:#222}
.wcswpl-price{font-size:14px;color:#444}