:root{
  --bg:#161616; --bg-1:#1c1c1c; --bg-2:#232323; --bg-3:#2b2b2b;
  --steel:#3a3d42; --steel-line:#38393c; --steel-light:#8b8d92;
  --text:#ece9e2; --text-dim:#a6a3a0; --text-faint:#716f6c;
  --orange:#f4600f; --orange-2:#ff7a1f; --orange-dark:#c94d0a; --yellow:#ffb400;
  /* Colour roles — each one has a job, so the palette reads as deliberate:
       --orange      ACTIONS. Buttons, add-to-cart, prices, active state. Nothing else.
       --road-line   WAYFINDING. Road markings, lane dividers, hazard stripes. Never a button.
       --ok/low/bad  STATUS. Stock levels only.
     Road-marking amber is pulled from the real asphalt photograph the textures came from,
     which is why the two sit together naturally instead of fighting. */
  /* Road-paint yellow, sampled from the 4k asphalt photograph: 10,186 marking pixels
     averaged to #967A4C (hue 37deg). That raw value is weathered paint under ambient
     shadow and reads as mud on a dark screen, so the hue is kept and the saturation
     lifted for display. One yellow does both jobs — road markings and review stars —
     which is what ties the reviews block back into the rest of the page. */
  --road-line:#f6af23; --road-line-dim:rgba(246,175,35,.40); --asphalt:#141312;
  --ok:#7cb56b; --ok-bg:#25301f; --low:#e0a536; --low-bg:#332918; --bad:#e05a4d; --bad-bg:#331e1a;
  --radius:3px; --radius-lg:6px; --shadow:0 10px 30px rgba(0,0,0,.45);
  --font-display:'Bebas Neue',sans-serif; --font-body:'Work Sans',sans-serif; --font-mono:'JetBrains Mono',monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.5;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--orange);color:#161616;}
.hidden{display:none !important;}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px;}
/* Hazard chevrons are wayfinding, not an action — so they carry the road amber, and the
   asphalt shows through the dark bands instead of a flat grey. */
.hazard{height:10px;background-color:var(--asphalt);background-image:repeating-linear-gradient(135deg,var(--road-line) 0 18px,rgba(20,19,18,.92) 18px 36px);background-size:51px 51px;}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:.5px;font-weight:400;margin:0;}
/* Section eyebrows are signposts — wayfinding, so yellow. */
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--road-line);font-weight:600;}
.mono{font-family:var(--font-mono);}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:var(--radius);border:1px solid transparent;font-weight:700;font-size:14px;letter-spacing:.3px;transition:transform .12s,background .15s,border-color .15s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--orange);color:#161616;}
.btn-primary:hover{background:var(--orange-2);}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--steel);}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange-2);}
.btn-dark{background:var(--bg-3);color:var(--text);border-color:var(--steel-line);}
.btn-dark:hover{border-color:var(--orange);}
.btn-danger{background:var(--bad-bg);color:var(--bad);border-color:#5a2a24;}
.btn-danger:hover{background:var(--bad);color:#1a1a1a;}

.availability-warning{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--yellow);color:#1a1400;border:2px solid var(--yellow);
  border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:18px;
  font-family:var(--font-body);font-size:14.5px;line-height:1.4;cursor:pointer;
  box-shadow:0 4px 14px rgba(255,180,0,.25);transition:transform .1s,box-shadow .15s;
}
.availability-warning:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(255,180,0,.35);}
.availability-warning svg{flex-shrink:0;stroke:#1a1400;}
.availability-warning u{text-decoration-thickness:2px;}
.btn-sm{padding:8px 14px;font-size:12.5px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.5;cursor:not-allowed;}

.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:600;padding:4px 9px;border-radius:2px;letter-spacing:.5px;text-transform:uppercase;}
.badge-ok{background:var(--ok-bg);color:var(--ok);}
.badge-low{background:var(--low-bg);color:var(--low);}
.badge-bad{background:var(--bad-bg);color:var(--bad);}

.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--text-dim);margin-bottom:6px;letter-spacing:.3px;}
.field input,.field select,.field textarea{width:100%;background:var(--bg);border:1px solid var(--steel-line);color:var(--text);padding:11px 12px;border-radius:var(--radius);font-size:14px;outline:none;transition:border-color .15s;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);}
.field textarea{resize:vertical;min-height:80px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.field-hint{font-size:11.5px;color:var(--text-faint);margin-top:5px;}
.field-group{background:var(--bg);border:1px solid var(--steel-line);border-radius:var(--radius);padding:14px 16px;}
.field-group .opt{padding:4px 0;}
.alert{padding:12px 16px;border-radius:var(--radius);font-size:13.5px;margin-bottom:16px;}
.alert-ok{background:var(--ok-bg);color:var(--ok);border:1px solid #2e4326;}
.alert-err{background:var(--bad-bg);color:var(--bad);border:1px solid #5a2a24;}

/* topbar / header */
.topbar{background:#0f0f0f;border-bottom:1px solid var(--steel-line);font-size:12.5px;color:var(--text-faint);}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;flex-wrap:wrap;gap:6px;}
.topbar a{color:var(--text-dim);}
.topbar a:hover{color:var(--orange-2);}
.topbar .split{display:flex;gap:20px;}
/* The nav strip sits on real asphalt under a dark wash so the type stays legible. It is
   darker than the hero below it, which is separation enough — the painted yellow centre
   line that used to run along its bottom edge was removed as one yellow band too many.
   A neutral hairline remains so the sticky header keeps a clean edge over content. */
header.site{
  background-color:var(--asphalt);
  background-image:linear-gradient(180deg,rgba(16,15,14,.82),rgba(16,15,14,.90)),url('/assets/img/asphalt-tile.jpg');
  background-repeat:no-repeat,repeat;
  background-size:auto,300px 300px;
  border-bottom:1px solid rgba(255,255,255,.06);
  position:sticky;top:0;z-index:50;
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:18px;flex-wrap:wrap;}
.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto;}
.logo img{height:52px;width:auto;display:block;}
.logo-mark{width:42px;height:42px;background:var(--orange);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transform:rotate(-3deg);color:#161616;}
.logo-text{font-family:var(--font-display);font-size:28px;letter-spacing:1px;line-height:1;}
.logo-text span{color:var(--orange-2);}
.logo-sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:2px;color:var(--text-faint);text-transform:uppercase;margin-top:2px;}
/* Nav links read as real buttons: bigger type, generous hit area, and a hover
   state that fills in rather than only recolouring the text. Plain flexbox wrap —
   no grid `order`, which older phones on this site don't handle. */
nav.main{display:flex;gap:9px;align-items:center;flex-wrap:wrap;flex:1 1 auto;}
/* Each link is a physical block sitting on the tarmac, not floating text: lit top edge,
   dark base, its own shadow. A flat word on a dark background gives the eye nothing to
   read as a target — an edge and a shadow do. Replaces the earlier dashed dividers,
   which separated the links but never made them look pressable. */
nav.main > a,
.nav-dd-btn{
  position:relative;
  display:inline-flex;align-items:center;gap:6px;
  font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.2px;line-height:1.5;
  color:var(--text);
  padding:12px 18px;
  border-radius:4px;
  white-space:nowrap;
  background-color:rgba(8,8,8,.55);
  background-image:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 4px rgba(0,0,0,.45);
  transition:background-color .15s,border-color .15s,box-shadow .15s,transform .12s;
}
/* Hover lifts the block and lights its edge in the action colour. */
nav.main > a:hover,nav.main > a:focus,
.nav-dd-btn:hover,.nav-dd-btn:focus,.nav-dd.open .nav-dd-btn{
  background-color:rgba(244,96,15,.17);
  border-color:var(--orange);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 14px rgba(0,0,0,.55);
}
nav.main > a:active,.nav-dd-btn:active{transform:translateY(0);box-shadow:inset 0 2px 4px rgba(0,0,0,.5);}
.header-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;}
.search-box{position:relative;}
.search-box input{width:250px;background:var(--bg);border:1px solid var(--steel-line);color:var(--text);padding:11px 13px 11px 38px;border-radius:var(--radius);font-size:14.5px;}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-faint);}
.cart-btn{position:relative;background:var(--bg-3);border:1px solid var(--steel-line);border-radius:var(--radius);padding:11px 17px;display:flex;align-items:center;gap:8px;color:var(--text);font-size:14.5px;font-weight:600;}
.cart-btn:hover{border-color:var(--orange);}
.cart-count{position:absolute;top:-7px;right:-7px;background:var(--orange);color:#161616;font-size:11px;font-weight:800;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.topbar .tb-phone{color:inherit;}

/* ---- Categories dropdown (desktop nav) ----
   Lists only categories that hold stock, with live counts, so the menu can never lead
   to an empty shelf. Opens on hover for a mouse and on tap/click for everyone else. */
.nav-dd{position:relative;}
.nav-dd-btn{cursor:pointer;}
.nav-dd-btn svg{transition:transform .15s;}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg);}
.nav-dd-panel{
  display:none;position:absolute;top:100%;left:0;margin-top:8px;z-index:60;
  min-width:300px;padding:8px;background:var(--bg-1);
  border:1px solid var(--steel-line);border-radius:var(--radius-lg);box-shadow:var(--shadow);
}
.nav-dd.open .nav-dd-panel{display:block;}
@media (hover:hover) and (pointer:fine){
  .nav-dd:hover .nav-dd-panel{display:block;}
  /* bridges the gap between button and panel so the pointer can cross it */
  .nav-dd:hover::after{content:'';position:absolute;left:0;right:0;top:100%;height:10px;}
}
.nav-dd-panel a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius);color:var(--text-dim);font-size:14.5px;font-weight:600;}
.nav-dd-panel a svg{color:var(--road-line);flex:0 0 auto;}
.nav-dd-panel a span{flex:1;}
.nav-dd-panel a em{font-style:normal;font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);}
.nav-dd-panel a:hover,.nav-dd-panel a:focus{background:var(--bg-3);color:var(--text);}
.nav-dd-panel .nav-dd-all{margin-top:4px;border-top:1px solid var(--steel-line);border-radius:0;padding-top:12px;color:var(--road-line);justify-content:space-between;}

