/* =========================================================================
 * Zinn Hub Unified Search — flyout + pill stylesheet
 * Version: v1-0-20 (filename-versioned; Cloudflare strips ?ver=)
 *
 * Per-version detail lives in docs/README.md (the canonical changelog).
 * This file header was previously a duplicate changelog block that kept
 * going stale across asset-folder bumps; replaced with a pointer in
 * v1.4.20 so there's only one place to update on each release.
 *
 * Design tokens: consumes the site-wide --zh-* tokens defined on :root by
 * the Premium Header snippet. We DO NOT define any --zhus-* tokens. If a
 * token is missing, add it to the Premium Header shared :root.
 *
 * Required tokens (provided by Premium Header v1.6.x):
 *   --zh-gold, --zh-gold-dark, --zh-cream, --zh-cream-warm,
 *   --zh-cream-gold, --zh-cream-gold-hover, --zh-cream-gold-strong,
 *   --zh-dark, --zh-darker, --zh-text, --zh-text-muted
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 1. Pill (Variant B — icon + "Search" label, 44px chip)
 *    Pasted as static markup into the Botiga HTML 2 component.
 *    Sits between the nav menu and the currency chip.
 * ------------------------------------------------------------------------- */

.zhus-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--zh-cream-gold);
	border-radius: 22px;
	background: var(--zh-cream);
	color: var(--zh-text);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, transform 80ms ease;
	-webkit-tap-highlight-color: transparent;
}

.zhus-trigger:hover {
	background: var(--zh-cream-warm);
	border-color: var(--zh-cream-gold-hover);
}

.zhus-trigger:active {
	transform: translateY(1px);
}

.zhus-trigger:focus-visible {
	outline: 2px solid var(--zh-gold);
	outline-offset: 2px;
}

.zhus-trigger[aria-expanded="true"] {
	background: var(--zh-cream-gold-strong);
	border-color: var(--zh-gold);
}

/* v1-0-21 — immediate "opening" feedback for a cold first click (flyout HTML
   not yet warmed). JS adds .zhus-trigger-loading the instant the pill is
   clicked and removes it once the panel opens (or the fetch errors), so the
   pill visibly responds even while the first AJAX fetch is in flight and never
   reads as dead. A subtle icon pulse — no layout shift. */
.zhus-trigger-loading {
	cursor: progress;
}
.zhus-trigger-loading .zhus-trigger-icon {
	animation: zhus-trigger-pulse 0.8s ease-in-out infinite;
}
@keyframes zhus-trigger-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.86); }
}
@media (prefers-reduced-motion: reduce) {
	.zhus-trigger-loading .zhus-trigger-icon { animation: none; opacity: 0.6; }
}

/* Icon: inline data-URI background so it survives Botiga's wp_kses_post strip. */
.zhus-trigger-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23a8842b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>');
	background-repeat: no-repeat;
	background-size: contain;
}

.zhus-trigger-label {
	white-space: nowrap;
}

.zhus-trigger-kbd {
	margin-left: 4px;
	padding: 2px 6px;
	border: 1px solid var(--zh-cream-gold);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.6);
	color: var(--zh-text-muted);
	font-size: 11px;
	line-height: 1;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* -------------------------------------------------------------------------
 * Mobile main header — icon-only chip variant (≤1024px, matches Botiga's
 * desktop/mobile breakpoint). The same HTML 2 markup pasted as the desktop
 * labelled pill renders as a compact 40×40 cream rounded-square in the
 * mobile main header bar, visually matching the WooCommerce icons sitting
 * next to it. Label and ⌘K kbd hint hide; icon scales up to 22px so it
 * reads at a glance.
 *
 * Note: Botiga's mobile builder takes over at ≤1024px (see botiga-bhfb.min.css
 * `@media (min-width:1025px){.bhfb-mobile{display:none}}`), so this breakpoint
 * is the right boundary for the icon-only treatment.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.zhus-trigger {
		width: 40px;
		height: 40px;
		padding: 0;
		gap: 0;
		justify-content: center;
		border-radius: 8px;
	}
	.zhus-trigger-label,
	.zhus-trigger-kbd {
		display: none;
	}
	.zhus-trigger-icon {
		width: 22px;
		height: 22px;
	}
}

