/* ==========================================================================
   GIGNOUX — Modèle « Produits Fixations »
   Reprend la partie haute de la page Race Pro Configuration
   (relevé sur gignoux.eu/produit/race-pro-config/).

   OÙ COLLER : Divi > Options du thème > CSS personnalisé
               (tout est limité à la classe .gx-fix : aucun autre modèle n'est touché)

   CLASSES À POSER DANS LE BUILDER (onglet Avancé > Attributs > Classe CSS) :
     Section ........................ gx-fix
     Rangée du haut (2 colonnes) .... gx-fix-top        (colonnes 3/5 + 2/5)
     Colonne de gauche .............. gx-fix-left       (uniquement la galerie)
     Galerie de produits Woo ........ gx-fix-gallery
     Colonne de droite .............. gx-fix-right      (de haut en bas :)
       Texte « titre » ............... gx-fix-title      (contenu dynamique : titre du produit)
       Texte « sous-titre » .......... gx-fix-sub        (contenu dynamique : description courte)
       Prix du produit Woo ........... gx-fix-price      (fourchette de prix avant le choix)
       Woo au panier ................. gx-fix-cart       (menus de variations + bouton)
     Rangée caractéristiques ........ gx-fix-bottom     (module Texte : [gx_fiche_technique])
     Rangée description ............. gx-fix-bottom     (module Woo du produit, type « Description »)
   ========================================================================== */


/* ---------- 1. Section et rangée du haut ---------- */

/* Section : 54 px en haut et en bas, comme la page de référence */
.et-db #et-boc .et-l .gx-fix.et_pb_section {
	padding-top: 54px;
	padding-bottom: 54px;
}

/* Rangée : 90 % de large, sans largeur max, colonnes côte à côte, écart de 5,5 % */
.et-db #et-boc .et-l .gx-fix .gx-fix-top.et_pb_row {
	width: 90%;
	max-width: none !important;
	flex-wrap: nowrap;
	column-gap: 5.5%;
}


/* ---------- 2. Colonne de gauche : galerie (collée au défilement) ---------- */

.et-db #et-boc .et-l .gx-fix .gx-fix-left.et_pb_column {
	position: sticky;
	top: 100px;
	align-self: flex-start;
	height: fit-content;
}

/* La photo ne dépasse jamais la hauteur de l'écran */
.et-db #et-boc .et-l .gx-fix .gx-fix-left.et_pb_column img {
	max-height: calc(100vh - 140px);
	width: auto;
	margin-inline: auto;
	object-fit: contain;
}

/* Titre (colonne de droite) : 36 px, semi-gras, noir */
.et-db #et-boc .et-l .gx-fix .gx-fix-title.et_pb_text {
	margin-top: 0 !important;
	padding-top: 0 !important;
	text-align: start;
}
.et-db #et-boc .et-l .gx-fix .gx-fix-title .et_pb_text_inner {
	font-weight: 600;
	font-size: 36px;
	line-height: 1.2em;
	color: #000 !important;
}

/* Sous-titre : 14 px, gris */
.et-db #et-boc .et-l .gx-fix .gx-fix-sub.et_pb_text {
	text-align: start;
}
.et-db #et-boc .et-l .gx-fix .gx-fix-sub .et_pb_text_inner {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.7em;
	color: #666;
}

/* Prix (fourchette affichée avant le choix des variations) */
.et-db #et-boc .et-l .gx-fix .gx-fix-price.et_pb_wc_price {
	margin-bottom: 24px;
}
.et-db #et-boc .et-l .gx-fix .gx-fix-price .price {
	color: #1d1d1f !important;
	font-size: 18px;
	font-weight: 500;
}

/* Prix de la variation choisie : affiché au-dessus du bouton d'achat */
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .woocommerce-variation-price {
	color: #1d1d1f;
	font-size: 18px;
	font-weight: 500;
}

