html, body {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        main {
            flex: 1;
        }


/* Stili da aggiungere o modificare nel tuo file CSS (es. public/css/app.css o styles.css) */

.card.h-100 {
    display: flex;
    flex-direction: column;
}

.card-body.fixed-height-body {
    flex-grow: 1;
    min-height: 120px; /* Mantieni o aggiusta questo valore per il testo del body */
}

.card-footer.fixed-height-footer {
    /* Rimuovi 'height: 70px;' se vuoi che l'altezza del footer si adatti al contenuto + padding,
       altrimenti mantienila se vuoi una dimensione fissa e il padding verrà all'interno di questa altezza.
       Per il momento la rimuovo per lasciare più flessibilità al bottone.
    */
     height: 120px;  /* COMMENTATO: l'altezza del footer si adatterà ora al contenuto + padding */
    background-color:#212529; /* Sfondo nero esplicito, se non è già dato da bg-dark */
    display: flex;
    align-items: center; /* Centra verticalmente gli elementi: prezzo e contenitore bottone */
    justify-content: space-between; /* Spazio tra prezzo e bottone */
    
    /* Nuovo: Aggiungi un padding a TUTTO il footer nero, sia verticale che orizzontale */
    padding: 10px 10px; /* 10px sopra/sotto, 10px sinistra/destra per il div nero. REGOLA QUESTI VALORI. */
                        /* Questo creerà la distanza dal div nero che chiedi. */
}

/* Regola il padding del prezzo per bilanciare l'allineamento */
.card-footer .text-white {
    flex-shrink: 0; /* Impedisce al prezzo di rimpicciolirsi */
    margin-right: auto; /* Spinge il prezzo a sinistra, lasciando spazio al bottone */
    /* Rimuovi padding specifici qui, ora sono gestiti dal padding del .card-footer */
    padding-left: 0; 
    padding-right: 0;
}

/* Contenitore del bottone all'interno del footer */
.card-footer .ms-auto.h-100 {
    display: flex;
    /* align-items: stretch; */ /* Rimosso: non vogliamo che il bottone si allunghi più al 100% dell'altezza del suo contenitore */
    align-items: center; /* Centra il bottone verticalmente all'interno di questo div se il bottone non occupa tutta l'altezza */
    justify-content: center; /* Centra il bottone orizzontalmente all'interno di questo div */
    /* height: 100%; */ /* Rimosso: l'altezza sarà dettata dal bottone stesso */
    
    /* Mantieni la larghezza fissa per questo CONTENITORE */
    width: 200px; /* REGOLA QUESTA LARGHEZZA: deve essere sufficiente per il bottone + padding interni al bottone */
    
    /* Rimosso padding laterale qui, ora il padding esterno del bottone lo gestirà meglio */
    /* padding: 0 10px; */
}

.card-footer .btn {
    /* Rimosso height: 100%; */ /* Permette al bottone di avere un'altezza variabile in base al contenuto e al padding */
    width: 100%; /* Il bottone occupa tutta la larghezza del suo contenitore (.ms-auto.h-100) */
    
    display: flex; /* Mantenuto per centrare il testo */
    flex-direction: column; /* Imposta la direzione dei figli in colonna per centrare il testo multilinea */
    justify-content: center; /* Centra il testo verticalmente */
    align-items: center; /* Centra il testo orizzontalmente (utile per testo multilinea) */
    text-align: center; /* Fallback per centratura testo */
    
    /* Padding INTERNO al bottone: questo è lo spazio tra il testo e i bordi del bottone */
    /* Questo è il "padding 10% sopra e sotto, 10% sinistra, destra" che chiedevi prima. */
    /* Useremo un valore fisso per una maggiore prevedibilità dell'altezza del bottone. */
    padding: 8px 10px; /* Esempio: 8px verticale (circa 10% di altezza desiderata), 10px orizzontale. REGOLA QUI. */
                       /* Se vuoi davvero il 10% percentuale sulla larghezza: padding: 8px 10%; */

    /* Importante: ora il testo DEVE andare a capo */
    white-space: normal; /* Permette al testo di andare a capo */
    overflow: visible;   /* Il testo non sarà nascosto */
    text-overflow: clip; /* Rimuove i puntini di sospensione */
    
    /* Potresti aver bisogno di ridurre la dimensione del font */
    font-size: 0.95rem; /* O anche 0.9rem se il testo è troppo lungo */

    line-height: 1.2; /* Aggiungi un line-height per controllare lo spazio tra le righe del testo che va a capo */
}
 .product-category-overlay {
        position: absolute; /* Posizionamento assoluto rispetto al genitore con position: relative */
        top: 10px; /* 10px di margine dall'alto */
        left: 0px; /* 10px di margine da sinistra */
        background-color: rgba(255, 255, 255, 0.8); /* Bianco con 80% di opacità */
        padding: 4px 8px; /* Padding interno */         
        font-size: 1rem; /* Testo più piccolo */
        font-weight: 600; /* Testo semi-grassetto */
        color: #333; /* Colore del testo scuro */
        font-weight: bold;
        text-transform: uppercase; 
        z-index: 10; /* Assicurati che sia sopra l'immagine */
        pointer-events: none; /* Non blocca gli eventi del mouse sull'immagine */
    }