Branding

The widget lives in its own Shadow DOM: your site's CSS cannot break it, and its CSS cannot touch your site. To make it look like yours, use one of three levels. Each builds on the previous one.

Level 1 — settingsCopy Anchor Link

Set these in the dashboard under Appearance, with a live preview of the chat, the results and the button. Colours are hex values like #1d4ed8.

Level 2 — CSS variablesCopy Anchor Link

Override any of these variables from your own stylesheet. No !important is needed: your rules win over the widget's defaults.

The widget has three hosts on your page: [data-lockstock-root] holds suggestions, results, the full-screen search layer and the chat; [data-lockstock-launcher] is the chat button; lockstock-search is the embedded search box. Set brand variables on all three in one rule. Suggestions and results under an embedded box open in [data-lockstock-root], so a colour set only on lockstock-search would leave them in the old one.

[data-lockstock-root],
[data-lockstock-launcher],
lockstock-search {
  --lockstock-accent: #0f766e;
  --lockstock-accent-foreground: #ffffff;
}

/* Lift the button above a cookie banner */
[data-lockstock-launcher] {
  --lockstock-launcher-y: 96px;
}

These names are a stable contract: we may add variables, but renaming or removing one is announced in advance.

Level 3 — custom CSSCopy Anchor Link

customCss is applied last inside the widget's Shadow DOM — suggestions, results, the full-screen layers, the chat and every embedded search box — so it can restyle anything there. It does not reach the chat button: style that with levels 1 and 2. Limits: up to 20,000 characters and no @import. Invalid rules are ignored by the browser.

Select elements by these attributes. They are a stable contract, like the variables; class names and the rest of the markup are not.

/* Square product cards with a stronger border in results */
[data-lockstock-results] [data-lockstock-product] {
  border-radius: 0;
  border-color: var(--lockstock-foreground);
}

/* Hide the chips the AI added on its own */
[data-lockstock-chip="inferred"] {
  display: none;
}