/* =============================================================================
   TracSpare — design tokens and base styles.
   Every colour and font below is taken directly from the client-approved
   "TracSpare Template.html" design reference. Do not add a colour that is
   not one of these tokens without checking the reference first.
   ========================================================================== */

:root {
	/* Brand green */
	--ts-green-900: #123D2D;
	--ts-green-700: #216A4D;
	--ts-green-800: #18513B;
	--ts-green-100: #DDEFE7;
	--ts-green-50:  #F0F8F4;

	/* Brand orange — primary call to action, logo accent */
	--ts-orange-600: #F38229;
	--ts-orange-700: #D97706;
	--ts-orange-800: #B45309;

	/* Readability (WCAG 2.2 AA), 2 Oct. Measured on every page, not guessed:
	   - white text on the brand orange #F38229 is 2.6:1 (needs 4.5), so the orange buttons keep the
	     brand orange and take dark text instead (--ts-cta-text, 6.8:1). A darker orange with white
	     text (#B8570A, 4.8:1) was tried as the alternative;
	   - orange TEXT uses --ts-orange-800 (5.0:1 on white); --ts-orange-700 only for large numbers;
	   - a form field's edge needs 3:1 against the page to show where the box is: --ts-field-border;
	   - no text smaller than 12px. */
	--ts-cta: #F38229;
	--ts-cta-hover: #D97706;
	--ts-cta-text: #111827;
	--ts-cta-edge: #D97706; /* an orange outline that still shows 3:1 against white */
	--ts-field-border: #868D98;

	/* WhatsApp buttons: WhatsApp teal with white text (5.2:1). History, 2 Oct: they were WhatsApp's
	   teal #128C7E, then the bright WhatsApp green #25D366, which needed dark text
	   (white on it is 2:1); that was too loud, so the teal came back. #0E7A6D, not #128C7E: white on the old
	   teal is 4.1:1, under 4.5. Text links use WhatsApp's dark teal #075E54 (7.3:1). */
	--ts-whatsapp: #0E7A6D;
	--ts-whatsapp-hover: #075E54;
	--ts-whatsapp-ink: #FFFFFF;
	--ts-whatsapp-text: #075E54;

	/* Badges */
	--ts-badge-good-bg: #DDEFE7;
	--ts-badge-good-text: #166534; /* was #15803D: 4.2:1 on its pale green */
	--ts-badge-warn-bg: #FEF3C7;
	--ts-badge-warn-text: #B45309;
	--ts-badge-neutral-bg: #F3F4F6;
	--ts-badge-neutral-text: #374151;

	/* Neutrals */
	--ts-ink: #111827;
	--ts-ink-soft: #5F6673; /* was #6B7280: 4.47:1 on the pale green panels, under 4.5 */
	--ts-body: #374151;
	--ts-rule: #E5E7EB;
	--ts-rule-strong: #D1D5DB;
	--ts-bg: #F9FAFB;
	--ts-white: #FFFFFF;
	--ts-red: #B91C1C;

	/* Typography */
	--ts-font-display: 'Plus Jakarta Sans', sans-serif;
	--ts-font-body: 'DM Sans', Helvetica, Arial, sans-serif;
	--ts-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ts-radius-sm: 6px;
	--ts-radius: 9px;
	--ts-radius-lg: 12px;
	--ts-radius-xl: 14px;

	--ts-container: 1320px;
	--ts-container-narrow: 820px;
	--ts-gutter: clamp(16px, 4vw, 32px);
}

/* ---------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ts-bg);
	font-family: var(--ts-font-body);
	font-size: 16px;
	color: var(--ts-ink);
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
/* Buttons and fields otherwise fall back to the system font (Arial); give them the site's. */
button, input, select, textarea { font-family: inherit; }
::placeholder { color: var(--ts-ink-soft); opacity: 1; }

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

a { color: var(--ts-green-700); text-decoration: none; }
a:hover, a:active { color: var(--ts-green-800); text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ts-font-display);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--ts-ink);
	margin: 0 0 0.5em;
}

/* A background alone is not enough - it leaves selected text in whatever
   colour it already was, so white text (the hero's image variant, the
   dark topbar/footer) selected against this light mint highlight was
   white-on-near-white and unreadable. Setting color too guarantees
   contrast against the highlight regardless of the underlying text's own
   colour, light or dark. */
::selection { background: var(--ts-green-700); color: var(--ts-white); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.tracspare-container {
	width: 100%;
	max-width: var(--ts-container);
	margin: 0 auto;
	padding: 0 var(--ts-gutter);
}

.tracspare-container--narrow { max-width: var(--ts-container-narrow); }

.tracspare-shell { display: flex; flex-direction: column; flex: 1 1 auto; }
.tracspare-main { flex: 1 1 auto; }
.tracspare-main > .tracspare-container { padding-top: clamp(20px, 3vw, 32px); padding-bottom: clamp(38px, 5vw, 10px); }

/* ---------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.button,
.tracspare-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--ts-font-body);
	font-size: 14px;
	font-weight: 700;
	border-radius: var(--ts-radius);
	padding: 13px 22px;
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	line-height: 1.2;
}

/* !important throughout this button system: WooCommerce's own stylesheet
   sets button colours via `.woocommerce a.button`, which is more specific
   than a plain `.button` class and would otherwise win the cascade
   regardless of source order.
   Deliberately plain `.button` here, not `a.button` / `button.alt` too:
   every real button in this theme already carries the `button` class
   alongside its tag, and an element-qualified branch like `a.button` is
   MORE specific than the single-class overrides below (.tracspare-btn
   --primary-green etc.), which would then lose to this base rule even
   though they come later and are also !important. */
.button, .tracspare-btn,
.single_add_to_cart_button {
	background: var(--ts-cta) !important;
	color: var(--ts-cta-text) !important;
}
.button:hover, .tracspare-btn:hover, .single_add_to_cart_button:hover {
	background: var(--ts-cta-hover) !important;
	color: var(--ts-cta-text) !important;
}

.tracspare-btn--secondary {
	background: var(--ts-white) !important;
	color: var(--ts-green-700) !important;
	border-color: var(--ts-rule-strong);
}
.tracspare-btn--secondary:hover { border-color: var(--ts-green-700); background: var(--ts-green-50) !important; color: var(--ts-green-700) !important; }

.tracspare-btn--primary-green,
.tracspare-request-quote,
.checkout-button {
	background: var(--ts-green-700) !important;
	color: var(--ts-white) !important;
}
.tracspare-btn--primary-green:hover,
.tracspare-request-quote:hover,
.checkout-button:hover { background: var(--ts-green-800) !important; }

.tracspare-whatsapp,
a.tracspare-whatsapp,
.tracspare-whatsapp-btn {
	background: var(--ts-whatsapp) !important;
	color: var(--ts-whatsapp-ink) !important;
}
.tracspare-whatsapp:hover, a.tracspare-whatsapp:hover, .tracspare-whatsapp-btn:hover { background: var(--ts-whatsapp-hover) !important; color: var(--ts-whatsapp-ink) !important; }

.tracspare-btn--text {
	background: transparent;
	border: none;
	color: var(--ts-red);
	padding: 6px;
	font-weight: 700;
}
.tracspare-btn--text:hover { color: var(--ts-red); opacity: 0.8; }

/* ---------------------------------------------------------------------------
   Badges (condition / stock / policy)
   -------------------------------------------------------------------------- */

.tracspare-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	padding: 5px 10px !important;
	border-radius: 20px;
	white-space: nowrap;
	line-height: 1.5;
}
.tracspare-badge--good    { background: var(--ts-badge-good-bg);    color: var(--ts-badge-good-text); }
.tracspare-badge--warn    { background: var(--ts-badge-warn-bg);    color: var(--ts-badge-warn-text); }
.tracspare-badge--neutral { background: var(--ts-badge-neutral-bg); color: var(--ts-badge-neutral-text); }

/* ---------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */

.tracspare-breadcrumb {
	font-family: var(--ts-font-mono);
	font-size: 12px;
	font-weight: 600; /* Semi-bold (2 Oct). */
	color: var(--ts-ink-soft);
	margin: 0 0 16px;
}
.tracspare-breadcrumb a { color: var(--ts-green-700); }

/* ---------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.tracspare-topbar {
	background: var(--ts-green-900);
	color: var(--ts-green-100);
	font-size: 13px;
}
.tracspare-topbar__inner {
	max-width: var(--ts-container);
	margin: 0 auto;
	padding: 9px var(--ts-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 22px;
}
.tracspare-topbar__tag { display: flex; align-items: center; gap: 8px; }
.tracspare-topbar__dot { width: 6px; height: 6px; background: var(--ts-orange-700); border-radius: 2px; flex: none; }
.tracspare-topbar strong { color: var(--ts-white); }
/* Pushed to the row's right edge regardless of whether the tagline on the
   left is present - margin-left: auto absorbs the leftover space, which
   justify-content: space-between cannot do cleanly once the tagline is
   the only other flex item (three items would end up spread evenly
   across the row instead of grouped left/right in two clusters). */
.tracspare-topbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin-left: auto; }
.tracspare-topbar__whatsapp { display: flex; align-items: center; gap: 8px; color: var(--ts-white); font-weight: 700; }
.tracspare-topbar__whatsapp:hover { color: var(--ts-white); }
/* Mobile: centred as one block instead of the left tag / right cluster
   split above - there is no room at this width for two separate edges,
   and centring reads better than either side crowding the other. */
@media (max-width: 600px) {
	.tracspare-topbar__inner { justify-content: center; text-align: center; }
	.tracspare-topbar__right { justify-content: center; margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.tracspare-header {
	background: var(--ts-white);
	/*border-bottom: 1px solid var(--ts-rule);*/
	z-index: 40;
}
.tracspare-header__row {
	max-width: var(--ts-container);
	margin: 0 auto;
	padding: 14px var(--ts-gutter);
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 14px);
	flex-wrap: wrap;
}

.tracspare-logo { display: flex; align-items: center; gap: 11px; text-decoration: none !important; min-width: 0; flex: none; }
/* A real uploaded logo (settings screen or the Customizer) is shown at its
   own size instead of the 38px icon box - it is a wordmark image, not a
   square mark, and the client uploaded it specifically because the styled
   text version was not big enough. */
.tracspare-logo__image, .tracspare-logo img.custom-logo { max-height: 44px; width: auto; }
.tracspare-logo__mark {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: var(--ts-green-700);
	display: flex; align-items: center; justify-content: center;
	flex: none;
	color: var(--ts-green-100);
	font-size: 15px;
}
.tracspare-logo__text { line-height: 1.05; }
.tracspare-logo__name {
	font-family: var(--ts-font-display);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.02em;
	color: var(--ts-ink);
}
.tracspare-logo__name .tracspare-accent { color: var(--ts-orange-600); }
.tracspare-logo__tagline { font-size: 12px; color: var(--ts-ink-soft); letter-spacing: 0.03em; }

/* flex-basis caps its width instead of growing to fill the row, and the
   left auto margin absorbs all the space left over between the logo and
   this element - pushing the search box flush against the actions group
   on the right instead of centering it between logo and actions. */
.tracspare-header-search { flex: 0 1 400px; min-width: 0; margin-left: auto; }
.tracspare-header-search form.woocommerce-product-search {
	display: flex;
	align-items: stretch;
	margin: 0;
	max-width: 34em;
	border: 1px solid var(--ts-field-border);
	border-radius: var(--ts-radius-sm);
	overflow: hidden;
}
.tracspare-header-search input[type="search"] {
	flex: 1 1 auto; min-width: 0;
	border: none; outline: none;
	padding: 14px 14px;
	font-size: 14px;
	background: var(--ts-white);
	color: var(--ts-ink);
	font-family: inherit;
}
.tracspare-header-search button {
	flex: none; width: 56px;
	background: var(--ts-green-700);
	color: var(--ts-white);
	border: none;
	border-radius: 0;
	padding: 0;
}
.tracspare-header-search button:hover { background: var(--ts-green-800); }

/* WhatsApp + My Quote + the burger toggle, grouped so they move as one
   right-aligned unit at every breakpoint instead of relying on `order` to
   reassemble three independent flex items into the right shape each time. */
.tracspare-header__actions { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 14px); flex: none; }

