/**
 * El bloque anterior usaba `align-items:center; text-align:center`, asi que quedaba centrado
 * en medio de una ficha alineada a la izquierda. Aqui se alinea con el precio y el boton,
 * que es donde el ojo ya esta mirando.
 */
.hwp-afterpay {
	margin: 10px 0 14px;
	padding: 10px 12px;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
	background: #fafafa;
	text-align: left;
	max-width: 34em;          /* una linea de texto larga se lee mal: se corta antes */
	font-size: 14px;
	line-height: 1.45;
	color: #1a1a1a;
}

.hwp-afterpay[hidden] {
	display: none;
}

.hwp-afterpay__line {
	margin: 0;
	font-weight: 400;
}

.hwp-afterpay__amount {
	font-weight: 700;
	white-space: nowrap;      /* "$175.00" nunca debe partirse en dos lineas */
}

.hwp-afterpay__with {
	white-space: nowrap;      /* la marca nunca queda colgando sola en la linea siguiente */
}

.hwp-afterpay__brand {
	font-weight: 700;
	color: #0a6b4f;
}

.hwp-afterpay__fine {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #666;
}

/* Movil: sin marco lateral, para no estrechar todavia mas la columna de texto. */
@media (max-width: 600px) {
	.hwp-afterpay {
		padding: 9px 0;
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		background: transparent;
		max-width: none;
		font-size: 13.5px;
	}

	.hwp-afterpay__fine {
		font-size: 11.5px;
	}
}

/* Respeta el modo oscuro del tema si lo hubiera, sin imponer colores fijos. */
@media (prefers-color-scheme: dark) {
	.hwp-afterpay {
		background: rgba( 255, 255, 255, 0.04 );
		border-color: rgba( 255, 255, 255, 0.14 );
		color: inherit;
	}

	.hwp-afterpay__fine {
		color: inherit;
		opacity: 0.72;
	}

	.hwp-afterpay__brand {
		color: #38c39b;
	}
}