/* ===== Retinol: Revinage (Right Column) ===== */

.retinol-revinage {
	font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	color: #101828;
}

.retinol-revinage__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	padding: 0;

	width: 100%;
	max-width: 560px; /* fluid лимит */
}

/* Badge (pill) */
.retinol-revinage__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;

	background: #fdf2fa;
	border: 1px solid rgba(150, 0, 72, 0.1);
	border-radius: 9999px;
}

.retinol-revinage__badge-text {
	display: block;
	text-align: center;

	font-weight: 500; /* Text sm/Medium */
	font-size: 14px;
	line-height: 20px; /* 143% */
	color: #960048;

	white-space: nowrap;
}

/* Headings + text */
.retinol-revinage__textblock {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;

	width: 100%;
	max-width: 560px;
}

/* Heading */
.retinol-revinage__heading {
	margin: 0;
	color: #101828;

	font-weight: 600; /* Display sm/Semibold */
	font-size: 30px;
	line-height: 38px; /* 127% */
}

/* Supporting text */
.retinol-revinage__supporting {
	color: #475467;
	font-weight: 400; /* Text lg/Regular */
	font-size: 18px;
	line-height: 28px; /* 156% */
}

.retinol-revinage__supporting p {
	margin: 0 0 12px;
}
.retinol-revinage__supporting p:last-child {
	margin-bottom: 0;
}

/* Actions (скрыты по ТЗ) */
.retinol-revinage__actions {
	display: none;
	gap: 12px;
	width: 252px;
	height: 48px; /* можно убрать при реальном использовании */
}

/* ===== Адаптивность ===== */
@media (max-width: 640px) {
	.retinol-revinage__content {
		max-width: 100%;
	}

	.retinol-revinage__badge-text {
		font-size: 13px;
		line-height: 18px;
	}

	.retinol-revinage__heading {
		font-size: 24px;
		line-height: 32px;
	}

	.retinol-revinage__supporting {
		font-size: 16px;
		line-height: 24px;
	}
}