/* =============================================================================
   Vibe WebApp — Design System
   Tokens (primitive → semantic) · App Shell · Feed Cards · WooCommerce · Mobile
   Light + dark theming. 4/8px spacing rhythm. 44pt touch targets.
   ui-ux-pro-max discipline: semantic tokens only, no raw hex in components.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Primitive tokens (raw values — never used directly in components)
   --------------------------------------------------------------------------- */
:root {
	/* Neutral ramp */
	--c-neutral-0:  #fafbff;
	--c-neutral-50: #f1f5fb;
	--c-neutral-100:#e2e8f0;
	--c-neutral-200:#cbd5e1;
	--c-neutral-300:#94a3b8;
	--c-neutral-400:#64748b;
	--c-neutral-500:#475569;
	--c-neutral-600:#334155;
	--c-neutral-700:#1e293b;
	--c-neutral-800:#131826;
	--c-neutral-900:#0a0e1a;

	/* Brand ramp */
	--c-indigo:  #6366f1;
	--c-indigo-2:#818cf8;
	--c-pink:    #ec4899;
	--c-pink-2:  #f472b6;
	--c-gold:    #f59e0b;
	--c-gold-2:  #fbbf24;
	--c-cyan:    #06b6d4;
	--c-cyan-2:  #22d3ee;
	--c-emerald: #10b981;
	--c-emerald-2:#34d399;
	--c-orange:  #f97316;
	--c-purple:  #a855f7;
	--c-red:     #ef4444;

	/* Spacing — 4/8 rhythm */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;
	--sp-10:40px;
	--sp-12:48px;
	--sp-16:64px;

	/* Radii */
	--r-xs: 6px;
	--r-sm: 10px;
	--r-md: 14px;
	--r-lg: 20px;
	--r-xl: 28px;
	--r-pill: 9999px;

	/* Layout */
	--shell-l: 260px;
	--shell-r: 320px;
	--top-h:   56px;
	--ticker-h:28px;
	--bnav-h:  64px;
	--maxw:    1440px;

	/* Type */
	--font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
	--font-body:    'Inter', system-ui, -apple-system, sans-serif;
	--font-mono:    'JetBrains Mono', 'Space Mono', ui-monospace, monospace;

	/* Easing */
	--ease-out: cubic-bezier(.22, 1, .36, 1);
	--ease-in:  cubic-bezier(.4, 0, 1, 1);
	--ease-inout: cubic-bezier(.4, 0, .2, 1);

	/* Z layers */
	--z-header: 50;
	--z-modal:  100;
	--z-bnav:   60;
}

/* -----------------------------------------------------------------------------
   2. Semantic tokens (light is default — components reference only these)
   --------------------------------------------------------------------------- */
:root,
.vibe-app[data-vibe-theme="light"],
.vibe-mode-light {
	--bg:           var(--c-neutral-0);
	--surface:      #ffffff;
	--surface-2:    var(--c-neutral-50);
	--surface-3:    var(--c-neutral-100);
	--border:       rgba(10, 14, 26, 0.10);
	--border-2:     rgba(10, 14, 26, 0.16);

	--text:         var(--c-neutral-900);
	--text-2:       rgba(10, 14, 26, 0.72);
	--text-3:       rgba(10, 14, 26, 0.50);
	--text-on-brand:#ffffff;

	--brand:        var(--c-indigo);
	--brand-soft:   rgba(99, 102, 241, 0.10);
	--brand-2:      var(--c-pink);
	--accent:       var(--c-gold);
	--info:         var(--c-cyan);
	--success:      var(--c-emerald);
	--warning:      var(--c-orange);
	--danger:       var(--c-red);

	--g-vibe:  linear-gradient(135deg, var(--c-indigo) 0%, var(--c-pink) 100%);
	--g-warm:  linear-gradient(135deg, var(--c-gold) 0%, var(--c-red) 100%);
	--g-cool:  linear-gradient(135deg, var(--c-cyan) 0%, var(--c-indigo) 100%);
	--g-lush:  linear-gradient(135deg, var(--c-emerald) 0%, var(--c-cyan) 100%);

	--shadow-sm: 0 1px 2px rgba(10, 14, 26, 0.06), 0 1px 3px rgba(10, 14, 26, 0.04);
	--shadow-md: 0 6px 20px rgba(10, 14, 26, 0.08), 0 2px 6px rgba(10, 14, 26, 0.04);
	--shadow-lg: 0 20px 50px rgba(10, 14, 26, 0.12), 0 8px 20px rgba(10, 14, 26, 0.06);
	--shadow-glow: 0 0 40px rgba(99, 102, 241, 0.30);

	/* Glass panels — left/right column chrome */
	--glass-bg:       linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.46) 100%);
	--glass-border:   rgba(255,255,255,0.55);
	--glass-blur:     18px;
	--glass-sat:      160%;
	--glass-shadow:   0 8px 32px rgba(10, 14, 26, 0.10), inset 0 1px 0 rgba(255,255,255,0.60);
	--glass-hover-bg: rgba(255,255,255,0.85);
	--glow-left:      0 0 32px rgba(99, 102, 241, 0.22);
	--glow-right:     0 0 32px rgba(6, 182, 212, 0.20);

	--scrim: rgba(10, 14, 26, 0.50);
	color-scheme: light;
}

