/*

La card è costituita da:
Immagini - Rif componente immagine (4:3)
Nome prodotto: max 2 righe poi “...”
                     Descrizione: max 2 righe poi “...” (opzionale)
Tag: max 2 (opzionale)
*/

.product-card__img {
    border-radius: var(--image-border-radius-mobile);

    transition: all 0.3s linear;
    position: relative;
    overflow: hidden;
    display: block;
    background: var(--color-sage-2);
    padding-bottom: 70%;
    border: 1px solid transparent;
    margin-bottom:1rem;
}.product-card__img img {
     height: auto;
     position: absolute;
     width: auto;
     max-width: none;
     display: block;
     left: -10000%;
     right: -10000%;
     top: -10000%;
     bottom: -10000%;
     margin: auto auto;
     min-width: 1000%;
     min-height: 1000%;
     -webkit-transform: scale(0.1);
     transform: scale(0.1);
 }
.card.product-card {
    overflow: hidden;
    color:var(--color-black);
    box-shadow: none;
    transition: all 0.3s linear;
    text-decoration: none;
    margin: 0 -0.5rem;
     padding: 0.5rem;

    border: 2px solid transparent;
    background: transparent;
}
.card.product-card:focus,
.card.product-card:hover,
.card.product-card:active {
    color: var(--color-black);
    text-decoration: none;
}

.card.product-card:focus,   .card.product-card:active {
    background-color: var(--color-sage-1);
    border-color: var(--color-green-2);
}
.card.product-card:hover .product-card__title
 ,
 .card.product-card:focus .product-card__title{
     text-decoration: underline;
     color: var(--color-green-4);
 }
.card.product-card:hover .product-card__img {
    box-shadow: var(--shadow-1);
    border: 1px solid var(--color-black);}
.card.product-card:active .product-card__img {
    box-shadow: none;
    border: 1px solid transparent;}

.product-card__title {
    transition: all 0.3s linear;
    margin-bottom: 0.25rem;
    /* font-size: var(--text-size-S); */
    /* line-height: var(--text-line-height-S); */
    /* letter-spacing: var(--text-letter-spacing-S); */
    /* font-family: var(--font-family-title), sans-serif; */
    color: var(--color-black);
    font-weight: var(--font-weight-bold);
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}.product-card__body {
     transition: all 0.3s linear;
     display: -webkit-box;
     max-width: 100%;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }


@media(min-width:576px){


    .product-card__title {
          font-size: var(--text-size-S);
          line-height: var(--text-line-height-S);
         letter-spacing: var(--text-letter-spacing-S);

    }
    .product-card__img {
        border-radius: var(--image-border-radius);
    }
}