---
title: Conversion Kit Styling Reference
description: "Every guest-facing Conversion Kit component can be restyled to match your site. This page is the reference for doing it: the color settings each module exposes, the CSS variables you can set, and the class names to target. Like the…"
url: "https://homerunner.io/docs/conversion-kit-styling-reference/"
updated: "2026-10-20"
category: Getting Started
---

# Conversion Kit Styling Reference

Every guest-facing Conversion Kit component can be restyled to match your site. This page is the reference for doing it: the color settings each module exposes, the CSS variables you can set, and the class names to target. 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.

Put your rules in **Appearance > Customize > Additional CSS** or a snippets plugin such as WPCode.

## Protected styling, and what it means for your CSS

Some Conversion Kit modules ship with protected styling: their rules are deliberately weighted so a host theme's CSS can't accidentally break them. The same protection means your own plain selectors won't override them either. For these modules, restyle through their settings and CSS variables first, and when you do write a direct rule against their classes, add `!important`:

**Protected modules:** Guest Menu, Cart Abandonment reminder, the CTA stack, Side Panel wishlist drawer, Split Cost Calculator, Price Drop Alerts, Contact Form, Booking Reminder, Trip Planner, Compare Homes.

**Standard modules** (normal CSS, plain overrides work): Rate Comparison, Promo Bar, Property Finder, Trip Builder, Trip Page, Wishlist heart and page, Guest Portal, Marketing Cards, Review Insights, Vibe Profile, Booking Preloader, Availability Watchers.

A few standard modules use `!important` internally on specific properties (Rate Comparison and the Wishlist page most of all). If an override doesn't take there, matching `!important` is the fix.

## Color settings in the admin

Four modules have a color picker in their settings, and that is the first place to change their accent color:

- **Cart Abandonment > Button Color** sets the reminder card's CTA and icon tint.
- **Price Drop Alerts > Button Color** sets the trigger and modal accent.
- **Side Panel > Heart Color** sets the wishlist heart fill.
- **Trip Planner > Accent Color** sets the accent across the wizard, the results, and the plan email.

When one of these fields is filled in, its value wins over CSS you write for the matching variable. Change the setting rather than fighting it; if you must override from CSS anyway, use `!important`.

## Theming variables

Many modules read their colors and dimensions from CSS custom properties with sensible defaults. Set them from your own CSS in a `:root` rule and the module picks them up. Variables can be added or renamed as modules evolve, so re-check this page after major updates.

- Cart Abandonment: `--hrck-cart-accent`
- Price Drop Alerts: `--hrck-price-alerts-color`
- Side Panel wishlist heart: `--hrck-side-panel-heart-color`
- Split Cost Calculator: `--hrck-sc-accent`, `--hrck-sc-accent-hover`, `--hrck-sc-accent-light`, `--hrck-sc-amount`, `--hrck-sc-label`, `--hrck-sc-divider`, `--hrck-sc-family-bg`, `--hrck-sc-warning`
- Contact Form: `--hrck-cf-accent`, `--hrck-cf-accent-hover`, `--hrck-cf-text`, `--hrck-cf-label`, `--hrck-cf-border`, `--hrck-cf-error`, `--hrck-cf-success`, `--hrck-cf-bg`, `--hrck-cf-field-bg`
- Booking Reminder: `--hrck-br-accent`, `--hrck-br-accent-hover`, `--hrck-br-text`, `--hrck-br-label`, `--hrck-br-border`, `--hrck-br-error`, `--hrck-br-success`, `--hrck-br-bg`, `--hrck-br-field-bg`, `--hrck-br-outline`
- Rate Comparison: `--hrck-header-bg`, `--hrck-savings-color`, `--hrck-highlight-color`, `--hrck-diff-color`, `--hrck-font-direct`, `--hrck-font-saving`
- Guest Portal: `--hrck-portal-canvas`, `--hrck-portal-surface`, `--hrck-portal-text`, `--hrck-portal-text-secondary`, `--hrck-portal-text-tertiary`, `--hrck-portal-accent`, `--hrck-portal-accent-hover`, `--hrck-portal-border`, `--hrck-portal-border-light`, `--hrck-portal-success`, `--hrck-portal-success-bg`, `--hrck-portal-error`, `--hrck-portal-error-bg`, `--hrck-portal-shadow`, `--hrck-portal-shadow-hover`, `--hrck-portal-radius`, `--hrck-portal-font-display`, `--hrck-portal-font-body`
- Trip Builder and Trip Page: `--hrck-tb-accent`, `--hrck-tb-accent-strong`, `--hrck-tb-accent-soft`, `--hrck-tb-ring`, `--hrck-tb-ink`, `--hrck-tb-muted`, `--hrck-tb-faint`, `--hrck-tb-line`, `--hrck-tb-line-soft`, `--hrck-tb-radius-card`, `--hrck-tb-radius-control`, `--hrck-tb-shadow-card`, `--hrck-tb-shadow-pop`, `--hrck-tb-ease`
- Property Finder: `--hrck-pf-bg`, `--hrck-pf-focus-bg`, `--hrck-pf-border`, `--hrck-pf-text`, `--hrck-pf-placeholder`, `--hrck-pf-icon`, `--hrck-pf-hover-bg`, `--hrck-pf-hover-text`, `--hrck-pf-radius`, `--hrck-pf-max-width`, `--hrck-pf-max-height`
- Trip Planner: `--hrck-tp-accent` follows the **Accent Color** setting and `--hrck-tp-display-font` follows the **Display Font** setting, so change those two in the settings panel, not from CSS. The other tokens live on the `.hrck-tp` root and change with the **Skin** setting: `--hrck-tp-accent-ink`, `--hrck-tp-accent-soft`, `--hrck-tp-accent-line`, `--hrck-tp-ink`, `--hrck-tp-muted`, `--hrck-tp-border`, `--hrck-tp-bg`, `--hrck-tp-surface`, `--hrck-tp-surface-soft`, `--hrck-tp-error`, `--hrck-tp-error-soft`, `--hrck-tp-band`, `--hrck-tp-band-ink`, `--hrck-tp-band-muted`, `--hrck-tp-band-line`, `--hrck-tp-band-text`, `--hrck-tp-subtitle`, `--hrck-tp-radius`, `--hrck-tp-radius-sm`, `--hrck-tp-shadow`, `--hrck-tp-shadow-lift`, `--hrck-tp-shadow-pop`. The soft and line accent tints are derived from the accent automatically. Because Trip Planner is protected, setting one of these tokens from your own CSS needs `!important` on the `.hrck-tp` root.
- Compare Homes: no public variables. The accent follows the module's **Accent color** setting, so change it there, not from CSS. Its other `--hrck-ch-*` values are internal and are declared again on each of its parts, so a `:root` rule does not reach them.
- Booking Preloader (skeleton shown while the booking component loads): `--hrck-widget-padding`, `--hrck-skel`