.tracspare-header__whatsapp {
	flex: none;
	width: 46px; height: 46px;
	border-radius: var(--ts-radius);
	background: var(--ts-whatsapp);
	color: var(--ts-whatsapp-ink) !important;
	display: flex; align-items: center; justify-content: center;
	font-size: 17px;
}
.tracspare-header__whatsapp:hover { background: var(--ts-whatsapp-hover); }

.tracspare-header__quote {
	flex: none;
	background: var(--ts-cta);
	color: var(--ts-cta-text) !important;
	border: none; border-radius: var(--ts-radius);
	padding: 0 17px; height: 46px;
	font-size: 14px; font-weight: 700;
	display: flex; align-items: center; gap: 9px;
}
.tracspare-header__quote:hover { background: var(--ts-cta-hover); }
.tracspare-header__quote-count {
	background: var(--ts-green-900);
	color: var(--ts-white);
	border-radius: 20px;
	min-width: 22px;
	padding: 1px 7px;
	font-size: 12px; font-weight: 700;
	text-align: center;
}

.tracspare-menu-toggle {
	flex: none; display: none;
	width: 46px; height: 46px;
	align-items: center; justify-content: center;
	background: var(--ts-white);
	border: 1px solid var(--ts-rule-strong);
	border-radius: var(--ts-radius);
	cursor: pointer;
	color: var(--ts-ink);
	font-size: 18px;
}

.tracspare-nav {
	background: var(--ts-green-700);
	width: 100%;
}
.tracspare-nav ul {
	max-width: var(--ts-container);
	margin: 0 auto;
	padding: 0 var(--ts-gutter);
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	flex-wrap: wrap;
	list-style: none;
}
.tracspare-nav a {
	display: block;
	padding: 13px 18px;
	font-size: 14px; font-weight: 600;
	color: var(--ts-green-100) !important;
	text-decoration: none !important;
}
.tracspare-nav a:hover,
.tracspare-nav .current-menu-item a { color: var(--ts-white) !important; background: rgba(255,255,255,0.08); }

.tracspare-mobile-nav {
	position: fixed; inset: 0; z-index: 55;
	display: none;
}
.tracspare-mobile-nav.is-open { display: block; }
.tracspare-mobile-nav__scrim {
	position: absolute; inset: 0;
	background: rgba(17,24,39,0.5);
}
.tracspare-mobile-nav__panel {
	position: absolute; top: 0; left: 0; bottom: 0;
	width: min(320px, 86vw);
	background: var(--ts-white);
	display: flex; flex-direction: column;
	overflow-y: auto;
	box-shadow: 0 0 40px rgba(17,24,39,0.22);
}
.tracspare-mobile-nav__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; padding: 16px 20px;
	border-bottom: 1px solid var(--ts-rule);
}
.tracspare-mobile-nav__close {
	flex: none; width: 44px; height: 44px;
	border: none; background: transparent; cursor: pointer;
	font-size: 20px; color: var(--ts-body);
}
.tracspare-mobile-nav ul {
	list-style: none; margin: 0; padding: 8px 0;
	border-top: 1px solid var(--ts-rule);
}
.tracspare-mobile-nav a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 20px;
	color: var(--ts-ink) !important;
	font-size: 15px; font-weight: 600;
}

/* Burger replaces the nav bar for both tablet and mobile. */
@media (max-width: 900px) {
	.tracspare-nav { display: none; }
	.tracspare-menu-toggle { display: flex; }
	.tracspare-header__row { border-bottom: 1px solid var(--ts-rule);}
}

/* Tablet: search stays on the header row, right-aligned against the
   actions group same as desktop, just narrower than the desktop cap - it
   does not drop to a row of its own until mobile. */
@media (max-width: 900px) and (min-width: 601px) {
	.tracspare-header-search { flex-basis: 280px; }
}

/* Mobile: search moves to its own full-width row below, and the "My
   Quote" label is dropped - the icon and the count badge alone are
   enough of a target at this width, and keep the actions group from
   crowding the logo. */
@media (max-width: 600px) {
	.tracspare-header-search { order: 6; flex-basis: 100%; margin: 0; }
	.tracspare-header__actions { margin-left: auto; }
	.tracspare-header__quote-text { display: none; }
	.tracspare-header__quote { padding: 0 12px; gap: 6px; }
}

/* ---------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.tracspare-footer { background: var(--ts-green-900); color: var(--ts-green-100); margin-top: auto; }
.tracspare-footer__grid {
	max-width: var(--ts-container);
	margin: 0 auto;
	padding: clamp(34px,4.5vw,56px) var(--ts-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: clamp(24px, 3vw, 36px);
}
.tracspare-footer .tracspare-logo__name,
.tracspare-footer .tracspare-logo__mark { color: var(--ts-white); }
.tracspare-footer .tracspare-logo__tagline { color: var(--ts-green-100); }
.tracspare-footer p { font-size: 13.5px; line-height: 1.6; max-width: 34ch; margin: 0 0 14px; }
.tracspare-footer__contact { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.tracspare-footer__seller { line-height: 1.5; margin-bottom: 4px; }
.tracspare-footer__socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tracspare-footer__socials a {
	width: 30px; height: 30px; border-radius: 8px;
	background: var(--ts-green-700); color: var(--ts-white) !important;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px;
}
.tracspare-footer__socials a:hover { background: var(--ts-green-100); color: var(--ts-green-900) !important; }
/* The WhatsApp icon is a WhatsApp button too, so it gets the WhatsApp colour; other networks stay brand green. */
.tracspare-footer__socials a[aria-label="whatsapp"] { background: var(--ts-whatsapp); color: var(--ts-whatsapp-ink) !important; }
.tracspare-footer__socials a[aria-label="whatsapp"]:hover { background: var(--ts-whatsapp-hover); color: var(--ts-whatsapp-ink) !important; }
.tracspare-footer__col h3 { font-size: 14px; font-weight: 700; color: var(--ts-white); margin-bottom: 13px; }
.tracspare-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.tracspare-footer__col a { font-size: 13.5px; color: var(--ts-green-100) !important; }
.tracspare-footer__deliver { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.tracspare-footer__deliver-flag { font-size: 18px; line-height: 1; flex: none; }
.tracspare-footer__bar { border-top: 1px solid var(--ts-green-700); }
.tracspare-footer__bar-inner {
	max-width: var(--ts-container);
	margin: 0 auto;
	padding: 18px var(--ts-gutter);
	display: flex; flex-wrap: wrap; gap: 10px 24px;
	align-items: center; justify-content: space-between;
	font-size: 12.5px; color: var(--ts-green-100);
}
.tracspare-footer__bar-links { display: flex; gap: 20px; flex-wrap: wrap; }
.tracspare-footer__bar a { color: var(--ts-green-100) !important; }
.tracspare-footer__bar a:hover { color: var(--ts-white) !important; }

/* ---------------------------------------------------------------------------
   Hero / section headings shared across custom page templates
   -------------------------------------------------------------------------- */

.tracspare-eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
	color: var(--ts-green-700); text-transform: uppercase;
	margin-bottom: 16px;
}
.tracspare-page-head {
	background: var(--ts-white);
	border-bottom: 1px solid var(--ts-rule);
}
.tracspare-page-head--tint { background: var(--ts-green-50); }
/* padding-top/-bottom only, never the padding shorthand: this class is
   always paired on the same element as .tracspare-container (which sets
   the horizontal gutter via the padding shorthand too), and the shorthand
   here previously zeroed that container's left/right padding out instead
   of adding to it — every breadcrumb and page <h1> on the site sat flush
   against the viewport edge instead of at the gutter. */
.tracspare-page-head__inner { padding-top: clamp(14px,2vw,14px); padding-bottom: clamp(8px,1vw,10px); }
.tracspare-page-head h1 { font-size: clamp(27px,3.4vw,42px); margin: 0 0 10px; }
.tracspare-page-head p { font-size: 15px; color: var(--ts-ink-soft); margin: 0; max-width: 62ch; }

.tracspare-section-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 20px; flex-wrap: wrap; margin-bottom: 24px;
}
.tracspare-section-head h2 { font-size: clamp(24px,2.8vw,34px); margin: 0; }
.tracspare-section-head p { font-size: 14.5px; color: var(--ts-ink-soft); margin: 7px 0 0; }
.tracspare-section-head__link { font-size: 14px; font-weight: 700; color: var(--ts-green-700); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Info panels / notes / toasts
   -------------------------------------------------------------------------- */

.tracspare-quote-note,
.tracspare-search-note,
.tracspare-facets__deadend {
	background: var(--ts-green-50);
	border-left: 3px solid var(--ts-orange-700);
	padding: 0.9em 1.1em;
	margin: 0 0 1.2em;
	font-size: 0.92rem;
	color: var(--ts-ink);
}

.tracspare-panel-tint {
	background: var(--ts-green-50);
	border: 1px solid var(--ts-green-100);
	border-radius: var(--ts-radius-lg);
	padding: clamp(20px,2.6vw,30px);
}

/* ---------------------------------------------------------------------------
   Forms (quote enquiry, contact)
   -------------------------------------------------------------------------- */

.tracspare-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.tracspare-field label,
.tracspare-field > span:first-child { font-size: 12.5px; font-weight: 700; color: var(--ts-body); }
.tracspare-field input,
.tracspare-field textarea,
.tracspare-field select,
.tracspare-quote-fields input:not([type=hidden]),
.tracspare-quote-fields textarea {
	border: 1px solid var(--ts-field-border);
	border-radius: 8px;
	padding: 12px 13px;
	font-size: 14px;
	color: var(--ts-ink);
	background: var(--ts-bg);
	outline: none;
	font-family: inherit;
	width: 100%;
}
.tracspare-field input:focus,
.tracspare-field textarea:focus,
.tracspare-quote-fields input:focus,
.tracspare-quote-fields textarea:focus { border-color: var(--ts-green-700); background: var(--ts-white); }
.tracspare-field .required { color: var(--ts-red); }
/* The "Don't know / part number only" tick on the quote form: a checkbox and
   its words on one line, not the full-width boxed input every other field
   in .tracspare-field gets from the rule above. */
.tracspare-field--checkbox label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.tracspare-field--checkbox input[type=checkbox] { width: 18px; height: 18px; padding: 0; margin: 0; flex: 0 0 auto; accent-color: var(--ts-green-700); }
.tracspare-field-note { font-size: 12.5px; color: var(--ts-ink-soft); margin: 0 0 14px; }
.tracspare-field__input--error { border-color: var(--ts-red) !important; }
.tracspare-field__error { font-size: 12.5px; color: var(--ts-red); margin: 0; }

/* The country select, enhanced by selectWoo (Form::maybe_enqueue_country_select())
   into a searchable dropdown - selectWoo hides the underlying <select> and
   renders its own markup, so the plain .tracspare-field select rule above
   never reaches it; restyled here to match the same border/radius/height
   as every other field on this form instead of selectWoo's own defaults. */
.tracspare-field .select2-container { width: 100% !important; }
.tracspare-field .select2-container--default .select2-selection--single {
	border: 1px solid var(--ts-field-border);
	border-radius: 8px;
	height: auto;
	padding: 12px 13px;
	background: var(--ts-bg);
}
.tracspare-field .select2-container--default .select2-selection--single { position: relative; }
.tracspare-field .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: normal; padding: 0 48px 0 0; color: var(--ts-ink); font-size: 14px;
}
.tracspare-field .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 8px; }
/* The clear (x) button sits beside the arrow, not on it: select2 floats it right with
   its own margin, which landed it on top of the arrow once a country was chosen. Taken
   out of the flow and placed to the left of the arrow, with room kept in the text. */
