/*
 * Campos de compra de la tarjeta de regalo (pagina del producto).
 *
 * Estilos MINIMOS y de LAYOUT: solo lo que el plugin necesita para que sus
 * campos se apilen bien DENTRO de la fila de add-to-cart de WooCommerce. Sin
 * colores, tipografias ni bordes propios — los controles siguen heredando del
 * input del tema. Ver la regla de estilos minimos del grupo.
 *
 * POR QUE EXISTE (no borrar sin leer):
 * el plugin inyecta sus <p class="cgr-field"> como hijos de la fila que Woo
 * arma para "cantidad + boton". Esa fila la maqueta cada tema a su manera, asi
 * que sin este archivo el resultado dependia del tema y salia mal de dos formas
 * distintas, ambas medidas en produccion el 2026-09-08:
 *   - tema de bloques (tantadinamita.com): la fila es GRID. Label y control
 *     quedan en linea, y el label sube o se queda al lado segun si "label +
 *     control" cabe en el ancho — o sea por accidente. Ademas los controles
 *     traian width:100% con box-sizing:content-box heredado, asi que median
 *     "ancho del padre + padding + borde" y desbordaban 37 px; en movil eso le
 *     daba scroll horizontal a toda la pagina.
 *   - The Hanger (larebeldecoleccion.com): la fila es FLEX ROW NOWRAP. Los
 *     campos se aplastaban a 103 / 74 px y el boton se les montaba encima.
 * Espaciados en la escala de 16 (16 px y 8 px).
 */

/* La fila de Woo no esta pensada para campos de formulario. Solo la dejamos
   envolver cuando somos NOSOTROS los que metimos campos ahi. */
.woocommerce-variation-add-to-cart:has(> .cgr-field),
form.cart:has(> .cgr-field) {
	flex-wrap: wrap;
}

/* Cada campo ocupa la fila completa, sea el contenedor flex o grid. La
   propiedad que no aplica al modelo del contenedor es inocua. */
.cgr-field {
	flex: 0 0 100%;
	width: 100%;
	grid-column: 1 / -1;
	margin: 0 0 16px;
}

/* La etiqueta va ARRIBA de su control, siempre. Sin esto el label es inline y
   su posicion depende de si el par cabe en el ancho disponible. */
.cgr-field > label {
	display: block;
	margin-bottom: 8px;
}

/* border-box explicito: con content-box, width:100% mide mas que el contenedor
   y el control desborda. No damos por hecho el reset del tema. */
.cgr-field input,
.cgr-field textarea {
	box-sizing: border-box;
	max-width: 26em;
}

.cgr-field input[type="email"],
.cgr-field textarea {
	width: 100%;
}