/*!
Theme Name: CatHive
Theme URI: http://underscores.me/
Author: CatHive
Author URI: https://www.cathive.co.uk
Description: Custom lightweight theme for the CatHive WooCommerce store.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cathive
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

CatHive is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	/* UX Batch B §2 D (2026-10-23): the brand ring, as :focus-visible draws it in Chrome (tokens.css §1.5); Firefox matches
	   -moz-focusring only when focus should be shown (keyboard), and this rule outranked :focus-visible there. */
	outline: 3px solid var(--ch-focus-ring);
	outline-offset: 2px;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: var(--ch-text-body);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: var(--ch-off-white);
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted var(--ch-slate);
	cursor: help;
}

mark,
ins {
	background: color-mix(in srgb, var(--ch-plate-yellow) 25%, transparent);
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: var(--ch-cloud);
}

hr {
	background-color: var(--ch-border-light);
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--ch-link-on-light); /* Underscores' royal blue showed on bare links (UX Batch B) */
}

a:visited {
	color: var(--ch-link-on-light);
}

a:hover,
a:focus,
a:active {
	color: var(--ch-ink);
}

a:focus {
	outline: thin dotted;
}

/* Keyboard focus on links gets the brand ring like every other control (tokens.css :focus-visible): `a:focus` above
   outranked it, so links showed a 1px dotted line (UX build 2026-10-19). */
a:focus-visible {
	outline: 3px solid var(--ch-focus-ring);
	outline-offset: 2px;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: var(--ch-border-light);
	border-radius: 3px;
	background: var(--ch-off-white);
	color: var(--ch-text-body);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: var(--ch-slate);
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: var(--ch-slate);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: var(--ch-text-secondary);
	border: 1px solid var(--ch-border-light);
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: var(--ch-ink);
}

select {
	border: 1px solid var(--ch-border-light);
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px color-mix(in srgb, var(--ch-ink) 20%, transparent);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. The "Menu" toggle and panel are used below 55em (880px), not only
   on phones: the nine-link row is 810px wide (817 in Firefox) plus 48px of
   padding, so below 55em its labels broke onto two lines and below 712px it
   pushed the page sideways (WCAG 1.4.10; 200% zoom on 1280 = 640px). 2026-10-21. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 55em) {

	.menu-toggle {
		display: none;
	}

	/* .toggled too: a menu opened below 55em and then widened (an iPad
	   rotated) shows the normal row, not a stacked list. */
	.main-navigation ul,
	.main-navigation.toggled ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

/* Scoped to <article> — Underscores ships this as bare `.post, .page`,
   but WordPress ALSO puts "page" on <body> via body_class(), so every
   page-type body inherited margin-bottom: 1.5em, painting a 24px
   page-background strip below the footer (owner-flagged; diagnosed via
   DevTools matched-rules, not grep — the selector doesn't LOOK like it
   targets body). */
article.post,
article.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--ch-cloud);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px color-mix(in srgb, var(--ch-ink) 60%, transparent);
	clip: auto !important;
	clip-path: none;
	color: var(--ch-link-on-light);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*--------------------------------------------------------------
# Brand
--------------------------------------------------------------*/

body {
	background: var(--ch-surface-page);
	color: var(--ch-text-body);
	font-family: var(--ch-font-body);
	font-size: var(--ch-step-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ch-font-display);
	font-weight: 700;
	letter-spacing: var(--ch-tracking-display);
}

h1 {
	font-size: var(--ch-step-h1);
	letter-spacing: var(--ch-tracking-display-hero);
}

h2 {
	font-size: var(--ch-step-h2);
}

h3 {
	font-size: var(--ch-step-h3);
}

code,
kbd,
samp,
.ch-mono {
	font-family: var(--ch-font-mono);
	font-weight: 500;
}

a {
	color: var(--ch-link-on-light);
}

a:visited {
	color: var(--ch-link-on-light);
}

a:hover,
a:focus,
a:active {
	color: var(--ch-ink);
}

/* Sections on a dark (Ink) surface: header, hero, footer (§1.1).
   background-color, not the `background` shorthand — the shorthand
   resets background-image to none, which silently killed .ch-hex-bg
   when both classes land on the same element (caught via screenshot:
   the hero's honeycomb texture just wasn't there). */
.ch-on-dark {
	background-color: var(--ch-surface-dark);
	color: var(--ch-text-on-dark);
}

.ch-on-dark a {
	color: var(--ch-link-on-dark);
}

.ch-on-dark a:hover,
.ch-on-dark a:focus,
.ch-on-dark a:active {
	color: var(--ch-catalyst-bright);
}

/* Sticky footer (owner-flagged on the homepage, 2026-07-19): pages
   shorter than the viewport left the page background showing beneath
   the footer. The page wrapper is a full-viewport flex column and the
   main content area absorbs the slack, pinning the footer's Ink to the
   bottom edge on every page. dvh where supported so mobile browser
   chrome doesn't cause overflow; vh fallback. */
#page {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

#page > main {
	flex: 1 0 auto;
}

/* THE content wrapper (2026-07-18 redesign of the old per-page-type
   rules): every page's main content is centred at --ch-max-width while
   <body>, header, footer and the announcement bar span the full
   viewport (their own *-inner containers re-centre their content).
   The front page is the one exception — its hero/finder/trust sections
   are deliberately full-bleed and manage their own inner width.
   Previously WooCommerce pages were constrained on <body> itself
   (squeezing header/footer with the content — owner-flagged), and
   cart/checkout had no wrapper at all, so their <h1> hugged the
   viewport edge while the Blocks content centred itself. */
body:not(.home) .site-main {
	/* width: 100% matters: #page is a flex column (sticky footer), and
	   a flex item with auto side margins SHRINK-WRAPS to fit-content
	   instead of stretching — sparse pages (the login form) collapsed
	   to ~525px by accident until this was pinned down. */
	width: 100%;
	max-width: var(--ch-max-width);
	margin: 0 auto;
	padding: var(--ch-space-4) var(--ch-space-3) var(--ch-space-6);
}

/* Logged-out account pages (login/register/lost-password) are a single
   slim form — a deliberate narrow centred column, heading included.
   The logged-in dashboard keeps the full-width two-column layout. */
body.woocommerce-account:not(.logged-in) .site-main {
	max-width: 34rem;
}

/* …except when the Register column is present (#customer_login only
   renders with woocommerce_enable_myaccount_registration on): two forms
   side by side need room. Lost-password keeps the slim column above. */
body.woocommerce-account:not(.logged-in) .site-main:has(#customer_login) {
	max-width: 64rem;
}

/* reCAPTCHA v3 (Cathive_Recaptcha): the floating bottom-right badge is
   hidden — Google permits this as long as the attribution text is shown
   in the flow, which Cathive_Recaptcha::attribution() renders alongside
   every guarded form. Don't remove one without the other. */
.grecaptcha-badge {
	visibility: hidden;
}

.ch-recaptcha-note {
	font-size: var(--ch-step-small);
	color: var(--ch-slate);
	margin: var(--ch-space-2) 0 0;
}

.ch-recaptcha-note a {
	color: inherit;
}

/**
 * "Browse Help & Advice" disclosure menu on advice child pages
 * (inc/advice-nav.php). Mobile-first: the open panel flows in-page with
 * every section's links visible (no hover on touch). From 48em on
 * hover-capable devices it becomes a floating dropdown whose sections
 * fly their links out to the right on hover/focus.
 */
.ch-advice-nav {
	position: relative;
	width: fit-content;
	margin: 0 0 var(--ch-space-3);
	font-size: var(--ch-step-small);
}

.ch-advice-nav__toggle {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	background: var(--ch-cloud);
	border: 1px solid var(--ch-mist-light);
	border-radius: var(--ch-radius);
	padding: 0.45em 0.9em;
	font-family: var(--ch-font-mono);
	font-weight: 500;
	color: var(--ch-ink);
	user-select: none;
}

.ch-advice-nav__toggle::-webkit-details-marker {
	display: none;
}

/* Chevron that flips when the panel is open. */
.ch-advice-nav__toggle::after {
	content: "";
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid var(--ch-catalyst-deep);
	border-bottom: 2px solid var(--ch-catalyst-deep);
	transform: rotate(45deg) translateY(-15%);
	transition: transform 120ms ease;
}

.ch-advice-nav[open] .ch-advice-nav__toggle::after {
	transform: rotate(225deg) translateY(-15%);
}

.ch-advice-nav[open] .ch-advice-nav__toggle {
	border-color: var(--ch-catalyst-deep);
}

.ch-advice-nav__panel {
	background: var(--ch-off-white);
	border: 1px solid var(--ch-mist-light);
	border-radius: var(--ch-radius);
	padding: var(--ch-space-2);
	margin-top: 0.4rem;
}

.ch-advice-nav__sections,
.ch-advice-nav__pages {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ch-advice-nav__section-label {
	display: block;
	font-family: var(--ch-font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ch-slate);
	padding: 0.5em 0.6em 0.25em;
}

.ch-advice-nav__pages a {
	display: block;
	padding: 0.3em 0.6em;
	color: var(--ch-ink);
	text-decoration: none;
	border-radius: calc(var(--ch-radius) / 2);
}

.ch-advice-nav__pages a:hover,
.ch-advice-nav__pages a:focus {
	background: var(--ch-cloud);
	color: var(--ch-link-on-light);
}

.ch-advice-nav__pages a[aria-current="page"] {
	color: var(--ch-link-on-light);
	font-weight: 600;
}

.ch-advice-nav__all {
	margin: var(--ch-space-1) 0 0;
	padding: 0.35em 0.6em 0.1em;
	border-top: 1px solid var(--ch-mist-light);
}

.ch-advice-nav__all a {
	color: var(--ch-link-on-light);
	text-decoration: none;
}

/* Desktop + a real pointer: floating dropdown with right-hand flyouts. */
@media screen and (min-width: 48em) and (hover: hover) {
	.ch-advice-nav__panel {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 30;
		min-width: 17rem;
		margin-top: 0.35rem;
		box-shadow: 0 10px 28px color-mix(in srgb, var(--ch-ink) 14%, transparent);
	}

	.ch-advice-nav__section {
		position: relative;
	}

	.ch-advice-nav__section-label {
		padding: 0.55em 0.6em;
		cursor: default;
		border-radius: calc(var(--ch-radius) / 2);
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1.5em;
	}

	/* Flyout affordance: small right-pointing chevron. */
	.ch-advice-nav__section-label::after {
		content: "";
		width: 0.45em;
		height: 0.45em;
		border-right: 2px solid var(--ch-slate);
		border-bottom: 2px solid var(--ch-slate);
		transform: rotate(-45deg);
	}

	.ch-advice-nav__section:hover > .ch-advice-nav__section-label,
	.ch-advice-nav__section:focus-within > .ch-advice-nav__section-label {
		background: var(--ch-cloud);
		color: var(--ch-link-on-light);
	}

	.ch-advice-nav__pages {
		display: none;
		position: absolute;
		top: -0.55rem; /* aligns first link with the hovered label */
		left: 100%;
		min-width: 19rem;
		background: var(--ch-off-white);
		border: 1px solid var(--ch-mist-light);
		border-radius: var(--ch-radius);
		padding: var(--ch-space-1);
		box-shadow: 0 10px 28px color-mix(in srgb, var(--ch-ink) 14%, transparent);
	}

	.ch-advice-nav__section:hover > .ch-advice-nav__pages,
	.ch-advice-nav__section:focus-within > .ch-advice-nav__pages {
		display: block;
	}
}

/* WooCommerce "Coming Soon" splash: hide its social-icons + Log in
   cluster (owner request 2026-07-21). The Log in link was also LEAKING
   the hidden login slug (wps-hide-login) to anonymous visitors in its
   redirect URL — so this is security hygiene, not just cosmetics. The
   wrapper class only exists on the splash, so no further scoping is
   needed; !important beats the block-generated layout styles. */
.woocommerce-coming-soon-social-login {
	display: none !important;
}

/* Contact form ([cathive_contact_form] shortcode, Cathive_Contact_Form
   in cathive-core). Same field idiom as the account forms. */
.ch-contact-form {
	max-width: 34rem;
}

.ch-contact-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3em;
}

.ch-contact-form .ch-contact-optional {
	font-weight: 400;
	font-size: var(--ch-step-small);
	color: var(--ch-text-secondary);
}

.ch-contact-form input,
.ch-contact-form textarea {
	width: 100%;
	border: 1px solid var(--ch-mist-light);
	border-radius: var(--ch-radius);
	padding: var(--ch-space-1);
	font-family: var(--ch-font-body);
	font-size: var(--ch-step-body);
}

.ch-contact-form .ch-contact-reg {
	max-width: 12rem;
	font-family: var(--ch-font-mono);
	text-transform: uppercase;
}

.ch-contact-form .ch-contact-order {
	max-width: 12rem;
	font-family: var(--ch-font-mono);
}

.ch-contact-form .ch-contact-submit {
	background: var(--ch-catalyst);
	color: var(--ch-ink);
	border: none;
	border-radius: var(--ch-radius);
	padding: 0.6rem 1.4rem;
	font-weight: 700;
	font-size: var(--ch-step-body);
	cursor: pointer;
}

.ch-contact-form .ch-contact-submit:hover {
	background: var(--ch-catalyst-deep);
	color: var(--ch-off-white);
}

/* Trade-account application (Cathive_Trade_Applications) — reuses the
   contact-form idiom; only the two-up rows and the status panel are new. */
.ch-trade-form h3 {
	margin: var(--ch-space-4) 0 var(--ch-space-2);
	font-size: var(--ch-step-1);
}

.ch-trade-form h3 .ch-contact-optional {
	font-family: var(--ch-font-body);
	font-weight: 400;
}

.ch-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 var(--ch-space-3);
}

@media screen and (max-width: 37.5em) {
	.ch-form-row {
		grid-template-columns: 1fr;
	}
}

.ch-trade-confirm label {
	display: flex;
	gap: var(--ch-space-2);
	align-items: flex-start;
	font-weight: 400;
}

.ch-trade-confirm input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.15em;
	flex: 0 0 auto;
}

/* Trade Account tier table ([cathive_trade_tiers], Cathive_Trade). Each
   tier column carries its own tint and a coloured cap on the header. */
.ch-tiers {
	--ch-tier-trade: var(--ch-catalyst-deep);
	--ch-tier-trade-tint: color-mix(in srgb, var(--ch-catalyst) 7%, transparent);
	--ch-tier-silver: #7D8B86; /* the tiers' own colours, scoped to .ch-tiers (Trade Accounts) */
	--ch-tier-silver-tint: color-mix(in srgb, var(--ch-tier-silver) 8%, transparent);
	--ch-tier-gold: #C98506;
	--ch-tier-gold-tint: color-mix(in srgb, var(--ch-signal-amber) 9%, transparent);
	margin: var(--ch-space-5) 0;
}

.ch-tiers h2 {
	margin-bottom: var(--ch-space-2);
}

.ch-tiers-lead {
	max-width: 46rem;
}

.ch-tiers-wrap {
	margin: var(--ch-space-3) 0 var(--ch-space-2);
	background: var(--ch-surface-card);
	border: 1px solid var(--ch-border-light);
	border-radius: 12px;
	box-shadow: var(--ch-shadow-card);
	overflow: hidden;
}

.ch-tiers .ch-tiers-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.ch-tiers .ch-tiers-table th,
.ch-tiers .ch-tiers-table td {
	padding: 0.9rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--ch-border-light);
	vertical-align: middle;
}

.ch-tiers .ch-tiers-table tbody tr:last-child > * {
	border-bottom: 0;
}

.ch-tiers .ch-tiers-table thead th {
	padding-top: 1.4rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--ch-border-light);
}

.ch-tiers .ch-tiers-products {
	width: 46%;
	text-align: left;
	vertical-align: bottom !important;
	font-family: var(--ch-font-display);
	font-size: var(--ch-step-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ch-text-secondary);
}

.ch-tiers .ch-tiers-table tbody th {
	text-align: left;
	font-weight: 500;
	line-height: 1.4;
}

.ch-tiers .ch-tier {
	width: 18%;
	position: relative;
	text-align: center;
	vertical-align: top !important;
	border-top: 4px solid var(--ch-tier-colour) !important;
}

.ch-tier-icon {
	display: block;
	margin: 0 auto 0.5rem;
	filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--ch-ink) 18%, transparent));
}

.ch-tier-name {
	display: block;
	font-family: var(--ch-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ch-ink);
}

.ch-tier-threshold {
	display: block;
	margin-top: 0.2rem;
	font-size: var(--ch-step-small);
	font-weight: 600;
	color: var(--ch-tier-colour);
}

.ch-tier-per {
	font-weight: 400;
	color: var(--ch-text-secondary);
}

.ch-tier-you {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	background: var(--ch-tier-colour);
	color: var(--ch-cloud);
	font-size: 0.75rem;
	font-weight: 600;
}

.ch-tiers .ch-tiers-table td {
	text-align: center;
	font-family: var(--ch-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ch-ink);
}

