/* Squarespell marketplace header: light by default, token-driven dark mode. */
.sgn,
.sgn-pop,
.sgn-searchdeck,
.sgn-drawer,
.sgn-scrim {
	--sgn-page: var(--sq-paper);
	--sgn-surface: var(--sq-sheet);
	--sgn-soft: var(--sq-soft);
	--sgn-line: var(--sq-line);
	--sgn-ink: var(--sq-ink);
	--sgn-muted: var(--sq-muted);
	--sgn-signal: var(--sq-signal);
	--sgn-shell: 1440px;
	box-sizing: border-box;
}

:where(.sgn, .sgn-pop, .sgn-searchdeck, .sgn-drawer) * { box-sizing: border-box; }
:where(.sgn, .sgn-pop, .sgn-searchdeck, .sgn-drawer) a { color: inherit; text-decoration: none; }
:where(.sgn, .sgn-pop, .sgn-searchdeck, .sgn-drawer) :is(button, input) { color: inherit; font: inherit; }
:where(.sgn, .sgn-pop, .sgn-searchdeck, .sgn-drawer) svg {
	inline-size: 18px;
	block-size: 18px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
:where(.sgn, .sgn-pop, .sgn-searchdeck, .sgn-drawer) :focus-visible {
	outline: 2px solid var(--sgn-signal);
	outline-offset: 3px;
}

.sgn {
	position: sticky;
	z-index: 300;
	top: 0;
	border-block-end: 1px solid var(--sgn-line);
	background: color-mix(in srgb, var(--sgn-surface) 94%, transparent);
	color: var(--sgn-ink);
	backdrop-filter: blur(18px) saturate(1.25);
}
.sgn-shell { inline-size: min(var(--sgn-shell), calc(100% - 32px)); margin-inline: auto; }
.sgn-bar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	min-block-size: 64px;
}
.sgn-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-inline-size: 0;
	overflow: hidden;
	font-family: var(--sq-font-sans);
	font-size: var(--sq-t-h4);
	font-weight: var(--sq-w-bold);
	letter-spacing: var(--sq-ls-h1);
	white-space: nowrap;
}
.sgn-brand span { overflow: hidden; text-overflow: ellipsis; }
.sgn-brand__mark { inline-size: 24px !important; block-size: 24px !important; color: var(--sgn-ink); }
.sgn-brand__mark .sq-logo__signal { fill: var(--sgn-signal); stroke: none; }

.sgn-primary :is(a, button),
.sgn-action,
.sgn-sell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: 38px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	font-size: var(--sq-t-p3);
	font-weight: var(--sq-w-semibold);
	white-space: nowrap;
}
.sgn-primary button svg { inline-size: 13px; block-size: 13px; color: var(--sgn-muted); }
.sgn-primary button[aria-expanded="true"] { background: color-mix(in srgb, var(--sgn-soft) 74%, var(--sgn-line)); }
.sgn-primary button[aria-expanded="true"] svg { transform: rotate(180deg); }

.sgn-primary { display: flex; justify-content: center; align-items: center; min-inline-size: 0; gap: 6px; }
.sgn-primary :is(a, button) { gap: 5px; padding-inline: 10px; color: var(--sgn-muted); cursor: pointer; }
.sgn-primary :is(a, button):hover { color: var(--sgn-ink); background: var(--sgn-soft); }
.sgn-primary .sgn-browse { color: var(--sgn-ink); }
.sgn-actions { display: flex; align-items: center; gap: 6px; }
.sgn-search-open {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	inline-size: clamp(180px, 17vw, 250px);
	min-block-size: 40px;
	padding-inline: 11px 7px;
	border: 1px solid var(--sgn-line);
	border-radius: 9px;
	background: var(--sgn-soft);
	color: var(--sgn-muted);
	text-align: start;
	cursor: pointer;
}
.sgn-search-open span { overflow: hidden; font-size: var(--sq-t-p3); text-overflow: ellipsis; white-space: nowrap; }
.sgn-search-open kbd { padding: 3px 5px; border: 1px solid var(--sgn-line); border-radius: 5px; background: var(--sgn-surface); color: var(--sgn-muted); font-size: var(--sq-t-eyebrow); line-height: var(--sq-lh-h1); }
.sgn-search-open:hover { border-color: color-mix(in srgb, var(--sgn-ink) 34%, var(--sgn-line)); color: var(--sgn-ink); }
.sgn-sell { padding-inline: 14px; background: var(--sgn-ink); color: var(--sgn-surface) !important; }
.sgn-sell:hover { opacity: .82; }
.sgn-action { position: relative; inline-size: 40px; padding: 0; border: 1px solid var(--sgn-line); color: var(--sgn-muted); }
.sgn-action:hover { color: var(--sgn-ink); background: var(--sgn-soft); }
.sgn-theme-action[aria-pressed="true"] { border-color: color-mix(in srgb, var(--sgn-signal) 56%, var(--sgn-line)); color: var(--sgn-signal); background: color-mix(in srgb, var(--sgn-signal) 8%, var(--sgn-surface)); }
.sgn-action b { position: absolute; inset: -5px -5px auto auto; display: grid; place-items: center; min-inline-size: 18px; block-size: 18px; padding-inline: 4px; border-radius: 99px; background: var(--sgn-signal); color: var(--wp--preset--color--on-signal); font-size: var(--sq-t-p3); }
.sgn-burger { display: none; }