/* Dark mode — explicit or via system preference */
@media (prefers-color-scheme: dark) {
	.vibe-app[data-vibe-theme="auto"],
	.vibe-mode-auto {
		--bg:        var(--c-neutral-900);
		--surface:   var(--c-neutral-800);
		--surface-2: #1a2033;
		--surface-3: #2a3142;
		--border:    rgba(248, 250, 252, 0.10);
		--border-2:  rgba(248, 250, 252, 0.18);

		--text:      #f8fafc;
		--text-2:    rgba(248, 250, 252, 0.75);
		--text-3:    rgba(248, 250, 252, 0.50);
		--text-on-brand: #ffffff;

		--brand-soft:rgba(99, 102, 241, 0.18);
		--shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
		--shadow-md: 0 6px 20px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.20);
		--shadow-lg: 0 20px 50px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.30);
		--shadow-glow: 0 0 50px rgba(99, 102, 241, 0.45);

		--glass-bg:       linear-gradient(180deg, rgba(26,32,51,0.62) 0%, rgba(26,32,51,0.38) 100%);
		--glass-border:   rgba(248,250,252,0.14);
		--glass-blur:     20px;
		--glass-sat:      140%;
		--glass-shadow:   0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
		--glass-hover-bg: rgba(42,49,66,0.72);
		--glow-left:      0 0 36px rgba(99, 102, 241, 0.30);
		--glow-right:     0 0 36px rgba(6, 182, 212, 0.28);

		--scrim:     rgba(0, 0, 0, 0.65);
		color-scheme: dark;
	}
}

.vibe-app[data-vibe-theme="dark"],
.vibe-mode-dark {
	--bg:        var(--c-neutral-900);
	--surface:   var(--c-neutral-800);
	--surface-2: #1a2033;
	--surface-3: #2a3142;
	--border:    rgba(248, 250, 252, 0.10);
	--border-2:  rgba(248, 250, 252, 0.18);
	--text:      #f8fafc;
	--text-2:    rgba(248, 250, 252, 0.75);
	--text-3:    rgba(248, 250, 252, 0.50);
	--brand-soft:rgba(99, 102, 241, 0.18);
	--shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20);
	--shadow-md: 0 6px 20px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.20);
	--shadow-lg: 0 20px 50px rgba(0,0,0,0.55), 0 8px 20px rgba(0,0,0,0.30);
	--shadow-glow: 0 0 50px rgba(99, 102, 241, 0.45);

	--glass-bg:       linear-gradient(180deg, rgba(26,32,51,0.62) 0%, rgba(26,32,51,0.38) 100%);
	--glass-border:   rgba(248,250,252,0.14);
	--glass-blur:     20px;
	--glass-sat:      140%;
	--glass-shadow:   0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
	--glass-hover-bg: rgba(42,49,66,0.72);
	--glow-left:      0 0 36px rgba(99, 102, 241, 0.30);
	--glow-right:     0 0 36px rgba(6, 182, 212, 0.28);

	--scrim:     rgba(0, 0, 0, 0.65);
	color-scheme: dark;
}

/* -----------------------------------------------------------------------------
   3. Base reset & typography
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body.vibe-app {
	position: relative;
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-bottom: 0;
	min-height: 100vh;
}

/* Ambient mesh backdrop — gives the frosted columns something to refract */
body.vibe-app::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(680px 480px at 6% 10%, rgba(99, 102, 241, 0.16), transparent 60%),
		radial-gradient(620px 460px at 96% 18%, rgba(6, 182, 212, 0.14), transparent 60%),
		radial-gradient(760px 560px at 50% 100%, rgba(236, 72, 153, 0.10), transparent 60%);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	color: var(--text);
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); }

