/* ******************************************** */
/** Category PRODUCTS
/* ******************************************** */

.c-products{
    padding-top: var(--separator);
}

.c-products__list{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    --products-gap: 16px;
    gap: calc(var(--separator)*2) var(--products-gap);
}


@media (min-width: 375px) and (max-width: 1200px){
    /* PRODUCT */

    .c-product{
        width: calc(50% - var(--products-gap)/2);
    }

    .c-product__info {
        padding: 22px 4px 0;
    }

    .c-price__price-prev{
        font-size: 1.4rem;
    }

    .c-product__price{
        font-size: 1.7rem;
    }

    .c-price__percentage{
        font-size: 1.1rem;
        margin-left: 0.6em;
    }

    .c-product__action {
        left: 5px;
        font-size: 1.4rem;
    }
}


@media (max-width: 375px) {
    
    .c-price__percentage{
        padding: 0;
        border: none;
    }
}


/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {
    
    .c-products__list{
        --products-gap: 19px;
    }

    .c-product {
        width: calc(33.3333% - var(--products-gap)*2/3);
    }
}


/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {
    
    .c-products{
        padding-top: 10px;
    }
    
    .c-product__image:hover,
    .c-product__image:focus{
        border: 3px solid var(--color-hover);
        transition: border 250ms ease-out;
    }
   
}


/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {
    
    .c-product {
        width: calc(25% - var(--products-gap)*3/4);
    }
}


/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1400px) {
    
    .c-products__list{
        --products-gap: 26px;
    }
}