/* Fiches produits : correctifs d'affichage sur le gabarit WooCommerce d'Enfold (chargée sur les seules fiches). */

/*
 * Enfold imprime les produits similaires dans une section flottante (float: left) : le pied de page Awilai,
 * qui ne la dégageait pas, remontait dessous et restait masqué. Le pied lui-même n'est pas modifié.
 */
#top.single-product #awilai-footer {
  clear: both;
}

/* Barre de titre et fil d'Ariane : même compensation que la Boutique (Enfold réserve 88 px ; l'en-tête Awilai mesure 137,6 px, 133,6 px sous 1024 px). */
@media only screen and (min-width: 768px) {
  .html_header_top.html_header_sticky #top.single-product .title_container { margin-top: 49.6px; }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .html_header_top.html_header_sticky #top.single-product .title_container { margin-top: 45.6px; }
}

/*
 * Focus clavier : Enfold retire le contour des champs (#top input…, textarea, select : outline: none).
 * Contour Awilai de 3 px rétabli sur la quantité et le formulaire d'avis, tracé à l'intérieur du champ (comme le
 * sélecteur de quantité du composant d'achat) : form.cart et .comment-respond, en overflow: hidden chez Enfold,
 * rogneraient un contour extérieur.
 */
#top.single-product form.cart .quantity :is(input.qty, input.minus, input.plus):focus-visible,
#top.single-product #commentform :is(input:not([type="checkbox"]):not([type="submit"]), textarea, select):focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--awilai-text-primary);
  outline-offset: -3px;
  box-shadow: none;
}

/*
 * Image principale : sans le survol d'Enfold (avia_hover_effect, js/avia.js : voile blanc à 70 % et cercle fléché
 * ajoutés en span.image-overlay). visibility, qu'Enfold ne pose nulle part, masque voile et cercle et les rend
 * transparents aux clics ; le lien, sa visionneuse et les miniatures éventuelles (.thumbnails) restent intacts.
 */
#top.single-product .single-product-main-image .woocommerce-product-gallery__wrapper > a .image-overlay {
  visibility: hidden;
}

/*
 * Focus clavier de l'image principale et des miniatures : .single-product-main-image (Enfold, overflow: hidden)
 * rogne un contour extérieur ; le contour Awilai de 3 px est tracé à l'intérieur du lien, sans toucher à la galerie.
 */
#top.single-product .single-product-main-image .woocommerce-product-gallery__wrapper a:focus-visible {
  outline-offset: -3px;
}

/* ---------- PROD-2B : harmonisation graphique ---------- */

/* Prix : sombre et lisible (le vert Enfold est remplacé) ; prix barré plus discret en promotion. Bloc : ses marges s'appliquent. */
#top.single-product .summary .price {
  display: block;
  margin: 12px 0 20px;
  color: var(--awilai-text-primary);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
}

#top.single-product .summary .price del {
  margin-right: 8px;
  color: #5d6570;
  font-size: 17px;
  font-weight: 400;
}

#top.single-product .summary .price ins {
  color: var(--awilai-text-primary);
  text-decoration: none;
}

/* Enfold fixe le montant à 15 px : il hérite désormais du prix (ou du prix barré). */
#top.single-product #main .summary .price :is(.woocommerce-Price-amount, bdi, .woocommerce-Price-currencySymbol) {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

/*
 * Formulaire natif d'un produit simple : « − quantité + » puis « Ajouter au panier » sur une ligne.
 * Les formulaires à options (variations, produits groupés) gardent leur mise en page WooCommerce.
 * overflow visible : plus de flottants à contenir, et le contour de focus du bouton n'est plus rogné.
 */
#top.single-product form.cart:not(.variations_form):not(.grouped_form) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  overflow: visible;
}

/* Sélecteur de quantité : boutons −/+ d'Enfold et champ natif, présentés comme le sélecteur Awilai (46 px : 44 px utiles dans la bordure). */
#top.single-product form.cart .quantity {
  display: inline-flex;
  float: none;
  align-items: stretch;
  min-width: 0;
  height: 46px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--awilai-border-strong);
  border-radius: var(--awilai-control-radius);
  background: var(--awilai-background-primary);
}

