/* =========================================
   CART ITEM
========================================= */

.cart-item {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto
        auto
        auto
        auto;

    align-items: center;

    gap: 10px;

    width: 100%;

    padding: 9px 0;

    border-bottom:
        1px solid #eeeeee;

    box-sizing: border-box;

}


/* =========================================
   INFO
========================================= */

.cart-item__info {

    min-width: 0;

}


.cart-item__name {

    display: block;

    
    margin: 0;
    padding: 0;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 600;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}


/* =========================================
   PRECIO UNITARIO
========================================= */

.cart-item__price {

    font-size: 14px;

    opacity: 0.6;

    white-space: nowrap;

}


/* =========================================
   CANTIDAD
========================================= */

.cart-item__controls {

    display: flex;

    align-items: center;

    gap: 8px;

}


.cart-item__quantity-button {

    width: 30px;

    height: 30px;

    padding: 0;

    border: none;

    border-radius: 8px;

    background: #eeeeee;

    font: inherit;

    font-size: 18px;

    cursor: pointer;

}


.cart-item__quantity {

    min-width: 24px;

    text-align: center;

    font-weight: 600;

}


/* =========================================
   SUBTOTAL
========================================= */

.cart-item__subtotal {

    min-width: 90px;

    text-align: right;

    font-weight: 600;

    white-space: nowrap;

}


/* =========================================
   ELIMINAR
========================================= */

.cart-item__remove {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    padding: 0;

    border: none;

    border-radius: 8px;

    background: transparent;

    font-size: 17px;

    cursor: pointer;

    opacity: 0.6;

}


.cart-item__remove:hover {

    opacity: 1;

    background: #eeeeee;

}


/* =========================================
   INTERACCIÓN
========================================= */

.cart-item__quantity-button:active,
.cart-item__remove:active {

    transform: scale(0.95);

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .cart-item {

        grid-template-columns:
            minmax(0, 1fr)
            auto
            auto;

        grid-template-rows:
            auto
            auto;

        column-gap: 10px;

        row-gap: 4px;

        padding: 8px 0;

    }


    /* -----------------------------------------
       FILA SUPERIOR
    ----------------------------------------- */

    .cart-item__info {

        grid-column: 1 / 3;

        grid-row: 1;

    }


    .cart-item__subtotal {

        grid-column: 3;

        grid-row: 1;

        min-width: auto;

        font-size: 16px;

    }


    /* -----------------------------------------
       FILA INFERIOR
    ----------------------------------------- */

    .cart-item__price {

        grid-column: 1;

        grid-row: 2;

        align-self: center;

    }


    .cart-item__controls {

        grid-column: 2;

        grid-row: 2;

    }


    .cart-item__remove {
        width: 30px;
        height: 30px;
        grid-column: 3;

        grid-row: 2;

    }

}