
.One-Bit-Product-container{
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;

    font-family: 'Poppins';
    align-items: flex-start;
    align-content: flex-start;
    gap: 44px 16px;
    justify-content: space-around;
    padding: 0px 16px;
}
.One-Bit-Product-container *{
    box-sizing: border-box;
}
.One-Bit-Product p{
    margin: 0;
}
.One-Bit-Product{
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: max-content;

    /* Luego cambiar por el calculado */
    width: 273px; 
}

.One-Bit-Product .product-image-wrapper{
    position: relative;
    width: 100%;
    height: 228px;
}

.One-Bit-Product .img-container{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 14px 15px;
    display: block;
    overflow: hidden;
    border-radius: 20px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.One-Bit-Product .fav-and-offer-container{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 14px 15px;
    z-index: 2;
    pointer-events: none;
}

.One-Bit-Product .fav-and-offer-container .fav,
.One-Bit-Product .fav-and-offer-container .offer,
.One-Bit-Product .fav-and-offer-container .spacer{
    min-width: 1px;
    pointer-events: auto;
}

.One-Bit-Product .fav-and-offer-container .offer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5.5px 6.5px;
    gap: 10px;
    background: #BBFF83;
    border-radius: 200px;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 110%;
    height: fit-content;
    text-align: center;

    color: #000000;
}
.One-Bit-Product .fav-and-offer-container .outlet{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5.5px 14px;
    gap: 10px;
    background: #FFDB0E;
    border-radius: 200px;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 110%;
    height: fit-content;
    text-align: center;

    color: #000000;
}
.One-Bit-Product .fav-and-offer-container .presale{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 5.5px 14px;
    gap: 10px;
    background-color: #13D4EA;
    border-radius: 200px;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 110%;
    height: fit-content;
    text-align: center;

    color: #000000;
    
}
.One-Bit-Product .fav-and-offer-container .fav,
.Stor-And-Favorite .fav{
    background: #F9F8F8;
    width: 35px;
    height: 35px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    position: relative;
}

/* Make images inside favorite div not capture pointer events so clicks go to parent */
.One-Bit-Product .fav-and-offer-container .fav img,
.Stor-And-Favorite .fav img,
.One-Bit-Product .fav-and-offer-container .fav i,
.Stor-And-Favorite .fav i {
    pointer-events: none;
}

/* Ensure favorite div is clickable */
.One-Bit-Product .fav-and-offer-container .fav.favourite,
.Stor-And-Favorite .fav.favourite {
    pointer-events: auto;
}

.One-Bit-Product .img-container .img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
    background-color: #F2F2F2;
    z-index: 0;
    background-blend-mode: multiply, normal;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.One-Bit-Product .info-container{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.One-Bit-Product .info-container p.store{
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;

    color: #919191;
}
.One-Bit-Product .info-container p.product-name{
    font-weight: 600;
    font-size: 20px;
    line-height: 110%;

    color: #000000;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.One-Bit-Product .price-container{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.One-Bit-Product .price-container p.previous-price{
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 110%;
    text-decoration-line: line-through;

    color: #767676;
}
.One-Bit-Product .price-container p.product-price{
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
    line-height: 110%;

    color: #000000;

    display: flex;
    justify-content: space-between;
}
a.Builder-Icon-Plus{
    border-radius: 50px;
    background-color: #F2F2F2;
    color: #BCB0B0;
    position: relative;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s linear, background-color 0.2s linear;
}
a.Builder-Icon-Plus span.Hover-Info{
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s linear;
    position: absolute;
    left: -56px;
    top: 6px;

    font-weight: 400;
    font-size: 8px;
    line-height: 12px;
    text-align: right;

    color: #000000;


}
a.Builder-Icon-Plus:hover{
    background-color: white;
    color: black;
    border: solid 1px black;
}
a.Builder-Icon-Plus:hover span.Hover-Info{
    visibility: visible;
    opacity: 1;
}
@media (max-width: 439px) {
    .One-Bit-Product .product-image-wrapper{
        height: 146px;
    }
    .One-Bit-Product .info-container p.store{
        font-size: 12px;
    }
    .One-Bit-Product .info-container p.product-name{
        font-size: 13px;
    }
    .One-Bit-Product .price-container p.product-price{
        font-size: 24px;
    }
    .One-Bit-Product .price-container p.previous-price{
        font-size: 15px;
    }
}


@media (min-width: 440px) and (max-width: 767px) {
    .One-Bit-Product .product-image-wrapper{
        height: 159px;
    }
    .One-Bit-Product .info-container p.store{
        font-size: 12px;
    }
    .One-Bit-Product .info-container p.product-name{
        font-size: 15px;
    }
    .One-Bit-Product .price-container p.product-price{
        font-size: 24px;
    }
    .One-Bit-Product .price-container p.previous-price{
        font-size: 15px;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .One-Bit-Product .info-container p.store,
    .One-Bit-Product .info-container p.product-name{
        font-size: 16px;
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .One-Bit-Product .info-container p.store,
    .One-Bit-Product .info-container p.product-name{
        font-size: 16px;
    }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    .One-Bit-Product .info-container p.store{
        font-size: 16px;
    }
}