/* ******************************************** */
/** PRODUCT
/* ******************************************** */

.c-product__card{
    position: relative;
    height: 100%;
    padding-bottom: 65px;
}

.c-product__image{
    display: block;
    position: relative;
    aspect-ratio: 240/168;
    overflow: hidden;
    /* border-radius: 12px; */
    transition: border 250ms ease-out;
}

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

.c-product__category{
    font-size: 1.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #F77103;
    position: relative;
}
.c-category__icon{
    color: #201f1d;
    font-size: 0.8em;
    position: absolute;
    top: 0;
    right: -1.8rem;
}

.c-product__title{
    font-size: 2.4rem;
    margin-top: 0.3em;
    line-height: 1.1;
}

.c-product__title-link{
    display: inline-block;
    text-transform: uppercase;
    line-height: 0.9;
}

.c-product__price{
    font-size: 2rem;
    margin-top: 1em;
}

.c-price__price-prev{
    font-size: 1.7rem;
    color: #87827A;
    text-decoration: line-through;
    line-height: 0;
}

.c-price__number{
    display: inline-block;
    vertical-align: middle;
    font-size: 2.8rem;
    line-height: 0;
}

.c-price__percentage{
    display: inline-block;
    vertical-align: middle;
    color: currentColor;
    font-size: 1.4rem;
    padding: 0.4em 0.8em;
    border: 1px solid;
    margin-left: 1.2em;
}

.c-product__action{
    position: absolute;
    left: 10px;
    bottom: 0;
    font-size: 1.4rem;
    color: var(--color-primary);
    white-space: nowrap;
    font-weight: 500;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.4rem;
    align-items: center;
}

.c-product__action-icon{
    font-size: 2em;
    background-color: #F77103;
    color: #fff;
    padding: 0.3em;
}

.c-product__action-text {
    background-color: #323130;
    color: #fff;
    padding: 1.13rem 1.4rem;
    position: relative;
    text-transform: uppercase;
    transition: background-color 200ms ease-in-out;
}
.c-product__action-text:after {
    content: "";
    position: absolute;
    top: calc(100% - 1.4rem);
    left: 1.4rem;
    right: 1.4rem;
    height: 1px;
    background-color: currentColor;
}
.c-product__action-text--added {
    background-color: #F77103;
}

/* sold out */

.c-product.sold-out .c-product__action{
    color: var(--color-error);
}

.c-product.in-cart .c-product__action{
    color: var(--color-success);
}
.c-product.in-cart .c-product__action{
    display: none;
}
.c-product__action--added{
    display: none;
}
.c-product.in-cart .c-product__action--added {
    display: block !important;
    pointer-events: none;
}

.c-product.in-cart .c-product__action--added p:after,
.c-product.in-cart .c-product__action--added .c-product__action-icon {
    display: none;
}

.c-product.sold-out .c-product__image,
.c-product.sold-out .c-product__info{
    opacity: .3;
}


/* has-background */ 

.c-carousel.has-background .c-product__card{
    background-color: var(--color-lightest);
    border-radius: 12px;
    padding-bottom: 71px;
    overflow: hidden;
}

.c-carousel.has-background .c-product__image{
    border-radius: 0; 
}

.c-carousel.has-background .c-product__info{
    padding: 22px 16px 0;
}

.c-carousel.has-background .c-product__action{
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
}


/* No image */

.no-image-product {
    background: url(../../images/static/no-image.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
    background-color: rgb(var(--color-skyblue-rgb)/25%);
}

.c-gallery .no-image-product{
    background-size: 30%;
}

@media (hover: hover) {
    .c-product__action-text:is(:hover, :focus) {
        background-color: var(--color-hover);
    }
}

/* ********************** Solo Mobile ********************** */
@media (max-width: 767px) {
    .c-product__action-icon{
        display: none;
    }
}
/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {

    .c-product__category:hover,
    .c-product__category:focus,
    .c-product__title-link:hover,
    .c-product__title-link:focus,
    .c-product__action:hover,
    .c-product__action:focus{
        color: var(--color-hover); 
    }

    .c-carousel:not(.has-background) .c-product__image:hover,
    .c-carousel:not(.has-background) .c-product__image:focus{
        border: 3px solid var(--color-hover);
        transition: border 250ms ease-out;
    }

}