/*
 * CSS FINALE E FUNZIONANTE - BASATO SUL TEST DEI BORDI ROSSI
*/

/* Stile base del link, che diventa il nostro pulsante.
   Usiamo !important per forzare la sovrascrittura delle regole del tema. */
ul.products li.product-category a {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 100px !important;
    padding: 15px !important;

    border: 1px solid #e0e0e0 !important;
    border-radius: 5px !important;
    background-color: #f9f9f9 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
}

/* Effetto al passaggio del mouse sul pulsante */
ul.products li.product-category a:hover {
    background-color: #ff6b30 !important; /* L'arancione del tuo tema */
    border-color: #e65c24 !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}


/* Stile del titolo H2 DENTRO il pulsante.
   Lo colpiamo specificamente per controllare il testo. */
ul.products li.product-category a h2.woocommerce-loop-category__title {
    color: #333 !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    transition: color 0.2s ease-in-out;
}

/* Cambia il colore del testo quando il mouse è sul pulsante */
ul.products li.product-category a:hover h2.woocommerce-loop-category__title {
    color: #ffffff !important;
}