/**
 * Commerce Storefront neutral controls and global interaction states.
 *
 * Geometry and semantics are parent-owned. Brand colors and approved public
 * typography roles remain replaceable by a child through :root variables.
 */

:where(a, button, input, select, textarea):focus-visible {
	outline: var(--commerce-focus-ring-width, 2px) solid var(--commerce-color-focus);
	outline-offset: var(--commerce-focus-ring-offset, 3px);
}

.commerce-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: max(var(--commerce-touch-target), var(--commerce-button-height));
	padding-inline: var(--commerce-button-padding-inline);
	border: 0;
	border-radius: var(--commerce-radius-control);
	color: var(--commerce-color-on-action);
	background: var(--commerce-color-action);
	font-family: var(--commerce-font-body);
	font-weight: var(--commerce-font-weight-strong);
	letter-spacing: var(--commerce-letter-spacing-button);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.commerce-control {
	min-block-size: var(--commerce-control-standard);
	padding-inline: var(--commerce-field-padding-inline);
	border: var(--commerce-border-width) solid var(--commerce-color-field-border);
	border-radius: var(--commerce-radius-control);
	color: var(--commerce-color-field-text);
	background: var(--commerce-color-field);
}

.commerce-control--compact { min-block-size: var(--commerce-control-compact); }
.commerce-control--large { min-block-size: var(--commerce-control-large); }

.commerce-icon-control {
	display: inline-grid;
	place-items: center;
	min-inline-size: var(--commerce-touch-target);
	min-block-size: var(--commerce-touch-target);
	padding: 0;
	border-radius: 50%;
}

.commerce-surface {
	border: var(--commerce-border-width) solid var(--commerce-color-border);
	border-radius: var(--commerce-radius-surface);
	background: var(--commerce-color-surface);
}

.commerce-surface--raised {
	background: var(--commerce-color-surface-raised);
	box-shadow: var(--commerce-shadow-raised);
}

.commerce-card {
	border-radius: var(--commerce-radius-card);
	background: var(--commerce-color-surface-raised);
	box-shadow: var(--commerce-shadow-card);
}

:where(.commerce-control, .commerce-button, .commerce-icon-control) {
	transition:
		border-color var(--commerce-motion-duration-fast, 200ms) var(--commerce-motion-easing-standard, ease),
		background-color var(--commerce-motion-duration-fast, 200ms) var(--commerce-motion-easing-standard, ease),
		color var(--commerce-motion-duration-fast, 200ms) var(--commerce-motion-easing-standard, ease),
		opacity var(--commerce-motion-duration-fast, 200ms) var(--commerce-motion-easing-standard, ease);
}

:where(.commerce-control, .commerce-button, .commerce-icon-control):is(:disabled, [aria-disabled="true"]) {
	cursor: not-allowed;
	opacity: 0.6;
}

:where(.commerce-control, .commerce-button, .commerce-icon-control)[aria-busy="true"] {
	cursor: progress;
}

@media (hover: hover) and (pointer: fine) {
	.commerce-button:not(:disabled, [aria-disabled="true"]):hover {
		background: var(--commerce-color-action-hover);
	}
}

.commerce-feedback {
	padding: var(--_commerce-space-sm) var(--_commerce-space-md);
	border: var(--commerce-border-width) solid currentcolor;
	border-radius: var(--commerce-radius-control);
	color: var(--commerce-color-text);
	background: var(--commerce-color-surface);
}

.commerce-feedback--success {
	color: var(--commerce-color-success);
	background: var(--commerce-color-success-surface);
}

.commerce-feedback--warning {
	color: var(--commerce-color-warning);
	background: var(--commerce-color-warning-surface);
}

.commerce-feedback--danger {
	color: var(--commerce-color-danger);
	background: var(--commerce-color-danger-surface);
}

.no-js [data-js-only] { display: none !important; }
.js [data-no-js-only] { display: none !important; }

@media (forced-colors: active) {
	:where(.commerce-control, .commerce-button, .commerce-icon-control):focus-visible {
		outline: 2px solid CanvasText;
	}

	.commerce-feedback { border-color: CanvasText; }
}