.agrilita-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	font-family: var( --wp--preset--font-family--primary );
	font-size: var( --wp--preset--font-size--button );
	line-height: 1.25rem;
	font-weight: var( --wp--custom--font-weight--medium );
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border: 1px solid transparent;
	transition: background-color 0.2s, color 0.2s, opacity 0.2s;
	text-decoration: none !important;
	border-radius: 50px !important;
	padding: 8px 16px ;
}

.agrilita-btn--default {
	background-color: transparent !important;
	border-color: transparent !important;
	color: var( --wp--preset--color--dark-blue ) !important;
	padding: 0 !important;
	/* font-weight can't transition smoothly — Manrope's weights are separate
	   static font files, so the browser just swaps them instantly. A "fake
	   bold" via text-shadow interpolates smoothly instead. */
	text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent;
	transition: background-color 0.2s, color 0.2s, text-shadow 0.25s ease;
}
.agrilita-btn--default:hover {
	text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor, 0 0.4px 0 currentColor, 0 -0.4px 0 currentColor;
}

.agrilita-btn--dark {
	background-color: var( --wp--preset--color--dark-blue ) !important;
	color: var( --wp--preset--color--white ) !important;
}
.agrilita-btn--dark:hover {
	background-color: var( --wp--preset--color--teal ) !important;
}

.agrilita-btn--teal {
	background-color: var( --wp--preset--color--teal ) !important;
	color: var( --wp--preset--color--white ) !important;
}
.agrilita-btn--teal:hover {
	background-color: var( --wp--preset--color--dark-blue ) !important;
}

.agrilita-btn--white {
	background-color: var( --wp--preset--color--white ) !important;
	color: var( --wp--preset--color--dark-blue ) !important;
}
.agrilita-btn--white:hover {
	background-color: var( --wp--preset--color--teal ) !important;
	color: var( --wp--preset--color--white ) !important;
}
.agrilita-btn--white:hover .agrilita-btn__icon-circle--white {
	background-color: var( --wp--preset--color--white );
	color: var( --wp--preset--color--teal );
}

.agrilita-btn--outline {
	background-color: transparent !important;
	color: var( --wp--preset--color--dark-blue ) !important;
	border: 1px solid var( --wp--preset--color--dark-blue ) !important;
}
.agrilita-btn--outline:hover {
	background-color: var( --wp--preset--color--dark-blue ) !important;
	color: var( --wp--preset--color--white ) !important;
}

.agrilita-btn--icon-arrow {
	gap: 0.5rem;
}

/* Buttons with the circular icon badge already get visual right-side
   spacing from the circle's own round shape — the standard 16px padding on
   top of that looks too wide, so tighten it just for this variant. */
.agrilita-btn:has( .agrilita-btn__icon-circle ) {
	padding-right: 8px;
}

.agrilita-btn__icon {
	width: 0.9375rem;
	height: 0.8125rem;
}

.agrilita-btn__icon--image {
	width: 1rem;
	height: 1rem;
	object-fit: contain;
}

.agrilita-btn__icon-circle .agrilita-btn__icon--image {
	width: 0.875rem;
	height: 0.875rem;
}

.agrilita-btn__icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
}

.agrilita-btn__icon-circle--default {
	background-color: var( --wp--preset--color--dark-blue );
	color: var( --wp--preset--color--white );
}
.agrilita-btn__icon-circle--dark {
	background-color: var( --wp--preset--color--white );
	color: var( --wp--preset--color--dark-blue );
}
.agrilita-btn__icon-circle--teal {
	background-color: var( --wp--preset--color--white );
	color: var( --wp--preset--color--teal );
}
.agrilita-btn__icon-circle--outline {
	background-color: var( --wp--preset--color--dark-blue );
	color: var( --wp--preset--color--white );
}
.agrilita-btn__icon-circle--white {
	background-color: var( --wp--preset--color--teal );
	color: var( --wp--preset--color--white );
}