/* ==========================================================================
   Homepage
   ========================================================================== */

/* ------------------------------------------------------------ hero slider - */
/* 56.25vw is exactly 9/16 of the viewport, so the 1672x941 artwork is shown
   whole rather than cropped. The 700px cap is what stops the slide copy —
   386px of it — floating in the middle of a much taller box: at 820 that left
   a 217px dead band above and below the headline. */
.hs{position:relative;height:clamp(420px,56.25vw,700px);overflow:hidden;background:#141414}
.hs .carousel-inner,.hs .carousel-item{height:100%}

/* Box transition ---------------------------------------------------------
   The slides no longer travel sideways. A grid of tiles scatters in over the
   hero, the slide is swapped underneath while it is hidden, and the tiles
   scatter back out — so the picture appears to break apart and reassemble.

   carousel-fade stacks the items instead of laying them side by side, and the
   swap itself is cut to 1ms because it happens behind the tiles: a crossfade
   under an opaque cover is work nobody can see. */
.hs.carousel-fade .carousel-item{transition:opacity .001s linear}

.hs-tiles{position:absolute;inset:0;z-index:8;display:grid;pointer-events:none}
.hs-tile{background:#14161b;opacity:0;transform:scale(.82);will-change:opacity,transform;
  transition:opacity .3s ease,transform .3s ease}
.hs-tiles.is-covering .hs-tile{opacity:1;transform:scale(1)}

/* Held still for anyone who asked for that; the carousel just crossfades. */
@media(prefers-reduced-motion:reduce){
  .hs-tiles{display:none}
  .hs.carousel-fade .carousel-item{transition:opacity .4s ease}
}
.hs-slide{position:relative}
.hs-slide .sbg{position:absolute;inset:0;background-size:cover;background-position:center}
/* Full designed banner: show the whole uploaded image (no crop), hide the text
   overlay. Works on desktop, tablet and mobile from a single upload. */
.hs-slide.hs-full{background:#141414}
.hs-slide.hs-full .sbg{background-size:contain;background-repeat:no-repeat;background-position:center}
.hs-slide.hs-full .sbg::after{content:none;display:none}
.hs-slide.hs-full .copy,.hs-slide.hs-full .trailer{display:none}
/* Auto-fit: the banner takes the image's own shape (exact aspect set inline in
   hero.php), so a full designed image fills it edge-to-edge — no dark bars, no
   crop — on desktop, tablet and mobile. */
.hs.hs-auto{height:auto;aspect-ratio:16/9;max-height:90vh}
.hs.hs-auto .hs-slide.hs-full .sbg{background-size:cover;background-repeat:no-repeat}
.hs-in{position:relative;z-index:3;height:100%;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px;
  display:flex;flex-direction:column;justify-content:center}
.hs-cta{display:flex;gap:14px;flex-wrap:wrap}

/* slide 1 — free spare wheel (trailer sits right, copy goes left) */
.hs-free .sbg{background-position:center 60%}
.hs-free .sbg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.42) 42%,transparent 64%)}
.hs-free .copy{max-width:600px}
/* Sized to sit alongside the other two slides — at 34px this one read as a
   caption next to their 58 and 74px headlines. */
.hs-free h2{color:#fff;font-size:clamp(26px,3.8vw,52px);font-weight:900;text-transform:uppercase;line-height:1.12;
  margin-bottom:16px;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.hs-free .gold{color:#fc0;font-size:clamp(18px,2.8vw,38px);font-weight:900;text-transform:uppercase;line-height:1.2;margin-bottom:26px}
.hs-free .fine{color:#d6d6d6;font-size:11px;letter-spacing:1px;margin-top:16px}

/* slide 2 — toolboxes (product sits left on white, copy goes right) */
.hs-tool .sbg{background-position:center 42%}
.hs-tool .sbg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(270deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.34) 38%,transparent 60%)}
.hs-tool .hs-in{align-items:flex-end;text-align:right}
.hs-tool .copy{max-width:660px}
.hs-tool h2{color:#353535;font-size:clamp(24px,4.6vw,58px);font-weight:800;line-height:1.05;margin-bottom:12px}
/* This slide carried three different reds — #f00 here, #ff3a2d on the button,
   #e02b1f on its hover — and none of them was the brand red. All three are the
   token now, so the slide matches the logo, the masthead and every other
   button on the site.

   It also fixed a contrast bug: white on #ff3a2d measured 3.56:1, under the
   4.5:1 that 16px text needs, while the hover state passed at 4.63 — so the
   button was legible only once you were already pointing at it. On --red it is
   4.70 at rest and 6.61 on hover. */
.hs-tool .red{color:var(--red);font-size:clamp(19px,3.4vw,44px);font-weight:800;line-height:1.2;margin-bottom:26px}
.hs-tool .btn-pill{background:var(--red);color:#fff;border-radius:30px;padding:13px 35px;font-size:16px;letter-spacing:1px;
  text-transform:uppercase;font-weight:700;display:inline-flex;gap:9px;align-items:center;border:none;cursor:pointer;
  font-family:inherit;transition:.16s}
.hs-tool .btn-pill:hover{background:var(--red-dark);color:#fff}

/* slide 3 — trusted by industry experts */
.hs-trust .sbg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,10,.88) 0%,rgba(10,10,10,.45) 54%,transparent 80%)}
/* Anchored to the content column, not the viewport edge, and sized from the
   same wrap the copy uses — so the trailer keeps its distance from the text at
   every width instead of drifting away as the screen grows. Pinned at right:-50
   with a fixed 780px cap it left a 370px hole at 1920 and 690px at 2560: the
   copy stayed centred while the picture ran for the corner. 100% rather than
   100vw because vw counts the scrollbar and this does not. */
