/* ===========================================================
   Payment methods row — Figma 163:1172
   =========================================================== */

.payment-methods {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
}

.payment-methods__cod {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.payment-methods__icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.payment-methods__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.payment-methods__label {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--kw-ink-muted, #6b7280);
	white-space: nowrap;
}

/* Each mark keeps its own proportions — brand marks are not interchangeable
   boxes, so they are sized individually rather than squeezed into one height. */
.payment-methods__mark {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.payment-methods__mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.payment-methods__mark--paypal     { width: 45px; height: 15px; }
.payment-methods__mark--visa       { width: 37px; height: 11px; }
.payment-methods__mark--mastercard { width: 27px; height: 17px; }
.payment-methods__mark--maestro    { width: 29px; height: 18px; }

.payment-methods__sep {
	width: 1px;
	height: 16px;
	flex-shrink: 0;
	background: var(--kw-line, #dce2e5);
}

/* Wrapped onto a second line the separators would point at nothing. */
@media (max-width: 400px) {
	.payment-methods {
		gap: 10px;
	}
	.payment-methods__sep {
		display: none;
	}
}