product-card{
    --card-padding:22px;
    display: flex;
    flex-direction: column;
    background-color: rgb(var(--color-product-card-background-color));
    --button-background-color:51,51,51;
    --button-text-color:255,255,255
}
product-card .product-card{
    position: relative;
}

product-card .product-card>div{
    width:100%;
    height: 100%; 
}
product-card .product-info{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap:10px;
    padding:var(--card-padding);
    top: 0;
}
product-card .product-card .product-title{
    color:#321E1E;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
product-card .product-price__item--compare{
    text-decoration: line-through;
}

product-card .product-price__item{
    color:rgb(var(--color-sale))
}

product-card .product-price__item--compare{
    color:rgb(51, 51, 51,0.7)
}
product-card .product-image{
    aspect-ratio: 1/1;
}
product-card .product-badge{
    position: absolute;
    top: var(--card-padding);
    left: var(--card-padding);;
}

product-card .badge-tag{
    padding:4px 15px;
    border-radius:3px;
}

product-card .block-product-card__sold-out{
    background-color: #fff;
    color:#000
}

product-card .block-product-card__discount-tag{
    background-color: #FFE600;
    color:#000;
}

product-card .block-product-card__image-second{
    opacity: 0;
    transition: 0.3s;
    position: absolute;
    left: 0;
}

product-card:hover .block-product-card__image-second{
    opacity: 1;
}

product-card .product-card-button{
    position: absolute;
    bottom:0;
    opacity: 0;
    left:var(--card-padding);
    right:var(--card-padding);
    text-align: center;
    transition: 0.3s;
}

product-card .product-card-button .button{
    /* width:100%; */
    background-color: rgb(var(--button-background-color));
    color:rgb(var(--button-text-color));
}
product-card .product-card-button .button.loading button-content{
    opacity: 0;
}
product-card .product-card-button .button.loading svg{
    display: block;
}
product-card .product-card-button .button:hover{
    background-color: rgb(var(--button-background-color));
    color:rgb(var(--button-text-color));
}
product-card .product-title,
product-card .product-price{
    transition: 0.3s;
}
product-card:hover .product-title,
product-card:hover .product-price{
    opacity: 0;
}
product-card:hover .product-card-button{
    /* bottom:var(--card-padding); */
    bottom: 0;
    opacity: 1;
}

@media(max-width:959px){
    product-card{
        --card-padding:10px
    }
    product-card .product-card{
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: space-between;
    }
    product-card .product-info{
        height:auto;
    }
    product-card .product-card-button{
        position: relative;
        opacity: 1;
        left: auto;
        right: auto;
        bottom: 0;
    }
    product-card .badge-tag{
        padding:4px 10px;
    }
}