/**
 * Fiche produit — la ligne « quantité + Ajouter au panier » ne casse plus.
 *
 * ─── Ce que ça corrige ─────────────────────────────────────────────────
 *
 * Quand la colonne de droite est étroite, le bouton jaune (libellé + pastille
 * de prix) réclame plus de place qu'il n'en reste. Les enfants d'une ligne flex
 * rétrécissent alors TOUS : le champ de quantité se comprime jusqu'à ce que
 * « + » passe sous le champ, et le libellé du bouton se coupe en trois lignes,
 * ce qui le rend deux fois trop haut.
 *
 * Règle appliquée : ni la quantité ni le libellé ne rétrécissent. Si la ligne
 * ne tient pas, c'est le BOUTON qui passe à la ligne, sur toute la largeur.
 *
 * Feuille du socle, partagée par les trois habillages ; pas de valeur de
 * design en dur (tailles relatives uniquement).
 *
 * @package potsetiques-theme-core
 */

/* La ligne : peut passer à la ligne à toutes les largeurs (les habillages la
   figent en `nowrap` à partir de `lg`). Leur règle est `.product:not(.card) .variations_form.cart
   .single_variation_wrap .woocommerce-variation-add-to-cart` (6 classes) et, pour un
   produit simple, `.product:not(.card).product-type-simple form.cart` : on les
   dépasse avec `.product` + `html body` en tête. */
html body.single-product .product .variations_form.cart .single_variation_wrap .woocommerce-variation-add-to-cart,
html body.single-product .product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: .5rem;
}

/* Quantité : sa taille naturelle, jamais moins ; « - », champ et « + » en ligne. */
body.single-product form.cart .quantity {
	flex: 0 0 auto;
	width: auto;
}

body.single-product form.cart .quantity .input-group {
	flex-wrap: nowrap;
	width: auto;
}

body.single-product form.cart .quantity .input-group > .qty {
	flex: 0 0 3rem;
	width: 3rem;
	min-width: 0;
	text-align: center;
}

/* Hauteur : 44 px, 40 px de large par bouton : une cible tactile — c'est la surface de clic de
   « - » et « + » qui compte, pas l'épaisseur du champ. Les habillages donnent au
   champ un padding vertical de 1,126 rem (champ et boutons montaient à 64 px) ;
   leur règle compte huit classes, d'où la longueur du sélecteur. */
html body.single-product .product form.cart .quantity .input-group > input.qty.input-text.form-control[name="quantity"] {
	padding-block: 0;
	height: 2.75rem;
}

body.single-product form.cart .quantity .input-group > .minus,
body.single-product form.cart .quantity .input-group > .plus {
	min-width: 2.5rem;
	padding-inline: .25rem;
	justify-content: center;
}

body.single-product form.cart .quantity .input-group > .minus,
body.single-product form.cart .quantity .input-group > .plus {
	flex: 0 0 auto;
}

/* Bouton : sa largeur naturelle (libellé + prix sur UNE ligne). Si la ligne ne
   peut pas la contenir à côté de la quantité, il descend et prend toute la
   ligne ; `max-width` l'empêche de déborder de la colonne. */
body.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 max-content;
	width: auto;
	min-width: 0;
	max-width: 100%;
	letter-spacing: .06em;
}

body.single-product form.cart .single_add_to_cart_button .potsetiques-btn-label {
	white-space: nowrap;
}

/* La pastille de prix pèse la moitié du bouton : un cran plus petite, pour que
   quantité + bouton tiennent côte à côte dans la colonne de droite d'un écran
   de portable. `!important` : le thème pose ses marges par classes utilitaires. */
body.single-product form.cart .single_add_to_cart_button .potsetiques-btn-price {
	font-size: 1.5rem;
	padding-inline: .75rem !important;
}

/* Colonne très étroite (mobile) : le bouton se resserre encore au lieu de
   déborder. La ligne est un conteneur, pas l'écran : c'est sa largeur qui compte. */
body.single-product form.cart .woocommerce-variation-add-to-cart,
body.single-product .product form.cart:not(.variations_form) {
	container-type: inline-size;
}

@container (max-width: 24rem) {
	.single_add_to_cart_button {
		letter-spacing: .02em;
		font-size: .75rem;
		gap: .5rem;
	}

	.single_add_to_cart_button .potsetiques-btn-price {
		font-size: 1.15rem;
		padding-inline: .5rem !important;
	}
}