.ch-tiers-off {
	font-family: var(--ch-font-body);
	font-size: var(--ch-step-small);
	font-weight: 400;
	color: var(--ch-text-secondary);
}

.ch-tier--trade  { --ch-tier-colour: var(--ch-tier-trade);  background: var(--ch-tier-trade-tint); }
.ch-tier--silver { --ch-tier-colour: var(--ch-tier-silver); background: var(--ch-tier-silver-tint); }
.ch-tier--gold   { --ch-tier-colour: var(--ch-tier-gold);   background: var(--ch-tier-gold-tint); }

/* A logged-in trade buyer's own column. */
.ch-tiers .ch-tiers-table .is-current {
	box-shadow: inset 2px 0 0 var(--ch-tier-colour), inset -2px 0 0 var(--ch-tier-colour);
}

.ch-tiers-note {
	max-width: 46rem;
	font-size: var(--ch-step-small);
	color: var(--ch-text-secondary);
}

@media screen and (max-width: 37.5em) {
	.ch-tiers .ch-tiers-table th,
	.ch-tiers .ch-tiers-table td {
		padding: 0.75rem 0.4rem;
	}

	.ch-tiers .ch-tiers-table tbody th {
		padding-left: 0.75rem;
		font-size: var(--ch-step-small);
	}

	.ch-tiers .ch-tiers-products {
		width: 43%;
		padding-left: 0.75rem !important;
	}

	.ch-tiers .ch-tier {
		width: 19%;
	}

	.ch-tier-icon {
		width: 34px;
		height: 34px;
	}

	.ch-tier-name {
		font-size: 1rem;
	}

	.ch-tier-threshold {
		font-size: 0.75rem;
	}

	.ch-tier-per {
		display: block;
	}

	.ch-tiers .ch-tiers-table td {
		font-size: 1.125rem;
	}

	.ch-tiers-off {
		display: none;
	}
}

/* "Send for manual review": shown beside the main button only when HMRC's
   VAT checker could not be reached on that submit. */
.ch-contact-form .ch-trade-manual {
	margin-left: var(--ch-space-1);
	background: transparent;
	color: var(--ch-ink);
	box-shadow: inset 0 0 0 2px var(--ch-ink);
}

.ch-contact-form .ch-trade-manual:hover {
	background: var(--ch-ink);
	color: var(--ch-off-white);
}

.ch-trade-status .ch-contact-form {
	margin-top: var(--ch-space-3);
}

.ch-trade-status .ch-contact-success .ch-contact-submit {
	display: inline-block;
	text-decoration: none;
}

.ch-contact-errors {
	max-width: 34rem;
	background: var(--ch-error-tint);
	border: 1px solid var(--ch-error-deep);
	border-radius: var(--ch-radius);
	padding: var(--ch-space-2) var(--ch-space-3);
	color: var(--ch-error-ink);
	list-style-position: inside;
	margin: 0 0 var(--ch-space-3);
}

.ch-contact-success {
	max-width: 34rem;
	background: var(--ch-cloud);
	border: 1px solid var(--ch-catalyst-deep);
	border-radius: var(--ch-radius);
	padding: var(--ch-space-2) var(--ch-space-3);
}

/* Content tables (e.g. the Delivery page's rate tables) — same idiom as
   the product specs table: hug content, left-aligned, light row rules. */
.entry-content table {
	width: auto;
	border-collapse: collapse;
	margin: 0 0 var(--ch-space-3);
}

.entry-content th,
.entry-content td {
	text-align: left;
	padding: var(--ch-space-1) var(--ch-space-4) var(--ch-space-1) 0;
	border-bottom: 1px solid var(--ch-mist-light);
}

.entry-content th {
	font-family: var(--ch-font-display);
	font-weight: 700;
}

/* Phones (2026-10-13): a wide content table (the cost post's four columns were 381 px in a 342 px column) must never
   scroll the page sideways: tighter cells, and the table scrolls inside itself if it is still wider. */
@media screen and (max-width: 37.5em) {
	.entry-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
	.entry-content th,
	.entry-content td {
		padding-right: var(--ch-space-2);
	}
}

/* Announcement bar — the one standing site-wide promise (§6.3: next-day
   delivery, 4pm cut-off). Ink-surface (one step lighter than the Ink
   header below it) so it reads as a deliberate layer, mono type at small
   size like the SKU chips, single line, nothing else — prominence through
   position, not weight. */
.ch-announcement {
	background-color: var(--ch-surface-dark-card);
	padding: 0.45rem var(--ch-space-2);
	font-family: var(--ch-font-mono);
	font-size: var(--ch-step-small);
	letter-spacing: 0.02em;
	text-align: center;
}

/* Inline-flow badge (not flex) so it hugs the first word and wraps
   naturally with the text on narrow screens instead of stranding at
   the container's left edge. */
.ch-announcement .ch-hex-badge {
	display: inline-block;
	background: var(--ch-catalyst);
	width: 0.75rem;
	height: 0.75rem;
	margin-right: 0.4em;
	vertical-align: -0.08em;
}

/* Logo lockup: scale mark + wordmark as one rigid unit, clearspace via
   padding on the wrapping header/footer regions rather than the SVG itself
   (see USAGE.md — clearspace ≥ half the mark's height on all sides). */
.ch-logo {
	display: inline-flex;
	align-items: center;
}

.ch-logo svg {
	display: block;
	height: 2.5rem;
	width: auto;
}

.site-header .site-branding {
	display: flex;
	align-items: center;
	gap: var(--ch-space-2);
}

.site-header .site-description {
	font-size: var(--ch-step-small);
	color: var(--ch-text-secondary-on-dark);
	margin: 0;
}

.ch-header-inner {
	max-width: var(--ch-max-width);
	margin: 0 auto;
	padding: var(--ch-space-3) var(--ch-space-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ch-space-2);
}

/* Header phone (owner spec 2026-07-19): top-right on the branding row,
   right edge flush with the basket icon below (same --ch-space-1 inset
   as .ch-cart-link), bottom of the digits sitting on the bottom of the
   "CatHive" wordmark text — the vertical nudge was measured against the
   rendered #wordmark group in the logo SVG, not eyeballed. */
.site-header .ch-header-phone {
	margin-left: auto;
	align-self: flex-end;
	position: relative;
	bottom: 0.63rem; /* measured: glyph bottom onto #wordmark bottom */
	padding: 0;      /* text right edge flush with the basket icon's */
	color: var(--ch-link-on-dark); /* brand green (owner-agreed): actionable, echoes the logo's "Hive" */
	text-decoration: none;
	font-family: var(--ch-font-body);
	font-weight: 500;
}

.site-header .ch-header-phone:hover,
.site-header .ch-header-phone:focus {
	color: var(--ch-catalyst-bright);
	text-decoration: none;
}

/* Nav row: menu links left, basket icon right — both inside the
   centred .ch-header-inner container (Underscores gives .main-navigation
   width: 100%, so it owns the full row under the branding). */
.site-header .main-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ch-space-2);
}

.site-header .main-navigation ul {
	gap: var(--ch-space-3);
	align-items: center;
}

/* Search: empty state (search is products-only, so the copy points at
   the routes that actually find a part). */
.ch-search-empty {
	max-width: 60ch;
}

.ch-search-empty ul {
	margin: 0 0 var(--ch-space-3);
	padding-left: 1.2em;
}

.ch-search-empty li {
	margin-bottom: 0.3em;
}

/* Header product search (owner request 2026-08-18).
   Mobile: `order: 10` + a 100% basis drops it onto its own full-width
   row beneath the menu button and icons — at 384px the four elements
   cannot share one line. Desktop: back in flow before the icon pair,
   pushed right by margin-left: auto (which then takes over from
   .ch-account-link's own auto margin). */
.ch-header-search {
	display: flex;
	align-items: center;
	gap: var(--ch-space-1);
	order: 10;
	flex: 1 1 100%;
	min-width: 0;
}

.ch-header-search-field {
	flex: 1 1 auto;
	/* width: 0 + grow — an input's size-attribute intrinsic would
	   otherwise widen the header past the viewport on phones, the same
	   trap the reg-plate input hit (see §4 in CLAUDE.md). */
	width: 0;
	min-width: 0;
	background: var(--ch-cloud);
	color: var(--ch-ink);
	border: 1px solid var(--ch-border-dark);
	border-radius: var(--ch-radius);
	/* Fixed height on both controls so the field and the Go button line
	   up exactly — padding alone left the button visibly taller, since
	   .ch-btn's display-font metrics differ from the input's. */
	height: 2.5rem;
	padding: 0 0.75em;
	font-family: var(--ch-font-body);
	font-size: var(--ch-step-body);
	line-height: 1.3;
}

.ch-header-search-field::placeholder {
	color: var(--ch-slate);
	opacity: 1;
}

.ch-header-search-field:focus {
	outline: none;
	border-color: var(--ch-catalyst);
	box-shadow: 0 0 0 2px var(--ch-catalyst);
}

/* Slimmer than the hero buttons so the nav row keeps its height. */
.ch-header-search-go {
	flex: 0 0 auto;
	height: 2.5rem;
	padding: 0 var(--ch-space-3);
	font-size: var(--ch-step-body);
	line-height: 1.3;
}

@media screen and (min-width: 37.5em) {

	.ch-header-search {
		order: 0;
		/* 13rem (was 20rem): the nav row wraps on the BASIS, not the shrunk
		   width, so a narrower basis keeps the nine menu items, the search
		   and the icons on one line down to ~1200px (Trade Account added
		   2026-09-19). */
		flex: 0 1 13rem;
		margin-left: auto;
	}

	/* The search form now owns the auto margin that pushes the group right. */
	.site-header .ch-account-link {
		margin-left: 0;
	}
}

.ch-account-link {
	display: inline-flex;
	align-items: center;
	padding: var(--ch-space-1);
	color: var(--ch-frost);
	margin-left: auto; /* first of the right-side icon pair — pushes both right */
}

.ch-cart-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: var(--ch-space-1);
	color: var(--ch-text-on-dark);
}

.ch-cart-link:hover,
.ch-cart-link:focus,
.ch-account-link:hover,
.ch-account-link:focus {
	color: var(--ch-catalyst-bright);
}

.ch-cart-link svg,
.ch-account-link svg {
	display: block;
	width: 1.4rem;
	height: 1.4rem;
}

/* Item-count badge over the basket icon; server-rendered, kept live by
   assets/js/cart-count.js. [hidden] rather than a zero — an empty cart
   shows a bare icon. */
.ch-cart-count {
	position: absolute;
	top: -0.15rem;
	right: -0.3rem;
	min-width: 1rem;
	height: 1rem;
	padding: 0 0.2rem;
	border-radius: 999px;
	background: var(--ch-catalyst);
	color: var(--ch-ink);
	font-family: var(--ch-font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1rem;
	text-align: center;
}

.ch-cart-count[hidden] {
	display: none;
}

.site-header .main-navigation li {
	margin: 0;
}

.site-header .main-navigation a {
	display: inline-block;
	padding: var(--ch-space-1) 0;
	color: var(--ch-text-on-dark);
	font-family: var(--ch-font-body);
	font-weight: 500;
	text-decoration: none;
}

.site-header .menu-toggle {
	background: transparent;
	border: 2px solid var(--ch-border-dark);
	border-radius: var(--ch-radius);
	color: var(--ch-text-on-dark);
	font-family: var(--ch-font-body);
	font-weight: 500;
	padding: var(--ch-space-1) var(--ch-space-2);
}

.site-header .menu-toggle:hover,
.site-header .menu-toggle.toggled {
	border-color: var(--ch-catalyst);
}

.ch-footer-inner {
	max-width: var(--ch-max-width);
	margin: 0 auto;
	padding: var(--ch-space-5) var(--ch-space-3);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ch-space-3);
}

.ch-footer-logo svg {
	height: 2rem;
	width: auto;
}

.site-footer .site-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ch-space-1);
	font-size: var(--ch-step-small);
	color: var(--ch-text-secondary-on-dark);
}

.site-footer .site-info a {
	color: var(--ch-text-secondary-on-dark);
	text-decoration: underline;
}

/* Statutory identity line (2026-09-04): legal name, company number,
   VAT registration number — under the copyright/menu row. */
.site-footer .ch-site-legal {
	margin: var(--ch-space-1) 0 0;
	font-size: var(--ch-step-small);
	color: var(--ch-text-secondary-on-dark);
}

.site-footer #footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ch-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Skip link, restyled to brand tokens (base behaviour from Underscores kept) */
.skip-link.screen-reader-text:focus {
	background-color: var(--ch-ink);
	color: var(--ch-off-white);
	border-radius: var(--ch-radius);
	box-shadow: none;
}

/* Buttons (shared by hero/finder for now; a general button system is due
   once more of the site is built) */
.ch-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ch-font-display);
	font-weight: 700;
	font-size: var(--ch-step-body);
	border-radius: var(--ch-radius);
	border: none;
	padding: var(--ch-space-2) var(--ch-space-3);
	cursor: pointer;
	text-decoration: none;
}

.ch-btn-primary {
	background: var(--ch-catalyst);
	color: var(--ch-ink);
}

.ch-btn-primary:hover {
	background: var(--ch-catalyst-bright);
}

/* Green link-buttons keep ink text once visited: `a:visited` (more specific) turned it link green, so
   the bar's View cart / Checkout looked disabled (owner 2026-10-04). */
a.ch-btn-primary,
a.ch-btn-primary:visited,
a.ch-btn-primary:hover,
a.ch-btn-primary:focus,
a.ch-btn-primary:active {
	color: var(--ch-ink);
}

.ch-btn-secondary {
	background: transparent;
	color: var(--ch-text-on-dark);
	border: 2px solid var(--ch-border-dark);
}

.ch-btn-secondary:hover:not(:disabled) {
	border-color: var(--ch-catalyst);
}

.ch-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/*--------------------------------------------------------------
# Hero + part finder (§1.3/§1.4)
--------------------------------------------------------------*/

.ch-hero {
	padding: var(--ch-space-7) var(--ch-space-3);
	background-color: var(--ch-surface-dark);
}

/* The homepage's share of any spare viewport height (from the sticky-
   footer flex on #page) goes to the HERO, not the space after the
   trust strip (owner call 2026-07-20: the leftover off-white void
   below the strip visually merged with it into one enormous band).
   The hero grows and vertically centres its content, so big displays
   get a grander hero, the trust strip stays a genuinely narrow strip,
   and the footer keeps its natural height. On small screens there is
   no spare height and nothing changes. */
body.home .site-main {
	display: flex;
	flex-direction: column;
}

body.home .ch-hero {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.ch-hero-inner {
	max-width: 46rem;
	margin: 0 auto;
	text-align: center;
}

.ch-hero-title {
	font-size: var(--ch-step-hero);
	line-height: 1.05;
	letter-spacing: var(--ch-tracking-display-hero);
	margin: 0 0 var(--ch-space-2);
}

.ch-hero-sub {
	font-family: var(--ch-font-body);
	font-weight: 400;
	font-size: 1.125rem;
	color: var(--ch-text-secondary-on-dark);
	margin: 0 0 var(--ch-space-5);
}

.ch-finder {
	background: var(--ch-surface-dark-card);
	border: 1px solid var(--ch-border-dark);
	border-radius: calc(var(--ch-radius) * 2);
	padding: var(--ch-space-4);
	text-align: left;
}

/* Reg-plate input: mimics the real UK number-plate convention (yellow
   plate, blue GB tab) — the yellow/blue here are that regulatory look,
   deliberately outside the brand palette tokens, same as a real plate
   would be regardless of brand. */
.ch-plate-form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--ch-space-2);
}

.ch-plate-input {
	display: flex;
	align-items: stretch;
	flex: 1 1 260px;
	/* Shrinkable below content minimum — without this, the input's
	   default size-attribute intrinsic (~20ch at plate font size)
	   forces the hero column wider than a phone viewport and mobile
	   browsers stretch the layout viewport to fit (caught live
	   2026-07-23, the day the plate went visible by default). */
	min-width: 0;
	background: var(--ch-plate-yellow);
	border: 2px solid var(--ch-plate-yellow-border);
	border-radius: var(--ch-radius);
	overflow: hidden;
}

/* Blue side badge, post-Brexit style (BS AU 145e): Union Flag above
   "UK" — replaced the old GB euro-band look in Sept 2021. */
.ch-plate-uk-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	background: var(--ch-plate-flag-blue); /* Union Flag blue */
	color: var(--ch-cloud);
	font-family: var(--ch-font-body);
	font-weight: 700;
	font-size: 0.8rem;
	line-height: 1;
	padding: 0 0.55rem;
}

.ch-plate-flag {
	width: 1.35rem;
	height: auto;
	border-radius: 2px;
	display: block;
}

.ch-plate-field {
	flex: 1;
	/* width: 0 + flex-grow: the field fills the row but contributes no
	   intrinsic width of its own (min-width: 0 alone doesn't stop the
	   size-attribute default winning in the min-content calculation). */
	width: 0;
	border: none;
	background: transparent;
	font-family: var(--ch-font-mono);
	font-weight: 500;
	font-size: 1.6rem;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
	color: var(--ch-plate-ink); /* plate characters: solid black, per BS AU 145e */
	padding: 0.35em var(--ch-space-2);
	min-width: 0;
}

