/**
 * Search Bar — v0.5.1 (isolation boundary covers the body-portaled mobile modal).
 *
 * All custom properties scoped to .hrtk-sbp-search-bar so this stylesheet
 * cannot collide with other tools. Override per-instance via inline styles
 * (see search-bar.php) or by redeclaring a --hrtk-sbp-* var on
 * .hrtk-sbp-search-bar in your own sheet.
 *
 * BUILD: edit this file only. assets/css/searchbar-pro.min.css is generated
 * (`npm run build:css`) and is what production loads — Shortcode::asset_url()
 * swaps in the .min when SCRIPT_DEBUG is off. The build raises the specificity
 * of every selector here to (2,x,0) via :not(#\9); see scripts/postcss-hrtk-scope.js.
 *
 * Breakpoint: 960px (matches HomeRunner hk-hidden@m boundary).
 */

/* =========================================================================
   Isolation boundary
   -------------------------------------------------------------------------
   Namespacing (.hrtk-sbp-*) stops OUR css leaking OUT. It does nothing to stop
   a host theme leaking IN, which reaches us two ways:

     1. Property fall-through. We render 37 <button> and 19 <input> elements.
        A theme's `button { background-image: linear-gradient(...);
        text-transform: uppercase }` wins any property we never declare —
        specificity never enters into it, because there is nothing to outrank.
        This is what produced the green/uppercase fields on off-fleet themes.
     2. Specificity. Our selectors were all single-class (0,1,0); any theme rule
        like `.site-header .button` outranked every one of them.

   `all: revert` rolls the author origin (i.e. the theme) back to UA defaults
   for every property we don't explicitly set, closing (1). The build's
   specificity boost closes (2).

   The existing !important declarations below are NOT theme patches and must
   stay. They are internal cascade control, and several (.hrtk-sbp-popover--
   leaving, the reduced-motion transition:none) deliberately outrank the inline
   styles searchbar-pro.js writes. That is also precisely why isolation is done
   with specificity rather than by blanket-!importanting the build: !important
   beats a style attribute, so arming every declaration would have silently
   disabled the ~38 inline styles that drive the morph, the tab pill and
   datepicker positioning — and flattened the deliberate overrides above into
   noise.

   MUST STAY FIRST IN THIS FILE. The boost puts this rule at (2,1,0), the same
   weight as most rules below it, so ties are broken by source order and every
   subsequent rule must come after it to win.

   `all` does not touch custom properties (per spec), so the --hrtk-sbp-* API
   and the inline brand-color vars survive this untouched.

   SVG IS EXCLUDED, AND MUST STAY EXCLUDED.
   SVG presentation attributes (fill="none", stroke="currentColor") live in the
   author origin, so `all: revert` rolls them back too — it resets fill to its
   initial value (black) and drops the stroke. Our icons use both conventions
   (fill="none"+stroke="currentColor" outline icons in the template, a few
   fill="currentColor" solid icons in the JS) and this stylesheet never
   declares fill/stroke, so nothing would win them back: every outline icon
   would render as a solid black blob and every solid icon would go black
   regardless of the surrounding text colour. Verified on elkhollowresort.com —
   the submit icon computed to fill:rgb(0,0,0) over the orange accent.
   The only third-party rule that reaches our SVGs is `.uk-scope svg
   {box-sizing:border-box}`, which is harmless, so excluding them costs nothing.
   ========================================================================= */

/* The svg exclusion is wrapped in :where() because :where() contributes ZERO
   specificity. A bare *:not(svg):not(svg *) adds (0,0,2) — that pushed this
   reset to (2,1,2), above the (2,1,0) of the rules below, and the whole bar
   rendered as native OS button chrome. Keep the exclusion inside :where().

   .hrtk-sbp-search-bar__mobile IS A SECOND ROOT, AND MUST STAY ONE.
   openModal() portals the mobile modal to <body> (searchbar-pro.js) so it
   escapes transformed/hidden ancestors — which also removes it from
   .hrtk-sbp-search-bar's subtree, so the first four selectors stop matching
   it the moment it opens. Without its own root here, the portaled modal
   loses the reset and theme fall-through reaches its buttons/inputs again
   (the desktop bar stays fixed, the mobile sheet regresses). While the modal
   is still in place pre-portal both roots match; the declarations are
   identical, so the overlap is harmless.

   .hrtk-sbp-search-bar__mobile-trigger IS A THIRD ROOT, AND MUST STAY ONE.
   The mobile trigger pill is a SIBLING of the form inside the host wrapper
   (see search-bar.php), so neither root above ever matches it. It is the
   only piece of this widget most mobile visitors see before tapping —
   without its own root, theme fall-through (text-transform, background-
   image, letter-spacing on `button`) still styles it on the exact sites
   this isolation exists for. */
