Toolkit: Styling Reference

The Toolkit’s guest-facing modules are built to blend into your site, and each one can be restyled further. This page covers the three layers, in the order you should reach for them: the Skin Designer settings screen, the CSS theming variables, and the class names. Like the HomeRunner CSS Class Reference, it’s written so you can paste the whole page into an AI assistant (Claude, ChatGPT) with a description of the look you want and let it write the CSS.

Start with the Skin Designer #

The look of property cards, listings, and the search bar area is controlled by the HomeRunner Skin module’s Skin Designer screen in the Toolkit admin: colors, fonts, corner radii, card spacing, price arrangement, image aspect ratio, and ready-made presets. If your goal is “make the listings match my brand,” do it there before writing any CSS.

The Skin Designer’s choices are delivered to the page as --hrtk-skin-* CSS variables (full list in the appendix), so anything you set there can also be fine-tuned from CSS afterward.

Map marker and cluster badge colors work the same way: set them in the Map Stacking module’s settings, fine-tune via the variables below if needed.

Protected styling, and what it means for your CSS #

Toolkit modules ship with protected styling: their rules are deliberately weighted so a host theme’s CSS can’t accidentally break them, which also means your own plain selectors won’t override them directly.

Five modules expose a documented set of theming variables as the supported way through: Searchbar Pro, Destination Filter, Destination Search, Property Page Section Nav, and Photo Gallery. Set the variables with an ordinary rule and they win, no !important needed:

.hrtk-sbp-search-bar {
  --hrtk-sbp-btn-bg: #0a7d4f;
  --hrtk-sbp-btn-bg-hover: #08663f;
  --hrtk-sbp-shape-max: 8px;
}
.hrtk-dfilter-popup {
  --hrtk-dfilter-accent: #0a7d4f;
  --hrtk-dfilter-header-bg: #1f2d3a;
}
.hrtk-dsearch {
  --hrtk-dsearch-accent: #0a7d4f;
  --hrtk-dsearch-heading-bg: #1f2d3a;
}
.hrtk-psn {
  --hrtk-psn-bg: #1f2d3a;
  --hrtk-psn-fg: #ffffff;
}
#pg-wrap {
  --hrtk-pg-accent: #0a7d4f;
}

For protected modules without a variable API (Flexible Search, Explorer Dynamic Min Stay, Group Suggestion, Two-Step Checkout, Checkout Survey, Streamlined Checkout Consent, Inline Price Breakdown, Guest Picker, Map Stacking, Map All Pins, Map Controls, Mobile Explorer, HomeRunner Skin, Bedroom Showcase), a direct rule against their classes needs !important to take effect. Two modules run on ordinary CSS with no protection, so a plain selector already wins with no !important: the mobile map dock and the guest review pages.

Recent change: Map All Pins is now protected #

Map All Pins used to ship its styling unprotected, so a plain rule against classes like .hrtk-allpins-dot or .hrtk-map-finder was enough to restyle it. As of Toolkit 3.156 its styling is protected like the rest of the map modules, which closed a real problem (host themes were able to outrank the finder control and the pin card) but also means those plain rules no longer win.

If you wrote custom CSS against the Map All Pins classes before this change and it has stopped applying, add !important to the declarations in that rule. The class names themselves did not change, and the --hrtk-badge-* variables listed under Map Stacking below still work as ordinary variable rules with no !important needed, because Map All Pins reuses them.

Recent change: Inline Price Breakdown is now protected #

Inline Price Breakdown used to ship as ordinary, unprotected CSS, so a plain rule against classes like .hrtk-ipb-toggle or .hrtk-ipb-exp-toggle was enough to restyle it. Its styling is now protected, the same way most other Toolkit modules already are, so those plain rules no longer win on their own.

If you wrote custom CSS against the Inline Price Breakdown classes before this change and it has stopped applying, add !important to the declarations in that rule. The class names themselves did not change. This module has no dedicated theming variables, so !important is the only way through.

Searchbar Pro variables #

Set on .hrtk-sbp-search-bar. Defaults are the shipped look; override only what you need.

