/* Tahitifaifai Atelier — habillage WooCommerce (charte sur classes Woo) */

/* Grille boutique = grille de la maquette */
/* WooCommerce (woocommerce-layout.css / smallscreen) applique aux cartes un float
   et une largeur en % (22,05 % en 4 colonnes), plus un clearfix ::before/::after
   sur la liste. Incompatibles avec une grille CSS : la carte est réduite à 22 %
   de sa cellule et ::before occupe la première cellule. Sélecteurs volontairement
   plus spécifiques que ceux de WooCommerce, chargé après ce fichier en mobile. */
body.woocommerce ul.products::before,body.woocommerce ul.products::after,
body.woocommerce-page ul.products::before,body.woocommerce-page ul.products::after,
div.woocommerce ul.products::before,div.woocommerce ul.products::after,
ul.products::before,ul.products::after{content:none;display:none}

body.woocommerce ul.products[class] li.product,
body.woocommerce-page ul.products[class] li.product,
div.woocommerce ul.products[class] li.product,
ul.products li.product{float:none;width:auto;margin:0;clear:none}

ul.products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  list-style:none;margin:0;padding:0;
}
@media(max-width:1024px){ul.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){ul.products{grid-template-columns:1fr}}

ul.products li.product{
  position:relative;
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .26s ease,box-shadow .26s ease;
  text-align:left;
}
ul.products li.product:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}

ul.products li.product a.product-visual,
ul.products li.product > a:first-child{display:block;position:relative}
ul.products li.product img{width:100%;height:auto;display:block;margin:0}

ul.products li.product .product-info,
ul.products li.product .product-info{padding:18px 18px 20px}
.product-cat{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:6px}
.product-name{font-family:var(--font-display);font-size:1.06rem;line-height:1.25;margin:0 0 8px}
.product-name a{color:var(--ink);text-decoration:none}
.product-name a:hover{color:var(--coral)}

/* Prix */
.product-price .woocommerce-Price-amount,
ul.products li.product .price .woocommerce-Price-amount{color:var(--coral);font-weight:700}
.product-price del .woocommerce-Price-amount,
ul.products li.product .price del .woocommerce-Price-amount{color:rgba(34,51,58,.4);font-weight:500}

/* Badges de la charte */
ul.products li.product .badge{
  position:absolute;top:12px;left:12px;z-index:2;
  background:var(--coral);color:#fff;border-radius:999px;
  padding:5px 11px;font-size:.66rem;font-weight:700;letter-spacing:.06em;
}
ul.products li.product .badge.sage{background:var(--sage)}
ul.products li.product .badge.gold{background:var(--gold);color:var(--ink)}

/* Le bouton Woo prend le style .add-cart */
ul.products li.product .button{
  margin:12px 18px 18px;text-align:center;
  background:var(--teal);color:var(--cream);border:none;border-radius:999px;
  padding:11px 0;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s ease;cursor:pointer;
}
ul.products li.product .button:hover{background:var(--coral)}

/* Conteneur boutique dans la charte */
.tf-shop{padding-top:40px}
.woocommerce-products-header__title,
.tf-shop .product_title{font-family:var(--font-display);color:var(--teal-deep)}

/* ---------- Page produit ---------- */
/* Remplace les couleurs par défaut de WooCommerce (bouton violet, prix olive). */
body.woocommerce div.product p.price,
body.woocommerce div.product span.price{color:var(--coral);font-weight:700;font-size:1.4rem}

body.woocommerce div.product form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:18px 0}
body.woocommerce div.product form.cart .variations{width:100%;margin:0 0 4px;border:0}
body.woocommerce div.product form.cart .variations th,
body.woocommerce div.product form.cart .variations td{padding:6px 12px 6px 0;vertical-align:middle;border:0;background:none}
body.woocommerce div.product form.cart .variations label{font-weight:600;color:var(--ink)}
body.woocommerce div.product form.cart .variations select{
  min-width:220px;padding:10px 14px;border:1px solid rgba(32,80,90,.25);border-radius:10px;
  background:#fff;color:var(--ink);font:inherit;
}
body.woocommerce div.product form.cart .reset_variations{font-size:.8rem;color:var(--teal-soft);margin-left:8px}
body.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

body.woocommerce .quantity .qty{
  width:72px;height:48px;padding:0 8px;text-align:center;
  border:1px solid rgba(32,80,90,.25);border-radius:999px;background:#fff;color:var(--ink);font:inherit;
}

body.woocommerce div.product form.cart .single_add_to_cart_button.button.alt,
body.woocommerce div.product form.cart button.button.alt{
  height:48px;padding:0 32px;border:0;border-radius:999px;
  background:var(--coral);color:#fff;
  font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:background .2s ease;
}
body.woocommerce div.product form.cart .single_add_to_cart_button.button.alt:hover,
body.woocommerce div.product form.cart button.button.alt:hover{background:var(--teal)}
body.woocommerce div.product form.cart .single_add_to_cart_button.button.alt.disabled,
body.woocommerce div.product form.cart .single_add_to_cart_button.button.alt:disabled{background:var(--coral);opacity:.45;cursor:not-allowed}

