.shock-ajax-search__dropdown { position: fixed; z-index: 99999; max-height: min(70vh, 640px); overflow-y: auto; background: #fff; color: #252b30; border: 1px solid #e2e4e7; border-radius: 8px; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.shock-ajax-search__dropdown[hidden] { display: none; }
.shock-ajax-search__dropdown { container-type: inline-size; container-name: shock-ajax-search; }
.shock-ajax-search__loader { position: fixed; z-index: 100000; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid rgba(0,0,0,.2); border-top-color: currentColor; border-radius: 50%; color: #252b30; pointer-events: none; animation: shock-ajax-search-spin .7s linear infinite; }
.shock-ajax-search__loader[hidden] { display: none; }
@keyframes shock-ajax-search-spin { to { transform: rotate(360deg); } }
.shock-ajax-search__group { padding: 18px 16px; }
.shock-ajax-search__group + .shock-ajax-search__group { border-top: 1px solid #e2e4e7; }
.shock-ajax-search__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; padding: 0; }
.shock-ajax-search__group h3 { margin: 0; color: inherit; font-size: 14px; font-weight: 700; line-height: 1.3; }
.shock-ajax-search__all { flex: 0 0 auto; font-size: 13px; text-decoration: none; }
.shock-ajax-search__all:hover { text-decoration: underline; }
.shock-ajax-search__item { display: flex; align-items: center; gap: 12px; min-height: 38px; margin: 0 -8px; padding: 6px 8px; color: inherit; text-decoration: none; border-radius: 4px; transition: background-color .15s ease; }
.shock-ajax-search__item:hover, .shock-ajax-search__item:focus-visible { background-color: #f3f4f5; }
.shock-ajax-search__item:hover .shock-ajax-search__title { text-decoration: underline; }
.shock-ajax-search__item img { flex: 0 0 48px; width: 48px; height: 48px; object-fit: contain; }
.shock-ajax-search__title { flex: 1 1 auto; min-width: 0; line-height:1.3; }
.shock-ajax-search__meta { flex: 0 0 auto; color: #777; font-size: .9em; }
.shock-ajax-search__item--products .shock-ajax-search__meta { color: inherit; font-weight: 700; }
.shock-ajax-search__message { padding: 18px 16px; color: #666; }
@media (max-width: 480px) { .shock-ajax-search__meta { font-size: .82em; } }

/* Pas de indeling aan op de breedte van de dropdown zelf. */
@container shock-ajax-search (width < 340px) {
    .shock-ajax-search__heading,
    .shock-ajax-search__item--categories,
    .shock-ajax-search__item--brands {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .shock-ajax-search__item--products {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        column-gap: 12px;
        row-gap: 4px;
        align-items: start;
    }

    .shock-ajax-search__item--products img {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .shock-ajax-search__item--products .shock-ajax-search__title {
        grid-column: 2;
        grid-row: 1;
    }

    .shock-ajax-search__item--products .shock-ajax-search__meta {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;
    }

    .shock-ajax-search__title,
    .shock-ajax-search__meta,
    .shock-ajax-search__all {
        overflow-wrap: anywhere;
    }
}