/**
 * Ecommerce UI Components — shared brand design system.
 *
 * This file owns cross-component tokens and visual roles. Component geometry
 * remains in frontend.css so widgets can share a theme without sharing a layout.
 */

:root {
	--ecui-color-text: #111111;
	--ecui-color-muted: #777777;
	--ecui-color-border: #111111;
	--ecui-color-border-soft: #dddddd;
	--ecui-color-surface: #ffffff;
	--ecui-color-surface-subtle: #f7f7f7;
	--ecui-color-accent: #62d8cc;
	--ecui-color-accent-soft: #dcf8f5;
	--ecui-color-success: #278a66;
	--ecui-color-error: #b42318;
	--ecui-color-button: #000000;
	--ecui-color-button-text: #ffffff;

	--ecui-font-family: "acumin-pro-wide", sans-serif;
	--ecui-type-display-hero: clamp(1.875rem, 3vw, 3rem);
	--ecui-type-display-section: clamp(2rem, 4vw, 3.375rem);
	--ecui-type-display-panel: 1.75rem;
	--ecui-type-display-list: clamp(1.25rem, 2vw, 1.75rem);
	--ecui-type-display-list-mobile: 1rem;
	--ecui-type-title: 0.8125rem;
	--ecui-type-title-tab: 1.125rem;
	--ecui-type-body: 0.875rem;
	--ecui-type-body-small: 0.8125rem;
	--ecui-type-caption: 0.75rem;
	--ecui-type-label: 0.625rem;
	--ecui-type-label-nav: 0.6875rem;
	--ecui-type-price-hero: clamp(1.375rem, 2.2vw, 1.875rem);
	--ecui-type-price-feature: 1.5rem;
	--ecui-type-price-inline: 0.75rem;
	--ecui-type-price-micro: 0.6875rem;
	--ecui-type-button: 0.875rem;
	/* Compatibility aliases for component rules being migrated to semantic roles. */
	--ecui-font-size-xs: var(--ecui-type-caption);
	--ecui-font-size-sm: var(--ecui-type-body);
	--ecui-font-size-md: 1rem;
	--ecui-font-size-lg: var(--ecui-type-display-panel);
	--ecui-font-size-xl: var(--ecui-type-display-hero);
	--ecui-line-display: 1.08;
	--ecui-line-body: 1.65;
	--ecui-line-ui: 1.2;
	--ecui-weight-regular: 400;
	--ecui-weight-medium: 500;
	--ecui-weight-semibold: 600;
	--ecui-weight-bold: 700;
	--ecui-tracking-display: -0.02em;
	--ecui-tracking-label: 0.18em;
	--ecui-tracking-nav: 0.16em;
	--ecui-tracking-form: 0.12em;

	--ecui-space-0: 0;
	--ecui-space-0-5: 0.125rem;
	--ecui-space-1: 0.25rem;
	--ecui-space-1-5: 0.375rem;
	--ecui-space-2: 0.5rem;
	--ecui-space-2-5: 0.625rem;
	--ecui-space-3: 0.75rem;
	--ecui-space-3-5: 0.875rem;
	--ecui-space-4: 1rem;
	--ecui-space-5: 1.5rem;
	--ecui-space-6: 2rem;
	--ecui-space-7: 3rem;
	--ecui-space-8: 4rem;
	--ecui-space-9: 6rem;

	--ecui-section-padding-block: clamp(3rem, 7vw, 6.25rem);
	--ecui-section-padding-inline: clamp(1.5rem, 7vw, 6.25rem);
	--ecui-section-padding-block-mobile: 2.25rem;
	--ecui-section-padding-inline-mobile: 1.5rem;
	--ecui-split-gap: clamp(2.75rem, 6vw, 6rem);
	--ecui-panel-padding-block: 1.5rem;
	--ecui-panel-padding-inline: 2rem;
	--ecui-card-padding-tight: 0.5rem;
	--ecui-card-padding-comfortable: 1rem;
	--ecui-card-gap-tight: 0.125rem;
	--ecui-grid-gap-x: 1.5rem;
	--ecui-grid-gap-y: clamp(3rem, 6vw, 5rem);

	--ecui-radius-sm: 0;
	--ecui-radius-md: 0;
	--ecui-border-width: 1px;
	--ecui-border-width-strong: 2px;
	--ecui-transition-fast: 160ms ease;
	--ecui-container-width: 90rem;
	--ecui-focus-ring: 0 0 0 3px rgba(98, 216, 204, 0.35);
	--ecui-shadow-active: none;
}

.ecui-component {
	box-sizing: border-box;
	color: var(--ecui-color-text);
	font-family: var(--ecui-font-family);
	font-size: var(--ecui-type-body);
	font-weight: var(--ecui-weight-regular);
	line-height: var(--ecui-line-body);
}

.ecui-component *,
.ecui-component *::before,
.ecui-component *::after {
	box-sizing: border-box;
}

/* Keep theme list decorations out of structural widget lists. */
.ecui-component :where(ul[role="list"], ol[role="list"]) {
	list-style: none !important;
}

