.marketplace-search-container {
	font-size: 16px !important;
	--radius: 0.5rem;
	display: flex;
	gap: 10px;
	justify-content: center;
	width: 100%;
	margin-top: calc(var(--spacing) * 8);

	.marketplace-search-input {
		flex: 1;
		min-width: 280px;
		height: 48px;
		padding: 0 16px;
		border-radius: 0;
		border: 1px solid var(--color-border);
		background: var(--color-background);
		font-family: var(--font-Metropolis);
		font-size: var(--text-base);
		color: var(--color-foreground) !important;
		border-top-left-radius: var(--radius);
		border-bottom-left-radius: var(--radius);
	}

	.marketplace-search-submit {
		height: 48px;
		padding: 0 16px;
		border-radius: 0;
		border: 1px solid var(--widowwise_green);
		background: var(--widowwise_green);
		color: #fff;
		font-weight: 700;
		cursor: pointer;
		font-family: var(--font-Metropolis);
		border-top-right-radius: var(--radius);
		border-bottom-right-radius: var(--radius);
		font-size: var(--text-base);
	}

	.marketplace-search-submit:hover {
		filter: brightness(0.95);
	}

	.marketplace-search-clear {
		height: 40px;
		padding: 0 12px;
		border-radius: var(--radius);
		border: 1px solid var(--color-border);
		background: transparent;
		cursor: pointer;
		font-family: var(--font-Metropolis);
	}

	.marketplace-search-clear:disabled {
		opacity: 0.5;
		cursor: default;
	}
}