---

## Protected modules

### Guest Menu

Pill icon button, dropdown, sign-in modal, and toast, rendered inside your theme's header nav.

- Containers: `.hrck-guest-menu`, `.hrck-guest-modal`, `.hrck-guest-toast`
- Children: `.hrck-guest-menu-button`, `.hrck-guest-menu-dropdown`, `.hrck-guest-menu-item`, `.hrck-guest-menu-account`, `.hrck-guest-modal-dialog`

### Cart Abandonment reminder

Fixed bottom-overlay card reminding a guest about their in-progress booking.

- Container: `.hrck-cart-reminder` (states: `.hrck-cart-reminder--visible`, `--linked`, `--modal-hidden`)
- Children: `.hrck-cart-reminder__inner`, `.hrck-cart-reminder__content`, `.hrck-cart-reminder__cta`, `.hrck-cart-reminder__dismiss`, `.hrck-cart-reminder__media`, `.hrck-cart-reminder__message`

### CTA stack

Layout coordinator that stacks the other tools' floating triggers; it owns positioning only.

- Container: `.hrck-cta-stack` (`--desktop` / `--mobile` variants)
- Item wrapper: `.hrck-cta-item` (visible state: `.hrck-cta-visible`)

### Side Panel wishlist drawer

Saved and recently-viewed properties in a slide-out drawer.

- Containers: `.hrck-side-panel-tab`, `.hrck-side-panel`, `.hrck-side-panel-backdrop`
- Children: `.hrck-panel-card`, `.hrck-panel-card-title`, `.hrck-panel-card-price`, `.hrck-panel-empty`, `.hrck-panel-wishlist-btn`

### Split Cost Calculator

Trigger plus modal for splitting a trip's cost across a group.

- Containers: `.hrck-split-cost-trigger`, `.hrck-sc-modal` (open state: `.hrck-sc-modal--open`)
- Children: `.hrck-sc-family-card`, `.hrck-sc-family-header`, `.hrck-sc-family-stepper`, `.hrck-sc-bedroom-warning`

### Price Drop Alerts

Trigger plus modal where guests subscribe to price-drop emails.

- Containers: `.hrck-pa-cta-container`, the modal `#hrck-price-alerts-modal`
- Children: `.hrck-pa-cta-btn`, `.hrck-pa-modal`, `.hrck-pa-progress`, `.hrck-pa-consent-label`

### Contact Form

Trigger plus modal contact form.

- Containers: `.hrck-contact-trigger`, `.hrck-cf-modal` (open state: `.hrck-cf-modal--open`)
- Children: `.hrck-cf-field`, `.hrck-cf-modal-header`, `.hrck-cf-progress-bar`, `.hrck-cf-confirmation`
- The module's settings also include a Button CSS field for custom trigger styling; rules you enter there need `!important` to take effect.

