/*!
 * WS-045 — Storefront search typeahead dropdown styling.
 * Plain CSS, no build step. Scoped under .ws-suggest-* so it can't collide with
 * theme rules. The host form gets position:relative only when JS enhances it.
 */
/* WS-531: not on template 12 (.search-form) - its theme positions that form itself (absolute,
   full-width bar on phones); forcing relative here collapsed the phone bar to 100px. */
form[data-suggest-enabled="on"]:not(.search-form) { position: relative; }

.ws-suggest-dropdown {
    display: none;
    position: absolute;
    z-index: 9999;
    left: 0;
    top: 100%;
    min-width: 280px;
    max-width: 420px;
    width: 100%;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-top: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    text-align: left;
    font-size: 14px;
    color: #222;
}
.ws-suggest-dropdown.is-open { display: block; }

.ws-suggest-list,
.ws-suggest-recent { list-style: none; margin: 0; padding: 0; }

.ws-suggest-card a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f0f0f0;
}
.ws-suggest-card a:hover { background: #f6f6f6; }

.ws-suggest-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    flex: 0 0 40px;
    background: #f0f0f0;
    border-radius: 3px;
}
.ws-suggest-thumb--empty { display: inline-block; }

.ws-suggest-name { flex: 1 1 auto; line-height: 1.2; }
.ws-suggest-price { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }

.ws-suggest-dym,
.ws-suggest-empty,
.ws-suggest-recent-title { padding: 10px 12px; }
.ws-suggest-dym-link { font-weight: 600; }

.ws-suggest-recent-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #888;
    border-bottom: 1px solid #f0f0f0;
}
.ws-suggest-recent li a {
    display: block;
    padding: 7px 12px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f6f6f6;
}
.ws-suggest-recent li a:hover { background: #f6f6f6; }

/* WS-055 Slice 3: category label below product name in suggestion cards. */
.ws-suggest-cat {
    font-size: 0.75rem;
    color: var(--bs-secondary, #6c757d);
    display: block;
    margin-top: 0.125rem;
}

/* WS-531: sale price - struck old price before the current price. */
.ws-suggest-price-old {
    font-weight: 400;
    color: #888;
    text-decoration: line-through;
    margin-right: 4px;
}

/* WS-531: v2 designs (templates 12-15, 1000) - the panel spans the full width of its
   search form (desktop, phone and 404 forms). Scoped to classes only the v2 forms carry,
   so the legacy designs keep the 420px cap above. */
form.ws-search[data-suggest-enabled="on"] > .ws-suggest-dropdown,
form#searchForm.search-form[data-suggest-enabled="on"] > .ws-suggest-dropdown {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
}

/* WS-531: the 404 card/panel of the v2 designs sets overflow:hidden, which would cut the
   open panel off at the card edge. Let it show while the dropdown is open. */
.ws-panel:has(form.ws-404-search > .ws-suggest-dropdown.is-open),
.ws-card:has(form.ws-404-search > .ws-suggest-dropdown.is-open) {
    overflow: visible;
}