/* WebRocket Commerce Framework — Design System (mobile-first) */
:root {
	--wrcf-primary: #0066cc;
	--wrcf-primary-hover: #0052a3;
	--wrcf-danger: #c0392b;
	--wrcf-success: #27ae60;
	--wrcf-border: #eef0f4;
	--wrcf-input-border: #c1c1c1;
	--wrcf-input-font-size: 1.0625rem;
	--wrcf-input-min-height: 48px;
	--wrcf-radius: 8px;
	--wrcf-font: system-ui, -apple-system, sans-serif;
}
[x-cloak] { display: none !important; }
.wrcf-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.625rem 1.25rem; font-family: var(--wrcf-font); font-size: 1rem; font-weight: 600; border: none; border-radius: var(--wrcf-radius); cursor: pointer; transition: background 0.15s; }
.wrcf-btn--primary { background: var(--wrcf-primary); color: #fff; }
.wrcf-btn--primary:hover { background: var(--wrcf-primary-hover); }
.wrcf-btn--secondary { background: #f3f4f6; color: #111; }
.wrcf-btn--ghost { background: transparent; border: 1px solid var(--wrcf-border); }
.wrcf-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; }
.wrcf-field__label { font-size: 0.9375rem; font-weight: 500; }
.wrcf-input,
.wrcf-select,
.wrcf-textarea {
	width: 100%;
	min-height: var(--wrcf-input-min-height);
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--wrcf-input-border) !important;
	border-radius: var(--wrcf-radius);
	font-size: var(--wrcf-input-font-size);
	line-height: 1.45;
	color: #1a1a2e;
	background: #fff;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.wrcf-textarea { min-height: 96px; resize: vertical; }
.wrcf-input:focus,
.wrcf-select:focus,
.wrcf-textarea:focus {
	outline: none;
	border-color: var(--wrcf-primary) !important;
	box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}
.wrcf-input::placeholder,
.wrcf-textarea::placeholder {
	color: #9ca3af;
}
.wrcf-checkbox, .wrcf-radio { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; cursor: pointer; }
.wrcf-badge { display: inline-block; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 600; border-radius: 999px; }
.wrcf-badge--sale { background: #fee2e2; color: var(--wrcf-danger); }
.wrcf-alert { padding: 0.75rem 1rem; border-radius: var(--wrcf-radius); margin-bottom: 1rem; }
.wrcf-alert--info { background: #eff6ff; color: #1e40af; }
.wrcf-alert--error { background: #fef2f2; color: var(--wrcf-danger); }
.wrcf-spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid var(--wrcf-border); border-top-color: var(--wrcf-primary); border-radius: 50%; animation: wrcf-spin 0.6s linear infinite; }
.wrcf-spinner--lg { width: 2rem; height: 2rem; }
@keyframes wrcf-spin { to { transform: rotate(360deg); } }
.wrcf-modal__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; }
.wrcf-modal__panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; padding: 1.5rem; border-radius: var(--wrcf-radius); z-index: 9999; max-width: 90vw; width: 480px; }
.wrcf-drawer { position: fixed; top: 0; right: 0; width: min(100%, 400px); height: 100%; background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,0.1); z-index: 9999; overflow-y: auto; }
.wrcf-tabs__nav { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--wrcf-border); overflow-x: auto; }
.wrcf-tabs__trigger { min-height: 44px; padding: 0.5rem 1rem; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.wrcf-tabs__trigger:focus-visible { outline: 2px solid var(--wrcf-primary); }
.wrcf-accordion__item { border-bottom: 1px solid var(--wrcf-border); }
.wrcf-accordion__title { min-height: 44px; padding: 0.75rem 0; cursor: pointer; font-weight: 600; list-style: none; }
.wrcf-accordion__body { padding-bottom: 1rem; }