/* BF_INDEX_LIVE_SEARCH_0_5_0 */
#bf_index_live_search {
    position: absolute;
    inset: calc(100% + 8px) 0 auto;
    z-index: 11;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(100vw - 24px);
    max-height: min(70vh, 38rem);
    max-height: min(70dvh, 38rem);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    border: 1px solid #deded9;
    border-radius: 12px;
    color: #20201e;
    background: #fff;
    box-shadow: 0 12px 32px rgb(0 0 0 / 15%);
    font: inherit;
    line-height: 1.4;
    text-align: left;
}
#bf_index_live_search.hidden, #bf_index_live_search[hidden] { display: none !important; }
#bf_index_live_search * { box-sizing: border-box; }
#bf_index_live_search .bf-index-status { padding: 12px 16px; font-size: .875rem; }
#bf_index_live_search .bf-index-products { display: block; margin: 0; padding: 0; list-style: none; }
#bf_index_live_search .bf-index-item { margin: 0; padding: 0; border-top: 1px solid #efefeb; }
#bf_index_live_search .bf-index-product {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 14px 16px;
    color: inherit;
    text-decoration: none;
}
#bf_index_live_search .bf-index-product:hover { background: #f5f5f2; }
#bf_index_live_search .bf-index-product img { grid-column: 1; width: 68px; height: 76px; object-fit: contain; background: #fff; }
#bf_index_live_search .bf-index-detail { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
#bf_index_live_search .bf-index-name { display: block; font-size: .9375rem; font-weight: 600; }
#bf_index_live_search .bf-index-price { display: block; margin-top: 6px; font-size: 1.125rem; font-weight: 700; }
#bf_index_live_search .bf-index-tax { display: block; color: #5b5b55; font-size: .75rem; }
#bf_index_live_search .bf-index-availability { display: block; margin-top: 5px; color: #55564e; font-size: .8125rem; }
#bf_index_live_search .bf-index-terms { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
#bf_index_live_search button { font: inherit; cursor: pointer; }
#bf_index_live_search .bf-index-term { min-height: 44px; max-width: 100%; padding: 8px 12px; border: 1px solid #d8d8d1; border-radius: 7px; background: #f5f5f2; color: inherit; font-size: .875rem; text-align: left; overflow-wrap: anywhere; }
#bf_index_live_search .bf-index-footer { position: sticky; bottom: 0; display: grid; gap: 8px; padding: 12px 16px; border-top: 1px solid #deded9; background: #fff; }
#bf_index_live_search .bf-index-all, #bf_index_live_search .bf-index-more { display: block; min-height: 44px; padding: 10px 14px; border: 1px solid #20201e; border-radius: 7px; text-align: center; font-size: .9375rem; font-weight: 600; line-height: 1.4; }
#bf_index_live_search .bf-index-all { color: #fff; background: #20201e; text-decoration: none; }
#bf_index_live_search .bf-index-more { color: #20201e; background: #fff; }
#bf_index_live_search button:disabled { opacity: .55; cursor: wait; }
#bf_index_live_search a:focus-visible, #bf_index_live_search button:focus-visible { outline: 2px solid #355c44; outline-offset: -3px; }
@media (max-width: 479px) {
    #bf_index_live_search .bf-index-product { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; padding: 12px; }
    #bf_index_live_search .bf-index-product img { width: 56px; height: 64px; }
    #bf_index_live_search .bf-index-status, #bf_index_live_search .bf-index-footer { padding-right: 12px; padding-left: 12px; }
    #bf_index_live_search .bf-index-terms { padding-right: 12px; padding-left: 12px; }
}

/* Use the existing header grid: its logo/tools tracks keep their space. */
@media (min-width: 768px) {
    html#snackys-tpl[data-bf-shell="v11"] #shop-nav #search > .inside.bf-index-desktop-search {
        max-width: 720px;
    }
}
@media (min-width: 1200px) {
    #search > .bf-index-desktop-search #bf_index_live_search .bf-index-footer {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
    #search > .bf-index-desktop-search #bf_index_live_search .bf-index-tax,
    #search > .bf-index-desktop-search #bf_index_live_search .bf-index-all {
        grid-column: 1 / -1;
    }
    #search > .bf-index-desktop-search #bf_index_live_search .bf-index-more + .bf-index-all {
        grid-column: auto;
    }
}

