/* WOOCOMMERCE STYLE */
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price{color: var(--dark);}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price{color: var(--dark);}

.woocommerce ul.products {  
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 4 colonne per schermi più grandi */
    gap: 20px; /* Distanza tra gli elementi della griglia */
}

.woocommerce ul.products li.product{padding: 10px 0; width: 100%;}
.woocommerce ul.products li.product a img{ width: 100%; border: 2px solid var(--dark); margin: 0; margin-bottom: 10px;}
.product__text{ padding: 10px; margin:0; display: flex; justify-content: space-between; align-items: center; border:2px solid var(--dark);}
.product__text h2 {font-size: 16px;}
.woocommerce ul.products li.product .price{ margin:0; }
.woocommerce-breadcrumb{margin-bottom: 20px;}
.amount{display:block;}
.flex-control-nav.flex-control-thumbs{ display: none;}
.related{margin-top:40px;}

/* Container generale del prodotto */
.woocommerce div.product {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

/* Area immagine prodotto (immagine principale + galleria) */
.woocommerce div.product div.images {
    width: 40%; /* Puoi regolare questa larghezza */
    margin-right: 5%; /* Spaziatura tra immagine e sommario */
}

/* Area sommario prodotto (titolo, prezzo, pulsanti, ecc.) */
.woocommerce div.product div.summary {
    width: 55%; /* Adatta la larghezza per bilanciare il layout */
}

/* Stile per la galleria immagine */
.woocommerce div.product div.images img {
    max-width: 100%;
    height: auto;
    display: block;
}

.summary p.price{margin-bottom: 20px;}
.summary div.woocommerce-product-details__short-description{margin-bottom: 20px;}

/* Per la compatibilità su schermi più piccoli */
@media (max-width: 768px) {
    .woocommerce div.product {
        display: flex;
        flex-direction: column; /* Dispone le sezioni verticalmente */
    }

    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        width: 100%;
        margin-right: 0;
    }
}


@media (max-width: 768px) {
    .woocommerce ul.products{
        grid-template-columns: 1fr; /* 1 colonna per dispositivi mobili */
    }
}


/* Box input quantità */
.woocommerce-page .single_variation_wrap .quantity .input-text.qty {
    width: 60px; /* Imposta una larghezza fissa per il campo quantità */
    height: 40px; /* Imposta un’altezza confortevole per l’input */
    text-align: center; /* Centra il testo all'interno del campo */
    background: var(--primary);
    border: 2px solid var(--dark); /* Aggiungi un bordo chiaro */
    border-radius: 0px; /* Rende gli angoli più morbidi */
    padding: 0 10px; /* Aggiungi padding orizzontale */
}

.woocommerce-page .single_variation_wrap .quantity .input-text.qty:focus {
    border-color: var(--dark); /* Colore del bordo quando il campo è selezionato */
    outline: none; /* Rimuove il contorno predefinito */
}

/* Pulsante "Aggiungi al carrello" */
.woocommerce-page .single_variation_wrap .single_add_to_cart_button {
    background-color: var(--dark); /* Colore di sfondo blu */
    color: var(--light); /* Testo bianco */
    padding: 15px 30px; /* Aggiungi un po' di padding per un bottone più grande */
    border: none; /* Rimuovi il bordo predefinito */
    border-radius: 0px; /* Angoli arrotondati */
    margin-top: 10px;
}

/* Stato disabilitato del pulsante "Aggiungi al carrello" */
.woocommerce-page .single_variation_wrap .single_add_to_cart_button.disabled,
.woocommerce-page .single_variation_wrap .single_add_to_cart_button.disabled:hover {
    background-color: #ccc; /* Colore grigio per lo stato disabilitato */
    cursor: not-allowed; /* Cambia il cursore per indicare che è disabilitato */
}


/* Stile per il select (varianti come "Misura") */
.woocommerce-page .variations .value select {
    height: 40px; /* Imposta un'altezza simile al box quantità */
    text-align: center; /* Centra il testo */
    background: var(--primary); /* Imposta il colore di sfondo (modifica a tuo piacere) */
    color: var(--dark);
    border: 2px solid var(--dark); /* Aggiungi bordo con un colore scuro */
    border-radius: 0px; /* Rende gli angoli meno arrotondati */
    padding: 0 10px; /* Aggiungi padding orizzontale */
    appearance: none; /* Rimuove l'aspetto di default del select (per una grafica più uniforme) */
    -webkit-appearance: none; /* Rimuove l'aspetto di default su Safari */
    -moz-appearance: none; /* Rimuove l'aspetto di default su Firefox */
}

/* Stile per le opzioni all'interno del select */
.woocommerce-page .variations .value select option {
    padding: 10px; /* Padding per le opzioni */
    background:var(--primary); /* Sfondo bianco per le opzioni */
    color: var(--dark); /* Colore del testo */
}

/* Stile per il pulsante di reset (Svuota) */
.reset_variations {
display: none !important;
}