/**
 * El número del campo de cantidad no cabía.
 *
 * No estaba oculto: no tenía sitio. WooCommerce dimensiona ese campo en
 * `width: 3.631em` (~47 px) y el tema aplica a TODOS los `input` un
 * `padding: 0.5rem 1rem`, o sea 32 px de relleno horizontal. Con
 * `box-sizing: border-box` al número le quedaban unos 15 px, que las flechitas
 * del selector se comían enteros: se veía el recuadro, las flechas al pasar el
 * ratón, y ningún número.
 *
 * Se arregla dándole sitio en vez de pelear con el tema: un ancho mínimo propio
 * y menos relleno a los lados. `box-sizing` se fija aquí para no depender de lo
 * que herede.
 *
 * Detectado el 2026-11-09 en la ficha de producto, en staging y en producción.
 */

.woocommerce .quantity input.qty,
.woocommerce div.product form.cart .quantity input.qty,
.woocommerce-page .quantity input.qty {
	box-sizing: border-box;
	min-width: 4.75rem;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
	text-align: center;
}

/* En móvil el dedo necesita más blanco alrededor que el ratón. */
@media ( max-width: 480px ) {
	.woocommerce .quantity input.qty,
	.woocommerce-page .quantity input.qty {
		min-width: 5.25rem;
	}
}