.tracspare-field .select2-container--default .select2-selection--single .select2-selection__clear {
	position: absolute; top: 50%; right: 30px; margin: 0; transform: translateY(-50%);
	line-height: 1; font-size: 18px; color: var(--ts-ink-soft);
}
.tracspare-field .select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--ts-ink); }
.tracspare-field .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--ts-green-700); background: var(--ts-white); }
/* Not scoped to .tracspare-field: selectWoo appends the open results list to
   <body>, not inside the field it belongs to, so a scoped selector would
   never match it. select2's default highlighted-option blue replaced with
   the theme's own green. */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--ts-green-700);
	color: var(--ts-white);
}

.tracspare-quote-form { padding: clamp(24px,3.5vw,44px) 0; }
.tracspare-quote-form > h2:first-of-type { font-size: clamp(27px,3.4vw,40px); font-family: var(--ts-font-display); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 8px; }
.tracspare-quote-form h2 { font-size: 17px; margin: 0 0 16px; }
.tracspare-quote-fields {
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
	padding: clamp(20px,3vw,28px); margin-top: 20px;
}
.tracspare-quote-fields h2 { font-size: 16.5px; margin: 28px 0 16px; padding-top: 20px; border-top: 1px solid var(--ts-rule); }
.tracspare-quote-fields h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.tracspare-quote-fields .tracspare-submit,
.tracspare-quote-fields .button { margin-top: 8px; }
.tracspare-quote-summary { width: 100%; border-collapse: collapse; margin: 0 0 20px; }
.tracspare-quote-summary th, .tracspare-quote-summary td {
	text-align: left; padding: 10px 12px; font-size: 13.5px;
	border-bottom: 1px solid var(--ts-rule);
}
.tracspare-quote-summary th { color: var(--ts-ink-soft); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }

/* Parts on an enquiry (tracspare-core Quote\Form::parts_list): one card per
   part, the same shape as the quote list, on the form and the confirmation. */
.tracspare-enquiry-parts__meta { margin: 0 0 14px; font-size: 14px; color: var(--ts-ink-soft); }
.tracspare-enquiry-parts__meta a { color: var(--ts-green-700); font-weight: 700; }
.tracspare-enquiry-parts { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; text-align: left; }
.tracspare-enquiry-part {
	display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px;
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
}
.tracspare-enquiry-part__image {
	flex: none; width: 64px; height: 64px; overflow: hidden;
	border: 1px solid var(--ts-rule); border-radius: var(--ts-radius); background: var(--ts-white);
}
.tracspare-enquiry-part__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tracspare-enquiry-part__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tracspare-enquiry-part__body .tracspare-part-number { font-size: 12px; color: var(--ts-green-700); }
.tracspare-enquiry-part__name { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ts-ink); }
.tracspare-enquiry-part__name a { color: inherit; text-decoration: none; }
.tracspare-enquiry-part__name a:hover { color: var(--ts-green-700); text-decoration: underline; }
.tracspare-enquiry-part__price { font-size: 12.5px; }
.tracspare-enquiry-part__qty {
	flex: none; min-width: 76px; padding: 8px 12px; text-align: center;
	background: var(--ts-green-50); border: 1px solid var(--ts-green-100); border-radius: var(--ts-radius);
	display: flex; flex-direction: column; align-items: center; line-height: 1.15;
}
.tracspare-enquiry-part__qty-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ts-ink-soft); }
.tracspare-enquiry-part__qty-value { font-size: 20px; font-weight: 800; color: var(--ts-ink); }
.tracspare-enquiry-part__unit { font-size: 12px; color: var(--ts-body); }
@media (max-width: 480px) {
	.tracspare-enquiry-part { gap: 10px; padding: 10px; }
	.tracspare-enquiry-part__image { width: 52px; height: 52px; }
	.tracspare-enquiry-part__qty { min-width: 62px; padding: 6px 8px; }
}

.tracspare-confirmation { text-align: center; max-width: 640px; margin: 0 auto; }
.tracspare-confirmation__lead { font-size: 15.5px; color: var(--ts-body); }
.tracspare-reference-block {
	background: var(--ts-green-50);
	border: 1px solid var(--ts-green-100);
	border-radius: var(--ts-radius-lg);
	padding: 22px; margin: 20px 0 24px;
}
.tracspare-reference-label {
	display: block;
	font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ts-green-700); margin-bottom: 10px;
}
.tracspare-reference {
	font-family: var(--ts-font-mono);
	font-size: clamp(22px,4vw,32px);
	font-weight: 500;
	color: var(--ts-green-900);
	letter-spacing: 0.04em;
	word-break: break-all;
}
.tracspare-confirmation .tracspare-quote-summary { text-align: left; margin-top: 24px; }
.tracspare-confirmation .button { width: 100%; justify-content: center; margin-bottom: 12px; }

/* Both button rows on the confirmation page (send-options, then the two
   "where next" links): side by side on desktop, full-width stacked on
   tablet and mobile. Overrides the block-level ".button { width: 100% }"
   rule above with a flex basis instead, only within this row. */
.tracspare-confirmation__actions { display: flex; gap: 10px; margin: 20px 0; }
.tracspare-confirmation__actions .button { width: auto; flex: 1 1 0; margin-bottom: 0; }

@media (max-width: 900px) {
	.tracspare-confirmation__actions { flex-direction: column; }
	.tracspare-confirmation__actions .button { width: 100%; }
}

/* honeypot */
.tracspare-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------------
   Bulk order form (Quote\BulkForm) - a dark, high-contrast section by
   design, matched to docs/reference/tracspare-reference-site.html's
   "Export Inquiry & Bulk Orders" section, translated onto this site's own
   green/orange palette rather than the reference's literal gold. Reuses
   .tracspare-field for label/input structure, restyled here for a dark
   background rather than duplicated.
   -------------------------------------------------------------------------- */

/*
 * padding/max-width deliberately NOT both on .tracspare-bulk-order__inner -
 * this section reuses .tracspare-container (the same class every other
 * section on the site sizes itself with) for that, in the markup, rather
 * than duplicating its numbers here. The two used to disagree: max-width
 * on the inner element while the gutter padding sat on the outer one meant
 * this section's content could run wider than every other section's,
 * since the container-width calculation happened before the gutter was
 * subtracted instead of after.
 */
.tracspare-home-bulk-order { background: var(--ts-green-50); border-top: 1px solid var(--ts-green-100); }
.tracspare-bulk-order { color: var(--ts-body); padding: clamp(32px,5vw,56px) 0; }
.tracspare-bulk-order__inner {
	display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px,4vw,56px); align-items: start;
}
/*
 * .tracspare-bulk-order prefixed on every rule below that targets a <p> -
 * eyebrow, lead, checkbox row, note: page.php wraps all page content
 * (including this shortcode's output) in .tracspare-prose, and
 * ".tracspare-prose p" (one class + one tag, specificity 0,1,1) otherwise
 * beats a single-class selector like ".tracspare-bulk-order__lead" (0,1,0)
 * outright.
 */
.tracspare-bulk-order .tracspare-bulk-order__eyebrow {
	font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
	color: var(--ts-orange-800); margin: 0 0 10px;
}
.tracspare-bulk-order__intro h2 {
	font-family: var(--ts-font-display); font-size: clamp(28px,3.6vw,40px); font-weight: 800;
	letter-spacing: -0.02em; line-height: 1.1; color: var(--ts-green-900); margin: 0 0 14px;
}
.tracspare-bulk-order .tracspare-bulk-order__lead { color: var(--ts-body); line-height: 1.7; font-size: 14.5px; margin: 0 0 20px; }
.tracspare-bulk-order__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tracspare-bulk-order__checklist li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ts-body); }
.tracspare-bulk-order__checklist li::before {
	content: '✓'; flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
	background: var(--ts-cta); color: var(--ts-cta-text); font-size: 12px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}

.tracspare-bulk-order__form {
	background: var(--ts-white); border: 1px solid var(--ts-rule);
	border-radius: var(--ts-radius-lg); padding: clamp(20px,3vw,28px);
}
.tracspare-bulk-order__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tracspare-bulk-order__form .tracspare-field label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.tracspare-bulk-order .tracspare-bulk-order__checkbox-row { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 13.5px; color: var(--ts-body); }
.tracspare-bulk-order__checkbox-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--ts-orange-600); cursor: pointer; }
.tracspare-bulk-order__checkbox-row label { cursor: pointer; color: inherit; }
.tracspare-bulk-order__submit {
	width: 100%; background: var(--ts-cta) !important; border-color: var(--ts-cta) !important; color: var(--ts-cta-text) !important;
}
.tracspare-bulk-order__submit:hover { background: var(--ts-cta-hover) !important; }
.tracspare-bulk-order .tracspare-bulk-order__note { font-size: 12px; color: var(--ts-ink-soft); text-align: center; margin: 10px 0 0; }