.hs-trust .trailer{position:absolute;bottom:6px;z-index:2;pointer-events:none;
  right:max(-50px, calc((100% - var(--wrap)) / 2 - 70px));
  width:min(calc(var(--wrap) * .56), 46%)}
/* Narrower screens give the copy no more room but leave the picture less, so
   the trailer takes a smaller share to stay clear of the feature row. Half a
   wrap at 1366 would put its nose under "MADE IN AUSTRALIA", and white text
   over a silver trailer is not readable. */
@media(max-width:1599.98px){
  .hs-trust .trailer{width:min(calc(var(--wrap) * .44), 46%)}
}
.hs-trust .copy{max-width:620px}
.hs-trust .big{color:#fc0;font-size:clamp(34px,6vw,74px);font-weight:800;line-height:.95;letter-spacing:-1.5px;text-transform:uppercase}
.hs-trust .sub{color:#fff;font-size:clamp(16px,2.4vw,29px);font-weight:700;text-transform:uppercase;line-height:1.15;margin-bottom:14px}
.hs-trust .lead{color:#d3d6d9;font-size:clamp(13px,1.4vw,16px);line-height:1.5;margin-bottom:24px;max-width:510px}
.hs-feats{display:flex}
/* Slide 3 "Browse Trailers" CTA — only on phones, where the feature stats are
   hidden, so the slide has the same call-to-action balance as slide 1. */
.hs-trust-cta{display:none;margin:6px 0 2px}
.hs-feat{padding:0 22px;border-left:1px solid rgba(255,255,255,.22)}
.hs-feat:first-child{padding-left:0;border-left:none}
.hs-feat .l{color:#fff;font-size:14px;letter-spacing:.4px;text-transform:uppercase}
.hs-feat .v{color:#fc0;font-size:19px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;margin:2px 0 4px}
.hs-feat .d{color:#c6c9cd;font-size:13.5px;line-height:1.45;text-transform:uppercase}

/* controls — Bootstrap's carousel classes restyled to the design's round buttons */
.hs .hs-nav{position:absolute;top:50%;bottom:auto;transform:translateY(-50%);z-index:10;width:46px;height:46px;
  border-radius:50%;border:none;background:rgba(0,0,0,.42);cursor:pointer;display:grid;place-items:center;padding:0;
  opacity:1;transition:.18s}
.hs .hs-nav:hover{background:var(--red);opacity:1}
.hs .hs-nav.prev{left:18px}
.hs .hs-nav.next{right:18px}
.hs .hs-nav svg{width:20px;height:20px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hs .hs-dots{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:10;display:flex;gap:9px;
  margin:0;right:auto;width:auto}
.hs .hs-dots button{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:transparent;
  cursor:pointer;padding:0;transition:.18s;opacity:1;text-indent:0;margin:0}
.hs .hs-dots button.active{background:var(--gold);border-color:var(--gold);width:26px;border-radius:6px}

/* slide 2 is light — flip the controls so they stay visible */
.hs:has(.hs-tool.active) .hs-nav{background:rgba(0,0,0,.14)}
.hs:has(.hs-tool.active) .hs-nav svg{stroke:#353535}
.hs:has(.hs-tool.active) .hs-nav:hover{background:var(--red)}
.hs:has(.hs-tool.active) .hs-nav:hover svg{stroke:#fff}
.hs:has(.hs-tool.active) .hs-dots button{border-color:rgba(53,53,53,.6)}
.hs:has(.hs-tool.active) .hs-dots button.active{background:var(--red);border-color:var(--red)}

/* ---------------------- admin-managed slides (Hero Slides post type) ------ */
/* One generic layout that has to look right with whatever photo is uploaded,
   hence the alignment and tone switches rather than per-slide styling. */
.hs-custom .sbg::after{content:"";position:absolute;inset:0}
.hs-custom.tone-dark .sbg::after{background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 46%,rgba(0,0,0,.12) 100%)}
.hs-custom.tone-light .sbg::after{background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.15) 100%)}
.hs-custom.is-right.tone-dark .sbg::after{background:linear-gradient(270deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 46%,rgba(0,0,0,.12) 100%)}
.hs-custom.is-right.tone-light .sbg::after{background:linear-gradient(270deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.15) 100%)}
.hs-custom.is-center .sbg::after{background:rgba(0,0,0,.5)}
.hs-custom.is-center.tone-light .sbg::after{background:rgba(255,255,255,.62)}

.hs-custom .copy{max-width:620px}
.hs-custom.is-right .hs-in{align-items:flex-end;text-align:right}
.hs-custom.is-center .hs-in{align-items:center;text-align:center}
.hs-custom.is-center .copy{max-width:760px}
.hs-custom h2{font-size:clamp(22px,3.4vw,44px);font-weight:900;line-height:1.12;text-transform:uppercase;margin-bottom:12px}
.hs-custom .sub{font-size:clamp(15px,2vw,26px);font-weight:900;line-height:1.25;margin-bottom:18px}
.hs-custom .lead{font-size:clamp(13px,1.4vw,16px);line-height:1.55;margin-bottom:22px}
.hs-custom .lead p{margin-bottom:8px}
.hs-custom .fine{font-size:11px;letter-spacing:1px;margin-top:16px}

.hs-custom.tone-dark h2{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.hs-custom.tone-dark .sub{color:var(--gold)}
.hs-custom.tone-dark .lead{color:#d8dbde}
.hs-custom.tone-dark .fine{color:#c9ccd0}
.hs-custom.tone-light h2{color:var(--ink)}
.hs-custom.tone-light .sub{color:var(--red)}
.hs-custom.tone-light .lead{color:#3b4046}
.hs-custom.tone-light .fine{color:#5a6069}
/* the ghost button is white-on-dark by default — flip it on pale photos */
.hs-custom.tone-light .btn-ghost{color:var(--ink);border-color:rgba(16,24,40,.45)}
.hs-custom.tone-light .btn-ghost:hover{background:rgba(16,24,40,.08);color:var(--ink)}

/* ------------------------------------------------------- category strip ----
   A scrolling row of glass tiles. The section carries a soft wash because
   frosted glass over flat #f5f6f8 has nothing to refract and reads as grey. */
.catstrip{position:relative;isolation:isolate}
.catstrip::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(760px 300px at 8% 0%,rgba(255,194,14,.20),transparent 60%),
    radial-gradient(680px 320px at 92% 100%,rgba(226,33,28,.13),transparent 62%)}

.cs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.cs-head .sec-head{margin:0}
.cs-nav{display:flex;gap:8px;flex:none;padding-bottom:4px}
.cs-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(16,24,40,.12);cursor:pointer;
  background:rgba(255,255,255,.65);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;color:var(--ink);transition:.18s}
.cs-arrow:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.cs-arrow:disabled{opacity:.35;cursor:default}
.cs-arrow .ic{width:19px;height:19px}

.cs-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(148px,1fr);gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:6px;scrollbar-width:none}
.cs-track::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:reduce){.cs-track{scroll-behavior:auto}}

.cs-tile{scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;
  padding:18px 12px 15px;border-radius:16px;color:inherit;
  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}
.cs-tile:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(16,24,40,.16);
  border-color:rgba(255,255,255,.95);color:inherit}
.cs-tile:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* Tinted glass — the wash above shows through each panel differently. */
.cs-tile.t0{background:rgba(255,194,14,.16)}
.cs-tile.t1{background:rgba(226,33,28,.10)}
.cs-tile.t2{background:rgba(28,28,28,.07)}
.cs-tile.t3{background:rgba(255,194,14,.10)}
.cs-tile.t4{background:rgba(226,33,28,.15)}
.cs-tile.t5{background:rgba(255,255,255,.55)}

.cs-img{display:grid;place-items:center;width:100%;height:88px;margin-bottom:10px}
.cs-img img{max-width:100%;max-height:88px;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 5px 10px rgba(16,24,40,.22));transition:transform .25s}
.cs-tile:hover .cs-img img{transform:scale(1.07)}
/* Two lines reserved whether the name needs them or not, so the count sits on
   the same line in every tile instead of stepping down under longer names. */
.cs-name{font-size:14px;font-weight:800;color:var(--ink);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.25em)}
.cs-tile:hover .cs-name{color:var(--red)}
.cs-count{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:auto;padding-top:3px}

@media(max-width:575.98px){
  .cs-head{flex-direction:column;align-items:flex-start;gap:12px}
  .cs-track{grid-auto-columns:minmax(132px,1fr);gap:11px}
  .cs-img{height:70px}
  .cs-img img{max-height:70px}
}

/* ===== liquid glass product cards ===== */
/* colour wash behind the grid — glass over flat #f5f6f8 would read as nothing */
#sellers{position:relative;isolation:isolate}
#sellers::before{content:"";position:absolute;inset:-40px 0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(560px 340px at 10% 14%,rgba(226,33,28,.15),transparent 62%),
    radial-gradient(600px 360px at 90% 22%,rgba(255,194,14,.24),transparent 64%),
    radial-gradient(520px 320px at 46% 96%,rgba(52,86,178,.12),transparent 62%)}

/* --------------------------------------------------- full product details -- */
/* Carousel of detail panels. Arrows sit outside the card where there is room
   and tuck onto it when there is not. */
.pd-car{position:relative}
.pd-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;
  padding:0;box-shadow:var(--shadow);transition:.16s}
.pd-nav:hover{background:var(--red);border-color:var(--red);color:#fff}
.pd-nav .ic{width:20px;height:20px}
.pd-nav.prev{left:-23px}
.pd-nav.next{right:-23px}
.pd-dots{position:static;margin:18px 0 0;display:flex;justify-content:center;gap:9px}
.pd-dots button{width:10px;height:10px;border-radius:50%;border:2px solid var(--line);background:#fff;
  opacity:1;text-indent:0;margin:0;padding:0;transition:.16s}
.pd-dots button.active{background:var(--red);border-color:var(--red);width:26px;border-radius:6px}
@media(max-width:1399.98px){
  .pd-nav.prev{left:8px}
  .pd-nav.next{right:8px}
}

.pd{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.pd-media{position:relative;background:#eceef1;min-height:320px}
.pd-media img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.pd-media .stamp{position:absolute;top:14px;left:14px;display:flex;gap:8px;flex-wrap:wrap;z-index:2}
.pd-media .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff;padding:30px 20px 16px;font-size:13.5px;margin:0}
.pd-body{padding:30px 34px 32px}
.pd-body h2{font-size:clamp(19px,2.2vw,26px);margin:6px 0 10px}
.pd-price{font-size:32px;color:var(--red);font-weight:800;line-height:1.1;margin-bottom:6px}
.pd-price del{color:#b0b0b0;font-size:16px;font-weight:600;margin-right:8px}
.pd-price ins{text-decoration:none}
.pd-finance{font-size:13.5px;color:var(--muted);margin-bottom:18px}

.pd-tabs{display:flex;gap:2px;border-bottom:2px solid var(--line);margin-bottom:18px;flex-wrap:wrap;padding:0;list-style:none}
.pd-tabs button{background:none;border:none;font-family:inherit;font-weight:800;font-size:14px;color:var(--muted);
  padding:10px 14px;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:.15s}
.pd-tabs button:hover{color:var(--ink)}
.pd-tabs button.active,.pd-tabs button.on{color:var(--red);border-bottom-color:var(--red)}
.pd-pane{font-size:14.5px;color:#41464e}
.pd-pane p{margin-bottom:12px}
.pd-pane p:last-child{margin-bottom:0}
.pd-pane strong{color:var(--ink)}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec-table{width:100%;border-collapse:collapse;font-size:14px}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table tr:last-child{border-bottom:none}
.spec-table th{text-align:left;padding:9px 14px 9px 0;color:var(--muted);font-weight:700;width:43%;vertical-align:top}
.spec-table td{padding:9px 0;color:var(--ink);font-weight:600}

.inc-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:9px 20px;margin:0;padding:0}
.inc-list li{font-size:14px;display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.inc-list li::before{content:"✓";color:var(--ok);font-weight:900;flex:none}

.pd-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.pd-meta{font-size:13.5px;color:var(--muted);margin-top:14px;line-height:1.6}

/* ------------------------------------------------- the range, and contact -- */
.range{background:#fff;border-block:1px solid var(--line);padding:52px 0 56px;margin-bottom:58px}
.range .sec-head{margin-bottom:26px}
.range .sec-head p{max-width:var(--prose)}

/* The thirteen types, as links. On the old site this was a comma-run sentence
   with nothing clickable in it — a lot of buying intent going nowhere. */
.range-types{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px;padding:0}
.range-types a{display:inline-flex;align-items:center;font-size:14px;font-weight:700;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 16px;
  text-decoration:none;transition:background .16s,border-color .16s,color .16s}
.range-types a:hover,.range-types a:focus-visible{background:var(--gold);border-color:var(--gold);color:var(--ink)}

.range-custom{font-size:15.5px;color:var(--text);line-height:1.65;max-width:var(--prose);
  margin:0 0 26px;padding-left:15px;border-left:3px solid var(--gold)}
.range-custom b{color:var(--ink)}

.range-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

@media(max-width:991.98px){
  .range{padding:40px 0 44px;margin-bottom:42px}
}
@media(max-width:575.98px){
  .range-types{gap:8px}
  .range-types a{font-size:13px;padding:7px 13px}
}

/* --------------------------------------------------------------- reviews -- */
.rev-car{position:relative}
/* the padding/negative-margin pair stops the cards' hover lift+shadow being clipped by the scroller */
/* No gap: the panels sit flush so their hairlines read as dividers, and the
   whole row is framed as one card. */
.rev-track{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 1px 3px rgba(16,24,40,.06);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rev-track::-webkit-scrollbar{display:none}
/* Flat panels split by hairlines rather than boxed cards — the quote leads,
   the person signs it off at the bottom. */
.rev{flex:0 0 25%;scroll-snap-align:start;position:relative;background:#fff;
  border-left:1px solid var(--line);padding:34px 26px 26px;transition:background .2s;
  display:flex;flex-direction:column}
.rev:first-child{border-left:0}
.rev:hover{background:#fcfcfd}
.rev-quote{position:absolute;top:6px;left:24px;font-size:74px;line-height:1;color:#e9ecf0;
  font-family:Georgia,'Times New Roman',serif;pointer-events:none;user-select:none}
.rev .gstars{display:inline-flex;gap:3px;margin:0 0 14px;position:relative}
.rev .gstars svg{width:18px;height:18px;display:block}
.rev p{font-size:14.5px;color:#4a5058;line-height:1.62;margin:0;
  display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.rev.open p{-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
.rev .more{align-self:flex-start;margin-top:9px;background:none;border:none;padding:0;color:var(--red);font-size:13.5px;
  font-weight:800;cursor:pointer;font-family:inherit}
.rev .more:hover{text-decoration:underline}
/* margin-top:auto pins the signature to the bottom so it lines up across the
   row whatever length the quotes are. */
.rev .who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px}
.rev .who .av{width:46px;height:46px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:700;
  font-size:18px;flex:none}
.rev .who-txt{min-width:0}
.rev .who strong{display:block;font-size:15px;color:var(--ink);line-height:1.25;font-weight:800}
.rev .who small{color:var(--muted);display:flex;align-items:center;gap:5px;font-size:12px;margin-top:2px}
.rev .who small .gmark{width:13px;height:13px;flex:none}

.rev-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 6px 20px rgba(16,24,40,.15);transition:.18s}
.rev-nav:hover{background:var(--red);border-color:var(--red);color:#fff}
.rev-nav[hidden]{display:none}
.rev-nav svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* wide screens have room in the page gutter; below that the carousel reserves a lane
   for the arrows so they never sit on top of the review text */
.rev-nav.prev{left:-22px}
.rev-nav.next{right:-22px}
@media(max-width:1300px){
  .rev-car{padding:0 54px}
  .rev-nav.prev{left:0}
  .rev-nav.next{right:0}
}
.rev-dots{display:flex;justify-content:center;gap:9px;margin-top:22px}
.rev-dots button{width:9px;height:9px;border-radius:50%;border:none;background:#d3d6da;cursor:pointer;padding:0;transition:.18s}
.rev-dots button:hover{background:#b0b4ba}
.rev-dots button.on{background:var(--red);width:24px;border-radius:5px}
@media(prefers-reduced-motion:reduce){.rev-track{scroll-behavior:auto}}

/* --------------------------------------------------------- buyer information */
.binfo{background:#fff;border-top:1px solid var(--line);padding:46px 0 50px}
.binfo-item{border-top:3px solid var(--gold);padding-top:15px;height:100%}
.binfo-item h3{font-size:15px;margin-bottom:7px}
.binfo-item p{font-size:14px;color:var(--muted);line-height:1.6;margin:0}
.binfo-item p b{color:var(--ink)}
/* The closing note carries the same dark glass as the band below it, so the
   page finishes on one material rather than a pale box against a dark one.

   The bed is the lit ground and the note is the pane sitting on it. They have
   to be two elements: backdrop-filter samples what an ANCESTOR painted, so a
   pane with its own opaque fill over a white section blurs flat white and
   reads as a plain dark box — which is exactly what it was doing. */
.binfo-bed{position:relative;isolation:isolate;margin-top:36px;border-radius:18px;overflow:hidden;
  background:#0f1115;box-shadow:0 18px 44px rgba(0,0,0,.34)}

/* Warm light off the right shoulder plus three raking streaks. The streaks are
   the point: a blur over a smooth wash is invisible, so the ground needs edges
   for the glass to soften. */
.binfo-bed::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(520px 260px at 88% 50%,rgba(255,193,7,.20),transparent 64%),
    radial-gradient(300px 180px at 99% 96%,rgba(255,168,14,.10),transparent 66%),
    linear-gradient(104deg,transparent 40%,rgba(255,196,60,.11) 47%,transparent 54%),
    linear-gradient(96deg,transparent 62%,rgba(255,214,120,.09) 69%,transparent 75%),
    linear-gradient(112deg,transparent 74%,rgba(255,180,30,.13) 81%,transparent 89%)}

/* Same grain as the band, so both surfaces are the same material. */
.binfo-bed::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")}

.binfo-note{position:relative;display:flex;align-items:center;gap:20px;
  border-radius:18px;padding:20px 26px;
  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%)}

/* Gradient rim: a 1px ring, bright at the top-left, fading round the back. */
.binfo-note::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(145deg,rgba(255,213,79,.72),rgba(255,193,7,.26) 38%,rgba(255,255,255,.06) 62%,rgba(255,193,7,.34));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}

.bn-ic{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  color:var(--gold);border:1.5px solid rgba(255,193,7,.5);background:rgba(255,193,7,.1)}
.bn-ic svg{width:26px;height:26px}

.binfo-note p{flex:1 1 auto;margin:0;font-size:14.5px;line-height:1.62;color:#c9cdd4;max-width:none}
.binfo-note b{color:#fff;font-weight:700}
.binfo-note a{color:var(--gold-2);text-decoration:none;font-weight:600}
.binfo-note a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

.bn-badge{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding-left:24px;
  border-left:1px solid rgba(255,255,255,.1)}
.bn-shield{display:grid;place-items:center;width:52px;height:52px;color:var(--gold)}
.bn-shield svg{width:52px;height:52px}
.bn-txt{display:flex;flex-direction:column;line-height:1.15}
.bn-txt b{font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.bn-txt b i{font-style:normal;color:var(--gold)}
.bn-txt small{font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:#c9cdd4}

@media(max-width:767.98px){
  .binfo-note{flex-wrap:wrap;gap:14px;padding:18px 20px}
  .binfo-note p{flex:1 1 100%;order:2}
  .bn-badge{order:3;flex:1 1 100%;padding-left:0;padding-top:14px;
    border-left:0;border-top:1px solid rgba(255,255,255,.1)}
}

/* ========================================================== responsive ==== */
@media(max-width:991.98px){
  /* Still tracks 16:9 on tablets; only phones fall back to a fixed height,
     where a true 16:9 banner would be barely 220px tall. */
  .hs{height:clamp(380px,56.25vw,560px)}
  .hs-trust .trailer{opacity:.28;right:-90px}
  .hs-feat{padding:0 14px}
  .hs-feat .v{font-size:16px}
  .rev{flex-basis:50%}
  .pd-body{padding:24px 22px 26px}
  .pd-media{min-height:260px}
}

@media(max-width:767.98px){
  .hs{height:400px}
  /* Arrows sit at the vertical centre and collided with the slide text/button
     on phones. Touch users swipe or tap the dots, so hide them on mobile. */
  .hs .hs-nav{display:none}
  .hs-tool .hs-in{align-items:flex-start;text-align:left}
  .hs-tool .sbg::after{background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.5) 48%,rgba(255,255,255,.15) 100%)}
  .hs-feats{display:none}
  .hs-trust-cta{display:flex}
  .inc-list{grid-template-columns:1fr}
  .pd-tabs{gap:0}
  .pd-tabs button{padding:9px 10px;font-size:13.5px}
  .cat-card .cimg{height:180px}
  .prod-card .pimg{height:210px}
}

/* ======================================================== why choose us === *
   Dark glass over a dimmed trailer photo. Each panel sets --acc once and the
   icon ring, the rule under the heading, the panel tint and the light pooling
   under it all read from it, so a colour is changed in one place.
   ======================================================================== */
.whyus{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,#081326 0%,#0d1c34 45%,#091528 100%)}
/* Glows sit above the photo but under the content. */
.whyus::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(680px 380px at 8% 92%,rgba(240,52,74,.20),transparent 62%),
    radial-gradient(720px 420px at 88% 10%,rgba(59,130,246,.22),transparent 64%),
    radial-gradient(560px 320px at 62% 100%,rgba(20,184,166,.16),transparent 66%)}
.why-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.why-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 40%;
  opacity:.20;filter:grayscale(.55) contrast(1.05)}
/* The photo has to fade out on the left or it fights the headline. */
.why-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#081326 0%,rgba(8,19,38,.92) 34%,rgba(8,19,38,.55) 62%,rgba(8,19,38,.75) 100%)}
.why-in{position:relative;z-index:2}

/* Dotted map, sat behind the stat panel in the top corner. Decorative only —
   it carries no information the copy does not already give. */
.why-map{position:absolute;top:26px;right:2%;width:min(230px,20vw);height:auto;z-index:1;
  opacity:.5;pointer-events:none}
@media(max-width:1199.98px){.why-map{display:none}}

.why-top{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;margin-bottom:34px}
.why-intro{max-width:620px}
.whyus .eyebrow{color:#ff5a4d}
.whyus h2{font-size:clamp(28px,3.6vw,42px);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;
  line-height:1.08;color:#fff;margin:12px 0 0;position:relative;padding-bottom:18px}
.whyus h2 .brand{background:linear-gradient(90deg,#f0344a 0%,#f97316 55%,#ffc20e 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.whyus h2::after{content:"";position:absolute;left:0;bottom:0;width:110px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,#f0344a,#ffc20e)}
.whyus .why-intro p{color:rgba(255,255,255,.72);font-size:16px;line-height:1.6;margin:16px 0 0;max-width:520px}

/* Happy-customers panel: the same glass as the cards, at label size. */
.why-stat{flex:none;display:flex;align-items:center;gap:14px;padding:16px 22px 16px 16px;border-radius:16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 14px 40px rgba(2,8,20,.45)}
.ws-ic{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#f0344a,#c81e32);box-shadow:0 8px 22px rgba(240,52,74,.5)}
.ws-ic .ic{width:26px;height:26px}
.ws-txt b{display:block;font-size:25px;font-weight:900;line-height:1.1;color:#fff}
.ws-txt small{display:block;font-size:13px;line-height:1.45;color:rgba(255,255,255,.7);margin-top:3px}

/* Wrapping flex, not a fixed column count. Five tracks dropping to three below
   1440 left a 1366 laptop — a very common size — showing three cards above two
   with a card and a half of hole on the right. Flex holds five across for as
   long as they can keep 200px, and when they cannot, the short row centres
   itself instead of hanging left.

   14px gutters, not 20: the mock fits five 250px cards into 1282px of row,
   about 8px between them, and this page's wrap is 1250px — a 20px gutter spent
   80px on air and left each card 234px. */
.why-grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
/* Corners are ~10% of the card's width in the close-up — 26px here, where 20
   read as a squarer, harder panel. The rim is what sells the glass: a bright
   top edge fading down each side, so the panel looks lit from above rather
   than outlined. */
.why-card{position:relative;flex:0 1 calc((100% - 56px) / 5);min-width:186px;
  padding:32px 20px 28px;border-radius:26px;text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.05) 55%,rgba(255,255,255,.03) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.22);border-top-color:rgba(255,255,255,.42);
  box-shadow:0 18px 46px rgba(2,8,20,.5),inset 0 1px 0 rgba(255,255,255,.42);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s,border-color .3s}
/* The accent wash rises from the foot, and in the close-up it starts around a
   third of the way up rather than at the halfway mark. */
.why-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,transparent 34%,color-mix(in srgb,var(--acc) 34%,transparent) 100%);
  opacity:.9;transition:opacity .3s}
/* Light pooling on the floor under each panel — the reflection in the mock. */
.why-card::after{content:"";position:absolute;left:2%;right:2%;bottom:-38px;height:42px;pointer-events:none;
  background:radial-gradient(70% 100% at 50% 0%,color-mix(in srgb,var(--acc) 88%,transparent),transparent 76%);
  filter:blur(10px);opacity:.95;transition:opacity .3s}
.why-card:hover{transform:translateY(-7px);border-color:color-mix(in srgb,var(--acc) 60%,transparent);
  box-shadow:0 26px 60px rgba(2,8,20,.6),0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent),
    inset 0 1px 0 rgba(255,255,255,.36)}
.why-card:hover::before{opacity:1}
.why-card:hover::after{opacity:1}
@media(prefers-reduced-motion:reduce){.why-card,.why-card::before,.why-card::after{transition:none}}

/* Not a flat disc. In the close-up the circle has a bright rim of its own
   colour with a deeper fill inside it and light bleeding outward — a lit ring,
   which is why the icon reads as glowing rather than stamped on. The rim is a
   real border; the bleed is two shadows, one tight and one wide. */
.why-ic{position:relative;z-index:1;width:88px;height:88px;margin:0 auto 24px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  border:2px solid color-mix(in srgb,var(--acc) 55%,#fff);
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--acc) 88%,#fff) 0%,var(--acc) 46%,
    color-mix(in srgb,var(--acc) 70%,#000) 100%);
  box-shadow:0 0 18px color-mix(in srgb,var(--acc) 85%,transparent),
    0 0 46px color-mix(in srgb,var(--acc) 55%,transparent),
    inset 0 0 18px color-mix(in srgb,var(--acc) 45%,#fff)}
.why-ic .ic{width:42px;height:42px;stroke-width:1.5}
.why-card h3{position:relative;z-index:1;font-size:21px;font-weight:800;color:#fff;margin:0;line-height:1.28}
.why-rule{position:relative;z-index:1;display:block;width:42px;height:3px;border-radius:3px;margin:14px auto 16px;
  background:var(--acc)}
.why-card p{position:relative;z-index:1;font-size:15.5px;line-height:1.66;color:rgba(255,255,255,.86);margin:0}

@media(max-width:991.98px){
  .why-top{flex-direction:column;align-items:flex-start}
}
@media(max-width:767.98px){
  .why-card{flex:0 1 calc((100% - 14px) / 2);min-width:150px;padding:24px 16px 22px}
  .why-ic{width:62px;height:62px}
  .why-ic .ic{width:29px;height:29px}
  .why-bg img{object-position:60% 40%}
}
@media(max-width:519.98px){
  .why-card{flex:1 1 100%}
}

/* ==================================================== deals of the week === *
   Promo panel pinned on the left, deals scrolling beside it. The panel is a
   grid column rather than the first card in the rail, so it stays put while
   the trailers move — it is the section's frame, not one of its items.
   ======================================================================== */
.deals{position:relative;isolation:isolate}
.deals::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(700px 320px at 90% 10%,rgba(255,194,14,.16),transparent 62%)}
.dl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px}
.dl-head .sec-head{margin:0}
.dl-nav{display:flex;gap:8px;flex:none;padding-bottom:4px}
.dl-arrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(16,24,40,.12);cursor:pointer;
  background:rgba(255,255,255,.65);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;color:var(--ink);transition:.18s}
.dl-arrow:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.dl-arrow:disabled{opacity:.35;cursor:default}
.dl-arrow .ic{width:19px;height:19px}

.dl-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:stretch}

.dl-promo{position:relative;overflow:hidden;border-radius:var(--radius);padding:30px 28px;
  display:flex;flex-direction:column;justify-content:center;
  background:linear-gradient(150deg,#1c1c1c 0%,#2b2b2b 58%,#1c1c1c 100%);color:#fff}
.dl-promo::after{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,194,14,.34),transparent 70%);pointer-events:none}
.dl-kicker{display:inline-block;align-self:flex-start;background:var(--gold);color:var(--ink);
  font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;padding:5px 11px;border-radius:100px}
.dl-promo h3{color:#fff;font-size:29px;line-height:1.12;margin:16px 0 10px}
.dl-promo p{color:rgba(255,255,255,.74);font-size:14.5px;line-height:1.6;margin:0 0 20px}
.dl-promo .btn{align-self:flex-start}

.dl-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(238px,1fr);gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:6px;scrollbar-width:none}
.dl-track::-webkit-scrollbar{display:none}
@media(prefers-reduced-motion:reduce){.dl-track{scroll-behavior:auto}}

.deal-card{scroll-snap-align:start;display:flex;flex-direction:column;background:#fff;border-radius:16px;
  border:1px solid var(--line);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
.deal-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(16,24,40,.15);border-color:#d9dde3}
/* overflow + transparent text: these titles run to twelve words, and until the
   lazy image lands the browser paints the alt text, which spilled out of the
   frame and over the discount badge. */
.dc-img{position:relative;height:180px;background:#f2f4f6;overflow:hidden}
.dc-img img{width:100%;height:100%;object-fit:cover;display:block;color:transparent}
.dc-off{position:absolute;top:0;left:0;z-index:2;background:var(--red);color:#fff;font-size:12.5px;font-weight:800;
  padding:5px 12px;border-radius:16px 0 14px 0}
.dc-body{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px}
.dc-cat{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--red)}
.dc-title{font-size:14.5px;line-height:1.34;margin:6px 0 8px}
.dc-title a{color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dc-title a:hover{color:var(--red)}
.dc-rate{display:flex;align-items:center;gap:7px;margin-bottom:8px;color:#fbbc04;font-size:13px}
.dc-rate small{color:var(--muted);font-weight:600}
.dc-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.dc-price b{font-size:19px;color:var(--red);font-weight:800}
.dc-price s{font-size:13.5px;color:#b5b9bf;font-weight:600}
.dc-price .dc-save{font-size:11.5px;font-weight:800;color:var(--ok);background:#e8f6ee;border-radius:100px;
  padding:3px 9px;white-space:nowrap}
/* Sold bar. Nothing in this catalog manages stock, so the bar is scaled
   against the best seller on the row — the number beside it is the claim. */
.dc-sold{margin-bottom:12px}
.dc-bar{display:block;height:5px;border-radius:100px;background:#eceef1;overflow:hidden}
.dc-bar i{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,var(--gold),var(--red))}
.dc-sold small{display:block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--muted)}
.dc-add{margin-top:auto;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.dc-add svg{width:16px;height:16px;flex:none}
.dc-add.loading{opacity:.65;pointer-events:none}
.dc-add.added::after{content:"✓";font-weight:800}
.deal-card .added_to_cart{display:none}

@media(min-width:992px) and (max-width:1199.98px){
  .dl-grid{grid-template-columns:250px minmax(0,1fr)}
  .dl-promo{padding:26px 22px}
  .dl-promo h3{font-size:25px}
}
/* Below 992 the panel keeps a quarter of a tablet screen and leaves the rail
   too narrow to show two whole cards, so it stops being a column and becomes
   the header for the rail instead. */
@media(max-width:991.98px){
  .dl-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .dl-promo{padding:24px 22px}
  .dl-promo h3{font-size:24px}
  .dl-track{grid-auto-columns:minmax(210px,1fr);gap:14px}
}

@media(max-width:575.98px){
  .hs{height:360px}
  .hs .hs-nav{width:38px;height:38px}
  .hs .hs-nav.prev{left:8px}
  .hs .hs-nav.next{right:8px}
  /* phones swipe the review track directly — arrows would just eat card width */
  .rev{flex-basis:88%}
  .rev-car{padding:0}
  .rev-nav{display:none}
  .pd-body{padding:20px 16px 22px}
  .prod-card .foot{flex-direction:column;align-items:flex-start;gap:10px}
  .prod-card .foot .btn{width:100%}
}