/**
 * Checkout payment method list.
 *
 * WooCommerce renders each method as:
 *   <li>[radio] <label>title + icon</label> <div.payment_box>description</div></li>
 *
 * The theme sets that li to flex / nowrap, which causes two faults:
 *  1. A selected method's description box becomes a third item on the same row
 *     instead of dropping underneath, so it sits alongside the label.
 *  2. A gateway icon with no height limit will not shrink below its intrinsic
 *     width, so all the squeeze lands on the title text. The humm gateway ships
 *     a 175x35 png, which pushed "Buy Now, Pay Later with" to one word per line.
 *
 * Fix: let the row wrap, keep the description on its own line, and hold every
 * gateway icon to the same height Klarna already uses.
 */
.woocommerce-checkout ul.payment_methods li.wc_payment_method {
	flex-wrap: wrap;
	align-items: center;
	row-gap: 0.25rem;
}

.woocommerce-checkout ul.payment_methods li.wc_payment_method > label {
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
}

.woocommerce-checkout ul.payment_methods li.wc_payment_method > label img {
	max-height: 24px;
	width: auto;
	max-width: 120px;
	flex: 0 0 auto;
	margin: 0;
}

.woocommerce-checkout ul.payment_methods li.wc_payment_method .payment_box {
	flex: 0 0 100%;
}