@layer components {
	.btn {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		height: var(--btn-md);
		padding: 0 20px;
		font-family: var(--font-display);
		font-size: var(--fs-ui);
		font-weight: var(--fw-semi);
		letter-spacing: var(--ls-ui);
		line-height: 1;
		text-transform: uppercase;
		white-space: nowrap;
		border: var(--bw-hair) solid transparent;
		transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
	}
	.btn > span { padding-top: 1px; }
	.btn__arrow { width: 1.05em; height: 1.05em; }
	.btn--sm { height: var(--btn-sm); padding-inline: 16px; }
	.btn--lg { height: var(--btn-lg); padding-inline: 24px; }

	.btn--fill { background: var(--red-btn); border-color: var(--red-btn); color: #fff; }
	.btn--fill:hover { background: var(--red-btn-hover); border-color: var(--red-btn-hover); }

	.btn--fill-dark { background: var(--red-btn-dark); border-color: var(--red-btn-dark); color: #fff; }
	.btn--fill-dark:hover { background: var(--red-btn); border-color: var(--red-btn); }

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

	/* Red caps text link with arrow (secondary cards, rail) */
	.textlink {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: var(--fs-label);
		font-weight: var(--fw-bold);
		letter-spacing: var(--ls-ui);
		text-transform: uppercase;
		color: var(--red);
	}
	.textlink .icon { width: 1.1em; height: 1.1em; }
}