/* ==========================================================================
   Trailers Down Under — brand layer
   --------------------------------------------------------------------------
   Loads AFTER bootstrap.min.css. Bootstrap supplies the grid, offcanvas,
   collapse, dropdown, carousel and modal behaviour; everything visual below is
   the brand design system and wins the cascade at equal specificity.
   ========================================================================== */

/* ---------------------------------------------------------------- font ----
   All self-hosted. No Google Fonts request: one less third-party connection,
   it works offline, and no visitor IP is handed to Google — which also keeps
   the site clear of the EU rulings on embedded web fonts.
   `swap` means text paints immediately in the fallback and re-renders when the
   webfont lands, instead of the page sitting blank. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/barlow-500.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/barlow-700.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:800;font-display:swap;
  src:url('../fonts/barlow-800.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:900;font-display:swap;
  src:url('../fonts/barlow-900.woff2') format('woff2')}

/* Quicksand for headings and UI, Lato for body — the pairing used by the
   reference design. Quicksand stops at 700, so anything asking for 800/900
   below resolves to 700 rather than a synthesised fake bold. */
@font-face{font-family:'Quicksand';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/quicksand-400.woff2') format('woff2')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/quicksand-500.woff2') format('woff2')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/quicksand-600.woff2') format('woff2')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/quicksand-700.woff2') format('woff2')}
@font-face{font-family:'Quicksand';font-style:normal;font-weight:800 900;font-display:swap;
  src:url('../fonts/quicksand-700.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/lato-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:500 700;font-display:swap;
  src:url('../fonts/lato-700.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:800 900;font-display:swap;
  src:url('../fonts/lato-900.woff2') format('woff2')}

:root{
  --red:#e2211c;--red-dark:#b81812;--gold:#ffc20e;--gold-dark:#f0b100;--ink:#1c1c1c;
  --bg:#f5f6f8;--card:#fff;--text:#23262b;--muted:#6c727d;--line:#e4e7ec;--ok:#1f9d55;
  --radius:12px;--shadow:0 4px 20px rgba(16,24,40,.08);--shadow-lg:0 14px 44px rgba(16,24,40,.18);
  /* Content width. At 1240 a 1920 screen left 340px of dead margin each side;
     1560 fills a wide monitor without the grids going sparse. Prose columns are
     capped separately below, because a 1000px line length is hard to read. */
  --wrap:1560px;
  --prose:78ch;
  --font:'Lato','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --font-head:'Quicksand','Lato','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  /* Lato reads a little smaller than Segoe UI at the same px. The bumps below
     compensate rather than shrinking the design. */
  --fs-body:16.5px;
  --fs-small:13.5px;
  --fs-ui:14px;

  /* Two separate tokens on purpose.
     --masthead-h is a static design token and is the ONLY one that feeds a
     height. --header-h is measured at runtime by theme.js and must never be
     used to size anything inside the header, or the measurement feeds back
     into the thing being measured and the header grows without bound. */
  --masthead-h:84px;
  --header-h:135px;

  /* Bootstrap token overrides so its components inherit the brand */
  --bs-body-font-family:var(--font);
  --bs-body-color:#23262b;
  --bs-body-bg:#f5f6f8;
  --bs-primary:#e2211c;
  --bs-link-color:#e2211c;
  --bs-link-hover-color:#b81812;
  --bs-border-color:#e4e7ec;
  --bs-border-radius:12px;
  --bs-focus-ring-color:rgba(226,33,28,.25);
}

/* ---------------------------------------------------------------- base ---- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);
  /* clip on html too — the scroll-reveal offset below sticks out to the right
     during animation, and iOS Safari ignores overflow-x on <body> alone */
  overflow-x:clip}
body{font-family:var(--font);color:var(--text);background:var(--bg);line-height:1.6;font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;
  /* clip (not hidden) — hidden would make body a scroll container and break the sticky header */
  overflow-x:clip}
img{max-width:100%;height:auto}
/* Links inherit by default because most of them here are cards, nav items and
   buttons where an underline would be wrong. The consequence is that any link
   the theme does not style explicitly — anything WordPress or a plugin prints —
   renders as plain text and stops looking clickable. `.tdu-link` below is the
   opt-in, and the prose/plugin regions after it opt in wholesale. */
a{color:inherit;text-decoration:none}
a:hover{color:inherit}

.tdu-link,
.entry-content a:not(.btn):not(.pill),
.pd-pane a:not(.btn):not([data-bs-toggle]),
.comment-body a,
.comment-respond a,
.must-log-in a,
.woocommerce-verification-required a,
.woocommerce-message a:not(.button),
.woocommerce-info a:not(.button),
.woocommerce-error a:not(.button),
.woocommerce-noreviews a,
.woocommerce-MyAccount-content a:not(.button),
.woocommerce-form a,
.wc-block-components-notice-banner a,
.formok a,
.formerr a{color:var(--red);text-decoration:underline;text-underline-offset:2px}

.tdu-link:hover,
.entry-content a:not(.btn):not(.pill):hover,
.pd-pane a:not(.btn):not([data-bs-toggle]):hover,
.comment-body a:hover,
.comment-respond a:hover,
.must-log-in a:hover,
.woocommerce-verification-required a:hover,
.woocommerce-message a:not(.button):hover,
.woocommerce-info a:not(.button):hover,
.woocommerce-error a:not(.button):hover,
.woocommerce-noreviews a:hover,
.woocommerce-MyAccount-content a:not(.button):hover,
.woocommerce-form a:hover,
.wc-block-components-notice-banner a:hover,
.formok a:hover,
.formerr a:hover{color:var(--red-dark)}

/* the "you must be logged in" line sits alone under the reviews heading */
.must-log-in,.woocommerce-verification-required{font-size:var(--fs-ui);color:var(--muted);
  background:#fafbfc;border:1px solid var(--line);border-left:3px solid var(--red);
  border-radius:0 9px 9px 0;padding:12px 16px;margin:0 0 16px}
/* Headings, buttons, prices and nav take the display face; running prose keeps
   the text face, which is the split the reference design uses. */
h1,h2,h3,h4,h5,h6,
.btn,.button,button,input[type=submit],
.price,.woocommerce-Price-amount,.amount,
.mainnav,.eyebrow,.sale,.bundle-head h2,.faq summary{font-family:var(--font-head)}
h1,h2,h3,h4,h5,h6{line-height:1.16;color:var(--ink);margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

/* Bootstrap's container replaced by the design's own wrap. `.row`'s negative
   gutter margins line the columns up with this padding exactly. */
/* 24px inline padding is deliberate: it matches Bootstrap's largest gutter
   half-step (g-5 = 3rem => -1.5rem row margin), so a `.row` inside `.wrap`
   never pokes past the viewport edge whatever gutter class is used. */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
/* padding-block, not the `padding` shorthand — `class="wrap pad"` is used in
   places, and a shorthand here would reset .wrap's inline padding to 0 and let
   Bootstrap's negative row gutters hang past the viewport edge. */
.pad{padding-block:58px}
.pad-sm{padding-block:38px}

.eyebrow{color:var(--red);font-weight:800;letter-spacing:1.6px;text-transform:uppercase;font-size:14px;display:block}
/* Left-aligned with a short accent rule under the heading. Centred headings
   float away from the grids they introduce; ranging them left puts each one
   above the first column of its own section. */
.sec-head{text-align:left;max-width:760px;margin:0 0 32px}
.sec-head h2{font-size:clamp(24px,3.2vw,33px);font-weight:900;margin:10px 0 0;text-transform:uppercase;
  padding-bottom:12px;position:relative}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:3px;border-radius:3px;
  background:var(--red)}
.sec-head p{color:var(--muted);font-size:16px;margin:12px 0 0}

.pill{display:inline-block;background:var(--red);color:#fff;font-size:11px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;padding:4px 10px;border-radius:100px}
.pill.gold{background:var(--gold);color:var(--ink)}

.ic{width:1em;height:1em;display:block;flex:none}

/* ------------------------------------------------------------- buttons ---- */
/* Declared after Bootstrap's .btn so these win at equal specificity. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;border:none;cursor:pointer;
  border-radius:8px;padding:12px 22px;font-size:15px;transition:.18s;font-family:var(--font-head);letter-spacing:.2px;
  line-height:1.25;text-align:center;--bs-btn-focus-shadow-rgb:226,33,28}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover,.btn-red:focus-visible{background:var(--red-dark);color:#fff}
.btn-gold{background:var(--gold);color:var(--ink)}
.btn-gold:hover,.btn-gold:focus-visible{background:var(--gold-dark);color:var(--ink)}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:rgba(255,255,255,.12);color:#fff}
.btn-outline{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-outline:hover,.btn-outline:focus-visible{border-color:var(--red);color:var(--red)}
.btn-sm{padding:9px 14px;font-size:14px}
.btn-block{display:flex;width:100%}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* --------------------------------------------------------- price ribbon --- */
.pb-ribbon{background:var(--ink);color:#fff;text-align:center;font-size:14px;padding:9px 20px;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
/* The badge glows so the offer catches the eye against the near-black ribbon.
   Two layers: a steady halo that never fully fades, and a pulse over the top.
   The pulse only touches box-shadow and filter — animating either is composited
   off the main thread, so a bar that sits on every page costs no layout work.

   The glow is red while the chip stays gold. Gold on gold was a halo the same
   colour as the thing it surrounded, so it just looked slightly blurred; red
   against the gold reads as a separate light source, and it is the second
   brand colour rather than a new one. */
.pb-ribbon .b2{position:relative;background:var(--gold);color:var(--ink);font-weight:900;font-size:14px;
  padding:3px 9px;border-radius:5px;
  box-shadow:0 0 0 1px rgba(226,33,28,.65),0 0 12px rgba(226,33,28,.6),0 0 26px rgba(226,33,28,.34);
  animation:tdu-beat 2.6s ease-in-out infinite}

@keyframes tdu-beat{
  0%,100%{box-shadow:0 0 0 1px rgba(226,33,28,.55),0 0 10px rgba(226,33,28,.5),0 0 22px rgba(226,33,28,.24);
          filter:brightness(1)}
  50%    {box-shadow:0 0 0 1px rgba(226,33,28,1),0 0 22px rgba(226,33,28,.95),0 0 48px rgba(255,60,50,.6);
          filter:brightness(1.12)}
}

/* A ring that expands and fades, the way a live indicator pulses. Drawn on a
   pseudo-element so the badge's own glow is not what is being scaled. */
.pb-ribbon .b2::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:1px solid rgba(226,33,28,.9);animation:tdu-beat-ring 2.6s ease-out infinite}

@keyframes tdu-beat-ring{
  0%  {opacity:.85;transform:scale(1)}
  70% {opacity:0;transform:scale(1.42)}
  100%{opacity:0;transform:scale(1.42)}
}

/* Held still for anyone who asked for that — the badge keeps its steady halo. */
@media(prefers-reduced-motion:reduce){
  .pb-ribbon .b2{animation:none}
  .pb-ribbon .b2::after{animation:none;opacity:.5}
}
.pb-ribbon strong{color:var(--gold)}
.pb-ribbon a{color:#fff;text-decoration:underline;font-weight:700}
.pb-ribbon a:hover{color:var(--gold)}

/* --------------------------------------------------------------- topbar --- */
.topbar{background:var(--ink);color:#cfcfcf;font-size:14px;border-top:1px solid rgba(255,255,255,.08)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:38px;gap:16px}
.topbar .r{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.topbar a:hover{color:var(--gold)}
.topbar .gr b{color:var(--gold)}
.topbar .loc{display:flex;align-items:center;gap:7px}
.topbar .ic{width:15px;height:15px}

/* --------------------------------------------------------------- header --- */
.site-header{background:#fff;position:sticky;top:0;z-index:1030;box-shadow:0 2px 14px rgba(0,0,0,.08)}
.masthead{display:flex;align-items:center;gap:20px;min-height:var(--masthead-h);padding-block:12px}
.logo{flex:none;display:block}
.logo img{height:52px;width:auto;display:block}

/* The cap stops the bar swallowing the masthead on very wide screens; at 540
   it was leaving ~400px idle beside a 1560 wrap. */
.searchbar{flex:1;display:flex;align-items:stretch;border:2px solid var(--line);border-radius:10px;background:#fff;
  max-width:780px;height:52px;transition:border-color .15s,box-shadow .15s;margin:0}
.searchbar:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,33,28,.12)}
.searchbar .selwrap{position:relative;display:flex;flex:none}
.searchbar select{appearance:none;border:none;outline:none;background:#f4f5f7;padding:0 34px 0 16px;font-size:14.5px;
  font-weight:600;font-family:inherit;color:#4a4f57;cursor:pointer;border-right:1px solid var(--line);border-radius:7px 0 0 7px;
  max-width:190px;text-overflow:ellipsis}
.searchbar select:hover{background:#eceef1}
.searchbar .selwrap::after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.searchbar input{flex:1;min-width:0;border:none;padding:0 16px;font-size:15.5px;outline:none;font-family:inherit;
  color:var(--text);background:transparent}
.searchbar input::placeholder{color:#9aa0a8}
.searchbar button{background:var(--red);color:#fff;border:none;padding:0 20px;cursor:pointer;display:grid;place-items:center;
  flex:none;border-radius:0 7px 7px 0;transition:background .15s}
.searchbar button:hover{background:var(--red-dark)}
.searchbar button .ic{width:19px;height:19px;stroke-width:2.2}

/* live search suggestions dropdown */
.tdu-ac{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:120;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(17,24,39,.16);
  overflow:hidden;max-height:70vh;overflow-y:auto}
.tdu-ac[hidden]{display:none}
.tdu-ac-item{display:flex;align-items:center;gap:12px;padding:9px 14px;text-decoration:none;
  border-bottom:1px solid var(--line);color:var(--ink)}
.tdu-ac-item:last-child{border-bottom:none}
.tdu-ac-item:hover,.tdu-ac-item.is-active{background:#f6f7f9}
.tdu-ac-item img,.tdu-ac-noimg{width:44px;height:44px;flex:none;border-radius:7px;object-fit:cover;
  background:#eceef1}
.tdu-ac-t{flex:1;min-width:0;font-size:14px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tdu-ac-p{flex:none;font-weight:800;color:var(--red);font-size:13.5px;white-space:nowrap}

.header-cta{display:flex;align-items:center;gap:14px;margin-left:auto;flex:none}
.phone{text-align:right;line-height:1.12;display:block}
.phone small{color:var(--muted);font-size:11px;display:block;text-transform:uppercase;letter-spacing:1px}
.phone strong{font-size:18px;color:var(--red)}
.phone:hover strong{color:var(--red-dark)}

/* icon-only header buttons (mobile search toggle, cart, hamburger) */
.hbtn{width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;flex:none;padding:0;position:relative;transition:.15s}
.hbtn:hover{border-color:var(--gold);color:var(--ink);background:#fffdf5;
  box-shadow:0 0 0 3px rgba(255,194,14,.18)}
.hbtn .ic{width:21px;height:21px}
/* Gold on ink, so the count reads as a tally rather than an error. */
.hbtn .count{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:100px;
  background:var(--gold);color:var(--ink);font-size:11px;font-weight:900;display:grid;place-items:center;line-height:1;
  border:2px solid #fff;box-shadow:0 2px 6px rgba(16,24,40,.2)}

/* collapsible search shown under the masthead on small screens */
.msearch{border-top:1px solid var(--line);background:#fafbfc}
.msearch .wrap{padding-block:12px}
.msearch .searchbar{max-width:none;width:100%}
/* The category select is a desktop convenience. On a 375px screen it claimed
   190px of a 343px bar and squeezed the field itself to nothing, so it is
   dropped here and the query gets the width. The form still posts to the same
   place; it simply searches everything. */
.msearch .searchbar .selwrap{display:none}
.msearch .searchbar input{min-width:0;font-size:16px}

/* ------------------------------------------------------------ main nav ----
   A dark rail carrying the links as one rounded pill. The current section is
   marked in gold with a lit underline rather than a filled red tab, so the
   bar stays quiet and the active item is the only thing that glows. */
/* The 1px ink shadow is not decoration. The header behind this bar is white,
   and at fractional display scaling (125% Windows, say) the bar's bottom edge
   lands on a sub-pixel — 247.2 rather than 247 — leaving a hairline of white
   header showing through beneath it. Painting a solid pixel of ink under the
   bar covers whichever way the rounding goes. */
.mainnav{background:var(--ink);padding-block:10px;box-shadow:0 1px 0 var(--ink)}
.navrow{display:flex;align-items:stretch;flex-wrap:nowrap;list-style:none;margin:0;padding:4px 6px;
  background:#16181d;border:1px solid rgba(255,255,255,.08);border-radius:14px}
.navrow .nav-item{display:flex;position:static}
.navrow .navlink{position:relative;color:#c9ced6;font-weight:700;font-size:14px;letter-spacing:.3px;
  text-transform:uppercase;padding:13px 16px;display:flex;align-items:center;gap:6px;cursor:pointer;
  white-space:nowrap;background:none;border:0;border-radius:10px;font-family:inherit;transition:color .16s,background .16s}
.navrow .navlink:hover,.navrow .nav-item:hover>.navlink{color:var(--gold);background:rgba(255,255,255,.05)}

/* the lit underline under the active item */
.navrow .navlink::after{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:2px;border-radius:2px;
  background:var(--gold);box-shadow:0 0 10px rgba(255,194,14,.9);opacity:0;transform:scaleX(.3);
  transform-origin:center;transition:opacity .2s,transform .2s}
.navrow .nav-item.active>.navlink{color:var(--gold);background:rgba(255,194,14,.08)}
.navrow .nav-item.active>.navlink::after{opacity:1;transform:none}
.navrow .navlink:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}

/* Trailers for Sale is not permanently gold: gold means "you are here", and
   two lit items at once cancel each other out. Its caret marks the dropdown. */
.navrow .is-sale>.navlink:hover{background:rgba(255,194,14,.12)}
.navrow .is-gold>.navlink{color:var(--gold)}
.navrow .is-gold>.navlink:hover{background:rgba(255,194,14,.12)}
.navrow .dropdown-toggle::after{content:"▾";position:static;width:auto;height:auto;border:0;font-size:11px;
  opacity:.75;margin:0;background:none;box-shadow:none;transform:none;border-radius:0;vertical-align:baseline}
.navrow .spacer{flex:1}
@media(prefers-reduced-motion:reduce){.navrow .navlink::after{transition:none}}

/* plain Bootstrap dropdowns for ordinary menu items with children */
.tdu-dropdown{border:0;border-top:3px solid var(--gold);border-radius:0 0 10px 10px;padding:8px;min-width:250px;
  box-shadow:0 24px 50px rgba(16,24,40,.24);position:absolute}
.tdu-dropdown .dropdown-item{font-size:14px;font-weight:600;color:#4d535c;padding:8px 12px;border-radius:7px;white-space:normal}
.tdu-dropdown .dropdown-item:hover,.tdu-dropdown .dropdown-item:focus{background:var(--red);color:#fff}

/* ----------------------------------------------------------- mega menu ---- */
.has-mega{position:static}
.mega{position:absolute;left:0;right:0;top:100%;z-index:1040;padding:22px 0 26px;
  background:rgba(250,251,252,.86);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border-top:3px solid var(--gold);
  box-shadow:0 34px 80px rgba(16,24,40,.3),inset 0 1px 0 rgba(255,255,255,.9);
  max-height:calc(100vh - 190px);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s,transform .22s,visibility .22s}
/* hover for mouse, focus-within for keyboard, .open for touch/click */
.has-mega:hover .mega,.has-mega:focus-within .mega,.has-mega.open .mega{opacity:1;visibility:visible;transform:none}

.mega-intent{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;align-items:center;padding-bottom:15px;
  margin-bottom:18px;border-bottom:1px solid rgba(16,24,40,.1)}
.mega-intent .lbl{font-size:13.5px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;color:var(--red);white-space:nowrap}
.chips2{display:flex;flex-wrap:wrap;gap:7px}
.chips2 a{border:1px solid rgba(16,24,40,.12);border-radius:7px;padding:5px 11px;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.72);cursor:pointer;transition:.15s;color:var(--ink)}
.chips2 a:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* columns (not grid) so uneven card heights nest without gaps */
/* Grid, not multi-column. Columns flow each card top-to-bottom then wrap, so a
   two-line tile and a six-line tile end up staggered against each other and the
   reading order runs down before across — wrong for a menu. */
.mega-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:start}
.mcat{display:block;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);border-radius:11px;
  padding:11px 12px;box-shadow:0 1px 2px rgba(16,24,40,.05);transition:.18s;color:inherit}
.mcat:hover{background:#fff;box-shadow:0 10px 26px rgba(16,24,40,.14);transform:translateY(-2px);color:inherit}
.mhead{display:flex;align-items:center;gap:9px;color:inherit}
.mhead img{width:42px;height:31px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.22))}
.mhead span{font-size:14px;font-weight:800;color:var(--ink);line-height:1.2}
.mcat:hover .mhead span{color:var(--red)}
.msubs{margin-top:8px;padding-top:7px;border-top:1px dashed rgba(16,24,40,.14)}
.msubs a{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:13.5px;color:#4d535c;
  padding:3.5px 0;transition:.14s}
.msubs a:hover{color:var(--red);padding-left:4px}
.msubs em{font-style:normal;color:#9aa0a8;font-size:11px;font-weight:700;flex:none}
/* "New" badge on a just-added category. A red pill that pulses so the eye is
   pulled to it in the dropdown, where every other row is quiet grey. The pulse
   scales a shadow rather than the pill itself, so the text never shifts, and it
   holds still for anyone who asked for reduced motion. */
.msubs .new{flex:none;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  color:#fff;background:var(--red);border-radius:100px;padding:2px 8px;line-height:1.35;
  box-shadow:0 0 0 0 rgba(226,33,28,.55);animation:tdu-newpulse 1.6s ease-out infinite}
@keyframes tdu-newpulse{
  0%{box-shadow:0 0 0 0 rgba(226,33,28,.55)}
  70%{box-shadow:0 0 0 7px rgba(226,33,28,0)}
  100%{box-shadow:0 0 0 0 rgba(226,33,28,0)}
}
@media(prefers-reduced-motion:reduce){.msubs .new{animation:none}}

/* Categories with no sub-links: a strip along the bottom rather than one-line
   tiles marooned in a column of six-line ones. */
.mega-more{display:grid;grid-template-columns:auto 1fr auto;gap:10px 16px;align-items:center;
  margin-top:16px;padding-top:14px;border-top:1px solid rgba(16,24,40,.1)}
/* Warranty badge closes the row — the promise the range is sold on. */
.mega-warranty{display:inline-flex;align-items:center;gap:10px;flex:none;padding-left:16px;
  border-left:1px solid rgba(16,24,40,.12)}
.mega-warranty img{width:52px;height:52px;flex:none}
.mega-warranty b{font-size:13px;font-weight:800;color:var(--ink);line-height:1.3;max-width:11ch}
.mega-more .lbl{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--red)}
.mmore-list{display:flex;flex-wrap:wrap;gap:8px}
.mmore{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.85);border-radius:9px;padding:7px 13px 7px 9px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);transition:.18s;color:inherit}
.mmore:hover{background:#fff;box-shadow:0 8px 20px rgba(16,24,40,.13);transform:translateY(-2px)}
.mmore img{width:34px;height:25px;object-fit:contain;flex:none;filter:drop-shadow(0 1px 3px rgba(0,0,0,.22))}
.mmore span{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.2;white-space:nowrap}
.mmore:hover span{color:var(--red)}

/* --------------------------------------------------- offcanvas mobile nav - */
.tdu-offcanvas{width:min(88vw,360px);background:var(--ink);color:#e8e8e8}
.tdu-offcanvas .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.12);padding:16px 20px}
.tdu-offcanvas .offcanvas-title{color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:.6px;font-weight:800;margin:0}
.tdu-offcanvas .btn-close{filter:invert(1) grayscale(1) brightness(2);opacity:.8}
.tdu-offcanvas .offcanvas-body{padding:0 0 24px}

.mnav,.mnav-sub{list-style:none;margin:0;padding:0}
.mnav-item{position:relative;border-bottom:1px solid rgba(255,255,255,.08)}
.mnav-item>a{display:block;padding:14px 56px 14px 20px;color:#e8e8e8;font-weight:700;font-size:14.5px;
  text-transform:uppercase;letter-spacing:.3px}
.mnav-item>a:hover,.mnav-item.active>a{color:#fff;background:rgba(255,255,255,.07)}
.mnav-item.active>a{box-shadow:inset 3px 0 0 var(--gold)}
.mnav-toggle{position:absolute;top:0;right:0;width:52px;height:51px;background:none;border:0;border-left:1px solid rgba(255,255,255,.08);
  color:#bdbdbd;display:grid;place-items:center;padding:0;cursor:pointer}
.mnav-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s}
.mnav-toggle:not(.collapsed) svg{transform:rotate(180deg)}
.mnav-toggle:hover{color:var(--gold)}
.mnav-sub{background:rgba(0,0,0,.28)}
.mnav-item.is-sub>a{padding:11px 20px 11px 34px;font-size:14px;font-weight:600;text-transform:none;color:#bfc3c8;letter-spacing:0}
.mnav-item.is-sub{border-bottom-color:rgba(255,255,255,.05)}

.mnav-cta{padding:20px;display:grid;gap:10px}
.mnav-cta .btn{width:100%}
.mnav-contact{padding:4px 20px 0;display:grid;gap:10px;font-size:14px;color:#b6b6b6}
.mnav-contact a{display:flex;align-items:start;gap:9px;color:#b6b6b6;padding:3px 0}
.mnav-contact a:hover{color:var(--gold)}
.mnav-contact .ic{width:16px;height:16px;margin-top:3px;color:var(--gold)}

/* ---------------------------------------------------------- breadcrumbs --- */
.crumbs{background:#fff;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.crumbs .wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-block:11px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--red)}
.crumbs i{opacity:.5;font-style:normal}
.crumbs span[aria-current]{color:var(--ink);font-weight:700}

/* ------------------------------------------------------------ page head --- */
.pagehead{background:linear-gradient(120deg,var(--ink),#2c2c2c);color:#fff;padding:44px 0 40px;position:relative;overflow:hidden}
.pagehead::after{content:"";position:absolute;right:-80px;top:-60px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,194,14,.18),transparent 68%);pointer-events:none}
.pagehead .wrap{position:relative;z-index:1}
.pagehead .eyebrow{color:var(--gold)}
.pagehead h1{color:#fff;font-size:clamp(26px,4vw,38px);font-weight:900;margin:9px 0 10px;text-transform:uppercase}
.pagehead .ph-sub{color:#cfd2d6;font-size:16px;max-width:720px;margin:0}
.pagehead .ph-meta{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:16px;font-size:14px;color:#b9bdc2}
.pagehead .ph-meta b{color:var(--gold)}

/* ------------------------------------------------- accreditation strip ---- */
.accred{background:var(--gold)}
.accred .wrap{display:flex;justify-content:space-between;gap:14px 20px;padding-block:16px;flex-wrap:wrap;align-items:center}
.accred .a{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);font-size:14px;
  text-transform:uppercase;letter-spacing:.3px}
.accred .ic-wrap{display:grid;place-items:center;flex:none}
.accred .ic{width:22px;height:22px;stroke:var(--ink)}

/* -------------------------------------------------- inner page layout ----- */
/* Bootstrap's .row/.col carry the split; these only add the visual treatment. */
.side{display:grid;gap:18px;align-content:start}
@media(min-width:992px){.side{position:sticky;top:calc(var(--header-h) + 14px)}}

.swidget{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.swidget-title{font-size:15px;text-transform:uppercase;letter-spacing:.6px;margin:0 0 14px;padding-bottom:9px;
  border-bottom:2px solid var(--line);position:relative}
.swidget-title::after{content:"";position:absolute;left:0;bottom:-2px;width:44px;height:2px;background:var(--red)}

.swidget-search{display:flex;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;height:42px}
.swidget-search input{flex:1;min-width:0;border:0;padding:0 12px;font-size:14px;font-family:inherit;outline:none;background:transparent}
.swidget-search button{border:0;background:var(--red);color:#fff;width:46px;display:grid;place-items:center;cursor:pointer;flex:none}
.swidget-search button:hover{background:var(--red-dark)}
.swidget-search svg{width:17px;height:17px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round}
.swidget-search:focus-within{border-color:var(--red)}

.swidget-cats{list-style:none;margin:0;padding:0}
.swidget-cats li+li{border-top:1px solid var(--line)}
.swidget-cats a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;font-size:14px;
  color:#4a4f57;font-weight:600;transition:.14s}
.swidget-cats a:hover,.swidget-cats a.on{color:var(--red);padding-left:4px}
.swidget-cats em{font-style:normal;background:#f1f3f5;color:var(--muted);font-size:11.5px;font-weight:800;
  padding:2px 8px;border-radius:100px;flex:none}
.swidget-cats a:hover em,.swidget-cats a.on em{background:var(--red);color:#fff}

.swidget-trend{display:grid;gap:14px}
.wt{display:flex;gap:11px;align-items:flex-start}
.wt .im{width:64px;height:52px;border-radius:8px;overflow:hidden;background:#eceef1;flex:none}
.wt .im img{width:100%;height:100%;object-fit:cover;display:block}
.wt .bd{min-width:0;display:block}
.wt strong{display:block;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:3px}
.wt:hover strong{color:var(--red)}
.wt .st{display:flex;gap:1px}
.wt .st svg{width:12px;height:12px;display:block}
.wt .pr{display:block;font-size:14px;font-weight:800;color:var(--red);margin-top:3px}
.wt .pr s,.wt .pr del{color:#b5b9bf;font-weight:600;font-size:13.5px;margin-left:5px}
.wt .pr ins{text-decoration:none}

.swidget-tags{display:flex;flex-wrap:wrap;gap:7px}
.swidget-tags a{border:1px solid var(--line);border-radius:7px;padding:5px 10px;font-size:13.5px;font-weight:600;
  color:#4a4f57;transition:.14s}
.swidget-tags a:hover,.swidget-tags a.on{background:var(--red);border-color:var(--red);color:#fff}

.swidget-promo{background:linear-gradient(150deg,var(--ink),#2f2a1c);border-color:#2f2a1c;color:#d6d6d6;text-align:center}
.swidget-promo .band{display:inline-block;background:var(--gold);color:var(--ink);font-weight:900;font-size:11px;
  letter-spacing:1px;text-transform:uppercase;padding:4px 10px;border-radius:5px;margin-bottom:12px}
.swidget-promo strong{display:block;color:#fff;font-size:17px;line-height:1.25;margin-bottom:8px}
.swidget-promo p{font-size:14px;color:#b8bcc1;margin-bottom:14px}
.swidget-promo .btn{width:100%}

/* Offer banner — glassmorphism + neon glow over a trailer image (sidebar promo). */
.offer-banner{position:relative;display:block;overflow:hidden;isolation:isolate;text-decoration:none;color:#fff;
  border-radius:16px;padding:20px 18px;margin-bottom:18px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(140deg,#1b1e26,#0f1116);
  box-shadow:0 0 0 1px rgba(255,194,14,.35),0 0 18px rgba(255,194,14,.32),0 0 46px rgba(226,33,28,.26);
  animation:ob-neon 3s ease-in-out infinite;transition:transform .18s}
.offer-banner:hover{transform:translateY(-2px)}
.offer-banner.has-img::before{content:"";position:absolute;inset:0;z-index:-2;
  background:var(--ob-bg) center/cover no-repeat;transform:scale(1.06);filter:saturate(1.05)}
.offer-banner::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,rgba(15,17,22,.60),rgba(15,17,22,.84));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.offer-banner .ob-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:#0f1116;background:var(--gold);padding:4px 10px;border-radius:100px;margin-bottom:11px}
.offer-banner .ob-title{display:block;font-size:19px;font-weight:900;line-height:1.22;margin-bottom:7px;color:#fff}
.offer-banner .ob-sub{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.82)}
.offer-banner .ob-cta{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:14px;color:#fff;
  background:var(--red);padding:9px 16px;border-radius:10px;box-shadow:0 0 14px rgba(226,33,28,.5)}
.offer-banner:hover .ob-cta{box-shadow:0 0 22px rgba(226,33,28,.75)}
.offer-banner .ob-phone{display:flex;align-items:center;gap:7px;margin-top:12px;font-weight:700;font-size:13.5px;color:var(--gold)}
.offer-banner .ob-phone svg{width:16px;height:16px}
@keyframes ob-neon{
  0%,100%{box-shadow:0 0 0 1px rgba(255,194,14,.32),0 0 16px rgba(255,194,14,.28),0 0 40px rgba(226,33,28,.22)}
  50%{box-shadow:0 0 0 1px rgba(255,194,14,.6),0 0 26px rgba(255,194,14,.55),0 0 60px rgba(226,33,28,.4)}
}
@media (prefers-reduced-motion:reduce){.offer-banner{animation:none}}
.swidget-call{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;color:var(--gold);
  font-weight:800;font-size:14px}
.swidget-call .ic{width:16px;height:16px}
.swidget-call:hover{color:#fff}

/* ------------------------------------------------------------ pagination -- */
.pager{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin-top:34px}
.pager .page-numbers{min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:#fff;
  color:var(--ink);font-weight:700;font-size:14px;display:inline-grid;place-items:center;cursor:pointer;transition:.15s}
.pager a.page-numbers:hover{border-color:var(--red);color:var(--red)}
.pager .page-numbers.current{background:var(--red);border-color:var(--red);color:#fff}
.pager .page-numbers.dots{border-color:transparent;background:none}

/* ---------------------------------------------------------------- forms --- */
.field{display:grid;gap:6px}
.field label,.tdu-form label{font-size:14px;font-weight:700;color:var(--ink)}
.field .req{color:var(--red)}
.tdu-form input[type=text],.tdu-form input[type=email],.tdu-form input[type=tel],.tdu-form input[type=url],
.tdu-form input[type=number],.tdu-form input[type=search],.tdu-form input[type=password],.tdu-form select,.tdu-form textarea,
.field input,.field select,.field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;font-size:14.5px;font-family:inherit;
  color:var(--text);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.tdu-form textarea,.field textarea{min-height:130px;resize:vertical}
.tdu-form :is(input,select,textarea):focus,.field :is(input,select,textarea):focus{
  border-color:var(--red);box-shadow:0 0 0 3px rgba(226,33,28,.12)}
.form-note{font-size:13.5px;color:var(--muted)}

/* --------------------------------------------------------------- footer --- */
.site-footer{background:var(--ink);color:#b6b6b6;margin-top:20px;font-size:14px}
/* The 20px above the footer separates it from light page content. When a dark
   band runs straight into it, that same gap shows the page's pale background
   as a seam between two dark blocks. */
.ownband + .site-footer{margin-top:0}
.foot-top{padding-block:52px 40px}
.site-footer h4{color:#fff;font-size:15px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.6px;
  border-bottom:2px solid var(--gold);display:inline-block;padding-bottom:5px}
.site-footer a{color:#b6b6b6}
.site-footer a:hover{color:var(--gold)}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li a,.foot-col .menu-item a{display:block;padding:5px 0}
.foot-brand p{margin:14px 0;max-width:320px}
/* Contact details sit with the brand, each line labelled so the address and the
   hours are not two anonymous runs of text. */
.foot-contact{list-style:none;margin:16px 0 0;padding:0}
.foot-contact li{display:flex;gap:11px;align-items:flex-start;padding:6px 0;font-size:14.5px;line-height:1.5}
.foot-contact .ic{width:17px;height:17px;margin-top:4px;color:var(--gold);flex:none}
.foot-contact b{color:#fff;font-weight:800;margin-right:5px}
.foot-contact .sep{color:#5c6169;margin:0 6px}
.foot-social{display:flex;gap:9px;margin-top:14px}
.foot-social a{width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center}
.foot-social a:hover{border-color:var(--gold);background:rgba(255,194,14,.12)}
/* Brand profiles sit on their own row and take each network's own colour on
   hover — these glyphs only read as themselves. */
.foot-brands{margin-top:10px}
.foot-brands .ic{width:19px;height:19px}
.foot-brands a:hover{background:transparent}
.foot-brands .s-facebook:hover{border-color:#1877f2;color:#1877f2}
.foot-brands .s-instagram:hover{border-color:#e1306c;color:#e1306c}
.foot-brands .s-linkedin:hover{border-color:#0a66c2;color:#0a66c2}
.foot-brands .s-youtube:hover{border-color:#f00;color:#f00}
.foot-brands .s-tiktok:hover{border-color:#fff;color:#fff}

/* ---------------------------------------------------------- badge rail ----
   Trust badges pinned down the left edge, mirroring the review widget on the
   right. They surface from below on load and then drift, so the column reads
   as bubbles rising rather than stickers stuck on the page.
   z-index stays under the header (1050) and the offcanvas backdrop. */
.badgerail{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:1020;
  display:flex;flex-direction:column;gap:10px;pointer-events:none}
.br-item{display:block;
  /* Two animations: the entrance runs once, the drift loops after it. The
     delay staggers the column so the badges surface one behind the other. */
  animation:br-rise .9s cubic-bezier(.22,.9,.3,1) backwards,
            br-float 5.5s ease-in-out infinite;
  animation-delay:calc(var(--br-i,0) * 170ms + .5s),
                  calc(var(--br-i,0) * 170ms + 1.4s)}
.br-item img{display:block;width:74px;height:auto;
  filter:drop-shadow(0 6px 14px rgba(16,24,40,.34))}

@keyframes br-rise{
  from{opacity:0;transform:translateY(46px) scale(.86)}
  60%{opacity:1}
  to{opacity:1;transform:none}
}
/* A shallow bob with a touch of sway — a bubble holding at the surface. */
@keyframes br-float{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-7px) rotate(-1.2deg)}
}

/* Only shown where the margin can actually hold it. The wrap is 1560, so the
   free gutter is (viewport - 1560) / 2; the rail needs 88px plus clearance
   before it starts crossing the hero headline, which puts the floor at 1750.
   Measured: at 1920 the hero copy starts at 200 against a rail edge of 88;
   at 1673 the copy starts at 77 and the two collide. */
/* On a laptop the gutter does not exist — 1440 and 1536 are both narrower than
   the 1560 wrap, so the content fills the screen and the rail had nowhere to
   go but on top of it. Hiding it meant nobody on a laptop ever saw the badges.

   Between 1200 and 1750 the wrap gives up 240px instead, which buys a 120px
   gutter each side, and the badges come down to 52px to sit inside it. The
   content is a little narrower on those screens; that is the cost of showing
   them, and it is paid deliberately rather than by overlapping the copy. */
@media(min-width:1200px) and (max-width:1749.98px){
  :root{--wrap:min(1560px,calc(100vw - 240px))}
  .badgerail{left:10px;gap:8px}
  .br-item img{width:52px}
}

/* Below 1200 there is not enough width to give away without the grids going
   sparse, so the rail stands down. */
@media(max-width:1199.98px){.badgerail{display:none}}
@media(prefers-reduced-motion:reduce){
  .br-item{animation:none}
}


/* Three parts: copyright, the sales number, then the profiles. */
.foot-bottom{border-top:1px solid rgba(255,255,255,.1)}
.foot-bottom .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:20px;
  font-size:14px;color:#8a8a8a;flex-wrap:wrap;gap:18px 24px}
.fb-copy{line-height:1.6}
.fb-copy a{color:#a9adb3}
.fb-copy a:hover{color:var(--gold)}

.fb-phone{display:inline-flex;align-items:center;gap:12px;color:inherit}
.fb-phone .ic{width:34px;height:34px;padding:8px;border-radius:50%;background:rgba(255,194,14,.16);
  color:var(--gold);flex:none;box-sizing:content-box;transition:background .16s}
.fb-phone:hover .ic{background:rgba(255,194,14,.3)}
/* Gold on the near-black footer. #ffc20e clears about 10:1 here — far better
   than the red it replaced, which only just cleared the 3:1 large-text bar. */
.fb-phone b{display:block;font-size:21px;font-weight:900;color:var(--gold);line-height:1.1}
.fb-phone:hover b{color:var(--gold-dark)}
.fb-phone small{display:block;font-size:12.5px;color:#8a8a8a;margin-top:2px}

.fb-follow{display:flex;align-items:center;gap:14px}
.fb-follow-l{font-weight:800;color:#fff;font-size:14.5px;white-space:nowrap}
.fb-follow .foot-social{margin-top:0}

/* ------------------------------------------------- sticky mobile call bar - */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:1040;display:flex;gap:1px;
  background:rgba(16,24,40,.14);
  box-shadow:0 -6px 22px rgba(16,24,40,.22);
  padding-bottom:env(safe-area-inset-bottom)}
.callbar-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 10px;
  font-weight:800;line-height:1.15;transition:background .15s}
.callbar-btn .ic{width:20px;height:20px;flex:none}
.callbar-btn strong{display:block;font-size:15px;letter-spacing:.2px}
.callbar-btn small{display:block;font-size:11.5px;font-weight:600;opacity:.85;letter-spacing:.3px}
.callbar-call{background:var(--red);color:#fff}
.callbar-call:active{background:var(--red-dark);color:#fff}
.callbar-quote{background:var(--gold);color:var(--ink);flex:0 0 42%}
.callbar-quote:active{background:var(--gold-dark);color:var(--ink)}
.callbar-btn:focus-visible{outline:3px solid #fff;outline-offset:-3px}

/* The bar overlays fixed page furniture, so make room for it below `lg`. */
@media(max-width:991.98px){
  body{padding-bottom:64px}
  .gfloat{bottom:74px}
}
@media print{.callbar{display:none}}

/* -------------------------------------------------- floating google badge - */
.gfloat{position:fixed;left:18px;bottom:18px;z-index:1035;display:flex;align-items:center;gap:11px;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 15px 9px 12px;
  box-shadow:0 8px 28px rgba(16,24,40,.2);transition:transform .18s,box-shadow .18s}
.gfloat:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(16,24,40,.26)}
.gfloat .gi{width:30px;height:30px;flex:none}
.gfloat .gf-body{display:block}
.gfloat .st{display:flex;gap:1px;line-height:1}
.gfloat .st svg{width:13px;height:13px;display:block}
.gfloat .txt{font-size:13.5px;color:#5a6069;margin-top:3px;white-space:nowrap;display:block}
.gfloat .txt b{color:var(--ink);font-size:14px;font-weight:800}
.gfloat .cls{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--muted);font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;
  box-shadow:0 2px 6px rgba(0,0,0,.12)}
.gfloat .cls:hover{background:var(--red);color:#fff;border-color:var(--red)}

/* ------------------------------------------------------- scroll reveal ---- */
/* uses the standalone `translate` property, not `transform`, so it never
   fights the hover transforms already on the cards */
.reveal{opacity:0;translate:56px 0;
  transition:opacity .68s cubic-bezier(.22,.7,.28,1),translate .68s cubic-bezier(.22,.7,.28,1)}
.reveal.in{opacity:1;translate:none}
/* a 56px sideways offset is a big fraction of a phone screen — shorten it so
   the slide reads as a nudge rather than content flying in from off-canvas */
@media(max-width:767.98px){.reveal{translate:22px 0}}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;translate:none;transition:none}
  html{scroll-behavior:auto}
}

/* Grid and flex items default to min-width:auto, so one long unbreakable
   string (a pasted URL, a tracking blob) can stretch a whole column. */
.row>[class*="col-"],.side,.aside-stack,.swidget,.wt .bd{min-width:0}

/* ---------------------------------------------------------- WP content ---- */
.entry-content{overflow-wrap:anywhere}
/* The wrap is sized for grids, not for reading. Body copy is capped so a wide
   monitor does not hand the reader 1,000px lines; headings, media and anything
   deliberately full-bleed are exempt. */
.entry-content > :is(p,ul,ol,blockquote,dl,table),
.pd-pane > :is(p,ul,ol,blockquote,dl){max-width:var(--prose)}
.entry-content>*{max-width:100%}
.entry-content h2{font-size:25px;margin:30px 0 12px}
.entry-content h3{font-size:20px;margin:26px 0 10px}
.entry-content ul,.entry-content ol{margin:0 0 16px;padding-left:22px}
.entry-content li{margin-bottom:6px}
.entry-content img,.entry-content iframe,.entry-content video{border-radius:var(--radius);max-width:100%;height:auto}
.entry-content blockquote{border-left:3px solid var(--red);background:#fafbfc;margin:20px 0;padding:14px 18px;
  border-radius:0 9px 9px 0;color:#41464e}
.entry-content table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:16px;display:block;overflow-x:auto}
.entry-content th,.entry-content td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.entry-content a{color:var(--red);text-decoration:underline}
.alignwide{max-width:100%}
.alignleft{float:left;margin:0 20px 12px 0}
.alignright{float:right;margin:0 0 12px 20px}
.aligncenter{margin-inline:auto;display:block}
.wp-caption-text,.wp-element-caption{font-size:13.5px;color:var(--muted);margin-top:6px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--gold);color:var(--ink);
  padding:12px 20px;font-weight:800;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ======================================================================
   Responsive — Bootstrap breakpoints (lg 992, md 768, sm 576)
   ====================================================================== */

/* nav bar collapses into the offcanvas below lg */
@media(max-width:1199.98px){
  .navrow .navlink{padding:15px 10px;font-size:13.5px}
  .mega-cols{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:991.98px){
  :root{--masthead-h:70px}
  .masthead{gap:12px;padding-block:10px}
  .logo img{height:42px}
  .pagehead{padding:34px 0 30px}
  .foot-top{padding-block:40px 30px}
  .accred .wrap{justify-content:flex-start;gap:12px 24px}
  .accred .a{font-size:13.5px}
  .crumbs .wrap{padding-block:9px}
}

@media(max-width:767.98px){
  .pad{padding:42px 0}
  .pad-sm{padding:28px 0}
  .sec-head{margin-bottom:24px}
  .wrap{padding-inline:16px}
  .masthead{min-width:0}
  .logo{flex:0 1 auto;min-width:0}
  .foot-bottom .wrap{justify-content:center;text-align:center}
  .accred .wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
  .accred .a{font-size:13.5px;gap:8px}
  .accred .ic{width:19px;height:19px}
  .pb-ribbon{font-size:13.5px;gap:8px;padding:8px 16px}
}

/* Narrow phones: the logo + hamburger + cart buttons were ~16px too wide for the
   masthead, pushing the cart icon flush to the screen edge so it and its count
   badge were clipped. Trim the logo height and gaps a touch so everything fits
   with breathing room on the right. */
@media(max-width:400px){
  .masthead{gap:9px}
  .logo img{height:36px}
  .hbtn{width:42px;height:42px}
  .header-cta{gap:9px}
  .hbtn .count{right:-5px}
}

/* Touch targets: give the thin text links in the bars and footer a real
   hit area on touch screens without changing how they look. */
@media(max-width:991.98px){
  .topbar a,.pb-ribbon a,.site-footer a,.foot-contact a,.crumbs a{
    display:inline-block;padding-block:6px}
  .foot-col li a,.foot-col .menu-item a{padding-block:9px}
  .rev-dots button{width:12px;height:12px;position:relative}
  .rev-dots button::after{content:"";position:absolute;inset:-11px}
  .hs .hs-dots button{width:14px;height:14px;position:relative}
  .hs .hs-dots button.active{width:28px}
  .hs .hs-dots button::after{content:"";position:absolute;inset:-12px}
  .rev .more{padding-block:6px}
}

@media(max-width:575.98px){
  .accred .wrap{grid-template-columns:1fr}
  /* clears the sticky call bar — this block is later in the file than the
     991px rule, so the offset has to be restated here or it wins and the
     badge sits underneath the bar */
  .gfloat{left:10px;bottom:66px;padding:7px 12px 7px 9px}
  .gfloat .gi{width:24px;height:24px}
  .gfloat .txt{font-size:11px}
  .header-cta{gap:8px}
  .pb-ribbon a{width:100%}
}

/* ======================================================= image loading === *
   .is-loading is put on an image frame by script and only when its photo has
   not arrived, so a cached page never flashes a placeholder and a page with no
   JS simply shows the images. The shimmer sits under the photo, which fades in
   over it once decoded.
   ======================================================================== */
.pimg.is-loading,.dc-img.is-loading,.cs-img.is-loading,.tdu-thumb.is-loading{position:relative;background:#e9ecef}
.pimg.is-loading::after,.dc-img.is-loading::after,
.cs-img.is-loading::after,.tdu-thumb.is-loading::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.72) 50%,transparent 100%);
  transform:translateX(-100%);animation:tdu-shimmer 1.15s ease-in-out infinite}
@keyframes tdu-shimmer{100%{transform:translateX(100%)}}
.pimg.is-loading img,.dc-img.is-loading img,
.cs-img.is-loading img,.tdu-thumb.is-loading img{opacity:0}
.pimg.is-loaded img,.dc-img.is-loaded img,
.cs-img.is-loaded img,.tdu-thumb.is-loaded img{animation:tdu-fadein .38s ease both}
@keyframes tdu-fadein{from{opacity:0}to{opacity:1}}
/* Reduced motion keeps the grey frame — it still says "something is coming" —
   but drops the sweep and the fade. */
@media(prefers-reduced-motion:reduce){
  .pimg.is-loading::after,.dc-img.is-loading::after,
  .cs-img.is-loading::after,.tdu-thumb.is-loading::after{animation:none;background:none}
  .pimg.is-loaded img,.dc-img.is-loaded img,
  .cs-img.is-loaded img,.tdu-thumb.is-loaded img{animation:none}
}

/* ====================================================== product cards ==== *
   Cards appear on the homepage, shop archives, single products (related) and
   search results. They lived in home.css and shop.css, which meant related
   products on a single product page rendered unstyled — neither sheet loads
   there. One definition in the shared layer instead of two divergent copies.
   ======================================================================== */
.prod-card{position:relative;display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:20px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(22px) saturate(185%);backdrop-filter:blur(22px) saturate(185%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 8px 32px rgba(16,24,40,.10),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .32s cubic-bezier(.2,.8,.3,1),box-shadow .32s,background .32s}
/* The whole card is a link, so the overlay has to cover it — but it used to sit
   ON TOP at z-index 4, which meant it ate the clicks meant for the buttons
   inside. Quick view opened the panel and navigated away underneath it. Raising
   the buttons cannot fix that: they live inside .pimg and .pbody, which are
   themselves stacking contexts at z-index 2, so nothing in them can climb past
   4. The overlay now sits UNDER the content and the content ignores the
   pointer, so a click anywhere plain falls through to the link while the two
   real controls take their own. */
.prod-link{position:absolute;inset:0;z-index:1}
.prod-card .pimg,.prod-card .pbody{pointer-events:none}
.prod-card .pquick,.prod-card .pcart{pointer-events:auto}
.prod-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.12) 34%,rgba(255,255,255,0) 56%);
  opacity:.85;transition:opacity .35s,transform .55s cubic-bezier(.2,.8,.3,1)}
.prod-card:hover{transform:translateY(-7px);background:rgba(255,255,255,.75);
  box-shadow:0 22px 52px rgba(16,24,40,.17),inset 0 1px 0 rgba(255,255,255,1)}
.prod-card:hover::after{opacity:1;transform:translate3d(7%,-4%,0)}
.prod-card:focus-within{outline:2px solid var(--red);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.prod-card,.prod-card::after{transition:none}}

.prod-card .pimg{position:relative;z-index:2;height:200px;overflow:hidden;background:#eceef1}
.prod-card .pimg img{width:100%;height:100%;object-fit:cover;display:block}
/* Offer tag: flush into the card's top-left corner with a rounded inner
   corner, so it reads as part of the card rather than a sticker on top. */
.prod-card .pimg .sale{position:absolute;top:0;left:0;background:var(--red);color:#fff;
  padding:6px 15px;border-radius:var(--radius) 0 15px 0;display:inline-flex;align-items:center;
  font-size:13px;font-weight:800;letter-spacing:.3px;line-height:1.2;z-index:3}
.prod-card .pimg .sale.hot{background:var(--gold);color:var(--ink)}
/* Rego promotion ribbon: top-right so it clears the sale badge on the left. */
.prod-card .pimg .rego-ribbon{position:absolute;top:0;right:0;z-index:3;display:flex;flex-direction:column;
  align-items:flex-end;gap:1px;background:var(--gold);color:var(--ink);padding:6px 12px;
  border-radius:0 var(--radius) 0 15px;line-height:1.15;text-align:right}
.prod-card .pimg .rego-ribbon b{font-size:12.5px;font-weight:900;letter-spacing:.2px;white-space:nowrap}
.prod-card .pimg .rego-ribbon i{font-size:10px;font-weight:800;font-style:normal;text-transform:uppercase;
  letter-spacing:.5px;background:var(--red);color:#fff;padding:1px 6px;border-radius:3px}
.prod-card .pimg .stockout{position:absolute;left:0;right:0;bottom:0;background:rgba(28,28,28,.86);color:#fff;
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;text-align:center;padding:5px;z-index:3}
/* Quick view. z-index 4 puts it above .prod-link, which covers the whole card
   — without that the overlay swallows the click and the card just navigates. */
.prod-card .pquick{position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);z-index:4;
  display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-family:inherit;
  background:#fff;color:var(--ink);border-radius:100px;padding:10px 18px;font-size:13.5px;font-weight:800;
  box-shadow:0 8px 22px rgba(16,24,40,.28);opacity:0;visibility:hidden;
  transition:opacity .2s,transform .2s,visibility .2s,background .16s,color .16s}
.prod-card .pquick .ic{width:16px;height:16px}
.prod-card:hover .pquick,.prod-card:focus-within .pquick{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
.prod-card .pquick:hover{background:var(--red);color:#fff}
.prod-card .pquick:focus-visible{opacity:1;visibility:visible;outline:2px solid var(--red);outline-offset:3px}
/* Touch has no hover, so it stays visible in the corner rather than never
   appearing at all. */
@media(hover:none){
  .prod-card .pquick{opacity:1;visibility:visible;left:auto;right:10px;top:auto;bottom:10px;transform:none;
    padding:8px 12px;font-size:12.5px}
  .prod-card:hover .pquick{transform:none}
}
@media(prefers-reduced-motion:reduce){.prod-card .pquick{transition:none}}

.prod-card .pbody{position:relative;z-index:2;padding:14px 16px;display:flex;flex-direction:column;flex:1}
.prod-card .cat{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--red);font-weight:800}
.prod-card h3{font-size:15px;margin:5px 0 8px;color:var(--ink);line-height:1.3}
.prod-card .aussie-build{display:inline-block;background:#e8f6ee;color:var(--ok);font-size:10.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;padding:3px 8px;border-radius:5px;margin-bottom:9px;align-self:flex-start}
.prod-card .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;
  border-top:1px solid rgba(16,24,40,.1)}
.prod-card .price{font-size:20px;color:var(--red);font-weight:800;line-height:1.2}
.prod-card .price del{color:#b5b9bf;font-size:13.5px;font-weight:600;display:block}
.prod-card .price ins{text-decoration:none}
.prod-card .foot .btn{flex:none}
/* Add to cart. The icon is 16px so the button stays the width the old View
   button was — four of these sit in a row at 1280 and the price must not wrap. */
.prod-card .pcart{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.prod-card .pcart svg{width:16px;height:16px;flex:none}
/* WooCommerce's own states: it adds .loading while the request is out and
   .added when it lands, then prints a "View cart" link we do not want in a
   card foot — the mini-cart already opens on success. */
.prod-card .pcart.loading{opacity:.65;pointer-events:none}
.prod-card .pcart.added::after{content:"✓";font-weight:800;margin-left:2px}
.prod-card .foot .added_to_cart{display:none}

.pspecs{list-style:none;display:grid;gap:4px;margin:0 0 12px;padding:0}
.pspecs li{font-size:13.5px;color:#4a4f57;line-height:1.45;display:flex;gap:7px;align-items:flex-start}
.pspecs li::before{content:"✓";color:var(--ok);font-weight:900;font-size:11px;flex:none;margin-top:1px}
.pspecs li b{color:var(--ink);font-weight:700}


/* ------------------------------------------------------------------ faq ----
   <details>/<summary> so open and close need no JavaScript, and browser
   find-in-page can reveal a closed answer. */
.faq-sec{margin-top:38px}
.faq-title{font-size:clamp(21px,2.6vw,27px);font-weight:900;margin:0 0 16px;color:var(--ink)}
.faq{display:grid;gap:12px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:15px 18px;
  box-shadow:var(--shadow)}
.faq details[open]{border-color:#d7dbe2}
.faq summary{font-weight:800;font-size:15.4px;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;gap:14px;align-items:center;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:21px;font-weight:900;line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--red)}
.faq summary:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.faq .faq-a{margin-top:11px}
.faq .faq-a p{font-size:14.5px;color:var(--muted);margin:0 0 9px}
.faq .faq-a p:last-child{margin-bottom:0}
/* Dedicated FAQ page: keep the accordion to a comfortable reading width and
   close it with a call-to-action, the way the reference FAQ page does. */
.faq-page{max-width:820px}
.faq-page .faq-sec{margin-top:6px}
.faq-page .faq-extra{margin-top:26px;color:var(--muted);font-size:14.5px}
.faq-cta,.ot-cta{margin-top:34px;padding:28px 26px;text-align:center;background:var(--card);
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.faq-cta h2,.ot-cta h2{font-size:clamp(19px,2.4vw,24px);font-weight:900;margin:0 0 6px;color:var(--ink)}
.faq-cta p,.ot-cta p{margin:0 0 16px;color:var(--muted);font-size:14.5px}
.faq-cta-btns,.ot-cta-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
/* Order tracking form — Nest-style card */
.order-tracking-page{max-width:720px}
.ot-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px 34px;
  box-shadow:var(--shadow)}
.ot-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.ot-ico{width:56px;height:56px;border-radius:12px;background:#fff5f4;color:var(--red);display:grid;
  place-items:center;flex:none}
.ot-ico svg{width:30px;height:30px}
.ot-head h2{font-size:clamp(21px,2.8vw,27px);font-weight:900;margin:0;color:var(--ink)}
.order-tracking-page .track_order p{color:var(--muted);font-size:15px;margin:0 0 22px;line-height:1.55}
.order-tracking-page .track_order .form-row{margin-bottom:18px}
.order-tracking-page .track_order label{display:block;font-weight:700;margin-bottom:8px;font-size:14px;color:var(--ink)}
.order-tracking-page .track_order input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;font-family:inherit;background:#fff}
.order-tracking-page .track_order input:focus{border-color:var(--red);outline:none;box-shadow:0 0 0 3px rgba(226,33,28,.12)}
.order-tracking-page .track_order button{width:100%;background:var(--red);color:#fff;border:0;border-radius:10px;
  padding:15px;font-weight:800;font-size:16px;cursor:pointer;margin-top:4px;transition:background .15s}
.order-tracking-page .track_order button:hover{background:var(--red-dark)}
.order-tracking-page .ot-extra{margin-top:24px;color:var(--muted);font-size:14.5px}
/* Top-bar links (Order Tracking / FAQ), like the reference top bar. */
.topbar .r .tb-link{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;
  font-weight:600;margin-right:16px;opacity:.92}
.topbar .r .tb-link:hover{opacity:1;color:var(--gold)}
.topbar .r .tb-link svg{width:15px;height:15px}

/* ---------------------------------------------------------- quick view ----
   The panel opened from a product card: image left, the essentials right. */
.qv-modal .modal-content{border:0;border-radius:var(--radius);overflow:hidden;position:relative;
  box-shadow:var(--shadow-lg)}
.qv-close{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;
  padding:0;transition:.15s}
.qv-close:hover{background:var(--red);border-color:var(--red);color:#fff}
.qv-close .ic{width:18px;height:18px}
.qv-loading{padding:60px 24px;text-align:center;color:var(--muted);font-size:15px}

.qv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
/* The media column is a column now: photo on top, thumbnails under it. Aligned
   to the start so a short photo does not float in the middle with the strip
   pushed to the floor. */
.qv-media{position:relative;background:#f5f6f8;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:22px;min-height:280px;min-width:0}
.qv-media img{max-width:100%;height:auto;display:block}
.qv-main{max-height:320px;object-fit:contain}

/* Scrolls rather than wraps — some products carry eighteen photos, and three
   rows of thumbnails would be taller than the panel they sit in. */
/* min-width:0 is what makes overflow-x work. Without it the strip's min-content
   width is the full run of thumbnails — 520px for eight — and a flex item will
   not shrink below that, so on a 374px phone modal the strip pushed the panel
   wider instead of scrolling inside it. */
.qv-thumbs{display:flex;gap:8px;width:100%;min-width:0;max-width:100%;overflow-x:auto;padding-bottom:4px;
  scrollbar-width:thin;scroll-behavior:smooth}
.qv-thumb{flex:0 0 58px;width:58px;height:58px;padding:0;border-radius:9px;overflow:hidden;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);transition:border-color .14s,transform .14s}
.qv-thumb img{width:100%;height:100%;object-fit:cover}
.qv-thumb:hover{border-color:#b9bec6;transform:translateY(-2px)}
.qv-thumb.is-active{border-color:var(--red);box-shadow:0 0 0 2px rgba(226,33,28,.18)}
.qv-thumb:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.qv-thumb{transition:none}.qv-thumbs{scroll-behavior:auto}}
.qv-off{position:absolute;top:0;left:0;background:var(--red);color:#fff;font-size:13px;font-weight:800;
  padding:6px 14px;border-radius:var(--radius) 0 14px 0}

.qv-body{padding:26px 28px 28px;display:flex;flex-direction:column;gap:12px;min-width:0}
.qv-title{font-size:clamp(19px,2.2vw,25px);font-weight:900;margin:0;padding:0;line-height:1.22}
.qv-title::after{display:none}
.qv-rating{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--muted);margin-top:-4px}
.qv-rating .gstars svg{width:15px;height:15px}
.qv-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.qv-price .price,.qv-price .woocommerce-Price-amount{font-size:26px;font-weight:900;color:var(--ink)}
.qv-price del .woocommerce-Price-amount{font-size:17px;color:var(--muted);font-weight:600}
.qv-made{font-style:normal;background:#e8f6ee;color:var(--ok);font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.4px;border-radius:5px;padding:4px 9px}
.qv-desc{font-size:14.5px;color:#4a5058;line-height:1.6;margin:0}

.qv-specs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px}
.qv-specs li{display:flex;flex-direction:column;background:#f5f6f8;border-radius:9px;padding:9px 12px}
.qv-specs span{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700}
.qv-specs b{font-size:14px;color:var(--ink);font-weight:800;margin-top:2px}

.qv-stock{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;margin:0}
.qv-stock .ic{width:17px;height:17px;flex:none}
.qv-stock.in{color:var(--ok)}
.qv-stock.out{color:var(--red)}

.qv-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.qv-actions .btn{flex:1 1 auto;justify-content:center}
.qv-cart{flex:1 1 auto;margin:0}
/* WooCommerce marks the anchor while its request is in flight, then appends
   its own "View cart" link after it. */
.qv-cart.loading{opacity:.65;pointer-events:none}
.qv-actions .added_to_cart{flex:1 1 100%;font-size:14px;font-weight:800;color:var(--red);
  text-decoration:underline;text-underline-offset:2px;text-align:center}
.qv-call{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--muted)}
.qv-call:hover{color:var(--red)}
.qv-call .ic{width:16px;height:16px}

@media(max-width:767.98px){
  .qv{grid-template-columns:1fr}
  .qv-media{min-height:220px;padding:16px}
  .qv-body{padding:20px 20px 24px}
  .qv-specs{grid-template-columns:1fr}
}

/* ------------------------------------------------ "own your trailer" ----
   Palette from the design: #FFC107 / #FFD54F gold, #0F1115 ground,
   #1A1D23 and #23262E panels, #8C9098 body copy.
   Two cards — the four steps with the pitch beside them, and a bar of five
   assurances beneath. */
.ownband{position:relative;background:#0f1115;padding-block:40px 44px;color:#fff;overflow:hidden;isolation:isolate}
/* Warm light for the glass to pick up, kept to the right where the trailer is
   lit. In the design the rest of the panel is near-black: the gold belongs to
   the rim, the circles, the rail and the type, not washed across the face. */
.ownband::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(540px 300px at 89% 44%,rgba(255,193,7,.18),transparent 62%),
    radial-gradient(320px 190px at 97% 86%,rgba(255,168,14,.09),transparent 66%)}
/* Fine grain over the light — glass reads as glass partly because what sits
   behind it is not perfectly smooth. */
.ownband::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
.ownband .wrap{position:relative;display:grid;gap:18px}

/* Glass: translucent, blurred, with a rim rather than a flat border.
   The fill has to stay well under half opacity or the blur has nothing to
   show — at .72 the card was a solid panel wearing a gold edge. */
.ob-card,.ob-marks{position:relative;border-radius:20px;
  background:linear-gradient(145deg,rgba(38,42,50,.34),rgba(12,14,17,.66));
  -webkit-backdrop-filter:blur(22px) saturate(150%);backdrop-filter:blur(22px) saturate(150%);
  box-shadow:0 18px 46px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10)}
/* A 1px ring painted with a gradient and masked hollow — brightest gold at the
   top-left, thinning round the card. A plain border cannot do this. */
.ob-card::before,.ob-marks::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;z-index:3;
  background:linear-gradient(145deg,rgba(255,213,79,.9),rgba(255,193,7,.34) 34%,
    rgba(255,193,7,.12) 62%,rgba(255,213,79,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude}

.ob-card{display:grid;grid-template-columns:minmax(262px,322px) 1fr;gap:0;overflow:hidden}
/* Sheen across the top of the glass. */
.ob-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:linear-gradient(155deg,rgba(255,255,255,.06),transparent 40%)}

/* Trailer photo closing the card, lit rather than dimmed to grey — the gold in
   the artwork is what ties it to the rail. */
.ob-card{--ob-shot-w:min(25%,400px)}
.ob-shot{position:absolute;top:0;right:0;bottom:0;width:var(--ob-shot-w);z-index:1;pointer-events:none;
  background-image:var(--ob-shot);background-size:196% auto;background-position:66% 100%;
  background-repeat:no-repeat;opacity:.92;
  /* Pulled well down: in the design the trailer sits in shadow with only the
     gold rim light on it, where the source artwork is lit for a banner. */
  filter:brightness(.58) contrast(1.12) saturate(.95);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%);
  mask-image:linear-gradient(90deg,transparent,#000 38%)}
/* The photo sits beside the steps, not over them, so the rail gives up exactly
   the width the photo occupies. */
.ob-card:has(.ob-shot) .ob-road{--ob-pr:calc(var(--ob-shot-w) + 38px)}

/* pitch */
/* No tint of its own — in the design the pitch shares the card's surface and
   only the divider separates it. */
.ob-copy{position:relative;z-index:2;padding:30px 28px;
  display:flex;flex-direction:column;justify-content:center;gap:14px}
/* Gold divider that fades out at both ends rather than butting the edges. */
.ob-copy::after{content:"";position:absolute;top:14px;bottom:14px;right:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,193,7,.5) 22%,rgba(255,193,7,.5) 78%,transparent)}
.ob-eyebrow{align-self:flex-start;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:1.1px;
  color:#ffc107;border:1px solid rgba(255,193,7,.5);border-radius:6px;padding:5px 11px;background:rgba(255,193,7,.08)}
.ob-copy h2{margin:0;padding:0;font-size:clamp(28px,2.9vw,41px);font-weight:900;line-height:1.02;
  text-transform:uppercase;letter-spacing:-.5px}
.ob-copy h2::after{display:none}
.ob-copy h2 .l1{display:block;color:#fff}
.ob-copy h2 .l2{display:block;color:#ffc107}
.ob-copy p{margin:0;color:#8c9098;font-size:14.5px;line-height:1.55}
.ob-copy p b{color:#fff;font-weight:800}
.ob-btn{align-self:flex-start;display:inline-flex;align-items:center;gap:16px;background:#ffc107;color:#0f1115;
  border-radius:9px;padding:13px 24px;font-weight:900;font-size:15.5px;
  box-shadow:0 0 20px rgba(255,193,7,.35);transition:.16s}
.ob-btn:hover{background:#ffd54f;color:#0f1115;box-shadow:0 0 28px rgba(255,193,7,.55)}
/* A bare arrow, as in the design — no disc behind it. */
.ob-arrow{font-size:20px;line-height:1;font-weight:400;transition:transform .16s}
.ob-btn:hover .ob-arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.ob-arrow,.ob-btn:hover .ob-arrow{transition:none;transform:none}}

/* steps */
/* The paddings are tokens because the rail's ends are derived from them; the
   right one grows to clear the trailer photo, and the rail has to follow. */
.ob-road{--ob-pl:26px;--ob-pr:26px;--ob-gap:14px;
  --ob-col:calc((100% - var(--ob-pl) - var(--ob-pr) - (var(--ob-steps,4) - 1) * var(--ob-gap)) / var(--ob-steps,4));
  position:relative;z-index:1;list-style:none;margin:0;
  padding:34px var(--ob-pr) 30px var(--ob-pl);
  display:grid;grid-template-columns:repeat(var(--ob-steps,4),1fr);gap:var(--ob-gap)}
/* One rail behind the row: a dim track with a lit line drawn over it. It runs
   from the first circle's centre to the last one's — half a column in from each
   end — so it stops at step four rather than carrying on under the photo. */
.ob-road::before,.ob-road::after{content:"";position:absolute;top:calc(34px + 31px + 10px + 46px);height:2px;
  left:calc(var(--ob-pl) + var(--ob-col) / 2);
  right:calc(var(--ob-pr) + var(--ob-col) / 2)}
.ob-road::before{background:rgba(255,193,7,.22)}
.ob-road::after{background:#ffc107;box-shadow:0 0 12px rgba(255,193,7,.9);
  transform-origin:left center;transform:scaleX(0);
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1) .15s}
.ob-road.in::after{transform:scaleX(1)}
/* Shares the scroll observer only for `in`; the generic reveal slide would
   drag the whole rail sideways across its own animation. */
.ob-road.reveal{opacity:1;translate:none;transition:none}

.ob-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
  transition-delay:calc(var(--ob-i,0) * 150ms + .3s)}
.ob-road.in .ob-step{opacity:1;transform:none}

/* Number in a pin above the circle, as in the design. */
.ob-num{position:relative;z-index:2;font-size:13px;font-weight:900;color:#ffc107;letter-spacing:.5px;
  background:#1a1d23;border:1.5px solid rgba(255,193,7,.7);border-radius:8px;padding:4px 10px;
  box-shadow:0 0 14px rgba(255,193,7,.25)}
.ob-num::after{content:"";position:absolute;left:50%;bottom:-5px;width:8px;height:8px;background:#1a1d23;
  border-right:1.5px solid rgba(255,193,7,.7);border-bottom:1.5px solid rgba(255,193,7,.7);
  transform:translateX(-50%) rotate(45deg)}

.ob-dot{margin-top:10px;width:92px;height:92px;border-radius:50%;background:#0f1115;
  border:2px solid #ffc107;display:grid;place-items:center;position:relative;z-index:1;flex:none;
  box-shadow:0 0 0 6px rgba(255,193,7,.06),0 0 30px rgba(255,193,7,.42);transition:.25s}
.ob-step:hover .ob-dot{box-shadow:0 0 0 8px rgba(255,193,7,.12),0 0 38px rgba(255,193,7,.7)}
.ob-dot .ic{width:44px;height:44px;color:#fff;stroke-width:1.5}

/* Centred on the rail midway to the next circle: this step's right edge plus
   half the grid gap. Vertically it tracks the circle's centre — the number pin
   above it, the dot's own margin, then half the 76px dot. */
.ob-chev{position:absolute;left:calc(100% + 7px);top:calc(31px + 10px + 46px);
  transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:50%;background:#0f1115;border:1.5px solid rgba(255,193,7,.75);
  display:grid;place-items:center;color:#ffc107;z-index:2}
.ob-chev .ic{width:13px;height:13px;stroke-width:2.4}

.ob-title{display:block;font-size:17px;font-weight:900;color:#ffc107;margin-top:16px;line-height:1.25}
.ob-text{display:block;font-size:15px;color:#8c9098;line-height:1.45;margin-top:5px;max-width:19ch}

/* assurance bar */
.ob-marks{list-style:none;margin:0;padding:18px 10px;display:grid;grid-template-columns:repeat(5,1fr)}
.ob-marks li{position:relative;display:flex;align-items:center;gap:13px;padding:4px 18px}
/* Same fading rule as the card's divider, so the bar reads as one panel. */
.ob-marks li::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.14),transparent)}
.ob-marks li:first-child::before{display:none}
.obm-ic{flex:none;color:#ffc107;display:grid;place-items:center}
.obm-ic .ic{width:40px;height:40px;stroke-width:1.5;filter:drop-shadow(0 0 7px rgba(255,193,7,.4))}
/* The coastline's notches are only about a unit deep, so at 1.5 the stroke
   closes them and the map reads as a blob. Thinner, and the shape survives. */
.obm-ic .ic-aus{stroke-width:.95;stroke-linejoin:round}
.obm-txt{min-width:0}
.obm-txt b{display:block;font-size:15px;font-weight:800;color:#fff;line-height:1.25}
.obm-txt small{display:block;font-size:13px;color:#8c9098;margin-top:2px;line-height:1.4}

@media(max-width:1199.98px){
  .ob-card{grid-template-columns:1fr}
  .ob-copy{text-align:center;align-items:center}
  .ob-copy::after{top:auto;bottom:0;left:14px;right:14px;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,193,7,.5) 22%,rgba(255,193,7,.5) 78%,transparent)}
  .ob-eyebrow,.ob-btn{align-self:center}
  .ob-shot{display:none}
  /* The rail reserves a right gutter the width of the photo. With the photo
     hidden that gutter is dead space — 124px of a 375px phone, which is what
     was squeezing the steps into 94px columns. Same specificity as the rule
     that sets it, or it does not win. */
  .ob-card:has(.ob-shot) .ob-road{--ob-pr:18px}
  .ob-marks{grid-template-columns:repeat(3,1fr);gap:14px 0}
  .ob-marks li:nth-child(3n+1)::before{display:none}
}
@media(max-width:767.98px){
  .ob-road{grid-template-columns:repeat(2,1fr);gap:30px 14px;--ob-pl:18px;--ob-pr:18px;padding-block:26px}
  /* The rail and its chevrons only read as one journey in an unbroken row. */
  .ob-road::before,.ob-road::after,.ob-chev{display:none}
  .ob-marks{grid-template-columns:repeat(2,1fr)}
  .ob-marks li::before{display:none}
}
@media(max-width:479.98px){
  /* Two columns leave each step 94px on a 375px phone, which wrapped every
     title onto two lines and the descriptions onto four. One column per step,
     circle beside the words instead of above them, gives each the full width. */
  .ob-road{grid-template-columns:1fr;gap:18px;--ob-pl:16px;--ob-pr:16px}
  .ob-step{display:grid;grid-template-columns:64px minmax(0,1fr);
    grid-template-areas:"dot title" "dot text";
    column-gap:16px;row-gap:2px;align-items:center;text-align:left}
  .ob-num{display:none}
  .ob-dot{grid-area:dot;width:64px;height:64px;margin-top:0;align-self:center}
  .ob-dot .ic{width:28px;height:28px}
  .ob-title{grid-area:title;align-self:end}
  .ob-text{grid-area:text;align-self:start}
  .ob-marks{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .ob-step{opacity:1;transform:none;transition:none}
  .ob-road::after{transform:scaleX(1);transition:none}
}

/* Toast + validation-error blink — global so cart & checkout show them too
   (product.css also defines .tdu-toast for product pages; identical rules). */
.tdu-toast{position:fixed;left:50%;bottom:78px;transform:translate(-50%,16px);z-index:99999;
  max-width:min(92vw,420px);background:#1f2937;color:#fff;font-size:13.5px;font-weight:600;line-height:1.4;
  padding:12px 16px;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.28);opacity:0;
  transition:opacity .28s,transform .28s;pointer-events:none;text-align:center}
.tdu-toast.is-in{opacity:1;transform:translate(-50%,0)}
.tdu-notice-blink{animation:tdu-notice-blink .55s ease-in-out 3}
@keyframes tdu-notice-blink{0%,100%{box-shadow:0 0 0 0 rgba(214,0,0,0)}40%{box-shadow:0 0 0 4px rgba(214,0,0,.5)}}

/* Trailers for Sale — category tiles, same glass/tint design as the homepage
   "Shop by Category" strip, but laid out in a grid and a little bigger. */
.tfs-section{background:#fff}
.tfs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.tfs-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;
  padding:22px 16px 18px;border-radius:16px;color:inherit;text-decoration:none;
  border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 2px 10px rgba(16,24,40,.06);transition:transform .2s,box-shadow .2s,border-color .2s}
.tfs-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(16,24,40,.16);border-color:rgba(255,255,255,.95)}
.tfs-card.t0{background:rgba(255,194,14,.16)}
.tfs-card.t1{background:rgba(226,33,28,.10)}
.tfs-card.t2{background:rgba(28,28,28,.07)}
.tfs-card.t3{background:rgba(255,194,14,.10)}
.tfs-card.t4{background:rgba(226,33,28,.15)}
.tfs-card.t5{background:rgba(255,255,255,.55)}
.tfs-img{display:grid;place-items:center;width:100%;height:150px;margin-bottom:12px}
.tfs-img img{max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(16,24,40,.22));transition:transform .28s}
.tfs-card:hover .tfs-img img{transform:scale(1.09)}
.tfs-body{display:flex;flex-direction:column;align-items:center;gap:3px}
.tfs-name{font-size:17px;font-weight:800;color:var(--ink);line-height:1.2}
.tfs-card:hover .tfs-name{color:var(--red)}
.tfs-count{font-size:13px;color:var(--muted);font-weight:600}
.tfs-cta{text-align:center;margin-top:34px}
@media(max-width:600px){.tfs-grid{grid-template-columns:1fr 1fr;gap:12px}.tfs-img{height:110px}.tfs-img img{max-height:110px}.tfs-name{font-size:15px}}

/* Pickup-later notice — product page + checkout (Google pickup-later setup) */
.pickup-later{background:rgba(255,194,14,.10);border:1px solid rgba(255,194,14,.55);border-radius:12px;padding:14px 16px;margin:0 0 16px}
.pickup-later .pl-head{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink);font-size:15px}
.pickup-later .pl-head svg{width:18px;height:18px;flex:none}
.pickup-later p{margin:8px 0 0;font-size:14px;line-height:1.5;color:#3a3f47}
.pickup-later .pl-eta strong{color:var(--red)}
.pickup-later .pl-note{color:#6c727d;font-size:12.5px}
/* "Call our yard … to check availability" — highlighted in-stock line. */
.pickup-later .pl-avail{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;
	border-top:1px solid rgba(255,194,14,.45);font-size:14px;font-weight:800;color:var(--ok,#1f9d55)}
.pickup-later .pl-avail .dot{width:9px;height:9px;border-radius:50%;background:var(--ok,#1f9d55);
	box-shadow:0 0 0 3px rgba(31,157,85,.18);flex:none}
.pickup-later .pl-avail a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.oos-notice{background:rgba(226,33,28,.07);border:1px solid rgba(226,33,28,.45);border-radius:12px;padding:14px 16px;margin:0 0 16px}
.oos-notice .oos-head{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px;color:var(--red);text-transform:uppercase;letter-spacing:.5px}
.oos-notice .oos-head::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px rgba(226,33,28,.18);flex:none}
.oos-notice p{margin:8px 0 0;font-size:14px;line-height:1.5;color:#3a3f47}
.oos-ribbon{position:absolute;top:10px;left:10px;z-index:3;background:#2b2f36;color:#fff;font-weight:800;font-size:11px;letter-spacing:.5px;text-transform:uppercase;padding:5px 10px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.tdu-pickup-checkout{background:#fbfbfc;border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:14px 16px;margin:0 0 18px}
.tdu-pickup-checkout h3{margin:0 0 8px;font-size:15px}
.tdu-pickup-checkout .pc-method{display:flex;align-items:center;gap:8px;font-weight:700;margin:0 0 8px;color:var(--ink)}
.tdu-pickup-checkout .pc-dot{width:11px;height:11px;border-radius:50%;border:3px solid var(--red);flex:none}
.tdu-pickup-checkout .pc-list{list-style:none;margin:0;padding:0;font-size:14px;color:#3a3f47}
.tdu-pickup-checkout .pc-list li{margin:3px 0}
.tdu-pickup-checkout .pc-note{margin:8px 0 0;font-size:12.5px;color:#6c727d}