.hrtk-sbp-search-bar:not(#\9):not(#\9),
.hrtk-sbp-search-bar:not(#\9):not(#\9)::before,
.hrtk-sbp-search-bar:not(#\9):not(#\9)::after,
.hrtk-sbp-search-bar:not(#\9):not(#\9) *:where(:not(svg, svg *)),
.hrtk-sbp-search-bar:not(#\9):not(#\9) *:where(:not(svg, svg *))::before,
.hrtk-sbp-search-bar:not(#\9):not(#\9) *:where(:not(svg, svg *))::after,
.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9),
.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9)::before,
.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9)::after,
.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9) *:where(:not(svg, svg *)),
.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9) *:where(:not(svg, svg *))::before,
.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9) *:where(:not(svg, svg *))::after,
.hrtk-sbp-search-bar__mobile-trigger:not(#\9):not(#\9),
.hrtk-sbp-search-bar__mobile-trigger:not(#\9):not(#\9)::before,
.hrtk-sbp-search-bar__mobile-trigger:not(#\9):not(#\9)::after,
.hrtk-sbp-search-bar__mobile-trigger:not(#\9):not(#\9) *:where(:not(svg, svg *)),
.hrtk-sbp-search-bar__mobile-trigger:not(#\9):not(#\9) *:where(:not(svg, svg *))::before,
.hrtk-sbp-search-bar__mobile-trigger:not(#\9):not(#\9) *:where(:not(svg, svg *))::after {
	all: revert;
	box-sizing: border-box;
}

/* Form controls do not inherit typography: the UA stylesheet sets its own
   font on button/input (UA origin, which `all: revert` exposes rather than
   removes), so inside the reset boundary every control that shows text must
   re-take the page font explicitly. The desktop rules below each carry
   font-family/font: inherit; this is the equivalent backstop for the mobile
   modal's controls. :where() keeps it at (2,1,0) and it sits before the
   component rules, so any rule that sets its own font still wins on order. */
.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9) :where(button, input, select, textarea) {
	font-family: inherit;
}

/* =========================================================================
   Custom properties
   ========================================================================= */

.hrtk-sbp-search-bar {
	/* Surface */
	--hrtk-sbp-bg:           #ffffff;
	--hrtk-sbp-bar-bg:       #ffffff;  /* Bar surface — white; idle fields blend in, dividers carry the seam */
	--hrtk-sbp-border:       rgba(0, 0, 0, 0.12);
	--hrtk-sbp-shadow:       0 2px 16px rgba(0, 0, 0, 0.12);
	--hrtk-sbp-shadow-focus: 0 4px 24px rgba(0, 0, 0, 0.18);
	/* Corner shape (v3.138). ONE master token — --hrtk-sbp-shape-max — caps
	   every px corner radius in this sheet: each border-radius is written as
	   min(<pill-mode literal>, var(--hrtk-sbp-shape-max, 999px)). Like the
	   accent tokens it is deliberately NOT defined here: the Style setting
	   threads it inline on the host wrapper (pill emits nothing → 999px
	   fallback keeps this sheet pixel-identical; rounded = 12px; square = 0px),
	   and initMobile() mirrors it onto the portaled modal. Pure circles (50%,
	   --dp-cell-radius) stay circles in every shape — a circle is shape-
	   neutral, not a rounded rectangle. */
	--hrtk-sbp-radius:       var(--hrtk-sbp-shape-max, 999px);
	/* Derived INNER radius for fills nested inside a shaped container
	   (hover indicator / active pill inside the bar, gray input cards
	   inside white stage/popover cards). Nested rounded rectangles only
	   look concentric when inner = outer − inset, so equal radii read as
	   a mismatch at rounded (12px-in-12px). Pill: 993px — anything past
	   half-height renders as the same stadium, so pill is unaffected.
	   Rounded: 6px. Square: 0. Re-declared on the modal root (portaled
	   subtree — this scope can't reach it). */
	--hrtk-sbp-radius-inner: max(0px, calc(var(--hrtk-sbp-shape-max, 999px) - 6px));
	--hrtk-sbp-gap:          6px;      /* Seam width between field pills */
	--hrtk-sbp-ext:          32px;     /* Nub extension into next field — must cover the
	                                     next pill's left corner-exclusion zone, which is
	                                     half the pill's vertical height (32px at 64px tall). */

	/* Label */
	--hrtk-sbp-label-color:  #6b7280;
	--hrtk-sbp-label-size:   11px;

	/* Input / value text */
	--hrtk-sbp-input-color:      #111827;
	--hrtk-sbp-placeholder:      #9ca3af;
	--hrtk-sbp-input-size:       15px;

	/* Submit button.
	   Accent is driven by the Style setting: the host wrapper sets
	   --hrtk-sbp-accent / -hover / -ring inline (see search-bar.php). We
	   intentionally do NOT define those accent tokens here — defining them
	   on .hrtk-sbp-search-bar would shadow the host's inline override for
	   this subtree. Instead every accent use is var(--token, <literal>) so
	   the literal is only a fallback when no Style color is threaded. */
	--hrtk-sbp-btn-bg:       var(--hrtk-sbp-accent, #ff385c);
	--hrtk-sbp-btn-bg-hover: var(--hrtk-sbp-accent-hover, #e31c5f);
	--hrtk-sbp-btn-color:    #ffffff;
	/* Submit hugs the bar's right edge at the same 6px inset as the field
	   fills, so it takes the INNER tier (pill: stadium, unchanged). */
	--hrtk-sbp-btn-radius:   var(--hrtk-sbp-radius-inner, 999px);

	/* Listbox */
	--hrtk-sbp-listbox-bg:      #ffffff;
	--hrtk-sbp-listbox-shadow:  0 8px 32px rgba(0, 0, 0, 0.16);
	--hrtk-sbp-listbox-radius:  min(16px, var(--hrtk-sbp-shape-max, 999px));
	--hrtk-sbp-listbox-max-h:   360px;
	--hrtk-sbp-hover-bg:        #f5f5f5;
	--hrtk-sbp-hover-color:     #111827;

	/* Focus ring */
	--hrtk-sbp-focus-ring: 0 0 0 3px var(--hrtk-sbp-accent-ring, rgba(255, 56, 92, 0.25));

	/* Guests popover */
	--hrtk-sbp-popover-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
	--hrtk-sbp-popover-radius: min(16px, var(--hrtk-sbp-shape-max, 999px));
	--hrtk-sbp-popover-width:  320px;

	/* Field surface states — idle is TRANSPARENT (text floats on bar bg),
	   pill only materializes on hover/active. v0.4.5 design flip. */
	--hrtk-sbp-field-bg:           transparent;  /* Idle — no visible pill */
	--hrtk-sbp-field-hover-bg:     #ebebeb;     /* Hover — soft gray pill on white bar */
	--hrtk-sbp-field-inactive-bg:  #ebebeb;     /* Inactive (when one is active) — same soft gray */
	--hrtk-sbp-field-active-bg:    #ffffff;     /* Active — white pill, distinguished by shadow alone */

	/* Text colors */
	--hrtk-sbp-text-idle:         #6b7280;   /* Subdued in idle/inactive */
	--hrtk-sbp-text-hover:        #111111;   /* Bumped contrast on hover */
	--hrtk-sbp-text-active:       #111827;   /* Crisp on active */

	/* Two-layer elevation for active pill (Airbnb pattern):
	   ambient shadow (soft, broad halo) + key shadow (tight, contact). */
	--hrtk-sbp-field-active-shadow:
		0 6px 16px rgba(0, 0, 0, 0.10),
		0 2px 4px  rgba(0, 0, 0, 0.08);

	/* Spring easing — linear() approximating a damped spring. Smoother feel
	   than ease/cubic-bezier. Modern browsers (Chrome 113+, Safari 17.2+,
	   Firefox 112+). Older browsers degrade to linear (still functional). */
	--hrtk-sbp-spring: linear(
		0, 0.186 7.7%, 0.466 15.5%, 0.682 23.3%, 0.823 31%,
		0.905 38.8%, 0.951 46.5%, 0.976 54.3%, 0.99 62%, 0.996 69.7%, 1
	);

	/* Divider tokens */
	--hrtk-sbp-divider-color: rgba(0, 0, 0, 0.10);
	--hrtk-sbp-divider-h:     28px;   /* ~half the pill height */
}

/* =========================================================================
   Box model reset — scope strictly to .hrtk-sbp-search-bar subtree
   ========================================================================= */

.hrtk-sbp-search-bar:not(#\9):not(#\9),
.hrtk-sbp-search-bar:not(#\9):not(#\9) *,
.hrtk-sbp-search-bar:not(#\9):not(#\9) *::before,
.hrtk-sbp-search-bar:not(#\9):not(#\9) *::after {
	box-sizing: border-box;
}

/* =========================================================================
   Form shell — 850px cap, centered
   ========================================================================= */

.hrtk-sbp-search-bar:not(#\9):not(#\9) {
	display:       flex;
	align-items:   center;
	width:         100%;
	max-width:     850px;
	margin-left:   auto;
	margin-right:  auto;
	background:    var(--hrtk-sbp-bar-bg);
	border-radius: var(--hrtk-sbp-radius);
	box-shadow:    var(--hrtk-sbp-shadow);
	padding:       6px;
	border:        1px solid var(--hrtk-sbp-border);
	transition:    background 300ms var(--hrtk-sbp-spring),
	               box-shadow 300ms var(--hrtk-sbp-spring);
	gap:           var(--hrtk-sbp-gap);
	position:      relative;
}

.hrtk-sbp-search-bar:focus-within:not(#\9):not(#\9) {
	box-shadow: var(--hrtk-sbp-shadow-focus);
}

/* Active-state bar darkens to #ebebeb — same color as inactive pills, so the
   inactive pills "dissolve" into the bar surface. Only the white active pill
   reads as a distinct shape. The shared sliding active pill (below) renders
   the white pill; inactive fields are transparent so it can move freely. */
.hrtk-sbp-search-bar--has-active:not(#\9):not(#\9) {
	background: #ebebeb;
}

/* =========================================================================
   Fields — shared layout
   Each field is a flex item; Where is a div, When/Who/What are <button>s.
   ========================================================================= */

.hrtk-sbp-search-bar__field:not(#\9):not(#\9) {
	/* Cascading bg — used by both the field box and its right-extension nub. */
	--field-bg:  var(--hrtk-sbp-field-bg);

	flex:        1 1 auto;
	position:    relative;
	z-index:     1;  /* Above the shared hover indicator (z-0) */
	min-width:   0;
	background:  var(--field-bg);
	border:      none;
	outline:     none;
	padding:     10px 16px 10px 20px;
	margin:      0;
	text-align:  left;
	font-family: inherit;
	cursor:      pointer;
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	transition:  background 300ms var(--hrtk-sbp-spring),
	             box-shadow 300ms var(--hrtk-sbp-spring),
	             flex-grow 300ms var(--hrtk-sbp-spring),
	             flex-basis 300ms var(--hrtk-sbp-spring),
	             min-width 300ms var(--hrtk-sbp-spring);
	/* Uniform vertical rhythm */
	display:     flex;
	flex-direction: column;
	justify-content: center;
	gap:         2px;
	min-height:  64px;
}

/* v0.4.5: nub extension removed. With idle fields transparent, the previous
   "extends right under neighbor" trick would have painted the hover/active
   pill bg over the neighbor's text (no pill to cover it). Hover/active are
   now contained pills only; the dividers carry the seam. */

/* Where field is a div (not a button) — it hosts a real input */
.hrtk-sbp-search-bar__field--where:not(#\9):not(#\9) {
	cursor: text;
}

/* v3.96: the extra left padding belongs to whichever field is FIRST, not to
   Where specifically. Where used to hardcode it because it was always first;
   with show_where="0" (single-city sites) When leads the bar instead and would
   otherwise sit 4px tighter to the pill edge than every other layout.

   `:not(.field ~ .field)` is the first-of-class idiom — the first .field is the
   only one with no .field before it. Positional, so it survives any combination
   of show_where / show_dates / show_guests without further rules. Fields are
   NOT :first-child (hover-indicator, active-pill and the compressed pill
   precede them) and not :first-of-type either (Where is a div, When a button),
   so neither of those shortcuts works here. */
.hrtk-sbp-search-bar__field:not(.hrtk-sbp-search-bar__field ~ .hrtk-sbp-search-bar__field):not(#\9):not(#\9) {
	padding-left: 24px;
}

/* A divider only means anything between two fields. Each field emits its own
   preceding divider, so gating the first field strands its neighbour's divider
   against the pill's left edge. Hide any divider with no field before it. */
.hrtk-sbp-search-bar__divider:not(.hrtk-sbp-search-bar__field ~ *):not(#\9):not(#\9) {
	display: none;
}

/* v0.4.29: WHO field is content-stable. Default flex: 1 1 auto on
   fields lets WHO's basis grow with its value, so going from
   "Add guests" -> "1 guest" -> "1 guest, 1 infant" reflowed the bar
   each time. Now WHO has a fixed-ish basis (170px) and won't grow
   past it; long values truncate via the field-value's existing
   text-overflow: ellipsis. Matches Airbnb's behavior. */
.hrtk-sbp-search-bar__field--who:not(#\9):not(#\9) {
	flex:       0 1 170px;
	min-width:  140px;
}

/* v0.4.34: WHAT field also content-stable. Same problem WHO had —
   typing a long description grew the pill, pushing the rest of the
   bar. 200px basis comfortably fits the "Describe or filter"
   placeholder + clear button; longer typed values truncate. */
.hrtk-sbp-search-bar__field--what:not(#\9):not(#\9) {
	flex:       0 1 200px;
	min-width:  160px;
}

/* #461: promoted BEDROOMS segment (bar_promoted_filter="bedrooms").
   Content-stable like WHO/WHAT — a fixed-ish basis so stepping the
   count never reflows the bar; "5 bedrooms" truncates via the
   field-value's ellipsis if squeezed. The segment doesn't render at
   all on default installs, so nothing here touches the 4-field bar. */
.hrtk-sbp-search-bar__field--bedrooms:not(#\9):not(#\9) {
	flex:       0 1 150px;
	min-width:  118px;
}

/* Bedrooms popover reuses the guests-popover shell (positioning, radius,
   shadow); it holds one stepper row, so shrink to content instead of the
   50% guests width. */
.hrtk-sbp-search-bar__bedrooms-popover:not(#\9):not(#\9) {
	width:     auto;
	min-width: 300px;
}

/* #461: mid-desktop squeeze for the 5-field bar. WHAT already competes
   for width at these sizes with 4 fields; the 5th makes it tight. Both
   rules are anchored to the bedrooms segment (directly, or via the
   sibling combinator for the WHAT that follows it), so the default
   4-field layout keeps its exact metrics. */
@media (min-width: 933px) and (max-width: 1280px) {
	.hrtk-sbp-search-bar__field--bedrooms:not(#\9):not(#\9) {
		flex-basis: 128px;
		min-width:  104px;
	}
	.hrtk-sbp-search-bar__field--bedrooms:not(#\9):not(#\9) ~ .hrtk-sbp-search-bar__field--what {
		flex-basis: 170px;
		min-width:  140px;
	}
}

/* --separator is legacy marker — visual seam now comes from the bar's
   gap + bg color showing between white field pills, not a border. Keep
   the class as a no-op so the PHP template doesn't have to change. */
.hrtk-sbp-search-bar__field--separator:not(#\9):not(#\9) {
	/* intentionally empty */
}

/* Hover is now rendered by a SHARED sliding indicator element (not per-field
   bg) — see .hrtk-sbp-search-bar__hover-indicator below. Per-field --field-bg
   stays transparent on hover so the indicator paints unobstructed beneath
   the field's text. */

/* v0.4.7: per-field bg in active state is TRANSPARENT for both active and
   inactive fields. The bar's #ebebeb shows through inactive fields (looks
   identical to a gray pill since bar bg matches). The active field's white
   pill is rendered by the shared sliding indicator (.hrtk-sbp-search-bar__active-pill)
   which can move freely between fields without z-index conflicts. */
.hrtk-sbp-search-bar--has-active:not(#\9):not(#\9) .hrtk-sbp-search-bar__field--active,
.hrtk-sbp-search-bar--has-active:not(#\9):not(#\9) .hrtk-sbp-search-bar__field--inactive {
	--field-bg: transparent;
}

/* v3.181: the active field widens at its neighbors' expense. Two levers:
   (1) the active field's claim on leftover space jumps to 2.4 (vs 1 for
   the auto-basis growers, 0 for the content-stable fields) and it gets a
   hard min-width floor — without the floor, the submit button's 250ms
   widen could squeeze an active WHEN down to a truncated "A…"; (2) the
   content-stable fields (WHO / WHAT / BEDROOMS) hand back part of their
   fixed basis while INACTIVE. Their flex-grow stays 0, so the freed
   space flows deterministically to the active field and the auto-basis
   growers. Animated by the flex-grow/flex-basis/min-width entries in the
   field's base transition; the active pill tracks the continuous resize
   via its ResizeObserver (v0.4.16). These three-class selectors outrank
   the two-class idle bases and the #461 mid-desktop media overrides. */
.hrtk-sbp-search-bar--has-active:not(#\9):not(#\9) .hrtk-sbp-search-bar__field--active {
	flex-grow: 2.4;
	min-width: 172px;
}
.hrtk-sbp-search-bar--has-active:not(#\9):not(#\9) .hrtk-sbp-search-bar__field--who.hrtk-sbp-search-bar__field--inactive {
	flex-basis: 132px;
	min-width:  112px;
}
.hrtk-sbp-search-bar--has-active:not(#\9):not(#\9) .hrtk-sbp-search-bar__field--what.hrtk-sbp-search-bar__field--inactive {
	flex-basis: 156px;
	min-width:  124px;
}
.hrtk-sbp-search-bar--has-active:not(#\9):not(#\9) .hrtk-sbp-search-bar__field--bedrooms.hrtk-sbp-search-bar__field--inactive {
	flex-basis: 112px;
	min-width:  96px;
}

/* Text contrast bump on hover/active for better legibility on the gray
   pill (idle text on bar is already gray; pill bg darkens behind it). */
.hrtk-sbp-search-bar:not(.hrtk-sbp-search-bar--has-active):not(#\9):not(#\9) .hrtk-sbp-search-bar__field:hover
	.hrtk-sbp-search-bar__input::-moz-placeholder {
	color: var(--hrtk-sbp-text-hover);
}
.hrtk-sbp-search-bar:not(.hrtk-sbp-search-bar--has-active):not(#\9):not(#\9) .hrtk-sbp-search-bar__field:hover
	.hrtk-sbp-search-bar__field-value,
.hrtk-sbp-search-bar:not(.hrtk-sbp-search-bar--has-active):not(#\9):not(#\9) .hrtk-sbp-search-bar__field:hover
	.hrtk-sbp-search-bar__input,
.hrtk-sbp-search-bar:not(.hrtk-sbp-search-bar--has-active):not(#\9):not(#\9) .hrtk-sbp-search-bar__field:hover
	.hrtk-sbp-search-bar__input::placeholder {
	color: var(--hrtk-sbp-text-hover);
}

/* Field-value text — base transition so hover ↔ idle color is animated */
.hrtk-sbp-search-bar__input:not(#\9):not(#\9)::-moz-placeholder {
	-moz-transition: color 200ms var(--hrtk-sbp-spring);
	transition: color 200ms var(--hrtk-sbp-spring);
}
.hrtk-sbp-search-bar__field-value:not(#\9):not(#\9),
.hrtk-sbp-search-bar__input:not(#\9):not(#\9),
.hrtk-sbp-search-bar__input:not(#\9):not(#\9)::placeholder {
	transition: color 200ms var(--hrtk-sbp-spring);
}

/* =========================================================================
   Field dividers — explicit DOM elements (v0.4.4)
   Subtle 1px vertical lines centered in the bar's flex gap. Fade out when
   either adjacent field is hovered (idle bar) or any field is active.
   ========================================================================= */

.hrtk-sbp-search-bar__divider:not(#\9):not(#\9) {
	flex-shrink:    0;
	flex-basis:     1px;
	width:          1px;
	height:         var(--hrtk-sbp-divider-h);
	align-self:     center;
	background:     var(--hrtk-sbp-divider-color);
	opacity:        1;
	pointer-events: none;
	transition:     opacity 180ms var(--hrtk-sbp-spring);
}

/* Hide divider adjacent to a hovered field (idle bar) — both sides. */
.hrtk-sbp-search-bar:not(.hrtk-sbp-search-bar--has-active):not(#\9):not(#\9)
	.hrtk-sbp-search-bar__field:hover + .hrtk-sbp-search-bar__divider,
.hrtk-sbp-search-bar:not(.hrtk-sbp-search-bar--has-active):not(#\9):not(#\9)
	.hrtk-sbp-search-bar__divider:has(+ .hrtk-sbp-search-bar__field:hover) {
	opacity: 0;
}

/* Hide ALL dividers when any field is active — the active pill's shadow
   and bar darkening provide enough visual structure; lines would compete. */
.hrtk-sbp-search-bar--has-active:not(#\9):not(#\9) .hrtk-sbp-search-bar__divider {
	opacity: 0;
}

/* =========================================================================
   Shared hover indicator — single sliding pill (v0.4.6)
   Absolutely positioned inside the form. JS sets left/width via inline
   styles on mouseenter of a field; CSS transitions both with spring easing
   for a lateral slide between adjacent fields. Sits below fields (z-0
   vs z-1) so field text stays legible above the pill.
   ========================================================================= */

.hrtk-sbp-search-bar__hover-indicator:not(#\9):not(#\9) {
	position:       absolute;
	top:            6px;       /* matches bar's padding */
	left:           0;
	width:          0;
	height:         calc(100% - 12px);
	background:     var(--hrtk-sbp-field-hover-bg);
	border-radius:  var(--hrtk-sbp-radius-inner, 999px);
	opacity:        0;
	pointer-events: none;
	z-index:        0;
	transition:
		left    320ms var(--hrtk-sbp-spring),
		width   320ms var(--hrtk-sbp-spring),
		opacity 180ms ease;
	will-change:    left, width;
}

.hrtk-sbp-search-bar__hover-indicator--visible:not(#\9):not(#\9) {
	opacity: 1;
}

/* When any field is active, hover indicator is fully hidden — active pill
   takes over rendering. */
.hrtk-sbp-search-bar--has-active:not(#\9):not(#\9) .hrtk-sbp-search-bar__hover-indicator {
	opacity: 0 !important;
}

/* =========================================================================
   Shared sliding active pill — v0.4.7
   Single absolutely-positioned white pill with two-shadow elevation. JS sets
   left/width via inline styles when the active field changes; CSS transitions
   both with spring easing for a lateral slide between adjacent active fields.
   Sits at z-0 (below fields' text at z-1) so field labels stay legible above
   the pill. Inactive fields are transparent in --has-active state, so the
   pill is fully visible during transit.
   ========================================================================= */

.hrtk-sbp-search-bar__active-pill:not(#\9):not(#\9) {
	position:       absolute;
	top:            6px;       /* matches bar padding */
	left:           0;
	width:          0;
	height:         calc(100% - 12px);
	background:     var(--hrtk-sbp-field-active-bg);
	box-shadow:     var(--hrtk-sbp-field-active-shadow);
	border-radius:  var(--hrtk-sbp-radius-inner, 999px);
	opacity:        0;
	pointer-events: none;
	z-index:        0;
	transition:
		left    320ms var(--hrtk-sbp-spring),
		width   320ms var(--hrtk-sbp-spring),
		opacity 180ms ease;
	will-change:    left, width;
}

.hrtk-sbp-search-bar__active-pill--visible:not(#\9):not(#\9) {
	opacity: 1;
}

/* v0.4.14: lateral popover slide shelved. Clean crossfade is the default —
   driven by .hrtk-sbp-popover--entering and .hrtk-sbp-popover--leaving below
   (vertical fall + opacity). The directional `--entering-left/-right`
   and `--leaving-left/-right` classes were removed along with their
   FIELD_ORDER branching in setActiveField. */

/* =========================================================================
   Clear button — "x" inside fields with selected values (v0.4.6)
   JS toggles .hrtk-sbp-search-bar__field--has-value on the field when its
   underlying value is set; this surface the clear button via CSS only.
   ========================================================================= */

.hrtk-sbp-search-bar__clear:not(#\9):not(#\9) {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           28px;
	height:          28px;
	margin-left:     8px;
	border:          none;
	background:      transparent;
	border-radius:   50%;
	color:           #6b7280;
	cursor:          pointer;
	font-family:     inherit;
	padding:         0;
	/* Hidden by default — only appears when field has --has-value */
	opacity:         0;
	pointer-events:  none;
	transition:
		background 150ms var(--hrtk-sbp-spring),
		opacity    180ms ease,
		color      150ms var(--hrtk-sbp-spring);
	position:        absolute;
	right:           12px;
	top:             50%;
	transform:       translateY(-50%);
}

.hrtk-sbp-search-bar__field--has-value:not(#\9):not(#\9) .hrtk-sbp-search-bar__clear {
	opacity:        1;
	pointer-events: auto;
}

.hrtk-sbp-search-bar__clear:hover:not(#\9):not(#\9) {
	background: #e0e0e0;   /* Lighter than the surrounding pill (#ebebeb) */
	color:      #111827;
}

.hrtk-sbp-search-bar__clear:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-btn-bg);
	outline-offset: 2px;
}

.hrtk-sbp-search-bar__clear:not(#\9):not(#\9) svg {
	display: block;
	width:   14px;
	height:  14px;
}

/* When a field has a value, reserve space on the right of the value TEXT so
   it can't slide under the absolutely-positioned clear ×. The reservation
   lives on the child, not the field: every layout variant (refine >=933px,
   stacked <=960px) re-declares the field's padding shorthand at higher
   specificity / later order, which silently clobbered the old field-level
   44px version and let truncated values run under the ×.
   30px = 12 (clear right) + 28 (clear w) + 4 buffer - 14 (smallest field
   padding-right, refine mode). */
.hrtk-sbp-search-bar__field--has-value:not(#\9):not(#\9) .hrtk-sbp-search-bar__field-value,
.hrtk-sbp-search-bar__field--has-value:not(#\9):not(#\9) .hrtk-sbp-search-bar__input {
	padding-right: 30px;
}

/* =========================================================================
   Field labels
   ========================================================================= */

.hrtk-sbp-search-bar__label:not(#\9):not(#\9) {
	display:        block;
	font-size:      var(--hrtk-sbp-label-size);
	font-weight:    700;
	color:          var(--hrtk-sbp-label-color);
	line-height:    1;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	-webkit-user-select:    none;
	   -moz-user-select:    none;
	        user-select:    none;
	pointer-events: none;
}

/* =========================================================================
   Field value text (trigger display)
   ========================================================================= */

.hrtk-sbp-search-bar__field-value:not(#\9):not(#\9) {
	display:       block;
	font-size:     var(--hrtk-sbp-input-size);
	font-family:   inherit;
	color:         var(--hrtk-sbp-input-color);
	line-height:   1.4;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.hrtk-sbp-search-bar__field-value--placeholder:not(#\9):not(#\9) {
	color: var(--hrtk-sbp-placeholder);
}

/* Once a real value is set, JS removes the placeholder modifier */
.hrtk-sbp-search-bar__field-value:not(.hrtk-sbp-search-bar__field-value--placeholder):not(#\9):not(#\9) {
	color: var(--hrtk-sbp-input-color);
}

/* #573: concierge typing placeholder — thin accent caret while the ghost
   types, blinking in 1s steps like a terminal cursor. The value span keeps
   its fixed-basis + ellipsis metrics, so the animation can never resize the
   field. */
.hrtk-sbp-search-bar__field-value--ask-typing:not(#\9):not(#\9)::after {
	content:        '';
	display:        inline-block;
	width:          1px;
	height:         1em;
	margin-left:    1px;
	vertical-align: -0.15em;
	background:     var(--hrtk-sbp-accent, #ff385c);
	animation:      hrtk-sbp-ask-caret 1s steps(1) infinite;
}

@keyframes hrtk-sbp-ask-caret {
	50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hrtk-sbp-search-bar__field-value--ask-typing:not(#\9):not(#\9)::after {
		display: none;
	}
}

/* #573: concierge mark beside the WHAT label (renders only while the typing
   placeholder feature is active). */
.hrtk-sbp-search-bar__label-icon:not(#\9):not(#\9) {
	display:        inline-block;
	margin-right:   4px;
	vertical-align: -1px;
	color:          var(--hrtk-sbp-accent, #ff385c);
}

.hrtk-sbp-search-bar__label-icon:not(#\9):not(#\9) svg {
	display: inline-block;
	width:   11px;
	height:  11px;
	fill:    currentColor;
}

/* #573: concierge branding header at the top of the WHAT popover — accent
   bubble+sparkle in a soft-ringed circle plus the operator's hero-ask label
   (mirrors the approved round-3 mock). Gone entirely when the feature is
   off, restoring the pre-#573 popover. */
.hrtk-sbp-search-bar__what-brand:not(#\9):not(#\9) {
	display:        flex;
	align-items:    center;
	gap:            9px;
	padding-bottom: 13px;
}

.hrtk-sbp-search-bar__what-brand-icon:not(#\9):not(#\9) {
	display:       grid;
	place-items:   center;
	width:         28px;
	height:        28px;
	flex:          0 0 auto;
	border-radius: 50%;
	border:        1.5px solid var(--hrtk-sbp-accent-ring, rgba(255, 56, 92, 0.35));
	color:         var(--hrtk-sbp-accent, #ff385c);
}

.hrtk-sbp-search-bar__what-brand-icon:not(#\9):not(#\9) svg {
	width:  14px;
	height: 14px;
	fill:   currentColor;
}

.hrtk-sbp-search-bar__what-brand-label:not(#\9):not(#\9) {
	font-size:   14px;
	font-weight: 600;
}

/* Focus ring on button-fields */
.hrtk-sbp-search-bar__field--when:focus-visible:not(#\9):not(#\9),
.hrtk-sbp-search-bar__field--who:focus-visible:not(#\9):not(#\9),
.hrtk-sbp-search-bar__field--what:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-btn-bg);
	outline-offset: -2px;
}

/* =========================================================================
   Destination (Where) combobox input
   ========================================================================= */

.hrtk-sbp-search-bar__input:not(#\9):not(#\9) {
	display:     block;
	width:       100%;
	background:  transparent;
	border:      none;
	outline:     none;
	padding:     0;
	margin:      0;
	font-size:   var(--hrtk-sbp-input-size);
	font-family: inherit;
	color:       var(--hrtk-sbp-input-color);
	line-height: 1.4;
	-webkit-appearance: none;
	-moz-appearance:  none;
	     appearance:  none;
}

.hrtk-sbp-search-bar__input:not(#\9):not(#\9)::-moz-placeholder {
	color:   var(--hrtk-sbp-placeholder);
	opacity: 1;
}

.hrtk-sbp-search-bar__input:not(#\9):not(#\9)::placeholder {
	color:   var(--hrtk-sbp-placeholder);
	opacity: 1;
}

.hrtk-sbp-search-bar__input:not(#\9):not(#\9)::-webkit-search-cancel-button,
.hrtk-sbp-search-bar__input:not(#\9):not(#\9)::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance:         none;
}

.hrtk-sbp-search-bar__input:focus:not(#\9):not(#\9) {
	outline: none;
}

@media (forced-colors: active) {
	.hrtk-sbp-search-bar__input:focus:not(#\9):not(#\9) {
		outline: 2px solid ButtonText;
	}
}

/* =========================================================================
   Submit button — collapsed icon ↔ expanded pill
   ========================================================================= */

.hrtk-sbp-search-bar__submit:not(#\9):not(#\9) {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	gap:             0;
	background:      var(--hrtk-sbp-btn-bg);
	color:           var(--hrtk-sbp-btn-color);
	border:          none;
	border-radius:   var(--hrtk-sbp-btn-radius);
	/* Collapsed: 64px circle, matches field min-height */
	width:           64px;
	height:          64px;
	padding:         0;
	font-size:       15px;
	font-weight:     600;
	font-family:     inherit;
	cursor:          pointer;
	overflow:        hidden;
	white-space:     nowrap;
	margin-left:     0;       /* Bar's gap variable spaces us from WHAT */
	margin-right:    0;
	/* Sit above WHAT's right-extension nub (including when WHAT is active
	   and promoted to z-index 2). Without this, an active WHAT's nub would
	   leak through the gap and sit over the red button. */
	position:        relative;
	z-index:         4;
	/* Smooth expand */
	transition:      width 250ms ease, padding 250ms ease, gap 250ms ease, background 0.15s ease, transform 0.1s ease;
}

.hrtk-sbp-search-bar__submit:hover:not(#\9):not(#\9) {
	background: var(--hrtk-sbp-btn-bg-hover);
}

.hrtk-sbp-search-bar__submit:active:not(#\9):not(#\9) {
	transform: scale(0.97);
}

.hrtk-sbp-search-bar__submit:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-btn-bg);
	outline-offset: 2px;
	box-shadow:     var(--hrtk-sbp-focus-ring);
}

.hrtk-sbp-search-bar__submit-icon:not(#\9):not(#\9) {
	display:     block;
	flex-shrink: 0;
}

/* Submit label — hidden until expanded */
.hrtk-sbp-search-bar__submit-label:not(#\9):not(#\9) {
	width:      0;
	overflow:   hidden;
	opacity:    0;
	display:    inline-block;
	transition: width 250ms ease, opacity 200ms ease;
	white-space: nowrap;
}

/* Expanded state — triggered when any field is active. Width comes from
   --hrtk-sbp-cta-w when the CTA count module paints a longer label
   ("Search 75 homes"); JS measures the text and sets the var so the pill
   fits without clipping. Falls back to the stock 130px otherwise, and
   stays a length→length transition either way so the morph animates. */
.hrtk-sbp-search-bar__submit--expanded:not(#\9):not(#\9) {
	width:   var(--hrtk-sbp-cta-w, 130px);
	padding: 0 24px;
	gap:     8px;
}

.hrtk-sbp-search-bar__submit--expanded:not(#\9):not(#\9) .hrtk-sbp-search-bar__submit-label {
	width:   auto;
	opacity: 1;
}

/* =========================================================================
   Error message
   ========================================================================= */

.hrtk-sbp-search-bar__error:not(#\9):not(#\9) {
	position:    absolute;
	bottom:      calc(100% + 8px);
	left:        0;
	right:       0;
	font-size:   12px;
	color:       #dc2626;
	background:  #fef2f2;
	border:      1px solid #fecaca;
	border-radius: min(6px, var(--hrtk-sbp-shape-max, 999px));
	padding:     6px 10px;
}

.hrtk-sbp-search-bar__error[hidden]:not(#\9):not(#\9) {
	display: none;
}

/* =========================================================================
   Listbox (destination autocomplete dropdown)
   ========================================================================= */

.hrtk-sbp-search-bar__listbox:not(#\9):not(#\9) {
	position:      absolute;
	top:           calc(100% + 8px);
	left:          0;
	min-width:     300px;
	width:         50%;
	max-width:     min(425px, 90vw);
	max-height:    var(--hrtk-sbp-listbox-max-h);
	overflow-y:    auto;
	background:    var(--hrtk-sbp-listbox-bg);
	border-radius: var(--hrtk-sbp-listbox-radius);
	box-shadow:    var(--hrtk-sbp-listbox-shadow);
	list-style:    none;
	padding:       8px 0;
	margin:        0;
	z-index:       9999;
}

.hrtk-sbp-search-bar__listbox[hidden]:not(#\9):not(#\9) {
	display: none;
}

.hrtk-sbp-search-bar__option:not(#\9):not(#\9) {
	display:     flex;
	align-items: center;
	gap:         10px;
	padding:     10px 16px;
	font-size:   14px;
	color:       var(--hrtk-sbp-input-color);
	cursor:      pointer;
	transition:  background 0.12s ease;
}

.hrtk-sbp-search-bar__option[aria-selected="true"]:not(#\9):not(#\9),
.hrtk-sbp-search-bar__option:hover:not(#\9):not(#\9) {
	background: var(--hrtk-sbp-hover-bg);
	color:      var(--hrtk-sbp-hover-color);
}

.hrtk-sbp-search-bar__option-icon:not(#\9):not(#\9) {
	flex-shrink: 0;
	opacity:     0.45;
}

.hrtk-sbp-search-bar__option-label:not(#\9):not(#\9) {
	flex:          1 1 auto;
	min-width:     0;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	font-weight:   500;
}

.hrtk-sbp-search-bar__option-meta:not(#\9):not(#\9) {
	flex-shrink: 0;
	font-size:   12px;
	color:       var(--hrtk-sbp-label-color);
}

/* Empty / loading states */
.hrtk-sbp-search-bar__listbox-message:not(#\9):not(#\9) {
	padding:   12px 16px;
	font-size: 13px;
	color:     var(--hrtk-sbp-label-color);
}

/* =========================================================================
   Browse mode — section headers, icon containers, subtitles (v0.2.0+)
   ========================================================================= */

.hrtk-sbp-search-bar__section-header:not(#\9):not(#\9) {
	padding:        10px 16px 4px;
	font-size:      11px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:          var(--hrtk-sbp-label-color);
	list-style:     none;
	cursor:         default;
	-webkit-user-select:    none;
	   -moz-user-select:    none;
	        user-select:    none;
}

.hrtk-sbp-search-bar__section-header:first-child:not(#\9):not(#\9) {
	padding-top: 4px;
}

.hrtk-sbp-search-bar__option-icon-wrap:not(#\9):not(#\9) {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	border-radius:   min(8px, var(--hrtk-sbp-shape-max, 999px));
	background:      #f4f4f4;
	color:           #717171;
	transition:      background 0.12s ease;
}

.hrtk-sbp-search-bar__option:hover:not(#\9):not(#\9) .hrtk-sbp-search-bar__option-icon-wrap,
.hrtk-sbp-search-bar__option[aria-selected="true"]:not(#\9):not(#\9) .hrtk-sbp-search-bar__option-icon-wrap {
	background: #e8e8e8;
}

.hrtk-sbp-search-bar__option-content:not(#\9):not(#\9) {
	display:        flex;
	flex:           1 1 auto;
	min-width:      0;
	flex-direction: column;
	gap:            2px;
}

.hrtk-sbp-search-bar__option:not(#\9):not(#\9) .hrtk-sbp-search-bar__option-label {
	font-weight:   500;
	font-size:     14px;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

.hrtk-sbp-search-bar__option-subtitle:not(#\9):not(#\9) {
	font-size:     13px;
	color:         #717171;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	line-height:   1.3;
}

.hrtk-sbp-search-bar__option--loading:not(#\9):not(#\9) {
	opacity:        0.7;
	pointer-events: none;
}

/* Skeleton shimmer */
@keyframes hrtk-sbp-shimmer {
	0%   { background-position: -300px 0; }
	100% { background-position:  300px 0; }
}

.hrtk-sbp-search-bar__option--skeleton:not(#\9):not(#\9) {
	pointer-events: none;
}

.hrtk-sbp-search-bar__option--skeleton:not(#\9):not(#\9) .hrtk-sbp-search-bar__option-label,
.hrtk-sbp-search-bar__option--skeleton:not(#\9):not(#\9) .hrtk-sbp-search-bar__option-subtitle {
	border-radius:   min(4px, var(--hrtk-sbp-shape-max, 999px));
	background:      linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 300px 100%;
	animation:       hrtk-sbp-shimmer 1.5s infinite linear;
	color:           transparent;
}

/* =========================================================================
   Guests popover — anchored right of bar, 50% width
   ========================================================================= */

.hrtk-sbp-search-bar__guests-popover:not(#\9):not(#\9) {
	position:      absolute;
	top:           calc(100% + 8px);
	right:         0;
	left:          auto;
	width:         50%;
	min-width:     320px;
	background:    var(--hrtk-sbp-bg);
	border-radius: var(--hrtk-sbp-popover-radius);
	box-shadow:    var(--hrtk-sbp-popover-shadow);
	border:        1px solid var(--hrtk-sbp-border);
	padding:       20px;
	z-index:       9998;
}

/* Done button row */
.hrtk-sbp-search-bar__guests-close-row:not(#\9):not(#\9) {
	display:         flex;
	justify-content: flex-end;
	margin-top:      16px;
	border-top:      1px solid var(--hrtk-sbp-border);
	padding-top:     12px;
}

.hrtk-sbp-search-bar__guests-close:not(#\9):not(#\9) {
	background:      transparent;
	border:          none;
	cursor:          pointer;
	font-size:       13px;
	font-weight:     600;
	font-family:     inherit;
	color:           var(--hrtk-sbp-input-color);
	text-decoration: underline;
	padding:         4px 0;
}

.hrtk-sbp-search-bar__guests-close:focus-visible:not(#\9):not(#\9) {
	box-shadow:    var(--hrtk-sbp-focus-ring);
	border-radius: min(4px, var(--hrtk-sbp-shape-max, 999px));
}

/* =========================================================================
   v0.4.28: Guest picker — Airbnb-style row layout.
   Two-line label block (title + muted hint) on the left, circular
   bordered stepper on the right, hairline dividers between rows.
   ========================================================================= */

.hrtk-sbp-guest-picker:not(#\9):not(#\9) {
	display:        flex;
	flex-direction: column;
}

.hrtk-sbp-guest-picker__row:not(#\9):not(#\9) {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	padding:         20px 0;
	border-bottom:   1px solid #ebebeb;
}

.hrtk-sbp-guest-picker__row:first-child:not(#\9):not(#\9) {
	padding-top: 4px;
}

.hrtk-sbp-guest-picker__row:last-child:not(#\9):not(#\9) {
	border-bottom: 0;
	padding-bottom: 4px;
}

.hrtk-sbp-guest-picker__label:not(#\9):not(#\9) {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	min-width:      0;
}

.hrtk-sbp-guest-picker__title:not(#\9):not(#\9) {
	font-size:   16px;
	font-weight: 600;
	color:       #111827;
	line-height: 1.3;
}

.hrtk-sbp-guest-picker__hint:not(#\9):not(#\9) {
	font-size:   13px;
	font-weight: 400;
	color:       #6b7280;
	line-height: 1.4;
}

/* Pets row hint renders as a link-styled button. */
.hrtk-sbp-guest-picker__hint--link:not(#\9):not(#\9) {
	background:      transparent;
	border:          none;
	padding:         0;
	margin:          0;
	font-family:     inherit;
	text-align:      left;
	cursor:          pointer;
	color:           #6b7280;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hrtk-sbp-guest-picker__hint--link:hover:not(#\9):not(#\9) {
	color: #111827;
}

.hrtk-sbp-guest-picker__hint--link:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-accent, #ff385c);
	outline-offset: 2px;
	border-radius:  min(2px, var(--hrtk-sbp-shape-max, 999px));
}

.hrtk-sbp-guest-picker__stepper:not(#\9):not(#\9) {
	display:     flex;
	align-items: center;
	gap:         12px;
	flex-shrink: 0;
}

.hrtk-sbp-guest-picker__btn:not(#\9):not(#\9) {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	border:          1px solid #b0b0b0;
	border-radius:   50%;
	background:      transparent;
	color:           #717171;
	font-size:       18px;
	line-height:     1;
	cursor:          pointer;
	padding:         0;
	font-family:     inherit;
	transition:      border-color 0.12s ease, color 0.12s ease;
}

.hrtk-sbp-guest-picker__btn:hover:not(:disabled):not(#\9):not(#\9) {
	border-color: #222222;
	color:        #222222;
}

.hrtk-sbp-guest-picker__btn:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-accent, #ff385c);
	outline-offset: 2px;
}

.hrtk-sbp-guest-picker__btn:disabled:not(#\9):not(#\9) {
	opacity:        0.4;
	cursor:         not-allowed;
}

.hrtk-sbp-guest-picker__count:not(#\9):not(#\9) {
	min-width:   24px;
	text-align:  center;
	font-size:   16px;
	color:       #111827;
	font-weight: 400;
}

/* =========================================================================
   What (description) popover — same anchor as guests, right side
   ========================================================================= */

.hrtk-sbp-search-bar__what-popover:not(#\9):not(#\9) {
	position:       absolute;
	top:            calc(100% + 8px);
	right:          0;
	left:           auto;
	width:          50%;
	min-width:      320px;
	max-height:     min(80vh, 640px);
	background:     var(--hrtk-sbp-bg);
	border-radius:  var(--hrtk-sbp-popover-radius);
	box-shadow:     var(--hrtk-sbp-popover-shadow);
	border:         1px solid var(--hrtk-sbp-border);
	padding:        20px;
	z-index:        9998;
	/* v0.4.35.2: fixed-shell + scrollable-content layout. The toggle (when
	   present) and the close-row stay pinned at top/bottom; only the pane
	   between them scrolls when content overflows. */
	display:        flex;
	flex-direction: column;
}

/* The pane is the scrollable region. flex:1 + min-height:0 lets it shrink
   below its content size so overflow-y can engage. Left negative margin +
   matching padding give chip focus rings room to render without clipping
   against the popover's padding edge. The top gets the same treatment: the
   describe and by-name inputboxes sit flush with the pane's top edge, so
   without it their 3px focus ring is cut off on top only. Right padding
   holds content off the scrollbar so right-aligned items (bedrooms/bathrooms
   steppers) don't bump against it. */
.hrtk-sbp-search-bar__what-pane:not(#\9):not(#\9) {
	flex:           1 1 auto;
	min-height:     0;
	overflow-y:     auto;
	overflow-x:     hidden;
	margin-top:     -4px;
	margin-left:    -4px;
	padding-top:    4px;
	padding-left:   4px;
	padding-right:  12px;
}

.hrtk-sbp-search-bar__what-placeholder:not(#\9):not(#\9) p {
	font-size:   14px;
	color:       var(--hrtk-sbp-label-color);
	line-height: 1.5;
	margin:      0 0 4px;
}

/* v0.4.30: WHAT field Describe / Filter toggle. Segmented pill control
   at the top of the popover when AI Search Enhancer is active; absent
   otherwise.
   v0.4.36.2: sliding white indicator pill animates laterally between
   Describe and Filter positions, instead of the active state being a
   discrete background swap. Same easing as the lateral month-nav slide
   (200ms cubic-bezier(0.4, 0, 0.2, 1)). Indicator is absolute-positioned
   behind the button text via z-index, so the buttons stay click targets
   and the pill is purely decorative. Width = 50% - 5px and translation
   by calc(100% + 2px) accounts for container padding (4px each side)
   and the gap (2px) between the two buttons. */
.hrtk-sbp-search-bar__what-toggle:not(#\9):not(#\9) {
	position:        relative;
	display:         flex;
	width:           100%;
	gap:             2px;
	background:      #f0f0f0;
	border-radius:   var(--hrtk-sbp-shape-max, 999px);
	padding:         4px;
	margin-bottom:   16px;
}

/* The sliding pill indicator assumed exactly two equal tabs (50% width +
   translateX per mode), which breaks with a third "By name" tab and a
   variable first tab. The white pill now lives on the active button itself
   (buttons are flex:1 so it self-sizes to any tab count). The old indicator
   element is retired. */
.hrtk-sbp-search-bar__what-toggle-indicator:not(#\9):not(#\9) {
	display: none;
}

.hrtk-sbp-search-bar__what-toggle-btn:not(#\9):not(#\9) {
	position:        relative;
	z-index:         1;
	flex:            1 1 0;
	padding:         8px 18px;
	border:          none;
	background:      transparent;
	border-radius:   var(--hrtk-sbp-shape-max, 999px);
	box-shadow:      0 0 0 0 rgba(0, 0, 0, 0);
	font-family:     inherit;
	font-size:       13px;
	font-weight:     500;
	color:           #6b7280;
	cursor:          pointer;
	transition:      color 120ms ease, background 160ms ease, box-shadow 160ms ease;
}

.hrtk-sbp-search-bar__what-toggle-btn:hover:not(.hrtk-sbp-search-bar__what-toggle-btn--active):not(#\9):not(#\9) {
	color: #111827;
}

.hrtk-sbp-search-bar__what-toggle-btn--active:not(#\9):not(#\9) {
	color:       #111827;
	font-weight: 600;
	background:   #ffffff;
	box-shadow:   0 1px 2px rgba(0, 0, 0, 0.08);
}

.hrtk-sbp-search-bar__what-toggle-btn:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-btn-bg);
	outline-offset: 2px;
}

/* Mode-tab icons (#432): sparkle / funnel / home beside the labels. The
 * buttons keep their flex sizing; inline-flex centers icon + label as one
 * unit. Icons inherit the tab's text color through currentColor. */
.hrtk-sbp-search-bar__what-toggle-btn:not(#\9):not(#\9) {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             6px;
	/* The icon eats into the fixed tab width — keep labels like
	 * "By name" on one line and give back some horizontal padding. */
	white-space:     nowrap;
	padding-left:    12px;
	padding-right:   12px;
}

.hrtk-sbp-search-bar__what-tab-icon:not(#\9):not(#\9) {
	display: inline-flex;
	flex:    0 0 auto;
}

.hrtk-sbp-search-bar__what-tab-icon:not(#\9):not(#\9) svg {
	display: block;
	width:   14px;
	height:  14px;
}

.hrtk-sbp-search-bar__what-pane[hidden]:not(#\9):not(#\9) {
	display: none;
}

.hrtk-sbp-search-bar__what-empty:not(#\9):not(#\9) {
	font-size:   14px;
	color:       #6b7280;
	line-height: 1.5;
	margin:      0;
	padding:     24px 0;
	text-align:  center;
}

/* v0.4.32: Describe pane — textarea input + blue circle submit, then
   a list of tappable suggested descriptions. Airbnb-style: black
   bordered input box, soft gray icon tiles, bold suggestion text. */
.hrtk-sbp-search-bar__what-describe-inputbox:not(#\9):not(#\9) {
	border:        1px solid #d1d5db;
	border-radius: min(16px, var(--hrtk-sbp-radius-inner, 999px));
	padding:       14px 16px;
	background:    #ffffff;
	transition:    border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Focus indicator. The textarea keeps outline:none (below); the focus ring
   lives on the rounded box so it hugs the 16px corners instead of the
   browser's default rectangular dashed outline. Thin, accent-tinted, soft. */
.hrtk-sbp-search-bar__what-describe-inputbox:focus-within:not(#\9):not(#\9) {
	border-color: var(--hrtk-sbp-accent, #ff385c);
	box-shadow:   var(--hrtk-sbp-focus-ring);
}

.hrtk-sbp-search-bar__what-describe-input:not(#\9):not(#\9) {
	width:        100%;
	border:       none;
	outline:      none;
	resize:       none;
	background:   transparent;
	font-family:  inherit;
	font-size:    14px;
	line-height:  1.5;
	color:        #111827;
	min-height:   60px;
	padding:      0;
}

/* Suppress the theme's global focus outline on the textarea. UIkit/YOOtheme
   sets ` :focus-visible { outline: 2px dotted #223650 } ` at specificity
   (0,1,0), which ties our base `outline: none` and wins on source order,
   leaving a jarring dotted rectangle inside the box. Our class + state
   selector is (0,2,0), so it wins by specificity with no !important. Focus is
   shown by the inputbox :focus-within ring instead. */
.hrtk-sbp-search-bar__what-describe-input:focus:not(#\9):not(#\9),
.hrtk-sbp-search-bar__what-describe-input:focus-visible:not(#\9):not(#\9) {
	outline:    none;
	box-shadow: none;
}

.hrtk-sbp-search-bar__what-describe-input:not(#\9):not(#\9)::-moz-placeholder {
	color: #9ca3af;
}

.hrtk-sbp-search-bar__what-describe-input:not(#\9):not(#\9)::placeholder {
	color: #9ca3af;
}

/* v1.0.8: "By name" pane — a typed property search that navigates straight to
   the listing. Reuses the describe inputbox pill look plus a searchable
   listbox of matches with a keyboard/hover highlight. text-align is pinned
   because the bar often sits in a centered hero section and the results and
   status line would otherwise inherit the centering. */
.hrtk-sbp-search-bar__what-byname:not(#\9):not(#\9) {
	display:        flex;
	flex-direction: column;
	gap:            12px;
	text-align:     left;
}

.hrtk-sbp-search-bar__what-byname-inputbox:not(#\9):not(#\9) {
	display:       flex;
	align-items:   center;
	gap:           10px;
	border:        1px solid #d1d5db;
	border-radius: min(16px, var(--hrtk-sbp-radius-inner, 999px));
	padding:       12px 16px;
	background:    #ffffff;
	transition:    border-color 0.12s ease, box-shadow 0.12s ease;
}

.hrtk-sbp-search-bar__what-byname-inputbox:focus-within:not(#\9):not(#\9) {
	border-color: var(--hrtk-sbp-accent, #ff385c);
	box-shadow:   var(--hrtk-sbp-focus-ring);
}

.hrtk-sbp-search-bar__what-byname-icon:not(#\9):not(#\9) {
	flex-shrink: 0;
	display:     flex;
	align-items: center;
	color:       #6b7280;
}

.hrtk-sbp-search-bar__what-byname-icon:not(#\9):not(#\9) svg {
	width:   18px;
	height:  18px;
	display: block;
}

.hrtk-sbp-search-bar__what-byname-input:not(#\9):not(#\9) {
	width:       100%;
	border:      none;
	outline:     none;
	background:  transparent;
	font-family: inherit;
	font-size:   14px;
	line-height: 1.5;
	color:       #111827;
	padding:     0;
}

.hrtk-sbp-search-bar__what-byname-input:focus:not(#\9):not(#\9),
.hrtk-sbp-search-bar__what-byname-input:focus-visible:not(#\9):not(#\9) {
	outline:    none;
	box-shadow: none;
}

.hrtk-sbp-search-bar__what-byname-input:not(#\9):not(#\9)::-moz-placeholder {
	color: #9ca3af;
}

.hrtk-sbp-search-bar__what-byname-input:not(#\9):not(#\9)::placeholder {
	color: #9ca3af;
}

.hrtk-sbp-search-bar__what-byname-results:not(#\9):not(#\9) {
	list-style: none;
	padding:    0;
	margin:     0;
	display:    flex;
	flex-direction: column;
	gap:        2px;
	max-height: 280px;
	overflow-y: auto;
}

.hrtk-sbp-search-bar__what-byname-option:not(#\9):not(#\9) {
	padding:       10px 12px;
	border-radius: min(12px, var(--hrtk-sbp-shape-max, 999px));
	cursor:        pointer;
	font-size:     14px;
	font-weight:   500;
	color:         #111827;
	line-height:   1.4;
	transition:    background 0.12s ease;
}

.hrtk-sbp-search-bar__what-byname-option:hover:not(#\9):not(#\9),
.hrtk-sbp-search-bar__what-byname-option.is-active:not(#\9):not(#\9) {
	background: #f7f7f7;
}

.hrtk-sbp-search-bar__what-byname-option.is-active:not(#\9):not(#\9) {
	box-shadow: inset 0 0 0 1px var(--hrtk-sbp-accent-ring, rgba(255, 56, 92, 0.25));
}

.hrtk-sbp-search-bar__what-byname-status:not(#\9):not(#\9) {
	margin:      0;
	padding:     4px 12px; /* matches the option's inline padding so both share a left edge */
	font-size:   13px;
	color:       #6b7280;
	line-height: 1.4;
}

.hrtk-sbp-search-bar__what-suggestions-heading:not(#\9):not(#\9) {
	font-size:   13px;
	font-weight: 500;
	color:       #6b7280;
	margin:      20px 0 12px;
	padding:     0;
}

.hrtk-sbp-search-bar__what-suggestions:not(#\9):not(#\9) {
	list-style:    none;
	padding:       0;
	margin:        0;
	display:       flex;
	flex-direction: column;
	gap:           4px;
}

.hrtk-sbp-search-bar__what-suggestion:not(#\9):not(#\9) {
	display:         flex;
	align-items:     center;
	gap:             14px;
	width:           100%;
	padding:         8px 8px;
	border:          none;
	background:      transparent;
	border-radius:   min(12px, var(--hrtk-sbp-shape-max, 999px));
	cursor:          pointer;
	font-family:     inherit;
	text-align:      left;
	transition:      background 0.12s ease;
}

.hrtk-sbp-search-bar__what-suggestion:hover:not(#\9):not(#\9) {
	background: #f7f7f7;
}

.hrtk-sbp-search-bar__what-suggestion:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-btn-bg);
	outline-offset: 2px;
}

.hrtk-sbp-search-bar__what-suggestion-icon:not(#\9):not(#\9) {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           48px;
	height:          48px;
	border-radius:   min(12px, var(--hrtk-sbp-shape-max, 999px));
	background:      #ebebeb;
	color:           #222222;
}

.hrtk-sbp-search-bar__what-suggestion-icon:not(#\9):not(#\9) svg {
	width:  18px;
	height: 18px;
	display: block;
}

.hrtk-sbp-search-bar__what-suggestion-text:not(#\9):not(#\9) {
	font-size:   14px;
	font-weight: 600;
	color:       #111827;
	line-height: 1.4;
}

/* v0.4.35: Filter pane — bedrooms/bathrooms steppers, type + amenity chips.
   Section dividers mirror the guest picker's 1px hairline rhythm; chips
   borrow Airbnb's 36px pill height + flex-wrap layout. */
.hrtk-sbp-search-bar__filter-section:not(#\9):not(#\9) {
	display:        flex;
	flex-direction: column;
	padding:        20px 0;
	border-bottom:  1px solid #ebebeb;
}

.hrtk-sbp-search-bar__filter-section:first-child:not(#\9):not(#\9) {
	padding-top: 4px;
}

.hrtk-sbp-search-bar__filter-section:last-child:not(#\9):not(#\9) {
	border-bottom:  0;
	padding-bottom: 4px;
}

.hrtk-sbp-search-bar__filter-section-title:not(#\9):not(#\9) {
	font-size:    15px;
	font-weight:  700;
	color:        #111827;
	line-height:  1.3;
	margin:       0 0 12px 0;
}

.hrtk-sbp-search-bar__filter-stepper-row:not(#\9):not(#\9) {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	padding:         8px 0;
}

.hrtk-sbp-search-bar__filter-stepper-label:not(#\9):not(#\9) {
	font-size:   15px;
	font-weight: 400;
	color:       #111827;
	line-height: 1.4;
}

.hrtk-sbp-search-bar__filter-stepper:not(#\9):not(#\9) {
	display:     flex;
	align-items: center;
	gap:         12px;
	flex-shrink: 0;
}

.hrtk-sbp-search-bar__filter-stepper-btn:not(#\9):not(#\9) {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	border:          1px solid #b0b0b0;
	border-radius:   50%;
	background:      transparent;
	color:           #717171;
	font-size:       18px;
	line-height:     1;
	cursor:          pointer;
	padding:         0;
	font-family:     inherit;
	transition:      border-color 0.12s ease, color 0.12s ease;
}

.hrtk-sbp-search-bar__filter-stepper-btn:hover:not(:disabled):not(#\9):not(#\9) {
	border-color: #222222;
	color:        #222222;
}

.hrtk-sbp-search-bar__filter-stepper-btn:disabled:not(#\9):not(#\9) {
	border-color: #dddddd;
	color:        #dddddd;
	cursor:       not-allowed;
}

.hrtk-sbp-search-bar__filter-stepper-btn:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-accent, #ff385c);
	outline-offset: 2px;
}

.hrtk-sbp-search-bar__filter-stepper-count:not(#\9):not(#\9) {
	min-width:   54px;
	text-align:  center;
	font-size:   15px;
	font-weight: 400;
	color:       #111827;
	line-height: 1.2;
}

.hrtk-sbp-search-bar__filter-chips:not(#\9):not(#\9) {
	display:    flex;
	flex-wrap:  wrap;
	gap:        8px;
}

.hrtk-sbp-search-bar__filter-chip:not(#\9):not(#\9) {
	display:         inline-flex;
	align-items:     center;
	height:          36px;
	padding:         0 14px;
	border:          1px solid #d1d5db;
	border-radius:   var(--hrtk-sbp-shape-max, 999px);
	background:      transparent;
	color:           #6b7280;
	font-size:       13px;
	/* Constant weight so the chip doesn't reflow on toggle.
	   Active differentiation comes from color/bg/border-color. */
	font-weight:     600;
	line-height:     1;
	font-family:     inherit;
	cursor:          pointer;
	white-space:     nowrap;
	transition:      border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.hrtk-sbp-search-bar__filter-chip:hover:not(.hrtk-sbp-search-bar__filter-chip--active):not(#\9):not(#\9) {
	border-color: #6b7280;
	color:        #111827;
}

.hrtk-sbp-search-bar__filter-chip--active:not(#\9):not(#\9) {
	border-color: #222222;
	background:   #f0f0f0;
	color:        #111827;
}

.hrtk-sbp-search-bar__filter-chip:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-accent, #ff385c);
	outline-offset: 2px;
}

/* v0.4.35.2: Amenity extras — chips beyond the "Primary Features &
   Amenities to show" cutoff are hidden until the Show all toggle is
   clicked. Class-toggled to display: inline-flex via JS. */
.hrtk-sbp-search-bar__filter-chip--extra:not(#\9):not(#\9) {
	display: none;
}

.hrtk-sbp-search-bar__filter-chip--extra.is-visible:not(#\9):not(#\9) {
	display: inline-flex;
}

.hrtk-sbp-search-bar__filter-show-more:not(#\9):not(#\9) {
	display:         inline-flex;
	align-items:     center;
	margin-top:      12px;
	padding:         0;
	border:          0;
	background:      transparent;
	color:           #111827;
	font-size:       14px;
	font-weight:     600;
	line-height:     1.4;
	font-family:     inherit;
	cursor:          pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.hrtk-sbp-search-bar__filter-show-more:hover:not(#\9):not(#\9) {
	color: var(--hrtk-sbp-accent, #ff385c);
}

.hrtk-sbp-search-bar__filter-show-more:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-accent, #ff385c);
	outline-offset: 2px;
	border-radius:  min(2px, var(--hrtk-sbp-shape-max, 999px));
}

/* v0.4.36: Price range histogram + dual-thumb slider + min/max pills.
   Bars are flex children of a fixed-height container; each bar sets its
   own height % from PHP (relative to bucket-max). Active bars sit in the
   selected range; --dim bars are outside. Slider track sits flush under
   the histogram; thumbs are absolutely positioned 32px circles with a
   soft shadow. Below the track, two min/max pill inputs match Airbnb's
   floating-label style. */

.hrtk-sbp-search-bar__filter-section-subtitle:not(#\9):not(#\9) {
	font-size:   13px;
	color:       #6b7280;
	line-height: 1.4;
	margin:      0 0 16px 0;
}

.hrtk-sbp-search-bar__price-histogram:not(#\9):not(#\9) {
	display:        flex;
	align-items:    flex-end;
	justify-content: stretch;
	gap:            2px;
	height:         64px;
	margin:         8px 0 0;
	padding:        0 12px;
}

.hrtk-sbp-search-bar__price-bar:not(#\9):not(#\9) {
	flex:        1 1 0;
	min-width:   2px;
	background:  var(--hrtk-sbp-accent, #ff385c);
	border-radius: min(2px, var(--hrtk-sbp-shape-max, 999px)) min(2px, var(--hrtk-sbp-shape-max, 999px)) 0 0;
	transition:  background 0.15s ease, opacity 0.15s ease;
}

.hrtk-sbp-search-bar__price-bar.is-dim:not(#\9):not(#\9) {
	background: #ddd;
}

.hrtk-sbp-search-bar__price-track:not(#\9):not(#\9) {
	position:    relative;
	height:      24px;
	margin:      4px 12px 0;
}

.hrtk-sbp-search-bar__price-track-base:not(#\9):not(#\9) {
	position:    absolute;
	left:        0;
	right:       0;
	top:         50%;
	height:      2px;
	background:  #ddd;
	transform:   translateY(-50%);
	border-radius: min(2px, var(--hrtk-sbp-shape-max, 999px));
}

.hrtk-sbp-search-bar__price-track-fill:not(#\9):not(#\9) {
	position:    absolute;
	top:         50%;
	height:      2px;
	background:  var(--hrtk-sbp-accent, #ff385c);
	transform:   translateY(-50%);
	border-radius: min(2px, var(--hrtk-sbp-shape-max, 999px));
	left:        0;
	right:       0;
}

.hrtk-sbp-search-bar__price-thumb:not(#\9):not(#\9) {
	position:    absolute;
	top:         50%;
	width:       28px;
	height:      28px;
	border-radius: 50%;
	background:  #fff;
	border:      1px solid #b0b0b0;
	box-shadow:  0 1px 4px rgba(0,0,0,0.18);
	cursor:      grab;
	padding:     0;
	margin:      0;
	transform:   translate(-50%, -50%);
	z-index:     2;
	transition:  border-color 0.12s ease, box-shadow 0.12s ease;
}

.hrtk-sbp-search-bar__price-thumb:hover:not(#\9):not(#\9) {
	border-color: #222;
}

.hrtk-sbp-search-bar__price-thumb:active:not(#\9):not(#\9),
.hrtk-sbp-search-bar__price-thumb.is-dragging:not(#\9):not(#\9) {
	cursor:     grabbing;
	box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}

.hrtk-sbp-search-bar__price-thumb:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-accent, #ff385c);
	outline-offset: 2px;
}

.hrtk-sbp-search-bar__price-fields:not(#\9):not(#\9) {
	display:         flex;
	align-items:     stretch;
	justify-content: flex-start;
	gap:             12px;
	margin-top:      16px;
}

.hrtk-sbp-search-bar__price-field:not(#\9):not(#\9) {
	/* Cap each field at 130px so the min/max pair never overflows the
	   popover (the pane clips horizontally via overflow-x:hidden). The
	   inner input has min-width:0 so it shrinks within the cap. */
	flex:           0 1 130px;
	max-width:      130px;
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.hrtk-sbp-search-bar__price-field-label:not(#\9):not(#\9) {
	font-size:   12px;
	color:       #6b7280;
	font-weight: 400;
	line-height: 1.2;
	padding-left: 16px;
}

.hrtk-sbp-search-bar__price-field-input:not(#\9):not(#\9) {
	display:       flex;
	align-items:   center;
	gap:           4px;
	border:        1px solid #d1d5db;
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	padding:       10px 16px;
	background:    #fff;
	transition:    border-color 0.12s ease;
}

.hrtk-sbp-search-bar__price-field-input:focus-within:not(#\9):not(#\9) {
	border-color: #222;
}

.hrtk-sbp-search-bar__price-field-currency:not(#\9):not(#\9) {
	font-size:   15px;
	color:       #111827;
	font-weight: 400;
	flex-shrink: 0;
}

.hrtk-sbp-search-bar__price-field-input:not(#\9):not(#\9) input {
	flex:        1 1 0;
	min-width:   0;
	border:      0;
	background:  transparent;
	font-size:   15px;
	color:       #111827;
	font-family: inherit;
	padding:     0;
	outline:     0;
}

/* Hidden state — shared by all popovers */
.hrtk-sbp-search-bar__guests-popover[hidden]:not(#\9):not(#\9),
.hrtk-sbp-search-bar__what-popover[hidden]:not(#\9):not(#\9) {
	display: none;
}

/* =========================================================================
   Popover open / close transitions (v0.4.0)
   ========================================================================= */

/* Base state for popovers that participate in transitions.
   v0.4.14: simple crossfade — symmetric opacity timing on both entering
   (180ms) and leaving (180ms via the --leaving rule). The vertical
   translateY in --entering / --leaving adds a subtle "fall into place"
   feel without any lateral motion. */
.hrtk-sbp-datepicker:not(#\9):not(#\9),
.hrtk-sbp-search-bar__guests-popover:not(#\9):not(#\9),
.hrtk-sbp-search-bar__what-popover:not(#\9):not(#\9) {
	opacity:    1;
	transform:  translateY(0);
	transition: opacity 180ms ease, transform 180ms ease;
}

/* Entering — fade + slide up into place */
.hrtk-sbp-popover--entering:not(#\9):not(#\9) {
	opacity:   0;
	transform: translateY(4px);
}

/* Leaving — symmetric fade out so both popovers overlap during the
   crossfade (180ms ease both ways). setTimeout in JS matches. */
.hrtk-sbp-popover--leaving:not(#\9):not(#\9) {
	opacity:    0 !important;
	transform:  translateY(2px) !important;
	transition: opacity 180ms ease, transform 180ms ease !important;
	pointer-events: none;
}

/* =========================================================================
   Date picker — custom properties
   ========================================================================= */

.hrtk-sbp-datepicker:not(#\9):not(#\9) {
	/* Range highlight — neutral light gray, not branded pink */
	--dp-range-bg:        #f3f4f6;
	--dp-hover-range-bg:  #f3f4f6;
	/* Endpoint pills (checkin/checkout) */
	--dp-endpoint-bg:     #222222;
	--dp-endpoint-color:  #ffffff;
	/* Day cell — wider since popover fills 850px bar */
	--dp-cell-size:       44px;
	--dp-cell-radius:     50%;
	--dp-cell-hover-bg:   #f0f0f0;
	/* Today indicator */
	--dp-today-dot:       var(--hrtk-sbp-accent, #ff385c);
}

/* =========================================================================
   Date picker — popover shell
   Anchored left: 0, full bar width (100%).
   ========================================================================= */

.hrtk-sbp-datepicker:not(#\9):not(#\9) {
	position:      absolute;
	top:           calc(100% + 8px);
	left:          0;
	right:         0;
	width:         auto;  /* spans full bar — no hardcoded 640px */
	background:    #ffffff;
	/* The popover is always white, so text must never inherit the section's
	   color: on uk-light heroes the flexible-mode headings rendered
	   light-on-white. Descendants with their own color are unaffected. */
	color:         #111827;
	border-radius: min(12px, var(--hrtk-sbp-shape-max, 999px));
	box-shadow:    0 8px 32px rgba(0, 0, 0, 0.12);
	border:        1px solid rgba(0, 0, 0, 0.08);
	padding:       24px;
	z-index:       9997;   /* below destination listbox (9999) */
}

.hrtk-sbp-datepicker[hidden]:not(#\9):not(#\9) {
	display: none;
}

/* Flexible mode hides the calendar grid and month-nav via the hidden
   attribute, but both elements carry their own display rules (flex), which
   outrank the UA's [hidden] mapping on any theme without a global
   [hidden] { display:none !important } reset (YOOtheme/UIkit ships one —
   which is the only reason this ever looked correct there; hellozeeland's
   custom theme exposed it). The doubled-class selector also outranks the
   --mobile-inline calendars rule, whose display:flex !important would
   otherwise win on specificity. */
.hrtk-sbp-datepicker:not(#\9):not(#\9) .hrtk-sbp-datepicker__calendars[hidden],
.hrtk-sbp-datepicker:not(#\9):not(#\9) .hrtk-sbp-datepicker__nav[hidden] {
	display: none !important;
}

/* =========================================================================
   Date picker — header (badge + nav)
   ========================================================================= */

.hrtk-sbp-datepicker__header:not(#\9):not(#\9) {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	/* Hold the nav-button height (32px) even when the arrows are hidden in
	   flexible mode, so switching tabs doesn't shift the content below. */
	min-height:      32px;
	margin-bottom:   16px;
}

.hrtk-sbp-datepicker__nights-badge:not(#\9):not(#\9) {
	font-size:   14px;
	font-weight: 600;
	color:       #111827;
}

/* v3.230.0: " · 3-night minimum" appended to the badge while a check-out
   is pending and the minimum actually constrains the pick. */
.hrtk-sbp-datepicker__nights-badge-hint:not(#\9):not(#\9) {
	font-weight: 500;
	color:       #6b7280;
}

/* v3.230.0: minimum-stay tip bubble. Mirrors the core calendar tip — a
   dark pill above the offending night, flipped below on the first row,
   gone after 5s. Absolutely positioned by JS against its offset parent. */
.hrtk-sbp-datepicker__tip:not(#\9):not(#\9) {
	position:       absolute;
	z-index:        5;
	width:          -moz-max-content;
	width:          max-content;
	max-width:      260px;
	padding:        6px 10px;
	border-radius:  8px;
	background:     #111827;
	color:          #ffffff;
	font-size:      12px;
	font-weight:    600;
	line-height:    1.3;
	pointer-events: none;
	box-shadow:     0 4px 12px rgba(0, 0, 0, 0.16);
}

.hrtk-sbp-datepicker__tip[hidden]:not(#\9):not(#\9) {
	display: none;
}

.hrtk-sbp-datepicker__tip:not(#\9):not(#\9)::after {
	content:   '';
	position:  absolute;
	left:      50%;
	border:    6px solid transparent;
	transform: translateX(-50%);
}

.hrtk-sbp-datepicker__tip[data-placement="top"]:not(#\9):not(#\9)::after {
	top:              100%;
	border-top-color: #111827;
}

.hrtk-sbp-datepicker__tip[data-placement="bottom"]:not(#\9):not(#\9)::after {
	bottom:              100%;
	border-bottom-color: #111827;
}

/* v3.233.0: tip with a one-tap "nearest valid stay" button (Calendar Hover
   Tips parity). Only an actionable tip takes pointer events, so plain tips
   stay click-through as before. */
.hrtk-sbp-datepicker__tip--actionable:not(#\9):not(#\9) {
	pointer-events: auto;
	text-align:     center;
}

.hrtk-sbp-datepicker__tip-apply:not(#\9):not(#\9) {
	display:       block;
	box-sizing:    border-box;
	width:         100%;
	margin:        8px 0 0;
	padding:       6px 10px;
	border:        1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	background:    transparent;
	color:         #ffffff;
	font:          inherit;
	font-size:     12px;
	font-weight:   600;
	line-height:   1.2;
	/* v3.233.3: a long date format ("DDDD" → "Sunday, September 6, 2026")
	   or a translated label must wrap inside the 260px bubble instead of
	   overflowing a phone viewport. */
	white-space:   normal;
	overflow-wrap: anywhere;
	text-align:    center;
	cursor:        pointer;
}

.hrtk-sbp-datepicker__tip-apply:hover:not(#\9):not(#\9),
.hrtk-sbp-datepicker__tip-apply:focus-visible:not(#\9):not(#\9) {
	background:   rgba(255, 255, 255, 0.16);
	border-color: #ffffff;
	outline:      none;
}

.hrtk-sbp-datepicker__tip-apply[hidden]:not(#\9):not(#\9) {
	display: none;
}

.hrtk-sbp-datepicker__nav:not(#\9):not(#\9) {
	display: flex;
	gap:     4px;
}

.hrtk-sbp-datepicker__nav-btn:not(#\9):not(#\9) {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	border:          1px solid rgba(0, 0, 0, 0.12);
	border-radius:   50%;
	background:      transparent;
	cursor:          pointer;
	color:           #222222;
	transition:      background 0.12s ease, color 0.12s ease;
	padding:         0;
}

.hrtk-sbp-datepicker__nav-btn:hover:not(#\9):not(#\9) {
	background: #f0f0f0;
}

.hrtk-sbp-datepicker__nav-btn:disabled:not(#\9):not(#\9) {
	color:          #cccccc;
	border-color:   #e5e5e5;
	cursor:         not-allowed;
	background:     transparent;
	pointer-events: none;
}

.hrtk-sbp-datepicker__nav-btn:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-accent, #ff385c);
	outline-offset: 2px;
}

/* =========================================================================
   Date picker — two-month grid container
   With full bar width the months have room to breathe.
   ========================================================================= */

.hrtk-sbp-datepicker__calendars:not(#\9):not(#\9) {
	display: flex;
	gap:     32px;
}

.hrtk-sbp-datepicker__calendar:not(#\9):not(#\9) {
	flex:      1 1 0;
	min-width: 0;
}

/* v0.4.25: lateral month slide. While --sliding is on the popover, the
   calendars container is the viewport (overflow hidden), the real
   .hrtk-sbp-datepicker__calendars holds the incoming month pair, and a
   .hrtk-sbp-datepicker__calendars--clone overlays the outgoing pair. Both
   panes are animated via inline `transform`/`transition` from JS so the
   FROM state can be committed before the TO state without cascade
   gymnastics. Nav buttons go visually busy for the 200ms window. */
.hrtk-sbp-datepicker--sliding:not(#\9):not(#\9) {
	overflow: hidden;
}
.hrtk-sbp-datepicker--sliding:not(#\9):not(#\9) .hrtk-sbp-datepicker__nav-btn {
	opacity:        0.4;
	pointer-events: none;
}
.hrtk-sbp-datepicker__calendars--clone:not(#\9):not(#\9) {
	will-change: transform;
}

/* =========================================================================
   Date picker — month heading
   ========================================================================= */

.hrtk-sbp-datepicker__month-heading:not(#\9):not(#\9) {
	font-size:     14px;
	font-weight:   600;
	color:         #111827;
	text-align:    center;
	margin-bottom: 12px;
}

/* =========================================================================
   Date picker — weekday headers
   ========================================================================= */

.hrtk-sbp-datepicker__weekdays:not(#\9):not(#\9) {
	display:               grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom:         4px;
}

.hrtk-sbp-datepicker__weekday:not(#\9):not(#\9) {
	font-size:      11px;
	font-weight:    600;
	color:          #9ca3af;
	text-align:     center;
	padding:        4px 0;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	-webkit-user-select:    none;
	   -moz-user-select:    none;
	        user-select:    none;
}

/* =========================================================================
   Date picker — day grid
   ========================================================================= */

.hrtk-sbp-datepicker__grid:not(#\9):not(#\9) {
	display:        flex;
	flex-direction: column;
	gap:            2px;
}

.hrtk-sbp-datepicker__week:not(#\9):not(#\9) {
	display:               grid;
	grid-template-columns: repeat(7, 1fr);
}

/* =========================================================================
   Date picker — day cells.
   v0.4.18: cell fills its full grid track (width: 100%) so the click hit
   area covers every pixel of the column — no dead space between visual
   circles where a click can fall through. The 44px visual circle for
   single-day states (hover, today, checkin, checkout) renders on the
   ::before pseudo-element, centered. Range states keep their background
   on the cell itself so the bar visually spans full track width.
   ========================================================================= */

.hrtk-sbp-datepicker__day:not(#\9):not(#\9) {
	position:        relative;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          var(--dp-cell-size);
	margin:          0;
	font-size:       14px;
	font-weight:     600;
	color:           #111827;
	cursor:          pointer;
	transition:      background 0.1s ease, color 0.1s ease;
	-webkit-user-select:     none;
	   -moz-user-select:     none;
	        user-select:     none;
	outline:         none;
}

/* 44px centered visual circle for single-day states. Layered ABOVE the
   cell's own background (cell bg renders the range fill for endpoints
   with --range-after / --range-before). The day number sits above the
   circle via its own wrapper span. */
.hrtk-sbp-datepicker__day:not(#\9):not(#\9)::before {
	content:        '';
	position:       absolute;
	top:            0;
	left:           50%;
	transform:      translateX(-50%);
	width:          var(--dp-cell-size);
	height:         var(--dp-cell-size);
	border-radius:  var(--dp-cell-radius);
	background:     transparent;
	transition:     background 0.1s ease;
	z-index:        1;
	pointer-events: none;
}

.hrtk-sbp-datepicker__day-num:not(#\9):not(#\9) {
	position: relative;
	z-index:  2;
}

.hrtk-sbp-datepicker__day:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-accent, #ff385c);
	outline-offset: 2px;
	border-radius:  var(--dp-cell-radius);
}

.hrtk-sbp-datepicker__day:hover:not(.hrtk-sbp-datepicker__day--disabled):not(.hrtk-sbp-datepicker__day--blocked):not(.hrtk-sbp-datepicker__day--checkin):not(.hrtk-sbp-datepicker__day--checkout):not(#\9):not(#\9)::before {
	background: var(--dp-cell-hover-bg);
}

/* Empty placeholder cell */
.hrtk-sbp-datepicker__day--empty:not(#\9):not(#\9) {
	cursor:         default;
	pointer-events: none;
}

/* Disabled (past) */
.hrtk-sbp-datepicker__day--disabled:not(#\9):not(#\9) {
	color:          #cccccc;
	cursor:         not-allowed;
	pointer-events: none;
}

/* v3.230.0 / v3.231.0: dates the rules reject — nights inside the
   minimum-stay window, dates before the advance-notice boundary, dates
   past the booking window (data-hrtk-sbp-blocked carries the reason).
   Muted like a past day but still interactive — click / hover / Enter show
   the core picker's tip, the way the explorer range calendar keeps its
   disabled cells clickable for the same tip. */
.hrtk-sbp-datepicker__day--blocked:not(#\9):not(#\9) {
	color:  #cccccc;
	cursor: not-allowed;
}

/* v0.4.24: today indicator dot removed per design — no visual marker for
   today; the date itself is sufficient context. */

/* Checkin / checkout endpoints — 44px circle via ::before so the cell's
   full-track hit area stays intact. The day-num text inherits white. */
.hrtk-sbp-datepicker__day--checkin:not(#\9):not(#\9) .hrtk-sbp-datepicker__day-num,
.hrtk-sbp-datepicker__day--checkout:not(#\9):not(#\9) .hrtk-sbp-datepicker__day-num {
	color: var(--dp-endpoint-color);
}

.hrtk-sbp-datepicker__day--checkin:not(#\9):not(#\9)::before,
.hrtk-sbp-datepicker__day--checkout:not(#\9):not(#\9)::before {
	background: var(--dp-endpoint-bg);
}

/* v0.4.24: range-after / range-before / range-fade-* / checkout-preview
   are all declared BELOW the --in-range and --hover-range blocks (see
   end of this file) so their backgrounds win the cascade tie. Don't
   add range-related rules here. */

/* In-range days */
.hrtk-sbp-datepicker__day--in-range:not(#\9):not(#\9) {
	background:    var(--dp-range-bg);
	border-radius: 0;
	color:         #222222;
}

.hrtk-sbp-datepicker__week:not(#\9):not(#\9) > .hrtk-sbp-datepicker__day--in-range:first-child {
	border-radius: var(--dp-cell-radius) 0 0 var(--dp-cell-radius);
}

.hrtk-sbp-datepicker__week:not(#\9):not(#\9) > .hrtk-sbp-datepicker__day--in-range:last-child {
	border-radius: 0 var(--dp-cell-radius) var(--dp-cell-radius) 0;
}

/* Hover-range preview */
.hrtk-sbp-datepicker__day--hover-range:not(#\9):not(#\9) {
	background:    var(--dp-hover-range-bg);
	border-radius: 0;
}

.hrtk-sbp-datepicker__week:not(#\9):not(#\9) > .hrtk-sbp-datepicker__day--hover-range:first-child {
	border-radius: var(--dp-cell-radius) 0 0 var(--dp-cell-radius);
}

.hrtk-sbp-datepicker__week:not(#\9):not(#\9) > .hrtk-sbp-datepicker__day--hover-range:last-child {
	border-radius: 0 var(--dp-cell-radius) var(--dp-cell-radius) 0;
}

/* =========================================================================
   v0.4.24: range overlays declared AFTER --in-range / --hover-range so
   they win the cascade tie. (Equal specificity, later wins.)
   ========================================================================= */

/* Half-range fill behind endpoints — bridges the endpoint circle to
   the adjacent in-range / hover-range cells visually. */
.hrtk-sbp-datepicker__day--range-after:not(#\9):not(#\9) {
	background: linear-gradient(to right, transparent 50%, var(--dp-range-bg) 50%);
}

.hrtk-sbp-datepicker__day--range-before:not(#\9):not(#\9) {
	background: linear-gradient(to right, var(--dp-range-bg) 50%, transparent 50%);
}

/* Ribbon fade at month boundaries — first day of a month gets a left
   fade-in if it's in-range; last day gets a right fade-out. Smooths
   the visual handoff between the two side-by-side calendars. */
.hrtk-sbp-datepicker__day--range-fade-left:not(#\9):not(#\9) {
	background: linear-gradient(to right, transparent, var(--dp-range-bg));
}

.hrtk-sbp-datepicker__day--range-fade-right:not(#\9):not(#\9) {
	background: linear-gradient(to right, var(--dp-range-bg), transparent);
}

/* Black circle preview on the hovered cell while picking check-out —
   mirrors the confirmed checkout's circle + left-half range bridge. */
.hrtk-sbp-datepicker__day--checkout-preview:not(#\9):not(#\9) {
	background: linear-gradient(to right, var(--dp-range-bg) 50%, transparent 50%);
}

.hrtk-sbp-datepicker__day--checkout-preview:not(#\9):not(#\9)::before {
	background: var(--dp-endpoint-bg);
}

.hrtk-sbp-datepicker__day--checkout-preview:not(#\9):not(#\9) .hrtk-sbp-datepicker__day-num {
	color: var(--dp-endpoint-color);
}

/* =========================================================================
   Date picker — footer
   ========================================================================= */

.hrtk-sbp-datepicker__footer:not(#\9):not(#\9) {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	margin-top:      20px;
	padding-top:     16px;
	border-top:      1px solid rgba(0, 0, 0, 0.08);
}

.hrtk-sbp-datepicker__clear:not(#\9):not(#\9) {
	background:      transparent;
	border:          none;
	cursor:          pointer;
	font-size:       13px;
	font-weight:     600;
	font-family:     inherit;
	color:           #111827;
	text-decoration: underline;
	padding:         4px 0;
}

.hrtk-sbp-datepicker__clear:disabled:not(#\9):not(#\9) {
	color:           #9ca3af;
	cursor:          not-allowed;
	text-decoration: none;
}

.hrtk-sbp-datepicker__clear:not(:disabled):hover:not(#\9):not(#\9) {
	color: #222222;
}

.hrtk-sbp-datepicker__clear:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-accent, #ff385c);
	outline-offset: 2px;
	border-radius:  min(2px, var(--hrtk-sbp-shape-max, 999px));
}

.hrtk-sbp-datepicker__close:not(#\9):not(#\9) {
	background:    var(--hrtk-sbp-btn-bg);
	color:         #ffffff;
	border:        none;
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	padding:       8px 20px;
	font-size:     13px;
	font-weight:   600;
	font-family:   inherit;
	cursor:        pointer;
	transition:    background 0.15s ease;
}

.hrtk-sbp-datepicker__close:hover:not(#\9):not(#\9) {
	background: var(--hrtk-sbp-btn-bg-hover);
}

.hrtk-sbp-datepicker__close:focus-visible:not(#\9):not(#\9) {
	outline:        2px solid var(--hrtk-sbp-btn-bg);
	outline-offset: 2px;
}

/* =========================================================================
   Responsive — below 960px
   ========================================================================= */

@media (max-width: 960px) {
	/* Stack fields vertically */
	.hrtk-sbp-search-bar:not(#\9):not(#\9) {
		flex-direction: column;
		align-items:    stretch;
		border-radius:  min(20px, var(--hrtk-sbp-shape-max, 999px));
		padding:        16px;
		gap:            4px;
		max-width:      100%;
		background:     var(--hrtk-sbp-bg);   /* Card surface, not a seam */
	}

	.hrtk-sbp-search-bar--has-active:not(#\9):not(#\9) {
		background:     var(--hrtk-sbp-bg);
	}

	.hrtk-sbp-search-bar__field:not(#\9):not(#\9) {
		width:        100%;
		flex:         1 1 auto;
		border-radius: min(12px, var(--hrtk-sbp-radius-inner, 999px));
		padding:      12px 16px;
		min-height:   auto;
	}

	/* Disable horizontal extension nub on stacked mobile layout */
	.hrtk-sbp-search-bar__field:not(#\9):not(#\9)::after {
		display: none;
	}

	.hrtk-sbp-search-bar__field--where:not(#\9):not(#\9) {
		padding-left: 16px;
	}

	.hrtk-sbp-search-bar__field--separator:not(#\9):not(#\9) {
		border-top:   1px solid var(--hrtk-sbp-border);
	}

	/* On mobile, separators re-appear regardless of active state */
	.hrtk-sbp-search-bar--has-active:not(#\9):not(#\9) .hrtk-sbp-search-bar__field--separator {
		border-top-color: var(--hrtk-sbp-border);
	}

	/* DOM dividers — hide on stacked mobile layout; border-top on
	   --separator fields handles the visual rule. */
	.hrtk-sbp-search-bar__divider:not(#\9):not(#\9) {
		display: none;
	}

	.hrtk-sbp-search-bar__submit:not(#\9):not(#\9) {
		margin-left:     0;
		margin-right:    0;
		width:           100%;
		height:          48px;
		border-radius:   min(12px, var(--hrtk-sbp-radius-inner, 999px));
		justify-content: center;
		/* Always show label on mobile */
		padding: 0 20px;
		gap:     6px;
	}

	.hrtk-sbp-search-bar__submit-label:not(#\9):not(#\9) {
		width:   auto !important;
		opacity: 1 !important;
	}

	/* Listbox: full-width */
	.hrtk-sbp-search-bar__listbox:not(#\9):not(#\9) {
		left:      0;
		width:     100%;
		max-width: 100%;
	}

	/* All popovers: fixed bottom sheet on mobile */
	.hrtk-sbp-datepicker:not(#\9):not(#\9),
	.hrtk-sbp-search-bar__guests-popover:not(#\9):not(#\9),
	.hrtk-sbp-search-bar__what-popover:not(#\9):not(#\9) {
		position:      fixed;
		left:          8px;
		right:         8px;
		top:           auto;
		bottom:        0;
		width:         auto;
		min-width:     0;
		border-radius: min(16px, var(--hrtk-sbp-shape-max, 999px)) min(16px, var(--hrtk-sbp-shape-max, 999px)) 0 0;
		max-height:    85vh;
		overflow-y:    auto;
		z-index:       9997;
	}

	.hrtk-sbp-datepicker:not(#\9):not(#\9) {
		padding: 20px 16px;
	}

	/* Stack months vertically on mobile */
	.hrtk-sbp-datepicker__calendars:not(#\9):not(#\9) {
		flex-direction: column;
		gap:            24px;
	}

	/* Larger touch targets on mobile */
	.hrtk-sbp-datepicker__day:not(#\9):not(#\9) {
		--dp-cell-size: 44px;
	}
}

/* ============================================================
   v0.4.37 — Sticky collapsible search bar
   ============================================================
   States on the form:
     (no class)               normal inline layout
     .is-sticky.is-compressed pinned, collapsed to single pill
     .is-sticky.is-expanded   pinned, full bar visible + backdrop
   The host wrapper holds the sentinel (1px), spacer (sized by JS
   to the form's height when sticky pins → no page jump), and the
   backdrop (covers viewport while expanded).
   ============================================================ */

.hrtk-sbp-search-bar-host:not(#\9):not(#\9) {
	position: relative;
	/* Lift the whole bar subtree above later page sections. Popovers and
	   the destination listbox carry huge z-indexes, but those only compete
	   INSIDE the host's stacking context — without a z-index here, a later
	   sibling section (the property grid/carousel with its card labels)
	   paints over anything that escapes the host's bounds. (Originally
	   shipped in v3.77.4 on the unmerged searchbar-pro-batch2 branch and
	   lost when releases moved back to main — restored in v3.124.3.) */
	z-index: 20;
}

/* Refine mode replaces core's native filter pane IN PLACE (the
   homerunner_explorer_filter_html bridge swaps out
   <form class="hfse-form hfse-filters"> for this host), which silently takes
   core's grid spacing with it: `.hfse .hfse-filters {margin-bottom:10px}`
   and `.hfse-form ~ .hfse-properties-container {margin-top:20px}`
   (_explorer-common.scss / _explorer-grid.scss) both key on the element we
   removed, and .hfse-body is a block context so the two collapsed to a 20px
   gap. Nothing here restored it, so whenever the results header (count /
   sort / map toggle) is off the grid renders flush against the bar's bottom
   edge. Restore the same 20px on the host: it holds on desktop AND under
   the mobile trigger pill (the shell collapses to 0 there), and stays in
   flow when the sticky shell pins, so the JS spacer math is untouched. */
.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) {
	margin-bottom: 20px;
}

/* Results header injected above the Explorer grid in refine mode
   (initExplorerHeader): count left, sort dropdown right. The count node
   wears the core plugin's classes so its explorer JS populates it;
   hk-hidden is core's utility, mirrored here in case a skin sheet drops
   it. */
.hrtk-sbp-results-header:not(#\9):not(#\9) {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             16px;
	margin:          0 0 16px;
	min-height:      38px; /* select height — no jump when the count pops in */
}

/* Map Controls hides this header's map toggle on desktop (map-controls.css,
   ≥960px: its on-map collapse chevron + edge show-tab replace it). With
   count and sort off, that toggle was the header's only visible child, so
   the header stayed in flow as an EMPTY 38px box + 16px margin between the
   bar and the first card row (topshelfvacationrentals.com/homes/, 3.214.0).
   Collapse it in exactly that case. Keyed on the .hrtk-mapctl-on stamp as
   an ancestor class (same pattern as #572 — no cross-module init-order
   dependency); the header's map_hidden <input> still submits from
   display:none, and mapctl forwards to the toggle with a programmatic
   .click(), which a display:none button still honours. Below 960px the
   toggle is the only map control, so the header stays. */
@media screen and (min-width: 960px) {
	.hfse.hrtk-mapctl-on:not(#\9):not(#\9) .hrtk-sbp-results-header:not(:has(.hrtk-sbp-results-count, .hrtk-sbp-results-sort)) {
		display: none;
	}
}

.hrtk-sbp-results-count:not(#\9):not(#\9) {
	font-size:   16px;
	font-weight: 600;
	line-height: 1.4;
	margin:      0;
}

.hrtk-sbp-results-count.hk-hidden:not(#\9):not(#\9) {
	display: none;
}

/* Re-injected map toggle (#352). Core styles this button only under
   .hfse-form (the legacy pane refine mode replaced), so class parity alone
   leaves it unstyled here — mirror core's _explorer-form.scss rules under
   the header's own scope. */
.hrtk-sbp-results-header:not(#\9):not(#\9) .hfse-form-map-toggle-btn {
	border:           0;
	height:           35px;
	color:            #000;
	display:          flex;
	font-size:        13px;
	padding:          0 10px;
	font-weight:      600;
	line-height:      35px;
	border-radius:    4px;
	align-items:      center;
	box-sizing:       border-box;
	text-transform:   uppercase;
	background-color: #fff;
	cursor:           pointer;
}

.hrtk-sbp-results-header:not(#\9):not(#\9) .hfse-form-map-toggle-btn > .hk-icon {
	width:        15px;
	margin-right: 6px;
}

/* Compact "Sort by: Featured ▾" pill (Amazon-style): the label wrapper IS
   the control chrome; the select inside is borderless with a hand-drawn
   chevron so the whole thing reads as one intentional piece. Right-aligned
   even when the count is disabled or still hidden. */
.hrtk-sbp-results-sort:not(#\9):not(#\9) {
	display:       inline-flex;
	align-items:   center;
	gap:           4px;
	margin-left:   auto;
	padding:       5px 10px 5px 14px;
	border:        1px solid rgba(0, 0, 0, 0.18);
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	background:    #fff;
	font-size:     13px;
	line-height:   1.3;
	cursor:        pointer;
	white-space:   nowrap;
	transition:    border-color 0.15s ease, box-shadow 0.15s ease;
}

.hrtk-sbp-results-sort:hover:not(#\9):not(#\9) {
	border-color: rgba(0, 0, 0, 0.35);
}

.hrtk-sbp-results-sort:focus-within:not(#\9):not(#\9) {
	border-color: var(--hrtk-sbp-accent, #222);
	box-shadow:   0 0 0 1px var(--hrtk-sbp-accent, #222);
}

.hrtk-sbp-results-sort__prefix:not(#\9):not(#\9) {
	color: rgba(0, 0, 0, 0.6);
}

.hrtk-sbp-results-sort:not(#\9):not(#\9) select {
	-webkit-appearance: none;
	-moz-appearance:    none;
	     appearance:    none;
	font:          inherit;
	font-weight:   600;
	height:        auto; /* themes size bare selects (e.g. 44px form controls) — don't let that stretch the pill */
	border:        0;
	background-color: transparent;
	/* Chevron drawn in, since appearance:none drops the native arrow. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23444' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
	padding:       0 18px 0 2px;
	color:         inherit;
	cursor:        pointer;
	max-width:     240px;
	outline:       none; /* focus ring lives on the pill via :focus-within */
}

.hrtk-sbp-search-bar-host__sentinel:not(#\9):not(#\9) {
	height: 1px;
	width: 100%;
	pointer-events: none;
	margin: 0;
	padding: 0;
}

.hrtk-sbp-search-bar-host__shell:not(#\9):not(#\9) {
	width: 100%;
	/* Layer the bar (and every popover/listbox inside it) ABOVE the sibling
	   rows the host renders after it: the quick filter chips and the
	   flexible-dates strip. The chips track is its own stacking context
	   (mask-image), and a theme can make the FORM one too — Utmost ships
	   `.homepagesearch .hrtk-sbp-search-bar { backdrop-filter: blur(4px) }`.
	   Once that happens the popovers' z-index only competes inside the form,
	   and the later-in-tree chips row paints over the guests popover: its
	   Adults −/+ row sat under the chips and the chips swallowed the clicks.
	   A positive z-index here settles the order at the host level no matter
	   what the theme adds to the form. The sticky states set position:fixed
	   plus their own z-index at higher specificity and are unaffected. */
	position: relative;
	z-index: 1;
}

.hrtk-sbp-search-bar-host__spacer:not(#\9):not(#\9) {
	height: 0;
	width: 100%;
	pointer-events: none;
	transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hrtk-sbp-search-bar-host__backdrop:not(#\9):not(#\9) {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.42);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 9998;
}

.hrtk-sbp-search-bar-host__backdrop.is-visible:not(#\9):not(#\9) {
	opacity: 1;
	pointer-events: auto;
}

/* --- Sticky shell: fixed positioning host; visually empty in compressed,
   visible "panel" around the bar only when expanded. Width tracks the bar. --- */
.hrtk-sbp-search-bar-host__shell.is-sticky:not(#\9):not(#\9) {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	width: calc(100% - 32px);
	max-width: 420px; /* compressed default */
	z-index: 9999;
	background: transparent;
	padding: 0;
	border-radius: 0;
	box-shadow: none;
	transition:
		top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.22s cubic-bezier(0.4, 0, 0.2, 1),
		background-color 0.2s ease,
		border-radius 0.22s ease,
		box-shadow 0.22s ease;
}

/* Expanded: panel attaches to the viewport top (0 top corners), wraps the
   bar pill with concentric bottom corners (~bar_radius + bottom_padding). */
.hrtk-sbp-search-bar-host__shell.is-sticky.is-expanded:not(#\9):not(#\9) {
	top: 0;
	max-width: 890px; /* form's 850px max + ~40px panel padding */
	background: #fff;
	padding: 14px 20px;
	border-radius: 0 0 min(50px, var(--hrtk-sbp-shape-max, 999px)) min(50px, var(--hrtk-sbp-shape-max, 999px));
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
	transition:
		top 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		max-width 0.28s cubic-bezier(0.4, 0, 0.2, 1),
		padding 0.22s cubic-bezier(0.4, 0, 0.2, 1),
		background-color 0.2s ease,
		border-radius 0.22s ease,
		box-shadow 0.22s ease;
}

/* #710: sticky theme navbars. The host carries
   .hrtk-sbp-search-bar-host--nav-offset (emitted server-side for the
   always mode; toggled by initSticky() while the theme navbar is pinned
   in the scroll-up mode) plus --hrtk-sbp-nav-offset (px). Every pinned
   state shifts down by it. `top` is already in the transition list, so
   the scroll-up toggle slides with the navbar instead of jumping. */
.hrtk-sbp-search-bar-host--nav-offset:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__shell.is-sticky {
	top: calc(16px + var(--hrtk-sbp-nav-offset, 0px));
}
.hrtk-sbp-search-bar-host--nav-offset:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__shell.is-sticky.is-expanded {
	top: var(--hrtk-sbp-nav-offset, 0px);
}

/* Form inside sticky shell: takes shell's full inner width, no longer fixes itself. */
.hrtk-sbp-search-bar-host__shell.is-sticky:not(#\9):not(#\9) .hrtk-sbp-search-bar {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: none;
	transition: box-shadow 0.2s ease;
}

/* Compressed: form keeps its own pill appearance (existing shadow/bg). */
/* Expanded: shell provides the box-shadow; form drops its own to avoid double. */
.hrtk-sbp-search-bar-host__shell.is-sticky.is-expanded:not(#\9):not(#\9) .hrtk-sbp-search-bar {
	box-shadow: none;
}

/* --- Compressed: hide full fields, show single pill ---
   No !important: the selector (0,4,0) already beats the field's own
   display:flex (0,1,0), and dropping !important lets the refine variant
   below govern the hide with a fade (allow-discrete display transition). */
.hrtk-sbp-search-bar.is-sticky.is-compressed:not(#\9):not(#\9) > .hrtk-sbp-search-bar__field,
.hrtk-sbp-search-bar.is-sticky.is-compressed:not(#\9):not(#\9) > .hrtk-sbp-search-bar__divider,
.hrtk-sbp-search-bar.is-sticky.is-compressed:not(#\9):not(#\9) > .hrtk-sbp-search-bar__submit,
.hrtk-sbp-search-bar.is-sticky.is-compressed:not(#\9):not(#\9) > .hrtk-sbp-search-bar__hover-indicator,
.hrtk-sbp-search-bar.is-sticky.is-compressed:not(#\9):not(#\9) > .hrtk-sbp-search-bar__active-pill {
	display: none;
}
/* In expanded sticky, hover-indicator + active-pill animate normally. JS clears
   the --visible class on enter/expand so stale positions don't flash; the next
   user interaction (hover/click) re-positions and re-shows them. */

/* --- Compressed pill button (the single-pill state) --- */
.hrtk-sbp-search-bar__compressed:not(#\9):not(#\9) {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	padding: 6px 8px 6px 22px;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	border-radius: inherit;
	text-align: left;
	-webkit-appearance: none;
	-moz-appearance: none;
	     appearance: none;
}

.hrtk-sbp-search-bar.is-sticky.is-compressed:not(#\9):not(#\9) .hrtk-sbp-search-bar__compressed {
	display: flex;
}

.hrtk-sbp-search-bar__compressed-summary:not(#\9):not(#\9) {
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 600;
	color: var(--hrtk-sbp-text, #222);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hrtk-sbp-search-bar__compressed-icon:not(#\9):not(#\9) {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	background: var(--hrtk-sbp-accent, #ff385c);
	color: #fff;
}

.hrtk-sbp-search-bar__compressed-icon:not(#\9):not(#\9) svg {
	width: 16px;
	height: 16px;
}

.hrtk-sbp-search-bar__compressed:hover:not(#\9):not(#\9) .hrtk-sbp-search-bar__compressed-icon {
	filter: brightness(0.95);
}

.hrtk-sbp-search-bar__compressed:focus-visible:not(#\9):not(#\9) {
	outline: 2px solid var(--hrtk-sbp-accent, #ff385c);
	outline-offset: 2px;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.hrtk-sbp-search-bar-host__shell.is-sticky:not(#\9):not(#\9),
	.hrtk-sbp-search-bar-host__shell.is-sticky:not(#\9):not(#\9) .hrtk-sbp-search-bar,
	.hrtk-sbp-search-bar-host__spacer:not(#\9):not(#\9),
	.hrtk-sbp-search-bar-host__backdrop:not(#\9):not(#\9) {
		transition: none !important;
	}
}

/* --- Narrow viewport tweaks --- */
@media (max-width: 600px) {
	.hrtk-sbp-search-bar-host__shell.is-sticky:not(#\9):not(#\9) {
		top: 8px;
		width: calc(100% - 16px);
		max-width: none;
	}
	.hrtk-sbp-search-bar-host--nav-offset:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__shell.is-sticky {
		top: calc(8px + var(--hrtk-sbp-nav-offset, 0px));
	}
	.hrtk-sbp-search-bar-host__shell.is-sticky.is-expanded:not(#\9):not(#\9) {
		padding: 10px 12px;
		border-radius: 0 0 min(32px, var(--hrtk-sbp-shape-max, 999px)) min(32px, var(--hrtk-sbp-shape-max, 999px));
	}
}

/* ============================================================
   v0.4.40 — Mobile full-screen stage modal
   Triggered on viewports <= 768px. Tap any field on the
   desktop bar → modal opens. Cards collapse/expand by stage,
   bottom action button advances or submits.
   ============================================================ */

.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9) {
	/* Portaled to <body> (see initMobile) — the bar-scope custom-property
	   block can't reach this subtree, so re-derive the inner radius here
	   from the mirrored --hrtk-sbp-shape-max. Keep in sync with the
	   definition on .hrtk-sbp-search-bar. */
	--hrtk-sbp-radius-inner: max(0px, calc(var(--hrtk-sbp-shape-max, 999px) - 6px));
	position: fixed;
	inset: 0;
	/* Must beat the AI Concierge edge tab + its tooltip (z 999940-999970 in
	   aise chatbot.css) — a full-screen search sheet with a chat tab and
	   tooltip poking through reads as clutter. Stay BELOW the Concierge's
	   expanded-chat overlay (9999999) so an open chat still wins. */
	z-index: 1000000;
	background: #f7f7f7;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: hrtk-sbp-mobile-slide-up 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.hrtk-sbp-search-bar__mobile[hidden]:not(#\9):not(#\9) { display: none; }

@keyframes hrtk-sbp-mobile-slide-up {
	from { transform: translateY(100%); opacity: 0.7; }
	to   { transform: translateY(0);   opacity: 1; }
}

.hrtk-sbp-search-bar__mobile-sheet:not(#\9):not(#\9) {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
}

/* --- Header --- */
.hrtk-sbp-search-bar__mobile-header:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 14px 16px;
	background: #f7f7f7;
	flex: 0 0 auto;
}
.hrtk-sbp-search-bar__mobile-title:not(#\9):not(#\9) {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #222;
}
.hrtk-sbp-search-bar__mobile-close:not(#\9):not(#\9) {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	border: 1px solid #ddd;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	color: #222;
}
.hrtk-sbp-search-bar__mobile-close:not(#\9):not(#\9) svg { width: 14px; height: 14px; }
.hrtk-sbp-search-bar__mobile-close:hover:not(#\9):not(#\9) { background: #f3f3f3; }

/* v0.4.44: header back arrow — mirror image of close button on the left. */
.hrtk-sbp-search-bar__mobile-back:not(#\9):not(#\9) {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	border: 1px solid #ddd;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	color: #222;
}
.hrtk-sbp-search-bar__mobile-back[hidden]:not(#\9):not(#\9) { display: none; }
.hrtk-sbp-search-bar__mobile-back:not(#\9):not(#\9) svg { width: 14px; height: 14px; }
.hrtk-sbp-search-bar__mobile-back:hover:not(#\9):not(#\9) { background: #f3f3f3; }

/* --- Body (scrollable cards) --- */
.hrtk-sbp-search-bar__mobile-body:not(#\9):not(#\9) {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	-webkit-overflow-scrolling: touch;
}

/* --- Stage card --- */
.hrtk-sbp-search-bar__mobile-stage:not(#\9):not(#\9) {
	background: #fff;
	border-radius: min(16px, var(--hrtk-sbp-shape-max, 999px));
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	overflow: hidden;
	transition: box-shadow 0.2s ease;
	/* Don't let a tall active stage compress collapsed cards via flex shrinking. */
	flex-shrink: 0;
}
.hrtk-sbp-search-bar__mobile-stage--active:not(#\9):not(#\9) {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.hrtk-sbp-search-bar__mobile-stage-header:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 20px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
	-webkit-appearance: none;
	-moz-appearance: none;
	     appearance: none;
}
.hrtk-sbp-search-bar__mobile-stage-label:not(#\9):not(#\9) {
	font-size: 14px;
	font-weight: 500;
	color: #717171;
}
.hrtk-sbp-search-bar__mobile-stage-summary:not(#\9):not(#\9) {
	font-size: 14px;
	font-weight: 600;
	color: #222;
	max-width: 60%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hrtk-sbp-search-bar__mobile-stage-body:not(#\9):not(#\9) {
	display: none;
	padding: 4px 20px 22px;
}
.hrtk-sbp-search-bar__mobile-stage--active:not(#\9):not(#\9) .hrtk-sbp-search-bar__mobile-stage-body {
	display: block;
	animation: hrtk-sbp-stage-fade-in 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.hrtk-sbp-search-bar__mobile-stage--active:not(#\9):not(#\9) .hrtk-sbp-search-bar__mobile-stage-header {
	padding-bottom: 6px;
}
.hrtk-sbp-search-bar__mobile-stage--active:not(#\9):not(#\9) .hrtk-sbp-search-bar__mobile-stage-summary {
	display: none;
}
.hrtk-sbp-search-bar__mobile-stage--active:not(#\9):not(#\9) .hrtk-sbp-search-bar__mobile-stage-label {
	animation: hrtk-sbp-stage-label-shrink 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes hrtk-sbp-stage-fade-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0);    }
}
@keyframes hrtk-sbp-stage-label-shrink {
	from { opacity: 0.4; }
	to   { opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
	.hrtk-sbp-search-bar__mobile-stage--active:not(#\9):not(#\9) .hrtk-sbp-search-bar__mobile-stage-body,
	.hrtk-sbp-search-bar__mobile-stage--active:not(#\9):not(#\9) .hrtk-sbp-search-bar__mobile-stage-label {
		animation: none;
	}
}

.hrtk-sbp-search-bar__mobile-stage-question:not(#\9):not(#\9) {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 700;
	color: #222;
}

/* --- WHERE / WHAT input --- */
.hrtk-sbp-search-bar__mobile-input-wrap:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: min(12px, var(--hrtk-sbp-radius-inner, 999px));
	padding: 0 14px;
	transition: border-color 0.15s ease;
}
.hrtk-sbp-search-bar__mobile-input-wrap:focus-within:not(#\9):not(#\9) {
	border-color: #222;
	box-shadow: 0 0 0 1px #222;
}
.hrtk-sbp-search-bar__mobile-input-icon:not(#\9):not(#\9) {
	width: 18px;
	height: 18px;
	color: #717171;
	flex: 0 0 auto;
}
.hrtk-sbp-search-bar__mobile-input:not(#\9):not(#\9) {
	flex: 1 1 auto;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 16px;
	padding: 14px 0;
	margin: 0;
	color: #222;
	outline: none;
	min-width: 0;
	/* type="search" gets UA searchfield chrome once the reset removes the
	   host normalization that used to strip it. */
	-webkit-appearance: none;
	-moz-appearance: none;
	     appearance: none;
}
.hrtk-sbp-search-bar__mobile-input:not(#\9):not(#\9)::-moz-placeholder { color: #717171; }
.hrtk-sbp-search-bar__mobile-input:not(#\9):not(#\9)::placeholder { color: #717171; }
.hrtk-sbp-search-bar__mobile-input:not(#\9):not(#\9)::-webkit-search-cancel-button { display: none; }

.hrtk-sbp-search-bar__mobile-note:not(#\9):not(#\9) {
	margin: 12px 0 0;
	font-size: 13px;
	color: #717171;
}

/* --- WHEN dates --- */
.hrtk-sbp-search-bar__mobile-date-row:not(#\9):not(#\9) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.hrtk-sbp-search-bar__mobile-date:not(#\9):not(#\9) {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: min(12px, var(--hrtk-sbp-radius-inner, 999px));
	padding: 10px 14px;
}
.hrtk-sbp-search-bar__mobile-date:focus-within:not(#\9):not(#\9) {
	border-color: #222;
	box-shadow: 0 0 0 1px #222;
}
.hrtk-sbp-search-bar__mobile-date-label:not(#\9):not(#\9) {
	font-size: 12px;
	font-weight: 500;
	color: #717171;
	margin-bottom: 4px;
}
.hrtk-sbp-search-bar__mobile-date-input:not(#\9):not(#\9) {
	border: 0;
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	color: #222;
	outline: none;
	padding: 0;
	font-family: inherit;
	min-width: 0;
}

/* --- WHO steppers --- */
.hrtk-sbp-search-bar__mobile-guest-row:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid #ebebeb;
}
.hrtk-sbp-search-bar__mobile-guest-row:last-child:not(#\9):not(#\9) { border-bottom: 0; }
.hrtk-sbp-search-bar__mobile-guest-text:not(#\9):not(#\9) {
	display: flex;
	flex-direction: column;
}
.hrtk-sbp-search-bar__mobile-guest-label:not(#\9):not(#\9) {
	font-size: 16px;
	font-weight: 600;
	color: #222;
}
.hrtk-sbp-search-bar__mobile-guest-sub:not(#\9):not(#\9) {
	font-size: 14px;
	color: #717171;
	margin-top: 2px;
}
.hrtk-sbp-search-bar__mobile-stepper:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	gap: 12px;
}
.hrtk-sbp-search-bar__mobile-stepper-btn:not(#\9):not(#\9) {
	width: 32px;
	height: 32px;
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	border: 1px solid #b0b0b0;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #222;
	padding: 0;
	transition: opacity 0.15s ease, border-color 0.15s ease;
}
.hrtk-sbp-search-bar__mobile-stepper-btn:hover:not(:disabled):not(#\9):not(#\9) { border-color: #222; }
.hrtk-sbp-search-bar__mobile-stepper-btn:disabled:not(#\9):not(#\9) {
	opacity: 0.35;
	cursor: not-allowed;
}
.hrtk-sbp-search-bar__mobile-stepper-btn:not(#\9):not(#\9) svg { width: 14px; height: 14px; }
.hrtk-sbp-search-bar__mobile-stepper-count:not(#\9):not(#\9) {
	min-width: 22px;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: #222;
	font-variant-numeric: tabular-nums;
}

/* --- Footer --- */
.hrtk-sbp-search-bar__mobile-footer:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: #fff;
	box-shadow: 0 -1px 0 #ebebeb;
	flex: 0 0 auto;
}
.hrtk-sbp-search-bar__mobile-clear-all:not(#\9):not(#\9) {
	background: transparent;
	border: 0;
	padding: 8px 4px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #222;
	text-decoration: underline;
	cursor: pointer;
}
/* v0.4.44: footer-actions wraps Next + Search as a right-aligned pair. */
.hrtk-sbp-search-bar__mobile-footer-actions:not(#\9):not(#\9) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* v0.4.44: Next is outlined / secondary. Hides on the last stage. */
.hrtk-sbp-search-bar__mobile-next:not(#\9):not(#\9) {
	display: inline-flex;
	align-items: center;
	padding: 13px 20px;
	border: 1px solid #222;
	border-radius: min(10px, var(--hrtk-sbp-shape-max, 999px));
	background: #fff;
	color: #222;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.hrtk-sbp-search-bar__mobile-next:hover:not(#\9):not(#\9) { background: #f3f3f3; }
.hrtk-sbp-search-bar__mobile-next[hidden]:not(#\9):not(#\9) { display: none; }

/* v0.4.44: Search is brand-color + icon, always visible. */
.hrtk-sbp-search-bar__mobile-action:not(#\9):not(#\9) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 22px;
	border: 0;
	border-radius: min(10px, var(--hrtk-sbp-shape-max, 999px));
	background: var(--hrtk-sbp-accent, #ff385c);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}
.hrtk-sbp-search-bar__mobile-action:hover:not(#\9):not(#\9) {
	background: var(--hrtk-sbp-accent-hover, #e31c5f);
}
.hrtk-sbp-search-bar__mobile-action-icon:not(#\9):not(#\9) {
	width: 16px;
	height: 16px;
	display: inline-block;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9) { animation: none; }
}

/* --- Hide modal on desktop --- */
@media (min-width: 933px) {
	.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9) { display: none !important; }
}

/* --- Mobile trigger pill (default hidden; visible on <= 768px) --- */
.hrtk-sbp-search-bar__mobile-trigger:not(#\9):not(#\9) {
	display: none;
	align-items: center;
	gap: 14px;
	width: 100%;
	max-width: 100%;
	padding: 12px 18px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #ebebeb;
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
	-webkit-appearance: none;
	-moz-appearance: none;
	     appearance: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.hrtk-sbp-search-bar__mobile-trigger:active:not(#\9):not(#\9) {
	transform: scale(0.99);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.hrtk-sbp-search-bar__mobile-trigger-icon:not(#\9):not(#\9) {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: #222;
}
.hrtk-sbp-search-bar__mobile-trigger-text:not(#\9):not(#\9) {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}
.hrtk-sbp-search-bar__mobile-trigger-primary:not(#\9):not(#\9) {
	font-size: 15px;
	font-weight: 600;
	color: #222;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hrtk-sbp-search-bar__mobile-trigger-secondary:not(#\9):not(#\9) {
	font-size: 13px;
	color: #717171;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- WHERE suggestions list --- */
.hrtk-sbp-search-bar__mobile-suggestions-label:not(#\9):not(#\9) {
	margin: 20px 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: #717171;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.hrtk-sbp-search-bar__mobile-suggestions:not(#\9):not(#\9) {
	list-style: none;
	margin: 0;
	padding: 0 4px 0 0; /* right gutter for the scrollbar */
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* Keep the WHERE stage compact: cap list, scroll inside. Other stages
	   below stay visible without needing to scroll the whole modal body. */
	max-height: 32vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Always-visible dark scrollbar (Firefox + WebKit). */
	scrollbar-width: thin;
	scrollbar-color: #222 transparent;
}
.hrtk-sbp-search-bar__mobile-suggestions:not(#\9):not(#\9)::-webkit-scrollbar {
	width: 6px;
}
.hrtk-sbp-search-bar__mobile-suggestions:not(#\9):not(#\9)::-webkit-scrollbar-track {
	background: transparent;
}
.hrtk-sbp-search-bar__mobile-suggestions:not(#\9):not(#\9)::-webkit-scrollbar-thumb {
	background: #222;
	border-radius: min(4px, var(--hrtk-sbp-shape-max, 999px));
}
.hrtk-sbp-search-bar__mobile-suggestions:not(#\9):not(#\9)::-webkit-scrollbar-thumb:hover {
	background: #000;
}
.hrtk-sbp-search-bar__mobile-suggestion:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 12px 8px;
	background: transparent;
	border: 0;
	border-radius: min(12px, var(--hrtk-sbp-shape-max, 999px));
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
	-webkit-appearance: none;
	-moz-appearance: none;
	     appearance: none;
	transition: background 0.12s ease;
}
.hrtk-sbp-search-bar__mobile-suggestion:hover:not(#\9):not(#\9),
.hrtk-sbp-search-bar__mobile-suggestion:active:not(#\9):not(#\9) {
	background: #f3f3f3;
}
.hrtk-sbp-search-bar__mobile-suggestion-icon:not(#\9):not(#\9) {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: min(12px, var(--hrtk-sbp-shape-max, 999px));
	background: #f3f3f3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #717171;
}
.hrtk-sbp-search-bar__mobile-suggestion-icon:not(#\9):not(#\9) svg { width: 22px; height: 22px; }
.hrtk-sbp-search-bar__mobile-suggestion-text:not(#\9):not(#\9) {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.hrtk-sbp-search-bar__mobile-suggestion-label:not(#\9):not(#\9) {
	font-size: 15px;
	font-weight: 600;
	color: #222;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hrtk-sbp-search-bar__mobile-suggestion-sub:not(#\9):not(#\9) {
	font-size: 13px;
	color: #717171;
	margin-top: 2px;
}

/* --- Mobile breakpoint: hide desktop bar UI, show trigger pill.
   IMPORTANT: do NOT display:none the shell — the modal is a descendant
   of the form (inside the shell), and an ancestor display:none would
   hide the modal too. Instead, collapse the shell + form visually but
   keep them in the layout tree, and individually hide the form's
   visible desktop children. --- */
@media (max-width: 932px) {
	.hrtk-sbp-search-bar-host__shell:not(#\9):not(#\9) {
		height: 0;
		margin: 0;
		padding: 0;
		overflow: visible; /* let the modal's position:fixed escape */
	}
	.hrtk-sbp-search-bar-host__shell:not(#\9):not(#\9) .hrtk-sbp-search-bar {
		display: block !important;
		height: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		overflow: visible !important;
	}
	/* Hide every direct child of the form except the modal. Hidden inputs
	   stay submittable (display:none doesn't affect form submission). */
	.hrtk-sbp-search-bar-host__shell:not(#\9):not(#\9) .hrtk-sbp-search-bar > *:not(.hrtk-sbp-search-bar__mobile) {
		display: none !important;
	}
	.hrtk-sbp-search-bar__mobile-trigger:not(#\9):not(#\9) {
		display: flex;
	}
	/* No sticky sentinel needed on mobile (no desktop bar to pin) */
	.hrtk-sbp-search-bar-host__sentinel:not(#\9):not(#\9),
	.hrtk-sbp-search-bar-host__spacer:not(#\9):not(#\9),
	.hrtk-sbp-search-bar-host__backdrop:not(#\9):not(#\9) {
		display: none !important;
	}
}

/* --- Mobile-only: hide desktop UI inside the modal that could leak --- */
@media (min-width: 933px) {
	.hrtk-sbp-search-bar__mobile-trigger:not(#\9):not(#\9) { display: none !important; }
}

/* --- v0.4.43.2: zoom prevention on mobile UX --- */
@media (max-width: 932px) {
	/* No double-tap zoom on interactive elements in the trigger / modal. */
	.hrtk-sbp-search-bar__mobile-trigger:not(#\9):not(#\9),
	.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9),
	.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9) button,
	.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9) input,
	.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9) textarea,
	.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9) select,
	.hrtk-sbp-search-bar__mobile:not(#\9):not(#\9) [role="button"],
	.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) button,
	.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) input,
	.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) textarea {
		touch-action: manipulation;
	}
	/* Inputs/textareas must be >= 16px to prevent iOS auto-zoom on focus. */
	.hrtk-sbp-search-bar__mobile-date-input:not(#\9):not(#\9),
	.hrtk-sbp-search-bar__mobile-input:not(#\9):not(#\9),
	.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) input[type="text"],
	.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) input[type="search"],
	.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) input[type="number"],
	.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) input[type="email"],
	.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) input[type="tel"],
	.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) input[type="url"],
	.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) textarea {
		font-size: 16px !important;
	}
}

/* --- v0.4.42: datepicker inlined inside mobile WHEN stage --- */
.hrtk-sbp-datepicker--mobile-inline:not(#\9):not(#\9),
.hrtk-sbp-datepicker--mobile-inline[hidden]:not(#\9):not(#\9) {
	/* v3.175.10: beat .hrtk-sbp-datepicker[hidden] { display: none } the same way
	   the WHAT popover does below. While the picker is parked in the WHEN stage
	   the desktop active-field manager can still close it (Esc, outside click,
	   or the queued 180ms slide callback), which re-adds [hidden] and left the
	   WHEN stage blank — the native date row is display:none by then, so there
	   was nothing to fall back to. */
	display: block !important;
	position: static !important;
	inset: auto !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	transform: none !important;
	min-width: 0 !important;
}
.hrtk-sbp-datepicker--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-datepicker__nav,
.hrtk-sbp-datepicker--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-datepicker__footer {
	display: none !important;
}
.hrtk-sbp-datepicker--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-datepicker__header {
	padding: 0 0 12px;
	border-bottom: 0;
	justify-content: flex-start;
}
.hrtk-sbp-datepicker--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-datepicker__calendars {
	display: flex !important;
	flex-direction: column !important;
	gap: 28px !important;
	max-height: 38vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-right: 4px;
	/* Dark scrollbar matching the suggestions list */
	scrollbar-width: thin;
	scrollbar-color: #222 transparent;
}
.hrtk-sbp-datepicker--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-datepicker__calendars::-webkit-scrollbar {
	width: 6px;
}
.hrtk-sbp-datepicker--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-datepicker__calendars::-webkit-scrollbar-track {
	background: transparent;
}
.hrtk-sbp-datepicker--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-datepicker__calendars::-webkit-scrollbar-thumb {
	background: #222;
	border-radius: min(4px, var(--hrtk-sbp-shape-max, 999px));
}
.hrtk-sbp-datepicker--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-datepicker__calendar {
	width: 100% !important;
	min-width: 0 !important;
}
.hrtk-sbp-datepicker--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-datepicker__month-heading {
	font-size: 18px;
	font-weight: 700;
	text-align: left;
}

/* --- v0.4.43: WHAT popover inlined inside mobile WHAT stage --- */
.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9),
.hrtk-sbp-search-bar__what-popover--mobile-inline[hidden]:not(#\9):not(#\9) {
	display: block !important; /* override hidden attr */
	position: static !important;
	inset: auto !important;
	transform: none !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	max-height: none !important;
	overflow: visible !important;
}
/* Hide the popover's own close-row footer (we use the stage Next/Search). */
.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-search-bar__guests-close-row {
	display: none !important;
}
/* Toggle keeps its pill look, but full-width across the card. */
.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-search-bar__what-toggle {
	width: 100%;
	margin-bottom: 16px;
}
/* Pane scroll: cap inner pane height so the WHEN/WHO/WHAT collapsed cards
   below stay visible. The pane scrolls; the modal body doesn't have to. */
.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-search-bar__what-pane {
	max-height: 44vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-right: 12px;
	scrollbar-width: thin;
	scrollbar-color: #222 transparent;
}
.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-search-bar__what-pane::-webkit-scrollbar {
	width: 6px;
}
.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-search-bar__what-pane::-webkit-scrollbar-track {
	background: transparent;
}
.hrtk-sbp-search-bar__what-popover--mobile-inline:not(#\9):not(#\9) .hrtk-sbp-search-bar__what-pane::-webkit-scrollbar-thumb {
	background: #222;
	border-radius: min(4px, var(--hrtk-sbp-shape-max, 999px));
}

/* =========================================================================
   Refine (in-pane) compact variant — v3.66.1
   When Searchbar Pro replaces the Explorer filter pane (refine mode) the bar
   is a results-page filter toolbar, not a homepage hero. Slim it: shorter
   fields, a smaller submit button, lighter shadow, tighter type — so it reads
   as integrated chrome instead of a floating hero pill. Desktop only
   (>=933px); below that the bar collapses to the mobile trigger + modal, so
   none of these rules manifest there. Pure CSS — no markup/JS/behavior
   change; deep-link hydration + AJAX refine are untouched. Scoped to
   [data-hrtk-sbp-refine="1"] so the homepage hero bar (refine="0") is
   unaffected.
   ========================================================================= */
@media (min-width: 933px) {
	.hrtk-sbp-search-bar[data-hrtk-sbp-refine="1"]:not(#\9):not(#\9) {
		/* Lighter, tighter tokens — cascade to every descendant. */
		--hrtk-sbp-label-size:   10px;
		--hrtk-sbp-input-size:   14px;
		--hrtk-sbp-shadow:       0 1px 4px rgba(0, 0, 0, 0.07);
		--hrtk-sbp-shadow-focus: 0 2px 10px rgba(0, 0, 0, 0.12);
		--hrtk-sbp-gap:          4px;
		--hrtk-sbp-divider-h:    22px;

		padding: 4px;
	}

	/* Fields: ~64px -> 48px tall, tighter horizontal padding. */
	.hrtk-sbp-search-bar[data-hrtk-sbp-refine="1"]:not(#\9):not(#\9) .hrtk-sbp-search-bar__field {
		min-height: 48px;
		padding:    6px 14px 6px 16px;
	}
	.hrtk-sbp-search-bar[data-hrtk-sbp-refine="1"]:not(#\9):not(#\9) .hrtk-sbp-search-bar__field--where {
		padding-left: 18px;
	}

	/* Submit: 64px circle -> 48px; expanded pill scales down to match. */
	.hrtk-sbp-search-bar[data-hrtk-sbp-refine="1"]:not(#\9):not(#\9) .hrtk-sbp-search-bar__submit {
		width:  48px;
		height: 48px;
	}
	.hrtk-sbp-search-bar[data-hrtk-sbp-refine="1"]:not(#\9):not(#\9) .hrtk-sbp-search-bar__submit--expanded {
		width:   112px;
		padding: 0 18px;
	}
}

/* =========================================================================
   Refine (in-pane) sticky: stick-and-morph IN PLACE — v3.67.0
   The homepage hero detaches on scroll to a viewport-centered fixed pill.
   In the Explorer pane that bar lives in the results column, so the same
   behavior reads as a jarring sideways teleport. In refine mode the bar
   instead pins in place over the column (position:sticky) and morphs the
   full toolbar <-> a centered slim pill with a fade + spring. No horizontal
   jump; the homepage hero (no --refine host) is completely unaffected.
   Desktop only (>=933px); below that the mobile trigger replaces the bar.
   ========================================================================= */
@media (min-width: 933px) {

	/* 1) Pin OVER the results column instead of fixing to viewport centre.
	   position:sticky can't be used (the toolkit host is a short wrapper, not
	   the full column, so sticky never engages). Instead pin `position:fixed`
	   with `left`/`width` set inline by JS to the column's measured box, so the
	   bar stays exactly where it already is horizontally — zero sideways jump.
	   The spacer (set by JS) holds the vacated flow height. */
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__shell.is-sticky,
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__shell.is-sticky.is-expanded {
		position:      fixed;
		top:           12px;
		transform:     none;
		max-width:     none;
		padding:       0;
		background:    transparent;
		box-shadow:    none;
		border-radius: 0;
		z-index:       9999;
		/* left + width are applied inline by initSticky() to match the column. */
	}

	/* #710: the in-pane bar honours the sticky-navbar offset too (same host
	   class + custom property as the hero pill). Both selectors carry the
	   extra host class so they outrank the hero rules above for .is-expanded. */
	.hrtk-sbp-search-bar-host--refine.hrtk-sbp-search-bar-host--nav-offset:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__shell.is-sticky,
	.hrtk-sbp-search-bar-host--refine.hrtk-sbp-search-bar-host--nav-offset:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__shell.is-sticky.is-expanded {
		top: calc(12px + var(--hrtk-sbp-nav-offset, 0px));
	}

	/* Backdrop stays a click-catcher to collapse, but no page dimming for an
	   in-place bar (the hero's modal-drawer dimming would be wrong here). */
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__backdrop,
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__backdrop.is-visible {
		background: transparent;
	}

	/* 2) The form is the morph stage. Centred (margin auto) so it shrinks
	   toward the column centre, which is the full bar's centre too — the
	   collapse is symmetric, never a sideways drift. */
	/* 3) Morph = FADE content out -> resize the now-empty white bar -> FADE
	   content in. Content stays RENDERED (no display:none, so the fade-in never
	   triggers a re-layout), and its opacity is SEQUENCED via transition-delays
	   so it is only ever visible at the stable full/pill sizes, never mid-resize.
	   The white bar background showing through the faded content IS the "fade to
	   white". The bar's width (concrete px in --hrtk-sbp-bar-w, set by JS to the
	   column width) animates in the MIDDLE, while the content is invisible. */
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__shell.is-sticky .hrtk-sbp-search-bar {
		position:   relative;
		margin:     0 auto;
		width:      var(--hrtk-sbp-bar-w, 100%);
		max-width:  none;
		transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1) 110ms,
		            box-shadow 240ms ease;
	}
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky.is-compressed {
		width:      480px;
		box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
	}

	/* Keep fields/dividers/submit RENDERED when compressed (override the base
	   display:none) so the fade-in is never a re-layout. min-width:0 lets them
	   squish invisibly while the bar resizes. */
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky.is-compressed > .hrtk-sbp-search-bar__field { display: flex; }
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky.is-compressed > .hrtk-sbp-search-bar__divider { display: block; }
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky.is-compressed > .hrtk-sbp-search-bar__submit { display: flex; }

	/* Full state: content visible; fades IN LAST (delay clears the resize). */
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky > .hrtk-sbp-search-bar__field,
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky > .hrtk-sbp-search-bar__divider,
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky > .hrtk-sbp-search-bar__submit {
		opacity:    1;
		transition: opacity 150ms ease 330ms;
	}
	/* Compressed state: content fades OUT FIRST (no delay), before the resize. */
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky.is-compressed > .hrtk-sbp-search-bar__field,
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky.is-compressed > .hrtk-sbp-search-bar__divider,
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky.is-compressed > .hrtk-sbp-search-bar__submit {
		opacity:        0;
		pointer-events: none;
		transition:     opacity 120ms ease 0ms;
	}

	/* Pill: absolute-centred overlay, always rendered. Mirror of the fields —
	   fades IN last on compress, OUT first on expand. */
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky .hrtk-sbp-search-bar__compressed {
		display:        flex;
		position:       absolute;
		inset:          0;
		opacity:        0;
		pointer-events: none;
		transition:     opacity 120ms ease 0ms;
	}
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky.is-compressed .hrtk-sbp-search-bar__compressed {
		opacity:        1;
		pointer-events: auto;
		transition:     opacity 150ms ease 330ms;
	}

	/* 3c) Expanded (clicked the pill): restore the full toolbar IN PLACE —
	   spring back to full width, fields fade in, no viewport-top drawer. */
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky.is-expanded {
		max-width:  none;
		box-shadow: var(--hrtk-sbp-shadow);
	}

	/* 4) Optional gradient scrim behind the sticky bar — a frosted header strip
	   spanning the results column that improves the bar's contrast as the grid
	   scrolls under it. Driven by host data-attrs from settings:
	     data-hrtk-sbp-scrim      = white | dark | none   (default white)
	     data-hrtk-sbp-scrim-blur = 0 | 1                 (default 0)
	   Pseudo-element on the fixed shell: solid at the top, fading to clear. */
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__shell.is-sticky::before {
		content:        "";
		position:       absolute;
		left:           0;
		right:          0;
		top:            -12px;
		/* bar height + the 12px top offset + a configurable fade extent below. */
		height:         calc(100% + 12px + var(--hrtk-sbp-scrim-extent, 60px));
		z-index:        -1;
		pointer-events: none;
		background:     linear-gradient(to bottom,
		                   var(--hrtk-sbp-scrim-color, rgba(255, 255, 255, 0.96)),
		                   transparent);
		-webkit-mask:   linear-gradient(to bottom, #000 0%, #000 44%, transparent 100%);
		        mask:   linear-gradient(to bottom, #000 0%, #000 44%, transparent 100%);
	}
	/* #710: with a navbar offset the strip still starts at the viewport top,
	   so it also covers the gap between the navbar and the bar. */
	.hrtk-sbp-search-bar-host--refine.hrtk-sbp-search-bar-host--nav-offset:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__shell.is-sticky::before {
		top:    calc(-12px - var(--hrtk-sbp-nav-offset, 0px));
		height: calc(100% + 12px + var(--hrtk-sbp-nav-offset, 0px) + var(--hrtk-sbp-scrim-extent, 60px));
	}
	.hrtk-sbp-search-bar-host--refine[data-hrtk-sbp-scrim="dark"] .hrtk-sbp-search-bar-host__shell.is-sticky::before {
		--hrtk-sbp-scrim-color: rgba(17, 24, 39, 0.92);
	}
	.hrtk-sbp-search-bar-host--refine[data-hrtk-sbp-scrim="none"]:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__shell.is-sticky::before {
		display: none;
	}
	/* Blur variant: frost the content showing through the fading strip. */
	.hrtk-sbp-search-bar-host--refine[data-hrtk-sbp-scrim-blur="1"]:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__shell.is-sticky::before {
		backdrop-filter: blur(10px);
	}
}

/* Reduced-motion: keep the in-place sticky positioning, drop the morph. */
@media (min-width: 933px) and (prefers-reduced-motion: reduce) {
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar-host__shell.is-sticky .hrtk-sbp-search-bar,
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky > .hrtk-sbp-search-bar__field,
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky > .hrtk-sbp-search-bar__divider,
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar.is-sticky > .hrtk-sbp-search-bar__submit,
	.hrtk-sbp-search-bar-host--refine:not(#\9):not(#\9) .hrtk-sbp-search-bar__compressed {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * FlexibleSearch bridge (v3.78) — Exact / Flexible mode in the WHEN popover
 * ------------------------------------------------------------------------ */

.hrtk-sbp-datepicker__flex-toggle:not(#\9):not(#\9) {
	display: flex;
	justify-content: center;
	gap: 4px;
	/* Shrink-wrap to the two tabs and center, rather than spanning the bar. */
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin: 4px auto 12px;
	padding: 4px;
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	background: #f0f0f0;
}

.hrtk-sbp-datepicker__flex-mode:not(#\9):not(#\9) {
	border: 0;
	background: transparent;
	padding: 7px 18px;
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	font-size: 13.6px;
	font-weight: 500;
	color: #444;
	cursor: pointer;
}

.hrtk-sbp-datepicker__flex-mode--active:not(#\9):not(#\9) {
	background: #fff;
	color: #111;
	font-weight: 600;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.hrtk-sbp-datepicker__flex-panel:not(#\9):not(#\9) {
	padding: 4px 8px 12px;
}

.hrtk-sbp-datepicker__flex-panel[hidden]:not(#\9):not(#\9) {
	display: none;
}

.hrtk-sbp-datepicker__flex-heading:not(#\9):not(#\9) {
	font-size: 14.4px;
	font-weight: 600;
	margin: 12px 0 8px;
	text-align: center;
}

.hrtk-sbp-datepicker__flex-stays:not(#\9):not(#\9) {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

.hrtk-sbp-datepicker__flex-months:not(#\9):not(#\9) {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 4px 2px;
	scrollbar-width: none;
}

.hrtk-sbp-datepicker__flex-months:not(#\9):not(#\9)::-webkit-scrollbar {
	display: none;
}

.hrtk-sbp-datepicker__flex-chip:not(#\9):not(#\9) {
	flex: 0 0 auto;
	padding: 9px 16px;
	border: 1px solid #ddd;
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	background: #fff;
	color: #222;
	font-size: 13.6px;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hrtk-sbp-datepicker__flex-chip:hover:not(#\9):not(#\9) {
	border-color: #999;
}

.hrtk-sbp-datepicker__flex-chip--active:not(#\9):not(#\9) {
	color: var(--hrtk-sbp-accent, #ff385c);
	border-color: var(--hrtk-sbp-accent, #ff385c);
	background: color-mix(in srgb, var(--hrtk-sbp-accent, #ff385c) 7%, #fff);
	font-weight: 600;
}

/* In-popover suggested-dates section (v3.78.5) — sits at the bottom of the
   flexible panel, below the month strip. Styled as SECONDARY: a divider
   sets it apart, the heading is smaller/muted, and the chips are lighter
   than the primary stay/month chips above. */
.hrtk-sbp-datepicker__flex-suggested:not(#\9):not(#\9) {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #ececec;
}

.hrtk-sbp-datepicker__flex-suggested[hidden]:not(#\9):not(#\9) {
	display: none;
}

.hrtk-sbp-datepicker__flex-suggested:not(#\9):not(#\9) .hrtk-sbp-datepicker__flex-heading {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #8a8f98;
	margin: 0 0 8px;
}

.hrtk-sbp-datepicker__flex-suggested-track:not(#\9):not(#\9) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

/* Secondary chip weight inside the suggested section. */
.hrtk-sbp-datepicker__flex-suggested-track:not(#\9):not(#\9) .hrtk-sbp-datepicker__flex-chip {
	padding: 6px 12px;
	font-size: 13px;
	border-color: #e6e6e6;
	color: #444;
}

.hrtk-sbp-datepicker__flex-suggested-track:not(#\9):not(#\9) .hrtk-sbp-datepicker__flex-chip--active {
	color: var(--hrtk-sbp-accent, #ff385c);
	border-color: var(--hrtk-sbp-accent, #ff385c);
	background: color-mix(in srgb, var(--hrtk-sbp-accent, #ff385c) 7%, #fff);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Flexible-search alternative-dates strip (v3.78.1)
 * ------------------------------------------------------------------------ */

.hrtk-sbp-flex-alts:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	/* Centered to match the filter-chip row it sits above. */
	justify-content: center;
	gap: 10px;
	margin: 12px 0 2px;
}

.hrtk-sbp-flex-alts[hidden]:not(#\9):not(#\9) {
	display: none;
}

.hrtk-sbp-flex-alts__heading:not(#\9):not(#\9) {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	/* Sits directly on the page section (no chip background), so it follows
	   the same light/dark context tokens as the quick-chip labels below. */
	color: var(--hrtk-qc-text-strong, #444);
}

.hrtk-sbp-flex-alts__track:not(#\9):not(#\9) {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 2px;
	scrollbar-width: none;
}

.hrtk-sbp-flex-alts__track:not(#\9):not(#\9)::-webkit-scrollbar {
	display: none;
}

.hrtk-sbp-flex-alts__chip:not(#\9):not(#\9) {
	flex: 0 0 auto;
	padding: 6px 12px;
	border: 1px solid #e2e2e2;
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	background: #fff;
	color: #333;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease;
}

.hrtk-sbp-flex-alts__chip:hover:not(#\9):not(#\9) {
	border-color: #999;
}

.hrtk-sbp-flex-alts__chip--active:not(#\9):not(#\9) {
	color: var(--hrtk-sbp-accent, #ff385c);
	border-color: var(--hrtk-sbp-accent, #ff385c);
	background: color-mix(in srgb, var(--hrtk-sbp-accent, #ff385c) 7%, #fff);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Quick filter chips (v3.114, ported from batch2 v3.77)
 * -------------------------------------------------------------------------
 * The chip row is a SIBLING of .hrtk-sbp-search-bar inside the host (same
 * disjoint-subtree situation as .hrtk-sbp-flex-alts above): it sits outside
 * the isolation reset, so it only gets the specificity armor. Every visual
 * property a theme's element rules (button {}, svg {}) commonly set is
 * therefore declared explicitly — nothing load-bearing is left to
 * fall-through.
 * ------------------------------------------------------------------------ */

.hrtk-sbp-quick-chips:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	/* Center the row under the bar; when the track overflows it fills the
	   width and scrolls, but a fitting set sits centered. */
	justify-content: center;
	gap: 6px;
	/* Extra top gap sets the row apart from (and below) the primary bar,
	   reinforcing the hierarchy since the chips are visually quiet. */
	margin: 18px 0 4px;
}

.hrtk-sbp-quick-chips__track:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	max-width: 100%;
	gap: 8px;
	overflow-x: auto;
	/* overflow-x:auto computes overflow-y to auto too; a 1px content
	   overflow then adds a vertical scroll axis and the row jiggles on
	   wheel/trackpad. Pin it. */
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: 4px 2px;
	/* Chips are buttons — nothing selectable lives here, and a mouse
	   drag-to-scroll (see initQuickChips) must not start a text selection. */
	-webkit-user-select: none;
	-moz-user-select: none;
	     user-select: none;
	/* Soft edges while there is off-screen content in that direction.
	   Fade widths are toggled by JS via the --fade-* classes; at 0px the
	   gradient is fully opaque, i.e. no visible mask. */
	--hrtk-qc-fade-l: 0px;
	--hrtk-qc-fade-r: 0px;
	-webkit-mask-image: linear-gradient(to right,
		transparent 0, #000 var(--hrtk-qc-fade-l),
		#000 calc(100% - var(--hrtk-qc-fade-r)), transparent 100%);
	        mask-image: linear-gradient(to right,
		transparent 0, #000 var(--hrtk-qc-fade-l),
		#000 calc(100% - var(--hrtk-qc-fade-r)), transparent 100%);
}

.hrtk-sbp-quick-chips__track--fade-left:not(#\9):not(#\9) {
	--hrtk-qc-fade-l: 40px;
}

.hrtk-sbp-quick-chips__track--fade-right:not(#\9):not(#\9) {
	--hrtk-qc-fade-r: 40px;
}

.hrtk-sbp-quick-chips__track:not(#\9):not(#\9)::-webkit-scrollbar {
	display: none;
}

/* Mid-drag state (mouse drag-to-scroll): the whole row reads as grabbed,
   including over chips, so the cursor doesn't flicker pointer/grabbing as
   it crosses them. */
.hrtk-sbp-quick-chips__track--dragging:not(#\9):not(#\9),
.hrtk-sbp-quick-chips__track--dragging:not(#\9):not(#\9) .hrtk-sbp-quick-chip {
	cursor: grabbing;
}

/* Ghost chips — the bar owns the white-pill shape; the chip row reads as a
   quiet secondary text row until a chip is actually active. */
.hrtk-sbp-quick-chip:not(#\9):not(#\9) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 7px 12px;
	/* Transparent 1px border on every chip so the active state can add a
	   visible one without shifting the row. */
	border: 1px solid transparent;
	border-radius: var(--hrtk-sbp-shape-max, 999px);
	background: transparent;
	background-image: none;
	box-shadow: none;
	margin: 0;
	color: var(--hrtk-qc-text, #5b6069);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.hrtk-sbp-quick-chip:not(.hrtk-sbp-quick-chip--active):hover:not(#\9):not(#\9) {
	color: var(--hrtk-qc-text-strong, #1f2329);
	background: transparent;
}

/* Selected chip = bold + outline, no fill. Reads clearly as "on" while
   staying quiet against the primary bar. */
.hrtk-sbp-quick-chip--active:not(#\9):not(#\9) {
	color: var(--hrtk-qc-text-strong, #1f2329);
	border-color: var(--hrtk-qc-text-strong, #1f2329);
	font-weight: 700;
}

/* Icon inherits the chip text color via mask so the active tint applies. */
.hrtk-sbp-quick-chip__icon:not(#\9):not(#\9) {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--hrtk-qc-icon) center / contain no-repeat;
	        mask: var(--hrtk-qc-icon) center / contain no-repeat;
}

/* Deselect affordance: a small trailing X shown on the active chip only
   (single-select row — the whole chip is the toggle, the X is the cue). */
.hrtk-sbp-quick-chip__x:not(#\9):not(#\9) {
	display: none;
	align-items: center;
	margin-left: 2px;
	flex: 0 0 auto;
}

.hrtk-sbp-quick-chip--active:not(#\9):not(#\9) .hrtk-sbp-quick-chip__x {
	display: inline-flex;
}

/* Light-text context (dark section background). The chip row sits directly
   on the page section, so on a dark section the gray ghost chips vanish.
   Honor the UIKit light-text context: an explicit uk-light (YOOtheme adds it
   when a section's text color is Light) plus the UIKit styles that imply
   light text in the stock build (section/tile primary+secondary, card
   primary/secondary bodies, overlay-primary, offcanvas). .hrtk-light is the
   theme-agnostic opt-in for non-UIKit themes. Only the two text custom
   properties move — the label, the masked icon, and the X stroke all paint
   with currentColor, so retinting color recolors all three.
   The suggested-dates strip (.hrtk-sbp-flex-alts) heading sits on the bare
   section too, so it shares the same tokens. Issue #520 tracks replacing
   this class allowlist with a luminance probe. */
.hrtk-light:not(#\9):not(#\9) .hrtk-sbp-quick-chips,
.uk-light:not(#\9):not(#\9) .hrtk-sbp-quick-chips,
.uk-section-primary:not(.uk-preserve-color):not(#\9):not(#\9) .hrtk-sbp-quick-chips,
.uk-section-secondary:not(.uk-preserve-color):not(#\9):not(#\9) .hrtk-sbp-quick-chips,
.uk-tile-primary:not(.uk-preserve-color):not(#\9):not(#\9) .hrtk-sbp-quick-chips,
.uk-tile-secondary:not(.uk-preserve-color):not(#\9):not(#\9) .hrtk-sbp-quick-chips,
.uk-card-primary.uk-card-body:not(#\9):not(#\9) .hrtk-sbp-quick-chips,
.uk-card-secondary.uk-card-body:not(#\9):not(#\9) .hrtk-sbp-quick-chips,
.uk-overlay-primary:not(#\9):not(#\9) .hrtk-sbp-quick-chips,
.uk-offcanvas-bar:not(#\9):not(#\9) .hrtk-sbp-quick-chips,
.hrtk-light:not(#\9):not(#\9) .hrtk-sbp-flex-alts,
.uk-light:not(#\9):not(#\9) .hrtk-sbp-flex-alts,
.uk-section-primary:not(.uk-preserve-color):not(#\9):not(#\9) .hrtk-sbp-flex-alts,
.uk-section-secondary:not(.uk-preserve-color):not(#\9):not(#\9) .hrtk-sbp-flex-alts,
.uk-tile-primary:not(.uk-preserve-color):not(#\9):not(#\9) .hrtk-sbp-flex-alts,
.uk-tile-secondary:not(.uk-preserve-color):not(#\9):not(#\9) .hrtk-sbp-flex-alts,
.uk-card-primary.uk-card-body:not(#\9):not(#\9) .hrtk-sbp-flex-alts,
.uk-card-secondary.uk-card-body:not(#\9):not(#\9) .hrtk-sbp-flex-alts,
.uk-overlay-primary:not(#\9):not(#\9) .hrtk-sbp-flex-alts,
.uk-offcanvas-bar:not(#\9):not(#\9) .hrtk-sbp-flex-alts {
	--hrtk-qc-text: rgba(255, 255, 255, 0.75);
	--hrtk-qc-text-strong: #fff;
}

/* Explicit dark-text reset (uk-dark = normal dark-on-light). Declared after
   the light block so it wins the specificity tie against uk-light/hrtk-light
   when a dark island is nested inside a light section. */
.hrtk-dark:not(#\9):not(#\9) .hrtk-sbp-quick-chips,
.uk-dark:not(#\9):not(#\9) .hrtk-sbp-quick-chips,
.hrtk-dark:not(#\9):not(#\9) .hrtk-sbp-flex-alts,
.uk-dark:not(#\9):not(#\9) .hrtk-sbp-flex-alts {
	--hrtk-qc-text: #5b6069;
	--hrtk-qc-text-strong: #1f2329;
}

/* v1 mobile decision (issue #284): the chip row ships desktop-only. Below
   768px the desktop bar is replaced by the mobile trigger pill and the
   full-screen modal owns filtering; surfacing chips there is a future
   option, not a v1 surface. */
@media (max-width: 768px) {
	/* v3.177: the chip row is shown on narrow viewports by default — the
	   track already scrolls horizontally, which is the right affordance for
	   touch. Sites that want the pre-3.177 desktop-only row set the Searchbar
	   Pro option, which adds the --desktop-only modifier. */
	.hrtk-sbp-quick-chips--desktop-only:not(#\9):not(#\9) {
		display: none;
	}

	.hrtk-sbp-quick-chips:not(#\9):not(#\9) {
		/* The mobile bar is a full-width trigger pill, so the row aligns left
		   and bleeds to the viewport edge rather than centering: a centered
		   overflowing track hides its first chip off-screen. */
		justify-content: flex-start;
		margin: 12px 0 4px;
	}

	.hrtk-sbp-quick-chips__track:not(#\9):not(#\9) {
		/* Edge padding keeps the first and last chip clear of the screen
		   edge while still letting the row scroll edge to edge. */
		padding-inline: 2px;
		scroll-padding-inline: 2px;
	}
}