@media (max-width: 780px) {
	.tracspare-bulk-order__inner { grid-template-columns: 1fr; }
	.tracspare-bulk-order__row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Bulk order "send your enquiry" modal (Quote\BulkForm) - shown after a
   submission, on top of the (freshly emptied) form rather than replacing
   it, so closing it or refreshing the page always leaves something usable.
   -------------------------------------------------------------------------- */

.tracspare-bulk-order-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tracspare-bulk-order-modal__overlay { position: absolute; inset: 0; background: rgba(17,24,39,0.6); }
.tracspare-bulk-order-modal__card {
	position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto;
	background: var(--ts-white); border-radius: var(--ts-radius-lg); box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}
.tracspare-bulk-order-modal__header {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: var(--ts-green-700); color: #fff; padding: 18px 22px; border-radius: var(--ts-radius-lg) var(--ts-radius-lg) 0 0;
}
.tracspare-bulk-order-modal__header h2 {
	font-family: var(--ts-font-display); font-size: 15px; font-weight: 800; letter-spacing: 0.02em;
	text-transform: uppercase; margin: 0; color: #fff;
}
.tracspare-bulk-order-modal__close {
	background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.tracspare-bulk-order-modal__body { padding: 22px; }
/* .tracspare-bulk-order-modal prefixed on the two <p> rules below - same
   .tracspare-prose p specificity collision noted above on .tracspare-bulk-order. */
.tracspare-bulk-order-modal .tracspare-bulk-order-modal__intro { color: var(--ts-green-700); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.tracspare-bulk-order-modal__text {
	width: 100%; min-height: 200px; resize: vertical;
	background: var(--ts-bg); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius);
	padding: 14px; font-family: var(--ts-font-mono); font-size: 12.5px; line-height: 1.6; color: var(--ts-ink);
	margin: 0 0 18px;
}
.tracspare-bulk-order-modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 10px; }
.tracspare-bulk-order-modal__btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; padding: 13px; border-radius: var(--ts-radius); border: 1px solid transparent;
	font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none !important;
}
.tracspare-bulk-order-modal__btn--whatsapp { background: var(--ts-whatsapp); color: var(--ts-whatsapp-ink) !important; }
.tracspare-bulk-order-modal__btn--whatsapp:hover { background: var(--ts-whatsapp-hover); }
.tracspare-bulk-order-modal__btn--email { background: var(--ts-ink); color: #fff !important; }
.tracspare-bulk-order-modal__btn--email:hover { background: #1f2937; }
.tracspare-bulk-order-modal__btn--copy { background: var(--ts-bg); border-color: var(--ts-rule); color: var(--ts-ink) !important; width: 100%; }
.tracspare-bulk-order-modal__btn--copy:hover { background: var(--ts-rule); }
.tracspare-bulk-order-modal .tracspare-bulk-order-modal__note { font-size: 12.5px; color: var(--ts-ink-soft); text-align: center; margin: 16px 0 0; }

@media (max-width: 480px) {
	.tracspare-bulk-order-modal__actions { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Policy tabs
   -------------------------------------------------------------------------- */

/* Seller details, at the top of every Policies & Terms tab (Content\SellerDetails). */
.tracspare-seller { margin: 0 0 28px; padding: 18px 22px; background: var(--ts-white); border: 1px solid var(--ts-rule); border-left: 4px solid var(--ts-green-700); border-radius: 10px; }
.tracspare-policy-body .tracspare-seller__title { margin: 0 0 12px; padding: 0; border: 0; font-size: 14px; font-family: var(--ts-font-mono); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts-ink-soft); }
/* One column per field, a vertical rule between them (14 Oct 2026). On tablet and
   mobile (900px and under, the theme's tablet breakpoint) the columns stack, and the rule
   turns horizontal so it still separates them. */
.tracspare-policy-body .tracspare-seller__list { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; }
.tracspare-policy-body .tracspare-seller__list > div { margin: 0; padding: 2px 22px; }
.tracspare-policy-body .tracspare-seller__list > div:first-child { padding-left: 0; }
.tracspare-policy-body .tracspare-seller__list > div + div { border-left: 1px solid var(--ts-rule); }
@media (max-width: 900px) {
	.tracspare-policy-body .tracspare-seller__list { grid-template-columns: 1fr; }
	.tracspare-policy-body .tracspare-seller__list > div { padding: 12px 0; }
	.tracspare-policy-body .tracspare-seller__list > div:first-child { padding-top: 2px; }
	.tracspare-policy-body .tracspare-seller__list > div + div { border-left: 0; border-top: 1px solid var(--ts-rule); }
}
.tracspare-policy-body .tracspare-seller__list dt { margin: 0 0 3px; font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ts-ink); }
.tracspare-policy-body .tracspare-seller__list dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ts-ink); overflow-wrap: anywhere; }
.tracspare-policy-tabs { display: flex; flex-wrap: wrap; gap: 4px; overflow-x: auto; margin-bottom: 0; list-style: none; padding: 0; }
.tracspare-policy-tabs a {
	display: block;
	padding: 12px 18px;
	font-size: 13.5px; font-weight: 700;
	color: var(--ts-ink-soft) !important;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.tracspare-policy-tabs a:hover { color: var(--ts-green-700) !important; }
.tracspare-policy-tabs .is-active a { color: var(--ts-green-700) !important; border-bottom-color: var(--ts-green-700); }
.tracspare-policy-body h2 { font-size: 16px; margin: 0 0 8px; }
.tracspare-policy-body section { margin-bottom: 24px; }
.tracspare-policy-body p { font-size: 14.5px; line-height: 1.68; color: var(--ts-body); margin: 0; }
.tracspare-policy-meta { font-size: 13px; color: var(--ts-ink-soft); margin-bottom: 24px; }

/* ---------------------------------------------------------------------------
   Marquee (brand strip)
   -------------------------------------------------------------------------- */

@keyframes tracspare-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tracspare-marquee-mask {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* Static by default — wraps and centres like an ordinary row. Only becomes
   a scrolling, non-wrapping track at a breakpoint whose real item count
   (tracspare_render_brand_marquee(), server-side) is over that
   breakpoint's threshold: desktop > 4, tablet > 5, mobile > 2. The second,
   decorative copy of the strip that the seamless loop needs
   (.tracspare-brand-tile--dup) stays hidden until then. */
.tracspare-marquee-track {
	display: flex; flex-wrap: wrap; justify-content: center;
	width: 100%; gap: 14px;
}
/* Two classes, not one - .tracspare-brand-tile below also sets display and
   comes later in the file, so an equal-specificity single-class selector
   here would lose to it and the "hidden" duplicate would render anyway. */
.tracspare-brand-tile.tracspare-brand-tile--dup { display: none; }

@media (max-width: 600px) {
	.tracspare-marquee-track.is-scroll-mobile {
		flex-wrap: nowrap; justify-content: flex-start; width: max-content;
		animation: tracspare-marquee 22s linear infinite;
	}
	.tracspare-marquee-track.is-scroll-mobile .tracspare-brand-tile--dup { display: flex; }
}
@media (min-width: 601px) and (max-width: 900px) {
	.tracspare-marquee-track.is-scroll-tablet {
		flex-wrap: nowrap; justify-content: flex-start; width: max-content;
		animation: tracspare-marquee 28s linear infinite;
	}
	.tracspare-marquee-track.is-scroll-tablet .tracspare-brand-tile--dup { display: flex; }
}
@media (min-width: 901px) {
	.tracspare-marquee-track.is-scroll-desktop {
		flex-wrap: nowrap; justify-content: flex-start; width: max-content;
		animation: tracspare-marquee 34s linear infinite;
	}
	.tracspare-marquee-track.is-scroll-desktop .tracspare-brand-tile--dup { display: flex; }
}
.tracspare-marquee-track:hover { animation-play-state: paused; }

.tracspare-brand-tile {
	flex: none; width: clamp(140px,16vw,180px); height: 76px;
	border: 1px solid var(--ts-rule); border-radius: 10px;
	background: #ffffff;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px;
	font-family: var(--ts-font-display); font-size: 15px; font-weight: 800;
	color: var(--ts-body); text-align: center;
}
.tracspare-brand-tile__img { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; }
.tracspare-brand-tile__label { font-size: 13px; line-height: 1.2; }

/* ---------------------------------------------------------------------------
   Home page
   -------------------------------------------------------------------------- */

.tracspare-hero {
	position: relative;
	border-bottom: 1px solid var(--ts-rule);
	background-color: var(--ts-green-50);
	background-image: repeating-linear-gradient(135deg, var(--ts-green-100) 0 14px, var(--ts-green-50) 14px 28px);
}
/* A real photo (banner_image, set in the Home Page Content meta box)
   replaces the default diagonal-stripe pattern above via an inline
   background-image style, sized/positioned here; the scrim + light text
   keep the copy readable over whatever the client uploads. */
.tracspare-hero--has-image {
	background-size: cover; background-position: center;
}
.tracspare-hero--has-image::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(18,61,45,0.88) 0%, rgba(18,61,45,0.72) 45%, rgba(18,61,45,0.35) 100%);
}
.tracspare-hero--has-image .tracspare-hero__inner { position: relative; }
.tracspare-hero--has-image h1,
.tracspare-hero--has-image .tracspare-eyebrow { color: var(--ts-white); }
.tracspare-hero--has-image .tracspare-hero__lede { color: var(--ts-green-100); }
.tracspare-hero--has-image .tracspare-hero__point-title { color: var(--ts-white); }
.tracspare-hero--has-image .tracspare-hero__point-sub { color: var(--ts-green-100); }
.tracspare-hero--has-image .tracspare-hero__point-icon { background: rgba(255,255,255,0.15); color: var(--ts-white); }

.tracspare-hero__inner { padding: clamp(40px,6.5vw,88px) var(--ts-gutter); }
.tracspare-hero__copy { max-width: 660px; }
.tracspare-hero h1 { font-size: clamp(33px,5vw,56px); line-height: 1.04; color: var(--ts-green-100); margin: 0 0 18px; }
.tracspare-hero__lede { font-size: clamp(15px,1.2vw,17.5px); line-height: 1.62; color: var(--ts-body); margin: 0 0 28px; max-width: 52ch; }
.tracspare-hero__points { display: flex; flex-wrap: wrap; gap: 22px 34px; margin-bottom: 32px; }
.tracspare-hero__point { display: flex; align-items: center; gap: 11px; }
.tracspare-hero__point-icon {
	width: 34px; height: 34px; border-radius: 9px; background: var(--ts-green-100);
	display: flex; align-items: center; justify-content: center; flex: none; color: var(--ts-green-700);
}
.tracspare-hero__point-title { font-size: 14px; font-weight: 700; color: var(--ts-ink); line-height: 1.25; }
.tracspare-hero__point-sub { font-size: 12.5px; color: var(--ts-ink-soft); }
.tracspare-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

.tracspare-section-lede { font-size: 14.5px; color: var(--ts-ink-soft); margin: 0 0 22px; }

.tracspare-brand-strip { background: var(--ts-white); border-bottom: 1px solid var(--ts-rule); overflow: hidden; }
.tracspare-brand-strip .tracspare-container { padding-top: clamp(20px,2.6vw,30px); padding-bottom: clamp(20px,2.6vw,30px); }
.tracspare-brand-strip__label {
	font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ts-ink-soft); text-align: center; margin-bottom: 16px;
}
.tracspare-brand-tile:hover { border-color: var(--ts-green-700); text-decoration: none; }

.tracspare-section { padding-top: clamp(20px,3vw,32px); padding-bottom: clamp(20px,3vw,30px); }
.tracspare-section h2 { font-size: clamp(22px,2.6vw,30px); margin-bottom: 20px; }

.tracspare-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 16px; }

/* Home page: Featured parts and Shop by Category always run a fixed column
   count per breakpoint rather than the shop grid's fluid auto-fill, so the
   two sections line up visually instead of each settling on its own count.
   Desktop column counts differ on purpose - 4 for Featured parts (product
   cards need the width for image/price/button), 5 for Shop by Category
   (a category card is just an image and two lines of text, so a fifth
   column still has room to breathe). */