/* Compact, Framer-inspired disclosure menus. */
.sgn-pop {
	position: absolute;
	z-index: 310;
	inset-block-start: calc(100% + 8px);
	inline-size: 288px;
	max-block-size: min(680px, calc(100dvh - 86px));
	overflow-y: auto;
	padding: 8px;
	border: 1px solid var(--sgn-line);
	border-radius: 15px;
	background: var(--sgn-surface);
	color: var(--sgn-ink);
	box-shadow: 0 22px 60px color-mix(in srgb, var(--sgn-ink) 15%, transparent);
}
.sgn-pop[hidden] { display: none; }
.sgn-pop--platform { inset-inline-start: calc(50% + 15px); }
.sgn-pop--solution { inset-inline-start: calc(50% + 115px); }
.sgn-pop section + section { margin-block-start: 8px; padding-block-start: 8px; border-block-start: 1px solid var(--sgn-line); }
.sgn-pop__title,
.sgn-pop__head p { margin: 8px 10px 6px; color: var(--sgn-muted); font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; }
.sgn-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sgn-pop__head a { margin-inline-end: 9px; color: var(--sgn-muted); font-size: var(--sq-t-p3); text-decoration: underline; text-underline-offset: 3px; }
.sgn-pop nav { display: grid; gap: 1px; }
.sgn-row,
.sgn-filter-row {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	align-items: center;
	gap: 9px;
	min-block-size: 40px;
	padding: 5px 9px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: inherit;
	font-size: var(--sq-t-p3);
	text-align: start;
}
.sgn-row:hover,
.sgn-filter-row:hover { background: var(--sgn-soft); }
.sgn-row__icon { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border: 1px solid var(--sgn-line); border-radius: 7px; background: var(--sgn-page); color: var(--sgn-muted); }
.sgn-row__icon :is(svg, img) { inline-size: 15px; block-size: 15px; object-fit: contain; }
.sgn-row__icon img { padding: 1px; }
.sgn-row__label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgn-row b,
.sgn-filter-row b { color: var(--sgn-muted); font-size: var(--sq-t-p3); font-weight: var(--sq-w-semibold); }
.sgn-row.sq-theme-toggle { inline-size: 100%; cursor: pointer; }
.sgn-theme-switch { position: relative; inline-size: 30px; block-size: 17px; border: 1px solid var(--sgn-line); border-radius: 99px; background: var(--sgn-soft); }
.sgn-theme-switch i { position: absolute; inset: 2px auto auto 2px; inline-size: 11px; block-size: 11px; border-radius: 50%; background: var(--sgn-muted); transition: transform 140ms ease; }
.sq-theme-toggle[aria-pressed="true"] .sgn-theme-switch { border-color: var(--sgn-signal); background: color-mix(in srgb, var(--sgn-signal) 18%, var(--sgn-soft)); }
.sq-theme-toggle[aria-pressed="true"] .sgn-theme-switch i { background: var(--sgn-signal); transform: translateX(13px); }

