.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1.2rem;
	width: 11rem;
	height: 5rem;
	padding: 2rem 3rem;
	background-color: var(--color-accent);
	color: var(--color-white);
	border-radius: 0;
	font-size: 1.2rem;
	line-height: 1;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.button:hover {
	background-color: var(--color-accent-dark);
}

.button--hug {
	width: auto;
}

.button--outline {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: var(--color-white);
}

.button--outline:hover {
	background-color: transparent;
	border-color: var(--color-white);
}

/* Кнопка «текст + иконка после текста» (models__cta, card-dark__cta,
   page-hero__cta): justify-content:center у .button центрирует весь ряд
   «текст + gap + иконка» целиком, из-за чего сам текст визуально смещён
   влево от истинного центра кнопки на половину (ширина иконки + gap).
   ::before — невидимый спейсер той же ширины, что и иконка (везде 0.8rem),
   зеркально с другой стороны — текст остаётся по центру независимо от неё. */
.button--icon-end::before {
	content: "";
	width: 0.8rem;
	flex-shrink: 0;
	visibility: hidden;
}

@media (max-width: 480px) {
	.button {
		width: 100%;
	}
}