/* Fiche produit — bouton d'ajout, titre, prix, barre de rappel.
   Toutes les couleurs viennent de la palette theme.json. Aucun !important.
   Chargée uniquement sur is_product(). */

/* --- Bouton d'ajout au panier ----------------------------------------
   Le bloc woocommerce/add-to-cart-form rend le balisage classique de
   WooCommerce : <form class="cart"> contenant .single_add_to_cart_button.
   Ces règles valent pour lui et pour le bouton de la barre de rappel. */

.mh-product-info form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	margin-bottom: 0;
}

.mh-product-info form.cart .quantity {
	flex: 0 0 auto;
}

.mh-product-info form.cart .quantity input {
	height: 60px;
	width: 72px;
	text-align: center;
	border: 1px solid var(--wp--preset--color--grey);
	border-radius: 2px;
	background-color: #ffffff;
	color: var(--wp--preset--color--page-text);
	font-family: var(--wp--preset--font-family--inter);
}

.mh-product-info .single_add_to_cart_button,
.mh-cart-bar__button {
	flex: 1 1 auto;
	min-height: 60px;
	padding: 0 1.5rem;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 2px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--page-background);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.mh-product-info .single_add_to_cart_button {
	width: 100%;
}

.mh-product-info .single_add_to_cart_button:hover,
.mh-product-info .single_add_to_cart_button:focus-visible,
.mh-cart-bar__button:hover,
.mh-cart-bar__button:focus-visible {
	background-color: var(--wp--preset--color--terracotta-hover);
	border-color: var(--wp--preset--color--terracotta-hover);
	color: var(--wp--preset--color--page-background);
}

.mh-product-info .single_add_to_cart_button:disabled,
.mh-product-info .single_add_to_cart_button.disabled {
	background-color: var(--wp--preset--color--color-1);
	border-color: var(--wp--preset--color--grey);
	color: var(--wp--preset--color--desactive-texte);
	cursor: not-allowed;
}

/* --- Titre et prix ----------------------------------------------------- */

.mh-product-info .wp-block-post-title {
	font-family: var(--wp--preset--font-family--bodoni-moda);
	font-weight: 400;
	line-height: 1.1;
	color: var(--wp--preset--color--page-text);
}

.mh-product-info .wp-block-woocommerce-product-price {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 24px;
	line-height: 1.3;
	color: var(--wp--preset--color--page-text);
}

/* Aucune pièce n'est soldée : si un prix promotionnel était saisi par
   erreur, le prix barré resterait masqué plutôt que d'apparaître. */
.mh-product-info .wp-block-woocommerce-product-price del {
	display: none;
}

.mh-product-info .wp-block-woocommerce-product-price ins {
	text-decoration: none;
}

/* --- Barre de rappel de panier ----------------------------------------- */

/* Le JS déplace la barre vers <body> au démarrage : dans <main>, qui est en
   layout constrained, WordPress lui imposait max-width:700px et des marges
   automatiques — même en position:fixed — et un ancêtre animé en transform
   par front-scripts.min.js du parent aurait de toute façon transformé le
   fixed en absolute. Les surcharges ci-dessous restent en filet si le JS ne
   s'exécute pas. */

.mh-cart-bar {
	position: fixed;
	/* Repli à 0 : le header n'est plus collant, seul le décalage de la
	   barre d'administration est injecté par le JS. */
	top: var(--mh-bar-top, 0px);
	left: 0;
	right: 0;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	z-index: 400; /* sous le header collant du parent, qui est à 500 */
	background-color: var(--wp--preset--color--page-background);
	border-bottom: 1px solid var(--wp--preset--color--grey);
	box-shadow: none;
	transform: translateY( -100% );
	opacity: 0;
	visibility: hidden;
	transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
}

.mh-cart-bar *,
.mh-cart-bar *::before,
.mh-cart-bar *::after {
	box-sizing: border-box;
}

.mh-cart-bar.is-visible {
	transform: none;
	opacity: 1;
	visibility: visible;
}

