.search-form {
    position: relative;
    width: 100%;
}
.search-form .aws-search-btn-icon {
    cursor: pointer;
}
.search-form .close-icon,
.search-form .spinner-icon {
    display: none;
}
.search-form.search-loading .search-icon,
.search-form.search-loading .close-icon {
    display: none;
}
.search-form.search-loading .spinner-icon {
    display: inline-block;
}
.search-toggle.opened .search-icon {
    display: none;
}
.search-toggle.opened .close-icon {
    display: inline-block;
}
.search-toggle.opened.search-loading .close-icon {
    display: none;
}
.search-toggle.opened .spinner-icon {
    display: none;
}
.search-form .ui-autocomplete {
    position: absolute;
    background: #eeeeee;
    /* WordPress ships jQuery UI without its theme CSS, so .ui-front carries no z-index of its own.
       The nav below is position:relative and later in the DOM, so it paints over the dropdown. */
    z-index: 100;
}
.search-form .ui-autocomplete li {
    border-bottom: 1px solid #ededed;
    overflow: hidden;
    cursor: pointer;
}
.search-form .ui-autocomplete li {
}
.search-form .ui-autocomplete li.ui-state-focus {
    background: #f8f8f8;
}
.search-form .ui-autocomplete li img {
    float: left;
    height: 50px;
    margin: 5px 10px;
}
.search-form .ui-autocomplete li .ui-menu-item-wrapper {
    padding: 10px;
    display: flex;
    align-items: center;
}
.search-form .ui-autocomplete li .ui-state-active {
    font-weight: 600;
    color: #ffffff;
    background: var(--blue);
    border: none;
}
.search-form .ui-autocomplete li .pso-content {
    width: calc(100% - 70px);
}
.search-form .ui-autocomplete li.no-image .pso-content {
    text-align: center;
    width: 100%;
}
.search-form .ui-autocomplete li span {
    line-height: 1.75em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}
.search-form .ui-autocomplete li span.psoc-name small {
    color: #888888;
}
/* Kept for the moment: no product carries a description today (4 of 556), so the endpoint stopped
   sending one and the row renders price and SKU in its place. The rule costs nothing and means a
   re-added description line would not land unstyled. */
.search-form .ui-autocomplete li span.psoc-desc {
    font-size: 0.9em;
    color: #888888;
}
/* Price is the one line a shopper scans for, so it takes the theme colour and the weight; the SKU
   sits under it as reference text, matching the muted grey the count and the old description use. */
.search-form .ui-autocomplete li span.psoc-price {
    font-size: 0.95em;
    font-weight: var(--font-weight-semibold);
    color: var(--theme);
}
.search-form .ui-autocomplete li span.psoc-sku {
    font-size: 0.85em;
    color: #888888;
}
/* get_price_html() brings its own markup — the amount span, and <del>/<ins> on a sale. Neutralised
   here so a sale price does not inherit the shop's larger type inside a dropdown row. */
.search-form .ui-autocomplete li span.psoc-price del {
    opacity: 0.6;
    margin-right: 4px;
}
.search-form .ui-autocomplete li span.psoc-price ins {
    text-decoration: none;
}
.search-form .ui-autocomplete li span.psoc-price span {
    display: inline;
}
/* A category row has no thumbnail but must not be centred the way `.no-image` centres "View all
   results" — it reads as a list of destinations, so it stays left-aligned with the products. */
.search-form .ui-autocomplete li.ps-option--category .pso-content {
    width: 100%;
}
.search-form .ui-autocomplete li.ps-option--more .psoc-name {
    font-weight: var(--font-weight-semibold);
}
/*.search-form .ui-autocomplete li .ui-state-active span.psoc-name small,
.search-form .ui-autocomplete li .ui-state-active span.psoc-desc,
.search-form .ui-autocomplete li .ui-state-active span.psoc-price,
.search-form .ui-autocomplete li .ui-state-active span.psoc-sku {
    color: #ffffff;
}*/
.search-form .search__form-btn.loading {
}