.ecui-component :where(ul[role="list"], ol[role="list"]) > li::marker {
	content: "";
}

.ecui-component :where(ul[role="list"], ol[role="list"]) > li::before {
	display: none !important;
	content: none !important;
}

.ecui-component :where(ul[role="list"], ol[role="list"]) > li::after {
	display: none !important;
	content: none !important;
}

.ecui-container {
	max-inline-size: var(--ecui-container-width);
	margin-inline: auto;
}

.ecui-heading {
	margin: 0;
	font-size: var(--ecui-type-display-section);
	font-weight: var(--ecui-weight-medium);
	line-height: var(--ecui-line-display);
	letter-spacing: var(--ecui-tracking-display);
}

.ecui-copy {
	color: var(--ecui-color-text);
	font-size: var(--ecui-type-body);
	font-weight: var(--ecui-weight-regular);
	line-height: var(--ecui-line-body);
}

.ecui-eyebrow,
.ecui-meta {
	color: var(--ecui-color-muted);
	font-size: var(--ecui-type-label);
	font-weight: var(--ecui-weight-semibold);
	line-height: var(--ecui-line-ui);
	letter-spacing: var(--ecui-tracking-label);
	text-transform: uppercase;
}

.ecui-price {
	color: var(--ecui-color-text);
	font: inherit;
	line-height: var(--ecui-line-ui);
}

.ecui-price del {
	margin-inline-start: var(--ecui-space-1-5);
	color: var(--ecui-color-muted);
	font-size: 0.8em;
}

.ecui-price ins {
	text-decoration: none;
}

.ecui-component .ecui-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ecui-space-2);
	min-block-size: 44px;
	min-inline-size: 44px;
	padding: var(--ecui-space-3) var(--ecui-space-5);
	color: var(--ecui-color-button-text);
	background: var(--ecui-color-button);
	border: var(--ecui-border-width) solid var(--ecui-color-button);
	border-radius: 50px;
	font-family: var(--ecui-font-family);
	font-size: var(--ecui-type-button);
	font-weight: var(--ecui-weight-medium);
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--ecui-transition-fast), color var(--ecui-transition-fast);
}

.ecui-component .ecui-button:hover,
.ecui-component .ecui-button:focus-visible {
	color: var(--ecui-color-text);
	background: var(--ecui-color-surface);
}

.ecui-component .ecui-button:focus-visible,
.ecui-component .ecui-read-more:focus-visible {
	outline: none;
	box-shadow: var(--ecui-focus-ring);
}

.ecui-component .ecui-button[disabled],
.ecui-component .ecui-button[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

.ecui-component button,
.ecui-component [role="button"],
.ecui-component input[type="button"],
.ecui-component input[type="submit"] {
	border-radius: 0;
}

.ecui-component .ecui-button--outline {
	color: var(--ecui-color-text);
	background: var(--ecui-color-surface);
	border-color: var(--ecui-color-button);
}

.ecui-component .ecui-button--outline:hover,
.ecui-component .ecui-button--outline:focus-visible {
	color: var(--ecui-color-button-text);
	background: var(--ecui-color-button);
}

.ecui-component .ecui-button--ghost {
	color: var(--ecui-color-button-text);
	background: var(--ecui-color-button);
	border-color: var(--ecui-color-button);
}

.ecui-component .ecui-input,
.ecui-component .ecui-select {
	inline-size: 100%;
	min-block-size: 44px;
	padding: var(--ecui-space-2) var(--ecui-space-3);
	color: var(--ecui-color-text);
	background: var(--ecui-color-surface);
	border: var(--ecui-border-width) solid var(--ecui-color-border-soft);
	border-radius: 0;
	font-family: var(--ecui-font-family);
	font-size: var(--ecui-type-body);
}

.ecui-component .ecui-input:focus-visible,
.ecui-component .ecui-select:focus-visible {
	outline: none;
	border-color: var(--ecui-color-accent);
	box-shadow: var(--ecui-focus-ring);
}

.ecui-component .ecui-read-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 44px;
	padding: var(--ecui-space-3) var(--ecui-space-5);
	color: var(--ecui-color-text);
	background: var(--ecui-color-surface);
	border: var(--ecui-border-width) solid var(--ecui-color-border);
	border-radius: 50px;
	font-family: var(--ecui-font-family);
	font-size: var(--ecui-type-label-nav);
	font-weight: var(--ecui-weight-semibold);
	line-height: 1;
	letter-spacing: var(--ecui-tracking-nav);
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color var(--ecui-transition-fast), color var(--ecui-transition-fast);
}

.ecui-component .ecui-read-more:hover,
.ecui-component .ecui-read-more:focus-visible {
	color: var(--ecui-color-button-text);
	background: var(--ecui-color-button);
}

@media (max-width: 767px) {
	:root {
		--ecui-section-padding-block: var(--ecui-section-padding-block-mobile);
		--ecui-section-padding-inline: var(--ecui-section-padding-inline-mobile);
		--ecui-panel-padding-inline: var(--ecui-space-5);
		--ecui-split-gap: var(--ecui-space-6);
	}
}