/* ==========================================================================
   Page panier (/panier/) — corrige la case de quantité produit sur mobile.
   A placer dans : wp-content/themes/blocksy-1752578877-via-wpmarmite/assets/css/cart-page.css
   ========================================================================== */

/* Diagnostic en direct (simulation d'un écran 375px de large, identique à ce que montrait la
   capture d'écran) : dans chaque case de quantité, Blocksy laisse un <br> juste avant le champ
   <input> (prévu à l'origine pour un libellé texte caché, lui-même bien masqué — ce n'est pas lui
   le problème). Sur desktop ce <br> ne posait pas de souci, mais sur mobile il crée un retour à la
   ligne "fantôme" qui pousse le champ d'environ 23px vers le bas dans sa case — alors que les
   boutons -/+ (positionnés en absolu par rapport à la case, pas au champ) restent calés en haut.
   Résultat : les boutons -/+ semblaient flotter au-dessus d'un encadré vide au lieu d'être posés
   dessus, qui paraissait "coupé". */
.quantity br {
	display: none;
}

/* Le contour du champ de quantité était bleu vif (couleur de champ par défaut du thème), qui
   détonnait avec le reste du site (gris/or). Passé en gris neutre, avec l'or de la marque au focus,
   cohérent avec le reste des champs et boutons du site. */
.quantity input.qty {
	border-color: #ddd;
}
.quantity input.qty:focus {
	border-color: #CD7F32;
}

/* Sur la ligne mobile (quantité + prix HT/TTC + icône poubelle), les 3 éléments se partagent une
   largeur très étroite. Le texte de prix (rallongé depuis qu'il affiche HT et TTC) pousse la case
   de quantité, qui se fait alors compresser bien en dessous de sa largeur prévue (80px) — jusqu'à
   ne faire plus que ~45px. Le padding par défaut du thème pour un champ de texte (15px de chaque
   côté, agrandi encore par la taille de police fluide du thème) mange alors toute la largeur
   restante et le chiffre de la quantité devient invisible, coincé entre les boutons "-" et "+".
   On empêche la case de se faire compresser, et on réduit son padding pour laisser la place au
   chiffre. */
.product-mobile-actions.product-remove .quantity {
	flex-shrink: 0;
}
.product-mobile-actions.product-remove .quantity input.qty {
	padding: 0 4px;
}