#top.single-product form.cart .quantity input.minus,
#top.single-product form.cart .quantity input.plus {
  display: block;
  float: none;
  width: 44px;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--awilai-text-primary);
  font-family: var(--awilai-font-body);
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--awilai-ease);
}

#top.single-product form.cart .quantity input.minus:hover,
#top.single-product form.cart .quantity input.plus:hover {
  background: var(--awilai-orange-tint);
}

#top.single-product form.cart .quantity input.qty {
  display: block;
  width: 52px;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--awilai-border);
  border-radius: 0;
  background: var(--awilai-background-primary);
  box-shadow: none;
  color: var(--awilai-text-primary);
  font-family: var(--awilai-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Bouton « Ajouter au panier » : primaire Awilai (orange, rayon 6 px, demi-gras), aligné sur la hauteur du sélecteur. */
#top.single-product form.cart .single_add_to_cart_button {
  display: inline-flex;
  float: none;
  align-items: center;
  justify-content: center;
  height: 46px;
  min-height: 46px;
  margin: 0;
  padding: 0 28px;
  border: 1px solid var(--awilai-orange-primary);
  border-radius: var(--awilai-control-radius);
  background: var(--awilai-orange-primary);
  color: var(--awilai-text-primary);
  font-family: var(--awilai-font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

#top.single-product form.cart .single_add_to_cart_button:hover {
  border-color: var(--awilai-orange-hover);
  background: var(--awilai-orange-hover);
}

#top.single-product form.cart .single_add_to_cart_button:active {
  border-color: var(--awilai-orange-active);
  background: var(--awilai-orange-active);
}

/* Catégories et étiquettes : 14 px, libellés gris foncé, liens sombres. */
#top.single-product .product_meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--awilai-text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

#top.single-product .product_meta > span {
  display: block;
}

#top.single-product #main .product_meta a {
  color: var(--awilai-text-primary);
  font-weight: 600;
}

/* Sidebar Enfold sous l'image : masquée uniquement lorsqu'elle ne contient rien. */
#top.single-product #main .single-product-main-image aside.sidebar:has(> .inner_sidebar:empty) {
  display: none;
}

/* Produits similaires : cartes Boutique et ajout rapide commun (awilai-shop.css, awilai-quick-add.css). */
#top.single-product #main .related > h2 {
  margin: 0 0 20px;
  color: var(--awilai-text-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}

#top.single-product #main .related ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 24px;
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 1023px) {
  #top.single-product #main .related ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
}

/* ---------- PROD-2D : avis clients ---------- */

/* Titre « Avis » : typographie Awilai (Enfold : 10 px, capitales espacées). */
#top.single-product #reviews h2 {
  margin: 0 0 8px;
  color: var(--awilai-text-primary);
  font-family: var(--awilai-font-body);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

/* Bouton « Donner votre avis » (awilai-product.js) : secondaire Awilai, chevron tourné quand le formulaire est ouvert. */
#top.single-product .awilai-review-toggle {
  margin: 12px 0 4px;
}

#top.single-product .awilai-review-toggle svg {
  flex: none;
  transition: transform var(--awilai-ease);
}

#top.single-product .awilai-review-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

#top.single-product #review_form_wrapper {
  margin-top: 16px;
}

#top.single-product #review_form_wrapper[hidden] {
  display: none;
}

/* Libellés au-dessus des champs (Enfold les place en absolu, à droite) ; libellé de l'avis rétabli. */
#top.single-product #commentform p,
#top.single-product #commentform .comment-form-rating {
  margin: 0 0 18px;
  padding: 0;
}

#top.single-product #commentform label,
#top.single-product #commentform .comment-form-rating label,
#top.single-product #commentform .comment-form-comment label {
  position: static;
  display: block;
  margin: 0 0 6px;
  padding: 0;
  color: var(--awilai-text-primary);
  font-family: var(--awilai-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

#top.single-product #commentform .required {
  color: var(--awilai-orange-text);
}

/* Champs : pleine largeur disponible (nom et e-mail limités à une largeur de saisie raisonnable), texte sombre. */
#top.single-product #commentform :is(input[type="text"], input[type="email"], textarea) {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--awilai-border-strong);
  border-radius: var(--awilai-control-radius);
  background: var(--awilai-background-primary);
  color: var(--awilai-text-primary);
  font-family: var(--awilai-font-body);
  font-size: 16px;
  line-height: 1.4;
}

