/**
 * ReactWoo Component System — design tokens + base layout.
 * Namespace: rw- / data-rw-component. No generic .button/.hero selectors.
 */

:root {
	--rw-color-text: #111827;
	--rw-color-accent: #0f766e;
	--rw-color-surface: #ffffff;
	--rw-font-sans: inherit;
	--rw-font-display: inherit;
	--rw-radius-md: 12px;
	--rw-space-2: 8px;
	--rw-space-4: 16px;
	--rw-space-6: 24px;
	--rw-content-width: 72rem;
}

.rw-component {
	color: var(--rw-color-text);
	font-family: var(--rw-font-sans);
	box-sizing: border-box;
}

.rw-component[data-rw-typography="display"] {
	font-family: var(--rw-font-display);
}

.rw-component[data-rw-color="accent"] {
	color: var(--rw-color-accent);
}

.rw-component[data-rw-color="surface"] {
	background: var(--rw-color-surface);
}

.rw-component[data-rw-align="center"] {
	text-align: center;
}

.rw-component[data-rw-align="end"] {
	text-align: right;
}

.rw-component[data-rw-spacing="compact"] {
	--rw-space-2: 4px;
	--rw-space-4: 8px;
	--rw-space-6: 12px;
}

.rw-component[data-rw-spacing="spacious"] {
	--rw-space-2: 12px;
	--rw-space-4: 24px;
	--rw-space-6: 36px;
}

.rw-component[data-rw-shape="pill"] {
	--rw-radius-md: 999px;
}

.rw-component[data-rw-shape="square"] {
	--rw-radius-md: 0;
}

.rw-component--hero {
	display: grid;
	gap: var(--rw-space-4);
	max-width: var(--rw-content-width);
}

.rw-component--hero[data-rw-layout="split"] {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
}

.rw-component--hero .rw-hero__headline {
	font-family: var(--rw-font-display);
	margin: 0 0 var(--rw-space-2);
}

.rw-component--hero .rw-hero__subheadline {
	margin: 0 0 var(--rw-space-4);
}

.rw-component--hero .rw-hero__cta {
	display: inline-block;
	padding: var(--rw-space-2) var(--rw-space-4);
	border-radius: var(--rw-radius-md);
	background: var(--rw-color-accent);
	color: #fff;
	text-decoration: none;
}

.rw-component--hero .rw-hero__cta:focus-visible {
	outline: 2px solid var(--rw-color-accent);
	outline-offset: 2px;
}

.rw-component--cta .rw-cta__link {
	color: var(--rw-color-accent);
}

.rw-component--notice {
	padding: var(--rw-space-2) var(--rw-space-4);
	border-radius: var(--rw-radius-md);
	background: var(--rw-color-surface);
}

.rw-component--product-rail .rw-product-rail__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rw-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rw-component--popup .rw-popup__summary {
	cursor: pointer;
}

.rw-component--hero .rw-hero__image {
	max-width: 100%;
	height: auto;
	border-radius: var(--rw-radius-md);
}

@media (max-width: 782px) {
	.rw-component--hero {
		gap: var(--rw-space-2);
	}

	.rw-component--hero[data-rw-layout="split"],
	.rw-component[data-rw-responsive="stack_mobile"] {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rw-component * {
		animation: none !important;
		transition: none !important;
	}
}