/* .tracspare-home-section since the 29 Sep home rebuild renamed the
   sections - without it Featured parts fell back to the shop's auto-fill and
   ran 5 + 3 on wide screens. */
.home .tracspare-section ul.products,
.home .tracspare-home-section ul.products { grid-template-columns: repeat(4, 1fr); }
.home .tracspare-category-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
	.home .tracspare-section ul.products,
	.home .tracspare-home-section ul.products,
	.home .tracspare-category-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.home .tracspare-section ul.products,
	.home .tracspare-home-section ul.products { grid-template-columns: repeat(1, 1fr); }
}
/* An even 50/50 split - image half, text half - not a small thumbnail
   plus flexible text. flex: 0 0 50% on both halves pins the ratio exactly
   regardless of card width; the image's own aspect-ratio then sets the
   card's height (its width is fixed at 50%, so a 1:1 ratio makes it as
   tall as it is wide). overflow: hidden on the card, not the image
   wrapper, is what lets that image bleed flush to three of the card's own
   edges. */
.tracspare-category-card {
	display: flex; align-items: stretch;
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
	overflow: hidden; color: var(--ts-ink) !important; text-decoration: none !important;
}
.tracspare-category-card:hover { border-color: var(--ts-green-700); background: var(--ts-green-50); }
.tracspare-category-card__image {
	flex: 0 0 50%; aspect-ratio: 1 / 1;
	background: var(--ts-white); border-right: 1px solid var(--ts-rule);
}
.tracspare-category-card__image img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: 1 / 1; background: var(--ts-white) }
.tracspare-category-card__body {
	flex: 0 0 50%; min-width: 0; display: flex; flex-direction: column;
	justify-content: center; gap: 4px; padding: 14px;
}
.tracspare-category-card__name { font-size: 15px; font-weight: 700; }
.tracspare-category-card__count { font-size: 12.5px; font-weight: 600; color: var(--ts-ink-soft); } /* Semi-bold (2 Oct). */

.tracspare-how-it-works {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px;
}
.tracspare-how-step {
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
	padding: 18px; display: flex; align-items: flex-start; gap: 14px;
}
.tracspare-how-step:hover { border-color: var(--ts-green-700); background: var(--ts-green-50); }
.tracspare-how-step__num {
	flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ts-green-900); color: var(--ts-white);
	font-family: var(--ts-font-display); font-size: 14px; font-weight: 800;
	display: flex; align-items: center; justify-content: center;
}
.tracspare-how-step__icon {
	flex: none; width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--ts-green-900);
	display: flex; align-items: center; justify-content: center; color: var(--ts-green-900);
}
.tracspare-how-step__title { font-size: 15px; font-weight: 700; color: var(--ts-ink); }
.tracspare-how-step__sub { font-size: 13.5px; color: var(--ts-body); line-height: 1.5; margin-top: 4px; }

/* ---------------------------------------------------------------------------
   Catalogue page
   -------------------------------------------------------------------------- */

.tracspare-catalogue-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.tracspare-catalogue-jump a {
	background: var(--ts-white); border: 1px solid var(--ts-rule-strong); border-radius: 20px;
	padding: 8px 15px; font-size: 13px; font-weight: 700; color: var(--ts-green-700) !important;
}
.tracspare-catalogue-jump a:hover { border-color: var(--ts-green-700); background: var(--ts-green-100); text-decoration: none; }

.tracspare-catalogue-groups { padding-top: clamp(26px,3.5vw,44px); padding-bottom: clamp(26px,3.5vw,44px); display: flex; flex-direction: column; gap: clamp(30px,4vw,52px); }
.tracspare-catalogue-group .tracspare-section-head { padding-bottom: 14px; border-bottom: 2px solid var(--ts-green-100); }
/* One product per row on mobile - scoped to the catalogue's own grids so
   the shop grid's fluid auto-fill (which already gives a wider phone two
   narrow columns rather than one full-width one) is untouched. */
@media (max-width: 600px) {
	.tracspare-catalogue-groups ul.products { grid-template-columns: repeat(1, 1fr); }
}

/* ---------------------------------------------------------------------------
   Prose pages (About)
   -------------------------------------------------------------------------- */

.tracspare-prose-page h1 { font-size: clamp(28px,3.6vw,42px); color: var(--ts-green-900); margin: 0 0 16px; }
.tracspare-prose p { font-size: 15.5px; line-height: 1.7; color: var(--ts-body); margin: 0 0 1.3em; max-width: 100%; }
.tracspare-prose > p:first-of-type { font-size: clamp(16px,1.5vw,18px); }
.tracspare-page-head__lede { font-size: 15.5px; color: var(--ts-ink-soft); margin: 0 0 24px; max-width: 58ch; }

/* ---------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.tracspare-contact-layout { display: flex; flex-wrap: wrap; gap: clamp(18px,2.5vw,28px); align-items: flex-start; padding-bottom: clamp(38px,5vw,60px); }
.tracspare-contact-form-panel {
	flex: 2 1 340px; min-width: 0;
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg); padding: 24px;
}
.tracspare-contact-info { flex: 1 1 250px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tracspare-contact-info h3 { font-size: 16px; margin-bottom: 14px; }
.tracspare-contact-info .button { justify-content: center; }
.tracspare-contact-form button[type="submit"] { width: 100%; }

/* ---------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.tracspare-blog-card__tag { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts-orange-800); }
.tracspare-blog-card__date { font-size: 12px; color: var(--ts-ink-soft); font-family: var(--ts-font-mono); }
.tracspare-blog-card__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }

.tracspare-blog-lead {
	display: flex; flex-wrap: wrap;
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-xl);
	overflow: hidden; margin-bottom: clamp(24px,3vw,36px);
	color: inherit !important; text-decoration: none !important;
}
.tracspare-blog-lead:hover { border-color: var(--ts-green-700); }
.tracspare-blog-lead__media { flex: 1 1 320px; min-height: 240px; background: var(--ts-green-50); }
.tracspare-blog-lead__media img { width: 100%; height: 100%; object-fit: cover; }
.tracspare-blog-lead__body { flex: 1 1 340px; min-width: 0; padding: clamp(20px,3vw,36px); display: flex; flex-direction: column; justify-content: center; }
.tracspare-blog-lead__body h2 { font-size: clamp(21px,2.7vw,31px); line-height: 1.2; margin: 0 0 12px; }
.tracspare-blog-lead__body p { font-size: 15px; line-height: 1.62; color: var(--ts-body); margin: 0 0 16px; }
.tracspare-blog-card__author { font-size: 13px; color: var(--ts-ink-soft); }

.tracspare-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px,1fr)); gap: 18px; }
.tracspare-blog-card {
	display: flex; flex-direction: column;
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
	overflow: hidden; color: inherit !important; text-decoration: none !important;
}
.tracspare-blog-card:hover { border-color: var(--ts-green-700); }
.tracspare-blog-card__media { aspect-ratio: 16/9; background: var(--ts-bg); }
.tracspare-blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.tracspare-blog-card__body { padding: 18px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.tracspare-blog-card__body h3 { font-size: 16.5px; line-height: 1.35; margin: 0; }
.tracspare-blog-card__body p { font-size: 13.5px; color: var(--ts-ink-soft); line-height: 1.55; margin: 0; }
.tracspare-blog-card__body .tracspare-blog-card__date { margin-top: auto; }

.tracspare-blog-post__byline { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: 13.5px; color: var(--ts-body); margin-top: 14px; }
.tracspare-blog-post__hero { aspect-ratio: 16/9; border-radius: var(--ts-radius-xl); overflow: hidden; border: 1px solid var(--ts-rule); background: var(--ts-bg); margin-bottom: clamp(24px,3vw,36px); }
.tracspare-blog-post__hero img { width: 100%; height: 100%; object-fit: cover; }
.tracspare-blog-post__lede { font-size: clamp(16.5px,1.6vw,19px); line-height: 1.6; color: var(--ts-green-900); font-weight: 500; margin: 0 0 26px; padding-left: 18px; border-left: 3px solid var(--ts-orange-700); }
.tracspare-blog-post .tracspare-prose p { font-size: 16px; line-height: 1.75; }

.tracspare-blog-cta {
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
	padding: 22px; margin-top: clamp(28px,3.5vw,40px);
	display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between;
}
.tracspare-blog-cta h3 { font-size: 17px; margin-bottom: 6px; }
.tracspare-blog-cta p { font-size: 13.5px; color: var(--ts-ink-soft); margin: 0; }

.tracspare-blog-more { margin-top: clamp(30px,4vw,52px); }
.tracspare-blog-more h3 { font-size: clamp(19px,2.2vw,24px); margin-bottom: 16px; }
.tracspare-blog-more .tracspare-blog-card__body { padding: 16px; }

/* ---------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.tracspare-toast {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
	background: var(--ts-green-900); color: var(--ts-white);
	border-radius: 10px; padding: 13px 20px; font-size: 14px; font-weight: 500;
	z-index: 90; box-shadow: 0 12px 30px rgba(18,61,45,0.28);
	max-width: 90vw; text-align: center;
	opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.tracspare-toast.is-visible { opacity: 1; }

/* ---------------------------------------------------------------------------
   Trust content: credentials strip, stats/countries/testimonials/gallery
   -------------------------------------------------------------------------- */

.tracspare-credentials-strip {
	background: var(--ts-green-50);
	border-top: 1px solid var(--ts-green-100);
	border-bottom: 1px solid var(--ts-green-100);
}
.tracspare-credentials-strip__inner {
	display: flex; flex-wrap: wrap; gap: 18px 32px;
	padding: 14px 0; justify-content: center;
}
.tracspare-credentials-strip__item { display: flex; align-items: center; gap: 10px; }
.tracspare-credentials-strip__icon {
	display: flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
	background: var(--ts-green-100); color: var(--ts-green-800); font-size: 13px;
}
.tracspare-credentials-strip__text { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.3; }
.tracspare-credentials-strip__text strong { color: var(--ts-ink); font-size: 13px; }
.tracspare-credentials-strip__text span { color: var(--ts-ink-soft); }

.tracspare-trust-panel {
	background: var(--ts-green-50);
	border-top: 1px solid var(--ts-green-100);
	border-bottom: 1px solid var(--ts-green-100);
	padding: clamp(32px,4vw,56px) 0;
}
.tracspare-trust-panel h2 {
	text-align: center; font-size: clamp(22px,2.6vw,30px); margin: 0 0 6px;
	color: var(--ts-ink);
}
.tracspare-trust-panel__sub {
	text-align: center; color: var(--ts-ink-soft); font-size: 14px; margin: 0 0 30px;
}

.tracspare-stats-row {
	display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
	gap: 14px; margin-bottom: 30px;
}
.tracspare-stats-row__item {
	background: var(--ts-white); border: 1px solid var(--ts-green-100);
	border-radius: var(--ts-radius-lg); padding: 18px; text-align: center;
}
.tracspare-stats-row__num { font-size: 1.8rem; font-weight: 700; color: var(--ts-orange-700); }
.tracspare-stats-row__label { font-size: 12.5px; color: var(--ts-ink-soft); margin-top: 3px; }