a {
	color: var(--brand);
	text-decoration: none;
	transition: color .15s var(--ease-out);
}
a:hover { color: var(--brand-2); }

img, svg, video { max-width: 100%; height: auto; display: block; }

button {
	font: inherit;
	cursor: pointer;
}

/* Accessibility */
:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: var(--r-xs);
}

.vibe-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

.vibe-skip-link {
	position: absolute;
	top: -100px;
	left: var(--sp-4);
	background: var(--brand);
	color: var(--text-on-brand);
	padding: var(--sp-3) var(--sp-5);
	border-radius: var(--r-sm);
	z-index: 999;
	transition: top .2s var(--ease-out);
}
.vibe-skip-link:focus { top: var(--sp-4); }

.vibe-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   4. Header (sticky) — Ticker + Topbar
   --------------------------------------------------------------------------- */
.vibe-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
}

.vibe-ticker {
	height: var(--ticker-h);
	background: var(--g-vibe);
	color: #fff;
	overflow: hidden;
	display: flex;
	align-items: center;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.vibe-ticker-track {
	display: flex;
	gap: var(--sp-12);
	white-space: nowrap;
	animation: vibe-marquee 38s linear infinite;
	padding-left: 100%;
}
@keyframes vibe-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

.vibe-topbar {
	height: var(--top-h);
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--sp-4);
	display: grid;
	grid-template-columns: auto 1fr 2fr auto;
	gap: var(--sp-3);
	align-items: center;
}

.vibe-icon-btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: var(--r-sm);
	color: var(--text);
	position: relative;
	transition: background .15s var(--ease-out);
}
.vibe-icon-btn:hover { background: var(--surface-2); }
.vibe-icon-btn:active { background: var(--surface-3); }

.vibe-brand {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--text);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
}
.vibe-brand:hover { color: var(--text); }
.vibe-brand-mark {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-sm);
	background: var(--g-vibe);
	color: #fff;
	font-weight: 800;
}
.vibe-brand-name { white-space: nowrap; }
@media (max-width: 640px) { .vibe-brand-name { display: none; } }

.vibe-search {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	padding: 0 var(--sp-4);
	height: 40px;
	min-width: 0;
	transition: border-color .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
.vibe-search:focus-within {
	border-color: var(--brand);
	box-shadow: 0 0 0 4px var(--brand-soft);
}
.vibe-search input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: none;
	color: var(--text);
	font-size: 14px;
	outline: none;
}
.vibe-search input::placeholder { color: var(--text-3); }
.vibe-search-icon { color: var(--text-3); }

.vibe-topbar-actions {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
}

.vibe-theme-toggle .vibe-icon-moon { display: none; }
.vibe-app[data-vibe-theme="dark"]   .vibe-theme-toggle .vibe-icon-sun  { display: none; }
.vibe-app[data-vibe-theme="dark"]   .vibe-theme-toggle .vibe-icon-moon { display: inline-block; }
@media (prefers-color-scheme: dark) {
	.vibe-app[data-vibe-theme="auto"] .vibe-theme-toggle .vibe-icon-sun  { display: none; }
	.vibe-app[data-vibe-theme="auto"] .vibe-theme-toggle .vibe-icon-moon { display: inline-block; }
}

.vibe-cart-link { position: relative; }
.vibe-cart-count {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--r-pill);
	background: var(--brand-2);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.vibe-cart-count:empty,
.vibe-cart-count[data-cart-count="0"] { display: none; }

.vibe-avatar-link img {
	width: 32px;
	height: 32px;
	border-radius: var(--r-pill);
	border: 2px solid var(--border-2);
}

/* Hide menu toggle on desktop */
@media (min-width: 1024px) {
	.vibe-menu-toggle { display: none; }
	.vibe-topbar { grid-template-columns: auto 1fr 2fr auto; }
}
@media (max-width: 1023px) {
	.vibe-topbar { grid-template-columns: auto 1fr auto; padding-left: var(--sp-3); padding-right: var(--sp-3); }
	.vibe-search { display: none; }
}

/* -----------------------------------------------------------------------------
   5. App Shell (3-column grid)
   --------------------------------------------------------------------------- */
