.datajoint-apps-catalog {
	background: #fff;
	color: var(--wp--preset--color--text-on-light, #011627);
	padding-block: 80px 100px;
}

.datajoint-apps-catalog__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--dj-gutter, 48px);
}

.datajoint-apps-catalog__head {
	text-align: center;
}

.datajoint-apps-catalog__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__heading {
	margin: 16px 0 0;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.2;
	color: var(--wp--preset--color--text-on-light, #011627);
}

@media (min-width: 1024px) {
	.datajoint-apps-catalog__heading {
		font-size: 40px;
	}
}

.datajoint-apps-catalog__sentinel {
	height: 1px;
	margin-top: 48px;
}

.datajoint-apps-catalog__filters {
	position: sticky;
	/* Lock just under the fixed nav (and the banner when it's shown). */
	top: var(--dj-nav-height, 73px);
	z-index: 20;
	padding-block: 16px;
	/* Break the grey bar out to the full viewport width so the background runs
	   margin-to-margin like the FAQ filter bar / the nav (client: grey was
	   cutting off left+right inside the 1280px container on wide screens). The
	   inner padding keeps the controls aligned to the page's content column:
	   the container gutter plus half of any space beyond 1280px. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-inline: max(var(--dj-gutter, 48px), calc((100vw - 1280px) / 2 + var(--dj-gutter, 48px)));
	border-block: 1px solid transparent;
	background: #fff;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

body.has-dj-banner .datajoint-apps-catalog__filters {
	top: calc(var(--dj-nav-height, 73px) + var(--dj-banner-height, 44px));
}

/* When stuck under the nav, switch to a light-grey bar with a subtle shadow
   (matches the Lovable behaviour). */
.datajoint-apps-catalog__filters.is-stuck {
	background: var(--wp--preset--color--bg-light-grey, #f4f7fa);
	border-block-color: var(--wp--preset--color--border-light, #e2e2e2);
	box-shadow: 0 4px 12px rgba(1, 22, 39, 0.06);
}

/* Mobile: keep the type pills (All / Elements / Tools) and the category dropdown
   on one row, with the search field on its own row below (client 5:26). */
@media (max-width: 1023.98px) {
	.datajoint-apps-catalog__filters {
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 10px 12px;
	}
	.datajoint-apps-catalog__type-group { grid-column: 1; }
	.datajoint-apps-catalog__category-wrap { grid-column: 2; justify-self: start; }
	.datajoint-apps-catalog__search { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
	.datajoint-apps-catalog__filters {
		grid-template-columns: auto auto minmax(280px, 1fr);
		align-items: center;
		gap: 20px;
	}
}

/* Pill buttons (matching the Blog filter style) instead of a joined segmented
   control — the segmented box left an orphan white area on mobile. */
.datajoint-apps-catalog__type-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.datajoint-apps-catalog__type-group button {
	border: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
	border-radius: 9999px;
	padding: 8px 18px;
	background: #fff;
	color: #4a5568;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}

.datajoint-apps-catalog__type-group button:hover {
	border-color: var(--wp--preset--color--brand-blue, #00a0df);
	color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__type-group button.is-active {
	background: var(--wp--preset--color--brand-blue, #00a0df);
	border-color: var(--wp--preset--color--brand-blue, #00a0df);
	color: #fff;
}

.datajoint-apps-catalog__category-wrap {
	position: relative;
}

.datajoint-apps-catalog__category-toggle {
	border: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
	border-radius: 8px;
	padding: 8px 20px;
	background: #fff;
	color: #011627;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.datajoint-apps-catalog__category-count {
	color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__category-menu {
	position: absolute;
	left: 0;
	top: calc(100% + 8px);
	z-index: 30;
	width: min(280px, 78vw);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: #fff;
	border: 1.5px solid var(--wp--preset--color--border-light, #e2e2e2);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(1, 22, 39, 0.1);
}

.datajoint-apps-catalog__category-menu[hidden] {
	display: none;
}

/* Checkbox category options (client: "should be check boxes"). */
.datajoint-apps-catalog__category-option {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 13px;
	color: #011627;
}

.datajoint-apps-catalog__category-option input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--wp--preset--color--brand-blue, #00a0df);
	cursor: pointer;
	flex: 0 0 auto;
}

.datajoint-apps-catalog__category-menu button {
	border: 0;
	background: none;
	padding: 0;
	text-align: left;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 13px;
	color: #011627;
	cursor: pointer;
}

.datajoint-apps-catalog__category-menu button.is-active {
	color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__clear-cats {
	margin-top: 8px;
	font-size: 12px;
	color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__search input {
	width: 100%;
	border: 1px solid var(--wp--preset--color--border-light, #e2e2e2);
	border-radius: 8px;
	padding: 8px 14px;
	font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
	font-weight: 300;
	font-size: 13px;
	color: #011627;
}

.datajoint-apps-catalog__active {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.datajoint-apps-catalog__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 12px;
	padding: 4px 12px;
	background: rgba(0, 160, 223, 0.08);
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 12px;
	color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__chip button,
.datajoint-apps-catalog__clear-all {
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 13px;
	color: var(--wp--preset--color--brand-blue, #00a0df);
}

.datajoint-apps-catalog__result-count {
	margin: 48px 0 0;
	text-align: right;
	font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
	font-weight: 300;
	font-size: 14px;
	color: #4a5568;
}

.datajoint-apps-catalog__grid {
	margin-top: 16px;
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.datajoint-apps-catalog__item[hidden] {
	display: none;
}

.datajoint-apps-catalog__empty {
	margin-top: 64px;
	padding: 48px 0;
	text-align: center;
}

.datajoint-apps-catalog__empty h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-size: 24px;
	line-height: 1.2;
}

.datajoint-apps-catalog__empty p {
	margin: 12px auto 0;
	max-width: 480px;
	font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: #4a5568;
}

.datajoint-apps-catalog__empty button {
	margin-top: 24px;
	border: 0;
	border-radius: 999px;
	padding: 12px 24px;
	background: var(--wp--preset--color--brand-blue, #00a0df);
	color: #fff;
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

.datajoint-apps-catalog__load-more-wrap {
	margin-top: 48px;
	text-align: center;
}

.datajoint-apps-catalog__load-more {
	border: 1.5px solid var(--wp--preset--color--border-light, #e2e2e2);
	border-radius: 8px;
	padding: 12px 24px;
	background: #fff;
	color: var(--wp--preset--color--brand-blue, #00a0df);
	font-family: var(--wp--preset--font-family--sans, "Roboto", sans-serif);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: border-color 150ms ease, transform 150ms ease;
}

.datajoint-apps-catalog__load-more:hover {
	border-color: var(--wp--preset--color--brand-blue, #00a0df);
	transform: scale(1.02);
}

.datajoint-apps-catalog__no-posts {
	margin-top: 32px;
	font-family: var(--wp--preset--font-family--serif, "Roboto Slab", serif);
	font-size: 16px;
	color: #4a5568;
}