/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/
Description: Thème enfant pour Kadence
Author: Hekat
Author URI: https://hekat-solutionweb.webflow.io/
Template: kadence
Version: 1.0.0
*/

/* Importe les styles du thème parent */
@import url("../kadence/style.css");


/* Styles pour les boutons de filtres */
#product-filters {
    display: flex;
    justify-content: space-evenly;
    gap: 10px; /* Espacement régulier entre les boutons */
    flex-wrap: wrap; /* Permet aux boutons de se répartir sur plusieurs lignes si nécessaire */
    margin-bottom: 30px; /* Espace sous les boutons */
}

#product-filters .filter-button {
    font-family: 'Fauna One', serif; 
    font-weight: 500;
    background-color: #FFFFFF;
    color: #2C6E49;
    padding: 10px 20px;
    border: 1px solid #2C6E49;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#product-filters .filter-button:hover,
#product-filters .filter-button:active {
    transform: scale(1.05);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15); /* Ombre douce en bas et à droite */
}

/* Styles pour la zone de résultats produits */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* Style de la card produit */
.product-card {
    background-color: #CAE3D5;
    border: 1px solid #99C9AE;
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.product-card img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
    margin-top: 20px;
}

.product-card h3 {
    font-family: 'Playfair Display', serif;
    color: #2C6E49;
    text-align: center;
    margin: 10px 0;
}

.product-card .description-short {
    font-family: 'Fauna One', serif;
    color: #3A9262;
    text-align: center;
}

.product-card .price {
    font-family: 'Fauna One', serif;
    color: #2C6E49;
    text-align: center;
    margin: 10px 0;
}

.product-card .add_to_cart_button {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    background-color: #CAE3D5;
    color: #2E563F;
    padding: 10px 20px;
    border: 1px solid #2E563F;
    border-radius: 1px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card .add_to_cart_button:hover {
    transform: scale(1.05); /* Zoom au survol */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 3 colonnes pour tablette */
@media screen and (max-width: 1024px) {
  .product-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 1 colonne sur téléphone */
@media screen and (max-width: 600px) {
  .product-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}


/* Changer l'arrière-plan du champ de quantité */
.woocommerce-cart .quantity input {
  background-color: #FFFFFF;
  border-radius: 5px;
  padding: 8px;
  font-size: 1em;
  border: 1px solid #4C956C;
}

/* Bouton Mettre à jour le panier */
.woocommerce-cart .button[name="update_cart"] {
  background-color: #FFFFFF !important;
  color: #2C6E49 !important;
  border: 1px solid #2C6E49 !important;
  padding: 10px 20px;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  border-radius: 5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

/* Bouton Mettre à jour le panier au survol (hover) */
.woocommerce-cart .button[name="update_cart"]:hover {
 background-color: #FFFFFF !important;
  color: #2C6E49 !important;
  border: 1px solid #2C6E49 !important;
}

/* Bouton Mettre à jour le panier en état actif (focus) */
.woocommerce-cart .button[name="update_cart"]:focus {
 background-color: #FFFFFF !important;
  color: #2C6E49 !important;
  border: 1px solid #2C6E49 !important;
}

/* Cibler le bouton Valider la commande (Procéder au paiement) */
.woocommerce-cart .checkout-button {
  font-family: 'Playfair Display', serif !important;
  font-weight: 500 !important;
}