/* -------------------------------------------------------------------------
 * 2. Flyout panel (lazy-loaded; sits at body level once injected).
 * ------------------------------------------------------------------------- */

.zhus-flyout {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 80px 16px 16px;
	opacity: 0;
	transition: opacity 200ms ease;
	pointer-events: none;
}

.zhus-flyout[hidden] {
	display: none;
}

.zhus-flyout.is-open {
	opacity: 1;
	pointer-events: auto;
}

.zhus-flyout-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 24, 0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.zhus-flyout-panel {
	position: relative;
	width: 100%;
	max-width: 760px;
	max-height: calc(100vh - 96px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--zh-cream);
	border: 1px solid var(--zh-cream-gold);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
	transform: translateY(-8px);
	transition: transform 200ms ease;
}

.zhus-flyout.is-open .zhus-flyout-panel {
	transform: translateY(0);
}

/* Gold accent line at the top of the panel. */
.zhus-flyout-panel::before {
	content: "";
	display: block;
	height: 3px;
	background: linear-gradient(90deg,
		var(--zh-gold) 0%,
		var(--zh-gold-dark) 50%,
		var(--zh-gold) 100%);
}

/* -------------------------------------------------------------------------
 * 3. Skip link.
 * ------------------------------------------------------------------------- */

.zhus-skiplink {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.zhus-skiplink:focus {
	left: 16px;
	top: 16px;
	width: auto;
	height: auto;
	padding: 8px 12px;
	background: var(--zh-darker);
	color: var(--zh-cream);
	border-radius: 6px;
	z-index: 1;
}

/* -------------------------------------------------------------------------
 * 4. Header.
 * ------------------------------------------------------------------------- */

.zhus-flyout-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px 12px;
	flex-shrink: 0;
}

.zhus-flyout-title {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: var(--zh-text);
}