/* Mobile search owns only its dialog; the normal header and desktop panel keep their layout. */
#bf-index-mobile-search[hidden] { display: none !important; }
#bf-index-mobile-search {
    --bf-mobile-ready: 15;
    position: fixed;
    z-index: 2147483000;
    inset: 0 auto auto 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    margin: 0;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    overflow: hidden;
    overscroll-behavior: contain;
    box-sizing: border-box;
    color: #20201e;
    background: #fff;
    font: inherit;
    line-height: 1.4;
    text-align: left;
}
#bf-index-mobile-search * { box-sizing: border-box; }
#bf-index-mobile-search .bf-index-mobile-bar { display: flex; flex: none; align-items: center; gap: 4px; padding: 8px 8px 8px 4px; border-bottom: 1px solid #deded9; }
#bf-index-mobile-search .bf-index-mobile-form { display: flex; flex: 1; align-items: center; min-width: 0; margin: 0; border: 1px solid #888880; border-radius: 24px; background: #f5f5f2; }
#bf-index-mobile-search .bf-index-mobile-form:focus-within { border-color: #20201e; box-shadow: 0 0 0 1px #20201e; }
#bf-index-mobile-search #bf-index-mobile-query { flex: 1; min-width: 0; width: 0; height: 46px; margin: 0; padding: 10px 0 10px 14px; border: 0; border-radius: 24px; outline: 0; box-shadow: none; color: inherit; background: transparent; font: inherit; font-size: 16px; line-height: 24px; -webkit-appearance: none; appearance: none; }
/* Snackys supplies its own artwork and size for this native pseudo-element. */
#bf-index-mobile-search #bf-index-mobile-query::-webkit-search-cancel-button {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    pointer-events: none;
}
#bf-index-mobile-search .bf-index-mobile-bar button { flex: none; height: 44px; min-width: 44px; padding: 8px; border: 0; border-radius: 22px; color: inherit; background: transparent; font: inherit; line-height: 1; cursor: pointer; }
#bf-index-mobile-search .bf-index-mobile-back { font-size: 27px; }
#bf-index-mobile-search .bf-index-mobile-clear { min-width: 44px; padding: 6px; font-size: 26px; }
#bf-index-mobile-search .bf-index-mobile-clear:disabled { visibility: hidden; }
#bf-index-mobile-search .bf-index-mobile-submit { padding-right: 14px; padding-left: 5px; font-size: .875rem; font-weight: 600; }
#bf-index-mobile-search button:focus-visible { outline: 2px solid #355c44; outline-offset: -3px; }
#bf-index-mobile-search .bf-index-mobile-hint { margin: 0; padding: 18px 16px; font-size: .9375rem; color: #5b5b55; }
#bf-index-mobile-search .bf-index-mobile-hint[hidden] { display: none; }
#bf-index-mobile-search #bf_index_live_search { position: static; flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: auto; -webkit-overflow-scrolling: touch; }
#bf-index-mobile-search #bf_index_live_search .bf-index-status { padding-top: 10px; padding-bottom: 10px; }
#bf-index-mobile-search #bf_index_live_search .bf-index-terms { flex-wrap: nowrap; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 10px; }
#bf-index-mobile-search #bf_index_live_search .bf-index-term { flex: 0 0 auto; max-width: min(85vw, 24rem); min-height: 44px; white-space: normal; }
#bf-index-mobile-search #bf_index_live_search .bf-index-footer { position: static; }

/* Outside the header, Snackys applies a high-specificity underline rule to links. */
#bf-index-mobile-search #bf_index_live_search a.bf-index-product,
#bf-index-mobile-search #bf_index_live_search a.bf-index-all {
    text-decoration: none !important;
}
