/**
 * Styles exclusifs à la fiche produit (woocommerce/single-product.php).
 * Chargé conditionnellement aux côtés de shop.css (qui fournit déjà .card,
 * .grid-products, .related-guide-band, réutilisés ici pour "Vous préparez
 * aussi") — cf. inc/enqueue.php.
 */

.product-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
}

/* BUG CORRIGÉ (revue de code) : .gallery-main/.gallery-thumbs stylaient une
   galerie reconstruite à la main, désormais remplacée par le rendu natif
   WooCommerce (woocommerce_show_product_images(), single-product.php) — on
   habille ses vraies classes pour que le zoom/lightbox natifs gardent
   l'apparence du design system. */
.woocommerce-product-gallery{
  margin-bottom: var(--space-3);
}
.woocommerce-product-gallery__wrapper{
  border-radius: var(--radius-card);
  overflow: hidden;
}
.woocommerce-product-gallery__image img{
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
}
/* BUG CORRIGÉ (revue de code + inspection en direct du site) : Astra (thème
   parent) expédie ses propres règles natives pour cette galerie, écrites avec
   un sélecteur ancien et très spécifique (.woocommerce-js div.product
   div.images .flex-control-thumbs li), confirmé par l'inspecteur du
   navigateur comme plus prioritaire que le nôtre. Notre balisage porte déjà
   les classes "product" et "images" nécessaires (via wc_product_class() dans
   single-product.php et le tableau de classes du wrapper de galerie) — Astra
   nous "voit" donc bien, ses règles s'appliquent en plus des nôtres, pas à la
   place. Plutôt que de deviner indéfiniment quelle règle l'emporte où, on
   reprend le même sélecteur qu'Astra ET on force la priorité avec !important
   sur les seules propriétés qui comptent pour la visibilité/taille — un choix
   assumé ici précisément parce qu'on corrige un composant du thème PARENT
   qu'on ne maîtrise pas et dont le CSS peut changer à une mise à jour d'Astra. */
.woocommerce-js div.product div.images .flex-control-thumbs,
.woocommerce-product-gallery .flex-control-thumbs{
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: var(--space-2);
  margin-top: var(--space-2);
  list-style: none;
  padding: 0;
}
.woocommerce-js div.product div.images .flex-control-thumbs li,
.woocommerce-product-gallery .flex-control-thumbs li{
  display: block !important;
  width: auto !important;
  height: auto !important;
  list-style: none !important;
}
.woocommerce-js div.product div.images .flex-control-thumbs li img,
.woocommerce-product-gallery .flex-control-thumbs img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--champagne);
  cursor: pointer;
  display: block !important;
  opacity: 1 !important;
}
.woocommerce-js div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img.flex-active{
  border-color: var(--accent);
  opacity: 1 !important;
}

.product-title{ font-size: 1.9rem; margin: var(--space-2) 0 var(--space-3); }
.price-row{ margin-bottom: var(--space-4); }
.price-now{ font-family: var(--font-display); font-size: 1.7rem; color: var(--accent-deep); }
.product-summary .lede{ color: var(--taupe-soft); margin-bottom: var(--space-6); font-size: .96rem; }

.reassure{ margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--champagne); }
.reassure .reassurance-strip{ justify-content: flex-start; gap: var(--space-4); flex-direction: column; padding: 0; }

/* --- Tabs --- */
.product-tabs{ border-top: 1px solid var(--champagne); padding-top: var(--space-8); margin-top: var(--space-4); }
.tab-nav{
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  font-size: .88rem;
  color: var(--taupe-soft);
  border-bottom: 1px solid var(--champagne);
  margin-bottom: var(--space-6);
}
.tab-trigger{ padding-bottom: var(--space-3); white-space: nowrap; }
/* Amélioration progressive : le style "onglet actif" ne s'applique qu'une fois
   le JS confirmé (classe posée par initProductTabs()) — sans JS, ce sont de
   simples liens d'ancre vers du contenu déjà entièrement visible. */
.tabs-js-ready .tab-trigger.is-active{
  color: var(--taupe);
  font-weight: 500;
  border-bottom: 2px solid var(--accent);
}
.tab-panel{ font-size: .92rem; color: var(--taupe-soft); }
.tab-panel .prose{ max-width: 68ch; }

@media (min-width: 1024px){
  .product-layout{ grid-template-columns: 1fr 1fr; }
}