.tracspare-countries-grid { text-align: center; }
.tracspare-countries-grid__title {
	font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
	color: var(--ts-ink-soft); margin-bottom: 12px;
}
.tracspare-countries-grid__items { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.tracspare-countries-grid__item {
	display: inline-flex; flex-direction: column; align-items: center;
	margin: 4px 6px; min-width: 64px;
	background: var(--ts-white);
	border: 1px solid var(--ts-rule);
	border-radius: var(--ts-radius-lg);
	padding: 8px;
}
.tracspare-countries-grid__flag { font-size: 1.7rem; line-height: 1; }
.tracspare-countries-grid__name { font-size: 12px; color: var(--ts-ink-soft); margin-top: 3px; }

/* ---------------------------------------------------------------------------
   Carousel: shared by testimonials and the shipment gallery. Native scroll +
   snap does the sliding, so it works (without arrows) even if the JS below
   never runs; the JS only wires up the prev/next buttons and auto-advance.
   -------------------------------------------------------------------------- */

/* The 0 50px keeps the track itself away from the carousel's own edges, so
   the arrows below - inset:0 against this same box - land in that gutter
   next to the track instead of overlapping the first/last slide's content.
   Present by default (matches a no-JS page, where the arrows are always
   there too - see the carousel's own docblock in loops.php); tracspare.js
   removes it via this modifier class once it measures that the slides do
   not actually overflow the visible track and hides the arrows to match,
   so a row that already fits does not carry gutter space for buttons that
   are not shown. */
.tracspare-carousel { position: relative; padding: 0 50px; }
.tracspare-carousel--no-arrows { padding: 0; }
.tracspare-carousel__track {
	display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; padding-bottom: 4px;
}
.tracspare-carousel__track::-webkit-scrollbar { display: none; }
.tracspare-carousel__slide {
	flex: 0 0 calc(50% - 9px); scroll-snap-align: start; min-width: 0;
}
/* Same tablet threshold the shop/category grids already squeeze at - one
   full-width slide on tablet and mobile both, no peek of the next card. */
@media (max-width: 900px) {
	.tracspare-carousel__slide { flex-basis: 100%; }
}
/* Testimonials: three cards a row on desktop instead of two and a slide (2 Oct). With three or fewer nothing overflows, so tracspare.js hides the arrows by itself; a fourth
   testimonial brings them back. */
@media (min-width: 901px) {
	.tracspare-carousel--three .tracspare-carousel__slide { flex-basis: calc((100% - 36px) / 3); }
}
/* Overlaid on the track, not below it: left arrow pinned to the left edge,
   right arrow to the right edge, both vertically centered on the track's own
   height. The wrapper spans the full carousel with pointer-events disabled
   so it never blocks swiping/clicking the track itself - only the two
   buttons re-enable it. */
.tracspare-carousel__arrows {
	position: absolute; inset: 0; bottom: 4px;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 6px; pointer-events: none;
}
/* tracspare.js sets the native `hidden` attribute when a carousel's slides
   fit the visible track without overflowing (nothing to page between at
   the current breakpoint). Needs its own rule: the browser's default
   `[hidden] { display: none }` and this component's own `display: flex`
   above are equal specificity, and the flex rule would otherwise win. */
.tracspare-carousel__arrows[hidden] { display: none; }
.tracspare-carousel__arrow {
	width: 38px; height: 38px; padding: 0; border-radius: 50%; flex: none;
	background: var(--ts-white); border: 1px solid var(--ts-rule-strong); color: var(--ts-ink);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	box-shadow: 0 2px 10px rgba(17,24,39,0.18); pointer-events: auto;
}
.tracspare-carousel__arrow:hover:not(:disabled) { border-color: var(--ts-green-700); color: var(--ts-green-700); }
.tracspare-carousel__arrow:disabled { opacity: 0.35; cursor: default; }

.tracspare-testimonials__item {
	background: var(--ts-white); border: 1px solid var(--ts-rule);
	border-radius: var(--ts-radius-lg); padding: 22px;
	box-shadow: 0 4px 14px rgba(17,24,39,0.05); height: 100%;
}
.tracspare-testimonials__mark { font-size: 2.2rem; color: var(--ts-orange-700); line-height: 1; }
.tracspare-testimonials__text { font-size: 14px; line-height: 1.6; color: var(--ts-body); margin: 0 0 20px; }
.tracspare-testimonials__who { font-size: 13.5px; font-weight: 700; color: var(--ts-green-700); }
.tracspare-testimonials__loc { font-size: 12px; color: var(--ts-ink-soft); margin-top: 0.3rem; }

.tracspare-carousel__slide img {
	width: 100%; height: 220px; object-fit: cover; border-radius: var(--ts-radius-lg) !important;
	display: block;
}

hr {
	border: 1px solid gainsboro;
}

/* ===========================================================================
   Home page, 2026-09-29 redesign.
   Modelled on the client's reference site and two other sites he pointed
   to. The rules followed here: the site's own fonts and
   colours only; real content only (no stock art, no emoji icons); hairlines
   and type do the structure, not shadows and gradients - the one gradient is
   the scrim that keeps the hero text readable over its photo.
   ========================================================================== */

/* Section label: "01 · Brands" */
.tracspare-kicker {
	display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--ts-font-mono); font-size: 12px; font-weight: 500;
	letter-spacing: 0.14em; text-transform: uppercase; color: var(--ts-green-700);
}
.tracspare-kicker__num { color: var(--ts-orange-800); }
.tracspare-kicker__num::after {
	content: ""; display: inline-block; width: 28px; height: 1px; margin-left: 12px;
	vertical-align: middle; background: currentColor; opacity: 0.6;
}
.tracspare-kicker--on-dark { color: var(--ts-green-100); }
.tracspare-kicker--on-dark .tracspare-kicker__num { color: var(--ts-orange-600); }

/* --- Hero ---------------------------------------------------------------- */
.tracspare-home-hero {
	position: relative; isolation: isolate; overflow: hidden;
	background-color: var(--ts-green-900); color: var(--ts-white);
	background-image: var(--tracspare-hero-image, none);
	background-size: cover; background-position: 72% center;
}
.tracspare-home-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	/* At least 0.87 dark wherever text sits (up to ~62% across), so even a white patch of photo keeps
	   the hero text above 6:1. It was 0.6-0.8 under the right end of the buttons and points. */
	background: linear-gradient(90deg, rgba(18,61,45,0.97) 0%, rgba(18,61,45,0.9) 60%, rgba(18,61,45,0.6) 80%, rgba(18,61,45,0.4) 100%);
}
@media (max-width: 900px) {
	/* One column: the text runs the full width, so the whole photo is darkened evenly. */
	.tracspare-home-hero::before { background: rgba(18,61,45,0.86); }
	/* A phone gets the 1024px size, not the 2560px original (PageSpeed, 15 Oct 2026). */
	.tracspare-home-hero { background-image: var(--tracspare-hero-image-small, var(--tracspare-hero-image, none)); }
}
.tracspare-home-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 80%);
	mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 80%);
}
.tracspare-home-hero__grid {
	/* One column since 2 Oct 2026: the finder moved beside the parts, so the
	   copy keeps to the left and the photo shows on the right. */
	display: grid; grid-template-columns: minmax(0, 760px);
	grid-template-areas: "copy" "more";
	column-gap: clamp(28px, 5vw, 72px); row-gap: 0; align-items: end;
	padding-top: clamp(44px, 7vw, 96px); padding-bottom: clamp(44px, 7vw, 96px);
}
.tracspare-home-hero__copy { grid-area: copy; }
.tracspare-home-hero__more { grid-area: more; align-self: start; }
.tracspare-home-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px;
	border: 1px solid rgba(255,255,255,0.2); border-radius: 999px;
	font-family: var(--ts-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ts-green-100);
}
.tracspare-home-hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ts-orange-600); }
.tracspare-home-hero h1 {
	margin: 22px 0 18px; max-width: 15ch; color: var(--ts-white);
	font-size: clamp(38px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -0.035em;
}
.tracspare-home-hero__lede {
	margin: 0; max-width: 52ch; color: rgba(255,255,255,0.88);
	font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.6;
}
.tracspare-home-hero__proof {
	list-style: none; margin: 32px 0 0; padding: 22px 0 0;
	border-top: 1px solid rgba(255,255,255,0.14);
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.tracspare-home-hero__proof li { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.4; }
.tracspare-home-hero__proof strong { display: block; font-size: 14px; color: var(--ts-white); }
.tracspare-home-hero__proof-icon {
	flex: none; width: 34px; height: 34px; border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,0.2); color: var(--ts-orange-600); font-size: 14px;
}
.tracspare-home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Buttons since 2 Oct; they were underlined text links.
   Same height as the finder's Find parts button. */
.tracspare-home-hero__btn { min-height: 50px; padding: 0 24px; font-size: 15px; }
@media (max-width: 600px) {
	.tracspare-home-hero__btn { flex: 1 1 100%; }
}

/* --- Finder (template-parts/tractor-finder.php) --------------------------- */
.tracspare-finder {
	background: var(--ts-white); color: var(--ts-ink);
	border-radius: 16px; overflow: hidden;
	box-shadow: 0 30px 60px -30px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.04);
}
.tracspare-finder__tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--ts-bg); border-bottom: 1px solid var(--ts-rule); }
.tracspare-finder__tab {
	padding: 15px 12px; margin: 0; border: 0; border-bottom: 2px solid transparent; background: transparent; cursor: pointer;
	font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ts-ink-soft);
}
/* The active tab in the brand orange with dark text, like the orange buttons (2 Oct; it was green with white
   text). White on this orange is 2.6:1, dark is 6.8:1. */
.tracspare-finder__tab.is-active { background: var(--ts-cta); color: var(--ts-cta-text); border-bottom-color: var(--ts-orange-600); }
/* No bottom padding: Find parts is the finder's bottom edge (2 Oct), pulled out to
   the sides by the panel's own padding. */
.tracspare-finder__panel { --finder-pad: 24px; display: grid; gap: 14px; padding: var(--finder-pad) var(--finder-pad) 0; }
.tracspare-finder__panel[hidden] { display: none; }
.tracspare-finder__title { margin: 0 0 2px; font-family: var(--ts-font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--ts-ink); }
.tracspare-finder__field { display: grid; gap: 6px; margin: 0; }
.tracspare-finder__label { font-family: var(--ts-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ts-ink-soft); }
.tracspare-finder select,
.tracspare-finder input[type="search"] {
	width: 100%; height: 50px; margin: 0; padding: 0 40px 0 14px;
	border: 1px solid var(--ts-field-border); border-radius: 10px; background-color: var(--ts-white);
	font-family: inherit; font-size: 15px; color: var(--ts-ink);
}
.tracspare-finder select {
	-webkit-appearance: none; appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 5.25 7 9.25l4-4' fill='none' stroke='%236B7280' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center;
}
.tracspare-finder select:disabled { background-color: var(--ts-bg); color: var(--ts-ink-soft); opacity: 1; }
/* Focus is one solid 2px green edge: the border plus a 1px shadow right outside it. An outline
   with an offset drew a second line with a white gap between (2 Oct). The
   transparent outline is for Windows high-contrast mode, which drops shadows. */
