/* =============================================================================
   EL RACO EXPERIENCE
   CÓDIGO N°11
   Ajustes visuales de avisos WooCommerce en productos

   Archivo:
   11-ajustes-visuales-avisos-woocommerce-productos.css

   FUNCIÓN:
   Ordena y alinea los avisos de WooCommerce dentro de la ficha del producto.
   Aplica en escritorio con puntero fino para evitar afectar el comportamiento
   móvil o táctil.
   ============================================================================= */


/* ==========================================================================
   11.1 Ajustes de avisos WooCommerce en ficha de producto
   ========================================================================== */

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {

	body.single-product {
		/*
		 * Micro-ajustes independientes para el icono de cada aviso.
		 * Más negativo significa más arriba.
		 */
		--raco-success-nudge: -195%;
		--raco-error-nudge: -50%;
		--raco-info-nudge: -50%;
	}

	/*
	 * Sube el contenedor principal del producto en escritorio.
	 */
	body.single-product .ast-woocommerce-container {
		margin-top: -40px !important;
	}

	/*
	 * Wrapper de avisos WooCommerce.
	 * Mantiene los avisos cerca del contenido del producto.
	 */
	body.single-product .woocommerce-notices-wrapper {
		margin-top: 40px !important;
		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}

	/*
	 * Avisos individuales.
	 * Se reserva espacio izquierdo para el icono nativo de WooCommerce.
	 */
	body.single-product .woocommerce-message,
	body.single-product .woocommerce-error,
	body.single-product .woocommerce-info {
		position: relative !important;

		margin: 0 auto 8px auto !important;
		padding: 12px 16px 12px 40px !important;

		box-sizing: border-box !important;
	}

	/*
	 * Posición base del icono.
	 */
	body.single-product .woocommerce-message::before,
	body.single-product .woocommerce-error::before,
	body.single-product .woocommerce-info::before {
		position: absolute !important;
		left: 16px !important;
		top: 50% !important;

		margin: 0 !important;

		line-height: 1 !important;

		transform: translateY(-50%) !important;
	}

	/*
	 * Micro-ajuste por tipo de aviso.
	 */
	body.single-product .woocommerce-message::before {
		transform: translateY(var(--raco-success-nudge)) !important;
	}

	body.single-product .woocommerce-error::before {
		transform: translateY(var(--raco-error-nudge)) !important;
	}

	body.single-product .woocommerce-info::before {
		transform: translateY(var(--raco-info-nudge)) !important;
	}

	/*
	 * Evita separación extra entre avisos y producto.
	 */
	body.single-product .woocommerce-notices-wrapper + .product {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
}