/* Search landing (/shop/search with no query) — desktop and mobile */

/* ---------- Desktop ---------- */
.be-search { padding-block: 40px 24px; }
.be-search__head { text-align: center; margin-bottom: 28px; }
.be-search__form {
    position: relative;
    display: flex;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto 36px;
}
.be-search__box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 20px;
    border: 1px solid var(--be-line);
    border-radius: 999px;
    background: var(--be-white);
    box-shadow: var(--be-shadow-soft);
}
.be-search__box input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
}
.be-search__box:focus-within { border-color: var(--be-coral); }
.be-search__form .be-btn { height: 56px; padding-inline: 28px; }
.be-search__popular { max-width: 720px; margin: 0 auto 24px; text-align: center; }
.be-search__popular h2 { margin: 0 0 14px; font-size: 16px; font-weight: 600; }
.be-search__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.be-search__chips .be-chip { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Mobile ---------- */
.be-msrch { padding-bottom: 104px; }
.be-msrch__head { text-align: center; padding-top: 16px; }
.be-msrch__list { margin: 0; padding: 0; list-style: none; }
.be-msrch__list a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    color: var(--be-ink);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}
.be-msrch__list a span { flex: 1; }
.be-msrch__list a svg:last-child { color: var(--be-coral); }
.be-msrch__bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--be-canvas) 70%, transparent);
}
.be-msrch__field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 18px;
    border: 1.5px solid var(--be-coral);
    border-radius: 999px;
    background: var(--be-white);
}
.be-msrch__field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
}
.be-msrch__bar .be-suggest {
    top: auto;
    bottom: calc(100% - 4px);
    left: 16px;
    right: 16px;
    max-height: 60vh;
}