/* UI8-inspired search layer, using the site's own light/dark tokens. */
.sgn-searchdeck { position: fixed; z-index: 1000; inset: 0; display: grid; grid-template-rows: 74px minmax(0, 1fr); background: var(--sgn-page); color: var(--sgn-ink); }
.sgn-searchdeck[hidden] { display: none; }
.sgn-searchdeck__top { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding-inline: 24px; border-block-end: 1px solid var(--sgn-line); background: var(--sgn-surface); }
.sgn-searchdeck__top form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; min-inline-size: 0; block-size: 100%; }
.sgn-searchdeck__top form > svg { inline-size: 21px; block-size: 21px; color: var(--sgn-muted); }
.sgn-searchdeck__top input { min-inline-size: 0; block-size: 100%; padding: 0; border: 0; outline: 0; background: transparent; font-size: var(--sq-t-h4); overflow: hidden; text-overflow: ellipsis; }
.sgn-searchdeck__top input::placeholder { color: var(--sgn-muted); opacity: .78; }
.sgn-searchdeck__status { color: var(--sgn-muted); font-size: var(--sq-t-p3); white-space: nowrap; }
.sgn-searchdeck__close { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 0; border-radius: 9px; background: transparent; color: var(--sgn-muted); cursor: pointer; }
.sgn-searchdeck__close:hover { background: var(--sgn-soft); color: var(--sgn-ink); }
.sgn-searchdeck__body { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-block-size: 0; }
.sgn-searchdeck__filters { overflow-y: auto; padding: 24px 15px 46px; border-inline-end: 1px solid var(--sgn-line); background: var(--sgn-surface); }
.sgn-searchdeck__filters section + section { margin-block-start: 22px; padding-block-start: 20px; border-block-start: 1px solid var(--sgn-line); }
.sgn-searchdeck__filters h2 { margin: 0 9px 8px; color: var(--sgn-muted); font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; }
.sgn-filter-row { min-block-size: 39px; color: var(--sgn-muted); }
.sgn-filter-row:hover { color: var(--sgn-ink); }
.sgn-searchdeck__main { min-inline-size: 0; overflow-y: auto; padding: clamp(28px, 3.5vw, 50px); }
.sgn-quick h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-family: inherit !important; font-size: var(--sq-t-p2) !important; font-weight: var(--sq-w-semibold) !important; letter-spacing: var(--sq-ls-h3) !important; }
.sgn-quick h2 svg { color: var(--sgn-signal); }
.sgn-quick > div { display: flex; flex-wrap: wrap; gap: 8px; }
.sgn-quick a { padding: 9px 14px; border: 1px solid var(--sgn-line); border-radius: 99px; background: var(--sgn-surface); color: var(--sgn-muted); font-size: var(--sq-t-p3); }
.sgn-quick a:hover { border-color: var(--sgn-muted); color: var(--sgn-ink); }
.sgn-start,
.sgn-live { margin-block-start: clamp(32px, 4vw, 52px); }
.sgn-live:first-child { margin-block-start: 0; }
.sgn-searchdeck__heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-block-end: 16px; }
.sgn-searchdeck__heading p { margin: 0 0 5px; color: var(--sgn-signal); font-size: var(--sq-t-p3); font-weight: var(--sq-w-bold); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; }
.sgn-searchdeck__heading h2 { margin: 0; font-size: var(--sq-t-h3); letter-spacing: var(--sq-ls-h1); }
.sgn-searchdeck__heading > a { color: var(--sgn-muted); font-size: var(--sq-t-p3); text-decoration: underline; text-underline-offset: 4px; }
.sgn-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 22px); }
.sgn-result-card { min-inline-size: 0; }
.sgn-result-card > a { display: block; block-size: 100%; }
.sgn-result-card__media { display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--sgn-line); border-radius: 12px; background: var(--sgn-soft); }
.sgn-result-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 180ms ease; }
.sgn-result-card__blank { display: grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 10px; background: var(--sgn-surface); color: var(--sgn-muted); }
.sgn-result-card__body { display: grid; gap: 6px; padding: 11px 2px 4px; }
.sgn-result-card__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sgn-result-card__title strong { min-inline-size: 0; overflow: hidden; font-size: var(--sq-t-p3); text-overflow: ellipsis; white-space: nowrap; }
.sgn-result-card__title em { flex: 0 0 auto; font-size: var(--sq-t-p3); font-style: normal; font-weight: var(--sq-w-bold); }
.sgn-result-card__meta { display: flex; align-items: center; gap: 6px; min-inline-size: 0; color: var(--sgn-muted); font-size: var(--sq-t-p3); }
.sgn-result-card__meta img { inline-size: 15px; block-size: 15px; padding: 2px; border-radius: 4px; background: var(--wp--preset--color--media-plate); object-fit: contain; }
.sgn-result-card__meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgn-result-card__body small { color: var(--sgn-signal); font-size: var(--sq-t-p3); }
.sgn-result-card:hover .sgn-result-card__media { border-color: color-mix(in srgb, var(--sgn-ink) 35%, var(--sgn-line)); }
.sgn-result-card:hover .sgn-result-card__media img { transform: scale(1.015); }
.sgn-no-results { grid-column: 1 / -1; margin: 0; padding: 36px; border: 1px dashed var(--sgn-line); border-radius: 12px; color: var(--sgn-muted); text-align: center; }
.sgn-creator-results { margin-block-start: 30px; }
.sgn-creator-results h3 { margin: 0 0 11px; font-family: inherit !important; font-size: var(--sq-t-p3) !important; }
.sgn-creator-results > div { display: flex; flex-wrap: wrap; gap: 9px; }
.sgn-creator-results a { display: flex; align-items: center; gap: 9px; min-inline-size: 205px; padding: 9px 13px 9px 9px; border: 1px solid var(--sgn-line); border-radius: 10px; background: var(--sgn-surface); }
.sgn-creator-result__mark { display: grid; place-items: center; overflow: hidden; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--sgn-soft); font-weight: var(--sq-w-bold); }
.sgn-creator-result__mark img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sgn-creator-results strong,
.sgn-creator-results small { display: block; }
.sgn-creator-results small { margin-block-start: 2px; color: var(--sgn-muted); font-size: var(--sq-t-p3); }