### Booking Reminder

Trigger plus modal for "remind me later" booking capture.

- Containers: `.hrck-br-trigger`, `.hrck-br-modal` (open state: `.hrck-br-modal--open`)
- Children: `.hrck-br-field`, `.hrck-br-modal-header`, `.hrck-br-disclaimer`, `.hrck-br-confirmation`

### Trip Planner

The three-step itinerary wizard, its results view with the email gate, and the standalone plan page a guest reaches from the plan email. Everything mounts inside one `.hrck-tp` root. Start with the settings: **Skin** (Classic or Editorial), **Accent Color**, and **Display Font** cover most restyling. The module's own rules use no `!important`, but they are protected, so a direct rule against these classes needs `!important` like the other protected modules.

- Container: `.hrck-tp` (Editorial skin: `.hrck-tp[data-skin="editorial"]`)
- Wizard: `.hrck-tp-wizard`, `.hrck-tp-head`, `.hrck-tp-progress`, `.hrck-tp-bar` (with `__fill`), `.hrck-tp-step` (with `__actions`, `__hint`), `.hrck-tp-fields`, `.hrck-tp-fieldbtn` (with `--dates`, `--guests`, `__trigger`, `__value`), `.hrck-tp-seg`, `.hrck-tp-radiocard` (with `--icon`, `--budget`), `.hrck-tp-chip` and `.hrck-tp-chips`, `.hrck-tp-btn` (with `--primary`, `--secondary`, `--ghost`), `.hrck-tp-error`
- Date and guest pickers: `.hrck-tp-dp` (with `__month`, `__day`, `__day--checkin`, `__day--checkout`, `__day--in-range`), `.hrck-tp-gp` (with `__row`, `__stepper`, `__done`)
- Results: `.hrck-tp-results`, `.hrck-tp-band` (the header band), `.hrck-tp-highlights`, `.hrck-tp-property` (the matched home), `.hrck-tp-timeline`, `.hrck-tp-day` (with `--locked`, `__card`, `__theme`, `__swap`), `.hrck-tp-actionbar`
- Other homes: `.hrck-tp-options` (the "Other homes that fit your group" list), `.hrck-tp-home` (one row), `.hrck-tp-compare-bar`, `.hrck-tp-compare` (the side-by-side view)
- Email gate and confirmation: `.hrck-tp-gate`, `.hrck-tp-confirm`, `.hrck-tp-share`
- Standalone plan page: `.hrck-tp-plan-page`, `.hrck-tp-plan-body` (with `--editorial` on the page body), `.hrck-tp-topbar`, `.hrck-tp-doc`, `.hrck-tp-foot`

### Compare Homes

The **Compare** toggle, the **+ Compare** chip and picked outline on each home card, the selection tray, and the side-by-side comparison table. Its pieces sit inside your Explorer cards and results header and on top of the page, so each one is protected on its own. Start with the settings: **Accent color**, the button text, and how many homes a guest can compare. A direct rule against these classes needs `!important` like the other protected modules.

- Card parts: `.hrck-ch-pick` (the chip, with `__add`, `__added`, `__face`), `.hrck-ch-ring` (the outline on a picked card)
- Toggle: `.hrck-ch-entry` (with `--inline` in the results header and `--pill` for the floating button), `.hrck-ch-switch` (with `__box`, `__track`) for the **Show only differences** switch
- Tray: `.hrck-ch-tray` (with `__lead`, `__count`, `__slots`, `__actions`, `__open`, `__clear`), `.hrck-ch-slot` (one picked home, with `__thumb`, `__name`, `__remove`)
- Comparison panel: `.hrck-ch-modal` (with `__backdrop`, `__panel`, `__head`, `__title`, `__share`, `__status`, `__close`), `.hrck-ch-modal-open` (on the page while the panel is open)
- Table: `.hrck-ch-table`, `.hrck-ch-tr`, `.hrck-ch-th` (with `__media`, `__name`, `__remove`), `.hrck-ch-td` (with `--num`), `.hrck-ch-price` (with `__value`, `__note`)
- Buttons: `.hrck-ch-btn` (with `--primary`, `--ghost`)

---

## Standard modules

### Rate Comparison

OTA price comparison badge and modal near the booking component, with desktop, mobile, and sticky variants.

- Containers: `.hrck-rate-comparison-wrapper`, `.hrck-rate-comparison`; badge variants `.hrck-desktop-badge`, `.hrck-mobile-badge`
- Children: `.hrck-best-price`, `.hrck-direct-container`, `.hrck-collapsed-compare`, `.hrck-header`
- Uses `!important` internally on several properties; match it when an override doesn't take.

### Promo Bar

Top or bottom announcement bar with countdown.