.mh-cart-bar__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	height: 64px;
	width: 100%;
	min-width: 0;
	padding-left: var(--wp--preset--spacing--50);
	padding-right: 0;
	overflow: hidden;
}

.mh-cart-bar__thumb {
	flex: 0 0 auto;
	display: block;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 2px;
	background-color: var(--wp--preset--color--color-1);
}

.mh-cart-bar__thumb-img,
.mh-cart-bar__thumb img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 2px;
}

.mh-cart-bar__title {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--bodoni-moda);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
	color: var(--wp--preset--color--page-text);
}

.mh-cart-bar__price {
	flex: 0 0 auto;
	margin-left: auto;
	padding-right: 1.5rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 24px;
	line-height: 1.2;
	color: var(--wp--preset--color--page-text);
	white-space: nowrap;
}

.mh-cart-bar__button {
	flex: 0 0 auto;
	align-self: stretch;
	/* 25vw est calculé sur la fenêtre : correct maintenant que la barre en
	   fait toute la largeur. min() évite tout débordement sur petit écran. */
	width: min( 25vw, 380px );
	min-width: 180px;
	min-height: 64px;
	margin: 0;
	border-width: 0;
	border-radius: 0;
}

/* --- Mobile : en bas, prix et bouton seulement ------------------------- */

@media (max-width: 781px) {
	.mh-cart-bar {
		top: auto;
		bottom: 0;
		border-bottom: 0;
		border-top: 1px solid var(--wp--preset--color--grey);
		transform: translateY( 100% );
	}

	.mh-cart-bar.is-visible {
		transform: none;
	}

	.mh-cart-bar__thumb,
	.mh-cart-bar__title {
		display: none;
	}

	.mh-cart-bar__inner {
		height: 54px;
		gap: 0.75rem;
		padding-left: var(--wp--preset--spacing--40);
	}

	.mh-cart-bar__price {
		margin-left: 0;
		padding-right: 0;
		font-size: var(--wp--preset--font-size--large);
	}

	.mh-cart-bar__button {
		flex: 0 0 50%;
		width: 50%;
		min-width: 0;
		max-width: none;
		min-height: 54px;
		margin-left: auto;
	}
}

/* --- Mouvement réduit -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mh-cart-bar {
		transition: none;
	}

	.mh-product-info .single_add_to_cart_button,
	.mh-cart-bar__button {
		transition: none;
	}
}

/* --- Alignement du bouton d'ajout -------------------------------------
   WooCommerce style son propre formulaire avec une spécificité élevée :
   `.woocommerce div.product form.cart div.quantity { float:left }` et
   `.woocommerce div.product form.cart .button { float:left }` valent
   toutes deux (0,3,2). Mes règles précédentes plafonnaient à (0,2,0) et
   perdaient donc l'arbitrage, d'où le bouton mal calé.

   Deux écritures du même sélecteur sont données à chaque fois : la première
   passe par la classe du bloc, la seconde double une classe pour monter la
   spécificité au cas où cette enveloppe serait absente. Aucune n'utilise
   !important. */

.mh-product-info .wp-block-woocommerce-add-to-cart-form,
.mh-product-info .wc-block-add-to-cart-form {
	margin: 0;
	padding: 0;
	width: 100%;
	max-width: none;
}

.mh-product-info .wp-block-woocommerce-add-to-cart-form form.cart,
.mh-product-info form.cart.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 0;
	float: none;
}

.mh-product-info .wp-block-woocommerce-add-to-cart-form form.cart div.quantity,
.mh-product-info form.cart div.quantity.quantity {
	float: none;
	margin: 0;
	flex: 0 0 auto;
}

.mh-product-info .wp-block-woocommerce-add-to-cart-form form.cart .single_add_to_cart_button,
.mh-product-info form.cart .button.single_add_to_cart_button {
	float: none;
	margin: 0;
	flex: 1 1 auto;
	width: auto;
	min-height: 60px;
}

