--- title: "Toolkit: Styling Reference" description: "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…" url: "https://homerunner.io/docs/toolkit-styling-reference/" updated: "2026-10-23" category: "Branding & Conversion" --- # 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](https://homerunner.io/docs/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. Before any of that, set the **site brand palette** on the Toolkit Settings tab: one accent color, one ink color, and a corner radius that every module reads as its default wherever its own color is left at stock. Details in [Brand Palette](https://homerunner.io/docs/toolkit-brand-palette/). ## 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. Twelve modules expose a documented set of theming variables as the supported way through: **Searchbar Pro**, **Destination Filter**, **Destination Search**, **Property Page Section Nav**, **Photo Gallery**, **Travel Protection**, **Add-On Showcase**, **Review Showcase**, **Keyword Search**, **Local Guide**, **Tier Rating**, and **Card Rating**. Set the variables with an ordinary rule and they win, no `!important` needed (Local Guide is the one exception, see its section below; Tier Rating tints are the other, see its section below): `.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; } .hrtk-tp { --hrtk-tp-accent: #0a7d4f; --hrtk-tp-selected: #eef6f2; } .hrtk-rv { --hrtk-rv-star: #0a7d4f; --hrtk-rv-radius: 6px; } :root { --hrtk-tier-radius: 6px; --hrtk-tier-star: #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, Original Total, Rate Plan Control, 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. Five modules run on ordinary CSS with no protection, so a plain selector already wins with no `!important`: the mobile map dock, the guest review pages, the Reviews Page landing page, the AI-Ready guest entry point, and Property Actions. ### 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` - Sticky bar top offset (set via the module's **Sticky bar top offset** admin field, in px, default 0): `--hrtk-sbp-nav-offset` pushes the pinned bar down so a sticky site navbar doesn't cover it. It's managed by the plugin rather than meant for direct CSS overrides, but it's a real custom property, so a more specific rule still wins if you need to fine-tune the pinned position further. - Sticky bar maximum width (set via the module's **Sticky bar maximum width** admin field, in px, default 0): `--hrtk-sbp-sticky-max-width` caps the width of the expanded homepage-style bar once it pins, replacing the 890px default. It is written inline on the bar's wrapper only when the setting is above 0, so set it in the settings panel rather than from CSS. On the results-page bar the plugin applies the cap in script instead of through this property. - 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. The browse-by-resort list and the phone sheet added in 3.340 read these same variables, so one palette covers the field, the results, the list and the sheet. Defaults in parentheses. With `sheet="phone"`, the search is lifted out of its place on the page while the sheet is open and placed inside a full-screen wrapper, `.hrtk-dsearch-sheet`, at the end of the page, then put back when the sheet closes. The wrapper is protected like the component and paints its background from `--hrtk-dsearch-surface`. Variables declared on `.hrtk-dsearch` itself or on `:root` follow the search into the sheet; variables declared on a parent of its original placement (a hero section, for example) do not, so put sheet-facing overrides on `:root` or on `.hrtk-dsearch`. - `--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) - `--hrtk-dsearch-heading-h` (31px), the sticky offset for the resort headers in the browse list; the script measures the heading band and sets it, so treat it as read-only ## 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-main-share` (0.375), `--hrtk-pg-gap` (3px), `--hrtk-pg-radius` (0px) carry the **Large photo width**, **Space between photos**, and **Corner radius** settings. The module writes them inline on `#pg-wrap` whenever a setting differs from its default, so set them in the settings panel, not from CSS. `--hrtk-pg-main-share` is the large photo's unitless share of the hero width. - `--hrtk-pg-btn-bg`, `--hrtk-pg-btn-text`, `--hrtk-pg-btn-border`, `--hrtk-pg-btn-hover`, `--hrtk-pg-btn-radius` (8px) style the **Show all photos** and **3D Tour** buttons. The module writes them inline on `#pg-wrap` only for values you set under **Button style** in the settings panel: with a background color it also writes a darker hover shade, plus a text and outline color when you left those empty. Without them the buttons stay white with dark text. Set them in the settings panel, not from CSS. - `--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. ## Travel Protection variables Set on `.hrtk-tp`, the section's own root. Defaults in parentheses. - `--hrtk-tp-accent` (#184b49) - selected-card border, price, and link color - `--hrtk-tp-border` (#d9dfe3) - unselected-card border color - `--hrtk-tp-selected` (#f4f8f7) - background of the selected plan card --- ## Add-On Showcase variables Set on `.hrtk-aos`, the section's own root. Defaults in parentheses. - `--hrtk-aos-accent` (#184b49) - selected-card border, price, Add button and focus ring color - `--hrtk-aos-border` (#d9dfe3) - unselected-card border color - `--hrtk-aos-selected` (#f4f8f7) - background of a selected card, the button hover state and the sidebar summary - `--hrtk-aos-muted` (#58656c) - introduction, category headings, descriptions, badges and the property-page teaser - `--hrtk-aos-warn` (#8a3b12) - error and warning notices --- ## Reviews Page variables Set on `.hrtk-reviews-page`. Defaults in parentheses. Fonts and spacing inherit your theme; color runs through these variables instead. - `--hrtk-rp-accent` (#16242f) is written inline from the module's **Accent color** setting when you set one; the default applies while that setting is blank. - `--hrtk-rp-sidebar-offset` (0px) is written inline from the module's **Sidebar top offset** setting when it is above zero. With the setting left at 0, a small script measures your pinned theme header and writes the same variable for you on desktop; a number you enter always wins over the measurement. The desktop sticky rail adds it to its top position and subtracts it from its maximum height. - `--hrtk-rp-accent-contrast` (#ffffff), `--hrtk-rp-star` (#e9a13b) - `--hrtk-rp-line` (rgba(128, 128, 128, 0.22)) and `--hrtk-rp-soft` (rgba(128, 128, 128, 0.07)) are a neutral gray by default, but in modern browsers they instead tint from `--hrtk-rp-accent` (at 18% and 5% opacity), so a custom accent color carries through to borders and backgrounds too. --- ## Review Showcase variables Set these on `.hrtk-rv`, the wrapper around every `[homerunner-reviews]` block. Defaults in parentheses. Fonts and text color inherit your theme. Ordinary CSS applies, no `!important` needed. - `--hrtk-rv-star` (#e9a13b) is the star color. The shortcode's `star_color` option writes this variable inline on that block, so set the color there when you want one block to differ. - `--hrtk-rv-gap` (1.25rem) is the space between cards, and `--hrtk-rv-pad` (1.35rem) is the padding inside a card. - `--hrtk-rv-radius` (14px) is the card corner radius. It also rounds the property image. - `--hrtk-rv-line` (rgba(128, 128, 128, 0.26)) colors borders, empty stars, and quiet rules. `--hrtk-rv-soft` (rgba(128, 128, 128, 0.08)) fills the image placeholder and the host reply. - `--hrtk-rv-card-bg` is the card background. It is transparent unless the card style is Shadow, where it is white. - The shortcode writes `--hrtk-rv-cols`, `--hrtk-rv-cols-md`, `--hrtk-rv-cols-sm`, `--hrtk-rv-lines`, and `--hrtk-rv-ratio` inline from its `columns`, `columns_tablet`, `columns_mobile`, `lines`, and `image_ratio` options, and `--hrtk-rv-n` is worked out from them. Change those options on the shortcode rather than overriding the variables. --- ## Keyword Search variables Keyword Search adds the **Find a feature** control to your search area. Its colors come from the surrounding text and your Skin Designer accent, so it follows light and dark sections on its own. Ordinary CSS applies, no `!important` needed. - `--hrtk-kw-accent` sets the accent. It is set on the search area when your site resolves one; otherwise the control uses your skin's primary color, then the text color. - `--hrtk-kw-surface` (the browser's Canvas color) and `--hrtk-kw-ink` (CanvasText) color the suggestions panel and the card badge. These two sit on top of other content, so they need an opaque background that a mix of the text color cannot give. - `--hrtk-kw-entry-w` (132px) and `--hrtk-kw-term-w` (300px) are the widths of the control while it sits in the quick filter chip row, and the script adjusts both as the control opens. Leave them alone. - `--hrtk-kw-nearby` (#6b7280) sets the badge color on a nearby match, a feature that is near the home rather than at it. The badge keeps its place and swaps the accent for this neutral tone. - `--hrtk-kw-a` and `--hrtk-kw-fade` are internal. Leave them alone. --- ## Local Guide variables Local Guide is the places guide page and the Nearby stack on property pages. Its rules are protected, so class rules need `!important`. The theming variables are the supported way to restyle it. Defaults in parentheses. - `--hrtk-local-guide-accent` is the accent for chips, links, buttons, and pins. By default it follows your Searchbar Pro accent when one is set, and falls back to a deep teal (#1f4e5f). `--hrtk-local-guide-accent-soft` is a light tint of the accent, worked out for you. - To change the accent, set `--hrtk-local-guide-accent-site` on `:root` or any wrapper. It works as an ordinary rule with no `!important`, and it leaves Searchbar Pro alone. - `--hrtk-local-guide-text` (#1f2937) and `--hrtk-local-guide-muted` (#6b7280) are the text colors. - `--hrtk-local-guide-surface` (#ffffff) and `--hrtk-local-guide-surface-alt` (#f5f5f4) are the card and panel backgrounds. `--hrtk-local-guide-border` (#e5e7eb) colors borders. - `--hrtk-local-guide-radius` (12px) is the card corner radius, and `--hrtk-local-guide-gap` (20px) is the space between cards. - `--hrtk-local-guide-font` (inherit) sets the font family. The guide uses your theme's font until you set it. - `--hrtk-local-guide-eyebrow-size` (11px) and `--hrtk-local-guide-eyebrow-track` (0.08em) set the size and letter spacing of the small category labels. - `--hrtk-local-guide-map-height` (320px) is the height of the map on small screens. From a wide screen the map sits beside the list and stays in view as you scroll. - `--hrtk-local-guide-sticky-top` (24px) is how far from the top of the screen the map stops while you scroll. Raise it if a sticky site header covers the map. - `--hrtk-local-guide-pin-home`, `--hrtk-local-guide-pin-partner` (both follow the accent), and `--hrtk-local-guide-pin-place` (#9ca3af) color the map pins for your homes, perk places, and other places. The guide sets its own variables on each guide it prints, so an override on `.hrtk-local-guide` needs `!important` to win. The one that does not is `--hrtk-local-guide-accent-site`. --- ## Card Rating variables Card Rating is the rating line on results cards (under the home name or on the location line) and in the map popup. Its rules are protected, so class rules need `!important`. The theming variables are the supported way to restyle it. Set them on `:root`. Defaults in parentheses. - `--hrtk-card-rating-star` (#f0b429) colors the star, and `--hrtk-card-rating-size` (13px) is the text size. Both follow the Hub settings when you change the star color or text size there. - `--hrtk-card-rating-fg` (inherited) is the color of the average, and `--hrtk-card-rating-muted` (a 60% black) is the color of the count in parentheses. --- ## Tier Rating variables Tier Rating is the tier badge on results cards (under the home name or over the photo) and the property page, and its info popover. Its rules are protected, so class rules need `!important`. The theming variables are the supported way to restyle it. Set them on `:root`, because the popover is attached to the page body rather than to the badge. Defaults in parentheses. - `--hrtk-tier-radius` (999px) is the badge corner radius, and `--hrtk-tier-font-size` (13px) is the badge text size. `--hrtk-tier-font-size-mobile` (12px) takes over on screens up to 480px wide. - `--hrtk-tier-star` (#c9a227) colors the stars, and `--hrtk-tier-image-size` (18px) sets the width and height of a tier image. - `--hrtk-tier-image-badge-size` (64px) is the height of a tier image shown alone, with no pill (the **tier image alone** badge option). Over the photo (**Top-left over the photo** position) the default is 72px, and `--hrtk-tier-image-badge-size-mobile` (56px) takes over on screens up to 480px wide. - `--hrtk-tier-focus` (#1f1f1f) colors the keyboard focus outline on the badge. - `--hrtk-tier-popover-bg` (#fff) and `--hrtk-tier-popover-fg` (#1f1f1f) are the popover background and text colors. - `--hrtk-tier-bg` (#f6f4ef), `--hrtk-tier-fg` (#1f1f1f) and `--hrtk-tier-border` (a light grey) color an untinted badge. A tier with a **Tint** set in the Toolkit Hub gets its own `--hrtk-tier-bg`, `--hrtk-tier-fg` and `--hrtk-tier-border` on its badge, and the text color is chosen for contrast. An override of those three on `:root` does not reach a tinted tier, so change the tint in the Hub instead. --- ## 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`, `.hrtk-fs-adjusted-notice` - 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](/docs/toolkit-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` ### Calendar Hover Tips One-tap "Select `dates`" button the module grafts onto core's own calendar tip bubble (`#homelocal-calendar-tip`), on both the property availability calendar and the Explorer range calendar. - Modifier: `.hrtk-actionable` on the tip bubble when a button is present - Children: `.hrtk-tip-msg`, `.hrtk-tip-apply` ### 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` ### Travel Protection The insurance section [Travel Protection](/docs/toolkit-travel-protection/) inserts after Guest Details on checkout, and its summary line. Protected styling with a variable API (see above), so set the `--hrtk-tp-*` variables for color changes and reach for `!important` only for layout tweaks. - Container: `.hrtk-tp` (with `.hrtk-tp-native` on the original component markup it replaces, hidden when the module is active) - Cards: `.hrtk-tp-fieldset`, `.hrtk-tp-heading`, `.hrtk-tp-introduction`, `.hrtk-tp-cards` (grid), `.hrtk-tp-card` (one plan, with `.is-selected`) - Card content: `.hrtk-tp-input`, `.hrtk-tp-title`, `.hrtk-tp-provider`, `.hrtk-tp-description`, `.hrtk-tp-policy` (the policy link), `.hrtk-tp-price` - Status: `.hrtk-tp-notice` (shown while the quote refreshes), `.hrtk-tp-summary` (compact selected-plan line shown outside the card layout) ### Add-On Showcase The optional-extras cards [Add-On Showcase](/docs/toolkit-add-on-showcase/) places in the checkout's main content. Protected styling with a variable API (see above), so set the `--hrtk-aos-*` variables for color changes and reach for `!important` only for layout tweaks. - Container: `.hrtk-aos` (with `.hrtk-aos-native` on the original add-on markup it replaces, hidden when the module is active) - Heading: `.hrtk-aos-fieldset`, `.hrtk-aos-heading`, `.hrtk-aos-introduction`, `.hrtk-aos-group`, `.hrtk-aos-group-title` - Cards: `.hrtk-aos-cards` (grid), `.hrtk-aos-card` (one add-on, with `.has-image`, `.is-toggle` and `.is-selected`), `.hrtk-aos-thumb`, `.hrtk-aos-body`, `.hrtk-aos-title`, `.hrtk-aos-badge`, `.hrtk-aos-desc` - Price and controls: `.hrtk-aos-side`, `.hrtk-aos-price`, `.hrtk-aos-btn` (the Add button), `.hrtk-aos-stepper`, `.hrtk-aos-step`, `.hrtk-aos-qty`, `.hrtk-aos-more` - Status: `.hrtk-aos-notice`, `.hrtk-aos-recovery`, `.hrtk-aos-sidebar`, `.hrtk-aos-summary` (the selected add-ons shown in the checkout sidebar), `.hrtk-aos-teaser` (the line on the property page) ### 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 component. Protected styling (see the recent-change note above), so rules against these classes need `!important`. - Containers: `.hrtk-ipb` (component 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 component 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) ### Original Total The struck-through total shown beside the discounted total when a promotion, coupon, or stay discount applies. It appears on the booking component's total line and on explorer cards that show full pricing for the searched dates. The figure borrows the typography of the total it sits next to, so its styling is protected; rules against this class need !important. This module has no dedicated theming variables. Class: `.hrtk-ot-was` (the struck-through pre-discount total; by default slightly faded and kept on one line) ### Rate Plan Control The optional info icon and tooltip next to a rate plan name, shown when you've attached an explainer to it (Toolkit Hub → Rate Plan Control → Rate plan overrides). It rides on the booking component's own rate plan markup rather than owning a container of its own, so its styling is protected; rules against these classes need `!important`. The tooltip's arrow position is managed automatically and isn't meant to be set by hand. - Icon: `.hrtk-rpc-info` (the small "i" button next to the rate plan name) - Tooltip: `.hrtk-rpc-tip` (the popover holding your explainer 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. ### Card tags (Label Designer) The tag row lives in the explorer card's type slot, `.hfse-property-types` inside `.hfse-property-meta-primary`; with the own-row setting on, the location (`.hfse-property-locations`) takes the full width and the tag row sits under it. Each pill is `.hrtk-card-tag`, on cards and inside map popups (`.hfse-property-infowindow-body .hrtk-card-tags`). Pill colors, radius and size come from the Card tags section, written into the generated label stylesheet; a theme rule on `.hrtk-card-tag` with higher specificity overrides them. ### 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` - Zoom: `.pg-lightbox-zoom` (the magnifier button in the header, shown only in the single-photo view) and the `.pg-zoomed` state on `.pg-lightbox` while a photo is zoomed in. The zoom button's own rules use `!important`, so restyle it with `!important` too. ### 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-pull`, `--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` ### Review Showcase The `[homerunner-reviews]` block that places guest reviews on any page. Deliberately theme-neutral: your theme's fonts and text color carry through, and the variables above cover the rest. Ordinary CSS applies. - Wrapper: `.hrtk-rv`, with modifiers for the layout (`.hrtk-rv--grid`, `.hrtk-rv--slider`, `.hrtk-rv--list`), the card style (`.hrtk-rv--card-bordered`, `.hrtk-rv--card-shadow`, `.hrtk-rv--card-plain`), the alignment (`.hrtk-rv--align-left`, `.hrtk-rv--align-center`), the image position (`.hrtk-rv--img-top`, `.hrtk-rv--img-left`, `.hrtk-rv--img-right`), and `.hrtk-rv--clamp` when long reviews are shortened. Anything you add in the shortcode's `class` option lands on this wrapper too. - Section: `.hrtk-rv__heading`, `.hrtk-rv__see-all` - Slider: `.hrtk-rv__viewport`, `.hrtk-rv__track`, `.hrtk-rv__controls`, `.hrtk-rv__arrow`, `.hrtk-rv__dots`, `.hrtk-rv__dot` - Card: `.hrtk-rv-card` (with `--linked` when the whole card is a link), `.hrtk-rv-card__inner`, `.hrtk-rv-card__content`, `.hrtk-rv-card__meta`, `.hrtk-rv-card__stars` (with `.hrtk-rv-star` and the filled state `.hrtk-rv-star--full`), `.hrtk-rv-card__author`, `.hrtk-rv-card__date`, `.hrtk-rv-card__channel`, `.hrtk-rv-card__title`, `.hrtk-rv-card__body`, `.hrtk-rv-card__more` (the Read more toggle), `.hrtk-rv-card__reply` (with `.hrtk-rv-card__reply-label`), `.hrtk-rv-card__property` - Property image: `.hrtk-rv-card__media`, `.hrtk-rv-card__cover`, `.hrtk-rv-card__image` ### Keyword Search The **Find a feature** control, its suggestions, and the messages that go with it. Ordinary CSS applies. The Searchbar Pro rules it shares a row with are protected, so keep your overrides for that row on the Searchbar Pro hooks. - Control: `.hrtk-kw-find` (with `.hrtk-kw-find--chips` when it sits in the quick filter chip row), `.hrtk-kw-field`, `.hrtk-kw-input`, `.hrtk-kw-pill`, `.hrtk-kw-pill-label`, `.hrtk-kw-clear`, `.hrtk-kw-spinner` - Suggestions: `.hrtk-kw-suggest`, `.hrtk-kw-suggest-label`, `.hrtk-kw-row`, `.hrtk-kw-term`, `.hrtk-kw-term-n` (the match count on a suggestion), `.hrtk-kw-key` (the Enter hint) - Results: `.hrtk-kw-count-of` (the suffix added to the result count) - Cards: `.hrtk-kw-badge` (with `.hrtk-kw-badge-text` and `.hrtk-kw-badge-tick`), `.hrtk-kw-quote` - Messages: `.hrtk-kw-notice` (with `-title`, `-text`, `-copy`, `-failed`, `-inline`), `.hrtk-kw-retry`, `.hrtk-kw-zero` (the no-results block, with `-title`, `-lede`, `-terms`, `-term`, `-clear`) ### Local Guide The guide page from `[hrtk_local_guide]` and the Nearby stack from `[hrtk_local_guide_nearby]`. Protected: class rules need `!important`. Prefer the variables above. - Root: `.hrtk-local-guide`, with `.hrtk-local-guide--guide` or `.hrtk-local-guide--nearby`, and `.hrtk-local-guide--no-homes` when homes are hidden from the map - Controls: `.hrtk-local-guide__controls`, `.hrtk-local-guide__chips`, `.hrtk-local-guide__toggles`, `.hrtk-local-guide__count`, `.hrtk-local-guide__status` - Layout: `.hrtk-local-guide__layout`, `.hrtk-local-guide__list`, `.hrtk-local-guide__map-wrap`, `.hrtk-local-guide__map` - Groups: `.hrtk-local-guide__group`, `.hrtk-lg-group__heading`, `.hrtk-lg-group__count`, `.hrtk-local-guide__items` - Cards: `.hrtk-local-guide__item` (with `--partner` for a perk place), `.hrtk-local-guide__item-wrap`, `.hrtk-lg-card__media`, `.hrtk-lg-card__img`, `.hrtk-lg-card__placeholder`, `.hrtk-lg-card__body`, `.hrtk-lg-card__eyebrow`, `.hrtk-lg-card__title`, `.hrtk-lg-card__desc`, `.hrtk-lg-card__address`, `.hrtk-lg-card__hours`, `.hrtk-lg-card__perk`, `.hrtk-local-guide__open` - Nearby stack: `.hrtk-local-guide__nearby-heading`, `.hrtk-local-guide__nearby-subheading`, `.hrtk-local-guide__rows`, `.hrtk-local-guide__row` (with `--partner`), `.hrtk-lg-row__media`, `.hrtk-lg-row__img`, `.hrtk-lg-row__body`, `.hrtk-lg-row__title`, `.hrtk-lg-row__meta`, `.hrtk-lg-row__eyebrow`, `.hrtk-lg-row__perk` - Card window: `.hrtk-local-guide__window-overlay`, `.hrtk-local-guide__window`, `.hrtk-local-guide__window-close`, `.hrtk-lg-window__hero`, `.hrtk-lg-window__img`, `.hrtk-lg-window__body`, `.hrtk-lg-window__eyebrow`, `.hrtk-lg-window__title`, `.hrtk-lg-window__meta`, `.hrtk-lg-window__desc`, `.hrtk-lg-window__perk` (with `-eyebrow`, `-title`, `-text`), `.hrtk-lg-window__photos`, `.hrtk-lg-window__photo`, `.hrtk-lg-window__footer`, `.hrtk-lg-window__website` - Actions: `.hrtk-lg-actions`, `.hrtk-lg-actions__primary`, `.hrtk-lg-actions__link`, `.hrtk-lg-form__submit` ### Tier Rating The tier badge on results cards (under the home name or top-left over the photo) and from `[hrtk_tier_rating]` on the property page, and its info popover. Protected: class rules need `!important`. Prefer the variables above. - Containers: `.hrtk-tier` (the badge wrapper, with `.hrtk-tier--card` or `.hrtk-tier--page`, a `.hrtk-tier--` class for each tier, `.hrtk-tier--media` when the badge sits over the photo, and `.hrtk-tier--show-