/*
 * Harmonisation des pages catégorie WooCommerce standard (Gravier, Sable,
 * Tout-venant, etc.) avec le catalogue custom /agregats/ (snippet WPCode
 * 1476) — voir inc/agregats-category-pricing.php pour le raisonnement
 * complet. Classes distinctes (.zb-cat-*) du catalogue (.zb-agregats-*)
 * pour ne jamais interférer avec lui.
 */

.zb-agregats-unit-suffix {
	font-size: 13px;
	font-weight: 600;
	color: var(--zb-text-secondary, #5f6259);
	white-space: nowrap;
}

.zb-cat-agregats-purchase {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zb-cat-qty-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}

.zb-cat-qty-wrap .quantity {
	display: inline-flex;
	position: static !important;
}

/* !important : neutralise les règles héritées du thème sur
   .quantity input[type=number] (même correctif que le catalogue custom,
   cf. commentaire équivalent dans le snippet 1476). */
.zb-cat-qty-wrap input.qty {
	width: 68px !important;
	min-width: 68px !important;
	box-sizing: border-box !important;
	padding: 8px 4px !important;
	text-align: center !important;
	background: var(--zb-surface-alt, #f1ece3) !important;
	border: 1px solid var(--zb-border-subtle, #e6e0d3) !important;
	border-radius: 6px !important;
	color: var(--zb-text-heading, #23261f) !important;
	font-size: 14px !important;
	-moz-appearance: textfield;
	-webkit-appearance: none;
	appearance: none;
}

/* Flèches natives du champ number (Chrome/Safari/Edge) — la règle
   -moz-appearance ci-dessus ne couvre que Firefox ; sans ce correctif,
   les flèches natives cohabitent avec les boutons +/- personnalisés,
   source de confusion (28/07/2026). */
.zb-cat-qty-wrap input.qty::-webkit-outer-spin-button,
.zb-cat-qty-wrap input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.zb-cat-qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 34px;
	flex-shrink: 0;
	background: var(--zb-surface-alt, #f1ece3);
	border: 1px solid var(--zb-border-subtle, #e6e0d3);
	border-radius: 6px;
	color: var(--zb-text-heading, #23261f);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

@media (hover: hover) and (pointer: fine) {
	.zb-cat-qty-btn {
		transition: border-color 0.2s ease, background-color 0.2s ease;
	}
	.zb-cat-qty-btn:hover {
		border-color: rgba(57, 167, 81, 0.5);
		background: rgba(57, 167, 81, 0.1);
	}
}

.zb-cat-qty-unit {
	font-size: 12px;
	color: var(--zb-text-secondary, #5f6259);
	white-space: nowrap;
}

.zb-cat-total {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--zb-text-heading, #23261f);
}

.zb-cat-total-amount {
	font-weight: 800;
	color: var(--zb-accent-deep, #237a3d);
}

.zb-cat-add-btn.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 11px 16px;
	background: var(--zb-accent, #2e8541);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
	.zb-cat-add-btn.button {
		transition: background-color 0.2s ease;
	}
	.zb-cat-add-btn.button:hover {
		background: var(--zb-accent-bright, #277f42);
	}
}

.zb-cat-add-btn.button.loading {
	opacity: 0.7;
	pointer-events: none;
}

/* Chevauchement boutons flottants (signalé 01/08/2026) : sous 480px, les
   boutons +/- de quantité de la 1ère carte produit (haut de grille)
   atterrissent dans la même bande que les boutons flottants WhatsApp/Zako
   (position fixed, bas d'écran) au premier chargement d'une page catégorie
   Agrégats. N'affecte que ce composant (.zb-cat-agregats-purchase,
   spécifique aux pages catégorie Agrégats, jamais le reste de la grille
   produits WooCommerce) ; l'espacement supplémentaire pour les cartes
   suivantes (hors zone à risque) est sans conséquence, déjà hors du
   premier écran visible. */
@media (max-width: 480px) {
	.zb-cat-agregats-purchase {
		margin-top: 60px;
	}
}

/* Correctif géométrique permanent (02/08/2026) — remplace la tentative
   précédente d'estompage au scroll (commit a979bf1, retiré : voir
   CHANGELOG pour la cause exacte de son échec). Le chevauchement avec
   les boutons flottants WhatsApp (position fixed, bas-gauche, x:12-52
   à ce palier) et Zako (position fixed, bas-droite, x:330-378) n'est
   PAS lié au défilement : c'est un chevauchement géométrique permanent,
   présent dès qu'une carte se trouve à cette position à l'écran, quel
   que soit l'instant (au repos, pas seulement pendant un scroll actif).
   Seule une séparation horizontale permanente élimine le problème,
   indépendamment de tout état de défilement.
   .product a overflow:hidden (vérifié en direct) : impossible de faire
   déborder la rangée +/- dans la gouttière entre les 2 colonnes de la
   grille (option initialement envisagée pour la colonne droite) — le
   repositionnement doit rester strictement à l'intérieur de chaque
   carte. D'où la réduction du champ de quantité (68px -> 52px) et du
   gap interne (6px -> 4px) : nécessaire pour que la rangée compactée
   tienne dans la marge disponible après décalage, sur les 2 colonnes.
   :nth-of-type (pas :nth-child) : insensible à tout élément non-<li>
   que WooCommerce pourrait injecter dans la liste. */
@media (max-width: 480px) {
	.zb-cat-qty-wrap {
		gap: 4px;
	}

	.zb-cat-qty-wrap input.qty {
		width: 52px !important;
		min-width: 52px !important;
		/* 14px (taille par défaut) tronque de 1px les valeurs à 3 chiffres
		   avec 2 décimales (ex. "100.00", commande en gros plausible) dans
		   ces 52px — vérifié en direct (scrollWidth 51 > clientWidth 50).
		   13px vérifié sans troncature sur ce même cas. */
		font-size: 13px !important;
	}

	/* .quantity (conteneur natif WooCommerce autour du champ, déjà mis en
	   display:inline-flex plus haut dans ce fichier) garde une largeur
	   héritée (~70px, plus large que l'input réduit ci-dessus) si on ne
	   la contraint pas explicitement — 18px d'espace vide invisible se
	   glissaient alors entre le champ et le bouton +, repoussant ce
	   dernier d'autant. Découvert en vérification directe des rects. */
	.zb-cat-qty-wrap .quantity {
		width: auto !important;
	}

	/* Colonne gauche : décale la rangée vers la droite pour dégager
	   WhatsApp (marge de sécurité ~6px au-delà de son bord droit). */
	li.product:nth-of-type(odd) .zb-cat-qty-wrap {
		margin-left: 16px;
	}

	/* Colonne droite : ramène la rangée jusqu'au bord gauche de sa
	   propre carte (annule le retrait hérité de ~19px) pour dégager
	   Zako — la carte étant en overflow:hidden, c'est la limite
	   maximale atteignable vers la gauche. */
	li.product:nth-of-type(even) .zb-cat-qty-wrap {
		margin-left: -19px;
	}
}

/* Correctif (02/08/2026) — carte entière (bouton "Ajouter au panier" inclus)
   qui déborde visuellement dans la carte voisine sur Safari iOS réel,
   confirmé par capture d'écran, alors qu'invisible sur Chromium (voir
   CHANGELOG pour le détail de l'investigation).
   Cause : .ct-woo-card-actions > * (règle du thème parent Blocksy) applique
   flex: 1 0 0 à .zb-cat-agregats-purchase, ce qui l'empêche de rétrécir
   en dessous du contenu minimal de ses enfants (min-width initial = auto,
   pas 0, comportement par défaut de la spec flexbox). Le contenu de
   .zb-cat-qty-wrap (2 boutons 30px + champ 52px + libellé d'unité "Big
   Bag(s)"/"tonne(s)") ne tient pas dans les 163,594px de la carte -> tout
   le bloc .zb-cat-agregats-purchase (donc aussi .zb-cat-add-btn, en
   width:100% de ce parent) se rend ~197px de large. Chromium clippe cet
   excès silencieusement via overflow:hidden sur li.product (d'où
   l'absence de symptôme visible dans tous les tests de cette session
   jusqu'ici) ; Safari iOS ne le clippe pas de façon fiable dans cette
   configuration précise (Grid + overflow:hidden + flex min-content) —
   d'où le débordement visible en conditions réelles uniquement.
   Correctif : min-width:0 aux 2 niveaux flex concernés (rétablit la
   possibilité de rétrécir jusqu'à la largeur réelle de la carte),
   flex-shrink:0 explicite sur les boutons/champ (déjà présent sur
   .zb-cat-qty-btn, ajouté ici sur .quantity) pour qu'ils gardent leurs
   dimensions exactes du correctif géométrique précédent, et le libellé
   d'unité absorbe seul le manque de place via troncature (ellipsis)
   plutôt que de forcer un débordement silencieux et incontrôlé. */
/* Correctif (02/08/2026, suite) — min-width:0 seul (ci-dessous) s'est
   révélé insuffisant sur Safari iOS réel (confirmé par test utilisateur
   sur iPhone) : Safari macOS et Chromium appliquent tous deux
   min-width:0 correctement (vérifié via getComputedStyle des deux
   côtés, aucun débordement mesuré) et n'ont jamais reproduit le
   symptôme — Safari iOS diverge spécifiquement sur ce calcul de
   largeur minimale intrinsèque flexbox dans cette combinaison précise
   (Grid + overflow:hidden + enfant flex avec flex:1 0 0 hérité de
   Blocksy). min-width:0 dépend de l'algorithme de calcul intrinsèque
   du moteur de rendu, un point de divergence documenté entre WebKit et
   les autres moteurs ; max-width est une contrainte dure, indépendante
   de ce calcul, qui plafonne la largeur réelle du bloc quel que soit
   le moteur — conservée pour cette raison.
   overflow:hidden RETIRÉ ici (régression découverte juste après coup,
   captures d'écran réelles à l'appui) : .zb-cat-agregats-purchase ne
   s'étire pas sur toute la largeur de la carte (~125,6px de rendu
   réel, replié ~19px de chaque bord d'une carte de 163,594px — mise en
   page héritée de Blocksy, jamais remarquée jusqu'ici faute de raison
   de le vérifier). Le correctif géométrique du 02/08/2026 (commit
   463ea98) décale .zb-cat-qty-wrap via margin-left (16px / -19px)
   *au-delà* de cette zone interne, jusqu'aux bords réels de la carte —
   en comptant sur overflow:hidden de li.product (au bord de la carte,
   163,594px) comme SEULE limite de rognage. Ajouter overflow:hidden
   directement ici créait une SECONDE limite, plus étroite (125,6px,
   décalée de 19px), qui rognait les boutons +/- eux-mêmes avant même
   d'atteindre le bord de la carte — repositionnement identique au bug
   d'origine du 02/08/2026, cette fois auto-infligé. max-width seul
   (sans overflow) plafonne la largeur SANS rogner un enfant décalé par
   une marge négative : tout débordement résiduel retombe sur
   li.product, la limite pour laquelle le correctif géométrique a été
   conçu. */
.zb-cat-agregats-purchase {
	min-width: 0;
	max-width: 100%;
}

.zb-cat-qty-wrap {
	min-width: 0;
	max-width: 100%;
}

.zb-cat-qty-wrap .quantity {
	flex-shrink: 0;
}

.zb-cat-qty-unit {
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}