:root{
	--kps-bg: #f7f8fb;
	--kps-card: rgba(255,255,255,.86);
	--kps-card-solid: #ffffff;
	--kps-text: #0f172a;
	--kps-muted: rgba(15,23,42,.62);
	--kps-border: rgba(15,23,42,.10);
	--kps-blue: #1d74d6;
	--kps-blue2: #00c6fb;

	--kps-radius: 18px;
	--kps-shadow: 0 18px 55px rgba(15,23,42,.08);
	--kps-shadow-hover: 0 26px 75px rgba(15,23,42,.12);
}

.kps-body{
	background:
		radial-gradient(1200px 600px at 10% 10%, rgba(29,116,214,.10), transparent 55%),
		radial-gradient(900px 520px at 85% 18%, rgba(0,198,251,.10), transparent 55%),
		radial-gradient(900px 520px at 50% 95%, rgba(29,116,214,.06), transparent 55%),
		var(--kps-bg);
	color: var(--kps-text);
	font-family: 'Prompt', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.kps-title{
	margin:0;
	font-size: 1.9rem;
	font-weight: 900;
	letter-spacing: .2px;
}
.kps-subtitle{
	margin: 10px 0 0;
	color: var(--kps-muted);
	line-height: 1.8;
}

/* Grid */
.kps-card-grid{
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	padding: 18px 18px 40px;
}

/* Card */
.kps-card-link{
	position: relative;
	display:flex;
	align-items:center;
	gap: 14px;
	padding: 16px 16px;
	border-radius: var(--kps-radius);
	text-decoration: none;
	color: inherit;
	border: 1px solid var(--kps-border);
	background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--kps-shadow);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
	isolation: isolate;
	overflow: hidden;
}

.kps-card-link::before{
	content:"";
	position:absolute;
	inset:-1px;
	background:
		radial-gradient(600px 220px at 0% 0%, rgba(29,116,214,.22), transparent 55%),
		radial-gradient(520px 240px at 100% 20%, rgba(0,198,251,.16), transparent 55%);
	opacity: 0;
	transition: opacity .18s ease;
	z-index: 0;
}

.kps-card-link:hover{
	transform: translateY(-4px);
	box-shadow: var(--kps-shadow-hover);
	border-color: rgba(29,116,214,.28);
	background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84));
}

.kps-card-link:hover::before{ opacity: 1; }

.kps-card-link:focus-visible{
	outline: none;
	box-shadow: 0 0 0 4px rgba(29,116,214,.18), var(--kps-shadow-hover);
	border-color: rgba(29,116,214,.40);
}

.kps-card-ico{
	position: relative;
	z-index: 1;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display:flex;
	align-items:center;
	justify-content:center;
	background: linear-gradient(135deg, rgba(29,116,214,.14), rgba(0,198,251,.10));
	border: 1px solid rgba(29,116,214,.16);
	color: var(--kps-blue);
	box-shadow: 0 10px 24px rgba(29,116,214,.10);
}

.kps-card-ico i{ font-size: 1.35rem; }

.kps-card-meta{
	position: relative;
	z-index: 1;
	min-width:0;
	display:flex;
	flex-direction:column;
	gap: 4px;
}

.kps-card-title{
	font-weight: 900;
	letter-spacing: .15px;
	line-height: 1.25;
}

.kps-card-desc{
	color: var(--kps-muted);
	font-size: .95rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kps-card-arrow{
	position: relative;
	z-index: 1;
	margin-left: auto;
	opacity: .55;
	transition: transform .16s ease, opacity .16s ease;
}

.kps-card-link:hover .kps-card-arrow{
	transform: translateX(2px);
	opacity: .8;
}

/* Reveal animation */
[data-reveal]{
	opacity: 0;
	transform: translateY(10px);
	filter: blur(6px);
	transition: opacity .55s ease, transform .55s ease, filter .55s ease;
	will-change: opacity, transform, filter;
}
[data-reveal].is-visible{
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
	.kps-card-link, .kps-card-arrow, [data-reveal]{
		transition: none !important;
		animation: none !important;
		transform: none !important;
		filter: none !important;
	}
}

/* Mobile */
@media (max-width: 520px){
	.kps-title{ font-size: 1.55rem; }
	.kps-card-grid{ padding-left: 14px; padding-right: 14px; gap: 12px; }
	.kps-card-link{ padding: 14px; }
}

/* Toolbar (Brand only) */
.kps-toolbar{
	margin-top: 14px;
	padding: 14px;
	border: 1px solid var(--kps-border);
	border-radius: var(--kps-radius);
	background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
	box-shadow: var(--kps-shadow);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.kps-toolbar-title{ font-weight: 900; margin-bottom: 10px; }
.kps-toolbar-chips{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.kps-chip{
	display:inline-flex; align-items:center; gap:10px;
	border:1px solid var(--kps-border);
	background:#fff;
	padding:8px 12px;
	border-radius: 999px;
	box-shadow: 0 10px 24px rgba(15,23,42,.06);
	user-select:none;
}
.kps-chip input{ transform: scale(1.05); }
.kps-chip .t{ font-weight: 800; }
.kps-chip .n{ opacity: .55; font-weight: 800; }
.kps-chip[aria-disabled="true"]{ opacity:.4; pointer-events:none; }

.kps-btn.secondary{
	background:#eef4ff;
	color: var(--kps-blue);
	border: 1px solid rgba(29,116,214,.18);
}

/* Product grid hooks used by renderProducts() */
.kps-products{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:16px; }
.kps-empty{
	margin-top: 16px;
	padding: 16px;
	border: 1px dashed rgba(15,23,42,.22);
	border-radius: var(--kps-radius);
	background: rgba(255,255,255,.72);
	color: var(--kps-muted);
}

/* Category subcategory feature card tiles */
.kps-feature-card{
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	border-radius: 14px;
	border: 1.5px solid rgba(15,23,42,.09);
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 6px rgba(15,23,42,.06);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.kps-feature-card:hover{
	border-color: rgba(29,116,214,.30);
	box-shadow: 0 4px 18px rgba(29,116,214,.11);
}

.kps-feature-ico{
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	flex-shrink: 0;
	overflow: hidden;
}

.kps-feature-ico img{
	width: 72%;
	height: 72%;
	object-fit: contain;
	display: block;
}

.kps-feature-ico i{ display: none; }

.kps-feature-label{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 10px 12px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-align: center;
	color: #111111;
	line-height: 1.35;
	background: #dbeafe;
}

.kps-feature-sub{
	font-size: .85rem;
	color: var(--kps-muted);
}