.tracspare-finder select:focus, .tracspare-finder input[type="search"]:focus { outline: 2px solid transparent; border-color: var(--ts-green-700); box-shadow: 0 0 0 1px var(--ts-green-700); }
/* The brand and model selects, enhanced by selectWoo (inc/enqueue.php, initFinders in
   tracspare.js) into the same searchable dropdown as the quote form's country field -
   see "The country select" above. selectWoo hides the real <select>, so the
   .tracspare-finder select rules never reach what is drawn; this gives the drawn box
   the finder's own field look (50px, white, 10px corners) and the open list the
   theme's green. */
.tracspare-finder .select2-container { width: 100% !important; }
.tracspare-finder .select2-container--default .select2-selection--single {
	display: flex; align-items: center; height: 50px; border: 1px solid var(--ts-field-border);
	border-radius: 10px; background: var(--ts-white);
}
.tracspare-finder .select2-container--default .select2-selection--single .select2-selection__rendered {
	flex: 1; line-height: normal; padding: 0 40px 0 14px; color: var(--ts-ink); font-size: 15px;
}
.tracspare-finder .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ts-ink-soft); }
.tracspare-finder .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: 10px; }
.tracspare-finder .select2-container--default .select2-selection--single .select2-selection__clear { position: absolute; top: 50%; right: 30px; margin: 0; transform: translateY(-50%); line-height: 1; font-size: 18px; color: var(--ts-ink-soft); }
.tracspare-finder .select2-container--default.select2-container--open .select2-selection--single,
.tracspare-finder .select2-container--default.select2-container--focus .select2-selection--single {
	border-color: var(--ts-green-700); box-shadow: 0 0 0 1px var(--ts-green-700); outline: 2px solid transparent;
}
.tracspare-finder .select2-container--default.select2-container--disabled .select2-selection--single { background: var(--ts-bg); }
.tracspare-finder .select2-container--default.select2-container--disabled .select2-selection__rendered,
.tracspare-finder .select2-container--default.select2-container--disabled .select2-selection__placeholder { color: var(--ts-ink-soft); }
.tracspare-finder__submit {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	height: 56px; margin: 6px calc(var(--finder-pad) * -1) 0; border: 0; border-radius: 0; cursor: pointer;
	background: var(--ts-cta); color: var(--ts-cta-text);
	font-family: inherit; font-size: 16px; font-weight: 700;
}
/* Same colours as Add to quote: the brand orange with dark text, darker orange when highlighted. */
.tracspare-finder__submit:hover, .tracspare-finder__submit:focus-visible { background: var(--ts-cta-hover); }
/* Inside each panel, above the button, since 2 Oct (it was a grey strip under the panels). */
.tracspare-finder__help {
	margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ts-body);
}
.tracspare-finder__help a { color: var(--ts-whatsapp-text); font-weight: 700; }

/* --- Sections ------------------------------------------------------------ */
.tracspare-home-section { padding-top: clamp(48px, 6vw, 88px); }
.tracspare-home-section__head {
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
	gap: 16px 32px; margin-bottom: 28px;
}
.tracspare-home-section__head h2 {
	margin: 12px 0 0; max-width: 22ch;
	font-size: clamp(28px, 3.6vw, 46px); line-height: 1.05; letter-spacing: -0.03em;
}
.tracspare-home-section__lede { margin: 10px 0 0; max-width: 56ch; font-size: 15px; color: var(--ts-ink-soft); }
.tracspare-home-section__aside { margin: 0; max-width: 40ch; font-size: 15px; line-height: 1.55; color: var(--ts-ink-soft); }
.tracspare-home-section__link { font-size: 15px; font-weight: 700; color: var(--ts-green-700); white-space: nowrap; }

/* --- Brand wall: cards edge to edge, one shared line between them, every row starting at the left --- */
.tracspare-brand-wall {
	--brand-cols: 6;
	display: flex; flex-wrap: wrap; justify-content: flex-start;
	padding-bottom: 1px; /* the last row's bottom border is pulled in by the cards' -1px margin */
}
/* Fixed counts, not auto-fill: six brands ran 5 + 1 on a laptop. */
@media (max-width: 1100px) and (min-width: 601px) {
	.tracspare-brand-wall { --brand-cols: 3; }
}
.tracspare-brand-card {
	/* Each card overlaps its neighbour by 1px (negative margin), so two borders read as one. */
	flex: 0 0 calc((100% + (var(--brand-cols) - 1) * 1px) / var(--brand-cols));
	box-sizing: border-box; margin: 0 -1px -1px 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	padding: 28px 16px 22px; text-align: center; text-decoration: none !important; color: var(--ts-ink) !important;
	background: var(--ts-white); border: 1px solid var(--ts-rule);
	transition: background-color 0.15s ease;
}
.tracspare-brand-card:hover, .tracspare-brand-card:focus-visible { background: var(--ts-green-50); }
.tracspare-brand-card__logo { height: 46px; display: flex; align-items: center; justify-content: center; }
/* Logos always in their own colours (2 Oct); they used to be grey until hovered. */
.tracspare-brand-card__logo img {
	max-height: 46px; max-width: 150px; width: auto; height: auto; object-fit: contain;
}
.tracspare-brand-card__wordmark { font-family: var(--ts-font-display); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
.tracspare-brand-card__name { font-size: 14.5px; font-weight: 700; }
.tracspare-brand-card__note { font-family: var(--ts-font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ts-green-700); }
.tracspare-brand-card.has-parts .tracspare-brand-card__note { color: var(--ts-green-700); }

/* --- Categories: the part itself, large -------------------------------- */
.tracspare-home .tracspare-category-card { flex-direction: column; border-radius: var(--ts-radius-lg); }
.tracspare-home .tracspare-category-card__image { flex: none; aspect-ratio: 4 / 3; border-right: 0; border-bottom: 1px solid var(--ts-rule); padding: 18px; }
.tracspare-home .tracspare-category-card__body { flex: none; padding: 14px 16px 16px; }
.tracspare-home .tracspare-category-card__name { font-size: 16px; }
.tracspare-home .tracspare-category-card__count { font-family: var(--ts-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ts-green-700); }

/* --- Parts beside the finder (2 Oct 2026) ------------------------------
   The shop page's sidebar layout (tracspare-woocommerce.css), inside the home
   section's own container, so it drops the layout's own padding and width. */
.tracspare-home .tracspare-home-parts__layout { max-width: none; margin: 0; padding: 0; }
.tracspare-home .tracspare-home-parts__sidebar { display: flex; flex-direction: column; gap: 20px; }
.tracspare-home .tracspare-home-parts__sidebar .tracspare-finder {
	border: 1px solid var(--ts-rule); box-shadow: 0 18px 40px -28px rgba(17,24,39,0.35);
}
/* All the categories show; the shop's facet lists scroll after 12em. */
.tracspare-home .tracspare-home-parts__categories .tracspare-facet__list { max-height: none; overflow: visible; }
.home .tracspare-home-section .tracspare-shop-main ul.products { grid-template-columns: repeat(3, 1fr); }
/* A category picked on the left: what is shown, and the way back. */
.tracspare-home-parts__filterbar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px;
	margin-bottom: 18px; padding: 12px 16px;
	background: var(--ts-white); border: 1px solid var(--ts-rule); border-radius: var(--ts-radius-lg);
	font-size: 14.5px; color: var(--ts-body);
}
.tracspare-home-parts__filterbar p { margin: 0; }
.tracspare-home-parts__filterbar strong { color: var(--ts-green-700); }
.tracspare-home-parts__filterbar-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.tracspare-home-parts__filterbar-links a { font-weight: 700; }
.tracspare-home-parts .tracspare-shop-main.is-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.15s ease; }
@media (max-width: 900px) {
	.home .tracspare-home-section .tracspare-shop-main ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.home .tracspare-home-section .tracspare-shop-main ul.products { grid-template-columns: repeat(1, 1fr); }
}

/* "All categories" closes the category grid. */
.tracspare-category-card--all {
	justify-content: center; text-align: center;
	background: var(--ts-green-900) !important; border-color: var(--ts-green-900);
}
.tracspare-category-card--all:hover { background: var(--ts-green-800) !important; border-color: var(--ts-green-800); }
/* Four of the client's category pictures behind it, 2x2 under the dark green (2 Oct).
   The shade is 0.86, so the text stays
   above 6:1 even over the white around a part. */
.tracspare-category-card--all { position: relative; isolation: isolate; }
.tracspare-category-card__mosaic {
	position: absolute; inset: 0; z-index: -1;
	display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
}
.tracspare-category-card__mosaic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tracspare-category-card__mosaic::after {
	content: ""; position: absolute; inset: 0;
	background: rgba(18, 61, 45, 0.86); transition: background-color 0.15s ease;
}
.tracspare-category-card--all:hover .tracspare-category-card__mosaic::after { background: rgba(24, 81, 59, 0.86); }
.tracspare-home .tracspare-category-card--all .tracspare-category-card__body { flex: 1 1 auto; align-items: center; justify-content: center; text-align: center; }
.tracspare-home .tracspare-category-card--all .tracspare-category-card__name {
	color: var(--ts-white); font-family: var(--ts-font-display); font-size: 28px; font-weight: 800; line-height: 1.2;
}
.tracspare-home .tracspare-category-card--all .tracspare-category-card__count { margin-top: 4px; font-size: 14px; color: var(--ts-green-100); }
@media (max-width: 600px) {
	.tracspare-home .tracspare-category-card--all .tracspare-category-card__name { font-size: 20px; }
	.tracspare-home .tracspare-category-card--all .tracspare-category-card__count { font-size: 12.5px; }
}

/* --- How it works ------------------------------------------------------- */
.tracspare-home-steps {
	margin-top: clamp(48px, 6vw, 88px); padding: clamp(44px, 6vw, 72px) 0;
	background: var(--ts-white); border-top: 1px solid var(--ts-rule); border-bottom: 1px solid var(--ts-rule);
}
.tracspare-home-steps__list {
	list-style: none; margin: 0; padding: 0;
	/* Three steps a row, then wrap (more than three steps run onto the next row); one a row on a phone. */
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
}
@media (max-width: 700px) {
	.tracspare-home-steps__list { grid-template-columns: 1fr; }
}
.tracspare-home-step { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 14px; padding-top: 20px; border-top: 2px solid var(--ts-ink); }
.tracspare-home-step__num { font-family: var(--ts-font-display); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--ts-green-700); }
.tracspare-home-step__icon { justify-self: end; color: var(--ts-ink-soft); font-size: 18px; }
.tracspare-home-step__title { grid-column: 1 / -1; font-size: 17px; font-weight: 700; color: var(--ts-ink); }
.tracspare-home-step__sub { grid-column: 1 / -1; font-size: 14.5px; line-height: 1.55; color: var(--ts-ink-soft); }

/* --- Trust panel ---------------------------------------------------------- */
.tracspare-home-trust h2 { margin-top: 12px; font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -0.03em; }