.marketplace-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: calc(var(--spacing) * 8) 16px;
	font-size: 16px !important;
	--radius: 0.5rem;
	.marketplace-content {
		display: flex;
		flex-direction: column;
		.marketplace-header {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			gap: 12px;
			margin-bottom: 18px;
			.marketplace-headerText {
				min-width: 0;
			}

			.marketplace-subtitle {
				margin: 6px 0 0 0;
				max-width: 70ch;
				color: var(--color-neutral-500);
				font-size: var(--text-base);
				line-height: var(--tw-leading, var(--text-base--line-height));
			}
			.marketplace-title {
				color: var(--color-foreground);
				font-family: var(--font-Metropolis);
				box-sizing: border-box;
				border: 0 solid;
				margin: 0;
				padding: 0;
				border-color: var(--color-border);
				grid-column: 1/-1;
				grid-row: auto;
				/*     margin-bottom: calc(var(--spacing) * 4); */
				align-self: flex-start;
				font-size: var(--text-2xl);
				line-height: var(--tw-leading, var(--text-2xl--line-height));
				--tw-font-weight: var(--font-weight-semibold);
				font-weight: var(--font-weight-semibold);
			}
			.marketplace-count {
				-webkit-text-size-adjust: 100%;
				tab-size: 4;
				font-feature-settings: var(--default-font-feature-settings, normal);
				font-variation-settings: var(--default-font-variation-settings, normal);
				-webkit-tap-highlight-color: transparent;
				font-family: var(--font-Metropolis);
				cursor: pointer;
				font-size: var(--text-base);
				line-height: var(--tw-leading, var(--text-base--line-height));
				overflow-wrap: break-word;
				color: var(--color-neutral-500);
				box-sizing: border-box;
				border: 0 solid;
				margin: 0;
				padding: 0;
				border-color: var(--color-border);
			}
		}
		.marketplace-empty {
			width: 100%;
			border: 1px solid var(--color-border);
			background: color-mix(in oklab, var(--color-gray-12) 35%, white);
			border-radius: var(--radius);
			padding: 18px;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			justify-content: center;
			flex: 1;
			gap: 12px;
		}

		.marketplace-emptyTitle {
			font-family: var(--font-Metropolis);
			font-weight: var(--font-weight-semibold);
			font-size: var(--text-xl);
			line-height: var(--tw-leading, var(--text-lg--line-height));
			margin: 0 0 6px 0;
			color: var(--color-foreground);
		}

		.marketplace-emptyDesc {
			margin: 0 0 14px 0;
			color: var(--color-neutral-500);
			font-size: var(--text-base);
			line-height: var(--tw-leading, var(--text-base--line-height));
			max-width: 75ch;
		}

		.marketplace-emptyCtaRow {
			display: flex;
			flex-direction: column;
			gap: 8px;
			align-items: center;
			justify-content: center;
		}

		.marketplace-emptyCta {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: fit-content;
			padding: 10px 14px;
			border-radius: var(--radius);
			border: 1px solid var(--widowwise_green);
			color: var(--color-gray-100);
			text-decoration: none;
			font-weight: var(--font-weight-medium);
			font-family: var(--font-Metropolis);
		}

		.marketplace-emptyCta:hover {
			background: color-mix(in oklab, var(--widowwise_green) 10%, transparent);
		}

		.marketplace-emptyHint {
			color: var(--color-neutral-500);
			font-size: var(--text-sm);
			line-height: var(--tw-leading, var(--text-sm--line-height));
		}

		.marketplace-grid {
			-webkit-text-size-adjust: 100%;
			tab-size: 4;
			line-height: 1.5;
			color: var(--color-foreground);
			font-family: var(--font-Metropolis);
			box-sizing: border-box;
			border-color: var(--color-border);
			display: grid;
			justify-items: center;
			gap: calc(var(--spacing) * 8);
			grid-template-columns: repeat(
				auto-fit,
				minmax(300px, calc(calc(1180px - 32px - calc(var(--spacing) * 8) - calc(var(--spacing) * 8)) / 3))
			);
			max-width: calc(1.6 * 72rem);
			width: 100%;
			.marketplace-card {
				position: relative;
				-webkit-text-size-adjust: 100%;
				tab-size: 4;
				line-height: 1.5;
				font-feature-settings: var(--default-font-feature-settings, normal);
				font-variation-settings: var(--default-font-variation-settings, normal);
				-webkit-tap-highlight-color: transparent;
				font-family: var(--font-Metropolis);
				box-sizing: border-box;
				border: 0 solid;
				margin: 0;
				padding: 0;
				border-color: var(--color-border);
				display: flex;
				width: 100%;

				/* max-width: calc(1.6 * 26.5rem); */
				flex: 1;
				flex-direction: column;
				overflow: hidden;
				border-radius: var(--radius);
				border-style: solid;
				border-width: 1px;
				background-color: var(--color-container);
				color: var(--color-container-foreground);
				border-color: var(--color-border);

				-webkit-text-size-adjust: 100%;
				tab-size: 4;
				line-height: 1.5;
				font-feature-settings: var(--default-font-feature-settings, normal);
				font-variation-settings: var(--default-font-variation-settings, normal);
				-webkit-tap-highlight-color: transparent;
				font-family: var(--font-Metropolis);
				box-sizing: border-box;
				margin: 0;
				padding: 0;
				border-color: var(--color-border);
				color: inherit;
				text-decoration: inherit;
				display: flex;
				flex-grow: 1;
				cursor: pointer;
				flex-direction: column;
				border-radius: var(--radius);
				&:hover {
					background: color-mix(in oklab, var(--color-gray-100) 6%, transparent);
				}
				&:active {
					transform: translateY(0px);
				}
				&[href] {
					cursor: pointer;
				}
				.marketplace-ribbon {
					position: absolute;
					top: 17px;
					right: -49px;
					z-index: 2;
					pointer-events: none; /* whole card stays clickable */
					transform: rotate(45deg);

					span {
						display: inline-block;
						padding: 6px 56px;
						font-size: 12px;
						font-weight: 800;
						letter-spacing: 0.02em;
						color: var(--widowwise_on_purple);
						background: var(--widowwise_purple); /* or swap to an accent */
						box-shadow: 0 8px 18px rgba(20, 16, 60, 0.18);
						border-radius: 999px;
					}
				}
				.marketplace-card-image-wrapper {
					width: 100%;
					aspect-ratio: 16 / 9;
					height: min-content;
					background: white;
					position: relative;
					&:has(.marketplace-logo) {
						padding: calc(var(--spacing) * 8);
					}
					.marketplace-thumbnail {
						object-fit: cover;
						width: 100%;
						height: 100%;
					}
					.marketplace-logo {
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
				.marketplace-card-body {
					padding: 16px 16px 14px 16px;
					text-align: center;
					flex: 1;
					display: flex;
					flex-direction: column;
					border-top: 1px solid rgba(47, 42, 99, 0.12);
					.marketplace-card-name {
						-webkit-text-size-adjust: 100%;
						tab-size: 4;
						font-feature-settings: var(--default-font-feature-settings, normal);
						font-variation-settings: var(--default-font-variation-settings, normal);
						-webkit-tap-highlight-color: transparent;
						font-family: var(--font-Metropolis);
						color: inherit;
						cursor: pointer;
						box-sizing: border-box;
						border: 0 solid;
						margin: 0;
						padding: 0;
						border-color: var(--color-border);
						--tw-space-y-reverse: 0;
						margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
						margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
						-webkit-box-orient: vertical;
						display: -webkit-box;
						overflow: hidden;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						font-size: var(--text-xl);
						line-height: var(--tw-leading, var(--text-xl--line-height));
						--tw-font-weight: var(--font-weight-semibold);
						font-weight: var(--font-weight-semibold);
						--tw-tracking: var(--tracking-tight);
						letter-spacing: var(--tracking-tight);
					}
					.marketplace-card-desc {
						-webkit-text-size-adjust: 100%;
						tab-size: 4;
						font-feature-settings: var(--default-font-feature-settings, normal);
						font-variation-settings: var(--default-font-variation-settings, normal);
						-webkit-tap-highlight-color: transparent;

						font-family: var(--font-Metropolis);
						cursor: pointer;
						box-sizing: border-box;
						border: 0 solid;
						margin: 0;
						padding: 0;
						border-color: var(--color-border);
						--tw-space-y-reverse: 0;
						margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
						margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
						-webkit-line-clamp: 6;
						line-clamp: 6;
						-webkit-box-orient: vertical;
						display: -webkit-box;
						overflow: hidden;
						font-size: var(--text-base);
						line-height: var(--tw-leading, var(--text-base--line-height));
						color: var(--color-neutral-800);
					}
				}
				.marketplace-card-footer {
					padding: 12px 14px;
					border-top: 1px solid rgba(47, 42, 99, 0.12);
					display: flex;
					align-items: center;
					justify-content: flex-start;
					gap: 12px;
					.marketplace-card-owner {
						display: flex;
						align-items: center;
						gap: 10px;
						min-width: 0;
						.marketplace-owner-headshot {
							width: 26px;
							height: 26px;
							border-radius: 999px;
							background: #fff;
							border: 1px solid rgba(47, 42, 99, 0.15);
							object-fit: cover;
							flex: 0 0 auto;
						}
						.marketplace-owner-name {
							-webkit-text-size-adjust: 100%;
							tab-size: 4;
							font-feature-settings: var(--default-font-feature-settings, normal);
							font-variation-settings: var(--default-font-variation-settings, normal);
							-webkit-tap-highlight-color: transparent;

							font-family: var(--font-Metropolis);
							cursor: pointer;
							font-size: var(--text-base);
							line-height: var(--tw-leading, var(--text-base--line-height));
							color: var(--color-neutral-500);
							box-sizing: border-box;
							border: 0 solid;
							margin: 0;
							padding: 0;
							border-color: var(--color-border);
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
						}
					}
					.marketplace-card-cta {
						font-family: var(--font-Metropolis);
						box-sizing: border-box;
						margin: 0;
						padding: 0;
						display: inline-flex;
						width: 40%;
						cursor: pointer;
						align-items: center;
						justify-content: center;
						border-radius: var(--radius);
						margin-left: auto;
						border-width: 1px;
						--tw-border-style: solid;
						border-style: solid;
						border-color: var(--widowwise_green);
						background-color: transparent;
						padding-inline: calc(var(--spacing) * 3);
						padding-block: calc(var(--spacing) * 2);
						--tw-font-weight: var(--font-weight-medium);
						font-weight: var(--font-weight-medium);
						white-space: nowrap;
						color: var(--color-gray-100);
						--tw-ring-offset-color: var(--color-background);
						transition-property:
							color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from,
							--tw-gradient-via, --tw-gradient-to;
						transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
						transition-duration: var(--tw-duration, var(--default-transition-duration));
					}
				}
			}
		}
	}

	.marketplace-layout {
		display: grid;
		grid-template-columns: calc(calc(1180px - 32px - calc(var(--spacing) * 8) - calc(var(--spacing) * 8)) / 3) 1fr;
		gap: calc(var(--spacing) * 8);
	}

	.marketplace-sidebar {
		border-right: 1px solid rgba(0, 0, 0, 0.1);
		padding-right: 16px;
	}

	.marketplace-category-list {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.marketplace-category-item {
		display: block;
		width: 100%;
		padding: calc(var(--spacing) * 3) calc(var(--spacing) * 3);
		background: none;
		border: none;
		text-align: left;
		cursor: pointer;
		font-family: var(--font-Metropolis);
		font-size: var(--text-base);
		border-radius: var(--radius);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;

		.marketplace-category-label {
			flex: 1;
			text-align: left;
		}

		.marketplace-category-count {
			font-size: var(--text-sm);
			color: var(--color-neutral-500);
			white-space: nowrap;
			font-variant-numeric: tabular-nums;
			font-feature-settings: 'tnum';
		}

		&:hover {
			background-color: var(--widowwise_purple_50);
		}
		&.active {
			font-weight: 700;
			background-color: var(--widowwise_purple_50);
			&:hover {
				background-color: var(--widowwise_purple_100);
			}
		}
	}
}

.marketplace-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	--radius: 0.5rem;
	font-size: 16px;

	&.open {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.marketplace-modal-backdrop {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.45);
	}
	.marketplace-modal-panel {
		position: relative;
		max-width: 760px;
		width: calc(100% - 32px);
		max-height: calc(100% - 32px);
		overflow: auto;
		margin: 16px auto;
		box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
		font-family: var(--font-Metropolis);
		padding: calc(var(--spacing) * 5);
		border-radius: var(--radius);
		border: 1px solid var(--color-border);
		background: var(--color-background);
		font-family: var(--font-Metropolis);
		.marketplace-modal-close {
			position: absolute;
			top: 4px;
			right: 4px;
			margin-left: auto;
			width: 40px;
			height: 40px;
			border-radius: var(--radius);
			border: 1px solid transparent;
			background: transparent;
			cursor: pointer;
			font-size: 22px;
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;

			&:hover {
				background: color-mix(in oklab, var(--color-gray-100) 6%, transparent);
				border: 1px solid var(--color-border);
			}
		}
		.marketplace-modal-content {
			padding-top: 0;

			.marketplace-modalGrid {
				display: grid;
				grid-template-columns: 280px 1fr;
				gap: calc(var(--spacing) * 6);

				.marketplace-modalLeft {
					display: flex;
					flex-direction: column;
					gap: calc(var(--spacing) * 4);
					border-right: 1px solid rgba(47, 42, 99, 0.12);
					padding-right: calc(var(--spacing) * 6);

					.marketplace-modalImageWrap {
						width: 100%;
						aspect-ratio: 16 / 9;
						border-radius: var(--radius);
						overflow: hidden;
						background: #fff;
						border: 1px solid rgba(47, 42, 99, 0.12);
						.marketplace-modalImage {
							width: 100%;
							height: 100%;
						}
					}
					.marketplace-modalChips {
						display: flex;
						gap: 8px;
						flex-wrap: wrap;
						.marketplace-modalChip {
							display: inline-flex;
							align-items: center;
							padding: 6px 10px;
							border-radius: 999px;
							border: 1px solid var(--widowwise_purple_100);
							background: var(--widowwise_purple_50);
							font-size: 12px;
							font-weight: 700;
							color: var(--widowwise_on_purple_50);
						}
						.marketplace-modalChipFeatured {
							display: inline-flex;
							align-items: center;
							padding: 6px 10px;
							border-radius: 999px;
							background: var(--widowwise_purple);
							color: var(--widowwise_on_purple);
							font-size: 12px;
							font-weight: 800;
						}
					}
					.marketplace-modalMeta {
						display: flex;
						flex-direction: column;
						gap: calc(var(--spacing) * 4);

						.marketplace-modalMetaRow {
							display: flex;
							flex-direction: column;
							gap: 6px;
							.marketplace-modalMetaLabel {
								font-size: 12px;
								font-weight: 800;
								letter-spacing: 0.02em;
								text-transform: uppercase;
								color: var(--color-neutral-500);
							}
							.marketplace-modalMetaLink {
								color: var(--widowwise_green);
								font-weight: 700;
								text-decoration: none;
								word-break: break-word;
								&:hover {
									text-decoration: underline;
								}
							}

							.marketplace-modalOwner {
								display: flex;
								align-items: center;
								gap: 10px;
								min-width: 0;
								.marketplace-modalOwnerImg {
									width: 30px;
									height: 30px;
									border-radius: 999px;
									border: 1px solid rgba(47, 42, 99, 0.15);
									object-fit: cover;
									background: #fff;
									flex: 0 0 auto;
								}
								.marketplace-modalOwnerName {
									color: var(--color-foreground);
									font-size: var(--text-base);
									line-height: var(--tw-leading, var(--text-base--line-height));
								}
							}
						}
					}
					.marketplace-modalLeftActions {
						margin-top: auto;
						display: flex;
						.marketplace-modalCta {
							display: inline-flex;
							align-items: center;
							justify-content: center;
							width: 100%;
							padding: 12px 14px;
							border-radius: var(--radius);
							border: 1px solid var(--widowwise_green);
							background: var(--widowwise_green);
							color: #fff;
							text-decoration: none;
							font-weight: 800;
							cursor: pointer;
							&:hover {
								filter: brightness(0.95);
							}
							&.disabled {
								opacity: 0.6;
								cursor: default;
							}
						}
					}
				}
				.marketplace-modalRight {
					min-width: 0;
					/* padding-left: 4px; */

					.marketplace-modalName {
						margin: 0 0 6px 0;
						font-size: var(--text-2xl);
						line-height: var(--tw-leading, var(--text-2xl--line-height));
						font-weight: var(--font-weight-semibold);
						color: var(--color-foreground);
					}

					.marketplace-modalCats {
						display: flex;
						flex-wrap: wrap;
						gap: 6px;
						.marketplace-modalCatPill {
							display: inline-flex;
							align-items: center;
							padding: 6px 10px;
							border-radius: 999px;
							border: 1px solid rgba(47, 42, 99, 0.12);
							background: color-mix(in oklab, var(--color-gray-12) 35%, white);
							font-size: 12px;
							font-weight: 700;
							color: var(--color-foreground);
						}
						.marketplace-modalCatMore {
							font-size: 12px;
							font-weight: 700;
							color: var(--color-neutral-500);
							padding: 6px 0;
						}
					}
					.marketplace-modalDesc {
						margin: 0;
						color: var(--color-foreground);
						font-size: var(--text-base);
						line-height: var(--tw-leading, var(--text-base--line-height));
					}
					.marketplace-modalSection {
						border-top: 1px solid rgba(0, 0, 0, 0.1);
						margin-top: calc(var(--spacing) * 4);
						padding-top: calc(var(--spacing) * 6);

						.marketplace-modalSectionTitle {
							font-size: 12px;
							font-weight: 800;
							letter-spacing: 0.02em;
							text-transform: uppercase;
							color: var(--color-neutral-500);
							margin-bottom: 8px;
						}
						.marketplace-modalText {
							color: var(--color-foreground);
							font-size: var(--text-base);
							line-height: var(--tw-leading, var(--text-base--line-height));
						}
					}

					.marketplace-modalQuote {
						margin: 0;
						margin-top: calc(var(--spacing) * 4);
						padding: 12px 14px;
						border-radius: var(--radius);
						border: 1px solid rgba(47, 42, 99, 0.12);
						background: color-mix(in oklab, var(--color-gray-12) 35%, white);
						p {
							margin: 0;
							color: var(--color-foreground);
							font-size: var(--text-base);
							line-height: var(--tw-leading, var(--text-base--line-height));
						}
						.marketplace-modalQuoteBy {
							margin-top: 10px;
							color: var(--color-neutral-500);
							font-size: var(--text-sm);
						}
					}
				}
			}
		}
	}
	.marketplace-modal-thumbnail {
		object-fit: cover;
	}

	.marketplace-modal-logo {
		object-fit: contain;
		padding: calc(var(--spacing) * 6);
	}

	@media (max-width: 820px) {
		.marketplace-modalGrid {
			grid-template-columns: 1fr;
		}
		.marketplace-modalLeft {
			border-right: none;
			padding-right: 0;
			border-bottom: 1px solid rgba(47, 42, 99, 0.12);
			padding-bottom: 16px;
		}
	}
}