/**
 * css/custom/card-product.css
 * Stili personalizzati per le card prodotto
 */

.gp-product-card {

    position        : relative;

    /** min-height    : 570px; */ 
    /** min-height    : 270px; */ 

    min-height      : auto;

    margin-bottom   : 50px;
    border-radius   : 32px;

    border          : 1px solid rgba(190, 188, 187, 0.85);
    background      : #fff;
    overflow        : hidden;

    transition      : box-shadow 0.25s ease, border-color 0.25s ease;

    display         : flex;
    flex-direction  : column;

}


.gp-product-card:hover {
    box-shadow   : 0 12px 28px rgba(0, 0, 0, 0.14);
    border-color : var(--odoo-theme-light);
}


.gp-product-image-wrap {

    position    : relative;


    flex        : 0 0 400px;
    height      : 400px;
    min-height  : 400px;
    max-height  : 400px;

    flex        : 0 0 300px;
    height      : 300px;
    min-height  : 300px;
    max-height  : 300px;

    overflow    : hidden;
    background  : #f8f8f8;

    /** 
    flex        : 0 0 220px;
    height      : 220px;
    min-height  : 220px;
    max-height  : 220px;
    */ 


}

.gp-product-image-link {
    position : relative;
    display  : block;
    width    : 100%;
    height   : 100%;
}


.gp-product-image-hover {
    opacity    : 0;
    transition : opacity 0.3s ease, transform 0.6s ease;
}

.gp-product-image {
    opacity    : 1;
    transition : opacity 0.3s ease, transform 0.6s ease;
}


.gp-product-image,
.gp-product-image-hover {
    position        : absolute;
    inset            : 0;
    display         : block;
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    object-position : center;
}

.gp-product-card:hover .gp-product-image,
.gp-product-card:hover .gp-product-image-hover {
    transform: scale(1.30);
}

.gp-product-card:hover .gp-product-image {
    opacity: 0;
}

.gp-product-card:hover .gp-product-image-hover {
    opacity: 1;
}

.gp-product-info {
    display            : grid;
    grid-template-rows : auto auto;
    row-gap            : 8px;
    background         : #fff;

    flex               : 0 0 auto;
    margin-top         : 0;
    padding            : 0 12px 20px;
}

.gp-product-name {
    display            : -webkit-box;
    -webkit-box-orient : vertical;
    overflow           : hidden;

    height             : 60px;
    min-height         : 60px;
    max-height         : 60px;

    margin             : 0;
    margin-top         : 10px;
    color              : #333;

    font-family        : 'Signika SemiBold', sans-serif;
    font-family        : 'Kondolar', sans-serif;   

    font-size          : 16px;
    font-weight        : 600;

    line-height        : 1.2;
    text-decoration    : none;
}

.gp-product-card:hover .gp-product-name {
    color: #ff5f1f;
}

.gp-product-price-wrap {
    display     : flex;
    align-items : baseline;
    flex-wrap   : wrap;
    gap         : 4px;
    margin      : 0;
}

.gp-product-price {
    color       : #ff5f1f;

    font-family : 'Kondolar', sans-serif;

    font-size   : 54px;
    font-weight : 300;
    line-height : 1;
}

.gp-product-price-muted {
    color      : #999;
    font-size  : 14px;
    font-style : italic;
}

.gp-product-um {
    margin      : 0;
    color       : #666;
    font-family : 'Kondolar', sans-serif;
    font-size   : 20px;
    font-weight : 400;
    line-height : 1.1;
}

.gp-product-promo-badge {
    position       : absolute;
    top            : 14px;
    left           : 14px;
    z-index        : 20;
    display        : inline-block;
    padding        : 6px 14px;
    background     : rgb(247, 51, 2);
    color          : #fff;
    font-size      : 14px;
    font-weight    : 400;
    letter-spacing : 0.5px;
    text-transform : uppercase;
}

.gp-product-category-badge {
    position   : absolute;
    top        : 14px;
    left       : 14px;
    z-index    : 20;
    padding    : 6px 14px;
    background : #ff5f1f;
    color      : #fff;
}

.gp-product-cart-action {
    position   : absolute;
    left       : 20px;
    right      : 20px;
    bottom     : 20px;
    z-index    : 20;
    text-align : center;
    opacity    : 0;
    transform  : translateY(10px);
    transition : all 0.3s ease;
}

.gp-product-card:hover .gp-product-cart-action {
    opacity   : 1;
    transform : translateY(0);
}

.gp-product-cart-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    padding         : 10px 24px;
    border-radius   : 28px;
    background      : #ff5f1f;
    color           : #fff;
    font-size       : 16px;
    font-weight     : 600;
    text-decoration : none;
}

.gp-product-cart-btn:hover {
    background: #e04e0e;
}

@media (max-width: 992px) {
    .gp-product-image-wrap {
        height     : 280px;
        min-height : 280px;
        max-height : 280px;
    }

    .gp-product-info {
        padding : 0 10px 18px;
        row-gap : 6px;
    }

    .gp-product-name {
        font-size  : 16px;
        line-height: 1.15;
        height     : 37px;
        min-height : 37px;
        max-height : 37px;
    }

    .gp-product-price {
        font-size: 34px;
    }

    .gp-product-um {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .gp-product-card {
        min-height: 320px;
    }

    .gp-product-image-wrap {
        height     : 220px;
        min-height : 220px;
        max-height : 220px;
    }

    .gp-product-name {
        font-size  : 14px;
        line-height: 1.15;
        height     : 32px;
        min-height : 32px;
        max-height : 32px;
    }

    .gp-product-price {
        font-size: 26px;
    }

    .gp-product-um {
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .gp-product-card {
        min-height    : 280px;
        border-radius : 12px;
    }

    .gp-product-image-wrap {
        height     : 160px;
        min-height : 160px;
        max-height : 160px;
    }

    .gp-product-info {
        padding : 0 8px 14px;
        row-gap : 4px;
    }

    .gp-product-name {
        font-size  : 13px;
        line-height: 1.1;
        height     : 29px;
        min-height : 29px;
        max-height : 29px;
    }

    .gp-product-price {
        font-size: 22px;
    }

    .gp-product-um {
        font-size: 14px;
    }
}