/**
 * 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--hero {
	display: grid;
	gap: var(--rw-space-4);
	max-width: var(--rw-content-width);
}

.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;
}

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

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