.vibe-app-shell {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: var(--sp-5) var(--sp-4) calc(var(--bnav-h) + var(--sp-6));
	display: grid;
	grid-template-columns: var(--shell-l) minmax(0, 1fr) var(--shell-r);
	gap: var(--sp-5);
	align-items: start;
}
@media (max-width: 1279px) {
	.vibe-app-shell { grid-template-columns: var(--shell-l) minmax(0, 1fr); }
	.vibe-sidebar-right { display: none; }
}
@media (max-width: 1023px) {
	.vibe-app-shell { grid-template-columns: minmax(0, 1fr); padding: var(--sp-3); padding-bottom: calc(var(--bnav-h) + var(--sp-6)); }
	.vibe-sidebar-left { display: none; }
	.vibe-sidebar-left.is-open {
		display: block;
		position: fixed;
		inset: var(--top-h) 0 0 0;
		z-index: 80;
		border-radius: 0;
		background: var(--glass-bg);
		-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
		backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
		overflow-y: auto;
		padding: var(--sp-5);
	}
}

/* -----------------------------------------------------------------------------
   6. Sidebars
   --------------------------------------------------------------------------- */
.vibe-sidebar {
	position: sticky;
	top: calc(var(--ticker-h) + var(--top-h) + var(--sp-4));
	max-height: calc(100vh - var(--top-h) - var(--ticker-h) - var(--sp-8));
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;

	/* Glass panel */
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-lg);
	padding: var(--sp-4);
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
	box-shadow: var(--glass-shadow);
	transition: box-shadow .25s var(--ease-out), background .25s var(--ease-out);
}

/* Thin frosted scrollbar (WebKit) */
.vibe-sidebar::-webkit-scrollbar { width: 6px; }
.vibe-sidebar::-webkit-scrollbar-track { background: transparent; }
.vibe-sidebar::-webkit-scrollbar-thumb {
	background: var(--border-2);
	border-radius: var(--r-pill);
}

.vibe-sidebar-left  { box-shadow: var(--glass-shadow), var(--glow-left); }
.vibe-sidebar-right { box-shadow: var(--glass-shadow), var(--glow-right); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.vibe-sidebar,
	.vibe-sidebar-left.is-open { background: var(--surface); }
	.vibe-widget { background: var(--surface); }
}

.vibe-nav-block { margin-bottom: var(--sp-6); }
.vibe-nav-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3);
	padding: 0 var(--sp-3);
	margin-bottom: var(--sp-2);
}
.vibe-nav-link {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-3);
	border-radius: var(--r-sm);
	color: var(--text-2);
	font-weight: 500;
	font-size: 14px;
	min-height: 44px;
	transition: background .15s var(--ease-out), color .15s var(--ease-out);
}
.vibe-nav-link:hover {
	background: var(--glass-hover-bg);
	color: var(--text);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.vibe-nav-link.is-active {
	background: var(--g-vibe);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 4px 18px rgba(99, 102, 241, 0.35), inset 0 1px 0 rgba(255,255,255,0.30);
}
.vibe-nav-link.is-active .vibe-icon { color: #fff; }
.vibe-nav-link-fed { position: relative; padding-left: var(--sp-6); }
.vibe-fed-dot {
	position: absolute;
	left: var(--sp-3);
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fed-color, var(--brand));
	box-shadow: 0 0 12px var(--fed-color, var(--brand));
}
.vibe-nav-link-meta {
	font-size: 11px;
	color: var(--text-3);
	margin-left: auto;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 130px;
}

/* Right sidebar widgets — nested glass chips on the frosted panel */
.vibe-widget {
	background: var(--glass-hover-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
	margin-bottom: var(--sp-4);
	-webkit-backdrop-filter: blur(calc(var(--glass-blur) / 2));
	backdrop-filter: blur(calc(var(--glass-blur) / 2));
	box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.25);
	transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out);
}
.vibe-widget:hover {
	box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.30);
	transform: translateY(-1px);
}
.vibe-widget-gradient {
	background: var(--g-vibe);
	border-color: rgba(255,255,255,0.35);
	color: #fff;
	box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,0.30);
}
.vibe-widget-eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	opacity: 0.85;
	margin-bottom: var(--sp-2);
}
.vibe-widget-affirmation {
	margin: 0;
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}
.vibe-widget-title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 var(--sp-4);
}
.vibe-widget-sub {
	margin: 0 0 var(--sp-3);
	font-size: 13px;
	color: var(--text-3);
}
.vibe-widget-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-2);
}
.vibe-widget-item a {
	display: grid;
	gap: 2px;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-sm);
	color: var(--text);
	transition: background .15s var(--ease-out);
}
.vibe-widget-item a:hover { background: var(--surface-2); color: var(--text); }
.vibe-widget-item-type {
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand);
	font-weight: 700;
}
.vibe-widget-item-title { font-size: 14px; font-weight: 500; }
.vibe-widget-item-empty { color: var(--text-3); font-size: 13px; padding: var(--sp-3); }

