/*
 * Canonical Ex-Guard rectangular action system.
 *
 * Apply .exg-button only to text CTAs and form actions. Search, menu, cart,
 * close, tab, swatch, and other icon/structural controls keep their own shape.
 */

body.exg-shell :is(
	.exg-button.exg-button,
	.exg-v2-button.exg-v2-button,
	.exg-pickup-button.exg-pickup-button,
	.exg-semi-button.exg-semi-button,
	.exg-consumer-button.exg-consumer-button
) {
	display: inline-flex;
	box-sizing: border-box;
	height: var(--exg-button-height);
	min-height: var(--exg-button-height);
	align-items: center;
	justify-content: center;
	gap: var(--exg-button-gap);
	padding: 0 var(--exg-button-padding-inline);
	border-width: var(--exg-button-border-width);
	border-style: solid;
	border-color: transparent;
	border-radius: var(--exg-button-radius);
	font-family: var(--exg-display) !important;
	font-size: var(--exg-type-action-size) !important;
	font-style: normal !important;
	font-weight: var(--exg-weight-action) !important;
	letter-spacing: 0.03em !important;
	line-height: var(--exg-type-action-line) !important;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase !important;
	cursor: pointer;
	filter: none;
	transition:
		background-color 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		transform 0.18s ease;
}

body.exg-shell .exg-button.exg-button--split {
	justify-content: space-between;
}

body.exg-shell .exg-button.exg-button--block {
	width: 100%;
}

body.exg-shell .exg-button[hidden] {
	display: none !important;
}

body.exg-shell :is(
	.exg-button.exg-button--primary,
	.exg-v2-button.exg-v2-button--yellow
) {
	border-color: var(--exg-gold);
	background: var(--exg-gold);
	color: var(--exg-black) !important;
}

body.exg-shell :is(
	.exg-button.exg-button--secondary,
	.exg-v2-button.exg-v2-button--ink
) {
	border-color: var(--exg-black);
	background: var(--exg-black);
	color: var(--exg-white) !important;
}

body.exg-shell :is(
	.exg-button.exg-button--outline,
	.exg-v2-button.exg-v2-button--light
) {
	border-color: var(--exg-black);
	background: transparent;
	color: var(--exg-black) !important;
}

body.exg-shell .exg-button.exg-button--secondary.exg-button--split > :last-child {
	color: var(--exg-gold);
}

@media (hover: hover) and (pointer: fine) {
	body.exg-shell :is(
		.exg-button.exg-button--primary,
		.exg-v2-button.exg-v2-button--yellow
	):not(:disabled):hover {
		border-color: var(--exg-black);
		background: var(--exg-black);
		color: var(--exg-white) !important;
		filter: none;
		transform: translateY(-1px);
	}

	body.exg-shell :is(
		.exg-button.exg-button--secondary,
		.exg-v2-button.exg-v2-button--ink
	):not(:disabled):hover {
		border-color: var(--exg-gold);
		background: var(--exg-gold);
		color: var(--exg-black) !important;
		filter: none;
		transform: translateY(-1px);
	}

	body.exg-shell :is(
		.exg-button.exg-button--outline,
		.exg-v2-button.exg-v2-button--light
	):not(:disabled):hover {
		border-color: var(--exg-black);
		background: var(--exg-black);
		color: var(--exg-white) !important;
		filter: none;
		transform: translateY(-1px);
	}

	body.exg-shell .exg-button.exg-button--secondary.exg-button--split:hover > :last-child {
		color: inherit;
	}
}

body.exg-shell :is(
	.exg-button.exg-button,
	.exg-v2-button.exg-v2-button,
	.exg-pickup-button.exg-pickup-button,
	.exg-semi-button.exg-semi-button,
	.exg-consumer-button.exg-consumer-button
):is(:disabled, [aria-disabled="true"]) {
	cursor: not-allowed;
	filter: saturate(0.35);
	opacity: 0.46;
	transform: none;
}

@media (max-width: 640px) {
	body.exg-shell :is(
		.exg-button.exg-button,
		.exg-v2-button.exg-v2-button,
		.exg-pickup-button.exg-pickup-button,
		.exg-semi-button.exg-semi-button,
		.exg-consumer-button.exg-consumer-button
	) {
		height: var(--exg-button-height-mobile);
		min-height: var(--exg-button-height-mobile);
		padding-inline: var(--exg-button-padding-inline-mobile);
		font-size: 14px !important;
	}
}

@media (max-width: 1020px) {
	body.exg-shell .exg-v2-dealer-cta.exg-button {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.exg-shell :is(
		.exg-button.exg-button,
		.exg-v2-button.exg-v2-button,
		.exg-pickup-button.exg-pickup-button,
		.exg-semi-button.exg-semi-button,
		.exg-consumer-button.exg-consumer-button
	) {
		transition: none;
	}
}