body.woocommerce div.product .product_meta{font-size:.82rem;color:rgba(34,51,58,.7);margin-top:18px}
body.woocommerce div.product .product_meta a{color:var(--teal)}

@media(max-width:520px){
  body.woocommerce div.product form.cart .variations select{min-width:0;width:100%}
  body.woocommerce div.product form.cart .single_add_to_cart_button.button.alt{flex:1}
}

/* ---- v1.3.0 : seconde vue du produit au survol de la carte ---- */
/* Image sortie par inc/woocommerce.php (1re image de la galerie). */
ul.products li.product .tf-hover-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity .45s ease;
}
ul.products li.product:hover .tf-hover-img,
ul.products li.product:focus-within .tf-hover-img{opacity:1}
/* Écrans tactiles : pas de survol possible, on masque la seconde vue. */
@media(hover:none){
  ul.products li.product .tf-hover-img{display:none}
}
@media(prefers-reduced-motion:reduce){
  ul.products li.product .tf-hover-img{transition:none}
}

/* ---- v1.3.0 : page produit, vignettes réactives au survol ---- */
body.woocommerce div.product .flex-control-thumbs li{cursor:pointer}
body.woocommerce div.product .flex-control-thumbs img{
  border-radius:8px;transition:opacity .25s ease,outline-color .25s ease;
  outline:2px solid transparent;outline-offset:2px;
}
body.woocommerce div.product .flex-control-thumbs img:hover{outline-color:var(--coral)}
body.woocommerce div.product .flex-control-thumbs img.flex-active{outline-color:var(--teal);opacity:1}

/* ---- v1.3.1 : cartes de collection ([product_categories]) ---- */
ul.products li.product-category{
  position:relative;background:var(--teal-deep);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .28s ease,box-shadow .28s ease;
}
ul.products li.product-category:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
ul.products li.product-category > a{display:block;position:relative;text-decoration:none}
ul.products li.product-category .tf-cat-thumb{
  width:100%;aspect-ratio:3/3.2;height:auto;display:block;
  object-fit:cover;transition:transform .55s ease;
}
ul.products li.product-category:hover .tf-cat-thumb{transform:scale(1.05)}
ul.products li.product-category h2.woocommerce-loop-category__title{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:38px 18px 18px;
  font-family:var(--font-display);font-size:1.3rem;font-weight:600;line-height:1.2;
  color:var(--cream);text-shadow:0 1px 10px rgba(23,60,68,.6);
  background:linear-gradient(to top,
    rgba(23,60,68,.96) 0%,
    rgba(23,60,68,.84) 42%,
    rgba(23,60,68,.30) 78%,
    rgba(23,60,68,0) 100%);
}
/* Le compteur WooCommerce est un <mark> : sans style, le navigateur le
   surligne en jaune. On le remet dans la charte. */
.woocommerce mark,
ul.products li.product-category mark.count{
  background:transparent;color:var(--gold);
  font-size:.8rem;font-weight:600;
}
@media(prefers-reduced-motion:reduce){
  ul.products li.product-category,
  ul.products li.product-category .tf-cat-thumb{transition:none}
  ul.products li.product-category:hover{transform:none}
  ul.products li.product-category:hover .tf-cat-thumb{transform:none}
}

/* ---- v1.3.2 : navigation à deux axes en haut de la boutique ---- */
.tf-shop-filters{
  display:flex;flex-direction:column;gap:12px;
  margin:0 0 28px;padding:0 0 22px;
  border-bottom:1px dashed rgba(32,80,90,.25);
}
.tf-filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tf-filter-label{
  flex:none;min-width:86px;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sage);font-weight:700;
}
.tf-filter{
  display:inline-flex;align-items:center;
  padding:8px 16px;border-radius:999px;
  border:1px solid rgba(32,80,90,.25);
  background:#fff;color:var(--ink);text-decoration:none;
  font-size:.81rem;font-weight:600;letter-spacing:.02em;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.tf-filter:hover{border-color:var(--coral);color:var(--coral)}
.tf-filter.is-active{background:var(--teal);border-color:var(--teal);color:var(--cream)}
.tf-filter.is-active:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:var(--cream)}
@media(max-width:720px){
  .tf-filter-label{min-width:100%;margin-bottom:-2px}
}
@media(max-width:520px){
  .tf-shop-filters{gap:10px;margin-bottom:22px;padding-bottom:18px}
  .tf-filter{padding:7px 13px;font-size:.76rem}
}

/* ---- v1.6.1 : sections « Related products », « You may also like » ----
   WooCommerce leur donne la classe `products`, que la grille des cartes
   (.products{display:grid}) attrapait aussi : le titre et la liste se
   partageaient les colonnes. La section redevient un bloc ; seule la
   liste reste en grille. */
section.related.products,
section.up-sells.products,
.cross-sells{display:block;grid-template-columns:none;margin-top:56px}
section.related.products > h2,
section.up-sells.products > h2,
.cross-sells > h2{font-family:var(--font-display);font-size:1.6rem;margin:0 0 24px}