/* The generic input[type="text"] rule (grey text, ink on focus) out-ranks the class above: typed plates showed grey
   (owner, 2026-10-27). Every plate in every market (UK and Dutch yellow, Irish and French white) has black characters. */
.ch-plate-input input.ch-plate-field,
.ch-plate-input input.ch-plate-field:focus {
	color: var(--ch-plate-ink);
}

/* EU plates (the /ie/ and /fr/ shops): white with the EU band and "IRL" / "F"; up to 13 characters, so a smaller face.
   The Dutch plate (/nl/, 2026-10-27) stays yellow, as in the Netherlands, with the EU band and "NL". */
.ch-plate-input.ch-plate-ie,
.ch-plate-input.ch-plate-fr {
	background: #FFFFFF;
	border-color: #B9C0BD;
}

.ch-plate-input.ch-plate-ie .ch-plate-uk-tab,
.ch-plate-input.ch-plate-fr .ch-plate-uk-tab,
.ch-plate-input.ch-plate-nl .ch-plate-uk-tab {
	background: #003399; /* EU flag blue */
}

.ch-plate-input.ch-plate-ie .ch-plate-field,
.ch-plate-input.ch-plate-fr .ch-plate-field,
.ch-plate-input.ch-plate-nl .ch-plate-field {
	font-size: 1.3rem;
	letter-spacing: 0.04em;
}

/* The KBA-number box (/de/, 2026-10-28): not a plate, so no flag; white with a grey label tab, as a document field. */
.ch-plate-input.ch-plate-kba {
	background: #FFFFFF;
	border-color: #B9C0BD;
}

.ch-plate-input.ch-plate-kba .ch-plate-uk-tab {
	background: #5B6461;
	padding: 0 0.7rem;
	white-space: nowrap;
}

.ch-plate-input.ch-plate-kba .ch-plate-field {
	font-size: 1.4rem;
	letter-spacing: 0.08em;
}

.ch-kba-hint {
	margin: var(--ch-space-1) 0 0;
	color: var(--ch-text-secondary-on-dark); /* as .ch-vin-hint */
	font-size: var(--ch-step-small);
	text-align: center;
}

.ch-kba-source {
	display: block;
	margin-top: 2px;
	font-size: 0.75rem;
}

.ch-plate-field::placeholder {
	color: color-mix(in srgb, var(--ch-plate-ink) 35%, transparent);
}

.ch-plate-field:focus-visible {
	outline: 3px solid var(--ch-ink);
	outline-offset: -3px;
}

.ch-plate-form .ch-btn {
	flex: 0 0 auto;
}

/* Remembered plates (owner 2026-10-21; UX report 2026-10-21-ux-remembered-plates): under every plate form, the plates
   this browser searched before (at most two, newest first), drawn by assets/js/plates.js only, never in the cached
   HTML. One line each: a history icon, the plate as a plate, the make and model ("Search again for …" to a screen
   reader), and a Forget button (x). Full-width rows on a phone (the panel leaves 270px at 384px: two side by side
   would hide the vehicle), side by side from 37.5em. Dark-surface tokens, so light mode needs nothing. */
.ch-plates {
	margin-top: var(--ch-space-2);
}
.ch-plates[hidden],
.ch-plates-list[hidden],
.ch-plates-label[hidden] {
	display: none;
}
.ch-plates-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ch-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ch-plates-item {
	display: flex;
	align-items: stretch;
	flex: 1 1 100%;
	min-width: 0;
	margin: 0;
	border: 1px solid var(--ch-text-secondary-on-dark);
	border-radius: var(--ch-radius);
	background: var(--ch-surface-dark);
}
.ch-plates-item:has(.ch-plates-go:hover) {
	border-color: var(--ch-catalyst);
}
.ch-plates-go,
.ch-plates-forget {
	margin: 0;
	border: 0;
	background: none;
	color: var(--ch-text-on-dark);
	font: inherit;
	cursor: pointer;
}
.ch-plates-go {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.5rem;
	display: flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.25rem 0.5rem;
	border-radius: calc(var(--ch-radius) - 1px) 0 0 calc(var(--ch-radius) - 1px);
	font-size: var(--ch-step-small);
	line-height: 1.3;
	text-align: left;
}
.ch-plates-ico {
	flex: 0 0 auto;
	color: var(--ch-text-secondary-on-dark);
}
.ch-plates-go .ch-reg-inline {
	flex: 0 0 auto;
	font-size: 0.875rem;
	line-height: 1.45;
}
/* width 0 + grow: the name adds nothing to the page's minimum width (phones stretch the layout viewport to fit it,
   the plate-field trap); from 37.5em it takes its own width (below). */
.ch-plates-veh {
	flex: 1 1 0;
	width: 0;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ch-plates-forget {
	flex: 0 0 2.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-left: 1px solid var(--ch-border-dark);
	border-radius: 0 calc(var(--ch-radius) - 1px) calc(var(--ch-radius) - 1px) 0;
	color: var(--ch-text-secondary-on-dark);
}
.ch-plates-forget:hover {
	color: var(--ch-text-on-dark);
	background: var(--ch-border-dark);
}
.ch-plates .ch-plates-forget:hover,
.ch-plates .ch-plates-forget:focus,
.ch-plates .ch-plates-forget:active { /* the base button:hover / :focus border colours */
	border-left-color: var(--ch-border-dark);
}
.ch-plates-go:focus-visible,
.ch-plates-forget:focus-visible {
	outline-offset: -3px;
}
.ch-plates-status {
	margin: 0;
	font-size: var(--ch-step-small);
	line-height: 1.4;
	color: var(--ch-text-on-dark);
}
.ch-plates-status:not(:empty) {
	margin-top: var(--ch-space-1);
}
.ch-plates-status:focus {
	outline: none;
}
.ch-plates-status .ch-linkbtn { /* ink, underlined: the deep green is 3.58:1 on white at this size (A8) */
	color: var(--ch-text-on-dark);
	text-underline-offset: 2px;
}
.ch-plates-status .ch-linkbtn:hover {
	text-decoration-thickness: 2px;
}
@media screen and (min-width: 37.5em) {
	.ch-plates-item {
		flex: 0 1 auto;
		max-width: 21rem;
	}
	.ch-plates-veh {
		flex: 0 1 auto;
		width: auto;
	}
}
/* Narrow panels (the product page's fit check, phones under about 380px): the vehicle gets the icon's room. */
.ch-plates {
	container-type: inline-size;
}
@container (max-width: 16rem) {
	.ch-plates-ico {
		display: none;
	}
}

/* Kits section heading in finder results (dark hero context). */
.ch-finder-kits-heading {
	color: var(--ch-text-secondary-on-dark);
	font-family: var(--ch-font-display);
	font-weight: 700;
	font-size: var(--ch-step-body);
	margin: var(--ch-space-4) 0 var(--ch-space-2);
}

/* Collapsible kits list (finder results + landing pages): kit-list.js
   clamps the list to the fourth card's midpoint and masks the visible
   half of that card to transparent; "Show more" expands. The fade
   length is a registered @property so it animates away WITH the height
   instead of popping when the mask is removed (browsers without
   @property just skip the fade animation — the expand still works). */
@property --ch-kit-fade {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

.ch-kit-collapse {
	overflow: hidden;
	/* 0.9s (owner: 0.45s was too quick for the effect to register). */
	transition: max-height 0.9s ease, --ch-kit-fade 0.9s ease;
}

.ch-kit-collapse.is-masked {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ch-kit-fade, 4rem)), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ch-kit-fade, 4rem)), transparent 100%);
}

/* Fully-clipped items leave the tab order while collapsed (a focused
   link below the clip would silently scroll the overflow box and break
   the clamp geometry). Removed at expand start so they appear as the
   box grows. */
.ch-kit-collapse.is-collapsed > li:nth-child(n + 5) {
	visibility: hidden;
}

.ch-kit-more {
	display: table;
	margin: var(--ch-space-2) auto 0;
	color: var(--ch-link-on-dark);
	font-family: var(--ch-font-display);
	font-weight: 700;
	text-decoration: none;
}

/* `display: table` above outranks the reset's [hidden] (same specificity, later): fewer than four kits, or a
   list already expanded before a research redraw (2026-10-06), would show a dead "Show more". */
.ch-kit-more[hidden] {
	display: none;
}

.ch-kit-more:hover,
.ch-kit-more:focus {
	text-decoration: underline;
}

/* Light-page (landing) variants of the dark-hero kit styles — same
   reasoning as the .ch-landing-results overrides below. */
.ch-landing-page .ch-finder-kits-heading {
	color: var(--ch-text-secondary);
}

.ch-landing-page .ch-kit-more {
	color: var(--ch-link-on-light);
}

/* Reg-lookup result header (renders inside the dark hero's results). */
.ch-plate-vehicle {
	color: var(--ch-text-on-dark);
	font-size: 1.05rem;
	margin: 0 0 var(--ch-space-1);
}

.ch-plate-vehicle strong {
	color: var(--ch-text-on-dark); /* was Catalyst: 2.5:1 on white (UX report 2026-10-19 A8) */
}

.ch-plate-vehicle-sub {
	color: var(--ch-text-secondary-on-dark);
	font-size: var(--ch-step-small);
	margin: 0 0 var(--ch-space-2);
}

.ch-finder-divider {
	text-align: center;
	color: var(--ch-text-secondary-on-dark);
	font-size: var(--ch-step-small);
	margin: var(--ch-space-3) 0;
	position: relative;
}

.ch-finder-cascade {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ch-space-2);
	align-items: stretch;
}

.ch-finder-selects {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ch-space-2);
	flex: 1 1 auto;
}

/* Mobile: when the submit buttons wrap onto their own row (below the
   plate / below the selects), CENTRE them (owner 2026-09-18; they were
   right-aligned from 2026-07-23 to then). Desktop rows are unaffected —
   scoped to the theme's mobile break. */
@media screen and (max-width: 37.5em) {
	.ch-plate-form > button,
	.ch-vin-search > button,
	.ch-finder-cascade > button {
		margin-left: auto;
		margin-right: auto;
	}
}

/* width: 0 (owner 2026-10-25, PageSpeed field CLS 0.31 on the homepage): a select's intrinsic width is its longest
   option, which min-width: 0 does not remove. When the server still sent all 1,154 models ("Countryman John Cooper
   Works", 303px), phones of 390px and less got a 393-400px page until finder.js emptied the select, then snapped back
   and everything below the hero title jumped. finder.js now fills long model names after a make is picked; this keeps
   them from widening the page. The flex basis/grow still size the selects. */
.ch-finder-selects select {
	flex: 1 1 160px;
	width: 0;
	min-width: 0;
	padding: var(--ch-space-2);
	border-radius: var(--ch-radius);
	border: 1px solid var(--ch-border-dark);
	background: var(--ch-surface-dark-card);
	color: var(--ch-text-on-dark);
	font-family: var(--ch-font-body);
	font-size: var(--ch-step-body);
}

.ch-finder-selects select:disabled {
	opacity: 0.45;
}

@media ( min-width: 40em ) {
	.ch-finder-cascade {
		flex-wrap: nowrap;
	}
}

/* Finder results — §5.2's "results step": make+model+engine isn't
   unique, so this renders a candidate list with disambiguators, not a
   single product. */
.ch-finder-results {
	margin-top: var(--ch-space-3);
	border-top: 1px solid var(--ch-border-dark);
	padding-top: var(--ch-space-3);
}

.ch-finder-no-results {
	/* 2026-09-04: an outcome the shopper can't miss — a panel, not the
	   previous secondary-colour whisper line that read as "nothing
	   happened" in the owner's screenshot. */
	color: var(--ch-text-on-dark);
	margin: 0;
	padding: var(--ch-space-3);
	border: 1px solid var(--ch-border-dark);
	border-radius: var(--ch-radius);
	background: color-mix(in srgb, var(--ch-ink) 4%, transparent);
	line-height: 1.5;
}

.ch-finder-no-results strong {
	color: var(--ch-catalyst);
}

.ch-finder-no-results a {
	color: var(--ch-link-on-dark);
}

/* The same class on the light §5.3 landing pages. */
.ch-landing-page .ch-finder-no-results {
	color: var(--ch-text-body);
	border-color: var(--ch-mist-light);
	background: var(--ch-cloud);
}

.ch-landing-page .ch-finder-no-results a {
	color: var(--ch-link-on-light);
}

/* Year-of-registration narrowing (2026-09-04) — rendered by finder.js
   only when the candidates span more than one fitment year range. */
.ch-finder-year {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ch-space-2);
	margin: 0 0 var(--ch-space-3);
}

.ch-finder-year label {
	color: var(--ch-text-on-dark);
	font-weight: 600;
}

.ch-finder-year-select {
	flex: 0 1 10rem;
	min-width: 0;
	padding: var(--ch-space-2);
	border-radius: var(--ch-radius);
	border: 1px solid var(--ch-border-dark);
	background: var(--ch-surface-dark-card);
	color: var(--ch-text-on-dark);
	font-family: var(--ch-font-body);
	font-size: var(--ch-step-body);
}

.ch-finder-year-hint {
	flex: 1 1 100%;
	color: var(--ch-text-secondary-on-dark);
	font-size: var(--ch-step-small);
}

.ch-finder-result-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ch-space-2);
}

.ch-finder-result-link {
	display: flex;
	align-items: center;
	gap: var(--ch-space-2);
	padding: var(--ch-space-2);
	border-radius: var(--ch-radius);
	text-decoration: none;
	color: var(--ch-text-on-dark);
}

/* A8 (UX report 2026-10-19): the name and price inherited `.ch-on-dark a` (Catalyst deep, 3.58:1 on white, about 2.9:1
   on grey); they take the text colour. Green stays for the pills. */
.ch-finder-result a.ch-finder-result-link,
.ch-finder-result a.ch-finder-result-link:visited,
.ch-finder-result a.ch-finder-result-link:hover,
.ch-finder-result a.ch-finder-result-link:focus {
	color: var(--ch-text-on-dark);
}

.ch-finder-result-link:hover {
	background: var(--ch-border-dark);
}

.ch-finder-result a.ch-finder-result-link:hover .ch-finder-result-name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ch-finder-result-link img {
	flex: 0 0 auto;
	/* 96px (120px from 2026-09-21; compact cards, UX report 2026-10-19 A2). */
	width: 96px;
	height: 96px;
	object-fit: contain;
	background: var(--ch-cloud);
	border-radius: var(--ch-radius);
}

/* A2 (UX report 2026-10-19): each card is one bordered box: the link (photo, name, pills, price), then a row with the
   "Why it fits" / "Details" button and "Add to cart", then the disclosure. */
.ch-finder-results .ch-finder-result {
	border: 1px solid var(--ch-border-dark);
	border-radius: var(--ch-radius);
	background: var(--ch-surface-dark-card);
}

.ch-finder-result-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ch-space-1) var(--ch-space-2);
	padding: 0 var(--ch-space-2) var(--ch-space-2);
}

.ch-finder-result-actions:not(:has(.ch-why-toggle)) {
	justify-content: flex-end;
}

/* Wider screens: the card's buttons sit at the right of the photo and text, the disclosure under both. */
@media screen and (min-width: 48em) {
	.ch-finder-result {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}
	.ch-finder-result > .ch-finder-result-link {
		grid-column: 1;
	}
	.ch-finder-result > .ch-finder-result-actions {
		grid-column: 2;
		flex-wrap: nowrap;
		padding: var(--ch-space-2);
	}
	.ch-finder-result > .ch-why-body {
		grid-column: 1 / -1;
	}
}

.ch-why-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: 44px;
	padding: 0 0.25em;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--ch-step-small);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ch-why-chevron {
	flex: 0 0 auto;
	width: 0.5em;
	height: 0.5em;
	margin: -0.2em 0 0 0.3em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease, margin 0.25s ease;
}

.ch-why-toggle[aria-expanded="true"] .ch-why-chevron {
	margin-top: 0.25em;
	transform: rotate(-135deg);
}

.ch-why-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45em;
	padding: 0 var(--ch-space-2) var(--ch-space-2);
	font-size: var(--ch-step-small);
	color: var(--ch-text-on-dark);
}

.ch-why-body[hidden] {
	display: none;
}

.ch-finder-result-guarantee a {
	font-weight: 600;
}

.ch-finder-result-body {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	min-width: 0;
}

.ch-finder-result-sku {
	color: var(--ch-catalyst);
	font-size: var(--ch-step-small);
}

.ch-finder-result-name {
	font-family: var(--ch-font-display);
	font-weight: 700;
	line-height: 1.3;
}

.ch-finder-result-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

.ch-chip {
	font-size: var(--ch-step-small);
	color: var(--ch-text-secondary-on-dark);
	border: 1px solid var(--ch-border-dark);
	border-radius: 1em;
	padding: 0.1em 0.6em;
}

/* "Guaranteed to fit" (Euro + engine code match) or "Catalogued for my
   vehicle" — registration-search results only (owner, 2026-09-21; wording 2026-09-29):
   first pill, highlighted, so the catalogued-for-your-car status is the
   first thing read. */
