/* Sökrutan och livesökningen (varumärke överst, produktträffar). Laddas av inc/search-brands.php på alla sidor. */
.searchwp-live-search-result.searchwp-live-search-brand {
    display: block !important;
    background-color: var(--wp--preset--color--light-grey, #f5f5f3);
}
.searchwp-live-search-brand a {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 1rem;
    padding: 0.85rem 1rem;
    color: var(--wp--preset--color--foreground) !important;
    text-decoration: none;
}
.searchResultBrandLabel {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.6;
}
.searchResultBrandName {
    font-family: var(--wp--preset--font-family--gothic-no-3) !important;
    font-size: 1.15rem;
}
.searchResultBrandAll {
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Produkter i livesökningen. Varumärke och namn på varsin rad; långa namn bryts i stället för att
   hamna utanför rutan på mobil. */
.searchwp-live-search-result.searchwp-live-search-product {
    grid-template-columns: 120px minmax(0, 1fr) !important;
    align-items: center;
    gap: 0 12px;
    padding: 8px 12px 8px 5px;
}
.searchwp-live-search-product .searchResultImage img {
    display: block;
    width: 100%;
    height: auto;
}
.searchwp-live-search-product p {
    margin: 0;
    min-width: 0;
}
.searchwp-live-search-product p a {
    text-decoration: none;
}
.searchwp-live-search-product .searchResultBrandTitle,
.searchwp-live-search-product .searchResultTitle {
    display: block;
    overflow-wrap: anywhere;
}
.searchwp-live-search-product .searchResultTitle {
    line-height: 1.3;
}
@media (max-width: 576px) {
    .searchwp-live-search-result.searchwp-live-search-product {
        grid-template-columns: 84px minmax(0, 1fr) !important;
        gap: 0 10px;
    }
}

/* Sökrutan i sidhuvudet: sajtens typsnitt, förstoringsglaset till vänster och en varm grå platshållare
   som säger vad man kan söka på. 38 px hög på mobil och dator, varmgrå ram som mörknar när man
   skriver. Knappen är fortfarande sökknappen, den har bara flyttats till vänster. */
.search-container input[type='search'],
.search-container.mobile-only input[type='search'] {
    height: 38px;
    padding-left: 42px;
    padding-right: 14px;
    border-color: #c9c3bb;
    background-color: var(--wp--preset--color--background);
    font-family: inherit;
    color: var(--wp--preset--color--foreground);
    transition: border-color .15s ease;
}
.search-container input[type='search']:hover {
    border-color: #a39c94;
}
.search-container input[type='search']:focus {
    border-color: var(--wp--preset--color--foreground);
    background-color: var(--wp--preset--color--background);
}
.search-container input[type='search']::placeholder {
    color: #7a736c;
    font-size: 15px;
    opacity: 1;
}
.search-container .searchform button[type='submit'],
.search-container.mobile-only .searchform button[type='submit'] {
    right: auto;
    left: 2px;
    width: 42px;
    height: 38px;
    padding: 0;
    color: #7a736c;
}
.search-container .searchform button[type='submit'] i {
    font-size: 16px;
    line-height: 1;
}
.search-container .searchform button[type='submit']:hover,
.search-container input[type='search']:focus ~ button[type='submit'] {
    color: var(--wp--preset--color--foreground);
}
/* Mobil: nästan vit bakgrund (vit när man skriver, se :focus ovan). */
.search-container.mobile-only input[type='search']:not(:focus) {
    background-color: #fdfcfa;
}
/* Mobil: lika mycket luft mot logoraden som mot innehållet under (10 px). Fältet är 50 px och
   centrerar rutan, så den flyttas upp 4 px. */
.header__bottom .search-container.mobile-only {
    position: relative;
    top: -4px;
}