/* ---- Compact header pieces: hidden on desktop, shown at the tablet breakpoint ---- */
.menu-toggle{
  display:none;flex:0 0 auto;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;cursor:pointer;color:var(--text);
  background:rgba(8,8,8,.55);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);
}
.menu-toggle:hover,.menu-toggle:focus{border-color:var(--orange);}
.logo--compact-only{display:none;}
.mobile-search{display:none;}
.m-search{position:relative;display:flex;}
.m-search > svg{position:absolute;left:13px;top:50%;margin-top:-8.5px;color:var(--text-faint);pointer-events:none;}
.m-search input{
  flex:1;min-width:0;padding:13px 12px 13px 40px;font-size:16px; /* 16px stops iOS zooming in on focus */
  background:var(--bg);color:var(--text);border:1px solid var(--steel-line);border-right:none;
  border-radius:var(--radius) 0 0 var(--radius);-webkit-appearance:none;appearance:none;
}
.m-search input:focus{outline:none;border-color:var(--road-line);}
.m-search > button{flex:0 0 auto;border:none;background:var(--road-line);color:#1a1400;font-weight:800;font-size:14px;letter-spacing:.4px;padding:0 18px;border-radius:0 var(--radius) var(--radius) 0;cursor:pointer;}

/* ---- Menu drawer ----
   Slides in from the left. Positioned with explicit top/left/bottom rather than the
   `inset` shorthand, which older phones on this site don't support. visibility:hidden
   when closed keeps it out of the tab order and away from screen readers. */
.drawer-backdrop{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:190;background:rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s;
}
.drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:200;width:86%;max-width:340px;
  display:flex;flex-direction:column;background:var(--bg-1);border-right:1px solid var(--steel-line);
  -webkit-transform:translateX(-102%);transform:translateX(-102%);visibility:hidden;
  transition:transform .22s ease-out,visibility 0s .22s;
}
.drawer-open .drawer{-webkit-transform:none;transform:none;visibility:visible;transition:transform .22s ease-out;}
.drawer-open .drawer-backdrop{opacity:1;visibility:visible;transition:opacity .2s;}
.drawer-open,.drawer-open body{overflow:hidden;}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  background-color:var(--asphalt);
  background-image:linear-gradient(180deg,rgba(16,15,14,.82),rgba(16,15,14,.90)),url('/assets/img/asphalt-tile.jpg');
  border-bottom:1px solid var(--steel-line);
}
.drawer-logo img{height:40px;width:auto;display:block;}
.drawer-close{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--steel-line);border-radius:var(--radius);color:var(--text);cursor:pointer;}
.drawer-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 0 18px;}
.drawer-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--road-line);padding:18px 18px 8px;}
.drawer-link,.drawer-contact,.drawer-addr{display:flex;align-items:center;gap:12px;padding:13px 18px;color:var(--text);font-size:15px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.04);margin:0;}
.drawer-link span,.drawer-contact span,.drawer-addr span{flex:1;}
.drawer-link > svg:last-child{color:var(--text-faint);}
.drawer-link:active,.drawer-contact:active{background:var(--bg-3);}
.drawer-cat{padding-left:26px;font-weight:500;color:var(--text-dim);}
.drawer-cat svg{color:var(--road-line);flex:0 0 auto;}
.drawer-cat em{font-style:normal;font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);}
.drawer-contact svg,.drawer-addr svg{color:var(--orange-2);flex:0 0 auto;}
.drawer-addr{font-weight:400;color:var(--text-dim);font-size:13.5px;border-bottom:none;}
.drawer-foot{padding:14px 18px;border-top:1px solid var(--steel-line);font-size:12.5px;}
.drawer-foot a{color:var(--text-faint);}

