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

/* ============================================
   CARD PRINCIPALE
   ============================================ */
html body main#wrapper .card-product.style-5 {
    position        : relative !important;
    height          : auto !important;
    min-height      : 380px !important;
    margin-bottom   : 24px !important;
    border-radius   : 0px !important;
    background      : #fff !important;
    /** box-shadow      : 0 4px 12px rgba(0, 0, 0, 0.08) !important; */ 
    /** transition      : transform 0.25s ease, box-shadow 0.25s ease !important; */ 
    overflow        : hidden !important;
}


html body main#wrapper .card-product.style-5::after {
    content         : "" !important;
    position        : absolute !important;
    inset           : 0 !important;
    /** border-radius   : 30px !important; */ 
    border          : 1px solid transparent !important;
    pointer-events  : none !important;
    z-index         : 30 !important;
    transition      : border-color 0.25s ease !important;
}

html body main#wrapper .card-product.style-5:hover {
    transform       : none !important;
    box-shadow      : 0 12px 28px rgba(0, 0, 0, 0.14) !important;
}

html body main#wrapper .card-product.style-5:hover::after {
    border-color    : rgba(255, 95, 31, 0.85) !important;
}


/* ============================================
   WRAPPER IMMAGINE
   ============================================ */
html body main#wrapper .card-product .card-product_wrapper.aspect-ratio-0.d-flex.style-line-radius {
    height          : 350px !important;
    min-height      : 350px !important;
    max-height      : 350px !important;
    overflow        : hidden !important;
    border-radius   : 0 !important;
    position        : relative !important;
    background      : #f8f8f8 !important;
}

/* ============================================
   LINK IMMAGINE
   ============================================ */
.card-product .product-img {
    display     : block !important;
    width       : 100% !important;
    height      : 100% !important;
    position    : relative !important;
    overflow    : hidden !important;
}

/* ============================================
   IMMAGINI
   ============================================ */
.card-product .img-product,
.card-product .img-hover {
    width           : 100% !important;
    height          : 100% !important;
    object-fit      : cover !important;
    object-position : center !important;

    transition      : opacity 0.3s ease, transform 0.6s ease !important;
}

.card-product:hover .img-product,
.card-product:hover .img-hover {
    transform: scale(1.05);
}

.card-product .img-hover {
    position    : absolute !important;
    top         : 0 !important;
    left        : 0 !important;
    opacity     : 0 !important;
}

.card-product:hover .img-hover {
    opacity: 1 !important;
}

.card-product:hover .img-product {
    opacity: 0 !important;
}

/* ============================================
   INFO PRODOTTO
   ============================================ */
.card-product .card-product_info {
    padding             : 0 12px 20px !important;
    background          : #fff !important;

    border-radius       : 0 !important;

    display             : grid !important;
    grid-template-rows  : auto auto !important;
    row-gap             : 8px !important;
}

/* ============================================
   DESCRIZIONE ARTICOLO
   ============================================ */
.card-product .name-product {
    display             : -webkit-box !important;
    -webkit-box-orient  : vertical !important;
    -webkit-line-clamp  : 2 !important;
    overflow            : hidden !important;

    font-size           : 18px !important;
    font-weight         : 400 !important;
    line-height         : 1.15 !important;
    color               : #333 !important;
    text-decoration     : none !important;
    margin              : 0 !important;

    height              : 42px !important;
    min-height          : 42px !important;
    max-height          : 42px !important;
}

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

/* ============================================
   PREZZO ARTICOLO
   ============================================ */
.card-product .price-wrap {
    margin          : 0 !important;
    display         : flex !important;
    align-items     : baseline !important;
    gap             : 6px !important;
    flex-wrap       : wrap !important;
}

.card-product .price-wrap .price-art {
    font-size       : 45px !important;
    font-weight     : 400 !important;
    color           : #ff5f1f !important;
    line-height     : 1 !important;
}

.card-product .price-wrap .price-art .text-muted {
    color       : #999 !important;
    font-size   : 14px !important;
    font-style  : italic !important;
}

/* ============================================
   UNITA' DI MISURA
   ============================================ */
.card-product .price-wrap .um-art {
    margin          : 0 !important;
    font-size       : 24px !important;
    font-weight     : 400 !important;
    color           : #182931 !important;
    line-height     : 1.1 !important;
}


/* ============================================
   SOTTOCATEGORIA (DISATTIVATA - MANTENUTA PER COMPATIBILITÀ)
   ============================================ */
