.bl-payment-body { display: grid; gap: 1.5rem; }

.bl-payment-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.bl-payment-item {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.25rem;
	background: var(--bl-surface);
	border: 1px solid var(--bl-border);
	border-radius: var(--bl-card-radius);
	box-shadow: var(--bl-shadow, none);
	min-width: 0;
}

.bl-payment-item--popular {
	border-color: color-mix(in srgb, var(--bl-accent) 55%, transparent);
	background: color-mix(in srgb, var(--bl-accent) 7%, var(--bl-surface));
}

.bl-payment-item__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--bl-card-radius);
	background: color-mix(in srgb, var(--bl-accent) 12%, transparent);
	color: var(--bl-accent);
}
.bl-payment-item__icon img,
.bl-payment-icon { width: 1.6rem; height: 1.6rem; display: block; object-fit: contain; }

.bl-payment-item__body { min-width: 0; }
.bl-payment-item__title { margin: 0; font-size: 1.0625rem; font-weight: 650; overflow-wrap: anywhere; }
.bl-payment-item__text { margin: .4em 0 0; font-size: .9375rem; line-height: 1.5; color: var(--bl-muted); overflow-wrap: anywhere; }

.bl-payment-item__badge {
	display: inline-block;
	margin-top: .45em;
	padding: .2em .7em;
	border-radius: var(--bl-radius-pill);
	background: color-mix(in srgb, var(--bl-accent) 16%, transparent);
	color: var(--bl-accent);
	font-size: .7rem;
	font-weight: 650;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ---------- раскладка: сетка карточек ---------- */

@media (min-width: 700px) {
	.bl-payment--grid .bl-payment-list { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

/* ---------- раскладка: ряд иконок с подписями ---------- */

.bl-payment--row .bl-payment-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem .75rem;
}
@media (min-width: 700px) {
	.bl-payment--row .bl-payment-list { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
}
.bl-payment--row .bl-payment-item {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .75rem;
	padding: 1rem .5rem;
	background: none;
	border: 0;
	box-shadow: none;
}
.bl-payment--row .bl-payment-item--popular { background: none; }
.bl-payment--row .bl-payment-item__icon { width: 3.5rem; height: 3.5rem; }
.bl-payment--row .bl-payment-icon,
.bl-payment--row .bl-payment-item__icon img { width: 1.9rem; height: 1.9rem; }
.bl-payment--row .bl-payment-item__title { font-size: .9375rem; }
.bl-payment--row .bl-payment-item__text { font-size: .8125rem; }

/* ---------- раскладка: две колонки ---------- */

/* Без этого список способов в раскладке «две колонки» шёл в один столбец
   на всю ширину — и при одной длинной строке, и без блока рассрочки. */
@media (min-width: 700px) {
	.bl-payment--split .bl-payment-list { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
}

@media (min-width: 900px) {
	.bl-payment--split.bl-payment--has-installment .bl-payment-body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
		gap: 2rem;
		align-items: start;
	}
}

/* ---------- рассрочка ---------- */

.bl-payment-installment {
	padding: 1.5rem;
	border-radius: var(--bl-card-radius);
	border: 1px solid color-mix(in srgb, var(--bl-accent) 35%, transparent);
	background: color-mix(in srgb, var(--bl-accent) 6%, transparent);
	min-width: 0;
}
.bl-payment-installment__title { margin: 0 0 .4em; font-size: 1.25rem; font-weight: 700; }
.bl-payment-installment__text { margin: 0 0 1rem; color: var(--bl-muted); font-size: .9375rem; line-height: 1.55; }

.bl-payment-plans { display: grid; gap: .75rem; }
@media (min-width: 700px) {
	.bl-payment--grid .bl-payment-plans,
	.bl-payment--row .bl-payment-plans { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
}

.bl-payment-plan {
	padding: 1rem;
	border-radius: var(--bl-card-radius);
	background: var(--bl-surface);
	border: 1px solid var(--bl-border);
	min-width: 0;
}
.bl-payment-plan__months {
	display: block;
	font-size: 1.5rem;
	font-weight: 750;
	line-height: 1.1;
	color: var(--bl-accent);
	margin-bottom: .5rem;
}
.bl-payment-plan__months span { font-size: .875rem; font-weight: 600; }

.bl-payment-plan__rows { margin: 0; display: grid; gap: .3rem; font-size: .875rem; }
.bl-payment-plan__rows > div { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: space-between; }
.bl-payment-plan__rows dt { color: var(--bl-muted); margin: 0; }
.bl-payment-plan__rows dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }

.bl-payment-note {
	margin: 1rem 0 0;
	font-size: .75rem;
	line-height: 1.5;
	color: var(--bl-muted);
	opacity: .9;
}

.bl-payment-cta { margin-top: 2rem; }