/* Sans champ quantité, le bouton occupe seul toute la largeur. */
.mh-product-info form.cart:not(:has(div.quantity)) .button.single_add_to_cart_button {
	width: 100%;
}

/* --- Respiration avant le pied de page --------------------------------- */

body.single-product main.wp-block-group {
	padding-bottom: var(--wp--preset--spacing--80);
}

/* --- Le div.quantity fantôme ------------------------------------------
   Sur une pièce unique, le stock vaut 1 : WooCommerce rend alors la
   quantité en <input type="hidden">, mais conserve le conteneur
   div.quantity. Vide, il consommait quand même sa place dans le flex —
   et le gap de 12px avec lui — décalant le bouton vers la droite.
   Les 111 fiches sont dans ce cas.

   On masque le conteneur uniquement lorsqu'il ne contient aucun champ
   visible. Si un produit passait un jour à un stock supérieur, l'input
   redeviendrait de type number, la règle ne s'appliquerait plus et la
   quantité se réafficherait, alignée avec le bouton.

   :has() est requis. Sur un navigateur qui ne le connaît pas, la règle est
   ignorée et l'on retrouve le léger décalage d'avant — dégradé, jamais
   cassé. */

.mh-product-info form.cart div.quantity:has( input[type="hidden"] ),
.mh-product-info form.cart div.quantity:has( input.qty[type="hidden"] ) {
	display: none;
}

/* Le bouton occupe alors toute la largeur : calé sur le titre à gauche,
   sur le bord droit de la colonne à droite. */
.mh-product-info .wp-block-woocommerce-add-to-cart-form form.cart .single_add_to_cart_button,
.mh-product-info form.cart .button.single_add_to_cart_button {
	width: 100%;
	margin: 0;
}

/* Quantité visible (stock > 1) : elle reprend sa place et le bouton
   récupère le reste de la ligne. */
.mh-product-info form.cart:has( div.quantity input:not([type="hidden"]) ) .button.single_add_to_cart_button {
	width: auto;
	flex: 1 1 auto;
}

/* --- Ligne de stock ---------------------------------------------------- */

.mh-product-info .wp-block-woocommerce-add-to-cart-form p.stock,
.mh-product-info p.stock {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

.mh-product-info p.stock.out-of-stock {
	color: var(--wp--preset--color--erreur);
}

/* --- Madame a aussi choisi --------------------------------------------- */

.mh-upsells {
	margin-top: var(--wp--preset--spacing--80);
}

.mh-upsells__title {
	margin: 0 0 var(--wp--preset--spacing--60);
	font-family: var(--wp--preset--font-family--bodoni-moda);
	font-weight: 400;
	font-size: clamp( 24px, 1.6vw + 18px, 32px );
	line-height: 1.15;
	color: var(--wp--preset--color--page-text);
}

.mh-upsells__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-upsells__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mh-upsells__link {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--page-text);
}

.mh-upsells__media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 2px;
	background-color: var(--wp--preset--color--color-1);
	box-shadow: none;
}

.mh-upsells__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 2px;
	transition: transform 0.45s ease;
}

.mh-upsells__link:hover .mh-upsells__img,
.mh-upsells__link:focus-visible .mh-upsells__img {
	transform: scale(1.04);
}

.mh-upsells__link:focus-visible {
	outline: 1px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.mh-upsells__name {
	display: block;
	margin-top: 0.85rem;
	font-family: var(--wp--preset--font-family--bodoni-moda);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
	color: var(--wp--preset--color--page-text);
}

.mh-upsells__price {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	color: var(--wp--preset--color--page-text);
}

/* Aucune pièce n'est soldée : jamais de prix barré. */
.mh-upsells__price del {
	display: none;
}

.mh-upsells__price ins {
	text-decoration: none;
}

@media (max-width: 781px) {
	.mh-upsells__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mh-upsells__img {
		transition: none;
	}

	.mh-upsells__link:hover .mh-upsells__img,
	.mh-upsells__link:focus-visible .mh-upsells__img {
		transform: none;
	}
}