:root {
    --n3t-mod-phocacart-search-background: #fff;
    --n3t-mod-phocacart-search-border: #ccc;
    --n3t-mod-phocacart-search-highlight: #eee;
    --n3t-mod-phocacart-search-image-width: 3em;
    --n3t-mod-phocacart-search-manufacturer-width: 6em;
    --n3t-mod-phocacart-search-price-width: 4em;
    --n3t-mod-phocacart-search-price-original-color: #999;
    --n3t-mod-phocacart-search-scrollbar-color: #999;
    --n3t-mod-phocacart-search-scrollbar-width: 6px;
}

form[data-n3t-ajax-search] {
    position: relative;
}

.n3t_phocacart_search__autocompleter {
    position: absolute;
    width: 100%;
    display: none;
    background-color: var(--n3t-mod-phocacart-search-background);
    border: 1px solid var(--n3t-mod-phocacart-search-border);
    box-shadow: 2px 2px 5px var(--n3t-mod-phocacart-search-border);
    z-index: 10;
    container-name: autocompleter;
    container-type: inline-size;
}

.n3t_phocacart_search__autocompleter.show {
    display: flex;
    flex-direction: column;
    max-height: 75vh;
}

.n3t_phocacart_search__autocompleter.loading {
    min-height: 50px;
}

.n3t_phocacart_search__autocompleter.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_6kVp{transform-origin:center;animation:spinner_irSm .75s infinite linear}@keyframes spinner_irSm{100%{transform:rotate(360deg)}}</style><path d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z" class="spinner_6kVp"/></svg>');
    background-position: center 15px;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-color: var(--n3t-mod-phocacart-search-background);
    opacity: 0.5;
}

.n3t_phocacart_search__autocompleter ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.n3t_phocacart_search__autocompleter a:focus {
    background-color: var(--n3t-mod-phocacart-search-highlight);
}

.n3t_phocacart_search__autocompleter img {
    max-width: 100%;
}

.n3t_phocacart_search__autocompleter .alert {
    margin: 0;
}

ul.n3t_phocacart_search__products {
    overflow-y: scroll;
    scrollbar-color: var(--n3t-mod-phocacart-search-scrollbar-color);
    scrollbar-width: var(--n3t-mod-phocacart-search-scrollbar-width);
}

ul.n3t_phocacart_search__products::-webkit-scrollbar {
    width: var(--n3t-mod-phocacart-search-scrollbar-width);
}

ul.n3t_phocacart_search__products::-webkit-scrollbar-track {
    background: transparent;
}

ul.n3t_phocacart_search__products::-webkit-scrollbar-thumb {
    background: var(--n3t-mod-phocacart-search-scrollbar-color);
}

ul.n3t_phocacart_search__products li:not(:last-child) {
    display: block;
    border-bottom: 1px solid var(--n3t-mod-phocacart-search-border);
}

ul.n3t_phocacart_search__products a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: .5em 1em;
    text-decoration: none;
}

ul.n3t_phocacart_search__products .image {
    flex: 0 0 var(--n3t-mod-phocacart-search-image-width);
    margin-right: 1em;
    text-align: center;
}

.n3t_phocacart_search__products .manufacturer {
    flex: 0 0 var(--n3t-mod-phocacart-search-manufacturer-width);
    margin-right: 1em;
    font-weight: bold;
}

ul.n3t_phocacart_search__products .title {
    flex: 1;
}

ul.n3t_phocacart_search__products .prices {
    flex: 0 0 var(--n3t-mod-phocacart-search-price-width);
    margin-left: 1em;
    text-align: right;
}

ul.n3t_phocacart_search__products .prices .price-original {
    display: block;
    text-decoration: line-through;
    color: var(--n3t-mod-phocacart-search-price-original-color);
    font-weight: lighter;
}

ul.n3t_phocacart_search__products .prices .price {
    display: block;
    font-weight: bolder;
}

@container autocompleter (max-width: 500px) {
    ul.n3t_phocacart_search__products a {
        display: block;
    }

    ul.n3t_phocacart_search__products  a:has(.image) {
        display: grid;
        grid-template-columns: var(--n3t-mod-phocacart-search-image-width) 1fr;
    }

    ul.n3t_phocacart_search__products .image {
        grid-row-start: 1;
        grid-row-end: span 3;
        margin-right: .5em;
    }

    ul.n3t_phocacart_search__products :is(.manufacturer, .title, .prices) {
        margin: 0;
        display: block;
    }

    ul.n3t_phocacart_search__products .prices :is(.price-original, .price) {
        display: inline-block;
    }
}

.n3t_phocacart_search__total {
    border-top: 1px solid var(--n3t-mod-phocacart-search-border);
}

.n3t_phocacart_search__total a {
    display: block;
    padding: .5em 1em;
}

ul.n3t_phocacart_search__products .title small {
    display: block;
}

:is(.n3t_phocacart_search__categories, .n3t_phocacart_search__manufacturers, .n3t_phocacart_search__tags) {
    padding: .5em 1em;
    border-bottom: 1px solid var(--n3t-mod-phocacart-search-border);
}

:is(.n3t_phocacart_search__categories, .n3t_phocacart_search__manufacturers, .n3t_phocacart_search__tags) :is(ul, li) {
    display: inline;
    margin: 0;
    padding: 0;
}

:is(.n3t_phocacart_search__categories, .n3t_phocacart_search__manufacturers, .n3t_phocacart_search__tags) :is(h6, a) {
    display: inline-block;
    margin: 0 .5em 0 0;
    padding: 0;
}