/* ============================================================
   Comercial CR — Título arriba del bloque de precios.

   Truco: la tarjeta se vuelve columna flex y se reordena con
   "order". Menor order = más arriba.
   Foto (0) → Título (1) → Precios (2) → Cantidad (3) → Botón (4)
   ============================================================ */

ul.products li.product {
	display: flex;
	flex-direction: column;
}

/* Foto arriba del todo. */
ul.products li.product a img,
ul.products li.product .attachment-woocommerce_thumbnail,
ul.products li.product .wp-post-image {
	order: 0;
}

/* Título justo debajo de la foto. */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
	order: 1;
	margin-top: .5rem;
}

/* Bloque de precios (Detalle / Mayor / Caja). */
ul.products li.product .price,
ul.products li.product .ccr-precios,
ul.products li.product .tabla-precios {
	order: 2;
}

/* Selector de cantidad. */
ul.products li.product .quantity,
ul.products li.product form.cart {
	order: 3;
}

/* Botón Añadir siempre al final. */
ul.products li.product .add_to_cart_button,
ul.products li.product .button {
	order: 4;
}

/* ------------------------------------------------------------
   Si el título NO sube, su clase real es otra. Inspecciona el
   texto del producto en el navegador, copia la clase, y pégala
   en "CSS extra" dentro de los ajustes del plugin, así:

       ul.products li.product .MI-CLASE-TITULO { order: 1; }
       ul.products li.product .MI-CLASE-PRECIOS { order: 2; }
   ------------------------------------------------------------ */