/*
Theme Name: Kadence Siloe
Template: kadence
Version: 1.1
*/

/* =========================================================
   VARIABLES & TYPO
   ========================================================= */
:root{
  --terracotta:#B55E39;
  --ocre:#A86C3F;
  --sable:#E0C5A1;
  --feu:#8C3B2C;
  --noir:#1A1A1A;
  --brun:#4A3E36;
  --brun-70: rgba(74,62,54,.7);
  --blanc:#FFFFFF;
  --bg:#F7F4EF;
  --accent:var(--terracotta);
  --font-title:"Cormorant Garamond", serif;
  --font-body:"Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;

  /* Cartes produits */
  --card-bg:#fffaf7;
  --card-bd:var(--sable);
  --card-shadow:0 10px 24px rgba(0,0,0,.06);
  --card-shadow-hover:0 16px 36px rgba(0,0,0,.12);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:17px;
  background:var(--bg);
  color:var(--brun);
  margin:0; padding:0;
  line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Titres */
h1,h2,h3,h4{font-family:var(--font-title); color:var(--accent); margin:1rem 0 .5rem}
h1{font-size:clamp(2.2rem,3.2vw,3rem)}
h2{font-size:clamp(1.8rem,2.6vw,2.2rem)}
h3{font-size:clamp(1.4rem,2vw,1.6rem)}
.section-title{background:var(--accent); color:var(--blanc); padding:.5rem 1rem; display:inline-block; border-radius:6px}

/* Liens & Boutons */
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
button,
input[type="submit"],
.button,
.wp-element-button,
.wp-block-button__link{
  background:var(--accent);
  color:var(--blanc);
  border:2px solid var(--accent);
  padding:.9em 2em; font-weight:600; font-size:1rem;
  border-radius:8px; cursor:pointer; transition:.25s ease;
  box-shadow:none; text-align:center; display:inline-block;
}
button:hover,
input[type="submit"]:hover,
.button:hover,
.wp-element-button:hover,
.wp-block-button__link:hover{
  background:var(--blanc);
  color:var(--accent);
  box-shadow:0 2px 10px rgba(0,0,0,.08)
}

/* Sections génériques */
section{margin:3rem 0; padding:1.5rem; border:1px solid var(--sable); border-left:6px solid var(--accent); background:#fff9f5}
section p{color:var(--brun)}

/* Images par défaut */
img{max-width:100%; height:auto; border:3px solid var(--sable); border-radius:6px; display:block; margin:auto}
.hero img{border:5px solid var(--ocre)}

/* Header / Footer */
header.site-header{background:var(--sable); padding:2rem 1rem; text-align:center; border-bottom:4px solid var(--terracotta)}
footer.site-footer{background:var(--terracotta); color:var(--blanc); text-align:center; padding:2rem; border-top:4px solid var(--feu)}
footer a{color:#F5D7C2}
footer a:hover{color:var(--blanc); text-decoration:underline}

/* Formulaires */
input[type="text"],input[type="email"],input[type="search"],textarea,select{
  width:100%; padding:.7rem; margin:.5rem 0; border:1px solid #ccc; border-radius:6px
}

/* =========================================================
   HERO – page d’accueil
   ========================================================= */
.hero-figure{position:relative; line-height:0; overflow:hidden}
.hero-figure img{display:block; width:90%; height:auto; margin-inline:auto}
.hero-overlay::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%); pointer-events:none}
.hero-caption{
  position:absolute; left:30%; bottom:1.2rem; transform:translateX(-20%);
  padding:0 .75rem; font-family:var(--font-title); font-style:italic; font-weight:400;
  font-size:clamp(18px,1.6vw,23px); line-height:1.5; color:#fff; text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.45)
}

/* Mobile hero */
@media (max-width: 680px){
  .hero-figure img{width:100%}
  .hero-caption{left:0; transform:none; font-size:clamp(12px,3.6vw,20px)}
}

/* =========================================================
   WOOCOMMERCE – LISTES & CARTES PRODUITS
   ========================================================= */

/* Cartes produits (boucle Woo + WC Blocks) */
.woocommerce ul.products li.product,
.wc-block-grid__products .wc-block-grid__product{
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:14px;
  padding:16px 16px 18px;
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow:hidden;
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__products .wc-block-grid__product:hover{
  transform:translateY(-3px);
  border-color:#e6c7a3;
  box-shadow:var(--card-shadow-hover)
}
/* image: ratio carré doux + sans bordure externe (on garde le cadre global de votre thème) */
.woocommerce ul.products li.product a img,
.wc-block-grid__products .wc-block-grid__product-image img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border:0; border-radius:10px
}
/* titre produit */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product .wc-block-grid__product-title{
  font-family:var(--font-title); color:var(--feu);
  font-weight:600; font-size:clamp(17px,1.9vw,18.5px); line-height:1.35;
  margin:.7rem 0 .25rem; min-height:unset
}
/* prix + promo */
.woocommerce ul.products li.product .price,
.wc-block-grid__product .wc-block-grid__product-price{
  color:var(--brun);
  font-weight:700; font-size:1rem; margin:.25rem 0 .5rem
}
.woocommerce ul.products li.product .price del{opacity:.6; margin-right:.35rem}
.woocommerce ul.products li.product .price ins{color:var(--feu); text-decoration:none}

/* bouton CTA */
.woocommerce ul.products li.product a.button,
.wc-block-grid__product .wp-block-button__link{
  width:100%; margin-top:.4rem; border-radius:10px
}

/* ruban "Promo !" Kadence/WC */
.woocommerce span.onsale{
  background:var(--accent); color:#fff; border-radius:10px;
  padding:.35rem .6rem; min-height:auto; min-width:auto; line-height:1; font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,.12)
}