/* Drawer uses the same information architecture on compact screens. */
.sgn-scrim,
.sgn-drawer { display: none; }
body.sgn-search-lock,
body.sgn-drawer-lock { overflow: hidden; }
body.admin-bar .sgn { top: 32px; }
body.admin-bar .sgn-searchdeck { inset-block-start: 32px; }

@media (max-width: 1260px) {
	.sgn-primary .sgn-nav-optional { display: none; }
	.sgn-primary :is(a, button) { padding-inline: 8px; }
	.sgn-search-open { inline-size: 185px; }
}

/*
 * Questions pages only: the "Questions" link (rendered after Platforms/Solutions when the
 * pilot is public) is one item wider than every other page's nav has ever had to carry, and
 * `.sgn-primary`'s `justify-content: center` means overflowing content bleeds equally past
 * both edges of its grid track rather than wrapping -- the brand mark and the search button
 * were getting text drawn on top of them starting around 1280px, well above the 1260px point
 * where the rule above already starts shedding width for every other page. Reusing that same
 * shedding, just triggered earlier, is enough headroom for the one extra item and nothing
 * about the general marketplace header changes.
 */
@media (max-width: 1320px) {
	body.sgq-page .sgn-primary .sgn-nav-optional { display: none; }
	body.sgq-page .sgn-primary :is(a, button) { padding-inline: 8px; }
	body.sgq-page .sgn-search-open { inline-size: 185px; }
}