.ch-chip--fit {
	background: var(--ch-catalyst);
	color: var(--ch-ink);
	font-weight: 600;
}

/* "Fitting kit included" — first chip after the fit chip (owner,
   2026-09-21): outlined in catalyst so it reads as a benefit, not a spec.
   Text in the body colour since 2026-10-19 (A8: Catalyst deep text was 3.58:1 at 14px). */
.ch-chip--kit,
.ch-landing-results .ch-chip.ch-chip--kit {
	color: var(--ch-text-on-dark); /* landing pages: --ch-text-body, below */
	border-color: var(--ch-catalyst);
	font-weight: 600;
}

/* Result groups by part type (cats / DPFs / pipes). */
.ch-finder-group-heading {
	margin: var(--ch-space-4) 0 var(--ch-space-2);
	font-family: var(--ch-font-display);
	font-size: var(--ch-step-body);
	font-weight: 700;
	color: var(--ch-text-on-dark);
}

.ch-finder-group-heading .ch-finder-group-count {
	display: inline-block;
	min-width: 1.6em;
	margin-left: 0.35em;
	padding: 0 0.45em;
	border-radius: 999px;
	background: var(--ch-border-dark);
	font-family: var(--ch-font-mono);
	font-size: 0.8em;
	text-align: center;
}

.ch-finder-group-heading small {
	display: block;
	margin-top: 0.25em;
	font-family: var(--ch-font-body);
	font-size: var(--ch-step-small);
	font-weight: 400;
	color: var(--ch-text-secondary-on-dark);
}

.ch-finder-group-heading small a {
	color: var(--ch-link-on-dark);
}

.ch-finder-result-note {
	font-size: var(--ch-step-small);
	color: var(--ch-text-secondary-on-dark);
}

/* Engine codes on every result card, and the fit-check warning after a
   registration lookup (owner 2026-09-28): a part catalogued for the model
   whose Euro level or engine code clashes with the vehicle's. */
.ch-finder-result-engine {
	font-size: var(--ch-step-small);
	color: var(--ch-text-on-dark);
}

.ch-finder-result-warning {
	color: var(--ch-text-on-dark);
	padding: 0.35em var(--ch-space-1);
	border-left: 3px solid var(--ch-signal-amber);
	background: var(--ch-amber-tint);
	font-size: var(--ch-step-small);
}

.ch-finder-result.is-conflict .ch-finder-result-link img {
	opacity: 0.6;
}

.ch-plate-vehicle-facts {
	color: var(--ch-text-secondary-on-dark);
	font-size: var(--ch-step-small);
	margin: calc(-1 * var(--ch-space-1) / 2) 0 var(--ch-space-2);
}

.ch-plate-clash a,
.ch-fit-no a {
	color: var(--ch-link-on-dark);
}

.ch-plate-vehicle-narrowed {
	margin: 0 0 var(--ch-space-2);
	padding: var(--ch-space-1) var(--ch-space-2);
	border-left: 3px solid var(--ch-catalyst);
	background: var(--ch-catalyst-tint);
	font-size: var(--ch-step-small);
}

/* Lookup research (2026-10-02, Briefs/reg-lookup-fit-research.md §8): the deeper check's message
   with a CatHive-green spinner, the confidence-based labels, the ruled-out list and the agent's
   model/engine pick. Colours follow the surrounding text, so dark results and the light widget both work. */
.ch-research {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	margin: 0 0 var(--ch-space-2);
	padding: var(--ch-space-1) var(--ch-space-2);
	border-left: 3px solid var(--ch-catalyst);
	background: var(--ch-catalyst-tint);
	font-size: var(--ch-step-small);
	transition: opacity 0.6s ease;
}
.ch-research-text { flex: 1 1 14em; }
.ch-research-progress { flex-basis: 100%; opacity: 0.8; }
.ch-research-progress:empty { display: none; }
.ch-spinner {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	border-radius: 50%;
	border: 3px solid color-mix(in srgb, var(--ch-catalyst) 25%, transparent);
	border-top-color: var(--ch-catalyst);
	animation: ch-spin 0.9s linear infinite;
}
@keyframes ch-spin { to { transform: rotate(360deg); } }
/* "Check for pipes" (owner 2026-10-15): the button, then a centred CatHive-green spinner with the line under it. */
.ch-pipes {
	margin: var(--ch-space-3) 0; /* below the parts, above the fitting kits (2026-10-18) */
	text-align: center;
	font-size: var(--ch-step-small);
}
.ch-pipes p { margin: 0.6em auto 0; max-width: 34em; }
.ch-pipes.is-running .ch-spinner {
	display: inline-block;
	width: 2.5em;
	height: 2.5em;
	border-width: 4px;
}
/* The visitor's question (owner 2026-10-19, Cathive_Fit_Question): one thing a driver can tell us that decides the
   parts below it. The research banner's green edge and tint; answers as a pair of buttons, chips or a list; the
   chosen one filled Catalyst like the primary button. Tokens only; colours follow the surrounding text. */
.ch-fitq {
	margin: 0 0 var(--ch-space-3);
	padding: var(--ch-space-2);
	border-left: 3px solid var(--ch-catalyst);
	border-radius: 0 var(--ch-radius) var(--ch-radius) 0;
	background: color-mix(in srgb, var(--ch-catalyst) 8%, transparent);
}
.ch-fitq-title {
	margin: 0;
	font-family: var(--ch-font-display);
	font-weight: 700;
	font-size: var(--ch-step-body);
	line-height: 1.3;
}
.ch-fitq-why,
.ch-fitq-hint,
.ch-fitq-answer,
.ch-fitq-busy {
	margin: var(--ch-space-1) 0 0;
	font-size: var(--ch-step-small);
}
.ch-fitq-hint { color: var(--ch-text-secondary-on-dark); }
.ch-fitq-choices {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ch-space-1);
	margin-top: var(--ch-space-2);
}
.ch-fitq-option {
	min-height: 44px;
	padding: 0 var(--ch-space-3);
	border: 2px solid var(--ch-border-dark);
	border-radius: var(--ch-radius);
	background: var(--ch-surface-card, transparent);
	color: inherit;
	font-family: var(--ch-font-display);
	font-weight: 700;
	font-size: var(--ch-step-body);
	cursor: pointer;
}
.ch-fitq-choices--pair .ch-fitq-option { flex: 1 1 9em; }
.ch-fitq-option.is-chip {
	min-height: 40px;
	padding: 0 var(--ch-space-2);
	border-radius: 2em;
	font-size: var(--ch-step-small);
}
.ch-fitq-option:hover { border-color: var(--ch-catalyst-deep); }
.ch-fitq-option.is-on {
	background: var(--ch-catalyst);
	border-color: var(--ch-catalyst);
	color: var(--ch-ink);
}
.ch-fitq-option:disabled,
.ch-fitq-unsure:disabled { cursor: progress; opacity: 0.7; }
.ch-fitq-select {
	min-height: 44px;
	min-width: 14em;
	padding: 0 var(--ch-space-1);
	border: 2px solid var(--ch-border-dark);
	border-radius: var(--ch-radius);
	font-size: var(--ch-step-body);
}
.ch-fitq-unsure,
.ch-fitq-change {
	min-height: 44px;
	padding: 0 var(--ch-space-1);
	border: 0;
	background: none;
	color: var(--ch-text-on-dark); /* A8 (2026-10-19): Catalyst deep on the tint was 3.31:1; the underline keeps the accent */
	font: inherit;
	text-decoration: underline;
	text-decoration-color: var(--ch-catalyst);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	cursor: pointer;
}
.ch-fitq-change { min-height: 0; padding: 0; }
.ch-fitq-busy { display: flex; align-items: center; gap: var(--ch-space-1); }
.ch-fitq.is-answered { padding-block: var(--ch-space-1); }
@media (max-width: 480px) {
	.ch-fitq-choices--pair .ch-fitq-option { flex-basis: 100%; }
	.ch-fitq-select { flex: 1 1 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ch-spinner { animation-duration: 3s; }
}
.ch-research-tick {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	border-radius: 50%;
	background: var(--ch-catalyst);
	position: relative;
}
.ch-research-tick::after {
	content: "";
	position: absolute;
	left: 0.36em;
	top: 0.18em;
	width: 0.3em;
	height: 0.55em;
	border: solid var(--ch-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
/* "Checking fit…" on a result card while the lookup research checks that part (owner 2026-10-06): the card
   stays usable; the chip goes when the check ends. */
.ch-chip--checking {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	border-style: dashed;
	border-color: var(--ch-catalyst);
}
.ch-chip--checking .ch-spinner {
	width: 0.85em;
	height: 0.85em;
	border-width: 2px;
}
.ch-chip--fit-outline {
	background: transparent;
	border: 1.5px solid var(--ch-catalyst);
	color: inherit;
	font-weight: 600;
}
/* Two or more parts of one type in different places on the vehicle (finder.js placesText(), 2026-10-27). */
.ch-finder-group-places {
	margin: 0 0 var(--ch-space-2);
	padding: var(--ch-space-1) var(--ch-space-2);
	border-left: 3px solid var(--ch-catalyst);
	background: var(--ch-catalyst-tint);
	font-size: var(--ch-step-small);
	color: inherit;
}
.ch-finder-result-research {
	font-size: var(--ch-step-small);
	padding: 0.35em var(--ch-space-1);
	border-left: 3px solid var(--ch-catalyst);
	background: var(--ch-catalyst-tint);
}
.ch-finder-result.is-checked .ch-finder-result-link {
	box-shadow: inset 3px 0 0 var(--ch-catalyst);
}
.ch-research-out {
	margin: var(--ch-space-1) 0 var(--ch-space-3);
	font-size: var(--ch-step-small);
}
.ch-research-out > summary {
	cursor: pointer;
	padding: 0.4em 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ch-research-out .ch-finder-result { opacity: 0.85; }
/* Phase 4 (owner 2026-10-11, brief reg-lookup-fit-research-phase-4.md §3.3, F9): the demoted pills, and each part
   type's open "Unlikely to fit your vehicle" section (replaces the fold above and the move to the end of the group). */
.ch-chip--wont {
	background: var(--ch-signal-amber);
	border-color: var(--ch-signal-amber);
	color: var(--ch-ink);
	font-weight: 600;
}
.ch-chip--unlikely {
	background: transparent;
	border: 1.5px solid var(--ch-signal-amber);
	color: inherit;
	font-weight: 600;
}
.ch-chip--alt { border-color: var(--ch-catalyst); font-weight: 600; } /* F16: "DPF only" / "… in one unit" */
.ch-unlikely {
	margin: var(--ch-space-2) 0 var(--ch-space-3);
	padding-left: var(--ch-space-2);
	border-left: 3px solid var(--ch-signal-amber);
}
.ch-unlikely-heading {
	margin: 0;
	font-weight: 700;
	color: var(--ch-text-on-dark);
}
/* Collapsed by default (owner 2026-10-19): the heading is a button with a down-pointing chevron (up when open); the list
   grows from no height and fades in (grid rows 0fr → 1fr, so no height in pixels is needed), and is out of the
   keyboard order while closed. */
.ch-unlikely-toggle {
	display: flex;
	align-items: center;
	gap: 0.35em;
	width: 100%;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}
.ch-unlikely-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.ch-unlikely-chevron {
	flex: 0 0 auto;
	width: 0.55em;
	height: 0.55em;
	margin: -0.2em 0 0 0.4em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.3s ease, margin 0.3s ease;
}
.ch-unlikely.is-open .ch-unlikely-chevron {
	margin-top: 0.25em;
	transform: rotate(-135deg);
}
.ch-unlikely-body {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	transition: grid-template-rows 0.35s ease, opacity 0.2s ease, visibility 0s linear 0.35s;
}
.ch-unlikely-body > .ch-finder-result-list {
	min-height: 0;
	overflow: hidden;
}
.ch-unlikely.is-open .ch-unlikely-body {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition: grid-template-rows 0.35s ease, opacity 0.35s ease 0.1s, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
	.ch-unlikely-body,
	.ch-unlikely.is-open .ch-unlikely-body,
	.ch-unlikely-chevron { transition: none; }
}
.ch-unlikely-heading .ch-finder-group-count {
	display: inline-block;
	min-width: 1.6em;
	margin-left: 0.35em;
	padding: 0 0.45em;
	border-radius: 999px;
	background: var(--ch-border-dark);
	font-family: var(--ch-font-mono);
	font-size: 0.8em;
	text-align: center;
}
.ch-unlikely .ch-finder-result { opacity: 0.9; }
.ch-plate-vehicle-guarantee {
	margin: calc(-1 * var(--ch-space-1)) 0 var(--ch-space-2);
	color: var(--ch-text-secondary-on-dark);
	font-size: var(--ch-step-small);
}
.ch-plate-vehicle-guarantee a { color: var(--ch-link-on-dark); font-weight: 600; }
.ch-research-pick {
	margin: 0 0 var(--ch-space-2);
	padding: var(--ch-space-2);
	border: 1.5px solid var(--ch-catalyst);
	border-radius: 8px;
	background: color-mix(in srgb, var(--ch-catalyst) 8%, transparent);
	font-size: var(--ch-step-small);
}
.ch-research-pick .ch-btn,
.ch-research-pick a {
	margin-top: var(--ch-space-1);
	display: inline-block;
}

/* ---- Registration results, UX report 2026-10-19 (A3, A5, A9, B2, B3, B4) ----
   Tokens only; colours follow the finder panel's "-dark" roles (light mode makes them Ink / Slate on white). */

/* A3: the summary under "We found: …": how many parts fit, the main part's price, free delivery with its date. */
.ch-results-summary {
	margin: 0 0 var(--ch-space-2);
	padding: 0.6rem 0.75rem;
	border-left: 3px solid var(--ch-catalyst);
	border-radius: 0 var(--ch-radius) var(--ch-radius) 0;
	background: color-mix(in srgb, var(--ch-catalyst) 8%, transparent);
}
.ch-results-summary p {
	margin: 0;
}
.ch-results-summary .ch-results-summary-main {
	color: var(--ch-text-on-dark);
	font-size: var(--ch-step-body);
	line-height: 1.4;
}
.ch-results-summary-date {
	color: var(--ch-text-secondary-on-dark);
	font-size: var(--ch-step-small);
	font-weight: 400;
}
.ch-results-summary-price {
	margin-top: 0.15em;
	font-weight: 600;
	color: var(--ch-text-on-dark);
}
.ch-results-summary-delivery,
.ch-results-summary-keep {
	margin-top: 0.25em;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--ch-text-on-dark);
}
.ch-results-summary .ch-plate-vehicle-guarantee {
	margin: 0.35em 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
}
.ch-results-summary-keep a {
	font-weight: 600;
}
@media screen and (max-width: 37.5em) {
	.ch-results-summary .ch-results-summary-main,
	.ch-results-summary-price {
		font-size: 0.9375rem;
	}
}
/* Links in the results' new blocks are body-coloured and underlined in Catalyst: Catalyst deep text is 3.58:1 on white
   (A8), under the 4.5:1 that text this size needs. */
.ch-results-summary a,
.ch-results-after a,
.ch-results-after .ch-linkbtn,
.ch-results-trust a,
.ch-finder-result-guarantee a,
.ch-finder-results .ch-finder-group-heading small a,
.ch-finder-results .ch-results-summary a:hover,
.ch-finder-results .ch-results-after a:hover,
.ch-finder-results .ch-results-trust a:hover,
.ch-finder-results .ch-finder-result-guarantee a:hover,
.ch-finder-results .ch-finder-group-heading small a:hover {
	color: var(--ch-text-on-dark); /* also on hover: `.ch-on-dark a:hover` is the bright green, 1.9:1 on white */
	text-decoration: underline;
	text-decoration-color: var(--ch-catalyst);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* A3: the research / catalogue banner over a list of parts is a small status chip under the summary. */
.ch-research.ch-research--chip {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.2em 0.5em;
	max-width: 100%;
	margin: 0 0 var(--ch-space-2);
	padding: 0.3em 0.75em;
	border: 1px dashed var(--ch-catalyst);
	border-radius: 1em;
	background: color-mix(in srgb, var(--ch-catalyst) 6%, transparent);
	font-size: 0.8125rem;
	line-height: 1.35;
}
.ch-research--chip .ch-research-text {
	flex: 1 1 auto;
}
.ch-research--chip .ch-spinner {
	width: 1em;
	height: 1em;
	border-width: 2px;
}
.ch-research--chip .ch-research-progress {
	flex-basis: auto;
}

/* A5: a part type with nothing left that fits keeps only its "… unlikely to fit your vehicle" line. */
.ch-finder-group.is-empty {
	margin-top: var(--ch-space-3);
}
.ch-finder-group-none {
	margin: 0 0 0.25em;
	font-size: var(--ch-step-small);
	color: var(--ch-text-on-dark);
}

/* A9: standalone kits behind a button when every part above includes its kit. */
.ch-finder-kits.is-optional .ch-finder-kits-heading {
	font-family: var(--ch-font-body);
	font-weight: 400;
	font-size: var(--ch-step-small);
	color: var(--ch-text-secondary-on-dark);
}
.ch-kits-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ch-text-on-dark);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.ch-kits-toggle:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ch-kits-toggle .ch-finder-group-count {
	display: inline-block;
	min-width: 1.6em;
	padding: 0 0.45em;
	border-radius: 999px;
	background: var(--ch-border-dark);
	font-family: var(--ch-font-mono);
	font-size: 0.8em;
	text-align: center;
}
.ch-kits-toggle[aria-expanded="true"] .ch-unlikely-chevron {
	margin-top: 0.25em;
	transform: rotate(-135deg);
}
.ch-kits-body[hidden] {
	display: none;
}

/* B2 + B4: getting it fitted (send the parts to a garage) and keeping the results (email, link). */
.ch-results-after {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--ch-space-2);
	margin: var(--ch-space-4) 0 var(--ch-space-2);
}
.ch-results-after section {
	padding: var(--ch-space-2);
	border: 1px solid var(--ch-border-dark);
	border-radius: var(--ch-radius);
	background: var(--ch-surface-dark-card);
	color: var(--ch-text-on-dark);
	font-size: var(--ch-step-small);
	line-height: 1.5;
}
.ch-results-after p {
	margin: 0 0 var(--ch-space-1);
}
.ch-after-title {
	margin: 0 0 var(--ch-space-1);
	font-family: var(--ch-font-display);
	font-size: var(--ch-step-body);
	font-weight: 700;
	color: var(--ch-text-on-dark);
}
.ch-share-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ch-space-1);
	margin: var(--ch-space-1) 0;
}
.ch-results-after .ch-btn {
	min-height: 44px;
	padding: 0.5rem var(--ch-space-2);
	font-size: var(--ch-step-small);
}
.ch-results-after a {
	font-weight: 600;
}
.ch-keep-form label {
	display: block;
	margin: 0 0 0.25em;
	font-weight: 600;
}
.ch-keep-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ch-space-1);
}
.ch-keep-row input[type="email"] {
	flex: 1 1 12rem;
	width: 0;
	min-width: 0;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 1px solid var(--ch-slate);
	border-radius: var(--ch-radius);
	background: var(--ch-cloud);
	color: var(--ch-ink);
	font: inherit;
	font-size: var(--ch-step-body);
}
.ch-keep-row .ch-btn {
	flex: 0 0 auto;
}
.ch-keep-note {
	margin-top: 0.35em;
	color: var(--ch-text-secondary-on-dark);
}
.ch-keep-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.5em;
	margin-top: var(--ch-space-1);
}
.ch-keep-link .ch-linkbtn {
	min-height: 44px;
	font-weight: 600;
}
.ch-keep-status,
.ch-share-status {
	margin: var(--ch-space-1) 0 0;
	padding: 0.4em var(--ch-space-1);
	border-left: 3px solid var(--ch-catalyst);
	background: var(--ch-catalyst-tint);
}
.ch-keep-status:empty,
.ch-share-status:empty {
	display: none;
}
.ch-keep-status.is-error,
.ch-share-status.is-error {
	border-left-color: var(--ch-signal-amber-deep);
	background: var(--ch-amber-tint);
}
.ch-share-url-label {
	display: block;
}
.ch-share-url {
	display: block;
	width: 100%;
	min-height: 44px;
	margin-top: 0.25em;
	padding: 0 0.5rem;
	border: 1px solid var(--ch-slate);
	border-radius: var(--ch-radius);
	font-family: var(--ch-font-mono);
	font-size: 0.8125rem;
}