.zhus-flyout-close {
	width: 36px;
	height: 36px;
	border: 1px solid var(--zh-cream-gold);
	border-radius: 18px;
	background: transparent;
	color: var(--zh-text);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.zhus-flyout-close:hover {
	background: var(--zh-cream-warm);
}

.zhus-flyout-close:focus-visible {
	outline: 2px solid var(--zh-gold);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 5. Tablist (6 segmented tabs).
 * ------------------------------------------------------------------------- */

.zhus-tablist {
	display: flex;
	gap: 4px;
	padding: 0 24px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--zh-cream-gold);
	flex-shrink: 0;
	/* 1.9.11 — Base (desktop/tablet) behaviour: WRAP. With all eight tabs
	 * (All, Zinns, Micro Zinns, Freelancers, Sellers, Projects, Articles,
	 * Categories) the row exceeded the 760px panel and the last tab
	 * (Categories) was clipped off the right edge. Desktop has no touch
	 * affordance and the scroll-hint chevron below is mobile-only, so a
	 * mouse-only user had no way to reach it. Wrapping to a second row keeps
	 * every tab reachable at all widths. overflow stays visible so a wrapped
	 * second row is never clipped. Mobile overrides this back to a single
	 * scrolling row (see the max-width:768px block) to preserve the deliberate
	 * 1.6.7 scroll-hint UX and save vertical space on small screens. */
	flex-wrap: wrap;
}

/* WebKit/Blink: hide the horizontal scrollbar too. Tabs still scroll
 * via touch/wheel/keyboard when they overflow on narrow screens. */
.zhus-tablist::-webkit-scrollbar {
	display: none;
}

.zhus-tab {
	flex: 0 0 auto;
	padding: 10px 14px;
	border: none;
	background: transparent;
	color: var(--zh-text-muted);
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 120ms ease, border-color 120ms ease;
}

.zhus-tab:hover {
	color: var(--zh-text);
}

.zhus-tab:focus-visible {
	outline: 2px solid var(--zh-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

.zhus-tab[aria-selected="true"] {
	color: var(--zh-text);
	border-bottom-color: var(--zh-gold);
}

/* -------------------------------------------------------------------------
 * 6. Tab panel.
 * ------------------------------------------------------------------------- */

.zhus-tabpanel {
	padding: 12px 24px 20px;
	overflow-y: auto;
	flex: 1 1 auto;
}

.zhus-tabpanel[hidden] {
	display: none;
}

.zhus-tab-description {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--zh-text-muted);
}

.zhus-search-form {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.zhus-search-input {
	flex: 1 1 auto;
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--zh-cream-gold);
	border-radius: 22px;
	background: #fff;
	color: var(--zh-text);
	font-size: 15px;
	font: inherit;
	font-size: 15px;
}

.zhus-search-input:focus {
	outline: 2px solid var(--zh-gold);
	outline-offset: 1px;
	border-color: var(--zh-gold);
}

.zhus-search-submit {
	height: 44px;
	padding: 0 20px;
	border: 1px solid var(--zh-gold);
	border-radius: 22px;
	background: var(--zh-gold);
	color: var(--zh-darker);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.zhus-search-submit:hover {
	background: var(--zh-gold-dark);
	border-color: var(--zh-gold-dark);
}

.zhus-search-submit:focus-visible {
	outline: 2px solid var(--zh-darker);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * 7. Preview area.
 * ------------------------------------------------------------------------- */

.zhus-preview {
	min-height: 80px;
}

.zhus-preview-empty,
.zhus-preview-loading,
.zhus-preview-error {
	padding: 20px;
	text-align: center;
	color: var(--zh-text-muted);
	font-size: 14px;
}

.zhus-preview-error {
	color: #b32d2e;
}

/* -------------------------------------------------------------------------
 * 8. Footer link.
 * ------------------------------------------------------------------------- */

.zhus-tab-footer {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--zh-cream-gold);
	text-align: right;
}

.zhus-view-all {
	color: var(--zh-text);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: color 120ms ease;
}

.zhus-view-all:hover {
	color: var(--zh-gold-dark);
}

.zhus-view-all:focus-visible {
	outline: 2px solid var(--zh-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * 9. Mobile takeover (<768px).
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.zhus-flyout {
		padding: 0;
		align-items: stretch;
	}
	.zhus-flyout-panel {
		max-width: none;
		max-height: 100vh;
		height: 100vh;
		border-radius: 0;
		border: none;
	}
	.zhus-flyout-panel::before { display: none; }
	.zhus-flyout-header { padding: 16px 16px 8px; }
	.zhus-tablist { padding: 0 16px; }
	.zhus-tabpanel { padding: 12px 16px 16px; }

	/* 1.6.7 — Right-edge scroll-hint overlay. Replaces the 1.6.5 mask-image
	 * approach, which failed silently: mask fades content to transparent, but
	 * the flyout panel sitting behind the tablist is also var(--zh-cream),
	 * so "fading to transparent" revealed identical cream pixels — no visible
	 * cue. Confirmed in production at v1-0-17.
	 *
	 * Fix: a position:sticky pseudo-element pinned to the right edge of the
	 * scroll container. It carries (a) a linear-gradient from transparent to
	 * cream so the rightmost tab visibly fades INTO the panel background, AND
	 * (b) a gold › chevron as an explicit "more this way" indicator. The
	 * pseudo-element is pointer-events:none so it doesn't intercept taps on
	 * tabs underneath it. */
	.zhus-tablist {
		position: relative;
		/* 1.9.11 — On mobile, override the desktop wrap back to a single
		 * scrolling row. Touch users can swipe, the sticky ::after chevron
		 * below signals "more this way", and a single row saves vertical
		 * space in the full-height mobile flyout. overflow-y MUST be explicit:
		 * setting overflow-x: auto alone makes the browser default overflow-y
		 * to auto too, producing a spurious vertical scrollbar. */
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none; /* Firefox: hide thin scrollbar */
	}
	.zhus-tablist::after {
		content: '\203A'; /* › single right-pointing angle quotation */
		position: sticky;
		right: 0;
		flex-shrink: 0;
		width: 36px;
		height: 100%;
		margin-left: -36px;
		pointer-events: none;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 8px;
		background: linear-gradient(to right, transparent, var(--zh-cream) 60%);
		color: var(--zh-gold);
		font-size: 20px;
		font-weight: 600;
		line-height: 1;
	}
}

/* -------------------------------------------------------------------------
 * 10. Screen-reader helper (used by the search input label).
 * ------------------------------------------------------------------------- */

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

/* -------------------------------------------------------------------------
 * 11. Reduced motion.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.zhus-trigger,
	.zhus-flyout,
	.zhus-flyout-panel,
	.zhus-flyout-close,
	.zhus-tab,
	.zhus-search-submit,
	.zhus-view-all {
		transition: none !important;
	}
}

/* -------------------------------------------------------------------------
 * 12. Result cards (Phase 3a).
 * ------------------------------------------------------------------------- */

/* When the dynamic preview renders its own "See all N results" footer link,
 * hide the always-on static .zhus-tab-footer underneath so we don't show
 * two near-identical "See all in X →" links. */
.zhus-tabpanel.zhus-has-results .zhus-tab-footer {
	display: none;
}

.zhus-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.zhus-result {
	margin: 0;
	padding: 0;
}

.zhus-result-card {
	display: flex;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--zh-text);
	text-decoration: none;
	transition: background-color 100ms ease;
	align-items: flex-start;
}

.zhus-result-card:hover,
.zhus-result-card:focus-visible {
	background: var(--zh-cream-warm);
	outline: none;
}

.zhus-result-card:focus-visible {
	box-shadow: 0 0 0 2px var(--zh-gold);
}

/* Thumbnails / avatars */
.zhus-result-thumb,
.zhus-result-avatar {
	flex: 0 0 auto;
	display: block;
	overflow: hidden;
	background: var(--zh-cream-gold);
}

.zhus-result-thumb {
	width: 56px;
	height: 56px;
	border-radius: 8px;
}

.zhus-result-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.zhus-result-thumb img,
.zhus-result-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.zhus-result-thumb--placeholder,
.zhus-result-avatar--placeholder {
	background: linear-gradient(135deg, var(--zh-cream-gold), var(--zh-cream-warm));
}

/* Body */
.zhus-result-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.zhus-result-title {
	font-size: 14px;
	font-weight: 600;
	color: var(--zh-text);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.zhus-result-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-size: 12px;
	color: var(--zh-text-muted);
	line-height: 1.4;
}

.zhus-result-price {
	color: var(--zh-text);
	font-weight: 500;
}

.zhus-result-price .amount,
.zhus-result-price ins,
.zhus-result-price del {
	color: inherit;
	text-decoration: inherit;
}

.zhus-result-rating {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
}

.zhus-result-rating span[aria-hidden="true"] {
	color: var(--zh-gold-dark);
}

.zhus-result-reviews {
	color: var(--zh-text-muted);
	font-size: 11px;
}

.zhus-result-excerpt {
	font-size: 12px;
	color: var(--zh-text-muted);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Badges */
.zhus-badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 2px;
}

.zhus-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 7px;
	border-radius: 10px;
	background: var(--zh-cream-gold);
	color: var(--zh-text);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

.zhus-badge-verified,
.zhus-badge-trusted,
.zhus-badge-partner {
	background: var(--zh-cream-gold-strong);
}

.zhus-badge-emoji {
	font-size: 11px;
	line-height: 1;
}

/* Footer "See all in X →" link below the result list. */
.zhus-results-footer-link {
	display: block;
	margin-top: 12px;
	padding: 8px 12px;
	text-align: right;
	color: var(--zh-text);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	border-top: 1px solid var(--zh-cream-gold);
	transition: color 120ms ease;
}

.zhus-results-footer-link:hover {
	color: var(--zh-gold-dark);
}

.zhus-results-footer-link:focus-visible {
	outline: 2px solid var(--zh-gold);
	outline-offset: 2px;
	border-radius: 4px;
}

/* =====================================================================
   Phase 3b additions — v1.3.0 / v1-0-5
   ----------------------------------------------------------------------
   - Trending chip row (Zinns + All tab empty states)
   - Article result card variant (thumbnail + meta + excerpt)
   - Seller result card (mostly inherits .zhus-result-freelancer)
   - All-tab section grouping (title, list, "See all in X →" link, slot)
   ===================================================================== */

/* ---- Trending chips ---- */
.zhus-trending {
	margin: 8px 0 12px;
	padding: 10px 12px;
	background: var(--zh-cream-warm);
	border: 1px solid var(--zh-cream-gold);
	border-radius: 10px;
}

.zhus-trending[hidden] {
	display: none !important;
}

.zhus-trending-label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--zh-gold-dark);
}

.zhus-trending-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zhus-trending-chip {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zhus-trending-chip-btn {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: var(--zh-text);
	background: #fff;
	border: 1px solid var(--zh-cream-gold);
	border-radius: 14px;
	cursor: pointer;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.zhus-trending-chip-btn:hover,
.zhus-trending-chip-btn:focus {
	background: var(--zh-cream-gold-hover);
	border-color: var(--zh-cream-gold-strong);
	color: var(--zh-gold-dark);
}

.zhus-trending-chip-btn:focus-visible {
	outline: 2px solid var(--zh-gold);
	outline-offset: 2px;
}

/* 1.9.27 — category-backfill pills render as <a> (navigate to the archive)
   but share the button chip look; kill the default anchor underline. */
a.zhus-trending-chip-btn,
a.zhus-trending-chip-link {
	text-decoration: none;
}

/* ---- Article result card ---- */
.zhus-result-article {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 12px;
	text-decoration: none;
	color: var(--zh-text);
	border-radius: 8px;
	transition: background 120ms ease;
}

.zhus-result-article:hover,
.zhus-result-article:focus {
	background: var(--zh-cream-warm);
	color: var(--zh-text);
}

.zhus-result-article:focus-visible {
	outline: 2px solid var(--zh-gold);
	outline-offset: 2px;
}

.zhus-result-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--zh-cream-bed);
	border: 1px solid var(--zh-cream-gold);
}

.zhus-result-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zhus-result-thumb--placeholder {
	background: var(--zh-cream-warm);
}

.zhus-result-thumb-icon {
	font-size: 24px;
	opacity: 0.6;
}

/* ---- Seller card inherits freelancer card styling.
       Add a subtle visual differentiator on the avatar border. ---- */
.zhus-result-seller .zhus-result-avatar {
	border-radius: 10px; /* squarer than freelancer's circle, signals storefront */
}

.zhus-result-seller .zhus-result-avatar img {
	border-radius: 8px;
}

/* ---- All tab section grouping ---- */
.zhus-results--all {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.zhus-all-section {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--zh-cream-gold);
}

.zhus-all-section:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.zhus-all-section-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--zh-gold-dark);
}