/* Galerie : coins arrondis à 15 px, voile blanc au survol */
.et-db #et-boc .et-l .gx-fix .gx-fix-gallery.et_pb_gallery .et_pb_gallery_item {
	border-radius: 15px;
	overflow: hidden;
}
.et-db #et-boc .et-l .gx-fix .gx-fix-gallery .et_overlay {
	background-color: rgba(255, 255, 255, 0.9);
}


/* ---------- 3. Colonne de droite : sélection des variations (menu en pastille) ---------- */

/* Tableau des variations : une ligne par attribut, pleine largeur */
.et-db #et-boc .et-l .gx-fix .gx-fix-cart table.variations,
.et-db #et-boc .et-l .gx-fix .gx-fix-cart table.variations tbody,
.et-db #et-boc .et-l .gx-fix .gx-fix-cart table.variations tr,
.et-db #et-boc .et-l .gx-fix .gx-fix-cart table.variations th,
.et-db #et-boc .et-l .gx-fix .gx-fix-cart table.variations td {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	text-align: start;
}

/* Libellé au-dessus du menu (Stopper, DIN, Taille…) */
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .variations label {
	display: block;
	margin: 0 0 8px;
	color: #1d1d1f;
	font-size: 14px;
	font-weight: 600;
}

.et-db #et-boc .et-l .gx-fix .gx-fix-cart .variations td.value {
	position: relative;
	margin-bottom: 12px;
}

/* Divi ajoute sa propre flèche sur les <span> des variations : on la retire */
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .variations span::before,
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .variations span::after {
	content: none !important;
	display: none !important;
}

/* Menu : pastille 52 px, bordure noire, chevron à droite, texte centré */
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .variations select {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	padding: 0 52px 0 22px;
	border: 1px solid #1d1d1f;
	border-radius: 999px;
	background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 20px center / 16px;
	color: #1d1d1f;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-align-last: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .variations select:hover {
	background-color: #f5f5f7;
}
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .variations select:focus-visible {
	outline: 2px solid #0071e3;
	outline-offset: 2px;
}

/* Lien « Effacer » : petit, bleu, à droite */
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .reset_variations {
	display: block;
	margin-top: 8px;
	color: #0071e3;
	font-size: 12px;
	text-align: right;
}

/* Sélections et bouton d'achat : toujours l'un sous l'autre, à la même largeur (style Apple / On) */
.et-db #et-boc .et-l .gx-fix .gx-fix-cart form.cart,
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .single_variation_wrap,
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .woocommerce-variation-add-to-cart {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .woocommerce-variation-add-to-cart {
	gap: 12px;
}

/* Quantité masquée : 1 par défaut, modifiable dans le panier (supprimer cette règle pour la réafficher) */
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .quantity {
	display: none !important;
}

/* Bouton « Ajouter au panier » : pastille noire pleine largeur */
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .single_add_to_cart_button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100% !important;
	min-height: 52px;
	margin: 0 !important;
	padding: 0 24px !important;
	border: 1px solid #1d1d1f !important;
	border-radius: 999px !important;
	background: #1d1d1f !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-align: center;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .single_add_to_cart_button:hover {
	background: #1d1d1f !important;
	color: #ffffff !important;
	opacity: 0.85;
}
/* Pas de flèche Divi au survol : elle décalerait le texte */
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .single_add_to_cart_button::after {
	content: none !important;
	display: none !important;
}
/* Tant qu'une variation n'est pas choisie */
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .single_add_to_cart_button.disabled,
.et-db #et-boc .et-l .gx-fix .gx-fix-cart .single_add_to_cart_button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}


/* ---------- 4. Dessous : caractéristiques puis description ---------- */

.et-db #et-boc .et-l .gx-fix .gx-fix-bottom.et_pb_row {
	width: 90%;
	max-width: none !important;
}


/* ---------- 5. Tablette et mobile : la colonne n'est plus collée ---------- */

@media (max-width: 980px) {
	.et-db #et-boc .et-l .gx-fix .gx-fix-left.et_pb_column {
		position: static;
	}
	.et-db #et-boc .et-l .gx-fix .gx-fix-title .et_pb_text_inner {
		font-size: 28px;
	}
}