/* B3: what a first-time buyer checks, once, under the results. */
.ch-results-trust {
	margin: var(--ch-space-2) 0;
	font-size: var(--ch-step-small);
	color: var(--ch-text-on-dark);
}
.ch-trust-points {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 0.4em var(--ch-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}
.ch-trust-points li {
	position: relative;
	padding-left: 1.4em;
	line-height: 1.45;
}
.ch-trust-points li::before {
	content: "";
	position: absolute;
	left: 0.2em;
	top: 0.3em;
	width: 0.35em;
	height: 0.65em;
	border: solid var(--ch-catalyst-deep);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ch-results-trust a {
	font-weight: 600;
}
.ch-trust-company {
	margin: var(--ch-space-2) 0 0;
	color: var(--ch-text-secondary-on-dark);
	font-size: 0.8125rem;
}

/* ---- A customer's testimonial and the quiet Trustpilot link (owner 2026-10-20; report 2026-10-20-ux-testimonial-trustpilot-link) ----
   One block (cathive_testimonial()), once per page: after the registration results' parts (finder.js quoteHtml) and under
   the product page's delivery line. Phones: the excerpt and "Read all" (trust.js puts .ch-quote-open on <html>); from 40em the
   whole review. No stars, no score, no logo on the quote. Colours through roles, so a "-dark" surface reads right too. */
.ch-testimonial {
	--ch-q-text: var(--ch-text-body);
	--ch-q-muted: var(--ch-text-secondary);
	--ch-tp-color: var(--ch-q-text);
	width: 100%;
	max-width: 40rem;
	color: var(--ch-q-text);
}
.ch-on-dark .ch-testimonial {
	--ch-q-text: var(--ch-text-on-dark);
	--ch-q-muted: var(--ch-text-secondary-on-dark);
}
.ch-finder-results .ch-testimonial {
	margin: var(--ch-space-4) 0 0;
}
.ch-testimonial-figure {
	position: relative;
	margin: 0;
	padding-left: 1.75rem;
}
.ch-testimonial-mark {
	position: absolute;
	top: -0.15rem;
	left: 0;
	font-family: var(--ch-font-display);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--ch-catalyst);
}
.ch-testimonial-quote {
	margin: 0;
	padding: 0;
	border: 0;
}
.ch-testimonial-quote p {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
}
.ch-testimonial-full {
	display: none;
}
.ch-quote-open .ch-testimonial-full {
	display: inline;
}
.ch-quote-open .ch-testimonial-short,
.ch-quote-open .ch-testimonial-more {
	display: none;
}
/* "Read all" sits in the text's line; its 46px touch area comes from padding that negative margins keep out of the line. */
.ch-testimonial-more {
	display: inline-block;
	margin: -0.75rem -0.5rem;
	padding: 0.75rem 0.5rem;
	border: 0;
	background: none;
	color: var(--ch-q-text);
	font: inherit;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: var(--ch-catalyst);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	cursor: pointer;
}
/* The keyboard ring hugs the words, not the padded touch area (which reaches into the lines above and below). */
.ch-testimonial-more:focus-visible {
	outline: none;
}
.ch-testimonial-more:focus-visible .ch-testimonial-more-label {
	outline: 3px solid var(--ch-focus-ring);
	outline-offset: 3px;
	border-radius: 2px;
}
.ch-testimonial-by {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--ch-q-muted);
}
.ch-tp-line {
	margin: 0.4rem 0 0 1.75rem; /* room for the link's focus ring under the attribution */
}
@media screen and (min-width: 40em) {
	.ch-testimonial-full {
		display: inline;
	}
	.ch-testimonial-short,
	.ch-testimonial-more {
		display: none;
	}
}
/* The link itself (footer, Contact page, under the testimonial): a 44px target, body-coloured with a Catalyst underline
   (Catalyst deep text is under 4.5:1 on white), the external-link icon, "(opens in a new tab)" for screen readers. */
a.ch-tp-link,
a.ch-tp-link:visited,
a.ch-tp-link:hover,
a.ch-tp-link:focus,
a.ch-tp-link:active {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	min-height: 44px;
	color: var(--ch-tp-color, var(--ch-text-body));
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--ch-catalyst);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}
a.ch-tp-link:hover {
	text-decoration-thickness: 3px;
}
.ch-tp-ext {
	flex: none;
}
.ch-contact-tp {
	margin-top: var(--ch-space-3);
}
.site-footer .ch-footer-tp {
	--ch-tp-color: var(--ch-text-secondary-on-dark);
	margin: calc(-1 * var(--ch-space-1)) 0;
}
.site-footer .ch-footer-tp a.ch-tp-link {
	font-size: var(--ch-step-small);
	font-weight: 400;
	text-decoration-color: currentColor;
	text-decoration-thickness: 1px;
}

/* A9: "Buy Fitting Kit Only" stays off the results' path: hidden while the homepage shows results. */
.ch-hero:has(.ch-finder-results:not([hidden])) .ch-kit-only-cta {
	display: none;
}

.ch-landing-page .ch-finder-group-heading,
.ch-landing-results .ch-finder-group-heading {
	color: var(--ch-ink);
}

.ch-landing-results .ch-finder-result-engine {
	color: var(--ch-text-body);
}

.ch-landing-page .ch-finder-group-heading small,
.ch-landing-results .ch-finder-result-note {
	color: var(--ch-slate);
}

.ch-landing-page .ch-finder-group-heading small a {
	color: var(--ch-link-on-light);
}

.ch-finder-result-price {
	font-weight: 600;
	color: var(--ch-text-on-dark);
}

/* Phones (2026-09-04, mobile review before the BM manager's look; compact since UX report 2026-10-19 A2, when cards
   were 500–560 px tall and the first price sat below the screen): a 72px photo beside the name, the pills and the price;
   any warning and a note that tells the parts apart under them, full width. The body span becomes display:contents so
   its children take grid areas without changing the markup shared with the landing pages. */
@media screen and (max-width: 37.5em) {
	/* The homepage results use the finder panel's full width on a phone (its 32px padding left 276px for cards). */
	.ch-hero .ch-finder > .ch-finder-results {
		margin-left: calc(-1 * var(--ch-space-2));
		margin-right: calc(-1 * var(--ch-space-2));
	}

	.ch-finder-result-link {
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr);
		align-items: center;
		column-gap: 0.75rem;
		row-gap: 0.4rem;
		padding: 0.75rem;
	}

	.ch-finder-result-link img {
		grid-column: 1;
		grid-row: 1;
		width: 64px;
		height: 64px;
	}

	.ch-finder-result-body {
		display: contents;
	}

	.ch-finder-result-name {
		grid-column: 2;
		grid-row: 1;
		font-size: 0.9375rem;
	}

	/* Everything after the name spans the card, in source order: pills, any warning, a note, the price. Only what a card
	   has makes a row (named areas left empty rows and their gaps: 70px of blank under the price). */
	.ch-finder-result-sku,
	.ch-finder-result-chips,
	.ch-finder-result-warning,
	.ch-finder-result-engine,
	.ch-finder-result-research,
	.ch-finder-result-note,
	.ch-finder-result-price {
		grid-column: 1 / -1;
	}

	.ch-finder-result-chips .ch-chip {
		font-size: 0.8125rem;
	}

	/* The disclosure and the card's buttons span the card (outside the link, so not in its grid). */
	.ch-finder-result-actions {
		gap: var(--ch-space-1);
		padding: 0 0.75rem 0.75rem;
	}

	.ch-why-body {
		padding: 0 0.75rem 0.75rem;
	}
}

/*--------------------------------------------------------------
# Trust strip (§1.4/§6.3)
--------------------------------------------------------------*/

.ch-trust-strip {
	background: var(--ch-surface-page);
	padding: var(--ch-space-4) var(--ch-space-3);
}

.ch-trust-strip-inner {
	max-width: var(--ch-max-width);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ch-space-4);
}

.ch-trust-item {
	display: flex;
	align-items: center;
	gap: var(--ch-space-1);
	font-family: var(--ch-font-body);
	font-weight: 500;
	color: var(--ch-text-body);
	font-size: var(--ch-step-small);
}

/* A trust item that links to its backing promise is coloured as a
   link (owner call 2026-07-20: an interactive item shouldn't read as
   static text beside its non-link siblings). :visited is pinned to the
   same colour — without it, browser a:visited specificity beats the
   class and the item changed colour after the first visit. */
.ch-trust-item--link,
.ch-trust-item--link:visited {
	color: var(--ch-link-on-light);
	text-decoration: none;
}

.ch-trust-item--link:hover span:last-child,
.ch-trust-item--link:focus span:last-child {
	text-decoration: underline;
}

/* Single hex cell as a bullet/badge shape (§1.4) */
.ch-hex-badge {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	background: var(--ch-catalyst-deep);
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	flex: 0 0 auto;
}

/* Homepage "Popular vehicles / Shop by part type / Advice" links (SEO report 2026-10-01 rec. 1). Owner 2026-10-17: a quiet
   three-column index of small plain links (it was ~40 bordered chips); every link stays (crawl routes into the vehicle
   pages, categories and the latest posts). The chips elsewhere (.ch-landing-link-row on vehicle pages) are unchanged. */
.ch-home-links {
	background: var(--ch-surface-page);
	padding: var(--ch-space-4) var(--ch-space-3) var(--ch-space-5);
}

.ch-home-links-inner {
	max-width: var(--ch-max-width);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--ch-space-3) var(--ch-space-5);
	padding-top: var(--ch-space-3);
	border-top: 1px solid var(--ch-mist-light);
}

.ch-home-links h2 {
	font-size: var(--ch-step-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ch-text-secondary);
	margin: 0 0 var(--ch-space-2);
}

.ch-home-links .ch-landing-link-row {
	display: block;
	font-size: var(--ch-step-small);
	line-height: 2; /* UX Batch B §2 F5: 28px between the rows, so each 17px-tall link has the 24px clear space (WCAG 2.5.8; axe found 8 on a phone at 1.7) */
}

.ch-home-links .ch-landing-link-row li a {
	display: inline;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--ch-text-secondary);
	text-decoration: none;
}

.ch-home-links .ch-landing-link-row li a:hover,
.ch-home-links .ch-landing-link-row li a:focus-visible {
	color: var(--ch-link-on-light);
	text-decoration: underline;
}

/* Vehicles and part types run on as text separated by dots; the guides keep a line each (long titles). */
.ch-home-links-col:not(:last-child) .ch-landing-link-row li {
	display: inline;
}

.ch-home-links-col:not(:last-child) .ch-landing-link-row li a {
	white-space: nowrap; /* "Audi A4" never splits across lines */
}

.ch-home-links-col:not(:last-child) .ch-landing-link-row li:not(:last-child)::after {
	content: "\00a0· "; /* the dot stays with the word before it */
	color: var(--ch-text-secondary);
	opacity: 0.45;
}

.ch-home-links-col:last-child .ch-landing-link-row li + li {
	margin-top: var(--ch-space-1);
}

.ch-home-links .ch-landing-link-row .ch-home-links-more a {
	color: var(--ch-link-on-light);
}

.ch-home-links-col:last-child .ch-home-links-more {
	display: inline-block;
	margin-right: var(--ch-space-3);
}

@media (max-width: 47.99rem) {
	.ch-home-links-inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--ch-space-4);
	}
}

/*--------------------------------------------------------------
# SEO landing pages (§5.3) — make/model/engine hubs
--------------------------------------------------------------*/

.ch-landing-page {
	max-width: var(--ch-max-width);
	margin: 0 auto;
	padding: var(--ch-space-4) var(--ch-space-3) var(--ch-space-6);
}

.ch-breadcrumb ol {
	list-style: none;
	margin: 0 0 var(--ch-space-3);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
	font-size: var(--ch-step-small);
	color: var(--ch-text-secondary);
}

.ch-breadcrumb li {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.ch-breadcrumb li:not(:last-child)::after {
	content: '/';
	color: var(--ch-mist-light);
}

/* BM Catalysts manufacturer page: logo sizing. */
.ch-bm-page-logo img {
	height: 64px;
	width: auto;
}

/* Editorial/generated blurb under landing-page h1s (2026-07-23). */
.ch-landing-blurb {
	max-width: 72ch;
	margin: 0 0 var(--ch-space-2);
	color: var(--ch-text-body);
}

/* "Model of interest" editorial paragraph — subtle catalyst accent so
   it reads as deliberate colour, not more boilerplate. */
.ch-landing-blurb--feature {
	border-left: 3px solid var(--ch-catalyst);
	padding-left: var(--ch-space-2);
	font-weight: 500;
}

.ch-landing-intro {
	color: var(--ch-text-secondary);
	max-width: 40rem;
}

.ch-landing-subhead {
	margin-top: var(--ch-space-5);
}

.ch-landing-link-grid,
.ch-landing-link-row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ch-space-2);
}

.ch-landing-link-grid li a,
.ch-landing-link-row li a {
	display: inline-block;
	padding: var(--ch-space-1) var(--ch-space-2);
	background: var(--ch-cloud);
	border: 1px solid var(--ch-mist-light);
	border-radius: var(--ch-radius);
	color: var(--ch-link-on-light);
	text-decoration: none;
}

.ch-landing-link-grid li a:hover,
.ch-landing-link-row li a:hover {
	border-color: var(--ch-catalyst-deep);
}

/* .ch-finder-result-link is styled for the dark homepage hero by
   default (white text) — landing pages sit on the plain light page
   background, so override to the light-surface text tokens. Without
   this the product name/price render white-on-white (caught via
   screenshot, not just markup review). */
.ch-landing-results .ch-finder-result-link {
	color: var(--ch-text-body);
	border: 1px solid var(--ch-mist-light);
	border-radius: var(--ch-radius);
}

