/* Roof Racks Galore — shared design tokens & component library, used across all four PDP templates */
/* Google Fonts are loaded via / in each
page's now, not an @import here (2026-09-11, mobile audit) — @import blocks
the browser from discovering/fetching the font until after this whole stylesheet is
parsed, which is a real render/LCP cost on mobile networks that avoids. */
:root{
--rrg-black:#000;
--rrg-red:#BB0220;
--rrg-red-dark:#8f0119;
--rrg-gold:#BEA98A;
--rrg-gold-bg:#FFF9E8;
--rrg-line:#D8D8D8;
--rrg-bg:#F5F5F5;
--rrg-fits:#1E7A34;
--rrg-fits-bg:#EAF7EE;
--rrg-unknown:#B36B00;
--rrg-unknown-bg:#FFF4E5;
--rrg-nofit:#A6192E;
--rrg-nofit-bg:#FDEAEC;
--rrg-display:#1A56DB;
--rrg-display-bg:#EAF1FD;
--radius:12px;
--shadow:0 8px 22px rgba(0,0,0,.06);
--maxw:1280px;
}
*{box-sizing:border-box;}
[hidden]{display:none!important;}
html{scroll-behavior:smooth;}
body{
margin:0;
font-family:'Lato',Arial,Helvetica,sans-serif;
color:#232323;
background:#fff;
line-height:1.45;
}
h1,h2,h3,h4{
font-family:'Barlow Condensed',Arial,sans-serif;
font-weight:700;
text-transform:uppercase;
letter-spacing:.01em;
margin:0 0 .4em;
color:var(--rrg-black);
}
/* Product title — was locally overridden per template (23-26px, drifted over time); unified
2026-09-13 per client request so every template renders the same size. */
.decision-panel h1{font-size:32px;line-height:1.1;margin-bottom:6px;}
p{margin:0 0 1em;}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
/* top strip (legacy — superseded by .rrg-utility-bar/.rrg-main-header below, kept in case any page still references it) */
.rrg-topbar{background:var(--rrg-black);color:#fff;font-size:12px;font-weight:900;letter-spacing:.04em;text-align:center;padding:7px 12px;}
.rrg-header{border-bottom:1px solid var(--rrg-line);padding:14px 0;}
.rrg-header .wrap{display:flex;align-items:center;justify-content:space-between;}
.rrg-logo{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;letter-spacing:.02em;}
.rrg-logo b{color:var(--rrg-red);}
/* Site header — matches "Navbar - Logged In - Final.png" */
/* .rrg-header-shell (2026-09-14 fix, wraps .rrg-utility-bar + .rrg-main-header in every
template's markup) is the ONE positioned/z-indexed ancestor for both bars, replacing an
earlier attempt that gave each bar its OWN position+z-index directly. That earlier version
couldn't win both ways at once: .rrg-utility-bar and .rrg-main-header each formed their own
stacking context, so whichever had the higher z-index trapped the OTHER's cross-boundary
content behind it regardless of that content's own z-index — the Region Selector dropdown
(.region-switcher-menu, a descendant of the utility bar, drops DOWN into the main header's
box) needed the utility bar to win, while the UK region logo (.rrg-main-header .rrg-logo
img, below) bleeds UP into the utility bar's box and needed main-header to win — no single
ordering of the two satisfies both. Removing position/z-index from each bar and putting it
on their shared wrapper instead means neither bar is its own stacking context any more, so
both cross-boundary elements are compared directly in the SAME context and simply paint
above the plain (non-positioned) bar backgrounds either direction, as intended. The shell
still needs its own z-index above .mega-menu-backdrop (mega-menu.css, z-index:80) so the
whole header stays undimmed while the backdrop dims the rest of the page. */
.rrg-header-shell{position:relative;z-index:85;}
.rrg-utility-bar{background:var(--rrg-red);color:#fff;font-size:12.5px;}
.rrg-utility-inner{display:flex;align-items:center;justify-content:space-between;padding:9px 24px;gap:20px;flex-wrap:wrap;}
.rrg-utility-left,.rrg-utility-right{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}
.u-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.u-item svg{flex:0 0 auto;width:14px;height:14px;}
.u-item a{color:#fff;text-decoration:underline;font-weight:700;}
.u-item .flag-emoji{font-size:14px;line-height:1;}
/* Region Selector (2026-09-11, backlog item 21) — the utility bar's country item, previously
static/decorative, is now a working dropdown. Same toggle-a-class-on-click,
click-outside-to-close interaction as the Site Admin Panel's own dropdowns
(admin-panel.css), just recoloured for sitting on the red utility bar (white trigger text)
instead of the white main header. */
.region-switcher{position:relative;}
.region-switcher-toggle{background:none;border:none;padding:0;font:inherit;font-size:12.5px;color:#fff;cursor:pointer;}
.region-switcher-menu{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid var(--rrg-line);border-radius:var(--radius);box-shadow:var(--shadow);min-width:180px;padding:8px;display:none;flex-direction:column;gap:1px;z-index:80;}
.region-switcher.open .region-switcher-menu{display:flex;}
.region-switcher-menu .tsm-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#999;padding:6px 10px 4px;}
.region-switcher-menu a{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:7px;font-size:13.5px;font-weight:600;color:var(--rrg-black);text-decoration:none;}
.region-switcher-menu a:hover{background:#f4f4f4;color:var(--rrg-red);}
.region-switcher-menu a.current{color:var(--rrg-red);background:#faf0ef;}
.rrg-main-header{background:#fff;border-bottom:1px solid var(--rrg-line);padding:16px 0;}
.rrg-main-inner{display:flex;align-items:center;gap:32px;padding:0 24px;flex-wrap:wrap;}
.rrg-main-inner .rrg-logo{flex:0 0 auto;}
.rrg-logo img{height:34px;width:auto;display:block;}
.rrg-nav{display:flex;align-items:center;gap:22px;font-size:14.5px;font-weight:700;flex:0 0 auto;}
.rrg-nav a{color:var(--rrg-black);text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.rrg-nav a:hover{color:var(--rrg-red);}
.rrg-nav .sep{color:var(--rrg-line);}
.rrg-search{flex:1 1 260px;max-width:420px;display:flex;align-items:center;border:1.5px solid var(--rrg-line);border-radius:8px;overflow:hidden;margin-left:auto;}
.rrg-search input{flex:1;border:none;padding:11px 14px;font-size:13.5px;font-family:inherit;outline:none;min-width:0;}
/* Clear (x) button — matched to client-supplied Figma export "Navbar - Logged In -
Final.png", which shows it beside the search icon on mobile. Generic, so it also shows
up on desktop where the input has a value; initSearchClear() in shared.js toggles it. */
.rrg-search-clear{background:none;border:none;color:#999;padding:0 8px;font-size:18px;line-height:1;flex:0 0 auto;cursor:pointer;}
.rrg-search-clear:hover{color:#666;}
/* align-self:stretch (not height:100%, 2026-09-11 fix) — .rrg-search has no explicit height
of its own (it's sized by its tallest child, the input), so a percentage height on this
button had nothing definite to resolve against and fell back to the button's own content
height (~16px, just the icon) — the red background covered only that vertically-centered
16px sliver instead of the full ~40px pill, which read as a rendering bug. align-self
stretches the button to match the flex line's actual cross-size instead. */
.rrg-search-btn{background:var(--rrg-red);border:none;color:#fff;padding:0 16px;align-self:stretch;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;}
.rrg-search-btn svg{width:16px;height:16px;flex:0 0 auto;}
.rrg-cart{position:relative;flex:0 0 auto;color:var(--rrg-black);cursor:pointer;}
.rrg-cart svg{width:24px;height:24px;}
.cart-badge{position:absolute;top:-6px;right:-8px;background:var(--rrg-red);color:#fff;font-size:10px;font-weight:900;border-radius:999px;width:16px;height:16px;display:flex;align-items:center;justify-content:center;}
/* Mobile nav toggle (2026-09-11, mobile audit; behaviour replaced 2026-09-13, header
integration) — hidden by default (desktop hamburger icon would be pointless), shown only
inside the 900px media query below. Opens the full-screen mega-menu takeover
(.mm-mobile-takeover, initMobileNav() in shared.js) rather than .rrg-nav itself, which is
just hidden outright on mobile now — its content (mega menu + the 4 plain nav links) is
fully mirrored inside the takeover for that viewport instead. */
.mobile-nav-toggle{display:none;background:none;border:none;padding:10px;margin:-10px;color:var(--rrg-black);flex:0 0 auto;}
.mobile-nav-toggle svg{width:22px;height:22px;display:block;}
/* Main header, mobile layout (2026-09-11, matched to client-supplied Figma export "Navbar
- Logged In - Final.png") — hamburger / centered logo / cart as one row, search bar as
its own full-width row below, instead of everything crammed into one flex row like
desktop. Grid (not flex) so the search row can sit on an explicit row 2 without needing
flex `order` tricks that would also disturb the hamburger/logo/cart row. */
@media (max-width:900px){
.mobile-nav-toggle{display:flex;align-items:center;justify-content:center;}
.rrg-main-inner{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:10px;}
.mobile-nav-toggle{grid-row:1;grid-column:1;}
.rrg-main-inner .rrg-logo{grid-row:1;grid-column:2;justify-self:center;}
.rrg-cart{grid-row:1;grid-column:3;justify-self:end;}
.rrg-search{grid-row:2;grid-column:1/-1;margin-left:0;max-width:none;}
.rrg-nav{display:none;}
}
/* Sticky condensed header (2026-09-11, matched to client-supplied Figma export "Mob
Navbar - Final - Sticky.png") — hamburger/logo/cart only, no utility bar or search,
fixed to the top once the top-of-page search row scrolls out of view. Reuses
initPersistentBar()'s existing sentinel/.visible convention (already used for the
desktop decision bar on vehicle-specific) rather than writing a second scroll observer.
Hidden entirely on desktop — the whole point is replacing the mobile-only search row
once it's scrolled away, desktop's header has no equivalent collapsed state. */
.rrg-sticky-header{display:none;}
@media (max-width:900px){
.rrg-sticky-header{
display:flex;align-items:center;justify-content:space-between;gap:12px;
position:fixed;top:0;left:0;right:0;z-index:55;
background:#fff;border-bottom:1px solid var(--rrg-line);
padding:10px 16px;
transform:translateY(-100%);
transition:transform .2s ease;
box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.rrg-sticky-header.visible{transform:translateY(0);}
.rrg-sticky-header .rrg-logo img{height:26px;}
.rrg-sticky-header .mobile-nav-toggle{display:flex;}
}
/* Mobile utility bar (2026-09-11, matched to client-supplied Figma exports "Navbar -
Logged In - Final.png" / "Mob Navbar - Final - Sticky.png") — condenses to just
Nearest Store (left) and Vehicle (right), dropping Call Us / country / account.
display:contents on the two wrapper divs (same technique as .gallery-col's mobile
reorder above) lifts every .u-item to be a direct flex child of .rrg-utility-inner so
`order` can freely reposition across the original left/right grouping; hiding every
.u-item by default then re-showing just the two wanted ones by position keeps this a
pure-CSS fix with no markup changes needed across all 6 pages. */
@media (max-width:900px){
.rrg-utility-left,.rrg-utility-right{display:contents;}
.rrg-utility-inner{justify-content:space-between;text-align:left;flex-wrap:nowrap;}
.u-item{display:none;min-width:0;}
.rrg-utility-left .u-item:first-child{display:inline-flex;order:1;}
.rrg-utility-left .u-item:nth-child(2){display:inline-flex;order:2;}
/* Figma's mobile utility bar shows icon + value only ("North Lakes", "Toyota Hilux"),
dropping the "Your Nearest Store:"/"Your Vehicle:" prefix — matches the export exactly
and was also a real overflow bug fix: that label text couldn't fit both items on one
390px-wide row with flex-wrap:nowrap above (needed to keep them fixed at opposite
ends rather than wrapping to a second line under the label). */
.u-item-label{display:none;}
}
.rrg-crumbs{font-size:12px;color:#767676;padding:14px 0;}
.rrg-crumbs a{color:#767676;text-decoration:none;}
.rrg-crumbs a:hover{text-decoration:underline;}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:999px;padding:15px 28px;font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;text-align:center;transition:transform .12s, box-shadow .12s;}
.btn-primary{background:var(--rrg-red);color:#fff;}
.btn-primary:hover{background:var(--rrg-red-dark);}
.btn-primary:active{transform:scale(.98);}
.btn-block{width:100%;}
/* Add to Cart is gold, not red (locked in per client, 2026-09-10) — [data-cta-label] hits
every Add to Cart button on the page (decision panel, sticky mobile bar, persistent bar)
without needing per-button wiring; other .btn-primary buttons (e.g. Find Nearest Showroom)
stay red. */
[data-cta-label].btn-primary{background:#FFCA48;color:#000;}
[data-cta-label].btn-primary:hover{background:#e6b53f;}
.btn-lg{padding:18px 28px;font-size:16px;}
.btn-outline{background:#fff;border:1.5px solid var(--rrg-black);color:var(--rrg-black);}
/* UK brand skin (Region Selector, 2026-09-11) — RRG trades in the UK as "The Roof Box
Company" (roofbox.co.uk), a real sister brand. Scope confirmed with Brenton: logo + core
colour only, not a typography change. Overriding --rrg-red/--rrg-red-dark here recolours
every component already built against those tokens (utility bar, trust icons, links, tab
underline, sale badges, etc.) for free — see applyRegionBrand() in shared.js, which
toggles this class. Add to Cart needs its own override since it isn't on the --rrg-red
token to begin with (RRG's own gold default, directly above) — colours are their real
scraped brand values: navy #2E41AE / #FFFF19 from their logo SVG itself, green #26B226
from their live "Click Here To Order" button (confirmed with Brenton as the preferred
option over keeping RRG's gold). */
body.region-uk{--rrg-red:#2E41AE;--rrg-red-dark:#1F2E82;}
body.region-uk [data-cta-label].btn-primary{background:#26B226;color:#fff;}
body.region-uk [data-cta-label].btn-primary:hover{background:#1e8f1e;}
/* The Roof Box Company's real logo is a tall vertical rectangle (117.89x143.63, ~0.82:1),
not RRG's wide horizontal wordmark (360x58, ~6.2:1) — Brenton asked for it to actually
span both header bars (the red/navy Utility Bar above + the white Main Header row below)
rather than just sit taller within the Main Header alone, since it reads as a nice badge
effect with a portrait logo like this — on **both** desktop and mobile, not desktop only.
`.rrg-logo` stays a normal flex/grid item (reserving its own footprint so the other
header items don't shift), but its `` is pulled out of flow and absolutely
positioned against it. Neither bar clips overflow, and the Main Header simply paints
after (on top of) the Utility Bar in normal DOM order, so no z-index juggling is needed
for the overlap itself — the explicit z-index below is just a safety margin against
future stacking-context changes nearby.
Span amount, per Brenton's exact spec (not flush like the first attempt): the logo's
**bottom** edge sits flush with the base of the white Main Header (or, on mobile, the
base of the icon row specifically — see below), and its **top** edge reaches only
halfway up through the blue Utility Bar, not all the way to the Utility Bar's own top.
`.rrg-utility-left` gets matching left margin (desktop only, where it's a single row of
text) so "Your Nearest Store" / "Your Vehicle" visibly starts clear of the logo instead
of sitting underneath it.
Known gotcha (hit twice building this): once the `` is the ONLY child of `.rrg-logo`
and gets pulled `position:absolute`, `.rrg-logo`'s own box collapses to ~0 height/width,
which shifts a *centre*-aligned item's apparent anchor point away from where simple
"row height" math assumes. `align-self:flex-start` (flex) / `align-self:start` (grid)
fixes this by anchoring to the row's actual top edge instead of a collapsed box's
centre — confirmed by measuring the rendered position with Playwright
(`getBoundingClientRect()`), not just eyeballing a screenshot. */
@media (min-width:901px){
/* Desktop: Utility Bar 36px tall, Main Header 73px tall, row content starts 52px down
the page (Main Header's own 36px top + its 16px top padding). Halfway through the
Utility Bar = 18px down the page; base of the Main Header = 109px down the page. */
body.region-uk .rrg-main-header .rrg-logo{position:relative;width:90px;flex:0 0 90px;align-self:flex-start;}
body.region-uk .rrg-main-header .rrg-logo img{position:absolute;top:-34px;left:0;height:91px;width:auto;z-index:5;}
body.region-uk .rrg-utility-left{margin-left:120px;}
}
@media (max-width:900px){
/* Mobile: `.rrg-main-inner` is a 2-row grid here (icon row, then the search bar right
underneath) — "base of the Main Header" means the base of the icon row specifically,
not the full header including the search row, or the logo would run down through the
search input. Same 52px row-start and 18px Utility-Bar-halfway values as desktop (the
Utility Bar itself doesn't change between breakpoints), but the icon row's own base
sits at 86px down the page (measured — it's shorter than desktop's Main Header).
Horizontal centring uses left:50%/translateX(-50%) instead of left:0, since
`.rrg-logo` here is `justify-self:center` in the grid (not left-aligned like desktop)
and its own collapsed-box width can't be relied on to centre a `left:0` child. */
/* width:56px on the DIV too (not just the img below) — the real bug here wasn't
width:auto resolution, it was the global `img{max-width:100%}` reset (this
file's base image reset) clamping the img's width against its own containing
block. `.rrg-logo` has no explicit width on mobile once its only child is pulled
`position:absolute` (unlike desktop, which reserves 90px), so it collapses to 0 —
and max-width:100% of a 0-width containing block clamps the img itself to 0,
which is why it visually vanished (confirmed with Playwright: computed width was
0px despite the rule below plainly saying width:56px in the CSSOM — max-width
was silently winning). Giving the div the same fixed width the img itself needs
fixes both the collapse and the max-width clamp in one move. */
body.region-uk .rrg-main-header .rrg-logo{position:relative;align-self:start;width:56px;}
body.region-uk .rrg-main-header .rrg-logo img{position:absolute;top:-34px;left:50%;transform:translateX(-50%);height:68px;width:56px;z-index:5;}
}
/* Sticky condensed mobile header (2026-09-11 follow-up): Brenton pointed out that if the
logo spans "into the blue bar," that has to stay true once the page is scrolled and the
Utility Bar itself is gone — replaced by this fixed hamburger/logo/cart bar. So the UK
sticky header grows its own blue band to span into, via a thick `border-top` (adds to
the element's own box height automatically, no extra markup, no off-screen positioning
tricks — unlike the Utility Bar above, which already exists in-flow, this fixed bar has
nothing above it, so the "blue bar" has to be invented as a literal part of this box)
sized to roughly the same Utility-Bar-to-Main-Header proportion as the top-of-page
header (~36:73, roughly 2:4). The white hamburger/logo/cart row's own vertical centring
is unaffected by the border (borders sit outside the padding/content box, so they don't
compress it) — only the box's total rendered height grows to make room. */
body.region-uk .rrg-sticky-header{border-top:20px solid var(--rrg-red);}
/* width:49px on the div too — same max-width:100%-clamps-a-collapsed-container bug as
the Main Header logo above, same fix. */
body.region-uk .rrg-sticky-header .rrg-logo{position:relative;align-self:flex-start;width:49px;}
body.region-uk .rrg-sticky-header .rrg-logo img{position:absolute;top:-20px;left:50%;transform:translateX(-50%);height:60px;width:49px;z-index:5;}
/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;padding:5px 12px;border-radius:999px;}
/* border-radius override only (spec.md Section 12 item 23, Figma reference) — rectangular,
not the shared .badge pill shape. Scoped to -save specifically since .badge is never
reused for anything else in this project (confirmed via repo-wide search). */
.badge-save{background:var(--rrg-red);color:#fff;border-radius:8px;text-transform:none;letter-spacing:normal;}
/* fitment states — softened 2026-09-10 per client feedback: was a full solid-tinted
box (heavy fill + full-strength border all round); now a near-white card with a
colored left accent only, so it stays structurally boxed/scannable without
competing visually with price/Add to Cart. Label + dot keep the state color for
quick scanning; body copy is neutral gray, not tinted. */
.fitment{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--rrg-line);border-radius:var(--radius);padding:14px 16px;font-size:14px;color:#4a4a4a;}
/* Car icon (2026-09-11) replaces the old plain colour dot — same state colour via
currentColor/fill, just a more legible fitment-state indicator at a glance.
align-self:center (2026-09-11 follow-up) centers it against the full bar height,
not just the text block's top line, and it's sized up to read clearly at a glance. */
.fitment .dot{width:26px;height:26px;flex:0 0 auto;align-self:center;display:inline-flex;}
.fitment .dot svg{width:100%;height:100%;display:block;}
.persistent-bar .fitment .dot,.sticky-cta-mobile .fitment .dot{width:18px;height:18px;}
/* Copy-to-clipboard variant (2026-09-11, backlog item 10) — persistent bar + mobile
sticky bar only, see [data-fitment-copyable] in applyFitmentState(). Green flash on
click reuses the same confirmation colour as .sku-copy.copied elsewhere, regardless
of the icon's current fitment-state colour. */
.dot-copy{cursor:pointer;}
.dot-copy.copied{color:var(--rrg-fits)!important;}
.fitment strong{display:block;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:15px;letter-spacing:.02em;margin-bottom:2px;}
.fitment.fits{border-left:3px solid var(--rrg-fits);}
.fitment.fits strong{color:var(--rrg-fits);}
.fitment.fits .dot{color:var(--rrg-fits);}
.fitment.unknown{border-left:3px solid var(--rrg-unknown);}
.fitment.unknown strong{color:var(--rrg-unknown);}
.fitment.unknown .dot{color:var(--rrg-unknown);}
.fitment.no_fit{border-left:3px solid var(--rrg-nofit);}
.fitment.no_fit strong{color:var(--rrg-nofit);}
.fitment.no_fit .dot{color:var(--rrg-nofit);}
.fitment .actions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;}
/* min-height 48px (2026-09-11, mobile audit) — was 6px/12px padding at 12px font, well
under Google's 48px tap-target minimum for a real "change vehicle"-type action. */
.fitment .actions button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;background:#fff;border:1px solid var(--rrg-line);border-radius:999px;padding:6px 16px;font-size:12.5px;font-weight:700;color:#333;}
/* Rack Fit Guarantee (2026-09-10, Graham Sowerby meeting) — real client asset + copy.
Main decision panel gets icon+text packed into the fitment card's top-right corner;
the two condensed fitment strips (sticky mobile bar, persistent desktop bar) get an
icon-only version with a title tooltip since there's no room for the caption there. */
.fitment-wrap{position:relative;}
.fitment-wrap .fitment{padding-right:50px;}
.rack-fit-badge{position:absolute;top:50%;right:10px;transform:translateY(-50%);width:32px;height:auto;cursor:pointer;}
.rack-fit-badge-icon{width:20px;height:auto;flex:0 0 auto;cursor:pointer;}
/* Recolourable placeholder icon (2026-09-12, spec.md Section 12 item 12) — replaces the
old fitgaurantee.svg (confirmed to be a baked-in raster image wrapped in an