.search-overlay {
position: fixed;
inset: 0;
z-index: 1100;
display: flex;
flex-direction: column;
align-items: center;
}
.search-overlay[hidden] { display: none; } .search-overlay.is-open .search-overlay__backdrop {
animation: so-fade-in 0.25s ease forwards;
}
.search-overlay.is-open .search-overlay__panel {
animation: so-slide-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.search-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(44, 35, 25, 0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
@keyframes so-fade-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes so-slide-in {
from { opacity: 0; transform: translateY(-12px); }
to   { opacity: 1; transform: translateY(0); }
} .search-overlay__panel {
position: relative;
z-index: 1;
width: 100%;
max-width: 720px;
margin-top: calc(var(--nav-height) + 1.5rem);
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
display: flex;
flex-direction: column;
max-height: calc(100dvh - var(--nav-height) - 3rem);
} .search-overlay__top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem 0;
}
.search-overlay__label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--warm-light);
}
.search-overlay__close {
width: 34px; height: 34px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--warm-light);
transition: background var(--transition), color var(--transition);
}
.search-overlay__close:hover {
background: var(--cream-dark);
color: var(--warm-dark);
} .search-overlay__form {
padding: 0.75rem 1.25rem 0.9rem;
border-bottom: 1px solid var(--cream-dark);
}
.search-overlay__input-wrap {
display: flex;
align-items: center;
gap: 0.6rem;
background: var(--cream);
border: 1.5px solid var(--cream-dark);
border-radius: 100px;
padding: 0.6rem 0.75rem 0.6rem 1rem;
transition: border-color var(--transition), box-shadow var(--transition);
}
.search-overlay__input-wrap:focus-within {
border-color: var(--terracotta);
box-shadow: 0 0 0 4px rgba(192, 107, 74, 0.12);
background: var(--white);
}
.search-overlay__input-icon {
color: var(--warm-light);
flex-shrink: 0;
transition: color var(--transition);
}
.search-overlay__input-wrap:focus-within .search-overlay__input-icon {
color: var(--terracotta);
}
.search-overlay__input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-family: var(--font-body);
font-size: 1rem;
color: var(--warm-dark);
caret-color: var(--terracotta);
min-width: 0;
}
.search-overlay__input::placeholder { color: var(--warm-light); }
.search-overlay__clear {
width: 26px; height: 26px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--warm-light);
flex-shrink: 0;
transition: background var(--transition), color var(--transition);
}
.search-overlay__clear[hidden] { display: none; }
.search-overlay__clear:hover {
background: var(--sand);
color: var(--warm-dark);
} .search-overlay__results {
overflow-y: auto;
padding: 1.25rem 1.25rem 1.5rem;
flex: 1;
} .search-overlay__results::-webkit-scrollbar { width: 5px; }
.search-overlay__results::-webkit-scrollbar-track { background: transparent; }
.search-overlay__results::-webkit-scrollbar-thumb {
background: var(--sand);
border-radius: 10px;
} .search-overlay__state { display: block; }
.search-overlay__state[hidden] { display: none; } .search-overlay__section-title {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--warm-light);
margin-bottom: 0.75rem;
} .search-overlay__tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 0.25rem;
}
.search-overlay__tag {
display: inline-flex;
align-items: center;
padding: 0.35rem 0.85rem;
border-radius: 100px;
border: 1.5px solid var(--cream-dark);
background: var(--cream);
font-size: 0.82rem;
font-weight: 500;
color: var(--warm-mid);
transition: all var(--transition);
}
.search-overlay__tag:hover {
border-color: var(--terracotta);
color: var(--terracotta);
background: rgba(192, 107, 74, .05);
transform: translateY(-1px);
} .search-overlay__list {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.search-overlay__item {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.65rem 0.75rem;
border-radius: var(--radius-sm);
transition: background var(--transition);
text-decoration: none;
}
.search-overlay__item:hover {
background: var(--cream);
}
.search-overlay__item-thumb {
width: 48px; height: 48px;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--cream-dark);
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 1.25rem;
}
.search-overlay__item-thumb img {
width: 100%; height: 100%;
object-fit: cover;
}
.search-overlay__item-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.search-overlay__item-title {
font-family: var(--font-display);
font-size: 0.95rem;
font-weight: 600;
color: var(--warm-dark);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
transition: color var(--transition);
}
.search-overlay__item-title mark {
background: none;
color: var(--terracotta);
font-weight: 700;
font-style: normal;
}
.search-overlay__item:hover .search-overlay__item-title {
color: var(--terracotta);
}
.search-overlay__item-cat {
font-size: 0.75rem;
color: var(--warm-light);
font-weight: 500;
} .search-overlay__loader {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 2rem 1rem;
color: var(--warm-light);
font-size: 0.9rem;
}
.so-dot-pulse {
display: flex;
gap: 4px;
}
.so-dot-pulse span {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--terracotta);
animation: so-pulse 1.2s infinite ease-in-out;
}
.so-dot-pulse span:nth-child(2) { animation-delay: 0.2s; }
.so-dot-pulse span:nth-child(3) { animation-delay: 0.4s; }
@keyframes so-pulse {
0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
40%            { transform: scale(1);   opacity: 1; }
} .search-overlay__all-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--terracotta);
transition: gap var(--transition), color var(--transition);
}
.search-overlay__all-link:hover {
gap: 0.6rem;
color: var(--terra-dark);
} .search-overlay__empty {
text-align: center;
padding: 2.5rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.search-overlay__empty-icon { font-size: 2.5rem; line-height: 1; }
.search-overlay__empty-title {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 600;
color: var(--warm-dark);
margin: 0;
}
.search-overlay__empty-text {
font-size: 0.88rem;
color: var(--warm-light);
margin: 0;
} body.search-is-open {
overflow: hidden;
} @media (max-width: 768px) {
.search-overlay__panel {
margin-top: calc(var(--nav-height) + 0.75rem);
margin-inline: 0.75rem;
max-height: calc(100dvh - var(--nav-height) - 1.5rem);
border-radius: var(--radius-md);
}
}
@media (max-width: 540px) {
.search-overlay__panel {
margin-top: 0;
margin-inline: 0;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
max-height: 85dvh;
}
}