.ch-landing-results .ch-finder-result-link:hover {
	background: var(--ch-off-white);
}

.ch-landing-results .ch-finder-result-sku {
	color: var(--ch-link-on-light);
}

.ch-landing-results .ch-chip {
	color: var(--ch-text-secondary);
	border-color: var(--ch-mist-light);
}

/* The compact card's parts on the light vehicle pages (UX report 2026-10-19 A2/A8): the light-surface text tokens, as
   above (the "-dark" ones are for the finder's panel, and would turn white if light mode were switched off). */
.ch-landing-results .ch-finder-result a.ch-finder-result-link,
.ch-landing-results .ch-finder-result a.ch-finder-result-link:visited,
.ch-landing-results .ch-finder-result a.ch-finder-result-link:hover,
.ch-landing-results .ch-finder-result a.ch-finder-result-link:focus,
.ch-landing-results .ch-finder-result-price,
.ch-landing-results .ch-why-body,
.ch-landing-results .ch-chip.ch-chip--kit {
	color: var(--ch-text-body);
}

/* ---- Fitting kits (owner request 2026-09-18) ----------------------------
   Homepage: one plate-yellow button centred under the finder panel that
   leads to the kits-only search page. The yellow is the reg-plate token
   (deliberately outside the brand palette, like the plate itself). */
.ch-kit-only-cta {
	margin: var(--ch-space-3) 0 0;
	display: flex;
	justify-content: center;
}

.ch-btn-plate {
	background: var(--ch-plate-yellow);
	color: var(--ch-ink);
	border: 2px solid var(--ch-plate-yellow-border);
	padding-top: calc(var(--ch-space-2) - 2px);
	padding-bottom: calc(var(--ch-space-2) - 2px);
}

/* .ch-on-dark a (and its hover/focus) outranks a single class, so the
   button's black text needs the same specificity or the hero's green
   link colour wins — which is exactly what the first render showed. */
.ch-on-dark a.ch-btn-plate,
.ch-on-dark a.ch-btn-plate:hover,
.ch-on-dark a.ch-btn-plate:focus,
.ch-on-dark a.ch-btn-plate:active {
	color: var(--ch-ink);
	text-decoration: none;
}

.ch-btn-plate:hover,
.ch-btn-plate:focus-visible {
	background: var(--ch-plate-yellow-hover);
	color: var(--ch-ink);
}

/* Kits page: same dark hero as the homepage, full-bleed (it is not a
   prose page, so the body:not(.home) wrapper padding must not apply). */
body.page-template-page-fitting-kits .site-main {
	max-width: none;
	padding: 0;
	display: flex;
	flex-direction: column;
}

body.page-template-page-fitting-kits .ch-hero {
	flex: 1 0 auto;
}

.ch-kit-warning {
	margin: 0 0 var(--ch-space-4);
	padding: var(--ch-space-2) var(--ch-space-3);
	border: 2px solid var(--ch-plate-yellow);
	border-radius: var(--ch-radius);
	background: color-mix(in srgb, var(--ch-plate-yellow) 16%, transparent);
	color: var(--ch-text-on-dark);
	text-align: left;
	font-size: var(--ch-step-body);
}

.ch-kit-warning strong {
	/* Light mode: plate yellow fails on the pale panel; the amber signal
	   colour keeps the "warning" reading with contrast. */
	color: var(--ch-ink);
}

.ch-kit-warning a {
	color: var(--ch-link-on-dark);
}

.ch-kit-code {
	margin-bottom: 0;
}

.ch-kit-code-label {
	display: block;
	font-family: var(--ch-font-display);
	font-weight: 700;
	margin: 0 0 var(--ch-space-1);
}

.ch-kit-code-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ch-space-2);
}

.ch-kit-code-field {
	flex: 1 1 14rem;
	width: 0;
	min-width: 0;
	height: 2.75rem;
	padding: 0 var(--ch-space-2);
	border-radius: var(--ch-radius);
	border: 1px solid var(--ch-border-dark);
	background: var(--ch-ink);
	color: var(--ch-text-on-dark);
	font-family: var(--ch-font-mono);
	font-size: 1rem;
	text-transform: uppercase;
}

/* The theme's generic input[type="text"] and :focus rules set a dark
   text colour; typed codes were black on the dark panel (owner,
   2026-09-18). Higher specificity, both states. */
.ch-kit-code-form input.ch-kit-code-field,
.ch-kit-code-form input.ch-kit-code-field:focus {
	color: var(--ch-text-on-dark);
	background: var(--ch-cloud);
}

.ch-kit-code-field::placeholder {
	text-transform: none;
	color: var(--ch-text-secondary-on-dark);
	font-family: var(--ch-font-body);
}

.ch-kit-code-field:focus-visible {
	outline: 2px solid var(--ch-catalyst);
	outline-offset: 2px;
}

.ch-kit-code-row .ch-btn {
	height: 2.75rem;
}

.ch-kit-code-results {
	margin-top: var(--ch-space-3);
}

/* On the kits page every kit is the point: no collapsed list, no fade. */
.ch-kit-list-full {
	max-height: none;
}

@media (max-width: 37.5em) {
	.ch-kit-code-row .ch-btn {
		margin-left: auto;
		margin-right: auto;
	}

	/* The full placeholder ("Kit code (FK91752C) or part code (BM91752H)")
	   was truncated in a ~280px field at 16px (owner, 2026-09-18). */
	.ch-kit-code-field::placeholder {
		font-size: 0.75rem;
	}
}

/* ---- Compact mobile header (report #1 rec. 4, owner 2026-09-18) ----
   On phones the full-width search row is hidden behind a magnifier icon
   in the icon group (account / basket), so every page — the product page
   above all — shows its content a row sooner. Desktop is unchanged. */
.ch-header-search-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 0.25rem;
	margin-left: auto; /* first of the icon group on mobile: pushes the group right */
	color: var(--ch-text-on-dark);
	cursor: pointer;
	line-height: 0;
}

.ch-header-search-toggle[aria-expanded="true"] {
	color: var(--ch-catalyst);
}

@media screen and (max-width: 37.4375em) {
	.ch-header-search-toggle {
		display: inline-flex;
	}

	.site-header .ch-account-link {
		margin-left: 0;
	}

	.ch-header-search {
		display: none;
	}

	.ch-header-search.is-open {
		display: flex;
	}
}

/* Generic search hand-off notice above the finder (2026-09-18). */
.ch-finder-notice {
	margin: 0 0 var(--ch-space-3);
	padding: var(--ch-space-2) var(--ch-space-3);
	border: 1px solid var(--ch-catalyst);
	border-radius: var(--ch-radius);
	background: color-mix(in srgb, var(--ch-catalyst) 12%, transparent);
	color: var(--ch-text-on-dark);
	text-align: left;
}


/* ---------------------------------------------------------------------
   Light mode (2026-09-21) — separators the dark design never needed,
   because Ink against Off-white drew the line by itself. The "-dark"
   aliases now resolve to light values (tokens.css), so these rules give
   the header, announcement bar, hero and footer an edge again and keep
   the outline button and the kit-code field legible on white.
   ------------------------------------------------------------------ */
.ch-announcement,
.site-header,
.ch-hero,
.ch-fit-check {
	border-bottom: 1px solid var(--ch-border-light);
}

.site-footer {
	border-top: 1px solid var(--ch-border-light);
}

.ch-btn-secondary {
	border-color: var(--ch-ink);
}

.ch-kit-code-form input.ch-kit-code-field,
.ch-kit-code-form input.ch-kit-code-field:focus {
	color: var(--ch-ink);
	background: var(--ch-cloud);
}


/* ---------------------------------------------------------------------
   Mobile menu as a full-width panel (2026-09-21, owner). The nav row is a
   wrapping flex row; before this the opened <ul> was just another flex
   item and sat BESIDE the toggle. Now the menu container is sent to the
   end of the row at 100% width, so the open state is a bordered panel of
   full-width links under the icon row (and under the search row when
   that is open too). Desktop is untouched: the toggle is hidden and the
   list is the usual inline row from 55em up (37.5em until 2026-10-21).
   ------------------------------------------------------------------ */
@media screen and (max-width: 54.9375em) {
	/* Scoped below the desktop row (55em, see "Small menu"): an unscoped
	   display would out-rank the desktop "display: none" on .menu-toggle
	   (caught by the layout check). From 37.5em the search field stays
	   inline beside the toggle; only phones collapse it (magnifier). */
	.site-header .menu-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		min-height: 2.5rem;
	}
}

.site-header .ch-menu-icon--close,
.site-header .main-navigation.toggled .ch-menu-icon--open {
	display: none;
}

.site-header .main-navigation.toggled .ch-menu-icon--close {
	display: inline-block;
}

@media screen and (max-width: 54.9375em) {
	.site-header .menu-primary-container {
		order: 30;
		flex: 1 1 100%;
		min-width: 0;
	}

	.site-header .main-navigation.toggled ul {
		display: flex;
		flex-direction: column;
		align-items: stretch; /* the desktop row centres items; a column must not */
		gap: 0;
		margin-top: var(--ch-space-1);
		border-top: 1px solid var(--ch-border-dark);
	}

	.site-header .main-navigation.toggled li {
		width: 100%;
		border-bottom: 1px solid var(--ch-border-dark);
	}

	.site-header .main-navigation.toggled a {
		display: block;
		padding: 0.85rem var(--ch-space-1);
		font-size: 1.0625rem;
	}

	.site-header .main-navigation.toggled .current-menu-item > a {
		color: var(--ch-link-on-dark);
	}
}

/* Address suggestions (Google Places) under "Address line 1" at checkout and on
   My Account → Addresses — see assets/js/places.js. Fixed-positioned so it can
   sit under React-owned inputs without wrapping them. */