Bar and layout: --hrtk-sbp-bg, --hrtk-sbp-bar-bg, --hrtk-sbp-bar-w, --hrtk-sbp-border, --hrtk-sbp-shadow, --hrtk-sbp-shadow-focus, --hrtk-sbp-gap, --hrtk-sbp-ext
Corner shape: --hrtk-sbp-shape-max is the one master token, capping every corner radius in the bar (999px = pill, the default; set it to a pixel value like 12px for rounded, or 0px for square). --hrtk-sbp-radius mirrors it on the bar itself, and --hrtk-sbp-radius-inner is the derived, slightly tighter radius used on elements nested inside a shaped surface (the submit button, and cards inside popovers), so nested corners stay concentric instead of mismatched.
Labels and inputs: --hrtk-sbp-label-color, --hrtk-sbp-label-size, --hrtk-sbp-input-color, --hrtk-sbp-placeholder, --hrtk-sbp-input-size
Search button: --hrtk-sbp-btn-bg, --hrtk-sbp-btn-bg-hover, --hrtk-sbp-btn-color, --hrtk-sbp-btn-radius
Suggestion listbox: --hrtk-sbp-listbox-bg, --hrtk-sbp-listbox-shadow, --hrtk-sbp-listbox-radius, --hrtk-sbp-listbox-max-h, --hrtk-sbp-hover-bg, --hrtk-sbp-hover-color
Field states: --hrtk-sbp-field-bg, --hrtk-sbp-field-hover-bg, --hrtk-sbp-field-inactive-bg, --hrtk-sbp-field-active-bg, --hrtk-sbp-field-active-shadow, --hrtk-sbp-focus-ring
Popovers: --hrtk-sbp-popover-shadow, --hrtk-sbp-popover-radius, --hrtk-sbp-popover-width
Text states: --hrtk-sbp-text-idle, --hrtk-sbp-text-hover, --hrtk-sbp-text-active
Accent (also settable via the module’s color picker in admin): --hrtk-sbp-accent, --hrtk-sbp-accent-hover, --hrtk-sbp-accent-ring
Motion and dividers: --hrtk-sbp-spring, --hrtk-sbp-divider-color, --hrtk-sbp-divider-h, --hrtk-sbp-scrim-color, --hrtk-sbp-scrim-extent
Quick filter chips: --hrtk-qc-fade-l and --hrtk-qc-fade-r set the edge-fade width on the scrollable quick-chips row (0 by default, widened automatically once the row overflows); --hrtk-qc-icon is set per chip when that quick filter has an icon. --hrtk-qc-text and --hrtk-qc-text-strong set the chip label, icon, and clear-button color (default: dark-on-light, #5b6069 idle and #1f2329 selected or hovered). They switch to a light palette automatically when the chips row sits inside a UIkit light-text section (uk-light, uk-section-primary, uk-section-secondary, uk-tile-primary, uk-tile-secondary, uk-card-primary, uk-card-secondary, uk-overlay-primary, uk-offcanvas-bar) or the theme-agnostic .hrtk-light class, and reset to the default dark-on-light pair inside .hrtk-dark or uk-dark.

Destination Filter variables #

Set on .hrtk-dfilter-popup. Defaults in parentheses.

--hrtk-dfilter-accent (#c9a959), --hrtk-dfilter-accent-hover (#b8963f), --hrtk-dfilter-accent-soft (#faf5e8), --hrtk-dfilter-accent-softer (#fdfbf5)
--hrtk-dfilter-header-bg (#2c3e50), --hrtk-dfilter-header-fg (#ffffff)
--hrtk-dfilter-surface (#ffffff), --hrtk-dfilter-surface-alt (#f7f9fb)
--hrtk-dfilter-text (#2c3e50), --hrtk-dfilter-text-muted (#8899aa)
--hrtk-dfilter-border (#e8ecf0), --hrtk-dfilter-radius (14px)

If your popup uses the grouped search bar (see Destination Search below), its --hrtk-dsearch-* tokens are remapped onto this same popup palette automatically, so a --hrtk-dfilter-accent override reflects in the search results too. No separate wiring needed inside the popup.

Destination Search variables #

Set on .hrtk-dsearch, the search component’s own root. This is the grouped Homes / Islands / Cities / Resorts search box, available inside the Destination Filter popup and as the standalone [homerunner_destination_search] shortcode. Like Searchbar Pro and Destination Filter, Destination Search ships protected styling, so a plain rule against its classes needs !important; the variables below are the supported way through, with no !important needed. Defaults in parentheses.

--hrtk-dsearch-accent (#c9a959), --hrtk-dsearch-accent-hover (#b8963f), --hrtk-dsearch-accent-soft (#faf5e8)
--hrtk-dsearch-heading-bg (#2c3e50), --hrtk-dsearch-heading-fg (#c9a959)
--hrtk-dsearch-surface (#ffffff), --hrtk-dsearch-surface-alt (#f7f9fb)
--hrtk-dsearch-text (#2c3e50), --hrtk-dsearch-text-muted (#8899aa)
--hrtk-dsearch-field-bg (#ffffff), --hrtk-dsearch-field-fg (#2c3e50), --hrtk-dsearch-field-border (#e8ecf0), --hrtk-dsearch-field-placeholder (#8899aa)
--hrtk-dsearch-border (#e8ecf0), --hrtk-dsearch-radius (12px), --hrtk-dsearch-ring (#faf5e8)

Property Page Section Nav variables #

Set on .hrtk-psn, the nav’s own root. Defaults in parentheses.

--hrtk-psn-bg (#fff), --hrtk-psn-fg (#222), --hrtk-psn-muted (#6d6d6d), --hrtk-psn-border (rgba(0,0,0,0.1)), --hrtk-psn-shadow (0 2px 12px rgba(0,0,0,0.1))
--hrtk-psn-radius (999px), --hrtk-psn-max-width (1200px), --hrtk-psn-font-size (15px), --hrtk-psn-z-index (900)
--hrtk-psn-offset is written inline by the module from its own Distance from the top setting; set it in the settings panel, not from CSS.

Photo Gallery variables #

Set on #pg-wrap. Defaults in parentheses. Fonts deliberately inherit your site’s own typography rather than forcing a specific one.

--hrtk-pg-accent (#B89535), --hrtk-pg-text (#1A1A1A), --hrtk-pg-text-secondary (#6B6B6B)
--hrtk-pg-border (#E2DFDA), --hrtk-pg-border-light (#E8E5E0)
--hrtk-pg-max-width (1200px) is written inline by the module from the Maximum width setting (or the shortcode’s max_width attribute) when the gallery is boxed; set it in the settings panel, not from CSS.

Module class reference #

Searchbar Pro #

The full-width property search bar with date picker and guest picker, plus its mobile modal.

Containers: .hrtk-sbp-search-bar (desktop), .hrtk-sbp-search-bar__mobile and .hrtk-sbp-search-bar__mobile-trigger (mobile)
Children: .hrtk-sbp-search-bar__field, .hrtk-sbp-search-bar__field--where, .hrtk-sbp-search-bar__submit, .hrtk-sbp-datepicker (with __calendar, __day--in-range, __day--checkin, __day--checkout), .hrtk-sbp-guest-picker (with __btn, __stepper)
Sticky/compressed state: .hrtk-sbp-search-bar-host--refine
Quick filter chips: .hrtk-sbp-quick-chips (row) with __track (scrollable strip), .hrtk-sbp-quick-chip (one chip) with __icon, __label, __x (the deselect cue on the active chip)
Note: the bar’s open/close animation is driven by inline styles the module writes itself; those aren’t overridable from CSS. The same is true of the expanded submit button’s width when Live Result Count is turned on: it’s measured and set as an inline style, not a themeable variable. The static width CSS controls is only used when that setting is off.

Destination Filter #

The destination picker modal.

Containers: .hrtk-dfilter-backdrop (overlay), .hrtk-dfilter-popup (modal)
Children: .hrtk-dfilter-accordion, .hrtk-dfilter-checkbox-box, .hrtk-dfilter-checked, .hrtk-dfilter-count, .hrtk-dfilter-apply, .hrtk-dfilter-clear, .hrtk-dfilter-footer

Destination Search #

The grouped Homes / Islands / Cities / Resorts search box: mounted in the Destination Filter popup header above the tabs, and also available on its own via the [homerunner_destination_search] shortcode. Protected styling (see above), so a plain rule against these classes needs !important; see the variables above for the fastest path.

Container: .hrtk-dsearch (also .hrtk-dsearch-standalone on shortcode placements, .hrtk-dsearch-mount inside the popup)
Field: .hrtk-dsearch-field, .hrtk-dsearch-input, .hrtk-dsearch-icon, .hrtk-dsearch-clear
Results: .hrtk-dsearch-panel, .hrtk-dsearch-heading (with -label, -line), .hrtk-dsearch-option (with -icon, -label, -count), .hrtk-dsearch-more, .hrtk-dsearch-empty
State: .hrtk-dsearch-active (the currently highlighted option), .hrtk-dsearch-live (the screen-reader announcement region)

Flexible Search #

Flexible-dates chips and panel inside the date picker modal.

Containers: .hrtk-fs-toggle, .hrtk-fs-panel, .hrtk-fs-form-strip, .hrtk-fs-empty
Children: .hrtk-fs-chip, .hrtk-fs-chip-group, .hrtk-fs-chip-primary, .hrtk-fs-chip-secondary, .hrtk-fs-alt-chips, .hrtk-fs-date-modal, .hrtk-fs-apply, .hrtk-fs-clear

Explorer Dynamic Min Stay #

The zero-results block that appears in the inventory Explorer when a search’s check-in date is confirmed to require more nights than the guest searched for. Visual language mirrors Flexible Search’s empty state above, so the two read as one system on sites running both.

Container: .hrtk-edms-empty
Children: .hrtk-edms-empty-title, .hrtk-edms-empty-subtitle, .hrtk-edms-empty-chips, .hrtk-edms-empty-chip

Group Suggestion #

Banner suggesting sibling properties for groups that exceed a property’s capacity. The same markup and classes also power the Group Booking shortcode’s inline card; a .hrtk-group-banner--fixed or .hrtk-group-banner--inline modifier on the container tells the two apart if you need to style them differently.

Container: .hrtk-group-banner
Children: .hrtk-group-banner-header, .hrtk-group-banner-capacity, .hrtk-group-banner-siblings, .hrtk-group-sibling-card, .hrtk-group-sibling-availability

Two-Step Checkout #

Guest summary step injected into the checkout card.

Classes: .hrtk-cgs-summary (with -name, -contact, -lines), .hrtk-cgs-continue-btn, .hrtk-cgs-edit-btn, .hrtk-cgs-invalid, .hrtk-cgs-privacy-note

Checkout Survey #

“How did you hear about us” field at checkout; it leans on the checkout’s own field styling.

Classes: .hrtk-checkout-survey-field, .hrtk-survey-other-wrap

Streamlined Checkout Consent #

The single “by booking you agree” notice above the Book button, and the popup it opens for the Rental Agreement or Cancellation Policy. Protected styling, so rules against these classes need !important. It has no documented variable API.

Notice: .hrtk-implicit-consent-notice (the sentence itself), .hrtk-ic-link (a linked policy name inside it)
Popup: .hrtk-ic-overlay (the backdrop), .hrtk-ic-dialog (the box), .hrtk-ic-dialog-title, .hrtk-ic-dialog-body, .hrtk-ic-close (the close button)
State: .hrtk-ic-hidden (hides the checkbox UI this module replaces)

Inline Price Breakdown #

The itemized price breakdown printed in the booking widget. Protected styling (see the recent-change note above), so rules against these classes need !important.

Containers: .hrtk-ipb (widget wrapper), .hrtk-ipb-heading (optional heading above the lines)
Rows: .hrtk-ipb-row (one line item), .hrtk-ipb-label (the fee name), .hrtk-ipb-amount (the dollar amount)
Expandable display: .hrtk-ipb-toggle (the “Price details” toggle button), .hrtk-ipb-chevron (its arrow icon, flips when the widget is in its open state), .hrtk-ipb--accordion (the display-mode modifier that adds top padding to the body)
Fee explanations: .hrtk-ipb-exp-toggle (the small info button next to a fee row), .hrtk-ipb-exp-icon (the circular “i” icon inside it), .hrtk-ipb-explanation (the revealed note text)

Guest Picker #

The standalone guests modal (separate from Searchbar Pro’s built-in guest picker).

Container: .hrtk-gp-modal
Children: .hrtk-gp-stepper (with -btn, -value), .hrtk-gp-row-item, .hrtk-gp-row-label, .hrtk-gp-pets-notice, .hrtk-gp-trigger

HomeRunner Skin #

The property-card and listing visual layer. It has no elements of its own; it re-skins the HomeRunner plugin’s markup, driven by the Skin Designer. Its classes are preset modifiers (for example .hrtk-skin--card-image-aspect-16-9, .hrtk-skin--searchbar-position-floating) that the Skin Designer toggles for you. Restyle through the Skin Designer and the --hrtk-skin-* variables, not these classes.

Map Stacking #

Stacked-marker badges, spider legs, and cluster popups on the results map.

Classes: .hrtk-stack-count, .hrtk-stack-count-only, .hrtk-spider-marker, .hrtk-spider-leg, .hrtk-spider-popup (with -inner, -close), .hrtk-leaflet-cluster (with --t1 through --t5 tier modifiers on the bundled marker style)
Badge colors come from the Map Stacking settings, delivered as variables: --hrtk-badge-bg, --hrtk-badge-text, --hrtk-count-bg, --hrtk-count-text, --hrtk-center-dot, --hrtk-connector, --hrtk-focus
If your site uses the bundled cluster marker style, its five tier colors are also variables: --hrtk-cluster-1 (#058ef9), --hrtk-cluster-2 (#0b7fd4), --hrtk-cluster-3 (#7a5cd6), --hrtk-cluster-4 (#d1568a), --hrtk-cluster-5 (#e2603f), each also settable as a single hex from the Map Stacking settings screen. --hrtk-cluster-mask is generated by the plugin for the marker’s shape and is not meant to be set by hand.

Map All Pins #

The lightweight “every matching home” pins on the results map, the card their popup shows, and the on-map home finder. Protected since Toolkit 3.156, so rules against these classes need !important (see the note near the top of this page if your existing CSS stopped applying). Badge colors come from the --hrtk-badge-* variables shared with Map Stacking.

Pins: .hrtk-allpins-marker (the marker wrapper), .hrtk-allpins-dot (the dot itself), .hrtk-allpins-found (the highlight ring on a pin the finder or a shared home link just landed on)
Finder: .hrtk-map-finder (with -input, -results, -result, -empty), plus the .hrtk-map-finder--wrap modifier applied when the finder wraps below the map’s other controls on narrow maps

Map Controls #

The Airbnb-style zoom stack, search-as-you-move pill, and hide/show map toggle. Protected, so rules against these classes need !important.

Container: .hrtk-mapctl (with -on when the controls are active, -inview on the visible state, -collapse on the hide/show toggle, -keep-fs when the fullscreen button is kept)
Controls: .hrtk-mapctl-zoom (the floating zoom stack), .hrtk-mapctl-search (the search-as-you-move pill, with -searcharea and -searcharea-show on its “search this area” state), .hrtk-mapctl-showtab (the floating “Show map” pill while hidden), .hrtk-mapctl-btn, .hrtk-mapctl-tip

Mobile Explorer #

The mobile bottom bar, search pill, and floating action button on Explorer pages. This module was called Explorer Mobile Sheet until Toolkit 3.157; the class names are unchanged.

Classes: .hrtk-msheet-bar, .hrtk-msheet-fab (with -hidden, -ico), .hrtk-msheet-pill, .hrtk-msheet-head, .hrtk-msheet-count, .hrtk-msheet-filters-open

Explorer Map Mobile Dock #

Docks the map tooltip on mobile. It mostly restyles the map library’s own elements, so overriding it means matching the !important rules it uses; its one own class is .hrtk-explorer-map-tooltip--docked.

Property Page Section Nav #

The sticky in-page jump menu on single property pages. Protected structural styling with a variable API for theming (see above), same pattern as Searchbar Pro and the destination components: set the --hrtk-psn-* variables and they win with no !important needed.

Container: .hrtk-psn (with --bar and --pill presentation modifiers, .is-visible once the guest has scrolled into the listing, --desktop when mobile is turned off in settings)
Children: .hrtk-psn__inner (the scrollable strip), .hrtk-psn__link (one section link, with .is-active on the currently-read section)

Photo Gallery #

The five-photo hero grid, full-screen lightbox, and mobile swipe carousel on property pages, placed with the [hrtk_photo_gallery] shortcode. It ships with a documented variable API (see above), and its own selectors are otherwise scoped under one container so they rarely collide with theme styles.

Container: #pg-wrap
Hero grid: .pg-gallery, .pg-gallery-main (the large lead photo), .pg-gallery-cell (a secondary photo tile), .pg-gallery-btn (the “show all photos” pill)
Mobile: .pg-mobile-counter (photo count pill), .pg-mobile-showall (the mobile “see all” button)
Lightbox: .pg-lightbox (with .active and .single-view states), .pg-lightbox-header, .pg-lightbox-title, .pg-lightbox-close, .pg-lightbox-grid (with .pg-lb-row, .pg-lb-row-single, .pg-lb-row-double), .pg-lightbox-single (with -img), .pg-lightbox-nav (with .pg-lightbox-prev, .pg-lightbox-next), .pg-lightbox-counter

Bedroom Showcase #

The per-bedroom cards (photo, bed types, blurb) placed with the [hrtk_bedrooms] shortcode, and their photo lightbox. Protected, so rules against these classes need !important; it has no documented variable API, since the CSS custom properties it writes (--hrtk-bedrooms-ar, --hrtk-bedrooms-columns, --hrtk-bedrooms-lightbox-height, --hrtk-bedrooms-ratio) are internal state the script manages itself, not meant to be set by hand.

Container: .hrtk-bedrooms
Grid and cards: .hrtk-bedrooms__grid, .hrtk-bedrooms__item, .hrtk-bedrooms__card, .hrtk-bedrooms__media, .hrtk-bedrooms__img
Card content: .hrtk-bedrooms__body, .hrtk-bedrooms__title, .hrtk-bedrooms__beds (with .hrtk-bedrooms__bed and .hrtk-bedrooms__bed-icon), .hrtk-bedrooms__details
Lightbox: .hrtk-bedrooms__lightbox (with [open] state), .hrtk-bedrooms__figure, .hrtk-bedrooms__lightbox-img, .hrtk-bedrooms__caption

Guest review form #

The standalone “leave a review” page guests reach from review request emails. Ordinary CSS applies here.

Containers: .hrtk-rs-page, .hrtk-rs-card
Children: .hrtk-rs-header, .hrtk-rs-brand, .hrtk-rs-logo, .hrtk-rs-property-hero (with -image, -text, -title, -location), .hrtk-rs-form, .hrtk-rs-field, .hrtk-rs-field-label, .hrtk-rs-field-hint, .hrtk-rs-counter, .hrtk-rs-cta-google

Appendix: Skin Designer variables #

All prefixed --hrtk-skin-, set from the Skin Designer and overridable at :root:

Colors: -color-primary, -color-primary-hover, -color-on-primary, -color-text, -color-muted, -color-surface, -color-border, -color-divider, -color-card-price
Typography: -font-family, -font-family-title, -font-size-input, -font-size-label, -font-size-card-title, -font-size-card-subtitle, -font-size-card-price, -font-size-secondary-meta, -text-transform-title
Search bar: -color-searchbar-submit-bg, -color-searchbar-submit-hover, -color-searchbar-submit-text, -color-searchbar-filters-bg, -color-searchbar-filters-hover, -color-searchbar-filters-text, -shadow-searchbar, -searchbar-floating-max-width, -submit-size
Inputs: -color-bg-input, -radius-input, -space-field-x, -space-field-y
Cards: -radius-card, -shadow-card, -radius-slideshow, -card-dotnav-size, -space-card-body-y, -space-card-body-x, -space-card-meta-gap, -space-card-image-mb, -card-secondary-meta-width, -card-icon-size
Load More button: -color-card-load-more-bg, -color-card-load-more-hover, -color-card-load-more-text, -radius-card-load-more. Unset, these fall back to the global primary color and button radius.
Misc: -radius-button, -radius-pill, -radius-modal, -shadow-modal

More styling references #

Machine-readable version: all four styling references are also published as a single plain-text file at homerunner.io/llms-styling.txt. Point an AI assistant at that URL to give it the entire styling surface in one fetch, instead of pasting in each article separately.

Still stuck? How can we help?

Updated on August 19, 2026