/* Grilles – densité/espacement plus aéré */
.woocommerce ul.products{gap:18px}
.wc-block-grid__products{gap:18px}

/* Petits écrans : images un peu plus basses */
@media (max-width:640px){
  .woocommerce ul.products li.product,
  .wc-block-grid__products .wc-block-grid__product{padding:12px 12px 14px}
  .woocommerce ul.products li.product a img,
  .wc-block-grid__products .wc-block-grid__product-image img{height:auto; aspect-ratio:1/1}
}

/* =========================================================
   CATEGORIES – masquage de l’image & style “pastille”
   ========================================================= */

/* 1) Masquer l’image indicative des catégories (demande client) */
.woocommerce ul.products li.product-category a img{display:none !important}

/* 2) Pastilles catégories en bas de page boutique/accueil */
.woocommerce ul.products li.product-category{
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:0; text-align:center; transition:.2s ease
}
.woocommerce ul.products li.product-category a{
  display:block; padding:10px 16px; border-radius:12px;
  font-weight:700; color:var(--accent)
}
.woocommerce ul.products li.product-category:hover{
  border-color:#e9d9c3; box-shadow:0 8px 18px rgba(0,0,0,.06)
}
.woocommerce ul.products li.product-category .count{
  display:inline-block; margin-left:.35rem;
  background:var(--accent); color:#fff; font-size:.85em;
  padding:.15rem .45rem; border-radius:999px
}

/* =========================================================
   PAGE D’ACCUEIL – PRODUITS MIS EN AVANT
   ========================================================= */

/* Section wrapper (ajoutez la classe .home-featured-products au bloc/ligne) */
.home .home-featured-products{
  max-width:1200px; margin:32px auto 18px; padding-inline:14px
}
.home .home-featured-products .section-title{
  margin-bottom:.75rem
}

/* Grille responsive homogène : 2 → 3 → 4 colonnes */
.home .home-featured-products .products,
.home .home-featured-products .wc-block-grid__products{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px
}
@media (max-width:1100px){
  .home .home-featured-products .products,
  .home .home-featured-products .wc-block-grid__products{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .home .home-featured-products .products,
  .home .home-featured-products .wc-block-grid__products{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .home .home-featured-products .products,
  .home .home-featured-products .wc-block-grid__products{grid-template-columns:1fr}
}

/* Accentuer les produits “featured” visuellement */
.woocommerce ul.products li.product.featured,
.wc-block-grid__products .wc-block-grid__product.is-featured{
  border-width:2px; border-color:#e9c9ab; box-shadow:var(--card-shadow)
}
.woocommerce ul.products li.product.featured .woocommerce-loop-product__title,
.wc-block-grid__products .wc-block-grid__product.is-featured .wc-block-grid__product-title{
  color:var(--feu)
}

/* Cartouche “coup de cœur” (optionnel : ajouter .is-favorite sur le produit via classe CSS additionnelle dans l’éditeur) */
.woocommerce ul.products li.product.is-favorite::after{
  content:"Coup de cœur"; position:absolute; top:12px; left:12px;
  background:linear-gradient(135deg, var(--accent), #c97453);
  color:#fff; font-weight:700; font-size:.78rem; padding:.28rem .5rem; border-radius:6px;
  box-shadow:0 6px 16px rgba(0,0,0,.14)
}

/* Nettoyage des marges Kadence autour des blocs produits en page d’accueil */
.home .entry-content .wp-block-woocommerce-all-products,
.home .entry-content .wp-block-woocommerce-product-best-sellers,
.home .entry-content .wp-block-woocommerce-product-new,
.home .entry-content .wp-block-woocommerce-product-on-sale{
  margin-top:10px; margin-bottom:10px
}

/* =========================================================
   BLOCS WOOCOMMERCE – “Featured Product” (bloc unique)
   ========================================================= */

.wp-block-woocommerce-featured-product{
  border:1px solid var(--card-bd); border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:var(--card-shadow)
}
.wp-block-woocommerce-featured-product .wc-block-featured-product__wrapper{
  padding:22px
}
.wp-block-woocommerce-featured-product .wc-block-featured-product__price{
  color:var(--brun); font-weight:700
}
.wp-block-woocommerce-featured-product .wc-block-featured-product__button .wp-element-button{
  border-radius:10px
}

/* =========================================================
   DIVERS
   ========================================================= */

/* Améliorer lisibilité des paragraphes “conseils/intro” sur fond clair */
.lead, .intro{
  font-size:1.075rem; color:var(--brun-70)
}

/* Réduire l’épaisseur du cadre par défaut autour de toutes les images dans le contenu (laisser celles des cartes produits intactes) */
.entry-content > figure img{border-width:2px}

/* =========================================================
   UTILITAIRES
   ========================================================= */
.u-hidden{display:none !important}
.u-center{text-align:center}
.u-mt-0{margin-top:0}
.u-mb-0{margin-bottom:0}