.omega-hw-grid-seccion { margin-bottom: 40px; }
.omega-hw-grid-ver-todos { font-size: 13px; font-weight: 600; text-decoration: none; color: #003087; white-space: nowrap; }
.omega-hw-grid-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.omega-hw-grid-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.omega-hw-grid-titulo { font-size: 28px; font-weight: 800; margin: 4px 0 0; }
.omega-hw-grid-contador { font-size: 12px; font-weight: 600; color: #dc2626; margin-top: 4px; }
.omega-hw-grid { display: grid; grid-template-columns: repeat(var(--omega-hw-columnas, 5), 1fr); gap: 16px; }
.omega-hw-product-card {
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: transform 180ms cubic-bezier(0.23,1,0.32,1), box-shadow 180ms cubic-bezier(0.23,1,0.32,1);
	will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
	.omega-hw-product-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(15,31,92,0.1); }
}
.omega-hw-product-card:active { transform: scale(0.97); }
.omega-hw-product-img { position: relative; width: 100%; aspect-ratio: 1; background: #f1f5f9; }
.omega-hw-product-photo { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.omega-hw-product-badge { position: absolute; top: 8px; left: 8px; }
.omega-hw-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.omega-hw-badge-sale { background: #b91c1c; color: #fff; }
.omega-hw-badge-stock { background: rgba(30,58,138,0.1); color: #1e3a8a; }
.omega-hw-product-actions {
	position: absolute; bottom: 0; left: 0; right: 0;
	padding: 8px;
	background: linear-gradient(to top, rgba(255,255,255,0.95) 60%, transparent);
	opacity: 1;
}
/* Solo se oculta y se revela con hover en dispositivos con mouse real —
   en touch (sin hover) queda siempre visible, si no el botón sería
   inalcanzable en móvil (así lo tiene la propuesta original, sin darse
   cuenta de eso — aquí se corrige). */
@media (hover: hover) and (pointer: fine) {
	.omega-hw-product-actions {
		opacity: 0;
		transform: translateY(4px);
		transition: opacity 180ms cubic-bezier(0.23,1,0.32,1), transform 180ms cubic-bezier(0.23,1,0.32,1);
	}
	.omega-hw-product-card:hover .omega-hw-product-actions {
		opacity: 1;
		transform: translateY(0);
	}
}
.omega-hw-btn-quick {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	width: 100%;
	min-height: 44px; /* mínimo táctil recomendado — antes 37px con solo padding:9px */
	padding: 9px 12px;
	border-radius: 6px;
	font-size: 12px; font-weight: 700;
	text-decoration: none;
	transition: transform 140ms cubic-bezier(0.23,1,0.32,1), background-color 140ms;
	will-change: transform;
}
.omega-hw-btn-quick:active { transform: scale(0.97); }
.omega-hw-btn-quick-wa { background: #25d366; color: #fff !important; }
@media (hover: hover) and (pointer: fine) {
	.omega-hw-btn-quick-wa:hover { background: #22c55e; color: #fff !important; }
}
.omega-hw-btn-quick-cart, .omega-hw-btn-quick-view { background: #1e3a8a; color: #fff !important; }
@media (hover: hover) and (pointer: fine) {
	.omega-hw-btn-quick-cart:hover, .omega-hw-btn-quick-view:hover { background: #0f1f5c; color: #fff !important; }
}
.omega-hw-product-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.omega-hw-product-brand { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #64748b; line-height: 14px; margin-bottom: 4px; }
/* Recortado a N líneas (control "Líneas máximas del nombre", 3 por defecto) con
   alto fijo de N líneas: los precios quedan alineados en la fila sin el hueco
   que dejaba el antiguo flex:1 bajo los nombres cortos. */
.omega-hw-product-name {
	font-size: 13px; font-weight: 600; color: #0f172a; line-height: 1.35; margin-bottom: 8px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--omega-hw-nombre-lineas, 3);
	overflow: hidden;
	min-height: calc(1.35em * var(--omega-hw-nombre-lineas, 3));
	min-height: calc(1lh * var(--omega-hw-nombre-lineas, 3)); /* sigue el interlineado real si se cambia en Elementor */
}
.omega-hw-product-prices { display: flex; align-items: baseline; gap: 7px; column-gap: 5px; flex-wrap: wrap; }
/* Sufijo de IVA ("i.v.i." por defecto, control del widget): chico y gris, en la
   misma línea del precio (opción C elegida, 2026-10-14). */
.omega-hw-product-prices .woocommerce-price-suffix { font-size: 11px; font-weight: 600; color: #64748b; white-space: nowrap; }
.omega-hw-product-prices .woocommerce-Price-amount { font-size: 16px; font-weight: 700; color: #0f1f5c; }
.omega-hw-product-prices del { text-decoration: none; }
.omega-hw-product-prices del .woocommerce-Price-amount { font-size: 12px; font-weight: 400; color: #64748b; text-decoration: line-through; }
.omega-hw-product-prices ins { text-decoration: none; }
/* Oferta (propuesta 1, 2026-10-14): "Antes ~~precio~~" chico arriba y el precio
   nuevo en rojo OMEGA abajo, con el sufijo de IVA junto al precio real. El orden
   lo arma omega_hw_reordenar_precio_oferta() en helpers.php. */
.omega-hw-product-prices-oferta { display: block; }
.omega-hw-precio-antes { font-size: 12px; line-height: 1.3; color: #64748b; font-variant-numeric: tabular-nums; }
.omega-hw-precio-ahora { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 5px; margin-top: 1px; }
.omega-hw-product-prices .omega-hw-precio-ahora .woocommerce-Price-amount { color: #C3002F; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* Píldora del % en la foto, en lugar de la palabra "Oferta". Blanco sobre rojo OMEGA = 6.2:1. */
.omega-hw-badge-descuento {
	display: inline-flex; align-items: center;
	height: 22px; padding: 0 9px;
	border-radius: 999px;
	background: #C3002F; color: #fff;
	font-size: 12px; font-weight: 800; letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 1px 2px rgba(15, 31, 92, 0.18);
}
.omega-hw-product-price-cotizar { font-size: 12px; font-weight: 600; color: #0369a1; }

/* El botón de acción se imprime dos veces (omega_hw_render_product_actions_buttons()
   llamado dos veces en helpers.php): una superpuesta a la foto (desktop) y
   otra como fila normal debajo del precio (mobile) -- acá solo se decide
   cuál de las dos copias se ve en cada breakpoint. */
.omega-hw-product-actions-mobile { display: none; }

/* Desde tablet la grilla ignora "Columnas" (4 y luego 2), así que el tope de
   "Ancho máximo de cada tarjeta" (calculado con esas columnas, y con el gap de
   16px de arriba) ya no cuadra: se apaga y la grilla usa todo el ancho. */
@media (max-width: 1024px) {
	.omega-hw-grid { grid-template-columns: repeat(4, 1fr); }
	.omega-hw-grid-seccion { max-width: none !important; }
}
@media (max-width: 768px) {
	.omega-hw-grid { grid-template-columns: repeat(2, 1fr); }

	/* En mobile el botón siempre está visible (sin hover que lo revele), así
	   que tapa permanentemente la parte de abajo de la foto todo el tiempo,
	   no solo al interactuar -- se saca de la superposición y se manda como
	   fila normal debajo del precio, liberando toda la foto. */
	.omega-hw-product-actions-desktop { display: none; }
	/* La copia móvil también lleva .omega-hw-product-actions, que la pone
	   flotando (absolute, bottom:0) sobre el fondo de la tarjeta: tapaba el
	   precio (visto en vivo 2026-10-14). Acá vuelve al flujo normal. */
	.omega-hw-product-actions-mobile {
		display: block;
		position: static;
		padding: 0;
		background: none;
		margin-top: 10px;
	}

	/* En móvil, 2 líneas si el control no dice otra cosa. */
	.omega-hw-product-name {
		-webkit-line-clamp: var(--omega-hw-nombre-lineas, 2);
		min-height: calc(1.35em * var(--omega-hw-nombre-lineas, 2));
		min-height: calc(1lh * var(--omega-hw-nombre-lineas, 2));
	}
}