/* -----------------------------------------------------------------------------
   7. Hero (front-page)
   --------------------------------------------------------------------------- */
.vibe-hero {
	position: relative;
	border-radius: var(--r-xl);
	background: var(--surface);
	border: 1px solid var(--border);
	padding: clamp(var(--sp-6), 4vw, var(--sp-12));
	margin-bottom: var(--sp-6);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}
.vibe-hero-text { position: relative; z-index: 1; max-width: 640px; }
.vibe-hero-eyebrow {
	display: inline-block;
	padding: var(--sp-1) var(--sp-3);
	border-radius: var(--r-pill);
	background: var(--brand-soft);
	color: var(--brand);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: var(--sp-4);
}
.vibe-hero-title {
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.05;
	margin-bottom: var(--sp-4);
	font-weight: 800;
	letter-spacing: -0.02em;
}
.vibe-hero-grad {
	background: var(--g-vibe);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	display: block;
}
.vibe-hero-sub {
	font-size: clamp(15px, 1.4vw, 17px);
	color: var(--text-2);
	margin-bottom: var(--sp-6);
	max-width: 560px;
}
.vibe-hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.vibe-hero-art {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}
.vibe-hero-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.55;
}
.vibe-hero-orb-1 { width: 360px; height: 360px; background: var(--c-pink);    top: -100px; right: -80px; }
.vibe-hero-orb-2 { width: 260px; height: 260px; background: var(--c-indigo);  bottom: -80px; right: 200px; opacity: 0.45; }
.vibe-hero-orb-3 { width: 200px; height: 200px; background: var(--c-cyan);    top: 30%; right: 30%; opacity: 0.35; }

/* -----------------------------------------------------------------------------
   8. Section titles & bento
   --------------------------------------------------------------------------- */
.vibe-section-title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-3);
	margin: var(--sp-8) 0 var(--sp-4);
}

.vibe-bento { margin-bottom: var(--sp-8); }

/* -----------------------------------------------------------------------------
   9. Federation strip / grid
   --------------------------------------------------------------------------- */
.vibe-fed {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
}
.vibe-fed-strip {
	grid-auto-flow: column;
	grid-auto-columns: minmax(160px, 1fr);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: var(--sp-2);
}
.vibe-fed-grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.vibe-fed-list {
	grid-template-columns: 1fr;
}
.vibe-fed-item {
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 4px solid var(--fed-color, var(--brand));
	border-radius: var(--r-lg);
	padding: var(--sp-4);
	display: grid;
	gap: 4px;
	transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
	scroll-snap-align: start;
}
.vibe-fed-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.vibe-fed-icon {
	color: var(--fed-color, var(--brand));
	margin-bottom: var(--sp-1);
}
.vibe-fed-code {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	color: var(--fed-color, var(--brand));
	letter-spacing: 0.04em;
}
.vibe-fed-name { font-weight: 600; color: var(--text); font-size: 14px; }
.vibe-fed-role { font-size: 12px; color: var(--text-3); }

/* -----------------------------------------------------------------------------
   10. Feed tabs
   --------------------------------------------------------------------------- */
.vibe-tabs {
	display: flex;
	gap: var(--sp-2);
	overflow-x: auto;
	padding: var(--sp-3) 0;
	margin-bottom: var(--sp-4);
	scrollbar-width: none;
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: calc(var(--ticker-h) + var(--top-h));
	background: var(--bg);
	z-index: 10;
}
.vibe-tabs::-webkit-scrollbar { display: none; }
.vibe-tab {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-2);
	padding: var(--sp-2) var(--sp-4);
	border-radius: var(--r-pill);
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	min-height: 36px;
	transition: all .15s var(--ease-out);
}
.vibe-tab:hover { color: var(--text); border-color: var(--border-2); }
.vibe-tab.is-active {
	background: var(--g-vibe);
	color: #fff;
	border-color: transparent;
}

/* -----------------------------------------------------------------------------
   11. Feed Cards
   --------------------------------------------------------------------------- */
.vibe-feed-stream {
	display: grid;
	gap: var(--sp-5);
}

.vibe-feed-head { margin-bottom: var(--sp-4); }
.vibe-feed-title { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 var(--sp-1); }
.vibe-feed-title span { color: var(--brand); }
.vibe-feed-sub { color: var(--text-3); margin: 0; }