- Container: `.hrck-promo-bar` (`--top` / `--bottom` / `--idle`)
- Children: `.hrck-promo-bar__headline`, `.hrck-promo-bar__cta`, `.hrck-promo-bar__countdown-digits`, `.hrck-promo-bar__dismiss`

### Property Finder

Property search box with autocomplete dropdown.

- Container: `.hrck-pf-wrapper`
- Children: `.hrck-pf-input`, `.hrck-pf-dropdown`, `.hrck-pf-option`

### Trip Builder (guest component)

Bundle-builder component with compare bar and modal. The wizard automatically detects a fixed theme header and adds clearance so it doesn't cover the page title; no setting needed.

- Containers: `.hrck-tb-guest`, `.hrck-tb-modal`, `.hrck-tb-compare-bar`
- Children: `.hrck-tb-bundle`, `.hrck-tb-bundle__header`, `.hrck-tb-btn--primary`, `.hrck-tb-modal__panel`
- Group stay inquiry form (inside `.hrck-tb-modal`): `.hrck-tb-inquiry__form`, `.hrck-tb-inquiry__grid`, `.hrck-tb-inquiry__field`, `.hrck-tb-inquiry__actions`, `.hrck-tb-inquiry__done`
- Explorer group-stays banner: `.hrck-tb-banner`, `.hrck-tb-banner__text`, `.hrck-tb-banner__heading`, `.hrck-tb-banner__body`, `.hrck-tb-banner__cta`, `.hrck-tb-banner__dismiss`. The banner and the short group-stays note that appears inside guest pickers and the booking widget are protected, so your own plain selectors will not override them; add `!important` to a direct rule. They have no theming variables.

### Trip Page

Post-booking trip management cards.

- Container: `.hrck-trip-card`
- Children: `.hrck-trip-card__body`, `.hrck-trip-card__price`, `.hrck-trip-card__book-btn`, `.hrck-trip-card__booked-check`

### Wishlist heart

The save/heart toggle on property cards.

- Containers: `.hrck-wishlist-heart`, `.hrck-wishlist-save`
- States: `.hrck-heart-active`, `.hrck-heart-animating`

### Wishlist page

Full saved-properties grid with notes and voting.

- Container: `.hrck-wishlist-page`
- Children: `.hrck-wishlist-grid`, `.hrck-wishlist-card`, `.hrck-wishlist-toolbar`, `.hrck-inline-note`, `.hrck-wishlist-voting`
- Uses `!important` internally on several properties.

### Guest Portal

The signed-in guest account and alerts dashboard.

- Container: `.hrck-portal` (`--sign-in` variant)
- Children: `.hrck-portal-card`, `.hrck-portal-btn`, `.hrck-pa-row`, `.hrck-pa-property`

### Marketing Cards

Promotional banner and CTA blocks placed via shortcode or block.

- Container: `.hrck-marketing-card`
- Children: `.hrck-mc-media`, `.hrck-mc-title`, `.hrck-mc-cta`, `.hrck-mc-eyebrow`

### Review Insights

Trust badge, FAQ accordion, review summary, and "best for" tags.

- Independent components rather than one container: `.hrck-ri-trust-badge`, `.hrck-ri-faq`, `.hrck-ri-best-for`, `.hrck-ri-callout-pills`, `.hrck-ri-email-review`

### Vibe Profile

Full-screen swipe quiz for guest preference matching.

- Container: `.hrck-vibe-card`
- Children: `.hrck-vibe-btn-like`, `.hrck-vibe-btn-skip`, `.hrck-vibe-card-overlay`, `.hrck-vibe-complete`

### Booking Preloader

Skeleton shimmer shown while the HomeRunner booking component loads. It styles the booking component's own markup, so its theming surface is the two variables listed above (`--hrck-widget-padding`, `--hrck-skel`).

### Availability Watchers

Card on the property page where a guest can leave an email to be watched against a date range's availability, with its own resolved and error states once the watch is set.

- Container: `.hrck-watcher-card`
- Children: `.hrck-watcher-lead`, `.hrck-watcher-form`, `.hrck-watcher-email`, `.hrck-watcher-note`, `.hrck-watcher-msg` (error state: `.hrck-watcher-msg-err`), `.hrck-watcher-resolved`
- No CSS variables yet; this module isn't in the isolation/armor build, so it's plain CSS and normal overrides work without `!important`.

---

## More styling references

- [HomeRunner plugin: CSS Class Reference](https://homerunner.io/docs/css-class-reference/)
- [Toolkit Styling Reference](https://homerunner.io/docs/toolkit-styling-reference/)
- [AI Concierge: Appearance and Theming](https://homerunner.io/docs/ai-concierge-appearance/)

**Machine-readable version:** all four styling references are also published as a single plain-text file at [homerunner.io/llms-styling.txt](https://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.