/* ---- As-you-type search suggestions ---- */
.search-box,.m-search,.hero-search{position:relative;}
.suggest{
  position:absolute;top:100%;left:0;right:0;z-index:70;margin-top:6px;min-width:320px;
  background:var(--bg-1);border:1px solid var(--steel-line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden;text-align:left;
}
.suggest[hidden]{display:none;}
.search-box .suggest{left:auto;right:0;width:420px;}
.suggest-item{display:flex;align-items:center;gap:12px;padding:10px 12px;color:var(--text);border-bottom:1px solid rgba(255,255,255,.04);}
.suggest-item:hover,.suggest-item.is-active{background:var(--bg-3);}
.suggest-thumb{flex:0 0 44px;width:44px;height:44px;border-radius:var(--radius);overflow:hidden;background:var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23716f6c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 1 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.8 2.8-2-2z'/%3E%3C/svg%3E") center/20px no-repeat;border:1px solid var(--steel-line);}
.suggest-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.suggest-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.suggest-name{font-size:13.5px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.suggest-meta{display:flex;gap:10px;align-items:center;font-family:var(--font-mono);font-size:11px;color:var(--text-faint);}
.suggest-stock.in{color:var(--ok);}
.suggest-stock.out{color:var(--bad);}
.suggest-note{font-size:11px;color:var(--road-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.suggest-price{flex:0 0 auto;font-family:var(--font-mono);font-weight:700;font-size:13.5px;}
.suggest-all{display:block;width:100%;padding:12px;background:var(--bg-2);border:none;color:var(--road-line);font-weight:700;font-size:13px;text-align:center;cursor:pointer;font-family:inherit;}
.suggest-all:hover{background:var(--bg-3);}
.suggest-empty{padding:16px;color:var(--text-faint);font-size:13.5px;}

/* ---- Trust strip (homepage, under the hero) ----
   The four questions a parts buyer has before trusting a new supplier: will it reach me,
   can I just collect it, is paying safe, and who do I ask if I'm not sure it fits.
   Every figure is read from Admin > Settings, so it can't drift from the checkout. */
.trust-strip{background:var(--bg-1);border-bottom:1px solid var(--steel-line);}
.trust-strip .wrap{display:flex;flex-wrap:wrap;}
.trust-item{flex:1 1 25%;display:flex;align-items:center;gap:13px;padding:18px 16px;color:var(--text);min-width:0;}
.trust-item + .trust-item{border-left:1px solid var(--steel-line);}
.trust-item > svg{flex:0 0 auto;color:var(--road-line);}
.trust-item b{display:block;font-size:14px;font-weight:700;line-height:1.25;}
.trust-item span{display:block;font-size:12.5px;color:var(--text-faint);line-height:1.35;margin-top:2px;}
a.trust-item:hover b{color:var(--road-line);}

/* hero */
/* Hero: logo centred and dominant, then one row of search + stats beneath it.
   Vertical padding is deliberately restrained so the category tiles stay within
   reach on a laptop rather than the hero owning the whole first screen. */
/* Real road surface instead of the generic 45-degree stripe pattern — same photograph as
   the nav strip, so the whole masthead reads as one continuous piece of tarmac. */
.hero{
  background-color:var(--asphalt);
  background-image:linear-gradient(180deg,rgba(20,19,18,.72),rgba(20,19,18,.93)),url('/assets/img/asphalt-tile.jpg');
  background-repeat:no-repeat,repeat;
  background-size:auto,420px 420px;
  padding:34px 0 30px;border-bottom:1px solid var(--steel-line);
}
.hero .wrap{display:block;}
/* Corners are rounded on the input and button themselves rather than clipped with
   overflow:hidden on this wrapper, which would also clip the suggestions panel. */
.hero-search{display:flex;flex:1 1 400px;max-width:560px;box-shadow:var(--shadow);border-radius:var(--radius);}
.hero-search input{flex:1;min-width:0;padding:17px 18px;font-size:16px;background:var(--bg-2);color:var(--text);border:1px solid var(--steel-line);border-right:none;border-radius:var(--radius) 0 0 var(--radius);}
.hero-search input:focus{outline:none;border-color:var(--orange);}
/* Search is a wayfinding action, so it takes the yellow — which also keeps it visually
   distinct from the orange commit actions (add to cart, checkout) further down the page. */
.hero-search > button{border:none;border-radius:0 var(--radius) var(--radius) 0;background:var(--road-line);color:#1a1400;padding:0 30px;font-weight:800;font-size:14.5px;letter-spacing:.5px;white-space:nowrap;transition:background .15s;}
.hero-search > button:hover{background:#ffc24a;}
.hero-search--compact{max-width:100%;flex:1 1 auto;}
.hero-search--compact input{padding:12px 14px;font-size:14.5px;}
.search-results-head{padding-top:22px;padding-bottom:0;}
.search-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin-bottom:14px;}
.search-head h2{font-size:28px;line-height:1.1;}
.search-clear{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--text-dim);white-space:nowrap;}
.search-clear:hover{color:var(--orange-2);}
@media (max-width:640px){
  .search-results-head{padding-top:16px;}
  .search-head h2{font-size:24px;}
  /* readable part names are longer than the old codes; keep the product heading to ~2 lines */
  .product-detail h1{font-size:25px !important;line-height:1.15;}
  /* card label: the readable name already says what the part is, so a phone shows just
     the brand instead of two lines of "HYDRAULIC BRAKE & CLUTCH COMPONENTS · LMB" */
  .pcat.has-brand .pcat-cat,.pcat.has-brand .pcat-sep{display:none;}
}
.hero-bar{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:30px;flex:0 1 auto;}
/* Stats are information, not an action — white carries them and pulls the palette
   toward the 40% white share rather than adding yet another orange. */
.hero-stat b{display:block;font-family:var(--font-display);font-size:32px;color:var(--text);line-height:1;}
.hero-stat span{font-size:11.5px;color:var(--text-faint);font-family:var(--font-mono);letter-spacing:.5px;text-transform:uppercase;}
/* No glow behind the logo. A radial gradient on a block element stops dead at the element
   box, which left a hard horizontal seam across the tarmac — worse than no glow at all.
   The logo carries itself against the asphalt. */
.hero-logo-display{display:flex;align-items:center;justify-content:center;padding:0 0 26px;}
.hero-logo-display img{width:100%;max-width:600px;height:auto;display:block;filter:drop-shadow(0 12px 30px rgba(0,0,0,.5));}

.brand-marquee-viewport{
  background:var(--bg-1);border-top:1px solid var(--steel-line);border-bottom:1px solid var(--steel-line);
  overflow:hidden;padding:22px 0;cursor:grab;user-select:none;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 60px,#000 calc(100% - 60px),transparent 100%);
}
.brand-marquee-viewport.dragging{cursor:grabbing;}
.brand-marquee-track{display:flex;align-items:center;gap:56px;width:max-content;will-change:transform;padding:0 28px;}
.brand-marquee-item{display:flex;align-items:center;justify-content:center;height:44px;flex-shrink:0;opacity:.85;transition:opacity .2s;}
.brand-marquee-item:hover{opacity:1;}
.brand-marquee-item img{height:100%;width:auto;max-width:140px;object-fit:contain;pointer-events:none;}
.brand-marquee-text{font-family:var(--font-display);font-size:22px;letter-spacing:.5px;color:var(--text-dim);white-space:nowrap;pointer-events:none;}
.brand-marquee-item:hover .brand-marquee-text{color:var(--orange-2);}

/* ---- Google reviews (sits directly under the brand marquee) ---- */
.reviews-section{padding:28px 0 30px;background:var(--bg);}
.reviews-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:18px;}
.reviews-score{display:flex;align-items:center;gap:12px;}
.reviews-score>b{font-family:var(--font-display);font-size:48px;line-height:.9;color:var(--text);}
/* Google 'G' in a white disc, so the score reads as Google's at a glance */
.g-badge{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#fff;flex:0 0 auto;}
.g-badge .g-logo{width:24px;height:24px;}
/* "Google" in Google's letter colours, always written the normal way — capital G, bold, in
   the body font — even where the surrounding label is small mono capitals ("195 Google
   reviews", "Google · Oct 2026"). */
.g-word{white-space:nowrap;font-weight:700;font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:1.1em;}
.g-word span:nth-child(1),.g-word span:nth-child(4){color:#4285F4;}
.g-word span:nth-child(2),.g-word span:nth-child(6){color:#EA4335;}
.g-word span:nth-child(3){color:#FBBC05;}
.g-word span:nth-child(5){color:#34A853;}
.reviews-link{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--road-line);white-space:nowrap;}
.reviews-link:hover{color:var(--text);}
.reviews-score-meta{display:flex;flex-direction:column;gap:4px;}
.reviews-count{font-family:var(--font-mono);font-size:12px;color:var(--text-faint);letter-spacing:.5px;text-transform:uppercase;}
.stars{display:inline-flex;align-items:center;gap:2px;line-height:0;}
.stars .star.on{color:var(--road-line);}
.stars .star.off{color:var(--steel-line);}
.reviews-empty{color:var(--text-faint);font-size:13.5px;}

.review-marquee-viewport{
  overflow:hidden;cursor:grab;user-select:none;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 50px,#000 calc(100% - 50px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 50px,#000 calc(100% - 50px),transparent 100%);
}
.review-marquee-viewport.dragging{cursor:grabbing;}
/* Not looping (too few reviews): each review once, in a row you can swipe on a phone,
   centred when they all fit. */
.review-marquee-viewport.static{cursor:default;-webkit-mask-image:none;mask-image:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:auto;user-select:auto;}
.review-marquee-viewport.static::-webkit-scrollbar{display:none;}
.review-marquee-viewport.static .review-marquee-track{margin:0 auto;}
.review-marquee-viewport.static .review-card{scroll-snap-align:center;}
/* Cards size to their own text (flex-start), so a short review leaves no empty block under it. */
.review-marquee-track{display:flex;align-items:flex-start;gap:14px;width:max-content;will-change:transform;padding:4px 24px;}
.review-card{position:relative;flex:0 0 320px;background:var(--bg-1);border:1px solid var(--steel-line);border-top:3px solid var(--road-line);
  border-radius:var(--radius-lg);padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;}
.review-top{display:flex;align-items:center;gap:10px;}
.review-avatar{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;color:#161616;}
.review-avatar.tone-0{background:var(--orange);}
.review-avatar.tone-1{background:var(--road-line);}
.review-avatar.tone-2{background:#4fb3a9;}
.review-avatar.tone-3{background:#c9c4bd;}
.review-who{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1;}
.review-author{font-weight:700;font-size:14.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.review-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);letter-spacing:.4px;text-transform:uppercase;}
.review-g{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:#fff;position:relative;z-index:1;}
.review-g .g-logo{width:15px;height:15px;}
.review-text{font-size:14px;line-height:1.55;color:var(--text-dim);margin:0;}

.section{padding:52px 0;}
/* .section's shorthand padding was wiping out .wrap's side padding on pages that use both
   (cart, checkout, FAQ…), so on a phone their text ran right to the edge of the screen. */
.wrap.section{padding-left:24px;padding-right:24px;}

/* ---- White lower half of the homepage ----
   Everything under the hazard line (categories, models, brands, the parts catalogue) sits on
   white. The palette variables are redefined for these sections only, so every card, filter,
   button and heading inside switches over together. The road-line yellow is darkened here:
   bright amber text is unreadable on white. */
.light-zone{
  /* warm light-grey page, pure-white cards on top so every card reads as its own object */
  --bg:#e9e7e3; --bg-1:#ffffff; --bg-2:#f3f1ee; --bg-3:#eceae6;
  --steel:#c4c0b9; --steel-line:#d9d6d0;
  --text:#1b1b1b; --text-dim:#4f4d49; --text-faint:#7d7a75;
  --road-line:#b07500; --orange-2:#d6520b;
  --shadow:0 8px 24px rgba(0,0,0,.10);
  background:var(--bg);color:var(--text);
}
.light-zone .cat-tile,.light-zone .model-tile,.light-zone .brand-tile,.light-zone .pcard,.light-zone .filters{box-shadow:0 1px 3px rgba(0,0,0,.06);}
.light-zone .cat-tile:hover,.light-zone .model-tile:hover,.light-zone .brand-tile:hover,.light-zone .pcard:hover{box-shadow:0 6px 18px rgba(0,0,0,.10);}
/* stock badges keep their dark chips so they stay readable on top of photos */
.light-zone .pcard .sku-tag{color:#d7d4ce;border-color:rgba(255,255,255,.12);}
/* "Photo not yet uploaded" placeholders are a dark built-in image; on white, flip them light
   (invert + hue-rotate keeps the orange icon orange). Real photos are untouched. */
.light-zone .pcard .pimg img[src^="data:image/svg"]{filter:invert(.94) hue-rotate(180deg);}
/* no dark strip between the white catalogue and the footer */
.light-zone#catalog{padding-bottom:40px;}
.light-zone#catalog + footer.site,.light-zone + footer.site{margin-top:0;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:26px;}
.section-head h2{font-size:34px;}
.cat-strip{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;}
.cat-tile{background:var(--bg-1);border:1px solid var(--steel-line);border-radius:var(--radius);padding:18px 12px;text-align:center;transition:border-color .15s,transform .15s;color:var(--text);}
.cat-tile:hover{border-color:var(--orange);transform:translateY(-3px);}
.cat-tile.active{border-color:var(--orange);background:var(--bg-2);}
.cat-tile svg{width:26px;height:26px;color:var(--orange-2);margin:0 auto 10px;}
/* No photo yet: the icon sits in a square the same size as a photo, so photo and icon
   tiles line up. padding-top:100% rather than aspect-ratio, for older phones. */
.cat-tile .cat-icon{display:block;position:relative;width:100%;padding-top:100%;margin-bottom:10px;border-radius:3px;background:var(--bg-2);}
.cat-tile .cat-icon svg{position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;}
.cat-tile .name{font-size:12px;font-weight:700;letter-spacing:.2px;}
.cat-tile .count{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);margin-top:3px;}

.catalog-layout{display:grid;grid-template-columns:230px 1fr;gap:36px;align-items:start;}
.filters{background:var(--bg-1);border:1px solid var(--steel-line);border-radius:var(--radius-lg);padding:20px;position:sticky;top:90px;}
.filters h4{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-family:var(--font-mono);color:var(--text-dim);margin-bottom:14px;}
.filter-group{margin-bottom:24px;}
.filter-group label.opt{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-dim);padding:5px 0;cursor:pointer;}
.filter-group input[type=checkbox]{accent-color:var(--orange);width:14px;height:14px;}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.toolbar .count{font-size:13.5px;color:var(--text-faint);white-space:nowrap;}
.toolbar select{background:var(--bg-1);border:1px solid var(--steel-line);color:var(--text);padding:8px 10px;border-radius:var(--radius);font-size:13px;}

.grid-products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.pcard{background:var(--bg-1);border:1px solid var(--steel-line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s;position:relative;}
.pcard:hover{border-color:var(--steel-light);transform:translateY(-2px);}
.pcard .pimg{aspect-ratio:4/3;background:var(--bg-2);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;border-bottom:1px solid var(--steel-line);}
.pcard .pimg img{width:100%;height:100%;object-fit:cover;}
.pcard .sku-tag{position:absolute;top:9px;left:9px;background:rgba(15,15,15,.85);border:1px solid var(--steel-line);font-family:var(--font-mono);font-size:10px;padding:3px 7px;border-radius:2px;color:var(--text-dim);letter-spacing:.5px;}
.pcard .stock-badge{position:absolute;top:9px;right:9px;}
.pcard .pbody{padding:15px;display:flex;flex-direction:column;gap:8px;flex:1;}
.pcard .pcat{font-family:var(--font-mono);font-size:10px;color:var(--orange-2);letter-spacing:1px;text-transform:uppercase;}
.pcard .pname{font-size:15px;font-weight:700;line-height:1.3;}
.pcard .pdesc{font-size:12.5px;color:var(--text-faint);line-height:1.5;flex:1;}
/* Shown only on results matched by an alternate/competitor part number.
   Flexbox + border/background only — no aspect-ratio, inset or grid order,
   which older phones on this site don't support. */
.xref-badge{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;font-family:var(--font-mono);font-size:10px;font-weight:600;line-height:1.3;padding:4px 8px;border-radius:2px;background:var(--ok-bg);color:var(--ok);border:1px solid var(--ok);letter-spacing:.3px;}
.xref-badge svg{flex:0 0 auto;}
.pcard .pfoot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.pcard .pprice{font-family:var(--font-mono);font-size:19px;font-weight:700;color:var(--text);}
.pcard .pprice .was{font-size:12.5px;color:var(--text-faint);text-decoration:line-through;font-weight:400;margin-right:6px;}
.sale-badge{position:absolute;top:9px;right:9px;background:var(--orange);color:#161616;font-family:var(--font-mono);font-size:10.5px;font-weight:800;letter-spacing:.5px;padding:4px 8px;border-radius:2px;text-transform:uppercase;}
.pcard.has-sale .stock-badge{top:39px;}
.pcard .add-btn{background:var(--bg-3);border:1px solid var(--steel-line);color:var(--text);width:38px;height:38px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;}
.pcard .add-btn:hover{background:var(--orange);border-color:var(--orange);color:#161616;}
.empty-state{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--text-faint);}
.empty-state svg{width:44px;height:44px;margin:0 auto 14px;opacity:.5;}

/* brand grid + vehicle model grid (same visual language as category tiles) */
.brand-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
.brand-tile{background:var(--bg-1);border:1px solid var(--steel-line);border-radius:var(--radius);padding:20px 12px;text-align:center;transition:border-color .15s,transform .15s;color:var(--text);}
.brand-tile:hover{border-color:var(--orange);transform:translateY(-3px);}
.brand-tile .name{font-family:var(--font-display);font-size:18px;letter-spacing:.5px;}
.brand-tile .count{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);margin-top:4px;}

.model-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.model-tile{background:var(--bg-1);border:1px solid var(--steel-line);border-radius:var(--radius-lg);padding:22px 16px;text-align:left;transition:border-color .15s,transform .15s;color:var(--text);position:relative;overflow:hidden;}
.model-tile:hover{border-color:var(--orange);transform:translateY(-3px);}
.model-tile::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:repeating-linear-gradient(135deg,var(--orange) 0 8px,#1a1a1a 8px 16px);}
.model-tile .name{font-family:var(--font-display);font-size:22px;letter-spacing:.3px;margin-top:6px;}
.model-tile .sub{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);text-transform:uppercase;letter-spacing:1px;margin-top:4px;}

/* WhatsApp floating button */
.whatsapp-float{
  position:fixed;bottom:24px;left:24px;z-index:60;
  width:58px;height:58px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.4);
  transition:transform .15s;
}
.whatsapp-float:hover{transform:scale(1.08);}
.whatsapp-float svg{width:30px;height:30px;}

/* policy / content pages (FAQ, Returns, Guarantee, About) */
.content-page{max-width:760px;}
.content-page p{color:var(--text-dim);font-size:15px;line-height:1.7;margin-bottom:16px;}
.content-page h1{margin-bottom:24px;}
.policy-nav{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap;}
.policy-nav a{background:var(--bg-1);border:1px solid var(--steel-line);border-radius:var(--radius);padding:9px 16px;font-size:13px;font-weight:600;color:var(--text-dim);}
.policy-nav a:hover,.policy-nav a.active{border-color:var(--orange);color:var(--orange-2);}

/* free shipping progress bar (cart/checkout) */
.ship-progress{background:var(--bg-1);border:1px solid var(--steel-line);border-radius:var(--radius);padding:14px 16px;margin-bottom:20px;}
.ship-progress .msg{font-size:13px;color:var(--text-dim);margin-bottom:8px;}
.ship-progress .msg b{color:var(--orange-2);}
.ship-progress .track{height:6px;background:var(--bg-2);border-radius:3px;overflow:hidden;}
.ship-progress .fill{height:100%;background:var(--orange);transition:width .3s ease;}

.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:30px;flex-wrap:wrap;}
.pager button{background:var(--bg-1);border:1px solid var(--steel-line);color:var(--text-dim);min-width:36px;height:36px;padding:0 10px;border-radius:var(--radius);font-size:13px;font-family:var(--font-mono);}
.pager a:hover button{border-color:var(--orange);color:var(--orange-2);}
.pager button.active{background:var(--orange);border-color:var(--orange);color:#161616;font-weight:700;}
.pager button:disabled{opacity:.35;cursor:not-allowed;}
.pager .pager-gap{color:var(--text-faint);padding:0 4px;}

/* product detail */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:40px 0;}
.product-detail img{width:100%;border-radius:6px;border:1px solid var(--steel-line);}
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:22px 0 0;font-size:12.5px;color:var(--text-faint);}
.crumbs a{color:var(--text-dim);}
.crumbs a:hover{color:var(--road-line);}
.crumbs svg{color:var(--text-faint);}
.crumbs [aria-current]{font-family:var(--font-mono);color:var(--text);}
.crumbs + .product-detail{padding-top:18px;}
.xref-list{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 14px;}
.xref-chip{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);background:var(--bg-2);border:1px solid var(--steel-line);border-radius:var(--radius);padding:3px 8px;}
.xref-chip b{color:var(--text);}
.ask-part{margin-top:22px;padding-top:18px;border-top:1px solid var(--steel-line);}
.ask-part-label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:10px;}
.ask-part-btns{display:flex;flex-wrap:wrap;gap:10px;}
.ask-part-btns .btn{padding:10px 16px;font-size:13px;}
.ask-part-btns .ask-wa svg{color:#25D366;}
/* Phones only: price + Add to Cart pinned to the bottom of the screen on product pages. */
.buy-bar{display:none;}
.qty-stepper{display:flex;align-items:center;border:1px solid var(--steel-line);border-radius:var(--radius);width:fit-content;}
.qty-stepper button{background:var(--bg-2);border:none;color:var(--text);width:34px;height:34px;font-size:16px;}
.qty-stepper input{width:44px;text-align:center;border:none;background:transparent;color:var(--text);font-family:var(--font-mono);font-size:14px;padding:0;}

/* cart page */
.cart-table{width:100%;border-collapse:collapse;}
.cart-table td{padding:16px 10px;border-bottom:1px solid var(--steel-line);vertical-align:middle;}
.cart-table img{width:64px;height:64px;object-fit:cover;border-radius:var(--radius);background:var(--bg-2);}
.cart-summary{background:var(--bg-1);border:1px solid var(--steel-line);border-radius:var(--radius-lg);padding:22px;max-width:380px;margin-left:auto;}
.summary-line{display:flex;justify-content:space-between;font-size:14px;padding:7px 0;color:var(--text-dim);}
.summary-line.total{border-top:1px solid var(--steel-line);margin-top:8px;padding-top:14px;font-size:19px;color:var(--text);font-weight:700;font-family:var(--font-mono);}

/* checkout */
.steps{display:flex;gap:8px;margin-bottom:24px;max-width:600px;}
.step-pill{flex:1;text-align:center;padding:10px 6px;border-radius:var(--radius);background:var(--bg-2);border:1px solid var(--steel-line);font-size:11.5px;font-family:var(--font-mono);letter-spacing:.5px;color:var(--text-faint);text-transform:uppercase;}
.step-pill.active{border-color:var(--orange);color:var(--orange-2);}
.step-pill.done{color:var(--ok);border-color:var(--ok-bg);}
.ship-option,.pay-option{display:flex;align-items:center;gap:14px;border:1px solid var(--steel-line);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .15s;max-width:600px;}
.ship-option:hover,.pay-option:hover{border-color:var(--steel-light);}
.ship-option input,.pay-option input{accent-color:var(--orange);width:16px;height:16px;}
.opt-title{font-weight:700;font-size:14px;}
.opt-sub{font-size:12px;color:var(--text-faint);margin-top:2px;}
.opt-price{font-family:var(--font-mono);font-weight:700;margin-left:auto;}
.payfast-panel{background:#0d3b66;border:1px solid #1a5490;border-radius:var(--radius);padding:20px;text-align:center;margin:14px 0;max-width:600px;}
.confirm-box{text-align:center;padding:40px 10px;max-width:520px;margin:0 auto;}
.confirm-box .check-circle{width:64px;height:64px;border-radius:50%;background:var(--ok-bg);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--ok);}

/* footer */
footer.site{background:var(--bg-1);border-top:1px solid var(--steel-line);margin-top:40px;padding:48px 0 0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;}
.footer-grid h5{font-family:var(--font-mono);font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);margin-bottom:14px;}
.footer-grid p,.footer-grid a{font-size:13.5px;color:var(--text-faint);display:block;margin-bottom:9px;}
.footer-grid a:hover{color:var(--orange-2);}
.pay-icons{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.pay-icons span{background:var(--bg-3);border:1px solid var(--steel-line);padding:5px 9px;border-radius:2px;font-family:var(--font-mono);font-size:10px;color:var(--text-dim);}
.footer-bottom{border-top:1px solid var(--steel-line);padding:18px 0;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-faint);}

/* admin */
.admin-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#1c1c1c 0 2px,#171717 2px 40px);}
.admin-login-card{background:var(--bg-1);border:1px solid var(--steel-line);border-radius:var(--radius-lg);padding:36px;width:380px;max-width:90vw;box-shadow:var(--shadow);position:relative;}
.admin-login-card::before{content:'';position:absolute;top:-1px;left:24px;right:24px;height:6px;background:repeating-linear-gradient(135deg,var(--orange) 0 10px,#1a1a1a 10px 20px);}
.admin-shell{display:grid;grid-template-columns:220px 1fr;min-height:100vh;}
.admin-sidebar{background:var(--bg-1);border-right:1px solid var(--steel-line);padding:22px 0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.admin-sidebar .logo{padding:0 20px 20px;border-bottom:1px solid var(--steel-line);margin-bottom:14px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.admin-nav a{width:100%;text-align:left;background:none;border:none;color:var(--text-dim);padding:12px 20px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:11px;border-left:3px solid transparent;}
.admin-nav a:hover{color:var(--text);background:var(--bg-2);}
.admin-nav a.active{color:var(--orange-2);background:var(--bg-2);border-left-color:var(--orange);}
.admin-sidebar .sidebar-foot{padding:14px 20px 0;border-top:1px solid var(--steel-line);margin-top:auto;}
.admin-main{padding:30px 34px;max-width:1200px;}
.admin-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;flex-wrap:wrap;gap:12px;}
.admin-topbar h2{font-size:30px;}
.admin-topbar .sub{font-size:13px;color:var(--text-faint);margin-top:3px;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:30px;}
.stat-card{background:var(--bg-1);border:1px solid var(--steel-line);border-radius:var(--radius-lg);padding:20px;}
.stat-card .lbl{font-family:var(--font-mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint);}
.stat-card .val{font-family:var(--font-display);font-size:36px;margin-top:6px;color:var(--text);}
.stat-card.warn .val{color:var(--low);}
.panel{background:var(--bg-1);border:1px solid var(--steel-line);border-radius:var(--radius-lg);}
.panel-head{padding:16px 20px;border-bottom:1px solid var(--steel-line);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.panel-head h4{font-family:var(--font-mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);}
.table-wrap{overflow-x:auto;}
table.admin-table{width:100%;border-collapse:collapse;font-size:13.5px;}
table.admin-table th{text-align:left;font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-faint);padding:12px 16px;border-bottom:1px solid var(--steel-line);white-space:nowrap;}
table.admin-table td{padding:12px 16px;border-bottom:1px solid var(--steel-line);vertical-align:middle;}
table.admin-table tr:last-child td{border-bottom:none;}
table.admin-table tr:hover td{background:var(--bg-2);}
table.admin-table tr.low-row td:first-child{box-shadow:inset 3px 0 0 var(--low);}
table.admin-table tr.out-row td:first-child{box-shadow:inset 3px 0 0 var(--bad);}
.row-thumb{width:40px;height:40px;border-radius:var(--radius);object-fit:cover;background:var(--bg-3);}
.row-actions{display:flex;gap:6px;}
.icon-btn{background:var(--bg-3);border:1px solid var(--steel-line);color:var(--text-dim);width:30px;height:30px;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;}
.icon-btn:hover{border-color:var(--orange);color:var(--orange-2);}
.cat-chip{font-family:var(--font-mono);font-size:10.5px;background:var(--bg-3);padding:3px 8px;border-radius:2px;color:var(--text-dim);}
.upload-box{border:2px dashed var(--steel-line);border-radius:var(--radius);padding:20px;text-align:center;background:var(--bg);}
.upload-box svg{width:26px;height:26px;color:var(--text-faint);margin-bottom:8px;}
.img-preview{width:100%;max-width:220px;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);margin-bottom:10px;border:1px solid var(--steel-line);}
.progress-bar-outer{background:var(--bg-2);border:1px solid var(--steel-line);border-radius:6px;height:10px;overflow:hidden;max-width:420px;}
.progress-bar-inner{background:var(--orange);height:100%;transition:width .2s ease;}

/* Small laptops: six nav buttons plus search and cart only just miss one line, which
   pushed search and cart onto a second header row. Trim the padding and the search width
   so the whole header stays one row down to the tablet breakpoint. */
@media (max-width:1240px) and (min-width:1025px){
  header.site .header-row{gap:12px;}
  nav.main{gap:6px;}
  nav.main > a,.nav-dd-btn{padding:11px 13px;font-size:14px;}
  .search-box input{width:180px;}
}

/* ---- Compact header: phones and tablets ----
   One row — menu button, logo, cart — with search on its own full-width row beneath.
   The six nav buttons, the email address and the staff login all move into the drawer,
   so the top of a phone screen carries two rows of chrome instead of five. */
@media (max-width:1024px){
  header.site .header-row{flex-wrap:nowrap;padding:10px 16px;gap:12px;}
  .menu-toggle{display:inline-flex;}
  nav.main{display:none;}
  .header-actions .search-box{display:none;}
  .logo--compact-only{display:flex;}
  .logo{margin-right:auto;}
  .logo img{height:40px;}
  .cart-btn{padding:10px 13px;}
  .cart-btn .cart-label{display:none;}
  .mobile-search{display:block;padding:0 0 12px;}
  /* "header.site .wrap" is the header's flex row; it also matches this inner wrap and
     outranks a plain ".mobile-search .wrap", which shrank the search box to its content. */
  header.site .mobile-search .wrap{display:block;padding:0 16px;}
  /* The header already carries the logo and a search box here, so the hero drops both
     rather than repeating them, and shrinks to the stats band. */
  .hero-search{display:none;}
  /* The hero logo is the page's <h1>, and Google indexes the mobile layout — so it is
     visually hidden here, not display:none, and stays a real heading for search engines
     and screen readers. (clip, not clip-path: older phones only know clip.) */
  .hero-logo-display{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .hero{padding:18px 0;}
  .trust-item{flex:1 1 50%;}
  .trust-item:nth-child(3){border-left:none;}
  .trust-item:nth-child(n+3){border-top:1px solid var(--steel-line);}
}

@media (max-width:1000px){
  .hero-logo-display img{max-width:460px;}
  .hero-bar{gap:24px;}
  .cat-strip{grid-template-columns:repeat(4,1fr);}
  .brand-strip{grid-template-columns:repeat(3,1fr);}
  .model-strip{grid-template-columns:repeat(2,1fr);}
  .catalog-layout{grid-template-columns:1fr;}
  .filters{position:static;}
  .catalog-layout.search-active{display:flex;flex-direction:column;}
  .catalog-layout.search-active .filters{order:2;}
  .catalog-layout.search-active .catalog-results{order:1;}
  .grid-products{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .admin-shell{grid-template-columns:1fr;}
  .admin-sidebar{position:static;height:auto;flex-direction:row;overflow-x:auto;padding:12px;}
  .admin-sidebar .logo,.sidebar-foot{display:none;}
  .admin-nav{display:flex;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .product-detail{grid-template-columns:1fr;}
}
/* Hero stacks before the nav does — the search bar needs the full width first. */
@media (max-width:760px){
  .hero{padding:26px 0 24px;}
  .hero-logo-display{padding-bottom:20px;}
  .hero-logo-display img{max-width:340px;}
  .hero-bar{flex-direction:column;align-items:stretch;gap:18px;}
  .hero-search{flex:1 1 auto;max-width:100%;}
  .hero-stats{justify-content:space-between;gap:12px;}
  .hero-stat{text-align:center;flex:1 1 0;}
  .hero-stat b{font-size:26px;}
}
@media (max-width:640px){
  /* Top strip: one line on a phone — tap-to-call and the delivery promise. The email
     and staff login live in the menu drawer. */
  .topbar .wrap{flex-wrap:nowrap;justify-content:space-between;padding:7px 16px;font-size:12px;}
  .topbar .split{gap:12px;}
  .tb-email,.tb-staff{display:none;}
  .reviews-section{padding:22px 0 24px;}
  .reviews-head{margin-bottom:14px;}
  .reviews-score{gap:10px;}
  .reviews-score>b{font-size:38px;}
  .g-badge{width:34px;height:34px;}
  .g-badge .g-logo{width:20px;height:20px;}
  /* ~80% of the screen wide, so the next review peeks in and it's clear you can swipe */
  .review-card{flex:0 0 80vw;max-width:320px;}
  .review-marquee-track{gap:10px;padding:2px 16px;}
  .review-marquee-viewport.static .review-card{scroll-snap-align:start;}
  .review-marquee-viewport.static{scroll-padding-left:16px;}
  /* Two cards across, as parts shoppers expect when scrolling a long catalogue. One
     column meant a full screen-height per part — 1,300 parts is a lot of thumb. The
     description is dropped from the card (it's on the product page) to keep them even. */
  .grid-products{grid-template-columns:repeat(2,1fr);gap:12px;}
  .pcard .pbody{padding:11px;gap:6px;}
  .pcard .pdesc{display:none;}
  .pcard .pname{font-size:13.5px;}
  .pcard .pcat{font-size:9px;letter-spacing:.6px;}
  .pcard .pprice{font-size:15px;}
  .pcard .pprice .was{display:block;margin:0;font-size:11px;}
  .pcard .add-btn{width:34px;height:34px;flex:0 0 auto;}
  .pcard .sku-tag{top:6px;left:6px;font-size:9px;padding:2px 5px;}
  .pcard .stock-badge{top:6px;right:6px;font-size:9px;padding:3px 6px;}
  /* On a phone the stats band only repeats what the trust strip says more usefully, and
     costs a screen-third before the first category. The hero keeps its (visually hidden)
     <h1> but collapses to nothing visible. Tablets still show the stats. */
  .hero{padding:0;border-bottom:none;}
  .hero-stats{display:none;}
  /* Trust strip: one slim row you swipe sideways, instead of a 2x2 block that took a
     quarter of the screen. The fade on the right edge hints that there's more. */
  .trust-strip .wrap{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
    padding:0 6px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);}
  .trust-strip .wrap::-webkit-scrollbar{display:none;}
  .trust-item,.trust-item:nth-child(n){flex:0 0 auto;padding:9px 12px;gap:8px;border-top:none;scroll-snap-align:start;}
  .trust-item + .trust-item{border-left:1px solid var(--steel-line);}
  .trust-item > svg{width:18px;height:18px;}
  .trust-item b{font-size:12.5px;white-space:nowrap;}
  .trust-item span{font-size:11px;white-space:nowrap;margin-top:0;}
  /* minmax(0,…) keeps the three columns equal even when a long category name
     ("Hydraulic Brake & Clutch components") would otherwise push one wider than the screen. */
  .cat-strip{grid-template-columns:repeat(3,minmax(0,1fr));}
  .cat-tile{min-width:0;overflow-wrap:break-word;}
  .brand-strip{grid-template-columns:repeat(2,1fr);}
  .model-strip{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .whatsapp-float{width:50px;height:50px;bottom:16px;left:16px;}
  .whatsapp-float svg{width:26px;height:26px;}
  .buy-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:var(--bg-1);border-top:1px solid var(--steel-line);box-shadow:0 -6px 20px rgba(0,0,0,.45);}
  .buy-bar-info{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
  .buy-bar-price{font-family:var(--font-mono);font-weight:700;font-size:19px;color:var(--text);}
  .buy-bar-stock{font-size:11.5px;font-weight:600;}
  .buy-bar-stock.in{color:var(--ok);}
  .buy-bar-stock.out{color:var(--text-faint);}
  .buy-bar .btn{padding:12px 18px;white-space:nowrap;}
  body.has-buy-bar{padding-bottom:72px;}
  body.has-buy-bar .whatsapp-float{bottom:84px;}
  .crumbs + .product-detail{padding-top:14px;gap:22px;}
}

/* ---- Phone & tablet catalogue: filters fold away behind a button ---- */
.filters-btn{display:none;}
@media (max-width:1000px){
  .toolbar{flex-wrap:nowrap;}
  .toolbar .count{flex:1;}
  .filters-btn{display:inline-flex;align-items:center;gap:7px;background:var(--bg-1);border:1px solid var(--steel-line);color:var(--text);
    padding:8px 12px;border-radius:var(--radius);font-size:13px;font-weight:700;cursor:pointer;}
  .filters-btn svg{color:var(--road-line);}
  .filters-btn-count{background:var(--orange);color:#161616;border-radius:9px;min-width:18px;height:18px;padding:0 5px;font-size:11px;line-height:18px;text-align:center;}
  html.js .catalog-layout .filters{display:none;}
  html.js .catalog-layout.filters-open .filters{display:block;}
  .catalog-layout.filters-open .filters-btn{border-color:var(--road-line);}
  /* the filter panel opens just under the toolbar, above the results */
  .catalog-layout{display:flex;flex-direction:column;gap:14px;}
  .catalog-layout .catalog-results{order:1;}
  .catalog-layout .filters{order:2;}
  .catalog-layout.filters-open .filters{order:0;}
  .catalog-layout.filters-open .catalog-results{order:1;}
}
@media (max-width:640px){
  /* iPhones zoom the whole page in when you tap a field with text smaller than 16px,
     and leave it zoomed. 16px stops that. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px;}
  .section{padding-top:34px;padding-bottom:34px;}
  .wrap.section{padding-left:16px;padding-right:16px;}
  .section-head{margin-bottom:16px;}
  /* Vehicle models: a row you swipe through instead of a tall stack of cards. */
  .model-strip{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 -16px;padding:0 16px 4px;scrollbar-width:none;}
  .model-strip::-webkit-scrollbar{display:none;}
  .model-strip .model-tile{flex:0 0 62%;scroll-snap-align:start;}
  /* Footer: the two link lists side by side, everything else full width. */
  footer.site{padding-top:30px;margin-top:20px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:22px 16px;padding-bottom:22px;}
  .footer-grid > div:first-child,.footer-grid > div:last-child{grid-column:1 / -1;}
  .footer-grid p,.footer-grid a{margin-bottom:7px;}
  .footer-grid a{padding:3px 0;}
  .footer-bottom{flex-direction:column;gap:8px;align-items:flex-start;padding-bottom:84px;}
  /* Cart: each line becomes a small card instead of a squeezed table row. */
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%;}
  .cart-table thead{display:none;}
  .cart-table tr{display:grid;grid-template-columns:64px 1fr auto;gap:6px 12px;align-items:start;padding:14px 0;border-bottom:1px solid var(--steel-line);}
  .cart-table td{border:none;padding:0;width:auto !important;text-align:left !important;}
  .cart-table td:nth-child(1){grid-column:1;grid-row:1 / span 2;}
  .cart-table td:nth-child(2){grid-column:2;grid-row:1;}
  .cart-table td:nth-child(3){grid-column:2;grid-row:2;font-size:12px;color:var(--text-faint);}
  .cart-table td:nth-child(3)::after{content:' each';}
  .cart-table td:nth-child(4){grid-column:3;grid-row:2;align-self:end;}
  .cart-table td:nth-child(5){grid-column:3;grid-row:1;justify-self:end;}
  .cart-summary{max-width:none;margin-left:0;}
}

/* ---- Sales team page (ons-verkoopsmanne.php) ---- */
.staff-grid{display:flex;flex-wrap:wrap;gap:22px;}
.staff-card{flex:1 1 calc(25% - 17px);min-width:210px;}
.staff-card{background:var(--bg-1);border:1px solid var(--steel-line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s;}
.staff-card:hover{border-color:var(--orange);transform:translateY(-3px);}
.staff-photo{aspect-ratio:1;background:var(--bg-2);overflow:hidden;border-bottom:1px solid var(--steel-line);}
.staff-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.staff-body{padding:16px;display:flex;flex-direction:column;gap:12px;flex:1;}
.staff-body h3{font-family:var(--font-display);font-size:26px;letter-spacing:.5px;color:var(--text);}
.staff-contacts{display:flex;flex-direction:column;gap:7px;margin-top:auto;}
.staff-link{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-dim);padding:8px 10px;border:1px solid var(--steel-line);border-radius:var(--radius);background:var(--bg-2);transition:border-color .15s,color .15s;word-break:break-all;}
.staff-link:hover{border-color:var(--orange);color:var(--orange-2);}
.staff-link svg{flex-shrink:0;}
.staff-link--wa{background:rgba(37,211,102,.09);border-color:rgba(37,211,102,.35);color:#4ade80;}
.staff-link--wa:hover{border-color:#25D366;color:#25D366;}
.staff-link--muted{opacity:.55;cursor:default;}
.staff-link--muted:hover{border-color:var(--steel-line);color:var(--text-dim);}

.shop-slideshow{position:relative;border:1px solid var(--steel-line);border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-1);}
.shop-slides{position:relative;padding-top:62.5%;background:var(--bg-2);}
@supports (aspect-ratio:16/10){.shop-slides{padding-top:0;aspect-ratio:16/10;}}
.shop-slide{position:absolute;top:0;left:0;right:0;bottom:0;margin:0;opacity:0;transition:opacity .55s ease;pointer-events:none;}
.shop-slide.active{opacity:1;pointer-events:auto;}
.shop-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.shop-slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 20px 16px;font-size:13.5px;color:#fff;background:linear-gradient(transparent,rgba(10,10,10,.85));}
.shop-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(15,15,15,.72);border:1px solid var(--steel-line);color:#fff;font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,border-color .15s;}
.shop-nav:hover{background:var(--orange);border-color:var(--orange);color:#161616;}
.shop-prev{left:14px;}
.shop-next{right:14px;}
.shop-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;}
.shop-dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:background .15s,transform .15s;}
.shop-dot.active{background:var(--orange);transform:scale(1.25);}

@media (max-width:1000px){
  .staff-card{flex:1 1 calc(50% - 11px);}
  .shop-slides{padding-top:75%;}
  @supports (aspect-ratio:4/3){.shop-slides{padding-top:0;aspect-ratio:4/3;}}
}
@media (max-width:640px){
  .staff-grid{gap:16px;}
  .staff-card{flex:1 1 100%;}
  .shop-nav{width:38px;height:38px;font-size:22px;}
  .shop-slide figcaption{font-size:12px;padding:22px 14px 14px;}
}