/*
    Core settings
*/
:root {
    --acl_auto_width        : 800px;
    --acl_auto_link_color   : #000;
}

/*
    Custom scrollbar
*/
.acs_scroll::-webkit-scrollbar {
    width                   : 4px;
}

.acs_scroll::-webkit-scrollbar-track {
    background              : #ebebeb;
}

.acs_scroll::-webkit-scrollbar-thumb {
    background              : #757575;
}
@supports (-moz-appearance: none) {
    .acs_scroll {
        scrollbar-width     : thin;
    }
}

/*
    General typeahead / autocomplete
*/
.acs_auto_popup {
    display                 : none;
    position                : fixed;
    background              : #fff;
    padding                 : 15px;
    box-shadow              : 0 0 5px 0 rgba(0, 0, 0, 0.5);
    overflow                : auto;
    z-index                 : 99999;
}
@media (max-width: 889px) {
	.acs_auto_popup {
		top                 : 140px;
        left                : 10px;
        right               : 10px;
        bottom              : 10px;
	}
}
@media (min-width: 890px) {
	.acs_auto_popup {
		top                     : 180px;
        width                   : var(--acl_auto_width);
        left                    : calc((100% - var(--acl_auto_width)) / 2);
        margin                  : 0 auto;
        max-height              : 600px;
	}
    .acs_auto {
        display                 : grid;
        grid-gap                : 10px;
        align-items             : initial;
        grid-template-columns	: 220px auto;
    }
}
.acs_auto h4 {
    font-size               : 1rem;
    font-weight             : bold;
    line-height             : 1.3rem;
    color                   : var(--acl_auto_link_color);
    margin-top              : 12px;
    margin-bottom           : 4px;
}
.acs_auto h4:first-child {
    margin-top              : 0;
}
.acs_auto a {
    color                   : var(--acl_auto_link_color);
}
.acs_auto ul {
    margin                  : 0;
    padding                 : 0;
    list-style              : none;
}
.acs_auto li {
    display                 : block;
    margin                  : 0;
    padding                 : 0;
}
.acs_auto_col1 li {
    white-space             : nowrap;
    overflow                : hidden;
    text-overflow           : ellipsis;
}
.acs_auto_help a {
    font-size               : 0.9em;
    line-height             : 2.3em;
    padding                 : 3px 6px;
    border                  : 1px solid #ccc;
    border-radius           : 6px;
}

/*
    Landing pages
*/
.acs_auto_info {
}

/*
    Autocomplete products
*/
.acs_auto_col2 h4 a {
    float                   : right;
    text-decoration         : underline;
}
.acs_auto_prods {
    display                 : grid;
    grid-gap                : 10px;
    align-items             : initial;
    font-size               : 0.9em;
}
@media (max-width: 599px) {
    .acs_auto_prods {
        grid-template-columns	: repeat(2, 1fr);
    }
}
@media (min-width: 600px) {
    .acs_auto_prods_size_1 {
        grid-template-columns	: 1fr;
    }
    .acs_auto_prods_size_2 {
        grid-template-columns	: repeat(2, 1fr);
    }
    .acs_auto_prods_size_3 {
        grid-template-columns	: repeat(3, 1fr);
    }
    .acs_auto_prods_size_4 {
        grid-template-columns	: repeat(4, 1fr);
    }
    .acs_auto_prods_size_5 {
        grid-template-columns	: repeat(5, 1fr);
    }
    .acs_auto_prods_size_6 {
        grid-template-columns	: repeat(6, 1fr);
    }
}
.acs_auto_prod_image {
    position                : relative;
    background              : #eee;
    padding-top             : 133%;
    overflow                : hidden;
}
.acs_auto_prod_image img {
    position                : absolute;
    top                     : 0;
}
@supports (aspect-ratio: 3 / 4) {
    .acs_auto_prod_image {
        position            : unset;
        aspect-ratio        : 3 / 4;
        padding-top         : 0;
    }
    .acs_auto_prod_image img {
        position            : unset;
        top                 : unset;
    }
}
.acs_auto_prod_image img {
    width                   : 100%;
    height                  : 100%;
    object-fit              : cover;
    object-position         : 50% 0%;
}
@supports (-webkit-line-clamp: 2) {
    .acs_auto_prod_name {
        white-space             : normal;
        overflow                : hidden;
        text-overflow           : ellipsis;
        display                 : -webkit-box !important;
        -webkit-line-clamp      : 2;
        -webkit-box-orient      : vertical;
    }
}
.acs_auto_prod_was_price {
    display                 : inline-block;
    color                   : red;
    margin                  : 0 4px 0 0;
    text-decoration         : line-through;
}

/*
    Adverts
*/
.acs_auto_advert img {
    width                   : 100%;
}