/* ============================================================
   SIGNAL PACK — SEARCH COMPONENTS
   ============================================================ */

/* Header expandable search (desktop inline variant) */
.sp-header-search{ position:relative; display:flex; align-items:center; }
.sp-header-search input{
  width:0; opacity:0; padding:0; border:none; height:var(--control-height-sm); border-radius:var(--radius-pill);
  background:var(--grey-bg); transition:width var(--duration-slow) var(--ease), opacity var(--duration-base) var(--ease), padding var(--duration-base) var(--ease);
}
.sp-header-search.is-expanded input{ width:220px; opacity:1; padding:0 14px; margin-right:8px; }

/* Full search overlay / modal */
.sp-search-overlay{
  position:fixed; inset:0; background:rgba(23,22,46,0.55); z-index:var(--z-modal);
  display:none; align-items:flex-start; justify-content:center; padding:80px 20px;
}
.sp-search-overlay.is-open{ display:flex; }
.sp-search-modal{ background:var(--paper); border-radius:var(--radius-lg); width:100%; max-width:640px; max-height:80vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); overflow:hidden; }
.sp-search-modal-head{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); }
.sp-search-modal-head .sp-search-field{ flex:1; }
.sp-search-modal-head input{ height:44px; border:none; background:var(--grey-bg); border-radius:var(--radius-md); padding-left:40px; font-size:15px; width:100%; }
.sp-search-modal-body{ padding:20px; overflow-y:auto; }
.sp-search-section-title{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--grey-text); margin:16px 0 10px; }
.sp-search-section-title:first-child{ margin-top:0; }
.sp-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.sp-chip{ font-size:12.5px; padding:7px 14px; border-radius:var(--radius-pill); background:var(--grey-bg); color:var(--ink); border:1px solid var(--line); }
.sp-chip:hover{ border-color:var(--navy); color:var(--navy); }
.sp-recent-search-item{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; font-size:13.5px; }
.sp-recent-search-item button{ color:var(--grey-text); font-size:11px; }

/* Search result rows */
.sp-search-result{ display:flex; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.sp-search-result:last-child{ border-bottom:none; }
.sp-search-result img{ width:56px; height:56px; border-radius:var(--radius-sm); object-fit:cover; background:var(--grey-alt); flex-shrink:0; }
.sp-search-result-info{ flex:1; min-width:0; }
.sp-search-result-info h5{ font-size:13.5px; font-weight:700; margin-bottom:3px; }
.sp-search-result-info .sp-meta{ font-size:11.5px; color:var(--grey-text); display:flex; gap:10px; flex-wrap:wrap; }
.sp-search-result-info .sp-price{ font-family:var(--font-display); font-weight:700; color:var(--navy); font-size:13.5px; }

/* States */
.sp-search-loading{ display:flex; flex-direction:column; gap:12px; }
.sp-search-loading .sp-skel-row{ height:56px; border-radius:var(--radius-sm); background:linear-gradient(90deg, var(--grey-bg) 25%, var(--grey-alt) 37%, var(--grey-bg) 63%); background-size:400% 100%; animation:sp-skeleton 1.4s ease infinite; }

.sp-search-empty, .sp-search-error{ text-align:center; padding:40px 20px; color:var(--grey-text); }
.sp-search-empty svg, .sp-search-error svg{ width:36px; height:36px; margin:0 auto 12px; stroke:var(--grey-text); }
.sp-search-empty h5, .sp-search-error h5{ color:var(--ink); font-size:15px; margin-bottom:6px; }
.sp-search-error h5{ color:var(--color-error); }

/* Mobile full-screen search */
@media (max-width:700px){
  .sp-search-overlay{ padding:0; }
  .sp-search-modal{ max-width:none; height:100%; max-height:none; border-radius:0; }
}