.vibe-card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: var(--sp-5);
	box-shadow: var(--shadow-sm);
	transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
	display: grid;
	gap: var(--sp-3);
	overflow: hidden;
	animation: vibe-fade-up .35s var(--ease-out) both;
}
.vibe-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--border-2);
}
@keyframes vibe-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Spine */
.vibe-card-spine {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 4px;
	background: var(--g-vibe);
	pointer-events: none;
}
.vibe-card[data-spine="brand"]   .vibe-card-spine { background: var(--g-vibe); }
.vibe-card[data-spine="brand-2"] .vibe-card-spine { background: linear-gradient(180deg, var(--c-pink), var(--c-pink-2)); }
.vibe-card[data-spine="accent"]  .vibe-card-spine { background: linear-gradient(180deg, var(--c-gold), var(--c-gold-2)); }
.vibe-card[data-spine="info"]    .vibe-card-spine { background: linear-gradient(180deg, var(--c-cyan), var(--c-cyan-2)); }
.vibe-card[data-spine="success"] .vibe-card-spine { background: linear-gradient(180deg, var(--c-emerald), var(--c-emerald-2)); }
.vibe-card[data-spine="warning"] .vibe-card-spine { background: linear-gradient(180deg, var(--c-orange), var(--c-gold)); }
.vibe-card[data-spine="danger"]  .vibe-card-spine { background: linear-gradient(180deg, var(--c-red), var(--c-pink)); }

.vibe-card-head {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}
.vibe-card-avatar img {
	width: 36px;
	height: 36px;
	border-radius: var(--r-pill);
	border: 2px solid var(--border-2);
}
.vibe-card-head-text {
	flex: 1;
	min-width: 0;
	display: grid;
}
.vibe-card-author {
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}
.vibe-card-meta {
	font-size: 12px;
	color: var(--text-3);
}
.vibe-card-type {
	color: var(--brand);
	font-weight: 600;
	text-transform: capitalize;
}
.vibe-card-menu {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	color: var(--text-3);
	border-radius: var(--r-sm);
}
.vibe-card-menu:hover { background: var(--surface-2); color: var(--text); }

.vibe-card-link { color: inherit; }
.vibe-card-title {
	font-size: 18px;
	line-height: 1.35;
	margin: 0;
	font-weight: 700;
	color: var(--text);
}
.vibe-card-text {
	margin: 0;
	color: var(--text-2);
	font-size: 14px;
	line-height: 1.55;
}

.vibe-card-media-link { display: block; border-radius: var(--r-md); overflow: hidden; }
.vibe-card-media {
	margin: 0;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface-2);
	aspect-ratio: 4/3;
}
.vibe-card-media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .4s var(--ease-out);
}
.vibe-card-media-link:hover .vibe-card-media img { transform: scale(1.04); }

.vibe-card-reel .vibe-card-media { aspect-ratio: 9/16; max-height: 520px; }

.vibe-card-price {
	font-family: var(--font-mono);
	font-size: 18px;
	font-weight: 700;
	color: var(--brand-2);
}
.vibe-card-price del { color: var(--text-3); margin-right: var(--sp-2); }

.vibe-card-actions {
	display: flex;
	gap: var(--sp-2);
	flex-wrap: wrap;
}

/* -----------------------------------------------------------------------------
   12. Buttons
   --------------------------------------------------------------------------- */
.vibe-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-5);
	border: 1px solid transparent;
	border-radius: var(--r-md);
	font-weight: 600;
	font-size: 14px;
	color: var(--text);
	background: var(--surface-2);
	cursor: pointer;
	min-height: 44px;
	transition: transform .1s var(--ease-out), background .15s var(--ease-out), box-shadow .15s var(--ease-out);
	text-decoration: none;
	user-select: none;
}
.vibe-btn:hover { transform: translateY(-1px); }
.vibe-btn:active { transform: translateY(0); }
.vibe-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.vibe-btn-primary {
	background: var(--g-vibe);
	color: #fff;
	box-shadow: var(--shadow-sm);
}
.vibe-btn-primary:hover { box-shadow: var(--shadow-md), var(--shadow-glow); color: #fff; }

.vibe-btn-ghost {
	background: transparent;
	color: var(--text);
	border-color: var(--border-2);
}
.vibe-btn-ghost:hover { background: var(--surface-2); }

.vibe-btn-pill { border-radius: var(--r-pill); }

.vibe-btn-sm { min-height: 36px; padding: var(--sp-2) var(--sp-4); font-size: 13px; }
.vibe-btn-lg { min-height: 52px; padding: var(--sp-4) var(--sp-6); font-size: 15px; }

/* -----------------------------------------------------------------------------
   13. WooCommerce
   --------------------------------------------------------------------------- */
.vibe-wc-subnav {
	display: flex;
	gap: var(--sp-2);
	overflow-x: auto;
	padding: var(--sp-2) 0 var(--sp-4);
	margin-bottom: var(--sp-4);
	border-bottom: 1px solid var(--border);
	scrollbar-width: none;
}
.vibe-wc-subnav::-webkit-scrollbar { display: none; }
.vibe-wc-subnav-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-2);
	border-radius: var(--r-pill);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	min-height: 36px;
}
.vibe-wc-subnav-link:hover {
	color: var(--text);
	border-color: var(--brand);
	background: var(--brand-soft);
}