@media (max-width: 960px) {
	.tracspare-home-hero { background-position: 60% center; }
	.tracspare-home-hero::before { background: rgba(18,61,45,0.9); }
	.tracspare-home-hero__grid { grid-template-columns: 1fr; grid-template-areas: "copy" "more"; row-gap: 28px; }
	.tracspare-home-hero__proof { margin-top: 4px; }
	.tracspare-credentials-strip__inner { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; justify-items: start; text-align: left; }
	.tracspare-home-hero h1 { max-width: 18ch; }
}
@media (max-width: 600px) {
	.tracspare-home-hero__proof { grid-template-columns: 1fr; gap: 12px; }
	.tracspare-finder__panel { --finder-pad: 18px; }
	.tracspare-brand-wall { --brand-cols: 2; }
	.tracspare-brand-card { padding: 22px 10px 18px; }
}
.tracspare-home-trust .tracspare-kicker { display: flex; justify-content: center; }
/* Export section on a photo (2 Oct): a container yard at a port in
   Tanzania by Ali Mkumbwa, https://unsplash.com/photos/Annl9CjEaEs, Unsplash License (free for business use, no
   credit needed). The shade is 0.92 over the top 200px, where the small orange number sits, and 0.88 below, so
   the text stays readable even over a white patch of sky: white 7:1 or more, the light orange number 4.7:1. */
.tracspare-home-trust {
	background-color: var(--ts-green-900);
	background-image: linear-gradient(rgba(18,61,45,0.92) 0, rgba(18,61,45,0.92) 200px, rgba(18,61,45,0.88) 320px, rgba(18,61,45,0.88) 100%), url('../images/export-port-1600.webp');
	background-size: cover; background-position: center 70%;
	border-color: transparent;
}
@media (max-width: 900px) {
	.tracspare-home-trust { background-image: linear-gradient(rgba(18,61,45,0.92) 0, rgba(18,61,45,0.92) 200px, rgba(18,61,45,0.88) 320px, rgba(18,61,45,0.88) 100%), url('../images/export-port-800.webp'); }
}
.tracspare-home-trust h2 { color: var(--ts-white); }
.tracspare-home-trust .tracspare-kicker--on-dark .tracspare-kicker__num { color: #F7A35C; }
.tracspare-home-trust .tracspare-trust-panel__sub,
.tracspare-home-trust .tracspare-countries-grid__title { color: rgba(255,255,255,0.88); }
.tracspare-home-trust .tracspare-stats-row__item { border-color: transparent; box-shadow: 0 14px 34px rgba(0,0,0,0.28); }
.tracspare-home-trust .tracspare-countries-grid__item { border-color: transparent; box-shadow: 0 8px 20px rgba(0,0,0,0.25); }

/* ===========================================================================
   Inner pages, 29 Sep 2026 redesign - page heads, prose, catalogue, about, contact, blog, bulk order,
   policies - in the same language as the home page.
   ========================================================================== */
.tracspare-page-head { position: relative; overflow: hidden; }
.tracspare-page-head::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(17,24,39,0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(17,24,39,0.045) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
	mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
}
.tracspare-page-head__inner { position: relative; z-index: 1; padding-top: clamp(18px, 2.4vw, 28px); padding-bottom: clamp(24px, 3.4vw, 40px); }
.tracspare-page-head h1 { margin: 14px 0 12px; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.035em; }
.tracspare-page-head p, .tracspare-page-head .tracspare-page-head__lede { font-size: 16px; line-height: 1.6; max-width: 60ch; }

/* Prose (About, Policies, blog posts, plain pages) */
.tracspare-prose { max-width: 72ch; }
.tracspare-prose p { font-size: 16.5px; line-height: 1.75; }
.tracspare-prose > p:first-of-type { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--ts-ink); }
.tracspare-prose h2 {
	margin: 1.8em 0 0.6em; padding-top: 1em; border-top: 1px solid var(--ts-rule);
	font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em;
}
.tracspare-prose h3 { margin: 1.8em 0 0.5em; padding-top: 1.1em; border-top: 1px solid var(--ts-rule); font-size: 19px; letter-spacing: -0.015em; }
.tracspare-prose > h1:first-child { margin-top: 0; font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.03em; }
.tracspare-prose ul li::marker, .tracspare-prose ol li::marker { color: var(--ts-orange-700); }
.tracspare-prose a { color: var(--ts-green-700); text-underline-offset: 3px; }

/* About */
.tracspare-about {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
	padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(40px, 5vw, 72px);
}
.tracspare-about__aside { display: flex; flex-direction: column; gap: 14px; }
.tracspare-about__aside .tracspare-stats-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tracspare-about__aside .tracspare-stats-row__item { padding: 20px 16px; border-radius: 14px; text-align: left; }
.tracspare-about__aside .tracspare-stats-row__num { font-size: clamp(26px, 2.4vw, 32px); letter-spacing: -0.03em; line-height: 1.05; }
@media (min-width: 960px) {
	.tracspare-about { grid-template-columns: minmax(0, 1fr) 340px; gap: 64px; align-items: start; }
	.tracspare-about__aside { position: sticky; top: 24px; }
}

/* Closing band: tracspare_render_cta_band() */
.tracspare-cta-band { background: var(--ts-green-900); color: var(--ts-white); position: relative; overflow: hidden; isolation: isolate; }
.tracspare-cta-band::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
	mask-image: linear-gradient(90deg, #000 0%, transparent 70%);
}
.tracspare-cta-band__inner {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px;
	padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px);
}
.tracspare-cta-band h2 { margin: 12px 0 10px; color: var(--ts-white); font-size: clamp(26px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -0.03em; max-width: 24ch; text-wrap: balance; }
.tracspare-cta-band p { margin: 0; color: rgba(255,255,255,0.78); font-size: 16px; max-width: 52ch; }
.tracspare-cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.tracspare-cta-band__actions .button { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 10px; }
.tracspare-cta-band__link { color: var(--ts-white) !important; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.35); text-underline-offset: 5px; }
.tracspare-cta-band__link:hover { text-decoration-color: var(--ts-orange-600); }

/* Catalogue */
.tracspare-catalogue-jump { gap: 8px; margin-top: 22px; }
.tracspare-catalogue-jump a {
	display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px !important;
	background: var(--ts-white) !important; border: 1px solid var(--ts-rule-strong) !important; border-radius: 999px !important;
	font-size: 13.5px; font-weight: 500; color: var(--ts-body) !important;
}
.tracspare-catalogue-jump a:hover { border-color: var(--ts-green-700) !important; color: var(--ts-green-700) !important; background: var(--ts-white) !important; }
.tracspare-catalogue-group .tracspare-section-head { align-items: flex-end; padding-bottom: 16px; border-bottom: 1px solid var(--ts-rule); }
.tracspare-catalogue-group .tracspare-section-head h2 { margin-top: 10px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -0.025em; }

/* Forms: contact, bulk order, quote form */
.tracspare-field input, .tracspare-field textarea, .tracspare-field select { border-radius: 10px; }
.tracspare-field input:not([type="checkbox"]):not([type="radio"]), .tracspare-field select { min-height: 48px; }
/* The same single 2px edge as the finder (see .tracspare-finder select:focus); red when the field
   is flagged empty, since the bulk-order form focuses the first empty field. */
.tracspare-field input:not([type="checkbox"]):not([type="radio"]):focus, .tracspare-field textarea:focus, .tracspare-field select:focus { outline: 2px solid transparent; border-color: var(--ts-green-700); box-shadow: 0 0 0 1px var(--ts-green-700); }
.tracspare-field__input--error:focus { box-shadow: 0 0 0 1px var(--ts-red) !important; }
.tracspare-field input[type="checkbox"]:focus-visible, .tracspare-field input[type="radio"]:focus-visible { outline: 2px solid var(--ts-green-700); outline-offset: 2px; }
.tracspare-contact-form-panel, .tracspare-contact-info .tracspare-panel-tint, .tracspare-bulk-order__form, .tracspare-quote-fields { border-radius: 14px; }
.tracspare-contact-info h3 { font-size: 18px; letter-spacing: -0.02em; }

/* Blog */
.tracspare-blog-card, .tracspare-blog-lead { border-radius: 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.tracspare-blog-card:hover, .tracspare-blog-lead:hover { box-shadow: 0 16px 30px -20px rgba(17,24,39,0.35); transform: translateY(-2px); }
.tracspare-blog-card__tag { font-family: var(--ts-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; }
.tracspare-blog-card__body h3 { font-size: 17px; letter-spacing: -0.01em; }
.tracspare-blog-lead__body h2 { letter-spacing: -0.025em; }
.tracspare-blog-cta { border-radius: 14px; }
/* A post with no picture gets a designed panel, not an empty box */
.tracspare-blog-card__media.is-empty, .tracspare-blog-lead__media.is-empty {
	display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
	background-color: var(--ts-green-900);
	background-image:
		linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
	background-size: 32px 32px;
}
.tracspare-blog-media-mark { font-size: 44px; color: rgba(255,255,255,0.22); }
.tracspare-blog-lead__media.is-empty .tracspare-blog-media-mark { font-size: 72px; }
.tracspare-cta-band p { text-wrap: pretty; }

/* Policies: tabs as pills */
.tracspare-policy-tabs { gap: 8px; }
.tracspare-policy-tabs a {
	display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px !important;
	border: 1px solid var(--ts-rule-strong) !important; border-radius: 999px !important; background: var(--ts-white);
	font-size: 14px; font-weight: 500; text-decoration: none !important;
}
.tracspare-policy-tabs .is-active a { background: var(--ts-green-700); border-color: var(--ts-green-700) !important; color: var(--ts-white) !important; }
.tracspare-policy-tabs { padding-bottom: 22px !important; }
.tracspare-policy-body { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(40px, 5vw, 72px); }
.tracspare-policy-body h2 {
	margin: 2em 0 0.6em; padding-top: 1.1em; border-top: 1px solid var(--ts-rule);
	font-size: 19px; letter-spacing: -0.015em;
}
.tracspare-policy-body p { font-size: 15.5px; line-height: 1.72; margin: 0 0 0.9em; }
.tracspare-policy-body ul, .tracspare-policy-body ol { margin: 0.2em 0 1em; padding-left: 1.3em; font-size: 15.5px; line-height: 1.7; color: var(--ts-body); }
.tracspare-policy-body li::marker { color: var(--ts-orange-700); }
.tracspare-policy-body .tracspare-policy-meta {
	display: inline-block; margin-bottom: 18px; padding: 4px 10px; border-radius: 999px;
	background: var(--ts-white); border: 1px solid var(--ts-rule);
	font-family: var(--ts-font-mono); font-size: 12px; letter-spacing: 0.02em;
}

/* Back-to-top button: bottom right, shown by tracspare.js after a screen of scrolling. */
.tracspare-to-top {
	position: fixed; right: 20px; bottom: 20px; z-index: 50;
	width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--ts-green-700); color: var(--ts-white);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}
.tracspare-to-top[hidden] { display: none; }
.tracspare-to-top::before {
	content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--ts-icon-chevron-up) no-repeat center / contain; mask: var(--ts-icon-chevron-up) no-repeat center / contain; font-size: 16px;
}
.tracspare-to-top:hover, .tracspare-to-top:focus-visible { background: var(--ts-cta); color: var(--ts-cta-text); }
@media (max-width: 600px) {
	.tracspare-to-top { right: 14px; bottom: 16px; }
}

@media (min-width: 768px) and (max-width: 991px) {
	.tracspare-to-top { bottom: 60px }
}