.ch-places { position: fixed; z-index: 100000; margin: 0; padding: 4px 0; list-style: none; background: var(--ch-cloud, #fff); color: var(--ch-ink, #11201D); border: 1px solid var(--ch-mist-light, #E2E7E4); border-radius: 6px; box-shadow: 0 8px 24px color-mix(in srgb, var(--ch-ink) 14%, transparent); font: 400 15px/1.35 var(--ch-font-body, system-ui, sans-serif); max-height: 320px; overflow: auto; }
.ch-places__item { padding: 8px 12px; cursor: pointer; }
.ch-places__item[aria-selected="true"], .ch-places__item:hover { background: var(--ch-off-white, #F4F6F4); }
.ch-places__main { font-weight: 600; }
.ch-places__sub { display: block; color: var(--ch-slate, #51625C); font-size: 13px; }
.ch-places__foot { padding: 6px 12px 4px; text-align: right; font-size: 11px; color: var(--ch-slate, #51625C); }
.ch-places__foot img { height: 16px; width: auto; vertical-align: middle; }

/* Blog (2026-09-26): /blog/ index, category archives, single posts, and the
   "Latest articles" block on the Help & Advice hub. 16:9 images throughout
   (image sizes cathive-blog-card 800x450, cathive-blog-hero 1600x900). */
.ch-breadcrumb {
	font-size: var(--ch-step-small);
	color: var(--ch-text-secondary);
	margin: 0 0 var(--ch-space-2);
}
.ch-breadcrumb a { color: var(--ch-text-secondary); }
.ch-breadcrumb a:hover, .ch-breadcrumb a:focus { color: var(--ch-link-on-light); }
.ch-breadcrumb__sep { margin: 0 0.35em; }

.ch-blog-header { max-width: 46rem; margin: 0 0 var(--ch-space-4); }
.ch-blog-title { font-family: var(--ch-font-display); font-size: var(--ch-step-h1); letter-spacing: var(--ch-tracking-display); margin: 0 0 var(--ch-space-1); }
.ch-blog-intro { color: var(--ch-text-secondary); font-size: 1.125rem; margin: 0; }
.ch-blog-advice { margin: var(--ch-space-5) 0 0; color: var(--ch-text-secondary); }

.ch-post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: var(--ch-space-3);
}
.ch-post-card {
	display: flex;
	flex-direction: column;
	background: var(--ch-surface-card);
	border: 1px solid var(--ch-border-light);
	border-radius: var(--ch-radius);
	overflow: hidden;
	min-width: 0;
	transition: box-shadow .15s ease, transform .15s ease;
}
.ch-post-card:hover { box-shadow: var(--ch-shadow-card); transform: translateY(-2px); }
.ch-post-card__media { display: block; aspect-ratio: 16 / 9; background: var(--ch-frost); overflow: hidden; }
.ch-post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-post-card__placeholder { display: block; width: 100%; height: 100%; }
.ch-post-card__body { display: flex; flex-direction: column; gap: var(--ch-space-1); padding: var(--ch-space-2) var(--ch-space-3) var(--ch-space-3); flex: 1; }
.ch-post-card__cat {
	align-self: flex-start;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ch-link-on-light);
	text-decoration: none;
}
.ch-post-card__title { font-family: var(--ch-font-display); font-size: 1.25rem; line-height: 1.25; margin: 0; }
.ch-post-card__title a { color: var(--ch-text-body); text-decoration: none; }
.ch-post-card__title a:hover, .ch-post-card__title a:focus { color: var(--ch-link-on-light); text-decoration: underline; }
.ch-post-card__excerpt { color: var(--ch-text-secondary); margin: 0; flex: 1; }
.ch-post-card__meta { font-size: var(--ch-step-small); color: var(--ch-text-secondary); margin: 0; }

.ch-blog .nav-links { display: flex; gap: var(--ch-space-1); margin-top: var(--ch-space-4); flex-wrap: wrap; }

/* Single post */
.ch-post { max-width: 60rem; margin: 0 auto; }
.ch-post-header { max-width: 46rem; margin: 0 auto var(--ch-space-3); }
.ch-post-title { font-family: var(--ch-font-display); font-size: var(--ch-step-h1); letter-spacing: var(--ch-tracking-display); line-height: 1.1; margin: var(--ch-space-1) 0; }
.ch-post-meta { color: var(--ch-text-secondary); font-size: var(--ch-step-small); margin: 0; }
.ch-post-hero { max-width: 46rem; margin: 0 auto var(--ch-space-4); } /* the width of the text column (owner 2026-10-01) */
.ch-post-hero img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--ch-radius); display: block; }
.ch-post-hero figcaption { font-size: var(--ch-step-small); color: var(--ch-text-secondary); margin-top: var(--ch-space-1); }
.ch-post .ch-breadcrumb { max-width: 46rem; margin-left: auto; margin-right: auto; }
.ch-post-content { max-width: 46rem; margin: 0 auto; font-size: 1.0625rem; line-height: 1.7; }
.ch-post-content h2 { font-family: var(--ch-font-display); font-size: var(--ch-step-h3); margin: var(--ch-space-4) 0 var(--ch-space-1); }
.ch-post-content h3 { font-size: 1.125rem; margin: var(--ch-space-3) 0 var(--ch-space-1); }
.ch-post-content ul, .ch-post-content ol { padding-left: 1.25em; }
.ch-post-content li { margin-bottom: 0.4em; }
.ch-post-content .ch-callout {
	background: var(--ch-frost);
	border-left: 4px solid var(--ch-catalyst);
	border-radius: 0 var(--ch-radius) var(--ch-radius) 0;
	padding: var(--ch-space-2) var(--ch-space-3);
	margin: var(--ch-space-3) 0;
}
.ch-post-content .ch-callout > :first-child { margin-top: 0; }
.ch-post-content .ch-callout > :last-child { margin-bottom: 0; }
.ch-post-content .ch-sources { font-size: var(--ch-step-small); color: var(--ch-text-secondary); border-top: 1px solid var(--ch-border-light); margin-top: var(--ch-space-5); padding-top: var(--ch-space-2); }
.ch-post-content .ch-sources ol { padding-left: 1.25em; }
.ch-post-content .ch-sources a { word-break: break-word; }

.ch-post-finder {
	margin: var(--ch-space-5) 0;
	padding: var(--ch-space-4) var(--ch-space-3);
	border-radius: var(--ch-radius);
	background: var(--ch-surface-dark);
	color: var(--ch-text-on-dark);
	text-align: center;
}
.ch-post-finder__title { font-family: var(--ch-font-display); font-size: var(--ch-step-h2); margin: 0 0 var(--ch-space-1); }
.ch-post-finder__sub { color: var(--ch-text-secondary-on-dark); margin: 0 auto var(--ch-space-3); max-width: 36rem; }
.ch-post-finder .ch-finder { text-align: left; }
.ch-post-more { margin-top: var(--ch-space-5); }
.ch-post-more h2, .ch-blog-latest h2 { font-family: var(--ch-font-display); font-size: var(--ch-step-h3); margin: 0 0 var(--ch-space-2); }

/* ---------------------------------------------------------------------
   Reg-lookup widget (owner 2026-10-01): template-parts/reg-lookup-widget.php.
   A dark panel; the label is a pill centred ON the panel's top edge (half
   above, half inside: translateY(-50%)). The results box slides open under
   the form (max-height 0 → open, 0.9 s ease like the kit "Show more") and
   scrolls inside itself.
   --------------------------------------------------------------------- */
.ch-reg-widget {
	position: relative;
	/* Same width as the homepage finder (.ch-hero-inner 46rem) plus the panel's own padding, centred. */
	box-sizing: border-box;
	width: 100%;
	max-width: calc(46rem + 2 * var(--ch-space-4) + 2px);
	margin: calc(var(--ch-space-5) + 0.9rem) auto var(--ch-space-5);
	padding: calc(var(--ch-space-4) + 0.4rem) var(--ch-space-4) var(--ch-space-4);
	border-radius: var(--ch-radius);
	border: 1px solid var(--ch-mist-light);
	box-shadow: var(--ch-shadow-card);
	background-color: var(--ch-surface-dark);
	color: var(--ch-text-on-dark);
	text-align: left;
}

/* The homepage's finder card, a little tighter inside the panel. */
.ch-reg-widget .ch-finder {
	padding: var(--ch-space-3);
}

.ch-reg-widget__label {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	padding: 0.45rem 1.1rem;
	max-width: calc(100% - 2 * var(--ch-space-3));
	width: max-content;
	border-radius: 999px;
	background: var(--ch-catalyst);
	color: var(--ch-ink);
	font-family: var(--ch-font-display);
	font-size: var(--ch-step-body);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	box-shadow: var(--ch-shadow-card);
}

.ch-reg-widget .ch-reg-widget__results {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.9s ease, margin-top 0.9s ease, padding-top 0.9s ease;
}

.ch-reg-widget.is-open .ch-reg-widget__results,
.ch-reg-widget__finder.is-open .ch-reg-widget__results {
	margin-top: var(--ch-space-3);
	padding-top: var(--ch-space-3);
	border-top: 1px solid var(--ch-border-dark);
	max-height: min(70vh, 36rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: var(--ch-space-1);
}

.ch-reg-widget__browse {
	margin: var(--ch-space-2) 0 0;
	text-align: center;
	font-size: var(--ch-step-small);
}

.ch-reg-widget__browse a {
	color: var(--ch-link-on-dark);
}

/* The vehicle pages restyle finder pieces for a light page (.ch-landing-page …): put the dark
   versions back inside the widget. */
.ch-reg-widget .ch-finder-kits-heading { color: var(--ch-text-secondary-on-dark); }
.ch-reg-widget .ch-kit-more { color: var(--ch-link-on-dark); }
.ch-reg-widget .ch-finder-no-results { color: var(--ch-text-on-dark); border-color: var(--ch-border-dark); background: color-mix(in srgb, var(--ch-ink) 4%, transparent); }
.ch-reg-widget .ch-finder-no-results a { color: var(--ch-link-on-dark); }
.ch-reg-widget .ch-finder-group-heading { color: var(--ch-text-on-dark); }
.ch-reg-widget .ch-finder-group-heading small { color: var(--ch-text-secondary-on-dark); }
.ch-reg-widget .ch-finder-group-heading small a { color: var(--ch-link-on-dark); }

@media (max-width: 600px) {
	.ch-reg-widget { padding: calc(var(--ch-space-3) + 0.9rem) var(--ch-space-2) var(--ch-space-3); }
	.ch-reg-widget .ch-finder { padding: var(--ch-space-2); }
	.ch-reg-widget__label { font-size: var(--ch-step-small); padding: 0.4rem 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
	.ch-reg-widget .ch-reg-widget__results { transition: none; }
}

/* Help & Advice hub */
.ch-blog-latest { margin-top: var(--ch-space-5); padding-top: var(--ch-space-4); border-top: 1px solid var(--ch-border-light); }
.ch-blog-latest__all { margin: var(--ch-space-2) 0 0; }

@media (max-width: 600px) {
	.ch-post-finder { padding: var(--ch-space-3) var(--ch-space-2); margin-left: calc(-1 * var(--ch-space-1)); margin-right: calc(-1 * var(--ch-space-1)); }
	.ch-post-content { font-size: 1rem; }
}

/* Fitment check after "Add to basket" (lookup research Phase 2): pill while it runs, verdict panel after. */
.ch-fitpill {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 100001;
	display: flex;
	align-items: center;
	gap: 0.6em;
	width: fit-content;
	max-width: min(720px, calc(100vw - 32px));
	margin: 0 auto;
	pointer-events: none; /* information only: never blocks what is under it (e.g. the cookie banner) */
	padding: 0.65em 1.1em;
	border-radius: 999px;
	background: var(--ch-cloud, #fff);
	color: var(--ch-ink, #11201D);
	box-shadow: 0 6px 24px color-mix(in srgb, var(--ch-ink) 18%, transparent);
	font-size: 0.95rem;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.ch-fitpill.is-in { opacity: 1; transform: translateY(0); }
@media (max-width: 600px) { .ch-fitpill { bottom: 84px; } } /* above the live chat's round button */
.ch-fitpanel {
	position: fixed;
	inset: 0;
	z-index: 100002;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.45s ease;
}
.ch-fitpanel.is-in { opacity: 1; }
.ch-fitpanel__box {
	pointer-events: auto;
	cursor: pointer;
	width: min(480px, 100%);
	padding: 1.4em 1.5em 1.1em;
	border-radius: 14px;
	background: var(--ch-cloud, #fff);
	color: var(--ch-ink, #11201D);
	box-shadow: 0 18px 60px color-mix(in srgb, var(--ch-ink) 28%, transparent);
	border-top: 6px solid var(--ch-catalyst);
}
.ch-fitpanel.is-bad .ch-fitpanel__box { border-top-color: var(--ch-signal-amber); }
.ch-fitpanel__title { margin: 0 0 0.5em; font-family: var(--ch-font-display); font-size: 1.25rem; font-weight: 700; }
.ch-fitpanel__line { margin: 0 0 0.6em; line-height: 1.45; }
.ch-fitpanel__why { display: block; margin-top: 0.25em; color: var(--ch-text-secondary, #555); font-size: 0.92em; }
.ch-fitpanel__actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0.9em 0 0.3em; }
.ch-fitpanel__hint { margin: 0.4em 0 0; color: var(--ch-text-secondary, #666); font-size: 0.8rem; text-align: right; }
.ch-fitpanel__hint:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
	.ch-fitpill, .ch-fitpanel { transition-duration: 0.01s; }
}

/* Tick after "Checked for your vehicle" (owner 2026-10-03): Lucide "check" (ISC), catalyst green.
   On the green chip it sits in a small white disc so it stays visible. */
.ch-tick {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.14em;
	fill: none;
	stroke: var(--ch-catalyst);
	stroke-width: 3.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ch-tick-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background: var(--ch-cloud, #fff);
	vertical-align: -0.24em;
}
.ch-tick-badge .ch-tick { width: 0.78em; height: 0.78em; vertical-align: 0; stroke-width: 3.75; }

/* "Fit check" box above the basket and checkout (lookup research Phase 3, owner 2026-10-06): the "Add to
   basket" check while it runs, then its verdict, pushed in place by fit-watch.js. Amber when it warns
   (unlikely to fit; the engine-code advice, which it took over from the 2026-10-03 checkout note). */
.ch-fitbox {
	margin: 0 0 1.25rem;
	padding: 0.85em 1em;
	border-left: 4px solid var(--ch-catalyst);
	border-radius: 6px;
	background: var(--ch-cloud, #fff);
	color: var(--ch-ink, #11201D);
	line-height: 1.45;
}
.ch-fitbox.is-warn { border-left-color: var(--ch-signal-amber); }
.ch-fitbox__line { display: flex; align-items: flex-start; gap: 0.6em; margin: 0; }
.ch-fitbox__line + .ch-fitbox__line { margin-top: 0.6em; }
.ch-fitbox__line.is-bad { display: block; }
.ch-fitbox__line.is-bad > p { margin: 0; }
.ch-fitbox__line .ch-spinner { width: 1.1em; height: 1.1em; border-width: 2px; margin-top: 0.18em; }
.ch-fitbox__tick {
	flex: 0 0 auto;
	position: relative;
	width: 1.1em;
	height: 1.1em;
	margin-top: 0.18em;
	border-radius: 50%;
	background: var(--ch-catalyst);
}
.ch-fitbox__tick::after {
	content: "";
	position: absolute;
	left: 0.36em;
	top: 0.18em;
	width: 0.3em;
	height: 0.55em;
	border: solid var(--ch-ink, #11201D);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.ch-fitbox__line.is-bad > p.ch-fitbox__actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 0.7em; }
.ch-fitbox__ack { display: flex; align-items: flex-start; gap: 0.55em; margin-top: 0.8em; font-weight: 600; cursor: pointer; }
.ch-fitbox__ack input { flex: 0 0 auto; width: 1.15em; height: 1.15em; margin: 0.2em 0 0; accent-color: var(--ch-signal-amber-deep); }

/* The searched vehicle across the shop (2026-10-07, after order #26969; Cathive_Searched_Vehicle). */
/* Product page: amber panel with a darker amber border, directly above "Add to cart" / "Buy now". */
.ch-fit-warning {
	margin: 0 0 var(--ch-space-2);
	padding: var(--ch-space-2);
	border: 2px solid var(--ch-signal-amber-deep);
	border-radius: var(--ch-radius);
	background: var(--ch-amber-tint);
	line-height: 1.5;
}
.ch-fit-warning p { margin: 0; }
.ch-fit-warning a { font-weight: 700; }
.ch-fit-warning__forget { margin-top: 0.5em !important; font-size: var(--ch-step-small); }
.ch-reg-inline {
	display: inline-block;
	padding: 0 0.35em;
	border: 1px solid var(--ch-plate-yellow-border);
	border-radius: 3px;
	background: var(--ch-plate-yellow);
	color: var(--ch-plate-ink);
	font-family: var(--ch-font-mono);
	font-weight: 700;
	white-space: nowrap;
}
.ch-linkbtn {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}
/* Lists: a chip on each card and a line above the list. */
.ch-chip--fit-no {
	border-color: var(--ch-signal-amber-deep);
	background: var(--ch-amber-tint);
	color: inherit;
	font-weight: 600;
}
.ch-sv-strip {
	margin: 0 0 var(--ch-space-3);
	padding: var(--ch-space-2);
	border-left: 4px solid var(--ch-catalyst);
	border-radius: var(--ch-radius);
	background: var(--ch-catalyst-tint);
	line-height: 1.5;
}
.ch-sv-strip p { margin: 0; }
.ch-sv-strip a { font-weight: 700; }
/* Lists: "Add to cart" on a part the guarantee would not cover asks first (A1). */
.ch-fitask {
	position: fixed;
	inset: 0;
	z-index: 100003;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: color-mix(in srgb, var(--ch-ink) 45%, transparent);
}
.ch-fitask__box {
	width: min(480px, 100%);
	padding: 1.3em 1.4em 1.1em;
	border-top: 6px solid var(--ch-signal-amber);
	border-radius: 14px;
	background: var(--ch-cloud, #fff);
	color: var(--ch-ink, #11201D);
	box-shadow: 0 18px 60px color-mix(in srgb, var(--ch-ink) 28%, transparent);
	line-height: 1.5;
}
.ch-fitask__box p { margin: 0 0 0.8em; }
.ch-fitask__title { font-family: var(--ch-font-display); font-size: 1.15rem; font-weight: 700; }
.ch-fitask__actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 0 !important; }
/* Phase 4 §3.5 (2026-10-11): the centred amber notice (a part found not to match; checks not completed). */
.ch-fitnotice .ch-fitask__box { width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.ch-fitnotice .ch-fitpanel__why { display: block; margin-top: 0.25em; color: var(--ch-text-secondary, #555); font-size: 0.92em; }
.ch-fitnotice .ch-fitbox__ack { margin: 0 0 0.9em; }

/* WooCommerce block basket and checkout summary boxes (owner 2026-10-04, phone screenshots): the bordered
   boxes had no inner padding, so totals, buttons and the "Order summary" title touched their edges. */
.wc-block-components-sidebar-layout.wc-block-cart .wc-block-components-sidebar.wc-block-cart__sidebar { /* specific enough to beat WooCommerce's own padding: 0 */
	padding: var(--ch-space-2);
}
.checkout-order-summary-block-fill .wc-block-components-checkout-order-summary__title {
	padding-left: 16px;
	padding-right: 16px;
}

/* "Added to your cart" notice: View cart + Checkout side by side on the right; on phones the text
   takes the first line and the two buttons share the second (owner 2026-10-04). */
.ch-notice-actions {
	display: flex;
	flex-shrink: 0;
	gap: var(--ch-space-1, 8px);
}
.ch-notice-actions .button {
	margin: 0;
	white-space: nowrap;
}
@media screen and (max-width: 37.5em) {
	.woocommerce-message:has(.ch-notice-actions) {
		flex-wrap: wrap;
	}
	.ch-notice-text {
		flex: 1 1 100%;
	}
	.ch-notice-actions {
		flex: 1 1 100%;
	}
	.ch-notice-actions .button {
		flex: 1 1 0;
		text-align: center;
	}
}

/* "Add to cart" on the lookup result cards (owner 2026-10-04, assets/js/quick-add.js). The button sits
   outside the card link (a button cannot be inside an <a>): since UX report 2026-10-19 A2 in the card's actions row,
   at the right of "Why it fits" / "Details" (it was pinned bottom-right beside the price). 44px tall. */
.ch-finder-result.has-quick-add {
	position: relative;
}
.ch-quick-add.ch-btn {
	min-height: 44px;
	min-width: 7.75rem;
	margin-left: auto;
	padding: var(--ch-space-1) var(--ch-space-2);
	font-size: var(--ch-step-small);
	white-space: nowrap;
}
@media screen and (max-width: 37.5em) {
	/* Phones: the button takes the row's free width, beside the disclosure button; easy to tap. */
	.ch-quick-add.ch-btn {
		flex: 1 1 9rem;
		font-size: var(--ch-step-body);
	}
}
/* Vehicle pages: the card's border goes round the whole card (link, buttons, disclosure). */
.ch-landing-results .ch-finder-result {
	border: 1px solid var(--ch-mist-light);
	border-radius: var(--ch-radius);
	background: var(--ch-cloud);
}
.ch-landing-results .ch-finder-result .ch-finder-result-link {
	border: 0;
}
.ch-quick-add.is-busy {
	cursor: progress;
}
.ch-quick-add.is-added::after {
	content: " \2713";
}

/* "… has been added to your cart." after a card's Add to cart: a bar across the bottom of the viewport on
   phones, a toast at the bottom centre on wider screens. Above the chat button (8000), below the
   consent bar (9000) and the fit check's pill and panel. */
.ch-addedbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 8500;
	padding: 0 16px 16px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.ch-addedbar.is-in {
	opacity: 1;
	transform: none;
}
.ch-addedbar__inner {
	pointer-events: auto;
	display: flex;
	align-items: center;
	gap: var(--ch-space-2);
	max-width: 760px;
	margin: 0 auto;
	padding: var(--ch-space-2) var(--ch-space-2) var(--ch-space-2) var(--ch-space-3);
	border-radius: var(--ch-radius);
	background-color: var(--ch-catalyst-deeper); /* as the WooCommerce notice (#0f834d until UX Batch B) */
	color: var(--ch-off-white);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--ch-ink) 25%, transparent);
}
.ch-addedbar.is-error .ch-addedbar__inner {
	background-color: var(--ch-error);
}
.ch-addedbar__text {
	flex: 1 1 auto;
	margin: 0;
}
.ch-addedbar__actions {
	display: flex;
	flex-shrink: 0;
	gap: var(--ch-space-1);
	margin: 0;
}
.ch-addedbar__actions .ch-btn {
	padding: var(--ch-space-1) var(--ch-space-2);
	white-space: nowrap;
}
.ch-addedbar__close {
	flex-shrink: 0;
	margin: 0;
	padding: 0 0.2em;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}
body.ch-has-addedbar .ch-fitpill {
	bottom: calc(var(--ch-addedbar-h, 0px) + 12px);
}
@media screen and (max-width: 37.5em) {
	.ch-addedbar {
		padding: 0;
	}
	.ch-addedbar__inner {
		flex-wrap: wrap;
		border-radius: 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
	}
	.ch-addedbar__text {
		flex: 1 1 0;
	}
	.ch-addedbar__actions {
		order: 3;
		flex: 1 1 100%;
	}
	.ch-addedbar__actions .ch-btn {
		flex: 1 1 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ch-addedbar { transition-duration: 0.01s; }
}
/* Phones: the checkout's collapsible "Order summary" box (owner 2026-10-04) had no side padding. 16px of
   space each side as seen: the chevron's 24px icon has 6.5px of blank space right of the glyph, so the
   header's right padding is 9.5px; the expanded lines and totals get 16px. */
.wc-block-checkout.is-mobile .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__title {
	padding-left: 16px;
	padding-right: 9.5px;
}
.wc-block-checkout.is-mobile .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content {
	padding-left: 16px;
	padding-right: 16px;
}

/* Homepage hero on phones (owner 2026-10-04): the space above the heading matches the space under the tagline. */
@media screen and (max-width: 37.5em) {
	body.home .ch-hero {
		padding-top: var(--ch-space-5);
	}
}

/* Short phones (UX report 2026-10-21-ux-remembered-plates): 65% of the homepage's phone views were under 700px tall and
   87% under 764px (Live Analytics, 30 Sep–21 Oct 2026); with the cookie bar showing, the plate field sat half under it and
   "Find parts" below it. Here the hero is 100px shorter (both gaps 24px, still equal; heading 36px; tagline 16px; the
   panel's top padding 16px), so the field and the button are on the first screen of a 384x680 phone with the bar. */
@media screen and (max-width: 37.5em) and (max-height: 800px) {
	body.home .ch-hero {
		padding-top: var(--ch-space-3);
	}
	body.home .ch-hero-title {
		font-size: 2.25rem;
	}
	body.home .ch-hero-sub {
		font-size: var(--ch-step-body);
		margin-bottom: var(--ch-space-3);
	}
	body.home .ch-hero .ch-finder {
		padding-top: var(--ch-space-2);
	}
}

/* Part-number search inside the homepage finder, between the plate and the cascade (owner 2026-10-12; was a separate
   phones-only panel under the finder). Its heading is a .ch-finder-divider like "or search manually", so the gaps above
   and below match; the row keeps the field and "Search" on one line at every width. */
.ch-part-search {
	display: flex;
	align-items: stretch;
	gap: var(--ch-space-2);
	margin: 0;
}
.ch-part-search .ch-part-search-field { /* two classes: the base input[type="search"] rule outranks one */
	flex: 1 1 auto;
	width: 0; /* grow, never widen the page (the reg-plate input trap) */
	min-width: 0;
	height: 3rem;
	padding: 0 var(--ch-space-2);
	border: 1px solid var(--ch-border-dark);
	border-radius: var(--ch-radius);
	background: var(--ch-cloud);
	color: var(--ch-ink);
	font-family: var(--ch-font-body);
	font-size: var(--ch-step-body);
}
.ch-part-search .ch-part-search-field::placeholder {
	color: var(--ch-slate);
	opacity: 1;
}
.ch-part-search .ch-part-search-field:focus {
	outline: none;
	border-color: var(--ch-catalyst);
	box-shadow: 0 0 0 2px var(--ch-catalyst);
}
.ch-part-search .ch-btn {
	flex: 0 0 auto;
	height: 3rem;
	padding: 0 var(--ch-space-3);
}

/* The VIN box (owner 2026-10-27, shops with registry `vin_search`): between the plate and the part number, the same row
   as the part-number search under its own .ch-finder-divider, so the gaps between the sections stay equal. A VIN is 17
   characters, so on a phone the field takes the whole row and the button wraps below it, centred, as under the plate. */
.ch-vin-search {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--ch-space-2);
	margin: 0;
}
.ch-vin-search .ch-vin-field { /* two classes: the base input[type="text"] rule outranks one */
	flex: 1 1 260px;
	width: 0; /* grow, never widen the page (the reg-plate input trap) */
	min-width: 0;
	height: 3rem;
	padding: 0 var(--ch-space-2);
	border: 1px solid var(--ch-border-dark);
	border-radius: var(--ch-radius);
	background: var(--ch-cloud);
	color: var(--ch-ink);
	font-family: var(--ch-font-mono);
	font-size: var(--ch-step-body);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ch-vin-search .ch-vin-field::placeholder {
	color: var(--ch-slate);
	opacity: 1;
	font-family: var(--ch-font-body);
	letter-spacing: 0;
	text-transform: none;
}
.ch-vin-search .ch-vin-field:focus {
	outline: none;
	border-color: var(--ch-catalyst);
	box-shadow: 0 0 0 2px var(--ch-catalyst);
}
.ch-vin-search .ch-btn {
	flex: 0 0 auto;
	height: 3rem;
	padding: 0 var(--ch-space-3);
}
.ch-vin-hint {
	margin: var(--ch-space-1) 0 0;
	color: var(--ch-text-secondary-on-dark);
	font-size: var(--ch-step-small);
	text-align: center;
}

/*--------------------------------------------------------------
# Result cards, UX Batch B (owner 2026-10-23; brief §2 E and I)
--------------------------------------------------------------*/
/* One card, finder.js resultCard() and Cathive_Finder_Landing_Pages::part_card() alike (class .ch-result-card; the
   Fitting Kits page's part-number results keep the older markup and rules above). The name is the card's link,
   stretched over the card by its ::after, so a tap anywhere on the card opens the part, while the buttons (and the
   acronym toggletips in the pills) sit above it.
   - Phones (under 37.5em; the card is about 307px wide at 390): the name beside a 64px photo, then the fit grade
     ("Checking fit…" on the same line, so the card keeps its height when the check ends), the pills a buyer chooses on
     (warranty, kit), the price, any warning; "Add to cart" and "Buy now" side by side; "Why it fits" under them,
     beside its disclosure. A full-width name would cost a row there, and the grade beside the photo would wrap while
     "Checking fit…" shows.
   - From 37.5em: the name across the whole card (owner: it wrapped beside the buttons and left the top right empty);
     under it the photo, the grade / pills / price, and the buttons on the right with "Why it fits" under them.
   One accent bar per card: a research-confirmed card (.is-checked) has a 3px Catalyst bar inside its left edge, with the
   card's own radius, the open disclosure included. */
.ch-finder-result.ch-result-card {
	position: relative;
}
.ch-result-card .ch-finder-result-main {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	grid-template-areas: "img name" "grade grade" "pills pills" "price price" "extra extra";
	column-gap: 0.75rem;
	row-gap: 0.45rem;
	align-items: center;
	padding: 0.75rem 0.75rem 0.6rem;
}
.ch-result-card .ch-finder-result-body {
	display: contents;
}
.ch-result-card .ch-finder-result-link,
.ch-result-card a.ch-finder-result-link:hover,
.ch-landing-results .ch-result-card .ch-finder-result-link,
.ch-landing-results .ch-result-card .ch-finder-result-link:hover {
	grid-area: name;
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.ch-result-card .ch-finder-result-link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--ch-radius);
}
.ch-finder-result.ch-result-card:has(.ch-finder-result-link:hover) {
	background-color: var(--ch-border-dark);
}
.ch-landing-results .ch-finder-result.ch-result-card:has(.ch-finder-result-link:hover) {
	background-color: var(--ch-off-white);
}
.ch-result-card .ch-finder-result-link:focus-visible {
	outline: none;
}
.ch-result-card .ch-finder-result-link:focus-visible::after {
	outline: 3px solid var(--ch-focus-ring);
	outline-offset: 2px;
}
.ch-result-card .ch-finder-result-name {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.3;
	text-wrap: pretty;
}
.ch-result-card .ch-finder-result-img {
	grid-area: img;
	align-self: start;
	width: 64px;
	height: 64px;
	object-fit: contain;
	background: var(--ch-cloud);
	border-radius: var(--ch-radius);
}
.ch-result-card .ch-finder-result-grade,
.ch-result-card .ch-finder-result-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}
.ch-result-card .ch-finder-result-grade {
	grid-area: grade;
}
.ch-result-card .ch-finder-result-pills {
	grid-area: pills;
}
/* The pills a buyer chooses on: quieter and smaller than the grade; one line at 390px. */
.ch-result-card .ch-finder-result-pills .ch-chip {
	font-size: 0.75rem;
	padding: 0.1em 0.55em;
}
.ch-chip--spec {
	color: var(--ch-text-on-dark);
	font-weight: 600;
}
.ch-landing-results .ch-chip.ch-chip--spec {
	color: var(--ch-text-body);
}
.ch-result-card .ch-finder-result-price {
	grid-area: price;
	font-size: var(--ch-step-body);
}
.ch-result-card .ch-finder-result-extra {
	grid-area: extra;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.45rem;
	min-width: 0;
	font-size: var(--ch-step-small);
}
/* Anything a visitor can press sits above the stretched link; so does the open disclosure (links, selectable text). */
.ch-result-card .ch-finder-result-main button,
.ch-result-card .ch-finder-result-main a:not(.ch-finder-result-link),
.ch-result-card .ch-finder-result-actions,
.ch-result-card .ch-why-body {
	position: relative;
	z-index: 2;
}
.ch-result-card .ch-finder-result-actions,
.ch-finder-result.ch-result-card > .ch-finder-result-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.75rem 0.5rem;
}
.ch-result-card .ch-quick-add.ch-btn,
.ch-result-card .ch-quick-buy.ch-btn {
	order: 1;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	margin: 0;
	padding: 0 0.85rem;
	font-size: 0.9375rem;
	white-space: nowrap;
}
.ch-result-card .ch-quick-buy.ch-btn {
	order: 2;
}
.ch-result-card .ch-why-toggle {
	order: 3;
	flex: 1 1 100%;
	justify-content: flex-start;
	min-height: 36px;
	margin: 0;
}
.ch-quick-buy.ch-btn,
.ch-quick-buy.ch-btn:hover:not(:disabled) {
	background: var(--ch-ink);
	color: var(--ch-off-white);
}
.ch-quick-buy.ch-btn:hover:not(:disabled) {
	background: var(--ch-ink-surface);
}
/* While the basket check runs (it can take seconds) the pressed button keeps full contrast and says "Adding…". */
.ch-result-card .ch-btn.is-busy:disabled {
	opacity: 1;
	cursor: progress;
}
/* Already in the basket (quick-add.js): "In basket" opens the basket, "Checkout" goes on without a second add. */
.ch-quick-add.ch-btn.is-in-cart,
.ch-quick-add.ch-btn.is-in-cart:hover {
	background: transparent;
	color: var(--ch-text-on-dark);
	box-shadow: inset 0 0 0 2px var(--ch-catalyst);
}
.ch-landing-results .ch-quick-add.ch-btn.is-in-cart {
	color: var(--ch-text-body);
}
.ch-quick-add.is-in-cart::before {
	content: "\2713\00a0";
}
.ch-quick-add.is-in-cart.is-added::after {
	content: none;
}
.ch-result-card .ch-why-body,
.ch-finder-result.ch-result-card > .ch-why-body {
	padding: 0.25rem 0.75rem 0.75rem;
}
/* One accent bar per card (owner 2026-10-23): on the card itself, so it has the card's radius and grows with it. */
.ch-finder-result.ch-result-card.is-checked {
	box-shadow: inset 3px 0 0 var(--ch-catalyst);
}
.ch-finder-result.ch-result-card.is-checked .ch-finder-result-link {
	box-shadow: none; /* Batch A drew the bar on the link, which is now the name */
}
.ch-result-card .ch-finder-result-research {
	border-left: 0;
	border-radius: calc(var(--ch-radius) / 2);
	background: var(--ch-catalyst-tint);
}
.ch-result-card .ch-finder-result-warning {
	border-left: 0;
	border-radius: calc(var(--ch-radius) / 2);
	background: var(--ch-amber-tint);
}
/* The "…unlikely to fit your vehicle" section: the same bar, the same radius, growing with what it holds. */
.ch-unlikely {
	border-left: 0;
	border-radius: var(--ch-radius);
	box-shadow: inset 3px 0 0 var(--ch-signal-amber);
	padding-left: calc(var(--ch-space-2) + 3px);
}
/* From 37.5em: the name across the card; the buttons on the right of the photo, grade, pills and price, with
   "Why it fits" under them. The card is the grid (its top part's wrapper takes no box), so the stretched link covers
   the whole card and the buttons and the open disclosure sit above it. */
@media screen and (min-width: 37.5em) {
	.ch-finder-result.ch-result-card {
		display: grid;
		grid-template-columns: 96px minmax(0, 1fr) auto;
		grid-template-areas: "name name name" "img body actions" "extra extra extra" "why why why";
		column-gap: var(--ch-space-2);
		row-gap: 0.6rem;
		align-items: center;
		padding: var(--ch-space-2);
	}
	.ch-result-card .ch-finder-result-main {
		display: contents;
	}
	.ch-result-card .ch-finder-result-name {
		font-size: 1.0625rem;
	}
	.ch-result-card .ch-finder-result-img {
		width: 96px;
		height: 96px;
	}
	.ch-result-card .ch-finder-result-body {
		grid-area: body;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.45rem;
		min-width: 0;
	}
	.ch-result-card .ch-finder-result-actions,
	.ch-finder-result.ch-result-card > .ch-finder-result-actions {
		grid-area: actions;
		display: grid;
		grid-template-columns: auto auto;
		justify-content: end;
		gap: 0.25rem 0.5rem;
		padding: 0;
	}
	.ch-result-card .ch-quick-add.ch-btn:only-of-type {
		grid-column: 1 / -1;
	}
	.ch-result-card .ch-why-toggle {
		grid-column: 1 / -1;
		justify-self: end;
	}
	.ch-result-card .ch-why-body,
	.ch-finder-result.ch-result-card > .ch-why-body {
		grid-area: why;
		padding: 0;
	}
}

/*--------------------------------------------------------------
# A shorter phone header and hero (UX Batch B §2 F6, 2026-10-23)
--------------------------------------------------------------*/
/* The header and the announcement took about 219px of a 390x844 screen and the homepage title about 140px. Phones:
   the announcement in the body font (still two lines; its wording unchanged), the header's padding 12px, no empty row
   under the Menu button (the closed menu's container wrapped onto a 0px line plus the 16px row gap); the phone number,
   the Menu button, search, account and basket all stay. The short-phone hero (2026-10-21: 24px gaps, 36px heading,
   16px tagline) is now every phone's. */
@media screen and (max-width: 37.5em) {
	.ch-announcement {
		padding: 0.35rem var(--ch-space-2);
		font-family: var(--ch-font-body);
		font-size: 0.8125rem;
		line-height: 1.35;
		letter-spacing: 0;
	}
	.ch-header-inner {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
		row-gap: 0.5rem;
	}
	.site-header .main-navigation:not(.toggled) {
		row-gap: 0;
	}
	body.home .ch-hero {
		padding-top: var(--ch-space-3);
	}
	body.home .ch-hero-title {
		font-size: 2.25rem;
	}
	body.home .ch-hero-sub {
		font-size: var(--ch-step-body);
		margin-bottom: var(--ch-space-3);
	}
	body.home .ch-hero .ch-finder {
		padding-top: var(--ch-space-2);
	}
}

/*--------------------------------------------------------------
# Acronym toggletips (UX Batch B §2 A, 2026-10-23; assets/js/abbr.js)
--------------------------------------------------------------*/
/* The term keeps its text's look, with a dashed underline; a button, so keyboard and screen readers reach it (its
   meaning is its description). Inline in a sentence or a pill, its target is the line's (WCAG 2.5.8 inline exception). */
button.ch-abbr {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: inherit;
	text-transform: inherit;
	text-decoration: underline dashed;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	cursor: help;
	position: relative;
	z-index: 2; /* above a result card's stretched link */
}
button.ch-abbr:hover,
button.ch-abbr[aria-expanded="true"] {
	text-decoration-style: solid;
}
button.ch-abbr:focus-visible {
	outline: 3px solid var(--ch-focus-ring);
	outline-offset: 2px;
}
/* Wider screens: a bubble under the word, inside the window. */
.ch-abbr-tip {
	position: absolute;
	z-index: 9600;
	max-width: min(22rem, calc(100vw - 16px));
	padding: 0.6rem 0.75rem;
	border-radius: var(--ch-radius);
	background: var(--ch-ink);
	color: var(--ch-off-white);
	box-shadow: var(--ch-shadow-card);
	font-family: var(--ch-font-body);
	font-size: var(--ch-step-small);
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}
.ch-abbr-tip strong {
	font-weight: 700;
}
/* Phones: a line of its own at the end of the block the term is in. */
.ch-abbr-tip.is-inline {
	position: relative;
	z-index: 2;
	display: block;
	flex-basis: 100%;
	width: 100%;
	max-width: none;
	margin-top: 0.35rem;
	box-shadow: none;
}

/*--------------------------------------------------------------
# Vehicle pages start higher (UX Batch B §2 F2, 2026-10-23)
--------------------------------------------------------------*/
/* The Fiesta page put the registration field at y≈974 and the first part at y≈1,444 on a phone: a 56px H1 over four
   lines and the model's description above everything. The description now follows the parts (the template); the H1 is
   the h2 step; the page's top padding and the gap above the engines' headings are smaller. */
.ch-landing-page {
	padding-top: var(--ch-space-3);
}
.ch-landing-page h1 {
	font-size: var(--ch-step-h2);
	line-height: 1.15;
	margin: 0 0 var(--ch-space-2);
}
.ch-landing-page .ch-landing-subhead {
	margin-top: var(--ch-space-4);
}
.ch-landing-page .ch-landing-intro {
	margin: 0 0 var(--ch-space-2);
}
@media screen and (max-width: 37.5em) {
	.ch-landing-page {
		padding-top: var(--ch-space-2);
	}
	.ch-landing-page h1 {
		font-size: 1.75rem;
	}
}

/* The lookup's security-check refusal carries its own "Try again" (finder.js, UX Batch B R3, 2026-10-23). */
.ch-finder-no-results .ch-lookup-retry {
	display: flex;
	margin-top: var(--ch-space-2);
}