/* Basic WooCommerce overrides — token-driven */
.vibe-wc .woocommerce ul.products li.product {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: var(--sp-4);
	transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
	box-shadow: var(--shadow-sm);
}
.vibe-wc .woocommerce ul.products li.product:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.vibe-wc .woocommerce ul.products li.product img { border-radius: var(--r-md); margin-bottom: var(--sp-3); }
.vibe-wc .woocommerce ul.products li.product .price {
	color: var(--brand-2);
	font-family: var(--font-mono);
	font-weight: 700;
}
.vibe-wc .woocommerce a.button,
.vibe-wc .woocommerce button.button,
.vibe-wc .woocommerce-page button.button {
	background: var(--g-vibe);
	color: #fff;
	border-radius: var(--r-pill);
	padding: var(--sp-3) var(--sp-5);
	font-weight: 600;
	border: none;
	min-height: 44px;
}
.vibe-wc .woocommerce a.button:hover { background: var(--g-vibe); filter: brightness(1.08); }

/* -----------------------------------------------------------------------------
   14. Mobile bottom nav (visible <= 1023px)
   --------------------------------------------------------------------------- */
.vibe-bnav {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	height: calc(var(--bnav-h) + env(safe-area-inset-bottom, 0px));
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--surface);
	border-top: 1px solid var(--border);
	box-shadow: 0 -8px 32px rgba(10, 14, 26, 0.08);
	z-index: var(--z-bnav);
	backdrop-filter: saturate(180%) blur(12px);
}
@media (max-width: 1023px) {
	.vibe-bnav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
}
.vibe-bnav-item {
	display: grid;
	place-items: center;
	gap: 2px;
	padding: var(--sp-2);
	color: var(--text-3);
	font-size: 11px;
	font-weight: 500;
	min-height: 44px;
	text-decoration: none;
	transition: color .15s var(--ease-out);
}
.vibe-bnav-item:hover { color: var(--text); }
.vibe-bnav-item.is-active { color: var(--brand); }
.vibe-bnav-item.is-active .vibe-icon { color: var(--brand); }
.vibe-bnav-fab {
	color: #fff;
	background: var(--g-vibe);
	border-radius: var(--r-pill);
	width: 52px;
	height: 52px;
	margin: -10px auto 0;
	box-shadow: var(--shadow-md);
	align-self: center;
}
.vibe-bnav-fab:hover { color: #fff; }
.vibe-bnav-fab span { display: none; }

/* -----------------------------------------------------------------------------
   15. Footer
   --------------------------------------------------------------------------- */
.vibe-footer {
	margin-top: var(--sp-12);
	padding: var(--sp-8) var(--sp-4);
	background: var(--surface);
	border-top: 1px solid var(--border);
}
.vibe-footer-inner {
	max-width: var(--maxw);
	margin: 0 auto;
	display: grid;
	gap: var(--sp-5);
}
.vibe-footer-brand { display: grid; gap: 2px; }
.vibe-footer-org {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 800;
	background: var(--g-vibe);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.vibe-footer-expansion { color: var(--text-3); font-size: 13px; }
.vibe-footer-meta {
	display: grid;
	gap: 4px;
	color: var(--text-3);
	font-size: 13px;
}
.vibe-footer-nav .vibe-footer-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: var(--sp-5);
	flex-wrap: wrap;
}
.vibe-footer-menu a { color: var(--text-2); font-size: 13px; }
.vibe-footer-menu a:hover { color: var(--brand); }

.vibe-footer-pay {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-wrap: wrap;
}
.vibe-pay-label { color: var(--text-3); font-size: 13px; }
.vibe-pay-chip {
	background: var(--brand-soft);
	border: 1px solid var(--glass-border);
	color: var(--brand);
	padding: 4px var(--sp-3);
	border-radius: var(--r-pill);
	font-size: 12px;
	font-weight: 600;
	font-family: var(--font-mono);
	box-shadow: 0 0 12px rgba(99, 102, 241, 0.18);
}
.vibe-pay-note { color: var(--text-3); font-size: 12px; }
.vibe-pay-grid { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.vibe-footer-bottom {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--border);
	color: var(--text-3);
	font-size: 12px;
	flex-wrap: wrap;
}
.vibe-footer-build { font-family: var(--font-mono); }

/* -----------------------------------------------------------------------------
   16. Empty / 404
   --------------------------------------------------------------------------- */
.vibe-empty {
	display: grid;
	place-items: center;
	text-align: center;
	gap: var(--sp-4);
	padding: var(--sp-12) var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}
.vibe-empty-icon {
	width: 96px; height: 96px;
	border-radius: var(--r-pill);
	background: var(--brand-soft);
	color: var(--brand);
	display: grid;
	place-items: center;
}
.vibe-empty-code {
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--text-3);
	letter-spacing: 0.1em;
}
.vibe-empty-title { font-size: 24px; }
.vibe-empty-text { color: var(--text-2); max-width: 440px; margin: 0; }
.vibe-empty-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center; }