.zhus-results--section {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.zhus-all-section-more {
	align-self: flex-end;
	margin-top: 4px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--zh-gold-dark);
	text-decoration: none;
	border-radius: 6px;
	transition: background 120ms ease;
}

.zhus-all-section-more:hover,
.zhus-all-section-more:focus {
	background: var(--zh-cream-warm);
}

.zhus-all-section-more:focus-visible {
	outline: 2px solid var(--zh-gold);
	outline-offset: 2px;
}

/* When the All tab uses section grouping, hide the static tab-footer link
   that ZHUS_Flyout's template renders — each section has its own link now. */
.zhus-tabpanel[data-zhus-panel="all"].zhus-has-results .zhus-tab-footer {
	display: none;
}

/* =====================================================================
   WooCommerce Subscriptions price overrides
   ----------------------------------------------------------------------
   The Subscriptions plugin renders <span class="subscription-details">
   inside the price span containing the recurring period + sign-up fee
   ("/ month for 2 months and a $200.00 sign-up fee"). Its default CSS
   colours this very light (intended for a white background) which makes
   it near-invisible on our cream cards. Force readable text.
   ===================================================================== */
.zhus-result-price .subscription-details,
.zhus-results-list .subscription-details,
.zhus-results-all-section .subscription-details {
	color: var(--zh-text-muted, #5c5c5c) !important;
	font-size: 0.92em;
	font-weight: 500;
	display: inline;
	opacity: 1 !important;
}

.zhus-result-price .subscription-details .woocommerce-Price-amount,
.zhus-result-price .subscription-details .zcur,
.zhus-results-list .subscription-details .woocommerce-Price-amount,
.zhus-results-list .subscription-details .zcur {
	color: var(--zh-text, #1a1a1a) !important;
	font-weight: 600;
}

/* Free-trial label, if present, gets the same dark treatment. */
.zhus-result-price ins,
.zhus-result-price del,
.zhus-results-list ins,
.zhus-results-list del {
	background: transparent !important;
}
.zhus-result-price ins {
	color: var(--zh-text, #1a1a1a) !important;
	text-decoration: none !important;
}
.zhus-result-price del {
	color: var(--zh-text-muted, #5c5c5c) !important;
}

/* =============================================================================
 * 1.7.0 — Categories tab + All-tab Categories sections.
 * ============================================================================= */

/* Dedicated Categories tab — sub-sectioned layout (Zinn Cats / Freelancer
 * Cats / Freelancer Skills / Zinner Skills). Each section has an icon-led
 * header and a list of term rows. Mobile-first: stacks at all widths.
 * Rendered via ZHUS_Tab_Categories::maybe_render_html(). */
.zhus-categories-results {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 4px 0;
}

.zhus-cat-section {
	margin: 0;
	padding: 0;
}

.zhus-cat-section-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--zh-text-muted, #5c5c5c);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 6px;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	line-height: 1.2;
}

.zhus-cat-section-icon {
	font-size: 14px;
	line-height: 1;
}

.zhus-cat-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.zhus-cat-row {
	margin: 0;
	padding: 0;
	list-style: none;
}

.zhus-cat-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 6px;
	color: var(--zh-text, #1a1a1a);
	text-decoration: none;
	font-size: 14px;
	line-height: 1.3;
	transition: background-color 120ms ease;
	min-height: 36px;
}

.zhus-cat-link:hover,
.zhus-cat-link:focus-visible {
	background: var(--zh-cream-warm, rgba(0, 0, 0, 0.04));
	outline: none;
}

.zhus-cat-link:focus-visible {
	box-shadow: 0 0 0 2px var(--zh-gold, #c8962e);
}

.zhus-cat-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zhus-cat-count {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--zh-text-muted, #5c5c5c);
	font-variant-numeric: tabular-nums;
}

/* All-tab inline variant — renders inside the section list as
 * <a class="zhus-cat-link--inline">. Same visual treatment minus the
 * surrounding <li class="zhus-result"> chrome. */
.zhus-cat-link--inline {
	margin: 2px 0;
}


/* =============================================================================
 * 1.8.0 — Categories tab visual polish:
 *   1. Icons next to category rows (real images for cats; inline SVG for skills)
 *   2. Lighter visual weight for inline Category sections inside the All tab
 *   3. Empty-state browse panel styling
 * ============================================================================= */

/* --- 1.8.0 (1) Icons ------------------------------------------------------ */

.zhus-cat-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 4px;
	overflow: hidden;
	color: var(--zh-gold, #c8962e); /* drives currentColor for inline SVGs */
	line-height: 1;
}

.zhus-cat-icon--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.zhus-cat-icon--emoji {
	font-size: 16px;
	line-height: 1;
}

.zhus-cat-icon--svg svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* Tighten the row gap to make room for the icon without growing the line. */
.zhus-cat-link {
	gap: 8px;
}

/* --- 1.8.0 (2) Lighter Category sections inside the All tab --------------- */

/* Targets the two All-tab Category sections by their data-zhus-section slugs.
 * Section header (the "ZINNS"-style title) is rendered smaller and lower-key
 * so categories feel like a contextual refinement of the entity section
 * above, not a competing entity section. */
.zhus-all-section[data-zhus-section="zinn_categories"],
.zhus-all-section[data-zhus-section="freelancer_categories"] {
	margin-top: -8px; /* pull closer to the entity section above */
}

.zhus-all-section[data-zhus-section="zinn_categories"] .zhus-all-section-title,
.zhus-all-section[data-zhus-section="freelancer_categories"] .zhus-all-section-title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--zh-text-muted, #5c5c5c);
	opacity: 0.85;
	margin-bottom: 4px;
}

.zhus-all-section[data-zhus-section="zinn_categories"] .zhus-all-section-title::before,
.zhus-all-section[data-zhus-section="freelancer_categories"] .zhus-all-section-title::before {
	content: "↳ ";
	color: var(--zh-gold, #c8962e);
	margin-right: 4px;
}

/* The inline category-term cards: compact, no card chrome, hover-only. */
.zhus-all-section[data-zhus-section="zinn_categories"] .zhus-result,
.zhus-all-section[data-zhus-section="freelancer_categories"] .zhus-result {
	padding: 0;
	background: transparent;
	border: none;
}

.zhus-all-section[data-zhus-section="zinn_categories"] .zhus-cat-link--inline,
.zhus-all-section[data-zhus-section="freelancer_categories"] .zhus-cat-link--inline {
	padding: 6px 8px;
	min-height: 32px;
	font-size: 13px;
}

/* The "See all" link for Category sections also gets the lighter treatment. */
.zhus-all-section[data-zhus-section="zinn_categories"] .zhus-all-section-more,
.zhus-all-section[data-zhus-section="freelancer_categories"] .zhus-all-section-more {
	font-size: 12px;
	opacity: 0.8;
}

/* --- 1.8.0 (3) Empty-state browse panel ---------------------------------- */

.zhus-categories-results--empty-state {
	padding-top: 4px;
}

.zhus-cat-empty-intro {
	margin: 0 0 14px;
	padding: 0 4px;
	font-size: 13px;
	color: var(--zh-text-muted, #5c5c5c);
	line-height: 1.45;
}

.zhus-cat-section--pinned .zhus-cat-section-title {
	color: var(--zh-gold, #c8962e);
}


/* 1.8.1 — Per-section "See all in [Kind] →" footer link inside dedicated
 * Categories tab. Sits at the end of each section list, lighter than the
 * universal tab footer but with a clear gold CTA tone.
 *
 * 1.8.3 — Switched from inline-block (left-default) to block + text-align
 * right to match the other tabs' "See all" alignment. Universal flyout
 * footer + All-tab section-more footer are both right-aligned; Categories
 * tab now consistent. */

.zhus-cat-section-more {
	display: block;
	text-align: right;
	margin: 6px 0 4px;
	padding: 4px 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--zh-gold, #c8962e);
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: opacity 0.15s ease;
}

.zhus-cat-section-more:hover,
.zhus-cat-section-more:focus {
	opacity: 0.75;
	text-decoration: underline;
}

/* 1.8.3 — "Related categories" addendum at the bottom of the Zinns and
 * Freelancers tabs. Visual treatment mirrors the inline category sections
 * on the All tab: lighter typography, ↳ glyph prefix, dimmed appearance to
 * indicate secondary discovery. A top-border separator delineates it from
 * the entity results + tab footer above. */

.zhus-categories-addendum {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--zh-border-subtle, rgba(184, 134, 11, 0.18));
}

.zhus-cat-addendum-intro {
	margin: 0 0 10px;
	padding: 0 4px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--zh-text-muted, #5c5c5c);
	opacity: 0.7;
}

/* Apply the same lighter typography as the All-tab inline category sections
 * (data-zhus-section-kind selectors already exist; reuse the same look). */
.zhus-categories-addendum .zhus-cat-section-title {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--zh-text-muted, #5c5c5c);
	opacity: 0.85;
	margin-bottom: 4px;
}

.zhus-categories-addendum .zhus-cat-section-title::before {
	content: "↳ ";
	color: var(--zh-gold, #c8962e);
	margin-right: 4px;
}

/* Compact rows — match the All-tab inline category row sizing. */
.zhus-categories-addendum .zhus-cat-link {
	padding: 6px 8px;
	min-height: 32px;
	font-size: 13px;
}