#top.single-product #commentform :is(.comment-form-author, .comment-form-email) input {
  max-width: 32rem;
  height: 46px;
}

#top.single-product #reviews #commentform textarea {
  height: auto;
  min-height: 140px;
  resize: vertical;
}

/* Case à cocher et libellé côte à côte, le texte revient à la ligne sans être coupé. */
#top.single-product #commentform .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#top.single-product #commentform .comment-form-cookies-consent input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--awilai-orange-text);
}

#top.single-product #commentform .comment-form-cookies-consent label {
  margin: 0;
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* Étoiles de notation (liens créés par WooCommerce) : cinq cibles de 32 px, étoile pleine orange jusqu'à la note. */
#top.single-product #commentform p.stars {
  margin: 0;
}

#top.single-product #commentform p.stars span {
  display: flex;
  float: none;
  gap: 4px;
  width: auto;
  height: auto;
  background: none;
}

#top.single-product #commentform p.stars span a {
  position: static;
  display: flex;
  float: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  overflow: hidden;
  border-radius: var(--awilai-control-radius);
  background: none;
  color: var(--awilai-text-secondary);
  font-size: 0;
  text-decoration: none;
}

#top.single-product #commentform p.stars span a::before {
  content: "\2606";
  font-size: 26px;
  line-height: 1;
}

#top.single-product #commentform p.stars span:hover a,
#top.single-product #commentform p.stars.selected span a {
  color: var(--awilai-orange-hover);
}

/* Étoile pleine : contour orange foncé, pour un contraste d'au moins 3:1 sur le fond du panneau. */
#top.single-product #commentform p.stars span:hover a::before,
#top.single-product #commentform p.stars.selected span a::before {
  content: "\2605";
  -webkit-text-stroke: 1px var(--awilai-orange-text);
}

#top.single-product #commentform p.stars span a:hover ~ a,
#top.single-product #commentform p.stars.selected span:not(:hover) a.active ~ a {
  color: var(--awilai-text-secondary);
}

#top.single-product #commentform p.stars span a:hover ~ a::before,
#top.single-product #commentform p.stars.selected span:not(:hover) a.active ~ a::before {
  content: "\2606";
  -webkit-text-stroke: 0;
}

#top.single-product #commentform p.stars span a:focus-visible {
  outline: 3px solid var(--awilai-text-primary);
  outline-offset: -3px;
}

/* Envoi : bouton primaire Awilai (classes posées en PHP) ; Enfold impose ses propres marges et couleurs à #submit. */
#top.single-product #commentform #submit {
  min-height: 46px;
  padding: 0 28px;
  border: 1px solid var(--awilai-orange-primary);
  border-radius: var(--awilai-control-radius);
  background: var(--awilai-orange-primary);
  color: var(--awilai-text-primary);
  font-size: 16px;
}

#top.single-product #commentform #submit:hover {
  border-color: var(--awilai-orange-hover);
  background: var(--awilai-orange-hover);
}

#top.single-product #commentform #submit:active {
  border-color: var(--awilai-orange-active);
  background: var(--awilai-orange-active);
}

@media only screen and (max-width: 767px) {
  #top.single-product form.cart:not(.variations_form):not(.grouped_form) .single_add_to_cart_button {
    flex: 1 1 auto;
    padding: 0 16px;
  }

  #top.single-product #main .related ul.products {
    gap: 20px 12px;
  }
}

/*
 * Visionneuse : Enfold place le bouton de fermeture à 13 px hors de l'image (right: -13px). Quand l'image occupe
 * toute la largeur (sous 900 px, palier de Magnific), il sortait de l'écran : il est ramené sur le bord de l'image,
 * en 44 × 44 px.
 */
@media only screen and (max-width: 900px) {
  #top.single-product div.avia-popup .mfp-close {
    right: 0;
    width: var(--awilai-control-height-touch);
    height: var(--awilai-control-height-touch);
    line-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #top.single-product form.cart .quantity :is(input.minus, input.plus),
  #top.single-product #main .related ul.products :is(.inner_product, .thumbnail_container img),
  #top.single-product .awilai-review-toggle svg {
    transition: none;
  }
}