/* storefront-search.css — custom-website product search box + live dropdown.
   Injected by web_inject_search_runtime() alongside js/storefront-search.js.
   Accent color matches the storefront menu CSS (#E57E00). */

.wb-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: 999px;
    padding: 2px 3px 2px 14px;
    width: 240px;
    max-width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
}

/* Right-hand header group: search box + the relocated CTA (e.g. "Sign in")
   sitting side by side, so the menu stays centered and these sit at the right. */
.wb-search-group {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 0 0 auto;
}

/* Fallback wrapper used when the page has no recognizable header to attach
   to — keeps search reachable on any custom template. */
.wb-search-float {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 1000;
}
.wb-search-float .wb-search {
    box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
}
.wb-search-input {
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: .92rem;
    padding: 6px 4px;
    flex: 1 1 auto;
    min-width: 0;
    color: #333;
}
.wb-search-input::placeholder { color: #9a9a9a; }
.wb-search-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #E57E00;
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}
.wb-search-btn:hover { background: #cf7100; }
.wb-search-btn svg { width: 15px; height: 15px; display: block; }

.wb-search-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 300px;
    max-width: 380px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 10px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .14);
    padding: 6px;
    z-index: 300;
    max-height: 70vh;
    overflow-y: auto;
}
.wb-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #2b2b2b;
}
.wb-search-item:hover { background: #fff5ec; }
.wb-search-thumb {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 6px;
    object-fit: cover;
    background: #f3f3f3;
}
.wb-search-thumb-empty { display: inline-block; }
.wb-search-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.wb-search-name {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wb-search-sku {
    font-size: .74rem;
    color: #8a8a8a;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.wb-search-price {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: .88rem;
    color: #E57E00;
    margin-left: 8px;
    white-space: nowrap;
}
.wb-search-empty {
    padding: 14px 12px;
    color: #888;
    font-size: .88rem;
    text-align: center;
}
.wb-search-all {
    display: block;
    text-align: center;
    padding: 10px;
    margin-top: 4px;
    border-top: 1px solid #f0f0f0;
    color: #E57E00;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}
.wb-search-all:hover { background: #fff5ec; border-radius: 0 0 8px 8px; }

@media (max-width: 1150px) {
    /* Collapsed to just the icon by default — a static 240px box forced the
       whole search+Sign-in group onto its own oversized row below the logo
       on every custom-site header (flex:0 0 auto never shrinks to fit).
       storefront-search.js toggles .wb-search-expanded on tap so the input
       only claims space when actually in use.
       Breakpoint raised from 720px to match web_nav_toggle_css_rules()
       (includes/web_menu.php) — the search box is one of several things
       competing for space on the nav row, so it needs to collapse at the
       same width the nav itself does, not independently. See that
       function's comment for the "why 1150" measurement. */
    .wb-search { width: auto; max-width: none; padding: 0; border-color: transparent; background: transparent; }
    .wb-search-input { width: 0; min-width: 0; padding: 0; opacity: 0; transition: width .15s ease, opacity .15s ease; }
    .wb-search.wb-search-expanded { width: 200px; padding: 2px 3px 2px 14px; border-color: rgba(0, 0, 0, .14); background: #fff; }
    .wb-search.wb-search-expanded .wb-search-input { width: 100%; padding: 6px 4px; opacity: 1; }
    .wb-search-panel { left: 0; right: 0; min-width: 0; max-width: none; }
}