.search-backdrop{
  position:fixed; inset:0; z-index:220; background:rgba(61,43,62,.32);
  opacity:0; pointer-events:none; transition:opacity .45s ease;
}
.search-backdrop.open{opacity:1; pointer-events:auto}
.search-panel{
  position:fixed; top:0; right:0; height:100dvh; width:min(440px,100%);
  z-index:230; background:var(--cream, #FDFAFB); color:var(--text, #5C5460);
  display:flex; flex-direction:column;
  padding:22px var(--pad, clamp(18px,4.4vw,64px)) 28px;
  transform:translateX(100%); transition:transform .5s cubic-bezier(.76,0,.24,1);
  box-shadow:-18px 0 50px rgba(61,43,62,.14);
  overflow-y:auto;
}
.search-panel.open{transform:none}
.search-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; flex:none}
.search-title{margin:0; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink, #3D2B3E)}
.search-close{flex:none}
.search-field{position:relative; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line, rgba(87,76,90,.14)); padding-bottom:14px; margin-bottom:28px; flex:none; transition:border-color .3s}
.search-field:focus-within{border-color:var(--gold, #B98A4A)}
.search-field input{
  flex:1; min-width:0; border:none; background:none; outline:none; padding:0;
  font-family:var(--headline, "Playfair Display", Georgia, serif); font-style:italic; font-size:clamp(15px,1.8vw,17px);
  color:var(--ink, #3D2B3E);
}
.search-field input::placeholder{color:var(--muted, #8C8290); opacity:.85}
.search-field svg{flex:none; color:var(--muted, #8C8290)}

.search-body{display:flex; flex-direction:column; flex:1; min-height:0}
.search-empty{display:flex; flex-direction:column; flex:1}
.search-empty.hide{display:none}
.search-label{margin:0 0 14px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted, #8C8290)}
.search-chips{display:flex; flex-wrap:wrap; gap:10px}
.search-chip{
  border:1px solid var(--line, rgba(87,76,90,.14)); border-radius:999px; padding:9px 18px; background:#fff;
  font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--text, #5C5460);
  transition:background .25s, color .25s, border-color .25s; cursor:pointer;
}
.search-chip:hover{background:var(--ink, #3D2B3E); color:#fff; border-color:var(--ink, #3D2B3E)}

.search-deco{position:relative; margin-top:auto; padding-top:40px; min-height:200px}
.search-deco .deco-flower{
  position:absolute; left:-6%; bottom:-6%; width:60%; aspect-ratio:1/1;
  background:var(--img-bouquet, url("/images/home/bouquet.webp")) center/contain no-repeat;
  opacity:.6; filter:sepia(.35) saturate(1.7) hue-rotate(-18deg);
  transform:scaleX(-1) rotate(6deg);
}
.search-deco .hand{
  position:relative; text-align:right; margin:0 0 0 auto; max-width:66%;
  font-family:var(--hand, "Sacramento", cursive);
  font-size:clamp(21px,2.7vw,28px); line-height:1.26; color:var(--plum-num, #7E5C6E);
}
.search-deco .hand span{display:block; margin-top:6px; color:var(--gold, #B98A4A); font-size:15px}

.search-results{display:none; flex-direction:column; flex:1; min-height:0}
.search-results.show{display:flex}
.search-count{margin:0 0 4px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted, #8C8290); padding-bottom:14px; border-bottom:1px solid var(--line, rgba(87,76,90,.14)); flex:none}
.search-list{list-style:none; margin:0; padding:0; flex:none}
.search-list li{border-bottom:1px solid var(--line, rgba(87,76,90,.14))}
.search-list a{display:flex; align-items:center; gap:14px; padding:16px 2px; color:var(--text, #5C5460)}
.search-list a:hover .nm{color:var(--gold, #B98A4A)}
.search-thumb{flex:none; width:56px; height:56px; border-radius:10px; overflow:hidden; background:var(--cream-2, #EFE4DA)}
.search-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.search-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.search-info .nm{font-family:var(--headline, "Playfair Display", Georgia, serif); font-size:14.5px; line-height:1.32; color:var(--ink, #3D2B3E); transition:color .25s}
.search-info .cat{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted, #8C8290)}
.search-info .pr{font-size:12.5px; color:var(--gold, #B98A4A)}
.search-list a svg{flex:none; color:var(--muted, #8C8290)}
.search-empty-state{border-bottom:none !important; padding:34px 2px; text-align:center; color:var(--muted, #8C8290); font-size:13px}
.search-viewall{
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line, rgba(87,76,90,.14));
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink, #3D2B3E); flex:none;
}
body.search-open{overflow:hidden}

@media (max-width:520px){
  .search-panel{padding:18px 22px 24px}
}
@media (prefers-reduced-motion:reduce){
  .search-backdrop,.search-panel{transition:none}
}
