#cart{
    height: 445px;
}

/*boton de carrito*/

.creaweb-cart-float-button{
    padding: 0px;
    width: 2em;
    height: 2em;
    background: var(--primary-color);
    color: var(--primary-text-color);
    box-shadow:2px 5px 10px rgb(0 0 0 / 60%);
    z-index: 1112;
}

.creaweb-cart-float-button .badge-notify {
    position: absolute;
    top: -25px;
    right: -15px;
    color: var(--primary-text-color);
    background: var(--primary-text-color-inverse);
    box-shadow:2px 2px 10px rgb(0 0 0 / 30%)
}

.creaweb-cart-float-button:hover{
    color: var(--primary-text-color);
    background: var(--primary-text-color-inverse);
}

.creaweb-cart-float-button .badge-notify {
    background: var(--primary-text-color);
    color: var(--primary-text-color-inverse);
}
.creaweb-cart-float-button:hover .badge-notify{
    background: var(--primary-text-color);
    color: var(--primary-text-color-inverse);
}

/*Modal de carrito*/

#my-cart-modal .modal-header .close{
    order: 1;
}

#my-cart-modal .my-cart-checkout{
    background: var(--primary-text-color);
    color: var(--primary-color);
}

#my-cart-modal .remove-all{
    background: var(--primary-color);
    color: var(--primary-text-color);
    border-color: var(--primary-color);
}


#my-cart-modal .my-cart-checkout:hover{
    color: var(--primary-text-color);
    background: var(--primary-color);
    border-color: var(--primary-text-color) !important;
}

#my-cart-modal .remove-all:hover{
    color: var(--primary-color);
    background: var(--primary-text-color);
    border-color: var(--primary-color);
}


/*Tabla de productos*/
#my-cart-table img{
    object-fit: cover;
}

#my-cart-table table th,
#my-cart-table table td{
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    color: #212529;
    background-color: transparent;
}

.table-hover tbody td{
    position: relative;
    z-index: 1;
}
.table-hover tbody td *{
    z-index: 1;
}
.table-hover tbody tr:hover {
    color: #212529;
    background-color: transparent;
}

.table-hover tbody tr:not(.not-hover):hover td:before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: .3;
    background:var(--primary-color);
    z-index: -1;
}
.table-hover tbody tr:not(.not-hover):hover td:after {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: .1;
    z-index: -1;
    background:var(--primary-text-color);
}

#my-cart-table .product-value, #my-cart-table .product-value s{
    font-size: 14px;
}

#my-cart-table .product-value ul{
    margin-bottom: 0px;
}

#my-cart-table .my-product-remove{
    padding: 0px;
    border-radius: 100%;
    font-size: 12px;
    display: flex;
    height: 30px;
    width: 30px;
    justify-content: center;
    align-items: center;
    margin: auto;
    color: var(--primary-text-color);
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 2px 2px 4px 1px rgb(0 0 0 / 30%);
    z-index: 1;
}

#my-cart-table .my-product-remove:hover{
    color: #333;
    background: transparent;
    border-color: #333;
}

.product-value ul{
    list-style: none;
    flex-wrap: wrap;
    display: flex;
    padding: 0px;
    align-items: center;
    justify-content: center ;
 }
 .product-value ul li{
     color: #333;
 }

 .product-value ul li:after{
    content: " - ";
    padding: 5px;
 }

 .product-value ul li:last-child:after{
    display: none;
 }


.product-quantity{
    display: flex;
    align-items: center;
    justify-content: center;
    height:fit-content;
    margin: auto;
    width: fit-content;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    box-shadow:2px 2px 4px 1px rgb(0 0 0 / 30%);
}

.product-quantity button{
    background: transparent;
    border: none;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-text-color);
    background: var(--primary-color);
}


.product-quantity input{
    height: 25px;
    width: 70px;
    padding: 2px;
    background: #fff;
    border: none;
    font-size: 14px;
    color: #333;
    font-family: var(--primary-font-family);
    text-align: center;
}

#precioiva .bg-total{
    border-bottom: 1px solid #333;
}

table .bg-total{
    position: relative;
}
table .bg-total *{
    z-index: 1;
}

table .bg-total:before{
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: .1;
    background:var(--primary-color);
}

table .bg-total:after{
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: .1;
    background:var(--primary-text-color);
}

.table td, .table th{
    border-top: 1px solid #333;
    color: #333;
}

.table thead th{
    border-bottom: 2px solid #333;
}


@media screen and (max-width: 768px){
    .creaweb-cart-float-button {
        bottom: 80px;
    }
    .section-checkout .btn{
        font-weight: 400;
        min-width: 300px;
        font-size: 14px;
        margin: 2px 0px;
    }

}

@media screen and (max-width: 426px){
    .section-checkout .btn{
        font-weight: 400;
        min-width: 250px;
        font-size: 14px;
        margin: 2px 0px;
    }
    .section-checkout table th,  .section-checkout table td{
        font-size: 14px;
    }
}

@media screen and (max-width: 321px){
    .creaweb-cart-float-button {
        bottom: 60px;
    }
}