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


.cart-items .checkout-item {
    align-items: center;
    display: grid;
    gap: 5px 5px;
    grid-template-areas: 
        "img descr descr cmpg ."
        "img sku sku sku ."
        "img id stock price trash"
        "img qty qty total trash"
        ". bid bid bid ."
        ". text text text ."
        "error error error error error"
        "warning warning warning warning warning";
    grid-template-columns: 70px auto 5rem 6rem 32px;
    line-height: 1;
    margin-left: 0.2rem;
    padding-bottom: 5px;
    padding-top: 5px;
}


@media (min-width: 576px) {
    .cart-items .checkout-item {
        grid-template-areas:
            "img descr descr cmpg ."
            "img sku sku sku ."
            "img id stock price trash"
            "img . qty total trash"
            ". bid bid bid ."
            ". text text text ."
            "error error error error error"
            "warning warning warning warning warning";
    }
}

@media (min-width: 768px) {
    .cart-items .checkout-item {
        gap: 1px 5px;
        grid-template-areas:
            "img descr descr descr cmpg cmpg ."
            "img sku stock price qty total trash"
            "img id bid bid bid bid trash"
            ". text text text text text ."
            "error error error error error error error"
            "warning warning warning warning warning warning warning";
        grid-template-columns: 70px auto 5.5rem 5.5rem 6rem 6rem 32px;
    }
}

@media (min-width: 992px) {
    .cart-items .checkout-item {
        gap: 1px 5px;
        grid-template-areas: 
            "img descr descr descr cmpg cmpg cmpg ."
            "img sku buttons stock price qty total trash"
            "img id buttons bid bid bid bid trash"
            ". text text text text text text ."
            "error error error error error error error error"
            "warning warning warning warning warning warning warning warning";
        grid-template-columns: 70px auto 5.5rem 5.5rem 5.5rem 6rem 6rem 32px;
    }
}

.cart-items .checkout-item + .checkout-item { border-top: 1px solid #ccc; }

.cart-items .product-campaign-text {
    color: #d61021;
    grid-area: cmpg;
}

.cart-items .checkout-item > .product-error {
    grid-area: error;
    padding: 0.5rem;
}

.cart-items .checkout-item > .product-warning {
    grid-area: warning;
    padding: 0.5rem;
}

.cart-items .checkout-item > .product-picture {
    align-self: flex-start;
    background-color: #fff;
    grid-area: img;
    height: 50px;
    text-align: center;
}

.cart-items .product-picture img {
    max-height: 50px;
    max-width: 70px;
}


.cart-items .checkout-item > .product-title {
    font-weight: 700;
    grid-area: descr;
}

.cart-items .checkout-item > .product-sku {
    font-style: italic;
    grid-area: sku;
}

.cart-items .checkout-item > .product-id { grid-area: id; }

.cart-items .checkout-item > .product-bid { grid-area: bid; }

.cart-items .checkout-item > .product-bid .select > button {
    /*background-color: #007bff;*/
    border-radius: 0.3rem;
    max-width: 15rem;
    /*color: #fff;*/
    padding: 0 8px;
}

@media (min-width: 576px) {
    .cart-items .checkout-item > .product-bid .select > button { max-width: none; }
}

.cart-items .checkout-item > .buttons { display: none; }

.cart-items .checkout-item > .buttons button { height: 24px; }

.cart-items .checkout-item > .buttons button.article-fav { width: 24px; }

.cart-items .checkout-item > .product-stock { grid-area: stock; overflow:hidden; }

.cart-items .checkout-item > .product-price {
    grid-area: price;
    text-align: right;
}

.cart-items .checkout-item > .qty { grid-area: qty; }

.cart-items .checkout-item > .product-price-total {
    font-weight: 600;
    grid-area: total;
    text-align: right;
}

.cart-items .checkout-item > .trash { grid-area: trash; }

.cart-items .checkout-item > .text-line {
    border: none;
    grid-area: text;
}


.cart-items .checkout-item > .pending-delete {
    display: flex;
    gap: 0.5rem;
    grid-column: 3/span 3;
    grid-row: 2/span 3;
}


.cart-items .cart-footer {
    border-top: 2px solid #ccc;
    display: flex;
    line-height: 3rem;
}

.cart-items .cart-footer .qty { font-weight: 600; }

.cart-items .cart-footer .product-price {
    flex: 0 0 130px;
    font-size: 1rem;
    font-weight: 600;
    padding-right: 0.5rem;
    text-align: right;
}


.cart-items .checkout-item-deleted { opacity: 0.2; }

.cart-items .checkout-item-deleted .qty { visibility: hidden; }

.cart-items .checkout-item-deleted .trash { visibility: hidden; }

.cart-items .checkout-item-deleted .product-price-total { visibility: hidden; }


@media (min-width: 768px) {
    .cart-items .checkout-item > .product-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cart-items .checkout-item > .product-sku {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cart-items .checkout-item > .pending-delete {
        grid-column: 5/span 3;
        grid-row: 2/span 3;
    }
}

@media (min-width: 992px) {
    .cart-items .checkout-item > .buttons {
        align-items: center;
        display: flex;
        grid-area: buttons;
    }

    .cart-items .checkout-item > .buttons > button { padding: 0; }

    .cart-items .checkout-item > .buttons > button + button { margin-left: 4px; }

    .cart-items .checkout-item > .buttons > button > img { height: 16px; }
}