.product-list--listview .product-list-header {
    display: grid;
    gap: 0 5px;
    grid-template-areas: ". . stock price . .";
    grid-template-columns: 80px auto 5.5rem 7rem 30px 23px;
    margin-left: 5px;
    padding: 5px 0;
    font-weight: 600;
}

.product-list--listview > ul { display: block; }

.product-list--listview > ul > li {
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
}

.product-list--listview > ul > li + li { border-top: none; }

.product-list--listview .product-list-item {
    align-items: center;
    gap: 1px 5px;
    grid-template-areas:
        ".   title title title     .   ."
        "pic sku   sku   old-price .   ."
        "pic id    stock price     .   ."
        "pic cmpg  buy   buy       fav cmpr";
    grid-template-columns: 80px auto 5.5rem 7rem 30px 23px;
    grid-template-rows: max-content;
    margin-left: 5px;
    padding: 5px 0;
}

.product-list--listview .product-list-item > .product-picture {
    align-items: center;
    background-color: #fff;
    display: flex;
    height: 60px;
    justify-content: center;
}

.product-list--listview .product-list-item > .product-id { display: block; }

.product-list--listview .product-list-item > .product-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-list--listview .product-list-item > .product-sku {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .product-list--listview .product-list-item > .product-price-header {
        display: none;
    }


.product-list--listview .product-list-item > .product-buy button.add-to-shoppinglist {
    display: block;
    width: 18px;
}

.product-list--listview .product-list-item > .product-highlights { display: none; }

.product-list--listview .product-list-item > .product-compare input[type=checkbox] { transform: scale(1.3); }

@media (min-width: 768px) {

    .product-list--listview .product-list-header {
        grid-template-areas: ". . . stock price . . .";
        grid-template-columns: 80px 3.7rem auto 5.5rem 5.5rem 12rem 30px 23px;
    }

    .product-list--listview .product-list-item {
        gap: 0 5px;
        grid-template-areas:
            "pic id title      stock      price      buy        fav cmpr"
            "pic .  sku        .          old-price  .          .   ."
            "pic .  cmpg       cmpg       cmpg       .          .   ."
            "pic .  highlights highlights highlights highlights .   .";
        grid-template-columns: 80px 3.7rem auto 5.5rem 5.5rem 12rem 30px 23px;
    }

    .product-list--listview .product-list-item > .product-highlights { display: block; }

    .product-list--listview .product-list-item > .product-highlights > ul > li { display: inline; }

    .product-list--listview .product-list-item > .product-highlights > ul > li + li { margin-left: 0.7rem; }    
}


@media (min-width: 992px) {

    .product-list--listview .product-list-header {
        grid-template-areas: ". . . stock price . . .";
        grid-template-columns: 80px 3.7rem auto 5.5rem 5.5rem 14rem 30px 23px;
    }

    .product-list--listview .product-list-item {
        gap: 0 5px;
        grid-template-columns: 80px 3.7rem auto 5.5rem 5.5rem 14rem 30px 23px;
    }
}