/* tfw-boutique.css — Boutique d'affiliation « The French Way »
 * PHASE 2 : calé sur l'identité réelle de sabthefrenchway.com
 *   (extraction Playwright, 2026-06-17).
 *   Fond crème #FBF8F4 · encre #212529 / #141414 · titres serif (Cormorant Garamond,
 *   déjà chargée par le thème) · UI Montserrat majuscule · boutons carrés (rayon 0).
 * Déposé dans wp-content/mu-plugins/ à côté de tfw-boutique.php (enqueue auto).
 *
 * NB cartes : le thème Buzzblog rend SON bouton dans la figure (.buzzblog-add-to-cart-wrap,
 * en absolu + opacity 0, révélé au survol). On le MASQUE et on rend notre propre CTA
 * (.tfw-cta) dans le flux, sous le titre, via le mu-plugin → aucun positionnement fragile. */

:root {
  --tfw-bg:         #fbf8f4;  /* fond crème signature du site */
  --tfw-ink:        #212529;  /* texte / titres */
  --tfw-ink-strong: #141414;  /* boutons, traits */
  --tfw-btn-bg:     #141414;
  --tfw-btn-text:   #ffffff;
  --tfw-gap:        32px;
  --tfw-serif:      "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --tfw-sans:       "Montserrat", Arial, sans-serif;
}

/* === Grille : 3 colonnes desktop / 2 mobile ===
   Robuste aux DEUX rendus : shortcode [products columns="3"] (page /lifestyle/)
   ET archives /categorie-produit/ (que le thème sort en columns-2).
   !important : bat la spécificité des classes .columns-2 / .columns-3 du thème. */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--tfw-gap);
  margin: 0 0 2em;
  padding: 0;
  list-style: none;
}
ul.products::before,
ul.products::after { content: none !important; display: none !important; } /* neutralise le clearfix du thème */
@media (max-width: 768px) {
  ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 16px; }
}

ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  text-align: center;
  list-style: none;
  display: flex;            /* carte en colonne → CTA aligné en bas par rangée */
  flex-direction: column;
}
/* la zone titre+CTA remplit la hauteur restante ; le CTA est poussé en bas (margin-top:auto) */
ul.products li.product .buzzblog-product-content { flex: 1 1 auto; display: flex !important; flex-direction: column; }
ul.products li.product .buzzblog-product-content > a { flex: 1 1 auto; display: flex !important; flex-direction: column; }

/* Masque le bouton « survol » natif du thème (on rend le nôtre, .tfw-cta, dans le flux) */
ul.products li.product .buzzblog-add-to-cart-wrap { display: none !important; }

/* === Image carrée + léger zoom au survol (clip du zoom sur le lien-image seulement) === */
ul.products li.product figure.thumbnail,
ul.products li.product figure { margin: 0 0 14px; }
ul.products li.product figure > a {  /* uniquement le lien-image (PAS le lien du titre, qui doit rester flex) */
  display: block;
  overflow: hidden;
}
ul.products li.product img {
  width: 100% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform .5s ease;
}
ul.products li.product:hover img { transform: scale(1.04); }

/* === Titre (serif éditorial, façon site de Sabrina) === */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title,
ul.products li.product h3 {
  font-family: var(--tfw-serif);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--tfw-ink);
  letter-spacing: .01em;
  margin: 0 0 12px;
  padding: 0 6px;
  text-transform: none;
}
ul.products li.product .buzzblog-product-content > a { text-decoration: none; color: inherit; }

/* description optionnelle — affichée seulement si une description courte existe (future-proof) */
.tfw-card-desc {
  font-family: var(--tfw-sans);
  font-size: .8rem; line-height: 1.5; color: var(--tfw-ink);
  opacity: .75; margin: 6px 0 0; padding: 0 6px;
}

/* === Aucun prix affiché (sécurité visuelle, en plus du filtre PHP) === */
ul.products li.product .price { display: none !important; }

/* === CTA « Voir le produit » : plein sombre, carré, Montserrat majuscule, dans le flux ===
   Rendu en <span> par le mu-plugin (le contenu de la carte est déjà un lien vers l'URL affiliée).
   Survol de la carte = inversion vers contour fin (les deux styles maison du site). */
.tfw-cta {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: auto auto 0;   /* top:auto → aligné en bas de carte ; left/right:auto → centré */
  font-family: var(--tfw-sans);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tfw-btn-text);
  background: var(--tfw-btn-bg);
  border: 1px solid var(--tfw-btn-bg);
  border-radius: 0;
  padding: 14px 26px;
  transition: background .25s ease, color .25s ease;
}
ul.products li.product:hover .tfw-cta {
  background: transparent;
  color: var(--tfw-ink-strong);
}