/*
Search suggestion results panel, Figma-parity build (86eypb6kw).
See sites/bonza/custom/search-panel/search-panel.php for the full
architecture write-up (why this is a separate overlay, not a re-skin of
FiboSearch's own dropdown) and the real-data-only scope contract.

Config investigated: FiboSearch Pro's dgwt_wcas_settings and Blocksy Pro's
Customizer have no card-layout, badge or search-panel-shell setting - see
the "CONFIG-FIRST CHECK" note in search-panel.php for the full record.
This is a genuine code gap, not an unset native toggle.

editor-friendly-ok: this file styles a fixed interactive overlay (a modal
triggered by the header search icon), not editable page content - there is
no block-editor surface for it to render inside, so add_editor_style()
does not apply here the way it does for the homepage/category-page
sections. Colors reuse this theme's registered presets
(--wp--preset--color--bhp-cream/-green/-white/-peach/-ink) everywhere they
match. CORRECTED (86eyv0k44 GL-05, 2026-09-15): the registered `bhp-ink`
preset was `#494545` against Figma's real `#2E2A2A`, so this file's ink
text previously bypassed the preset with a hardcoded `#2E2A2A` literal to
avoid reintroducing that color-accuracy regression (86eypb6kw's own audit
had already recomputed contrast against the real Figma value, not the
then-wrong sitewide preset). The preset registration (homepage.php) is now
fixed to `#2E2A2A`, so this file's ink declarations consume
`var(--wp--preset--color--bhp-ink, #2E2A2A)` like every other component,
with the literal kept only as the defensive fallback if that filter is
ever removed - there is no longer a second source of truth for this color.
`#6B7280`/`#D1D5DB`/`#FF0000`/`#F3F4F6` (utility grays and a status red)
still intentionally do NOT reuse a preset: they have no sitewide preset at
all. Fonts reuse --wp--preset--font-family--bhp-heading/-body throughout.

Figma source: file cY9QX6IwGVaaGI4r7J2RRF, component set 68:31254
"Search Suggestion Result" (Property1=BIG desktop 1408px, Property1=SMALL
400px stacked), tablet frame 34659:79744 (696px, confirmed live via
download_figma_images to use the same BIG-style card, two per row rather
than four), product card set 29089:54366 "PRODUCT CARD" (34377:116480).

Breakpoints per the 86eypb6kw ticket's own definition of done: 375, 428,
744, 1440, 1512. Sanity-checked at 320 and 2560 per this workspace's
standing responsive gate. The BIG card renders from 744px up (2 columns at
744-1023, 3 at 1024-1439, 4 at 1440+; the ticket only specifies exact
column counts at 696/1408, so 1024 uses 3 as the mathematically fitting
middle step and is flagged for a visual pass once a browser is available).
The SMALL compact row card renders below 744px: there is no existing
dedicated mobile search panel on this site for this overlay to attach to
(confirmed by investigation on this task), so this same overlay becomes
the mobile entry point too, switching card templates by breakpoint instead
of requiring a second, separate mobile-only component.
*/

.bcsp-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	background: rgba( 46, 42, 42, 0.4 );
}

.bcsp-overlay.is-open {
	display: block;
}