@media (max-width: 1040px) {
	.sgn-shell { inline-size: calc(100% - 24px); }
	.sgn-bar { grid-template-columns: minmax(0, 1fr) auto; min-block-size: 60px; }
	.sgn-primary { display: none; }
	.sgn-account-action { display: none; }
	.sgn-burger { display: inline-grid; }
	.sgn-pop { display: none; }
	.sgn-search-open,
	body.sgq-page .sgn-search-open { inline-size: 42px; grid-template-columns: 1fr; place-items: center; padding: 0; }
	.sgn-search-open :is(span, kbd) { display: none; }
	.sgn-scrim { position: fixed; z-index: 700; inset: 0; background: color-mix(in srgb, var(--sgn-ink) 36%, transparent); }
	.sgn-scrim:not([hidden]) { display: block; }
	.sgn-drawer { position: fixed; z-index: 710; inset-block: 0; inset-inline-end: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; inline-size: min(400px, 100vw); block-size: 100dvh; background: var(--sgn-surface); color: var(--sgn-ink); transform: translateX(101%); transition: transform 180ms ease; }
	.sgn-drawer[aria-hidden="false"] { transform: translateX(0); }
	.sgn-drawer__top { display: flex; justify-content: space-between; align-items: center; min-block-size: 60px; padding-inline: 16px; border-block-end: 1px solid var(--sgn-line); font-weight: var(--sq-w-bold); }
	.sgn-drawer__top button { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 0; border-radius: 9px; background: var(--sgn-soft); }
	.sgn-drawer__search { display: flex; align-items: center; gap: 9px; min-block-size: 46px; margin: 13px 14px 0; padding-inline: 13px; border: 1px solid var(--sgn-line); border-radius: 9px; background: var(--sgn-soft); color: var(--sgn-muted); }
	.sgn-drawer__body { overflow-y: auto; padding: 8px 14px 24px; }
	.sgn-drawer__body section { padding-block: 15px; border-block-end: 1px solid var(--sgn-line); }
	.sgn-drawer__body h2 { margin: 0 8px 6px; color: var(--sgn-muted); font-size: var(--sq-t-p3); letter-spacing: var(--sq-ls-eyebrow); text-transform: uppercase; }
	.sgn-drawer__body .sgn-row { min-block-size: 42px; }
	.sgn-drawer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 13px 14px max(13px, env(safe-area-inset-bottom)); border-block-start: 1px solid var(--sgn-line); color: var(--sgn-muted); font-size: var(--sq-t-p3); }
	.sgn-drawer__foot .sq-theme-toggle { flex-basis: 100%; color: var(--sgn-ink); }
	.sgn-drawer__cta { display: grid; place-items: center; inline-size: 100%; min-block-size: 43px; border-radius: 8px; background: var(--sgn-ink); color: var(--sgn-surface) !important; font-weight: var(--sq-w-bold); }
	.sgn-searchdeck__body { grid-template-columns: 220px minmax(0, 1fr); }
	.sgn-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
	body.admin-bar .sgn { top: 0; }
	body.admin-bar .sgn-searchdeck { inset-block-start: 46px; }
}

@media (max-width: 700px) {
	.sgn-brand { font-size: var(--sq-t-h4); }
	.sgn-sell { display: none; }
	.sgn-actions { gap: 5px; }
	.sgn-searchdeck { display: block; overflow-y: auto; }
	.sgn-searchdeck[hidden] { display: none; }
	.sgn-searchdeck__top { position: sticky; z-index: 2; top: 0; min-block-size: 66px; padding-inline: 12px 9px; background: var(--sgn-surface); }
	.sgn-searchdeck__top input { font-size: var(--sq-t-p3); }
	.sgn-searchdeck__status { display: none; }
	.sgn-searchdeck__body { display: block; }
	.sgn-searchdeck__filters { display: flex; gap: 10px; overflow-x: auto; padding: 13px; border-inline-end: 0; border-block-end: 1px solid var(--sgn-line); scroll-snap-type: x mandatory; }
	.sgn-searchdeck__filters section { flex: 0 0 min(78vw, 290px); padding: 11px; border: 1px solid var(--sgn-line); border-radius: 11px; background: var(--sgn-page); scroll-snap-align: start; }
	.sgn-searchdeck__filters section + section { margin: 0; padding-block-start: 11px; border-block-start: 1px solid var(--sgn-line); }
	.sgn-searchdeck__main { overflow: visible; padding: 24px 13px 48px; }
	.sgn-quick > div { flex-wrap: nowrap; overflow-x: auto; padding-block-end: 4px; }
	.sgn-quick a { flex: 0 0 auto; }
	.sgn-result-grid { grid-template-columns: minmax(0, 1fr); }
	.sgn-searchdeck__heading { align-items: start; }
}

@media (max-width: 390px) {
	.sgn-shell { inline-size: calc(100% - 18px); }
	.sgn-search-open,
	.sgn-action { inline-size: 39px; min-block-size: 39px; }
}

@media (prefers-reduced-motion: no-preference) {
	.sgn-pop:not([hidden]) { animation: sgn-pop-in 120ms ease both; }
}
@keyframes sgn-pop-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.sgn-drawer,
	.sgn-result-card__media img,
	.sgn-theme-switch i { transition: none; }
}