/*
 * VivaWeb — E-commerce : fiche produit.
 *
 * Chargée sur la seule fiche produit, après la feuille WooCommerce du thème.
 */

body.vw-product {
	--vw-product-sticky-top: 24px;
}


/* -------------------------------------------------------------------------
 *  1. Informations complémentaires
 * ---------------------------------------------------------------------- */

/*
 * Intitulés d'attributs alignés à gauche, comme leurs valeurs.
 *
 * Ni WooCommerce ni Kadence ne posent d'alignement sur ces cellules : le
 * centrage venait du `text-align: center` que les navigateurs appliquent
 * d'office à tout <th>. Les valeurs, elles, étaient déjà à gauche — d'où le
 * décalage entre les deux colonnes.
 */
body.vw-product table.woocommerce-product-attributes th,
body.vw-product table.shop_attributes th {
	text-align: left;
}


/* -------------------------------------------------------------------------
 *  2. Image collante
 * ---------------------------------------------------------------------- */

@media screen and (min-width: 720px) {

	/*
	 * 720 px est le seuil du thème : en dessous, l'image et le résumé passent
	 * l'un sous l'autre et il n'y a plus rien à suivre.
	 *
	 * `.vw-product__media` est posé par le module autour de l'image et du
	 * résumé. Sans ce conteneur, la limite de déplacement serait `div.product`,
	 * qui englobe aussi les produits similaires : l'image serait restée collée
	 * jusqu'au milieu de ceux-ci. Le `flow-root` lui fait prendre la hauteur
	 * des deux colonnes flottantes.
	 *
	 * `--vw-product-sticky-top` se surcharge en CSS additionnel si un en-tête
	 * collant venait à passer devant l'image.
	 */
	body.vw-product--sticky .vw-product__media {
		display: flow-root;
	}

	body.vw-product--sticky .vw-product__media div.images.woocommerce-product-gallery {
		position: sticky;
		top: var( --vw-product-sticky-top, 24px );
	}
}