/* Gignoux – Packs Composite Products : slider latéral + image mise en avant
   À charger uniquement sur les produits de type "composite". */

/* IMPORTANT : ni transform, ni contain, ni container-type sur les parents du formulaire.
   Ils deviennent le référentiel des éléments en position: fixed, et la fenêtre de choix de
   taille (configurateur.js) s'ouvrirait coupée ou hors écran sur mobile. */
.gx-slider { position: relative; }

/* Barre d'étapes (reste visible au défilement) */
.gx-steps {
  position: sticky; top: 56px; z-index: 5; /* sous le menu fixe Divi (≈54 px) */
  display: flex; gap: 8px; margin: 0 0 20px; padding: 10px 0;
  background: #fff; overflow-x: auto; scrollbar-width: none;
}
.gx-steps::-webkit-scrollbar { display: none; }
.gx-step {
  flex: 1 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1.5px solid #d8d8d4; border-radius: 999px;
  background: #fff; color: #555; font: inherit; font-size: 14px;
  white-space: nowrap; cursor: pointer; transition: .2s;
}
.gx-step b {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: #eee; color: #111; font-size: 12px;
}
.gx-step.is-active { border-color: #111; background: #111; color: #fff; }
.gx-step.is-active b { background: #fff; color: #111; }
.gx-step.is-done b { background: #111; color: #fff; }
.gx-step.is-done b::before { content: "✓"; }
.gx-step.is-done b span { display: none; }

/* Piste du slider */
/* Coupe uniquement les étapes voisines (horizontal) ; le vertical reste libre
   pour les menus déroulants absolus sur grand écran. */
.gx-viewport { overflow: hidden; overflow-x: clip; overflow-y: visible; transition: height .35s ease; }
/* Glissement par « left » (pas de transform, voir ci-dessus) */
/* pointer-events: la piste a la hauteur de l'étape la plus haute et déborde sous le viewport
   (overflow-y visible) : sans cela elle recouvrirait les boutons Précédent / Suivant et
   intercepterait les clics. Seules les étapes elles-mêmes reçoivent les clics. */
.gx-track { display: flex; align-items: flex-start; position: relative; left: 0; pointer-events: none; transition: left .45s cubic-bezier(.2, .7, .2, 1); }
.gx-track > .composite_component {
  flex: 0 0 100%; min-width: 0; box-sizing: border-box;
  padding: 4px 2px; margin: 0 !important; pointer-events: auto;
}
.gx-slider .component_title_wrapper { margin-bottom: 12px; }

/* Image du produit choisi, mise en avant */
.gx-slider .composited_product_details_wrapper { display: grid; gap: 20px; }
.gx-slider .composited_product_images { float: none !important; width: 100% !important; margin: 0 !important; }
.gx-slider .composited_product_image img {
  width: 100% !important; height: auto !important;
  display: block; border-radius: 16px; /* pas de cadre : l'arrondi s'applique à la photo */
}
.gx-slider .details.component_data { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }

/* Large : image à gauche, options à droite (classe gx-wide posée par le JS si le formulaire ≥ 620 px) */
.gx-slider.gx-wide .composited_product_details_wrapper { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }

/* Navigation Précédent / Suivant */
.gx-nav { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 12px; margin: 20px 0 8px; }
.gx-btn {
  flex: 1; max-width: 220px; padding: 12px 10px; white-space: nowrap;
  border: 1.5px solid #111; border-radius: 999px; background: #fff; color: #111;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: .2s;
}
.gx-btn.is-primary { background: #111; color: #fff; }
/* Étape 1 / dernière étape : le bouton inutile disparaît mais garde sa place */
.gx-btn[disabled] { visibility: hidden; }

/* ===== Bas du formulaire : prix, message, quantité, bouton d'ajout au panier =====
   Les règles Divi sur le bouton sont très prioritaires : préfixe html body #page-container. */
.gx-slider > .composite_data .composite_wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; margin-top: 8px; }
.gx-slider .composite_price { flex: 1 0 100%; margin: 0; }
.gx-slider .composite_price .price { margin: 0; color: #111 !important; font-size: 24px !important; font-weight: 700 !important; line-height: 1.2; }
.gx-slider .composite_price .woocommerce-price-suffix { font-size: 14px; font-weight: 500; color: #555; }
.gx-slider .composite_availability { flex: 1 0 100%; margin: 0; }
.gx-slider .composite_button { flex: 1 0 100%; display: flex; gap: 12px; align-items: stretch; margin: 0; }

/* Message de validation : lisible (le texte était blanc sur fond transparent) */
.gx-slider .composite_message { flex: 1 0 100%; margin: 0; }
.gx-slider .composite_message .woocommerce-info { margin: 0 !important; padding: 12px 16px !important; border-radius: 12px; background: #f4f4f1 !important; font-size: 14px; line-height: 1.5; }
.gx-slider .composite_message .woocommerce-info,
.gx-slider .composite_message .woocommerce-info * { color: #111 !important; }
.gx-slider .composite_message .woocommerce-info::before { display: none; }
.gx-slider .composite_message .woocommerce-info ul { margin: 0; padding: 0; list-style: none; }

/* Quantité : le cadre est sur le conteneur (le champ lui-même résiste au CSS du thème) */
html body #page-container .gx-slider .composite_button .quantity { flex: 0 0 84px; width: 84px; float: none !important; margin: 0 !important; box-sizing: border-box; border: 1.5px solid #d8d8d4; border-radius: 999px; overflow: hidden; background: #fff; }
html body #page-container .gx-slider .composite_button .quantity input.qty { display: block; width: 100% !important; height: 100% !important; min-height: 50px; margin: 0; padding: 0 8px !important; border: 0 !important; background: transparent !important; color: #111 !important; text-align: center; font-family: inherit; font-size: 16px; font-weight: 600; }

/* Bouton Ajouter au panier : même style que Suivant ; grisé tant que le pack est incomplet */
html body #page-container .gx-slider .composite_button button.composite_add_to_cart_button.single_add_to_cart_button { flex: 1 1 auto; width: auto; min-height: 50px; margin: 0 !important; padding: 14px 20px !important; border: 1.5px solid #111 !important; border-radius: 999px !important; background: #111 !important; color: #fff !important; font-family: inherit !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.2 !important; text-align: center !important; white-space: nowrap; transition: .2s; }
html body #page-container .gx-slider .composite_button button.composite_add_to_cart_button.single_add_to_cart_button::after { display: none !important; content: none !important; }
html body #page-container .gx-slider .composite_button button.composite_add_to_cart_button.single_add_to_cart_button:hover { padding: 14px 20px !important; background: #333 !important; border-color: #333 !important; color: #fff !important; }
html body #page-container .gx-slider .composite_button button.composite_add_to_cart_button.single_add_to_cart_button.disabled { opacity: .35 !important; cursor: not-allowed; }

/* Prix des options et liens « Effacer » : couleurs sobres au lieu du bleu Divi */
html body #page-container .gx-slider .composite_component .price,
html body #page-container .gx-slider .composite_component .price * { color: #111 !important; font-weight: 600; }
html body #page-container .gx-slider a.reset_variations,
html body #page-container .gx-slider a.clear_component_options { color: #555 !important; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .gx-track, .gx-viewport { transition: none; }
}