/* =====================================================================
   Zinn Hub Unified Search — Results page CSS (Phase 4a, v1-0-20)
   ----------------------------------------------------------------------
   Layers on top of flyout-v1-0-20.css (which is always enqueued for the
   pill + flyout). Loads only on the standalone results pages via
   ZHUS_Assets::enqueue_results_css().

   Consumes the site-wide --zh-* design tokens defined on :root by the
   Premium Header snippet (per spec §"CSS design tokens"). No private
   tokens are defined here.

   Phase 4a scope: hero band, page grid, result list, load-more button,
   All-tab section grouping. Filter sidebar + sort dropdown + AJAX
   skeleton arrive in Phase 4b.
   ===================================================================== */

/* ---- Page shell ---- */
.zhus-results-page {
	min-height: 60vh;
	background: var(--zh-cream, #fdfcf5);
	color: var(--zh-text, #1a1a1a);
	font-family: inherit;
}

.zhus-results-body {
	max-width: 1240px;
	margin: 0 auto;
	padding: 32px 24px 64px;
}

.zhus-results-main {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

@media (max-width: 720px) {
	.zhus-results-body {
		padding: 20px 14px 48px;
	}
}

/* ---- Hero band ---- */
.zhus-results-hero {
	background:
		linear-gradient(180deg, var(--zh-cream-warm, #fef3d4) 0%, var(--zh-cream, #fdfcf5) 100%);
	border-bottom: 1px solid var(--zh-cream-gold, #ecd9a0);
	padding: 28px 24px 32px;
}

.zhus-results-hero-inner {
	max-width: 1240px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.zhus-results-breadcrumb {
	font-size: 13px;
	color: var(--zh-text-muted, rgba(26, 26, 26, 0.7));
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.zhus-results-breadcrumb a {
	color: var(--zh-gold-dark, #8a6410);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 120ms ease;
}

.zhus-results-breadcrumb a:hover,
.zhus-results-breadcrumb a:focus {
	border-bottom-color: var(--zh-gold-dark, #8a6410);
}

.zhus-results-breadcrumb-sep {
	color: var(--zh-gold-dark, #8a6410);
	opacity: 0.6;
}

.zhus-results-breadcrumb-current {
	color: var(--zh-text, #1a1a1a);
	font-weight: 500;
}

.zhus-results-title {
	margin: 0;
	font-size: 28px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--zh-text, #1a1a1a);
}

.zhus-results-title-tab {
	color: var(--zh-gold-dark, #8a6410);
}

.zhus-results-title-q {
	color: var(--zh-gold-dark, #8a6410);
	font-style: italic;
}

@media (max-width: 720px) {
	.zhus-results-title {
		font-size: 22px;
	}
}

.zhus-results-count {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--zh-text-muted, rgba(26, 26, 26, 0.7));
	font-weight: 500;
}

/* ---- Hero search bar ---- */
.zhus-results-searchbar {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	max-width: 600px;
	background: #fff;
	border: 1px solid var(--zh-cream-gold, #ecd9a0);
	border-radius: 10px;
	padding: 4px;
	box-shadow: 0 2px 12px rgba(138, 100, 16, 0.06);
}

.zhus-results-searchbar input[type="search"] {
	flex: 1;
	border: none;
	background: transparent;
	padding: 10px 12px;
	font-size: 15px;
	color: var(--zh-text, #1a1a1a);
	min-height: 40px;
}

.zhus-results-searchbar input[type="search"]:focus {
	outline: none;
}

.zhus-results-searchbar input[type="search"]::placeholder {
	color: var(--zh-text-muted, rgba(26, 26, 26, 0.6));
}

.zhus-results-searchbtn {
	display: inline-flex;
	align-items: center;
	padding: 0 18px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--zh-gold-dark, #8a6410);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background 120ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.zhus-results-searchbtn:hover,
.zhus-results-searchbtn:focus {
	background: var(--zh-gold, #B8860B);
}

.zhus-results-searchbtn:focus-visible {
	outline: 2px solid var(--zh-gold, #B8860B);
	outline-offset: 2px;
}

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

.zhus-results-list .zhus-result {
	background: #fff;
	border: 1px solid var(--zh-cream-gold, #ecd9a0);
	border-radius: 10px;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.zhus-results-list .zhus-result:hover,
.zhus-results-list .zhus-result:focus-within {
	border-color: var(--zh-cream-gold-strong, #d4b56a);
	box-shadow: 0 2px 14px rgba(138, 100, 16, 0.08);
}

/* The inner card partials already include their own padding via the
   flyout-scoped CSS. We just provide the outer chrome here. */

/* ---- Empty state ---- */
.zhus-results-empty {
	padding: 48px 24px;
	background: #fff;
	border: 1px dashed var(--zh-cream-gold, #ecd9a0);
	border-radius: 12px;
	text-align: center;
}

.zhus-results-empty h2 {
	margin: 0 0 8px;
	font-size: 20px;
	color: var(--zh-gold-dark, #8a6410);
}

.zhus-results-empty p {
	margin: 0;
	color: var(--zh-text-muted, rgba(26, 26, 26, 0.7));
}

.zhus-results-empty--browse {
	background: var(--zh-cream-warm, #fef3d4);
	border-style: solid;
}

/* ---- Load-more button (query-string pagination; AJAX in 4b) ---- */
.zhus-results-loadmore {
	display: flex;
	justify-content: center;
	margin-top: 8px;
}

.zhus-results-loadmore-btn {
	display: inline-flex;
	align-items: center;
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	color: var(--zh-gold-dark, #8a6410);
	background: var(--zh-cream-warm, #fef3d4);
	border: 1px solid var(--zh-cream-gold, #ecd9a0);
	border-radius: 999px;
	text-decoration: none;
	transition: background 120ms ease, border-color 120ms ease;
}

.zhus-results-loadmore-btn:hover,
.zhus-results-loadmore-btn:focus {
	background: var(--zh-cream-gold-hover, #fae8b5);
	border-color: var(--zh-cream-gold-strong, #d4b56a);
	color: var(--zh-gold-dark, #8a6410);
}

.zhus-results-loadmore-btn:focus-visible {
	outline: 2px solid var(--zh-gold, #B8860B);
	outline-offset: 2px;
}

/* ---- All-tab section grouping ---- */
.zhus-results-page--all .zhus-results-main {
	gap: 36px;
}

.zhus-results-all-section {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zhus-results-all-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--zh-cream-gold, #ecd9a0);
}

.zhus-results-all-section-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--zh-gold-dark, #8a6410);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.zhus-results-all-section-count {
	font-size: 13px;
	color: var(--zh-text-muted, rgba(26, 26, 26, 0.7));
	white-space: nowrap;
}

.zhus-results-all-section-more {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--zh-gold-dark, #8a6410);
	background: var(--zh-cream-warm, #fef3d4);
	border: 1px solid var(--zh-cream-gold, #ecd9a0);
	border-radius: 8px;
	text-decoration: none;
	transition: background 120ms ease;
}

.zhus-results-all-section-more:hover,
.zhus-results-all-section-more:focus {
	background: var(--zh-cream-gold-hover, #fae8b5);
	color: var(--zh-gold-dark, #8a6410);
}

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

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.zhus-results-list .zhus-result,
	.zhus-results-loadmore-btn,
	.zhus-results-all-section-more,
	.zhus-results-searchbtn {
		transition: none;
	}
}

/* ---- AJAX load-more skeleton + end states ---- */
.zhus-result-skeleton {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.zhus-skeleton-bar {
	height: 12px;
	background: linear-gradient(
		90deg,
		var(--zh-cream-warm, #fef3d4) 0%,
		var(--zh-cream-gold-hover, #fae8b5) 50%,
		var(--zh-cream-warm, #fef3d4) 100%
	);
	background-size: 200% 100%;
	border-radius: 4px;
	animation: zhus-skeleton-shimmer 1.4s ease-in-out infinite;
}

.zhus-skeleton-bar--title { width: 60%; height: 16px; }
.zhus-skeleton-bar--meta  { width: 35%; height: 12px; }
.zhus-skeleton-bar--body  { width: 92%; height: 12px; }

@keyframes zhus-skeleton-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.zhus-skeleton-bar {
		animation: none;
		background: var(--zh-cream-warm, #fef3d4);
	}
}

.zhus-results-loadmore-btn[aria-busy="true"] {
	opacity: 0.7;
	cursor: progress;
}

.zhus-results-end {
	text-align: center;
	color: var(--zh-text-muted, rgba(26, 26, 26, 0.55));
	font-size: 13px;
	padding: 18px 0;
	font-style: italic;
}

.zhus-results-loadmore-error {
	text-align: center;
	color: #b54a00;
	background: #fff7ed;
	border: 1px solid #fcd9b6;
	border-radius: 8px;
	padding: 10px 14px;
	margin-bottom: 12px;
	font-size: 13px;
}

/* =====================================================================
   Body class overrides — break out of the theme's narrow content wrapper
   ----------------------------------------------------------------------
   Botiga's header.php opens (via main_wrapper_start action):
       <div class="container content-wrapper">
         <div class="row main-row">
           [our content]
   ...and footer.php closes them. The Bootstrap .container caps at ~1140px
   and .row uses display:flex which together produced the narrow-left +
   empty-right layout we saw. We defeat them specifically here.
   ===================================================================== */

/* Defeat Botiga's container + row primary wrappers (most important). */
body.zhus-results-active .container.content-wrapper,
body.zhus-results-active div.container.content-wrapper {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.zhus-results-active .row.main-row {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Botiga's breadcrumb nav has its own margin-bottom — strip it so the
   cream hero sits flush against the dark breadcrumb bar. */
body.zhus-results-active .botiga-breadcrumb-trail,
body.zhus-results-active nav.botiga-breadcrumb-trail {
	margin: 0 !important;
	padding-bottom: 0 !important;
}

/* And any other common wrappers — defensive for child themes / page builder mode. */
body.zhus-results-active .site-content,
body.zhus-results-active .content-area,
body.zhus-results-active .entry-content,
body.zhus-results-active .post-content,
body.zhus-results-active .botiga-container,
body.zhus-results-active main,
body.zhus-results-active main#main,
body.zhus-results-active main#primary,
body.zhus-results-active main#zhus-main,
body.zhus-results-active .site-main,
body.zhus-results-active article.page,
body.zhus-results-active article.post,
body.zhus-results-active .zhus-results-page {
	max-width: none !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Hide any sidebar Botiga might inject via botiga_do_sidebar action. */
body.zhus-results-active #secondary,
body.zhus-results-active aside.sidebar,
body.zhus-results-active .widget-area {
	display: none !important;
}

/* Botiga's <article> wrapper sometimes carries a card-like border/shadow
   on regular pages; flatten it on our results pages so the hero band
   sits flush against the navbar. */
body.zhus-results-active article {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Theme breadcrumbs ARE shown on results pages — we hook into Botiga Pro's
   `botiga_breadcrumb_trail_items` filter to inject the right trail. No CSS
   hide here. */

/* If the theme injects a top spacer / header padding above main content,
   strip it on results pages so the cream hero band sits directly under
   the site header. */
body.zhus-results-active .site-content {
	padding-top: 0 !important;
}

/* =========================================================================
 * Zinns search results page (/search/{term}/?post_type=product) cream hero.
 *
 * Server-side rendered by ZHUS_Zinns_Page_Hero from the
 * woocommerce_before_main_content hook (priority 5) — replaces the old dark
 * JS-injected hero from the legacy WPCode snippet. The snippet caused CLS
 * by injecting after page paint; this version is in the initial HTML payload
 * so first paint = final layout = zero shift.
 *
 * Matches the dark snippet's positioning exactly (margin-top: -100px,
 * 100vw breakout) so the Zinns page chrome doesn't move when the snippet
 * is deleted post-deploy.
 * ========================================================================= */

.zhus-zinns-hero {
	/* Full-width breakout — same pattern the dark snippet used.
	   100vw + symmetric negative margin = the band escapes whatever
	   container wraps the main content above products. */
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);

	/* Negative top margin pulls the hero up under the page chrome to sit
	   flush against the theme header band. Original dark snippet used
	   -100px, which we tried in v1.4.15 and dropped in v1.4.16 because it
	   overlapped Botiga's duplicate breadcrumb + page-header h1 (those
	   elements were colour-camouflaged by the dark hero in the legacy
	   snippet but exposed against cream). Both blockers were removed in
	   v1.4.17 (duplicate page-header h1 unhooked via
	   `remove_action( 'botiga_page_header', 'botiga_woocommerce_page_header' )`)
	   and v1.4.18 (duplicate WC breadcrumb unhooked at
	   `woocommerce_before_main_content` priority 20), so negative margin
	   is safe again. -80px (rather than the original -100px) is the
	   correct value for the post-v1.4.18 layout — pulls flush under the
	   theme header without overshooting into the breadcrumb-trail strip
	   above it. Verified visually on
	   `/search/{term}/?post_type=product` URLs (v1.4.20 deploy). */
	margin-top: -80px;
	margin-bottom: 40px;

	/* Cream gradient — picks up the site-wide tokens defined by the
	   Premium Header snippet on :root. Mirrors the gradient direction the
	   dark snippet used (135deg) so the visual rhythm carries over. */
	background: linear-gradient(
		135deg,
		var(--zh-cream, #fff7e6) 0%,
		var(--zh-cream-warm, #fbecd0) 50%,
		var(--zh-cream-gold, #f4dfa8) 100%
	);

	padding: 60px 20px;
	text-align: center;
	position: relative;
	overflow: hidden;

	/* CLS guard — declare the box height up-front so even if the
	   count-pill number arrives late (it doesn't, it's server-rendered,
	   but defensive against any future font swap or async fetch) the
	   reservation is stable. 240px matches the typical rendered height
	   of the 3-line layout (pill → h1 → line → searchbar) at desktop. */
	min-height: 240px;
}

/* Soft radial accent — same idea as the dark hero's
   radial-gradient(ellipse at center, ...) overlay, tinted to gold instead
   of warm dark. Pure decoration, no interaction. */
.zhus-zinns-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		ellipse at center,
		rgba(184, 134, 11, 0.08) 0%,
		transparent 70%
	);
	pointer-events: none;
}

.zhus-zinns-hero-inner {
	max-width: 900px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

/* Brand label pill — "Zinn Freelancer Services" with magnifying glass icon.
   Static text, no number. Replaces the count badge from the previous design
   because the WC main-query count (e.g. 1,289) and the Zinn AI Product
   Filter's filtered count (e.g. 893) measured different things and showed
   contradictory numbers — the AI-filtered count is shown in the filter bar
   below where users care about it. Pill here is now a visual anchor only. */
.zhus-zinns-label-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(184, 134, 11, 0.12);
	border: 1px solid rgba(184, 134, 11, 0.35);
	color: var(--zh-text, #2a1f0a);
	padding: 8px 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;

	/* CLS guard — line-height fixes the pill height regardless of font swap. */
	line-height: 1.4;
	min-height: 32px;
}

.zhus-zinns-label-pill svg {
	width: 16px;
	height: 16px;
	fill: var(--zh-gold, #b8860b);
	flex-shrink: 0;
}

/* H1 heading — "Search Results for 'video'". */
.zhus-zinns-title {
	color: var(--zh-text, #2a1f0a);
	font-size: 42px;
	font-weight: 700;
	margin: 0;
	text-transform: none;
	line-height: 1.2;
}

/* Gold-highlight the query term inside the heading. */
.zhus-zinns-title-q {
	color: var(--zh-gold, #b8860b);
	position: relative;
}

/* Decorative gold accent under the heading — same idea as the dark
   snippet's decorative-line, but lighter for the cream theme. */
.zhus-zinns-decorative {
	width: 80px;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--zh-gold, #b8860b),
		var(--zh-gold-dark, #8b6508)
	);
	border-radius: 2px;
	display: block;
}

/* Trending chips row — 8 pre-curated query suggestions sourced from
   ZHUS_Trending::top_queries(). Same data + exclusions as the flyout's
   trending chips (length 2-50, last 30 days, results_count > 0,
   query_text NOT LIKE '[%' for system tags, and a final blacklist filter).
   Plain <a> links so they work without JS for navigation; the click
   handler in flyout-v1-0-20.js fires zhus_trending_click before navigation
   for analytics parity with the flyout chips. */
.zhus-zinns-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 6px;
	max-width: 700px;

	/* CLS guard — declare a minimum height so even if the chips arrive
	   late from a cache miss, the band height is stable. 40px is the
	   rendered height of a single chip row. */
	min-height: 40px;
}

.zhus-zinns-chip {
	display: inline-flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(184, 134, 11, 0.4);
	color: var(--zh-text, #2a1f0a);
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
		transform 0.15s ease;
}

.zhus-zinns-chip:hover,
.zhus-zinns-chip:focus-visible {
	background: var(--zh-gold, #b8860b);
	color: #ffffff;
	border-color: var(--zh-gold, #b8860b);
	transform: translateY(-1px);
	text-decoration: none;
}

.zhus-zinns-chip:focus-visible {
	outline: 2px solid var(--zh-gold-dark, #8b6508);
	outline-offset: 2px;
}

/* Responsive — mobile gets a tighter hero with smaller heading; chips
   wrap to multiple rows as needed and stay tap-target-sized. */
@media (max-width: 768px) {
	.zhus-zinns-hero {
		padding: 40px 15px;
		margin-bottom: 24px;
		min-height: 200px;
	}

	.zhus-zinns-title {
		font-size: 26px;
	}

	.zhus-zinns-label-pill {
		font-size: 13px;
	}

	.zhus-zinns-chips {
		max-width: 100%;
	}

	.zhus-zinns-chip {
		font-size: 12px;
		padding: 7px 13px;
	}
}

/* =========================================================================
 * Belt-and-braces hide for the WC / botiga product-archive page header.
 *
 * Primary suppression happens in PHP via:
 *   remove_action( 'botiga_page_header', 'botiga_woocommerce_page_header' )
 *   add_filter( 'woocommerce_show_page_title', '__return_false' )
 *
 * That covers the standard botiga theme path. These CSS rules catch the
 * edge cases where the same page-header markup might still leak in:
 *   - botiga-pro Elementor template builder variant
 *     (inc/modules/templates-builder/components/elementor/woocommerce/shop-archive-title.php)
 *   - botiga-pro Gutenberg block variant
 *     (inc/modules/templates-builder/components/gutenberg/src/shop-archive-title/block.php)
 *   - any third-party plugin that prints the same .woocommerce-page-header
 *     selectors through its own pipeline.
 *
 * Scoped to body.zhus-zinns-hero-active so this only affects our cream
 * hero page; the page header still renders normally on /shop/ and other
 * WC archives.
 *
 * Mirrors the selector list from the original "Zinn Hub Search Results
 * Page Styling" WPCode snippet (which used the same defensive technique).
 * ========================================================================= */

body.zhus-zinns-hero-active .woocommerce-page-header,
body.zhus-zinns-hero-active header.woocommerce-page-header,
body.zhus-zinns-hero-active .woocommerce-products-header,
body.zhus-zinns-hero-active .woocommerce-products-header__title,
body.zhus-zinns-hero-active .woocommerce-products-header__title.page-title,
body.zhus-zinns-hero-active .woocommerce-page-header-style1,
body.zhus-zinns-hero-active .woocommerce-page-header-style2,
body.zhus-zinns-hero-active .woocommerce-page-header-style3,
body.zhus-zinns-hero-active .woocommerce-breadcrumb {
	display: none !important;
}

/* Close the gap between the top breadcrumb band and the cream hero.
   The breadcrumb-trail sits at the top of .site-content; .site-content
   has botiga's default `padding-top` which pushes the hero down. The
   virtual results pages (/search-all/, /zinners/, /articles/) zero this
   via the `body.zhus-results-active` rule earlier in this file, but we
   deliberately don't apply that body class on the Zinns search page
   because it strips containers globally. Scope this single rule instead
   so it only fires on our page. */
body.zhus-zinns-hero-active .site-content {
	padding-top: 0 !important;
}

/* =====================================================================
   Phase 5 — Promotion surface styles
   ----------------------------------------------------------------------
   1. Right-rail aside (sidebar slot home) on results-all, results-articles,
      results-sellers. Sticky on scroll, hidden below 1024px so mobile users
      get the full content width.
   2. Promoted-card wrapper + Ad badge. Subtle amber tint distinguishes a
      paid card from organic without making it look like a separate
      surface; "Ad" pill in the top-right corner is the disclosure.
   3. Sponsored-line slot — thin text-link strip at the very bottom.
   ===================================================================== */

/* --- Right rail layout -------------------------------------------- */
.zhus-results-body--with-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
}
@media (min-width: 1024px) {
	.zhus-results-body--with-aside {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
}
.zhus-results-aside {
	display: none;
}
@media (min-width: 1024px) {
	.zhus-results-aside {
		display: block;
		position: sticky;
		top: 80px;
		align-self: start;
		max-height: calc(100vh - 96px);
		overflow-y: auto;
	}
	.zhus-results-aside:empty {
		display: none;
	}
}

/* --- Promoted-card wrapper + Ad badge ----------------------------- */
.zhus-promoted-wrap {
	position: relative;
	display: block;
	background: var(--zh-cream-warm, #fbf5e9);
	border: 1px solid var(--zh-cream-gold, #efe4c5);
	border-radius: 10px;
	padding: 4px;
}
.zhus-promoted-wrap .zhus-result-card,
.zhus-promoted-wrap .zhus-results-list-item {
	background: transparent;
}
.zhus-ad-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: inline-block;
	padding: 2px 8px;
	background: var(--zh-gold, #c79a3a);
	color: #2c1d05;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 9px;
	pointer-events: none;
}

/* --- Inline slot list-item — no list bullet, full-width row --------- */
.zhus-result--inline-slot {
	list-style: none;
	margin: 12px 0;
}
.zhus-result--inline-slot:empty {
	display: none;
}

/* --- Sponsored line slot — thin text-link strip at page bottom ----- */
.zhus-results-sponsored-line:empty {
	display: none;
}

/* =========================================================================
 * Empty-state / no-results UPSELL (1.9.25 — ZHUS_Upsell).
 *
 * Three server-rendered discovery sections shown when /search-all/ has no
 * query or zero results, and (chips + best-sellers only) on /all-categories/:
 *   1. Trending chips  — reuses the .zhus-zinns-chip pill styling (above),
 *      left-aligned here instead of the hero's centred row.
 *   2. Popular categories — reuses the flyout's .zhus-cat-* row components
 *      (styled in flyout-{ver}.css, loaded as a dependency of this file).
 *   3. Best-selling Zinns — a responsive card grid reusing the standard
 *      .zhus-results-list card chrome + the zinn result-card partial. The
 *      grid pattern mirrors the marketplace-showcase grid (ZHUS_All_Embed).
 * ========================================================================= */
.zhus-results-upsell {
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin-top: 28px;
}

/* 1.9.34 (designfix1) — /all-categories/ spacing: on the hub each upsell
   block is its OWN standalone .zhus-results-upsell wrapper (trending chips
   at the top, best-sellers at the bottom — results-categories.php), so the
   28px flex gap that separates siblings on /search-all/ never applies and
   the trending row sat flush against .zinn-categories-hub__sections (which
   has no top margin). Mirror the gap with a bottom margin on the hub's
   direct-child wrappers (0,2,0 beats the 0,1,0 base; harmless on the
   bottom strip too). */
.zinn-categories-hub > .zhus-results-upsell {
	margin-bottom: 28px;
}

.zhus-results-upsell .zhus-upsell-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Heading reuses the section-title treatment; the border-bottom comes from
   wrapping it in the standard .zhus-results-all-section-head. */

.zhus-upsell-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	min-height: 40px;
}

/* Best-sellers strip — 1.9.34 (designfix1): full-width one-card-per-row
   layout (Neil: the image + title are the main thing, not a cramped 4-col
   grid). The image becomes the dominant left element; title/price/rating/
   badges/excerpt breathe on the right. Everything below inherits the
   existing cream card chrome (.zhus-results-list .zhus-result + the flyout
   .zhus-result-card/-thumb/-title tokens) — this is a layout layer only.
   Scoped entirely under .zhus-upsell-grid, which is used by this strip
   alone (both pages, incl. the zero-results state). */
.zhus-upsell-grid {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.zhus-upsell-grid > .zhus-result {
	margin: 0;
}
.zhus-upsell-grid > .zhus-result > .zhus-result-card {
	gap: 18px;
	padding: 14px 16px;
	align-items: flex-start;
}
/* Dominant image (or the placeholder span — same box). Overrides the
   flyout's 56/64px thumb square. */
.zhus-upsell-grid .zhus-result-thumb {
	flex: 0 0 220px;
	width: 220px;
	height: 150px;
	border-radius: 10px;
}
.zhus-upsell-grid .zhus-result-title {
	font-size: 18px;
	line-height: 1.3;
	-webkit-line-clamp: 2;
}
.zhus-upsell-grid .zhus-result-meta {
	font-size: 14px;
}
.zhus-upsell-grid .zhus-result-reviews {
	font-size: 13px;
}
/* Badges: one horizontal row at full width (the base .zhus-badge-row is
   already flex + wrap — the old "stacked" look was just the narrow column). */
.zhus-upsell-grid .zhus-badge-row {
	margin-top: 4px;
}
.zhus-upsell-grid .zhus-result-excerpt {
	font-size: 13px;
	line-height: 1.45;
}
@media (max-width: 640px) {
	/* Image stacks above the content; no horizontal overflow. */
	.zhus-upsell-grid > .zhus-result > .zhus-result-card {
		flex-direction: column;
		gap: 12px;
	}
	.zhus-upsell-grid .zhus-result-thumb {
		flex: 0 0 auto;
		width: 100%;
		height: 180px;
	}
	.zhus-upsell-grid .zhus-result-title {
		font-size: 16px;
	}
}

/* Popular-categories reuse: the flyout empty-state block renders its five
   .zhus-cat-section lists vertically; on the wide standalone page let them
   flow into columns so the section doesn't become one long single column. */
.zhus-results-upsell .zhus-categories-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px;
	align-items: start;
}
@media (max-width: 640px) {
	.zhus-results-upsell .zhus-categories-results {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Zero-results wrapper — "Nothing matched — try these" heading + the three
   upsell sections beneath the empty-state card. */
.zhus-results-noresults-upsell {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 32px;
}
.zhus-results-noresults-upsell .zhus-results-upsell {
	margin-top: 0;
}