/* -----------------------------------------------------------------------------
   17. Pagination
   --------------------------------------------------------------------------- */
.vibe-pagination, .pagination, .nav-links {
	display: flex;
	gap: var(--sp-2);
	justify-content: center;
	margin: var(--sp-6) 0;
	flex-wrap: wrap;
}
.vibe-pagination a, .vibe-pagination span,
.pagination a,    .pagination span,
.nav-links a,     .nav-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 var(--sp-3);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	color: var(--text-2);
	font-weight: 600;
	font-size: 14px;
}
.vibe-pagination .current { background: var(--g-vibe); color: #fff; border-color: transparent; }

/* -----------------------------------------------------------------------------
   18. Utilities
   --------------------------------------------------------------------------- */
.vibe-text-grad {
	background: var(--g-vibe);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* End of vibe.css */

/* ============================================================
 * 19. JS-driven micro-components  (scrim, toast, pulse, states)
 * ============================================================ */

.vibe-scrim {
	position: fixed; inset: 0;
	background: var(--scrim);
	z-index: var(--z-scrim, 80);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms var(--ease-out, ease);
}
.vibe-scrim.is-visible {
	opacity: 1;
	pointer-events: auto;
}
body.vibe-menu-open { overflow: hidden; }

.vibe-toast {
	position: fixed;
	left: 50%;
	bottom: calc( var(--bnav-h, 64px) + var(--sp-4, 16px) + env( safe-area-inset-bottom, 0px ) );
	transform: translate( -50%, 24px );
	background: var(--surface-3);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	padding: var(--sp-2, 8px) var(--sp-4, 16px);
	font: 500 14px/1.4 var(--font-body);
	box-shadow: var(--shadow-lg);
	z-index: var(--z-toast, 200);
	opacity: 0;
	pointer-events: none;
	transition: opacity 240ms var(--ease-out, ease), transform 240ms var(--ease-out, ease);
	max-width: min( 92vw, 360px );
	text-align: center;
}
.vibe-toast.is-visible {
	opacity: 1;
	transform: translate( -50%, 0 );
}

.vibe-pulse {
	animation: vibe-pulse 600ms var(--ease-out, ease);
}
@keyframes vibe-pulse {
	0%   { transform: scale( 1 );   }
	40%  { transform: scale( 1.25 ); }
	100% { transform: scale( 1 );   }
}

.vibe-add-cart.is-loading {
	opacity: 0.7;
	pointer-events: none;
	position: relative;
}
.vibe-add-cart.is-loading::after {
	content: "";
	display: inline-block;
	width: 14px; height: 14px;
	margin-left: var(--sp-2, 8px);
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: vibe-spin 700ms linear infinite;
	vertical-align: -2px;
}
.vibe-add-cart.is-success {
	background: var(--success, #10b981) !important;
	color: #fff !important;
}
.vibe-add-cart.is-error {
	background: var(--danger, #ef4444) !important;
	color: #fff !important;
}
@keyframes vibe-spin {
	to { transform: rotate( 360deg ); }
}

.vibe-card-like.is-liked {
	color: var(--c-pink, #ec4899);
}
.vibe-card-like.is-liked svg { fill: currentColor; }

.vibe-bnav-item.is-active {
	color: var(--brand);
}

@media ( prefers-reduced-motion: reduce ) {
	.vibe-toast,
	.vibe-pulse,
	.vibe-add-cart.is-loading::after,
	.vibe-scrim {
		animation: none !important;
		transition: none !important;
	}
}