/* ==========================================================================
   Search overlay + shared animation keyframes
   ========================================================================== */
.search-overlay{
  position:fixed; inset:0; z-index:130; background:rgba(252,250,245,.97); backdrop-filter:blur(10px);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility 0s .45s;
  overflow-y:auto;
  overflow-x:hidden;
}
.search-overlay.is-open{opacity:1; visibility:visible; transition:opacity .45s var(--ease);}
.search-overlay-inner{width:100%; max-width:760px; margin:0 auto; padding:100px 32px 60px;}
.search-close{position:absolute; top:32px; right:40px; width:36px; height:36px; display:flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; color:var(--text-primary); cursor:pointer; transition:transform .3s var(--ease);}
.search-close svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round;}
.search-close:hover{transform:rotate(90deg);}

/* Merged icon + input, single rounded pill, same height as the navbar (54px) */
.search-input-row{
  display:flex; align-items:center; gap:14px;
  height:54px; padding:0 24px;
  background:var(--surface-card);
  border:1px solid var(--border-default);
  border-radius:999px;
  box-shadow:var(--shadow-card);
  margin-bottom:40px;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.search-input-row:focus-within{
  border-color:var(--brand-primary);
  box-shadow:0 0 0 4px var(--brand-primary-light), var(--shadow-card);
}
.search-input-row input{flex:1; min-width:0; font-family:inherit; font-size:16px; background:none; border:none; outline:none; color:var(--text-primary);}
.search-input-row .ic{width:20px; height:20px; flex:0 0 auto; fill:none; stroke:var(--text-muted); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.search-input-row:focus-within .ic{stroke:var(--brand-primary);}
.search-section{margin-bottom:36px;}
.search-section h6{font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); margin-bottom:16px;}
.search-chip-row{display:flex; gap:10px; flex-wrap:wrap;}
.search-chip{padding:9px 16px; border-radius:100px; background:var(--surface-soft); font-size:13px; transition:all .25s var(--ease);}
.search-chip:hover{background:var(--brand-primary-light); color:var(--brand-primary-active);}
.search-results-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
.search-result-card{text-align:left;}
.search-result-thumb{aspect-ratio:4/5; border-radius:12px; margin-bottom:10px; background-size:cover; background-position:center;}
.search-result-card h6{font-size:13px; font-weight:500; margin-bottom:4px;}
.search-result-card span{font-size:13px; font-weight:700; color:var(--brand-primary);}
@media(max-width:1100px){ .search-results-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:700px){ .search-results-grid{grid-template-columns:repeat(2,1fr); gap:14px;} .search-input-row input{font-size:20px;} }
@media(max-width:420px){ .search-results-grid{grid-template-columns:1fr;} }

.search-empty-state{text-align:center; max-width:380px; margin:40px auto; padding:20px 0; color:var(--text-muted);}
.search-empty-state svg{width:76px; height:76px; color:var(--border-strong); margin-bottom:20px;}
.search-empty-state h3{font-size:19px; color:var(--text-primary); margin-bottom:8px;}
.search-empty-state p{font-size:14px; margin-bottom:22px;}

/* ---------- Shared animations ---------- */
@keyframes fadeUp{ from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes scaleIn{ from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);} }
.anim-fadeUp{animation:fadeUp .7s var(--ease) both;}
.anim-fadeIn{animation:fadeIn .6s var(--ease) both;}
.anim-scaleIn{animation:scaleIn .5s var(--ease) both;}