/** 
.card-product .product-badge_list .product-badge_item .fw-normal .h6 .bg-primary {
    display          : inline-block !important;
    padding          : 6px 14px !important;
    font-size        : 20px !important;
    font-weight      : 400 !important;
    letter-spacing   : 0.5px !important;
    text-transform   : uppercase !important;
    color            : #ffffff !important;
    background       : rgba(238, 103, 13, 0.7) !important;  
    backdrop-filter  : blur(4px) !important;
    border-radius    : 0px !important;  
    border           : none !important;
}
*/

/* ============================================
   PROMOZIONE - POSIZIONAMENTO BADGE IN ALTO A SINISTRA
   ============================================ */
.card-product .product-promozione_badge_list {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 20 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.card-product .product-promozione_badge_item {
    display: inline-block !important;
    padding: 6px 14px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    background: rgb(247, 51, 2) !important;
    backdrop-filter: blur(4px) !important;
    border-radius: 0px !important;
    border: none !important;
}



/* ============================================
   BOTTONE ORDINA (ADD TO CART)
   ============================================ */

/* CONTENITORE BOTTONE */
.card-product .product-action_bot {
    position    : absolute !important;
    bottom      : 20px !important;
    left        : 80 !important;
    right       : 80 !important;
    text-align  : center !important;
    z-index     : 20 !important;
    opacity     : 0 !important;
    transform   : translateY(10px) !important;
    transition  : all 0.3s ease !important;
}

.card-product:hover .product-action_bot {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* BOTTONE BASE */
.card-product .tf-btn.animate-btn {
    display         : inline-flex !important;
    align-items     : center !important;
    justify-content : center !important;
    gap             : 8px !important;
    padding         : 10px 24px !important;
    background      : #ff5f1f !important;
    color           : #fff !important;
    font-size       : 16px !important;
    font-weight     : 600 !important;
    text-decoration : none !important;
    border          : none !important;
    border-radius   : 28px !important;
    cursor          : pointer !important;
    transition      : all 0.2s ease !important;
}

/* HOVER BOTTONE */
.card-product .tf-btn.animate-btn:hover {
    background: #e04e0e !important;
    transform: translateY(-2px) !important;
}

/* ICONA FRECCIA */
.card-product .tf-btn.animate-btn .icon-arrow-right {
    font-size: 14px !important;
    transition: transform 0.2s ease !important;
}

.card-product .tf-btn.animate-btn:hover .icon-arrow-right {
    transform: translateX(4px) !important;
}















/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
    html body main#wrapper .card-product .card-product_wrapper.aspect-ratio-0.d-flex.style-line-radius {
        height      : 280px !important;
        min-height  : 280px !important;
        max-height  : 280px !important;
    }

    .card-product .card-product_info {
        padding : 0 10px 18px !important;
        row-gap : 6px !important;
    }

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

    .card-product .price-wrap .price-art {
        font-size: 34px !important;
    }

    .card-product .price-wrap .um-art {
        font-size: 20px !important;
    }
}

@media (max-width: 768px) {
    html body main#wrapper .card-product.style-5 {
        min-height: 320px !important;
    }

    html body main#wrapper .card-product .card-product_wrapper.aspect-ratio-0.d-flex.style-line-radius {
        height      : 220px !important;
        min-height  : 220px !important;
        max-height  : 220px !important;
    }

    .card-product .card-product_info {
        padding : 0 10px 16px !important;
        row-gap : 6px !important;
    }

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

    .card-product .price-wrap {
        gap: 4px !important;
    }

    .card-product .price-wrap .price-art {
        font-size: 26px !important;
    }

    .card-product .price-wrap .um-art {
        font-size: 16px !important;
    }

    .card-product .product-promozione_badge_item {
        font-size   : 11px !important;
        padding     : 5px 10px !important;
    }
}

@media (max-width: 576px) {
    html body main#wrapper .card-product.style-5 {
        min-height      : 280px !important;
        border-radius   : 12px !important;
    }

    html body main#wrapper .card-product .card-product_wrapper.aspect-ratio-0.d-flex.style-line-radius {
        height      : 160px !important;
        min-height  : 160px !important;
        max-height  : 160px !important;
    }

    .card-product .card-product_info {
        padding : 0 8px 14px !important;
        row-gap : 4px !important;
    }

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

    .card-product .price-wrap .price-art {
        font-size: 22px !important;
    }

    .card-product .price-wrap .um-art {
        font-size: 14px !important;
    }

    .card-product .product-promozione_badge_list {
        top     : 8px !important;
        left    : 8px !important;
    }

    .card-product .product-promozione_badge_item {
        padding     : 4px 8px !important;
        font-size   : 10px !important;
    }
}

/* ============================================
   UTILITY PER IMMAGINI MANCANTI
   ============================================ */
.card-product .img-product[src*="placeholder"],
.card-product .img-product[src=""] {
    object-fit  : contain !important;
    padding     : 20px !important;
    background  : #f5f5f5 !important;
}