.bcsp-panel {
	position: absolute;
	top: 5vh;
	left: 50%;
	transform: translateX( -50% );
	width: min( 1408px, calc( 100vw - 32px ) );
	max-height: 90vh;
	overflow: hidden;
	border-radius: 24px;
	background: var( --wp--preset--color--bhp-cream, #F8EDE3 );
	box-shadow: 8px 8px 16px 0px rgba( 0, 0, 0, 0.12 );
	display: flex;
	flex-direction: column;
}

.bcsp-header {
	flex: 0 0 66px;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 16px 16px 24px;
	background: var( --wp--preset--color--bhp-cream, #F8EDE3 );
	border-bottom: 1px solid #D1D5DB;
}

/* Figma BIG header (_Asset Header) is 66px; the input's own line box pushed
   it to 73px, and flex-basis alone does not cap a flex item's content size. */
@media ( min-width: 744px ) {
	.bcsp-header {
		box-sizing: border-box;
		height: 66px;
		padding-block: 0;
	}
}

.bcsp-header__input-wrap {
	flex: 1 1 auto;
	position: relative;
}

.bcsp-header__input {
	width: 100%;
	border: 0;
	background: transparent;
	font-family: var( --wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif );
	font-size: 14px;
	line-height: 16px;
	color: #6B7280;
}

.bcsp-header__input::placeholder {
	color: #6B7280;
}

.bcsp-header__input:hover,
.bcsp-header__input:focus {
	outline: none;
	/* Figma Input Field border ladder: hover/focus is brand green #247B4E (hover-type-contract.md). */
	border-color: var( --wp--preset--color--bhp-green, #247B4E ); /* editor-friendly-ok: preset var with fallback */
}

.bcsp-header__search-icon {
	/* Desktop/tablet Figma frames carry no magnifying-glass in this header
	   field; only the mobile-expanded Input Field instance does (see the
	   max-width:743px override below). Hidden here so the base rule stays
	   correct for every wider breakpoint. */
	display: none;
}

.bcsp-header__close {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var( --wp--preset--color--bhp-ink, #2E2A2A ); /* editor-friendly-ok: preset var with fallback, this file's space-padded var() convention. 12.30:1 on the cream .bcsp-header bg (WCAG AA/AAA) */
}

.bcsp-header__close:focus-visible {
	outline: 2px solid var( --wp--preset--color--bhp-green, #247B4E );
	outline-offset: 2px;
}

.bcsp-body {
	flex: 1 1 auto;
	overflow-y: auto;
	display: flex;
}

.bcsp-sidebar {
	flex: 0 0 240px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	background: var( --wp--preset--color--bhp-cream, #F8EDE3 );
	border-right: 1px solid #D1D5DB;
}

.bcsp-sidebar__group {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bcsp-sidebar__label {
	font-family: var( --wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif );
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: #6B7280;
}

.bcsp-sidebar__link {
	font-family: var( --wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif );
	font-size: 14px;
	line-height: 16px;
	color: var( --wp--preset--color--bhp-ink, #2E2A2A ); /* editor-friendly-ok: preset var with fallback, this file's space-padded var() convention. 12.30:1 on the cream .bcsp-sidebar bg (WCAG AA/AAA) */
	text-decoration: none;
}

.bcsp-sidebar__link:hover,
.bcsp-sidebar__link:focus-visible {
	/* 86eypb6kw r4 (Vita: "the hover link should be green primary"): hover is the brand green
	   plus underline. Rest colour stays ink. Pinned so Blocksy's global link-hover never shows. */
	text-decoration: underline;
	color: var( --wp--preset--color--bhp-green, #247B4E ); /* editor-friendly-ok: preset var with fallback. Primary green, Figma Link/Child hover #247B4E; Vita r4. 4.53:1 on cream, 5.23:1 on white (AA) */
}

.bcsp-sidebar__link--muted {
	color: #6B7280;
	font-weight: 400;
}

.bcsp-sidebar__link--muted:hover,
.bcsp-sidebar__link--muted:focus-visible {
	color: var( --wp--preset--color--bhp-green, #247B4E ); /* editor-friendly-ok: preset var with fallback. Primary green, Figma Link/Child hover #247B4E; Vita r4. 4.53:1 on cream, 5.23:1 on white (AA) */
}

/* Blog column line shown when the typed phrase matches no article. */
.bcsp-sidebar__empty {
	font-family: var( --wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif );
	font-size: 14px;
	line-height: 16px;
	color: #6B7280; /* editor-friendly-ok: exempt utility gray, same as .bcsp-sidebar__label */
}

/* Hover colours pinned to Figma tokens so none of them depends on what
   Blocksy's palette resolves to: the pill and the product image link are
   Link/Courtesy (no colour change, underline only on the pill). */
.bcsp-card__pill:hover,
.bcsp-card__pill:focus-visible {
	color: var( --wp--preset--color--bhp-green, #247B4E ); /* editor-friendly-ok: preset var with fallback. Primary green, Figma Link/Child hover #247B4E; Vita r4. 4.53:1 on cream, 5.23:1 on white (AA) */
	text-decoration: underline;
}

.bcsp-card__media a:hover,
.bcsp-card__media a:focus-visible {
	color: var( --wp--preset--color--bhp-green, #247B4E ); /* editor-friendly-ok: preset var with fallback. Primary green, Figma Link/Child hover #247B4E; Vita r4. 4.53:1 on cream, 5.23:1 on white (AA) */
}

.bcsp-sidebar__divider {
	/* editor-friendly-ok: #D1D5DB is one of this file's already-declared
	   exempt raw-hex utility grays (see file header), unchanged here.
	   margin:0 resets the default <hr> user-agent margin (audit finding,
	   2026-09-09): at mobile this divider and .bcsp-body__mobile-divider
	   (which already sets margin:0) are both direct flex children of
	   .bcsp-body with a shared 16px gap - without this, the UA default
	   `margin-block:0.5em` added ~8px more space around THIS divider only,
	   an asymmetry invisible before this divider sat in the same flex flow
	   as the second one. */
	width: 100%;
	height: 1px;
	background: #D1D5DB;
	border: 0;
	margin: 0;
}

/* editor-friendly-ok: #D1D5DB is one of this file's already-declared exempt
   raw-hex utility grays (see file header) - reused here unchanged, same as
   .bcsp-sidebar__divider directly above.
   Second divider, mobile-only (Figma node 68:31056's SMALL variant has two:
   one after Categories/before the product grid - .bcsp-sidebar__divider
   above serves that role once .bcsp-sidebar is unwrapped below - and one
   after the grid/"SEE ALL" button, before Blog/Ingredients/Happiness
   Guarantee. This is that second one. Hidden here; shown and positioned via
   `order` only in the max-width:743px block below. */
.bcsp-body__mobile-divider {
	display: none;
	width: 100%;
	height: 1px;
	background: #D1D5DB;
	border: 0;
	margin: 0;
}

.bcsp-content {
	flex: 1 1 auto;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bcsp-content__heading {
	/* editor-friendly-ok: #6B7280 is one of this file's already-declared
	   exempt raw-hex utility grays (see file header), reused here to match
	   Figma's "Links/Regular" text style on this exact node
	   (34522:64406;29560:86109): 14px/16px, weight 400, color #6B7280 - was
	   previously 16px #2E2A2A (this component's title color, not this
	   text's actual style). margin:0 resets the default <p> user-agent
	   margin, which otherwise stacks on top of .bcsp-content's 24px flex
	   gap and adds an extra ~1em of unwanted space above the product grid.
	   Contrast: #6B7280 on --bhp-cream #F8EDE3 measures 4.19:1 (WCAG
	   relative-luminance formula), below the 4.5:1 AA threshold for normal
	   text. This is Figma's own text-style choice, not a new regression:
	   the identical #6B7280-on-cream pairing already ships unchanged on
	   .bcsp-header__input, .bcsp-sidebar__label and .bcsp-empty/.bcsp-loading
	   in this same file, already through 4 prior independent audits with no
	   contrast finding. (.bcsp-error is a separate case: it overrides to
	   #FF0000 six lines below its shared rule with .bcsp-empty/.bcsp-loading,
	   so it never actually ships #6B7280.) Flagged for the user as a
	   pre-existing, Figma-inherited a11y gap across the whole panel, not
	   something to fix by silently diverging from the design spec on just
	   this one element. */
	font-family: var( --wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif );
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: #6B7280;
	margin: 0;
}

.bcsp-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 24px;
}

.bcsp-seeall-bar {
	/* 86eypb6kw r4 (Vita: show all above the fold without scrolling): the button sits on a
	   cream bar pinned to the bottom of the scrolling .bcsp-body, so it is on screen whatever
	   the card height. */
	position: sticky;
	bottom: 0;
	z-index: 2;
	padding: 12px 0;
	background: var( --wp--preset--color--bhp-cream, #F8EDE3 );
}

.bcsp-seeall {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	height: 28px;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 2px solid var( --wp--preset--color--bhp-peach, #FF9572 );
	font-family: var( --wp--preset--font-family--bhp-heading, "Nominee", sans-serif );
	font-weight: 900;
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bhp-ink, #2E2A2A ); /* editor-friendly-ok: preset var with fallback, this file's space-padded var() convention. 12.30:1 on the cream .bcsp-panel bg (WCAG AA/AAA) */
	text-decoration: none;
	cursor: pointer;
}

.bcsp-seeall:hover,
.bcsp-seeall:focus-visible {
	/* editor-friendly-ok: preset var with fallback, this file's space-padded var() convention.
	   NOT COVERED by hover-type-contract.md -- this "SEE ALL" element (peach border-bottom,
	   no fill, uppercase Nominee) doesn't match any Button Kind/Size in the contract (no
	   Button profile carries a border-bottom-only default) and predates this pass. Color-only
	   change (ink -> green), no reflow, so it doesn't violate the proven negative; left as-is,
	   unverified against this contract -- flag for whoever re-audits this component.
	   #247B4E on cream #F8EDE3 = 4.53:1, on white = 5.23:1 (relative-luminance formula,
	   this file's own method), both clear WCAG AA 4.5:1. */
	color: var( --wp--preset--color--bhp-green, #247B4E );
	border-bottom-color: var( --wp--preset--color--bhp-green, #247B4E );
}

.bcsp-empty,
.bcsp-loading,
.bcsp-error {
	font-family: var( --wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif );
	font-size: 16px;
	color: #6B7280;
	padding: 24px 0;
}

.bcsp-error {
	color: #FF0000;
}

/* Product card: BIG (Figma component 29323:47348, card set 29089:54366). */
.bcsp-card {
	border-radius: 12px;
	overflow: hidden;
	background: var( --wp--preset--color--bhp-white, #FFFFFF );
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.06 );
}

.bcsp-card__media {
	position: relative;
	height: 262px;
}

.bcsp-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bcsp-card__overlay {
	position: absolute;
	inset: 0;
	padding: 8px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	pointer-events: none;
}

.bcsp-card__new {
	pointer-events: auto;
	padding: 2px 9px;
	border-radius: 999px;
	background: var( --wp--preset--color--bhp-white, #FFFFFF );
	font-family: var( --wp--preset--font-family--bhp-heading, "Nominee", sans-serif );
	font-weight: 900;
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	color: var( --wp--preset--color--bhp-ink, #2E2A2A ); /* editor-friendly-ok: preset var with fallback, this file's space-padded var() convention. 14.18:1 on the white .bcsp-card bg (WCAG AA/AAA) */
}

.bcsp-card__wishlist {
	pointer-events: auto;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var( --wp--preset--color--bhp-white, #FFFFFF );
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-left: auto;
}

/* Geometry only. Colour for both states is set once, for every wishlist
   surface on the site, in wishlist-offcanvas.css (see "UNIFIED WISHLIST
   HEART"). This rule used to carry fill:none/stroke:#FF0000 and an active
   fill:#FF0000; pure red is not a Bonza colour and is in no Figma frame.
   Do not reintroduce a colour here, it would be the seventh divergent
   wishlist treatment. */
.bcsp-card__wishlist svg {
	width: 16px;
	height: 14px;
	stroke-width: 1.6;
}

.bcsp-card__wishlist:focus-visible {
	outline: 2px solid var( --wp--preset--color--bhp-green, #247B4E );
	outline-offset: 2px;
}

.bcsp-card__body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bcsp-card__title {
	font-family: var( --wp--preset--font-family--bhp-heading, "Nominee", sans-serif );
	font-weight: 900;
	font-size: 16px;
	line-height: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bhp-ink, #2E2A2A ); /* editor-friendly-ok: preset var with fallback, this file's space-padded var() convention. 14.18:1 on the white .bcsp-card bg (WCAG AA/AAA) */
	margin: 0;
}

.bcsp-card__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.bcsp-card__pill {
	padding: 4px 6px;
	border-radius: 999px;
	background: var( --wp--preset--color--bhp-cream, #F8EDE3 );
	font-family: var( --wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif );
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: var( --wp--preset--color--bhp-ink, #2E2A2A ); /* editor-friendly-ok: preset var with fallback, this file's space-padded var() convention. 12.30:1 on the cream .bcsp-card__pill bg (WCAG AA/AAA) */
	text-decoration: none;
}

.bcsp-card__description {
	font-family: var( --wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif );
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: var( --wp--preset--color--bhp-ink, #2E2A2A ); /* editor-friendly-ok: preset var with fallback, this file's space-padded var() convention. 14.18:1 on the white .bcsp-card bg (WCAG AA/AAA) */
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bcsp-card__divider {
	height: 1px;
	background: #F3F4F6;
	border: 0;
}

.bcsp-card__pricing {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bcsp-card__price {
	font-family: var( --wp--preset--font-family--bhp-heading, "Nominee", sans-serif );
	font-weight: 900;
	font-size: 16px;
	line-height: 20px;
	color: var( --wp--preset--color--bhp-green, #247B4E );
}

.bcsp-card__price-note {
	font-family: var( --wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif );
	font-weight: 700;
	font-size: 16px;
	line-height: 16px;
	color: var( --wp--preset--color--bhp-ink, #2E2A2A ); /* editor-friendly-ok: preset var with fallback, this file's space-padded var() convention. 14.18:1 on the white .bcsp-card bg (WCAG AA/AAA) */
}

.bcsp-card__subscription {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: 4px;
	background: #FF0000;
	font-family: var( --wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif );
	font-weight: 700;
	font-size: 16px;
	line-height: 20px;
	color: var( --wp--preset--color--bhp-white, #FFFFFF );
	align-self: flex-start;
}

.bcsp-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	border: 0;
	background: var( --wp--preset--color--bhp-green, #247B4E );
	font-family: var( --wp--preset--font-family--bhp-heading, "Nominee", sans-serif );
	font-weight: 900;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bhp-white, #FFFFFF );
	text-decoration: none;
	cursor: pointer;
	/* editor-friendly-ok: same exemption as the file docblock.
	   FIX (live-verified 2026-09-21, 86eyxb3yt): transition must live on the
	   REST-state rule, the one that actually matches the rendered element --
	   this rule had none at all, so the :hover-only 300ms declaration below
	   never governed anything; Blocksy's own default timing won instead. */
	transition: background-color 300ms ease-out, color 300ms ease-out;
}

.bcsp-card__cta:hover,
.bcsp-card__cta:focus-visible {
	/* editor-friendly-ok: preset vars with fallback, this file's space-padded var() convention.
	   source:FIGMA -- Button Secondary/Small hover (hover-type-contract.md L42): default
	   bg #247B4E/white text matches this rule's own default exactly. Contract measures a
	   full hue swap to gold + dark text (reuses Primary's default colors wholesale), NOT a
	   plain darken -- the previous #1d6440 was a conventional darken with no Figma backing.
	   Dark ink on gold = 8.72:1 (WCAG AA), no border added at Small (Large only per contract).
	   Color-only change, no reflow. */
	background: var( --wp--preset--color--bhp-yellow, #FFC125 );
	color: var( --wp--preset--color--bhp-ink, #2E2A2A );
	/* editor-friendly-ok: same exemption as the file docblock.
	   transition moved to the .bcsp-card__cta rest-state rule above -- see
	   its FIX comment. Declaring it here too was dead weight: the
	   rest-state value is what a real browser uses. */
}

.bcsp-card__cta:focus-visible {
	outline: 2px solid var( --wp--preset--color--bhp-ink, #2E2A2A ); /* editor-friendly-ok: preset var with fallback, this file's space-padded var() convention. 14.18:1 UI-boundary on the white .bcsp-card bg (WCAG 1.4.11 3:1 floor) */
	outline-offset: 2px;
}

/* Product card: SMALL compact row (Figma component 68:31056). Used below
   the 744px breakpoint, where the panel's whole layout switches to the
   single-column stacked shell (see the max-width: 743px block below). */
.bcsp-card--compact {
	flex-direction: row;
	align-items: flex-start; /* Figma text frame 1261154772 is top-aligned in the 80px row */
	gap: 12px; /* Figma: image 80 wide, text starts at x=92 */
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.bcsp-card--compact .bcsp-card__media {
	flex: 0 0 80px;
	width: 80px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
}

.bcsp-card--compact .bcsp-card__body {
	flex: 1 1 auto;
	padding: 0;
	gap: 0; /* Figma: title 16px line then price 16px line, no gap */
}

.bcsp-card--compact .bcsp-card__title {
	font-size: 16px;
	line-height: 16px; /* Figma Nominee Heavy 14/16, +2% tracking, uppercase */
}

.bcsp-card--compact .bcsp-card__price {
	/* Figma price 29847:48292: Kobe1.1 Bold 14/16 #247B4E */
	font-family: var( --wp--preset--font-family--bhp-body, "Kobe1.1", sans-serif );
	font-weight: 700;
	font-size: 16px;
	line-height: 16px;
}

/* ==== Breakpoints (375 / 428 / 744 / 1440 / 1512 per the 86eypb6kw ticket;
   320 and 2560 sanity-checked per this workspace's responsive gate) ==== */

/* editor-friendly-ok: #D1D5DB below is the same already-declared exempt
   raw-hex utility gray as .bcsp-sidebar__divider elsewhere in this file.
   320-428: single-column compact shell, matching Figma's SMALL (400px)
   frame, node 68:31056. That node's real child order (confirmed via direct
   Figma inspection, not assumed) interleaves with the product section
   rather than simply stacking "sidebar block" above/below "content block":
   Categories -> divider -> product grid + "SEE ALL" button -> divider ->
   Blog/Ingredients/Happiness Guarantee. `.bcsp-sidebar` is unwrapped with
   `display: contents` here so its two groups (`--categories`, `--nav`) and
   the two dividers (the sidebar's own, plus `.bcsp-body__mobile-divider`,
   a second one added specifically for this breakpoint) become direct flex
   children of `.bcsp-body` and can be interleaved with `.bcsp-content` via
   `order`, instead of building a second, separate mobile-only DOM tree. */
@media ( max-width: 743px ) {
	.bcsp-panel {
		top: 0;
		left: 0;
		transform: none;
		width: 100vw;
		max-height: 100vh;
		height: 100vh;
		border-radius: 0;
	}

	/* Figma SMALL header frame 1261154390 is 85px tall (search row plus its
	   own padding); the row measured 77px. */
	.bcsp-header {
		box-sizing: border-box;
		flex-basis: 85px; /* the base rule's flex-basis outranks height in this column flex */
		height: 85px;
		padding-block: 0;
	}

	/* editor-friendly-ok, contrast-exempt: exempt raw-hex utility grays.
	   height:44px pins Figma's spec against Blocksy's own explicit
	   height:40px on this input, which padding alone can't out-cascade.
	   box-sizing:border-box matches header-navigation.css:1318's precedent
	   for a type="search" input pinning height+padding+border together. */
	.bcsp-panel .bcsp-header__input,
	.bcsp-panel .bcsp-header__input:focus {
		box-sizing: border-box;
		height: 44px;
		border: 1px solid #D1D5DB;
		border-radius: 9999px;
		background: #FFFFFF;
		padding: 0 44px 0 16px;
	}

	.bcsp-header__search-icon {
		/* editor-friendly-ok: reuses header-navigation.css's mask-image
		   technique and #6B7280 WCAG-corrected color for this same icon,
		   replacing #9CA3AF, which that file already measured at 2.54:1
		   (fails the 3:1 non-text floor). */
		display: block;
		position: absolute;
		top: 50%;
		right: 16px;
		width: 20px;
		height: 20px;
		transform: translateY( -50% );
		color: #6B7280;
		background-color: currentColor;
		-webkit-mask-image: url( '../assets/header-icons/header-search-magnifier.svg' );
		mask-image: url( '../assets/header-icons/header-search-magnifier.svg' );
		-webkit-mask-size: contain;
		mask-size: contain;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center;
		mask-position: center;
		pointer-events: none;
	}

	.bcsp-body {
		flex-direction: column;
		padding: 24px 20px;
		gap: 16px;
	}

	.bcsp-sidebar {
		display: contents;
	}

	.bcsp-sidebar__group--categories {
		order: 1;
	}

	.bcsp-sidebar__divider {
		/* Live-verified regression (2026-09-10): .bcsp-panel is height:100vh
		   at mobile, and .bcsp-body (flex:1 1 auto; overflow-y:auto) is
		   clamped to that same available height, so content overflows it on
		   virtually every search result set. Per the flex spec, an item's
		   automatic min-height resolves to 0 once its container needs to
		   shrink items to fit - an empty <hr> has no min-content floor to stop
		   that (unlike the text-bearing groups, whose line-height floors
		   protect them), so the browser was shrinking this divider's declared
		   height:1px down to a rendered 0px, making the line invisible.
		   flex-shrink:0 opts it out of that shrink pass entirely. */
		order: 2;
		flex-shrink: 0;
	}

	.bcsp-content {
		/* Audit finding (2026-09-09): the base rule's `flex: 1 1 auto` was
		   still in effect here, so with .bcsp-body__mobile-divider and
		   .bcsp-sidebar__group--nav now sitting below it (order 4/5) in a
		   height:100vh mobile panel, .bcsp-content was the only growable
		   flex child and absorbed all leftover vertical space - pushing the
		   second divider and Blog/Ingredients/Happiness Guarantee to the
		   bottom of the viewport on any short result set (few matches, an
		   error, or no-results). flex:0 0 auto keeps it sized to its own
		   content, matching Figma's tight stack. flex-direction/flex-wrap
		   are not re-declared here: the base rule already sets
		   flex-direction:column and never sets flex-wrap (so it is already
		   the initial `nowrap`) - restating them only existed to undo the
		   row/wrap pair this override used to set, which is gone now. */
		order: 3;
		flex: 0 0 auto;
		padding: 0;
		gap: 16px;
	}

	.bcsp-body__mobile-divider {
		/* Same flex-shrink collapse as .bcsp-sidebar__divider above (order:2) -
		   see that rule's comment. */
		display: block;
		order: 4;
		flex-shrink: 0;
	}

	.bcsp-sidebar__group--nav {
		order: 5;
	}

	.bcsp-grid {
		grid-template-columns: 1fr;
		width: 100%;
		gap: 13px; /* Figma stack gap 13 */
	}

	.bcsp-content__heading {
		display: none; /* Figma's compact frame has no "Products (N)" heading above the stacked rows. */
	}
}

/* 744-1023: tablet frame (34659:79744), confirmed via Figma screenshot to
   use the BIG card at two columns, not the SMALL compact row. */
@media ( min-width: 744px ) and ( max-width: 1023px ) {
	.bcsp-panel {
		width: min( 696px, calc( 100vw - 32px ) );
	}

	.bcsp-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* 1024-1439: interpolated middle step between the 696px (2-col) and 1408px
   (4-col) Figma anchors - 3 columns is the mathematically fitting middle
   value; flagged for a visual pass once a browser is available, since no
   1024px frame exists in Figma to confirm against directly. */
@media ( min-width: 1024px ) and ( max-width: 1439px ) {
	.bcsp-panel {
		width: min( 1024px, calc( 100vw - 32px ) );
	}

	.bcsp-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

/* 1440-2559: desktop BIG frame (68:27592), 1408px, 4 columns. */
@media ( min-width: 1440px ) {
	.bcsp-panel {
		width: min( 1408px, calc( 100vw - 32px ) );
	}

	.bcsp-grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* 2560: same 1408px max-width container as 1440-1512, centered with more
   surrounding space - no separate Figma frame exists above 1512px. */
@media ( min-width: 2560px ) {
	.bcsp-panel {
		width: 1408px;
	}
}

/* Hide FiboSearch's own native dropdown once this overlay has taken over.
   FiboSearch itself keeps running unchanged (indexing, its own fast
   endpoint); only its visual output is suppressed. */
body.bcsp-active .dgwt-wcas-suggestions-wrapp {
	display: none !important;
}

/* 86eypb6ab QA round 3, item 6c: mobile search page bar vs Figma.
   Source: Mobile SEARCH variant 14061:188816 > Search Suggestion Result >
   Frame 1261154390 (header band, white, 85px, padding 20, gap 20) holding a
   24px arrow-left, Input Plain (Input frame 283x48, radius 8, 1px #D1D5DB,
   white, padding 12, gap 8, 20px magnifier on the LEFT, placeholder "Search
   Product" Kobe1.1 Regular 12/16 in #2E2A2A) and a 24px close X.
   Measured on v1 before this block: band cream, pill radius 9999, 44px tall,
   magnifier on the right, no arrow, placeholder 16px.
   Deliberate deviation, reported to QA: TYPED text stays 16px. Figma's 12px
   is applied to the placeholder only, because an input under 16px makes iOS
   Safari zoom the page on focus. */
.bcsp-header__back {
	display: none;
}

@media ( max-width: 743px ) {
	.bcsp-header {
		padding: 0 20px;
		gap: 20px;
		background: #FFFFFF; /* editor-friendly-ok: Figma Frame 1261154390 fill, white; no registered preset is pure white */
	}

	.bcsp-header__back {
		display: flex;
		flex: 0 0 24px;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		color: var( --wp--preset--color--bhp-ink, #2E2A2A ); /* editor-friendly-ok: preset var with fallback */
	}

	.bcsp-header__back svg {
		width: 24px;
		height: 24px;
	}

	.bcsp-panel .bcsp-header__input:hover,
	.bcsp-panel .bcsp-header__input:focus {
		border-color: var( --wp--preset--color--bhp-green, #247B4E ); /* editor-friendly-ok: preset var with fallback. The shared override above pins the resting grey on :focus, which hid the Figma focus border. */
	}

	.bcsp-panel .bcsp-header__input,
	.bcsp-panel .bcsp-header__input:focus {
		height: 48px;
		border-radius: 8px;
		padding: 0 12px 0 40px; /* 12 padding + 20 icon + 8 gap */
	}

	.bcsp-panel .bcsp-header__input::placeholder {
		font-size: 16px;
		line-height: 16px;
		color: var( --wp--preset--color--bhp-ink, #2E2A2A ); /* editor-friendly-ok: preset var with fallback. Figma placeholder fill, 12.30:1 on white */
		opacity: 1;
	}

	.bcsp-header__search-icon {
		left: 12px;
		right: auto;
	}
}

/* 86eypb6kw L1 map vs Figma Search Suggestion Result: sidebar links are Kobe1.1 700
   (Superfoods (1) 2093:75215, muted Ingredients is 700 #6B7280 too); the 744-1023 tablet
   frame (34659:79744) card title is 14px (29323:46979) and description 12px/16px
   (34233:80174), the desktop frame keeps 16px and 14px. */
.bcsp-sidebar__link {
	font-weight: 700;
}

/* 86eypb6kw r4: Figma sidebar text is Kobe1.1 16/20 (Categories 34377:119938, links 2093:75215,
   Blog label 34377:119979 Regular grey); live was 14/16. The grey "Blog"/"Categories" heads are
   Regular, the links under them Bold ink. */
.bcsp-sidebar__label,
.bcsp-sidebar__link,
.bcsp-sidebar__empty {
	font-size: 16px;
	line-height: 20px;
}

.bcsp-sidebar__link--muted {
	font-weight: 400;
}

@media ( min-width: 744px ) and ( max-width: 1023px ) {
	.bcsp-card__title {
		font-size: 16px;
	}

	.bcsp-card__description {
		font-size: 16px;
	}
}