/**
* Walcott Radio — Customer-Facing Theme Standard
* ============================================================================
*
* THE standardized theme for all customer-facing pages: colors, typography,
* and the site-wide PRICE treatment. The human-readable spec and the per-page
* conformance audit live in the internal docs (STYLE_REFERENCE,
* THEME_CONFORMANCE_AUDIT).
*
* Relationship to design-tokens.css:
* csr-includes/css/design-tokens.css (edited by the dashboard module
* layout.design_tokens) is the LEGACY header/nav token system with the old
* navy/amber palette. It stays in place for the header templates that
* consume it. THIS file carries the 2026 redesign palette (`--wrt-*`
* prefix, no collisions) and should be referenced by all NEW / redesigned
* customer-facing surfaces. Long-term the legacy tokens migrate here.
*
* FONTS (load once per page — pages must include this Google Fonts link):
*
* - Body / UI copy, buttons, labels: Inter (400–800) --wrt-font-body
* - Headings (h1–h3, card titles): Poppins (700/800) --wrt-font-heading
* - Prices, display numerals: Barlow Semi Condensed --wrt-font-display
* - RETIRED for these roles: Bebas Neue, Open Sans price style, Segoe UI
* system stack. Barlow is numerals-only — never body copy, and since
* 1.6.0 no longer headings.
*
* PRICE OUTPUT — THE standard markup, use everywhere a price renders:
* $599.95
* - single baseline, tabular figures, de-emphasized `$` (~0.68em / wt 500)
* - NO superscript cents, ever
* - sale/now price = .wr-price--sale (red); was price = .wr-price--was
* - size by context: PDP hero clamp(44px,6vw,58px); tier/section 27–34px;
* card/list 26–34px; add-on/line-item ~22px. The `.cur` em-ratio holds
* at every size, so only font-size needs setting per context.
* Page-scoped price classes (e.g. .pv3-price) may keep their own names but
* MUST match these values — treat this file as the reference implementation.
*
* @version 1.8.0 (2026-10-30) .wr-rbm rebate module (coupon_stub / tear_off)
* 1.7.1
* 1.7.1 (2026-10-29) Strip kicker wraps instead of truncating ("Mail-in r…"
* seen in the dashboard preview at 336px); .wr-rebate-wrap caps the
* standalone card at 720px on the special-offer page.
* 1.7.0 (2026-10-29) REBATE CARDS (.wr-rebate, .wr-rebate-strip) for the
* manufacturer mail-in rebate system (csr-includes/rebates/). Four
* ROLE modifiers, no new tokens: --savings (cash back: red tint
* surface, the one place a red savings chip appears off the buy
* button), --success (free product by mail: the free-gift role, so
* "free by mail" and "free in your cart" read as siblings),
* --reward (gift card: gold with dark text) and --neutral (other).
* The after-rebate price is .wr-price in INK, never red — red stays
* the sale price. Native strip, one line closed. See
* STYLE_REFERENCE.md § Rebate cards. Additive; nothing changed.
* 1.6.0 (2026-10-22) HEADING FACE: --wrt-font-heading (Poppins 700/800) for
* h1–h3 and card titles, per Jason's call on the Galaxy CB mockup.
* Headings had been Barlow Semi Condensed on the brand page, learn
* hub and checkout, and Inter on the product page and B2B pages —
* three answers to one question. Barlow is now numerals and prices
* ONLY (--wrt-font-display, unchanged). Pages add Poppins:wght@700;800
* to their Google Fonts link. Additive; nothing else changed.
* 1.5.0 (2026-10-22) DARK PAGE ROLES, for a page whose WHOLE surface is dark
* (the B2B pages' `theme: dark`), not just a band on a light page:
* --wrt-dark-card (a card that floats on --wrt-dark-panel the way a
* white card floats on --wrt-surface), --wrt-text-on-dark-muted (the
* third ink level, as --wrt-text-muted is on white), --wrt-border-on-
* dark-soft (row rules inside a dark card) and --wrt-green-on-dark
* (--wrt-green-text is 2.6:1 on --wrt-dark-card; this is 7.7:1).
* Additive; nothing changed. Red fills stay --wrt-red everywhere.
* 1.4.0 (2026-10-21) --wrt-red-on-dark #FF4A5C: the red for TEXT on the dark
* surfaces. #CF1C3C is tuned for white — on --wrt-dark it reaches only
* 3.6:1, below AA for normal text — so a red eyebrow, accent line or
* icon on a dark band needs a lifted red. Text and icons ONLY: a
* button on a dark band keeps the standard --wrt-red fill, where the
* white label is what has to pass. Added for the B2B hero's two-tone
* headline (Galaxy CB successor page). Additive; nothing changed.
* 1.3.1 (2026-10-13) --wrt-blue-tint: pale selection-blue surface for an
* informational notice on a light section ("your shipping was
* re-quoted"), the blue counterpart of --wrt-red-tint. Added for
* checkout v2's shipping step. Additive; nothing changed.
* 1.3.0 (2026-10-09) COLLECTION-CARD BADGES + "REPLACED BY" STRIP (.wr-badge--disc /
* --sale / --new, .wr-pill--most-popular, .wr-rep). Added for the brand
* collection page (manufacturers_rc.php) and placed here because the
* category and search listings need the same card vocabulary. No new
* tokens: Discontinued takes the dark refusal surface (same reasoning as
* .wr-fit--no), Sale the buy-path red, New the selection blue, and the
* replacement strip the success role. See STYLE_REFERENCE.md
* § Collection-card badges.
* 1.2.0 (2026-09-29) FITMENT VERDICT BADGE (.wr-fit / --fits / --unknown / --no),
* a three-state role added for the vehicle finder and needed unchanged by
* the category page, which is why it lives here rather than page-scoped.
* No new tokens: it composes the existing success, neutral and dark-panel
* roles. The decision worth carrying is that "does not fit" is NOT red —
* red belongs to the buy path and must stay the most prominent red on the
* page, so the refusal takes the dark surface instead.
* See docs/STYLE_REFERENCE.md § Fitment verdict states.
* 1.1.0 (2026-08-25) DARK-SURFACE ROLES. The B2B landing page system needs
* content sitting ON the dark bands (hero, capability band, footer),
* a role the palette had tokens for the background of but not the
* foreground. Adds --wrt-text-on-dark / --wrt-text-on-dark-dim /
* --wrt-border-on-dark, plus --wrt-red-tint for the pale red chip
* behind accent icons on light sections. No existing values changed —
* these are additive, and the B2B pages consume the existing
* --wrt-dark / --wrt-dark-panel surfaces rather than forking a second
* near-black. See docs/STYLE_REFERENCE.md § Dark surfaces.
* 1.0.0 (2026-07-24) — initial standard: 2026 palette tokens +
* Barlow Semi Condensed price component (handoff: typography_and_price)
*/
:root {
/* ------------------------------------------------------------------
2026 CUSTOMER-FACING PALETTE (--wrt- = "walcott radio theme")
------------------------------------------------------------------ */
/* Action / buy funnel — red is THE single action color (Add to Cart,
checkout, savings, urgency). Never use it as a big background band. */
--wrt-red: #CF1C3C;
--wrt-red-hover: #B01730;
/* Navigation / links / selection / promo bar — blue */
--wrt-blue: #3968BA;
--wrt-blue-hover: #2F5AA0;
--wrt-link-hover: #2B4F8E;
/* Reward / ratings */
--wrt-gold: #FCB002;
--wrt-gold-deep: #9A6B00; /* gold text on white (contrast-safe), labor/service labels */
/* Dark surfaces */
--wrt-dark: #0C0D0F; /* header band */
--wrt-dark-panel: #16181B; /* module headers, cart bar */
--wrt-ink: #191A1C; /* primary text */
--wrt-dark-hover: #2F3135;
/* Text */
--wrt-text: #191A1C;
--wrt-text-secondary: #55585E;
--wrt-text-muted: #8A8E94;
--wrt-text-faint: #9CA0A6;
/* Text / borders ON the dark surfaces above. Dim is the dark-surface
equivalent of --wrt-text-secondary: body copy that must recede without
dropping below 4.5:1 on --wrt-dark. */
--wrt-text-on-dark: #FFFFFF;
--wrt-text-on-dark-dim: #9B9DA8;
--wrt-border-on-dark: rgba(255,255,255,.14);
/* A WHOLE page in dark (B2B `theme: dark`), not a band on a light page:
the card that floats on --wrt-dark-panel, the third ink level, the row
rule inside such a card, and the success colour that still passes there
(--wrt-green-text reaches only 2.6:1 on --wrt-dark-card). */
--wrt-dark-card: #1B1D21;
--wrt-text-on-dark-muted: #8A8D98;
--wrt-border-on-dark-soft: rgba(255,255,255,.08);
--wrt-green-on-dark: #4CC38A;
/* Red as TEXT or an icon on --wrt-dark / --wrt-dark-panel. The action red
only reaches 3.6:1 there; this lifts it to ~5.9:1. Never a button fill. */
--wrt-red-on-dark: #FF4A5C;
/* Pale red chip behind accent icons on light sections. Red as a *tint*
is not the buy-path red — never use it for a CTA fill. */
--wrt-red-tint: #FDEAEE;
/* Pale selection-blue surface for an informational notice on a light
section (e.g. "shipping re-quoted for your new address"). Dark text. */
--wrt-blue-tint: #EBF0F8;
/* Borders / surfaces */
--wrt-border: #E1E3E7;
--wrt-border-soft: #E7E9ED;
--wrt-surface: #F0F1F3; /* tiles, section header rows, qty buttons */
--wrt-surface-hover: #F7F8F9;
--wrt-page-bg: #E9EBED; /* grey page — white cards float on it */
/* Success (in-stock, included, free-gift) */
--wrt-green: #1F8A5B;
--wrt-green-text: #1F6B3B;
--wrt-green-bg: #F0FAF3;
--wrt-green-border: #DCF0E2;
/* ------------------------------------------------------------------
TYPOGRAPHY
------------------------------------------------------------------ */
--wrt-font-body: 'Inter', system-ui, sans-serif;
/* Headings: h1–h3, section titles, card titles. 800 for h1/h2, 700 for
h3. Tight tracking (-.03em at display sizes) — Poppins is wide. */
--wrt-font-heading: 'Poppins', 'Inter', system-ui, sans-serif;
/* Prices and display numerals only — not headings (since 1.6.0). */
--wrt-font-display: 'Barlow Semi Condensed', 'Inter', sans-serif;
/* ------------------------------------------------------------------
SHAPE / ELEVATION
------------------------------------------------------------------ */
--wrt-radius-card: 16px;
--wrt-radius-inner: 12px;
--wrt-radius-thumb: 10px;
--wrt-shadow-card: 0 1px 2px rgba(8,8,8,.04), 0 18px 40px -20px rgba(8,8,8,.18);
}
/* ==========================================================================
PRICE COMPONENT — the reference implementation.
$599.95
========================================================================== */
.wr-price {
font-family: var(--wrt-font-display);
font-weight: 700;
line-height: 1;
font-feature-settings: "tnum" 1;
font-variant-numeric: tabular-nums;
color: var(--wrt-ink);
}
.wr-price .cur {
font-size: .68em;
font-weight: 500;
vertical-align: .06em;
margin-right: .03em;
}
.wr-price--sale { color: var(--wrt-red); }
.wr-price--was { color: var(--wrt-text-muted); text-decoration: line-through; font-weight: 500; }
/* ==========================================================================
FITMENT VERDICT BADGE — vehicle fitment state on a product card or row.
Fits your vehicle
THREE STATES, NOT TWO, and that is the whole point of the component. Absence
of fitment data is NOT a refusal, so "not confirmed" must read as neutral
rather than negative — coverage is partial, and a neutral product outnumbers
both other states in every category today.
RED IS NOT USED FOR "DOES NOT FIT". Red belongs to the buy path (per the
color-role model, it stays the single most prominent red on the page), and
spending it on a negative state would put the loudest color in the palette on
the products a customer should ignore. The dark surface carries the refusal
instead: authoritative, legible, and unmistakably not a call to action.
========================================================================== */
.wr-fit {
display: inline-block;
font-family: var(--wrt-font-body);
font-size: 11.5px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
line-height: 1.25;
padding: 5px 9px;
border-radius: 999px;
border: 1px solid transparent;
}
/* Success role, shared with in-stock / included / free-gift. */
.wr-fit--fits {
background: var(--wrt-green-bg);
border-color: var(--wrt-green-border);
color: var(--wrt-green-text);
}
/* Neutral. Deliberately quiet: this is the majority state, not a warning. */
.wr-fit--unknown {
background: #F0F1F3;
border-color: var(--wrt-border);
color: var(--wrt-text-secondary);
}
/* Refusal. Dark, never red — see the note above. */
.wr-fit--no {
background: var(--wrt-dark-panel);
border-color: var(--wrt-dark-panel);
color: var(--wrt-text-on-dark);
}
/* ==========================================================================
COLLECTION-CARD BADGES — product cards on brand / category / search listings.
SaleDiscontinuedMost popular
Discontinued is the dark refusal pill (same reasoning as .wr-fit--no): it
must never borrow the buy-path red. Sale is the only red badge and appears
only on buyable items. Gold always carries dark text.
========================================================================== */
.wr-badge {
display: inline-block;
font-family: var(--wrt-font-body);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.25;
padding: 5px 9px;
border-radius: 6px;
color: #fff;
}
.wr-badge--sale { background: var(--wrt-red); }
.wr-badge--new { background: var(--wrt-blue); }
.wr-badge--disc { background: var(--wrt-ink); border-radius: 999px; }
.wr-pill--most-popular {
display: inline-block;
font-family: var(--wrt-font-body);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
line-height: 1.25;
padding: 5px 9px;
border-radius: 999px;
background: var(--wrt-gold);
color: var(--wrt-ink);
}
/* ==========================================================================
"REPLACED BY" STRIP — the sellable successor of a discontinued product.